/* ============================================================
   THE GROUNDED OFFICE — SHARED STYLESHEET
   Version 1.0 | April 2026
   Referenced by: index.html, setups.html, setups/*.html,
                  shop.html, blog.html, about.html
   ============================================================ */

/* ============================================================
   BRAND TOKENS
   ============================================================ */
:root {
  --warm-stone:   #F5F0E8;
  --deep-forest:  #2C4A3E;
  --soft-sage:    #8AAF9B;
  --warm-amber:   #C8864A;
  --cream-white:  #FAF8F4;
  --charcoal:     #2D2D2D;
  --muted-blush:  #E8D5C4;

  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-accent:  'Lora', Georgia, serif;

  --max-w: 1200px;
  --section-pad: 80px 24px;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--charcoal);
  background-color: var(--cream-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}

/* ============================================================
   PLACEHOLDER STYLES (remove when real assets are in place)
   ============================================================ */
.placeholder {
  background: repeating-linear-gradient(
    45deg,
    #e0dbd0,
    #e0dbd0 10px,
    #eae6dc 10px,
    #eae6dc 20px
  );
  border: 2px dashed #aaa;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  gap: 8px;
  color: #555;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
}

.placeholder .ph-label {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #c0392b;
}

.placeholder .ph-note {
  font-size: 12px;
  color: #777;
  max-width: 320px;
  line-height: 1.5;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: .04em;
  border-radius: 4px;
  padding: 14px 32px;
  cursor: pointer;
  transition: opacity .2s, transform .15s;
  border: none;
}

.btn:hover { opacity: .88; transform: translateY(-1px); }

.btn-primary {
  background: var(--warm-amber);
  color: var(--cream-white);
}

.btn-outline {
  background: transparent;
  color: var(--cream-white);
  border: 1.5px solid var(--cream-white);
}

.btn-outline:hover { background: rgba(250,248,244,.1); }

.btn-dark {
  background: var(--deep-forest);
  color: var(--cream-white);
}

/* ============================================================
   SECTION LABEL
   ============================================================ */
.section-eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--soft-sage);
  margin-bottom: 12px;
}

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--cream-white);
  border-bottom: 1px solid var(--muted-blush);
}

.nav-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* ── Logo ── */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex-shrink: 0;
}

/* ⚠️ PLACEHOLDER: Replace <div class="logo-placeholder"> with <img src="assets/logo-main.png"> once exported from Canva.
    Export URL: https://www.canva.com/d/UJ4RapqjjZvigdk
    Export as PNG, save to Website/assets/logo-main.png */
.logo-placeholder {
  height: 40px;
  display: flex;
  align-items: center;
}

.logo-wordmark {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 20px;
  color: var(--deep-forest);
  line-height: 1.1;
}

.logo-wordmark span {
  display: block;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--soft-sage);
  margin-top: 2px;
}

 /* ── Nav links ── */
.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
}

.nav-links a {
  font-size: 14px;
  font-weight: 400;
  color: var(--charcoal);
  letter-spacing: .02em;
  transition: color .2s;
}

.nav-links a:hover { color: var(--deep-forest); }

/* Active nav state */
.nav-links a.active {
  color: var(--deep-forest);
  border-bottom: 2px solid var(--warm-amber);
  padding-bottom: 2px;
}

.nav-links .nav-cta {
  background: var(--deep-forest);
  color: var(--cream-white);
  padding: 9px 20px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
  transition: background .2s;
}

.nav-links .nav-cta:hover { background: var(--charcoal); color: var(--cream-white); }

/* Active state override for CTA button */
.nav-links .nav-cta.active {
  border-bottom: none;
  padding-bottom: 9px;
  background: var(--charcoal);
  color: var(--cream-white);
}

/* Mobile hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--charcoal);
  border-radius: 2px;
  transition: .3s;
}

@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
}

    /* ============================================================
       2. HERO
       ============================================================ */
    .hero {
      position: relative;
      min-height: 88vh;
      display: flex;
      align-items: center;
      overflow: hidden;
    }

    .hero-bg {
      position: absolute;
      inset: 0;
      background-color: #c8b89a; /* warm stand-in until image is added */
      background-image: url('assets/hero.png');
      background-size: cover;
      background-position: center;
    }

    /* Dark overlay for text legibility — deeper tone ensures headline always reads */
    .hero-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(
        160deg,
        rgba(12, 18, 14, .82) 0%,
        rgba(12, 18, 14, .65) 55%,
        rgba(44, 74, 62, .50) 100%
      );
    }

    .hero-placeholder-notice {
      position: absolute;
      top: 16px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(192,57,43,.85);
      color: #fff;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .08em;
      text-transform: uppercase;
      padding: 6px 16px;
      border-radius: 20px;
      white-space: nowrap;
      z-index: 2;
    }

    .hero-content {
      position: relative;
      z-index: 1;
      max-width: var(--max-w);
      margin: 0 auto;
      padding: 100px 24px 80px;
      text-align: center;
    }

    .hero-eyebrow {
      font-family: var(--font-body);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--soft-sage);
      margin-bottom: 20px;
    }

    .hero-headline {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(40px, 6vw, 72px);
      line-height: 1.1;
      color: var(--cream-white);
      margin-bottom: 24px;
      max-width: 800px;
      margin-left: auto;
      margin-right: auto;
      text-shadow: 0 1px 8px rgba(0,0,0,0.45), 0 3px 20px rgba(0,0,0,0.28);
    }

    .hero-headline em {
      font-style: italic;
      color: var(--soft-sage);
    }

    .hero-sub {
      font-size: clamp(16px, 2.2vw, 20px);
      font-weight: 300;
      color: rgba(250,248,244,.92);
      line-height: 1.65;
      max-width: 620px;
      margin: 0 auto 40px;
      text-shadow: 0 1px 6px rgba(0,0,0,0.38);
    }

    .hero-actions {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      flex-wrap: wrap;
    }

    .hero-link {
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 400;
      color: var(--soft-sage);
      border-bottom: 1px solid var(--soft-sage);
      padding-bottom: 2px;
      transition: color .2s, border-color .2s;
    }

    .hero-link:hover { color: var(--cream-white); border-color: var(--cream-white); }

