/* VERVĒ MADE™ — shared styles */
:root{
  --ink:#0b0b0a; --ink-2:#151513; --bone:#f1eee8; --bone-2:#e6e1d8;
  --stone:#8b867d; --line:rgba(255,255,255,.12); --line-d:rgba(11,11,10,.12);
  --bronze:#b5916a;
  --serif:"Instrument Serif", "Times New Roman", serif;
  --sans:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --pad:clamp(20px,4vw,64px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ink)}
body{background:var(--ink);color:var(--bone);font-family:var(--sans);font-weight:400;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--bronze);color:var(--ink)}
.eyebrow{font-size:11px;letter-spacing:.28em;text-transform:uppercase;font-weight:500;color:var(--stone)}
.serif{font-family:var(--serif);font-weight:400}
.it{font-style:italic}
html.lenis{height:auto}.lenis.lenis-smooth{scroll-behavior:auto}
.light{background:var(--bone);color:var(--ink)}
.light .eyebrow{color:#7d776c}

/* ---------- Page curtain (transitions) ---------- */
.curtain{position:fixed;inset:0;z-index:95;background:var(--ink);pointer-events:none;opacity:1;transition:opacity .7s var(--ease)}
.ready .curtain{opacity:0}
.leaving .curtain{opacity:1;transition-duration:.45s}

/* ---------- Cursor ---------- */
.cursor,.cursor-ring,.cursor-glow{position:fixed;left:0;top:0;pointer-events:none;z-index:90;will-change:transform}
.cursor{width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#fff;mix-blend-mode:difference}
.cursor-ring{width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;border:1px solid rgba(255,255,255,.55);mix-blend-mode:difference;display:grid;place-items:center;transition:width .5s var(--ease),height .5s var(--ease),margin .5s var(--ease),background .4s,border-color .4s}
.cursor-ring span{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);opacity:0;transition:opacity .3s}
.cursor-ring.view{width:96px;height:96px;margin:-48px 0 0 -48px;background:var(--bone);border-color:transparent;mix-blend-mode:normal}
.cursor-ring.view span{opacity:1}
.cursor-glow{width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;background:radial-gradient(circle,rgba(181,145,106,.13),rgba(181,145,106,0) 62%);z-index:1;mix-blend-mode:screen;transition:opacity .4s}
html:not(.has-pointer) .cursor,html:not(.has-pointer) .cursor-ring,html:not(.has-pointer) .cursor-glow{opacity:0!important}
@media (hover:none),(pointer:coarse){.cursor,.cursor-ring,.cursor-glow{display:none}}
@media (hover:hover) and (pointer:fine){body,a,button,select,label{cursor:none}input,textarea{cursor:text}}

/* ---------- Header ---------- */
header.site{position:fixed;inset:0 0 auto 0;z-index:50;padding:calc(env(safe-area-inset-top,0px) + 22px) var(--pad) 22px;display:flex;align-items:center;justify-content:space-between;mix-blend-mode:difference;transition:transform .6s var(--ease)}
header.site.hide{transform:translateY(-110%)}
header.site .logo img{height:18px;width:auto}
header.site nav{display:flex;gap:clamp(18px,3vw,44px);align-items:center}
header.site nav a{font-size:13px;letter-spacing:.06em;position:relative;color:#fff}
header.site nav a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:#fff;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
header.site nav a:hover::after,header.site nav a.active::after{transform:scaleX(1);transform-origin:left}
header.site nav .pill{border:1px solid rgba(255,255,255,.6);padding:9px 18px;border-radius:99px}
header.site nav .pill::after{display:none}
.burger{display:none;background:none;border:0;color:#fff;font:inherit;font-size:13px;letter-spacing:.08em}
@media (max-width:760px){header.site nav{display:none}.burger{display:block}}
.mnav{position:fixed;inset:0;z-index:60;background:var(--ink);display:flex;flex-direction:column;justify-content:center;gap:10px;padding:var(--pad);clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--ease)}
.mnav.open{clip-path:inset(0 0 0 0)}
.mnav a{font-family:var(--serif);font-size:clamp(44px,14vw,90px);line-height:1.05}
.mnav .mclose{position:absolute;top:calc(env(safe-area-inset-top,0px) + 22px);right:var(--pad);background:none;border:0;color:var(--bone);font:inherit;font-size:13px;letter-spacing:.08em}
.mnav .mfoot{position:absolute;left:var(--pad);bottom:calc(env(safe-area-inset-bottom,0px) + 28px);font-size:13px;color:var(--stone)}

/* ---------- Scrolly helpers ---------- */
.scrolly{position:relative}
.sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}

/* ---------- Buttons / links ---------- */
.btn{display:inline-flex;align-items:center;gap:14px;margin-top:22px;padding:16px 26px;border-radius:99px;border:1px solid currentColor;font-size:13px;letter-spacing:.06em;transition:background .4s,color .4s,border-color .4s;will-change:transform;background:none;color:inherit;font-family:inherit}
.btn svg{transition:transform .5s var(--ease)}
.btn.solid{background:var(--bone);color:var(--ink);border-color:var(--bone);font-weight:500}
@media (hover:hover){
  .btn:hover{background:var(--bone);color:var(--ink);border-color:var(--bone)}
  .light .btn:hover{background:var(--ink);color:var(--bone);border-color:var(--ink)}
  .btn:hover svg{transform:translateX(4px)}
  .btn.solid:hover{background:transparent;color:var(--bone)}
}
.btn:active{transform:scale(.97)}
.tlink{display:inline-flex;gap:10px;align-items:center;font-size:13px;letter-spacing:.06em;border-bottom:1px solid currentColor;padding-bottom:4px;margin-top:26px}

/* ---------- Page hero (inner pages) ---------- */
.phero{padding:calc(env(safe-area-inset-top,0px) + clamp(140px,24vh,240px)) var(--pad) clamp(50px,8vh,90px);max-width:1600px;margin:0 auto}
.phero .eyebrow{margin-bottom:26px}
.phero h1{font-family:var(--serif);font-weight:400;font-size:clamp(56px,11vw,190px);line-height:.9;letter-spacing:-.015em}
.phero h1 .ln{display:block;overflow:hidden;padding-bottom:.04em}
.phero h1 .ln > span{display:block;transform:translateY(105%);transition:transform 1.4s var(--ease) .15s}
.ready .phero h1 .ln > span{transform:none}
.ready .phero h1 .ln:nth-child(2) > span{transition-delay:.27s}
.phero .lead{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,120px);margin-top:clamp(40px,7vh,80px);align-items:end}
.phero .lead p{color:rgba(241,238,232,.72);max-width:52ch}
.light .phero .lead p,.phero.light .lead p{color:#4a4741}
@media (max-width:860px){.phero .lead{grid-template-columns:1fr}}

/* full-bleed image that opens on scroll */
.bleed{height:190vh}
.bleed .pane{position:absolute;inset:0;will-change:clip-path}
.bleed .pane img,.bleed .pane video{width:100%;height:100%;object-fit:cover;will-change:transform}
.bleed .cap{position:absolute;left:var(--pad);bottom:clamp(24px,5vh,50px);z-index:2;color:#fff;font-size:13px;text-shadow:0 1px 20px rgba(0,0,0,.4)}

/* ---------- Split / frames ---------- */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(30px,6vw,120px);align-items:center;max-width:1500px;margin:0 auto}
.split.rev{grid-template-columns:1fr 1.05fr}
.split.rev > :first-child{order:2}
.frame{position:relative;overflow:hidden;aspect-ratio:4/5;border-radius:4px;clip-path:inset(100% 0 0 0);transition:clip-path 1.6s var(--ease)}
.frame.wide{aspect-ratio:16/10}
.frame.in{clip-path:inset(0 0 0 0)}
.frame img{position:absolute;left:0;top:-10%;width:100%;height:120%;object-fit:cover;will-change:transform}
@media (max-width:860px){.split,.split.rev{grid-template-columns:1fr}.split.rev > :first-child{order:0}}

.specs{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.specs div{padding:16px 0;border-bottom:1px solid var(--line)}
.specs div:nth-child(odd){padding-right:16px}
.specs dt{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--stone)}
.specs dd{font-size:14px;margin-top:4px}
.light .specs,.light .specs div{border-color:var(--line-d)}

/* ---------- Section basics ---------- */
.sec{padding:clamp(90px,16vh,200px) var(--pad)}
.wrap{max-width:1500px;margin:0 auto}
.h2{font-family:var(--serif);font-weight:400;font-size:clamp(40px,6vw,100px);line-height:.95}
.h3{font-family:var(--serif);font-weight:400;font-size:clamp(34px,4.4vw,72px);line-height:1}
.body p{color:rgba(241,238,232,.7);margin-bottom:18px;max-width:58ch}
.light .body p{color:#4a4741}

/* ---------- Services rows ---------- */
.svc-list{border-top:1px solid var(--line)}
.svc{display:grid;grid-template-columns:80px 1fr 1fr;gap:20px;align-items:center;padding:30px 0;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.svc::before{content:"";position:absolute;inset:0;background:var(--bone);transform:scaleY(0);transform-origin:bottom;transition:transform .7s var(--ease);z-index:0}
.svc > *{position:relative;z-index:1;transition:color .5s,transform .7s var(--ease)}
@media (hover:hover){
  .svc:hover::before{transform:scaleY(1)}
  .svc:hover > *{color:var(--ink)}
  .svc:hover h4{transform:translateX(18px)}
}
.svc .n{color:var(--stone);font-size:13px;padding-left:4px}
.svc h4{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.6vw,58px);line-height:1}
.svc p{color:rgba(241,238,232,.6);font-size:14px;max-width:42ch;padding-right:8px}
@media (max-width:860px){.svc{grid-template-columns:44px 1fr}.svc p{grid-column:2}}
.light .svc-list,.light .svc{border-color:var(--line-d)}
.light .svc::before{background:var(--ink)}
.light .svc p{color:#4a4741}
@media (hover:hover){.light .svc:hover > *{color:var(--bone)}}

/* ---------- CTA band ---------- */
.cta{position:relative;min-height:90vh;min-height:90svh;display:grid;place-items:center;text-align:center;overflow:hidden;padding:120px var(--pad)}
.cta .bg{position:absolute;inset:-12% 0;will-change:transform}
.cta .bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.36)}
.cta .inner{position:relative;max-width:1100px}
.cta h2{font-family:var(--serif);font-weight:400;font-size:clamp(46px,8vw,140px);line-height:.95;margin:22px 0 26px}
.cta p{color:rgba(241,238,232,.75);max-width:52ch;margin:0 auto}
.cta .btn{margin-top:42px;padding:20px 34px}

/* ---------- Footer ---------- */
footer.site{background:var(--ink);color:var(--bone);padding:clamp(70px,12vh,130px) var(--pad) calc(env(safe-area-inset-bottom,0px) + 28px);border-top:1px solid var(--line)}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.4fr;gap:40px;max-width:1500px;margin:0 auto}
.f-grid h5{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--stone);font-weight:500;margin-bottom:16px}
.f-grid a,.f-grid li{display:block;list-style:none;font-size:15px;margin-bottom:8px;transition:color .3s}
.f-grid a:hover{color:var(--bronze)}
.f-lead{font-family:var(--serif);font-size:clamp(26px,2.4vw,36px);line-height:1.1;max-width:14ch}
.news{display:flex;border-bottom:1px solid rgba(255,255,255,.35);margin-top:6px}
.news input{flex:1;background:none;border:0;color:var(--bone);font:inherit;font-size:15px;padding:12px 0;outline:none;min-width:0}
.news input::placeholder{color:rgba(241,238,232,.4)}
.news button{background:none;border:0;color:var(--bone);font:inherit;font-size:13px;letter-spacing:.08em}
.form-msg{font-size:13px;color:var(--bronze);margin-top:10px;min-height:20px}
.f-logo{margin:clamp(70px,12vh,140px) auto 0;max-width:1500px}
.f-logo img{width:100%;height:auto;opacity:.95}
.f-base{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;max-width:1500px;margin:28px auto 0;font-size:12px;color:var(--stone)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (max-width:960px){.f-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.f-grid{grid-template-columns:1fr}}

/* ---------- Project pages ---------- */
.p-hero{height:170vh}
.p-hero .media{position:absolute;inset:0;background:#000}
.p-hero .media img,.p-hero .media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform}
div.dim{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;z-index:1;will-change:opacity}
.p-hero .media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.3),rgba(0,0,0,0) 35%,rgba(0,0,0,.6))}
.p-hero .title{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(30px,8vh,90px);z-index:2;will-change:transform,opacity}
.p-hero .title .eyebrow{color:rgba(255,255,255,.75);margin-bottom:18px}
.p-hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(60px,12vw,210px);line-height:.88;letter-spacing:-.015em}
.p-hero h1 .ln{display:block;overflow:hidden;padding-bottom:.05em}
.p-hero h1 .ln > span{display:block;transform:translateY(105%);transition:transform 1.4s var(--ease) .15s}
.ready .p-hero h1 .ln > span{transform:none}
.ready .p-hero h1 .ln:nth-child(2) > span{transition-delay:.27s}
.facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-d);max-width:1500px;margin:0 auto}
.facts div{padding:22px 0;border-bottom:1px solid var(--line-d)}
.facts dt{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:#7d776c}
.facts dd{font-size:15px;margin-top:6px}
@media (max-width:760px){.facts{grid-template-columns:1fr 1fr}}
.overview{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(30px,6vw,120px);max-width:1500px;margin:clamp(70px,12vh,140px) auto 0}
.overview blockquote{font-family:var(--serif);font-size:clamp(32px,3.8vw,62px);line-height:1.04}
@media (max-width:860px){.overview{grid-template-columns:1fr}}
.next{position:relative;display:block;height:80vh;min-height:460px;overflow:hidden;background:#000}
.next img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.42);transform:scale(1.06);transition:transform 1.6s var(--ease),filter 1s}
@media (hover:hover){.next:hover img{transform:scale(1);filter:brightness(.6)}}
.next .in{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:0 var(--pad)}
.next .in .eyebrow{color:rgba(255,255,255,.7);margin-bottom:16px}
.next .in b{font-family:var(--serif);font-weight:400;font-size:clamp(50px,9vw,160px);line-height:.9}

