html{scroll-behavior:smooth}
body{margin:0;background:#090c0b}

.site{--charcoal:#1A1A18;--charcoal-soft:#2A2A26;--gold:#C9A227;--gold-hover:#DDB945;--bronze:#8C6D3F;--ivory:#F5F1E8;--ivory-soft:#EFE9DA;--stone:#5C594E;--stone-on-dark:#B8B5A9;--faint-on-dark:#8A8778;--border-light:#E3DCC9;--border-dark:#3A3934;position:relative;background:var(--ivory);color:var(--charcoal);font-family:'Inter',system-ui,sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
.site *{box-sizing:border-box}
.wrap{max-width:1120px;margin:0 auto;padding:0 56px}
.display{font-family:'Fraunces',Georgia,'Times New Roman',serif;font-weight:500;letter-spacing:-.01em;line-height:1.12;color:var(--charcoal);margin:0}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:'Inter',sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze);margin:0}
.eyebrow::before{content:"";width:16px;height:1px;background:var(--bronze);opacity:.8}
.sec{position:relative;padding:104px 0}
.sec-alt{background:var(--ivory-soft)}
.sechead{display:flex;flex-direction:column;gap:16px;margin-bottom:52px}
.sectitle{font-size:38px}
.seclead{max-width:560px;color:var(--stone);font-size:17px;margin:0}
/* nav */
.nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:18px 56px;border-bottom:1px solid var(--border-dark);background:color-mix(in srgb,var(--charcoal) 90%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brandmark{width:24px;height:24px;display:block}
.brandword{font-family:'Montserrat',sans-serif;font-weight:500;font-size:16px;letter-spacing:.14em;color:var(--ivory)}
.navlinks{display:flex;align-items:center;gap:30px}
.navlink{color:var(--stone-on-dark);text-decoration:none;font-size:14.5px;font-weight:500;transition:color .22s;position:relative;padding:4px 0;font-family:'Inter',sans-serif}
.navlink::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--gold);transition:width .28s ease}
.navlink:hover{color:var(--ivory)}
.navlink:hover::after{width:100%}
.navlink.active{color:var(--ivory)}
.navlink.active::after{width:100%}
.langtog{display:flex;align-items:center;gap:2px;border:1px solid var(--border-dark);border-radius:999px;padding:3px}
.langbtn{border:0;background:transparent;color:var(--faint-on-dark);padding:5px 12px;border-radius:999px;cursor:pointer;font:inherit;font-size:12px;transition:.2s;letter-spacing:.05em;font-family:'Inter',sans-serif}
.langbtn.on{background:var(--gold);color:var(--charcoal);font-weight:600}
/* hero */
.hero{position:relative;padding:128px 0 100px;overflow:hidden;background:var(--charcoal)}
.hero .wrap{position:relative;z-index:1}
.hglow{position:absolute;width:640px;height:300px;top:0;left:50%;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(201,162,39,.14),transparent 72%);pointer-events:none}
.heroscene{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hgrid{position:absolute;inset:-40px;background-image:radial-gradient(rgba(245,241,232,.09) 1px,transparent 1.5px);background-size:38px 38px;opacity:.55;animation:hgriddrift 50s linear infinite;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 40%,transparent 85%);mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 40%,transparent 85%)}
@keyframes hgriddrift{from{background-position:0 0}to{background-position:-380px -380px}}
.orb{position:absolute;border-radius:50%;filter:blur(70px);will-change:transform}
.orb1{width:340px;height:340px;left:6%;top:-90px;background:radial-gradient(circle,rgba(201,162,39,.30),transparent 70%);animation:orbdrift1 24s ease-in-out infinite}
.orb2{width:260px;height:260px;right:10%;top:40px;background:radial-gradient(circle,rgba(140,109,63,.30),transparent 70%);animation:orbdrift2 19s ease-in-out infinite}
.orb3{width:200px;height:200px;left:42%;top:160px;background:radial-gradient(circle,rgba(201,162,39,.20),transparent 70%);animation:orbdrift3 28s ease-in-out infinite}
@keyframes orbdrift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,30px) scale(1.12)}}
@keyframes orbdrift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-36px,26px) scale(.9)}}
@keyframes orbdrift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(24px,-24px) scale(1.08)}}
.parallax{position:absolute;inset:0;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.hspot{position:absolute;width:520px;height:520px;left:0;top:0;margin:-260px 0 0 -260px;border-radius:50%;background:radial-gradient(circle,rgba(201,162,39,.22),transparent 68%);transform:translate(var(--sx,50vw),var(--sy,120px));transition:transform .3s cubic-bezier(.2,.7,.3,1),opacity .4s;opacity:0}
.heroscene.active .hspot{opacity:1}
@media(prefers-reduced-motion:reduce){.hgrid,.orb1,.orb2,.orb3{animation:none}.parallax,.hspot{transition:none}.codebit,.techbit{animation:none;opacity:0}}
.hnet{position:absolute;inset:0;width:100%;height:100%;opacity:.55}
.codebit{position:absolute;font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace;font-size:12.5px;color:rgba(201,162,39,.55);white-space:nowrap;opacity:0;animation-name:codefloat;animation-timing-function:ease-in-out;animation-iteration-count:infinite;letter-spacing:.01em}
@keyframes codefloat{0%{transform:translateY(14px);opacity:0}12%{opacity:.6}50%{transform:translateY(-10px)}88%{opacity:.5}100%{transform:translateY(-26px);opacity:0}}
.techbit{position:absolute;font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace;font-size:11.5px;color:rgba(245,241,232,.5);white-space:nowrap;opacity:0;animation-name:techfloat;animation-timing-function:ease-in-out;animation-iteration-count:infinite;letter-spacing:.02em}
@keyframes techfloat{0%{transform:translate(0,18px) rotate(-1deg);opacity:0}14%{opacity:.55}50%{transform:translate(8px,-8px) rotate(1deg)}86%{opacity:.45}100%{transform:translate(-6px,-28px) rotate(-1deg);opacity:0}}
.herokick{color:var(--gold)}
.herokick::before{background:var(--gold);opacity:1}
.hbadge{display:inline-flex;align-items:center;gap:9px;padding:7px 16px;border:1px solid var(--border-dark);border-radius:999px;font-size:12.5px;font-weight:500;color:var(--stone-on-dark);margin-bottom:26px;font-family:'Inter',sans-serif}
.hbadge .pulse{width:7px;height:7px;border-radius:50%;background:var(--gold);animation:pulse 2.6s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(201,162,39,.55)}70%{box-shadow:0 0 0 9px rgba(201,162,39,0)}100%{box-shadow:0 0 0 0 rgba(201,162,39,0)}}
.herotitle{font-size:72px;max-width:15ch;color:var(--ivory)}
.herosub{margin:28px 0 0;max-width:54ch;font-size:19px;color:var(--stone-on-dark)}
.herocta{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:6px;font-weight:600;font-size:15px;cursor:pointer;text-decoration:none;border:1px solid transparent;transition:transform .22s ease,background .22s,border-color .22s,box-shadow .22s;font-family:'Inter',sans-serif}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--gold);color:var(--charcoal)}
.btn-primary:hover{background:var(--gold-hover)}
.btn-ghost{border-color:var(--border-dark);color:var(--ivory);background:transparent}
.btn-ghost:hover{border-color:var(--gold);background:rgba(201,162,39,.08)}
.arrow{transition:transform .25s}
.btn:hover .arrow{transform:translateX(3px)}
/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:80px;border:1px solid var(--border-dark);border-radius:12px;overflow:hidden;background:var(--border-dark)}
.stat{background:var(--charcoal);padding:28px 26px}
.statnum{font-family:'Fraunces',serif;font-weight:500;font-size:38px;color:var(--gold);letter-spacing:-.01em;line-height:1}
.statlabel{margin-top:8px;font-size:13.5px;color:var(--faint-on-dark)}
/* services */
.svcgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.svc{position:relative;padding:32px 30px;border:1px solid var(--border-light);border-radius:12px;background:#fff}
.svc.reveal{transition:opacity .9s cubic-bezier(.2,.7,.3,1),transform .3s ease,border-color .3s ease}
.svc:hover{transform:translateY(-4px);border-color:var(--bronze)}
.svcn{font-family:'Inter',sans-serif;font-weight:600;font-size:12.5px;color:var(--bronze);letter-spacing:.1em}
.svctitle{font-family:'Fraunces',serif;font-weight:500;font-size:21px;color:var(--charcoal);margin:14px 0 10px}
.svcdesc{color:var(--stone);font-size:15px;margin:0}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.tag{font-family:'Inter',sans-serif;font-size:11px;letter-spacing:.03em;color:var(--stone);border:1px solid var(--border-light);border-radius:6px;padding:4px 9px;font-weight:500}
/* tech */
.techgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.techcard{padding:26px 28px;border:1px solid var(--border-light);border-radius:12px;background:#fff}
.techgroup{font-family:'Inter',sans-serif;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze);margin:0 0 16px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-size:13.5px;color:var(--charcoal);border:1px solid var(--border-light);border-radius:8px;padding:7px 12px;background:var(--ivory-soft);transition:border-color .25s}
.sec-alt .chip{background:#fff}
.chip:hover{border-color:var(--bronze)}
/* work */
.worklist{display:flex;flex-direction:column;border-top:1px solid var(--border-light)}
.work{display:grid;grid-template-columns:200px 1fr auto;gap:32px;align-items:start;padding:30px 8px;border-bottom:1px solid var(--border-light);cursor:default;transform:scale(1);will-change:transform}
.work.reveal{transition:opacity .9s cubic-bezier(.2,.7,.3,1),transform .35s cubic-bezier(.2,.7,.3,1),background .35s ease,box-shadow .35s ease}
.work:hover{background:#fff;transform:scale(1.015);box-shadow:0 12px 32px rgba(26,26,24,.08);position:relative;z-index:1}
.workclient{font-family:'Fraunces',serif;font-weight:500;font-size:18px;color:var(--charcoal)}
.workmeta{font-family:'Inter',sans-serif;font-size:11.5px;color:var(--bronze);margin-top:7px;letter-spacing:.05em;font-weight:600}
.workproj{font-weight:600;font-size:16px;color:var(--charcoal);margin:0 0 7px}
.workdesc{color:var(--stone);font-size:14.5px;margin:0;max-width:60ch}
.worktags{display:flex;flex-wrap:wrap;gap:7px;justify-content:flex-end;max-width:220px}
/* about */
.aboutgrid{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:start}
.abouttitle{font-size:34px;margin-bottom:24px}
.aboutbody p{color:var(--stone);font-size:17px;margin:0 0 18px}
.aboutbody p:first-child{color:var(--charcoal)}
.points{display:flex;flex-direction:column;gap:14px;border-left:1px solid var(--border-light);padding-left:26px}
.point{display:flex;gap:12px;align-items:flex-start;color:var(--charcoal);font-size:15px}
.point svg{flex:none;margin-top:3px;color:var(--bronze)}
/* process */
.procgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.proc{padding:28px 24px 0;border-top:2px solid var(--gold)}
.procn{font-family:'Fraunces',serif;font-weight:600;font-size:42px;color:var(--border-light);letter-spacing:-.02em;line-height:.9}
.proctitle{font-family:'Fraunces',serif;font-weight:500;font-size:18px;color:var(--charcoal);margin:14px 0 9px}
.procdesc{color:var(--stone);font-size:14px;margin:0}
/* contact */
.contact{position:relative;border:1px solid var(--border-dark);border-radius:20px;background:var(--charcoal);padding:64px 56px;overflow:hidden}
.contacttitle{font-size:42px;max-width:16ch;color:var(--ivory)}
.contactsub{color:var(--stone-on-dark);font-size:18px;margin:20px 0 34px;max-width:48ch}
.contactmeta{display:flex;flex-wrap:wrap;gap:40px;margin-top:44px;padding-top:34px;border-top:1px solid var(--border-dark)}
.cmeta{display:flex;flex-direction:column;gap:5px}
.cmk{font-family:'Inter',sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint-on-dark);font-weight:600}
.cmv{font-size:15.5px;color:var(--ivory);font-weight:500}
.emaillink{font-family:'Fraunces',serif;font-size:25px;color:var(--gold);text-decoration:none;font-weight:500;transition:opacity .2s}
.emaillink:hover{opacity:.75}
.glow{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none}
.contact .glow{width:420px;height:420px;background:radial-gradient(circle,rgba(201,162,39,.18),transparent 70%);top:-160px;right:-100px}
/* footer */
.foot{display:flex;align-items:center;justify-content:space-between;padding:32px 56px;background:var(--charcoal);border-top:1px solid var(--border-dark);color:var(--faint-on-dark);font-size:13.5px}
/* reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.2,.7,.3,1),transform .9s cubic-bezier(.2,.7,.3,1)}
.reveal-left{transform:translateX(-34px)}
.reveal-right{transform:translateX(34px)}
.reveal-scale{transform:translateY(16px) scale(.94)}
.reveal.in{opacity:1;transform:none}
/* responsive */
@media(max-width:960px){.wrap{padding:0 32px}.nav{padding:16px 32px}.foot{padding:26px 32px}.herotitle{font-size:48px}.sectitle{font-size:30px}.contacttitle{font-size:32px}.svcgrid,.techgrid,.aboutgrid{grid-template-columns:1fr;gap:16px}.aboutgrid{gap:36px}.procgrid,.stats{grid-template-columns:repeat(2,1fr)}.work{grid-template-columns:1fr;gap:12px}.worktags{justify-content:flex-start;max-width:none}.sec{padding:72px 0}.hero{padding:88px 0 68px}.navlinks{gap:18px}.navlink{display:none}.contact{padding:44px 30px}}
@media(max-width:560px){.stats,.procgrid{grid-template-columns:1fr}.herotitle{font-size:38px}.herocta{flex-direction:column;align-items:stretch}.btn{justify-content:center}}