/* ============================================================
   NEXUS MEDIA - Design System v3
   Clean. Type-first. No noise.
   ============================================================ */

:root {
  --black:     #1c1c1c;
  --white:     #f2f2f0;
  --grey-1:    #242424;
  --grey-2:    #2b2d31;
  --grey-3:    #555;
  --grey-4:    #999;
  --grey-5:    #ccd0d8;
  --purple:    #9C39D6;
  --raspberry: #DE2B89;
  --mint:      #80E7BC;
  --yellow:    #EBDB00;
  --blue:      #4A7AED;
  --indigo:    #2B0D4F;
  --fg:        #f2f2f0;
  --bg:        #1c1c1c;
  --rule:      rgba(242,242,240,0.08);
  --font-d:    "Afacad Flux", system-ui, sans-serif;
  --font-m:    "JetBrains Mono","IBM Plex Mono",ui-monospace,monospace;
  --pad:       clamp(24px, 5vw, 80px);
  --radius:    12px;   /* single card radius, pills and circles stay as-is */
  --ease:      cubic-bezier(0.16,1,0.3,1);

  /* Nexus CI gradients (from letterhead N-icon) */
  --ci-gradient: linear-gradient(135deg, #80E7BC 0%, #6BC5E0 35%, #4A7AED 70%, #5B4AED 100%);
  --ci-gradient-h: linear-gradient(90deg, #80E7BC 0%, #6BC5E0 35%, #4A7AED 70%, #5B4AED 100%);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; scroll-behavior:smooth; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-d);
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background 0.4s, color 0.4s;
}
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; background:none; border:0; }
img,svg { display:block; max-width:100%; }
img { height: auto; }   /* pairs with width/height attrs so ratio is reserved */
ul { list-style:none; }
::selection { background:var(--purple); color:white; }
::-webkit-scrollbar { width:3px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--grey-3); border-radius:2px; }

/* ── PROGRESS ── */
.progress-bar {
  position:fixed; top:0; left:0;
  height:2px; width:0%;
  background:linear-gradient(90deg, var(--purple), var(--raspberry), var(--yellow), var(--mint), var(--blue));
  background-size:300% 100%;
  z-index:1000; pointer-events:none;
  transition:width 0.1s linear;
}


/* ============================================================
   PAGE LOAD TRANSITION - CI colour bands
   Two horizontal bands fill the screen, then slide down to
   reveal the page beneath. Uses Nexus CI gradient pairs.
   ============================================================ */
.page-transition {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
  display: none;
  flex-direction: column;
}
.page-transition.is-active {
  display: flex;
}

.page-transition__band {
  flex: 1;
  will-change: transform;
}

/* Top band: Purple to Raspberry */
.page-transition__band--1 {
  background: linear-gradient(135deg, var(--purple), var(--raspberry));
  transform: translateY(0);
}

/* Bottom band: Blue to Mint */
.page-transition__band--2 {
  background: linear-gradient(135deg, var(--blue), var(--mint));
  transform: translateY(0);
}

/* ENTRANCE on page load - bands split apart */
.page-transition.is-exiting .page-transition__band--1 {
  animation: band-exit-up 1s cubic-bezier(0.76, 0, 0.24, 1) 0.15s forwards;
}
.page-transition.is-exiting .page-transition__band--2 {
  animation: band-exit-down 1s cubic-bezier(0.76, 0, 0.24, 1) 0s forwards;
}

@keyframes band-exit-up {
  to { transform: translateY(-105%); }
}
@keyframes band-exit-down {
  to { transform: translateY(105%); }
}

/* After entrance animation - fully hidden */
.page-transition.is-done { display: none; }

/* EXIT transition - bands slide back in from off-screen */
.page-transition.is-entering .page-transition__band--1 {
  transform: translateY(-105%);
  animation: band-enter-down 0.6s cubic-bezier(0.76, 0, 0.24, 1) 0s forwards;
}
.page-transition.is-entering .page-transition__band--2 {
  transform: translateY(105%);
  animation: band-enter-up 0.6s cubic-bezier(0.76, 0, 0.24, 1) 0.05s forwards;
}

@keyframes band-enter-down {
  from { transform: translateY(-105%); }
  to   { transform: translateY(0); }
}
@keyframes band-enter-up {
  from { transform: translateY(105%); }
  to   { transform: translateY(0); }
}

/* ============================================================
   NAV - floating columns over hero, 375.studio style
   ============================================================ */

/* The nav sits absolute over the hero only - scrolls away with the page.
   Logo top-left, wordmark centre-top, controls top-right. */

.nav {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 500;
  pointer-events: none;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: flex-start;
  padding: 28px var(--pad);
}

/* Logo - top left */
.nav__brand {
  pointer-events: all;
  justify-self: start;
  display: flex; align-items: center;
  transition: opacity 0.2s;
}
.nav__brand:hover { opacity: 0.55; }
.nav__logo { height: 28px; width: auto; }

/* Wordmark - centre top */
.nav__wordmark {
  font-family: var(--font-m);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(242,242,240,0.6);
  padding-top: 6px;
  pointer-events: none;
  user-select: none;
}

/* Controls - top right */
.nav__right {
  pointer-events: all;
  display: flex; align-items: center;
  gap: 12px; justify-self: end;
}
.nav__cta {
  font-family: var(--font-m);
  font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bg); background: var(--fg);
  padding: 8px 18px; border-radius: 999px;
  transition: opacity 0.2s;
}
.nav__cta:hover { opacity: 0.8; }