/* ============================================================
   PAGE HERO (interior pages — shorter than homepage hero)
   ============================================================ */
.page-hero {
  background: var(--deep-forest);
  padding: 72px 24px 64px;
  text-align: center;
}

    .post-hero-meta {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      flex-wrap: wrap;
      font-size: 13px;
      color: rgba(250,248,244,.55);
      font-family: var(--font-body);
    }

    .post-hero-meta span { display: flex; align-items: center; gap: 6px; }

    .post-hero-meta .meta-dot {
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background: rgba(250,248,244,.3);
      display: inline-block;
    }

/* .page-hero-eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--soft-sage);
  margin-bottom: 16px;
} */

/* .page-hero-headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 5vw, 56px);
  color: var(--cream-white);
  line-height: 1.1;
  margin-bottom: 20px;
} */

/* .page-hero-headline em {
  font-style: italic;
  color: var(--soft-sage);
} */

/* .page-hero-sub {
  font-size: clamp(15px, 2vw, 18px);
  font-weight: 300;
  color: rgba(250,248,244,.80);
  line-height: 1.65;
  max-width: 580px;
  margin: 0 auto;
} */

/* ============================================================
   PRODUCT CARDS (shared across setups + shop pages)
   ============================================================ */
/* .product-card {
  background: #fff;
  border: 1px solid var(--muted-blush);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s, transform .2s;
} */

/* .product-card:hover {
  box-shadow: 0 8px 32px rgba(44,74,62,.10);
  transform: translateY(-3px); */
/* }

.product-img-ph {
  width: 100%;
  aspect-ratio: 4/3;
}

.product-img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: contain;
  padding: 24px;
  background: var(--warm-stone);
}

.product-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1; */
/* } */

/* .product-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cream-white);
  background: var(--deep-forest);
  padding: 4px 10px;
  border-radius: 3px;
  align-self: flex-start;
} */

/* .product-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 19px;
  color: var(--deep-forest);
  line-height: 1.25;
}

.product-desc {
  font-size: 14px;
  color: #7a756d;
  line-height: 1.5;
  flex: 1;
}

.product-footer {
  padding: 0 24px 24px;
}

.product-btn {
  display: block;
  text-align: center;
  background: var(--warm-amber);
  color: var(--cream-white);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .06em;
  padding: 12px 20px;
  border-radius: 4px;
  transition: opacity .2s;
} */

/* .product-btn:hover { opacity: .85; } */

/* Affiliate disclosure */
/* .affiliate-disclosure {
  text-align: center;
  margin-top: 20px;
  font-size: 11px;
  color: #9a958e;
  font-style: italic;
} */

/* ============================================================
   EMAIL OPT-IN
   ============================================================ */
/* .optin {
  background: var(--deep-forest);
  padding: var(--section-pad);
}

.optin-inner {
  max-width: 580px;
  margin: 0 auto;
  text-align: center;
}

.optin-eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--soft-sage);
  margin-bottom: 16px;
}

.optin-headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 4vw, 38px);
  color: var(--cream-white);
  line-height: 1.15;
  margin-bottom: 14px;
}

.optin-sub {
  font-size: 15px;
  font-weight: 300;
  color: rgba(250,248,244,.72);
  line-height: 1.65;
  margin-bottom: 36px;
}

.optin-form {
  display: flex;
  gap: 0;
  max-width: 440px;
  margin: 0 auto;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
}

.optin-input {
  flex: 1;
  padding: 16px 20px;
  font-family: var(--font-body);
  font-size: 15px;
  border: none;
  background: var(--cream-white);
  color: var(--charcoal);
  outline: none;
  min-width: 0;
}

.optin-input::placeholder { color: #a09a91; }

.optin-btn {
  background: var(--warm-amber);
  color: var(--cream-white);
  border: none;
  padding: 16px 24px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .04em;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s;
}

.optin-btn:hover { background: #b5723e; }

.optin-fine {
  font-size: 12px;
  color: rgba(250,248,244,.45);
  margin-top: 16px;
}

.optin-ph-note {
  margin-top: 16px;
  font-size: 11px;
  color: rgba(250,248,244,.4);
  font-style: italic;
}

@media (max-width: 480px) {
  .optin-form { flex-direction: column; border-radius: 5px; }
  .optin-input { border-radius: 5px 5px 0 0; }
  .optin-btn { border-radius: 0 0 5px 5px; padding: 14px; }
} */

/* ============================================================
   FOOTER
   ============================================================ */
