/* V7 — one transition system; photograph colours continue behind the banner. */
:root{--section-cocoa:#2d170e;--section-ivory:#faf0dd}
/* The transparent wedge below the orange SVG uses the same edge profile as
   the scene's upper extension. No flat-colour band can show through it. */
#buy-a-box{background:#241006 url('assets/box-sky-wide-r6.webp') center top/100% 1px repeat-y}
.buy-headline{background:transparent}
.retail-intro.buy-section{background:var(--section-cocoa)}
/* Reset the old underline shape completely before applying the shared pill. */
.header nav{gap:clamp(14px,1.4vw,23px)}
.header nav>.nav-contact{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:46px;padding:11px 21px;margin-left:0;background:#ed1828;color:#fff4e1;border:0;border-bottom:0;border-radius:999px;box-shadow:none;line-height:1.25;white-space:nowrap}
.header nav>.nav-contact span{margin-left:0;font-size:20px;line-height:1}
.header nav>.nav-contact:hover{background:#cc1020;color:#fff4e1}
/* Solid field + repeatable oblique separators make texture changes explicit. */
.reach-section,.subpage .reach-section{background:var(--section-ivory);border:0;padding-block:100px 110px;min-height:620px}
.next-section{border:0;position:relative;padding-top:112px}
.product-r4{padding-top:112px}
.product-r4:before,.next-section:before{content:'';position:absolute;left:0;right:0;top:0;bottom:auto;width:100%;height:38px;background:var(--section-cocoa);opacity:1;pointer-events:none;clip-path:polygon(0 0,100% 0,100% 10%,0 100%)}
.product-r4:before{background-image:none}
.cluster-section{background:var(--section-cocoa);color:#f8e7ce;border:0;overflow:visible;padding-block:90px 95px}
.cluster-section:before{content:'';position:absolute;top:-35px;left:0;width:100%;height:36px;background:var(--section-cocoa);clip-path:polygon(0 100%,100% 0,100% 100%);pointer-events:none}
.cluster-grid{padding-right:0;gap:38px 30px}
.cluster-grid p{color:#f8e7ce}
.about-intro{padding-bottom:110px}
.about-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:54px;align-items:center}
.about-splash{position:static;inset:auto;display:block;width:100%;max-width:500px;height:auto;object-fit:contain;object-position:center;align-self:center;justify-self:center;opacity:1;transform:none;mask:none;-webkit-mask:none}
.boosters{padding-bottom:95px}
@media(max-width:1100px) and (min-width:761px){.about-layout{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:35px}.cluster-grid{padding-right:0}}
@media(max-width:760px){
 #buy-a-box{background-image:url('assets/box-sky-mobile-r6.webp')}
 .header nav>.nav-contact{width:max-content;min-height:46px;padding:12px 22px;margin-top:13px}
 .product-r4,.next-section{padding-top:82px}
 .product-r4:before,.next-section:before{top:0;bottom:auto;right:0;left:0;width:100%;height:27px;background:var(--section-cocoa)}
 .reach-section,.subpage .reach-section{padding-block:72px 78px;min-height:0}
 .cluster-section,.subpage .cluster-section{padding-block:65px 72px}
 .cluster-section:before{height:28px;top:-27px}
 .cluster-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 23px;padding-right:0}
 .about-intro,.subpage .about-intro{padding-bottom:75px}
 .about-layout{display:flex;flex-direction:column;gap:32px}
 .about-splash{position:static;width:min(100%,330px);height:auto;max-width:none;opacity:1;align-self:center}
 .boosters{padding-bottom:70px}
}