
:root{
  --black:#0c0c0b;
  --char:#151614;
  --white:#f4f1ec;
  --tan:#b1a294;         /* the 2010 garment taupe */
  --chrome-a:#e9ebee;    /* chrome gradient stops */
  --chrome-b:#8f959c;
  --green:#4a5a48;       /* deep sage */
  --faded:#8d8a83;
  --display:'Bodoni Moda', 'Didot', serif;
  --script:'Mrs Saint Delafield', cursive;
  --body:'Helvetica Neue', Helvetica, Arial, sans-serif;
  --stitch:1px dashed rgba(177,162,148,.45);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--black);color:var(--white);font-family:var(--body);font-weight:300;line-height:1.6;overflow-x:hidden}
::selection{background:var(--tan);color:var(--black)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--tan);outline-offset:3px}

.eyebrow{font-size:.66rem;letter-spacing:.34em;text-transform:uppercase;color:var(--tan);font-weight:400}
.wrap{max-width:1240px;margin:0 auto;padding:0 6vw}
.script{font-family:var(--script);font-size:1.6em;color:var(--tan);font-weight:400;letter-spacing:0}
.stitch{border:none;border-top:var(--stitch);margin:0 6vw}

/* nav */
nav{position:fixed;inset:0 0 auto 0;z-index:60;display:flex;justify-content:space-between;align-items:center;
    padding:1rem 5vw;background:linear-gradient(to bottom, rgba(12,12,11,.9), rgba(12,12,11,0));backdrop-filter:blur(2px)}
.logo{height:34px;width:auto}
nav ul{display:flex;gap:2rem;list-style:none;align-items:center}
nav ul a{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;opacity:.8;padding-bottom:.2rem;
         border-bottom:1px dashed transparent;transition:.25s}
nav ul a:hover{opacity:1;color:var(--tan);border-bottom-color:var(--tan)}
nav ul a.red-link{color:transparent;background:linear-gradient(180deg,var(--chrome-a),var(--chrome-b));
                  -webkit-background-clip:text;background-clip:text;opacity:1;font-weight:400}

/* hero */
header{min-height:100vh;position:relative;display:flex;align-items:flex-end}
.hero-img{position:absolute;inset:0;background:url('images/lb-night1.jpg') center 30%/cover no-repeat}
.hero-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top, rgba(12,12,11,.96) 8%, rgba(12,12,11,.35) 45%, rgba(12,12,11,.25) 100%)}
.hero-inner{position:relative;z-index:2;padding:0 6vw 5.5rem;max-width:1240px;margin:0 auto;width:100%}
h1{font-family:var(--display);font-weight:400;font-size:clamp(2.6rem,7.5vw,6rem);line-height:1.03;max-width:16ch}
h1 .script{font-size:1.15em;display:inline-block;transform:translateY(.08em)}
.hero-sub{margin-top:1.6rem;max-width:44ch;color:#cfcac2;font-size:1rem}
.cta{display:inline-block;margin-top:2.2rem;padding:.95rem 2.4rem;border:1px solid var(--tan);color:var(--white);
     font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;transition:.3s}
.cta:hover{background:var(--tan);color:var(--black)}

/* sections */
section{padding:6.5rem 0}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-bottom:3.5rem}
h2{font-family:var(--display);font-weight:400;font-size:clamp(1.9rem,4.2vw,3.2rem);line-height:1.1}
h2 .script{font-size:1.25em}
.section-head p{max-width:38ch;color:var(--faded);font-size:.92rem}