/* .footer {
  background: var(--charcoal);
  color: var(--cream-white);
  padding: 64px 24px 40px;
}

.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(250,248,244,.1);
}

.footer-logo {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--cream-white);
  margin-bottom: 10px;
}

.footer-tagline {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 14px;
  color: var(--soft-sage);
  margin-bottom: 20px;
  line-height: 1.5;
}

.footer-email {
  font-size: 13px;
  color: rgba(250,248,244,.6);
}

.footer-email a { color: var(--soft-sage); transition: color .2s; }
.footer-email a:hover { color: var(--cream-white); }

.footer-col h4 {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--soft-sage);
  margin-bottom: 16px;
}

.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col ul li a {
  font-size: 14px;
  color: rgba(250,248,244,.72);
  transition: color .2s;
}

.footer-col ul li a:hover { color: var(--cream-white); }

.footer-socials {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-social-link {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: rgba(250,248,244,.72);
  transition: color .2s;
}

.footer-social-link:hover { color: var(--cream-white); }

.social-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: rgba(250,248,244,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

.footer-bottom {
  padding-top: 32px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-legal {
  font-size: 12px;
  color: rgba(250,248,244,.35);
  line-height: 1.6;
  max-width: 480px;
}

.footer-legal a { color: rgba(138,175,155,.7); transition: color .2s; }
.footer-legal a:hover { color: var(--soft-sage); }

.footer-copy {
  font-size: 12px;
  color: rgba(250,248,244,.25);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; }
} */

    /* ============================================================
       3. TRUST BAR
       ============================================================ */
    .trust-bar {
      background: var(--warm-stone);
      border-top: 1px solid var(--muted-blush);
      border-bottom: 1px solid var(--muted-blush);
      padding: 36px 24px;
    }

    .trust-bar-inner {
      max-width: var(--max-w);
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }

    .trust-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 10px;
      padding: 16px 12px;
    }

    .trust-icon {
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .trust-icon img {
      width: 44px;
      height: 44px;
    }

    .trust-label {
      font-family: var(--font-body);
      font-size: 13px;
      font-weight: 500;
      color: var(--deep-forest);
      letter-spacing: .02em;
    }

    .trust-desc {
      font-size: 12px;
      color: #7a756d;
      line-height: 1.4;
    }

    @media (max-width: 640px) {
      .trust-bar-inner { grid-template-columns: repeat(2, 1fr); }
    }

    /* ============================================================
       4. PRODUCTS
       ============================================================ */
    .products {
      background: var(--cream-white);
      padding: var(--section-pad);
    }

    .products-header {
      text-align: center;
      margin-bottom: 56px;
    }

    .products-headline {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(28px, 4vw, 44px);
      color: var(--deep-forest);
      line-height: 1.15;
      margin-bottom: 16px;
    }

    .products-sub {
      font-size: 16px;
      font-weight: 300;
      color: #6b665e;
      max-width: 540px;
      margin: 0 auto;
      font-style: italic;
      font-family: var(--font-accent);
    }

    .products-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
      max-width: var(--max-w);
      margin: 0 auto;
    }

    .product-card {
      background: #fff;
      border: 1px solid var(--muted-blush);
      border-radius: 6px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: box-shadow .2s, transform .2s;
    }

    .product-card:hover {
      box-shadow: 0 8px 32px rgba(44,74,62,.10);
      transform: translateY(-3px);
    }

    /* ⚠️ PLACEHOLDER: Product images.
       Source from Amazon product listings (right-click → Save Image).
       Save to Website/assets/ and replace each .product-img-ph with:
       <img src="assets/product-[name].jpg" alt="Product name" class="product-img">
       Dimensions: ~600×480px, remove background in Canva Pro if available. */
    .product-img-ph {
      width: 100%;
      aspect-ratio: 4/3;
    }

    .product-img {
      width: 100%;
      aspect-ratio: 4/3;
      object-fit: contain;
      padding: 24px;
      background: var(--warm-stone);
    }

    .product-body {
      padding: 24px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      flex: 1;
    }

    .product-badge {
      display: inline-block;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--cream-white);
      background: var(--deep-forest);
      padding: 4px 10px;
      border-radius: 3px;
      align-self: flex-start;
    }

    .product-name {
      font-family: var(--font-display);
      font-weight: 400;
      font-size: 19px;
      color: var(--deep-forest);
      line-height: 1.25;
    }

    .product-desc {
      font-size: 14px;
      color: #7a756d;
      line-height: 1.5;
      flex: 1;
    }

    .product-footer {
      padding: 0 24px 24px;
    }

    /* ⚠️ PLACEHOLDER: Affiliate links.
       Replace href="#AFFILIATE-LINK-PENDING" with real Amazon Associates links.
       Links are built at associates.amazon.com once your account is approved. */
    .product-btn {
      display: block;
      text-align: center;
      background: var(--warm-amber);
      color: var(--cream-white);
      font-family: var(--font-body);
      font-size: 13px;
      font-weight: 500;
      letter-spacing: .06em;
      padding: 12px 20px;
      border-radius: 4px;
      transition: opacity .2s;
    }

    .product-btn:hover { opacity: .85; }

    .products-cta {
      text-align: center;
      margin-top: 48px;
    }

    .products-cta a {
      font-size: 15px;
      font-weight: 500;
      color: var(--deep-forest);
      border-bottom: 1.5px solid var(--soft-sage);
      padding-bottom: 3px;
      letter-spacing: .02em;
      transition: color .2s, border-color .2s;
    }

    .products-cta a:hover { color: var(--warm-amber); border-color: var(--warm-amber); }

    /* Affiliate disclosure */
    .affiliate-disclosure {
      text-align: center;
      margin-top: 20px;
      font-size: 11px;
      color: #9a958e;
      font-style: italic;
    }

    @media (max-width: 768px) {
      .products-grid { grid-template-columns: 1fr; max-width: 400px; }
    }

    @media (min-width: 480px) and (max-width: 768px) {
      .products-grid { grid-template-columns: repeat(2, 1fr); max-width: 100%; }
    }

    /* ===== DESK FEATURE SECTION ===== */
