/* ============================================================
   Kutlabz — single stylesheet.
   Merged 2026-07-17 from the old modular set (tokens/*.css,
   styles/*.css, styles.css) plus index.php's inline <style> block.
   Section order below matches the exact cascade order those files
   ran in before the merge, so later rules still win the same way.
   Originals are preserved untouched in backup-modular-2026-07-17/
   for rollback — see index.php's <head> comment.
   ============================================================ */

/* ===== tokens/fonts.css ===== */
/* Kutlabz webfonts.
   The brand uses three Google-hosted families; we load them from the Google Fonts
   CDN. @import must precede all other rules in this file.
   — Instrument Serif : display / editorial headlines (regular + italic)
   — Geist            : UI + body text
   — JetBrains Mono   : labels, eyebrows, metadata, counters
   If you need self-hosted binaries, drop the .woff2 files in assets/fonts/ and
   replace this @import with @font-face rules pointing at them. */
@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap");

/* ===== tokens/colors.css ===== */
/* ============================================================
   COLORS — Kutlabz (Simplified Palette)
   Warm-black cinema. A near-black grading-room ground, warm
   cream ink, and three neon accents borrowed from film LUTs.
   ============================================================ */
:root {
  /* --- Primary Colors --- */
  --ink:        #0a0908;   /* page ground (warm black) */
  --ink-2:      #14110f;   /* raised cards / alt sections */
  --cream:      #f3ece0;   /* primary ink */
  --cream-mute: #bdb4a5;   /* muted body */
  --cream-faint:#7a7368;   /* faint label */

  /* --- Neon Accents --- */
  --chartreuse: #d4f256;   /* primary — CTAs, active, %, glow */
  --lilac:      #b8a4ff;   /* secondary — K+, accents */
  --coral:      #ff7a59;   /* tertiary — REC, sparse highlights */

  /* Accent glows (rgba for shadows / screen-blend auroras) */
  --chartreuse-rgb: 212, 242, 86;
  --lilac-rgb: 184, 164, 255;
  --coral-rgb: 255, 122, 89;
}

/* ===== tokens/typography.css ===== */
/* ============================================================
   TYPOGRAPHY — Kutlabz
   Three voices:
   • Instrument Serif — oversized editorial display, italics for emphasis
   • Geist           — body copy & UI
   • JetBrains Mono  — uppercase eyebrows, metadata, counters
   ============================================================ */
:root {
  --font-display: "Instrument Serif", "Times New Roman", serif;
  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Display (Instrument Serif) — fluid, near-1 line-height, slightly tight */
  --type-display-xl: 400 clamp(46px, 8.2vw, 128px)/0.9 var(--font-display);
  --type-display-lg: 400 clamp(40px, 7.2vw, 104px)/0.95 var(--font-display);
  --type-display-md: 400 clamp(34px, 5.2vw, 72px)/0.98 var(--font-display);
  --type-display-sm: 400 clamp(26px, 3.2vw, 40px)/1.02 var(--font-display);
  --display-tracking: -0.018em;   /* headlines run tight */

  /* Body (Geist) */
  --type-body-lg: 400 clamp(16px, 1.6vw, 18px)/1.6 var(--font-sans);
  --type-body: 400 15px/1.6 var(--font-sans);
  --type-body-sm: 400 13.5px/1.55 var(--font-sans);

  /* Serif italic lede — the "spoken" voice under headlines */
  --type-lede: italic 400 clamp(18px, 2vw, 24px)/1.32 var(--font-display);

  /* Mono labels — ALWAYS uppercase, wide tracking */
  --type-eyebrow: 500 11px/1 var(--font-mono);
  --type-label: 400 10.5px/1 var(--font-mono);
  --type-micro: 400 9px/1.4 var(--font-mono);
  --label-tracking: 0.22em;       /* eyebrows / nav */
  --label-tracking-wide: 0.24em;  /* section indices */
  --label-tracking-tight: 0.14em; /* buttons */

  /* Weights */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
}

/* ===== tokens/spacing.css ===== */
/* ============================================================
   SPACING & LAYOUT — Kutlabz
   A calm 4px base. Sections breathe with fluid vertical rhythm;
   content sits on a wide, centered measure with generous gutters.
   ============================================================ */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 22px;
  --space-6: 32px;
  --space-7: 44px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 140px;

  /* Fluid section padding (top/bottom) and page gutter (left/right) */
  --section-y: clamp(80px, 12vh, 140px);
  --section-y-lg: clamp(90px, 14vh, 170px);
  --gutter: clamp(20px, 5vw, 64px);

  /* Content measure */
  --measure-max: 1360px;
  --nav-h: clamp(94px, 13vh, 132px);

  /* Corner radii — Kutlabz is SHARP. Square frames, pill controls only. */
  --radius-none: 0px;
  --radius-pill: 999px;
}

/* ===== tokens/effects.css ===== */
/* ============================================================
   EFFECTS — Kutlabz
   Neon glow, cinematic scrims, film grain, and the motion grammar.
   ============================================================ */
:root {
  /* Neon glows (use on text-shadow / box-shadow) */
  --glow-chartreuse: 0 0 14px rgba(var(--kz-chartreuse-rgb), 0.6);
  --glow-chartreuse-soft: 0 0 44px rgba(var(--kz-chartreuse-rgb), 0.18);
  --glow-lilac: 0 0 14px rgba(var(--kz-lilac-rgb), 0.6);
  --glow-coral: 0 0 14px rgba(var(--kz-coral-rgb), 0.55);

  /* CTA lift shadow (chartreuse pill on hover) */
  --shadow-cta: 0 0 0 1px var(--kz-chartreuse), 0 16px 40px -14px rgba(var(--kz-chartreuse-rgb), 0.6);
  /* Floating panel / modal */
  --shadow-panel: 0 50px 140px -40px rgba(0, 0, 0, 0.85);
  --shadow-card: 0 30px 80px -30px rgba(0, 0, 0, 0.7);

  /* Cinematic scrim — lay over imagery so text reads */
  --scrim-bottom: linear-gradient(180deg, rgba(10,9,8,0.05) 0%, transparent 42%, rgba(10,9,8,0.84) 100%);
  --scrim-hero: linear-gradient(180deg, rgba(10,9,8,0.60) 0%, rgba(10,9,8,0.18) 26%, rgba(10,9,8,0.30) 56%, rgba(10,9,8,0.93) 100%);

  /* Hairline rule that fades out (trails an eyebrow) */
  --rule-fade: linear-gradient(90deg, var(--kz-line-2), transparent);

  /* Film-grain tile (SVG fractal noise, screen-blended at ~0.5 opacity) */
  --grain-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/><feColorMatrix values="0 0 0 0 0.95  0 0 0 0 0.93  0 0 0 0 0.88  0 0 0 0.05 0"/></filter><rect width="100%25" height="100%25" filter="url(%23n)"/></svg>');

  /* Motion grammar */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);   /* the house easing — everything decelerates */
  --dur-fast: 0.18s;
  --dur-base: 0.3s;
  --dur-reveal: 0.72s;    /* scroll-in rise */
  --dur-count: 1.8s;      /* stat count-up */
  --reveal-rise: 22px;    /* translateY start for reveals */
}

