/* The «HUD» villa of the home page (1.33.0): a dark panel, the real villa cut out in its middle, and over it — drawn by the
   page, no picture — a ring, a cone of view and a small tag per camera, the Wi-Fi points as domes, or the house's outline
   alone. Which of the three shows follows the radios of the three needs (no script). Movement is transform and opacity
   only, and none of it under prefers-reduced-motion. The places are web/villa.py's (HUD, DOMES): the line below is
   villa.hud_css(), and tests/test_w2.py keeps the two the same. */
.vh{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--card-r);background:linear-gradient(160deg,#151D35,#1F2A4B);color:#fff;box-shadow:0 18px 36px -24px rgba(21,29,53,.9)}
.vh::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(rgba(84,186,167,.06) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,rgba(84,186,167,.06) 1px,transparent 1px) 0 0/24px 24px}
.vh-defs{position:absolute;width:0;height:0}
.vh-stage{position:relative;aspect-ratio:1400/1046}
.vh-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-select:none;pointer-events:none}
.vh-day{display:none}
.vh-c{position:absolute;width:16px;height:16px;border:2px solid #54BAA7;opacity:.75;pointer-events:none}
.vh-c.tl{top:8px;left:8px;border-right:0;border-bottom:0}.vh-c.tr{top:8px;right:8px;border-left:0;border-bottom:0}
.vh-c.bl{bottom:8px;left:8px;border-right:0;border-top:0}.vh-c.br{bottom:8px;right:8px;border-left:0;border-top:0}
.vh-scan{position:absolute;inset:0;opacity:0;pointer-events:none}
.vh-scan::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:linear-gradient(90deg,transparent,#54BAA7 30%,#bff3e6 50%,#54BAA7 70%,transparent);box-shadow:0 0 12px 2px rgba(84,186,167,.6)}
.vh.scan .vh-scan{animation:vh-scan .9s ease-out 1}
@keyframes vh-scan{0%{opacity:.95;transform:translateY(0)}85%{opacity:.8}100%{opacity:0;transform:translateY(100%)}}
/* cameras */
.vh-cams,.vh-wifi{position:absolute;inset:0}
.vh-pack[hidden]{display:none}
.vh-cam{position:absolute;width:40px;height:40px;margin:-20px 0 0 -20px;padding:0;border:0;background:none;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity .25s ease}
.vh-pack .vh-cam{animation:vh-in .35s ease-out backwards}
.vh-cam.n2{animation-delay:.1s}.vh-cam.n3{animation-delay:.2s}.vh-cam.n4{animation-delay:.3s}.vh-cam.n5{animation-delay:.4s}.vh-cam.n6{animation-delay:.5s}.vh-cam.n7{animation-delay:.6s}.vh-cam.n8{animation-delay:.7s}
@keyframes vh-in{0%{opacity:0;transform:scale(.4)}100%{opacity:1;transform:none}}
.vh-cone{position:absolute;left:50%;top:50%;width:64px;height:52px;margin-top:-26px;transform-origin:0 50%;transform:rotate(var(--a,90deg)) scale(var(--s,1));clip-path:polygon(0 50%,100% 0,100% 100%);background:linear-gradient(90deg,rgba(84,186,167,.6),rgba(84,186,167,0));opacity:.5;transition:transform .3s ease,opacity .3s ease;pointer-events:none}
.vh-ring{position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#54BAA7;box-shadow:0 0 0 2px #151D35,0 0 0 3.5px #54BAA7,0 0 12px 3px rgba(84,186,167,.75)}
.vh-ring::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:1.5px solid #54BAA7;opacity:0;animation:vh-pulse 2.6s ease-out infinite}
@keyframes vh-pulse{0%{transform:scale(.45);opacity:.85}100%{transform:scale(1.5);opacity:0}}
.vh-cam::before{content:"";position:absolute;left:50%;top:50%;width:20px;height:1px;background:#54BAA7;transform-origin:0 50%;pointer-events:none}
.vh-cam.lb-r.lb-u::before{transform:rotate(-45deg)}.vh-cam.lb-r.lb-d::before{transform:rotate(45deg)}.vh-cam.lb-l.lb-u::before{transform:rotate(-135deg)}.vh-cam.lb-l.lb-d::before{transform:rotate(135deg)}
.vh-tag{position:absolute;top:50%;display:flex;align-items:center;gap:5px;height:16px;margin-top:-8px;padding:0 5px;border-radius:3px;border:1px solid rgba(84,186,167,.75);background:rgba(21,29,53,.86);color:#bff3e6;white-space:nowrap;direction:ltr;pointer-events:none}
.vh-tag b{font:600 var(--fs-small)/14px Montserrat,system-ui,sans-serif;letter-spacing:.04em}
.vh-tag em{display:none;font-style:normal;font-size:var(--fs-small);line-height:14px;color:#fff;direction:rtl}
[dir=ltr] .vh-tag em{direction:ltr}
.vh-cam.lb-r .vh-tag{left:calc(50% + 14px)}.vh-cam.lb-l .vh-tag{right:calc(50% + 14px)}
.vh-cam.lb-u .vh-tag{transform:translateY(-14px)}.vh-cam.lb-d .vh-tag{transform:translateY(14px)}
.vh-cam[aria-pressed=true]{z-index:2}
.vh-cam[aria-pressed=true] .vh-cone{--s:1.4;opacity:.9}
.vh-cam[aria-pressed=true] .vh-ring{background:#fff;box-shadow:0 0 0 2px #151D35,0 0 0 4px #54BAA7,0 0 18px 6px rgba(84,186,167,.95)}
.vh-cam[aria-pressed=true] .vh-tag{border-color:#54BAA7;background:#151D35}
.vh-cam[aria-pressed=true] .vh-tag em{display:inline}
.vh.vh-sel .vh-cam[aria-pressed=false]{opacity:.45}
.vh-cam:focus-visible .vh-ring{outline:2px solid #FFE3A1;outline-offset:4px}
/* Wi-Fi: every point a dome of signal over the house */
.vh-wifi{display:none;pointer-events:none}
.vh-dome{position:absolute;width:38%;aspect-ratio:1.55;margin:-12% 0 0 -19%;border-radius:50%;border:1px solid rgba(84,186,167,.7);background:radial-gradient(ellipse at 50% 62%,rgba(84,186,167,.5),rgba(84,186,167,.12) 62%,rgba(84,186,167,.04));opacity:0;transform:scale(.55);transition:opacity .35s ease,transform .35s ease}
.vh-dome::after{content:"";position:absolute;left:50%;top:62%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#bff3e6;box-shadow:0 0 10px 3px rgba(84,186,167,.9)}
.vh-dome.on{opacity:1;transform:none}
/* the strip at the bottom of the panel: what the pressed camera sees, how many rooms are left, or the third need's line */
.vh-line{position:absolute;inset:auto 8px 8px 8px;display:none;gap:1px;margin:0;padding:6px 10px;min-height:42px;align-content:center;border-radius:6px;border:1px solid rgba(84,186,167,.4);background:rgba(21,29,53,.82);font-size:var(--fs-small);line-height:1.45;text-align:start}
.vh-line b{font-size:var(--fs-small);font-weight:600;color:#54BAA7;letter-spacing:.02em}
.vh-line span{color:#e6eef8}
.vh-line.hw-count{gap:8px;font-size:var(--fs-small);justify-content:center;align-items:center}
#need-cctv:checked~.vh .vh-line-cam,#need-build:checked~.vh .vh-line-build{display:grid}
#need-wifi:checked~.vh .vh-line-wifi{display:flex}
#need-wifi:checked~.vh .vh-cams,#need-build:checked~.vh .vh-cams{display:none}
#need-wifi:checked~.vh .vh-wifi{display:block}
/* «بيتي تحت الإنشاء»: the same house as green lines */
#need-build:checked~.vh .vh-dusk{display:none}
#need-build:checked~.vh .vh-day{display:block;filter:url(#vh-edges)}
.vh .at-corner{left:8.56%;top:51.7%;--a:27deg}.vh .at-gate{left:42.8%;top:75.2%;--a:207deg}.vh .at-chamfer{left:61.1%;top:74.5%;--a:60deg}.vh .at-wall{left:91%;top:41.5%;--a:127deg}.vh .at-kitchen{left:41.5%;top:49.2%;--a:200deg}.vh .at-roof{left:55.5%;top:46%;--a:120deg}.vh .at-yard{left:78%;top:57%;--a:215deg}.vh .at-garage{left:29.9%;top:43.5%;--a:35deg}.vh .ap-0{left:46%;top:30%}.vh .ap-1{left:63%;top:27%}.vh .ap-2{left:42%;top:46%}.vh .ap-3{left:58%;top:44%}.vh .ap-4{left:52%;top:15%}.vh .ap-5{left:24%;top:58%}
@media (max-width:340px){.vh-tag b{font-size:var(--fs-small)}.vh-line{font-size:var(--fs-small)}}
@media (min-width:900px){
  .vh-cone{width:96px;height:78px;margin-top:-39px}
  .vh-tag{height:20px;margin-top:-10px;padding:0 7px}.vh-tag b{font-size:var(--fs-small)}.vh-tag em{font-size:var(--fs-small)}
  .vh-cam.lb-u .vh-tag{transform:translateY(-16px)}.vh-cam.lb-d .vh-tag{transform:translateY(16px)}
  .vh-line{inset:auto 14px 14px 14px;padding:9px 14px;font-size:var(--fs-small);min-height:52px}.vh-line b{font-size:var(--fs-small)}
  .vh-c{width:22px;height:22px}
}
@media (prefers-reduced-motion:reduce){.vh *,.vh *::before,.vh *::after{animation:none!important;transition:none!important}.vh-ring::after{opacity:.5}}
/* the cameras page (/services/cctv/): the same panel with no needs to choose from — the cameras alone, beside the package card */
.vh.vh-solo .vh-line-cam{display:grid}

/* ── 1.38.0: the house in three dimensions (static/house3d.js). The canvas lies over the picture; once the script is on
   (.h3-on) the picture, its tags and its domes step aside and the canvas is the house. With no script nothing below applies. ── */
.h3{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:pan-y;cursor:grab;outline:none;-webkit-tap-highlight-color:transparent}
.h3[hidden]{display:none}
.h3:active{cursor:grabbing}
.h3:focus-visible{outline:2px solid #FFE3A1;outline-offset:-5px}
.vh.h3-on .vh-stage{aspect-ratio:auto;height:clamp(250px,calc(100svh - 400px),400px)}     /* a height of its own: aspect-ratio with a max-height made some phones narrow the stage instead, and the house stood in one half of the panel */
.vh.h3-on .vh-img,.vh.h3-on .vh-scan,.vh.h3-on .vh-line-build{display:none!important}
.vh.h3-on .vh-cams{inset:auto;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)}     /* its buttons stay for the keyboard and the reader; the canvas draws them */
.vh.h3-on .vh-line{z-index:1;pointer-events:none}
/* the Wi-Fi counter: over the house, always showing while the Wi-Fi is the need */
.vh .vh-line.h3-count{inset:8px 8px auto 8px;min-height:0;padding:5px 10px;justify-content:center;text-align:center;font-size:var(--fs-small);font-weight:700;color:#bff3e6}
.vh.vh-is-wifi .vh-cams{display:none}
.vh.vh-is-wifi .vh-line-wifi{display:flex}
.vh-line.h3-count{justify-content:center;font-weight:700;color:#bff3e6}
/* a phone: the three needs, then the house from edge to edge, then the short panel — in one screen */
@media (max-width:899px){
  .w2-grid>.w2-head{order:1}.w2-grid>.w2-needs{order:2}.w2-grid>.vh{order:3}.w2-grid>.w2-p{order:4}.w2-grid>.w2-all{order:5}
  .w2-grid>.vh.h3-on{margin-inline:calc(var(--gutter) * -1);border-radius:0}
  .w2-hero .w2-head p{display:none}
  .w2-solo .w2-grid>.w2-mini{order:4}
}
@media (min-width:900px){
  .vh.h3-on .vh-stage{height:clamp(380px,calc(100vh - 230px),540px)}
}

/* ── 1.38.2: the numbers stand in a column on the panel's left, the Wi-Fi is a plan of each floor seen from above ── */
.vh-side{position:absolute;left:8px;top:8px;bottom:8px;z-index:2;display:none;flex-direction:column;justify-content:center;gap:6px;width:46px}
#need-cctv:checked~.vh .vh-side-cam,.vh.vh-solo:not(.vh-is-wifi) .vh-side-cam{display:flex}
#need-wifi:checked~.vh .vh-side-wifi,.vh.vh-is-wifi .vh-side-wifi{display:flex}
.vh-side-wifi{top:40px}
.vh-n,.vh-side button{display:grid;place-items:center;min-height:44px;padding:0;border-radius:8px;border:1px solid rgba(84,186,167,.55);background:rgba(21,29,53,.78);color:#bff3e6;font:700 var(--fs-num)/1 Montserrat,system-ui,sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent}
.vh-n.on{background:#54BAA7;border-color:#54BAA7;color:#151D35;box-shadow:0 0 12px 1px rgba(84,186,167,.55)}
.vh-side button .ico{width:20px;height:20px}
.vh-side button:disabled{opacity:.35;cursor:default}
.vh-side button:focus-visible{outline:2px solid #FFE3A1;outline-offset:2px}
.vh-side output{text-align:center;font:700 var(--fs-num-lg)/1.2 Montserrat,system-ui,sans-serif;color:#fff}
.vh-side-price{display:grid;justify-items:center;margin-top:2px;font-size:var(--fs-small);line-height:1.3;color:#9fb3c8;text-align:center}
.vh-side-price b{font-size:var(--fs-small);color:#fff}
.w2-hero:has(#cams-2:focus-visible) [for=cams-2],.w2-hero:has(#cams-4:focus-visible) [for=cams-4],.w2-hero:has(#cams-6:focus-visible) [for=cams-6],.w2-hero:has(#cams-8:focus-visible) [for=cams-8]{outline:2px solid #FFE3A1;outline-offset:2px}
/* the cameras' sentence leaves the column its place */
#need-cctv:checked~.vh .vh-line-cam,.vh.vh-solo .vh-line-cam{left:62px}
/* the plan */
.vh-plan{position:absolute;inset:40px 8px 8px 62px;display:none;flex-direction:column;align-items:center;gap:6px}
#need-wifi:checked~.vh .vh-plan,.vh.vh-is-wifi .vh-plan{display:flex}
#need-wifi:checked~.vh .h3,#need-wifi:checked~.vh .vh-img,.vh.vh-is-wifi .h3,.vh.vh-is-wifi .vh-img{display:none}
.vp-r{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.vp{flex:1 1 0;min-height:0;width:100%;overflow:hidden}
.vp-floor{display:none}
#vp-f0:checked~.vp .vp-f0,#vp-f1:checked~.vp .vp-f1{display:inline}
.vp-room rect{fill:rgba(255,255,255,.05);stroke:rgba(190,200,215,.45);stroke-width:.6}
.vp-room.ok rect{fill:rgba(84,186,167,.22);stroke:#54BAA7}
.vp-name{font-size:4.6px;font-weight:600;fill:#9aa7ba}
.vp-room.ok .vp-name{fill:#eafbf6}
.vp-weak{font-size:4.2px;fill:#9aa7ba}
.vp-room.ok .vp-weak{display:none}
.vp-ap{opacity:0;transition:opacity .35s ease}
.vp-ap.on{opacity:1}
.vp-reach{fill:rgba(84,186,167,.2);stroke:#54BAA7;stroke-width:.5;stroke-dasharray:1.6 1.6}
.vp-dot{fill:#54BAA7;stroke:#151D35;stroke-width:1}
.vp-num{font:700 6px Montserrat,system-ui,sans-serif;fill:#151D35}
.vp-scan{position:absolute;inset:0 0 44px 0;opacity:0;pointer-events:none}
.vp-scan::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:linear-gradient(90deg,transparent,#54BAA7 30%,#bff3e6 50%,#54BAA7 70%,transparent);box-shadow:0 0 12px 2px rgba(84,186,167,.6)}
.vh-plan.scan .vp-scan{animation:vh-scan .75s ease-out 1}
.vp-tabs{flex:none;display:flex;border:1px solid rgba(84,186,167,.55);border-radius:9px;overflow:hidden}
.vp-tabs label{display:grid;place-items:center;min-height:36px;padding:0 14px;font-size:var(--fs-small);font-weight:600;color:#bff3e6;cursor:pointer;-webkit-tap-highlight-color:transparent}
#vp-f0:checked~.vp-tabs [for=vp-f0],#vp-f1:checked~.vp-tabs [for=vp-f1]{background:#54BAA7;color:#151D35}
.vp-r:focus-visible~.vp-tabs{outline:2px solid #FFE3A1;outline-offset:2px}
@media (min-width:900px){
  .vh-side{left:14px;width:52px}.vh-n,.vh-side button{min-height:48px}
  #need-cctv:checked~.vh .vh-line-cam,.vh.vh-solo .vh-line-cam{left:76px}
  .vh-plan{inset:52px 14px 14px 76px}.vh-side-wifi{top:52px}
  .vp-name{font-size:3.6px}.vp-weak{font-size:3.2px}.vp-num{font-size:5px}
  .vp-tabs label{min-height:40px;font-size:var(--fs-small);padding:0 18px}
}

/* ── 1.40.0: the real villa, turning (static/turn.js): two pictures one over the other — the fade between two frames is
   between them — and the cameras' canvas over both. Hidden until the first frame has arrived; then the still picture
   under it steps aside (.h3-on, above). Beside the column of numbers, not under it. ── */
.vt{position:absolute;inset:0}
.vt[hidden]{display:none}
#need-cctv:checked~.vh .vt,.vh.vh-solo .vt{left:58px}
.vt-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .12s linear;pointer-events:none;user-select:none;-webkit-user-select:none}
.vt-img.on{opacity:1}
.vt-fine .vt-img{transition-duration:.06s}
#need-wifi:checked~.vh .vt,.vh.vh-is-wifi .vt{display:none}
#need-build:checked~.vh .vt-img{filter:url(#vh-edges)}
@media (min-width:900px){#need-cctv:checked~.vh .vt,.vh.vh-solo .vt{left:72px}}
@media (prefers-reduced-motion:reduce){.vt-img{transition:none!important}}

/* ── 1.44.0: the hero's card, the designer's v2 (brand/generated/mockups/camera-view-v2-mobile.html and -desktop.html).
   One white card on the grey of the hero; the one dark thing in it is the camera's window. The villa by day on a light
   square with a numbered mark per camera; the window with «مباشر», day or night (two radios, no script) and a see-through
   strip that carries the camera's code, its name and the clock; the sentence and «صورة توضيحية» on one line; one row of
   small pictures; and the package — its number and its price in one capsule. A phone first, the wide screen after.
   The height follows the height of the screen (the manager's rule): --scr is the height of the window, everything else is
   fixed, so the whole hero stands in one screen and the head of the next section shows whole above the bar at the foot.
   The line below is web/camview.py's css() — where each illustrative picture is aimed (tests keep the two the same). */
.cv-at-corner{object-position:50% 50%}.cv-at-gate{object-position:50% 50%}.cv-at-chamfer{object-position:50% 50%}.cv-at-wall{object-position:50% 50%}.cv-at-kitchen{object-position:52% 50%}.cv-at-roof{object-position:58% 50%}.cv-at-yard{object-position:50% 50%}.cv-at-garage{object-position:50% 50%}.cv-own{object-position:50% 50%}
/* the hero around the card: one line of title, the three needs as chips that all fit a phone, the card */
.w2-hero{padding:10px 0 12px}
.w2-hero::before{width:150px;height:92px;inset:0 auto auto 0}
.w2-hero+.sec{padding-top:14px}
.w2-hero .w2-grid{gap:0}
.w2-hero .w2-head h1{font-size:var(--fs-h1);line-height:28px;white-space:nowrap}
[dir=ltr] .w2-hero .w2-head h1{white-space:normal}
.w2-hero .w2-head h1 b{font-weight:inherit;color:var(--mint-ink)}
.w2-hero .w2-needs{display:flex;gap:5px;margin-top:8px}
.w2-hero .w2-need{display:flex;flex:1 1 auto;align-items:center;justify-content:center;min-width:0;height:38px;min-height:0;padding:0 9px;border:0;border-radius:var(--radius-pill);background:var(--surface-raised);box-shadow:none;white-space:nowrap}
.w2-hero .w2-need b{font-size:12px;line-height:18px}
.w2-hero .w2-need small,.w2-hero .w2-need .w2-tick,.w2-hero .w2-need-ico{display:none}
.w2-hero .w2-grid>.vh{margin-top:10px}
.w2-hero .w2-p{margin-top:10px}
.w2-solo .w2-grid>.vh{margin-top:0}.w2-solo .w2-grid>.w2-mini{margin-top:10px}
/* the card: light, with the light theme's own colours (the navy ones return on the dark stage of the Wi-Fi and the outline) */
.w2-hero .vh{--surface:#F1F2F2;--surface-raised:#FFFFFF;--ink:#1F2A4B;--ink-muted:#4F5A73;--mint-ink:#167565;--line:#DDE1E6;--border-strong:#7A8499;--focus:#167565;border-radius:var(--radius-lg);background:#fff;color:var(--ink);box-shadow:0 2px 12px rgba(18,40,76,.08)}
.vh{--scr:112px;--th:40px;display:grid;grid-template-columns:125px minmax(0,1fr);grid-template-rows:var(--scr) 30px calc(var(--th) + 8px) auto;grid-template-areas:"villa scr" "txt txt" "ths ths" "buy buy";column-gap:8px;padding:10px;overflow:visible}       /* the rows are fixed: the three slices stand exactly as tall as one another */
.vh::before{display:none}
.vh .vh-stage{display:contents;aspect-ratio:auto}
.cv{display:contents}
.cv-r{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
/* the villa, by day, on its light square */
.cv-villa{grid-area:villa;position:relative;min-width:0;height:var(--scr);border-radius:14px;background:var(--surface);overflow:hidden}
.cv-box{position:absolute;left:-7%;right:-7%;top:calc(var(--scr) * .5);aspect-ratio:1400/1046;transform:translateY(-52%)}       /* placed by the window's height, not the square's: the villa stands in the same place in every slice */
.vh .vh-day{display:block}
.cv-hint{display:none}
/* a camera's mark: a white disc with a navy ring and its number; the pressed one is mint with a soft ring. A finger's
   width around every mark answers the press (the small pictures are the other way to the same camera). */
.vh .vh-cam{width:20px;height:20px;margin:-10px 0 0 -10px;display:grid;place-items:center;border-radius:50%;background:#fff;box-shadow:0 0 0 1.5px #1F2A4B;color:#1F2A4B}
.vh .vh-cam::before{left:-12px;top:-12px;right:-12px;bottom:-12px;width:auto;height:auto;background:none;transform:none;pointer-events:auto}
.vh-cam b{font:700 10px/1 Montserrat,system-ui,sans-serif}
.vh-cam[aria-pressed=true] b{font-size:11px}
.vh .vh-cam[aria-pressed=true]{width:22px;height:22px;margin:-11px 0 0 -11px;background:var(--mint);box-shadow:0 0 0 4px rgba(84,186,167,.3)}
.vh-cam:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
/* the window */
.cv-scr{grid-area:scr;position:relative;min-width:0;height:var(--scr)}
.cv-pic{position:absolute;inset:0;border-radius:14px;overflow:hidden;background:#0E1428;color:#fff}
.cv-img{display:block;width:100%;height:100%;object-fit:cover}
.cv-pic::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,0) 2px,rgba(0,0,0,.14) 3px)}
/* 1.47.0: night is the scene's own night picture (the camera's infra-red), not a filter over the day's — one or the other
   shows, by the radio. A package of 8MP keeps its colours at night: there the day's picture stays, dimmed. A frame the
   owner uploaded, or a place of the older pictures, has no night of its own: only those are darkened here. */
.cv-n{display:none}
#cv-night:checked~.cv-scr .cv-d{display:none}
#cv-night:checked~.cv-scr .cv-n{display:block}
#cv-night:checked~.cv-scr .cv-n.cv-own{filter:grayscale(.75) brightness(.5) contrast(1.25)}       /* an owner's frame has no night of its own; the designer's night scenes (1.55.1: real, lit by the wall's lamps) carry no filter, and 4MP and 8MP show the same one — the difference is in the words */
.cv-live,.cv-dn,.cv-night-line{position:absolute;z-index:2;top:8px;display:flex;align-items:center;height:22px;box-sizing:border-box;border-radius:var(--radius-sm);background:rgba(14,20,40,.78);font-family:var(--font-heading);font-weight:600;font-size:11px;line-height:18px}
.cv-live{inset-inline-start:8px;gap:5px;padding:0 8px}
.cv-live i{display:block;width:7px;height:7px;border-radius:50%;background:var(--offer)}
.cv-dn{inset-inline-end:8px;padding:2px}
.cv-dn label{display:grid;place-items:center;height:18px;padding:0 7px;border-radius:6px;font:inherit;color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent}
#cv-day:checked~.cv-scr [for=cv-day],#cv-night:checked~.cv-scr [for=cv-night]{background:var(--mint);color:#1F2A4B}
#cv-day:focus-visible~.cv-scr [for=cv-day],#cv-night:focus-visible~.cv-scr [for=cv-night]{outline:2px solid #fff;outline-offset:1px}
.cv-night-line{display:none;top:35px;inset-inline-end:8px;max-width:calc(100% - 52px);padding:0 7px;font-family:var(--font-body);font-weight:500;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#cv-night:checked~.cv-scr .cv-night-line{display:block;line-height:22px}
.cv-foot{position:absolute;z-index:2;left:0;right:0;bottom:0;display:flex;align-items:flex-end;justify-content:space-between;gap:6px;padding:6px 8px;background:rgba(14,20,40,.58)}
.cv-id{min-width:0;font-size:11px;line-height:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-id b{display:block;font-family:var(--font-latin);font-weight:700;letter-spacing:.04em;color:var(--mint);text-align:start}
[dir=rtl] .cv-id b{text-align:right}
.cv-sep{display:none}
.cv-ts{flex:none;display:flex;flex-direction:column-reverse;font-family:var(--font-latin);font-weight:600;font-size:10px;line-height:13px;text-align:left;opacity:.9}
/* «شاهد مثال التصوير» (when the owner has uploaded a clip): on a phone an eye inside the window, under «مباشر»; on a wide
   screen a link at the end of the sentence's line */
.cv-scr .cv-sample{position:absolute;z-index:3;top:35px;inset-inline-start:8px;display:grid;place-items:center;width:28px;height:28px;min-height:0;margin:0;padding:0;border-radius:var(--radius-sm);background:rgba(14,20,40,.78);color:#fff}
.cv-scr .cv-sample::before{content:"";position:absolute;inset:-8px}
.cv-scr .cv-sample .ico{width:18px;height:18px}
.cv-scr .cv-sample span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.cv-scr .cv-sample:focus-visible{outline:2px solid #fff;outline-offset:1px}
/* the sentence of what the camera sees, and what kind of picture this is: one line */
.cv-txt{grid-area:txt;min-width:0;margin:8px 2px 0}
.cv-say{margin:0;font-size:var(--fs-ui);line-height:22px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-illus{font-size:12px;color:var(--ink-muted)}
/* 1.54.0: «صورة توضيحية» is never the part that is cut — a long sentence (the English ones are) gives way to it */
.cv-say{display:flex;min-width:0}
.cv-say>[data-cv-say]{min-width:0;overflow:hidden;text-overflow:ellipsis}
.cv-say>.cv-illus{flex:none}
.cv-illus::before{content:"|";margin-inline:6px}
.cv-illus[hidden]{display:none}
/* the small pictures: one row, one per camera of the package — never narrower than a finger: eight on a phone scroll
   sideways inside their row (static/camview.js brings the pressed one into sight) */
.cv-ths{grid-area:ths;min-width:0;margin-top:8px}
.cv-th{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(44px,1fr);gap:7px;padding:2px;margin:-2px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
.cv-th::-webkit-scrollbar{display:none}
.cv-th[hidden]{display:none}
.cv-th[data-cv-thumbs="2"]{grid-auto-columns:calc((100% - 21px) / 4)}
.cv-th button{position:relative;height:var(--th);padding:0;border:0;border-radius:10px;overflow:hidden;background:var(--surface);cursor:pointer;-webkit-tap-highlight-color:transparent}
.cv-th img{display:block;width:100%;height:100%;object-fit:cover}
.cv-th b{position:absolute;inset-inline-start:4px;top:4px;min-width:16px;height:16px;padding:0 2px;box-sizing:border-box;border-radius:5px;background:rgba(14,20,40,.78);color:#fff;font:700 10px/16px Montserrat,system-ui,sans-serif;text-align:center}
.cv-th [aria-pressed=true]{box-shadow:0 0 0 2px var(--mint)}
.cv-th [aria-pressed=true] b{background:var(--mint);color:#1F2A4B}
.cv-th button:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
/* the package: on a phone the number of cameras and the price in one capsule (the name and the booking are the bar's, at the foot of the screen) */
.w2-mini.cv-panel{grid-area:buy;display:block;min-width:0;margin:10px 0 0;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.cv-panel .oh-field{position:static;width:auto;height:auto;min-width:0;margin:0;padding:0;border:0;overflow:visible;clip:auto;clip-path:none}
.cv-badge,.cv-name,.cv-res.cv-row,.cv-spec,.cv-acts{display:none}
.cv-cap{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px;border-radius:var(--radius-md);background:var(--surface)}
.cv-row{display:flex;align-items:center;gap:2px}
.cv-res.cv-row{display:none}
.w2-mini .cv-row legend{position:static;float:right;width:44px;height:auto;margin:0;padding:0 6px 0 8px;overflow:visible;clip:auto;font-size:12px;line-height:16px;color:var(--ink-muted)}
[dir=ltr] .w2-mini .cv-row legend{float:left;width:auto;max-width:76px}
.w2-mini.cv-panel .cv-seg{display:flex;gap:2px}
.cv-panel .cv-seg .oh-opt span{width:36px;min-width:0;height:40px;min-height:0;padding:0;border-radius:12px;background:none;box-shadow:none;color:var(--ink-muted);font:700 var(--fs-body)/1 Montserrat,system-ui,sans-serif}
.cv-panel .cv-seg .oh-opt input:checked+span{background:var(--navy);color:#fff;box-shadow:none}
.cv-panel .cv-seg .oh-opt input:focus-visible+span{outline:2px solid var(--focus);outline-offset:2px}
.cv-cost{flex:none;display:flex;align-items:center;height:40px;padding:0 10px;border-radius:12px;background:#fff}
.cv-panel .w2-mini-price{display:block;margin:0}
.cv-panel .w2-mini-price .w2-price{display:inline-flex;align-items:baseline;gap:5px}
.w2-hero .w2-mini-price .w2-price b{font-weight:700}       /* Arya Dots 2 Bold, as the approved model (static/fonts/v2/fonts.css holds the weight) */
.cv-panel .w2-mini-price .w2-price b{font-size:var(--fs-price-card);line-height:40px}
.cv-panel .w2-mini-price .w2-price .cur{font-family:var(--font-latin);font-weight:700;font-size:12px;color:var(--ink-muted)}
/* ── 1.45.0: the three slices in the one card (the designer's wifi-view-v2-* and build-view-v2-*). The same villa, the
   same rows, the capsule in its place; what differs is marked nd-cctv, nd-wifi or nd-build, and the three radios of the
   needs (or the page's own kind) decide which shows — no script. The line below is web/villa.py's spots_css(): where each
   Wi-Fi distributor and each of the five systems stands on the villa (tests keep the two the same). ── */
.wf-ap.ap-0{left:35%;top:61%}.wf-ap.ap-1{left:59%;top:42%}.wf-ap.ap-2{left:71%;top:68%}.wf-ap.ap-3{left:41%;top:29%}.wf-ap.ap-4{left:37%;top:49%}.wf-ap.ap-5{left:58%;top:31%}.wf-ap.ap-6{left:68%;top:55%}.wf-ap.ap-7{left:43%;top:19%}.wf-f0 .wp-ap.pa-0{left:30.8%;top:68.1%}.wf-f0 .wp-ap.pa-1{left:76.9%;top:74.7%}.wf-f0 .wp-ap.pa-2{left:25%;top:24.2%}.wf-f0 .wp-ap.pa-3{left:80.8%;top:29.7%}.wf-f1 .wp-ap.pa-0{left:55.8%;top:64.8%}.wf-f1 .wp-ap.pa-1{left:25%;top:27.5%}.wf-f1 .wp-ap.pa-2{left:80.8%;top:27.5%}.wf-f1 .wp-ap.pa-3{left:25%;top:71.4%}.bd-i.at-cctv{left:29%;top:65%}.bd-i.at-intercom{left:51%;top:79%}.bd-i.at-wifi{left:61%;top:45%}.bd-i.at-pbx{left:80%;top:58%}.bd-i.at-sat{left:45%;top:19%}
#need-cctv:checked~.vh :is(.nd-wifi,.nd-build),#need-wifi:checked~.vh :is(.nd-cctv,.nd-build),#need-build:checked~.vh :is(.nd-cctv,.nd-wifi),.vh.vh-solo:not(.vh-is-wifi) :is(.nd-wifi,.nd-build),.vh.vh-is-wifi :is(.nd-cctv,.nd-build){display:none!important}
/* the villa by day stays in every slice (the older rules above took it away for the Wi-Fi and drew a house being built as lines) */
#need-wifi:checked~.vh .vh-day,.vh.vh-is-wifi .vh-day{display:block}
#need-build:checked~.vh .vh-day{filter:none}
/* the title and the line under it follow the slice too: one heading, the words of the chosen need */
.w2-t{display:none}
#need-cctv:checked~.w2-head .w2-t-cctv,#need-wifi:checked~.w2-head .w2-t-wifi,#need-build:checked~.w2-head .w2-t-build{display:inline}
/* Wi-Fi, on the villa: a white see-through mark per distributor that is on, and its ring of coverage — those of the floor showing */
.wf-aps,.bd-icons{position:absolute;inset:0;pointer-events:none}
.wf-fl{display:none}
#vp-f0:checked~.cv-villa .wf-f0,#vp-f1:checked~.cv-villa .wf-f1{display:block}
.wf-ap{position:absolute;display:none;width:0;height:0}
.wf-ap.on{display:block}
.wf-ap i{position:absolute;left:-29px;top:-17px;width:58px;height:34px;box-sizing:border-box;border-radius:50%;background:rgba(255,255,255,.3);border:1px solid rgba(255,255,255,.8)}
.wf-ap b{position:absolute;left:-11px;top:-11px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.82);box-shadow:0 0 0 1px rgba(255,255,255,.9);color:#1F2A4B;font:700 11px/1 Montserrat,system-ui,sans-serif}
/* Wi-Fi, beside the villa: the rooms of the floor, each with the number of the distributor that reaches it — or «ضعيف» */
.wf-rooms{grid-area:scr;min-width:0;height:var(--scr)}
.wf-grid{display:none;height:100%;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:5px}
#vp-f0:checked~.wf-rooms .wf-f0,#vp-f1:checked~.wf-rooms .wf-f1{display:grid}
.wf-room{display:flex;align-items:center;justify-content:space-between;gap:4px;min-width:0;padding:0 8px;border-radius:10px;background:var(--surface);color:var(--ink-muted);font-size:11px;line-height:14px}
.wf-room:first-child{grid-column:1/3}
.wf-room.ok{background:var(--mint-soft);color:var(--ink)}
.wf-room b{flex:none;display:none;width:16px;height:16px;border-radius:50%;background:var(--mint);color:#1F2A4B;font:700 10px/16px Montserrat,system-ui,sans-serif;text-align:center}
.wf-room.ok b{display:block}
.wf-room small{flex:none;font-size:10px;line-height:14px;color:var(--ink-muted)}
.wf-room.ok small{display:none}
.wf-count{grid-area:txt;min-width:0;margin:8px 2px 0;font-size:var(--fs-ui);line-height:22px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wf-tabs{grid-area:ths;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:8px}
.wf-tabs label{display:grid;place-items:center;height:var(--th);border-radius:10px;background:var(--surface);color:var(--ink-muted);font-family:var(--font-heading);font-weight:600;font-size:var(--fs-small);cursor:pointer;-webkit-tap-highlight-color:transparent}
#vp-f0:checked~.wf-tabs [for=vp-f0],#vp-f1:checked~.wf-tabs [for=vp-f1]{background:var(--navy);color:#fff}
#vp-f0:focus-visible~.wf-tabs [for=vp-f0],#vp-f1:focus-visible~.wf-tabs [for=vp-f1]{outline:2px solid var(--focus);outline-offset:2px}
/* Wi-Fi, the capsule: the number of distributors with its − and +, and the price */
.wf-sub,.cv-panel .hw-fine{display:none}
.wf-step{gap:4px}
.wf-lbl,.bd-lbl{flex:none;width:48px;padding:0 6px;font-size:12px;line-height:16px;color:var(--ink-muted)}
.wf-btns{display:flex;align-items:center;gap:4px}
.wf-btns button{display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:12px;background:#fff;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent}
.wf-btns button .ico{width:18px;height:18px}
.wf-btns button:disabled{opacity:.4;cursor:default}
.wf-btns button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.wf-btns output{width:34px;text-align:center;font:700 var(--fs-num-lg)/1 Montserrat,system-ui,sans-serif;color:var(--ink)}
/* a house being built: the five systems on the villa, what the estimator does beside it, the five again in a row, and the area of the plot in the capsule */
.bd-i{position:absolute;display:grid;place-items:center;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;background:rgba(255,255,255,.82);box-shadow:0 0 0 1px rgba(255,255,255,.9);color:#1F2A4B}
.bd-i .ico{width:14px;height:14px}
#need-build:checked~.vh .cv-villa{grid-row:1/3;height:auto}
.bd-info{grid-column:2;grid-row:1/3;display:flex;flex-direction:column;justify-content:center;gap:6px;min-width:0;padding:12px;border-radius:14px;background:var(--surface)}
.bd-info h2{margin:0;font-size:var(--fs-h2);line-height:24px;color:var(--ink)}
.bd-info p{margin:0;font-size:var(--fs-small);line-height:20px;color:var(--ink-muted)}
.bd-systems{grid-area:ths;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-top:8px}
.bd-s{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:0;height:var(--th);border-radius:10px;background:var(--surface);color:var(--ink);font-size:10px;line-height:13px}
.bd-s .ico{width:17px;height:17px;color:var(--mint-ink)}
.bd-panel .cv-cap{justify-content:flex-start;gap:6px}
.bd-lbl{width:40px}
.bd-unit.bd-unit{font-family:var(--font-body);font-weight:600}
.bd-hint{margin-inline-start:auto;padding:0 8px;font-size:12px;line-height:16px;color:var(--ink-muted);text-align:end}
@media (max-width:899px){
  .w2-hero .w2-head p{display:none}
  .w2-solo .w2-grid>.vh{order:1}.w2-solo .w2-grid>.w2-mini{order:2}
  /* English words are longer: the chips scroll sideways inside their row, and the capsule keeps its numbers without the label (it stays for a reader) */
  [dir=ltr] .w2-hero .w2-needs{margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);overflow-x:auto;scrollbar-width:none}
  [dir=ltr] .w2-hero .w2-needs::-webkit-scrollbar{display:none}
  [dir=ltr] .w2-hero .w2-need{flex:none}
  [dir=ltr] .w2-mini .cv-row legend,[dir=ltr] .wf-lbl{position:absolute;float:none;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0)}
}
@supports (height:1svh){
  .vh{--scr:clamp(88px,calc(100svh - 548px),150px)}
}
/* a short phone (up to 640 high): everything around the window draws in a little */
@media (max-width:899px) and (max-height:640px){
  .w2-hero{padding:6px 0 8px}.w2-hero+.sec{padding-top:10px}
  .w2-hero .w2-head h1{line-height:26px}.w2-hero .w2-needs{margin-top:6px}.w2-hero .w2-need{height:36px}
  .w2-hero .w2-grid>.vh{margin-top:8px}.vh{padding:8px}
  .cv-txt{margin-top:6px}.cv-ths{margin-top:6px}.w2-mini.cv-panel{margin-top:8px}
  .cv-panel .cv-seg .oh-opt span{height:36px}.cv-cost{height:36px}.cv-panel .w2-mini-price .w2-price b{line-height:36px}
  @supports (height:1svh){.vh{--scr:clamp(80px,calc(100svh - 520px),150px)}}
}
/* a wide screen: the title with the needs beside it, and the card in three columns — the villa, the window, the package */
@media (min-width:900px){
  .w2-hero{padding:16px 0}
  .w2-hero::before{width:420px;height:98px}
  .w2-hero+.sec{padding-top:18px}
  .w2-hero .w2-grid{grid-template-columns:minmax(0,1fr) 340px;column-gap:24px;row-gap:12px;align-items:stretch}
  .w2-hero .w2-head,.w2-hero #need-wifi:checked~.w2-head,.w2-hero #need-build:checked~.w2-head{grid-column:1/-1;grid-row:1}       /* the line under the title runs under the chips, which stand at the end of the title's own line */
  .w2-hero .w2-head h1{font-size:var(--fs-h1);line-height:44px}.w2-hero .w2-head h1 b{color:var(--mint)}
  [dir=ltr] .w2-hero .w2-head h1{font-size:var(--fs-h1);white-space:nowrap}
  .w2-hero .w2-head p{min-height:26px;margin:4px 0 0;font-size:var(--fs-body);line-height:26px}       /* a slice with no line under its title keeps the line's room */
  .w2-hero .w2-needs,.w2-hero #need-wifi:checked~.w2-needs,.w2-hero #need-build:checked~.w2-needs{grid-column:2;grid-row:1;justify-self:end;align-self:start;width:max-content;margin:0;gap:8px}
  .w2-hero .w2-need{flex:none;height:44px;padding:0 18px}
  .w2-hero .w2-need b{font-size:var(--fs-body);line-height:22px}
  .w2-hero .w2-grid>.vh,.w2-solo .w2-grid>.vh{grid-column:1/-1;grid-row:2;align-self:stretch;margin:0}
  .w2-solo .w2-grid>.vh{grid-row:1}
  .vh{--scr:210px;--th:54px;grid-template-columns:230px minmax(0,1fr) 300px;grid-template-rows:var(--scr) 34px calc(var(--th) + 8px) 30px;grid-template-areas:"villa scr buy" "villa txt buy" "villa ths buy" "villa smp buy";column-gap:16px;padding:16px}
  .cv-villa{height:auto;border-radius:var(--radius-md)}
  .cv-box{transform:translateY(-58%)}
  .cv-hint{display:block;position:absolute;left:0;right:0;bottom:12px;margin:0;text-align:center;font-size:var(--fs-ui);line-height:22px;color:var(--ink-muted)}
  .vh .vh-cam{width:28px;height:28px;margin:-14px 0 0 -14px}
  .vh .vh-cam::before{left:-8px;top:-8px;right:-8px;bottom:-8px}
  .vh-cam b{font-size:var(--fs-small)}.vh-cam[aria-pressed=true] b{font-size:var(--fs-ui)}
  .vh .vh-cam[aria-pressed=true]{width:32px;height:32px;margin:-16px 0 0 -16px;box-shadow:0 0 0 6px rgba(84,186,167,.3)}
  .cv-pic{border-radius:var(--radius-md)}
  .cv-live,.cv-dn,.cv-night-line{top:12px;height:28px;font-size:var(--fs-small)}
  .cv-live{inset-inline-start:12px;gap:6px;padding:0 10px}.cv-live i{width:8px;height:8px}
  .cv-dn{inset-inline-end:12px}.cv-dn label{height:24px;padding:0 10px}
  .cv-night-line{top:46px;inset-inline-end:12px;max-width:calc(100% - 24px);padding:0 10px}
  #cv-night:checked~.cv-scr .cv-night-line{line-height:28px}
  .cv-foot{gap:12px;padding:8px 14px}
  .cv-id{font-size:var(--fs-ui);line-height:20px}.cv-id b{display:inline}.cv-sep{display:inline}
  .cv-ts{display:block;font-size:var(--fs-small);line-height:20px}
  .cv-scr .cv-sample{top:calc(100% + 8px);inset-inline-start:auto;inset-inline-end:0;display:block;width:auto;height:26px;border-radius:0;background:none;color:var(--mint-ink);font-family:var(--font-heading);font-weight:600;font-size:var(--fs-small);line-height:26px;white-space:nowrap;text-decoration:underline;text-underline-offset:3px}
  .cv-scr .cv-sample::before{display:none}
  .cv-scr .cv-sample .ico{display:none}
  .cv-scr .cv-sample span{position:static;width:auto;height:auto;overflow:visible;clip:auto}
  .cv-scr .cv-sample:focus-visible{outline-color:var(--focus)}
  .cv-txt{margin:8px 0 0;height:26px}
  .cv-say{font-size:var(--fs-body);line-height:26px}.cv-illus{font-size:var(--fs-small)}
  .cv-th{gap:8px}.cv-th button{border-radius:12px}
  .cv-th b{inset-inline-start:5px;top:5px;min-width:18px;height:18px;font-size:11px;line-height:18px}
  /* the package: its own column of the card */
  .w2-mini.cv-panel{display:flex;flex-direction:column;align-items:stretch;gap:0;margin:0}
  .cv-badge{display:inline-flex;align-self:flex-start;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:var(--radius-sm);background:var(--mint-soft);color:var(--mint-ink);font-family:var(--font-heading);font-weight:600;font-size:var(--fs-small)}
  .cv-badge[hidden]{display:none}
  .cv-badge i{width:6px;height:6px;border-radius:50%;background:var(--mint)}
  .cv-name{display:block;margin:8px 0 0;font-size:var(--fs-h2);line-height:28px;color:var(--ink)}
  .cv-badge[hidden]+.cv-name{margin-top:0}
  .cv-cap{flex-direction:column;align-items:stretch;gap:5px;margin-top:10px}
  .cv-row{justify-content:space-between;gap:8px;padding-inline-start:8px}
  .w2-mini .cv-row legend,[dir=ltr] .w2-mini .cv-row legend{width:auto;max-width:none;padding:0;font-size:var(--fs-ui);line-height:22px;white-space:nowrap}
  .cv-panel .cv-seg .oh-opt span{width:40px;height:44px;font-size:var(--fs-body)}
  .cv-cost{justify-content:space-between;gap:10px;height:76px;padding:0 14px}
  .cv-spec{display:grid;min-width:0;margin:0;font-size:var(--fs-small);line-height:20px;color:var(--ink-muted)}
  .cv-spec[hidden]{display:none}
  .cv-spec[hidden]+.w2-mini-price{margin-inline-start:auto}
  .cv-panel .w2-mini-price .w2-price{gap:8px;white-space:nowrap}
  [dir=ltr] .cv-panel .w2-mini-price .w2-price b{font-size:var(--fs-price-hero)}       /* English lines beside the price are longer */
  [dir=ltr] .w2-mini .cv-cap .cv-row legend{font-size:var(--fs-small)}[dir=ltr] .cv-panel .cv-cap .cv-seg .oh-opt span{width:36px}
  .cv-panel .w2-mini-price .w2-price b{font-size:var(--fs-price-hero);line-height:76px}
  .cv-panel .w2-mini-price .w2-price .cur{font-size:var(--fs-num-lg)}
  .cv-res.cv-row{display:flex;margin-top:10px;padding-inline-start:13px}
  .cv-res .cv-seg{padding:4px;border-radius:var(--radius-md);background:var(--surface)}
  .cv-panel .cv-res .cv-seg .oh-opt span{width:64px;height:36px;font-size:var(--fs-ui)}
  .cv-acts{display:grid;margin-top:auto;padding-top:10px}
  .cv-acts .btn{min-height:52px;border-radius:var(--radius-md)}
  /* the Wi-Fi on a wide screen: the two floors on top, the rooms under them, the count at the foot — the same height in all */
  #need-wifi:checked~.vh,.vh.vh-is-wifi{grid-template-rows:var(--th) calc(var(--scr) + 38px) 34px;grid-template-areas:"villa ths buy" "villa scr buy" "villa txt buy"}
  .wf-ap i{left:-52px;top:-31px;width:104px;height:62px;border-width:1.5px}
  .wf-ap b{left:-15px;top:-15px;width:30px;height:30px;font-size:var(--fs-ui)}
  .wf-tabs{gap:8px;margin-top:0}.wf-tabs label{border-radius:12px;font-size:var(--fs-body)}
  .wf-rooms{height:auto;margin-top:8px}
  .wf-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:8px}
  .wf-room{align-items:flex-start;gap:6px;padding:14px;border-radius:14px;font-size:var(--fs-body);line-height:22px}
  .wf-room b{width:24px;height:24px;font-size:var(--fs-small);line-height:24px}.wf-room small{font-size:var(--fs-small);line-height:22px}
  .wf-count{margin:8px 0 0;font-size:var(--fs-body);line-height:26px}.wf-count .cv-illus{display:none}
  .wf-sub{display:block;margin:0;font-size:var(--fs-ui);line-height:22px;color:var(--ink-muted)}
  .wf-step{justify-content:space-between;padding-inline-start:8px}
  .wf-lbl{width:auto;padding:0;font-size:var(--fs-ui);line-height:22px}
  .wf-btns button{width:44px;height:44px}.wf-btns output{width:40px;font-size:var(--fs-num-lg)}
  .w2-mini-wifi .cv-cost{justify-content:center;height:60px}
  .w2-mini-wifi.cv-panel .w2-mini-price .w2-price b{font-size:var(--fs-price-hero);line-height:60px}
  .cv-panel .hw-fine{display:block;margin:6px 0 0;font-size:12px;line-height:18px;color:var(--ink-muted)}
  .w2-mini-wifi .cv-cap{margin-top:8px}.w2-mini-wifi .cv-acts{padding-top:6px}
  /* a house being built on a wide screen */
  #need-build:checked~.vh .cv-villa{grid-row:1/5}
  .bd-systems{grid-row:3/5;height:auto}.bd-s{height:auto}
  .bd-i{width:36px;height:36px;margin:-18px 0 0 -18px}.bd-i .ico{width:20px;height:20px}
  .bd-info{gap:8px;padding:24px 28px;border-radius:var(--radius-md)}
  .bd-info h2{font-size:var(--fs-h2);line-height:40px}.bd-info p{font-size:var(--fs-body);line-height:30px}
  .bd-systems{gap:8px}
  .bd-s{gap:4px;border-radius:14px;font-size:var(--fs-ui);line-height:20px}.bd-s .ico{width:24px;height:24px}
  .bd-panel .cv-cap{gap:0;margin-top:0;padding:0;background:none}
  .bd-lbl{width:auto;padding:0;font-family:var(--font-heading);font-weight:700;font-size:var(--fs-h2);line-height:28px;color:var(--ink)}
  .bd-panel .cv-cost{justify-content:center;height:96px;margin:15px 5px 0;box-shadow:0 0 0 5px var(--surface)}
  .bd-panel.cv-panel .w2-mini-price .w2-price b{font-size:var(--fs-price-hero);line-height:96px}
  .bd-panel.cv-panel .w2-mini-price .w2-price .cur{font-size:var(--fs-num-lg)}
  .bd-hint{margin:13px 0 0;padding:0;font-size:var(--fs-ui);line-height:22px;text-align:start}
  @supports (height:1svh){.vh{--scr:clamp(130px,calc(100vh - 558px),214px)}}
}
/* a short wide screen: the package draws in, then the line under the title goes */
@media (min-width:900px) and (max-height:760px){
  .cv-badge{display:none}.cv-name{margin-top:0}
  .cv-cost{height:60px}.cv-panel .w2-mini-price .w2-price b{font-size:var(--fs-price-hero);line-height:60px}
  .cv-acts .btn{min-height:46px}
  .cv-panel .hw-fine{display:none}.bd-panel .cv-cost{height:64px}.bd-panel.cv-panel .w2-mini-price .w2-price b{font-size:var(--fs-price-hero);line-height:64px}
}
@media (min-width:900px) and (max-height:719px){
  .w2-hero{padding:10px 0}.w2-hero .w2-grid{row-gap:10px}.w2-hero .w2-head p{display:none}
  .vh{--th:46px;padding:12px}
  .cv-cap{margin-top:6px}.cv-res.cv-row{margin-top:6px}.cv-acts{padding-top:6px}
  .cv-panel .cv-seg .oh-opt span{height:38px}.cv-panel .cv-res .cv-seg .oh-opt span{height:32px}
  @supports (height:1svh){.vh{--scr:clamp(110px,calc(100vh - 506px),214px)}}
}
/* ── 1.44.1: the cameras' slice after the owner tried it on his phone (the designer's revised camera-view-v2-*): the villa
   is the larger of the two and the window the smaller; «عدد الكاميرات» is one line over four buttons that look like
   buttons; and the price stands in a box of its own — its heading («سعر باقة N كاميرات»), the number, and what it
   includes — every word of it the package's own row. Inside the window on a phone: a sun and a moon for day and night,
   and the time without the date. ── */
#need-cctv:checked~.vh,.vh.vh-solo:not(.vh-is-wifi){grid-template-columns:minmax(0,1fr) 118px}
#need-cctv:checked~.vh .cv-box,.vh.vh-solo:not(.vh-is-wifi) .cv-box{left:50%;right:auto;height:calc(var(--scr) - 2px);transform:translate(-50%,-50%)}       /* as tall as its square, less a little: a mark on the roof stays whole */
.vh .vh-cam{width:26px;height:26px;margin:-13px 0 0 -13px;background:rgba(255,255,255,.88)}
.vh .vh-cam::before{left:-9px;top:-9px;right:-9px;bottom:-9px}
.vh-cam b,.vh-cam[aria-pressed=true] b{font-size:12px}
.vh .vh-cam[aria-pressed=true]{width:26px;height:26px;margin:-13px 0 0 -13px;background:var(--mint);box-shadow:0 0 0 2px #fff,0 0 0 6px rgba(84,186,167,.35)}
.cv-live,.cv-dn{top:6px}
.cv-live{inset-inline-start:6px;padding:0 7px}
.cv-dn{inset-inline-end:6px}
.cv-dn label{width:22px;padding:0}
.cv-dn .ico{width:12px;height:12px;stroke-width:2.4}
.cv-dn label span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.cv-night-line{top:32px;inset-inline-end:6px;max-width:calc(100% - 46px);height:auto;padding:2px 6px;text-align:center;white-space:normal}
#cv-night:checked~.cv-scr .cv-night-line{line-height:13px}
.cv-scr .cv-sample{top:32px;inset-inline-start:6px}
.cv-foot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 4px;padding:5px 7px 6px;background:rgba(14,20,40,.6);font-size:10px;line-height:14px}
.cv-id{display:contents}
.cv-id b{grid-column:1;grid-row:1;font-size:10px;line-height:14px}
.cv-nm{grid-column:1/-1;grid-row:2;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-ts{grid-column:2;grid-row:1;display:block;font-size:10px;line-height:14px}
.cv-ts [data-cv-date]{display:none}
/* the capsule: the number of cameras on one line over its four buttons, and the price in its box */
.vh .cv-cap{box-sizing:border-box;min-height:76px}
.cv-panel.nd-cctv .cv-cap{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px;padding:3px 6px}
.cv-panel.nd-cctv .cv-cap .cv-row{display:block;min-width:0}
.w2-mini.nd-cctv .cv-cap .cv-row legend,[dir=ltr] .w2-mini.nd-cctv .cv-cap .cv-row legend{position:static;float:none;display:block;width:auto;max-width:none;height:auto;padding:0 4px;overflow:visible;clip:auto;font-size:12px;line-height:18px;white-space:nowrap}
.w2-mini.cv-panel.nd-cctv .cv-cap .cv-seg{gap:0;margin-top:2px}
.cv-panel.nd-cctv .cv-cap .oh-opt{padding:2px 2.5px}       /* the label is what answers the press: 43 by 44 */
.cv-panel.nd-cctv .cv-cap .cv-seg .oh-opt span{width:38px;height:40px;box-sizing:border-box;border:1.5px solid var(--border-strong);border-radius:12px;background:#fff;box-shadow:0 2px 0 rgba(18,40,76,.12);color:var(--ink);font-size:var(--fs-body)}
.cv-panel.nd-cctv .cv-cap .cv-seg .oh-opt input:checked+span{border-color:var(--navy);background:var(--navy);color:#fff;box-shadow:none}
.cv-panel.nd-cctv .cv-cost{flex-direction:column;align-items:stretch;justify-content:center;width:122px;height:auto;box-sizing:border-box;padding:4px 8px;text-align:center}
.cv-of{display:contents;margin:0}
.cv-of b{order:1;font-family:var(--font-heading);font-weight:600;font-size:11px;line-height:16px;color:var(--ink);white-space:nowrap}
.cv-panel.nd-cctv .w2-mini-price{order:2}
.cv-panel.nd-cctv .w2-mini-price .w2-price{justify-content:center;gap:4px}
.cv-panel.nd-cctv .w2-mini-price .w2-price b{font-size:var(--fs-price-card);line-height:30px}
.cv-note{order:3;font-size:10px;line-height:14px;color:var(--ink-muted);white-space:nowrap}
.cv-note[hidden],.cv-note-l{display:none}
@media (max-width:899px){
  [dir=ltr] .w2-mini.nd-cctv .cv-cap .cv-row legend{position:static;width:auto;height:auto;clip:auto}
}
@media (max-width:899px) and (max-height:640px){
  .cv-panel.nd-cctv .cv-cap .cv-seg .oh-opt span{height:38px}
}
@media (min-width:900px){
  #need-cctv:checked~.vh,.vh.vh-solo:not(.vh-is-wifi){grid-template-columns:minmax(0,1fr) 330px 300px}
  #need-cctv:checked~.vh .cv-box,.vh.vh-solo:not(.vh-is-wifi) .cv-box{left:50%;right:auto;top:calc((var(--scr) + var(--th) + 58px) / 2);width:min(98%,calc((var(--scr) + var(--th) + 22px) * 1.338));height:auto;transform:translate(-50%,-50%)}       /* the square is as tall as the three rows beside it: the house stands whole in its middle, over the hint */
  .vh .vh-cam{width:32px;height:32px;margin:-16px 0 0 -16px}
  .vh .vh-cam::before{left:-6px;top:-6px;right:-6px;bottom:-6px}
  .vh-cam b{font-size:var(--fs-small)}.vh-cam[aria-pressed=true] b{font-size:var(--fs-ui)}
  .vh .vh-cam[aria-pressed=true]{width:36px;height:36px;margin:-18px 0 0 -18px;box-shadow:0 0 0 2px #fff,0 0 0 8px rgba(84,186,167,.35)}
  .cv-live,.cv-dn{top:12px}
  .cv-live{inset-inline-start:12px;padding:0 10px}
  .cv-dn{inset-inline-end:12px}
  .cv-dn label{width:auto;padding:0 10px}
  .cv-dn .ico{display:none}
  .cv-dn label span{position:static;width:auto;height:auto;overflow:visible;clip:auto}
  .cv-night-line{top:46px;inset-inline-end:12px;max-width:calc(100% - 24px);height:28px;padding:0 10px;white-space:nowrap}
  #cv-night:checked~.cv-scr .cv-night-line{line-height:28px}
  .cv-foot{display:flex;align-items:flex-end;gap:12px;padding:8px 14px;font-size:var(--fs-ui);line-height:20px}
  .cv-id{display:block;min-width:0;white-space:normal;overflow:visible}
  .cv-id b{font-size:var(--fs-ui);line-height:20px}
  .cv-nm{white-space:normal;overflow:visible}
  .cv-ts{display:flex;flex-direction:column;font-size:var(--fs-small);line-height:20px}
  .cv-ts [data-cv-date]{display:inline}
  /* «شاهد مثال التصوير»: a link on its own line under the small pictures */
  .cv-scr .cv-sample{top:calc(100% + 34px + var(--th) + 12px);inset-inline-start:0;inset-inline-end:auto;height:22px;line-height:22px}
  /* the package's column: its name, its short lines, the capsule, the resolution, the way on */
  .cv-name{margin:0}
  .cv-panel.nd-cctv .cv-spec{display:flex;flex-wrap:wrap;margin:0;font-size:var(--fs-small);line-height:22px;color:var(--ink-muted)}
  .cv-panel.nd-cctv .cv-spec[hidden]{display:none}
  .cv-panel.nd-cctv .cv-spec span+span::before{content:"|";margin-inline:6px}
  .cv-panel.nd-cctv .cv-cap{display:flex;flex-direction:column;align-items:stretch;gap:5px;padding:5px}
  .cv-panel.nd-cctv .cv-cap .cv-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-inline-start:8px}
  .w2-mini.nd-cctv .cv-cap .cv-row legend{float:right;padding:0;font-size:var(--fs-ui);line-height:22px}
  [dir=ltr] .w2-mini.nd-cctv .cv-cap .cv-row legend{float:left;padding:0;font-size:var(--fs-small);line-height:22px}
  .w2-mini.cv-panel.nd-cctv .cv-cap .cv-seg{margin-top:0}
  .cv-panel.nd-cctv .cv-cap .oh-opt{padding:0 2.5px}
  .cv-panel.nd-cctv .cv-cap .cv-seg .oh-opt span{width:42px;height:44px}
  [dir=ltr] .cv-panel.nd-cctv .cv-cap .cv-seg .oh-opt span{width:36px}
  .cv-panel.nd-cctv .cv-cost{flex-direction:row;align-items:center;justify-content:space-between;gap:10px;width:auto;height:76px;padding:0 14px;text-align:start}
  .cv-of{display:block;min-width:0;font-size:var(--fs-small);line-height:20px;color:var(--ink-muted)}
  .cv-of b{display:block;font-size:var(--fs-small);line-height:20px;white-space:normal}
  .cv-note{font-size:var(--fs-small);line-height:20px;white-space:normal}
  .cv-note-s{display:none}.cv-note-l{display:inline}
  .cv-panel.nd-cctv .w2-mini-price{flex:none}
  .cv-panel.nd-cctv .w2-mini-price .w2-price{gap:8px}
  .cv-panel.nd-cctv .w2-mini-price .w2-price b,[dir=ltr] .cv-panel.nd-cctv .w2-mini-price .w2-price b{font-size:var(--fs-price-hero);line-height:76px}
}
@media (min-width:900px) and (max-height:760px){
  .cv-panel.nd-cctv .cv-spec{display:none}
  .cv-panel.nd-cctv .cv-cost{height:60px}
  .cv-panel.nd-cctv .w2-mini-price .w2-price b,[dir=ltr] .cv-panel.nd-cctv .w2-mini-price .w2-price b{font-size:var(--fs-price-hero);line-height:60px}
  .cv-note{display:none}
}
@media (min-width:900px) and (max-height:719px){
  .cv-panel.nd-cctv .cv-cap .cv-seg .oh-opt span{height:38px}
}
/* ── 1.46.0: the Wi-Fi as a heat map (the designer's wifi-view-v2, approved by the owner). The plan of the floor is the wide
   square — navy walls, the rooms by name, and under them a floor of red (weak) with a yellow circle (fair) and a green one
   (strong) around every lit distributor; the villa is the narrow square beside it. A distributor is the Wi-Fi's sign in a
   white circle, on the plan and on the villa. Under them the count, the key of the three colours, the two floors, and the
   capsule. The red here says «weak» — the owner's exception to the rule that keeps red for offers. ── */
#need-wifi:checked~.vh,.vh.vh-is-wifi{grid-template-columns:110px minmax(0,1fr);grid-template-rows:var(--scr) 30px 20px calc(var(--th) + 8px) auto;grid-template-areas:"villa scr" "txt txt" "key key" "ths ths" "buy buy"}
.wf-ap{width:22px;height:22px;margin:-11px;place-items:center;border-radius:50%;background:rgba(255,255,255,.82);box-shadow:0 0 0 1px rgba(255,255,255,.9);color:#1F2A4B}
.wf-ap.on{display:grid}
.wf-ap .ico,.wp-ap .ico{width:62%;height:62%;stroke-width:2.6}
.wf-plan{grid-area:scr;display:flex;justify-content:center;align-items:center;min-width:0;height:var(--scr);border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1px #DDE1E6;overflow:hidden}
.wp-box{display:none;position:relative;flex:none;height:calc(100% - 12px);aspect-ratio:208/182}
#vp-f0:checked~.wf-plan .wf-f0,#vp-f1:checked~.wf-plan .wf-f1{display:block}
.wp{position:absolute;left:0;top:0;width:100%;height:100%}
.wp-weak{fill:#E0605F;opacity:.5}
.wp-over{mix-blend-mode:multiply;opacity:.8}          /* 1.62.0: the heat is a soft layer multiplied into the thin plan: the walls and the furniture stay read */
.wp-heat circle{display:none}.wp-heat circle.on{display:inline}
.wp-rl{position:absolute;width:min-content;transform:translate(-50%,-50%);text-align:center;font-weight:600;font-size:10px;line-height:1.1;color:#1F2A4B}
.wp-ap{position:absolute;display:none;place-items:center;width:16px;height:16px;margin:-8px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px #1F2A4B,0 2px 6px rgba(18,40,76,.35);color:#1F2A4B}
.wp-ap.on{display:grid}
.wf-count{font-size:var(--fs-small)}
.cv-panel.nd-wifi .wf-lbl{width:auto;white-space:nowrap}
.wf-key{grid-area:key;display:flex;justify-content:space-between;align-items:center;gap:6px;min-width:0;margin:0 2px;font-size:11px;line-height:16px;color:var(--ink-muted);white-space:nowrap}
.wf-lg{display:inline-flex;flex:none;gap:8px}.wf-lg span{display:inline-flex;align-items:center;gap:4px}
.wf-lg i{display:block;width:9px;height:9px;border-radius:50%}
.lg-ok i{background:#7CC576}.lg-mid i{background:#F3D250}.lg-weak i{background:#E0605F}
.vh .cv-panel.nd-wifi .cv-cap{min-height:56px}       /* the key's line is taken from the capsule: the three slices stay as tall as one another */
@media (min-width:900px){
  #need-wifi:checked~.vh,.vh.vh-is-wifi{grid-template-columns:250px minmax(0,1fr) 300px;grid-template-rows:var(--th) calc(var(--scr) + 38px) 34px;grid-template-areas:"villa ths buy" "villa scr buy" "villa txt buy"}
  .wf-ap{width:30px;height:30px;margin:-15px}
  #need-wifi:checked~.vh .cv-box,#need-build:checked~.vh .cv-box,.vh.vh-is-wifi .cv-box{left:-6.5%;right:-6.5%;top:calc((var(--scr) + var(--th) + 72px) / 2);transform:translateY(-50%)}       /* the villa whole, in the middle of its tall square */
  .wf-plan{height:auto;margin-top:8px;border-radius:var(--radius-md)}
  .wp-box{height:calc(100% - 24px)}
  .wp-rl{width:auto;font-size:var(--fs-ui);line-height:1.2;white-space:nowrap}
  .wp-ap{width:28px;height:28px;margin:-14px}
  .wf-count{font-size:var(--fs-ui)}
  .wf-key{grid-area:txt;justify-self:end;align-self:end;gap:8px;margin:0;height:26px}
  .wf-lg{gap:6px}       /* on the count's own line, at its end */
  .vh .cv-panel.nd-wifi .cv-cap{min-height:0}
}
@media (max-width:899px) and (max-height:620px){       /* a plan too short to carry a name in every room at a size that reads: the walls, the heat and the distributors stay, the names go (the plan's own label still says which floor it is) */
  .wp-rl{display:none}
  .wp-ap{width:14px;height:14px;margin:-7px;box-shadow:0 0 0 1.5px #1F2A4B,0 1px 4px rgba(18,40,76,.35)}
}
@media (min-width:900px) and (max-height:719px){
  .wp-rl{font-size:12px}
  .wp-ap{width:20px;height:20px;margin:-10px}
}
/* ── 1.48.0: the row «للأفراد / للشركات» has left the top of the home page (it is the first item of the side menu). The 54px
   it took go to the villa and the window beside it, so the hero still ends where it did: the heading of the next section whole
   above the bar, and no more of that section than before. A service page never had the row: its heights stay. ── */
@media (max-width:899px){
  @supports (height:1svh){.w2-hero:not(.w2-solo) .vh{--scr:clamp(88px,calc(100svh - 494px),204px)}}
}
@media (max-width:899px) and (max-height:640px){
  @supports (height:1svh){.w2-hero:not(.w2-solo) .vh{--scr:clamp(80px,calc(100svh - 466px),204px)}}
}
@media (min-width:900px){
  @supports (height:1svh){.w2-hero:not(.w2-solo) .vh{--scr:clamp(130px,calc(100vh - 504px),268px)}}
}
@media (min-width:900px) and (max-height:719px){
  @supports (height:1svh){.w2-hero:not(.w2-solo) .vh{--scr:clamp(110px,calc(100vh - 452px),268px)}}
}
.wp-box{height:auto;width:min(calc(100% - 12px),calc((var(--scr) - 12px) * 208 / 182))}       /* the plan never wider than its square, however tall the row grows */
@media (min-width:900px){.wp-box{height:auto;width:min(calc(100% - 24px),calc((var(--scr) + 6px) * 208 / 182))}}
/* ── 1.50.0: the owner's choice for the cameras' hero, «الحل ب» (the designer's camera-view-v3-mobile-b and -v3-desktop). On a
   phone the villa and the window stand side by side; the window is the whole 16:9 frame, never cut; under it the camera's
   code and place and a switch of day and night with its words; on the picture only «مباشر» and the hour. The sentence
   stands on a line under the two, and by night the line of 8MP takes its place. The marks on the villa are 20px (a press
   still answers 40px). Four small pictures fill their row; six and eight are dragged sideways, the edge of the fifth showing.
   The titles are in standard Arabic and a little lighter. The capsule and the bar at the foot are as they were. ── */
.cv-under,.cv-night-say{display:none}
.w2-hero .w2-head h1{font-size:var(--fs-h1);font-weight:600}
@media (max-width:899px){
  .vh{--pw:clamp(128px,calc((var(--scr) - 74px) * 16 / 9),52%)}
  #need-cctv:checked~.vh,.vh.vh-solo:not(.vh-is-wifi){grid-template-columns:minmax(0,1fr) var(--pw)}
  .cv-scr{display:flex;flex-direction:column;justify-content:space-between;gap:2px}
  .cv-scr .cv-pic{position:relative;inset:auto;flex:none;aspect-ratio:16/9;border-radius:12px}
  .cv-pic .cv-img{object-position:50% 50%}                                 /* the whole frame: nothing of it is cut */
  .cv-foot{left:6px;right:auto;bottom:6px;display:block;padding:0;background:none}
  .cv-foot .cv-id{display:none}
  .cv-ts{padding:1px 6px;border-radius:6px;background:rgba(14,20,40,.78);font-size:10px;line-height:16px}
  .cv-scr .cv-sample,.cv-scr .cv-night-line,#cv-night:checked~.cv-scr .cv-night-line{display:none}
  .cv-under{display:block;margin:0;min-width:0;font-family:var(--font-heading);font-weight:700;font-size:var(--fs-small);line-height:22px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cv-under b{font:700 12px/22px Montserrat,system-ui,sans-serif;color:var(--mint-ink)}
  .cv-scr .cv-dn{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;height:36px;box-sizing:border-box;padding:3px;border-radius:12px;background:var(--surface)}
  .cv-scr .cv-dn label{display:flex;align-items:center;justify-content:center;gap:4px;width:auto;height:100%;padding:0;border-radius:9px;background:none;color:var(--ink-muted);font-size:12px;line-height:1}
  .cv-scr .cv-dn label span{position:static;width:auto;height:auto;overflow:visible;clip:auto}
  .cv-scr .cv-dn .ico{width:14px;height:14px}
  #cv-day:checked~.cv-scr [for=cv-day],#cv-night:checked~.cv-scr [for=cv-night]{background:var(--navy);color:#fff}
  #cv-night:checked~.cv-txt .cv-say{display:none}
  #cv-night:checked~.cv-txt .cv-night-say{display:block;margin:0;font-size:var(--fs-ui);line-height:22px;font-weight:600;color:var(--mint-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .vh .vh-cam,.vh .vh-cam[aria-pressed=true]{width:20px;height:20px;margin:-10px 0 0 -10px}
  .vh .vh-cam::before{left:-10px;top:-10px;right:-10px;bottom:-10px}
  .vh-cam b,.vh-cam[aria-pressed=true] b{font-size:11px}
  .vh .vh-cam[aria-pressed=true]{box-shadow:0 0 0 2px #fff,0 0 0 5px rgba(84,186,167,.35)}
  .cv-th[data-cv-thumbs="6"],.cv-th[data-cv-thumbs="8"]{grid-auto-columns:calc((100% - 28px) / 4.4)}
}
@media (max-width:899px) and (max-height:640px){
  .cv-under{font-size:12px;line-height:20px}
  .cv-scr .cv-dn{height:34px}
}
@media (min-width:900px){
  .w2-hero .w2-head h1{font-size:var(--fs-h1);line-height:44px;font-weight:600}
  [dir=ltr] .w2-hero .w2-head h1{font-size:var(--fs-h1)}
  /* the window is the whole 16:9 frame here too (330 by 186): the three slices keep one height, a little lower than it was */
  @supports (height:1svh){.w2-hero:not(.w2-solo) .vh{--scr:clamp(130px,calc(100vh - 504px),186px)}}
  .cv-pic .cv-img{object-position:50% 50%}
}
@media (min-width:900px) and (max-height:719px){
  @supports (height:1svh){.w2-hero:not(.w2-solo) .vh{--scr:clamp(110px,calc(100vh - 452px),186px)}}
}
/* ── 1.51.0: on a phone the row of the villa and the window is never taller than what the window's column holds (the frame
   at 52% of the card, its name, the switch): a tall phone showed a gap there. And the way to the filmed sample is back in the
   window: a small eye in the corner «مباشر» does not stand in, the hour under it. ── */
@media (max-width:899px){
  .vh{--pw:clamp(128px,calc((var(--scr) - 66px) * 16 / 9),52%)}
  @supports (height:1svh){.w2-hero:not(.w2-solo) .vh{--scr:clamp(88px,calc(100svh - 494px),calc((100vw - 52px) * .2925 + 66px))}}
  .cv-scr{gap:4px}
  .cv-scr .cv-sample{display:grid;top:6px;inset-inline-start:auto;inset-inline-end:6px;width:26px;height:26px;border-radius:8px}
  .cv-scr .cv-sample::after{content:"";position:absolute;inset:-8px}       /* a press of 42px */
  .cv-scr .cv-sample .ico{width:16px;height:16px}
}
@media (max-width:899px) and (max-height:640px){
  @supports (height:1svh){.w2-hero:not(.w2-solo) .vh{--scr:clamp(80px,calc(100svh - 466px),calc((100vw - 52px) * .2925 + 66px))}}
}
/* ── 1.51.0 (more): on a phone the villa is never wider than its square, so every mark stands whole inside it (mark 4 was cut
   at the edge); the window takes 48% of the card. And the owner's word on the capsule: the box of the price is navy, its words
   light, the number white in the dotted bold — in the three slices. ── */
@media (max-width:899px){
  .vh{--pw:clamp(128px,calc((var(--scr) - 66px) * 16 / 9),48%)}
  @supports (height:1svh){.w2-hero:not(.w2-solo) .vh{--scr:clamp(88px,calc(100svh - 494px),calc((100vw - 52px) * .27 + 66px))}}
  #need-cctv:checked~.vh .cv-box,.vh.vh-solo:not(.vh-is-wifi) .cv-box{width:min(100%,calc((var(--scr) - 2px) * 1.338));height:auto}
}
@media (max-width:899px) and (max-height:640px){
  @supports (height:1svh){.w2-hero:not(.w2-solo) .vh{--scr:clamp(80px,calc(100svh - 466px),calc((100vw - 52px) * .27 + 66px))}}
}
.vh .cv-cost,.vh .cv-panel.nd-cctv .cv-cost{background:var(--navy)}
.vh .cv-cost .cv-of b{color:#fff}
.vh .cv-cost .cv-note{color:#C9D0DE}
.vh .cv-cost .w2-mini-price .w2-price b{color:#fff}
.vh .cv-cost .w2-mini-price .w2-price .cur{color:var(--mint)}
@media (prefers-reduced-motion:reduce){.vh .vh-scan{display:none}.cv-pic::after{display:none}}

/* ── 1.55.0: «بيتي تحت الإنشاء» shows the villa before its finishing (the same frame, so the systems' marks stay where they are) ── */
#need-build:checked~.vh .vh-day{display:none}

/* ── 1.58.0 (the designer's camera-view-v8-desktop): on a wide screen the camera's window is the largest thing of the card,
   the villa is the map beside it with the small pictures under it, two by two, and the package keeps its column. The rows
   are the same four tracks, so the three slices stay one height. A phone keeps the arrangement it had. ── */
@media (min-width:900px){
  #need-cctv:checked~.vh{grid-template-columns:minmax(0,1fr) 270px 300px;grid-template-areas:"scr villa buy" "scr ths buy" "scr ths buy" "txt ths buy"}
  #need-cctv:checked~.vh .cv-scr{height:auto;align-self:stretch}
  #need-cctv:checked~.vh .cv-pic{height:100%}
  #need-cctv:checked~.vh .cv-villa{height:var(--scr)}
  #need-cctv:checked~.vh .cv-box{top:50%;width:min(96%,calc((var(--scr) - 10px) * 1.338))}
  #need-cctv:checked~.vh .cv-hint{display:none}
  #need-cctv:checked~.vh .cv-ths{align-self:stretch;margin-top:8px}
  #need-cctv:checked~.vh .cv-th{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);height:100%;overflow:visible}
  #need-cctv:checked~.vh .cv-th:has(button:nth-child(5)){grid-template-columns:repeat(3,minmax(0,1fr))}
  #need-cctv:checked~.vh .cv-th:has(button:nth-child(7)){grid-template-columns:repeat(4,minmax(0,1fr))}
  #need-cctv:checked~.vh .cv-th button{height:auto;min-height:0}
  #need-cctv:checked~.vh .cv-txt{margin:4px 0 0;height:26px}
  #need-cctv:checked~.vh .cv-scr .cv-sample{top:calc(100% + 6px);inset-inline-start:auto;inset-inline-end:0}
}

/* ── 1.60.0: the hero on a phone, in the order of the owner's own reference (brand/reference/owner-hero-ref-cameras-2026-10-12
   and owner-hero-ref-wifi-build-2026-10-12): the three needs as one white card split in three, each its sign over its name;
   the title and its line; then, on the grey of the page with no card around it all — the cameras: the window as wide as the
   page with «مباشر», day and night, the villa as a small map in its corner, the camera's name and the sample film on it, the
   small pictures under it, and a white card for the package (how many, the resolution, the package's line, what the price
   includes, the price with WhatsApp and the order); the Wi-Fi: the plan in a card with its count, its key and the two floors,
   then the card of the distributors and the price; a house being built: its picture, then one card. A wide screen keeps the
   designer's v8. Every rule here is under #house, so it outranks the older ones of the same parts. ── */
.cv-line{display:contents}
.cv-wa{display:none}
@media (max-width:899px){
  #house .w2-needs{order:1;display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between;gap:0;padding:5px;margin:0;border-radius:18px;background:#fff;box-shadow:0 1px 2px rgba(31,42,75,.06)}
  #house .w2-head{order:2;margin-top:12px}
  #house .vh{order:3}
  #house .w2-need{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:58px;padding:6px 8px;border:0;border-radius:14px;background:transparent;box-shadow:none;color:var(--navy)}
  #house .w2-need-ico{display:block;width:24px;height:24px;background:none;border-radius:0}
  #house .w2-need-ico img{display:block;width:24px;height:24px;filter:none}
  #house .w2-need b{font-size:var(--fs-small);line-height:18px;font-weight:600;white-space:nowrap}
  #house .w2-need small,#house .w2-need .w2-tick{display:none}
  #house #need-cctv:checked~.w2-needs [for=need-cctv],#house #need-wifi:checked~.w2-needs [for=need-wifi],#house #need-build:checked~.w2-needs [for=need-build]{background:var(--navy);color:#fff;box-shadow:none}
  #house #need-cctv:checked~.w2-needs [for=need-cctv] img,#house #need-wifi:checked~.w2-needs [for=need-wifi] img,#house #need-build:checked~.w2-needs [for=need-build] img{filter:brightness(0) invert(1)}
  #house .w2-head p{display:block;margin:4px 0 0;font-size:var(--fs-small);line-height:20px;color:var(--ink-muted)}

  /* the stage: no card of its own any more — its parts stand on the page, one under the other */
  #house .vh,#house #need-cctv:checked~.vh,#house #need-wifi:checked~.vh,#house #need-build:checked~.vh,#house .vh.vh-is-wifi{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-rows:auto;gap:10px;padding:0;margin-top:10px;border:0;border-radius:0;background:none;box-shadow:none}
  #house #need-cctv:checked~.vh{grid-template-areas:"scr" "ths" "buy"}

  /* the cameras: the window, and what lies on it */
  #house .cv-scr{grid-area:scr;display:block;position:relative;min-width:0;height:auto}
  #house .cv-pic{width:100%;height:auto;aspect-ratio:16/9;border-radius:16px;overflow:hidden}
  #house .cv-live{top:10px;inset-inline-start:10px;inset-inline-end:auto}
  #house .cv-dn{position:absolute;top:40px;inset-inline-start:10px;inset-inline-end:auto;z-index:2;display:flex;width:max-content;height:auto;padding:3px;gap:0;border-radius:999px;background:rgba(14,20,40,.78)}
  #house .cv-dn label{display:flex;align-items:center;gap:5px;min-width:0;min-height:30px;padding:0 10px;border-radius:999px;background:none;color:#fff;font-size:var(--fs-small);font-weight:600;cursor:pointer}
  #house .cv-dn label span{display:inline}
  #house .cv-dn .ico{width:15px;height:15px}
  #house #cv-day:checked~.cv-scr [for=cv-day],#house #cv-night:checked~.cv-scr [for=cv-night]{background:#fff;color:var(--navy);box-shadow:none}
  #house .cv-foot{position:static;display:contents}
  #house .cv-id{position:absolute;z-index:2;bottom:10px;inset-inline-start:10px;display:inline-flex;align-items:center;gap:6px;max-width:calc(100% - 178px);box-sizing:border-box;min-height:30px;padding:0 10px;border-radius:999px;background:rgba(14,20,40,.78);color:#fff;font-size:var(--fs-small);font-weight:600;white-space:nowrap;overflow:hidden}
  #house .cv-id .cv-nm{min-width:0;overflow:hidden;text-overflow:ellipsis}
  #house .cv-id .cv-sep{display:none}
  #house .cv-under,#house .cv-hint,#house .cv-night-line{display:none}
  /* 1.61.0, the owner: the date and the clock, the red dot of the recording and «صورة توضيحية» are back on the window — in the
     two places nothing else stands in: the stamp under the small map, the word under day and night */
  #house .cv-ts{position:absolute;z-index:2;top:calc(48% + 18px);bottom:auto;inset-inline:auto;left:10px;right:auto;display:flex;flex-direction:row;gap:6px;padding:0 8px;border-radius:999px;background:rgba(14,20,40,.78);color:#fff;font-size:11px;line-height:22px;opacity:1}
  #house .cv-ts [data-cv-date]{display:inline}
  #house .cv-live i{width:8px;height:8px}
  #house #need-cctv:checked~.vh .cv-txt{grid-area:scr;align-self:start;justify-self:start;z-index:2;display:block;height:auto;margin:80px 10px 0}
  #house .cv-txt .cv-say{display:block;margin:0;overflow:visible}
  #house .cv-txt .cv-say>[data-cv-say],#house .cv-txt .cv-night-say{display:none}
  #house .cv-txt .cv-illus{display:inline-block;padding:0 8px;border-radius:999px;background:rgba(14,20,40,.78);color:#fff;font-size:11px;line-height:22px}
  #house .cv-txt .cv-illus[hidden]{display:none}
  #house .cv-txt .cv-illus::before{display:none}
  #house .cv-sample{position:absolute;top:auto;bottom:10px;inset-inline-start:auto;inset-inline-end:10px;z-index:2;display:inline-flex;align-items:center;gap:5px;width:auto;height:auto;min-height:30px;padding:0 10px;border-radius:999px;background:#fff;color:var(--navy);font-size:var(--fs-small);font-weight:600}
  #house .cv-sample span{display:inline;position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;clip-path:none;white-space:nowrap}
  #house .cv-sample .ico{width:15px;height:15px}
  /* the villa: a small white map in the window's corner, its marks still the way to each camera */
  #house #need-cctv:checked~.vh .cv-villa{grid-area:scr;align-self:start;justify-self:end;z-index:3;width:36%;height:auto;aspect-ratio:4/3;margin:10px;border-radius:12px;background:#fff;box-shadow:0 2px 8px rgba(14,20,40,.25);overflow:hidden}
  #house #need-cctv:checked~.vh .cv-box{position:absolute;inset:0;width:auto;height:auto;margin:0;transform:none}
  #house #need-cctv:checked~.vh .vh-cam{width:22px;height:22px;margin:-11px 0 0 -11px;font-size:var(--fs-small)}
  #house #need-cctv:checked~.vh .vh-cam b{font-size:var(--fs-small);line-height:1}
  #house #need-cctv:checked~.vh .vh-pack[data-villa-pack="6"] .vh-cam,#house #need-cctv:checked~.vh .vh-pack[data-villa-pack="8"] .vh-cam{width:19px;height:19px;margin:-9.5px 0 0 -9.5px}
  #house .cv-ths{grid-area:ths;min-width:0;margin:0}
  #house .cv-th{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;height:auto;overflow:visible}
  #house .cv-th button{height:auto;aspect-ratio:16/9;border-radius:10px}

  /* the package: a white card */
  #house .cv-panel{grid-area:buy;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 10px;align-items:end;padding:14px;border-radius:18px;background:#fff;box-shadow:0 1px 2px rgba(31,42,75,.06)}
  #house .cv-panel .cv-cap,#house .cv-panel .cv-cost{display:contents}
  #house .cv-panel.nd-cctv .cv-cap>.cv-row{grid-column:1/8;grid-row:1}
  #house .cv-panel .cv-res{display:block;grid-column:8/13;grid-row:1}
  #house .cv-panel .cv-row{min-width:0;margin:0;padding:0;border:0}
  #house .cv-panel .cv-row legend{float:none;width:100%;padding:0;margin:0 0 6px;font-size:var(--fs-small);line-height:18px;font-weight:600;color:var(--ink-muted)}
  #house .cv-panel .cv-seg{display:flex;gap:0;padding:4px;border-radius:12px;background:#E9EAEE}
  #house .cv-panel .cv-seg .oh-opt{flex:1 1 0;min-width:0}
  #house .cv-panel .cv-seg .oh-opt span{display:grid;place-items:center;width:auto;min-width:0;height:40px;padding:0;border:0;border-radius:9px;background:none;box-shadow:none;color:var(--ink-muted);font-size:var(--fs-item);font-weight:700}
  #house .cv-panel.nd-cctv .cv-cap .oh-opt input:checked+span{background:var(--navy);color:#fff}
  #house .cv-panel .cv-res .oh-opt input:checked+span{background:#fff;color:var(--navy);box-shadow:0 1px 3px rgba(31,42,75,.18)}
  #house .cv-line{grid-column:1/-1;grid-row:2;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font-size:var(--fs-small);line-height:20px;color:var(--ink-muted)}
  #house .cv-line .cv-name{display:inline;margin:0;font:inherit;color:inherit}
  #house .cv-line .cv-spec{display:contents}
  #house .cv-line .cv-spec span{display:inline}
  #house .cv-line .cv-spec span::before{content:"| ";color:var(--line-strong)}
  #house .cv-panel.nd-cctv .cv-of{grid-column:1/-1;grid-row:3;display:block;margin:0}
  #house .cv-panel.nd-cctv .cv-of b{display:none}
  #house .cv-panel.nd-cctv .cv-note{display:block;margin:0;font-size:var(--fs-small);line-height:20px;font-weight:600;color:var(--mint-ink)}
  #house .cv-panel.nd-cctv .cv-note-s{display:none}
  #house .cv-panel.nd-cctv .cv-note-l{display:inline}
  #house .cv-panel .w2-mini-price{order:0;grid-column:1/6;align-self:center;margin:12px 0 0;padding:0;background:none}
  #house .cv-panel .w2-price{display:inline-flex;align-items:baseline;gap:6px}
  #house .cv-panel .w2-price .num{font-family:var(--font-accent);font-weight:700;font-size:var(--fs-price-card);line-height:36px;letter-spacing:.02em;color:var(--navy)}
  #house .cv-panel .w2-price .cur{font-size:var(--fs-small);font-weight:700;color:var(--navy)}
  #house .cv-panel .cv-acts{grid-column:6/13;display:flex;gap:8px;margin:12px 0 0}
  #house .cv-wa{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--mint-soft);color:var(--navy)}
  #house .cv-wa .ico{width:24px;height:24px}
  #house .cv-panel .cv-acts .btn{flex:1 1 auto;min-width:0;min-height:48px;padding:0 10px;border-radius:14px;white-space:nowrap}
  #house .cv-panel .cv-acts .btn .ico{display:none}

  /* the Wi-Fi: the plan, its count beside the small villa, its key and the two floors in one white card; then the card of the distributors */
  #house #need-wifi:checked~.vh,#house .vh.vh-is-wifi{grid-template-columns:minmax(0,1fr) 64px;grid-template-areas:"plan plan" "cnt villa" "key villa" "tabs tabs" "buy buy";gap:0 10px}
  #house #need-wifi:checked~.vh::before,#house .vh.vh-is-wifi::before{content:"";display:block;position:static;inset:auto;z-index:0;grid-column:1/-1;grid-row:1/5;border-radius:18px;background:#fff;box-shadow:0 1px 2px rgba(31,42,75,.06)}
  #house #need-wifi:checked~.vh>*,#house #need-wifi:checked~.vh .vh-stage>*,#house .vh.vh-is-wifi .vh-stage>*,#house #need-build:checked~.vh .vh-stage>*{position:relative;z-index:1}
  #house .wf-plan{grid-area:plan;display:block;height:auto;margin:12px 12px 0;border-radius:12px;box-shadow:none;background:none;overflow:hidden}
  #house .wp-box{width:100%;height:auto;aspect-ratio:208/182}
  #house #need-wifi:checked~.vh .cv-villa,#house .vh.vh-is-wifi .cv-villa{grid-area:villa;align-self:center;justify-self:end;width:64px;height:48px;margin:10px 0 0;margin-inline-end:12px;border-radius:10px;background:var(--surface);overflow:hidden}
  #house #need-wifi:checked~.vh .cv-box,#house .vh.vh-is-wifi .cv-box{position:absolute;inset:0;width:auto;height:auto;margin:0;transform:none}
  #house #need-wifi:checked~.vh .wf-aps,#house .vh.vh-is-wifi .wf-aps{display:none}
  #house .wf-count{grid-area:cnt;margin:10px 0 0;margin-inline-start:12px;padding:0;font-size:var(--fs-ui);line-height:20px;font-weight:700;color:var(--navy);text-align:start;white-space:normal;overflow:visible}
  #house .wf-key{grid-area:key;display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;margin:2px 0 0;margin-inline-start:12px;padding:0;font-size:var(--fs-small);line-height:18px;color:var(--ink-muted)}
  #house .wf-tabs{grid-area:tabs;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin:10px 12px 12px;padding:4px;border-radius:12px;background:#E9EAEE}
  #house .wf-tabs label{display:grid;place-items:center;min-height:40px;padding:0;border:0;border-radius:9px;background:none;box-shadow:none;color:var(--ink-muted);font-size:var(--fs-ui);font-weight:600;cursor:pointer}
  #house #vp-f0:checked~.wf-tabs [for=vp-f0],#house #vp-f1:checked~.wf-tabs [for=vp-f1]{background:#fff;color:var(--navy);box-shadow:0 1px 3px rgba(31,42,75,.18)}
  #house .cv-panel.nd-wifi{margin-top:10px;align-items:center}
  #house .cv-panel.nd-wifi::before{content:"";grid-column:1/-1;grid-row:3;height:1px;margin:12px 0;background:var(--line)}
  #house .cv-panel.nd-wifi .cv-name{display:block;grid-column:1/8;grid-row:1;margin:0;font-size:var(--fs-item);line-height:22px;font-weight:700;color:var(--navy)}
  #house .cv-panel.nd-wifi .wf-sub{display:block;grid-column:1/8;grid-row:2;margin:0;font-size:var(--fs-small);line-height:20px;color:var(--ink-muted)}
  #house .cv-panel.nd-wifi .wf-step{grid-column:8/13;grid-row:1/3;display:flex;flex-direction:column;align-items:flex-end;gap:6px;padding:0;background:none}
  #house .cv-panel.nd-wifi .wf-lbl{font-size:var(--fs-small);line-height:18px;font-weight:600;color:var(--ink-muted)}
  #house .cv-panel.nd-wifi .wf-btns button{width:40px;height:40px;border-radius:10px;background:#E9EAEE}
  #house .cv-panel.nd-wifi .cv-badge{grid-column:1/8;grid-row:4;justify-self:start;display:inline-flex;align-items:center;min-height:30px;margin:0;padding:4px 12px;border-radius:15px;background:var(--mint-soft);color:var(--mint-ink);font-size:var(--fs-small);font-weight:600}
  #house .cv-panel.nd-wifi .cv-badge i{display:none}
  #house .cv-panel.nd-wifi .w2-mini-price{grid-column:8/13;grid-row:4;justify-self:end;margin:0}
  #house .cv-panel.nd-wifi .cv-acts{grid-column:1/-1;grid-row:5}
  #house .cv-panel.nd-wifi .hw-fine{display:block;grid-column:1/-1;grid-row:6;margin:10px 0 0;font-size:var(--fs-small);line-height:20px;color:var(--ink-muted);text-align:start}

  /* a house being built: its picture, then one white card — what the estimate is, the five systems, the area it opens on, and the way in */
  #house #need-build:checked~.vh{grid-template-areas:"villa" "info" "sys" "buy";gap:0}
  #house #need-build:checked~.vh::before{content:"";display:block;position:static;inset:auto;z-index:0;grid-column:1/-1;grid-row:2/5;margin-top:10px;border-radius:18px;background:#fff;box-shadow:0 1px 2px rgba(31,42,75,.06)}
  #house #need-build:checked~.vh .cv-villa{grid-area:villa;width:100%;height:auto;aspect-ratio:16/10;margin:0;border-radius:16px;background:#EDEEF0;overflow:hidden}
  #house #need-build:checked~.vh .cv-box{position:absolute;inset:auto;top:50%;left:50%;right:auto;width:auto;height:104%;aspect-ratio:1400/1046;margin:0;transform:translate(-50%,-50%)}
  #house .bd-info{grid-area:info;display:block;margin:10px 0 0;padding:16px 16px 0;border-radius:0;background:none;text-align:start}
  #house .bd-info h2{margin:0;font-size:var(--fs-h2);line-height:28px;color:var(--navy)}
  #house .bd-info p{margin:4px 0 0;font-size:var(--fs-small);line-height:20px;color:var(--ink-muted)}
  #house .bd-systems{grid-area:sys;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:12px 16px 0}
  #house .bd-s{display:inline-flex;align-items:center;min-height:34px;padding:0 14px;border:1px solid var(--line-strong);border-radius:999px;background:#fff;color:var(--navy);font-size:var(--fs-small);font-weight:600}
  #house .bd-s .ico{display:none}
  #house .cv-panel.bd-panel{padding:12px 16px 16px;background:none;box-shadow:none;border-radius:0}
  #house .cv-panel.bd-panel .cv-cap{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"lbl val" "hint val";align-items:center;gap:0 12px;padding:12px 14px;border-radius:14px;background:var(--surface)}
  #house .cv-panel.bd-panel .bd-lbl{grid-area:lbl;font-size:var(--fs-ui);line-height:20px;font-weight:600;color:var(--navy)}
  /* 1.64.1, the owner's own phone: the sentence stood on the picture, over the intercom's mark. It is the card's last line now
     (the line the cameras' card gives to what the price includes), and nothing lies on the house but its five marks */
  #house .bd-info{grid-area:buy;align-self:end;justify-self:stretch;z-index:2;margin:0 14px 14px;padding:0}
  #house #need-build:checked~.vh .vh-stage>.bd-info{z-index:3}          /* over the card it is written on */
  #house .bd-info p{display:block;padding:0;border-radius:0;background:none;color:var(--mint-ink);font-size:var(--fs-small);line-height:20px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #house .cv-panel.bd-panel .bd-hint{grid-area:hint;font-size:var(--fs-small);line-height:18px;color:var(--ink-muted)}
  #house .cv-panel.bd-panel .cv-cost{grid-area:val;display:block;padding:0;background:none}
  #house .cv-panel.bd-panel .w2-mini-price{margin:0}
  #house .cv-panel.bd-panel .w2-price .num{font-family:var(--font-heading);font-size:var(--fs-h1);line-height:32px;letter-spacing:0}
  #house .cv-panel.bd-panel .cv-acts{grid-column:1/-1}
}

/* 1.61.0: on a wide screen the hero's card is the designer's v8, every row of it a fixed height (the three slices are one
   height to the pixel): inside it the type keeps the phone's steps of the scale, which are the sizes it was drawn with. */
@media (min-width:900px){.vh{--fs-h1:24px;--fs-h2:20px;--fs-h3:16px;--fs-item:15px;--fs-body:15px;--fs-ui:14px;--fs-small:13px;--fs-num:16px;--fs-num-lg:18px;--fs-price-card:34px;--fs-price-hero:44px}}

/* ── 1.63.0: the lighter hero on a phone (the second designer's S01, S02 and S03, approved by the owner): the three needs in
   one row, each its sign beside its name; the title alone; the cameras' card is the number and the resolution, then the
   price with what it includes and the one button «اطلب الباقة» — no WhatsApp in it, no line of parts; the Wi-Fi's plan
   stands on the page with the two floors as a small switch on it, and one card holds the count, the − and +, the key, the
   price and the button; a house being built is its picture with one sentence on it and a card of the systems and the area.
   What the owner set himself stays over the model: «اطلب», the stamp, «صورة توضيحية» and «مباشر» on the window, the window
   whole at 16:9. ── */
@media (max-width:899px){
  #house .w2-needs{padding:4px}
  #house .w2-need{flex-direction:row;gap:6px;min-height:44px;padding:0 10px}
  #house .w2-need-ico,#house .w2-need-ico img{width:18px;height:18px}
  #house .w2-head p{display:none}
  /* the cameras' card */
  #house .cv-line{grid-row:2;display:block;margin-top:12px;padding-top:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}          /* 1.63.1: the package's own line stays, one line, cut with dots where it is longer */
  #house .cv-line .cv-spec span::before{content:" | "}
  #house .cv-wa{display:none}
  #house .cv-panel.nd-cctv .cv-note{white-space:normal}
  #house .cv-panel.nd-cctv .w2-mini-price{grid-column:1/8;grid-row:3;align-self:end;margin:10px 0 0}
  #house .cv-panel .w2-price .num{font-size:var(--fs-price-hero);line-height:var(--lh-price-hero)}
  #house .cv-panel.nd-cctv .cv-of{grid-column:1/8;grid-row:4;align-self:start}
  #house .cv-panel.nd-cctv .cv-acts{grid-column:8/13;grid-row:3/5;align-self:center;margin:10px 0 0}
  #house .cv-panel .cv-acts .btn{min-height:52px}
  /* the Wi-Fi: the plan on the page, the floors a small switch on it, and one card */
  #house #need-wifi:checked~.vh,#house .vh.vh-is-wifi{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"plan plan" "cnt step" "key step" "buy buy";gap:0}
  #house #need-wifi:checked~.vh::before,#house .vh.vh-is-wifi::before{grid-row:2/5;margin-top:10px}
  #house .wf-plan{margin:0;border-radius:16px}
  #house #need-wifi:checked~.vh .cv-villa,#house .vh.vh-is-wifi .cv-villa{display:none}
  #house .wf-tabs{grid-area:plan;align-self:start;justify-self:end;display:flex;width:auto;margin:10px;padding:3px;border-radius:999px;background:#fff;box-shadow:0 2px 8px rgba(14,20,40,.18)}
  #house .wf-tabs label{min-height:32px;padding:0 12px;border-radius:999px;font-size:var(--fs-small)}
  #house #vp-f0:checked~.wf-tabs [for=vp-f0],#house #vp-f1:checked~.wf-tabs [for=vp-f1]{background:var(--navy);color:#fff;box-shadow:none}
  #house .wf-count{grid-area:cnt;margin:24px 0 0;margin-inline:14px 150px;font-size:var(--fs-item);line-height:24px}
  #house .wf-key{grid-area:key;margin:4px 0 0;margin-inline:14px 150px}
  #house .cv-panel.nd-wifi{grid-row:2/5;grid-column:1/-1;margin-top:10px;padding:14px;background:none;box-shadow:none;grid-template-rows:minmax(98px,auto)}
  #house .cv-panel.nd-wifi::before{display:none}
  #house .cv-panel.nd-wifi .cv-name,#house .cv-panel.nd-wifi .wf-sub,#house .cv-panel.nd-wifi .wf-lbl{display:none}
  #house .cv-panel.nd-wifi .wf-step{grid-column:8/13;grid-row:1;align-self:start;align-items:flex-end;margin-top:8px}
  #house .cv-panel.nd-wifi .w2-mini-price{grid-column:1/7;grid-row:2;justify-self:start;margin:6px 0 0}
  #house .cv-panel.nd-wifi .cv-badge{grid-column:1/7;grid-row:3;min-height:0;padding:0;background:none;font-size:var(--fs-small);line-height:20px}
  #house .cv-panel.nd-wifi .cv-acts{grid-column:7/13;grid-row:2/4;align-self:center;margin:6px 0 0}
  #house .cv-panel.nd-wifi .hw-fine{grid-row:4}
  #house .cv-panel,#house .bd-systems{position:relative;z-index:1}          /* over the white ground the card is drawn with */
  /* a house being built */
  #house #need-build:checked~.vh{grid-template-areas:"villa" "sys" "buy"}
  #house #need-build:checked~.vh::before{grid-row:2/4}
  #house #need-build:checked~.vh .cv-villa{aspect-ratio:2/1}
  #house .bd-info{grid-area:villa;align-self:end;justify-self:start;z-index:2;margin:10px;padding:0}
  #house .bd-info h2{display:none}
  #house .bd-info p{display:inline-block;margin:0;padding:4px 12px;border-radius:999px;background:rgba(14,20,40,.78);color:#fff;font-size:var(--fs-small);line-height:22px}
  #house .bd-systems{margin-top:10px;padding:14px 14px 0}
  #house .bd-s{flex-direction:row;gap:6px;border-color:var(--navy);background:var(--navy);color:#fff}
  #house .bd-s .ico{display:none}
  #house .bd-s::before{content:"";width:9px;height:5px;margin-top:-3px;border:solid #fff;border-width:0 0 1.6px 1.6px;transform:rotate(-45deg)}
}
/* 1.63.1: on a wide screen the hero's card is the fixed v8: its narrow switch of the resolution has no room for the 2K / 4K badge (the
   offers' cards and the phone carry it), and in English the line under the window leaves room for the sample's link beside it */
@media (min-width:900px){[dir=ltr] #need-cctv:checked~.vh .cv-txt{padding-inline-end:124px}}

/* ── 1.64.0, the owner in his own words: «الصورة اللي ورا ما لها داعي، يصير البيت والصور اللي تحت فقط… من يصير ثمانية ما يصيرون
   صفين، يسحب لي يسار… ما أحب البطاقة كل ما يغيّر تكبر وتصغر… حتى لمن اغير بين كاميرات ووايفاي وتحت الانشاء… يطق على البيت أو
   يطق على الصورة اللي تحت تكبر صورة كامل وفي إكس». On a phone: the house with the cameras' numbers is the picture of the
   cameras' slice, and under it one row of the small pictures that is pulled sideways; the window is not on the page — a press
   opens it whole over the page, with an X (static/camview.js). And nothing moves when anything is chosen: the three slices
   are one height (--st-h for what stands above, --card-h for the card), their button in one place. ── */
.cv-x,.cv-step,.cv-zil{display:none}
@media (max-width:899px){
  #house{--st-h:250px;--th-h:46px;--card-h:224px}
  #house .w2-head h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #house .vh .vh-stage>.vp-r,#house #need-wifi:checked~.vh .vh-stage>.vp-r,#house #need-build:checked~.vh .vh-stage>.vp-r,#house .vh.vh-is-wifi .vh-stage>.vp-r{position:absolute}          /* the floors' radios take no row of the grid */
  /* the cameras: the house, then the one row */
  #house #need-cctv:checked~.vh{grid-template-areas:"villa" "ths" "buy";grid-template-rows:calc(var(--st-h) - var(--th-h) - 10px) var(--th-h) var(--card-h)}
  #house #need-cctv:checked~.vh .cv-villa{grid-area:villa;align-self:stretch;justify-self:stretch;z-index:auto;width:auto;height:auto;aspect-ratio:auto;margin:0;border-radius:16px;background:#fff;box-shadow:0 1px 2px rgba(31,42,75,.06);overflow:hidden}
  #house #need-cctv:checked~.vh .cv-box{position:absolute;inset:auto;top:50%;left:50%;right:auto;width:auto;height:112%;aspect-ratio:1400/1046;margin:0;transform:translate(-50%,-50%)}
  #house #need-cctv:checked~.vh .vh-cam,#house #need-cctv:checked~.vh .vh-pack[data-villa-pack="6"] .vh-cam,#house #need-cctv:checked~.vh .vh-pack[data-villa-pack="8"] .vh-cam{width:32px;height:32px;margin:-16px 0 0 -16px}
  #house #need-cctv:checked~.vh .vh-cam::after{content:"";position:absolute;inset:-6px;border-radius:50%}          /* the finger's 44px */
  #house #need-cctv:checked~.vh .vh-cam b{font-size:var(--fs-ui)}
  #house .cv-ths{grid-area:ths;min-width:0;margin:0}
  #house .cv-th{display:flex;gap:8px;height:var(--th-h);padding:2px;margin:-2px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:2px;overscroll-behavior-x:contain}
  #house .cv-th[hidden]{display:none}
  #house .cv-th button{flex:0 0 calc((100% - 24px) / 4);height:100%;aspect-ratio:auto;border-radius:10px;scroll-snap-align:start}
  #house .cv-th[data-cv-thumbs="6"] button,#house .cv-th[data-cv-thumbs="8"] button{flex-basis:calc((100% - 32px) / 4.4)}          /* the fifth is cut by the edge: there are more */
  /* 1.67.1, the owner on his own phone: «قصدي يطلع داخل البوكس… تطلع الصورة تغطي، تبين بالبوكس نفسه، تغطي على البيت، وفيها اكس».
     The window is the house's own box: the same place, the same height, so nothing under it moves. A press on a number or on a
     small picture brings the picture up from that number, over the house (transform and opacity; none of it with «reduce
     motion»); the X brings the house back. No layer over the page, no lock on its scroll, and the bar and the floating
     button stay. Every sign on the picture has a corner of its own — and every one of them is positioned by itself: a
     press-area that is not (1.64.0: the sample's link, stretched over the whole viewer) takes every press under it. */
  #house .cv-scr{grid-area:villa;display:block;position:relative;z-index:3;align-self:stretch;justify-self:stretch;min-width:0;height:auto;border-radius:16px;overflow:hidden;background:#0E1428;opacity:0;visibility:hidden;pointer-events:none;transform:scale(.55)}
  #house .cv-zoom .cv-scr{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity .24s var(--ease-in),transform .24s var(--ease-in)}          /* it comes up; the X puts the house back at once (a hidden box holds no button a key could reach) */
  #house #need-cctv:checked~.vh .cv-txt{display:none}
  #house .cv-scr .cv-pic{position:absolute;inset:0;width:auto;height:auto;aspect-ratio:auto;border-radius:0}
  #house .cv-scr .cv-x{display:grid;place-items:center;position:absolute;z-index:5;top:8px;inset-inline-end:8px;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:#fff;color:var(--navy);box-shadow:0 2px 8px rgba(14,20,40,.35);cursor:pointer}
  #house .cv-scr .cv-x .ico{width:20px;height:20px}
  #house .cv-scr .cv-zil{display:inline-block;position:absolute;z-index:2;top:10px;inset-inline-start:84px;padding:0 8px;border-radius:999px;background:rgba(14,20,40,.78);color:#fff;font-size:11px;line-height:22px}
  #house .cv-scr .cv-zil[hidden]{display:none}
  #house .cv-scr .cv-ts{top:56px;bottom:auto;left:8px;right:auto}
  #house .cv-scr .cv-step{display:grid;place-items:center;position:absolute;z-index:4;top:50%;width:36px;height:36px;margin-top:-10px;padding:0;border:0;border-radius:50%;background:rgba(14,20,40,.78);color:#fff;cursor:pointer}
  #house .cv-scr .cv-step .ico{width:18px;height:18px}
  #house .cv-scr .cv-prev{inset-inline-start:8px}
  #house .cv-scr .cv-next{inset-inline-end:8px}
  #house .cv-scr .cv-id{max-width:calc(100% - 190px)}
  #house .cv-scr .cv-sample{position:absolute}
  #house .cv-scr .cv-x:focus-visible,#house .cv-scr .cv-step:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
  .cv-o-0-0{transform-origin:17% 17%}.cv-o-1-0{transform-origin:50% 17%}.cv-o-2-0{transform-origin:83% 17%}.cv-o-0-1{transform-origin:17% 50%}.cv-o-1-1{transform-origin:50% 50%}.cv-o-2-1{transform-origin:83% 50%}.cv-o-0-2{transform-origin:17% 83%}.cv-o-1-2{transform-origin:50% 83%}.cv-o-2-2{transform-origin:83% 83%}
  @media (prefers-reduced-motion:reduce){#house .cv-scr,#house .cv-zoom .cv-scr{transform:none;transition:none!important}}
  /* the cameras' card: its rows are fixed, so no choice makes it taller or shorter */
  #house .cv-panel,#house .cv-panel.bd-panel{height:var(--card-h);box-sizing:border-box;margin-top:0;grid-template-rows:72px 42px 62px 20px;align-items:start;overflow:hidden}
  #house .cv-panel.nd-wifi{margin-top:10px}
  #house .cv-panel.nd-cctv .cv-cap>.cv-row,#house .cv-panel .cv-res{align-self:start}
  #house .cv-line{align-self:start}
  #house .cv-panel .cv-row legend,[dir=ltr] #house .cv-panel .cv-row legend{position:static;float:none;display:block;width:100%;max-width:none;height:auto;margin:0 0 6px;padding:0;overflow:visible;clip:auto;font-size:var(--fs-small);line-height:18px;white-space:nowrap}          /* the same two words over the two switches in both languages */
  [dir=ltr] #house .cv-panel.nd-cctv .cv-cap .cv-seg .oh-opt span{width:auto}
  [dir=ltr] #house .vh .cv-panel .cv-acts{grid-column:1/7}          /* English words on the button are longer */
  [dir=ltr] #house .vh .cv-panel .w2-mini-price{grid-column:7/13}
  [dir=ltr] #house .vh .cv-panel .cv-acts .btn{padding:0 6px;font-size:var(--fs-btn-sm)}
  /* the button first, the price after it: the floating button (WhatsApp, the assistant) stands in the page's end corner, and on a
     short phone that corner is the end of this row — the price leaves it room, the button is never under it */
  #house .cv-panel.nd-cctv .cv-acts{grid-column:1/6;grid-row:3;align-self:end;margin:0}
  #house .cv-panel.nd-cctv .w2-mini-price{grid-column:6/13;grid-row:3;align-self:end;justify-self:start;margin:0}
  #house .cv-panel.nd-cctv .cv-of{grid-column:1/-1;grid-row:4;align-self:end}
  #house .cv-panel.nd-cctv .cv-note{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #house .cv-panel .w2-price .num{line-height:48px}
  /* the Wi-Fi: the plan in the same room as the house, the card the same card */
  #house #need-wifi:checked~.vh,#house .vh.vh-is-wifi{grid-template-rows:var(--st-h) 48px 22px calc(var(--card-h) - 60px)}          /* the count's row, the key's row, and the rest of the card: 10px over it and its own height */
  #house .wf-plan{display:grid;place-items:center;height:var(--st-h);box-sizing:border-box;background:#fff;box-shadow:0 1px 2px rgba(31,42,75,.06)}
  #house .wp-box{width:auto;height:100%}
  #house .wf-count{margin-top:24px;margin-inline:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}          /* the whole width: the − and + stand a line lower, beside the key */
  #house .wf-key{flex-wrap:nowrap;white-space:nowrap;overflow:hidden}
  #house .cv-panel.nd-wifi{grid-template-rows:72px 42px 62px 20px}
  #house .cv-panel.nd-wifi .wf-step{grid-row:1;margin-top:30px}
  #house .cv-panel.nd-wifi .hw-fine{grid-column:1/-1;grid-row:2;align-self:start;margin:0;font-size:var(--fs-small);line-height:20px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  #house .cv-panel.nd-wifi .cv-acts{grid-column:1/6;grid-row:3;align-self:end;margin:0}
  #house .cv-panel.nd-wifi .w2-mini-price{grid-column:6/13;grid-row:3;align-self:end;justify-self:start;margin:0}
  #house .cv-panel.nd-wifi .cv-badge{grid-column:1/-1;grid-row:4;align-self:end;white-space:nowrap}
  /* a house being built: its picture, the systems in one row that is pulled sideways, and the same card */
  #house #need-build:checked~.vh{grid-template-areas:"villa" "sys" "buy";grid-template-rows:calc(var(--st-h) - var(--th-h) - 10px) var(--th-h) var(--card-h);gap:10px}
  #house #need-build:checked~.vh::before{grid-row:3/4;margin-top:0}
  #house #need-build:checked~.vh .cv-villa{aspect-ratio:auto;height:auto;align-self:stretch}
  #house .bd-systems{flex-wrap:nowrap;align-items:center;gap:8px;height:var(--th-h);margin:0;padding:0;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none}
  #house .bd-systems::-webkit-scrollbar{display:none}
  #house .bd-s{flex:none;min-height:40px;scroll-snap-align:start;white-space:nowrap}
  #house .cv-panel.bd-panel{padding:14px;grid-template-rows:114px 62px 20px;border-radius:18px;background:#fff;box-shadow:0 1px 2px rgba(31,42,75,.06)}
  #house #need-build:checked~.vh::before{display:none}
  #house .cv-panel.bd-panel::before{content:"";grid-column:1/-1;grid-row:1;align-self:center;height:64px;border-radius:14px;background:var(--surface)}
  #house .cv-panel.bd-panel .cv-cap{display:contents}
  #house .cv-panel.bd-panel .bd-lbl{grid-column:1/8;grid-row:1;align-self:center;z-index:1;padding-inline-start:14px;font-size:var(--fs-item);line-height:24px;white-space:nowrap}
  #house .cv-panel.bd-panel .cv-cost{grid-column:8/13;grid-row:1;align-self:center;justify-self:end;z-index:1;padding-inline-end:14px}
  /* 1.64.1, the owner's own phone: the sentence stood on the picture, over the intercom's mark. It is the card's last line now
     (the line the cameras' card gives to what the price includes), and nothing lies on the house but its five marks */
  #house .bd-info{grid-area:buy;align-self:end;justify-self:stretch;z-index:2;margin:0 14px 14px;padding:0}
  #house .bd-info p{display:block;padding:0;border-radius:0;background:none;color:var(--mint-ink);font-size:var(--fs-small);line-height:20px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #house .cv-panel.bd-panel .bd-hint{grid-column:6/13;grid-row:2;align-self:end;display:flex;align-items:center;min-height:52px;padding-inline-end:44px;font-size:var(--fs-small);line-height:20px;color:var(--ink-muted)}
  #house .cv-panel.bd-panel .cv-acts{grid-column:1/6;grid-row:2;align-self:end;margin:0}
}
/* the title is one line in the three slices (the longest, the Wi-Fi's, needs 365px at the scale's h1): under 400px it is set at the scale's h2 */
@media (max-width:399px){#house .w2-head h1{font-size:var(--fs-h2);line-height:var(--lh-h2)}}

/* ── 1.68.0: the picture in the house's box, on every width. What the owner approved on a phone (1.67.1) is the wide screen's
   way too: the house, large, where the window used to stand; a press on a number or on a small picture brings the picture up
   inside that same box, and the X brings the house back; the small pictures are one row. The signs on the picture each have
   a corner — «مباشر» and the X over it with «صورة توضيحية» between them, day and night and the stamp under them, the camera's name
   at its foot and the sample (a sign alone now, so the name is whole) — and each is positioned by itself. It leaves the way it
   came, in 220ms, while the script holds «cv-out» on it. ── */
#house .cv-scr{grid-area:villa;display:block;position:relative;z-index:3;align-self:stretch;justify-self:stretch;min-width:0;height:auto;gap:0;border-radius:16px;overflow:hidden;background:#0E1428;opacity:0;visibility:hidden;pointer-events:none;transform:scale(.55)}
#house .cv-zoom .cv-scr{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity .24s var(--ease-in),transform .24s var(--ease-in)}
#house .cv-zoom.cv-out .cv-scr{opacity:0;pointer-events:none;transform:scale(.55);transition:opacity .22s var(--ease-out),transform .22s var(--ease-out)}
#house .cv-scr .cv-pic{position:absolute;inset:0;width:auto;height:auto;flex:none;aspect-ratio:auto;border-radius:0}
#house .cv-scr .cv-live{top:10px;inset-inline-start:10px;inset-inline-end:auto;height:22px}
#house .cv-scr .cv-x{display:grid;place-items:center;position:absolute;z-index:5;top:8px;inset-inline-end:8px;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:#fff;color:var(--navy);box-shadow:0 2px 8px rgba(14,20,40,.35);cursor:pointer}
#house .cv-scr .cv-x .ico{width:20px;height:20px}
#house .cv-scr .cv-dn{position:absolute;z-index:2;top:40px;inset-inline-start:10px;inset-inline-end:auto;display:flex;grid-template-columns:none;width:max-content;height:auto;padding:3px;gap:0;border-radius:999px;background:rgba(14,20,40,.78)}
#house .cv-scr .cv-dn label{display:flex;align-items:center;gap:5px;width:auto;min-width:0;height:auto;min-height:30px;padding:0 10px;border-radius:999px;background:none;color:#fff;font-size:var(--fs-small);font-weight:600;line-height:1;cursor:pointer}
#house .cv-scr .cv-dn label span{display:inline;position:static;width:auto;height:auto;overflow:visible;clip:auto}
#house .cv-scr .cv-dn .ico{width:15px;height:15px}
#house #cv-day:checked~.cv-scr [for=cv-day],#house #cv-night:checked~.cv-scr [for=cv-night]{background:#fff;color:var(--navy);box-shadow:none}
#house .cv-scr .cv-foot{position:static;display:contents}
#house .cv-scr .cv-ts{position:absolute;z-index:2;top:56px;bottom:auto;left:8px;right:auto;display:flex;flex-direction:row;gap:6px;padding:0 8px;border-radius:999px;background:rgba(14,20,40,.78);color:#fff;font-size:11px;line-height:22px;opacity:1}
[dir=ltr] #house .cv-scr .cv-ts{left:auto;right:8px}
#house .cv-scr .cv-ts [data-cv-date]{display:inline}
#house .cv-scr .cv-id{position:absolute;z-index:2;bottom:10px;top:auto;inset-inline-start:10px;inset-inline-end:auto;display:inline-flex;align-items:center;gap:6px;max-width:calc(100% - 64px);box-sizing:border-box;min-height:30px;padding:0 10px;border-radius:999px;background:rgba(14,20,40,.78);color:#fff;font-size:var(--fs-small);font-weight:600;white-space:nowrap;overflow:hidden}
#house .cv-scr .cv-id .cv-nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#house .cv-scr .cv-id .cv-sep{display:none}
#house .cv-scr .cv-sample,#house #need-cctv:checked~.vh .cv-scr .cv-sample{position:absolute;z-index:3;top:auto;bottom:8px;inset-inline-start:auto;inset-inline-end:8px;display:grid;place-items:center;width:36px;height:36px;min-height:0;margin:0;padding:0;border-radius:50%;background:#fff;color:var(--navy)}
#house .cv-scr .cv-sample .ico{display:block;width:18px;height:18px}
#house .cv-scr .cv-sample span{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}          /* the words are its label (aria-label), the sign is what shows */
#house .cv-scr .cv-sample::before,#house .cv-scr .cv-sample::after{content:"";display:block;position:absolute;inset:-4px}
#house .cv-scr .cv-zil{display:inline-block;position:absolute;z-index:2;top:17px;bottom:auto;inset-inline-start:auto;inset-inline-end:56px;padding:0 8px;border-radius:999px;background:rgba(14,20,40,.78);color:#fff;font-size:11px;line-height:22px}
#house .cv-scr .cv-zil[hidden]{display:none}
#house .cv-scr .cv-step{display:grid;place-items:center;position:absolute;z-index:4;top:50%;width:36px;height:36px;margin-top:-10px;padding:0;border:0;border-radius:50%;background:rgba(14,20,40,.78);color:#fff;cursor:pointer}
#house .cv-scr .cv-step .ico{width:18px;height:18px}
#house .cv-scr .cv-prev{inset-inline-start:8px}
#house .cv-scr .cv-next{inset-inline-end:8px}
#house .cv-scr .cv-under,#house .cv-scr .cv-night-line,#house #cv-night:checked~.cv-scr .cv-night-line{display:none}          /* the night's sentence is said beside the picture, not over its stamp */
#house .cv-scr .cv-x:focus-visible,#house .cv-scr .cv-step:focus-visible,#house .cv-scr .cv-sample:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
@media (prefers-reduced-motion:reduce){#house .cv-scr,#house .cv-zoom .cv-scr,#house .cv-zoom.cv-out .cv-scr{transform:none;transition:none!important}}
@media (min-width:900px){
  /* the wide card: the house where the window stood (two rows of the card's four), what the camera sees beside it, and the
     small pictures in one row under both; the card's own height, its columns and its package are as they were */
  #house #need-cctv:checked~.vh{grid-template-areas:"villa side buy" "villa side buy" "ths ths buy" "ths ths buy"}
  #house #need-cctv:checked~.vh .cv-villa{grid-area:villa;position:relative;align-self:stretch;justify-self:stretch;width:auto;height:auto;margin:0;border-radius:16px;background:var(--surface);overflow:hidden}
  #house #need-cctv:checked~.vh .cv-box{position:absolute;inset:auto;top:50%;left:50%;right:auto;width:auto;height:112%;aspect-ratio:1400/1046;margin:0;transform:translate(-50%,-50%)}
  #house #need-cctv:checked~.vh .vh-cam,#house #need-cctv:checked~.vh .vh-cam[aria-pressed=true]{width:30px;height:30px;margin:-15px 0 0 -15px}
  #house #need-cctv:checked~.vh .vh-cam b{font-size:var(--fs-ui)}
  #house #need-cctv:checked~.vh .cv-txt{grid-area:side;align-self:center;display:block;height:auto;margin:0;padding-inline:16px;white-space:normal}
  [dir=ltr] #house #need-cctv:checked~.vh .cv-txt{padding-inline-end:16px}
  #house #need-cctv:checked~.vh .cv-txt .cv-say{display:block;margin:0;white-space:normal;overflow:visible;font-size:var(--fs-item);line-height:var(--lh-item);color:var(--ink)}
  #house #need-cctv:checked~.vh .cv-txt .cv-illus{display:none}
  #house #need-cctv:checked~.vh #cv-night:checked~.cv-txt .cv-night-say{display:block;margin:8px 0 0;font-size:var(--fs-ui);line-height:22px;font-weight:600;color:var(--mint-ink);white-space:normal}
  #house #need-cctv:checked~.vh .cv-ths{grid-area:ths;align-self:stretch;min-width:0;margin:8px 0 0}
  #house #need-cctv:checked~.vh .cv-th{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:calc((100% - 24px) / 4);gap:8px;height:100%;overflow-x:auto;scroll-snap-type:x mandatory}
  #house #need-cctv:checked~.vh .cv-th[hidden]{display:none}
  #house #need-cctv:checked~.vh .cv-th[data-cv-thumbs="6"],#house #need-cctv:checked~.vh .cv-th[data-cv-thumbs="8"]{grid-auto-columns:calc((100% - 32px) / 4.4)}
  #house #need-cctv:checked~.vh .cv-th button{height:100%;scroll-snap-align:start}
}