/* Floating vertical link columns - positioned over the hero */
.nav__col {
  position: absolute;
  top: clamp(100px, 28vh, 350px);
  z-index: 500;
  pointer-events: all;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav__col--left  { left: var(--pad); }
.nav__col--right { right: var(--pad); align-items: flex-end; }

/* Transition only for GSAP entrance - no hidden class needed since nav scrolls away */
.nav__col { transition: opacity 0.4s var(--ease); }

.nav__col-link {
  font-family: var(--font-d);
  font-size: clamp(12px, 1vw, 15px);
  font-weight: 300;
  color: rgba(242,242,240,0.65);
  letter-spacing: 0.01em;
  line-height: 1.45;
  transition: color 0.2s;
  pointer-events: all;
  display: block;
}
.nav__col-link:hover { color: rgba(242,242,240,0.95); }

/* Hide columns on mobile */
@media (max-width: 768px) {
  .nav__col { display: none; }
  .nav__wordmark { display: none; }
  .nav { grid-template-columns: 1fr auto; }
}

/* ============================================================
   HERO - full viewport, headline bottom-left, 375.studio structure
   ============================================================ */
.hero {
  position: relative;
  width: 100%;
  min-height: 100vh;    /* fallback for browsers without svh */
  min-height: 100svh;   /* stable: does not resize when mobile chrome hides,
                           which dvh would do on every scroll */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 var(--pad) 64px;
}

/* Full-bleed background */
.hero__bg {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;
}
.hero__bg video {
  position: relative;
  z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.hero__bg img {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* Self-hosted hero video. Covers the section at any aspect ratio.
   The CI gradient fallback sits behind it, so a slow or failed load
   shows brand colour rather than black. */
.hero__video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  border: 0;
  /* Fully opaque from the start so the poster attribute paints
     immediately. The poster is the video first frame, so the browser
     handoff from poster to playback is seamless. The CI gradient
     fallback sits behind as a third layer of insurance. */
  opacity: 1;
}

/* CI Colour grade - sits above the video, below the dark overlay
   Left: Indigo bleeding into Purple (raspberry edge)
   Right: Mint into Blue
   Centre: mostly transparent so the video shows through
   Mix-blend-mode: multiply burns the colour into the footage */
.hero__grade {
  position: absolute; inset: 0; z-index: 2;
  background:
    /* Yellow → Raspberry: bottom left warm glow */
    radial-gradient(ellipse at 5% 75%,   rgba(235,219,0,0.35)  0%, transparent 35%),
    radial-gradient(ellipse at 15% 65%,  rgba(222,43,137,0.55) 0%, transparent 40%),
    /* Indigo → Purple: top left deep */
    radial-gradient(ellipse at 0% 30%,   rgba(43,13,79,0.85)   0%, transparent 50%),
    radial-gradient(ellipse at 12% 40%,  rgba(156,57,214,0.5)  0%, transparent 38%),
    /* Blue → Cool Mint: right side */
    radial-gradient(ellipse at 95% 40%,  rgba(74,122,237,0.4)  0%, transparent 42%),
    radial-gradient(ellipse at 85% 55%,  rgba(128,231,188,0.3) 0%, transparent 38%),
    /* Edge darkening */
    radial-gradient(ellipse at 50% 0%,   rgba(28,28,28,0.5)    0%, transparent 40%),
    radial-gradient(ellipse at 50% 100%, rgba(28,28,28,0.4)    0%, transparent 35%);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.hero__grade::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 10% 45%, rgba(156,57,214,0.2) 0%, transparent 45%),
    radial-gradient(ellipse at 90% 45%, rgba(74,122,237,0.15) 0%, transparent 40%),
    radial-gradient(ellipse at 8% 80%,  rgba(235,219,0,0.1)  0%, transparent 30%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.hero__bg-fallback {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse at 10% 50%, rgba(43,13,79,0.95)   0%, transparent 50%),
    radial-gradient(ellipse at 25% 60%, rgba(156,57,214,0.5)  0%, transparent 40%),
    radial-gradient(ellipse at 5% 80%,  rgba(222,43,137,0.35) 0%, transparent 35%),
    radial-gradient(ellipse at 85% 40%, rgba(74,122,237,0.35) 0%, transparent 40%),
    radial-gradient(ellipse at 80% 60%, rgba(128,231,188,0.2) 0%, transparent 35%),
    var(--bg);
  pointer-events: none;
}

/* Dark overlay - frames the video, ensures headline legibility.
   Lighter in the centre so the colour-graded footage shows through. */
.hero__bg::after {
  content: '';
  position: absolute; inset: 0; z-index: 3;
  background:
    linear-gradient(to top,
      rgba(28,28,28,0.95) 0%,
      rgba(28,28,28,0.5)  25%,
      rgba(28,28,28,0.1)  50%,
      rgba(28,28,28,0.2)  75%,
      rgba(28,28,28,0.5)  100%),
    /* edge vignette */
    radial-gradient(ellipse at 50% 50%,
      transparent 40%,
      rgba(28,28,28,0.4) 100%);
  pointer-events: none;
}

/* Bottom content - sits over the overlay */
.hero__bottom {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: flex-end;
  gap: 48px;
}

/* Headline - bottom left, massive */
.hero__headline {
  font-family: var(--font-d);
  font-size: clamp(36px, 5.5vw, 88px);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: var(--fg);
  max-width: 18ch;
}
.hero__headline em {
  font-style: italic;
  font-weight: 200;
  color: rgba(242,242,240,0.55);
}
.hero__headline .accent {
  font-style: italic;
  background: linear-gradient(90deg, var(--purple), var(--raspberry));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Bottom right - location info */


/* Service tags - removed from hero, now in nav columns */

@media (max-width: 768px) {
  .hero { padding: 36px 24px; }
  .hero__bottom { grid-template-columns: 1fr; gap: 24px; }
  .hero__headline { font-size: clamp(38px, 10vw, 72px); }
}

/* ============================================================
   HERO SMOKE-OUT - clip-path scroll effect
   The hero shrinks from the bottom as user scrolls,
   revealing black beneath it. GSAP handles this via ScrollTrigger.
   ============================================================ */
.hero-clip-wrap {
  /* Wrapper that GSAP clips to compress hero upward on scroll */
  overflow: hidden;
  position: relative;
}

/* ============================================================
   STATEMENT - large centred text with word scroll reveal
   ============================================================ */
.statement {
  background: var(--bg);
  padding: clamp(80px, 10vw, 140px) var(--pad);
  text-align: center;
  position: relative;
}

/* N icon watermark behind statement text */
.statement__n-bg {
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  width: clamp(350px, 50vw, 700px);
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}

.statement__text {
  font-family: var(--font-d);
  font-size: clamp(24px, 3.2vw, 52px);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -0.01em;
  margin: 0 auto 56px;
  max-width: 28ch;
}

.statement__word {
  display: inline-block;
  color: rgba(242,242,240,0.22);
  margin-right: 0.2em;
  /* No CSS transition needed - JS lerps per-frame */
}

.statement__text br + .statement__word { margin-left: 0; }

.statement__word--accent {
  background: linear-gradient(90deg, var(--purple), var(--raspberry));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  opacity: 0.22;
}

.statement__word--italic {
  font-style: italic;
  font-weight: 200;
}

/* Body paragraph - JS lerps opacity and translateY */
.statement__body {
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.75;
  color: rgba(242,242,240,0.75);
  max-width: 68ch;
  margin: 0 auto;
  font-weight: 300;
  opacity: 0;
  transform: translateY(20px);
}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee {
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  padding:28px 0; overflow:hidden; display:flex;
}
.marquee__track {
  display:flex; align-items:center;
  flex-shrink:0;
  animation:marquee 32s linear infinite;
  white-space:nowrap;
}
.marquee:hover .marquee__track { animation-play-state:paused; }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

.marquee__wordmark {
  font-family:var(--font-d);
  font-size:18px; font-weight:400;
  letter-spacing:0.08em; text-transform:uppercase;
  color:rgba(242,242,240,0.7);
  padding:0 40px; flex-shrink:0;
  transition:color 0.2s;
}
.marquee__wordmark:hover { color:rgba(242,242,240,1); }
.marquee__logo {
  height:24px; width:auto;
  padding:0 40px; flex-shrink:0;
  filter:brightness(0) invert(0.7);
  transition:filter 0.2s;
}
.marquee__logo:hover { filter:brightness(0) invert(1); }
.marquee__sep {
  width:4px; height:4px; border-radius:50%;
  background:var(--purple); flex-shrink:0; display:inline-block;
}
.marquee__sep:nth-child(4n)   { background:var(--raspberry); }
.marquee__sep:nth-child(6n)   { background:var(--mint); }
.marquee__sep:nth-child(8n)   { background:var(--yellow); }
.marquee__sep:nth-child(10n)  { background:var(--blue); }

/* ============================================================
   FEATURED - 375.studio style panels with parallax
   ============================================================ */

.featured {
  background: var(--bg);
}

/* Heading row - sits above the panels */
.featured__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 80px var(--pad) 48px;
}

.featured__title {
  font-family: var(--font-d);
  font-size: clamp(52px, 9vw, 140px);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: var(--fg);
}

.featured__all {
  font-size: 13px;
  color: var(--grey-4);
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--grey-3);
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
  align-self: flex-end;
  margin-bottom: 8px;
}
.featured__all:hover { color: var(--fg); border-color: var(--fg); }
.featured__all svg { transition: transform 0.2s var(--ease); }
.featured__all:hover svg { transform: translate(2px, -2px); }

/* Individual panel */
.feat-panel {
  position: relative;
  display: block;
  width: 100%;
  height: 90vh;
  min-height: 560px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  /* Gap between panels - black strip visible like 375.studio */
  margin-bottom: 12px;
}
.feat-panel:last-child { margin-bottom: 0; }

/* Background image / gradient */
.feat-panel__bg {
  position: absolute;
  /* 60% extra height - 30% top and bottom - gives parallax real travel room */
  top: -30%;
  bottom: -30%;
  left: 0; right: 0;
  z-index: 0;
  will-change: transform;
  /* No CSS transition - JS drives transform directly every frame */
}
.feat-panel__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* CI Brand Gradient pairs per panel */
/* Panel 1: Indigo → Purple (primary brand gradient) */
.feat-panel--1 .feat-panel__bg {
  background:
    radial-gradient(ellipse at 30% 40%, rgba(156,57,214,0.4) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 70%, rgba(222,43,137,0.2) 0%, transparent 45%),
    linear-gradient(145deg, #1c1c1c 0%, #2B0D4F 50%, #1c1c1c 100%);
}
/* Panel 2: Yellow → Raspberry (warm brand gradient) */
.feat-panel--2 .feat-panel__bg {
  background:
    radial-gradient(ellipse at 25% 50%, rgba(235,219,0,0.2) 0%, transparent 40%),
    radial-gradient(ellipse at 60% 60%, rgba(222,43,137,0.35) 0%, transparent 45%),
    linear-gradient(145deg, #1c1c1c 0%, #3a0a22 50%, #1c1c1c 100%);
}
/* Panel 3: Blue → Cool Mint (cool brand gradient) */
.feat-panel--3 .feat-panel__bg {
  background:
    radial-gradient(ellipse at 35% 45%, rgba(74,122,237,0.3) 0%, transparent 45%),
    radial-gradient(ellipse at 65% 65%, rgba(128,231,188,0.2) 0%, transparent 40%),
    linear-gradient(145deg, #1c1c1c 0%, #0a1a2e 50%, #1c1c1c 100%);
}

/* Dark overlay - lighter in middle, heavy at bottom for text legibility */
.feat-panel__overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(
    to top,
    rgba(28,28,28,0.92) 0%,
    rgba(28,28,28,0.45) 30%,
    rgba(28,28,28,0.15) 60%,
    rgba(28,28,28,0.1)  100%
  );
}

/* Content sits bottom-left, number top-left */
.feat-panel__inner {
  position: absolute; inset: 0; z-index: 2;
  padding: 40px var(--pad);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.feat-panel__num {
  font-family: var(--font-m);
  font-size: 11px;
  letter-spacing: 0.16em;
  align-self: flex-start;
}
.feat-panel--1 .feat-panel__num { color: var(--purple); }
.feat-panel--2 .feat-panel__num { color: var(--raspberry); }
.feat-panel--3 .feat-panel__num { color: var(--mint); }
.feat-panel--4 .feat-panel__bg {
  background:
    radial-gradient(ellipse at 30% 45%, rgba(74,122,237,0.35) 0%, transparent 45%),
    radial-gradient(ellipse at 65% 60%, rgba(156,57,214,0.2) 0%, transparent 40%),
    linear-gradient(145deg, #1c1c1c 0%, #0d1030 50%, #1c1c1c 100%);
}
.feat-panel--4 .feat-panel__num { color: var(--blue); }

.feat-panel__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Giant project name - always visible, positioned bottom-left */
.feat-panel__name {
  font-family: var(--font-d);
  font-size: clamp(52px, 8.5vw, 130px);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: white;
  display: block;
  margin-bottom: 20px;
}

/* Tags - always visible below name */
.feat-panel__tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.feat-panel__tag {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.2);
  font-size: 11px;
  color: rgba(255,255,255,0.6);
  font-family: var(--font-m);
  letter-spacing: 0.06em;
  backdrop-filter: blur(4px);
  transition: border-color 0.2s, color 0.2s;
}
.feat-panel:hover .feat-panel__tag {
  border-color: rgba(255,255,255,0.4);
  color: rgba(255,255,255,0.9);
}

/* Hover lift on images */
.feat-panel:hover .feat-panel__bg {
  filter: brightness(1.08);
  transition: filter 0.5s ease;
}

@media (max-width: 768px) {
  .feat-panel { height: 75vh; }
  .feat-panel__name { font-size: clamp(44px, 12vw, 80px); }
  .featured__title { font-size: clamp(48px, 14vw, 80px); }
}

/* ============================================================
   SERVICES LIST - 375.studio style: headline + category columns
   ============================================================ */
.svc-list {
  padding: 120px var(--pad);
  border-top: 1px solid var(--rule);
}

.svc-list__top {
  margin-bottom: 80px;
}

.svc-list__kicker {
  font-family: var(--font-m);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grey-4);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.svc-list__kicker::after {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--purple);
  display: inline-block;
  flex-shrink: 0;
}

.svc-list__headline {
  font-family: var(--font-d);
  font-size: clamp(32px, 5vw, 72px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--fg);
  max-width: 22ch;
}

/* 3x2 grid on desktop, 2x3 on tablet, 1-col on mobile */
.svc-list__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
}

.svc-list__col {
  padding: 40px 32px 40px 0;
  border-bottom: 1px solid var(--rule);
  /* Vertical dividers between columns */
  border-right: 1px solid var(--rule);
}
/* Remove right border on last column per row */
.svc-list__col:nth-child(3n) { border-right: none; }

.svc-list__cat {
  font-family: var(--font-d);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Category pill border like 375 */
.svc-list__cat::after {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.svc-list__col:nth-child(1) .svc-list__cat::after { background: var(--purple); }
.svc-list__col:nth-child(2) .svc-list__cat::after { background: var(--raspberry); }
.svc-list__col:nth-child(3) .svc-list__cat::after { background: var(--mint); }
.svc-list__col:nth-child(4) .svc-list__cat::after { background: var(--blue); }
.svc-list__col:nth-child(5) .svc-list__cat::after { background: var(--yellow); }
.svc-list__col:nth-child(6) .svc-list__cat::after { background: var(--raspberry); }

.svc-list__items {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.svc-list__items li {
  font-size: 14px;
  color: var(--grey-4);
  font-weight: 300;
  line-height: 1.5;
  transition: color 0.2s;
}
.svc-list__items li:hover { color: var(--fg); }

/* Left padding on non-first columns per row */
.svc-list__col:nth-child(3n+2),
.svc-list__col:nth-child(3n) {
  padding-left: 32px;
}

@media (max-width: 900px) {
  .svc-list__grid { grid-template-columns: 1fr 1fr; }
  .svc-list__col:nth-child(3n) { border-right: 1px solid var(--rule); }
  .svc-list__col:nth-child(2n) { border-right: none; }
  .svc-list__col:nth-child(2n) { padding-left: 32px; }
  .svc-list__col:nth-child(2n+1) { padding-left: 0; }
  .svc-list { padding: 80px var(--pad); }
}

@media (max-width: 600px) {
  .svc-list__grid { grid-template-columns: 1fr; }
  .svc-list__col { border-right: none !important; padding-left: 0 !important; }
}

/* ============================================================
   ABOUT
   ============================================================ */
.about-band { padding:120px var(--pad); border-top:1px solid var(--rule); display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
.about-band__headline { font-family:var(--font-d); font-size:clamp(26px,3.2vw,48px); font-weight:300; line-height:1.08; letter-spacing:-.025em; color:var(--fg); }
.about-band__headline em {
  font-style:italic;
  font-weight:200;
  background:linear-gradient(90deg, var(--purple), var(--raspberry));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.about-band__copy { padding-top:6px; }
.about-band__body { font-size:clamp(15px,1.2vw,17px); line-height:1.7; color:var(--grey-4); font-weight:300; margin-bottom:18px; }
.about-band__link { display:inline-flex; align-items:center; gap:8px; font-size:14px; color:var(--grey-4); border-bottom:1px solid var(--grey-3); padding-bottom:2px; margin-top:14px; transition:color .2s,border-color .2s; }
.about-band__link:hover { color:var(--fg); border-color:var(--fg); }
.about-band__link svg { transition:transform .2s var(--ease); }
.about-band__link:hover svg { transform:translate(2px,-2px); }
@media (max-width:900px) { .about-band { grid-template-columns:1fr; gap:32px; padding:80px var(--pad); } }

/* ============================================================
   STATS
   ============================================================ */
.stats { padding:80px var(--pad); border-top:1px solid var(--rule); }
.stats__kicker { font-family:var(--font-m); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--grey-4); margin-bottom:48px; }
.stats__grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--rule); }
.stat { padding:36px 0; border-right:1px solid var(--rule); padding-right:28px; }
.stat:last-child { border-right:none; }
.stat:not(:first-child) { padding-left:28px; }
.stat__num { font-family:var(--font-d); font-size:clamp(44px,5.5vw,90px); font-weight:300; letter-spacing:-.04em; line-height:1.12; margin-bottom:14px; }
.stat:nth-child(1) .stat__num { color:var(--purple); }
.stat:nth-child(2) .stat__num { color:var(--raspberry); }
.stat:nth-child(3) .stat__num { color:var(--mint); }
.stat:nth-child(4) .stat__num { color:var(--blue); }
.stat__label { font-family:var(--font-m); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--grey-4); margin-bottom:7px; }
.stat__desc { font-size:13px; color:var(--grey-3); line-height:1.5; font-weight:300; max-width:18ch; }
@media (max-width:768px) { .stats__grid { grid-template-columns:1fr 1fr; } .stat { border-right:none; border-bottom:1px solid var(--rule); padding:28px 0; } .stat:not(:first-child){padding-left:0;} }

/* ============================================================
   CTA
   ============================================================ */
.cta-banner { padding:140px var(--pad); text-align:center; border-top:1px solid var(--rule); overflow:visible; }
.cta-banner__kicker { font-family:var(--font-m); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--grey-4); margin-bottom:44px; display:flex; align-items:center; justify-content:center; gap:12px; }
.cta-banner__kicker::before,.cta-banner__kicker::after { content:''; width:28px; height:1px; background:var(--grey-3); flex-shrink:0; }
.cta-banner__headline { font-family:var(--font-d); font-size:clamp(42px,7vw,112px); font-weight:300; line-height:1.1; letter-spacing:-.03em; color:var(--fg); max-width:800px; margin:0 auto 52px; overflow:visible; padding:0.15em 0.3em 0; }
.cta-banner__headline em {
  font-style:italic;
  font-weight:200;
  background:linear-gradient(90deg, var(--purple), var(--raspberry));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.cta-banner__actions { display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; }
.btn-solid { display:inline-flex; align-items:center; gap:10px; padding:13px 26px; border-radius:999px; background:var(--fg); color:var(--bg); font-size:15px; transition:opacity .2s; }
.btn-solid:hover { opacity:.85; }
.btn-solid svg,.btn-outline svg { transition:transform .2s var(--ease); }
.btn-solid:hover svg,.btn-outline:hover svg { transform:translate(2px,-2px); }
.btn-outline { display:inline-flex; align-items:center; gap:10px; padding:12px 26px; border-radius:999px; border:1px solid var(--rule); color:var(--grey-4); font-size:15px; transition:border-color .2s,color .2s; }
.btn-outline:hover { border-color:var(--grey-3); color:var(--fg); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { border-top:1px solid var(--rule); padding:64px var(--pad) 32px; }
.footer__grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; padding-bottom:64px; }
.footer__logo { height:26px; width:auto; }
.footer__brand p { font-size:13px; color:var(--grey-4); line-height:1.65; max-width:24ch; margin-top:18px; font-weight:300; }
.footer__col h5 { font-family:var(--font-m); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--grey-4); margin-bottom:18px; }
.footer__col ul { display:flex; flex-direction:column; gap:9px; }
.footer__col a { font-size:14px; color:var(--grey-4); transition:color .2s; font-weight:300; }
.footer__col a:hover { color:var(--fg); }
.footer__wordmark {
  text-align: center;
  pointer-events: none;
  user-select: none;
  overflow: visible;
  margin: 20px 0;
}
.footer__wordmark-icon {
  height: clamp(36px, 5vw, 56px);
  width: auto;
  margin: 0 auto;
  display: block;
  mix-blend-mode: screen;
}
.footer__bottom { border-top:1px solid var(--rule); padding-top:22px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-family:var(--font-m); font-size:10px; color:var(--grey-3); letter-spacing:.1em; text-transform:uppercase; }
@media (max-width:768px) { .footer__grid { grid-template-columns:1fr 1fr; } .footer__brand { grid-column:1/-1; } }

/* ============================================================
   GSAP HELPERS
   ============================================================ */
.gs-fade { opacity:0; }
.gs-up   { opacity:0; transform:translateY(48px); }
/* Bottom padding gives italic descenders (y g j p q) room inside the
   clip box. Negative margin keeps the layout position unchanged. */
.gs-line { overflow: hidden; padding-top: 0.06em; padding-bottom: 0.16em; margin-top: -0.06em; margin-bottom: -0.16em; }
/* Start visible - GSAP animates from translateY(100%), but if GSAP fails lines show */
.gs-line-inner { display: block; transform: translateY(0); }
/* JS adds .gs-animate class to body when GSAP is ready, then we hide for animation */
body.gsap-ready .gs-line-inner { transform: translateY(105%); }

/* ============================================================
   NAV - fixed variant for subpages
   ============================================================ */
.nav--fixed {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  /* 22 + 31 (tallest child, the CTA pill) + 22 = 75px at desktop */
  padding: 22px var(--pad);
  background: rgba(28,28,28,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
  pointer-events: all;
}

/* Subpage nav links - centre aligned, replace wordmark */
.nav__links-sub {
  display: flex;
  align-items: center;
  gap: 40px;
  pointer-events: all;
}

.nav__link-sub {
  font-size: 15px;
  font-weight: 400;
  color: var(--grey-4);
  letter-spacing: 0.01em;
  transition: color 0.2s;
  position: relative;
}
.nav__link-sub::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 1px;
  background: var(--fg);
  transition: width 0.3s var(--ease);
}
.nav__link-sub:hover,
.nav__link-sub[aria-current="page"] { color: var(--fg); }
.nav__link-sub:hover::after,
.nav__link-sub[aria-current="page"]::after { width: 100%; }

/* Dropdown wrapper */
.nav__link-wrap {
  position: relative;
}

/* Dropdown panel - hidden by default, shown on hover */
.nav__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
  min-width: 200px;
}

/* focus-within keeps the six service links reachable by keyboard.
   Hover alone left them unreachable without a mouse. */
.nav__link-wrap:hover .nav__dropdown,
.nav__link-wrap:focus-within .nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav__dropdown-item {
  font-size: 14px;
  font-weight: 300;
  color: var(--grey-4);
  padding: 4px 0;
  transition: color 0.2s;
  white-space: nowrap;
}
.nav__dropdown-item:hover { color: var(--fg); }

@media (max-width: 768px) {
  .nav__links-sub { display: none; }
}

/* ============================================================
   WORKS PAGE - split layout
   Left sticky, right scrolling cards
   ============================================================ */
.works-page {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  padding-top: 100px;
}

/* Left column - sticky intro */
.works-page__left {
  position: sticky;
  top: 100px;
  height: fit-content;
  padding: 80px var(--pad) 80px;
}

.works-page__kicker {
  font-family: var(--font-m);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grey-4);
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.works-page__kicker::after {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--purple);
}

