@font-face{font-family:"Instrument Sans";src:url("fonts/instrument-sans.woff2") format("woff2");font-weight:400 700;font-display:swap}
:root{
  --paper:#F6F7F8; --ink:#15171B; --muted:#5A606A; --rule:#D9DDE2;
  --accent:#7A1F2B; --accent-soft:#F1E4E6;
  --wrap:1120px; --pad:clamp(20px,5vw,48px);
}
@media (prefers-color-scheme:dark){
  :root{--paper:#121418;--ink:#ECEEF1;--muted:#9AA1AB;--rule:#2A2E35;--accent:#E07A88;--accent-soft:#2A1A1D}
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:"Instrument Sans",system-ui,sans-serif;font-size:17px;line-height:1.55;font-feature-settings:"ss01"}
a{color:inherit}
.btn,.email,.toplink{transition:background-color .15s,color .15s,border-width .15s}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
header.top{display:flex;justify-content:space-between;align-items:center;padding-top:28px;padding-bottom:28px}
.mark{font-weight:650;font-size:20px;letter-spacing:-0.02em;text-decoration:none}
.mark span{display:inline-block;width:9px;height:9px;background:var(--accent);border-radius:2px;margin-right:9px;transform:translateY(-1px)}
.toplink{font-size:15px;color:var(--muted);text-decoration:none}
.toplink:hover{color:var(--ink)}
.hero{padding-top:clamp(64px,12vw,148px);padding-bottom:clamp(64px,10vw,128px)}
.hero h1{font-weight:560;font-size:clamp(40px,7.2vw,88px);line-height:1.02;letter-spacing:-0.035em;max-width:13ch}
.hero p{margin-top:28px;font-size:clamp(18px,1.6vw,21px);color:var(--muted);max-width:46ch}
.cta{margin-top:40px;display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px}
.btn{display:inline-block;background:var(--ink);color:var(--paper);text-decoration:none;font-weight:560;font-size:16px;padding:14px 22px;border-radius:999px}
.btn:hover{background:var(--accent)}
.status{font-size:15px;color:var(--muted);display:flex;align-items:center;gap:10px}
.status i{width:8px;height:8px;border-radius:50%;background:#2E8B57;box-shadow:0 0 0 4px rgba(46,139,87,.15)}
section.band{border-top:1px solid var(--rule);padding-top:56px;padding-bottom:72px}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:40px}
.split h2{font-weight:560;font-size:22px;letter-spacing:-0.015em}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:44px 48px}
.item h3{font-weight:600;font-size:19px;letter-spacing:-0.01em;margin-bottom:8px}
.item p{color:var(--muted);max-width:40ch}
.three{grid-template-columns:repeat(3,1fr)}
.contact{border-top:1px solid var(--rule);padding-top:72px;padding-bottom:96px}
.contact h2{font-weight:560;font-size:clamp(26px,3vw,34px);letter-spacing:-0.02em}
.email{display:inline-block;margin-top:18px;font-weight:560;font-size:clamp(32px,6vw,64px);letter-spacing:-0.035em;color:var(--accent);text-decoration:none;border-bottom:2px solid currentColor;line-height:1.1}
.email:hover{border-bottom-width:4px}
.place{margin-top:22px;color:var(--muted)}
footer{border-top:1px solid var(--rule);padding-top:24px;padding-bottom:32px;font-size:14px;color:var(--muted)}
@media (max-width:760px){
  .split{grid-template-columns:1fr;gap:24px}
  .grid,.three{grid-template-columns:1fr;gap:28px}
  .toplink{display:none}
}

/* 404 page */
.nf{padding-top:clamp(64px,12vw,148px);padding-bottom:120px}
.nf h1{font-weight:560;font-size:clamp(36px,6vw,64px);letter-spacing:-0.03em;line-height:1.05}
.nf p{margin-top:20px;color:var(--muted)}

/* One page-load sequence: the hero settles in, then the availability dot pulses
   three times and stops (under 5 seconds, per WCAG 2.2.2). Nothing animates on scroll. */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(46,139,87,.45)}100%{box-shadow:0 0 0 10px rgba(46,139,87,0)}}
.hero h1,.hero p,.hero .cta{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
.hero p{animation-delay:.12s}
.hero .cta{animation-delay:.24s}
.status i{animation:ping 1.2s ease-out .9s 3 both}
@media (prefers-reduced-motion:reduce){
  .hero h1,.hero p,.hero .cta,.status i{animation:none}
  .btn,.email,.toplink{transition:none}
}