:root{
  --bg:#1f1a17;
  --bg-2:#2b2420;
  --tan:#d2b48c;
  --gold:#c8a96a;
  --bone:#efe9df;
  --ink:#13100e;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--bone);font-family:Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,sans-serif;scroll-behavior:smooth}
h1,h2,h3{font-family:'Playfair Display',serif;margin:0 0 .5rem 0;line-height:1.1}
p{line-height:1.7;color:#efe9dfcc}
a{color:var(--bone);text-decoration:none}

.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;

  /* restore layout so brand & nav sit on one row */
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: .6rem 1rem;
  background: linear-gradient(180deg,#000000b5,#00000020);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* push the nav to the far right on desktop */
.nav{
  display:flex;
  align-items:center;
  gap:1rem;
  margin-left:auto;
}

/* Push content below the fixed header (value set by JS) */
body{ padding-top: var(--header-h, 64px) }

/* Keep your anchor targets visible when clicked */
#services, #about, #gallery { scroll-margin-top: calc(var(--header-h, 64px) + 16px) }

.brand{display:flex;align-items:center;gap:.6rem;font-weight:800;letter-spacing:.03em}
.brand img{height:40px;width:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.nav{display:flex;align-items:center;gap:1rem}
.nav a{opacity:.9}
.nav a:hover{opacity:1}

.btn{
  display:inline-block;border:2px solid var(--tan);
  padding:.65rem 1rem;border-radius:999px;font-weight:700;letter-spacing:.02em;
  transition:.2s transform,.2s background,.2s color;
}
.btn:hover{transform:translateY(-1px)}
.btn.book{background:var(--tan);color:var(--ink);border-color:transparent}
.btn.book:hover{filter:brightness(1.05)}
.btn.ghost{background:transparent;color:var(--bone);border-color:#ffffff3a}
.btn.cta{background:var(--gold);border-color:transparent;color:var(--ink)}
.btn.large{font-size:1.1rem;padding:.85rem 1.4rem}

.hero{position:relative;min-height:88vh;display:grid;place-items:center;overflow:hidden}
.hero-media img, .hero-media source{width:100%;height:100%;object-fit:cover;display:block}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-overlay{position:absolute;inset:0;background:
  radial-gradient(80% 60% at 50% 20%,rgba(0,0,0,.1),transparent 60%),
  linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.75)),
  url('assets/grain.svg');}
.hero-content{position:relative;text-align:center;padding:2rem;max-width:950px;z-index:4}
.hero h1{font-size:clamp(2.2rem,6vw,4.5rem);text-shadow:0 8px 28px #000}
.hero p{font-size:clamp(1rem,2.3vw,1.25rem);margin:.5rem auto 1.2rem;max-width:700px}
.hero-ctas{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center}
.scroll-hint{position:absolute;bottom:1rem;left:50%;transform:translateX(-50%);opacity:.6}

/* Hero-wide rustic logo */
.hero::after{
  content:"";
  position:absolute;inset:0;
  background:url('assets/rustic_grim_logo.jpg') center/cover no-repeat;
  opacity:.22;
  pointer-events:none;
  z-index:1;
}

.services{padding:4rem 1rem;background:linear-gradient(180deg,var(--bg),var(--bg-2));}
.services h2{font-size:clamp(1.8rem,3.5vw,2.4rem);text-align:center;margin-bottom:1.5rem}
.service-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));max-width:1200px;margin:0 auto}
.service-grid article{background:#ffffff07;border:1px solid #ffffff10;border-radius:18px;overflow:hidden;box-shadow:0 6px 24px rgba(0,0,0,.35)}
.service-grid img{width:100%;height:240px;object-fit:cover;display:block;filter:grayscale(.05) contrast(1.05)}
.service-grid h3{font-size:1.15rem;margin:.75rem 1rem .25rem}
.service-grid p{margin:0 1rem 1rem}
.center{display:grid;place-items:center;margin-top:1.5rem}

.about{padding:4rem 1rem;background:linear-gradient(180deg,var(--bg-2),#201a16)}
.about-inner{display:grid;gap:2rem;grid-template-columns:repeat(12,1fr);max-width:1200px;margin:0 auto;align-items:center}
.about-media{grid-column:1/6}
.about-media img{width:100%;border-radius:22px;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.about-copy{grid-column:6/13}
.about-copy h2{font-size:clamp(1.8rem,3.5vw,2.6rem);margin-bottom:.6rem}
.about-copy p{margin:.7rem 0}
.about-actions{margin-top:1rem;display:flex;gap:.8rem;flex-wrap:wrap}

.gallery{padding:4rem 1rem;background:linear-gradient(180deg,#201a16,var(--bg));}
.gallery h2{text-align:center;margin:0 0 1.4rem}
.gallery .grid{max-width:1200px;margin:0 auto;display:grid;gap:.7rem;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.gallery .grid img{width:100%;height:100%;aspect-ratio:4/5;object-fit:cover;border-radius:16px;box-shadow:0 8px 22px rgba(0,0,0,.4);transition:.2s transform}
.gallery .grid img:hover{transform:scale(1.015)}

.site-footer{padding:1.5rem 1rem;background:#120f0d;border-top:1px solid #ffffff15;display:grid;place-items:center;gap:.6rem}
.footer-brand{display:flex;align-items:center;gap:.6rem;font-weight:800;letter-spacing:.02em}
.footer-brand img{height:30px;width:auto}
.footer-nav{display:flex;gap:1rem;margin:.3rem 0}
.small{opacity:.7;font-size:.85rem}

.floating-cta{
  position:fixed;right:1rem;bottom:1rem;background:var(--gold);color:var(--ink);
  border-radius:999px;padding:.8rem 1.1rem;font-weight:800;border:0;text-transform:uppercase;
  box-shadow:0 12px 30px rgba(0,0,0,.45);z-index:1001;
}
.floating-cta:hover{filter:brightness(1.05)}

@media (max-width: 900px){
  .about-media{grid-column:1/13}
  .about-copy{grid-column:1/13}
}

/* v2 Lightbox (gallery-only) */
.lightbox{
  position:fixed;inset:0;display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.9);z-index:2000;padding:1.5rem;
}
.lightbox.open{display:flex}
.lb-media{max-width:min(1200px,94vw);max-height:90vh;border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.6);cursor:zoom-out}
#gallery .grid img{cursor:zoom-in}

/* --- Mobile nav toggle (simple and explicit) --- */
/* base */
.menu-toggle{display:none; align-items:center; justify-content:center;
  gap:.4rem; background:#ffffff10; color:var(--bone);
  border:1px solid #ffffff22; border-radius:12px; padding:.45rem .6rem; cursor:pointer}
.menu-toggle .icon-close{display:none}
.menu-toggle[aria-expanded="true"] .icon-menu{display:none}
.menu-toggle[aria-expanded="true"] .icon-close{display:block}

@media (max-width: 900px){
  .menu-toggle{display:inline-flex}

  /* when open, float the same button on top-right, above the nav */
  .menu-toggle[aria-expanded="true"]{
    position:fixed; top:.75rem; right:1rem;
    z-index:1301;                      /* ← higher than .nav.open (1200) */
    background:#000; border-color:#ffffff33; /* make the button itself solid */
    padding:.6rem .8rem;                  /* bigger tap target */
  }

  /* Hide nav by default on small screens */
  .site-header .nav{display:none}

  /* Show it only when toggled open */
  .site-header .nav.open{
    position: fixed;            /* ← critical */
    inset: 0;                   /* fill the screen */
    height: 100dvh;             /* dynamic mobile viewport */
    background: var(--bg);
    display: grid;              /* center the stack */
    place-content:center;
    justify-items:center;
    gap:1rem;                   /* spacing between buttons */
    padding: calc(1rem + env(safe-area-inset-top)) 1.25rem 2rem;
    z-index: 1200;
    overflow: auto;             /* scroll if needed */
    flex-direction: column;     /* for fallback */
    align-items: stretch;       /* for fallback */
  }

  /* Make items fill the sheet width */
  .site-header .nav.open a,
  .site-header .nav.open .btn.book{
    width: 100%;
  }

  html, body { overflow-x: hidden; }

  /* Make the CTA button chunky too */
  .site-header .nav.open .btn.book{
    margin-top:.6rem;
    font-size:clamp(1.1rem, 5vw, 1.4rem);
    padding:1rem 1.25rem;
    width:100%;                          /* edge-to-edge */
    text-align:center;
  }

  /* Hide the Grimbarber brand/logo while the menu is expanded */
  body.menu-open .site-header .brand{ display:none }

  /* hide floating “Book Now” */
  body.menu-open .floating-cta{ display:none }

  .site-header .nav.open a{ opacity:1 }

  /* Base style for all three links */
  .site-header .nav.open a{
    opacity:1;                    /* override .nav a {opacity:.9} */
    border-bottom:none;           /* kill the divider line */
    display:block;
    width:min(520px, 92vw);       /* same width, centered */
    text-align:center;
    padding:1rem 1.25rem;         /* same size as Book Now */
    border-radius:999px;
    font-weight:800;
    font-size:clamp(1.1rem, 5vw, 1.4rem);
    letter-spacing:.02em;
    border:2px solid #ffffff33;   /* “ghost” style for About/Gallery */
    background:#ffffff10;
    box-shadow:0 8px 22px rgba(0,0,0,.25);
  }

  /* Keep Book Now as the primary, but same width */
  .site-header .nav.open a.btn.book{
    background:var(--tan);
    color:var(--ink);
    border-color:transparent;
    width:min(520px, 92vw);       /* override earlier width:100% */
  }
}

/* keep anchor targets visible below the sticky header */
#services, #about, #gallery { scroll-margin-top: 80px; }
@media (max-width: 900px){
  #services, #about, #gallery { scroll-margin-top: 100px; }
}