/* QUICKSTAND v4 — "Atelier". Warm paper, editorial serif, hairline detail.
   Deliberately shares zero DNA with the dark demo generator. */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --paper:#F5F1E8; --panel:#ECE6D9; --ink:#191509; --mut:#6E6754;
  --line:#D6CDB9; --gold:#8A7349;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Inter',system-ui,sans-serif;
}
html{background:var(--paper)}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:1.5px solid var(--gold);outline-offset:3px}

/* type scale */
.lab{font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);font-weight:600}
.hd{font-family:var(--serif);font-weight:500;letter-spacing:-.005em;line-height:1.04;font-size:clamp(2.7rem,6.2vw,5rem)}
.hd em{font-style:italic;font-weight:500}
.hd-s{font-family:var(--serif);font-weight:500;line-height:1.08;font-size:clamp(2rem,3.6vw,3.1rem)}
.lead{font-size:1.06rem;color:var(--mut);max-width:560px}
p{color:var(--mut)}
strong{color:var(--ink)}

/* structure */
.wrap{width:min(1180px,90vw);margin:0 auto}
.sect{padding:clamp(4.2rem,8vw,6.5rem) 0}
.sect + .sect{border-top:1px solid var(--line)}
.headrow{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:3rem;flex-wrap:wrap}
.split{display:grid;grid-template-columns:5fr 6fr;gap:clamp(2rem,5vw,5rem)}
.split .hd-s{margin-top:.9rem}
.stack p{margin-bottom:1.15rem;max-width:560px}
@media(max-width:860px){.split{grid-template-columns:1fr}}

/* header */
.hd-nav{position:sticky;top:0;z-index:50;background:rgba(245,241,232,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-in{width:min(1180px,90vw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:70px}
.logo{font-size:.82rem;letter-spacing:.3em;font-weight:600;text-transform:uppercase}
.logo b{color:var(--gold);font-weight:600}
.nlinks{display:flex;gap:2.2rem;align-items:center;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase}
.nlinks a{color:var(--mut);transition:color .3s}
.nlinks a:hover,.nlinks a.on{color:var(--ink)}
.nlinks a.ncta{border:1px solid var(--ink);padding:.55rem 1.1rem;color:var(--ink);transition:.35s}
.nlinks a.ncta:hover{background:var(--ink);color:var(--paper)}
.burger{display:none;background:none;border:0;width:44px;height:44px;flex-direction:column;gap:6px;align-items:center;justify-content:center;cursor:pointer}
.burger span{width:26px;height:1px;background:var(--ink)}
@media(max-width:860px){.nlinks{display:none}.burger{display:flex}}
.menu{position:fixed;inset:0;background:var(--paper);z-index:60;display:none;flex-direction:column;align-items:flex-start;justify-content:center;gap:1.4rem;padding:8vw}
.menu.open{display:flex}
.menu a{font-family:var(--serif);font-size:2.4rem;line-height:1.1}
.menu a.on{font-style:italic;color:var(--gold)}
.menu .close{position:absolute;top:24px;right:5vw;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;background:none;border:0;cursor:pointer;color:var(--mut)}

/* hero (paper, no photo) */
.hero{padding:clamp(5rem,12vh,9rem) 0 0}
.hero .lab{display:block;margin-bottom:1.6rem}
.hero h1{max-width:14ch}
.hero .lead{margin-top:1.6rem}
.h-acts{display:flex;gap:1rem;margin-top:2.6rem;flex-wrap:wrap}

/* buttons */
.btn{display:inline-block;border:1px solid var(--ink);padding:1rem 2.1rem;font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);background:transparent;cursor:pointer;transition:background .35s,color .35s}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn.dark{background:var(--ink);color:var(--paper)}
.btn.dark:hover{background:transparent;color:var(--ink)}

/* framed image with mask reveal */
.frame{margin-top:4rem;border:1px solid var(--line);padding:10px;background:#FBF9F3}
.frame .mask{overflow:hidden}
.frame img{width:100%;aspect-ratio:21/10;object-fit:cover;clip-path:inset(0 0 100% 0)}
.frame.in img{clip-path:inset(0 0 0 0);transition:clip-path 1.5s cubic-bezier(.19,1,.22,1)}
.cap{display:flex;justify-content:space-between;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);padding:12px 2px 2px}
.cap em{font-style:normal;color:var(--gold)}

/* stats */
.stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat{padding:2.8rem 1rem;text-align:center;border-left:1px solid var(--line)}
.stat:first-child{border-left:0}
.stat b{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(3.4rem,7vw,5.6rem);line-height:1;color:var(--ink)}
.stat b em{font-style:italic;color:var(--gold)}
.stat span{display:block;margin-top:.7rem;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mut)}
@media(max-width:680px){.stats{grid-template-columns:1fr}.stat{border-left:0;border-top:1px solid var(--line)}.stat:first-child{border-top:0}}

/* index rows (explore / steps / lists) */
.rows{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:90px 1fr;gap:1.6rem;align-items:baseline;padding:2rem 0;border-bottom:1px solid var(--line);transition:padding .4s}
.row:hover{padding-left:.8rem}
.row .k{font-family:var(--serif);font-style:italic;font-size:1.3rem;color:var(--gold)}
.row h3{font-family:var(--serif);font-weight:500;font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.1}
.row p{margin-top:.4rem;max-width:520px}
.rows.row3 .row{grid-template-columns:90px 260px 1fr}
@media(max-width:860px){.rows.row3 .row{grid-template-columns:60px 1fr}.rows.row3 .row p{grid-column:2}}

/* quote band */
.band{position:relative;min-height:78vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(20,16,6,.25),rgba(20,16,6,.45))}
.band .wrap{position:relative;z-index:2;text-align:center;padding:4rem 0}
.band .lab{color:#E3D5B3}
.band p.q{font-family:var(--serif);font-size:clamp(2rem,5.4vw,4rem);line-height:1.12;color:#FBF9F3;max-width:20ch;margin:1.2rem auto 0}
.band p.q em{font-style:italic;color:#E3D5B3}

/* cta */
.cta{border-top:1px solid var(--line);text-align:center}
.cta .hd-s{margin:1rem auto .4rem}
.cta p{max-width:46ch;margin:0 auto}
.cta .h-acts{justify-content:center}

/* work gallery */
.gal{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:2.4rem}
.gal figure{border:1px solid var(--line);padding:8px;background:#FBF9F3}
.gal .mask{overflow:hidden}
.gal img{width:100%;aspect-ratio:4/3;object-fit:cover;clip-path:inset(0 0 100% 0)}
.gal figure.in img{clip-path:inset(0);transition:clip-path 1.4s cubic-bezier(.19,1,.22,1)}
.gal figcaption{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);padding:10px 2px 2px}

/* faq */
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:2rem;padding:1.7rem 0;font-family:var(--serif);font-weight:500;font-size:1.45rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--sans);color:var(--gold);font-size:1.2rem}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 1.7rem;max-width:640px}

