@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --c-bg:#0b0a08;--c-bg2:#131210;--c-cream:#f0e9de;--c-dim:#a89f95;
  --c-acc:#b8935a;--c-acc2:#d4aa72;--c-muted:#5a5248;--c-border:#252118;
  --ff-d:'Cormorant Garamond',Georgia,serif;
  --ff-b:'DM Sans',system-ui,sans-serif;
  --nav-h:72px;--sp:clamp(80px,10vw,140px);--pg:clamp(20px,5vw,80px);
}

html{scroll-behavior:smooth;font-size:16px}
body{background:var(--c-bg);color:var(--c-cream);font-family:var(--ff-b);font-weight:300;line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased}

::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:var(--c-bg)}::-webkit-scrollbar-thumb{background:var(--c-acc);border-radius:2px}
::selection{background:var(--c-acc);color:var(--c-bg)}
:focus-visible{outline:2px solid var(--c-acc);outline-offset:3px}

/* NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);display:flex;align-items:center;padding:0 var(--pg);transition:background .4s,border-color .4s;border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(11,10,8,.94);backdrop-filter:blur(16px);border-color:var(--c-border)}
.nav-logo{font-family:var(--ff-d);font-size:1.2rem;font-weight:600;color:var(--c-cream);text-decoration:none;flex:1;letter-spacing:.025em;transition:color .2s}
.nav-logo:hover{color:var(--c-acc2)}
.nav-links{display:flex;align-items:center;gap:2.25rem;list-style:none}
.nav-link{font-family:var(--ff-b);font-size:.78rem;font-weight:400;color:var(--c-dim);text-decoration:none;letter-spacing:.08em;text-transform:uppercase;position:relative;transition:color .2s}
.nav-link::after{content:'';position:absolute;bottom:-3px;left:0;width:0;height:1px;background:var(--c-acc);transition:width .3s}
.nav-link:hover{color:var(--c-cream)}.nav-link:hover::after{width:100%}
.nav-cta{margin-left:2rem;font-family:var(--ff-b);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--c-bg);background:var(--c-acc);padding:.55rem 1.3rem;text-decoration:none;transition:background .22s}
.nav-cta:hover{background:var(--c-acc2)}
.nav-ham{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:6px}
.nav-ham span{display:block;width:22px;height:1px;background:var(--c-cream);transition:all .3s}
.nav-ham.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-ham.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.nav-ham.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mob-menu{position:fixed;inset:0;z-index:99;background:var(--c-bg2);display:flex;flex-direction:column;justify-content:center;padding:var(--pg);opacity:0;pointer-events:none;transform:translateY(-10px);transition:opacity .35s,transform .35s}
.mob-menu.open{opacity:1;pointer-events:all;transform:translateY(0)}
.mob-links{list-style:none}
.mob-link{font-family:var(--ff-d);font-size:clamp(2.5rem,10vw,5.5rem);font-weight:300;color:var(--c-cream);text-decoration:none;border-bottom:1px solid var(--c-border);padding:.7rem 0;display:block;transition:color .2s,padding-left .25s}
.mob-link:hover{color:var(--c-acc);padding-left:.75rem}
.mob-contact{margin-top:2.5rem}
.mob-contact-label{font-family:var(--ff-b);font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;color:var(--c-acc);margin-bottom:.4rem}
.mob-contact-val{font-family:var(--ff-b);font-size:.9rem;color:var(--c-dim);text-decoration:none}

/* HERO */
.hero{min-height:100vh;min-height:100svh;display:grid;grid-template-columns:1fr 42%;overflow:hidden;position:relative}
.hero-left{display:flex;flex-direction:column;justify-content:flex-end;padding:calc(var(--nav-h) + 2rem) var(--pg) clamp(60px,8vh,110px);position:relative;z-index:2}
.hero-eye{font-family:var(--ff-b);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--c-acc);margin-bottom:1.75rem;display:flex;align-items:center;gap:.75rem}
.hero-eye::before{content:'';width:2rem;height:1px;background:var(--c-acc);display:block}
.hero-h1{font-family:var(--ff-d);font-size:clamp(3rem,5.5vw,7rem);font-weight:300;line-height:1.03;letter-spacing:-.025em;color:var(--c-cream);margin-bottom:2rem}
.hero-h1 em{font-style:italic;color:var(--c-acc2)}
.hero-sub{font-family:var(--ff-b);font-size:clamp(.875rem,1.1vw,1rem);font-weight:300;color:var(--c-dim);max-width:400px;line-height:1.75;margin-bottom:2.75rem}
.hero-btns{display:flex;align-items:center;gap:2.25rem;flex-wrap:wrap}
.btn-p{font-family:var(--ff-b);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--c-bg);background:var(--c-cream);padding:.875rem 2rem;text-decoration:none;display:inline-block;transition:background .22s,transform .18s}
.btn-p:hover{background:var(--c-acc);transform:translateY(-2px)}
.btn-g{font-family:var(--ff-b);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--c-dim);text-decoration:none;position:relative;transition:color .22s}
.btn-g::after{content:'';position:absolute;bottom:-3px;left:0;width:100%;height:1px;background:currentColor}
.btn-g:hover{color:var(--c-cream)}
.hero-right{position:relative;overflow:hidden}
.hero-right img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 9s ease}
.hero:hover .hero-right img{transform:scale(1)}
.hero-right::before{content:'';position:absolute;inset:0;background:linear-gradient(to right,var(--c-bg) 0%,transparent 30%);z-index:1;pointer-events:none}
.hero-scroll{position:absolute;bottom:clamp(32px,5vh,56px);right:var(--pg);display:flex;align-items:center;gap:.75rem;writing-mode:vertical-rl;font-family:var(--ff-b);font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;color:var(--c-muted);z-index:3}
.hero-scroll::before{content:'';width:1px;height:3rem;background:var(--c-muted);animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:.9}}

