/*
 * be.Bold — A Commitment to Sustainability
 * ========================================
 * Extracted with tools/extract-page-css.py: 181 rules were dead on this page and 138 already
 * existed in shell.css. Nothing new needed lifting into the shared layer this time — the .split,
 * .statement and .sect-head patterns added with Our Material already cover it, which is the shared
 * layer starting to settle.
 *
 * Two page-level overrides worth knowing about:
 *   .split-copy .body-sm  drops shell.css's 42ch cap to none — this page runs its split copy full
 *                         width, and page CSS loads after shell.css so it wins.
 *   .material-split       carries the section background and the nowrap on the heading's last two
 *                         words, both of which were inline style attributes in the design file.
 */

/* Was style="background:var(--sand-hi)" on the section in the design file. */
.material-split{background:var(--sand-hi)}
/* Was <span style="white-space:nowrap"> inside the heading in the design file. */
.material-split .dsp span{white-space:nowrap}

.split-copy .body-sm{margin-top:26px;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(64vh,517px)}
.page-hero .hero-img{object-position:50% 50%}
.page-hero .hero-fade{background:linear-gradient(100deg,rgba(234,226,216,.92) 0%,rgba(234,226,216,.72) 28%,rgba(234,226,216,.30) 50%,rgba(234,226,216,0) 66%)}
.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}
.page-hero .hero-inner{padding-left:calc(var(--pad) + clamp(22px,3vw,58px))}
@media(max-width:900px){
  .page-hero .hero-img{object-position:72% 58%}
  .page-hero .hero-fade{background:linear-gradient(180deg,rgba(234,226,216,.95) 0%,rgba(234,226,216,.84) 44%,rgba(234,226,216,.56) 70%,rgba(234,226,216,.10) 100%)}
}
.problem{position:relative;background:#F6EDE6;padding-top:clamp(24px,3vw,48px)}
.problem-bg{display:block;width:80%;height:auto;margin-right:auto}
@media(min-width:1301px){
  .problem-bg{aspect-ratio:25/10;height:auto;object-fit:cover;object-position:50% 0%}
}
.problem-copy{position:absolute;top:calc(clamp(24px,3vw,48px) + clamp(10px,1.6vw,26px));right:2.5%;width:min(52%,700px);padding:0 0 0 24px}
.problem-copy .dsp{margin-top:8px}
.problem-copy .body-sm{margin-top:14px;max-width:64ch}
.cost-inline{margin-top:clamp(24px,3vw,38px);max-width:520px}
.cost-inline .eyebrow{color:var(--muted)}
.cost-inline .rule{margin:12px 0 20px}
.cost-figures{display:grid;grid-template-columns:repeat(3,1fr)}
.cfig{padding:0 clamp(8px,1.2vw,18px)}
.cfig:first-child{padding-left:0}
.cfig+.cfig{border-left:1px solid var(--hair)}
.cfig-num{display:block;font-family:'Poppins',sans-serif;font-weight:600;font-size:clamp(1.4rem,2.1vw,1.95rem);color:var(--green);line-height:1;letter-spacing:.01em}
.cfig-lbl{display:block;font-size:.62rem;letter-spacing:.02em;color:var(--muted);line-height:1.5;margin-top:9px}
.cost-note{font-size:.6rem;font-style:italic;color:var(--muted);opacity:.8;margin:11px 0 0}
@media(max-width:1300px){
  .problem-copy{position:static;transform:none;width:auto;padding:clamp(26px,6vw,40px) var(--pad) clamp(14px,4vw,24px)}
  /*
   * ⚑ FULL WIDTH ONCE THE COPY STOPS OVERLAYING — client review, 15 Sep 2026: "the problem section.
   * image should be bigger full width on the mobile".
   *
   * `.problem-bg` is 80% wide and left-aligned above this breakpoint, which is there to leave the
   * right of the band clear for `.problem-copy` sitting on top of it. The line right above this one
   * takes that copy static, so from here down the 80% reserves space for something that is no
   * longer there — it just left the illustration inset from the right edge with dead background
   * beside it. Measured 300px inside a 375px viewport before this.
   *
   * Same shape of bug as the 70% cap on Founder's Story: a width reserved for an overlay that the
   * mobile layout has already removed.
   */
  .problem-bg{width:100%}
}
@media(max-width:560px){
  .cfig{padding:0 8px}
  .cfig-lbl{font-size:.58rem}
}
.synthetic{background:#F6EDE6;padding-top:clamp(28px,3vw,44px);padding-bottom:clamp(28px,3vw,44px)}
.synth2-grid{display:grid;grid-template-columns:1fr;justify-items:center;text-align:center}
.synth2-copy{max-width:min(96%,1060px);display:flex;flex-direction:column;align-items:center}
.synth2-copy .body-sm{max-width:none;text-wrap:pretty;margin-top:20px}
.synth2-copy .dsp{margin-top:12px}
.synth2-copy .body-sm+.body-sm{margin-top:16px}
.synth2-copy .btn{margin-top:clamp(24px,2.6vw,32px);align-self:center}
.synth2-copy .rule{margin-left:auto;margin-right:auto}
@media(max-width:900px){
  .synth2-grid{gap:clamp(30px,6vw,44px)}
  .synth2-copy{max-width:52ch}
}
.material-split figure{min-height:0;overflow:visible;display:flex;align-items:center;justify-content:flex-end;padding:clamp(30px,4vw,64px) clamp(16px,1.8vw,32px) clamp(30px,4vw,64px) var(--pad)}
.material-split figure img{width:100%;max-width:clamp(368px,39vw,540px);height:auto;aspect-ratio:5/4;border-radius:8px}
@media(max-width:900px){
  .material-split figure{padding:var(--pad) var(--pad) 0;justify-content:center}
  .material-split figure img{max-width:min(78vw,420px);aspect-ratio:3/2}
}