/* Autovonics palette: black, white, and greys only. No other colors. */
:root{
  --black:#0a0a0a;
  --bg:#0a0a0a;
  --bg2:#121212;
  --bg3:#1a1a1a;
  --line:#2a2a2a;
  --line-strong:#3d3d3d;
  --grey:#8c8c8c;
  --muted:#a6a6a6;
  --soft:#d4d4d4;
  --text:#f2f2f2;
  --white:#ffffff;
  --wide:"Michroma", "Eurostile", "Arial Black", sans-serif;
  --body:"Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:72px;overflow-x:clip}
body{background:var(--bg);color:var(--text);font:400 18px/1.6 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{width:min(1120px,100% - 32px);margin-inline:auto}

/* nav */
.nav{position:sticky;top:0;z-index:20;background:rgba(10,10,10,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font:15px var(--wide);letter-spacing:.22em}
.brand img{width:34px;height:34px}
.menu{display:flex;align-items:center;gap:28px}
.menu a{text-decoration:none;font-size:15px;color:var(--muted);transition:color .2s}
.menu a:hover{color:var(--white)}
.menu-btn{display:none;background:none;border:0;width:40px;height:40px;cursor:pointer;flex-direction:column;justify-content:center;gap:6px;align-items:center}
.menu-btn span{display:block;width:24px;height:2px;background:var(--text);transition:.25s}

/* buttons */
.btn{display:inline-block;text-decoration:none;font:600 15px var(--body);letter-spacing:.08em;text-transform:uppercase;padding:14px 26px;border-radius:2px;background:var(--white);color:var(--black);border:1px solid var(--white);cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.btn:hover{background:var(--soft);border-color:var(--soft)}
.btn-ghost{background:transparent;color:var(--white);border-color:rgba(255,255,255,.45)}
.btn-ghost:hover{background:rgba(255,255,255,.08);border-color:var(--white)}
.btn-light{background:var(--white);color:var(--black);border-color:var(--white)}
.menu a.btn-sm{color:var(--black);padding:9px 16px;font-size:13px}
.menu a.btn-sm:hover{color:var(--black)}

/* hero */
.hero{background:radial-gradient(ellipse 90% 70% at 50% 0%,#2e2e2e 0%,#161616 45%,var(--bg) 80%);padding:80px 0 96px;overflow:hidden;border-bottom:1px solid var(--line)}
.hero-inner{text-align:center;max-width:840px}
.hero-logo{width:min(360px,70%);margin:0 auto 28px}
.tagline{font:clamp(12px,2vw,16px) var(--wide);letter-spacing:.28em;text-transform:uppercase;margin-bottom:28px;color:var(--soft)}
.tagline i{font-style:normal;color:var(--grey);margin:0 .35em}
.tagline{padding-left:.28em}
.tagline span{white-space:nowrap}
h1{font:clamp(26px,4.6vw,46px)/1.2 var(--wide);letter-spacing:.02em;margin-bottom:22px}
.lead{color:var(--soft);font-size:clamp(17px,2vw,20px);max-width:700px;margin:0 auto 34px}
.cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hero-links{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.hero-links .btn{padding:12px 18px;font-size:13px;text-align:center}
@media (max-width:760px){
  .hero-links{display:grid;grid-template-columns:1fr 1fr;max-width:420px;margin-inline:auto}
  .hero-links .btn{padding:12px 8px;font-size:12px;letter-spacing:.04em}
  .hero-links .hero-quote{grid-column:1/-1}
}

/* statement */
.statement{background:var(--bg2);border-bottom:1px solid var(--line);padding:56px 0}
.statement p{font:clamp(18px,2.6vw,26px)/1.5 var(--body);font-weight:500;text-align:center;max-width:860px;margin:auto;color:var(--soft)}
.statement em{font-style:normal;color:var(--white);border-bottom:1px solid var(--grey)}

/* sections */
.section{padding:96px 0}
.section-alt{background:var(--bg2);border-block:1px solid var(--line)}
.section-contact{background:linear-gradient(160deg,var(--bg) 0%,#151515 50%,#242424 100%);border-top:1px solid var(--line)}
.section-title{font:13px var(--wide);letter-spacing:.32em;text-transform:uppercase;color:var(--grey);margin-bottom:28px}
.big{font:clamp(22px,3vw,32px)/1.3 var(--wide);margin-bottom:20px}
.section p{color:var(--soft)}
.section p + p{margin-top:14px}

/* service cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:var(--bg2);border:1px solid var(--line);border-top:3px solid var(--line-strong);padding:34px 28px;position:relative;transition:transform .25s,border-color .25s}
.card:hover{transform:translateY(-4px);border-color:var(--line-strong);border-top-color:var(--white)}
.card-feature{background:linear-gradient(180deg,#1e1e1e 0%,var(--bg2) 100%);border-top-color:var(--white)}
.card-num{position:absolute;top:22px;right:24px;font:13px var(--wide);color:#4a4a4a}
.card h3{font:20px/1.3 var(--wide);letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px;padding-right:32px}
.card-sub{font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey) !important;margin-bottom:16px}

/* reverse engineering */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:start}
.steps{list-style:none;counter-reset:s;display:grid;gap:14px}
.steps li{counter-increment:s;display:grid;grid-template-columns:56px 1fr;grid-template-rows:auto auto;column-gap:16px;background:var(--bg);border:1px solid var(--line);padding:20px 22px}
.steps li::before{content:counter(s,decimal-leading-zero);grid-row:1/3;font:22px var(--wide);color:var(--grey);align-self:center}
.steps b{font:16px var(--wide);letter-spacing:.1em;text-transform:uppercase}
.steps span{color:var(--muted);font-size:16px}

/* about */
.about-lead{font-size:clamp(19px,2.3vw,23px);max-width:820px;color:var(--text) !important;margin-bottom:40px}
.people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;max-width:820px}
.person{display:flex;align-items:flex-start;gap:18px;background:var(--bg2);border:1px solid var(--line);padding:24px}
.avatar{width:72px;height:72px;flex:none;border-radius:4px}
.person h3{font:16px var(--wide);letter-spacing:.06em;margin-bottom:4px}
.person .role{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey) !important;margin-bottom:8px}
.person p{font-size:16px}
.person p + p{margin-top:0}
.future{margin-top:56px;max-width:820px;border-left:2px solid var(--white);padding-left:24px}
.future h3{font:15px var(--wide);letter-spacing:.16em;text-transform:uppercase;margin-bottom:12px}

/* contact */
.contact-list{list-style:none;margin:28px 0 20px;display:grid;gap:10px}
.contact-list li{display:flex;gap:14px;flex-wrap:wrap}
.contact-list span{width:112px;flex:none;font:12px var(--wide);letter-spacing:.18em;text-transform:uppercase;color:var(--grey);padding-top:5px}
.contact-list a{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3)}
.contact-list a:hover{border-bottom-color:var(--white)}
.contact-list .phones{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.contact-list .phone{white-space:nowrap}
.contact-list .sep{font-style:normal;color:var(--grey)}
.contact-list .who{font-style:normal;color:var(--muted);margin-right:4px}
@media (max-width:760px){
  .contact-list li{flex-wrap:nowrap}
  .contact-list .phones{flex-direction:column;align-items:flex-start;gap:10px}
  .contact-list .sep{display:none}
}
.note{font-size:15px}
.form{background:rgba(0,0,0,.5);border:1px solid var(--line-strong);padding:32px;display:grid;gap:16px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form label{display:grid;gap:6px;font-size:14px;letter-spacing:.04em;color:var(--soft)}
.form input,.form select,.form textarea{font:16px var(--body);color:var(--white);background:#0e0e0e;border:1px solid var(--line-strong);border-radius:2px;padding:12px 14px;width:100%}
.form textarea{resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--white);outline-offset:1px;border-color:transparent}
.form .btn{justify-self:start}
.hp{position:absolute;left:-9999px}
.form-status{font-size:15px;min-height:1.4em}
.form-status.ok{color:var(--white)}
.form-status.err{color:var(--soft);border-left:2px solid var(--white);padding-left:10px}

/* what we've done */
.done-group + .done-group{margin-top:64px;padding-top:64px;border-top:1px solid var(--line)}
.done-head{max-width:760px;margin-bottom:28px}
.work-tag{font:11px var(--wide);letter-spacing:.24em;text-transform:uppercase;color:var(--grey) !important;margin-bottom:14px}
.done-head h3{font:clamp(18px,2.2vw,22px)/1.35 var(--wide);letter-spacing:.03em;margin-bottom:12px}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.gallery-2{grid-template-columns:repeat(2,1fr)}
.shot{background:var(--bg);border:1px solid var(--line);display:flex;flex-direction:column;transition:border-color .25s}
.shot:hover{border-color:var(--line-strong)}
.shot img{width:100%;aspect-ratio:4/3;object-fit:contain;background:#121212;border-bottom:1px solid var(--line)}
.shot figcaption{padding:20px 22px 24px;display:grid;gap:6px}
.shot figcaption b{font:15px/1.4 var(--wide);letter-spacing:.06em}
.shot figcaption span{color:var(--muted);font-size:16px}

/* video */
.video{position:relative;aspect-ratio:16/9;background:#000;border:1px solid var(--line-strong);max-width:960px}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-cap{margin-top:14px;font-size:15px;color:var(--muted) !important}
.video-cap a{color:var(--soft);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3);margin-left:6px}
.video-cap a:hover{color:var(--white);border-bottom-color:var(--white)}

/* footer */
.footer{border-top:1px solid var(--line);padding:40px 0}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;color:var(--muted);font-size:14px}
.footer img{width:140px}

/* responsive */
@media (max-width:900px){
  .cards,.gallery,.gallery-2{grid-template-columns:1fr}
  .split{grid-template-columns:1fr;gap:40px}
  .people{grid-template-columns:1fr}
}
@media (max-width:760px){
  .menu-btn{display:flex}
  .menu{position:absolute;top:64px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--bg);border-bottom:1px solid var(--line);max-height:0;overflow:hidden;transition:max-height .3s}
  .menu.open{max-height:360px}
  .menu a{padding:16px;border-top:1px solid var(--line);font-size:16px}
  .menu a.btn-sm{margin:12px 16px 16px;text-align:center}
  .row{grid-template-columns:1fr}
  .section{padding:72px 0}
  .hero{padding:56px 0 72px}
  .form{padding:22px}
  .tagline{display:flex;flex-direction:column;align-items:center;gap:8px;letter-spacing:.22em;font-size:12px;padding-left:0}
  .tagline span{padding-left:.22em}
  .tagline i{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important;scroll-behavior:auto !important}}
.hero-full{min-height:100vh;display:grid;place-items:center}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}