@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 200;
  font-display: optional;
  src: url(fonts/latin-35708376.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300;
  font-display: optional;
  src: url(fonts/latin-35708376.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url(fonts/latin-35708376.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url(fonts/latin-35708376.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url(fonts/latin-35708376.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url(fonts/latin-35708376.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* generated by tools/scope_css.py from the mockup; edit meta.json or the hand-written part below, then regenerate */
html[data-layout=scenes]{--bg:#09080d;--ink:#f4f1fa;--mut:#aaa6bd;--soft:#cfcade;--a:var(--orange);--a2:color-mix(in srgb,var(--orange) 55%,#6d28d9);--f:'Outfit',system-ui,sans-serif}
html[data-layout=scenes][data-theme=light]{--bg:#faf7ff;--ink:#1a1626;--mut:#575270;--soft:#3a3550;--a:var(--orange);--a2:color-mix(in srgb,var(--orange) 55%,#6d28d9)}
html[data-layout=scenes] .wl *{box-sizing:border-box}html[data-layout=scenes] .wl :where(*:not(.container):not(.container *)){margin:0;padding:0}
html[data-layout=scenes]{scroll-snap-type:y proximity;scroll-behavior:smooth}
html[data-layout=scenes] .wl a{color:inherit;text-decoration:none}
html[data-layout=scenes] .wl .sc{min-height:100vh;scroll-snap-align:start;position:relative;display:flex;align-items:center;overflow:hidden;padding:110px 0 80px}
html[data-layout=scenes] .wl .bgi{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0;transform:scale(1.08);transition:transform 6s ease}
html[data-layout=scenes] .wl .sc.in .bgi{transform:scale(1)}
html[data-layout=scenes] .wl .ov{position:absolute;inset:0;z-index:1}
html[data-layout=scenes] .wl .in2{position:relative;z-index:2;width:100%;max-width:1240px;margin:0 auto;padding:0 56px}
html[data-layout=scenes] .wl header{position:fixed;top:0;left:0;right:0;z-index:60;padding:22px 56px;display:flex;justify-content:space-between;align-items:center;transition:.4s}
html[data-layout=scenes] .wl header.s{background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px);padding-block:14px}
html[data-layout=scenes] .wl .logo{min-height:44px;font-weight:600;font-size:1.35rem;letter-spacing:.02em;display:flex;align-items:center;gap:10px}
html[data-layout=scenes] .wl .logo i{width:12px;height:12px;border-radius:50%;background:linear-gradient(135deg,var(--a),var(--a2));display:block;box-shadow:0 0 18px var(--a)}
html[data-layout=scenes] .wl header .r{display:flex;align-items:center;gap:28px;font-size:.9rem;font-weight:400}
html[data-layout=scenes] .wl .cta{display:inline-block;padding:13px 30px;border-radius:99px;background:linear-gradient(135deg,#c71f7b,#7c3aed);color:#fff;font-weight:500;font-size:.95rem;border:0;cursor:pointer;font-family:var(--f);transition:.3s;box-shadow:0 10px 40px rgba(236,72,153,.35)}
html[data-layout=scenes] .wl .cta:hover{transform:translateY(-2px);box-shadow:0 14px 50px rgba(236,72,153,.55)}
html[data-layout=scenes] .wl .gh{display:inline-block;padding:13px 30px;border-radius:99px;border:1px solid color-mix(in srgb,var(--ink) 35%,transparent);font-weight:400;font-size:.95rem;transition:.3s}
html[data-layout=scenes] .wl .gh:hover{background:color-mix(in srgb,var(--ink) 10%,transparent)}
html[data-layout=scenes] .wl .dots{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:60;display:grid;gap:14px}
html[data-layout=scenes] .wl .dots a{width:10px;height:10px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--ink) 55%,transparent);display:block;transition:.3s;position:relative}
html[data-layout=scenes] .wl .dots a.on{background:var(--a);border-color:var(--a);transform:scale(1.4)}
html[data-layout=scenes] .wl .dots a:hover:after{content:attr(data-l);position:absolute;right:20px;top:-5px;white-space:nowrap;font-size:.78rem;background:color-mix(in srgb,var(--bg) 88%,transparent);padding:2px 10px;border-radius:6px}
html[data-layout=scenes] .wl h1,
html[data-layout=scenes] .wl h2{font-weight:300;letter-spacing:-.035em;line-height:1}
html[data-layout=scenes] .wl h1{font-size:clamp(3.4rem,9.5vw,9rem)}
html[data-layout=scenes] .wl h1 b{font-weight:600;background:linear-gradient(120deg,var(--a),var(--a2));-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-layout=scenes] .wl h2{font-size:clamp(2.4rem,5.6vw,5rem)}
html[data-layout=scenes] .wl h2 b{font-weight:600}
html[data-layout=scenes] .wl .k{font-size:.8rem;letter-spacing:.3em;text-transform:uppercase;color:var(--a);font-weight:500;margin-bottom:22px;display:flex;align-items:center;gap:14px}
html[data-layout=scenes] .wl .k:before{content:"";width:40px;height:1px;background:var(--a)}
html[data-layout=scenes] .wl #hero .ov{background:linear-gradient(90deg,color-mix(in srgb,var(--bg) 92%,transparent) 10%,color-mix(in srgb,var(--bg) 35%,transparent) 70%,color-mix(in srgb,var(--bg) 20%,transparent)),linear-gradient(0deg,var(--bg),transparent 30%)}
html[data-layout=scenes] .wl #hero p{font-size:1.2rem;max-width:520px;color:var(--soft);margin:28px 0 38px}
html[data-layout=scenes] .wl #hero .acts{display:flex;gap:14px;flex-wrap:wrap}
html[data-layout=scenes] .wl .scroll{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);z-index:3;font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--mut);text-align:center}
html[data-layout=scenes] .wl .scroll:after{content:"";display:block;width:1px;height:38px;background:linear-gradient(var(--a),transparent);margin:10px auto 0;animation:scenes_dn 2s infinite}
@keyframes scenes_dn{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
html[data-layout=scenes] .wl #services{padding:0;background:var(--bg)}
html[data-layout=scenes] .wl .strips{display:flex;width:100%;height:100vh;min-height:620px}
html[data-layout=scenes] .wl .strip{flex:1;position:relative;overflow:hidden;background-size:cover;background-position:center;transition:flex .7s cubic-bezier(.2,.8,.2,1);cursor:pointer;border-right:1px solid color-mix(in srgb,var(--ink) 12%,transparent)}
html[data-layout=scenes] .wl .strip:before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,color-mix(in srgb,var(--bg) 95%,transparent),color-mix(in srgb,var(--bg) 55%,transparent) 55%,color-mix(in srgb,var(--bg) 72%,transparent));transition:.5s}
html[data-layout=scenes] .wl .strip.on{flex:3.2}
html[data-layout=scenes] .wl .strip.on:before{background:linear-gradient(0deg,color-mix(in srgb,var(--bg) 92%,transparent),color-mix(in srgb,var(--bg) 10%,transparent) 60%)}
html[data-layout=scenes] .wl .strip .c{position:absolute;left:34px;right:34px;bottom:44px}
html[data-layout=scenes] .wl .strip .no{font-size:.85rem;letter-spacing:.25em;color:var(--a);font-weight:500}
html[data-layout=scenes] .wl .strip h3{font-weight:300;font-size:clamp(1.5rem,2.6vw,2.4rem);letter-spacing:-.02em;line-height:1.1;margin:8px 0}
html[data-layout=scenes] .wl .strip:not(.on) h3{writing-mode:vertical-rl;transform:rotate(180deg);margin:14px 0 0;white-space:nowrap}
html[data-layout=scenes] .wl .strip p{max-height:0;overflow:hidden;opacity:0;transition:.5s;color:var(--soft);max-width:420px}
html[data-layout=scenes] .wl .strip.on p{max-height:140px;opacity:1;margin-top:8px;transition-delay:.25s}
html[data-layout=scenes] .wl .stitle{position:absolute;top:100px;left:56px;z-index:5;pointer-events:none}
html[data-layout=scenes] .wl #why-us .bgi{filter:saturate(.8)}
html[data-layout=scenes] .wl #why-us .ov{background:linear-gradient(270deg,color-mix(in srgb,var(--bg) 94%,transparent) 25%,color-mix(in srgb,var(--bg) 40%,transparent))}
html[data-layout=scenes] .wl #why-us .in2{display:flex;justify-content:flex-end}
html[data-layout=scenes] .wl #why-us .bx{max-width:560px}
html[data-layout=scenes] .wl #why-us p.l{color:var(--soft);font-size:1.1rem;margin:22px 0 30px}
html[data-layout=scenes] .wl .fe{display:grid;gap:18px}
html[data-layout=scenes] .wl .fe div{display:flex;gap:18px;padding-bottom:18px;border-bottom:1px solid color-mix(in srgb,var(--ink) 14%,transparent)}
html[data-layout=scenes] .wl .fe i{font-style:normal;color:var(--a);font-weight:600;font-size:1.1rem;flex:0 0 28px}
html[data-layout=scenes] .wl .fe h3{font-weight:500;font-size:1.1rem}
html[data-layout=scenes] .wl .fe p{color:var(--mut);font-size:.92rem}
html[data-layout=scenes] .wl #process{background:radial-gradient(circle at 20% 30%,rgba(168,85,247,.28),transparent 50%),radial-gradient(circle at 85% 80%,rgba(236,72,153,.25),transparent 50%),var(--bg)}
html[data-layout=scenes] .wl .nm{display:grid;grid-template-columns:repeat(2,1fr);gap:50px 80px;margin-top:50px}
html[data-layout=scenes] .wl .nm b{display:block;font-size:clamp(3.6rem,8vw,7rem);font-weight:200;letter-spacing:-.05em;line-height:1}
html[data-layout=scenes] .wl .nm b i{font-style:normal;color:var(--a)}
html[data-layout=scenes] .wl .nm span{color:var(--mut);letter-spacing:.1em;text-transform:uppercase;font-size:.82rem}
html[data-layout=scenes] .wl .pr{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:70px;border-top:1px solid color-mix(in srgb,var(--ink) 18%,transparent)}
html[data-layout=scenes] .wl .pr div{padding:26px 24px 0 0;position:relative}
html[data-layout=scenes] .wl .pr div:before{content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;border-radius:50%;background:var(--a);box-shadow:0 0 14px var(--a)}
html[data-layout=scenes] .wl .pr small{color:var(--a);font-weight:500;letter-spacing:.2em}
html[data-layout=scenes] .wl .pr h3{font-weight:400;font-size:1.25rem;margin:4px 0 6px}
html[data-layout=scenes] .wl .pr p{color:var(--mut);font-size:.9rem}
html[data-layout=scenes] .wl #gallery{padding:0;display:block;background:var(--bg)}
html[data-layout=scenes] .wl .gal{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr;height:100vh;min-height:640px;gap:6px;padding:6px}
html[data-layout=scenes] .wl .gal div{background-size:cover;background-position:center;position:relative;overflow:hidden;border-radius:6px}
html[data-layout=scenes] .wl .gal div:after{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--bg) 35%,transparent);transition:.5s}
html[data-layout=scenes] .wl .gal div:hover:after{background:rgba(236,72,153,.15)}
html[data-layout=scenes] .wl .gal div:nth-child(1){grid-row:span 2}
html[data-layout=scenes] .wl .gal div:nth-child(4){grid-column:span 2}
html[data-layout=scenes] .wl .gal .t{position:absolute;left:56px;top:50%;transform:translateY(-50%);z-index:3;pointer-events:none;background:color-mix(in srgb,var(--bg) 62%,transparent);backdrop-filter:blur(10px);padding:26px 34px;border-radius:18px}
html[data-layout=scenes] .wl #testimonials{background:linear-gradient(color-mix(in srgb,var(--bg) 86%,transparent),color-mix(in srgb,var(--bg) 92%,transparent)),url(https://images.unsplash.com/photo-1599351431202-1e0f0137899a?auto=format&fit=crop&w=1800&q=70) center/cover}
html[data-layout=scenes] .wl .qq{max-width:900px;margin:0 auto;text-align:center}
html[data-layout=scenes] .wl .qq blockquote{display:none;font-size:clamp(1.6rem,3.4vw,2.8rem);font-weight:200;line-height:1.3;letter-spacing:-.02em}
html[data-layout=scenes] .wl .qq blockquote.on{display:block;animation:scenes_u .8s}
html[data-layout=scenes] .wl .qq cite{display:block;margin-top:30px;font-style:normal;font-size:.85rem;letter-spacing:.25em;text-transform:uppercase;color:var(--a);font-weight:500}
html[data-layout=scenes] .wl .qd{display:flex;gap:10px;justify-content:center;margin-top:40px}
html[data-layout=scenes] .wl .qd{gap:0}
html[data-layout=scenes] .wl .qd button{width:52px;height:44px;border:0;background:transparent;cursor:pointer;position:relative}
html[data-layout=scenes] .wl .qd button:after{content:"";position:absolute;left:4px;right:4px;top:50%;height:3px;margin-top:-1px;background:color-mix(in srgb,var(--ink) 30%,transparent);transition:.3s}
html[data-layout=scenes] .wl .qd button.on:after{background:var(--a)}
@keyframes scenes_u{from{opacity:0;transform:translateY(16px)}to{opacity:1}}
html[data-layout=scenes] .wl .sl{display:flex;gap:8px;flex-wrap:wrap}
html[data-layout=scenes] .wl .sl span{padding:9px 16px;border-radius:99px;border:1px solid color-mix(in srgb,var(--ink) 20%,transparent);font-size:.88rem;cursor:pointer;transition:.2s}
html[data-layout=scenes] .wl .sl span:hover{border-color:var(--a)}
html[data-layout=scenes] .wl .sl span.on{background:linear-gradient(135deg,var(--a),var(--a2));border-color:transparent}
html[data-layout=scenes] .wl .rv{opacity:0;transform:translateY(34px);transition:1s cubic-bezier(.2,.8,.2,1)}
html[data-layout=scenes] .wl .in .rv,
html[data-layout=scenes] .wl .rv.in{opacity:1;transform:none}
html[data-layout=scenes] .wl .in .rv:nth-child(2){transition-delay:.12s}
html[data-layout=scenes] .wl .in .rv:nth-child(3){transition-delay:.24s}
@media(max-width:900px){
 html[data-layout=scenes]{scroll-snap-type:none}
 html[data-layout=scenes] .wl header{padding:16px 20px}
 html[data-layout=scenes] .wl header .r a:not(.cta){display:none}
 html[data-layout=scenes] .wl .in2{padding:0 22px}
 html[data-layout=scenes] .wl .dots{display:none}
 html[data-layout=scenes] .wl .sc{padding:100px 0 60px}
 html[data-layout=scenes] .wl .strips{flex-direction:column;height:auto;min-height:0}
 html[data-layout=scenes] .wl .strip{height:92px;flex:none;border-right:0;border-bottom:1px solid color-mix(in srgb,var(--ink) 12%,transparent);transition:height .6s}
 html[data-layout=scenes] .wl .strip.on{height:360px;flex:none}
 html[data-layout=scenes] .wl .strip:not(.on) h3{writing-mode:horizontal-tb;transform:none;margin:4px 0 0}
 html[data-layout=scenes] .wl .strip .c{left:22px;right:22px;bottom:20px}
 html[data-layout=scenes] .wl .stitle{position:relative;top:0;left:0;padding:90px 22px 24px}
 html[data-layout=scenes] .wl #services{display:block}
 html[data-layout=scenes] .wl #why-us .in2{justify-content:flex-start}
 html[data-layout=scenes] .wl #why-us .ov{background:color-mix(in srgb,var(--bg) 80%,transparent)}
 html[data-layout=scenes] .wl .nm{grid-template-columns:1fr 1fr;gap:34px 20px}
 html[data-layout=scenes] .wl .pr{grid-template-columns:1fr 1fr;gap:34px 0}
 html[data-layout=scenes] .wl .gal{grid-template-columns:1fr 1fr;grid-template-rows:none;grid-auto-rows:190px;height:auto;min-height:0}
 html[data-layout=scenes] .wl .gal div:nth-child(n){grid-column:span 1;grid-row:span 1}
 html[data-layout=scenes] .wl .gal div:nth-child(1){grid-column:span 2;grid-row:span 2}
 html[data-layout=scenes] .wl .gal .t{position:relative;left:0;top:0;transform:none;padding:90px 22px 20px;grid-column:1/-1;grid-row:auto}
}
@media(max-width:700px){
 html[data-layout=scenes] .wl .hcta{display:none}
 html[data-layout=scenes] .wl header .r{gap:10px}
 html[data-layout=scenes] .wl header{padding-inline:16px!important}
}
html[data-layout=scenes] .wl h1{font-size:clamp(2.2rem,4.8vw,3.1rem)}
html[data-layout=scenes] .wl h2{font-size:clamp(1.6rem,2.8vw,2.1rem)}
html[data-layout=scenes] .wl .nm b{font-size:clamp(2.1rem,3.4vw,2.6rem)}
html[data-layout=scenes] .wl .nm{gap:28px 50px;margin-top:30px}
html[data-layout=scenes] .wl .qq blockquote{font-size:clamp(1.3rem,2.4vw,1.8rem)}
html[data-layout=scenes] .wl .pr{margin-top:44px}
html[data-layout=scenes] .wl #hero p{font-size:1.08rem;margin:20px 0 28px}

/* common reset: the page's own light-theme rules must not paint the layout's sections */
html[data-layout=scenes][data-theme] .wl :is(#stats,#services,#why-us,#process,#gallery,#partners,#testimonials){background:transparent}
html[data-layout=scenes] .wl #hero{height:auto;min-height:0;display:block;align-items:initial;overflow:hidden}
html[data-layout=scenes] .wl .hero-stats{position:static;bottom:auto;left:auto;right:auto;padding:0;background:none;backdrop-filter:none;border-radius:0;overflow:visible;animation:none;margin:0}
html[data-layout=scenes][data-theme=light]{--a:var(--orange-ink,var(--orange))}

/* shared header bits: EN link, theme button, and the page's own menu stays hidden because every design draws its own header */
html[data-layout=scenes] nav#navbar,html[data-layout=scenes] #navLinks{display:none!important}
html[data-layout=scenes] .wl .tools{display:inline-flex;align-items:center;gap:8px}
html[data-layout=scenes] .wl .tbtn{display:inline-grid;place-items:center;min-width:44px;height:44px;padding:0 12px;border-radius:99px;border:1px solid currentColor;background:transparent;color:inherit;font:inherit;font-size:.78rem;font-weight:600;letter-spacing:.08em;cursor:pointer;line-height:1;text-decoration:none;opacity:.85}
html[data-layout=scenes] .wl .tbtn:hover{opacity:1}
html[data-layout=scenes] .wl .tbtn svg{display:block}
html[data-layout=scenes] .wl .tbtn .ic-moon{display:none}
html[data-layout=scenes][data-theme=light] .wl .tbtn .ic-sun{display:none}
html[data-layout=scenes][data-theme=light] .wl .tbtn .ic-moon{display:block}
html[data-layout=scenes] .wl a.btn,html[data-layout=scenes] .wl a.b1,html[data-layout=scenes] .wl a.cta{text-decoration:none}
html[data-layout=scenes] .wl header .logo,html[data-layout=scenes] .wl .top .logo{text-decoration:none;color:inherit}
html[data-layout=scenes] .wl nav{position:static;top:auto;left:auto;right:auto;z-index:auto;padding:0;height:auto;justify-content:flex-start;align-items:center;transition:none}
html[data-layout=scenes][data-theme] body{background:var(--bg);color:var(--ink)}
html[data-layout=scenes][data-theme]{background:var(--bg)}
html[data-layout=scenes] .wl{position:relative;z-index:1}

/* footer in the light version: light, not black */
html[data-layout=scenes][data-theme=light] footer#contact{background:color-mix(in srgb,var(--ink,#111) 6%,var(--bg,#fff));color:var(--ink,#111);border-top:1px solid color-mix(in srgb,var(--ink,#111) 14%,transparent)}
html[data-layout=scenes][data-theme=light] footer#contact :is(p,a,li,span,small,button,div,.footer-bottom,.footer-bottom *,.footer-brand p){color:color-mix(in srgb,var(--ink,#111) 78%,transparent) !important}
html[data-layout=scenes][data-theme=light] footer#contact :is(.footer-col-title,h3,h4,.nav-logo-text){color:var(--ink,#111) !important}
html[data-layout=scenes][data-theme=light] footer#contact :is(.footer-top,.footer-bottom){border-color:color-mix(in srgb,var(--ink,#111) 14%,transparent)}
html[data-layout=scenes][data-theme=light] footer#contact :is(.footer-links a:hover,a:hover,button:hover){color:var(--orange-ink,var(--orange)) !important}
html[data-layout=scenes][data-theme=light] footer#contact .footer-socials a{border-color:color-mix(in srgb,var(--ink,#111) 25%,transparent);color:var(--ink,#111)}
html[data-layout=scenes][data-theme=light] footer#contact .footer-socials a svg{stroke:currentColor}
html[data-layout=scenes] .wl{background:transparent}

/* the owner's videos inside picture boxes */
html[data-layout=scenes] .wl .wl-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;border-radius:inherit;pointer-events:none;display:block}
html[data-layout=scenes] :where(.wl *):has(> .wl-v){position:relative;overflow:hidden;isolation:isolate}

/* a logo picture must be clearly visible on every design and theme, without a plate behind it: its lightness is measured in the browser (data-wl-lg)
   and the picture itself is flipped (same colours, light instead of dark) when it would vanish into the background */
html[data-layout=scenes] img[data-wl-lg=box]{border-radius:10px}
/* the small decorative mark next to the name is not drawn when the business has a real logo picture */
html[data-layout=scenes] .wl .logo:has(img)>i{display:none}
/* the shop teaser of alomobile sits outside the design: its small notes must stay readable on the design's background */
html[data-layout=scenes][data-theme=dark] .shopx-perks span{color:rgba(255,255,255,.9);background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.24)}

/* the design must not be ONE stacking layer: the page's own sections after it (booking, call-to-action, footer) have z-index 1 too and were painted over its fixed menu */
html[data-layout=scenes] .wl{z-index:auto}

/* real Google reviews: rating line, stars and G logo on every review, and the two Google buttons */
html[data-layout=scenes] .wl-gsum{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 22px}
html[data-layout=scenes] .wl-gn{font-size:2.3rem;font-weight:800;line-height:1}
html[data-layout=scenes] .wl-gs{color:#fbbc04;letter-spacing:2px;font-size:1.1rem;line-height:1}
html[data-layout=scenes] .wl-gt{opacity:.8;font-size:.95rem}
html[data-layout=scenes] .wl-gh{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px}
html[data-layout=scenes] .wl-gi{flex:0 0 auto;width:22px;height:22px}
html[data-layout=scenes] .wl-gb{margin:4px 3px}

/* one tidy gallery for every design: equal pictures in a row with arrows, swipe on phones */
html[data-layout=scenes] .wl .wlc{position:relative}
html[data-layout=scenes] .wl .wlc-t{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 2px 8px;-webkit-overflow-scrolling:touch}
html[data-layout=scenes] .wl .wlc-t::-webkit-scrollbar{display:none}
html[data-layout=scenes] .wl .wlc .gallery-item{flex:0 0 clamp(240px,31%,420px);height:auto;aspect-ratio:4/3;position:relative;overflow:hidden;border-radius:18px;scroll-snap-align:start;cursor:zoom-in;min-height:0;grid-column:auto;grid-row:auto;margin:0}
html[data-layout=scenes] .wl .wlc .gallery-item img,html[data-layout=scenes] .wl .wlc .gallery-item video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
html[data-layout=scenes] .wl .wlc .gallery-item:hover img{transform:scale(1.04)}
html[data-layout=scenes] .wl .wlc .gallery-blur{display:none}
html[data-layout=scenes] .wl .wlc-b{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(10,10,14,.6);backdrop-filter:blur(8px);color:#fff;font-size:1.6rem;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0}
html[data-layout=scenes] .wl .wlc-b:hover{background:rgba(10,10,14,.85)}
html[data-layout=scenes] .wl .wlc-p{left:8px}
html[data-layout=scenes] .wl .wlc-n{right:8px}
@media(max-width:700px){
 html[data-layout=scenes] .wl .wlc .gallery-item{flex-basis:78%}
 html[data-layout=scenes] .wl .wlc-b{width:40px;height:40px}
}

/* glass: booking, cards with forms */
html[data-layout=scenes] :is(.bk-cal-box,.bk-panel){background:rgba(127,127,127,.10)!important;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(127,127,127,.28)!important;box-shadow:0 10px 40px rgba(0,0,0,.12)!important}
html[data-layout=scenes] #booking :is(input,select,textarea){background:rgba(127,127,127,.10)!important;border:1px solid rgba(127,127,127,.30)!important}
html[data-layout=scenes] .wl :is(.fcard,aside.bk,.panelwrap){background:rgba(127,127,127,.12)!important;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(127,127,127,.28)!important}
html[data-layout=scenes] .wl :is(header,.top):not(.hero .top){z-index:1000}
html[data-layout=scenes] .wl header,html[data-layout=scenes] .wl nav.nav{z-index:1000}

/* hand-written part of layout "scenes" */
html[data-layout=scenes]{scroll-snap-type:y proximity}
html[data-layout=scenes][data-theme] .wl #hero{background:transparent;color:var(--ink);height:auto;min-height:100vh;display:flex;overflow:hidden}
html[data-layout=scenes] .wl .sc{scroll-margin-top:0}
html[data-layout=scenes] .wl h1 span{display:inline}
html[data-layout=scenes] .wl .cta,html[data-layout=scenes] .wl .gh,html[data-layout=scenes] .wl .strip a{text-decoration:none}
html[data-layout=scenes] .wl .strip .pr1{display:block;margin-top:6px;color:var(--a)}
html[data-layout=scenes] .wl .strip .sbk{display:inline-block;margin-top:8px;color:var(--a);font-weight:700}
html[data-layout=scenes] .wl .gal .gallery-item{position:relative;overflow:hidden;border-radius:6px;height:auto;min-height:0}
html[data-layout=scenes] .wl .gal .gallery-item img,html[data-layout=scenes] .wl .gal .gallery-item video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
html[data-layout=scenes] .wl .gal .gallery-blur{display:none}
html[data-layout=scenes] .wl .gal .gallery-item:nth-child(1){grid-row:span 2}
html[data-layout=scenes] .wl .gal .gallery-item:nth-child(4){grid-column:span 2}
html[data-layout=scenes] .wl .qq cite{display:block}
html[data-layout=scenes] .wl .hero-stats{display:flex;gap:18px;flex-wrap:wrap;margin-top:26px}
html[data-layout=scenes] .wl .hero-stat-num{font-weight:800}
html[data-layout=scenes] nav#navbar{background:color-mix(in srgb,var(--bg) 70%,transparent);backdrop-filter:blur(12px)}
html[data-layout=scenes] nav#navbar .nav-logo-text{color:var(--ink)}
html[data-layout=scenes] nav#navbar .hamburger span{background:var(--ink)}
@media(min-width:769px){
 html[data-layout=scenes] nav#navbar ~ .nav-links a:not(.nav-cta){color:var(--ink)}
 html[data-layout=scenes] nav#navbar ~ .nav-links .wc-theme{color:var(--ink)}
}
@media(max-width:900px){
 html[data-layout=scenes]{scroll-snap-type:none}
 html[data-layout=scenes] .wl .gal .gallery-item:nth-child(n){grid-column:span 1;grid-row:span 1;min-height:190px}
 html[data-layout=scenes] .wl .gal .gallery-item:nth-child(1){grid-column:span 2;grid-row:span 2}
}
html[data-layout=scenes] .wl .cta{background:linear-gradient(135deg,var(--a),var(--a2));color:var(--on-orange,#fff);box-shadow:0 10px 40px color-mix(in srgb,var(--a) 35%,transparent)}
html[data-layout=scenes] .wl .gh{color:var(--ink)}
html[data-layout=scenes] .wl button.gh{background:transparent;color:var(--ink);font:inherit;cursor:pointer;border:1px solid color-mix(in srgb,var(--ink) 35%,transparent)}
html[data-layout=scenes] .wl .scroll{display:none}
html[data-layout=scenes] .wl .hero-stat-label,html[data-layout=scenes] .wl .hero-stat-num{color:var(--ink)}
html[data-layout=scenes] .wl .sc:is(#process,#gallery,#testimonials){min-height:0;padding:90px 0 70px}
html[data-layout=scenes] .wl #why-us{min-height:0;padding:100px 0}
html[data-layout=scenes] .wl #services.sc{min-height:0}
html[data-layout=scenes] .wl .strips{height:min(78vh,620px);min-height:520px}
html[data-layout=scenes] .wl .dots a:hover:after{content:attr(aria-label)}
html[data-layout=scenes] .wl .strip:before{background:linear-gradient(0deg,color-mix(in srgb,var(--bg) 90%,transparent) 0%,color-mix(in srgb,var(--bg) 62%,transparent) 28%,transparent 72%)}
html[data-layout=scenes] .wl .strip.on:before{background:linear-gradient(0deg,color-mix(in srgb,var(--bg) 90%,transparent) 0%,color-mix(in srgb,var(--bg) 55%,transparent) 26%,transparent 62%)}
html[data-layout=scenes] .wl #hero .ov{background:linear-gradient(90deg,color-mix(in srgb,var(--bg) 82%,transparent) 0%,color-mix(in srgb,var(--bg) 50%,transparent) 42%,transparent 85%),linear-gradient(0deg,color-mix(in srgb,var(--bg) 80%,transparent),transparent 28%)}
html[data-layout=scenes] .wl #why-us .ov{background:linear-gradient(270deg,color-mix(in srgb,var(--bg) 82%,transparent) 0%,color-mix(in srgb,var(--bg) 45%,transparent) 55%,transparent 95%)}
html[data-layout=scenes] .wl .strip:before,html[data-layout=scenes] .wl .strip.on:before{background:linear-gradient(0deg,rgba(8,8,12,.86) 0%,rgba(8,8,12,.45) 36%,rgba(8,8,12,.05) 72%,transparent 100%)}
html[data-layout=scenes] .wl .strip :is(h3,p,.no,a){color:#fff}
html[data-layout=scenes] .wl .strip .pr1,html[data-layout=scenes] .wl .strip .sbk{color:color-mix(in srgb,var(--orange) 50%,#fff)}
html[data-layout=scenes] .wl #hero .bgi{background-image:var(--wl-hero)}

/* the review is a centred quote: the Google line is centred too */
html[data-layout=scenes] :is(.wl-gsum,.wl-gh){justify-content:center}