:root {
  --orange: #ff5a00;
  --black: #111;
  --bone: #f1ede4;
  --grey: #5c5a55;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --wide: "Archivo", "Arial Black", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bone); color: var(--black); font: 400 18px/1.55 "Archivo", system-ui, sans-serif; }
a { color: inherit; }
.wrap { max-width: 72rem; margin: 0 auto; padding: 0 16px; }

/* type */
h1, h2, h3 { font-family: var(--wide); font-stretch: 125%; font-weight: 900; text-transform: uppercase; line-height: .92; letter-spacing: -.01em; margin: 0; }
h2 { font-size: clamp(2rem, 6vw, 3.6rem); }
h3 { font-size: 1.35rem; line-height: 1.05; }
.tag { font: 500 .78rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; }

/* hazard strip */
.hazard { height: 14px; background: repeating-linear-gradient(-45deg, var(--orange) 0 14px, var(--black) 14px 28px); }

/* header */
header { background: var(--black); color: var(--bone); }
header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .9rem; padding-bottom: .9rem; }
.logo { display: flex; align-items: center; gap: .55rem; text-decoration: none; font: 900 1.35rem/1 var(--wide); font-stretch: 125%; letter-spacing: .02em; }
.logo svg { width: 30px; height: 30px; }
header nav { display: flex; gap: 1.4rem; }
header nav a { text-decoration: none; font: 500 .8rem var(--mono); text-transform: uppercase; letter-spacing: .08em; }
header nav a:hover { color: var(--orange); }
@media (max-width: 640px) { header nav a:not(:last-child) { display: none; } }

/* hero */
.hero { position: relative; background: var(--black) url(img/hero.jpg) 70% 40% / cover; color: var(--bone); padding: clamp(3rem, 9vw, 7rem) 0; }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(17,17,17,.88) 0%, rgba(17,17,17,.6) 50%, rgba(17,17,17,.1) 100%); }
@media (max-width: 760px) { .hero::before { background: rgba(17,17,17,.7); } }
.hero .wrap { position: relative; }
.hero .credit { position: absolute; right: 16px; bottom: 12px; font: 500 .7rem var(--mono); text-transform: uppercase; letter-spacing: .08em; color: #e4dfd5; opacity: .8; }
.hero h1 { font-size: clamp(2.5rem, 7vw, 5.5rem); color: var(--orange); }
.hero h1 span { display: block; color: var(--bone); }
.hero p { max-width: 34rem; font-size: 1.2rem; margin: 1.4rem 0 1.8rem; color: #e4dfd5; }
.status { background: rgba(17,17,17,.6); display: inline-grid; grid-template-columns: auto auto; gap: .35rem 1.5rem; border: 2px solid #333; padding: .9rem 1.1rem; font: 500 .85rem var(--mono); text-transform: uppercase; }
.status b { font-weight: 500; }
.down { color: #8a8780; text-decoration: line-through; }
.up { color: var(--orange); }
.up::before { content: "● "; animation: blink 1.6s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .up::before { animation: none; } }
.duo { display: block; width: 100%; height: clamp(200px, 32vw, 440px); object-fit: cover; mix-blend-mode: multiply; object-position: center 80%; margin-top: 3rem; filter: contrast(1.15); }

/* buttons */
.btn { display: inline-block; background: var(--orange); color: var(--black); font: 800 1rem/1 var(--wide); font-stretch: 112%; text-transform: uppercase; text-decoration: none; padding: 1rem 1.3rem; border: 0; cursor: pointer; box-shadow: 5px 5px 0 var(--bone); }
.btn:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--bone); }
.btn.dark { box-shadow: 5px 5px 0 var(--black); }
.btn.dark:hover { box-shadow: 3px 3px 0 var(--black); }

/* doors */
.doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); border-bottom: 3px solid var(--black); }
.doors a { display: block; padding: 1.6rem 16px 1.8rem; text-decoration: none; border-right: 3px solid var(--black); background: var(--bone); }
.doors a:last-child { border-right: 0; }
.doors a:hover { background: var(--orange); }
.doors .tag { color: var(--grey); }
.doors a:hover .tag { color: var(--black); }
.doors h3 { font-size: 1.6rem; margin: .6rem 0 .3rem; }
.doors h3::after { content: " →"; }
@media (max-width: 760px) { .doors a { border-right: 0; border-bottom: 3px solid var(--black); } .doors a:last-child { border-bottom: 0; } }

