:root{color-scheme:dark;font-family:"Century Gothic","Avenir Next",Avenir,"Segoe UI",Arial,sans-serif;background:#101013;color:#c7c3c5;font-synthesis:none}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;width:100%}
.masthead{height:93px;background:#202129;border-bottom:1px solid #35343a;position:relative;z-index:2}
.masthead-inner{max-width:944px;height:100%;margin:auto;display:flex;align-items:center}
.logo{width:208px;height:52px;flex-shrink:0;background-repeat:no-repeat;background-size:2048px 1030px;background-position:-550px -15px;filter:grayscale(1) contrast(4);mix-blend-mode:screen}
.hero{min-height:calc(100vh - 93px);min-height:calc(100svh - 93px);position:relative;isolation:isolate;display:grid;place-items:center;overflow:hidden;padding:80px 28px}
.hero-background{position:absolute;inset:0;z-index:-2;background:#120d0e url("assets/background-v3.png") center center/cover no-repeat}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(0,0,0,.55)}
.introduction{text-align:center;width:min(100%,1000px);padding-bottom:10px}
.brand-main{margin:0 auto 44px}
h1{font-size:32px;line-height:1.3;font-weight:300;letter-spacing:.1px;margin:0 0 20px}
p{font-size:17px;line-height:1.65;font-weight:400;margin:0 0 12px;letter-spacing:.05px;text-wrap:pretty}
p:last-child{margin-bottom:0}
::selection{background:#851816;color:#fff}
@media(min-width:1600px){.introduction{transform:translateY(5px)}}
@media(max-width:1000px){.masthead-inner{padding-inline:32px}}
/* Phones and tablets: preserve the complete photo, then flow the content below it. */
@media(max-width:768px){
 .masthead{height:76px}
 .masthead-inner{justify-content:center;padding-inline:16px}
 .hero{display:block;min-height:calc(100vh - 76px);min-height:calc(100svh - 76px);padding:0 0 36px;overflow:visible;background:#101013}
 .hero-background{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:1768 / 890;background-size:contain;background-position:top center;z-index:0}
 .hero-background::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(16,16,19,.12) 60%,#101013)}
 .hero::after{display:none}
 .logo{margin-top:100px}
 .introduction{position:relative;z-index:1;width:100%;max-width:560px;margin:0 auto;padding:16px clamp(20px,6vw,40px) 0;transform:none}
 .brand-main{margin:0 auto 24px;max-width:100%}
 h1{font-size:clamp(1.5rem,5.5vw,2rem);line-height:1.35;margin-bottom:20px;overflow-wrap:anywhere}
 p{font-size:1rem;line-height:1.75;margin-bottom:16px;overflow-wrap:anywhere}
}
@media(max-width:360px){.introduction{padding-inline:18px}.brand-main{margin-bottom:20px}.logo{margin-top:100px}}
@media(max-height:500px) and (min-width:769px){.hero{padding:36px 24px}.brand-main{margin-bottom:24px}.logo{margin-top:100px}}
html,
body {
    margin: 0;
    min-height: 100%;
}

.hero {
    min-height: 100vh;
    min-height: 100dvh;
    box-sizing: border-box;
}