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

:root {
  --g       : #1A4A3A;
  --g2      : #225040;
  --g-pale  : #EAF2EE;
  --g-wash  : #F2F7F5;
  --gold    : #B0893A;
  --gold-lt : #C9A85C;
  --gold-pale:#F8F2E6;
  --ivory   : #FDFBF7;
  --cream   : #F4EFE6;
  --ink     : #0C0A08;
  --char    : #252220;
  --mid     : #5A5248;
  --muted   : #9A9088;
  --nav-h   : 76px;
  --ff-d    : 'Cormorant Garamond', Georgia, serif;
  --ff-b    : 'Jost', system-ui, sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-size-adjust:100%;}
body{background:var(--ivory);color:var(--char);font-family:var(--ff-b);font-weight:300;overflow-x:hidden;line-height:1.6;}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;}
::-webkit-scrollbar{width:4px;}::-webkit-scrollbar-track{background:var(--cream);}::-webkit-scrollbar-thumb{background:var(--g);}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}

/* ══════════════════════════════════════════
   HEADER — scroll-hide, transparent → frosted
   Layout: [social-left] [logo-center] [nav-right]
══════════════════════════════════════════ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 800;
  height: var(--nav-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 44px;
  transition: transform .4s cubic-bezier(.4,0,.2,1), background .35s, box-shadow .35s;
}
.site-header.scrolled {
  background: rgba(253,251,247,.96);
  backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 rgba(0,0,0,.07);
}
.site-header.nav-hidden { transform: translateY(-100%); }

/* Social icons — left col */
.nav-left {
  display: flex; align-items: center; gap: 18px; justify-self: start;
}
.nav-soc { color: rgba(255,255,255,.8); display: flex; transition: color .25s, transform .25s; }
.nav-soc:hover { color: #fff; transform: scale(1.18); }
.site-header.scrolled .nav-soc { color: rgba(37,34,32,.65); }
.site-header.scrolled .nav-soc:hover { color: var(--char); }
.nav-soc.wa:hover { color: #25D366; }
.nav-soc.ig:hover { color: var(--gold-lt); }

/* Logo — centre col */
.nav-logo { justify-self: center; display: flex; align-items: center; }
.nav-logo img {
  height: 76px; width: auto; object-fit: contain;
  /* Logo is white on black — invert makes it visible on both dark/light */
  filter: none;
  transition: opacity .25s;
}
.site-header.scrolled .nav-logo img {
  content: url("images/logo-full.png");
}
.nav-logo:hover img { opacity: .75; }

/* Nav links — right col */
.nav-right {
  display: flex; align-items: center; gap: 32px; justify-self: end;
}
.nav-right a {
  font-size: 10px; letter-spacing: .28em; text-transform: uppercase; font-weight: 400;
  color: rgba(255,255,255,.8); transition: color .25s; position: relative; padding-bottom: 2px;
}
.site-header.scrolled .nav-right a { color: rgba(37,34,32,.7); }
.nav-right a::after {
  content: ''; position: absolute; left: 0; bottom: -2px; right: 0;
  height: 1px; background: var(--gold-lt); transform: scaleX(0);
  transition: transform .3s; transform-origin: left;
}
.nav-right a:hover, .nav-right a.nav-act { color: #fff; }
.site-header.scrolled .nav-right a:hover, .site-header.scrolled .nav-right a.nav-act { color: var(--char); }
.nav-right a:hover::after, .nav-right a.nav-act::after { transform: scaleX(1); }

/* ══════════════════════════════════════════
   MARQUEE
══════════════════════════════════════════ */
.marquee{overflow:hidden;white-space:nowrap;border-top:1px solid rgba(176,137,58,.18);border-bottom:1px solid rgba(176,137,58,.18);padding:12px 0;background:var(--gold-pale);}
.marquee-in{display:inline-flex;animation:tick 46s linear infinite;}
.m-item{font-family:var(--ff-d);font-size:15px;font-style:italic;color:var(--g);padding:0 28px;letter-spacing:.06em;}
.m-dot{font-style:normal;color:var(--gold);}
@keyframes tick{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ══════════════════════════════════════════
   TYPOGRAPHY
══════════════════════════════════════════ */
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:var(--ff-b);font-size:9.5px;letter-spacing:.45em;text-transform:uppercase;color:var(--g);font-weight:400;}
.eyebrow::before,.eyebrow::after{content:'';width:22px;height:1px;background:currentColor;opacity:.4;}
.eyebrow.c{display:flex;justify-content:center;}
.eyebrow.gold{color:var(--gold);}
.eyebrow.lt{color:var(--gold-lt);}
.eyebrow.lt::before,.eyebrow.lt::after{opacity:.35;}
.display{font-family:var(--ff-d);font-size:clamp(34px,5vw,64px);font-weight:300;color:var(--ink);line-height:1.06;}
.display em{font-style:italic;color:var(--g);}
.display.lgt{color:#fff;}.display.lgt em{color:var(--gold-lt);}

/* ══════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--ff-b);font-size:10px;letter-spacing:.3em;text-transform:uppercase;font-weight:400;padding:14px 36px;transition:all .3s;cursor:pointer;border:none;}
.btn-dk{background:var(--g);color:#fff;}.btn-dk:hover{background:var(--g2);}
.btn-g{background:var(--g);color:#fff;}.btn-g:hover{background:var(--g2);}
.btn-ol{background:transparent;color:var(--ink);border:1px solid rgba(0,0,0,.18);}.btn-ol:hover{border-color:var(--g);color:var(--g);}
.btn-ol-lt{background:transparent;color:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.28);}.btn-ol-lt:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.55);color:#fff;}
.btn-gold{background:var(--gold);color:#fff;}.btn-gold:hover{background:var(--gold-lt);}

/* ══════════════════════════════════════════
   PRODUCT CARD
══════════════════════════════════════════ */
.card{background:#fff;border:1px solid rgba(0,0,0,.06);cursor:pointer;transition:box-shadow .35s,transform .35s;position:relative;overflow:hidden;}
.card:hover{box-shadow:0 14px 44px rgba(0,0,0,.1);transform:translateY(-4px);}
.card-media{position:relative;overflow:hidden;background:var(--g-wash);aspect-ratio:1/1;}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.25,.46,.45,.94),opacity .4s;}
.img-alt{position:absolute;inset:0;opacity:0;transition:opacity .5s;}
.card:hover .img-alt{opacity:1;}.card:hover .img-main{opacity:0;}
.card:hover .card-media img{transform:scale(1.07);}
.card-ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(12,10,8,.52) 0%,transparent 52%);opacity:0;transition:opacity .35s;display:flex;align-items:flex-end;justify-content:center;padding-bottom:18px;}
.card:hover .card-ov{opacity:1;}
.card-btn{background:rgba(253,251,247,.96);color:var(--g);padding:10px 22px;font-family:var(--ff-b);font-size:9px;letter-spacing:.28em;text-transform:uppercase;font-weight:500;transform:translateY(6px);opacity:0;transition:all .3s;border:none;cursor:pointer;}
.card:hover .card-btn{opacity:1;transform:translateY(0);}
.card-info{padding:16px 16px 20px;border-top:1px solid rgba(0,0,0,.05);}
.card-coll{font-size:9px;letter-spacing:.32em;text-transform:uppercase;color:var(--g);font-weight:400;margin-bottom:5px;}
.card-name{font-family:var(--ff-d);font-size:20px;font-weight:400;color:var(--ink);margin-bottom:2px;line-height:1.2;}
.card-type{font-size:11px;color:var(--muted);letter-spacing:.06em;}
.card-price{margin-top:10px;font-family:var(--ff-d);font-size:16px;color:var(--char);}
.card-price.rq{font-family:var(--ff-b);font-size:9px;letter-spacing:.25em;text-transform:uppercase;color:var(--gold);}

/* ══════════════════════════════════════════
   MODAL
══════════════════════════════════════════ */
/* ── MODAL ── */
.modal-bg {
  position: fixed; inset: 0; background: rgba(0,0,0,.78);
  z-index: 1000; display: flex; align-items: center; justify-content: center;
  padding: 20px; opacity: 0; pointer-events: none;
  transition: opacity .3s; backdrop-filter: blur(10px);
}
.modal-bg.open { opacity: 1; pointer-events: all; }

.modal-box {
  background: var(--ivory);
  max-width: 920px; width: 100%; max-height: 92vh;
  display: grid; grid-template-columns: 1.05fr 1fr;
  overflow: hidden;
  transform: scale(.96) translateY(18px);
  transition: transform .38s cubic-bezier(.34,1.56,.64,1);
}
.modal-bg.open .modal-box { transform: scale(1) translateY(0); }

/* ── LEFT: slider ── */
.modal-slider {
  position: relative;
  background: var(--g-wash);
  overflow: hidden;
  /* height controlled by right panel content */
  min-height: 420px;
}

/* Track holds all slides side by side */
.modal-track {
  display: flex;
  height: 100%;
  transition: transform .42s cubic-bezier(.77,0,.175,1);
  will-change: transform;
}
.modal-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  min-height: 420px;
}
.modal-slide img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* Prev / next arrows */
.modal-arr {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 5; width: 36px; height: 36px;
  background: rgba(255,255,255,.88); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--char); font-size: 15px;
  opacity: 0; transition: opacity .25s, background .2s;
}
.modal-arr:hover { background: #fff; }
.modal-slider:hover .modal-arr { opacity: 1; }
.modal-arr.prev { left: 12px; }
.modal-arr.next { right: 12px; }

/* Dot indicators */
.modal-dots {
  position: absolute; bottom: 14px; left: 0; right: 0;
  display: flex; justify-content: center; gap: 6px; z-index: 5;
}
.modal-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255,255,255,.4); border: none; cursor: pointer;
  padding: 0; transition: all .25s;
}
.modal-dot.on {
  background: #fff; width: 16px; border-radius: 3px;
}

