/* =========================================================
   VMS – Visual Media Solutions
   ========================================================= */

/* fonts (self-hosted, DSGVO-freundlich) */
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:300;font-display:swap;src:url('/assets/fonts/inter-tight-latin-300-normal.woff2') format('woff2');}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/inter-tight-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/inter-tight-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/inter-tight-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/instrument-serif-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/instrument-serif-latin-400-italic.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');}

:root{
  --ink:#050505;
  --ink-2:#0c0c0c;
  --ink-3:#141414;
  --paper:#eeeae2;
  --faint:rgba(238,234,226,.78);
  --muted:rgba(238,234,226,.52);
  --dim:rgba(238,234,226,.32);
  --line:rgba(238,234,226,.10);
  --line-strong:rgba(238,234,226,.22);
  --accent:#ff2a1f;
  --accent-soft:rgba(255,42,31,.12);

  --max:1320px;
  --gutter:clamp(20px, 4vw, 48px);

  --sans:'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif:'Instrument Serif', 'Times New Roman', serif;
  --mono:'JetBrains Mono', ui-monospace, monospace;

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
html.lenis, html.lenis body{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto !important;}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain;}
.lenis.lenis-stopped{overflow:hidden;}
html:not(.lenis){scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
p{margin:0;}
h1,h2,h3{margin:0; font-weight:400; letter-spacing:-.025em; line-height:1.02;}
em{font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.01em;}
ul,ol{margin:0; padding:0; list-style:none;}
button{font:inherit; color:inherit;}
::selection{background:var(--accent); color:var(--paper);}
:focus-visible{outline:1px solid var(--accent); outline-offset:4px;}

.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--gutter);}

.label{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.label.light{color:var(--faint);}

/* film grain */
.grain{
  position:fixed; inset:-50%;
  z-index:200; pointer-events:none;
  opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)}
}

/* REC dot */
.rec{display:inline-flex; align-items:center; gap:7px; color:var(--paper); margin-right:14px;}
.rec i, .intro-rec i, .flag-red i, .btn-pill .dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 0 rgba(255,42,31,.6);
  animation:rec 1.6s var(--ease-in-out) infinite;
  display:inline-block;
}
@keyframes rec{
  0%,100%{opacity:1; box-shadow:0 0 0 0 rgba(255,42,31,.5);}
  50%{opacity:.35; box-shadow:0 0 0 5px rgba(255,42,31,0);}
}

/* ---------- intro ---------- */
.intro{display:none;}
.js .intro{
  display:grid; place-items:center;
  position:fixed; inset:0; z-index:300;
  background:var(--ink);
  transition:clip-path 1.1s var(--ease-in-out);
  clip-path:inset(0 0 0 0);
}
.intro-inner{display:flex; flex-direction:column; align-items:center; gap:22px;}
.intro img{width:120px; opacity:0; transform:translateY(12px) scale(.96); animation:introIn 1s var(--ease) .1s forwards;}
.intro-rec{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--muted);
  opacity:0; animation:introIn 1s var(--ease) .35s forwards;
}
@keyframes introIn{to{opacity:1; transform:none;}}
.is-loaded .intro{clip-path:inset(0 0 100% 0);}
.intro-skip .intro{display:none !important;}

/* ---------- header ---------- */
header{
  position:fixed; top:0; left:0; right:0;
  z-index:100;
  transition:transform .6s var(--ease), background .4s ease, border-color .4s ease;
  border-bottom:1px solid transparent;
}
header.scrolled{
  background:rgba(5,5,5,.72);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line);
}
header.hidden{transform:translateY(-100%);}
.navbar{
  max-width:var(--max); margin:0 auto;
  padding:18px var(--gutter);
  display:flex; align-items:center; gap:40px;
}
.mark{display:flex; align-items:center; gap:12px; margin-right:auto;}
.mark img{width:46px; height:auto;}
.mark span{
  font-family:var(--mono); font-size:10px; line-height:1.3;
  letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
}
nav.links{display:flex; gap:32px;}
nav.links a{
  font-size:14px; color:var(--faint);
  position:relative; padding:4px 0;
  transition:color .3s ease;
}
nav.links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--paper); transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--ease);
}
nav.links a:hover{color:var(--paper);}
nav.links a:hover::after, nav.links a.is-current::after{transform:scaleX(1); transform-origin:left;}
nav.links a.is-current{color:var(--paper);}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--sans); font-size:15px; font-weight:500;
  letter-spacing:-.005em;
  border-radius:100px;
  cursor:pointer; border:0;
  position:relative; overflow:hidden;
  transition:color .5s var(--ease), background .5s var(--ease), border-color .5s var(--ease);
  will-change:transform;
}
.btn svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.5; transition:transform .5s var(--ease);}
.btn:hover svg{transform:translateX(4px);}
.btn-solid{
  background:var(--paper); color:var(--ink);
  padding:17px 28px 17px 30px;
}
.btn-solid::before{
  content:""; position:absolute; inset:0;
  background:var(--accent);
  border-radius:inherit;
  transform:translateY(101%);
  transition:transform .6s var(--ease);
}
.btn-solid:hover{color:var(--paper);}
.btn-solid:hover::before{transform:translateY(0);}
.btn-solid > *{position:relative; z-index:1;}
.btn-pill{
  padding:10px 18px; font-size:13.5px;
  border:1px solid var(--line-strong); color:var(--paper);
}
.btn-pill:hover{background:var(--paper); color:var(--ink); border-color:var(--paper);}
.btn-link{
  color:var(--faint); padding:6px 0; border-radius:0;
  background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;
  transition:background-size .6s var(--ease), color .3s ease;
}
.btn-link:hover{color:var(--paper); background-size:0 1px; background-position:100% 100%;}

/* ---------- menu ---------- */
.menu-toggle{
  display:none; background:none; border:1px solid var(--line-strong);
  width:42px; height:42px; border-radius:50%; cursor:pointer; position:relative;
}
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after{
  content:""; position:absolute; left:13px; right:13px; height:1px; background:var(--paper);
  transition:transform .5s var(--ease), background .3s;
}
.menu-toggle span{top:20px;}
.menu-toggle span::before{left:0; right:0; top:-4px;}
.menu-toggle span::after{left:0; right:0; top:4px;}
.menu-toggle[aria-expanded="true"] span{background:transparent;}
.menu-toggle[aria-expanded="true"] span::before{transform:translateY(4px) rotate(45deg);}
.menu-toggle[aria-expanded="true"] span::after{transform:translateY(-4px) rotate(-45deg);}
.mobile-menu{display:none;}

/* ---------- reveal ---------- */
.js .reveal-up{opacity:0; transform:translateY(32px); transition:opacity 1.2s var(--ease), transform 1.2s var(--ease);}
.js .reveal-up.is-in{opacity:1; transform:none;}

/* ---------- hero ---------- */
.hero{
  min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:120px 0 0;
  position:relative;
}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 50% at 75% 40%, rgba(255,255,255,.035), transparent 70%);
}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(32px, 6vw, 96px);
  align-items:end;
  width:100%;
}
.eyebrow{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); display:flex; align-items:center; flex-wrap:wrap; row-gap:8px;
}
.hero-title{
  margin-top:28px;
  font-size:clamp(46px, 5.9vw, 92px);
  line-height:.95;
  letter-spacing:-.045em;
  font-weight:400;
}
.hero-title .line{display:block; clip-path:inset(0 -1em 0 -1em); padding-bottom:.08em; margin-bottom:-.08em;}
.hero-title .line > span{display:inline-block; will-change:transform;}
@media (min-width:901px){.hero-title .line{white-space:nowrap;}}
.js .hero-title .line > span{transform:translateY(110%); transition:transform 1.4s var(--ease);}
.is-loaded .hero-title .line > span{transform:none;}
.is-loaded .hero-title .line:nth-child(2) > span{transition-delay:.08s;}
.is-loaded .hero-title .line:nth-child(3) > span{transition-delay:.16s;}
.hero-title em{color:var(--accent); letter-spacing:-.02em; padding-right:.04em;}
.hero-lede{
  margin-top:34px; max-width:42ch;
  font-size:clamp(16px, 1.3vw, 19px); line-height:1.55; color:var(--faint);
}
.hero-actions{margin-top:40px; display:flex; align-items:center; gap:30px; flex-wrap:wrap;}
.js .hero .reveal-up{transition-delay:.35s;}
.js .hero .hero-actions.reveal-up{transition-delay:.5s;}