.desk-feature {
  background: #EFECE6;
  padding: 60px 40px;
  margin: 60px 0;
  border-radius: 12px;
}

.desk-feature-inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 50px;
  align-items: center;
}

/* TEXT SIDE */
.desk-label {
  font-size: 12px;
  letter-spacing: 1.5px;
  color: #8A8F88;
  text-transform: uppercase;
  display: block;
  margin-bottom: 12px;
}

.desk-title {
  font-family: 'Playfair Display', serif;
  font-size: 36px;
  color: #1F2A24;
  margin-bottom: 20px;
}

.desk-description {
  font-size: 16px;
  line-height: 1.6;
  color: #3A3F3A;
  margin-bottom: 24px;
  max-width: 480px;
}

/* PRODUCT CALLOUT */
.desk-product h3 {
  font-size: 18px;
  color: #1F2A24;
  margin-bottom: 6px;
}

.desk-sub {
  font-size: 14px;
  color: #6B706B;
  margin-bottom: 20px;
}

/* LINK */
.desk-link {
  font-size: 14px;
  color: #1F2A24;
  text-decoration: none;
  border-bottom: 1px solid rgba(31, 42, 36, 0.3);
  padding-bottom: 2px;
  transition: all 0.2s ease;
}

.desk-link:hover {
  opacity: 0.7;
}

