:root{
  --paper:#F3EFE7;
  --paper-2:#EAE4D8;
  --paper-3:#E0D8C9;
  --ink:#0D0D0C;
  --ink-2:#1A1A18;
  --ink-soft:#55524B;
  --ink-mute:#8A857A;
  --line:rgba(13,13,12,.14);
  --line-inv:rgba(243,239,231,.16);
  --serif:'Cormorant Garamond','Cormorant',Georgia,serif;
  --sans:'Inter Tight','Helvetica Neue',Arial,sans-serif;
  --ease:cubic-bezier(.2,.7,.1,1);
  --gutter:clamp(16px,4vw,56px);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:80px}
body{font-family:var(--sans);font-weight:400;font-size:16px;line-height:1.6;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* paper grain */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.07;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%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)'/%3E%3C/svg%3E")}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:1.5px solid currentColor;outline-offset:4px}
.skip{position:absolute;left:-999px;top:8px;z-index:200;background:var(--ink);color:var(--paper);padding:.6em 1em}
.skip:focus{left:8px}

.wrap{width:100%;max-width:1360px;margin:0 auto;padding:0 var(--gutter)}
.eyebrow{font-family:var(--sans);font-size:.7rem;font-weight:500;letter-spacing:.32em;text-transform:uppercase;display:inline-flex;align-items:center;gap:.9em}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor;opacity:.6}
h1,h2,h3{font-family:var(--serif);font-weight:300;line-height:1;letter-spacing:-.015em}
em,.it{font-style:italic;font-weight:300}
.swan path{fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.9em;font-size:.72rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;padding:1.25em 2.2em;border:1px solid currentColor;position:relative;overflow:hidden;isolation:isolate;transition:color .5s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;background:currentColor;transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease);z-index:-1}
.btn span{position:relative;z-index:1;transition:color .5s var(--ease)}
.btn:hover::before{transform:scaleY(1)}
.btn--light{color:var(--paper)}
.btn--light:hover span{color:var(--ink)}
.btn--dark{color:var(--ink)}
.btn--dark:hover span{color:var(--paper)}
.btn--solid{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn--solid::before{background:var(--paper)}
.btn--solid:hover span{color:var(--ink)}
.btn .arr{width:18px;height:1px;background:currentColor;position:relative}
.btn .arr::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;color:var(--paper);transition:background .5s var(--ease),color .5s var(--ease),border-color .5s;border-bottom:1px solid transparent}
.nav.solid{background:rgba(243,239,231,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:var(--ink);border-color:var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:78px}
.brand{display:flex;align-items:center;gap:.8em}
.brand .mono{font-family:var(--serif);font-size:1.7rem;font-weight:400;letter-spacing:.18em;line-height:1}
.brand .sub{font-size:.58rem;letter-spacing:.38em;text-transform:uppercase;border-left:1px solid currentColor;padding-left:.9em;opacity:.85;line-height:1.3}
.nav-links{display:flex;gap:2.6rem;align-items:center}
.nav-links a{font-size:.7rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;position:relative;padding:.4em 0}
.nav-links a:not(.btn)::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.nav-links a:not(.btn):hover::after{transform:scaleX(1);transform-origin:left}
.nav-links .btn{padding:1em 1.6em}
.menu-btn{display:none;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;font-weight:500;align-items:center;gap:.7em}
.menu-btn i{display:block;width:22px;height:1px;background:currentColor;position:relative}
.menu-btn i::after{content:"";position:absolute;left:0;top:6px;width:14px;height:1px;background:currentColor}
.drawer{position:fixed;inset:0;z-index:70;background:var(--ink);color:var(--paper);display:flex;flex-direction:column;justify-content:center;padding:0 var(--gutter);transform:translateY(-100%);transition:transform .7s var(--ease);visibility:hidden}
.drawer.open{transform:none;visibility:visible}
.drawer a{font-family:var(--serif);font-size:clamp(2.6rem,11vw,4.5rem);font-weight:300;line-height:1.15;display:block}
.drawer a em{font-size:.5em;vertical-align:super;margin-right:.6em;opacity:.5;font-family:var(--sans);font-style:normal;letter-spacing:.2em}
.drawer .close{position:absolute;top:26px;right:var(--gutter);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase}
.drawer .d-foot{margin-top:3rem;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;opacity:.7}

/* hero */
.hero{position:relative;height:100svh;min-height:620px;overflow:hidden;background:var(--ink);color:var(--paper)}
.hero-media{position:absolute;inset:-8% 0 -8% 0;will-change:transform}
.hero-media video,.hero-media img{width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(13,13,12,.55) 0%,rgba(13,13,12,.12) 30%,rgba(13,13,12,.2) 55%,rgba(13,13,12,.82) 100%)}
.hero-copy{position:absolute;left:0;right:0;bottom:clamp(48px,9vh,110px);z-index:2;will-change:transform}
.hero h1{font-size:clamp(3.2rem,min(10.5vw,16vh),10.5rem);line-height:.98;margin:.28em 0 .3em;max-width:12ch}
.hero h1 .ln{display:block;overflow:visible}
.hero h1 .ln>span{display:inline-block;opacity:0;transform:translateY(.35em);transition:opacity 1.2s var(--ease),transform 1.4s var(--ease)}
.hero.ready h1 .ln>span{opacity:1;transform:none}
.hero h1 .ln:nth-child(2)>span{transition-delay:.12s}
.hero-row{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap}
.hero-row p{max-width:38ch;font-size:1.02rem;color:rgba(243,239,231,.86);font-weight:300}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap}
.hero .eyebrow,.hero-row{opacity:0;transform:translateY(16px);transition:opacity 1.2s .5s var(--ease),transform 1.2s .5s var(--ease)}
.hero.ready .eyebrow,.hero.ready .hero-row{opacity:1;transform:none}
.hero-meta{position:absolute;top:110px;right:var(--gutter);z-index:2;text-align:right;font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(243,239,231,.75);line-height:2;will-change:transform}
.scroll-cue{position:absolute;left:50%;bottom:22px;z-index:2;width:1px;height:46px;background:rgba(243,239,231,.25);overflow:hidden}
.scroll-cue::after{content:"";position:absolute;left:0;top:-50%;width:1px;height:50%;background:var(--paper);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{to{top:110%}}

/* ticker */
.ticker{background:var(--ink);color:var(--paper);border-top:1px solid var(--line-inv);overflow:hidden;padding:1.3rem 0}
.ticker-track{display:flex;width:max-content;animation:tick 38s linear infinite}
.ticker span{font-family:var(--serif);font-size:clamp(1.4rem,2.6vw,2.2rem);font-weight:300;font-style:italic;padding:0 1.4em;white-space:nowrap;display:flex;align-items:center;gap:1.4em}
.ticker span::after{content:"";width:6px;height:6px;border:1px solid currentColor;transform:rotate(45deg);opacity:.6}
@keyframes tick{to{transform:translateX(-50%)}}

section{position:relative}
.pad{padding:clamp(5rem,12vw,10rem) 0}

/* intro */
.intro-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);align-items:start}
.intro-text{grid-column:1/8}
.intro-text h2{font-size:clamp(2.4rem,5.2vw,5rem);line-height:1.02;margin:1.4rem 0 2rem}
.intro-text p{color:var(--ink-soft);max-width:46ch;font-size:1.04rem;margin-bottom:1.1rem}
.intro-stats{display:flex;gap:clamp(1.5rem,4vw,3.5rem);margin-top:2.6rem;padding-top:2rem;border-top:1px solid var(--line);flex-wrap:wrap}
.intro-stats .n{font-family:var(--serif);font-size:clamp(2.2rem,3.6vw,3.2rem);line-height:1}
.intro-stats .l{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute);margin-top:.5em}
.intro-art{grid-column:8/13;position:relative;height:clamp(520px,62vw,860px)}
.intro-art figure{position:absolute;overflow:hidden;will-change:transform}
.intro-art .a1{right:0;top:0;width:82%;aspect-ratio:3/4}
.intro-art .a2{left:-12%;bottom:0;width:58%;aspect-ratio:3/4;box-shadow:0 30px 60px rgba(13,13,12,.18);outline:10px solid var(--paper)}
.intro-art img{width:100%;height:100%;object-fit:cover}
.cap{position:absolute;left:0;bottom:0;right:0;padding:1rem 1.1rem;font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--paper);background:linear-gradient(transparent,rgba(13,13,12,.55))}