.hero-visual{margin:0; position:relative; align-self:end;}
.hero-img{
  aspect-ratio:3/4;
  max-height:68vh;
  width:100%;
  overflow:hidden;
  position:relative;
  background:var(--ink-3);
}
.js .hero-img{clip-path:inset(100% 0 0 0); transition:clip-path 1.6s var(--ease) .15s;}
.is-loaded .hero-img{clip-path:inset(0 0 0 0);}
.hero-img img{
  width:100%; height:118%; object-fit:cover; object-position:center 30%;
  filter:grayscale(100%) contrast(1.08) brightness(.9);
  transform:scale(1.08);
  transition:transform 2s var(--ease) .15s;
}
.is-loaded .hero-img img{transform:scale(1);}
.viewfinder{position:absolute; inset:-14px; z-index:2; pointer-events:none;}
.viewfinder i{position:absolute; width:22px; height:22px; border-color:var(--paper); border-style:solid; border-width:0; opacity:.7;}
.viewfinder i:nth-child(1){top:0; left:0; border-top-width:1px; border-left-width:1px;}
.viewfinder i:nth-child(2){top:0; right:0; border-top-width:1px; border-right-width:1px;}
.viewfinder i:nth-child(3){bottom:0; left:0; border-bottom-width:1px; border-left-width:1px;}
.viewfinder i:nth-child(4){bottom:0; right:0; border-bottom-width:1px; border-right-width:1px;}
.js .viewfinder{opacity:0; transform:scale(1.06); transition:opacity 1.2s var(--ease) .9s, transform 1.4s var(--ease) .9s;}
.is-loaded .viewfinder{opacity:1; transform:none;}
.hero-visual figcaption{
  display:flex; gap:16px; margin-top:22px; white-space:nowrap;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; color:var(--dim);
}
.hero-visual figcaption .tc{margin-left:auto; color:var(--muted);}

.hero-meta{
  margin-top:clamp(48px, 8vh, 96px);
  display:grid; grid-template-columns:repeat(3, 1fr) auto;
  width:100%; position:relative;
}
.hero-meta::before{content:""; position:absolute; top:0; left:var(--gutter); right:var(--gutter); height:1px; background:var(--line);}
.hero-meta > div{padding:22px 0 30px; display:flex; flex-direction:column; gap:4px;}
.hero-meta span{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim);}
.hero-meta strong{font-weight:400; font-size:15px; color:var(--faint);}
.scroll-hint{flex-direction:row !important; align-items:center; gap:12px !important;}
.scroll-hint i{width:1px; height:34px; background:var(--line-strong); position:relative; overflow:hidden;}
.scroll-hint i::after{content:""; position:absolute; left:0; top:-40%; width:1px; height:40%; background:var(--paper); animation:scrollHint 2.2s var(--ease-in-out) infinite;}
@keyframes scrollHint{to{top:100%;}}

/* ---------- marquee ---------- */
.marquee{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  overflow:hidden; padding:clamp(20px, 3vw, 36px) 0;
  white-space:nowrap; user-select:none;
}
.marquee-track{display:inline-flex; align-items:center; gap:clamp(24px, 3vw, 48px); will-change:transform;}
.marquee span{font-size:clamp(34px, 5.6vw, 88px); letter-spacing:-.04em; font-weight:300; color:var(--faint); line-height:1;}
.marquee span:nth-of-type(even){font-family:var(--serif); font-style:italic; font-weight:400; color:var(--muted); letter-spacing:-.02em;}
.marquee b{color:var(--accent); font-size:12px; font-weight:400;}

/* ---------- statement ---------- */
.statement{padding:clamp(120px, 18vw, 240px) 0;}
.statement .label{margin-bottom:40px;}
.statement-text{
  font-size:clamp(28px, 4.2vw, 64px);
  line-height:1.12; letter-spacing:-.035em; font-weight:400;
  max-width:22ch;
}
.statement-text .w{transition:color .4s ease;}
.js .statement-text .w{color:rgba(238,234,226,.14);}
.js .statement-text .w.on{color:var(--paper);}

/* ---------- section head ---------- */
section{position:relative;}
.services, .process, .pricing, .team, .faq, .contact{padding:clamp(96px, 12vw, 180px) 0;}
.section-head{
  display:grid; grid-template-columns:1fr 1fr; gap:20px 48px;
  align-items:end; margin-bottom:clamp(56px, 7vw, 100px);
}
.section-head .label{grid-column:1 / -1;}
.section-head h2, .process-head h2, .faq h2{
  font-size:clamp(40px, 6vw, 96px); letter-spacing:-.045em; line-height:.95;
}
h2 em{color:var(--faint);}
.section-note{font-size:16px; color:var(--muted); max-width:38ch; justify-self:end; line-height:1.55;}

/* ---------- services ---------- */
.service-list{border-top:1px solid var(--line);}
.service{
  display:grid;
  grid-template-columns:80px minmax(0, 1fr) minmax(0, 1fr);
  gap:32px;
  padding:clamp(32px, 4vw, 52px) 0;
  border-bottom:1px solid var(--line);
  position:relative;
}
.service::before{
  content:""; position:absolute; left:0; right:0; top:-1px; height:1px;
  background:var(--paper); transform:scaleX(0); transform-origin:left;
  transition:transform 1s var(--ease);
}
.service:hover::before{transform:scaleX(1);}
.service-num{font-family:var(--mono); font-size:11.5px; color:var(--dim); padding-top:14px;}
.service-name{
  font-size:clamp(44px, 6.4vw, 104px);
  letter-spacing:-.05em; line-height:.9;
  transition:transform .8s var(--ease), color .5s ease;
}
.service:hover .service-name{transform:translateX(14px); color:var(--accent);}
.service-body{max-width:46ch;}
.service-claim{font-size:20px; letter-spacing:-.015em; color:var(--paper); margin-bottom:12px; line-height:1.3;}
.service-body > p:not(.service-claim){color:var(--muted); font-size:15px;}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:22px;}
.chips li{
  font-family:var(--mono); font-size:11px; letter-spacing:.02em;
  border:1px solid var(--line-strong); color:var(--faint);
  padding:6px 12px; border-radius:100px;
}

/* ---------- cinema ---------- */
.cinema{height:150vh; position:relative;}
.cinema-frame{
  position:sticky; top:0; height:100vh; overflow:hidden;
  clip-path:inset(calc(var(--inset, 1) * 14%) calc(var(--inset, 1) * 20%) round calc(var(--inset, 1) * 8px));
  will-change:clip-path;
}
.cinema-frame img{
  width:100%; height:120%; object-fit:cover; object-position:center 30%;
  filter:grayscale(100%) contrast(1.06) brightness(.72);
  transform:scale(calc(1.15 - (1 - var(--inset, 1)) * .15));
}
.cinema-frame::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 45%, rgba(5,5,5,.85));}
.cinema-copy{
  position:absolute; left:0; right:0; bottom:10vh; z-index:2;
  opacity:calc(1 - var(--inset, 1) * 1.6);
}
.cinema-quote{
  margin-top:18px;
  font-size:clamp(30px, 4.4vw, 68px); line-height:1.02; letter-spacing:-.04em;
  max-width:20ch;
}
.cinema-quote em{color:var(--accent);}

