/* Autobahn — website v4 (reel). Values from the Autobahn Design System tokens. */
:root{
  --burgundy-600:#6e1423;--burgundy-400:#a6243a;--burgundy-300:#c13a4e;
  --black-1:#0b0809;--black-2:#141011;--bone:#efe9e2;--grey-warm:#a79c96;--grey-dim:#6b605c;
  --text-primary:var(--bone);--text-secondary:var(--grey-warm);--text-muted:var(--grey-dim);--text-accent:var(--burgundy-300);
  --surface-burgundy:var(--burgundy-600);--border-subtle:rgba(239,233,226,0.14);
  --font-display:"Pirata One","UnifrakturMaguntia",serif;
  --font-body:"Archivo","Helvetica Neue",Arial,sans-serif;
  --font-wide:"Archivo","Helvetica Neue",Arial,sans-serif;
  --stretch-wide:125%;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;
  --track-wide:0.22em;
  --transition-fast:120ms ease-out;
  --nav-h:56px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--nav-h)}
body{margin:0;background:var(--black-1);color:var(--text-primary);font-family:var(--font-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
::selection{background:var(--burgundy-600);color:var(--bone)}
a{color:inherit;text-decoration:none;transition:color var(--transition-fast),background var(--transition-fast),opacity var(--transition-fast)}
img{display:block;max-width:100%}

/* shared */
.link-mono{font-family:var(--font-mono);font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:var(--bone);opacity:0.8}
.link-mono:hover{opacity:1;color:var(--burgundy-300)}
.btn{font-family:var(--font-mono);font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:0.18em;color:var(--black-1);background:var(--bone);padding:6px 14px}
.btn:hover{background:var(--burgundy-400);color:var(--bone)}
.btn--lg{padding:10px 24px}
.eyebrow{margin:0 0 14px;font-family:var(--font-mono);font-size:11px;letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--text-accent)}
.eyebrow--loud{margin:0;letter-spacing:0.24em}

/* nav */
.nav{position:sticky;top:0;z-index:50;height:var(--nav-h);padding:0 24px;display:flex;align-items:center;justify-content:space-between;background:var(--black-1);border-bottom:1px solid var(--bone)}
.nav__logo img{height:18px;width:auto}
.nav__links{display:flex;gap:32px;align-items:center}
.nav__links a:not(.btn){font-family:var(--font-mono);font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:0.18em;color:var(--text-primary)}
.nav__links a:not(.btn):hover{color:var(--burgundy-300)}

/* hero */
.hero{position:relative;height:calc(100svh - var(--nav-h));min-height:420px;overflow:hidden;background:var(--black-1)}
.hero__reel{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100vw;height:56.25vw;min-height:100%;min-width:177.78vh;border:0;pointer-events:none}
.hero__shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,rgba(11,8,9,0.5),rgba(11,8,9,0.05) 38%,rgba(11,8,9,0.85))}
.hero__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:48px 24px;text-align:center;pointer-events:none}
.hero__logo{width:min(44vw,470px);height:auto}
.hero__tag{margin:-4px 0 0;font-family:var(--font-mono);font-size:12px;letter-spacing:0.24em;color:var(--bone);opacity:0.9}
.hero__social{display:flex;gap:20px;margin-top:2px;pointer-events:auto}
.hero__reel-link{position:absolute;left:24px;bottom:24px;cursor:pointer}
.hero__cta{position:absolute;right:24px;bottom:24px}

/* work */
.work{padding-top:72px}
.work__head{padding:0 24px 18px;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;border-bottom:1px solid var(--bone)}
.work__head h2{margin:0;font-family:var(--font-display);font-size:clamp(38px,4.8vw,70px);font-weight:400;text-transform:lowercase;letter-spacing:0;line-height:0.88}
.count{font-family:var(--font-mono);font-size:11px;letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--text-muted)}
.grid{display:grid;gap:28px 20px;padding:28px 24px 64px}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr);padding-bottom:0}
.film{display:block;color:var(--text-primary);cursor:pointer}
.film__frame{position:relative;aspect-ratio:16/9;background:var(--black-2);overflow:hidden}
.film__frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;color:transparent}
.film__meta{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:10px 2px 0}
.film__title{font-family:var(--font-wide);font-stretch:var(--stretch-wide);font-size:clamp(14px,1.2vw,19px);font-weight:600;text-transform:uppercase;letter-spacing:0.01em;transition:color var(--transition-fast)}
.film:hover .film__title{color:var(--burgundy-300)}
.film__client{font-family:var(--font-mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-secondary);white-space:nowrap}

