:root{
  --ink:#0a0a0a;
  --ink-2:#111;
  --paper:#f5f1ea;
  --paper-dim:#d6cfbf;
  --magenta:#e6348c;
  --amber:#f4a72b;
  --cyan:#2bc3d9;
  --violet:#6b3fd4;
  --lime:#c6ff4b;
  --rule:rgba(245,241,234,.14);
  --rule-2:rgba(245,241,234,.06);
  --max: 1600px;
  --pad: clamp(20px, 3vw, 48px);
  --display: "Fraunces", ui-serif, Georgia, serif;
  --body: "Switzer", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
*,*::before,*::after{ box-sizing:border-box }
html,body{ margin:0; padding:0; background:var(--ink); color:var(--paper); }
html{ scroll-behavior:smooth; }
body{
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font: inherit; color:inherit; background:transparent; border:0; cursor:pointer; }
input, textarea, select{ font: inherit; color: inherit; }
::selection{ background:var(--magenta); color:var(--ink); }

/* grain */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:100;
  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='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/></svg>");
  opacity:.45; mix-blend-mode:overlay;
}

/* reticle */
.reticle{
  position:fixed; top:0; left:0; width:28px; height:28px; z-index:200;
  transform: translate(-50%,-50%); pointer-events:none;
  border:1px solid var(--paper); border-radius:50%;
  transition: width .25s ease, height .25s ease, background .25s ease, border-color .25s ease;
  mix-blend-mode: difference;
}
.reticle::after{ content:""; position:absolute; inset:50%; width:2px; height:2px; background:var(--paper); border-radius:50%; transform:translate(-50%,-50%); }
.reticle.hover{ width:64px; height:64px; border-color:var(--magenta); }
@media (hover:none){ .reticle{ display:none } body{ cursor:auto } }
@media (hover:hover){ body{ cursor:none } a,button,input,textarea,select{ cursor:none } }

/* nav */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:90;
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px var(--pad);
  backdrop-filter: blur(8px);
  background: linear-gradient(180deg, rgba(10,10,10,.7), rgba(10,10,10,0));
}
.brand{ display:flex; align-items:center; gap:12px; font-family:var(--display); font-weight:600; letter-spacing:-.01em; font-size:18px; }
.brand-mark{ width:34px; height:34px; border-radius:4px; background:var(--paper); display:grid; place-items:center; padding:4px; }
.brand-mark img{ width:100%; height:100%; object-fit:contain; }
.brand-text small{ display:block; font-family:var(--mono); font-size:9px; letter-spacing:.22em; text-transform:uppercase; color:var(--paper-dim); margin-top:-2px; font-weight:400 }
.nav-links{ display:flex; gap:28px; font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; counter-reset: nav; list-style:none; padding:0; margin:0; }
.nav-links a{ position:relative; opacity:.75; transition: opacity .2s }
.nav-links a:hover{ opacity:1 }
.nav-links a::before{ content:counter(nav,decimal-leading-zero)" / "; counter-increment:nav; color:var(--paper-dim); opacity:.45; margin-right:6px }
.nav-cta{
  font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  padding:10px 16px; border:1px solid var(--paper); border-radius:999px;
  transition: background .2s, color .2s;
}
.nav-cta:hover{ background:var(--paper); color:var(--ink); }
@media (max-width: 900px){ .nav-links{ display:none } }

/* hero */
.hero{ position:relative; min-height:100vh; padding: 120px var(--pad) 60px; display:grid; grid-template-rows: 1fr auto; gap:40px; overflow:hidden; }
.hero-bg{ position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(1200px 700px at 85% 20%, rgba(230,52,140,.18), transparent 60%),
    radial-gradient(900px 600px at 10% 80%, rgba(43,195,217,.16), transparent 60%),
    radial-gradient(700px 600px at 60% 100%, rgba(107,63,212,.14), transparent 60%);
}
.hero-video{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-video iframe, .hero-video video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.45; filter: saturate(1.1) contrast(1.05); pointer-events:none; }
.hero-strip{ position:absolute; top:80px; right:var(--pad); z-index:2; font-family:var(--mono); font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--paper-dim); display:flex; gap:18px; align-items:center; }
.live-dot{ display:inline-block; width:8px; height:8px; background:var(--magenta); border-radius:50%; box-shadow: 0 0 0 0 rgba(230,52,140,.7); animation: pulse 1.8s infinite; }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(230,52,140,.7)} 70%{box-shadow:0 0 0 14px rgba(230,52,140,0)} 100%{box-shadow:0 0 0 0 rgba(230,52,140,0)} }

