/* Generated by build-styles.py. Edit the manifest-listed source styles. */
/* Source: assets/r06-1b4b1f164146cb864c00/foundations/foundations.css */
/* West Pak R03 design foundations (SW-01, SW-02, SW-03).
Loaded FIRST on every R03 page (manifest pages.*.styles[0]).
Spec + copy-paste markup: docs/design-system.md. Owner: foundations.
Prefix: --wpa-* tokens, .wpa-* classes, data-* contracts. Never edit per page;
page CSS may consume tokens and add page-specific layout only. */
/* ---------- Font: Antonio variable (100-700), self-hosted latin subset ----------
Same family name as the theme's Antonio 400 so legacy rules gain real
500/600/700 weights instead of synthetic or fallback weights. */
@font-face {
font-family: 'Antonio';
font-style: normal;
font-weight: 100 700;
font-display: swap;
src: url("../foundations/fonts/antonio-var-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ---------- Tokens ---------- */
:root {
/* Brand color. VCA artwork values are canonical; live-site values noted. */
--wpa-cream: #FFF9DD; /* page background. Live: #FFFADC (Salient extra-color-3) */
--wpa-cream-2: #F7EFC8; /* alt cream band / cards on cream (derived) */
--wpa-cream-line: #E6DDB3; /* hairlines on cream (derived) */
--wpa-lime: #B6DF00; /* accent, primary button. Live: #B7E000 */
--wpa-lime-hover: #C6EA2A; /* derived */
--wpa-green: #93C11F; /* mid green (VCA) */
--wpa-olive: #5A6E00; /* live gradient start / small accents on cream (AA on cream for large text) */
--wpa-forest: #223F13; /* bands, headlines on cream, button text. Live accent: #2B4216 */
--wpa-forest-2: #2B4216; /* live accent: hover/borders on forest */
--wpa-forest-deep: #16290C; /* footer / deepest band (derived) */
--wpa-ink: #1B1F17; /* body text on cream */
--wpa-ink-soft: #3D4536; /* secondary text on cream (AA) */
--wpa-yellow: #FAD60C; /* organic accent only. Live "Make 'em now" button */
--wpa-black: #111111; /* booth black, film letterbox */
--wpa-white: #FFFFFF; /* text on dark/photo ONLY. Never a page background. */
--wpa-scrim: rgba(17, 24, 12, .55);
/* Type families */
--wpa-font-display: 'Antonio', 'Arial Narrow', sans-serif;
--wpa-font-body: 'Open Sans', Arial, sans-serif;
/* Type scale (desktop max = live westpakavocado.com values) */
--wpa-fs-display: clamp(56px, 8.4vw, 120px); /* hero H1. Live 80-100px */
--wpa-fs-h1: clamp(44px, 5.6vw, 80px); /* page/section H1. Live 80px */
--wpa-fs-h2: clamp(34px, 3.8vw, 54px); /* section header. Live 54px */
--wpa-fs-h3: clamp(24px, 2.2vw, 34px); /* card/sub header. Live 34px */
--wpa-fs-h4: 20px; /* label caps. Live Antonio 700 20px */
--wpa-fs-lede: clamp(18px, 1.5vw, 21px); /* positioning sentence */
--wpa-fs-body: 16px;
--wpa-fs-small: 14px; /* live body is 14/26 */
--wpa-fs-button: 14px;
--wpa-fs-stat: clamp(64px, 9vw, 140px); /* big numerals */
--wpa-lh-display: 1.0;
--wpa-lh-heading: 1.08; /* live 80/86.4 */
--wpa-lh-h3: 1.2;
--wpa-lh-body: 1.65;
--wpa-fw-display: 600; /* live H1/H2 weight */
--wpa-fw-h3: 600;
--wpa-fw-label: 700;
--wpa-tracking-heading: 0;
--wpa-tracking-button: .14em; /* live 2px at 14px */
/* Space (4px grid) */
--wpa-s1: 4px; --wpa-s2: 8px; --wpa-s3: 12px; --wpa-s4: 16px;
--wpa-s5: 24px; --wpa-s6: 32px; --wpa-s7: 48px; --wpa-s8: 64px;
--wpa-s9: 96px; --wpa-s10: 128px;
--wpa-section-y: clamp(64px, 9vw, 128px);
--wpa-gutter: clamp(16px, 6vw, 90px); /* live container padding 90px */
--wpa-container: 1300px; /* live content size */
--wpa-measure: 62ch;
/* Shape + motion */
--wpa-radius-sm: 8px;
--wpa-radius: 16px;
--wpa-radius-lg: 24px;
--wpa-radius-pill: 999px;
--wpa-shadow: 0 10px 30px rgba(34, 63, 19, .12);
--wpa-ease: cubic-bezier(.3, 1, .3, 1); /* live Salient easing */
--wpa-dur-fast: 180ms;
--wpa-dur: 320ms;
/* Header contract (see header overlay below) */
--wpa-hdr-h: 128px; /* desktop Salient header */
--wpa-hdr-h-mobile: 60px;
--wpa-hdr-gradient: linear-gradient(180deg, rgba(10, 18, 6, .62) 0%, rgba(10, 18, 6, .28) 55%, rgba(10, 18, 6, 0) 100%);
}
@media (max-width: 999px) { :root { --wpa-hdr-h: calc(var(--wpa-hdr-h-mobile) + env(safe-area-inset-top, 0px)); } }
/* ---------- Tone scopes: set local surface/ink/accent; components read these ---------- */
#wpr06-body [data-tone], #wpr06-body .wpa-tone-cream, #wpr06-body .wpa-tone-forest, #wpr06-body .wpa-tone-photo {
--wpa-surface: var(--wpa-cream); --wpa-fg: var(--wpa-ink); --wpa-fg-soft: var(--wpa-ink-soft);
--wpa-heading: var(--wpa-forest); --wpa-accent: var(--wpa-olive); --wpa-rule: var(--wpa-cream-line);
}
#wpr06-body [data-tone="cream-2"] { --wpa-surface: var(--wpa-cream-2); }
#wpr06-body :is([data-tone="forest"], .wpa-tone-forest) {
--wpa-surface: var(--wpa-forest); --wpa-fg: var(--wpa-cream); --wpa-fg-soft: rgba(255, 249, 221, .82);
--wpa-heading: var(--wpa-cream); --wpa-accent: var(--wpa-lime); --wpa-rule: rgba(255, 249, 221, .18);
}
#wpr06-body :is([data-tone="lime"]) {
--wpa-surface: var(--wpa-lime); --wpa-fg: var(--wpa-forest); --wpa-fg-soft: var(--wpa-forest-2);
--wpa-heading: var(--wpa-forest); --wpa-accent: var(--wpa-forest); --wpa-rule: rgba(34, 63, 19, .2);
}
#wpr06-body :is([data-tone="yellow"]) {
--wpa-surface: var(--wpa-yellow); --wpa-fg: var(--wpa-forest); --wpa-fg-soft: var(--wpa-forest-2);
--wpa-heading: var(--wpa-forest); --wpa-accent: var(--wpa-forest); --wpa-rule: rgba(34, 63, 19, .2);
}
#wpr06-body :is([data-tone="photo"], .wpa-tone-photo) {
--wpa-surface: var(--wpa-forest-deep); --wpa-fg: var(--wpa-white); --wpa-fg-soft: rgba(255, 255, 255, .86);
--wpa-heading: var(--wpa-white); --wpa-accent: var(--wpa-lime); --wpa-rule: rgba(255, 255, 255, .22);
}
/* ---------- Section pattern: header -> one sentence -> scannable points ---------- */
#wpr06-body .wpa-section {
position: relative; isolation: isolate; box-sizing: border-box;
padding: var(--wpa-section-y) var(--wpa-gutter);
background: var(--wpa-surface, var(--wpa-cream)); color: var(--wpa-fg, var(--wpa-ink));
font-family: var(--wpa-font-body); font-size: var(--wpa-fs-body); line-height: var(--wpa-lh-body);
}
#wpr06-body .wpa-section__inner { max-width: var(--wpa-container); margin: 0 auto; }
#wpr06-body .wpa-section__inner--narrow { max-width: 880px; }
#wpr06-body .wpa-section__head { max-width: 900px; margin: 0 0 var(--wpa-s7); }
#wpr06-body .wpa-section__head--center { margin-inline: auto; text-align: center; }
#wpr06-body :is(.wpa-title, .wpa-section__title) {
margin: 0 0 var(--wpa-s4); color: var(--wpa-heading, var(--wpa-forest));
font-family: var(--wpa-font-display); font-weight: var(--wpa-fw-display);
font-size: var(--wpa-fs-h2); line-height: var(--wpa-lh-heading);
letter-spacing: var(--wpa-tracking-heading); text-transform: uppercase; text-wrap: balance;
}
#wpr06-body .wpa-title--display { font-size: var(--wpa-fs-display); line-height: var(--wpa-lh-display); }
#wpr06-body .wpa-title--h1 { font-size: var(--wpa-fs-h1); }
#wpr06-body .wpa-title--h3 { font-size: var(--wpa-fs-h3); line-height: var(--wpa-lh-h3); font-weight: var(--wpa-fw-h3); }
#wpr06-body .wpa-title .wpa-accent, #wpr06-body .wpa-accent { color: var(--wpa-accent); }
#wpr06-body :is(.wpa-lede, .wpa-section__lede) {
margin: 0; max-width: var(--wpa-measure); color: var(--wpa-fg);
font-family: var(--wpa-font-body); font-size: var(--wpa-fs-lede); line-height: 1.55; font-weight: 400; text-wrap: pretty;
}
#wpr06-body .wpa-section__head--center .wpa-lede { margin-inline: auto; }
#wpr06-body .wpa-section__actions { display: flex; flex-wrap: wrap; gap: var(--wpa-s4); align-items: center; margin-top: var(--wpa-s6); }
#wpr06-body .wpa-section__head--center + .wpa-section__actions,
#wpr06-body .wpa-section__head--center .wpa-section__actions { justify-content: center; }
/* Photo band: background media + scrim, content on top */
#wpr06-body .wpa-section__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
#wpr06-body .wpa-section__media > :is(img, video, picture) { width: 100%; height: 100%; object-fit: cover; display: block; }
#wpr06-body .wpa-section__media > picture > img { width: 100%; height: 100%; object-fit: cover; }
#wpr06-body .wpa-section__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--wpa-scrim) 0%, rgba(17, 24, 12, .2) 70%); }
/* Scannable points: 1-3 short lines each, lime marker */
#wpr06-body .wpa-points {
list-style: none; margin: 0; padding: 0;
display: grid; gap: var(--wpa-s5) var(--wpa-s6);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
#wpr06-body .wpa-points > li { position: relative; margin: 0; padding: 0 0 0 28px; color: var(--wpa-fg-soft, var(--wpa-ink-soft)); font-size: var(--wpa-fs-body); line-height: 1.55; }
#wpr06-body .wpa-points > li::before {
content: ''; position: absolute; left: 0; top: .32em; width: 14px; height: 14px; border-radius: 50%;
background: var(--wpa-lime); box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--wpa-lime) 60%, var(--wpa-forest));
}
#wpr06-body .wpa-points > li > strong:first-child {
display: block; margin-bottom: var(--wpa-s1); color: var(--wpa-heading, var(--wpa-forest));
font-family: var(--wpa-font-display); font-weight: var(--wpa-fw-label); font-size: var(--wpa-fs-h4);
line-height: 1.25; text-transform: uppercase; letter-spacing: .01em;
}
#wpr06-body .wpa-points--stack { grid-template-columns: 1fr; max-width: 720px; }
/* Big stat (forest band with lime numerals) */
#wpr06-body .wpa-stats { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--wpa-s6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
#wpr06-body .wpa-stat__value { display: block; color: var(--wpa-accent); font-family: var(--wpa-font-display); font-weight: 600; font-size: var(--wpa-fs-stat); line-height: .95; }
#wpr06-body .wpa-stat__label { display: block; margin-top: var(--wpa-s2); color: var(--wpa-fg); font-family: var(--wpa-font-display); font-weight: 500; font-size: var(--wpa-fs-h4); text-transform: uppercase; line-height: 1.25; }
/* ---------- Buttons ---------- */
#wpr06-body .wpa-btn {
--_bg: var(--wpa-lime); --_fg: var(--wpa-forest); --_bd: var(--wpa-lime);
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
box-sizing: border-box; min-height: 48px; margin: 0; padding: 14px 32px;
border: 2px solid var(--_bd); border-radius: var(--wpa-radius-pill);
background: var(--_bg); color: var(--_fg) !important; box-shadow: none;
font-family: var(--wpa-font-body); font-weight: 700; font-size: var(--wpa-fs-button); line-height: 1.1;
letter-spacing: var(--wpa-tracking-button); text-transform: uppercase; text-decoration: none !important; text-align: center;
cursor: pointer; -webkit-tap-highlight-color: transparent;
transition: background-color var(--wpa-dur-fast) ease, color var(--wpa-dur-fast) ease, border-color var(--wpa-dur-fast) ease, transform var(--wpa-dur-fast) var(--wpa-ease);
}
#wpr06-body .wpa-btn:hover { --_bg: var(--wpa-lime-hover); --_bd: var(--wpa-lime-hover); }
#wpr06-body .wpa-btn:active { transform: translateY(1px); }
#wpr06-body .wpa-btn:focus-visible { outline: 3px solid var(--wpa-forest); outline-offset: 3px; }
#wpr06-body :is([data-tone="forest"], [data-tone="photo"], .wpa-tone-forest, .wpa-tone-photo) .wpa-btn:focus-visible { outline-color: var(--wpa-cream); }
#wpr06-body .wpa-btn--secondary { --_bg: transparent; --_fg: var(--wpa-heading, var(--wpa-forest)); --_bd: currentColor; color: var(--wpa-heading, var(--wpa-forest)) !important; }
#wpr06-body .wpa-btn--secondary:hover { --_bg: var(--wpa-heading, var(--wpa-forest)); --_bd: var(--wpa-heading, var(--wpa-forest)); --_fg: var(--wpa-surface, var(--wpa-cream)); color: var(--wpa-surface, var(--wpa-cream)) !important; }
#wpr06-body .wpa-btn--forest { --_bg: var(--wpa-forest); --_fg: var(--wpa-cream); --_bd: var(--wpa-forest); }
#wpr06-body .wpa-btn--forest:hover { --_bg: var(--wpa-forest-2); --_bd: var(--wpa-forest-2); }
#wpr06-body .wpa-btn--lg { min-height: 60px; padding: 18px 44px; font-size: 16px; }
#wpr06-body .wpa-btn--xl { min-height: 72px; padding: 22px 56px; font-size: clamp(16px, 1.4vw, 20px); }
#wpr06-body .wpa-btn[aria-disabled="true"], #wpr06-body .wpa-btn:disabled { opacity: .45; pointer-events: none; }
/* Form submits: Salient's "slightly rounded" theme rule gives submit buttons a 20px radius. */
#wpr06-body button.wpa-btn[type="submit"] { border-radius: var(--wpa-radius-pill) !important; font-weight: 700; }
/* Phones (Final QA, Oct 2): long labels ("Register for the Resource Center") wrapped to two
lines at the desktop tracking. Tighter tracking and padding keep them on one line; if one
still wraps, the two lines are balanced. */
@media (max-width: 480px) {
#wpr06-body .wpa-btn { padding-inline: 20px; letter-spacing: .08em; text-wrap: balance; }
#wpr06-body :is(.wpa-btn--lg, .wpa-btn--xl) { padding-inline: 24px; font-size: 14px; }
}
#wpr06-body .wpa-link {
display: inline-flex; align-items: center; gap: 10px; padding: 6px 0;
color: var(--wpa-heading, var(--wpa-forest)) !important; text-decoration: none !important;
font-family: var(--wpa-font-body); font-weight: 700; font-size: 15px; line-height: 1.3;
border-bottom: 2px solid var(--wpa-lime);
}
#wpr06-body .wpa-link::after { content: '\2192'; font-weight: 400; transition: transform var(--wpa-dur-fast) var(--wpa-ease); }
#wpr06-body .wpa-link:hover::after { transform: translateX(4px); }
#wpr06-body .wpa-link:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
#wpr06-body .wpa-link--down::after { content: '\2193'; }
#wpr06-body .wpa-link--down:hover::after { transform: translateY(3px); }
/* ---------- Sticky sub-nav (journey nav) ---------- */
#wpr06-body .wpa-subnav {
position: sticky; top: 0; z-index: 50;
background: color-mix(in srgb, var(--wpa-cream) 94%, transparent);
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
border-bottom: 1px solid var(--wpa-cream-line);
transition: top 240ms ease;
}
#wpr06-body .wpa-subnav__list {
list-style: none; margin: 0 auto; padding: 0 var(--wpa-gutter); max-width: calc(var(--wpa-container) + 2 * var(--wpa-gutter));
display: flex; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
}
#wpr06-body .wpa-subnav__list::-webkit-scrollbar { display: none; }
#wpr06-body .wpa-subnav__list > li { flex: 1 1 0; min-width: max-content; margin: 0; padding: 0; border-left: 1px solid var(--wpa-cream-line); }
#wpr06-body .wpa-subnav__list > li:last-child { border-right: 1px solid var(--wpa-cream-line); }
#wpr06-body .wpa-subnav__list a {
position: relative; display: flex; align-items: center; justify-content: center; gap: 10px;
min-height: 64px; padding: 12px 20px; box-sizing: border-box; text-align: center;
color: var(--wpa-forest) !important; text-decoration: none !important;
font-family: var(--wpa-font-body); font-weight: 700; font-size: 13px; line-height: 1.3;
}
#wpr06-body .wpa-subnav__list a::after { content: '\2193'; font-weight: 400; }
#wpr06-body .wpa-subnav__list a::before {
content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--wpa-lime);
transform: scaleX(0); transform-origin: center; transition: transform var(--wpa-dur) var(--wpa-ease);
}
#wpr06-body .wpa-subnav__list a:is([aria-current="location"], :hover)::before { transform: scaleX(1); }
#wpr06-body .wpa-subnav__list a:focus-visible { outline: 2px solid var(--wpa-forest); outline-offset: -4px; }
@media (max-width: 999px) {
#wpr06-body .wpa-subnav__list { padding: 0; }
#wpr06-body .wpa-subnav__list a { min-height: 52px; }
}
/* ---------- Accordion / dropdown ---------- */
#wpr06-body .wpa-accordion { border-top: 1px solid var(--wpa-rule, var(--wpa-cream-line)); }
#wpr06-body .wpa-accordion__item { border-bottom: 1px solid var(--wpa-rule, var(--wpa-cream-line)); }
#wpr06-body .wpa-accordion__heading { margin: 0 !important; padding: 0; font-size: inherit; line-height: inherit; }
#wpr06-body .wpa-accordion__trigger {
all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: var(--wpa-s4);
width: 100%; min-height: 64px; padding: var(--wpa-s4) 0; cursor: pointer;
color: var(--wpa-heading, var(--wpa-forest)); font-family: var(--wpa-font-display); font-weight: 600;
font-size: clamp(20px, 1.8vw, 26px); line-height: 1.2; text-transform: uppercase; text-align: left;
text-wrap: balance; /* no one-word second line ("…Around Your / Goals") */
}
#wpr06-body .wpa-accordion__trigger::after {
content: ''; flex: none; width: 32px; height: 32px; border-radius: 50%;
background: var(--wpa-lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M10 16h12M16 10v12' stroke='%23223F13' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/100% no-repeat;
transition: transform var(--wpa-dur) var(--wpa-ease);
}
/* The plus turns into a cross on LashPop's chevron spring (stiffness 260, damping 18, mass 1;
sampled exactly, 12% overshoot, settles ~0.8s). A CSS transition, so a mid-way click reverses smoothly. */
@supports (transition-timing-function: linear(0, 1)) {
#wpr06-body .wpa-accordion__trigger::after { transition: transform 800ms linear(0, 0.046, 0.161, 0.313, 0.479, 0.64, 0.783, 0.902, 0.994, 1.058, 1.098, 1.117, 1.12, 1.112, 1.097, 1.078, 1.058, 1.039, 1.022, 1.009, 0.998, 0.991, 0.987, 0.986, 0.986, 0.987, 0.989, 0.991, 0.994, 0.996, 0.998, 0.999, 1, 1.001, 1.002, 1.002, 1.002, 1.002, 1.001, 1.001, 1), background-color var(--wpa-dur-fast) ease; }
}
#wpr06-body .wpa-accordion__trigger[aria-expanded="true"]::after { transform: rotate(45deg); }
#wpr06-body .wpa-accordion__trigger:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 2px; }
#wpr06-body .wpa-accordion__trigger:hover { color: var(--wpa-accent); }
#wpr06-body .wpa-accordion__panel { padding: 0 48px var(--wpa-s5) 0; color: var(--wpa-fg-soft, var(--wpa-ink-soft)); font-size: var(--wpa-fs-body); line-height: 1.6; }
#wpr06-body .wpa-accordion__panel[hidden] { display: none; }
#wpr06-body .wpa-accordion__panel > :first-child { margin-top: 0; }
#wpr06-body .wpa-accordion__panel > :last-child { margin-bottom: 0; }
/* Open/close motion lives in foundations.js (LashPop height spring on this clip + content fade,
reduced-motion aware). The JS wraps each panel in .wpa-accordion__clip; only the clip changes
height (overflow hidden only while it moves), so the panel's padding and text never reflow.
Don't add CSS height/max-height/display transitions to the panel or the clip. */
#wpr06-body .wpa-accordion__clip { contain: layout style; }
@keyframes wpa-reveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* ---------- Horizontal carousel primitive ---------- */
#wpr06-body .wpa-carousel { --wpa-per-view: 1; --wpa-carousel-gap: 24px; position: relative; }
#wpr06-body .wpa-carousel__track {
display: grid; grid-auto-flow: column; gap: var(--wpa-carousel-gap);
grid-auto-columns: calc((100% - (var(--wpa-per-view) - 1) * var(--wpa-carousel-gap)) / var(--wpa-per-view));
overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
margin: 0; padding: 0; list-style: none;
}
#wpr06-body .wpa-carousel__track::-webkit-scrollbar { display: none; }
#wpr06-body .wpa-carousel__track:focus-visible { outline: 2px solid var(--wpa-forest); outline-offset: 4px; }
#wpr06-body .wpa-carousel__slide { scroll-snap-align: start; scroll-snap-stop: always; min-width: 0; max-width: 100%; margin: 0; }
/* max-width: a slide with aspect-ratio + min-height (Organics advantage cards) would otherwise widen past its column and overlap its neighbour. */
/* Swipe on the cards: native touch/trackpad scrolling (axis-locked by the browser), mouse drag in foundations.js. */
#wpr06-body .wpa-carousel__track { touch-action: pan-x pan-y pinch-zoom; }
#wpr06-body .wpa-carousel__track :is(img, a, svg) { -webkit-user-drag: none; -webkit-touch-callout: none; }
@media (hover: hover) and (pointer: fine) {
#wpr06-body .wpa-carousel.is-scrollable:not([data-carousel-swipe="page"]) .wpa-carousel__track { cursor: grab; }
#wpr06-body .wpa-carousel.is-scrollable:not([data-carousel-swipe="page"]) .wpa-carousel__track a { cursor: inherit; }
}
#wpr06-body .wpa-carousel:not([data-carousel-swipe="page"]):is(.is-dragging, .is-settling) .wpa-carousel__track { scroll-snap-type: none; scroll-behavior: auto; }
#wpr06-body .wpa-carousel.is-dragging:not([data-carousel-swipe="page"]) .wpa-carousel__track { cursor: grabbing; user-select: none; -webkit-user-select: none; }
#wpr06-body .wpa-carousel.is-dragging:not([data-carousel-swipe="page"]) .wpa-carousel__track * { pointer-events: none; }
#wpr06-body .wpa-carousel__controls { display: flex; align-items: center; justify-content: space-between; gap: var(--wpa-s4); margin-top: var(--wpa-s5); }
#wpr06-body .wpa-carousel__arrows { display: flex; gap: var(--wpa-s3); }
#wpr06-body .wpa-carousel__arrow {
all: unset; box-sizing: border-box; display: inline-grid; place-items: center; width: 52px; height: 52px; cursor: pointer;
border-radius: 50% !important; /* Salient's slightly_rounded button rule forces 20px !important */
border: 2px solid var(--wpa-heading, var(--wpa-forest)); color: var(--wpa-heading, var(--wpa-forest));
font: 400 22px/1 var(--wpa-font-body); transition: background-color var(--wpa-dur-fast), color var(--wpa-dur-fast), opacity var(--wpa-dur-fast);
}
#wpr06-body .wpa-carousel__arrow:hover:not(:disabled) { background: var(--wpa-heading, var(--wpa-forest)); color: var(--wpa-surface, var(--wpa-cream)); }
#wpr06-body .wpa-carousel__arrow:disabled { opacity: .3; cursor: default; }
#wpr06-body .wpa-carousel__arrow:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
#wpr06-body .wpa-carousel__tabs { display: flex; flex-wrap: wrap; gap: var(--wpa-s2); margin: 0; padding: 0; list-style: none; }
#wpr06-body .wpa-carousel__tab {
all: unset; box-sizing: border-box; cursor: pointer; padding: 8px 16px; min-height: 40px; display: inline-flex; align-items: center;
border-radius: var(--wpa-radius-pill); border: 2px solid transparent; color: var(--wpa-heading, var(--wpa-forest));
font: 700 13px/1.2 var(--wpa-font-body); letter-spacing: .06em; text-transform: uppercase;
}
#wpr06-body .wpa-carousel__tab:hover { border-color: currentColor; }
#wpr06-body .wpa-carousel__tab[aria-current="true"] { background: var(--wpa-lime); border-color: var(--wpa-lime); color: var(--wpa-forest); }
#wpr06-body .wpa-carousel__tab:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
#wpr06-body .wpa-carousel__tabs--dots .wpa-carousel__tab { width: 12px; height: 12px; min-height: 0; padding: 0; border-radius: 50%; background: color-mix(in srgb, currentColor 25%, transparent); border: 0; }
#wpr06-body .wpa-carousel__tabs--dots .wpa-carousel__tab[aria-current="true"] { background: var(--wpa-lime); width: 32px; border-radius: 6px; }
#wpr06-body .wpa-carousel__tabs--dots .wpa-carousel__tab::before { content: ''; position: absolute; inset: -16px -6px; } /* 44px hit area */
#wpr06-body .wpa-carousel__tabs--dots .wpa-carousel__tab { position: relative; }
#wpr06-body .wpa-carousel__status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) { #wpr06-body .wpa-carousel__track { scroll-behavior: smooth; } }
/* ---------- Header overlay contract (desktop + mobile interiors) ----------
A page opts in by marking its full-bleed hero with [data-header-overlay].
State classes on (set by foundations.js; :has() covers first paint):
.wpa-hdr page has an overlay hero
.wpa-hdr-over header currently sits over the hero (transparent, light ink)
.wpa-hdr-past hero has scrolled past (header solid, hide/reveal as usual)
.wpa-hdr-faded header faded out over the hero (Home: after the sky)
Home's header visuals stay owned by A/cinematic (only fade applies there). */
html.wpa-hdr-faded #header-outer:not(:focus-within) {
opacity: 0 !important; pointer-events: none !important;
transition: opacity 360ms ease, transform 240ms ease !important;
}
html.wpa-hdr #header-outer { transition: opacity 360ms ease, transform 240ms ease, background-color 240ms ease !important; }
/* Shared: overlay heroes start at the top of the viewport, under the header. */
html:has(#wpr06-body [data-header-overlay]) body.wpr02-page:not(.wpr06-home) #header-space { display: none !important; }
/* Interior desktop: fixed header; transparent over the hero, solid after. */
@media (min-width: 1000px) {
html:has(#wpr06-body [data-header-overlay]) body.wpr02-page:not(.wpr06-home) #header-outer {
position: fixed !important; inset: 0 0 auto !important; width: 100% !important; z-index: 10000 !important;
background: var(--wpa-hdr-surface, var(--wpa-cream)) !important; box-shadow: none !important;
}
html:has(#wpr06-body [data-header-overlay]) body.wpr02-page:not(.wpr06-home) #header-outer #top { background: transparent !important; box-shadow: none !important; }
/* After the hero: header-v4.js hide/reveal decides visibility. */
html.wpa-hdr-past body.wpr02-page:not(.wpr06-home) #header-outer { transform: translateY(-104%) !important; }
html.wpa-hdr-past body.wpr02-page:not(.wpr06-home) #header-outer:is(.wpr06-header-visible, :focus-within) { transform: none !important; }
html.wpa-hdr-past body.wpr02-page:not(.wpr06-home) #header-outer.wpr06-header-occluded:not(:focus-within) { transform: translateY(-104%) !important; transition: none !important; }
/* Sticky rails sit under a revealed header. */
html.wpa-hdr-past body.wpr06-header-shown #wpr06-body :is(.wpa-subnav, .sales-journey, .products-shelf, .org-journey, .colombia-journey) { top: var(--wpr06-header-height, 128px) !important; }
}
/* Over the hero but scrolled (Final QA, Oct 2): header-v4.js hides it on scroll-down and
reveals it on scroll-up, so the logo never sits on the hero's own copy (desktop and phones;
the transparent over-hero rule below would otherwise pin it with transform:none). */
html:has(#wpr06-body [data-header-overlay]).wpa-hdr-over body.wpr02-page.wpr06-header-managed:not(.wpr06-home) #header-outer:not(.wpr06-header-visible):not(:focus-within) {
transform: translateY(-105%) !important;
}
/* Over the hero (desktop): transparent, light ink, soft top gradient. */
html:has(#wpr06-body [data-header-overlay]):not(.wpa-hdr-past) body.wpr02-page:not(.wpr06-home) #header-outer {
background: transparent !important; transform: none !important;
}
html:has(#wpr06-body [data-header-overlay]):not(.wpa-hdr-past) body.wpr02-page:not(.wpr06-home) #header-outer::after {
content: ''; position: absolute; inset: 0 0 -40px; z-index: -1; pointer-events: none; background: var(--wpa-hdr-gradient);
}
html:has(#wpr06-body [data-header-overlay]):not(.wpa-hdr-past) body.wpr02-page:not(.wpr06-home):not([data-wpa-hdr-ink="dark"]) #header-outer {
--lc-ink: #fff; color: #fff !important;
}
@media (min-width: 1000px) {
html:has(#wpr06-body [data-header-overlay]):not(.wpa-hdr-past) body.wpr02-page:not(.wpr06-home):not([data-wpa-hdr-ink="dark"]) #header-outer #logo img { filter: brightness(0) invert(1); }
html:has(#wpr06-body [data-header-overlay]):not(.wpa-hdr-past) body.wpr02-page:not(.wpr06-home):not([data-wpa-hdr-ink="dark"]) #header-outer #top nav > ul > li > a { color: #fff !important; }
html:has(#wpr06-body [data-header-overlay]):not(.wpa-hdr-past) body.wpr02-page:not(.wpr06-home):not([data-wpa-hdr-ink="dark"]) #header-outer #top nav > ul > li[class*="button_bordered"] > a::before { border-color: rgba(255, 255, 255, .85) !important; }
html:has(#wpr06-body [data-header-overlay]):not(.wpa-hdr-past) body.wpr02-page:not(.wpr06-home):not([data-wpa-hdr-ink="dark"]) #header-outer :is(#search-btn, .nectar-icon, .icon-salient-search) { color: #fff !important; }
/* Dark solid sections: invert ink on the solid header too. */
html.wpa-hdr-past.wpa-hdr-dark body.wpr02-page:not(.wpr06-home) #header-outer #logo img { filter: brightness(0) invert(1); }
html.wpa-hdr-past.wpa-hdr-dark body.wpr02-page:not(.wpr06-home) #header-outer #top nav > ul > li > a { color: var(--wpa-cream) !important; }
}
/* Mobile interiors (interior-header-c1 owns the compact bar). */
@media (max-width: 999px) {
html:has(#wpr06-body [data-header-overlay]) body.wpr02-page:not(.wpr06-home) #ajax-content-wrap { padding-top: 0 !important; }
html:has(#wpr06-body [data-header-overlay]) body.wpr02-page:not(.wpr06-home) #ajax-content-wrap::before { display: none !important; }
html:has(#wpr06-body [data-header-overlay]):not(.wpa-hdr-past) body.wpr02-page:not(.wpr06-home) #header-outer,
html:has(#wpr06-body [data-header-overlay]):not(.wpa-hdr-past) body.wpr02-page:not(.wpr06-home) #header-outer #top { background: transparent !important; }
html:has(#wpr06-body [data-header-overlay]):not(.wpa-hdr-past) body.wpr02-page:not(.wpr06-home) #header-outer::before { opacity: 0 !important; }
html:has(#wpr06-body [data-header-overlay]):not(.wpa-hdr-past) body.wpr02-page:not(.wpr06-home):not([data-wpa-hdr-ink="dark"]) #header-outer #logo img { filter: brightness(0) invert(1); }
}
@media (prefers-reduced-motion: reduce) {
html.wpa-hdr #header-outer, html.wpa-hdr-faded #header-outer { transition: none !important; }
}
/* ---------- Desktop nav at laptop widths (Final QA, Oct 2) ----------
Between the hamburger breakpoint (~1180px) and 1440px the Salient nav wrapped to two lines
("WEST PAK / WORLDWIDE", a two-line "GROWER / LOGIN" pill) and pushed the search icon off
the right edge at 1280. Scale the nav type, gaps and the interior logo with the viewport. */
@media (min-width: 1000px) and (max-width: 1439px) {
body.wpr02-page #header-outer #top nav > ul.sf-menu > li > a { white-space: nowrap !important; font-size: clamp(14px, 1.25vw, 19px) !important; }
body.wpr02-page #header-outer #top nav > ul.sf-menu > li { margin-left: clamp(2px, .45vw, 10px) !important; }
body.wpr02-page #header-outer #top nav > ul.sf-menu > li[class*="button_"] > a { padding-left: clamp(12px, 1.1vw, 20px) !important; padding-right: clamp(12px, 1.1vw, 20px) !important; }
body.wpr02-page:not(.wpr06-home) #header-outer #logo img { max-width: clamp(140px, 13vw, 242px) !important; height: auto !important; }
}
/* ---------- Utilities ---------- */
#wpr06-body .wpa-container { max-width: var(--wpa-container); margin-inline: auto; padding-inline: var(--wpa-gutter); box-sizing: content-box; }
#wpr06-body .wpa-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Source: assets/r06-1b4b1f164146cb864c00/foundations/marks.css */
/* West Pak R03 headline marks (SW-01 follow-up, Corey's Oct 2 review: "header text treatment").
A hand-drawn lime swoosh under, or ellipse around, one key phrase of a long headline, after the
live westpakavocado.com treatments ("ORGANIC ADVANTAGE" ellipse, lime swoosh underline).
Spec: docs/design-system.md §2a. Loaded right after foundations.css on pages that use it.
The West Pak Organic Advantage
Organic Shoppers Drive Stronger Results
One mark per headline, on 1–3 words. Colour: --wpa-mark-color (default lime; forest on lime/yellow
bands automatically). Draw-in motion lives in foundations/motion.{css,js}. */
#wpr06-body .wpa-mark {
--_swoosh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M3 16.5C70 6 172 2.5 296 7.2c2 .1 2.2 3.4.1 3.5C182 10 92 13.6 6.4 21.6 2.3 22 .6 17.4 3 16.5Z'/%3E%3C/svg%3E");
--_circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 100' preserveAspectRatio='none'%3E%3Cpath d='M64 13C158-1 290 12 293 47c3 37-133 49-224 41C12 83 1 57 17 36 36 12 112 4 196 9' fill='none' stroke='%23000' stroke-width='3.8' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
position: relative; display: inline-block; isolation: isolate; white-space: nowrap;
}
#wpr06-body .wpa-mark::after {
content: ''; position: absolute; z-index: -1; pointer-events: none;
left: -.03em; right: -.06em; bottom: -.17em; height: .23em;
background: var(--wpa-mark-color, var(--wpa-lime));
-webkit-mask: var(--_swoosh) center / 100% 100% no-repeat; mask: var(--_swoosh) center / 100% 100% no-repeat;
}
/* Ellipse geometry is independent of the headline's line-height (line-height: 1 on the mark), and the
mark's own vertical margins open its line just enough that the loop clears the lines above/below
(it used to cut through "LET'S" on the .92 line-height Home CTA). Ink: ~.22em over the caps, ~.1em
under the baseline; >= ~.1em clear air to the neighbouring line at 390-1440. */
#wpr06-body .wpa-mark--circle { line-height: 1; margin-block: .25em .12em; }
#wpr06-body .wpa-mark--circle::after {
left: -.3em; right: -.34em; top: -.15em; bottom: -.21em; height: auto;
-webkit-mask-image: var(--_circle); mask-image: var(--_circle);
}
/* Room for the loop beside neighbouring words on wide screens; on phones the phrase usually starts
its own line, where a left margin would indent it, so the loop simply reaches into the gutter. */
#wpr06-body .wpa-mark--circle { margin-right: .3em; }
@media (min-width: 1000px) { #wpr06-body .wpa-mark--circle { margin-left: .14em; } }
/* Lime disappears on lime/yellow bands: forest on lime, cream (the bag's white) on organic yellow. */
#wpr06-body [data-tone="lime"] .wpa-mark { --wpa-mark-color: var(--wpa-forest); }
#wpr06-body [data-tone="yellow"] .wpa-mark { --wpa-mark-color: var(--wpa-cream); }
/* A mark on a narrow screen may wrap only between whole marks, never inside one. */
@media (max-width: 420px) { #wpr06-body .wpa-mark--wrap { white-space: normal; } }
/* Motion: the draw-in (swoosh wipes left to right, ellipse is drawn around the word) is played once
by foundations/motion.js + motion.css as the heading arrives (SW-05). Without JS, or with reduced
motion, the mark is simply there. */
/* Source: assets/r06-1b4b1f164146cb864c00/foundations/motion.css */
/* West Pak R03 site-wide motion (SW-05). Companion of foundations/motion.js; spec in
docs/design-system.md §3a. Loaded right after foundations.css (and marks.css) on all five pages.
Everything here is gated on html.wpa-motion (set by motion.js only when IntersectionObserver and
Web Animations exist and the visitor has not asked for reduced motion), or on a mark carrying
[data-wpa-draw], which only motion.js sets. Without JS the page renders exactly as authored. */
/* Boot: the per-page block reveals ([data-reveal], [data-rise]) are switched to their final state
in one style pass with transitions off, so the item reveals below never double up with them. */
html.wpa-motion-boot :is([data-reveal], [data-reveal] > li, [data-rise], [data-rise] .hm-mark--marker) { transition: none !important; }
/* JS disabled: the older page rules hide [data-reveal]/[data-rise] blocks until a script reveals
them (AVO360 and Home do so even without a JS class). Show them. */
@media (scripting: none) {
#wpr06-body :is([data-reveal], [data-reveal] > li, [data-rise]) { opacity: 1 !important; transform: none !important; }
}
/* ---------- Headline marks: draw once as the heading arrives ----------
Final appearance is marks.css untouched: [data-wpa-draw] is removed when the draw ends.
pre = waiting below the fold (ink hidden), go = drawing (delay from --wpa-draw-delay). */
/* Swoosh underline: a left-to-right pen stroke (clip wipe). */
#wpr06-body .wpa-mark[data-wpa-draw="pre"]::after { clip-path: inset(-20% 100% -20% 0); }
#wpr06-body .wpa-mark[data-wpa-draw="go"]::after {
animation: wpa-swoosh 680ms cubic-bezier(.55, .05, .25, 1) var(--wpa-draw-delay, 0ms) both;
}
@keyframes wpa-swoosh { from { clip-path: inset(-20% 100% -20% 0); } to { clip-path: inset(-20% 0 -20% 0); } }
/* Ellipse: drawn around the word like a pen, clockwise from the stroke's own start (top left),
by intersecting the ellipse mask with a growing conic sweep (--wpa-sweep, registered by
motion.js). Browsers without registered properties get the clip wipe above instead. */
html.wpa-sweep #wpr06-body .wpa-mark--circle:is([data-wpa-draw="pre"], [data-wpa-draw="go"])::after {
clip-path: none;
-webkit-mask-image: var(--_circle), conic-gradient(from 288deg at 50% 50%, #000 var(--wpa-sweep), transparent 0);
mask-image: var(--_circle), conic-gradient(from 288deg at 50% 50%, #000 var(--wpa-sweep), transparent 0);
-webkit-mask-size: 100% 100%; mask-size: 100% 100%;
-webkit-mask-position: center; mask-position: center;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-composite: source-in; mask-composite: intersect;
}
html.wpa-sweep #wpr06-body .wpa-mark--circle[data-wpa-draw="pre"]::after { --wpa-sweep: 0deg; }
html.wpa-sweep #wpr06-body .wpa-mark--circle[data-wpa-draw="go"]::after {
animation: wpa-sweep 760ms cubic-bezier(.5, .05, .3, 1) var(--wpa-draw-delay, 0ms) both;
}
@keyframes wpa-sweep { from { --wpa-sweep: 0deg; } to { --wpa-sweep: 360deg; } }
/* Home marker highlight (hm-mark--marker): wipes in behind the word, left to right. Replaces the
transition home-design-r03.css ties to [data-rise]; no state attribute = the static band. */
html.wpa-motion body.wpr06-home #home-experience .hm-mark--marker.hm-mark--marker { transition: none; }
html.wpa-motion body.wpr06-home #home-experience .hm-mark--marker[data-wpa-draw="pre"] { background-size: 0 100%; }
html.wpa-motion body.wpr06-home #home-experience .hm-mark--marker[data-wpa-draw="go"] {
animation: wpa-marker 620ms cubic-bezier(.6, 0, .2, 1) var(--wpa-draw-delay, 0ms) both;
}
@keyframes wpa-marker { from { background-size: 0 100%; } to { background-size: 100% 100%; } }
@media (prefers-reduced-motion: reduce) {
#wpr06-body [data-wpa-draw]::after, #wpr06-body .hm-mark--marker[data-wpa-draw] { animation: none !important; clip-path: none !important; }
#wpr06-body .hm-mark--marker[data-wpa-draw] { background-size: 100% 100% !important; }
#wpr06-body .wpa-mark--circle[data-wpa-draw]::after { -webkit-mask-image: var(--_circle) !important; mask-image: var(--_circle) !important; }
}
/* Source: assets/r06-1b4b1f164146cb864c00/cinematic/home.css */
#home-experience :where(h1,h2,h3,h4,h5,h6,p,span,em,strong,small,a,button){color:inherit;}
#home-experience :where(button,input,select,textarea){font:inherit;border-radius:0;box-shadow:none;}
#home-experience {
--forest: #2b4216;
--forest-dark: #17250d;
--lime: #b7e000;
--olive: #5a6e00;
--cream: #fffadc;
--warm-white: #f7f5eb;
--ink: #221e20;
--white: #ffffff;
--yellow: #ffd12d;
--line: rgba(255, 255, 255, 0.2);
--avo360-field: #294d27;
--display: "Antonio", "Arial Narrow", sans-serif;
--body: "Open Sans", sans-serif;
--ease: cubic-bezier(0.22, 1, 0.36, 1);
}
#home-experience * {
box-sizing: border-box;
}
#home-experience {
scroll-behavior: smooth;
background: var(--forest-dark);
}
html:has(body.wpr06-home).cinematic-scroll-sync {
scroll-behavior: auto !important;
}
#home-experience {
margin: 0;
background: var(--warm-white);
color: var(--ink);
font-family: var(--body);
font-size: 16px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}
#home-experience,
#home-experience button,
#home-experience a {
cursor: default;
}
#home-experience a,
#home-experience button {
color: inherit;
}
#home-experience a {
text-decoration: none;
cursor: pointer;
}
#home-experience button {
font: inherit;
cursor: pointer;
}
#home-experience img,
#home-experience video {
display: block;
max-width: 100%;
}
#home-experience ::selection {
background: var(--lime);
color: var(--forest-dark);
}
#home-experience :focus-visible {
outline: 3px solid var(--lime);
outline-offset: 4px;
}
#home-experience .site-shell {
min-width: 0;
overflow: clip;
}
#home-experience .site-header {
--header-glass: 0;
align-items: center;
display: grid;
gap: 24px;
grid-template-columns: 190px 1fr auto;
height: 112px;
isolation: isolate;
left: 0;
padding: 0 5vw;
position: fixed;
right: 0;
top: 0;
transition: height 780ms cubic-bezier(.22, 1, .36, 1);
z-index: 70;
}
#home-experience .site-header::before {
-webkit-backdrop-filter: blur(14px) saturate(118%);
backdrop-filter: blur(14px) saturate(118%);
background: linear-gradient(
180deg,
rgba(28, 46, 16, .8),
rgba(17, 31, 9, .72)
);
border-bottom: 1px solid rgba(222, 245, 173, .1);
box-shadow:
0 18px 48px rgba(2, 8, 2, .17),
inset 0 -1px rgba(255, 255, 255, .035);
content: "";
inset: 0;
opacity: var(--header-glass);
pointer-events: none;
position: absolute;
will-change: opacity;
z-index: -1;
}
#home-experience .site-header--scrolled {
height: 80px;
}
#home-experience .brand {
display: block;
width: 160px;
}
#home-experience .brand img {
width: 100%;
}
#home-experience .desktop-nav {
align-items: center;
display: flex;
gap: clamp(18px, 2.1vw, 38px);
justify-content: center;
}
#home-experience .desktop-nav a {
color: var(--white);
font-family: var(--display);
font-size: 15px;
letter-spacing: 0.08em;
position: relative;
text-transform: uppercase;
}
#home-experience .desktop-nav a::after {
background: var(--lime);
bottom: -8px;
content: "";
height: 2px;
left: 0;
position: absolute;
transform: scaleX(0);
transform-origin: right;
transition: transform 350ms var(--ease);
width: 100%;
}
#home-experience .desktop-nav a:hover::after {
transform: scaleX(1);
transform-origin: left;
}
#home-experience .header-cta {
align-items: center;
background: var(--lime);
border-radius: 999px;
color: var(--forest-dark);
display: inline-flex;
font-size: 12px;
font-weight: 800;
gap: 18px;
letter-spacing: 0.08em;
padding: 14px 20px;
text-transform: uppercase;
transition: transform 350ms var(--ease), box-shadow 350ms var(--ease);
}
#home-experience .header-cta:hover {
box-shadow: 0 14px 35px rgba(0, 0, 0, 0.24);
transform: translateY(-3px);
}
#home-experience .menu-button,
#home-experience .mobile-menu {
display: none;
}
#home-experience .section {
min-height: 100vh;
padding: clamp(112px, 12vw, 190px) max(7vw, 64px);
position: relative;
}
#home-experience .section--forest {
background: var(--forest-dark);
color: var(--white);
}
#home-experience .section--cream {
background: var(--cream);
}
#home-experience .section--ink {
background: var(--ink);
color: var(--white);
}
#home-experience .section--white {
background: var(--warm-white);
}
#home-experience .section-number {
color: currentColor;
font-family: var(--display);
font-size: 14px;
left: max(7vw, 64px);
letter-spacing: 0.16em;
opacity: 0.45;
position: absolute;
top: 52px;
}
#home-experience .eyebrow {
align-items: center;
color: var(--lime);
display: flex;
font-family: var(--display);
font-size: 14px;
gap: 14px;
letter-spacing: 0.16em;
margin: 0 0 24px;
text-transform: uppercase;
}
#home-experience .eyebrow::before {
background: currentColor;
content: "";
height: 2px;
width: 32px;
}
#home-experience .eyebrow--green {
color: var(--forest);
}
#home-experience [data-reveal] {
opacity: 0;
transform: translateY(40px);
transition: opacity 800ms ease, transform 900ms var(--ease);
}
#home-experience [data-reveal][data-visible="true"] {
opacity: 1;
transform: translateY(0);
}
#home-experience .hero {
background: var(--forest-dark);
color: var(--white);
display: flex;
min-height: 100svh;
overflow: hidden;
position: relative;
}
#home-experience .hero__video,
#home-experience .hero__veil,
#home-experience .hero__grain {
inset: 0;
height: 100%;
position: absolute;
width: 100%;
}
#home-experience .hero__video {
object-fit: cover;
transform: scale(1.02);
}
#home-experience .hero__veil {
background:
linear-gradient(90deg, rgba(13, 24, 8, 0.93) 0%, rgba(13, 24, 8, 0.66) 42%, rgba(13, 24, 8, 0.17) 72%),
linear-gradient(0deg, rgba(13, 24, 8, 0.58) 0%, transparent 52%);
}
#home-experience .hero__grain {
background-image: url("../media/avocado-pattern.jpg");
background-size: 580px;
mix-blend-mode: soft-light;
opacity: 0.07;
}
#home-experience .hero__content {
align-self: flex-end;
max-width: 1080px;
padding: 200px 6vw 9vh 9vw;
position: relative;
z-index: 4;
}
#home-experience .hero__eyebrow {
animation: heroReveal 900ms 250ms var(--ease) both;
}
#home-experience .hero h1 {
font-family: var(--display);
font-size: clamp(84px, 10.6vw, 180px);
font-weight: 400;
letter-spacing: -0.045em;
line-height: 0.79;
margin: 0;
text-transform: uppercase;
}
#home-experience .hero h1 span {
color: var(--lime);
display: block;
}
#home-experience .hero h1,
#home-experience .hero__copy,
#home-experience .hero .button-row {
animation: heroReveal 1000ms var(--ease) both;
}
#home-experience .hero h1 {
animation-delay: 400ms;
}
#home-experience .hero__copy {
animation-delay: 580ms;
font-size: clamp(16px, 1.25vw, 20px);
line-height: 1.7;
margin: 42px 0 32px;
max-width: 700px;
}
#home-experience .hero .button-row {
animation-delay: 720ms;
}
@keyframes heroReveal {
from { opacity: 0; transform: translateY(34px); }
to { opacity: 1; transform: translateY(0); }
}
#home-experience .button-row {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 12px;
}
#home-experience .button {
align-items: center;
border: 1px solid transparent;
border-radius: 999px;
display: inline-flex;
font-size: 12px;
font-weight: 800;
gap: 26px;
justify-content: center;
letter-spacing: 0.09em;
min-height: 54px;
padding: 0 24px;
text-transform: uppercase;
transition: transform 350ms var(--ease), box-shadow 350ms var(--ease), background 350ms var(--ease);
}
#home-experience .button:hover {
box-shadow: 0 18px 38px rgba(0, 0, 0, 0.18);
transform: translateY(-3px);
}
#home-experience .button--lime {
background: var(--lime);
color: var(--forest-dark);
}
#home-experience .button--glass {
background: rgba(255, 255, 255, 0.07);
border-color: rgba(255, 255, 255, 0.55);
color: var(--white);
backdrop-filter: blur(8px);
}
#home-experience .button--forest {
background: var(--forest);
color: var(--white);
}
#home-experience .hero__stamp {
bottom: -170px;
height: 620px;
opacity: 0.95;
pointer-events: none;
position: absolute;
right: -30px;
transform: rotate(-13deg);
width: 400px;
z-index: 3;
}
#home-experience .hero__stamp img {
height: 100%;
object-fit: contain;
width: 100%;
}
#home-experience .hero__index {
align-items: center;
bottom: 48px;
display: flex;
font-family: var(--display);
font-size: 13px;
gap: 12px;
letter-spacing: 0.12em;
position: absolute;
right: 5vw;
z-index: 5;
}
#home-experience .hero__index i {
background: rgba(255, 255, 255, 0.45);
display: block;
height: 1px;
width: 70px;
}
#home-experience .signal-band {
background: var(--lime);
color: var(--forest-dark);
overflow: hidden;
padding: 15px 0 13px;
}
#home-experience .signal-band__track {
align-items: center;
animation: marquee 26s linear infinite;
display: flex;
font-family: var(--display);
font-size: 17px;
gap: 30px;
letter-spacing: 0.1em;
text-transform: uppercase;
white-space: nowrap;
width: max-content;
}
#home-experience .signal-band__track i {
background: var(--forest-dark);
border-radius: 50%;
height: 6px;
width: 6px;
}
@keyframes marquee {
to { transform: translateX(-40%); }
}
#home-experience .avo360 {
display: grid;
gap: 9vw;
grid-template-columns: minmax(300px, 0.68fr) 1.32fr;
}
#home-experience .section-heading {
align-self: center;
max-width: 550px;
}
#home-experience .section-heading h2,
#home-experience .sourcing h2,
#home-experience .organics h2,
#home-experience .products h2,
#home-experience .ripening-section h2,
#home-experience .resources h2,
#home-experience .explore h2,
#home-experience .final-cta h2,
#home-experience .colombia-feature h2 {
font-family: var(--display);
font-size: clamp(62px, 7.2vw, 116px);
font-weight: 400;
letter-spacing: -0.035em;
line-height: 0.86;
margin: 0;
text-transform: uppercase;
}
#home-experience .section-heading > p:not(.eyebrow) {
color: rgba(255, 255, 255, 0.72);
font-size: 17px;
line-height: 1.8;
margin: 42px 0;
max-width: 510px;
}
#home-experience .text-link {
align-items: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.35);
display: inline-flex;
font-family: var(--display);
font-size: 17px;
gap: 36px;
letter-spacing: 0.08em;
padding: 0 0 8px;
text-transform: uppercase;
transition: border-color 300ms ease, color 300ms ease;
}
#home-experience .text-link:hover {
border-color: var(--lime);
color: var(--lime);
}
#home-experience .text-link--dark {
border-color: rgba(34, 30, 32, 0.35);
}
#home-experience .avo360__experience {
align-self: center;
min-width: 0;
}
#home-experience .avo360__visual {
aspect-ratio: 1.08 / 1;
border-radius: 40px 40px 160px 40px;
overflow: hidden;
position: relative;
}
#home-experience .avo360__visual > img {
height: 100%;
inset: 0;
object-fit: cover;
opacity: 0;
position: absolute;
transform: scale(1.08);
transition: opacity 700ms ease, transform 1200ms var(--ease);
width: 100%;
}
#home-experience .avo360__visual > img.is-active {
opacity: 1;
transform: scale(1);
}
#home-experience .avo360__visual-overlay {
background: linear-gradient(0deg, rgba(13, 24, 8, 0.76), rgba(13, 24, 8, 0.02) 70%);
inset: 0;
position: absolute;
}
#home-experience .avo360__word {
bottom: 34px;
color: var(--white);
font-family: var(--display);
font-size: clamp(56px, 7vw, 108px);
left: 38px;
letter-spacing: -0.03em;
line-height: 0.9;
position: absolute;
text-transform: uppercase;
z-index: 3;
}
#home-experience .orbit {
border: 1px solid rgba(183, 224, 0, 0.8);
border-radius: 50%;
position: absolute;
}
#home-experience .orbit--one {
height: 260px;
right: -50px;
top: -40px;
width: 260px;
}
#home-experience .orbit--two {
height: 170px;
right: -4px;
top: 4px;
width: 170px;
}
#home-experience .capability-list {
border-top: 1px solid var(--line);
margin-top: 28px;
}
#home-experience .capability-list button {
align-items: center;
background: transparent;
border: 0;
border-bottom: 1px solid var(--line);
color: rgba(255, 255, 255, 0.45);
display: grid;
font-family: var(--display);
font-size: clamp(22px, 2vw, 34px);
gap: 18px;
grid-template-columns: 38px 1fr auto;
letter-spacing: 0.02em;
padding: 18px 0;
text-align: left;
text-transform: uppercase;
transition: color 280ms ease, padding 350ms var(--ease);
width: 100%;
}
#home-experience .capability-list button span,
#home-experience .capability-list button i {
font-family: var(--body);
font-size: 10px;
font-style: normal;
letter-spacing: 0.1em;
}
#home-experience .capability-list button.is-active,
#home-experience .capability-list button:hover {
color: var(--lime);
padding-left: 12px;
}
#home-experience .sourcing {
color: var(--forest-dark);
}
#home-experience .sourcing__intro {
align-items: end;
display: grid;
gap: 8vw;
grid-template-columns: 1fr 0.7fr;
margin-bottom: 72px;
}
#home-experience .sourcing__intro > p {
font-size: 18px;
line-height: 1.8;
margin: 0 0 8px;
max-width: 580px;
}
#home-experience .atlas {
background: var(--forest-dark);
border-radius: 32px;
box-shadow: 0 36px 80px rgba(23, 37, 13, 0.16);
color: var(--white);
display: grid;
grid-template-columns: 1fr 250px;
margin-bottom: 34px;
min-height: 680px;
overflow: hidden;
}
#home-experience .atlas__map {
background:
radial-gradient(circle at 30% 40%, rgba(183, 224, 0, 0.15), transparent 28%),
radial-gradient(circle at 58% 72%, rgba(183, 224, 0, 0.08), transparent 32%),
#1d3011;
overflow: hidden;
position: relative;
}
#home-experience .atlas__grid {
background-image:
linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
background-size: 72px 72px;
inset: 0;
opacity: 0.48;
position: absolute;
transform: perspective(600px) rotateX(10deg) scale(1.1);
}
#home-experience .atlas__route {
border: 1px solid rgba(183, 224, 0, 0.42);
border-radius: 48% 52% 57% 43%;
height: 78%;
left: 12%;
position: absolute;
top: 10%;
transform: rotate(-15deg);
width: 43%;
}
#home-experience .atlas__route::after,
#home-experience .atlas__route::before {
border: 1px solid rgba(183, 224, 0, 0.18);
border-radius: 50%;
content: "";
inset: 9%;
position: absolute;
}
#home-experience .atlas__route::after {
inset: 19%;
}
#home-experience .map-pin {
align-items: center;
background: transparent;
border: 0;
color: var(--white);
display: flex;
gap: 10px;
position: absolute;
transform: translate(-50%, -50%);
z-index: 5;
}
#home-experience .map-pin span {
background: var(--lime);
border: 5px solid rgba(23, 37, 13, 0.8);
border-radius: 50%;
box-shadow: 0 0 0 1px var(--lime);
display: block;
height: 18px;
transition: box-shadow 300ms ease, transform 300ms var(--ease);
width: 18px;
}
#home-experience .map-pin b {
font-family: var(--display);
font-size: 13px;
font-weight: 400;
letter-spacing: 0.08em;
text-transform: uppercase;
}
#home-experience .map-pin.is-active span,
#home-experience .map-pin:hover span {
box-shadow: 0 0 0 8px rgba(183, 224, 0, 0.2);
transform: scale(1.18);
}
#home-experience .atlas__coordinates {
bottom: 28px;
color: rgba(255, 255, 255, 0.4);
font-family: var(--display);
font-size: 14px;
left: 30px;
letter-spacing: 0.2em;
position: absolute;
}
#home-experience .atlas__region-image {
aspect-ratio: 0.82 / 1;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 110px 110px 16px 16px;
bottom: 34px;
overflow: hidden;
position: absolute;
right: 34px;
width: min(30%, 300px);
}
#home-experience .atlas__region-image img {
height: 100%;
object-fit: cover;
transition: opacity 300ms ease;
width: 100%;
}
#home-experience .atlas__region-image span {
background: var(--lime);
bottom: 12px;
color: var(--forest-dark);
font-family: var(--display);
font-size: 18px;
left: 12px;
letter-spacing: 0.08em;
padding: 8px 12px;
position: absolute;
text-transform: uppercase;
}
#home-experience .atlas__metrics {
border-left: 1px solid rgba(255, 255, 255, 0.13);
display: grid;
grid-template-rows: repeat(4, 1fr);
}
#home-experience .atlas__metrics div {
display: flex;
flex-direction: column;
justify-content: center;
padding: 28px;
}
#home-experience .atlas__metrics div + div {
border-top: 1px solid rgba(255, 255, 255, 0.13);
}
#home-experience .atlas__metrics strong {
color: var(--lime);
font-family: var(--display);
font-size: 52px;
font-weight: 400;
letter-spacing: -0.03em;
line-height: 1;
}
#home-experience .atlas__metrics span {
color: rgba(255, 255, 255, 0.65);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
margin-top: 10px;
text-transform: uppercase;
}
#home-experience .colombia-feature {
background: var(--olive);
color: var(--white);
display: grid;
grid-template-columns: 1.03fr 0.97fr;
min-height: 940px;
overflow: hidden;
position: relative;
}
#home-experience .colombia-feature__photo {
min-height: 780px;
overflow: hidden;
position: relative;
}
#home-experience .colombia-feature__photo::after {
background: linear-gradient(90deg, transparent 62%, var(--olive));
content: "";
inset: 0;
position: absolute;
}
#home-experience .colombia-feature__photo img {
height: 100%;
object-fit: cover;
width: 100%;
}
#home-experience .colombia-feature__tag {
background: var(--lime);
bottom: 7vw;
color: var(--forest-dark);
font-family: var(--display);
font-size: 16px;
left: 5vw;
letter-spacing: 0.1em;
padding: 12px 18px;
position: absolute;
text-transform: uppercase;
z-index: 2;
}
#home-experience .colombia-feature__content {
align-self: center;
max-width: 680px;
padding: 120px 8vw 120px 5vw;
position: relative;
z-index: 3;
}
#home-experience .colombia-feature__content h2 {
font-size: clamp(58px, 6.4vw, 104px);
}
#home-experience .colombia-feature__content h3 {
font-family: var(--display);
font-size: clamp(25px, 2.2vw, 38px);
font-weight: 400;
line-height: 1.16;
margin: 36px 0 24px;
text-transform: uppercase;
}
#home-experience .colombia-feature__content > p:not(.eyebrow) {
color: rgba(255, 255, 255, 0.78);
font-size: 15px;
line-height: 1.85;
}
#home-experience .colombia-feature__content .text-link {
margin-top: 22px;
}
#home-experience .colombia-feature__cutout {
bottom: -80px;
filter: drop-shadow(0 28px 42px rgba(0, 0, 0, 0.3));
left: 40%;
max-height: 520px;
object-fit: contain;
pointer-events: none;
position: absolute;
transform: rotate(-6deg);
z-index: 4;
}
#home-experience .organics {
background: var(--yellow);
min-height: 980px;
overflow: hidden;
position: relative;
}
#home-experience .organics__image {
background: url("../media/organic-hero.jpg") center / cover no-repeat;
bottom: 0;
clip-path: ellipse(55% 76% at 50% 55%);
left: 45%;
position: absolute;
right: -10%;
top: 0;
}
#home-experience .organics__image::after {
background: linear-gradient(90deg, var(--yellow) 0%, transparent 48%);
content: "";
inset: 0;
position: absolute;
}
#home-experience .organics__sun {
border: 1px solid rgba(43, 66, 22, 0.28);
border-radius: 50%;
height: 760px;
left: -310px;
position: absolute;
top: 100px;
width: 760px;
}
#home-experience .organics__sun::after,
#home-experience .organics__sun::before {
border: 1px solid rgba(43, 66, 22, 0.2);
border-radius: 50%;
content: "";
inset: 52px;
position: absolute;
}
#home-experience .organics__sun::after {
inset: 118px;
}
#home-experience .organics__content {
max-width: 690px;
padding: 190px 6vw 120px 8vw;
position: relative;
z-index: 3;
}
#home-experience .organics h2 {
color: var(--forest-dark);
font-size: clamp(76px, 8.5vw, 144px);
}
#home-experience .organics__content > p:not(.eyebrow) {
color: rgba(23, 37, 13, 0.82);
font-size: 18px;
line-height: 1.8;
margin: 42px 0;
max-width: 560px;
}
#home-experience .organics__bags {
bottom: -70px;
filter: drop-shadow(0 40px 40px rgba(46, 42, 3, 0.24));
max-height: 570px;
object-fit: contain;
position: absolute;
right: 1vw;
width: 44vw;
z-index: 4;
}
#home-experience .products {
padding-bottom: 100px;
}
#home-experience .products__top {
align-items: end;
display: grid;
gap: 8vw;
grid-template-columns: 1fr 0.65fr;
margin-bottom: 80px;
}
#home-experience .products__top > p {
color: rgba(255, 255, 255, 0.68);
font-size: 17px;
line-height: 1.8;
margin: 0 0 10px;
max-width: 540px;
}
#home-experience .product-stage {
background: color-mix(in srgb, var(--product-color) 12%, var(--forest-dark));
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 36px;
display: grid;
gap: 34px;
grid-template-columns: 0.95fr 1.05fr 280px;
min-height: 690px;
overflow: hidden;
padding: 66px 48px 48px;
position: relative;
transition: background 500ms var(--ease);
}
#home-experience .product-stage::before {
background: var(--product-color);
content: "";
height: 5px;
left: 0;
position: absolute;
top: 0;
transition: background 500ms ease;
width: 100%;
}
#home-experience .product-stage__numbers {
align-items: center;
display: flex;
font-family: var(--display);
font-size: 12px;
gap: 12px;
left: 34px;
letter-spacing: 0.12em;
position: absolute;
top: 26px;
}
#home-experience .product-stage__numbers i {
background: rgba(255, 255, 255, 0.35);
height: 1px;
width: 48px;
}
#home-experience .product-stage__copy {
align-self: center;
padding-left: 18px;
position: relative;
z-index: 4;
}
#home-experience .product-stage__copy h3 {
font-family: var(--display);
font-size: clamp(54px, 5vw, 82px);
font-weight: 400;
letter-spacing: -0.035em;
line-height: 0.94;
margin: 0;
max-width: 600px;
text-transform: uppercase;
}
#home-experience .product-stage__copy > p:not(.eyebrow) {
color: rgba(255, 255, 255, 0.7);
font-size: 16px;
line-height: 1.75;
margin: 34px 0;
max-width: 480px;
}
#home-experience .product-stage__visual {
align-items: center;
display: flex;
justify-content: center;
min-height: 560px;
position: relative;
}
#home-experience .product-stage__visual > img:not(.product-stage__avocado) {
animation: productIn 650ms var(--ease) both;
filter: drop-shadow(0 38px 38px rgba(0, 0, 0, 0.38));
max-height: 540px;
object-fit: contain;
position: relative;
width: 88%;
z-index: 3;
}
@keyframes productIn {
from { opacity: 0; transform: translateY(28px) rotate(3deg); }
to { opacity: 1; transform: translateY(0) rotate(0); }
}
#home-experience .product-stage__halo {
background: var(--product-color);
border-radius: 50%;
filter: blur(1px);
height: 390px;
opacity: 0.84;
position: absolute;
transition: background 500ms ease;
width: 390px;
}
#home-experience .product-stage__halo::after {
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 50%;
content: "";
inset: -30px;
position: absolute;
}
#home-experience .product-stage__avocado {
bottom: -100px;
height: 330px;
object-fit: contain;
position: absolute;
right: -100px;
transform: rotate(-18deg);
z-index: 2;
}
#home-experience .product-picker {
border-left: 1px solid rgba(255, 255, 255, 0.16);
display: flex;
flex-direction: column;
justify-content: center;
padding-left: 34px;
}
#home-experience .product-picker button {
background: transparent;
border: 0;
color: rgba(255, 255, 255, 0.38);
display: grid;
font-family: var(--display);
font-size: 18px;
gap: 11px;
grid-template-columns: 28px 1fr;
letter-spacing: 0.03em;
padding: 15px 0;
text-align: left;
text-transform: uppercase;
transition: color 300ms ease, transform 350ms var(--ease);
}
#home-experience .product-picker button span {
font-family: var(--body);
font-size: 9px;
padding-top: 5px;
}
#home-experience .product-picker button.is-active,
#home-experience .product-picker button:hover {
color: var(--product-color);
transform: translateX(8px);
}
#home-experience .ripening-section {
background: var(--warm-white);
display: grid;
grid-template-columns: 0.9fr 1.1fr;
min-height: 960px;
}
#home-experience .ripening-section__photo {
min-height: 780px;
overflow: hidden;
position: relative;
}
#home-experience .ripening-section__photo > img {
filter: saturate(0.8) contrast(1.08);
height: 100%;
object-fit: cover;
width: 100%;
}
#home-experience .scan-lines {
background-image: linear-gradient(rgba(183, 224, 0, 0.42) 1px, transparent 1px);
background-size: 100% 42px;
inset: 0;
mix-blend-mode: screen;
opacity: 0.45;
position: absolute;
}
#home-experience .scan-lines::after {
animation: scan 5s ease-in-out infinite;
background: var(--lime);
box-shadow: 0 0 34px var(--lime);
content: "";
height: 2px;
left: 0;
position: absolute;
right: 0;
top: 20%;
}
@keyframes scan {
50% { top: 78%; }
}
#home-experience .ripening-section__readout {
background: var(--forest-dark);
bottom: 34px;
color: var(--lime);
font-family: var(--display);
font-size: 18px;
left: 34px;
letter-spacing: 0.14em;
padding: 12px 16px;
position: absolute;
}
#home-experience .ripening-section__content {
align-self: center;
max-width: 780px;
padding: 120px 8vw 120px 7vw;
}
#home-experience .ripening-section h2 {
color: var(--forest-dark);
font-size: clamp(62px, 6.3vw, 104px);
}
#home-experience .ripening-section__content > p:not(.eyebrow) {
font-size: 17px;
line-height: 1.8;
margin: 38px 0;
max-width: 610px;
}
#home-experience .program-selector {
border-bottom: 1px solid rgba(43, 66, 22, 0.18);
border-top: 1px solid rgba(43, 66, 22, 0.18);
display: grid;
grid-template-columns: repeat(3, 1fr);
}
#home-experience .program-selector button {
background: transparent;
border: 0;
color: rgba(43, 66, 22, 0.42);
font-family: var(--display);
font-size: 16px;
letter-spacing: 0.05em;
padding: 20px 10px;
position: relative;
text-transform: uppercase;
}
#home-experience .program-selector button + button {
border-left: 1px solid rgba(43, 66, 22, 0.18);
}
#home-experience .program-selector button span {
display: block;
font-family: var(--body);
font-size: 9px;
margin-bottom: 4px;
}
#home-experience .program-selector button::after {
background: var(--lime);
bottom: -1px;
content: "";
height: 4px;
left: 10px;
position: absolute;
right: 10px;
transform: scaleX(0);
transition: transform 300ms var(--ease);
}
#home-experience .program-selector button.is-active {
color: var(--forest);
}
#home-experience .program-selector button.is-active::after {
transform: scaleX(1);
}
#home-experience .program-detail {
background: var(--cream);
border-left: 4px solid var(--lime);
margin: 28px 0 34px;
min-height: 150px;
padding: 26px 30px;
}
#home-experience .program-detail h3 {
color: var(--forest);
font-family: var(--display);
font-size: 28px;
font-weight: 400;
margin: 0 0 8px;
text-transform: uppercase;
}
#home-experience .program-detail p {
line-height: 1.7;
margin: 0;
}
#home-experience .resources__heading,
#home-experience .explore__heading {
margin-bottom: 72px;
}
#home-experience .resource-grid {
display: grid;
gap: 18px;
grid-template-columns: 1.15fr 0.85fr 0.85fr;
}
#home-experience .resource-card {
border-radius: 26px;
color: var(--white);
min-height: 570px;
overflow: hidden;
position: relative;
}
#home-experience .resource-card img,
#home-experience .explore-card img {
height: 100%;
inset: 0;
object-fit: cover;
position: absolute;
transition: transform 800ms var(--ease);
width: 100%;
}
#home-experience .resource-card:hover img,
#home-experience .explore-card:hover img {
transform: scale(1.06);
}
#home-experience .resource-card__veil,
#home-experience .explore-card__veil {
background: linear-gradient(0deg, rgba(10, 20, 5, 0.86), transparent 72%);
inset: 0;
position: absolute;
}
#home-experience .resource-card__number,
#home-experience .explore-card__number {
font-family: var(--display);
font-size: 13px;
left: 28px;
letter-spacing: 0.12em;
position: absolute;
top: 26px;
}
#home-experience .resource-card h3,
#home-experience .explore-card h3 {
bottom: 26px;
font-family: var(--display);
font-size: clamp(38px, 3.8vw, 66px);
font-weight: 400;
left: 28px;
line-height: 0.95;
margin: 0;
position: absolute;
text-transform: uppercase;
}
#home-experience .resource-card__arrow,
#home-experience .explore-card__arrow {
align-items: center;
background: var(--lime);
border-radius: 50%;
bottom: 24px;
color: var(--forest-dark);
display: flex;
height: 48px;
justify-content: center;
position: absolute;
right: 24px;
transition: transform 350ms var(--ease);
width: 48px;
}
#home-experience .resource-card:hover .resource-card__arrow,
#home-experience .explore-card:hover .explore-card__arrow {
transform: rotate(45deg);
}
#home-experience .explore-grid {
display: grid;
gap: 18px;
grid-template-columns: repeat(3, 1fr);
}
#home-experience .explore-card {
border-radius: 160px 160px 24px 24px;
color: var(--white);
min-height: 590px;
overflow: hidden;
position: relative;
}
#home-experience .final-cta {
align-items: center;
color: var(--white);
display: flex;
min-height: 920px;
overflow: hidden;
padding: 130px max(8vw, 80px);
position: relative;
}
#home-experience .final-cta__background {
background:
linear-gradient(90deg, rgba(13, 24, 8, 0.96), rgba(13, 24, 8, 0.55) 58%, rgba(13, 24, 8, 0.15)),
url("../media/contact-background.jpg") center / cover no-repeat;
inset: 0;
position: absolute;
}
#home-experience .final-cta__content {
max-width: 920px;
position: relative;
z-index: 3;
}
#home-experience .final-cta h2 {
font-size: clamp(78px, 9vw, 148px);
}
#home-experience .final-cta h2 span {
color: var(--lime);
}
#home-experience .final-cta__content > p:not(.eyebrow) {
color: rgba(255, 255, 255, 0.76);
font-size: 18px;
line-height: 1.8;
margin: 42px 0;
max-width: 650px;
}
#home-experience .final-cta__avocado {
bottom: -180px;
filter: drop-shadow(0 35px 30px rgba(0, 0, 0, 0.38));
height: 760px;
object-fit: contain;
pointer-events: none;
position: absolute;
right: 1vw;
transform: rotate(-12deg);
z-index: 2;
}
#home-experience .site-footer {
align-items: center;
background: var(--forest-dark);
color: var(--white);
display: grid;
gap: 40px;
grid-template-columns: 220px 1fr auto;
min-height: 190px;
padding: 50px max(6vw, 60px);
}
#home-experience .site-footer > img {
width: 190px;
}
#home-experience .site-footer nav {
display: flex;
gap: 28px;
justify-content: center;
}
#home-experience .site-footer nav a {
color: rgba(255, 255, 255, 0.66);
font-family: var(--display);
font-size: 14px;
letter-spacing: 0.08em;
text-transform: uppercase;
transition: color 250ms ease;
}
#home-experience .site-footer nav a:hover {
color: var(--lime);
}
#home-experience .footer-top {
align-items: center;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
display: flex;
height: 52px;
justify-content: center;
transition: background 250ms ease, color 250ms ease;
width: 52px;
}
#home-experience .footer-top:hover {
background: var(--lime);
color: var(--forest-dark);
}
@media (max-width: 1180px) {
#home-experience .site-header {
grid-template-columns: 155px 1fr auto;
padding: 0 4vw;
}
#home-experience .brand { width: 145px; }
#home-experience .desktop-nav { gap: 18px; }
#home-experience .desktop-nav a { font-size: 13px; }
#home-experience .section { padding-left: 6vw; padding-right: 6vw; }
#home-experience .section-number { left: 6vw; }
#home-experience .avo360 { gap: 6vw; }
#home-experience .product-stage { grid-template-columns: 0.9fr 1.1fr 220px; padding-left: 34px; padding-right: 30px; }
#home-experience .product-picker { padding-left: 24px; }
#home-experience .product-picker button { font-size: 15px; }
}
@media (max-width: 920px) {
#home-experience .site-header { grid-template-columns: 1fr auto; height: 84px; padding: 0 24px; }
#home-experience .site-header--scrolled { height: 70px; }
#home-experience .desktop-nav,
#home-experience .header-cta { display: none; }
#home-experience .menu-button {
align-items: center;
background: var(--lime);
border: 0;
border-radius: 50%;
display: flex;
flex-direction: column;
gap: 5px;
height: 46px;
justify-content: center;
position: relative;
width: 46px;
z-index: 3;
}
#home-experience .menu-button span { background: var(--forest-dark); display: block; height: 2px; width: 18px; }
#home-experience .mobile-menu {
background: var(--forest-dark);
display: flex;
flex-direction: column;
gap: 10px;
inset: 0;
justify-content: center;
opacity: 0;
padding: 100px 32px 40px;
pointer-events: none;
position: fixed;
transform: translateY(-12px);
transition: opacity 350ms ease, transform 450ms var(--ease);
}
#home-experience .mobile-menu--open { opacity: 1; pointer-events: auto; transform: translateY(0); }
#home-experience .mobile-menu a { border-bottom: 1px solid rgba(255,255,255,.16); color: var(--white); font-family: var(--display); font-size: 42px; line-height: 1; padding: 12px 0; text-transform: uppercase; }
#home-experience .hero__content { padding: 170px 28px 86px; }
#home-experience .hero h1 { font-size: clamp(70px, 16vw, 118px); }
#home-experience .hero__copy { max-width: 560px; }
#home-experience .hero__stamp { bottom: -240px; opacity: 0.58; right: -120px; }
#home-experience .hero__index { display: none; }
#home-experience .section { min-height: auto; padding: 120px 28px 100px; }
#home-experience .section-number { left: 28px; top: 30px; }
#home-experience .avo360,
#home-experience .sourcing__intro,
#home-experience .products__top,
#home-experience .ripening-section,
#home-experience .colombia-feature { grid-template-columns: 1fr; }
#home-experience .avo360 { gap: 64px; }
#home-experience .section-heading { max-width: 680px; }
#home-experience .avo360__visual { aspect-ratio: 1.25 / 1; }
#home-experience .sourcing__intro { align-items: start; gap: 38px; }
#home-experience .atlas { grid-template-columns: 1fr; }
#home-experience .atlas__map { min-height: 620px; }
#home-experience .atlas__metrics { border-left: 0; border-top: 1px solid rgba(255,255,255,.13); grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); }
#home-experience .atlas__metrics div + div { border-top: 0; }
#home-experience .atlas__metrics div:nth-child(even) { border-left: 1px solid rgba(255,255,255,.13); }
#home-experience .atlas__metrics div:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.13); }
#home-experience .colombia-feature__photo { min-height: 600px; }
#home-experience .colombia-feature__photo::after { background: linear-gradient(0deg, var(--olive), transparent 55%); }
#home-experience .colombia-feature__content { max-width: none; padding: 40px 28px 120px; }
#home-experience .colombia-feature__cutout { bottom: -120px; left: auto; max-height: 430px; right: -100px; }
#home-experience .organics { min-height: 1080px; }
#home-experience .organics__content { padding: 120px 28px; }
#home-experience .organics__image { clip-path: ellipse(80% 50% at 58% 52%); left: 0; top: 42%; }
#home-experience .organics__image::after { background: linear-gradient(0deg, transparent 60%, var(--yellow)); }
#home-experience .organics__bags { bottom: -40px; right: -10vw; width: 78vw; }
#home-experience .product-stage { grid-template-columns: 1fr 1fr; }
#home-experience .product-picker { border-left: 0; border-top: 1px solid rgba(255,255,255,.16); flex-direction: row; grid-column: 1 / -1; overflow-x: auto; padding: 20px 0 0; }
#home-experience .product-picker button { flex: 0 0 170px; }
#home-experience .ripening-section__photo { min-height: 680px; }
#home-experience .ripening-section__content { max-width: none; padding: 100px 28px; }
#home-experience .resource-grid { grid-template-columns: 1fr 1fr; }
#home-experience .resource-card:first-child { grid-column: 1 / -1; }
#home-experience .resource-card { min-height: 480px; }
#home-experience .explore-grid { grid-template-columns: 1fr; }
#home-experience .explore-card { border-radius: 24px 140px 24px 24px; min-height: 420px; }
#home-experience .final-cta { min-height: 840px; padding: 110px 28px; }
#home-experience .final-cta__avocado { bottom: -250px; opacity: .74; right: -150px; }
#home-experience .site-footer { grid-template-columns: 1fr auto; padding: 54px 28px; }
#home-experience .site-footer nav { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; flex-wrap: wrap; }
}
@media (max-width: 620px) {
#home-experience .brand { width: 132px; }
#home-experience .hero { min-height: 940px; }
#home-experience .hero__veil { background: linear-gradient(0deg, rgba(13,24,8,.94) 0%, rgba(13,24,8,.55) 70%, rgba(13,24,8,.38)); }
#home-experience .hero__content { align-self: flex-end; padding: 140px 22px 82px; }
#home-experience .hero h1 { font-size: 72px; line-height: .84; }
#home-experience .hero__copy { font-size: 15px; line-height: 1.7; margin: 30px 0; }
#home-experience .button { gap: 16px; padding: 0 20px; }
#home-experience .hero__stamp { display: none; }
#home-experience .signal-band__track { font-size: 14px; }
#home-experience .section { padding: 100px 22px 80px; }
#home-experience .section-number { left: 22px; }
#home-experience .section-heading h2,
#home-experience .sourcing h2,
#home-experience .organics h2,
#home-experience .products h2,
#home-experience .ripening-section h2,
#home-experience .resources h2,
#home-experience .explore h2,
#home-experience .final-cta h2,
#home-experience .colombia-feature h2 { font-size: 58px; }
#home-experience .section-heading > p:not(.eyebrow),
#home-experience .sourcing__intro > p,
#home-experience .organics__content > p:not(.eyebrow),
#home-experience .ripening-section__content > p:not(.eyebrow),
#home-experience .final-cta__content > p:not(.eyebrow) { font-size: 15px; }
#home-experience .avo360__visual { aspect-ratio: .88 / 1; border-radius: 24px 24px 100px 24px; }
#home-experience .avo360__word { bottom: 24px; font-size: 50px; left: 22px; }
#home-experience .capability-list button { font-size: 24px; }
#home-experience .atlas { border-radius: 20px; min-height: 0; }
#home-experience .atlas__map { min-height: 570px; }
#home-experience .atlas__region-image { bottom: 24px; right: 20px; width: 44%; }
#home-experience .atlas__metrics strong { font-size: 40px; }
#home-experience .atlas__metrics div { padding: 22px 18px; }
#home-experience .map-pin b { font-size: 11px; }
#home-experience .colombia-feature__photo { min-height: 500px; }
#home-experience .colombia-feature__content { padding: 30px 22px 110px; }
#home-experience .colombia-feature__content h3 { font-size: 25px; }
#home-experience .colombia-feature__content > p:not(.eyebrow) { font-size: 14px; }
#home-experience .colombia-feature__cutout { display: none; }
#home-experience .organics { min-height: 940px; }
#home-experience .organics__content { padding: 100px 22px; }
#home-experience .organics__image { top: 48%; }
#home-experience .organics__bags { bottom: -28px; width: 94vw; }
#home-experience .products__top { gap: 28px; margin-bottom: 48px; }
#home-experience .product-stage { display: flex; flex-direction: column; min-height: 0; padding: 70px 22px 28px; }
#home-experience .product-stage__copy { order: 2; padding: 0; }
#home-experience .product-stage__copy h3 { font-size: 48px; }
#home-experience .product-stage__visual { min-height: 430px; order: 1; }
#home-experience .product-stage__visual > img:not(.product-stage__avocado) { max-height: 400px; }
#home-experience .product-stage__halo { height: 300px; width: 300px; }
#home-experience .product-picker { order: 3; width: 100%; }
#home-experience .ripening-section__photo { min-height: 520px; }
#home-experience .ripening-section__content { padding: 86px 22px; }
#home-experience .program-selector { grid-template-columns: 1fr; }
#home-experience .program-selector button + button { border-left: 0; border-top: 1px solid rgba(43,66,22,.18); }
#home-experience .program-selector button::after { bottom: auto; left: 0; right: auto; top: 8px; transform: scaleY(0); width: 4px; height: calc(100% - 16px); }
#home-experience .program-selector button.is-active::after { transform: scaleY(1); }
#home-experience .resource-grid { grid-template-columns: 1fr; }
#home-experience .resource-card:first-child { grid-column: auto; }
#home-experience .resource-card { min-height: 420px; }
#home-experience .explore-card { min-height: 380px; }
#home-experience .final-cta { min-height: 760px; }
#home-experience .final-cta h2 { font-size: 68px; }
#home-experience .final-cta__avocado { display: none; }
#home-experience .site-footer { display: flex; flex-direction: column; align-items: flex-start; }
#home-experience .site-footer nav { flex-direction: column; gap: 12px; }
#home-experience .footer-top { position: absolute; right: 24px; }
}
@media (prefers-reduced-motion: reduce) {
#home-experience { scroll-behavior: auto; }
#home-experience *, #home-experience *::before, #home-experience *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
}
#home-experience [data-reveal] { opacity: 1; transform: none; }
#home-experience .hero__video { display: none; }
#home-experience .hero { background: linear-gradient(90deg, rgba(13,24,8,.9), rgba(13,24,8,.35)), url("../media/hero-poster.jpg") center / cover no-repeat; }
}
/* Flagship motion proof: hero → AVO360 → live sourcing atlas */
#home-experience .proof-hero,
#home-experience .system-story,
#home-experience .map-story {
--chapter-gutter: clamp(28px, 6vw, 96px);
position: relative;
}
#home-experience .proof-hero {
--hero-story: 0;
background: var(--forest-dark);
color: var(--white);
height: 270svh;
}
#home-experience .proof-hero__sticky,
#home-experience .system-story__sticky,
#home-experience .map-story__sticky {
height: 100svh;
overflow: hidden;
position: sticky;
top: 0;
}
#home-experience .proof-hero__sticky {
align-items: flex-end;
display: flex;
isolation: isolate;
}
#home-experience .proof-hero__film,
#home-experience .proof-hero__veil,
#home-experience .proof-hero__texture {
height: 100%;
inset: 0;
position: absolute;
width: 100%;
}
#home-experience .proof-hero__film {
object-fit: cover;
opacity: clamp(0.12, calc(1 - var(--hero-story) * 0.88), 1);
transform: scale(calc(1.015 + var(--hero-story) * 0.16));
transform-origin: 58% 48%;
will-change: transform, opacity;
}
#home-experience .proof-hero__veil {
background:
linear-gradient(90deg, rgba(8, 18, 6, 0.94) 0%, rgba(8, 18, 6, 0.63) 46%, rgba(8, 18, 6, 0.08) 78%),
linear-gradient(0deg, rgba(8, 18, 6, 0.64), transparent 56%),
radial-gradient(circle at 75% 48%, transparent 0 12%, rgba(8, 18, 6, 0.15) 35%, transparent 62%);
z-index: 1;
}
#home-experience .proof-hero__texture {
background-image: url("../media/avocado-pattern.jpg");
background-size: 520px;
mix-blend-mode: soft-light;
opacity: calc(0.04 + var(--hero-story) * 0.11);
z-index: 2;
}
#home-experience .proof-hero__content {
margin: 0 0 clamp(66px, 9vh, 112px) var(--chapter-gutter);
max-width: 1050px;
opacity: clamp(0, calc(1.3 - var(--hero-story) * 2.35), 1);
position: relative;
transform: translate3d(0, calc(var(--hero-story) * -42px), 0);
width: min(74vw, 1050px);
will-change: transform, opacity;
z-index: 5;
}
#home-experience .proof-hero__content h1 {
font-family: var(--display);
font-size: clamp(86px, 11.3vw, 188px);
font-weight: 400;
letter-spacing: -0.05em;
line-height: 0.77;
margin: 0;
text-transform: uppercase;
}
#home-experience .proof-hero__content h1 span {
color: var(--lime);
display: block;
}
#home-experience .proof-hero__content > p:not(.eyebrow) {
font-size: clamp(15px, 1.15vw, 19px);
line-height: 1.75;
margin: 38px 0 30px;
max-width: 680px;
}
#home-experience .proof-hero__route {
background: var(--lime);
bottom: 25%;
height: 2px;
left: 56%;
opacity: clamp(0, calc((var(--hero-story) - 0.08) * 6), 0.9);
position: absolute;
transform: rotate(-9deg) scaleX(clamp(0, calc(var(--hero-story) * 1.8), 1));
transform-origin: left;
width: 48%;
z-index: 4;
}
#home-experience .proof-hero__route::after {
background: var(--lime);
border-radius: 50%;
box-shadow: 0 0 0 10px rgba(183, 224, 0, 0.12), 0 0 80px rgba(183, 224, 0, 0.38);
content: "";
height: 11px;
position: absolute;
right: -3px;
top: -5px;
width: 11px;
}
#home-experience .proof-seed {
filter: drop-shadow(0 36px 44px rgba(0, 0, 0, 0.32));
height: clamp(100px, 13vw, 210px);
left: calc(82% - var(--hero-story) * 32%);
opacity: clamp(0, calc((var(--hero-story) - 0.04) * 5), 1);
position: absolute;
top: calc(69% - var(--hero-story) * 19%);
transform: translate(-50%, -50%) rotate(calc(-18deg + var(--hero-story) * 18deg)) scale(calc(0.72 + var(--hero-story) * 8.8));
width: clamp(82px, 10vw, 162px);
will-change: left, top, transform, opacity;
z-index: 4;
}
#home-experience .proof-seed span {
background:
radial-gradient(circle at 34% 25%, rgba(255, 244, 190, 0.88), transparent 8%),
radial-gradient(circle at 40% 34%, #ccb36d 0 18%, #9e8145 48%, #674c22 74%, #2f210d 100%);
border: 1px solid rgba(255, 245, 200, 0.28);
border-radius: 52% 48% 56% 44% / 43% 44% 56% 57%;
box-shadow: inset -16px -24px 30px rgba(30, 20, 6, 0.34), inset 8px 10px 24px rgba(255, 239, 180, 0.22);
display: block;
height: 100%;
width: 100%;
}
#home-experience .proof-hero__handoff {
align-items: center;
display: flex;
height: 100%;
inset: 0;
justify-content: center;
opacity: clamp(0, calc((var(--hero-story) - 0.7) * 5), 1);
position: absolute;
transform: scale(calc(0.72 + var(--hero-story) * 0.28));
z-index: 6;
}
#home-experience .proof-hero__handoff img {
filter: brightness(0) invert(1);
max-width: min(54vw, 720px);
width: 100%;
}
#home-experience .proof-chapter {
align-items: center;
bottom: 34px;
color: rgba(255, 255, 255, 0.65);
display: flex;
font-family: var(--display);
font-size: 12px;
gap: 12px;
letter-spacing: 0.15em;
position: absolute;
right: var(--chapter-gutter);
z-index: 12;
}
#home-experience .proof-chapter i {
background: currentColor;
height: 1px;
opacity: 0.55;
width: 60px;
}
#home-experience .system-story {
--avo-story: 0;
background: #101d0a;
color: var(--white);
height: 540svh;
}
#home-experience .system-story__sticky {
background:
radial-gradient(circle at 74% 50%, rgba(183, 224, 0, 0.08), transparent 28%),
#101d0a;
isolation: isolate;
}
#home-experience .system-story__sticky::after,
#home-experience .map-story__sticky::after {
background-image: url("../media/avocado-pattern.jpg");
background-size: 620px;
content: "";
inset: 0;
mix-blend-mode: soft-light;
opacity: 0.055;
pointer-events: none;
position: absolute;
z-index: 8;
}
#home-experience .system-story__media {
bottom: 0;
clip-path: ellipse(57% 74% at 66% 51%);
overflow: hidden;
position: absolute;
right: -3%;
top: 0;
width: 58%;
z-index: 1;
}
#home-experience .system-story__media img,
#home-experience .system-story__media-veil {
height: 100%;
inset: 0;
position: absolute;
width: 100%;
}
#home-experience .system-story__media img {
object-fit: cover;
opacity: 0;
transform: scale(1.08);
transition: opacity 700ms ease, transform 1300ms var(--ease);
}
#home-experience .system-story__media img.is-active {
opacity: 0.52;
transform: scale(1);
}
#home-experience .system-story__media-veil {
background: linear-gradient(90deg, #101d0a 0%, rgba(16, 29, 10, 0.38) 48%, rgba(16, 29, 10, 0.18));
}
#home-experience .system-story__copy {
left: var(--chapter-gutter);
max-width: 480px;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 5;
}
#home-experience .system-story__copy h2 {
font-family: var(--display);
font-size: clamp(58px, 6vw, 102px);
font-weight: 400;
letter-spacing: -0.04em;
line-height: 0.86;
margin: 0;
text-transform: uppercase;
}
#home-experience .system-story__copy > p:not(.eyebrow) {
color: rgba(255, 255, 255, 0.68);
font-size: 15px;
line-height: 1.75;
margin: 32px 0;
max-width: 440px;
}
#home-experience .system-orbit {
height: min(72vw, 720px);
position: absolute;
right: clamp(10px, 5vw, 86px);
top: 50%;
transform: translateY(-50%) rotate(calc(var(--avo-story) * -8deg));
width: min(72vw, 720px);
z-index: 6;
}
#home-experience .system-orbit__ring,
#home-experience .system-orbit__core {
border: 1px solid rgba(183, 224, 0, 0.42);
border-radius: 50%;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
#home-experience .system-orbit__ring--outer {
height: 100%;
width: 100%;
}
#home-experience .system-orbit__ring--inner {
border-color: rgba(255, 255, 255, 0.16);
height: 66%;
width: 66%;
}
#home-experience .system-orbit__ring::after,
#home-experience .system-orbit__ring::before {
background: var(--lime);
border-radius: 50%;
content: "";
height: 7px;
position: absolute;
width: 7px;
}
#home-experience .system-orbit__ring::before { left: 11%; top: 17%; }
#home-experience .system-orbit__ring::after { bottom: 14%; right: 8%; }
#home-experience .system-orbit__core {
align-items: center;
backdrop-filter: blur(18px);
background: rgba(10, 22, 7, 0.76);
display: flex;
flex-direction: column;
height: 42%;
justify-content: center;
width: 42%;
}
#home-experience .system-orbit__core img {
filter: brightness(0) invert(1);
max-width: 58%;
}
#home-experience .system-orbit__core strong {
color: var(--lime);
font-family: var(--display);
font-size: clamp(22px, 2.4vw, 38px);
font-weight: 400;
letter-spacing: 0.05em;
margin-top: 18px;
text-transform: uppercase;
}
#home-experience .system-node {
align-items: center;
background: rgba(16, 29, 10, 0.9);
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: 999px;
color: rgba(255, 255, 255, 0.68);
display: flex;
font-family: var(--display);
font-size: 13px;
gap: 9px;
letter-spacing: 0.09em;
padding: 10px 14px;
position: absolute;
text-transform: uppercase;
transition: background 350ms var(--ease), border-color 350ms ease, color 350ms ease, transform 500ms var(--ease);
}
#home-experience .system-node span {
font-family: var(--body);
font-size: 8px;
opacity: 0.65;
}
#home-experience .system-node.is-active {
background: var(--lime);
border-color: var(--lime);
color: var(--forest-dark);
box-shadow: 0 0 0 10px rgba(183, 224, 0, 0.08);
}
#home-experience .system-node--1 { left: 14%; top: 8%; transform: translate(-50%, -50%); }
#home-experience .system-node--2 { right: -2%; top: 28%; transform: translate(0, -50%); }
#home-experience .system-node--3 { bottom: 18%; right: 0; transform: translate(0, 50%); }
#home-experience .system-node--4 { bottom: 1%; left: 34%; transform: translate(-50%, 50%); }
#home-experience .system-node--5 { bottom: 22%; left: -2%; transform: translate(-50%, 50%); }
#home-experience .system-node--6 { left: -1%; top: 26%; transform: translate(-50%, -50%); }
#home-experience .system-story__contour {
border: 1px solid var(--lime);
border-radius: 50%;
height: 18vw;
opacity: clamp(0, calc((var(--avo-story) - 0.84) * 6), 1);
position: absolute;
right: 20vw;
top: 50%;
transform: translateY(-50%) scale(calc(0.5 + var(--avo-story) * 5));
width: 18vw;
z-index: 7;
}
#home-experience .map-story {
--map-story: 0;
background: #14230d;
color: var(--white);
height: 620svh;
}
#home-experience .map-story__sticky {
background: #14230d;
isolation: isolate;
}
#home-experience .map-canvas-shell,
#home-experience .map-canvas,
#home-experience .map-story__shade,
#home-experience .map-contours {
inset: 0;
position: absolute;
}
#home-experience .map-canvas-shell {
background: #14230d;
opacity: 0.4;
transition: opacity 900ms ease;
z-index: 1;
}
#home-experience .map-canvas-shell.is-ready {
opacity: 1;
}
#home-experience .map-canvas {
height: 100%;
width: 100%;
}
#home-experience .map-canvas-shell:not(.is-exploring) .maplibregl-canvas-container,
#home-experience .map-canvas-shell:not(.is-exploring) .origin-marker {
pointer-events: none;
}
#home-experience .maplibregl-map,
#home-experience .maplibregl-canvas {
font-family: var(--body);
}
#home-experience .maplibregl-canvas:focus-visible {
outline: 3px solid var(--lime);
outline-offset: -5px;
}
#home-experience .map-contours {
background:
repeating-radial-gradient(ellipse at 58% 52%, transparent 0 7.8%, rgba(183, 224, 0, 0.07) 8%, transparent 8.2%),
linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px);
background-size: auto, 84px 84px, 84px 84px;
mix-blend-mode: screen;
opacity: 0.78;
pointer-events: none;
}
#home-experience .map-loading {
align-items: center;
background: #14230d;
display: flex;
inset: 0;
justify-content: center;
opacity: 1;
pointer-events: none;
position: absolute;
transition: opacity 700ms ease;
z-index: 3;
}
#home-experience .map-canvas-shell.is-ready .map-loading { opacity: 0; }
#home-experience .map-loading span {
border: 1px solid rgba(183, 224, 0, 0.42);
border-radius: 50%;
height: 28vw;
max-height: 380px;
max-width: 380px;
width: 28vw;
}
#home-experience .origin-marker {
align-items: center;
background: transparent;
border: 0;
color: rgba(255, 255, 255, 0.72);
display: flex;
gap: 9px;
padding: 8px;
transition: color 300ms ease, transform 400ms var(--ease);
}
#home-experience .origin-marker span {
background: var(--warm-white);
border: 3px solid #14230d;
border-radius: 50%;
box-shadow: 0 0 0 1px var(--warm-white);
height: 12px;
transition: background 300ms ease, box-shadow 300ms ease, transform 300ms ease;
width: 12px;
}
#home-experience .origin-marker b {
font-family: var(--display);
font-size: 12px;
font-weight: 400;
letter-spacing: 0.08em;
text-shadow: 0 2px 8px #14230d;
text-transform: uppercase;
}
#home-experience .origin-marker.is-active { color: var(--lime); transform: translateX(3px); }
#home-experience .origin-marker.is-active span { background: var(--lime); box-shadow: 0 0 0 8px rgba(183, 224, 0, 0.13); transform: scale(1.16); }
#home-experience .map-story__shade {
background:
linear-gradient(90deg, rgba(8, 18, 6, 0.92) 0%, rgba(8, 18, 6, 0.52) 34%, transparent 67%),
linear-gradient(0deg, rgba(8, 18, 6, 0.72), transparent 33%);
pointer-events: none;
transition: opacity 450ms ease;
z-index: 3;
}
#home-experience .map-story.is-exploring .map-story__shade { opacity: 0.18; }
#home-experience .map-story__moment {
animation: mapMomentIn 680ms var(--ease) both;
left: var(--chapter-gutter);
max-width: 620px;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 5;
}
@keyframes mapMomentIn {
from { opacity: 0; transform: translateY(calc(-50% + 30px)); }
to { opacity: 1; transform: translateY(-50%); }
}
#home-experience .map-story.is-exploring .map-story__moment { opacity: 0; pointer-events: none; }
#home-experience .map-story__moment h2 {
font-family: var(--display);
font-size: clamp(72px, 8.3vw, 142px);
font-weight: 400;
letter-spacing: -0.045em;
line-height: 0.82;
margin: 0;
max-width: 860px;
text-transform: uppercase;
}
#home-experience .map-story__moment > strong {
color: var(--lime);
display: block;
font-family: var(--display);
font-size: clamp(150px, 22vw, 390px);
font-weight: 400;
letter-spacing: -0.065em;
line-height: 0.72;
}
#home-experience .map-story__moment > p:not(.eyebrow) {
color: rgba(255, 255, 255, 0.74);
font-size: clamp(14px, 1vw, 17px);
line-height: 1.7;
margin: 32px 0 0;
max-width: 560px;
}
#home-experience .map-story__metrics {
bottom: 108px;
display: grid;
gap: 7px;
position: absolute;
right: var(--chapter-gutter);
width: min(310px, 26vw);
z-index: 5;
}
#home-experience .map-story__metrics span {
align-items: baseline;
backdrop-filter: blur(12px);
background: rgba(8, 18, 6, 0.64);
border: 1px solid rgba(255, 255, 255, 0.13);
color: rgba(255, 255, 255, 0.54);
display: flex;
font-size: 9px;
font-weight: 700;
gap: 12px;
letter-spacing: 0.09em;
padding: 12px 15px;
text-transform: uppercase;
transition: background 350ms ease, border-color 350ms ease, color 350ms ease, transform 400ms var(--ease);
}
#home-experience .map-story__metrics strong {
color: var(--white);
font-family: var(--display);
font-size: 24px;
font-weight: 400;
letter-spacing: -0.02em;
}
#home-experience .map-story__metrics span.is-active {
background: var(--lime);
border-color: var(--lime);
color: var(--forest-dark);
transform: translateX(-12px);
}
#home-experience .map-story__metrics span.is-active strong { color: var(--forest-dark); }
#home-experience .map-story__regions {
display: flex;
gap: 5px;
position: absolute;
right: var(--chapter-gutter);
top: 118px;
z-index: 11;
}
#home-experience .map-story__regions button {
backdrop-filter: blur(12px);
background: rgba(8, 18, 6, 0.58);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 999px;
color: rgba(255, 255, 255, 0.68);
font-family: var(--display);
font-size: 10px;
letter-spacing: 0.08em;
padding: 9px 12px;
text-transform: uppercase;
}
#home-experience .map-story__regions button.is-active {
background: var(--lime);
border-color: var(--lime);
color: var(--forest-dark);
}
#home-experience .map-story__explore {
bottom: 42px;
left: var(--chapter-gutter);
position: absolute;
z-index: 10;
}
#home-experience .map-story__close {
align-items: center;
background: var(--lime);
border: 0;
border-radius: 50%;
color: var(--forest-dark);
display: flex;
font-size: 34px;
height: 54px;
justify-content: center;
position: absolute;
right: var(--chapter-gutter);
top: 38px;
width: 54px;
z-index: 15;
}
#home-experience .map-story__close span { line-height: 1; margin-top: -4px; }
#home-experience .map-zoom-controls {
bottom: 34px;
display: grid;
gap: 4px;
position: absolute;
right: 24px;
z-index: 12;
}
#home-experience .map-zoom-controls button {
background: rgba(8, 18, 6, 0.8);
border: 1px solid rgba(255, 255, 255, 0.22);
color: var(--white);
font-size: 22px;
height: 42px;
width: 42px;
}
#home-experience .map-story__progress {
align-items: center;
bottom: 40px;
display: flex;
font-family: var(--display);
font-size: 9px;
gap: 8px;
left: 50%;
letter-spacing: 0.11em;
position: absolute;
text-transform: uppercase;
transform: translateX(-50%);
z-index: 5;
}
#home-experience .map-story__progress i {
background: rgba(255, 255, 255, 0.28);
height: 1px;
width: 24px;
}
#home-experience .map-story.is-exploring .map-story__metrics,
#home-experience .map-story.is-exploring .map-story__progress,
#home-experience .map-story.is-exploring .proof-chapter { opacity: 0; pointer-events: none; }
@media (max-width: 1180px) {
#home-experience .system-story__copy { max-width: 390px; }
#home-experience .system-story__copy h2 { font-size: clamp(54px, 5.8vw, 82px); }
#home-experience .system-orbit { right: -7vw; width: 62vw; height: 62vw; }
#home-experience .map-story__regions { max-width: 390px; flex-wrap: wrap; justify-content: flex-end; }
}
@media (max-width: 920px) {
#home-experience .proof-hero { height: 230svh; }
#home-experience .proof-hero__content { margin-left: 28px; width: calc(100vw - 56px); }
#home-experience .proof-hero__content h1 { font-size: clamp(72px, 15vw, 120px); }
#home-experience .proof-seed { left: calc(82% - var(--hero-story) * 30%); }
#home-experience .proof-chapter { display: none; }
#home-experience .system-story { height: 470svh; }
#home-experience .system-story__media { clip-path: none; opacity: 0.46; right: 0; width: 100%; }
#home-experience .system-story__media-veil { background: linear-gradient(0deg, #101d0a 4%, rgba(16,29,10,.66) 48%, rgba(16,29,10,.88)); }
#home-experience .system-story__copy { left: 28px; max-width: calc(100vw - 56px); top: 122px; transform: none; }
#home-experience .system-story__copy h2 { font-size: clamp(54px, 10vw, 76px); }
#home-experience .system-story__copy > p:not(.eyebrow) { font-size: 14px; margin: 24px 0; max-width: 580px; }
#home-experience .system-orbit {
bottom: 36px;
display: grid;
gap: 7px;
grid-template-columns: repeat(3, 1fr);
height: auto;
left: 28px;
padding-top: 218px;
right: 28px;
top: auto;
transform: none;
width: auto;
}
#home-experience .system-orbit__ring--outer { height: 210px; left: 50%; top: 0; width: 210px; }
#home-experience .system-orbit__ring--inner { height: 150px; left: 50%; top: 30px; width: 150px; }
#home-experience .system-orbit__core { height: 128px; left: 50%; top: 105px; width: 128px; }
#home-experience .system-orbit__core strong { font-size: 20px; margin-top: 12px; }
#home-experience .system-node,
#home-experience .system-node--1,
#home-experience .system-node--2,
#home-experience .system-node--3,
#home-experience .system-node--4,
#home-experience .system-node--5,
#home-experience .system-node--6 {
bottom: auto;
justify-content: center;
left: auto;
position: relative;
right: auto;
top: auto;
transform: none;
}
#home-experience .system-story__contour { right: 38vw; }
#home-experience .map-story { height: 500svh; }
#home-experience .map-story__shade { background: linear-gradient(0deg, rgba(8,18,6,.94), rgba(8,18,6,.2) 62%, rgba(8,18,6,.24)); }
#home-experience .map-story__moment { bottom: 112px; left: 28px; max-width: calc(100vw - 56px); top: auto; transform: none; }
@keyframes mapMomentIn {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
#home-experience .map-story__moment h2 { font-size: clamp(64px, 13vw, 102px); }
#home-experience .map-story__moment > strong { font-size: clamp(150px, 35vw, 280px); }
#home-experience .map-story__moment > p:not(.eyebrow) { margin-top: 20px; max-width: 620px; }
#home-experience .map-story__metrics { bottom: auto; left: 28px; right: auto; top: 104px; width: 240px; }
#home-experience .map-story__metrics span { display: none; }
#home-experience .map-story__metrics span.is-active,
#home-experience .map-story__metrics span:last-child { display: flex; }
#home-experience .map-story__regions { left: 28px; max-width: calc(100vw - 110px); right: auto; top: 98px; }
#home-experience .map-story:not(.is-exploring) .map-story__regions { opacity: 0; pointer-events: none; }
#home-experience .map-story.is-exploring .map-story__metrics { opacity: 0; }
#home-experience .map-story__explore { bottom: 34px; left: 28px; }
#home-experience .map-story__progress { display: none; }
#home-experience .map-story__close { right: 24px; top: 94px; }
}
@media (max-width: 620px) {
#home-experience .proof-hero { height: 220svh; }
#home-experience .proof-hero__veil { background: linear-gradient(0deg, rgba(8,18,6,.95), rgba(8,18,6,.3) 76%, rgba(8,18,6,.28)); }
#home-experience .proof-hero__content { margin: 0 22px 68px; width: calc(100vw - 44px); }
#home-experience .proof-hero__content h1 { font-size: clamp(66px, 19vw, 92px); line-height: .8; }
#home-experience .proof-hero__content > p:not(.eyebrow) { font-size: 14px; line-height: 1.65; margin: 26px 0; }
#home-experience .proof-hero__content .button-row { align-items: stretch; flex-direction: column; max-width: 230px; }
#home-experience .proof-seed { height: 112px; width: 88px; }
#home-experience .proof-hero__handoff img { max-width: 78vw; }
#home-experience .system-story { height: 450svh; }
#home-experience .system-story__copy { left: 22px; max-width: calc(100vw - 44px); top: 92px; }
#home-experience .system-story__copy h2 { font-size: 48px; }
#home-experience .system-story__copy > p:not(.eyebrow) { display: none; }
#home-experience .system-orbit { bottom: 24px; gap: 5px; grid-template-columns: repeat(2, 1fr); left: 22px; padding-top: 190px; right: 22px; }
#home-experience .system-orbit__ring--outer { height: 182px; width: 182px; }
#home-experience .system-orbit__ring--inner { height: 126px; top: 28px; width: 126px; }
#home-experience .system-orbit__core { height: 112px; top: 91px; width: 112px; }
#home-experience .system-node { font-size: 11px; padding: 8px 10px; }
#home-experience .map-story { height: 470svh; }
#home-experience .map-story__moment { bottom: 112px; left: 22px; max-width: calc(100vw - 44px); }
#home-experience .map-story__moment h2 { font-size: 56px; }
#home-experience .map-story__moment > strong { font-size: 42vw; }
#home-experience .map-story__moment > p:not(.eyebrow) { font-size: 13px; line-height: 1.55; }
#home-experience .map-story__metrics { left: 22px; top: 90px; width: 210px; }
#home-experience .map-story__regions { left: 18px; max-width: calc(100vw - 88px); top: 82px; }
#home-experience .map-story__regions button { font-size: 9px; padding: 7px 9px; }
#home-experience .map-story__close { height: 46px; right: 18px; top: 82px; width: 46px; }
#home-experience .map-story__explore { bottom: 32px; left: 22px; max-width: calc(100vw - 44px); }
#home-experience .map-story__explore.button { font-size: 10px; }
#home-experience .map-zoom-controls { bottom: 22px; right: 16px; }
#home-experience .origin-marker b { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
#home-experience .proof-hero,
#home-experience .system-story,
#home-experience .map-story { height: auto; }
#home-experience .proof-hero__sticky,
#home-experience .system-story__sticky,
#home-experience .map-story__sticky { min-height: 100svh; position: relative; }
#home-experience .proof-hero__film { display: none; }
#home-experience .proof-hero__sticky { background: linear-gradient(0deg, rgba(8,18,6,.9), rgba(8,18,6,.32)), url("../media/hero-poster.jpg") center / cover no-repeat; }
#home-experience .proof-hero__content { opacity: 1; transform: none; }
#home-experience .proof-seed { left: auto; opacity: .8; right: 7vw; top: 50%; transform: translateY(-50%); }
#home-experience .proof-hero__route,
#home-experience .proof-hero__handoff,
#home-experience .system-story__contour { display: none; }
#home-experience .system-story__media img.is-active { opacity: .38; }
#home-experience .system-orbit { transform: none; }
#home-experience .map-story__moment { animation: none; }
#home-experience .map-story__metrics span { display: flex; }
}
/* 2026 scroll-film direction: atmosphere → grove → fruit → system → world */
body.wpr06-home.earth-is-open {
overflow: hidden;
}
#home-experience .programs-intro {
align-items: end;
background: var(--cream);
color: var(--forest-dark);
display: grid;
min-height: 72svh;
padding: clamp(120px, 13vw, 210px) max(28px, 7vw);
}
#home-experience .programs-intro h2 {
font-family: var(--display);
font-size: clamp(92px, 14vw, 220px);
font-weight: 400;
letter-spacing: -.055em;
line-height: .74;
margin: 0;
text-transform: uppercase;
}
#home-experience .programs-intro h2 span {
color: var(--olive);
display: block;
}
#home-experience .proof-hero {
--hero-handoff: 0;
--hero-speed: 0;
height: 390svh;
}
#home-experience .proof-hero__sticky {
background: #0c1c0c;
}
#home-experience .proof-hero__poster,
#home-experience .proof-hero__flight-media,
#home-experience .proof-hero__film,
#home-experience .proof-hero__green,
#home-experience .proof-hero__grain {
height: 100%;
inset: 0;
position: absolute;
width: 100%;
}
#home-experience .proof-hero__poster,
#home-experience .proof-hero__film {
object-fit: cover;
object-position: center;
}
#home-experience .proof-hero__poster {
z-index: 0;
}
#home-experience .proof-hero__flight-media {
overflow: hidden;
transform: translateZ(0) scale(1.014);
transform-origin: center;
z-index: 1;
}
#home-experience .proof-hero__flight-media::after {
background:
radial-gradient(circle at 27% 28%, rgba(255, 226, 169, .07), transparent 25%),
radial-gradient(ellipse at center, transparent 50%, rgba(3, 12, 5, .34) 112%);
content: "";
inset: 0;
pointer-events: none;
position: absolute;
z-index: 30;
}
#home-experience .proof-hero__film {
filter: saturate(.97) contrast(1.03);
opacity: 0;
pointer-events: none;
transform: translateZ(0);
transition: none;
will-change: opacity, transform;
}
#home-experience .proof-hero__film.is-active {
opacity: 1;
}
#home-experience .proof-hero.is-film-ready .proof-hero__flight-media {
background: #0c1c0c;
}
#home-experience .proof-hero__veil {
background:
linear-gradient(90deg, rgba(5, 15, 7, .84) 0%, rgba(5, 15, 7, .54) 36%, rgba(5, 15, 7, .13) 68%, transparent 82%),
linear-gradient(0deg, rgba(5, 15, 7, .62) 0%, rgba(5, 15, 7, .1) 42%, rgba(5, 15, 7, .18) 100%);
opacity: clamp(.03, calc(.94 - var(--hero-story) * 4.8), .94);
pointer-events: none;
position: absolute;
inset: 0;
z-index: 3;
}
#home-experience .proof-hero__green {
background: var(--avo360-field);
opacity: clamp(0, calc((var(--hero-handoff) - .28) * 1.39), 1);
pointer-events: none;
z-index: 4;
}
#home-experience .proof-hero__grain {
background: none;
opacity: 0;
pointer-events: none;
z-index: 5;
}
#home-experience .proof-hero__avo-preview {
--avo-story: 0;
inset: 0;
opacity: clamp(0, calc((var(--hero-handoff) - .24) * 1.47), 1);
pointer-events: none;
position: absolute;
z-index: 6;
}
#home-experience .proof-hero__content {
bottom: auto;
left: max(72px, 7vw);
margin: 0;
max-width: min(760px, 55vw);
opacity: clamp(0, calc(1.08 - var(--hero-story) * 6.8), 1);
position: absolute;
top: clamp(176px, 22vh, 238px);
transform: translateY(calc(var(--hero-story) * -28px));
width: auto;
z-index: 8;
}
#home-experience .proof-hero__content h1 {
font-size: clamp(76px, 8.7vw, 142px);
letter-spacing: -.035em;
line-height: .82;
max-width: 7.2em;
}
#home-experience .proof-hero__content h1 span {
color: var(--lime);
display: block;
white-space: nowrap;
}
#home-experience .proof-hero__content h1 .proof-hero__line {
color: var(--white);
padding-left: .055em;
}
#home-experience .proof-hero__content > p:not(.eyebrow) {
font-size: clamp(14px, 1.05vw, 17px);
line-height: 1.65;
margin: 25px 0 25px .42em;
max-width: 620px;
text-wrap: balance;
}
#home-experience .proof-hero__content .button-row {
margin-left: .42em;
}
#home-experience .scroll-cue {
align-items: center;
bottom: 28px;
display: flex;
font-size: 9px;
font-weight: 700;
gap: 13px;
left: var(--chapter-gutter);
letter-spacing: .11em;
opacity: clamp(0, calc(1 - var(--hero-story) * 11), 1);
position: absolute;
text-transform: uppercase;
z-index: 9;
}
#home-experience .scroll-cue i {
border: 1px solid rgba(255, 255, 255, .6);
border-radius: 999px;
height: 42px;
position: relative;
width: 22px;
}
#home-experience .scroll-cue i::after {
animation: scrollCue 1.7s infinite var(--ease);
background: var(--lime);
border-radius: 50%;
content: "";
height: 4px;
left: 8px;
position: absolute;
top: 7px;
width: 4px;
}
@keyframes scrollCue {
0% { opacity: 0; transform: translateY(0); }
30% { opacity: 1; }
100% { opacity: 0; transform: translateY(20px); }
}
#home-experience .avocado-bridge {
--bridge-light: 0;
--bridge-opacity: 0;
--bridge-scale: 1;
--bridge-width-scale: 1;
--bridge-x: 50vw;
--bridge-y: 50vh;
contain: layout paint size;
height: min(72svh, 640px);
left: 0;
opacity: var(--bridge-opacity);
pointer-events: none;
position: fixed;
top: 0;
transform: translate(var(--bridge-x), var(--bridge-y)) translate(-50%, -50%) scale(var(--bridge-scale)) scaleX(var(--bridge-width-scale));
transform-origin: 50% 50%;
width: min(72svh, 640px);
will-change: opacity, transform;
z-index: 26;
}
#home-experience .avocado-bridge canvas {
filter: brightness(calc(.98 + var(--bridge-light) * .05));
height: 100%;
inset: 0;
pointer-events: none;
position: absolute;
width: 100%;
}
#home-experience .avocado-bridge__outline {
filter: none !important;
opacity: 0;
}
#home-experience .avocado-bridge__hit {
height: 84%;
left: 18%;
pointer-events: none;
position: absolute;
top: 8%;
width: 64%;
}
#home-experience .avocado-bridge.is-interactive .avocado-bridge__hit {
cursor: grab;
pointer-events: auto;
touch-action: pan-y;
}
#home-experience .avocado-bridge.is-interactive .avocado-bridge__hit:active {
cursor: grabbing;
}
#home-experience .avocado-bridge__hint {
display: none;
}
#home-experience .system-story {
background: var(--avo360-field);
height: 600svh;
}
#home-experience .system-story__sticky {
background: var(--avo360-field);
}
#home-experience .system-story__sticky::after {
content: none;
opacity: 0;
}
#home-experience .system-story__halo {
border: 1px solid rgba(183, 224, 0, .42);
border-radius: 50%;
height: min(58vw, 720px);
position: absolute;
right: clamp(-60px, 3vw, 60px);
top: 50%;
transform: translateY(-50%) rotate(calc(var(--avo-story) * 24deg));
width: min(58vw, 720px);
}
#home-experience .system-story__halo::after,
#home-experience .system-story__halo::before {
border: 1px solid rgba(255, 255, 255, .16);
border-radius: inherit;
content: "";
inset: 9%;
position: absolute;
}
#home-experience .system-story__halo::after {
inset: 23%;
}
#home-experience .system-story__mark {
filter: brightness(0) invert(1);
left: var(--chapter-gutter);
max-width: clamp(190px, 23vw, 350px);
opacity: clamp(.2, calc(.92 - var(--avo-story) * .65), .92);
position: absolute;
top: clamp(108px, 14vh, 150px);
z-index: 9;
}
#home-experience .system-story__intro {
bottom: clamp(124px, 13vh, 148px);
left: var(--chapter-gutter);
max-width: 560px;
opacity: clamp(0, calc(1.5 - var(--avo-story) * 6.2), 1);
position: absolute;
transform: translateY(calc(var(--avo-story) * -30px));
z-index: 9;
}
#home-experience .system-story__intro h2 {
font-family: var(--display);
font-size: clamp(56px, 6.4vw, 102px);
font-weight: 400;
letter-spacing: -.045em;
line-height: .84;
margin: 0;
text-transform: uppercase;
}
#home-experience .system-story__intro > p:not(.eyebrow) {
color: rgba(255, 255, 255, .74);
font-size: 14px;
line-height: 1.7;
margin: 28px 0 0;
max-width: 500px;
}
#home-experience .system-story__active {
align-items: baseline;
display: flex;
gap: 20px;
left: var(--chapter-gutter);
opacity: clamp(0, calc((var(--avo-story) - .15) * 7), 1);
position: absolute;
top: 45%;
transform: translateY(-50%);
z-index: 9;
}
#home-experience .system-story__active span {
color: var(--lime);
font-size: 11px;
font-weight: 700;
letter-spacing: .12em;
}
#home-experience .system-story__active strong {
font-family: var(--display);
font-size: clamp(70px, 9.5vw, 150px);
font-weight: 400;
letter-spacing: -.05em;
line-height: .8;
text-transform: uppercase;
}
#home-experience .system-story__capabilities {
bottom: 44px;
display: grid;
gap: 0;
grid-template-columns: repeat(6, 1fr);
left: var(--chapter-gutter);
position: absolute;
right: var(--chapter-gutter);
z-index: 28;
}
#home-experience .system-story__capabilities button {
background: transparent;
border: 0;
border-top: 1px solid rgba(255, 255, 255, .28);
color: rgba(255, 255, 255, .48);
font-family: var(--display);
font-size: 13px;
letter-spacing: .06em;
padding: 16px 7px 4px;
text-align: left;
text-transform: uppercase;
transition: color 300ms ease, border-color 300ms ease;
}
#home-experience .system-story__capabilities button span {
display: block;
font-family: var(--body);
font-size: 8px;
margin-bottom: 5px;
opacity: .66;
}
#home-experience .system-story__capabilities button.is-active {
border-color: var(--lime);
color: var(--white);
}
#home-experience .system-story__drag {
align-items: center;
color: rgba(255, 255, 255, .58);
display: flex;
font-size: 9px;
font-weight: 700;
gap: 10px;
letter-spacing: .1em;
position: absolute;
right: clamp(42px, 8vw, 130px);
text-transform: uppercase;
top: 20%;
z-index: 27;
}
#home-experience .system-story__drag i {
border: 1px solid rgba(255, 255, 255, .45);
border-radius: 50%;
height: 27px;
width: 27px;
}
#home-experience .system-story__exit {
background: #061019;
border-radius: 50%;
height: 16vw;
opacity: clamp(0, calc((var(--avo-story) - .88) * 9), 1);
position: absolute;
right: 24vw;
top: 50%;
transform: translateY(-50%) scale(calc(.4 + var(--avo-story) * 7));
width: 16vw;
z-index: 25;
}
#home-experience .reasons-story {
background: var(--cream);
color: var(--forest-dark);
display: grid;
gap: clamp(60px, 8vw, 140px);
grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
min-height: 100svh;
padding: clamp(120px, 14vw, 220px) max(28px, 7vw);
}
#home-experience .reasons-story__heading h2 {
font-family: var(--display);
font-size: clamp(62px, 7.5vw, 124px);
font-weight: 400;
letter-spacing: -.05em;
line-height: .82;
margin: 0;
text-transform: uppercase;
}
#home-experience .reasons-story__heading h2 span {
color: var(--olive);
}
#home-experience .reasons-story__lines {
align-self: end;
}
#home-experience .reasons-story__lines > div {
align-items: center;
border-top: 1px solid rgba(43, 66, 22, .28);
display: grid;
gap: 24px;
grid-template-columns: 34px 1fr 24px;
padding: 30px 0;
}
#home-experience .reasons-story__lines span {
color: var(--olive);
font-size: 10px;
font-weight: 800;
letter-spacing: .12em;
}
#home-experience .reasons-story__lines p {
font-family: var(--display);
font-size: clamp(25px, 2.3vw, 40px);
letter-spacing: -.025em;
line-height: 1.05;
margin: 0;
text-transform: uppercase;
}
#home-experience .reasons-story__lines i {
color: var(--olive);
font-size: 18px;
font-style: normal;
}
#home-experience .earth-story {
--earth-story: 0;
background: #061019;
color: var(--white);
height: 560svh;
position: relative;
}
#home-experience .earth-story__sticky {
background:
radial-gradient(circle at 52% 70%, rgba(38, 101, 146, .17), transparent 30%),
linear-gradient(#071521, #061019);
height: 100svh;
isolation: isolate;
overflow: hidden;
position: sticky;
top: 0;
}
#home-experience .earth-canvas {
bottom: 92px;
height: min(70vw, 980px, calc(100svh - 128px));
left: 54%;
position: absolute;
transform: translateX(-50%) translateY(calc((1 - var(--earth-story)) * 12vh));
transition: inset 700ms var(--ease), height 700ms var(--ease), transform 700ms var(--ease), width 700ms var(--ease);
width: min(70vw, 980px, calc(100svh - 128px));
z-index: 1;
}
#home-experience .earth-canvas::after {
background: radial-gradient(circle, rgba(62, 126, 177, .18), transparent 67%);
border: 1px solid rgba(135, 191, 225, .16);
border-radius: 50%;
content: "";
inset: 18%;
opacity: .9;
position: absolute;
transition: opacity 500ms ease;
z-index: -1;
}
#home-experience .earth-canvas[data-ready="true"]::after {
opacity: 0;
}
#home-experience .earth-canvas--placeholder::after {
opacity: .32;
}
#home-experience .earth-canvas canvas {
height: 100%;
width: 100%;
}
#home-experience .earth-story.is-exploring .earth-canvas {
bottom: 0;
height: 100%;
inset: 0;
transform: none;
width: 100%;
z-index: 20;
}
#home-experience .earth-story.is-exploring .earth-canvas canvas {
cursor: grab;
}
#home-experience .earth-story.is-exploring .earth-canvas canvas:active {
cursor: grabbing;
}
#home-experience .earth-story__shade {
background:
linear-gradient(90deg, rgba(4, 12, 19, .88), rgba(4, 12, 19, .2) 48%, transparent 68%),
linear-gradient(0deg, rgba(4, 12, 19, .68), transparent 40%);
inset: 0;
opacity: calc(1 - var(--earth-story) * .3);
pointer-events: none;
position: absolute;
transition: opacity 500ms ease;
z-index: 3;
}
#home-experience .earth-story.is-exploring .earth-story__shade {
opacity: .1;
z-index: 21;
}
#home-experience .earth-story__copy {
animation: earthCopyIn 620ms var(--ease) both;
left: clamp(28px, 7vw, 112px);
max-width: 680px;
position: absolute;
top: 43%;
transform: translateY(-50%);
z-index: 8;
}
@keyframes earthCopyIn {
from { opacity: 0; transform: translateY(calc(-50% + 28px)); }
to { opacity: 1; transform: translateY(-50%); }
}
#home-experience .earth-story__copy h2 {
font-family: var(--display);
font-size: clamp(78px, 9vw, 150px);
font-weight: 400;
letter-spacing: -.05em;
line-height: .79;
margin: 0;
text-transform: uppercase;
}
#home-experience .earth-story__copy > strong {
color: var(--lime);
display: block;
font-family: var(--display);
font-size: clamp(154px, 22vw, 390px);
font-weight: 400;
letter-spacing: -.065em;
line-height: .7;
}
#home-experience .earth-story__copy > p:not(.eyebrow) {
color: rgba(255, 255, 255, .73);
line-height: 1.7;
margin: 30px 0 0;
max-width: 560px;
}
#home-experience .earth-story__regions {
display: grid;
gap: 5px;
position: absolute;
right: clamp(28px, 6vw, 96px);
top: 20%;
z-index: 9;
}
#home-experience .earth-story__regions button {
align-items: center;
background: rgba(5, 16, 25, .56);
border: 1px solid rgba(255, 255, 255, .16);
border-radius: 999px;
color: rgba(255, 255, 255, .64);
display: flex;
font-family: var(--display);
font-size: 11px;
gap: 9px;
letter-spacing: .08em;
padding: 9px 14px;
text-transform: uppercase;
}
#home-experience .earth-story__regions button i {
background: currentColor;
border-radius: 50%;
height: 5px;
width: 5px;
}
#home-experience .earth-story__regions button.is-active {
background: var(--lime);
border-color: var(--lime);
color: var(--forest-dark);
}
#home-experience .earth-story__metrics {
bottom: 43px;
display: grid;
gap: 1px;
grid-template-columns: repeat(4, minmax(130px, 1fr));
left: clamp(28px, 7vw, 112px);
max-width: 760px;
position: absolute;
z-index: 8;
}
#home-experience .earth-story__tour-status {
display: none;
}
#home-experience .earth-story__metrics span {
backdrop-filter: blur(13px);
background: rgba(4, 12, 19, .55);
border: 1px solid rgba(255, 255, 255, .14);
color: rgba(255, 255, 255, .53);
font-size: 8px;
font-weight: 700;
letter-spacing: .09em;
padding: 12px 14px;
text-transform: uppercase;
}
#home-experience .earth-story__metrics strong {
color: var(--white);
display: block;
font-family: var(--display);
font-size: 25px;
font-weight: 400;
letter-spacing: -.02em;
}
#home-experience .earth-story__explore {
bottom: 40px;
position: absolute;
right: clamp(28px, 6vw, 96px);
z-index: 10;
}
#home-experience .earth-story__close {
align-items: center;
background: var(--lime);
border: 0;
border-radius: 50%;
color: var(--forest-dark);
display: flex;
font-size: 34px;
height: 54px;
justify-content: center;
position: absolute;
right: 32px;
top: 32px;
width: 54px;
z-index: 30;
}
#home-experience .earth-story__explore-heading {
left: 34px;
position: absolute;
top: 30px;
z-index: 30;
}
#home-experience .earth-story__explore-heading strong {
font-family: var(--display);
font-size: 16px;
font-weight: 400;
letter-spacing: .06em;
text-transform: uppercase;
}
#home-experience .earth-story.is-exploring .earth-story__copy,
#home-experience .earth-story.is-exploring .earth-story__metrics,
#home-experience .earth-story.is-exploring .earth-story__explore,
#home-experience .earth-story.is-exploring .proof-chapter {
opacity: 0;
pointer-events: none;
}
#home-experience .earth-story.is-exploring .earth-story__regions {
z-index: 30;
}
@media (max-width: 920px) {
#home-experience .proof-hero { height: 380svh; }
#home-experience .proof-hero__content {
bottom: auto;
left: 28px;
max-width: min(720px, calc(100vw - 56px));
top: clamp(160px, 21vh, 210px);
width: calc(100vw - 56px);
}
#home-experience .proof-hero__content h1 { font-size: clamp(70px, 13.2vw, 112px); }
#home-experience .proof-hero__content > p:not(.eyebrow) { max-width: 590px; }
#home-experience .avocado-bridge { max-width: none; }
#home-experience .system-story { height: 540svh; }
#home-experience .system-story__halo { height: 80vw; right: -18vw; top: 58%; width: 80vw; }
#home-experience .system-story__mark { left: 28px; top: 106px; }
#home-experience .system-story__intro { bottom: 112px; left: 28px; max-width: calc(100vw - 56px); }
#home-experience .system-story__active { left: 28px; top: 40%; }
#home-experience .system-story__active strong { font-size: clamp(58px, 12vw, 100px); }
#home-experience .system-story__capabilities { grid-template-columns: repeat(3, 1fr); left: 28px; right: 28px; }
#home-experience .system-story__drag { right: 30px; top: 22%; }
#home-experience .reasons-story { grid-template-columns: 1fr; }
#home-experience .earth-canvas {
bottom: 112px;
height: min(104vw, calc(100svh - 190px));
left: 52%;
transform: translateX(-50%) translateY(calc((1 - var(--earth-story)) * 8vh));
width: min(104vw, calc(100svh - 190px));
}
#home-experience .earth-story__copy { left: 28px; max-width: calc(100vw - 56px); top: 39%; }
#home-experience .earth-story__copy h2 { font-size: clamp(64px, 13vw, 104px); }
#home-experience .earth-story__copy > strong { font-size: clamp(154px, 33vw, 280px); }
#home-experience .earth-story__regions { right: 28px; top: 17%; }
#home-experience .earth-story__metrics { grid-template-columns: repeat(2, 1fr); left: 28px; max-width: 470px; }
#home-experience .earth-story__explore { bottom: 118px; right: 28px; }
}
@media (max-width: 620px) {
#home-experience .programs-intro { min-height: 66svh; padding: 120px 22px 78px; }
#home-experience .programs-intro h2 { font-size: 22vw; }
#home-experience .proof-hero { height: 360svh; }
#home-experience .proof-hero__film,
#home-experience .proof-hero__poster { object-position: 64% center; }
#home-experience .proof-hero__veil {
background:
linear-gradient(0deg, rgba(5, 15, 7, .88) 0%, rgba(5, 15, 7, .42) 50%, rgba(5, 15, 7, .12) 72%),
linear-gradient(90deg, rgba(5, 15, 7, .32), transparent 76%);
}
#home-experience .proof-hero__content {
bottom: auto;
left: 22px;
margin: 0;
max-width: calc(100vw - 44px);
top: clamp(146px, 19vh, 178px);
width: calc(100vw - 44px);
}
#home-experience .proof-hero__content h1 {
font-size: clamp(55px, 16.4vw, 74px);
letter-spacing: -.03em;
line-height: .82;
}
#home-experience .proof-hero__content > p:not(.eyebrow) {
font-size: 12px;
line-height: 1.58;
margin: 20px 0 21px .2em;
max-width: 355px;
}
#home-experience .proof-hero__content .button-row { gap: 9px; margin-left: .2em; max-width: 228px; }
#home-experience .proof-hero__content .button { padding: 13px 19px; }
#home-experience .scroll-cue { bottom: 18px; left: 22px; }
#home-experience .scroll-cue span { display: none; }
#home-experience .avocado-bridge { max-width: none; }
#home-experience .system-story { height: 500svh; }
#home-experience .system-story__halo { height: 118vw; right: -49vw; top: 58%; width: 118vw; }
#home-experience .system-story__mark { left: 22px; max-width: 52vw; top: 93px; }
#home-experience .system-story__intro { bottom: 142px; left: 22px; }
#home-experience .system-story__intro h2 { font-size: 47px; }
#home-experience .system-story__intro > p:not(.eyebrow) { display: block; font-size: 12px; line-height: 1.55; margin-top: 20px; }
#home-experience .system-story__active { left: 22px; top: 40%; z-index: 27; }
#home-experience .system-story__active strong { font-size: 18vw; }
#home-experience .system-story__capabilities { bottom: 18px; gap: 2px; left: 22px; right: 22px; }
#home-experience .system-story__capabilities button { font-size: 10px; padding-top: 9px; }
#home-experience .system-story__drag { display: none; }
#home-experience .reasons-story { gap: 74px; min-height: auto; padding: 120px 22px; }
#home-experience .reasons-story__heading h2 { font-size: 61px; }
#home-experience .reasons-story__lines > div { gap: 14px; grid-template-columns: 28px 1fr 16px; padding: 25px 0; }
#home-experience .reasons-story__lines p { font-size: 26px; }
#home-experience .earth-story { height: 480svh; }
#home-experience .earth-canvas {
bottom: 146px;
height: min(132vw, 520px);
left: 54%;
transform: translateX(-50%) translateY(calc((1 - var(--earth-story)) * 7vh));
width: min(132vw, 520px);
}
#home-experience .earth-story__copy { left: 22px; max-width: calc(100vw - 44px); top: 35%; }
#home-experience .earth-story__copy h2 { font-size: 58px; max-width: 340px; }
#home-experience .earth-story__copy > strong { font-size: 39vw; }
#home-experience .earth-story__copy > p:not(.eyebrow) { font-size: 13px; line-height: 1.55; margin-top: 18px; }
#home-experience .earth-story__regions { display: flex; flex-wrap: wrap; gap: 4px; left: 18px; right: 58px; top: 82px; }
#home-experience .earth-story__regions button { font-size: 8px; padding: 7px 9px; }
#home-experience .earth-story:not(.is-exploring) .earth-story__regions { opacity: 0; pointer-events: none; }
#home-experience .earth-story__tour-status {
backdrop-filter: blur(14px);
background: rgba(4, 12, 19, .68);
border: 1px solid rgba(255, 255, 255, .16);
bottom: 150px;
display: grid;
gap: 1px;
padding: 10px 13px;
position: absolute;
right: 22px;
text-align: right;
z-index: 9;
}
#home-experience .earth-story__tour-status span {
color: rgba(255, 255, 255, .52);
font-size: 7px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
}
#home-experience .earth-story__tour-status strong {
color: var(--lime);
font-family: var(--display);
font-size: 21px;
font-weight: 400;
letter-spacing: .02em;
text-transform: uppercase;
}
#home-experience .earth-story__metrics { bottom: 18px; grid-template-columns: repeat(2, 1fr); left: 22px; max-width: calc(100vw - 44px); }
#home-experience .earth-story__metrics span { font-size: 7px; padding: 8px 10px; }
#home-experience .earth-story__metrics strong { font-size: 19px; }
#home-experience .earth-story__explore { bottom: 168px; left: 22px; right: auto; }
#home-experience .earth-story__close { height: 46px; right: 18px; top: 82px; width: 46px; }
#home-experience .earth-story__explore-heading { left: 22px; top: 22px; }
}
@media (prefers-reduced-motion: reduce) {
#home-experience .proof-hero,
#home-experience .system-story,
#home-experience .earth-story { height: auto; }
#home-experience .proof-hero__sticky,
#home-experience .system-story__sticky,
#home-experience .earth-story__sticky { min-height: 100svh; position: relative; }
#home-experience .proof-hero__poster { display: block; }
#home-experience .proof-hero__film { display: none; }
#home-experience .proof-hero__veil { opacity: .72; }
#home-experience .proof-hero__content { opacity: 1; transform: none; }
#home-experience .proof-hero__green,
#home-experience .scroll-cue,
#home-experience .avocado-bridge,
#home-experience .system-story__exit { display: none; }
#home-experience .system-story__intro,
#home-experience .system-story__active { opacity: 1; transform: none; }
#home-experience .earth-story__copy { animation: none; }
#home-experience .earth-canvas { transform: translateX(-50%); }
}
#home-experience .globe-story {
--globe-story-progress: 0;
--globe-gutter: max(48px, calc((100% - 1440px) / 2));
color: #fff;
background: #060f14;
height: 340svh;
position: relative;
}
#home-experience .globe-story :is(h2, p, span, em, button, select, label, a, small) { letter-spacing: 0; }
#home-experience .globe-story__sticky {
position: sticky;
top: 0;
height: 100svh;
min-height: 600px;
overflow: clip;
isolation: isolate;
background: #060f14;
}
#home-experience .globe-story__sky, #home-experience .globe-story__veil { position: absolute; inset: 0; pointer-events: none; }
#home-experience .globe-story__sky { background: linear-gradient(140deg, #091921, #030a0e 75%); }
#home-experience .globe-story__veil { z-index: 3; background: linear-gradient(90deg, #060f14 0%, #060f14de 27%, transparent 60%); }
#home-experience .globe-story__earth {
position: absolute;
left: 73%;
top: 51%;
width: min(76vw, 110svh, 1180px);
aspect-ratio: 1;
transform: translate(-50%, -50%);
z-index: 2;
}
#home-experience .globe-story__earth canvas { width: 100%; height: 100%; }
#home-experience .globe-story__earth .network-globe__readout { display: none; }
#home-experience .globe-story__reading {
position: absolute;
z-index: 4;
left: var(--globe-gutter);
top: 48%;
transform: translateY(-50%);
width: min(540px, 46%);
}
#home-experience .globe-story__eyebrow {
color: #c0dc6d;
font: 600 12px/1.5 var(--body);
text-transform: uppercase;
margin: 0 0 24px;
}
#home-experience .globe-story__headline {
font-family: var(--display);
font-size: 72px;
font-weight: 400;
line-height: 1.14;
text-transform: uppercase;
margin: 0;
padding: 0;
}
#home-experience .globe-story__accessible-title {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
#home-experience .globe-story__reel {
display: block;
height: 2.4em;
overflow: hidden;
}
#home-experience .globe-story__reel-track {
display: block;
transition: transform 820ms cubic-bezier(.22, 1, .36, 1);
will-change: transform;
}
#home-experience .globe-story__reel-frame {
display: flex;
flex-direction: column;
justify-content: center;
height: 2.4em;
}
#home-experience .globe-story__reel-frame > span, #home-experience .globe-story__reel-frame > em { display: block; white-space: nowrap; }
#home-experience .globe-story__reel-frame em { font-style: normal; color: #b7df32; }
#home-experience .globe-story__copy-deck { display: grid; margin: 24px 0 28px; max-width: 440px; }
#home-experience .globe-story__panel {
grid-area: 1 / 1;
opacity: 0;
visibility: hidden;
transform: translateY(12px);
transition: opacity 360ms ease, transform 600ms cubic-bezier(.22, 1, .36, 1), visibility 360ms;
}
#home-experience .globe-story__panel.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 180ms; }
#home-experience .globe-story__panel p { color: #c4cdd1; font: 400 16px/1.75 var(--body); margin: 0; }
#home-experience .globe-story__panel .globe-story__origins { font-size: 18px; line-height: 1.9; color: #fff; }
#home-experience .globe-story__origins span { color: #b7df32; padding: 0 5px; }
#home-experience .globe-story__explore {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 24px;
width: max-content;
max-width: 100%;
min-height: 48px;
padding: 12px 0;
border: 0;
border-bottom: 1px solid #a5bb75;
border-radius: 0 !important;
background: transparent;
color: #fff;
font: 600 14px/1.5 var(--body);
text-align: left;
cursor: pointer;
}
#home-experience .globe-story__explore svg { flex: 0 0 auto; transition: transform 220ms ease; }
#home-experience .globe-story__explore:hover svg { transform: translate(3px, -3px); }
#home-experience .globe-story :is(button, select, a):focus-visible { outline: 2px solid #c0dc6d; outline-offset: 6px; }
#home-experience .globe-story__footer {
position: absolute;
z-index: 4;
left: var(--globe-gutter);
right: var(--globe-gutter);
bottom: 32px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
}
#home-experience .globe-story__progress { display: flex; align-items: center; gap: 14px; color: #e8edef; font: 500 12px/1 var(--body); }
#home-experience .globe-story__progress i { width: 112px; height: 1px; background: #ffffff30; position: relative; }
#home-experience .globe-story__progress b { position: absolute; inset: 0; background: #b7df32; transform: scaleX(var(--globe-story-progress)); transform-origin: left; }
#home-experience .globe-story__progress > span:last-child { color: #88989f; }
#home-experience .globe-story__map-note { font: 400 11px/1.5 var(--body); color: #93a4ad; text-align: right; max-width: 280px; }
#home-experience .globe-story.is-exploring .globe-story__sticky { position: fixed; inset: 0; height: 100dvh; width: 100%; z-index: 100002; }
#home-experience .globe-story.is-exploring :is(.globe-story__reading, .globe-story__footer) { opacity: 0; pointer-events: none; }
#home-experience .globe-story.is-exploring .globe-story__earth { left: 66%; top: 50%; width: min(90vw, 110svh, 1180px); }
#home-experience .globe-story.is-exploring .globe-story__earth canvas { cursor: grab; }
#home-experience .globe-story.is-exploring .globe-story__earth canvas:active { cursor: grabbing; }
#home-experience .globe-story.is-exploring .globe-story__veil { background: linear-gradient(90deg, #060f14 0%, #060f14bd 24%, transparent 57%); }
#home-experience .globe-explorer { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
#home-experience .globe-explorer__header {
position: absolute;
left: var(--globe-gutter);
right: var(--globe-gutter);
top: 28px;
display: flex;
align-items: center;
justify-content: space-between;
}
#home-experience .globe-explorer__header > span { color: #d7e0e4; font: 500 13px/1.5 var(--body); }
#home-experience .globe-explorer__close {
display: grid;
place-items: center;
width: 48px;
height: 48px;
padding: 0;
background: transparent;
color: #fff;
border: 1px solid #ffffff50;
border-radius: 50%;
cursor: pointer;
pointer-events: auto;
}
#home-experience .globe-explorer__panel {
position: absolute;
left: var(--globe-gutter);
top: 50%;
transform: translateY(-50%);
width: min(352px, 32%);
max-height: calc(100svh - 180px);
overflow: auto;
pointer-events: auto;
padding: 8px;
margin-left: -8px;
}
#home-experience .globe-explorer__panel label { display: block; color: #aebfc7; font: 500 12px/1.5 var(--body); margin-bottom: 8px; }
#home-experience .globe-explorer__panel select {
display: block;
appearance: auto;
width: 100%;
min-height: 48px;
padding: 12px 36px 12px 12px;
color: #fff;
background: #142831;
border: 1px solid #51666f;
font: 500 15px/1.5 var(--body);
margin-bottom: 32px;
}
#home-experience .globe-explorer__panel option, #home-experience .globe-explorer__panel optgroup { background: #142831; color: #fff; }
#home-experience .globe-explorer__panel .globe-explorer__category { color: #c0dc6d; font: 500 11px/1.5 var(--body); text-transform: uppercase; margin: 0 0 12px; }
#home-experience .globe-explorer__panel h2 { font: 400 48px/1.15 var(--display); text-transform: uppercase; margin: 0 0 20px; overflow-wrap: anywhere; }
#home-experience .globe-explorer__panel p { font: 400 15px/1.7 var(--body); color: #d0d9dd; margin: 0 0 20px; }
#home-experience .globe-explorer__panel a { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: #c0dc6d; font: 600 14px/1.5 var(--body); text-decoration: underline; text-underline-offset: 5px; }
#home-experience .globe-explorer__panel small { display: block; font: 400 12px/1.6 var(--body); color: #93a4ad; margin-top: 16px; }
@media (min-width: 1700px) {
#home-experience .globe-story__reading { width: 610px; }
#home-experience .globe-story__headline { font-size: 80px; }
}
@media (max-width: 1150px) {
#home-experience .globe-story { --globe-gutter: 32px; }
#home-experience .globe-story__headline { font-size: 60px; }
#home-experience .globe-story__panel p { font-size: 15px; }
}
@media (max-width: 700px) {
#home-experience .globe-story { --globe-gutter: 24px; height: 320svh; }
#home-experience .globe-story__sticky { min-height: 680px; }
#home-experience .globe-story__reading { top: 68px; transform: none; width: calc(100% - 48px); }
#home-experience .globe-story__eyebrow { margin-bottom: 16px; font-size: 11px; }
#home-experience .globe-story__headline { font-size: 40px; }
#home-experience .globe-story__copy-deck { margin: 20px 0; max-width: 390px; }
#home-experience .globe-story__panel p { font-size: 14px; line-height: 1.65; }
#home-experience .globe-story__panel .globe-story__origins { font-size: 16px; line-height: 1.8; }
#home-experience .globe-story__explore { font-size: 12px; min-height: 44px; }
#home-experience .globe-story__earth { left: 60%; top: 76%; width: min(112vw, 55svh); }
#home-experience .globe-story__veil { background: linear-gradient(180deg, #060f14 0%, #060f14da 36%, transparent 63%); }
#home-experience .globe-story__footer { bottom: 20px; gap: 20px; }
#home-experience .globe-story__progress { gap: 8px; font-size: 10px; }
#home-experience .globe-story__progress i { width: 64px; }
#home-experience .globe-story__map-note { max-width: 160px; font-size: 10px; }
#home-experience .globe-story.is-exploring .globe-story__earth { left: 50%; top: 33%; width: min(116vw, 62svh); }
#home-experience .globe-story.is-exploring .globe-story__veil { background: linear-gradient(0deg, #060f14 0%, #060f14e6 28%, transparent 60%); }
#home-experience .globe-explorer__header { top: 16px; }
#home-experience .globe-explorer__panel {
top: auto;
bottom: 20px;
transform: none;
width: calc(100% - 48px);
max-height: 43svh;
}
#home-experience .globe-explorer__panel select { margin-bottom: 20px; font-size: 14px; }
#home-experience .globe-explorer__panel h2 { font-size: 32px; margin-bottom: 12px; }
#home-experience .globe-explorer__panel p { font-size: 13px; line-height: 1.6; margin-bottom: 8px; }
#home-experience .globe-explorer__panel .globe-explorer__category { font-size: 10px; margin-bottom: 6px; }
#home-experience .globe-explorer__panel small { font-size: 10px; }
}
@media (max-height: 740px) and (min-width: 701px) {
#home-experience .globe-story__headline { font-size: 56px; }
#home-experience .globe-story__eyebrow { margin-bottom: 16px; }
#home-experience .globe-story__copy-deck { margin: 16px 0; }
}
@media (max-width: 700px) and (max-height: 780px) {
#home-experience .globe-story__reading { top: 64px; }
#home-experience .globe-story__eyebrow { margin-bottom: 12px; }
#home-experience .globe-story__copy-deck { margin: 16px 0; }
#home-experience .globe-story__earth { width: min(108vw, 50svh); }
}
@media (prefers-reduced-motion: reduce) {
#home-experience .globe-story { height: auto; min-height: 100svh; }
#home-experience .globe-story__sticky { position: relative; }
#home-experience .globe-story__footer { display: none; }
#home-experience .globe-story :is(.globe-story__reel-track, .globe-story__panel, .globe-story__explore svg) { transition: none; }
}
#home-experience .network-globe {
--network-globe-progress: 0;
contain: layout paint style;
isolation: isolate;
}
#home-experience .network-globe canvas {
display: block;
outline: none;
}
#home-experience .network-globe.is-expanded:focus-visible {
outline: 2px solid var(--lime, #b7e000);
outline-offset: -6px;
}
#home-experience .network-globe__readout {
bottom: clamp(24px, 4vw, 52px);
color: rgba(255, 255, 255, 0.68);
display: grid;
gap: 2px;
opacity: 0.82;
pointer-events: none;
position: absolute;
right: clamp(24px, 5vw, 76px);
text-align: right;
transform: translateY(0);
transition: opacity 420ms ease, transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
z-index: 2;
}
#home-experience .network-globe.is-expanded .network-globe__readout {
opacity: 1;
transform: translateY(0);
}
#home-experience .network-globe__readout span,
#home-experience .network-globe__readout small {
font-family: var(--body, sans-serif);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.13em;
text-transform: uppercase;
}
#home-experience .network-globe__readout strong {
color: var(--white, #fff);
font-family: var(--display, sans-serif);
font-size: clamp(32px, 4vw, 64px);
font-weight: 400;
letter-spacing: -0.025em;
line-height: 0.95;
text-transform: uppercase;
}
#home-experience .network-globe__readout small {
color: var(--lime, #b7e000);
}
#home-experience .network-globe__announcement {
border: 0;
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
}
#home-experience .network-globe[data-failed="true"]::before {
background:
radial-gradient(circle at 36% 32%, rgba(131, 181, 207, 0.36), transparent 18%),
radial-gradient(circle at 50% 50%, #173a51 0 47%, #0b2332 48% 52%, transparent 53%);
border-radius: 50%;
content: "";
height: min(56vw, 590px);
left: 50%;
opacity: 0.72;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: min(56vw, 590px);
}
@media (max-width: 620px) {
#home-experience .network-globe__readout {
bottom: 24px;
right: 22px;
}
#home-experience .network-globe__readout strong {
font-size: 34px;
}
#home-experience .network-globe[data-failed="true"]::before {
height: 72vw;
width: 72vw;
}
}
@media (prefers-reduced-motion: reduce) {
#home-experience .network-globe__readout {
transition: none;
}
}
/* The public WordPress shell owns navigation and footer. Scope the experience. */
html:has(body.wpr06-home).cinematic-scroll-sync { scroll-behavior:auto!important; }
body.wpr06-home.earth-is-open { overflow:hidden!important; }
html:has(body.wpr06-home) { overflow-x:clip!important; overflow-y:auto!important; }
body.wpr06-home { overflow:visible!important; }
body.wpr06-home #ajax-content-wrap { overflow:visible!important; }
body.wpr06-home .container-wrap:has(#cinematic-root) { overflow:visible!important; padding-top:0!important; }
#cinematic-root { width:100%; position:relative; }
#home-experience { --display:Antonio,'Arial Narrow',sans-serif; --body:'Open Sans',sans-serif; font-family:var(--body); font-size:16px; line-height:1.65; color:var(--ink); min-width:0; overflow:clip; }
#home-experience h1,#home-experience h2,#home-experience h3 { font-family:var(--display); }
#home-experience h1 *,#home-experience h2 *,#home-experience h3 * { font-family:inherit; }
#home-experience .button { font-family:var(--body); }
#home-experience p { padding-bottom:0; }
body.wpr06-home:has(.avocado-bridge[data-ready="true"]) #home-experience .system-story__fruit-fallback { visibility:hidden; }
#home-experience .system-story__active strong { max-width:22ch; font-size:clamp(24px,3.2vw,54px); }
#home-experience .system-story__capabilities button { max-width:26ch; text-align:left; }
#home-experience .system-story__capabilities button { border-radius:0!important; }
#home-experience .globe-story__proof strong { font-size:clamp(22px,3vw,48px); }
#home-experience .globe-explorer__panel small { display:block; margin-top:16px; line-height:1.5; }
#home-experience .product-picker { scrollbar-width:thin; }
#home-experience .product-stage__visual>img:not(.product-stage__avocado) { object-fit:contain; }
#home-experience .program-selector button { color:inherit; }
@media(max-width:999px) {
#home-experience .system-story__capabilities { max-height:44vh; overflow-y:auto; }
#home-experience .system-story__capabilities button { max-width:none; }
#home-experience .system-story__active strong { font-size:24px; }
#home-experience .product-picker { justify-content:flex-start; }
}
@media(max-width:620px) {
#home-experience .system-story__intro { bottom:158px; }
#home-experience .system-story__intro h2 { font-size:40px; }
#home-experience .system-story__active { top:27%; max-width:46%; }
#home-experience .system-story__active strong { font-size:24px; }
}
@media(prefers-reduced-motion:reduce) {
#home-experience [data-reveal] { opacity:1!important; transform:none!important; }
#home-experience .proof-hero__content { opacity:1!important; transform:none!important; }
}
#home-experience .avocado-bridge__fallback { width:100%; height:100%; object-fit:contain; }
#home-experience .avocado-bridge:not([data-failed="true"]) .avocado-bridge__fallback { display:none; }
/* HM-07 hardening: a failed film no longer collapses the hero to 100svh (that moved the whole
page by ~3 viewports under a reader who was already scrolling); the hero keeps its height and
the film stills follow the scroll position instead (home-r03.css, presync.inline.js). */
html:has(body.wpr06-home.earth-is-open),body.wpr06-home.earth-is-open { overflow:hidden!important; }
#home-experience .system-story {
height: auto;
background: var(--avo360-field);
}
#home-experience .system-story__sticky {
position: relative;
height: auto;
min-height: 0;
overflow: visible;
background: var(--avo360-field);
}
#home-experience .system-story__layout {
box-sizing: border-box;
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(260px, .7fr);
grid-template-rows: auto auto auto;
column-gap: 64px;
row-gap: 0;
align-content: center;
min-height: 100svh;
width: 100%;
max-width: 1440px;
margin: 0 auto;
padding: 64px max(40px, 6vw);
color: #fff;
}
#home-experience .system-story__heading {
grid-column: 1;
grid-row: 1;
align-self: end;
min-width: 0;
}
#home-experience .system-story__mark {
position: static;
display: block;
width: 158px;
height: auto;
max-width: 100%;
margin: 0 0 24px;
opacity: 1;
filter: brightness(0) invert(1);
}
#home-experience .system-story__heading h2 {
max-width: 650px;
margin: 0;
font-family: var(--display);
font-size: 56px;
font-weight: 400;
line-height: 1.12;
letter-spacing: 0;
text-transform: uppercase;
}
#home-experience .system-story__visual {
grid-column: 2;
grid-row: 1 / 3;
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
position: relative;
}
#home-experience .system-story__fruit-anchor {
position: relative;
width: min(100%, 320px);
height: 320px;
flex: none;
}
#home-experience .system-story__fruit-fallback {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
#home-experience .avocado-bridge[data-failed="true"] { visibility: hidden; }
#home-experience .system-story__summary {
grid-column: 1;
grid-row: 2;
align-self: start;
max-width: 55ch;
margin: 26px 0 0;
padding: 0;
font-family: var(--body);
font-size: 16px;
line-height: 1.7;
letter-spacing: 0;
color: #edf2e8;
}
#home-experience .system-story__capabilities {
position: static;
grid-column: 1 / -1;
grid-row: 3;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: 30px;
row-gap: 0;
max-height: none;
margin: 40px 0 0;
overflow: visible;
}
#home-experience .system-story__capabilities > a {
box-sizing: border-box;
display: grid;
grid-template-columns: 26px minmax(0, 1fr) 19px;
align-items: center;
gap: 12px;
min-height: 72px;
padding: 16px 0;
border-top: 1px solid rgba(255, 255, 255, .35);
color: #fff;
text-decoration: none;
cursor: pointer;
transition: border-color 180ms ease, color 180ms ease;
}
#home-experience .system-story__capabilities > a > span {
align-self: start;
padding-top: 3px;
color: #d1e6a4;
font: 600 11px/1.5 var(--body);
letter-spacing: 0;
}
#home-experience .system-story__capabilities strong {
font: 600 15px/1.4 var(--body);
letter-spacing: 0;
}
#home-experience .system-story__capabilities svg {
justify-self: end;
color: #c6e768;
transition: transform 180ms ease;
}
#home-experience .system-story__capabilities a:hover,
#home-experience .system-story__capabilities a:focus-visible {
border-top-color: #c6e768;
color: #eaf4d1;
}
#home-experience .system-story__capabilities a:hover svg,
#home-experience .system-story__capabilities a:focus-visible svg { transform: translateX(3px); }
#home-experience .system-story__capabilities a:focus-visible {
outline: 2px solid #c6e768;
outline-offset: 4px;
}
#home-experience .system-story__services-heading {
grid-column: 1 / -1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
margin-bottom: 16px;
}
#home-experience .system-story__services-heading h3 {
margin: 0;
font: 600 14px/1.5 var(--body);
letter-spacing: 0;
}
#home-experience .system-story__page-link {
display: inline-flex;
align-items: center;
gap: 12px;
min-height: 44px;
font: 600 13px/1.5 var(--body);
color: #eaf4d1;
text-decoration: underline;
text-underline-offset: 5px;
}
#home-experience .proof-hero__green { opacity: clamp(0, calc(var(--hero-handoff) * 1.25), 1); }
#home-experience .proof-hero__avo-preview {
opacity: clamp(0, calc((var(--hero-handoff) - .4) / .6), 1);
transform: translateY(calc((1 - var(--hero-handoff)) * 16px + var(--hero-entry-offset, 0px)));
}
@media (max-width: 1100px) and (min-width: 701px) {
#home-experience .system-story__layout {
grid-template-columns: minmax(0, 1.2fr) minmax(220px, .8fr);
column-gap: 32px;
padding: 64px 40px 68px;
}
#home-experience .system-story__heading h2 { font-size: 49px; }
#home-experience .system-story__fruit-anchor { width: min(100%, 270px); height: 290px; }
#home-experience .system-story__capabilities { column-gap: 20px; margin-top: 48px; }
#home-experience .system-story__capabilities strong { font-size: 14px; }
}
@media (max-width: 700px) {
#home-experience .system-story__layout {
grid-template-columns: minmax(0, 1fr) 116px;
grid-template-rows: 116px auto auto auto;
column-gap: 12px;
padding: 40px 24px 48px;
}
#home-experience .system-story__heading { display: contents; }
#home-experience .system-story__mark {
grid-column: 1;
grid-row: 1;
align-self: center;
width: 124px;
margin: 0;
}
#home-experience .system-story__visual {
grid-column: 2;
grid-row: 1;
align-self: center;
justify-self: end;
}
#home-experience .system-story__fruit-anchor { width: 116px; height: 116px; }
#home-experience .system-story__heading h2 {
grid-column: 1 / -1;
grid-row: 2;
font-size: 38px;
line-height: 1.12;
margin: 18px 0 0;
}
#home-experience .system-story__summary {
grid-column: 1 / -1;
grid-row: 3;
max-width: 58ch;
margin: 20px 0 0;
font-size: 15px;
line-height: 1.65;
}
#home-experience .system-story__capabilities {
grid-column: 1 / -1;
grid-row: 4;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 20px;
margin: 28px 0 0;
max-height: none;
overflow: visible;
}
#home-experience .system-story__capabilities > a { grid-template-columns: minmax(0, 1fr) 16px; gap: 8px; min-height: 80px; padding: 12px 0; }
#home-experience .system-story__capabilities > a > span { display: none; }
#home-experience .system-story__capabilities strong { font-size: 14px; }
#home-experience .system-story__capabilities svg { width: 16px; }
#home-experience .system-story__services-heading { gap: 12px; margin-bottom: 8px; }
#home-experience .system-story__services-heading h3 { font-size: 12px; }
#home-experience .system-story__page-link { font-size: 12px; gap: 8px; }
}
@media (max-width: 370px) {
#home-experience .system-story__layout {
grid-template-columns: minmax(0, 1fr) 116px;
grid-template-rows: 112px auto auto auto;
padding-inline: 20px;
}
#home-experience .system-story__mark { width: 124px; }
#home-experience .system-story__fruit-anchor { width: 112px; height: 112px; }
#home-experience .system-story__heading h2 { font-size: 36px; }
}
@media (prefers-reduced-motion: reduce) {
#home-experience .system-story__fruit-fallback { visibility: visible !important; }
#home-experience .system-story__capabilities a,
#home-experience .system-story__capabilities svg { transition: none; }
}
/* Scope to the unpinned Home bands; the build supplies the experience prefix. */
#home-experience :is(.programs-intro, .colombia-feature, .organics, .products, .ripening-section, .resources, .explore, .final-cta) {
--home-band: 80px;
--home-gutter: max(48px, calc((100% - 1280px) / 2));
min-height: 0;
}
#home-experience :is(.programs-intro, .colombia-feature, .organics, .products, .ripening-section, .resources, .explore, .final-cta) :is(h2, h3, p) {
letter-spacing: 0;
}
#home-experience :is(.programs-intro, .colombia-feature, .organics, .products, .ripening-section, .resources, .explore, .final-cta) .eyebrow {
margin: 0 0 20px;
font-family: var(--body);
font-size: 12px;
font-weight: 700;
line-height: 1.5;
letter-spacing: 0;
gap: 12px;
}
#home-experience :is(.programs-intro, .colombia-feature, .organics, .products, .ripening-section, .resources, .explore, .final-cta) h2 {
margin: 0;
font-size: 64px;
line-height: 1.08;
letter-spacing: 0;
}
#home-experience :is(.colombia-feature__content, .organics__content, .ripening-section__content, .final-cta__content, .product-stage__copy) > p:not(.eyebrow), #home-experience .products__top > p {
margin: 24px 0;
max-width: 54ch;
font-size: 16px;
line-height: 1.7;
}
#home-experience :is(.colombia-feature, .organics, .products.section, .ripening-section, .final-cta) :is(.button, .text-link) {
min-height: 48px;
max-width: 100%;
letter-spacing: 0;
white-space: normal;
line-height: 1.5;
}
#home-experience .programs-intro {
display: block;
padding: 64px var(--home-gutter);
}
#home-experience .programs-intro h2 { font-size: 80px; line-height: 1.08; }
#home-experience .programs-intro h2 span { display: inline; }
#home-experience .colombia-feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
#home-experience .colombia-feature__photo { min-height: 0; }
#home-experience .colombia-feature__photo img { position: absolute; inset: 0; }
#home-experience .colombia-feature__content { min-width: 0; max-width: none; padding: var(--home-band) 64px; }
#home-experience .colombia-feature__content h2 { font-size: 56px; }
#home-experience .colombia-feature__content h3 {
margin: 24px 0;
font-family: var(--body);
font-size: 18px;
font-weight: 600;
line-height: 1.6;
text-transform: none;
}
#home-experience .colombia-feature__content .text-link { margin-top: 0; }
#home-experience .colombia-feature__tag { bottom: 32px; left: 32px; letter-spacing: 0; }
#home-experience .colombia-feature__cutout { left: 22%; bottom: 0; width: 26%; max-height: 320px; }
#home-experience .organics {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: center;
gap: 48px;
padding: var(--home-band) var(--home-gutter);
}
#home-experience .organics__content { min-width: 0; max-width: 600px; padding: 0; }
#home-experience .organics__bags {
grid-column: 2;
grid-row: 1;
position: relative;
bottom: auto;
right: auto;
width: 100%;
height: 480px;
max-height: none;
margin: 0;
}
#home-experience :is(.products.section, .resources.section, .explore.section) { padding: var(--home-band) var(--home-gutter); }
#home-experience :is(.products, .resources) > .section-number { top: 24px; left: var(--home-gutter); letter-spacing: 0; }
#home-experience .products__top { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 48px; margin-bottom: 40px; }
#home-experience .products__top > p { margin: 0; }
#home-experience .product-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 220px; min-height: 520px; gap: 24px; padding: 64px 32px 32px; border-radius: 8px; }
#home-experience .product-stage__numbers { top: 24px; left: 32px; letter-spacing: 0; }
#home-experience .product-stage__copy { min-width: 0; padding: 0; }
#home-experience .product-stage__copy h3 { margin: 0; font-size: 44px; line-height: 1.12; }
#home-experience .product-stage__visual { min-width: 0; min-height: 0; height: 400px; }
#home-experience .product-stage__visual > img:not(.product-stage__avocado) { width: 100%; height: 380px; max-height: 380px; }
#home-experience .product-stage__halo { width: 240px; height: 240px; }
#home-experience .product-stage__avocado { height: 160px; width: 104px; right: 0; bottom: -16px; }
#home-experience .product-picker { min-width: 0; padding-left: 24px; }
#home-experience .product-picker button { min-height: 48px; padding: 12px 0; color: rgba(255, 255, 255, .72); font-size: 16px; line-height: 1.4; letter-spacing: 0; }
#home-experience .ripening-section { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
#home-experience .ripening-section__photo { min-height: 0; }
#home-experience .ripening-section__photo > img { position: absolute; inset: 0; }
#home-experience .ripening-section__content { min-width: 0; max-width: none; padding: var(--home-band) 64px; }
#home-experience .ripening-section h2 { font-size: 56px; }
#home-experience .program-selector { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#home-experience .program-selector button { min-width: 0; min-height: 80px; padding: 12px 8px; border-radius: 0 !important; font-size: 16px; line-height: 1.4; letter-spacing: 0; }
#home-experience .program-detail { margin: 24px 0; min-height: 168px; padding: 20px 24px; }
#home-experience .program-detail h3 { margin: 0 0 12px; font-size: 24px; line-height: 1.25; }
#home-experience .program-detail p { margin: 0; font-size: 15px; line-height: 1.7; }
#home-experience .ripening-section__readout { left: 32px; bottom: 32px; letter-spacing: 0; }
#home-experience :is(.resources__heading, .explore__heading) { margin-bottom: 40px; }
#home-experience .resource-grid { gap: 24px; }
#home-experience .resource-card { min-height: 360px; border-radius: 8px; }
#home-experience .explore-grid { gap: 24px; }
#home-experience .explore-card { min-height: 400px; }
#home-experience :is(.resource-card, .explore-card) h3 { right: 88px; left: 24px; bottom: 28px; font-size: 36px; line-height: 1.12; }
#home-experience :is(.resource-card__number, .explore-card__number) { left: 24px; top: 24px; letter-spacing: 0; }
#home-experience .final-cta { padding: 96px var(--home-gutter); }
#home-experience .final-cta h2 { font-size: 80px; }
#home-experience .final-cta__content { width: 60%; max-width: 720px; }
#home-experience .final-cta__avocado { width: 32%; height: 480px; bottom: -80px; right: 32px; }
@media (max-width: 1100px) {
#home-experience :is(.programs-intro, .colombia-feature, .organics, .products, .ripening-section, .resources, .explore, .final-cta) { --home-band: 64px; --home-gutter: 32px; }
#home-experience :is(.colombia-feature__content, .ripening-section__content) { padding: var(--home-band) 32px; }
#home-experience :is(.colombia-feature__content, .ripening-section__content) h2 { font-size: 48px; }
#home-experience .product-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
#home-experience .product-picker { grid-column: 1 / -1; flex-direction: row; gap: 24px; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .16); padding: 16px 0 0; overflow-x: auto; }
#home-experience .product-picker button { flex: 0 0 160px; }
}
@media (max-width: 920px) {
#home-experience .colombia-feature, #home-experience .ripening-section { grid-template-columns: minmax(0, 1fr); }
#home-experience .colombia-feature__photo, #home-experience .ripening-section__photo { height: 360px; }
#home-experience .colombia-feature__cutout { display: none; }
#home-experience .organics { grid-template-columns: minmax(0, 1fr); gap: 32px; }
#home-experience .organics__content { max-width: 620px; }
#home-experience .organics__bags { grid-column: 1; grid-row: 2; height: 360px; max-width: 460px; justify-self: end; }
#home-experience .organics__image { top: auto; height: 440px; }
#home-experience .resource-grid, #home-experience .explore-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
#home-experience .resource-card:first-child { grid-column: auto; }
#home-experience .resource-card, #home-experience .explore-card { min-height: 320px; }
#home-experience :is(.resource-card, .explore-card) h3 { right: 16px; left: 16px; bottom: 88px; font-size: 28px; }
#home-experience .final-cta__content { width: 70%; }
}
@media (max-width: 620px) {
#home-experience :is(.programs-intro, .colombia-feature, .organics, .products, .ripening-section, .resources, .explore, .final-cta) { --home-band: 56px; --home-gutter: 22px; }
#home-experience :is(.programs-intro, .colombia-feature, .organics, .products, .ripening-section, .resources, .explore, .final-cta) h2 { font-size: 40px; line-height: 1.12; }
#home-experience :is(.programs-intro, .colombia-feature, .organics, .products, .ripening-section, .resources, .explore, .final-cta) .eyebrow { margin-bottom: 16px; font-size: 11px; }
#home-experience :is(.colombia-feature__content, .organics__content, .ripening-section__content, .final-cta__content, .product-stage__copy) > p:not(.eyebrow), #home-experience .products__top > p { margin: 20px 0; font-size: 15px; line-height: 1.7; }
#home-experience .programs-intro { padding-block: 48px; }
#home-experience .programs-intro h2 span { display: block; }
#home-experience .colombia-feature__photo, #home-experience .ripening-section__photo { height: 240px; }
#home-experience :is(.colombia-feature__content, .ripening-section__content) { padding: 40px var(--home-gutter) var(--home-band); }
#home-experience .colombia-feature__content h3 { margin: 20px 0; font-size: 16px; line-height: 1.6; }
#home-experience .colombia-feature__tag { left: 22px; bottom: 24px; font-size: 14px; }
#home-experience .organics { gap: 24px; padding-bottom: 32px; }
#home-experience .organics__bags { height: 280px; max-width: 320px; }
#home-experience .organics__image { height: 340px; }
#home-experience .products__top { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-bottom: 32px; }
#home-experience .products__top > p { margin: 0; }
#home-experience .product-stage { min-height: 0; gap: 24px; padding: 48px 20px 24px; }
#home-experience .product-stage__numbers { left: 20px; top: 20px; }
#home-experience .product-stage__copy { display: flex; flex-direction: column; min-height: 376px; }
#home-experience .product-stage__copy .text-link { margin-top: auto; }
#home-experience .product-stage__copy h3 { font-size: 36px; }
#home-experience .product-stage__visual { height: 244px; }
#home-experience .product-stage__visual > img:not(.product-stage__avocado) { height: 226px; max-height: 226px; }
#home-experience .product-stage__halo { height: 198px; width: 198px; }
#home-experience .product-stage__avocado { height: 112px; width: 78px; right: 0; bottom: -16px; }
#home-experience .product-picker { gap: 12px; scroll-snap-type: x proximity; }
#home-experience .product-picker button { flex-basis: 120px; scroll-snap-align: start; }
#home-experience .program-selector button { min-height: 80px; font-size: 14px; }
#home-experience .program-selector button + button { border-top: 0; border-left: 1px solid rgba(43, 66, 22, .18); }
#home-experience .program-selector button::after { top: auto; bottom: -1px; left: 8px; right: 8px; width: auto; height: 3px; transform: scaleX(0); }
#home-experience .program-selector button.is-active::after { transform: scaleX(1); }
#home-experience .program-detail { min-height: 188px; padding: 20px; }
#home-experience .ripening-section__readout { left: 22px; bottom: 24px; font-size: 16px; }
#home-experience :is(.resources__heading, .explore__heading) { margin-bottom: 32px; }
#home-experience .resource-grid, #home-experience .explore-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
#home-experience .resource-card { min-height: 240px; }
#home-experience .explore-card { min-height: 220px; }
#home-experience :is(.resource-card, .explore-card) h3 { bottom: 28px; left: 24px; right: 88px; font-size: 32px; }
#home-experience .final-cta { padding-block: 64px; }
#home-experience .final-cta h2 { font-size: 52px; }
#home-experience .final-cta__content { width: 100%; }
}
@media (max-width: 380px) {
#home-experience :is(.programs-intro, .colombia-feature, .organics, .products, .ripening-section, .resources, .explore) h2 { font-size: 36px; }
#home-experience .product-stage__copy h3 { font-size: 32px; }
}
body.wpr06-home #home-experience section[tabindex="-1"]:focus { outline: none; }
@media (min-width: 1000px) {
}
@media (max-width: 999px) {
}
@media (prefers-reduced-motion: reduce) {
}
/* The section consumes native page scroll. Sticky releases when this section ends. */
#home-experience .system-story {
position: relative;
isolation: isolate;
}
#home-experience .system-story__sticky::before {
background-image: linear-gradient(rgba(30, 69, 42, .46), rgba(22, 59, 34, .58)),
url("https://imagedelivery.net/zXebLwufc8AGAQU5E9oXHw/westpak-preview/r06/attachment-543-09b48226472d7713/w=1200,quality=75");
background-position: center;
background-size: cover;
content: "";
filter: grayscale(.45) saturate(.65);
inset: 0;
opacity: .24;
pointer-events: none;
position: absolute;
z-index: 0;
}
#home-experience .system-story__layout { position: relative; z-index: 1; }
#home-experience .system-story.is-avo-ready { height: 620svh; }
#home-experience .system-story.is-avo-ready .system-story__sticky {
height: 100svh;
min-height: 0;
overflow: clip;
position: sticky;
top: 0;
}
#home-experience .system-story.is-avo-ready .system-story__layout {
height: 100%;
min-height: 0;
padding-block: 38px;
}
#home-experience .system-story.is-avo-ready .system-story__capabilities { margin-top: 18px; }
#home-experience .system-story.is-avo-ready .system-story__capabilities > a {
min-height: 56px;
opacity: .62;
transition: border-color .25s ease, color .25s ease, opacity .25s ease;
}
#home-experience .system-story.is-avo-ready .system-story__capabilities > a.is-avo-active {
border-top-color: #c6e768;
color: #fff;
opacity: 1;
}
#home-experience .system-story.is-avo-ready .system-story__services-heading { margin-bottom: 8px; }
#home-experience .system-story.is-avo-ready .system-story__services-heading h3 { color: #d9ed96; }
@media (max-width: 700px) {
#home-experience .system-story.is-avo-ready .system-story__layout {
grid-template-columns: minmax(0, 1fr) 160px;
grid-template-rows: 160px auto auto auto;
padding: 24px 24px 20px;
}
#home-experience .system-story.is-avo-ready .system-story__fruit-anchor {
height: 160px; width: 160px;
}
#home-experience .system-story.is-avo-ready .system-story__heading h2 {
font-size: 34px; line-height: 1.08; margin-top: 8px;
}
#home-experience .system-story.is-avo-ready .system-story__summary {
font-size: 13px; line-height: 1.48; margin-top: 10px;
}
#home-experience .system-story.is-avo-ready .system-story__capabilities { margin-top: 15px; }
#home-experience .system-story.is-avo-ready .system-story__capabilities > a {
min-height: 49px; padding: 7px 0;
}
#home-experience .system-story.is-avo-ready .system-story__capabilities strong { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
#home-experience .system-story.is-avo-ready { height: auto; }
#home-experience .system-story.is-avo-ready .system-story__sticky {
height: auto; min-height: 0; overflow: visible; position: relative;
}
#home-experience .system-story.is-avo-ready .system-story__layout {
height: auto; min-height: 100svh;
}
}
/* Home handoff: one continuous AVO field beneath the existing film surface.
Geometry, layout and interaction are unchanged; the class follows progress. */
body.wpr06-home #home-experience.simple-handoff-blend {
background: var(--a2-scene, #19362f) !important;
}
body.wpr06-home #home-experience.simple-handoff-blend .system-story,
body.wpr06-home #home-experience.simple-handoff-blend .system-story__sticky {
background: transparent !important;
}
/* Use the real AVO composition at its final position while scroll catches up.
It rejoins native sticky flow at section.top=0; no clone or layout change. */
body.wpr06-home #home-experience.simple-handoff-blend .system-story__sticky {
position: fixed !important;
inset: 0 !important;
width: 100% !important;
opacity: var(--simple-avo-reveal, 0);
pointer-events: none;
}
/* Source: assets/r06-1b4b1f164146cb864c00/hscroll/home-hscroll1.css */
/* Bound the decorative scenes at their own sections, without changing film or scroll state. */
#home-experience .proof-hero__sticky,
#home-experience .organics,
#home-experience .globe-story__sticky,
#home-experience .products {
overflow: hidden;
}
@supports (overflow: clip) {
#home-experience .proof-hero__sticky,
#home-experience .organics,
#home-experience .globe-story__sticky,
#home-experience .products {
overflow: clip;
}
}
@media (max-width: 700px) {
/* Salient gives these full-width backgrounds an inline viewport + 2px width. */
body.wpr06-home .full-width-section > .row-bg-wrap {
width: 100vw !important;
left: 50% !important;
right: auto !important;
margin-left: -50vw !important;
}
#home-experience .proof-hero__flight-media {
width: 100%;
max-width: 100%;
transform: translateZ(0);
}
#home-experience .organics__image { right: 0; }
#home-experience .globe-story__earth {
left: 55%;
width: min(90vw, 55svh);
}
#home-experience .globe-story.is-exploring .globe-story__earth {
left: 50%;
width: min(100vw, 62svh);
}
}
/* Source: assets/r06-1b4b1f164146cb864c00/cinematic/globe-layout.css */
/* Home globe: one beat rail and a legend outside the globe artwork. */
#home-experience .feedback-story-steps { display: none !important; }
@media (min-width: 701px) {
#home-experience .globe-story__reading {
left: var(--globe-gutter);
width: min(440px, 42%);
}
#home-experience .globe-story__earth {
left: 72%;
top: 47%;
width: min(58vw, calc(100svh - 170px), 800px);
}
#home-experience .feedback-map-key,
#home-experience .globe-story.is-exploring .feedback-map-key {
bottom: 72px;
right: var(--globe-gutter);
}
#home-experience .globe-story.is-exploring .feedback-map-key { display: none; }
}
@media (max-width: 700px) {
#home-experience .globe-story.is-globe-mobile-composed .globe-story__sticky {
align-content: start;
display: grid;
grid-template-areas: 'reading' 'earth' 'legend' 'cta';
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto auto auto auto;
gap: 8px;
padding: clamp(24px, 5svh, 48px) 24px 16px;
}
#home-experience .globe-story.is-globe-mobile-composed .globe-story__reading {
grid-area: reading;
left: auto;
position: relative;
top: auto;
transform: none;
width: 100%;
}
#home-experience .globe-story.is-globe-mobile-composed .globe-story__copy-deck {
margin: 14px 0 12px;
}
#home-experience .globe-story.is-globe-mobile-composed .globe-story__progress {
align-self: start;
margin: 0;
}
#home-experience .globe-story.is-globe-mobile-composed .globe-story__progress i {
width: 96px;
}
#home-experience .globe-story.is-globe-mobile-composed:not(.is-exploring) .globe-story__earth {
grid-area: earth;
justify-self: center;
left: auto;
position: relative;
top: auto;
transform: none;
width: min(90vw, 40svh, 350px);
}
#home-experience .globe-story.is-globe-mobile-composed .globe-story__veil {
background: linear-gradient(180deg, #060f14 0%, transparent 45%);
}
#home-experience .globe-story.is-globe-mobile-composed .feedback-map-key {
align-items: center;
bottom: auto;
flex-direction: row;
flex-wrap: wrap;
gap: 8px 18px;
grid-area: legend;
justify-self: center;
position: relative;
right: auto;
top: auto;
}
#home-experience .globe-story.is-globe-mobile-composed .feedback-map-key > span {
font-size: 11px;
text-shadow: none;
}
#home-experience .globe-story.is-globe-mobile-composed .globe-story__sticky > .globe-story__explore {
grid-area: cta;
justify-self: start;
margin-top: 4px;
position: relative;
z-index: 4;
}
#home-experience .globe-story.is-globe-mobile-composed .globe-story__footer { display: none; }
#home-experience .globe-story.is-globe-mobile-composed.is-exploring .globe-story__sticky {
display: block;
padding: 0;
}
#home-experience .globe-story.is-globe-mobile-composed.is-exploring .globe-story__sticky > .globe-story__explore,
#home-experience .globe-story.is-globe-mobile-composed.is-exploring .feedback-map-key {
display: none;
}
}
/* Keep each fixed-height reel frame intact while sizing its longest line to the reading column. */
@media (min-width: 701px) and (max-width: 1699px) {
#home-experience .globe-story__headline {
font-size: clamp(34px, 4vw, 68px);
}
}
/* The explorer panel clips long facility names if the display face exceeds its column. */
#home-experience .globe-explorer__panel h2 {
font-size: clamp(32px, 3vw, 44px);
line-height: 1.2;
overflow-wrap: normal;
word-break: normal;
}
@media (max-width: 700px) {
#home-experience .globe-explorer__panel h2 {
font-size: clamp(28px, 8vw, 34px);
}
}
/* Growing regions are circles; distribution points are amber diamonds. */
#home-experience .feedback-map-key .feedback-map-key__origin {
border-radius: 50%; background: #b7e000; border: 0;
}
#home-experience .feedback-map-key .feedback-map-key__destination {
box-sizing: border-box; border: 2px solid #ffcb72; border-radius: 1px;
background: transparent; transform: rotate(45deg); box-shadow: none;
}
/* The origin names are controls attached to the globe, not a detached sentence. */
#home-experience .globe-story.has-region-list .globe-story__origins { display: none; }
#home-experience .globe-story.has-region-list[data-chapter="origins"] .globe-story__copy-deck { display: none; }
#home-experience .feedback-region-list { display: none; }
#home-experience .globe-story.has-region-list[data-chapter="origins"] .feedback-region-list {
display: block; margin: 24px 0 26px;
}
#home-experience .feedback-region-list__label {
display: block; color: #aebfc7; font: 600 11px/1.5 var(--body);
margin-bottom: 10px; text-transform: uppercase;
}
#home-experience .feedback-region-list__buttons { display: flex; flex-wrap: wrap; gap: 8px; }
#home-experience .feedback-region-list__button {
align-items: center; background: #142831; border: 1px solid #536972;
border-radius: 4px !important; color: #f3f6f4; cursor: pointer;
display: inline-flex; gap: 9px; justify-content: flex-start; min-height: 44px;
padding: 8px 12px; transition: border-color .2s ease, background .2s ease;
font: 500 13px/1.2 var(--body);
}
#home-experience .feedback-region-list__button i {
background: #b7e000; border-radius: 50%; flex: 0 0 9px; height: 9px; width: 9px;
}
#home-experience .feedback-region-list__button:is(:hover, :focus-visible, [aria-pressed="true"]) {
background: #213c37; border-color: #b7e000;
}
#home-experience .globe-explorer__panel.is-picker-open { overflow: visible; }
#home-experience .globe-story.is-exploring .feedback-map-key { display: none !important; }
#home-experience .globe-explorer__panel :is(select, label)[hidden] { display: none !important; }
#home-experience .feedback-location-picker { position: relative; margin-bottom: 25px; }
#home-experience .feedback-location-picker__toggle {
align-items: center; background: #192e35; border: 1px solid #789098;
border-radius: 6px !important; color: #fff; cursor: pointer; display: flex;
justify-content: space-between; min-height: 60px; padding: 9px 14px;
text-align: left; width: 100%;
}
#home-experience .feedback-location-picker__toggle small {
color: #aebfc7; display: block; font: 500 11px/1.3 var(--body); margin-bottom: 3px;
}
#home-experience .feedback-location-picker__toggle strong {
display: block; font: 600 15px/1.35 var(--body);
}
#home-experience .feedback-location-picker__toggle > i {
color: #c7e965; font: normal 24px/1 var(--body); margin-left: 12px;
}
#home-experience .feedback-location-picker__toggle[aria-expanded="true"] { border-color: #c7e965; }
#home-experience .feedback-location-picker__menu {
background: #10242b; border: 1px solid #8fa5a6; border-radius: 7px;
box-shadow: 0 26px 64px #0009; box-sizing: border-box; left: 0;
max-height: min(65svh, 560px); overflow-y: auto; overscroll-behavior: contain;
padding: 14px; position: absolute; top: 0; width: min(420px, calc(100vw - 96px));
z-index: 15;
}
#home-experience .feedback-location-picker__menu[hidden] { display: none !important; }
#home-experience .feedback-location-picker__group + .feedback-location-picker__group {
border-top: 1px solid #52656a; margin-top: 13px; padding-top: 13px;
}
#home-experience .feedback-location-picker__group h3 {
color: #d9ed96; font: 700 11px/1.5 var(--body); letter-spacing: .03em;
margin: 0 0 7px; text-transform: uppercase;
}
#home-experience .feedback-location-picker__option {
align-items: center; background: transparent; border: 1px solid transparent;
border-radius: 4px !important; color: #f3f6f4; cursor: pointer;
display: flex; gap: 12px; min-height: 48px; padding: 8px 10px;
text-align: left; width: 100%; font: 500 14px/1.35 var(--body);
}
#home-experience .feedback-location-picker__option:is(:hover, :focus-visible, [aria-pressed="true"]) {
background: #25403d; border-color: #93b79d;
}
#home-experience .feedback-location-picker__marker {
box-sizing: border-box; display: block; flex: 0 0 12px; height: 12px; width: 12px;
}
#home-experience .feedback-location-picker__marker.is-origin {
background: #b7e000; border-radius: 50%;
}
#home-experience .feedback-location-picker__marker.is-destination {
border: 2px solid #ffcb72; border-radius: 1px; transform: rotate(45deg);
}
#home-experience :is(.feedback-region-list__button, .feedback-location-picker__toggle,
.feedback-location-picker__option):focus-visible {
outline: 3px solid #c7e965; outline-offset: 2px;
}
@media (max-width: 700px) {
#home-experience .globe-story.has-region-list[data-chapter="origins"] .feedback-region-list {
margin: 13px 0 16px;
}
#home-experience .feedback-region-list__buttons {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;
}
#home-experience .feedback-region-list__button {
font-size: 11px; gap: 6px; min-height: 44px; padding: 7px 5px;
}
#home-experience .feedback-region-list__button i { flex-basis: 7px; height: 7px; width: 7px; }
#home-experience .globe-explorer__panel.is-picker-open { max-height: none; }
#home-experience .feedback-location-picker { margin-bottom: 17px; }
#home-experience .feedback-location-picker__menu {
bottom: 0; left: -8px; max-height: min(67svh, 560px); padding: 14px;
top: auto; width: calc(100% + 16px);
}
#home-experience .feedback-location-picker__option { min-height: 50px; }
}
/* P4: place explorer copy on whole pixels; the old translated scroll panel
rasterized the display face and cut long place names at its scroll edge. */
#home-experience .globe-explorer__panel {
box-sizing: border-box;
bottom: 0;
display: flex;
flex-direction: column;
justify-content: center;
max-height: none;
overflow: visible;
padding: 88px 8px 28px;
top: 0;
transform: none;
}
#home-experience .globe-explorer__panel h2 {
line-height: 1.18;
overflow: visible;
overflow-wrap: anywhere;
}
#home-experience .feedback-location-picker__menu {
bottom: 24px;
left: var(--globe-gutter);
max-height: none;
overflow-x: hidden;
overflow-y: auto;
position: fixed;
top: clamp(100px, 14svh, 130px);
width: min(420px, calc(100vw - 96px));
z-index: 30;
}
#home-experience .feedback-location-picker__header {
align-items: center;
background: #10242b;
border-bottom: 1px solid #52656a;
display: flex;
gap: 12px;
justify-content: space-between;
margin: -14px -14px 12px;
padding: 10px 14px;
position: sticky;
top: -14px;
z-index: 1;
}
#home-experience .feedback-location-picker__header h2 {
color: #f4f7ee;
font: 400 22px/1.2 var(--display);
letter-spacing: .02em;
margin: 0;
text-transform: uppercase;
}
#home-experience .feedback-location-picker__dismiss {
align-items: center;
background: transparent;
border: 1px solid #8fa5a6;
border-radius: 50% !important;
color: #fff;
cursor: pointer;
display: inline-flex;
flex: 0 0 52px;
font: 400 28px/1 var(--body);
height: 52px;
justify-content: center;
padding: 0;
width: 52px;
}
#home-experience .feedback-location-picker__option { min-height: 52px; }
#home-experience .feedback-location-picker__toggle { min-height: 60px; }
#home-experience .feedback-location-picker__dismiss:focus-visible {
outline: 3px solid #c7e965;
outline-offset: 2px;
}
@media (max-width: 700px) {
#home-experience .globe-explorer__panel {
bottom: 20px;
display: block;
max-height: calc(100svh - 150px);
overflow-y: auto;
padding: 8px;
top: auto;
}
#home-experience .globe-explorer__panel.is-picker-open { overflow: visible; }
#home-experience .feedback-location-picker__menu {
bottom: 16px;
left: 24px;
right: 24px;
top: 88px;
width: auto;
}
#home-experience .feedback-region-list__button,
#home-experience .feedback-location-picker__option { min-height: 52px; }
#home-experience .globe-explorer__close { height: 52px; width: 52px; }
#home-experience .globe-explorer__panel a { min-height: 50px; }
}
/* westpak-legend2: the key follows the pin classes, with no opening-state flash. */
#home-experience .globe-story .feedback-map-key:not([data-legend2-ready="true"]),
#home-experience .globe-story .feedback-map-key[aria-hidden="true"],
#home-experience .globe-story .feedback-map-key > span[aria-hidden="true"] {
display: none !important;
}
@media (max-width: 700px) {
/* The existing mobile composition can be absent after React mounts. Keep the
key in the clear band between the reading block and the globe either way. */
#home-experience .globe-story:not(.is-exploring) .feedback-map-key {
align-items: center;
bottom: auto;
box-sizing: border-box;
flex-direction: row;
flex-wrap: nowrap;
gap: 16px;
left: 24px;
max-width: calc(100% - 48px);
right: auto;
top: 50%;
width: auto;
}
#home-experience .globe-story .feedback-map-key > span {
flex: 0 0 auto;
font-size: 10px;
white-space: nowrap;
}
}
/* Reduced-motion readers still need the five named origin controls. The
cinematic chapter remains at intro in this mode, so the usual origins-only
display rule never reveals them. Keep the static globe and its selection
controls in a single short viewport without relying on globe rotation. */
@media (prefers-reduced-motion: reduce) {
#home-experience .globe-story.has-region-list .feedback-region-list {
display: block;
margin: 10px 0 0;
position: relative;
z-index: 10;
}
}
@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
#home-experience .globe-story.has-region-list .globe-story__earth {
width: min(80vw, 300px) !important;
}
#home-experience .globe-story.has-region-list .feedback-region-list__buttons {
gap: 6px;
}
#home-experience .globe-story.has-region-list .feedback-region-list__button {
min-height: 44px;
padding: 7px 5px;
font-size: 11px;
}
}
/* H10 — append to the existing globe-layout.css. Reuses its canvas and fonts. */
html.h10-globe-open #header-outer,
html.h10-globe-open #slide-out-widget-area,
html.h10-globe-open #to-top {
visibility: hidden !important;
pointer-events: none !important;
}
#home-experience .h10-atlas.is-exploring .globe-explorer__close {
align-items: center;
background: #193138;
border-radius: 99px !important;
display: inline-flex;
font: 700 13px/1 var(--body);
gap: 8px;
justify-content: center;
min-height: 52px;
padding: 0 16px;
width: auto;
}
#home-experience .h10-atlas .globe-explorer__close:focus-visible,
#home-experience .h10-atlas .globe-story__explore:focus-visible {
outline: 3px solid #c7e965;
outline-offset: 4px;
}
#home-experience .h10-atlas .globe-explorer__panel {
overscroll-behavior: contain;
}
#home-experience .h10-atlas .network-globe[data-failed="true"] .network-globe__readout { display: none; }
/* Keep a sized globe silhouette during lazy import/texture failure. The existing
gradient fallback makes no additional cartographic/location assertion. */
#home-experience .h10-atlas .globe-story__earth:not([data-ready="true"])::before {
background: radial-gradient(circle at 36% 32%, #83b5cf5c, transparent 18%),
radial-gradient(circle at 50% 50%, #173a51 0 47%, #0b2332 48% 52%, transparent 53%);
border-radius: 50%;
content: '';
height: 85%;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 85%;
}
@media (max-width: 700px) {
#home-experience .h10-atlas:not(.is-exploring) .globe-story__sticky {
display: block !important;
min-height: 0 !important;
padding: 0 !important;
}
#home-experience .h10-atlas:not(.is-exploring) .globe-story__reading {
inset: 72px 20px auto !important;
position: absolute !important;
transform: none !important;
width: auto !important;
z-index: 7;
}
#home-experience .h10-atlas:not(.is-exploring) .globe-story__headline {
font-size: clamp(28px, 8.2vw, 35px) !important;
}
#home-experience .h10-atlas .globe-story__copy-deck { margin: 14px 0 12px; }
#home-experience .h10-atlas .globe-story__progress { align-self: start; margin: 0; }
#home-experience .h10-atlas .globe-story__progress i { width: 96px; }
#home-experience .h10-atlas:not(.is-exploring) .feedback-region-list { margin: 12px 0 0 !important; }
#home-experience .h10-atlas .feedback-region-list__label { color: #cbd7c8; margin-bottom: 8px; }
#home-experience .h10-atlas .feedback-region-list__label::before {
background: #c7eb43;
border-radius: 50%;
content: '';
display: inline-block;
height: 8px;
margin-right: 8px;
width: 8px;
}
#home-experience .h10-atlas .feedback-region-list__buttons {
display: flex !important;
flex-wrap: wrap !important;
gap: 4px !important;
}
#home-experience .h10-atlas .feedback-region-list__button {
background: #132b30;
border-color: #455d5f;
border-radius: 99px !important;
flex: 1 0 auto;
font-size: 10px;
justify-content: center;
letter-spacing: 0;
min-height: 44px;
min-width: 44px;
padding: 8px 6px;
}
#home-experience .h10-atlas .feedback-region-list__button i { display: none; }
#home-experience .h10-atlas .feedback-region-list__button[aria-pressed="true"] {
background: #c7eb43;
border-color: #c7eb43;
color: #09180d;
}
#home-experience .h10-atlas:not(.is-exploring) .globe-story__earth {
left: 50% !important;
max-width: none !important;
position: absolute !important;
top: 77% !important;
transform: translate(-50%, -50%) !important;
width: min(140vw, 70svh, 620px) !important;
z-index: 2;
}
#home-experience .h10-atlas:not(.is-exploring) .feedback-map-key { display: none !important; }
#home-experience .h10-atlas:not(.is-exploring) .globe-story__sticky::after {
background: linear-gradient(180deg, transparent, #060f14 92%);
content: '';
inset: 86% 0 0;
pointer-events: none;
position: absolute;
z-index: 3;
}
#home-experience .h10-atlas:not(.is-exploring) .globe-story__explore {
background: #c8ec45;
border: 1px solid #d6f46d;
border-radius: 99px !important;
bottom: auto;
top: auto;
box-sizing: border-box;
color: #10231c;
font-size: 14px;
font-weight: 700;
justify-content: center;
left: auto;
min-height: 52px;
margin-top: 12px;
padding: 12px 16px;
position: relative !important;
right: auto;
width: auto !important;
z-index: 8;
}
#home-experience .h10-atlas:not(.is-exploring) .globe-story__reading .globe-story__explore {
top: auto;
bottom: auto;
left: auto;
right: auto;
}
#home-experience .h10-atlas.is-exploring .globe-story__explore { display: none; }
#home-experience .h10-atlas .globe-story__footer { display: none; }
#home-experience .h10-atlas[data-chapter="network"]:not(.is-exploring) .globe-story__footer {
bottom: 20px;
display: block;
left: 20px;
right: 20px;
text-align: left;
}
#home-experience .h10-atlas[data-chapter="network"] .globe-story__map-note {
display: block;
font-size: 10px;
max-width: calc(100% - 56px);
}
#home-experience .h10-atlas[data-chapter="network"]:not(.is-exploring) .feedback-map-key {
display: flex !important;
left: 20px;
position: absolute;
top: 216px;
}
#home-experience .h10-atlas.is-exploring .globe-explorer__header {
padding-top: max(16px, env(safe-area-inset-top));
}
}
@media (prefers-reduced-motion: reduce) {
#home-experience .h10-atlas .feedback-region-list__button { transition: none; }
}
@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
/* A static reading layout can grow with text. The globe never sits behind
its region controls, and no animation or nested scroll is needed. */
#home-experience .h10-atlas:not(.is-exploring) { height: auto !important; }
#home-experience .h10-atlas:not(.is-exploring) .globe-story__sticky {
display: grid !important;
grid-template-areas: 'reading' 'earth' 'cta';
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto auto auto;
gap: 16px;
height: auto !important;
padding: 72px 20px 80px !important;
position: relative;
}
#home-experience .h10-atlas:not(.is-exploring) .globe-story__reading {
grid-area: reading;
inset: auto !important;
position: relative !important;
width: 100% !important;
}
#home-experience .h10-atlas:not(.is-exploring) .globe-story__earth {
grid-area: earth;
justify-self: center;
left: auto !important;
position: relative !important;
top: auto !important;
transform: none !important;
}
#home-experience .h10-atlas:not(.is-exploring) .globe-story__sticky > .globe-story__explore {
bottom: auto;
top: auto;
grid-area: cta;
left: auto;
position: relative !important;
right: auto;
width: calc(100% - 64px) !important;
}
}
/* Source: assets/r06-1b4b1f164146cb864c00/cinematic/scanner-remove-g8-v1.css */
/* Review06 G8: keep the Precision Ripening photo and copy, without its scanner. */
#home-experience .ripening-section__photo > .scan-lines,
#home-experience .ripening-section__photo > .ripening-section__readout {
display: none !important;
}
#home-experience .ripening-section__photo > .scan-lines::after {
animation: none !important;
content: none !important;
}
/* Source: assets/r06-1b4b1f164146cb864c00/cinematic/grove-transition-g7-v2.css */
/* A single grove frame spans both chapters while the AVO360 background enters. */
#home-experience .grove-transition-g7 {
position: fixed;
inset: 0;
z-index: 7;
pointer-events: none;
opacity: var(--g7-grove-opacity, 0);
background-image:
linear-gradient(180deg, rgba(12, 29, 19, .40), rgba(18, 48, 41, .76)),
url('../cinematic/grove-end-desktop.webp');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
will-change: opacity;
}
#home-experience .proof-hero__avo-preview {
opacity: min(
clamp(0, calc((var(--hero-handoff) - .4) / .6), 1),
calc(1 - var(--g7-grove-opacity, 0))
);
}
#home-experience .system-story {
position: relative;
z-index: 8;
}
#home-experience .system-story,
#home-experience .system-story__sticky {
background:
radial-gradient(ellipse at 74% 40%, rgba(145, 167, 119, calc(.19 * (1 - var(--g7-grove-opacity, 0)))), transparent 46%),
linear-gradient(135deg,
rgba(36, 66, 56, calc(1 - var(--g7-grove-opacity, 0))) 0%,
rgba(25, 54, 47, calc(1 - var(--g7-grove-opacity, 0))) 56%,
rgba(35, 65, 57, calc(1 - var(--g7-grove-opacity, 0))) 100%);
}
#home-experience .system-story__sticky::before {
opacity: calc(.24 * (1 - var(--g7-grove-opacity, 0)));
}
@media (max-width: 700px) {
#home-experience .grove-transition-g7 {
background-image:
linear-gradient(180deg, rgba(12, 29, 19, .38), rgba(18, 48, 41, .78)),
url('../cinematic/grove-end-mobile.webp');
}
}
/* Source: assets/r06-1b4b1f164146cb864c00/cinematic/ios-edges-g14.css */
/* Home-only Safari edge colors. The WordPress header remains above the film. */
html:has(> body.wpr06-home),
body.wpr06-home {
--g14-edge-background: #0c1c0c;
background-color: var(--g14-edge-background) !important;
}
/* Salient's white content wrapper otherwise leaks through the header gap. */
body.wpr06-home .container-wrap {
background-color: transparent !important;
}
@supports (padding-top: env(safe-area-inset-top)) {
@media (max-width: 1000px) {
body.wpr06-home #header-outer {
box-sizing: border-box;
height: calc(74px + env(safe-area-inset-top)) !important;
padding-top: calc(12px + env(safe-area-inset-top)) !important;
}
body.wpr06-home #ajax-content-wrap {
padding-top: calc(74px + env(safe-area-inset-top)) !important;
}
body.wpr06-home {
padding-bottom: env(safe-area-inset-bottom) !important;
}
}
}
/* Source: assets/r06-1b4b1f164146cb864c00/cinematic/mobile-hero-p0.css */
/* The native film keeps its 64ef71f dimensions and crop. Safari's
safe area receives a neutral tone; no synthetic video is painted. */
@media (max-width: 999px) {
html:has(body.wpr06-home),
body.wpr06-home {
background: #0c1c0c;
}
body.wpr06-home.wpr06-header-managed.p0-header-visible #header-outer,
body.wpr06-home.wpr06-header-managed.p0-header-visible #header-outer.wpr06-header-visible,
body.wpr06-home.wpr06-header-managed.p0-header-visible #header-outer.wpr06-header-occluded,
body.wpr06-home.wpr06-header-managed.p0-header-visible #header-outer:focus-within {
transform: translateY(0) !important;
}
}
@media (max-width: 999px) and (prefers-reduced-motion: reduce) {
body.wpr06-home #header-outer { transition: none !important; }
}
/* Source: assets/r06-1b4b1f164146cb864c00/cinematic/mobile-hero-p0-header.css */
/* Opaque Home reveal: the native wordmark cannot double with the AVO360 mark. */
body.wpr06-home.wpr06-header-managed.p0-header-visible #header-outer,
body.wpr06-home.wpr06-header-managed.p0-header-visible #header-outer #top {
background: #18382f !important;
box-shadow: 0 10px 30px rgba(5, 17, 12, .22) !important;
}
/* Source: assets/r06-1b4b1f164146cb864c00/shared/arrow-svg-g27.css */
#wpr06-body .wpr06-vector-arrow {
display: inline-block;
width: 1em;
height: 1em;
flex: none;
vertical-align: -.12em;
overflow: visible;
}
/* The swipe cue is informational; its arrow uses the same SVG geometry. */
@media (max-width: 700px) {
body.wpr06-home #home-experience .products .product-stage::after {
content: "SWIPE IMAGE OR TABS";
padding-right: 17px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8h12m-5-5 5 5-5 5'/%3E%3C/svg%3E") no-repeat right center / 11px 11px;
}
}
/* Source: assets/r06-1b4b1f164146cb864c00/cinematic/avo-dup-g28.css */
/* Keep the fruit handoff, show the AVO360 heading and services only once. */
body.wpr06-home #home-experience .proof-hero__avo-preview .system-story__heading,
body.wpr06-home #home-experience .proof-hero__avo-preview .system-story__summary,
body.wpr06-home #home-experience .proof-hero__avo-preview .system-story__capabilities {
visibility: hidden !important;
}
/* Source: assets/r06-1b4b1f164146cb864c00/cinematic/edge-g26.css */
/* The status extension follows the visible top layer, separately from bottom bounce. */
html:has(> body.wpr06-page) {
background-color: var(--g26-edge-top, #fff) !important;
}
body.wpr06-page {
background-color: var(--g26-edge-bottom, #f4f4f4) !important;
}
/* Source: assets/r06-1b4b1f164146cb864c00/cinematic/overflow-g23.css */
/* Salient's full-width footer row is 2px too wide in touch-enabled desktop
Chrome. Keep its nested content rows untouched. */
body.wpr06-home .nectar-global-section.before-footer .full-width-section > .row-bg-wrap {
width: 100vw !important;
left: 50% !important;
margin-left: -50vw !important;
}
/* Source: assets/r06-1b4b1f164146cb864c00/cinematic/shell-a2.css */
body.wpr06-home #home-experience :is(.resource-card,.explore-card) {
opacity: 1 !important; transform: none !important; filter: none !important;
background-color: #19362f; isolation: isolate;
}
body.wpr06-home #home-experience :is(.resource-card,.explore-card) img { opacity: 1 !important; }
body.wpr06-home #home-experience .system-story__capabilities > a { opacity: 1 !important; }
body.wpr06-home #home-experience .system-story__capabilities > a.is-avo-active { border-top: 2px solid #c6e768; background: #24483a; }
body.wpr06-home .lane-a2-context { display: none; }
@media (max-width:999px) {
body.wpr06-home::before { display: none !important; }
body.wpr06-home #header-outer#header-outer,
body.wpr06-home.wpr06-header-managed #header-outer#header-outer {
position: var(--wpa-header-position, fixed) !important; left: 0 !important; right: 0 !important;
top: var(--wpa-header-top, 0px) !important; width: 100% !important;
height: calc(env(safe-area-inset-top) + 112px) !important;
min-height: calc(env(safe-area-inset-top) + 112px) !important;
padding: env(safe-area-inset-top) 0 0 !important;
box-sizing: border-box !important; border-radius: 0 !important;
background: #18382f !important; box-shadow: none !important;
z-index: 10001 !important; overflow: visible !important;
}
body.wpr06-home #header-space { height: 0 !important; }
body.wpr06-home #header-outer#header-outer #top { height: 64px !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
body.wpr06-home #header-outer#header-outer #top > .container { width: 100% !important; max-width: none !important; padding: 0 8px !important; height: 64px !important; }
body.wpr06-home #header-outer#header-outer #top .row { position: relative; height: 64px !important; display: flex !important; align-items: center; margin: 0 !important; padding: 0 !important; }
body.wpr06-home #header-outer#header-outer #top .span_3 { width: 96px !important; flex: 0 0 96px; margin: 0 !important; padding: 0 !important; }
body.wpr06-home #header-outer#header-outer #logo { display: flex !important; align-items: center; width: 96px !important; height: 52px !important; margin: 0 !important; padding: 0 !important; transform: none !important; }
body.wpr06-home #header-outer#header-outer #logo img { display: none !important; }
body.wpr06-home #header-outer#header-outer #logo img.mobile-only-logo { display: block !important; position: static !important; opacity: 1 !important; visibility: visible !important; width: 92px !important; height: auto !important; max-height: 34px !important; object-fit: contain !important; transform: none !important; }
body.wpr06-home #header-outer#header-outer #top .span_9 { display: flex !important; width: 88px !important; flex: 0 0 88px; justify-content: flex-end; align-items: center; margin: 0 0 0 auto !important; padding: 0 !important; height: 64px !important; }
body.wpr06-home #header-outer#header-outer #top .span_9 > nav,
body.wpr06-home #header-outer#header-outer .nectar-mobile-only { display: none !important; }
body.wpr06-home #header-outer#header-outer .mobile-search,
body.wpr06-home #header-outer#header-outer .slide-out-widget-area-toggle.mobile-icon { display: flex !important; position: static !important; align-items: center; justify-content: center; width: 44px !important; height: 44px !important; margin: 0 !important; padding: 0 !important; transform: none !important; }
body.wpr06-home #header-outer#header-outer .slide-out-widget-area-toggle.mobile-icon a { display: grid !important; place-items: center; width: 44px !important; height: 44px !important; }
body.wpr06-home #header-outer#header-outer .mobile-search .nectar-icon { font-size: 19px !important; }
body.wpr06-home #header-outer#header-outer .lines-button { transform: scale(.8) !important; }
body.wpr06-home .lane-a2-context { display: block; position: absolute; left: 104px; right: 92px; top: 8px; height: 48px; color: #fff; font: 12px/1.2 var(--body, sans-serif); }
body.wpr06-home .lane-a2-current { width: 100%; height: 48px; background: transparent; border: 0; border-left: 1px solid #547164; color: inherit; padding: 0 0 0 10px; text-align: left; cursor: pointer; }
body.wpr06-home .lane-a2-current strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; font-weight: 600; }
body.wpr06-home .lane-a2-current small { display: block; margin-top: 4px; color: #c6e768; font-size: 10px; white-space: nowrap; }
body.wpr06-home .lane-a2-current:focus-visible { outline: 2px solid #c6e768; outline-offset: 2px; }
body.wpr06-home .lane-a2-choices { position: absolute; top: 62px; left: -104px; right: -92px; max-height: min(440px, 70svh); overflow: auto; padding: 8px; border-radius: 12px; background: #18382f; box-shadow: 0 4px 16px #071c1940; }
body.wpr06-home .lane-a2-choices[hidden] { display: none; }
body.wpr06-home .lane-a2-choices button { display: block; width: 100%; text-align: left; min-height: 44px; background: none; color: #fff; border: 0; border-bottom: 1px solid #547164; padding: 10px; }
body.wpr06-home .lane-a2-choices button[aria-current=true] { color: #c6e768; }
body.wpr06-home #home-experience .product-stage__numbers,
body.wpr06-home #home-experience .product-picker { display: none !important; }
body.wpr06-home #home-experience .product-stage { scroll-margin-top: 88px; }
}
@media (max-width:700px) {
/* 100svh already excludes Safari chrome; safe-area padding stays inside it. */
body.wpr06-home #home-experience .system-story.is-avo-ready .system-story__sticky { height: 100svh !important; min-height: 0 !important; overflow: visible !important; }
body.wpr06-home #home-experience :is(.system-story,.proof-hero__avo-preview) .system-story__layout {
box-sizing: border-box; height: 100svh !important; min-height: 0 !important;
display: grid; grid-template-columns: minmax(0,1fr) 96px !important;
grid-template-rows: 96px auto minmax(0,1fr) !important;
align-content: start !important; gap: 12px 12px !important;
padding: max(88px, calc(env(safe-area-inset-top) + 76px)) 20px max(16px, env(safe-area-inset-bottom)) !important;
}
body.wpr06-home #home-experience .system-story__heading { grid-column: 1 !important; grid-row: 1 !important; align-self: center; }
body.wpr06-home #home-experience .system-story__mark { width: 92px !important; margin-bottom: 8px !important; }
body.wpr06-home #home-experience .system-story__heading h2 { font-size: 25px !important; line-height: .98 !important; margin: 0 !important; }
body.wpr06-home #home-experience .system-story__visual { grid-column: 2 !important; grid-row: 1 !important; width: 96px !important; height: 96px !important; align-self: center; }
body.wpr06-home #home-experience .system-story__fruit-anchor { width: 96px !important; height: 96px !important; }
body.wpr06-home #home-experience .system-story__summary { grid-column: 1 / -1 !important; grid-row: 2 !important; font-size: 12px !important; line-height: 1.45 !important; margin: 0 !important; max-width: none; }
body.wpr06-home #home-experience .system-story__capabilities { grid-column: 1 / -1 !important; grid-row: 3 !important; margin: 0 !important; grid-template-columns: 1fr 1fr !important; grid-template-rows: auto repeat(3,minmax(44px,1fr)); gap: 0 16px !important; align-self: stretch; max-height: none; overflow: visible; }
body.wpr06-home #home-experience .system-story__services-heading { grid-column: 1 / -1; min-height: 32px; }
body.wpr06-home #home-experience .system-story__capabilities > a { min-height: 44px !important; padding: 6px 0 !important; align-items: center; }
body.wpr06-home #home-experience .system-story__capabilities strong { font-size: 12px !important; line-height: 1.3 !important; }
body.wpr06-home #home-experience .system-story__capabilities > a > span { display: none !important; }
}
@media (prefers-reduced-motion:reduce) {
body.wpr06-home #home-experience .system-story__fruit-fallback { visibility: visible !important; }
body.wpr06-home #home-experience .system-story__sticky,
body.wpr06-home #home-experience .system-story__layout { height: auto !important; min-height: 100svh !important; }
}
@media (max-width:700px) and (max-height:570px) {
body.wpr06-home #home-experience .system-story.is-avo-ready .system-story__sticky { height: auto !important; position: relative !important; }
body.wpr06-home #home-experience .system-story__layout { height: auto !important; min-height: 100svh !important; }
}
@media (max-width:999px) {
body.wpr06-home #ajax-content-wrap#ajax-content-wrap { padding-top: 0 !important; }
body.wpr06-home #header-outer#header-outer::before,
body.wpr06-home #header-outer#header-outer::after,
body.wpr06-home #header-outer#header-outer #top::before,
body.wpr06-home #header-outer#header-outer #top::after { display: none !important; }
body.wpr06-home .lane-a2-current { border-radius: 0 !important; box-shadow: none !important; }
}
@media (max-width:700px) {
body.wpr06-home #home-experience .system-story__heading { display: block !important; }
}
@media (max-width:999px) {
body.wpr06-home #header-outer#header-outer #search-outer:not(.material-open) { visibility: hidden !important; pointer-events: none !important; }
body.wpr06-home #header-outer#header-outer #search-outer.material-open { visibility: visible !important; pointer-events: auto !important; }
}
@media (max-width:999px) {
body.wpr06-home #header-outer#header-outer #search-outer #close a { color: #18382f !important; }
body.wpr06-home #header-outer#header-outer #search-outer .close-line { background: #18382f !important; }
}
/* Visibility is inherited and a video child can override it. Parent opacity makes
the ownership switch atomic even with the legacy video visibility inline style. */
/* Compact, one-row full-bleed header: current section is the section control. */
@media (max-width:999px) {
body.wpr06-home #header-outer#header-outer {
height:calc(env(safe-area-inset-top) + 64px) !important;
min-height:calc(env(safe-area-inset-top) + 64px) !important;
}
body.wpr06-home #header-outer#header-outer #top,
body.wpr06-home #header-outer#header-outer #top > .container,
body.wpr06-home #header-outer#header-outer #top .row {height:64px !important;}
body.wpr06-home #header-outer#header-outer #top .span_3 {width:96px !important;flex-basis:96px !important;margin-left:10px !important;}
body.wpr06-home #header-outer#header-outer #logo {width:96px !important;}
body.wpr06-home #header-outer#header-outer #logo img.mobile-only-logo {width:94px !important;max-height:36px !important;}
body.wpr06-home .lane-a2-context {position:absolute !important;top:0 !important;left:112px !important;right:104px !important;height:64px !important;background:transparent !important;touch-action:pan-y;}
body.wpr06-home .lane-a2-current {display:flex !important;align-items:center;justify-content:center;gap:6px;width:100% !important;height:64px !important;padding:0 !important;border:0 !important;background:transparent !important;color:#fff !important;text-align:center !important;}
body.wpr06-home .lane-a2-current strong {display:block !important;min-width:0;max-width:120px !important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px !important;font-weight:600;}
body.wpr06-home .lane-a2-current small {display:block !important;flex:none;color:#c6e768 !important;font-size:10px !important;margin:0 !important;white-space:nowrap;}
body.wpr06-home .lane-a2-current::after {display:none !important;}
body.wpr06-home .lane-a2-context::after {content:'';position:fixed;top:calc(env(safe-area-inset-top) + 62px);left:0;width:var(--lane-a2-progress,11.11%);height:2px;background:#c6e768;pointer-events:none;}
body.wpr06-home #header-outer#header-outer::after {content:'' !important;display:block !important;position:absolute;left:0;right:0;bottom:0;height:1px;background:#547164;pointer-events:none;}
body.wpr06-home .lane-a2-choices {position:absolute !important;top:60px !important;left:-112px !important;right:-104px !important;max-height:min(440px,70svh);border-radius:0 !important;background:#18382f !important;overflow:auto;box-shadow:0 8px 20px #071c1940;}
body.wpr06-home .lane-a2-choices button {border-radius:0 !important;}
body.wpr06-home #home-experience,
body.wpr06-home #home-experience .product-stage {scroll-margin-top:64px;}
body.wpr06-home .globe-story__progress {display:none !important;}
}
@media (max-width:999px) {
body.wpr06-home #header-outer#header-outer {transition:transform .25s ease !important;will-change:transform;}
body.wpr06-home #header-outer#header-outer.lane-a2-header-hidden {transform:translateY(-100%) !important;}
body.wpr06-home .lane-a2-context[hidden] {display:none !important;}
html:has(body.wpr06-home),body.wpr06-home {background:#18382f !important;}
}
@media (max-width:999px) {
body.wpr06-home #header-outer#header-outer,
body.wpr06-home #header-outer#header-outer #top,
body.wpr06-home #header-outer#header-outer #top > .container,
body.wpr06-home #header-outer#header-outer #top .row {
background:rgb(var(--lane-a2-header-rgb,24 56 47) / var(--lane-a2-header-alpha,0)) !important;
transition:background-color .3s ease,transform .25s ease !important;
}
}
@media (max-width:999px) {
/* Transparent content bar can blend into the scene, but iOS status remains opaque
green until a native capture proves a matching sampled top tint is safe. */
body.wpr06-home #header-outer#header-outer {background:#18382f !important;}
body.wpr06-home #header-outer#header-outer #top,
body.wpr06-home #header-outer#header-outer #top > .container,
body.wpr06-home #header-outer#header-outer #top .row {
background:rgb(var(--lane-a2-header-rgb,24 56 47) / var(--lane-a2-header-alpha,0)) !important;
}
}
@media (max-width:999px) {
body.wpr06-home #header-outer#header-outer {background:rgb(var(--lane-a2-header-rgb,24 56 47) / var(--lane-a2-header-alpha,0)) !important;}
}
@media (max-width:999px) {
/* iOS paints physical status from root, so avoid a hard seam at y47. */
html:has(body.wpr06-home),body.wpr06-home {background:#18382f !important;}
body.wpr06-home #header-outer#header-outer,
body.wpr06-home #header-outer#header-outer #top,
body.wpr06-home #header-outer#header-outer #top > .container,
body.wpr06-home #header-outer#header-outer #top .row {background:#18382f !important;}
}
@media (max-width:999px) {
body.wpr06-home #header-outer#header-outer::after,
body.wpr06-home #header-outer#header-outer #top::after,
body.wpr06-home .lane-a2-context::after {display:none !important;content:none !important;}
body.wpr06-home #header-outer#header-outer,
body.wpr06-home #header-outer#header-outer #top,
body.wpr06-home #header-outer#header-outer #top > .container {border-bottom:0 !important;}
}
@media(max-width:999px){
html:has(body.wpr06-home),body.wpr06-home{background:var(--lane-a2-edge,#18382f)!important;transition:background-color .28s ease!important;}
body.wpr06-home #header-outer#header-outer,
body.wpr06-home #header-outer#header-outer #top,
body.wpr06-home #header-outer#header-outer #top > .container,
body.wpr06-home #header-outer#header-outer #top .row{background:var(--lane-a2-edge,#18382f)!important;transition:background-color .28s ease,transform .25s ease!important;}
body.wpr06-home #header-outer#header-outer::after,
body.wpr06-home .lane-a2-context::after{display:none!important;content:none!important;}
}
/* Do not hide the still image until the first film frame is genuinely painted.
Native Safari may report readyState 4 before the composited video appears. */
body.wpr06-home #home-experience .proof-hero__poster {z-index:1 !important;}
body.wpr06-home #home-experience .proof-hero__flight-media {z-index:2 !important;background:transparent !important;}
body.wpr06-home #home-experience .proof-hero.is-film-ready .proof-hero__flight-media {background:transparent !important;}
body.wpr06-home #home-experience .proof-hero__flight-media::before {content:"";position:absolute;inset:0;background:url("../media/hero-flight-v7-single-shot/poster.jpg") center center/cover no-repeat;z-index:0;pointer-events:none;}
body.wpr06-home #home-experience .proof-hero__film {z-index:1;}
body.wpr06-home #home-experience .proof-hero__flight-media::before {background-color:#0c1c0c;}
@media(max-width:999px){
body.wpr06-home #home-experience .proof-hero__sticky{background:#18382f url("../media/hero-flight-v7-single-shot/poster.jpg") center center/cover no-repeat !important;}
body.wpr06-home #home-experience .proof-hero__flight-media{background:transparent!important;}
}
@media(max-width:999px){
body.wpr06-home #home-experience .globe-story__sticky {background:#060f14 !important;}
body.wpr06-home #home-experience .system-story__sticky {background:#19362f !important;}
}
@media(max-width:999px){
body.wpr06-home #home-experience .proof-hero__green,
body.wpr06-home #home-experience .system-story,
body.wpr06-home #home-experience .system-story__sticky {background:#19362f !important;}
}
/* Source: assets/r06-1b4b1f164146cb864c00/cinematic/home-a2.css */
/* A2R: one existing film surface and one existing mesh, explicit fruit owner. */
body.wpr06-home #home-experience {--a2-scene:#19362f;}
body.wpr06-home #home-experience .proof-hero,
body.wpr06-home #home-experience .system-story,
body.wpr06-home #home-experience .system-story__sticky {background:var(--a2-scene)!important;}
body.wpr06-home #home-experience .proof-hero__green,
body.wpr06-home #home-experience .proof-hero__grain,
body.wpr06-home #home-experience .proof-hero__veil,
body.wpr06-home #home-experience .grove-transition-g7,
body.wpr06-home #home-experience .proof-hero__avo-preview {display:none!important;}
body.wpr06-home #home-experience .a2-film-stage {
position:fixed!important;inset:0 auto auto 0!important;z-index:7!important;
opacity:0;visibility:hidden;pointer-events:none;overflow:hidden!important;
transform:none!important;transition:none!important;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;
}
body.wpr06-home #home-experience .a2-film-stage::before,
body.wpr06-home #home-experience .a2-film-stage::after {display:none!important;}
body.wpr06-home #home-experience .a2-film-stage .proof-hero__film {object-position:center;filter:none;transform:none;}
body.wpr06-home #home-experience .proof-hero__sticky {z-index:8!important;background:transparent!important;pointer-events:none;}
body.wpr06-home #home-experience .proof-hero__content {pointer-events:auto;}
body.wpr06-home #home-experience .proof-hero.is-film-ready .proof-hero__poster {visibility:hidden!important;}
body.wpr06-home #home-experience .system-story {z-index:8;--a2-content:1;}
body.wpr06-home #home-experience .system-story__sticky {overflow:visible!important;}
body.wpr06-home #home-experience .system-story__sticky::before {display:none!important;}
body.wpr06-home #home-experience .system-story.a2-handoff .system-story__sticky {
position:fixed!important;inset:0!important;width:100%!important;background:transparent!important;pointer-events:none;
}
body.wpr06-home #home-experience .system-story__layout {opacity:var(--a2-content);}
body.wpr06-home #home-experience .system-story__fruit-fallback {visibility:hidden!important;}
body.wpr06-home #home-experience .avocado-bridge {
opacity:calc(var(--g7-bridge-presence,0) * var(--a2-bridge-in-view,0))!important;
transform:translate(var(--g7-bridge-x,var(--bridge-x)),var(--g7-bridge-y,var(--bridge-y))) translate(-50%,-50%) scale(var(--g7-bridge-scale,var(--bridge-scale))) scaleX(var(--a2-mesh-width,1))!important;
}
body.wpr06-home #home-experience .avocado-bridge canvas {filter:brightness(calc(1.17 + var(--bridge-light,0)*.06));}
body.wpr06-home #home-experience .avocado-bridge__outline {display:none!important;}
@media(max-width:860px){body.wpr06-home #home-experience .a2-film-stage .proof-hero__film {object-position:64% center!important;}}
@media(prefers-reduced-motion:reduce){
body.wpr06-home #home-experience .a2-film-stage {display:none!important;}
body.wpr06-home #home-experience .system-story__fruit-fallback {visibility:visible!important;}
body.wpr06-home #home-experience .system-story__layout {opacity:1!important;}
}
/* Loss of WebGL retains one native fallback in the real AVO360 composition. */
body.wpr06-home #home-experience:has(.avocado-bridge[data-failed=true]) .system-story__fruit-fallback {visibility:visible!important;}
@media(max-width:999px){
html:has(body.wpr06-home){background:linear-gradient(var(--a2-top-edge,#18382f),var(--a2-bottom-edge,#18382f)) fixed!important;}
body.wpr06-home {background:transparent!important;}
body.wpr06-home #header-outer#header-outer,
body.wpr06-home #header-outer#header-outer #top,
body.wpr06-home #header-outer#header-outer #top > .container,
body.wpr06-home #header-outer#header-outer #top .row {background:var(--a2-top-edge,var(--lane-a2-edge,#18382f))!important;transition:transform .25s ease!important;}
}
@media(max-width:700px){
body.wpr06-home #home-experience .globe-story.is-globe-mobile-composed:not(.is-exploring) .globe-story__sticky {
padding:72px 20px max(12px,env(safe-area-inset-bottom));gap:4px;
}
body.wpr06-home #home-experience .globe-story__headline {font-size:clamp(28px,8.2vw,34px)!important;}
body.wpr06-home #home-experience .globe-story.is-globe-mobile-composed .globe-story__copy-deck {margin:8px 0 8px;}
body.wpr06-home #home-experience .globe-story.has-region-list[data-chapter=origins] .feedback-region-list {margin:8px 0;}
body.wpr06-home #home-experience .feedback-region-list__label {margin-bottom:6px;}
body.wpr06-home #home-experience .feedback-region-list__button {min-height:44px;}
body.wpr06-home #home-experience .globe-story.is-globe-mobile-composed:not(.is-exploring) .globe-story__earth {
width:min(94vw,44svh,370px);
}
body.wpr06-home #home-experience .globe-story.is-globe-mobile-composed .feedback-map-key {left:auto;top:auto;right:auto;margin:0;}
}
/* Source: assets/r06-1b4b1f164146cb864c00/cinematic/motion-a4.css */
/* The opening copy is opaque at rest and removed before film travel begins. */
body.wpr06-home #home-experience .proof-hero__content {
opacity:1!important;transition:none!important;
}
/* A3's bright sky poster needs a reliable backing for the stationary cue.
* Pseudo-element avoids moving the approved type/CTA layout. */
body.wpr06-home #home-experience .proof-hero__content::before {
content:"";position:absolute;inset:-16px -16px;z-index:-1;
background:rgba(25,54,47,.94);pointer-events:none;
}
body.wpr06-home #home-experience .proof-hero[data-a4-copy=hidden] .proof-hero__content,
body.wpr06-home #home-experience .proof-hero[data-a4-copy=hidden] .scroll-cue {
opacity:0!important;visibility:hidden!important;pointer-events:none!important;
}
/* Source: assets/r06-1b4b1f164146cb864c00/shared/combined-p0-lane-b/lane-b.css */
/* Combined P0 lane B. Append after existing page styles; no Home layout rules. */
/* Suppress decorative labels with their borders and pseudo-element rules.
Sales steps and the changing Home product name carry meaningful context. */
#wpr06-body .eyebrow:not(:has(.sales-step)):not(.product-stage__copy > .eyebrow),
#wpr06-body .wpr06-flow-label,
#wpr06-body .globe-story__eyebrow,
#wpr06-body .colombia-story__eyebrow,
#wpr06-body .colombia-story__map-heading > span,
#wpr06-body .wp-map__eyebrow,
#wpr06-body .colombia-program-label,
#wpr06-body .colombia-story__map-credit,
#wpr06-body [data-lane-b-caption] {
display: none !important;
}
/* Retain actual progress / product identity without the eyebrow treatment. */
#wpr06-body .eyebrow:has(.sales-step),
#wpr06-body .product-stage__copy > .eyebrow {
border: 0 !important;
padding-left: 0 !important;
background: none !important;
text-transform: none !important;
letter-spacing: normal !important;
}
#wpr06-body .eyebrow:has(.sales-step)::before,
#wpr06-body .eyebrow:has(.sales-step)::after,
#wpr06-body .product-stage__copy > .eyebrow::before,
#wpr06-body .product-stage__copy > .eyebrow::after {
content: none !important;
display: none !important;
}
#wpr06-body .eyebrow .sales-step {
border: 0 !important;
padding-right: 0 !important;
}
/* Match the other bag cards: an upright real bag with its own clear image area.
The accessible Classic title remains in the adjacent card copy. */
#wpr06-body #westpak-refresh.products .product-classic-word { display: none; }
#wpr06-body #westpak-refresh.products .product-classic-media { background: #fff; }
#wpr06-body #westpak-refresh.products .product-classic-media > img {
width: 100%;
max-width: 340px;
height: 320px;
margin: 0 auto;
transform: none;
object-fit: contain;
}
@media (max-width: 760px) {
#wpr06-body #westpak-refresh.products .product-classic-media > img {
max-width: 280px;
height: 260px;
}
}
/* Preserve anchor navigation, current-state attributes, and keyboard focus.
The underline remains visible in forced-colors modes. */
#wpr06-body #westpak-refresh:is(.products, .colombia) :is(.products-shelf-list, .colombia-journey-list) a {
border-radius: 0;
}
#wpr06-body #westpak-refresh:is(.products, .colombia) :is(.products-shelf-list, .colombia-journey-list) a:is([data-g21-current="true"], [aria-current="location"], :hover, :focus-visible) {
background: transparent;
box-shadow: none;
text-decoration: underline;
text-underline-offset: 6px;
text-decoration-thickness: 2px;
}
#wpr06-body #westpak-refresh:is(.products, .colombia) :is(.products-shelf-list, .colombia-journey-list) a:focus-visible {
outline: 2px solid currentColor;
outline-offset: -2px;
}
/* Salient's blockquote chrome must not overlap the three authored quotes. */
#wpr06-body #westpak-refresh.colombia .colombia-perspective-quotes {
align-items: stretch;
}
#wpr06-body #westpak-refresh.colombia .colombia-perspective-quotes > blockquote {
position: relative;
min-width: 0;
margin: 0;
padding: 0 0 0 24px;
border: 0;
border-left: 3px solid #f4d53f;
box-shadow: none;
}
#wpr06-body #westpak-refresh.colombia .colombia-perspective-quotes > blockquote::before,
#wpr06-body #westpak-refresh.colombia .colombia-perspective-quotes > blockquote::after {
content: none;
display: none;
}
#wpr06-body #westpak-refresh.colombia .colombia-perspective-quotes > blockquote > p,
#wpr06-body #westpak-refresh.colombia .colombia-perspective-quotes > blockquote > footer {
margin-left: 0;
padding-left: 0;
text-indent: 0;
transform: none;
}
/* Source: assets/r06-1b4b1f164146cb864c00/shared/combined-p0-lane-i/retained-labels-i.css */
/* Explicit lane-I integration decision: retain the changing Home product name.
B's final hide block is excluded, but live home-feedback.css still hides this
same node. Restore only its authored display; B keeps decorative lines off. */
#wpr06-body #home-experience .product-stage__copy > .eyebrow {
display: flex;
}
/* Source: assets/r06-1b4b1f164146cb864c00/cinematic/polish-h.css */
/* Home-only final surface layer. No film, bridge, sticky timing or crop rules. */
html:has(> body.wpr06-home) {background:var(--a2-top-edge,#19362f)!important;scroll-snap-type:none!important;}
body.wpr06-home {background:var(--a2-bottom-edge,#19362f)!important;}
body.wpr06-home #header-outer#header-outer {
background:var(--a2-top-edge,#19362f)!important;
border:0!important;border-radius:0!important;box-shadow:none!important;
overflow:visible!important;transition:transform .25s ease!important;
}
body.wpr06-home #header-outer#header-outer #top,
body.wpr06-home #header-outer#header-outer #top > .container,
body.wpr06-home #header-outer#header-outer #top .row {
background:transparent!important;border:0!important;box-shadow:none!important;
}
body.wpr06-home #header-outer#header-outer::before,
body.wpr06-home #header-outer#header-outer::after,
body.wpr06-home #header-outer#header-outer #top::after,
body.wpr06-home .lane-a2-context::after {content:none!important;display:none!important;}
/* Keep native long sections freely traversable; shell retains its bounded globe stops. */
body.wpr06-home #home-experience {scroll-snap-type:none!important;}
body.wpr06-home #home-experience :is(.button,.text-link,.resource-card,.explore-card) {opacity:1!important;}
body.wpr06-home #home-experience :is(.resource-card,.explore-card) img {opacity:1!important;filter:none!important;}
/* Decorative product cutout is independent of the hero/AVO360 bridge owner. */
body.wpr06-home #home-experience .product-stage__avocado {display:none!important;}
@media(min-width:1000px) {
body.wpr06-home #header-space {height:0!important;}
body.wpr06-home #header-outer#header-outer {
height:76px!important;min-height:76px!important;padding:0!important;left:0!important;right:0!important;width:100%!important;
}
body.wpr06-home #header-outer#header-outer #top,
body.wpr06-home #header-outer#header-outer #top > .container,
body.wpr06-home #header-outer#header-outer #top .row {height:76px!important;min-height:0!important;padding-top:0!important;padding-bottom:0!important;}
body.wpr06-home #header-outer#header-outer #top > .container {width:100%!important;max-width:none!important;padding-inline:24px!important;}
body.wpr06-home #header-outer#header-outer #top .row {display:flex!important;align-items:center!important;}
body.wpr06-home #header-outer#header-outer #top .span_3 {width:144px!important;flex:0 0 144px!important;margin:0!important;}
body.wpr06-home #header-outer#header-outer #logo {display:flex!important;align-items:center!important;width:144px!important;height:64px!important;margin:0!important;padding:0!important;}
body.wpr06-home #header-outer#header-outer #logo img {max-width:138px!important;max-height:44px!important;width:auto!important;height:auto!important;object-fit:contain!important;transform:none!important;}
body.wpr06-home #header-outer#header-outer #top .span_9 {width:auto!important;min-width:0!important;flex:1!important;margin:0!important;}
body.wpr06-home #header-outer#header-outer #top nav > ul > li > a {padding-top:20px!important;padding-bottom:20px!important;}
}
@media(prefers-reduced-motion:reduce){body.wpr06-home #header-outer#header-outer{transition:none!important;}}
/* One uninterrupted photographic surface while the original hero owns the viewport. */
body.wpr06-home #header-outer#header-outer[data-h-film] {background:transparent!important;}
body.wpr06-home #home-experience .button--glass {background:#19362f!important;backdrop-filter:none!important;}
/* The existing first collection uses a loose fruit as its primary artwork.
Reuse B's byte-guarded original Classic bag, conditional on React selection.
This CSS replacement does not touch R/S main or hydrated structure. */
body.wpr06-home #home-experience .product-stage:has(.product-picker button:first-child[aria-pressed="true"]) .product-stage__visual > img:not(.product-stage__avocado) {
content:url("../shared/combined-p0-chief-0925/classic-bag-alpha.png");
object-fit:contain!important;
}
/* Native wordmark silhouette and controls remain legible on cream/footer surfaces. */
body.wpr06-home #header-outer#header-outer[data-h-light] #logo img {filter:brightness(0)!important;}
body.wpr06-home #header-outer#header-outer[data-h-light] #top a {color:#19362f!important;}
body.wpr06-home #header-outer#header-outer[data-h-light] #top .button_solid_color a {color:#fff!important;}
body.wpr06-home #header-outer#header-outer[data-h-light] #top .button_bordered a::before {border-color:#19362f!important;}
body.wpr06-home #header-outer#header-outer[data-h-light] .lines,
body.wpr06-home #header-outer#header-outer[data-h-light] .lines::before,
body.wpr06-home #header-outer#header-outer[data-h-light] .lines::after {background:#19362f!important;}
body.wpr06-home #header-outer#header-outer[data-h-light] #top#top .icon-salient-search,
body.wpr06-home #header-outer#header-outer[data-h-light] #top#top .icon-salient-search::before {color:#19362f!important;}
body.wpr06-home #header-outer#header-outer[data-h-light] #top#top .mobile-icon .lines,
body.wpr06-home #header-outer#header-outer[data-h-light] #top#top .mobile-icon .lines::before,
body.wpr06-home #header-outer#header-outer[data-h-light] #top#top .mobile-icon .lines::after {background-color:#19362f!important;}
body.wpr06-home #home-experience .product-stage:has(.product-picker button:first-child[aria-pressed="true"]) .product-stage__halo {display:none!important;}
/* Source: assets/r06-1b4b1f164146cb864c00/cinematic/terminal-s.css */
/* Same full-frame cover projection as the real film decks; inherits A3's mask. */
body.wpr06-home #home-experience .a2-film-stage .s-terminal-film {
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
z-index:12;visibility:hidden;pointer-events:none;filter:none;transform:none;
}
@media(max-width:860px){body.wpr06-home #home-experience .a2-film-stage .s-terminal-film{object-position:64% center;}}
@media(prefers-reduced-motion:reduce){body.wpr06-home #home-experience .s-terminal-film{display:none!important;}}
/* Source: assets/r06-1b4b1f164146cb864c00/cinematic/opening-scrim-chief.css */
/* Uniform opening scrim: keep the grove visible without a copy-box edge. */
body.wpr06-home #home-experience .proof-hero__content::before {
background: none !important;
}
body.wpr06-home #home-experience .proof-hero__veil {
display: block !important;
background: rgba(8, 31, 23, .65) !important;
opacity: 1 !important;
transition: none !important;
}
body.wpr06-home #home-experience .proof-hero[data-a4-copy=hidden] .proof-hero__veil {
opacity: 0 !important;
visibility: hidden !important;
}
/* Source: assets/r06-1b4b1f164146cb864c00/cinematic/first-frame-chief.css */
/* Home film custody: loaded data can precede a decoded, presented video frame.
The existing grove poster owns the opening until WebKit's video frame callback.
This leaves the A3 underlay, native film decks, and S terminal gate unchanged. */
body.wpr06-home #home-experience .proof-hero.is-film-ready .proof-hero__poster {
visibility: visible !important;
}
body.wpr06-home #home-experience .a2-film-stage:has(.proof-hero__film.is-active[data-presented-time]) + .proof-hero.is-film-ready .proof-hero__poster {
visibility: hidden !important;
}
/* A direct AVO360 arrival has usable section content while S validates the
native terminal frame. No unregistered film frame or fruit is substituted. */
body.wpr06-home #home-experience #avo360:target .system-story__layout,
body.wpr06-home #home-experience:has(.proof-hero[data-t-terminal="checking"]) #avo360 .system-story__layout,
body.wpr06-home #home-experience:has(.proof-hero[data-t-terminal="blocked"]) #avo360 .system-story__layout {
opacity: 1 !important;
}
body.wpr06-home #home-experience:has(.proof-hero[data-t-terminal="checking"]) #avo360 .system-story__sticky,
body.wpr06-home #home-experience:has(.proof-hero[data-t-terminal="blocked"]) #avo360 .system-story__sticky {
background: var(--a2-scene) !important;
box-shadow: 0 -40px 0 var(--a2-scene) !important;
}
/* Source: assets/r06-1b4b1f164146cb864c00/cinematic/unified-header-g1.css */
/* Home's one native header row owns the optional carousel context. */
/* A small exposed root strip can appear during the reversible film's opening
scroll. Its paint follows the actual poster sky instead of the green page
fallback while the header is transparent. */
html:has(> body.wpr06-home #header-outer[data-h-film]),
body.wpr06-home:has(#header-outer[data-h-film]) {
background-color: #8ab7d3 !important;
}
/* The existing handoff can expose Chrome's root canvas. During that blend only,
match the live film/AVO edge tint instead of the opening-sky fallback above.
No independent color transition may lag behind a mid-handoff reversal. */
html:has(> body.wpr06-home #home-experience.simple-handoff-blend),
body.wpr06-home:has(#home-experience.simple-handoff-blend) {
background-color: var(--a2-top-edge, #19362f) !important;
transition: none !important;
}
@media (max-width: 999px) {
body.wpr06-home #header-outer#header-outer {
left: 0 !important;
right: 0 !important;
width: 100% !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
background: var(--a2-top-edge, #19362f) !important;
}
body.wpr06-home #header-outer#header-outer[data-h-film] {
background: transparent !important;
}
body.wpr06-home #header-outer#header-outer #top,
body.wpr06-home #header-outer#header-outer #top > .container,
body.wpr06-home #header-outer#header-outer #top .row {
border: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
body.wpr06-home #header-outer#header-outer::before,
body.wpr06-home #header-outer#header-outer::after,
body.wpr06-home #header-outer#header-outer #top::after,
body.wpr06-home .lane-a2-context::after {
content: none !important;
display: none !important;
}
body.wpr06-home .lane-a2-context {
--chief-ink: #fff;
--chief-accent: #c6e768;
position: absolute !important;
top: 0 !important;
left: 112px !important;
right: 104px !important;
height: 64px !important;
color: var(--chief-ink) !important;
background: transparent !important;
touch-action: pan-y;
}
body.wpr06-home .lane-a2-context[hidden] { display: none !important; }
body.wpr06-home #header-outer[data-h-light] .lane-a2-context {
--chief-ink: #19362f;
--chief-accent: #31583d;
}
body.wpr06-home .lane-a2-current {
display: flex !important;
align-items: center;
justify-content: center;
gap: 7px !important;
width: 100% !important;
height: 64px !important;
padding: 7px 0 !important;
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: var(--chief-ink) !important;
text-align: left !important;
cursor: pointer;
}
body.wpr06-home .lane-a2-current:focus-visible,
body.wpr06-home .lane-a2-choices button:focus-visible {
outline: 2px solid var(--chief-accent) !important;
outline-offset: -3px;
}
body.wpr06-home .lane-a2-copy {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
column-gap: 5px;
row-gap: 5px;
min-width: 0;
max-width: 100%;
}
body.wpr06-home .lane-a2-current strong {
display: block !important;
min-width: 0;
max-width: none !important;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--chief-ink) !important;
font-size: 11px !important;
line-height: 1.2;
font-weight: 600;
}
body.wpr06-home .lane-a2-current small {
display: block !important;
margin: 0 !important;
color: var(--chief-accent) !important;
font-size: 10px !important;
line-height: 1;
font-variant-numeric: tabular-nums;
}
body.wpr06-home .lane-a2-progress {
grid-column: 1 / -1;
display: flex;
gap: 3px;
width: 100%;
height: 3px;
}
body.wpr06-home .lane-a2-progress i {
flex: 1 1 0;
min-width: 0;
height: 3px;
border-radius: 2px;
background: currentColor;
opacity: .25;
}
body.wpr06-home .lane-a2-progress i.is-past,
body.wpr06-home .lane-a2-progress i.is-current {
background: var(--chief-accent);
opacity: 1;
}
body.wpr06-home .lane-a2-swipe-cue {
flex: 0 0 13px;
color: var(--chief-ink);
opacity: .62;
font: 400 14px/1 sans-serif;
text-align: center;
}
body.wpr06-home .lane-a2-swipe-cue::before { content: '↔'; }
body.wpr06-home .lane-a2-choices {
top: 64px !important;
left: -112px !important;
right: -104px !important;
max-height: min(440px, 70svh);
overflow: auto;
background: var(--a2-top-edge, #19362f) !important;
color: var(--chief-ink) !important;
border: 0 !important;
border-radius: 0 !important;
}
body.wpr06-home .lane-a2-choices button {
color: var(--chief-ink) !important;
border-bottom-color: color-mix(in srgb, var(--chief-ink) 20%, transparent) !important;
}
body.wpr06-home .lane-a2-choices button[aria-current="true"] {
color: var(--chief-accent) !important;
}
body.wpr06-home.lane-a2-has-submenu #home-experience .products .product-stage::after {
content: none !important;
display: none !important;
}
}
@media (max-width: 359px) {
body.wpr06-home .lane-a2-context { left: 100px !important; right: 96px !important; }
body.wpr06-home .lane-a2-choices { left: -100px !important; right: -96px !important; }
}
/* Source: assets/r06-1b4b1f164146cb864c00/cinematic/simple-home.css */
/* This stylesheet is loaded only by the SIMPLE Home manifest. */
body.wpr06-home #home-experience .avocado-bridge {
opacity: var(--g7-bridge-presence, 0) !important;
pointer-events: none !important;
}
body.wpr06-home #home-experience .avocado-bridge[data-simple-location="hidden"] {
opacity: 0 !important;
visibility: hidden !important;
}
body.wpr06-home #home-experience .avocado-bridge[data-simple-location="avo360"] {
visibility: visible !important;
}
body.wpr06-home #home-experience .system-story__fruit-fallback {
animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
body.wpr06-home #home-experience .avocado-bridge { display: none !important; }
body.wpr06-home #home-experience .system-story__fruit-fallback { visibility: visible !important; }
}
/* Source: assets/r06-1b4b1f164146cb864c00/review-polish-r03/home.css */
/* R02 Home: keep the pinned stories usable on a 320 x 568 short phone.
The inherited max-height:570px fallback unpins AVO360 without reducing
its 500svh story, which creates several empty green screens. */
@media (max-width: 700px) and (max-height: 570px) {
body.wpr02-home #home-experience .system-story.is-avo-ready .system-story__sticky {
position: sticky !important;
top: 0 !important;
height: 100svh !important;
min-height: 0 !important;
}
body.wpr02-home #home-experience .system-story__layout {
height: 100svh !important;
min-height: 0 !important;
}
/* The inherited 680px minimum makes the last globe beat rise 112px
above the 568px viewport, cutting off its heading. */
body.wpr02-home #home-experience .globe-story.is-globe-mobile-composed:not(.is-exploring) .globe-story__sticky {
height: 100svh;
min-height: 0;
gap: 4px;
padding-bottom: 10px;
}
body.wpr02-home #home-experience .globe-story.is-globe-mobile-composed .globe-story__copy-deck {
margin: 4px 0;
}
body.wpr02-home #home-experience .globe-story.is-globe-mobile-composed:not(.is-exploring) .globe-story__earth {
width: min(82vw, 34svh, 280px);
}
}
/* The native search and menu glyphs remain black on Home's dark photographic
opening, AVO360, globe, and final CTA. Only pale data-h-light sections use
the existing dark glyph treatment. */
@media (max-width: 999px) {
body.wpr02-home #header-outer#header-outer:not([data-h-light]) .mobile-search .nectar-icon,
body.wpr02-home #header-outer#header-outer:not([data-h-light]) .slide-out-widget-area-toggle.mobile-icon a {
color: #f6f7ef !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
}
body.wpr02-home #header-outer#header-outer:not([data-h-light]) .slide-out-widget-area-toggle .lines::before,
body.wpr02-home #header-outer#header-outer:not([data-h-light]) .slide-out-widget-area-toggle .lines::after {
background-color: #f6f7ef !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, .7);
}
/* The inherited mobile rule hides all native logo images unless an image
has .mobile-only-logo, but R02's #logo contains only the .stnd wordmark. */
body.wpr02-home #header-outer#header-outer #logo img.stnd {
display: block !important;
width: 92px !important;
height: auto !important;
max-width: 92px !important;
max-height: 34px !important;
object-fit: contain !important;
filter: brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0, 0, 0, .55)) !important;
}
body.wpr02-home #header-outer#header-outer[data-h-light] #logo img.stnd {
filter: brightness(0) !important;
}
}
/* Source: assets/r06-1b4b1f164146cb864c00/review-quality-q3/footer-accessibility.css */
/* Preview-only Q3 candidate. Enqueue only on /review-2026-10-r03/ routes. */
body[class*="wpr0"] .nectar-global-section.before-footer a[href*="/legal-terms/"] {
text-decoration: underline;
text-underline-offset: 0.16em;
text-decoration-thickness: max(1px, 0.07em);
}
body[class*="wpr0"] .nectar-global-section.before-footer a:focus-visible {
outline: 2px solid #2b4216;
outline-offset: 3px;
border-radius: 2px;
}
/* Source: assets/r06-1b4b1f164146cb864c00/review-quality-q7/mobile-menu.css */
/* Local Q7 candidate. Enqueue only on West Pak review routes. */
body[class*="wpr0"] #slide-out-widget-area .q7-menu-close {
position: absolute;
top: 16px;
right: 16px;
z-index: 10;
display: grid;
place-items: center;
width: 44px;
height: 44px;
padding: 0;
border: 1px solid #fff;
border-radius: 50%;
background: transparent;
color: #fff;
font: 32px/1 sans-serif;
cursor: pointer;
}
body[class*="wpr0"].material-ocm-open > .slide_out_area_close__wrap {
pointer-events: none;
opacity: 0;
}
body[class*="wpr0"] #slide-out-widget-area .q7-menu-close:focus-visible,
body[class*="wpr0"] #slide-out-widget-area .ocm-dropdown-arrow:focus-visible {
outline: 3px solid #fff;
outline-offset: 3px;
}
body[class*="wpr0"] #slide-out-widget-area .ocm-dropdown-arrow[role="button"] { cursor: pointer; }
/* Home already has a visible 44px header toggle. Show its open state as Close. */
body.wpr06-home.material-ocm-open #header-outer .slide-out-widget-area-toggle.mobile-icon a[href="#slide-out-widget-area"] {
position: relative;
}
body.wpr06-home.material-ocm-open #header-outer .slide-out-widget-area-toggle.mobile-icon a[href="#slide-out-widget-area"] > span[aria-hidden="true"] {
visibility: hidden !important;
}
body.wpr06-home.material-ocm-open #header-outer .slide-out-widget-area-toggle.mobile-icon a[href="#slide-out-widget-area"]::after {
content: "×" !important;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font: 32px/1 sans-serif;
text-decoration: none;
pointer-events: none;
}
/* Source: assets/r06-1b4b1f164146cb864c00/review-qa/t3-review-footer.css */
/* Review-only mobile clearance for the hosted feedback toolbar. The widget's
fixed 56px bar sits 16px above the bottom edge; 80px of footer space lets
the final copyright/legal line scroll fully above it. */
@media (max-width: 700px) {
body.wpr06-page:has([data-branch-comments]) .nectar-global-section.before-footer {
padding-bottom: 80px;
}
}
/* Source: assets/r06-1b4b1f164146cb864c00/review-qa/g5-mobile-pacing.css */
/* Local design candidate: shorten only the phone's six-service pinned chapter.
The authored content and reduced-motion fallback are unchanged. */
@media (max-width: 700px) and (prefers-reduced-motion: no-preference) {
body.wpr06-home #home-experience .system-story.is-avo-ready {
height: 500svh !important;
}
}
/* Source: assets/r06-1b4b1f164146cb864c00/cinematic/story-boundary.css */
#home-experience #sourcing .globe-story__reel-track {
transform: none !important;
transition: none !important;
will-change: auto;
}
#home-experience #sourcing .globe-story__reel-frame { display: none; }
#home-experience #sourcing .globe-story__panel[aria-hidden="true"] { visibility: hidden; transition: none; }
#home-experience #sourcing[data-chapter="intro"] .globe-story__reel-frame:nth-child(1),
#home-experience #sourcing[data-chapter="origins"] .globe-story__reel-frame:nth-child(2),
#home-experience #sourcing[data-chapter="network"] .globe-story__reel-frame:nth-child(3) {
display: flex;
animation: globe-title-enter 220ms ease-out both;
}
@keyframes globe-title-enter {
from { opacity: .2; }
to { opacity: 1; }
}
#home-experience #avo360,
#home-experience #sourcing:not(.is-exploring) {
overflow: clip;
clip-path: inset(0);
}
#home-experience #avo360[data-boundary-visible="false"] > .system-story__sticky,
#home-experience #sourcing[data-boundary-visible="false"]:not(.is-exploring) > .globe-story__sticky {
opacity: 0 !important;
pointer-events: none !important;
}
@media (prefers-reduced-motion: reduce) {
#home-experience #sourcing .globe-story__reel-frame { animation: none !important; }
}
/* Source: assets/r06-1b4b1f164146cb864c00/ui/viewport-theme.css */
/* CP15: native scrollY 0 for every mobile opening, as on Organics. A synthetic
64px top runway made the header drop when native scrolling returned to zero.
Retain the lower media bleed that fills Safari's floating toolbar area. */
/* --wpa-toolbar-bleed: how far a full-screen hero should run past 100svh so its media also fills
the area under Safari's floating bottom toolbar (iOS 26/27 show the page there; 100lvh is only
~40px more than 100svh, the toolbar covers ~98px). Keep bottom-anchored hero content above it. */
html.wpa-runway { --wpa-runway: 0px; --wpa-toolbar-bleed: 100px; }
/* Native root scrolling, as on Organics; suppress edge bounce without a
nested scroll container or gesture interception. */
@media(max-width:999px){
html:has(body.wpr02-page){overscroll-behavior-y:none}
html body.wpr02-page{overflow:clip visible!important}
}
html.wpa-runway:has(#wpr06-body [data-bleed-top]) #wpr06-body { padding-top: var(--wpa-runway) !important; }
html[data-wp-viewport-theme] body.wpr06-home.wpr06-header-managed::before {
background: var(--wp-viewport-color) !important;
}
/* Keep the review portal out of Safari's fixed-container tint sampling.
Its floating surfaces remain fixed inside this zero-height stacking root. */
[data-branch-comments][data-sidebar="mobile"] {
position: absolute !important;
inset: 0 auto auto 0 !important;
width: 100% !important;
height: 0 !important;
/* Dormant shadow-DOM edge snap marks sit 8px beyond this host. Keep their
horizontal overflow local while fixed review controls remain visible. */
overflow-x: clip !important;
overflow-y: visible !important;
}
/* A transparent fixed header still makes Liquid Glass flatten the status strip.
Over a bleeding hero it travels with the image. The normal fixed hide/reveal header
resumes after the hero, and while the menu is open. */
html.wpa-hero-absolute body.wpr02-page.wpr06-header-managed #header-outer,
html.wpa-hero-absolute body.wpr06-home.wpr06-header-managed #header-outer {
position: absolute !important; top: var(--wpa-runway, 0px) !important;
}
html.wpa-hero-absolute { --wpa-header-position: absolute; --wpa-header-top: var(--wpa-runway, 0px); }
/* CP16 native Safari: keep a painted compact header attached to the viewport.
Native round trips retain the last fixed-container tint after an invisible or
detached header; root/body/theme-color updates alone do not clear it. Reuse
the real header, with its current section color, instead of adding an edge
strip. This native-only policy intentionally keeps navigation visible, with
a solid backplate over media. Other browser hide/reveal behavior is unchanged. */
@media(max-width:999px){
html.wpa-runway:not(.wpa-media-header) body.wpr02-page.wpr06-header-managed #header-outer#header-outer,
html.wpa-runway:not(.wpa-media-header) body.wpr06-home #header-outer#header-outer{
position:fixed!important;inset:0 0 auto!important;
transform:none!important;opacity:1!important;pointer-events:auto!important;
background:var(--wp-viewport-color)!important;
}
html.wpa-runway:not(.wpa-media-header) body.wpr02-page.wpr06-header-managed #header-outer#header-outer::before,
html.wpa-runway:not(.wpa-media-header) body.wpr06-home #header-outer#header-outer::before{
background:var(--wp-viewport-color)!important;opacity:1!important;
backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
}
/* CP15/CP16 Oct5 phone correction: an unpainted hero header reveals the real
film/poster under both the navigation row and its native safe-area padding.
Keep the original solid policy for menu/search/focus and non-media sections. */
@media(max-width:999px){
html.wpa-media-header body.wpr02-page #header-outer#header-outer,
html.wpa-media-header body.wpr02-page #header-outer#header-outer :is(#top,.container,.row,.bg-color-stripe){
background:transparent!important;box-shadow:none!important;
backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
html.wpa-media-header body.wpr02-page #header-outer#header-outer::before,
html.wpa-media-header body.wpr02-page #header-outer#header-outer::after{
display:none!important;content:none!important;
}
/* Sales authored light overlay retains its dark logo/icons over the white
opening and facility film. Home/Colombia retain their white media ink. */
html.wpa-media-header body.wpr02-page:not(.wpr02-sales) #header-outer #logo img{filter:brightness(0) invert(1)!important}
html.wpa-media-header body.wpr02-page:not(.wpr02-sales) #header-outer #top :is(nav>ul>li>a,.mobile-search,.nectar-icon,.icon-salient-search,.icon-salient-search::before){color:#fff9dd!important}
html.wpa-media-header body.wpr02-page:not(.wpr02-sales) #header-outer .slide-out-widget-area-toggle :is(.lines,.lines::before,.lines::after){background-color:#fff9dd!important}
}
/* Source: assets/r06-1b4b1f164146cb864c00/cinematic/home-r03.css */
/* R03 Home mechanics layer (HM-07). Loaded after the inherited Home stack, before
foundations/enforce.css. Mechanics only; the AVO360 visual redesign belongs to the
Home design pass, which can replace these rules.
AVO360 is no longer pinned or scroll-driven (Oct 2 "Through the Arrow" redesign; layout and
entrance in home-design-r03.css §2). */
/* HM-01 header over the hero film (desktop). The Home desktop header is position:absolute
(it scrolled away with the film's first pixels). While it sits over the hero
(foundations html.wpa-hdr-over) it is fixed and visible; the Home bundle fades it about
halfway through the film with WPAHeader.fade() (foundations CSS: html.wpa-hdr-faded ->
opacity 0). Past the hero it reverts to the inherited behavior. Phones: shell-h.js keeps
its fixed bar visible over the hero under the same classes. */
@media (min-width: 1000px) {
html.wpa-hdr-over body.wpr06-home #header-outer#header-outer {
position: var(--wpa-header-position, fixed) !important;
top: var(--wpa-header-top, 0px) !important;
transform: none !important;
}
}
/* ---- Home hero: ambient loop + one-gesture film, final frame waits for manual scroll ----
The hero is one screen (no scroll track, no automatic page movement, heroTransport.js). The
film stage holds two videos (loop, fly-through) that crossfade; the poster covers the stage
until the loop plays (.proof-hero__sticky[data-hero-surface="film"]) and fades out over it. */
html body.wpr06-home #home-experience #home-top.proof-hero { height: 100svh !important; }
html body.wpr06-home #home-experience .a2-film-stage .proof-hero__film { transition: opacity 700ms cubic-bezier(.45, 0, .55, 1); }
html body.wpr06-home #home-experience #home-top .proof-hero__sticky .proof-hero__poster {
visibility: visible !important;
opacity: 1;
transition: opacity 0s;
}
html body.wpr06-home #home-experience #home-top .proof-hero__sticky[data-hero-surface="film"] .proof-hero__poster {
opacity: 0 !important;
transition: opacity 420ms linear;
}
/* The first state after load (or a restore) is applied without transitions: a page that opens
mid-film must not replay the copy fade or the 1.4s header fade. */
html.hm-instant #header-outer,
html.hm-instant body.wpr06-home #home-experience .proof-hero__content,
html.hm-instant body.wpr06-home #home-experience .proof-hero__poster {
transition: none !important;
}
/* Opened mid-globe before hydration: hold the globe copy until the bundle knows the beat. */
html[data-hm-globe-pending] body.wpr06-home #home-experience .globe-story__reading,
html[data-hm-globe-pending] body.wpr06-home #home-experience .globe-story__footer {
opacity: 0 !important;
}
/* Hero copy + buttons (HM-07, "a little bit jumpy"). Causes: a 280ms transition chasing a
value that changed every frame (lag, then rubber-banding on reverse), the copy fade keyed to
film time (kept drifting while the film coasted), two scripts flipping data-a4-copy/inert with
different thresholds, the veil snapping off on the first scroll, and the web font swapping
~0.3s after first paint. Now ONE owner (presync.inline.js present(), fed by the hero loop)
writes --hm-x-act / --hm-x-sub / --hm-x-h1 / --hm-veil from the scroll position: buttons leave
first, then the sub-line, then the headline; no transitions on those properties. The buttons
get one calm entrance (an animation on the buttons themselves, so it never fights the exit on
their row) once the poster and fonts are in (html.hm-intro-wait). */
html body.wpr06-home #home-experience .proof-hero .proof-hero__content,
html body.wpr06-home #home-experience .proof-hero[data-a4-copy=hidden] .proof-hero__content {
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
transition: none !important;
}
html body.wpr06-home #home-experience .proof-hero .proof-hero__content h1 {
opacity: calc(1 - var(--hm-x-h1, 0));
transform: translate3d(0, calc(var(--hm-x-h1, 0) * -22px), 0);
transition: none;
}
html body.wpr06-home #home-experience .proof-hero .proof-hero__content > p {
opacity: calc(1 - var(--hm-x-sub, 0));
transform: translate3d(0, calc(var(--hm-x-sub, 0) * -16px), 0);
transition: none;
}
html body.wpr06-home #home-experience .proof-hero .proof-hero__content .button-row {
opacity: calc(1 - var(--hm-x-act, 0));
transform: translate3d(0, calc(var(--hm-x-act, 0) * -12px), 0);
transition: none;
}
/* Entrance (Timeline intro): once, after the first paint, staggered by --d; SSR / no-JS show
the finished state (only html.hm-intro-wait hides it). On children, so it never fights the
scroll-linked exit on h1 / p / .button-row. */
@keyframes hm-enter {
from { opacity: 0; transform: translate3d(0, 18px, 0); }
to { opacity: 1; transform: none; }
}
html body.wpr06-home #home-experience .proof-hero__content span.hm-e { display: inline-block; }
html body.wpr06-home #home-experience .proof-hero__content h1 .hm-e { display: block; }
html.hm-intro-wait body.wpr06-home #home-experience .proof-hero__content .hm-e { opacity: 0; transform: translate3d(0, 18px, 0); }
html.hm-intro-play body.wpr06-home #home-experience .proof-hero__content .hm-e {
animation: hm-enter 1100ms cubic-bezier(.16, 1, .3, 1) both;
animation-delay: var(--d, 0ms);
}
/* Quiet secondary link (approved "See Our Programs*"), the prototype's .tlink. */
html body.wpr06-home #home-experience .proof-hero__content .hm-tlink {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 44px;
padding: 10px 2px;
font: 800 13px/1 "Open Sans", Arial, sans-serif;
letter-spacing: .14em;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
color: #FFF9DD;
background: linear-gradient(#B6DF00, #B6DF00) 0 calc(100% - 9px) / 100% 1.5px no-repeat;
}
html body.wpr06-home #home-experience .proof-hero__content .hm-tlink svg { width: 14px; height: 14px; transition: transform .32s cubic-bezier(.16, 1, .3, 1); }
html body.wpr06-home #home-experience .proof-hero__content .hm-tlink:hover svg { transform: translateX(3px); }
html body.wpr06-home #home-experience .proof-hero__content .hm-tlink:focus-visible { outline: 2px solid #B6DF00; outline-offset: 4px; }
html body.wpr06-home #home-experience .proof-hero__content .button-row { align-items: center; gap: 14px 22px; }
@media (max-width: 620px) {
html body.wpr06-home #home-experience .proof-hero__content .button-row { flex-direction: row !important; flex-wrap: wrap; align-items: center !important; max-width: none !important; }
}
@media (prefers-reduced-motion: reduce) {
html body.wpr06-home #home-experience .proof-hero__content .hm-e { animation: none !important; opacity: 1 !important; transform: none !important; }
}
/* Chevron (Corey, Oct 2): a subtle bounce at the bottom centre of the first screen, clear of
the review widget; a real button (it plays the transition). #home-top[data-hero-cue]: pre
(first 1.3s) / hint (at the top) / gone / scroll (settled final frame). */
html body.wpr06-home #home-experience .hm-chevron {
position: absolute; left: 50%; bottom: calc(100lvh - 100svh + 22px); z-index: 6;
display: flex; flex-direction: column; align-items: center; justify-content: center;
width: 64px; height: 64px; margin: 0; padding: 0;
border: 0; border-radius: 50%; background: transparent; color: rgba(255, 249, 221, .9);
cursor: pointer; pointer-events: auto; opacity: 0; visibility: hidden;
transform: translate(-50%, 0);
transition: opacity .6s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .6s;
}
html body.wpr06-home #home-experience .hm-chevron svg {
width: 28px; height: 28px; filter: drop-shadow(0 1px 8px rgba(9, 22, 12, .55)); pointer-events: none;
animation: hm-bounce 2.4s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes hm-bounce { 0%, 55%, 100% { transform: translateY(0); } 25% { transform: translateY(6px); } }
html body.wpr06-home #home-experience #home-top[data-hero-cue="hint"] .hm-chevron,
html body.wpr06-home #home-experience #home-top[data-hero-cue="scroll"] .hm-chevron {
opacity: 1; visibility: visible; transition: opacity .6s cubic-bezier(.16, 1, .3, 1), visibility 0s;
}
html body.wpr06-home #home-experience .hm-chevron__label {
font: 600 10px/1.6 "Open Sans", sans-serif;
letter-spacing: .16em; text-transform: uppercase;
text-shadow: 0 1px 8px rgba(9,22,12,.8);
opacity: 0; transition: opacity 800ms ease;
}
html body.wpr06-home #home-experience #home-top[data-hero-cue="scroll"] .hm-chevron__label { opacity: 1; }
html body.wpr06-home #home-experience #home-top[data-hero-cue="scroll"] .hm-chevron svg {
animation: hm-settled-nudge 4s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes hm-settled-nudge { 0%, 65%, 100% { transform: translateY(0); } 35% { transform: translateY(3px); } }
@media (min-width: 861px) {
/* Keep the cue above the preview's centred review toolbar. */
html body.wpr06-home #home-experience .hm-chevron { bottom: 88px; }
}
html body.wpr06-home #home-experience .hm-chevron:focus-visible { outline: 2px solid #B6DF00; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
html body.wpr06-home #home-experience .hm-chevron svg { animation: none; }
}
@media (scripting: none) { html body.wpr06-home #home-experience .hm-chevron { display: none; } }
html body.wpr06-home #home-experience .proof-hero .proof-hero__veil,
html body.wpr06-home #home-experience .proof-hero[data-a4-copy=hidden] .proof-hero__veil {
/* Shaped, not flat (Timeline intro): strong where the type sits, gone where the sky is. */
background:
linear-gradient(90deg, rgba(9,22,12,.70) 0%, rgba(9,22,12,.46) 34%, rgba(9,22,12,.08) 62%, rgba(9,22,12,0) 78%),
linear-gradient(0deg, rgba(9,22,12,.55) 0%, rgba(9,22,12,0) 30%) !important;
opacity: var(--hm-veil, 1) !important;
visibility: visible !important;
transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
html body.wpr06-home #home-experience .proof-hero__content .button-row > a { animation: none; }
}
/* Globe direct manipulation (HM-07, Oct 2): the sphere can be dragged; horizontal pans on the
canvas belong to the page's scripts (rotate on the sphere, beat step elsewhere), vertical pans
stay page scrolling / beat steps. The hint shows once per session. */
body.wpr06-home #home-experience .globe-r03 .globe-story__earth canvas { touch-action: pan-y; }
body.wpr06-home #home-experience .globe-r03 .globe-story__drag-hint {
position: absolute;
left: 50%;
bottom: 4%;
z-index: 4;
display: inline-flex;
align-items: center;
gap: 7px;
padding: 6px 12px;
border-radius: 999px;
background: rgba(6, 15, 20, .55);
color: rgba(255, 249, 221, .82);
font: 600 11px/1 "Open Sans", sans-serif;
letter-spacing: .08em;
text-transform: uppercase;
pointer-events: none;
opacity: 0;
transform: translate(-50%, 6px);
transition: opacity 500ms ease, transform 500ms ease;
}
body.wpr06-home #home-experience .globe-r03[data-drag-hint="show"]:not(.is-exploring) .globe-story__drag-hint {
opacity: 1;
transform: translate(-50%, 0);
}
@media (prefers-reduced-motion: reduce), (scripting: none) {
body.wpr06-home #home-experience .globe-r03 .globe-story__drag-hint { display: none; }
}
@media (max-width: 860px) {
html body.wpr06-home #home-experience .proof-hero .proof-hero__veil {
background: linear-gradient(180deg, rgba(9,22,12,.38) 0%, rgba(9,22,12,.10) 22%, rgba(9,22,12,.30) 42%, rgba(9,22,12,.74) 70%, rgba(9,22,12,.82) 100%) !important;
}
}
/* Edge to edge (iOS): before the film plays, the poster also fills the large viewport, so the
area behind Safari's bottom toolbar and the status bar shows the grove, not a colour band. The
next section (AVO360) is later in the DOM at the same z, so it covers the overhang. */
html body.wpr06-home #home-experience #home-top .proof-hero__sticky .proof-hero__poster { height: 100lvh !important; }
/* Home adopts the shared iPhone runway. Real film/poster pixels occupy the space
above the viewport; no opaque fixed stage sits at the sampling edge. */
html.wpa-runway body.wpr06-home #home-experience {
position: relative;
/* The legacy site-shell clips both axes. Keep the sideways crop, but let
the film's negative top paint the runway above the visible viewport. */
overflow-x: clip !important;
overflow-y: visible !important;
}
html.wpa-runway body.wpr06-home #home-experience .a2-film-stage {
position: absolute !important; top: calc(-1 * var(--wpa-runway)) !important;
height: calc(100svh + var(--wpa-runway) + var(--wpa-toolbar-bleed)) !important;
}
html.wpa-runway body.wpr06-home #home-experience #home-top.proof-hero {
height: calc(100svh + var(--wpa-toolbar-bleed)) !important;
}
html.wpa-runway body.wpr06-home #home-experience #home-top .proof-hero__sticky {
/* The manual film has no pinned scroll track. A legacy sticky surface at
Safari's top edge still asks the browser to extend a flat background. */
position: relative !important;
top: auto !important;
overflow: visible !important;
}
html.wpa-runway body.wpr06-home #home-experience #home-top .proof-hero__sticky .proof-hero__poster {
top: calc(-1 * var(--wpa-runway)) !important;
height: calc(100svh + var(--wpa-runway) + var(--wpa-toolbar-bleed)) !important;
}
html.wpa-runway body.wpr06-home #home-experience .hm-chevron {
bottom: calc(24px + var(--wpa-toolbar-bleed)) !important;
}
/* Source: assets/r06-1b4b1f164146cb864c00/cinematic/home-design-r03.css */
/* West Pak R03 Home design pass (HM-01..HM-15, DD-02, DD-03).
Loaded after cinematic/home-r03.css (mechanics) and before foundations/enforce.css.
Tokens and components come from foundations/foundations.css (docs/design-system.md);
this file holds the Home-specific layout: cream AVO360 in the banner language, the
four-beat globe, and the lower sections (Smart Way, bag teaser, New From West Pak,
three doors, final CTA, hidden toggles). Old R02 layers are overridden here, not edited. */
/* ---------- Shared bits ---------- */
body.wpr06-home #home-experience {
--hr-font-display: var(--wpa-font-display);
--hr-font-body: var(--wpa-font-body);
}
body.wpr06-home #home-experience .wpa-section {
font-family: var(--hr-font-body);
}
/* In-view reveal (HomeExperience.jsx observes [data-rise]; foundations/motion.js takes over once
it boots). Motion only when allowed.
HM-03 (R04): the hold fails open. A block that no script has marked visible shows itself 2.4s
after it is first styled (a filled keyframe, so the base opacity below can never win), so a
slow, blocked or failed bundle can only delay the reveal, never lose the content. Marking the
block visible earlier drops the animation and runs the transition exactly as before. */
@media (prefers-reduced-motion: no-preference) {
body.wpr06-home #home-experience [data-rise] {
opacity: 0;
transform: translateY(26px);
transition: opacity 640ms var(--wpa-ease), transform 760ms var(--wpa-ease);
animation: hr-rise-fail-open 640ms var(--wpa-ease) 2400ms forwards;
}
body.wpr06-home #home-experience [data-rise][data-visible="true"] {
opacity: 1;
transform: none;
animation: none;
}
}
@keyframes hr-rise-fail-open { to { opacity: 1; transform: none; } }
/* Lime pill label (ripening stages) and lime arrow chip (tiles, cards). */
body.wpr06-home #home-experience .hr-pill {
display: inline-block;
padding: 8px 16px;
border-radius: var(--wpa-radius-pill);
background: var(--wpa-lime);
color: var(--wpa-forest);
font: 700 14px/1.1 var(--hr-font-display);
letter-spacing: .04em;
text-transform: uppercase;
white-space: nowrap;
}
body.wpr06-home #home-experience .hr-chip {
flex: none;
display: inline-grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--wpa-lime);
color: var(--wpa-forest);
transition: transform var(--wpa-dur-fast) var(--wpa-ease), background-color var(--wpa-dur-fast);
}
/* Arrow chip: the arrow is a centered vector (the old "\2192" text glyph sat high and left
of center in its circle; Oct 2 review #3). */
body.wpr06-home #home-experience .hr-chip::before {
content: "";
display: block;
width: 46%;
height: 46%;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 5.5 19.5 12 13 18.5'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 5.5 19.5 12 13 18.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Marks (Mark.jsx). Ellipse and swoosh are the shared A/foundations/marks.css (wpa-mark);
the marker (lime highlighter band behind a key word in body copy) is Home-only for now:
a candidate for foundations if other pages want it. Draws in with its [data-rise] block. */
body.wpr06-home #home-experience .hm-mark--marker {
padding: 0 .08em;
margin: 0 -.08em;
background: linear-gradient(transparent 58%, rgba(182, 223, 0, .55) 58%, rgba(182, 223, 0, .55) 92%, transparent 92%) no-repeat 0 0 / 100% 100%;
transition: background-size 640ms cubic-bezier(.6, 0, .2, 1) 420ms;
}
@media (prefers-reduced-motion: no-preference) {
/* Fails open with its block (HM-03): the band wipes in on its own just after the copy shows. */
body.wpr06-home #home-experience [data-rise]:not([data-visible="true"]) .hm-mark--marker {
background-size: 0 100%;
transition: none;
animation: hr-marker-fail-open 620ms cubic-bezier(.6, 0, .2, 1) 2900ms forwards;
}
}
@keyframes hr-marker-fail-open { to { background-size: 100% 100%; } }
/* A circled word that starts its line (the final CTA's "Pak") sits flush with the line above. */
body.wpr06-home #home-experience .hr-cta__title .wpa-mark--circle { margin-left: 0; }
/* ---------- 1. Hero (HM-01; Oct 2 review #1, #2) ----------
Intro copy: fades out smoothly with the film instead of vanishing. The legacy motion
hooks (motion-s.js / simple-home.js) still flag the copy data-a4-copy="hidden" as soon as
the film moves; motion-a4.css turned that into an instant opacity 0. Here the copy
follows the film instead: fully visible at rest, gone by ~22% of the film, eased and
lifted slightly. Header: fades earlier (HEADER_FADE_AT 0.36 in heroTransport.js) and
slowly (below). */
/* (HM-07: the --hero-copy-fade block lived here; the copy exit now has one owner, home-r03.css.) */
body.wpr06-home #home-experience .proof-hero[data-a4-copy=hidden] .proof-hero__content { pointer-events: none !important; }
/* H1: the two lines were set at .82 and touched; open them to .9. */
body.wpr06-home #home-experience .proof-hero__content h1,
body.wpr06-home #home-experience .proof-hero__content h1 > span { line-height: .9 !important; }
body.wpr06-home #home-experience .proof-hero__content > p:not(.eyebrow) {
font-size: clamp(16px, 1.25vw, 20px) !important;
max-width: 34em !important;
margin-top: clamp(18px, 2vh, 26px) !important;
}
@media (prefers-reduced-motion: reduce) {
body.wpr06-home #home-experience .proof-hero .proof-hero__content { opacity: 1 !important; transform: none !important; }
}
/* Header over the film: a slow fade out (1.4s), a quicker fade back in when scrolling up. */
html.wpa-hdr-faded body.wpr06-home #header-outer#header-outer:not(:focus-within) {
transition: opacity 1400ms cubic-bezier(.33, 0, .2, 1), transform 240ms ease !important;
}
html.wpa-hdr:not(.wpa-hdr-faded) body.wpr06-home #header-outer#header-outer {
transition: opacity 520ms ease, transform 240ms ease, background-color 240ms ease !important;
}
/* ---------- Header after the hero (desktop): the interior hide/reveal ----------
Over the hero: fixed and visible until the Home bundle fades it (home-r03.css).
Past the hero: fixed, hidden on scroll-down and revealed on scroll-up by
feedback/header-v4.js (.wpr06-header-visible), like the interior pages. Colors stay
with shell-h.js (--a2-top-edge + data-h-light: cream and dark ink on every lower
section, dark over the globe and the final CTA). */
@media (min-width: 1000px) {
html.wpa-hdr-past body.wpr06-home #header-outer#header-outer {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 10000 !important;
transform: translateY(-104%) !important;
transition: transform 240ms ease, background-color 240ms ease, opacity 240ms ease !important;
}
html.wpa-hdr-past body.wpr06-home #header-outer#header-outer:is(.wpr06-header-visible, :focus-within) {
transform: none !important;
}
html.wpa-hdr-past body.wpr06-home #header-outer#header-outer.wpr06-header-occluded:not(:focus-within) {
transform: translateY(-104%) !important;
transition: none !important;
}
}
/* ---------- 2. AVO360 on cream: "Through the Arrow" (HM-02, HM-03; Corey approved Oct 2) ----------
VCA's AVO360 arrow (head + shaft + loop: the canonical A/foundations/avo360-arrow.svg,
design-system.md §3b) is a CSS-mask window onto the packing line (WP_AVO360_Banner_06 crops).
No pin, no scroll-linked motion, no 3D avocado: the section flows; one entrance plays after
hydration (Avo360Layout.jsx arms .is-armed -> .is-in): a 360° conic sweep opens the window,
then the words settle. Arrow geometry, as fractions of the art height H (W = H * 2825/1838):
head base x .52W; shaft y .151H-.430H; tail band y .718H-1H. */
@property --avo-sw { syntax: ''; inherits: true; initial-value: 360deg; }
html body.wpr06-home #home-experience #avo360.system-story {
height: auto !important;
min-height: 0 !important;
background: var(--wpa-cream) !important;
color: var(--wpa-ink);
}
html body.wpr06-home #home-experience #avo360 > .system-story__sticky {
position: relative !important;
top: auto !important;
height: auto !important;
min-height: 0 !important;
overflow: visible !important;
background: var(--wpa-cream) !important;
}
html body.wpr06-home #home-experience #avo360 > .system-story__sticky::before,
html body.wpr06-home #home-experience #avo360 > .system-story__sticky::after { content: none !important; }
/* While terminal-s is still verifying the film's end frame, first-frame-chief.css paints the
AVO360 stage in the dark scene tint. Cream. */
html body.wpr06-home #home-experience:has(.proof-hero[data-t-terminal="checking"]) #avo360 .system-story__sticky,
html body.wpr06-home #home-experience:has(.proof-hero[data-t-terminal="blocked"]) #avo360 .system-story__sticky {
background: var(--wpa-cream) !important;
box-shadow: 0 -40px 0 var(--wpa-cream) !important;
}
/* Film -> AVO360 handoff: the grove dissolves straight into cream (simple-home.js fades the film;
the hero's dark scene field turns cream under it), then the section scrolls in natively (it is
no longer lifted out as a fixed 100svh stage). */
body.wpr06-home #home-experience.simple-handoff-blend,
html body.wpr06-home #home-experience.simple-handoff-blend .proof-hero,
body.wpr06-home #home-experience.simple-handoff-blend #avo360.system-story { background: var(--wpa-cream) !important; }
/* The hero's dark veil (presync --hm-veil) lifts with the handoff too, so the film dissolves into
clean cream rather than a grey-beige. */
html body.wpr06-home #home-experience .proof-hero .proof-hero__veil,
html body.wpr06-home #home-experience .proof-hero[data-a4-copy=hidden] .proof-hero__veil {
opacity: calc(var(--hm-veil, 1) * (1 - var(--hero-handoff, 0))) !important;
}
html:has(> body.wpr06-home #home-experience.simple-handoff-blend),
body.wpr06-home:has(#home-experience.simple-handoff-blend) { background-color: var(--wpa-cream) !important; }
html body.wpr06-home #home-experience.simple-handoff-blend #avo360 > .system-story__sticky {
position: relative !important;
inset: auto !important;
opacity: 1 !important;
pointer-events: auto !important;
}
body.wpr06-home #home-experience .avo-w {
--avo-H: clamp(240px, 33svh, 300px);
--avo-W: calc(var(--avo-H) * 2825 / 1838);
--avo-bleed: var(--wpa-gutter);
--avo-arrow: url("../foundations/avo360-arrow.svg");
box-sizing: border-box;
overflow-x: clip;
padding: var(--wpa-s6) 0 var(--wpa-s7);
color: var(--wpa-ink);
font-family: var(--hr-font-body);
}
body.wpr06-home #home-experience .avo-w__in {
box-sizing: border-box;
max-width: calc(var(--wpa-container) + 2 * var(--wpa-gutter));
margin: 0 auto;
padding: 0 var(--wpa-gutter);
}
/* The art box runs from the arrow's left edge to the viewport's right edge. */
body.wpr06-home #home-experience .avo-w__art {
position: relative;
margin-right: calc(-1 * var(--avo-bleed));
}
/* Stacked layouts: only the window bleeds to the viewport edge; the words keep the gutter. */
body.wpr06-home #home-experience .avo-w__art > :not(.avo-w__sweep):not(.avo-w__wm) { margin-right: var(--avo-bleed); }
body.wpr06-home #home-experience .avo-w__sweep {
position: relative;
height: var(--avo-H);
-webkit-mask: conic-gradient(from 0deg at calc(var(--avo-W) * .2) 57%, #000 var(--avo-sw), transparent 0);
mask: conic-gradient(from 0deg at calc(var(--avo-W) * .2) 57%, #000 var(--avo-sw), transparent 0);
}
/* The window: the arrow, plus its shaft and tail band carried on to the viewport edge. */
body.wpr06-home #home-experience .avo-w__win {
position: absolute;
inset: 0;
overflow: hidden;
background: var(--wpa-forest-deep);
-webkit-mask:
var(--avo-arrow) 0 0 / auto 100% no-repeat,
linear-gradient(#000 0 0) right 0 top calc(var(--avo-H) * .15) / calc(100% - var(--avo-W) * .6) calc(var(--avo-H) * .279) no-repeat,
linear-gradient(#000 0 0) right 0 bottom 0 / calc(100% - var(--avo-W) * .6) calc(var(--avo-H) * .282) no-repeat;
mask:
var(--avo-arrow) 0 0 / auto 100% no-repeat,
linear-gradient(#000 0 0) right 0 top calc(var(--avo-H) * .15) / calc(100% - var(--avo-W) * .6) calc(var(--avo-H) * .279) no-repeat,
linear-gradient(#000 0 0) right 0 bottom 0 / calc(100% - var(--avo-W) * .6) calc(var(--avo-H) * .282) no-repeat;
}
body.wpr06-home #home-experience .avo-w__win img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: 30% 50%;
}
/* The AVO360 mark: a masked box painted forest (the PNG is a white mark; masking a box renders
at full strength in Safari). Phones: in the pocket beside the arrowhead, above the shaft. */
body.wpr06-home #home-experience .avo-w__wm {
display: block;
aspect-ratio: 2048 / 801;
background-color: var(--wpa-forest);
-webkit-mask: url("../home-r03/avo360-wordmark.png") no-repeat left center / contain;
mask: url("../home-r03/avo360-wordmark.png") no-repeat left center / contain;
}
body.wpr06-home #home-experience .avo-w__wm--m {
position: absolute;
left: calc(var(--avo-W) * .56);
top: calc(var(--avo-H) * .075 - 12px);
height: 24px;
}
body.wpr06-home #home-experience .avo-w__wm--d,
body.wpr06-home #home-experience .avo-w__cta--d { display: none !important; }
body.wpr06-home #home-experience .avo-w__head { margin-top: var(--wpa-s5); }
body.wpr06-home #home-experience .avo-w__title {
margin: 0 !important;
max-width: none !important;
color: var(--wpa-forest) !important;
font: 600 40px/1 var(--hr-font-display) !important;
letter-spacing: 0 !important;
text-transform: uppercase;
}
body.wpr06-home #home-experience .avo-w__copy {
margin: var(--wpa-s4) 0 0 !important;
max-width: 62ch;
color: var(--wpa-ink-soft) !important;
font: 400 15px/1.55 var(--hr-font-body) !important;
}
body.wpr06-home #home-experience .avo-w__nav { position: static !important; margin-top: 0 !important; margin-bottom: 0 !important; display: block !important; max-height: none !important; overflow: visible !important; }
body.wpr06-home #home-experience .avo-w__links {
list-style: none;
margin: var(--wpa-s4) 0 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: var(--wpa-s4);
}
body.wpr06-home #home-experience .avo-w__links li { list-style: none !important; margin: 0; padding: 0; border-top: 1px solid var(--wpa-cream-line); }
body.wpr06-home #home-experience .avo-w__links li::before,
body.wpr06-home #home-experience .avo-w__links li::marker { content: none !important; }
body.wpr06-home #home-experience .avo-w__links a {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--wpa-s2);
min-height: 48px;
padding: var(--wpa-s2) 0;
color: var(--wpa-forest) !important;
text-decoration: none !important;
font: 600 14px/1.15 var(--hr-font-display);
letter-spacing: .02em;
text-transform: uppercase;
transition: color var(--wpa-dur-fast, 180ms);
}
body.wpr06-home #home-experience .avo-w__links svg {
flex: none;
display: block;
width: 14px;
height: 14px;
color: var(--wpa-olive);
transition: transform var(--wpa-dur) var(--wpa-ease);
}
body.wpr06-home #home-experience .avo-w__links a:hover svg { transform: translateX(4px); }
body.wpr06-home #home-experience .avo-w__links a:focus-visible { outline: 2px solid var(--wpa-forest) !important; outline-offset: 2px; border-radius: 4px; }
body.wpr06-home #home-experience .avo-w__cta--m { display: flex !important; width: 100%; margin-top: var(--wpa-s4); box-sizing: border-box; }
/* Short phones (375 x 667): the whole section fits the screen below the fixed header bar. */
@media (max-width: 999px) and (max-height: 700px) {
body.wpr06-home #home-experience .avo-w { --avo-H: 172px; padding-top: var(--wpa-s3); padding-bottom: var(--wpa-s4); }
body.wpr06-home #home-experience .avo-w__head { margin-top: var(--wpa-s3); }
body.wpr06-home #home-experience .avo-w__title { font-size: 32px !important; }
body.wpr06-home #home-experience .avo-w__copy { margin-top: 10px !important; font-size: 14px !important; line-height: 1.45 !important; }
body.wpr06-home #home-experience .avo-w__links { margin-top: 10px; }
body.wpr06-home #home-experience .avo-w__links a { min-height: 42px; padding: 5px 0; font-size: 13px; }
body.wpr06-home #home-experience .avo-w__cta--m { margin-top: 10px; min-height: 52px; padding-block: 0; }
}
/* Tablets: the same stack, a larger window and two-column copy. */
@media (min-width: 700px) and (max-width: 1199px) {
body.wpr06-home #home-experience .avo-w { --avo-H: clamp(300px, 38vw, 420px); padding: var(--wpa-s8) 0; }
body.wpr06-home #home-experience .avo-w__wm--m { height: 32px; top: calc(var(--avo-H) * .075 - 16px); }
body.wpr06-home #home-experience .avo-w__head { margin-top: var(--wpa-s6); }
body.wpr06-home #home-experience .avo-w__title { font-size: 54px !important; }
body.wpr06-home #home-experience .avo-w__copy { font-size: 17px !important; }
body.wpr06-home #home-experience .avo-w__links { grid-template-columns: repeat(3, 1fr); column-gap: var(--wpa-s6); margin-top: var(--wpa-s6); }
body.wpr06-home #home-experience .avo-w__links a { font-size: 16px; min-height: 56px; }
body.wpr06-home #home-experience .avo-w__cta--m { width: auto; display: inline-flex !important; }
}
/* Desktop: the arrow carries the words. Mark in the pocket above the shaft, headline on the
shaft, intro + Explore AVO360 in the loop's opening, the program on the tail band. */
@media (min-width: 1200px) {
body.wpr06-home #home-experience .avo-w {
--avo-H: clamp(600px, 46vw, 680px);
--avo-bleed: max(var(--wpa-gutter), (100vw - var(--wpa-container)) / 2);
--avo-text-x: calc(var(--avo-W) * .519 + 40px);
padding: var(--wpa-s8) 0;
}
body.wpr06-home #home-experience .avo-w__art { height: var(--avo-H); }
body.wpr06-home #home-experience .avo-w__art > :not(.avo-w__sweep):not(.avo-w__wm) { margin-right: 0; }
body.wpr06-home #home-experience .avo-w__sweep { position: absolute; inset: 0; height: auto; }
body.wpr06-home #home-experience .avo-w__win img { object-position: 0% 50%; }
/* Legibility: deepen the photo under the shaft headline and under the band links. */
body.wpr06-home #home-experience .avo-w__win::before,
body.wpr06-home #home-experience .avo-w__win::after {
content: '';
position: absolute;
z-index: 1;
left: 0;
right: 0;
pointer-events: none;
}
body.wpr06-home #home-experience .avo-w__win::before {
top: calc(var(--avo-H) * .15);
height: calc(var(--avo-H) * .279);
background: linear-gradient(90deg, #16290C00 calc(var(--avo-W) * .48), #16290C66 calc(var(--avo-W) * .519), #16290Cad calc(var(--avo-W) * .519 + 36px), #16290C9e 100%);
}
body.wpr06-home #home-experience .avo-w__win::after {
bottom: 0;
height: calc(var(--avo-H) * .282);
background: linear-gradient(90deg, #16290C00 calc(var(--avo-W) * .3), #16290Cbf calc(var(--avo-W) * .56), #16290Cc7 100%);
}
body.wpr06-home #home-experience .avo-w__wm--m,
body.wpr06-home #home-experience .avo-w__cta--m { display: none !important; }
body.wpr06-home #home-experience .avo-w__wm--d { display: block !important; height: 44px; align-self: center; }
body.wpr06-home #home-experience .avo-w__cta--d { display: inline-flex !important; flex: none; }
body.wpr06-home #home-experience .avo-w__head {
position: absolute;
z-index: 2;
margin: 0;
left: var(--avo-text-x);
right: var(--avo-bleed);
top: 0;
height: calc(var(--avo-H) * .718);
display: grid;
grid-template-rows: calc(var(--avo-H) * .15) calc(var(--avo-H) * .279) 1fr;
}
body.wpr06-home #home-experience .avo-w__title {
align-self: center;
color: var(--wpa-cream) !important;
font-size: clamp(56px, 4.7vw, 72px) !important;
line-height: .96 !important;
text-shadow: 0 1px 16px #0b140699;
}
body.wpr06-home #home-experience .avo-w__body {
align-self: center;
display: flex;
align-items: center;
gap: var(--wpa-s6);
}
body.wpr06-home #home-experience .avo-w__copy { margin: 0 !important; max-width: 31em; font-size: 16px !important; }
body.wpr06-home #home-experience .avo-w__links {
position: absolute;
z-index: 2;
margin: 0;
left: var(--avo-text-x);
right: var(--avo-bleed);
bottom: 0;
height: calc(var(--avo-H) * .282);
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr 1fr;
column-gap: var(--wpa-s6);
align-content: stretch;
}
body.wpr06-home #home-experience .avo-w__links li { display: flex; border-top: 1px solid #fff9dd40; }
body.wpr06-home #home-experience .avo-w__links li:nth-child(-n+3) { border-top: 0; }
body.wpr06-home #home-experience .avo-w__links a {
flex: 1;
min-height: 0;
padding: 0;
color: var(--wpa-cream) !important;
font-size: 17px;
text-shadow: 0 1px 12px #0b1406b3;
}
body.wpr06-home #home-experience .avo-w__links a:hover { color: var(--wpa-lime) !important; }
body.wpr06-home #home-experience .avo-w__links a:focus-visible { outline-color: var(--wpa-lime) !important; }
body.wpr06-home #home-experience .avo-w__links svg { width: 16px; height: 16px; color: var(--wpa-lime); }
}
/* Entrance (once): the window opens in one 360° sweep around the loop, then the words settle. */
body.wpr06-home #home-experience .avo-w.is-armed .avo-w__sweep { --avo-sw: 0deg; }
body.wpr06-home #home-experience .avo-w.is-armed :is(.avo-w__wm, .avo-w__title, .avo-w__body, .avo-w__links li, .avo-w__cta--m) {
opacity: 0;
transform: translateY(12px);
}
body.wpr06-home #home-experience .avo-w.is-armed .wpa-mark::after { clip-path: inset(-20% 100% -20% 0); }
body.wpr06-home #home-experience .avo-w.is-in .avo-w__sweep { --avo-sw: 360deg; transition: --avo-sw 1.5s cubic-bezier(.65, 0, .35, 1); }
body.wpr06-home #home-experience .avo-w.is-in :is(.avo-w__wm, .avo-w__title, .avo-w__body, .avo-w__links li, .avo-w__cta--m) {
opacity: 1;
transform: none;
transition: opacity .7s var(--wpa-ease) .9s, transform .7s var(--wpa-ease) .9s;
}
body.wpr06-home #home-experience .avo-w.is-in .avo-w__body { transition-delay: 1s; }
body.wpr06-home #home-experience .avo-w.is-in .avo-w__links li { transition-delay: calc(1.1s + var(--i) * .06s); }
body.wpr06-home #home-experience .avo-w.is-in .avo-w__cta--m { transition-delay: 1.5s; }
body.wpr06-home #home-experience .avo-w.is-in .wpa-mark::after { clip-path: inset(-20% 0 -20% 0); transition: clip-path .68s cubic-bezier(.55, .05, .25, 1) 1.45s; }
@media (prefers-reduced-motion: reduce) {
body.wpr06-home #home-experience .avo-w.is-armed .avo-w__sweep { --avo-sw: 360deg; }
body.wpr06-home #home-experience .avo-w.is-armed :is(.avo-w__wm, .avo-w__title, .avo-w__body, .avo-w__links li, .avo-w__cta--m) { opacity: 1; transform: none; }
body.wpr06-home #home-experience .avo-w.is-armed .wpa-mark::after { clip-path: none; }
}
/* ---------- 3. Globe: four beats (HM-04, HM-05, HM-06, HM-07) ---------- */
body.wpr06-home #home-experience .globe-story.globe-r03 {
--globe-gutter: max(48px, calc((100% - 1380px) / 2));
height: 400svh;
background: #060f14;
color: #fff;
}
body.wpr06-home #home-experience .globe-r03 .globe-story__sticky { min-height: 0; }
/* Earth: poster first, WebGL swapped in when the chunk reports ready. */
body.wpr06-home #home-experience .globe-r03 .globe-story__earth-wrap {
position: absolute;
left: 71%;
top: 50%;
width: min(56vw, calc(100svh - 150px), 820px);
aspect-ratio: 1;
transform: translate(-50%, -50%);
z-index: 2;
}
body.wpr06-home #home-experience .globe-r03 .globe-story__poster {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
opacity: 1;
transition: opacity 700ms ease;
pointer-events: none;
}
body.wpr06-home #home-experience .globe-r03 .globe-story__earth-wrap:has(.globe-story__earth[data-ready="true"]) .globe-story__poster { opacity: 0; }
body.wpr06-home #home-experience .globe-r03 .globe-story__earth {
position: absolute !important;
inset: 0 !important;
left: 0 !important;
top: 0 !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
transform: none !important;
}
body.wpr06-home #home-experience .globe-r03 .globe-story__earth:not([data-ready="true"])::before { display: none; }
body.wpr06-home #home-experience .globe-r03 .globe-vector-markers {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
pointer-events: none;
z-index: 1;
}
body.wpr06-home #home-experience .globe-r03 .network-globe[data-failed="true"] .globe-vector-markers { display: none; }
body.wpr06-home #home-experience .globe-r03.is-exploring .globe-story__earth-wrap {
left: 66%;
width: min(90vw, 110svh, 1180px);
}
body.wpr06-home #home-experience .globe-r03 .globe-story__veil {
background: linear-gradient(90deg, #060f14 0%, #060f14e6 30%, transparent 62%);
}
/* Reading column: V1 typography (Antonio stack, second line lime), no eyebrow, no legend. */
body.wpr06-home #home-experience .globe-r03 .globe-story__reading {
left: var(--globe-gutter) !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: min(680px, 50%) !important;
}
body.wpr06-home #home-experience .globe-r03 .globe-story__headline {
margin: 0;
font-family: var(--hr-font-display) !important;
font-size: clamp(44px, 5.9vw, 86px) !important;
font-weight: 500;
line-height: .92 !important;
letter-spacing: -.03em !important;
text-transform: uppercase;
}
body.wpr06-home #home-experience .globe-r03 .globe-story__reel {
display: grid !important;
height: auto !important;
overflow: visible !important;
}
body.wpr06-home #home-experience #sourcing.globe-r03 .globe-story__reel-frame {
grid-area: 1 / 1;
display: flex !important;
flex-direction: column;
height: auto !important;
opacity: 0;
transform: translateY(24px);
transition: opacity 360ms ease, transform 520ms var(--wpa-ease);
animation: none !important;
pointer-events: none;
}
body.wpr06-home #home-experience #sourcing.globe-r03 .globe-story__reel-frame.is-active {
opacity: 1;
transform: none;
transition-delay: 120ms;
}
body.wpr06-home #home-experience .globe-r03 .globe-story__reel-frame > span,
body.wpr06-home #home-experience .globe-r03 .globe-story__reel-frame > em {
display: block;
white-space: normal !important;
}
body.wpr06-home #home-experience .globe-r03 .globe-story__reel-frame > em {
font-style: normal;
color: var(--wpa-lime);
}
body.wpr06-home #home-experience .globe-r03 .globe-story__copy-deck {
display: grid;
margin: 28px 0 0;
max-width: 520px;
min-height: 0;
}
body.wpr06-home #home-experience #sourcing.globe-r03 .globe-story__panel {
grid-area: 1 / 1;
display: block !important;
opacity: 0;
visibility: hidden;
transform: translateY(14px);
transition: opacity 360ms ease, transform 600ms var(--wpa-ease), visibility 0s linear 360ms;
}
body.wpr06-home #home-experience #sourcing.globe-r03 .globe-story__panel.is-active {
opacity: 1;
visibility: visible;
transform: none;
transition-delay: 200ms, 200ms, 0s;
}
body.wpr06-home #home-experience .globe-r03 .globe-story__panel p {
margin: 0;
color: #d3dbdf;
font: 400 17px/1.65 var(--hr-font-body);
max-width: 44ch;
}
body.wpr06-home #home-experience .globe-r03 .globe-story__panel p.globe-story__lede {
color: #fff;
font-size: clamp(18px, 1.5vw, 21px);
line-height: 1.5;
}
/* Beat 1: data strip */
body.wpr06-home #home-experience .globe-r03 .globe-story__stats {
display: grid;
grid-template-columns: repeat(3, auto);
justify-content: start;
gap: 16px 40px;
margin: 32px 0 0;
padding: 0;
list-style: none;
}
body.wpr06-home #home-experience .globe-r03 .globe-story__stats li { margin: 0; padding: 0; list-style: none; }
body.wpr06-home #home-experience .globe-r03 .globe-story__stats strong {
display: block;
color: var(--wpa-lime);
font: 600 clamp(40px, 4.4vw, 68px)/.95 var(--hr-font-display);
letter-spacing: -.01em;
}
body.wpr06-home #home-experience .globe-r03 .globe-story__stats span {
display: block;
margin-top: 8px;
color: #c4cdd1;
font: 600 12px/1.3 var(--hr-font-body);
letter-spacing: .1em;
text-transform: uppercase;
}
/* Beat 2: origin chips */
body.wpr06-home #home-experience .globe-r03 .globe-story__chips {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 26px 0 0;
}
body.wpr06-home #home-experience .globe-r03 .globe-story__chips button {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 44px;
padding: 10px 18px;
border: 1px solid rgba(255, 255, 255, .32);
border-radius: var(--wpa-radius-pill) !important;
background: rgba(255, 255, 255, .04);
color: #fff;
font: 700 13px/1 var(--hr-font-body);
letter-spacing: .06em;
text-transform: uppercase;
cursor: pointer;
transition: background-color var(--wpa-dur-fast), border-color var(--wpa-dur-fast), color var(--wpa-dur-fast);
}
body.wpr06-home #home-experience .globe-r03 .globe-story__chips button i {
flex: 0 0 9px;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--wpa-lime);
}
body.wpr06-home #home-experience .globe-r03 .globe-story__chips button:is(:hover, :focus-visible) { border-color: var(--wpa-lime); }
body.wpr06-home #home-experience .globe-r03 .globe-story__chips button[aria-pressed="true"] {
background: var(--wpa-lime);
border-color: var(--wpa-lime);
color: var(--wpa-forest);
}
body.wpr06-home #home-experience .globe-r03 .globe-story__chips button[aria-pressed="true"] i { background: var(--wpa-forest); }
/* Wide reading columns balance five controls, while tablet/phone keep their fitted flows. */
@media (min-width: 1200px) {
body.wpr06-home #home-experience .globe-r03 .globe-story__chips {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
}
body.wpr06-home #home-experience .globe-r03 .globe-story__chips button {
grid-column: span 2;
justify-content: center;
white-space: nowrap;
}
body.wpr06-home #home-experience .globe-r03 .globe-story__chips button:nth-child(4) { grid-column: 2 / span 2; }
body.wpr06-home #home-experience .globe-r03 .globe-story__chips button:nth-child(5) { grid-column: 4 / span 2; }
}
/* Beat 3: distribution centers (diamonds match the globe's amber markers) */
body.wpr06-home #home-experience .globe-r03 .globe-story__dcs {
display: grid;
grid-template-columns: repeat(2, minmax(0, max-content));
gap: 10px 40px;
margin: 26px 0 0;
padding: 0;
list-style: none;
}
body.wpr06-home #home-experience .globe-r03 .globe-story__dcs li {
display: flex;
align-items: center;
gap: 12px;
margin: 0;
padding: 0;
list-style: none;
color: #fff;
font: 600 15px/1.3 var(--hr-font-body);
}
body.wpr06-home #home-experience .globe-r03 .globe-story__dcs i {
box-sizing: border-box;
width: 10px;
height: 10px;
border: 2px solid #ffcb72;
border-radius: 1px;
transform: rotate(45deg);
flex: none;
}
/* Beat 4: six pills + button + explorer link */
body.wpr06-home #home-experience .globe-r03 .globe-story__pills {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 24px 0 0;
padding: 0;
list-style: none;
}
body.wpr06-home #home-experience .globe-r03 .globe-story__pills li {
margin: 0;
padding: 9px 16px;
border: 1px solid var(--wpa-lime);
border-radius: var(--wpa-radius-pill);
color: #fff;
font: 700 13px/1 var(--hr-font-body);
letter-spacing: .06em;
text-transform: uppercase;
list-style: none;
}
body.wpr06-home #home-experience .globe-r03 .globe-story__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px 28px;
margin-top: 30px;
}
body.wpr06-home #home-experience .globe-r03 .globe-story__explore {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 6px 0;
border: 0;
border-bottom: 2px solid var(--wpa-lime);
border-radius: 0 !important;
background: transparent;
color: #fff;
font: 700 15px/1.3 var(--hr-font-body);
cursor: pointer;
}
body.wpr06-home #home-experience .globe-r03 .globe-story__explore svg { transition: transform 220ms ease; }
body.wpr06-home #home-experience .globe-r03 .globe-story__explore:hover svg { transform: translate(3px, -3px); }
/* Ticks: four clickable bars, no numerals. */
body.wpr06-home #home-experience .globe-r03 .globe-story__footer {
left: var(--globe-gutter);
right: auto;
bottom: 40px;
display: block;
}
body.wpr06-home #home-experience .globe-r03 .globe-story__ticks {
display: flex;
gap: 6px;
}
body.wpr06-home #home-experience .globe-r03 .globe-story__ticks button {
all: unset;
display: grid;
place-items: center;
width: 44px;
height: 44px;
cursor: pointer;
transition: width var(--wpa-dur) var(--wpa-ease);
}
body.wpr06-home #home-experience .globe-r03 .globe-story__ticks button i {
display: block;
width: 28px;
height: 3px;
border-radius: 2px;
background: rgba(255, 255, 255, .28);
transition: background-color var(--wpa-dur-fast), width var(--wpa-dur) var(--wpa-ease);
}
body.wpr06-home #home-experience .globe-r03 .globe-story__ticks button:is(.is-past, .is-active) i { background: var(--wpa-lime); }
body.wpr06-home #home-experience .globe-r03 .globe-story__ticks button.is-active { width: 72px; }
body.wpr06-home #home-experience .globe-r03 .globe-story__ticks button.is-active i { width: 56px; }
body.wpr06-home #home-experience .globe-r03 .globe-story__ticks button:hover i { background: var(--wpa-lime-hover); }
body.wpr06-home #home-experience .globe-r03 .globe-story__ticks button:focus-visible { outline: 2px solid var(--wpa-lime); outline-offset: 2px; border-radius: 4px; }
body.wpr06-home #home-experience .globe-r03 .globe-story__static { display: none; }
/* Oct 2 review #5 + polish: intentional line breaks in the beat ledes, stat labels clear of
the numerals' descenders (the comma sat on "Grower Partnerships"). */
body.wpr06-home #home-experience .globe-r03 .globe-story__line { display: block; }
/* Same button voice as every other Home button (a legacy globe rule reset the tracking). */
body.wpr06-home #home-experience .globe-r03 .globe-story__actions .wpa-btn { letter-spacing: .14em !important; }
@media (max-width: 700px) { body.wpr06-home #home-experience .globe-r03 .globe-story__actions .wpa-btn { letter-spacing: .08em !important; } }
body.wpr06-home #home-experience .globe-r03 .globe-story__stats span { margin-top: 14px; }
body.wpr06-home #home-experience .globe-r03 .globe-story__stats strong { line-height: 1; }
/* Explorer dialog: the DC wording in the panel. */
body.wpr06-home #home-experience .globe-r03 .globe-explorer__panel small { display: none; }
@media (max-width: 1150px) and (min-width: 701px) {
body.wpr06-home #home-experience .globe-story.globe-r03 { --globe-gutter: 40px; }
body.wpr06-home #home-experience .globe-r03 .globe-story__reading { width: min(520px, 50%) !important; }
body.wpr06-home #home-experience .globe-r03 .globe-story__headline { font-size: clamp(40px, 6.4vw, 72px) !important; }
body.wpr06-home #home-experience .globe-r03 .globe-story__earth-wrap { left: 74%; width: min(60vw, calc(100svh - 150px), 700px); }
}
@media (max-height: 760px) and (min-width: 701px) {
body.wpr06-home #home-experience .globe-r03 .globe-story__headline { font-size: clamp(40px, 5.6vw, 72px) !important; }
body.wpr06-home #home-experience .globe-r03 .globe-story__copy-deck { margin-top: 18px; }
body.wpr06-home #home-experience .globe-r03 .globe-story__stats strong { font-size: clamp(34px, 3.6vw, 52px); }
}
@media (max-width: 700px) {
body.wpr06-home #home-experience .globe-story.globe-r03 { --globe-gutter: 20px; height: 320svh; }
body.wpr06-home #home-experience .globe-r03:not(.is-exploring) .globe-story__sticky {
display: block !important;
min-height: 0 !important;
padding: 0 !important;
}
body.wpr06-home #home-experience .globe-r03:not(.is-exploring) .globe-story__reading {
inset: 80px 20px auto !important;
position: absolute !important;
transform: none !important;
width: auto !important;
z-index: 7;
}
body.wpr06-home #home-experience .globe-r03 .globe-story__headline { font-size: clamp(36px, 10.4vw, 46px) !important; }
body.wpr06-home #home-experience .globe-r03 .globe-story__copy-deck { margin-top: 16px; }
body.wpr06-home #home-experience .globe-r03 .globe-story__panel p { font-size: 15px; line-height: 1.55; }
body.wpr06-home #home-experience .globe-r03 .globe-story__panel p.globe-story__lede { font-size: 17px; }
body.wpr06-home #home-experience .globe-r03 .globe-story__stats { gap: 12px 22px; margin-top: 20px; }
body.wpr06-home #home-experience .globe-r03 .globe-story__stats strong { font-size: clamp(30px, 8.6vw, 38px); }
body.wpr06-home #home-experience .globe-r03 .globe-story__stats span { font-size: 10px; margin-top: 5px; }
body.wpr06-home #home-experience .globe-r03 .globe-story__chips { gap: 6px; margin-top: 18px; }
body.wpr06-home #home-experience .globe-r03 .globe-story__chips button { min-height: 40px; padding: 8px 12px; font-size: 11px; }
body.wpr06-home #home-experience .globe-r03 .globe-story__dcs { gap: 6px 18px; margin-top: 18px; }
body.wpr06-home #home-experience .globe-r03 .globe-story__dcs li { font-size: 13px; }
body.wpr06-home #home-experience .globe-r03 .globe-story__pills { gap: 6px; margin-top: 16px; }
body.wpr06-home #home-experience .globe-r03 .globe-story__pills li { padding: 7px 12px; font-size: 11px; }
body.wpr06-home #home-experience .globe-r03 .globe-story__actions { gap: 12px 20px; margin-top: 20px; }
body.wpr06-home #home-experience .globe-r03 .globe-story__actions .wpa-btn { width: 100%; }
body.wpr06-home #home-experience .globe-r03 .globe-story__explore { font-size: 14px; }
body.wpr06-home #home-experience .globe-r03:not(.is-exploring) .globe-story__earth-wrap {
left: 50%;
top: 84%;
width: min(132vw, 64svh, 580px);
}
body.wpr06-home #home-experience .globe-r03 .globe-story__veil {
background: linear-gradient(180deg, #060f14 0%, #060f14e6 40%, transparent 68%);
}
body.wpr06-home #home-experience .globe-r03:not(.is-exploring) .globe-story__sticky::after {
background: linear-gradient(180deg, transparent, #060f14 92%);
content: '';
inset: 88% 0 0;
pointer-events: none;
position: absolute;
z-index: 3;
}
body.wpr06-home #home-experience .globe-r03 .globe-story__footer {
display: block !important;
left: 20px;
right: auto;
bottom: max(16px, env(safe-area-inset-bottom));
z-index: 8;
}
body.wpr06-home #home-experience .globe-r03.is-exploring .globe-story__footer { display: none !important; }
body.wpr06-home #home-experience .globe-r03 .globe-story__ticks button { width: 36px; height: 36px; }
body.wpr06-home #home-experience .globe-r03 .globe-story__ticks button i { width: 22px; }
body.wpr06-home #home-experience .globe-r03 .globe-story__ticks button.is-active { width: 56px; }
body.wpr06-home #home-experience .globe-r03 .globe-story__ticks button.is-active i { width: 44px; }
}
/* Reduced motion (and no JavaScript, HM-07): no pin; the four beats stack as static panels beside a still globe. */
@media (prefers-reduced-motion: reduce), (scripting: none) {
body.wpr06-home #home-experience .globe-story.globe-r03 { height: auto !important; min-height: 0; }
body.wpr06-home #home-experience .globe-r03:not(.is-exploring) .globe-story__sticky {
position: relative !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(280px, 42%);
gap: 48px;
align-items: start;
height: auto !important;
min-height: 0 !important;
padding: 96px var(--globe-gutter) !important;
}
body.wpr06-home #home-experience .globe-r03:not(.is-exploring) .globe-story__reading { display: none !important; }
body.wpr06-home #home-experience .globe-r03:not(.is-exploring) .globe-story__footer { display: none !important; }
body.wpr06-home #home-experience .globe-r03:not(.is-exploring) .globe-story__earth-wrap {
position: sticky !important;
top: 96px;
left: auto !important;
width: 100% !important;
max-width: 460px;
justify-self: center;
transform: none !important;
order: 2;
}
body.wpr06-home #home-experience .globe-r03 .globe-story__static {
display: grid;
gap: 56px;
z-index: 4;
order: 1;
}
body.wpr06-home #home-experience .globe-r03 .globe-story__static h3 {
margin: 0 0 16px;
font: 500 clamp(36px, 5vw, 64px)/.92 var(--hr-font-display);
letter-spacing: -.02em;
text-transform: uppercase;
}
body.wpr06-home #home-experience .globe-r03 .globe-story__static h3 em { display: block; font-style: normal; color: var(--wpa-lime); }
body.wpr06-home #home-experience #sourcing.globe-r03 .globe-story__reel-frame,
body.wpr06-home #home-experience #sourcing.globe-r03 .globe-story__panel { transition: none !important; }
body.wpr06-home #home-experience .globe-r03 .globe-story__poster { transition: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 700px) {
body.wpr06-home #home-experience .globe-r03:not(.is-exploring) .globe-story__sticky { grid-template-columns: 1fr; padding: 72px 20px !important; }
body.wpr06-home #home-experience .globe-r03:not(.is-exploring) .globe-story__earth-wrap { position: relative !important; top: auto; max-width: 320px; order: 0; }
}
/* HM-08/HM-09, Corey Oct 3: calmer Smart Way, then a directly selectable ripening beat.
Adapted from westpak-media/concepts/home-smart-ripen/1; no decorative numbers. */
body.wpr06-home #home-experience .hr-smart {
position: relative; z-index: 9; margin-top: -60svh; padding: 0 !important;
border-radius: calc(28px * var(--hr-smart-corners,1)) calc(28px * var(--hr-smart-corners,1)) 0 0; box-shadow: 0 -24px 60px rgba(0,0,0,.28);
}
body.wpr06-home #home-experience .hr-smart__pin { padding: clamp(72px,8vw,120px) var(--wpa-gutter) clamp(24px,3vw,40px); }
body.wpr06-home #home-experience .hr-smart__inner {
max-width: var(--wpa-container); margin: 0 auto; display: grid;
grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: end; gap: clamp(40px,6vw,96px);
}
body.wpr06-home #home-experience .hr-smart__title {
margin: 0; color: var(--wpa-forest); font: 600 clamp(44px,5.6vw,88px)/.98 var(--hr-font-display);
letter-spacing: -.01em; text-wrap: balance;
}
body.wpr06-home #home-experience .hr-smart__lede { margin: 24px 0 0; color: var(--wpa-ink-soft); font: 400 clamp(17px,1.5vw,20px)/1.5 var(--hr-font-body); }
body.wpr06-home #home-experience .hr-smart__statements { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--wpa-cream-line); }
body.wpr06-home #home-experience .hr-smart__statements li {
margin: 0; padding: clamp(20px,2.4vw,28px) 0; border-top: 1px solid var(--wpa-cream-line);
list-style: none; color: var(--wpa-forest); font: 500 clamp(24px,2.5vw,34px)/1.16 var(--hr-font-display); text-transform: uppercase;
}
body.wpr06-home #home-experience .hr-smart__bridge { display: inline-flex; min-height: 44px; margin-top: 12px; font: 600 14px/1.4 var(--hr-font-body); text-transform: none; }
/* HM-09: Corey's selected editorial ripening concept. Its arrow and pedestal
are deliberately absent; the real fruit is centered beside the left readout. */
body.wpr06-home #home-experience .hr-ripening {
--hr-ripen-surface: #f8f5df; --hr-ripen-ink: #254517; --hr-ripen-line: #dcdcc5;
--hr-ripen-leading-space: clamp(24px,3vw,40px);
position: relative; z-index: 9;
background: linear-gradient(to bottom, var(--wpa-cream), var(--hr-ripen-surface) var(--hr-ripen-leading-space));
padding: max(var(--hr-ripen-leading-space), var(--hr-ripen-top,24px), calc(64px + env(safe-area-inset-top,0px) + 16px)) var(--wpa-gutter) clamp(64px,7vw,100px);
scroll-margin-top: 0;
}
body.wpr06-home #home-experience .hr-ripening__inner {
max-width: var(--wpa-container); margin: 0 auto; display: grid;
grid-template-columns: minmax(0,1fr) minmax(0,1.13fr); column-gap: clamp(40px,5vw,80px); row-gap: 0;
grid-template-areas: 'intro viewer' 'readout viewer' 'action viewer' 'rail rail';
}
/* Native scroll adds less than one viewport of travel, only when the complete
desktop composition or phone reader fits. Unsupported/short layouts flow. */
body.wpr06-home #home-experience .hr-ripening__story,
body.wpr06-home #home-experience .hr-ripening__pin { display: contents; }
body.wpr06-home #home-experience .hr-ripening[data-scroll-mode=desktop] .hr-ripening__inner { position: sticky; top: var(--hr-ripen-top); }
body.wpr06-home #home-experience .hr-ripening[data-scroll-mode=desktop]::after { content: ''; display: block; height: var(--hr-ripen-travel); }
body.wpr06-home #home-experience .hr-ripening__intro { grid-area: intro; }
body.wpr06-home #home-experience .hr-ripening__title { margin: 0; color: var(--hr-ripen-ink); font: 600 clamp(36px,3.45vw,58px)/1.18 var(--hr-font-display); letter-spacing: -.035em; }
body.wpr06-home #home-experience .hr-ripening__title > span { color: #51652a; }
body.wpr06-home #home-experience .hr-ripening__lede { max-width: 515px; margin: 28px 0 0; color: #59614d; font: 400 clamp(14px,1.05vw,16px)/1.8 var(--hr-font-body); }
body.wpr06-home #home-experience .hr-ripening__viewer { grid-area: viewer; align-self: stretch; display: grid; place-items: center; min-width: 0; }
body.wpr06-home #home-experience .hr-ripen__fruit {
position: relative; display: block; height: clamp(340px,49svh,480px); aspect-ratio: 685/990; width: auto; max-width: 85%;
padding: 0; border: 0; background: transparent; cursor: pointer; touch-action: pan-y; -webkit-tap-highlight-color: transparent;
}
body.wpr06-home #home-experience .hr-ripen__fruit:focus-visible { outline: 2px solid var(--hr-ripen-ink); outline-offset: 8px; border-radius: 24px; }
body.wpr06-home #home-experience .hr-ripen__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; filter: drop-shadow(8px 17px 12px rgba(64,85,34,.11)); }
body.wpr06-home #home-experience .hr-ripen__img.is-previous { opacity: 1; }
body.wpr06-home #home-experience .hr-ripen__img.is-current { z-index: 2; opacity: 1; animation: ripe-crossfade 520ms ease both; }
@keyframes ripe-crossfade { from { opacity: 0; } to { opacity: 1; } }
body.wpr06-home #home-experience .hr-ripen__navigation { grid-area: rail; align-self: end; width: 100%; margin-top: 40px; }
body.wpr06-home #home-experience .hr-ripen__tabs { position: relative; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); width: 100%; gap: 16px; border-top: 1px solid #ced3b6; padding-top: 20px; }
body.wpr06-home #home-experience .hr-ripen__tabs::before { content: ''; position: absolute; top: -2px; left: 0; width: 100%; height: 3px; background: var(--hr-ripen-ink); transform-origin: left; transform: scaleX(calc((var(--hr-ripen-stage,0) + 1) / 5)); transition: transform 520ms cubic-bezier(.2,.65,.2,1); }
body.wpr06-home #home-experience .hr-ripen__tabs button {
position: relative; display: flex; align-items: center; justify-content: center; gap: 10px;
padding: 8px 4px; min-height: 48px; min-width: 0; border: 0; border-radius: 4px !important; background: transparent; color: var(--hr-ripen-ink);
font: 500 20px/1.2 var(--hr-font-display); text-transform: uppercase; cursor: pointer; opacity: .76;
transition: opacity 200ms ease, background-color 200ms ease;
}
body.wpr06-home #home-experience .hr-ripen__dot { flex: none; width: 10px; height: 10px; border: 0; border-radius: 50%; background: var(--ripe-color); outline: 1px solid transparent; outline-offset: 5px; transition: outline-color 250ms ease; }
body.wpr06-home #home-experience .hr-ripen__tabs button[aria-selected=true] { opacity: 1; background: rgba(255,255,255,.28); }
body.wpr06-home #home-experience .hr-ripen__tabs button[aria-selected=true] .hr-ripen__dot { outline-color: var(--ripe-color); }
/* Enlarged text keeps each complete stage name inside its own touch target. */
body.wpr06-home #home-experience .hr-ripen__tabs button > span:last-child { min-width: 0; max-width: 100%; }
body.wpr06-home #home-experience .hr-ripen__tabs button:focus-visible,
body.wpr06-home #home-experience .hr-ripen__next:focus-visible { outline: 2px solid var(--hr-ripen-ink); outline-offset: 4px; }
body.wpr06-home #home-experience .hr-ripen__navigation-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 8px; }
body.wpr06-home #home-experience .hr-ripen__navigation-footer p { margin: 0; color: #687152; font: 400 11px/1.5 var(--hr-font-body); }
body.wpr06-home #home-experience .hr-ripen__scroll-cue > span { margin: 0 12px; color: #a5ad8a; }
body.wpr06-home #home-experience .hr-ripen__next { min-height: 44px; padding: 8px 0 8px 16px; border: 0; background: transparent; color: var(--hr-ripen-ink); cursor: pointer; font: 400 12px/1.4 var(--hr-font-body); }
body.wpr06-home #home-experience .hr-ripening:is([data-scroll-mode=flow],[data-scroll-mode=reduced]) .hr-ripen__scroll-cue { display: none; }
body.wpr06-home #home-experience .hr-ripening__readout { display: grid; align-content: start; grid-area: readout; max-width: 470px; margin-top: 36px; min-height: 184px; padding-top: 24px; border-top: 1px solid var(--hr-ripen-line); }
body.wpr06-home #home-experience .hr-ripening__detail { grid-area: 1 / 1; visibility: hidden; }
body.wpr06-home #home-experience .hr-ripening__detail.is-current { visibility: visible; }
body.wpr06-home #home-experience .hr-ripening__readout-heading { display: flex; align-items: center; gap: 20px; }
body.wpr06-home #home-experience .hr-ripening__name { margin: 0; color: var(--hr-ripen-ink); font: 500 32px/1.1 var(--hr-font-display); text-transform: uppercase; }
body.wpr06-home #home-experience .hr-ripening__pressure { margin: 16px 0 8px; font: 700 13px/1.5 var(--hr-font-body); color: var(--hr-ripen-ink); }
body.wpr06-home #home-experience .hr-ripening__description { margin: 0; max-width: 410px; color: #60654f; font: 400 14px/1.75 var(--hr-font-body); }
body.wpr06-home #home-experience .hr-ripening__action { grid-area: action; margin: 20px 0 0; }
@media (hover:hover) {
body.wpr06-home #home-experience .hr-ripen__tabs button:hover { opacity: 1; background: rgba(255,255,255,.3); }
body.wpr06-home #home-experience .hr-ripen__next:hover { text-decoration: underline; text-underline-offset: 4px; }
}
@media (max-width:999px) {
body.wpr06-home #home-experience .hr-ripening { --hr-ripen-leading-space: 16px; }
body.wpr06-home #home-experience .hr-smart__inner { grid-template-columns: minmax(0,1fr); gap: 36px; }
body.wpr06-home #home-experience .hr-smart__title { font-size: clamp(40px,10.6vw,72px); }
body.wpr06-home #home-experience .hr-smart__statements li { font-size: clamp(24px,6.4vw,34px); }
body.wpr06-home #home-experience .hr-ripening__inner { grid-template-columns: minmax(0,1fr); grid-template-areas: 'title' 'story' 'lede' 'action'; }
body.wpr06-home #home-experience .hr-ripening__intro { display: contents; }
body.wpr06-home #home-experience .hr-ripening__title { grid-area: title; text-align: center; font-size: clamp(31px,6.7vw,45px); letter-spacing: -.03em; }
body.wpr06-home #home-experience .hr-ripening__story { display: block; grid-area: story; margin-top: 28px; }
body.wpr06-home #home-experience .hr-ripening__story,
body.wpr06-home #home-experience .hr-ripening__pin,
body.wpr06-home #home-experience .hr-ripen__navigation { min-width: 0; max-width: 100%; }
body.wpr06-home #home-experience .hr-ripening__pin { display: grid; grid-template-columns: minmax(0,1fr); grid-template-areas: 'viewer' 'rail' 'readout'; background: var(--hr-ripen-surface); }
body.wpr06-home #home-experience .hr-ripening[data-scroll-mode=mobile] .hr-ripening__pin { position: sticky; top: var(--hr-ripen-top); }
body.wpr06-home #home-experience .hr-ripening[data-scroll-mode=mobile] .hr-ripening__story::after { content: ''; display: block; height: var(--hr-ripen-travel); }
body.wpr06-home #home-experience .hr-ripen__fruit { height: clamp(190px,27svh,260px); }
body.wpr06-home #home-experience .hr-ripen__navigation { margin-top: 24px; }
body.wpr06-home #home-experience .hr-ripen__tabs { grid-template-columns: repeat(5,minmax(min-content,1fr)); gap: 4px; padding-top: 16px; padding-bottom: 6px; overflow-x: auto; }
body.wpr06-home #home-experience .hr-ripen__tabs button { flex-direction: column; gap: 10px; padding: 8px 4px; min-height: 64px; font-size: 13px; line-height: 1.2; }
body.wpr06-home #home-experience .hr-ripen__tabs button:focus-visible { outline-offset: -2px; }
body.wpr06-home #home-experience .hr-ripen__dot { width: 8px; height: 8px; }
body.wpr06-home #home-experience .hr-ripen__navigation-footer { margin-top: 4px; gap: 8px; }
body.wpr06-home #home-experience .hr-ripen__navigation-footer p { font-size: 10px; }
body.wpr06-home #home-experience .hr-ripen__scroll-cue > span { margin: 0 6px; }
body.wpr06-home #home-experience .hr-ripen__next { font-size: 11px; }
body.wpr06-home #home-experience .hr-ripening__readout { max-width: none; min-height: 160px; margin-top: 20px; padding-top: 0; border-top: 0; text-align: center; }
body.wpr06-home #home-experience .hr-ripening__readout-heading { justify-content: center; gap: 12px; }
body.wpr06-home #home-experience .hr-ripening__name { font-size: 27px; }
body.wpr06-home #home-experience .hr-ripening__pressure { margin-top: 12px; font-size: 12px; }
body.wpr06-home #home-experience .hr-ripening__description { margin-inline: auto; font-size: 14px; line-height: 1.65; }
body.wpr06-home #home-experience .hr-ripening__lede { grid-area: lede; max-width: none; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--hr-ripen-line); font-size: 15px; }
body.wpr06-home #home-experience .hr-ripening__action .wpa-btn { width: 100%; }
}
@media (max-width:700px) { body.wpr06-home #home-experience .hr-smart { border-radius: calc(20px * var(--hr-smart-corners,1)) calc(20px * var(--hr-smart-corners,1)) 0 0; } }
@media (prefers-reduced-motion:reduce) {
body.wpr06-home #home-experience .hr-ripen__img.is-current { animation: none; }
body.wpr06-home #home-experience .hr-ripen__tabs::before,
body.wpr06-home #home-experience .hr-ripen__tabs button,
body.wpr06-home #home-experience .hr-ripen__dot { transition: none; }
}
/* ---------- 5. Products & Programs teaser (HM-10; Oct 2 review #9) ----------
Three programs as themed panels in the Products page's language (same backgrounds and bag
art), each linking to its slide in the Products bag explorer. */
body.wpr06-home #home-experience .hr-bags__inner { max-width: var(--wpa-container); margin: 0 auto; }
body.wpr06-home #home-experience .hr-bags__head { max-width: 760px; margin: 0 auto var(--wpa-s7); text-align: center; }
body.wpr06-home #home-experience .hr-bags__head .wpa-lede { margin-inline: auto; text-wrap: balance; }
body.wpr06-home #home-experience .hr-bags__carousel { --wpa-per-view: 3; --wpa-carousel-gap: 24px; }
body.wpr06-home #home-experience .hr-bag { min-width: 0; }
body.wpr06-home #home-experience .hr-bag__link {
display: block;
border-radius: var(--wpa-radius);
overflow: hidden;
background: var(--wpa-cream-2);
box-shadow: inset 0 0 0 1px var(--wpa-cream-line);
color: var(--wpa-forest);
text-decoration: none !important;
transition: transform var(--wpa-dur) var(--wpa-ease), box-shadow var(--wpa-dur) var(--wpa-ease);
}
body.wpr06-home #home-experience .hr-bag__link:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(34, 63, 19, .16); }
body.wpr06-home #home-experience .hr-bag__link:hover .hr-chip { transform: translateX(3px); }
body.wpr06-home #home-experience .hr-bag__link:focus-visible { outline: 3px solid var(--wpa-forest); outline-offset: 3px; }
body.wpr06-home #home-experience .hr-bag__scene {
position: relative;
display: grid;
place-items: center;
aspect-ratio: 1 / 1;
overflow: hidden;
isolation: isolate;
}
body.wpr06-home #home-experience .hr-bag__img {
position: relative;
z-index: 1;
width: auto;
height: 86%;
max-width: 82%;
object-fit: contain;
filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .26));
transition: transform 700ms var(--wpa-ease);
}
body.wpr06-home #home-experience .hr-bag__link:hover .hr-bag__img { transform: translateY(-6px) rotate(-1.5deg); }
body.wpr06-home #home-experience .hr-bag--organic .hr-bag__scene {
background:
radial-gradient(circle at 50% 46%, rgba(255, 255, 255, .26) 0 24%, transparent 46%),
repeating-conic-gradient(from 0deg at 50% 46%, #F5C400 0 8deg, #FFD93B 8deg 16deg);
}
body.wpr06-home #home-experience .hr-bag--lil .hr-bag__scene {
background: radial-gradient(90% 70% at 50% 58%, #3F6A22 0%, var(--wpa-forest) 60%, var(--wpa-forest-deep) 100%);
}
body.wpr06-home #home-experience .hr-bag--lil .hr-bag__img { height: 92%; }
body.wpr06-home #home-experience .hr-bag__bg {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 60% 50%;
}
body.wpr06-home #home-experience .hr-bag__fan { position: absolute; inset: 7% 0 5%; z-index: 1; }
body.wpr06-home #home-experience .hr-bag__fan-bag {
position: absolute;
top: 0;
left: 50%;
height: 100%;
width: auto;
aspect-ratio: 1;
object-fit: contain;
filter: drop-shadow(0 20px 26px rgba(0, 0, 0, .3));
transition: transform 700ms var(--wpa-ease);
}
body.wpr06-home #home-experience .hr-bag__fan-bag--california { z-index: 3; transform: translateX(-50%); }
body.wpr06-home #home-experience .hr-bag__fan-bag--colombia { z-index: 2; transform: translateX(-88%) scale(.74) rotate(-7deg); transform-origin: 50% 90%; }
body.wpr06-home #home-experience .hr-bag__fan-bag--mexico { z-index: 2; transform: translateX(-12%) scale(.74) rotate(7deg); transform-origin: 50% 90%; }
body.wpr06-home #home-experience .hr-bag__link:hover .hr-bag__fan-bag--colombia { transform: translateX(-96%) scale(.74) rotate(-10deg); }
body.wpr06-home #home-experience .hr-bag__link:hover .hr-bag__fan-bag--mexico { transform: translateX(-4%) scale(.74) rotate(10deg); }
body.wpr06-home #home-experience .hr-bag__name {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 20px 22px 22px 24px;
}
body.wpr06-home #home-experience .hr-bag__words { display: grid; gap: 4px; min-width: 0; }
body.wpr06-home #home-experience .hr-bag__name h3 {
margin: 0;
color: var(--wpa-forest);
font: 600 clamp(24px, 2.1vw, 32px)/1.02 var(--hr-font-display);
text-transform: uppercase;
}
body.wpr06-home #home-experience .hr-bag__sub {
color: var(--wpa-olive);
font: 500 clamp(14px, 1.1vw, 16px)/1.2 var(--hr-font-display);
letter-spacing: .03em;
text-transform: uppercase;
}
body.wpr06-home #home-experience .hr-bags__controls { justify-content: space-between; }
@media (min-width: 1000px) { body.wpr06-home #home-experience .hr-bags__controls { display: none; } }
body.wpr06-home #home-experience .hr-bags__actions { justify-content: center; margin-top: var(--wpa-s7); }
@media (max-width: 999px) { body.wpr06-home #home-experience .hr-bags__carousel { --wpa-per-view: 2; } }
@media (max-width: 700px) {
body.wpr06-home #home-experience .hr-bags__carousel { --wpa-per-view: 1.15; --wpa-carousel-gap: 16px; }
body.wpr06-home #home-experience .hr-bags__head { text-align: left; }
body.wpr06-home #home-experience .hr-bags__head .wpa-lede { margin-inline: 0; text-wrap: pretty; } /* balance left a 250px column on phones */
body.wpr06-home #home-experience .hr-bags__actions .wpa-btn { width: 100%; }
}
/* ---------- 6. More Ways to Grow (HM-11; Oct 2 review #10) ----------
Two featured programs: side by side on desktop, the carousel on phones/tablets. */
body.wpr06-home #home-experience .hr-new__inner { max-width: var(--wpa-container); margin: 0 auto; }
body.wpr06-home #home-experience .hr-new__title { margin: 0 0 var(--wpa-s7); text-align: center; }
body.wpr06-home #home-experience .hr-new__carousel { --wpa-per-view: 1; --wpa-carousel-gap: 24px; }
@media (min-width: 1000px) {
body.wpr06-home #home-experience .hr-new__carousel { --wpa-per-view: 2; }
body.wpr06-home #home-experience .hr-new__controls { display: none !important; }
}
/* Each panel: a full-bleed photo with the copy overlaid on its sky (Vincent's call-out idea,
Oct 2), over a soft scrim in the panel's tone. Colombia: cream type on the dusk sky;
Organic: forest type on the bright haze, the bag left clear in the lower right. */
body.wpr06-home #home-experience .hr-panel {
position: relative;
height: clamp(560px, 74vh, 740px);
border-radius: var(--wpa-radius-lg);
overflow: hidden;
isolation: isolate;
background: var(--wpa-forest-deep);
}
body.wpr06-home #home-experience .hr-panel__media { position: absolute; inset: 0; z-index: 0; display: block; }
body.wpr06-home #home-experience .hr-panel__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--wpa-ease); }
body.wpr06-home #home-experience .hr-panel:hover .hr-panel__media img { transform: scale(1.025); }
body.wpr06-home #home-experience #colombia .hr-panel__media img { object-position: 52% 50%; }
body.wpr06-home #home-experience #organics .hr-panel__media img { object-position: 84% 60%; }
body.wpr06-home #home-experience .hr-panel::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: 62%;
z-index: 1;
pointer-events: none;
}
body.wpr06-home #home-experience .hr-panel--forest::before { background: linear-gradient(180deg, rgba(12, 22, 8, .62) 0%, rgba(12, 22, 8, .34) 48%, transparent 100%); }
body.wpr06-home #home-experience .hr-panel--yellow::before { background: linear-gradient(180deg, rgba(255, 249, 221, .74) 0%, rgba(255, 249, 221, .42) 50%, transparent 100%); }
body.wpr06-home #home-experience .hr-panel__plate {
position: absolute;
inset: 0 0 auto;
z-index: 2;
display: flex;
flex-direction: column;
align-items: flex-start;
box-sizing: border-box;
max-width: 560px;
padding: clamp(32px, 3.4vw, 52px) clamp(28px, 3.2vw, 52px);
}
body.wpr06-home #home-experience .hr-panel--forest .hr-panel__plate { color: var(--wpa-cream); }
body.wpr06-home #home-experience .hr-panel--yellow .hr-panel__plate { color: var(--wpa-forest); }
body.wpr06-home #home-experience .hr-panel__plate h3 {
margin: 0 0 12px;
color: inherit;
font: 600 clamp(32px, 3vw, 48px)/1 var(--hr-font-display);
text-transform: uppercase;
text-wrap: balance;
}
body.wpr06-home #home-experience .hr-panel--forest .hr-panel__plate h3 { text-shadow: 0 2px 18px rgba(0, 0, 0, .28); }
body.wpr06-home #home-experience .hr-panel__plate p {
margin: 0 0 24px;
max-width: 34ch;
color: inherit;
font: 500 clamp(16px, 1.15vw, 18px)/1.5 var(--hr-font-body);
text-wrap: pretty;
}
body.wpr06-home #home-experience .hr-new__controls { justify-content: space-between; }
@media (max-width: 700px) {
body.wpr06-home #home-experience .hr-new__title { text-align: left; }
body.wpr06-home #home-experience .hr-panel { height: clamp(520px, 72svh, 620px); border-radius: var(--wpa-radius); }
body.wpr06-home #home-experience .hr-panel__plate { padding: 28px 22px; }
}
/* ---------- Hidden toggle: AVO360 Resource Center banner (?show=resources) ---------- */
body.wpr06-home #home-experience .hr-resources[hidden] { display: none !important; }
body.wpr06-home #home-experience .hr-resources__banner {
position: relative;
display: block;
max-width: var(--wpa-container);
margin: 0 auto;
border-radius: var(--wpa-radius-lg);
overflow: hidden;
text-decoration: none !important;
color: var(--wpa-forest);
isolation: isolate;
}
body.wpr06-home #home-experience .hr-resources__art { display: block; aspect-ratio: 21 / 9; }
body.wpr06-home #home-experience .hr-resources__art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
body.wpr06-home #home-experience .hr-resources__copy {
position: absolute;
left: clamp(24px, 5vw, 72px);
top: 50%;
transform: translateY(-50%);
display: grid;
justify-items: start;
gap: 24px;
max-width: 46%;
}
body.wpr06-home #home-experience .hr-resources__copy h2 {
margin: 0;
color: var(--wpa-forest);
font: 600 clamp(30px, 4vw, 60px)/1 var(--hr-font-display);
text-transform: uppercase;
}
@media (max-width: 700px) {
body.wpr06-home #home-experience .hr-resources__art { aspect-ratio: 4 / 3; }
body.wpr06-home #home-experience .hr-resources__copy { max-width: 70%; gap: 16px; }
}
/* Hidden toggle: R02 Precision Ripening (?show=ripening) keeps its R02 styles. */
body.wpr06-home #home-experience .hr-ripening-legacy[hidden] { display: none !important; }
/* ---------- 7. Three doors (HM-12) ---------- */
body.wpr06-home #home-experience .hr-doors { padding-top: var(--wpa-s7); }
body.wpr06-home #home-experience .hr-doors__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
max-width: var(--wpa-container);
margin: 0 auto;
padding: 0;
list-style: none;
}
body.wpr06-home #home-experience .hr-doors__grid li { margin: 0; padding: 0; list-style: none; }
@media (prefers-reduced-motion: no-preference) {
body.wpr06-home #home-experience .hr-doors__grid li[data-rise] { transition-delay: calc(var(--i) * 110ms); }
}
body.wpr06-home #home-experience .hr-door {
position: relative;
display: block;
aspect-ratio: 1;
border-radius: var(--wpa-radius);
overflow: hidden;
background: var(--wpa-forest-deep);
color: #fff;
text-decoration: none !important;
isolation: isolate;
}
body.wpr06-home #home-experience .hr-door picture,
body.wpr06-home #home-experience .hr-door img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 700ms var(--wpa-ease);
}
body.wpr06-home #home-experience .hr-door:hover img { transform: scale(1.04); }
body.wpr06-home #home-experience .hr-door__veil {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(10, 18, 6, 0) 40%, rgba(10, 18, 6, .72) 100%);
}
body.wpr06-home #home-experience .hr-door__label {
position: absolute;
left: 28px;
right: 28px;
bottom: 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
body.wpr06-home #home-experience .hr-door__label h3 {
margin: 0;
color: #fff;
font: 600 clamp(28px, 2.8vw, 44px)/1 var(--hr-font-display);
text-transform: uppercase;
text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}
body.wpr06-home #home-experience .hr-door:hover .hr-chip { transform: translateX(3px); background: var(--wpa-lime-hover); }
body.wpr06-home #home-experience .hr-door:focus-visible { outline: 3px solid var(--wpa-forest); outline-offset: 3px; }
@media (max-width: 999px) {
body.wpr06-home #home-experience .hr-doors__grid { gap: 16px; }
body.wpr06-home #home-experience .hr-door__label { left: 20px; right: 20px; bottom: 18px; }
}
@media (max-width: 700px) {
body.wpr06-home #home-experience .hr-doors__grid { grid-template-columns: 1fr; }
body.wpr06-home #home-experience .hr-door { aspect-ratio: 4 / 5; }
}
/* ---------- 8. Let's Lead the Pak Together (HM-13) ---------- */
body.wpr06-home #home-experience .hr-cta { padding: 0 !important; }
body.wpr06-home #home-experience .hr-cta__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
min-height: min(680px, 80svh);
}
body.wpr06-home #home-experience .hr-cta__content {
display: grid;
align-content: center;
justify-items: start;
gap: 32px;
padding: var(--wpa-section-y) clamp(32px, 5vw, 80px) var(--wpa-section-y) var(--wpa-gutter);
}
body.wpr06-home #home-experience .hr-cta__title {
margin: 0;
color: var(--wpa-cream);
font: 600 clamp(48px, 6.4vw, 104px)/.92 var(--hr-font-display);
letter-spacing: -.01em;
text-transform: uppercase;
}
body.wpr06-home #home-experience .hr-cta__title span { color: var(--wpa-lime); }
body.wpr06-home #home-experience .hr-cta__content .wpa-section__actions { margin: 0; }
body.wpr06-home #home-experience .hr-cta__partner {
margin: 0;
color: rgba(255, 249, 221, .82);
font: 400 15px/1.6 var(--hr-font-body);
}
body.wpr06-home #home-experience .hr-cta__partner .wpa-link { color: var(--wpa-cream) !important; padding: 2px 0; }
body.wpr06-home #home-experience .hr-cta__photo { position: relative; min-height: 420px; }
body.wpr06-home #home-experience .hr-cta__photo img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 60% 50%;
display: block;
}
@media (max-width: 999px) {
body.wpr06-home #home-experience .hr-cta__inner { grid-template-columns: 1fr; }
body.wpr06-home #home-experience .hr-cta__photo { order: -1; min-height: 0; height: 56vw; max-height: 420px; }
body.wpr06-home #home-experience .hr-cta__content { padding: 56px var(--wpa-gutter) 72px; gap: 24px; }
body.wpr06-home #home-experience .hr-cta__title { font-size: clamp(40px, 11vw, 64px); }
body.wpr06-home #home-experience .hr-cta__content .wpa-btn { width: 100%; }
}
/* Phones: "More Ways to Grow" keeps one line with room for the ellipse inside the gutter. */
@media (max-width: 420px) {
body.wpr06-home #home-experience .hr-new__title { font-size: clamp(34px, 10.2vw, 42px); }
}
/* HM-09 / CP03: Corey's selected October 6 stage-first phone composition.
Title and five complete stage names precede the centered real fruit. The
selected name, pressure and description form one readout below it. The
measured native-scroll controller still releases short/zoomed readers. */
body.wpr06-home #home-experience .hr-ripening__pin-title { display: none; }
@media (max-width: 999px) {
body.wpr06-home #home-experience .hr-ripening__intro > .hr-ripening__title { display: none; }
body.wpr06-home #home-experience .hr-ripening__inner { grid-template-areas: 'story' 'lede' 'action'; }
body.wpr06-home #home-experience .hr-ripening__story { margin-top: 0; }
body.wpr06-home #home-experience .hr-ripening__pin { grid-template-areas: 'title' 'rail' 'viewer' 'readout'; padding-bottom: calc(64px + env(safe-area-inset-bottom,0px)); }
body.wpr06-home #home-experience .hr-ripening__pin-title {
display: block; grid-area: title; margin: 0; color: var(--hr-ripen-ink);
font: 500 clamp(28px,7.5vw,34px)/1.1 var(--hr-font-display); letter-spacing: -.02em;
text-transform: uppercase; text-align: left;
}
body.wpr06-home #home-experience .hr-ripening__pin-title span { color: #687152; }
body.wpr06-home #home-experience .hr-ripen__navigation { margin-top: 12px; align-self: start; }
body.wpr06-home #home-experience .hr-ripen__tabs {
grid-template-columns: minmax(min-content,.7fr) minmax(min-content,1fr) minmax(min-content,1.6fr) minmax(min-content,1fr) minmax(min-content,.7fr);
gap: 2px; padding: 8px 0 8px; border-top: 0; border-bottom: 1px solid var(--hr-ripen-line);
}
body.wpr06-home #home-experience .hr-ripen__tabs::before { content: none; }
body.wpr06-home #home-experience .hr-ripen__tabs button {
min-height: 48px; padding: 6px 3px; gap: 10px; font-size: 13px; background: transparent;
}
body.wpr06-home #home-experience .hr-ripen__tabs button[aria-selected=true] { background: transparent; }
body.wpr06-home #home-experience .hr-ripen__tabs button[aria-selected=true]::after {
content: ''; position: absolute; left: 0; right: 0; bottom: -9px; height: 2px; background: var(--hr-ripen-ink);
}
body.wpr06-home #home-experience .hr-ripen__tabs button > span:last-child { white-space: nowrap; }
body.wpr06-home #home-experience .hr-ripen__navigation-footer { display: flex; margin-top: 8px; }
body.wpr06-home #home-experience .hr-ripen__navigation-footer p { font-size: 12px; line-height: 1.4; }
body.wpr06-home #home-experience .hr-ripen__scroll-cue,
body.wpr06-home #home-experience .hr-ripen__next { display: none; }
body.wpr06-home #home-experience .hr-ripening__viewer { margin-top: 8px; }
body.wpr06-home #home-experience .hr-ripen__fruit { height: clamp(240px,32svh,300px); }
body.wpr06-home #home-experience .hr-ripening__readout {
margin-top: 12px; min-height: 152px; padding-top: 12px; border-top: 1px solid var(--hr-ripen-line);
text-align: left; background: rgba(230,221,179,.08);
}
body.wpr06-home #home-experience .hr-ripening__readout-heading { justify-content: flex-start; gap: 0; align-items: center; }
body.wpr06-home #home-experience .hr-ripening__name { font-size: 30px; }
body.wpr06-home #home-experience .hr-ripening__pressure { margin: 12px 0 8px; font-size: 14px; }
body.wpr06-home #home-experience .hr-ripening__description { margin: 0; max-width: none; font-size: 15px; line-height: 1.5; }
/* Flow readers can pass behind the existing review dock; protect actual text
without moving/hiding that global control or shrinking the explanation. */
body.wpr06-home #home-experience .hr-ripening[data-scroll-mode=flow] .hr-ripening__description { padding-right: 64px; }
}
@media (min-width: 600px) and (max-width: 999px) {
body.wpr06-home #home-experience .hr-ripen__fruit { height: clamp(330px,38svh,430px); }
}
/* RR06-08: clean R03 has no review dock. Keep all B type/fruit geometry;
reclaim only the former dock reserve, with native safe-area inset retained.
A partial provider failure may leave a host; that host keeps full clearance. */
@media (max-width: 999px) {
body.wpr06-home #wpr06-body[data-wpr03-komo=clean] #ripening .hr-ripening__pin,
body.wpr06-home:not(:has([data-branch-comments])) #wpr06-body[data-wpr03-komo=unavailable] #ripening .hr-ripening__pin { padding-bottom: env(safe-area-inset-bottom,0px); }
body.wpr06-home #wpr06-body[data-wpr03-komo=clean] #ripening[data-scroll-mode=flow] .hr-ripening__description,
body.wpr06-home:not(:has([data-branch-comments])) #wpr06-body[data-wpr03-komo=unavailable] #ripening[data-scroll-mode=flow] .hr-ripening__description { padding-right: 0; }
}
/* Source: assets/r06-1b4b1f164146cb864c00/footer-r03/footer.css */
/* R03 footer (SW, Oct 2 final QA open item): the shared Salient "before-footer" global section,
restyled for the R03 pages only. Loaded on all five pages after the page CSS, before enforce.css.
CSS only: link destinations, address and phone content are the WordPress footer, untouched.
- Cream band, forest type (design-system.md §1). Under the forest "Let's Lead the Pak" band the
colour change is the separation; a cream-line hairline covers pages whose last band is cream.
- Content aligned to the page container (--wpa-container inside --wpa-gutter), 4 columns on
desktop, 2 on phones (the logo + address spans both).
- Social icons: the lime 60px boxed PNGs (incl. the old Twitter bird) are hidden and replaced by
one calm line-icon set drawn as masks on the same links (same hrefs; the X logo for X/Twitter).
They sit in the bottom bar beside the copyright.
- Every link is a >= 44px tap target on phones. */
body[class*="wpr06"] .nectar-global-section.before-footer {
--_fg: var(--wpa-forest, #223F13);
--_fg-soft: var(--wpa-ink-soft, #3D4536);
--_line: var(--wpa-cream-line, #E6DDB3);
background: var(--wpa-cream, #FFF9DD);
border-top: 1px solid var(--_line);
color: var(--_fg);
}
/* ---- Container: the page grid, not Salient's 1425px box ---- */
body[class*="wpr06"] .nectar-global-section.before-footer > .container {
position: relative;
box-sizing: border-box;
width: 100%;
max-width: none;
margin: 0;
padding: clamp(48px, 6vw, 80px) max(var(--wpa-gutter, 16px), calc(50% - var(--wpa-container, 1300px) / 2)) 32px;
}
body[class*="wpr06"] .nectar-global-section.before-footer .vc_row.full-width-section {
margin: 0 !important;
padding: 0 !important;
width: auto !important;
left: auto !important;
background: none !important;
--row-bg-color: transparent !important;
}
body[class*="wpr06"] .nectar-global-section.before-footer :is(.row_col_wrap_12, .wpb_column.vc_col-sm-12, .inner_row, .row_col_wrap_12_inner) {
width: 100% !important; max-width: none !important; flex: 1 1 100%; float: none !important; box-sizing: border-box;
}
body[class*="wpr06"] .nectar-global-section.before-footer .row-bg-wrap { display: none !important; }
body[class*="wpr06"] .nectar-global-section.before-footer :is(.row_col_wrap_12, .row_col_wrap_12_inner, .vc_column-inner, .wpb_wrapper) {
margin: 0 !important; padding: 0 !important;
}
body[class*="wpr06"] .nectar-global-section.before-footer .wpb_column { margin: 0 !important; padding: 0 !important; float: none; width: auto; }
body[class*="wpr06"] .nectar-global-section.before-footer .wpb_column[style] { color: inherit !important; }
/* ---- Link columns + address ---- */
body[class*="wpr06"] .nectar-global-section.before-footer .vc_row:not(:first-child) .inner_row:first-child > .row_col_wrap_12_inner {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 32px clamp(24px, 3vw, 48px);
}
body[class*="wpr06"] .nectar-global-section.before-footer .wpb_text_column { margin: 0 0 24px !important; }
body[class*="wpr06"] .nectar-global-section.before-footer .wpb_text_column:last-child { margin-bottom: 0 !important; }
body[class*="wpr06"] .nectar-global-section.before-footer p {
margin: 0; padding: 0;
font: 400 15px/1.6 var(--wpa-font-body, 'Open Sans', Arial, sans-serif);
color: var(--_fg-soft);
}
body[class*="wpr06"] .nectar-global-section.before-footer .line30 p br { display: none; }
body[class*="wpr06"] .nectar-global-section.before-footer .line30 p + p { margin-top: 4px; }
body[class*="wpr06"] .nectar-global-section.before-footer .line30 a {
display: flex; align-items: center; width: fit-content;
min-height: 32px;
color: var(--_fg) !important;
text-decoration: none;
transition: color 180ms var(--wpa-ease, ease);
}
body[class*="wpr06"] .nectar-global-section.before-footer .line30 a:hover {
text-decoration: underline; text-decoration-color: var(--wpa-green, #93C11F);
text-decoration-thickness: 2px; text-underline-offset: .28em;
}
/* Column heads ("West Pak Worldwide", "Contact Us", ...): the system's label style */
body[class*="wpr06"] .nectar-global-section.before-footer .line30 a:has(strong) { margin-bottom: 4px; }
body[class*="wpr06"] .nectar-global-section.before-footer .line30 strong {
font: 600 18px/1.2 var(--wpa-font-display, 'Antonio', 'Arial Narrow', sans-serif) !important;
font-size: 18px !important;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--_fg);
}
/* Logo + address */
body[class*="wpr06"] .nectar-global-section.before-footer .img-with-aniamtion-wrap:not(.center) { margin-bottom: 16px; }
body[class*="wpr06"] .nectar-global-section.before-footer .img-with-aniamtion-wrap:not(.center) img { width: 168px !important; height: auto !important; }
body[class*="wpr06"] .nectar-global-section.before-footer .img-with-aniamtion-wrap:not(.center) + .wpb_text_column p { font-size: 14px; line-height: 1.7; }
/* ---- Bottom bar: copyright + legal (left), social (right) ---- */
body[class*="wpr06"] .nectar-global-section.before-footer .inner_row + .inner_row {
margin-top: clamp(40px, 5vw, 64px) !important;
padding-top: 0;
border-top: 1px solid var(--_line);
}
body[class*="wpr06"] .nectar-global-section.before-footer .inner_row + .inner_row p {
display: flex; align-items: center; flex-wrap: wrap; column-gap: .35em;
min-height: 44px; padding-top: 24px; /* bottom edge = the social row's bottom edge (both 44px, 32px up) */
font-size: 13px; color: var(--_fg-soft);
}
body[class*="wpr06"] .nectar-global-section.before-footer .inner_row + .inner_row a {
display: inline-flex; align-items: center; min-height: 44px;
color: var(--_fg) !important;
}
/* Social row: out of flow, aligned with the copyright line */
body[class*="wpr06"] .nectar-global-section.before-footer > .container > .vc_row:first-child {
position: absolute !important;
right: max(var(--wpa-gutter, 16px), calc(50% - var(--wpa-container, 1300px) / 2));
bottom: 32px;
z-index: 1;
}
body[class*="wpr06"] .nectar-global-section.before-footer > .container > .vc_row:first-child .vc_hidden-xs { display: none !important; }
body[class*="wpr06"] .nectar-global-section.before-footer > .container > .vc_row:first-child .row_col_wrap_12_inner {
display: flex; gap: 4px; align-items: center;
}
body[class*="wpr06"] .nectar-global-section.before-footer > .container > .vc_row:first-child :is(.img-with-aniamtion-wrap, .inner, .hover-wrap, .hover-wrap-inner) {
margin: 0 !important; padding: 0 !important; transform: none !important; display: block;
}
body[class*="wpr06"] .nectar-global-section.before-footer > .container > .vc_row:first-child a {
position: relative;
display: grid; place-items: center;
width: 44px; height: 44px;
border-radius: 50%;
color: var(--_fg);
transition: background-color 180ms var(--wpa-ease, ease), color 180ms var(--wpa-ease, ease);
}
body[class*="wpr06"] .nectar-global-section.before-footer > .container > .vc_row:first-child a img { display: none !important; }
body[class*="wpr06"] .nectar-global-section.before-footer > .container > .vc_row:first-child a::before {
content: ''; width: 20px; height: 20px;
background: currentColor;
-webkit-mask: var(--_icon) center / contain no-repeat; mask: var(--_icon) center / contain no-repeat;
}
body[class*="wpr06"] .nectar-global-section.before-footer > .container > .vc_row:first-child a:hover { background: var(--wpa-cream-2, #F7EFC8); }
body[class*="wpr06"] .nectar-global-section.before-footer a:focus-visible { outline: 2px solid var(--_fg); outline-offset: 2px; border-radius: 4px; }
body[class*="wpr06"] .nectar-global-section.before-footer > .container > .vc_row:first-child a:focus-visible { border-radius: 50%; }
/* One line-icon family (24px grid, 1.8 stroke, round caps); X is the current X mark, outlined to match. */
body[class*="wpr06"] .nectar-global-section.before-footer a[href*="facebook.com"] {
--_icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z'/%3E%3C/svg%3E");
}
body[class*="wpr06"] .nectar-global-section.before-footer a[href*="linkedin.com"] {
--_icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-4 0v7h-4v-7a6 6 0 0 1 6-6z'/%3E%3Crect x='2' y='9' width='4' height='12'/%3E%3Ccircle cx='4' cy='4' r='2'/%3E%3C/svg%3E");
}
body[class*="wpr06"] .nectar-global-section.before-footer a[href*="instagram.com"] {
--_icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M17.5 6.5h.01'/%3E%3C/svg%3E");
}
body[class*="wpr06"] .nectar-global-section.before-footer a[href*="twitter.com"],
body[class*="wpr06"] .nectar-global-section.before-footer a[href*="x.com/"] {
--_icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 3.5h5l12 17h-5z'/%3E%3Cpath d='M20.5 3.5l-7 8M3.5 20.5l7-8'/%3E%3C/svg%3E");
}
body[class*="wpr06"] .nectar-global-section.before-footer a[href*="youtube.com"] {
--_icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 17a24 24 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.6 49.6 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24 24 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.6 49.6 0 0 1-16.2 0A2 2 0 0 1 2.5 17'/%3E%3Cpath d='m10 15 5-3-5-3z'/%3E%3C/svg%3E");
}
/* ---- Tablet: 2 columns ---- */
@media (max-width: 999px) {
body[class*="wpr06"] .nectar-global-section.before-footer .vc_row:not(:first-child) .inner_row:first-child > .row_col_wrap_12_inner {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 32px 24px;
}
body[class*="wpr06"] .nectar-global-section.before-footer .one-fourths:last-child { grid-column: 1 / -1; }
}
/* ---- Phones: 2 columns, 44px targets, social row under the copyright ---- */
@media (max-width: 690px) {
body[class*="wpr06"] .nectar-global-section.before-footer > .container { padding-bottom: 24px; }
body[class*="wpr06"] .nectar-global-section.before-footer .line30 a { min-height: 44px; min-width: 44px; }
body[class*="wpr06"] .nectar-global-section.before-footer .line30 p + p { margin-top: 0; }
body[class*="wpr06"] .nectar-global-section.before-footer .line30 a:has(strong) { margin-bottom: 0; }
body[class*="wpr06"] .nectar-global-section.before-footer .line30 strong { font-size: 17px !important; }
body[class*="wpr06"] .nectar-global-section.before-footer .wpb_text_column { margin-bottom: 16px !important; }
/* "The WPA Experience" column: its two blocks side by side across the full width */
body[class*="wpr06"] .nectar-global-section.before-footer .one-fourths:nth-child(3) { grid-column: 1 / -1; }
body[class*="wpr06"] .nectar-global-section.before-footer .one-fourths:nth-child(3) > .vc_column-inner > .wpb_wrapper {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px;
}
body[class*="wpr06"] .nectar-global-section.before-footer .one-fourths:nth-child(3) .wpb_text_column { margin: 0 !important; }
body[class*="wpr06"] .nectar-global-section.before-footer .inner_row + .inner_row { margin-top: 40px !important; }
body[class*="wpr06"] .nectar-global-section.before-footer .inner_row + .inner_row p { min-height: 0; padding: 16px 0 68px; }
body[class*="wpr06"] .nectar-global-section.before-footer > .container > .vc_row:first-child {
right: auto; left: calc(var(--wpa-gutter, 16px) - 12px); bottom: 24px;
}
}
/* Source: assets/r06-1b4b1f164146cb864c00/foundations/enforce.css */
/* West Pak R03 site-wide type rule (SW-01). Loaded LAST on every R03 page.
All page headings render in Antonio, all caps. Spec: docs/design-system.md.
Opt out a single element only with data-wpa-type="keep" (e.g. a legal mark). */
#wpr06-body :is(h1, h2, h3):not([data-wpa-type="keep"]):not(.screen-reader-text):not(.sr-only):not(.visually-hidden) {
font-family: var(--wpa-font-display, 'Antonio', 'Arial Narrow', sans-serif) !important;
text-transform: uppercase !important;
}
/* Final QA (Oct 2): no one-word last lines in running copy (headlines set their own breaks). */
#wpr06-body :is(p, li) { text-wrap: pretty; }
/* Source: assets/r06-1b4b1f164146cb864c00/cinematic/home-opening-selected.css */
/* HM-01/HM-02 selected opening, Oct 3. Scoped new tree; former film/arrow owners are unloaded. */
body.wpr06-home #home-experience .hm-film-hero{position:relative;isolation:isolate;width:100vw;margin-left:calc(50% - 50vw);min-height:100svh;background:#16290c;color:#fff9dd;overflow:clip;font-family:var(--wpa-font-body)}
/* Paint the shared iOS runway with real hero pixels, including native return-to-top.
Keeping the section clipped is safe once the section itself spans that runway. */
html.wpa-runway body.wpr06-home #home-experience .hm-film-hero{margin-top:calc(-1 * var(--wpa-runway))}
body.wpr06-home #home-experience .hm-hero__media{position:absolute;inset:0;z-index:-2;overflow:hidden;contain:paint}
body.wpr06-home #home-experience .hm-hero__media img,body.wpr06-home #home-experience .hm-hero__film,body.wpr06-home #home-experience .hm-hero__ambient{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;margin:0}
body.wpr06-home #home-experience .hm-hero__film,body.wpr06-home #home-experience .hm-hero__ambient{opacity:0;transition:opacity 400ms ease}
body.wpr06-home #home-experience .hm-film-hero[data-film-painted=true] .hm-hero__film{opacity:1}
/* Native final-source life is a separate deck. Copy never shares its transforms. */
body.wpr06-home #home-experience .hm-film-hero[data-ambient-painted=true] .hm-hero__ambient{opacity:1}
body.wpr06-home #home-experience .hm-film-hero:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,#08170342,transparent 35%)}
body.wpr06-home #home-experience .hm-hero__readability{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#0817038a,transparent 88%),linear-gradient(0deg,#08170370,transparent 70%);opacity:1;transition:opacity 850ms ease;pointer-events:none}
body.wpr06-home #home-experience .hm-hero__content{position:absolute;left:var(--wpa-gutter);right:var(--wpa-gutter);bottom:clamp(144px,18svh,190px);max-width:730px}
body.wpr06-home #home-experience .hm-hero__content h1{font:600 clamp(64px,7.8vw,112px)/1.03 var(--wpa-font-display);letter-spacing:-.025em;color:#fff9dd;margin:0}
body.wpr06-home #home-experience .hm-hero__line{display:block;overflow:hidden;padding:.025em 0 .17em;margin-bottom:-.14em}
body.wpr06-home #home-experience .hm-hero__line-in{display:block;transition:transform 880ms cubic-bezier(.22,1,.36,1)}
body.wpr06-home #home-experience .hm-hero__line:nth-child(2) .hm-hero__line-in{transition-delay:110ms}
body.wpr06-home #home-experience .hm-hero__word{position:relative;display:inline-block}
body.wpr06-home #home-experience .hm-hero__underline{position:absolute;left:-.01em;bottom:-.09em;width:102.5%;height:.19em;overflow:visible;pointer-events:none}
body.wpr06-home #home-experience .hm-hero__underline path{stroke:#b6df00;stroke-width:4;fill:none;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 680ms cubic-bezier(.22,1,.36,1) 390ms}
body.wpr06-home #home-experience .hm-hero__subline{font:400 18px/1.6 var(--wpa-font-body);max-width:40ch;margin:28px 0 0;color:#fff9dd;transition:opacity 520ms ease 250ms,transform 640ms cubic-bezier(.22,1,.36,1) 250ms}
body.wpr06-home #home-experience .hm-hero__actions{display:flex;align-items:center;gap:28px;margin-top:28px;transition:opacity 460ms ease 400ms,transform 600ms cubic-bezier(.22,1,.36,1) 400ms}
body.wpr06-home #home-experience .hm-hero__actions .wpa-btn{width:230px;justify-content:center}
body.wpr06-home #home-experience .hm-hero__sales-link{background:transparent;color:#fff9dd!important;border:2px solid #fff9dd}
body.wpr06-home #home-experience .hm-hero__footer{position:absolute;left:var(--wpa-gutter);right:var(--wpa-gutter);bottom:36px;display:flex;justify-content:space-between;align-items:center;gap:20px}
body.wpr06-home #home-experience .hm-hero__continue{display:inline-flex;align-items:center;gap:14px;color:#fff9dd;font:700 12px/1.4 var(--wpa-font-body);letter-spacing:.08em;text-transform:uppercase}
body.wpr06-home #home-experience .hm-hero__continue span{font-size:25px}
body.wpr06-home #home-experience .hm-hero__control{display:inline-flex;align-items:center;gap:12px;padding:12px 20px;min-height:44px;border:1px solid #fff9dd80;border-radius:40px;background:#16290c66;color:#fff9dd;font:600 12px/1.4 var(--wpa-font-body);cursor:pointer}
body.wpr06-home #home-experience .hm-hero__control[hidden]{display:none}
body.wpr06-home #home-experience .hm-film-hero a:focus-visible,body.wpr06-home #home-experience .hm-film-hero button:focus-visible{outline:3px solid #b6df00;outline-offset:6px}
html.hm-late-copy-wait body.wpr06-home #home-experience .hm-hero__line-in,body.wpr06-home #home-experience .hm-film-hero[data-copy=waiting] .hm-hero__line-in{transform:translateY(115%)}
html.hm-late-copy-wait body.wpr06-home #home-experience .hm-hero__subline,html.hm-late-copy-wait body.wpr06-home #home-experience .hm-hero__actions,body.wpr06-home #home-experience .hm-film-hero[data-copy=waiting] .hm-hero__subline,body.wpr06-home #home-experience .hm-film-hero[data-copy=waiting] .hm-hero__actions{opacity:0;transform:translateY(12px);pointer-events:none;visibility:hidden}
html.hm-late-copy-wait body.wpr06-home #home-experience .hm-hero__underline path,body.wpr06-home #home-experience .hm-film-hero[data-copy=waiting] .hm-hero__underline path{stroke-dashoffset:1}
html.hm-late-copy-wait body.wpr06-home #home-experience .hm-hero__readability,body.wpr06-home #home-experience .hm-film-hero[data-copy=waiting] .hm-hero__readability{opacity:0}
body.wpr06-home #home-experience .hm-film-hero[data-copy=static] :is(.hm-hero__line-in,.hm-hero__subline,.hm-hero__actions,.hm-hero__underline path,.hm-hero__readability){transition:none}
body.wpr06-home #home-experience .hm-avo-overview{position:relative;isolation:isolate;background:#fff9dd;color:#223f13;overflow:clip;padding:68px var(--wpa-gutter)}
body.wpr06-home #home-experience .hm-avo__inner{max-width:1300px;margin:auto}
body.wpr06-home #home-experience .hm-avo__intro{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,100px);align-items:center}
body.wpr06-home #home-experience .hm-avo__mark{display:block;width:110px;height:48px;margin-bottom:28px;background:#223f13;mask:url('../home-r03/avo360-wordmark.png') left center/contain no-repeat;-webkit-mask:url('../home-r03/avo360-wordmark.png') left center/contain no-repeat}
body.wpr06-home #home-experience .hm-avo__copy h2{font:600 clamp(46px,5.5vw,76px)/1.06 var(--wpa-font-display);letter-spacing:-.018em;color:#223f13;margin:0}
body.wpr06-home #home-experience .hm-avo__copy p{font:400 15px/1.7 var(--wpa-font-body);max-width:49ch;margin:30px 0 24px;color:#3d4536}
body.wpr06-home #home-experience .hm-avo__copy .wpa-btn{gap:18px}
body.wpr06-home #home-experience .hm-avo__copy .wpa-btn svg{width:20px;height:20px;flex:none}
body.wpr06-home #home-experience .hm-avo__art{position:relative;isolation:isolate;margin:0;align-self:stretch;min-height:475px;padding-bottom:24px}
/* HM-02: retain the attached portrait/square photo silhouette. Only the photo
window clips the rise; the rear and foreground canonical ribbon stay outside it. */
body.wpr06-home #home-experience .hm-avo__photo-window{position:absolute;inset:0 0 24px auto;width:78%;height:calc(100% - 24px);overflow:hidden;border-radius:0;z-index:1}
body.wpr06-home #home-experience .hm-avo__image{display:block;position:relative;width:100%;height:100%;object-fit:cover;object-position:57% 50%;translate:0 0;transition:translate 740ms cubic-bezier(.22,.75,.2,1) 140ms}
/* Sales seating: W = half the photo width (50% of78% =39% of the art),
photo left - .62W =22% -24.18% =-2.18%. The lower band straddles the
unchanged photo bottom; canonical head/shaft no longer hide under the photo. */
body.wpr06-home #home-experience .hm-avo__arrow{position:absolute;left:-2.18%;bottom:24px;width:39%;height:auto;color:#b6df00;overflow:visible;pointer-events:none;transform:translateY(14.1%);translate:0 0;transition:translate 820ms cubic-bezier(.22,.75,.2,1)}
body.wpr06-home #home-experience .hm-avo__art[data-arrow=waiting] .hm-avo__arrow{translate:52px 0;transition:none}
body.wpr06-home #home-experience .hm-avo__art[data-arrow=waiting] .hm-avo__image{translate:0 32px;transition:none}
body.wpr06-home #home-experience .hm-avo__art[data-arrow=static] :is(.hm-avo__arrow,.hm-avo__image){transition:none}
body.wpr06-home #home-experience .hm-avo__arrow--back{z-index:0}
body.wpr06-home #home-experience .hm-avo__arrow--front{z-index:2;clip-path:inset(70% -2000% -10% -10%)}
body.wpr06-home #home-experience .hm-avo__paint{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1400ms cubic-bezier(.22,1,.36,1)}
/* Keep the canonical loop mask and its reveal timing; only the straight continuation grows. */
body.wpr06-home #home-experience .hm-avo__continuation-paint{opacity:1}
body.wpr06-home #home-experience .hm-avo__continuation-paint--top{transition:opacity 0ms 1400ms}
body.wpr06-home #home-experience .hm-avo__art[data-arrow=waiting] .hm-avo__continuation-paint{opacity:0;transition:none}
body.wpr06-home #home-experience .hm-avo__art[data-arrow=static] .hm-avo__continuation-paint{transition:none}
body.wpr06-home #home-experience .hm-avo__head-paint{opacity:1;transition:opacity 180ms ease 1000ms}
body.wpr06-home #home-experience .hm-avo__art[data-arrow=waiting] .hm-avo__paint{stroke-dashoffset:1}
body.wpr06-home #home-experience .hm-avo__art[data-arrow=waiting] .hm-avo__head-paint{opacity:0}
body.wpr06-home #home-experience .hm-avo__art[data-arrow=static] :is(.hm-avo__paint,.hm-avo__head-paint){transition:none}
body.wpr06-home #home-experience .hm-avo__services{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 36px}
body.wpr06-home #home-experience .hm-avo__services li{list-style:none;margin-left:0;border-top:1px solid #e6ddb3}
body.wpr06-home #home-experience .hm-avo__services a{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:78px;color:#223f13;font:600 21px/1.2 var(--wpa-font-display);text-transform:uppercase}
body.wpr06-home #home-experience .hm-avo__services span{max-width:22ch}
body.wpr06-home #home-experience .hm-avo__services svg{width:18px;height:18px;flex:none;transition:transform 180ms ease}
body.wpr06-home #home-experience .hm-avo__services a:hover svg{transform:translateX(4px)}
@media(max-width:999px){body.wpr06-home #home-experience .hm-avo__intro{gap:36px}body.wpr06-home #home-experience .hm-avo__copy h2{font-size:56px}}
@media(max-width:700px){
body.wpr06-home #home-experience .hm-film-hero{min-height:calc(max(600px,100lvh) + var(--wpa-runway,0px) + var(--wpa-toolbar-bleed,0px))}
body.wpr06-home #home-experience .hm-hero__content{left:24px;right:24px;bottom:calc(144px + env(safe-area-inset-bottom) + var(--wpa-runway,0px) + var(--wpa-toolbar-bleed,0px))}
body.wpr06-home #home-experience .hm-hero__content h1{font-size:64px}
body.wpr06-home #home-experience .hm-hero__subline{font-size:16px;max-width:30ch;margin-top:24px}
body.wpr06-home #home-experience .hm-hero__actions{gap:12px;margin-top:24px;flex-wrap:wrap;max-width:320px}
body.wpr06-home #home-experience .hm-hero__actions .wpa-btn{width:100%;min-height:50px;padding:14px 24px;font-size:11px}
body.wpr06-home #home-experience .hm-hero__footer{left:24px;right:24px;bottom:calc(80px + env(safe-area-inset-bottom) + var(--wpa-runway,0px) + var(--wpa-toolbar-bleed,0px));justify-content:flex-start;align-items:center;gap:16px;flex-wrap:wrap}
body.wpr06-home #home-experience .hm-hero__continue{max-width:none;font-size:11px;line-height:1.5;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center}
body.wpr06-home #home-experience .hm-hero__control{font-size:11px;padding:11px 16px}
body.wpr06-home #home-experience .hm-avo-overview{padding:48px 24px}
body.wpr06-home #home-experience .hm-avo__intro{grid-template-columns:1fr;gap:34px}
body.wpr06-home #home-experience .hm-avo__mark{width:93px;height:40px;margin-bottom:24px}
body.wpr06-home #home-experience .hm-avo__copy h2{font-size:49px;line-height:1.08}
body.wpr06-home #home-experience .hm-avo__copy p{font-size:15px;margin-top:24px}
body.wpr06-home #home-experience .hm-avo__art{height:340px;min-height:0}
body.wpr06-home #home-experience .hm-avo__image{object-position:56% 56%}
body.wpr06-home #home-experience .hm-avo__services{grid-template-columns:1fr;gap:0;margin-top:34px}
body.wpr06-home #home-experience .hm-avo__services a{min-height:66px;font-size:22px;padding:12px 0}
}
@media(max-width:700px) and (max-height:650px){body.wpr06-home #home-experience .hm-hero__content h1{font-size:clamp(44px,12vw,56px)}}
@media(max-height:720px) and (min-width:701px){body.wpr06-home #home-experience .hm-film-hero{min-height:580px}body.wpr06-home #home-experience .hm-hero__content h1{font-size:88px}body.wpr06-home #home-experience .hm-hero__content{bottom:124px}body.wpr06-home #home-experience .hm-hero__subline{margin-top:20px}}
/* Short landscape is a reader in natural flow: no oversized title stranded
below the first view, and enlarged copy can grow without covering actions. */
@media(max-width:999px) and (max-height:520px) and (orientation:landscape){
body.wpr06-home #home-experience .hm-film-hero{box-sizing:border-box;min-height:calc(100svh + var(--wpa-runway,0px) + var(--wpa-toolbar-bleed,0px));padding:calc(88px + var(--wpa-runway,0px)) max(24px,env(safe-area-inset-right)) calc(48px + var(--wpa-toolbar-bleed,0px)) max(24px,env(safe-area-inset-left))}
body.wpr06-home #home-experience .hm-hero__content{position:relative;inset:auto;max-width:620px}
body.wpr06-home #home-experience .hm-hero__content h1{font-size:clamp(44px,6.2vw,58px);line-height:1.04}
body.wpr06-home #home-experience .hm-hero__subline{font-size:16px;line-height:1.5;max-width:44ch;margin-top:16px}
body.wpr06-home #home-experience .hm-hero__actions{margin-top:16px;gap:20px;flex-wrap:wrap}
body.wpr06-home #home-experience .hm-hero__footer{position:relative;inset:auto;margin-top:24px;max-width:620px}
}
@media(prefers-reduced-motion:reduce){body.wpr06-home #home-experience .hm-film-hero *,body.wpr06-home #home-experience .hm-avo-overview *{transition:none!important;animation:none!important}html.hm-late-copy-wait body.wpr06-home #home-experience .hm-hero__line-in{transform:none}html.hm-late-copy-wait body.wpr06-home #home-experience :is(.hm-hero__subline,.hm-hero__actions){opacity:1;transform:none;visibility:visible}html.hm-late-copy-wait body.wpr06-home #home-experience .hm-hero__underline path{stroke-dashoffset:0}}
/* The completed film is foliage: retain clear header contrast over the whole hero. */
@media(min-width:1000px){
body.wpr06-home #header-outer#header-outer[data-h-film] #logo img{filter:brightness(0) invert(1)!important}
body.wpr06-home #header-outer#header-outer[data-h-film] #top#top nav > ul > li > a{color:#fff9dd!important}
body.wpr06-home #header-outer#header-outer[data-h-film] #top#top .icon-salient-search,body.wpr06-home #header-outer#header-outer[data-h-film] #top#top .icon-salient-search::before{color:#fff9dd!important}
body.wpr06-home #header-outer#header-outer[data-h-film] #top#top .button_bordered a::before{border-color:#fff9dd!important}
}
/* Source: assets/r06-1b4b1f164146cb864c00/foundations/centered-section-menus.css */
/* SW-02: section menus form one centered group, in normal and sticky states.
On narrow screens the centered viewport remains natively scrollable to every link. */
#wpr06-body #westpak-refresh .wpa-subnav :is(ul,ol).wpa-subnav__list,
#wpr06-body .wpa-subnav__list {
display:flex; width:fit-content; max-width:min(100%,var(--wpa-container));
margin:0 auto; padding:0; justify-content:safe center;
}
#wpr06-body #westpak-refresh .wpa-subnav :is(ul,ol).wpa-subnav__list > li,
#wpr06-body .wpa-subnav__list > li {flex:0 0 auto;min-width:max-content;width:auto}
#wpr06-body #westpak-refresh .wpa-subnav :is(ul,ol).wpa-subnav__list a,
#wpr06-body .wpa-subnav__list a {justify-content:center;text-align:center;padding-inline:clamp(20px,2.5vw,42px)}
@media(max-width:999px){
#wpr06-body #westpak-refresh .wpa-subnav :is(ul,ol).wpa-subnav__list,
#wpr06-body .wpa-subnav__list {max-width:100%;justify-content:safe center}
#wpr06-body #westpak-refresh .wpa-subnav :is(ul,ol).wpa-subnav__list a,
#wpr06-body .wpa-subnav__list a {padding-inline:24px}
}
/* Source: assets/r06-1b4b1f164146cb864c00/cinematic/globe-art-direction-r03.css */
/* HM-04: measured, beat-specific globe composition. The renderer keeps a stable
projection while this layer moves/scales its canvas beside the actual copy.
Explorer and reduced-motion static content retain their existing layouts. */
@media (prefers-reduced-motion: no-preference) {
body.wpr06-home #home-experience #sourcing.globe-art-directed:not(.is-exploring):not([data-globe-layout="flow"]) .globe-story__sticky {
height: 100svh !important; min-height: 0 !important;
}
body.wpr06-home #home-experience #sourcing.globe-art-directed:not(.is-exploring):not([data-globe-layout="flow"]) .globe-story__reading {
position: absolute !important; inset: auto !important; left: var(--ga-gutter,48px) !important;
top: var(--ga-reading-top,160px) !important; width: var(--ga-reading-width,40%) !important;
transform: none !important; z-index: 7;
transition: top 800ms cubic-bezier(.2,.65,.2,1);
}
body.wpr06-home #home-experience #sourcing.globe-art-directed:not(.is-exploring):not([data-globe-layout="flow"]) .globe-story__headline {
font-size: clamp(44px,5.1vw,74px) !important; line-height: .98 !important;
}
body.wpr06-home #home-experience #sourcing.globe-art-directed:not(.is-exploring):not([data-globe-layout="flow"]) .globe-story__reel {
position: relative; display: block !important; height: var(--ga-title-height,150px) !important;
transition: height 800ms cubic-bezier(.2,.65,.2,1);
}
body.wpr06-home #home-experience #sourcing.globe-art-directed:not(.is-exploring):not([data-globe-layout="flow"]) .globe-story__reel-frame {
position: absolute; inset: 0 0 auto; align-self: start;
}
body.wpr06-home #home-experience #sourcing.globe-art-directed:not(.is-exploring):not([data-globe-layout="flow"]) .globe-story__copy-deck {
position: relative; display: block; height: var(--ga-copy-height,220px);
transition: height 800ms cubic-bezier(.2,.65,.2,1);
}
body.wpr06-home #home-experience #sourcing.globe-art-directed:not(.is-exploring):not([data-globe-layout="flow"]) .globe-story__panel {
position: absolute; inset: 0 0 auto; align-self: start;
}
body.wpr06-home #home-experience #sourcing.globe-art-directed:not(.is-exploring):not([data-globe-layout="flow"]) .globe-story__earth-wrap {
left: 0 !important; top: 0 !important; width: var(--ga-base-size,600px) !important;
height: var(--ga-base-size,600px) !important; aspect-ratio: 1;
transform: translate3d(calc(var(--ga-center-x,75vw) - 50%),calc(var(--ga-center-y,50svh) - 50%),0) scale(var(--ga-scale,1)) !important;
transform-origin: center;
transition: transform 1100ms cubic-bezier(.2,.65,.2,1);
}
body.wpr06-home #home-experience #sourcing.globe-art-directed:not(.is-exploring):not([data-globe-layout="flow"]) .globe-story__veil {
background: linear-gradient(90deg,#060f14 0%,#060f14cc 30%,transparent 48%);
}
body.wpr06-home #home-experience #sourcing.globe-art-directed:not(.is-exploring):not([data-globe-layout="flow"]) .globe-story__footer { left: var(--ga-gutter,48px); }
@media (max-width:700px) {
body.wpr06-home #home-experience #sourcing.globe-art-directed[data-art-direction="network"] .globe-story__panel.is-active p {font-size:15px;line-height:1.45}
body.wpr06-home #home-experience #sourcing.globe-art-directed[data-art-direction="network"] .globe-story__pills {margin-top:12px}
body.wpr06-home #home-experience #sourcing.globe-art-directed[data-art-direction="network"] .globe-story__actions {margin-top:14px;gap:8px}
body.wpr06-home #home-experience #sourcing.globe-art-directed:not(.is-exploring):not([data-globe-layout="flow"]) .globe-story__headline { font-size: clamp(34px,9.7vw,42px) !important; }
body.wpr06-home #home-experience #sourcing.globe-art-directed:not(.is-exploring):not([data-globe-layout="flow"]) .globe-story__veil {
background: linear-gradient(180deg,#060f14 0%,transparent 36%);
}
body.wpr06-home #home-experience #sourcing.globe-art-directed:not(.is-exploring):not([data-globe-layout="flow"]) .globe-story__sticky::after { display: none; }
body.wpr06-home #home-experience #sourcing.globe-art-directed:not(.is-exploring):not([data-globe-layout="flow"]) .globe-story__footer { bottom: max(16px,env(safe-area-inset-bottom)); }
}
@media (max-width:700px) and (max-height:740px) {
body.wpr06-home #home-experience #sourcing.globe-art-directed:not(.is-exploring):not([data-globe-layout="flow"]) .globe-story__headline { font-size: 34px !important; }
body.wpr06-home #home-experience #sourcing.globe-art-directed:not(.is-exploring):not([data-globe-layout="flow"]) .globe-story__panel p { font-size: 14px; line-height: 1.45; }
body.wpr06-home #home-experience #sourcing.globe-art-directed:not(.is-exploring):not([data-globe-layout="flow"]) .globe-story__actions { margin-top: 12px; gap: 8px; }
}
}
/* M03: the full four-panel story is the short-height fallback. The duplicate
pinned copy and beat ticks are replaced by readable native-flow panels. */
body.wpr06-home #home-experience #sourcing.globe-art-directed[data-globe-layout="flow"] {
height: auto !important; min-height: 0;
}
body.wpr06-home #home-experience #sourcing.globe-art-directed[data-globe-layout="flow"]:not(.is-exploring) .globe-story__sticky {
position: relative !important; display: grid !important;
grid-template-columns: minmax(0,1fr) minmax(220px,38%);
align-items: start; gap: 40px; height: auto !important; min-height: 0 !important;
padding: 80px var(--globe-gutter,40px) 64px !important;
}
body.wpr06-home #home-experience #sourcing.globe-art-directed[data-globe-layout="flow"]:not(.is-exploring) :is(.globe-story__reading,.globe-story__footer,.globe-story__veil),
body.wpr06-home #home-experience #sourcing.globe-art-directed[data-globe-layout="flow"]:not(.is-exploring) .globe-story__sticky::after { display: none !important; }
body.wpr06-home #home-experience #sourcing.globe-art-directed[data-globe-layout="flow"]:not(.is-exploring) .globe-story__earth-wrap {
position: sticky !important; top: 80px !important; left: auto !important;
width: min(100%,calc(100svh - 140px)) !important; height: auto !important;
aspect-ratio: 1; max-width: 460px; justify-self: center; transform: none !important;
transition: none !important; order: 2;
}
body.wpr06-home #home-experience #sourcing.globe-art-directed[data-globe-layout="flow"]:not(.is-exploring) :is(.globe-story__earth,.globe-story__earth *) { pointer-events: none !important; }
body.wpr06-home #home-experience #sourcing.globe-art-directed[data-globe-layout="flow"] .globe-story__static {
display: grid; position: relative; gap: 48px; z-index: 4; order: 1; min-width: 0;
}
body.wpr06-home #home-experience #sourcing.globe-art-directed[data-globe-layout="flow"] .globe-story__static h3 {
margin: 0 0 16px; font: 500 clamp(34px,5vw,54px)/1.02 var(--hr-font-display);
letter-spacing: -.02em; text-transform: uppercase;
}
body.wpr06-home #home-experience #sourcing.globe-art-directed[data-globe-layout="flow"] .globe-story__static h3 em {
display: block; font-style: normal; color: var(--wpa-lime);
}
body.wpr06-home #home-experience #sourcing.globe-art-directed[data-globe-layout="flow"] + #smart-way { margin-top: 0; }
@media(max-width:700px) {
body.wpr06-home #home-experience #sourcing.globe-art-directed[data-globe-layout="flow"]:not(.is-exploring) .globe-story__sticky {
grid-template-columns: minmax(0,1fr); gap: 32px; padding: 72px 20px 56px !important;
}
body.wpr06-home #home-experience #sourcing.globe-art-directed[data-globe-layout="flow"]:not(.is-exploring) .globe-story__earth-wrap {
position: relative !important; top: auto !important; max-width: 300px; width: min(100%,280px) !important; order: 0;
}
}
/* CP16: one continuous dark sky at the Origins edge and Safari toolbar sample. */
body.wpr06-home #home-experience #sourcing .globe-story__sky { background:#060f14!important; }
/* CP04: short portrait reserves the projected sphere by composing the two
Network actions beside each other instead of spending an extra text row. */
@media(max-width:700px){
body.wpr06-home #home-experience #sourcing.globe-art-directed[data-art-direction="network"] .globe-story__actions { flex-wrap:nowrap; align-items:center; }
body.wpr06-home #home-experience #sourcing.globe-art-directed[data-art-direction="network"] .globe-story__actions .wpa-btn { width:auto; flex:1 1 auto; padding:12px 14px; min-height:44px; font-size:11px; letter-spacing:.04em!important; }
body.wpr06-home #home-experience #sourcing.globe-art-directed[data-art-direction="network"] .globe-story__explore { flex:none; white-space:nowrap; }
body.wpr06-home #home-experience #sourcing.globe-art-directed[data-art-direction="network"] .globe-story__pills { gap:5px; margin-top:8px; }
body.wpr06-home #home-experience #sourcing.globe-art-directed[data-art-direction="network"] .globe-story__pills li { padding:5px 9px; }
}
/* HM-07: full-screen place cards. Scoped to the explorer; story beats/cameras
and the existing session's scroll/focus/inert handling remain the owners. */
body.wpr06-home #home-experience #sourcing[data-explorer-returning] :is(.globe-story__reading,.globe-story__reel,.globe-story__reel-frame,.globe-story__copy-deck,.globe-story__panel) {
transition: none !important;
}
body.wpr06-home #home-experience #sourcing.is-exploring .globe-story__sticky {
height: 100dvh; min-height: 0; padding: 0; display: block;
}
body.wpr06-home #home-experience #sourcing.is-exploring[data-globe-layout="flow"] { height: var(--explorer-story-height) !important; }
body.wpr06-home #home-experience #sourcing.is-exploring .globe-story__static { display: none !important; }
body.wpr06-home #home-experience #sourcing.is-exploring .globe-story__earth-wrap {
left: calc((100% - 460px) / 2); top: 50%;
width: min(calc(100vw - 500px), calc(100svh - 136px), 850px);
height: auto; transform: translate(-50%, -50%); max-width: none;
}
body.wpr06-home #home-experience #sourcing.is-exploring .globe-story__veil {
background: linear-gradient(90deg, transparent 35%, #060f1430 62%, #060f14 100%);
}
body.wpr06-home #home-experience #sourcing .globe-explorer__header {
top: max(20px, env(safe-area-inset-top)); left: 28px; right: 28px;
}
body.wpr06-home #home-experience #sourcing .globe-explorer__header > span {
color: var(--wpa-cream); font-size: 17px; font-weight: 600;
}
body.wpr06-home #home-experience #sourcing .globe-explorer__close {
width: auto; min-width: 96px; height: 48px; padding: 0 16px;
display: flex; align-items: center; justify-content: center; gap: 10px;
border-radius: 24px; background: #192e35;
}
body.wpr06-home #home-experience #sourcing .globe-explorer__place-card {
--place-gutter: 24px;
top: 104px; right: 28px; bottom: 28px; left: auto;
width: 410px; max-height: none; padding: var(--place-gutter); margin: 0;
transform: none; justify-content: flex-start; gap: 16px; overflow: hidden;
background: var(--wpa-cream); color: var(--wpa-forest); border-radius: 20px;
box-shadow: 0 16px 48px #0004;
display: flex; flex-direction: column;
}
body.wpr06-home #home-experience #sourcing .globe-explorer__modes { display: flex; gap: 8px; flex-shrink: 0; }
body.wpr06-home #home-experience #sourcing .globe-explorer__place-card[data-view="summary"] { bottom: auto; max-height: calc(100dvh - 132px); }
body.wpr06-home #home-experience #sourcing .globe-explorer__modes button {
flex: 1; min-height: 44px; padding: 8px 12px; border: 1px solid var(--wpa-forest);
border-radius: 24px; background: transparent; color: var(--wpa-forest); font: 600 15px/1.4 var(--body); cursor: pointer;
}
body.wpr06-home #home-experience #sourcing .globe-explorer__modes button[aria-pressed="true"] { background: var(--wpa-forest); color: var(--wpa-cream); }
body.wpr06-home #home-experience #sourcing .globe-explorer__selector { flex-shrink: 0; }
body.wpr06-home #home-experience #sourcing .feedback-location-picker { margin: 0; }
body.wpr06-home #home-experience #sourcing .feedback-location-picker__toggle {
min-height: 48px; background: #edf0d5; color: var(--wpa-forest); border-color: #7d8a68; padding: 9px 14px;
}
body.wpr06-home #home-experience #sourcing .feedback-location-picker__toggle > i { color: var(--wpa-forest); }
body.wpr06-home #home-experience #sourcing .globe-explorer__content {
min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
scrollbar-gutter: stable; padding-right: 4px;
}
body.wpr06-home #home-experience #sourcing .globe-explorer__place-card h2 {
color: var(--wpa-forest); font-size: clamp(30px, 3vw, 40px); margin: 0 0 12px;
line-height: 1.16; overflow-wrap: anywhere;
}
body.wpr06-home #home-experience #sourcing .globe-explorer__place-card p {
color: var(--wpa-forest); font-size: 16px; line-height: 1.55; margin: 0 0 16px;
}
body.wpr06-home #home-experience #sourcing .globe-explorer__place-card .globe-explorer__category {
color: var(--wpa-ink-soft); font-size: 14px; line-height: 1.4; margin: 0 0 6px; text-transform: none;
}
body.wpr06-home #home-experience #sourcing .globe-explorer__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; flex-shrink: 0; }
body.wpr06-home #home-experience #sourcing .globe-explorer__place-card button { cursor: pointer; }
body.wpr06-home #home-experience #sourcing .globe-explorer__details {
border: 0; border-radius: 24px; padding: 10px 16px; min-height: 44px;
display: inline-flex; align-items: center; gap: 8px; background: var(--wpa-lime); color: var(--wpa-forest); font: 700 15px/1.4 var(--body);
}
body.wpr06-home #home-experience #sourcing :is(.globe-explorer__compare,.globe-explorer__back) {
min-height: 44px; padding: 8px 0; border: 0; background: transparent; color: var(--wpa-forest);
font: 600 15px/1.4 var(--body); text-decoration: underline; text-underline-offset: 4px;
}
body.wpr06-home #home-experience #sourcing .globe-explorer__back { display: flex; align-items: center; gap: 8px; margin: 0; flex-shrink: 0; background: var(--wpa-cream); }
body.wpr06-home #home-experience #sourcing .globe-explorer__photo { margin: 20px 0; }
body.wpr06-home #home-experience #sourcing .globe-explorer__photo img { display: block; width: 100%; height: 200px; object-fit: cover; border-radius: 12px; }
body.wpr06-home #home-experience #sourcing .globe-explorer__photo figcaption { color: var(--wpa-ink-soft); font: 400 14px/1.5 var(--body); margin-top: 8px; }
body.wpr06-home #home-experience #sourcing .globe-explorer__facts { margin: 16px 0; }
body.wpr06-home #home-experience #sourcing .globe-explorer__facts > div { border-top: 1px solid var(--wpa-cream-line); padding: 12px 0; }
body.wpr06-home #home-experience #sourcing .globe-explorer__facts dt { font: 600 17px/1.4 var(--body); }
body.wpr06-home #home-experience #sourcing .globe-explorer__facts dd { color: var(--wpa-ink-soft); font: 400 16px/1.55 var(--body); margin: 4px 0 0; }
body.wpr06-home #home-experience #sourcing .globe-explorer__capabilities h3 { color: var(--wpa-forest); font: 500 26px/1.2 var(--display); }
body.wpr06-home #home-experience #sourcing .globe-explorer__capabilities ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 12px 0 20px; }
body.wpr06-home #home-experience #sourcing .globe-explorer__capabilities li { background: #e5ebcd; border-radius: 16px; padding: 6px 12px; font: 400 15px/1.4 var(--body); }
body.wpr06-home #home-experience #sourcing .globe-explorer__place-card .globe-explorer__destination {
display: flex; width: fit-content; gap: 8px; color: var(--wpa-forest); font-size: 16px; margin: 12px 0;
}
body.wpr06-home #home-experience #sourcing .globe-explorer__place-card :is(label,select) { color: var(--wpa-forest); font: 400 16px/1.5 var(--body); }
body.wpr06-home #home-experience #sourcing .globe-explorer__place-card select { background: #edf0d5; border: 1px solid #7d8a68; margin: 6px 0 16px; min-height: 44px; }
body.wpr06-home #home-experience #sourcing #globe-compare-origin {
appearance: none; height: 48px; padding: 8px 36px 8px 12px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23234d16' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 12px center;
}
body.wpr06-home #home-experience #sourcing .globe-explorer__place-card :is(option,optgroup) { color: var(--wpa-forest); background: var(--wpa-cream); }
body.wpr06-home #home-experience #sourcing .globe-explorer__season { border-top: 1px solid var(--wpa-cream-line); padding: 16px 0; }
body.wpr06-home #home-experience #sourcing .globe-explorer__season h3 { color: var(--wpa-forest); font: 500 28px/1.2 var(--display); margin: 0 0 6px; }
body.wpr06-home #home-experience #sourcing .globe-explorer__months { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 6px; }
body.wpr06-home #home-experience #sourcing .globe-explorer__months span { background: #eee8cf; color: var(--wpa-ink-soft); border-radius: 6px; border: 1px solid #ddd3a7; padding: 5px 0; text-align: center; font: 400 14px/1.4 var(--body); }
body.wpr06-home #home-experience #sourcing .globe-explorer__months .is-season { background: var(--wpa-forest); color: var(--wpa-cream); border-color: var(--wpa-forest); }
body.wpr06-home #home-experience #sourcing .globe-explorer__legend { display: flex; align-items: center; gap: 8px; }
body.wpr06-home #home-experience #sourcing .globe-explorer__legend > span { width: 14px; height: 14px; background: var(--wpa-forest); border-radius: 3px; }
body.wpr06-home #home-experience #sourcing .globe-explorer__announcement { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
body.wpr06-home #home-experience #sourcing .globe-explorer__place-card :is(button,a,select):focus-visible,
body.wpr06-home #home-experience #sourcing .globe-explorer__close:focus-visible { outline: 3px solid #668900; outline-offset: 3px; }
body.wpr06-home #home-experience #sourcing .feedback-location-picker__menu {
left: auto; right: 28px; top: 88px; bottom: 28px; width: 410px;
}
@media (max-width: 800px) {
body.wpr06-home #home-experience #sourcing .globe-explorer__header { left: 20px; right: 20px; top: max(16px,env(safe-area-inset-top)); }
body.wpr06-home #home-experience #sourcing.is-exploring .globe-story__earth-wrap {
left: 50%; top: calc((100dvh - 310px + 84px) / 2);
width: min(96vw, calc(100dvh - 410px)); min-width: 130px;
}
body.wpr06-home #home-experience #sourcing.is-exploring .globe-story__veil { background: linear-gradient(180deg,#060f1430,transparent 70%); }
body.wpr06-home #home-experience #sourcing .globe-explorer__place-card {
--place-gutter: 18px;
left: 16px; right: 16px; top: auto; bottom: max(16px,env(safe-area-inset-bottom));
width: auto; max-height: calc(100dvh - 104px); gap: 12px;
}
body.wpr06-home #home-experience #sourcing .globe-explorer__place-card[data-view="summary"] { top: auto; bottom: max(16px,env(safe-area-inset-bottom)); max-height: 50dvh; }
body.wpr06-home #home-experience #sourcing .globe-explorer__place-card[data-view]:not([data-view="summary"]) { top: 88px; }
body.wpr06-home #home-experience #sourcing .globe-explorer__place-card h2 { font-size: 32px; margin-bottom: 8px; }
body.wpr06-home #home-experience #sourcing .globe-explorer__place-card p { margin-bottom: 12px; }
body.wpr06-home #home-experience #sourcing .globe-explorer__place-card .globe-explorer__category { margin-bottom: 4px; }
body.wpr06-home #home-experience #sourcing .feedback-location-picker__menu { left: 16px; right: 16px; top: 80px; bottom: 16px; width: auto; }
}
@media (max-height: 600px) and (min-width: 601px) {
body.wpr06-home #home-experience #sourcing .globe-explorer__place-card,
body.wpr06-home #home-experience #sourcing .globe-explorer__place-card[data-view="summary"] { left: auto; right: 20px; top: 80px; bottom: 16px; width: min(410px,48vw); max-height: none; }
body.wpr06-home #home-experience #sourcing.is-exploring .globe-story__earth-wrap { left: 25%; top: 54%; width: min(42vw,calc(100dvh - 100px)); }
}
@media (max-height: 600px) and (max-width: 600px) {
body.wpr06-home #home-experience #sourcing .globe-explorer__place-card[data-view="summary"] { max-height: calc(100dvh - 200px); }
body.wpr06-home #home-experience #sourcing .globe-explorer__place-card[data-view="summary"] .globe-explorer__summary { display: none; }
}
/* Source: assets/r06-1b4b1f164146cb864c00/brand-r04/logo-tone.css */
/* R4 SW-02: the no-Inc logo is two-color (ink + green), so header states can no longer
repaint it with a silhouette filter on light surfaces. Light surfaces show the logo in its
real colors; every other Home header state (globe, contact, film) renders it white. */
body.wpr06-home #header-outer#header-outer:not([data-h-light]) #logo img{filter:brightness(0) invert(1)!important}
body.wpr06-home #header-outer#header-outer[data-h-light] #logo img{filter:none!important}
/* Mobile header: only the mobile wordmark (production also renders the desktop/starting logos). */
@media (max-width: 999px){body.wpr06-home #header-outer#header-outer #logo img:not(.mobile-only-logo){display:none!important}}
/* Oct 10: Products & Programs (bag carousel) softly frames itself on phones/tablets. The page
root is y-proximity (globe stops, beatStepper.js); this adds one snap point: section top at
the viewport top, so the heading sits under the 64px header and the carousel is in frame. */
/* bag section framing now in brand-r04/soft-settle.js (CSS root snap unreliable on iOS) */
/* Oct 10 (Vincent's iPhone): the single-bag cards (Organic, Lil' Cados) sized the img as 86%/92%
of a grid cell whose height comes only from aspect-ratio; some iOS WebKit versions resolve that
to 0, so width:auto collapses and the bag disappears. Position it against the scene's definite
box instead (same approach as the Country of Origin fan, which renders everywhere). */
body.wpr06-home #home-experience .hr-bag__img{position:absolute;inset:7% 0;margin:auto;height:86%;width:auto;max-width:82%}
body.wpr06-home #home-experience .hr-bag--lil .hr-bag__img{inset:4% 0;height:92%}
body.wpr06-home #home-experience .hr-bag--organic .hr-bag__img{inset:8.8% 0 auto;margin:0 auto;height:109%;max-width:none}
/* Oct 10 (Corey): no hard seam under the phone status bar. Safari paints that strip with
theme-color (= --a2-top-edge, from #home-top data-header-color, now a deep leaf green matched to
the film), so the hero's top fades from exactly that color into the video. */
/* Status-bar edge = pure black, eased (raised-cosine, solid first 6%) into the film. Research
(Oct 10): iOS 15-18 paint the strip with theme-color, iOS 26 with a sampled solid color (fixed
element at top, else html background; never gradients), Android tints its own bar. That strip
is color-managed separately from page pixels (measured: same #1c2a12 rendered rgb(26,40,15) vs
rgb(30,42,20) on an iOS 18 phone), so any mid-tone leaves a seam somewhere. The shift shrinks toward black, so the edge is
brand --wpa-forest-deep #16290C (picked by Corey on device, seamless). Override for device trials: ?sb= (soft-settle.js). */
@media (max-width: 999px){body.wpr06-home #home-experience #home-top.hm-film-hero::after{content:"";position:absolute;inset:0 0 auto;height:min(230px,28vh);z-index:3;pointer-events:none;background:linear-gradient(180deg,rgba(var(--wp-sb-rgb,22,41,12),1) 0%,rgba(var(--wp-sb-rgb,22,41,12),1) 6%,rgba(var(--wp-sb-rgb,22,41,12),0.985) 13.2%,rgba(var(--wp-sb-rgb,22,41,12),0.943) 20.5%,rgba(var(--wp-sb-rgb,22,41,12),0.874) 27.7%,rgba(var(--wp-sb-rgb,22,41,12),0.784) 34.9%,rgba(var(--wp-sb-rgb,22,41,12),0.677) 42.2%,rgba(var(--wp-sb-rgb,22,41,12),0.560) 49.4%,rgba(var(--wp-sb-rgb,22,41,12),0.440) 56.6%,rgba(var(--wp-sb-rgb,22,41,12),0.323) 63.8%,rgba(var(--wp-sb-rgb,22,41,12),0.216) 71.1%,rgba(var(--wp-sb-rgb,22,41,12),0.126) 78.3%,rgba(var(--wp-sb-rgb,22,41,12),0.057) 85.5%,rgba(var(--wp-sb-rgb,22,41,12),0.015) 92.8%,rgba(var(--wp-sb-rgb,22,41,12),0.000) 100.0%)}}
/* Oct 10 (Corey): iOS Safari paints a gray placeholder box while a bag photo decodes. Keep bag
photos invisible until loaded (brand-r04/soft-settle.js adds .is-ready), then fade in; the delayed
animation reveals them anyway after 4s if the script never runs. */
body.wpr06-home #home-experience #products img{opacity:0;transition:opacity .35s ease;animation:wpBagReveal 0s 4s forwards}
body.wpr06-home #home-experience #products img.is-ready{opacity:1;animation:none}
@keyframes wpBagReveal{to{opacity:1}}
/* Source: assets/r06-1b4b1f164146cb864c00/brand-r04/explorer.css */
/* Oct 10 (post-launch): compact globe explorer card (build/home/src/globe/ExplorerPanel.jsx).
Overrides the legacy panel frame from globe-layout.css / globe-art-direction-r03.css. The card
never covers the globe: bottom sheet on phones, floating card on desktop. 4px grid. */
body.wpr06-home #home-experience .globe-explorer .wpx-card{
position:absolute;top:auto;left:16px;right:16px;bottom:max(16px,env(safe-area-inset-bottom));
display:block;width:auto;max-height:none;overflow:visible;transform:none;box-sizing:border-box;
padding:12px 16px 16px;border-radius:24px;background:#fff9dd;color:#1B1F17;
box-shadow:0 20px 48px rgba(0,0,0,.35);z-index:5}
@media (min-width:1000px){body.wpr06-home #home-experience .globe-explorer .wpx-card{left:auto;right:28px;top:104px;bottom:auto;width:380px;padding:16px 20px 20px}}
body.wpr06-home #home-experience .wpx-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
body.wpr06-home #home-experience .wpx-modes{display:inline-flex;padding:4px;border-radius:999px;background:rgba(34,63,19,.08)}
body.wpr06-home #home-experience .wpx-modes button{min-height:36px;padding:0 16px;border:0;border-radius:999px;background:transparent;color:#223F13;font:600 15px/1 inherit;font-family:inherit;cursor:pointer}
body.wpr06-home #home-experience .wpx-modes button[aria-pressed="true"]{background:#223F13;color:#fff9dd}
body.wpr06-home #home-experience .wpx-step{display:inline-flex;align-items:center;gap:4px;color:#3D4536;font:500 14px/1 inherit;font-family:inherit;font-variant-numeric:tabular-nums}
body.wpr06-home #home-experience .wpx-step button{display:grid;place-items:center;width:40px;height:40px;border:1px solid rgba(34,63,19,.25);border-radius:999px;background:transparent;color:#223F13;cursor:pointer;padding:0}
body.wpr06-home #home-experience .wpx-step span{min-width:40px;text-align:center}
body.wpr06-home #home-experience .wpx-kicker{margin:0 0 4px;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:#3D4536}
body.wpr06-home #home-experience .globe-explorer .wpx-card h2{margin:0;width:auto;padding:0;font-size:clamp(32px,8vw,40px);line-height:1;color:#223F13;border:0;text-decoration:none;background:none}
body.wpr06-home #home-experience .globe-explorer .wpx-card h2::before,body.wpr06-home #home-experience .globe-explorer .wpx-card h2::after{content:none!important}
body.wpr06-home #home-experience .wpx-summary{margin:8px 0 0;font-size:16px;line-height:1.4;color:#223F13}
body.wpr06-home #home-experience .wpx-season{margin-top:12px}
body.wpr06-home #home-experience .wpx-season__label{margin:0 0 8px;font-size:13px;color:#3D4536}
body.wpr06-home #home-experience .wpx-season__label span{color:#223F13;font-weight:600;margin-left:4px}
body.wpr06-home #home-experience .wpx-season__months{display:grid;grid-template-columns:repeat(12,1fr);gap:4px}
body.wpr06-home #home-experience .wpx-season__months span{display:grid;place-items:center;height:24px;border-radius:6px;background:rgba(34,63,19,.08);font-size:11px;font-weight:600;color:rgba(34,63,19,.45)}
body.wpr06-home #home-experience .wpx-season__months span.is-on{background:#93C11F;color:#16290C}
body.wpr06-home #home-experience .wpx-chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0;padding:0;list-style:none}
body.wpr06-home #home-experience .wpx-chips li{margin:0;padding:4px 12px;border-radius:999px;background:rgba(34,63,19,.08);font-size:13px;color:#223F13}
body.wpr06-home #home-experience .globe-explorer .wpx-card .wpx-go{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:16px;padding:0 20px;border-radius:999px;background:#93C11F;color:#16290C;font-weight:700;text-decoration:none}
body.wpr06-home #home-experience .globe-explorer .wpx-card .wpx-go:hover{background:#a6d12c}
body.wpr06-home #home-experience .wpx-card :is(button,a):focus-visible{outline:3px solid #223F13;outline-offset:2px}
/* legacy list bullets + legacy top:0/bottom:0 stretch */
body.wpr06-home #home-experience .wpx-chips li{list-style:none!important}
body.wpr06-home #home-experience .wpx-chips li::before,body.wpr06-home #home-experience .wpx-chips li::after,body.wpr06-home #home-experience .wpx-chips li::marker{content:none!important;display:none!important}
@media (min-width:1000px){body.wpr06-home #home-experience .globe-explorer .wpx-card{bottom:auto!important;height:auto!important;max-height:calc(100% - 140px)!important}}
@media (max-width:999px){body.wpr06-home #home-experience .globe-explorer .wpx-card{top:auto!important;height:auto!important}}
@media (max-width:399px){body.wpr06-home #home-experience .wpx-modes button{padding:0 12px;font-size:14px}
body.wpr06-home #home-experience .wpx-step button{width:36px;height:36px}
body.wpr06-home #home-experience .wpx-step span{min-width:32px;font-size:13px}}
/* Oct 10 (Corey: one unified globe): in explore mode the same globe fills the screen, so the
per-location push-in (chunks/globe-art-direction.js) is never cropped by the story's square. */
body.wpr06-home #home-experience .globe-r03.is-exploring .globe-story__earth-wrap{left:0!important;top:0!important;right:auto!important;bottom:auto!important;width:100vw!important;height:100%!important;transform:none!important;margin:0!important;max-width:none!important;max-height:none!important}
body.wpr06-home #home-experience .globe-r03.is-exploring .globe-story__earth,
body.wpr06-home #home-experience .globe-r03.is-exploring .network-globe{inset:0!important;width:100%!important;height:100%!important;transform:none!important;max-width:none!important;max-height:none!important;aspect-ratio:auto!important}
/* phones: the globe frames the space above the card; its lower edge sits behind the card */
@media (max-width:999px){body.wpr06-home #home-experience .globe-r03.is-exploring .globe-story__earth-wrap{height:calc(100% - 300px)!important}}
/* Morph choreography (GlobeStory.jsx closeExplorer/recordMorph; MORPH_MS 680, same ease as the globe).
Oct 11 (Corey: panels push up from the bottom as the globe moves, all coordinated):
open: the card rises from below the screen while the globe grows, landing with it;
close: the card drops off the bottom first while the globe shrinks back, then the story copy returns;
switch: a new location's text slides up into the card as the globe flies there. */
@keyframes wpxFade{from{opacity:0}to{opacity:1}}
@keyframes wpxRise{from{transform:translate3d(0,var(--wpx-rise),0)}to{transform:none}}
@keyframes wpxDrop{from{transform:none}to{transform:translate3d(0,var(--wpx-rise),0)}}
@keyframes wpxSwap{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
body.wpr06-home #home-experience .globe-explorer .wpx-card{--wpx-rise:calc(100% + 40px)}
@media (min-width:1000px){body.wpr06-home #home-experience .globe-explorer .wpx-card{--wpx-rise:100svh}}
body.wpr06-home #home-experience .globe-r03.is-exploring .globe-explorer .wpx-card{animation:wpxRise .66s .06s cubic-bezier(.22,.8,.2,1) both;will-change:transform}
body.wpr06-home #home-experience .globe-r03.is-exploring .globe-explorer__header{animation:wpxFade .45s .2s ease both}
body.wpr06-home #home-experience .globe-explorer .wpx-body{animation:wpxSwap .46s .08s cubic-bezier(.22,.8,.2,1) both}
body.wpr06-home #home-experience .globe-r03.is-closing .globe-explorer .wpx-card{animation:wpxDrop .46s cubic-bezier(.55,0,.75,.25) both}
body.wpr06-home #home-experience .globe-r03.is-closing .globe-explorer__header{animation:none;opacity:0;transition:opacity .26s ease}
body.wpr06-home #home-experience .globe-r03.is-returning .globe-story__reading,
body.wpr06-home #home-experience .globe-r03.is-returning .globe-story__veil{animation:wpxFade .5s ease both}
@media (prefers-reduced-motion:reduce){body.wpr06-home #home-experience .globe-r03 .globe-explorer :is(.wpx-card,.wpx-body),body.wpr06-home #home-experience .globe-r03 .globe-explorer__header{animation:none!important;transition:none!important}}