@font-face { font-family:Fira; src:url("fonts/FiraCode-Regular.woff2") format("woff2"); font-display:swap; font-weight:400; }
@font-face { font-family:Fira; src:url("fonts/FiraCode-SemiBold.woff2") format("woff2"); font-display:swap; font-weight:600; }
:root { --paper:#e8e9e3; --ink:#171a23; --purple:#6a5acd; --orange:#ff572f; --mono:Fira,ui-monospace,monospace; --sans:Arial,Helvetica,sans-serif; }
* { box-sizing:border-box; }
html,body { min-height:100%; }
body { margin:0; overflow:hidden; background:var(--paper); color:var(--ink); font-family:var(--sans); }
a { color:inherit; } a:focus-visible { outline:2px solid var(--orange); outline-offset:5px; }
.service-page { position:relative; isolation:isolate; min-height:100svh; overflow:hidden; display:flex; flex-direction:column; padding:24px 28px; background:var(--paper); }
.dot-field { position:absolute; z-index:-1; inset:0; width:100%; height:100%; }
.grain { pointer-events:none; position:absolute; z-index:1; inset:0; opacity:.15; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E"); }
.top,.content,.bottom { position:relative; z-index:2; }
.top { display:flex; justify-content:space-between; align-items:flex-start; }
.brand { font:600 clamp(18px,1.5vw,23px)/1 var(--mono); letter-spacing:-.13em; text-decoration:none; }.brand span { color:var(--purple); }
.nav { display:flex; gap:22px; }.nav a { border-bottom:1px solid var(--ink); padding-bottom:3px; font:600 10px/1 var(--mono); letter-spacing:.1em; text-decoration:none; text-transform:uppercase; }.nav a:hover { color:var(--purple); border-color:var(--purple); }
.content { flex:1; display:grid; grid-template-columns:minmax(270px,.9fr) minmax(360px,1.1fr); gap:clamp(35px,7vw,120px); align-items:center; padding:clamp(45px,7vh,110px) 0 50px; }
.eyebrow,.bottom { font:600 10px/1.2 var(--mono); letter-spacing:.1em; text-transform:uppercase; }.eyebrow { margin:0 0 18px; color:var(--purple); }
h1 { max-width:7ch; margin:0; font-size:clamp(72px,10vw,170px); line-height:.74; letter-spacing:-.115em; } h1 em { display:block; color:var(--purple); font-family:Georgia,serif; font-weight:400; }
.brief { max-width:21ch; margin:30px 0 0; color:rgba(23,26,35,.65); font:400 13px/1.5 var(--mono); }
.shape-zone { position:relative; min-height:min(58vw,590px); pointer-events:none; }
@media (max-width:700px) { .service-page { padding:20px; }.nav { gap:16px; }.content { grid-template-columns:1fr; gap:24px; padding:60px 0 34px; }.shape-zone { min-height:46vh; max-height:420px; order:-1; } h1 { font-size:clamp(72px,20vw,112px); }.brief { margin-top:23px; } }