@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;1,600&family=Josefin+Sans:wght@200;300;400;500&family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&display=swap');

:root {
  --black:       #080705;
  --dark:        #0f0e0b;
  --charcoal:    #181611;
  --brown:       #232019;
  --cream:       #f3eadb;
  --cream-muted: #d9cdb6;
  --navy:        #0a1826;
  --copper:      #b5712c;
  --copper-lt:   #ce8f50;
  --copper-pale: #c9a87a;
  --amber:       #e09040;
  --body-text:   #bfb39a;
  --dim:         #766a57;
  --dimmer:      #3e352a;
  --border:      rgba(181,113,44,.22);
  --border-dim:  rgba(181,113,44,.10);
  --ff-d: 'Cormorant Garamond', Georgia, serif;
  --ff-b: 'EB Garamond', Georgia, serif;
  --ff-u: 'Josefin Sans', sans-serif;
  --nav-h: 76px;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px;-webkit-font-smoothing:antialiased}
body{background:var(--black);color:var(--cream);font-family:var(--ff-b);font-size:1.0625rem;line-height:1.8;overflow-x:hidden}
/* FIX: removed height:100% and object-fit:cover from global img — these only belong inside specific cover containers */
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer}

/* Grain overlay */
body::after{content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.03}

/* ── NAV ── */
.nav{
  position:fixed;top:0;left:0;width:100%;z-index:800;
  height:var(--nav-h);padding:0 3.5rem;
  display:flex;align-items:center;justify-content:space-between;
  /* FIX: gradient ensures logo/links always readable over hero images */
  background:linear-gradient(to bottom,rgba(8,7,5,.8) 0%,transparent 100%);
  border-bottom:1px solid transparent;
  transition:background .4s,border-color .4s;
}
.nav.scrolled{background:rgba(8,7,5,.96);backdrop-filter:blur(14px);border-bottom-color:var(--border-dim)}
/* FIX: display:flex on nav-logo so it behaves correctly as flex child in nav row */
.nav-logo{font-family:var(--ff-d);font-size:1.45rem;font-weight:500;letter-spacing:.06em;color:var(--cream);white-space:nowrap;display:inline-flex;align-items:center;gap:.15em}
.nav-logo span{color:var(--copper)}
.nav-links{display:flex;gap:2rem;list-style:none;align-items:center}
.nav-links a{font-family:var(--ff-u);font-size:.6rem;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--cream-muted);transition:color .3s;white-space:nowrap;padding-bottom:2px;border-bottom:1px solid transparent}
.nav-links a:hover{color:var(--copper-lt)}
.nav-links a.current{color:var(--copper);border-bottom-color:var(--copper)}
.nav-cta{font-family:var(--ff-u);font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--black);background:var(--copper);padding:.65rem 1.5rem;transition:background .3s,transform .2s;border:none;white-space:nowrap;display:inline-block}
.nav-cta:hover{background:var(--copper-lt);transform:translateY(-1px)}

/* Hamburger */
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;padding:4px}
.hamburger span{display:block;width:24px;height:1px;background:var(--cream);transition:transform .35s,opacity .35s}
.hamburger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* FIX: mob-menu z-index raised to 850 so it covers the nav (800) */
.mob-menu{position:fixed;inset:0;z-index:850;background:rgba(8,7,5,.98);backdrop-filter:blur(12px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.2rem;
  transform:translateX(100%);transition:transform .45s cubic-bezier(.4,0,.2,1);pointer-events:none}
.mob-menu.open{transform:translateX(0);pointer-events:all}
.mob-menu a{font-family:var(--ff-d);font-size:2.2rem;font-weight:300;color:var(--cream-muted);transition:color .3s;text-align:center}
.mob-menu a:hover{color:var(--copper-lt)}
.mob-menu .nav-cta{font-size:.68rem;margin-top:.5rem;padding:.9rem 2.2rem}

/* ── UTILITIES ── */
.eyebrow{display:block;font-family:var(--ff-u);font-size:.58rem;letter-spacing:.32em;text-transform:uppercase;color:var(--copper);margin-bottom:1rem}
.sec-title{font-family:var(--ff-d);font-size:clamp(2.4rem,4.5vw,4rem);font-weight:300;line-height:1.08;color:var(--cream)}
.sec-title em{font-style:italic;color:var(--copper-pale)}
.rule{width:52px;height:1px;background:var(--copper);opacity:.55;margin:1.8rem 0}
.btn{display:inline-block;font-family:var(--ff-u);font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;padding:.95rem 2.1rem;border:none;cursor:pointer;transition:background .3s,color .3s,transform .2s}
.btn-fill{color:var(--black);background:var(--copper)}
.btn-fill:hover{background:var(--copper-lt);transform:translateY(-2px)}
.btn-ghost{color:var(--copper-pale);background:transparent;border:1px solid var(--copper)}
.btn-ghost:hover{background:var(--copper);color:var(--black);transform:translateY(-2px)}

/* Scroll reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .75s cubic-bezier(0,0,.2,1),transform .75s cubic-bezier(0,0,.2,1)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-d1{transition-delay:.12s}
.reveal-d2{transition-delay:.24s}
.reveal-d3{transition-delay:.36s}
.reveal-d4{transition-delay:.48s}

/* ── PAGE HEADER (inner pages) ── */
/* FIX: use calc(var(--nav-h) + ...) for padding-top instead of a fragile spacer div */
.ph{min-height:62vh;display:flex;align-items:flex-end;padding:calc(var(--nav-h) + 4rem) 4rem 4.5rem;position:relative;overflow:hidden}
.ph-img{position:absolute;inset:0}
/* FIX: img inside .ph-img needs explicit fill rules — not inherited from broken global */
.ph-img img{width:100%;height:100%;object-fit:cover;object-position:center}
.ph-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,7,5,.92) 0%,rgba(8,7,5,.45) 60%,rgba(8,7,5,.2) 100%)}
.ph-content{position:relative;z-index:2;max-width:760px}
.ph h1{font-family:var(--ff-d);font-size:clamp(3rem,5.5vw,5.5rem);font-weight:300;line-height:1.05;color:var(--cream);margin-top:.6rem}
.ph h1 em{font-style:italic;color:var(--copper-pale)}
.ph p{margin-top:1.2rem;font-size:1.1rem;color:var(--body-text);line-height:1.85;max-width:540px}