.works-page__headline {
  font-family: var(--font-d);
  font-size: clamp(32px, 4vw, 60px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--fg);
  margin-bottom: 32px;
  max-width: 16ch;
}

.works-page__body {
  font-size: 15px;
  line-height: 1.7;
  color: var(--grey-4);
  font-weight: 300;
  max-width: 36ch;
}

/* Right column - scrolling project cards */
.works-page__right {
  padding: 80px var(--pad) 80px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Individual work card */
.works-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--grey-1);
  transition: border-color 0.3s, transform 0.4s var(--ease);
}
.works-card:hover {
  border-color: var(--grey-3);
  transform: translateY(-3px);
}

/* Card image */
.works-card__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  position: relative;
}
.works-card__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease);
}
.works-card:hover .works-card__img img {
  transform: scale(1.04);
}

/* Placeholder gradient for cards without images */
.works-card__img--placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.works-card__img--p1 {
  background: linear-gradient(135deg, var(--grey-2) 0%, var(--indigo) 50%, var(--grey-2) 100%);
}
.works-card__img--p2 {
  background: linear-gradient(135deg, var(--grey-2) 0%, rgba(74,122,237,0.3) 50%, var(--grey-2) 100%);
}
.works-card__img--p3 {
  background: linear-gradient(135deg, var(--grey-2) 0%, rgba(222,43,137,0.25) 50%, var(--grey-2) 100%);
}

