/* R2.1 Home: explicit layout areas and a quieter editorial rhythm.
   This sheet owns Home only. Product rendering and material calibration live elsewhere. */
.r21-home{--editorial:"Georgia","Times New Roman",serif;--home-space:clamp(64px,7vw,112px)}
/* Reserve the scrollbar during the intro, so its release cannot move the destination. */
html:has(body.r21-home){scrollbar-gutter:stable}
.r21-home .flavor-hero{container:home-hero / inline-size;background:linear-gradient(115deg,color-mix(in srgb,var(--bg) 92%,var(--bg2)),var(--bg) 55%,color-mix(in srgb,var(--bg) 88%,var(--ui)))}
.r21-home .flavor-hero:before{display:none}
body.r21-home:has(.flavor-hero) .site-header:not(.on-light){background:var(--hero-header-bg,#b71d35)}
.r21-home .wrap,.r21-home .header-inner{width:min(calc(100% - 80px),1280px)}
.r21-home .hero-inner{width:min(calc(100% - 80px),1280px);margin:auto;min-height:calc(100svh - 96px);padding:112px 0 40px;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);grid-template-rows:auto auto 1fr auto;gap:0 5%;align-items:start}
.r21-home .hero-kicker{position:relative;inset:auto;grid-column:1;grid-row:1;align-self:center;max-width:none;margin:0;font-size:11px;letter-spacing:.13em}
.r21-home .hero-name[data-title-size]{position:relative;inset:auto;grid-column:1;grid-row:2;max-width:100%;margin:25px 0 0;font-size:clamp(52px,6.7vw,100px);line-height:1;letter-spacing:-.045em;text-wrap:balance;overflow-wrap:normal}
.r21-home .hero-name[data-title-size="short"]{font-size:clamp(70px,8.6vw,126px)}
.r21-home .hero-name[data-title-size="long"]{font-size:clamp(46px,5.8cqw,90px)}
.r21-home .hero-copy{position:relative;inset:auto;grid-column:1;grid-row:3 / 5;width:100%;max-width:430px;margin-top:30px;align-self:start}
.r21-home .hero-category-statement{font-size:18px;line-height:1.3}
.r21-home .hero-description{font-size:15px;line-height:1.6;max-width:40ch}
.r21-home .hero-facts{gap:10px 18px;margin-block:25px}
.r21-home .hero-actions .btn{min-height:48px;padding-inline:20px}
.r21-home .hero-family-toggle{position:relative;inset:auto;grid-column:2;grid-row:1;justify-self:center;margin:0;padding:3px;max-width:100%;align-self:start}
.r21-home .hero-family-toggle button{font-size:11px;min-height:42px;padding:10px 18px}
.r21-home .hero-family-toggle button[aria-pressed="true"]{color:var(--bg)}
.r21-home .hero-product{position:relative;inset:auto;grid-column:2;grid-row:2 / 4;height:clamp(380px,57svh,650px);width:100%;margin:22px 0 14px}
.r21-home .hero-product .hero-bottle{left:5%;top:1%;height:95%;max-width:37%;transform:none;opacity:1;filter:drop-shadow(0 20px 20px #00000020)}
.r21-home .hero-product .hero-pack{right:1%;top:17%;height:77%;width:auto;max-width:73%;transform:none;opacity:1;filter:drop-shadow(0 18px 18px #00000018)}
.r21-home .flavor-hero[data-family="pet"] .hero-product .hero-bottle{left:0;right:0;top:4%;margin-inline:auto;height:90%;max-width:65%;transform:none}
.r21-home .flavor-hero[data-family="pet"] .hero-pack,.r21-home .flavor-hero[data-family="pet"] .hero-format-toggle{display:none!important}
.r21-home .flavor-hero[data-presentation="pack"] .hero-bottle{opacity:0;visibility:hidden;transform:none}
.r21-home .flavor-hero[data-presentation="pack"] .hero-pack{inset:0;max-width:100%;width:100%;height:100%;margin:auto;transform:none;opacity:1}
.r21-home .hero-format-toggle{position:relative;inset:auto;grid-column:2;grid-row:4;justify-self:center;margin:0;align-self:end}
.r21-home .hero-format-toggle button{min-height:44px;min-width:94px;padding:10px 18px;opacity:1}
.r21-home .hero-rail{min-height:96px;background:var(--bg)}
.r21-home .flavor-button span,.r21-home .flavor-button em,.r21-home .flavor-button.is-unavailable{opacity:1}
.r21-home .flavor-button span{font-size:11px}
.r21-home .flavor-button em{font-size:10px;line-height:1.5;letter-spacing:.06em}
.r21-home .hero-product.commit-pulse .hero-bottle,.r21-home .hero-product.commit-pulse .hero-pack{animation:none}
.r21-home .hero-product .product-transition-wash{display:none}
.r21-home .family{padding:var(--home-space) 0 74px}
.r21-home .family-head{margin-bottom:58px;gap:32px}
.r21-home .family-head h2{font-family:var(--editorial);font-size:clamp(42px,4.7vw,68px);line-height:1.04;letter-spacing:-.045em;font-weight:400;text-transform:none;max-width:none}
.r21-home .family-head p{font-size:15px;line-height:1.65;max-width:38ch}
.r21-home .bottle-link img{height:min(40vw,470px)}
.r21-home .bottle-meta strong{font-size:16px;line-height:1.3}
.r21-home .bottle-meta small{font-size:10px;line-height:1.5}
.chapter-label{display:block;font-size:10px;font-weight:750;letter-spacing:.16em;text-transform:uppercase}
.ritual-invitation{background:#183d34;color:#f7f4ec;padding:64px 0}
.ritual-inner{display:grid;grid-template-columns:1.2fr .8fr;gap:9%;align-items:center}
.ritual-inner h2{font:400 clamp(34px,3.6vw,54px)/1.1 var(--editorial);letter-spacing:-.035em;margin:22px 0 0}
.ritual-action p{font-size:15px;line-height:1.65;max-width:36ch;margin:0 0 20px;color:#d9e4dc}
.text-link{display:inline-flex;align-items:center;justify-content:space-between;gap:24px;min-height:44px;text-decoration:none;border-bottom:1px solid currentColor;font-size:13px;font-weight:650;padding-bottom:4px}
.text-link span[aria-hidden]{font-size:20px;font-weight:400}
.text-link:hover{border-bottom-width:2px}
.ritual-action small{display:block;font-size:11px;color:#d9e4dc;line-height:1.5;margin-top:14px}
.format-story{padding:var(--home-space) 0;background:#f7f4ec;--format-accent:#b71d35}
.chapter-heading{display:flex;align-items:end;justify-content:space-between;gap:32px;margin-bottom:48px}
.chapter-heading h2{font:400 clamp(46px,5.1vw,74px)/1.02 var(--editorial);letter-spacing:-.045em;margin:20px 0 0}
.chapter-heading>p{max-width:36ch;margin:0 0 8px;font-size:14px;color:var(--muted);line-height:1.6}
.chapter-heading>p strong{display:block;font-size:18px;font-weight:650;color:var(--ink);margin-bottom:8px}
.chapter-heading>p span{display:block}
.format-pair{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.format-option{min-width:0;padding:30px 36px 28px}
.format-option:first-child{padding-left:0;border-right:1px solid var(--line)}
.format-option:last-child{padding-right:0}
.format-label{display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.format-label h3{font:400 30px/1.1 var(--editorial);margin:0}
.format-label>span{font-size:13px;font-weight:650}
.format-art{height:310px;display:grid;grid-template-columns:30% 70%;align-items:center;position:relative;gap:0;margin:26px 0 18px;background:radial-gradient(ellipse at 55% 70%,color-mix(in srgb,var(--format-accent) 9%,transparent),transparent 67%)}
.format-art img{position:relative;width:100%;height:100%;min-width:0;object-fit:contain;max-height:310px;filter:drop-shadow(0 12px 14px #112a2214)}
.format-art .format-bottle{height:94%;z-index:1}
.format-art .format-pack{height:85%;align-self:end;max-width:100%}
[data-format-option="pet"] .format-art{grid-template-columns:1fr}
[data-format-option="pet"] .format-art .format-bottle{height:94%}
.format-detail{display:grid;grid-template-columns:1fr;gap:6px;padding-top:14px}
.format-detail p{font-size:14px;font-weight:650;margin:0}
.format-detail>span{font-size:12px;color:var(--muted)}
.format-detail .text-link{justify-self:start;margin-top:12px}
.format-availability{font-size:14px;line-height:1.65;max-width:70ch;margin:24px 0 0}
.format-availability a{display:inline-block;text-underline-offset:4px}
.format-story[data-flavor="kiwi-paradise"] .format-pair{grid-template-columns:minmax(0,1fr)}
.format-story[data-flavor="kiwi-paradise"] .format-option:first-child{border-right:0;padding-right:0;display:grid;grid-template-columns:1fr 1.2fr;gap:0 8%}
.format-story[data-flavor="kiwi-paradise"] .format-art{grid-column:2;grid-row:1 / 3;margin:0}
.format-story[data-flavor="kiwi-paradise"] .format-detail{align-self:end}
.format-option[hidden],.format-availability[hidden]{display:none!important}
.r21-home .real-world{--muted:#4f6159;min-height:0;display:block;background:#eae8de;padding:var(--home-space) 0;overflow:visible}
.moment-inner{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:10%}
.r21-home .real-world-copy{padding:0;display:block}
.r21-home .real-world-copy h2{font:400 clamp(42px,4.9vw,70px)/1.06 var(--editorial);letter-spacing:-.045em;text-transform:none;max-width:none;margin:24px 0}
.r21-home .real-world-copy p{font-size:15px;line-height:1.7;max-width:34ch;margin:0 0 32px}
.r21-home .real-world-copy .moment-caption{display:block;font-size:11px;font-weight:500;letter-spacing:.02em;line-height:1.8;color:var(--muted)}
.moment-frame{width:min(100%,320px);justify-self:center;position:relative}
.moment-frame:before{content:"";position:absolute;inset:14px -14px 48px 14px;border:1px solid #829287;pointer-events:none}
.r21-home .real-world-media{min-height:0;height:auto;aspect-ratio:9/16;width:100%;background:#183d34;overflow:hidden}
.r21-home .real-world-media img,.r21-home .real-world-media video{object-fit:contain;object-position:center;filter:none;width:100%;height:100%}
.r21-home .real-world-play{left:16px;right:16px;bottom:16px;min-height:48px;justify-content:center;background:#183d34e8;color:#fff8ec;border:1px solid #fff8ec99;font-size:12px;padding:12px}
.moment-frame>p{position:relative;margin:16px 0 0;font-size:11px;letter-spacing:.03em;color:var(--muted)}
.r21-home .business{padding:var(--home-space) 0;background:#f7f4ec;border-top:0}
.r21-home .business-inner{grid-template-columns:1fr auto;gap:8%}
.r21-home .business h2{font:400 clamp(42px,4.8vw,68px)/1.05 var(--editorial);letter-spacing:-.04em;text-transform:none;margin:22px 0}
.r21-home .business p{font-size:15px;line-height:1.65;max-width:43ch;color:var(--muted)}
.r21-home .business-actions{display:flex;flex-direction:column;align-items:stretch;gap:10px;min-width:0;width:min(100%,420px)}
.r21-home .business-actions .email-channels{margin-bottom:0}
.r21-home .business-actions .email-card strong{font-size:clamp(14px,1.3vw,19px)}
.r21-home .business .btn.solid{background:#183d34;border-color:#183d34;color:#fff8ec;gap:32px;min-height:52px;padding:12px 24px}
.business-mail{font-size:13px;text-decoration-thickness:1px;text-underline-offset:5px}
.r21-home .footer{border-top:1px solid var(--line)}
/* R2.3: paired flavour chapters, one clock, original unfiltered photographs. */
html.intro-eligible .r21-home .entry-experience{background:transparent;color:#fff4de;transform:none;opacity:1;transition:none;will-change:auto}
.r21-home .entry-experience:after{display:none}
.r21-home .entry-surface{position:absolute;inset:0;background:#9e1933;z-index:-1;will-change:opacity}
.r21-home .entry-chapter{position:absolute;inset:0;overflow:hidden;background:linear-gradient(0deg,#10231ba8,transparent 20%),linear-gradient(90deg,#10231be0 0%,#10231b55 42%,transparent 75%),var(--chapter-colour)}
.r21-home .entry-chapter[hidden]{display:none}
.r21-home .entry-experience .entry-bottle{position:absolute;inset:auto;max-width:none;max-height:none;object-fit:contain;transform:none!important;animation:none!important;opacity:0;visibility:hidden;filter:drop-shadow(0 24px 22px #0003);transition:opacity 240ms ease}
.r21-home .entry-experience.is-running .entry-bottle,.r21-home .entry-experience.is-leaving .entry-bottle{visibility:visible;opacity:1}
.r21-home .entry-flavour{position:absolute;bottom:22px;left:20px;right:20px;margin:0;text-align:center;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#fff4de;text-shadow:0 1px 8px #0008}
.r21-home .entry-brand{left:max(40px,calc((100vw - 1280px)/2));top:28px;font-size:19px}
.r21-home .entry-skip{right:max(40px,calc((100vw - 1280px)/2));top:18px;min-height:44px;background:#183d34aa;backdrop-filter:none}
.entry-signature{position:absolute;left:max(40px,calc((100vw - 1280px)/2));top:44%;max-width:30%;transform:translateY(-50%)}
.entry-signature span{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:20px}
.entry-signature strong{display:block;font:400 clamp(44px,4.7vw,72px)/1.05 var(--editorial);letter-spacing:-.045em}
.r21-home .entry-signature,.r21-home .entry-brand,.r21-home .entry-flavour{transition:opacity var(--entry-copy-exit-ms,180ms) ease}
.r21-home .entry-experience.is-leaving .entry-signature,.r21-home .entry-experience.is-leaving .entry-brand,.r21-home .entry-experience.is-leaving .entry-flavour{opacity:0}
html.intro-handoff .r21-home .entry-experience .entry-bottle{visibility:hidden!important}
.r21-home .entry-handoff{pointer-events:none;z-index:310;transform-origin:center center;object-fit:contain}
/* Container width also catches magnification and narrow embedded contexts. */
@container home-hero (max-width:900px){
 .r21-home .hero-inner{width:calc(100% - 40px);padding-top:96px;grid-template-columns:1fr;grid-template-rows:auto auto auto auto auto auto;min-height:0;padding-bottom:30px}
 .r21-home .hero-kicker{grid-column:1;grid-row:1;font-size:10px}
 .r21-home .hero-name[data-title-size]{grid-column:1;grid-row:2;font-size:clamp(40px,10cqw,76px);max-width:100%;margin:18px 0 24px}
 .r21-home .hero-name[data-title-size="short"]{font-size:clamp(58px,13cqw,100px)}
 .r21-home .hero-family-toggle{grid-column:1;grid-row:3;justify-self:center}
 .r21-home .flavor-hero .hero-product{grid-column:1;grid-row:4;height:clamp(300px,82cqw,480px);margin:22px 0 12px}
 .r21-home .js-only.hero-format-toggle{display:flex!important;grid-column:1;grid-row:5;justify-self:center;margin-bottom:28px}
 .r21-home .hero-copy{grid-column:1;grid-row:6;max-width:520px;margin:0;justify-self:center}
 .r21-home .hero-product .hero-bottle{left:9%;max-width:37%;top:1%;height:95%}
 .r21-home .hero-product .hero-pack{right:0;top:17%;height:77%;max-width:71%}
}
@media(max-width:900px){
 .r21-home .wrap,.r21-home .header-inner,.r21-home .hero-inner{width:calc(100% - 40px)}
 .r21-home .hero-rail{grid-template-columns:repeat(5,minmax(132px,1fr));overflow-x:auto;min-height:104px;scroll-snap-type:x proximity}
 .r21-home .flavor-button{padding:16px;scroll-snap-align:start}
 .r21-home .flavor-button strong{font-size:14px;line-height:1.3}
 .r21-home .family-head{display:block;margin-bottom:40px}
 .r21-home .family-head p{margin-top:24px;max-width:45ch}
 .r21-home .bottle-lineup{grid-template-columns:repeat(5,minmax(130px,1fr));overflow-x:auto;gap:12px;scroll-snap-type:x proximity}
 .r21-home .bottle-link{scroll-snap-align:start;padding:0 10px 18px}
 .r21-home .bottle-link img{height:340px;max-height:none}
 .ritual-inner{grid-template-columns:1fr;gap:32px}
 .ritual-action p{max-width:45ch}
 .chapter-heading{align-items:start;gap:28px}
 .chapter-heading>p{max-width:25ch;margin-top:40px}
 .format-option{padding:24px 20px}
 .format-art,.format-art img{height:270px;max-height:270px}
 .moment-inner{gap:8%}
 .moment-frame{width:min(100%,280px)}
 .r21-home .business-inner{grid-template-columns:1fr;gap:32px}
 .r21-home .entry-brand{left:20px}
 .r21-home .entry-skip{right:20px}
 .entry-signature{left:20px;top:114px;transform:none;max-width:calc(100% - 40px)}
 .entry-signature span{margin-bottom:12px;font-size:9px}
 .entry-signature strong{font-size:clamp(36px,7vw,54px)}
}
@media(max-width:600px){
 .r21-home{--home-space:64px}
 .chapter-heading{display:block;margin-bottom:30px}
 .chapter-heading>p{margin-top:24px;max-width:35ch}
 .format-pair{grid-template-columns:1fr}
 .format-option,.format-option:first-child,.format-option:last-child{padding:26px 0;border-right:0}
 .format-option+ .format-option{border-top:1px solid var(--line)}
 .format-art,.format-art img{height:300px;max-height:300px}
 .format-story[data-flavor="kiwi-paradise"] .format-option:first-child{display:block}
 .format-story[data-flavor="kiwi-paradise"] .format-art{margin:26px 0 18px}
 .moment-inner{grid-template-columns:1fr;gap:38px}
 .moment-frame{width:min(calc(100% - 16px),290px);justify-self:center}
 .r21-home .real-world-copy h2{font-size:46px}
 .r21-home .hero-name[data-title-size]{font-size:clamp(40px,11vw,62px)}
 .r21-home .hero-name[data-title-size="short"]{font-size:clamp(58px,15vw,84px)}
 .r21-home .hero-family-toggle button{min-height:44px;padding:10px 20px}
 .r21-home .hero-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}
 .r21-home .hero-actions .btn{padding-inline:8px;font-size:11px}
}
@media(prefers-reduced-motion:reduce){
 .r21-home *{scroll-behavior:auto!important}
 .r21-home .hero-product img,.r21-home .bottle-link img{transition:none!important}
}