/* ==========================================================================
   MREMBO NATURALS — POLISH LAYER (3 Nov 2026)
   --------------------------------------------------------------------------
   Loaded last on every public page. Two jobs:
     1. Re-balance layouts after the final-copy changes.
     2. Make the site warmer and less plain using the brand's own palette:
        light, borderless cards and cream / soft-amber bands instead of
        large black areas.
   Rules: Quicksand only, rounded corners, NO borders on cards, minimal
   soft shadows in the brand's amber shade. The footer is not touched.
   ========================================================================== */

:root{
  --p-ink:#1E1810;          /* brand ink */
  --p-body:#62615C;         /* brand body text */
  --p-cream:#F8F7F3;        /* brand cream: section bands */
  --p-card:#FBF6EC;         /* light warm card on white */
  --p-amber-soft:#FCF0D6;   /* soft amber band */
  --p-amber:#F9C349;        /* brand amber */
  --p-amber-deep:#D88F04;
  --p-amber-text:#8A5400;   /* amber for small text on light (passes AA) */
  --p-shadow:0 18px 40px -26px rgba(138,84,0,0.28);
  --p-radius:20px;
}

/* ---------- 1. Light, borderless cards ---------------------------------- */
.card, .pillar, .metric, .doc-card, .why-card{
  background:var(--p-card) !important;
  border:0 !important;
  border-radius:var(--p-radius) !important;
  box-shadow:none !important;
}
.card:hover, .pillar:hover, .metric:hover{ box-shadow:var(--p-shadow) !important; }

/* Grey bands become brand cream, and cards on them turn white. */
section[style*="#F5F5F5"], section[style*="#F9F9F9"], section[style*="var(--cream-2)"]{
  background:var(--p-cream) !important;
}
section[style*="#F5F5F5"] .card, section[style*="#F9F9F9"] .card, section[style*="var(--cream-2)"] .card,
section[style*="#F5F5F5"] .pillar, section[style*="#F9F9F9"] .pillar{
  background:#FFFFFF !important;
}

