/* HOMESTAT — site.css · Design Language v1.0 (mono × signal orange), release build.
   Dot-grid paper, rounded ink panels, white cards, headings in the dot letters of the logo,
   serif leads, mono everything else. Motion lives in site.js and degrades to static. */
:root{
  --paper:#F4F4F4; --card:#FFFFFF; --ink:#0A0A0A; --soft:#5F5F5F; --line:#E2E2E2; --line-ink:#2C2C2C;
  --herosub:#9A9A9A; --herostory:#D6D6D6;
  --acc:#E8490F; --acc-ink:#FF5705;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --arabic:"IBM Plex Sans Arabic","Noto Sans Arabic",system-ui,sans-serif;
  --measure:66ch; --wrap:1200px; --gutter:20px; --r:18px; --rp:26px; --t:160ms ease;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{overflow-x:clip}
body{margin:0;background:var(--paper);background-image:radial-gradient(rgba(10,10,10,.07) 1px,transparent 1px);background-size:26px 26px;color:var(--ink);font-family:var(--mono);font-size:15px;line-height:1.7;-webkit-font-smoothing:antialiased;font-feature-settings:"liga" 0;text-rendering:optimizeLegibility}
[dir="rtl"] body{font-family:var(--arabic);font-size:16.5px;line-height:1.85}
img,svg{max-width:100%;height:auto}
a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line);transition:color var(--t),border-color var(--t)}
a:hover{color:var(--acc);border-color:var(--acc)}
.on-ink a{border-color:var(--line-ink)} .on-ink a:hover{color:var(--acc-ink);border-color:var(--acc-ink)}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:4px}
h1,h2,h3,h4{margin:0 0 14px;line-height:1.2;font-weight:400}
h1,h2{font-family:var(--serif)}
h1{font-size:clamp(32px,4vw,52px)} h2{font-size:clamp(28px,3.2vw,40px);line-height:1.15}
h3{font-family:var(--serif);font-size:clamp(21px,2vw,25px);line-height:1.2}
h4{font-family:var(--mono);font-weight:600;font-size:14px}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3{font-family:var(--arabic);font-weight:700}
[dir="rtl"] h1{font-size:clamp(30px,3.6vw,44px)} [dir="rtl"] h2{font-size:clamp(25px,2.8vw,34px)} [dir="rtl"] h3{font-size:clamp(19px,1.9vw,22px)}
p{margin:0 0 16px;max-width:var(--measure)}
ul,ol{max-width:var(--measure);padding-inline-start:1.3em;margin:0 0 16px}
li{margin-bottom:6px}
strong,b{font-weight:600}
.small{font-size:12.5px;line-height:1.6}
.mute{color:var(--soft)} .on-ink .mute{color:var(--herosub)}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.2px;color:var(--soft);display:block;margin-bottom:14px}
.on-ink .eyebrow{color:var(--herosub)}
[dir="rtl"] .eyebrow{font-family:var(--arabic);letter-spacing:0;text-transform:none;font-size:13px}
.lead{font-family:var(--serif);font-size:clamp(21px,2.3vw,29px);line-height:1.35;max-width:40ch;margin:0 0 18px;color:#2A2A2A}
.on-ink .lead{color:var(--herostory)}
[dir="rtl"] .lead{font-family:var(--arabic);font-size:clamp(18px,2vw,23px);line-height:1.7;font-weight:400}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;top:-120px;inset-inline-start:8px;background:var(--ink);color:var(--paper);padding:8px 12px;z-index:100;border-radius:4px}
.skip:focus{top:8px}
.tofill{display:inline-block;font-family:var(--mono);font-size:.78em;letter-spacing:.5px;color:var(--acc);border:1px dashed var(--acc);border-radius:6px;padding:0 6px;line-height:1.6;white-space:nowrap}
.on-ink .tofill{color:var(--acc-ink);border-color:var(--acc-ink)}

/* ---------- headings in the dot letters of the logo ---------- */
.dh{margin:0 0 18px;color:var(--ink);--cw:clamp(15px,1.85vw,24px);line-height:0}
.dh svg{display:block;width:calc(var(--c) * var(--cw));max-width:100%;height:auto;overflow:visible}
.dh .a{stroke:var(--acc)}
.on-ink .dh{color:var(--paper)} .on-ink .dh .a{stroke:var(--acc-ink)}
.dh.xl{--cw:clamp(20px,3vw,40px);margin-bottom:22px}
[dir="rtl"] .dh svg{margin-inline-start:0}
.arh{font-family:var(--arabic);font-weight:700;font-size:clamp(26px,3vw,38px);line-height:1.3;margin:0 0 14px}
.arh::after{content:"";display:inline-block;width:.34em;height:.34em;border-radius:50%;background:var(--acc);margin-inline-start:.18em;vertical-align:baseline}
.on-ink .arh::after{background:var(--acc-ink);box-shadow:0 0 10px var(--acc-ink)}

