@font-face{font-family:Erwin;src:url(erwin.woff)}
@font-face{font-family:Ora;src:url(ora-script.woff)}
@font-face{font-family:Lora,Georgia,serif;src:url(inter-400.woff);font-weight:400}
@font-face{font-family:Lora,Georgia,serif;src:url(inter-500.woff);font-weight:500 700}
:root{--night:#120E19;--ground:#191423;--plum:#503D5B;--amethyst:#503D5B;--surface2:#382C44;--border:#705F78;--border-am:#9A88A3;--gold-am:#D6BE95;--gold-deep:#7A5E37;--ok:#9FC29A;--warn:#C9B26A;--err:#E0A49C;--gold:#C3A77C;--parch:#F6F2E8;--teal:#5FBEC9;
 --foil:linear-gradient(115deg,#9E7F54 0%,#E8D1A1 36%,#C9AB7D 55%,#97784C 100%);--line:rgba(195,167,124,.26);
 --gutter:max(clamp(24px,7vw,120px),env(safe-area-inset-left,0px),env(safe-area-inset-right,0px));color-scheme:dark}
*{box-sizing:border-box}
html{background:var(--night)}
body{margin:0;background:var(--ground);color:var(--parch);font-family:Lora,Georgia,serif;font-size:19px;line-height:1.7;position:relative;overflow-x:hidden}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--teal);outline-offset:4px;border-radius:4px}
.foil{background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent}
h1,h2,h3{font-family:Erwin,serif;font-weight:400;text-transform:uppercase;letter-spacing:.02em;margin:0;line-height:1.04}
h1{font-size:clamp(52px,6.6vw,104px)}
h2{font-size:clamp(40px,4.6vw,72px);line-height:1.08}
h3{font-size:26px;letter-spacing:.03em;line-height:1.15}
.h{font-family:Ora,cursive;text-transform:none;font-size:1.6em;line-height:0;letter-spacing:0;padding:.1em .14em .12em .34em;margin-left:-.18em;font-weight:400}
/* Safari clips script swashes that spill past the parent's box, so the script word paints its own foil */
.foil .h{display:inline-block;line-height:1;padding:.2em .16em .26em .36em;margin:-.2em 0 -.26em -.2em;background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent}
p{margin:0}
.lede{font-size:21px;line-height:1.7;max-width:34em;color:rgba(246,242,232,.9)}
.body{max-width:36em;color:rgba(246,242,232,.93)}
.ui{font-family:Lora,Georgia,serif;font-size:15px;letter-spacing:.01em}
.cap{font-family:Lora,Georgia,serif;font-size:13px;color:rgba(246,242,232,.78);letter-spacing:.02em}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:Lora,Georgia,serif;font-weight:500;font-size:15px;padding:15px 26px;border-radius:999px;text-decoration:none;border:1px solid rgba(195,167,124,.55);color:var(--parch);transition:border-color .2s,background .2s,filter .2s,box-shadow .2s}
.btn.primary{background:linear-gradient(115deg,#8E6F43 0%,#CFAF78 38%,#B89763 58%,#86673C 100%);color:#1d1626;border-color:transparent}
.btn:hover{border-color:var(--gold);background:var(--amethyst)}
.btn.primary:hover{background:var(--foil);filter:none;box-shadow:0 0 18px rgba(232,209,161,.18)}
.textlink{font-family:Lora,Georgia,serif;font-size:15px;font-weight:500;color:var(--parch);text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:3px}
.textlink:hover{border-bottom-color:var(--teal)}
.grain{position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.09;mix-blend-mode:overlay;
 background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* nav */
.nav{position:absolute;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:34px var(--gutter)}
.mark{display:flex;align-items:baseline;gap:2px;text-decoration:none}
.mark .s{font-family:Ora;font-size:38px;line-height:1;padding:.16em .12em .22em .32em;margin:-.16em -.12em -.22em -.32em}
.mark .o{font-family:Erwin;font-size:27px;color:var(--parch);letter-spacing:.04em}
.nav ul{display:flex;gap:34px;list-style:none;margin:0;padding:0}
.nav a{text-decoration:none;color:rgba(246,242,232,.93)}
.nav a:hover{color:var(--parch)}
.nav a[aria-current]{color:var(--parch);box-shadow:0 2px 0 var(--teal)}

/* the constellation trail (signature) */
.trail{position:absolute;left:calc(var(--gutter) / 2 - 1px);top:200px;bottom:520px;width:2px;z-index:6;pointer-events:none;
 background:linear-gradient(180deg,rgba(195,167,124,0) 0%,rgba(195,167,124,.55) 6%,rgba(195,167,124,.22) 50%,rgba(242,226,190,.75) 100%)}
.pt{position:absolute;left:calc(var(--gutter) / 2 - 6px);width:12px;height:12px;border-radius:50%;z-index:7;background:var(--foil);box-shadow:0 0 0 6px rgba(195,167,124,.12),0 0 18px rgba(232,209,161,.55)}

/* sections */
section{position:relative;overflow:hidden}
.scene{position:absolute;inset:0;background-size:cover;background-position:center;filter:saturate(.9)}
.think .scene{filter:saturate(.78) brightness(.92) hue-rotate(-6deg)}
.shade-l{position:absolute;inset:0;background:linear-gradient(90deg,var(--ground) 0%,rgba(25,20,35,.92) 26%,rgba(25,20,35,.35) 55%,rgba(25,20,35,0) 75%)}
.shade-r{position:absolute;inset:0;background:linear-gradient(270deg,var(--ground) 0%,rgba(25,20,35,.92) 30%,rgba(25,20,35,.35) 58%,rgba(25,20,35,0) 78%)}
.shade-b{position:absolute;inset:0;background:linear-gradient(180deg,rgba(25,20,35,.55) 0%,rgba(25,20,35,0) 22%,rgba(25,20,35,0) 70%,var(--ground) 100%)}
.inner{position:relative;z-index:5;padding:0 var(--gutter)}

.hero{height:960px}
.hero .scene{background-image:url(img/gilder.jpg);background-position:60% 50%;left:26%}
.hero .shade-l{background:linear-gradient(90deg,var(--ground) 0%,var(--ground) 18%,rgba(25,20,35,.88) 34%,rgba(25,20,35,.4) 56%,rgba(25,20,35,0) 74%)}
.hero .inner{padding-top:210px;max-width:1120px}
.hero .lede{max-width:31em}
.hero h1{font-size:clamp(48px,6vw,92px);line-height:1.3}
.hero .lede{margin-top:40px}
.hero .actions{display:flex;gap:16px;margin-top:44px}

.work{padding:150px 0 140px;background:radial-gradient(1200px 600px at 85% 0%,rgba(135,63,101,.16),transparent 60%),var(--ground)}
.work .head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:56px}
.work .head p{max-width:30em;color:rgba(246,242,232,.93)}
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
@media (max-width:1200px) and (min-width:901px){.cases{grid-template-columns:1fr 1fr}.cases .case:first-child{grid-column:1 / -1}.cases .case:first-child img{aspect-ratio:21/9}}
.case{display:block;text-decoration:none;color:inherit;border-radius:18px;overflow:hidden;background:var(--amethyst);border:1px solid var(--border-am)}
.case .cap{color:var(--gold-am)}
.case .textlink{border-bottom-color:var(--gold-am)}
.case img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;filter:saturate(.95)}
.case .meta{padding:28px 32px 32px}
.case h3{margin-bottom:12px}
.case p{color:rgba(246,242,232,.8);font-size:17.5px;line-height:1.6;margin-bottom:22px}
.case .links{display:flex;gap:26px;align-items:center}

.approach{height:1020px}
.approach .scene{background-image:url(img/press.jpg);background-position:22% 50%;right:0;left:-8%}
.approach .shade-r{background:linear-gradient(270deg,var(--ground) 0%,var(--ground) 40%,rgba(25,20,35,.82) 52%,rgba(25,20,35,.2) 72%,rgba(25,20,35,0) 86%)}
.approach .inner{position:absolute;right:0;top:0;bottom:0;width:50%;padding:110px var(--gutter) 0 20px;display:flex;flex-direction:column;justify-content:center}
.steps{list-style:none;margin:48px 0 0;padding:0 0 0 64px;position:relative}
.steps:before{content:"";position:absolute;left:19px;top:20px;bottom:20px;width:1.5px;background:linear-gradient(180deg,rgba(195,167,124,.3),#F2E2BE);box-shadow:0 0 10px rgba(242,226,190,.35)}
.steps li{position:relative;margin-bottom:26px}
.steps .n{position:absolute;left:-64px;top:-2px;width:40px;height:40px;border-radius:50%;border:1px solid var(--gold);background:var(--ground);display:flex;align-items:center;justify-content:center;font-family:"Cormorant Garamond",serif;font-weight:500;font-size:20px;font-variant-numeric:lining-nums;color:var(--gold)}
.steps h3{font-size:22px;margin-bottom:4px}
.steps p{font-size:17px;line-height:1.55;color:rgba(246,242,232,.93)}

.think{height:980px}
.think .scene{background-image:url(img/threads.jpg);background-position:70% 50%;left:20%}
.think .shade-l{background:linear-gradient(90deg,var(--ground) 0%,var(--ground) 30%,rgba(25,20,35,.8) 44%,rgba(25,20,35,.15) 66%,rgba(25,20,35,0) 80%)}
.think .inner{padding-top:170px;max-width:760px}
.qs{margin-top:54px;display:flex;flex-direction:column;gap:34px}
.q{border-left:1px solid var(--border);padding-left:28px}
.q h3{font-family:Lora,serif;text-transform:none;letter-spacing:0;font-size:30px;font-style:italic;font-weight:400;margin-bottom:8px}
.q p{color:rgba(246,242,232,.93);max-width:30em}

.about{height:960px}
.about .scene{background-image:url(img/ledger.jpg);background-position:40% 50%;right:0;left:-10%}
.about .shade-r{background:linear-gradient(270deg,var(--ground) 0%,var(--ground) 38%,rgba(25,20,35,.82) 50%,rgba(25,20,35,.2) 70%,rgba(25,20,35,0) 84%)}
.about .inner{position:absolute;right:0;top:0;bottom:0;width:50%;padding:0 var(--gutter) 0 0;display:flex;flex-direction:column;justify-content:center}
.about .body{margin-top:36px}
.about .body+.body{margin-top:20px}
.about .facts{display:flex;gap:44px;margin:40px 0 36px}
.about .facts div{font-family:Lora,Georgia,serif;font-size:14px;color:rgba(246,242,232,.85);max-width:11em;line-height:1.45}
.about .facts b{display:block;font-family:"Cormorant Garamond",serif;font-weight:500;font-size:46px;line-height:1;margin-bottom:6px;font-variant-numeric:lining-nums}

.system{height:1120px}
.system .scene{background-image:url(img/gate.jpg);background-position:50% 55%;top:470px}
.system .shade-b{top:470px;background:linear-gradient(180deg,var(--ground) 0%,rgba(25,20,35,.35) 22%,rgba(25,20,35,0) 60%,rgba(25,20,35,.7) 100%)}
.system .inner{padding-top:150px;max-width:900px}
.system .body{margin-top:32px}
.system .rooms{display:flex;gap:34px;margin-top:40px}

.contact{height:1000px}
.contact .scene{background-image:url(img/dusk.jpg);background-position:50% 80%}
.contact .shade-b{background:linear-gradient(180deg,var(--ground) 0%,rgba(25,20,35,.55) 38%,rgba(25,20,35,.1) 62%,rgba(25,20,35,.75) 100%)}
.contact .inner{padding-top:150px;max-width:1200px}
.contact h2{line-height:1.62}
.contact .lede{max-width:33em}
.contact .lede{margin-top:34px}
.contact .actions{display:flex;gap:16px;margin-top:40px;flex-wrap:wrap}
.footer{position:absolute;left:var(--gutter);right:var(--gutter);bottom:40px;z-index:5;display:flex;justify-content:space-between;align-items:baseline}
.sign{font-family:Ora;font-size:64px;line-height:1;padding:.34em .3em .3em .36em;margin:-.3em -.3em 0 -.36em}

.footer{flex-wrap:wrap;gap:20px 24px}
.social{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.social a{display:inline-flex;align-items:center;gap:9px;padding:10px 16px 10px 13px;border-radius:999px;border:1px solid var(--border);background:rgba(25,20,35,.55);color:var(--parch);text-decoration:none;font-size:14px;transition:border-color .2s,background .2s}
.social a svg{color:var(--gold)}
.social a:hover{border-color:var(--gold);background:var(--amethyst)}
.social a.resume{border-color:rgba(195,167,124,.55)}
.field{height:720px;background:#0f0b14}
.field .scene{left:42%;display:flex;align-items:center;justify-content:flex-end}
.field .scene img{display:block;width:auto;height:auto;max-width:100%;max-height:94%;-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 58%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 58%,transparent 100%);filter:saturate(1.15) contrast(1.05) brightness(1.1)}
.field .shade-l{background:linear-gradient(90deg,#0f0b14 0%,#0f0b14 26%,rgba(15,11,20,.75) 42%,rgba(15,11,20,0) 64%)}
.field .inner{padding-top:170px;max-width:1000px}
.field .body{margin-top:28px;max-width:30em}
.soon{display:inline-block;margin-bottom:24px;padding:7px 14px;border-radius:999px;border:1px solid var(--border);color:var(--gold-am);font-size:13px}
@media (max-width:900px){.social span{display:none}.social a{padding:11px}}
@media (max-width:900px){
 body{font-size:17.5px}
 .nav{padding:22px var(--gutter)}
 .nav ul{display:none}
 .trail,.pt{display:none}
 .cases{grid-template-columns:1fr;gap:24px}
 .work .head{display:block}.work .head p{margin-top:18px}
 section.hero,section.approach,section.think,section.about,section.system,section.field,section.contact{height:auto;display:flex;flex-direction:column}
 section .scene{position:relative;inset:auto;left:0!important;right:0!important;top:0!important;width:100%;aspect-ratio:4/3;order:0}
 section .shade-l,section .shade-r,section .shade-b{display:none}
 section .scene:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(25,20,35,.35) 0%,rgba(25,20,35,0) 25%,rgba(25,20,35,0) 70%,var(--ground) 100%)}
 section .inner,.approach .inner,.about .inner{position:relative!important;width:auto!important;max-width:none;padding:28px var(--gutter) 72px!important;order:1}
 .hero .scene{aspect-ratio:3/4;background-position:72% 50%}
 .hero .inner{margin-top:-120px}
 .hero .scene:after{background:linear-gradient(180deg,rgba(25,20,35,.35) 0%,rgba(25,20,35,0) 22%,rgba(25,20,35,.15) 48%,rgba(25,20,35,.88) 74%,var(--ground) 90%)}
 .hero h1{font-size:46px}
 .approach .scene{background-position:30% 50%}
 .think .scene{background-position:62% 50%}
 .about .scene{background-position:40% 50%}
 .about .facts{gap:24px}
 .contact .scene{background-position:50% 70%}
 .footer{position:relative;left:auto;right:auto;bottom:auto;padding:0 var(--gutter) 48px;flex-direction:column;gap:8px;order:2}
 .sign{font-size:48px}
 .actions{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media (max-width:480px){.hero h1{font-size:min(46px,11.5vw)}h2{font-size:min(40px,9vw)}}
@media (min-width:901px){.field h2{white-space:nowrap}}
@media (max-width:900px){.field h2 br{display:none}}
.footer{overflow-x:clip}