/* Concept 06: a full-bleed home, framed by forest green. */
.motion-hero{min-height:900px;min-height:max(860px,100svh);padding:0 0 58px;background:#244b38;color:var(--paper);isolation:isolate;display:flex;flex-direction:column;justify-content:flex-start}
.motion-hero[data-scene=night]{background:#102d23}
.motion-universe{position:absolute;inset:0;max-width:none;width:100%;margin:0;padding:0;z-index:-2}
.motion-hero .hero-sim{height:100%;width:100%;aspect-ratio:auto;border-radius:0;box-shadow:none;background:#244b38;overflow:hidden}
.home-photo{object-fit:cover;object-position:50% 52%}
.hero-sim:after{z-index:1;background:linear-gradient(180deg,#102d23c2 0%,#102d2338 18%,transparent 45%,#102d2333 66%,#102d23f2 100%),linear-gradient(90deg,#102d23bb 0%,#102d2370 22%,transparent 62%)}
.motion-hero[data-scene=night] .hero-sim:after{background:linear-gradient(180deg,#102d23db 0%,#102d2350 20%,#102d2322 50%,#102d2360 70%,#102d23 100%),linear-gradient(90deg,#102d23c9,transparent 68%)}
.motion-header{position:relative;z-index:15;width:calc(100% - 96px);height:104px;min-height:104px;padding:0;margin:0 auto;background:transparent;border-bottom:1px solid #f7f7f238;gap:32px;color:#f7f7f2}
.motion-header .brand img{width:238px;max-width:100%}.motion-header nav{margin-left:auto;gap:30px;font-size:16px}.motion-header nav a{padding-block:12px;text-shadow:0 1px 10px #102d2366}.motion-header nav a:hover{color:#a2d98b}
.header-roof{background:#f7f7f2;color:#102d23;min-width:183px;font-size:16px;border-radius:4px}.header-roof:hover{background:#c5e8b7}.header-roof .roof-action-label{font-size:16px}
.motion-intro{position:relative;text-align:left;z-index:2;padding:48px 48px 0;width:520px;max-width:48%;pointer-events:none}
.motion-intro .eyebrow,.motion-hero[data-scene=night] .motion-intro .eyebrow{font-size:13px;line-height:1.6;letter-spacing:.1em;color:#d9edcf;margin-bottom:21px;text-shadow:0 1px 8px #102d2366}
.motion-intro h1{font-size:clamp(54px,5.8vw,82px);line-height:1.01;letter-spacing:-.055em;color:#f7f7f2;text-wrap:initial}.motion-intro h1 em,.motion-hero[data-scene=night] .motion-intro h1 em{color:#d7edcb;display:block;white-space:nowrap}
.motion-intro>p:not(.eyebrow),.motion-hero[data-scene=night] .motion-intro>p:not(.eyebrow){font-size:18px;line-height:1.6;color:#f0f4e9;margin-top:24px;max-width:360px;text-shadow:0 1px 8px #102d2366}
.scene-hotspot{font-size:14px;gap:10px;padding:5px;color:#102d23;z-index:4}.hotspot-dot{width:36px;height:36px;font-size:23px;box-shadow:0 0 0 5px #f7f7f233,0 4px 20px #102d2340}.hotspot-copy{font-size:14px;padding:9px 13px;background:#f7f7f2f5;backdrop-filter:blur(12px);border:1px solid #fff;display:block;white-space:nowrap}.hotspot-copy b{margin-left:9px}
.roof-hotspot{left:48%;top:29%}.battery-hotspot{right:20%;top:60%;left:auto}.car-hotspot{left:15%;top:72%;bottom:auto}
.scene-note{font-size:12px;line-height:1.5;letter-spacing:.015em;right:48px;bottom:226px;padding:6px 10px;background:#102d23bc;border-radius:3px;color:#f7f7f2!important;text-shadow:none;z-index:2}
.scene-dock{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;margin:auto 48px 0;padding:24px 28px;background:#102d23e8;border:1px solid #b1d69b40;backdrop-filter:blur(20px);border-radius:8px;position:relative;z-index:5;color:#f7f7f2}
.scene-narration{width:auto;margin:0;text-align:left;min-height:120px;max-width:560px}.scene-narration .eyebrow,.motion-hero[data-scene=night] .scene-narration .eyebrow{font-size:12px;color:#bdddab;letter-spacing:.09em;line-height:1.6;margin-bottom:10px}.scene-narration h2{font-size:27px;line-height:1.15;letter-spacing:-.025em;color:#f7f7f2}.scene-narration>p:not(.eyebrow),.motion-hero[data-scene=night] .scene-narration>p:not(.eyebrow){font-size:16px;line-height:1.6;margin-top:11px;color:#dfebd8;max-width:520px}
.motion-controls{margin:0;width:auto;display:flex;flex-direction:column;gap:14px;align-items:stretch}.motion-controls .segmented{background:#f7f7f20d;border:1px solid #b5d3a950;padding:4px;border-radius:30px}.motion-controls .segmented button{font-size:15px;min-height:44px;padding:10px 20px;color:#e1ecd9;background:transparent;border-radius:26px}.motion-controls .segmented button.selected{background:#d5eacb;color:#102d23}.motion-controls .segmented button:hover{background:#b1d69b30}.motion-controls .segmented button.selected:hover{background:#d5eacb}
.motion-primary,.motion-hero[data-scene=night] .motion-primary{background:#a2d98b;color:#102d23;width:100%;border-radius:4px;min-height:50px}.motion-primary:hover{background:#c5e8b7}.motion-primary .roof-action-label{font-size:16px}
.scene-scroll,.motion-hero[data-scene=night] .scene-scroll{position:absolute;bottom:17px;left:50%;transform:translateX(-50%);font-size:13px;line-height:1.5;color:#d1e4c7;margin:0;z-index:6;gap:14px}
.motion-proof{font-size:15px}.motion-proof>a{font-size:16px}.motion-proof small{font-size:13px}.eyebrow{font-size:13px}.project span{font-size:14px}.small{font-size:14px}footer p,footer>a,footer .concept-links{font-size:14px;line-height:1.7}.concept-links{display:flex;gap:16px;flex-wrap:wrap}
@media(min-width:1600px){.motion-hero{min-height:max(960px,100svh)}.motion-header{width:calc(100% - 144px)}.motion-intro{padding-left:72px;padding-top:65px}.scene-dock{margin-inline:72px}.scene-note{right:72px}.roof-hotspot{top:27%}.battery-hotspot{top:58%}}
@media(max-width:1100px){.motion-header{width:calc(100% - 64px);gap:24px}.motion-header .brand img{width:210px}.motion-header nav{gap:22px;font-size:15px}.header-roof{min-width:165px}.header-roof .roof-action-label{font-size:15px}.motion-intro{padding:42px 32px 0;max-width:52%;width:480px}.motion-intro h1{font-size:61px}.motion-intro>p:not(.eyebrow){font-size:17px}.scene-dock{margin-inline:32px;gap:25px;padding:22px}.scene-narration{max-width:440px}.scene-narration h2{font-size:24px}.scene-narration>p:not(.eyebrow){font-size:15px}.motion-controls .segmented button{padding-inline:15px}.scene-note{right:32px}.roof-hotspot{left:51%;top:32%}.battery-hotspot{right:16%;top:61%}.car-hotspot{left:12%;top:72%}}
@media(max-width:800px){.motion-header{height:92px;min-height:92px}.motion-header nav{display:none}.motion-header .brand img{width:224px}.motion-intro{max-width:65%;padding-top:42px}.motion-intro h1{font-size:60px}.motion-hero{min-height:940px}.scene-dock{gap:24px;grid-template-columns:1fr}.scene-narration{min-height:0;max-width:none}.scene-narration>p:not(.eyebrow){max-width:100%;font-size:16px}.motion-controls{flex-direction:row;gap:20px;align-items:center;justify-content:space-between}.motion-primary{width:auto;min-width:235px}.motion-controls .segmented button{padding-inline:12px;font-size:14px}.scene-note{bottom:278px}.battery-hotspot{right:8%;top:57%}.car-hotspot{top:64%;left:7%}.roof-hotspot{top:33%;left:55%}.hotspot-copy{font-size:13px}.hotspot-dot{width:32px;height:32px}}
@media(max-width:560px){
 .motion-hero{min-height:0;padding:0 0 60px;background:#234633;overflow:hidden;display:flex;flex-direction:column}.motion-hero[data-scene=night]{background:#102d23}
 .motion-header{width:calc(100% - 36px);height:82px;min-height:82px;padding:0;gap:16px}.motion-header .brand img{width:184px}.header-roof{min-width:0;padding:11px 13px;gap:10px;min-height:44px}.header-roof .roof-action-label{font-size:13px;line-height:1.4;max-width:85px}.header-roof>span:last-child{font-size:18px}
 .motion-intro{width:100%;max-width:100%;padding:31px 24px 0}.motion-intro .eyebrow,.motion-hero[data-scene=night] .motion-intro .eyebrow{font-size:11px;letter-spacing:.09em;margin-bottom:17px}.motion-intro h1{font-size:52px;line-height:1.02}.motion-intro h1 em{white-space:normal;display:block}.motion-intro>p:not(.eyebrow),.motion-hero[data-scene=night] .motion-intro>p:not(.eyebrow){font-size:17px;line-height:1.6;margin-top:19px;max-width:100%}
 .motion-universe{position:relative;inset:auto;z-index:1;width:100%;height:340px;max-width:none;padding:0;margin:9px 0 0}.motion-hero .hero-sim{height:100%;aspect-ratio:auto;border-radius:0;background:transparent}.home-photo{object-fit:cover;object-position:50% 50%}
 .hero-sim:after{background:linear-gradient(180deg,#234633 0%,#23463300 14%,transparent 78%,#234633 100%)}.motion-hero[data-scene=night] .hero-sim:after{background:linear-gradient(180deg,#102d23 0%,#102d2300 14%,transparent 78%,#102d23 100%)}
 .scene-hotspot{font-size:12px;gap:6px;padding:5px;min-width:44px;min-height:44px}.hotspot-copy{display:block;font-size:12px;padding:6px 8px;border-radius:3px;line-height:1.4}.hotspot-copy b{margin-left:4px}.hotspot-dot{width:27px;height:27px;font-size:18px;box-shadow:0 0 0 4px #f7f7f233}.roof-hotspot{top:17%;left:44%}.battery-hotspot{top:53%;right:9%}.car-hotspot{top:72%;left:4%}
 .scene-note{font-size:11px;line-height:1.5;bottom:0;right:20px;left:auto;padding:4px 7px;background:#102d23bd}
 .scene-dock{margin:20px 18px 0;grid-template-columns:1fr;padding:21px;gap:20px;border-radius:6px;backdrop-filter:none;background:#102d23b5;border-color:#b1d69b40}.scene-narration{text-align:left;width:100%;min-height:0;margin:0}.scene-narration .eyebrow,.motion-hero[data-scene=night] .scene-narration .eyebrow{font-size:11px;margin-bottom:11px}.scene-narration h2{font-size:24px;line-height:1.18}.scene-narration>p:not(.eyebrow),.motion-hero[data-scene=night] .scene-narration>p:not(.eyebrow){font-size:16px;line-height:1.6;margin-top:13px}
 .motion-controls{width:100%;margin:0;gap:14px;flex-direction:column;align-items:stretch}.motion-primary{order:0;max-width:none;min-width:0;width:100%;min-height:50px}.motion-controls .segmented{max-width:100%;width:100%;display:flex;justify-content:space-between}.motion-controls .segmented button{font-size:13px;padding:10px 12px;min-height:44px;flex:1;white-space:nowrap}.motion-primary .roof-action-label{font-size:15px}.scene-scroll,.motion-hero[data-scene=night] .scene-scroll{font-size:12px;bottom:20px}
 .motion-proof{font-size:14px}.motion-proof>a{font-size:16px}.motion-proof small{font-size:13px}.story-chapters .eyebrow,.eyebrow{font-size:12px}.small{font-size:13px}footer p,footer>a,footer .concept-links{font-size:13px}
}
@media(max-width:350px){.motion-header{width:calc(100% - 28px);gap:10px}.motion-header .brand img{width:161px}.header-roof{padding-inline:10px}.header-roof .roof-action-label{font-size:12px;max-width:75px}.motion-intro{padding-inline:20px}.motion-intro h1{font-size:46px}.motion-intro .eyebrow{font-size:10px}.motion-universe{height:320px}.motion-controls .segmented button{font-size:12px;padding-inline:8px}.scene-dock{margin-inline:14px;padding:18px}.roof-hotspot{left:43%}.battery-hotspot{right:6%}.car-hotspot{left:1%}}
@media(prefers-reduced-motion:reduce){.motion-hero,.home-photo{transition:none!important}}
/* Keep every equipment hotspot above the information dock. */
@media(min-width:801px){.motion-hero{min-height:max(780px,100svh)}.motion-universe{bottom:160px}.battery-hotspot{top:65%}.car-hotspot{top:74%}.scene-note{top:118px;bottom:auto}.hero-sim:after{background:linear-gradient(180deg,#102d23bf 0%,#102d2330 25%,transparent 65%,#102d23 100%),linear-gradient(90deg,#102d23cc 0%,#102d2360 26%,transparent 65%)}}
@media(min-width:1600px){.motion-hero{min-height:max(900px,100svh)}}
@media(min-width:561px) and (max-width:800px){.motion-universe{bottom:200px}.scene-note{top:108px;bottom:auto}.car-hotspot{top:77%}.battery-hotspot{top:66%}}
@media(min-width:561px){.home-photo{object-position:50% 0}.roof-hotspot{top:22%}.battery-hotspot{top:70%}.car-hotspot{top:78%}}
@media(max-width:560px){.motion-universe{height:300px}.motion-intro .eyebrow,.motion-hero[data-scene=night] .motion-intro .eyebrow,.scene-narration .eyebrow,.motion-hero[data-scene=night] .scene-narration .eyebrow{font-size:12px}.scene-note{font-size:12px}}

/* The energy panel sits below the photograph in normal page flow. */
.motion-hero{min-height:0;display:block;padding-bottom:58px;background:#234633}
.scene-visual{position:relative;isolation:isolate;height:clamp(620px,56.28vw,1000px);overflow:hidden}
.scene-visual .motion-universe{position:absolute;inset:0;height:auto;margin:0;padding:0;z-index:-2}
.scene-visual .hero-sim{height:100%;min-height:0!important}
.scene-visual .hero-sim:after{background:linear-gradient(180deg,#102d23b8 0%,#102d2320 26%,transparent 62%),linear-gradient(90deg,#102d23bd 0%,#102d2350 26%,transparent 65%)}
.motion-hero[data-scene=night] .scene-visual .hero-sim:after{background:linear-gradient(180deg,#102d23cc 0%,#102d2340 26%,transparent 65%),linear-gradient(90deg,#102d23bb,transparent 68%)}
.scene-dock{margin:26px 48px 0;background:#102d23;backdrop-filter:none}
@media(min-width:1600px){.scene-dock{margin-inline:72px}}
@media(max-width:1100px){.scene-dock{margin-inline:32px}}
@media(max-width:800px) and (min-width:561px){.scene-visual{height:640px}.scene-visual .home-photo{object-position:50% 0}}
@media(max-width:560px){.scene-visual{height:auto;overflow:hidden}.scene-visual .motion-universe{position:relative;inset:auto;height:300px;margin-top:9px;z-index:1}.scene-visual .hero-sim:after{background:linear-gradient(180deg,#234633,transparent 14%)}.motion-hero[data-scene=night] .scene-visual .hero-sim:after{background:linear-gradient(180deg,#102d23,transparent 14%)}.scene-dock{margin:24px 18px 0;background:#102d23}}
@media(max-width:350px){.scene-dock{margin-inline:14px}}
/* Keep the photo and its controls together in the first desktop viewport. */
@media(min-width:801px){
 .motion-hero{height:100svh;min-height:640px;padding-bottom:0;display:grid;grid-template-rows:minmax(0,1fr) auto}
 .scene-visual{height:auto;min-height:0}
 .scene-visual .motion-universe{inset:0}
 .scene-visual .hero-sim{background:#294a36}
 .scene-visual .home-photo{object-fit:contain;object-position:right center;width:76%;left:auto;right:0}
 .scene-visual .hero-sim:after{background:linear-gradient(180deg,#102d2380,transparent 30%),linear-gradient(90deg,#234633 0%,#234633 21%,#23463377 38%,transparent 62%)}
 .motion-hero[data-scene=night] .scene-visual .hero-sim{background:#102d23}
 .motion-hero[data-scene=night] .scene-visual .hero-sim:after{background:linear-gradient(180deg,#102d23aa,transparent 35%),linear-gradient(90deg,#102d23 0%,#102d23 21%,#102d2377 38%,transparent 62%)}
 .motion-header{height:88px;min-height:88px}
 .motion-intro{padding-top:35px;max-width:43%;width:490px}
 .motion-intro h1{font-size:clamp(49px,5.1vw,74px)}
 .motion-intro>p:not(.eyebrow){font-size:17px;max-width:300px}
 .scene-dock{margin:0;padding:20px 48px;border:0;border-top:1px solid #bad6ab33;border-radius:0;gap:35px;background:#102d23}
 .scene-narration{min-height:0}.scene-narration h2{font-size:24px}.scene-narration>p:not(.eyebrow){font-size:15px;max-width:540px}
 .scene-scroll{display:none}
 .scene-note{top:99px;right:26px;font-size:11px}
 .roof-hotspot{left:60%;top:31%}.battery-hotspot{right:16%;top:67%}.car-hotspot{left:40%;top:79%}
}
@media(min-width:801px) and (max-height:740px){.motion-intro{padding-top:26px}.motion-intro h1{font-size:56px}.motion-intro .eyebrow{margin-bottom:15px}.motion-intro>p:not(.eyebrow){margin-top:18px;font-size:16px}.scene-dock{padding-block:17px}.scene-narration .eyebrow{margin-bottom:7px}.scene-narration>p:not(.eyebrow){margin-top:8px}.motion-controls{gap:10px}}
@media(min-width:1600px){.scene-dock{padding-inline:72px}}
@media(max-width:560px){
 .motion-hero{padding-bottom:0}.motion-intro{padding:23px 24px 0}.motion-intro .eyebrow{display:none}.motion-intro h1{font-size:43px}.motion-intro>p:not(.eyebrow),.motion-hero[data-scene=night] .motion-intro>p:not(.eyebrow){font-size:15px;line-height:1.5;margin-top:13px}
 .scene-visual .motion-universe{height:auto;aspect-ratio:1672/941;margin-top:16px}.scene-visual .home-photo{object-fit:contain}
 .scene-dock{margin:0;padding:17px 22px;border:0;border-radius:0;gap:22px}.motion-controls{order:-1;gap:10px}.scene-narration h2{font-size:22px}.scene-narration>p:not(.eyebrow),.motion-hero[data-scene=night] .scene-narration>p:not(.eyebrow){font-size:15px}.scene-scroll{display:none}.scene-note{font-size:10px;bottom:4px;right:12px}.roof-hotspot{top:10%;left:44%}.battery-hotspot{top:48%;right:15%}.car-hotspot{top:69%;left:8%}
}
@media(min-width:801px){.motion-hero{grid-template-columns:minmax(0,1fr);justify-content:stretch;align-items:stretch}.scene-visual,.scene-dock{width:100%;min-width:0}}
/* Clear photography: no green overlay on the house or the car. */
.scene-visual .hero-sim:after,.motion-hero[data-scene=night] .scene-visual .hero-sim:after{display:none;background:none}
.scene-hotspot{background:#102d23ed;border:1px solid #d0e6c477;color:#f7f7f2;padding:5px 12px 5px 5px;gap:8px;border-radius:28px;backdrop-filter:blur(10px);box-shadow:0 3px 14px #102d2326;min-height:44px}
.scene-hotspot .hotspot-dot{width:28px;height:28px;background:#a2d98b;color:#102d23;border:0;box-shadow:none;font-size:20px}
.scene-hotspot .hotspot-copy{background:transparent;border:0;box-shadow:none;backdrop-filter:none;padding:0;font-size:13px;line-height:1.4;color:#f7f7f2}
.scene-hotspot:hover{background:#102d23;border-color:#a2d98b;transform:translateY(-2px)}
.hero-sim[data-time=night] .battery-hotspot .hotspot-dot,.hero-sim[data-time=ev] .car-hotspot .hotspot-dot{box-shadow:0 0 0 3px #a2d98b33;background:#c4ecb3}
@media(min-width:801px){
 .scene-visual .motion-universe{inset:88px 0 0}
 .scene-visual .home-photo{width:70%;object-fit:contain;object-position:right center}
 .motion-header{width:100%;padding-inline:48px;background:#234633;border-bottom:1px solid #c0dbb02b}
 .motion-hero[data-scene=night] .motion-header{background:#102d23}
 .motion-intro{width:30%;max-width:30%;padding-right:18px;pointer-events:auto}
 .motion-intro h1{font-size:clamp(38px,3.65vw,64px)}
 .motion-intro h1 em{white-space:normal}
 .motion-intro .eyebrow{font-size:11px;letter-spacing:.06em}
 .motion-intro>p:not(.eyebrow){font-size:16px;max-width:270px}
 .scene-note{top:12px;right:18px}
 .roof-hotspot{left:64%;top:19%}.battery-hotspot{right:13%;top:62%}.car-hotspot{left:41%;top:78%}
}
@media(min-width:1600px){.motion-header{padding-inline:72px}}
@media(max-width:800px) and (min-width:561px){.motion-intro{background:#234633;padding-bottom:20px}.motion-hero[data-scene=night] .motion-intro{background:#102d23}}
@media(max-width:560px){.scene-hotspot{min-height:38px;padding:4px 8px 4px 4px;gap:5px}.scene-hotspot .hotspot-dot{width:23px;height:23px;font-size:17px}.scene-hotspot .hotspot-copy{font-size:11px}.scene-hotspot:before{content:'';position:absolute;inset:-4px;border-radius:28px}}
/* Restore the immersive composition, with a shorter fade clear of the car. */
@media(min-width:801px){
 .scene-visual .motion-universe{inset:0}
 .scene-visual .home-photo{width:76%;object-fit:contain;object-position:right center}
 .motion-header{width:calc(100% - 96px);padding:0;margin-inline:auto;background:transparent}
 .motion-hero[data-scene=night] .motion-header{background:transparent}
 .motion-intro{width:490px;max-width:43%;padding-right:48px;pointer-events:none}
 .motion-intro h1{font-size:clamp(49px,5.1vw,74px);text-shadow:0 1px 12px #102d2322}
 .motion-intro h1 em{white-space:nowrap}
 .motion-intro .eyebrow{font-size:13px;letter-spacing:.1em}
 .motion-intro>p:not(.eyebrow){font-size:17px;max-width:300px;text-shadow:0 1px 8px #102d2355}
 .scene-visual .hero-sim:after{display:block;background:linear-gradient(90deg,#234633 0%,#234633 18%,#234633a8 23%,transparent 29%),linear-gradient(180deg,#102d2355 0%,transparent 90px)}
 .motion-hero[data-scene=night] .scene-visual .hero-sim:after{display:block;background:linear-gradient(90deg,#102d23 0%,#102d23 18%,#102d23a8 23%,transparent 29%),linear-gradient(180deg,#102d2366 0%,transparent 90px)}
 .scene-note{top:99px;right:26px}
 .roof-hotspot{left:60%;top:31%}.battery-hotspot{right:16%;top:67%}.car-hotspot{left:40%;top:79%}
}
@media(min-width:801px) and (max-height:740px){.motion-intro h1{font-size:56px}.motion-intro>p:not(.eyebrow){font-size:16px}}
@media(min-width:1600px){.motion-header{width:calc(100% - 144px)}}