/* Card info */
.works-card__info {
  padding: 20px 24px;
}

.works-card__name {
  font-family: var(--font-d);
  font-size: clamp(22px, 2.5vw, 32px);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin-bottom: 10px;
  line-height: 1.1;
}

.works-card__tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.works-card__tags span {
  font-family: var(--font-m);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--grey-4);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  transition: border-color 0.2s, color 0.2s;
}
.works-card:hover .works-card__tags span {
  border-color: var(--grey-3);
  color: var(--grey-5);
}

@media (max-width: 900px) {
  .works-page {
    grid-template-columns: 1fr;
  }
  .works-page__left {
    position: relative;
    top: 0;
    padding-bottom: 40px;
  }
  .works-page__right {
    padding-left: var(--pad);
  }
}

/* ============================================================
   SERVICE PAGE - hero + body + discover list
   Used by brand-identity.html and similar service subpages
   ============================================================ */

/* ── Hero ── */
.svc-hero {
  padding: 140px var(--pad) 80px;
  position: relative;
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Small carousel - top right */
.svc-hero__carousel {
  position: absolute;
  top: 120px;
  right: var(--pad);
  width: clamp(240px, 28vw, 420px);
}

.svc-hero__carousel-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  border-radius: var(--radius);
}
.svc-hero__carousel-track::-webkit-scrollbar { display: none; }

