@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800&display=swap');
/* ===================================================================
   BIGGIE BRANDS — Namma-blueprint build
   Light monochrome canvas · giant condensed type · mono micro-labels
   Full-screen MENU overlay · dark-mode toggle · cycling city clock
   GSAP + Lenis. Hero has NO cursor-reactive distortion (per brief).
   =================================================================== */

@font-face {
  font-family: "Anton";
  src: url("../fonts/anton.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Namma's exact display/wordmark face — drop the file in /assets/fonts to enable. Anton stands in until then. */
@font-face {
  font-family: "Mixtape Extra Condensed";
  src: url("../fonts/mixtape-extra-condensed.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "TT Norms Pro";
  src: url("../fonts/TT Norms Pro/TTNormsPro-Normal.woff2") format("woff2"),
       url("../fonts/TT Norms Pro/TTNormsPro-Normal.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "TT Norms Pro";
  src: url("../fonts/TT Norms Pro/TTNormsPro-NormalItalic.woff2") format("woff2"),
       url("../fonts/TT Norms Pro/TTNormsPro-NormalItalic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --bg: #000000;
  --ink: #ededea;
  --ink-2: rgba(237, 237, 234, 0.55);
  --ink-3: rgba(237, 237, 234, 0.30);
  --line: rgba(237, 237, 234, 0.12);
  --panel: #111111;
  --accent: #2AC4F3;
  /* Biggie blue */

  --display: "Mixtape Extra Condensed", "Anton", Impact, sans-serif;
  --wordmark: "Mixtape Extra Condensed", "Anton", Impact, sans-serif;
  --serif: "adobe-garamond-pro", "ITC Garamond Std", Garamond, Georgia, serif;
  --serif-read: "TT Norms Pro", "EB Garamond", Georgia, serif;
  --mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --body: "TT Norms Pro", "Inter", system-ui, -apple-system, sans-serif;

  --gutter: clamp(18px, 3.4vw, 40px);
  --bar-h: 110px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.76, 0, 0.24, 1);
  color-scheme: dark;
}

html.light {
  --bg: #e4e4e2;
  --ink: #111111;
  --ink-2: rgba(17, 17, 17, 0.55);
  --ink-3: rgba(17, 17, 17, 0.30);
  --line: rgba(17, 17, 17, 0.16);
  --panel: #d8d8d4;
  color-scheme: light;
}

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

html {
  scrollbar-width: thin;
  scrollbar-color: var(--ink-3) transparent;
  scrollbar-gutter: stable;
  /* Belt and braces with body's overflow-x. The homepage lays out ~2300px
     wide rows inside the studio grid; if any of that escapes, the document
     widens, and because .topbar/.menu are position:fixed they size to that
     wider box — which pushed the hamburger clean off the right of the
     screen on the homepage only. Clip at the root so nothing can ever
     stretch the page sideways. `clip` (not `hidden`) so no scroll container
     is created and position:sticky keeps working. */
  overflow-x: clip;
}

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(15px, 1vw, 17px);
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  transition: background .6s var(--ease), color .6s var(--ease);
}

/* Page stage — wraps only <main> so GSAP can rotate it without breaking fixed-position siblings */
.page-stage {
  will-change: transform, opacity;
  transform-style: flat;
  opacity: 0;
}

::selection {
  background: var(--ink);
  color: var(--bg);
}

img,
video {
  display: block;
  max-width: 100%;
  -webkit-user-drag: none !important;
  -khtml-user-drag: none !important;
  -moz-user-drag: none !important;
  -o-user-drag: none !important;
  user-drag: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  pointer-events: none !important;
}

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

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

ul {
  list-style: none;
}

/* ---------- shared type ---------- */
.mono {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mono-sm {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.huge {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.82;
  letter-spacing: -0.04em;
}

.wrap {
  padding-inline: var(--gutter);
}

.section {
  padding-block: clamp(50px, 6vh, 90px);
}

/* ===================================================================
   TOP BAR  (persistent, mix-blend-difference so it reads over anything)
   =================================================================== */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 120;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: clamp(14px, 2vh, 20px) var(--gutter);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.topbar .grp {
  display: flex;
  align-items: center;
}

/* logo — white, no blend mode, always visible */
.tb-logo {
  display: flex;
  align-items: center;
}

.tb-logo-img {
  height: clamp(56px, 7.2vw, 88px);
  width: auto;
  display: block;
  /* keep image white — mix-blend-mode on dark page handles visibility */
  opacity: 0.92;
  transition: opacity 0.3s;
}

.tb-logo:hover .tb-logo-img {
  opacity: 1;
}

/* ── animated hamburger button ── */
.tb-ham {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 30px;
  padding: 4px 0;
  cursor: pointer;
  background: none;
  border: none;
}

.ham-line {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--accent);
  /* #2AC4F3 always */
  border-radius: 1px;
  transform-origin: center;
  transition: transform 0.38s var(--ease), opacity 0.25s var(--ease), width 0.38s var(--ease);
}

/* X state */
.tb-ham[aria-expanded="true"] .ham-line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.tb-ham[aria-expanded="true"] .ham-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.tb-ham[aria-expanded="true"] .ham-line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* subtle width stagger at rest — bottom line slightly shorter */
.ham-line:nth-child(3) {
  width: 70%;
}

.tb-ham[aria-expanded="true"] .ham-line:nth-child(3) {
  width: 100%;
}

/* ── hero word hover ── */
.hw {
  display: inline-block;
  cursor: default;
  transition: color 0.18s ease;
}

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

@media (max-width: 768px) {
  .topbar .grp {
    gap: 14px;
  }

}

/* ===================================================================
   FULL-SCREEN MENU OVERLAY  (the centerpiece)
   =================================================================== */
.menu {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: var(--bg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--bar-h) var(--gutter);
  /* initial hidden state — clip-path collapses to top edge; GSAP animates this open */
  clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  visibility: hidden;
  pointer-events: none;
  will-change: clip-path;
}

.menu.is-open {
  pointer-events: auto;
}

/* fallback when GSAP/JS unavailable */
.no-js-menu.is-open,
.menu.is-open.no-anim {
  clip-path: none;
  visibility: visible;
}

.menu-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 5vw, 90px);
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  will-change: transform;
  transform-origin: 50% -20%;
}

.menu-col {
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.6vw, 12px);
}

.m-link {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-block: 0.04em;
}

.m-link>span {
  display: inline-block;
  will-change: transform;
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  font-size: clamp(2.6rem, 8.5vw, 8.5rem);
  line-height: 1.02;
  transition: color 0.6s ease-in-out;
}

.m-link:hover>span {
  color: var(--accent);
}

.m-link .idx {
  position: absolute;
  top: 0.4em;
  right: 0;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-2);
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}

