/* A-REST: additions only; approved PA5 rules and motion driver remain intact. */
.rest-page{position:relative;isolation:isolate;overflow:clip;background:var(--cream)}
.rest-page::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(#FAFBEFA8,#FAFBEFA8),url('media/courtyard-floor.webp') center top/100% 1150px repeat-y}
.rest-section{position:relative;padding:clamp(70px,7vw,140px) var(--page-gutter);max-width:2160px;margin-inline:auto}
.rest-section h2{margin:0;font-size:clamp(48px,6.1vw,100px);font-weight:700;line-height:1.2}
.rest-section h3{margin:0;font-size:clamp(23px,2.5vw,38px);font-weight:600;line-height:1.25}
.rest-copy{font-size:clamp(16px,1.3vw,22px);line-height:1.85}
.rest-copy p+p{margin-top:1.2em}
.rest-note{font:400 clamp(25px,2.7vw,44px)/1.5 Sriracha,cursive}
.rest-note svg{display:block;width:100%;height:44px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rest-circle{display:block;aspect-ratio:1;overflow:hidden;border:5px solid var(--cream);border-radius:50%;background:var(--cream);box-shadow:0 8px 24px #58452a22}
.rest-circle img{width:100%;height:100%;object-fit:cover}
.rest-leaf{position:absolute;pointer-events:none;width:clamp(170px,20vw,360px);z-index:3;filter:blur(.5px)}
.rest-leaf-left{left:-100px;bottom:-75px;transform:rotate(22deg)}
.rest-leaf-right{right:-110px;top:30px;transform:scaleX(-1)}
.cycle-section{max-width:none;padding-top:12px;padding-bottom:clamp(100px,10vw,190px);color:var(--cream);background:var(--teal)}
.cycle-section::before{content:"";position:absolute;inset:0;pointer-events:none;background:url('media/courtyard.webp') center/cover;mix-blend-mode:soft-light;opacity:.12}
.cycle-layout{position:relative;max-width:1800px;margin-inline:auto;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,6vw,120px);align-items:center}
.cycle-copy{position:relative;z-index:1}
.cycle-copy .rest-copy{margin-top:32px}
.cycle-copy .rest-note{margin-top:32px;max-width:360px}
.cycle-art{position:relative;color:var(--teal);padding:40px 0}
.cycle-art::before{content:"";position:absolute;z-index:-1;inset:-110px -40vw -80px -5%;background:linear-gradient(#FAFBEF28,#FAFBEF28),url('media/courtyard-floor.webp') center/cover #f7efdf;clip-path:polygon(7% 0,100% 0,100% 100%,0 100%,3% 89%,1% 81%,5% 70%,2% 61%,6% 52%,3% 41%,8% 30%,5% 19%,9% 9%)}
.cycle-orbit{position:relative;list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:110px 60px}
.cycle-orbit li{position:relative;min-width:0;text-align:center}
.cycle-orbit li:nth-child(3){grid-area:2/2}
.cycle-orbit li:nth-child(4){grid-area:2/1}
.cycle-orbit .rest-circle{width:100%;max-width:270px;margin-inline:auto}
.cycle-orbit figcaption{font:400 clamp(22px,2.1vw,34px)/1.4 Sriracha,cursive;margin-top:12px}
.cycle-step{position:absolute;font:400 clamp(19px,1.9vw,30px)/1.4 Sriracha,cursive;white-space:nowrap}
.cycle-step svg{display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;width:100%;height:48px}
.step-sort{width:100px;left:calc(100% - 18px);top:30%}
.step-wash{width:150px;left:30%;top:calc(100% + 8px);transform:rotate(75deg)}
.step-melt{width:100px;right:calc(100% - 18px);top:30%;transform:rotate(180deg)}
.step-melt span{display:block;transform:rotate(180deg)}
.step-return{width:85px;right:68%;bottom:calc(100% + 18px);transform:rotate(-80deg)}
.cycle-section::after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:75px;background:var(--cream);clip-path:polygon(0 28%,8% 40%,16% 33%,25% 52%,34% 49%,44% 68%,53% 60%,62% 76%,70% 68%,80% 85%,89% 78%,100% 96%,100% 100%,0 100%)}
@media(max-width:1000px){.cycle-layout{grid-template-columns:1fr;gap:80px}.cycle-art{max-width:680px;width:100%;margin:auto}.cycle-art::before{inset:-25px -100vw -50px;clip-path:polygon(0 5%,12% 2%,30% 7%,50% 0,75% 6%,100% 2%,100% 100%,0 100%)}.rest-section h2{font-size:clamp(40px,6.1vw,70px)}}
@media(max-width:700px){.rest-section{padding:58px 24px}.rest-section h2{font-size:clamp(31px,8.4vw,48px)}.rest-section .title-line{white-space:normal}.rest-copy{font-size:16px}.rest-note{font-size:26px}.cycle-layout{gap:60px}.cycle-section{padding-top:0;padding-bottom:90px}.cycle-orbit{gap:95px 44px}.cycle-orbit figcaption{font-size:22px}.cycle-step{font-size:20px}.step-sort{width:74px;left:calc(100% - 14px)}.step-wash{width:110px;left:5%;top:calc(100% + 20px)}.step-melt{width:70px;right:calc(100% - 12px)}.step-return{width:72px;bottom:calc(100% + 18px)}.rest-leaf{width:180px}.rest-leaf-left{left:-115px}.rest-leaf-right{right:-125px}}
.products-section{padding-top:clamp(48px,5vw,100px)}
.rest-heading-row{display:flex;justify-content:space-between;align-items:center;gap:32px;margin-bottom:clamp(30px,3vw,60px)}
.rest-heading-row>.rest-note{max-width:330px;flex:0 1 28%;transform:rotate(-7deg)}
.product-group{margin-top:40px}
.product-group h3{position:relative;z-index:2;margin-bottom:14px}
.product-scene{position:relative;margin-inline:calc(-1 * var(--page-gutter));width:calc(100% + 2 * var(--page-gutter));max-width:1584px;justify-self:center}
.product-scene img{width:100%;height:auto;mask-image:linear-gradient(to bottom,transparent,#000 9%,#000 90%,transparent);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 9%,#000 90%,transparent)}
.product-scene-home{aspect-ratio:1584/993}
.product-scene-garden{aspect-ratio:1672/941;max-width:1672px}
.product-leaders{position:absolute;inset:0;margin:0;padding:0;list-style:none;pointer-events:none;font:400 clamp(17px,2vw,32px)/1.4 Sriracha,cursive}
.product-leaders li{position:absolute;min-width:80px;text-align:center}
.product-leaders span{display:inline-block;padding:4px 12px;background:radial-gradient(ellipse,#FAFBEFF5 40%,#FAFBEF00 73%)}
.product-leaders svg{display:block;width:100%;height:clamp(28px,5.5vw,90px);fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.label-basket{left:16%;top:18%}.label-can{left:43%;top:3%}.label-bucket{left:58%;top:24%}.label-basin{left:79%;top:47%}
.label-nursery{left:13%;top:1%}.label-fertilizer{left:48%;top:0}.label-sprayer{left:80%;top:0}.label-mat{left:15%;top:78%}.label-throw{left:59%;top:78%}
.label-mat svg,.label-throw svg{transform:rotate(180deg);height:36px}
.product-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;align-items:center;padding-top:30px;font-size:clamp(17px,1.5vw,25px);line-height:1.8}
.product-social{display:block;width:100%;font-size:clamp(15px,1.2vw,20px);padding-block:10px;min-height:44px}
@media(max-width:700px){.rest-heading-row{display:block}.rest-heading-row>.rest-note{max-width:240px;margin:24px 0 20px auto;font-size:25px}.product-group{margin-top:26px}.product-group h3{font-size:21px}.product-leaders{font-size:15px}.product-leaders li{min-width:45px}.product-leaders span{padding:3px 5px}.product-leaders svg{height:25px}.label-can{left:42%;top:0}.label-basket{left:12%;top:16%}.label-bucket{left:57%;top:22%}.label-basin{left:78%;top:42%}.label-nursery{left:4%;top:0}.label-fertilizer{left:43%;top:-2%}.label-sprayer{left:76%;top:-2%}.label-mat{left:12%;top:77%}.label-throw{left:55%;top:77%}.label-mat svg,.label-throw svg{height:20px}.product-meta{padding-top:32px;font-size:17px}.product-social{font-size:15px}}
.rest-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,4vw,80px);align-items:center}
.purchase-heading{font-size:clamp(38px,4.4vw,76px)!important}
.purchase-heading .title-line{white-space:normal}
.purchase-heading .title-small{font-size:.7em;margin-top:.28em}
.purchase-options{margin-top:36px;display:grid;gap:36px}
.purchase-options h3{font-size:clamp(20px,1.65vw,28px)}
.purchase-options p{font-size:clamp(16px,1.2vw,21px);line-height:1.8;margin:10px 0 18px}
.rest-scene{position:relative;min-width:0}
.rest-scene img{width:100%;height:auto;mask-image:linear-gradient(transparent,#000 9%,#000 91%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 9%,#000 91%,transparent)}
.purchase-photo{margin-right:calc(-1 * var(--page-gutter));margin-left:-20px}
.purchase-photo img{aspect-ratio:1.05;object-fit:cover;object-position:68% 50%}
@media(max-width:1000px){.rest-split{grid-template-columns:1fr}.purchase-photo{margin-inline:calc(-1 * var(--page-gutter))}.purchase-photo img{aspect-ratio:1584/993;object-fit:contain}.purchase-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.purchase-heading{font-size:clamp(38px,6vw,65px)!important}}
@media(max-width:700px){.purchase-options{grid-template-columns:1fr}.purchase-heading{font-size:clamp(31px,8.2vw,46px)!important}.purchase-photo{margin-top:-12px}.purchase-options h3{font-size:21px}}
.cooperation-section .rest-heading-row{align-items:end}
.cooperation-section h2{font-size:clamp(44px,5.5vw,92px)}
.cooperation-subtitle{font-size:clamp(23px,2.6vw,42px);font-weight:600;line-height:1.3;margin-top:20px;max-width:1050px}
.cooperation-intro{max-width:1100px;margin-top:24px}
.cooperation-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3vw,60px);margin:44px 0 38px;padding:0;list-style:none}
.cooperation-groups li{position:relative;padding-inline-end:14px}
.cooperation-groups li+li::before{content:"";position:absolute;left:calc(-1 * clamp(11px,1.5vw,30px));top:16px;bottom:12px;width:1px;background:#1F4C5455}
.cooperation-groups svg{width:56px;height:56px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:15px}
.cooperation-groups h3{font-size:clamp(20px,1.8vw,30px)}
.cooperation-groups p{font-size:clamp(15px,1.2vw,21px);line-height:1.8;margin-top:12px}
.cooperation-visual{position:relative;margin-inline:calc(-1 * var(--page-gutter));max-width:1672px;justify-self:center;width:calc(100% + 2 * var(--page-gutter))}
/* Replace only the img with a real video later: same media ratio and object fit. */
.cooperation-media{aspect-ratio:1672/941;overflow:hidden;mask-image:linear-gradient(transparent,#000 5%,#000 94%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 5%,#000 94%,transparent)}
.cooperation-media>img,.cooperation-media>video{width:100%;height:100%;object-fit:cover}
.cooperation-detail{position:absolute;width:25%;right:2%;bottom:-11%;aspect-ratio:1;border:5px solid var(--cream);border-radius:50%;overflow:hidden;box-shadow:0 8px 24px #58452a22}
.cooperation-detail img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.cooperation-actions{display:flex;justify-content:center;padding-top:40px;padding-right:22%}
@media(max-width:1000px){.cooperation-section h2{font-size:clamp(40px,6vw,66px)}}
@media(max-width:700px){.cooperation-groups{grid-template-columns:1fr;gap:24px;margin:28px 0}.cooperation-groups li{padding-left:58px}.cooperation-groups svg{position:absolute;left:0;top:0;width:40px;height:40px}.cooperation-groups li+li::before{display:none}.cooperation-groups h3{font-size:21px}.cooperation-groups p{margin-top:7px}.cooperation-subtitle{font-size:24px}.cooperation-section h2{font-size:clamp(31px,8.4vw,48px)}.cooperation-detail{width:28%;bottom:-15%}.cooperation-actions{padding-top:60px;padding-right:0}.cooperation-actions .button{white-space:normal}.cooperation-actions .button-label{white-space:normal;text-align:center}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.years-section{padding-top:60px}
.years-banner{position:relative;width:calc(100% + 2 * var(--page-gutter));max-width:1584px;margin-inline:calc(-1 * var(--page-gutter));justify-self:center}
.years-banner img{width:100%;height:auto;mask-image:linear-gradient(transparent,#000 7%,#000 90%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 7%,#000 90%,transparent)}
.years-copy{position:relative;max-width:1200px;margin-top:20px}
.years-copy h2{font-size:clamp(36px,4.4vw,72px)}
.years-copy .title-line{white-space:normal}
.years-copy .rest-copy{max-width:1050px;margin-top:26px}
.years-affiliate{margin-top:24px;font-size:clamp(16px,1.35vw,23px);line-height:1.8}
@media(max-width:700px){.years-section{padding-top:40px}.years-copy h2{font-size:clamp(29px,7.6vw,44px)}}
.faq-section h2{font-size:clamp(36px,4.4vw,72px)}
.faq-list{margin-top:32px}
.faq-item{border-bottom:1px solid #1F4C5480}
.faq-item:first-child{border-top:1px solid #1F4C5480}
.faq-item summary{position:relative;cursor:pointer;list-style:none;min-height:60px;padding:18px 38px 18px 4px;font-size:clamp(18px,1.6vw,27px);font-weight:600;line-height:1.5}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:8px;top:18px;font-size:24px;font-weight:400;line-height:1.4}
.faq-item[open] summary::after{content:"−"}
.faq-item summary:focus-visible{outline:3px solid var(--teal);outline-offset:4px}
.faq-item p{margin:0;padding:0 30px 22px 4px;font-size:clamp(16px,1.25vw,22px);line-height:1.85}
.faq-photo{width:100%;max-width:600px;justify-self:center}
@media(max-width:1000px){.faq-photo{width:65%;max-width:500px}}
@media(max-width:700px){.faq-section h2{font-size:clamp(31px,8.4vw,48px)}.faq-item summary{font-size:18px}.faq-photo{width:80%;max-width:350px;margin-top:10px}}
.contact-section h2{font-size:clamp(42px,5.5vw,90px)}
.contact-subtitle{font-size:clamp(23px,2.6vw,42px);font-weight:600;line-height:1.35;margin-top:18px;max-width:1050px}
.contact-content{margin-top:38px;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.contact-list{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.contact-list li{display:flex;align-items:flex-start;gap:15px;font-size:clamp(16px,1.3vw,22px);line-height:1.7}
.contact-list a{display:block;min-height:44px;padding-block:8px;text-decoration:none}
.contact-list a:hover{text-decoration:underline}
.contact-list svg,.contact-map svg{flex:0 0 24px;width:24px;height:24px;margin-top:10px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.contact-list address{font-style:normal;padding-block:8px}
.contact-hours{padding-block:8px}
.contact-map{margin-top:22px}
.contact-map svg{margin-top:0}
.contact-photo{margin-right:calc(-1 * var(--page-gutter));margin-left:-25px}
.site-footer{position:relative;max-width:2160px;margin-inline:auto;padding:0 var(--page-gutter) 40px;text-align:center}
.footer-wordmark{font-size:clamp(40px,17.7vw,360px);font-weight:700;line-height:1.2;margin:0;white-space:nowrap}
.footer-bottom{display:flex;align-items:center;justify-content:center;gap:30px;flex-wrap:wrap;padding-top:25px;font-size:clamp(13px,1.1vw,18px);line-height:1.8}
.footer-logo{width:140px;height:auto}
@media(max-width:1000px){.contact-content{grid-template-columns:1fr}.contact-photo{margin-inline:calc(-1 * var(--page-gutter));margin-top:20px}}
@media(max-width:700px){.contact-section h2{font-size:clamp(31px,8.4vw,48px)}.contact-subtitle{font-size:24px}.contact-content{margin-top:28px}.contact-list li{font-size:16px;gap:12px}.site-footer{padding:0 24px 30px}.footer-wordmark{font-size:calc((100vw - 48px) * .195)}.footer-bottom{gap:14px;padding-top:18px}.footer-logo{width:115px}}
/* Keep the stone panel inside its own stacking context above the teal paper. */
.cycle-art{isolation:isolate}
.step-wash{transform:none;width:130px;left:55%;top:calc(100% + 8px)}
.step-wash svg{transform:rotate(75deg);width:100px;margin-left:-24px}
.step-return{right:68%;bottom:calc(100% + 18px)}
@media(max-width:700px){.step-wash{width:108px;left:34%;top:calc(100% + 12px)}.step-wash svg{width:70px;margin-left:2px}}
.step-sort{left:calc(100% - 35px);top:-26px;width:120px}
@media(max-width:700px){.step-sort{left:calc(100% - 27px);top:-28px;width:100px;font-size:18px}}
/* Photographic texture remains visible through a cream wash for readable copy. */
.rest-page::before{background:linear-gradient(#FAFBEFE6,#FAFBEFE6),url('media/courtyard-floor.webp') center top/100% 1150px repeat-y}
.cycle-art::before{background:linear-gradient(#FAFBEFCC,#FAFBEFCC),url('media/courtyard-floor.webp') center/cover #f7efdf}
.product-leaders span{padding:4px 24px;background:linear-gradient(90deg,#FAFBEF00,#FAFBEFEF 18px,#FAFBEFEF calc(100% - 18px),#FAFBEF00)}
@media(max-width:700px){.product-leaders span{padding:3px 12px;background:linear-gradient(90deg,#FAFBEF00,#FAFBEFEF 8px,#FAFBEFEF calc(100% - 8px),#FAFBEF00)}.label-basin{left:76%}.label-sprayer{left:73%}}
/* Centre full-bleed photographs without using transform (owned by reveal). */
.product-scene-home,.years-banner{width:min(100vw,1584px);margin-inline:calc((100% - min(100vw,1584px)) / 2)}
.product-scene-garden,.cooperation-visual{width:min(100vw,1672px);margin-inline:calc((100% - min(100vw,1672px)) / 2)}

/* FIX-AR1: compact section joins; approved component interiors stay unchanged. */
.rest-page{--ar1-gap:clamp(48px,6.666667vw,96px);--ar1-fade:clamp(24px,3.333333vw,48px)}
.products-section{padding-bottom:calc(var(--ar1-gap) / 2)}
.purchase-section{padding-top:calc(var(--ar1-gap) / 2);padding-bottom:24px}
.cooperation-section{padding-top:24px;padding-bottom:24px}
.product-scene img,.purchase-photo img,.cooperation-media{mask-image:linear-gradient(to bottom,transparent,#000 var(--ar1-fade),#000 calc(100% - var(--ar1-fade)),transparent);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 var(--ar1-fade),#000 calc(100% - var(--ar1-fade)),transparent)}
.cooperation-groups{margin-bottom:18px}
.cooperation-actions{justify-content:flex-start;padding:0;margin:0 0 16px}
.cooperation-visual{isolation:isolate}
.cooperation-detail{bottom:var(--ar1-fade);z-index:1}
/* Existing photographic backdrop from PA5; live magazine typography, no relief. */
.years-section{padding-top:24px;padding-bottom:0;margin-bottom:calc(40px - clamp(70px,7vw,140px))}
.years-banner{isolation:isolate;padding:16px var(--page-gutter);margin-block:0;background:var(--cream)}
/* Cream beneath the entire photograph keeps contrast independent of crop.
   Opacity is a readability wash, not a simulated stone/text material. */
.years-banner .years-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-1;opacity:.6;mask-image:linear-gradient(to bottom,transparent,#000 24px,#000 calc(100% - 24px),transparent);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
.years-number{position:relative;width:max-content;max-width:100%;padding:0;margin:0;font-family:Prompt,sans-serif;font-weight:700;font-size:clamp(72px,16.5vw,280px);line-height:1.2;color:var(--teal);white-space:nowrap}
.years-copy{margin-top:16px}
/* Only incoming outer margins change for approved FAQ/contact/footer. */
.faq-section + .contact-section{margin-top:calc(var(--ar1-gap) - 2 * clamp(70px,7vw,140px))}
.contact-section + .site-footer{margin-top:calc(16px - clamp(70px,7vw,140px))}
@media(max-width:700px){
 .years-section{margin-bottom:-18px}
 .faq-section + .contact-section{margin-top:calc(var(--ar1-gap) - 116px)}
 .contact-section + .site-footer{margin-top:-42px}
 .cooperation-actions{padding:0;margin-bottom:16px}
}
.years-banner{width:100%;max-width:none;margin-inline:0;padding:16px 0}
.years-banner .years-background{mask-image:linear-gradient(to bottom,transparent,#000 24px,#000 calc(100% - 24px),transparent),linear-gradient(to right,transparent,#000 32px,#000 calc(100% - 32px),transparent);mask-composite:intersect;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 24px,#000 calc(100% - 24px),transparent),linear-gradient(to right,transparent,#000 32px,#000 calc(100% - 32px),transparent);-webkit-mask-composite:source-in}

/* FIX-AR2 · 1: reflected photographic texture, original aspect ratio. */
.rest-page::before{background:linear-gradient(#FAFBEFE6,#FAFBEFE6),url('media/rest-floor-seamless.webp') center top/100% auto repeat-y}

/* FIX-AR2 · 2: one shared torn edge clips teal AND the cream panel.
   Same contour as AR1, lifted 24px. No circle/copy/arrow rules change. */
.cycle-section{padding-bottom:0;margin-bottom:-24px;clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),89% calc(100% - 39.5px),80% calc(100% - 34.25px),70% calc(100% - 47px),62% calc(100% - 41px),53% calc(100% - 53px),44% calc(100% - 47px),34% calc(100% - 61.25px),25% calc(100% - 59px),16% calc(100% - 73.25px),8% calc(100% - 68px),0 calc(100% - 77px))}
.cycle-art::before{bottom:-100%}
.cycle-section::after{display:none}

/* FIX-AR2 · 3: full-viewport wall; transparent banner, no cream rectangle.
   Crop off the left-hand leaf shadow; keep the right-hand shadow at the edge.
   The global cream-washed texture is the backdrop beneath the photograph. */
.years-banner{width:100vw;max-width:none;margin-inline:calc((100% - 100vw) / 2);padding:16px 0;background:none;overflow:clip}
.years-banner .years-background{inset:0 0 0 auto;width:200%;max-width:none;object-position:right bottom;mask-image:linear-gradient(to bottom,transparent,#000 24px,#000 calc(100% - 48px),transparent);mask-composite:add;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 24px,#000 calc(100% - 48px),transparent);-webkit-mask-composite:source-over}
.years-number{width:min(100%,2160px);margin-inline:auto;padding-inline:var(--page-gutter)}

/* FIX-AR2 · 4: same incoming rhythm as the other section joins. */
.years-section{margin-bottom:calc(var(--ar1-gap) - clamp(70px,7vw,140px))}
@media(max-width:700px){.years-section{margin-bottom:calc(var(--ar1-gap) - 58px)}}

/* FIX-AR3 · 1: reserve the copy's bottom without moving its contents.
   The right-hand edge follows the shorter artwork; the left keeps >=35px
   below the copy's flow box (112px padding minus the 77px highest tear).
   The transition starts beyond the note's maximum right edge at desktop. */
.cycle-section{--ar3-right-lift:clamp(48px,calc(14vw - 95.36px),112px);padding-bottom:112px;clip-path:polygon(0 0,100% 0,100% calc(100% - 26px - var(--ar3-right-lift)),89% calc(100% - 39.5px - var(--ar3-right-lift)),80% calc(100% - 34.25px - var(--ar3-right-lift)),70% calc(100% - 47px - var(--ar3-right-lift)),62% calc(100% - 41px - var(--ar3-right-lift)),53% calc(100% - 53px - var(--ar3-right-lift)),49% calc(100% - 53px - var(--ar3-right-lift)),44% calc(100% - 47px),34% calc(100% - 61.25px),25% calc(100% - 59px),16% calc(100% - 73.25px),8% calc(100% - 68px),0 calc(100% - 77px))}
/* Restore the original AR1 box and its percentage contour byte for byte.
   A separate, equally sized reflected layer continues ONLY below that box:
   its first row matches the original last row, without stretching the clip. */
.cycle-art::before{bottom:-80px}
.cycle-art::after{content:"";position:absolute;z-index:-1;inset:-110px -40vw -80px -5%;background:linear-gradient(#FAFBEFCC,#FAFBEFCC),url('media/courtyard-floor.webp') center/cover #f7efdf;transform:translateY(100%) scaleY(-1);pointer-events:none}
@media(max-width:1000px){
 .cycle-section{padding-bottom:48px;clip-path:polygon(0 0,100% 0,100% calc(100% - 38px),89% calc(100% - 44px),80% calc(100% - 40px),70% calc(100% - 48px),62% calc(100% - 42px),53% calc(100% - 53px),44% calc(100% - 47px),34% calc(100% - 51px),25% calc(100% - 45px),16% calc(100% - 52px),8% calc(100% - 46px),0 calc(100% - 50px))}
 .cycle-art::before{bottom:-50px}
 .cycle-art::after{inset:-25px -100vw -50px}
}

/* FIX-AR3 · 2: every exposed photographic edge blends into the page.
   Mask only each photograph, preserving its dimensions/crop and leader map.
   The jumbo-bag circle is a sibling of cooperation-media, outside its mask. */
.product-scene img,.purchase-photo img,.cooperation-media,.contact-photo img{mask-image:linear-gradient(to bottom,transparent,#000 var(--ar1-fade),#000 calc(100% - var(--ar1-fade)),transparent),linear-gradient(to right,transparent,#000 var(--ar1-fade),#000 calc(100% - var(--ar1-fade)),transparent);mask-composite:intersect;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 var(--ar1-fade),#000 calc(100% - var(--ar1-fade)),transparent),linear-gradient(to right,transparent,#000 var(--ar1-fade),#000 calc(100% - var(--ar1-fade)),transparent);-webkit-mask-composite:source-in}

/* FIX-AR3 · 3: equal 48px fades across the full-viewport wall. */
.years-banner .years-background{mask-image:linear-gradient(to bottom,transparent,#000 48px,#000 calc(100% - 48px),transparent);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 48px,#000 calc(100% - 48px),transparent)}

/* FIX-AR4 · 1: keep every step and label inside the cream at desktop sizes.
   Broaden only the panel's left edge; keep the reflected extension identical.
   The return arrow moves towards its two existing circles at narrower widths. */
@media(min-width:1001px){
 .cycle-art::before,.cycle-art::after{left:calc(-5% - clamp(40px,3vw,80px))}
 .step-return{right:calc(68% - clamp(0px,calc(180px - 12.5vw),56px))}
}

/* FIX-AR4 · 2: tighten the next heading without moving the cycle content.
   Reviewer DOM also exposes a low caption clearance. Lower only the right
   part of the shared torn edge, then translate all later content equally. */
@media(min-width:1001px){
 .cycle-section{--ar3-right-lift:calc(clamp(48px,calc(14vw - 95.36px),112px) - clamp(0px,calc(20vw - 204.8px),50px))}
 .products-section{padding-top:12px}
}

/* FIX-CY1: labels beside arrows; circles and AR4 panel stay fixed. */
.cycle-step{display:flex;flex-direction:column;align-items:center;width:max-content;font-size:clamp(16px,1.5vw,22px);line-height:1.4;transform:none}
.cycle-label{display:block;white-space:nowrap;transform:none}
.cycle-step svg{flex:none;width:60px;height:40px;margin:8px 0 0;transform:none}
.step-sort{left:calc(100% + 30px);right:auto;top:-48px;bottom:auto;transform:translateX(-50%)}
.step-melt{right:calc(100% + 30px);left:auto;top:-48px;bottom:auto;transform:translateX(50%)}
.step-melt span{transform:none}
.step-melt svg{transform:rotate(180deg)}
.step-wash,.step-return{flex-direction:row;gap:10px;left:50%;right:auto;top:calc(100% + 4px);bottom:auto;transform:translateX(-50%)}
.step-wash svg,.step-return svg{width:22px;height:38px;margin:0;transform:none}
@media(max-width:1000px){.step-sort{top:-40px}}
@media(max-width:700px){
 .cycle-step{font-size:16px}
 .step-sort{left:calc(100% + 22px);top:-40px}
 .step-melt{right:calc(100% + 22px);top:-40px}
 .step-sort svg,.step-melt svg{width:44px;height:36px}
}

/* FIX-AR5 · 0: close the cycle in the actual li anchor coordinates. */
.step-return{top:-106px;flex-direction:row-reverse}
@media(max-width:700px){.step-return{top:-91px}}

/* FIX-AR5 · 1: one product heading line from tablet upwards. */
.products-section .rest-heading-row{display:block}
@media(min-width:768px){
 .products-section h2{font-size:clamp(28px,5vw,90px)}
 .products-section .title-line{white-space:nowrap}
}

/* FIX-AR5 · 3: phrase-sized lines within the purchase text column. */
.purchase-section .rest-split>div{min-width:0}
.purchase-section .purchase-heading{font-size:clamp(36px,4vw,72px)!important}
.purchase-section .purchase-heading .title-line{white-space:normal}
.purchase-note{margin-top:16px;font-size:clamp(25px,2.4vw,38px)}
@media(max-width:1000px){.purchase-section .purchase-heading{font-size:clamp(34px,5vw,50px)!important}}
@media(max-width:700px){.purchase-section .purchase-heading{font-size:clamp(26px,6.6vw,40px)!important}}

/* FIX-AR5 · 4: unequal documentary image groups, all edges <=48px fade. */
.cooperation-collage{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(16px,2vw,32px);align-items:start;max-width:1672px;margin-inline:auto}
.coop-shot{min-width:0}
.coop-saleng{grid-column:1/span 7}
.coop-pickup{grid-column:8/span 5;margin-top:clamp(24px,4vw,64px)}
.coop-truck{grid-column:1/span 5}
.coop-handover{grid-column:6/span 7}
.coop-image{aspect-ratio:3/2;overflow:hidden;mask-image:linear-gradient(to bottom,transparent,#000 var(--ar1-fade),#000 calc(100% - var(--ar1-fade)),transparent),linear-gradient(to right,transparent,#000 var(--ar1-fade),#000 calc(100% - var(--ar1-fade)),transparent);mask-composite:intersect;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 var(--ar1-fade),#000 calc(100% - var(--ar1-fade)),transparent),linear-gradient(to right,transparent,#000 var(--ar1-fade),#000 calc(100% - var(--ar1-fade)),transparent);-webkit-mask-composite:source-in}
.coop-image img{width:100%;height:100%;object-fit:cover}
.coop-shot figcaption{margin:8px 0 0;font:400 clamp(22px,2vw,32px)/1.5 Sriracha,cursive;text-align:center}
@media(max-width:700px){
 .cooperation-collage{grid-template-columns:minmax(0,1fr);gap:24px}
 .coop-shot{grid-column:auto;margin-top:0}
}

/* FIX-CY2: four connectors anchored to circle centres and caption edges.
   The grid grows 24px and its gap grows 24px: original circle sizes survive.
   Inline-size containment provides the artwork width; browser QA is pending. */
.cycle-art{container-type:inline-size}
.cycle-orbit{--cy2-d:min(270px,calc((100cqw - 60px) / 2));--cy2-gap:84px;--cy2-row:120px;width:calc(100% + 24px);margin-inline:-4px -20px;column-gap:var(--cy2-gap);row-gap:var(--cy2-row)}
.cycle-orbit .cycle-step{display:block;position:absolute;width:auto;height:16px;left:auto;right:auto;top:auto;bottom:auto;margin:0;transform:none;font:400 clamp(16px,1.5vw,24px)/1.25 Sriracha,cursive;color:inherit}
.cycle-orbit .cycle-label{position:absolute;display:block;white-space:nowrap;text-align:center;transform:none}
.cycle-orbit .cycle-arrow{display:block;position:absolute;inset:0;width:100%;height:100%;margin:0;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transform:none}
.cycle-orbit .cycle-arrow>svg{display:block;position:absolute;width:100%;height:100%;margin:0;overflow:visible;transform:none;stroke-width:1.8}
.cycle-arrow-head{transform-box:view-box;transform:translateX(100%)}
.vertical>.cycle-arrow-head{transform:translateY(100%)}
.cycle-orbit .cycle-arrow.reverse{transform:rotate(180deg)}
.cycle-orbit .step-sort,.cycle-orbit .step-melt{top:calc(var(--cy2-d) / 2 - 8px);width:calc(100% + var(--cy2-gap) - var(--cy2-d) - 32px)}
.cycle-orbit .step-sort{left:calc(50% + var(--cy2-d) / 2 + 16px)}
.cycle-orbit .step-melt{right:calc(50% + var(--cy2-d) / 2 + 16px)}
.cycle-orbit .step-sort .cycle-label,.cycle-orbit .step-melt .cycle-label{left:50%;bottom:calc(100% + 10px);transform:translateX(-50%)}
.cycle-orbit .step-wash,.cycle-orbit .step-return{left:calc(50% - 8px);width:16px;height:calc(var(--cy2-row) - 32px)}
.cycle-orbit .step-wash{top:calc(100% + 16px)}
.cycle-orbit .step-return{top:calc(16px - var(--cy2-row))}
.cycle-orbit .step-wash .cycle-label,.cycle-orbit .step-return .cycle-label{top:50%;transform:translateY(-50%)}
.cycle-orbit .step-wash .cycle-label{right:calc(100% + 10px)}
.cycle-orbit .step-return .cycle-label{left:calc(100% + 10px)}
@media(max-width:700px){.cycle-orbit{--cy2-d:min(270px,calc((100cqw - 44px) / 2));--cy2-gap:68px;margin-inline:-12px}}

/* FIX-GD1: the shallower rice mat tray needs its upward leader closer. */
.product-scene-garden .label-mat{top:70%}
@media(max-width:700px){.product-scene-garden .label-mat{top:63%}}

/* FIX-CY3: process labels outside the loop; keep CY2 circles/panel fixed.
   Limit one-line text by the existing circle gap, without shrinking circles. */
.cycle-orbit{--cy3-clear-gap:calc((100cqw - 60px) / 2 + 84px - var(--cy2-d))}
.cycle-orbit .cycle-step{font-size:min(clamp(16px,1.5vw,24px),calc(var(--cy3-clear-gap) / 5.1));line-height:1.4}
.cycle-orbit .cycle-label>span{display:inline;transform:none}
.cycle-orbit .step-melt .cycle-label{top:calc(100% + 10px);bottom:auto}
.cycle-orbit .step-wash .cycle-label{left:calc(100% + 10px);right:auto}
.cycle-orbit .step-return{left:calc(50% + 24px)}
.cycle-orbit .step-return .cycle-label{right:calc(100% + 10px);left:auto}
.cycle-orbit .step-wash .cycle-label>span,.cycle-orbit .step-return .cycle-label>span{display:block}
@media(max-width:767px){
 .cycle-orbit .cycle-step{font-size:16px}
 .cycle-orbit .step-sort .cycle-label>span,.cycle-orbit .step-melt .cycle-label>span{display:block}
}

/* Same regular handwritten face as orbit captions; no synthetic bold/italic. */
.cycle-orbit .cycle-label{font-family:Sriracha,cursive;font-weight:400;font-style:normal;font-synthesis:none;line-height:1.4}
.cycle-orbit .cycle-label>span{font:inherit}

/* FIX-GD2: front-facing smaller sprayer; anchor above its shoulder on every screen. */
.product-scene-garden .label-sprayer{left:86%;top:24%;transform:translate(-50%,-100%)}
@media(max-width:700px){.product-scene-garden .label-sprayer{left:86%;top:23%}}

/* FIX-CO1: one photographed board; caption text stays in HTML. */
.cooperation-board{position:relative;width:100%;max-width:1672px;margin-inline:auto}
.cooperation-board .coop-image{aspect-ratio:3/2}
.cooperation-board .coop-image img{display:block;object-fit:contain}
.cooperation-board .product-leaders{font:400 clamp(15px,1.8vw,30px)/1.4 Sriracha,cursive;color:var(--teal)}
.cooperation-board .product-leaders li{width:36%;min-width:0;left:28%;top:1.5%;transform:translateX(-50%);white-space:nowrap}
.cooperation-board .product-leaders span{display:block;width:max-content;max-width:100%;margin-inline:auto;padding:2px 6px}
.cooperation-board .product-leaders svg{width:40px;height:clamp(20px,7vw,140px);margin-inline:auto;stroke-width:1.5}
.cooperation-board .product-leaders .board-label-pickup,.cooperation-board .product-leaders .board-label-handover{left:69%}
.cooperation-board .product-leaders .board-label-truck,.cooperation-board .product-leaders .board-label-handover{top:auto;bottom:2.5%}
.cooperation-board .product-leaders .board-label-truck svg,.cooperation-board .product-leaders .board-label-handover svg{transform:rotate(180deg)}
@media(max-width:700px){
 .cooperation-board{width:calc(100% + 48px);margin-inline:-24px}
}

/* FIX-GD2b: keep the entire unbroken sprayer label inside the garden image. */
.product-scene-garden .label-sprayer{left:auto;right:1%;top:21%;width:28%;min-width:0;white-space:nowrap;transform:translateY(-100%)}
.product-scene-garden .label-sprayer span{display:block;width:max-content;max-width:100%;box-sizing:border-box;margin-inline:auto;padding:3px 8px}
.product-scene-garden .label-sprayer svg{height:clamp(14px,4.2vw,60px)}

/* FIX-CO6: community photograph without captions, arrows or reserved bands. */
.cooperation-community{position:relative;width:100%;max-width:1672px;margin-inline:auto}
.cooperation-community .coop-image{aspect-ratio:3/2}
.cooperation-community .coop-image img{display:block;object-fit:contain}
@media(max-width:700px){
 .cooperation-community{width:calc(100% + 48px);margin-inline:-24px}
}

/* FIX-CO3: phone + LINE actions, and original company QR only at 768px+. */
.cooperation-actions{flex-wrap:wrap;gap:12px}
.cooperation-actions .button{max-width:100%;white-space:normal}
.cooperation-actions .button-label{white-space:normal;text-align:center}
.contact-line .contact-line-details{min-width:0}
.contact-line .contact-line-details>a{overflow-wrap:anywhere}
.contact-line .contact-line-qr{display:none}
@media(min-width:768px){
 .contact-line .contact-line-qr{display:block;width:144px;margin-block:4px 12px}
 .contact-line .contact-line-qr img{display:block;width:144px;height:144px;max-width:none}
 .contact-line .contact-line-qr figcaption{margin-top:6px;font-size:14px;line-height:1.5;text-align:center;white-space:nowrap}
}

/* FIX-CO5: one large material story and two smaller stories. Normal flow
   keeps every image clear of the unchanged contact list and QR. */
.contact-content{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start}
.contact-content>div{min-width:0}
.contact-gallery{--contact-fade:clamp(12px,1.5vw,24px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,22px);width:100%;min-width:0}
.contact-story{min-width:0;margin:0}
.contact-feature{grid-column:1/-1}
.contact-story img{display:block;width:100%;height:auto;mask-image:linear-gradient(to bottom,transparent,#000 var(--contact-fade),#000 calc(100% - var(--contact-fade)),transparent),linear-gradient(to right,transparent,#000 var(--contact-fade),#000 calc(100% - var(--contact-fade)),transparent);mask-composite:intersect;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 var(--contact-fade),#000 calc(100% - var(--contact-fade)),transparent),linear-gradient(to right,transparent,#000 var(--contact-fade),#000 calc(100% - var(--contact-fade)),transparent);-webkit-mask-composite:source-in}
@media(max-width:1000px){.contact-content{grid-template-columns:minmax(0,1fr)}}
@media(max-width:700px){.contact-gallery{grid-template-columns:minmax(0,1fr)}.contact-feature{grid-column:auto}}

/* FIX-GD8: anchor the two upper leaders to objects, independent of caption height. */
.product-scene-garden .label-nursery{top:29%;transform:translateY(-100%)}
.product-scene-garden .label-fertilizer{top:34%;transform:translateY(-100%)}

/* FIX-GD10: v13 object coordinates; keep captions on stone and arrows off faces/cells. */
.product-scene-garden .product-leaders{font-synthesis:none}
.product-scene-garden .product-leaders li{inset:0;width:auto;min-width:0;transform:none;white-space:nowrap}
.product-scene-garden .product-leaders span{position:absolute;display:block;width:max-content;max-width:none;box-sizing:border-box;margin:0;padding:0 6px;transform:translate(-50%,-100%)}
.product-scene-garden .product-leaders svg{position:absolute;inset:0;width:100%;height:100%;margin:0;transform:none}
.product-scene-garden .label-nursery span{left:21%;top:19%}
.product-scene-garden .label-fertilizer span{left:55%;top:13%}
.product-scene-garden .label-sprayer span{left:75%;top:13%}
.product-scene-garden .label-mat span{left:21%;top:99%}
.product-scene-garden .label-throw span{left:50%;top:99%}

/* FIX-NV3: preserve the explicit two-line note; let its second line size the box. */
.cooperation-section .rest-heading-row>.rest-note{width:max-content;max-width:none;flex:0 0 auto;white-space:nowrap}
@media(max-width:1000px){
 .cooperation-section .rest-heading-row{display:block}
 .cooperation-section .rest-heading-row>.rest-note{margin:24px 0 20px auto}
}

/* FIX-CY4: keep wash/melt outside on narrow phones; move only its arrow
   24px inward to reserve room for the three handwritten label rows. */
@media(width < 430px){
 .cycle-orbit .step-wash{left:calc(50% - 32px)}
}