/* ===== styles/layout.css ===== */
/* Layout foundations: spacing, grid, measure */

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

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

/* Containers */
.container {
  margin: 0 auto;
  max-width: 1600px;
  padding: 100px var(--r);
}

#selected-work .container{
  padding: 30px var(--r) 30px;
}

.section {
  position: relative;
  border-top: 1px solid var(--ink-2);
}

.section--hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ink);
  border: none;
  padding: 0;
}

.section--dark {
  background: var(--ink);
}

.section--darker {
  background: var(--ink-2);
}

.section--contact {
  padding: clamp(90px, 14vh, 170px) clamp(20px, 5vw, 64px) clamp(70px, 10vh, 120px);
  background: radial-gradient(85% 80% at 22% -10%, rgba(184, 164, 255, 0.22), transparent 55%),
              radial-gradient(80% 90% at 70% 120%, rgba(150, 168, 52, 0.16), transparent 55%),
              radial-gradient(60% 70% at 50% 130%, rgba(255, 122, 89, 0.12), transparent 50%),
              var(--ink);
}

.section--promise {
  background: radial-gradient(80% 120% at 50% -20%, rgba(150, 168, 52, 0.06), transparent 60%), var(--ink);
}

/* Text utilities */
.text-hover-line {
  background-image: linear-gradient(var(--chartreuse), var(--chartreuse));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 0.18s ease-out, color 0.18s ease-out;
}

.text-hover-line:hover {
  background-size: 100% 1px;
  color: var(--cream);
}

em {
  font-style: italic;
  color: var(--chartreuse);
}

/* ===== styles/animations.css ===== */
/* Animation keyframes and motion utilities */

@keyframes kzRise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes kzCue {
  0% {
    transform: translateY(0);
    opacity: 0.25;
  }
  50% {
    transform: translateY(7px);
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 0.25;
  }
}

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

@keyframes kzModalIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes kzFadeIn {
  to {
    opacity: 1;
  }
}

/* Reveal animation state */
[data-reveal] {
  opacity: 0;
}

[data-reveal].kz-shown {
  opacity: 1;
}

/* ===== styles/interactions.css ===== */
/* Hover, focus, and interactive states */

/* Work mosaic tiles */
.kz-tile {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--ink-2);
  background: var(--ink-2);
  cursor: pointer;
  padding: 0;
  display: block;
  width: 100%;
  height: 100%;
  font: inherit;
  color: inherit;
  text-align: left;
  transition: border-color 0.22s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.kz-tile:hover {
  border-color: rgba(212, 242, 86, 0.55);
  transform: translateY(-3px);
}

.kz-tile:focus-visible {
  outline: 2px solid var(--chartreuse);
  outline-offset: 2px;
}

/* Play button on tiles */
.kz-tile .kz-play {
  opacity: 0.85;
  transition: opacity 0.22s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.kz-tile:hover .kz-play {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.08);
}

/* Work image hover effect */
.kz-work:hover .kz-work-img {
  filter: saturate(1.08) brightness(1.06);
}

.kz-work-img {
  transition: filter 0.18s ease-out;
}

/* Modal player */
#kz-player {
  width: min(1080px, 92vw);
  max-width: 92vw;
  max-height: none;
  padding: 0;
  border: 1px solid var(--ink-2);
  background: var(--ink);
  color: var(--cream);
  box-shadow: 0 50px 140px -40px rgba(0, 0, 0, 0.85);
  overflow: visible;
}

#kz-player[open] {
  animation: kzModalIn 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#kz-player::backdrop {
  background: rgba(6, 5, 4, 0.74);
  backdrop-filter: blur(8px);
  opacity: 0;
}

#kz-player[open]::backdrop {
  animation: kzFadeIn 0.34s ease forwards;
}

/* ===== styles/grain.css ===== */
/* Film grain overlay */

.grain-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.5;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22240%22 height=%22240%22><filter id=%22n%22><feTurbulence type=%22fractalNoise%22 baseFrequency=%220.9%22 numOctaves=%222%22 stitchTiles=%22stitch%22/><feColorMatrix values=%220 0 0 0 0.95  0 0 0 0 0.93  0 0 0 0 0.88  0 0 0 0.05 0%22/></filter><rect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23n)%22/></svg>');
  aria-hidden: true;
}

.grain-overlay[data-hidden] {
  display: none;
}

/* ===== styles/components.css ===== */
/* Component-level styling for sections, nav, buttons, forms */

/* ====== NAVIGATION ====== */
#kz-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px clamp(20px, 5vw, 64px);
  border-bottom: 1px solid transparent;
  transition: background 0.3s ease, border-color 0.3s ease, padding 0.3s ease;
}

.nav-logo {
  font-family: 'Instrument Serif', serif;
  font-size: 26px;
  letter-spacing: -0.01em;
  color: var(--cream);
  line-height: 1;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 40px);
}

.nav-menu {
  display: flex;
  gap: clamp(18px, 2.4vw, 34px);
  align-items: center;
}

.nav-link {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream-mute);
}

.nav-cta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--chartreuse);
  border: 1px solid var(--ink-2);
  border-radius: 999px;
  padding: 9px 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.nav-cta:hover {
  border-color: var(--chartreuse);
  background: rgba(212, 242, 86, 0.06);
}

.nav-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--chartreuse);
  display: inline-block;
}

/* ====== HERO SECTION ====== */
.hero-reel {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero-frame {
  position: absolute;
  inset: 0;
  opacity: 1;
  will-change: opacity;
}

.hero-frame.inactive {
  opacity: 0;
}

.hero-kb {
  position: absolute;
  inset: -3%;
  will-change: transform;
}

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

.hero-aurora {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
  overflow: hidden;
  max-height: 100vh;
}

.hero-scrim {
  position: absolute;
  inset: 0;
}

.hero-aura {
  position: absolute;
  border-radius: 50%;
  filter: blur(14px);
  will-change: transform;
}

.hero-aura1 {
  width: 62vw;
  height: 62vw;
  left: -14vw;
  top: -22vw;
  background: radial-gradient(circle at 50% 50%, rgba(150, 168, 52, 0.34), rgba(150, 168, 52, 0) 62%);
}

.hero-aura2 {
  width: 52vw;
  height: 52vw;
  right: -12vw;
  bottom: -20vw;
  background: radial-gradient(circle at 50% 50%, rgba(184, 164, 255, 0.3), rgba(184, 164, 255, 0) 62%);
}

.hero-aura3 {
  width: 40vw;
  height: 40vw;
  left: 40vw;
  bottom: -14vw;
  background: radial-gradient(circle at 50% 50%, rgba(255, 122, 89, 0.22), rgba(255, 122, 89, 0) 60%);
  filter: blur(16px);
}

#kz-fx {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: screen;
}

.hero-marker {
  position: absolute;
  right: clamp(12px, 2.2vw, 30px);
  top: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  pointer-events: none;
}

.hero-marker-text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(243, 236, 224, 0.44);
}

.hero-spacer {
  height: clamp(94px, 13vh, 132px);
  flex-shrink: 0;
}

.hero-content {
  position: relative;
  z-index: 3;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 1360px;
  width: 100%;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 64px);
}