.m-link:hover .idx {
  opacity: 1;
}

/* — expanding thumbnail that slides open on hover — */
.m-visual {
  flex-shrink: 0;
  width: 0;
  height: clamp(3.8rem, 5.5vw, 6rem);
  border-radius: 0.28rem;
  background: var(--accent);
  margin-right: 0.55rem;
  overflow: hidden;
}

.menu-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  padding: 18px var(--gutter);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}

@media (max-width: 768px) {
  .menu-inner {
    grid-template-columns: 1fr;
  }

  .m-link>span {
    font-size: clamp(2.4rem, 13vw, 4rem);
  }

  .m-visual {
    height: 3rem;
  }
}

/* ===================================================================
   HERO  (giant centered statement)
   =================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--bar-h) var(--gutter);
  overflow: clip;
}

/* ── interchangeable fx slot — z-index:-1 keeps it behind all hero content ── */
/* isolation:isolate on .hero ensures -1 stays within the hero, not the page  */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.hero h1 {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.8;
  letter-spacing: -0.04em;
  font-size: clamp(3.4rem, 18vw, 19rem);
}

.hero h1 .line {
  display: block;
  overflow: clip;
}

.hero h1 .line>span {
  display: inline-block;
  will-change: transform;
}

.hero.sm {
  min-height: 88svh;
}

@media (max-width: 768px) {
  /* Same dead-space issue the About and Contact heroes had: 88svh of
     centered flex space stranded "Our work" in the middle of a mostly
     empty screen, with another big gap down to the botbar caption below
     it. Shrink to content height and pull the caption in close. Desktop
     (the 88svh rule above) is untouched. */
  .hero.sm {
    min-height: auto;
    padding-top: calc(var(--bar-h) + 8px);
    padding-bottom: 64px;
  }
}

/* bottom bar (hero only) */
.botbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px var(--gutter);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-2);
  pointer-events: none;
}

.botbar .clock b {
  font-weight: 400;
  color: var(--ink);
}

/* keeps the clock pinned right even when it's the only child of a
   space-between flex row (menu-foot / botbar on pages with no label text) */
.clock {
  margin-left: auto;
}

/* ===================================================================
   STATEMENT
   =================================================================== */
.lab {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
}

.lab::before {
  content: "(";
}

.lab::after {
  content: ")";
}

.statement-h {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: -0.04em;
  font-size: clamp(2.4rem, 7vw, 7rem);
  margin: clamp(20px, 4vh, 46px) auto clamp(30px, 6vh, 70px);
  max-width: 16ch;
  text-align: center;
}

.statement-lines {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.02;
  letter-spacing: -0.04em;
  font-size: clamp(1.5rem, 3.4vw, 3.1rem);
  max-width: 24ch;
  margin-inline: auto;
  text-align: center;
}

.statement-lines .ln {
  display: block;
  overflow: clip;
}

.statement-lines .ln>span {
  display: inline-block;
}

.statement-lines .dim {
  color: var(--accent);
}

/* playground — horizontal image strip */
.playstrip {
  margin-top: clamp(40px, 7vh, 90px);
  overflow: clip;
}

.playstrip-track {
  display: flex;
  gap: clamp(12px, 1.4vw, 20px);
  width: max-content;
  will-change: transform;
}

.playstrip-track .pl {
  width: clamp(180px, 22vw, 320px);
  aspect-ratio: 4/5;
  overflow: clip;
  background: var(--panel);
  flex: 0 0 auto;
}

.playstrip-track .pl:nth-child(even) {
  aspect-ratio: 5/4;
  align-self: flex-end;
}

.playstrip-track .pl img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===================================================================
   RADIAL SCROLL GALLERY
   =================================================================== */
.rg-outer {
  margin-top: clamp(50px, 8vh, 100px);
  margin-left: calc(-1 * var(--gutter));
  margin-right: calc(-1 * var(--gutter));
  overflow: hidden;
}

.rg-pin {
  position: relative;
}

.rg-mask {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to top, transparent 0%, black 30%, black 100%);
  mask-image: linear-gradient(to top, transparent 0%, black 30%, black 100%);
}

.rg-wheel {
  position: absolute;
  left: 50%;
  list-style: none;
  margin: 0;
  padding: 0;
  will-change: transform;
}

.rg-item {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;
}

.rg-card {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), filter 0.45s ease, opacity 0.45s ease, box-shadow 0.45s ease;
}

.rg-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.rg-card:hover img {
  transform: scale(1.05);
}

.rg-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.08) 55%, transparent 100%);
}

.rg-card-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 14px 12px;
}

.rg-card-cat {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 5px;
}

.rg-card-title {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 0.95rem;
  line-height: 1;
  color: #fff;
}

/* ===================================================================
   HERO PARALLAX  (aceternity-style scroll-driven grid)
   =================================================================== */
#hp-section {
  overflow: clip;
}

.hp-outer {
  /* Creates the scroll space — content is pinned inside hp-sticky */
  height: 280vh;
  position: relative;
}

.hp-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  perspective: 1200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hp-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding-top: clamp(40px, 6vh, 80px);
  padding-bottom: clamp(20px, 3vh, 40px);
}

.hp-title {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  line-height: 0.92;
  font-size: clamp(2.5rem, 7vw, 7rem);
  margin: clamp(16px, 2.5vh, 32px) 0;
}

.hp-sub {
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-size: clamp(1.1rem, 1.6vw, 1.5rem);
  color: var(--ink-2);
  white-space: nowrap;
  margin-bottom: clamp(20px, 3vh, 40px);
  line-height: 1.4;
}

.hp-rig {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.5vw, 20px);
  will-change: transform;
  width: max-content;
}

.hp-row {
  display: flex;
  flex-direction: row;
  gap: clamp(16px, 2.5vw, 20px);
  width: max-content;
  will-change: transform;
}

.hp-row--rev {
  flex-direction: row-reverse;
}

.hp-card {
  position: relative;
  flex: 0 0 auto;
  width: clamp(195px, 30vh, 450px);
  height: clamp(130px, 20vh, 300px);
  overflow: hidden;
  border-radius: 10px;
  display: block;
  text-decoration: none;
}

.hp-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
  transition: transform 0.4s ease;
}