/* services */
.services{background:var(--paper-2)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:clamp(2.5rem,6vw,5rem);flex-wrap:wrap}
.sec-head h2{font-size:clamp(2.6rem,6vw,6rem);margin-top:1.2rem}
.sec-head p{max-width:38ch;color:var(--ink-soft)}
.svc-list{border-top:1px solid var(--ink)}
.svc{display:grid;grid-template-columns:90px 1fr 1fr 60px;align-items:center;gap:2rem;padding:clamp(1.6rem,3vw,2.6rem) 0;border-bottom:1px solid var(--line);position:relative;transition:padding .6s var(--ease)}
.svc-n{font-family:var(--serif);font-style:italic;font-size:1.2rem;color:var(--ink-mute)}
.svc-name{font-family:var(--serif);font-size:clamp(2.2rem,5vw,4.4rem);font-weight:300;line-height:1;transition:transform .6s var(--ease)}
.svc-d{color:var(--ink-soft);max-width:40ch}
.svc-go{justify-self:end;width:46px;height:46px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;transition:background .4s,color .4s,border-color .4s}
.svc-go svg{width:14px;height:14px}
.svc:hover .svc-name{transform:translateX(18px)}
.svc:hover .svc-go{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* portfolio */
.work{background:var(--ink);color:var(--paper);overflow:hidden}
.work .sec-head p{color:rgba(243,239,231,.7)}
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,24px);align-items:start}
.col{display:flex;flex-direction:column;gap:clamp(12px,1.6vw,24px);will-change:transform}
.col:nth-child(2){margin-top:clamp(40px,10vw,160px)}
.tile{position:relative;overflow:hidden;background:var(--ink-2)}
.tile img{width:100%;height:auto;transition:transform 1.2s var(--ease),filter 1.2s var(--ease);filter:saturate(.92)}
.tile:hover img{transform:scale(1.05);filter:saturate(1.05)}
.tile figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.4rem 1.2rem 1.1rem;background:linear-gradient(transparent,rgba(13,13,12,.75));display:flex;justify-content:space-between;align-items:flex-end;gap:1rem}
.tile figcaption b{font-family:var(--serif);font-weight:400;font-size:1.35rem;display:block;line-height:1.1}
.tile figcaption small{font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;opacity:.75}
.work-cta{text-align:center;margin-top:clamp(3rem,7vw,6rem)}
.clients{border-top:1px solid var(--line-inv);margin-top:clamp(4rem,9vw,7rem);padding-top:2.4rem;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap}
.clients .lbl{font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;opacity:.6}
.clients ul{list-style:none;display:flex;gap:clamp(1.4rem,4vw,3.6rem);flex-wrap:wrap}
.clients li{font-family:var(--serif);font-size:clamp(1.3rem,2.2vw,1.9rem);font-style:italic;font-weight:300}

