:root{
  --bg:#07080b;
  --bg-2:#0b0d12;
  --ink:#ece9e2;
  --mute:#8b8f99;
  --dim:#4d515b;
  --line:rgba(236,233,226,.09);
  --gold:#c9ab6b;
  --gold-hi:#e9d6a6;
  --serif:"Cormorant Garamond","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sans:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:72px;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font:300 16px/1.7 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--gold);color:#111}
:focus-visible{outline:1px solid var(--gold);outline-offset:4px}

/* ambient layers */
#field{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.grain{position:fixed;inset:-50%;z-index:1;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
main,.foot,.nav{position:relative;z-index:2}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:18px clamp(20px,5vw,56px);transition:background .4s,backdrop-filter .4s,border-color .4s;border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(7,8,11,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--line)}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{width:30px;height:30px}
.brand-word{font:500 13px/1 var(--sans);letter-spacing:.32em;text-transform:uppercase}
.links{display:flex;align-items:center;gap:clamp(18px,3vw,40px)}
.links a{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);transition:color .3s;position:relative;padding:4px 0}
.links a:hover,.links a.active{color:var(--ink)}
.links a:not(.cta-link)::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.links a.active::after,.links a:hover::after{transform:scaleX(1)}
.links .cta-link{color:var(--ink);border:1px solid var(--line);padding:9px 20px;border-radius:99px;transition:border-color .3s,background .3s}
.links .cta-link:hover{border-color:var(--gold);background:rgba(201,171,107,.08)}
.burger{display:none;width:40px;height:40px;background:none;border:0;cursor:pointer;position:relative}
.burger span{position:absolute;left:10px;right:10px;height:1px;background:var(--ink);transition:transform .35s var(--ease),top .35s var(--ease)}
.burger span:first-child{top:16px}.burger span:last-child{top:24px}
.menu-open .burger span:first-child{top:20px;transform:rotate(45deg)}
.menu-open .burger span:last-child{top:20px;transform:rotate(-45deg)}

/* type */
.eyebrow{font-size:12px;letter-spacing:.36em;text-transform:uppercase;color:var(--gold)}
h1,h2,h3,blockquote{font-family:var(--serif);font-weight:300;letter-spacing:-.01em;line-height:1.04}
h1{font-size:clamp(46px,8.4vw,116px)}
h2{font-size:clamp(38px,5.6vw,76px)}
h1 em,h2 em,blockquote em{font-style:italic;font-weight:300;color:var(--gold-hi)}
.body{color:var(--mute);max-width:56ch}

/* layout */
.wrap{width:min(1180px,100% - clamp(40px,10vw,112px));margin-inline:auto}
.wrap.narrow{width:min(860px,100% - clamp(40px,10vw,112px))}
.section{padding:clamp(96px,16vw,190px) 0;position:relative}
.sec-head{display:grid;gap:22px;margin-bottom:clamp(48px,8vw,96px)}

/* hero */
.hero{min-height:100svh;display:grid;place-items:center;text-align:center;padding:120px 24px 90px;position:relative;overflow:hidden}
.glow{position:absolute;left:50%;top:46%;width:min(900px,120vw);aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(201,171,107,.13),rgba(86,70,150,.07) 55%,transparent 75%);filter:blur(30px);animation:breathe 9s ease-in-out infinite}
@keyframes breathe{50%{transform:translate(-50%,-50%) scale(1.08);opacity:.75}}
.hero-inner{position:relative;display:grid;justify-items:center;gap:28px;max-width:980px}
.hero-mark{width:clamp(64px,8vw,96px);height:auto;margin-bottom:6px;filter:drop-shadow(0 0 28px rgba(201,171,107,.35))}
.lede{max-width:54ch;color:var(--mute);font-size:clamp(16px,1.5vw,19px)}
.actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 30px;border-radius:99px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;border:1px solid transparent;transition:transform .35s var(--ease),background .3s,border-color .3s,color .3s,box-shadow .3s}
.btn-solid{background:var(--ink);color:#0a0a0c}
.btn-solid:hover{background:var(--gold-hi);transform:translateY(-2px);box-shadow:0 10px 40px -10px rgba(201,171,107,.55)}
.btn-ghost{border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--gold);transform:translateY(-2px)}
.scroll{position:absolute;bottom:30px;left:50%;width:1px;height:56px;background:var(--line);overflow:hidden}
.scroll span{position:absolute;left:0;top:-50%;width:1px;height:50%;background:var(--gold);animation:drip 2.4s var(--ease) infinite}
@keyframes drip{to{top:100%}}

/* logo draw-in */
.hero-mark .m-stem,.hero-mark .m-lens,.hero-mark .m-eye{}
.js .hero-mark use{opacity:1}
@keyframes draw{from{stroke-dasharray:0 100}}
@keyframes pop{from{opacity:0;transform:scale(0)}}
.m-stem{animation:draw 1.4s var(--ease) .15s backwards}
.m-lens{animation:draw 1.8s var(--ease) .5s backwards}
.m-eye{transform-box:fill-box;transform-origin:center;animation:pop 1s var(--ease) 1.5s backwards}