/* Single-image: hide controls */
.modal-slider.single .modal-arr,
.modal-slider.single .modal-dots { display: none; }

/* ── RIGHT: detail ── */
.modal-detail {
  padding: 36px 32px;
  display: flex; flex-direction: column; gap: 12px;
  position: relative; overflow-y: auto;
}
.modal-x {
  position: absolute; top: 14px; right: 14px;
  color: var(--muted); width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(0,0,0,.1); transition: all .2s;
  background: none; cursor: pointer;
}
.modal-x:hover { border-color: var(--g); color: var(--g); }
.modal-tag   { font-size: 9px; letter-spacing: .4em; text-transform: uppercase; color: var(--g); font-weight: 400; }
.modal-title { font-family: var(--ff-d); font-size: 30px; font-weight: 300; color: var(--ink); line-height: 1.1; }
.modal-sub   { font-size: 12px; color: var(--muted); letter-spacing: .1em; text-transform: capitalize; }
.modal-rule  { height: 1px; background: rgba(0,0,0,.08); }
.modal-desc  { font-size: 13.5px; color: var(--mid); line-height: 1.85; }
.modal-plbl  { font-size: 9px; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.modal-price { font-family: var(--ff-d); font-size: 24px; color: var(--char); }
.modal-price.rq { font-family: var(--ff-b); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.modal-avail { font-size: 12px; color: var(--g); }
.modal-wa {
  width: 100%; padding: 15px; margin-top: auto;
  background: var(--g); color: #fff;
  font-family: var(--ff-b); font-size: 10px; letter-spacing: .3em;
  text-transform: uppercase; font-weight: 400;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: background .3s; border: none; cursor: pointer;
}
.modal-wa:hover { background: var(--g2); }

/* ══════════════════════════════════════════
   FILTER BAR
══════════════════════════════════════════ */
.filter-bar{display:flex;gap:0;overflow-x:auto;border-bottom:1px solid rgba(0,0,0,.08);padding:0 56px;scrollbar-width:none;}
.filter-bar::-webkit-scrollbar{display:none;}
.fpill{padding:15px 22px;background:transparent;border:none;border-bottom:2px solid transparent;color:var(--muted);font-family:var(--ff-b);font-size:10px;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;white-space:nowrap;transition:all .25s;font-weight:400;margin-bottom:-1px;}
.fpill:hover{color:var(--g);}.fpill.on{color:var(--g);border-bottom-color:var(--g);}

/* ══════════════════════════════════════════
   PAGE HERO (inner pages)
══════════════════════════════════════════ */
.page-hero{background:var(--g);padding:calc(var(--nav-h) + 72px) 56px 72px;position:relative;overflow:hidden;}
.page-hero::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 50% 50%,rgba(26,74,58,.18) 0%,transparent 70%);pointer-events:none;}
.page-hero .eyebrow{color:var(--gold-lt);}.page-hero .display{color:#fff;}.page-hero .display em{color:var(--gold-lt);}
.page-hero-sub{color:rgba(255,255,255,.44);font-size:14px;line-height:1.8;max-width:480px;margin-top:14px;position:relative;z-index:1;}

/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */
.site-footer{background:var(--g);color:rgba(255,255,255,.5);padding:72px 56px 36px;}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:48px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:28px;}
.footer-logo{height:56px;width:auto;filter:brightness(0) invert(1);opacity:.7;margin-bottom:16px;}
.footer-brand p{font-size:13px;line-height:1.8;max-width:240px;}
.footer-soc-row{display:flex;gap:14px;margin-top:18px;flex-wrap:wrap;}
.fsoc{display:flex;align-items:center;gap:7px;font-size:10px;letter-spacing:.15em;text-transform:uppercase;font-weight:300;color:rgba(255,255,255,.28);transition:color .25s;}
.fsoc span{font-size:9.5px;}.fsoc:hover{color:rgba(255,255,255,.7);}
.footer-col h5{font-size:9px;letter-spacing:.38em;text-transform:uppercase;color:var(--gold-lt);margin-bottom:16px;font-weight:400;}
.footer-col a{display:block;font-size:13px;line-height:2.1;color:rgba(255,255,255,.38);transition:color .25s;}
.footer-col a:hover{color:rgba(255,255,255,.76);}
.footer-hours p{font-size:12px;line-height:2;margin-bottom:4px;}
.footer-hours .dy{color:rgba(255,255,255,.5);font-weight:400;}
.footer-bot{display:flex;justify-content:space-between;font-size:11px;opacity:.28;flex-wrap:wrap;gap:8px;}

