/* Timestamp: 2025-08-31T14:55:16Z (ISO 8601, UTC) */
/* Timestamp: 2025-08-31T03:55:49Z (ISO 8601, UTC) */
/* Vita Roots Base Styles */
:root{--bg-sage:#ecefdf;--bg-sand:#f6f0e2;--ink:#1c1a16;--muted-ink:#4f4638;
  --bg:#0f0f0f;
  --fg:#f5f3ef;
  --muted:#c9c3bb;
  --brand:#9b6437; /* warm brown/copper */
  --brand-2:#2e3a2c; /* earthy green */
  --card:#1a1a1a;
  --surface:#141414;
  --band:#2b2a26;
  --header-bg:#f2ecdf; /* beige background from logo */
  --nav-link:#1c3a27;  /* deep green for nav links */
  --max:1120px;
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.25);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;line-height:1.55}
h1,h2,h3,h4{font-family:"Playfair Display",serif;margin:0 0 .5rem}
h1{font-size:clamp(2.4rem,4.5vw,4rem);line-height:1.05}
h2{font-size:clamp(1.6rem,3vw,2.2rem)}
p{color:var(--muted)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block;border-radius:12px}

.container{max-width:var(--max);margin-inline:auto;padding:0 20px}
.center{text-align:center}
.narrow{max-width:800px}
.section{padding:64px 0}
.section.alt{background:#121212;border-top:1px solid #242424;border-bottom:1px solid #242424}

/* Topbar */
.topbar {
  position:sticky;
  top:0;
  background:var(--header-bg);   /* beige background */
  border-bottom:1px solid #d8d1c4;
  z-index:10;
}
.topbar .container{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px}
.brand{display:flex;align-items:center;gap:10px}
.logo-horizontal{height:48px;width:auto}
.nav{display:flex;gap:18px;align-items:center}
.nav a{color:var(--nav-link);font-weight:500;opacity:.95}
.nav a:hover{opacity:1;text-decoration:underline}
.nav .btn{margin-left:8px}

/* Hero */
.hero{background:
  linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.7)),
  url('/images/hero-texture.jpg') center/cover no-repeat;
  color:var(--fg);
  padding:110px 0 90px;
  border-bottom:1px solid #242424;
}
.hero-inner{max-width:900px}
.hero h1 span{font-weight:600;opacity:.95
  
}
.hero h1 strong{color:var(--brand)}
.hero p{
  

  
  
  

  margin: 0 0 36px;
  padding-top: 34px;
  padding-bottom: 34px;
}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}

