/* Vernako — restored original editorial visual system */
@font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;src:url("/assets/fonts/geist.woff2") format("woff2")}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:100 900;font-display:swap;src:url("/assets/fonts/geist-mono.woff2") format("woff2")}
:root{--font-geist-sans:Geist,"Helvetica Neue",Arial,sans-serif;--font-geist-mono:"Geist Mono",Consolas,monospace}
html{overflow-x:clip}body{overflow-x:clip}body.menu-open{overflow:hidden}
img,svg{display:block;max-width:100%}button,input,select,textarea{font:inherit}ol,ul{list-style:none;padding:0}h1,h2,h3,h4,p{margin-top:0}
:root,.dark{
--background:#07090a;
--foreground:#f2f0e9;
--primary:#f2f0e9;
--primary-foreground:#07090a;
--muted:#12181a;
--muted-foreground:#a1a8a2;
--border:#20292b;
--ring:#e8b466;
--accent:#e8b466;
--radius:1rem;
--card:#0e1214;
--card-foreground:#f2f0e9;
--popover:#0e1214;
--popover-foreground:#f2f0e9;
--secondary:#161d1f;
--secondary-foreground:#f2f0e9;
--input:#2b3639;
--destructive:#ff8989;
--ease:cubic-bezier(.22,.7,.3,1)}
*{
box-sizing:border-box}
html{
scroll-behavior:smooth;
scroll-padding-top:100px}
body{
background:var(--background);
color:var(--foreground);
font-family:var(--font-geist-sans),Arial,Helvetica,sans-serif;
-webkit-font-smoothing:antialiased;
margin:0}
a{
color:inherit;
text-decoration:none}
button,input,textarea{
font:inherit}
button,a{
-webkit-tap-highlight-color:transparent}
button{
cursor:pointer}
:is(button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible){
outline-offset:6px;
outline:2px solid #efc37e}
::selection{
color:#07090a;
background:#e8b466}
.container{
width:min(1160px,100% - 80px);
margin-inline:auto}
.eyebrow{
letter-spacing:.16em;
font-size:12px;
font-weight:500;
line-height:1.6}
.muted{
color:#848b85}
.gradient-text{
color:#0000;
background:linear-gradient(115deg,#f6e6c9 4%,#7fae86 42%,#17564f 98%);
background-size:180% 180%;
-webkit-background-clip:text;
background-clip:text;
animation:8s ease-in-out infinite alternate gradient-drift}
.skip-link{
z-index:100;
color:#000;
background:#fff;
padding:12px;
position:fixed;
top:12px;
left:12px;
transform:translateY(-160%)}
.skip-link:focus{
transform:none}
.section{
padding-block:116px}
.section-heading{
justify-content:space-between;
align-items:flex-end;
gap:40px;
margin-bottom:48px;
display:flex}
.section-label{
color:#a3ac9f;
margin:0 0 23px;
font-size:11px}
.section h2,.build-head h2,.reach-copy h2{
letter-spacing:-.055em;
text-wrap:balance;
margin:0;
font-size:clamp(39px,4.5vw,59px);
font-weight:500;
line-height:1.12}
.heading-description{
color:#8f9690;
margin:0 0 5px;
font-size:16px;
line-height:1.85}
.text-link{
color:#e9bd7c;
align-items:center;
gap:10px;
min-width:44px;
min-height:44px;
font-size:14px;
line-height:1.6;
display:inline-flex}
.text-link:hover{
color:#fff}
.tags{
flex-wrap:wrap;
gap:6px;
margin-top:auto;
display:flex}
.tags span{
color:#b1b8b1;
border:1px solid #ffffff16;
border-radius:100px;
padding:6px 9px;
font-size:10px}
.round-arrow{
border:1px solid #ffffff20;
border-radius:50%;
flex-shrink:0;
place-items:center;
width:45px;
height:45px;
transition:background .25s,color .25s;
display:grid}
:where([data-reveal]){
opacity:0;
transition:opacity .85s var(--ease),translate .85s var(--ease);
translate:0 26px}
:where([data-reveal].is-in){
opacity:1;
translate:none}
.s0{
--sp:var(--p0)}
.s1{
--sp:var(--p1)}
.s2{
--sp:var(--p2)}
.s3{
--sp:var(--p3)}
.s4{
--sp:var(--p4)}
.scene-live .stage-in{
opacity:var(--sp);
translate:0 calc((1 - var(--sp)) * 24px)}
.scene-live .stage-mark{
opacity:calc(.3 + var(--sp) * .7)}
.scene-live .stage-mark span{
color:#e3bd85}
.site-header{
z-index:50;
-webkit-backdrop-filter:blur(20px);
backdrop-filter:blur(20px);
background:#080809d1;
border-bottom:1px solid #ffffff0b;
position:fixed;
inset:0 0 auto}
.nav{
justify-content:space-between;
align-items:center;
gap:26px;
height:84px;
display:flex}
.logo{
width:142px;
height:30px;
display:block}
.logo img{
object-fit:contain;
object-position:left center;
width:100%;
height:100%;
display:block}
.desktop-links{
align-items:center;
gap:30px;
display:flex}
.desktop-links a{
color:#a7aea8;
font-size:14px;
transition:color .2s;
position:relative}
.desktop-links a:hover,.desktop-links a.is-active{
color:#fff}
.desktop-links a.is-active:after{
content:"";
background:#e8b466;
height:1px;
position:absolute;
bottom:-8px;
left:0;
right:0}
.scroll-bar{
height:1px;
transform:scaleX(var(--scroll,0));
transform-origin:0;
background:linear-gradient(90deg,#1f6f63,#f2d5a4);
position:absolute;
bottom:-1px;
left:0;
right:0}
.button{
color:#0e1214;
background:#f2f0e9;
border:1px solid #0000;
border-radius:100px;
justify-content:center;
align-items:center;
gap:20px;
padding:17px 25px;
font-size:14px;
font-weight:550;
line-height:1.4;
transition:transform .25s,background .25s;
display:inline-flex}
.button:hover{
background:#ddd3fa;
transform:translateY(-3px)}
.button svg{
transition:transform .25s}
.button:hover svg{
transform:translate(2px,-2px)}
.button-outline{
color:#e4e8e2;
background:0 0;
border-color:#33313e}
.button-outline:hover{
background:#ffffff08}
.nav-cta{
gap:13px;
padding:11px 18px;
font-size:13px}
.menu-button{
color:#fff;
background:0 0;
border:0;
padding:8px;
display:none}
.mobile-nav{
background:#0e1214;
padding:12px 26px 26px;
display:none}
.mobile-nav a{
border-bottom:1px solid #ffffff12;
justify-content:space-between;
padding:15px 0;
font-size:17px;
display:flex}
.hero{
justify-content:center;
align-items:center;
min-height:max(760px,100svh);
padding:145px 0 130px;
display:flex;
position:relative;
overflow:hidden}
.hero-glow{
pointer-events:none;
background:radial-gradient(#1d635724 0%,#22403c0b 46%,#0000 70%);
width:1100px;
height:780px;
position:absolute;
top:-220px;
left:50%;
transform:translate(-50%);
animation:9s ease-in-out infinite alternate glow-drift}
.hero-content{
text-align:center;
position:relative}
.hero-badge{
color:#b6bdb3;
background:#7ab39a05;
border:1px solid #7ab39a26;
border-radius:100px;
align-items:center;
gap:10px;
padding:8px 14px;
animation:.8s both enter;
display:inline-flex}
.status-dot{
background:#5fae8e;
border-radius:50%;
flex-shrink:0;
width:6px;
height:6px;
display:inline-block;
box-shadow:0 0 11px #7ab39a50;
animation:2.4s ease-in-out infinite dot-pulse}
.hero h1{
letter-spacing:-.063em;
margin:29px auto 24px;
font-size:clamp(56px,7.5vw,99px);
font-weight:550;
line-height:1.025;
text-wrap:balance;
animation:.9s .1s both enter}
.hero-content>p{
color:#979e98;
margin:0;
font-size:17px;
line-height:1.8;
animation:.9s .2s both enter}
.hero-actions{
justify-content:center;
gap:12px;
margin-top:33px;
animation:.9s .3s both enter;
display:flex}
.scroll-cue{
color:#828884;
letter-spacing:.2em;
flex-direction:column;
align-items:center;
gap:13px;
font-size:10px;
display:flex;
position:absolute;
bottom:32px;
left:50%;
transform:translate(-50%)}
.scroll-line{
background:#ffffff12;
width:1px;
height:37px;
overflow:hidden}
.scroll-line:after{
content:"";
background:#c2b190;
width:1px;
height:22px;
animation:2.1s var(--ease) infinite scroll;
display:block}
.hero-corner{
letter-spacing:.16em;
color:#747a76;
font-size:10px;
position:absolute;
bottom:45px;
left:40px}
.hero-corner.right{
left:auto;
right:40px}
.industries{
border-top:1px solid #ffffff0a;
border-bottom:1px solid #ffffff0a;
padding:48px 0 55px}
.industries>p{
text-align:center;
color:#828985;
margin:0 0 28px;
font-size:11px}
.marquee{
overflow:hidden;
-webkit-mask-image:linear-gradient(90deg,#0000,#000 10% 90%,#0000);
mask-image:linear-gradient(90deg,#0000,#000 10% 90%,#0000)}
.marquee:hover .marquee-track{
animation-play-state:paused}
.marquee-track{
width:max-content;
animation:24s linear infinite marquee-loop;
will-change:transform;
display:flex}
.marquee-group{
display:flex}
.marquee-group>span{
white-space:nowrap;
letter-spacing:-.04em;
color:#8a908b;
align-items:center;
font-size:29px;
font-weight:450;
display:flex}
.marquee-star{
color:#70776f;
margin:0 32px;
font-size:17px}
.build{
height:280svh;
position:relative}
.build-sticky{
flex-direction:column;
justify-content:center;
align-items:center;
gap:clamp(12px,1.8svh,22px);
height:100svh;
padding:84px 0 14px;
display:flex;
position:sticky;
top:0;
overflow:hidden}
.build-head{
text-align:center}
.build-head .section-label{
margin-bottom:14px}
.build-head h2{
font-size:clamp(30px,3.6vw,48px);
line-height:1.1}
.build-stage{
justify-content:center;
display:flex}
.build-stage .browser-frame{
width:min(92vw,980px)}
.scene-live .build-stage .browser-frame{
transform:translateY(calc((1 - var(--p0)) * 30px)) scale(calc(.968 + var(--p0) * .032))}
.brand-preview{
color:#f5f3ed;
background:radial-gradient(circle at 88% 12%,#17564f70,transparent 46%),linear-gradient(140deg,#111719,#07090a);
grid-template-columns:1.02fr .98fr;
align-items:center;
gap:3cqw;
min-height:38cqw;
padding:4cqw;
display:grid;
position:relative;
overflow:hidden}
.brand-preview-copy{z-index:1;position:relative}
.brand-kicker{color:#d9b47b;letter-spacing:.14em;font:10px/1.6 var(--font-geist-mono);margin:0 0 14px}
.brand-preview-copy h3{letter-spacing:-.05em;font-size:clamp(25px,3.5cqw,42px);font-weight:560;line-height:1.06;margin:0 0 16px}
.brand-preview-copy>p:not(.brand-kicker){color:#a5aca6;font-size:clamp(12px,1.25cqw,15px);line-height:1.7;margin:0 0 13px}
.brand-tags{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0 18px}
.brand-tags span{color:#d2d7d0;border:1px solid #ffffff1b;border-radius:999px;padding:7px 9px;font-size:clamp(9px,.95cqw,11px)}
.brand-cta{color:#f0c47e;min-height:44px;align-items:center;gap:8px;font-size:13px;display:inline-flex}
.brand-preview-art{z-index:1;flex-direction:column;gap:9px;display:flex;position:relative}
.vernako-screen{object-fit:cover;aspect-ratio:1200/630;width:100%;height:auto;border:1px solid #ffffff20;border-radius:7px;display:block}
.brand-image-label{color:#7f8981;letter-spacing:.13em;font:9px/1.6 var(--font-geist-mono)}
.build-track{
flex-direction:column;
align-items:center;
gap:14px;
display:flex}
.build-track ol{
letter-spacing:.11em;
text-transform:uppercase;
color:#888f89;
flex-wrap:wrap;
justify-content:center;
gap:clamp(12px,2.6vw,34px);
margin:0;
padding:0;
font-size:11px;
list-style:none;
display:flex}
.stage-mark{
align-items:center;
gap:8px;
display:flex}
.stage-mark span{
color:#6a716b;
font-variant-numeric:tabular-nums}
.build-rail{
background:#ffffff14;
width:min(520px,64vw);
height:1px;
display:block;
position:relative}
.build-rail i{
width:calc(var(--p,0) * 100%);
background:linear-gradient(90deg,#1f6f63,#f2d5a4);
position:absolute;
inset:0 auto 0 0}
.browser-frame{
transform-origin:50% 100%;
border:1px solid #ffffff2e;
border-radius:10px;
position:relative;
overflow:hidden;
box-shadow:0 34px 90px #000a;
container-type:inline-size}
.browser-bar{
color:#77766e;
background:#f0f0ec;
justify-content:space-between;
align-items:center;
height:3.2cqw;
padding:0 1.4cqw;
display:flex}
.browser-bar>span{
background:#e2e2df;
border-radius:.4cqw;
align-items:center;
gap:.6cqw;
padding:.3cqw 7.5cqw;
font-size:.95cqw;
display:flex}
.browser-bar svg{
width:1.2cqw;
height:auto}
.browser-dots{
gap:.5cqw;
display:flex}
.browser-dots i{
background:#c6c6c1;
border-radius:50%;
width:.6cqw;
height:.6cqw;
display:block}
.loom-preview{
color:#20243d;
background:#eef2f7}
.loom-nav{
justify-content:space-between;
align-items:center;
padding:1.6cqw 2.4cqw;
display:flex}
.loom-nav img{
width:12.1cqw;
height:auto}
.loom-nav>div{
gap:2cqw;
font-size:.95cqw;
display:flex}
.loom-nav-button{
color:#fff;
white-space:nowrap;
background:#20243d;
border-radius:.4cqw;
padding:1cqw 1.3cqw;
font-size:.85cqw}
.loom-hero{
isolation:isolate;
background:#e5edf5;
height:37cqw;
position:relative;
overflow:hidden}
.loom-hero>h3{
z-index:2;
text-align:center;
color:#20243d;
letter-spacing:-.055em;
margin:0;
font-size:4.8cqw;
font-weight:800;
line-height:.95;
position:absolute;
top:1.2cqw;
left:0;
right:0}
.loom-house{
object-fit:cover;
object-position:50% 48%;
mix-blend-mode:multiply;
width:100%;
height:26cqw;
position:absolute;
inset:6cqw 0 auto}
.loom-hero-copy{
z-index:1;
color:#20243d;
position:absolute;
bottom:1.8cqw;
left:3cqw;
right:3cqw}
.loom-hero-copy h4{
letter-spacing:-.05em;
text-align:center;
margin:0;
font-size:4.5cqw;
font-weight:800;
line-height:1}
.loom-hero-copy>div{
justify-content:space-between;
align-items:center;
gap:1.5cqw;
margin-top:1.3cqw;
display:flex}
.loom-hero-copy p{
color:#4a5551;
margin:0;
font-size:1cqw;
line-height:1.6}
.loom-book{
color:#fff;
white-space:nowrap;
background:#20243d;
border-radius:100px;
align-items:center;
gap:1.6cqw;
padding:1.2cqw 1.8cqw;
font-size:1cqw;
display:inline-flex}
.loom-book svg{
width:1.4cqw;
height:auto}
.loom-bottom{
color:#394159;
background:#f7f8fa;
justify-content:center;
gap:5cqw;
padding:1.7cqw;
font-size:.95cqw;
display:flex}
.loom-bottom span{
white-space:nowrap;
align-items:center;
gap:.5cqw;
display:flex}
.loom-bottom svg{
width:1.3cqw;
height:auto}
.case-grid{
grid-template-columns:repeat(4,1fr);
gap:24px;
margin-bottom:70px;
display:grid}
.case-fact{
border-top:1px solid #ffffff24;
padding-top:21px}
.case-index{
color:#8a7550;
font-size:12px}
.case-fact h3{
letter-spacing:-.035em;
margin:15px 0 13px;
font-size:22px;
font-weight:500}
.case-fact p{
color:#959c96;
margin:0;
font-size:14px;
line-height:1.8}
.work-grid{
grid-template-columns:1fr 1fr;
gap:18px;
display:grid}
.work-card{
transition:border-color .3s,transform .3s,opacity .85s var(--ease),translate .85s var(--ease);
background:linear-gradient(150deg,#ffffff05,#0000);
border:1px solid #ffffff14;
border-radius:14px;
flex-direction:column;
padding:30px 28px;
display:flex}
.work-thumb{
object-fit:cover;
aspect-ratio:1200/630;
width:100%;
height:auto;
margin:0 0 18px;
border:1px solid #ffffff14;
border-radius:8px;
display:block}
.work-card:hover{
border-color:#b08a4e4d;
transform:translateY(-4px)}
.work-card:hover .round-arrow{
color:#111;
background:#e8b466}
.work-domain{
color:#a3ab9d;
align-items:center;
gap:7px;
margin-bottom:20px;
font-size:11px;
display:inline-flex}
.work-kind{
letter-spacing:.14em;
color:#7a817b;
font-size:10px}
.work-card h3{
letter-spacing:-.035em;
margin:13px 0 15px;
font-size:27px;
font-weight:500}
.work-card p{
color:#9aa19a;
margin:0 0 30px;
font-size:15px;
line-height:1.8}
.work-open{
color:#e9bd7c;
justify-content:space-between;
align-items:center;
gap:20px;
margin-top:auto;
font-size:14px;
display:flex}
.work-card-open{
background:linear-gradient(150deg,#7ab39a0a,#0000);
border-style:dashed}
.services-section{
background:#0b0f10;
border-block:1px solid #ffffff0a}
.service-grid{
grid-template-columns:repeat(3,1fr);
gap:18px;
min-width:0;
display:grid}
.service{
transition:border-color .3s,opacity .85s var(--ease),translate .85s var(--ease);
background:linear-gradient(150deg,#ffffff04,#0000);
border:1px solid #ffffff12;
border-radius:13px;
flex-direction:column;
align-items:flex-start;
padding:30px 27px;
display:flex}
.service:hover{
border-color:#b08a4e4d}
.service-top{
color:#d3a866;
justify-content:space-between;
align-items:center;
width:100%;
margin-bottom:38px;
display:flex}
.service-top>span{
color:#6f766f;
font-size:12px}
.service h3{
letter-spacing:-.035em;
max-width:240px;
min-height:63px;
margin:0 0 19px;
font-size:26px;
font-weight:450;
line-height:1.2}
.service>p{
color:#9ea59e;
margin:0 0 25px;
font-size:16px;
line-height:1.8}
.service .text-link{
margin-top:30px}
.about-section{
grid-template-columns:1fr 1fr;
align-items:center;
gap:86px;
min-width:0;
display:grid}
.about-art{
aspect-ratio:1;
background:radial-gradient(at 50% 40%,#12201d,#07090a 72%);
border:1px solid #ffffff12;
border-radius:10px;
place-items:center;
display:grid;
position:relative;
overflow:hidden}
.about-art>img{
object-fit:contain;
width:76%;
height:auto;
margin:auto;
position:absolute;
inset:0}
.about-art-label{
text-align:center;
letter-spacing:.15em;
color:#8f9691;
font-size:9px;
position:absolute;
bottom:27px;
left:0;
right:0}
.about-copy h2{
margin-bottom:26px;
font-size:63px;
line-height:1.04}
.about-copy>p:not(.eyebrow){
color:#9ea59e;
margin:0 0 17px;
font-size:16px;
line-height:1.8}
.about-copy .text-link{
margin-top:12px}
.reach{
background:#090d0e;
border-block:1px solid #ffffff0f;
align-items:center;
display:grid;
position:relative;
overflow:hidden}
.reach-art{
will-change:transform;
transform:translateY(var(--shift,0px));
background:radial-gradient(58% 52% at 50% 46%,#1a615526,#0000 70%),repeating-linear-gradient(90deg,#ffffff09 0 1px,#0000 1px 86px),repeating-linear-gradient(0deg,#ffffff07 0 1px,#0000 1px 86px);
position:absolute;
inset:-18% -6%;
-webkit-mask-image:radial-gradient(#000 32%,#0000 76%);
mask-image:radial-gradient(#000 32%,#0000 76%)}
.reach-copy{
text-align:center;
max-width:760px;
padding-block:clamp(90px,13vw,150px);
position:relative}
.reach-copy>p:not(.eyebrow){
color:#98a099;
max-width:620px;
margin:26px auto 0;
font-size:16px;
line-height:1.9}
.process-section{
border-top:1px solid #ffffff10;
padding-top:98px}
.process-grid{
grid-template-columns:repeat(4,1fr);
gap:28px;
margin-top:56px;
display:grid}
.process-step{
border-top:1px solid #ffffff24;
padding-top:21px}
.step-top{
color:#8a7550;
justify-content:space-between;
margin-bottom:34px;
font-size:13px;
display:flex}
.step-top svg{
color:#474d48}
.process-step h3{
letter-spacing:-.035em;
margin:0 0 16px;
font-size:25px;
font-weight:450}
.process-step p{
color:#9b94a4;
min-height:105px;
margin:0 0 23px;
font-size:14px;
line-height:1.85}
.step-detail{
color:#757c76;
font-size:11px;
line-height:1.8}
.faq-section{
background:#0b0f10;
border-top:1px solid #ffffff0f}
.faq-list details{
border-top:1px solid #ffffff14}
.faq-list details:last-child{
border-bottom:1px solid #ffffff14}
.faq-list summary{
letter-spacing:-.02em;
cursor:pointer;
justify-content:space-between;
align-items:center;
gap:26px;
padding:25px 0;
font-size:18px;
list-style:none;
transition:color .2s;
display:flex}
.faq-list summary::-webkit-details-marker{
display:none}
.faq-list summary:hover{
color:#eecb92}
.faq-icon{
color:#dcb87f;
width:34px;
height:34px;
transition:transform .3s var(--ease),background .3s;
border:1px solid #ffffff1c;
border-radius:50%;
flex-shrink:0;
place-items:center;
display:grid}
.faq-list details[open] .faq-icon{
background:#e8b4661f;
transform:rotate(45deg)}
.faq-list details>p{
color:#959c96;
max-width:780px;
margin:0 0 28px;
font-size:15px;
line-height:1.9}
.contact-section{
background:#0a1012;
border-block:1px solid #ffffff10;
padding:109px 0;
position:relative;
overflow:hidden}
.contact-glow{
pointer-events:none;
background:radial-gradient(at 5% 90%,#14574c21,#0000 65%);
position:absolute;
inset:0}
.contact-grid{
grid-template-columns:1.1fr 1fr;
gap:100px;
min-width:0;
display:grid;
position:relative}
.contact-grid>*{
min-width:0}
.contact-copy .eyebrow{
align-items:center;
gap:10px;
display:flex}
.contact-copy h2{
letter-spacing:-.06em;
margin:0 0 26px;
font-size:clamp(44px,5.1vw,66px);
font-weight:500;
line-height:1.06}
.contact-copy>p:not(.eyebrow){
color:#9ba29b;
font-size:16px;
line-height:1.9}
.email-link{
letter-spacing:-.02em;
overflow-wrap:anywhere;
border-bottom:1px solid #5d6f5f;
align-items:center;
gap:17px;
width:fit-content;
margin-top:35px;
padding-bottom:9px;
font-size:17px;
display:flex}
.contact-name{
color:#7e857f;
margin-top:12px;
font-size:12px;
display:block}
.contact-form{
padding-top:10px}
.contact-form label{
color:#c3c9c2;
margin-bottom:25px;
font-size:14px;
display:block}
.contact-form input,.contact-form textarea{
color:#f0f2ee;
background:#ffffff03;
border:1px solid #ffffff17;
border-radius:7px;
width:100%;
margin-top:11px;
padding:15px 16px;
font-size:14px;
line-height:1.5;
transition:border-color .2s;
display:block}
.contact-form input:focus,.contact-form textarea:focus{
outline-offset:3px;
border-color:#c39a5f}
.contact-form input::placeholder,.contact-form textarea::placeholder{
color:#737a75;
opacity:1}
.contact-form textarea{
resize:vertical;
min-height:128px;
max-height:400px}
.contact-form>.button{
justify-content:space-between;
width:100%;
padding-inline:23px}
.form-note{
color:#8a918b;
margin-top:13px;
font-size:12px;
line-height:1.7}
.footer{
padding-top:54px;
padding-bottom:30px}
.footer-top{
justify-content:space-between;
align-items:center;
padding-bottom:45px;
display:flex}
.logo-large{
width:210px;
height:45px}
.footer-top>.eyebrow{
letter-spacing:.3em;
color:#939a94;
font-size:10px}
.back-top{
color:#a0a7a1;
align-items:center;
gap:15px;
font-size:12px;
display:flex}
.footer-bottom{
color:#7d8480;
border-top:1px solid #ffffff12;
justify-content:space-between;
align-items:center;
gap:20px;
padding-top:25px;
font-size:11px;
display:flex}
.footer-bottom>div{
gap:22px;
display:flex}
.footer-bottom a:hover{
color:#e9d9b6}
@keyframes enter{
0%{
opacity:var(--tw-enter-opacity,1);
transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0)scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1))rotate(var(--tw-enter-rotate,0));
filter:blur(var(--tw-enter-blur,0))}
}
@keyframes marquee-loop{
to{
transform:translateX(-50%)}
}
@keyframes gradient-drift{
0%{background-position:0% 50%}
100%{background-position:100% 50%}
}
@keyframes glow-drift{
0%{opacity:.68;transform:translate(-54%,-2%) scale(.94)}
100%{opacity:1;transform:translate(-46%,5%) scale(1.08)}
}
@keyframes dot-pulse{
0%,100%{opacity:.58;box-shadow:0 0 7px #7ab39a35}
50%{opacity:1;box-shadow:0 0 18px #7ab39a90}
}
@keyframes pricing-orbit{
0%{transform:translate3d(-8%,-4%,0) scale(.92)}
100%{transform:translate3d(10%,7%,0) scale(1.08)}
}
@keyframes scroll{
0%{
transform:translateY(-22px)}
to{
transform:translateY(45px)}
}
@media (min-width:1600px){
.hero{
min-height:920px}
.hero h1{
font-size:108px}
}
@media (max-width:1000px){
.container{
width:calc(100% - 48px)}
.desktop-links{
gap:20px}
.nav{
gap:18px}
.hero{
min-height:max(740px,100svh)}
.hero-corner{
left:24px}
.hero-corner.right{
right:24px}
.build{
height:280svh}
.case-grid{
grid-template-columns:1fr 1fr;
gap:22px 20px}
.about-section{
gap:45px}
.about-copy h2{
font-size:54px}
.contact-grid{
gap:45px}
.process-grid{
gap:20px}
.process-step h3{
font-size:21px}
.process-step p{
min-height:130px}
.email-link{
font-size:15px}
.service{
padding:25px 20px}
.service h3{
font-size:23px}
.service>p{
font-size:15px}
.work-card h3{
font-size:23px}
}
@media (max-width:700px){
html{
scroll-padding-top:85px}
.container{
width:calc(100% - 40px)}
.nav{
height:72px}
.logo{
width:124px;
height:26px}
.desktop-links,.nav-cta{
display:none}
.menu-button{
display:flex}
.mobile-nav:not([hidden]){
display:block}
.hero{
min-height:max(700px,100svh);
padding:130px 0 120px}
.hero-badge{
letter-spacing:.12em;
padding:7px 12px;
font-size:9px}
.hero h1{
letter-spacing:-.06em;
margin:29px 0 25px;
font-size:clamp(43px,10.3vw,69px);
line-height:1.075}
.hero-content>p{
max-width:340px;
margin-inline:auto;
font-size:16px;
line-height:1.8}
.desktop-break{
display:none}
.hero-actions{
flex-direction:column;
align-items:center;
gap:10px;
margin-top:29px}
.hero-actions .button{
min-width:237px;
padding:15px 20px;
font-size:13px}
.hero-corner{
display:none}
.scroll-cue{
font-size:9px;
bottom:25px}
.industries{
padding:35px 0}
.industries>p{
margin-bottom:24px;
font-size:9px}
.marquee-group>span{
font-size:24px}
.marquee-star{
margin:0 25px}
.section{
padding-block:75px}
.section-heading{
margin-bottom:31px;
display:block}
.section-label{
margin-bottom:19px;
font-size:10px}
.section h2,.build-head h2,.reach-copy h2{
font-size:40px;
line-height:1.12}
.heading-description{
margin:23px 0 0;
font-size:15px;
line-height:1.75}
.build{
height:270svh}
.build-sticky{
gap:20px;
padding:84px 0 26px}
.build-stage .browser-frame{
width:100%}
.build-track ol{
letter-spacing:.08em;
gap:10px 14px;
font-size:9px}
.stage-mark span{
display:none}
.build-rail{
width:min(320px,72vw)}
.case-grid{
grid-template-columns:1fr;
gap:26px;
margin-bottom:44px}
.case-fact h3{
font-size:20px}
.work-grid{
grid-template-columns:1fr;
gap:14px}
.work-card{
padding:26px 24px}
.work-domain{
margin-bottom:30px}
.work-card h3{
font-size:24px}
.work-card p{
font-size:15px}
.round-arrow{
width:38px;
height:38px}
.service-grid{
grid-template-columns:1fr;
gap:15px}
.service{
padding:27px}
.service-top{
margin-bottom:25px}
.service h3{
max-width:none;
min-height:0;
font-size:26px}
.service .text-link{
margin-top:25px}
.about-section{
grid-template-columns:1fr;
gap:40px}
.about-art{
aspect-ratio:1.2;
width:100%;
max-width:460px;
margin:auto}
.about-copy h2{
font-size:53px}
.about-copy>p:not(.eyebrow){
font-size:16px}
.about-copy .text-link{
font-size:13px}
.reach-copy>p:not(.eyebrow){
font-size:15px}
.process-grid{
grid-template-columns:1fr 1fr;
gap:34px 24px;
margin-top:36px}
.step-top{
margin-bottom:24px}
.process-step h3{
min-height:48px;
font-size:21px;
line-height:1.15}
.process-step p{
min-height:0;
font-size:13px;
line-height:1.7}
.step-detail{
font-size:10px}
.faq-list summary{
gap:18px;
padding:21px 0;
font-size:16px}
.faq-icon{
width:30px;
height:30px}
.faq-list details>p{
margin-bottom:24px;
font-size:15px}
.contact-section{
padding:75px 0}
.contact-grid{
grid-template-columns:1fr;
gap:42px}
.contact-copy h2{
font-size:57px}
.contact-copy>p:not(.eyebrow){
font-size:16px}
.email-link{
gap:10px;
font-size:16px}
.contact-form{
padding-top:0}
.contact-form input,.contact-form textarea{
font-size:16px}
.footer{
padding-top:35px}
.footer-top{
flex-wrap:wrap;
gap:24px;
padding-bottom:29px}
.logo-large{
width:165px;
height:35px}
.footer-top>.eyebrow{
display:none}
.footer-bottom{
flex-wrap:wrap;
gap:20px;
font-size:10px}
.footer-bottom>span:first-child{
width:100%}
.footer-bottom>span:last-child{
margin-left:auto}
}
@media (prefers-reduced-motion:reduce){
html{
scroll-behavior:auto}
*,:before,:after{
transition:none!important;
animation:none!important}
:where([data-reveal]){
opacity:1;
translate:none}
.build{
height:auto}
.build-sticky{
height:auto;
padding-block:90px;
position:static}
.reach-art{
transform:none}
}


/* Approved commercial additions, expressed in the original system. */
.language-switch{border-left:1px solid #ffffff14;padding-left:22px}
.menu-button{width:44px;min-height:44px;align-items:center;justify-content:center;flex-direction:column;gap:6px}
.menu-button span,.menu-toggle span{display:block;width:23px;height:1px;background:currentColor;transition:transform .2s,opacity .2s}
.menu-button[aria-expanded="true"] span:first-child,.menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(7px) rotate(45deg)}
.menu-button[aria-expanded="true"] span:nth-child(2),.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-button[aria-expanded="true"] span:last-child,.menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-7px) rotate(-45deg)}
.mobile-nav a{min-height:44px}
.service-grid-three{grid-template-columns:repeat(3,minmax(0,1fr))}
.service-grid-three .service{min-height:440px}
.service-featured{background:radial-gradient(circle at 88% 0,#e8b46612,transparent 34%),linear-gradient(150deg,#7ab39a0b,#0000);border-color:#b08a4e35}
.service-symbol{color:#d3a866;font-size:28px;line-height:1}.service-meta{color:#d3a866!important;letter-spacing:.16em;font:10px/1.6 var(--font-geist-mono);margin-bottom:12px!important}
.scope-section{background:#080c0d;border-bottom:1px solid #ffffff0f;position:relative;overflow:hidden}
.scope-section:before{content:"$197";position:absolute;right:-25px;bottom:-72px;color:transparent;-webkit-text-stroke:1px #ffffff0a;font-size:clamp(150px,25vw,340px);font-weight:700;letter-spacing:-.1em;pointer-events:none}
.scope-section .section{z-index:1;position:relative}
.pricing-orbit{pointer-events:none;background:radial-gradient(circle,#256a5d22 0,#8b6c3b10 38%,transparent 68%);filter:blur(12px);width:min(90vw,850px);aspect-ratio:1;position:absolute;top:-34%;left:32%;animation:11s ease-in-out infinite alternate pricing-orbit}
.pricing-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:16px;display:grid}
.pricing-card{background:linear-gradient(155deg,#111719f2,#090c0de8 72%);border:1px solid #ffffff18;border-radius:18px;min-width:0;padding:29px 26px 26px;transition:border-color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease),opacity .85s var(--ease),translate .85s var(--ease);display:flex;flex-direction:column;position:relative;overflow:hidden}
.pricing-card:nth-child(2){transition-delay:.1s}.pricing-card:nth-child(3){transition-delay:.2s}
.pricing-card:before{content:"";height:1px;background:linear-gradient(90deg,transparent,#ffffff20,transparent);position:absolute;inset:0 0 auto}
.pricing-card:hover{border-color:#b08a4e55;transform:translateY(-6px);box-shadow:0 28px 70px #0007}
.pricing-featured{background:radial-gradient(circle at 90% 0,#d6a75b1c,transparent 33%),linear-gradient(155deg,#14201f,#0a0e0f 72%);border-color:#d1a55c66;transform:translateY(-12px);box-shadow:0 24px 70px #0008,0 0 0 1px #1f695745 inset}
.pricing-featured:hover{transform:translateY(-18px)}
.pricing-badge{color:#111;background:linear-gradient(100deg,#e4bd7e,#83ad8b);border-radius:0 0 0 12px;padding:9px 13px;letter-spacing:.13em;font:600 9px/1.3 var(--font-geist-mono);position:absolute;top:0;right:0}
.pricing-top{color:#b0b7b0;justify-content:space-between;gap:12px;margin-bottom:48px;letter-spacing:.12em;font:10px/1.5 var(--font-geist-mono);display:flex}
.pricing-fit{color:#747c76;text-align:right}
.pricing-card h3{letter-spacing:-.04em;margin:0 0 13px;font-size:26px;font-weight:500}
.pricing-price{align-items:baseline;gap:9px;margin:0 0 24px;display:flex}
.pricing-price span{letter-spacing:-.07em;font-size:clamp(48px,4.4vw,64px);font-weight:540;line-height:1}
.pricing-price small{color:#8e968f;font-size:12px;font-weight:400}
.pricing-custom span{letter-spacing:-.05em;font-size:clamp(37px,3.4vw,50px)}
.pricing-summary{color:#a0a8a1;min-height:92px;margin:0;font-size:14px;line-height:1.75}
.pricing-list{margin:27px 0 24px}
.pricing-list li{color:#d0d4cf;border-top:1px solid #ffffff12;padding:12px 0 12px 24px;font-size:13px;line-height:1.55;position:relative}
.pricing-list li:before{content:"✓";color:#d3a866;position:absolute;top:12px;left:0}
.pricing-limit{color:#7f8781;border-top:1px solid #ffffff12;margin:0 0 24px;padding-top:17px;font-size:11px;line-height:1.7}
.pricing-cta{width:100%;min-height:52px;margin-top:auto;padding-inline:52px;justify-content:center;position:relative}
.pricing-cta-label{display:block;text-align:center}
.pricing-arrow{width:28px;height:28px;border:1px solid currentColor;border-radius:50%;opacity:.72;position:absolute;right:14px;top:50%;transform:translateY(-50%);transition:opacity .25s var(--ease),transform .25s var(--ease),background .25s var(--ease)}
.pricing-arrow:before{content:"";width:10px;height:1px;background:currentColor;position:absolute;left:7px;top:13px}
.pricing-arrow:after{content:"";width:6px;height:6px;border-top:1px solid currentColor;border-right:1px solid currentColor;position:absolute;right:7px;top:10px;transform:rotate(45deg)}
.pricing-cta:hover .pricing-arrow{opacity:1;transform:translate(2px,-50%)}
.external-arrow{display:inline-block;width:.82em;height:.82em;margin-inline:.18em 0;vertical-align:-.08em;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;transition:transform .25s var(--ease)}
a:hover .external-arrow{transform:translate(.08em,-.08em)}
.pricing-footnote{color:#858d86;border-top:1px solid #ffffff12;margin:30px 0 0;padding-top:22px;font-size:12px;line-height:1.7}
@media(max-width:1000px){.pricing-grid{grid-template-columns:1fr}.pricing-card{max-width:680px;width:100%;margin-inline:auto}.pricing-featured,.pricing-featured:hover{transform:none}.pricing-summary{min-height:0}}
.contact-cal{margin-top:24px}.direct-contact{min-height:44px}.direct-contact a,.form-note a,.utility-copy a{min-height:44px}.form-note a{display:inline-flex;align-items:center;text-decoration:underline;text-underline-offset:4px}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.honeypot{position:absolute!important;left:-9999px!important}
.contact-form select{color:#f0f2ee;background:#0d1213;border:1px solid #ffffff17;border-radius:7px;width:100%;min-height:52px;margin-top:11px;padding:15px 16px;font-size:14px;line-height:1.5}.contact-form select:focus{outline-offset:3px;border-color:#c39a5f}.contact-form label span{color:#858c86}.contact-form input,.contact-form textarea{min-height:52px}.contact-form textarea{min-height:128px}.contact-form>.button{min-height:52px}.direct-contact{display:flex}.nav>a:first-child{display:flex;align-items:center;min-width:44px;min-height:44px}.desktop-links a{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}.nav-cta{min-height:44px}.footer a,.back-top{min-width:44px;min-height:44px;align-items:center}
.brand{display:inline-flex;align-items:center;min-height:44px}.brand img{width:142px}.nav-links{display:flex;align-items:center;gap:30px;margin-left:auto}.nav-links a{color:#a7aea8;display:inline-flex;align-items:center;min-height:44px;font-size:14px}.menu-toggle{display:none;margin-left:auto;width:44px;min-height:44px;border:0;color:#fff;background:transparent;align-items:center;justify-content:center;flex-direction:column;gap:6px}
.utility-page{min-height:calc(100svh - 84px);padding:165px 0 100px;background:radial-gradient(circle at 50% 0,#1d63571a,transparent 44%)}.utility-copy{max-width:820px}.utility-copy .kicker{color:#a3ac9f;letter-spacing:.16em;font:11px/1.6 var(--font-geist-mono)}.utility-copy h1{letter-spacing:-.063em;margin:20px 0 30px;font-size:clamp(48px,7vw,88px);font-weight:550;line-height:1.02}.utility-copy h2{letter-spacing:-.03em;margin:42px 0 12px;font-size:24px;font-weight:500}.utility-copy p,.utility-copy li{color:#9ea59e;line-height:1.85}.utility-copy a:not(.button){display:inline-flex;align-items:center;color:#e9bd7c}.utility-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:35px}.section-grid{background:radial-gradient(circle at 60% 15%,#1d635724,transparent 48%)}
.site-footer{border-top:1px solid #ffffff12;padding:45px 0}.footer-grid{width:min(1160px,100% - 80px);margin:auto;display:grid;grid-template-columns:1fr 1.2fr .8fr;gap:24px}.footer-grid p{color:#8f9690}.footer-grid>div{display:grid}.footer-grid a{min-height:44px;display:flex;align-items:center}.copyright{grid-column:1/-1;border-top:1px solid #ffffff12;padding-top:20px}
@media(max-width:900px) and (min-width:701px){.service-grid-three{grid-template-columns:repeat(2,minmax(0,1fr))}.service-grid-three .service:last-child{grid-column:1/-1;justify-self:center;max-width:calc((100% - 18px)/2);width:100%}.nav-links{gap:16px}.nav-cta{white-space:nowrap;gap:8px;padding:10px 12px;font-size:11px}}
@media(max-width:700px){
 .mobile-nav{position:fixed;inset:72px 0 0;max-height:calc(100svh - 72px);overflow:auto;padding:14px 20px 32px}.mobile-nav a{align-items:center}
 .service-grid-three{grid-template-columns:1fr}.service-grid-three .service{min-height:0}.field-row{grid-template-columns:1fr}.build{height:280svh}.build-sticky{padding:82px 0 18px;gap:14px}.case-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-bottom:34px}.work-grid{display:grid;grid-template-columns:1fr;gap:14px}.reach{display:block;padding:50px 0}.work-card{padding:20px}.services-section .tags{margin-top:8px}.loom-bottom{gap:2.4cqw}.loom-bottom span{font-size:1.3cqw}.contact-cal{width:100%}.contact-copy h2{font-size:clamp(43px,14vw,57px)}
 .section{padding-block:55px}.section-heading{margin-bottom:26px}.about-section{gap:24px}.about-art{aspect-ratio:2}.contact-section{padding:55px 0}.contact-grid{gap:28px}.contact-form label{margin-bottom:14px}.contact-copy .email-link{margin-top:18px}
 .nav-links,.nav-cta{display:none}.menu-toggle{display:flex}.nav-links.is-open{display:flex;position:fixed;inset:72px 0 0;background:#0e1214;padding:18px 20px 32px;flex-direction:column;align-items:stretch;gap:0}.nav-links.is-open a{border-bottom:1px solid #ffffff12;padding:8px 0}.brand img{width:124px}.utility-page{padding:125px 0 75px}.utility-copy h1{font-size:47px}.utility-actions .button{width:100%}.footer-grid{width:calc(100% - 40px);grid-template-columns:1fr}.footer-grid>*{grid-column:1}.site-footer{padding:34px 0}
}
@media(max-width:700px){.brand-preview{grid-template-columns:1fr;min-height:0;gap:14px;padding:20px}.brand-preview-copy h3{font-size:clamp(22px,7vw,28px)}.brand-preview-art{max-width:520px;width:100%;margin-inline:auto}.brand-tags{gap:6px}.brand-tags span{font-size:10px}}
@media(prefers-reduced-motion:reduce){.marquee-track,.scroll-line:after{animation:none!important}.scene-live .stage-in{opacity:1!important;translate:none!important}.scene-live .stage-mark{opacity:1!important}.reveal{transform:none!important;opacity:1!important}}
@media(max-width:640px){h1 em{white-space:nowrap}}