:root {
  /* Vintage heritage palette */
  --bg:         #1c1612;
  --bg-card:    #251e18;
  --bg-alt:     #2a221b;
  --ink:        #e4d6c0;
  --ink-soft:   #a89880;
  --ink-dim:    #6b5e4f;
  --line:       #3a3026;
  --accent:     #c9a96e;
  --accent-bright: #e0bd7a;
  --accent-deep: #9a7b44;
  --accent-bg:  rgba(201,169,110, .10);
  --shadow:     0 24px 48px -18px rgba(0,0,0,.55);
  --shadow-sm:  0 8px 20px -8px rgba(0,0,0,.40);
  --radius:     16px;
  --radius-sm:  10px;
  --maxw:       1140px;
}

* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }

body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3 { font-family: "Fraunces", "Playfair Display", Georgia, serif; font-weight:600; line-height:1.12; color:#efe0c8; }
h1 { font-size:clamp(2.8rem, 5.5vw, 4.2rem); letter-spacing:-0.5px; }
h2 { font-size:clamp(2rem, 3.6vw, 2.8rem); }
h3 { font-size:1.25rem; }

a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }

.container { width:min(100% - 2.5rem, var(--maxw)); margin-inline:auto; }

/* ---- Eyebrow / accent label ---- */
.eyebrow {
  text-transform:uppercase;
  letter-spacing: .22em;
  font-size: .72rem;
  font-weight:600;
  color: var(--accent);
  margin-bottom: .7rem;
}