.hero-status {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(22px, 3vh, 34px);
  flex-wrap: wrap;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(212, 242, 86, 0.34);
  border-radius: 999px;
  padding: 6px 13px 6px 11px;
  background: rgba(10, 9, 8, 0.36);
  backdrop-filter: blur(6px);
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--coral);
  display: inline-block;
}

.status-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream);
}

.status-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cream-mute);
}

.status-divider {
  color: var(--cream-faint);
}

.status-location {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cream-faint);
}

.hero-headline {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: clamp(46px, 8.2vw, 128px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--cream);
  text-shadow: 0 2px 50px rgba(0, 0, 0, 0.45);
}

.hero-word {
  display: inline-flex;
  align-items: baseline;
  overflow: hidden;
  vertical-align: bottom;
}

.hero-word-text {
  display: inline-block;
  font-style: italic;
  color: var(--chartreuse);
  will-change: transform, opacity;
}

.hero-subheading {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(18px, 2.1vw, 25px);
  line-height: 1.3;
  color: var(--cream-mute);
  max-width: 560px;
  margin: clamp(22px, 3vh, 32px) 0 0;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 26px;
  margin-top: clamp(28px, 4vh, 42px);
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--chartreuse);
  color: var(--ink);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 16px 26px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.btn-primary:hover {
  box-shadow: 0 0 0 1px var(--chartreuse), 0 14px 34px -12px rgba(212, 242, 86, 0.55);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream);
  border: 1px solid rgba(243, 236, 224, 0.28);
  border-radius: 999px;
  padding: 16px 22px;
  background: rgba(10, 9, 8, 0.3);
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.btn-secondary:hover {
  border-color: var(--chartreuse);
  background: rgba(212, 242, 86, 0.1);
}

.btn-icon {
  font-size: 14px;
  color: var(--chartreuse);
}

/* ====== HERO HUD ====== */
.hero-hud {
  position: relative;
  z-index: 3;
  max-width: 1360px;
  width: 100%;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 64px) clamp(20px, 4vh, 38px);
}

.hud-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(16px, 4vw, 48px);
  border-top: 1px solid rgba(243, 236, 224, 0.16);
  padding-top: 16px;
  flex-wrap: wrap;
}

.hud-now-playing {
  min-width: 160px;
  flex: 1;
}

.hud-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cream-faint);
}

.hud-title {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(17px, 2vw, 22px);
  color: var(--cream);
  margin-top: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hud-thumbnails {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.hud-thumbnail {
  position: relative;
  width: clamp(56px, 10.5vw, 156px);
  height: clamp(35px, 6.4vw, 96px);
  border: 1px solid var(--chartreuse);
  overflow: hidden;
  cursor: pointer;
  background: var(--ink-2);
  display: block;
  padding: 0;
  font: inherit;
  color: inherit;
}

.hud-thumbnail.inactive {
  border-color: rgba(243, 236, 224, 0.2);
}

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

.hud-thumbnail.inactive img {
  opacity: 0.62;
}

.hud-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0%;
  background: var(--chartreuse);
}

.hud-scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.hud-scroll-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cream-faint);
}

.hud-scroll-cue {
  display: inline-block;
  color: var(--chartreuse);
}

/* ====== WORK SECTION ====== */
.work-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.work-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--chartreuse);
  display: block;
}

.work-title {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: clamp(34px, 5.2vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.012em;
  margin: 20px 0 0;
}

.work-desc {
  font-family: 'Geist', sans-serif;
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--cream-mute);
  max-width: 42ch;
  margin: 0;
  text-wrap: pretty;
}

.work-grid {
    margin:3rem auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.work-grid > div{
  box-shadow: 0 0 1px var(--cream);
}


.work-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 26px;
  flex-wrap: wrap;
}

.work-footer-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream-faint);
}

.work-footer-link {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--chartreuse);
}

/* ====== SELECTED WORK CAROUSEL ======
   Theme is driven entirely by custom properties on .sw-carousel-wrap.
   To switch to the light/cream version, add class="sw-light" to the
   wrap element in index.php (or remove it to go back to dark).

   Structure: .sw-carousel-wrap (normal container width) holds
   .sw-carousel-shape (the panel background) and .sw-nav, which stays
   outside the shape so the arrows are always on the page background. */
.sw-carousel-wrap {
  --sw-panel-bg: var(--ink-2);
  --sw-card-bg: var(--ink);
  --sw-tint: linear-gradient(180deg, rgba(10, 9, 8, 0) 35%, rgba(10, 9, 8, 0.9) 100%);
  --sw-badge-bg: var(--chartreuse);
  --sw-badge-text: var(--ink);
  --sw-cat-color: var(--chartreuse);
  --sw-name-color: var(--cream);

  position: relative;
  margin-top: 32px;
}

#curveTop {
    width: 100%;
    position: absolute;
    top: -2px;
    z-index: 5;
}

#curveBottom {
    width: 100%;
    position: absolute;
    transform: rotate(180deg);
    bottom: -2px;
    z-index: 5;
}

/* Light/cream variant — matches the reference screenshot's palette.
   Only affects the .sw-carousel-shape panel; .sw-nav lives outside the
   shape on the page's own (dark) background, so its colors stay fixed
   regardless of this toggle — see .sw-navbtn below. */
.sw-carousel-wrap.sw-light {
  --sw-panel-bg: #f3ece0;
  --sw-card-bg: #e9e0cf;
  --sw-tint: linear-gradient(180deg, rgba(243, 236, 224, 0) 45%, rgba(20, 15, 10, 0.55) 100%);
  --sw-badge-bg: #17130f;
  --sw-badge-text: #f3ece0;
  --sw-cat-color: #8a6d4f;
  --sw-name-color: #17130f;
}

.sw-carousel-shape {
  position: relative;
  overflow: hidden;
  padding: 0 clamp(20px, 5vw, 64px);
}

/* No padding on .sw-carousel-track (the swiper root) — Swiper sizes
   slides against its own box, so padding there would misalign the
   computed slide width from the visible area and show a partial slide
   at the edge. Framing padding lives on .sw-carousel-shape instead,
   outside Swiper's width calculation, so slidesPerView always divides
   the track evenly with no cut-off card. */
.sw-carousel-track .swiper-wrapper {
  align-items: stretch;
}

.sw-item {
  position: relative;
  overflow: hidden;
  background: var(--sw-card-bg);
  height: clamp(440px, 50vw, 640px);
  transition: transform 0.35s ease, box-shadow 0.35s;
}

.sw-item:hover {
  transform: scale(1);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.7);
  z-index: 2;
}

.sw-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s ease;
  pointer-events: none;
}

.sw-tin {
  position: absolute;
  inset: 0;
  background: var(--sw-tint);
  pointer-events: none;
}

.sw-vb {
  position: absolute;
  top: 4.8rem;
  left: 14px;
  background: var(--sw-badge-bg);
  color: var(--sw-badge-text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  padding: 5px 10px;
  font-weight: 700;
  pointer-events: none;
}

.sw-meta {
  position: absolute;
  bottom: 3.8rem;
  left: 0;
  right: 0;
  padding: 18px;
  z-index: 2;
  pointer-events: none;
}

.sw-cat {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sw-cat-color);
  margin-bottom: 5px;
}