/* IMAGE */
.desk-feature-image img {
  width: 100%;
  border-radius: 10px;
  object-fit: cover;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  .desk-feature-inner {
    grid-template-columns: 1fr;
  }

  .desk-feature {
    padding: 40px 20px;
  }
}
    /* ============================================================
       5. BRAND STORY + PILLARS
       ============================================================ */
    .story {
      background: var(--warm-stone);
      padding: var(--section-pad);
    }

    .story-inner {
      max-width: var(--max-w);
      margin: 0 auto;
    }

    .story-text {
      max-width: 700px;
      margin: 0 auto 64px;
      text-align: center;
    }

    .story-headline {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(28px, 4vw, 44px);
      color: var(--deep-forest);
      line-height: 1.15;
      margin-bottom: 28px;
    }

    .story-headline em { font-style: italic; color: var(--soft-sage); }

    .story-body {
      font-size: 16px;
      font-weight: 300;
      color: #524e47;
      line-height: 1.75;
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    /* Amber divider rule */
    .amber-rule {
      width: 56px;
      height: 3px;
      background: var(--warm-amber);
      margin: 8px auto 28px;
      border: none;
      border-radius: 2px;
    }

    /* Pillar cards */
    .pillars-label {
      text-align: center;
      margin-bottom: 28px;
    }

    .pillars-headline {
      font-family: var(--font-display);
      font-size: 22px;
      font-weight: 400;
      color: var(--deep-forest);
    }

    .pillars-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 16px;
    }

    .pillar-card {
      background: var(--cream-white);
      border: 1px solid var(--muted-blush);
      border-radius: 6px;
      padding: 28px 16px 24px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      transition: box-shadow .2s, transform .2s;
      cursor: default;
    }

    .pillar-card:hover {
      box-shadow: 0 4px 20px rgba(44,74,62,.08);
      transform: translateY(-2px);
    }

    .pillar-icon {
      width: 52px;
      height: 52px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .pillar-icon img {
      width: 52px;
      height: 52px;
    }

    .pillar-name {
      font-family: var(--font-display);
      font-size: 15px;
      font-weight: 700;
      color: var(--deep-forest);
      line-height: 1.2;
    }

    .pillar-desc {
      font-size: 12.5px;
      color: #7a756d;
      line-height: 1.5;
    }

    @media (max-width: 900px) {
      .pillars-grid { grid-template-columns: repeat(3, 1fr); }
    }

    @media (max-width: 560px) {
      .pillars-grid { grid-template-columns: repeat(2, 1fr); }
    }

    /* ============================================================
       6. EMAIL OPT-IN
       ============================================================ */
    .optin {
      background: var(--deep-forest);
      padding: var(--section-pad);
    }

    .optin-inner {
      max-width: 580px;
      margin: 0 auto;
      text-align: center;
    }

    .optin-eyebrow {
      font-family: var(--font-body);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--soft-sage);
      margin-bottom: 16px;
    }

    .optin-headline {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(26px, 4vw, 38px);
      color: var(--cream-white);
      line-height: 1.15;
      margin-bottom: 14px;
    }

    .optin-sub {
      font-size: 15px;
      font-weight: 300;
      color: rgba(250,248,244,.72);
      line-height: 1.65;
      margin-bottom: 36px;
    }

    /* ⚠️ PLACEHOLDER: Email form.
       Connect this form to your email provider (Brevo recommended based on strategy).
       Replace action="#EMAIL-PROVIDER-PENDING" with your Brevo/MailerLite form action URL.
       Or embed the provider's own form HTML here. */
    .optin-form {
      display: flex;
      gap: 0;
      max-width: 440px;
      margin: 0 auto;
      border-radius: 5px;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0,0,0,.25);
    }

    .optin-input {
      flex: 1;
      padding: 16px 20px;
      font-family: var(--font-body);
      font-size: 15px;
      border: none;
      background: var(--cream-white);
      color: var(--charcoal);
      outline: none;
      min-width: 0;
    }

    .optin-input::placeholder { color: #a09a91; }

    .optin-btn {
      background: var(--warm-amber);
      color: var(--cream-white);
      border: none;
      padding: 16px 24px;
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 500;
      letter-spacing: .04em;
      cursor: pointer;
      white-space: nowrap;
      transition: background .2s;
    }

    .optin-btn:hover { background: #b5723e; }

    .optin-fine {
      font-size: 12px;
      color: rgba(250,248,244,.45);
      margin-top: 16px;
    }

    .optin-success {
      font-size: 15px;
      color: var(--soft-sage);
      margin-top: 16px;
      font-family: var(--font-accent);
      font-style: italic;
    }

    .optin-error {
      font-size: 13px;
      color: #e8a090;
      margin-top: 16px;
    }

    @media (max-width: 480px) {
      .optin-form { flex-direction: column; border-radius: 5px; }
      .optin-input { border-radius: 5px 5px 0 0; }
      .optin-btn { border-radius: 0 0 5px 5px; padding: 14px; }
    }

    /* ============================================================
       LEGAL CONTENT
       ============================================================ */
    .legal-section {
      background: var(--cream-white);
      padding: 72px 24px 96px;
    }

    .legal-inner {
      max-width: 760px;
      margin: 0 auto;
    }

    .legal-last-updated {
      font-size: 13px;
      color: #9a958e;
      font-style: italic;
      font-family: var(--font-accent);
      margin-bottom: 48px;
      display: block;
    }

    .legal-intro {
      font-size: 17px;
      font-weight: 300;
      color: var(--charcoal);
      line-height: 1.75;
      margin-bottom: 56px;
      padding-bottom: 40px;
      border-bottom: 1px solid var(--muted-blush);
      font-family: var(--font-accent);
      font-style: italic;
    }

    .legal-section-block {
      margin-bottom: 48px;
    }

    .legal-section-block:last-of-type {
      margin-bottom: 0;
    }

    .legal-h2 {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 22px;
      color: var(--deep-forest);
      line-height: 1.2;
      margin-bottom: 16px;
    }

    .legal-h2::before {
      content: '';
      display: block;
      width: 32px;
      height: 2px;
      background: var(--warm-amber);
      margin-bottom: 14px;
    }

    .legal-p {
      font-size: 15px;
      color: #5a5550;
      line-height: 1.8;
      margin-bottom: 14px;
    }

    .legal-p:last-child { margin-bottom: 0; }

    .legal-p a {
      color: var(--deep-forest);
      border-bottom: 1px solid var(--soft-sage);
      transition: color .2s, border-color .2s;
    }

    .legal-p a:hover {
      color: var(--warm-amber);
      border-color: var(--warm-amber);
    }

    .legal-ul {
      list-style: none;
      padding: 0;
      margin: 14px 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .legal-ul li {
      font-size: 15px;
      color: #5a5550;
      line-height: 1.7;
      padding-left: 20px;
      position: relative;
    }

    .legal-ul li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 11px;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--soft-sage);
    }

    .legal-callout {
      background: var(--warm-stone);
      border-left: 3px solid var(--soft-sage);
      border-radius: 0 6px 6px 0;
      padding: 20px 24px;
      margin: 24px 0;
      font-size: 14px;
      color: #6b665e;
      line-height: 1.7;
      font-family: var(--font-accent);
      font-style: italic;
    }

    /* Highlight box for the core FTC statement */
    .legal-highlight {
      background: var(--cream-white);
      border: 1.5px solid var(--muted-blush);
      border-radius: 8px;
      padding: 28px 32px;
      margin: 32px 0;
      text-align: center;
    }

    .legal-highlight p {
      font-family: var(--font-display);
      font-size: 18px;
      font-weight: 400;
      color: var(--deep-forest);
      line-height: 1.6;
      margin: 0;
    }

    .legal-highlight p em {
      font-style: italic;
      color: var(--warm-amber);
    }

    .legal-divider {
      border: none;
      border-top: 1px solid var(--muted-blush);
      margin: 48px 0;
    }


/* ============================================================
    7. FOOTER
    ============================================================ */
.footer {
  background: var(--charcoal);
  color: var(--cream-white);
  padding: 64px 24px 40px;
}

.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(250,248,244,.1);
}

/* ── Footer brand col ── */
.footer-logo {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--cream-white);
  margin-bottom: 10px;
}

.footer-tagline {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 14px;
  color: var(--soft-sage);
  margin-bottom: 20px;
  line-height: 1.5;
}

.footer-email {
  font-size: 13px;
  color: rgba(250,248,244,.6);
  padding-top: 50px;
  padding-left: 25px;
}

.footer-email a { color: var(--soft-sage); transition: color .2s; }
.footer-email a:hover { color: var(--cream-white); }

/* ── Footer nav cols ── */
.footer-col h4 {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--soft-sage);
  margin-bottom: 16px;
}

