body.home-page #main #how{background:#111410;color:#eeede4;padding:28px 0 40px;overflow:hidden}body.home-page #main #how .work-layout{display:block}body.home-page #main #how .work-opening{position:relative;isolation:isolate;display:flex;align-items:flex-start;min-height:0;margin-bottom:20px}body.home-page #main #how .work-intro{position:relative;z-index:2;width:43%;padding:0}body.home-page #main #how .work-intro p{color:#d4d7c9}body.home-page #main #how .work-material{position:absolute;inset:0 0 0 30%;z-index:0;margin:0;border:0}body.home-page #main #how .work-material img{display:block;width:100%;height:100%;max-height:none;aspect-ratio:auto;object-fit:contain;object-position:right center;border:0;mask-image:linear-gradient(to right,transparent,#000 38%,#000 94%,transparent),linear-gradient(to bottom,transparent,#000 10%,#000 88%,transparent);mask-composite:intersect;-webkit-mask-image:linear-gradient(to right,transparent,#000 38%,#000 94%,transparent),linear-gradient(to bottom,transparent,#000 10%,#000 88%,transparent);-webkit-mask-composite:source-in}body.home-page #main #how .work-opening:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to right,#111410 0%,rgba(17,20,16,.94) 30%,rgba(17,20,16,.75) 42%,transparent 62%)}body.home-page #main #how .work-steps ol{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}body.home-page #main #how .work-steps ol:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:#818a64;transform-origin:left center}body.home-page #main #how .work-steps li{border:0;padding:52px 0 24px;min-width:0}body.home-page #main #how .work-steps li:before{top:14px;color:#aab38b}body.home-page #main #how .work-steps li h3{margin:0 0 16px}body.home-page #main #how .work-steps li p{opacity:1;color:#bfc2b4}
@media(prefers-reduced-motion:no-preference){#how.progression-ready:not(.progression-visible) .work-steps ol:before{transform:scaleX(0)}#how.progression-ready:not(.progression-visible) .work-steps li:before,#how.progression-ready:not(.progression-visible) .work-steps h3{opacity:0}#how.progression-ready .work-steps ol:before{transition:transform 1.1s ease}#how.progression-ready .work-steps li:before,#how.progression-ready .work-steps h3{transition:opacity .45s ease;transition-delay:.1s}#how.progression-ready .work-steps li:nth-child(2):before,#how.progression-ready .work-steps li:nth-child(2) h3{transition-delay:.4s}#how.progression-ready .work-steps li:nth-child(3):before,#how.progression-ready .work-steps li:nth-child(3) h3{transition-delay:.7s}}
@media(max-width:800px){body.home-page #main #how{padding:24px 0 32px}body.home-page #main #how .work-opening{display:block;padding-top:clamp(170px,44vw,280px);min-height:0;margin-bottom:20px}body.home-page #main #how .work-intro{width:100%;padding:12px 0 0}body.home-page #main #how .work-material{inset:0 0 auto;height:clamp(190px,49vw,310px)}body.home-page #main #how .work-material img{object-position:center;mask-image:linear-gradient(to bottom,#000 75%,transparent);-webkit-mask-image:linear-gradient(to bottom,#000 75%,transparent)}body.home-page #main #how .work-opening:after{display:none}body.home-page #main #how .work-steps ol{display:block;padding-left:24px}body.home-page #main #how .work-steps ol:before{top:0;bottom:0;left:0;right:auto;width:1px;height:auto;transform-origin:center top}body.home-page #main #how .work-steps li{padding:32px 0 28px}body.home-page #main #how .work-steps li:before{top:0}body.home-page #main #how .work-steps li:last-child{padding-bottom:0}@media(prefers-reduced-motion:no-preference){#how.progression-ready:not(.progression-visible) .work-steps ol:before{transform:scaleY(0)}}}

/* Align the connector with the numbers and keep a clear mobile text gutter. */
@media(min-width:801px){body.home-page #main #how .work-steps ol:before{top:26px;right:calc(33.333% - 45px)}body.home-page #main #how .work-steps li:before{z-index:1;background:#111410;padding-right:12px}body.home-page #main #how .work-steps li h3{min-height:3.6em}}
@media(max-width:800px){body.home-page #main #how .work-steps ol{padding-left:28px}body.home-page #main #how .work-steps li h3{min-height:0}}
@media(prefers-reduced-motion:reduce){body.home-page #main #how .work-steps ol:before,body.home-page #main #how .work-steps li:before,body.home-page #main #how .work-steps h3{opacity:1;transform:none;transition:none}}
/* Accessible, independently expandable steps. */
body.home-page #main #how .work-step-disclosure{border:0;padding:0;background:transparent}
body.home-page #main #how .work-step-disclosure summary{display:flex;align-items:flex-start;gap:16px;cursor:pointer;list-style:none;padding:0;color:#eeede4}
body.home-page #main #how .work-step-disclosure summary::-webkit-details-marker{display:none}
body.home-page #main #how .work-step-disclosure summary:after{display:none}
body.home-page #main #how .work-step-disclosure summary:focus-visible{outline:1px solid #aab38b;outline-offset:6px}
body.home-page #main #how .work-step-disclosure summary h3{flex:1;min-height:0;margin:0}
body.home-page #main #how .step-toggle{flex:0 0 20px;color:#aab38b;font:24px/1.4 Manrope,sans-serif}
body.home-page #main #how .step-toggle:before{content:'+'}
body.home-page #main #how details[open] .step-toggle:before{content:'−'}
body.home-page #main #how .step-description{padding-top:16px}
@media(prefers-reduced-motion:no-preference){body.home-page #main #how details[open] .step-description{animation:step-reveal .2s ease-out}@keyframes step-reveal{from{opacity:0}to{opacity:1}}}