.svc-hero__slide {
  flex-shrink: 0;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  scroll-snap-align: start;
  background-size: cover;
  background-position: center;
}

/* Placeholder gradient slides */
.svc-hero__slide--p1 { background: linear-gradient(135deg, var(--indigo), var(--purple)); }
.svc-hero__slide--p2 { background: linear-gradient(135deg, var(--grey-2), rgba(156,57,214,0.3)); }
.svc-hero__slide--p3 { background: linear-gradient(135deg, rgba(222,43,137,0.3), var(--grey-2)); }
.svc-hero__slide--p4 { background: linear-gradient(135deg, var(--grey-2), rgba(74,122,237,0.3)); }

/* When real images are added:
   <div class="svc-hero__slide" style="background-image:url('images/brand-01.jpg')"></div>
*/

.svc-hero__carousel-label {
  font-family: var(--font-m);
  font-size: 11px;
  color: var(--grey-4);
  margin-top: 12px;
  text-align: right;
  letter-spacing: 0.02em;
}

/* Large headline */
.svc-hero__headline {
  font-family: var(--font-d);
  font-size: clamp(36px, 5.5vw, 82px);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--fg);
  max-width: 18ch;
}

.svc-hero__headline em {
  font-style: italic;
  font-weight: 200;
  background: linear-gradient(90deg, var(--purple), var(--raspberry));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Category label - right aligned */
.svc-hero__cat {
  font-family: var(--font-m);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey-4);
  position: absolute;
  bottom: 80px;
  right: var(--pad);
}

@media (max-width: 900px) {
  .svc-hero__carousel {
    position: relative;
    top: 0; right: 0;
    width: 100%;
    margin-bottom: 40px;
  }
  .svc-hero { min-height: auto; padding-top: 120px; }
}

/* ── Body text section ── */

.svc-body__text {
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.7;
  color: var(--grey-4);
  font-weight: 300;
  max-width: 72ch;
}

/* ── Discover services list ── */
.svc-discover {
  padding: 0 var(--pad) 120px;
}

.svc-discover__kicker {
  font-family: var(--font-m);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grey-4);
  margin-bottom: 32px;
}

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

.svc-discover__item {
  display: block;
  text-align: center;
  font-family: var(--font-d);
  font-size: clamp(28px, 4.5vw, 64px);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--fg);
  padding: 32px 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  transition: color 0.2s, letter-spacing 0.4s var(--ease);
}