/* ---------- layout ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter)}
section{padding-block:clamp(26px,4.2vw,56px)}
section.tight{padding-block:14px}
section.on-ink > .wrap,.panel{background:var(--ink);color:var(--paper);border-radius:var(--rp);padding:clamp(32px,5.4vw,72px) clamp(22px,5vw,64px);position:relative;overflow:hidden;max-width:calc(var(--wrap) - 2*var(--gutter))}
@media(max-width:600px){section.on-ink > .wrap{border-radius:20px}}
.shead{display:grid;gap:2px 40px;margin-bottom:clamp(22px,3vw,34px)}
@media(min-width:960px){.shead{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:end}.shead .lead{margin:0 0 4px}}
.shead .dh{margin-bottom:12px}
.shead .more{grid-column:1/-1;justify-self:start;font-size:13px;border:0;display:inline-flex;align-items:center;min-height:40px;font-weight:600}
.shead .more::after,.more::after{content:"→";margin-inline-start:8px;color:var(--acc)}
[dir="rtl"] .shead .more::after,[dir="rtl"] .more::after{content:"←"}
[dir="rtl"] .shead .more{letter-spacing:0;text-transform:none;font-size:14px}

/* ---------- nav ---------- */
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:20px}
.nav .brand{border:0;display:inline-flex;align-items:center;min-height:44px}
.nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 20px;max-width:none;align-items:center}
.nav li{margin:0}
.nav a.link{font-size:13px;color:#3A3A3A;border:0;display:inline-flex;align-items:center;min-height:44px}
.nav a.link:hover,.nav a.link[aria-current="page"]{color:var(--acc)}
[dir="rtl"] .nav a.link{letter-spacing:0;text-transform:none;font-size:14.5px}
.nav a.cta{display:inline-flex;align-items:center;min-height:40px;padding:0 18px;border-radius:4px;background:var(--ink);color:var(--paper);font-size:11.5px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;border:1px solid var(--ink)}
.nav a.cta:hover{background:var(--acc);border-color:var(--acc);color:#fff}
[dir="rtl"] .nav a.cta{letter-spacing:0;text-transform:none;font-size:14.5px}
.nav .soon{font-size:13px;color:var(--soft);display:inline-flex;align-items:center;gap:7px;min-height:44px;cursor:default}
.soon small{font-size:9.5px;letter-spacing:1px;text-transform:uppercase;border:1px solid var(--line);border-radius:10px;padding:1px 6px;color:var(--soft);line-height:1.5}
footer .soon{color:var(--herosub)} footer .soon small{border-color:var(--line-ink);color:var(--herosub)}
.nav a.lang{font-family:var(--arabic);font-size:13px;border:1px solid var(--line);border-radius:16px;padding:0 14px;min-height:34px;background:var(--card);display:inline-flex;align-items:center}
.nav a.lang:hover{border-color:var(--acc);color:var(--acc)}
.nav details.menu{display:none}
@media(max-width:1060px){
  .nav ul.desk{display:none}.nav details.menu{display:block;position:relative}
  .nav summary{list-style:none;cursor:pointer;font-size:11.5px;letter-spacing:1.3px;text-transform:uppercase;min-height:44px;display:inline-flex;align-items:center;padding:0 16px;border:1px solid var(--line);border-radius:16px;background:var(--card)}
  .nav summary::-webkit-details-marker{display:none}
  .nav details[open] summary{border-color:var(--acc);color:var(--acc)}
  .nav details ul{position:absolute;inset-inline-end:0;top:52px;min-width:250px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);flex-direction:column;align-items:stretch;gap:0;padding:8px 18px 14px;z-index:50;box-shadow:0 12px 30px rgba(0,0,0,.08)}
  .nav details li a.link{min-height:46px;width:100%;color:var(--ink)}
  .nav details li a.cta{margin-top:8px;justify-content:center;min-height:46px}
  .nav details li a.lang{margin:8px 0 4px}
}
[dir="rtl"] .nav summary{font-family:var(--arabic);letter-spacing:0;text-transform:none;font-size:15px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border:1px solid var(--ink);border-radius:4px;background:transparent;color:var(--ink);font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;transition:background var(--t),color var(--t),border-color var(--t)}
.btn:hover{border-color:var(--acc);color:var(--acc)}
.btn.primary{background:var(--ink);color:var(--paper)}
.btn.primary:hover{background:var(--acc);border-color:var(--acc);color:#fff}
.on-ink .btn{border-color:var(--paper);color:var(--paper)}
.on-ink .btn:hover{border-color:var(--acc-ink);color:var(--acc-ink)}
.on-ink .btn.primary{background:var(--paper);color:var(--ink)}
.on-ink .btn.primary:hover{background:var(--acc-ink);border-color:var(--acc-ink);color:#fff}
.btn[disabled]{opacity:.5;cursor:wait}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
[dir="rtl"] .btn{font-family:var(--arabic);letter-spacing:0;text-transform:none;font-size:15px}

/* ---------- page head (inner pages) ---------- */
.phead > .wrap{padding-block:clamp(36px,5.4vw,70px)}
.phead .lead{max-width:36ch;margin-bottom:0}
.phead .btns{margin-top:28px}
.phead .meta{margin:18px 0 0;font-size:12px;color:var(--herosub);letter-spacing:.5px}

/* ---------- cards and grids ---------- */
.grid{display:grid;gap:14px}
@media(min-width:720px){.grid.c2{grid-template-columns:1fr 1fr}.grid.c3{grid-template-columns:repeat(3,1fr)}.grid.c4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.grid.c4{grid-template-columns:repeat(4,1fr)}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px;display:flex;flex-direction:column;gap:10px;transition:box-shadow var(--t),transform var(--t)}
.card:hover{box-shadow:0 0 0 1.5px var(--acc),0 10px 26px rgba(0,0,0,.06);transform:translateY(-2px)}
.card h3{margin:0}
.card p{margin:0;font-size:13.5px;color:#333}
.card .kick{font-size:12px;letter-spacing:.2px;color:var(--soft);font-weight:600}
[dir="rtl"] .card .kick{letter-spacing:0;text-transform:none;font-size:13px}
.card a.more,.card .more{margin-top:auto;font-size:13px;font-weight:600;border:0;display:inline-flex;min-height:40px;align-items:center}
[dir="rtl"] .card a.more{letter-spacing:0;text-transform:none;font-size:14px}
a.card{border-bottom:1px solid var(--line);color:inherit}
a.card:hover{color:inherit}
.on-ink .card{background:#141414;border-color:var(--line-ink)} .on-ink .card p{color:var(--herostory)}

/* six systems */
.sys6{display:grid;gap:12px}
@media(min-width:640px){.sys6{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.sys6{grid-template-columns:repeat(3,1fr)}}
.sys6 .card{flex-direction:row;align-items:flex-start;gap:18px}
.sys6 .card svg{flex:none;width:52px;height:52px}
.sys6 .card h3{font-size:22px;margin-bottom:6px}

/* steps */
.steps{counter-reset:s;list-style:none;padding:0;margin:0;max-width:none;display:grid;gap:12px}
@media(min-width:720px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.steps{grid-template-columns:repeat(4,1fr)}}
.steps > li{margin:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px;counter-increment:s;transition:box-shadow var(--t),transform var(--t)}
.steps > li::before{content:counter(s,decimal-leading-zero);display:block;font-family:var(--mono);font-size:30px;font-weight:600;color:#D4D4D4;line-height:1;margin-bottom:14px;transition:color var(--t)}
.steps > li:hover{box-shadow:0 0 0 1.5px var(--acc),0 10px 26px rgba(0,0,0,.06);transform:translateY(-2px)}
.steps > li:hover::before{color:var(--acc)}
.steps h3{font-size:22px;margin-bottom:8px}
.steps p{font-size:13.5px;margin:0;color:#333}
.on-ink .steps > li{background:#141414;border-color:var(--line-ink)} .on-ink .steps p{color:var(--herostory)} .on-ink .steps > li::before{color:#3A3A3A}

/* long-form step list (how it works) */
.flow{list-style:none;padding:0;margin:0;max-width:none;counter-reset:f;display:grid;gap:12px}
.flow > li{counter-increment:f;margin:0;display:grid;gap:6px 28px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,3.4vw,36px)}
@media(min-width:900px){.flow > li{grid-template-columns:120px minmax(0,1fr)}}
.flow > li::before{content:"Step " counter(f);font-family:var(--mono);font-weight:600;font-size:12.5px;line-height:1.6;color:var(--soft)}
[dir="rtl"] .flow > li::before{content:"الخطوة " counter(f);font-family:var(--arabic);font-size:14px}
.flow h3{font-size:clamp(24px,2.4vw,30px);margin-bottom:10px}
.flow p{color:#2A2A2A}
.flow p:last-child{margin-bottom:0}
.flow .docs{list-style:none;padding:0;margin:14px 0 16px;display:grid;gap:10px;max-width:none}
@media(min-width:800px){.flow .docs{grid-template-columns:repeat(3,1fr)}}
.flow .docs li{margin:0;padding:14px 16px;border:1px solid var(--line);border-radius:12px;font-size:13px;color:#333;background:var(--paper)}
.flow .docs b{display:block;font-size:13.5px;margin-bottom:4px;color:var(--ink)}

/* feature block: list left, screenshot right */
.feature{display:grid;gap:28px;align-items:start;margin-top:clamp(28px,4vw,48px)}
@media(min-width:960px){.feature{grid-template-columns:5fr 7fr;gap:48px;align-items:center}}
.acc{list-style:none;padding:0;margin:0;max-width:none}
.acc li{margin:0;padding:14px 0 14px 22px;border-inline-start:2px solid var(--line);cursor:pointer;transition:border-color var(--t)}
[dir="rtl"] .acc li{padding:14px 22px 14px 0}
.acc li h4{font-family:var(--serif);font-weight:400;font-size:23px;margin:0;color:var(--ink);transition:color var(--t)}
.acc li p{margin:8px 0 0;font-size:13.5px;color:#333;display:none}
.acc li.on{border-color:var(--acc)} .acc li.on h4{color:var(--acc)} .acc li.on p{display:block}
.acc li:hover h4{color:var(--acc)}
.feature .shots{position:relative}
.feature .shots .frame{display:none}
.feature .shots .frame.on{display:block;animation:fadein .35s ease}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.frame{margin:0;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 14px 40px rgba(0,0,0,.08)}
.frame img{display:block;width:100%;height:auto}
.caption{font-size:12px;color:var(--soft);margin-top:12px}
.on-ink .caption{color:var(--herosub)}

/* stakeholder pack */
.pack{display:grid;gap:16px}
@media(min-width:800px){.pack{grid-template-columns:repeat(3,1fr)}}
.pack figure{margin:0;background:#141414;border:1px solid var(--line-ink);border-radius:var(--r);padding:16px;transition:box-shadow var(--t),transform var(--t)}
.pack figure:hover{box-shadow:0 0 0 1.5px var(--acc-ink);transform:translateY(-2px)}
.pack .phoneshot{border-radius:14px;overflow:hidden;max-height:400px;background:#fff}
.pack .phoneshot img{display:block;width:100%;height:auto}
.pack figcaption{margin-top:14px}
.pack figcaption b{display:block;font-family:var(--serif);font-weight:400;font-size:23px;margin-bottom:4px;color:var(--paper)}
.pack figcaption span{font-size:13px;color:var(--herostory)}
.pack-note{margin:22px 0 0;font-size:13px;color:var(--herosub);max-width:70ch}

/* who we help */
.doors .card h3{font-size:25px}
.doors .card .line{font-family:var(--serif);font-size:19px;line-height:1.3;color:var(--ink)}

/* tiers and the AED 0 callout */
.tiers{display:grid;gap:14px}
@media(min-width:900px){.tiers{grid-template-columns:repeat(3,1fr)}}
.tier{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px;transition:box-shadow var(--t),transform var(--t);display:flex;flex-direction:column;gap:8px}
.tier:hover{box-shadow:0 0 0 1.5px var(--acc),0 10px 26px rgba(0,0,0,.06);transform:translateY(-2px)}
.tier .kick{font-size:12px;color:var(--soft)}
.tier h3{font-size:30px;margin:0}
.tier p{font-size:13.5px;color:#333;margin:0}
.tier dl{margin:14px 0 0;display:grid;grid-template-columns:1fr auto;gap:10px 14px;font-size:13.5px;border-top:1px dashed var(--line);padding-top:14px}
.tier dt{color:var(--soft)} .tier dt small{display:block;font-size:11.5px}
.tier dd{margin:0;font-weight:600;text-align:end;white-space:nowrap}
.callout{margin-top:14px;display:grid;gap:10px 28px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px 26px}
@media(min-width:800px){.callout{grid-template-columns:auto minmax(0,1fr) auto}}
.callout .zero{font-family:var(--mono);font-weight:700;font-size:26px;color:var(--acc);white-space:nowrap}
.callout p{margin:0;font-size:14px;color:#333}

/* what goes where */
.devices{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.devices{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1100px){.devices{grid-template-columns:repeat(5,1fr)}}
.device{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;transition:box-shadow var(--t),transform var(--t)}
.device:hover{box-shadow:0 0 0 1.5px var(--acc),0 10px 26px rgba(0,0,0,.06);transform:translateY(-2px)}
.device svg{display:block;width:52px;height:52px;margin-bottom:12px}
.device b{display:block;font-size:13.5px;margin-bottom:2px}
.device i{display:block;font-style:normal;font-size:12px;color:var(--soft);margin-bottom:8px;line-height:1.45}
[dir="rtl"] .device i{letter-spacing:0;text-transform:none;font-size:12.5px}
.device p{margin:0;font-size:12.5px;color:var(--soft);line-height:1.6}

/* how we work: the habits we gave up */
.rules{list-style:none;padding:0;margin:0;max-width:none;display:grid;gap:0 44px}
@media(min-width:800px){.rules{grid-template-columns:1fr 1fr}}
.rules li{margin:0;padding:20px 0;border-top:1px solid var(--line-ink)}
.rules strong{display:block;margin-bottom:6px;font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.2;color:var(--paper)}
[dir="rtl"] .rules strong{font-family:var(--arabic);font-weight:700;font-size:20px}
.rules p{margin:0;font-size:13.5px;color:var(--herostory)}

/* what's new rail */
.rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.rail > *{flex:0 0 min(340px,82vw);scroll-snap-align:start}
.ncard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow var(--t),transform var(--t)}
.ncard:hover{box-shadow:0 0 0 1.5px var(--acc),0 10px 26px rgba(0,0,0,.06);transform:translateY(-2px)}
.ncard .body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.ncard h3{font-size:22px;line-height:1.2;margin:0}
.ncard h3 a{border:0}
.ncard h3 a::after{content:"";position:absolute;inset:0}
.ncard{position:relative}
.ncard p{margin:0;font-size:13px;color:var(--soft)}
.ncard .src{margin-top:auto;font-size:11px;color:var(--soft);padding-top:8px}
.tag{display:inline-block;font-size:11.5px;padding:3px 10px;border-radius:12px;background:#EDEDED;color:#3A3A3A;align-self:flex-start;font-weight:600}
.tag.news{background:#EDEDED;color:var(--ink)} .tag.doctrine{background:#EDEDED;color:#4A4A4A}
[dir="rtl"] .tag{letter-spacing:0;text-transform:none;font-size:12px}

/* closing call to action */
.cta .wrap{display:grid;gap:18px 40px}
@media(min-width:900px){.cta .wrap{grid-template-columns:minmax(0,1fr) auto;align-items:end}}
.cta .lead{max-width:34ch;margin:0}
.cta .btns{margin-top:0}

/* articles */
.pcard{background:var(--card);border:1px solid var(--line);border-radius:var(--rp);padding:clamp(24px,5vw,60px)}
.prose > *{max-width:var(--measure)}
.prose h2{font-size:clamp(26px,2.6vw,33px);margin-top:44px}
.prose h3{margin-top:30px}
.prose p,.prose li{font-size:15.5px;line-height:1.8;color:#1E1E1E}
.prose ol > li,.prose ul > li{margin-bottom:10px}
.prose figure{margin:30px 0;max-width:none;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.prose figure svg{display:block}
.prose a{border-color:var(--acc)}
.prose blockquote{margin:24px 0;padding-inline-start:20px;border-inline-start:2px solid var(--acc);font-family:var(--serif);font-size:22px;line-height:1.4}
.articlewrap{display:grid;gap:28px}
@media(min-width:1100px){.articlewrap{grid-template-columns:minmax(0,1fr) 300px;align-items:start}}
.aside{position:sticky;top:20px;display:grid;gap:12px}
.aside .card{padding:20px}
.aside .card h4{margin:0 0 6px}
.srcbox{border:1px solid var(--line);border-radius:12px;padding:14px 18px;font-size:13px;background:var(--paper);margin:0 0 26px}
.srcbox b{display:block;font-size:12px;color:var(--soft);margin-bottom:4px}
.artlist{list-style:none;padding:0;margin:0;max-width:none;display:grid;gap:12px}
@media(min-width:900px){.artlist.two{grid-template-columns:1fr 1fr}}
.artlist li{margin:0}
.artlist a.card h3{font-size:24px}
.artlist .meta{font-size:11.5px;color:var(--soft);letter-spacing:.4px;margin-top:auto}

/* contact, key-value, forms */
.contactgrid{display:grid;gap:14px}
@media(min-width:900px){.contactgrid{grid-template-columns:1fr 1fr}}
.contactgrid .card{padding:clamp(24px,3.4vw,36px);gap:12px}
.check{list-style:none;padding:0;margin:4px 0 0;max-width:none}
.check li{position:relative;padding-inline-start:24px;margin-bottom:10px;font-size:14px}
.check li::before{content:"";position:absolute;inset-inline-start:2px;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--acc)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 20px;font-size:14px;max-width:var(--measure);margin:0}
.kv dt{color:var(--soft)} .kv dd{margin:0}
.textcard{background:var(--card);border:1px solid var(--line);border-radius:var(--rp);padding:clamp(24px,5vw,60px)}
.textcard > *{max-width:var(--measure)}
.textcard h2{font-size:clamp(24px,2.4vw,30px);margin-top:36px}
.textcard h2:first-child{margin-top:0}
.form{display:grid;gap:14px}
.form label{display:block;font-size:12.5px;color:var(--soft);margin-bottom:6px}
[dir="rtl"] .form label{letter-spacing:0;text-transform:none;font-size:13.5px}
.form input,.form select,.form textarea{width:100%;font-family:var(--mono);font-size:15px;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);transition:border-color var(--t)}
[dir="rtl"] .form input,[dir="rtl"] .form select,[dir="rtl"] .form textarea{font-family:var(--arabic)}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(232,73,15,.14)}
.form .row{display:grid;gap:14px}
@media(min-width:600px){.form .row{grid-template-columns:1fr 1fr}}
.form .hp{position:absolute;left:-9999px;top:-9999px}
.form .msg{font-size:13.5px;padding:12px 16px;border-radius:10px;border:1px solid var(--line);display:none}
.form .msg.ok{display:block;border-color:var(--acc);color:var(--ink)}
.form .msg.err{display:block;border-color:#B00020;color:#B00020}

/* footer */
footer{padding:20px 0 40px}
footer > .wrap{background:var(--ink);color:var(--paper);border-radius:var(--rp);padding:clamp(30px,5vw,56px) clamp(22px,5vw,60px);max-width:calc(var(--wrap) - 2*var(--gutter));position:relative;overflow:hidden}
footer .cols{display:grid;gap:30px}
@media(min-width:800px){footer .cols{grid-template-columns:2fr 1fr 1fr 1fr}}
footer ul{list-style:none;padding:0;margin:0;max-width:none}
footer li{margin:0 0 9px;font-size:13.5px}
footer a{border-color:var(--line-ink)} footer a:hover{color:var(--acc-ink);border-color:var(--acc-ink)}
footer .about p{color:var(--herostory);font-size:13.5px;max-width:40ch;margin:16px 0 18px}
footer .reach{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px}
footer .legal{margin-top:30px;padding-top:18px;border-top:1px solid var(--line-ink);font-size:11.5px;color:var(--herosub);max-width:none;display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 20px}
footer .legal p{max-width:none;margin:0}

/* ==================== hero: the villa, taken apart ==================== */
.hero4{padding-block:4px 20px}
.hero4.on-ink > .wrap{display:block;overflow:clip;max-width:none;margin:0 clamp(8px,1vw,14px);padding:clamp(28px,4.2vw,58px) clamp(20px,4.2vw,62px) clamp(26px,3vw,40px)}
.hero4 .h4-track,.hero4 .h4-foot{max-width:1320px;margin:0 auto}
.hero4 .h4-stage{position:relative;display:grid;gap:20px 30px}
.hero4 .h4-copy{position:relative;z-index:2}
.hero4 h1.dh{--cw:clamp(22px,3.3vw,50px);margin-bottom:22px}
.hero4 .h4-lead{font-family:var(--serif);font-size:clamp(20px,1.9vw,27px);line-height:1.34;color:var(--paper);max-width:31ch;margin:0 0 16px}
.hero4 .h4-sub{color:var(--herostory);max-width:56ch;font-size:13.5px;line-height:1.75;margin:0}
.hero4 .btns{margin-top:24px}
.hero4 .h4-scene{position:relative}
.hero4 .h4-fit{position:relative;height:clamp(300px,92vw,460px);perspective:2600px;perspective-origin:50% 30%}
.hero4 .h4-stack{position:absolute;left:50%;top:50%;width:660px;height:480px;margin:-240px 0 0 -330px;transform-style:preserve-3d;transform:scale(.5) rotateX(56deg) rotateZ(-38deg);will-change:transform}
.hero4 .h4-layer{position:absolute;inset:0;transform-style:flat;transform:translateZ(calc(var(--i) * 40px));transition:opacity .3s ease,visibility 0s;will-change:transform}
.hero4 .h4-layer svg{display:block;width:100%;height:100%;overflow:visible}
.hero4 .h4-layer > svg > rect:first-of-type{transition:stroke .3s ease,fill .3s ease}
.hero4 .h4-layer.hi > svg > rect:first-of-type{stroke:rgba(255,87,5,.85);fill:rgba(255,87,5,.05)}
/* one system at a time: the others step out of the way */
/* hidden for real (visibility as well as opacity): Safari can keep painting a faded 3D layer (9 Oct 2026) */
.hero4 .h4-stack.solo .h4-layer:not(.hi){opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s}
.hero4 .h4-leaders{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;display:none}
.hero4 .h4-leaders path{transition:stroke .25s ease,opacity .25s ease}
.hero4 .h4-tags{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 10px;max-width:none}
.hero4 .h4-tags li{margin:0;padding:10px 0 0;border-top:1px solid var(--line-ink);cursor:pointer;transition:color .2s,border-color .2s,opacity .25s;-webkit-tap-highlight-color:transparent}
.hero4 .h4-tags b{display:block;font-size:12.5px;color:var(--paper);font-weight:600}
.hero4 .h4-tags span{display:none;font-size:12px;color:var(--herosub);line-height:1.5}
.hero4 .h4-tags li.hi{border-color:var(--acc-ink)} .hero4 .h4-tags li.hi b{color:var(--acc-ink)}
.hero4 .h4-hint{margin:12px 0 0;font-size:12px;color:var(--herosub);display:block}
.hero4 .h4-foot{display:grid;gap:4px;margin-top:10px}
.hero4 .h4-cap{font-size:11px;color:#8A8A8A;margin:0;text-align:center;max-width:none}
.hero4 .brands{margin:14px auto 0;padding:20px 0 0;border-top:1px solid var(--line-ink);text-align:center}
.hero4 .brands .eyebrow{margin-bottom:12px}
.hero4 .brands ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 34px;max-width:none}
.hero4 .brands li{margin:0;font-family:var(--serif);font-size:clamp(20px,1.9vw,25px);color:var(--herostory)}
/* Arabic hero */
.hero4 h1.arh{font-size:clamp(32px,4vw,56px);line-height:1.3;color:var(--paper);margin-bottom:20px;max-width:14ch}
[dir="rtl"] .hero4 .h4-lead{font-family:var(--arabic);font-size:clamp(18px,1.7vw,23px);line-height:1.75}
[dir="rtl"] .hero4 .h4-sub{font-family:var(--arabic);font-size:15px}
[dir="rtl"] .hero4 .h4-tags b,[dir="rtl"] .hero4 .h4-hint,[dir="rtl"] .caption,[dir="rtl"] .tier .kick,[dir="rtl"] .frame .bar span,[dir="rtl"] .shead .more{letter-spacing:0;text-transform:none}
[dir="rtl"] .hero4 .h4-tags b{font-size:13px} [dir="rtl"] .hero4 .h4-hint{font-size:13px}
[dir="rtl"] .hero4 .h4-tags span{font-family:var(--arabic);font-size:13.5px}
[dir="rtl"] .hero4 .brands li{font-family:var(--serif)}
[dir="rtl"] .acc li h4,[dir="rtl"] .pack figcaption b,[dir="rtl"] .rules strong,[dir="rtl"] .card h3,[dir="rtl"] .tier h3,[dir="rtl"] .steps h3,[dir="rtl"] .flow h3,[dir="rtl"] .ncard h3{font-family:var(--arabic);font-weight:700}
[dir="rtl"] .acc li h4{font-size:20px} [dir="rtl"] .pack figcaption b{font-size:19px}
@media(max-width:1099px){
  .hero4 h1.arh{order:2;margin-bottom:4px}
  .hero4 .h4-copy{display:contents}
  .hero4 .h4-kicker{order:1;margin-bottom:6px} .hero4 h1.dh{order:2;margin-bottom:4px} .hero4 .h4-lead{order:3;margin-bottom:0} .hero4 .btns{order:4;margin-top:6px}
  .hero4 .h4-scene{order:5} .hero4 .h4-sub{order:6}
}
@media(min-width:1100px){
  .hero4 .h4-stage{grid-template-columns:minmax(0,4.8fr) minmax(0,7.2fr);align-items:center}
  .hero4 .h4-fit{height:clamp(480px,64vh,660px)}
}
/* desktop with JS: the stage pins and scrolling takes the villa apart */
.hero4.h4-desk .h4-track{height:230vh}
.hero4.h4-desk .h4-stage{position:sticky;top:14px;height:calc(100vh - 28px);min-height:620px;align-content:center}
.hero4.h4-desk .h4-scene{height:100%;contain:layout style}
.hero4.h4-desk .h4-fit{position:absolute;inset:0;height:auto}
.hero4.h4-desk .h4-leaders{display:block}
.hero4.h4-desk .h4-tags{display:block;position:absolute;inset:0;margin:0;pointer-events:none}
.hero4.h4-desk .h4-tags li{position:absolute;right:0;top:0;width:210px;border:0;padding:0 0 0 12px;pointer-events:auto;opacity:0;will-change:transform,opacity}
.hero4.h4-desk .h4-tags span{display:block}
.hero4.h4-desk .h4-hint{position:absolute;left:50%;transform:translateX(-50%);bottom:18px;margin:0;opacity:0;transition:opacity .5s ease;white-space:nowrap}
.hero4.h4-desk .h4-hint.show{opacity:1}
/* the build sequence: walls draw, the plan is read, devices land system by system */
.js .hero4 .wall{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s cubic-bezier(.6,0,.2,1) calc(var(--d) * 55ms)}
.js .hero4 .rl,.js .hero4 .wx{opacity:0;transition:opacity .6s ease calc(450ms + var(--d) * 45ms)}
.js .hero4 .drawn .wall{stroke-dashoffset:0}
.js .hero4 .drawn .rl,.js .hero4 .drawn .wx{opacity:1}
.hero4 .beam{opacity:0}
.hero4 .scanning .beam{animation:h4beam 1.3s cubic-bezier(.45,0,.3,1) forwards}
@keyframes h4beam{0%{opacity:1;transform:translateX(0)}88%{opacity:1}100%{opacity:0;transform:translateX(720px)}}
.js .hero4 .h4-layer:not([data-k="plan"]) > svg{opacity:0;transition:opacity .4s ease}
.js .hero4 .h4-layer.on > svg{opacity:1}
.js .hero4 .h4-layer:not([data-k="plan"]) .dv{opacity:0;transform:scale(.25);transform-box:fill-box;transform-origin:center;transition:opacity .4s ease calc(var(--d) * 18ms),transform .5s cubic-bezier(.2,1.6,.35,1) calc(var(--d) * 18ms)}
.js .hero4 .h4-layer.on .dv{opacity:1;transform:none}
.js .hero4 .dl{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s ease .2s}
.js .hero4 .h4-layer.on .dl{stroke-dashoffset:0}

/* ==================== motion (site.js adds the classes) ==================== */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.js .reveal.in{opacity:1;transform:none}
.js .stagger > *{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--d,0) * 60ms)}
.js .stagger.in > *{opacity:1;transform:none}
/* dot headings: the accent dot lights last */
.js .dh.reveal .a{opacity:0;transition:opacity .4s ease .5s}
.js .dh.reveal.in .a{opacity:1}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.15}}
.nav .brand svg circle.blink{animation:blink .9s ease-in-out 1 .3s}
.film{position:relative;aspect-ratio:16/9;border-radius:22px;overflow:hidden;background:#111;border:1px solid var(--line-ink)}
.film video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
/* the info film is vertical (1080x1920): a phone-shaped frame, centred (13 Oct 2026) */
.film.portrait{aspect-ratio:9/16;width:min(380px,100%);margin-inline:auto;border-radius:28px}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .reveal,.js .stagger > *{opacity:1!important;transform:none!important}
  .js .hero4 .wall,.js .hero4 .dl{stroke-dashoffset:0} .js .hero4 .rl,.js .hero4 .wx,.js .hero4 .dv,.js .hero4 .h4-layer > svg{opacity:1;transform:none}
}
@media print{.nav,footer .cols,.btns,.hero4 .h4-scene{display:none}body{background-image:none}}

/* ==================== v2 (2026-10-06): fewer template habits, new pages ==================== */
.preview-bar{background:#141414;color:#CFCFCF;font-size:12px;text-align:center;padding:7px 16px;line-height:1.5}
.preview-bar b{color:var(--acc-ink);font-weight:600}
.nav a.cta.ghost{background:transparent;color:var(--ink);border-color:#BDBDBD}
.nav a.cta.ghost:hover{border-color:var(--acc);color:var(--acc);background:transparent}
.nav ul.desk{gap:4px 18px}
.btn.ghost{border-color:transparent;padding:0 10px}
.btn.ghost:hover{border-color:transparent;color:var(--acc)}
.on-ink .btn.ghost{border-color:transparent}
.notice{border:1px solid var(--line);border-radius:10px;padding:10px 14px;font-size:12.5px;line-height:1.6;max-width:62ch;margin:16px 0 0;color:#333}
.notice.draft{border:1px dashed var(--acc);color:var(--ink);background:rgba(232,73,15,.04)}
.on-ink .notice{color:var(--herostory);border-color:var(--line-ink)}
.on-ink .notice.draft{border-color:var(--acc-ink);color:var(--paper);background:rgba(255,87,5,.06)}

/* hero tweaks: a plain kicker line, the brand row label, labels visible from the start */
.hero4 .h4-kicker{font-size:12.5px;color:var(--herosub);margin:0 0 18px;max-width:none}
.hero4 .brands .brands-h{font-size:12px;color:var(--herosub);margin:0 0 12px;max-width:none}
.hero4.h4-desk .h4-tags li{opacity:1}
.hero4 .h4-tags li:hover b,.hero4 .h4-tags li:focus-visible b{color:var(--acc-ink)}
.hero4 .h4-layer .dv{cursor:pointer}

/* section heads: three shapes, used in turn so the page doesn't repeat itself */
.shead.stack{display:block;max-width:760px}
.shead.stack .lead{max-width:46ch}
.shead.split{display:grid;gap:8px 48px}
@media(min-width:960px){.shead.split{grid-template-columns:minmax(0,6fr) minmax(0,6fr);align-items:end}.shead.split .lead{margin-bottom:6px}}
.shead.split .more{margin-top:2px}
a.more{border:0;font-size:13px;font-weight:600;display:inline-flex;align-items:center;min-height:40px}

/* six systems as a quiet list, not a wall of cards */
.syslist{list-style:none;padding:0;margin:8px 0 0;max-width:none;display:grid;gap:0 40px}
@media(min-width:720px){.syslist{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.syslist{grid-template-columns:repeat(3,1fr)}}
.syslist li{margin:0;display:flex;gap:16px;align-items:flex-start;padding:20px 0;border-top:1px solid var(--line)}
.syslist svg{flex:none;width:40px;height:40px}
.syslist h3{font-size:22px;margin:0 0 6px}
.syslist p{margin:0;font-size:13.5px;color:#333}
.syslist p.moves{margin-top:10px;font-size:12.5px;color:var(--soft)}
.syslist .moves b{display:block;font-size:10.5px;letter-spacing:1px;text-transform:uppercase;font-weight:600;color:var(--ink);margin-bottom:2px}
[dir="rtl"] .syslist .moves b{letter-spacing:0;text-transform:none;font-size:12.5px}

/* plans in, bill out: the steps sit beside the screenshots */
.feature{margin-top:0}
.feature-copy .lead{max-width:30ch}
ol.acc{counter-reset:a;margin-top:18px}
ol.acc li{counter-increment:a;position:relative}
ol.acc li h4::before{content:counter(a) ".";font-family:var(--mono);font-size:14px;color:var(--soft);margin-inline-end:10px;vertical-align:.18em}
.acc li.on h4::before{color:var(--acc)}
.feature-after{font-size:13.5px;color:#333;margin-top:18px;max-width:52ch}
.feature-after a{font-weight:600}

/* products teaser */
.famgrid{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
@media(min-width:1000px){.famgrid{grid-template-columns:repeat(4,1fr)}}
.famcard{display:flex;flex-direction:column;gap:6px;border:0;color:inherit}
.famcard .famimg{display:block;border-radius:16px;overflow:hidden;aspect-ratio:4/5;background:#e9e6e0;transition:transform var(--t),box-shadow var(--t)}
.famcard .famimg img{display:block;width:100%;height:100%;object-fit:cover}
.famcard:hover{color:inherit}
.famcard:hover .famimg{transform:translateY(-2px);box-shadow:0 0 0 1.5px var(--acc),0 10px 26px rgba(0,0,0,.08)}
.famcard b{font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.2;margin-top:8px}
.famcard span:not(.famimg){font-size:13px;color:var(--soft)}

/* start band + the question preview */
.startband{display:grid;gap:26px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--rp);padding:clamp(24px,4.6vw,56px)}
@media(min-width:960px){.startband{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:56px}}
.startband .lead{max-width:34ch}
.qpreview{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:22px}
.qpreview p{margin:0}
.qp-room{font-size:12px;color:var(--soft)}
.qp-q{font-family:var(--mono);font-weight:700;font-size:17px;line-height:1.4;margin:6px 0 14px!important}
.qpreview ul{list-style:none;padding:0;margin:0 0 16px;display:flex;flex-wrap:wrap;gap:8px;max-width:none}
.qpreview li{margin:0;border:1px solid var(--line);border-radius:20px;padding:7px 14px;font-size:13px;background:var(--card)}
.qpreview li.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.qpreview li em{font-style:normal;font-size:11px;color:var(--soft);margin-inline-start:6px}
.qpreview li.on em{color:#A3A3A3}
.qp-dots{display:flex;gap:7px;margin:0}
.qp-dots i{width:9px;height:9px;border-radius:50%;background:#D2D2D2;display:block}
.qp-dots i.on{background:var(--acc);box-shadow:0 0 0 4px rgba(232,73,15,.16)}

/* doors as an editorial list */
.doorlist{list-style:none;padding:0;margin:0;max-width:none;border-top:1px solid var(--line)}
.doorlist li{margin:0;border-bottom:1px solid var(--line)}
.doorlist a{display:grid;gap:4px 32px;padding:20px 4px;border:0;color:inherit;align-items:baseline;position:relative;padding-inline-end:36px}
@media(min-width:800px){.doorlist a{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}}
.doorlist a::after{content:"→";position:absolute;inset-inline-end:6px;top:22px;color:var(--soft);transition:transform var(--t),color var(--t)}
[dir="rtl"] .doorlist a::after{content:"←"}
.doorlist a:hover{color:inherit}.doorlist a:hover b{color:var(--acc)}.doorlist a:hover::after{color:var(--acc);transform:translateX(4px)}
.doorlist b{font-family:var(--serif);font-weight:400;font-size:clamp(23px,2.2vw,28px);line-height:1.2;transition:color var(--t)}
.doorlist span{font-size:14px;color:#333}
.tiers .tier h3{font-size:30px}

/* the map */
.mapband{display:grid;gap:28px;align-items:center}
@media(min-width:980px){.mapband{grid-template-columns:minmax(0,4.2fr) minmax(0,7.8fr);gap:48px}}
.map-copy .lead{max-width:32ch}
.maplegend{list-style:none;padding:0;margin:18px 0 0;max-width:260px}
.maplegend li{display:flex;justify-content:space-between;gap:20px;margin:0;padding:8px 0;border-top:1px solid var(--line-ink);font-size:13.5px}
.maplegend b{font-weight:600}
.map-art{position:relative}
.uaemap{display:block;width:100%;height:auto}
.uaemap .m-borders polyline{stroke:#262626;stroke-width:1;fill:none}
.uaemap .m-dots circle:not(.w){fill:#3A3A3A}
.uaemap .m-labels text{fill:#8A8A8A;font-family:var(--mono);font-size:11px;paint-order:stroke;stroke:#0A0A0A;stroke-width:4px;stroke-linejoin:round}
.uaemap .m-hits circle{fill:transparent;cursor:pointer;outline:none}
.uaemap .m-hits circle:focus-visible{stroke:var(--acc-ink);stroke-width:1.5}
.map-tip{position:absolute;margin:0;pointer-events:none;background:var(--paper);color:var(--ink);font-size:12.5px;line-height:1.45;padding:8px 12px;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.25);opacity:0;transform:translate(-50%,-120%);transition:opacity .15s ease;white-space:nowrap;max-width:none}
.map-tip.show{opacity:1}
.map-tip b{display:block;font-weight:600}
.mapband.light .maplegend li{border-color:var(--line)}
.mapband.light .uaemap .m-borders polyline{stroke:#D9D9D9}
.mapband.light .uaemap .m-dots circle:not(.w){fill:#CDCDCD}
.mapband.light .uaemap .m-labels text{fill:#6A6A6A;stroke:var(--paper)}
.mapband.light .map-tip{background:var(--ink);color:var(--paper)}

/* film + closing */
#film .caption{margin-top:14px}
.closing .closing-in{text-align:center;padding:clamp(36px,6vw,80px) 0 clamp(18px,3vw,30px);display:flex;flex-direction:column;align-items:center}
.closing .dh{margin-inline:auto}
.closing .lead{margin-inline:auto;max-width:36ch;text-align:center}
.closing .btns{justify-content:center}

/* ==================== products ==================== */
.lighthead > .wrap{padding-block:clamp(30px,5vw,64px) clamp(10px,2vw,20px)}
.lighthead .lead{max-width:44ch}
.lighthead.slim > .wrap{padding-bottom:0}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.chip{font-family:var(--mono);font-size:13px;border:1px solid #CFCFCF;background:var(--card);color:var(--ink);border-radius:20px;min-height:40px;padding:0 16px;cursor:pointer;transition:border-color var(--t),background var(--t),color var(--t)}
.chip:hover{border-color:var(--ink)}
.chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pfam{padding-block:clamp(18px,3vw,34px)}
.pfam[hidden]{display:none}
.pfam-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 22px;border-top:1px solid var(--line);padding-top:18px;margin-bottom:18px}
.pfam-head h2{font-size:clamp(26px,2.6vw,34px);margin:0}
.pfam-head p{margin:0;color:var(--soft);font-size:14px}
.pgrid{list-style:none;padding:0;margin:0;max-width:none;display:grid;gap:22px 16px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:900px){.pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1180px){.pgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pcardx{margin:0;display:flex;flex-direction:column;gap:10px}
.pimg{display:block;border:0;border-radius:16px;overflow:hidden;aspect-ratio:4/5;background:#e9e6e0;transition:transform var(--t),box-shadow var(--t)}
.pimg:hover{transform:translateY(-2px);box-shadow:0 0 0 1.5px var(--acc),0 12px 28px rgba(0,0,0,.1)}
.pimg img{display:block;width:100%;height:100%;object-fit:cover}
.pmeta h3{font-size:22px;margin:0 0 4px}
.pmeta h3 a{border:0}
.pmeta p{margin:0 0 10px;font-size:13px;color:var(--soft);line-height:1.55}
.swatches{display:flex;flex-wrap:wrap;align-items:center;gap:9px}
.sw{width:20px;height:20px;border-radius:50%;border:1px solid rgba(0,0,0,.18);background:var(--sw);padding:0;cursor:pointer;transition:box-shadow var(--t)}
.sw.on{box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--ink)}
.swname{font-size:12px;color:var(--soft);margin-inline-start:2px}
.swatches.big .sw{width:34px;height:34px}
.samplesband{display:grid;gap:22px 56px;background:var(--card);border:1px solid var(--line);border-radius:var(--rp);padding:clamp(24px,4.6vw,56px)}
@media(min-width:960px){.samplesband{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.kv2{margin:0;display:grid;gap:0}
.kv2 > div{padding:16px 0;border-top:1px solid var(--line)}
.kv2 > div:first-child{border-top:0;padding-top:0}
.kv2 dt{font-weight:600;margin-bottom:4px}
.kv2 dd{margin:0;font-size:14px;color:#333}

/* product page */
.pdetail > .wrap{padding-top:clamp(18px,3vw,34px)}
.crumbs{font-size:12.5px;color:var(--soft);margin:0 0 18px;display:flex;gap:10px}
.crumbs a{border:0;color:var(--soft)} .crumbs a:hover{color:var(--acc)}
.pd-grid{display:grid;gap:30px}
@media(min-width:1000px){.pd-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:52px;align-items:start}}
.pd-tabs{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:22px;background:var(--card);margin-bottom:12px}
.pd-tabs button{font-family:var(--mono);font-size:13px;border:0;background:transparent;border-radius:18px;min-height:36px;padding:0 16px;cursor:pointer;color:#3A3A3A}
.pd-tabs button.on{background:var(--ink);color:var(--paper)}
.pd-view[hidden]{display:none}
.p3d{position:relative;aspect-ratio:4/3;border-radius:20px;overflow:hidden;background:#e7e1d7;touch-action:pan-y}
.p3d canvas{position:absolute;inset:0;display:block;width:100%!important;height:100%!important;cursor:grab}
.p3d canvas:active{cursor:grabbing}
.p3d .p3d-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.p3d .p3d-fallback[hidden]{display:none}
.p3d.live .p3d-fallback{display:none}
.pd-hint{font-size:12px;color:var(--soft);margin:10px 0 0}
.pd-room{margin:0}
.pd-room[hidden]{display:none}
.pd-room img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:20px}
.pd-room figcaption{font-size:12px;color:var(--soft);margin-top:10px;max-width:60ch}
.pd-info h1{font-size:clamp(34px,3.6vw,48px);margin:0 0 4px}
.pd-brand{font-size:12.5px;color:var(--soft);margin:0 0 18px}
.pd-line{font-family:var(--serif);font-size:clamp(20px,1.9vw,25px);line-height:1.3;margin:0 0 12px;max-width:30ch}
.pd-about{font-size:14px;color:#333}
.picker{margin:22px 0 0}
.picker-h{font-size:12.5px;color:var(--soft);margin:0 0 10px}
.picker-h span{color:var(--ink);font-weight:600;margin-inline-start:8px}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{font-family:var(--mono);font-size:14px;min-width:48px;min-height:44px;padding:0 12px;border:1px solid #CFCFCF;border-radius:10px;background:var(--card);cursor:pointer;color:var(--ink);transition:border-color var(--t),background var(--t),color var(--t)}
.opt:hover{border-color:var(--ink)}
.opt.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pd-info .btns{margin-top:28px}
.pd-note{font-size:12.5px;color:var(--soft);margin:14px 0 0}
.pd-more .pd-cols{display:grid;gap:24px 56px;border-top:1px solid var(--line);padding-top:26px}
@media(min-width:900px){.pd-more .pd-cols{grid-template-columns:1fr 1fr}}
.pd-more h2,.pd-related h2{font-size:clamp(24px,2.2vw,30px)}
.pd-related .pgrid.small{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:900px){.pd-related .pgrid.small{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* sample request dialog */
.sample-dlg{border:0;padding:0;border-radius:22px;max-width:min(560px,calc(100vw - 24px));width:100%;background:var(--card);color:var(--ink);box-shadow:0 30px 80px rgba(0,0,0,.35)}
.sample-dlg::backdrop{background:rgba(10,10,10,.55)}
.sample-dlg form{padding:clamp(20px,4vw,32px)}
.sd-head{display:flex;justify-content:space-between;align-items:center;gap:16px}
.sd-head h2{margin:0;font-size:28px}
.sd-x{border:0;background:transparent;font-size:26px;line-height:1;cursor:pointer;min-width:44px;min-height:44px;color:var(--soft)}
.sd-x:hover{color:var(--acc)}
.sd-what{margin:6px 0 16px;font-size:13.5px;color:#333}
.seg{display:flex;gap:6px;border:0;padding:4px;margin:0 0 10px;background:var(--paper);border-radius:22px;flex-wrap:wrap}
.seg label{display:block;margin:0;flex:1 1 auto;text-transform:none;letter-spacing:0;font-size:13px;color:var(--ink)}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:flex;align-items:center;justify-content:center;min-height:38px;padding:0 14px;border-radius:18px;cursor:pointer;text-align:center}
.seg input:checked + span{background:var(--ink);color:var(--paper)}
.seg input:focus-visible + span{outline:2px solid var(--acc);outline-offset:2px}
.sd-terms{font-size:13px;color:#333;margin:0 0 6px}
.sd-terms[hidden]{display:none}
.sd-preview{margin-top:4px}

/* ==================== lists ==================== */
ol.plain{list-style:none;counter-reset:p;padding:0;margin:0 0 14px;max-width:none}
ol.plain li{counter-increment:p;position:relative;padding-inline-start:28px;margin-bottom:12px;font-size:14px;color:#333}
ol.plain li::before{content:counter(p);position:absolute;inset-inline-start:0;top:0;font-weight:600;color:var(--soft)}
.contactgrid ol.plain li{font-size:13.5px}

/* how it works: the device list */
.devlist{list-style:none;padding:0;margin:0;max-width:none;display:grid;gap:0 40px}
@media(min-width:800px){.devlist{grid-template-columns:1fr 1fr}}
.devlist li{margin:0;display:flex;gap:16px;padding:16px 0;border-top:1px solid var(--line)}
.devlist svg{flex:none;width:40px;height:40px}
.devlist b{display:block;font-size:14px}
.devlist i{display:block;font-style:normal;font-size:12.5px;color:var(--soft);margin:2px 0 6px}
.devlist p{margin:0;font-size:13.5px;color:#333}
@media(prefers-reduced-motion:reduce){.pimg:hover,.famcard:hover .famimg{transform:none}}

/* the drawing answers the pointer through site.js, which works out the layer under the pointer from the
   same projection it draws with (9 Oct 2026). Nothing inside the 3D stack takes pointer events. */
.hero4 .h4-stack,.hero4 .h4-stack *{pointer-events:none}
.hero4 .h4-fit.pick{cursor:pointer}

/* layer names print only once the villa is apart, or for the one system on its own */
.hero4 .h4-layer text.lt{transition:opacity .3s ease}
.hero4 .h4-stack:not(.apart):not(.solo) .h4-layer:not([data-k="plan"]) text.lt{opacity:0}
.pdetail > .wrap{padding-top:clamp(8px,1.6vw,18px)}
.hero4.h4-desk .h4-copy{align-self:start;padding-top:clamp(18px,5vh,64px)}
.hero4 h1.dh{--cw:clamp(22px,3vw,44px)}
.hero4.h4-desk .h4-stage{align-content:stretch;grid-template-rows:minmax(0,1fr)}
/* v2.1 · who-we-help 2+3, designers finish row */
@media(min-width:720px){.grid.doors5{grid-template-columns:repeat(6,1fr)}.grid.doors5 > :nth-child(-n+2){grid-column:span 3}.grid.doors5 > :nth-child(n+3){grid-column:span 2}}
.finrow{list-style:none;padding:0;margin:0;max-width:none;display:grid;gap:18px 12px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:999px){.finrow li:last-child:nth-child(odd){grid-column:span 2}}
@media(max-width:619px){.finrow b{font-size:17px}.finrow .finimg{border-radius:12px}}
@media(min-width:1000px){.finrow{grid-template-columns:repeat(6,1fr)}.finrow li{grid-column:span 2}
  .finrow li:first-child:nth-last-child(5),.finrow li:first-child:nth-last-child(5) + li,
  .finrow li:first-child:nth-last-child(4),.finrow li:first-child:nth-last-child(4) ~ li,
  .finrow li:first-child:nth-last-child(2),.finrow li:first-child:nth-last-child(2) ~ li{grid-column:span 3}}
.finrow li{margin:0}
.finrow a{display:flex;flex-direction:column;gap:4px;border:0;color:inherit}
.finrow .finimg{display:block;border-radius:16px;overflow:hidden;aspect-ratio:3/2;background:#e9e6e0;transition:transform var(--t),box-shadow var(--t)}
.finrow .finimg img{display:block;width:100%;height:100%;object-fit:cover}
.finrow a:hover{color:inherit}
.finrow a:hover .finimg{transform:translateY(-2px);box-shadow:0 0 0 1.5px var(--acc),0 10px 26px rgba(0,0,0,.08)}
.finrow b{font-family:var(--serif);font-weight:400;font-size:21px;line-height:1.2;margin-top:8px}
.finrow span:not(.finimg){font-size:13px;color:var(--soft)}
.finrow + .notice{margin-top:18px}
/* v2.2 · trade-first hero: the owners' path as a quiet line under the buttons */
.hero4 .h4-owner{margin:14px 0 0;font-size:13px;color:var(--herostory)}
.hero4 .h4-owner a{color:var(--paper);border-bottom:1px solid rgba(244,244,244,.4)}
.hero4 .h4-owner a:hover{color:var(--acc-ink);border-color:var(--acc-ink)}
@media(max-width:1099px){.hero4 .h4-owner{order:4;margin-top:2px}}
/* who we help: three trade doors in a row, owners across the full width below */
@media(min-width:720px){.grid.doors4{grid-template-columns:repeat(6,1fr)}.grid.doors4 > *{grid-column:span 2}.grid.doors4 > :nth-child(4){grid-column:span 6}}
.grid.doors4 > .card.owner{background:transparent;border-style:dashed}
.kv2.tradegets{margin:18px 0 6px;padding-top:16px;border-top:1px solid var(--line)}
.kv2.tradegets dd{font-size:13px}
/* v2.3 · model page: 3D and wall together; compare two finishes on one wall */
.pd-label{font-size:12.5px;color:var(--soft);margin:0 0 10px}
.pd-view + .pd-view{margin-top:28px}
@media(min-width:1000px){.pd-info{position:sticky;top:24px}}
.pd-brand a{border-bottom:1px solid var(--line);color:inherit}
.cmp-open{margin-top:14px;font-family:var(--mono);font-size:12.5px;font-weight:600;min-height:40px;padding:0 14px;border:1px solid var(--ink);border-radius:20px;background:transparent;color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;gap:10px;transition:border-color var(--t),color var(--t)}
.cmp-open::before{content:"";width:24px;height:12px;border-radius:6px;border:1px solid rgba(0,0,0,.2);background:linear-gradient(90deg,#B4925A 0 50%,#B9BBBD 50% 100%)}
.cmp-open:hover{border-color:var(--acc);color:var(--acc)}
.cmp-dlg{border:0;padding:0;border-radius:22px;width:min(1180px,calc(100vw - 24px));max-width:none;max-height:calc(100vh - 24px);background:var(--card);color:var(--ink);box-shadow:0 30px 80px rgba(0,0,0,.35);overflow:auto}
.cmp-dlg::backdrop{background:rgba(10,10,10,.6)}
.cmp-in{padding:clamp(18px,3vw,30px)}
.cmp-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.cmp-head h2{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3vw,36px);line-height:1.15;margin:0 0 6px}
.cmp-sub{font-size:13px;color:var(--soft);margin:0;max-width:72ch}
.cmp-walls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:18px 0 16px}
.cmp-walls[hidden]{display:none}
.cmp-walls-h{font-size:12.5px;color:var(--soft);margin-inline-end:4px}
.wallchip{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12.5px;min-height:38px;padding:0 12px;border:1px solid #CFCFCF;border-radius:20px;background:var(--card);cursor:pointer;color:var(--ink)}
.wallchip i{width:16px;height:16px;border-radius:50%;background:var(--wl);border:1px solid rgba(0,0,0,.15)}
.wallchip.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.cmp-panes{display:grid;gap:18px}
@media(min-width:760px){.cmp-panes{grid-template-columns:1fr 1fr}}
.cmp-pick{margin-top:12px}
.cmp-foot{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:space-between;margin-top:18px;border-top:1px solid var(--line);padding-top:16px}
.cmp-sync{font-size:13px;display:inline-flex;gap:8px;align-items:center;cursor:pointer}
.cmp-sync[hidden]{display:none}
/* v2.3 · products by brand */
.brandgrid{list-style:none;padding:0;margin:0;max-width:none;display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:720px){.brandgrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.brandgrid{grid-template-columns:repeat(3,1fr)}}
.brandgrid li{margin:0}
.brandcard{display:flex;flex-direction:column;gap:10px;height:100%;background:var(--card);border:1px solid var(--line);border-radius:var(--rp);padding:clamp(20px,2.6vw,30px);color:inherit;transition:box-shadow var(--t),transform var(--t)}
.brandcard:hover{color:inherit;box-shadow:0 0 0 1.5px var(--acc),0 10px 26px rgba(0,0,0,.07);transform:translateY(-2px)}
.bc-name{font-family:var(--serif);font-size:clamp(30px,3vw,40px);line-height:1.05}
.bc-line{font-size:13.5px;color:#333;max-width:40ch}
.bc-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:6px}
.bc-thumbs img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:10px;background:#e9e6e0}
.bc-count{margin-top:auto;padding-top:8px;font-size:12.5px;font-weight:600}
.bytype{padding-bottom:0}
.bytype .chips{margin-top:14px}
.pfam-h{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.4vw,30px);margin:0}
.pbrand{font-size:12px;color:var(--soft);margin:0 0 2px}
.otherbrands .pfam-head a{border-bottom:1px solid var(--line)}
/* the by-type list under the brands: smaller cards, more per row */
.pgrid.compact{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:720px){.pgrid.compact{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:1040px){.pgrid.compact{grid-template-columns:repeat(5,minmax(0,1fr))}}
.pgrid.compact .pmeta p:not(.pbrand){display:none}
.pgrid.compact .pmeta h3{font-size:18px}
/* the comparison on a phone: both views side by side, walls in one scrolling row */
@media(max-width:759px){
  .cmp-panes{grid-template-columns:1fr 1fr;gap:10px}
  .cmp-pane .p3d{aspect-ratio:3/4}
  .cmp-walls{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(-1 * clamp(18px,3vw,30px));padding:0 clamp(18px,3vw,30px) 4px;scrollbar-width:none}
  .cmp-walls::-webkit-scrollbar{display:none}
  .wallchip{white-space:nowrap;flex:none}
  .cmp-pick .swatches.big{gap:6px}
  .cmp-pick .swatches.big .sw{width:26px;height:26px}
  .cmp-pick .picker-h span{display:block;margin:2px 0 0}
}
.cmp-walls-h{white-space:nowrap}
/* v2.4 · side by side: each side picks its own device of the category */
.cmp-model-h{display:inline-block;font-size:12px;font-weight:600;color:var(--paper);background:var(--ink);border-radius:6px;padding:1px 8px;margin-bottom:8px}
.cmp-model{display:block;width:100%;font-family:var(--mono);font-size:13.5px;min-height:44px;padding:0 36px 0 12px;border:1px solid #CFCFCF;border-radius:10px;background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230A0A0A' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 14px center;color:var(--ink);-webkit-appearance:none;appearance:none;margin-bottom:14px;cursor:pointer}
.cmp-model:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.opts.small{gap:6px;margin-top:2px}
.opts.small .opt{min-width:44px;min-height:38px;font-size:13px;padding:0 10px}
.cmp-pick .picker-h[hidden],.cmp-pick .opts[hidden]{display:none}
.cmp-pick .picker-h{margin-top:4px}
@media(max-width:759px){.cmp-model{font-size:12px;padding:0 28px 0 8px;background-position:right 8px center}}


/* photo and 3D side by side (material check, 8 Oct) */
.pmatch{margin:6px 0 40px;padding:22px;border:1px solid var(--line);border-radius:20px;background:var(--card)}
.pmatch-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px 24px;flex-wrap:wrap;margin-bottom:16px}
.pmatch-head h2{font-size:20px;line-height:1.3;margin:0}
.pmatch-head p{margin:0;color:var(--soft);font-size:14px;max-width:52ch}
.pmatch-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
.pmatch-photo,.pmatch-3d{margin:0;display:flex;flex-direction:column;gap:10px;min-width:0}
.pmatch-photo img{display:block;width:100%;aspect-ratio:1/1;object-fit:contain;background:#fff;border-radius:14px;border:1px solid var(--line)}
.pmatch-photo img[hidden],.pmatch-none[hidden]{display:none}
.pmatch-none{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;border-radius:14px;background:var(--paper);color:var(--soft);margin:0;padding:24px;text-align:center;font-size:14px}
.pmatch .p3d{aspect-ratio:1/1;border-radius:14px;background:#fff;border:1px solid var(--line)}
.pmatch-ctl{display:flex;gap:8px;flex-wrap:wrap}
.pmatch-ctl .btn[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.pmatch figcaption,.pmatch-cap{font-size:13px;color:var(--soft);margin:0}
.pmatch .notice{margin-top:16px}
@media(max-width:760px){.pmatch{padding:16px}.pmatch-grid{grid-template-columns:minmax(0,1fr)}}

/* Gulf map (9 Oct 2026): dots are round-capped zero-length strokes, grouped; legend rows open to the community list */
.uaemap .m-dots path{fill:none;stroke-linecap:round}
.uaemap .m-dots path.g{stroke:#3A3A3A;stroke-width:3.2}
.uaemap .m-ctx path{fill:none;stroke:#1B1B1B;stroke-width:2.6;stroke-linecap:round}
.gulfmap .m-labels text{font-size:13px}
.uaemap .m-labels text.cty{font-size:9.5px;letter-spacing:.32em;fill:#5A5A5A;stroke-width:3px}
@media(max-width:640px){.gulfmap .m-labels text{font-size:19px;stroke-width:5px}.gulfmap .m-labels text.cty{display:none}}
.mapcap{font-family:var(--mono);font-size:12px;letter-spacing:.2px;color:var(--herosub);margin:22px 0 0}
.maplegend details{width:100%}
.maplegend summary{display:flex;justify-content:space-between;gap:20px;cursor:pointer;list-style:none;min-height:24px;align-items:center}
.maplegend summary::-webkit-details-marker{display:none}
.maplegend summary span::after{content:"+";margin-inline-start:10px;color:var(--herosub)}
.maplegend details[open] summary span::after{content:"−"}
.maplegend summary small{font-size:11.5px;color:var(--herosub);margin-inline-start:6px}
.maplegend details p{margin:8px 0 2px;font-size:12.5px;line-height:1.7;color:var(--herostory)}
.maplegend details p span{display:inline-block;margin-inline-end:14px;white-space:nowrap}
.maplegend details p i{font-style:normal;color:var(--herosub)}
.mapband.light .mapcap,.mapband.light .maplegend summary small,.mapband.light .maplegend summary span::after,.mapband.light .maplegend details p i{color:var(--soft)}
.mapband.light .maplegend details p{color:var(--ink)}
.mapband.light .uaemap .m-dots path.g{stroke:#CDCDCD}
.mapband.light .uaemap .m-ctx path{stroke:#E7E7E7}
.mapband.light .uaemap .m-labels text.cty{fill:#9A9A9A}

/* ==================== How it works (redesign, 9 Oct 2026): the villa-day hero is hero experiment B; drawing and data in dayvilla.py, script setupDay() in site.js ==================== */
.dy-sec{padding:4px 0 28px}
.dy{--day:0;position:relative;margin:0 clamp(8px,1vw,14px);background:#0A0A0A;color:var(--paper);border-radius:26px;overflow:hidden;isolation:isolate;transition:background-color 1.2s linear}
.dy::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(244,244,244,.055) 1px,transparent 1.2px);background-size:14px 14px;pointer-events:none;z-index:0}
.dy-in{position:relative;z-index:1;max-width:1444px;margin:0 auto;padding:clamp(28px,4.2vw,56px) clamp(20px,4.2vw,62px) 10px}
.dy-row1{display:grid;gap:18px 56px}
@media(min-width:960px){.dy-row1{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}.dy-pitch{padding-top:30px}}
.dy-kicker{font-size:12.5px;color:var(--herosub);margin:0 0 20px}
.dy-head{width:min(100%,560px);line-height:0}
.dy-head svg{display:block;width:100%;height:auto;fill:var(--paper)}
.dy-head .a{fill:var(--acc-ink)}
.js .dy-head circle{transform-box:fill-box;transform-origin:center;animation:dypop .5s cubic-bezier(.2,1.6,.35,1) both;animation-delay:calc(var(--d) * 9ms + 80ms)}
@keyframes dypop{from{transform:scale(0)}to{transform:scale(1)}}
.dy-lead{font-family:var(--serif);font-size:clamp(20px,1.9vw,27px);line-height:1.34;color:var(--paper);max-width:40ch;margin:0 0 20px}
.dy-owner{margin:14px 0 0;font-size:13px;color:var(--herostory)}
.dy-owner a{color:var(--paper);border-bottom:1px solid rgba(244,244,244,.4)}
.dy-stage{margin:clamp(22px,3vw,34px) 0 0}
.dy-over{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:14px 28px;margin:0 0 14px}
.dy-draw{display:flex;flex-direction:column}
.dy-over{order:-1}
@media(min-width:1200px){.dy-over{position:absolute;left:0;right:0;top:0;align-items:flex-start;margin:0;pointer-events:none}.dy-over .dy-legend{flex-direction:column;align-items:flex-end;max-width:none}}
.dy-over > *{pointer-events:auto}
.dy-row3{display:grid;gap:18px 56px;margin:16px 0 0}
@media(min-width:960px){.dy-row3{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}}
/* top row: the clock and the systems */
.dy-eb{display:block;font-size:11px;color:var(--herosub);margin:0 0 10px;letter-spacing:.02em}
.clk{display:block;width:clamp(150px,14vw,200px);height:auto;overflow:visible}
.clk circle{fill:#262626;transform-box:fill-box;transform-origin:center;transition:fill .12s linear,transform .12s linear}
.clk circle.on{fill:var(--paper);transform:scale(1.5)}
.dy-card{margin:0;min-height:112px;transition:opacity .35s ease}
.dy-card.swap{opacity:0}
.dy-line{margin:0 0 6px;display:flex;align-items:baseline;gap:14px}
.dy-when{font-size:12px;color:var(--herosub);letter-spacing:.04em}
.dy-title{font-family:var(--serif);font-size:clamp(23px,2.1vw,30px);line-height:1.1;color:var(--paper)}
.dy-text{font-size:12.5px;line-height:1.6;color:var(--herostory);margin:0 0 6px;max-width:74ch}
.dy-by{font-size:11px;color:var(--herosub);margin:0}
/* the drawing */
.dy-draw{position:relative;margin:0}
.dv-svg{display:block;width:100%;height:auto;overflow:visible;--ln:#5E5E5E;--ln2:#404040;--lab:#7A7A7A;--dim:#555555}
.dv-svg .arc{stroke:#262626;stroke-width:1;stroke-dasharray:2 6}
.dv-svg .sun{fill:var(--paper);transition:opacity .6s}
.dv-svg .moon{fill:none;stroke:var(--paper);stroke-width:1.4;transition:opacity .6s}
.dv-svg .ground{stroke:var(--ln);stroke-width:1.2}
.dv-svg .under,.dv-svg .water{stroke:#2E2E2E;stroke-width:2.2;stroke-linecap:round}
.dv-svg .water{stroke:#3A3A3A}
.dv-svg .shell .slab{fill:#161616;stroke:var(--ln);stroke-width:1}
.dv-svg .shell .wall{fill:#1C1C1C;stroke:var(--ln);stroke-width:1}
.dv-svg .shell .par{fill:none;stroke:var(--ln);stroke-width:1}
.dv-svg .shell .fc{stroke:var(--ln2);stroke-width:1;stroke-dasharray:3 3;fill:none}
.dv-svg .shell .part,.dv-svg .shell .stair{stroke:var(--ln2);stroke-width:1.1;fill:none}
.dv-svg .rl{font-family:var(--mono);font-size:9px;letter-spacing:.08em;fill:var(--lab)}
.dv-svg .obj rect,.dv-svg .obj path{fill:#141414;stroke:var(--ln);stroke-width:1}
.dv-svg .obj #gate path{fill:none}
.dv-svg .obj path:not([class]){fill:none}
.dv-svg #gate{transition:transform 1.1s cubic-bezier(.6,0,.25,1)}
.dv-svg #gate.open{transform:translateX(62px)}
.dv-svg #gdoor{transition:transform 1.3s cubic-bezier(.6,0,.25,1)}
.dv-svg #gdoor.open{transform:translateY(-76px)}
.dv-svg .fill{fill:var(--paper);opacity:0;transition:opacity 1s ease}
.dv-svg .spill path{stroke:var(--paper);stroke-width:2;stroke-linecap:round}
.dv-svg .spill{opacity:0;transition:opacity 1s ease}
.dv-svg .lp{fill:#3A3A3A;transition:fill .8s ease}
.dv-svg .lp.on{fill:var(--paper)}
.dv-svg .dev{transition:opacity .3s ease}
.dv-svg .dev rect,.dv-svg .dev circle,.dv-svg .dev path{fill:#121212;stroke:var(--dim);stroke-width:1.2;transition:stroke .5s ease,fill .5s ease,opacity .5s ease}
.dv-svg .dev .c{fill:var(--dim);stroke:none}
.dv-svg .dev .solid{fill:var(--dim);stroke:none}
.dv-svg .dev .ro{font-family:var(--mono);font-size:10px;fill:var(--paper);stroke:none;opacity:0;transition:opacity .5s}
.dv-svg .dev.show .ro{opacity:1}
.dv-svg .dev .cov{fill:none;stroke:var(--paper);stroke-width:1;stroke-dasharray:2 4;opacity:0}
.dv-svg .dev .snd,.dv-svg .dev .air{fill:none;stroke:var(--paper);stroke-width:1.1;opacity:0;stroke-linecap:round}
.dv-svg .dev .air{stroke-width:2.2}
.dv-svg .dev .cone{fill:rgba(244,244,244,.04);stroke:rgba(244,244,244,.38);stroke-width:.8;stroke-dasharray:3 3;opacity:0}
.dv-svg .dev.on rect,.dv-svg .dev.on circle:not(.cov),.dv-svg .dev.on path:not(.snd):not(.cone):not(.air){stroke:var(--paper)}
.dv-svg .dev.on .c,.dv-svg .dev.on .solid{fill:var(--paper)}
.dv-svg .dev.on .snd,.dv-svg .dev.on .air{opacity:.75}
.dv-svg .dev.wifi .cov{opacity:.5}
.dv-svg .dev.armed .cone{opacity:1}
.dv-svg .dev.armed circle:not(.c){stroke:var(--paper)}
.dv-svg .k-lock.locked circle{fill:var(--paper);stroke:var(--paper)}
.dv-svg .dev.trig rect,.dv-svg .dev.trig circle:not(.cov):not(.c):not(.hit),.dv-svg .dev.trig path:not(.snd):not(.cone):not(.air){stroke:var(--paper);stroke-width:2}
.dv-svg .dev.trig .c,.dv-svg .dev.trig .solid{fill:var(--paper)}
.dv-svg .dev.trig rect{fill:var(--paper)}
.dv-svg .k-rack rect{fill:#141414}
.dv-svg .k-fcu.run rect{stroke:#7A7A7A}
.dv-svg .k-fcu.run .air{opacity:.35}
.dv-svg .k-rack path{stroke:#3A3A3A}
.dv-svg .live{fill:var(--acc-ink);filter:drop-shadow(0 0 4px rgba(255,87,5,.7))}
.dv-svg .sig path{fill:none;stroke-width:2.2;stroke-linecap:round}
.dv-svg .sig path.up{stroke:var(--acc-ink)}
.dv-svg .sig path.down{stroke:var(--paper)}
.dv-svg .tray{fill:none;stroke:#242424;stroke-width:1}
.dv-svg .furn rect,.dv-svg .furn path,.dv-svg .furn circle{fill:none;stroke:var(--ln2);stroke-width:1}
.dv-svg #car{transition:transform 1.8s cubic-bezier(.55,0,.25,1),opacity 1.8s ease}
.dv-svg #car.away{transform:translateX(-150px);opacity:0}
.dv-svg .dev .hit{fill:transparent!important;stroke:none!important;cursor:pointer}
.dv-svg .dev .cone,.dv-svg .dev .cov,.dv-svg .dev .snd,.dv-svg .dev .air,.dv-svg .dev .ro{pointer-events:none}
.dv-svg.instant *{transition:none!important}
/* one system on its own */
.dv-svg.iso .dev{opacity:.12}
.dv-svg.iso-network .sys-network,.dv-svg.iso-lighting .sys-lighting,.dv-svg.iso-climate .sys-climate,.dv-svg.iso-access .sys-access,.dv-svg.iso-security .sys-security,.dv-svg.iso-audio .sys-audio{opacity:1}
.dv-svg.iso:not(.iso-lighting) .lp,.dv-svg.iso:not(.iso-lighting) .spill,.dv-svg.iso:not(.iso-lighting) .fill{opacity:.12}
.dv-svg.iso .lp{transition:fill .8s ease,opacity .3s}
/* a system on its own also shows what it covers */
.dv-svg.iso-security .dev .cone{opacity:1}
.dv-svg.iso-network .dev .cov{opacity:.55}
.dv-svg.iso-audio .dev .snd,.dv-svg.iso-climate .dev .air{opacity:.7}
.dv-svg.iso-lighting .lp:not(.on){fill:#8A8A8A}
.dv-svg.iso-network .sys-network rect,.dv-svg.iso-network .sys-network circle:not(.cov):not(.hit),.dv-svg.iso-lighting .sys-lighting rect,.dv-svg.iso-lighting .sys-lighting path,
.dv-svg.iso-climate .sys-climate rect,.dv-svg.iso-access .sys-access rect,.dv-svg.iso-access .sys-access circle:not(.hit),.dv-svg.iso-security .sys-security circle:not(.hit),
.dv-svg.iso-audio .sys-audio circle:not(.hit){stroke:var(--paper)}
.dv-svg.iso-climate .sys-climate .solid{fill:var(--paper)}
.dy-tip{position:absolute;z-index:3;left:0;top:0;pointer-events:none;background:#121212;border:1px solid var(--line-ink);border-radius:10px;padding:7px 11px 8px;font-size:11.5px;line-height:1.5;color:var(--herostory);width:max-content;max-width:230px;opacity:0;transition:opacity .15s}
.dy-tip.on{opacity:1}
.dy-tip b{display:block;color:var(--paper);font-weight:600}
/* timeline */
.dy-tl{margin:12px 0 0;user-select:none;-webkit-user-select:none}
.tl-bar{position:relative;height:26px;border-top:1px solid var(--line-ink);border-bottom:1px solid var(--line-ink);cursor:ew-resize;touch-action:none}
.tl-night{position:absolute;top:0;bottom:0;background:rgba(244,244,244,.035);pointer-events:none}
.tl-night.a{left:0;width:calc(360 / 1440 * 100%)}
.tl-night.b{left:calc(1110 / 1440 * 100%);right:0}
.tl-head{position:absolute;top:-5px;bottom:-5px;left:calc(var(--p,0) * 100%);width:1.5px;margin-left:-.75px;background:var(--paper);pointer-events:none}
.tl-head::before{content:"";position:absolute;top:-4px;left:-3.25px;width:8px;height:8px;border-radius:50%;background:var(--paper)}
.mk{position:absolute;top:50%;left:calc(var(--x) * 100%);width:22px;height:22px;margin:-11px 0 0 -11px;border:0;padding:0;background:transparent;cursor:pointer;border-radius:50%}
.mk::before{content:"";position:absolute;left:7px;top:7px;width:8px;height:8px;border-radius:50%;background:#5A5A5A;transition:background .3s,transform .3s}
.mk.done::before{background:#9A9A9A}
.mk.cur::before{background:var(--paper);transform:scale(1.3)}
.mk:hover::before,.mk:focus-visible::before{background:var(--acc-ink)}
.mk span{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:11px;color:var(--paper);background:#121212;border:1px solid var(--line-ink);border-radius:8px;padding:3px 8px;opacity:0;pointer-events:none;transition:opacity .15s}
.mk:hover span,.mk:focus-visible span{opacity:1}
.tl-hours{display:flex;justify-content:space-between;font-size:10.5px;color:var(--herosub);margin:5px 0 0}
.dy-legend{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px 8px;max-width:440px}
.dy-legend li{margin:0;display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--herostory);border:1px solid var(--line-ink);border-radius:16px;padding:4px 12px 4px 10px;cursor:pointer;transition:border-color .25s,color .25s;min-height:32px}
.dy-legend li i{width:7px;height:7px;border-radius:50%;background:#4A4A4A;transition:background .3s}
.dy-legend li.act i{background:var(--paper)}
.dy-legend li.hi{border-color:var(--acc-ink);color:var(--paper)}
.dy-legend li:hover{border-color:#5A5A5A}
.dy-cap{font-size:11.5px;color:#8A8A8A;margin:0}
.dy-pause{position:absolute;z-index:4;right:16px;bottom:14px;font-family:var(--mono);font-size:11px;color:var(--herosub);background:transparent;border:1px solid var(--line-ink);border-radius:14px;padding:4px 12px;cursor:pointer;min-height:30px}
.dy-pause:hover{color:var(--acc-ink);border-color:var(--acc-ink)}
@media(max-width:959px){.dy-legend{justify-content:flex-start}}
@media(max-width:600px){.dy{border-radius:20px}.dy-card{min-height:170px}.dv-svg .rl{display:none}.clk{width:180px}
  .dy-pause{position:relative;display:block;right:auto;bottom:auto;margin:0 auto 22px}}
@media(prefers-reduced-motion:reduce){.js .dy-head circle{animation:none}.dv-svg *{transition:none!important}}
.dy.hiw .dy-in{padding-bottom:clamp(26px,3.4vw,44px)}
.dy-aside .dy-cap + .dy-cap{margin-top:6px}
.dy-aside .dy-pause{position:static;display:inline-flex;align-items:center;margin-top:14px}
@media(max-width:600px){.dy-aside .dy-pause{display:inline-flex;margin:14px 0 0}}
/* the info film: plays when assets/film/how-it-works.mp4 is there; until then only the local preview shows the place for it */
.film-slot{display:grid;place-items:center;background:transparent;border:1.5px dashed #BDBDBD;padding:clamp(18px,3vw,40px);text-align:center}
.film-slot b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.4vw,30px);margin-bottom:10px}
.film-slot span{display:block;font-size:13px;line-height:1.6;color:var(--soft);max-width:62ch;margin:8px auto 0}
@media(max-width:700px){.film-slot{aspect-ratio:auto}}
.film-slot code{white-space:nowrap;font-family:var(--mono);font-size:12px;background:var(--card);border:1px solid var(--line);border-radius:6px;padding:1px 6px;color:var(--ink)}
/* four steps, each with a small drawing */
.hiw-4 > li{display:flex;flex-direction:column}
.hiw-art{display:block;width:100%;max-width:240px;height:auto;margin:0 0 18px;overflow:visible}
.hiw-art *{fill:none;stroke:#0A0A0A;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.hiw-art .w{stroke:#A8A8A8}
.hiw-art .card{fill:var(--card)}
.hiw-art .f{fill:#0A0A0A;stroke:none}
.hiw-art .b{stroke-width:2.6}
.hiw-art .dash{stroke:#A8A8A8;stroke-dasharray:3 4;transition:stroke var(--t)}
.hiw-art text{fill:#0A0A0A;stroke:none;font-family:var(--mono);font-size:9.5px}
.steps > li:hover .hiw-art .dash{stroke:var(--acc)}
.steps a{border-color:#BDBDBD}
.hiw-trade{margin:20px 0 0;font-size:13px;color:var(--soft);max-width:none}
.hiw-trade a{color:var(--ink);font-weight:600}
/* why it's different */
.hiw-four{display:grid;gap:26px 34px}
@media(min-width:720px){.hiw-four{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.hiw-four{grid-template-columns:repeat(4,1fr)}}
.hiw-four > div{border-top:1px solid var(--line-ink);padding-top:18px}
.hiw-four h3{color:var(--paper);margin:0 0 8px}
.hiw-four p{color:var(--herostory);font-size:13.5px;margin:0}
/* what it costs */
.hiw-note{margin:18px 0 0;font-size:13px;color:var(--soft);max-width:82ch}
.hiw-note a{color:var(--ink);font-weight:600}
/* the first questions */
.faq{border-top:1px solid var(--line);max-width:880px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:58px;padding:14px 0;font-weight:600;font-size:15px;line-height:1.45;transition:color var(--t)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font-size:22px;font-weight:400;line-height:1;color:var(--soft)}
.faq details[open] summary::after{content:"−"}
.faq summary:hover{color:var(--acc)}
.faq details p{margin:0 0 20px;font-size:14px;color:#333;max-width:70ch}
.faq details p a{font-weight:600}
/* How it works, Arabic: the drawing and the timeline stay left to right; the words around them follow the page */
.dy .dy-arh{font-size:clamp(34px,4.6vw,62px);line-height:1.25;color:var(--paper);margin:0}
[dir="rtl"] .dy-kicker{font-size:14px}
[dir="rtl"] .dy-lead{font-family:var(--arabic);font-size:clamp(18px,1.75vw,23px);line-height:1.75}
[dir="rtl"] .dy-eb{font-size:13px;letter-spacing:0}
[dir="rtl"] .dy-title{font-family:var(--arabic);font-weight:700;font-size:clamp(20px,1.9vw,26px)}
[dir="rtl"] .dy-text{font-size:14.5px;line-height:1.85}
[dir="rtl"] .dy-by{font-size:12.5px}
[dir="rtl"] .dy-cap{font-size:13px;line-height:1.8}
[dir="rtl"] .dy-legend li{font-size:13.5px}
[dir="rtl"] .dy-tip{font-size:13px;line-height:1.7}
[dir="rtl"] .mk span{font-size:12.5px}
[dir="rtl"] .dy-pause{font-family:var(--arabic);font-size:13px}
[dir="rtl"] .dv-svg .rl{font-family:var(--arabic);letter-spacing:0;font-size:10.5px}
[dir="rtl"] .hiw-art text.ar{font-family:var(--arabic);font-size:10.5px}
[dir="rtl"] .hiw-trade,[dir="rtl"] .hiw-note{font-size:14px}
[dir="rtl"] .hiw-four p,[dir="rtl"] .steps p{font-size:14.5px;line-height:1.8}
[dir="rtl"] .faq summary{font-size:16px}
[dir="rtl"] .faq details p{font-size:15px;line-height:1.85}
[dir="rtl"] .film-slot span{font-size:14px}
/* the system names sit over the sky: the sun and moon pass behind them, not through them */
.dy-legend li{background:var(--panel,#0A0A0A)}