@font-face{font-family:"Outfit"; src:url("/assets/fonts/outfit-latin-wght.woff2") format("woff2"); font-weight:100 900; font-style:normal; font-display:swap}
@font-face{font-family:"JetBrains Mono"; src:url("/assets/fonts/jetbrains-mono-latin-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap}

:root{
  --cream:#F5F5F0; --cream-2:#EDEDE5; --ink:#111110; --ink-2:#3B3B37; --ink-3:#6E6E66;
  --gold:#B78A1F; --line:#D9D8CE; --paper:#FBFBF7;
  --display:"Outfit", "Helvetica Neue", Arial, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --wrap:1160px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{margin:0}
[id]{scroll-margin-top:80px}
.skip{position:absolute; left:-9999px; top:8px; background:var(--ink); color:var(--cream); padding:8px 14px; z-index:10}
.skip:focus{left:16px}
.btn[disabled]{opacity:.6; cursor:default}
.formmsg.err{border-left-color:#9B2C1F}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.formfoot small a{color:var(--ink-2)}

/* LEGAL PAGES */
.doc{padding-block:clamp(48px,7vw,88px)}
.doc .wrap{max-width:780px}
.doc h1{font-size:clamp(34px,5vw,52px); font-weight:700; text-transform:uppercase; letter-spacing:.01em; line-height:1.05}
.doc .updated{margin-top:14px; color:var(--ink-3); font-size:14px}
.doc h2{margin-top:44px; padding-top:18px; border-top:1px solid var(--gold); font-size:15px; font-weight:600; letter-spacing:.14em; text-transform:uppercase}
.doc p, .doc ul{margin:14px 0 0; color:var(--ink-2)}
.doc ul{padding-left:20px}
.doc li{margin-top:6px}
.doc strong{color:var(--ink); font-weight:600}
.doc a{color:var(--ink)}
.doc address{font-style:normal; margin-top:14px; color:var(--ink-2)}

/* 404 */
.nf{padding-block:clamp(80px,14vw,160px)}
.nf h1{font-size:clamp(40px,7vw,80px); font-weight:600; letter-spacing:-.03em; line-height:1}
.nf p{margin-top:20px}

body{background:var(--cream); color:var(--ink); font-family:var(--display); font-size:17px; line-height:1.6; font-weight:400; -webkit-font-smoothing:antialiased}
a{color:inherit}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{outline:2px solid var(--gold); outline-offset:3px}
.wrap{max-width:var(--wrap); margin:0 auto; padding-inline:24px}
@media (max-width:600px){ .wrap{padding-inline:16px} body{font-size:16px} }


header.top{position:sticky; top:env(safe-area-inset-top,0px); z-index:5; background:color-mix(in srgb, var(--cream) 92%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
header.top .wrap{display:flex; align-items:center; justify-content:space-between; gap:20px; padding-block:14px}
.mark{display:inline-flex; color:var(--ink); text-decoration:none; line-height:0}
.logo{display:block; height:26px; width:auto; aspect-ratio:759.4/203.08; max-width:100%}
footer .mark .logo{height:30px}
nav.main{display:flex; gap:26px; align-items:center; font-size:15px}
nav.main a{text-decoration:none; color:var(--ink-2)}
nav.main a:hover{color:var(--ink)}
.login{border:1px solid var(--ink); padding:7px 16px; border-radius:2px; color:var(--ink)!important; font-weight:500}
.login:hover{background:var(--ink); color:var(--cream)!important}
@media (max-width:760px){ nav.main a:not(.login){display:none} }

.eyebrow{font-size:12px; letter-spacing:.18em; text-transform:uppercase; font-weight:500; color:var(--ink-3)}
h1,h2,h3{margin:0; text-wrap:balance}
h2.sec{font-size:clamp(30px,4.2vw,46px); font-weight:700; letter-spacing:.01em; text-transform:uppercase; line-height:1.05}
.rule{border:0; border-top:1px solid var(--gold); margin:0}
section{padding-block:clamp(64px,9vw,112px)}
.lede{font-size:clamp(18px,1.9vw,21px); color:var(--ink-2); max-width:36em; font-weight:300}
p{margin:0}

/* HERO */
.hero{padding-block:clamp(48px,7vw,96px) clamp(56px,8vw,104px)}
.hero .grid{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(32px,5vw,72px); align-items:center}
.hero h1{font-size:clamp(44px,7.2vw,92px); line-height:.98; font-weight:600; letter-spacing:-.035em}
.hero h1 em{font-style:normal; color:var(--ink-3); font-weight:300}
.hero .lede{margin-top:28px}
.cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:36px}
.btn{display:inline-flex; align-items:center; gap:10px; padding:14px 22px; font:500 15px/1 var(--display); text-decoration:none; border-radius:2px; border:1px solid var(--ink); cursor:pointer}
.btn.primary{background:var(--ink); color:var(--cream)}
.btn.primary:hover{background:#2a2a27}
.btn.ghost{background:transparent; color:var(--ink)}
.btn.ghost:hover{background:var(--cream-2)}
@media (max-width:860px){ .hero .grid{grid-template-columns:1fr} }

/* The record card */
.record{background:var(--paper); border:1px solid var(--line); border-top:2px solid var(--gold); padding:22px 24px 20px; font-size:14px; box-shadow:0 1px 0 var(--line), 0 18px 40px -28px rgba(17,17,16,.35)}
.record .head{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:14px}
.record .head .id{font-family:var(--mono); font-size:12px; color:var(--ink-3)}
.record dl{display:grid; grid-template-columns:auto 1fr; gap:0; margin:0}
.record dt,.record dd{padding:9px 0; border-top:1px solid var(--line); margin:0}
.record dt{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); padding-right:20px; white-space:nowrap}
.record dd{color:var(--ink)}
.record .state{display:inline-flex; align-items:center; gap:7px; font-weight:500}
.record .state::before{content:""; width:7px; height:7px; border-radius:50%; background:#2F7A4A}
.record .foot{margin-top:14px; padding-top:12px; border-top:1px solid var(--gold); font-family:var(--mono); font-size:11.5px; color:var(--ink-3); display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap}
.caption{margin-top:10px; font-size:12px; color:var(--ink-3)}

.strap{border-block:1px solid var(--line); background:var(--cream-2)}
.strap .wrap{padding-block:18px; display:flex; flex-wrap:wrap; gap:10px 28px; justify-content:space-between; font-size:12px; letter-spacing:.18em; text-transform:uppercase; font-weight:500; color:var(--ink-2)}

/* PROBLEM */
.two{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(32px,6vw,88px); align-items:start}
@media (max-width:860px){ .two{grid-template-columns:1fr} }
.two .copy{display:flex; flex-direction:column; gap:18px; margin-top:24px}
.questions{list-style:none; margin:0; padding:0; border-top:1px solid var(--ink)}
.questions li{display:grid; grid-template-columns:150px 1fr; gap:20px; padding:20px 0; border-bottom:1px solid var(--line); align-items:baseline}
.questions .who{font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); font-weight:500}
.questions .q{font-size:clamp(20px,2.3vw,26px); font-weight:500; line-height:1.2; letter-spacing:-.01em}
@media (max-width:520px){ .questions li{grid-template-columns:1fr; gap:4px} }

/* HOW */
.how{background:var(--ink); color:var(--cream)}
.how .eyebrow{color:#A9A89E}
.how .lede{color:#CFCEC4}
.steps{list-style:none; margin:48px 0 0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:0; border-top:1px solid var(--gold)}
.steps li{padding:22px 20px 0 0; display:flex; flex-direction:column; gap:10px}
.steps .n{font-family:var(--mono); font-size:12px; color:#E8C766}
.steps h3{font-size:19px; font-weight:600; line-height:1.2}
.steps p{font-size:15px; color:#CFCEC4; line-height:1.55}
@media (max-width:980px){ .steps{grid-template-columns:repeat(2,1fr); row-gap:28px} }
@media (max-width:520px){ .steps{grid-template-columns:1fr} }
.indep{margin-top:56px; padding-top:28px; border-top:1px solid #3a3a35; display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:baseline}
.indep .tag{font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:#E8C766; font-weight:500}
.indep p{font-size:clamp(19px,2vw,23px); font-weight:300; max-width:40em}
@media (max-width:600px){ .indep{grid-template-columns:1fr; gap:8px} }

/* AUDIENCES */
.aud{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,40px); margin-top:48px}
@media (max-width:900px){ .aud{grid-template-columns:1fr} }
.aud article{border-top:1px solid var(--ink); padding-top:20px; display:flex; flex-direction:column; gap:14px}
.aud h3{font-size:22px; font-weight:600}
.aud ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px; color:var(--ink-2); font-size:16px}
.aud li{padding-left:18px; position:relative}
.aud li::before{content:""; position:absolute; left:0; top:.72em; width:9px; border-top:1px solid var(--gold)}

/* FILMS */
.films{background:var(--cream-2); border-block:1px solid var(--line)}
.filmgrid{display:grid; grid-template-columns:1.35fr 1fr; gap:clamp(24px,3vw,40px); margin-top:44px; align-items:start}
@media (max-width:900px){ .filmgrid{grid-template-columns:1fr} }
.film{display:flex; flex-direction:column; gap:14px}
.player{position:relative; aspect-ratio:16/9; max-width:100%; width:100%; background:var(--cream); border:1px solid var(--line); overflow:hidden}
.player iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.film h3{font-size:20px; font-weight:600}
.film p{color:var(--ink-2); font-size:15.5px}
.film .meta{font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3)}

/* ABOUT */
.people{margin-top:56px; display:flex; flex-direction:column; gap:48px}
.group h3{font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); font-weight:500; padding-bottom:12px; border-bottom:1px solid var(--gold)}
.roster{display:grid; grid-template-columns:repeat(4,1fr); gap:0 28px}
.roster.three{grid-template-columns:repeat(3,1fr)}
.roster.two{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){ .roster, .roster.three, .roster.two{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .roster, .roster.three, .roster.two{grid-template-columns:1fr} }
.person{padding:18px 0; border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:4px}
.person .nm{font-size:19px; font-weight:600; letter-spacing:-.01em}
.person .rl{font-size:14.5px; color:var(--ink)}
.person .bio{font-size:14.5px; color:var(--ink-3); line-height:1.5}

/* CONTACT */
.contact .two{align-items:start}
form.demo{display:grid; grid-template-columns:1fr 1fr; gap:18px 20px; background:var(--paper); border:1px solid var(--line); border-top:2px solid var(--gold); padding:clamp(20px,3vw,32px)}
form.demo .full{grid-column:1/-1}
@media (max-width:600px){ form.demo{grid-template-columns:1fr} }
label{display:flex; flex-direction:column; gap:7px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); font-weight:500}
input,select,textarea{font:400 16px/1.4 var(--display); color:var(--ink); background:var(--cream); border:1px solid var(--line); border-radius:2px; padding:12px 13px; width:100%; letter-spacing:0; text-transform:none}
input:focus,select:focus,textarea:focus{border-color:var(--ink)}
textarea{min-height:120px; resize:vertical}
.formfoot{display:flex; gap:16px; align-items:center; flex-wrap:wrap; justify-content:space-between}
.formfoot small{font-size:13px; color:var(--ink-3); max-width:30em}
.formmsg{font-size:14px; color:var(--ink-2); border-left:2px solid var(--gold); padding-left:12px}
.email{font-size:clamp(22px,2.6vw,30px); font-weight:500; letter-spacing:-.01em; user-select:all}

footer{background:var(--ink); color:#CFCEC4; font-size:14px}
footer .wrap{padding-block:48px 36px; display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:32px}
footer .sign{color:var(--cream); font-size:clamp(26px,3vw,34px); font-weight:300; letter-spacing:-.02em; line-height:1.1}
footer .mark{color:var(--cream)}
footer nav{display:flex; flex-direction:column; gap:8px}
footer a{text-decoration:none}
footer a:hover{color:var(--cream)}
footer .legal{grid-column:1/-1; border-top:1px solid #3a3a35; padding-top:20px; font-size:12.5px; color:#8f8e86; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px}
@media (max-width:760px){ footer .wrap{grid-template-columns:1fr} }

@media (prefers-reduced-motion:no-preference){
  .hero h1, .hero .lede, .hero .cta, .record{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
  .hero .lede{animation-delay:.08s} .hero .cta{animation-delay:.14s} .record{animation-delay:.2s}
  @keyframes rise{from{transform:translateY(10px)} to{transform:none}}
}
@media (max-width:600px){ .strap .wrap{display:grid; grid-template-columns:1fr 1fr; gap:10px 16px} }