/*
 * be.Bold — Care Guide
 * ====================
 * Extracted from beboldv3/care-guide.html, which carried FIVE <style> blocks: the shared homepage
 * sheet plus the page blocks of Founder's Story, A Commitment to Sustainability, Our Material and
 * finally its own — an artefact of how the page was sliced from a sibling. 291 of those rules were
 * dead on this page and are dropped; 102 duplicated shell.css and are dropped; what remains is
 * below, with each selector's declarations FLATTENED in cascade order.
 *
 * ⚑ That flattening preserves two inheritances the Care Guide picks up by accident, because they
 * are part of the approved rendering: .page-hero .hero-inner takes `padding-left` from the
 * Commitment block and `padding-top` from the Our Material block. Do not "tidy" them away without
 * re-checking the page against beboldv3/care-guide.html.
 *
 * .page-hero, the .sect rhythm tightening and the shop band's inner-page padding will move into a
 * shared inner-page layer once a second inner page lands and it is clear what is genuinely common.
 */

.shopband{background:var(--cream);padding:clamp(10px,1.4vw,18px) var(--pad);padding-top:clamp(30px,3.6vw,56px);padding-bottom:clamp(46px,6vw,92px)}
.page-hero{padding-top:var(--hdr-h);min-height:min(60vh,500px);align-items:center}
.page-hero .hero-img{object-position:50% 56%}
.page-hero .hero-fade{background:linear-gradient(100deg,rgba(234,226,216,.95) 0%,rgba(234,226,216,.8) 26%,rgba(234,226,216,.36) 50%,rgba(234,226,216,0) 66%)}
.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,.9) 0%,rgba(234,226,216,.72) 34%,rgba(234,226,216,.4) 58%,rgba(234,226,216,.12) 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:74% 50%}
}
.sect{padding-top:clamp(22px,2.5vw,38px);padding-bottom:clamp(22px,2.5vw,38px)}
.care-intro{padding-top:clamp(24px,2.7vw,38px);padding-bottom:clamp(24px,2.8vw,40px)}
.care-intro .ctr{max-width:min(94%,1240px)}
.care-intro .intro-copy{max-width:none;margin:0 auto;color:var(--muted);font-size:clamp(.94rem,1.2vw,1.07rem);line-height:1.9;text-wrap:balance}
.care-intro .intro-copy strong{color:var(--green);font-weight:500}
/* The intro is a WYSIWYG field, so its copy arrives wrapped in <p>; the design had the class on the
   <p> itself. Zeroing the inner margin makes the two render identically. */
.care-intro .intro-copy p{margin:0}
.care-intro .intro-copy p + p{margin-top:1.15em}
/* Was style="padding-top:0" inline on the ledger section in the design file. */
.care-ledger{padding-top:0}
.care-close{padding-top:clamp(24px,2.8vw,40px);padding-bottom:clamp(6px,.8vw,12px)}
.care-close .dsp{font-size:clamp(.91rem,1.45vw,1.29rem);line-height:1.55}
.care-close .care-sub{margin:14px 0 0;color:var(--muted);font-size:clamp(.9rem,1.15vw,1.03rem);line-height:1.8}
.care-card{max-width:1040px;margin:0 auto;background:var(--sand-hi);border:1px solid var(--hair);border-radius:6px;overflow:hidden}
.care-item{display:grid;grid-template-columns:clamp(170px,18vw,232px) 1fr}
.care-item + .care-item{border-top:1px solid var(--hair)}
.care-label{background:var(--beige);border-right:1px solid var(--hair);text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(10px,1.2vw,16px);padding:clamp(26px,2.8vw,38px) clamp(14px,1.6vw,24px)}
.care-ico{width:clamp(36px,3.6vw,50px);height:auto;display:block;color:var(--green);fill:currentColor;flex:0 0 auto}
.care-label h3{margin:0;font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:500;color:var(--green);letter-spacing:-.005em;line-height:1.15;font-size:clamp(.95rem,1.37vw,1.24rem)}
.care-lines{padding:clamp(26px,2.8vw,38px) clamp(22px,3vw,48px);display:flex;flex-direction:column;justify-content:center}
.care-lines ul{list-style:none;margin:0;padding:0}
.care-lines li{position:relative;padding-left:28px;color:var(--muted);font-size:clamp(.88rem,1.1vw,1rem);line-height:1.8}
.care-lines li + li{margin-top:clamp(11px,1.1vw,15px)}
.care-lines ul li::before{content:"";position:absolute;left:2px;top:.6em;width:7px;height:7px;border:1px solid var(--gold);transform:rotate(45deg)}
@media(max-width:760px){
  .care-item{grid-template-columns:1fr}
  .care-label{flex-direction:row;justify-content:flex-start;text-align:left;border-right:0;border-bottom:1px solid var(--hair);gap:14px;padding:clamp(16px,4vw,22px) clamp(18px,5vw,26px)}
  .care-ico{width:34px}
  .care-lines{padding:clamp(20px,5vw,28px) clamp(18px,5vw,26px)}
}