/* Complete media frames: do not crop faces, mascots or hardware to fit a tile. */
.demo .demo-hero{padding:44px 0}
.demo:not(.flagship) .demo-hero .grid2{align-items:center;gap:44px}
.demo:not(.flagship) .demo-hero h1{font-size:clamp(48px,5.6vw,76px);line-height:1.06}
.demo:not(.flagship) .hero-picture{padding-bottom:24px;min-width:0}
.demo:not(.flagship) .hero-picture img{display:block;width:100%;height:auto;max-height:62svh;aspect-ratio:auto;object-fit:contain;border-radius:20px;background:var(--soft)}
.demo:not(.flagship) .hero-caption{font-size:21px;line-height:1.3;transform:none;left:16px;bottom:0;padding:16px 20px;border-radius:10px;max-width:calc(100% - 32px)}
.demo .demo-return-brand{display:flex;gap:9px;align-items:center}
.demo-top{align-items:center;font-size:16px}
.demo-return-brand{display:inline-flex;gap:9px;align-items:center;text-decoration:none}
.demo-return-brand img{width:30px;height:34px;object-fit:contain}
.demo .demo-menu{display:none}
.demo .demo-strip{font-size:16px;letter-spacing:.03em;line-height:1.5}
.demo .card{border-radius:20px;box-shadow:0 12px 32px #0000000c;padding:29px}
.demo .card h3{font-size:29px;line-height:1.15}
.demo .card p{font-size:18px;line-height:1.65}
.demo .project-wall{gap:26px;align-items:start}
.demo .project-wall figure{margin:0;min-width:0}
.demo .project-wall button{width:100%;display:block;border-radius:18px;background:var(--soft)}
.demo .project-wall img{display:block;width:100%;height:clamp(240px,48svh,420px);aspect-ratio:auto;object-fit:contain;background:var(--soft)}
.demo .project-wall button:hover img{transform:scale(1.025)}
.demo .project-wall figcaption{padding:19px 2px}
.demo .project-wall figcaption>span{display:block;font-size:16px;letter-spacing:.08em;margin-bottom:10px;opacity:.8}
.demo .project-wall figcaption>strong{font-size:26px;line-height:1.2;display:block;margin-bottom:10px}
.demo .project-wall figcaption p{font-size:17px;line-height:1.55;margin:0}
.demo .gallery-editorial{grid-template-columns:1.4fr 1fr}
.demo .gallery-editorial figure:first-child{grid-row:span 2}
.demo .gallery-editorial figure:first-child img{height:clamp(320px,63svh,570px)}
.demo .gallery-mosaic{grid-template-columns:repeat(3,minmax(0,1fr))}
.demo .gallery-mosaic figure:first-child{grid-column:span 2}
.demo .gallery-viewer{grid-template-columns:repeat(3,minmax(0,1fr))}
.demo .gallery-viewer img{height:clamp(220px,38svh,350px)}
.demo .gallery-carousel{display:block;max-width:880px;margin:auto}
.demo .gallery-carousel img{height:clamp(240px,46svh,420px)}
.demo .gallery-cinematic{grid-template-columns:1fr 1fr}
.demo .gallery-cinematic figure:first-child{grid-column:1/-1}
.demo .gallery-cinematic figure:first-child img{height:clamp(280px,55svh,500px)}
.demo .gallery-stories{grid-template-columns:repeat(3,minmax(0,1fr))}
.demo .gallery-stories figure{border:1px solid color-mix(in srgb,var(--ink) 24%,transparent);border-radius:18px;overflow:hidden}
.demo .gallery-stories figcaption{padding:21px}
.demo .gallery-stories img{height:300px}
.demo video,.profile-section video{display:block;width:100%;max-height:58svh;object-fit:contain;border-radius:16px;background:#08172a}
.demo .area-tags{gap:11px;display:flex;flex-wrap:wrap;align-content:start}
.demo .area-tags button{font-size:16px;min-height:44px}
.demo .demo-enquiry{border:1px solid color-mix(in srgb,var(--ink) 20%,transparent);border-radius:22px;padding:30px}
.demo .demo-enquiry input,.demo .demo-enquiry select{font-size:18px}

/* The photo, controls and explanation form one desktop lighting demonstration. */
@media(min-width:1000px){
 #garden-demo{padding:42px 0}
 #garden-demo>.wrap{display:grid;grid-template-columns:minmax(250px,.6fr) minmax(0,1.4fr);gap:0 34px;align-items:start}
 #garden-demo .kicker{grid-column:1;grid-row:1}
 #garden-demo h2{grid-column:1;grid-row:2;font-size:clamp(34px,3.6vw,48px)}
 #garden-demo .wrap>p:not(.kicker):not([data-garden-status]){grid-column:1;grid-row:3;font-size:18px}
 #garden-demo .garden-scene{grid-column:2;grid-row:1/span 4;width:100%;max-width:calc((100svh - 230px)*1.5);justify-self:center}
 #garden-demo .garden-scene>img{aspect-ratio:3/2;object-fit:contain}
 #garden-demo .wrap>.actions{grid-column:2;grid-row:5;margin-top:17px!important}
 #garden-demo [data-garden-status]{grid-column:2;grid-row:6;margin:12px 0 0;font-size:16px;line-height:1.5}
}

/* Purposeful, user-started illustrative motion rather than decorative autoplay. */
.signature-section{background:var(--soft,#edf2fa)}
.signature-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:38px;align-items:center}
.signature-grid>div{min-width:0}
.signature-grid h2{font-size:clamp(31px,3.6vw,48px)}
.signature-grid p{font-size:18px;line-height:1.6}
.signature-scene{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 55% 22%,#23495d,#081627 75%);border:1px solid #547889;border-radius:25px;padding:22px 15px 35px;min-height:310px;box-shadow:0 25px 65px #00000014}
.signature-scene:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(#94b7c30c 1px,transparent 1px),linear-gradient(90deg,#94b7c30c 1px,transparent 1px);background-size:36px 36px}
.signature-scene svg{display:block;width:100%;height:auto;max-height:52svh;fill:none;stroke:#bed3dc;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.signature-scene-note{position:absolute;bottom:16px;left:22px;font-size:16px;letter-spacing:.09em;color:#d1dee8}
.motion-house,.motion-ground{stroke:#6a8d9f;stroke-width:2}
.motion-welcome{fill:#edc892;opacity:.12;stroke:none;transition:opacity 1.1s}
.motion-door{transform-box:fill-box;transform-origin:left center;transition:transform 1.1s ease;stroke:#c7a56e}
.motion-bolt{stroke:#edc892;stroke-width:7;transition:transform .85s}
.motion-key{stroke:#edc892;stroke-width:5;transform-box:fill-box;transform-origin:center;transition:transform 1s ease;filter:drop-shadow(0 0 9px #e5b56533)}
.motion-route{stroke:#70cfce;stroke-width:3;stroke-dasharray:500;stroke-dashoffset:500;transition:stroke-dashoffset 1.2s;opacity:.8}
.mechanism-body{fill:#153546;stroke:#7d9ba8}
.mechanism-ring{stroke:#edc892;stroke-dasharray:8 10;transform-box:fill-box;transform-origin:center;transition:transform 1.3s}
[data-kind=door][data-state="1"] .motion-key{transform:translateX(40px)}
[data-kind=door][data-state="2"] .motion-key,[data-kind=door][data-state="3"] .motion-key{transform:translateX(68px) rotate(24deg)}
[data-state="2"] .motion-bolt,[data-state="3"] .motion-bolt{transform:translateX(-34px)}
[data-state="3"] .motion-door{transform:perspective(550px) rotateY(-56deg)}
[data-state="3"] .motion-welcome{opacity:.95}
[data-state="2"] .motion-route,[data-state="3"] .motion-route{stroke-dashoffset:0}
[data-kind=mechanism][data-state="1"] .motion-key{transform:translateX(15px)}
[data-kind=mechanism][data-state="2"] .motion-key,[data-kind=mechanism][data-state="3"] .motion-key{transform:translateX(45px) rotate(12deg)}
[data-state="2"] .mechanism-ring,[data-state="3"] .mechanism-ring{transform:rotate(115deg)}
.system-link{stroke:#74cbd4;stroke-dasharray:500;stroke-dashoffset:500;transition:stroke-dashoffset 1.2s}
.system-node{fill:#143246;stroke:#9cbac8;transition:filter 1s,stroke 1s}
[data-state="1"] .system-link,[data-state="2"] .system-link,[data-state="3"] .system-link{stroke-dashoffset:0}
[data-state="2"] .n1,[data-state="2"] .n2,[data-state="3"] .system-node{stroke:#a8e65f;filter:drop-shadow(0 0 12px #a8e65f88)}
.signature-mascot{display:block;width:100%;height:340px;object-fit:contain;position:relative;z-index:1;transition:transform 1s,filter 1s}
.mascot-orbit{position:absolute;inset:24%;border:1px solid #71cfd677;border-radius:50%;transform:scale(.85);opacity:.25;transition:transform 1.5s,opacity 1.5s;box-shadow:0 0 70px #5bd5d51a}
[data-kind=mascot][data-state="1"] .signature-mascot{transform:translateY(-9px) rotate(-2deg)}
[data-kind=mascot][data-state="2"] .signature-mascot{transform:translateY(-5px) rotate(2deg)}
[data-kind=mascot][data-state="3"] .signature-mascot{filter:drop-shadow(0 0 14px #84e2df55)}
[data-kind=mascot]:not([data-state=idle]) .mascot-orbit{transform:scale(1.3);opacity:1}
.signature-steps{display:grid;gap:10px;margin:23px 0}
.signature-steps span{display:flex;align-items:center;gap:13px;font-size:17px;line-height:1.4;border:1px solid color-mix(in srgb,currentColor 22%,transparent);border-radius:11px;padding:10px 13px;transition:background .4s,border-color .4s}
.signature-steps b{font-size:16px;opacity:.7}
.signature-steps .is-active{background:color-mix(in srgb,#6ebcca 20%,transparent);border-color:#72a9ba}
.signature-status{font-size:16px!important;margin:15px 0 0;min-height:48px}

/* Deluxe is a full business showcase, with media early and easy section links. */
.deluxe-hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:35px;align-items:center}
.deluxe-profile-hero h1{font-size:clamp(44px,5vw,68px)}
.deluxe-hero-art{margin:0;min-width:0;border:1px solid #728da8;border-radius:19px;overflow:hidden;background:#172c38}
.deluxe-hero-art img{display:block;width:100%;height:auto;object-fit:contain}
.deluxe-hero-art figcaption{font-size:16px;line-height:1.5;padding:14px 17px;letter-spacing:.04em;color:#e0e9f4}
.deluxe-free-note{font-size:16px;line-height:1.5;color:#d4e0ef;margin:20px 0 0}
.profile-quick-nav{display:flex;flex-wrap:wrap;gap:11px;padding-top:24px;padding-bottom:6px}
.profile-quick-nav a{padding:10px 15px;min-height:44px;display:inline-flex;align-items:center;background:#fff;border:1px solid #c5d4e5;border-radius:9px;font-size:16px;font-weight:700;text-decoration:none;color:#173eaa}
.profile-gallery{gap:15px}
.profile-gallery button{padding:0;border:1px solid #cbd7e7;border-radius:13px;overflow:hidden;background:#e9eef5}
.profile-gallery img{width:100%;height:220px;object-fit:contain;display:block;background:#e9eef5}
.profile-layout .signature-section{padding:29px;border-radius:18px;margin:25px 0}
.profile-layout .signature-grid{padding:0;gap:24px}
.profile-layout .signature-grid h2{font-size:31px}
.profile-layout .signature-grid p{font-size:17px}
.profile-layout .signature-scene{padding:12px;min-height:240px}
.badge-choice img{width:100%;height:auto;object-fit:contain}

@media(max-width:999px){#garden-demo .garden-scene{max-width:850px;margin:auto}#garden-demo .garden-scene>img{aspect-ratio:3/2;object-fit:contain}}
@media(max-width:760px){
 .demo .demo-nav{align-items:center;padding:20px 0;gap:16px}
 .demo .demo-menu{display:inline-flex;min-height:44px;padding:10px 14px;background:var(--accent);color:var(--ink);font-size:16px}
 .demo.flagship .demo-menu,.demo.midnight .demo-menu,.demo.cctv .demo-menu{color:#142333}
 .demo .demo-nav nav{display:none;width:100%;font-size:18px;flex-direction:column;align-items:stretch;gap:0;padding:7px 0 0}
 .demo .demo-nav nav.demo-menu-open{display:flex}
 .demo .demo-nav nav a{padding:12px 0;border-bottom:1px solid color-mix(in srgb,currentColor 20%,transparent);min-height:44px}
 .demo-top{font-size:16px;gap:10px;padding:12px 18px}
 .demo-top>span{font-size:16px}
 .demo .demo-brand{font-size:27px;gap:10px;max-width:calc(100% - 98px)}
 .demo .demo-brand svg{width:42px;flex:none}
 .demo .demo-hero{padding:30px 0}
 .demo:not(.flagship) .demo-hero h1{font-size:52px}
 .demo:not(.flagship) .hero-picture img{max-height:520px}
 .demo .card{padding:24px}
 .demo .gallery-editorial,.demo .gallery-mosaic,.demo .gallery-viewer,.demo .gallery-cinematic,.demo .gallery-stories{display:grid;grid-template-columns:1fr}
 .demo .project-wall figure:first-child{grid-column:auto;grid-row:auto}
 .demo .project-wall img,.demo .gallery-editorial figure:first-child img,.demo .gallery-cinematic figure:first-child img{height:auto;max-height:440px;aspect-ratio:3/2;object-fit:contain}
 .demo .gallery-stories img{height:auto}
 .demo .project-wall figcaption{padding:18px 0}
 .demo .gallery-stories figcaption{padding:21px}
 .demo .demo-enquiry{padding:24px}
 .signature-grid,.deluxe-hero-grid{grid-template-columns:1fr;gap:24px}
 .signature-scene{min-height:260px}
 .signature-scene svg{max-height:340px}
 .signature-mascot{height:330px}
 .signature-scene-note{font-size:16px;left:16px;bottom:14px}
 .profile-layout .signature-section{padding:24px}
 .profile-layout .signature-grid{grid-template-columns:1fr}
 .profile-quick-nav{gap:9px}
 .profile-gallery img{height:170px}
 .deluxe-hero-art figcaption{font-size:16px}
}
@media(prefers-reduced-motion:reduce){.signature-section *, .signature-section *:before{transition:none!important;animation:none!important}}

@media(max-width:760px){.demo.flagship .demo-hero h1{font-size:48px}.demo.flagship .demo-hero{padding-bottom:210px;min-height:700px}}