/* ============================================================
   ULTRAVIOLET — styles.css
   Palette sampled from assets/ultraviolet-logo.png.
   Ink / paper / muted are luminance shifts of the navy — no
   colors outside the logo's world.
   ============================================================ */

/* The Phonk DEMO release only has real outlines for letters, digits,
   and space — every punctuation glyph is a "FREE DEMO" badge. The
   unicode-range below exposes only the real glyphs, so punctuation
   inside Phonk-set text falls through to Space Grotesk automatically.
   When the commercial license lands, delete both unicode-range lines.
   font-weight spans 100-900 so the bold fallback matches without the
   browser faux-bolding Phonk itself. */
@font-face {
  font-family: 'Phonk';
  src: url('assets/fonts/phonk-regular.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0020, U+0030-0039, U+0041-005A, U+0061-007A, U+00C4, U+00D6, U+00DC, U+00DF, U+00E4, U+00F6, U+00FC;
}
@font-face {
  font-family: 'Phonk Contrast';
  src: url('assets/fonts/phonk-contrast.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0020, U+0030-0039, U+0041-005A, U+0061-007A, U+00C4, U+00D6, U+00DC, U+00DF, U+00E4, U+00F6, U+00FC;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('assets/fonts/space-grotesk.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: url('assets/fonts/space-mono.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

:root {
  /* sampled */
  --uv-navy:   #201E5F;
  --uv-cyan:   #2EE5E5;
  --uv-orange: #FB793F;
  /* derived (navy hue, shifted) */
  --uv-ink:    #12112E;
  --uv-paper:  #EDEDF5;
  --uv-muted:  #9C9BC0;
  --line: rgba(156, 155, 192, .22);

  --display: 'Phonk', 'Space Grotesk', sans-serif;
  --display-contrast: 'Phonk Contrast', 'Space Grotesk', sans-serif;
  --body: 'Space Grotesk', system-ui, sans-serif;
  /* utility face: CTA eyebrows, founder roles, form labels, metadata */
  --mono: 'Space Mono', ui-monospace, monospace;

  --pad-x: clamp(20px, 5vw, 108px);
  --pad-y: clamp(80px, 12vw, 176px);
  --gap: clamp(16px, 2.2vw, 34px);
}

/* ---------- base ---------- */

* { box-sizing: border-box; }

html {
  background: var(--uv-ink);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--uv-paper);
  font-family: var(--body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--uv-cyan); }

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

:focus-visible {
  outline: 2px solid var(--uv-cyan);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- shared type ---------- */

.eyebrow {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(12px, .8vw, 15px);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--uv-cyan);
  margin: 0 0 18px;
}

.section-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(34px, 6vw, 92px);
  line-height: 1.02;
  letter-spacing: .01em;
  text-transform: uppercase;
  text-wrap: balance;
  margin: 0 0 clamp(32px, 5vw, 56px);
}

/* Orange chip marking copy the founders will replace */
.todo {
  display: inline-block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--uv-orange);
  border: 1px solid var(--uv-orange);
  padding: 4px 8px;
  margin-bottom: 12px;
}

/* ============================================================
   LANDING — pinned hero; main site scrolls up over it
   ============================================================ */

.hero {
  position: sticky;
  top: 0;
  z-index: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 4.5vh, 44px);
  padding: var(--pad-x);
  background: var(--uv-ink);
  text-align: center;
}

/* WebGL light-field canvas sits behind the hero content; without it
   (mobile, reduced motion, no WebGL) the static ink ground remains */
.hero-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
}
.hero-logo, .hero-tagline, .hero-card { position: relative; z-index: 1; }
.scroll-cue { z-index: 1; }

.hero-logo { width: min(800px, 84vw); }

/* one orchestrated load-in: logo, tagline, card, cue — then still.
   Keyframes only define the "from" state, so with reduced motion
   (or JS/animation off) everything simply sits in its final place. */
@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
}
.hero-logo    { animation: rise .7s cubic-bezier(.2, .7, .2, 1) backwards; }
.hero-tagline { animation: rise .7s .14s cubic-bezier(.2, .7, .2, 1) backwards; }
.hero-card    { animation: rise .7s .28s cubic-bezier(.2, .7, .2, 1) backwards; }
.scroll-cue   { animation: rise .9s .9s cubic-bezier(.2, .7, .2, 1) backwards; }