/* sections */
section { padding: 5rem 0; border-bottom: 3px solid var(--black); }
.head { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; margin-bottom: 2.5rem; }
.head .tag { padding-top: .5rem; color: var(--grey); }
@media (max-width: 640px) { .head { grid-template-columns: 1fr; } }
.lede { font-size: 1.25rem; max-width: 40rem; margin-top: 1.2rem; }

.why { background: var(--orange); padding-bottom: 0; }
.why .tag { color: var(--black); }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0; margin-top: 3rem; border-top: 3px solid var(--black); }
.facts div { padding: 1.2rem 1rem 0 0; }
.facts strong { display: block; font: 900 3rem/1 var(--wide); font-stretch: 125%; }

.rows { border-top: 3px solid var(--black); }
.row { display: grid; grid-template-columns: 9rem 1fr 13rem; gap: 1rem; padding: 1.6rem 0; border-bottom: 1px solid var(--black); align-items: baseline; }
.row p { margin: .5rem 0 0; max-width: 36rem; }
.price { font: 900 1.6rem/1 var(--wide); font-stretch: 112%; text-align: right; }
.price small { display: block; font: 500 .75rem/1.4 var(--mono); text-transform: uppercase; margin-top: .4rem; color: var(--grey); }
.quote { font: 500 .9rem var(--mono); text-transform: uppercase; text-align: right; }
@media (max-width: 760px) { .row { grid-template-columns: 1fr; } .price, .quote { text-align: left; } }

/* about */
.about { background: var(--black); color: var(--bone); }
.about .tag { color: var(--orange); }
.creds { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.5rem; }
.creds li { border-top: 3px solid var(--orange); padding-top: .9rem; }
.creds b { display: block; font: 800 1.1rem var(--wide); font-stretch: 112%; text-transform: uppercase; margin-bottom: .3rem; }

/* faq */
details { border-bottom: 1px solid var(--black); }
details:first-of-type { border-top: 3px solid var(--black); }
summary { cursor: pointer; list-style: none; padding: 1.3rem 0; font: 800 1.25rem var(--wide); font-stretch: 112%; text-transform: uppercase; display: flex; justify-content: space-between; gap: 1rem; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-family: var(--mono); color: var(--orange); }
details[open] summary::after { content: "−"; }
details p { margin: 0 0 1.4rem; max-width: 44rem; }

/* form */
.contact { background: var(--orange); }
.contact .tag { color: var(--black); }
form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; max-width: 46rem; }
label { display: grid; gap: .35rem; font: 500 .8rem var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.full { grid-column: 1 / -1; }
input, select, textarea { font: 400 1.05rem "Archivo", sans-serif; padding: .8rem; border: 3px solid var(--black); background: var(--bone); color: var(--black); border-radius: 0; width: 100%; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--black); outline-offset: 2px; }
.hp { position: absolute; left: -9999px; }
@media (max-width: 640px) { form { grid-template-columns: 1fr; } }

footer { background: var(--black); color: #8a8780; padding: 2.5rem 0 3rem; font: 500 .8rem/1.8 var(--mono); text-transform: uppercase; }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; }
footer a { color: var(--bone); }

/* audience pages */
.hero.solid { background: var(--black); }
.hero.solid::before { display: none; }
.uses { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.5rem; margin-top: 3rem; padding-bottom: 5rem; }
.uses div { border-top: 3px solid var(--black); padding-top: .9rem; }
.uses b { display: block; font: 800 1.1rem var(--wide); font-stretch: 112%; text-transform: uppercase; margin-bottom: .3rem; }
.steps { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.5rem; }
.steps li { counter-increment: s; border-top: 3px solid var(--orange); padding-top: .9rem; }
.steps li::before { content: "0" counter(s); display: block; font: 900 2.4rem/1 var(--wide); font-stretch: 125%; color: var(--orange); margin-bottom: .5rem; }
.steps b { display: block; font: 800 1.1rem var(--wide); font-stretch: 112%; text-transform: uppercase; margin-bottom: .3rem; }
.guard { background: var(--black); color: var(--bone); padding: 1rem 0; font: 500 .8rem/1.5 var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.guard b { color: var(--orange); font-weight: 500; }