/* ---------- projekte ---------- */
.work{padding:clamp(96px, 12vw, 180px) 0;}
.cases{display:flex; flex-direction:column; gap:clamp(72px, 9vw, 140px);}
.case{
  display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  gap:clamp(32px, 5vw, 80px); align-items:center;
}
.case-flip .case-media{order:2;}
.case-media{
  position:relative; display:block; overflow:hidden;
  aspect-ratio:1400/788; border-radius:4px;
  background:var(--ink-3); border:1px solid var(--line);
}
.case-media img{
  width:100%; height:100%; object-fit:cover; object-position:top center;
  transform:scale(1.02);
  transition:transform 1.6s var(--ease), filter 1s var(--ease);
  filter:brightness(.92);
}
.case-media:hover img{transform:scale(1.06); filter:brightness(1);}
.case-cursor{
  position:absolute; left:50%; top:50%;
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 22px; border-radius:100px;
  background:var(--paper); color:var(--ink); font-size:14px; font-weight:500;
  transform:translate(-50%,-50%) scale(.6); opacity:0;
  transition:transform .7s var(--ease), opacity .4s ease;
  pointer-events:none; white-space:nowrap;
}
.case-cursor svg{width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.5;}
.case-media:hover .case-cursor{transform:translate(-50%,-50%) scale(1); opacity:1;}
.case-placeholder{
  display:grid; place-items:center;
  background:
    radial-gradient(70% 90% at 30% 20%, rgba(255,42,31,.10), transparent 60%),
    linear-gradient(135deg, #111, #080808);
}
.ph-mono{
  font-size:clamp(90px, 14vw, 220px); letter-spacing:-.07em; line-height:1;
  font-weight:300; color:rgba(238,234,226,.08);
  transition:color .8s var(--ease), transform 1.4s var(--ease);
}
.case-placeholder:hover .ph-mono{color:rgba(238,234,226,.14); transform:scale(1.04);}
.ph-note{
  position:absolute; left:22px; bottom:20px;
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
}
.ph-note i{width:6px; height:6px; border-radius:50%; background:var(--accent); animation:rec 1.6s var(--ease-in-out) infinite;}
.case-meta{
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); display:flex; gap:12px; align-items:center;
}
.case-meta span{color:var(--accent);}
.case h3{margin-top:18px; font-size:clamp(32px, 3.4vw, 52px); letter-spacing:-.045em; line-height:.98;}
.case-claim{margin-top:14px; font-size:19px; letter-spacing:-.015em; color:var(--faint);}
.case-claim em{color:var(--paper);}
.case-text{margin-top:14px; color:var(--muted); font-size:15px; max-width:44ch;}
.case-points{margin-top:22px; display:flex; flex-direction:column; gap:8px; border-top:1px solid var(--line); padding-top:18px;}
.case-points li{font-size:14px; color:var(--faint); display:flex; gap:12px; align-items:baseline;}
.case-points li::before{content:""; width:10px; height:1px; background:var(--accent); flex:none; transform:translateY(-4px);}
.case .chips{margin-top:20px;}
.case-links{margin-top:28px; display:flex; gap:26px; flex-wrap:wrap;}
.case-link{
  display:inline-flex; align-items:center; gap:10px; font-size:14.5px; color:var(--paper);
  padding-bottom:5px; border-bottom:1px solid var(--line-strong);
  transition:border-color .4s ease, gap .5s var(--ease), color .3s ease;
}
.case-link svg{width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.5; transition:transform .5s var(--ease);}
.case-link:hover{border-color:var(--paper); gap:14px;}
.case-link:hover svg{transform:translate(2px,-2px);}
.case-link.subtle{color:var(--muted);}
.case-link.subtle:hover{color:var(--paper);}

.work-cta{
  margin-top:clamp(80px, 10vw, 140px);
  display:grid; grid-template-columns:1fr auto; align-items:end; gap:12px 32px;
  padding:clamp(32px, 4vw, 56px) 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  position:relative;
}
.work-cta .label{grid-column:1 / -1;}
.work-cta-title{font-size:clamp(44px, 7vw, 112px); letter-spacing:-.05em; line-height:.95; transition:transform .9s var(--ease);}
.work-cta-title em{color:var(--accent);}
.work-cta-arrow{
  width:clamp(56px, 6vw, 88px); height:clamp(56px, 6vw, 88px); border-radius:50%;
  border:1px solid var(--line-strong); display:grid; place-items:center;
  transition:background .6s var(--ease), border-color .6s var(--ease), transform .9s var(--ease);
}
.work-cta-arrow svg{width:22px; height:22px; fill:none; stroke:var(--paper); stroke-width:1.2; transition:stroke .4s ease, transform .6s var(--ease);}
.work-cta:hover .work-cta-title{transform:translateX(14px);}
.work-cta:hover .work-cta-arrow{background:var(--accent); border-color:var(--accent); transform:rotate(-45deg);}

@media (max-width:900px){
  .case{grid-template-columns:1fr; gap:28px;}
  .case-flip .case-media{order:0;}
  .case-cursor{display:none;}
}

/* ---------- process ---------- */
.process-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px, 8vw, 140px); align-items:start;}
.process-head{position:sticky; top:130px;}
.process-head h2{margin-top:20px;}
.process-head .section-note{justify-self:start; margin-top:28px;}
.steps{position:relative; padding-left:0;}
.progress{position:absolute; left:15px; top:10px; bottom:10px; width:1px; background:var(--line);}
.progress span{position:absolute; inset:0; background:var(--accent); transform-origin:top; transform:scaleY(var(--progress, 0));}
.step{display:grid; grid-template-columns:32px 1fr; gap:36px; padding-bottom:clamp(56px, 7vw, 96px);}
.step:last-child{padding-bottom:0;}
.step-n{
  width:31px; height:31px; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--mono); font-size:10.5px; color:var(--muted);
  background:var(--ink); border:1px solid var(--line-strong);
  position:relative; z-index:1;
  transition:background .6s var(--ease), color .6s var(--ease), border-color .6s var(--ease);
}
.step.is-active .step-n{background:var(--accent); border-color:var(--accent); color:var(--paper);}
.step-time{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); margin-bottom:10px;}
.step h3{font-size:clamp(26px, 2.6vw, 38px); letter-spacing:-.035em; margin-bottom:14px;}
.step p{color:var(--muted); font-size:15.5px; max-width:44ch;}
.js .step > div{opacity:.28; transition:opacity .8s var(--ease);}
.js .step.is-active > div{opacity:1;}

/* ---------- pricing ---------- */
.filters{
  display:inline-flex; gap:0; padding:5px;
  border:1px solid var(--line); border-radius:100px;
  margin-bottom:40px; position:relative; flex-wrap:wrap;
}
.filter{
  background:none; border:0; cursor:pointer;
  font-size:14px; padding:10px 20px; border-radius:100px;
  color:var(--muted); position:relative; z-index:1;
  transition:color .4s var(--ease);
}
.filter:hover{color:var(--paper);}
.filter.is-active{color:var(--ink);}
.filter-glider{
  position:absolute; top:5px; left:0; height:calc(100% - 10px); width:0;
  background:var(--paper); border-radius:100px;
  transition:transform .6s var(--ease), width .6s var(--ease);
}
.price-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:14px;}
.ticket{
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:4px;
  padding:30px 28px 32px;
  display:flex; flex-direction:column;
  position:relative;
  transition:border-color .5s var(--ease), transform .7s var(--ease), background .5s var(--ease), opacity .5s var(--ease);
}
.ticket:hover{border-color:var(--line-strong); transform:translateY(-4px); background:#0f0f0f;}
.ticket.is-hidden{display:none;}
.ticket.is-entering{animation:ticketIn .7s var(--ease) both;}
@keyframes ticketIn{from{opacity:0; transform:translateY(16px);}}
.ticket-top{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:44px; min-height:24px;}
.cat{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim);}
.ticket h3{font-size:22px; letter-spacing:-.025em; line-height:1.15;}
.price{
  margin:10px 0 18px;
  font-size:clamp(40px, 3.6vw, 54px); letter-spacing:-.05em; line-height:1;
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
}
.price small{font-family:var(--serif); font-style:italic; font-size:.46em; color:var(--muted); letter-spacing:0;}
.price s{font-size:.3em; letter-spacing:0; color:var(--dim); font-family:var(--mono);}
.ticket p{font-size:14.5px; color:var(--muted); line-height:1.55;}
.flag{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:10px; letter-spacing:.04em;
  color:var(--faint); border:1px solid var(--line-strong);
  padding:4px 10px; border-radius:100px; white-space:nowrap;
}
.flag-red{border-color:rgba(255,42,31,.4); color:var(--paper);}
.flag-red i{width:6px; height:6px;}
.ticket-feature{
  background:linear-gradient(160deg, rgba(255,42,31,.14), rgba(255,42,31,0) 55%), var(--ink-2);
  border-color:rgba(255,42,31,.3);
}
.ticket-feature{grid-column:1 / -1;}
.ticket-feature:hover{border-color:rgba(255,42,31,.6); background:linear-gradient(160deg, rgba(255,42,31,.2), rgba(255,42,31,0) 60%), var(--ink-2);}
.ticket-feature .price{color:var(--accent);}
.ticket-link{margin-top:auto; padding-top:22px; font-size:14px; color:var(--paper); align-self:flex-start;}
.ticket-link:hover{color:var(--accent);}
.price-notes{display:grid; grid-template-columns:1fr 1fr; gap:48px; margin-top:56px; padding-top:32px; border-top:1px solid var(--line);}
.price-notes p{font-size:14.5px; color:var(--muted); max-width:56ch;}
.price-notes strong{color:var(--paper); font-weight:500;}

