/* Approved 22 Oct reference: preserve the original lettering and its proportions.
   Original pixels are responsive crops; native controls retain labels and focus. */
.reference-header{position:relative;display:block;height:auto;min-height:0;aspect-ratio:1445/66;padding:0;border:0;background:#052d24;isolation:isolate}
.header-reference{position:absolute;inset:0;z-index:-1;pointer-events:none}
.header-reference>.crop{width:100%;height:100%}
.reference-header .brand{position:absolute;left:3.8%;top:0;width:21.5%;height:100%;padding:0}
.reference-header .brand>*{display:none}
.reference-header nav{position:absolute;left:33.3%;top:0;width:27.8%;height:100%;display:flex;align-items:stretch;justify-content:space-between;gap:0}
.reference-header nav>*{color:transparent;font-size:0;padding:0;min-width:12%;height:100%}
.reference-header .header-actions{position:absolute;right:3.4%;top:0;width:7.8%;height:100%;justify-content:space-between;gap:0}
.reference-header .header-actions .divider{opacity:0}
.reference-header .header-actions svg{opacity:0}
.reference-header .brand:focus-visible,.reference-header nav>*:focus-visible,.reference-header .icon-button:focus-visible{outline:2px solid #c4a16a;outline-offset:-3px}
.reference-hero{height:auto;min-height:0;aspect-ratio:1445/549;background:#052d24;isolation:isolate}
.reference-hero .hero-scene{overflow:visible}
.hero-reference{position:absolute;inset:0;pointer-events:none}
.hero-reference>.crop{width:100%;height:100%}
.mobile-hero-copy,.mobile-hero-portrait{display:none}
.desktop-rings{position:absolute;inset:0;pointer-events:none;z-index:4}
.reference-hero .olympic-rings-color{left:87%;top:40.5%;width:9.5%;filter:drop-shadow(0 1px 1px #ffffffb0);height:auto}
.reference-hero .hero-copy{position:absolute;inset:0;width:100%;max-width:none;padding:0;z-index:5;pointer-events:none}
.reference-hero .hero-copy>.eyebrow,.reference-hero .hero-copy>h1,.reference-hero .hero-copy>.hero-subtitle{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.reference-hero .hero-copy .buy-cta{position:absolute;left:3.8%;top:57.56%;width:17.86%!important;height:8.93%;min-height:0;margin:0;padding:0!important;border:0;background:transparent;color:transparent;font-size:0!important;box-shadow:none;border-radius:3px}
.reference-hero .hero-copy .buy-cta:before{display:none}
.reference-hero .hero-copy .buy-cta:hover{box-shadow:0 0 24px #c4a16a3b,inset 0 0 0 1px #c4a16a66}
.reference-hero .hero-copy .story-link{position:absolute;left:3.8%;top:68.85%;width:10.5%;height:5.65%;margin:0;padding:0;background:transparent;color:transparent;font-size:0;border:0}
.reference-hero .hero-copy .buy-cta span,.reference-hero .hero-copy .story-link span{display:none}
.reference-hero .hero-copy a:focus-visible,.reference-hero .hero-copy button:focus-visible{outline:2px solid #d6bd7a;outline-offset:4px}
.reference-hero .hero-product{position:absolute;left:31.211%;top:26.412%;bottom:auto;right:auto;width:18.27%;height:auto;z-index:3;clip-path:none;mask-image:none;background:transparent;border:0;padding:0}
.reference-hero .hero-package-inner{transform-origin:50% 100%;opacity:0;transition:transform .55s var(--ease),opacity .25s,filter .55s;filter:drop-shadow(0 12px 9px #00190d44)}
.reference-hero .hero-product .crop{clip-path:polygon(14% 0,66% 1%,68% 56%,94% 56%,99% 59%,100% 99%,60% 100%,0 95%,2% 27%,7% 16%,10% 7%)}
.reference-hero .hero-product:hover .hero-package-inner,.reference-hero .hero-product:focus-visible .hero-package-inner{opacity:1;transform:scale(1.015)}
.reference-hero .hero-product.is-lifted .hero-package-inner{opacity:1;transform:scale(1.03)}
.reference-hero .light-wash{z-index:1;inset:4% 20% 78% 43%;border-radius:50%;background:radial-gradient(ellipse,#f5e0ac16,transparent 70%);pointer-events:none;filter:blur(8px)}
.reference-hero .motion-toggle{top:auto;left:auto;right:1.8%;bottom:2%;font-size:8px;background:#03271a55;border-color:#ffffff33}
/* Rigid En Ruta presentation: branded box + hanging coffee filter. */
#ruta .ruta-art{background:linear-gradient(145deg,#fffef9,#faf5e9);min-height:215px}
.ruta-composition{display:block;position:relative;width:100%;aspect-ratio:1/1.13;isolation:isolate}
.ruta-box{position:absolute;width:62%;left:8%;top:0;z-index:2;filter:drop-shadow(4px 8px 6px #173d2d22)}
.ruta-box-crop{width:100%;clip-path:polygon(0 0,86% 0,99% 7%,99% 99%,13% 99%,1% 94%)}
.ruta-filter{position:absolute;width:63%;right:0;bottom:0;z-index:3;mix-blend-mode:multiply}
.ruta-filter-crop{width:100%}
#ruta .ruta-cutout{inset:8px 0 0;transform-origin:50% 90%}
#ruta .ruta-cutout .crop{height:auto}
#ruta .product-copy .ruta-type{font:8px/1.4 Arial;letter-spacing:.15em;margin:0 0 9px;color:#746340}
#ruta .product-copy>p:not(.ruta-type){font-size:15px;max-width:190px}
.product.is-lifted .product-cutout{transform:translateY(-18px) scale(1.12)}
@media(hover:hover) and (pointer:fine){.product-art:hover .product-cutout{transform:translateY(-7px) scale(1.05)}.product.is-lifted .product-art:hover .product-cutout{transform:translateY(-18px) scale(1.12)}}
.product-dialog.is-ruta .detail-visual{background:#fffcf3}
.product-dialog.is-ruta .detail-image{width:85%;max-width:360px}
.product-dialog.is-ruta .lens{display:none}
.product-dialog.is-ruta .detail-visual.zoomed .detail-image{transform:scale(1.2)}
.ruta-method{padding:0;margin:20px 0;list-style:none;counter-reset:steps;font:12px/1.6 Arial}
.ruta-method li{counter-increment:steps;padding:9px 0;border-top:1px solid var(--line)}
.ruta-method li:before{content:'0' counter(steps);display:inline-block;width:28px;color:#987441}
@media(max-width:1100px) and (min-width:761px){.reference-header .header-actions{right:3%;width:8.3%}.reference-header .icon-button{width:28px}.reference-hero .motion-toggle{font-size:7px;padding:7px}.reference-header .brand{width:22%}#ruta .product-copy>p:not(.ruta-type){font-size:12px}}
@media(max-width:760px){
 .reference-header{height:76px;aspect-ratio:auto}
 .header-reference{display:none}
 .reference-header .brand{left:15px;top:13px;width:min(64%,248px);height:auto;display:block}
 .reference-header .brand>.brand-reference{display:block;width:100%;mix-blend-mode:lighten}
 .reference-header nav{display:none}
 .reference-header .header-actions{right:17px;width:70px;top:0}
 .reference-header .header-actions svg{opacity:1;width:23px;height:23px}
 .reference-header .header-actions .divider{display:none}
 .reference-hero{height:calc((100vw - 40px) * .757143 + 95px + 100vw * .742895);aspect-ratio:auto}
 .hero-reference,.desktop-rings{display:none}
 .mobile-hero-copy{display:block;position:absolute;left:20px;top:25px;width:calc(100% - 40px);clip-path:polygon(0 0,100% 0,100% 25%,84% 25%,84% 100%,0 100%)}
 .mobile-hero-portrait{display:block;position:absolute;left:0;bottom:0;width:100%}
 .mobile-hero-portrait>.crop{width:100%}
 .mobile-hero-portrait .olympic-rings-color{left:74.55%;top:40.5%;width:18.58%}
 .reference-hero .hero-copy{left:20px;top:25px;right:auto;bottom:auto;width:calc(100% - 40px);aspect-ratio:490/371;height:auto}
 .reference-hero .hero-copy .buy-cta{left:1%;top:75.47%;width:52.65%!important;height:13.2%;min-height:38px}
 .reference-hero .hero-copy .story-link{left:1%;top:92.5%;width:32%;height:8.35%;min-height:32px}
 .reference-hero .hero-product{left:auto;right:3%;top:calc(25px + (100vw - 40px) * .60);width:25%;height:auto}
 .reference-hero .hero-package-inner{opacity:1}
 .reference-hero .motion-toggle{top:calc(45px + (100vw - 40px) * .757143);left:20px;right:auto;bottom:auto;font-size:8px}
 .reference-hero .light-wash{inset:35% 20% 45% 10%}
 #ruta .ruta-art{min-height:210px;max-height:none}
 #ruta .product-copy>p:not(.ruta-type){font-size:14px}
 .product-dialog.is-ruta .detail-image{width:70%;max-width:240px}
 .product-dialog.is-ruta .detail-visual{min-height:320px;max-height:360px}
}
@media(prefers-reduced-motion:reduce){.reference-hero .hero-package-inner{transition:none}.reference-hero .light-wash{display:none}}
.ruta-box-crop{clip-path:polygon(1% 1%,86% 1%,99% 6%,99% 99%,1% 99%)}
@media(max-width:760px){.reference-header .brand{top:7px}}
.ruta-box{width:50%;left:2%;top:4%}
.ruta-filter{width:47%;right:0;bottom:3%}
@media(max-width:760px){
 .mobile-hero-copy{mix-blend-mode:lighten;clip-path:polygon(0 0,100% 0,100% 25%,84% 25%,84% 74%,55% 74%,55% 100%,0 100%)}
 .mobile-hero-portrait{mask-image:linear-gradient(to bottom,transparent,#000 8%)}
}
.ruta-cutout,.product-dialog.is-ruta .detail-image{mix-blend-mode:multiply}
@media(min-width:761px){
 .reference-header nav{left:0;top:0;width:100%;display:block;pointer-events:none}
 .reference-header nav>*{position:absolute;top:0;min-width:0;pointer-events:auto}
 .reference-header nav>:nth-child(1){left:33.3%;width:3.2%}
 .reference-header nav>:nth-child(2){left:38.8%;width:4.2%}
 .reference-header nav>:nth-child(3){left:45.2%;width:7.5%}
 .reference-header nav>:nth-child(4){left:54.8%;width:6.2%}
}
html.motion-off .hero-package-inner,html.motion-off .product-cutout{transition:none}