/* form */
.enq{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem 2.2rem}
.enq .full{grid-column:1/-1}
.enq label{display:block;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);margin-bottom:.5rem}
.enq input,.enq select,.enq textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--ink);padding:.7rem 0;font:inherit;color:var(--ink);border-radius:0;transition:border-color .3s}
.enq textarea{resize:vertical;min-height:110px}
.enq input:focus,.enq select:focus,.enq textarea:focus{outline:none;border-bottom:1.5px solid var(--gold)}
.enq .hp{position:absolute;left:-9999px}
.formnote{grid-column:1/-1;font-size:.8rem}
#form-status.ok{color:var(--gold)}
#form-status.err{color:#9A3324}
.clines{font-size:1.02rem}
.clines a{border-bottom:1px solid var(--gold)}
.pre-note{font-size:.92rem;margin-top:1.6rem}
.pre-note a{border-bottom:1px solid var(--gold)}

/* footer */
footer{border-top:1px solid var(--line);padding:3.2rem 0 2.4rem;margin-top:0}
.foot{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.foot a:hover{color:var(--ink)}
.credit{margin-top:1.8rem;font-size:.78rem;color:var(--mut)}
.credit a{border-bottom:1px solid var(--line)}

/* motion */
.rv{opacity:0;transform:translateY(26px);transition:opacity 1.1s cubic-bezier(.19,1,.22,1),transform 1.1s cubic-bezier(.19,1,.22,1)}
.rv.in{opacity:1;transform:none}
.rise{opacity:0;transform:translateY(22px);animation:rise 1.2s cubic-bezier(.19,1,.22,1) forwards}
.d1{animation-delay:.08s}.d2{animation-delay:.2s}.d3{animation-delay:.34s}.d4{animation-delay:.48s}
@keyframes rise{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.rise{opacity:1;transform:none;animation:none}.frame img,.gal img{clip-path:none!important}}
@media(max-width:680px){.gal{grid-template-columns:1fr}}