.sw-name {
  font-family: 'Instrument Serif', serif;
  font-size: clamp(1rem, 2vw, 1.5rem);
  color: var(--sw-name-color);
  line-height: 1.1;
}

.sw-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  z-index: 5;
  position: relative;
  margin-bottom: 20px;
}

.sw-navbtn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--line-2, rgba(243, 236, 224, 0.18));
  background: rgba(243, 236, 224, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s, transform 0.2s;
}

.sw-navbtn:hover {
  background: var(--chartreuse);
  border-color: var(--chartreuse);
  transform: scale(1.06);
}

.sw-navbtn svg {
  width: 16px;
  height: 16px;
  stroke: var(--chartreuse);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.25s;
}

.sw-navbtn:hover svg {
  stroke: var(--ink);
}

.sw-navbtn.swiper-button-disabled {
  opacity: 0.35;
  pointer-events: none;
}

@media (max-width: 1200px) {

  .sw-vb {
    top:3rem;
  }

  .sw-meta {
    bottom: 2rem;
  }
}

@media (max-width: 900px) {
  .sw-item {
    height: clamp(300px, 78vw, 400px);
  }

  .sw-vb {
    top:2.2rem;
  }

  .sw-meta {
    bottom: 1.5rem;
  }
}

/* ====== PRESENCE SECTION ====== */
.presence-grid {
  display: flex;
  flex-direction: row;
  gap: .5rem;
  margin-top: clamp(40px, 6vh, 64px);
}

.pc {
  background: var(--ink);
  display: flex;
  flex:1;
  flex-direction: row;
  align-items: stretch;
  height: clamp(300px, 40vw, 550px);
  overflow: hidden;
  position: relative;
  transition: background-color 0.3s;
}

.pc:hover {
  background-color: rgba(243, 236, 224, 0.03);
}

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

.pc-info {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding:1rem;
  border-bottom:3px solid var(--chartreuse);
}

.pc-info div{
  text-shadow: 2px 2px 4px #000000;
}

.pc:nth-of-type(2) .pc-info {
  border-bottom:3px solid var(--coral);
}

.pc:nth-of-type(3) .pc-info {
  border-bottom:3px solid #b8a4ff;
}

.pc-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.55s ease;
    pointer-events: none;
    z-index: 1;
    filter:brightness(120%);
}

.pc-num {
  position: relative;
  z-index: 2;
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(1rem, 2vw, 1.5rem);
  letter-spacing: 0.2em;
  color: var(--chartreuse);
}

.pc-city {
  position: relative;
  z-index: 2;
  font-family: 'Instrument Serif', serif;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  line-height: 1.1;
  text-align: right;
  letter-spacing: -0.01em;
  margin-top:auto;
}

.pc-country {
  position: relative;
  z-index: 2;
  font-family: 'JetBrains Mono', monospace;
  font-size: 1rem;
  letter-spacing: 0.18em;
  text-align: right;
  text-transform: uppercase;
}

.pc-role {
  position: relative;
  z-index: 2;
  color: var(--cream-mute);
  font-size: clamp(1rem, 2vw, 1.5rem);
  font-weight: 400;
}

@media (max-width: 900px) {
  .pc,
  .pc:nth-child(even) {
    flex-direction: row;
  }

  .pc-info {
    padding: 0 16px;
    gap: 2px;
    height:250px;
  }

  .pc-city {
    font-size: 18px;
  }

  .pc-country,
  .pc-role {
    font-size: 11px;
  }
}

/* ====== FAQ SECTION ====== */
.faq-wrap {
  max-width: 860px;
  margin-top: clamp(32px, 5vh, 48px);
}

.faq-item {
  border-top: 1px solid var(--ink-2);
  overflow: hidden;
}

.faq-item:last-child {
  border-bottom: 1px solid var(--ink-2);
}

.faq-q {
  width: 100%;
  background: none;
  border: none;
  color: var(--cream);
  text-align: left;
  padding: 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  cursor: pointer;
  font-family: 'Instrument Serif', serif;
  font-size: clamp(16px, 1.8vw, 20px);
  letter-spacing: -0.005em;
  transition: color 0.2s;
}

.faq-item.open .faq-q {
  color: var(--chartreuse);
}

.faq-icon {
  width: 28px;
  height: 28px;
  margin-right:0.5rem;
  border: 1px solid var(--ink-2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  transition: transform 0.3s, border-color 0.3s;
}

.faq-item.open .faq-icon {
  transform: rotate(45deg);
  border-color: var(--chartreuse);
  background: rgba(212, 242, 86, 0.08);
}

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.3s;
}

.faq-item.open .faq-a {
  max-height: 300px;
  padding-bottom: 24px;
}

.faq-a p {
  color: var(--cream-mute);
  font-size: 14.5px;
  line-height: 1.7;
  font-weight: 300;
  max-width: 680px;
}

/* ====== CONTACT FORM ====== */

/* iOS / Safari / cross-browser normalization — kill native chrome
   (rounded corners, inner shadows, tap flash) before component styles apply */
.form-right input,
.form-right textarea,
.form-right select,
.form-right button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.form-right label {
  -webkit-tap-highlight-color: transparent;
}

.form-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
  margin-top: clamp(40px, 6vh, 64px);
}

.contact-whatsapp {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--ink-2);
}

.contact-whatsapp .work-label {
  display: block;
}

.form-right form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.fg {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fg label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream-mute);
}

.fg input,
.fg textarea,
.fg select {
  background: rgba(243, 236, 224, 0.07);
  border: 1px solid rgba(243, 236, 224, 0.22);
  color: var(--cream);
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.4;
  padding: 14px 16px;
  outline: none;
  transition: border-color 0.2s;
  width: 100%;
  resize: vertical;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Firefox dims placeholder opacity by default — match Safari/Chrome */
.fg input::placeholder,
.fg textarea::placeholder {
  color: var(--cream-mute);
  opacity: 1;
}

.fg input:focus,
.fg textarea:focus,
.fg select:focus {
  border-color: var(--chartreuse);
}

/* Neutralize Safari/Chrome's yellow autofill background so it matches the dark theme */
.fg input:-webkit-autofill,
.fg input:-webkit-autofill:hover,
.fg input:-webkit-autofill:focus,
.fg textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--cream);
  -webkit-box-shadow: 0 0 0px 1000px rgba(243, 236, 224, 0.07) inset;
  box-shadow: 0 0 0px 1000px rgba(243, 236, 224, 0.07) inset;
  caret-color: var(--cream);
  transition: background-color 9999s ease-in-out 0s;
}

.fg select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%237a7368' stroke-width='1.5' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
  cursor: pointer;
}

.fg select option {
  background: var(--ink-2);
  color: var(--cream);
}

.fg textarea {
  min-height: 100px;
}

.fg-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.budget-opts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 2px;
}

.bopt {
  display: block;
  position: relative;
  border: 1px solid var(--ink-2);
  padding: 12px;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.2s, background 0.2s;
  border-color:rgba(243, 236, 224, 0.3);
  user-select: none;
  touch-action: manipulation;
}