/* MARQUEE */
.mq-wrap{overflow:hidden;border-top:1px solid var(--c-border);border-bottom:1px solid var(--c-border);padding:1.1rem 0;background:var(--c-bg2)}
.mq-track{display:flex;white-space:nowrap;animation:mq 28s linear infinite;will-change:transform}
.mq-track:hover{animation-play-state:paused}
.mq-item{font-family:var(--ff-d);font-size:clamp(1rem,1.8vw,1.45rem);font-weight:300;font-style:italic;color:var(--c-dim);padding:0 2.5rem;flex-shrink:0;user-select:none}
.mq-sep{color:var(--c-acc);font-style:normal}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* SECTION */
.sec{padding:var(--sp) var(--pg)}
.sec-lbl{display:flex;align-items:center;gap:.75rem;font-family:var(--ff-b);font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;color:var(--c-acc);margin-bottom:2.5rem}
.sec-lbl::before{content:'';width:1.5rem;height:1px;background:var(--c-acc)}
.sec-h{font-family:var(--ff-d);font-size:clamp(2.4rem,5vw,6rem);font-weight:300;line-height:1.05;letter-spacing:-.025em;color:var(--c-cream)}
.sec-h em{font-style:italic;color:var(--c-dim)}

/* WORK */
.work-hdr{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:clamp(3rem,5vw,5rem);gap:1.5rem}
.work-all{font-family:var(--ff-b);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--c-dim);text-decoration:none;border-bottom:1px solid var(--c-border);padding-bottom:3px;white-space:nowrap;align-self:flex-end;transition:color .22s,border-color .22s}
.work-all:hover{color:var(--c-acc);border-color:var(--c-acc)}
.proj-row{display:grid;gap:3px}
.proj-row-a{grid-template-columns:1.65fr 1fr}
.proj-row-b{grid-template-columns:1fr 1.65fr;margin-top:3px}
.proj{position:relative;overflow:hidden;display:block;cursor:pointer}
.proj-inner{position:relative;overflow:hidden}
.proj-img{width:100%;display:block;object-fit:cover;transform:scale(1.03);transition:transform .8s cubic-bezier(.25,.46,.45,.94);will-change:transform}
.proj:hover .proj-img,.proj:focus .proj-img{transform:scale(1)}
.proj-ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(11,10,8,.88) 0%,rgba(11,10,8,.1) 55%,transparent 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:2rem 2.25rem}
.proj-num{font-family:var(--ff-b);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--c-acc);margin-bottom:.45rem}
.proj-name{font-family:var(--ff-d);font-size:clamp(1.35rem,2.5vw,2.25rem);font-weight:400;color:var(--c-cream);line-height:1.1;margin-bottom:.4rem}
.proj-type{font-family:var(--ff-b);font-size:.78rem;font-weight:300;color:var(--c-dim)}
.proj-arr{position:absolute;top:1.75rem;right:1.75rem;width:2.75rem;height:2.75rem;border:1px solid rgba(240,233,222,.25);display:flex;align-items:center;justify-content:center;font-size:1rem;color:var(--c-cream);opacity:0;transform:translate(-6px,6px);transition:opacity .3s,transform .3s}
.proj:hover .proj-arr,.proj:focus .proj-arr{opacity:1;transform:translate(0,0)}

