@font-face{
font-family:'Geist';
font-style:normal;
font-weight:300 700;
font-display:swap;
src:url('fonts/geist-latin.woff2') format('woff2');
}
@font-face{
font-family:'Geist Mono';
font-style:normal;
font-weight:400 600;
font-display:swap;
src:url('fonts/geist-mono-latin.woff2') format('woff2');
}

body{
margin:0;
background:#050505;
color:white;
font-family:'Geist',-apple-system,BlinkMacSystemFont,sans-serif;
line-height:1.7;
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}

html{
scroll-behavior:smooth;
}

.background-glow{
position:fixed;
border-radius:50%;
filter:blur(70px);
opacity:.12;
z-index:-1;
will-change:transform;
}

.glow-1{
width:500px;
height:500px;
background:white;
top:-200px;
left:-100px;
}

.glow-2{
width:450px;
height:450px;
background:#444;
bottom:-200px;
right:-100px;
}

.site-nav{
display:flex;
justify-content:space-between;
align-items:center;
gap:2rem;
padding:1.5rem 3rem;
border-bottom:1px solid rgba(255,255,255,.08);
}

.site-nav-logo{
font-weight:500;
font-size:1rem;
letter-spacing:-.01em;
color:rgba(255,255,255,.92);
text-decoration:none;
transition:color .25s ease;
}

.site-nav-links{
display:flex;
align-items:center;
gap:1.75rem;
}

.site-nav-links a{
font-family:'Geist Mono',ui-monospace,SFMono-Regular,monospace;
font-weight:400;
text-transform:uppercase;
letter-spacing:.2em;
font-size:.7rem;
color:rgba(255,255,255,.5);
text-decoration:none;
transition:color .25s ease;
}

.site-nav-logo:hover,
.site-nav-links a:hover{
color:rgba(255,255,255,.9);
}

.site-nav [aria-current="page"]{
color:rgba(255,255,255,.95);
}

.hero{
min-height:100vh;
display:flex;
justify-content:center;
align-items:center;
padding:4rem 3rem;
text-align:center;
position:relative;
border-bottom:1px solid rgba(255,255,255,.08);
}

.hero-overlay{
position:absolute;
inset:0;
background:
radial-gradient(circle at center, rgba(255,255,255,.08), transparent 60%);
}

.hero-content{
max-width:850px;
margin:auto;
position:relative;
z-index:2;
}

.eyebrow,
.section-label{
font-family:'Geist Mono',ui-monospace,SFMono-Regular,monospace;
font-weight:400;
text-transform:uppercase;
letter-spacing:.2em;
font-size:.7rem;
color:rgba(255,255,255,.5);
margin-bottom:1.5rem;
}

h1{
font-size:clamp(3.8rem,8vw,6.5rem);
font-weight:600;
line-height:.95;
letter-spacing:-.05em;
margin:1rem 0 2rem;
white-space:nowrap;
}

.hero.inner h1{
white-space:normal;
}

h2{
font-size:clamp(2.2rem,4vw,3.8rem);
font-weight:500;
line-height:1.08;
letter-spacing:-.03em;
margin:0;
}

h3{
font-size:1.35rem;
font-weight:500;
letter-spacing:-.012em;
margin-top:0;
}

.hero-text,
.text-content,
.about-text,
.card p{
color:rgba(255,255,255,.7);
}

.service-text{
margin:0;
padding:1.5rem 1.75rem;
border-top:1px solid rgba(255,255,255,.08);
color:rgba(255,255,255,.6);
font-size:.95rem;
}

.hero-text{
font-size:1.3rem;
font-weight:300;
max-width:720px;
margin:auto;
line-height:1.8;
}

.hero-buttons{
margin-top:2.5rem;
}

.button{
display:inline-block;
padding:1rem 1.9rem;
margin:.5rem;
border-radius:999px;
text-decoration:none;
font-weight:500;
letter-spacing:.005em;
border:1px solid rgba(255,255,255,.14);
transition:all .35s ease;
}