/* collection */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:2.2rem 2.4rem}
.card{position:relative}
.card:nth-child(1){grid-column:1 / span 5}
.card:nth-child(2){grid-column:7 / span 6;margin-top:4.5rem}
.card:nth-child(3){grid-column:2 / span 4;margin-top:-1.5rem}
.card:nth-child(4){grid-column:7 / span 5;margin-top:2.5rem}
.card:nth-child(5){grid-column:1 / span 6;margin-top:3rem}
.card:nth-child(6){grid-column:8 / span 5;margin-top:5rem}
.card:nth-child(7){grid-column:3 / span 5;margin-top:1rem}
.card figure{aspect-ratio:3/4;overflow:hidden;position:relative;background:var(--char)}
.card figure img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .6s ease}
.card:hover figure img{transform:scale(1.03)}
.card figure::after{content:"";position:absolute;inset:.7rem;border:1px dashed rgba(177,162,148,0);transition:border-color .35s;pointer-events:none}
.card:hover figure::after{border-color:rgba(177,162,148,.65)}
.card figcaption{display:flex;justify-content:space-between;align-items:baseline;margin-top:1rem;gap:1rem}
.card h3{font-family:var(--display);font-weight:500;font-size:1.1rem}
.card .price{color:var(--tan);font-size:.82rem;letter-spacing:.08em}
.card .cut{font-size:.72rem;color:var(--faded);margin-top:.3rem;max-width:34ch}
.buy{margin-top:.9rem;display:inline-block;color:var(--white);font-size:.65rem;letter-spacing:.26em;text-transform:uppercase;
     border-bottom:1px dashed var(--tan);padding-bottom:.25rem;transition:color .25s}
.buy:hover{color:var(--tan)}
.set-note{margin-top:4rem;padding:2rem 2.4rem;border:var(--stitch);display:flex;justify-content:space-between;
          align-items:center;gap:2rem;flex-wrap:wrap}
.set-note p{max-width:52ch;color:#c9c4bc;font-size:.92rem}
.set-note strong{color:var(--white);font-weight:500}

/* lookbook */
.lookbook{background:var(--char)}
.lb-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:1.6rem}
.lb-grid figure{overflow:hidden;background:var(--black)}
.lb-grid img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.lb-grid figure:hover img{transform:scale(1.03)}
.lb1{grid-column:1/span 4;aspect-ratio:3/4}
.lb2{grid-column:5/span 8;aspect-ratio:16/10}
.lb3{grid-column:1/span 8;aspect-ratio:16/10}
.lb4{grid-column:9/span 4;aspect-ratio:3/4}
.lb5{grid-column:1/span 4;aspect-ratio:3/4}
.lb6{grid-column:5/span 4;aspect-ratio:3/4}
.lb7{grid-column:9/span 4;aspect-ratio:3/4}
.lb-cap{margin-top:.7rem;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--faded)}