/* ══════════════════════════════════════════
   UTILITIES
══════════════════════════════════════════ */
.container{max-width:1240px;margin:0 auto;padding:0 56px;}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:3px;}
.tc{text-align:center;}
@keyframes rise{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:translateY(0);}}
.rise{animation:rise .6s ease both;}

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media(max-width:900px){
  .site-header{padding:0 20px;}
  .nav-right{gap:20px;}
  .nav-right a{font-size:9.5px;letter-spacing:.2em;}
  .container{padding:0 24px;}
  .filter-bar{padding:0 20px;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px;}
  .site-footer{padding:48px 24px 28px;}
  .footer-bot{flex-direction:column;text-align:center;}
  .g4{grid-template-columns:repeat(2,1fr);gap:14px;}
  .g2{grid-template-columns:1fr;}
  .modal-box{grid-template-columns:1fr;}
  .modal-slider{min-height:56vw;} .modal-slide{min-height:56vw;}
  .modal-detail{padding:24px 20px;}
  .page-hero{padding:calc(var(--nav-h) + 40px) 24px 48px;}
}
@media(max-width:640px){
  .nav-right{display:none;} /* hide on very small — socials still visible */
  .g4{grid-template-columns:repeat(2,1fr);gap:10px;}
  .footer-grid{grid-template-columns:1fr;}
  .fpill{padding:12px 14px;font-size:9.5px;}
  .modal-box{max-height:95vh;}
}