.button:hover{
transform:translateY(-2px);
}

.primary{
background:white;
color:black;
}

.secondary{
color:white;
}

.secondary:hover{
background:rgba(255,255,255,.08);
}

.hero-tags{
margin-top:2.5rem;
letter-spacing:.22em;
font-size:.8rem;
color:rgba(255,255,255,.38);
}

.service-panel{
margin-top:3rem;
padding:0;
border:1px solid rgba(255,255,255,.08);
border-radius:28px;
background:rgba(255,255,255,.03);
overflow:hidden;
}

.service-grid{
list-style:none;
margin:0;
padding:0;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:0;
}

.service-grid li{
display:flex;
flex-direction:column;
gap:.55rem;
padding:1.75rem 1.5rem;
}

.service-grid li:nth-child(n+4){
border-top:1px solid rgba(255,255,255,.08);
}

.service-grid li + li{
border-left:1px solid rgba(255,255,255,.05);
}

.service-grid li:nth-child(3n+1){
border-left:none;
}

.service-num{
font-family:'Geist Mono',ui-monospace,SFMono-Regular,monospace;
font-weight:500;
font-size:.7rem;
letter-spacing:.18em;
color:rgba(255,255,255,.42);
font-variant-numeric:tabular-nums;
}

.service-name{
font-size:1.02rem;
font-weight:500;
color:rgba(255,255,255,.92);
line-height:1.35;
letter-spacing:-.005em;
}

.section{
padding:7rem 3rem;
border-bottom:1px solid rgba(255,255,255,.08);
}

.container{
max-width:1000px;
margin:auto;
}

.two-column{
display:grid;
grid-template-columns:1fr 1fr;
gap:4rem;
align-items:start;
}

h2 + .two-column{
margin-top:3rem;
}

.text-content,
.about-text{
max-width:540px;
margin:0 auto;
}

.project-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:1.5rem;
margin-top:3rem;
}

.card{
background:rgba(255,255,255,.03);
border:1px solid rgba(255,255,255,.08);
border-radius:24px;
padding:2rem;
transition:all .35s ease;
}

.card:hover{
transform:translateY(-4px);
border-color:rgba(255,255,255,.18);
background:rgba(255,255,255,.05);
}

.centered{
text-align:center;
}

.contact-info{
margin-top:2rem;
line-height:2;
}

.contact-info a{
color:inherit;
text-decoration:none;
border-bottom:1px solid rgba(255,255,255,.18);
transition:border-color .25s ease;
}

.contact-info a:hover{
border-bottom-color:rgba(255,255,255,.6);
}

.legal-links{
margin-top:2rem;
}

.legal-links a{
margin:0 1rem;
color:rgba(255,255,255,.7);
}

footer{
text-align:center;
padding:2rem;
color:rgba(255,255,255,.35);
font-size:.9rem;
}

.legal-page{
max-width:780px;
margin:auto;
padding:4rem 2rem 6rem;
}

.legal-back{
margin:0 0 3rem;
font-size:.85rem;
letter-spacing:.05em;
}

.legal-back a{
color:rgba(255,255,255,.55);
text-decoration:none;
}

.legal-back a:hover{
color:rgba(255,255,255,.9);
}

.legal-page h1{
font-size:clamp(2.4rem,5vw,3.6rem);
line-height:1.05;
letter-spacing:-.03em;
white-space:normal;
margin:.5rem 0 .25rem;
}

.legal-meta{
font-family:'Geist Mono',ui-monospace,SFMono-Regular,monospace;
color:rgba(255,255,255,.4);
font-size:.7rem;
text-transform:uppercase;
letter-spacing:.22em;
margin:0 0 3rem;
}

.legal-page h2{
font-size:1.3rem;
margin:2.75rem 0 .75rem;
color:rgba(255,255,255,.95);
letter-spacing:-.005em;
}

.legal-page p{
color:rgba(255,255,255,.72);
margin:.85rem 0;
}