.bopt:hover {
  border-color: rgba(243, 236, 224, 0.3);
}

.bopt input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  appearance: none;
  -webkit-appearance: none;
}

.bopt:focus-within {
  outline: 2px solid var(--chartreuse);
  outline-offset: 2px;
}

.bopt.sel {
  border-color: var(--chartreuse);
  background: rgba(212, 242, 86, 0.07);
}

.bopt .blab {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream-faint);
  display: block;
  margin-bottom: 3px;
}

.bopt .bval {
  font-family: 'Instrument Serif', serif;
  font-size: 18px;
  color: var(--cream);
}

.bopt.sel .bval {
  color: var(--chartreuse);
}

.form-submit {
  background: var(--chartreuse);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 16px;
  border: none;
  cursor: pointer;
  transition: background 0.25s, transform 0.18s, box-shadow 0.25s;
  width: 100%;
  margin-top: 6px;
  font-family: 'Geist', sans-serif;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  gap:1rem;
}

.form-submit::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.15) 50%, transparent 100%);
  transform: translateX(-100%);
  transition: transform 0s;
}

.form-submit:hover {
  background: var(--cream);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(212, 242, 86, 0.25);
}

.form-submit:hover::after {
  transform: translateX(100%);
  transition: transform 0.6s ease;
}

.social-checks {
  display: flex;
  flex-direction: row;
  flex-wrap:wrap;
  gap: 8px;
}

.scheck {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
  color: var(--cream);
  font-weight: 300;
  touch-action: manipulation;
}

.scheck input[type=checkbox] {
  width: 16px;
  height: 16px;
  border: 1px solid rgba(243, 236, 224, 0.3);
  background: rgba(243, 236, 224, 0.05);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  flex: none;
  display: grid;
  justify-content: center;
  align-content: center;
  place-items: center;
  transition: border-color 0.2s;
}

.scheck input[type=checkbox]:checked {
  background: var(--chartreuse);
  border-color: var(--chartreuse);
}

.scheck input[type=checkbox]:checked::after {
  content: '';
  width: 8px;
  height: 5px;
  border-left: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(-45deg) translateY(-1px);
  display: block;
}

.social-extra {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

@media (max-width: 900px) {
  .form-layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .budget-opts {
    grid-template-columns: 1fr;
  }

  .fg-row {
    grid-template-columns: 1fr;
  }

  /* iOS Safari auto-zooms the page on focus if an input's font-size is under 16px */
  .fg input,
  .fg textarea,
  .fg select {
    font-size: 16px;
  }
}

/* ====== FOOTER (3-column) ====== */
.ftr {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 32px;
}

.fc {
  font-family: 'JetBrains Mono', monospace;
  font-size: .75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream);
  text-align: center;
  line-height:1.4em;
}

.fc a{
  color:var(--chartreuse)
}

.fr {
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: flex-end;
}

.si {
  width: 36px;
  height: 36px;
  border: 1px solid var(--ink-2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.25s, transform 0.25s, background 0.25s;
  flex: none;
}

.si:nth-child(1):hover {
  border-color: var(--coral);
  background: rgba(255, 122, 89, 0.1);
  transform: translateY(-2px);
}

.si:nth-child(2):hover {
  border-color: var(--cream);
  background: rgba(243, 236, 224, 0.08);
  transform: translateY(-2px);
}

.si:nth-child(3):hover,
.si:nth-child(4):hover {
  border-color: var(--lilac);
  background: rgba(184, 164, 255, 0.1);
  transform: translateY(-2px);
}

.si svg {
  width: 15px;
  height: 15px;
  fill: var(--cream-mute);
  transition: fill 0.25s;
}

.si:nth-child(1):hover svg {
  fill: var(--coral);
}

.si:nth-child(2):hover svg {
  fill: var(--cream);
}

.si:nth-child(3):hover svg,
.si:nth-child(4):hover svg {
  fill: var(--lilac);
}

@media (max-width: 900px) {
  .ftr {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 20px;
  }

  .fr {
    justify-content: center;
  }

  .fl {
    display: flex;
    justify-content: center;
  }
}

/* ====== WHATSAPP BUBBLE ====== */
.wa-bubble {
  position: fixed;
  bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  right: calc(28px + env(safe-area-inset-right, 0px));
  z-index: 90;
  width: 52px;
  height: 52px;
  background: #25d366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 32px rgba(37, 211, 102, 0.35);
  transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
  cursor: pointer;
}

.wa-bubble:hover {
  transform: scale(1.1);
  box-shadow: 0 12px 40px rgba(37, 211, 102, 0.45);
}

/* Hidden while the form's own submit button is on screen so the two
   overlapping CTAs (bubble + "Send the brief") never sit on top of
   each other — most noticeable on iOS Safari, where the collapsing
   bottom toolbar shifts the fixed bubble further over form content. */
.wa-bubble.wa-bubble--hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.85);
}

.wa-bubble svg {
  width: 26px;
  height: 26px;
  fill: #fff;
}

/* Tile styling */
.kz-kb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tile-kbwrap {
  position: absolute;
  inset: -4%;
}

.tile-shine {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 42%;
  left: -60%;
  background: linear-gradient(90deg, transparent, rgba(243, 236, 224, 0.1), transparent);
  transform: skewX(-16deg);
  pointer-events: none;
}

.tile-scrim {
  position: absolute;
  inset: 0;
}

.tile-views {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--chartreuse);
  color: var(--ink);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 9px;
}

.tile-views.small {
  font-size: 9.5px;
  letter-spacing: 0.1em;
  padding: 4px 8px;
  top: 12px;
  left: 12px;
}

.tile-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 1px solid rgba(243, 236, 224, 0.55);
  background: rgba(10, 9, 8, 0.34);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cream);
  font-size: 17px;
  cursor: pointer;
}

.tile-play.small {
  width: 50px;
  height: 50px;
  font-size: 14px;
}

.tile-play.medium {
  width: 56px;
  height: 56px;
  font-size: 15px;
}

.tile-info {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  display: block;
}

.tile-info.small-text {
  left: 14px;
  right: 14px;
  bottom: 13px;
}

.tile-info.medium-text {
  left: 16px;
  right: 16px;
  bottom: 14px;
}

.tile-cat {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--chartreuse);
  display: block;
}

.tile-cat.small {
  font-size: 9.5px;
}

.tile-name {
  font-family: 'Instrument Serif', serif;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.02;
  color: var(--cream);
  display: block;
  margin-top: 5px;
}

.tile-name.small {
  font-size: 22px;
  line-height: 1;
  margin-top: 5px;
}

.tile-name.medium {
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1;
}

.tile-body {
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  line-height: 1.45;
  color: var(--cream-mute);
  display: block;
  margin-top: 6px;
  max-width: 44ch;
}

.tile-body.small {
  font-size: 13px;
  line-height: 1.45;
  margin-top: 6px;
}

/* ====== SERVICES SECTION ====== */
.services-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}

.services-sticky {
  position: sticky;
  top: 108px;
}

.service-headline {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: clamp(34px, 5vw, 68px);
  line-height: 1;
  letter-spacing: -0.012em;
  margin: 20px 0 0;
}