.hero-inner{ position:relative; z-index:1; align-self:end; display:grid; grid-template-columns: 1fr auto; gap:40px; align-items:end; }
@media (max-width: 900px){ .hero-inner{ grid-template-columns: 1fr } }

.hero h1{
  font-family: var(--display); font-weight: 350;
  font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 1;
  font-size: clamp(64px, 13vw, 220px);
  line-height: .88; letter-spacing: -0.035em; margin: 0; color: var(--paper);
}
.hero h1 .it{ font-style: italic; font-weight:300; color: transparent;
  background-image: linear-gradient(120deg, var(--amber), var(--magenta) 40%, var(--violet) 75%, var(--cyan));
  -webkit-background-clip:text; background-clip:text;
}
.hero h1 .outline{ color: transparent; -webkit-text-stroke: 1.2px var(--paper); }
.hero-line{ overflow:hidden; padding: 0.12em 0.02em; margin: -0.12em -0.02em; line-height: 1; }
.hero-line > span{ display:inline-block; transform: translateY(110%); animation: rise .9s cubic-bezier(.2,.7,.15,1) forwards; padding: 0.05em 0; }
.hero-line:nth-child(1) > span{ animation-delay:.05s }
.hero-line:nth-child(2) > span{ animation-delay:.18s }
.hero-line:nth-child(3) > span{ animation-delay:.31s }
@keyframes rise{ to{ transform:translateY(0) } }

.hero-meta{ display:grid; gap:18px; font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--paper-dim); min-width: 260px; opacity:0; animation: fadein 1s ease .7s forwards; }
@keyframes fadein{ to{ opacity:1 } }
.hero-meta .k{ color:var(--paper); opacity:.55; text-transform:uppercase; font-size:10px; letter-spacing:.24em; margin-bottom:6px; display:block; }
.hero-meta p{ margin:0; font-family:var(--body); font-size:15px; line-height:1.5; color:var(--paper); max-width:32ch }

.scroll-cue{ position:absolute; bottom:24px; left:var(--pad); z-index:2; font-family:var(--mono); font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--paper-dim); display:flex; align-items:center; gap:10px; }
.scroll-cue::before{ content:""; width:2px; height:42px; background:linear-gradient(to bottom, var(--paper), transparent); animation: drop 2.4s ease-in-out infinite; }
@keyframes drop{ 0%,100%{ transform: translateY(-12px); opacity:.2 } 50%{ transform:translateY(0); opacity:1 } }

.film-strip{
  position:absolute; bottom:0; left:0; right:0; z-index:2; height:34px;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  background-image: radial-gradient(circle, rgba(245,241,234,.22) 3px, transparent 4px);
  background-size: 44px 34px; background-position: center; background-repeat: repeat-x; opacity:.6;
}

/* marquee */
.ticker{ border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); overflow:hidden; white-space:nowrap; padding: 26px 0; font-family:var(--display); font-weight:400; font-style:italic; font-size: clamp(38px, 6vw, 88px); letter-spacing:-0.02em; }
.ticker-track{ display:inline-block; animation: slide 40s linear infinite; }
.ticker span{ margin:0 40px; }
.ticker .star{ color: var(--magenta); font-style:normal; }
.ticker .star:nth-child(4n){ color: var(--amber) }
.ticker .star:nth-child(4n+1){ color: var(--cyan) }
.ticker .star:nth-child(4n+2){ color: var(--violet) }
@keyframes slide{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

/* sections */
section{ position:relative; padding: clamp(80px, 10vw, 160px) var(--pad); }
.container{ max-width: var(--max); margin: 0 auto; }

.section-label{ display:flex; align-items:center; gap:14px; font-family:var(--mono); font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--paper-dim); margin-bottom: 32px; }
.section-label .num{ color: var(--magenta); }
.section-label .bar{ flex:0 0 40px; height:1px; background:var(--paper-dim); opacity:.5 }