/* as the curtain rises, the landing recedes — scroll-driven, pure CSS,
   progressive enhancement (browsers without support just keep it static) */
@supports (animation-timeline: scroll()) {
  .hero {
    animation: hero-exit linear both;
    animation-timeline: scroll();
    animation-range: 0 100vh;
  }
  @keyframes hero-exit {
    to { opacity: .2; transform: scale(.96); }
  }
}

.hero-tagline {
  font-family: var(--mono);
  font-size: clamp(14px, 1.9vw, 19px);
  letter-spacing: .02em;
  color: var(--uv-muted);
  max-width: 64ch;
  margin: 0;
}

.hero-card {
  display: inline-block;
  text-decoration: none;
  border: 1px solid var(--uv-cyan);
  padding: 18px 30px 20px;
  transition: border-color .18s ease, transform .18s ease;
}
.hero-card:hover {
  border-color: var(--uv-orange);
  transform: translateY(-2px);
}
.hero-card .card-line {
  font-size: clamp(19px, 1.1vw, 22px);
  font-weight: 600;
  color: var(--uv-paper);
}
.hero-card .card-line .ar {
  color: var(--uv-orange);
  display: inline-block;
  transition: transform .18s ease;
}
.hero-card:hover .card-line .ar { transform: translateX(4px); }

/* mono utility treatment; blink + bobbing chevron arrow. Both
   keyframes rest at the visible state, so reduced motion (which
   kills all animation) leaves a static, fully legible cue. */
.scroll-cue {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--uv-paper);
}
.scroll-cue .cue-text {
  font-family: var(--mono);
  font-size: clamp(16px, 1.9vw, 19px);
  letter-spacing: .12em;
  text-transform: lowercase;
  animation: cue-blink 1.5s steps(2, jump-none) 1.8s infinite;
}
.scroll-cue .cue-arrow {
  width: 15px;
  height: 15px;
  border-right: 2px solid var(--uv-cyan);
  border-bottom: 2px solid var(--uv-cyan);
  transform: rotate(45deg);
  animation: cue-dip 1.5s ease-in-out 1.8s infinite;
}
@keyframes cue-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: .3; }
}
@keyframes cue-dip {
  0%, 100% { transform: translateY(0) rotate(45deg); opacity: 1; }
  50%      { transform: translateY(7px) rotate(45deg); opacity: .55; }
}

/* ---------- the curtain ---------- */

.site {
  position: relative;
  z-index: 1;
  box-shadow: 0 -30px 80px rgba(0, 0, 0, .55);
}

/* ============================================================
   CTV SPOT — fullscreen connected-TV ad between hero and work
   ============================================================ */

.section-ctv {
  position: relative;
  height: 100vh;
  height: 100svh;
  background: var(--uv-ink);
  overflow: hidden;
}
/* cover-crop: the iframe is sized to whichever dimension overflows,
   so the 16:9 video always fills the viewport — no letterbox bars.
   (177.78 = 16/9 × 100, 56.25 = 9/16 × 100) */
.section-ctv iframe {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100vw, 177.78vh);
  height: max(100vh, 56.25vw);
  transform: translate(-50%, -50%);
  border: 0;
  display: block;
}
/* custom unmute toggle, dead center — shown by site.js only while
   the spot is running as a muted autoplay loop */
.ctv-unmute {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  font-family: var(--mono);
  font-size: clamp(15px, 1vw, 18px);
  letter-spacing: .06em;
  color: var(--uv-paper);
  background: rgba(18, 17, 46, .6);
  border: 1px solid var(--uv-cyan);
  padding: 16px 30px 18px;
  transition: border-color .18s ease, background .18s ease;
}
.ctv-unmute:hover {
  border-color: var(--uv-orange);
  background: rgba(18, 17, 46, .8);
}
.ctv-unmute[hidden] { display: none; }

.section {
  padding: var(--pad-y) var(--pad-x);
}
.section > .inner {
  max-width: 1560px;
  margin: 0 auto;
}

.ground-navy { background: var(--uv-navy); }
.ground-ink  { background: var(--uv-ink); }
.ground-orange { background: var(--uv-orange); color: var(--uv-ink); }
.ground-orange .eyebrow { color: var(--uv-ink); }
.ground-orange .todo { color: var(--uv-ink); border-color: var(--uv-ink); }