.service-body {
  font-family: 'Geist', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--cream-mute);
  margin: 26px 0 0;
  max-width: 42ch;
}

.service-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--ink-2);
  border-radius: 999px;
  padding: 7px 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream-mute);
}

.chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}

.chip-dot.green {
  background: var(--chartreuse);
}

.chip-dot.purple {
  background: var(--lilac);
}

.chip-dot.coral {
  background: var(--coral);
}

.services-list {
  border-top: 1px solid var(--ink-2);
}

.service-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: baseline;
  padding: 30px 4px;
  border-bottom: 1px solid var(--ink-2);
}

.service-item:last-child {
  border-bottom: none;
}

.service-item:nth-child(2) {
  transition-delay: 0.06s;
}

.service-item:nth-child(3) {
  transition-delay: 0.12s;
}

.service-item:nth-child(4) {
  transition-delay: 0.18s;
}

.service-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--cream-faint);
}

.service-item h3 {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1;
  margin: 0;
}

.service-item p {
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--cream-mute);
  margin: 10px 0 0;
  max-width: 46ch;
}

.service-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream-faint);
}

/* ====== STUDIO SECTION ====== */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
  margin-top: clamp(40px, 6vh, 64px);
}

/*
.team-card {
  border: 2px solid var(--chartreuse);
  background: var(--ink-2);
  padding:0 0 1rem;
  border-radius: .5rem;
  z-index: 1;
  position: relative;
  overflow:hidden;
  transition: transform 0.3s, scale 0.3s;
}
*/

.team-card{
  position: relative;
  display: inline-block;
  text-decoration:none;
  padding: 3px;
  border-radius: .5rem;
  background: conic-gradient(from var(--gb-angle), #D4F257, #FF7A59, #B8A4FF, #D4F257 /* repeat first color for a seamless loop */);
  animation: gb-hue 4s linear infinite!important;
  overflow: hidden;
  transition: transform 0.3s, scale 0.3s!important;
}

@media (prefers-reduced-motion: reduce) {
  .team-grid .team-card { animation: none!important; }
}

.team-card::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: .5rem;
    background: #2b2b2b;
}

.team-card *{
  position: relative;
  z-index: 1;
}

.team-card:nth-child(2) {
  transition-delay: 0.07s;
  animation-delay: 1s!important;
  border-color: var(--coral);
}

.team-card:nth-child(3) {
  transition-delay: 0.14s;
  animation-delay: 2s!important;
  border-color:var(--cream);
}

.team-card:nth-child(4) {
  transition-delay: 0.21s;
  animation-delay: 3s!important;
  border-color:#b8a4ff;
}

.team-card:hover{
    transform: translateY(-.5rem);
    scale: 1.02;
}

.team-photo {
  overflow: hidden;
  border: 1px solid var(--ink-2);
  background: var(--ink-2);
  border-radius: .5rem;
  flex:1;
}

.team-photo img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

.team-card div:not(.team-photo),.team-card p{
  padding:0 1.2rem .5rem;
}

.team-name {
  font-family: 'Instrument Serif', serif;
  font-size: 24px;
  line-height: 1.04;
  margin-top: 16px;
}

.team-role {
  font-family: 'JetBrains Mono', monospace;
  font-size: .75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--chartreuse);
  margin-top: 7px;
}

.team-quote {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--cream-mute);
  margin: 1rem 0 .5rem;
}

/* ====== CONTACT SECTION ====== */
.contact-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cream-faint);
  display: block;
}

.contact-headline {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: clamp(44px, 9vw, 128px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  margin: 22px 0 0;
}

.contact-body {
  font-family: 'Geist', sans-serif;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.6;
  color: var(--cream-mute);
  max-width: 60ch;
  margin: 32px 0 0;
}

.contact-cta-wrapper {
  margin-top: 46px;
}

.contact-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--chartreuse);
  color: var(--ink);
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 18px 28px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: box-shadow 0.18s ease;
}

.contact-cta:hover {
  box-shadow: 0 0 0 1px var(--chartreuse), 0 14px 34px -12px rgba(212, 242, 86, 0.55);
}

.contact-cta-arrow {
  font-size: 15px;
}

.contact-info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 4vw, 48px);
  margin-top: clamp(56px, 8vh, 90px);
  border-top: 1px solid var(--ink-2);
  padding-top: 36px;
}

.contact-info > div:nth-child(2) {
  transition-delay: 0.08s;
}

.contact-info > div:nth-child(3) {
  transition-delay: 0.16s;
}

.info-block {
  /* */
}

.info-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream-faint);
}

.info-link {
  font-family: 'Geist', sans-serif;
  font-size: 16px;
  color: var(--cream);
  display: inline-block;
  margin-top: 10px;
}

.info-link.highlight {
  color: var(--chartreuse);
}

.info-text {
  font-family: 'Geist', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--cream-mute);
  margin: 10px 0 0;
}

/* ====== PROMISE SECTION ====== */
.promise-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cream-faint);
  white-space: nowrap;
}

.promise-headline {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: clamp(40px, 7.2vw, 104px);
  line-height: 0.98;
  letter-spacing: -0.016em;
  margin: clamp(28px, 4.5vh, 48px) 0 0;
  max-width: 17ch;
}

.promise-label-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.promise-hairline {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--ink-2), transparent);
}

.promise-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: clamp(60px, 10vh, 120px);
}

.promise-card {
  position: relative;
  padding: 0 clamp(20px, 3.4vw, 56px) 0 0;
}

.promise-card:not(:first-child) {
  padding: 0 clamp(20px, 3.4vw, 56px);
}

.promise-card:not(:first-child)::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6%;
  bottom: 18%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(243, 236, 224, 0.2), transparent);
}

.promise-divider {
  position: absolute;
  left: 0;
  top: 6%;
  bottom: 18%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(243, 236, 224, 0.2), transparent);
}

.promise-stat {
  font-family: 'Instrument Serif', serif;
  font-size: clamp(70px, 11vw, 168px);
  line-height: 0.8;
  letter-spacing: -0.022em;
  color: var(--cream);
}

.promise-bar {
  position: relative;
  height: 3px;
  margin-top: clamp(20px, 2.6vh, 30px);
  background: rgba(243, 236, 224, 0.1);
  overflow: hidden;
}

.promise-bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  box-shadow: 0 0 14px rgba(212, 242, 86, 0.6);
}

.promise-bar-fill.gold {
  background: var(--chartreuse);
}

.promise-bar-fill.purple {
  background: var(--lilac);
  box-shadow: 0 0 14px rgba(184, 164, 255, 0.6);
}

.promise-bar-fill.coral {
  background: var(--coral);
  box-shadow: 0 0 14px rgba(255, 122, 89, 0.55);
}

.promise-meta {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 22px;
}

.promise-dot {
  width: 6px;
  height: 6px;
  display: inline-block;
  border-radius: 50%;
}

.promise-dot.gold {
  background: var(--chartreuse);
}

.promise-dot.purple {
  background: var(--lilac);
}

.promise-dot.coral {
  background: var(--coral);
}

.promise-meta-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream-mute);
}

.promise-desc {
  font-family: 'Geist', sans-serif;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--cream-faint);
  margin: 11px 0 0;
  max-width: 27ch;
}