/* ══════════════════════════════════════════════════════════
   MOBILE HAMBURGER + FULLSCREEN OVERLAY NAV
   ══════════════════════════════════════════════════════════ */

/* Burger button — hidden on desktop, visible on mobile */
.nav-burger {
  display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; padding: 6px;
  background: none; border: none; cursor: pointer;
  justify-self: end;
}
.nav-burger span {
  display: block; width: 22px; height: 1.5px;
  background: rgba(255,255,255,.9);
  transition: transform .32s, opacity .25s, width .25s, background .35s;
  transform-origin: center;
}
.site-header.scrolled .nav-burger span {
  background: rgba(37,34,32,.85);
}
/* Animate to X when open */
.nav-burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; width: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Fullscreen overlay */
.mob-overlay {
  position: fixed; inset: 0; z-index: 999;
  background: var(--ivory);
  display: flex; flex-direction: column;
  padding: 0 32px 40px;
  transform: translateX(100%);
  transition: transform .42s cubic-bezier(.77,0,.175,1);
  overflow-y: auto;
}
.mob-overlay.open { transform: translateX(0); }

/* Close X button inside overlay */
.mob-close {
  position: absolute; top: 22px; right: 22px;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.1);
  color: rgba(37,34,32,.5);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .2s;
}
.mob-close:hover { background: rgba(0,0,0,.08); color: var(--char); }

