/* Concept 04: the connected home is the interface. */
:root{--motion-ink:#102D23;--motion-light:#F7F7F2}
html{scroll-padding-top:24px}
.motion-header{height:84px;min-height:84px;padding:0 42px;background:var(--paper);border-bottom:1px solid #102d2310}
.motion-header .brand img{width:222px}.motion-header nav{gap:32px}.header-roof{min-width:168px}
.header-roof .roof-action-label,.motion-primary .roof-action-label,.floating-roof .roof-action-label{font-size:15px;line-height:1.4}
.motion-hero{position:relative;background:radial-gradient(ellipse at 50% 43%,#e1ecd8 0%,#F7F7F2 66%);color:var(--forest);overflow:hidden;padding:28px 0 24px;transition:background .7s,color .7s}
.motion-intro{text-align:center;position:relative;z-index:2;padding:0 24px}
.motion-intro .eyebrow{font-size:11px;margin-bottom:13px;letter-spacing:.17em}
.motion-intro h1{font-size:clamp(42px,5.2vw,68px);letter-spacing:-.05em;font-weight:400;line-height:1.05}
.motion-intro h1 em{font-style:normal;color:var(--emerald)}
.motion-intro>p:not(.eyebrow){font-size:16px;line-height:1.55;margin-top:16px;color:#66765e}
.motion-universe{position:relative;max-width:1120px;margin:0 auto;isolation:isolate}
.motion-hero .hero-sim{height:340px;min-height:340px;width:100%;max-width:100%;overflow:hidden;border-radius:0;background:transparent;perspective:900px;transition:filter .5s}
.motion-hero .hero-sim[data-time=night],.motion-hero .hero-sim[data-time=ev]{background:transparent}
.hero-sim .energy-house{top:54%;animation:motion-home 9s ease-in-out infinite}
@keyframes motion-home{0%,100%{transform:translate(-50%,-50%) rotateX(60deg) rotateZ(-35deg) scale(1.06)}50%{transform:translate(-50%,-50%) rotateX(57deg) rotateZ(-30deg) scale(1.06)}}
.scene-orbit{position:absolute;border:1px solid #698a6333;border-radius:50%;width:680px;height:270px;left:50%;top:46%;transform:translate(-50%,-50%) rotate(-8deg);z-index:-1;pointer-events:none}
.orbit-b{width:870px;height:335px;opacity:.45}
.scene-side-note{position:absolute;left:48px;top:50%;transform:translateY(-50%);max-width:180px;pointer-events:none}
.scene-side-note>span{font-size:11px;letter-spacing:.16em;color:#71856b}.scene-side-note p{font-size:16px;line-height:1.45;margin-top:17px;color:#536d4e}
.hero-sim .stage-sun{right:25%;top:31px;width:33px;height:33px;box-shadow:0 0 0 11px #c9e4a344,0 0 45px #a2d98b55}
.hero-sim .stage-stars{right:25%;top:10px;font-size:22px}
.hero-sim[data-time=night] .stage-sun{right:25%;top:31px;width:30px;height:30px}
.scene-hotspot{position:absolute;z-index:10;border:0;background:transparent;padding:4px;display:flex;align-items:center;gap:9px;color:var(--forest);text-align:left;font-size:12px;line-height:1.4;border-radius:28px;transition:transform .2s}
.scene-hotspot:hover{transform:translateY(-3px)}.hotspot-dot{border-radius:50%;width:34px;height:34px;display:grid;place-items:center;background:#F7F7F2ed;border:1px solid #96b08c;box-shadow:0 0 0 6px #F7F7F240,0 4px 20px #102d2315;font-size:22px;flex-shrink:0}
.hotspot-copy{background:#f7f7f2e8;backdrop-filter:blur(5px);padding:7px 11px;border:1px solid #cfdbca;border-radius:4px;box-shadow:0 2px 15px #102d2309}
.hotspot-copy b{font-weight:400;margin-left:10px}
.roof-hotspot{left:40%;top:12%}.battery-hotspot{right:19%;top:45%;flex-direction:row-reverse}.car-hotspot{left:30%;bottom:5%}
.scene-note{position:absolute;right:35px;bottom:15px;font-size:9px;letter-spacing:.09em;color:#7c8b75;line-height:1.5;pointer-events:none}
.motion-controls{width:min(800px,calc(100% - 48px));margin:5px auto 0;display:flex;justify-content:center;align-items:center;gap:28px;position:relative;z-index:5}
.motion-controls .segmented{border-color:#b8cbb0;background:#f7f7f299}.motion-controls .segmented button{font-size:14px;white-space:nowrap;min-height:43px;padding:10px 18px}.motion-primary{min-width:245px;background:var(--forest);color:var(--paper)}
.scene-narration{width:min(680px,calc(100% - 48px));text-align:center;margin:30px auto 0;min-height:132px}
.scene-narration .eyebrow{font-size:10px;margin-bottom:10px}.scene-narration h2{font-size:23px;line-height:1.25;letter-spacing:-.02em}.scene-narration>p:not(.eyebrow){font-size:14px;line-height:1.6;margin:12px auto 0;max-width:620px}
.scene-scroll{font-size:12px;display:flex;justify-content:center;align-items:center;gap:24px;margin:20px auto 0;color:#67805e;width:max-content}.scene-scroll span{font-size:18px}
.motion-hero[data-scene=night]{background:radial-gradient(ellipse at 50% 43%,#24523a 0%,#102D23 72%);color:#F7F7F2}
.motion-hero[data-scene=night] .motion-intro h1 em{color:#A2D98B}.motion-hero[data-scene=night] .motion-intro .eyebrow,.motion-hero[data-scene=night] .scene-narration .eyebrow{color:#A2D98B}
.motion-hero[data-scene=night] .motion-intro>p:not(.eyebrow),.motion-hero[data-scene=night] .scene-narration>p:not(.eyebrow),.motion-hero[data-scene=night] .scene-side-note p{color:#c1d4b8}
.motion-hero[data-scene=night] .scene-side-note>span,.motion-hero[data-scene=night] .scene-scroll,.motion-hero[data-scene=night] .scene-note{color:#aec6a3}
.motion-hero[data-scene=night] .motion-primary{background:var(--paper);color:var(--forest)}.motion-hero[data-scene=night] .scene-orbit{border-color:#a2d98b22}
.hero-sim[data-time=ev] .ev-car{filter:drop-shadow(0 0 9px #a2d98b99)}.hero-sim[data-time=ev] .charger-screen{box-shadow:0 0 18px #a2d98b99}.hero-sim[data-time=ev] .charging-cable #ev-energy-route{stroke-width:3}
.hero-sim.is-entering .energy-house{filter:brightness(1.06)}
.motion-proof{display:flex;align-items:center;justify-content:space-between;gap:30px;padding-block:28px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:14px;color:#63765b}
.motion-proof>span:before{content:'✓';color:var(--emerald);margin-right:9px}.motion-proof>a{font-size:15px;color:var(--forest)}.motion-proof small{display:block;font-size:12px;margin-top:4px;color:var(--muted)}
.day-story{padding-block:110px 80px;display:grid;grid-template-columns:1fr 1.2fr;gap:100px}.story-heading{position:sticky;top:35px;align-self:start}.story-heading h2{font-size:clamp(34px,4vw,52px);line-height:1.1}.story-heading>p:not(.eyebrow){font-size:16px;line-height:1.7;margin-top:28px;max-width:390px}
.story-chapters article{display:flex;gap:28px;padding:34px 0;border-top:1px solid var(--line)}.chapter-number{font-size:34px;line-height:1;letter-spacing:-.04em;color:#b2c5a7;padding-top:3px;min-width:43px}.story-chapters .eyebrow{font-size:11px;margin-bottom:16px}.story-chapters h3{font-size:29px;line-height:1.15}.story-chapters p:not(.eyebrow){font-size:16px;margin-top:18px;line-height:1.65}.story-chapters button{margin-top:23px;font-size:14px}
.work{padding-block:50px 95px}.human{margin-bottom:90px}.faq{padding-bottom:80px}.last-cta h2{font-size:clamp(40px,5vw,64px)}
#roof-entry{border:1px solid #d1ddc7;background:var(--paper);color:var(--forest);padding:0;width:min(520px,calc(100vw - 36px));max-height:88vh;max-height:88svh;margin:auto auto 24px;overflow-y:auto;border-radius:14px;box-shadow:0 25px 120px #051d15aa}
#roof-entry::backdrop{background:#071f17a6;backdrop-filter:blur(7px)}
.entry-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:10px 20px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--paper);z-index:20}.entry-heading>span{font-size:10px;letter-spacing:.12em;line-height:1.5}.entry-heading button{width:40px;height:40px;border:0;background:transparent;color:var(--forest);font-size:27px;line-height:1}
#roof-entry .analyser{border:0;border-radius:0;box-shadow:none;background:var(--paper);backdrop-filter:none}#roof-entry .app-top{padding:14px 26px}#roof-entry .start-panel{padding:24px 28px}#roof-entry .start-panel .eyebrow{font-size:11px;margin-bottom:14px}#roof-entry .start-panel h3{font-size:32px}#roof-entry .start-panel .panel-intro{font-size:16px;line-height:1.6;margin:17px 0 24px}#roof-entry .start-panel .field-note{font-size:12px}#roof-entry .start-panel .button{font-size:15px;min-height:49px}#roof-entry .start-panel .subtle-button{font-size:12px}#roof-entry .app-bottom{padding:16px 28px;font-size:12px}
body:has(#roof-entry[open]){overflow:hidden}
.floating-roof{position:fixed;bottom:22px;right:28px;z-index:30;box-shadow:0 8px 35px #102d2333;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .2s,transform .2s,visibility .2s}.floating-roof.is-visible{opacity:1;visibility:visible;transform:none}body:has(#roof-entry[open]) .floating-roof{visibility:hidden;opacity:0}
.studio-workspace{padding-top:65px;padding-bottom:30px;scroll-margin-top:24px}
@media(max-width:1050px){.motion-header{padding-inline:28px}.motion-header .brand img{width:210px}.scene-side-note{left:30px;max-width:135px}.scene-side-note p{font-size:14px}.roof-hotspot{left:37%}.battery-hotspot{right:12%}.car-hotspot{left:27%}.day-story{gap:55px}.motion-controls{gap:20px}.motion-controls .segmented button{padding-inline:15px}.motion-proof{gap:20px;font-size:13px}}
@media(max-width:800px){.motion-header nav{display:none}.motion-header{height:80px;min-height:80px}.scene-side-note{display:none}.hero-sim .energy-house{animation:motion-home-small 9s ease-in-out infinite}.roof-hotspot{left:34%;top:11%}.battery-hotspot{right:8%;top:46%}.car-hotspot{left:19%;bottom:4%}.scene-note{font-size:8px;right:25px;bottom:8px}.motion-controls{gap:18px;width:calc(100% - 48px)}.motion-primary{min-width:220px}.motion-controls .segmented button{font-size:13px;padding-inline:12px}.motion-proof{flex-wrap:wrap}.motion-proof>a{flex-basis:100%;padding-top:16px;border-top:1px solid var(--line)}.day-story{padding-block:75px 45px;grid-template-columns:1fr;gap:40px}.story-heading{position:static}.story-heading>p:not(.eyebrow){max-width:550px}.story-chapters article{padding-block:30px}.work{padding-block:35px 70px}.human{margin-bottom:70px}@keyframes motion-home-small{0%,100%{transform:translate(-50%,-50%) rotateX(60deg) rotateZ(-35deg) scale(.95)}50%{transform:translate(-50%,-50%) rotateX(57deg) rotateZ(-30deg) scale(.95)}}}
@media(max-width:560px){
 .motion-header{padding:12px 18px;gap:12px;min-height:78px;height:auto}.motion-header .brand img{width:176px}.header-roof{min-width:0;padding:11px 13px;gap:10px;min-height:44px}.header-roof .roof-action-label{font-size:12px;line-height:1.35;max-width:90px;text-align:left}.header-roof>span:last-child{font-size:17px}
 .motion-hero{padding-top:27px;padding-bottom:26px}.motion-intro{padding-inline:20px}.motion-intro .eyebrow{font-size:10px;letter-spacing:.1em;line-height:1.6;margin-bottom:12px}.motion-intro h1{font-size:40px;line-height:1.05}.motion-intro h1 em{display:block}.motion-intro>p:not(.eyebrow){font-size:15px;line-height:1.55;margin-top:17px}.motion-intro>p br{display:none}
 .motion-hero .hero-sim{height:290px;min-height:290px}.hero-sim .energy-house{top:54%;animation:none;transform:translate(-50%,-50%) rotateX(60deg) rotateZ(-35deg) scale(.76)}
 .scene-orbit{width:390px;height:200px;top:50%}.orbit-b{width:510px;height:250px}.hero-sim .stage-sun,.hero-sim[data-time=night] .stage-sun{right:12%;top:24px;width:25px;height:25px}.hero-sim .stage-stars{right:8%;top:3px;font-size:17px}
 .scene-hotspot{font-size:10px;gap:6px;padding:5px;min-height:44px}.hotspot-dot{width:29px;height:29px;font-size:19px;box-shadow:0 0 0 4px #f7f7f233,0 4px 15px #102d2315}.hotspot-copy{padding:6px 8px;font-size:10px}.hotspot-copy b{margin-left:5px}.roof-hotspot{left:23%;top:10%}.battery-hotspot{right:2%;top:45%}.car-hotspot{left:9%;bottom:5%}.scene-note{font-size:7px;right:15px;bottom:0;letter-spacing:.025em}
 .motion-controls{flex-direction:column;width:calc(100% - 40px);gap:14px;margin-top:15px}.motion-primary{order:-1;width:100%;max-width:355px;min-height:50px;font-size:15px}.motion-controls .segmented{padding:4px;max-width:100%}.motion-controls .segmented button{font-size:13px;min-height:40px;padding:9px 15px}
 .scene-narration{width:calc(100% - 44px);min-height:0;margin-top:28px}.scene-narration .eyebrow{font-size:10px;margin-bottom:11px}.scene-narration h2{font-size:22px;line-height:1.25}.scene-narration>p:not(.eyebrow){font-size:15px;line-height:1.6;margin-top:14px}.scene-scroll{margin-top:23px;font-size:12px}
 .motion-proof{padding-block:24px;gap:15px;font-size:13px}.motion-proof>span{flex-basis:100%}.motion-proof>a{font-size:15px;line-height:1.5}.motion-proof small{font-size:12px}
 .day-story{padding-top:60px;gap:30px}.story-heading h2{font-size:34px}.story-heading>p:not(.eyebrow){font-size:16px;margin-top:23px}.story-heading>p br{display:none}.story-chapters article{gap:20px;padding-block:29px}.chapter-number{font-size:28px;min-width:35px}.story-chapters h3{font-size:27px}.story-chapters .eyebrow{font-size:10px;line-height:1.6}.story-chapters p:not(.eyebrow){font-size:16px}.story-chapters button{font-size:14px}
 .work{padding-top:30px;padding-bottom:60px}.human{margin-bottom:60px}.faq{padding-bottom:50px}
 #roof-entry{width:calc(100vw - 20px);max-height:88svh;margin:auto auto 10px;border-radius:13px}#roof-entry .entry-heading{padding:9px 17px}.entry-heading>span{font-size:10px;letter-spacing:.07em}#roof-entry .app-top{padding:13px 22px}#roof-entry .start-panel{padding:22px}#roof-entry .start-panel h3{font-size:28px}#roof-entry .start-panel .panel-intro{font-size:15px;line-height:1.6}#roof-entry .start-panel .eyebrow{display:none}#roof-entry .app-bottom{padding:16px 22px}
 .floating-roof{bottom:15px;right:18px;left:18px;font-size:15px;min-height:48px;padding:13px 20px}footer{padding-bottom:100px}
}
@media(max-width:350px){.motion-header{padding-inline:14px;gap:8px}.motion-header .brand img{width:154px}.header-roof{padding-inline:10px;gap:7px}.header-roof .roof-action-label{font-size:11px;max-width:82px}.motion-intro h1{font-size:36px}.hero-sim .energy-house{transform:translate(-50%,-50%) rotateX(60deg) rotateZ(-35deg) scale(.65)}.motion-hero .hero-sim{height:270px;min-height:270px}.roof-hotspot{left:17%;top:10%}.battery-hotspot{right:0;top:43%}.car-hotspot{left:3%;bottom:4%}.hotspot-copy{font-size:9px}.scene-note{font-size:6px}.motion-controls .segmented button{font-size:12px;padding-inline:12px}.story-chapters article{gap:15px}.story-chapters h3{font-size:25px}}
@media(prefers-reduced-motion:reduce){.motion-hero .hero-sim .energy-house{animation:none!important;transform:translate(-50%,-50%) rotateX(60deg) rotateZ(-35deg) scale(1.06)}.scene-hotspot:hover{transform:none}}
@media(max-width:800px) and (prefers-reduced-motion:reduce){.motion-hero .hero-sim .energy-house{transform:translate(-50%,-50%) rotateX(60deg) rotateZ(-35deg) scale(.95)}}
@media(max-width:560px) and (prefers-reduced-motion:reduce){.motion-hero .hero-sim .energy-house{transform:translate(-50%,-50%) rotateX(60deg) rotateZ(-35deg) scale(.76)}}
@media(max-width:350px) and (prefers-reduced-motion:reduce){.motion-hero .hero-sim .energy-house{transform:translate(-50%,-50%) rotateX(60deg) rotateZ(-35deg) scale(.65)}}

/* Concept 05 — photographic connected home. */
.motion-universe{max-width:1040px;margin:30px auto 0;padding:0 24px}
.scene-orbit,.scene-side-note{display:none}
.motion-hero .hero-sim{position:relative;aspect-ratio:1672/941;height:auto;min-height:0!important;perspective:none;border-radius:12px;isolation:isolate;box-shadow:0 18px 55px #102d2312;background:#d8dfd2}
.home-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:opacity 1.2s ease,filter .7s;z-index:0;pointer-events:none}
.photo-night{opacity:0}.hero-sim[data-time=night] .photo-night{opacity:1}.hero-sim[data-time=night] .photo-day{opacity:0}
.hero-sim:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(180deg,#102d2330,transparent 25%,transparent 78%,#102d234a)}
.photo-time{position:absolute;z-index:2;top:21px;left:24px;font-size:9px;letter-spacing:.16em;color:white;text-shadow:0 1px 6px #102d23}
.roof-hotspot{left:46%;top:17%;bottom:auto;right:auto}.battery-hotspot{left:auto;right:22%;top:59%;bottom:auto;flex-direction:row-reverse}.car-hotspot{left:17%;top:76%;bottom:auto;right:auto}
.scene-hotspot{color:#102d23}.hotspot-copy{background:#f7f7f2ee;border-color:#ffffff90}.hotspot-dot{background:#f7f7f2f5;border-color:#f7f7f2;box-shadow:0 0 0 6px #f7f7f240,0 4px 20px #102d2340}
.scene-hotspot:focus-visible{outline:3px solid #a2d98b;outline-offset:7px}
.scene-note{z-index:2;right:21px;bottom:15px;color:#fff!important;text-shadow:0 1px 5px #102d23;font-size:8px}
.motion-controls{margin-top:26px}.scene-narration{margin-top:27px;min-height:110px}.motion-hero{padding-bottom:25px}
.hero-sim.is-entering .home-photo{filter:brightness(1.07)}
.hero-sim[data-time=ev] .car-hotspot .hotspot-dot{background:#a2d98b;box-shadow:0 0 0 8px #a2d98b44,0 0 25px #a2d98b99}
.hero-sim[data-time=night] .battery-hotspot .hotspot-dot{background:#a2d98b;box-shadow:0 0 0 8px #a2d98b44,0 0 25px #a2d98b77}
@media(min-width:1400px){.motion-universe{max-width:1120px}}
@media(max-width:800px){.motion-universe{margin-top:26px;padding-inline:22px}.roof-hotspot{left:44%;top:15%}.battery-hotspot{right:21%;top:56%}.car-hotspot{left:15%;top:74%}.hotspot-copy{font-size:11px}.photo-time{top:16px;left:18px;font-size:8px}}
@media(max-width:560px){.motion-universe{padding-inline:12px;margin-top:25px}.motion-hero .hero-sim{height:auto;aspect-ratio:1672/1060;border-radius:8px}.home-photo{object-fit:cover;object-position:50% 50%}.photo-time{font-size:6px;top:12px;left:12px;letter-spacing:.1em}.scene-note{font-size:5px;right:10px;bottom:8px;letter-spacing:.05em}.scene-hotspot{padding:7px;min-width:44px;min-height:44px;gap:0}.hotspot-copy{display:none}.hotspot-dot{width:27px;height:27px;font-size:18px;box-shadow:0 0 0 4px #f7f7f240,0 2px 10px #102d2330}.roof-hotspot{left:48%;top:14%}.battery-hotspot{right:18%;top:54%}.car-hotspot{left:17%;top:70%}.motion-controls{margin-top:22px}.scene-narration{margin-top:25px}.motion-intro h1{font-size:40px}.scene-scroll{margin-top:18px}}
@media(prefers-reduced-motion:reduce){.home-photo,.motion-hero{transition:none!important}.scene-hotspot:hover{transform:none}}