/* Buttons that were drawn for dark bands, re-drawn for light ones. */
.p-light .btn-outline-cream{
  background:transparent !important; border:1.1px solid var(--p-ink) !important; color:var(--p-ink) !important;
}
.p-light .btn-outline-cream:hover{ background:var(--p-ink) !important; color:#FFFFFF !important; }

/* Shared look for the soft-amber call-to-action bands. */
.p-band{
  background:var(--p-amber-soft) !important;
  color:var(--p-ink) !important;
}
.p-band h2, .p-band h3{ color:var(--p-ink) !important; }
.p-band p{ color:var(--p-body) !important; }
.p-band .eyebrow, .p-band .b2b-eyebrow{ color:var(--p-amber-text) !important; }

/* Warm photo bands: the photo stays visible, the black wash goes. */
@media (hover:none), (max-width:900px){
  section[style*="fixed no-repeat"], .home-v2 .h3-hair, .home-v2 .q-band, .home-v2 #careers-teaser{ background-attachment:scroll !important; }
}

/* ---------- 2. HOME ------------------------------------------------------ */
/* Hero: a warm photo shows while the video loads (or if it cannot). */
.home-v2 .h3-hero, .home-v2 .h3-hero .hero-bg{
  background:#2A2016 url(/assets/lifestyle/hair-care-botanicals.jpg) center/cover no-repeat !important;
}
.home-v2 .h3-hero .hero-shade{
  background:linear-gradient(180deg, rgba(30,24,16,0.52), rgba(30,24,16,0.66)) !important;
}

/* Botanicals 01 / 02 / 03 become soft cards. */
.home-v2 .h3-numbers{ border-top:0 !important; gap:1.3rem !important; padding-top:0.6rem !important; }
.home-v2 .h3-numbers article{
  background:var(--p-card) !important; border:0 !important; border-radius:var(--p-radius) !important;
  padding:1.8rem 1.7rem !important; box-shadow:none !important;
}

/* ---------- 3. OUR IMPACT ------------------------------------------------ */
#page-impact .pillar{ padding:1.7rem 1.6rem !important; gap:0.55rem; }

/* Impact in numbers: two per row on phones, softer gaps. */
#page-impact #imp-metrics{ gap:1rem !important; }
@media (max-width:780px){ #page-impact #imp-metrics{ grid-template-columns:1fr 1fr !important; } }
@media (max-width:420px){ #page-impact #imp-metrics .metric{ padding:1.2rem 1rem !important; } }
#page-impact .metric-val{ color:var(--p-amber-deep) !important; }

/* Farm to product: each step is a small card with an amber number. */
#page-impact .journey-static{ gap:0.8rem !important; }
#page-impact .journey-static .j-step{
  background:var(--p-card) !important; border:0 !important; border-radius:16px !important;
  padding:1.2rem 1.1rem !important; min-height:6.4rem; box-shadow:none !important;
}
#page-impact .journey-static .j-dot{ display:none !important; }
#page-impact .journey-static .j-num{ color:var(--p-amber-text) !important; }

/* Farmer value: lighter warm wash over the photo. */
#page-impact #imp-value{
  background:linear-gradient(90deg, rgba(30,24,16,0.74), rgba(30,24,16,0.62)), url('/assets/impact/farmers-01.jpeg') center/cover no-repeat !important;
}
#page-impact #imp-value .lede{ color:#FFF6E3 !important; }

/* What farmers get: three amber-tinted cards with a check mark. */
#page-impact .value-item{
  background:var(--p-amber-soft) !important; flex-direction:row !important; align-items:center; gap:0.9rem !important;
}
#page-impact .value-item h3{ color:var(--p-ink) !important; font-size:1.02rem !important; }
#page-impact .value-ico{
  flex:0 0 2.3rem; width:2.3rem; height:2.3rem; border-radius:50%; background:var(--p-amber);
  display:flex; align-items:center; justify-content:center;
}
#page-impact .value-ico svg{ width:1.05rem; height:1.05rem; fill:none; stroke:var(--p-ink); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }

/* Giving back: photo and text in one soft card. */
#page-impact .giving-back{
  margin-top:1.6rem !important; display:grid; grid-template-columns:0.9fr 1.1fr; align-items:center;
  background:#F2F2F2; border-radius:var(--p-radius); overflow:hidden;
}
#page-impact .giving-photo{ height:260px; }
#page-impact .giving-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
#page-impact .giving-copy{ padding:2rem 2.2rem; }
@media (max-width:760px){ #page-impact .giving-back{ grid-template-columns:1fr; } #page-impact .giving-photo{ min-height:200px; } }

/* Closing call to action: soft amber band, not black. */
#page-impact > section:last-of-type{ background:var(--p-amber-soft) !important; color:var(--p-ink) !important; }
#page-impact > section:last-of-type h2{ color:var(--p-ink) !important; }
#page-impact > section:last-of-type p{ color:var(--p-body) !important; }

/* ---------- 4. OUR STORY ------------------------------------------------- */
#page-story .founder-p, .founder-p{ margin-top:0.9rem; }
.founder-p:first-of-type{ margin-top:0; }
.story-figs{ gap:1rem !important; }
@media (max-width:980px){ .story-figs{ grid-template-columns:1fr 1fr !important; } }
.story-figs .card{ padding:1.6rem 1.2rem !important; }
.story-about-grid .photo img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:600px){ .story-about-grid{ gap:1.6rem !important; } .story-about-grid .photo{ height:240px !important; } }

/* ---------- 5. FOR BUSINESS ---------------------------------------------- */
#biz-quote{ background:var(--p-cream) !important; color:var(--p-ink) !important; }
#biz-quote h2{ color:var(--p-ink) !important; }
#biz-quote p{ color:var(--p-body) !important; }
#biz-quote .eyebrow{ color:var(--p-amber-text) !important; }
#biz-quote .card{ background:#FFFFFF !important; box-shadow:var(--p-shadow) !important; }

