@font-face{font-family:"Cormorant Garamond";src:url(assets/fonts/cormorant-var.woff2) format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(assets/fonts/cormorant-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Inter";src:url(assets/fonts/inter-var.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{--paper:#f3f1ec;--ink:#151514;--mute:#77746e;--rule:rgba(21,21,20,.14);--night:#121212;--light:#efebe4;--gold:#c9a560;--pad:clamp(22px,5vw,80px);--disp:"Cormorant Garamond","Cormorant",Georgia,"Times New Roman",serif;--sans:"Inter",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;--ease:cubic-bezier(.16,1,.3,1);--vh:100vh;--sh:100vh}
@supports (height:1lvh){:root{--vh:100lvh;--sh:100svh}}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--night)}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.skip{position:fixed;left:12px;top:-60px;z-index:50;background:#fff;color:#000;padding:10px 14px}.skip:focus{top:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.eyebrow{font:500 11px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--mute)}

/* ---------- HERO ---------- */
.hero{position:relative;height:calc(var(--vh) + 160svh);background:#cfd8de}
@supports not (height:1svh){.hero{height:260vh}}
.pin{position:sticky;top:0;height:var(--vh);overflow:hidden;color:#fff}
.stack{position:absolute;inset:0;transform-origin:50% 78%;will-change:transform}
.layer,.layer img{position:absolute;inset:0;width:100%;height:100%}
.layer img{object-fit:cover;object-position:50% 72%}
.l3{opacity:0;will-change:opacity}
.lines{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;will-change:opacity}
.lines path{fill:none;stroke:#fff;stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:1 1;stroke-dashoffset:1;stroke-linecap:square;opacity:.92}
.lines path.s{stroke-width:1.25}.lines path.d{opacity:.45;stroke-dasharray:1 1}
.lm{display:none}@media (max-aspect-ratio:4/5){.ld{display:none}.lm{display:block}}
.edge-unused{position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.85) 20%,rgba(255,255,255,.85) 80%,transparent);opacity:0;will-change:transform,opacity;box-shadow:0 0 18px rgba(255,255,255,.55)}
.shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(8,16,24,.42) 0%,rgba(8,16,24,.12) 26%,rgba(0,0,0,0) 44%,rgba(0,0,0,0) 66%,rgba(0,0,0,.48) 100%)}
.bar{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;padding:calc(env(safe-area-inset-top) + clamp(16px,2.6vw,34px)) var(--pad) 0}
.brand img{width:clamp(108px,10.5vw,158px);height:auto;filter:drop-shadow(0 2px 14px rgba(0,0,0,.25))}
.bar-call{font:500 12px/1 var(--sans);letter-spacing:.14em;padding:12px 16px;border:1px solid rgba(255,255,255,.55);border-radius:999px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);background:rgba(0,0,0,.12);transition:background .3s}
.bar-call:hover{background:rgba(255,255,255,.18)}
.tag{position:absolute;left:var(--pad);right:var(--pad);top:calc(env(safe-area-inset-top) + clamp(110px,15vh,170px));font-family:var(--disp);font-weight:500;letter-spacing:-.012em;line-height:.98;font-size:clamp(40px,5.6vw,88px);text-shadow:0 2px 30px rgba(0,10,20,.3)}
.tag span{display:block;opacity:0;transform:translateY(24px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.tag .t3{margin-top:1.1em;font:300 clamp(11px,.95vw,14px)/1.4 var(--sans);letter-spacing:.3em;text-transform:uppercase}
.ready .tag span{opacity:1;transform:none}.ready .tag .t2{transition-delay:.12s}.ready .tag .t3{transition-delay:.26s}
.hud{position:absolute;left:var(--pad);right:var(--pad);bottom:calc(var(--vh) - var(--sh) + max(env(safe-area-inset-bottom),clamp(22px,4vh,44px)))}
@supports (height:1dvh){.hud{bottom:calc(100lvh - 100dvh + max(env(safe-area-inset-bottom),clamp(22px,4vh,44px)))}}
.stages{display:flex;justify-content:space-between;gap:12px;font:400 clamp(10px,.9vw,13px)/1 var(--sans);letter-spacing:.22em;text-transform:uppercase}
.stages li{color:rgba(255,255,255,.5);transition:color .4s}
.stages li.on{color:#fff}
.stages li::before{content:"0" counter(s) "  ";counter-increment:s;opacity:.7;white-space:pre}
.stages{counter-reset:s}
.track{margin-top:14px;height:1px;background:rgba(255,255,255,.3);position:relative;overflow:hidden}
.track i{position:absolute;inset:0;background:#fff;transform-origin:0 50%;transform:scaleX(0)}
.done{position:absolute;right:0;bottom:calc(100% + 22px);font:500 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;opacity:0;transform:translateY(8px);transition:opacity .6s,transform .6s var(--ease)}
.done.on{opacity:.9;transform:none}
.cue{position:absolute;left:50%;bottom:calc(var(--vh) - var(--sh) + 110px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;font:600 10px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;transition:opacity .4s}
.cue i{width:1px;height:34px;background:linear-gradient(#fff,transparent);animation:cue 1.8s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.cue.off{opacity:0}

/* ---------- WHAT WE DO ---------- */
.what{padding:clamp(80px,11vw,150px) var(--pad) clamp(80px,10vw,140px)}
.what-head{display:flex;flex-direction:column;gap:22px;max-width:1100px}
.what h2{font-family:var(--disp);font-weight:500;font-size:clamp(38px,4.8vw,74px);line-height:1.02;letter-spacing:-.012em;max-width:15ch}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,22px);margin-top:clamp(44px,6vw,80px)}
.ph{position:relative;overflow:hidden}
.ph img{width:100%;aspect-ratio:4/5;height:auto;object-fit:cover;background:#ddd9d2;transform:scale(1.12);clip-path:inset(100% 0 0 0);transition:transform 1.6s var(--ease),clip-path 1.2s var(--ease)}
.ph.in img{transform:none;clip-path:inset(0 0 0 0)}
.ph:nth-child(2) img{transition-delay:.12s}.ph:nth-child(3) img{transition-delay:.24s}
.ph figcaption{margin-top:14px;font:600 11px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.what-foot{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(30px,6vw,110px);margin-top:clamp(56px,7vw,100px);align-items:start}
.services{columns:2;column-gap:clamp(24px,3vw,48px)}
.services li{break-inside:avoid;font-family:var(--disp);font-weight:500;font-size:clamp(20px,1.6vw,25px);letter-spacing:0;padding:15px 0;border-top:1px solid var(--rule)}
.process{font-size:clamp(17px,1.5vw,22px);line-height:1.45;color:var(--mute);max-width:30ch;padding-top:14px}
.process span{color:var(--ink)}

/* ---------- CONTACT ---------- */
.contact{background:var(--night);color:var(--light);padding:clamp(80px,10vw,140px) var(--pad) 0}
.contact .eyebrow{color:#8f8b84}
.c-logo{width:clamp(150px,16vw,230px);height:auto}
.c-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(40px,6vw,110px);margin-top:clamp(56px,7vw,96px);align-items:end}
.phone{display:block;margin-top:18px;font-family:var(--disp);font-weight:400;font-size:clamp(46px,7.6vw,120px);line-height:.95;letter-spacing:-.01em;white-space:nowrap;transition:color .3s}
.phone:hover{color:var(--gold)}
.exts{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(20px,3vw,48px);margin-top:clamp(28px,3vw,44px)}
.exts a{display:flex;gap:16px;align-items:baseline;padding:16px 0;border-top:1px solid rgba(239,235,228,.14);font-size:15px;transition:color .3s}
.exts a:hover{color:var(--gold)}
.exts span{font:600 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold);min-width:52px}
.c-side{display:flex;flex-direction:column;gap:34px}
.c-link{display:inline-block;margin-top:12px;font-family:var(--disp);font-weight:500;font-size:clamp(21px,1.7vw,26px);line-height:1.35;border-bottom:1px solid rgba(239,235,228,.25);padding-bottom:4px;transition:border-color .3s,color .3s}
.c-link:hover{color:var(--gold);border-color:var(--gold)}
.foot{margin-top:clamp(70px,9vw,120px);border-top:1px solid rgba(239,235,228,.12);padding:26px 0 calc(26px + env(safe-area-inset-bottom));font:500 11px/1.6 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#8f8b84}

/* ---------- PHONE ---------- */
@media (max-width:820px){
  .bar-call{padding:10px 13px;font-size:11px;letter-spacing:.1em}
  .tag{font-size:clamp(38px,11vw,52px)}
  .tag .t3{font-size:10.5px;letter-spacing:.24em}
  .stages{font-size:9.5px;letter-spacing:.14em;gap:6px}
  .stages li::before{display:none}
  .done{bottom:calc(100% + 18px);font-size:10px}
  .gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin-left:calc(var(--pad)*-1);margin-right:calc(var(--pad)*-1);padding:0 var(--pad);scroll-padding:0 var(--pad);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .gallery::-webkit-scrollbar{display:none}
  .ph{flex:0 0 78%;scroll-snap-align:start}
  .what-foot{grid-template-columns:1fr;gap:28px;margin-top:48px}
  .services{columns:1}
  .services li{padding:12px 0;font-size:21px}
  .c-grid{grid-template-columns:1fr;gap:44px}
  .exts{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.tag span,.ph img{transition:none!important}.cue i{animation:none}}

@media (min-width:900px) and (min-aspect-ratio:4/5){.tag{top:calc(env(safe-area-inset-top) + clamp(118px,13.5vh,140px));font-size:clamp(38px,3.4vw,58px)}.tag .t3{margin-top:.9em}}