.hp-card:hover img {
  transform: scale(1.04);
}

.hp-card-overlay {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.hp-card:hover .hp-card-overlay {
  opacity: 0.75;
}

.hp-card-title {
  position: absolute;
  bottom: 16px;
  left: 16px;
  color: #fff;
  opacity: 0;
  transition: opacity 0.3s ease;
  font-family: var(--display);
  font-size: clamp(0.85rem, 1.2vw, 1.2rem);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1;
}

.hp-card:hover .hp-card-title {
  opacity: 1;
}

/* Row 4 is a mobile-only addition — desktop keeps its 3 wide bands */
#hp-r4 { display: none; }

/* Mobile: read the section as a tall stack rather than wide bands.
   Four short rows of smaller cards, less scroll space, and card titles
   always visible since there is no hover to reveal them. */
@media (max-width: 768px) {
  /* Double the pinned scroll (180vh → 360vh of travel) so the rows sweep at
     half speed and you can actually take the work in. Do NOT shorten this:
     140/190/270vh were all tried and each compressed the whole animation
     into a beat that was over before it registered. */
  .hp-outer {
    height: 460vh;
  }

  /* Full-height sticky, content centred inside it. A shorter block (78svh)
     left a large dead band below the grid while the first row collided with
     the header above it. Centring spreads that slack evenly instead, which
     pushes the whole animation down clear of the heading. */
  .hp-sticky {
    height: 100svh;
    top: 0;
    justify-content: center;
    gap: clamp(10px, 2svh, 22px);
  }

  #hp-r4 {
    display: flex;
  }

  .hp-rig,
  .hp-row {
    gap: 10px;
  }

  /* Both are flex children of .hp-sticky. Without flex:0 0 auto the rig
     shrinks below its natural height, the rows overflow its box, and the
     first row ends up above the top of the screen behind the heading —
     which looked like the grid being "cut off at the top". */
  .hp-header,
  .hp-rig {
    flex: 0 0 auto;
  }

  /* Let the fly-in overflow. While tilted, the perspective projects the grid
     above its resting position — that IS the effect: it sweeps in over the
     heading and the section above, then settles into place as it flattens.
     Clipping it to a box under the heading was tried and killed the entrance
     (it looked like the grid sliding out from behind a mask instead of
     flying in). Horizontal overflow is still contained by overflow-x:clip
     on <body>. */
  .hp-clip {
    overflow: visible;
    width: 100%;
    flex: 0 0 auto;
  }

  /* Keep overflow hidden. The rows are ~2300px wide; letting them escape
     widened the document to 668px, the fixed topbar sized to that, and the
     hamburger ended up off-screen on the homepage only. clip-path does not
     help — it clips painting but not scrollable overflow.
     This costs nothing visually: .hp-sticky is a full 100svh pinned at
     top:0, so its box IS the screen. The fly-in starts above the viewport,
     where it would be invisible whether clipped or not. (The earlier problem
     was a 78svh sticky, which was smaller than the screen and therefore cut
     content that should have been visible.) */
  .hp-sticky {
    overflow: hidden;
  }

  /* Paint above the hero while it flies in */
  .hp-outer {
    position: relative;
    z-index: 3;
  }

  /* Card size is derived from the CONTAINER height, not the viewport width.
     Header + gaps + 4 rows must fit inside .hp-sticky (100svh) with slack to
     spare, or overflow clips the top and bottom rows — that was the "getting
     cut off". Budget: ~12svh header + ~4svh gaps + (4 x 17svh) = 84svh,
     leaving ~16svh of breathing room split above and below by the centring.
     Keep the 3:2 ratio by deriving width from the same unit. */
  .hp-card {
    height: clamp(104px, 17svh, 190px);
    width: clamp(156px, 25.5svh, 285px);
    border-radius: 8px;
  }

  /* No labels on mobile — the images carry it, and a tap opens the case
     study anyway. Desktop keeps its hover reveal untouched. */
  .hp-card-title {
    display: none;
  }

  .hp-card-overlay {
    opacity: 0;
  }

  /* Desktop pins the header over the rig (absolute). On mobile the rows
     are tall enough that it collided with the first row, so let it sit in
     normal flow and reserve its own space instead. */
  .hp-header {
    position: static;
    padding-top: 0;
    padding-bottom: clamp(8px, 1.2svh, 14px);
    flex: 0 0 auto;
  }

  .hp-title {
    font-size: clamp(1.7rem, 6.5svh, 2.4rem);
    margin: 2px 0 0;
    line-height: 1;
  }

  .hp-sticky {
    justify-content: flex-start;
  }

  .hp-rig {
    flex: 0 0 auto;
  }
}

/* ===================================================================
   PROJECT TILES  (selected work + work page)
   =================================================================== */
.proj-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 1.6vw, 26px);
}

.proj {
  position: relative;
  display: block;
  overflow: clip;
  background: var(--panel);
  aspect-ratio: 4/5;
}

.proj:nth-child(even) {
  margin-top: clamp(30px, 8vw, 120px);
}

.proj-media {
  position: absolute;
  inset: 0;
}

.proj-media img,
.proj-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
  will-change: transform;
}

.proj:hover .proj-media img,
.proj:hover .proj-media video {
  transform: scale(1.05);
}

.proj-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.6));
  opacity: 0.9;
}

.proj-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: clamp(18px, 2vw, 34px);
  color: #fff;
}

.proj-cap .pmono {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
  display: flex;
  justify-content: space-between;
}

.proj-cap h3 {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  line-height: 0.92;
  font-size: clamp(1.8rem, 3.6vw, 3.4rem);
  margin-top: 10px;
}

.proj-cap p {
  font-family: var(--body);
  font-size: 0.92rem;
  max-width: 34ch;
  margin-top: 10px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .4s, transform .4s var(--ease);
}

.proj:hover .proj-cap p {
  opacity: 0.92;
  transform: translateY(0);
}

/* Touch: reveal the caption permanently — there is no hover to trigger it */
@media (pointer: coarse) {
  .proj-cap p {
    opacity: 0.92;
    transform: translateY(0);
  }
}

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

  .proj:nth-child(even) {
    margin-top: 0;
  }

  .proj {
    aspect-ratio: 4/5;
  }
}

/* ===================================================================
   SERVICES  (index list + floating hover preview)
   =================================================================== */
.svc-list {
  border-top: 1px solid var(--line);
  margin-top: clamp(30px, 5vh, 60px);
}

.svc-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(20px, 3vh, 40px) 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}