/* ABOUT */
.about-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(3rem,6vw,8rem);align-items:start}
.about-img-w{position:relative}
.about-img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.about-badge{position:absolute;bottom:-1.25rem;right:-1.25rem;background:var(--c-acc);color:var(--c-bg);padding:1.1rem 1.4rem;font-family:var(--ff-b);font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;line-height:1.5}
.about-content{padding-top:1.5rem}
.about-quote{font-family:var(--ff-d);font-size:clamp(1.5rem,2.8vw,2.6rem);font-weight:300;line-height:1.25;color:var(--c-cream);margin-bottom:2.25rem;padding-left:1.5rem;border-left:2px solid var(--c-acc);font-style:italic}
.about-txt{font-family:var(--ff-b);font-size:.9375rem;font-weight:300;color:var(--c-dim);line-height:1.82;margin-bottom:1.35rem}
.about-vals{display:grid;grid-template-columns:1fr 1fr;gap:1px;border:1px solid var(--c-border);margin-top:2.5rem}
.about-val{padding:1.25rem 1.4rem}
.about-val:nth-child(odd){border-right:1px solid var(--c-border)}
.about-val:nth-child(1),.about-val:nth-child(2){border-bottom:1px solid var(--c-border)}
.aval-lbl{font-family:var(--ff-b);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--c-acc);margin-bottom:.3rem}
.aval-txt{font-family:var(--ff-d);font-size:1.05rem;font-weight:400;color:var(--c-cream)}

/* SERVICES */
.svc-intro{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:end;margin-bottom:4rem}
.svc-desc{font-family:var(--ff-b);font-size:.9375rem;font-weight:300;color:var(--c-dim);line-height:1.8}
.svc-list{border-top:1px solid var(--c-border)}
.svc-item{border-bottom:1px solid var(--c-border)}
.svc-trigger{width:100%;display:grid;grid-template-columns:3.5rem 1fr auto;align-items:center;gap:1.5rem;padding:1.6rem 0;cursor:pointer;background:none;border:none;text-align:left;transition:padding-left .28s}
.svc-trigger:hover{padding-left:.6rem}
.svc-num{font-family:var(--ff-b);font-size:.62rem;letter-spacing:.16em;color:var(--c-acc)}
.svc-name{font-family:var(--ff-d);font-size:clamp(1.35rem,2.5vw,2.1rem);font-weight:300;color:var(--c-cream);transition:color .2s}
.svc-trigger:hover .svc-name{color:var(--c-acc2)}
.svc-plus{width:2.25rem;height:2.25rem;border:1px solid var(--c-border);display:flex;align-items:center;justify-content:center;color:var(--c-dim);font-size:1.1rem;flex-shrink:0;transition:background .25s,border-color .25s,color .25s,transform .35s}
.svc-item.open .svc-plus{background:var(--c-acc);border-color:var(--c-acc);color:var(--c-bg);transform:rotate(45deg)}
.svc-body{max-height:0;overflow:hidden;transition:max-height .42s ease}
.svc-body-inner{padding:0 0 2rem 5rem}
.svc-body-inner p{font-family:var(--ff-b);font-size:.9375rem;font-weight:300;color:var(--c-dim);line-height:1.82;max-width:640px}

