/* Self-contained homepage hero: shared moving artwork, alternating editorial copy. */
.homepage-hero{--hero-forest:#183f35;--hero-lime:#86A126;--hero-spring:#86A126;--hero-ivory:#f8f7f2;--hero-gutter:clamp(28px,7vw,135px);--hero-heading:clamp(48px,4.6vw,76px);position:relative;isolation:isolate;display:grid;grid-template-rows:minmax(0,1fr) 88px;box-sizing:border-box;padding-top:96px;height:clamp(650px,calc(100svh - 64px),800px);min-width:0;overflow:hidden;background:var(--hero-forest);color:var(--hero-ivory)}
.homepage-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url('../assets/images/Botanical%20Effect.png') center/cover no-repeat;opacity:.075}
.hero-content-stage{position:relative;min-height:0;margin:0 var(--hero-gutter)}
.hero-message{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,46fr) minmax(0,46fr);column-gap:8%;align-items:center;padding:28px 0 38px;visibility:hidden;opacity:0;pointer-events:none}
.hero-message.is-current{visibility:visible;opacity:1;pointer-events:auto}
.hero-message-copy{grid-column:1;min-width:0;width:100%;max-width:580px;position:relative;z-index:3}
.homepage-hero[data-current="1"] #home-hero-panel-1 .hero-message-copy{grid-column:2}
.hero-kicker{display:flex;align-items:center;gap:14px;margin:0 0 22px;font-family:var(--font-accent);font-weight:500;font-size:15px;line-height:1.4;letter-spacing:.09em;text-transform:uppercase;color:var(--hero-ivory)}
.hero-kicker b{font-weight:700;font-size:15px}.hero-kicker>span{display:block;width:30px;height:1px;background:currentColor;opacity:.5;flex:none}
body.home-page .homepage-hero .hero-heading{font-family:var(--font-display);font-size:var(--hero-heading);font-weight:var(--weight-display);line-height:1.02;letter-spacing:-.015em;text-transform:uppercase;margin:0 0 24px;color:var(--hero-ivory)}
.hero-heading>span{display:block}.hero-heading>span:last-child{color:var(--hero-lime)}
.homepage-hero .hero-body{font-family:var(--font-body);font-weight:300;font-size:clamp(18px,1.35vw,20px);line-height:1.5;max-width:550px;color:var(--hero-ivory);margin:0 0 26px}
.hero-actions{display:flex;align-items:center;gap:16px 24px;flex-wrap:wrap}
.hero-cta{display:inline-flex;align-items:center;justify-content:space-between;gap:24px;min-height:50px;padding:13px 22px;border:1px solid var(--hero-spring);border-radius:7px;background:var(--hero-spring);color:var(--hero-forest);font-family:var(--font-body);font-size:clamp(16px,1.1vw,18px);line-height:1.4;font-weight:700;text-decoration:none;transition:translate 180ms ease,box-shadow 180ms ease}
.hero-cta>span,.hero-amazon>span{font-size:23px;line-height:1}
.hero-amazon{display:inline-flex;gap:12px;align-items:center;min-height:48px;color:var(--hero-ivory);font-size:16px;font-weight:700;text-decoration:underline;text-underline-offset:5px}
.hero-cta:hover{translate:0 -2px;box-shadow:0 6px 16px #09271e28}
/* The same DOM node moves across the stage; only its image layers crossfade. */
.hero-artwork{position:absolute;left:54%;top:50%;width:46%;aspect-ratio:.94;max-height:calc(100% - 44px);transform:translateY(-50%);isolation:isolate;pointer-events:none}
.homepage-hero[data-current="1"] .hero-artwork{left:0}
.hero-leaf-layer{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:10px;opacity:0;visibility:hidden;transition:opacity 850ms ease,visibility 0s 850ms}
.hero-leaf-layer.is-current{opacity:1;visibility:visible;transition:opacity 850ms ease,visibility 0s}
.hero-leaf{position:relative;min-width:0;min-height:0;overflow:hidden;background:#2d6050}
.hero-leaf:nth-child(1){border-radius:0 52% 0 52%}
.hero-leaf:nth-child(2){border-radius:52% 0 52% 0}
.hero-leaf:nth-child(3){border-radius:52% 0 52% 0}
.hero-leaf:nth-child(4){border-radius:0 52% 0 52%}
.hero-leaf>img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.hero-leaf.tile-fill{background:var(--hero-spring)}
.hero-leaf.tile-fill:nth-child(2){background:var(--hero-lime)}
.hero-leaf-line{position:absolute;inset:18%;border:18px solid #183f3540;border-radius:0 55% 0 55%;transform:translate(-22%,20%)}
.hero-leaf.hero-packshot{background:#86A126}
.hero-leaf.hero-packshot>img{object-fit:contain;padding:5%;box-sizing:border-box}
.hero-leaf-layer[data-artwork="1"] .hero-leaf:first-child img{object-position:50% 25%}
.hero-leaf-layer[data-artwork="2"] .hero-leaf>img{filter:brightness(.85)}
.hero-bottom{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:50px;padding:16px var(--hero-gutter);border-top:1px solid #f8f7f21f;box-sizing:border-box}
.hero-step-controls{display:flex;gap:10px}
.hero-step-controls button{display:grid;place-items:center;width:44px;height:44px;border:1px solid #f8f7f24d;border-radius:50%;padding:0;background:transparent;color:var(--hero-ivory);font-size:20px;line-height:1}
.hero-indices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;min-width:0}
.hero-index{position:relative;display:grid;grid-template-columns:auto 1fr;column-gap:10px;row-gap:5px;align-items:center;min-height:44px;padding:0 0 5px;background:transparent;color:#b5c7bd;text-align:left;font-size:14px;line-height:1.3}
.hero-index>span:first-child{font-weight:700}.hero-index-name{font-weight:500}
.hero-index i{grid-column:1/-1;width:100%;height:2px;background:currentColor;opacity:.22;transform-origin:left}
.hero-index[aria-selected="true"]{color:var(--hero-lime)}
.homepage-hero :is(a,button):focus-visible{outline:2px solid var(--hero-lime);outline-offset:5px}
.homepage-hero .hero-live-region{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
/* Transparent only over this forest hero; universal scrolled/header behaviour is untouched. */
body.home-page .header-slot .site-header[data-header-mode]:not(.is-scrolled):not(.is-menu-open):not(.has-dropdown){background-color:transparent!important;border-bottom-color:#ffffff17}
@media(min-width:768px) and (max-width:1150px){.homepage-hero{--hero-gutter:36px;--hero-heading:clamp(44px,5vw,58px);padding-top:78px}.hero-message{column-gap:5%;grid-template-columns:minmax(0,47.5fr) minmax(0,47.5fr)}.hero-artwork{left:52.5%;width:47.5%}.hero-kicker{font-size:13px;gap:9px;margin-bottom:16px}.hero-kicker b{font-size:13px}.hero-kicker>span{width:20px}.homepage-hero .hero-body{font-size:17px}.hero-cta{font-size:15px;padding:12px 16px}.hero-bottom{gap:24px}.hero-index-name{font-size:13px}}
@media(min-width:768px) and (max-height:740px){.homepage-hero{height:calc(100svh - 56px);min-height:590px;--hero-heading:clamp(44px,7.7svh,64px);grid-template-rows:minmax(0,1fr) 76px}.hero-message{padding:20px 0 26px}.hero-kicker{margin-bottom:14px}.homepage-hero .hero-heading{margin-bottom:18px}.homepage-hero .hero-body{font-size:17px;line-height:1.45;margin-bottom:20px}.hero-cta{min-height:46px;font-size:15px}.hero-artwork{aspect-ratio:.94}}
@media(max-width:767px){
 .homepage-hero{--hero-gutter:24px;--hero-heading:clamp(36px,9.1vw,49px);padding-top:78px;height:auto;min-height:0;max-height:none;grid-template-rows:auto auto}
 .hero-content-stage{display:grid;grid-template-rows:308px 300px;min-height:608px}
 .hero-message{display:block;padding:22px 0 0;bottom:auto;min-height:286px}
 .hero-message-copy{max-width:520px}.homepage-hero[data-current="1"] #home-hero-panel-1 .hero-message-copy{grid-column:auto}
 .hero-kicker{font-size:13px;gap:9px;margin-bottom:12px}.hero-kicker b{font-size:13px}.hero-kicker>span{width:20px}
 body.home-page .homepage-hero .hero-heading{margin-bottom:14px;line-height:1.03}
 .homepage-hero .hero-body{font-size:15px;line-height:1.5;margin-bottom:16px;max-width:none}
 .hero-actions{gap:8px 18px}.hero-cta{font-size:14px;padding:11px 15px;min-height:44px;gap:18px}.hero-amazon{font-size:14px;min-height:44px}
 .hero-artwork,.homepage-hero[data-current="1"] .hero-artwork{left:50%;top:auto;bottom:26px;transform:translateX(-50%);height:260px;width:min(100%,310px);max-height:none;aspect-ratio:.94}
 .hero-leaf-layer{gap:7px}.hero-leaf-line{border-width:12px}
 .hero-bottom{display:flex;flex-direction:column-reverse;align-items:stretch;gap:12px;padding:16px 24px 20px}.hero-indices{gap:12px}.hero-index{grid-template-columns:1fr;gap:5px;font-size:13px}.hero-index-name{font-size:13px}.hero-step-controls{justify-content:center;gap:14px}.hero-step-controls button{width:44px;height:44px}
}
@media(max-width:390px){.hero-content-stage{grid-template-rows:332px 280px;min-height:612px}.hero-artwork{height:244px}.hero-cta{padding:10px 13px;font-size:14px}.hero-kicker{letter-spacing:.055em}}
@media(prefers-reduced-motion:reduce){.homepage-hero *{animation:none!important;transition:none!important}.hero-cta:hover{translate:none}}
/* Maintain the silhouette's aspect ratio even in short desktop windows. */
@media(min-width:768px){.hero-artwork{width:min(46%,calc((min(100svh,864px) - 290px)*.94));height:auto;max-height:none}.homepage-hero[data-current="1"] .hero-artwork{left:0}}
@media(max-width:767px){.hero-artwork,.homepage-hero[data-current="1"] .hero-artwork{width:min(100%,244px);height:auto;aspect-ratio:.94}}

/* Sculptural botanical arrangement: three photographs and one smaller accent leaf. */
.hero-leaf-layer{gap:10px;overflow:visible}
.hero-leaf-layer .hero-leaf:nth-child(1){border-radius:0 50% 0 50%}
.hero-leaf-layer .hero-leaf:nth-child(2){width:74%;height:74%;align-self:end;justify-self:start;border-radius:50% 0 50% 0;overflow:visible;z-index:2;background:var(--hero-lime)}
.hero-leaf-layer .hero-leaf:nth-child(3){height:114%;align-self:start;border-radius:0 0 50% 0}
.hero-leaf-layer .hero-leaf:nth-child(4){border-radius:0 50% 0 50%}
.hero-leaf-layer .hero-leaf-line{inset:auto;left:24%;top:27%;width:112%;height:112%;box-sizing:border-box;border:clamp(16px,1.9vw,28px) solid #183f356e;border-radius:50% 0 50% 0;transform:none;pointer-events:none}
.hero-leaf-layer[data-artwork="1"] .hero-leaf-line{border-color:#183f357d}
/* Leave room for the extended lower leaf and keep foreground cups above the outline. */
.hero-artwork{margin-top:-12px}
@media(max-width:767px){.hero-artwork{bottom:40px;margin-top:0}.hero-leaf-layer{gap:7px}.hero-leaf-layer .hero-leaf-line{border-width:15px}}
/* Mirror the first composition and anchor it to the outer edge of the hero. */
.hero-leaf-layer.hero-leaf-mirrored{transform:scaleX(-1)}
.hero-leaf-layer.hero-leaf-mirrored .hero-leaf>img{transform:scaleX(-1)}
@media(min-width:768px){
 .homepage-hero[data-current="0"] .hero-artwork{left:auto;right:calc(-1 * var(--hero-gutter))}
}
/* Minimal navigation: retain accessible labels while reclaiming the footer band. */
.homepage-hero{grid-template-rows:minmax(0,1fr) 44px}
.hero-bottom{display:flex;justify-content:center;align-items:center;gap:22px;height:44px;padding:0 var(--hero-gutter) 8px;border-top:0}
.hero-step-controls{gap:5px}
.hero-step-controls button{width:34px;height:34px;border-color:transparent;font-size:18px;opacity:.75}
.hero-step-controls button:hover{opacity:1;background:#ffffff0b}
.hero-indices{display:flex;align-items:center;gap:3px;min-width:0}
.hero-index{display:grid;place-items:center;position:relative;width:32px;height:32px;min-height:32px;padding:0;border:0;background:transparent;color:#b5c7bd}
.hero-index::after{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.6;transition:width 180ms ease,opacity 180ms ease}
.hero-index[aria-selected="true"]::after{width:20px;border-radius:4px;opacity:1}
.hero-index>span,.hero-index i{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
@media(min-width:768px) and (max-height:740px){.homepage-hero{grid-template-rows:minmax(0,1fr) 44px}}
@media(max-width:767px){.homepage-hero{grid-template-rows:auto 52px}.hero-bottom{flex-direction:row;gap:16px;height:52px;padding:0 24px 8px}.hero-step-controls{gap:0}.hero-step-controls button,.hero-index{width:44px;height:44px;min-height:44px}.hero-indices{gap:0}}
@media(prefers-reduced-motion:reduce){.hero-index::after{transition:none}}
/* Oversized desktop artwork bleeds through the full hero, including behind the masthead. */
@media(min-width:768px){
 .homepage-hero{container-type:size}
 .hero-artwork{top:calc(-1 * 96px);bottom:auto;height:100cqh;width:auto;max-height:none;aspect-ratio:.94;transform:none;margin-top:0}
 .homepage-hero[data-current="0"] .hero-artwork,.homepage-hero[data-current="2"] .hero-artwork{left:auto;right:calc(-1 * var(--hero-gutter));width:auto}
 .homepage-hero[data-current="1"] .hero-artwork{left:calc(-1 * var(--hero-gutter));right:auto;width:auto}
}
@media(min-width:768px) and (max-width:1150px){.hero-artwork{top:-78px;height:100cqh;max-width:55vw;aspect-ratio:auto}}
@media(min-width:768px){.hero-artwork{height:calc(100cqh + 96px)}}
@media(min-width:768px) and (max-width:1150px){
 .hero-artwork{height:calc(100cqh + 78px);max-width:none;aspect-ratio:.94}
 .homepage-hero[data-current="0"] .hero-artwork,.homepage-hero[data-current="2"] .hero-artwork{clip-path:inset(0 0 0 30%)}
 .homepage-hero[data-current="1"] .hero-artwork{clip-path:inset(0 30% 0 0)}
}
.homepage-hero[data-current="2"] .hero-artwork{opacity:0;visibility:hidden;transition:opacity 550ms ease,visibility 0s 550ms}
.hero-artwork{transition:opacity 550ms ease,visibility 0s}
@media(min-width:768px) and (max-width:1150px){}
@media(max-width:767px){}
/* The preview cup becomes the foreground hero on slide three; copy sits opposite. */
.homepage-hero[data-current="2"] #home-hero-panel-2 .hero-message-copy{grid-column:2}
@media(min-width:768px) and (max-width:1150px){}
@media(max-width:767px){
 .homepage-hero[data-current="2"] #home-hero-panel-2 .hero-message-copy{grid-column:auto}
}
/* Keep a visible sliver of that same foreground cup at the viewport edge. */
@media(min-width:768px){}
@media(max-width:767px){}
/* Hero actions share the exact accent colour of the headline's second line. */
.homepage-hero .hero-cta,.homepage-hero .hero-cta:hover,.homepage-hero .hero-cta:focus-visible{background:var(--hero-lime);border-color:var(--hero-lime);color:var(--hero-forest)}
@media(min-width:768px){}
@media(max-width:767px){}
/* The persistent preview cup enters from the left and travels right into slide three. */
@media(min-width:768px){
}
@media(max-width:767px){
}
/* Explicit cup states: none on slide one, a single preview on two, full composition on three. */
.hero-custom-cups{position:absolute;left:0;right:auto;top:50%;bottom:auto;width:48%;height:440px;transform:translateY(-50%);z-index:4;pointer-events:none;opacity:0;visibility:hidden;transition:none}
.homepage-hero[data-cup-state="preview"] .hero-custom-cups,.homepage-hero[data-cup-state="showcase"] .hero-custom-cups{opacity:1;visibility:visible}
.hero-custom-cups .hero-foreground-cup{position:absolute;object-fit:contain;filter:drop-shadow(0 12px 10px #09251d33);backface-visibility:hidden}
.hero-custom-cups .cup-0{left:29%;top:2%;width:47%;height:96%;z-index:5;transform:translateX(calc(-142% - var(--hero-gutter))) rotate(-8deg);transition:transform 900ms cubic-bezier(.22,.61,.36,1)}
.homepage-hero[data-cup-state="showcase"] .hero-custom-cups .cup-0{transform:translateX(0) rotate(-7deg)}
/* Hide supporting cups immediately when leaving slide three. Only the white cup travels. */
.hero-custom-cups :is(.cup-1,.cup-2,.cup-3){opacity:0;visibility:hidden;transition:none}
.homepage-hero[data-cup-state="showcase"] .hero-custom-cups :is(.cup-1,.cup-2,.cup-3){opacity:1;visibility:visible;transition:opacity 350ms ease 200ms}
.hero-custom-cups .cup-1{left:4%;top:13%;width:31%;height:68%;transform:rotate(-19deg);z-index:2}
.hero-custom-cups .cup-2{left:64%;top:32%;width:32%;height:68%;transform:rotate(23deg);z-index:3}
.hero-custom-cups .cup-3{left:-5%;top:51%;width:32%;height:59%;transform:rotate(-47deg);z-index:3}
.homepage-hero[data-cup-state="none"] .hero-custom-cups,.homepage-hero[data-cup-state="none"] .hero-custom-cups *{opacity:0;visibility:hidden;transition:none}
@media(min-width:768px) and (max-width:1150px){.hero-custom-cups{height:350px}}
@media(max-width:767px){.hero-custom-cups{top:auto;bottom:35px;width:100%;height:260px;transform:none}.hero-custom-cups .cup-0{left:27%;width:48%;height:100%;transform:translateX(calc(-140% - 24px)) rotate(-8deg)}.hero-custom-cups .cup-1{left:3%}.hero-custom-cups .cup-3{left:0;width:30%}}
@media(prefers-reduced-motion:reduce){.hero-custom-cups,.hero-custom-cups *{transition:none!important}}
/* Preview is on slide two's right edge; the showcase position stays on slide three's left. */
.homepage-hero[data-cup-state="preview"] .hero-custom-cups .cup-0{transform:translateX(calc(382% + var(--hero-gutter) - 52px)) rotate(-8deg)}
@media(max-width:767px){.homepage-hero[data-cup-state="preview"] .hero-custom-cups .cup-0{transform:translateX(calc(152% + 24px - 36px)) rotate(-8deg)}}

/* Arrive pre-positioned on slide two; travel only between slides two and three. */
.homepage-hero .hero-custom-cups .cup-0{transition:none}
.homepage-hero[data-cup-motion="travel"] .hero-custom-cups .cup-0{transition:transform 900ms cubic-bezier(.22,.61,.36,1)}
@media(prefers-reduced-motion:reduce){.homepage-hero[data-cup-motion="travel"] .hero-custom-cups .cup-0{transition:none!important}}
/* A shorter desktop hero leaves the authority ribbon comfortably in view. */
@media(min-width:768px){
 .homepage-hero{height:clamp(560px,calc(100svh - 110px),710px);min-height:560px;max-height:710px}
 .hero-message{padding-top:18px;padding-bottom:26px}
 .hero-custom-cups{height:380px}
}
@media(min-width:768px) and (max-width:1150px){.hero-custom-cups{height:320px}}
@media(min-width:768px) and (max-height:700px){
 .homepage-hero{height:calc(100svh - 88px);min-height:510px}
 .hero-custom-cups{height:300px}
 body.home-page .homepage-hero .hero-heading{font-size:clamp(40px,7svh,56px)}
 .homepage-hero .hero-body{font-size:16px;margin-bottom:18px}
}
/* More pronounced botanical linework across all hero slides. */
.homepage-hero::before{opacity:.17;background-position:center;background-size:cover}
/* Brighter contrast is reserved for the decorative leaf, not UI accents. */
.hero-leaf-layer[data-artwork="0"] .hero-leaf.tile-fill,
.hero-leaf-layer[data-artwork="1"] .hero-leaf.tile-fill{background:#c9c711}
/* Quiet surfaces and an always-solid masthead. */
.homepage-hero::before{display:none}
.homepage-hero[data-current="1"]{background:#f8f7f2;color:#183f35;--hero-ivory:#183f35}
.homepage-hero[data-current="1"] .hero-heading>span:last-child{color:#86A126}
.homepage-hero[data-current="1"] .hero-index{color:#63756a}
.homepage-hero[data-current="1"] .hero-index[aria-selected="true"]{color:#86A126}
.homepage-hero[data-current="1"] .hero-step-controls button{border-color:#183f3526}
.homepage-hero[data-current="1"] .hero-step-controls button:hover{background:#183f350a}
body.home-page .header-slot .site-header[data-header-mode]:not(.is-scrolled):not(.is-menu-open):not(.has-dropdown){background-color:#183f35!important;border-bottom-color:#ffffff17}
/* Compact, precise carousel navigation with comfortable targets. */
.hero-bottom{gap:18px;padding-bottom:8px}
.hero-step-controls{gap:6px}
.hero-step-controls button{width:36px;height:36px;border:1px solid currentColor;border-color:#f8f7f230;opacity:.8;font-size:18px;transition:background 180ms ease,opacity 180ms ease}
.hero-step-controls button:hover{opacity:1}
.hero-indices{gap:3px}
.hero-index::after{width:6px;height:6px;opacity:.45}
.hero-index[aria-selected="true"]::after{width:22px;height:5px;opacity:1}
@media(max-width:767px){.hero-step-controls button,.hero-index{width:44px;height:44px;min-height:44px}}
/* Deep, quiet forest surfaces; the leaf outline is the decorative emphasis. */
.homepage-hero{background:linear-gradient(180deg,#243f36 0%,#1e392f 58%,#163127 100%)}
.homepage-hero[data-current="1"]{background:#f8f7f2}
body.home-page .header-slot .site-header[data-header-mode]:not(.is-scrolled):not(.is-menu-open):not(.has-dropdown){background-color:#243f36!important}
.hero-leaf-layer .hero-leaf.tile-fill{overflow:visible;z-index:3}
.hero-leaf-layer .hero-leaf-line{left:24%;top:27%;width:118%;height:118%;border-width:clamp(20px,2.2vw,36px);border-color:#092c21b3;opacity:1;z-index:4}
.hero-leaf-layer[data-artwork="1"] .hero-leaf-line{border-color:#183f357d}
@media(max-width:767px){.hero-leaf-layer .hero-leaf-line{border-width:16px}}
/* Reference-style editorial scale and restrained outlined hero actions. */
.homepage-hero{--hero-heading:clamp(52px,5.2vw,90px)}
.hero-message-copy{max-width:650px}
body.home-page .homepage-hero .hero-heading{font-size:var(--hero-heading);line-height:1.02;letter-spacing:-.015em}
.homepage-hero .hero-cta,.homepage-hero .hero-cta:hover,.homepage-hero .hero-cta:focus-visible{background:transparent;border:2px solid #86A126;border-radius:20px;color:#86A126;font-family:var(--font-display);font-weight:var(--weight-display);font-size:21px;line-height:1.1;text-transform:uppercase;min-height:50px;padding:12px 24px;gap:18px;box-shadow:none}
@media(min-width:768px) and (max-width:1150px){.homepage-hero{--hero-heading:clamp(44px,5.3vw,61px)}}
@media(min-width:768px) and (max-height:700px){body.home-page .homepage-hero .hero-heading{font-size:clamp(44px,8svh,62px)}}
@media(max-width:767px){.homepage-hero{--hero-heading:clamp(36px,9.5vw,48px)}.homepage-hero .hero-cta,.homepage-hero .hero-cta:hover,.homepage-hero .hero-cta:focus-visible{font-size:19px;min-height:44px;padding:10px 18px;border-radius:17px}}
/* Centre the arrow geometry independently of font baselines. */
.homepage-hero .hero-step-controls button{display:grid;place-items:center;padding:0;line-height:1}
.homepage-hero .hero-step-controls button svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* Anchor the leaf silhouette below the unscrolled masthead instead of behind it. */
@media(min-width:768px){
 .homepage-hero .hero-artwork{top:0;bottom:auto;height:calc(100% / 1.07);width:auto;max-height:none;aspect-ratio:.94;transform:none;margin-top:0}
 .homepage-hero[data-current="0"] .hero-artwork{left:auto;right:calc(-1 * var(--hero-gutter))}
 .homepage-hero[data-current="1"] .hero-artwork{left:calc(-1 * var(--hero-gutter));right:auto}
}
@media(min-width:768px) and (max-width:1150px){
 .homepage-hero .hero-artwork{top:0;height:calc(100% / 1.07);max-width:none;aspect-ratio:.94}
}
/* Include the compact navigation row in the leaf artwork's full-height budget. */
@media(min-width:768px){
 .homepage-hero .hero-artwork{top:0;height:calc((100% + 44px) / 1.07);width:auto;aspect-ratio:.94;max-height:none}
}
/* Equal lower leaves share one baseline on the first two slides. */
.hero-leaf-layer[data-artwork="0"] .hero-leaf:nth-child(4),
.hero-leaf-layer[data-artwork="1"] .hero-leaf:nth-child(4){height:114%;align-self:start}
/* White hero CTA lettering and arrows in every interaction state. */
.homepage-hero .hero-cta,.homepage-hero .hero-cta:hover,.homepage-hero .hero-cta:focus-visible{color:#fff}
.homepage-hero .hero-cta>span{color:inherit}
/* Keep white lettering legible against the off-white middle slide. */
.homepage-hero[data-current="1"] .hero-cta{background:#183f35}
/* Light-slide exception: preserve the green outlined action on off-white. */
.homepage-hero[data-current="1"] .hero-cta,
.homepage-hero[data-current="1"] .hero-cta:hover,
.homepage-hero[data-current="1"] .hero-cta:focus-visible{background:transparent;color:#86A126}
/* Copy optimisation: give longer headlines and paragraphs a readable measure. */
@media(min-width:768px){.homepage-hero{--hero-heading:clamp(44px,4.2vw,72px)}.homepage-hero .hero-kicker{flex-wrap:wrap}.homepage-hero .hero-body{font-size:18px;line-height:1.5}}
@media(max-width:767px){.homepage-hero .hero-content-stage{grid-template-rows:420px 300px;min-height:720px}.homepage-hero .hero-kicker{flex-wrap:wrap}.homepage-hero .hero-heading{overflow-wrap:normal}.homepage-hero .hero-body{font-size:15px;line-height:1.5}}

/* Slide two: teal leaf with a translucent yellow overlapping outline. */
.hero-leaf-layer[data-artwork="1"] .hero-leaf.tile-fill{background:#58AD83}
.hero-leaf-layer[data-artwork="1"] .hero-leaf-line{border-color:rgb(201 199 17 / .55)}
/* Consistent four-leaf reference silhouette on all carousel slides. */
.homepage-hero .hero-leaf-layer{transform:none;gap:12px;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.homepage-hero .hero-leaf-layer .hero-leaf{width:100%;height:100%;align-self:stretch;justify-self:stretch;transform:none}
.homepage-hero .hero-leaf-layer .hero-leaf:nth-child(1){width:76%;height:84%;align-self:end;justify-self:end;border-radius:0 50% 0 50%;overflow:visible;z-index:3;background:#c9c711}
.homepage-hero .hero-leaf-layer .hero-leaf:nth-child(2){border-radius:50% 0 50% 0;overflow:hidden;z-index:auto;background:#2d6050}
.homepage-hero .hero-leaf-layer .hero-leaf:nth-child(3){border-radius:50% 0 50% 0;overflow:hidden}
.homepage-hero .hero-leaf-layer .hero-leaf:nth-child(4){border-radius:0 50% 0 50%;overflow:hidden}
.homepage-hero .hero-leaf-layer .hero-leaf>img{transform:none;filter:none}
.homepage-hero .hero-leaf-layer .hero-leaf-line{left:-36%;top:24%;width:115%;height:112%;border-radius:0 50% 0 50%;border-color:#092c21a8;border-width:clamp(18px,2.2vw,36px)}
.homepage-hero[data-current="2"] .hero-artwork{opacity:1;visibility:visible;transition:opacity 550ms ease}
.homepage-hero .hero-custom-cups{display:none}
.homepage-hero .hero-leaf-layer[data-artwork="2"] .hero-packshot{background:#23483b}
.homepage-hero .hero-leaf-layer[data-artwork="2"] .hero-packshot img{padding:8%;object-fit:contain}
@media(min-width:768px){
 .homepage-hero .hero-artwork{height:calc(100% - 16px);top:8px;aspect-ratio:1.05;max-width:47vw;clip-path:none}
 .homepage-hero[data-current="0"] .hero-artwork{right:calc(-.35 * var(--hero-gutter));left:auto}
 .homepage-hero[data-current="1"] .hero-artwork,.homepage-hero[data-current="2"] .hero-artwork{left:calc(-.35 * var(--hero-gutter));right:auto}
}
@media(max-width:767px){.homepage-hero .hero-leaf-layer{gap:7px}.homepage-hero .hero-leaf-layer .hero-leaf-line{border-width:15px}}
/* Middle slide mirrors the reference: photograph left, teal accent right. */
.homepage-hero .hero-leaf-layer[data-artwork="1"] .hero-leaf:nth-child(1){width:100%;height:100%;align-self:stretch;justify-self:stretch;border-radius:0 50% 0 50%;overflow:hidden;background:#2d6050;z-index:auto}
.homepage-hero .hero-leaf-layer[data-artwork="1"] .hero-leaf:nth-child(2){width:76%;height:84%;align-self:end;justify-self:start;border-radius:50% 0 50% 0;overflow:visible;background:#58AD83;z-index:3}
.homepage-hero .hero-leaf-layer[data-artwork="1"] .hero-leaf-line{left:24%;top:24%;width:115%;height:112%;border-radius:50% 0 50% 0;border-color:rgb(201 199 17 / .55)}
@media(min-width:768px){
 .homepage-hero[data-current="0"] .hero-artwork{right:calc(-1 * var(--hero-gutter));left:auto}
 .homepage-hero[data-current="1"] .hero-artwork,.homepage-hero[data-current="2"] .hero-artwork{left:calc(-1 * var(--hero-gutter));right:auto}
}
@media(max-width:767px){
 .homepage-hero .hero-artwork,.homepage-hero[data-current="1"] .hero-artwork,.homepage-hero[data-current="2"] .hero-artwork{left:calc(-1 * var(--hero-gutter));right:auto;transform:none}
 .homepage-hero[data-current="0"] .hero-artwork{left:auto;right:calc(-1 * var(--hero-gutter))}
}
/* Custom packaging slide: copy left, leaf composition flush right. */
@media(min-width:768px){
 .homepage-hero[data-current="2"] #home-hero-panel-2 .hero-message-copy{grid-column:1}
 .homepage-hero[data-current="2"] .hero-artwork{left:auto;right:calc(-1 * var(--hero-gutter))}
}
@media(max-width:767px){
 .homepage-hero[data-current="2"] .hero-artwork{left:auto;right:calc(-1 * var(--hero-gutter))}
}
/* Fill the hero artwork area through the navigation row to the lower edge. */
@media(min-width:768px){
 .homepage-hero .hero-artwork{top:0;bottom:auto;height:calc(100% + 44px);width:auto;aspect-ratio:1.05;max-width:none;max-height:none}
}
@media(max-width:767px){
 .homepage-hero .hero-artwork{bottom:-52px}
}
/* Both lower leaves meet the same baseline on every slide. */
.homepage-hero .hero-leaf-layer[data-artwork] .hero-leaf:nth-child(3),
.homepage-hero .hero-leaf-layer[data-artwork] .hero-leaf:nth-child(4){height:100%;align-self:stretch}
/* Slide two catalogue photography fills each leaf without packshot padding. */
.homepage-hero .hero-leaf-layer[data-artwork="1"] .hero-leaf>img{object-fit:cover;object-position:center;padding:0;width:100%;height:100%}

/* Keep slide numbering and its breadcrumb together in a single header row. */
.homepage-hero .hero-kicker{display:grid;grid-template-columns:auto 24px minmax(0,1fr);align-items:center;gap:12px;flex-wrap:nowrap;font-size:clamp(10px,.85vw,14px);letter-spacing:.065em}
.homepage-hero .hero-kicker b{font-size:inherit}
.homepage-hero .hero-kicker>span[aria-hidden]{width:24px}
.homepage-hero .hero-kicker>.hero-kicker-label{display:block;width:auto;height:auto;background:none;opacity:1;white-space:nowrap}
@media(max-width:767px){.homepage-hero .hero-kicker{grid-template-columns:auto 16px minmax(0,1fr);gap:8px;font-size:11px;letter-spacing:.035em}.homepage-hero .hero-kicker>span[aria-hidden]{width:16px}.homepage-hero .hero-kicker>.hero-kicker-label{white-space:normal}}

/* Keep custom-studio copy comfortably clear of the featured cup. */
.homepage-hero #home-hero-panel-2 .hero-body{max-width:38ch;width:90%}
@media(max-width:767px){.homepage-hero #home-hero-panel-2 .hero-body{width:100%;max-width:38ch}}

/* One editorial rhythm across all carousel slides. Artwork remains independent. */
@media(min-width:768px){
 .homepage-hero .hero-message{align-items:start;padding-top:clamp(36px,5.5svh,56px);padding-bottom:28px}
 .homepage-hero .hero-message-copy{align-self:start;display:flex;flex-direction:column;align-items:flex-start;gap:22px}
 .homepage-hero .hero-message-copy>.hero-kicker,
 body.home-page .homepage-hero .hero-message-copy>.hero-heading,
 .homepage-hero .hero-message-copy>.hero-body{margin-top:0;margin-bottom:0}
 .homepage-hero .hero-message-copy>.hero-actions{margin:0;padding:0}
 .homepage-hero .hero-body{max-width:46ch}
 .homepage-hero #home-hero-panel-2 .hero-body{max-width:38ch;width:90%}
}
@media(min-width:768px) and (max-height:740px){
 .homepage-hero .hero-message{padding-top:28px;padding-bottom:20px}
 .homepage-hero .hero-message-copy{gap:16px}
 .homepage-hero .hero-message-copy>.hero-body{font-size:16px;line-height:1.5}
}
@media(max-width:767px){
 .homepage-hero .hero-message{padding-top:30px}
 .homepage-hero .hero-message-copy>.hero-kicker{margin-bottom:18px}
 body.home-page .homepage-hero .hero-message-copy>.hero-heading{margin-bottom:18px}
 .homepage-hero .hero-message-copy>.hero-body{margin-bottom:20px}
}
/* Centre the complete copy group vertically without altering its column or width. */
@media(min-width:768px){
 .homepage-hero .hero-message{align-items:center;padding-top:28px;padding-bottom:28px}
 .homepage-hero .hero-message-copy{align-self:center}
}
@media(min-width:768px) and (max-height:740px){
 .homepage-hero .hero-message{padding-top:20px;padding-bottom:20px}
}