@font-face { font-family:Poppins; src:url('/fonts/Poppins-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:Poppins; src:url('/fonts/Poppins-SemiBold.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:Oswald; src:url('/fonts/Oswald-Variable.woff2') format('woff2'); font-weight:200 700; font-display:swap; }
:root { --ink:#11130f; --blue:#3047ff; --muted:#656a61; --canvas:#ffffff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--canvas); }
body { min-width:320px; margin:0; background:var(--canvas); color:var(--ink); font-family:Poppins,Arial,sans-serif; }
.page { min-height:100svh; display:grid; grid-template-rows:auto 1fr; }
.header { display:flex; align-items:center; padding:1.5rem clamp(1.25rem,4vw,4.5rem); }
.wordmark { display:inline-flex; align-items:center; gap:.45rem; color:var(--ink); font-size:1.3rem; font-weight:600; letter-spacing:-.065em; line-height:1; text-decoration:none; }
.wordmark > span:last-child > span { color:var(--blue); }.mark { position:relative; width:1.8rem; height:1.15rem; }.mark i { position:absolute; left:0; width:1.55rem; height:.45rem; background:var(--ink); transform:skewX(-24deg); }.mark i:first-child { top:0; }.mark i:last-child { right:0; bottom:0; left:auto; background:var(--blue); }
.hero { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(19rem,.72fr); align-items:center; gap:clamp(3rem,7vw,7rem); width:min(100%,92rem); margin:auto; padding:clamp(2.5rem,6vh,5.5rem) clamp(1.25rem,4vw,4.5rem); }.copy { max-width:50rem; }.copy h1 { max-width:9ch; margin:0; font-family:Oswald,Impact,sans-serif; font-size:clamp(4.1rem,8.2vw,9.3rem); font-weight:500; letter-spacing:-.055em; line-height:.84; text-wrap:balance; }.copy h1 span { display:block; color:var(--blue); }.copy p { max-width:41rem; margin:clamp(2rem,4vw,3.25rem) 0 0; color:var(--muted); font-size:clamp(1rem,1.25vw,1.18rem); line-height:1.65; }.contact { display:inline-flex; align-items:center; gap:1rem; margin-top:2rem; padding:.6rem 1rem; border-radius:.375rem; background:var(--blue); color:#fff; font-size:.875rem; font-weight:600; text-decoration:none; transition:transform .2s ease,background .2s ease; }.contact:hover { background:#2038ed; transform:translateY(-2px); }.contact:focus-visible { outline:3px solid rgb(48 71 255/.35); outline-offset:3px; }.contact b { font-size:1.1rem; }
.clip { width:min(100%,25rem); justify-self:end; overflow:hidden; margin:0; border:1px solid rgb(17 19 15/.16); border-radius:2.5rem; background:#dfe3da; aspect-ratio:9/16; }.clip video { display:block; width:100%; height:100%; object-fit:cover; }
@media (max-width:800px) { .page { display:block; }.hero { grid-template-columns:1fr; gap:3.25rem; padding-block:3rem 4.5rem; }.copy h1 { max-width:9ch; font-size:clamp(4rem,17vw,6.6rem); }.clip { width:min(82vw,22rem); justify-self:center; } }
@media (max-width:420px) { .copy h1 { font-size:clamp(3.6rem,18vw,5rem); } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.contact { transition:none; } }

.contact {
  width:auto;
  height:auto;
  justify-content:flex-start;
  gap:1rem;
  margin-top:2rem;
  padding:.6rem 1rem;
  border-radius:.375rem;
  font-size:.875rem;
}
.contact svg { width:1rem; height:1rem; flex:none; }