/* ====== FOOTER ====== */
footer {
  position: relative;
  padding: clamp(56px, 8vh, 84px) clamp(20px, 5vw, 64px) 40px;
  border-top: 1px solid var(--ink-2);
  background: var(--ink);
}

.footer-content {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.footer-logo {
  font-family: 'Instrument Serif', serif;
  font-size: clamp(64px, 12vw, 150px);
  line-height: 0.82;
  letter-spacing: -0.02em;
  color: var(--cream);
}

.footer-tagline {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.25;
  color: var(--cream-mute);
  max-width: 24ch;
}

.footer-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: clamp(40px, 6vh, 64px);
  padding-top: 22px;
  border-top: 1px solid var(--ink-2);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream-faint);
}

.footer-brand {
  /* */
}

.footer-location {
  color: var(--cream-mute);
}

.footer-year {
  /* */
}

/* ====== MODAL PLAYER ====== */
#kz-player {
  padding: 0;
  border: 1px solid var(--ink-2);
  background: var(--ink);
  color: var(--cream);
  overflow: visible;
}

.player-wrapper {
  position: relative;
  padding: clamp(16px, 2.4vw, 28px);
}

.player-close {
  position: absolute;
  top: calc(-1px - clamp(16px, 2.4vw, 28px) + 14px);
  right: clamp(16px, 2.4vw, 28px);
  z-index: 3;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--ink-2);
  background: rgba(10, 9, 8, 0.6);
  color: var(--cream);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.player-close:hover {
  border-color: var(--chartreuse);
  background: rgba(212, 242, 86, 0.1);
}

.player-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.player-indicator {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--chartreuse);
  display: inline-block;
}

.player-title-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cream-mute);
}

.player-views {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream-faint);
  margin-left: auto;
}

.player-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  max-height: 64vh;
  margin: 0 auto;
  background: #000;
  border: 1px solid var(--ink-2);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.player-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
  filter: blur(26px) brightness(0.55);
  transform: scale(1.18);
}

.player-image {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: 100%;
  object-fit: contain;
  z-index: 1;
}

.player-gradient {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(60% 60% at 50% 50%, transparent, rgba(0, 0, 0, 0.32));
}

.player-play-btn {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 1px solid rgba(243, 236, 224, 0.6);
  background: rgba(10, 9, 8, 0.4);
  backdrop-filter: blur(6px);
  color: var(--cream);
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s ease, background 0.2s ease;
}

.player-play-btn:hover {
  border-color: var(--chartreuse);
  background: rgba(212, 242, 86, 0.15);
}

.player-progress-bar {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(243, 236, 224, 0.14);
}

.player-progress {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: var(--chartreuse);
}

.player-meta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.player-meta-content {
  min-width: 0;
}

.player-cat {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--chartreuse);
}

.player-title {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.02;
  color: var(--cream);
  margin: 7px 0 0;
}

.player-desc {
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--cream-mute);
  margin: 10px 0 0;
  max-width: 60ch;
}

.player-brief-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--chartreuse);
  color: var(--ink);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 13px 20px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
}

.player-brief-btn:hover {
  box-shadow: 0 0 0 1px var(--chartreuse), 0 14px 34px -12px rgba(212, 242, 86, 0.55);
}

.player-footer {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream-faint);
  margin-top: 16px;
}

/* ===== index.php inline <style> block (merged in, was lines 12-464) ===== */
:root{
  --ink:#0a0908;
  --ink-2:#13110e;
  --line:rgba(245,240,230,0.10);
  --line-2:rgba(245,240,230,0.18);
  --cream:#f3ece0;
  --cream-mute:#bdb4a5;
  --cream-faint:#7a7368;
  --accent:#d4f256;
  --accent-2:#b8a4ff;
  --accent-3:#ff7a59;
  --r: clamp(24px, 6vw, 88px);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--ink);color:var(--cream);
  font-family:'Geist',ui-sans-serif,sans-serif;-webkit-font-smoothing:antialiased}

body{
  overflow-y:scroll;
  overflow-x:hidden;
}

.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  overflow:hidden;
  isolation:isolate;
  display:flex;
  flex-direction:column;
}

.dc {
  background: var(--ink);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.3s, scale 0.3s;
}

.dc:hover {
  transform: translateY(-.5rem);
  scale:1.02;
}

.di {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  position: relative;
}

.di img,
.di video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s ease;
}

.di-t {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(10, 9, 8, 0.75) 100%);
}

.db {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-top: 1px solid var(--line);
}

.dn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--lime);
}

.dname {
  font-family: 'Instrument Serif', serif;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1;
}

.dname em {
  font-style: italic;
}

.ddesc {
  color: var(--mute);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 300;
  margin-top: auto;
}

.faq-wrap{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  max-width:100%;
  gap:1rem;
}

@media (max-width: 1000px) {
    .work-grid,.team-grid {
        grid-template-columns: repeat(2, 1fr);
        gap:2rem 1rem;
    }

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

    .faq-wrap{
      grid-template-columns: 1fr;
    }

    .promise-card:not(:first-child){
      padding:0 clamp(20px, 3.4vw, 56px) 0 0;
    }

    .pc-info{
      padding:1rem;
    }

    .promise-card:not(:first-child):before, .promise-divider{
      display:none;
    }
}

@media (max-width: 600px) {
    .presence-grid {
      flex-direction:column;
      gap:1rem;
    }

    .work-grid,.team-grid {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   VIDEO LAYER — single full-bleed background hero video.
   Sits behind everything, dimmed by the vignette + grain
   so copy stays legible.
   ===================================================== */
.bg-video{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  width:100%;height:100%;overflow:hidden;
}
.bg-video video{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  opacity:0.85;
}

/* =====================================================
   UNIFYING LAYERS — grain + vignette over everything.
   This is what welds video and background together.
   ===================================================== */
.grain{
  position:absolute;inset:0;z-index:4;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity:0;
  mix-blend-mode:overlay;
}
.vignette{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    radial-gradient(120% 100% at 50% 45%, transparent 45%, rgba(0,0,0,0.55) 100%),
    linear-gradient(to top, rgba(10,9,8,0.85) 0%, transparent 30%);
}

/* =====================================================
   CHROME — nav
   ===================================================== */
.nav{
  position:relative;z-index:10;
  display:flex;align-items:center;justify-content:space-between;
  padding:28px 48px;
}
.logo{font-family:'Geist',sans-serif;font-weight:600;font-size:17px;
  letter-spacing:0.01em;color:var(--cream);text-decoration:none}
.logo span{font-weight:300;color:var(--cream-mute)}
.nav-links{display:flex;gap:2.5rem;position:absolute;left:50%;transform:translateX(-50%)}
.nav-links a{
  color:var(--cream);
  text-decoration:none;
  font-size:1rem;
  padding:.75rem 0;
  font-weight:400;transition:color .25s;
  text-shadow:1px 1px 2px #000000;
  position:relative;

}
.nav-links a:hover{
  color:var(--accent);
}

.nav-links a:before{
  content:"";
  position: absolute;
  margin-left:-10px;
  bottom:0;
  left:50%;
  width: 0;
  background:linear-gradient(to left,var(--coral),var(--accent));
  height:.2rem;
  transition: width .5s ease, left .5s ease;
  border-radius:1rem;
  box-shadow:1px 1px 2px #000000;
}

.nav-links a:hover:before{
  width: calc(100% + 20px);
  left:0;
  background-position:center center;
}

@property --gb-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes gb-hue {
  to { --gb-angle: 360deg; }
}


.gb-wrap{
  position: relative;
  display: inline-block;
  text-decoration:none;
  padding: 2px;
  border-radius: 999px;
  background: conic-gradient(from var(--gb-angle), #D4F257, #FF7A59, #B8A4FF, #D4F257 /* repeat first color for a seamless loop */);
  animation: gb-hue 4s linear infinite;
  overflow: hidden;
  transition: transform 0.3s, scale 0.3s;
}

@media (prefers-reduced-motion: reduce) {
  .gb-wrap { animation: none; }
}

.gb-wrap::after {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: 999px;
    background: #2b2b2b;
}

.gb-wrap *{
  position: relative;
  z-index: 1;
}

.cta div{
  border: none;
  background: transparent;
  font-family:'Geist',sans-serif;
  color:var(--cream);
  font-size: 14px;
  border-radius:999px;
  padding:11px 22px;
  white-space:nowrap;
}

.cta:hover{
  transform: translateY(-.2rem);
}

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


/* =====================================================
   CONTENT STAGE
   ===================================================== */
.stage{
  position:relative;z-index:10;
  flex:1;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 48px 0;
}

/* Eyebrow — brief ticker, plays on the tagline */
.eyebrow{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--accent);
  min-height:2rem;
  display:flex;align-items:center;gap:10px;
  margin-bottom:26px;
  opacity:0;animation:rise .8s ease .3s forwards;
}
.eyebrow *{
  text-shadow:2px 2px 4px #000000;
}

.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);
  animation:pulse 2.2s ease-in-out infinite}