/* ============================================================
   SKILLS — dropdown accordion on the orange ground
   ============================================================ */

/* rows span the full inner width — the drop copy below stays capped
   at a readable measure, so only the visual rows stretch */
.skills-accordion { max-width: none; }

.skill-item { border-top: 1px solid var(--uv-ink); }
.skill-item:last-child { border-bottom: 1px solid var(--uv-ink); }

/* rows arrive staggered when the section scrolls into view */
.js-reveal .skill-item {
  opacity: 0;
  transform: translateY(14px);
}
.js-reveal .skill-item.pop {
  opacity: 1;
  transform: none;
  transition: opacity .3s ease, transform .38s cubic-bezier(.2, .9, .3, 1.2);
}

/* no cursor rule here: the site crosshair owns the pointer */
.skill-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 24px);
  background: transparent;
  border: 0;
  padding: clamp(26px, 3.8vw, 54px) 2px;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(26px, 3.6vw, 64px);
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--uv-ink);
  text-align: left;
}
.skill-index {
  font-family: var(--mono);
  font-weight: 400;
  font-size: clamp(13px, .9vw, 16px);
  letter-spacing: .04em;
  text-transform: none;
  opacity: .65;
  flex: none;
  transition: opacity .18s ease;
}
.skill-name {
  flex: 1;
  transition: transform .22s cubic-bezier(.2, .7, .2, 1);
}
.skill-head:hover .skill-name,
.skill-item.open .skill-name { transform: translateX(10px); }
.skill-head:hover .skill-index,
.skill-item.open .skill-index { opacity: 1; }

/* mono sub-service tags inside a drop */
.skill-subs {
  font-family: var(--mono);
  font-size: clamp(13px, .9vw, 16px);
  letter-spacing: .04em;
  color: var(--uv-ink);
  opacity: .75;
  margin: 0;
  padding: 2px 2px 14px;
}

/* the drop: grid-rows 0fr → 1fr gives a smooth height animation.
   No-JS baseline leaves every drop open (rows default to content). */
.skill-drop {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .4s cubic-bezier(.2, .7, .2, 1);
}
.js-accordion .skill-drop { grid-template-rows: 0fr; }
.js-accordion .skill-item.open .skill-drop { grid-template-rows: 1fr; }
.skill-drop-inner { overflow: hidden; }
.skill-drop-inner p {
  margin: 0;
  padding: 0 2px clamp(24px, 3.2vw, 38px);
  max-width: 62ch;
  font-size: clamp(16px, 2vw, 20px);
  color: var(--uv-ink);
}

/* ============================================================
   OUR WORK — mixed-orientation grid + metrics strip
   vertical (9:16) / stacked pair of horizontals / vertical
   ============================================================ */

.work-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  gap: var(--gap);
  align-items: start;
}

.slot { min-width: 0; }

.slot--v .thumb { aspect-ratio: 9 / 16; }
/* .slot.slot--v outranks the base .slot iframe.embed 16:9 rule below */
.slot.slot--v iframe.embed { aspect-ratio: 9 / 16; }

/* the stacked pair of horizontals in the middle column */
.work-stack {
  min-width: 0;
  display: grid;
  gap: var(--gap);
}

.thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line);
  transition: border-color .18s ease, transform .18s ease;
  background:
    linear-gradient(115deg, rgba(18, 17, 46, .55) 0 58%, transparent 58%),
    var(--uv-navy);
}
/* alternating accent wash, echoing the wordmark's two-color split */
.slot:nth-child(odd)  .thumb { background:
  linear-gradient(115deg, rgba(18, 17, 46, .55) 0 58%, rgba(46, 229, 229, .16) 58%), var(--uv-navy); }
.slot:nth-child(even) .thumb { background:
  linear-gradient(115deg, rgba(18, 17, 46, .55) 0 58%, rgba(251, 121, 63, .16) 58%), var(--uv-navy); }