/* ---------- team ---------- */
.team-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(16px, 2vw, 28px);}
.person{margin:0;}
.team-grid .person:nth-child(2){transition-delay:.1s;}
.team-grid .person:nth-child(3){transition-delay:.2s;}
.person-frame{aspect-ratio:4/5; overflow:hidden; border-radius:4px; background:var(--ink-3);}
.person-frame img{
  width:100%; height:100%; object-fit:cover; object-position:top center;
  filter:saturate(.9) brightness(.94);
  transform:scale(1.02);
  transition:filter 1s var(--ease), transform 1.4s var(--ease);
}
.person:hover .person-frame img{filter:saturate(1) brightness(1); transform:scale(1.05);}
.person figcaption{display:flex; flex-direction:column; gap:6px; padding-top:18px; border-top:1px solid transparent;}
.person h3{font-size:20px; letter-spacing:-.02em;}
.person .role{font-family:var(--mono); font-size:10.5px; color:var(--muted); letter-spacing:.02em; text-transform:uppercase;}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--line);}
.faq-grid{display:grid; grid-template-columns:1fr 1.3fr; gap:clamp(40px, 8vw, 140px);}
.faq h2{margin-top:20px;}
.faq-list{border-top:1px solid var(--line);}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{
  list-style:none; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:24px;
  padding:28px 0;
  font-size:clamp(18px, 1.6vw, 22px); letter-spacing:-.02em;
  transition:color .3s ease;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary:hover{color:var(--faint);}
.faq summary i{width:14px; height:14px; position:relative; flex:none;}
.faq summary i::before, .faq summary i::after{
  content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:currentColor;
  transition:transform .6s var(--ease);
}
.faq summary i::after{transform:rotate(90deg);}
.faq details[open] summary i::after{transform:rotate(0deg);}
.faq-a{overflow:hidden;}
.faq-a p{padding:0 0 30px; color:var(--muted); max-width:56ch; font-size:15.5px;}

/* ---------- contact ---------- */
.contact{border-top:1px solid var(--line);}
.contact-shell{display:grid; grid-template-columns:1fr 1fr; gap:clamp(48px, 8vw, 140px); align-items:start;}
.contact-title{margin-top:20px; font-size:clamp(56px, 9vw, 150px); letter-spacing:-.055em; line-height:.9;}
.contact-title em{color:var(--accent);}
.contact-lede{margin-top:32px; max-width:40ch; color:var(--faint); font-size:17px;}
.assurances{margin-top:36px; display:flex; flex-direction:column; gap:12px;}
.assurances li{display:flex; align-items:center; gap:14px; font-size:15px; color:var(--faint);}
.assurances li::before{
  content:""; width:18px; height:18px; flex:none; border-radius:50%;
  border:1px solid var(--line-strong);
  background:radial-gradient(circle, var(--accent) 0 3px, transparent 3.5px);
}
.wa-link{
  margin-top:44px; display:inline-flex; align-items:center; gap:12px;
  font-size:15px; color:var(--paper);
  padding-bottom:6px; border-bottom:1px solid var(--line-strong);
  transition:border-color .4s ease, gap .5s var(--ease);
}
.wa-link svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.5; transition:transform .5s var(--ease);}
.wa-link:hover{border-color:var(--paper); gap:16px;}
.wa-link:hover svg{transform:translate(2px,-2px);}

form{display:flex; flex-direction:column; gap:36px; padding-top:clamp(0px, 4vw, 60px);}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:32px;}
.field{position:relative;}
.field input, .field textarea{
  width:100%; background:transparent; border:0; border-bottom:1px solid var(--line-strong);
  color:var(--paper); font-family:var(--sans); font-size:18px; letter-spacing:-.01em;
  padding:26px 0 12px; resize:none; border-radius:0;
  transition:border-color .4s ease;
}
.field label{
  position:absolute; left:0; top:26px;
  font-size:18px; color:var(--muted); pointer-events:none;
  transform-origin:left top;
  transition:transform .5s var(--ease), color .4s ease;
}
.field input:focus, .field textarea:focus{outline:none; border-bottom-color:var(--paper);}
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label{
  transform:translateY(-24px) scale(.68); color:var(--muted);
}
.field::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--accent);
  transform:scaleX(0); transform-origin:left; transition:transform .8s var(--ease);
}
.field:focus-within::after{transform:scaleX(1);}
.field.invalid input{border-bottom-color:var(--accent);}
.field-group{border:0; padding:0; margin:0;}
.field-group legend{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:16px; padding:0;}
.check-row{display:flex; flex-wrap:wrap; gap:10px;}
.check-chip{cursor:pointer; user-select:none;}
.check-chip input{position:absolute; opacity:0; pointer-events:none;}
.check-chip span{
  display:inline-block; font-size:14px; padding:10px 18px; border-radius:100px;
  border:1px solid var(--line-strong); color:var(--faint);
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.check-chip:hover span{border-color:var(--paper); color:var(--paper);}
.check-chip input:checked + span{background:var(--paper); border-color:var(--paper); color:var(--ink);}
.check-chip input:focus-visible + span{outline:1px solid var(--accent); outline-offset:3px;}
.form-foot{display:flex; align-items:center; gap:24px; flex-wrap:wrap;}
.form-status{font-size:13.5px; color:var(--muted);}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line); padding:clamp(40px, 6vw, 80px) 0 32px; overflow:hidden;}
.footer-big{
  font-size:clamp(120px, 30vw, 460px); letter-spacing:-.07em; line-height:.78;
  font-weight:500; color:var(--paper);
  display:flex; align-items:flex-start;
  margin-left:-.04em;
}
.footer-big .rec-dot{
  width:.07em; height:.07em; border-radius:50%; background:var(--accent);
  margin-left:.04em; margin-top:.02em;
  animation:rec 1.6s var(--ease-in-out) infinite;
}
.footer-row{
  margin-top:clamp(32px, 5vw, 64px);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
  font-size:13px; color:var(--muted);
}
.footer-links{display:flex; gap:24px; flex-wrap:wrap;}
.footer-links a{transition:color .3s ease;}
.footer-links a:hover{color:var(--paper);}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .price-grid{grid-template-columns:repeat(2, 1fr);}
  .service{grid-template-columns:56px 1fr;}
  .service-body{grid-column:2;}
}
@media (max-width:900px){
  nav.links, .nav-btn{display:none;}
  .menu-toggle{display:block;}
  .mobile-menu{
    display:flex; flex-direction:column;
    padding:0 var(--gutter);
    max-height:0; overflow:hidden;
    transition:max-height .8s var(--ease), padding .8s var(--ease);
  }
  .mobile-menu a{font-size:32px; letter-spacing:-.035em; padding:8px 0; border-bottom:1px solid var(--line);}
  .mobile-menu .accent-link{color:var(--accent); border:0;}
  header.nav-open{background:rgba(5,5,5,.96); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);}
  header.nav-open .mobile-menu{max-height:80vh; padding-bottom:32px;}

  .hero{padding-top:104px;}
  .hero-grid{grid-template-columns:1fr;}
  .hero-visual{max-width:360px; width:70%; justify-self:end; margin-top:12px;}
  .hero-img{max-height:none;}
  .hero-meta{grid-template-columns:1fr 1fr 1fr;}
  .scroll-hint{display:none !important;}

  .section-head{grid-template-columns:1fr;}
  .section-note{justify-self:start;}
  .process-grid, .faq-grid, .contact-shell{grid-template-columns:1fr;}
  .process-head{position:static;}
  .cinema{height:120vh;}
  .price-notes{grid-template-columns:1fr; gap:20px;}
}
@media (max-width:640px){
  .hero-meta{grid-template-columns:1fr 1fr;}
  .hero-meta > div:nth-child(3){display:none;}
  .hero-visual{width:78%;}
  .hero-actions{gap:22px;}
  .price-grid{grid-template-columns:1fr;}
  .team-grid{grid-template-columns:1fr; gap:40px;}
  .service{grid-template-columns:1fr; gap:16px;}
  .service-body{grid-column:auto;}
  .service-num{padding-top:0;}
  .field-row{grid-template-columns:1fr; gap:36px;}
  .person figcaption{flex-direction:column; gap:4px;}
  .person .role{text-align:left;}
  .filters{border-radius:22px;}
  .filter{padding:9px 14px; font-size:13.5px;}
  .step{gap:22px;}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important; transition-duration:.001ms !important; transition-delay:0s !important;}
  .intro{display:none !important;}
  .grain{display:none;}
  .js .reveal-up, .js .hero-title .line > span{opacity:1; transform:none;}
  .js .hero-img{clip-path:none;}
  .js .statement-text .w{color:var(--paper);}
  .cinema{height:auto;}
  .cinema-frame{position:relative; height:80vh; clip-path:none;}
  .cinema-copy{opacity:1;}
}