h2.big{ font-family:var(--display); font-weight:380; font-variation-settings: "opsz" 144, "SOFT" 30; font-size: clamp(40px, 6.5vw, 104px); line-height:.95; letter-spacing:-.03em; margin: 0 0 36px; }
h2.big .it{ font-style:italic; color: var(--amber); font-weight:320 }

/* manifesto */
.manifesto{ border-top:1px solid var(--rule); }
.manifesto .grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items:start; }
@media (max-width:900px){ .manifesto .grid{ grid-template-columns:1fr } }
.manifesto p.lead{ font-family:var(--display); font-weight:350; font-style:italic; font-size: clamp(22px, 2.2vw, 30px); line-height:1.35; max-width:28ch; color:var(--paper); }
.manifesto .stats{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.stat{ border:1px solid var(--rule); border-radius:2px; padding:22px; background:var(--ink-2) }
.stat .n{ font-family:var(--display); font-weight:400; font-size:54px; line-height:1; letter-spacing:-.02em; background: linear-gradient(160deg, var(--paper), var(--paper-dim)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat .n em{ font-style:italic; color:var(--amber); }
.stat .l{ font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--paper-dim); margin-top:10px }
.manifesto-copy p{ font-size:17px; color:var(--paper); max-width:52ch; opacity:.9 }
.manifesto-copy p + p{ margin-top: 18px; }
.manifesto-badge{ display:inline-flex; align-items:center; gap:10px; padding:8px 14px; border:1px solid var(--rule); border-radius:999px; font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--paper-dim); margin-bottom:24px; }
.manifesto-badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--lime) }

.chips{ display:flex; gap:8px; margin-top: 28px; }
.chip{ width:32px; height:32px; border-radius:50%; box-shadow: 0 0 0 1px var(--rule-2) inset }
.chip.magenta{ background: var(--magenta) } .chip.amber{ background: var(--amber) }
.chip.cyan{ background: var(--cyan) } .chip.violet{ background: var(--violet) } .chip.lime{ background: var(--lime) }

/* work */
.work{ border-top:1px solid var(--rule); }
.work-head{ display:grid; grid-template-columns: 1fr auto; gap:40px; align-items:end; margin-bottom: 56px; }
@media (max-width:900px){ .work-head{ grid-template-columns:1fr } }
.filters{ display:flex; flex-wrap:wrap; gap:8px; }
.filters button, .filters a{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; padding:10px 14px; border:1px solid var(--rule); border-radius:999px; color:var(--paper-dim); transition: border-color .2s, color .2s, background .2s; }
.filters button[aria-pressed="true"], .filters a.is-active{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.filters button:hover, .filters a:hover{ color:var(--paper); border-color:var(--paper); }

.sheet{ display:grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }
.tile{ position:relative; grid-column: span 4; aspect-ratio: 4/5; background:#151515; border:1px solid var(--rule); overflow:hidden; transform: translateY(16px); opacity:0; transition: transform .6s cubic-bezier(.2,.7,.15,1), opacity .6s; }
.tile.in{ transform:none; opacity:1 }
.tile.big{ grid-column: span 6; aspect-ratio: 16/11 }
.tile.wide{ grid-column: span 8; aspect-ratio: 16/9 }
.tile.tall{ grid-column: span 4; aspect-ratio: 3/5 }
@media (max-width: 900px){ .tile, .tile.big, .tile.wide, .tile.tall{ grid-column: span 12; aspect-ratio: 16/10 } }
.tile .shot{ position:absolute; inset:0; background-size:cover; background-position:center; filter: saturate(.9); transition: transform 1.2s ease, filter .5s ease; }
.tile:hover .shot{ transform:scale(1.05); filter: saturate(1.2) }
.tile::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.75)); pointer-events:none; }
.tile .meta{ position:absolute; left:20px; right:20px; bottom:18px; z-index:2; display:flex; justify-content:space-between; align-items:end; gap:12px; }
.tile .idx{ font-family:var(--mono); font-size:11px; letter-spacing:.22em; color:var(--paper-dim) }
.tile .ttl{ font-family:var(--display); font-size:22px; line-height:1.05; letter-spacing:-.01em; max-width: 20ch }
.tile .tag{ position:absolute; top:16px; left:16px; z-index:2; font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; padding:6px 10px; background:rgba(10,10,10,.55); backdrop-filter:blur(6px); border:1px solid rgba(245,241,234,.18); border-radius:999px; }
.tile .play{ position:absolute; top:16px; right:16px; z-index:2; width:40px; height:40px; border-radius:50%; background:var(--paper); color:var(--ink); display:grid; place-items:center; transform: scale(.85); opacity:0; transition: all .25s; }
.tile:hover .play{ transform:scale(1); opacity:1 }
.tile .play svg{ width:14px; height:14px; margin-left:2px; }