/* quotes */
.quotes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--ink)}
.q{padding:clamp(2rem,4vw,3.4rem) clamp(1.2rem,2.6vw,2.6rem) 0 0;display:flex;flex-direction:column;justify-content:space-between;min-height:300px}
.q+.q{padding-left:clamp(1.2rem,2.6vw,2.6rem);border-left:1px solid var(--line)}
.q .mk{font-family:var(--serif);font-size:5rem;line-height:.6;height:2.4rem;opacity:.9}
.q blockquote{font-family:var(--serif);font-size:clamp(1.7rem,2.8vw,2.6rem);line-height:1.12;font-weight:300}
.q cite{font-style:normal;font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-mute);margin-top:2rem;display:block}

/* approach */
.approach{background:var(--paper-2);overflow:hidden}
.ap-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:center}
.ap-fig{position:relative;overflow:hidden;aspect-ratio:4/5}
.ap-fig .px{position:absolute;inset:-12% 0;will-change:transform}
.ap-fig img{width:100%;height:100%;object-fit:cover}
.ap-text h2{font-size:clamp(2.4rem,4.8vw,4.6rem);margin:1.4rem 0 1.8rem;line-height:1.02}
.ap-text p{color:var(--ink-soft);max-width:44ch;margin-bottom:1.1rem}
.steps{list-style:none;margin-top:2.4rem;border-top:1px solid var(--line)}
.steps li{display:grid;grid-template-columns:44px 1fr;gap:1rem;padding:1.1rem 0;border-bottom:1px solid var(--line)}
.steps li b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.1rem;color:var(--ink-mute)}
.steps li span{font-size:.95rem}