.eyebrow .typed{color:var(--cream)}
.eyebrow .caret{display:inline-block;width:7px;height:13px;background:var(--accent);
  vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.3}}
@keyframes blink{50%{opacity:0}}

.bottom{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:48px;padding-bottom:64px;
}

.display{
  font-family:'Instrument Serif',serif;font-weight:400;
  font-size:clamp(56px, 8.4vw, 132px);
  line-height:1.1;letter-spacing:-0.015em;
  color:var(--cream);margin:0;
}
.display .line{display:block;overflow:hidden}
.display .line > span{display:inline-block;transform:translateY(110%);
  animation:reveal 1s cubic-bezier(.19,1,.22,1) forwards}
.display .line:nth-child(1) > span{animation-delay:.15s}
.display .line:nth-child(2) > span{animation-delay:.28s}
.display .line:nth-child(3) > span{animation-delay:.41s}
.display em{font-style:italic;color:var(--accent)}
@keyframes reveal{to{transform:translateY(0)}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.aside{
  display:flex;flex-direction:column;align-items:flex-end;gap:22px;
  max-width:360px;flex-shrink:0;
  opacity:0;animation:rise .9s ease .6s forwards;
}
.showreel{
  display:none;align-items:center;gap:14px;
  border:1px solid var(--line-2);border-radius:999px;
  padding:12px 26px 12px 14px;
  color:var(--cream);text-decoration:none;font-size:14.5px;font-weight:500;
  background:rgba(10,9,8,0.35);backdrop-filter:blur(6px);
  transition:border-color .25s;
}
.showreel:hover{border-color:var(--accent)}
.showreel .play{
  width:34px;height:34px;border-radius:50%;
  border:1px solid var(--line-2);
  display:grid;place-items:center;
  transition:background .25s, border-color .25s;
}
.showreel:hover .play{background:var(--accent);border-color:var(--accent)}
.showreel .play svg{width:10px;height:10px;fill:var(--cream);transition:fill .25s}
.showreel:hover .play svg{fill:var(--ink)}
.sub{
  font-size:14.5px;line-height:1.65;color:var(--cream-mute);
  text-align:right;margin:0;text-wrap:pretty;
}
.sub b{color:var(--cream);font-weight:500}

/* =====================================================
   MARQUEE — disciplines strip along the bottom edge
   ===================================================== */
.marquee{
  position:relative;z-index:10;
  border-top:1px solid var(--line);
  overflow:hidden;
  padding:16px 0;
  background:rgba(10,9,8,0.4);backdrop-filter:blur(4px);
}
.marquee .track{
  display:flex;gap:0;width:max-content;
  animation:scroll 30s linear infinite;
}
.marquee:hover .track{animation-play-state:paused}
.marquee .item{
  display:flex;align-items:center;gap:28px;padding:0 28px;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--cream-mute);white-space:nowrap;
}
.marquee .item::after{content:"";width:5px;height:5px;border-radius:50%;
  background:var(--accent);opacity:0.7}
.marquee .item b{color:var(--cream);font-weight:500}
@keyframes scroll{to{transform:translateX(-50%)}}

/* City clocks — top of stage, right aligned */
.clocks{
  position:absolute;top:110px;left:48px;z-index:10;
  display:flex;gap:36px;
  font-family:'JetBrains Mono',monospace;
  font-size:.75rem;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--cream);
  opacity:0;animation:rise .9s ease .8s forwards;
  text-shadow:2px 2px 4px #000000;
}
.clocks span b{
  display:block;color:var(--accent);font-weight:400;margin-top:4px; text-shadow:2px 2px 4px #000000;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01s !important;animation-iteration-count:1 !important;animation-delay:0s !important}
  .marquee .track{
    animation-duration:40s !important;
  }
}

.logo, .logo img{
  position: relative;
  z-index: 1;
}

.logo{
  padding:0rem;
}

.logo.shadow{
  padding:.75rem 1.5rem .5rem;
}

.logo img{
  width:auto;
  max-width:100%;
}

.logo:before{
  z-index: 0;
  position:absolute;
  top:0;
  width:100%;
  height:100%;
  left:0;
  content:"";
}

.logo.shadow:before{
  background-color:var(--cream);
  opacity: .3;
}

.sw-meta .si{
  position:absolute;
  right:1rem;
  bottom:1rem;
  z-index: 99999;
  pointer-events: auto;
  border-color: var(--accent);
  background: transparent;
}

.sw-meta .si svg{
  fill:var(--accent);
}

 .sw-meta .si:hover{
  border-color: var(--coral);
  background: rgba(255, 122, 89, 0.2);
  transform: translateY(-2px);
}

.sw-meta .si:hover svg{
  fill:var(--coral);
}

@media (max-width: 900px){
  .nav{padding:20px 24px}
  .nav-links{display:none}
  .stage{padding:0 24px}
  .bottom{flex-direction:column;align-items:flex-start;padding-bottom:10px}
  .aside{align-items:flex-start;max-width:none}
  .sub{text-align:left}
  .clocks{position:static;padding:24px;gap:24px}
}

@media (max-width: 600px){
  .logo.shadow{
    padding:.5rem 1rem .25rem;
  }

  .logo img{
    height:20px;
    scale:1;
  }

}

@media (max-width: 440px){
  .logo.shadow{
    padding:.4rem .5rem .1rem;
  }

}