/* slot index — reference these when swapping videos in */
.thumb .index {
  position: absolute;
  left: 14px;
  bottom: 6px;
  font-family: var(--display);
  font-size: clamp(40px, 5vw, 72px);
  color: rgba(156, 155, 192, .28);
  line-height: 1;
  transition: color .18s ease;
}
.slot:hover .thumb { border-color: var(--uv-cyan); transform: translateY(-3px); }
.slot:nth-child(even):hover .thumb { border-color: var(--uv-orange); }
.slot:hover .thumb .index { color: rgba(156, 155, 192, .55); }

.thumb .play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 52px;
  height: 52px;
  border: 1px solid var(--uv-cyan);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.thumb .play::after {
  content: '';
  border-style: solid;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent var(--uv-cyan);
  margin-left: 3px;
}

/* becomes a real button once data-video is filled in */
.slot.has-video .thumb { cursor: pointer; }
.slot.has-video .thumb:hover .play { border-color: var(--uv-orange); }
.slot.has-video .thumb:hover .play::after { border-left-color: var(--uv-orange); }

.slot iframe.embed {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  display: block;
}

.slot-title {
  font-weight: 500;
  font-size: clamp(16px, 1.05vw, 20px);
  margin: 14px 0 2px;
}
.slot-client {
  font-family: var(--mono);
  font-size: clamp(12px, .8vw, 14px);
  color: var(--uv-muted);
  margin: 0;
}

/* narrow: single column — verticals cap their width so a 9:16
   thumb doesn't swallow the whole viewport */
@media (max-width: 980px) {
  .work-grid { grid-template-columns: 1fr; }
  .work-grid > .slot--v { width: min(420px, 100%); margin-left: auto; margin-right: auto; }
}

