/* One continuous gradient card joins the story and the mechanical vault. */
body.home-page{--hero-gutter:max(48px,calc((100% - 1280px)/2))}
body.home-page .vault-stage{max-width:1376px;margin-inline:auto}
body.home-page .vault-story{height:370svh;background:#faf9fd}
body.home-page .stage-grid{inset:138px 28px 90px;border:1px solid #a08bc955;border-radius:32px;background:radial-gradient(ellipse at 76% 22%,#8470bc2c,transparent 53%),linear-gradient(115deg,#221d30 0%,#30283f 44%,#382b52 73%,#241e36 100%);box-shadow:inset 0 1px 0 #e9d9ff66,0 25px 65px #492d731a;overflow:hidden}
body.home-page .stage-grid:after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,#ecd7ff08 46%,#f6eaff20 50%,transparent 57%);background-size:220% 100%;background-position:var(--hero-shimmer,70%) 50%;pointer-events:none}
body.home-page .vault-visual{border:0;border-radius:0;background:transparent;box-shadow:none;left:auto;right:3.5%;width:66%;top:17%;height:69%;overflow:hidden;--vault-frame-share:.772727272727;--vault-reveal-share:22.7272727273%}
body.home-page .story-copy{width:calc(100% - 136px)}
body.home-page .story-panel{top:21%;width:43%}
body.home-page .story-panel h1,body.home-page .story-panel h2{color:#fff;letter-spacing:-.06em;text-shadow:0 2px 25px #1d122026}
body.home-page .story-panel .metal-text{background:linear-gradient(110deg,#fff,#d9c7ef 48%,#fff 80%);background-clip:text;-webkit-background-clip:text;color:transparent}
body.home-page .story-panel>p{color:#ece2f3}
body.home-page .story-panel .eyebrow{color:#dac5ec}
body.home-page .story-panel .story-fine{color:#d4c3e2}
body.home-page .story-panel .story-secondary{color:#ede0fa;border-color:#d7bce480}
body.home-page .story-panel .button.primary{color:#38204e;border-color:#f0e5ff;background:linear-gradient(125deg,#fff,#e6d4f6);box-shadow:inset 0 1px #fff,0 10px 24px #24133033}
body.home-page .story-panel .button:not(.primary){color:#f5edfb;background:#ffffff12;border-color:#e5d1f566;box-shadow:inset 0 1px #f5eaff22}
body.home-page .story-panel .chapter-detail{color:#dfcde9}
body.home-page .story-panel .detail-dot{background:#cdeeea;box-shadow:0 0 15px #b7f4ec66}
body.home-page .story-panel .combination-readout b{color:#442459;background:linear-gradient(#f9efff,#e3cee9 49%,#dac0e1 50%,#f8eaff);border-color:#f1e5fa}
body.home-page .story-panel .combination-readout small{color:#dec7ed}
body.home-page .scene-window-bar,body.home-page .scene-caption{color:#e1ccec}
body.home-page .scene-caption{bottom:14%;right:7%}
body.home-page #mechanism-percent{color:#f0e2fa;border-color:#e6cff866}
body.home-page .caption-rule{background:#c2a5d5}
body.home-page .vault-fallback{mix-blend-mode:screen;mask-image:radial-gradient(ellipse,#000 25%,transparent 75%)}
body.home-page .vault-story:is(.is-reduced,.is-compact){height:auto}
body.home-page :is(.is-reduced,.is-compact) .stage-grid{top:138px;bottom:95px}
body.home-page :is(.is-reduced,.is-compact) .story-panel{top:auto;width:100%}
body.home-page :is(.is-reduced,.is-compact) .story-panel:first-child{max-width:44%;min-height:560px}
body.home-page :is(.is-reduced,.is-compact) .vault-visual{top:170px;height:530px}
body.home-page :is(.is-reduced,.is-compact) .story-bottom{margin-top:75px}
/* The alternate pearl wash is available for a local art-direction comparison. */
body.home-page [data-tone="pearl"] .stage-grid{background:radial-gradient(ellipse at 73% 30%,#fff9,transparent 50%),linear-gradient(110deg,#e2d2f5,#c6a6e3 58%,#b894d6)}
body.home-page [data-tone="pearl"] .story-panel h1,body.home-page [data-tone="pearl"] .story-panel h2{color:#362147;text-shadow:none}
body.home-page [data-tone="pearl"] .story-panel .metal-text{background:linear-gradient(120deg,#63347e,#8753aa);background-clip:text;-webkit-background-clip:text}
body.home-page [data-tone="pearl"] .story-panel p,body.home-page [data-tone="pearl"] .story-panel .eyebrow,body.home-page [data-tone="pearl"] .story-panel .story-secondary,body.home-page [data-tone="pearl"] .scene-window-bar,body.home-page [data-tone="pearl"] .scene-caption{color:#614271}
body.home-page [data-tone="pearl"] .story-panel .button:not(.primary){color:#5b356e;border-color:#9367ae;background:#ffffff40}
body.home-page [data-tone="pearl"] .story-panel .combination-readout small,body.home-page [data-tone="pearl"] .chapter-detail{color:#684379}
@media(min-width:1600px){body.home-page .stage-grid{left:40px;right:40px}body.home-page .story-copy{width:calc(100% - 176px)}}
@media(max-width:1050px) and (min-width:761px){body.home-page .stage-grid{left:18px;right:18px}body.home-page .story-copy{width:calc(100% - 86px)}body.home-page .story-panel{width:45%}body.home-page .vault-visual{width:65%;right:2.5%;top:21%;height:62%;--vault-frame-share:.753846153846;--vault-reveal-share:24.6153846154%}}
@media(max-width:760px){body.home-page .vault-story{height:310svh}body.home-page .stage-grid{inset:130px 12px 80px;border-radius:24px;background:radial-gradient(ellipse at 70% 66%,#8470bc26,transparent 56%),linear-gradient(155deg,#262033,#352a49 56%,#241e36)}body.home-page .story-copy{width:calc(100% - 64px)}body.home-page .story-panel{top:154px;width:100%}body.home-page .story-panel h1,body.home-page .story-panel h2{font-size:clamp(2.3rem,9.5vw,3.3rem)}body.home-page .story-panel[data-stage="1"] h2{font-size:clamp(1.95rem,8vw,2.65rem)}body.home-page .story-panel[data-stage="2"] h2{font-size:2.35rem}body.home-page .story-panel>p{font-size:14px;line-height:1.6}body.home-page .story-panel .story-fine{font-size:11px;margin-top:14px;max-width:290px}body.home-page .story-panel .button-row{margin-top:20px}body.home-page .story-panel .button{font-size:12px;padding:12px 16px;min-height:45px;gap:12px}body.home-page .story-secondary{font-size:12px;margin-top:15px}body.home-page .vault-visual{--vault-frame-share:1;--vault-reveal-share:0%;left:24px;right:24px;width:calc(100% - 48px);top:480px;height:calc(100% - 580px);min-height:155px}body.home-page .scene-window-bar{top:7px;left:12px;right:12px;font-size:7px}body.home-page .scene-caption{right:34px;bottom:100px;font-size:7px}body.home-page :is(.is-reduced,.is-compact) .stage-grid{top:130px;bottom:85px}body.home-page :is(.is-reduced,.is-compact) .story-panel{width:calc(100% - 64px);margin:0 32px}body.home-page :is(.is-reduced,.is-compact) .story-panel:first-child{max-width:none;min-height:0}body.home-page :is(.is-reduced,.is-compact) .vault-visual{position:relative;left:auto;right:auto;top:auto;height:300px;width:calc(100% - 48px);margin:0 auto}body.home-page :is(.is-reduced,.is-compact) .story-bottom{margin-top:10px}body.home-page :is(.is-reduced,.is-compact) .vault-stage{gap:40px;padding-bottom:35px}}
@media(max-width:760px) and (max-height:710px){body.home-page .stage-grid{top:120px;bottom:75px}body.home-page .story-panel{top:143px}body.home-page .story-panel h1{font-size:2.25rem}body.home-page .story-panel .eyebrow{font-size:8px;margin-bottom:13px}body.home-page .story-panel>p{font-size:12px}body.home-page .story-panel .story-fine{font-size:10px;margin-top:10px}body.home-page .story-panel .button-row{margin-top:15px}body.home-page .story-secondary{margin-top:12px}body.home-page .vault-visual{top:446px;min-height:118px;height:calc(100% - 525px)}body.home-page .scene-caption{display:none}body.home-page :is(.is-reduced,.is-compact) .story-panel{top:auto}body.home-page :is(.is-reduced,.is-compact) .vault-visual{height:285px;min-height:250px;top:auto}}
@media(prefers-reduced-motion:reduce){body.home-page .stage-grid:after{background-position:50% 50%}}

/* Labels and the non-WebGL fallback retain the original scene alignment. */
body.home-page .vault-visual .scene-window-bar{left:calc(var(--vault-reveal-share) + 24px)}
body.home-page .vault-visual .vault-fallback{left:var(--vault-reveal-share);width:calc(100% - var(--vault-reveal-share))}
@media(max-width:1050px) and (min-width:761px){body.home-page .vault-visual .scene-window-bar{left:calc(var(--vault-reveal-share) + 15px)}}
@media(max-width:760px){body.home-page .vault-visual .scene-window-bar{left:12px}}

/* Physical silver keys sit in their own display trays, clear of reading text. */
body.home-page .access-key-tray{position:relative;isolation:isolate;display:block;height:150px;margin:-6px 0 24px;border:1px solid #9071b344;border-radius:12px;overflow:hidden;background:radial-gradient(ellipse at 70% 40%,#684691,#251933 70%);box-shadow:inset 0 1px #ddcbff44,0 8px 20px #34214710}
body.home-page .access-key-tray img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:screen;transform:scale(1.12) rotate(-4deg);transition:transform .6s ease;filter:brightness(1.3)}
body.home-page .access-key-tray:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 25%,#e9d8ff1c 48%,transparent 65%);background-size:220% 100%;background-position:var(--shimmer-position,65%) 50%}
body.home-page .access-key-label{position:absolute;left:16px;bottom:13px;color:#e4d4f4;font:9px/1.5 ui-monospace,monospace;letter-spacing:.1em}
body.home-page .access-card:hover .access-key-tray img,body.home-page .access-card:focus-visible .access-key-tray img{transform:scale(1.18) rotate(1deg)}
body.home-page .access-top{margin-bottom:22px}
@media(max-width:760px){body.home-page .access-key-tray{height:135px;margin-bottom:22px}body.home-page .access-top{gap:10px}body.home-page .access-top>span:nth-child(2){min-width:0;overflow-wrap:anywhere}}
@media(prefers-reduced-motion:reduce){body.home-page .access-key-tray img{transition:none}body.home-page .access-card:hover .access-key-tray img,body.home-page .access-card:focus-visible .access-key-tray img{transform:scale(1.12) rotate(-4deg)}}

/* A short screen changes the layout, never the visitor's motion preference. */
@media(max-height:620px) and (orientation:portrait){
 body.home-page .vault-story:not(:is(.is-reduced,.is-compact)) .vault-stage{height:100svh;min-height:0}
 body.home-page .vault-story:not(:is(.is-reduced,.is-compact)) .story-panel{top:132px}
 body.home-page .vault-story:not(:is(.is-reduced,.is-compact)) .story-panel h1,body.home-page .vault-story:not(:is(.is-reduced,.is-compact)) .story-panel h2{font-size:2rem;margin-bottom:12px}
 body.home-page .vault-story:not(:is(.is-reduced,.is-compact)) .vault-visual{top:392px;height:calc(100% - 468px);min-height:80px}
}
@media(max-height:620px) and (orientation:landscape){
 body.home-page .vault-story:not(:is(.is-reduced,.is-compact)) .vault-stage{height:100svh;min-height:0}
 body.home-page .vault-story:not(:is(.is-reduced,.is-compact)) .stage-grid{inset:108px 18px 52px}
 body.home-page .vault-story:not(:is(.is-reduced,.is-compact)) .story-copy{width:calc(100% - 80px)}
 body.home-page .vault-story:not(:is(.is-reduced,.is-compact)) .story-panel{top:123px;width:49%}
 body.home-page .vault-story:not(:is(.is-reduced,.is-compact)) .story-panel h1,body.home-page .vault-story:not(:is(.is-reduced,.is-compact)) .story-panel h2{font-size:1.65rem;line-height:1.04;margin-bottom:10px}
 body.home-page .vault-story:not(:is(.is-reduced,.is-compact)) .story-panel h1 br{display:none}
 body.home-page .vault-story:not(:is(.is-reduced,.is-compact)) .story-panel .eyebrow{font-size:8px;margin-bottom:8px}
 body.home-page .vault-story:not(:is(.is-reduced,.is-compact)) .story-panel>p{font-size:12px;line-height:1.45}
 body.home-page .vault-story:not(:is(.is-reduced,.is-compact)) .story-panel .button-row{margin-top:12px}
 body.home-page .vault-story:not(:is(.is-reduced,.is-compact)) .story-panel .button{min-height:44px;padding:9px 12px;font-size:11px;gap:10px}
 body.home-page .vault-story:not(:is(.is-reduced,.is-compact)) .story-secondary,body.home-page .vault-story:not(:is(.is-reduced,.is-compact)) .story-fine,body.home-page .vault-story:not(:is(.is-reduced,.is-compact)) .chapter-detail{display:none}
 body.home-page .vault-story:not(:is(.is-reduced,.is-compact)) .vault-visual{left:auto;right:4%;width:43%;top:118px;height:calc(100% - 178px);min-height:0;--vault-frame-share:1;--vault-reveal-share:0%}
 body.home-page .vault-story:not(:is(.is-reduced,.is-compact)) .combination-readout{margin-top:12px;gap:10px}
 body.home-page .vault-story:not(:is(.is-reduced,.is-compact)) .combination-readout b{font-size:24px;padding:4px 12px}
 body.home-page .vault-story:not(:is(.is-reduced,.is-compact)) .combination-readout small{font-size:7px}
 body.home-page .vault-story:not(:is(.is-reduced,.is-compact)) .combination-readout>span{gap:6px}
 body.home-page .vault-story:not(:is(.is-reduced,.is-compact)) .combination-readout i{margin-top:3px}
 body.home-page .vault-story:not(:is(.is-reduced,.is-compact)) .scene-caption,body.home-page .vault-story:not(:is(.is-reduced,.is-compact)) .scene-window-bar,body.home-page .vault-story:not(:is(.is-reduced,.is-compact)) .stage-topline,body.home-page .vault-story:not(:is(.is-reduced,.is-compact)) .scroll-cue{display:none}
 body.home-page .vault-story:not(:is(.is-reduced,.is-compact)) .story-bottom{bottom:6px;left:28px;right:28px;flex-wrap:nowrap}
}

/* Align the hero card with the site's reading gutters. Keep the safe's optical frame. */
body.home-page .stage-grid{left:var(--hero-gutter);right:var(--hero-gutter)}
body.home-page .story-copy{max-width:1216px;width:calc(100% - 2 * var(--hero-gutter) - 64px)}
.hero-scroll-feedback{position:absolute;top:112px;left:var(--hero-gutter);right:var(--hero-gutter);display:flex;align-items:center;gap:16px;z-index:4;color:#69577e;font:10px/1.4 ui-monospace,monospace;letter-spacing:.08em}
.hero-scroll-feedback>span:first-child{white-space:nowrap}.hero-scroll-feedback>[data-scroll-progress]{width:4ch;text-align:right;font-variant-numeric:tabular-nums}
.hero-scroll-track{height:3px;flex:1;overflow:hidden;background:#e3dbea;border-radius:4px}.hero-scroll-track i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#8561c2,#513976);transform:scaleX(var(--scroll-progress,0));transform-origin:left}
:is(.is-reduced,.is-compact) .hero-scroll-feedback{display:none}
body.home-page .access-title{max-width:760px;text-wrap:balance}
body.home-page .access-title .metal-text{display:inline}
body.home-page .access-section .section-heading{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(240px,.75fr);gap:48px}
body.home-page .access-section .section-heading>div{min-width:0}
@media(max-width:760px){body.home-page .combination-readout{gap:8px}body.home-page .combination-readout b{padding-inline:14px}}
@media(max-width:1050px){body.home-page{--hero-gutter:32px}body.home-page .access-section .section-heading{grid-template-columns:1fr;gap:22px}body.home-page .access-section .section-heading p{max-width:640px}}
@media(max-width:760px){body.home-page{--hero-gutter:20px}body.home-page .story-copy{width:calc(100% - 2 * var(--hero-gutter) - 36px)}.hero-scroll-feedback{top:107px;gap:10px;font-size:8px;letter-spacing:.03em}body.home-page .access-title{font-size:clamp(2rem,8.5vw,2.65rem);max-width:550px}}
@media(max-height:710px) and (max-width:760px){.hero-scroll-feedback{top:99px}}
@media(max-height:620px) and (orientation:landscape){.hero-scroll-feedback{top:94px;font-size:8px}body.home-page .vault-story:not(:is(.is-reduced,.is-compact)) .stage-grid{left:var(--hero-gutter);right:var(--hero-gutter)}}

/* Phones get one clear introduction and a substantial, scroll-driven vault. */
.mobile-vault-explore{display:none}
@media(max-width:760px){
 body.home-page :is(.is-compact,.is-reduced) .vault-stage{--mobile-hero-top:calc(var(--vault-header-height) + 26px);padding:var(--mobile-hero-top) 0 32px;gap:10px}
 body.home-page :is(.is-compact,.is-reduced) .story-panel:first-child{width:calc(100% - 72px);margin:0 36px;max-width:none}
 body.home-page :is(.is-compact,.is-reduced) .story-panel:first-child .eyebrow{display:none}
 body.home-page :is(.is-compact,.is-reduced) .story-panel:first-child h1{font-size:clamp(1.875rem,8.6vw,2.55rem);line-height:1.06;margin-bottom:12px}
 body.home-page :is(.is-compact,.is-reduced) .story-panel:first-child>p:not(.story-fine){font-size:16px;line-height:1.45;max-width:none;margin-bottom:0}
 body.home-page :is(.is-compact,.is-reduced) .story-panel:first-child .button-row{margin-top:14px}
 body.home-page :is(.is-compact,.is-reduced) .story-panel:first-child .story-secondary{display:none}
 body.home-page :is(.is-compact,.is-reduced) .story-panel:not(:first-child){display:none}
 body.home-page :is(.is-compact,.is-reduced) .vault-visual{width:calc(100% - 40px);height:clamp(220px,calc(100svh - var(--mobile-hero-top) - var(--mobile-hero-copy-height,250px) - 42px),360px);min-height:220px;grid-row:3;margin:0 auto}
 body.home-page :is(.is-compact,.is-reduced) .stage-grid{top:calc(var(--vault-header-height) + 8px);bottom:12px}
 body.home-page :is(.is-compact,.is-reduced) .story-bottom{display:none}
 body.home-page .is-compact .hero-scroll-feedback{display:flex;position:relative;top:auto;left:auto;right:auto;grid-row:2;margin:0 36px;color:#d7cbed;font-size:9px;gap:12px}
 body.home-page .is-compact .hero-scroll-track{background:#ffffff20}
 body.home-page .is-compact .hero-scroll-track i{background:linear-gradient(90deg,#a685dd,#eee3ff)}
 body.home-page :is(.is-compact,.is-reduced) .scene-window-bar{display:none}
 body.home-page :is(.is-compact,.is-reduced) .mobile-vault-explore{display:block;grid-row:4;width:max-content;max-width:calc(100% - 72px);margin:0 36px;font-size:13px;color:#ede0fa;line-height:1.5;padding:8px 0;border-bottom:1px solid #d7bce480}
}