.svc-row .s-name {
  font-family: var(--display);
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  font-size: clamp(1.8rem, 5vw, 4.4rem);
  line-height: 0.92;
  transition: transform .4s var(--ease), color .3s;
}

.svc-row .s-sub {
  font-family: var(--serif-read);
  font-size: clamp(0.9rem, 1.4vw, 1.2rem);
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ink-2);
}

.svc-row:hover .s-name {
  transform: translateX(clamp(8px, 1.4vw, 22px));
  color: var(--accent);
}

.svc-row .s-idx {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-2);
}

.svc-preview {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 90;
  width: clamp(220px, 22vw, 340px);
  aspect-ratio: 4/3;
  overflow: clip;
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.9);
  transition: opacity .3s, transform .4s var(--ease);
}

.svc-preview video,
.svc-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.svc-preview.on {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

@media (pointer:coarse) {
  .svc-preview {
    display: none;
  }
}

/* ===================================================================
   CTA + FOOTER + GIANT WORDMARK
   =================================================================== */
.cta {
  text-align: center;
  padding-block: clamp(50px, 7vh, 90px) clamp(40px, 6vh, 70px);
  color: #fff;
}

.cta h2 {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.88;
  letter-spacing: 0.006em;
  font-size: clamp(2.6rem, 9vw, 9rem);
  color: #fff;
}

.cta p {
  font-family: var(--body);
  font-size: clamp(1rem, 1.4vw, 1.3rem);
  color: #fff;
  margin: 24px auto 0;
  max-width: 38ch;
}

.cta .cta-sub {
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-size: clamp(1.1rem, 1.6vw, 1.5rem);
  color: #fff;
  margin: clamp(16px, 2.5vh, 28px) auto 0;
  max-width: 44ch;
  line-height: 1.4;
}

.cta .say {
  display: inline-block;
  margin-top: 36px;
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-bottom: 1px solid #fff;
  padding-bottom: 6px;
  color: #fff;
}

.cta .say:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.reel {
  display: flex;
  gap: clamp(10px, 1.2vw, 16px);
  padding: 0 var(--gutter);
  overflow: clip;
}

.reel .clip {
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 3/4;
  overflow: clip;
  background: var(--panel);
}

.reel .clip video,
.reel .clip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 768px) {
  .reel .clip:nth-child(n+4) {
    display: none;
  }
}

.footer {
  padding-top: clamp(50px, 8vh, 100px);
  background: #000;
}

.foot-cols {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr;
  gap: 28px;
  padding: clamp(40px, 6vh, 72px) var(--gutter) clamp(30px, 5vh, 50px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.foot-cols h4 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.4rem, 2vw, 2rem);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--accent);
  margin-bottom: 16px;
}
.foot-cols a,
.foot-cols p {
  font-family: var(--body);
  text-transform: uppercase;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  display: block;
  margin-bottom: 9px;
  color: #fff;
}

.foot-cols a:hover {
  color: var(--accent);
}

.foot-cols .blurb {
  font-family: var(--body);
  font-size: 0.96rem;
  text-transform: none;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.55);
  max-width: 30ch;
}

.bb-heart { color:var(--accent); }
.foot-brand { display:flex; align-items:center; gap:10px; }
.foot-brand h4 { margin:0; }
.foot-brand a { margin-bottom:0 !important; }
.foot-brand .foot-mark { margin-bottom:0; }

.foot-mark { display:block; width:36px; height:auto; margin-bottom:10px; opacity:0.85; transition:opacity .3s; }
.foot-mark:hover { opacity:1; }
.foot-cta {
  display: inline-block !important;
  margin-top: 10px;
  padding: 8px 16px;
  border: 1px solid var(--accent);
  border-radius: 100px;
  color: var(--accent) !important;
  font-family: var(--body) !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background .25s, color .25s;
}
.foot-cta:hover {
  background: var(--accent);
  color: #000 !important;
}
.foot-icons { display:flex; align-items:center; gap:18px; }
.foot-icons a { display:flex; color:var(--ink-2); transition:color .25s; }
.foot-icons a:hover { color:var(--accent); }
.foot-icons svg { width:18px; height:18px; display:block; }

@media (max-width: 1024px) {
  .foot-cols {
    grid-template-columns: 1fr 1fr;
  }
  .foot-col--spacer { display: none; }
}

.wordmark {
  position: relative;
  overflow: clip;
  line-height: 0;
  margin-top: -1px;
  background: #000;
}

/* ghost — invisible, holds the natural height in the layout flow.
   initWordmark() measures ghost.offsetHeight and scrubs the real SVG up to
   it, so THIS is what controls the wordmark's final size. */
.wordmark-ghost {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  pointer-events: none;
  user-select: none;
}

/* On a phone the ghost's natural height is width/3.12 — only ~125px, so the
   wordmark ended up tiny. The SVG is preserveAspectRatio="none" (stretching
   is the intended effect), so give the ghost a taller FLOOR and the scrub
   follows it. min-height, not height, so wider screens keep their natural
   (larger) size rather than being shrunk to the floor. */
@media (max-width: 768px) {
  .wordmark-ghost {
    min-height: clamp(115px, 18svh, 210px);
  }
}

/* stretchy SVG — absolutely covers the ghost, height scrubbed by GSAP */
.wordmark-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  /* starts squished flat */
  fill: #fff;
  will-change: height;
  display: block;
}

.foot-base {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 18px var(--gutter);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: #000;
}

.foot-base a {
  color: rgba(255, 255, 255, 0.35);
}

.foot-base a:hover {
  color: var(--accent);
}

/* ===================================================================
   CASE STUDY — Namma-style layout
   =================================================================== */

/* 1. HERO — giant project name, full viewport */
.cs-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100svh;
  padding: calc(var(--bar-h) + 4vh) var(--gutter) 6vh;
  text-align: center;
}

.cs-hero .cs-eyebrow {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: clamp(20px, 4vh, 48px);
}

.cs-hero h1 {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  line-height: 0.88;
  font-size: clamp(4rem, 14vw, 14rem);
}

/* 2. INTRO — tagline + year + description */
.cs-intro {
  padding: clamp(60px, 10vh, 120px) var(--gutter);
  border-top: 1px solid var(--line);
}

.cs-intro-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  margin-bottom: clamp(48px, 8vh, 100px);
}

.cs-tagline {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  line-height: 0.9;
  font-size: clamp(2.4rem, 6.5vw, 6.5rem);
  max-width: 72%;
  white-space: pre-line;
}