/* info */
.info{margin-top:64px;border-top:1px solid var(--bone);display:grid;grid-template-columns:1fr 1fr}
.info__col{padding:56px 48px 56px 24px}
.info__col:first-child{border-right:1px solid var(--border-subtle)}
.info__col+.info__col{padding:56px 24px 56px 48px}
.info__lede{margin:0;font-size:16px;line-height:1.6}
.info__more{margin:16px 0 0;font-size:14px;line-height:1.6;color:var(--text-secondary)}
.info__clients{margin:0;font-family:var(--font-wide);font-stretch:var(--stretch-wide);font-size:clamp(14px,1.3vw,18px);font-weight:600;text-transform:uppercase;letter-spacing:0.03em;line-height:1.6}

/* footer */
.footer{border-top:1px solid var(--bone);background:var(--black-1)}
.footer__grid{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;padding:56px 24px 48px;align-items:start}
.footer__contact{display:grid;gap:14px;align-content:start}
.email{font-family:var(--font-wide);font-stretch:var(--stretch-wide);font-size:clamp(16px,2vw,26px);font-weight:600;text-transform:uppercase;letter-spacing:0.01em;line-height:1.15;overflow-wrap:anywhere}
.email:hover{color:var(--burgundy-300)}
.awards{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-family:var(--font-mono);font-size:12px;line-height:1.5;color:var(--text-secondary)}
.awards b{font-weight:400;color:var(--text-primary)}
.awards__strong{color:var(--text-primary)}
.footer__bar{background:var(--surface-burgundy);padding:14px 24px;display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;font-family:var(--font-mono);font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:var(--bone)}

/* player */
.player{position:fixed;inset:0;z-index:200;background:rgba(11,8,9,0.97);display:flex;align-items:center;justify-content:center;padding:32px 24px}
.player[hidden]{display:none}
.player__box{width:min(1200px,100%,calc((100svh - 170px) * 16 / 9))}
.player__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:0 0 10px;border-bottom:1px solid var(--bone)}
.player__head h3{margin:0;font-family:var(--font-wide);font-stretch:var(--stretch-wide);font-size:clamp(17px,1.9vw,28px);font-weight:600;text-transform:uppercase;letter-spacing:0.01em}
.player__client{font-family:var(--font-mono);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--text-secondary)}
.player__video{aspect-ratio:16/9;background:var(--black-2)}
.player__video iframe{width:100%;height:100%;border:0;display:block}
.player__foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0 0}
.player__vimeo{color:var(--text-secondary);opacity:1}
.player__close{background:none;border:0;cursor:pointer;padding:0;opacity:1}

/* smaller screens */
@media (max-width:960px){
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:1fr;gap:40px}
}
@media (max-width:640px){
  .nav{padding:0 16px}
  .nav__links{gap:18px}
  .hero__logo{width:min(72vw,470px)}
  .hero__reel-link{left:16px;bottom:72px}
  .hero__cta{left:16px;right:16px;bottom:16px;text-align:center}
  .work{padding-top:48px}
  .work__head{padding:0 16px 14px}
  .grid,.grid--3,.grid--2{grid-template-columns:1fr;padding-left:16px;padding-right:16px}
  .info{grid-template-columns:1fr}
  .info__col,.info__col+.info__col{padding:40px 16px}
  .info__col:first-child{border-right:0;border-bottom:1px solid var(--border-subtle)}
  .footer__grid{padding:40px 16px}
  .footer__bar{padding:14px 16px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}