/* ── FOOTER ── */
.footer{background:var(--dark);border-top:1px solid var(--border-dim);padding:5rem 4rem 2.5rem}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;padding-bottom:3rem;margin-bottom:2rem;border-bottom:1px solid var(--border-dim)}
.footer-logo{font-family:var(--ff-d);font-size:1.35rem;font-weight:500;letter-spacing:.06em;margin-bottom:1rem;display:block;color:var(--cream)}
.footer-logo span{color:var(--copper)}
.footer-brand p{font-size:.9rem;color:var(--dim);line-height:1.85;max-width:280px}
.footer-col h4{font-family:var(--ff-u);font-size:.56rem;letter-spacing:.28em;text-transform:uppercase;color:var(--copper);margin-bottom:1.2rem}
.footer-col ul{list-style:none}
.footer-col ul li{margin-bottom:.55rem}
.footer-col ul li a{font-family:var(--ff-u);font-size:.68rem;letter-spacing:.08em;color:var(--dim);transition:color .3s}
.footer-col ul li a:hover{color:var(--copper-pale)}
.footer-col p{font-size:.88rem;color:var(--dim);line-height:1.9}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.footer-bottom p{font-family:var(--ff-u);font-size:.58rem;letter-spacing:.12em;color:var(--dimmer)}

/* ── SHARED FORM ── */
.fg{margin-bottom:1.4rem}
.fg label{display:block;font-family:var(--ff-u);font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--copper);margin-bottom:.55rem}
.fg input,.fg select,.fg textarea{width:100%;background:var(--charcoal);border:1px solid var(--border-dim);color:var(--cream);padding:.9rem 1.15rem;font-family:var(--ff-b);font-size:.98rem;transition:border-color .3s;outline:none;-webkit-appearance:none;appearance:none}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--copper)}
.fg textarea{resize:vertical;min-height:110px}
.fg select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23b5712c' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.5rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-success{display:none;text-align:center;padding:3rem 1rem}
.form-success-icon{font-size:3rem;display:block;margin-bottom:1.5rem}
.form-success h3{font-family:var(--ff-d);font-size:1.8rem;font-weight:300;color:var(--cream);margin-bottom:.8rem}
.form-success p{color:var(--body-text)}

/* ── SHARED MENU ITEM ── */
.mi{display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:baseline;padding:1.35rem 0;border-bottom:1px solid var(--border-dim);transition:padding-left .3s}
.mi:hover{padding-left:.5rem}
.mi:last-child{border-bottom:none}
.mi-name{font-family:var(--ff-d);font-size:1.2rem;color:var(--cream);margin-bottom:.2rem}
.mi-desc{font-size:.88rem;color:var(--dim);font-style:italic;line-height:1.65}
.mi-price{font-family:var(--ff-u);font-size:.68rem;letter-spacing:.1em;color:var(--copper-pale);white-space:nowrap}

/* ── RESPONSIVE ── */
@media(max-width:1080px){
  .nav{padding:0 2rem}
  .nav-links,.nav-cta{display:none}
  .hamburger{display:flex}
  .footer{padding:4rem 2.5rem 2rem}
  .footer-grid{grid-template-columns:1fr 1fr;gap:2rem}
  .ph{padding:calc(var(--nav-h) + 3rem) 2.5rem 3rem;min-height:50vh}
}
@media(max-width:600px){
  .nav{padding:0 1.5rem}
  .footer{padding:3rem 1.5rem 2rem}
  .footer-grid{grid-template-columns:1fr}
  .ph{padding:calc(var(--nav-h) + 2rem) 1.5rem 2.5rem}
  .form-row{grid-template-columns:1fr}
}