/* Wrath Inc. — layout: full-bleed black plates (renders, footage) carrying left-aligned condensed type; text columns sit on a 12-col grid, never centred. */
:root{
  /* the livery is black, the logo is the white primer showing through it, the deck ring is amber */
  --livery:#000000;
  --hull:#0d0e10;          /* panels: one step up from the livery */
  --graphite:#202328;
  --primer:#ecebe6;        /* text: the paint system's white primer */
  --steel:#9198a1;         /* secondary text */
  --deck:#e6a23c;          /* vertiport deck marking: links, focus, calls to action */
  --rule:rgba(236,235,230,.14);
  --display:"Big Shoulders Display","Arial Narrow","Roboto Condensed",sans-serif;
  --body:"Instrument Sans","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --gutter:max(16px, env(safe-area-inset-left, 0px));
  --gutter-r:max(16px, env(safe-area-inset-right, 0px));
  --wide:1240px;
  --read:62ch;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--livery);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--livery);color:var(--primer);font:400 1.0625rem/1.6 var(--body);text-rendering:optimizeLegibility}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--livery)}
img,video,svg{max-width:100%;display:block}
a{color:var(--primer);text-decoration-color:var(--deck);text-underline-offset:.22em;text-decoration-thickness:1px}
a:hover{color:var(--deck)}
:focus-visible{outline:2px solid var(--deck);outline-offset:3px;border-radius:2px}
::selection{background:var(--deck);color:var(--livery)}

.wrap{max-width:var(--wide);margin-inline:auto;padding-left:var(--gutter);padding-right:var(--gutter-r)}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:16px;top:16px;z-index:40;background:var(--primer);color:var(--livery);padding:8px 12px}

/* ---------------------------------------------------------------- header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--livery) 82%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:14px}
.brand{display:block;width:118px;color:var(--primer)}
.brand svg{width:100%;height:auto}
.nav{display:flex;align-items:center;gap:clamp(14px,2.4vw,30px);font-size:.95rem}
.nav a{text-decoration:none;color:var(--steel);padding-block:6px}
.nav a:hover,.nav a[aria-current="page"]{color:var(--primer)}
.nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--deck)}
.nav .login{color:var(--primer);border:1px solid var(--rule);border-radius:999px;padding:6px 14px}
.nav .login:hover{border-color:var(--deck)}
.menu{display:none;background:none;border:1px solid var(--rule);color:var(--primer);border-radius:999px;padding:6px 14px;font:inherit;cursor:pointer}
@media (max-width:760px){
  .menu{display:block}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:flex-start;gap:4px;
    background:var(--livery);border-bottom:1px solid var(--rule);padding:12px var(--gutter-r) 18px var(--gutter)}
  .nav.open{display:flex}
  .nav a{font-size:1.15rem;padding-block:8px}
}

/* ---------------------------------------------------------------- type */
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:.95;letter-spacing:.005em;text-wrap:balance;margin:0}
h1{font-size:clamp(3.2rem,9vw,7.5rem)}
h2{font-size:clamp(2.2rem,5vw,3.75rem)}
h3{font-family:var(--body);font-weight:600;font-size:1.15rem;line-height:1.3;letter-spacing:0}
p{margin:0;max-width:var(--read)}
.lede{font-size:clamp(1.15rem,1.6vw,1.35rem);line-height:1.5;color:var(--primer)}
.muted{color:var(--steel)}
.stack{display:grid;gap:18px}
.stack-lg{display:grid;gap:28px}

/* ---------------------------------------------------------------- buttons */
.actions{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;gap:10px;font:600 1rem/1 var(--body);text-decoration:none;cursor:pointer;
  padding:14px 22px;border-radius:999px;border:1px solid var(--primer);color:var(--livery);background:var(--primer)}
.btn:hover{background:var(--deck);border-color:var(--deck);color:var(--livery)}
.btn.ghost{background:transparent;color:var(--primer);border-color:var(--rule)}
.btn.ghost:hover{border-color:var(--deck);color:var(--deck)}

/* ---------------------------------------------------------------- hero */
.hero{position:relative;isolation:isolate;min-height:min(92vh,900px);display:grid;overflow:hidden}
.hero video,.hero > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 58%,rgba(0,0,0,.7) 82%,var(--livery) 100%)}
/* headline in the night sky, details on the deck, the aircraft left clear between them */
.hero .wrap{width:100%;display:grid;grid-template-rows:auto 1fr auto;padding-block:clamp(40px,8vh,88px) clamp(36px,6vh,64px)}
.hero h1{max-width:16ch;font-size:clamp(3rem,7.2vw,6.25rem)}
.hero .deck{grid-row:3;display:grid;gap:24px}
.hero .lede{max-width:46ch}
.hero-note{position:absolute;right:var(--gutter-r);top:18px;font-size:.8rem;color:var(--steel)}

/* ---------------------------------------------------------------- data plate (real units) */
.plate{border-block:1px solid var(--rule)}
.plate dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0}
.plate dl > div{padding:26px 20px 24px 0;border-right:1px solid var(--rule)}
.plate dl > div + div{padding-left:22px}
.plate dl > div:last-child{border-right:0}
.plate dt{font-size:.9rem;color:var(--steel);order:2}
.plate dd{margin:0 0 6px;font-family:var(--display);font-weight:700;font-size:clamp(2.2rem,4.4vw,3.4rem);line-height:1;font-variant-numeric:tabular-nums}
.plate dd small{font-family:var(--body);font-weight:500;font-size:1rem;color:var(--steel);margin-left:6px}
@media (max-width:760px){
  .plate dl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .plate dl > div{border-bottom:1px solid var(--rule)}
  .plate dl > div:nth-child(2n){border-right:0}
  .plate dl > div:nth-child(2n+1){padding-left:0}
  .plate dl > div:nth-last-child(-n+2){border-bottom:0}
}