/* CTA */
.cta-sec{text-align:center;background:var(--c-bg2);border-top:1px solid var(--c-border)}
.cta-h{font-family:var(--ff-d);font-size:clamp(2.8rem,7vw,8rem);font-weight:300;line-height:1.02;letter-spacing:-.025em;color:var(--c-cream);margin-bottom:1.5rem}
.cta-h em{font-style:italic;color:var(--c-acc2)}
.cta-sub{font-family:var(--ff-b);font-size:.9375rem;font-weight:300;color:var(--c-dim);line-height:1.75;max-width:440px;margin:0 auto 3rem}
.cta-email{font-family:var(--ff-d);font-size:clamp(1.1rem,2.2vw,1.75rem);font-weight:400;font-style:italic;color:var(--c-cream);text-decoration:none;border-bottom:1px solid var(--c-border);padding-bottom:4px;display:inline-block;margin-bottom:4rem;transition:color .22s,border-color .22s}
.cta-email:hover{color:var(--c-acc);border-color:var(--c-acc)}
.contact-row{display:flex;justify-content:center;gap:clamp(2rem,5vw,5rem);flex-wrap:wrap}
.cc{text-align:center}
.cc-lbl{font-family:var(--ff-b);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--c-acc);margin-bottom:.4rem}
.cc-val{font-family:var(--ff-b);font-size:.875rem;font-weight:300;color:var(--c-dim);text-decoration:none;font-style:normal;transition:color .2s;display:block}
.cc-val:hover{color:var(--c-cream)}

/* FOOTER */
.ftr{background:var(--c-bg);border-top:1px solid var(--c-border);padding:2rem var(--pg);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.ftr-brand{font-family:var(--ff-d);font-size:1rem;font-weight:600;color:var(--c-cream);text-decoration:none}
.ftr-links{display:flex;gap:1.75rem;list-style:none;flex-wrap:wrap}
.ftr-link{font-family:var(--ff-b);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--c-muted);text-decoration:none;transition:color .2s}
.ftr-link:hover{color:var(--c-cream)}
.ftr-copy{font-family:var(--ff-b);font-size:.72rem;font-weight:300;color:var(--c-muted)}

/* REVEALS */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .75s ease,transform .75s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-left{opacity:0;transform:translateX(-28px);transition:opacity .75s ease,transform .75s ease}
.reveal-left.visible{opacity:1;transform:translateX(0)}
.delay-1{transition-delay:.1s}.delay-2{transition-delay:.22s}.delay-3{transition-delay:.38s}.delay-4{transition-delay:.54s}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}.reveal,.reveal-left{opacity:1;transform:none}html{scroll-behavior:auto}}

/* RESPONSIVE */
@media(max-width:1024px){
  .proj-row-a,.proj-row-b{grid-template-columns:1fr}.proj-row-b{margin-top:3px}
  .about-badge{right:0}.svc-intro{grid-template-columns:1fr;gap:1.5rem}
}
@media(max-width:768px){
  .nav-links,.nav-cta{display:none}.nav-ham{display:flex}
  .hero{grid-template-columns:1fr;min-height:100svh}
  .hero-right{position:absolute;inset:0;z-index:0}
  .hero-right::before{background:linear-gradient(to top,rgba(11,10,8,.92) 0%,rgba(11,10,8,.6) 50%,rgba(11,10,8,.25) 100%)}
  .hero-left{position:relative;z-index:2;padding-top:calc(var(--nav-h) + 3rem);padding-bottom:4rem;justify-content:flex-end;min-height:100svh}
  .hero-scroll{display:none}
  .work-hdr{flex-direction:column;align-items:flex-start}
  .about-grid{grid-template-columns:1fr}.about-badge{right:0;bottom:-1rem}
  .about-vals{grid-template-columns:1fr}
  .about-val:nth-child(odd){border-right:none}
  .about-val:nth-child(1),.about-val:nth-child(2),.about-val:nth-child(3){border-bottom:1px solid var(--c-border)}
  .svc-trigger{grid-template-columns:2.5rem 1fr auto;gap:1rem}.svc-body-inner{padding-left:3.5rem}
  .ftr{flex-direction:column;text-align:center}.ftr-links{justify-content:center}
}
@media(max-width:480px){
  .hero-btns{flex-direction:column;align-items:flex-start;gap:1.25rem}
  .contact-row{gap:1.75rem}.cta-h{font-size:2.5rem}
}