.cs-year {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding-top: 0.4em;
}

.cs-intro-bottom {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(24px, 5vw, 80px);
  align-items: start;
}

.cs-details-label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding-top: 0.3em;
}

.cs-details-body {}

.cs-description {
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.65;
  color: var(--ink);
  margin-bottom: clamp(16px, 3vh, 28px);
}

.cs-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: clamp(20px, 3.5vh, 36px);
}

.cs-url {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 1px;
  transition: color .3s, border-color .3s;
}

.cs-url:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* 3. COVER — first full-width image */
.cs-cover {
  padding-inline: var(--gutter);
  margin-bottom: clamp(10px, 1.5vw, 20px);
}

.cs-cover img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}

/* Gina's on Congress — square hero image, show it in full rather than crop to 16:9 */
body[data-project="ginas-on-congress"] .cs-cover img {
  aspect-ratio: 1/1;
  object-fit: contain;
  background: var(--panel);
}

/* 4. IMAGE PAIR — two side-by-side */
.cs-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(8px, 1vw, 14px);
  padding-inline: var(--gutter);
  margin-bottom: clamp(8px, 1vw, 14px);
}

.cs-pair-img,
.cs-full-img {
  overflow: clip;
  background: var(--panel);
}

.cs-pair-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 3/4;
  display: block;
  transition: transform 0.9s var(--ease);
}

.cs-pair-img:hover img {
  transform: scale(1.03);
}

/* 5. FULL-WIDTH image */
.cs-full {
  padding-inline: var(--gutter);
  margin-bottom: clamp(8px, 1vw, 14px);
}

.cs-full-img img {
  width: 100%;
  aspect-ratio: 16/7;
  object-fit: cover;
  display: block;
  transition: transform 0.9s var(--ease);
}

.cs-full-img:hover img {
  transform: scale(1.02);
}

/* 6. QUOTE — massive centered pullquote */
.cs-quote {
  padding: clamp(60px, 10vh, 140px) var(--gutter);
  text-align: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-block: clamp(40px, 7vh, 80px);
}

.cs-quote-text {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.035em;
  line-height: 0.9;
  font-size: clamp(2rem, 6.5vw, 7.5rem);
  margin-bottom: clamp(24px, 4vh, 48px);
}

.cs-quote-text::before {
  content: '\201C';
}

.cs-quote-text::after {
  content: '\201D';
}

.cs-quote-author {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* 7. NEXT PROJECT */
.cs-next {
  display: block;
  text-decoration: none;
  padding: clamp(40px, 8vh, 100px) var(--gutter) clamp(50px, 9vh, 120px);
  text-align: center;
  border-top: 1px solid var(--line);
  color: var(--ink);
  position: relative;
  overflow: hidden;
}

.cs-next-label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: clamp(16px, 3vh, 32px);
  display: block;
}

.cs-next-name {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  line-height: 0.88;
  font-size: clamp(3.5rem, 13vw, 13rem);
  color: var(--ink);
  opacity: 1;
  display: inline-block;
  animation: cs-next-shake 6s ease-in-out infinite;
}

/* was opacity:0.18 with a hover reveal to 1 — on touch devices hover never
   fires, so the link just sat permanently dimmed, reading as disabled when
   it's actually the primary next step. Full opacity now, and a small
   periodic shake stands in for the hover cue so it reads as tappable
   everywhere, not just under a cursor. */
.cs-next:hover .cs-next-name {
  animation-play-state: paused;
  transform: translateX(6px);
  transition: transform 0.3s var(--ease);
}

@keyframes cs-next-shake {
  0%, 92%, 100% { transform: translateX(0); }
  93% { transform: translateX(-6px); }
  95% { transform: translateX(5px); }
  97% { transform: translateX(-3px); }
  99% { transform: translateX(2px); }
}

@media (prefers-reduced-motion: reduce) {
  .cs-next-name { animation: none; }
  .cs-next:hover .cs-next-name { transform: none; }
}

/* ── old compat keep for any page using pn ── */
.pn {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
  margin-top: clamp(60px, 10vh, 130px);
}

.pn a {
  padding: clamp(36px, 7vh, 76px) var(--gutter);
}

.pn a+a {
  border-left: 1px solid var(--line);
  text-align: right;
}

.pn .lbl {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.pn .ti {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.7rem, 4vw, 3.2rem);
  margin-top: 10px;
  transition: color .3s;
}

.pn a:hover .ti {
  color: var(--accent);
}

@media (max-width: 768px) {
  .cs-intro-top {
    flex-direction: column;
  }

  .cs-tagline {
    max-width: 100%;
    font-size: clamp(2.2rem, 8vw, 4rem);
  }

  .cs-intro-bottom {
    grid-template-columns: 1fr;
  }

  .cs-pair {
    grid-template-columns: 1fr;
  }

  .cs-pair-img img {
    aspect-ratio: 4/3;
  }

  .pn {
    grid-template-columns: 1fr;
  }

  .pn a+a {
    border-left: 0;
    border-top: 1px solid var(--line);
    text-align: left;
  }
}

/* ---------- about / contact ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(30px, 6vw, 90px);
  align-items: start;
  padding: 0 var(--gutter) clamp(60px, 10vh, 140px);
}

.about-grid p.bio {
  margin-bottom: 1.4em;
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  line-height: 1.6;
}

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

.contact-hero {
  min-height: 90svh;
  display: flex;
  align-items: center;
  padding: var(--bar-h) var(--gutter) 0;
}

.contact-mail {
  display: inline-block;
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.006em;
  font-size: clamp(2rem, 7vw, 6.5rem);
  line-height: 0.9;
  border-bottom: 3px solid var(--accent);
  margin-top: 20px;
}

.contact-mail:hover {
  color: var(--accent);
}

/* ---------- cursor ---------- */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 11px;
  height: 11px;
  margin: -5.5px 0 0 -5.5px;
  border-radius: 50%;
  background: var(--accent);
  z-index: 200;
  pointer-events: none;
  mix-blend-mode: normal;
  transition: width .25s, height .25s, margin .25s;
}

.cursor.big {
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  background: rgba(243, 113, 43, 0.18);
  border: 1px solid var(--accent);
}

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

[data-reveal] {
  opacity: 0;
}

.no-scroll {
  overflow: hidden;
}