/* ---- Buttons ---- */
.btn {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.9rem 1.6rem; border-radius:999px;
  font-weight:600; font-size:.95rem;
  border:1.5px solid transparent;
  cursor:pointer;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.btn-primary     { background:var(--accent); color:#1c1612; }
.btn-primary:hover { background:var(--accent-bright); transform:translateY(-2px); box-shadow:var(--shadow); }
.btn-outline     { border-color:var(--accent); color:var(--accent); background:transparent; }
.btn-outline:hover { background:var(--accent); color:#1c1612; }
.btn-ghost       { border-color:var(--line); color:var(--ink-soft); }
.btn-ghost:hover { border-color:var(--accent); color:var(--accent); }

/* ===================================================================
   HEADER (shared across pages)
   =================================================================== */
.site-header {
  position:sticky; top:0; z-index:50;
  background:rgba(28,22,18,.88);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav { display:flex; align-items:center; justify-content:space-between; padding:1.1rem 0; }
.brand { display:inline-flex; align-items:center; gap:.55rem; font-family:"Fraunces",serif; font-weight:600; font-size:1.3rem; color:#efe0c8; }
.brand-mark { color:var(--accent); font-size:1.4rem; }
.brand-logo { width:34px; height:34px; display:block; }
.nav-links { list-style:none; display:flex; align-items:center; gap:2rem; }
.nav-links a { font-weight:500; font-size:.95rem; color:var(--ink-soft); transition:color .15s; }
.nav-links a:hover, .nav-links a.active { color:var(--accent); }
.nav-cta { background:var(--accent); color:#1c1612 !important; padding:.5rem 1.2rem; border-radius:999px; font-weight:600; }
.nav-cta:hover { background:var(--accent-bright); }
.nav-toggle { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; }
.nav-toggle span { width:24px; height:2px; background:var(--ink); border-radius:2px; transition:.2s; }

/* ===================================================================
   FOOTER (shared)
   =================================================================== */
.site-footer { border-top:1px solid var(--line); background:var(--bg-alt); padding:3.5rem 0 2.2rem; margin-top:5rem; }
.footer-grid { display:grid; grid-template-columns:1fr auto 1fr; gap:2rem; align-items:center; }
.site-footer .brand { color:#efe0c8; }
.footer-tag { color:var(--ink-soft); font-size:.9rem; margin-top:.4rem; }
.footer-nav { display:flex; gap:1.6rem; flex-wrap:wrap; }
.footer-nav a { color:var(--ink-soft); font-size:.92rem; }
.footer-nav a:hover { color:var(--accent); }
.copyright { color:var(--ink-dim); font-size:.8rem; text-align:right; }

/* ===================================================================
   HERO (index)
   =================================================================== */
.hero { padding:clamp(4rem, 8vw, 7rem) 0 clamp(3rem, 5vw, 5rem); }
.hero-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:3.5rem; align-items:center; }
.hero .lead { font-size:1.15rem; color:var(--ink-soft); margin:1.3rem 0 2rem; max-width:36ch; }
.hero-actions { display:flex; gap:.9rem; flex-wrap:wrap; }
.hero-badges { list-style:none; display:flex; gap:1.5rem; flex-wrap:wrap; margin-top:2.2rem; color:var(--ink-soft); font-size:.9rem; font-weight:500; }
.hero-badges li::before { content:'✦ '; color:var(--accent); }

/* Hero visual */
.hero-visual { position:relative; height:380px; }
.hero-visual .vignette {
  position:absolute; inset:0;
  background: radial-gradient(circle at 40% 50%, rgba(201,169,110,.12) 0%, transparent 65%);
  border-radius:var(--radius);
}
.hero-visual .img-stack {
  position:absolute; top:5%; left:5%; right:5%; bottom:5%;
}
.hero-visual .img-stack img {
  position:absolute;
  width:55%; height:65%;
  object-fit:cover;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  border:3px solid var(--bg-card);
}
.hero-visual .img-stack img:first-child { top:0; left:0; z-index:2; }
.hero-visual .img-stack img:last-child  { bottom:0; right:0; z-index:1; width:60%; height:60%; }

/* ===================================================================
   SECTIONS
   =================================================================== */
.section { padding:clamp(3.5rem, 7vw, 5.5rem) 0; }
.section-alt { background:var(--bg-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.section-head { max-width:52ch; margin-bottom:2.6rem; }
.section-sub { color:var(--ink-soft); margin-top:.7rem; font-size:1.05rem; }

/* ---- Product grid ---- */
.grid { display:grid; gap:1.5rem; }
.products { grid-template-columns:repeat(3, 1fr); }

.product {
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .2s ease, box-shadow .25s ease;
}
.product:hover { transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--accent); }
.product-img {
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--bg-alt);
  position:relative;
}
.product-img img {
  width:100%; height:100%; object-fit:cover;
  transition: transform .5s ease;
}
.product:hover .product-img img { transform:scale(1.06); }
.product-img.is-emoji { display:grid; place-items:center; font-size:4.2rem; }
.product-body { padding:1.3rem 1.4rem 1.5rem; display:flex; flex-direction:column; gap:.4rem; flex:1; }
.product-tag { font-size:.7rem; text-transform:uppercase; letter-spacing:.14em; color:var(--accent); font-weight:600; }
.product-name { font-family:"Fraunces",serif; font-size:1.15rem; font-weight:600; color:#efe0c8; }
.product-desc { font-size:.9rem; color:var(--ink-soft); flex:1; }
.product-foot { display:flex; align-items:center; justify-content:space-between; margin-top:.5rem; }
.product-price { font-weight:600; font-size:1.08rem; color:var(--accent-bright); }
.product-badge { font-size:.7rem; padding:.25rem .65rem; border-radius:999px; background:var(--accent-bg); color:var(--accent); font-weight:600; border:1px solid rgba(201,169,110,.2); }

/* ---- Filters ---- */
.filters { display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:2.2rem; }
.filter {
  border:1.5px solid var(--line);
  background:transparent;
  color:var(--ink-soft);
  padding:.5rem 1.2rem; border-radius:999px;
  font-weight:500; font-size:.9rem; cursor:pointer;
  transition:.15s;
}
.filter:hover { border-color:var(--accent); color:var(--accent); }
.filter.is-active { background:var(--accent); color:#1c1612; border-color:var(--accent); }

/* ---- Featured banner ---- */
.featured-banner {
  background: linear-gradient(135deg, var(--bg-alt), rgba(201,169,110,.06));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:2.8rem 3rem;
  margin-top:4rem;
  display:grid; grid-template-columns:auto 1fr auto; gap:2rem; align-items:center;
}
.featured-banner .fb-emoji { font-size:3.5rem; }
.featured-banner h3 { margin-bottom:.4rem; }
.featured-banner p { color:var(--ink-soft); max-width:42ch; }

/* ---- Story ---- */
.story-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:3rem; align-items:center; }
.story-img { border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); border:3px solid var(--bg-card); aspect-ratio:5/4; }
.story-img img { width:100%; height:100%; object-fit:cover; }
.story-copy p { color:var(--ink-soft); margin-top:1rem; max-width:50ch; }
.story-stats { display:flex; gap:2.5rem; margin-top:2rem; }
.story-stats strong { font-family:"Fraunces",serif; font-size:1.9rem; display:block; color:var(--accent); }
.story-stats span { font-size:.85rem; color:var(--ink-soft); }

/* ---- Steps ---- */
.steps { grid-template-columns:repeat(4, 1fr); }
.step { background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius); padding:1.8rem 1.5rem; transition:border-color .2s; }
.step:hover { border-color:var(--accent); }
.step-num { font-family:"Fraunces",serif; font-size:2.4rem; color:rgba(201,169,110,.18); font-weight:600; }
.step h3 { margin:.5rem 0; color:#efe0c8; }
.step p { font-size:.9rem; color:var(--ink-soft); }

/* ---- Contact ---- */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start; }
.contact-copy p { color:var(--ink-soft); margin-top:.8rem; max-width:44ch; }
.contact-list { list-style:none; margin:1.8rem 0; display:grid; gap:.9rem; }
.contact-list li { display:flex; align-items:center; gap:.9rem; font-weight:500; }
.contact-list .icon { color:var(--accent); font-size:1.1rem; width:1.5rem; text-align:center; }
.socials { display:flex; gap:1.4rem; margin-top:.5rem; }
.socials a { font-weight:600; color:var(--accent); border-bottom:1.5px solid transparent; }
.socials a:hover { border-color:var(--accent); color:var(--accent-bright); }

.contact-form { background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius); padding:2rem; display:grid; gap:1.1rem; box-shadow:var(--shadow); }
.contact-form label { display:grid; gap:.45rem; font-size:.85rem; font-weight:600; color:var(--ink-soft); }
.contact-form input, .contact-form textarea {
  font-family:inherit; font-size:.95rem;
  padding:.75rem .95rem;
  border:1.5px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--bg);
  color:var(--ink);
  resize:vertical;
}
.contact-form input:focus, .contact-form textarea:focus { outline:none; border-color:var(--accent); }
.form-note { font-size:.85rem; color:var(--accent); background:var(--accent-bg); padding:.75rem .95rem; border-radius:var(--radius-sm); border:1px solid rgba(201,169,110,.15); }

/* ---- Testimonials ---- */
.testimonial {
  background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius);
  padding:2rem 2.2rem;
}
.testimonial blockquote { font-family:"Fraunces",serif; font-size:1.15rem; color:#efe0c8; line-height:1.5; }
.testimonial cite { display:block; margin-top:1rem; font-style:normal; color:var(--ink-soft); font-size:.9rem; }
.testimonial cite::before { content:'— '; color:var(--accent); }

/* ---- Page banner (inner pages) ---- */
.page-banner { background:var(--bg-alt); border-bottom:1px solid var(--line); padding:4rem 0 3rem; text-align:center; }
.page-banner h1 { margin-bottom:.8rem; }
.page-banner p { color:var(--ink-soft); font-size:1.1rem; max-width:44ch; margin-inline:auto; }

/* ---- About page ---- */
.about-hero-img { border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); border:3px solid var(--bg-card); aspect-ratio:21/9; margin-bottom:3rem; }
.about-hero-img img { width:100%; height:100%; object-fit:cover; }

.values { grid-template-columns:repeat(3, 1fr); }
.value { background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius); padding:1.8rem 1.5rem; text-align:center; }
.value .v-icon { font-size:2.8rem; margin-bottom:.6rem; }
.value h3 { color:#efe0c8; margin-bottom:.4rem; }
.value p { color:var(--ink-soft); font-size:.9rem; }

/* ---- Testimonials ---- */
.testimonials-grid { grid-template-columns:repeat(3, 1fr); }

/* ---- CTA band ---- */
.cta-band {
  background:linear-gradient(135deg, var(--bg-alt), rgba(201,169,110,.07));
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:clamp(3rem,6vw,4.5rem) 0; text-align:center;
}
.cta-band h2 { margin-bottom:.8rem; }
.cta-band p { color:var(--ink-soft); max-width:46ch; margin:0 auto 1.8rem; font-size:1.08rem; }
.cta-band .hero-actions { justify-content:center; }

/* ---- Featured / story teaser image (homepage) ---- */
.teaser-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:center; }
.teaser-img { border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); border:3px solid var(--bg-card); aspect-ratio:4/3; background:var(--bg-alt); }
.teaser-img img { width:100%; height:100%; object-fit:cover; }
.teaser-copy p { color:var(--ink-soft); margin-top:1rem; max-width:50ch; }