/* atelier */
.atelier-grid{display:grid;grid-template-columns:5fr 7fr;gap:4.5rem;align-items:start}
.portrait{position:relative}
.portrait img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top}
.portrait::after{content:"";position:absolute;inset:.7rem;border:1px dashed rgba(177,162,148,.4);pointer-events:none}
.atelier-copy .eyebrow{display:block;margin-bottom:1.4rem}
.atelier-copy h2{margin-bottom:1.8rem;max-width:18ch}
.atelier-copy p{color:#c9c4bc;margin-bottom:1.3rem;max-width:54ch;font-size:.95rem}
.atelier-copy strong{color:var(--white);font-weight:500}
.credo{margin-top:2.2rem;padding-left:1.5rem;border-left:var(--stitch);font-family:var(--display);font-style:italic;
       font-size:1.2rem;color:var(--tan);max-width:32ch}
.sig{width:min(380px,70%);margin-top:2rem;opacity:.92}
.services{margin-top:2.4rem;font-size:.8rem;color:var(--faded)}
.services a{color:var(--white);border-bottom:1px dashed var(--tan);padding-bottom:.15rem}
.services a:hover{color:var(--tan)}

/* R.E.D. */
.red{background:
  radial-gradient(ellipse 70% 60% at 80% 10%, rgba(74,90,72,.28), transparent 60%),
  #0a0a09;position:relative}
.red-head{display:flex;flex-direction:column;gap:.6rem;margin-bottom:3rem}
.red-mark{font-family:var(--body);font-weight:700;font-size:clamp(3rem,9vw,7rem);letter-spacing:.06em;line-height:1;
  color:transparent;background:linear-gradient(180deg,var(--chrome-a) 20%, var(--chrome-b) 55%, #5d6167 80%, var(--chrome-a) 100%);
  -webkit-background-clip:text;background-clip:text}
.red-sub{font-size:.8rem;letter-spacing:.3em;text-transform:uppercase;color:var(--green);
  font-weight:400;filter:brightness(1.6)}
.red p{max-width:56ch;color:#b9b5ae;font-size:.95rem;margin-bottom:1.2rem}
.red-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin:2.6rem 0}
.red-tile{aspect-ratio:4/5;border:1px solid rgba(143,149,156,.25);position:relative;
  background:linear-gradient(165deg,#1c1e1b 0%, #101110 60%, #0a0a09 100%);
  display:flex;align-items:flex-end;padding:1.1rem}
.red-tile span{font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:#6d726f}
.red .cta{border-color:var(--chrome-b);color:var(--chrome-a)}
.red .cta:hover{background:linear-gradient(180deg,var(--chrome-a),var(--chrome-b));color:var(--black);border-color:transparent}

/* footer */
footer{padding:6.5rem 6vw 2.6rem;background:radial-gradient(ellipse 70% 60% at 50% 100%, rgba(177,162,148,.14), transparent 70%), var(--black)}
.foot-grid{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:7fr 5fr;gap:3.5rem;align-items:end}
.sig-foot{width:min(320px,80%);margin-bottom:1.8rem;opacity:.9}
footer h2{max-width:16ch;margin-bottom:1.6rem}
.contact-links{display:flex;flex-direction:column;gap:.95rem;align-items:flex-start}
.contact-links a{font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;border-bottom:1px dashed var(--tan);
                 padding-bottom:.3rem;transition:color .25s}
.contact-links a:hover{color:var(--tan)}
.colophon{max-width:1240px;margin:4.5rem auto 0;padding-top:1.5rem;border-top:var(--stitch);display:flex;
          justify-content:space-between;gap:2rem;flex-wrap:wrap;font-size:.62rem;letter-spacing:.22em;
          text-transform:uppercase;color:var(--faded)}

/* reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease, transform .8s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

@media (max-width:900px){
  nav ul{gap:1.1rem}
  .grid,.lb-grid{grid-template-columns:1fr 1fr;gap:1.6rem}
  .card:nth-child(n){grid-column:auto;margin-top:0}
  .card:nth-child(even){margin-top:2.6rem}
  .lb-grid figure{grid-column:auto !important;aspect-ratio:3/4 !important}
  .lb2,.lb3{aspect-ratio:16/11 !important;grid-column:span 2 !important}
  .atelier-grid,.foot-grid{grid-template-columns:1fr;gap:3rem;align-items:start}
  .red-tiles{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  nav ul li:nth-child(n+4){display:none}
  .grid{grid-template-columns:1fr}
  .card:nth-child(even){margin-top:0}
  .red-tiles{grid-template-columns:1fr}
}

/* services */
.services-sec{background:var(--char)}
.svc-grid{display:grid;grid-template-columns:5fr 7fr;gap:4.5rem;align-items:start}
.svc-rates .eyebrow{display:block;margin-bottom:1.4rem}
.svc-rates h2{margin-bottom:1.8rem;max-width:16ch}
.rate-list{list-style:none;margin:0 0 2rem}
.rate-list li{display:flex;justify-content:space-between;align-items:baseline;gap:1.4rem;
  padding:.85rem 0;border-bottom:var(--stitch)}
.rate-list li:last-child{border-bottom:none}
.rate-name{font-size:.95rem;color:var(--white)}
.rate-name small{display:block;color:var(--faded);font-size:.72rem;letter-spacing:.02em;margin-top:.15rem;text-transform:none}
.rate-price{font-family:var(--display);font-size:1.05rem;color:var(--tan);white-space:nowrap}
.rate-sub{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--tan);margin:2rem 0 1rem}
.addons{list-style:none;margin:0 0 2rem}
.addons li{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;font-size:.85rem;color:#c9c4bc}
.addons .rate-price{font-size:.9rem}
.terms{margin-top:2rem;padding:1.3rem 1.5rem;border:var(--stitch);font-size:.76rem;line-height:1.7;color:var(--faded)}
.terms strong{color:var(--white);font-weight:500}
.svc-cta{display:inline-block;margin-top:2rem;padding:.95rem 2.4rem;border:1px solid var(--tan);
  color:var(--white);font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;transition:.3s}
.svc-cta:hover{background:var(--tan);color:var(--black)}

/* quote form */
.quote-card{background:var(--black);border:1px solid rgba(177,162,148,.18);padding:2.6rem}
.quote-card h3{font-family:var(--display);font-weight:400;font-size:1.6rem;margin-bottom:.5rem}
.quote-card .lead{color:var(--faded);font-size:.88rem;margin-bottom:2rem;max-width:44ch}
.field{margin-bottom:1.3rem}
.field label{display:block;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--tan);margin-bottom:.5rem}
.field input,.field select,.field textarea{width:100%;background:var(--char);border:1px solid rgba(233,227,213,.14);
  color:var(--white);font-family:var(--body);font-size:.9rem;padding:.8rem .9rem;border-radius:0;transition:border-color .25s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--tan)}
.field textarea{min-height:110px;resize:vertical}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem}
.quote-submit{width:100%;margin-top:.6rem;padding:1rem;background:var(--tan);color:var(--black);border:none;cursor:pointer;
  font-family:var(--body);font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;font-weight:500;transition:opacity .25s}
.quote-submit:hover{opacity:.85}
.quote-note{margin-top:1rem;font-size:.72rem;color:var(--faded);text-align:center}

/* booking */
.booking{text-align:center;padding-bottom:7rem}
.booking .eyebrow{display:block;margin-bottom:1.2rem}
.booking h2{margin-bottom:1rem}
.booking p{max-width:44ch;margin:0 auto 2.5rem;color:var(--faded);font-size:.92rem}
.cal-embed{min-width:320px;height:640px;border:1px solid rgba(177,162,148,.18)}
.cal-fallback{padding:3rem;border:var(--stitch);max-width:520px;margin:0 auto}
.cal-fallback a{color:var(--tan);border-bottom:1px dashed var(--tan);padding-bottom:.2rem}

@media (max-width:900px){
  .svc-grid{grid-template-columns:1fr;gap:3rem}
  .field-row{grid-template-columns:1fr}
  .cal-embed{height:1000px}
}

/* booking option toggle */
.book-options{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;max-width:760px;margin:2.4rem auto 2rem;text-align:left}
.book-opt{background:var(--char);border:1px solid rgba(177,162,148,.22);padding:1.4rem 1.5rem;cursor:pointer;
  font-family:var(--body);color:var(--white);transition:border-color .25s, background .25s;display:flex;flex-direction:column;gap:.5rem}
.book-opt:hover{border-color:var(--tan)}
.book-opt.is-active{border-color:var(--tan);background:#20211e}
.book-opt-name{font-family:var(--display);font-size:1.15rem;letter-spacing:.02em}
.book-opt.is-active .book-opt-name{color:var(--tan)}
.book-opt-desc{font-size:.78rem;line-height:1.6;color:var(--faded)}
@media (max-width:700px){.book-options{grid-template-columns:1fr}}

/* ===== directory splash + menu overlay ===== */
.splash{position:fixed;inset:0;z-index:100;background:
  radial-gradient(ellipse 80% 60% at 50% 30%, #1b1c1a 0%, var(--black) 70%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:opacity .6s ease, visibility .6s ease}
.splash.hide{opacity:0;visibility:hidden;pointer-events:none}
.splash-sig{width:min(340px,60vw);margin-bottom:3.4rem;opacity:.95}
.dir-list{list-style:none;text-align:center;display:flex;flex-direction:column;gap:1.9rem}
.dir-list a{font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,4.6vw,2.4rem);
  letter-spacing:.14em;text-transform:uppercase;color:var(--white);transition:color .25s;display:inline-block}
.dir-list a:hover{color:var(--tan)}
.dir-sub{display:block;font-family:var(--body);font-size:.58rem;letter-spacing:.34em;
  text-transform:uppercase;color:var(--tan);margin-top:.5rem}
.dir-social{display:flex;gap:1.6rem;margin-top:3.4rem}
.dir-social a{color:var(--faded);transition:color .25s}
.dir-social a:hover{color:var(--tan)}
.dir-social svg{width:22px;height:22px;display:block}

/* menu button (persists on every page) */
.menu-btn{position:fixed;top:1.1rem;right:5vw;z-index:70;background:none;border:none;cursor:pointer;
  font-family:var(--body);font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--white);
  display:flex;align-items:center;gap:.55rem;padding:.4rem 0}
.menu-btn:hover{color:var(--tan)}
.menu-btn .bars{display:inline-flex;flex-direction:column;gap:3px}
.menu-btn .bars span{width:20px;height:1.5px;background:currentColor;transition:.25s}
.menu-open .menu-btn .bars span:nth-child(1){transform:translateY(4.5px) rotate(45deg)}
.menu-open .menu-btn .bars span:nth-child(2){opacity:0}
.menu-open .menu-btn .bars span:nth-child(3){transform:translateY(-4.5px) rotate(-45deg)}


/* atelier full-bleed background variant */
.atelier-hero{position:relative;padding:7rem 0;background:
  linear-gradient(to right, rgba(12,12,11,.92) 0%, rgba(12,12,11,.78) 45%, rgba(12,12,11,.55) 100%),
  url('images/atelier-bg.jpg') center/cover no-repeat;background-attachment:scroll}
.atelier-hero-inner{max-width:1240px;margin:0 auto;padding:0 6vw;max-width:640px}
.atelier-hero-inner .eyebrow{display:block;margin-bottom:1.4rem}
.atelier-hero-inner h2{margin-bottom:1.8rem;max-width:16ch}
.atelier-hero-inner p{color:#d3cec6;margin-bottom:1.3rem;max-width:52ch;font-size:.95rem}
.atelier-hero-inner strong{color:var(--white);font-weight:500}
@media(max-width:700px){.atelier-hero{background-attachment:scroll}.atelier-hero-inner{max-width:none}}


/* ============ v2: nav bar, responsive splash, logo, faq, contact form ============ */

/* --- persistent top nav (desktop) --- */
.topnav{position:fixed;top:0;left:0;right:0;z-index:80;display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem 4vw;background:linear-gradient(to bottom, rgba(12,12,11,.94), rgba(12,12,11,.55) 70%, transparent);
  backdrop-filter:blur(4px)}
.topnav .brand{display:flex;align-items:center;gap:.8rem}
.topnav .brand img{height:44px;width:auto}
.topnav ul{display:flex;gap:2.2rem;list-style:none;align-items:center}
.topnav a{font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;color:var(--white);opacity:.82;
  padding-bottom:.25rem;border-bottom:1px dashed transparent;transition:.25s}
.topnav a:hover,.topnav a.active{opacity:1;color:var(--tan);border-bottom-color:var(--tan)}
body{padding-top:0}

/* --- mobile splash directory (shown only on small screens) --- */
.splash{position:fixed;inset:0;z-index:100;background:radial-gradient(ellipse 80% 60% at 50% 30%, #1b1c1a 0%, var(--black) 70%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .5s ease, visibility .5s ease}
.splash.hide{opacity:0;visibility:hidden;pointer-events:none}
.splash-sig{width:min(420px,74vw);margin-bottom:3rem;opacity:1}
.dir-list{list-style:none;text-align:center;display:flex;flex-direction:column;gap:1.9rem}
.dir-list a{font-family:var(--display);font-weight:400;font-size:clamp(1.6rem,6vw,2.3rem);letter-spacing:.14em;
  text-transform:uppercase;color:var(--white);transition:color .25s}
.dir-list a:hover{color:var(--tan)}
.dir-sub{display:block;font-family:var(--body);font-size:.6rem;letter-spacing:.34em;text-transform:uppercase;color:var(--tan);margin-top:.5rem}
.dir-social{display:flex;gap:1.6rem;margin-top:3rem}
.dir-social a{color:var(--faded)}.dir-social a:hover{color:var(--tan)}.dir-social svg{width:22px;height:22px}
.splash-close{position:absolute;top:1.4rem;right:6vw;background:none;border:none;color:var(--white);font-size:2rem;cursor:pointer;line-height:1;opacity:.8}
.splash-close:hover{opacity:1;color:var(--tan)}

/* menu button only relevant on mobile now */
.menu-btn{display:none}

/* --- FAQ --- */
.faq-wrap{max-width:820px;margin:0 auto;padding:9rem 6vw 6rem}
.faq-wrap h1{font-family:var(--display);font-weight:400;font-size:clamp(2.2rem,5vw,3.4rem);margin-bottom:.6rem}
.faq-lead{color:var(--faded);margin-bottom:3rem;max-width:52ch}
.faq-item{border-top:var(--stitch);padding:1.6rem 0}
.faq-item:last-child{border-bottom:var(--stitch)}
.faq-q{font-family:var(--display);font-size:1.2rem;color:var(--white);cursor:pointer;display:flex;justify-content:space-between;gap:1rem;align-items:baseline;list-style:none}
.faq-q::-webkit-details-marker{display:none}
.faq-q .mk{color:var(--tan);font-size:1.3rem;transition:transform .25s}
details[open] .faq-q .mk{transform:rotate(45deg)}
.faq-a{color:#c9c4bc;font-size:.95rem;line-height:1.75;padding-top:1rem;max-width:60ch}
.faq-a a{color:var(--tan);border-bottom:1px dashed var(--tan)}

/* --- contact form page --- */
.contact-wrap{max-width:640px;margin:0 auto;padding:9rem 6vw 6rem}
.contact-wrap .eyebrow{display:block;margin-bottom:1rem}
.contact-wrap h1{font-family:var(--display);font-weight:400;font-size:clamp(2.2rem,5vw,3.2rem);margin-bottom:.6rem}
.contact-wrap .lead{color:var(--faded);margin-bottom:2.6rem;max-width:48ch}

/* desktop homepage hero adjustments */
@media(min-width:900px){
  .splash{display:none !important}          /* no splash on desktop */
  .hero-img{background-position:center 20%}
  h1{font-size:clamp(3.4rem,6vw,6.5rem)}
  .grid{gap:2.4rem 2.8rem}
  .section-head{margin-bottom:4rem}
}
@media(max-width:899px){
  .topnav{display:none}                     /* mobile uses splash + menu button */
  .menu-btn{display:flex;position:fixed;top:1.1rem;right:5vw;z-index:70;background:none;border:none;cursor:pointer;
    font-family:var(--body);font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--white);align-items:center;gap:.55rem}
  .menu-btn .bars{display:inline-flex;flex-direction:column;gap:3px}
  .menu-btn .bars span{width:20px;height:1.5px;background:currentColor}
}

/* --- gallery --- */
.gallery-sec{padding:9rem 0 6rem}
.gal-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem}
.gal-item{position:relative;overflow:hidden;background:var(--char)}
.gal-item img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform .6s ease}
.gal-item:hover img{transform:scale(1.03)}
.gal-item figcaption{position:absolute;left:0;right:0;bottom:0;padding:1rem 1.1rem;
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--white);
  background:linear-gradient(to top, rgba(12,12,11,.85), transparent);opacity:0;transition:opacity .3s}
.gal-item:hover figcaption{opacity:1}
@media(min-width:900px){.gal-grid{grid-template-columns:repeat(3,1fr);gap:2rem}}

/* --- gallery lightbox --- */
.gal-item{cursor:zoom-in}
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(8,8,7,.94);display:none;
  align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.lightbox.open{display:flex}
.lb-img{max-width:90vw;max-height:88vh;object-fit:contain;box-shadow:0 20px 60px rgba(0,0,0,.6);
  animation:lbIn .25s ease}
@keyframes lbIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.lb-close,.lb-prev,.lb-next{position:fixed;background:none;border:none;color:var(--white);
  cursor:pointer;z-index:201;transition:color .2s;line-height:1}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{color:var(--tan)}
.lb-close{top:1.4rem;right:2rem;font-size:2.6rem}
.lb-prev,.lb-next{top:50%;transform:translateY(-50%);font-size:3.4rem;padding:0 1.4rem}
.lb-prev{left:1rem}.lb-next{right:1rem}
@media(max-width:700px){
  .lb-prev,.lb-next{font-size:2.6rem;padding:0 .6rem}
  .lb-close{top:1rem;right:1.2rem}
}