.legal-page ul{
color:rgba(255,255,255,.72);
padding-left:1.4rem;
margin:.85rem 0;
}

.legal-page li{
margin:.35rem 0;
}

.legal-page a{
color:rgba(255,255,255,.92);
text-decoration:underline;
text-underline-offset:3px;
text-decoration-color:rgba(255,255,255,.28);
transition:text-decoration-color .25s ease;
}

.legal-page a:hover{
text-decoration-color:rgba(255,255,255,.7);
}

.payment-strip{
margin-top:2.5rem;
padding-top:2rem;
border-top:1px solid rgba(255,255,255,.08);
}

.payment-text{
color:rgba(255,255,255,.7);
font-size:.9rem;
letter-spacing:.04em;
margin:0;
line-height:1.7;
}

.payment-meta{
font-family:'Geist Mono',ui-monospace,SFMono-Regular,monospace;
color:rgba(255,255,255,.4);
font-size:.72rem;
text-transform:uppercase;
letter-spacing:.22em;
margin:.75rem 0 0;
}

.contact-page .legal-back{
text-align:left;
margin-bottom:2rem;
}

.contact-intro{
color:rgba(255,255,255,.7);
max-width:560px;
margin:1.5rem auto 0;
}

.contact-form{
max-width:560px;
margin:3rem auto 0;
text-align:left;
background:rgba(255,255,255,.03);
border:1px solid rgba(255,255,255,.08);
border-radius:24px;
padding:2.25rem;
}

.contact-form .field{
margin-bottom:1.5rem;
}

.contact-form label{
display:block;
font-family:'Geist Mono',ui-monospace,SFMono-Regular,monospace;
font-weight:500;
text-transform:uppercase;
letter-spacing:.18em;
font-size:.68rem;
color:rgba(255,255,255,.55);
margin-bottom:.6rem;
}

.contact-form input,
.contact-form textarea,
.contact-form select{
width:100%;
box-sizing:border-box;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.1);
border-radius:14px;
color:white;
font-family:inherit;
font-size:1rem;
line-height:1.6;
padding:.85rem 1rem;
transition:border-color .25s ease, background .25s ease;
}

.contact-form input:hover,
.contact-form textarea:hover,
.contact-form select:hover{
border-color:rgba(255,255,255,.18);
}

.contact-form input:focus,
.contact-form textarea:focus{
outline:none;
border-color:rgba(255,255,255,.35);
background:rgba(255,255,255,.06);
}

.contact-form select{
appearance:none;
-webkit-appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23ffffff' stroke-opacity='.5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:right 1rem center;
background-size:12px 8px;
padding-right:2.75rem;
cursor:pointer;
}

.contact-form select:focus{
outline:none;
border-color:rgba(255,255,255,.35);
background-color:rgba(255,255,255,.06);
}

.contact-form textarea{
resize:vertical;
min-height:140px;
}

.hp-field{
position:absolute;
left:-10000px;
width:1px;
height:1px;
overflow:hidden;
}

.turnstile-field{
display:flex;
justify-content:center;
margin:.5rem 0 1.75rem;
}

.form-actions{
text-align:center;
}

.form-actions .button{
margin:0;
}

.form-actions .button[disabled]{
opacity:.45;
cursor:not-allowed;
transform:none;
}

.form-status{
min-height:1.4em;
margin:1.25rem 0 0;
text-align:center;
font-size:.92rem;
color:rgba(255,255,255,.6);
}

.form-status.is-pending{
color:rgba(255,255,255,.7);
}

.form-status.is-error{
color:#f0a6a6;
}

.form-success{
display:none;
text-align:center;
padding:1.5rem .5rem .5rem;
}

.contact-form.is-sent .field,
.contact-form.is-sent .form-actions,
.contact-form.is-sent .form-status{
display:none;
}

.contact-form.is-sent .form-success{
display:block;
animation:fadeUp .5s ease both;
}

.success-icon{
color:#9be7b7;
margin-bottom:1.5rem;
}