/* placeholder gradients */
.shot-1{ background-image: linear-gradient(135deg, #6b3fd4, #2bc3d9 50%, #f4a72b 100%); }
.shot-2{ background-image: linear-gradient(135deg, #0a0a0a, #e6348c 80%); }
.shot-3{ background-image: radial-gradient(60% 60% at 30% 30%, #f4a72b, #6b3fd4 70%); }
.shot-4{ background-image: linear-gradient(135deg, #2bc3d9, #0a0a0a 70%); }
.shot-5{ background-image: linear-gradient(135deg, #111, #6b3fd4 60%, #e6348c 100%); }
.shot-6{ background-image: radial-gradient(80% 80% at 70% 30%, #c6ff4b, #0a0a0a 65%); }

/* services */
.services{ border-top:1px solid var(--rule); background: #080808 }
.service-row{ display:grid; grid-template-columns: 60px 1fr 2fr auto; gap:24px; align-items:center; padding: 34px 0; border-bottom:1px solid var(--rule); cursor:pointer; transition: padding .3s ease; }
.service-row:hover{ padding-left: 12px; }
.service-row .num{ font-family:var(--mono); font-size:12px; color:var(--paper-dim) }
.service-row .name{ font-family:var(--display); font-size: clamp(28px, 3.2vw, 48px); font-weight:400; letter-spacing:-.02em; line-height:1 }
.service-row:hover .name{ font-style:italic; color: var(--magenta) }
.service-row:nth-child(2n):hover .name{ color: var(--cyan) }
.service-row:nth-child(3n):hover .name{ color: var(--amber) }
.service-row .desc{ color:var(--paper-dim); max-width: 52ch; font-size:15px }
.service-row .arrow{ width:44px; height:44px; border:1px solid var(--rule); border-radius:50%; display:grid; place-items:center; transition: transform .3s, background .3s, color .3s, border-color .3s; }
.service-row:hover .arrow{ background:var(--paper); color:var(--ink); border-color:var(--paper); transform: rotate(-45deg); }
@media (max-width:900px){
  .service-row{ grid-template-columns: 40px 1fr auto; grid-template-areas: "n a x" "d d d"; }
  .service-row .num{ grid-area:n } .service-row .name{ grid-area:a } .service-row .arrow{ grid-area:x }
  .service-row .desc{ grid-area:d; margin-top:4px }
}

/* testimonials */
.testimonials{ border-top:1px solid var(--rule); overflow:hidden; }
.drag-hint{ font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--paper-dim); margin-bottom: 24px; display:flex; align-items:center; gap:10px; }
.drag-hint::before{ content:"⟷"; color:var(--amber) }
.rail{ display:flex; gap:22px; padding-bottom: 16px; overflow-x:auto; scroll-snap-type: x mandatory; scrollbar-width:none; }
.rail::-webkit-scrollbar{ display:none }
.pola{ flex: 0 0 min(380px, 78vw); scroll-snap-align: start; background: var(--paper); color: var(--ink); border-radius: 2px; padding: 18px 18px 28px; transform: rotate(-1.2deg); box-shadow: 0 30px 60px -20px rgba(0,0,0,.7); transition: transform .3s ease; }
.pola:nth-child(2n){ transform: rotate(1.4deg) }
.pola:nth-child(3n){ transform: rotate(-.4deg) }
.pola:hover{ transform: rotate(0) scale(1.02) }
.pola .photo{ aspect-ratio: 4/3; background:#ccc; display:grid; place-items:center; color:#fff; font-family:var(--display); font-size:42px; font-weight:300; background-size:cover; background-position:center }
.pola .p-1{ background: linear-gradient(135deg, #e6348c, #6b3fd4) }
.pola .p-2{ background: linear-gradient(135deg, #2bc3d9, #0a0a0a) }
.pola .p-3{ background: linear-gradient(135deg, #f4a72b, #e6348c) }
.pola .p-4{ background: linear-gradient(135deg, #6b3fd4, #2bc3d9) }
.pola .p-5{ background: linear-gradient(135deg, #0a0a0a, #c6ff4b 120%) }
.pola blockquote{ margin: 18px 4px 0; font-family:var(--display); font-weight:400; font-size: 17px; line-height:1.45; letter-spacing:-.005em; }
.pola .who{ margin-top:16px; font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:#333; border-top: 1px dashed #bbb; padding-top: 12px; }
.pola .who strong{ color: var(--ink); font-weight:600; letter-spacing:.1em; }

/* clients */
.clients{ border-top:1px solid var(--rule); padding: 60px var(--pad); }
.clients-head{ font-family:var(--mono); font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--paper-dim); text-align:center; margin-bottom: 32px; }
.logo-row{ display:grid; grid-template-columns: repeat(6, 1fr); gap: 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.logo-row > div{ aspect-ratio: 3/2; display:grid; place-items:center; font-family:var(--display); font-size: 22px; color: var(--paper-dim); border-right:1px solid var(--rule); font-style:italic; font-weight:300; transition: color .3s, background .3s; padding: 10px; text-align:center }
.logo-row > div:last-child{ border-right:0 }
.logo-row > div:hover{ color: var(--paper); background: var(--ink-2) }
.logo-row img{ max-height:40px; width:auto; filter: invert(1) grayscale(1) contrast(1.2) opacity(.7); transition: filter .3s }
.logo-row > div:hover img{ filter: none }
@media (max-width:900px){
  .logo-row{ grid-template-columns: repeat(3,1fr) }
  .logo-row > div:nth-child(3n){ border-right:0 }
  .logo-row > div:nth-child(n+4){ border-top:1px solid var(--rule) }
}

/* journal */
.journal{ border-top:1px solid var(--rule); }
.journal-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 40px; }
@media (max-width:900px){ .journal-grid{ grid-template-columns:1fr } }
.post{ display:flex; flex-direction:column; gap:16px; padding-top: 24px; border-top:1px solid var(--rule); }
.post .date{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--paper-dim) }
.post .ptitle{ font-family:var(--display); font-size: 26px; line-height:1.15; letter-spacing:-.01em; font-weight:400; margin:0 }
.post:hover .ptitle{ font-style:italic; color: var(--amber) }
.post .pimg{ aspect-ratio: 16/10; background:#222; margin-top: 8px; background-size:cover; background-position:center }
.post .pimg.a{ background-image: linear-gradient(135deg, var(--violet), var(--cyan)) }
.post .pimg.b{ background-image: radial-gradient(60% 80% at 30% 30%, var(--magenta), var(--ink) 80%) }
.post .pimg.c{ background-image: linear-gradient(135deg, var(--amber), var(--magenta), var(--violet)) }

/* CTA */
.cta{ position:relative; border-top:1px solid var(--rule); overflow:hidden; padding: clamp(100px, 14vw, 220px) var(--pad); }
.cta-inner{ position:relative; z-index:2; }
.cta h2{ font-family:var(--display); font-weight:300; font-variation-settings: "opsz" 144, "SOFT" 70, "WONK" 1; font-size: clamp(56px, 14vw, 230px); line-height:.85; letter-spacing:-.04em; margin:0; }
.cta h2 .it{ font-style:italic; font-weight:300; background-image: linear-gradient(120deg, var(--amber), var(--magenta) 40%, var(--violet) 75%, var(--cyan)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.cta p{ margin: 28px 0 40px; max-width:40ch; font-size: 18px; color: var(--paper) }
.cta-btn{ display:inline-flex; align-items:center; gap:14px; padding: 20px 28px; border-radius: 999px; background: var(--paper); color: var(--ink); font-family: var(--mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase; transition: gap .3s, background .3s; }
.cta-btn:hover{ gap:24px; background: var(--magenta); color: var(--paper) }
.cta-btn svg{ width:14px; height:14px }
.cta-bear{ position:absolute; right:-6%; bottom:-12%; width:56vw; max-width:900px; z-index:1; opacity:.35; filter: drop-shadow(0 30px 60px rgba(0,0,0,.7)); pointer-events:none; }
@media (max-width:900px){ .cta-bear{ width:120vw; right:-30%; opacity:.22 } }

/* footer */
footer{ border-top:1px solid var(--rule); padding: 60px var(--pad) 32px; background:#050505 }
.foot-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 60px; }
@media (max-width:900px){ .foot-grid{ grid-template-columns: 1fr 1fr } }
.foot-grid h4{ font-family:var(--mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color: var(--paper-dim); margin: 0 0 16px; font-weight:500; }
.foot-grid a{ display:block; padding: 4px 0; color: var(--paper); opacity:.75; transition: opacity .2s }
.foot-grid a:hover{ opacity: 1; color: var(--amber) }
.foot-grid address{ font-style: normal; line-height:1.6; color: var(--paper); opacity:.8; font-size:14px }
.wordmark{ font-family:var(--display); font-style:italic; font-weight:300; font-size: clamp(80px, 22vw, 340px); line-height:.85; letter-spacing:-.045em; color: transparent; -webkit-text-stroke: 1px rgba(245,241,234,.2); margin: 60px 0 20px; user-select:none; white-space:nowrap; overflow:hidden; }
.foot-rule{
  display:flex; justify-content:space-between; align-items:baseline; gap:24px;
  padding-top: 24px; border-top:1px solid var(--rule);
  font-family:var(--mono); font-size:11px; line-height:1; letter-spacing:.18em; text-transform:uppercase;
  color: var(--paper-dim); flex-wrap:nowrap; white-space:nowrap;
}
.foot-rule > div{ min-width:0; line-height:1; }
.foot-rule .dot{ color: var(--amber); margin: 0 8px }

.foot-credit{
  font-family: var(--mono); font-size: 11px; line-height: 1; letter-spacing: .18em; text-transform: uppercase;
  color: var(--paper-dim); display:inline-flex; gap: 6px; align-items:baseline; white-space:nowrap;
}
.foot-credit a{ color: var(--paper); border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.foot-credit a:hover{ color: var(--amber); border-bottom-color: var(--amber); }
.foot-credit .heart{
  display:inline-block; color: var(--magenta); font-size: inherit; line-height: 1;
  animation: heartbeat 1.6s ease-in-out infinite; text-transform: none; letter-spacing: 0;
}
.foot-credit .vibe{
  font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: inherit; line-height: 1; text-transform: lowercase; letter-spacing: 0;
  background-image: linear-gradient(120deg, var(--amber), var(--magenta) 40%, var(--violet) 75%, var(--cyan));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (max-width: 720px){
  .foot-rule{ flex-wrap:wrap; white-space:normal; gap:10px 18px; }
  .foot-credit{ flex-wrap:wrap; white-space:normal; }
}
@keyframes heartbeat{
  0%, 70%, 100% { transform: translateY(1px) scale(1); }
  35%           { transform: translateY(1px) scale(1.25); }
}
@media (prefers-reduced-motion: reduce){
  .foot-credit .heart{ animation: none; }
}

.reveal{ opacity:0; transform: translateY(30px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.15,1); }
.reveal.in{ opacity:1; transform:none; }

/* forms */
.pbs-form{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 720px }
.pbs-form .full{ grid-column: 1/-1 }
.pbs-form label{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--paper-dim); margin-bottom:8px }
.pbs-form input, .pbs-form textarea, .pbs-form select{
  width:100%; background: transparent; color: var(--paper); border: 0; border-bottom:1px solid var(--rule);
  padding: 12px 0; font-family: var(--body); font-size: 17px; outline:none; transition: border-color .3s;
}
.pbs-form input:focus, .pbs-form textarea:focus, .pbs-form select:focus{ border-color: var(--magenta) }
.pbs-form textarea{ min-height: 120px; resize: vertical }
.pbs-form button[type=submit]{
  grid-column: 1/-1; justify-self: start;
  padding: 18px 26px; border-radius:999px; background: var(--paper); color: var(--ink);
  font-family: var(--mono); font-size: 12px; letter-spacing:.22em; text-transform:uppercase; transition: background .3s;
}
.pbs-form button[type=submit]:hover{ background: var(--magenta); color: var(--paper) }
.pbs-form .hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }
.form-status{ margin-top:20px; font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color: var(--lime) }
.form-status.err{ color: var(--magenta) }

/* consent */
.pbs-consent{
  position:fixed; left: var(--pad); bottom: 20px; right: var(--pad); max-width: 560px; z-index: 95;
  background: var(--ink-2); border:1px solid var(--rule); padding: 18px 20px; border-radius: 4px;
  display:flex; gap:16px; align-items:center; justify-content:space-between;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.pbs-consent p{ margin:0; font-size: 14px; color: var(--paper); opacity:.9 }
.pbs-consent-actions{ display:flex; gap: 10px; flex-shrink:0 }
.pbs-consent button{
  font-family: var(--mono); font-size: 11px; letter-spacing:.18em; text-transform:uppercase;
  padding: 10px 16px; border-radius: 999px; border: 1px solid var(--rule); color: var(--paper);
}
.pbs-consent .accept{ background: var(--paper); color: var(--ink); border-color: var(--paper) }
.pbs-consent .decline{ background: transparent }
@media (max-width: 600px){ .pbs-consent{ flex-direction:column; align-items:stretch } }

/* single case study */
.single-work{ padding: 140px var(--pad) 80px }
.single-work .hero-ttl{ font-family: var(--display); font-weight: 360; font-size: clamp(48px, 9vw, 140px); line-height:.95; letter-spacing:-.03em; margin: 0 0 24px; max-width: 16ch }
.single-work .hero-ttl .it{ font-style:italic; color:var(--amber) }
.single-work .meta-row{ display:flex; flex-wrap:wrap; gap: 36px; margin: 40px 0 60px; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding: 24px 0 }
.single-work .meta-row > div .k{ display:block; font-family: var(--mono); font-size: 10px; letter-spacing:.24em; text-transform:uppercase; color: var(--paper-dim); margin-bottom: 6px }
.single-work .meta-row > div .v{ font-family: var(--display); font-size: 20px; font-weight: 400 }
.single-work .embed-wrap{ position: relative; aspect-ratio: 16/9; background:#000; margin: 40px 0; border:1px solid var(--rule) }
.single-work .embed-wrap iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }
.single-work .body-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 40px }
@media (max-width: 900px){ .single-work .body-grid{ grid-template-columns: 1fr } }
.single-work .body-grid h3{ font-family: var(--mono); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--paper-dim); margin:0 0 10px }
.single-work .credits{ display:grid; grid-template-columns: 1fr 2fr; gap: 10px 24px; margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--rule) }
.single-work .credits dt{ font-family: var(--mono); font-size: 11px; letter-spacing:.22em; text-transform:uppercase; color: var(--paper-dim) }
.single-work .credits dd{ margin: 0; font-family: var(--display); font-size: 18px }
.single-work .stills{ display:grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin: 60px 0 }
.single-work .stills img{ grid-column: span 2; aspect-ratio: 4/3; object-fit: cover; width: 100%; border:1px solid var(--rule) }
.single-work .stills img:nth-child(7n){ grid-column: span 4 }
@media (max-width:900px){ .single-work .stills img, .single-work .stills img:nth-child(7n){ grid-column: span 6 } }

/* archive / work index */
.page-hero{ padding: 160px var(--pad) 60px }
.page-hero h1{ font-family: var(--display); font-weight: 340; font-size: clamp(56px, 11vw, 200px); line-height:.9; letter-spacing:-.035em; margin:0 }
.page-hero h1 .it{ font-style:italic; color: var(--amber); font-weight: 320 }
.page-hero p{ max-width: 60ch; margin: 24px 0 0; color: var(--paper); opacity:.9; font-size: 18px }
.page-body{ padding: 40px var(--pad) 120px }

/* pagination */
.pbs-pagination{ display:flex; gap: 8px; margin-top: 60px; font-family: var(--mono); font-size: 12px; letter-spacing:.18em; text-transform:uppercase }
.pbs-pagination a, .pbs-pagination span{ padding: 10px 14px; border:1px solid var(--rule); border-radius:999px; color: var(--paper-dim) }
.pbs-pagination .current{ background: var(--paper); color: var(--ink); border-color: var(--paper) }

/* print-ish hidden element */
.screen-reader-text{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0) }