/* contact */
.contact{background:var(--ink);color:var(--paper);overflow:hidden}
.ct-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2.5rem,7vw,7rem);align-items:start}
.contact h2{font-size:clamp(3rem,8vw,8rem);line-height:.92;margin:1.4rem 0 2rem}
.contact .sub{color:rgba(243,239,231,.72);max-width:40ch;margin-bottom:2.4rem}
.meta{border-top:1px solid var(--line-inv)}
.meta div{display:flex;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--line-inv);font-size:.98rem}
.meta dt{width:110px;flex-shrink:0;font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;opacity:.6;padding-top:.3em}
.meta a{border-bottom:1px solid var(--line-inv);transition:border-color .3s}
.meta a:hover{border-color:var(--paper)}
form.inq{border:1px solid var(--line-inv);padding:clamp(1.4rem,3vw,2.6rem)}
.f{margin-bottom:1.5rem}
.f label{display:block;font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;opacity:.65;margin-bottom:.4rem}
.f input,.f select,.f textarea{width:100%;font:inherit;font-size:1rem;color:var(--paper);background:transparent;border:0;border-bottom:1px solid var(--line-inv);padding:.6em 0;border-radius:0;transition:border-color .3s;-webkit-appearance:none;appearance:none}
.f select{background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 10px) 55%,calc(100% - 5px) 55%;background-size:5px 5px;background-repeat:no-repeat}
.f select option{color:var(--ink)}
.f input:focus,.f select:focus,.f textarea:focus{outline:0;border-color:var(--paper)}
.f textarea{resize:vertical;min-height:90px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
input[type=date]{color-scheme:dark}
form.inq .btn{width:100%;justify-content:center;margin-top:.6rem}
.f-note{font-size:.78rem;opacity:.6;margin-top:1rem;text-align:center}
.f-ok{display:none;margin-top:1rem;font-family:var(--serif);font-size:1.3rem;font-style:italic;text-align:center}
.f-ok.on{display:block}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* footer */
.foot{background:var(--ink);color:var(--paper);border-top:1px solid var(--line-inv);padding:clamp(3rem,7vw,5rem) 0 2rem;overflow:hidden}
.foot-word{font-family:var(--serif);font-weight:300;font-size:clamp(3rem,13.2vw,14rem);line-height:.8;letter-spacing:-.02em;white-space:nowrap;opacity:.95;will-change:transform}
.foot-row{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-top:3rem;padding-top:1.6rem;border-top:1px solid var(--line-inv);font-size:.74rem;letter-spacing:.08em;color:rgba(243,239,231,.6)}
.foot-row nav{display:flex;gap:1.8rem;flex-wrap:wrap;text-transform:uppercase;letter-spacing:.2em;font-size:.64rem}
.foot-row a:hover{color:var(--paper)}
.credit a{color:var(--paper);border-bottom:1px solid var(--line-inv)}

/* reveal */
.rv{opacity:0;transform:translateY(34px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.rv.in{opacity:1;transform:none}
.mask{clip-path:inset(100% 0 0 0);transition:clip-path 1.4s var(--ease)}
.mask.in{clip-path:inset(0 0 0 0)}

@media (max-width:1024px){
  .intro-text{grid-column:1/-1}
  .intro-art{grid-column:1/-1;height:auto;display:grid;grid-template-columns:1.3fr 1fr;gap:14px;align-items:end;margin-top:1rem}
  .intro-art figure{position:relative;width:auto!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;outline:0!important}
  .svc{grid-template-columns:60px 1fr 46px;gap:.6rem 1.2rem}
  .svc-d{grid-column:2/3;grid-row:2}
  .svc-go{grid-column:3;grid-row:1}
  .ap-grid,.ct-grid{grid-template-columns:1fr}
  .quotes-grid{grid-template-columns:1fr}
  .q{min-height:0;padding:2.2rem 0!important;border-left:0!important;border-bottom:1px solid var(--line)}
  .q .mk{height:2rem}
}
@media (max-width:820px){
  .nav-links{display:none}
  .menu-btn{display:inline-flex}
  .cols{grid-template-columns:1fr 1fr}
  .hero-meta{display:none}
  }
@media (max-width:560px){
  .brand .sub{display:none}
  .hero h1{font-size:clamp(3rem,15vw,4.6rem)}
  .hero-actions .btn{flex:1;justify-content:center}
  .f2{grid-template-columns:1fr}
  .cols{gap:10px}.col{gap:10px}
  .tile figcaption{padding:1rem .8rem .7rem}
  .tile figcaption b{font-size:1.05rem}
  .tile figcaption small{font-size:.52rem;letter-spacing:.16em}
  .svc{grid-template-columns:36px 1fr 40px}
  .svc-go{width:40px;height:40px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv,.hero .eyebrow,.hero-row{opacity:1!important;transform:none!important}
  .mask{clip-path:none!important}
  .hero h1 .ln>span{transform:none!important;opacity:1!important}
  [data-speed]{transform:none!important}
}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.nf{min-height:100vh;display:grid;place-items:center;text-align:center;padding:24px}
.nf h1{font-size:clamp(3rem,10vw,6rem);margin:.3em 0}