/* Concept gallery chrome is separate from the five demo brand identities. */
#landing-gallery{width:min(1360px,calc(100% - 40px));max-width:none;max-height:calc(100dvh - 40px);padding:0;border:1px solid #ffffff29;border-radius:18px;background:#141719;color:#eff0ed;overflow:auto;box-shadow:0 35px 150px #000b}
#landing-gallery::backdrop{background:#080b10db;backdrop-filter:blur(15px)}
.gallery-top{position:sticky;top:0;z-index:5;background:#141719;display:flex;align-items:center;justify-content:space-between;padding:20px 26px 16px;gap:20px}
#landing-gallery h2{font-size:18px;letter-spacing:-.04em;margin:0}
.gallery-top small{display:block;color:#9ba4a9;font-size:10px;margin-top:5px}
#landing-gallery .close-dialog{position:static;width:38px;height:38px;flex-shrink:0;display:grid;place-items:center;border:1px solid #fff3;border-radius:50%;background:transparent;color:#fff;font-size:24px;padding:0}
.gallery-tabs{display:flex;gap:6px;padding:0 26px 18px;overflow-x:auto;scrollbar-width:thin}
.gallery-tabs button{white-space:nowrap;border:1px solid #ffffff20;border-radius:7px;padding:11px 16px;background:#ffffff04;color:#a9afb2;font-size:11px;transition:background .2s,color .2s}
.gallery-tabs button span{font-family:monospace;opacity:.55;margin-right:9px}
.gallery-tabs button[aria-selected=true]{background:#d5e1e8;color:#15232d;border-color:#d5e1e8}
.gallery-viewport{margin:0 12px;overflow:hidden;border-radius:7px;isolation:isolate}
.landing-scene{position:relative;min-height:620px;overflow:hidden;isolation:isolate;animation:concept-arrive .55s ease both;--look-x:0px;--look-y:0px}
.landing-scene[hidden]{display:none!important}
.landing-scene *{box-sizing:border-box}
.landing-scene .scene-nav{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;padding:28px 42px;font-size:10px;letter-spacing:.03em}
.scene-brand{font-size:28px;font-weight:700;letter-spacing:-.07em;line-height:1}
.scene-nav-details{display:flex;gap:28px;align-items:center}
.scene-nav-details span:last-child{border-bottom:1px solid currentColor;padding-bottom:5px}
.landing-scene h3{font-weight:500;line-height:1.02;letter-spacing:-.065em;margin:0;font-size:clamp(45px,5.8vw,82px)}
.landing-scene p{font-size:13px;line-height:1.8;max-width:330px;color:inherit;margin:22px 0}
.scene-kicker{font:10px monospace;letter-spacing:.11em;display:block;margin-bottom:23px}
.scene-cta{display:inline-flex;align-items:center;justify-content:space-between;gap:32px;min-height:50px;padding:15px 22px;font-size:11px;font-weight:650;border:0;border-radius:2px;transition:transform .25s,box-shadow .25s}
.scene-cta:hover{transform:translateY(-3px);box-shadow:0 10px 30px #0002}
.scene-cta span{font-size:21px;font-weight:400}
.scene-image{width:100%;height:100%;object-fit:cover;display:block;transform:translate(var(--look-x),var(--look-y)) scale(1.035);transition:transform .7s ease}
.scene-image-wrap{overflow:hidden;position:absolute;inset:0;z-index:-2}
.gallery-bottom{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 26px}
.gallery-bottom p{font-size:10px;color:#a4adb4;line-height:1.6;margin:0;max-width:400px}
.gallery-controls{display:flex;align-items:center;gap:9px;flex-shrink:0}
.gallery-counter{font:11px monospace;color:#c3cdd2;margin-right:12px}
.gallery-controls button{width:37px;height:37px;background:transparent;color:#d8e5b4;border:1px solid #b9cc8655;border-radius:50%;font-size:20px}
.gallery-controls button:hover{background:#d8e5b4;color:#181c16}
.gallery-discuss{border:0;background:#b99af2;color:#201730;font-weight:650;font-size:11px;border-radius:5px;padding:13px 18px}
.gallery-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
/* MONO: cinematic architecture, full-bleed dusk and restrained editorial type. */
.scene-estate{color:#fff;background:#394650}
.scene-estate:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#101b22bb,transparent 80%),linear-gradient(0deg,#111e28a1,transparent 50%)}
.estate-copy{padding:54px 42px 96px;max-width:750px}
.scene-estate h3 em{font-style:normal;color:#dbd6cc}
.scene-estate .scene-cta{background:#e8e2d7;color:#272d2b}
.estate-bottom{position:absolute;bottom:25px;left:42px;right:42px;display:flex;justify-content:space-between;border-top:1px solid #ffffff45;padding-top:18px;font:10px monospace;letter-spacing:.05em}
.estate-seal{position:absolute;right:48px;bottom:112px;width:102px;height:102px;border:1px solid #fff7;border-radius:50%;display:grid;place-content:center;text-align:center;backdrop-filter:blur(6px);font:10px monospace;line-height:1.7;transform:rotate(-10deg)}
/* LUMI: approachable clinical luxury, cobalt typography and a soft portrait. */
.scene-dental{background:#f4f4ec;color:#254bc0}
.dental-copy{padding:48px 42px 74px;width:57%;position:relative;z-index:2}
.scene-dental h3{font-size:clamp(46px,5.3vw,74px)}
.scene-dental h3 em{font-family:Georgia,serif;font-weight:400}
.scene-dental p{color:#59636b;max-width:270px}
.scene-dental .scene-cta{border-radius:40px;background:#254bc0;color:white}
.dental-photo{position:absolute;width:43%;right:35px;top:99px;bottom:30px;overflow:hidden;border-radius:48% 48% 8px 8px}
.dental-photo img{object-position:50% 35%}
.dental-mark{position:absolute;bottom:26px;left:24px;background:#f4f4ec;color:#254bc0;width:118px;height:118px;border-radius:50%;display:grid;place-content:center;text-align:center;font-size:12px;transform:rotate(8deg);box-shadow:0 10px 50px #0001}
.dental-mark b{font-size:36px;line-height:1.2;font-weight:400}
.dental-note{font:10px monospace;margin-top:30px;display:flex;gap:10px;align-items:center;color:#59636b}
.dental-note:before{content:'+';font-size:24px;color:#254bc0}
/* AURA: a collectible object, expansive lettering, tactile warm neutrals. */
.scene-interior{background:#e5ddcf;color:#33332b}
.scene-interior .scene-nav{border-bottom:1px solid #33332b24;margin:0 42px;padding-inline:0}
.interior-copy{position:relative;z-index:2;width:50%;padding:37px 42px 72px}
.scene-interior h3{font-size:clamp(46px,5.3vw,74px)}
.scene-interior .scene-kicker{margin-bottom:18px}
.interior-photo{position:absolute;inset:90px 0 0 40%;z-index:-1;overflow:hidden}
.interior-photo:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#e5ddcf 0%,#e5ddcf00 42%)}
.interior-photo img{object-position:60% 50%}
.scene-interior p{max-width:260px;color:#636155}
.scene-interior .scene-cta{background:#34362d;color:#f0ecdf;border-radius:0}
.interior-edition{position:absolute;bottom:25px;right:35px;writing-mode:vertical-rl;font:10px monospace;letter-spacing:.16em}
.interior-object{position:absolute;right:34%;bottom:42px;background:#f5efe1dc;padding:12px 18px;border-left:1px solid #484739;font:10px monospace;line-height:1.7}
/* PULSE: oversized condensed typography, flash photography, vermilion. */
.scene-fitness{background:#202021;color:#f5f1e9}
.scene-fitness .scene-brand{font-style:italic;font-weight:800}
.fitness-photo{position:absolute;inset:0 0 0 42%;z-index:-2;overflow:hidden}
.fitness-photo .scene-image{object-fit:cover;object-position:center top}
.fitness-photo:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#202021,transparent 48%)}
.fitness-copy{padding:29px 42px 90px;position:relative;z-index:1;width:72%}
.scene-fitness h3{font-size:clamp(64px,8.2vw,116px);font-weight:800;line-height:.89;letter-spacing:-.075em;text-transform:uppercase}
.scene-fitness h3 em{font-style:italic;color:#ff684b}
.scene-fitness p{max-width:280px;color:#bcb9b4}
.scene-fitness .scene-cta{background:#ff684b;color:#231612;transform:skew(-5deg)}
.fitness-strip{position:absolute;bottom:0;left:0;right:0;background:#ff684b;color:#241b18;display:flex;justify-content:space-around;padding:15px;font:11px monospace;letter-spacing:.13em}
.fitness-coordinate{position:absolute;right:24px;top:48%;writing-mode:vertical-rl;font:9px monospace;letter-spacing:.13em}
/* FARØ: an immersive expedition, offset headline and a route annotation. */
.scene-travel{background:#354741;color:#f5f1e5}
.scene-travel:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#1627207a,transparent),linear-gradient(0deg,#11261bd9,transparent 70%)}
.scene-travel .scene-brand{letter-spacing:.1em;font-weight:500}
.travel-copy{padding:75px 42px 105px;position:relative}
.scene-travel h3{font-size:clamp(58px,7.3vw,102px);font-weight:400}
.scene-travel h3 em{font-family:Georgia,serif;font-weight:400}
.scene-travel .scene-cta{background:#e9ecda;color:#283b30;border-radius:30px}
.travel-bottom{position:absolute;left:42px;right:42px;bottom:25px;display:flex;align-items:center;justify-content:space-between;font:10px monospace;letter-spacing:.08em;border-top:1px solid #fff5;padding-top:20px}
.travel-route{position:absolute;right:55px;top:49%;display:flex;align-items:center;gap:12px;font:10px monospace;line-height:1.7}
.travel-route:before{content:'';width:11px;height:11px;border:1px solid white;border-radius:50%;box-shadow:0 0 0 12px #ffffff15,0 0 0 26px #ffffff09}
@keyframes concept-arrive{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(min-width:1600px){.landing-scene h3{font-size:82px}.scene-fitness h3{font-size:116px}.scene-travel h3{font-size:102px}}
@media(max-width:900px){.gallery-bottom{flex-wrap:wrap}.gallery-bottom p{flex:1}.gallery-discuss{order:3}.scene-nav-details{gap:15px}.landing-scene .scene-nav{padding:25px}.estate-copy,.dental-copy,.interior-copy,.fitness-copy,.travel-copy{padding-left:25px;padding-right:25px}.scene-interior .scene-nav{margin-inline:25px}.dental-photo{right:20px}.estate-bottom,.travel-bottom{left:25px;right:25px}.estate-seal{right:30px}.travel-route{right:30px}.interior-object{right:18%}}
@media(max-width:600px){
 #landing-gallery{width:calc(100% - 16px);max-height:calc(100dvh - 16px);border-radius:12px}
 .gallery-top{padding:16px 15px 14px}.gallery-top small{font-size:9px}#landing-gallery h2{font-size:16px}
 .gallery-tabs{padding:0 15px 14px;gap:5px;flex-wrap:wrap;overflow:visible}.gallery-tabs button{padding:9px 10px;font-size:10px}.gallery-tabs button span{margin-right:5px}
 .gallery-viewport{margin-inline:6px}.landing-scene{min-height:640px}
 .landing-scene .scene-nav{padding:22px 20px}.scene-brand{font-size:25px}.scene-nav-details span:not(:last-child){display:none}.scene-nav-details{font-size:9px}
 .scene-kicker{font-size:9px;margin-bottom:18px}.landing-scene p{font-size:12px;line-height:1.7;max-width:245px;margin:20px 0}
 .scene-cta{font-size:10px;padding:13px 18px;min-height:47px;gap:24px}
 .estate-copy{padding:56px 20px 120px}.landing-scene h3{font-size:clamp(35px,10.5vw,62px)}
 .scene-estate .scene-image{object-position:65% center}.scene-estate:after{background:linear-gradient(90deg,#101b22bb,#101b2222),linear-gradient(0deg,#111e28a1,transparent)}
 .estate-bottom{left:20px;right:20px;font-size:8px;gap:10px;line-height:1.6}.estate-seal{width:78px;height:78px;font-size:8px;right:22px;bottom:80px}
 .scene-dental{min-height:810px}.dental-copy{width:100%;padding:24px 20px 20px}.scene-dental h3{font-size:clamp(40px,12.5vw,49px)}.scene-dental p{max-width:235px}.dental-note{margin-top:15px;font-size:9px}.dental-photo{top:465px;bottom:20px;right:20px;left:20px;width:auto;border-radius:150px 150px 8px 8px}.dental-photo img{object-position:50% 35%}.dental-mark{width:85px;height:85px;font-size:10px;bottom:15px;left:15px}.dental-mark b{font-size:28px}
 .scene-interior{min-height:790px}.scene-interior .scene-nav{margin-inline:20px;padding-inline:0}.interior-copy{padding:30px 20px;width:100%}.scene-interior h3{font-size:clamp(40px,12.5vw,49px)}.scene-interior p{max-width:250px}.interior-photo{inset:390px 0 0 0}.interior-photo:after{background:linear-gradient(180deg,#e5ddcf,transparent 32%)}.interior-photo img{object-position:64% center}.interior-object{right:auto;left:20px;bottom:25px;font-size:9px}.interior-edition{right:16px;font-size:8px}
 .fitness-copy{width:100%;padding:44px 20px 280px}.scene-fitness h3{font-size:clamp(61px,16vw,86px)}.scene-fitness p{max-width:215px}.fitness-photo{inset:190px -70px 0 8%;opacity:.7}.fitness-photo:after{background:linear-gradient(180deg,#202021,transparent 35%),linear-gradient(90deg,#202021aa,transparent)}.scene-fitness{min-height:750px}.fitness-strip{font-size:8px;gap:8px;padding:15px 10px}.fitness-coordinate{font-size:8px;right:12px;top:65%}
 .scene-travel{min-height:690px}.travel-copy{padding:64px 20px 130px}.scene-travel h3{font-size:clamp(40px,12.4vw,70px)}.travel-route{right:25px;top:auto;bottom:100px;font-size:9px}.travel-bottom{left:20px;right:20px;font-size:8px;gap:12px;line-height:1.6}.scene-travel .scene-image{object-position:65% center}
 .gallery-bottom{padding:14px 15px;gap:14px}.gallery-bottom p{font-size:9px;min-width:150px}.gallery-controls{gap:6px}.gallery-counter{margin-right:2px;font-size:10px}.gallery-controls button{width:32px;height:32px}.gallery-discuss{width:100%;padding:15px;font-size:12px}
}
@media(prefers-reduced-motion:reduce){.landing-scene{animation:none}.scene-image,.scene-cta{transition:none}}
/* Match gallery navigation to the main carousel's lime invitation controls. */
.gallery-controls{gap:10px}
.gallery-controls button{position:relative;isolation:isolate;display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;padding:0;background:#171b13;color:var(--signal);border:1px solid #d5fa376b;border-radius:50%;font-size:23px;line-height:1;transition:background .2s,color .2s,border-color .2s}
.gallery-controls button::before{content:"";position:absolute;inset:-1px;z-index:-1;border:1px solid var(--signal);border-radius:inherit;pointer-events:none;opacity:0;box-shadow:0 0 12px #d5fa3733}
dialog[open] .gallery-controls button::before{animation:control-invitation 3.6s ease-out infinite}
dialog[open] .gallery-controls button:last-child::before{animation-delay:.55s}
.gallery-controls button:focus-visible{outline-color:var(--signal)}
dialog[open] .gallery-controls button:focus-visible::before{animation:none;opacity:0}
@media(hover:hover) and (pointer:fine){.gallery-controls button:hover{background:var(--signal);color:#1b240b;border-color:var(--signal)}dialog[open] .gallery-controls button:hover::before{animation:none;opacity:0}}
@media(hover:none){.gallery-controls button:hover{background:#171b13;color:var(--signal)}}
@media(prefers-reduced-motion:reduce){dialog[open] .gallery-controls button::before{animation:none;opacity:0}.gallery-controls button{transition:none}}
/* Project-discussion CTA matches the main violet invitation button. */
.gallery-discuss{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:space-between;gap:22px;min-height:58px;padding:11px 17px 11px 23px;border:1px solid #dbc5ff9c;border-radius:8px;background:var(--cta,#b18af6);color:#241637;font-size:13px;font-weight:750;box-shadow:0 6px 26px #9a65e62e;transition:background .22s,box-shadow .22s}
.gallery-discuss>span{display:grid;place-items:center;width:34px;height:34px;flex-shrink:0;border-radius:50%;background:#25123714;font-size:23px;line-height:1;transition:transform .22s,background .22s}
.gallery-discuss::before{content:"";position:absolute;inset:-7px;border:2px solid #b794f4;border-radius:12px;pointer-events:none;z-index:-1;opacity:.35;box-shadow:0 0 18px #b794f44d}
dialog[open] .gallery-discuss::before{animation:gallery-cta-invitation 3.6s ease-out infinite}
@keyframes gallery-cta-invitation{0%,100%{opacity:.2;transform:scale(1)}25%{opacity:.65;transform:scale(1.01,1.04)}65%{opacity:.2;transform:scale(1)}}
.gallery-discuss:focus-visible{outline:2px solid #dfcbff;outline-offset:5px}
@media(hover:hover) and (pointer:fine){.gallery-discuss:hover{background:#c2a1ff;box-shadow:0 9px 34px #a477f64d}.gallery-discuss:hover>span{transform:rotate(45deg);background:#25123724}dialog[open] .gallery-discuss:hover::before{animation:none;opacity:.6}}
dialog[open] .gallery-discuss:focus-visible::before{animation:none;opacity:.6}
@media(max-width:600px){.gallery-discuss{font-size:12px;gap:12px;padding:11px 13px 11px 17px}.gallery-bottom{padding-bottom:20px}}
@media(prefers-reduced-motion:reduce){dialog[open] .gallery-discuss::before{animation:none;opacity:.35}.gallery-discuss,.gallery-discuss>span{transition:none}.gallery-discuss:hover>span{transform:none}}
/* Compact landing gallery: retain full imagery and all controls on desktop. */
#landing-gallery>.gallery-status{top:0;left:0}
@media(min-width:1000px){
 #landing-gallery .gallery-top{padding:9px 24px 7px}
 #landing-gallery .gallery-top small{display:none}
 #landing-gallery .gallery-tabs{padding:0 24px 10px}
 #landing-gallery .gallery-tabs button{padding:9px 14px}
 #landing-gallery .gallery-bottom{padding:9px 24px}
 #landing-gallery .landing-scene{min-height:0;height:clamp(420px,calc(100dvh - 224px),600px)}
 #landing-gallery .landing-scene .scene-nav{padding-block:18px}
 #landing-gallery .estate-copy{padding-top:25px;padding-bottom:65px}
 #landing-gallery .dental-copy{padding-top:20px;padding-bottom:24px}
 #landing-gallery .interior-copy{padding-top:22px;padding-bottom:24px}
 #landing-gallery .fitness-copy{padding-top:18px;padding-bottom:55px}
 #landing-gallery .travel-copy{padding-top:35px;padding-bottom:70px}
 #landing-gallery .landing-scene h3{font-size:clamp(45px,5vw,70px)}
 #landing-gallery .scene-fitness h3{font-size:clamp(68px,7.1vw,98px)}
 #landing-gallery .scene-travel h3{font-size:clamp(55px,6vw,84px)}
 #landing-gallery .landing-scene p{margin:15px 0;line-height:1.7}
 #landing-gallery .scene-kicker{margin-bottom:17px}
 #landing-gallery .dental-photo{top:76px;bottom:22px}
 #landing-gallery .dental-note{margin-top:18px}
 #landing-gallery .interior-photo{top:66px}
 #landing-gallery .estate-bottom,#landing-gallery .travel-bottom{bottom:19px;padding-top:13px}
 #landing-gallery .estate-seal{bottom:78px;width:85px;height:85px}
}
@media(min-width:1000px) and (max-height:800px){
 #landing-gallery .landing-scene .scene-nav{padding-block:14px}
 #landing-gallery .scene-brand{font-size:25px}
 #landing-gallery .estate-copy,#landing-gallery .dental-copy,#landing-gallery .interior-copy,#landing-gallery .fitness-copy{padding-top:12px}
 #landing-gallery .travel-copy{padding-top:22px}
 #landing-gallery .landing-scene h3{font-size:clamp(40px,4.25vw,56px)}
 #landing-gallery .scene-fitness h3{font-size:clamp(60px,5.7vw,78px)}
 #landing-gallery .scene-travel h3{font-size:clamp(50px,5.4vw,72px)}
 #landing-gallery .landing-scene p{font-size:12px;margin:12px 0;line-height:1.6}
 #landing-gallery .scene-kicker{margin-bottom:12px;font-size:9px}
 #landing-gallery .scene-cta{min-height:44px;padding:11px 18px}
 #landing-gallery .dental-note{margin-top:12px}
 #landing-gallery .dental-photo{top:62px;bottom:18px}
 #landing-gallery .interior-photo{top:56px}
 #landing-gallery .fitness-strip{padding:11px}
}
/* One primary action per concept, with an invitation halo in its own palette. */
.scene-estate{--hero-cta-glow:#e8e2d7}.scene-dental{--hero-cta-glow:#254bc0}.scene-interior{--hero-cta-glow:#34362d}.scene-fitness{--hero-cta-glow:#ff684b}.scene-travel{--hero-cta-glow:#e9ecda}
.scene-cta,.saas-cta,.ai-brief{position:relative;isolation:isolate;overflow:visible}
.scene-cta::before,.saas-cta::before,.ai-brief::before{content:"";position:absolute;inset:-6px;border:1px solid var(--hero-cta-glow,var(--brand,var(--ai-accent)));border-radius:inherit;pointer-events:none;opacity:.3;box-shadow:0 0 15px color-mix(in srgb,var(--hero-cta-glow,var(--brand,var(--ai-accent))) 22%,transparent)}
dialog[open] .scene-cta::before,dialog[open] .saas-cta::before,dialog[open] .ai-brief::before{animation:gallery-cta-invitation 3.6s ease-out infinite}
dialog[open] :is(.scene-cta,.saas-cta,.ai-brief):focus-visible::before{animation:none;opacity:.6}
@media(hover:hover) and (pointer:fine){dialog[open] :is(.scene-cta,.saas-cta,.ai-brief):hover::before{animation:none;opacity:.6}}
@media(prefers-reduced-motion:reduce){dialog[open] .scene-cta::before,dialog[open] .saas-cta::before,dialog[open] .ai-brief::before{animation:none;opacity:.3}}