/* =========================================================
   Multi-page additions
   ========================================================= */

/* page curtain */
.curtain{display:none;}
.js .curtain{
  display:block; position:fixed; inset:0; z-index:290; pointer-events:none;
  background:var(--ink);
  clip-path:inset(0 0 0 0);
  transition:clip-path .9s var(--ease-in-out);
}
.js.is-loaded .curtain{clip-path:inset(0 0 100% 0);}

/* page hero (subpages) */
.page-hero{padding:clamp(150px, 20vh, 220px) 0 clamp(64px, 9vw, 120px);}
.page-title{margin-top:28px; font-size:clamp(50px, 8vw, 132px);}
.page-lede{margin-top:36px; max-width:50ch; font-size:clamp(17px, 1.4vw, 20px); line-height:1.55; color:var(--faint);}
.js .page-hero .reveal-up{transition-delay:.3s;}
.js .page-hero .page-lede.reveal-up{transition-delay:.45s;}

/* team cards as links */
a.person{display:block; color:inherit;}
.person-cap{display:flex; flex-direction:column; gap:6px; padding-top:18px;}
.person-cap h3{font-size:20px; letter-spacing:-.02em; transition:color .4s ease;}
a.person:hover .person-cap h3{color:var(--accent);}
.section-more{margin-top:clamp(40px, 5vw, 64px); display:flex; gap:28px; flex-wrap:wrap;}

/* contact extras */
.contact-lines{margin-top:36px; display:flex; flex-direction:column; border-top:1px solid var(--line);}
.contact-lines li{display:flex; justify-content:space-between; gap:20px; padding:14px 0; border-bottom:1px solid var(--line); font-size:15px;}
.contact-lines span{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); padding-top:3px;}
.contact-lines a{color:var(--paper); transition:color .3s ease;}
.contact-lines a:hover{color:var(--accent);}
.form-legal{font-size:12.5px; color:var(--dim); max-width:56ch; margin-top:-12px;}
.form-legal a{color:var(--muted); border-bottom:1px solid var(--line-strong);}
.form-legal a:hover{color:var(--paper);}

/* projekte page */
.project-index{padding-bottom:clamp(40px, 6vw, 80px);}
.index-list{border-top:1px solid var(--line);}
.index-row{
  display:grid; grid-template-columns:70px 1fr auto 40px; align-items:center; gap:24px;
  padding:clamp(20px, 2.4vw, 32px) 0; border-bottom:1px solid var(--line);
  position:relative; overflow:hidden;
}
.index-row::before{
  content:""; position:absolute; inset:0; background:var(--ink-2); z-index:-1;
  transform:scaleY(0); transform-origin:bottom; transition:transform .6s var(--ease);
}
.index-row:hover::before{transform:scaleY(1);}
.index-num{font-family:var(--mono); font-size:11px; color:var(--accent); padding-left:4px;}
.index-name{font-size:clamp(28px, 4vw, 60px); letter-spacing:-.045em; line-height:1; transition:transform .7s var(--ease);}
.index-row:hover .index-name{transform:translateX(12px);}
.index-meta{font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);}
.index-arrow{font-size:22px; color:var(--muted); transition:transform .6s var(--ease), color .3s ease; justify-self:end;}
.index-row:hover .index-arrow{transform:translate(4px,4px); color:var(--accent);}
.work-full{padding-top:clamp(56px, 8vw, 120px);}
.work-full .case{scroll-margin-top:110px;}

/* team page */
.members{padding-bottom:clamp(64px, 10vw, 140px);}
.member{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(40px, 8vw, 140px); align-items:center;
  padding:clamp(56px, 8vw, 120px) 0; border-top:1px solid var(--line);
  scroll-margin-top:80px;
}
.member-flip .member-media{order:2;}
.member-media{position:relative;}
.member-frame{aspect-ratio:4/5; overflow:hidden; border-radius:4px; background:var(--ink-3);}
.member-frame img{width:100%; height:112%; margin-top:-6%; object-fit:cover; object-position:top center; transition:transform 1.4s var(--ease);}
.member-index{display:block; margin-top:16px; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; color:var(--dim);}
.member-short{font-family:var(--serif); font-style:italic; font-size:clamp(28px, 3vw, 44px); color:var(--accent); line-height:1;}
.member-name{margin-top:14px; font-size:clamp(44px, 6vw, 96px); letter-spacing:-.05em; line-height:.92;}
.member-bio{margin-top:28px; font-size:clamp(17px, 1.5vw, 21px); line-height:1.5; color:var(--faint); max-width:36ch;}
.member-roles{margin-top:30px;}
.js .member-body .reveal-up:nth-child(2){transition-delay:.06s;}
.js .member-body .reveal-up:nth-child(3){transition-delay:.12s;}
.js .member-body .reveal-up:nth-child(4){transition-delay:.18s;}

.cta-band{padding:0 0 clamp(80px, 10vw, 140px);}
.cta-band .work-cta{margin-top:0;}

/* über uns */
.about-visual{padding-bottom:clamp(40px, 6vw, 80px);}
.about-images{display:grid; grid-template-columns:repeat(12, 1fr); gap:clamp(16px, 2vw, 28px); align-items:start;}
.about-img{overflow:hidden; border-radius:4px; background:var(--ink-3); aspect-ratio:3/4;}
.about-img img{width:100%; height:118%; margin-top:-9%; object-fit:cover; filter:grayscale(100%) contrast(1.06) brightness(.9);}
.about-img-a{grid-column:1 / span 7; aspect-ratio:4/5;}
.about-img-b{grid-column:9 / span 4; margin-top:clamp(80px, 16vw, 240px);}
.facts{padding:0 0 clamp(96px, 12vw, 160px);}
.facts-grid{display:grid; grid-template-columns:repeat(4, 1fr); border-top:1px solid var(--line);}
.fact{padding:32px 24px 0 0; display:flex; flex-direction:column; gap:12px;}
.fact + .fact{padding-left:24px; border-left:1px solid var(--line);}
.fact-num{font-size:clamp(52px, 6.5vw, 104px); letter-spacing:-.06em; line-height:.9;}
.fact-num small{font-size:.4em; letter-spacing:0; color:var(--muted); margin-left:4px;}
.fact-label{font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);}
.facts-grid .fact:nth-child(2){transition-delay:.08s;}
.facts-grid .fact:nth-child(3){transition-delay:.16s;}
.facts-grid .fact:nth-child(4){transition-delay:.24s;}
.values{padding:0 0 clamp(96px, 12vw, 180px);}
.values-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(32px, 6vw, 96px);}
.value{padding:36px 0 44px; border-top:1px solid var(--line); display:grid; grid-template-columns:56px 1fr; gap:6px 16px;}
.value-num{font-family:var(--mono); font-size:11px; color:var(--accent); padding-top:12px; grid-row:span 2;}
.value h3{font-size:clamp(26px, 2.6vw, 38px); letter-spacing:-.035em;}
.value p{color:var(--muted); font-size:15.5px; max-width:44ch; margin-top:8px;}
.about-team{padding-top:0;}

