:root{
  --olive:#556B2F; --olive-dark:#4B5320;
  --ink:#0f0f0f; --muted:#6a6a6a;
  --nude:#efe9e4; --stone:#f7f6f4; --card:#ffffff; --line:#e6e1db;
}
*{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--stone);color:var(--ink);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1200px;margin-inline:auto;padding:28px}
/* Luxe black header */
.header{position:sticky;top:0;background:#0b0b0b;color:#fff;z-index:50;border-bottom:1px solid #141414}
.header .row{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px}
.brand .dot{width:10px;height:10px;border-radius:50%;background:var(--olive)}
nav a{padding:12px 14px;color:#fff;opacity:.9}
nav a:hover{opacity:1;color:var(--nude)}
.cta{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-block;padding:12px 18px;border-radius:999px;background:var(--olive);color:#fff;font-weight:700;box-shadow:0 8px 18px rgba(85,107,47,.25)}
.btn.ghost{background:transparent;border:1px solid var(--olive);color:#fff}
/* Hero banner with soft nude gradient */
.hero{background:linear-gradient(135deg,var(--nude),var(--stone));border-bottom:1px solid var(--line)}
.hero .grid{display:grid;grid-template-columns:1.2fr .8fr;gap:36px;align-items:center}
h1,h2{font-family:"Playfair Display",serif}
h1{font-size:56px;line-height:1.04;margin:0 0 12px}
.hero p{color:var(--muted);font-size:18px;margin:0 0 22px}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px}
/* Banner ribbon section */
.ribbons{background:#0b0b0b;color:#fff;border-top:1px solid #141414;border-bottom:1px solid #141414}
.ribbon-track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
.ribbon{scroll-snap-align:start;min-width:320px;background:#151515;border:1px solid #202020;border-radius:14px;padding:16px;display:flex;align-items:center;justify-content:space-between}
.ribbon .tag{background:var(--olive);color:#fff;padding:6px 10px;border-radius:999px;font-weight:800;font-size:12px}
/* Link blocks (mobile link-in-bio style) */
.links{background:var(--stone);padding:40px 0}
.link-list{max-width:560px;margin-inline:auto;display:grid;gap:12px}
.link-item{background:#0b0b0b;color:#fff;padding:14px 16px;border-radius:12px;display:flex;justify-content:space-between;align-items:center;border:1px solid #1a1a1a}
.link-item:hover{background:#121212}
/* Email signup callout */
.signup{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px;display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.signup input{padding:12px 14px;border-radius:10px;border:1px solid var(--line);min-width:240px}
/* Price quick cards */
.prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.price-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;justify-content:space-between;align-items:center}
.price{color:var(--olive);font-weight:800}
/* Gallery */
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.gallery div{aspect-ratio:3/4;border-radius:14px;background:#ece9e5;border:1px solid var(--line)}
/* Footer */
footer{background:#0b0b0b;color:#bdbdbd;padding:42px 0;border-top:1px solid #141414}
footer a{color:#fff}
@media(max-width:980px){
  .hero .grid{grid-template-columns:1fr}
  .prices,.gallery{grid-template-columns:1fr}
}

.brand-link {
  display: flex;
  align-items: center;
}

.brand-logo {
  height: 48px;   /* adjust size */
  width: auto;
  display: block;
  
  
}
/* Keep logo from filling whole header */
.brand-logo {
  height: 100px;   /* desktop size */
  width: auto;
  display: block;
}

@media (max-width: 820px) {
  .brand-logo {
    height: 68px;  /* smaller on mobile */
  }
}

.brand-logo {
  height: 50px;       /* keep logo neat */
  max-width: 150px;   /* prevent it from stretching wide */
  width: auto;
  display: inline-block;
  object-fit: contain;
}
.brand-title {
  display: flex;
  align-items: center;
  gap: 8px;            /* space between text and image */
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}

.title-icon {
  height: 20px;        /* small image size */
  width: auto;
}

/* Header layout: logo left, nav right */
.header .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  min-height: 64px;
}

.brand-banner {
  display: flex;
  align-items: center;
}

.brand-logo {
  height: 400px;   /* adjust size */
  width: auto;
  display: block;
}

/* Nav links aligned right */
#site-nav {
  display: flex;
  gap: 20px;
  align-items: center;
}

#site-nav a {
  color: #fff;              /* or your brand color */
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
}

#site-nav .btn {
  background: var(--olive, #556B2F); /* fallback if var not set */
  color: #fff;
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 700;
}

/* Mobile: logo top, nav below */
@media (max-width: 820px) {
  .header .row {
    flex-direction: column;
    gap: 10px;
  }

  #site-nav {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }

  .brand-logo {
    height: 150px; /* smaller on mobile */
  }
}

/* Fix header height */
.header .row {
  min-height: 64px;          /* keep banner consistent */
  overflow: visible;         /* allow logo to extend past */
}

/* Logo bigger without pushing row */
.brand-logo {
  height: 100px;              /* larger than row */
  width: auto;
  margin-top: -4px;          /* nudge to center visually */
}

.header .row {
  min-height: 64px;   /* fixed header height */
  overflow: visible;  /* let logo stick out */
}
/* Hero section with centered logo */
.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80vh;       /* takes 80% of screen height */
  background: #0b0b0b;    /* or gradient, image, etc. */
  text-align: center;
}

.hero-logo-wrap {
  max-width: 500px;       /* cap size */
  width: 80%;
}

.hero-logo {
  width: 100%;
  height: auto;
  object-fit: contain;
}
/* Make hero section text white */
section[aria-label="Hero"] h1,
section[aria-label="Hero"] p,
section[aria-label="Hero"] a {
  color: #fff; 
}

/* Optional: style button */
section[aria-label="Hero"] a.btn {
  background-color: #fff;
  color: #000;
  padding: 12px 24px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
}

/* Intro section text in black */
section[aria-label="Intro"] h2,
section[aria-label="Intro"] p {
  color: #000;
}

:root {
  --bg: #f9f9f6;       /* light beige background */
  --card: #ffffff;     /* white gallery cards */
  --text: #222222;     /* dark text */
  --muted: #666666;    /* captions */
  --accent: #556b2f;   /* olive green accent */
  --radius: 14px;
  --gap: 16px;
}

/* Section */
#gallery {
  padding: 48px 0;
  background: var(--bg);
  color: var(--text);
}
#gallery h2 {
  margin: 0 0 20px;
  font-size: clamp(22px, 2.5vw, 28px);
  color: var(--accent);
  text-align: center;
}

/* Grid */
.gallery {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* Card */
.gallery figure {
  background: var(--card);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid #ddd;
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/* Image */
.gallery img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  aspect-ratio: 4/5;
}

/* Caption */
.gallery figcaption {
  padding: 12px;
  font-size: 14px;
  color: var(--muted);
  text-align: center;
  border-top: 1px solid #eee;
}

/* Hover effect */
.gallery figure:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 10px 24px rgba(0,0,0,.15);
}


/* Gallery grid */
.gallery {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(1, 1fr); /* default: mobile = 1 column */
}

/* Tablet: 2 columns */
@media (min-width: 600px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop: 3 columns */
@media (min-width: 992px) {
  .gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Image sizing */
.gallery img {
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 3/4;   /* balanced portrait */
  max-height: 240px;   /* keep them compact */
  border-radius: 10px;
}

.gallery {
  display: grid;
  gap: 12px;
  justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  max-width: 1000px;   /* cap the gallery width */
  margin: 0 auto;
}

/* Base: mobile (small thumbnails) */
.gallery img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  margin: 0 auto;
}

/* Tablet: medium thumbnails */
@media (min-width: 600px) {
  .gallery img {
    width: 160px;
    height: 160px;
  }
}

/* Desktop: larger thumbnails */
@media (min-width: 992px) {
  .gallery img {
    width: 200px;
    height: 200px;
  }
}

.gallery {
  display: grid;
  gap: 12px;
  justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  max-width: 1000px;   /* cap the gallery width */
  margin: 0 auto;
}

/* Base: mobile (small thumbnails) */
.gallery img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  margin: 0 auto;
}

/* Tablet: medium thumbnails */
@media (min-width: 600px) {
  .gallery img {
    width: 160px;
    height: 160px;
  }
}

/* Desktop: larger thumbnails */
@media (min-width: 992px) {
  .gallery img {
    width: 200px;
    height: 200px;
  }
}

/* --- GALLERY FIX --- */
#gallery { padding: 36px 0; }
#gallery h2 { text-align:center; color:#556b2f; margin:0 0 14px; }

/* Grid: 2 cols mobile, 3 cols desktop */
#gallery .gallery{
  display:grid; gap:12px; margin:0 auto; max-width:760px;
  grid-template-columns:repeat(2, minmax(140px,1fr));
}
@media (min-width:768px){
  #gallery .gallery{ grid-template-columns:repeat(3, minmax(180px,1fr)); max-width:920px; }
}
#gallery .gallery li{ list-style:none; }

/* Reset any button/link styling leaking in */
#gallery a, #gallery button{
  all:unset; display:block; cursor:pointer;
}

/* Card */
#gallery figure{
  margin:0; background:#fff; border:1px solid #e5e7eb;
  border-radius:12px; overflow:hidden;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
#gallery figure:hover{
  transform:translateY(-2px);
  border-color:#556b2f;
  box-shadow:0 8px 20px rgba(0,0,0,.12);
}

/* Image: square thumbnails (no pills) */
#gallery img{
  display:block; width:100%;
  aspect-ratio:1/1;           /* square */
  height:auto; object-fit:cover;
  border-radius:0;            /* kill rounded “pill” */
}

/* Caption */
#gallery figcaption{
  padding:10px 12px; text-align:center;
  font-size:14px; color:#666; background:#fff;
}

