/* Isolated header and opening campaign design. */
@font-face{font-family:CampaignSerif;src:url('assets/campaign-serif.otf') format('opentype');font-style:normal;font-weight:700;font-display:swap}
.campaign-header{position:fixed;inset:0 0 auto;height:112px;padding:10px 5%;background:transparent;color:#242720;border:0;transition:background .4s,height .4s;z-index:50}
.campaign-header .brand,.campaign-header .brand img{width:78px;height:96px}.campaign-header nav{gap:45px;font-size:15px}.campaign-header .header-end{display:flex;align-items:center;gap:24px}.campaign-header .header-trade{display:flex;gap:24px;align-items:center;font-size:12px;letter-spacing:.07em;text-transform:uppercase;border-bottom:1px solid #98824e;padding:13px 0}.campaign-header .header-trade span{font-size:24px;transition:transform .35s}.campaign-header .header-trade:hover span{transform:translate(3px,-3px)}.campaign-header.is-scrolled{height:88px;background:#f8f6efed;backdrop-filter:blur(18px);box-shadow:0 1px 0 #a38b5133}.campaign-header.is-scrolled .brand,.campaign-header.is-scrolled .brand img{height:77px;width:62px}.campaign-header .menu-toggle{color:#252921}.mobile-nav{z-index:45;background:#f8f6effa;color:#252921}
.campaign-hero{--pointer-x:0;--pointer-y:0;--hero-scroll:0;position:relative;display:block;isolation:isolate;overflow:hidden;width:100%;height:100svh;min-height:850px;max-height:1200px;padding:0;background:#f7f5ee;color:#242820}
.campaign-hero:before,.campaign-hero:after{display:none}.hero-film{position:absolute;inset:0;z-index:-2;background:#f7f5ee;pointer-events:none}.hero-film video{width:100%;height:100%;object-fit:cover;opacity:.62;filter:saturate(.35);transform:scale(1.035) translateX(calc(var(--pointer-x)*-6px))}.hero-film:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#f7f5eedb 0%,#f7f5ee92 26%,#f7f5ee45 62%,#f7f5eeeb 100%)}
.campaign-hero .hero-top{position:absolute;top:140px;left:5%;right:5%;display:flex;justify-content:space-between;z-index:4;color:#676b60;font-size:12px;letter-spacing:.12em}.campaign-hero .hero-top span:nth-child(2){color:inherit}
.campaign-hero h1{position:absolute;left:0;right:0;top:17%;margin:0;text-align:center;z-index:1;line-height:1;pointer-events:none;font-weight:400;transform:translate3d(calc(var(--pointer-x)*-7px),calc(var(--hero-scroll)*-50px),0)}
.campaign-hero h1 .hero-kicker{display:flex;align-items:center;justify-content:center;gap:20px;font-family:Body,Arial,sans-serif;font-size:clamp(18px,2.5vw,38px);letter-spacing:.48em;line-height:1.5;animation:wordReveal 1.2s ease both}.hero-kicker i{font-family:Editorial,Georgia,serif;font-weight:400;letter-spacing:0;font-size:1.4em}.campaign-hero h1 .hero-destination{display:block;font-family:Editorial,Georgia,serif;font-style:italic;font-size:clamp(125px,20.3vw,330px);font-weight:400;letter-spacing:-.065em;line-height:1.12;transform:translateX(-.025em);color:#343d32;animation:wordReveal 1.5s .16s both}
.hero-tableau{position:absolute;inset:0;z-index:3}.hero-object{position:absolute;margin:0;width:var(--can-width);left:var(--left);top:var(--top);transform:translate3d(calc(var(--pointer-x)*var(--depth)),calc(var(--pointer-y)*var(--depth)*.45 - var(--hero-scroll)*var(--depth)*2),0);will-change:transform}.object-arrival{animation:objectReveal 1.6s cubic-bezier(.2,.65,.2,1) var(--delay) both}.hero-object .can{filter:drop-shadow(9px 18px 9px #514e4036);position:relative;z-index:2}.hero-object .can:after{content:'';position:absolute;left:4%;right:-4%;bottom:-3%;height:4%;background:#74766445;filter:blur(8px);border-radius:50%;z-index:-1}.hero-object figcaption{display:flex;justify-content:space-between;gap:4px;margin-top:22px;padding-top:8px;border-top:1px solid #8f815b52;font-size:12px;letter-spacing:.04em;color:#353b32;white-space:nowrap}.hero-object figcaption span{color:#78663c}.hero-object .can:has(img[src$="trakr-cutout.png"]){aspect-ratio:.372}.hero-object .can img[src$="trakr-cutout.png"]{clip-path:none;top:-12%;left:-107%}
.object-1{--left:6%;--top:43%;--can-width:9.2%;--depth:9px;--delay:.36s}.object-2{--left:21.5%;--top:37%;--can-width:10%;--depth:12px;--delay:.48s}.object-3{--left:37.7%;--top:46%;--can-width:11.4%;--depth:19px;--delay:.6s}.object-4{--left:55%;--top:40%;--can-width:10.8%;--depth:16px;--delay:.72s}.object-5{--left:72%;--top:34.5%;--can-width:9.2%;--depth:8px;--delay:.84s}.object-6{--left:86.4%;--top:45%;--can-width:8.3%;--depth:6px;--delay:.96s}
.campaign-hero .hero-bottom{position:absolute;left:5%;right:5%;bottom:34px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:30px;padding-top:20px;border-top:1px solid #8f815b40;z-index:8}.campaign-hero .hero-bottom p{font-size:14px;line-height:1.5;color:#6e7166}.hero-discover{font-size:13px;letter-spacing:.12em;display:flex;align-items:center;gap:34px;padding:13px 0;position:relative}.hero-discover:after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:#8e773e;transform:scaleX(.35);transform-origin:left;transition:transform .5s}.hero-discover:hover:after{transform:scaleX(1)}.hero-arrow{font-size:30px;font-weight:400;color:#917b48;transition:transform .4s}.hero-discover:hover .hero-arrow{transform:translate(5px,-5px)}.campaign-hero .scroll-cue{justify-self:end;display:flex;align-items:center;gap:20px;font-size:12px;letter-spacing:.06em}.campaign-hero .scroll-cue span{font-size:12px}.campaign-hero .scroll-cue span:last-child{font-size:22px;color:#917b48}.hero-motion{position:absolute;right:14px;bottom:7px;border:0;background:transparent;z-index:9;color:#736441;width:32px;height:32px}.campaign-hero.hero-paused *,.campaign-hero.hero-offscreen *,.motion-paused .campaign-hero *{animation-play-state:paused!important}.campaign-hero.hero-paused .object-arrival,.campaign-hero.hero-paused h1 span{animation:none;opacity:1;clip-path:none}
@keyframes wordReveal{from{opacity:0;clip-path:inset(100% 0 0);translate:0 20px}to{opacity:1;clip-path:inset(0);translate:0 0}}@keyframes objectReveal{from{opacity:0;transform:translateY(35px)}to{opacity:1;transform:translateY(0)}}
@media(min-aspect-ratio:17/10) and (min-width:1000px){.campaign-hero{min-height:870px}.hero-object{--can-width:8%}.object-3{--can-width:9.2%}.object-4{--can-width:8.7%}.campaign-hero h1{top:15%}}
@media(max-width:1000px) and (min-width:701px){.campaign-header nav{gap:24px}.campaign-header .header-trade{font-size:11px;gap:10px}.campaign-hero{min-height:800px;max-height:1000px}.campaign-hero h1{top:22%}.hero-object{--top:48%}.object-2,.object-5{--top:41%}.object-3{--top:53%}.campaign-hero .scroll-cue{display:none}.campaign-hero .hero-bottom{grid-template-columns:1fr auto}}
@media(max-width:700px){.campaign-header{height:88px;padding:5px 6%}.campaign-header .brand,.campaign-header .brand img{width:62px;height:78px}.campaign-header nav{display:none}.campaign-header .header-end{gap:18px}.campaign-header .header-trade{font-size:11px;letter-spacing:0;gap:10px;padding:9px 0}.campaign-header .header-trade span{font-size:20px}.campaign-header .menu-toggle{display:flex;font-size:12px;gap:7px;padding:9px 0}.campaign-header.is-scrolled{height:75px}.campaign-header.is-scrolled .brand,.campaign-header.is-scrolled .brand img{height:66px;width:53px}.mobile-nav{inset:0;padding:110px 8% 35px}.campaign-hero{height:1040px;min-height:1040px;max-height:none}.campaign-hero .hero-top{top:112px;left:6%;right:6%;font-size:10px;letter-spacing:.07em}.campaign-hero .hero-top span:nth-child(2){display:none}.campaign-hero h1{top:153px;left:-2%;right:-2%;transform:translateY(calc(var(--hero-scroll)*-20px))}.campaign-hero h1 .hero-kicker{font-size:20px;gap:15px;letter-spacing:.4em}.campaign-hero h1 .hero-destination{font-size:25vw;line-height:1.35;letter-spacing:-.07em}.hero-object{--can-width:20%;transform:translateY(calc(var(--hero-scroll)*var(--depth)*-1));will-change:auto}.object-1{--left:7%;--top:34%}.object-2{--left:40%;--top:29.5%}.object-3{--left:73%;--top:35.5%}.object-4{--left:7%;--top:62.5%}.object-5{--left:40%;--top:58%}.object-6{--left:73%;--top:64%}.hero-object figcaption{font-size:10px;letter-spacing:0;margin-top:17px;padding-top:6px;gap:2px}.campaign-hero .hero-bottom{left:7%;right:7%;bottom:32px;display:flex;flex-direction:column;gap:18px;padding-top:12px;align-items:stretch}.campaign-hero .hero-bottom p{display:none}.hero-discover{justify-content:space-between;font-size:12px;min-height:45px}.hero-discover:after{transform:scaleX(1)}.campaign-hero .scroll-cue{display:flex;justify-content:space-between;font-size:11px}.campaign-hero .scroll-cue span{font-size:11px}.campaign-hero .scroll-cue span:last-child{font-size:18px}.hero-film video{opacity:.5;object-position:55% center}.hero-motion{bottom:3px;right:5px}}
@media(max-width:700px){.campaign-hero{height:1100px;min-height:1100px}.hero-object{width:min(20%,82px)}.object-4{--top:61%}.object-5{--top:56.5%}.object-6{--top:62.5%}}
@media(max-width:360px){.campaign-header .header-trade{font-size:10px}.campaign-header .header-end{gap:12px}.hero-object figcaption{font-size:9px}}
@media(min-width:701px){.hero-object{width:min(var(--can-width),13svh)}.object-3{width:min(var(--can-width),14svh);--top:43%}.object-4{width:min(var(--can-width),13.5svh)}}
@media(min-width:1600px){.campaign-hero{min-height:980px}.hero-object{max-width:155px}.object-3{max-width:172px}}
.campaign-hero h1.collection-title{top:19%;left:8%;right:8%;line-height:.95;font-family:CampaignSerif,Georgia,serif;font-weight:700;letter-spacing:-.045em}
.collection-title .collection-line{display:block;font-size:clamp(40px,5.7vw,88px);animation:wordReveal 1.25s cubic-bezier(.2,.65,.2,1) both}
.collection-title .collection-shared{font-size:clamp(37px,5.2vw,80px);margin-top:6px;animation-delay:.16s}
.collection-title em{font-style:normal;color:#8d753f}
.campaign-hero .hero-signature{display:flex;align-items:center;gap:15px;color:#736447;white-space:nowrap}
.hero-signature i{position:relative;display:block;width:42px;height:1px;background:#a390663d;overflow:hidden}
.hero-signature i:after{content:'';position:absolute;inset:0;background:#927943;animation:signatureRoute 4s ease-in-out infinite;transform-origin:left}
.hero-object .can-trigger{display:block;position:relative;width:100%;border:0;padding:0;background:transparent;isolation:isolate;touch-action:pan-y;-webkit-tap-highlight-color:transparent;cursor:pointer}
.hero-object .can-trigger:focus-visible{outline:1px solid #967d47;outline-offset:15px;border-radius:45%}
.hero-object .can-trigger .can{transition:filter .3s;transform-origin:50% 85%;pointer-events:none}
.hero-object .liquid-bloom{position:absolute;width:215%;max-width:none;height:auto;left:-57.5%;top:13%;z-index:0;opacity:0;pointer-events:none;transform:scale(.76);mix-blend-mode:multiply}
.hero-object .can-trigger .can{z-index:1}
.hero-object.is-reacting{z-index:5}
.hero-object.is-reacting .liquid-bloom{animation:liquidBloom 1.15s cubic-bezier(.17,.64,.25,1) both}
.hero-object.is-reacting .can{animation:canResponse 1.15s cubic-bezier(.2,.65,.2,1) both}
.hero-object:nth-child(even){--micro-tilt:1deg}.hero-object:nth-child(odd){--micro-tilt:-1deg}
.hero-object.is-reacting figcaption{color:#94763a;border-color:#94763a}
.hero-object figcaption{transition:color .35s,border-color .35s}
.campaign-hero .hero-interaction-hint{font-size:12px;letter-spacing:.1em}
.hint-touch{display:none}
@keyframes signatureRoute{0%,100%{transform:translateX(-105%)}55%{transform:translateX(105%)}}
@keyframes liquidBloom{0%{opacity:0;transform:translateY(10px) scale(.76)}25%{opacity:.82}65%{opacity:.48}100%{opacity:0;transform:translateY(-8px) scale(1.08)}}
@keyframes canResponse{0%,100%{transform:translateY(0) rotate(0) scale(1)}35%{transform:translateY(-7px) rotate(var(--micro-tilt)) scale(1.025)}}
@media(pointer:coarse){.hint-touch{display:inline}.hint-desktop{display:none}}
@media(max-width:1000px) and (min-width:701px){.campaign-hero h1.collection-title{top:23%}.collection-title .collection-line{font-size:6vw}.collection-title .collection-shared{font-size:5.7vw}}
@media(max-width:700px){.campaign-hero .hero-top{top:111px;font-size:10px;letter-spacing:.05em}.campaign-hero .hero-top .hero-signature{display:flex;gap:7px;font-size:10px}.hero-signature i{width:20px}.campaign-hero h1.collection-title{top:161px;left:5%;right:5%;text-align:center;letter-spacing:-.035em}.collection-title .collection-line{font-size:8.3vw;line-height:1.04}.collection-title .collection-shared{font-size:7.1vw;letter-spacing:.025em;margin-top:12px}.collection-title em{display:block;font-size:12.8vw;line-height:1.06;letter-spacing:-.03em;margin-top:3px}.hero-object .liquid-bloom{width:195%;left:-47.5%;top:17%}.campaign-hero .hero-bottom{gap:11px}.campaign-hero .hero-interaction-hint{display:block;text-align:center;font-size:10px;letter-spacing:.1em}.campaign-hero .hero-interaction-hint .hint-desktop{display:none}.campaign-hero .hero-interaction-hint .hint-touch{display:inline}.campaign-hero .hero-bottom .scroll-cue{display:none}}
@media(prefers-reduced-motion:reduce){.campaign-hero *, .campaign-header{animation:none!important;transition:none!important}.campaign-hero .hero-object,.campaign-hero h1{transform:none}.hero-film video{display:none}.hero-film{background:url('assets/ivory-journey.jpg') center/cover}.campaign-hero h1 span{opacity:1;clip-path:none}}
@media(max-width:700px){.collection-title .collection-line{font-size:clamp(26px,8.3vw,36px)}.collection-title .collection-shared{font-size:clamp(23px,7.1vw,31px)}.collection-title em{font-size:clamp(42px,12.8vw,56px)}}
.campaign-hero.hero-paused .liquid-bloom,.motion-paused .campaign-hero .liquid-bloom{display:none}.campaign-hero.hero-paused .can,.motion-paused .campaign-hero .can{animation:none!important}
/* Matched pairs preserve the original stagger, with true transparent cutouts. */
.hero-object .can:has(img[src$="-clean.png"]){aspect-ratio:.38}
.hero-object .can img[src$="-clean.png"]{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center top;clip-path:none;max-width:100%}
@media(min-width:701px){
 .object-1,.object-6{--top:43%;--can-width:9.2%;--depth:9px;width:min(9.2%,13svh)}
 .object-2,.object-5{--top:37%;--can-width:10%;--depth:12px;width:min(10%,13svh)}
 .object-3,.object-4{--top:43%;--can-width:11.4%;--depth:19px;width:min(11.4%,14svh);max-width:172px}
}
@media(max-width:1000px) and (min-width:701px){.object-1,.object-6{--top:48%}.object-2,.object-5{--top:41%}.object-3,.object-4{--top:48%}}
@media(max-width:700px){
 .campaign-hero{height:1160px;min-height:1160px}
 .hero-object{width:min(20%,76px)}
 .object-1,.object-2,.object-3{--left:20%}
 .object-4,.object-5,.object-6{--left:60%}
 .object-2,.object-5{--top:29%;--depth:12px}
 .object-3,.object-4{--top:49%;--depth:19px}
 .object-1,.object-6{--top:68%;--depth:9px}
}