/* ---------- Motion layer (transform/opacity only, so it stays smooth on phones) ---------- */
/* Headlines: words rise into place one after another */
.split-w.rv{opacity:1;transform:none}
.split-w .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.split-w .w > i{display:inline-block;font-style:inherit;transform:translate3d(0,105%,0);transition:transform 1.1s var(--ease);transition-delay:calc(var(--i) * 55ms)}
.split-w.in .w > i{transform:none}
/* Service rows: the divider draws itself, then rows "focus" as they pass the middle (touch) */
.svc.rv{border-bottom-color:transparent}
.svc.rv::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;opacity:.16;transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--ease) .15s}
.svc.rv.in::after{transform:none}
.svc .n{transition:color .5s,transform .7s var(--ease)}
.svc.focus h4{transform:translateX(12px)}
.svc.focus .n{color:var(--bronze)}
/* Footer logo wipes in */
.f-logo img{clip-path:inset(0 100% 0 0);transition:clip-path 1.8s var(--ease)}
.f-logo.in img{clip-path:inset(0 0 0 0)}

/* ---------- Mobile refinements (phones are the primary audience) ---------- */
html{-webkit-tap-highlight-color:transparent;text-size-adjust:100%;-webkit-text-size-adjust:100%}
@media (max-width:760px){
  :root{--pad:22px}
  body{font-size:15px}
  /* Solid, calm header: no blend modes (expensive on phones), dark bar once scrolled */
  header.site{mix-blend-mode:normal;padding:calc(env(safe-area-inset-top,0px) + 16px) var(--pad) 16px;transition:transform .5s var(--ease),background-color .4s,border-color .4s;border-bottom:1px solid transparent}
  header.site.solid{background:rgba(11,11,10,.9);border-bottom-color:var(--line)}
  header.site .logo img{height:15px}
  .burger{font-size:12px;letter-spacing:.16em;text-transform:uppercase;padding:8px 0 8px 16px}
  /* Menu: staggered serif links */
  .mnav{justify-content:flex-end;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 90px);gap:4px}
  .mnav a{font-size:clamp(46px,13vw,64px);opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .8s var(--ease)}
  .mnav.open a{opacity:1;transform:none}
  .mnav.open a:nth-of-type(2){transition-delay:.06s}.mnav.open a:nth-of-type(3){transition-delay:.12s}
  .mnav.open a:nth-of-type(4){transition-delay:.18s}.mnav.open a:nth-of-type(5){transition-delay:.24s}
  .mnav .mclose{top:calc(env(safe-area-inset-top,0px) + 16px);font-size:12px;letter-spacing:.16em;text-transform:uppercase;padding:8px 0 8px 16px}
  /* Type scale */
  .phero{padding-top:calc(env(safe-area-inset-top,0px) + 120px);padding-bottom:40px}
  .phero h1{font-size:clamp(46px,13.2vw,64px);line-height:.95}
  .phero .lead{margin-top:30px;gap:18px}
  .phero .lead p{font-size:15px}
  .h2{font-size:clamp(38px,11vw,54px)}
  .h3{font-size:clamp(32px,9vw,44px)}
  .sec{padding:90px var(--pad)}
  .eyebrow{font-size:10px;letter-spacing:.24em}
  .split,.split.rev{gap:36px}
  .frame{border-radius:2px}
  /* Scroll reveals */
  .rv{transform:translateY(30px);transition-duration:1s}
  /* About: process cards arrive like sheets being laid down */
  .step{opacity:0;transform:translate3d(0,50px,0) rotate(1.2deg);transition:opacity 1s var(--ease),transform 1.2s var(--ease)}
  .step.in{opacity:1;transform:none}
  /* Services timeline: steps slide in, dots fill */
  .tl-step{opacity:0;transform:translate3d(-18px,0,0);transition:opacity .9s var(--ease),transform 1s var(--ease)}
  .tl-step.in{opacity:1;transform:none}
  .tl-step.in::before{background:var(--ink);transition:background .6s .4s}
  /* Full-bleed sections: transform-based (GPU) instead of clip-path */
  .bleed{height:150vh;height:150svh}
  .bleed .pane{will-change:transform;overflow:hidden}
  /* CTA */
  .cta{min-height:auto;padding:130px var(--pad)}
  .cta h2{font-size:clamp(44px,12.5vw,60px)}
  .cta .btn{margin-top:32px;width:100%;justify-content:center}
  /* Buttons as comfortable tap targets */
  .btn{padding:17px 24px}
  /* Services rows */
  .svc{padding:24px 0;gap:6px 14px}
  .svc h4{font-size:30px}
  /* Project pages */
  .p-hero{height:140vh;height:140svh}
  .p-hero h1{font-size:clamp(54px,16vw,76px)}
  .facts dd{font-size:14px}
  .overview{margin-top:60px;gap:26px}
  .overview blockquote{font-size:clamp(30px,8.6vw,40px)}
  .next{height:70svh;min-height:420px}
  .next .in b{font-size:clamp(46px,14vw,70px)}
  /* Footer */
  footer.site{padding-top:70px}
  .f-grid{gap:34px}
  .f-lead{font-size:30px}
  .f-logo{margin-top:60px}
  .f-base{flex-direction:column;gap:6px}
}

/* ---------- Reveal ---------- */
.rv{opacity:0;transform:translateY(40px);transition:opacity 1.2s var(--ease),transform 1.2s var(--ease)}
.rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .rv{opacity:1;transform:none}
  .frame{clip-path:none}
  .phero h1 .ln > span{transform:none}
}