/* ---------------------------------------------------------------- sections */
.band{padding-block:clamp(64px,10vw,128px)}
.band + .band{border-top:1px solid var(--rule)}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,72px);align-items:center}
.split.flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.split.flip > :first-child{order:2}
@media (max-width:860px){.split,.split.flip{grid-template-columns:minmax(0,1fr)}.split.flip > :first-child{order:0}}
.media{position:relative;background:var(--hull);aspect-ratio:16/9;overflow:hidden;border-radius:4px;max-width:100%}
.media video,.media img{width:100%;height:100%;object-fit:cover}
.caption{margin-top:12px;font-size:.88rem;color:var(--steel)}

/* hover → convert → cruise is a real sequence, so it is numbered */
.phases{list-style:none;margin:0;padding:0;display:grid;gap:22px;counter-reset:ph}
.phases li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 14px;counter-increment:ph}
.phases li::before{content:counter(ph);grid-row:span 2;font-family:var(--display);font-weight:800;font-size:2.1rem;line-height:1;color:var(--deck)}

.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px);margin-top:44px}
.three > div{border-top:1px solid var(--primer);padding-top:18px;display:grid;gap:10px;align-content:start}
@media (max-width:860px){.three{grid-template-columns:minmax(0,1fr)}}

/* ---------------------------------------------------------------- LUXBAT drawing */
.drawing{position:relative;background:var(--hull);border-radius:4px;overflow:hidden}
.drawing img{width:100%;height:auto;filter:grayscale(1) contrast(1.12) brightness(.92)}
.drawing svg{position:absolute;inset:0;width:100%;height:100%}
.drawing .dim{stroke:var(--deck);stroke-width:2.2;fill:none}
.drawing .ext{stroke:var(--deck);stroke-width:1.2;stroke-dasharray:6 6;opacity:.7}
.drawing text{fill:var(--deck);font:700 34px var(--display);letter-spacing:.02em}
.drawing .bg{fill:var(--livery)}

.specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(28px,5vw,64px);margin:0}
.specs div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;padding:14px 0;border-bottom:1px solid var(--rule)}
.specs dt{color:var(--steel)}
.specs dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:760px){.specs{grid-template-columns:minmax(0,1fr)}}

.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.gallery figure{margin:0}
.gallery img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:4px;background:var(--hull)}
.gallery figcaption{margin-top:10px;font-size:.9rem;color:var(--steel)}
@media (max-width:640px){.gallery{grid-template-columns:minmax(0,1fr)}}

.note{border-left:2px solid var(--deck);padding:4px 0 4px 18px;color:var(--steel);max-width:var(--read)}

/* ---------------------------------------------------------------- page heads */
.pagehead{padding-block:clamp(72px,12vw,148px) clamp(40px,6vw,72px);border-bottom:1px solid var(--rule)}
.pagehead h1{font-size:clamp(3rem,8vw,6rem)}
.pagehead .lede{margin-top:20px}

/* ---------------------------------------------------------------- people */
.person{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,5vw,64px);align-items:start}
.person .name{font-family:var(--display);font-weight:800;font-size:2.4rem;line-height:1}
.person .role{color:var(--deck);margin-top:6px}
@media (max-width:760px){.person{grid-template-columns:minmax(0,1fr)}}

/* ---------------------------------------------------------------- forms */
.form{display:grid;gap:18px;max-width:640px}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media (max-width:640px){.row2{grid-template-columns:minmax(0,1fr)}}
label{display:grid;gap:8px;font-size:.95rem;color:var(--steel)}
input,select,textarea{font:inherit;color:var(--primer);background:var(--hull);border:1px solid var(--rule);border-radius:4px;padding:12px 14px;width:100%}
textarea{min-height:150px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--deck)}
.status{min-height:1.6em;color:var(--steel)}
.status.ok{color:var(--primer)}
.address{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.address code{font:600 1.05rem var(--body);user-select:all;color:var(--primer)}
.copy{font:500 .9rem var(--body);background:none;color:var(--steel);border:1px solid var(--rule);border-radius:999px;padding:6px 12px;cursor:pointer}
.copy:hover{color:var(--deck);border-color:var(--deck)}

.portal{display:grid;gap:22px;max-width:560px;padding:clamp(28px,5vw,44px);background:var(--hull);border:1px solid var(--rule);border-radius:6px}
.portal .logo{width:150px;color:var(--primer)}

/* ---------------------------------------------------------------- footer */
.foot{border-top:1px solid var(--rule);padding-block:44px 56px;color:var(--steel);font-size:.92rem}
.foot .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:end}
.foot .brand{width:96px;margin-bottom:14px}
.foot nav{display:flex;flex-wrap:wrap;gap:18px}
.foot nav a{color:var(--steel);text-decoration:none}
.foot nav a:hover{color:var(--primer)}
@media (max-width:640px){.foot .wrap{grid-template-columns:minmax(0,1fr)}}

@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  .hero video{display:none}
}