/* 81 Digital — site styles */
/* Fonts (self-hosted, SIL OFL) */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/space-grotesk-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/space-grotesk-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/space-grotesk-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/dm-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/dm-sans-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/dm-sans-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/dm-sans-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2')}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
a{color:inherit}
a:hover{opacity:.85}
h1,h2,h3,p{margin:0}
h3{line-height:1.15}
img{max-width:100%}
[hidden]{display:none !important}

/* Brand pixel motif */
.px{display:inline-block;width:.2em;height:.2em;margin-left:.07em;background:#d7ff3d}
.pd{display:inline-block;width:.16em;height:.16em;margin-left:.04em;background:var(--pc,#3355ff);color:transparent;overflow:hidden;line-height:0;vertical-align:baseline}
.eb{display:flex;align-items:center;gap:10px}
.eb::before{content:"";width:8px;height:8px;background:currentColor;flex:none}
.dots{background-image:radial-gradient(circle,#ffffff17 1.2px,transparent 1.7px);background-size:28px 28px}
.dots-blue{background-image:radial-gradient(circle,#ffffff2b 1.2px,transparent 1.7px);background-size:28px 28px}
.mega{display:block;font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-0.055em;line-height:.82;font-size:clamp(64px,14vw,270px);text-decoration:none;white-space:nowrap;color:#ffffff}

/* Layout */
.wrap{width:85%;max-width:1600px;margin-left:auto;margin-right:auto}
@media (max-width:767px){.wrap{width:90%}}

/* Nav */
.nav-links{display:flex;align-items:center}
.nav-toggle{display:none}
.nav-toggle .i-close{display:none}
.nav-toggle[aria-expanded="true"] .i-close{display:block}
.nav-toggle[aria-expanded="true"] .i-open{display:none}
@media (max-width:960px){
.nav-toggle{display:flex}
.nav-links{display:none;width:100%;flex-direction:column;align-items:flex-start;padding:4px 0 12px}
.nav-links.open{display:flex}
}

/* Hero slider */
.hs{position:relative;flex:1 1 auto;min-height:560px;overflow:hidden;background:#161a22;border-radius:12px;box-shadow:0 40px 80px -30px #000000cc,0 0 0 1px #ffffff1f}
@media (max-width:767px){.hs{min-height:440px}}
.hs .sl{position:absolute;inset:0;opacity:0;animation:hsFade 30s infinite}
.hs .sl:nth-child(2){animation-delay:5s}
.hs .sl:nth-child(3){animation-delay:10s}
.hs .sl:nth-child(4){animation-delay:15s}
.hs .sl:nth-child(5){animation-delay:20s}
.hs .sl:nth-child(6){animation-delay:25s}
.hs img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;animation:hsZoom 30s infinite}
.hs .sl:nth-child(2) img{animation-delay:5s}
.hs .sl:nth-child(3) img{animation-delay:10s}
.hs .sl:nth-child(4) img{animation-delay:15s}
.hs .sl:nth-child(5) img{animation-delay:20s}
.hs .sl:nth-child(6) img{animation-delay:25s}
@keyframes hsFade{0%{opacity:0}2.5%{opacity:1}16.7%{opacity:1}19.2%{opacity:0}100%{opacity:0}}
@keyframes hsZoom{0%{transform:scale(1.06)}19.2%{transform:scale(1)}100%{transform:scale(1)}}
.chip{position:absolute;left:14px;bottom:14px;display:flex;align-items:center;gap:8px;background:#0b0d12e6;color:#ffffff;font-size:13px;font-weight:600;padding:7px 12px;border-radius:999px}
.chip::before{content:"";width:7px;height:7px;background:#d7ff3d}
.hbar{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.hbar span{height:3px;background:#ffffff26;border-radius:9px;animation:hsBar 30s infinite}
.hbar span:nth-child(2){animation-delay:5s}
.hbar span:nth-child(3){animation-delay:10s}
.hbar span:nth-child(4){animation-delay:15s}
.hbar span:nth-child(5){animation-delay:20s}
.hbar span:nth-child(6){animation-delay:25s}
@keyframes hsBar{0%{background:#d7ff3d}16.7%{background:#d7ff3d}17%{background:#ffffff26}100%{background:#ffffff26}}
@media (prefers-reduced-motion:reduce){.hs .sl,.hs img,.hbar span{animation:none}.hs .sl:first-child{opacity:1}}

/* Desktop: nav + hero fill the screen */
@media (min-width:961px){
.hero-screen{min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
.hero-screen>#top{flex:1 1 auto;padding-top:clamp(32px,4vw,64px) !important;padding-bottom:clamp(40px,5vw,72px) !important}
.hero-screen .hs{min-height:360px}
.hero-screen h1{font-size:clamp(42px,min(7vw,10.5vh),104px) !important}
}

/* Work cards */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
@media (max-width:860px){.cards{grid-template-columns:minmax(0,1fr);gap:48px}}

/* Services */
.svc{flex:1 1 340px;min-width:0;padding:32px 0;border-bottom:1px solid #ffffff2e;display:flex;flex-direction:column;gap:10px}
.svc .n{font-family:'JetBrains Mono',monospace;font-size:13px;color:#d7ff3d}
.svc h3{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:26px;letter-spacing:-0.02em}
.svc p{font-size:16px;color:#9aa0ac}

/* Process */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
@media (max-width:700px){.steps{grid-template-columns:minmax(0,1fr)}}
.steps li{min-width:0;background:#f4f5f7;border-radius:8px;padding:28px;display:flex;flex-direction:column;gap:12px}
.steps .n{width:44px;height:44px;border-radius:999px;background:#3355ff;color:#ffffff;display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-weight:700}
.steps h3{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:22px}
.steps p{font-size:16px;color:#545a66}

/* About mosaic */
.mosaic{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:10px;aspect-ratio:4/5;max-height:640px}
.mosaic img{width:100%;height:100%;object-fit:cover;border-radius:8px;display:block;min-height:0}

/* Contact form */
.cf .row{display:flex;flex-wrap:wrap;gap:18px}
.cf .row>.fld{flex:1 1 200px}
.cf .fld{min-width:0;display:flex;flex-direction:column;gap:6px}
.cf label{font-size:14px;font-weight:700}
.cf input:not([type=hidden]),.cf select,.cf textarea{font:inherit;color:#0b0d12;width:100%;padding:12px 14px;min-height:48px;border:1px solid #8b929e;border-radius:6px;background:#ffffff}
.cf textarea{resize:vertical}
.cf input:focus,.cf select:focus,.cf textarea:focus{outline:2px solid #3355ff;outline-offset:1px;border-color:#3355ff}
.cf select{-webkit-appearance:none;appearance:none;padding-right:44px;background:#ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230B0D12' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center}
.cf .money{position:relative;display:flex}
.cf .money span{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#545a66;pointer-events:none}
.cf .money input{padding-left:28px}
.cf button[disabled]{opacity:.6;cursor:wait}
#form-thanks:not([hidden]){display:flex}

/* Legal pages */
.legal{max-width:760px;margin-left:auto;margin-right:auto;font-size:17px;line-height:1.7;color:#2a2f3a}
@media (max-width:767px){.legal{width:90%}}
.legal h2{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:clamp(24px,2.4vw,30px);line-height:1.15;letter-spacing:-0.02em;color:#0b0d12;margin:48px 0 14px}
.legal h2:first-child{margin-top:0}
.legal p{margin:0 0 16px}
.legal ul{margin:0 0 16px;padding-left:22px}
.legal li{margin:6px 0}
.legal li::marker{color:#3355ff}
.legal strong{color:#0b0d12}
.legal a{color:#3355ff;text-underline-offset:3px;font-weight:600}