/* ---------- 6. INGREDIENTS ------------------------------------------------ */
.b2b-cat-head p{ flex:1 1 100% !important; max-width:72ch; margin-top:0.2rem; }
.ing-card{ background:var(--p-card) !important; border:0 !important; box-shadow:none !important; border-radius:var(--p-radius) !important; }
.ing-card:hover{ box-shadow:var(--p-shadow) !important; }
#page-ingredients #b2b-results{ margin-top:0.4rem; }
#ing-samples{ background:var(--p-cream) !important; }
#page-ingredients > section:last-of-type{ background:var(--p-amber-soft) !important; color:var(--p-ink) !important; }
#page-ingredients > section:last-of-type h2{ color:var(--p-ink) !important; }
#page-ingredients > section:last-of-type p{ color:var(--p-body) !important; }

/* Ingredient detail pages */
.sourcing-card{ background:var(--p-card) !important; color:var(--p-ink) !important; border:0 !important; }
.sourcing-card h3{ color:var(--p-ink) !important; }
.sourcing-card p{ color:var(--p-body) !important; }
.sourcing-card .b2b-eyebrow{ color:var(--p-amber-text) !important; }
.sourcing-card .sc-row{ background:#FFFFFF !important; border:0 !important; }
.sourcing-card .sc-row .k{ color:var(--p-amber-text) !important; }
.sourcing-card .sc-row .v{ color:var(--p-ink) !important; }
.sourcing-card .btn-outline-cream{ border:1.1px solid var(--p-ink) !important; color:var(--p-ink) !important; background:transparent !important; }
main > section:last-of-type[style*="var(--ink)"]{ background:var(--p-amber-soft) !important; color:var(--p-ink) !important; }
main > section:last-of-type[style*="var(--ink)"] h2{ color:var(--p-ink) !important; }
main > section:last-of-type[style*="var(--ink)"] p{ color:var(--p-body) !important; }
main > section:last-of-type[style*="var(--ink)"] .btn-outline-cream{ border:1.1px solid var(--p-ink) !important; color:var(--p-ink) !important; background:transparent !important; }

/* ---------- 7. CONTACT ---------------------------------------------------- */
#contact-form{ }
.card:has(> #contact-form){ background:var(--p-card) !important; }
.card:has(> #contact-form) input, .card:has(> #contact-form) select, .card:has(> #contact-form) textarea{ background:#FFFFFF !important; }

/* Outline buttons inside the light call-to-action bands */
#page-impact > section:last-of-type .btn-outline-cream,
#page-ingredients > section:last-of-type .btn-outline-cream{
  background:transparent !important; border:1.1px solid var(--p-ink) !important; color:var(--p-ink) !important;
}
#page-impact > section:last-of-type .btn-outline-cream:hover,
#page-ingredients > section:last-of-type .btn-outline-cream:hover{ background:var(--p-ink) !important; color:#FFFFFF !important; }

/* Home: shop rows on brand cream instead of grey */
.home-v2 .h3-shop, .home-v2 .h3-featured{ background:var(--p-cream) !important; }
.home-v2 .h3-cat .photo, .home-v2 .h3-products .pcard{ box-shadow:none !important; }

/* Our Story: advisors sit in soft cards */
#page-story .team-lead{ background:var(--p-card) !important; border:0 !important; box-shadow:none !important; border-radius:var(--p-radius) !important; }

/* Home, phones: stack section heads and lay the farm-to-world path out in rows */
@media (max-width:700px){
  .home-v2 .h3-head{ flex-direction:column !important; align-items:flex-start !important; gap:0.9rem !important; }
  .home-v2 .h3-head .lede{ max-width:none !important; }
  .home-v2 .h3-path{ display:grid !important; grid-template-columns:repeat(3,1fr) !important; row-gap:1.4rem !important; }
  .home-v2 .h3-path li{ flex:none !important; font-size:0.8rem !important; padding:0 0.2rem; }
  .home-v2 .h3-path li::before{ display:none !important; }
}
@media (max-width:700px){
  .home-v2 #our-botanicals .h3-head{ grid-template-columns:1fr !important; gap:0.9rem !important; }
}

/* ==========================================================================
   Round 2 (3 Nov, evening): Bruno's page-by-page notes
   ========================================================================== */

/* Impact map panel: plain, no box. The photo stays. */
#page-impact .loc-photo{ border-radius:16px; overflow:hidden; aspect-ratio:4/3; margin-bottom:0.6rem; }
#page-impact .loc-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
#page-impact .loc-panel{ background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important; }

/* Careers: "Send your CV" fills with full orange on hover */
.btn-cv:hover, .btn-cv:focus-visible{
  background:#D88F04 !important; border-color:#D88F04 !important; color:#000000 !important;
}

/* Home: no rule line under the shop rows (the band colour already divides) */
.home-v2 .h3-botanicals{ border-top:0 !important; }

/* Home: customer reviews on a fixed photo with a black wash, endless slider */
.home-v2 .q-band{
  background:linear-gradient(rgba(0,0,0,0.78), rgba(0,0,0,0.78)), url(/assets/lifestyle/model-03.jpeg) center/cover fixed no-repeat !important;
  color:#FFFFFF !important; padding:6.5rem 0 !important; overflow:hidden;
}
.home-v2 .q-band .eyebrow{ color:var(--p-amber) !important; margin-bottom:2.2rem; }
.q-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:2rem; }
.home-v2 .q-band .q-head .eyebrow{ margin:0 !important; }
.q-arrows{ display:flex; gap:0.6rem; }
.q-arrow{
  width:2.8rem; height:2.8rem; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,0.12); color:#FFFFFF; font-size:1.1rem;
  transition:background-color .25s ease, color .25s ease;
}
.q-arrow:hover, .q-arrow:focus-visible{ background:#D88F04; color:#000000; }
.q-viewport{ overflow:hidden; }
.q-track{ display:flex; column-gap:1.4rem; will-change:transform; }
.q-card{
  flex:0 0 calc((100% - 2.8rem) / 3); margin:0; display:flex; flex-direction:column; gap:1.2rem;
  background:rgba(255,255,255,0.08); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border:0; border-radius:22px; padding:2rem 2rem 1.7rem; min-height:15rem;
}
@media (max-width:980px){ .q-card{ flex-basis:calc((100% - 1.4rem) / 2); } }
@media (max-width:640px){ .q-card{ flex-basis:100%; padding:1.6rem; } .home-v2 .q-band{ padding:4.5rem 0 !important; } }
.q-mark{ font-family:'Quicksand',sans-serif; font-weight:700; font-size:3.6rem; line-height:0.5; color:var(--p-amber); height:1.6rem; }
.q-card blockquote{ margin:0; font-family:'Quicksand',sans-serif; font-weight:500; font-size:1.18rem; line-height:1.5; color:#FFFFFF; flex:1; }
.q-card figcaption{ display:flex; align-items:center; gap:0.8rem; }
.q-avatar{ width:2.6rem; height:2.6rem; border-radius:50%; background:#000000; color:var(--p-amber); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1rem; }
.q-card figcaption b{ display:block; font-weight:700; font-size:0.92rem; color:#FFFFFF; }
.q-card figcaption em{ display:block; font-style:normal; font-size:0.74rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--p-amber); margin-top:0.15rem; }

/* Home: Join our team back on a fixed photo with a black wash, layout unchanged */
.home-v2 #careers-teaser{
  background:linear-gradient(rgba(0,0,0,0.74), rgba(0,0,0,0.74)), url(/assets/impact/community-group-01.jpeg) center/cover fixed no-repeat !important;
}