/* legal pages */
.legal{padding:0 0 clamp(96px, 12vw, 160px);}
.legal-grid{display:grid; grid-template-columns:240px minmax(0,1fr); gap:clamp(40px, 8vw, 120px); align-items:start; border-top:1px solid var(--line); padding-top:48px;}
.legal-toc{position:sticky; top:120px;}
.legal-toc ol{margin-top:18px; display:flex; flex-direction:column; gap:10px; counter-reset:toc;}
.legal-toc li{counter-increment:toc;}
.legal-toc a{font-size:14px; color:var(--muted); display:flex; gap:12px; transition:color .3s ease;}
.legal-toc a::before{content:counter(toc, decimal-leading-zero); font-family:var(--mono); font-size:10.5px; color:var(--dim); padding-top:3px;}
.legal-toc a:hover{color:var(--paper);}
.legal-updated{margin-top:32px; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--dim);}
.legal-body{max-width:760px;}
.legal-block{padding:0 0 44px; margin-bottom:44px; border-bottom:1px solid var(--line); scroll-margin-top:110px;}
.legal-block:last-child{border-bottom:0;}
.legal-block h2{font-size:clamp(24px, 2.4vw, 34px); letter-spacing:-.03em; margin-bottom:20px;}
.legal-block p{color:var(--faint); font-size:16px; line-height:1.7;}
.legal-block a{color:var(--paper); border-bottom:1px solid var(--line-strong); transition:border-color .3s ease;}
.legal-block a:hover{border-color:var(--accent);}
.legal-dl{display:grid; grid-template-columns:180px 1fr; margin:0;}
.legal-dl dt, .legal-dl dd{padding:12px 0; border-top:1px solid var(--line); margin:0;}
.legal-dl dt{font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--dim); padding-top:15px;}
.legal-dl dd{color:var(--paper); font-size:16px;}

/* footer (extended) */
.footer-top{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(40px, 6vw, 96px); padding-bottom:clamp(56px, 8vw, 100px);}
.footer-cta{display:grid; grid-template-columns:1fr auto; align-items:end; gap:14px 24px; align-self:start;}
.footer-cta .label{grid-column:1 / -1;}
.footer-cta-title{font-size:clamp(40px, 5.2vw, 84px); letter-spacing:-.05em; line-height:.95; transition:transform .9s var(--ease);}
.footer-cta-title em{color:var(--accent);}
.footer-cta:hover .footer-cta-title{transform:translateX(10px);}
.footer-cta:hover .work-cta-arrow{background:var(--accent); border-color:var(--accent); transform:rotate(-45deg);}
.footer-cols{display:grid; grid-template-columns:repeat(3, auto); justify-content:space-between; gap:32px;}
.footer-cols ul{margin-top:18px; display:flex; flex-direction:column; gap:10px;}
.footer-cols li{font-size:14.5px; color:var(--faint);}
.footer-cols a{transition:color .3s ease;}
.footer-cols a:hover{color:var(--accent);}
.footer-cols span{color:var(--muted);}
.to-top{transition:color .3s ease;}
.to-top:hover{color:var(--paper);}

@media (max-width:900px){
  .member{grid-template-columns:1fr; gap:36px;}
  .member-flip .member-media{order:0;}
  .member-media{max-width:460px;}
  .about-img-a{grid-column:1 / span 8;}
  .about-img-b{grid-column:7 / span 6; margin-top:-30%;}
  .facts-grid{grid-template-columns:1fr 1fr;}
  .fact:nth-child(3){padding-left:0; border-left:0;}
  .fact:nth-child(n+3){margin-top:32px; border-top:1px solid var(--line);}
  .values-grid{grid-template-columns:1fr;}
  .legal-grid{grid-template-columns:1fr;}
  .legal-toc{position:static;}
  .footer-top{grid-template-columns:1fr;}
  .index-row{grid-template-columns:44px 1fr 28px;}
  .index-meta{display:none;}
}
@media (max-width:640px){
  .footer-cols{grid-template-columns:1fr 1fr;}
  .footer-cols > div:first-child{grid-column:1 / -1;}
  .legal-dl{grid-template-columns:1fr;}
  .legal-dl dd{border-top:0; padding-top:0;}
  .value{grid-template-columns:1fr;}
  .value-num{grid-row:auto; padding-top:0;}
  .contact-lines li{flex-direction:column; gap:2px;}
}
@media (prefers-reduced-motion: reduce){
  .js .curtain{display:none;}
}
.footer-claim p{margin-top:18px; font-size:clamp(22px, 2.2vw, 32px); letter-spacing:-.03em; line-height:1.2; max-width:24ch; color:var(--faint);}

/* =========================================================
   v3 – live site integration
   ========================================================= */
.hp-field{position:absolute !important; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden;}
.field-count{position:absolute; right:0; bottom:-22px; font-family:var(--mono); font-size:10.5px; color:var(--dim);}
.consent{display:grid; grid-template-columns:22px 1fr; gap:14px; align-items:start; cursor:pointer; font-size:13.5px; line-height:1.55; color:var(--muted); margin-top:4px;}
.consent input{position:absolute; opacity:0; pointer-events:none;}
.consent-box{width:22px; height:22px; border-radius:6px; border:1px solid var(--line-strong); position:relative; transition:background .35s var(--ease), border-color .35s var(--ease); margin-top:1px;}
.consent-box::after{content:""; position:absolute; left:7px; top:3px; width:6px; height:11px; border:solid var(--ink); border-width:0 2px 2px 0; transform:rotate(45deg) scale(0); transition:transform .4s var(--ease);}
.consent input:checked + .consent-box{background:var(--paper); border-color:var(--paper);}
.consent input:checked + .consent-box::after{transform:rotate(45deg) scale(1);}
.consent input:focus-visible + .consent-box{outline:1px solid var(--accent); outline-offset:3px;}
.consent a{color:var(--paper); border-bottom:1px solid var(--line-strong);}
.consent.invalid .consent-box{border-color:var(--accent);}
.field.invalid textarea{border-bottom-color:var(--accent);}
.btn:disabled{opacity:.55; cursor:progress;}

.contact-success{padding:clamp(24px, 4vw, 56px) 0; display:flex; flex-direction:column; gap:16px; outline:none;}
.contact-success h3{font-size:clamp(40px, 5vw, 72px); letter-spacing:-.05em; line-height:.95;}
.contact-success h3 em{color:var(--accent);}
.contact-success > p:not(.label){color:var(--faint); max-width:40ch; font-size:17px;}
.contact-success .case-link{align-self:flex-start; margin-top:8px;}
.success-check{width:64px; height:64px; border-radius:50%; border:1px solid var(--line-strong); display:grid; place-items:center; margin-bottom:8px; animation:successIn .9s var(--ease) both;}
.success-check svg{width:26px; height:26px; fill:none; stroke:var(--accent); stroke-width:1.8; stroke-dasharray:24; stroke-dashoffset:24; animation:draw .8s var(--ease) .25s forwards;}
@keyframes successIn{from{transform:scale(.6); opacity:0;}}
@keyframes draw{to{stroke-dashoffset:0;}}

.service-name a{color:inherit;}
.service-more{margin-top:24px;}