/* Buttons */
.btn{display:inline-block;padding:12px 18px;border-radius:999px;border:1px solid #3a3a3a;background:#1b1b1b;color:var(--fg);box-shadow:var(--shadow);transition:transform .06s ease,opacity .2s}
.btn:hover{transform:translateY(-1px);opacity:.95}
.btn-primary{background:var(--brand);border-color:transparent;color:white}
.btn-outline{background:transparent;border-color:#3a3a3a}
.btn-ghost{background:transparent;border-color:transparent}

/* Pills */
.pill-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.pill{border:1px solid #3a3a3a;border-radius:999px;padding:8px 12px;color:#d8d4cd;background:#141414}

/* Grid */
.grid-2{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center}
@media (max-width: 880px){.grid-2{grid-template-columns:1fr}}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:26px}
@media (max-width: 960px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 620px){.cards{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid #232323;border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.card.feature{padding:24px}
.card .card-badge{display:inline-block;background:var(--brand-2);color:#d6e3d3;border-radius:999px;padding:6px 10px;font-size:.8rem;margin-bottom:10px}
.card.product img{aspect-ratio: 16/10; object-fit:cover}
.card-body{padding:16px}
.link{color:#d9c1ae}

/* Lists */
.checklist{padding-left:18px}
.checklist li{margin:.4rem 0}
.bullets{padding-left:18px}
.bullets li{margin:.35rem 0}

/* Process */
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:18px}
.process .step{background:#151515;border:1px solid #262626;border-radius:12px;padding:16px}
.process .step h5{margin:0 0 .25rem}

/* Band */
.band{background:linear-gradient(90deg,#2a2a24,#233022);border-top:1px solid #34342f;border-bottom:1px solid #34342f}
.newsletter-form{display:flex;gap:10px;justify-content:center;margin:12px 0 6px}
.newsletter-form input{padding:12px 14px;border-radius:10px;border:1px solid #3a3a3a;background:#111;color:#eee;min-width:260px}

/* Contact */
.contact-card{background:#141414;border:1px solid #242424;border-radius:12px;padding:18px}
.contact-form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.contact-form input,.contact-form select,.contact-form textarea{width:100%;padding:12px 14px;border-radius:10px;border:1px solid #343434;background:#111;color:#eee}
@media (max-width:700px){.contact-form .row{grid-template-columns:1fr}}

/* Footer */
.footer{background:#101010;border-top:1px solid #242424;margin-top:40px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.5fr;gap:20px;padding:28px 20px}
.footer h5{margin-bottom:.5rem}
.footer ul{list-style:none;margin:0;padding:0}
.footer li{margin:.35rem 0}
.footer .socials a{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid #2d2d2d;border-radius:999px;margin-right:8px}
.footer .legal{border-top:1px solid #1f1f1f;padding:14px 20px;text-align:center;color:#a39d94}
/* === Vital Roots Header Overrides (Appended) === */
.topbar{
  background: var(--header-bg) !important;
  border-bottom: 1px solid #d8d1c4;
  backdrop-filter: none;
}
.logo-horizontal{ height:48px; width:auto; display:block; }
.nav a{ color: var(--nav-link) !important; font-weight: 500; opacity: .95; }
.nav a:hover{ opacity: 1; text-decoration: underline; }

/* === Traditional Processing Method (mockup match) === */
.panel{
  background:#f1eadf;
  border:1px solid #e6dcc9;
  border-radius:20px;
  padding:32px 26px 28px;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
}
.panel.soft{padding:36px 28px}

.panel .lead{max-width:900px;margin:6px auto 22px;color:var(--muted-ink)}

.bg-sand .process{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:18px}
@media (max-width: 960px){.bg-sand .process{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 560px){.bg-sand .process{grid-template-columns:1fr}}

.bg-sand .process .step{
  background:transparent;
  border:none;
  border-radius:0;
  padding:10px 12px;
  text-align:center;
  color:var(--ink);
  box-shadow:none;
}

.bg-sand .process .step h5{
  margin:8px 0 6px;
  font-size:1.05rem;
  color:var(--ink);
}

.bg-sand .process .step p{
  margin:0;
  color:var(--muted-ink);
}

/* Circular numbered badges */
.badge{
  width:60px;height:60px;border-radius:50%;
  background:#fff;
  margin:0 auto 10px;
  position:relative;
  box-shadow:0 6px 16px rgba(0,0,0,.12);
}
.badge::before{
  content:"";position:absolute;inset:12px;border-radius:50%;
  background:#6b3e21; /* deep brown inner circle */
}
.badge span{
  position:relative;z-index:1;color:#fff;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;
}

/* Light sand section typography */
.bg-sand{background:var(--bg-sand); border-top:1px solid #e9e1cf; border-bottom:1px solid #e9e1cf}
.bg-sand.on-light, .bg-sand.on-light h1, .bg-sand.on-light h2, .bg-sand.on-light h3, .bg-sand.on-light h4{color:var(--ink)}
.bg-sand.on-light p{color:var(--muted-ink)}

/* Tagline next to logo */
.tagline-header{font-size:.95rem;color:var(--nav-link);font-weight:600;white-space:nowrap}
@media (max-width: 720px){.tagline-header{display:none}}

/* Process panel readability */
.section.bg-sand.on-light .panel{color:var(--ink)}
.section.bg-sand.on-light .panel h1,
.section.bg-sand.on-light .panel h2,
.section.bg-sand.on-light .panel h3,
.section.bg-sand.on-light .panel h4{color:var(--ink)}
.section.bg-sand.on-light .panel p{color:var(--muted-ink)}

/* === Mission section: header-tone background without borders === */
.bg-header{background:var(--header-bg);border-top:0;border-bottom:0}
.bg-header.on-light, .bg-header.on-light h1, .bg-header.on-light h2, .bg-header.on-light h3, .bg-header.on-light h4{color:var(--ink)}
.bg-header.on-light p{color:var(--muted-ink)}

/* === Premium Product Line — feature split === */
.panel-white{
  background:#ffffff;
  border:1px solid #e6dcc9;
  border-radius:18px;
  padding:28px 24px;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
}
.feature-split{
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap:26px;
  align-items:center;
  margin-top:24px;
}
.feature-card h3{font-size:clamp(1.6rem,2.6vw,2rem);margin:.25rem 0 .5rem;color:var(--ink)}
.feature-card p{color:var(--muted-ink);margin:0 0 12px}
.hero-badge{
  display:inline-block;
  background:#d9b08a;
  color:#5a351c;
  border-radius:999px;
  padding:6px 12px;
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.02em;
  text-transform:uppercase;
  margin-bottom:12px;
}
.check{list-style:none;margin:12px 0 16px;padding:0}
.check li{position:relative;padding-left:28px;margin:.4rem 0;color:var(--muted-ink)}
.check li::before{
  content:"✓";
  position:absolute;left:0;top:0;
  color:var(--brand-2);
  font-weight:800;
}
.feature-media img{
  width:100%;height:auto;display:block;border-radius:18px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  object-fit:cover;
}
.feature-card .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}

@media (max-width: 960px){
  .feature-split{grid-template-columns:1fr}
  .feature-media{order:2}
  .feature-card{order:1}
}



/* === Sage background helper for sections === */
.bg-sage{background:var(--bg-sage); border-top:1px solid rgba(0,0,0,.06); border-bottom:1px solid rgba(0,0,0,.06)}
.bg-sage.on-light, .bg-sage.on-light h1, .bg-sage.on-light h2, .bg-sage.on-light h3, .bg-sage.on-light h4{color:var(--ink)}
.bg-sage.on-light p{color:var(--muted-ink)}


/* === Mobile header: logo + tagline only (hide menu) === */
@media (max-width: 880px){
  .nav{display:none !important;}
  .topbar .container{justify-content:flex-start; gap:12px; padding:12px 16px;}
  .logo-horizontal{height:40px;}
  .brand{gap:10px;}
}
/* Keep tagline visible and wrap on very small screens */
@media (max-width: 720px){
  .tagline-header{display:block !important; font-size:.84rem; line-height:1.2; white-space:normal; color:var(--nav-link);}
}


/* Timestamp: 2025-08-31T03:55:49Z (ISO 8601, UTC) — Premium section equal-height tweak */
.feature-split{align-items:stretch;}
.feature-card{height:100%;}
.feature-media{align-self:stretch;height:100%;}
.feature-media img{height:100%;width:100%;object-fit:cover;}
@media (max-width: 960px){
  .feature-card{height:auto;}
  .feature-media{height:auto;}
  .feature-media img{height:auto;}
}

/* === Product cards section === */
.bg-wash{background:#f4efe6;border-top:1px solid rgba(0,0,0,.06);border-bottom:1px solid rgba(0,0,0,.06)}
.section-subtitle{color:var(--muted-ink);}

.products-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}
@media (max-width:1024px){.products-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:720px){.products-grid{grid-template-columns:1fr;}}

.prod-card{background:#fff;border:1px solid #e6dcc9;border-radius:14px;overflow:hidden;box-shadow:0 8px 20px rgba(0,0,0,.06);display:flex;flex-direction:column;}
.img-placeholder{background:linear-gradient(180deg,#eee3cf,#e7e0d1);aspect-ratio:4/3;width:100%;}
.prod-body{padding:14px 16px}
.prod-body h4{margin:0 0 6px;color:var(--ink)}
.prod-body p{margin:0;color:var(--muted-ink);font-size:.95rem}

/* === Explore the Line (product-cards) image sizing & spacing === */
#product-cards .card-img{
  width:100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display:block;
  border-bottom:1px solid #e9e1cf;
}
#product-cards .prod-card{gap:0;}
#product-cards .prod-body{padding:14px 16px 16px;}
#product-cards .prod-body h4{margin:0 0 6px;}
#product-cards .prod-body p{margin:0;}

/* From Root to Ritual header color fix (only affects #product-cards title) */
#product-cards h2 { color: var(--ink); }

/* Responsive hero p spacing tweak (2025-08-31 16:36:53) */
@media (max-width: 720px) {
  .hero p {
    margin-bottom: 24px;
  
  margin: 0 0 36px;
  padding-top: 34px;
  padding-bottom: 34px;
}
}

/* Added hero h1 spacing 2025-08-31 17:50:09 */
.hero h1{
  margin-bottom: 48px;
}