/* Jackson Keal — Midnight Slate. Same layout as the Codex original; logos now transparent PNGs, text sizes readable. */
:root{--ink:#0c2943;--ink-2:#224560;--slate:#6e7b86;--muted:#5f6c78;--line:#e1e6eb;--paper:#fff;--band:#0c2943;--foot:#092238}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:400 15px/1.65 Montserrat,Arial,sans-serif;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid #6d9fc7;outline-offset:4px}
.page{min-height:100svh;display:flex;flex-direction:column}

header{margin:0 5.5%;height:96px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.brand img{width:60px;height:auto;display:block}
.header-actions{display:flex;align-items:center;gap:28px}
.contact-button{background:none;border:0;padding:12px 0;font-size:13px;font-weight:500;white-space:nowrap}
.contact-button:hover{color:#557c9c}
.login{display:flex;align-items:center;gap:12px;background:var(--ink);color:#fff;border:1px solid var(--ink);padding:12px 20px;font-size:13px;font-weight:500;white-space:nowrap;transition:background .2s}
.login:hover{background:var(--ink-2)}
.login>span{margin-left:10px;font-size:16px;line-height:1}

main{flex:1;display:flex;flex-direction:column}
.identity{flex:1;min-height:440px;padding:64px 8%;display:flex;align-items:center;justify-content:center}
.identity-inner{width:min(780px,100%);text-align:center}
.monogram{width:150px;height:auto;margin:0 auto 34px;display:block}
h1{margin:0;font-size:0}
.wordmark{width:100%;height:auto;display:block}
.descriptor{display:flex;align-items:center;justify-content:center;gap:22px;margin:30px 0 0;font-size:12px;font-weight:500;letter-spacing:7px;padding-left:7px;text-transform:uppercase;color:var(--muted)}
.descriptor span{height:1px;width:52px;background:#cbd3dc}

.statement{background:var(--band);color:#fff;position:relative;overflow:hidden;padding:44px 10%;min-height:200px;display:flex;gap:28px;align-items:center}
.statement p{font-size:clamp(24px,2.6vw,38px);font-weight:400;line-height:1.4;letter-spacing:-.6px;margin:0;position:relative;z-index:1}
.statement p span{color:#aebdcb}
.statement-accent{height:71px;width:2px;background:#7795ad;flex:none}
.brand-lines{position:absolute;right:10%;top:-65px;bottom:-65px;width:270px;transform:skewX(-43deg);display:flex;gap:24px}
.brand-lines i{height:100%;width:65px;border-left:1px solid #49677e55;border-right:1px solid #49677e55}

footer{background:var(--foot);color:#a9b8c6;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:22px 5.5%;font-size:12px;line-height:1.5}
.footer-co{display:flex;flex-direction:column}
.footer-co strong{color:#fff;font-weight:600;letter-spacing:.3px}
.skip{position:absolute;left:12px;top:-100px;background:#fff;padding:10px;z-index:10}
.skip:focus{top:10px}

dialog{border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);padding:44px;width:min(500px,calc(100% - 32px));max-height:90vh;overflow:auto}
dialog::backdrop{background:#0c2943a8;backdrop-filter:blur(5px)}
.eyebrow{font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin:0 0 18px}
h2{font-size:32px;line-height:1.25;letter-spacing:-.8px;font-weight:500;margin:0 0 10px}
.close{position:absolute;right:16px;top:10px;border:0;background:none;font-size:28px;line-height:1;color:var(--muted)}
.contact-details{margin-top:24px}
.contact-details>div{padding:18px 0;border-top:1px solid var(--line)}
.contact-details>div>span{display:block;color:var(--muted);font-size:11px;letter-spacing:1px;text-transform:uppercase;margin-bottom:8px}
.contact-details a,.contact-details p{display:flex;justify-content:space-between;align-items:center;gap:15px;font-size:16px;margin:0}
.contact-details a:hover{color:#557c9c}
.contact-details a span{font-size:18px;color:var(--muted)}

@media(min-width:1600px){.identity-inner{width:900px}.monogram{width:175px}.statement{min-height:240px}}
@media(max-width:700px){
  header{height:80px;margin:0 6%}
  .brand img{width:48px}
  .header-actions{gap:16px}
  .contact-button{font-size:12px}
  .login{font-size:12px;padding:10px 13px;gap:8px}
  .login>span{margin-left:4px}
  .identity{min-height:0;padding:64px 7% 72px}
  .monogram{width:120px;margin-bottom:28px}
  .descriptor{font-size:10px;letter-spacing:2.5px;gap:12px;margin-top:22px}
  .descriptor span{width:22px}
  .statement{padding:36px 7%;min-height:170px;gap:20px}
  .statement p{font-size:clamp(20px,5.4vw,26px)}
  .statement-accent{height:61px}
  .brand-lines{right:-70px;opacity:.6}
  footer{padding:22px 6%;font-size:11.5px}
  dialog{padding:38px 24px}
}
@media(max-width:360px){.login>svg{display:none}.header-actions{gap:12px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}