.to-top{background:none; border:0; padding:0; cursor:pointer; font:inherit; color:inherit; transition:color .3s ease;}
.to-top:hover{color:var(--paper);}
.footer-cols-4{grid-template-columns:repeat(4, auto);}
.page-actions{margin-top:40px;}
.js .page-hero .page-actions.reveal-up{transition-delay:.55s;}

/* service pages */
.svc-visual{padding-bottom:clamp(24px, 4vw, 48px);}
.svc-frame{position:relative; overflow:visible; background:none;}
.svc-frame > img{border-radius:4px;}
.svc-frame{aspect-ratio:auto;}
.svc-frame > img{display:block; width:100%; aspect-ratio:4/5; height:auto; object-fit:cover; margin-top:0; filter:grayscale(100%) contrast(1.06) brightness(.9);}
.svc-frame .viewfinder{inset:-12px;}
.svc-rec{position:absolute; left:18px; top:16px; display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; color:var(--paper); z-index:3;}
.svc-rec i{width:7px; height:7px; border-radius:50%; background:var(--accent); animation:rec 1.6s var(--ease-in-out) infinite;}
.svc-caption{display:flex; gap:28px; margin-top:28px; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim);}
.svc-caption span + span::before{content:"— "; color:var(--line-strong);}
.svc-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(16px, 2vw, 28px);}
.svc-card{border-top:1px solid var(--line); padding:36px 0 12px; display:flex; flex-direction:column; gap:14px;}
.svc-card .value-num{padding-top:0;}
.svc-card h3{font-size:clamp(26px, 2.4vw, 36px); letter-spacing:-.035em;}
.svc-card ul{display:flex; flex-direction:column; gap:12px; margin-top:6px;}
.svc-card li{display:flex; gap:12px; color:var(--muted); font-size:15px; line-height:1.5;}
.svc-card li::before{content:""; width:10px; height:1px; background:var(--accent); flex:none; margin-top:11px;}
.svc-others{padding-top:0;}
.svc-others .label{margin-bottom:24px;}
.svc-others .index-num{font-size:11px; color:var(--accent); text-transform:uppercase; letter-spacing:.08em;}
.svc-others .index-row{grid-template-columns:90px 1fr auto 40px;}

@media (max-width:1080px){ .footer-cols-4{grid-template-columns:repeat(2, auto); row-gap:36px;} }
@media (max-width:900px){
  .svc-grid{grid-template-columns:1fr;}
  .svc-others .index-row{grid-template-columns:70px 1fr 28px;}
}
@media (max-width:640px){
  .footer-cols-4{grid-template-columns:1fr 1fr;}
  .footer-cols-4 > div:first-child{grid-column:auto;}
  .svc-caption{gap:14px; flex-wrap:wrap;}
}
.is-loaded .intro{pointer-events:none;}

/* =========================================================
   Mobile polish – the phone version is designed, not just shrunk
   ========================================================= */
html{-webkit-tap-highlight-color:transparent;}
body{text-size-adjust:100%;}
img{height:auto;}
@media (hover:none){ .grain{animation:none;} }

@media (max-width:900px){
  /* full-screen menu */
  .mobile-menu{position:fixed; left:0; right:0; top:0; height:100vh; height:100svh; max-height:none !important; z-index:-1;
    background:var(--ink); padding:110px var(--gutter) calc(32px + env(safe-area-inset-bottom)) !important;
    display:flex; flex-direction:column; justify-content:flex-end; gap:0;
    opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .5s var(--ease), transform .7s var(--ease), visibility 0s linear .5s;}
  header.nav-open .mobile-menu{opacity:1; visibility:visible; transform:none; transition:opacity .5s var(--ease), transform .7s var(--ease);}
  header.nav-open{background:transparent !important; border-bottom-color:transparent !important; -webkit-backdrop-filter:none; backdrop-filter:none;}
  .mobile-menu a{font-size:clamp(34px, 10vw, 48px); letter-spacing:-.045em; line-height:1.1; padding:12px 0; border-bottom:1px solid var(--line);
    opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .8s var(--ease);}
  header.nav-open .mobile-menu a{opacity:1; transform:none;}
  header.nav-open .mobile-menu a:nth-child(2){transition-delay:.04s;} header.nav-open .mobile-menu a:nth-child(3){transition-delay:.08s;}
  header.nav-open .mobile-menu a:nth-child(4){transition-delay:.12s;} header.nav-open .mobile-menu a:nth-child(5){transition-delay:.16s;}
  header.nav-open .mobile-menu a:nth-child(6){transition-delay:.2s;}
  .mobile-menu .accent-link{border:0; margin-top:18px; font-family:var(--serif); font-style:italic; letter-spacing:-.02em;}
  .mobile-menu a.is-current{color:var(--accent);}
  .navbar{position:relative; z-index:2;}
  .menu-toggle{width:46px; height:46px;}
  .menu-toggle span{left:14px; right:14px; top:22px;}
}

@media (max-width:640px){
  :root{--gutter:20px;}
  body{font-size:16px;}

  .services, .process, .pricing, .team, .faq, .contact, .work, .values{padding:84px 0;}
  .statement{padding:96px 0;}
  .section-head{margin-bottom:44px; gap:16px;}
  .section-head h2, .process-head h2, .faq h2{font-size:clamp(40px, 12vw, 54px);}
  .section-note{font-size:15.5px;}

  /* hero */
  .hero{padding-top:96px; min-height:auto;}
  .hero-title{font-size:clamp(40px, 11.6vw, 56px); line-height:.98; margin-top:22px;}
  .hero-lede{font-size:16.5px; margin-top:24px;}
  .hero-actions{margin-top:30px; flex-direction:column; align-items:stretch; gap:18px;}
  .hero-actions .btn-solid, .page-actions .btn-solid{justify-content:center; padding:18px 24px;}
  .hero-actions .btn-link{align-self:center;}
  .hero-visual{width:100%; max-width:none; justify-self:stretch; margin-top:40px;}
  .hero-img{aspect-ratio:4/5; max-height:72vh;}
  .viewfinder{inset:-8px;}
  .hero-visual figcaption{margin-top:18px;}
  .hero-meta{margin-top:40px; grid-template-columns:1fr 1fr;}
  .hero-meta > div{padding:18px 0 24px;}

  .marquee{padding:18px 0;}
  .marquee span{font-size:40px;}
  .statement-text{font-size:clamp(27px, 7.6vw, 34px); line-height:1.15;}

  /* services */
  .service{padding:34px 0; gap:10px;}
  .service-name{font-size:clamp(52px, 15vw, 68px);}
  .service-claim{font-size:18px;}
  .chips li{font-size:11px; padding:7px 12px;}

  /* cinema */
  .cinema{height:125vh;}
  .cinema-copy{bottom:8vh;}
  .cinema-quote{font-size:clamp(30px, 8.4vw, 40px);}

  /* projects */
  .cases{gap:72px;}
  .case h3{font-size:clamp(34px, 9.6vw, 44px);}
  .case-links{gap:20px;}
  .work-cta{grid-template-columns:1fr auto; margin-top:72px;}
  .work-cta-title{font-size:clamp(40px, 11vw, 56px);}

  /* process */
  .step{grid-template-columns:32px 1fr; gap:18px; padding-bottom:52px;}
  .step h3{font-size:26px;}

  /* pricing: filter scrolls sideways instead of wrapping */
  .filters{display:flex; flex-wrap:nowrap; max-width:100%; overflow-x:auto; scrollbar-width:none; border-radius:100px;}
  .filters::-webkit-scrollbar{display:none;}
  .filter{white-space:nowrap; padding:10px 16px;}
  .ticket{padding:26px 22px 28px;}
  .ticket-top{margin-bottom:28px;}
  .price-notes{margin-top:40px;}

  /* team: swipeable portraits */
  .team-grid{display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 calc(var(--gutter) * -1); padding:0 var(--gutter) 6px; scrollbar-width:none;}
  .team-grid::-webkit-scrollbar{display:none;}
  .team-grid > .person{flex:0 0 78%; scroll-snap-align:center;}

  /* faq */
  .faq summary{padding:22px 0; font-size:18px; min-height:44px;}

  /* contact */
  .contact-title{font-size:clamp(56px, 17vw, 76px);}
  .contact-lede{font-size:16px;}
  form{gap:30px;}
  .field input, .field textarea, .field label{font-size:17px;}
  .check-chip span{padding:12px 18px; font-size:14.5px;}
  .form-foot{flex-direction:column; align-items:stretch;}
  .form-foot .btn{justify-content:center; padding:18px 24px;}
  .contact-lines li{padding:16px 0;}

  /* subpages */
  .page-hero{padding:120px 0 56px;}
  .page-title{font-size:clamp(44px, 12.5vw, 60px);}
  .page-lede{font-size:16.5px; margin-top:24px;}
  .about-img-a{grid-column:1 / span 9;}
  .about-img-b{grid-column:6 / span 7; margin-top:-38%;}
  .member{padding:48px 0; gap:28px;}
  .member-media{max-width:none;}
  .member-name{font-size:clamp(40px, 11.5vw, 54px);}
  .member-bio{font-size:17px;}
  .index-name{font-size:clamp(26px, 7.4vw, 34px);}
  .svc-card h3{font-size:28px;}
  .legal-grid{padding-top:32px; gap:32px;}
  .legal-block{padding-bottom:32px; margin-bottom:32px;}
  .legal-block p, .legal-dl dd{font-size:15.5px;}

  /* footer */
  footer{padding-bottom:calc(28px + env(safe-area-inset-bottom));}
  .footer-top{gap:44px; padding-bottom:48px;}
  .footer-claim p, .footer-cta-title{font-size:clamp(30px, 8.6vw, 40px);}
  .footer-big{font-size:36vw;}
  .footer-row{flex-direction:column; align-items:flex-start; gap:10px;}
  .footer-cols li{font-size:15px;}
  .footer-cols a{display:inline-block; padding:3px 0;}
}