/* Logo in overlay */
.mob-logo {
  padding-top: 28px; margin-bottom: 48px;
}
.mob-logo img {
  height: 40px; width: auto;
  filter: none; opacity: .9;
}

/* Nav links */
.mob-nav {
  flex: 1; display: flex; flex-direction: column; gap: 2px;
}
.mob-nav a {
  font-family: var(--ff-d);
  font-size: clamp(32px, 9vw, 48px); font-weight: 300;
  color: rgba(37,34,32,.3); letter-spacing: .02em;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,.06);
  transition: color .25s, padding-left .25s;
  opacity: 0; /* animated in when overlay opens */
}
.mob-overlay.open .mob-nav a {
  animation: mobLinkIn .45s ease both;
}
@keyframes mobLinkIn {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
.mob-nav a:hover, .mob-nav a.mob-act { color: var(--char); padding-left: 10px; }

/* Social + hours + phone at bottom of overlay */
.mob-footer {
  margin-top: 36px; padding-top: 24px;
  border-top: 1px solid rgba(0,0,0,.08);
  display: flex; flex-direction: column; gap: 18px;
}
.mob-soc {
  display: flex; gap: 20px;
}
.mob-soc a {
  display: flex; align-items: center; gap: 8px;
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase; font-weight: 300;
  color: rgba(37,34,32,.38); transition: color .25s;
}
.mob-soc a:hover { color: var(--char); }
.mob-hours {
  font-size: 12px; color: rgba(37,34,32,.38); line-height: 1.9;
}
.mob-hours b { color: rgba(37,34,32,.65); font-weight: 400; }
.mob-tel {
  font-size: 13px; color: rgba(37,34,32,.45); letter-spacing: .06em;
  transition: color .25s;
}
.mob-tel:hover { color: var(--gold-lt); }

/* ── RESPONSIVE: show burger, hide desktop nav ── */
@media (max-width: 760px) {
  .nav-right  { display: none !important; }
  .nav-left   { display: none !important; }
  .nav-burger { display: flex; }

  /* On mobile, flex layout: logo left, burger right */
  .site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
  }
  .nav-logo { justify-self: auto; }
  .nav-logo img { height: 48px; }
}

@media (min-width: 761px) {
  .nav-burger  { display: none !important; }
  .mob-overlay { display: none !important; }
}