.svc-discover__item:hover {
  color: var(--purple);
  letter-spacing: 0.04em;
}

/* Auto-scroll carousel animation */
@keyframes carousel-auto {
  0%   { scroll-left: 0; }
  25%  { scroll-left: 100%; }
  50%  { scroll-left: 200%; }
  75%  { scroll-left: 300%; }
  100% { scroll-left: 0; }
}

/* ============================================================
   SERVICE PAGE - hero, body, carousel, services rows
   ============================================================ */

/* Hero - large headline left, floating image top right */
.svc-hero {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 48px;
  align-items: start;
  padding: 160px var(--pad) 80px;
  min-height: 80vh;
}

.svc-hero__kicker {
  font-family: var(--font-m);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grey-4);
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.svc-hero__kicker::after {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--purple);
}

.svc-hero__headline {
  font-family: var(--font-d);
  font-size: clamp(36px, 5.5vw, 80px);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--fg);
  max-width: 18ch;
}
.svc-hero__headline em {
  font-style: italic;
  font-weight: 200;
  background: linear-gradient(90deg, var(--purple), var(--raspberry));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Floating image - top right, slightly overlapping nav area */
.svc-hero__image {
  position: relative;
  margin-top: -40px;
}

.svc-hero__image img,
.svc-hero__image-placeholder {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  object-fit: cover;
  display: block;
  max-height: 520px;
}

.svc-hero__image video {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  object-fit: cover;
  display: block;
  max-height: 520px;
}

.svc-hero__image--landscape video {
  aspect-ratio: auto;
  max-height: none;
  object-fit: contain;
}

.svc-hero__image-placeholder--brand {
  background: linear-gradient(160deg, var(--grey-2), var(--indigo) 50%, var(--grey-2));
}

.svc-hero__image-caption {
  font-family: var(--font-m);
  font-size: 11px;
  color: var(--grey-4);
  margin-top: 12px;
  letter-spacing: 0.04em;
  text-align: right;
}

@media (max-width: 900px) {
  .svc-hero { grid-template-columns: 1fr; min-height: auto; padding-top: 120px; }
  .svc-hero__image { margin-top: 20px; max-width: 60%; }
}

/* Body text - simple centred paragraph */
.svc-body {
  padding: 40px var(--pad) 100px;
  max-width: 100ch;
}
.svc-body__text {
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.7;
  color: var(--grey-4);
  font-weight: 300;
}

/* Carousel - auto-scrolling horizontal strip */
.svc-carousel {
  padding: 0 0 100px;
  overflow: hidden;
}

.svc-carousel__track {
  display: flex;
  gap: 16px;
  animation: carousel-scroll 20s linear infinite;
  width: max-content;
}
.svc-carousel:hover .svc-carousel__track {
  animation-play-state: paused;
}

@keyframes carousel-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.svc-carousel__slide {
  flex-shrink: 0;
  width: clamp(280px, 30vw, 400px);
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 20px;
}

.svc-carousel__slide img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* Dark gradient at bottom so label text is readable over images */
.svc-carousel__slide::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(to top, rgba(28,28,28,0.8) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

/* Placeholder gradients */
.svc-carousel__slide--p1 { background: linear-gradient(135deg, var(--grey-2) 0%, rgba(156,57,214,0.3) 50%, var(--grey-2) 100%); }
.svc-carousel__slide--p2 { background: linear-gradient(135deg, var(--grey-2) 0%, rgba(222,43,137,0.25) 50%, var(--grey-2) 100%); }
.svc-carousel__slide--p3 { background: linear-gradient(135deg, var(--grey-2) 0%, rgba(74,122,237,0.3) 50%, var(--grey-2) 100%); }
.svc-carousel__slide--p4 { background: linear-gradient(135deg, var(--grey-2) 0%, rgba(128,231,188,0.25) 50%, var(--grey-2) 100%); }
.svc-carousel__slide--p5 { background: linear-gradient(135deg, var(--grey-2) 0%, rgba(235,219,0,0.2) 50%, var(--grey-2) 100%); }

.svc-carousel__label {
  font-family: var(--font-m);
  font-size: 11px;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.06em;
  position: relative;
  z-index: 2;
}

/* Services rows - centred, large text, ruled lines */
.svc-rows {
  padding: 80px var(--pad) 120px;
}

.svc-rows__kicker {
  font-family: var(--font-m);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grey-4);
  margin-bottom: 40px;
}

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

.svc-rows__item {
  font-family: var(--font-d);
  font-size: clamp(28px, 4vw, 56px);
  font-weight: 300;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--fg);
  padding: 28px 0;
  border-bottom: 1px solid var(--rule);
  transition: color 0.3s, letter-spacing 0.4s var(--ease);
  cursor: default;
}
.svc-rows__item:hover {
  color: var(--purple);
  letter-spacing: 0.04em;
}

/* ============================================================
   GLOBAL FIX - Afacad Flux ascender clipping
   The font's ascenders extend beyond the em box at large sizes.
   This adds breathing room to every heading element sitewide.
   ============================================================ */
h1, h2, h3,
.hero__headline,
.cta-banner__headline,
.feat-panel__name,
.featured__title,
.svc-hero__headline,
.statement__text,
.about-band__headline,
.svc-list__headline,
.svc-rows__item,
.stat__num,
.works-page__headline {
  padding-top: 0.15em;
  padding-bottom: 0.1em;
  overflow: visible !important;
}

/* Fix italic gradient text clipping globally.
   Any em inside a large heading that uses background-clip:text
   needs extra space so the italic slant doesn't get cut off. */
.cta-banner__headline em,
.svc-hero__headline em,
.hero__headline .accent,
.about-band__headline em,
.about-copy__large em,
.about-hero__headline em,
.about-statement__line1,
.contact-hero__headline em {
  display: inline;
  padding: 0.1em 0.2em 0.15em 0.05em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  margin-right: -0.05em;
}

/* ============================================================
   NEXUS CI GRADIENT ACCENTS
   Mint-teal-blue gradient from the CI letterhead and N-icon
   ============================================================ */

/* 1. Gradient bar at bottom of footer (matches letterhead) */
.footer::after {
  content: '';
  display: block;
  height: 3px;
  background: var(--ci-gradient-h);
  margin-top: 40px;
}

/* 2. Nav CTA button hover glow */
.nav__cta:hover {
  box-shadow: 0 0 20px rgba(74,122,237,0.2), 0 0 40px rgba(128,231,188,0.1);
}

/* 3. Section divider lines use CI gradient */
.cta-banner { border-top-color: transparent; position: relative; }
.cta-banner::before {
  content: '';
  position: absolute;
  top: 0; left: var(--pad); right: var(--pad);
  height: 1px;
  background: var(--ci-gradient-h);
  opacity: 0.2;
}

/* 4. Featured panel hover - subtle CI glow on border */
.feat-panel:hover {
  box-shadow: 0 0 60px rgba(128,231,188,0.06), 0 0 120px rgba(74,122,237,0.04);
}

/* 5. Service page carousel labels - CI underline on hover */
.svc-carousel__label::after {
  content: '';
  display: block;
  width: 0;
  height: 2px;
  background: var(--ci-gradient-h);
  margin-top: 6px;
  transition: width 0.4s var(--ease);
}
.svc-carousel__slide:hover .svc-carousel__label::after {
  width: 100%;
}

