/* The original square grid opens a four-part product story. */
.hero-montage { --montage-blue:#55bdd8; --montage-coral:#f58170; container-type:inline-size; min-width:0; font-family:Inter,-apple-system,sans-serif; letter-spacing:normal; }
.hero-montage-stage { position:relative; aspect-ratio:562/468; overflow:hidden; isolation:isolate; background:#f3f6f7; }
.hero-montage-grid { position:absolute; inset:0; z-index:5; display:grid; place-items:center; background:#fff; opacity:0; visibility:hidden; pointer-events:none; transition:opacity 1.3s ease,visibility 1.3s; }
.hero-montage-grid .hero-v1-lottie { position:absolute; inset:0; width:100%; height:100%; min-height:0; }
.hero-montage-grid .hero-v1-lottie svg { display:block; }
.montage-enhanced[data-montage-state="intro"] .hero-montage-grid { opacity:1; visibility:visible; }
.montage-scene { position:absolute; inset:0; opacity:0; visibility:hidden; transform:translateY(14px); transition:opacity .3s ease,transform .8s ease,visibility 0s .3s; overflow:hidden; }
.montage-scene.is-active { opacity:1; visibility:visible; transform:none; transition:opacity .85s .2s ease,transform 1s .2s cubic-bezier(.2,.7,.2,1),visibility 0s; }
.montage-scene strong { color:inherit; }
.montage-enhanced[data-montage-state="intro"] .montage-scene { opacity:0; transform:translateY(22px); }
.montage-scene::before { content:""; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(#16161605 1px,transparent 1px),linear-gradient(90deg,#16161605 1px,transparent 1px); background-size:10% 10%; }
.montage-scene-heading { position:relative; z-index:2; padding:6% 7% 0; }
.montage-kicker { display:block; font-size:clamp(9px,2.05cqw,12px); font-weight:600; letter-spacing:.11em; line-height:1.3; color:#4e6065; }
.montage-scene-heading h2 { font-size:clamp(24px,6.5cqw,42px); line-height:.99; letter-spacing:-.045em; font-weight:500; margin:2% 0 1.5%; }
.montage-scene-heading p { font-size:clamp(12px,2.6cqw,16px); margin:0; line-height:1.5; }
.montage-document-art,.montage-image-art,.montage-motion-art { position:absolute; inset:38% 0 0; }
.montage-documents { background:#eff6f8; }
.montage-paper-back { position:absolute; left:17%; top:4%; width:49%; height:88%; background:var(--montage-blue); transform:rotate(5deg); }
.montage-paper { position:absolute; left:10%; top:3%; width:53%; height:90%; padding:5%; background:#fff; box-shadow:0 12px 35px #25455518; transform:rotate(-6deg); }
.montage-paper-brand { font-size:clamp(7px,1.5cqw,10px); font-weight:700; letter-spacing:.08em; line-height:1.5; }
.montage-paper-brand span { display:block; font-weight:400; }
.montage-paper-title { font-size:clamp(15px,4cqw,25px); font-weight:600; line-height:1; letter-spacing:-.035em; margin:4% 0; }
.montage-paper-rule { height:3px; background:#161616; margin-bottom:4%; }
.montage-field { position:relative; padding:1.5% 0; border-bottom:1px solid #c8d9de; line-height:1.4; }
.montage-field>span { display:block; font-size:clamp(6px,1.35cqw,9px); letter-spacing:.04em; color:#64747a; }
.montage-field strong { display:block; font-size:clamp(9px,1.85cqw,13px); font-weight:500; }
.montage-field i { position:absolute; right:0; bottom:19%; font-size:clamp(9px,2cqw,13px); font-style:normal; color:#257d89; }
.montage-answer { position:absolute; right:5%; bottom:13%; width:47%; background:#182429; color:#fff; padding:5%; box-shadow:0 12px 28px #183a4b20; transform:rotate(3deg); }
.montage-answer-label { display:flex; align-items:center; justify-content:space-between; color:var(--montage-blue); font-size:clamp(7px,1.6cqw,10px); font-weight:600; }
.montage-answer-label i { font-style:normal; color:#bacfd6; font-size:.75em; letter-spacing:.08em; }
.montage-answer>strong { display:block; font-size:clamp(15px,3.55cqw,23px); line-height:1.1; font-weight:500; letter-spacing:-.02em; margin:12% 0 9%; }
.montage-answer>span:last-child { display:block; font-size:clamp(8px,1.8cqw,11px); line-height:1.5; color:#d2dce0; }
.montage-note { position:absolute; top:0; right:7%; font-size:clamp(10px,2.3cqw,15px); line-height:1.25; color:#526c74; transform:rotate(4deg); }
.montage-images { background:#f9eee9; }
.montage-images .montage-kicker { color:#82574d; }
.montage-poster { position:absolute; left:9%; top:2%; width:73%; height:88%; overflow:hidden; background:#30464e; transform:rotate(-4deg); box-shadow:0 16px 34px #543b3420; }
.montage-poster>img { position:absolute; right:0; height:100%; width:67%; object-fit:cover; object-position:57% 48%; }
.montage-poster::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#30464e 3%,#30464ee6 25%,transparent 60%); pointer-events:none; }
.montage-poster-type { position:absolute; z-index:1; left:8%; top:16%; font-size:clamp(20px,5cqw,32px); line-height:1.06; letter-spacing:-.04em; color:#fff; }
.montage-poster-type em { color:#ffd2bc; font-style:normal; }
.montage-poster-edition { position:absolute; z-index:1; left:8%; bottom:8%; color:#e4ebed; font-size:clamp(6px,1.3cqw,9px); letter-spacing:.12em; }
.montage-selection { position:absolute; z-index:2; top:13%; left:5%; width:46%; height:59%; border:1px solid #66d5f7; }
.montage-selection i { position:absolute; width:6px; height:6px; background:#fff; border:1px solid #55bdd8; }
.montage-selection i:nth-child(1) { left:-3px; top:-3px; }.montage-selection i:nth-child(2) { right:-3px; top:-3px; }.montage-selection i:nth-child(3) { left:-3px; bottom:-3px; }.montage-selection i:nth-child(4) { right:-3px; bottom:-3px; }
.montage-layer-card { position:absolute; right:3%; bottom:1%; width:29%; background:#fff; padding:2.5%; transform:rotate(3deg); box-shadow:0 12px 30px #553c3422; }
.montage-layer-card>span { display:flex; justify-content:space-between; font-size:clamp(8px,1.7cqw,11px); letter-spacing:.07em; margin-bottom:11%; }
.montage-layer-card strong { display:flex; align-items:center; gap:7%; padding:8% 0; border-top:1px solid #e4e6e7; font-size:clamp(8px,1.8cqw,12px); font-weight:500; }
.montage-layer-card i { margin-left:auto; font-style:normal; color:#5d777f; }
.montage-layer-card img,.montage-type-icon { display:grid; place-items:center; width:18%; height:auto; aspect-ratio:1; object-fit:cover; background:#edf5f7; font-size:clamp(9px,2cqw,14px); font-weight:500; }
.montage-image-tag { position:absolute; right:6%; top:-26%; font-size:clamp(9px,1.9cqw,12px); line-height:1.4; color:#88635a; border-left:2px solid var(--montage-coral); padding-left:3%; }
.montage-motion { background:#e9eef0; }
.montage-motion .montage-scene-heading { width:51%; padding:7% 6% 0; }
.montage-motion .montage-scene-heading h2 { font-size:clamp(24px,6.3cqw,40px); line-height:1.03; margin:9% 0 8%; }
.montage-motion .montage-kicker { font-size:clamp(8px,1.6cqw,11px); }
.montage-motion-art { inset:0; }
.montage-film-window { position:absolute; right:5%; top:50%; width:42%; aspect-ratio:24/37; transform:translateY(-50%); background:#182429; overflow:hidden; box-shadow:0 12px 35px #12252f22; }
.montage-film-video { display:block; width:100%; height:auto; aspect-ratio:24/37; object-fit:contain; }
.montage-film-caption { position:absolute; left:6%; bottom:9%; width:38%; }
.montage-film-caption>span { color:#48636c; font-size:clamp(8px,1.6cqw,11px); letter-spacing:.12em; }
.montage-film-caption>strong { display:block; font:italic 400 clamp(20px,4.3cqw,29px)/1.12 Georgia,serif; letter-spacing:-.025em; color:#234651; margin:8% 0; }
.montage-film-caption p { margin:0; font-size:clamp(9px,1.8cqw,12px); color:#48636c; }
.montage-video-progress { margin-top:10%; height:2px; background:#ccd7db; overflow:hidden; }
.montage-video-progress i { display:block; width:var(--video-progress,0%); height:100%; background:#e56a57; }
.montage-bunnyhop { background:#f0edf7; }
.montage-bunnyhop .montage-scene-heading { padding:5% 6% 0; }
.montage-bunnyhop .montage-kicker { color:#69607d; font-size:clamp(8px,1.75cqw,11px); }
.montage-bunnyhop .montage-scene-heading h2 { font-size:clamp(24px,5.7cqw,37px); }
.montage-bunnyhop .montage-scene-heading p { font-size:clamp(11px,2.35cqw,15px); }
.montage-bunnyhop-window { position:absolute; left:6%; top:36%; width:76%; overflow:hidden; box-shadow:0 10px 26px #2e1b4a22; border-radius:5px; }
.montage-bunnyhop-video { display:block; width:100%; height:auto; aspect-ratio:1418/920; object-fit:contain; }
.montage-bunnyhop-caption { position:absolute; right:5%; top:43%; bottom:9%; writing-mode:vertical-rl; color:#69607d; font-size:clamp(7px,1.7cqw,10px); letter-spacing:.12em; }
.montage-bunnyhop-caption .montage-video-progress { position:absolute; top:0; right:22px; width:2px; height:100%; margin:0; }
.montage-bunnyhop-caption .montage-video-progress i { width:100%; height:var(--video-progress,0%); background:#8d73b2; }
.montage-bottom { padding-top:16px; }
.montage-controls { display:none; align-items:center; gap:5px; }
.montage-enhanced .montage-controls { display:flex; }
.montage-controls button { appearance:none; border:0; border-bottom:2px solid transparent; background:transparent; color:#657078; font:inherit; font-size:clamp(11px,2.35cqw,13px); line-height:1.2; padding:10px 9px; min-height:40px; cursor:pointer; }
.montage-controls button[aria-pressed="true"] { color:#161616; border-bottom-color:#3898ec; }
.montage-controls button:hover { color:#161616; background:#f3f6f7; }
.montage-controls [data-montage-toggle] { margin-left:auto; font-size:11px; border:1px solid #e0e5e7; min-width:53px; }
.montage-bottom p { margin:12px 0 0; color:#6c7478; font-size:10px; line-height:1.4; letter-spacing:.025em; }
.hero-montage[data-montage-playing="false"] *, .hero-montage[data-montage-state="intro"] * { animation-play-state:paused !important; }
@media(max-width:991px) { .hero-montage { max-width:650px; margin-inline:auto; } }
@media(max-width:479px) { .montage-controls { gap:1px; }.montage-controls button { padding:9px 6px; }.montage-bottom { padding-top:10px; }.montage-image-tag { display:none; } }
@media(prefers-reduced-motion:reduce) { .hero-montage *, .hero-montage *::before, .hero-montage *::after { animation:none !important; transition:none !important; }.montage-enhanced[data-montage-state="intro"] .hero-montage-grid { display:none; }.montage-enhanced[data-montage-state="intro"] .montage-scene.is-active { opacity:1; transform:none; } }