.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col ul li a {
  font-size: 14px;
  color: rgba(250,248,244,.72);
  transition: color .2s;
}

.footer-col ul li a:hover { color: var(--cream-white); }

/* ── Footer social ── */
.footer-socials {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-social-link {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: rgba(250,248,244,.72);
  transition: color .2s;
}

.footer-social-link:hover { color: var(--cream-white); }

.social-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: rgba(250,248,244,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

/* ── Footer bottom ── */
.footer-bottom {
  padding-top: 32px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-legal {
  font-size: 12px;
  color: rgba(250,248,244,.35);
  line-height: 1.6;
  max-width: 480px;
}

.footer-legal a { color: rgba(138,175,155,.7); transition: color .2s; }
.footer-legal a:hover { color: var(--soft-sage); }

.footer-copy {
  font-size: 12px;
  color: rgba(250,248,244,.25);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; }
}



/* ============================================================
   SETUPS INDEX PAGE
   ============================================================ */
.setups-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--section-pad);
}

.setup-card {
  background: #fff;
  border: 1px solid var(--muted-blush);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s, transform .2s;
}

.setup-card:hover {
  box-shadow: 0 12px 40px rgba(44,74,62,.12);
  transform: translateY(-4px);
}

.setup-card-img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}

.setup-card-img-ph {
  width: 100%;
  aspect-ratio: 4/3;
}

.setup-card-body {
  padding: 28px 24px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.setup-card-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--warm-amber);
}

.setup-card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--deep-forest);
  line-height: 1.2;
}

.setup-card-desc {
  font-size: 14px;
  color: #7a756d;
  line-height: 1.6;
  flex: 1;
}

.setup-card-footer {
  padding: 0 24px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.setup-card-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--deep-forest);
  border-bottom: 1.5px solid var(--soft-sage);
  padding-bottom: 2px;
  transition: color .2s, border-color .2s;
}

.setup-card-link:hover {
  color: var(--warm-amber);
  border-color: var(--warm-amber);
}

.setup-card-count {
  font-size: 12px;
  color: #9a958e;
  font-style: italic;
}

/* Coming soon card */
.setup-card--coming-soon {
  opacity: .6;
  pointer-events: none;
}

.setup-coming-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--charcoal);
  background: var(--muted-blush);
  padding: 4px 10px;
  border-radius: 3px;
  align-self: flex-start;
}

@media (max-width: 900px) {
  .setups-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .setups-grid { grid-template-columns: 1fr; padding: 48px 24px; }
}

/* ============================================================
   INDIVIDUAL SETUP PAGE
   ============================================================ */
.setup-hero {
  position: relative;
  min-height: 52vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.setup-hero-bg {
  position: absolute;
  inset: 0;
  background-color: #c8b89a;
  background-size: cover;
  background-position: center;
}

.setup-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(12, 18, 14, .90) 0%,
    rgba(12, 18, 14, .58) 52%,
    rgba(44, 74, 62, .28) 100%
  );
}

.setup-hero-content {
  position: relative;
  z-index: 1;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 48px 24px 56px;
  width: 100%;
}

.setup-hero-tag {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--soft-sage);
  margin-bottom: 14px;
}

.setup-hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 5vw, 60px);
  color: var(--cream-white);
  line-height: 1.1;
  margin-bottom: 16px;
  max-width: 700px;
  text-shadow: 0 1px 8px rgba(0,0,0,0.45), 0 3px 20px rgba(0,0,0,0.28);
}

.setup-hero-title em {
  font-style: italic;
  color: var(--soft-sage);
}

.setup-hero-desc {
  font-size: clamp(15px, 2vw, 18px);
  font-weight: 300;
  color: rgba(250,248,244,.92);
  line-height: 1.65;
  max-width: 560px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.38);
}

/* Setup page layout */
.setup-body {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--section-pad);
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 64px;
  align-items: start;
}

/* Products column */
.setup-products-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 3vw, 32px);
  color: var(--deep-forest);
  margin-bottom: 8px;
}

.setup-products-sub {
  font-size: 15px;
  color: #7a756d;
  margin-bottom: 36px;
  font-family: var(--font-accent);
  font-style: italic;
}

.setup-products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

/* Sidebar */
.setup-sidebar {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.setup-sidebar-card {
  background: var(--warm-stone);
  border: 1px solid var(--muted-blush);
  border-radius: 8px;
  padding: 28px 24px;
}

.setup-sidebar-card h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--deep-forest);
  margin-bottom: 12px;
}

.setup-sidebar-card p {
  font-size: 14px;
  color: #7a756d;
  line-height: 1.6;
  margin-bottom: 20px;
}

.setup-budget-total {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  color: var(--warm-amber);
  margin-bottom: 4px;
}

