/* Monier Agency — styles */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#0E0E0E;color:#EDE8E0;font-family:'Inter',sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:#C9A36A;color:#0E0E0E}
/* Warm unifying filter so every render reads as one cohesive set */
.slot-img{filter:contrast(1.04) saturate(0.97) brightness(0.99) sepia(0.04)}
/* hero photo is naturally warm — lighter unifying filter so it stays luminous */
#monier-hero-v2{filter:contrast(1.03) saturate(0.98) brightness(1.0) sepia(0.02)}

@keyframes scrollPulse{0%{transform:translateY(0);opacity:.9}50%{transform:translateY(10px);opacity:.3}100%{transform:translateY(0);opacity:.9}}
a{color:inherit;text-decoration:none}
/* Reveal + nav state */
[data-reveal][data-in]{opacity:1 !important;transform:none !important}
nav[data-scrolled]{background:rgba(14,14,14,.72) !important;backdrop-filter:blur(16px) !important;-webkit-backdrop-filter:blur(16px) !important;border-bottom-color:rgba(201,163,106,.16) !important;padding-top:14px !important;padding-bottom:14px !important}
/* Brand logo — responsive heights + compact scroll state */
.nav-logo-link{cursor:pointer}
.nav-logo{height:36px}
@media (min-width:640px){.nav-logo{height:40px}}
@media (min-width:1024px){.nav-logo{height:48px}}
@media (min-width:1440px){.nav-logo{height:52px}}
nav[data-scrolled] .nav-logo{height:36px !important}
.foot-logo{height:48px}
@media (min-width:640px){.foot-logo{height:56px}}
@media (min-width:1024px){.foot-logo{height:64px}}
.work-item{white-space:nowrap}
/* ===== Project Gallery — editorial asymmetric grid ===== */
.gal-grid{display:grid;gap:18px;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(150px,15.5vw,224px);grid-template-areas:"liv liv grn grn" "liv liv off off" "kit win bth clo" "kit win bar clo"}
.gal-liv{grid-area:liv}.gal-grn{grid-area:grn}.gal-off{grid-area:off}.gal-kit{grid-area:kit}.gal-win{grid-area:win}.gal-bth{grid-area:bth}.gal-clo{grid-area:clo}.gal-bar{grid-area:bar}
.gal-card{position:relative;height:100%;border-radius:4px;overflow:hidden;background:#161616;display:block;text-decoration:none;cursor:pointer}
.gal-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;will-change:transform;transition:transform 1.2s cubic-bezier(.2,.7,.2,1);filter:contrast(1.04) saturate(0.97) brightness(0.99) sepia(0.04)}
.gal-card:hover img{transform:scale(1.05)}
.gal-shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(14,14,14,.82) 100%);transition:background .6s ease;pointer-events:none}
.gal-card:hover .gal-shade{background:linear-gradient(180deg,rgba(14,14,14,.12) 0%,transparent 38%,rgba(14,14,14,.88) 100%)}
.gal-cap{position:absolute;left:0;right:0;bottom:0;padding:24px;pointer-events:none}
.gal-type{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(18px,1.6vw,22px);letter-spacing:.03em;color:#C9A36A;margin:0;text-shadow:0 0 12px rgba(201,163,106,.4);transition:text-shadow .4s ease}
.gal-card:hover .gal-type{text-shadow:0 0 22px rgba(201,163,106,.75),0 0 44px rgba(201,163,106,.3)}
.gal-style{display:block;margin-top:7px;font-family:'Inter',sans-serif;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.18em;color:#E2C9A0}
.gal-tag{position:absolute;top:16px;right:16px;display:flex;align-items:center;gap:6px;background:rgba(201,163,106,.95);color:#0E0E0E;padding:6px 12px;border-radius:2px;font-family:'Inter',sans-serif;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.15em;opacity:0;transform:translateY(-4px);transition:opacity .4s ease .1s,transform .4s ease .1s;pointer-events:none}
.gal-card:hover .gal-tag{opacity:1;transform:translateY(0)}
@media (max-width:1023px){.gal-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:auto;grid-template-areas:none}.gal-grid>*{grid-area:auto}.gal-card{aspect-ratio:4/3}}
@media (max-width:639px){.gal-grid{grid-template-columns:1fr;gap:16px}}
/* ===== Lightbox ===== */
@keyframes lbFade{from{opacity:0}to{opacity:1}}
@keyframes lbZoom{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}
@keyframes lbSpin{to{transform:rotate(360deg)}}
.lb-root{position:fixed;inset:0;z-index:300;background:rgba(14,14,14,.95);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,56px);animation:lbFade .3s ease}
.lb-stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:22px;max-width:1400px;width:100%}
.lb-img{max-width:90vw;max-height:72vh;object-fit:contain;border-radius:4px;filter:contrast(1.04) saturate(0.97) brightness(0.99) sepia(0.04);box-shadow:0 40px 120px -40px rgba(0,0,0,.9)}
.lb-img.lb-anim{animation:lbZoom .4s cubic-bezier(.2,.7,.2,1)}
.lb-cap{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.lb-type{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(22px,2.4vw,26px);letter-spacing:.03em;color:#C9A36A;margin:0;text-shadow:0 0 14px rgba(201,163,106,.45)}
.lb-style{font-family:'Inter',sans-serif;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.18em;color:#E2C9A0}
.lb-cta{display:inline-flex;align-items:center;gap:9px;margin-top:6px;background:#C9A36A;color:#0E0E0E;padding:14px 28px;border-radius:2px;font-family:'Inter',sans-serif;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;text-decoration:none;transition:background .35s ease,gap .35s ease}
.lb-cta:hover{background:#A8854E;gap:13px}
.lb-counter{position:absolute;top:clamp(16px,3vw,28px);left:clamp(16px,3vw,32px);font-family:'Inter',sans-serif;font-size:12px;letter-spacing:.18em;color:#B8B2A7;z-index:3}
.lb-close{position:absolute;top:clamp(12px,3vw,24px);right:clamp(16px,3vw,32px);width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid rgba(255,255,255,.18);border-radius:50%;color:#EDE8E0;font-size:22px;line-height:1;cursor:pointer;transition:color .3s,border-color .3s;z-index:3}
.lb-close:hover{color:#C9A36A;border-color:#C9A36A}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:54px;height:54px;display:flex;align-items:center;justify-content:center;background:rgba(14,14,14,.4);border:1px solid rgba(255,255,255,.16);border-radius:50%;color:#EDE8E0;font-size:26px;line-height:1;cursor:pointer;transition:color .3s,border-color .3s,background .3s;z-index:3}
.lb-nav:hover{color:#C9A36A;border-color:#C9A36A;background:rgba(14,14,14,.7)}
.lb-prev{left:clamp(10px,2vw,28px)}
.lb-next{right:clamp(10px,2vw,28px)}
.lb-spin{position:absolute;top:calc(36vh - 19px);width:38px;height:38px;border:2px solid rgba(201,163,106,.25);border-top-color:#C9A36A;border-radius:50%;animation:lbSpin .8s linear infinite;pointer-events:none}
@media (max-width:639px){.lb-img{max-width:95vw;max-height:62vh}.lb-nav{width:48px;height:48px;font-size:22px}}
/* a dot promoted to a row-break: full width, zero height, hidden glyph */
.work-dot.work-break{flex-basis:100%;height:0;padding:0;overflow:hidden;color:transparent}
/* ===== Project cards: reality (default) -> concept (hover) cross-fade ===== */
.proj-card{position:relative;border-radius:4px;overflow:hidden;aspect-ratio:4/5;background:#161616;cursor:default}
.proj-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;will-change:opacity,transform;transition:opacity .6s ease-in-out,transform 1.2s cubic-bezier(.2,.7,.2,1);filter:contrast(1.04) saturate(0.97) brightness(0.99) sepia(0.04)}
.proj-real{opacity:1}
.proj-render{opacity:0}
.proj-card:hover .proj-real,.proj-card.is-flipped .proj-real{opacity:0}
.proj-card:hover .proj-render,.proj-card.is-flipped .proj-render{opacity:1}
.proj-card:hover .proj-layer,.proj-card.is-flipped .proj-layer{transform:scale(1.05)}
.proj-grad{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,transparent 45%,rgba(14,14,14,.85) 100%);pointer-events:none}
.proj-tag{position:absolute;top:16px;right:16px;z-index:3;background:rgba(14,14,14,.75);padding:6px 12px;border-radius:2px;font-family:'Inter',sans-serif;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.15em;color:#C9A36A;opacity:0;pointer-events:none;transition:opacity .4s ease .35s}
.proj-card:hover .proj-tag,.proj-card.is-flipped .proj-tag{opacity:1}
.proj-dot{position:absolute;bottom:18px;right:18px;z-index:3;width:8px;height:8px;border-radius:50%;background:#C9A36A;box-shadow:0 0 10px rgba(201,163,106,.6);animation:dotPulse 2s ease-in-out infinite;transition:opacity .3s ease;pointer-events:none}
.proj-card:hover .proj-dot,.proj-card.is-flipped .proj-dot{opacity:0}
@keyframes dotPulse{0%,100%{opacity:.5}50%{opacity:1}}
@media (hover:none){.proj-dot{width:12px;height:12px}}
.proj-caption{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:28px 26px;pointer-events:none}
.proj-name{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:27px;line-height:1.05;letter-spacing:.08em;text-transform:uppercase;color:#C9A36A;margin:0;text-shadow:0 0 12px rgba(201,163,106,.4);transition:text-shadow .4s ease,transform .4s ease;transform-origin:left bottom}
.proj-card:hover .proj-name,.proj-card.is-flipped .proj-name{text-shadow:0 0 24px rgba(201,163,106,.7),0 0 48px rgba(201,163,106,.3);transform:scale(1.02)}
.proj-loc{font-family:'Inter',sans-serif;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.18em;color:#E2C9A0;margin:11px 0 0;display:block}
/* ===== Global a11y + polish ===== */
h1,h2{text-wrap:balance}
p{text-wrap:pretty}
a,button{cursor:pointer}
a:hover{color:inherit}
:focus-visible{outline:2px solid #C9A36A;outline-offset:3px}
.gal-card:focus-visible{outline-offset:-2px}
@media (hover:hover) and (pointer:fine){.gal-card{cursor:none}}
.view-cursor{position:fixed;left:0;top:0;margin:-42px 0 0 -42px;width:84px;height:84px;border-radius:50%;background:rgba(201,163,106,.92);display:flex;align-items:center;justify-content:center;z-index:200;pointer-events:none;opacity:0;scale:.6;translate:-200px -200px;transition:opacity .35s ease,scale .35s cubic-bezier(.2,.8,.2,1)}
.view-cursor.on{opacity:1;scale:1}
@media (hover:none){.view-cursor{display:none}}
.nav-right{display:flex;align-items:center;gap:12px}
.nav-burger{display:flex;flex-direction:column;justify-content:center;gap:6px;width:48px;height:48px;padding:0 13px;background:rgba(14,14,14,.35);border:1px solid rgba(237,232,224,.22);border-radius:2px;transition:border-color .3s ease}
.nav-burger:hover{border-color:#C9A36A}
.nav-burger span{display:block;height:1px;background:#EDE8E0;transition:transform .3s ease}
.nav-burger[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
@media (min-width:1180px){.nav-burger{display:none}}
.nav-cta{white-space:nowrap}
@media (max-height:720px){.hero-scroll{display:none}}

.m-menu{position:fixed;inset:0;z-index:99;background:rgba(14,14,14,.97);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:2px;padding:110px clamp(20px,5vw,56px) 48px;animation:lbFade .3s ease}
.m-menu a{display:flex;align-items:center;min-height:52px;font-family:'Cormorant Garamond',serif;font-weight:500;font-size:34px;color:#F7F4EF;transition:color .3s ease}
.m-menu a:hover{color:#C9A36A}
.m-menu .m-cta{margin-top:28px;gap:10px;min-height:48px;padding:0 28px;font-family:'Inter',sans-serif;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;background:#C9A36A;color:#0E0E0E;border-radius:2px}
.m-menu .m-cta:hover{background:#A8854E;color:#0E0E0E}
.lb-err{margin:0;padding:48px 24px;font-size:14px;line-height:1.6;color:#B8B2A7;text-align:center;max-width:42ch}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}[data-reveal]{opacity:1 !important;transform:none !important}*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}

[hidden]{display:none !important}

/* Hover states */
.hv1:hover{opacity:.85 !important}
.hv2:hover{opacity:1 !important;color:#C9A36A !important}
.hv3:hover{background:#A8854E !important;gap:14px !important}
.hv4:hover{background:#A8854E !important;gap:16px !important}
.hv5:hover{border-color:#C9A36A !important;background:rgba(201,163,106,.06) !important}
.hv6:hover{border-color:#C9A36A !important;gap:15px !important}
.hv7:hover{gap:14px !important}
.hv8:hover{border-color:#C9A36A !important;color:#C9A36A !important;background:rgba(201,163,106,.06) !important}
.hv9:hover{color:#F7F4EF !important}
.hv10:hover{color:#C9A36A !important}
.hv11:hover{background:#A8854E !important;gap:13px !important}

/* ===== Mobile quality layer ===== */
html,body{overflow-x:hidden}
@supports (overflow:clip){html,body{overflow-x:clip}}
img,picture{max-width:100%}
picture{display:contents}
a,button,[role="button"],[role="slider"]{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
a:active,button:active{opacity:.85}
#home{min-height:100vh}
@supports (min-height:100svh){#home{min-height:100svh !important}}
/* Safe areas (notch / home bar) */
#site-nav{padding-top:calc(20px + env(safe-area-inset-top,0px)) !important;padding-left:max(clamp(20px,5vw,56px),env(safe-area-inset-left,0px)) !important;padding-right:max(clamp(20px,5vw,56px),env(safe-area-inset-right,0px)) !important}
nav#site-nav[data-scrolled]{padding-top:calc(14px + env(safe-area-inset-top,0px)) !important}
footer{padding-bottom:calc(36px + env(safe-area-inset-bottom,0px)) !important}
.m-menu{padding-top:calc(110px + env(safe-area-inset-top,0px));padding-bottom:calc(48px + env(safe-area-inset-bottom,0px))}
.lb-root{padding-top:max(clamp(16px,4vw,56px),env(safe-area-inset-top,0px));padding-bottom:max(clamp(16px,4vw,56px),env(safe-area-inset-bottom,0px))}
.lb-close{top:calc(clamp(12px,3vw,24px) + env(safe-area-inset-top,0px))}
.lb-counter{top:calc(clamp(16px,3vw,28px) + env(safe-area-inset-top,0px))}
/* Compact nav: START A PROJECT stays visible on phones */
@media (max-width:519px){
  .nav-logo{height:32px !important}
  .nav-right{gap:8px}
  .nav-cta{min-height:44px !important;padding:0 12px !important;font-size:10px !important;letter-spacing:.1em !important;gap:0 !important;box-shadow:none !important}
  .nav-cta span{display:none}
  .nav-burger{width:44px;height:44px;padding:0 12px}
}
@media (max-width:359px){.nav-logo{height:28px !important}.nav-cta{padding:0 10px !important;font-size:9.5px !important}}
/* Featured project captions on phones */
@media (max-width:759px){.proj-caption{padding:22px 20px}.proj-name{font-size:24px}}
/* Footer columns stack on phones */
@media (max-width:559px){.foot-cols{grid-template-columns:1fr !important;gap:32px !important}}
/* We Work With: rows are balanced by script.js — no dot ever ends a row */
.work-row{max-width:100%}
@media (max-width:420px){.work-item{font-size:17px !important}.work-dot{padding:0 14px !important}}
/* Lightbox on phones: image fills the width, controls stay thumb-sized */
@media (max-width:639px){.lb-stage{gap:16px}.lb-cap{gap:10px}.lb-cta{min-height:48px}.lb-prev{left:6px}.lb-next{right:6px}}