/* ===== Cinder & Sage — shared styles ===== */
:root{
  --copper:#b06a3b;
  --copper-bright:#c47a45;
  --sage:#7a855f;
  --sage-deep:#5c6647;
  --charcoal:#242320;
  --ink:#1b1a17;
  --cream:#f6f1e7;
  --cream-2:#efe8d9;
  --paper:#fbf8f1;
  --muted:#8a8375;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Jost',sans-serif;color:var(--charcoal);background:var(--paper);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:'Cormorant Garamond',serif;font-weight:500;line-height:1.1;letter-spacing:.5px}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:1200px;margin:0 auto;padding:0 28px}
.eyebrow{font-family:'Jost',sans-serif;font-weight:500;font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--copper);display:inline-block;margin-bottom:18px}
.btn{display:inline-block;font-family:'Jost',sans-serif;font-weight:500;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;padding:16px 34px;border:1px solid var(--copper);color:var(--copper);background:transparent;cursor:pointer;transition:.35s ease;border-radius:2px}
.btn:hover{background:var(--copper);color:var(--cream)}
.btn-solid{background:var(--copper);color:var(--cream);border-color:var(--copper)}
.btn-solid:hover{background:var(--copper-bright);border-color:var(--copper-bright)}
.btn-light{border-color:rgba(246,241,231,.6);color:var(--cream)}
.btn-light:hover{background:var(--cream);color:var(--charcoal);border-color:var(--cream)}

/* NAV */
header{position:fixed;top:0;left:0;right:0;z-index:100;transition:.4s ease}
header.hidden{transform:translateY(-100%)}
header .bar{display:flex;align-items:center;justify-content:space-between;padding:20px 28px;transition:.4s ease}
header .logo{height:44px;transition:.4s ease}
header nav{display:flex;gap:34px;align-items:center}
header nav a{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;transition:.25s;position:relative}
header .nav-reserve{border:1px solid var(--copper);padding:11px 22px;border-radius:2px}
header .menu-btn{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px}
header .menu-btn span{width:26px;height:2px;transition:.3s}

/* Transparent (over hero) variant */
header.transparent .logo{filter:brightness(0) invert(1)}
header.transparent nav a{color:var(--cream);opacity:.9}
header.transparent nav a:hover{opacity:1;color:var(--copper-bright)}
header.transparent .nav-reserve{border-color:rgba(246,241,231,.5)}
header.transparent .menu-btn span{background:var(--cream)}

/* Solid (default for sub-pages + scrolled) */
header.solid,header.transparent.scrolled{background:var(--paper);box-shadow:0 6px 30px rgba(30,25,20,.08)}
header.solid .bar,header.transparent.scrolled .bar{padding:12px 28px}
header.solid .logo,header.transparent.scrolled .logo{filter:none;height:38px}
header.solid nav a,header.transparent.scrolled nav a{color:var(--charcoal);opacity:1}
header.solid nav a:hover,header.transparent.scrolled nav a:hover{color:var(--copper)}
header.solid .nav-reserve,header.transparent.scrolled .nav-reserve{border-color:var(--copper);color:var(--copper)}
header nav a.active{color:var(--copper)}
header nav a.active:not(.nav-reserve)::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--copper)}
header.solid .menu-btn span,header.transparent.scrolled .menu-btn span{background:var(--charcoal)}

/* HERO (home) */
.hero{position:relative;height:100vh;min-height:640px;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--cream)}
.hero .bg{position:absolute;inset:0;background:url('https://images.unsplash.com/photo-1414235077428-338989a2e8c0?auto=format&fit=crop&w=1920&q=80') center/cover;transform:scale(1.05)}
.hero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,17,14,.55) 0%,rgba(20,17,14,.35) 40%,rgba(20,17,14,.78) 100%)}
.hero .inner{position:relative;z-index:2;max-width:820px;padding:0 24px}
.hero .inner .eyebrow{color:var(--copper-bright)}
.hero h1{font-size:clamp(3rem,8vw,6.4rem);font-weight:500;letter-spacing:1px;margin-bottom:8px}
.hero .sub{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(1.3rem,3vw,2rem);opacity:.92;margin-bottom:34px}
.hero .cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.scroll-hint{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:2;color:var(--cream);font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;opacity:.75;animation:float 2.6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}