.setup-budget-label {
  font-size: 12px;
  color: #9a958e;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ===== INVESTMENT BOX ===== */

.price-range {
  font-size: 32px;
  color: #C5A46D;
  margin-bottom: 8px;
  font-weight: 500;
}

.price-sub {
  font-size: 13px;
  color: #8A8F88;
  margin-bottom: 18px;
}

.price-description {
  font-size: 14px;
  color: #3A3F3A;
  margin-bottom: 16px;
  line-height: 1.5;
}

.price-breakdown p {
  font-size: 13px;
  color: #6B706B;
  margin: 4px 0;
}

.setup-nav-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.setup-nav-links a {
  font-size: 14px;
  font-weight: 400;
  color: var(--deep-forest);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color .2s;
}

.setup-nav-links a:hover { color: var(--warm-amber); }

.setup-nav-links a::before {
  content: '→';
  color: var(--soft-sage);
  font-size: 13px;
}

/* Amber rule */
.amber-rule {
  width: 56px;
  height: 3px;
  background: var(--warm-amber);
  margin: 8px 0 28px;
  border: none;
  border-radius: 2px;
}

@media (max-width: 900px) {
  .setup-body {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .setup-sidebar { position: static; }
  .setup-products-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .setup-products-grid { grid-template-columns: 1fr; }
}

    /* ============================================================
       BLOG POST LAYOUT
       ============================================================ */
    .post-wrap {
      background: var(--cream-white);
      padding: 0 24px 96px;
    }

    .post-inner {
      max-width: 720px;
      margin: 0 auto;
      padding-top: 64px;
    }

    /* ── Article Typography ── */
    .post-body p {
      font-size: 16px;
      color: #4a4540;
      line-height: 1.85;
      margin-bottom: 22px;
    }

    .post-body h2 {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 24px;
      color: var(--deep-forest);
      line-height: 1.2;
      margin: 48px 0 16px;
    }

    .post-body h2::before {
      content: '';
      display: block;
      width: 28px;
      height: 2px;
      background: var(--warm-amber);
      margin-bottom: 14px;
    }

    .post-body h3 {
      font-family: var(--font-display);
      font-weight: 400;
      font-size: 20px;
      color: var(--deep-forest);
      line-height: 1.25;
      margin: 36px 0 12px;
      font-style: italic;
    }

    .post-body ul {
      list-style: none;
      padding: 0;
      margin: 8px 0 22px 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .post-body ul li {
      font-size: 16px;
      color: #4a4540;
      line-height: 1.7;
      padding-left: 20px;
      position: relative;
    }

    .post-body ul li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 10px;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--soft-sage);
    }

    .post-body strong {
      font-weight: 500;
      color: var(--deep-forest);
    }

    /* Pull quote */
    .post-pullquote {
      border-left: 3px solid var(--warm-amber);
      margin: 36px 0;
      padding: 16px 24px;
      background: var(--warm-stone);
      border-radius: 0 6px 6px 0;
    }

    .post-pullquote p {
      font-family: var(--font-accent);
      font-style: italic;
      font-size: 18px !important;
      color: var(--deep-forest) !important;
      line-height: 1.6 !important;
      margin: 0 !important;
    }

    /* Post divider */
    .post-divider {
      border: none;
      border-top: 1px solid var(--muted-blush);
      margin: 48px 0;
    }

    /* ── Product Callout ── */
    .post-product-callout {
      background: #fff;
      border: 1px solid var(--muted-blush);
      border-radius: 8px;
      padding: 24px;
      margin: 32px 0;
      display: flex;
      gap: 20px;
      align-items: flex-start;
    }

    .post-product-callout-icon {
      width: 44px;
      height: 44px;
      background: var(--warm-stone);
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      flex-shrink: 0;
    }

    .post-product-callout-body {
      flex: 1;
    }

    .post-product-callout-label {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--soft-sage);
      margin-bottom: 4px;
    }

    .post-product-callout-name {
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
      color: var(--deep-forest);
      margin-bottom: 6px;
    }

    .post-product-callout-desc {
      font-size: 13px;
      color: #7a756d;
      line-height: 1.55;
      margin-bottom: 12px;
    }

    .post-product-callout-link {
      display: inline-block;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: .04em;
      color: var(--cream-white);
      background: var(--warm-amber);
      padding: 8px 16px;
      border-radius: 4px;
      transition: opacity .2s;
    }

    .post-product-callout-link:hover { opacity: .85; }

    /* ── Post closing ── */
    .post-closing {
      background: var(--warm-stone);
      border-radius: 8px;
      padding: 32px 36px;
      margin-top: 48px;
      text-align: center;
    }

    .post-closing p {
      font-family: var(--font-accent);
      font-style: italic;
      font-size: 17px !important;
      color: var(--deep-forest) !important;
      line-height: 1.7 !important;
      margin: 0 !important;
    }

    /* ── Related posts ── */
    .post-related {
      margin-top: 64px;
      padding-top: 48px;
      border-top: 1px solid var(--muted-blush);
    }

    .post-related-heading {
      font-family: var(--font-display);
      font-size: 20px;
      font-weight: 700;
      color: var(--deep-forest);
      margin-bottom: 24px;
    }

    .post-related-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
    }

    .post-related-card {
      background: #fff;
      border: 1px solid var(--muted-blush);
      border-radius: 6px;
      padding: 20px;
      transition: box-shadow .2s, transform .2s;
      text-decoration: none;
      display: block;
    }

    .post-related-card:hover {
      box-shadow: 0 4px 16px rgba(44,74,62,.08);
      transform: translateY(-2px);
    }

    .post-related-tag {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--soft-sage);
      margin-bottom: 6px;
    }

    .post-related-title {
      font-family: var(--font-display);
      font-size: 15px;
      font-weight: 700;
      color: var(--deep-forest);
      line-height: 1.3;
    }

    @media (max-width: 560px) {
      .post-related-grid { grid-template-columns: 1fr; }
      .post-product-callout { flex-direction: column; }
    }


    /* ============================================================
       CATEGORY FILTER BAR
       ============================================================ */
    .blog-filter {
      background: var(--warm-stone);
      border-bottom: 1px solid var(--muted-blush);
      padding: 20px 24px;
    }

    .blog-filter-inner {
      max-width: var(--max-w);
      margin: 0 auto;
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    .filter-label {
      font-size: 11px;
      font-weight: 500;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--soft-sage);
      margin-right: 6px;
      white-space: nowrap;
    }

    .filter-pill {
      display: inline-block;
      font-family: var(--font-body);
      font-size: 13px;
      font-weight: 400;
      color: #6b665e;
      background: var(--cream-white);
      border: 1px solid var(--muted-blush);
      border-radius: 100px;
      padding: 7px 16px;
      cursor: pointer;
      transition: background .18s, color .18s, border-color .18s;
      text-decoration: none;
      white-space: nowrap;
    }

    .filter-pill:hover,
    .filter-pill.active {
      background: var(--deep-forest);
      color: var(--cream-white);
      border-color: var(--deep-forest);
    }

    /* ============================================================
       BLOG GRID
       ============================================================ */
    .blog-section {
      background: var(--cream-white);
      padding: 64px 24px 80px;
    }

    .blog-section-inner {
      max-width: var(--max-w);
      margin: 0 auto;
    }

    .blog-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px;
    }

    @media (max-width: 900px) {
      .blog-grid { grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 560px) {
      .blog-grid { grid-template-columns: 1fr; }
    }

    /* ── Blog Card ── */
    .blog-card {
      background: #fff;
      border: 1px solid var(--muted-blush);
      border-radius: 8px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: box-shadow .2s, transform .2s;
    }

    .blog-card:hover {
      box-shadow: 0 8px 32px rgba(44,74,62,.10);
      transform: translateY(-3px);
    }

    .blog-card--coming-soon {
      opacity: .75;
      pointer-events: none;
    }

    /* ⚠️ PLACEHOLDER: Replace .blog-card-img-ph with:
       <img src="assets/blog-[slug].jpg" alt="Post title" class="blog-card-img">
       Recommended size: 800×500px (16:10 ratio), warm lifestyle aesthetic.
       Generate via Midjourney or source from royalty-free sites. */
    .blog-card-img-ph {
      width: 100%;
      aspect-ratio: 16/10;
    }

    .blog-card-img {
      width: 100%;
      aspect-ratio: 16/10;
      object-fit: cover;
    }

    .blog-card-body {
      padding: 24px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      flex: 1;
    }

    .blog-card-meta {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    .blog-card-category {
      display: inline-block;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--cream-white);
      background: var(--deep-forest);
      padding: 4px 10px;
      border-radius: 3px;
    }

    .blog-card-category--amber { background: var(--warm-amber); }
    .blog-card-category--sage  { background: var(--soft-sage); color: var(--deep-forest); }

    .blog-card-readtime {
      font-size: 12px;
      color: #9a958e;
      font-style: italic;
      font-family: var(--font-accent);
    }

    .blog-coming-badge {
      display: inline-block;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: #9a958e;
      background: var(--warm-stone);
      border: 1px solid var(--muted-blush);
      padding: 4px 10px;
      border-radius: 3px;
    }

    .blog-card-title {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 19px;
      color: var(--deep-forest);
      line-height: 1.25;
    }

    .blog-card-excerpt {
      font-size: 14px;
      color: #7a756d;
      line-height: 1.6;
      flex: 1;
    }

    .blog-card-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 500;
      color: var(--deep-forest);
      margin-top: 8px;
      border-bottom: 1.5px solid var(--soft-sage);
      padding-bottom: 2px;
      width: fit-content;
      transition: color .2s, border-color .2s;
    }

    .blog-card-link:hover {
      color: var(--warm-amber);
      border-color: var(--warm-amber);
    }

