:root{ --black:#000000; --white:#FFFFFF; --deep-teal:#006D74; --teal:#0AA3AC; --aqua:#1ECAD3; --soft-white:#F9FAFB; --charcoal:#2E3238; --gray:#726E75; --orange:#E86A33; } *{box-sizing:border-box;} html{scroll-behavior:smooth; overflow-x:hidden;;scroll-padding-top:90px;} body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--charcoal);background:var(--white);overflow-x:hidden;} h1,h2,h3{margin:0;font-weight:500;} p{margin:0;} a{text-decoration:none;} button{font-family:inherit;cursor:pointer;border:none;background:none;} .wrap{max-width:1200px;margin:0 auto;padding:0 24px;} .serif{font-family:Georgia,'Times New Roman',serif;} .btn-primary{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;font-size:14px;font-weight:600;letter-spacing:.02em;background:var(--deep-teal);color:var(--white);transition:background .2s;} .btn-primary:hover{background:#00565b;} .btn-primary.inverted{background:var(--white);color:var(--deep-teal);} .btn-ghost{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;font-size:14px;font-weight:600;letter-spacing:.02em;border:1px solid rgba(255,255,255,.4);color:var(--white);transition:border-color .2s;} .btn-ghost:hover{border-color:var(--white);} .eyebrow{font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--aqua);margin-bottom:16px;} .section-label{display:flex;align-items:baseline;gap:12px;margin-bottom:36px;} .section-label .n{font-size:14px;font-weight:600;color:var(--aqua);white-space:nowrap;} .section-label .rule{height:1px;flex:1;background:rgba(255,255,255,.15);} .section-label .kicker{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--gray);white-space:nowrap;} .section-label.light .n{color:var(--deep-teal);} .section-label.light .rule{background:rgba(0,0,0,.1);} .chip{font-size:12px;padding:6px 12px;background:rgba(0,109,116,.08);color:var(--deep-teal);display:inline-block;} .chip.dark{background:rgba(255,255,255,.08);color:var(--white);} .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease;} /* SAFETY NET (item 20): if JS never runs, nothing stays hidden. .js is set by script immediately; without it everything is visible. */ html:not(.js) .reveal, html:not(.js) .way-el, html:not(.js) .way-cell, html:not(.js) #canMessage p, html:not(.js) #heroH1, html:not(.js) #heroCopy, html:not(.js) #heroCtas{ opacity:1 !important; transform:none !important; } .reveal.in{opacity:1;transform:translateY(0);} @media (prefers-reduced-motion: reduce){ .reveal{transition:none;opacity:1;transform:none;} } nav a{color:rgba(255,255,255,.8);font-size:14px;transition:color .15s;} /* Hero kinetic type: oversized but capped, never clipped. clamp() gives a mobile floor, a desktop ceiling, and scales between — no raw vw with no ceiling, which is what caused the clipping. */ .kinetic-stage-wrap{position:relative;overflow:visible;min-height:1.05em;padding:0 2px;} .kinetic-word{display:block;font-size:clamp(2.1rem, 8.5vw, 6.2rem);line-height:1.05;font-weight:700;letter-spacing:-.01em;word-break:break-word;} .hero-h1{font-size:clamp(2.1rem, 8.5vw, 6.2rem);line-height:1.08;font-weight:600;letter-spacing:-.01em;max-width:900px;word-break:break-word;} nav a:hover{color:var(--aqua);} /* ============================================================ MOBILE-FIRST CORRECTIONS (global pass) Mobile is composed deliberately, not scaled down from desktop. Verified target widths: 320 / 375 / 390 / 430 / 768 ============================================================ */ /* header */ .hdrbar{height:60px;display:flex;align-items:center;justify-content:space-between;gap:12px;} @media(min-width:1024px){.hdrbar{height:80px;}} .hdrlogo{display:flex;align-items:baseline;text-decoration:none;flex:0 0 auto;} .desktop-nav{display:none !important;} @media(min-width:1024px){.desktop-nav{display:flex !important;} a.btn-primary.desktop-nav{display:inline-flex !important;}} .mobtoggleA{background:none;border:0;cursor:pointer;padding:10px 0 10px 10px;} .mobtoggleA span{display:block;height:1px;width:24px;background:#fff;margin:5px 0;} .mobtoggleA span:last-child{width:16px;} @media(min-width:1024px){.mobtoggleA{display:none;}} #mobnavA{display:none;flex-direction:column;gap:16px;padding:20px 24px 26px; border-top:1px solid rgba(255,255,255,.14);background:var(--black);} #mobnavA.open{display:flex;} #mobnavA a{font-size:15px;color:rgba(255,255,255,.85);text-decoration:none;} /* hero — mobile composition */ .hero-eyebrow-wrap{padding:26px 24px 0;} .hero-grid-a{display:grid;grid-template-columns:1fr;gap:32px;padding-bottom:44px;} .hero-copy-a{margin-top:20px;font-size:16px;line-height:1.6;max-width:60ch; color:rgba(255,255,255,.75);opacity:0;transition:opacity .6s ease;} .hero-ctas-a{margin-top:28px;display:flex;flex-direction:column;align-items:flex-start;gap:14px; opacity:0;transition:opacity .6s ease;} .hero-ctas-a .btn-ghost{border:0;padding:0;text-decoration:underline;text-underline-offset:5px;} @media(min-width:760px){ .hero-eyebrow-wrap{padding:56px 24px 0;} .hero-grid-a{gap:40px;padding-bottom:56px;} .hero-copy-a{margin-top:28px;font-size:19px;} .hero-ctas-a{flex-direction:row;flex-wrap:wrap;align-items:center;gap:18px;margin-top:36px;} .hero-ctas-a .btn-ghost{border:1px solid rgba(255,255,255,.35);padding:14px 28px;text-decoration:none;} } /* hero headline: deliberate mobile line breaks, never clipped */ .kinetic-stage-wrap{min-height:1.05em;overflow:visible;padding:0 2px;} .kinetic-word,.hero-h1{font-size:clamp(1.9rem,9vw,6.2rem);line-height:1.06;word-break:normal;overflow-wrap:break-word;} @media(max-width:400px){.kinetic-word,.hero-h1{font-size:1.75rem;}} /* no horizontal overflow anywhere */ html,body{max-width:100%;overflow-x:hidden;} img,svg,video{max-width:100%;} /* CAPABILITY — mobile: no horizontal clipping, tags wrap, tappable rows */ #capPanel{box-sizing:border-box;max-width:100%;overflow:hidden;} #capPanelItems{display:flex;flex-wrap:wrap;gap:8px;max-width:100%;} #capPanelItems .chip{white-space:normal;word-break:normal;overflow-wrap:anywhere;max-width:100%;} #capStrips{max-width:100%;} #capStrips button{width:100%;max-width:100%;min-height:52px;box-sizing:border-box; white-space:normal;overflow-wrap:anywhere;background:none;} @media(max-width:760px){ #capPanel{padding:22px !important;min-height:0 !important;} #capPanelTitle{font-size:19px !important;} #capPanelItems .chip{font-size:11.5px;padding:6px 10px;} #capStrips button{font-size:15px !important;padding:14px 0 !important;} } .fgrid-a{ display:grid; grid-template-columns:1fr; gap:34px; } @media(min-width:768px){ .fgrid-a{ grid-template-columns:2fr 1fr 1fr 1fr; } } .f-h{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#fff; margin-bottom:15px; } footer li{ margin-bottom:8px; } footer li a{ color:var(--orange); } footer a:hover{ color:#fff; } /* Label product names cycle emphasis slowly — one at a time, 7.5s loop. All three stay legible; only weight of attention shifts. Never hides text, so a failed animation or reduced motion leaves everything readable. */ .lbl-stack .lbl-w{ display:block; opacity:.42; transition:none; animation: lblCycle 7.5s ease-in-out infinite; } .lbl-stack .lbl-w:nth-child(1){ animation-delay:0s; } .lbl-stack .lbl-w:nth-child(2){ animation-delay:2.5s; } .lbl-stack .lbl-w:nth-child(3){ animation-delay:5s; } @keyframes lblCycle{ 0% { opacity:.42; } 6% { opacity:1; } 27% { opacity:1; } 36%,100%{ opacity:.42; } } html.nojs .lbl-stack .lbl-w{ animation:none; opacity:1; } @media (prefers-reduced-motion: reduce){ .lbl-stack .lbl-w{ animation:none; opacity:1; } } /* ---------- SOUP STEAM ---------- Rises from the open can. Soft, slow and irregular so it reads as heat rather than an animated graphic. Sits behind the can artwork (z-index 1 vs the image's 2) so it drifts up out of the opening rather than over the label. */ .peel-can-col{ position:relative; } #peelCanImg{ position:relative; z-index:2; } .can-steam{ position:absolute; z-index:1; pointer-events:none; left:31%; top:26%; width:0; height:0; } .can-steam .st{ position:absolute; left:0; bottom:0; width:clamp(16px,2.2vw,26px); height:clamp(16px,2.2vw,26px); border-radius:50%; background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.55), rgba(255,255,255,0) 70%); filter:blur(7px); opacity:0; animation: steamRise 7s ease-in-out infinite; will-change:transform,opacity; } .can-steam .st1{ animation-delay:0s; margin-left:-26px; } .can-steam .st2{ animation-delay:1.7s; margin-left:-4px; animation-duration:8s; } .can-steam .st3{ animation-delay:3.4s; margin-left:16px; animation-duration:6.5s; } .can-steam .st4{ animation-delay:5.1s; margin-left:-14px; animation-duration:7.5s; } @keyframes steamRise{ 0% { transform:translate(0,0) scale(.45); opacity:0; } 15% { opacity:.5; } 45% { transform:translate(10px,-46px) scale(1); opacity:.4; } 75% { transform:translate(-6px,-88px) scale(1.35); opacity:.16; } 100% { transform:translate(6px,-124px) scale(1.7); opacity:0; } } @media (prefers-reduced-motion: reduce){ .can-steam{ display:none; } } /* mobile: can sits in a narrow gutter — scale the steam with it */ @keyframes steamRiseSm{ 0% { transform:translate(0,0) scale(.45); opacity:0; } 15% { opacity:.45; } 45% { transform:translate(6px,-30px) scale(1); opacity:.34; } 75% { transform:translate(-4px,-56px) scale(1.3); opacity:.14; } 100% { transform:translate(4px,-78px) scale(1.6); opacity:0; } } @media (max-width:820px){ .can-steam .st{ width:13px; height:13px; filter:blur(5px); animation-name:steamRiseSm; } } /* Ingredient names and the peel prompt alternate between the panel's charcoal and the brand orange on a slow cycle. Colour only — no opacity change — so every line stays fully legible at all times. */ .ing{ color:var(--charcoal); animation: ingAlt 7s ease-in-out infinite; } @keyframes ingAlt{ 0%, 42% { color:#2E3238; } 50%, 58% { color:#E86A33; } 66%, 100% { color:#2E3238; } } .peel-cta{ color:var(--charcoal); animation: peelAlt 4.6s ease-in-out infinite; } .peel-arrow{ color:var(--deep-teal); animation: peelArrowAlt 4.6s ease-in-out infinite; } @keyframes peelAlt{ 0%, 44% { color:#2E3238; } 54%, 74% { color:#E86A33; } 84%, 100% { color:#2E3238; } } @keyframes peelArrowAlt{ 0%, 44% { color:#006D74; transform:translateX(0); } 54%, 74% { color:#E86A33; transform:translateX(3px); } 84%, 100% { color:#006D74; transform:translateX(0); } } .peel-arrow{ display:inline-block; } @media (prefers-reduced-motion: reduce){ .ing, .peel-cta{ animation:none; color:var(--charcoal); } .peel-arrow{ animation:none; color:var(--deep-teal); transform:none; } } /* Restrained orange in the hero: a rule, one word, one mark. */ .hero-eyebrow-row{ display:flex; align-items:center; gap:12px; margin-bottom:16px; } .hero-eyebrow-row i{ display:block; width:38px; height:2px; background:var(--orange); flex:0 0 auto; } /* "Market" is where the brand platform lands — the one word that carries it */ .h1-accent{ color:var(--orange); } /* CTA arrow warms on hover */ .hero-ctas-a .btn-primary{ position:relative; } .hero-ctas-a .btn-primary:hover{ background:var(--orange); } /* ===== ABOUT REDUCTION PASS additions ===== */ .eyebrow-a{font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--deep-teal);margin-bottom:14px;} .disclose-link{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--deep-teal);background:none;padding:6px 0;cursor:pointer;transition:gap .18s,color .18s;text-decoration:none;border:0;} .disclose-link .ar{transition:transform .2s;} .disclose-link:hover{gap:12px;color:#00565b;} .disclose-link.light{color:var(--aqua);} .cred-markers{display:grid;grid-template-columns:1fr 1fr;gap:18px 24px;margin-top:26px;max-width:520px;} .cred-markers .cm-n{font-size:19px;font-weight:700;color:var(--deep-teal);line-height:1.05;} .cred-markers .cm-l{font-size:12.5px;color:var(--gray);margin-top:5px;line-height:1.35;} .flex-line{font-size:16px;font-weight:700;color:var(--charcoal);margin-bottom:10px;} .bfi{background:var(--white);padding:76px 0;} @media(max-width:600px){.bfi{padding:56px 0;}} .bfi-h{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:700;letter-spacing:-.01em;color:var(--black);max-width:16ch;} .bfi-p{font-size:16px;line-height:1.7;color:var(--gray);max-width:60ch;margin-top:18px;} .btn-outline{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:15px 30px;font-size:14px;font-weight:600;letter-spacing:.02em;border:1px solid rgba(0,0,0,.28);color:var(--charcoal);background:transparent;transition:border-color .2s,color .2s;min-height:52px;} .btn-outline:hover{border-color:var(--deep-teal);color:var(--deep-teal);} .final-a{background:var(--soft-white);color:var(--charcoal);text-align:center;padding:80px 0;} @media(min-width:1024px){.final-a{padding:104px 0;}} .final-a .final-rule{width:48px;height:3px;background:var(--orange);margin:0 auto 24px;} .final-a h2{font-size:clamp(2rem,5.4vw,3rem);line-height:1.06;font-weight:700;letter-spacing:-.015em;} .final-a p{margin:20px auto 0;font-size:16px;line-height:1.6;color:var(--gray);max-width:52ch;} .final-a .final-ctas{margin-top:32px;display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;} @media(min-width:560px){.final-a .final-ctas{flex-direction:row;flex-wrap:wrap;}} @media(max-width:430px){.final-a .btn-primary,.final-a .btn-outline{width:100%;max-width:320px;}} .tmc[data-col="l"] .tmc-mark{left:0;right:auto;} .tmc[data-col="r"] .tmc-mark{right:0;left:auto;} /* footer */ .site-footer{background:var(--black);color:rgba(255,255,255,.7);border-top:3px solid var(--deep-teal);} .fwrap{padding:48px 24px 8px;display:grid;grid-template-columns:1fr;gap:34px;} .fbrand .flogo{display:flex;align-items:baseline;text-decoration:none;} .fbrand .fhash{font-weight:700;font-size:20px;color:#fff;transform:skewX(-12deg);display:inline-block;margin-right:1px;} .fbrand .fname{font-size:20px;color:#fff;} .fstmt{font-size:14px;line-height:1.7;color:rgba(255,255,255,.6);max-width:44ch;margin-top:16px;} .fgroups{display:grid;grid-template-columns:1fr;gap:32px;} .flabel{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--aqua);font-weight:700;margin-bottom:14px;} .flist{list-style:none;margin:0;padding:0;} .flist li{margin-bottom:12px;} .flist a{color:rgba(255,255,255,.9);font-size:16px;transition:color .15s;} .flist a:hover{color:var(--aqua);} .fnews-copy{font-size:14px;line-height:1.6;color:rgba(255,255,255,.65);margin-bottom:14px;max-width:42ch;} .fnews-form{display:flex;gap:10px;flex-wrap:wrap;} .fnews-form input{flex:1;min-width:0;padding:13px 15px;background:#101010;border:1px solid rgba(255,255,255,.22);color:#fff;font-size:15px;min-height:50px;} .fnews-form input:focus{outline:none;border-color:var(--teal);} .fnews-form button{padding:13px 22px;background:var(--deep-teal);color:#fff;font-size:14px;font-weight:600;letter-spacing:.02em;min-height:50px;transition:background .2s;white-space:nowrap;} .fnews-form button:hover{background:#00565b;} .fnews-note{font-size:12px;color:rgba(255,255,255,.45);margin-top:12px;} .fnews-note.ok{color:var(--aqua);} .fbottom{padding:28px 24px 40px;margin-top:8px;border-top:1px solid rgba(255,255,255,.1);font-size:12px;color:rgba(255,255,255,.5);} @media(min-width:680px){.fgroups{grid-template-columns:1fr 1fr;gap:36px 40px;}} @media(min-width:960px){.fwrap{grid-template-columns:1.4fr 2fr;gap:56px;align-items:start;}.fgroups{grid-template-columns:1fr 1fr 1.5fr;}} @media(max-width:375px){.fnews-form{flex-direction:column;}.fnews-form input,.fnews-form button{width:100%;}.fwrap{padding-left:20px;padding-right:20px;}.fbottom{padding-left:20px;padding-right:20px;}} /* modal */ .amodal-bg{position:fixed;inset:0;background:rgba(0,0,0,.62);display:none;align-items:flex-start;justify-content:center;padding:5vh 16px;z-index:90;overflow-y:auto;} .amodal-bg.open{display:flex;} .amodal{background:#fff;max-width:720px;width:100%;padding:40px 34px 44px;position:relative;color:var(--charcoal);} .amodal .amodal-close{position:absolute;top:14px;right:14px;width:40px;height:40px;font-size:22px;color:var(--charcoal);line-height:1;background:none;border:0;cursor:pointer;} .amodal h3{font-size:clamp(1.4rem,3vw,2rem);font-weight:700;line-height:1.14;margin-bottom:18px;color:var(--black);} .amodal p{font-size:15px;line-height:1.65;color:var(--charcoal);margin-bottom:12px;} @media(max-width:430px){.amodal{padding:34px 20px 36px;}} @media (prefers-reduced-motion: reduce){#canCrushAnim{display:none;}#canFallbackImg{display:block !important;}} .bfi-em{font-family:Georgia,serif;font-size:clamp(1.05rem,2vw,1.35rem);line-height:1.35;font-weight:700;color:var(--charcoal);margin-top:24px;} .bfi-em span{color:var(--deep-teal);} .astory p{font-size:15px;line-height:1.72;color:var(--charcoal);margin-bottom:14px;} .astory .em{font-family:Georgia,serif;font-size:clamp(1.1rem,2.4vw,1.5rem);line-height:1.3;font-weight:700;color:var(--deep-teal);margin:24px 0;} .astory .em.final{color:var(--orange);} #canCrushAnim{height:auto;object-fit:contain;} :is([id*='google_ads_iframe'],[id*='taboola-'],.taboolaHeight,.taboola-placeholder,#top-ad,#credential_picker_container,#credentials-picker-container,#credential_picker_iframe,#onetap_google_intermediate_iframe,[id*='google-one-tap-iframe'],#google-one-tap-popup-container,.google-one-tap__module,.google-one-tap-modal-div,.adthrive-auto-injected-player-container,.adthrive[id^="cls-video-container"]:has(.adthrive-auto-injected-player-container),#amp_floatingAdDiv,#ez-content-blocker-container) {display:none!important;min-height:0!important;height:0!important;} /* ---- THE WHOLE CAN: continuous cinematic field ---- Stack (bottom to top): 0 black section background 1 crush video (positioned against the SECTION, not a sub-box, so it has no container edge of its own) 2 #canBlend — one tonal gradient spanning the ENTIRE section (copy area AND video area). Because it covers both, there is no horizontal line where a video-only overlay would start. 3 all typography The section reserves height for the video via padding-bottom rather than a fixed-height child box, which is what previously created the visible boundary. */ #canSection{ padding-bottom: clamp(420px, 58vw, 720px); } #canCrushAnim, #canFallbackImg{ position:absolute; right:-8%; bottom:-4%; z-index:1; width:112%; height:auto; max-width:none; /* Feather the top of the footage so it emerges out of the black instead of beginning at a hard line. Vendor-prefixed for Safari. */ -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.35) 10%, #000 30%); mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.35) 10%, #000 30%); } #canFallbackImg{ display:none; } /* Continuous blend: vertical fade (dark at top through the copy, easing off over the footage) crossed with a soft left-side darkening that keeps type legible over moving frames. No solid fill anywhere, so it never reads as a rectangle or panel. */ #canBlend{ position:absolute; inset:0; z-index:2; pointer-events:none; background: linear-gradient(to bottom, rgba(0,0,0,.92) 0%, rgba(0,0,0,.80) 28%, rgba(0,0,0,.55) 48%, rgba(0,0,0,.30) 68%, rgba(0,0,0,.12) 100%), linear-gradient(100deg, rgba(0,0,0,.80) 0%, rgba(0,0,0,.45) 34%, rgba(0,0,0,0) 66%); } /* payoff line sits in the lower band of the section, over the footage, always on the top layer */ #canMessage{ padding-bottom: clamp(28px, 5vw, 72px); } #canMessage p{ opacity:0; transform:translateY(18px); transition:opacity 1s ease, transform 1s ease; } #canMessage.show p{ opacity:1; transform:translateY(0); } /* TABLET */ @media (max-width:1024px){ #canSection{ padding-bottom: clamp(380px, 62vw, 560px); } #canCrushAnim, #canFallbackImg{ right:-14%; width:126%; } #canBlend{ background: linear-gradient(to bottom, rgba(0,0,0,.93) 0%, rgba(0,0,0,.82) 32%, rgba(0,0,0,.58) 52%, rgba(0,0,0,.30) 72%, rgba(0,0,0,.12) 100%), linear-gradient(100deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.38) 40%, rgba(0,0,0,0) 72%); } } /* MOBILE — video sits lower and is more heavily veiled so it can never compete with or obscure the copy at narrow widths. */ @media (max-width:640px){ #canSection{ padding-bottom: clamp(300px, 76vw, 420px); } #canCrushAnim, #canFallbackImg{ right:-26%; bottom:-2%; width:164%; } #canBlend{ background: linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,.28) 32%, rgba(0,0,0,.12) 56%, rgba(0,0,0,.32) 82%, rgba(0,0,0,.52) 100%), linear-gradient(100deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,.12) 52%, rgba(0,0,0,0) 82%); } #canMessage{ padding-bottom:4%; } #canMessage p{ max-width:88vw; font-size:clamp(24px,7vw,36px); } } .peel-layout{ display:flex; align-items:center; gap:56px; flex-wrap:wrap; } /* Entrance: label slides in from LEFT, can answers from RIGHT ~120ms later, so they read as meeting in the middle. Plays on load, not on scroll detection. Elements are fully visible if animation never runs — no opacity:0 resting state without a fallback. */ #peelPoster{ animation: peelInLeft 700ms cubic-bezier(.22,.7,.2,1) both; } #peelCanImg{ animation: peelInRight 700ms cubic-bezier(.22,.7,.2,1) 120ms both; } @keyframes peelInLeft{ from{ opacity:0; transform:translateX(-50px); } to{ opacity:1; transform:translateX(0); } } @keyframes peelInRight{ from{ opacity:0; transform:translateX(30px); } to{ opacity:1; transform:translateX(0); } } @media (prefers-reduced-motion: reduce){ #peelPoster, #peelCanImg{ animation:none; opacity:1; transform:none; } } .peel-can-col{ flex:1 1 320px; display:flex; justify-content:center; align-items:center; min-width:280px; } #peelCanImg{ display:block; width:auto; height:clamp(360px,38vw,560px); max-width:100%; } /* MOBILE WHOLE CAN — recomposed, not shrunk. The can tucks against the OUTSIDE lower-right edge of the label so the two read as one object. It never overlaps the label's text zone (BRAND / PACKAGING / PHOTOGRAPHY / CAMPAIGNS / LAUNCH ASSETS / PEEL BACK THE LABEL / WHAT PEOPLE SEE), which all sits in the upper-left of the poster. Transparency preserved. */ /* MOBILE WHOLE CAN — recomposed, not shrunk. Label text occupies the poster's left column and the full-width teal "What people see" band along the bottom. The can is therefore placed in a reserved right-hand gutter, vertically centred in the poster's upper two-thirds: adjacent and reading as one object, while clearing the bottom band and the left-aligned copy entirely. Zero overlap of BRAND / PACKAGING / PHOTOGRAPHY / CAMPAIGNS / LAUNCH ASSETS / PEEL BACK THE LABEL / WHAT PEOPLE SEE. */ @media (max-width:820px){ .peel-layout{ display:block; position:relative; padding-right:30%; } #peelPoster{ max-width:none; width:100%; height:auto; aspect-ratio:3/4; } .peel-can-col{ position:absolute; right:0; top:6%; width:30%; min-width:0; display:block; z-index:3; pointer-events:none; } #peelCanImg{ height:auto; width:100%; max-width:none; filter:drop-shadow(0 14px 22px rgba(0,0,0,.30)); } } @media (max-width:420px){ .peel-layout{ padding-right:32%; } .peel-can-col{ width:32%; top:8%; } #peelFront > div:nth-child(2) > div:nth-child(2) p:first-child{ font-size:21px !important; } } .reel-card{flex:0 0 260px;height:320px;scroll-snap-align:start;padding:28px;display:flex;flex-direction:column;justify-content:flex-end;} @media (max-width:640px){ .reel-card{flex-basis:82vw;} } /* align-items:stretch + sticky portrait keeps the short left column visually anchored against the taller right column instead of leaving a large void beneath the image. */ .lead-spread{ display:grid; grid-template-columns:41fr 59fr; gap:clamp(30px,3.6vw,58px); align-items:start; } .lead-portrait{ position:relative; align-self:start; padding-top:6px; overflow:visible; } .lead-portrait img{ display:block; width:100%; height:auto; max-height:none; object-fit:contain; object-position:top center; overflow:visible; filter:drop-shadow(0 18px 30px rgba(0,0,0,.18)); } /* Name on the clean field beneath the portrait — never over the plaid */ .lead-nameplate{ margin-top:18px; } .ln-name{ font-family:Georgia,serif; font-weight:700; font-size:clamp(22px,2.1vw,34px); line-height:1.05; letter-spacing:-.01em; color:var(--black); } .ln-rule{ width:64px; height:3px; background:var(--deep-teal); margin-top:14px; } .lead-eyebrow{ font-size:12px; letter-spacing:.2em; text-transform:uppercase; font-weight:700; color:var(--deep-teal); margin-bottom:14px; } .lead-head{ font-size:clamp(30px,3.6vw,50px); font-weight:600; line-height:1.12; color:var(--black); margin-bottom:26px; max-width:16ch; } .lead-titles{ border-left:3px solid var(--deep-teal); padding-left:16px; margin-bottom:28px; } .lt-1{ font-size:15px; font-weight:700; color:var(--black); } .lt-2{ font-size:15px; font-weight:700; color:var(--deep-teal); margin-top:2px; } .lt-3{ font-size:13px; color:var(--gray); margin-top:2px; } .lead-narrative{ font-size:16px; line-height:1.7; color:var(--charcoal); max-width:640px; margin-bottom:15px; } .lead-sub{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:var(--gray); margin:30px 0 4px; } /* engagement models: editorial entries separated by thin rules. No boxes, no grid cells, no table appearance. */ .engage-list{ list-style:none; margin:0; padding:0; } /* Ways to engage spans the full section width — under the portrait AND the copy — reading as one band rather than a right-column list. */ .engage-block{ margin-top:clamp(36px,4vw,56px); padding-top:30px; border-top:1px solid rgba(0,0,0,.16); } .engage-block .lead-sub{ margin:0 0 16px; } @media (min-width:760px){ .engage-list{ display:grid; grid-template-columns:repeat(2,1fr); column-gap:44px; } .engage-list li{ grid-template-columns:1fr !important; gap:5px !important; } } @media (min-width:1100px){ .engage-list{ grid-template-columns:repeat(3,1fr); column-gap:40px; } } .engage-list li{ display:grid; grid-template-columns:minmax(210px,1fr) 2fr; gap:20px; padding:16px 0; border-top:1px solid rgba(0,0,0,.14); align-items:baseline; } .engage-list li:last-child{ border-bottom:1px solid rgba(0,0,0,.14); } .eg-t{ font-size:15px; font-weight:700; color:var(--black); } .eg-d{ font-size:13.5px; line-height:1.6; color:var(--gray); } @media (max-width:1024px){ .lead-spread{ grid-template-columns:1fr; gap:36px; } .lead-portrait{ position:relative; max-width:420px; padding-top:0; } } @media (max-width:620px){ .engage-list li{ grid-template-columns:1fr; gap:4px; } .ln-name{ font-size:22px; } } .tmwrap{ margin-top:clamp(38px,4.5vw,58px); padding-top:clamp(30px,3.5vw,44px); border-top:1px solid rgba(255,255,255,.14); } /* ---------- RENEE FEATURED ---------- */ /* head row: intro copy left, Renee right — removes the empty field that previously sat beside the intro text. */ .tmhead{ display:grid; grid-template-columns:1fr; gap:32px; align-items:end; } @media(min-width:900px){ .tmhead{ grid-template-columns:minmax(0,1fr) minmax(0,42%); gap:56px; } .tmhead-copy{ padding-bottom:8px; } } .tmhead-copy p{ max-width:60ch; } .tmf{ position:relative; display:grid; grid-template-columns:1fr; gap:14px; align-items:end; padding:0; margin:0; border-bottom:0; } @media(min-width:520px) and (max-width:899px){ .tmf{ grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:32px; align-items:end; } } .tmf-fig img{ display:block; width:100%; max-width:330px; height:auto; margin-left:auto; filter:drop-shadow(0 20px 34px rgba(0,0,0,.55)); position:relative; z-index:1; } .tmf-copy{ position:relative; z-index:3; padding-bottom:8px; } .tmf-copy h3{ font-size:clamp(34px,4.2vw,54px); font-weight:700; letter-spacing:-.02em; line-height:1; } .tmf-role{ font-size:clamp(16px,1.7vw,20px); font-weight:600; color:var(--aqua); margin-top:10px; } .tmf-disc{ font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:rgba(255,255,255,.6); margin-top:12px; } .tmf-line{ font-family:Georgia,serif; font-size:clamp(15px,1.4vw,19px); font-weight:700; line-height:1.32; margin-top:16px; max-width:32ch; } .tmf-mark{ position:absolute; z-index:2; pointer-events:none; font-family:Georgia,serif; font-weight:700; font-size:clamp(56px,9vw,132px); line-height:1; letter-spacing:-.02em; white-space:nowrap; left:auto; right:0; bottom:0; color:rgba(255,255,255,.15); -webkit-text-stroke:1px rgba(232,106,51,.62); text-shadow:0 2px 16px rgba(0,0,0,.45); } @media(min-width:900px){ .tmf-mark{ left:auto; right:0; bottom:-4%; font-size:clamp(48px,5.6vw,92px); } } /* ---------- TWO-COLUMN GRID ---------- */ .tmgrid{ display:grid; grid-template-columns:1fr; gap:0 72px; } @media(min-width:860px){ .tmgrid{ grid-template-columns:1fr 1fr; } } .tmcol{ display:flex; flex-direction:column; } .tmc{ position:relative; display:grid; grid-template-columns:minmax(0,150px) minmax(0,1fr); gap:24px; align-items:end; padding:30px 0 34px; min-height:0; border-bottom:1px solid rgba(255,255,255,.08); } @media(min-width:520px){ .tmc{ grid-template-columns:minmax(0,190px) minmax(0,1fr); gap:30px; padding:34px 0 38px; } } .tmc-fig img{ display:block; width:100%; height:auto; position:relative; z-index:1; filter:drop-shadow(0 14px 24px rgba(0,0,0,.5)); } .tmc-copy{ position:relative; z-index:3; padding-bottom:4px; } .tmc-copy h3{ font-size:clamp(21px,2.2vw,28px); font-weight:700; letter-spacing:-.015em; line-height:1; } .tmc-role{ font-size:13.5px; font-weight:600; color:var(--aqua); margin-top:7px; line-height:1.3; } .tmc-disc{ font-size:10px; letter-spacing:.11em; text-transform:uppercase; color:rgba(255,255,255,.38); margin-top:10px; line-height:1.6; } .tmc-line{ font-family:Georgia,serif; font-size:14px; font-weight:400; font-style:italic; line-height:1.45; color:rgba(255,255,255,.9); margin-top:13px; padding-top:12px; max-width:30ch; border-top:1px solid rgba(255,255,255,.12); } /* watermark: lower + outward, portrait may overlap part of it */ .tmc-mark{ position:absolute; z-index:2; pointer-events:none; font-family:Georgia,serif; font-weight:700; font-size:clamp(26px,3.4vw,44px); line-height:1; letter-spacing:-.02em; white-space:nowrap; left:auto; right:0; bottom:0; color:rgba(255,255,255,.14); -webkit-text-stroke:.6px rgba(232,106,51,.45); text-shadow:0 2px 12px rgba(0,0,0,.4); } /* motion: Renee first, then rows left -> right */ .tmf, .tmc{ opacity:0; transform:translateY(20px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); } .tmc{ transition-delay:var(--d,0ms); } .tmf.in, .tmc.in{ opacity:1; transform:none; } html.nojs .tmf, html.nojs .tmc{ opacity:1 !important; transform:none !important; } /* ---------- MOBILE: single column, approved reading order ---------- */ @media(max-width:859px){ .tmwrap{ margin-top:32px; padding-top:26px; } .tmgrid{ display:flex; flex-direction:column; } .tmcol{ display:contents; } .tmc[data-col="l"]:nth-of-type(1){ order:1; } /* Alysia */ .tmc[data-col="r"]:nth-of-type(1){ order:2; } /* Isabel */ .tmc[data-col="l"]:nth-of-type(2){ order:3; } /* Michael */ .tmc[data-col="r"]:nth-of-type(2){ order:4; } /* Destiny */ .tmc[data-col="l"]:nth-of-type(3){ order:5; } /* Amie */ .tmc[data-col="r"]:nth-of-type(3){ order:6; } /* Floyd */ .tmc{ padding:24px 0 28px; gap:18px; grid-template-columns:minmax(0,40%) minmax(0,1fr); } .tmc-copy h3{ font-size:21px; } .tmc-role{ font-size:13px; } .tmc-disc{ font-size:9.5px; margin-top:8px; } .tmc-line{ font-size:13px; margin-top:11px; padding-top:10px; } .tmc-mark{ font-size:24px; left:auto; right:0; bottom:0; } .tmf{ padding-bottom:0; } .tmf-fig img{ max-width:230px; margin-left:0; } .tmf-copy h3{ font-size:34px; } .tmf-mark{ font-size:46px; left:auto; right:0; bottom:0; top:auto; } } @media(max-width:380px){ .tmc{ grid-template-columns:minmax(0,38%) minmax(0,1fr); gap:14px; padding:20px 0 24px; } .tmc-copy h3{ font-size:19px; } .tmc-line{ font-size:12.5px; } .tmc-mark{ font-size:19px; left:auto; right:0; bottom:0; } } @media (prefers-reduced-motion: reduce){ .tmf, .tmc{ transition:none !important; opacity:1 !important; transform:none !important; } } .xgrid{ display:grid; grid-template-columns:1fr; gap:0; border-top:1px solid rgba(0,0,0,.13); } @media(min-width:760px){ .xgrid{ grid-template-columns:repeat(4,1fr); } } .xg{ padding:22px 0 24px; border-bottom:1px solid rgba(0,0,0,.09); } @media(min-width:760px){ .xg{ padding:24px 22px 26px 0; border-bottom:0; } .xg+.xg{ padding-left:22px; border-left:1px solid rgba(0,0,0,.09); } } .xg-t{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--deep-teal); margin-bottom:12px; } .xg li{ font-size:14px; line-height:1.5; color:var(--charcoal); padding:5px 0; }