/* 6. About page client grid cells - CI border glow on hover */
.about-clients__cell:hover {
  border-color: rgba(128,231,188,0.15);
  box-shadow: inset 0 0 30px rgba(74,122,237,0.04);
}

/* 7. Stats section - CI gradient on number */
.stat__num {
  background: var(--ci-gradient-h);
  -webkit-background-clip: text;
  background-clip: text;
}

/* 8. Services grid category dot - alternate with CI colours */
.svc-list__col:nth-child(3) .svc-list__cat::after { background: linear-gradient(135deg, #80E7BC, #6BC5E0); }
.svc-list__col:nth-child(6) .svc-list__cat::after { background: linear-gradient(135deg, #4A7AED, #5B4AED); }

/* 9. Form field focus uses CI colour */
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  border-image: var(--ci-gradient-h) 1;
}

/* 11. Contact map band - subtle CI top border */
.contact-map {
  border-top: 1px solid transparent;
  border-image: var(--ci-gradient-h) 1;
  border-image-slice: 1;
  border-image-width: 1px 0 0 0;
}

/* ============================================================
   NEXUS N-ICON BRANDING ACCENTS
   The gradient N icon from the CI, used as watermarks and accents
   ============================================================ */

/* Large N watermark in hero */
.hero__n-watermark {
  position: absolute;
  right: -5%;
  bottom: -10%;
  width: clamp(300px, 45vw, 600px);
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
}

/* Footer N icon - centred, subtle */
.footer__n-icon {
  display: block;
  width: 60px;
  margin: 0 auto 40px;
  opacity: 0.7;
  transition: opacity 0.4s, transform 0.4s var(--ease);
}
.footer__n-icon:hover {
  opacity: 1;
  transform: scale(1.08);
}

/* CTA banner N accent */
.cta-banner__n-accent {
  position: absolute;
  left: -5%;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(300px, 40vw, 550px);
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}

/* About page statement N */
.about-statement__n {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(250px, 35vw, 500px);
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
}

/* Service page hero N accent */
.svc-hero__n-accent {
  position: absolute;
  right: -10%;
  top: -15%;
  width: clamp(200px, 30vw, 400px);
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}

/* Floating N in featured section */
.featured__n-float {
  position: absolute;
  right: 5%;
  top: 40px;
  width: clamp(80px, 10vw, 140px);
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
}

/* ============================================================
   NOSCRIPT / JS-FAILURE FALLBACK
   If JS fails to load, make all content visible
   ============================================================ */
noscript + style,
.no-js .gs-fade,
.no-js .gs-up,
.no-js .statement__body,
.no-js .statement__word {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* Reposition N icon accents on mobile - much smaller, above text */
@media (max-width: 768px) {
  .cta-banner__n-accent {
    width: 60px !important;
    top: 15px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    opacity: 0.1 !important;
  }
  .hero__n-watermark {
    width: 80px !important;
    bottom: auto !important;
    top: 10% !important;
    right: 5% !important;
    opacity: 0.06 !important;
  }
  .svc-hero__n-accent {
    width: 60px !important;
    opacity: 0.04 !important;
  }
}


/* ============================================================
   REFINED EDITORIAL LAYER
   High-end agency pass: typography, whitespace, hairlines,
   restrained motion. No gimmicks.
   ============================================================ */

/* ---- GLOBAL REFINEMENT ---- */
:root {
  --hairline: rgba(242,242,240,0.08);
}

/* Generous, editorial section rhythm */
.statement { padding: clamp(140px, 18vw, 260px) var(--pad); }
.svc-list, .stats { padding-top: clamp(120px, 14vw, 200px); padding-bottom: clamp(120px, 14vw, 200px); }
.cta-banner { padding-top: clamp(140px, 16vw, 240px); padding-bottom: clamp(140px, 16vw, 240px); }

/* ---- TYPOGRAPHY: lighter, tighter, more confident ---- */
.hero__headline {
  font-weight: 200;
  /* Sized so the longest of the two lines stays on one line at desktop.
     Longest line is 26 characters. */
  font-size: clamp(34px, 5vw, 88px);
  letter-spacing: -0.04em;
  line-height: 1.04;
  max-width: 30ch;
  text-wrap: balance;
}
.hero__headline em { font-weight: 150; }

.statement__text {
  font-weight: 250;
  letter-spacing: -0.035em;
}

.cta-banner__headline {
  font-weight: 200;
  letter-spacing: -0.04em;
}

/* ---- KICKERS: refined editorial index labels ---- */
.svc-list__kicker,
.stats__kicker,
.cta-banner__kicker,
.contact-hero__kicker,
.about-clients__kicker {
  font-size: 10px;
  letter-spacing: 0.35em;
  color: rgba(242,242,240,0.55);
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: clamp(48px, 6vw, 90px);
}
.svc-list__kicker::after,
.stats__kicker::after,
.cta-banner__kicker::after {
  content: '';
  flex: 0 0 48px;
  height: 1px;
  background: var(--hairline);
}
/* Numbered indices via counters */
body { counter-reset: section; }


/* ---- HAIRLINE DISCIPLINE ---- */
.svc-list { border-top: 1px solid var(--hairline); }
.stats { border-top: 1px solid var(--hairline); }
.footer { border-top: 1px solid var(--hairline); }

/* ---- SERVICE COLUMNS: editorial rows ---- */
.svc-list__col {
  padding: 36px 0;
  border-bottom: 1px solid var(--hairline);
  transition: padding-left 0.5s var(--ease);
}
.svc-list__col:hover { padding-left: 16px; }

/* ---- STATS: massive light numerals ---- */
.stat__num {
  font-weight: 150;
  font-size: clamp(64px, 8vw, 140px);
  letter-spacing: -0.04em;
}
.stat__label {
  font-family: var(--font-m);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(242,242,240,0.5);
  margin-top: 8px;
}

/* ---- BUTTONS: quieter, more precise ---- */
.btn-solid {
  padding: 15px 34px;
  font-size: 13px;
  letter-spacing: 0.04em;
  transition: opacity 0.25s, letter-spacing 0.35s var(--ease);
}
.btn-solid:hover { letter-spacing: 0.08em; opacity: 0.9; transform: none; }
.btn-outline {
  border: 1px solid var(--hairline);
  transition: border-color 0.3s, letter-spacing 0.35s var(--ease);
}
.btn-outline:hover { border-color: rgba(242,242,240,0.4); letter-spacing: 0.06em; }
.btn-solid svg, .btn-outline svg { transition: transform 0.35s var(--ease); }
.btn-solid:hover svg, .btn-outline:hover svg { transform: translate(3px, -3px); }

/* ---- NAV: understated underline reveal ---- */
.nav__link-sub { position: relative; }
.nav__link-sub::after {
  content: '';
  position: absolute;
  left: 0; bottom: -4px;
  width: 100%; height: 1px;
  background: currentColor;
  opacity: 0.6;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--ease);
}
.nav__link-sub:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---- IMAGE TREATMENT: slow, cinematic ---- */
.feat-panel__bg img { transition: transform 1.2s var(--ease); }
.feat-panel:hover .feat-panel__bg img { transform: scale(1.04); }
.feat-panel__overlay { transition: opacity 0.6s var(--ease); }
.feat-panel:hover .feat-panel__overlay { opacity: 0.75; }

/* ---- SUBTLE STATIC GRAIN (texture, not noise) ---- */
.grain-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.02;
}

/* ---- CURSOR: single quiet dot ---- */
@media (pointer: fine) {
  .cursor-dot {
    position: fixed;
    top: 0; left: 0;
    width: 6px; height: 6px;
    background: var(--fg);
    border-radius: 50%;
    pointer-events: none;
    z-index: 10001;
    mix-blend-mode: difference;
    transform: translate(-50%,-50%);
    transition: width 0.3s var(--ease), height 0.3s var(--ease), opacity 0.3s;
  }
  body.cursor-hover .cursor-dot { width: 40px; height: 40px; opacity: 0.9; }
  body.cursor-hidden .cursor-dot { opacity: 0; }
}

/* ---- FOOTER: tighter, editorial ---- */
.footer__col h5 {
  font-size: 10px;
  letter-spacing: 0.3em;
  color: rgba(242,242,240,0.55);
}
.footer__bottom {
  font-family: var(--font-m);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(242,242,240,0.55);
}


/* Featured index caption */
.featured__index {
  font-family: var(--font-m);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(242,242,240,0.55);
  display: block;
  margin-top: 12px;
}
/* Featured title lighter */
.featured__title {
  font-weight: 200;
  letter-spacing: -0.04em;
}

/* ============================================================
   ACCESSIBILITY: SKIP LINK
   ============================================================ */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--fg);
  color: var(--bg);
  font-family: var(--font-m);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.skip-link:focus {
  left: var(--pad);
  top: 12px;
}

/* ============================================================
   MOBILE NAVIGATION
   The desktop link row is hidden below 768px, so without this
   there is no way to reach any page except the CTA.
   ============================================================ */
.nav__burger {
  display: none;
  position: relative;
  width: 40px;
  height: 40px;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 5px;
  padding: 0;
}
.nav__burger span {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--fg);
  transition: transform 0.35s var(--ease), opacity 0.25s var(--ease), width 0.35s var(--ease);
}
.nav__burger span:nth-child(2) { width: 15px; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); width: 22px; }