/* services */
.services{border-top:1px solid var(--line)}
.svc{display:grid;grid-template-columns:70px minmax(220px,1.1fr) 1.4fr;column-gap:clamp(16px,3vw,48px);row-gap:14px;align-items:baseline;
  padding:clamp(28px,4vw,46px) 12px;border-bottom:1px solid var(--line);position:relative;isolation:isolate;transition:padding .5s var(--ease)}
.svc::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .5s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(201,171,107,.09),transparent 70%)}
.svc:hover::before{opacity:1}
.svc:hover{padding-left:28px}
.num{font:400 12px var(--sans);letter-spacing:.2em;color:var(--gold)}
.svc h3{font-size:clamp(28px,3.4vw,44px);transition:color .4s}
.svc:hover h3{color:var(--gold-hi)}
.svc p{color:var(--mute);max-width:46ch}
.tags{grid-column:3;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);transition:color .4s}
.svc:hover .tags{color:var(--mute)}

/* statement */
.statement{background:linear-gradient(180deg,transparent,rgba(255,255,255,.015),transparent)}
.statement .wrap{display:grid;gap:36px}
blockquote{font-size:clamp(36px,5.6vw,72px);line-height:1.12}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.step{background:var(--bg);padding:clamp(28px,3vw,44px);display:grid;gap:14px;align-content:start;transition:background .5s}
.step:hover{background:var(--bg-2)}
.step-n{font:italic 300 40px/1 var(--serif);color:var(--gold)}
.step h3{font-size:30px}
.step p{color:var(--mute);font-size:15px}

/* contact */
.contact{padding-bottom:clamp(80px,12vw,140px)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,8vw,120px);align-items:start}
.contact-copy{display:grid;gap:26px;justify-items:start}
.mail{font:300 clamp(24px,3vw,38px)/1.2 var(--serif);font-style:italic;color:var(--gold-hi);border-bottom:1px solid rgba(201,171,107,.35);padding-bottom:4px;transition:border-color .3s}
.mail:hover{border-color:var(--gold-hi)}
.copy{background:none;border:0;cursor:pointer;color:var(--dim);font-size:12px;letter-spacing:.2em;text-transform:uppercase;transition:color .3s;margin-top:-10px}
.copy:hover{color:var(--ink)}
.form{display:grid;gap:26px}
.field{position:relative}
.field input,.field select,.field textarea{width:100%;background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:24px 0 10px;outline:none;transition:border-color .3s;resize:vertical;appearance:none;-webkit-appearance:none}
.field select{cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--mute) 50%),linear-gradient(135deg,var(--mute) 50%,transparent 50%);
  background-position:calc(100% - 10px) 60%,calc(100% - 5px) 60%;background-size:5px 5px;background-repeat:no-repeat}
.field select option{background:#12141a;color:var(--ink)}
.field label{position:absolute;left:0;top:24px;color:var(--mute);pointer-events:none;transition:all .3s var(--ease);transform-origin:left}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold)}
.field input:focus+label,.field input:not(:placeholder-shown)+label,
.field textarea:focus+label,.field textarea:not(:placeholder-shown)+label,
.field select:focus+label,.field select:valid+label{top:2px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.field.bad input,.field.bad select,.field.bad textarea{border-color:#b4605a}
.form .btn{justify-self:start;margin-top:6px}
.status{min-height:1.6em;font-size:14px;color:var(--mute)}
.status.ok{color:var(--gold-hi)}
.status.err{color:#d58a84}

/* footer */
.foot{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;justify-content:space-between;padding:36px clamp(20px,5vw,56px);border-top:1px solid var(--line);color:var(--dim);font-size:13px}
.foot .brand-mark{width:24px;height:24px}
.foot .brand-word{color:var(--mute);font-size:11px}
.up{letter-spacing:.14em;text-transform:uppercase;font-size:12px;transition:color .3s}
.up:hover{color:var(--ink)}

/* reveal */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;transform:none}

/* responsive */
@media (max-width:900px){
  .svc{grid-template-columns:44px 1fr;row-gap:10px}
  .svc p,.tags{grid-column:2}
  .steps{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width:720px){
  .burger{display:block}
  .links{position:fixed;inset:0;flex-direction:column;justify-content:center;gap:30px;background:rgba(7,8,11,.96);backdrop-filter:blur(16px);
    opacity:0;pointer-events:none;transition:opacity .4s}
  .links a{font:300 38px/1 var(--serif);letter-spacing:0;text-transform:none;color:var(--ink)}
  .links .cta-link{border:0;padding:0}
  .menu-open .links{opacity:1;pointer-events:auto}
  .menu-open .burger{position:relative;z-index:60}
  .menu-open .brand{position:relative;z-index:60}
  .steps{grid-template-columns:1fr}
  .svc:hover{padding-left:12px}
  .foot{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none}
}