@media (prefers-reduced-motion:reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }

  [data-reveal] {
    opacity: 1 !important;
  }

  .m-link>span {
    transform: none !important;
  }

  .hero h1 .line>span,
  .statement-lines .ln>span {
    transform: none !important;
  }

  .menu {
    transition: none;
  }
}

/* ===================================================================
   FEATURED WORK HEADING
   =================================================================== */
.feat-heading {
  padding-block: clamp(60px, 10vh, 120px) clamp(24px, 4vh, 48px);
}

.feat-heading-title {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.9;
  font-size: clamp(3rem, 8vw, 8rem);
}

/* ===================================================================
   FEATURED 2×2 GRID (work page)
   =================================================================== */
.feat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px;
  background: var(--bg);
}

.feat-card {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4/3;
  text-decoration: none;
  will-change: transform, opacity;
  /* initial state driven by GSAP — set here as fallback */
  background: var(--panel);
}

.feat-img {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.feat-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}

.feat-card:hover .feat-img img {
  transform: scale(1.04);
}

/* dark gradient overlay that appears on hover */
.feat-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.72) 100%);
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}

.feat-card:hover .feat-overlay {
  opacity: 1;
}

/* label slides up from the bottom */
.feat-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: clamp(18px, 2.5vw, 36px);
  transform: translateY(14px);
  opacity: 0;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.feat-card:hover .feat-label {
  opacity: 1;
  transform: translateY(0);
}

/* Touch has no hover, so hover-only labels would never appear at all.
   Show them by default on coarse pointers — the overlay is dialled back
   slightly since it is now permanent rather than a hover accent. */
@media (pointer: coarse) {
  .feat-label {
    opacity: 1;
    transform: translateY(0);
  }

  .feat-overlay {
    opacity: 0.85;
  }
}

.feat-name {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 0.9;
  font-size: clamp(1.4rem, 3vw, 2.6rem);
  color: #fff;
}

.feat-tag {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

@media (max-width: 768px) {
  .feat-grid {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 6px;
  }
}

/* ===================================================================
   WORK LIST PAGE (Namma-style)
   =================================================================== */
.wl-section {
  padding-block: clamp(40px, 6vh, 80px) clamp(80px, 14vh, 180px);
}

.wl-header {
  margin-bottom: clamp(24px, 4vh, 48px);
}

.wl-content {
  display: grid;
  grid-template-columns: 1fr 38vw;
  gap: 4vw;
  align-items: start;
}

/* left name list */
.wl-names {
  position: relative;
}

.wl-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-block: clamp(18px, 3vh, 36px);
  border-top: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  opacity: 0.12;
  transition: opacity 0.5s var(--ease);
}

.wl-item:last-child {
  border-bottom: 1px solid var(--line);
}

.wl-item.is-active {
  opacity: 1;
}

.wl-name {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  line-height: 0.88;
  font-size: clamp(2.8rem, 9vw, 9.5rem);
}

.wl-meta {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* right sticky visual */
.wl-visual {
  position: sticky;
  top: calc(var(--bar-h) + 3vh);
  height: 64vh;
  overflow: clip;
  border-radius: 4px;
}

.wlv-track {
  position: relative;
  width: 100%;
  height: 100%;
}

.wlv-link {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.55s var(--ease);
}

.wlv-link.is-active {
  opacity: 1;
  pointer-events: auto;
}

.wlv-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}

.wlv-link:hover .wlv-img {
  transform: scale(1.03);
}

@media (max-width: 1024px) {
  .wl-content {
    grid-template-columns: 1fr;
  }

  .wl-visual {
    display: none;
  }

  .wl-item {
    opacity: 1;
  }

  /* Inline project thumbnail, injected by initWorkList() — replaces the
     hover/scroll preview panel that can't fit on a phone. */
  .wl-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 6px;
    background: var(--panel);
    margin-bottom: 14px;
  }

  .wl-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}

/* ===================================================================
   SERVICES TEASER (homepage)
   =================================================================== */
.svct-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 8vw, 120px);
  align-items: start;
  padding: clamp(20px,3vh,40px) 0;
}

.svct-hed {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 0.88;
  font-size: clamp(3.5rem, 8vw, 8rem);
  margin: 12px 0 20px;
}

.svct-tagline {
  font-family: var(--serif-read);
  font-style: italic;
  font-size: clamp(1.1rem, 1.6vw, 1.45rem);
  line-height: 1.35;
  color: var(--ink);
  margin: 0 0 14px;
  max-width: 28ch;
}

.svct-pillars {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 24px;
}

.svct-sub {
  font-family: var(--serif-read);
  font-size: clamp(0.95rem, 1.3vw, 1.15rem);
  color: var(--ink-2);
  line-height: 1.7;
  max-width: 38ch;
  margin-bottom: 32px;
}

