:root{color-scheme:light;--ink:#111;--muted:#373737;--paper:#fff;--gray:#e9e9e9;--dark:#222;--width:1120px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:32px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased;font-size:17px;line-height:1.55}
a{color:inherit;text-underline-offset:6px}
a:focus-visible{outline:3px solid currentColor;outline-offset:6px}
.wrap{width:min(var(--width),calc(100% - 96px));margin-inline:auto}
.skip-link{position:absolute;left:24px;top:-100px;background:#fff;padding:10px 18px;z-index:2}
.skip-link:focus{top:12px}
.header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:30px}
.brand{display:inline-flex;align-items:center;gap:13px;font-size:23px;line-height:1.1;font-weight:800;letter-spacing:-.8px;text-decoration:none;white-space:nowrap;text-transform:uppercase}
.brand-mark{display:block;width:27px;height:36px;flex-shrink:0}
nav{display:flex;gap:40px;font-size:16px}
nav a{text-decoration:none;padding-block:8px}
nav a:hover{text-decoration:underline}
.hero{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:35px;align-items:center;padding-block:64px 84px;min-height:455px}
h1,h2,p{margin:0}
h1{font-size:clamp(40px,4.3vw,60px);font-weight:750;letter-spacing:-2.9px;line-height:1.08}
.hero p{max-width:680px;font-size:22px;line-height:1.45;letter-spacing:-.5px;margin-top:30px}
.geometry{position:relative;width:300px;height:330px}
.square{position:absolute;display:block;aspect-ratio:1;width:175px}
.solid{background:var(--dark);top:0;right:28px;width:190px}
.gray{background:rgba(100,100,100,.3);left:0;top:108px}
.outline{border:1.5px solid var(--ink);right:0;bottom:0}
.about{background:var(--gray);padding-block:66px}
.about-layout{display:grid;grid-template-columns:40% 1fr;gap:48px;align-items:center}
h2{font-size:clamp(36px,4vw,52px);line-height:1.12;letter-spacing:-2px;font-weight:750}
.about-copy{border-left:1px solid #a3a3a3;padding-left:48px;font-size:18px}
.about-copy p+p{margin-top:22px}
.connect{background:var(--dark);color:white;padding-block:58px 52px}
.connect p{max-width:590px;margin-top:22px;font-size:18px;color:#e6e6e6}
.links{display:flex;gap:34px;align-items:center;flex-wrap:wrap;margin-top:28px}
.button{display:inline-flex;align-items:center;gap:18px;background:white;color:#111;text-decoration:none;padding:13px 22px;font-size:17px;font-weight:700;transition:background .15s}
.button:hover{background:#dcdcdc}
.button svg{height:22px;width:22px;stroke:currentColor;stroke-width:1.5}
.text-link{font-size:17px;text-decoration-thickness:1px}
.text-link:hover{color:#ccc}
footer{background:var(--dark);color:#ddd;border-top:1px solid #777;padding-block:20px;font-size:13px}
@media(min-width:1400px){.hero{padding-block:72px 92px}}
@media(max-width:1000px){.hero{grid-template-columns:minmax(0,1fr) 220px;gap:24px}.geometry{width:220px;height:260px}.square{width:140px}.solid{width:150px;right:18px}.gray{top:85px}.desktop-break{display:none}.about-layout{grid-template-columns:38% 1fr;gap:30px}.about-copy{padding-left:30px}}
@media(max-width:680px){.wrap{width:calc(100% - 40px)}.header{padding-block:24px;gap:16px}.brand{font-size:17px;letter-spacing:-.5px}nav{gap:18px;font-size:14px}.hero{display:flex;flex-direction:column;align-items:flex-start;padding-block:34px 44px;gap:34px;min-height:0}h1{font-size:44px;letter-spacing:-2px;max-width:520px}.hero p{font-size:19px;margin-top:23px;max-width:440px}.geometry{align-self:flex-end;width:210px;height:190px;margin-right:10px}.square{width:115px}.solid{width:125px;right:22px}.gray{top:54px}.about{padding-block:42px}.about-layout{display:block}.about-copy{border-left:0;border-top:1px solid #aaa;padding:25px 0 0;margin-top:25px;font-size:17px}h2{font-size:38px;letter-spacing:-1.5px}.about h2 br{display:none}.connect{padding-block:42px}.connect p{font-size:17px}.links{gap:24px}.button,.text-link{font-size:16px}footer{padding-block:18px}}
@media(max-width:680px){.brand{gap:9px}.brand-mark{width:22px;height:29px}.header{flex-wrap:wrap}nav{margin-left:auto}}
@media(max-width:400px){.brand-name>span{display:block}.brand{line-height:1.2}}
@media(max-width:360px){h1{font-size:39px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}