/* ============================================================================
   500x — shared shell for the non-film pages
   Contact, AI Usage and anything else that is a page rather than a movement.
   The film's own chrome lives in film.css; this is the quiet half of the site.
   ========================================================================== */

:root{
  --bg:#08080a; --ink:#f4f4f0; --ink-soft:#a8a8a4; --ink-faint:#6b6b68;
  --line:#1c1c1f; --line-soft:#2a2a2e; --bg-card:#101013; --bg-elev:#16161a;
  --grad:linear-gradient(135deg,#7a3fa8 0%,#2a5cdb 50%,#d94a5e 100%);
  --display:'Space Grotesk','Inter',-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --max:1180px; --gutter:32px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Inter',-apple-system,sans-serif;background:var(--bg);color:var(--ink);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
.container{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}

/* ---- nav ---------------------------------------------------------------- */
nav.top{
  position:sticky;top:0;z-index:80;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px var(--gutter);
  background:rgba(8,8,10,.86);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
nav.top .brand img{height:24px;width:auto;display:block}
nav.top ul{display:flex;gap:34px;list-style:none;align-items:center}
nav.top a.nav-link{
  font-family:var(--mono);font-size:11px;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--ink-faint);transition:color .2s;
}
nav.top a.nav-link:hover,nav.top a.nav-link[aria-current="page"]{color:var(--ink)}
@media(max-width:800px){ nav.top ul{gap:18px} nav.top a.nav-link{font-size:10px;letter-spacing:1.4px} }

/* ---- page head ---------------------------------------------------------- */
.page{padding:14vh 0 12vh}
.page-eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:3px;text-transform:uppercase;
  color:var(--ink-faint);display:block;margin-bottom:30px;
}
.page-title{
  font-family:var(--display);font-weight:300;letter-spacing:-.038em;line-height:1.02;
  font-size:clamp(38px,5.6vw,84px);max-width:18ch;
}
.page-title .x{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.page-lede{margin-top:28px;font-size:clamp(16px,1.4vw,20px);color:var(--ink-soft);max-width:58ch;font-weight:300}

/* ---- contact ------------------------------------------------------------ */
.contact-grid{
  display:grid;grid-template-columns:1.45fr 1fr;gap:64px;
  margin-top:76px;align-items:start;
}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr;gap:44px}}
.contact-form{display:flex;flex-direction:column;gap:20px}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:600px){.cf-row{grid-template-columns:1fr}}
.cf-field{display:flex;flex-direction:column;gap:8px}
.cf-field>span{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);
}
.cf-field>span em{font-style:normal;opacity:.7;text-transform:none;letter-spacing:.06em}
.cf-field input,.cf-field textarea{
  font-family:'Inter',sans-serif;font-size:15px;color:var(--ink);
  background:var(--bg-card);border:1px solid var(--line-soft);border-radius:10px;
  padding:14px 16px;outline:none;resize:vertical;
  transition:border-color .2s,background .2s;
}
.cf-field input:focus,.cf-field textarea:focus{border-color:#4a4a52;background:var(--bg-elev)}

/* Native select, restyled. The wrapper carries the chevron because a <select>
   cannot host a pseudo-element; appearance:none removes the platform arrow. */
.cf-select{position:relative;display:block}
.cf-select::after{
  content:'';position:absolute;right:18px;top:50%;width:8px;height:8px;
  margin-top:-6px;pointer-events:none;
  border-right:1.5px solid var(--ink-faint);border-bottom:1.5px solid var(--ink-faint);
  transform:rotate(45deg);transition:border-color .2s;
}
.cf-select:focus-within::after{border-color:var(--ink-soft)}
.cf-field select{
  -webkit-appearance:none;appearance:none;width:100%;
  font-family:'Inter',sans-serif;font-size:15px;color:var(--ink);
  background:var(--bg-card);border:1px solid var(--line-soft);border-radius:10px;
  padding:14px 44px 14px 16px;outline:none;cursor:pointer;
  transition:border-color .2s,background .2s;
}
.cf-field select:focus{border-color:#4a4a52;background:var(--bg-elev)}
/* The dropdown list itself is painted by the OS; these two keep it from
   rendering as black-on-black where the platform honours them. */
.cf-field select option,.cf-field select optgroup{background:#16161a;color:var(--ink)}
.cf-field select:invalid,.cf-field select option[value=""]{color:var(--ink-faint)}

.cf-field.invalid input,.cf-field.invalid select,.cf-field.invalid textarea{border-color:#d94a5e}
/* Selector must outrank `.cf-field>span`, which would otherwise impose the
   label's uppercase mono and its faint grey on the error text. */
.cf-field>span.cf-error{
  font-family:'Inter',sans-serif;font-size:12.5px;font-weight:400;
  letter-spacing:0;text-transform:none;color:#e8798a;line-height:1.5;
}
.cf-field>span.cf-error:empty{display:none}

/* Honeypot. Off-screen rather than display:none, which some bots skip. */
.cf-trap-wrap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.cf-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:6px}
.cf-note{font-size:13px;color:var(--ink-soft)}
.cf-note a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.cf-status{font-size:14px;line-height:1.6;color:var(--ink-soft)}
.cf-status:empty{display:none}
.cf-status.ok{color:#8fd6a6}
.cf-status.bad{color:#e8798a}
.btn[disabled]{opacity:.55;cursor:progress}
.contact-aside{display:flex;flex-direction:column;gap:30px;padding-top:6px}
.ca-block h5{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:8px;font-weight:500;
}
.ca-block p{font-size:15px;color:var(--ink-soft);line-height:1.65}
.ca-block a{color:var(--ink)}

.btn{
  display:inline-flex;align-items:center;gap:11px;padding:15px 26px;border-radius:999px;
  font-family:var(--mono);font-size:11px;letter-spacing:2.2px;text-transform:uppercase;
  border:1px solid var(--line-soft);background:transparent;color:var(--ink);cursor:pointer;
  transition:border-color .2s,background .2s,transform .2s;
}
.btn:hover{border-color:#4a4a52;transform:translateX(3px)}
.btn.primary{background:var(--ink);color:#0a0a0a;border-color:var(--ink)}
.btn.primary:hover{background:#fff;border-color:#fff}

/* ---- legal / long-form -------------------------------------------------- */
.legal-layout{display:grid;grid-template-columns:230px 1fr;gap:72px;margin-top:72px;align-items:start}
@media(max-width:900px){.legal-layout{grid-template-columns:1fr;gap:40px}}
.legal-toc{position:sticky;top:110px}
@media(max-width:900px){.legal-toc{position:static}}
.legal-toc h4{
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:16px;font-weight:500;
}
.legal-toc ol{list-style:none;counter-reset:toc;display:flex;flex-direction:column;gap:9px}
.legal-toc li{counter-increment:toc}
.legal-toc a{
  font-size:13px;color:var(--ink-soft);display:flex;gap:10px;transition:color .2s;line-height:1.4;
}
.legal-toc a::before{
  content:counter(toc,decimal-leading-zero);
  font-family:var(--mono);font-size:10px;color:var(--ink-faint);flex:0 0 auto;padding-top:2px;
}
.legal-toc a:hover{color:var(--ink)}
.legal-body{max-width:70ch}
.legal-body section{padding-bottom:52px;margin-bottom:52px;border-bottom:1px solid var(--line)}
.legal-body section:last-child{border-bottom:0}
.legal-body h2{
  font-family:var(--display);font-weight:500;font-size:clamp(21px,2.1vw,29px);
  letter-spacing:-.02em;margin-bottom:18px;
}
.legal-body h3{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-faint);margin:28px 0 10px;font-weight:500;
}
.legal-body p{color:var(--ink-soft);margin-bottom:16px}
.legal-body p strong{color:var(--ink);font-weight:500}
.legal-body ul{margin:0 0 16px 0;padding-left:20px;color:var(--ink-soft)}
.legal-body li{margin-bottom:9px}
.legal-body a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.legal-meta{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--ink-faint);
  margin-top:26px;
}

/* ---- footer ------------------------------------------------------------- */
footer{border-top:1px solid var(--line);padding:72px 0 40px;margin-top:8vh}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:44px}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
.footer-brand img{height:31px;width:auto;display:block}
.footer-brand .place{margin-top:16px;font-size:14px;color:var(--ink-soft);max-width:30ch}
.footer-brand .email{margin-top:14px;font-size:14px;font-weight:500}
.footer-col h5{
  font-family:var(--mono);font-size:11px;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:16px;font-weight:500;
}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.footer-col a{font-size:13px;color:var(--ink-soft);transition:color .2s}
.footer-col a:hover{color:var(--ink)}
.footer-bottom{
  margin-top:64px;padding-top:26px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-size:12px;color:var(--ink-faint);
}

@media (prefers-reduced-motion: reduce){
  *{transition:none!important;animation:none!important}
}

/* Space Grotesk ships no italic, so a UA-default <em> renders as a
   synthesised oblique. Emphasis is tone here, never slant. */
em { font-style: normal; }