.svct-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--accent);
  border-radius: 100px;
  padding: 12px 28px;
  font-family: var(--display);
  font-size: clamp(0.85rem, 1.1vw, 1rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  transition: background .25s, color .25s;
}
.svct-cta:hover { background: var(--accent); color: #000; }

/* Right column - solution accordion (Launch, Grow, Scale) */
.svct-right {
  border-top: 1px solid var(--line);
  margin-top: 4px;
}

.svct-acc-row {
  border-bottom: 1px solid var(--line);
  padding: clamp(16px, 2.2vh, 26px) 0;
  cursor: pointer;
  user-select: none;
}

.svct-acc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.svct-acc-title {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  line-height: 0.95;
  color: var(--ink);
  transition: color 0.3s var(--ease), letter-spacing 0.3s var(--ease);
}

.svct-acc-row:hover .svct-acc-title,
.svct-acc-row.is-open .svct-acc-title {
  color: var(--accent);
  letter-spacing: -0.01em;
}

.svct-acc-arrow {
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 1.1rem;
  color: var(--ink-2);
  transition: transform 0.35s var(--ease), border-color 0.3s, background 0.3s, color 0.3s;
}

.svct-acc-row:hover .svct-acc-arrow {
  border-color: var(--ink-2);
  color: var(--ink);
}

.svct-acc-row.is-open .svct-acc-arrow {
  transform: rotate(45deg);
  border-color: var(--accent);
  background: var(--accent);
  color: #000;
}

.svct-acc-body {
  height: 0;
  overflow: hidden;
  transition: height 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.svct-acc-inner {
  padding-top: 16px;
  padding-bottom: 8px;
}

.svct-acc-desc {
  font-family: var(--serif-read);
  font-size: clamp(1.02rem, 1.35vw, 1.22rem);
  color: var(--ink-2);
  line-height: 1.7;
  max-width: 52ch;
  margin: 0;
}

.svct-arrow {
  font-family: sans-serif;
  font-size: clamp(0.9rem, 1.2vw, 1.1rem);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .25s, transform .25s var(--ease);
  flex-shrink: 0;
}
.svct-row:hover .svct-arrow { opacity: 1; transform: translateX(0); }

/* No hover on touch — show the affordance so rows read as tappable */
@media (pointer: coarse) {
  .svct-arrow { opacity: 1; transform: translateX(0); }
}

@media (max-width: 1024px) {
  .svct-wrap { grid-template-columns: 1fr; gap: 40px; }
}

/* ===================================================================
   BLUE CRAWL MARQUEE (Before CTA / Footer)
   =================================================================== */
.blue-crawl {
  background: transparent;
  border-top: 1px solid rgba(42, 196, 243, 0.3);
  border-bottom: 1px solid rgba(42, 196, 243, 0.3);
  overflow: hidden;
  white-space: nowrap;
  padding: clamp(14px, 1.8vh, 22px) 0;
  user-select: none;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 10;
  transform: rotate(-1.5deg);
  width: 104vw;
  margin-left: -2vw;
  margin-block: clamp(28px, 4vh, 56px);
}

.blue-crawl-track {
  display: inline-flex;
  align-items: center;
  gap: clamp(24px, 3.5vw, 48px);
  will-change: transform;
  animation: crawl-loop 38s linear infinite;
}

.blue-crawl span {
  font-family: var(--display);
  font-size: clamp(1.2rem, 2.3vw, 1.85rem);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
  flex-shrink: 0;
  color: transparent;
  -webkit-text-stroke: 1px var(--accent);
  transition: color 0.3s;
}

.blue-crawl span:hover {
  color: var(--accent);
}

.blue-crawl .sep {
  font-size: 0.85em;
  color: var(--accent);
  -webkit-text-stroke: 0;
  opacity: 0.7;
}

@keyframes crawl-loop {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-33.333%);
  }
}

/* ===================================================================
   GALLERY — premium masonry grid. Columns of natural-height cells so
   portrait, landscape, and square photos all sit at their real aspect
   ratio with no forced cropping — mix any sizes and it stays clean.
   =================================================================== */
.cs-bento {
  columns: 3 260px;
  column-gap: clamp(10px, 1.4vw, 22px);
  padding: clamp(32px,5vh,64px) var(--gutter);
}
.cs-bento-cell {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: clamp(10px, 1.4vw, 22px);
  overflow: hidden;
  border-radius: 6px;
  background: var(--panel);
}
.cs-bento-cell img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform .7s var(--ease);
}
.cs-bento-cell:hover img { transform: scale(1.035); }

/* "full" — one image breaks across every column for a full-bleed moment */
.cs-bento-full {
  column-span: all;
  margin-bottom: clamp(10px, 1.4vw, 22px);
}
.cs-bento-full img {
  aspect-ratio: 21/9;
  object-fit: cover;
}

/* "trio" — three images forced side by side, breaking out of the masonry flow */
.cs-bento-trio {
  column-span: all;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1.4vw, 22px);
  margin-bottom: clamp(10px, 1.4vw, 22px);
}
.cs-bento-trio > div {
  overflow: hidden;
  border-radius: 6px;
  background: var(--panel);
}
.cs-bento-trio img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform .7s var(--ease);
}
.cs-bento-trio > div:hover img { transform: scale(1.035); }

/* "duo" — two images forced side by side, breaking out of the masonry flow */
.cs-bento-duo {
  column-span: all;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(10px, 1.4vw, 22px);
  margin-bottom: clamp(10px, 1.4vw, 22px);
}
.cs-bento-duo > div {
  overflow: hidden;
  border-radius: 6px;
  background: var(--panel);
  aspect-ratio: 4 / 3;
}
.cs-bento-duo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .7s var(--ease);
}
.cs-bento-duo > div:hover img { transform: scale(1.035); }

@media (max-width: 768px) {
  .cs-bento { columns: 2 180px; }
  .cs-bento-trio { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .cs-bento { columns: 1; }
  .cs-bento-full img { aspect-ratio: 4/3; }
  .cs-bento-trio { grid-template-columns: 1fr; }
  .cs-bento-duo { grid-template-columns: 1fr; }
}

/* ===================================================================
   INTRO VIDEO  — plays once on first visit, fades to reveal the site
   =================================================================== */
html.intro-lock {
  overflow: hidden;
}
.intro-video {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  opacity: 1;
  transition: opacity .3s ease;
}
.intro-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.intro-video.is-hidden {
  opacity: 0;
  pointer-events: none;
}
.intro-video .intro-skip {
  position: absolute;
  right: 24px;
  bottom: 24px;
  padding: 10px 18px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .35);
  color: #fff;
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .04em;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.intro-video .intro-skip:hover {
  border-color: var(--accent);
  background: rgba(255, 255, 255, .06);
}
@media (max-width: 768px) {
  .intro-video .intro-skip {
    right: 16px;
    bottom: 16px;
    font-size: .7rem;
    padding: 8px 14px;
  }
}

/* ===================================================================
   LIGHTBOX  (bb-lbx)
   =================================================================== */
.bb-lbx {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
}
.bb-lbx.is-open {
  opacity: 1;
  pointer-events: all;
}
.bb-lbx-bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.93);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
}
.bb-lbx-frame {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 92vw;
  max-height: 92vh;
}
.bb-lbx-img {
  display: block;
  max-width: 92vw;
  max-height: 88vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 40px 120px rgba(0,0,0,0.7);
}
/* nav buttons */
.bb-lbx-close,
.bb-lbx-prev,
.bb-lbx-next {
  position: absolute;
  z-index: 2;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, transform .2s;
  line-height: 1;
  font-family: sans-serif;
  -webkit-font-smoothing: antialiased;
}
.bb-lbx-close:hover,
.bb-lbx-prev:hover,
.bb-lbx-next:hover { background: rgba(255,255,255,0.18); transform: scale(1.08); }

.bb-lbx-close {
  top: 20px; right: 20px;
  width: 44px; height: 44px;
  font-size: 1.4rem;
}
.bb-lbx-prev {
  left: 20px; top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  font-size: 1.2rem;
}
.bb-lbx-prev:hover { transform: translateY(-50%) scale(1.08); }
.bb-lbx-next {
  right: 20px; top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  font-size: 1.2rem;
}
.bb-lbx-next:hover { transform: translateY(-50%) scale(1.08); }
.bb-lbx-counter {
  position: absolute;
  bottom: 20px; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  white-space: nowrap;
  pointer-events: none;
}
/* hide nav when only 1 image */
.bb-lbx.single .bb-lbx-prev,
.bb-lbx.single .bb-lbx-next,
.bb-lbx.single .bb-lbx-counter { display: none; }