/* PAGE HERO (sub-pages) */
.page-hero{position:relative;height:56vh;min-height:420px;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--cream)}
.page-hero .bg{position:absolute;inset:0;background-size:cover;background-position:center}
.page-hero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,17,14,.5),rgba(20,17,14,.72))}
.page-hero .inner{position:relative;z-index:2;max-width:760px;padding:120px 24px 0}
.page-hero .eyebrow{color:var(--copper-bright)}
.page-hero h1{font-size:clamp(2.6rem,6vw,4.6rem)}
.page-hero p{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(1.15rem,2.6vw,1.6rem);opacity:.92;margin-top:12px}

/* SECTION SHELL */
.band{padding:120px 0}
.center{text-align:center;max-width:760px;margin:0 auto}
.lede{font-family:'Cormorant Garamond',serif;font-size:clamp(1.6rem,3.4vw,2.5rem);line-height:1.35;color:var(--ink)}

/* SPLIT */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:70px;align-items:center}
.split.rev{grid-template-columns:1fr 1.05fr}
.split .imgcol{position:relative}
.split .imgcol img{width:100%;height:560px;object-fit:cover;border-radius:3px}
.split .imgcol .tag{position:absolute;bottom:-26px;left:-26px;background:var(--sage-deep);color:var(--cream);padding:24px 30px;max-width:230px;border-radius:3px}
.split .imgcol .tag .n{font-family:'Cormorant Garamond',serif;font-size:2.4rem;line-height:1.05}
.split .imgcol .tag .l{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;opacity:.85;margin-top:6px}
.story{background:var(--cream)}
.story h2{font-size:clamp(2.2rem,5vw,3.4rem);margin-bottom:22px}
.story p{color:#54503f;font-size:1.02rem;margin-bottom:18px}

/* VALUES */
.values{background:var(--charcoal);color:var(--cream)}
.values .eyebrow{color:var(--copper-bright)}
.values h2{font-size:clamp(2.2rem,5vw,3.4rem);color:var(--cream)}
.vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:46px;margin-top:64px}
.vcard{text-align:center}
.vcard .ic{width:60px;height:60px;margin:0 auto 22px;color:var(--copper-bright)}
.vcard h3{font-size:1.7rem;margin-bottom:12px;color:var(--cream)}
.vcard p{color:#c9c2b2;font-size:.96rem}

/* MENU */
.menu{background:var(--paper)}
.menu-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:20px;margin-bottom:56px}
.menu-head h2{font-size:clamp(2.2rem,5vw,3.4rem)}
.menu-head p{color:var(--muted);max-width:360px}
.mcols{display:grid;grid-template-columns:1fr 1fr;gap:56px 80px}
.mgroup h3{font-size:1.5rem;color:var(--sage-deep);padding-bottom:14px;margin-bottom:22px;border-bottom:1px solid #e3dccb;display:flex;align-items:center;gap:12px}
.mgroup h3 span{font-family:'Jost';font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--copper);border:1px solid var(--copper);padding:3px 9px;border-radius:20px;font-weight:500}
.item{display:flex;justify-content:space-between;gap:18px;margin-bottom:24px;align-items:baseline}
.item .nm{font-family:'Cormorant Garamond',serif;font-size:1.4rem;color:var(--ink)}
.item .ds{font-size:.86rem;color:var(--muted);margin-top:2px}
.item .dot{flex:1;border-bottom:1px dotted #cdc6b4;transform:translateY(-4px);margin:0 6px}
.item .pr{font-family:'Cormorant Garamond',serif;font-size:1.3rem;color:var(--copper)}
.menu-note{text-align:center;margin-top:56px;color:var(--muted);font-style:italic;font-family:'Cormorant Garamond',serif;font-size:1.15rem}

/* GALLERY */
.gallery{background:var(--cream-2)}
.ggrid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:220px;gap:14px}
.ggrid figure{overflow:hidden;border-radius:3px}
.ggrid img{width:100%;height:100%;object-fit:cover;transition:.7s ease}
.ggrid figure:hover img{transform:scale(1.08)}
.ggrid .tall{grid-row:span 2}
.ggrid .wide{grid-column:span 2}

