:root {
  /* Light Scandinavian / natural palette */
  --bg:         #faf6ef;
  --bg-card:    #ffffff;
  --bg-alt:     #f1ebe0;
  --ink:        #3a3a32;
  --ink-soft:   #6f6a5e;
  --ink-dim:    #a39c8d;
  --line:       #e4dccd;
  --accent:     #7c8a6b;        /* sage green */
  --accent-bright: #93a181;
  --accent-deep: #5f6c50;
  --clay:       #c08552;        /* terracotta secondary */
  --accent-bg:  rgba(124,138,107, .10);
  --shadow:     0 24px 48px -20px rgba(58,58,50,.22);
  --shadow-sm:  0 8px 20px -10px rgba(58,58,50,.18);
  --radius:     18px;
  --radius-sm:  11px;
  --maxw:       1140px;
}

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

body {
  font-family: "DM Sans", 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: "DM Serif Display", Georgia, serif; font-weight:400; line-height:1.14; color:#33332b; }
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.3rem; }

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

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

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

/* ---- Buttons ---- */
.btn {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.9rem 1.7rem; 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, color .2s ease;
}
.btn-primary     { background:var(--accent); color:#fff; }
.btn-primary:hover { background:var(--accent-deep); transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.btn-outline     { border-color:var(--accent); color:var(--accent-deep); background:transparent; }
.btn-outline:hover { background:var(--accent); color:#fff; }
.btn-ghost       { border-color:var(--line); color:var(--ink-soft); }
.btn-ghost:hover { border-color:var(--accent); color:var(--accent-deep); }

/* ===================================================================
   HEADER
   =================================================================== */
.site-header {
  position:sticky; top:0; z-index:50;
  background:rgba(250,246,239,.86);
  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:"DM Serif Display",serif; font-weight:400; font-size:1.4rem; letter-spacing:1px; color:#33332b; }
.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-deep); }
.nav-cta { background:var(--accent); color:#fff !important; padding:.5rem 1.2rem; border-radius:999px; font-weight:600; }
.nav-cta:hover { background:var(--accent-deep); }
.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
   =================================================================== */
.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; }
.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-deep); }
.copyright { color:var(--ink-dim); font-size:.8rem; text-align:right; }

/* ===================================================================
   HERO
   =================================================================== */
.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:38ch; }
.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(--clay); }

.hero-visual { position:relative; height:400px; }
.hero-visual .vignette {
  position:absolute; inset:0;
  background: radial-gradient(circle at 45% 50%, rgba(124,138,107,.14) 0%, transparent 65%);
  border-radius:var(--radius);
}
.hero-visual .img-stack { position:absolute; top:4%; left:4%; right:4%; bottom:4%; }
.hero-visual .img-stack img {
  position:absolute;
  width:56%; height:66%;
  object-fit:cover;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  border:5px solid #fff;
}
.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-head.center { margin-inline:auto; text-align:center; }
.section-sub { color:var(--ink-soft); margin-top:.7rem; font-size:1.05rem; }

/* ---- Product grid ---- */
.grid { display:grid; gap:1.6rem; }
.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, border-color .2s;
}
.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(--clay); font-weight:600; }
.product-name { font-family:"DM Serif Display",serif; font-size:1.2rem; color:#33332b; }
.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-deep); }
.product-badge { font-size:.7rem; padding:.25rem .65rem; border-radius:999px; background:var(--accent-bg); color:var(--accent-deep); font-weight:600; border:1px solid rgba(124,138,107,.25); }

/* ---- 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-deep); }
.filter.is-active { background:var(--accent); color:#fff; border-color:var(--accent); }

/* ---- Featured banner ---- */
.featured-banner {
  background: linear-gradient(135deg, var(--bg-alt), rgba(192,133,82,.08));
  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 / teaser ---- */
.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:5px solid #fff; 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; }

.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:5px solid #fff; 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:"DM Serif Display",serif; font-size:1.9rem; display:block; color:var(--clay); }
.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, box-shadow .2s; }
.step:hover { border-color:var(--accent); box-shadow:var(--shadow-sm); }
.step-num { font-family:"DM Serif Display",serif; font-size:2.4rem; color:rgba(124,138,107,.28); }
.step h3 { margin:.5rem 0; }
.step p { font-size:.9rem; color:var(--ink-soft); }

/* ---- Values ---- */
.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; transition:box-shadow .2s; }
.value:hover { box-shadow:var(--shadow-sm); }
.value .v-icon { font-size:2.8rem; margin-bottom:.6rem; }
.value h3 { margin-bottom:.4rem; }
.value p { color:var(--ink-soft); font-size:.9rem; }

/* ---- Testimonials ---- */
.testimonials-grid { grid-template-columns:repeat(3, 1fr); }
.testimonial { background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius); padding:2rem 2.2rem; }
.testimonial blockquote { font-family:"DM Serif Display",serif; font-size:1.15rem; color:#33332b; 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(--clay); }

/* ---- CTA band ---- */
.cta-band {
  background:linear-gradient(135deg, var(--bg-alt), rgba(124,138,107,.10));
  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; }

/* ---- 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-deep); border-bottom:1.5px solid transparent; }
.socials a:hover { border-color:var(--accent); }

.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-sm); }
.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-deep); background:var(--accent-bg); padding:.75rem .95rem; border-radius:var(--radius-sm); border:1px solid rgba(124,138,107,.2); }

/* ---- Page banner ---- */
.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:46ch; margin-inline:auto; }

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

/* ---- FAQ ---- */
.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:#33332b;
  font-family:"DM Serif Display",serif; font-size:1.08rem;
  padding:1.15rem 1.4rem; display:flex; justify-content:space-between; align-items:center; gap:1rem;
}
.faq-q:hover { color:var(--accent-deep); }
.faq-q::after { content:'+'; color:var(--clay); font-size:1.5rem; font-family:"DM Sans",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; }

/* ---- 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:320px; }
  .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.7rem; }
}