@media (max-width: 768px) {
  .bb-lbx-prev { left: 10px; }
  .bb-lbx-next { right: 10px; }
  .bb-lbx-close { top: 12px; right: 12px; }
}
/* ===================================================================
   MOBILE TYPE SCALE  — must stay LAST in this file
   -------------------------------------------------------------------
   Every size on the site is clamp(min, Xvw, max). On a phone the vw term
   collapses, so mobile always renders the MINIMUM — which is why body copy
   and labels read small there while the display headlines (with large
   minimums) look fine. This raises the reading sizes only; headlines are
   deliberately untouched.

   Position matters: an earlier copy of this block was overridden by the
   component rules further down the file, since they share specificity.
   Keep it at the bottom.
   =================================================================== */
@media (max-width: 768px) {
  body { font-size: 16.5px; line-height: 1.6; }

  /* body copy / descriptions */
  .cs-description,
  .about-grid p.bio,
  .svct-sub,
  .cta p,
  .founder-copy p,
  .value-body,
  .stat-label,
  .svc-detail-desc,
  .cs-quote-text { font-size: 1.08rem; line-height: 1.7; }

  /* secondary lines under a heading.
     NOTE: .feat-tag / .feat-name are deliberately NOT here — the featured
     cards and their descriptions are already the right size. */
  .hp-sub,
  .proj-cap p { font-size: 1.05rem; line-height: 1.55; }

  /* ── Services teaser + CTA — the run of the page after the featured grid.
     These were the smallest-feeling sections on a phone. ── */
  .svct-hed        { font-size: clamp(3.2rem, 15vw, 5.5rem); }
  /* the Consulting / Brand Identity / Web Design list */
  .svct-tagline    { font-size: 1.15rem; max-width: none; }
  .svct-pillars    { font-size: 0.72rem; }
  .svct-name       { font-size: clamp(2rem, 8vw, 2.6rem); line-height: 1.15; }
  .svct-arrow      { font-size: 1.4rem; }
  .svct-sub        { font-size: 1.15rem; line-height: 1.7; }
  .svct-cta        { font-size: 1.05rem; }

  .cta h2          { font-size: clamp(3rem, 14vw, 5.5rem); }
  .cta p           { font-size: 1.15rem; line-height: 1.65; }
  .cta .cta-sub    { font-size: 1.35rem; }

  /* services.html accordion — same treatment */
  .s-name          { font-size: clamp(2.4rem, 11vw, 4rem); }
  .svc-detail-desc { font-size: 1.1rem; line-height: 1.7; }

  /* footer headings + links */
  .foot-cols h4    { font-size: 1.6rem; }
  .foot-cols a,
  .foot-cols p     { font-size: 0.95rem; }

  /* mono micro-labels — smallest text on the site, worst hit on mobile */
  .mono,
  .mono-sm,
  .lab,
  .s-idx,
  .cs-details-label,
  .cs-meta,
  .foot-base,
  .testimonial-author,
  .founder-photo-caption,
  .cs-quote-author { font-size: 0.82rem; letter-spacing: 0.06em; }

  /* calls to action need to read as tappable.
     (.svct-cta and .svct-name are set above with the services teaser — do
     not re-declare them here or the smaller values win on cascade order.) */
  .say,
  .cs-url,
  .svc-start-btn { font-size: 1rem; }

  /* these were sitting on their clamp floors */
  .statement-lines { font-size: clamp(1.9rem, 7.5vw, 3.1rem); }
  .svc-row .s-sub  { font-size: 1.05rem; }

  /* Case-study hero: a full 100svh holding only an eyebrow and a title, so
     on a phone you scrolled a whole empty screen before reaching the work.
     62svh was a first pass and still read as a big gap before the tagline —
     shrink to content height like the About/Contact/Work heroes so the
     title sits close to the nav and the tagline follows right after. */
  .cs-hero {
    min-height: auto;
    padding-top: calc(var(--bar-h) + 2vh);
    padding-bottom: 24px;
  }

  /* The CTA carried ~65px of top padding, which stacked with the preceding
     section's bottom padding to leave ~160px of black before "Let's work
     together". Halve it on mobile — desktop keeps the generous spacing. */
  .cta {
    padding-block: 26px clamp(28px, 4vh, 52px);
  }

  /* ── Case-study page rhythm ──
     Every block carried desktop-scale vertical padding, which on a phone
     stacked into large empty bands between the intro, cover, quote, gallery
     and next-project link. Roughly halved throughout. The quote was the
     worst: 86px padding PLUS 60px margin on each side (~146px per gap). */
  .cs-intro {
    padding-block: 20px;
  }

  .cs-intro-top {
    margin-bottom: 14px;
  }

  .cs-quote {
    padding-block: 26px;
    margin-block: 6px;
  }

  .cs-bento {
    padding-block: 12px;
  }

  .cs-next {
    padding-block: 26px 30px;
  }

  .cs-cover {
    margin-bottom: 6px;
  }

  /* internal rhythm inside the intro block */
  .cs-description {
    margin-top: 12px;
  }

  .cs-meta {
    margin-top: 12px;
  }

  /* pairs/full only render on projects without a gallery, but tighten
     them too so those pages match */
  .cs-pair,
  .cs-full {
    margin-bottom: 8px;
  }

  /* ── Footer: single left-aligned column ──
     The 4-col grid collapsed to 2 columns on mobile, which put Menu beside
     the brand. Stack everything instead so Biggie Brands, Menu and Contact
     Us all run down the left edge. */
  .foot-cols {
    grid-template-columns: 1fr;
    gap: 34px;
    text-align: left;
  }

  .foot-col {
    align-items: flex-start;
    text-align: left;
  }

  .foot-col--spacer { display: none; }

  .foot-brand {
    justify-content: flex-start;
  }
}

.foot-agency-link {
  display: inline-block;
  margin-top: 22px;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--accent) !important;
  text-decoration: none;
  transition: opacity 0.3s ease, color 0.3s ease;
}
.foot-agency-link:hover {
  color: var(--accent) !important;
  opacity: 0.8;
  text-decoration: underline;
  text-underline-offset: 4px;
}