/* FEATURE CARDS (home menu teaser) */
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:60px}
.fcard{background:var(--cream);border-radius:4px;overflow:hidden;border:1px solid #ece4d3}
.fcard img{width:100%;height:240px;object-fit:cover}
.fcard .body{padding:26px 26px 30px}
.fcard h3{font-size:1.6rem;margin-bottom:8px}
.fcard p{color:#54503f;font-size:.94rem}
.fcard .pr{color:var(--copper);font-family:'Cormorant Garamond',serif;font-size:1.3rem;margin-top:14px;display:inline-block}

/* EVENTS / CTA BANDS */
.events{background:var(--sage-deep);color:var(--cream)}
.events h2{font-size:clamp(2.2rem,5vw,3.2rem);color:var(--cream)}
.events .eyebrow{color:#d8c3a2}
.events p{color:#e4e6d8;margin-bottom:22px}
.events img{height:480px;object-fit:cover;border-radius:3px}
.events ul{list-style:none;margin:24px 0 30px}
.events li{padding:9px 0;border-bottom:1px solid rgba(246,241,231,.18);font-size:.98rem;display:flex;gap:12px;align-items:center}
.events li::before{content:"";width:6px;height:6px;background:var(--copper-bright);border-radius:50%;flex:none}
.cta-band{background:var(--charcoal);color:var(--cream);text-align:center}
.cta-band h2{font-size:clamp(2.2rem,5vw,3.6rem);color:var(--cream);margin-bottom:14px}
.cta-band p{color:#c9c2b2;max-width:520px;margin:0 auto 30px}

/* RESERVE / CONTACT */
.reserve{background:var(--paper)}
.reserve .grid{display:grid;grid-template-columns:1fr 1fr;gap:70px}
.reserve h2{font-size:clamp(2.2rem,5vw,3.4rem);margin-bottom:20px}
.info-row{display:flex;gap:16px;margin-bottom:26px;align-items:flex-start}
.info-row .ic{width:22px;height:22px;color:var(--copper);flex:none;margin-top:4px}
.info-row h4{font-family:'Jost';font-weight:600;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sage-deep);margin-bottom:4px}
.info-row p{color:#54503f;font-size:.98rem}
.form{background:var(--cream);padding:44px;border-radius:4px;border:1px solid #e7e0cf}
.form h3{font-size:1.9rem;margin-bottom:24px}
.field{margin-bottom:18px}
.field label{display:block;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:7px;font-weight:500}
.field input,.field select,.field textarea{width:100%;padding:13px 14px;border:1px solid #ddd4c1;background:var(--paper);font-family:'Jost';font-size:.95rem;color:var(--charcoal);border-radius:2px}
.field textarea{resize:vertical;min-height:90px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--copper)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form .btn-solid{width:100%;margin-top:6px}
.form-note{font-size:.78rem;color:var(--muted);text-align:center;margin-top:14px}
.map{width:100%;height:100%;min-height:300px;border:0;border-radius:4px;filter:grayscale(.2) contrast(1.05)}

/* FOOTER */
footer{background:var(--ink);color:#bcb4a2;padding:80px 0 34px}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:50px;margin-bottom:54px}
footer .logo{height:52px;filter:brightness(0) invert(1);margin-bottom:22px}
footer p{font-size:.92rem;line-height:1.8}
footer h5{font-family:'Jost';font-weight:600;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cream);margin-bottom:18px}
footer .fcol a{display:block;font-size:.92rem;padding:5px 0;transition:.2s}
footer .fcol a:hover{color:var(--copper-bright)}
.fbot{border-top:1px solid rgba(246,241,231,.12);padding-top:26px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.8rem;color:#8a8374}

/* REVEAL */
.reveal{opacity:0;transform:translateY(34px);transition:opacity 1s ease,transform 1s ease}
.reveal.in{opacity:1;transform:none}

/* RESPONSIVE */
@media(max-width:900px){
  .split,.split.rev,.reserve .grid,.events .split{grid-template-columns:1fr;gap:40px}
  .vgrid,.feat{grid-template-columns:1fr;gap:38px}
  .mcols{grid-template-columns:1fr;gap:40px}
  .split .imgcol img,.events img{height:400px}
  .ggrid{grid-template-columns:repeat(2,1fr);grid-auto-rows:180px}
  header .menu-btn{display:flex}
  /* Slide-out drawer nav */
  header nav{
    position:fixed;top:0;right:0;height:100dvh;width:min(84vw,340px);
    display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
    background:var(--paper);padding:92px 32px 40px;
    transform:translateX(100%);transition:transform .42s cubic-bezier(.4,0,.15,1);
    box-shadow:-24px 0 60px rgba(20,17,14,.3);z-index:110;overflow-y:auto}
  header nav.open{transform:translateX(0)}
  header nav a{color:var(--charcoal)!important;opacity:1;font-size:.82rem;letter-spacing:.22em;
    padding:19px 2px;border-bottom:1px solid #ece4d3;text-align:left}
  header nav a::before{display:none}
  header nav a.active{color:var(--copper)!important}
  header nav a.active::after{display:none}
  header nav a.nav-reserve{margin-top:28px;border:1px solid var(--copper);border-radius:2px;
    text-align:center;padding:16px 0;color:var(--copper)!important;letter-spacing:.2em}
  .band{padding:84px 0}

  /* Mobile centering: balance stacked content */
  .split > div:not(.imgcol){text-align:center}
  .split > div:not(.imgcol) .btn{margin-left:auto;margin-right:auto}
  .split .imgcol .tag{left:50%;bottom:20px;transform:translateX(-50%);text-align:center;max-width:260px}
  .menu-head{flex-direction:column;align-items:center;text-align:center}
  .menu-head p{margin:0 auto}
  .events ul{max-width:420px;margin-left:auto;margin-right:auto}
  .events li{justify-content:center}
  .reserve .grid > div:first-child{text-align:center}
  .info-row{flex-direction:column;align-items:center;text-align:center;gap:8px}
  .info-row .ic{margin-top:0}
  .form{text-align:left}
}
@media(max-width:560px){
  .frow{grid-template-columns:1fr}
  .ggrid{grid-template-columns:1fr;grid-auto-rows:220px}
  .fgrid{grid-template-columns:1fr;gap:34px}

  /* Center the footer on phones */
  footer{text-align:center}
  footer .logo{margin-left:auto;margin-right:auto}
  .fbot{flex-direction:column;justify-content:center;text-align:center;gap:8px}
}

/* ====================================================== */
/* =============== VISUAL ENHANCEMENTS =================== */
/* ====================================================== */

/* Grain overlay for depth on hero + page heroes */
.hero::before,.page-hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.38;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Cinematic hero: slow ken-burns zoom */
.hero .bg{animation:kenburns 20s ease-out forwards}
@keyframes kenburns{from{transform:scale(1.05)}to{transform:scale(1.18)}}

/* Cinematic hero: staggered entrance */
.hero .inner .eyebrow,.hero h1,.hero .sub,.hero .cta{opacity:0;transform:translateY(22px);animation:heroUp 1s cubic-bezier(.2,.7,.2,1) forwards}
.hero .inner .eyebrow{animation-delay:.25s}
.hero h1{animation-delay:.45s}
.hero .sub{animation-delay:.7s}
.hero .cta{animation-delay:.95s}
@keyframes heroUp{to{opacity:1;transform:none}}

/* Button shimmer sweep */
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-20deg);transition:left .6s ease;pointer-events:none}
.btn:hover::after{left:150%}

/* Nav hover underline */
header nav a:not(.nav-reserve)::before{content:"";position:absolute;left:0;bottom:-6px;height:1px;width:0;background:currentColor;transition:width .3s ease}
header nav a:not(.nav-reserve):hover::before{width:100%}
header .nav-reserve{transition:background .3s ease,color .3s ease}
header.solid .nav-reserve:hover,header.transparent.scrolled .nav-reserve:hover{background:var(--copper);color:var(--cream)}
header.transparent .nav-reserve:hover{background:var(--copper);color:var(--cream);border-color:var(--copper)}

/* Card & icon micro-interactions */
.fcard{transition:transform .45s ease,box-shadow .45s ease}
.fcard:hover{transform:translateY(-8px);box-shadow:0 26px 52px rgba(30,25,20,.16)}
.fcard img{transition:transform .8s ease}
.fcard:hover img{transform:scale(1.07)}
.vcard{transition:transform .45s ease}
.vcard:hover{transform:translateY(-6px)}
.vcard .ic{transition:transform .5s ease}
.vcard:hover .ic{transform:scale(1.12) rotate(-4deg)}
.info-row .ic{transition:transform .4s ease}
.info-row:hover .ic{transform:scale(1.12)}

/* Staggered reveal for grids */
.feat .fcard:nth-child(2),.vgrid .vcard:nth-child(2),.qgrid .qcard:nth-child(2){transition-delay:.12s}
.feat .fcard:nth-child(3),.vgrid .vcard:nth-child(3),.qgrid .qcard:nth-child(3){transition-delay:.24s}

/* Brand ornament (copper flame divider) */
.divider{display:flex;align-items:center;justify-content:center;gap:16px;max-width:190px;margin:0 auto 20px}
.divider::before,.divider::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,#d8c9b3)}
.divider svg{width:20px;height:24px;flex:none}
.values .divider::before,.values .divider::after{background:linear-gradient(90deg,transparent,rgba(196,122,69,.5))}
.events .divider::before,.events .divider::after,.cta-band .divider::before,.cta-band .divider::after{background:linear-gradient(90deg,transparent,rgba(216,195,162,.45))}

/* Press / featured-in bar */
.press{background:var(--cream);border-top:1px solid #e9e2d1;border-bottom:1px solid #e9e2d1}
.press .wrap{display:flex;align-items:center;justify-content:center;gap:20px 46px;flex-wrap:wrap;padding:30px 28px}
.press .lbl{font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
.press .name{font-family:'Cormorant Garamond',serif;font-size:1.3rem;color:var(--sage-deep);opacity:.8;transition:opacity .3s ease}
.press .name:hover{opacity:1}

/* Testimonials */
.quotes{background:var(--cream)}
.qgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:56px}
.qcard{background:var(--paper);border:1px solid #ece4d3;border-radius:4px;padding:38px 30px;text-align:center;transition:transform .45s ease,box-shadow .45s ease}
.qcard:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(30,25,20,.12)}
.qcard .stars{color:var(--copper);letter-spacing:4px;margin-bottom:16px;font-size:.9rem}
.qcard p{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.22rem;line-height:1.5;color:var(--ink);margin-bottom:18px}
.qcard .who{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

/* Full-bleed parallax photo break */
.photo-break{position:relative;height:62vh;min-height:420px;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--cream);background-attachment:fixed;background-size:cover;background-position:center}
.photo-break::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(20,17,14,.55),rgba(20,17,14,.62))}
.photo-break .q{position:relative;z-index:2;max-width:780px;padding:0 24px}
.photo-break .q p{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(1.6rem,3.6vw,2.7rem);line-height:1.35}
.photo-break .q .by{margin-top:18px;font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:var(--copper-bright)}

@media(max-width:900px){
  .qgrid{grid-template-columns:1fr}
  .photo-break{background-attachment:scroll}
  .press .wrap{gap:16px 26px}
}


/* Mobile drawer: backdrop, close button, body lock */
.nav-scrim{position:fixed;inset:0;background:rgba(20,17,14,.55);opacity:0;visibility:hidden;transition:opacity .42s ease,visibility .42s ease;z-index:90}
.nav-scrim.show{opacity:1;visibility:visible}
.nav-close{display:none;position:absolute;top:24px;right:26px;width:34px;height:34px;border:none;background:none;cursor:pointer;padding:0}
.nav-close::before,.nav-close::after{content:"";position:absolute;top:50%;left:4px;width:26px;height:2px;background:var(--charcoal);transition:background .2s ease}
.nav-close::before{transform:rotate(45deg)}
.nav-close::after{transform:rotate(-45deg)}
.nav-close:hover::before,.nav-close:hover::after{background:var(--copper)}
body.nav-open{overflow:hidden}
@media(max-width:900px){.nav-close{display:block}}