/*
 * be.Bold — Our Material (Oleatex)
 * ================================
 * Extracted from beboldv3/our-material.html with tools/extract-page-css.py: of its rules 221 were
 * dead on this page and 128 already existed in shell.css. Of what remained, the shared section
 * patterns (.split, .statement, .sect-head, .src-note, .mstat) went into shell.css; what is below
 * is specific to this page, plus the three per-page overrides every inner page carries — the
 * .page-hero tuning, the .sect rhythm tightening and the shop band's inner-page padding.
 *
 * Declarations are flattened in cascade order, so a property set in more than one of the design's
 * <style> blocks keeps the value that actually won.
 */

/* Was style="background:var(--cream-alt)" inline on the section in the design file. */
.material-what--solo{grid-template-columns:1fr;background:var(--cream-alt)}
.material-what--solo .split-copy{align-items:center;text-align:center;max-width:min(96%,1060px);margin:0 auto}
.material-what--solo .split-copy .body-sm{max-width:78ch}
.material-what--solo .rule{margin-left:auto;margin-right:auto}
.origin .split-copy .body-sm{max-width:none}
.shopband{padding:clamp(10px,1.4vw,18px) var(--pad);background:var(--sand-hi);padding-bottom:clamp(46px,6vw,92px)}
.page-hero{padding-top:var(--hdr-h);min-height:min(66vh,540px);align-items:flex-start}
.page-hero .hero-img{object-position:66% 46%}
.page-hero .hero-fade{background:linear-gradient(100deg,rgba(234,226,216,.94) 0%,rgba(234,226,216,.78) 24%,rgba(234,226,216,.34) 48%,rgba(234,226,216,0) 64%)}
.page-hero .eyebrow{margin:0 0 14px}
.page-hero .hero-inner p{font-size:clamp(.88rem,1.1vw,1rem);line-height:1.85;max-width:53ch}
@media(max-width:900px){
  .page-hero .hero-fade{background:linear-gradient(180deg,rgba(234,226,216,.95) 0%,rgba(234,226,216,.72) 42%,rgba(234,226,216,.32) 68%,rgba(234,226,216,.06) 100%)}
}
.page-hero .hero-inner{padding-left:calc(var(--pad) + clamp(22px,3vw,58px));padding-top:clamp(34px,7vh,86px)}
@media(max-width:900px){
  .page-hero .hero-img{object-position:70% 42%}
}
.sect{padding-top:clamp(22px,2.5vw,38px);padding-bottom:clamp(22px,2.5vw,38px)}
/* The rest of this page's "tighter vertical rhythm" (client, 2026-08-14). It belongs HERE, not in
   shell.css: promoting it with the .statement base leaked Our Material's spacing onto every other
   page and pushed the Commitment page's closing band 20px out of place. */
.statement{padding-top:clamp(20px,2.4vw,36px);padding-bottom:clamp(20px,2.4vw,36px)}
.origin-facts{padding-top:clamp(20px,2.4vw,32px)}
.fact-figures{display:grid;grid-template-columns:repeat(3,1fr);max-width:900px;margin:0 auto;background:var(--sand-hi);border-radius:10px;padding:clamp(24px,3vw,40px) clamp(10px,2vw,30px)}
.ffig{padding:0 clamp(12px,2vw,30px);text-align:center}
.ffig+.ffig{border-left:1px solid var(--hair)}
.ffig-num{display:block;font-family:'Poppins',sans-serif;font-weight:600;font-size:clamp(1.5rem,2.4vw,2.2rem);color:var(--green);line-height:1;letter-spacing:.01em}
.ffig-lbl{display:block;font-size:.66rem;letter-spacing:.02em;color:var(--muted);line-height:1.55;margin-top:11px}
@media(max-width:640px){
  .fact-figures{grid-template-columns:1fr;gap:22px}
  .ffig+.ffig{border-left:0;border-top:1px solid var(--hair);padding-top:22px}
}
.process{padding-top:clamp(22px,2.5vw,38px);padding-bottom:clamp(22px,2.5vw,38px)}
.proc-flow{list-style:none;margin:clamp(26px,3vw,44px) 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:clamp(8px,1vw,14px)}
.proc-step{flex:1 1 148px;max-width:186px;text-align:center;padding:0 4px}
.proc-num{display:flex;align-items:center;justify-content:center;width:clamp(42px,4.1vw,52px);height:clamp(42px,4.1vw,52px);margin:0 auto 16px;border-radius:50%;background:var(--green);color:var(--cream);font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:500;font-size:clamp(1.12rem,1.6vw,1.48rem);line-height:1; font-variant-numeric:lining-nums;font-feature-settings:'lnum' 1;transition:background .45s ease,transform .55s cubic-bezier(.2,.7,.3,1)}
.proc-step:hover .proc-num{background:var(--gold);transform:translateY(-6px)}
.proc-t{font-size:clamp(.94rem,1.1vw,1.08rem);letter-spacing:.12em;text-transform:uppercase;color:var(--green);font-weight:400;margin:0 0 10px}
.proc-d{font-size:clamp(.81rem,.95vw,.9rem);line-height:1.7;color:var(--muted);margin:0}
.proc-x{flex:0 0 auto;align-self:flex-start;margin-top:calc(clamp(42px,4.1vw,52px)/2);transform:translateY(-50%);color:var(--gold);opacity:.8;font-size:clamp(1.1rem,1.5vw,1.45rem);line-height:1}
@media(max-width:860px){
  .proc-x{display:none}
  .proc-step{flex:1 1 42%;max-width:none;margin-bottom:clamp(20px,4vw,28px)}
}
@media(max-width:470px){
  .proc-step{flex:1 1 100%}
}
.perf{background:var(--sand-hi)}
.perf-intro+.perf-intro{margin-top:1.15em}
.perf-intro{text-align:center;max-width:min(94%,1060px);margin:clamp(18px,2vw,26px) auto 0;color:var(--muted);font-size:clamp(.88rem,1.1vw,1rem);line-height:1.85}
.perf-stats{max-width:1180px;margin:clamp(24px,2.8vw,38px) auto 0;padding-top:0;padding-bottom:0;padding-left:0;padding-right:0}
@media(max-width:1024px){
  /*
   * The base rule strips all four paddings so the band can sit flush inside .wrap on desktop.
   * Below 1024 shell.css puts the side inset back on .mat-stats, and that longhand reset would
   * out-order it (this file loads later), leaving the two-across cells touching the screen edge.
   */
  .perf-stats{max-width:560px;padding-left:var(--pad);padding-right:var(--pad)}
}
.perf-compare{text-align:center;margin-top:clamp(28px,3.2vw,42px);display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.perf-compare p{font-size:clamp(.88rem,1.1vw,1rem);color:var(--muted);margin:0 0 20px}