/* ---- FAQ accordion ---- */
.faq { max-width:760px; margin-inline:auto; display:grid; gap:.8rem; }
.faq-item { border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--bg-card); overflow:hidden; }
.faq-q {
  width:100%; text-align:left; cursor:pointer;
  background:none; border:none; color:#efe0c8;
  font-family:"Fraunces",serif; font-size:1.08rem; font-weight:500;
  padding:1.15rem 1.4rem; display:flex; justify-content:space-between; align-items:center; gap:1rem;
}
.faq-q:hover { color:var(--accent); }
.faq-q::after { content:'+'; color:var(--accent); font-size:1.5rem; font-family:"Inter",sans-serif; transition:transform .2s; line-height:1; }
.faq-q[aria-expanded="true"]::after { transform:rotate(45deg); }
.faq-a { padding:0 1.4rem 1.25rem; color:var(--ink-soft); font-size:.95rem; }

/* ---- Section centered head ---- */
.section-head.center { margin-inline:auto; text-align:center; }

/* ---- Scroll reveal ---- */
.reveal { opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }
.reveal.revealed { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) { .reveal { opacity:1; transform:none; transition:none; } }

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width:920px) {
  .hero-grid, .story-grid, .contact-grid, .featured-banner, .teaser-grid { grid-template-columns:1fr; }
  .hero-visual, .story-img, .teaser-img { max-height:300px; }
  .products, .steps, .values, .testimonials-grid { grid-template-columns:repeat(2, 1fr); }
  .footer-grid { grid-template-columns:1fr; text-align:center; }
  .footer-nav { justify-content:center; }
  .copyright { text-align:center; }
}

@media (max-width:640px) {
  .nav-toggle { display:flex; }
  .nav-links {
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:flex-start; gap:0;
    background:var(--bg); border-bottom:1px solid var(--line);
    padding:.5rem 1.25rem 1rem;
    max-height:0; overflow:hidden; transition:max-height .25s ease;
  }
  .nav-links.open { max-height:360px; }
  .nav-links li { width:100%; }
  .nav-links a { display:block; padding:.8rem 0; width:100%; }
  .products, .steps, .values, .testimonials-grid { grid-template-columns:1fr; }
  .section-head h2 { font-size:1.6rem; }
}