:root{
  --olive:#556b2f;     /* your button color */
  --text:#222; 
  --muted:#666;
  --card:#fff;
  --bg:#f7f6f3;
  --radius:16px;
}

/* Section header */
#faq{ padding:32px 16px; background:var(--bg); }
#faq h2{
  margin:0 0 12px; text-align:left;
  font-size:22px; font-weight:700; color:var(--olive);
}

/* FAQ card container */
#faq .faq{
  background:var(--card);
  border:1px solid #e6e6e6;
  border-radius:var(--radius);
  box-shadow:0 6px 20px rgba(0,0,0,.06);
  margin:12px 0; padding:0; overflow:hidden;
}

/* Question row */
#faq .faq > summary{
  list-style:none; cursor:pointer; outline:none;
  padding:14px 16px;
  font-weight:600; color:var(--text);
  display:flex; align-items:center; justify-content:space-between;
}

/* Chevron */
#faq .faq > summary::after{
  content:"▾"; transition:transform .2s ease; color:var(--olive);
  margin-left:12px;
}
#faq .faq[open] > summary::after{ transform:rotate(-180deg); }

/* Divider line under question */
#faq .faq[open] > summary{ border-bottom:1px solid #eee; }

/* Answer body */
#faq .answer{
  padding:14px 16px 16px;
  color:var(--muted); line-height:1.55;
  background:#fff;
}

/* Focus + hover polish */
#faq .faq > summary:hover{ background:rgba(85,107,47,.05); }
#faq .faq > summary:focus-visible{ box-shadow:0 0 0 3px rgba(85,107,47,.25) inset; border-radius:8px; }

/* Center FAQ text */
#faq h2,
#faq .faq > summary,
#faq .answer {
  text-align: center;
}

footer {
  background: #0b0b0c;   /* dark background */
  color: #fff;
  padding: 24px 16px;
  text-align: center;    /* centers all text & links */
  font-size: 14px;
}

footer a {
  color: #556b2f;        /* olive accent */
  text-decoration: none;
  font-weight: 600;
}

footer a:hover { text-decoration: underline; }

.footer-credit, 
.footer-legal, 
.footer-info {
  margin: 8px 0;
}