/* archive page (work.html): uniform 16:9 grid */
.work-grid--archive { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .work-grid--archive { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .work-grid--archive { grid-template-columns: 1fr; } }

/* the "more work" link under the grid — mono utility treatment */
.work-more {
  display: inline-block;
  margin-top: clamp(28px, 4vw, 44px);
  text-decoration: none;
  border: 1px solid var(--uv-cyan);
  padding: 15px 26px 17px;
  font-family: var(--mono);
  font-size: clamp(15px, .95vw, 17px);
  letter-spacing: .06em;
  color: var(--uv-paper);
  transition: border-color .18s ease, transform .18s ease;
}
.work-more:hover {
  border-color: var(--uv-orange);
  transform: translateY(-2px);
}
.work-more .ar {
  color: var(--uv-orange);
  display: inline-block;
  transition: transform .18s ease;
}
.work-more:hover .ar { transform: translateX(4px); }

/* ---------- metrics strip ---------- */

.metrics {
  margin-top: clamp(56px, 8vw, 96px);
  border-top: 1px solid var(--uv-paper);
  border-bottom: 1px solid var(--uv-paper);
  display: grid;
  grid-template-columns: 1.35fr 1fr;
}

.metric-hero {
  padding: clamp(28px, 4vw, 56px) clamp(20px, 3vw, 48px);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.metric-hero .value {
  font-family: var(--display-contrast);
  font-weight: 700;
  font-size: clamp(110px, 15vw, 300px);
  line-height: .88;
  color: var(--uv-orange);
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.metric-hero .value .unit { font-size: .52em; }

/* ---- cursor reveal sequences ----
   A cursor visits the work grid's slots and the metrics strip's
   stats, clicking each one in. Content is hidden only under
   .js-reveal, which the script adds — no JS or reduced motion
   means everything is simply there. */
.metrics { position: relative; }
.work-grid { position: relative; }
.js-reveal .metrics .value {
  opacity: 0;
  transform: translateY(12px) scale(.94);
}
.js-reveal .metrics .value.pop {
  opacity: 1;
  transform: none;
  transition: opacity .28s ease, transform .34s cubic-bezier(.2, .9, .3, 1.35);
}
.js-reveal .work-grid .slot .thumb {
  opacity: 0;
  transform: translateY(14px) scale(.97);
}
.js-reveal .work-grid .slot.pop .thumb {
  opacity: 1;
  transform: none;
  transition: opacity .3s ease, transform .36s cubic-bezier(.2, .9, .3, 1.3);
}
.js-reveal .work-grid .slot.pop:hover .thumb { transform: translateY(-3px); }
/* ============================================================
   CUTTING-EDGE LAYER
   ============================================================ */

/* ---- view transitions: pages morph instead of hard-cutting;
   the wordmark carries across. Older browsers just navigate. ---- */
@view-transition { navigation: auto; }
.hero-logo { view-transition-name: brand-logo; }
.contact-home img { view-transition-name: brand-logo; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .35s; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ---- glowy crosshair cursor (desktop pointers only) ---- */
@media (pointer: fine) {
  body, a, button, select, input, textarea, label { cursor: none; }
  .crosshair {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 200;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease;
  }
  .crosshair.live { opacity: 1; }
  .crosshair::before,
  .crosshair::after {
    content: '';
    position: absolute;
    background: var(--uv-cyan);
    box-shadow: 0 0 6px var(--uv-cyan), 0 0 16px rgba(46, 229, 229, .55);
    transition: width .16s ease, height .16s ease, left .16s ease, top .16s ease,
                background .16s ease, box-shadow .16s ease;
  }
  .crosshair::before { width: 22px; height: 1px; left: -11px; top: 0; }
  .crosshair::after  { width: 1px; height: 22px; left: 0; top: -11px; }
  .crosshair.hot::before {
    width: 36px; left: -18px;
    background: var(--uv-orange);
    box-shadow: 0 0 8px var(--uv-orange), 0 0 20px rgba(251, 121, 63, .55);
  }
  .crosshair.hot::after {
    height: 36px; top: -18px;
    background: var(--uv-orange);
    box-shadow: 0 0 8px var(--uv-orange), 0 0 20px rgba(251, 121, 63, .55);
  }
  /* over the skills rows the glow flips to paper-white instead —
     orange-on-orange would vanish */
  .crosshair.hot-alt::before {
    width: 36px; left: -18px;
    background: var(--uv-paper);
    box-shadow: 0 0 8px var(--uv-paper), 0 0 22px rgba(237, 237, 245, .8);
  }
  .crosshair.hot-alt::after {
    height: 36px; top: -18px;
    background: var(--uv-paper);
    box-shadow: 0 0 8px var(--uv-paper), 0 0 22px rgba(237, 237, 245, .8);
  }
}

/* ---- film grain over the dark grounds ---- */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 150;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-jitter .9s steps(6) infinite;
}
@keyframes grain-jitter {
  0%   { background-position: 0 0; }
  25%  { background-position: -60px 40px; }
  50%  { background-position: 40px -80px; }
  75%  { background-position: -30px -50px; }
  100% { background-position: 70px 60px; }
}

/* ---- duotone: any real thumbnail dropped in gets the brand treatment ---- */
.thumb img {
  filter: grayscale(1) contrast(1.08) brightness(.96);
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: color;
  background: linear-gradient(160deg, var(--uv-cyan), var(--uv-navy) 70%);
  opacity: 0;
}
.thumb:has(img)::after { opacity: 1; }
.slot:nth-child(even) .thumb::after {
  background: linear-gradient(160deg, var(--uv-orange), var(--uv-navy) 70%);
}
.thumb .index, .thumb .play { z-index: 2; }

/* ---- kinetic section titles: wipe + track-in as they enter ---- */
@supports (animation-timeline: view()) {
  .section-title {
    animation: title-in linear both;
    animation-timeline: view();
    animation-range: entry 5% entry 50%;
  }
  @keyframes title-in {
    from {
      opacity: 0;
      letter-spacing: .07em;
      clip-path: inset(0 100% 0 0);
    }
    to {
      clip-path: inset(0 -2% 0 0);
    }
  }
}
.metric-hero .label {
  font-size: clamp(15px, 1.8vw, 21px);
  color: var(--uv-paper);
  margin-top: 14px;
  max-width: 24ch;
}

.metric-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.metric-list li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: clamp(16px, 2.4vw, 26px) clamp(20px, 3vw, 48px);
}
.metric-list li + li { border-top: 1px solid var(--line); }
.metric-list .value {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 58px);
  line-height: 1;
  color: var(--uv-cyan);
  font-variant-numeric: tabular-nums;
  min-width: 3.2ch;
}
.metric-list .label {
  font-family: var(--mono);
  font-size: clamp(13px, .85vw, 15px);
  color: var(--uv-muted);
}

/* provenance line for the numbers above */
.metrics-note {
  font-family: var(--mono);
  font-size: clamp(12.5px, .8vw, 14px);
  letter-spacing: .03em;
  color: var(--uv-muted);
  margin: 16px 0 0;
}

@media (max-width: 720px) {
  .metrics { grid-template-columns: 1fr; }
  .metric-hero { border-right: 0; border-bottom: 1px solid var(--line); }
}

/* ============================================================
   MISSION
   ============================================================ */

.mission-body {
  max-width: 62ch;
  font-size: clamp(17px, 2vw, 22px);
}
.mission-body p { margin: 0 0 1.2em; }
.mission-body p:last-child { margin-bottom: 0; }

/* ============================================================
   FOUNDERS — text-only cards: name + role + bio (no photos)
   ============================================================ */

.founders-intro {
  max-width: 62ch;
  font-size: clamp(16px, 1.9vw, 21px);
  margin: 0 0 clamp(36px, 5vw, 56px);
}

.founders-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}

