:root{
--paper:#FFFFFF;
--paper-2:#F5F3EE;
--cream:#F4F1EA;
--ink:#0E1116;
--ink-2:#2A2E36;
--ink-3:#5B6068;
--violet:#5B3BFF;
--solar:#FF6A1F;
--line:rgba(14,17,22,.10);
--line-2:rgba(14,17,22,.18);
--maxw:1280px;
--pad:clamp(20px, 4vw, 56px);
--radius:18px;
--radius-lg:28px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
background:var(--paper);
color:var(--ink);
font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
font-size:16px;
line-height:1.55;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.mono{font-family:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing:.02em}
.eyebrow{
font-family:'JetBrains Mono', ui-monospace, monospace;
font-size:12px; font-weight:500;
letter-spacing:.18em; text-transform:uppercase;
color:var(--ink-3);
display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{content:""; width:24px; height:1px; background:var(--ink-2); display:inline-block}
h1,h2,h3{margin:0; font-weight:600; letter-spacing:-.02em; line-height:1.05; text-wrap:balance}
p{margin:0; text-wrap:pretty}
.container{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad)}
section{padding:clamp(64px, 7vw, 112px) 0; position:relative} .nav{
position:fixed; top:0; left:0; right:0; z-index:50;
padding:18px var(--pad);
display:flex; align-items:center; justify-content:space-between;
transition:background .25s ease, backdrop-filter .25s ease, box-shadow .25s ease, padding .25s ease;
}
.nav.scrolled{
background:rgba(244,241,234,.78);
backdrop-filter:saturate(180%) blur(14px);
-webkit-backdrop-filter:saturate(180%) blur(14px);
box-shadow:0 1px 0 var(--line);
padding:12px var(--pad);
}
.brand{display:flex; align-items:center; gap:10px}
.brand img{height:40px; width:auto}
@media (max-width: 520px){
.brand img{height:34px}
}
.nav-links{display:flex; align-items:center; gap:4px}
.nav-links a:not(.cta){
font-size:14px; font-weight:500; color:var(--ink-2);
padding:8px 14px; border-radius:8px;
transition:background .2s ease, color .2s ease;
}
.nav-links a:not(.cta):hover{background:rgba(14,17,22,.06); color:var(--ink)} .lang{
display:inline-flex; align-items:center; gap:2px;
margin:0 6px; padding:3px; height:36px; box-sizing:border-box;
border:1px solid rgba(14,17,22,.18); border-radius:10px;
font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:.1em;
}
.lang a, .lang button{
appearance:none; border:0; background:transparent; cursor:pointer;
padding:0 12px; height:28px; border-radius:7px;
display:inline-flex; align-items:center; justify-content:center;
color:var(--ink-3); font:inherit; letter-spacing:inherit;
text-decoration:none;
transition:background .2s ease, color .2s ease;
}
.lang a:hover, .lang button:hover{color:var(--ink)}
.lang a.active, .lang button.active{background:var(--ink); color:#fff}
body.hero-in-view .nav:not(.scrolled) .lang{border-color:rgba(255,255,255,.28)}
body.hero-in-view .nav:not(.scrolled) .lang a, body.hero-in-view .nav:not(.scrolled) .lang button{color:rgba(255,255,255,.7)}
body.hero-in-view .nav:not(.scrolled) .lang a:hover, body.hero-in-view .nav:not(.scrolled) .lang button:hover{color:#fff}
body.hero-in-view .nav:not(.scrolled) .lang a.active, body.hero-in-view .nav:not(.scrolled) .lang button.active{background:#fff; color:var(--ink)} body.hero-in-view .nav:not(.scrolled) .nav-links > a:not(.cta){color:rgba(255,255,255,.78)}
body.hero-in-view .nav:not(.scrolled) .nav-links > a:not(.cta):hover{background:rgba(255,255,255,.08); color:#fff}
body.hero-in-view .nav:not(.scrolled) .cta{background:transparent; color:#fff; border-color:rgba(255,255,255,.28)}
body.hero-in-view .nav:not(.scrolled) .cta:hover{background:#fff; color:var(--ink); border-color:#fff}
body.hero-in-view .nav:not(.scrolled) .nav-toggle{color:#fff}
body.hero-in-view .nav:not(.scrolled) .brand img.logo-dark{display:none}
body.hero-in-view .nav:not(.scrolled) .brand img.logo-light{display:block}
.cta{
display:inline-flex; align-items:center; gap:8px;
background:transparent; color:var(--ink);
padding:0 16px; height:36px; box-sizing:border-box;
border-radius:10px;
border:1px solid rgba(14,17,22,.18);
font-size:13px; font-weight:500;
transition:transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.cta:hover{background:var(--ink); color:#fff; border-color:var(--ink); transform:translateY(-1px)}
.cta .dot{width:6px; height:6px; border-radius:50%; background:var(--solar)}
.nav-toggle{display:none; background:none; border:0; padding:8px; color:var(--ink); cursor:pointer}
.nav-toggle svg{width:24px; height:24px}
@media (max-width: 880px){
.nav-links{
position:fixed; inset:64px 16px auto 16px;
flex-direction:column; align-items:stretch; gap:4px; background:#0E1116;
border:1px solid rgba(255,255,255,.08);
border-radius:18px; padding:12px;
box-shadow:0 24px 60px rgba(0,0,0,.45);
transform-origin:top right;
transform:scale(.95) translateY(-8px); opacity:0; pointer-events:none;
transition:all .2s ease;
}
.nav-links.open{transform:none; opacity:1; pointer-events:auto}
.nav-links a{padding:12px 14px; border-radius:12px} .nav-links a:not(.cta),
body.hero-in-view .nav:not(.scrolled) .nav-links a:not(.cta){
color:rgba(255,255,255,.86);
}
.nav-links a:not(.cta):hover,
body.hero-in-view .nav:not(.scrolled) .nav-links a:not(.cta):hover{
background:rgba(255,255,255,.08); color:#fff;
}
.nav-links .lang,
body.hero-in-view .nav:not(.scrolled) .nav-links .lang{
align-self:center; margin:8px 0 4px;
border-color:rgba(255,255,255,.22);
}
.nav-links .lang a, .nav-links .lang button,
body.hero-in-view .nav:not(.scrolled) .nav-links .lang a,
body.hero-in-view .nav:not(.scrolled) .nav-links .lang button{
color:rgba(255,255,255,.7);
}
.nav-links .lang a.active, .nav-links .lang button.active,
body.hero-in-view .nav:not(.scrolled) .nav-links .lang a.active,
body.hero-in-view .nav:not(.scrolled) .nav-links .lang button.active{
background:#fff; color:var(--ink);
}
.nav-links .cta,
body.hero-in-view .nav:not(.scrolled) .nav-links .cta{
justify-content:center; margin-top:6px;
color:#fff; border-color:rgba(255,255,255,.3);
}
.nav-links .cta:hover,
body.hero-in-view .nav:not(.scrolled) .nav-links .cta:hover{
background:#fff; color:var(--ink); border-color:#fff;
}
.nav-toggle{display:inline-flex}
} .hero{
min-height:100vh;
position:relative;
overflow:hidden;
display:flex;
align-items:center; background:#0A0A0B;
color:#fff;
} .hero::before{
content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
background:
radial-gradient(ellipse 60% 80% at 50% 100%, rgba(255,106,31,.32) 0%, rgba(255,106,31,.08) 30%, transparent 60%),
radial-gradient(ellipse 80% 60% at 50% 0%, rgba(91,59,255,.18) 0%, transparent 55%),
repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 80px),
linear-gradient(180deg, #0A0A0B 0%, #0E0E10 60%, #15100C 100%);
} .hero::after{
content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
background:
radial-gradient(ellipse 70% 60% at 30% 55%, rgba(0,0,0,.45), transparent 75%),
linear-gradient(180deg, rgba(10,10,11,.35) 0%, rgba(10,10,11,.4) 60%, rgba(10,10,11,.55) 100%);
} .hero.has-bg-image{
background-size:cover;
background-position:center;
background-repeat:no-repeat;
}
.hero.has-bg-image::before{ display:none }
.hero-copy{ text-align:left;
max-width:var(--maxw);
width:100%;
margin:0 auto;
padding:96px var(--pad) 64px;
position:relative; z-index:3; }
.hero h1{
font-size:clamp(40px, 6.4vw, 96px);
font-weight:400;
letter-spacing:-.035em;
line-height:1.02;
}
.hero h1 .o{color:#fff}
.hero h1 .dot{color:var(--solar)}
.hero h1 .ital{font-style:italic; font-weight:400} .hero h1 .w{ display:inline-block; vertical-align:baseline; line-height:1; overflow:visible !important; }
.hero h1 .w > span{ display:inline-block; opacity:1 !important; transform:none !important; }
.hero-eyebrow,
.hero-sub,
.hero-meta,
.hero .scroll-cue{ opacity:1 !important; transform:none !important; }
.hero-sub{
margin-top:24px;
font-size:clamp(15px, 1.2vw, 18px);
color:rgba(255,255,255,.65);
max-width:560px;
}
.hero-meta{
display:flex; justify-content:flex-start; gap:12px; margin-top:28px; flex-wrap:wrap;
}
.hero-meta a{
font-size:15px; padding:14px 24px; border-radius:10px;
border:1px solid rgba(255,255,255,.18); color:#fff;
font-weight:500;
transition:all .2s ease;
}
.hero-meta a:hover{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.3)}
.hero-meta a.primary{
background:#fff; color:#0A0A0B; border-color:#fff;
}
.hero-meta a.primary:hover{background:#f5f3ee; transform:translateY(-1px); border-color:#f5f3ee}
.hero-eyebrow{
display:inline-flex; justify-content:flex-start;
margin-bottom:24px;
} .hero-eyebrow .eyebrow{ color:#fff }
.hero-eyebrow .eyebrow::before{ background:rgba(255,255,255,.55) } .scroll-cue{
position:absolute;
left:0; right:0; bottom:24px;
margin-inline:auto;
width:max-content;
z-index:3; font-family:'JetBrains Mono', monospace;
font-size:11px; letter-spacing:.2em; text-transform:uppercase;
color:var(--ink-3);
text-decoration:none;
cursor:pointer;
display:flex; flex-direction:column; align-items:center; gap:8px;
opacity:.7;
transition:opacity .2s ease;
}
.scroll-cue:hover, .scroll-cue:focus-visible{ opacity:1 }
.scroll-cue::after{
content:""; width:1px; height:28px;
background:linear-gradient(180deg, rgba(255,255,255,.5), transparent);
transition:height .2s ease;
}
.scroll-cue:hover::after{ height:36px }
.hero .scroll-cue{color:rgba(255,255,255,.55)}
.hero .scroll-cue:hover, .hero .scroll-cue:focus-visible{ color:rgba(255,255,255,.9) }
.nav .brand img.logo-light{display:none} .section-head{
display:flex; justify-content:space-between; align-items:flex-end;
gap:32px; margin-bottom:36px; flex-wrap:wrap;
}
.section-head h2{
font-size:clamp(28px, 3.6vw, 48px);
font-weight:600; letter-spacing:-.02em;
max-width:18ch;
}
.section-head .h-meta{max-width:380px; color:var(--ink-3); font-size:15px}
.services-grid{
display:grid;
grid-template-columns:repeat(2, 1fr);
border-top:1px solid var(--line-2);
border-left:1px solid var(--line-2);
}
.service{
border-right:1px solid var(--line-2);
border-bottom:1px solid var(--line-2);
padding:36px 32px 32px;
display:flex; flex-direction:column; gap:18px;
background:transparent;
transition:background .25s ease;
position:relative;
min-height:280px;
}
.service:hover{background:rgba(14,17,22,.025)}
.service .num{
font-family:'JetBrains Mono', monospace;
font-size:12px; color:var(--ink-3); letter-spacing:.18em;
}
.service h3{font-size:26px; letter-spacing:-.015em}
.service p{color:var(--ink-3); font-size:15px}
.service .tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top:14px}
.tag{
font-family:'JetBrains Mono', monospace;
font-size:11px; letter-spacing:.06em;
padding:5px 10px; border:1px solid var(--line-2); border-radius:8px;
color:var(--ink-2);
}
.service .icon{
width:44px; height:44px; border-radius:12px;
background:var(--paper-2);
display:grid; place-items:center;
color:var(--ink);
}
.service .icon svg{width:22px; height:22px}
.service.accent .icon{background:var(--ink); color:var(--paper)}
@media (max-width: 720px){
.services-grid{grid-template-columns:1fr}
} .about-grid{
display:grid; gap:48px;
grid-template-columns: 1.2fr 1fr;
align-items:start;
}
.about-grid h2{font-size:clamp(28px, 3.4vw, 44px)}
.about-grid .lede{
font-size:clamp(18px, 1.5vw, 22px);
color:var(--ink-2);
max-width:30ch;
line-height:1.3;
letter-spacing:-.01em;
}
.about-grid .lede em{font-style:italic; color:var(--violet); font-weight:400}
.about-body{display:flex; flex-direction:column; gap:18px; color:var(--ink-2); font-size:16px; padding-top:8px}
.about-body p{max-width:52ch}
.metrics{
margin-top:80px;
display:grid; grid-template-columns:repeat(4, 1fr);
border-top:1px solid var(--line-2);
}
.metric{
padding:32px 24px 28px;
border-right:1px solid var(--line-2);
display:flex; flex-direction:column; gap:6px;
}
.metric:last-child{border-right:0}
.metric .num{
font-size:clamp(36px, 3.8vw, 52px);
font-weight:500; letter-spacing:-.03em; line-height:1;
}
.metric .num .unit{color:var(--solar); font-weight:500}
.metric .lbl{
font-family:'JetBrains Mono', monospace;
font-size:12px; letter-spacing:.16em; color:var(--ink-3); text-transform:uppercase;
margin-top:8px;
}
@media (max-width: 880px){
.about-grid{grid-template-columns:1fr; gap:24px}
.metrics{grid-template-columns:repeat(2, 1fr)}
.metric:nth-child(2){border-right:0}
.metric:nth-child(1), .metric:nth-child(2){border-bottom:1px solid var(--line-2)}
}  .cta-strip{
background: radial-gradient(ellipse 30% 50% at 100% 0%, rgba(255,106,31,.85) 0%, rgba(255,106,31,.0) 70%), radial-gradient(ellipse 70% 110% at 110% 50%, rgba(255,106,31,.55) 0%, rgba(255,106,31,.18) 30%, transparent 65%), repeating-linear-gradient(
6deg,
transparent 0px, transparent 18px,
rgba(255,140,60,.18) 19px, rgba(255,140,60,.32) 22px, rgba(255,140,60,.0) 24px
), linear-gradient(95deg, #050505 0%, #0A0A0B 45%, #1A0D05 100%); color:var(--paper);
border-radius:var(--radius-lg);
padding:clamp(40px, 5.5vw, 76px) clamp(28px, 4vw, 56px);
display:grid; grid-template-columns:1.4fr 1fr; gap:40px; align-items:center;
position:relative; overflow:hidden;
} .cta-strip::before{
content:""; position:absolute; inset:0;
background:linear-gradient(90deg, #050505 0%, #050505 30%, transparent 70%);
pointer-events:none; z-index:0;
} .cta-strip::after{
content:""; position:absolute; inset:auto 0 0 0; height:50%;
background:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.35) 100%);
pointer-events:none; z-index:0;
}
.cta-strip h2{
font-size:clamp(28px, 3.4vw, 48px);
font-weight:500; letter-spacing:-.02em; line-height:1.1;
position:relative; z-index:1;
}
.cta-strip h2 .ital{font-style:italic; font-weight:300}
.cta-strip .sub{color:rgba(244,241,234,.75); margin-top:18px; max-width:48ch; position:relative; z-index:1}
.cta-strip .actions{display:flex; flex-direction:column; gap:12px; align-items:flex-start; position:relative; z-index:1}
.cta-strip .btn{
display:inline-flex; align-items:center; gap:10px;
padding:16px 22px; border-radius:10px;
background:var(--paper); color:var(--ink);
font-weight:500; font-size:15px;
transition:transform .2s ease;
}
.cta-strip .btn:hover{transform:translateY(-2px)}
.cta-strip .ghost{
background:transparent; color:var(--paper);
border:1px solid rgba(244,241,234,.3);
}
@media (max-width: 880px){
.cta-strip{grid-template-columns:1fr; gap:24px}
} .work-carousel{ position:relative }
.work-track{
display:grid; grid-auto-flow:column;
grid-auto-columns:calc((100% - 0px) / 4); gap:0;
overflow-x:auto;
scroll-snap-type:x mandatory;
scroll-behavior:smooth;
scrollbar-width:none;
-ms-overflow-style:none;
}
.work-track::-webkit-scrollbar{ display:none } .work-arrow--prev{ left:-22px }
.work-arrow--next{ right:-22px }
@media (max-width: 880px){
.work-arrow--prev{ left:8px }
.work-arrow--next{ right:8px }
}
.project{
scroll-snap-align:start;
position:relative;
overflow:hidden;
background:#1a1d24;
border:0;
border-radius:0;
display:block;
transition:none;
}
.project .thumb{
aspect-ratio: 4/5;
position:relative;
overflow:hidden;
background:#1a1d24;
}
.project .thumb svg, .project .thumb img{
width:100%; height:100%; display:block; object-fit:cover;
transition:transform .5s ease;
}
.project:hover .thumb img{ transform:scale(1.04) } .project .meta{
position:absolute; inset:0;
display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
padding:24px 28px;
background:linear-gradient(180deg, rgba(14,17,22,0) 35%, rgba(14,17,22,.82) 100%);
color:#fff;
opacity:0;
transition:opacity .3s ease;
pointer-events:none;
}
.project .meta h3{font-size:20px; font-weight:600; letter-spacing:-.01em; color:#fff; margin:0}
.project .meta .cat{font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:.16em; color:rgba(255,255,255,.85); text-transform:uppercase}
.project .meta .arrow{
width:42px; height:42px; border-radius:50%;
border:1px solid rgba(255,255,255,.4);
background:rgba(255,255,255,.1);
display:grid; place-items:center; color:#fff;
flex:none;
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
} @media (hover: hover) {
.project:hover .meta{ opacity:1 }
} @media (hover: none) {
.project .meta{ opacity:1 }
}
@media (max-width: 1080px){
.work-track{ grid-auto-columns:calc(100% / 3) } }
@media (max-width: 720px){
.work-track{ grid-auto-columns:calc(100% / 2) } }
@media (max-width: 520px){
.work-track{ grid-auto-columns:88% } } .values{
display:grid; gap:0;
grid-template-columns:repeat(3, 1fr);
border-top:1px solid var(--line-2);
}
.value{
padding:36px 28px;
border-right:1px solid var(--line-2);
display:flex; flex-direction:column; gap:14px;
}
.value:last-child{border-right:0}
.value .v-num{
font-family:'JetBrains Mono', monospace;
font-size:12px; color:var(--ink-3); letter-spacing:.16em;
}
.value h3{font-size:22px; letter-spacing:-.015em; font-weight:600}
.value p{color:var(--ink-3); font-size:15px}
@media (max-width: 880px){
.values{grid-template-columns:1fr}
.value{border-right:0; border-bottom:1px solid var(--line-2)}
.value:last-child{border-bottom:0}
}  #contact{ background:var(--ink); color:var(--paper) }
#contact .eyebrow{ color:rgba(255,255,255,.7) }
#contact .eyebrow::before{ background:rgba(255,255,255,.55) }
.contact-grid{
display:grid; gap:48px;
grid-template-columns: 1fr 1.1fr;
align-items:start;
}
.contact-grid h2{font-size:clamp(28px, 3.4vw, 44px); margin-bottom:18px; color:#fff}
.contact-grid .c-sub{color:rgba(255,255,255,.7); margin-bottom:28px; max-width:38ch}
.contact-info{display:flex; flex-direction:column; gap:18px; padding-top:8px}
.info-row{display:flex; flex-direction:column; gap:4px}
.info-row .lbl{font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:.16em; color:rgba(255,255,255,.55); text-transform:uppercase}
.info-row .val{font-size:18px; color:#fff; font-weight:500}
.info-row a.val:hover{color:var(--solar)}
form.contact{
display:grid; gap:18px;
background:rgba(255,255,255,.03);
border:1px solid rgba(255,255,255,.12);
border-radius:var(--radius-lg);
padding:32px;
}
form.contact .row{display:grid; grid-template-columns:1fr 1fr; gap:18px}
form.contact .field{display:flex; flex-direction:column; gap:6px}
form.contact label{
font-family:'JetBrains Mono', monospace;
font-size:11px; letter-spacing:.16em; color:rgba(255,255,255,.65); text-transform:uppercase;
}
form.contact input, form.contact textarea, form.contact select{
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.18);
border-radius:12px;
padding:14px 16px;
font:inherit; color:#fff;
transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
form.contact input::placeholder,
form.contact textarea::placeholder{
color:rgba(255,255,255,.35);
} form.contact select option{ background:var(--ink); color:#fff }
form.contact input:focus, form.contact textarea:focus, form.contact select:focus{
outline:none;
border-color:#fff;
background:rgba(255,255,255,.07);
box-shadow:0 0 0 4px rgba(255,255,255,.08);
}
form.contact textarea{min-height:120px; resize:vertical}
form.contact button{
appearance:none; border:0; cursor:pointer;
background:#fff; color:var(--ink);
padding:16px 22px; border-radius:10px;
font:inherit; font-weight:500;
display:inline-flex; align-items:center; justify-content:center; gap:10px;
transition:background .2s ease, color .2s ease, transform .2s ease;
justify-self:start;
}
form.contact button:hover{background:var(--solar); color:#fff; transform:translateY(-1px)}
form.contact button[disabled]{opacity:.65; cursor:not-allowed}
form.contact .dot{width:6px; height:6px; border-radius:50%; background:var(--solar)}
form.contact .form-msg{font-size:14px; padding:10px 14px; border-radius:10px; display:none}
form.contact .form-msg.success{display:block; background:rgba(91,59,255,.18); color:#fff}
form.contact .form-msg.error{display:block; background:rgba(220,40,40,.18); color:#fff}
.honey{position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; opacity:0 !important; pointer-events:none !important}
@media (max-width: 880px){
.contact-grid{grid-template-columns:1fr}
form.contact .row{grid-template-columns:1fr}
} footer.site-footer{
background:var(--ink); color:var(--paper);
padding:64px var(--pad) 32px;
margin-top:0;
}
.footer-inner{
max-width:var(--maxw); margin:0 auto;
display:grid; gap:40px;
grid-template-columns:1.3fr repeat(3, 1fr);
}
.footer-inner h4{
font-family:'JetBrains Mono', monospace;
font-size:12px; letter-spacing:.18em; text-transform:uppercase;
color:rgba(244,241,234,.5);
margin:0 0 16px; font-weight:500;
}
.footer-inner ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px}
.footer-inner a{color:rgba(244,241,234,.85); font-size:15px; transition:color .2s ease}
.footer-inner a:hover{color:var(--paper)} .footer-brand img{height:44px; width:auto; margin:0 0 20px -6px; display:block}
.footer-brand p{color:rgba(244,241,234,.6); font-size:14px; max-width:30ch; margin:0} .footer-social .social-icons{
flex-direction:row; flex-wrap:wrap; gap:10px;
}
.footer-social .social-icon{
display:inline-flex; align-items:center; justify-content:center;
width:40px; height:40px; border-radius:10px;
border:1px solid rgba(244,241,234,.18);
color:rgba(244,241,234,.85);
transition:color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}
.footer-social .social-icon:hover{
color:var(--paper);
border-color:rgba(244,241,234,.35);
background:rgba(244,241,234,.06);
transform:translateY(-1px);
}
.footer-social .social-icon svg{display:block}
.footer-bottom{
max-width:var(--maxw); margin:48px auto 0;
border-top:1px solid rgba(244,241,234,.12);
padding-top:24px;
display:flex; justify-content:space-between; align-items:center;
color:rgba(244,241,234,.5); font-size:13px;
font-family:'JetBrains Mono', monospace; letter-spacing:.06em;
flex-wrap:wrap; gap:12px;
}
@media (max-width: 880px){
.footer-inner{grid-template-columns:1fr 1fr}
.footer-brand{grid-column:span 2}
}
@media (max-width: 520px){
.footer-inner{grid-template-columns:1fr}
.footer-brand{grid-column:auto}
} .reveal{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
*{transition:none !important; animation:none !important}
} .case-study{ background:var(--paper); color:var(--ink); } .cs-hero{
position:relative;
min-height:60vh;
padding:120px var(--pad) 64px;
background:#0E1116; color:#fff;
background-size:cover; background-position:center;
display:flex; align-items:flex-end;
overflow:hidden;
}
.cs-hero.has-image::before{
content:""; position:absolute; inset:0; pointer-events:none;
background:linear-gradient(180deg, rgba(14,17,22,.45) 0%, rgba(14,17,22,.7) 60%, rgba(14,17,22,.92) 100%);
}
.cs-hero-inner{ position:relative; z-index:1; width:100%; max-width:var(--maxw); margin:0 auto; padding:0; }
.cs-back{
display:inline-flex; align-items:center; gap:8px;
font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:.16em;
text-transform:uppercase; color:rgba(255,255,255,.7);
margin-bottom:48px; transition:color .2s ease;
}
.cs-back:hover{ color:#fff }
.cs-eyebrow{ color:rgba(255,255,255,.7); margin-bottom:16px }
.cs-eyebrow::before{ background:rgba(255,255,255,.7) }
.cs-title{
font-size:clamp(32px, 4.6vw, 64px);
font-weight:500; letter-spacing:-.025em; line-height:1.05;
max-width:18ch; margin:0;
}
.cs-meta{
display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
gap:24px 32px;
margin:48px 0 0;
padding-top:32px;
border-top:1px solid rgba(255,255,255,.18);
}
.cs-meta > div{ display:flex; flex-direction:column; gap:6px }
.cs-meta dt{
font-family:'JetBrains Mono', monospace;
font-size:11px; letter-spacing:.18em; text-transform:uppercase;
color:rgba(255,255,255,.55); margin:0;
}
.cs-meta dd{ margin:0; font-size:16px; color:#fff }
.cs-services{ display:flex; flex-wrap:wrap; gap:6px }
.cs-services .tag{
border-color:rgba(255,255,255,.28);
color:rgba(255,255,255,.92);
background:rgba(255,255,255,.05);
} .cs-description{
margin-top:24px; max-width:62ch;
font-size:clamp(16px, 1.2vw, 19px); line-height:1.6;
color:rgba(255,255,255,.78);
}
.cs-description p{ margin:0 0 0.8em }
.cs-description p:last-child{ margin-bottom:0 } .cs-section{
max-width:var(--maxw); margin:0 auto;
padding:clamp(40px, 5vw, 72px) var(--pad);
display:grid; grid-template-columns:200px 1fr;
gap:40px; align-items:start;
border-top:1px solid var(--line-2);
}
.cs-section:first-of-type{ border-top:0 }
.cs-section-head{ display:flex; flex-direction:column; gap:12px; position:sticky; top:90px }
.cs-section-num{
font-family:'JetBrains Mono', monospace;
font-size:12px; color:var(--ink-3); letter-spacing:.18em;
}
.cs-section-label{
font-size:clamp(22px, 2.4vw, 32px);
font-weight:600; letter-spacing:-.02em; margin:0;
}
.cs-section-body{
font-size:clamp(15px, 1vw, 17px); line-height:1.65;
color:var(--ink-2);
}
.cs-section--narrative .cs-section-body{ max-width:62ch }
.cs-section-body strong{ color:var(--ink) }
.cs-section-body a{ color:var(--violet); text-decoration:underline; text-underline-offset:3px }
.cs-section-body a:hover{ color:var(--ink) } .cs-visual-grid{
display:grid; grid-template-columns:1fr 1fr; gap:20px;
}
.cs-card{
background:var(--paper-2);
border:1px solid var(--line);
border-radius:var(--radius);
padding:24px;
display:flex; flex-direction:column; gap:16px;
}
.cs-card-eyebrow{ color:var(--ink-3) }
.cs-palette{
display:grid; grid-template-columns:repeat(5, 1fr); gap:8px;
}
.cs-swatch{
position:relative;
aspect-ratio:1/1.05;
border-radius:10px;
border:1px solid rgba(14,17,22,.08);
display:flex; align-items:flex-end;
padding:10px;
overflow:hidden;
}
.cs-swatch-label{
font-size:10px; letter-spacing:.16em; text-transform:uppercase;
color:#fff;
background:rgba(14,17,22,.55);
padding:3px 6px; border-radius:4px;
backdrop-filter:blur(4px);
} .cs-swatch[style*="#F"], .cs-swatch[style*="#f"], .cs-swatch[style*="#E"], .cs-swatch[style*="#e"]{ }
.cs-typography{ display:flex; flex-direction:column; gap:14px }
.cs-type-row{ display:flex; flex-direction:column; gap:6px }
.cs-type-sample{
font-family:'Newsreader', 'Inter', serif;
font-size:clamp(22px, 2.4vw, 28px);
line-height:1.2; color:var(--ink); margin:0;
}
.cs-type-meta{
font-size:11px; letter-spacing:.18em; text-transform:uppercase;
color:var(--ink-3); margin:0;
}
.cs-type-divider{
border:0; border-top:1px solid var(--line); margin:6px 0;
} .cs-process{
display:grid; grid-template-columns:repeat(4, 1fr);
gap:24px;
border-top:1px solid var(--line-2);
padding-top:24px;
}
.cs-process-step{
display:flex; flex-direction:column; gap:10px;
padding-right:16px;
border-right:1px solid var(--line);
}
.cs-process-step:last-child{ border-right:0; padding-right:0 }
.cs-process-prefix{
font-size:11px; letter-spacing:.18em; text-transform:uppercase;
color:var(--ink-3);
}
.cs-process-title{
font-family:'Newsreader', 'Inter', serif;
font-size:clamp(20px, 1.8vw, 24px);
font-weight:500; letter-spacing:-.01em; line-height:1.15;
margin:0; color:var(--ink);
}
.cs-process-desc{
margin:0; font-size:14px; line-height:1.55; color:var(--ink-3);
} .cs-live{
max-width:var(--maxw); margin:0 auto;
padding:0 var(--pad) clamp(64px, 9vw, 120px);
}
.cs-live-btn{
display:inline-flex; align-items:center; gap:10px;
background:var(--ink); color:var(--paper);
padding:18px 26px; border-radius:12px;
font-weight:500; font-size:15px;
transition:transform .2s ease, background .2s ease;
}
.cs-live-btn:hover{ background:var(--violet); transform:translateY(-1px) } .cs-gallery-grid{
display:grid; grid-template-columns:repeat(2, 1fr); gap:16px;
}
.cs-gallery-item{
margin:0; border-radius:var(--radius); overflow:hidden;
background:var(--paper-2); border:1px solid var(--line);
}
.cs-gallery-item img{ width:100%; height:auto; display:block }
.cs-gallery-item:nth-child(3n+1){ grid-column:span 2 } .cs-next{
display:block;
position:relative;
min-height:280px;
background:#0E1116; color:#fff;
background-size:cover; background-position:center;
padding:80px var(--pad);
text-decoration:none;
overflow:hidden;
transition:padding .25s ease;
}
.cs-next::before{
content:""; position:absolute; inset:0; pointer-events:none;
background:linear-gradient(135deg, rgba(14,17,22,.85) 0%, rgba(14,17,22,.55) 100%);
transition:background .3s ease;
}
.cs-next:hover::before{ background:linear-gradient(135deg, rgba(14,17,22,.92) 0%, rgba(14,17,22,.7) 100%) }
.cs-next:hover{ padding-left:calc(var(--pad) + 12px) }
.cs-next-inner{
position:relative; z-index:1;
max-width:var(--maxw); margin:0 auto;
display:flex; flex-direction:column; gap:14px;
}
.cs-next-eyebrow{ color:rgba(255,255,255,.7) }
.cs-next-eyebrow::before{ background:rgba(255,255,255,.7) }
.cs-next-title{
font-size:clamp(28px, 4vw, 56px);
font-weight:600; letter-spacing:-.025em; line-height:1.1;
}
.cs-next-cat{
font-size:12px; letter-spacing:.16em; text-transform:uppercase;
color:rgba(255,255,255,.6);
}
@media (max-width: 880px){
.cs-hero{ min-height:50vh; padding-top:96px }
.cs-meta{ grid-template-columns:1fr 1fr }
.cs-section{ grid-template-columns:1fr; gap:18px }
.cs-section-head{ position:static }
.cs-visual-grid{ grid-template-columns:1fr }
.cs-process{ grid-template-columns:1fr 1fr }
.cs-process-step{ border-right:0; padding-right:0; padding-bottom:18px; border-bottom:1px solid var(--line) }
.cs-process-step:nth-last-child(-n+2){ padding-bottom:0; border-bottom:0 }
.cs-gallery-grid{ grid-template-columns:1fr }
.cs-gallery-item:nth-child(3n+1){ grid-column:auto }
}
@media (max-width: 520px){
.cs-meta{ grid-template-columns:1fr }
.cs-process{ grid-template-columns:1fr }
.cs-process-step:nth-last-child(-n+2){ padding-bottom:18px; border-bottom:1px solid var(--line) }
.cs-process-step:last-child{ padding-bottom:0; border-bottom:0 }
.cs-palette{ grid-template-columns:repeat(3, 1fr) }
}  .blog-section .blog-head-side{
display:flex; flex-direction:column; align-items:flex-end; gap:14px;
max-width:380px;
}
.blog-section .blog-head-side .h-meta{ text-align:right }
.blog-section .blog-archive-link{ align-self:flex-end }
@media (max-width: 720px){
.blog-section .blog-head-side{ align-items:flex-start; max-width:none }
.blog-section .blog-head-side .h-meta{ text-align:left }
.blog-section .blog-archive-link{ align-self:flex-start }
} .blog-carousel{ position:relative }
.blog-track{
display:grid; grid-auto-flow:column;
grid-auto-columns:calc((100% - 3 * 20px) / 4); gap:20px;
overflow-x:auto;
scroll-snap-type:x mandatory;
scroll-behavior:smooth;
scrollbar-width:none;
-ms-overflow-style:none;
padding-bottom:8px; }
.blog-track::-webkit-scrollbar{ display:none }
.blog-arrow{
position:absolute; top:calc((var(--blog-thumb-h, 200px)) / 2);
transform:translateY(-50%);
width:44px; height:44px; border-radius:50%;
border:1px solid var(--line-2);
background:var(--paper); color:var(--ink);
display:grid; place-items:center;
cursor:pointer; z-index:2;
transition:background .2s ease, color .2s ease, border-color .2s ease,
opacity .2s ease, transform .2s ease;
box-shadow:0 10px 24px -10px rgba(14,17,22,.18);
}
.blog-arrow:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink) }
.blog-arrow--prev{ left:-22px }
.blog-arrow--next{ right:-22px }
.blog-arrow[disabled]{ opacity:.35; cursor:default; pointer-events:none } .blog-carousel--no-overflow .blog-arrow{ display:none }
@media (max-width: 880px){
.blog-arrow--prev{ left:8px }
.blog-arrow--next{ right:8px }
} .blog-card{
scroll-snap-align:start;
background:var(--paper);
border:1px solid var(--line);
border-radius:var(--radius);
overflow:hidden;
display:flex; flex-direction:column;
transition:transform .25s ease, box-shadow .25s ease, border-color .2s ease;
}
.blog-card:hover{
transform:translateY(-4px);
box-shadow:0 18px 40px -10px rgba(14,17,22,.12);
border-color:var(--line-2);
}
.blog-card-link{
display:flex; flex-direction:column; height:100%;
color:inherit; text-decoration:none;
}
.blog-card-thumb{
--blog-thumb-h: 200px;
position:relative; height:var(--blog-thumb-h);
background:var(--paper-2); overflow:hidden;
}
.blog-card-thumb img{
width:100%; height:100%; object-fit:cover; display:block;
transition:transform .4s ease;
}
.blog-card:hover .blog-card-thumb img{ transform:scale(1.04) }
.blog-card-thumb-placeholder{
position:absolute; inset:0;
background:
radial-gradient(ellipse 60% 80% at 30% 80%, rgba(255,106,31,.18) 0%, transparent 60%),
radial-gradient(ellipse 60% 60% at 80% 20%, rgba(91,59,255,.18) 0%, transparent 55%),
linear-gradient(180deg, #1a1d24 0%, #0E1116 100%);
}
.blog-card-body{
padding:18px 20px 22px;
display:flex; flex-direction:column; gap:8px;
flex:1;
}
.blog-card-date{
font-size:11px; letter-spacing:.18em; text-transform:uppercase;
color:var(--ink-3);
}
.blog-card-title{
margin:0; font-size:18px; font-weight:600; letter-spacing:-.015em;
line-height:1.25; color:var(--ink);
}
.blog-card-excerpt{
margin:0; font-size:14px; line-height:1.5; color:var(--ink-3);
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
overflow:hidden;
}
@media (max-width: 1080px){
.blog-track{ grid-auto-columns:calc((100% - 2 * 20px) / 3) }
}
@media (max-width: 720px){
.blog-track{ grid-auto-columns:calc((100% - 1 * 16px) / 2); gap:16px }
}
@media (max-width: 520px){
.blog-track{ grid-auto-columns:86%; gap:14px }
} .blog-empty{
margin:48px 0;
font-family:'JetBrains Mono', monospace; font-size:13px;
color:var(--ink-3); letter-spacing:.04em;
} .blog-archive{ background:var(--paper) }
.blog-archive-hero{
background:#0E1116; color:#fff;
padding:140px var(--pad) 80px;
position:relative; overflow:hidden;
}
.blog-archive-hero::before{
content:""; position:absolute; inset:0; pointer-events:none;
background:
radial-gradient(ellipse 60% 80% at 50% 100%, rgba(255,106,31,.18) 0%, transparent 60%),
radial-gradient(ellipse 80% 60% at 50% 0%, rgba(91,59,255,.14) 0%, transparent 55%);
}
.blog-archive-hero .container{ position:relative; z-index:1 }
.blog-archive-eyebrow{ color:rgba(255,255,255,.7); margin-bottom:18px }
.blog-archive-eyebrow::before{ background:rgba(255,255,255,.55) }
.blog-archive-title{
font-size:clamp(36px, 5vw, 64px);
font-weight:500; letter-spacing:-.025em; line-height:1.05;
max-width:18ch; margin:0;
}
.blog-archive-list{ padding:clamp(48px, 6vw, 96px) 0 }
.blog-archive-grid{
display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;
}
@media (max-width: 880px){
.blog-archive-grid{ grid-template-columns:repeat(2, 1fr); gap:18px }
}
@media (max-width: 520px){
.blog-archive-grid{ grid-template-columns:1fr }
} .blog-archive .pagination,
.blog-archive .navigation.pagination,
.blog-archive .nav-links{
margin-top:48px;
display:flex; justify-content:center; gap:6px; flex-wrap:wrap;
font-family:'JetBrains Mono', monospace;
}
.blog-archive .nav-links a,
.blog-archive .nav-links span{
display:inline-flex; align-items:center; justify-content:center;
min-width:40px; height:40px; padding:0 12px;
border:1px solid var(--line-2); border-radius:10px;
font-size:13px; letter-spacing:.04em;
color:var(--ink-2); transition:all .2s ease;
}
.blog-archive .nav-links a:hover{
background:var(--ink); color:var(--paper); border-color:var(--ink);
}
.blog-archive .nav-links .current{
background:var(--ink); color:var(--paper); border-color:var(--ink);
} .blog-single{ background:var(--paper); color:var(--ink) }
.blog-single-hero{ min-height:54vh; padding-top:140px; padding-bottom:64px }
.blog-single-meta{ grid-template-columns:repeat(2, minmax(0,1fr)) }
@media (max-width: 520px){
.blog-single-meta{ grid-template-columns:1fr }
} .blog-body{
max-width:760px;
padding:clamp(40px, 6vw, 80px) var(--pad);
font-size:clamp(16px, 1.1vw, 18px);
line-height:1.7; color:var(--ink-2);
}
.blog-body > * + *{ margin-top:1.2em }
.blog-body h2{
font-size:clamp(24px, 2.4vw, 32px);
font-weight:600; letter-spacing:-.02em; line-height:1.2;
color:var(--ink); margin-top:2em;
}
.blog-body h3{
font-size:clamp(20px, 1.9vw, 24px);
font-weight:600; letter-spacing:-.015em; line-height:1.25;
color:var(--ink); margin-top:1.8em;
}
.blog-body p{ margin:0 }
.blog-body a{ color:var(--violet); text-decoration:underline; text-underline-offset:3px }
.blog-body a:hover{ color:var(--ink) }
.blog-body strong{ color:var(--ink) }
.blog-body em{ font-style:italic }
.blog-body ul, .blog-body ol{ padding-left:1.4em; margin:1em 0 }
.blog-body li{ margin:.4em 0 }
.blog-body blockquote{
border-left:3px solid var(--violet);
padding:0 0 0 22px; margin:1.6em 0;
font-style:italic; color:var(--ink);
font-size:1.1em; line-height:1.5;
}
.blog-body img, .blog-body figure img{
max-width:100%; height:auto;
border-radius:var(--radius); margin:1.5em 0;
}
.blog-body figure{ margin:1.5em 0 }
.blog-body figcaption{
font-family:'JetBrains Mono', monospace;
font-size:12px; color:var(--ink-3); margin-top:8px;
letter-spacing:.04em;
}
.blog-body code{
font-family:'JetBrains Mono', ui-monospace, monospace;
font-size:.92em; background:var(--paper-2);
padding:2px 6px; border-radius:4px;
}
.blog-body pre{
background:var(--ink); color:var(--paper);
padding:18px 20px; border-radius:var(--radius);
overflow-x:auto; font-size:13px; line-height:1.5;
}
.blog-body pre code{ background:transparent; padding:0; color:inherit }
.blog-body hr{
border:0; border-top:1px solid var(--line-2);
margin:2.5em 0;
}