/* Opening film softens into the persistent frosted card background. */
.hero.hero-hub{--hub-frost:.30;--hub-blur:8px;display:block;min-height:100svh;height:auto;background:#fff;color:#171917;overflow:hidden}
.hub-content{position:relative;z-index:1;opacity:1;transition:opacity 1.4s ease;min-height:100svh;padding:132px 0 50px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.hub-heading{text-align:center;position:relative;z-index:2}
.hub-heading>p{font-family:Arial,sans-serif;font-size:11px;letter-spacing:.26em;color:#8c9589;margin-bottom:19px}
.hero-hub .hub-heading h1{font-size:clamp(42px,4.5vw,70px);font-weight:400;letter-spacing:.13em;padding-left:.13em;line-height:1.35;animation:none;text-shadow:none}
.card-stage{width:min(1300px,calc(100% - 64px));height:350px;position:relative;margin:42px auto 18px;perspective:1300px;isolation:isolate}
.nav-card{position:absolute;top:43%;left:50%;width:var(--card-width,166px);height:228px;z-index:var(--card-z,1);--dx:0px;--dy:0px;--rot:0deg;--lift:0px;--scale:1;--shift:0px;transform:translate(-50%,-50%) translate3d(calc(var(--dx) + var(--shift) + var(--stage-x,0px)),calc(var(--dy) + var(--lift) + var(--stage-y,0px)),0) rotate(var(--rot)) scale(var(--scale));transform-origin:center 60%;transition:transform .55s cubic-bezier(.22,.75,.2,1),filter .4s;outline-offset:12px;border-radius:14px}
.nav-card-float{position:relative;display:block;width:100%;height:100%;animation:card-breathe 5s ease-in-out infinite;animation-delay:var(--float-delay);transform-origin:center bottom}
.nav-card-shell{width:100%;height:100%;display:block;position:relative;border-radius:13px;overflow:hidden;background:var(--card-accent);box-shadow:0 7px 20px #1b28121a,0 1px 1px #00000010;transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .18s ease-out,box-shadow .5s}
.nav-card-shell>img{width:100%;height:100%;object-fit:cover;user-select:none}
.tone-photo .nav-card-shell:before{content:'';position:absolute;inset:0;background:linear-gradient(#0006,transparent 36%,transparent 74%,#0002);z-index:1}
.nav-card-shell:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:4;background:radial-gradient(200px circle at var(--shine-x,50%) var(--shine-y,30%),#ffffff80,transparent 65%);opacity:0;transition:opacity .35s;mix-blend-mode:soft-light}
.card-overline{position:absolute;top:17px;left:15px;z-index:2;font-family:Arial,'Microsoft YaHei',sans-serif;font-size:10px;letter-spacing:.07em;color:#fff}
.card-open{position:absolute;right:14px;bottom:14px;width:30px;height:30px;border:1px solid #ffffff70;border-radius:50%;color:white;display:grid;place-items:center;font-size:20px;z-index:3;opacity:0;transform:translateY(7px);transition:opacity .3s,transform .3s}
.card-label{position:absolute;left:50%;bottom:-37px;transform:translateX(-50%);text-align:center;white-space:nowrap;font-size:13px;line-height:1.5;color:#697162;background:#ffffffd9;border-radius:99px;padding:4px 10px;transition:color .3s,background .3s}
.card-typography{position:absolute;inset:20px 0 0;display:flex;align-items:center;justify-content:center;text-align:center;font-size:37px;letter-spacing:-.04em;line-height:1.25;font-weight:500;color:#183025}
.tone-ink .nav-card-shell{background:#263c33}.tone-ink .card-typography{font-size:32px;color:#edf8be}
.tone-orange .nav-card-shell{background:#ed8c56}.tone-orange .card-typography{font-size:51px;color:#502d22}.tone-orange .card-overline{color:#542c21}
.tone-lime .nav-card-shell{background:#dded63}.tone-lime .card-typography{font-size:37px;color:#354628}.tone-lime .card-overline{color:#354628}
.tone-blue .nav-card-shell{background:#7ca7df}.tone-blue .card-typography{font-size:48px;color:#f3f7fd}
.tone-purple .nav-card-shell{background:#c4b4e4}.tone-purple .card-typography{font-family:Arial,sans-serif;font-size:130px;font-weight:400;color:#554071}.tone-purple .card-overline{color:#554071}
.hover-flare{position:absolute;inset:-10px;border:1px solid var(--card-accent);border-radius:22px;opacity:0;transform:scale(.95);box-shadow:0 0 38px 5px var(--card-accent);transition:opacity .45s,transform .6s;pointer-events:none}
.nav-card.is-active,.nav-card:focus-visible{--lift:-38px;--scale:1.16;z-index:60;outline-color:var(--card-accent)}
.nav-card.is-active .nav-card-float,.nav-card:focus-visible .nav-card-float{animation-play-state:paused}
.nav-card.is-active .nav-card-shell,.nav-card:focus-visible .nav-card-shell{box-shadow:0 26px 38px #1b28122b,0 8px 12px #00000013}
.nav-card.is-active .hover-flare,.nav-card:focus-visible .hover-flare{opacity:.32;transform:scale(1.03)}
.nav-card.is-active .nav-card-shell:after,.nav-card:focus-visible .nav-card-shell:after{opacity:1}
.nav-card.is-active .card-open,.nav-card:focus-visible .card-open{opacity:1;transform:none}
.nav-card.is-active .card-label,.nav-card:focus-visible .card-label{color:#1b2815;background:var(--card-accent)}
.hub-caption{height:66px;text-align:center;margin:0 20px;max-width:560px}
.hub-caption>p{font-size:20px;color:#30382b;line-height:1.6;font-weight:500}
.hub-caption>span{display:block;margin-top:7px;font-size:13px;color:#8b9482}
.hub-footer{display:flex;align-items:center;justify-content:center;gap:30px;margin-top:36px;font-size:11px;line-height:1.6;color:#8d9585}
.hub-footer button{font-size:12px;color:#63735a;border-bottom:1px solid #bdc6b4;padding:4px 0}
.hub-footer button span{font-size:16px;display:inline-block;margin-left:8px}.hub-touch-hint{display:none}
body.hub-ready .header:not(.scrolled){color:#1f271b;background:transparent}
body.intro-running .header:not(.scrolled){color:#263125;background:transparent}
body.intro-running.intro-brand-stage .header:not(.scrolled){color:#1f271b}
.intro-screen{--title-opacity:0;--title-blur:7px;--title-scale:1.055;--film-wash:0;position:absolute;inset:0;z-index:20;background:#f5f0e7;opacity:1;transition:opacity 1.4s ease,visibility 1.4s}
.intro-screen[hidden]{display:none}.intro-screen.leaving{opacity:0;pointer-events:none;visibility:hidden}
.intro-shade{position:absolute;inset:0;background:#fff;opacity:var(--film-wash,0);transition:opacity .3s linear;pointer-events:none}
.intro-screen .hero-video{object-position:center;filter:none;transform:none;transition:none}
.intro-screen.brand-visible .intro-shade{opacity:var(--hub-frost);transition:opacity 1.75s ease}
.intro-screen.brand-visible .hero-video{filter:blur(var(--hub-blur)) saturate(.88);transform:perspective(1400px) translate3d(var(--paint-x,0px),var(--paint-y,0px),0) rotateX(var(--paint-rx,0deg)) rotateY(var(--paint-ry,0deg)) scale(1.14);transition:filter 1.75s ease,transform 1.75s ease}
.intro-screen.is-backdrop{z-index:0;pointer-events:none}
.intro-screen.is-backdrop .intro-skip{display:none}
.intro-screen.is-backdrop .hero-video{transition:none}
.intro-skip{position:absolute;right:var(--gutter);bottom:40px;color:#354230;border:1px solid #53634955;border-radius:99px;padding:10px 21px;font-size:13px;z-index:4;background:#fff8;backdrop-filter:blur(6px)}
.intro-skip span{margin-left:15px}.intro-screen.brand-visible .intro-skip{color:#6d7864;border-color:#cbd0c5;background:transparent}
body.intro-running .hub-content{visibility:visible;opacity:1;z-index:21;pointer-events:none}
body.intro-running .card-stage,body.intro-running .hub-caption,body.intro-running .hub-footer{visibility:hidden;opacity:0}
body.intro-running .hub-heading>p{opacity:0}
.hero-hub #hero-title{transform-origin:center center;will-change:transform,opacity,filter}
.hub-arriving .hub-heading>p,.hub-arriving .hub-caption,.hub-arriving .hub-footer{animation:hub-detail-arrive 1s ease .35s both}
@keyframes hub-detail-arrive{from{opacity:0}to{opacity:1}}
.hub-return{position:fixed;right:26px;bottom:26px;z-index:25;background:#fffef8f5;backdrop-filter:blur(10px);color:#34402c;border:1px solid #d5ddcd;border-radius:99px;padding:11px 20px;font-size:13px;box-shadow:0 5px 20px #0000000d;display:flex;align-items:center;gap:8px;opacity:0;transform:translateY(18px);transition:opacity .3s,transform .3s;pointer-events:none;visibility:hidden}
.hub-return>span{font-size:22px;line-height:1}.hub-return.is-visible{opacity:1;transform:none;pointer-events:auto;visibility:visible}
.hub-return:hover{background:var(--acid)}
.hub-arriving .nav-card{animation:card-arrive 1.5s cubic-bezier(.18,.8,.18,1) both;animation-delay:var(--arrive-delay,0s)}
@keyframes card-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes card-arrive{from{opacity:0;translate:0 28px;scale:.94}to{opacity:1;translate:0 0;scale:1}}
@media(min-width:1001px) and (max-height:780px){.hub-content{padding-top:108px;padding-bottom:30px;min-height:740px}.card-stage{height:305px;margin-top:35px}.hub-heading>p{margin-bottom:12px}.hub-footer{margin-top:24px}}
@media(max-width:1200px) and (min-width:1001px){.nav-card{height:210px}.card-label{font-size:12px;padding:4px 8px}.card-typography{font-size:32px}.tone-orange .card-typography,.tone-blue .card-typography{font-size:44px}.tone-ink .card-typography{font-size:28px}}
@media(max-width:1000px){.hub-content{padding:125px 0 45px;min-height:100svh;justify-content:center}.card-stage{display:flex;align-items:center;gap:24px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;width:100%;height:355px;margin:25px 0 17px;padding:34px 40px 65px;perspective:none;isolation:isolate}.card-stage::-webkit-scrollbar{display:none}.nav-card{position:relative;flex:0 0 180px;left:auto;top:auto;width:180px;height:240px;transform:rotate(var(--mobile-rot,0deg));scroll-snap-align:center;transition:transform .4s;--stage-x:0px;--stage-y:0px}.nav-card.is-active,.nav-card:focus-visible{transform:translateY(-10px) rotate(0) scale(1.035)}.card-label{bottom:-37px;font-size:14px}.hub-arriving .nav-card{animation:mobile-card-arrive .7s ease both;animation-delay:var(--arrive-delay,0s)}.hub-desktop-hint{display:none}.hub-touch-hint{display:inline}.hub-caption{height:72px}.hub-footer{gap:25px}.hub-heading h1{font-size:52px}.nav-card-shell{border-radius:15px}.card-overline{font-size:11px}.hero-hub .hub-heading h1{font-size:52px}}
@media(max-width:600px){.hub-content{padding:120px 0 42px;min-height:100svh}.hero.hero-hub{min-height:760px}.hero-hub .hub-heading h1{font-size:43px;letter-spacing:.14em}.hub-heading>p{font-size:10px;letter-spacing:.2em;margin-bottom:17px}.card-stage{height:320px;padding:34px 30px 60px;gap:23px;margin:24px 0 12px}.nav-card{flex-basis:165px;width:165px;height:217px}.card-label{font-size:13px}.card-typography{font-size:35px}.tone-ink .card-typography{font-size:30px}.tone-orange .card-typography,.tone-blue .card-typography{font-size:47px}.tone-purple .card-typography{font-size:110px}.hub-caption{height:80px;margin:0 24px}.hub-caption>p{font-size:19px}.hub-caption>span{font-size:12px;line-height:1.9}.hub-footer{flex-direction:column;gap:17px;margin-top:18px;font-size:11px}.intro-skip{right:24px;bottom:32px;font-size:12px;padding:9px 17px}.hub-return{right:16px;bottom:18px;padding:9px 15px;font-size:12px}.hub-return>span{font-size:20px}}
@keyframes mobile-card-arrive{from{opacity:0;translate:0 35px}to{opacity:1;translate:0 0}}
.motion-off .nav-card-float{animation:none}.motion-off .nav-card.is-active,.motion-off .nav-card:focus-visible{--lift:0px;--scale:1}.motion-off .nav-card-shell{transform:none}
@media(prefers-reduced-motion:reduce){.nav-card-float{animation:none}.nav-card.is-active,.nav-card:focus-visible{--lift:0px;--scale:1}.nav-card-shell{transform:none}.hero-hub{scroll-behavior:auto}}
.hero.hero-hub{place-items:normal}.hub-content{width:100%}
@media(max-width:1200px) and (min-width:1001px){.tone-lime .card-typography{font-size:30px}}

/* The same final video frame remains beneath the translucent frost. */
.hub-backdrop{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:#f5f0e7}
.hub-backdrop>img{width:100%;height:100%;object-fit:cover;object-position:center;filter:blur(var(--hub-blur)) saturate(.88);transform:perspective(1400px) translate3d(var(--paint-x,0px),var(--paint-y,0px),0) rotateX(var(--paint-rx,0deg)) rotateY(var(--paint-ry,0deg)) scale(1.14)}
.hub-backdrop:after{content:"";position:absolute;inset:0;background:rgba(255,255,255,var(--hub-frost))}
.hub-heading>p,.hub-caption>span,.hub-footer{color:#6e7968}
@media(max-width:600px){.hero.hero-hub{--hub-blur:6px;--hub-frost:.30}}

/* The completed video frame and still share the same frost and camera position. */
.hub-backdrop>img,.intro-screen.is-backdrop .hero-video{will-change:transform}
.intro-screen:not(.brand-visible) .intro-shade{opacity:0;transition:none}


/* The supplied paint model replaces only the backdrop, after the ten-second hold. */
.hub-paint-model{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;visibility:hidden;background:#f6f4ef}
.hub-paint-model.is-ready{visibility:visible}
.hub-paint-model>iframe{position:absolute;left:50%;top:50%;width:var(--model-width,100%);height:var(--model-height,100%);max-width:none;border:0;pointer-events:none;filter:blur(var(--hub-blur)) saturate(.88);transform:translate(-50%,-50%) scale(1.14)}
.hub-paint-model:after{content:'';position:absolute;inset:0;background:rgba(255,255,255,var(--hub-frost));pointer-events:none}
.intro-screen.model-handoff{opacity:0;pointer-events:none;transition:opacity 2.1s ease-in-out}
body.intro-running:not(.intro-brand-stage) .intro-screen{opacity:1;transition:none}

/* Original portrait artwork: show the whole supplied card without cropped text. */
.nav-card.nav-card-art{height:auto;aspect-ratio:901/1746}
.nav-card-art .nav-card-shell{background:#f0ecdf}
.nav-card-art .nav-card-shell>img{object-fit:contain}
.card-stage{height:440px;margin-top:34px}
.nav-card-art .card-open{background:#fffaf1d9;color:#5e624a;border-color:#7c805a60}
@media(min-width:1001px) and (max-height:780px){.card-stage{height:405px;margin-top:28px}}
@media(max-width:1000px){.card-stage{height:465px;padding-top:38px;padding-bottom:66px}.nav-card.nav-card-art{height:auto;flex-basis:165px;width:165px}}
@media(max-width:600px){.card-stage{height:427px;padding-top:32px;padding-bottom:60px}.nav-card.nav-card-art{flex-basis:150px;width:150px}.hub-content{padding-top:112px}}
@media(prefers-reduced-motion:reduce){.intro-screen.model-handoff{transition:none}}