.nav-mobile {
  position: fixed;
  top: 76px;
  left: 0; right: 0; bottom: 0;
  z-index: 490;
  padding: 32px var(--pad) 64px;
  background: rgba(28,28,28,0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-mobile[hidden] { display: none; }
.nav-mobile__link,
.nav-mobile__sub {
  font-family: var(--font-d);
  color: rgba(242,242,240,0.85);
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  transition: color 0.2s;
}
.nav-mobile__link {
  font-size: clamp(22px, 6vw, 30px);
  font-weight: 300;
  letter-spacing: -0.02em;
}
.nav-mobile__sub {
  font-size: 15px;
  font-weight: 300;
  padding-left: 18px;
  color: rgba(242,242,240,0.62);
}
.nav-mobile__link:hover,
.nav-mobile__sub:hover,
.nav-mobile__link:focus-visible,
.nav-mobile__sub:focus-visible { color: var(--fg); }
.nav-mobile__link[aria-current="page"],
.nav-mobile__sub[aria-current="page"] { color: var(--fg); }
body.nav-open { overflow: hidden; }

@media (max-width: 768px) {
  .nav__burger { display: flex; }
}
@media (min-width: 769px) {
  .nav-mobile { display: none; }
}

/* ============================================================
   SERVICES HUB: six disciplines, six cells, no empty cells
   ============================================================ */
.svc-hub {
  padding: clamp(32px, 5vw, 64px) var(--pad) clamp(80px, 10vw, 140px);
}
.svc-hub__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.5vw, 36px);
  max-width: 1600px;
  margin: 0 auto;
}
.svc-hub__card {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "media media"
    "name  go"
    "desc  desc";
  align-items: start;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--rule);
  transition: border-color 0.4s var(--ease);
}
.svc-hub__media { grid-area: media; }
.svc-hub__name  { grid-area: name; }
.svc-hub__desc  { grid-area: desc; }
.svc-hub__go    { grid-area: go; }
.svc-hub__card:hover { border-color: rgba(242,242,240,0.28); }
.svc-hub__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  margin-bottom: 22px;
  background: var(--grey-1);
}
.svc-hub__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.svc-hub__card:hover .svc-hub__media img { transform: scale(1.04); }
.svc-hub__name {
  font-family: var(--font-d);
  font-size: clamp(20px, 1.8vw, 27px);
  font-weight: 300;
  letter-spacing: -0.025em;
  color: var(--fg);
  margin-bottom: 10px;
}
.svc-hub__desc {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(242,242,240,0.62);
  max-width: 38ch;
}
.svc-hub__go {
  display: inline-flex;
  padding-top: 6px;
  color: rgba(242,242,240,0.55);
  transition: transform 0.4s var(--ease), color 0.3s;
}
.svc-hub__card:hover .svc-hub__go {
  color: var(--fg);
  transform: translate(3px, -3px);
}
@media (max-width: 1100px) {
  .svc-hub__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .svc-hub__grid { grid-template-columns: 1fr; }
  .svc-hub__go { display: none; }
}

/* ============================================================
   REDUCED MOTION
   The blanket rule below stops CSS transitions and animations.
   The JS effects write transforms directly, so app.js also checks
   this query and renders the resting state instead. These rules
   guarantee the resting state is the readable one even if a JS
   effect is skipped mid-flight.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Word-lighting starts at 0.22 alpha and is lit by JS. With motion
     off the JS does not run, so the text must start readable. */
  .statement__word { color: var(--fg) !important; opacity: 1 !important; }
  /* This paragraph is opacity:0 in CSS and revealed by the same JS,
     so without this it would be invisible, not just unanimated. */
  .statement__body { opacity: 1 !important; transform: none !important; }
  /* Line-reveal clips start off-screen. Show them in place. */
  .gs-line-inner { transform: none !important; }
  body.gsap-ready .gs-line-inner { transform: none !important; }
  /* Scroll-driven fades resolve to visible. */
  .gs-up, .gs-fade { opacity: 1 !important; transform: none !important; }
  .hero { clip-path: none !important; }
  .hero__headline, .nav__col { opacity: 1 !important; }
  /* Poster frame stands in for the footage; app.js does not play it. */
  .marquee__track { animation: none !important; }
  .svc-carousel__track { animation: none !important; }
}

/* Mobile: the burger is the tallest child (40px), so trim the
   padding to keep the bar at 76px, matching .nav-mobile top. */
@media (max-width: 768px) {
  .nav--fixed { padding: 18px var(--pad); }
}

/* Single-column service hero, used by the services hub where
   there is no paired image. Avoids leaving an empty grid column. */
.svc-hero--wide {
  grid-template-columns: 1fr;
  min-height: 0;
  padding-bottom: clamp(40px, 5vw, 64px);
}
.svc-hero--wide .svc-hero__headline { max-width: 24ch; }