@font-face{font-family:"Cralika";src:url("fonts/Cralika.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"Cralika";src:url("fonts/Cralika-Italic.otf") format("opentype");font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:"ASans";src:url("fonts/ASansBold.ttf") format("truetype");font-style:normal;font-weight:700;font-display:swap}
:root{--bg:#fff;--ink:#111;--muted:#4e4e4e}
*{box-sizing:border-box}
html,body{margin:0;width:100%;min-height:100%;background:var(--bg)}
body{min-height:100vh;color:var(--ink);overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
.page{width:100%;min-height:100vh;display:flex;justify-content:center;align-items:flex-start;padding:140px 24px 38px}
.panel{width:100%;max-width:920px;margin:0 auto;padding:0;text-align:center;display:flex;flex-direction:column;align-items:center}
.logo-wrap{width:min(580px,82vw);margin:0 auto;line-height:0;flex:0 0 auto}
.logo-wrap picture{display:block;width:100%}
.logo{display:block;width:100%;height:auto;margin:0 auto;image-rendering:auto}
.logo-fade{opacity:0;animation:logoFade 1.8s ease-out .05s forwards}
@keyframes logoFade{from{opacity:0}to{opacity:1}}

.rule{width:90px;height:1px;margin:28px auto 28px;overflow:hidden}
.rule span{display:block;width:100%;height:1px;background:var(--ink);transform-origin:center;animation:draw 1.05s cubic-bezier(.22,1,.36,1) .42s both}
.eyebrow{margin:0 0 16px;font-family:"ASans","Open Sans",Arial,sans-serif;font-size:11px;line-height:1;letter-spacing:.34em;color:#555}
.title{margin:0;font-family:"Cralika",Georgia,serif;font-weight:400;font-size:clamp(54px,7.4vw,96px);line-height:.98;letter-spacing:-.032em}
.title span{display:block}.title .italic{font-style:italic;margin-top:.045em}
.staff{width:min(650px,calc(100vw - 48px));margin:36px auto 30px;display:grid;gap:6px;opacity:.56}
.staff i{display:block;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:center;animation:staffLine 1.3s cubic-bezier(.22,1,.36,1) forwards}
.staff i:nth-child(1){animation-delay:.68s}.staff i:nth-child(2){animation-delay:.72s}.staff i:nth-child(3){animation-delay:.76s}.staff i:nth-child(4){animation-delay:.80s}.staff i:nth-child(5){animation-delay:.84s}
.lead{max-width:690px;margin:0 auto;font-family:"Open Sans",Arial,sans-serif;font-weight:300;font-size:clamp(18px,2.1vw,24px);line-height:1.65;color:var(--muted)}
.mobile-line{display:none}.desktop-copy{display:inline}
.reveal{opacity:0;transform:translateY(14px);animation:reveal .9s cubic-bezier(.22,1,.36,1) forwards}.r2{animation-delay:.20s}.r3{animation-delay:.30s}.r4{animation-delay:.38s}.r5{animation-delay:.52s}.r6{animation-delay:.68s}
@keyframes reveal{to{opacity:1;transform:translateY(0)}}@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes staffLine{to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.logo-fade{opacity:1}.reveal{opacity:1;transform:none}.rule span,.staff i{transform:scaleX(1)}}
@media(max-width:640px){
  .page{padding:80px 18px 34px}
  .panel{width:100%;max-width:none}
  .logo-wrap{width:min(300px,74vw)}
  .rule{margin:22px auto 22px}
  .eyebrow{font-size:10px;letter-spacing:.28em}
  .title{font-size:clamp(46px,15vw,74px)}
  .title .italic{margin-top:4px}
  .staff{width:min(650px,calc(100vw - 36px));margin:28px auto 24px;gap:5px}
  .lead{width:100%;max-width:520px;font-size:17px;line-height:1.58;padding:0;text-align:center}
  .desktop-copy{display:none}
  .mobile-line{display:block}
  .mobile-brand{font-weight:600}
}