.visual-home>header{gap:clamp(12px,2vw,28px);position:relative;z-index:60;overflow:visible} .visual-home>header>nav{margin-left:auto} .visual-home .language-picker{position:relative;flex:0 0 auto;z-index:65} .visual-home #language-toggle{display:flex;align-items:center;justify-content:center;gap:8px;min-width:66px;min-height:44px;padding:8px 12px;border:1px solid #dbe1dc;border-radius:999px;background:transparent;color:#172c27;font:inherit;font-size:14px;cursor:pointer} .visual-home #language-options{position:absolute;right:0;top:calc(100% + 8px);min-width:170px;padding:6px;background:#fff;border:1px solid #dbe1dc;border-radius:14px;box-shadow:0 12px 32px #10251c20} .visual-home #language-options[hidden]{display:none!important} .visual-home #language-options button{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:10px 12px;border:0;border-radius:9px;background:white;color:#172c27;font:inherit;font-size:14px;text-align:left;cursor:pointer} .visual-home #language-options button b{min-width:30px;font-size:12px} .visual-home #language-options button:hover,.visual-home #language-options button[aria-pressed=true]{background:#e2f1ed} @media(max-width:700px){.visual-home>header{height:auto!important;padding:8px 20px!important;gap:12px}.visual-home>header>.language-picker{margin-left:auto}.visual-home>header>.contact-link{font-size:13px!important;min-width:0!important;width:auto!important;gap:10px!important}.visual-home #language-toggle{padding:8px;min-width:60px}.visual-home .hero-top h1{font-size:clamp(44px,11.5vw,74px)!important}} @media(max-width:370px){.visual-home>header{padding-left:14px!important;padding-right:14px!important;gap:8px}.visual-home>header>.contact-link span{display:none}} /* One full-window experience with a single return control. */ body.visual-home .project-overlay{inset:0!important;width:100%!important;height:100dvh!important;max-width:none!important;max-height:none!important;margin:0!important;border:0!important;border-radius:0!important;padding:0!important;overflow:hidden!important} body.visual-home .project-overlay[open]{display:flex!important;flex-direction:column!important} body.visual-home .project-overlay>header{position:relative!important;inset:auto!important;width:100%!important;box-sizing:border-box!important;min-height:56px!important;margin:0!important;padding:8px max(16px,env(safe-area-inset-right)) 8px max(16px,env(safe-area-inset-left))!important;flex:0 0 auto!important;gap:12px!important} body.visual-home .project-overlay h2{margin:0!important;font-size:16px!important;line-height:1.3!important} body.visual-home .project-overlay #overlay-close{min-height:40px;flex-shrink:0} body.visual-home .project-overlay>.overlay-body{position:relative!important;flex:1 1 0!important;min-height:0!important;width:100%!important;padding:0!important;overflow:auto!important} body.visual-home .project-overlay .overlay-body>iframe{display:block!important;position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;max-width:none!important;transform:none!important;border:0!important} body.visual-home .experience>.stage-bottom{display:none!important} body.visual-home .world-selector button[data-world="products"]>img{background:#fff!important} /* Category first, with demo choices only when there is more than one. */ body.visual-home .category-demo-group{width:100%;min-width:0;margin-top:14px;padding-top:14px;border-top:1px solid #dce5df} body.visual-home .category-demo-group[hidden]{display:none!important} body.visual-home #category-demo-label{margin:0 0 10px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#5c7269} body.visual-home .demo-tabs{display:flex;flex-wrap:wrap;gap:10px} body.visual-home .demo-tabs button{display:flex;align-items:center;gap:10px;min-height:64px;padding:8px 12px;border:1px solid #d7e1db;border-radius:12px;background:#fff;color:#304b40;text-align:left;font:inherit;font-size:14px;cursor:pointer} body.visual-home .demo-tabs img{width:64px;height:48px;object-fit:contain;border-radius:7px} body.visual-home .demo-tabs button[aria-selected=true]{background:#e5f2ec;border-color:#477b68;box-shadow:inset 0 -2px #79bfb1} body.visual-home .demo-tabs button:focus-visible{outline:3px solid #477b68;outline-offset:3px} @media(max-width:700px){body.visual-home .demo-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}body.visual-home .demo-tabs button{flex-direction:column;justify-content:flex-start;text-align:center;padding:8px 5px;font-size:12px;line-height:1.3}body.visual-home .demo-tabs img{width:100%;height:52px}} /* Compact visual project choices, with full readable labels. */ body.visual-home .category-tabs{display:flex!important;flex-wrap:wrap!important;gap:10px!important;width:100%;min-width:0} body.visual-home .category-tabs button{display:flex!important;align-items:center;justify-content:flex-start!important;gap:12px!important;padding:10px 14px!important;min-height:80px!important;min-width:0;max-width:100%;border-radius:14px!important;text-align:left;white-space:normal!important;flex:0 1 auto} body.visual-home .category-tabs button img{display:block;width:80px!important;height:60px!important;object-fit:contain;background:#fff;border-radius:8px;flex:0 0 80px;margin:0!important} body.visual-home .category-tabs button img[hidden]{display:none!important} body.visual-home .category-tabs button span{font-size:15px!important;line-height:1.35;min-width:0;overflow-wrap:anywhere} body.visual-home .category-tabs button[aria-selected=true]{border:2px solid #477b68!important;background:#e5f2ec!important;color:#183b32!important;box-shadow:inset 0 -3px #79bfb1} body.visual-home .category-tabs button:focus-visible{outline:3px solid #477b68;outline-offset:3px} @media(max-width:700px){ body.visual-home .category-tabs{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important} body.visual-home .category-tabs button{width:100%!important;padding:8px!important;gap:8px!important;min-height:68px!important} body.visual-home .category-tabs button img{width:48px!important;height:48px!important;flex-basis:48px} body.visual-home .category-tabs button span{font-size:14px!important} } /* Product-only catalogue cards. Keep this last so every breakpoint shares the same hierarchy. */ body.visual-home .stage-top{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:0!important;padding:20px!important} body.visual-home .category-tabs{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important;max-width:780px!important} body.visual-home .category-tabs button{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:8px!important;min-height:142px!important;padding:12px!important;border:1px solid #dbe3de!important;border-radius:12px!important;background:#fff!important;box-shadow:none!important;text-align:center!important} body.visual-home .category-tabs button img{width:128px!important;height:94px!important;max-width:100%!important;flex:0 0 auto!important;object-fit:contain!important;border-radius:0!important;background:white!important} body.visual-home .category-tabs button span{font-size:14px!important;font-weight:500;line-height:1.3!important} body.visual-home .category-tabs button[aria-selected=true]{border-color:#477b68!important;box-shadow:inset 0 -3px #477b68!important;background:#fff!important} body.visual-home .category-tabs button[aria-selected=true] span{font-weight:700} body.visual-home .category-demo-group{box-sizing:border-box;max-width:780px;margin-top:18px!important;padding:12px 16px!important;border-top:0;border-left:3px solid #477b68;background:#f4f7f5;border-radius:0 10px 10px 0} body.visual-home #category-demo-label{font-size:11px!important;line-height:1.4!important;margin:0 0 10px!important;letter-spacing:.04em} body.visual-home .demo-tabs{display:flex!important;flex-wrap:wrap!important;max-width:780px;gap:8px!important} body.visual-home .demo-tabs button{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;gap:8px!important;flex:0 1 auto;min-width:0;min-height:52px!important;padding:6px 10px!important;border:1px solid #dbe3de!important;border-radius:8px!important;background:white!important;box-shadow:none!important;color:#304b40!important;text-align:left!important} body.visual-home .demo-tabs button img{display:block!important;width:52px!important;height:36px!important;max-width:100%;object-fit:contain!important;background:white!important;border-radius:0!important;margin:0!important} body.visual-home .demo-tabs button span{font:500 12px/1.35 Arial,sans-serif!important} body.visual-home .demo-tabs button[aria-selected=true]{border-color:#477b68!important;box-shadow:inset 0 -2px #477b68!important} body.visual-home .category-tabs button:hover,body.visual-home .demo-tabs button:hover{border-color:#8aab9b!important} body.visual-home .world-followup[hidden]{display:none!important} @media(max-width:700px){ body.visual-home .stage-top{padding:14px!important} body.visual-home .category-tabs,body.visual-home .demo-tabs{gap:6px!important} body.visual-home .category-tabs button{min-height:108px!important;padding:8px 4px!important} body.visual-home .category-tabs button img{width:90px!important;height:64px!important} body.visual-home .category-tabs button span{font-size:12px!important} body.visual-home .category-demo-group{padding:10px!important} body.visual-home .demo-tabs button{padding:6px 8px!important;min-height:48px!important} body.visual-home .demo-tabs button img{width:42px!important;height:30px!important} body.visual-home .demo-tabs button span{font-size:12px!important} } /* Strong active world and an honest placeholder for the upcoming clothing demo. */ body.visual-home .world-selector button[aria-pressed=true]{background:var(--brand-forest,#20312c)!important;border-color:var(--brand-forest,#20312c)!important;color:#fff!important;box-shadow:none!important} body.visual-home .world-selector button[aria-pressed=true] strong,body.visual-home .world-selector button[aria-pressed=true] small{color:#fff!important} body.visual-home .world-selector button[aria-pressed=true] .world-card-link{color:#9bcfc5!important} body.visual-home .category-tabs{grid-template-columns:repeat(4,minmax(0,1fr))!important;max-width:960px!important} body.visual-home .category-tabs .clothing-coming{opacity:1;cursor:default;color:#66766e!important} body.visual-home .clothing-coming svg{height:76px;width:100px} body.visual-home .clothing-coming small{font-size:10px;line-height:1.2;color:#66766e} @media(max-width:700px){body.visual-home .category-tabs{grid-template-columns:repeat(2,minmax(0,1fr))!important}body.visual-home .clothing-coming svg{height:44px;width:70px}} /* Final navigation hierarchy and explicit selection contrast. */ html body.visual-home>header,html body.visual-home>header:before{background:#192d28!important;color:#f4fff9!important;border-bottom-color:#ffffff20!important} html body.visual-home>header a,html body.visual-home>header #language-toggle{color:#f4fff9!important} html body.visual-home>header #language-toggle{border-color:#b9c7c1!important} html body.visual-home>header .logo-light-lettering{display:block!important} html body.visual-home .landing-overview>.world-choice{position:relative;isolation:isolate;background:#fff!important;color:#192d28;padding:0 0 28px!important;justify-content:flex-start!important} html body.visual-home .landing-overview>.world-choice:before{content:"";position:absolute;inset:0 calc(50% - 50vw);background:#fff;z-index:-1;pointer-events:none} html body.visual-home .landing-overview>.world-choice h2{position:relative;isolation:isolate;color:#c5d9d2!important;background:#192d28;margin:0!important;padding:20px 0 16px!important} html body.visual-home .landing-overview>.world-choice h2:before{content:"";position:absolute;inset:0 calc(50% - 50vw);background:#192d28;z-index:-1;pointer-events:none} html body.visual-home .landing-overview .world-selector{align-items:stretch} html body.visual-home .landing-overview .world-selector button[aria-pressed="true"]{border-color:transparent!important;border-top:0!important;border-radius:0 0 18px 18px!important;box-shadow:none!important} html body.visual-home .landing-overview .world-selector button:focus-visible{outline:3px solid #72c5bb!important;outline-offset:-5px} @media(max-width:700px){ html body.visual-home .landing-overview .world-selector{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important} html body.visual-home .landing-overview .world-selector button{display:flex!important;flex-direction:column!important;justify-content:flex-start!important;min-height:0!important;padding:12px 8px!important;gap:10px!important} html body.visual-home .landing-overview .world-selector button img{width:100%!important;height:88px!important;object-fit:contain!important;border-radius:8px!important} html body.visual-home .landing-overview .world-selector .world-card-copy{width:100%;text-align:center} html body.visual-home .landing-overview .world-selector strong{font-size:16px!important} html body.visual-home .landing-overview .world-selector small,html body.visual-home .landing-overview .world-card-link{display:none!important} } html body.visual-home .world-selector button[aria-pressed="true"],html body.visual-home .world-selector button[aria-pressed="true"]:hover{background:#192d28!important;border-color:#192d28!important;color:#fff!important} html body.visual-home .world-selector button[aria-pressed="true"] strong,html body.visual-home .world-selector button[aria-pressed="true"] small{color:#fff!important} html body.visual-home .world-selector button[aria-pressed="true"] .world-card-link{color:#a3d6cb!important} html body.visual-home .stage-top .category-tabs{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;max-width:none!important;width:100%!important;gap:12px!important} html body.visual-home .stage-top .category-tabs button{min-height:132px!important;position:relative} html body.visual-home .stage-top .category-tabs button img{height:76px!important;width:116px!important} html body.visual-home .stage-top .category-tabs .clothing-coming svg{height:58px;width:76px} html body.visual-home .category-demo-group{display:flex;align-items:center;gap:16px;width:100%;max-width:none;margin-top:16px!important;padding:16px 0 0!important;border:0;border-top:1px solid #e1e7e3;border-radius:0;background:transparent} html body.visual-home #category-demo-label{margin:0!important;font-size:12px!important;letter-spacing:0;text-transform:none} html body.visual-home #furniture-demo{width:260px;max-width:100%;min-height:44px;padding:10px 36px 10px 12px;border:1px solid #b7c8be;border-radius:8px;background:#fff;color:#192d28;font:inherit;font-size:14px} html body.visual-home #furniture-demo:focus-visible{outline:3px solid #477b68;outline-offset:3px} @media(max-width:700px){html body.visual-home .stage-top .category-tabs{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}html body.visual-home .category-demo-group{align-items:stretch;flex-direction:column;gap:8px}html body.visual-home #furniture-demo{width:100%}} /* Nested furniture gallery: visible previews, smaller than category cards. */ html body.visual-home #category-demos:not([hidden]){display:block;padding:14px 16px!important;margin-top:16px!important;background:#f3f6f4;border:0;border-left:3px solid #71978a;border-radius:0 10px 10px 0} html body.visual-home #category-demos #category-demo-label{font-size:12px!important;font-weight:600;margin:0 0 10px!important} html body.visual-home #category-demos .demo-tabs{display:flex!important;flex-wrap:wrap;gap:10px!important} html body.visual-home #category-demos .demo-tabs button{flex:0 1 220px;display:flex!important;flex-direction:row!important;align-items:center!important;min-height:68px!important;padding:8px 12px!important;background:white!important;border:1px solid #d9e3dc!important;border-radius:8px!important} html body.visual-home #category-demos .demo-tabs button img{width:70px!important;height:48px!important} html body.visual-home #category-demos .demo-tabs button[aria-selected=true]{background:#e2f1ed!important;color:#192d28!important;border-color:#477b68!important;box-shadow:inset 0 0 0 1px #477b68!important} html body.visual-home #category-demos .demo-tabs button[aria-selected=true] span{color:#192d28!important;font-weight:600} html body.visual-home #category-demos .demo-tabs button img{background:#fff;border-radius:6px;padding:4px;box-sizing:border-box} html body.visual-home #category-demos .demo-tabs button:not([aria-selected=true]):hover{background:#e8efeb!important;border-color:#78988b!important} html body.visual-home #category-demos .demo-tabs button:focus-visible{outline:3px solid #72c5bb;outline-offset:3px} @media(max-width:700px){html body.visual-home #category-demos .demo-tabs{flex-wrap:nowrap!important;overflow-x:auto;padding-bottom:4px}html body.visual-home #category-demos .demo-tabs button{flex:0 0 190px}} /* Category-led browsing: editorial cards above compact examples. */ html body.visual-home .product-picker #picker-title{font-size:clamp(24px,2.8vw,38px);font-weight:500;letter-spacing:-.035em;line-height:1.15;margin:0 0 24px;color:#192d28} html body.visual-home .stage-top.product-picker .category-tabs{grid-template-columns:repeat(3,minmax(0,1fr))!important} html body.visual-home .stage-top.product-picker .category-tabs button{display:grid!important;grid-template-columns:46% 54%!important;grid-template-rows:1fr auto!important;min-height:210px!important;padding:24px!important;gap:16px 0!important;text-align:left!important;background:#f5f6f3!important;overflow:hidden;align-items:start!important;border:1px solid #e2e7e3!important;box-shadow:none!important} html body.visual-home .stage-top.product-picker .category-tabs button img{grid-column:2;grid-row:1/3;width:100%!important;height:160px!important;max-width:none!important;align-self:center;object-fit:contain!important;background:transparent!important;mix-blend-mode:multiply} html body.visual-home .product-picker .category-tabs .choice-copy{grid-column:1;grid-row:1;align-self:start;position:relative;z-index:1} html body.visual-home .choice-copy strong{display:block;font-size:clamp(20px,1.9vw,28px);font-weight:650;line-height:1.2} html body.visual-home .choice-copy small{display:block;font-size:14px;line-height:1.5;color:#61716b;margin-top:10px;font-weight:400} html body.visual-home .product-picker .category-tabs .choice-arrow{grid-column:1;grid-row:2;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:white;color:#192d28;font-size:22px!important} html body.visual-home .stage-top.product-picker .category-tabs button[aria-selected=true]{border-color:#638576!important;box-shadow:inset 0 0 0 1px #638576!important;background:#edf1ec!important} html body.visual-home .product-picker .category-tabs button[aria-selected=true] .choice-arrow{background:#3c6254;color:white} html body.visual-home #clothing-upcoming{display:flex;gap:10px;align-items:center;justify-content:flex-end;margin:12px 0 0;font-size:13px;color:#62736a} html body.visual-home #clothing-upcoming[hidden],html body.visual-home #picker-title[hidden]{display:none!important} html body.visual-home #clothing-upcoming small{padding:3px 8px;background:#f1f3f0;border-radius:20px;font-size:11px} html body.visual-home #category-demos:not([hidden]){border:0!important;border-radius:12px!important;background:#f4f5f2!important;padding:14px!important;margin-top:18px!important} html body.visual-home #category-demos #category-demo-label{font-size:16px!important;letter-spacing:0!important;text-transform:none!important;color:#243d33;margin-bottom:12px!important} html body.visual-home #category-demos .demo-tabs{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px!important} html body.visual-home #category-demos .demo-tabs button{display:grid!important;grid-template-columns:90px minmax(0,1fr) 20px!important;gap:14px!important;min-height:96px!important;width:100%;padding:12px!important;border-radius:10px!important;text-align:left!important;box-shadow:none!important} html body.visual-home #category-demos .demo-tabs button img{width:90px!important;height:66px!important;padding:0!important;border-radius:6px!important} html body.visual-home #category-demos .demo-tabs .choice-copy strong{font-size:15px!important} html body.visual-home #category-demos .demo-tabs .choice-copy small{font-size:12px!important;margin-top:5px!important;font-weight:400!important;color:#6a756e!important} html body.visual-home #category-demos .demo-tabs .choice-arrow{font-size:22px!important;color:#526b5f!important} html body.visual-home #category-demos .demo-tabs button[aria-selected=true]{background:#fff!important;border-color:#638576!important;box-shadow:inset 0 0 0 1px #638576!important;color:#192d28!important} @media(max-width:1000px){ html body.visual-home .stage-top.product-picker .category-tabs button{padding:16px!important;min-height:190px!important} html body.visual-home #category-demos .demo-tabs button{grid-template-columns:64px minmax(0,1fr) 14px!important;gap:10px!important} html body.visual-home #category-demos .demo-tabs button img{width:64px!important;height:56px!important} } @media(max-width:700px){ html body.visual-home .stage-top.product-picker .category-tabs{grid-template-columns:1fr!important} html body.visual-home .stage-top.product-picker .category-tabs button{grid-template-columns:1fr 140px!important;min-height:150px!important;gap:8px!important} html body.visual-home .stage-top.product-picker .category-tabs button img{height:120px!important} html body.visual-home .choice-copy strong{font-size:21px} html body.visual-home #category-demos .demo-tabs{grid-template-columns:1fr!important;overflow:visible!important} html body.visual-home #category-demos .demo-tabs button{grid-template-columns:76px minmax(0,1fr) 20px!important;min-height:84px!important} html body.visual-home #category-demos .demo-tabs button img{width:76px!important;height:58px!important} } /* Keep the category, examples and selected preview in one desktop view. */ html body.visual-home .stage-top.product-picker .category-tabs{grid-template-columns:repeat(4,minmax(0,1fr))!important} html body.visual-home .product-picker #picker-title{font-size:clamp(22px,2.3vw,32px);margin-bottom:14px} html body.visual-home .stage-top.product-picker{padding:16px 20px!important} html body.visual-home .stage-top.product-picker .category-tabs button{min-height:clamp(120px,17svh,180px)!important;padding:16px!important;gap:8px 0!important} html body.visual-home .stage-top.product-picker .category-tabs button img{height:clamp(80px,12svh,130px)!important} html body.visual-home .stage-top.product-picker .category-tabs button .choice-copy strong{font-size:clamp(17px,1.5vw,23px)} html body.visual-home .stage-top.product-picker .category-tabs button .choice-copy small{font-size:12px;line-height:1.4;margin-top:7px} html body.visual-home .stage-top.product-picker .category-tabs .choice-arrow{width:30px;height:30px;font-size:18px!important} html body.visual-home .stage-top.product-picker .clothing-coming{opacity:1!important;cursor:default} html body.visual-home .stage-top.product-picker .clothing-coming svg{grid-column:2;grid-row:1/3;width:100%!important;height:clamp(85px,13svh,140px)!important;align-self:center} html body.visual-home #category-demos:not([hidden]){margin-top:12px!important;padding:10px!important} html body.visual-home #category-demos #category-demo-label{font-size:14px!important;margin-bottom:8px!important} html body.visual-home #category-demos .demo-tabs button{min-height:70px!important;padding:8px 12px!important} html body.visual-home #category-demos .demo-tabs button img{height:48px!important} @media(min-width:901px) and (min-height:650px){ html body.visual-home .experience:not(.expanded):has(.product-picker){height:calc(100svh - 88px)!important;min-height:0!important;scroll-margin-top:76px;display:flex!important;flex-direction:column!important} html body.visual-home .experience:not(.expanded):has(.product-picker)>.showroom{display:grid!important;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr)!important;flex:1 1 0!important;min-height:0!important;align-items:stretch!important;overflow:hidden} html body.visual-home .experience:not(.expanded):has(.product-picker) .image-stage{height:100%!important;min-height:0!important;align-self:stretch!important;padding:16px!important;overflow:hidden} html body.visual-home .experience:not(.expanded):has(.product-picker) .project-image{height:100%!important;max-height:100%!important;object-fit:contain!important} html body.visual-home .experience:not(.expanded):has(.product-picker) .preview-copy{display:block!important;padding:16px 24px!important} html body.visual-home .experience:not(.expanded):has(.product-picker) #demo-heading{font-size:clamp(24px,3.7svh,42px)!important;line-height:1.1;margin:0 0 12px!important;padding:0!important} html body.visual-home .experience:not(.expanded):has(.product-picker) #demo-copy{font-size:clamp(12px,1.65svh,15px)!important;line-height:1.45;padding:0!important} html body.visual-home .experience:not(.expanded):has(.product-picker) #launch{margin:14px 0 0!important;padding:12px 20px!important;font-size:14px!important} html body.visual-home .experience:not(.expanded):has(.product-picker) .note{font-size:10px;margin-top:8px} html body.visual-home .experience:not(.expanded):has(.product-picker) .preview-copy>.micro{display:none!important} } @media(max-width:900px){ html body.visual-home .stage-top.product-picker .category-tabs{grid-template-columns:repeat(2,minmax(0,1fr))!important} } @media(max-width:500px){ html body.visual-home .stage-top.product-picker .category-tabs button{grid-template-columns:1fr!important;grid-template-rows:auto auto!important;padding:12px!important;min-height:160px!important} html body.visual-home .stage-top.product-picker .category-tabs button img,html body.visual-home .stage-top.product-picker .clothing-coming svg{grid-column:1!important;grid-row:1!important;height:70px!important} html body.visual-home .stage-top.product-picker .category-tabs .choice-copy{grid-column:1!important;grid-row:2!important;text-align:center} html body.visual-home .stage-top.product-picker .category-tabs .choice-arrow{display:none!important} } /* Wide, shallow furniture examples retain readable text at every width. */ html body.visual-home #category-demos .demo-tabs{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important;overflow:visible!important} html body.visual-home #category-demos .demo-tabs button{display:grid!important;grid-template-columns:clamp(76px,7vw,116px) minmax(0,1fr)!important;gap:16px!important;align-items:center!important;min-height:94px!important;padding:10px 14px!important} html body.visual-home #category-demos .demo-tabs button img{width:100%!important;height:70px!important;object-fit:contain!important;background:transparent!important;padding:0!important} html body.visual-home #category-demos .demo-tabs .choice-copy{min-width:0!important;text-align:left!important} html body.visual-home #category-demos .demo-tabs .choice-copy strong{font-size:15px!important;line-height:1.25!important;font-weight:650!important;white-space:normal!important;overflow-wrap:normal!important} html body.visual-home #category-demos .demo-tabs .choice-copy small{display:block!important;font-size:12px!important;line-height:1.4!important;font-weight:400!important;margin-top:6px!important;white-space:normal!important;overflow-wrap:normal!important;color:#61716b!important} html body.visual-home #category-demos .demo-tabs .choice-arrow{display:none!important} html body.visual-home #category-demos .demo-tabs{width:100%!important;min-width:0!important;overflow:visible!important;scroll-snap-type:none!important} html body.visual-home #category-demos .demo-tabs button{width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box} @media(max-width:1250px){ html body.visual-home #category-demos .demo-tabs{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;padding:0!important} html body.visual-home #category-demos .demo-tabs button{grid-template-columns:64px minmax(0,1fr)!important;gap:10px!important;padding:10px!important} html body.visual-home #category-demos .demo-tabs .choice-copy strong{font-size:14px!important} html body.visual-home #category-demos .demo-tabs .choice-copy small{font-size:12px!important} } @media(max-width:760px){ html body.visual-home #category-demos .demo-tabs{grid-template-columns:1fr!important} html body.visual-home #category-demos .demo-tabs button{grid-template-columns:86px minmax(0,1fr)!important;min-height:86px!important} } /* Selected experience tabs join the preview surface. */ html body.visual-home #playground{--selected-surface:#e2f3ef} html body.visual-home #playground>.stage-top{padding-bottom:0!important;border-bottom:0!important} html body.visual-home #playground>.showroom{background:var(--selected-surface)!important;color:#192d28!important} html body.visual-home #playground .preview-copy,#playground #demo-heading{color:#192d28!important} html body.visual-home #playground #demo-copy,html body.visual-home #playground .preview-copy .note,html body.visual-home #playground .preview-copy .micro{color:#4b625a!important;opacity:1} html body.visual-home #playground #launch{background:#192d28!important;color:#fff!important} html body.visual-home #playground .stage-grid{display:none!important} html body.visual-home #category-demos:not([hidden]){background:#fff!important;border-radius:0!important;padding:10px 0 0!important;margin-bottom:0!important} html body.visual-home #category-demos .demo-tabs{padding-bottom:0!important;align-items:stretch!important} html body.visual-home #category-demos .demo-tabs button{margin-bottom:16px!important;background:#fff!important} html body.visual-home #category-demos .demo-tabs button[aria-selected=true]{position:relative;overflow:visible!important;background:var(--selected-surface)!important;color:#192d28!important;border-color:var(--selected-surface)!important;border-radius:10px 10px 0 0!important;box-shadow:none!important} html body.visual-home #category-demos .demo-tabs button[aria-selected=true]:after{content:""!important;display:block!important;position:absolute;left:-1px;right:-1px;top:100%;height:18px;background:var(--selected-surface);pointer-events:none;border-radius:0!important} html body.visual-home #category-demos .demo-tabs button[aria-selected=true] .choice-copy strong{color:#192d28!important} html body.visual-home #category-demos .demo-tabs button[aria-selected=true] .choice-copy small{color:#4b625a!important} html body.visual-home #category-demos .demo-tabs button img{background:#fff!important;border-radius:6px!important} /* Single-demo categories and space/learning choices connect directly. */ html body.visual-home #playground>.stage-top:not(:has(#category-demos:not([hidden]))) .category-tabs{padding-bottom:0!important;overflow:visible!important;align-items:stretch!important} html body.visual-home #playground>.stage-top:not(:has(#category-demos:not([hidden]))) .category-tabs button{margin-bottom:16px!important} html body.visual-home #playground>.stage-top:not(:has(#category-demos:not([hidden]))) .category-tabs button[aria-selected=true]{position:relative;overflow:visible!important;background:var(--selected-surface)!important;color:#192d28!important;border-color:var(--selected-surface)!important;border-radius:12px 12px 0 0!important;box-shadow:none!important} html body.visual-home #playground>.stage-top:not(:has(#category-demos:not([hidden]))) .category-tabs button[aria-selected=true]:after{content:""!important;display:block!important;position:absolute;left:-1px;right:-1px;top:100%;height:18px;background:var(--selected-surface);pointer-events:none;border-radius:0!important} html body.visual-home #playground>.stage-top:not(:has(#category-demos:not([hidden]))) .category-tabs button[aria-selected=true] strong{color:#192d28!important} html body.visual-home #playground>.stage-top:not(:has(#category-demos:not([hidden]))) .category-tabs button[aria-selected=true] small,html body.visual-home #playground>.stage-top:not(:has(#category-demos:not([hidden]))) .category-tabs button[aria-selected=true] .choice-arrow{color:#4b625a!important} html body.visual-home #playground>.stage-top:not(:has(#category-demos:not([hidden]))) .category-tabs button[aria-selected=true] img{mix-blend-mode:normal!important;background:white!important;border-radius:8px!important} @media(max-width:760px){ html body.visual-home #category-demos .demo-tabs button[aria-selected=true]:after,html body.visual-home #playground>.stage-top:not(:has(#category-demos:not([hidden]))) .category-tabs button[aria-selected=true]:after{display:none!important} html body.visual-home #category-demos .demo-tabs button[aria-selected=true],html body.visual-home #playground>.stage-top:not(:has(#category-demos:not([hidden]))) .category-tabs button[aria-selected=true]{border-radius:10px!important} } /* Compact phone selection keeps the selected preview close to its controls. */ @media(max-width:760px){ html body.visual-home #playground .stage-top{padding:12px!important} html body.visual-home #playground #picker-title{font-size:21px!important;margin:4px 0 12px!important} html body.visual-home #playground .category-tabs{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important} html body.visual-home #playground .stage-top .category-tabs button{display:grid!important;grid-template-columns:48px minmax(0,1fr)!important;grid-template-rows:1fr!important;align-items:center!important;min-height:64px!important;height:auto!important;padding:8px!important;margin:0!important;gap:8px!important;border-radius:10px!important} html body.visual-home #playground .stage-top .category-tabs button img{grid-column:1!important;grid-row:1!important;width:48px!important;height:44px!important;object-fit:contain!important} html body.visual-home #playground .stage-top .category-tabs button .choice-copy{grid-column:2!important;grid-row:1!important;text-align:left!important;min-width:0} html body.visual-home #playground .stage-top .category-tabs button strong{font-size:14px!important;line-height:1.25!important} html body.visual-home #playground .category-tabs small,html body.visual-home #playground .category-tabs .choice-arrow{display:none!important} html body.visual-home #category-demos{scroll-margin-top:76px!important;margin-top:12px!important;padding:0!important} html body.visual-home #category-demo-label{font-size:13px!important;margin:0 0 8px!important} html body.visual-home #category-demos .demo-tabs{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important} html body.visual-home #category-demos .demo-tabs button{display:flex!important;flex-direction:column!important;justify-content:center!important;gap:4px!important;min-height:82px!important;margin:0!important;padding:6px!important;border-radius:8px!important} html body.visual-home #category-demos .demo-tabs button img{width:52px!important;height:36px!important} html body.visual-home #category-demos .demo-tabs .choice-copy{text-align:center!important} html body.visual-home #category-demos .demo-tabs .choice-copy strong{font-size:12px!important;line-height:1.2!important} html body.visual-home #category-demos .demo-tabs .choice-copy small{display:none!important} html body.visual-home #playground #showroom{display:flex!important;flex-direction:column!important;min-height:0!important;height:auto!important;scroll-margin-top:76px!important;padding:12px!important;gap:12px!important} html body.visual-home #playground #showroom .image-stage{order:0!important;height:clamp(180px,34svh,290px)!important;min-height:0!important;width:100%!important;padding:0!important} html body.visual-home #playground #showroom .project-image{width:100%!important;height:100%!important;max-height:100%!important;object-fit:contain!important} html body.visual-home #playground #showroom .preview-copy{order:1!important;padding:0!important} html body.visual-home #playground #demo-heading{font-size:26px!important;line-height:1.15!important;margin:0 0 8px!important} html body.visual-home #playground #demo-copy{font-size:14px!important;line-height:1.45!important;margin:0!important} html body.visual-home #playground #launch{margin-top:12px!important;padding:12px 20px!important;min-height:44px!important} } /* Clothing photography replaces the placeholder, with a compact presentation. */ html body.visual-home #playground #category-clothing img{object-fit:contain!important;border-radius:10px!important} html body.visual-home #playground #category-clothing[aria-selected=true] .choice-arrow{background:#405f54!important;color:#fff!important} html body.visual-home #playground #showroom:has(img[src*="clothing-realistic"]) .project-image{border-radius:18px!important;object-fit:contain!important;background:#fff!important} @media(min-width:761px){ html body.visual-home #playground:has(#category-clothing[aria-selected=true]):not(.expanded){height:auto!important;min-height:0!important} html body.visual-home #playground #showroom:has(img[src*="clothing-realistic"]){min-height:0!important;flex:none!important;padding:24px!important;align-items:center!important} html body.visual-home #playground #showroom:has(img[src*="clothing-realistic"]) .image-stage{height:clamp(300px,48svh,520px)!important;min-height:0!important;padding:0!important;display:flex!important;justify-content:center!important} html body.visual-home #playground #showroom:has(img[src*="clothing-realistic"]) .project-image{width:auto!important;max-width:100%!important;height:100%!important} } /* Seamless photographic hero. */ html body.visual-home .hero-top{position:relative!important;isolation:isolate;background:#242927!important;display:flex!important;align-items:center!important;min-height:clamp(460px,42vw,720px)!important;padding:48px 4%!important;overflow:hidden} html body.visual-home .hero-top .hero-intro{position:relative!important;z-index:2!important;width:41%!important;max-width:560px!important;margin:0!important} html body.visual-home .hero-top .hero-visual{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;margin:0!important;z-index:0!important;border-radius:0!important;box-shadow:none!important;overflow:hidden!important} html body.visual-home .hero-top .hero-visual img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;border-radius:0!important;box-shadow:none!important} html body.visual-home .hero-top .hero-visual:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#242927 0%,#242927e8 12%,#24292760 34%,transparent 50%),linear-gradient(0deg,#242927,transparent 16%);pointer-events:none} html body.visual-home .hero-top .hero-visual figcaption{display:none!important} html body.visual-home .hero-top h1{font-size:clamp(42px,5.2vw,82px)!important;color:white!important} html body.visual-home>header{background:#242927!important} @media(max-width:760px){ html body.visual-home .hero-top{flex-direction:column!important;padding:28px 20px 0!important;min-height:0!important;gap:14px!important} html body.visual-home .hero-top .hero-intro{width:100%!important;max-width:none!important} html body.visual-home .hero-top h1{font-size:clamp(40px,10vw,64px)!important} html body.visual-home .hero-top .hero-visual{position:relative!important;inset:auto!important;width:calc(100% + 40px)!important;height:clamp(230px,65vw,420px)!important;flex:none!important} html body.visual-home .hero-top .hero-visual img{object-position:78% center!important} html body.visual-home .hero-top .hero-visual:after{background:linear-gradient(180deg,#242927,transparent 18%,transparent 82%,#242927)} } /* One continuous opening background, including the page gutters. */ html body.visual-home .landing-overview{position:relative;isolation:isolate;background:#242927!important} html body.visual-home .landing-overview:before{content:"";position:absolute;inset:0 calc(50% - 50vw);z-index:-1;background:#242927;pointer-events:none} html body.visual-home .landing-overview>.world-choice{background:#242927!important;color:#f4fff9!important} html body.visual-home .landing-overview>.world-choice:before, html body.visual-home .landing-overview>.world-choice h2:before{display:none!important} html body.visual-home .landing-overview>.world-choice h2{background:transparent!important;color:#c5d9d2!important} html body.visual-home .landing-overview .world-selector button[aria-pressed="true"]{background:#242927!important;border:1px solid #819e92!important;border-radius:18px!important} html body.visual-home>header:before{background:#242927!important} /* Hero category cards: shallow proportions and a sofa detail crop. */ html body.visual-home .landing-overview .product-detail-crop{position:relative;display:block;width:100%;height:clamp(110px,12vw,180px);overflow:hidden;border-radius:12px;background:#fff} html body.visual-home .landing-overview .product-detail-crop img{position:absolute!important;width:220%!important;height:220%!important;max-width:none!important;left:-18%;top:-60%;object-fit:contain!important;border-radius:0!important} @media(min-width:761px){ html body.visual-home .landing-overview .world-selector button{display:grid!important;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)!important;min-height:0!important;padding:16px!important;gap:22px!important;border-radius:18px!important} html body.visual-home .landing-overview .world-selector button>img{height:clamp(110px,12vw,180px)!important} html body.visual-home .landing-overview .world-selector strong{font-size:clamp(21px,1.6vw,28px)!important} html body.visual-home .landing-overview .world-selector small{font-size:clamp(13px,1vw,16px)!important;line-height:1.45!important} html body.visual-home .landing-overview .world-card-link{margin-top:16px!important} } @media(max-width:760px){ html body.visual-home .landing-overview .product-detail-crop{height:88px;border-radius:8px} } /* Fit the desktop introduction and complete category row in one viewport. */ @media(min-width:761px){ html body.visual-home .landing-overview{min-height:0!important;height:auto!important} html body.visual-home .landing-overview>.hero-top{min-height:0!important;padding:24px 4%!important} html body.visual-home .landing-overview>.world-choice{flex:none!important;padding:0 0 64px!important} html body.visual-home .landing-overview>.world-choice h2{padding:12px 0!important} html body.visual-home .landing-overview .world-selector button{padding:12px!important;gap:16px!important;min-width:0!important} html body.visual-home .landing-overview .world-selector button>img, html body.visual-home .landing-overview .product-detail-crop{height:clamp(88px,14svh,150px)!important} html body.visual-home .landing-overview .world-card-copy{min-width:0} html body.visual-home .landing-overview .world-card-link{margin-top:10px!important} html body.visual-home .hero-top h1{font-size:clamp(42px,min(5.2vw,8svh),76px)!important} html body.visual-home .hero-top .hero-aside p{font-size:clamp(16px,2.1svh,20px)!important;line-height:1.45!important} } @media(min-width:761px) and (min-height:650px){ html body.visual-home .landing-overview{display:grid!important;grid-template-rows:minmax(min-content,1fr) auto;height:calc(100svh - var(--masthead-height,88px))!important} html body.visual-home .landing-overview>.hero-top{height:100%!important;min-height:min-content!important} } @media(min-width:761px) and (max-width:1100px){ html body.visual-home .landing-overview .world-selector button{grid-template-columns:minmax(64px,.65fr) minmax(0,1.35fr)!important;gap:10px!important} html body.visual-home .landing-overview .world-selector strong{font-size:20px!important} html body.visual-home .landing-overview .world-selector small{font-size:13px!important} html body.visual-home .hero-top .hero-intro{width:48%!important} } @media(max-width:760px){ html body.visual-home .landing-overview{min-height:0!important;height:auto!important} html body.visual-home .landing-overview>.world-choice{flex:none!important;padding-bottom:24px!important} } /* World-specific imagery blends into the same opening canvas. */ html body.visual-home .hero-top[data-hero-world="spaces"] .hero-visual img, html body.visual-home .hero-top[data-hero-world="learning"] .hero-visual img{width:62%!important;margin-left:auto!important;display:block;object-position:center!important} html body.visual-home .hero-top[data-hero-world="spaces"] .hero-visual:after, html body.visual-home .hero-top[data-hero-world="learning"] .hero-visual:after{background:linear-gradient(90deg,#242927 0%,#242927 36%,transparent 62%),linear-gradient(0deg,#242927,transparent 24%)} html body.visual-home .hero-top{scroll-margin-top:var(--masthead-height,88px)} @media(max-width:760px){ html body.visual-home .hero-top[data-hero-world="spaces"] .hero-visual img, html body.visual-home .hero-top[data-hero-world="learning"] .hero-visual img{width:100%!important;object-position:center 35%!important} html body.visual-home .hero-top[data-hero-world="spaces"] .hero-visual:after, html body.visual-home .hero-top[data-hero-world="learning"] .hero-visual:after{background:linear-gradient(180deg,#242927,transparent 18%,transparent 80%,#242927)} } /* Spaces uses the same horizontal visual hierarchy as product categories. */ html body.visual-home #playground .stage-top.space-picker .category-tabs{grid-template-columns:repeat(3,minmax(0,1fr))!important;width:100%!important} html body.visual-home #playground .stage-top.space-picker .category-tabs button{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;grid-template-rows:1fr auto!important;align-items:center!important;text-align:left!important;gap:12px!important;padding:18px!important;min-height:clamp(140px,19svh,190px)!important;background:#f4f6f3!important;border:1px solid #dce3df!important;border-radius:18px!important;box-shadow:none!important;margin:0!important} html body.visual-home #playground .stage-top.space-picker .category-tabs button img{grid-column:2!important;grid-row:1/3!important;width:100%!important;height:clamp(94px,14svh,150px)!important;object-fit:cover!important;border-radius:10px!important;padding:0!important;background:transparent!important} html body.visual-home #playground .space-picker .choice-copy{grid-column:1!important;grid-row:1!important;min-width:0;text-align:left!important} html body.visual-home #playground .space-picker .choice-copy strong{display:block;font-size:clamp(17px,1.5vw,23px)!important;line-height:1.2!important;white-space:normal!important} html body.visual-home #playground .space-picker .choice-copy small{display:block!important;font-size:13px!important;line-height:1.4!important;margin-top:8px!important;color:#62716b!important} html body.visual-home #playground .space-picker .choice-arrow{grid-column:1!important;grid-row:2!important;display:grid!important;place-items:center;width:34px!important;height:34px!important;border-radius:50%;background:white;color:#263b32!important;font-size:22px!important} html body.visual-home #playground .stage-top.space-picker .category-tabs button[aria-selected=true]{background:#edf2ee!important;border-color:#7d9789!important;box-shadow:inset 0 0 0 1px #7d9789!important;color:#203b30!important} html body.visual-home #playground .stage-top.space-picker .category-tabs button[aria-selected=true]:after{display:none!important} html body.visual-home #playground .space-picker button[aria-selected=true] .choice-arrow{background:#486658!important;color:white!important} @media(max-width:760px){ html body.visual-home #playground .stage-top.space-picker .category-tabs{grid-template-columns:repeat(2,minmax(0,1fr))!important} html body.visual-home #playground .stage-top.space-picker .category-tabs button{min-height:80px!important;padding:10px!important;gap:8px!important;grid-template-columns:1fr 50px!important;grid-template-rows:auto!important} html body.visual-home #playground .stage-top.space-picker .category-tabs button img{height:56px!important;grid-row:1!important} html body.visual-home #playground .space-picker .choice-copy strong{font-size:14px!important} html body.visual-home #playground .space-picker .choice-copy small,html body.visual-home #playground .space-picker .choice-arrow{display:none!important} } /* Fade the actual image boundary, not only an overlay across the hero. */ html body.visual-home .hero-top .hero-visual img{ -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 16%,#000 92%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 7%,#000 78%,transparent 100%); -webkit-mask-composite:source-in; mask-image:linear-gradient(90deg,transparent 0%,#000 16%,#000 92%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 7%,#000 78%,transparent 100%); mask-composite:intersect; } html body.visual-home .hero-top[data-hero-world="spaces"] .hero-visual img, html body.visual-home .hero-top[data-hero-world="learning"] .hero-visual img{ width:68%!important; -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 32%,#000 91%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 8%,#000 76%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0%,#000 32%,#000 91%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 8%,#000 76%,transparent 100%); } @media(max-width:760px){ html body.visual-home .hero-top .hero-visual img, html body.visual-home .hero-top[data-hero-world="spaces"] .hero-visual img, html body.visual-home .hero-top[data-hero-world="learning"] .hero-visual img{ width:100%!important; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(180deg,transparent,#000 16%,#000 78%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(180deg,transparent,#000 16%,#000 78%,transparent); } } /* Balanced demo previews: full-width choices and room for the complete interface. */ html body.visual-home #category-demos .demo-tabs{max-width:none!important;width:100%!important} @media(min-width:761px){ html body.visual-home .experience:not(.expanded):has(.product-picker){height:auto!important;min-height:0!important} html body.visual-home .experience:not(.expanded):has(.product-picker)>.showroom{display:grid!important;grid-template-columns:minmax(0,2fr) minmax(0,3fr)!important;flex:none!important;height:auto!important;min-height:0!important;align-items:center!important} html body.visual-home .experience:not(.expanded):has(.product-picker) .image-stage{width:100%!important;height:auto!important;min-height:0!important;padding:20px!important;box-sizing:border-box;align-self:center!important;overflow:visible!important} html body.visual-home .experience:not(.expanded):has(.product-picker) .project-image{position:relative!important;width:100%!important;max-width:none!important;height:auto!important;max-height:none!important;object-fit:contain!important;border-radius:14px!important;display:block} html body.visual-home .experience:not(.expanded):has(.product-picker) .project-image[hidden]{display:none!important} html body.visual-home .experience:not(.expanded):has(.product-picker) .preview-copy{padding:28px!important;max-width:560px;align-self:center!important} } /* Portrait devices: landscape category imagery and a compact opening. */ @media(min-width:761px) and (max-width:1100px){ html body.visual-home .landing-overview .world-selector button{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto 1fr!important;align-content:start!important;gap:10px!important} html body.visual-home .landing-overview .world-selector button>img, html body.visual-home .landing-overview .product-detail-crop{width:100%!important;height:auto!important;aspect-ratio:16/9!important;object-fit:cover!important;min-height:0!important;max-height:none!important;border-radius:10px!important} html body.visual-home .landing-overview .world-card-copy{text-align:left!important} html body.visual-home .landing-overview .world-selector small{font-size:13px!important;line-height:1.3!important} html body.visual-home .landing-overview .world-card-link{font-size:12px!important;margin-top:6px!important} } @media(max-width:760px){ html{overflow-x:clip} html body.visual-home{min-width:0!important;overflow-x:clip!important} html body.visual-home>header{height:68px!important;min-height:68px!important;padding:8px 16px!important;gap:12px!important;box-sizing:border-box!important} html body.visual-home>header .brand{width:76px!important;min-width:0!important;height:50px!important;background-size:contain!important} html body.visual-home>header .brand img{width:76px!important;height:50px!important;object-fit:contain!important} html body.visual-home>header nav{display:none!important} html body.visual-home>header .language-picker{margin-left:auto!important} html body.visual-home #language-toggle{padding:8px 10px!important;font-size:13px!important;min-height:36px!important} html body.visual-home>header .contact-link{font-size:13px!important;padding:8px 0!important;gap:10px!important} html body.visual-home .landing-overview{display:flex!important;flex-direction:column!important;height:auto!important;min-height:0!important;width:100%!important;max-width:100%!important} html body.visual-home .landing-overview>.hero-top{height:auto!important;min-height:0!important;padding:16px 16px 0!important;gap:4px!important;box-sizing:border-box!important} html body.visual-home .hero-top .hero-kicker{font-size:9px!important;letter-spacing:1.2px!important;margin:0 0 10px!important} html body.visual-home .hero-top h1{font-size:clamp(30px,8.5vw,42px)!important;line-height:1.02!important;margin:0 0 12px!important;letter-spacing:-1.6px!important} html body.visual-home .hero-top .hero-aside{margin:0!important;padding:0!important} html body.visual-home .hero-top .hero-aside p{font-size:14px!important;line-height:1.4!important;margin:0!important;max-width:42ch!important} html body.visual-home .hero-top .hero-actions{margin:12px 0 0!important;gap:0!important} html body.visual-home .hero-top .hero-try{min-height:42px!important;padding:10px 20px!important;font-size:14px!important;gap:24px!important} html body.visual-home .hero-top .hero-visual{width:100%!important;height:clamp(90px,18svh,160px)!important;margin:0!important;flex:none!important} html body.visual-home .landing-overview>.world-choice{margin:0!important;padding:0 12px 16px!important;box-sizing:border-box!important;width:100%!important} html body.visual-home .landing-overview>.world-choice h2{font-size:12px!important;padding:6px 0!important;margin:0!important} html body.visual-home .landing-overview .world-selector{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important;margin:0!important;width:100%!important} html body.visual-home .landing-overview .world-selector button{display:flex!important;flex-direction:column!important;align-items:stretch!important;min-width:0!important;min-height:0!important;padding:6px!important;gap:6px!important;border-radius:10px!important} html body.visual-home .landing-overview .world-selector button>img, html body.visual-home .landing-overview .product-detail-crop{width:100%!important;height:auto!important;min-height:0!important;aspect-ratio:16/9!important;object-fit:cover!important;border-radius:6px!important} html body.visual-home .landing-overview .world-card-copy{width:100%!important;text-align:center!important} html body.visual-home .landing-overview .world-selector strong{font-size:13px!important;line-height:1.2!important;margin:0!important} html body.visual-home .landing-overview .world-selector small, html body.visual-home .landing-overview .world-card-link{display:none!important} } /* Mobile hero photograph shares the heading area. */ @media(max-width:760px){ html body.visual-home .landing-overview>.hero-top{padding-bottom:16px!important;isolation:isolate!important} html body.visual-home .hero-top .hero-intro{z-index:2!important;position:relative!important} html body.visual-home .hero-top h1{width:78%!important;min-height:clamp(124px,34vw,180px)!important;box-sizing:border-box!important;margin-bottom:8px!important;padding-top:12px!important;text-shadow:0 2px 16px #242927,0 0 5px #242927} html body.visual-home .hero-top .hero-visual{position:absolute!important;inset:34px 0 auto auto!important;width:68%!important;height:clamp(160px,43vw,216px)!important;margin:0!important;z-index:0!important;pointer-events:none!important} html body.visual-home .hero-top .hero-visual img, html body.visual-home .hero-top[data-hero-world="spaces"] .hero-visual img, html body.visual-home .hero-top[data-hero-world="learning"] .hero-visual img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:78% center!important;-webkit-mask-image:linear-gradient(90deg,transparent,#000 46%,#000 94%,transparent),linear-gradient(180deg,transparent,#000 15%,#000 70%,transparent);mask-image:linear-gradient(90deg,transparent,#000 46%,#000 94%,transparent),linear-gradient(180deg,transparent,#000 15%,#000 70%,transparent);-webkit-mask-composite:source-in;mask-composite:intersect} html body.visual-home .hero-top[data-hero-world="spaces"] .hero-visual img{object-position:60% center!important} html body.visual-home .hero-top[data-hero-world="learning"] .hero-visual img{object-position:60% 30%!important} html body.visual-home .hero-top .hero-visual:after, html body.visual-home .hero-top[data-hero-world="spaces"] .hero-visual:after, html body.visual-home .hero-top[data-hero-world="learning"] .hero-visual:after{background:linear-gradient(90deg,#242927b8,transparent 75%)!important} html body.visual-home .hero-top .hero-aside{position:relative!important;background:#242927!important;box-shadow:0 -10px 18px #242927!important} html body.visual-home .hero-top .hero-actions{position:relative!important;background:#242927!important} } /* Keep the descriptive product heading within its text column. */ html body.visual-home .hero-top[data-hero-world="products"] h1{font-size:clamp(36px,4.3vw,64px)!important} @media(max-width:760px){html body.visual-home .hero-top[data-hero-world="products"] h1{font-size:clamp(26px,7.2vw,40px)!important}} /* Compact phone navigation keeps the configurator in view. */ @media(max-width:760px){ html body.visual-home .landing-overview{min-height:calc(100svh - 68px)!important;background:#242927!important;justify-content:flex-start!important;margin-bottom:0!important} html body.visual-home .landing-overview>.world-choice{background:#242927!important;margin-top:0!important;padding-top:12px!important} html body.visual-home .hero>.world-context{display:none!important;margin:0!important;padding:0!important} html body.visual-home #playground{margin-top:16px!important;height:auto!important;min-height:0!important} html body.visual-home>header .brand.signature img{width:50px!important;height:50px!important;max-height:50px!important} html body.visual-home .world-dock{padding:4px!important;gap:2px!important;box-shadow:0 3px 12px #0002!important} html body.visual-home .world-dock button{font-size:12px!important;min-height:44px!important;padding:8px 14px!important} html body.visual-home #playground #picker-title{font-size:19px!important;line-height:1.2!important;margin:0 0 10px!important} html body.visual-home #playground .project-choice-label{font-size:10px!important;margin:0 0 6px!important;letter-spacing:.08em!important} html body.visual-home #playground .product-picker .category-tabs{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:4px!important} html body.visual-home #playground .stage-top.product-picker .category-tabs button{display:flex!important;align-items:center!important;justify-content:center!important;padding:6px 2px!important;min-height:44px!important;margin:0!important;border-radius:8px!important;gap:0!important} html body.visual-home #playground .stage-top.product-picker .category-tabs button img{display:none!important} html body.visual-home #playground .product-picker .choice-copy{text-align:center!important} html body.visual-home #playground .product-picker .choice-copy strong{font-size:11px!important;line-height:1.2!important;overflow-wrap:anywhere} html body.visual-home #playground #category-demos{margin-top:10px!important;padding:0!important} html body.visual-home #playground #category-demo-label{font-size:12px!important;margin:0 0 6px!important} html body.visual-home #playground .demo-tabs{gap:4px!important} html body.visual-home #playground .demo-tabs button{min-height:66px!important;padding:5px!important;gap:3px!important;margin-bottom:0!important} html body.visual-home #playground .demo-tabs button img{width:44px!important;height:28px!important;object-fit:contain!important} html body.visual-home #playground .demo-tabs button strong{font-size:11px!important;line-height:1.15!important} html body.visual-home #playground #showroom .preview-copy{display:flex!important;flex-direction:column!important;width:100%!important;text-align:left!important;gap:0!important} html body.visual-home #playground #showroom .image-stage{order:-1!important;height:clamp(180px,32svh,270px)!important;margin:0!important;padding:0!important;flex:none!important} html body.visual-home #playground #showroom .preview-copy>.image-stage{margin-bottom:12px!important} html body.visual-home #playground #demo-heading{font-size:23px!important;line-height:1.15!important;margin:0 0 8px!important;order:1!important} html body.visual-home #playground #demo-copy{order:2!important} html body.visual-home #playground #launch{order:3!important;align-self:flex-start!important;width:auto!important;font-size:13px!important;min-height:44px!important;padding:10px 18px!important;margin:10px 0 0!important} html body.visual-home #playground .preview-copy>.micro{display:none!important} } /* Keep phone cards beside the hero content flow, not pinned to the screen bottom. */ @media(max-width:760px){ html body.visual-home>header{height:80px!important;min-height:80px!important} html body.visual-home>header .brand.signature{width:84px!important;height:64px!important;overflow:visible!important} html body.visual-home>header .brand.signature img{width:64px!important;height:64px!important;max-height:64px!important} html body.visual-home .landing-overview{min-height:calc(100svh - 80px)!important;justify-content:flex-start!important;gap:0!important} html body.visual-home .landing-overview>.hero-top{flex:0 0 auto!important;padding-bottom:8px!important} html body.visual-home .hero-top .hero-intro{margin-bottom:0!important} html body.visual-home .landing-overview>.world-choice{margin-top:0!important;padding-top:12px!important;padding-bottom:24px!important} } /* Category labels stay intact at phone widths, including translated names. */ @media(max-width:760px){ html body.visual-home #playground .stage-top.product-picker .category-tabs .choice-copy{width:100%!important;min-width:0!important;text-align:center!important} html body.visual-home #playground .stage-top.product-picker .category-tabs .choice-copy strong{display:block!important;font-size:12px!important;line-height:1.2!important;white-space:nowrap!important;word-break:normal!important;overflow-wrap:normal!important;hyphens:none!important;letter-spacing:0!important} } @media(max-width:480px){ html body.visual-home #playground .stage-top.product-picker .category-tabs{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important} html body.visual-home #playground .stage-top.product-picker .category-tabs button{min-height:44px!important;padding:8px!important} } /* Spread spare portrait height through the composition, with bounded spacing. */ @media(max-width:760px){ html body.visual-home .landing-overview{justify-content:flex-start!important} html body.visual-home .landing-overview>.hero-top{padding-top:clamp(20px,5svh,44px)!important;padding-bottom:clamp(12px,3svh,26px)!important} html body.visual-home .hero-top .hero-visual{top:clamp(58px,9svh,84px)!important} html body.visual-home .hero-top h1{min-height:clamp(156px,29svh,220px)!important;padding-top:18px!important} html body.visual-home .hero-top .hero-actions{margin-top:clamp(16px,3svh,26px)!important} html body.visual-home .landing-overview>.world-choice{padding-top:clamp(16px,3svh,28px)!important;padding-bottom:24px!important} } @media(max-width:760px) and (max-height:650px){ html body.visual-home .landing-overview>.hero-top{padding-top:16px!important;padding-bottom:8px!important} html body.visual-home .hero-top .hero-visual{top:40px!important} html body.visual-home .hero-top h1{min-height:140px!important} html body.visual-home .landing-overview>.world-choice{padding-top:12px!important} } /* Mobile reading order: heading, description, photograph, action. */ @media(max-width:760px){ html body.visual-home .landing-overview>.hero-top{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:0!important;padding:24px 16px 8px!important} html body.visual-home .hero-top .hero-intro{display:contents!important} html body.visual-home .hero-top .hero-kicker{order:0!important;margin-bottom:18px!important} html body.visual-home .hero-top h1{order:1!important;width:100%!important;min-height:0!important;padding-top:0!important;margin:0 0 16px!important;text-shadow:none!important} html body.visual-home .hero-top .hero-aside{order:2!important;box-shadow:none!important;margin:0!important} html body.visual-home .hero-top .hero-visual{order:3!important;position:relative!important;inset:auto!important;top:auto!important;width:100%!important;height:clamp(160px,26svh,240px)!important;margin:12px 0 8px!important;z-index:0!important} html body.visual-home .hero-top .hero-visual img, html body.visual-home .hero-top[data-hero-world="spaces"] .hero-visual img, html body.visual-home .hero-top[data-hero-world="learning"] .hero-visual img{-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent),linear-gradient(180deg,transparent,#000 12%,#000 80%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent),linear-gradient(180deg,transparent,#000 12%,#000 80%,transparent)} html body.visual-home .hero-top .hero-actions{order:4!important;margin:0!important} html body.visual-home .landing-overview>.world-choice{padding-top:16px!important} } /* Space and learning selectors share a clear mobile thumbnail/label layout. */ @media(max-width:760px){ html body.visual-home #playground .stage-top:not(.product-picker) .category-tabs{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;padding:0!important;align-items:stretch!important} html body.visual-home #playground .stage-top.space-picker .category-tabs{grid-template-columns:repeat(3,minmax(0,1fr))!important} html body.visual-home #playground .stage-top:not(.product-picker) .category-tabs button{display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;min-width:0!important;min-height:0!important;height:auto!important;margin:0!important;padding:7px!important;gap:7px!important;border-radius:10px!important;position:relative!important} html body.visual-home #playground .stage-top:not(.product-picker) .category-tabs button img{position:static!important;inset:auto!important;grid-area:auto!important;width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;aspect-ratio:16/9!important;object-fit:cover!important;border-radius:6px!important;margin:0!important;padding:0!important;transform:none!important} html body.visual-home #playground .stage-top:not(.product-picker) .category-tabs .choice-copy{position:static!important;inset:auto!important;grid-area:auto!important;display:block!important;width:100%!important;min-width:0!important;text-align:center!important;transform:none!important} html body.visual-home #playground .stage-top:not(.product-picker) .category-tabs .choice-copy strong{display:block!important;font-size:12px!important;line-height:1.25!important;white-space:normal!important;word-break:normal!important;overflow-wrap:normal!important;hyphens:none!important;letter-spacing:0!important;margin:0!important} html body.visual-home #playground .stage-top:not(.product-picker) .category-tabs .choice-copy small, html body.visual-home #playground .stage-top:not(.product-picker) .category-tabs .choice-arrow{display:none!important} html body.visual-home #playground .stage-top:not(.product-picker) .category-tabs button:after{display:none!important} } @media(max-width:360px){ html body.visual-home #playground .stage-top.space-picker .category-tabs{grid-template-columns:repeat(2,minmax(0,1fr))!important} } /* Immersive mobile composition inspired by the portrait reference. */ @media(max-width:760px){ html body.visual-home>header{height:72px!important;min-height:72px!important;padding:6px 20px!important;gap:12px!important;background:#242927!important} html body.visual-home>header .brand.signature{width:70px!important;height:60px!important} html body.visual-home>header .brand.signature img{width:60px!important;height:60px!important;max-height:60px!important} html body.visual-home #language-toggle{border:0!important;background:transparent!important;padding:8px 4px!important;min-height:44px!important} html body.visual-home>header .contact-link{border-bottom:0!important;font-size:12px!important;min-height:44px!important;display:flex!important;align-items:center!important} html body.visual-home .landing-overview{min-height:calc(100svh - 72px)!important;background:#242927!important} html body.visual-home .landing-overview>.hero-top{padding:24px 20px 0!important;overflow:hidden!important;background:#242927!important} html body.visual-home .hero-top .hero-kicker{font-size:9px!important;letter-spacing:1.1px!important;margin-bottom:12px!important} html body.visual-home .hero-top h1, html body.visual-home .hero-top[data-hero-world="products"] h1{font-size:clamp(32px,9vw,46px)!important;line-height:1.04!important;letter-spacing:-1.7px!important;margin-bottom:12px!important} html body.visual-home .hero-top .hero-aside p{font-size:14px!important;line-height:1.5!important;max-width:34ch!important} html body.visual-home .hero-top .hero-actions{order:3!important;margin:16px 0 0!important;z-index:2!important;background:transparent!important} html body.visual-home .hero-top .hero-try{min-height:44px!important;padding:11px 18px!important;font-size:14px!important;gap:24px!important} html body.visual-home .hero-top .hero-visual{order:4!important;width:calc(100% + 40px)!important;max-width:none!important;height:clamp(240px,39svh,380px)!important;align-self:center!important;margin:-18px -20px 0!important;position:relative!important;inset:auto!important} html body.visual-home .hero-top .hero-visual img, html body.visual-home .hero-top[data-hero-world="spaces"] .hero-visual img, html body.visual-home .hero-top[data-hero-world="learning"] .hero-visual img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:76% center!important;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 20%,#000 90%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 20%,#000 90%,transparent 100%)} html body.visual-home .hero-top[data-hero-world="spaces"] .hero-visual img{object-position:60% center!important} html body.visual-home .hero-top[data-hero-world="learning"] .hero-visual img{object-position:60% 35%!important} html body.visual-home .hero-top .hero-visual:after{background:none!important} html body.visual-home .landing-overview>.world-choice{padding:8px 20px 24px!important;margin:0!important;background:#242927!important;overflow:hidden!important} html body.visual-home .landing-overview>.world-choice h2{font-size:13px!important;padding:4px 0 12px!important;background:transparent!important} html body.visual-home .landing-overview .world-selector{display:flex!important;overflow-x:auto!important;scroll-snap-type:x mandatory!important;scrollbar-width:none!important;gap:8px!important;width:calc(100% + 20px)!important;padding:2px 20px 4px 0!important} html body.visual-home .landing-overview .world-selector::-webkit-scrollbar{display:none} html body.visual-home .landing-overview .world-selector button{flex:0 0 39%!important;scroll-snap-align:start!important;padding:6px!important;border-radius:12px!important;gap:7px!important;transform:none!important} html body.visual-home .landing-overview .world-selector button[aria-pressed="true"]{border:1px solid #aac5bc!important;background:#242927!important} html body.visual-home .landing-overview .world-card-copy{text-align:left!important;padding:0 4px 5px!important} html body.visual-home .landing-overview .world-selector strong{font-size:14px!important;line-height:1.2!important} html body.visual-home .landing-overview .world-selector small{display:block!important;font-size:10px!important;line-height:1.3!important;letter-spacing:0!important;margin-top:4px!important} html body.visual-home .landing-overview .world-selector button>img, html body.visual-home .landing-overview .product-detail-crop{aspect-ratio:16/10!important;border-radius:7px!important} } .category-line-icon{display:none} @media(max-width:760px){ html body.visual-home #playground .stage-top.product-picker{padding:20px 14px 14px!important;gap:10px!important} html body.visual-home #playground .product-picker #picker-title{font-size:22px!important;letter-spacing:-.6px!important;margin-bottom:4px!important} html body.visual-home #playground .stage-top.product-picker .category-tabs{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important} html body.visual-home #playground .stage-top.product-picker .category-tabs button{display:grid!important;grid-template-columns:24px minmax(0,1fr) 10px!important;min-height:54px!important;padding:10px!important;gap:8px!important;border:1px solid #e2e7e3!important;background:#f1f4f1!important;color:#263b33!important;border-radius:10px!important;box-shadow:none!important} html body.visual-home #playground .stage-top.product-picker .category-tabs button[aria-selected="true"]{background:#30453b!important;color:#fff!important;border-color:#30453b!important} html body.visual-home #playground .stage-top.product-picker .category-line-icon{display:block!important;grid-column:1!important;width:24px!important;height:24px!important} html body.visual-home #playground .category-line-icon svg{display:block;width:100%;height:100%} html body.visual-home #playground .stage-top.product-picker .category-tabs .choice-copy{grid-column:2!important;text-align:left!important} html body.visual-home #playground .stage-top.product-picker .category-tabs .choice-copy strong{font-size:12px!important;white-space:normal!important} html body.visual-home #playground .stage-top.product-picker .category-tabs .choice-arrow{display:block!important;grid-column:3!important;width:auto!important;height:auto!important;margin:0!important;padding:0!important;background:none!important;color:inherit!important;font-size:14px!important} html body.visual-home #playground .stage-top.product-picker .category-tabs button:after{display:none!important} html body.visual-home #playground #category-demos{margin-top:14px!important} html body.visual-home #playground #category-demo-label{font-size:15px!important;margin-bottom:10px!important} html body.visual-home #playground .demo-tabs button{border:1px solid #dce5df!important;border-radius:9px!important;background:#fff!important;gap:6px!important;padding:7px!important;min-height:92px!important} html body.visual-home #playground .demo-tabs button[aria-selected="true"]{background:#edf4ef!important;border-color:#8faf9f!important} html body.visual-home #playground .demo-tabs button img{width:100%!important;height:48px!important;object-fit:contain!important} html body.visual-home #playground .demo-tabs button strong{font-size:11px!important} html body.visual-home #playground #showroom{background:#edf3ef!important;padding:14px!important} html body.visual-home #playground #showroom .image-stage{height:auto!important;min-height:0!important;aspect-ratio:auto!important;margin-bottom:14px!important} html body.visual-home #playground #showroom .project-image{position:relative!important;width:100%!important;height:auto!important;max-height:none!important;object-fit:contain!important;border-radius:10px!important} html body.visual-home #playground #showroom .preview-copy{padding:8px 0!important} html body.visual-home #playground #demo-heading{font-size:28px!important;letter-spacing:-1px!important;margin-bottom:14px!important} } /* Fit the complete hero chooser and carry the reference layout into Spaces. */ @media(max-width:760px){ html body.visual-home .landing-overview>.hero-top{padding-top:18px!important} html body.visual-home .hero-top .hero-visual{height:clamp(170px,27svh,260px)!important} html body.visual-home .landing-overview>.world-choice{padding:6px 16px 20px!important;overflow:visible!important} html body.visual-home .landing-overview .world-selector{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;width:100%!important;overflow:visible!important;padding:0!important;gap:7px!important;scroll-snap-type:none!important} html body.visual-home .landing-overview .world-selector button{width:100%!important;min-width:0!important;flex:none!important;padding:6px!important} html body.visual-home .landing-overview .world-card-copy{padding:0 1px 3px!important} html body.visual-home .landing-overview .world-selector strong{font-size:13px!important} html body.visual-home .landing-overview .world-selector small{display:none!important} html body.visual-home #playground .stage-top.space-picker{display:flex!important;flex-direction:column!important;align-items:stretch!important;padding:18px 12px 14px!important;gap:10px!important} html body.visual-home #playground .space-picker #project-choice-label{order:0!important;margin:0!important;font-size:10px!important} html body.visual-home #playground .space-picker #picker-title{order:1!important;font-size:23px!important;letter-spacing:-.8px!important;line-height:1.12!important;margin:0 0 6px!important} html body.visual-home #playground .space-picker .category-tabs{order:2!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important} html body.visual-home #playground .stage-top.space-picker .category-tabs button{background:#f3f6f3!important;border:1px solid #dce5df!important;padding:5px!important;border-radius:10px!important;gap:7px!important;color:#24382e!important} html body.visual-home #playground .stage-top.space-picker .category-tabs button[aria-selected="true"]{background:#2c443b!important;color:#fff!important;border-color:#9cc9bd!important;box-shadow:0 3px 0 #b9ddd1!important} html body.visual-home #playground .stage-top.space-picker .category-tabs button img{aspect-ratio:16/10!important;border-radius:7px!important} html body.visual-home #playground .stage-top.space-picker .category-tabs .choice-copy{text-align:left!important;padding:0 3px 5px!important} html body.visual-home #playground .stage-top.space-picker .category-tabs .choice-copy strong{font-size:11px!important;line-height:1.25!important} html body.visual-home #playground:has(.space-picker) #showroom{padding:12px!important;gap:16px!important;background:#edf3ef!important} html body.visual-home #playground:has(.space-picker) #showroom .image-stage{width:100%!important;height:auto!important;min-height:0!important;padding:0!important} html body.visual-home #playground:has(.space-picker) #showroom .project-image, html body.visual-home #playground:has(.space-picker) #showroom .project-film{width:100%!important;height:auto!important;max-height:none!important;object-fit:contain!important;border-radius:12px!important} } /* Learning uses the same visual hierarchy as the Spaces reference. */ @media(max-width:760px){ html body.visual-home #playground .stage-top.learning-picker{display:flex!important;flex-direction:column!important;align-items:stretch!important;padding:18px 12px 14px!important;gap:10px!important} html body.visual-home #playground .learning-picker #project-choice-label{order:0!important;margin:0!important;font-size:10px!important} html body.visual-home #playground .learning-picker #picker-title{order:1!important;font-size:23px!important;letter-spacing:-.8px!important;line-height:1.12!important;margin:0 0 6px!important} html body.visual-home #playground .learning-picker .category-tabs{order:2!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important} html body.visual-home #playground .stage-top.learning-picker .category-tabs button{background:#f3f6f3!important;border:1px solid #dce5df!important;padding:6px!important;border-radius:10px!important;gap:8px!important;color:#24382e!important} html body.visual-home #playground .stage-top.learning-picker .category-tabs button[aria-selected="true"]{background:#2c443b!important;color:#fff!important;border-color:#9cc9bd!important;box-shadow:0 3px 0 #b9ddd1!important} html body.visual-home #playground .stage-top.learning-picker .category-tabs button img{aspect-ratio:16/9!important;border-radius:7px!important} html body.visual-home #playground .stage-top.learning-picker .category-tabs .choice-copy{text-align:left!important;padding:0 4px 6px!important} html body.visual-home #playground .stage-top.learning-picker .category-tabs .choice-copy strong{font-size:14px!important;line-height:1.25!important} html body.visual-home #playground:has(.learning-picker) #showroom{padding:12px!important;gap:16px!important;background:#edf3ef!important} html body.visual-home #playground:has(.learning-picker) #showroom .image-stage{width:100%!important;height:auto!important;min-height:0!important;padding:0!important} html body.visual-home #playground:has(.learning-picker) #showroom .project-image, html body.visual-home #playground:has(.learning-picker) #showroom .project-film{width:100%!important;height:auto!important;max-height:none!important;object-fit:contain!important;border-radius:12px!important} } /* Reference refinement: quiet surfaces, editorial headings and clear card actions. */ @media(max-width:760px){ html body.visual-home #playground{background:#f5f7f4!important;border-color:#dbe2dc!important;border-radius:20px!important} html body.visual-home #playground .stage-top{background:#f5f7f4!important} html body.visual-home #playground #showroom{background:#f5f7f4!important;padding:14px!important;gap:20px!important} html body.visual-home #playground #showroom .preview-copy{padding:4px 4px 18px!important;text-align:left!important} html body.visual-home #playground #demo-heading{font-size:clamp(28px,8vw,38px)!important;font-weight:500!important;line-height:1.08!important;letter-spacing:-1.4px!important;margin:0 0 16px!important} html body.visual-home #playground #demo-heading .heading-accent{color:#8b9e91!important} html body.visual-home #playground #demo-copy{font-size:14px!important;line-height:1.55!important;color:#65736b!important} html body.visual-home #playground #launch{width:100%!important;align-self:stretch!important;min-height:52px!important;padding:8px 10px 8px 18px!important;margin-top:22px!important;gap:12px!important;background:#20352d!important;border-radius:32px!important;text-align:left!important} html body.visual-home #playground #launch>span{display:grid!important;place-items:center!important;width:36px!important;height:36px!important;flex:0 0 36px!important;border-radius:50%!important;background:#b1d2c6!important;color:#20352d!important;font-size:19px!important} html body.visual-home #playground .stage-top:not(.product-picker) .category-tabs button{display:grid!important;grid-template-columns:minmax(0,1fr) 26px!important;grid-template-rows:auto 1fr!important;gap:8px 3px!important;padding:6px!important;border-radius:12px!important} html body.visual-home #playground .stage-top:not(.product-picker) .category-tabs button img{grid-column:1/-1!important;grid-row:1!important;aspect-ratio:16/10!important} html body.visual-home #playground .stage-top:not(.product-picker) .category-tabs .choice-copy{grid-column:1!important;grid-row:2!important;text-align:left!important;padding:0 0 7px 3px!important} html body.visual-home #playground .stage-top:not(.product-picker) .category-tabs .choice-copy strong{font-size:12px!important;line-height:1.2!important} html body.visual-home #playground .stage-top:not(.product-picker) .category-tabs .choice-copy small{display:block!important;color:inherit!important;opacity:.72!important;font-size:10px!important;line-height:1.35!important;margin-top:5px!important} html body.visual-home #playground .stage-top:not(.product-picker) .category-tabs .choice-arrow{display:grid!important;place-items:center!important;position:static!important;grid-column:2!important;grid-row:2!important;align-self:center!important;width:24px!important;height:24px!important;padding:0!important;margin:0!important;border-radius:50%!important;background:#e4ebe5!important;color:#263d32!important;font-size:14px!important} html body.visual-home #playground .stage-top:not(.product-picker) .category-tabs button[aria-selected="true"]{background:#263d34!important;border-color:#a9d3c5!important;box-shadow:0 2px 8px #92c9b74d!important;color:#fff!important} html body.visual-home #playground .stage-top:not(.product-picker) .category-tabs button[aria-selected="true"] .choice-arrow{background:#b8ded0!important} html body.visual-home .landing-overview .world-selector button[aria-pressed="true"]{box-shadow:0 0 0 1px #9bc9bf!important} html body.visual-home .landing-overview .world-selector button{border-radius:12px!important} html body.visual-home .hero-top .hero-visual{margin-top:-28px!important;height:clamp(180px,29svh,280px)!important} html body.visual-home .hero-top .hero-visual:after{background:linear-gradient(180deg,#24292726,transparent 28%)!important} } @media(max-width:390px){ html body.visual-home #playground .stage-top.space-picker .category-tabs button{grid-template-columns:minmax(0,1fr)!important} html body.visual-home #playground .stage-top.space-picker .category-tabs .choice-arrow{display:none!important} } /* Match the portrait reference's large tablet and generously sized swipe cards. */ @media(max-width:760px){ html body.visual-home .hero-top .hero-visual{height:clamp(300px,78vw,560px)!important;margin-top:-20px!important;overflow:hidden!important} html body.visual-home .hero-top .hero-visual img, html body.visual-home .hero-top[data-hero-world="spaces"] .hero-visual img, html body.visual-home .hero-top[data-hero-world="learning"] .hero-visual img{object-fit:cover!important;object-position:76% center!important;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 13%,#000 96%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 13%,#000 96%,transparent 100%)} html body.visual-home .hero-top[data-hero-world="products"] .hero-visual img{transform:scale(1.32)!important;transform-origin:76% 62%!important} html body.visual-home .landing-overview>.world-choice{padding:12px 16px 24px!important;overflow:hidden!important} html body.visual-home .landing-overview>.world-choice h2{padding:0 0 14px!important;font-size:14px!important} html body.visual-home .landing-overview .world-selector{display:flex!important;width:100%!important;overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x mandatory!important;scrollbar-width:none!important;gap:10px!important;padding:2px 2px 8px!important;align-items:stretch!important} html body.visual-home .landing-overview .world-selector button{position:relative!important;flex:0 0 42%!important;width:auto!important;min-width:0!important;scroll-snap-align:start!important;display:flex!important;flex-direction:column!important;gap:10px!important;padding:7px!important;border-radius:12px!important;border:1px solid #d9e2dd!important} html body.visual-home .landing-overview .world-selector button[aria-pressed="true"]{border:1px solid #9bc9bf!important;box-shadow:0 0 0 1px #9bc9bf!important;background:#1b2c25!important;flex-basis:48%!important} html body.visual-home .landing-overview .world-selector button>img, html body.visual-home .landing-overview .product-detail-crop{width:100%!important;aspect-ratio:16/9!important;height:auto!important;border-radius:7px!important;overflow:hidden!important} html body.visual-home .landing-overview .product-detail-crop{position:relative!important;background:#24362b!important} html body.visual-home .landing-overview .product-detail-crop img{position:absolute!important;width:240%!important;max-width:none!important;height:auto!important;left:-29%!important;top:-62%!important} html body.visual-home .landing-overview .world-card-copy{text-align:left!important;padding:0 3px 5px!important} html body.visual-home .landing-overview .world-selector strong{font-size:15px!important;font-weight:600!important;line-height:1.2!important} html body.visual-home .landing-overview .world-selector small{display:block!important;font-size:10px!important;line-height:1.35!important;margin-top:4px!important;color:inherit!important;opacity:.75!important} html body.visual-home .landing-overview .world-selector button[aria-pressed="true"] .world-card-copy{padding-right:32px!important} html body.visual-home .landing-overview .world-selector button[aria-pressed="true"]:after{content:'→'!important;display:grid!important;place-items:center!important;position:absolute!important;right:8px!important;bottom:12px!important;width:28px!important;height:28px!important;border-radius:50%!important;background:#a9cdc1!important;color:#1b3329!important;font-size:18px!important;transform:none!important} } /* Product chooser: compact single-row controls and landscape demo thumbnails. */ @media(max-width:760px){ html body.visual-home #playground .stage-top.product-picker{display:flex!important;flex-direction:column!important;align-items:stretch!important;padding:22px 14px 10px!important;gap:0!important} html body.visual-home #playground .stage-top.product-picker #picker-title{order:0!important;font-size:9px!important;font-weight:600!important;line-height:1.4!important;letter-spacing:1.2px!important;text-transform:uppercase!important;margin:0 0 6px!important} html body.visual-home #playground .stage-top.product-picker #project-choice-label{order:1!important;font-size:clamp(24px,6.5vw,34px)!important;font-weight:600!important;line-height:1.1!important;letter-spacing:-1px!important;text-transform:none!important;color:#202e27!important;margin:0 0 22px!important} html body.visual-home #playground .stage-top.product-picker .category-tabs{order:2!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;margin:0!important;padding:0!important} html body.visual-home #playground .stage-top.product-picker .category-tabs button{grid-template-columns:22px minmax(0,1fr) 8px!important;grid-template-rows:1fr!important;grid-auto-flow:column!important;align-items:center!important;align-content:center!important;height:48px!important;min-height:48px!important;max-height:48px!important;padding:10px 12px!important;gap:9px!important;border-radius:9px!important;aspect-ratio:auto!important} html body.visual-home #playground .stage-top.product-picker .category-tabs button>img{display:none!important} html body.visual-home #playground .stage-top.product-picker .category-tabs .category-line-icon{grid-area:1 / 1!important;width:22px!important;height:22px!important;position:static!important;margin:0!important;align-self:center!important} html body.visual-home #playground .stage-top.product-picker .category-tabs .choice-copy{grid-area:1 / 2!important;position:static!important;width:auto!important;margin:0!important;padding:0!important;align-self:center!important} html body.visual-home #playground .stage-top.product-picker .category-tabs .choice-copy strong{font-size:12px!important;font-weight:600!important;line-height:1.2!important;white-space:nowrap!important} html body.visual-home #playground .stage-top.product-picker .category-tabs .choice-copy small{display:none!important} html body.visual-home #playground .stage-top.product-picker .category-tabs .choice-arrow{grid-area:1 / 3!important;position:static!important;align-self:center!important;justify-self:end!important;font-size:0!important;transform:none!important;width:6px!important;height:6px!important;border-top:1px solid currentColor!important;border-right:1px solid currentColor!important;border-radius:0!important;rotate:45deg!important} html body.visual-home #playground .stage-top.product-picker #category-demos{order:3!important;background:transparent!important;margin:20px 0 0!important;padding:0!important} html body.visual-home #playground .stage-top.product-picker #category-demo-label{font-size:15px!important;font-weight:600!important;line-height:1.3!important;margin:0 0 10px!important} html body.visual-home #playground .stage-top.product-picker .demo-tabs{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:5px!important;padding:0!important;background:transparent!important} html body.visual-home #playground .stage-top.product-picker .demo-tabs button{display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;height:auto!important;min-height:0!important;padding:7px 5px!important;gap:6px!important;border-radius:8px!important} html body.visual-home #playground .stage-top.product-picker .demo-tabs button img{position:static!important;width:100%!important;height:auto!important;aspect-ratio:16/10!important;object-fit:contain!important;margin:0!important;border-radius:5px!important;max-height:72px!important} html body.visual-home #playground .stage-top.product-picker .demo-tabs .choice-copy{width:100%!important;padding:0!important;margin:0!important;text-align:center!important} html body.visual-home #playground .stage-top.product-picker .demo-tabs button strong{font-size:10px!important;line-height:1.25!important;font-weight:600!important;white-space:normal!important;word-break:normal!important} html body.visual-home #playground:has(.product-picker) #showroom{padding:8px!important;gap:16px!important} html body.visual-home #playground:has(.product-picker) #showroom .image-stage{margin:0!important;width:100%!important} } /* Mobile hero: blend on the unscaled container, with a bounded composition. */ @media(max-width:760px){ html body.visual-home .hero{padding:0!important;margin:0!important;width:100%!important;max-width:none!important;overflow:visible!important} html body.visual-home .landing-overview{padding:0!important;margin:0!important;width:100%!important;max-width:none!important;min-height:0!important;height:auto!important;overflow:visible!important} html body.visual-home>header{height:62px!important;min-height:62px!important;padding:4px 18px!important} html body.visual-home>header .brand.signature{height:54px!important} html body.visual-home>header .brand.signature img{height:54px!important;width:54px!important;max-height:54px!important} html body.visual-home .landing-overview>.hero-top{padding:20px 18px 0!important;width:100%!important;margin:0!important;min-height:0!important;height:auto!important;gap:0!important;box-sizing:border-box!important;isolation:isolate!important} html body.visual-home .hero-top .hero-kicker{font-size:8px!important;line-height:1.4!important;letter-spacing:1px!important;margin:0 0 10px!important} html body.visual-home .hero-top h1, html body.visual-home .hero-top[data-hero-world="products"] h1{font-size:clamp(30px,8.3vw,40px)!important;line-height:1.04!important;letter-spacing:-1.3px!important;margin:0 0 12px!important;min-height:0!important} html body.visual-home .hero-top .hero-aside{padding:0!important;background:transparent!important;max-width:31ch!important;z-index:2!important} html body.visual-home .hero-top .hero-aside p{font-size:13px!important;line-height:1.45!important;margin:0!important;background:transparent!important} html body.visual-home .hero-top .hero-actions{margin:12px 0 0!important;padding:0!important} html body.visual-home .hero-top .hero-try{min-height:40px!important;height:40px!important;font-size:13px!important;padding:9px 16px!important;gap:20px!important} html body.visual-home .hero-top .hero-visual{width:calc(100% + 36px)!important;height:clamp(230px,calc(100svh - 450px),420px)!important;min-height:0!important;margin:-46px -18px 0!important;flex:none!important;overflow:hidden!important;z-index:0!important;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 24%,#000 95%,transparent 100%)!important;mask-image:linear-gradient(to bottom,transparent 0%,#000 24%,#000 95%,transparent 100%)!important} html body.visual-home .hero-top .hero-visual img, html body.visual-home .hero-top[data-hero-world="products"] .hero-visual img, html body.visual-home .hero-top[data-hero-world="spaces"] .hero-visual img, html body.visual-home .hero-top[data-hero-world="learning"] .hero-visual img{-webkit-mask-image:none!important;mask-image:none!important;object-fit:cover!important;transform:scale(1.08)!important;transform-origin:76% 60%!important} html body.visual-home .hero-top .hero-visual:after{position:absolute!important;inset:0!important;content:''!important;pointer-events:none!important;background:linear-gradient(to bottom,#242927 0%,#24292780 15%,transparent 42%)!important} html body.visual-home .landing-overview>.world-choice{position:relative!important;margin:0!important;padding:6px 18px 18px!important;height:auto!important;min-height:0!important;overflow:visible!important;flex:none!important} html body.visual-home .landing-overview>.world-choice h2{font-size:12px!important;padding:0 0 10px!important;margin:0!important} html body.visual-home .landing-overview .world-selector{margin:0!important;padding:2px 2px 6px!important;height:auto!important;max-height:none!important;gap:8px!important;align-items:stretch!important} html body.visual-home .landing-overview .world-selector button{min-height:0!important;height:auto!important;padding:6px!important;gap:6px!important} html body.visual-home .landing-overview .world-selector strong{font-size:13px!important;margin:0!important} html body.visual-home .landing-overview .world-selector small{font-size:9px!important;margin-top:3px!important} html body.visual-home .landing-overview .world-selector button[aria-pressed="true"]:after{width:24px!important;height:24px!important;bottom:10px!important;font-size:16px!important} } .technology-cue{position:absolute;top:12px;left:12px;display:flex;align-items:center;gap:3px;background:#20352dde;color:white;border:1px solid #ffffff60;border-radius:20px;padding:3px 6px;pointer-events:none;font-size:9px;line-height:1} .technology-cue svg{width:16px;height:16px} @media(max-width:760px){ html body.visual-home #playground .stage-top.space-picker{padding:20px 10px 14px!important;gap:0!important} html body.visual-home #playground .stage-top.space-picker #project-choice-label{color:#698078!important;font-size:9px!important;letter-spacing:1px!important;margin:0 4px 6px!important} html body.visual-home #playground .stage-top.space-picker #picker-title{color:#1e3029!important;opacity:1!important;font-size:clamp(22px,6vw,30px)!important;line-height:1.1!important;font-weight:500!important;letter-spacing:-1px!important;margin:0 4px 18px!important} html body.visual-home #playground .stage-top.space-picker .category-tabs{gap:6px!important;margin:0!important;padding:0!important} html body.visual-home #playground .stage-top.space-picker .category-tabs button{position:relative!important;display:grid!important;grid-template-columns:minmax(0,1fr) 20px!important;grid-template-rows:auto 1fr!important;min-height:0!important;height:auto!important;padding:5px!important;gap:7px 2px!important;background:#f3f6f3!important;border:1px solid #dce5df!important;border-radius:11px!important;color:#20352d!important;overflow:visible!important} html body.visual-home #playground .stage-top.space-picker .category-tabs button[aria-selected="true"]{background:#263f36!important;color:#fff!important;border-color:#9ccabd!important;box-shadow:0 3px 0 #bbdfd3,0 0 8px #8fcbb750!important} html body.visual-home #playground .stage-top.space-picker .category-tabs button>img{grid-area:1 / 1 / 2 / -1!important;width:100%!important;aspect-ratio:16/10!important;height:auto!important;object-fit:cover!important;border-radius:7px!important;margin:0!important} html body.visual-home #playground .stage-top.space-picker .category-tabs .choice-copy{grid-area:2 / 1!important;padding:0 0 5px 2px!important;align-self:start!important;text-align:left!important} html body.visual-home #playground .stage-top.space-picker .category-tabs .choice-copy strong{font-size:10px!important;line-height:1.2!important;font-weight:500!important;color:inherit!important} html body.visual-home #playground .stage-top.space-picker .category-tabs .choice-copy small{font-size:8px!important;line-height:1.3!important;margin-top:4px!important;color:inherit!important;opacity:.75!important} html body.visual-home #playground .stage-top.space-picker .category-tabs .choice-arrow{display:grid!important;position:static!important;grid-area:2 / 2!important;align-self:center!important;place-items:center!important;width:20px!important;height:20px!important;border-radius:50%!important;background:#e5ece7!important;color:#263f36!important;font-size:14px!important;padding:0!important;margin:0!important} html body.visual-home #playground .stage-top.space-picker .category-tabs button[aria-selected="true"] .choice-arrow{background:#e4f4ed!important} html body.visual-home #playground .stage-top.space-picker .technology-cue{top:9px!important;left:9px!important;font-size:7px!important;padding:2px 4px!important;gap:2px!important} html body.visual-home #playground .stage-top.space-picker .technology-cue svg{width:12px!important;height:12px!important} html body.visual-home #playground:has(.space-picker) #showroom{padding:8px!important;gap:20px!important} html body.visual-home #playground:has(.space-picker) #showroom .image-stage{margin:0!important;padding:0!important;width:100%!important;aspect-ratio:4/3!important;overflow:hidden!important;border-radius:12px!important} html body.visual-home #playground:has(.space-picker) #showroom .project-film, html body.visual-home #playground:has(.space-picker) #showroom .project-image{width:100%!important;height:100%!important;aspect-ratio:4/3!important;object-fit:cover!important;object-position:center!important;border-radius:12px!important} html body.visual-home #playground:has(.space-picker) #showroom .preview-copy{padding:0 8px 18px!important;margin:0!important;gap:0!important} html body.visual-home #playground:has(.space-picker) #demo-heading{font-size:clamp(26px,7.4vw,36px)!important;margin:0 0 14px!important} html body.visual-home #playground:has(.space-picker) #demo-copy{font-size:13px!important;line-height:1.5!important;margin:0!important} } .hero-swipe-controls{display:none} @media(max-width:760px){ html body.visual-home .landing-overview>.world-choice{padding-bottom:24px!important;position:relative!important} html body.visual-home .hero-swipe-controls{display:flex!important;position:absolute!important;right:18px!important;top:0!important;align-items:center!important;gap:5px!important;color:#a8bcb3!important;font-size:8px!important} html body.visual-home .hero-swipe-controls button{display:grid;place-items:center;width:28px;height:28px;border:0;background:transparent;color:inherit;font-size:17px;padding:0} html body.visual-home .landing-overview .world-selector{display:flex!important;overflow-x:auto!important;overflow-y:hidden!important;max-height:none!important;min-height:0!important;height:auto!important;gap:8px!important;padding:3px 2px 5px!important;scroll-padding:2px!important} html body.visual-home .landing-overview .world-selector button{display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;flex:0 0 36%!important;width:auto!important;height:auto!important;min-height:0!important;max-height:none!important;aspect-ratio:auto!important;padding:6px!important;gap:7px!important;border-radius:11px!important;overflow:hidden!important;position:relative!important} html body.visual-home .landing-overview .world-selector button[aria-pressed="true"]{flex-basis:43%!important} html body.visual-home .landing-overview .world-selector button>img, html body.visual-home .landing-overview .world-selector button>.product-detail-crop{display:block!important;position:relative!important;inset:auto!important;flex:none!important;width:100%!important;min-width:0!important;height:auto!important;min-height:0!important;max-height:none!important;aspect-ratio:16/9!important;padding:0!important;margin:0!important;border-radius:6px!important;object-fit:cover!important;overflow:hidden!important;transform:none!important} html body.visual-home .landing-overview .world-selector button>.product-detail-crop{background:#f7f8f5!important} html body.visual-home .landing-overview .world-selector .product-detail-crop img{display:block!important;position:absolute!important;inset:0!important;width:100%!important;max-width:100%!important;height:100%!important;max-height:100%!important;object-fit:contain!important;object-position:center!important;transform:none!important;margin:0!important;padding:0!important;aspect-ratio:auto!important} html body.visual-home .landing-overview .world-selector .world-card-copy{display:block!important;position:static!important;inset:auto!important;width:100%!important;height:auto!important;min-height:32px!important;padding:0 2px 3px!important;flex:none!important;box-sizing:border-box!important} html body.visual-home .landing-overview .world-selector button[aria-pressed="true"] .world-card-copy{padding-right:28px!important} html body.visual-home .landing-overview .world-selector strong{display:block!important;font-size:12px!important;line-height:1.2!important;letter-spacing:0!important;margin:0!important} html body.visual-home .landing-overview .world-selector small{display:block!important;font-size:8px!important;line-height:1.3!important;letter-spacing:0!important;margin:3px 0 0!important} html body.visual-home .landing-overview .world-selector .world-card-link{display:none!important} html body.visual-home .landing-overview .world-selector button[aria-pressed="true"]:after{inset:auto 7px 10px auto!important;position:absolute!important;transform:none!important;width:24px!important;height:24px!important;margin:0!important} } /* All three mobile world tabs must be visible without horizontal scrolling. */ @media(max-width:760px){ html body.visual-home .landing-overview .hero-swipe-controls{display:none!important} html body.visual-home .landing-overview .world-selector{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;width:100%!important;max-width:100%!important;box-sizing:border-box!important;overflow:visible!important;scroll-snap-type:none!important;gap:7px!important;padding:2px!important} html body.visual-home .landing-overview .world-selector button, html body.visual-home .landing-overview .world-selector button[aria-pressed="true"]{width:100%!important;min-width:0!important;max-width:100%!important;flex:none!important;box-sizing:border-box!important;padding:6px!important} html body.visual-home .landing-overview .world-selector .world-card-copy, html body.visual-home .landing-overview .world-selector button[aria-pressed="true"] .world-card-copy{width:100%!important;padding:0 1px 3px!important;min-width:0!important} html body.visual-home .landing-overview .world-selector button[aria-pressed="true"]:after{display:none!important} html body.visual-home .landing-overview .world-selector strong{font-size:clamp(10px,3vw,14px)!important;white-space:nowrap!important;letter-spacing:-.2px!important} html body.visual-home .landing-overview .world-selector small{font-size:8px!important;white-space:normal!important;overflow-wrap:normal!important;line-height:1.3!important} } /* Learning reference: landscape interface preview and compact paired cards. */ @media(max-width:760px){ html body.visual-home #playground .stage-top.learning-picker{padding:20px 12px 14px!important;gap:0!important} html body.visual-home #playground .stage-top.learning-picker #project-choice-label{font-size:9px!important;letter-spacing:1px!important;color:#698078!important;margin:0 0 6px!important} html body.visual-home #playground .stage-top.learning-picker #picker-title{color:#20312a!important;font-size:clamp(22px,5.8vw,30px)!important;font-weight:500!important;line-height:1.12!important;letter-spacing:-.9px!important;margin:0 0 18px!important} html body.visual-home #playground .stage-top.learning-picker .category-tabs{gap:8px!important;margin:0!important} html body.visual-home #playground .stage-top.learning-picker .category-tabs button{display:grid!important;grid-template-columns:minmax(0,1fr) 24px!important;grid-template-rows:auto 1fr!important;padding:6px!important;gap:8px 3px!important;border-radius:11px!important;height:auto!important;min-height:0!important;background:#f4f7f3!important;color:#20352d!important} html body.visual-home #playground .stage-top.learning-picker .category-tabs button[aria-selected="true"]{background:#294238!important;color:#fff!important;border:1px solid #acd6c5!important;box-shadow:0 0 8px #91c9b966!important} html body.visual-home #playground .stage-top.learning-picker .category-tabs button>img{width:100%!important;height:auto!important;aspect-ratio:16/8!important;object-fit:cover!important;object-position:center!important;border-radius:7px!important} html body.visual-home #playground .stage-top.learning-picker .category-tabs .choice-copy{padding:0 2px 5px!important;color:inherit!important} html body.visual-home #playground .stage-top.learning-picker .category-tabs .choice-copy strong{font-size:12px!important;font-weight:500!important;line-height:1.2!important;color:inherit!important} html body.visual-home #playground .stage-top.learning-picker .category-tabs .choice-copy small{font-size:9px!important;line-height:1.3!important;opacity:.8!important;color:inherit!important;margin-top:4px!important} html body.visual-home #playground .stage-top.learning-picker .category-tabs .choice-arrow{position:static!important;align-self:center!important;width:24px!important;height:24px!important;margin:0!important} html body.visual-home #playground:has(.learning-picker) #showroom{padding:8px!important;gap:18px!important} html body.visual-home #playground:has(.learning-picker) #showroom .image-stage{width:100%!important;height:auto!important;min-height:0!important;aspect-ratio:auto!important;margin:0!important;padding:0!important} html body.visual-home #playground:has(.learning-picker) #showroom .project-image{width:100%!important;height:auto!important;max-height:none!important;object-fit:contain!important;border-radius:12px!important} html body.visual-home #playground:has(.learning-picker) #showroom .preview-copy{padding:0 8px 18px!important;margin:0!important;gap:0!important} html body.visual-home #playground:has(.learning-picker) #demo-heading{font-size:clamp(27px,7.3vw,36px)!important;font-weight:500!important;line-height:1.08!important;margin:0 0 12px!important} html body.visual-home #playground:has(.learning-picker) #demo-copy{font-size:13px!important;line-height:1.5!important;margin:0!important} } /* Mobile navigation belongs below the content, clear of headings and privacy. */ @media(max-width:760px){ html{scroll-padding-bottom:80px!important} html body.visual-home{padding-bottom:calc(76px + env(safe-area-inset-bottom))!important} html body.visual-home .world-dock:not([hidden]){position:fixed!important;top:auto!important;bottom:max(8px,env(safe-area-inset-bottom))!important;left:56px!important;right:8px!important;transform:none!important;width:auto!important;max-width:none!important;box-sizing:border-box!important;display:flex!important;gap:2px!important;padding:4px!important;border-radius:28px!important;box-shadow:0 3px 14px #0002!important} html body.visual-home .world-dock button{flex:1!important;min-width:0!important;min-height:44px!important;padding:8px 5px!important;font-size:12px!important;line-height:1.2!important} html body.visual-home #playground{scroll-margin-top:16px!important;scroll-margin-bottom:80px!important} html body.visual-home .contact-chat-dock{bottom:calc(72px + env(safe-area-inset-bottom))!important} html body.visual-home:has(.project-overlay[open]) .world-dock, html body.visual-home:has(.experience.expanded) .world-dock{display:none!important} } /* Scene-level navigation cues sit on the thumbnail rather than its caption. */ html body.visual-home #playground .space-picker .category-tabs button .thumbnail-interaction{position:absolute!important;left:5px!important;right:5px!important;top:5px!important;aspect-ratio:16/10!important;pointer-events:none!important;overflow:hidden!important;border-radius:7px!important;display:block!important} .thumbnail-interaction>svg{width:100%;height:100%;filter:drop-shadow(0 0 3px #0e9d75)} .scene-hotspot{position:absolute;width:16%;height:7%;border:2px solid #dbfff1;border-radius:50%;background:#8fffdc55;box-shadow:0 0 7px #89ffd5} .scene-hotspot.one{left:38%;top:68%}.scene-hotspot.two{left:68%;top:52%;width:10%;height:5%} .scene-materials{position:absolute;right:5%;bottom:7%;display:flex;gap:3px;padding:3px;background:#182d29bb;border:1px solid #ffffff80;border-radius:5px} .scene-materials i{width:11px;height:11px;border-radius:50%;background:#dfd6bf;border:1px solid white}.scene-materials i:nth-child(2){background:#a08054}.scene-materials i:nth-child(3){background:#485b4b} /* Preserve the material strip and make hero navigation explicit. */ html body.visual-home .hero-top[data-hero-world="spaces"] .hero-visual img{transform:none!important;object-fit:cover!important;object-position:center bottom!important;mask-image:none!important;-webkit-mask-image:none!important} html body.visual-home .hero-top[data-hero-world="spaces"] .hero-visual{mask-image:linear-gradient(to bottom,transparent,#000 24%)!important;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 24%)!important} html body.visual-home .landing-overview{touch-action:pan-y pinch-zoom} html body.visual-home .landing-overview>.world-choice{position:relative!important} html body.visual-home .landing-overview .hero-swipe-controls{display:flex!important;position:static!important;justify-content:flex-end!important;align-items:center!important;gap:6px!important;margin:-4px 0 8px!important;color:#b7d0c6!important} html body.visual-home .hero-swipe-controls>span{font-size:10px!important} html body.visual-home .hero-swipe-controls button{display:grid!important;place-items:center!important;width:44px!important;height:44px!important;min-width:44px!important;padding:0!important;border:1px solid #9ec4b866!important;border-radius:50%!important;background:#ffffff08!important;color:inherit!important;font-size:22px!important;cursor:pointer} html body.visual-home .hero-swipe-controls button:focus-visible{outline:2px solid #a1d3c4;outline-offset:3px} @media(max-width:760px){ html body.visual-home .hero-top[data-hero-world="spaces"] .hero-visual{height:auto!important;min-height:0!important;aspect-ratio:auto!important;padding-bottom:10px!important} html body.visual-home .hero-top[data-hero-world="spaces"] .hero-visual img{height:auto!important;max-height:none!important;aspect-ratio:auto!important;width:100%!important;display:block!important} html body.visual-home .landing-overview .world-selector{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;overflow:visible!important} html body.visual-home .landing-overview .world-selector button{width:100%!important;min-width:0!important} } /* Side arrows stay outside the image mask. Compact Spaces preserves its full frame. */ html body.visual-home .landing-overview .hero-top{position:relative!important} html body.visual-home .landing-overview .hero-top>.hero-swipe-controls{position:absolute!important;left:auto!important;right:12px!important;top:50%!important;bottom:auto!important;width:calc(62% - 24px)!important;transform:translateY(-50%)!important;justify-content:space-between!important;pointer-events:none!important;margin:0!important;z-index:5!important} html body.visual-home .landing-overview .hero-top>.hero-swipe-controls>span{display:none!important} html body.visual-home .landing-overview .hero-top>.hero-swipe-controls button{pointer-events:auto!important;background:#20352dd9!important;color:#e7f5ef!important;border-color:#d5eee480!important;box-shadow:0 2px 8px #0003!important} @media(max-width:760px){ html body.visual-home .hero-top[data-hero-world="spaces"] .hero-visual{height:clamp(230px,calc(100svh - 450px),360px)!important;min-height:0!important;padding:0!important;background:#242927!important} html body.visual-home .hero-top[data-hero-world="spaces"] .hero-visual img{height:100%!important;width:100%!important;object-fit:cover!important;object-position:center bottom!important} html body.visual-home .landing-overview .hero-top>.hero-swipe-controls{left:10px!important;right:10px!important;top:auto!important;bottom:clamp(95px,calc((100svh - 450px)/2 - 22px),158px)!important;width:auto!important;transform:none!important} html body.visual-home .landing-overview>.world-choice{padding-top:10px!important} } /* Consistent top and bottom image blending; keep controls above the short bottom fade. */ html body.visual-home .landing-overview .hero-top .hero-visual, html body.visual-home .landing-overview .hero-top[data-hero-world="spaces"] .hero-visual{ -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.2) 12%,rgba(0,0,0,.65) 26%,#000 40%,#000 65%,rgba(0,0,0,.75) 78%,rgba(0,0,0,.3) 91%,transparent 100%)!important; mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.2) 12%,rgba(0,0,0,.65) 26%,#000 40%,#000 65%,rgba(0,0,0,.75) 78%,rgba(0,0,0,.3) 91%,transparent 100%)!important; } /* VR education is a service preview: explain the offer before its supporting image. */ @media(max-width:760px){ html body.visual-home #playground #showroom[data-project="educationvr"]{gap:16px!important;padding:16px 10px!important} html body.visual-home #playground #showroom[data-project="educationvr"] .preview-copy{display:flex!important;order:-2!important;padding:0 6px!important;margin:0!important} html body.visual-home #playground #showroom[data-project="educationvr"] #demo-heading{font-size:clamp(26px,7vw,34px)!important;margin:0 0 12px!important} html body.visual-home #playground #showroom[data-project="educationvr"] #demo-copy{font-size:13px!important;line-height:1.5!important;margin:0!important} html body.visual-home #playground #showroom[data-project="educationvr"] #launch{display:flex!important;margin:14px 0 0!important;min-height:44px!important} html body.visual-home #playground #showroom[data-project="educationvr"] .image-stage{order:0!important;aspect-ratio:16/10!important;height:auto!important;overflow:hidden!important;min-height:0!important;border-radius:12px!important} html body.visual-home #playground #showroom[data-project="educationvr"] .project-image{width:100%!important;height:100%!important;aspect-ratio:16/10!important;object-fit:cover!important;object-position:center 35%!important;max-height:280px!important} } /* VR education: copy overlays the photograph rather than pushing it down. */ @media(max-width:760px){ html body.visual-home #playground #showroom[data-project="educationvr"]{display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto!important;isolation:isolate!important;position:relative!important;padding:0!important;gap:0!important;overflow:hidden!important;border-radius:14px!important;margin:0!important;background:#20352d!important} html body.visual-home #playground #showroom[data-project="educationvr"] .image-stage{grid-area:1 / 1!important;align-self:stretch!important;position:relative!important;order:0!important;width:100%!important;height:100%!important;min-height:480px!important;aspect-ratio:auto!important;border-radius:0!important;z-index:0!important} html body.visual-home #playground #showroom[data-project="educationvr"] .project-image{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-height:none!important;aspect-ratio:auto!important;object-fit:cover!important;object-position:center 38%!important;border-radius:0!important} html body.visual-home #playground #showroom[data-project="educationvr"] .image-stage:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,35,29,.96) 0%,rgba(17,35,29,.85) 28%,rgba(17,35,29,.45) 48%,transparent 72%);pointer-events:none} html body.visual-home #playground #showroom[data-project="educationvr"] .preview-copy{grid-area:1 / 1!important;align-self:start!important;position:relative!important;z-index:1!important;order:0!important;padding:24px 20px 230px!important;margin:0!important;color:white!important;background:transparent!important} html body.visual-home #playground #showroom[data-project="educationvr"] #demo-heading{color:#fff!important;font-size:clamp(25px,7vw,34px)!important;line-height:1.08!important;margin:0 0 12px!important} html body.visual-home #playground #showroom[data-project="educationvr"] #demo-heading .heading-accent{color:#acd3c8!important} html body.visual-home #playground #showroom[data-project="educationvr"] #demo-copy{color:#f0f5f2!important;font-size:13px!important;line-height:1.5!important;margin:0!important} html body.visual-home #playground #showroom[data-project="educationvr"] #launch{width:auto!important;align-self:flex-start!important;min-height:44px!important;margin-top:16px!important;padding:8px 12px 8px 16px!important;font-size:12px!important;background:#b1d2c6!important;color:#20352d!important} html body.visual-home #playground #showroom[data-project="educationvr"] #launch>span{width:28px!important;height:28px!important;flex-basis:28px!important;background:#d9ece5!important} } html body.visual-home .landing-overview .hero-autoplay-toggle{display:block;margin:0 0 10px auto;padding:6px 10px;min-height:32px;border:1px solid #a8c5ba55;border-radius:20px;background:transparent;color:#bfd5cb;font:inherit;font-size:10px;cursor:pointer} html body.visual-home .hero-autoplay-toggle:focus-visible{outline:2px solid #a1d3c4;outline-offset:3px} html body.visual-home .landing-overview .hero-top .hero-visual img.hero-outgoing{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;margin:0!important;z-index:2!important;pointer-events:none!important} /* Image-led service panels inspired by the supplied studio concept. */ html body.visual-home #expertise{display:grid!important;grid-template-columns:minmax(220px,.8fr) minmax(0,2fr)!important;gap:clamp(24px,4vw,64px)!important;padding:70px 4vw!important;background:#f4f7f3!important;align-items:start!important} html body.visual-home #expertise .section-intro{position:sticky;top:100px;max-width:390px!important} html body.visual-home #expertise .section-intro h2{font-size:clamp(32px,3.5vw,56px)!important;line-height:1.1!important;letter-spacing:-2px!important;margin:40px 0 24px!important} html body.visual-home #expertise .section-intro h2 span{color:#809b90!important} html body.visual-home #expertise .section-intro>p{font-size:17px!important;line-height:1.6!important} html body.visual-home #expertise .service-values{display:grid;gap:18px;margin-top:36px;color:#476057;font-size:16px} html body.visual-home #expertise .service-values span:before{content:'';display:inline-block;width:12px;height:12px;border:1px solid #8aafa0;border-radius:50%;margin-right:16px;background:#dbeae2;box-shadow:0 0 0 8px #fff} html body.visual-home #expertise .service-signoff{margin-top:64px!important;font-style:italic;color:#81988d!important} html body.visual-home #expertise .service-list{display:grid!important;gap:16px!important;border:0!important;min-width:0!important} html body.visual-home #expertise .service-panel{position:relative;isolation:isolate;overflow:hidden;min-height:320px;border-radius:20px;background:#fff;box-shadow:0 8px 28px #233d2f09;border:1px solid #e6ede7} html body.visual-home #expertise .service-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:78% center;z-index:-2} html body.visual-home #expertise .service-panel:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#fbfcfa 0%,#fbfcfaf5 27%,#fbfcfae8 36%,#fbfcfa50 53%,transparent 67%)} html body.visual-home #expertise .service-panel-content{width:52%;padding:28px 26px;box-sizing:border-box} html body.visual-home #expertise .service-panel-heading{display:flex;flex-direction:column;gap:8px} html body.visual-home #expertise .service-number{font-size:11px;color:#81958b;letter-spacing:1px} html body.visual-home #expertise h3{font-size:clamp(27px,2.8vw,42px)!important;line-height:1.1!important;margin:0 0 16px!important;letter-spacing:-1.2px!important;color:#20352d!important} html body.visual-home #expertise .service-body{display:block!important;margin:0!important;padding:0!important;width:100%!important} html body.visual-home #expertise .service-body p{font-size:13px!important;line-height:1.55!important;color:#526259!important;margin:0 0 16px!important;max-width:none!important} html body.visual-home #expertise .tags{display:flex!important;flex-wrap:wrap;gap:5px!important;margin:0 0 16px!important} html body.visual-home #expertise .tags span{font-size:9px!important;padding:6px 8px!important;background:#fbfcfacc;border:1px solid #d9e1dc;border-radius:20px} html body.visual-home #expertise .text-link{display:inline-flex!important;align-items:center;justify-content:center;min-height:44px;padding:10px 20px!important;border:0!important;border-radius:30px;background:#20352d!important;color:#fff!important;font-size:12px!important;text-decoration:none!important;cursor:pointer} html body.visual-home #expertise .text-link:hover{background:#355749!important} @media(max-width:1000px){html body.visual-home #expertise{grid-template-columns:1fr!important}html body.visual-home #expertise .section-intro{position:static;max-width:620px!important}html body.visual-home #expertise .service-values{display:flex;gap:28px;margin:24px 8px 0}html body.visual-home #expertise .service-signoff{display:none}} @media(max-width:600px){ html body.visual-home #expertise{padding:36px 16px!important;gap:24px!important} html body.visual-home #expertise .section-intro h2{font-size:34px!important;margin:16px 0!important;letter-spacing:-1.2px!important} html body.visual-home #expertise .section-intro>p{font-size:14px!important} html body.visual-home #expertise .service-panel-content{width:100%;padding:22px 20px 200px} html body.visual-home #expertise .service-photo{object-position:center bottom;object-fit:cover} html body.visual-home #expertise .service-panel:after{background:linear-gradient(180deg,#fbfcfa 0%,#fbfcfaf5 30%,#fbfcfae8 46%,#fbfcfa40 66%,transparent 78%)} html body.visual-home #expertise .service-body p{max-width:36ch!important} html body.visual-home #expertise .service-values{font-size:12px;gap:24px} } .vehicle-preview-notice{display:none} html body.visual-home #playground #showroom:is([data-project="yacht"],[data-project="vehicleconfig"]) .image-stage{position:relative!important;isolation:isolate!important;overflow:hidden!important;border-radius:16px!important} html body.visual-home #playground #showroom:is([data-project="yacht"],[data-project="vehicleconfig"]) .project-image{object-fit:cover!important;object-position:center!important} html body.visual-home #playground #showroom:is([data-project="yacht"],[data-project="vehicleconfig"]) .vehicle-preview-notice{display:flex!important;position:absolute;inset:0;z-index:2;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:clamp(20px,4vw,42px);background:linear-gradient(180deg,transparent 25%,rgba(16,33,28,.3) 52%,rgba(16,33,28,.92) 100%);color:white;pointer-events:none} .vehicle-preview-status{padding:7px 12px;border:1px solid #b7d8cb99;border-radius:30px;background:#203b32b3;color:#d8eee5;font-size:11px;letter-spacing:1px;margin-bottom:12px} .vehicle-preview-notice strong{font-size:clamp(26px,4vw,48px);line-height:1.08;font-weight:500;letter-spacing:-1px;color:white} .vehicle-preview-notice p{font-size:13px!important;line-height:1.4!important;color:#d7e6df!important;margin:12px 0 0!important} /* Compact, content-sized service cards: all three share the desktop viewport. */ html body.visual-home #expertise{padding:40px 4vw!important;gap:clamp(24px,3vw,48px)!important;scroll-margin-top:70px} html body.visual-home #expertise .section-intro h2{font-size:clamp(30px,3vw,48px)!important;margin:24px 0 20px!important} html body.visual-home #expertise .service-list{gap:12px!important;width:100%} html body.visual-home #expertise .service-panel{min-height:0;height:auto} html body.visual-home #expertise .service-panel-content{width:56%;padding:18px 22px} html body.visual-home #expertise .service-panel-heading{flex-direction:row;align-items:baseline;gap:10px} html body.visual-home #expertise h3{font-size:clamp(26px,2.2vw,34px)!important;margin:0 0 10px!important} html body.visual-home #expertise .service-body p{font-size:13px!important;line-height:1.45!important;margin-bottom:10px!important} html body.visual-home #expertise .tags{margin-bottom:10px!important;gap:4px!important} html body.visual-home #expertise .tags span{padding:4px 7px!important} html body.visual-home #expertise .text-link{min-height:40px;padding:8px 16px!important} @media(min-width:1001px){ html body.visual-home #expertise .service-panel{min-height:clamp(210px,calc((100svh - 174px)/3),270px);display:flex;align-items:center} } @media(min-width:601px) and (max-width:1000px){ html body.visual-home #expertise{padding:28px 24px!important;gap:20px!important} html body.visual-home #expertise .section-intro{max-width:none!important} html body.visual-home #expertise .section-intro h2{margin:12px 0!important} html body.visual-home #expertise .section-intro h2 br{display:none} html body.visual-home #expertise .service-panel-content{width:65%} } @media(max-width:600px){ html body.visual-home #expertise{padding:28px 16px!important;gap:18px!important} html body.visual-home #expertise .section-intro h2{font-size:30px!important;margin:12px 0!important} html body.visual-home #expertise .service-panel-content{width:100%;padding:18px 16px 100px} html body.visual-home #expertise .service-body p{max-width:none!important} html body.visual-home #expertise .service-panel:after{background:linear-gradient(180deg,#fbfcfa 0%,#fbfcfaf5 48%,#fbfcfae8 62%,#fbfcfa40 83%,transparent 100%)} html body.visual-home #expertise .service-photo{object-position:center 65%} } /* Tablet and desktop space chooser: landscape thumbnails with separate captions. */ @media(min-width:761px){ html body.visual-home #playground .stage-top.space-picker{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:0!important;padding:28px 24px!important} html body.visual-home #playground .stage-top.space-picker #project-choice-label{order:0!important;font-size:12px!important;letter-spacing:1.3px!important;margin:0 0 10px!important;color:#617c73!important} html body.visual-home #playground .stage-top.space-picker #picker-title{display:block!important;order:1!important;color:#20352d!important;font-size:clamp(28px,3.6vw,44px)!important;line-height:1.12!important;letter-spacing:-1.3px!important;word-break:normal!important;overflow-wrap:normal!important;margin:0 0 26px!important;max-width:none!important;width:auto!important} html body.visual-home #playground .stage-top.space-picker .category-tabs{order:2!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important;width:100%!important;margin:0!important} html body.visual-home #playground .stage-top.space-picker .category-tabs button{position:relative!important;display:grid!important;grid-template-columns:minmax(0,1fr) 36px!important;grid-template-rows:auto 1fr!important;align-items:start!important;gap:14px 8px!important;width:100%!important;min-width:0!important;min-height:0!important;height:auto!important;padding:10px!important;border-radius:18px!important;overflow:hidden!important;color:#20352d!important;background:#f4f7f3!important} html body.visual-home #playground .stage-top.space-picker .category-tabs button>img{grid-area:1 / 1 / 2 / 3!important;display:block!important;width:100%!important;height:auto!important;aspect-ratio:16/9!important;object-fit:cover!important;object-position:center!important;min-width:0!important;max-width:none!important;border-radius:11px!important;margin:0!important} html body.visual-home #playground .stage-top.space-picker .category-tabs button .thumbnail-interaction{position:relative!important;grid-area:1 / 1 / 2 / 3!important;inset:auto!important;align-self:stretch!important;width:100%!important;height:100%!important;aspect-ratio:16/9!important;z-index:1!important} html body.visual-home #playground .stage-top.space-picker .category-tabs .choice-copy{grid-area:2 / 1!important;position:static!important;width:auto!important;min-width:0!important;padding:0 2px 8px!important;text-align:left!important} html body.visual-home #playground .stage-top.space-picker .category-tabs .choice-copy strong{font-size:clamp(16px,1.8vw,24px)!important;line-height:1.2!important;white-space:normal!important;word-break:normal!important;overflow-wrap:normal!important;hyphens:none!important;letter-spacing:-.35px!important;color:inherit!important} html body.visual-home #playground .stage-top.space-picker .category-tabs .choice-copy small{display:block!important;font-size:clamp(12px,1.15vw,15px)!important;line-height:1.4!important;margin-top:7px!important;color:inherit!important;opacity:.75} html body.visual-home #playground .stage-top.space-picker .category-tabs .choice-arrow{grid-area:2 / 2!important;position:static!important;display:grid!important;align-self:center!important;width:36px!important;height:36px!important;margin:0!important;background:#e6ece8!important;color:#20352d!important;font-size:22px!important} html body.visual-home #playground .stage-top.space-picker .technology-cue{top:17px!important;left:17px!important;z-index:2!important;font-size:12px!important;padding:6px 8px!important;gap:4px!important;max-width:calc(100% - 34px)!important} html body.visual-home #playground .stage-top.space-picker .technology-cue svg{width:17px!important;height:17px!important} html body.visual-home #playground .stage-top.space-picker .category-tabs button[aria-selected=true]{background:#243d34!important;color:#fff!important;border-color:#acd6c7!important;box-shadow:0 2px 10px #78bfa74d!important} html body.visual-home #playground .stage-top.space-picker .category-tabs button[aria-selected=true] .choice-arrow{background:#d8ece3!important;color:#20352d!important} } /* Learning uses the same responsive image-first cards as Spaces. */ @media(min-width:761px){ html body.visual-home #playground .stage-top.learning-picker{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:0!important;padding:28px 24px!important} html body.visual-home #playground .stage-top.learning-picker #project-choice-label{order:0!important;font-size:12px!important;letter-spacing:1.3px!important;margin:0 0 10px!important;color:#617c73!important} html body.visual-home #playground .stage-top.learning-picker #picker-title{display:block!important;order:1!important;color:#20352d!important;font-size:clamp(28px,3.6vw,44px)!important;line-height:1.12!important;letter-spacing:-1.3px!important;word-break:normal!important;overflow-wrap:normal!important;margin:0 0 26px!important;max-width:none!important;width:auto!important} html body.visual-home #playground .stage-top.learning-picker .category-tabs{order:2!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important;width:100%!important;margin:0!important} html body.visual-home #playground .stage-top.learning-picker .category-tabs button{position:relative!important;display:grid!important;grid-template-columns:minmax(0,1fr) 36px!important;grid-template-rows:auto 1fr!important;align-items:start!important;gap:14px 8px!important;width:100%!important;min-width:0!important;min-height:0!important;height:auto!important;padding:10px!important;border-radius:18px!important;overflow:hidden!important;color:#20352d!important;background:#f4f7f3!important} html body.visual-home #playground .stage-top.learning-picker .category-tabs button>img{grid-area:1 / 1 / 2 / 3!important;display:block!important;width:100%!important;height:auto!important;aspect-ratio:16/9!important;object-fit:cover!important;object-position:center!important;min-width:0!important;max-width:none!important;border-radius:11px!important;margin:0!important} html body.visual-home #playground .stage-top.learning-picker .category-tabs button .thumbnail-interaction{position:relative!important;grid-area:1 / 1 / 2 / 3!important;inset:auto!important;align-self:stretch!important;width:100%!important;height:100%!important;aspect-ratio:16/9!important;z-index:1!important} html body.visual-home #playground .stage-top.learning-picker .category-tabs .choice-copy{grid-area:2 / 1!important;position:static!important;width:auto!important;min-width:0!important;padding:0 2px 8px!important;text-align:left!important} html body.visual-home #playground .stage-top.learning-picker .category-tabs .choice-copy strong{font-size:clamp(16px,1.8vw,24px)!important;line-height:1.2!important;white-space:normal!important;word-break:normal!important;overflow-wrap:normal!important;hyphens:none!important;letter-spacing:-.35px!important;color:inherit!important} html body.visual-home #playground .stage-top.learning-picker .category-tabs .choice-copy small{display:block!important;font-size:clamp(12px,1.15vw,15px)!important;line-height:1.4!important;margin-top:7px!important;color:inherit!important;opacity:.75} html body.visual-home #playground .stage-top.learning-picker .category-tabs .choice-arrow{grid-area:2 / 2!important;position:static!important;display:grid!important;align-self:center!important;width:36px!important;height:36px!important;margin:0!important;background:#e6ece8!important;color:#20352d!important;font-size:22px!important} html body.visual-home #playground .stage-top.learning-picker .technology-cue{top:17px!important;left:17px!important;z-index:2!important;font-size:12px!important;padding:6px 8px!important;gap:4px!important;max-width:calc(100% - 34px)!important} html body.visual-home #playground .stage-top.learning-picker .technology-cue svg{width:17px!important;height:17px!important} html body.visual-home #playground .stage-top.learning-picker .category-tabs button[aria-selected=true]{background:#243d34!important;color:#fff!important;border-color:#acd6c7!important;box-shadow:0 2px 10px #78bfa74d!important} html body.visual-home #playground .stage-top.learning-picker .category-tabs button[aria-selected=true] .choice-arrow{background:#d8ece3!important;color:#20352d!important} } @media(min-width:761px){ html body.visual-home #playground .stage-top.learning-picker .category-tabs button>img{aspect-ratio:2/1!important;object-position:center 35%!important} html body.visual-home #playground .stage-top.learning-picker .category-tabs button[data-demo="anatomy"]>img{object-fit:contain!important;background:#101917!important;object-position:center!important} html body.visual-home #playground .stage-top.learning-picker .category-tabs button:after{display:none!important} } /* Give the main Spaces and Learning previews the larger share of the layout. */ @media(min-width:761px){ html body.visual-home #playground:not(.expanded):has(.space-picker) #showroom, html body.visual-home #playground:not(.expanded):has(.learning-picker) #showroom{display:grid!important;grid-template-columns:minmax(0,.75fr) minmax(0,1.4fr)!important;align-items:center!important;gap:28px!important;padding:32px 24px!important;height:auto!important;min-height:0!important} html body.visual-home #playground:not(.expanded):is(:has(.space-picker),:has(.learning-picker)) #showroom .preview-copy{padding:12px 0!important;min-width:0!important;width:100%!important} html body.visual-home #playground:not(.expanded):is(:has(.space-picker),:has(.learning-picker)) #showroom .image-stage{display:block!important;width:100%!important;max-width:none!important;height:auto!important;min-height:0!important;aspect-ratio:auto!important;padding:0!important;margin:0!important;align-self:center!important} html body.visual-home #playground:not(.expanded):is(:has(.space-picker),:has(.learning-picker)) #showroom .project-image, html body.visual-home #playground:not(.expanded):is(:has(.space-picker),:has(.learning-picker)) #showroom .project-film{position:relative!important;width:100%!important;max-width:none!important;height:auto!important;max-height:none!important;object-fit:contain!important;aspect-ratio:auto!important;border-radius:16px!important;transform:none!important} html body.visual-home #playground:not(.expanded):is(:has(.space-picker),:has(.learning-picker)) #showroom #demo-heading{font-size:clamp(28px,3vw,46px)!important;line-height:1.12!important;letter-spacing:-1.5px!important} } /* Retire the redundant explanation strip beneath the experience. */ html body.visual-home .project-insight,html body.visual-home .hero-footer{display:none!important} html body.visual-home #playground #showroom[data-project="clothing"] .project-image{width:100%!important;height:auto!important;max-height:none!important;object-fit:contain!important;border-radius:14px!important} html body.visual-home #playground #showroom[data-project="clothing"] .image-stage{height:auto!important;padding:12px!important} /* Keep the service heading separated and all copy on a readable surface. */ html body.visual-home #expertise .section-intro h2 span{display:block!important;margin-top:.08em!important} html body.visual-home #expertise .service-body p{color:#34483f!important} html body.visual-home #expertise .service-panel:after{background:linear-gradient(90deg,#fbfcfa 0%,#fbfcfa 48%,rgba(251,252,250,.97) 56%,rgba(251,252,250,.65) 65%,transparent 80%)!important} @media(min-width:601px) and (max-width:1000px){ html body.visual-home #expertise .service-panel:after{background:linear-gradient(90deg,#fbfcfa 0%,#fbfcfa 55%,rgba(251,252,250,.97) 65%,rgba(251,252,250,.55) 77%,transparent 94%)!important} } @media(max-width:600px){ html body.visual-home #expertise .service-panel-content{padding-bottom:120px!important;background:linear-gradient(180deg,#fbfcfa 0%,#fbfcfa calc(100% - 120px),rgba(251,252,250,.94) calc(100% - 100px),transparent 100%)!important} html body.visual-home #expertise .service-panel:after{background:none!important} } /* Portrait tablet service composition, following the supplied reference. */ @media(min-width:601px) and (max-width:1200px) and (orientation:portrait){ html body.visual-home #expertise{grid-template-columns:minmax(0,1fr)!important;padding:30px 24px!important;gap:22px!important} html body.visual-home #expertise .section-intro{position:static!important;max-width:none!important} html body.visual-home #expertise .section-intro h2{font-size:clamp(32px,4.2vw,48px)!important;line-height:1.1!important;margin:14px 0 14px!important;letter-spacing:-1.7px!important} html body.visual-home #expertise .section-intro h2 br{display:none!important} html body.visual-home #expertise .section-intro>p{max-width:none!important;font-size:15px!important;line-height:1.5!important;margin:0!important} html body.visual-home #expertise .service-list{gap:14px!important;margin:0!important} html body.visual-home #expertise .service-panel{display:flex!important;align-items:center!important;min-height:250px!important;border-radius:17px!important} html body.visual-home #expertise .service-panel-content{position:relative!important;width:45%!important;padding:20px!important;background:none!important} html body.visual-home #expertise .service-panel-heading{flex-direction:column!important;gap:7px!important} html body.visual-home #expertise .service-number{padding:0!important;font-size:10px!important} html body.visual-home #expertise h3{font-size:30px!important;line-height:1.1!important;margin-bottom:10px!important} html body.visual-home #expertise .service-body p{font-size:12px!important;line-height:1.45!important;margin-bottom:12px!important} html body.visual-home #expertise .service-photo{left:35%!important;width:65%!important;object-position:center!important} html body.visual-home #expertise .service-panel:after{background:linear-gradient(90deg,#fbfcfa 0%,#fbfcfa 35%,rgba(251,252,250,.97) 42%,rgba(251,252,250,.45) 49%,transparent 60%)!important} html body.visual-home #expertise .tags{gap:4px!important;margin-bottom:12px!important} html body.visual-home #expertise .tags span{font-size:8px!important;padding:4px 6px!important} html body.visual-home #expertise .text-link{min-height:38px!important;padding:8px 14px!important;font-size:11px!important} html body.visual-home #expertise .service-panel:nth-child(2){background:#20352d!important;border-color:#344b40!important} html body.visual-home #expertise .service-panel:nth-child(2):after{background:linear-gradient(90deg,#20352d 0%,#20352d 35%,rgba(32,53,45,.97) 42%,rgba(32,53,45,.55) 52%,rgba(32,53,45,.05) 75%)!important} html body.visual-home #expertise .service-panel:nth-child(2) h3{color:#fff!important} html body.visual-home #expertise .service-panel:nth-child(2) .service-body p, html body.visual-home #expertise .service-panel:nth-child(2) .service-number{color:#e0ebe5!important} html body.visual-home #expertise .service-panel:nth-child(2) .tags span{background:#20352d99!important;color:#edf5f0!important;border-color:#c0d6ca66!important} html body.visual-home #expertise .service-panel:nth-child(2) .text-link{background:#e3f0e9!important;color:#20352d!important} } /* Shared dark middle card across every viewport. */ html body.visual-home #expertise .service-panel:nth-child(2){background:#20352d!important;border-color:#425b50!important} html body.visual-home #expertise .service-panel:nth-child(2):after{background:linear-gradient(90deg,#20352d 0%,#20352d 48%,rgba(32,53,45,.97) 56%,rgba(32,53,45,.65) 65%,transparent 85%)!important} html body.visual-home #expertise .service-panel:nth-child(2) h3{color:#fff!important} html body.visual-home #expertise .service-panel:nth-child(2) .service-body p, html body.visual-home #expertise .service-panel:nth-child(2) .service-number{color:#e0ebe5!important} html body.visual-home #expertise .service-panel:nth-child(2) .tags span{background:#20352d99!important;color:#edf5f0!important;border-color:#c0d6ca66!important} html body.visual-home #expertise .service-panel:nth-child(2) .text-link{background:#e3f0e9!important;color:#20352d!important} @media(min-width:601px) and (max-width:1000px) and (orientation:landscape){ html body.visual-home #expertise .service-panel:nth-child(2):after{background:linear-gradient(90deg,#20352d 0%,#20352d 55%,rgba(32,53,45,.97) 65%,rgba(32,53,45,.55) 77%,transparent 94%)!important} } @media(min-width:601px) and (max-width:1200px) and (orientation:portrait){ html body.visual-home #expertise .service-panel:nth-child(2):after{background:linear-gradient(90deg,#20352d 0%,#20352d 35%,rgba(32,53,45,.97) 42%,rgba(32,53,45,.55) 52%,rgba(32,53,45,.05) 75%)!important} } /* Phone cards have their own complete image frame, rather than a cropped background. */ @media(max-width:600px){ html body.visual-home #expertise .service-list{display:grid!important;gap:16px!important;margin:0!important} html body.visual-home #expertise .service-panel{display:flex!important;flex-direction:column!important;min-height:0!important;height:auto!important;border:1px solid #cddbd2!important;border-radius:18px!important;overflow:hidden!important;background:#fbfcfa!important;box-shadow:0 5px 16px #20352d0a!important} html body.visual-home #expertise .service-panel .service-photo{position:relative!important;inset:auto!important;order:0!important;z-index:0!important;display:block!important;width:100%!important;height:auto!important;aspect-ratio:16/9!important;object-fit:cover!important;object-position:center!important;margin:0!important} html body.visual-home #expertise .service-panel .service-panel-content{order:1!important;position:relative!important;width:100%!important;padding:18px!important;background:none!important} html body.visual-home #expertise .service-panel:after, html body.visual-home #expertise .service-panel:nth-child(2):after{display:none!important;background:none!important} html body.visual-home #expertise .service-panel h3{font-size:26px!important} html body.visual-home #expertise .service-panel .service-body p{font-size:13px!important;line-height:1.5!important} html body.visual-home #expertise .service-panel:nth-child(2){background:#20352d!important;border-color:#425b50!important} } html body.visual-home #playground .stage-top.product-picker{scroll-margin-top:90px} @media(max-width:760px){html body.visual-home #playground .stage-top.product-picker{scroll-margin-top:16px}} html body.visual-home .project-process,html body.visual-home .project-faq{padding:48px 4vw;background:#f4f7f3;border-top:1px solid #d5dfd8} .project-process h2,.project-faq h2{font-size:clamp(28px,3.2vw,44px);line-height:1.12;letter-spacing:-1.3px;margin:16px 0 26px;color:#20352d} .project-process h2 span{color:#7d968b}.process-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-bottom:24px}.process-steps article{padding:20px;border:1px solid #d7e2db;border-radius:16px;background:#fff}.process-steps article>span{color:#718c7e;font-size:12px}.process-steps h3{font-size:20px;line-height:1.2;margin:12px 0}.process-steps p,.project-faq details p{font-size:14px;line-height:1.65;color:#506259}.project-faq details{max-width:950px}.project-faq summary{font-size:17px;font-weight:500;padding:18px 0;justify-content:space-between}.project-faq summary:after{content:'+'}.project-faq details[open] summary:after{content:'−'}.project-faq details p{padding:0 0 20px;max-width:75ch}.project-enquiry{max-width:760px;display:grid;gap:16px;margin:32px 0;padding:24px;border:1px solid #74988a66;border-radius:18px;scroll-margin-top:90px}.project-enquiry h3{font-size:24px}.project-enquiry label{display:grid;gap:8px;font-size:14px}.project-enquiry input,.project-enquiry select,.project-enquiry textarea{width:100%;min-width:0;padding:12px;border:1px solid #b8ccbf;border-radius:8px;font:inherit;background:#f7faf6;color:#20352d}.project-enquiry textarea{resize:vertical}.project-enquiry button{justify-self:start;border:0;cursor:pointer}.project-enquiry .enquiry-note{font-size:12px;line-height:1.5;color:#c8dbd0} @media(max-width:700px){html body.visual-home .project-process,html body.visual-home .project-faq{padding:30px 18px}.process-steps{grid-template-columns:1fr;gap:10px}.process-steps article{padding:16px}.process-steps h3{font-size:18px;margin:8px 0}.project-enquiry{padding:18px;scroll-margin-top:20px}} /* Four distinct space and vehicle experiences. */ html body.visual-home #playground .stage-top.space-picker .category-tabs{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:14px!important} html body.visual-home #playground .stage-top.space-picker .category-tabs>button{min-width:0!important} @media(max-width:1200px){html body.visual-home #playground .stage-top.space-picker .category-tabs{grid-template-columns:repeat(2,minmax(0,1fr))!important}} @media(max-width:760px){ html body.visual-home #playground .stage-top.space-picker .category-tabs>button{display:grid!important;grid-template-columns:minmax(0,1fr) 30px!important;grid-template-rows:auto 1fr!important;padding:8px!important;position:relative!important} html body.visual-home #playground .stage-top.space-picker .category-tabs>button>img{grid-area:1/1/2/3!important;width:100%!important;height:auto!important;aspect-ratio:16/10!important;object-fit:cover!important} html body.visual-home #playground .stage-top.space-picker .choice-copy{grid-area:2/1!important;padding:10px 0!important;min-width:0!important;text-align:left!important} html body.visual-home #playground .stage-top.space-picker .choice-copy strong{font-size:16px!important;line-height:1.2!important;overflow-wrap:normal!important;word-break:normal!important} html body.visual-home #playground .stage-top.space-picker .choice-copy small{font-size:12px!important;line-height:1.4!important} html body.visual-home #playground .stage-top.space-picker .choice-arrow{grid-area:2/2!important;position:static!important;width:28px!important;height:28px!important;align-self:center!important} html body.visual-home #playground .stage-top.space-picker .thumbnail-interaction{grid-area:1/1/2/3!important;position:relative!important;inset:auto!important;width:100%!important;height:100%!important} html body.visual-home #playground .stage-top.space-picker .technology-cue{top:13px!important;left:13px!important;font-size:11px!important} } html body.visual-home #playground .stage-top.space-picker #tab-vehicleconfig .thumbnail-interaction{display:none!important} html body.visual-home #playground #showroom[data-project="vehicleconfig"] .project-image{object-fit:contain!important;width:100%!important;height:auto!important} /* Cinematic spatial demonstration cards. */ html body.visual-home .world-followup .spatial-demo-card{position:relative!important;display:block!important;isolation:isolate;min-width:0;padding:0!important;border-radius:20px!important;overflow:hidden!important;border:1px solid #45645a55!important;background:#20352d!important;aspect-ratio:1.3!important;text-align:left!important;color:#fff!important} html body.visual-home .world-followup .spatial-demo-card .project-preview{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;padding:0!important;border:0!important;background:none!important} html body.visual-home .world-followup .spatial-demo-card .project-preview img{width:100%!important;height:100%!important;max-height:none!important;object-fit:cover!important;margin:0!important;transition:transform .5s ease} html body.visual-home .world-followup .spatial-demo-card:after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,#112b2620 0%,transparent 35%,#10272066 65%,#10231feb 100%);pointer-events:none} html body.visual-home .world-followup .spatial-demo-card .project-card-body{position:absolute!important;inset:auto 0 0!important;z-index:2;display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:10px 18px!important;padding:26px!important;background:none!important;border:0!important} html body.visual-home .world-followup .spatial-demo-card .project-card-body strong{grid-column:1/-1!important;color:white!important;font-size:clamp(22px,2.2vw,32px)!important;line-height:1.15!important;margin:0!important} html body.visual-home .world-followup .spatial-demo-card .project-card-detail{color:#e0eae4!important;font-size:14px!important;line-height:1.5!important;align-self:center} html body.visual-home .world-followup .spatial-demo-card .project-card-arrow{position:static!important;display:flex!important;width:auto!important;height:auto!important;padding:14px 20px!important;border-radius:30px!important;background:#e4efe5!important;color:#20352d!important;font-size:14px!important;white-space:nowrap;align-self:center} .spatial-demo-badge{position:absolute;top:20px;left:20px;z-index:2;display:flex;flex-direction:column;gap:3px;padding:12px 18px;background:#172f2be6;border:1px solid #abc7ba55;border-radius:15px;color:#fff;backdrop-filter:blur(10px)} .spatial-demo-badge b{font-size:23px;line-height:1}.spatial-demo-badge small{font-size:9px;letter-spacing:1px;color:#d3e4dc} .spatial-demo-play{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);z-index:2;display:grid;place-items:center;width:64px;height:64px;border:1px solid #ffffffb0;border-radius:50%;color:white;background:#18382b66;backdrop-filter:blur(6px);transition:background .2s} .spatial-demo-play svg{width:26px;height:26px} html body.visual-home .world-followup .spatial-demo-card:hover .project-preview img{transform:scale(1.035)} .spatial-demo-card:hover .spatial-demo-play{background:#376956cc} @media(max-width:1000px){html body.visual-home .world-followup .spatial-demo-card .project-card-body{padding:20px!important;grid-template-columns:1fr!important}.spatial-demo-card .project-card-arrow{justify-self:start}} @media(max-width:600px){html body.visual-home .world-followup .spatial-demo-card{aspect-ratio:1.05!important}.spatial-demo-badge{top:14px;left:14px;padding:10px 14px}.spatial-demo-play{width:52px;height:52px;top:40%}} @media(prefers-reduced-motion:reduce){html body.visual-home .world-followup .spatial-demo-card .project-preview img{transition:none!important;transform:none!important}} /* Desktop spatial films are presented once, in the cinematic demo cards. */ @media(min-width:1001px){html body.visual-home #playground:not(.expanded) #showroom:is([data-project="architecture"],[data-project="archvr"]){display:none!important}} @media(min-width:1001px){html body.visual-home #playground.experience:not(.expanded):has(#showroom:is([data-project="architecture"],[data-project="archvr"])){height:auto!important;min-height:0!important;max-height:none!important;flex:none!important;padding-bottom:0!important}} html body.visual-home .world-followup .learning-demo-card[data-project="educationvr"] .project-preview img{object-position:center 30%!important} html body.visual-home .world-followup .learning-demo-card .spatial-demo-badge b{font-size:20px} html body.visual-home #playground:not(.expanded):has(.product-picker){height:auto!important;min-height:0!important;max-height:none!important} html body.visual-home #playground:not(.expanded):has(.product-picker) #showroom{display:none!important} #product-showcase[hidden]{display:none!important} #product-showcase{display:grid;gap:24px;padding:24px;background:#edf4ef} .product-example{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr);align-items:center;gap:32px;padding:32px;border:1px solid #d3e1d8;border-radius:22px;background:#e4f1ed;scroll-margin-top:100px;min-width:0} .product-example:nth-child(even){background:#f7faf7} .product-example-copy h2{font-size:clamp(28px,3vw,46px);line-height:1.12;letter-spacing:-.04em;margin:18px 0;color:#20352d} .product-example-copy>p:not(.eyebrow){font-size:16px;line-height:1.6;color:#52655b;margin:0 0 24px} .product-example-copy .eyebrow{font-size:12px;letter-spacing:.1em;color:#667f72} .product-example-copy .pill{background:#20352d;color:white;border:0;padding:16px 24px;cursor:pointer} .product-example-preview{padding:0;border:0;border-radius:16px;overflow:hidden;background:#fff;cursor:pointer;width:100%;min-width:0} .product-example-preview img{display:block;width:100%;height:auto;max-height:580px;object-fit:contain} .product-example:focus-visible{outline:2px solid #649e91;outline-offset:4px} @media(max-width:760px){#product-showcase{padding:14px;gap:18px}.product-example{grid-template-columns:1fr;gap:22px;padding:20px;scroll-margin-top:24px}.product-example-copy h2{font-size:30px}.product-example-copy>p:not(.eyebrow){font-size:14px}.product-example-preview img{max-height:none}} .product-example-preview{aspect-ratio:4/3}.product-example-preview img{height:100%;max-height:none} html body.visual-home #playground.experience:not(.expanded):has(.space-picker){height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important} html body.visual-home #playground .stage-top.space-picker{height:auto!important;max-height:none!important;overflow:visible!important;flex-shrink:0!important} html body.visual-home #playground .stage-top.space-picker .category-tabs{height:auto!important;max-height:none!important;overflow:visible!important} @media(min-width:900px) and (max-width:1400px) and (orientation:landscape){ html body.visual-home #playground .stage-top.space-picker .category-tabs{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important} html body.visual-home #playground .stage-top.space-picker{padding:20px!important} html body.visual-home #playground .stage-top.space-picker .category-tabs>button{gap:10px 5px!important;padding:8px!important} html body.visual-home #playground .stage-top.space-picker .choice-copy strong{font-size:17px!important;line-height:1.2!important} html body.visual-home #playground .stage-top.space-picker .choice-copy small{font-size:12px!important;line-height:1.35!important} html body.visual-home #playground .stage-top.space-picker .category-tabs>button>img{aspect-ratio:16/9!important;height:auto!important} } /* Learning has one clear set of choices. */ html body.visual-home #playground:has(.learning-picker){display:none!important} html body.visual-home[data-active-world="learning"] .world-followup{scroll-margin-top:85px} html body.visual-home .spatial-demo-badge b{color:#fff!important} @media(min-width:900px) and (orientation:landscape){ html body.visual-home[data-active-world="spaces"] #playground .stage-top.space-picker{padding:12px 20px!important;gap:8px!important} html body.visual-home[data-active-world="spaces"] #picker-title{font-size:28px!important;margin:0 0 10px!important} html body.visual-home[data-active-world="spaces"] .space-picker .category-tabs>button>img{max-height:100px!important;object-fit:cover!important} html body.visual-home[data-active-world="spaces"] .space-picker .thumbnail-interaction{max-height:100px!important} html body.visual-home[data-active-world="spaces"] .space-picker .choice-copy strong{font-size:16px!important} html body.visual-home[data-active-world="spaces"] .space-picker .choice-copy small{font-size:11px!important} html body.visual-home[data-active-world="spaces"] .world-followup{padding:18px 4.5%!important} html body.visual-home[data-active-world="spaces"] .world-followup>h2{font-size:26px!important;margin:0 0 6px!important} html body.visual-home[data-active-world="spaces"] .world-followup>p{font-size:13px!important;margin:0 0 14px!important} html body.visual-home[data-active-world="spaces"] .world-followup .spatial-demo-card{aspect-ratio:auto!important;height:280px!important} html body.visual-home[data-active-world="spaces"] .spatial-demo-card .project-card-body{padding:16px!important;gap:6px!important} html body.visual-home[data-active-world="spaces"] .spatial-demo-card .project-card-body strong{font-size:22px!important} html body.visual-home #playground #showroom.is-yacht{padding:16px 20px!important;gap:20px!important} html body.visual-home #playground #showroom.is-yacht .image-stage{max-height:280px!important} html body.visual-home #playground #showroom.is-yacht .project-image{height:280px!important;object-fit:cover!important} html body.visual-home #playground #showroom.is-yacht .yacht-panel{min-height:0!important;padding:24px!important} html body.visual-home #playground #showroom.is-yacht .yacht-panel h2{font-size:32px!important} } @media(min-width:900px) and (orientation:landscape){html body.visual-home #playground .stage-top.space-picker .category-tabs>button>img,html body.visual-home #playground .stage-top.space-picker .thumbnail-interaction{height:90px!important;max-height:90px!important;aspect-ratio:auto!important}html body.visual-home[data-active-world="spaces"] .world-followup .spatial-demo-card{height:240px!important}} /* A single preview for the selected Spaces category. */ html body.visual-home[data-active-world="spaces"] .world-followup .world-projects{grid-template-columns:minmax(0,1fr)!important} html body.visual-home[data-active-world="spaces"] .world-followup .spatial-demo-card{aspect-ratio:2.4!important;max-height:520px} html body.visual-home #playground:not(.expanded):has(.space-picker) #showroom:is([data-project="architecture"],[data-project="archvr"]){display:none!important} @media(max-width:760px){html body.visual-home[data-active-world="spaces"] .world-followup .spatial-demo-card{aspect-ratio:1.05!important;max-height:none}} .product-example[hidden]{display:none!important} html body.visual-home[data-active-world="spaces"][data-space-filtered="false"] #playground #showroom{display:none!important} .show-all-examples{order:5;align-self:flex-start;margin:14px 0 0;padding:10px 18px;border:1px solid #8fa89d;border-radius:24px;background:#edf5ef;color:#20352d;font:inherit;font-size:13px;cursor:pointer} .show-all-examples[hidden]{display:none!important} /* Image-first process cards. */ #how-we-work .process-header{display:grid;grid-template-columns:1.15fr 1fr;gap:40px;align-items:center;margin-bottom:46px} #how-we-work .process-header h2{margin-bottom:0} #how-we-work .process-header .eyebrow{display:flex;align-items:center;gap:18px} #how-we-work .process-header .eyebrow:after{content:'';height:1px;width:60px;background:#8b9d92} #how-we-work .process-intro{display:flex;align-items:center;gap:28px;justify-content:flex-end} #how-we-work .process-intro p{font-size:15px;line-height:1.65;color:#53655d;max-width:36ch;margin:0} #how-we-work .process-intro .pill{flex-shrink:0;font-size:14px;white-space:normal;max-width:270px;text-align:center} #how-we-work .process-steps{gap:24px;margin:0;grid-template-columns:repeat(3,minmax(0,1fr))} #how-we-work .process-card{position:relative;min-width:0;padding:0;border-radius:20px;background:#fff;border:1px solid #e1e8e2;box-shadow:0 12px 32px #23362d06} #how-we-work .process-number{position:absolute;z-index:2;top:-17px;left:20px;width:44px;height:44px;border-radius:50%;background:#84968c;color:white;display:grid;place-items:center;font-size:16px} #how-we-work .process-art{position:relative;width:100%;aspect-ratio:1.6;border-radius:20px 20px 0 0;background-image:url('assets/process-triptych.webp');background-size:300% auto;background-repeat:no-repeat} #how-we-work .process-art-0{background-position:0% 57%}#how-we-work .process-art-1{background-position:50% 46%}#how-we-work .process-art-2{background-position:100% 48%} #how-we-work .process-badge{position:absolute;top:18px;right:16px;display:flex;align-items:center;gap:10px;background:#20332ded;color:#eef5ef;border:1px solid #ffffff26;border-radius:22px;padding:12px 15px;max-width:60%;font-size:10px;line-height:1.4;letter-spacing:1px;font-weight:600} #how-we-work svg{width:24px;height:24px;flex:0 0 24px} #how-we-work .process-copy{padding:24px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px} #how-we-work .process-copy h3{font-size:clamp(19px,1.25vw,25px);line-height:1.25;margin:0 0 12px;color:#20352d} #how-we-work .process-copy p{font-size:14px;line-height:1.6;color:#506259;margin:0} #how-we-work .process-facts{list-style:none;margin:0;padding:4px 0;display:flex;flex-direction:column;gap:14px;max-width:135px} #how-we-work .process-facts li{display:flex;gap:9px;align-items:center;font-size:12px;line-height:1.4;color:#506259} @media(max-width:1600px) and (min-width:1101px){#how-we-work .process-copy{grid-template-columns:1fr;padding:22px}#how-we-work .process-facts{flex-direction:row;flex-wrap:wrap;max-width:none;gap:12px 18px}#how-we-work .process-facts li{font-size:11px}#how-we-work .process-facts svg{width:20px;height:20px;flex-basis:20px}} @media(max-width:1100px){#how-we-work .process-header{grid-template-columns:1fr;gap:24px}#how-we-work .process-intro{justify-content:space-between}#how-we-work .process-intro p{max-width:55ch}#how-we-work .process-steps{grid-template-columns:1fr;gap:36px}#how-we-work .process-art{aspect-ratio:1.9}#how-we-work .process-copy{padding:26px;gap:24px}#how-we-work .process-copy h3{font-size:24px}#how-we-work .process-copy p{font-size:16px}} @media(max-width:600px){#how-we-work .process-intro{flex-direction:column;align-items:flex-start;gap:20px}#how-we-work .process-art{aspect-ratio:1.35}#how-we-work .process-copy{padding:22px;grid-template-columns:1fr;gap:20px}#how-we-work .process-copy h3{font-size:22px}#how-we-work .process-copy p{font-size:15px}#how-we-work .process-facts{flex-direction:row;flex-wrap:wrap;max-width:none;gap:12px 18px}#how-we-work .process-badge{right:12px;font-size:9px;padding:10px 12px}} /* Wide tablet learning previews and image-first product cards. */ @media(min-width:601px) and (max-width:1400px){ html body.visual-home[data-active-world="learning"] .world-followup .world-projects{grid-template-columns:minmax(0,1fr)!important;gap:28px!important} html body.visual-home[data-active-world="learning"] .world-followup .learning-demo-card{aspect-ratio:2.4!important;height:auto!important;min-height:320px;max-height:520px} html body.visual-home[data-active-world="learning"] .world-followup .learning-demo-card .project-card-body{padding:28px!important} html body.visual-home[data-active-world="learning"] .world-followup .learning-demo-card[data-project="educationvr"] .project-preview img{object-position:center 35%!important} } #product-showcase{background:#f4f7f3;gap:32px} #product-showcase .product-example{display:flex;flex-direction:column;gap:0;padding:0;align-items:stretch;background:white;border:1px solid #d8e2dc;overflow:hidden;border-radius:24px} #product-showcase .product-example-preview{position:relative;display:block;aspect-ratio:2.15;border-radius:0;background:#edf1ee;overflow:hidden} #product-showcase .product-example-preview img{width:100%;height:100%;object-fit:contain;max-height:none;transition:transform .35s ease} #product-showcase .product-example-preview:hover img{transform:scale(1.015)} #product-showcase .product-preview-badge{position:absolute;top:22px;left:22px;display:flex;flex-direction:column;gap:5px;padding:15px 20px;border:1px solid #acc5b955;border-radius:18px;background:#1c332fee;color:white;text-align:left;box-shadow:0 6px 24px #132c2520} #product-showcase .product-preview-badge b{font-size:23px;line-height:1.1;color:white} #product-showcase .product-preview-badge small{font-size:10px;letter-spacing:1px;color:#d9e7e0} #product-showcase .product-example-copy{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 32px;padding:28px 32px;background:#fff} #product-showcase .product-example-copy .eyebrow{grid-column:1;margin:0;font-size:12px} #product-showcase .product-example-copy h2{grid-column:1;font-size:clamp(25px,2.5vw,38px);margin:0;line-height:1.2} #product-showcase .product-example-copy h2 br{display:none} #product-showcase .product-example-copy h2 br:after{content:' '} #product-showcase .product-example-copy>p:not(.eyebrow){grid-column:1;margin:0;max-width:76ch;font-size:15px} #product-showcase .product-example-copy .pill{grid-column:2;grid-row:1/4;align-self:center;max-width:260px;white-space:normal;line-height:1.4} @media(max-width:760px){#product-showcase{padding:14px;gap:22px}#product-showcase .product-example-preview{aspect-ratio:1.4}#product-showcase .product-example-copy{grid-template-columns:1fr;padding:22px;gap:12px}#product-showcase .product-example-copy .pill{grid-column:1;grid-row:auto;justify-self:start;margin-top:6px}#product-showcase .product-preview-badge{top:14px;left:14px;padding:11px 15px}#product-showcase .product-preview-badge b{font-size:18px}#product-showcase .product-preview-badge small{font-size:8px}} @media(prefers-reduced-motion:reduce){#product-showcase .product-example-preview img{transition:none;transform:none}} @media(min-width:601px) and (max-width:1400px){html body.visual-home[data-active-world="learning"] .world-followup .world-projects{width:100%!important;min-width:0!important}html body.visual-home[data-active-world="learning"] .world-followup .learning-demo-card{width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important}} /* Product previews follow the cinematic learning card treatment. */ #product-showcase .product-example{position:relative;isolation:isolate;display:block;aspect-ratio:2.4;min-height:360px;background:#20352d;border-color:#45645a55} #product-showcase .product-example-preview{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;background:#34483e;border-radius:0} #product-showcase .product-example-preview img{object-fit:cover;object-position:center 40%} #product-showcase .product-example-preview:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#14282010 15%,#13281f0a 35%,#142c2366 58%,#10231ff5 100%)} #product-showcase .product-preview-badge{z-index:2} #product-showcase .product-example-copy{position:absolute;bottom:0;left:0;right:0;z-index:2;display:block;background:none;padding:30px;pointer-events:none} #product-showcase .product-example-copy .eyebrow{display:none} #product-showcase .product-example-copy h2{color:#fff;font-size:clamp(25px,2.5vw,36px);margin:0 0 12px;max-width:34ch} #product-showcase .product-example-copy>p:not(.eyebrow){color:#e1ebe5;font-size:15px;line-height:1.5;max-width:75ch;margin:0 0 18px} #product-showcase .product-example-copy .pill{pointer-events:auto;background:#e4efe5;color:#20352d;padding:14px 22px;max-width:none} @media(max-width:760px){#product-showcase .product-example{aspect-ratio:1.15;min-height:420px}#product-showcase .product-example-copy{padding:22px}#product-showcase .product-example-copy h2{font-size:25px}#product-showcase .product-example-copy>p:not(.eyebrow){font-size:14px}#product-showcase .product-preview-badge{top:16px;left:16px}} /* Preserve complete configurator interfaces within the cinematic frame. */ #product-showcase .product-example-preview{background:#e4e9e5} #product-showcase .product-example-preview img{object-fit:contain;object-position:center center;box-sizing:border-box;padding:14px;transform:none!important} #product-showcase .product-example-preview:hover img{transform:none} @media(max-width:760px){#product-showcase .product-example-preview img{padding:10px}} /* Spaces previews fill the available row on tablet and desktop. */ @media(min-width:761px){ html body.visual-home[data-active-world="spaces"] .world-followup .world-projects{width:100%!important;min-width:0!important;grid-template-columns:minmax(0,1fr)!important;gap:28px!important} html body.visual-home[data-active-world="spaces"] .world-followup .spatial-demo-card{width:100%!important;max-width:100%!important;min-width:0!important;height:auto!important;aspect-ratio:2.4!important;min-height:320px;max-height:520px;box-sizing:border-box!important} html body.visual-home[data-active-world="spaces"] .world-followup .spatial-demo-card .project-card-body{padding:28px!important} } /* Prevent intrinsic card content from widening portrait layouts. */ #product-showcase{min-width:0!important;width:100%!important;max-width:100%!important;box-sizing:border-box!important;grid-template-columns:minmax(0,1fr)} #product-showcase .product-example{min-width:0!important;width:100%!important;max-width:100%!important;box-sizing:border-box!important} #product-showcase .product-example-copy{min-width:0;max-width:100%;box-sizing:border-box;overflow-wrap:anywhere} #product-showcase .product-example-preview{min-width:0!important;max-width:100%!important} @media(max-width:600px){ #product-showcase,html body.visual-home .world-followup .world-projects{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;scroll-snap-type:x mandatory;scroll-padding:0;gap:16px!important;min-width:0!important;width:100%!important;max-width:100%!important;box-sizing:border-box!important;overscroll-behavior-x:contain;padding-bottom:14px!important} #product-showcase .product-example,html body.visual-home .world-followup .world-projects>.world-project{flex:0 0 100%!important;width:100%!important;min-width:0!important;max-width:100%!important;scroll-snap-align:start;scroll-snap-stop:always;box-sizing:border-box!important} #product-showcase .product-example{aspect-ratio:auto;min-height:510px} #product-showcase .product-example-preview img{object-position:center 28%;padding:10px} #product-showcase .product-example-copy h2{font-size:23px} .preview-slider-controls{display:flex;align-items:center;justify-content:center;gap:20px;margin:12px 0 20px;color:#28473c;font-size:14px} .preview-slider-controls button{width:42px;height:42px;border:1px solid #becfc5;border-radius:50%;background:#edf4ef;color:#20352d;font-size:23px;cursor:pointer} .preview-slider-controls button:disabled{opacity:.35;cursor:default} } @media(min-width:601px){.preview-slider-controls{display:none!important}} .preview-slider-controls[hidden]{display:none!important} .preview-slider-shell{min-width:0;max-width:100%;position:relative} .preview-slider-shell[hidden]{display:none!important} @media(max-width:600px){ #product-showcase,html body.visual-home .world-followup .world-projects{scrollbar-width:none!important;padding-bottom:0!important} #product-showcase::-webkit-scrollbar,.world-followup .world-projects::-webkit-scrollbar{display:none;width:0;height:0} .preview-slider-shell .preview-slider-controls{position:absolute;inset:42% 8px auto;z-index:5;display:flex;justify-content:space-between;margin:0;pointer-events:none} .preview-slider-shell .preview-slider-controls button{pointer-events:auto;width:42px;height:42px;color:#fff;background:#20352dd9;border:1px solid #ffffff80;box-shadow:0 2px 12px #0003;font-size:25px} .preview-slider-shell .preview-slider-controls button:focus-visible{outline:3px solid #74c8bc;outline-offset:3px} #product-example-sofa .product-example-preview img{object-fit:cover;padding:0;object-position:center} }