.success-headline{
font-size:clamp(1.6rem,3.2vw,2.2rem);
font-weight:500;
letter-spacing:-.02em;
line-height:1.15;
margin:0 0 1rem;
color:white;
}

.success-body{
color:rgba(255,255,255,.72);
max-width:420px;
margin:0 auto 2rem;
font-size:1.02rem;
line-height:1.65;
}

.success-link{
background:none;
border:none;
padding:0;
cursor:pointer;
font-family:'Geist Mono',ui-monospace,SFMono-Regular,monospace;
font-size:.75rem;
text-transform:uppercase;
letter-spacing:.2em;
color:rgba(255,255,255,.6);
border-bottom:1px solid rgba(255,255,255,.2);
padding-bottom:.3rem;
transition:color .25s ease, border-color .25s ease;
}

.success-link:hover{
color:white;
border-bottom-color:rgba(255,255,255,.6);
}

@keyframes fadeUp{
from{opacity:0;transform:translateY(8px);}
to{opacity:1;transform:translateY(0);}
}

.contact-meta{
display:flex;
justify-content:center;
align-items:stretch;
gap:0;
margin-top:3.5rem;
flex-wrap:wrap;
}

.contact-meta-item{
padding:.4rem 2.5rem;
display:flex;
flex-direction:column;
align-items:center;
gap:.55rem;
}

.contact-meta-item + .contact-meta-item{
border-left:1px solid rgba(255,255,255,.1);
}

.contact-meta-label{
font-family:'Geist Mono',ui-monospace,SFMono-Regular,monospace;
font-weight:500;
text-transform:uppercase;
letter-spacing:.22em;
font-size:.68rem;
color:rgba(255,255,255,.45);
margin:0;
}

.contact-meta-value{
color:rgba(255,255,255,.92);
text-decoration:none;
font-size:1.05rem;
letter-spacing:-.005em;
border-bottom:1px solid transparent;
transition:border-color .25s ease, color .25s ease;
}

.contact-meta-value:hover{
border-bottom-color:rgba(255,255,255,.5);
color:white;
}

@media(max-width:1100px){

.hero-content{
max-width:760px;
}

.two-column{
grid-template-columns:1fr;
gap:2rem;
}

h1{
font-size:clamp(3.2rem,9vw,5.5rem);
white-space:normal;
}

h2{
font-size:clamp(2rem,5vw,3rem);
}

.service-grid{
grid-template-columns:repeat(2,1fr);
}

.service-grid li:nth-child(n+4){
border-top:1px solid rgba(255,255,255,.08);
}

.service-grid li:nth-child(n+3){
border-top:1px solid rgba(255,255,255,.08);
}

.service-grid li + li{
border-left:1px solid rgba(255,255,255,.05);
}

.service-grid li:nth-child(3n+1){
border-left:1px solid rgba(255,255,255,.05);
}

.service-grid li:nth-child(2n+1){
border-left:none;
}

}

@media(max-width:700px){

.site-nav{
flex-direction:column;
gap:1rem;
padding:1.5rem;
}

.site-nav-links{
gap:1.25rem;
}

.hero{
padding:3rem 1.5rem;
}

.section{
padding:5rem 1.5rem;
}

.hero-text{
font-size:1.05rem;
}

.button{
width:100%;
max-width:260px;
}

.legal-links a{
display:block;
margin:.75rem 0;
}

.service-grid{
grid-template-columns:1fr;
}

.service-grid li + li{
border-left:none;
border-top:1px solid rgba(255,255,255,.08);
}

.service-grid li:nth-child(2n+1),
.service-grid li:nth-child(3n+1){
border-left:none;
}

.contact-form{
padding:1.5rem;
border-radius:18px;
}

.contact-meta{
flex-direction:column;
gap:0;
}

.contact-meta-item{
padding:1.25rem 1rem;
}

.contact-meta-item + .contact-meta-item{
border-left:none;
border-top:1px solid rgba(255,255,255,.08);
}

}