/* hairline rule stands in for the removed photo; the accent color
   alternates like the old photo washes did */
.founder {
  min-width: 0;
  border-top: 1px solid var(--line);
  padding-top: clamp(18px, 2.4vw, 26px);
  transition: border-color .18s ease;
}
.founder:hover { border-top-color: var(--uv-cyan); }
.founder:nth-child(2):hover { border-top-color: var(--uv-orange); }

.founder-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(20px, 1.8vw, 32px);
  text-transform: uppercase;
  letter-spacing: .02em;
  margin: 0 0 2px;
}
.founder-role {
  font-family: var(--mono);
  font-size: clamp(12px, .85vw, 14px);
  letter-spacing: .04em;
  text-transform: lowercase;
  color: var(--uv-cyan);
  margin: 0 0 12px;
}
.founder-bio {
  font-size: clamp(15px, .95vw, 16.5px);
  line-height: 1.65;
  color: var(--uv-muted);
  margin: 0;
  max-width: 55ch; /* readable measure even when the column stretches */
}

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

/* ============================================================
   FOOTER
   ============================================================ */

.footer {
  border-top: 1px solid var(--line);
  padding: 36px var(--pad-x) 120px; /* bottom clearance for the docked CTA */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 13px;
  color: var(--uv-muted);
}
.footer .mark {
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--uv-paper);
}
.footer a { color: var(--uv-muted); }
.footer a:hover { color: var(--uv-cyan); }

.footer-social {
  display: flex;
  align-items: center;
  gap: 20px;
}
.footer-social a {
  display: inline-flex;
  color: var(--uv-muted);
  transition: color .18s ease, transform .18s ease;
}
.footer-social a:hover {
  color: var(--uv-cyan);
  transform: translateY(-2px);
}
.footer-social svg {
  width: 19px;
  height: 19px;
  display: block;
}

/* ============================================================
   PERSISTENT CTA — treatment B, "the stack"
   ============================================================ */

.cta-dock {
  position: fixed;
  right: clamp(14px, 2.5vw, 28px);
  bottom: clamp(14px, 2.5vw, 28px);
  z-index: 50;
  display: block;
  text-decoration: none;
  background: var(--uv-ink);
  border: 1px solid var(--uv-cyan);
  padding: 17px 26px 19px;
  transition: border-color .18s ease, transform .25s ease, opacity .25s ease;
}
/* hidden on the landing viewport; JS reveals it once the curtain is up.
   The .no-js fallback in each page's <html> tag keeps it visible if
   scripts never run. */
.cta-dock { opacity: 0; transform: translateY(12px); pointer-events: none; }
.cta-dock.is-visible,
.no-js .cta-dock { opacity: 1; transform: none; pointer-events: auto; }
.cta-dock:hover {
  border-color: var(--uv-orange);
  transform: translateY(-2px);
}
.cta-dock .cta-line {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--uv-paper);
}
.cta-dock .cta-line .ar {
  color: var(--uv-orange);
  display: inline-block;
  transition: transform .18s ease;
}
.cta-dock:hover .cta-line .ar { transform: translate(2px, -2px); }
.cta-dock .cta-mini { display: none; }

@media (max-width: 620px) {
  .cta-dock { padding: 11px 14px; }
  .cta-dock .cta-line { display: none; }
  .cta-dock .cta-mini {
    display: block;
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--uv-cyan);
  }
  .cta-dock:hover .cta-mini { color: var(--uv-orange); }
}

