@font-face{font-family:'Plus Jakarta Sans';src:url('../fonts/plus_jakarta_sans/PlusJakartaSans-VariableFont_wght.ttf') format('truetype');font-weight:200 800;font-style:normal;font-display:swap}

:root{
--ink:#141414;
--muted:#595959;
--red:#c62828;
--pixel:#e53935;
--line:#e5e5e5;
--font-family-primary:'Plus Jakarta Sans',sans-serif;
--font-weight-regular:400;
--font-weight-medium:500;
--font-weight-semibold:600;
--font-weight-bold:700;
--font-size-10:.625rem;
--font-size-11:.6875rem;
--font-size-12:.75rem;
--font-size-13:.8125rem;
--font-size-14:.875rem;
--font-size-15:.9375rem;
--font-size-16:1rem;
--font-size-17:1.0625rem;
--font-size-18:1.125rem;
--font-size-20:1.25rem;
--font-size-24:1.5rem;
--heading-style-one-size:clamp(3rem,6vw,6.5rem);
--heading-style-two-size:clamp(2.25rem,4vw,4rem);
--heading-style-three-size:clamp(1.75rem,2.5vw,2.5rem);
--heading-style-four-size:clamp(1.5rem,1.8vw,2rem);
--heading-style-five-size:clamp(1.25rem,1.4vw,1.5rem);
--heading-style-six-size:var(--font-size-18);
--heading-line-height:1.08;
--heading-letter-spacing:-.035em;
--container-max:1600px;
--container-gutter:clamp(22px,4.45vw,80px)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{margin:0;font-family:var(--font-family-primary);color:var(--ink);font-size:var(--font-size-16);line-height:1.65;background:#fff}
h1,h2,h3,h4,h5,h6,p{margin:0}
h1,h2,h3,h4,h5,h6,.heading-style-one,.heading-style-two,.heading-style-three,.heading-style-four,.heading-style-five,.heading-style-six{font-family:var(--font-family-primary);line-height:var(--heading-line-height);letter-spacing:var(--heading-letter-spacing)}
h1,.heading-style-one{font-size:var(--heading-style-one-size);font-weight:650}
h2,.heading-style-two{font-size:var(--heading-style-two-size);font-weight:var(--font-weight-semibold)}
h3,.heading-style-three{font-size:var(--heading-style-three-size);font-weight:var(--font-weight-semibold)}
h4,.heading-style-four{font-size:var(--heading-style-four-size);font-weight:var(--font-weight-semibold)}
h5,.heading-style-five{font-size:var(--heading-style-five-size);font-weight:var(--font-weight-semibold)}
h6,.heading-style-six{font-size:var(--heading-style-six-size);font-weight:var(--font-weight-semibold)}
.font10{font-size:var(--font-size-10)!important}
.font12{font-size:var(--font-size-12)!important}
.font14{font-size:var(--font-size-14)!important}
.font16{font-size:var(--font-size-16)!important}
.font18{font-size:var(--font-size-18)!important}
.text-body-large{font-size:var(--font-size-18)}
.text-body{font-size:var(--font-size-16)}
.text-body-small{font-size:var(--font-size-14)}
p{color:var(--muted)}
a{color:inherit;text-decoration:none}
a:hover{color:var(--red)}
img{max-width:100%;height:auto}
button,a,summary{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--red);outline-offset:6px}
.dark a:focus-visible{outline-color:#fff}
.container{width:100%;max-width:var(--container-max);padding-inline:var(--container-gutter);margin-inline:auto}
.logo{width:216px;display:block}
.button{display:inline-flex;align-items:center;justify-content:center;gap:32px;background:var(--red);color:#fff;padding:16px 24px;font-size:14px;font-weight:600;border-radius:3px}
.button:hover{background:#a61b1b;color:#fff}
.button.small{padding:12px 20px;gap:22px}
.eyebrow{display:block;font-size:11px;font-weight:600;letter-spacing:.1em;margin-bottom:26px}
.red-square{display:inline-block;width:8px;height:8px;background:var(--pixel);margin-right:9px}
.hero{padding:78px 0 0}
.hero-copy{max-width:580px;font-size:17px;margin-top:28px}
.muted-heading{color:#757575}
.hero-actions{display:flex;align-items:center;gap:32px;margin-top:32px}
.text-link{font-weight:600;font-size:14px;display:flex;gap:26px}
.outline-art{height:330px;position:relative;max-width:360px;margin-left:auto}
.art-grid{position:absolute;inset:0;background-image:linear-gradient(#eee 1px,transparent 1px),linear-gradient(90deg,#eee 1px,transparent 1px);background-size:30px 30px;mask-image:radial-gradient(ellipse,#000,transparent 72%)}
.outline-block{position:absolute;border:2px solid #141414;width:170px;height:170px;transform:rotate(-12deg)}
.block-one{left:28px;top:65px}
.block-two{left:115px;top:115px;border-color:#b5b5b5;transform:rotate(12deg)}
.solid-pixel{position:absolute;width:64px;height:64px;background:var(--pixel);left:172px;top:54px;transform:rotate(12deg)}
.art-label{position:absolute;bottom:0;left:50px;font-size:9px;font-weight:600;letter-spacing:.14em;color:var(--muted)}
.hero-foot{display:flex;justify-content:space-between;margin-top:70px;padding:23px 0;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}
.hero-foot i{font-style:normal;color:#aaa;margin:0 15px}
.section{padding:96px 0}
.section-heading{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:42px}
.section-heading .eyebrow{margin-bottom:18px}
.section-heading>p{font-size:13px}
.work{padding-top:70px}
.project-preview{height:330px;padding:24px;overflow:hidden;position:relative}
.mock-nav{font-weight:700;font-size:18px;display:flex;justify-content:space-between;align-items:center}
.mock-nav>span{font-size:7px;letter-spacing:.1em}
.mock-title{font-size:27px;letter-spacing:-.05em;line-height:1.1;font-weight:600;position:relative;z-index:1;margin-top:30px}
.orbit{background:#e8e5fa;color:#292344}
.orbit-graphic{position:absolute;width:170px;height:170px;border:1px solid #aaa0d3;border-radius:50%;bottom:7px;right:25px;transform:rotate(-30deg)}
.orbit-graphic:before,.orbit-graphic:after{content:'';position:absolute;border:1px solid #aaa0d3;border-radius:50%;inset:20px -20px}
.orbit-graphic:after{inset:45px -32px}
.orbit-graphic span{position:absolute;width:65px;height:65px;border-radius:50%;background:linear-gradient(135deg,#ada0ee,#53438b);top:50px;left:50px;box-shadow:12px 12px 30px #9e93c5}
.mock-chip{font-size:7px;background:#292344;color:#fff;display:inline-block;padding:7px 10px;margin-top:18px}
.forma{background:#e8e4db;color:#343930}
.forma .mock-title{position:absolute;bottom:23px;font-size:25px}
.architecture{position:absolute;right:18px;top:65px;width:200px;height:220px;transform:skewY(-10deg);display:flex;gap:7px;align-items:center}
.architecture div{height:165px;width:60px;background:linear-gradient(90deg,#a6aa96,#c6c9b9);box-shadow:12px 10px 0 #838978}
.architecture div:nth-child(2){height:200px}
.architecture div:nth-child(3){height:125px}
.ember{background:#f0d9cc;color:#603b2f}
.bottles{position:absolute;bottom:10px;right:36px;display:flex;align-items:end;gap:20px;transform:rotate(8deg)}
.bottles>div{height:135px;width:65px;background:linear-gradient(90deg,#a85435,#d69168,#b76645);border-radius:9px 9px 12px 12px;position:relative;box-shadow:10px 10px 15px #b9896c55;display:grid;place-items:center}
.bottles>div:before{content:'';position:absolute;top:-22px;width:34px;height:25px;background:#422b22;border-radius:4px 4px 0 0}
.bottles>div:nth-child(2){height:100px;width:82px;background:linear-gradient(90deg,#e0ae8c,#f4dbc0,#e8c2a1)}
.bottles span{font-size:14px;font-weight:600;line-height:1.4;text-align:center}
.bottles small{font-size:5px;letter-spacing:.12em}
.project-info{padding:20px 0}
.project-info h3{font-size:20px;display:flex;justify-content:space-between}
.project-info h3 span{font-size:18px;color:var(--muted)}
.project-info p{font-size:12px;margin-top:8px}
.concept{font-size:9px;letter-spacing:.08em;color:var(--muted);display:block;margin-top:12px}
.dark{background:#141414;color:#fff}
.dark p{color:#bdbdbd}
.dark .eyebrow{color:#bdbdbd}
.service{background:#202020;border:1px solid #383838;padding:30px}
.service-number{font-size:10px;letter-spacing:.08em;color:#bdbdbd;display:block;margin-bottom:20px}
.service h3{font-size:24px;margin-bottom:14px}
.service p{font-size:13px}
.service small{display:block;color:#bdbdbd;font-size:10px;margin-top:10px}
.featured{height:100%;position:relative;overflow:hidden;padding:38px}
.featured h3{font-size:36px}
.featured p{max-width:380px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:25px;position:relative;z-index:1}
.tags span{border:1px solid #484848;border-radius:3px;padding:6px 10px;color:#ddd;font-size:10px}
.service-link{display:inline-block;margin-top:35px;font-size:13px;color:#fff;border-bottom:1px solid #888;padding-bottom:6px}
.service-link:hover{color:#fff;border-color:#e53935}
.service-stack{display:grid;gap:16px}
.service-drawing{display:flex;gap:13px;margin-top:45px;transform:rotate(-10deg);opacity:.6}
.service-drawing span{width:100px;height:100px;border:1px solid #888}
.service-drawing span:last-child{background:#e53935;border:0;width:50px;height:50px}
.about h2{margin-top:18px}
.founder-card{display:flex;align-items:center;gap:18px;margin-top:42px}
.founder-monogram{display:grid;place-items:center;position:relative;background:#f5f5f5;width:74px;height:74px;font-size:23px;font-weight:600}
.founder-monogram span{position:absolute;right:0;bottom:0;width:13px;height:13px;background:var(--pixel)}
.founder-card strong{font-size:14px}
.founder-card p{font-size:11px;margin-top:4px}
.about-copy>p{margin-bottom:18px;font-size:15px}
.about-copy .lead-copy{font-size:23px;line-height:1.5;color:var(--ink)}
.about-copy .draft-note{font-size:11px}
.process{margin-top:32px}
.process article{display:flex;gap:24px;border-top:1px solid var(--line);padding:21px 0}
.process article>span{color:var(--red);font-size:11px;font-weight:600;margin-top:5px}
.process h3{font-size:17px}
.process p{font-size:13px;margin-top:8px}
.faq{padding-top:25px}
.faq h2{margin-top:18px}
details{border-top:1px solid var(--line);padding:22px 0}
details:last-child{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;font-weight:600;font-size:14px;display:flex;align-items:center;justify-content:space-between;gap:20px}
summary::-webkit-details-marker{display:none}
summary span{font-size:24px;font-weight:400;color:var(--muted)}
details[open] summary span{transform:rotate(45deg)}
details p{font-size:13px;line-height:1.7;padding-top:16px;max-width:560px}
.final-cta{padding:78px 0}
.final-cta h2{font-size:clamp(36px,4.5vw,60px)}
.accent{color:var(--pixel)}
.final-cta p{margin-top:22px;max-width:500px;font-size:14px}
.contact-action{display:flex;justify-content:end}
.contact-note{border:1px solid #383838;padding:20px}
footer{border-top:1px solid #383838;padding:35px 0 24px}
.footer-top,.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px}
.footer-top p,.footer-top>a:last-child{font-size:11px}
.footer-bottom{border-top:1px solid #383838;margin-top:30px;padding-top:20px;font-size:10px;color:#bdbdbd}
.skip-link{position:fixed;top:-100px;left:15px;z-index:30;background:#fff;padding:12px}
.skip-link:focus{top:10px}

@media(max-width:991px){.outline-art{margin:0 auto}
.hero-foot{margin-top:40px}
.section-heading{align-items:start}
.section-heading>p{max-width:220px}
.project-preview{height:280px;padding:18px}
.mock-title{font-size:23px}
.architecture{right:-15px;width:170px}
.contact-action{justify-content:start}
.footer-top p{display:none}
}
@media(max-width:767px){.container{padding-left:22px;padding-right:22px}
.logo{width:180px}
.hero{padding-top:45px}
.hero-copy{font-size:15px}
.hero-actions{gap:20px;flex-wrap:wrap}
.button{padding:14px 19px}
.text-link{font-size:12px;gap:12px}
.outline-art{height:290px;width:300px}
.hero-foot{font-size:10px;gap:15px}
.hero-foot span:last-child{display:none}
.section{padding:62px 0}
.work{padding-top:45px}
.section-heading{display:block;margin-bottom:30px}
.section-heading>p{max-width:none;margin-top:20px}
.project-preview{height:350px}
.mock-title{font-size:30px}
.architecture{right:35px;top:70px;width:220px}
.orbit-graphic{width:200px;height:200px;right:45px;bottom:20px}
.bottles{right:55px;bottom:25px}
.project-info{padding-bottom:8px}
.featured{padding:27px}
.featured h3{font-size:30px}
.service{padding:26px}
.service-drawing{margin-top:30px}
.service-drawing span{width:70px;height:70px}
.founder-card{margin-top:25px}
.faq{padding-top:10px}
.footer-top{flex-wrap:wrap}
.footer-bottom{align-items:start;font-size:9px}
.final-cta{padding:55px 0}
summary{font-size:13px}
.eyebrow{font-size:10px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*,*:before,*:after{transition:none!important;animation:none!important}
}