@media (max-width:380px){
  .hero-title{font-size:38px;}
  .mobile-menu a{font-size:32px;}
}

/* services: whole row is a clear, clickable card */
.service-link{cursor:pointer; grid-template-columns:80px minmax(0,1fr) minmax(0,1fr) 64px; align-items:center; transition:background .6s var(--ease);}
.service-link::after{content:""; position:absolute; inset:0 calc(var(--gutter) * -1); background:var(--ink-2); opacity:0; z-index:-1; transition:opacity .5s var(--ease);}
.service-link{isolation:isolate;}
@media (hover:hover){ .service-link:hover::after{opacity:1;} }
.service-name a::after{content:""; position:absolute; inset:0; z-index:1;}
.service-arrow{width:64px; height:64px; border-radius:50%; border:1px solid var(--line-strong); display:grid; place-items:center; justify-self:end;
  transition:background .5s var(--ease), border-color .5s var(--ease), transform .7s var(--ease);}
.service-arrow svg{width:20px; height:20px; fill:none; stroke:var(--paper); stroke-width:1.3;}
@media (hover:hover){ .service-link:hover .service-arrow{background:var(--accent); border-color:var(--accent); transform:rotate(45deg);} }
.service-cta{display:inline-flex; align-items:center; gap:10px; margin-top:24px; padding:11px 18px; border-radius:100px; border:1px solid var(--line-strong);
  font-size:13.5px; color:var(--paper); transition:background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease);}
.service-cta svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.5; transition:transform .5s var(--ease);}
@media (hover:hover){ .service-link:hover .service-cta{background:var(--paper); color:var(--ink); border-color:var(--paper);} .service-link:hover .service-cta svg{transform:translateX(4px);} }
@media (hover:none){ .service:hover .service-name{transform:none; color:inherit;} .service:hover::before{transform:scaleX(0);} }
.service-link .service-num{padding-top:0;}
.service-link .service-name a{display:inline-flex; align-items:baseline; gap:.15em;}
@media (max-width:1080px){ .service-link{grid-template-columns:56px 1fr 56px;} .service-link .service-body{grid-column:2 / 4; grid-row:2;} .service-arrow{width:52px;height:52px; grid-column:3; grid-row:1;} }
@media (max-width:640px){
  .service-link{grid-template-columns:1fr 52px; row-gap:14px;}
  .service-link .service-num{grid-column:1; grid-row:1;}
  .service-link .service-name{grid-column:1; grid-row:2;}
  .service-arrow{grid-column:2; grid-row:1 / 3; align-self:center; background:var(--paper); border-color:var(--paper);}
  .service-arrow svg{stroke:var(--ink);}
  .service-link .service-body{grid-column:1 / -1; grid-row:3;}
  .service-cta{width:100%; justify-content:center; padding:15px 18px; background:rgba(238,234,226,.06);}
}

/* tighter rhythm between statement and services */
.statement{padding:clamp(96px, 12vw, 160px) 0 clamp(40px, 5vw, 64px);}
.statement + .services{padding-top:clamp(40px, 5vw, 64px);}
@media (max-width:640px){ .statement{padding:80px 0 32px;} .statement + .services{padding-top:32px;} }

/* =========================================================
   Background video heros
   ========================================================= */
.hero-has-video{position:relative; overflow:hidden; isolation:isolate;}
.hero-bg{position:absolute; inset:0; z-index:-1; background:var(--ink);}
.hero-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(100%) contrast(1.05) brightness(.62); transform:scale(1.04);}
.js .hero-video{opacity:0; transition:opacity 1.6s var(--ease), transform 2.4s var(--ease);}
.js.is-loaded .hero-video{opacity:1; transform:scale(1);}
.hero-shade{position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(5,5,5,.88) 0%, rgba(5,5,5,.55) 45%, rgba(5,5,5,.15) 100%),
             linear-gradient(180deg, rgba(5,5,5,.55) 0%, rgba(5,5,5,0) 30%, rgba(5,5,5,0) 60%, var(--ink) 100%);}
.hero-has-video .hero-grid{grid-template-columns:minmax(0,1fr);}
.hero-has-video .hero-copy{max-width:980px;}
.hero-has-video .hero-title{font-size:clamp(46px, 7.2vw, 118px);}
.hero-has-video .hero-lede{color:var(--paper);}
.hero-has-video .hero-meta::before{background:rgba(238,234,226,.18);}
.viewfinder-full{position:absolute; inset:clamp(76px, 10vh, 100px) var(--gutter) clamp(20px, 3vh, 32px); pointer-events:none; z-index:0;}
.viewfinder-full i{position:absolute; width:26px; height:26px; border:0 solid rgba(238,234,226,.55);}
.viewfinder-full i:nth-child(1){top:0; left:0; border-top-width:1px; border-left-width:1px;}
.viewfinder-full i:nth-child(2){top:0; right:0; border-top-width:1px; border-right-width:1px;}
.viewfinder-full i:nth-child(3){bottom:0; left:0; border-bottom-width:1px; border-left-width:1px;}
.viewfinder-full i:nth-child(4){bottom:0; right:0; border-bottom-width:1px; border-right-width:1px;}
.hero-tc{flex-direction:column; gap:4px; align-items:flex-end; text-align:right;}
.hero-tc strong{font-family:var(--mono); font-size:15px; color:var(--paper); letter-spacing:.04em;}
.hero-has-video .hero-meta{grid-template-columns:repeat(3, 1fr) auto auto; column-gap:32px;}

/* subpage hero with video */
.page-hero.hero-has-video{min-height:88vh; min-height:88svh; display:flex; align-items:flex-end; padding-bottom:clamp(56px, 8vw, 110px);}
.page-hero.hero-has-video .wrap{width:100%;}
.page-hero.hero-has-video .page-lede{color:var(--paper);}

@media (max-width:900px){
  .hero-shade{background:linear-gradient(180deg, rgba(5,5,5,.6) 0%, rgba(5,5,5,.35) 35%, rgba(5,5,5,.75) 75%, var(--ink) 100%);}
  .hero-has-video{min-height:100svh;}
  .hero-has-video .hero-meta{grid-template-columns:1fr 1fr;}
  .hero-tc{display:none !important;}
  .viewfinder-full{inset:84px 14px 14px;}
}
@media (prefers-reduced-motion:reduce){ .hero-video{transform:none;} }