/* ============================================================
   WORK ARCHIVE PAGE (work.html)
   ============================================================ */

.work-page {
  min-height: 100vh;
  min-height: 100svh;
  max-width: 1560px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 56px) var(--pad-x) var(--pad-y);
}
.work-page .eyebrow { margin: clamp(40px, 7vw, 72px) 0 14px; }
.work-page .contact-title { margin-top: 0; margin-bottom: 10px; }

/* ---- under-construction preview gate ---- */
.construction-tag {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--uv-orange);
  margin: 0 0 18px;
}
.work-gate .contact-title { margin-top: 0; }
.gate-form { margin-top: clamp(32px, 5vw, 48px); max-width: 420px; }
.gate-label {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: lowercase;
  color: var(--uv-cyan);
  margin-bottom: 8px;
}
.gate-row { display: flex; gap: 10px; }
.gate-input {
  flex: 1;
  min-width: 0;
  font-family: var(--body);
  font-size: 16px;
  color: var(--uv-paper);
  background: rgba(32, 30, 95, .35);
  border: 1px solid var(--line);
  padding: 13px 14px;
  border-radius: 0;
}
.gate-input:focus { outline: none; border-color: var(--uv-cyan); }
.gate-input::placeholder { color: rgba(156, 155, 192, .55); }
.gate-submit {
  flex: none;
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--uv-ink);
  background: var(--uv-cyan);
  border: 0;
  padding: 0 22px;
  transition: background .18s ease, transform .18s ease;
}
.gate-submit:hover { background: var(--uv-orange); transform: translateY(-2px); }
.gate-submit .ar { display: inline-block; }
.gate-hint {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--uv-orange);
  margin: 12px 0 0;
}
.gate-hint[hidden] { display: none; }

/* campaign dropdowns — the skills accordion recolored for the dark
   ground; mechanics and markup are identical (site.js drives both) */
.campaigns-accordion .skill-item { border-top-color: var(--line); }
.campaigns-accordion .skill-item:last-child { border-bottom-color: var(--line); }
.campaigns-accordion .skill-head { color: var(--uv-paper); }
.campaigns-accordion .skill-subs {
  color: var(--uv-muted);
  opacity: 1;
  padding-bottom: 22px;
}
.campaigns-accordion .work-grid { padding: 0 2px clamp(28px, 3.2vw, 44px); }
/* keep 9:16 slots from towering over their 16:9 neighbors */
.work-grid--archive .slot--v { max-width: 340px; }

/* ============================================================
   CONTACT PAGE
   ============================================================ */

.contact-page {
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(28px, 4vw, 56px) var(--pad-x) var(--pad-y);
  max-width: 760px;
  margin: 0 auto;
}

.contact-home { display: inline-block; }
.contact-home img { width: min(220px, 48vw); }

.contact-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(34px, 6vw, 56px);
  line-height: 1.02;
  text-transform: uppercase;
  margin: clamp(40px, 7vw, 72px) 0 10px;
  text-wrap: balance;
}
.contact-lede {
  color: var(--uv-muted);
  max-width: 52ch;
  margin: 0 0 clamp(36px, 5vw, 56px);
}

.contact-form { display: grid; gap: 22px; }

.field { display: grid; gap: 8px; }
.field label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: lowercase;
  color: var(--uv-cyan);
}
.field input,
.field select,
.field textarea {
  font-family: var(--body);
  font-size: 16px;
  color: var(--uv-paper);
  background: rgba(32, 30, 95, .35);
  border: 1px solid var(--line);
  padding: 13px 14px;
  border-radius: 0;
  width: 100%;
}
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--uv-cyan) 50%), linear-gradient(135deg, var(--uv-cyan) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.field textarea { min-height: 160px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--uv-cyan);
}
.field ::placeholder { color: rgba(156, 155, 192, .55); }

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
@media (max-width: 620px) { .field-row { grid-template-columns: 1fr; } }

.submit {
  justify-self: start;
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--uv-ink);
  background: var(--uv-orange);
  border: 0;
  padding: 17px 32px;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.submit:hover { background: var(--uv-cyan); transform: translateY(-2px); }