/* ============================================================
   AMAZON PICKS / SHOP PAGE
   ============================================================ */

/* Hero text (built on the .page-hero dark-green base) */
.shop-hero-eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--soft-sage);
  margin-bottom: 16px;
}

.shop-hero-headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 5vw, 52px);
  color: var(--cream-white);
  line-height: 1.1;
  margin-bottom: 20px;
}

.shop-hero-headline em {
  font-style: italic;
  color: var(--soft-sage);
}

.shop-hero-sub {
  font-size: clamp(15px, 2vw, 18px);
  font-weight: 300;
  color: rgba(250,248,244,.80);
  line-height: 1.65;
  max-width: 560px;
  margin: 0 auto;
}

/* Category sections */
.shop-section {
  padding: 72px 24px 80px;
  background: var(--cream-white);
}

.shop-section--alt {
  background: var(--warm-stone);
}

.shop-section-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}

.shop-section-header {
  margin-bottom: 48px;
}

.shop-section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 3.5vw, 38px);
  color: var(--deep-forest);
  line-height: 1.15;
  margin-bottom: 12px;
}

.shop-section-sub {
  font-size: 16px;
  font-weight: 300;
  color: #6b665e;
  font-family: var(--font-accent);
  font-style: italic;
}

/* Scroll offset so sticky nav doesn't cover section headings on anchor jump */
.shop-anchor {
  scroll-margin-top: 100px;
}

/* ============================================================
   UTILITY
   ============================================================ */
.text-center { text-align: center; }
.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-32 { margin-top: 32px; }