/* Easy Smart inner pages — same world as the homepage: deep navy ground, stone hairlines,
   the lens from the mark, Noto Kufi, outlined round controls. */
:root{--deep:#001724;--navy:#00263A;--navy-2:#06324a;--stone:#B5ABA3;--paper:#F5F7F8;
  --txt:#fff;--soft:#D5DEE3;--muted:#9FB0BA;--hair:rgba(181,171,163,.28);--hair-2:rgba(255,255,255,.14);
  --panel:rgba(0,38,58,.55);--wa:#1f8f4e;--ok:#7fd1a0;--warn:#f0c27a;--bad:#f29a8f;
  --kufi:"Noto Kufi Arabic","Noto Sans",system-ui,sans-serif;--ease:cubic-bezier(.2,.7,.2,1)}
*{box-sizing:border-box}
html{direction:rtl;scroll-behavior:smooth}
body{margin:0;background:var(--deep);color:var(--txt);font-family:var(--kufi);font-size:16px;line-height:1.85;overflow-x:hidden}
img,video{max-width:100%}
a{color:var(--stone)}
h1,h2,h3{margin:0;line-height:1.4;font-weight:700;text-wrap:balance}
p{margin:0}
.wrap{max-width:1080px;margin:0 auto;padding-inline:clamp(16px,5vw,64px)}
:focus-visible{outline:2px solid var(--stone);outline-offset:3px}

/* page-wide atmosphere: the lens and a soft glow, fixed behind everything */
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(38rem 26rem at 72% 18%,rgba(181,171,163,.13),transparent 70%),linear-gradient(180deg,var(--navy) 0%,var(--deep) 60%)}
.lens{position:fixed;z-index:-1;inset-block:-10%;inset-inline-end:-26vmax;width:52vmax;height:120%;pointer-events:none;opacity:.9}
.lens .body{fill:var(--stone);fill-opacity:.07}
.lens .edge{fill:none;stroke:var(--stone);stroke-opacity:.45;stroke-width:1;vector-effect:non-scaling-stroke}
@media (prefers-reduced-motion:no-preference){.lens{animation:breathe 7s ease-in-out infinite alternate}}
@keyframes breathe{from{opacity:.5}to{opacity:1}}

/* ---------- top bar (as on the homepage) ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:1.1rem}
.brand{color:#fff;text-decoration:none;display:flex;flex-direction:column;align-items:center;line-height:1.1}
.brand small{font-family:"Noto Sans",sans-serif;font-size:clamp(1rem,2.4vw,1.35rem);letter-spacing:.32em;font-weight:500;padding-inline-start:.32em;border-bottom:1px solid rgba(255,255,255,.6);padding-bottom:.25rem;order:1}
.brand b{font-size:.78rem;font-weight:500;margin-top:.3rem;order:2}
.menu{position:relative}
.menu summary{list-style:none;cursor:pointer;display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:50%;border:1px solid rgba(255,255,255,.35)}
.menu summary span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.menu summary::-webkit-details-marker{display:none}
.menu summary i{display:block;width:1.1rem;height:1px;background:#fff;box-shadow:0 -5px 0 #fff,0 5px 0 #fff}
.menu nav{position:absolute;inset-inline-start:0;top:3.4rem;z-index:20;min-width:14rem;padding:.6rem;background:rgba(0,23,36,.96);border:1px solid var(--hair);border-radius:.9rem;display:flex;flex-direction:column;box-shadow:0 1.2rem 2.4rem rgba(0,10,16,.45)}
.menu nav a{color:#fff;text-decoration:none;padding:.45rem .7rem;border-radius:.6rem;font-size:.92rem}
.menu nav a:hover,.menu nav a[aria-current]{color:var(--stone)}
.menu nav hr{border:0;border-top:1px solid var(--hair);margin:.4rem 0}

/* ---------- hero ---------- */
.hero{position:relative}
.hgrid{padding-block:clamp(2rem,7vw,5rem) clamp(1.5rem,4vw,2.5rem);display:block}
.hero .copy{max-width:48rem}
.crumbs{font-size:.8rem;color:var(--muted);margin-bottom:.9rem}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--stone)}
.hero h1{font-size:clamp(1.7rem,4.6vw,3rem);line-height:1.35}
.hero.short h1{font-size:clamp(1.45rem,3.6vw,2.3rem)}
.hero .lead{margin-top:1.1rem;border-inline-start:2px solid var(--stone);padding-inline-start:1rem;color:var(--soft);max-width:44ch;font-size:.98rem}
.hline{height:2px;background:rgba(255,255,255,.18);overflow:hidden}
.hline i{display:block;height:100%;width:100%;background:var(--stone);transform-origin:right;animation:grow 1.6s var(--ease) .2s both}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* buttons: the homepage's two kinds */
.ctas{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.4rem}
.btn{display:inline-flex;align-items:center;gap:.55rem;min-height:3rem;padding:0 1.35rem;border-radius:.8rem;text-decoration:none;font-weight:500;font-size:.95rem;font-family:inherit;color:#fff;border:1px solid rgba(255,255,255,.55);background:rgba(0,23,36,.55);cursor:pointer;transition:border-color .2s,background .2s}
.btn svg{width:1.1em;height:1.1em}
.btn:hover{border-color:var(--stone)}
.btn.wa,.btn.light{background:#fff;color:var(--navy);border-color:#fff}
.btn.wa:hover,.btn.light:hover{background:var(--stone);border-color:var(--stone)}
.btn.ghost,.btn.line,.btn.navy{background:rgba(0,23,36,.55);color:#fff}

/* ---------- sections ---------- */
main{display:flex;flex-direction:column;gap:clamp(56px,8vw,96px);padding-block:clamp(32px,5vw,56px) clamp(56px,8vw,96px)}
.sec{display:flex;flex-direction:column;gap:18px}
.kicker{font-size:.8rem;color:var(--stone);letter-spacing:.02em}
.sec h2,.tool h2,.quote h2{font-size:clamp(1.25rem,2.6vw,1.7rem)}
.sub{color:var(--soft);max-width:60ch}
.reveal.in{animation:rise .8s var(--ease) both}
@keyframes rise{from{transform:translateY(16px)}to{transform:none}}

/* what we do: items on hairlines, the stone rule runs across on hover */
.do{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:0 32px}
.do .it{padding:18px 0;border-top:1px solid var(--hair);display:flex;flex-direction:column;gap:4px;position:relative}
.do .it::before{content:"";position:absolute;top:-1px;inset-inline-start:0;height:1px;width:0;background:var(--stone);transition:width .6s var(--ease)}
.do .it:hover::before{width:100%}
.do h3{font-size:1.02rem;font-weight:500}
.do p{color:var(--muted);font-size:.92rem}

/* interactive tool */
.tool{border:1px solid var(--hair);border-radius:1.2rem;padding:clamp(20px,4vw,36px);display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(20px,4vw,40px);background:var(--panel)}
.tool .sec{gap:12px}
.panel{display:flex;flex-direction:column;gap:14px;min-width:0}
.tool label{font-size:.85rem;color:var(--soft);display:flex;flex-direction:column;gap:6px}
.tool input,.tool select,.quote textarea,.search{font-family:inherit;font-size:1rem;padding:.65rem .9rem;border-radius:.8rem;border:1px solid rgba(255,255,255,.3);background:rgba(0,23,36,.6);color:#fff;color-scheme:dark;width:100%}
.tool input:focus,.tool select:focus,.quote textarea:focus,.search:focus{border-color:var(--stone);outline:none}
.row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.result{border-radius:.8rem;padding:14px 16px;border:1px solid var(--hair);font-size:.95rem;min-height:3.2rem;color:var(--soft)}
.result b{font-size:1.2rem;display:block;color:#fff;font-weight:500}
.result.ok{border-color:rgba(127,209,160,.5)}.result.ok b{color:var(--ok)}
.result.warn{border-color:rgba(240,194,122,.5)}.result.warn b{color:var(--warn)}
.result.bad{border-color:rgba(242,154,143,.5)}.result.bad b{color:var(--bad)}
.note{font-size:.78rem;color:var(--muted)}

/* checklists */
.check{display:flex;flex-direction:column}
.check label{flex-direction:row;align-items:flex-start;gap:12px;color:#fff;font-size:.95rem;padding:10px 2px;border-bottom:1px solid var(--hair-2);cursor:pointer}
.check input{appearance:none;-webkit-appearance:none;width:1.25rem;height:1.25rem;margin:.35rem 0 0;border-radius:50%;border:1px solid rgba(255,255,255,.55);flex:none;display:grid;place-items:center;cursor:pointer;background:transparent}
.check input:checked{background:var(--stone);border-color:var(--stone)}
.check input:checked::after{content:"✓";font-size:.75rem;color:var(--navy)}
.check label:has(input:checked) span{color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(255,255,255,.3)}
.prog{height:2px;background:rgba(255,255,255,.18);overflow:hidden}
.prog i{display:block;height:100%;width:0;background:var(--stone);transition:width .5s var(--ease)}
.progtxt{font-size:.82rem;color:var(--stone)}

/* order game */
.olist li{background:transparent!important;border:0!important;border-bottom:1px solid var(--hair-2)!important;border-radius:0!important;color:#fff}
.olist .btn{min-height:2.2rem;width:2.2rem;padding:0!important;justify-content:center;border-radius:50%}

/* areas */
.areas{display:flex;gap:10px;flex-wrap:wrap}
.areas span{border:1px solid rgba(255,255,255,.35);border-radius:1.4rem;padding:.35rem 1.1rem;font-size:.92rem}

/* faq */
.faq{display:flex;flex-direction:column;border-top:1px solid var(--hair)}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{list-style:none;cursor:pointer;padding:18px 0;font-weight:500;display:flex;justify-content:space-between;gap:12px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:2.2rem;height:2.2rem;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:linear-gradient(#fff,#fff) center/10px 1px no-repeat,linear-gradient(#fff,#fff) center/1px 10px no-repeat;transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg);border-color:var(--stone)}
.faq details p{color:var(--soft);padding-bottom:18px;max-width:65ch}

/* quote builder */
.quote{border:1px solid var(--hair);border-radius:1.2rem;padding:clamp(20px,4vw,36px);display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(20px,4vw,40px);background:var(--panel)}
.quote fieldset{border:0;padding:0;margin:0}
.quote legend{font-size:.85rem;color:var(--stone);margin-bottom:8px;padding:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{cursor:pointer}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips span{display:inline-block;padding:.4rem 1rem;border-radius:1.4rem;border:1px solid rgba(255,255,255,.3);font-size:.88rem;transition:all .2s}
.chips label:hover span{border-color:var(--stone)}
.chips input:checked+span{background:#fff;border-color:#fff;color:var(--navy)}
.chips input:focus-visible+span{outline:2px solid var(--stone);outline-offset:2px}
.qform{display:flex;flex-direction:column;gap:18px;min-width:0}
.qform>label{color:var(--stone)!important;font-weight:400!important;font-size:.85rem!important}
.qmsg{border-inline-start:2px solid var(--stone);padding:4px 14px;font-size:.88rem;color:var(--soft);white-space:pre-line}
.qsteps{display:flex;gap:6px}
.qsteps i{flex:1;height:2px;background:rgba(255,255,255,.18);transition:background .3s}
.qsteps i.on{background:var(--stone)}
.qhint{color:var(--muted)!important}

/* service cards: hairline list, not boxes */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr));gap:0 32px}
.card{display:flex;flex-direction:column;gap:8px;padding:22px 0;border-top:1px solid var(--hair);text-decoration:none;color:#fff;position:relative}
.card::before{content:"";position:absolute;top:-1px;inset-inline-start:0;height:2px;width:0;background:var(--stone);transition:width .6s var(--ease)}
.card:hover::before,.card:focus-visible::before{width:100%}
.ctop{padding:0;background:none;border:0}
.card h3{font-size:1.15rem;font-weight:500}
.cbody{display:flex;flex-direction:column;gap:8px;padding:0}
.card p{font-size:.9rem;color:var(--muted)}
.card ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:2px;font-size:.88rem;color:var(--soft)}
.card ul li::before{content:"— ";color:var(--stone)}
.card .go{font-size:.85rem;color:var(--stone);margin-top:6px}
.tool .card{border-top:0;padding:0}

/* question lists */
.qlist{display:flex;flex-direction:column;border-top:1px solid var(--hair)}
.qlist a{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:16px 0;border-bottom:1px solid var(--hair);text-decoration:none;color:#fff;transition:color .2s}
.qlist a::after{content:"←";flex:none;display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:50%;border:1px solid rgba(255,255,255,.35);font-size:.9rem;transition:border-color .2s}
.qlist a:hover{color:var(--stone)}
.qlist a:hover::after{border-color:var(--stone)}
.search{border-radius:1.6rem;padding:.8rem 1.2rem}
.tabs{display:flex;flex-wrap:wrap;gap:8px}
.tabs button{font-family:inherit;font-size:.88rem;padding:.4rem 1rem;border-radius:1.4rem;border:1px solid rgba(255,255,255,.3);background:transparent;cursor:pointer;color:#fff}
.tabs button[aria-pressed="true"]{background:#fff;border-color:#fff;color:var(--navy)}
.empty{color:var(--muted);padding:12px 0}

/* answer page */
.answer{font-size:clamp(1.05rem,2vw,1.25rem);line-height:2;border-inline-start:2px solid var(--stone);padding-inline-start:1.2rem;color:#fff;max-width:60ch}
.light-check label{color:#fff}
.helpful{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:.9rem}
.helpful button{font-family:inherit;font-size:.88rem;padding:.35rem 1rem;border-radius:1.4rem;border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff;cursor:pointer}
.helpful button:hover{border-color:var(--stone)}
.helpful .thanks{color:var(--stone)}

/* footer line + floating whatsapp (white disc, like the homepage icons) */
footer{border-top:1px solid var(--hair);color:var(--muted);font-size:.78rem}
footer .wrap{padding-block:1.2rem;display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between}
footer b{color:#fff;font-weight:500}
.fab{position:fixed;inset-inline-start:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:30;width:3.4rem;height:3.4rem;border-radius:50%;background:#fff;color:var(--navy);display:grid;place-items:center;box-shadow:0 .6rem 1.6rem rgba(0,10,16,.45)}
.fab:hover{background:var(--stone)}
.fab svg{width:1.5rem;height:1.5rem}

@media (max-width:820px){.tool,.quote{grid-template-columns:1fr}}
@media (max-width:480px){.row{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
[hidden]{display:none!important}
.more{display:flex;flex-wrap:wrap;gap:8px}
.more a{border:1px solid rgba(255,255,255,.3);border-radius:1.4rem;padding:.4rem 1rem;text-decoration:none;color:#fff;font-size:.88rem;transition:border-color .2s}
.more a:hover{border-color:var(--stone);color:var(--stone)}

/* ---- menu exactly like the homepage: two outlined circles, then a list of white discs with labels ---- */
.topbar{flex-direction:row}
.tools{display:flex;align-items:center;gap:.6rem;order:-1}
html[dir="rtl"] .tools,.tools{order:2}
.langsw{display:grid;place-items:center;width:3.4rem;height:3.4rem;border-radius:50%;border:1px solid rgba(255,255,255,.4);color:#fff;text-decoration:none;font-family:"Noto Sans",sans-serif;font-size:.95rem}
.langsw:hover{border-color:var(--stone)}
.menu summary{width:3.4rem;height:3.4rem;border-color:rgba(255,255,255,.4)}
.menu summary i{width:1.3rem;box-shadow:0 -6px 0 #fff,0 6px 0 #fff}
.menu[open] summary{border-color:var(--stone)}
.menu nav{position:fixed;top:6.2rem;inset-inline-start:clamp(16px,5vw,64px);inset-inline-end:auto;background:transparent;border:0;box-shadow:none;padding:.4rem 0;min-width:0;display:flex;flex-direction:column;gap:.7rem;z-index:40}
.menu[open]::before{content:"";position:fixed;inset:0;background:rgba(0,16,26,.78);z-index:39;backdrop-filter:blur(3px)}
.menu summary,.langsw{position:relative;z-index:41}
.menu nav a{display:flex;align-items:center;gap:.9rem;padding:0;border-radius:0;color:#fff;font-size:1.05rem;white-space:nowrap;flex-direction:row;justify-content:flex-start}
.menu nav a .ic{display:grid;place-items:center;width:3.6rem;height:3.6rem;border-radius:50%;background:#fff;color:var(--navy);flex:none;transition:background .2s}
.menu nav a .ic svg{width:1.45rem;height:1.45rem}
.menu nav a .lb{text-shadow:0 1px 3px rgba(0,16,26,.85)}
.menu nav a:hover .ic,.menu nav a:focus-visible .ic,.menu nav a[aria-current] .ic{background:var(--stone)}
.menu nav a:hover .lb,.menu nav a[aria-current] .lb{color:var(--stone)}
@media (prefers-reduced-motion:no-preference){
  .menu[open] nav a{animation:pop .3s cubic-bezier(.2,.8,.2,1) both}
  .menu[open] nav a:nth-child(2){animation-delay:.04s}.menu[open] nav a:nth-child(3){animation-delay:.08s}
  .menu[open] nav a:nth-child(4){animation-delay:.12s}.menu[open] nav a:nth-child(5){animation-delay:.16s}.menu[open] nav a:nth-child(6){animation-delay:.2s}}
@keyframes pop{from{opacity:0;transform:translateY(.5rem) scale(.9)}to{opacity:1;transform:none}}

/* ==== profile pages (2026-10-07): about, projects, certifications, plastering, profile ==== */

/* menu: ten links now. The page links stay a column of white discs; the three contact discs
   sit in one row under a hairline (as in the homepage's contact control). The list scrolls
   inside the viewport if it can't fit, and the discs step down a size on short screens. */
.menu nav{max-height:calc(100vh - 7rem);max-height:calc(100svh - 7rem);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;padding-inline-end:.6rem}
.menu nav::-webkit-scrollbar{display:none}
.menu nav .mrow{display:flex;gap:1.1rem;padding-top:.85rem;border-top:1px solid var(--hair)}
.menu nav .mrow a{flex-direction:column;gap:.35rem;font-size:.8rem}
.menu nav .mrow a .ic{width:3.2rem;height:3.2rem}
@media (max-height:860px){
  .menu nav{gap:.5rem;top:5.6rem}
  .menu nav a .ic{width:3rem;height:3rem}
  .menu nav a .ic svg{width:1.25rem;height:1.25rem}
  .menu nav a{font-size:.98rem}
  .menu nav .mrow a .ic{width:2.8rem;height:2.8rem}
}
@media (prefers-reduced-motion:no-preference){
  .menu[open] nav a:nth-child(7){animation-delay:.24s}.menu[open] nav .mrow a{animation-delay:.28s}}

/* photos note (profile page) */
.fig{margin:0;border-radius:1.2rem;overflow:hidden;border:1px solid var(--hair);background:var(--navy);position:relative}
.fig img{display:block;width:100%;height:auto;aspect-ratio:1200/670;object-fit:cover}
.fig figcaption{position:absolute;inset-inline-start:.7rem;bottom:.6rem;font-size:.7rem;line-height:1.6;color:#fff;background:rgba(0,23,36,.72);padding:.1rem .65rem;border-radius:1rem}
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(20px,4vw,48px);align-items:center}
.split .sec{gap:14px}
@media (max-width:820px){.split{grid-template-columns:1fr}}

/* small helpers */
.en-lbl{font-family:"Noto Sans",sans-serif;font-size:.7rem;letter-spacing:.2em;color:var(--stone);text-transform:uppercase;direction:ltr;unicode-bidi:isolate;text-align:right}
.sec>.en-lbl{margin-top:-14px}
.ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;color:var(--soft)}
.ticks li{padding-inline-start:1.3rem;position:relative}
.ticks li::before{content:"";position:absolute;inset-inline-start:0;top:.85em;width:.7rem;height:1px;background:var(--stone)}
.morelink{align-self:flex-start;color:var(--stone);text-decoration:none;font-size:.92rem;border-bottom:1px solid rgba(181,171,163,.5);padding-bottom:2px}
.morelink:hover{color:#fff;border-color:#fff}

/* numbered steps (send drawings, itemised quote, contract, staged handover) */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));gap:0 32px;counter-reset:st}
.steps li{counter-increment:st;padding:18px 0;border-top:1px solid var(--hair);display:flex;gap:14px;align-items:flex-start}
.steps li::before{content:counter(st);flex:none;width:2.4rem;height:2.4rem;border-radius:50%;background:var(--stone);color:var(--navy);display:grid;place-items:center;font-weight:700;font-family:"Noto Sans",sans-serif;font-size:.95rem}
.steps b{display:block;font-weight:500}
.steps span{display:block;color:var(--muted);font-size:.9rem}

/* the two halves of "why us" */
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));gap:20px}
.pillar{border:1px solid var(--hair);border-radius:1.2rem;padding:clamp(18px,3vw,28px);background:var(--panel);display:flex;flex-direction:column;gap:6px}
.pillar>h3{font-size:1.15rem}
.pillar .pt{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-top:1px solid var(--hair-2)}
.pillar .pt:first-of-type{margin-top:6px}
.pillar .pt .ico{flex:none;width:2.6rem;height:2.6rem;border-radius:50%;border:1px solid rgba(255,255,255,.4);display:grid;place-items:center;color:#fff}
.pillar .pt .ico svg{width:1.2rem;height:1.2rem}
.pillar .pt b{display:block;font-weight:500}
.pillar .pt span{display:block;color:var(--muted);font-size:.88rem}

/* vision band */
.band{border:1px solid var(--hair);border-radius:1.2rem;padding:clamp(24px,5vw,48px) clamp(16px,4vw,40px);text-align:center;background:var(--panel);display:flex;flex-direction:column;gap:8px;align-items:center}
.band .big{font-size:clamp(1.3rem,3.8vw,2.1rem);font-weight:700;line-height:1.5}
.band .en{font-family:"Noto Sans",sans-serif;color:var(--muted);font-size:.85rem;letter-spacing:.06em}

/* official details */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:0 32px;margin:0}
.facts>div{padding:16px 0;border-top:1px solid var(--hair);display:flex;flex-direction:column;gap:2px}
.facts dt{font-size:.8rem;color:var(--stone)}
.facts dd{margin:0;font-size:1.05rem;overflow-wrap:anywhere}
.facts dd small{display:block;color:var(--muted);font-size:.8rem;text-align:right}

/* profile: cover hero over a photo */
.hero .bgimg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.hero .bgimg img{width:100%;height:100%;object-fit:cover;opacity:.42;display:block}
.hero .bgimg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,23,36,.55) 0%,rgba(0,23,36,.35) 35%,var(--deep) 96%)}
.mark{display:inline-flex;flex-direction:column;align-items:center;gap:.35rem;margin-bottom:1.2rem}
.mark .lat{font-family:"Noto Sans",sans-serif;font-weight:500;letter-spacing:.3em;padding-inline-start:.3em;font-size:clamp(1.7rem,7.4vw,3.4rem);line-height:1.1;border-bottom:1px solid rgba(255,255,255,.6);padding-bottom:.35rem}
.mark .ar{font-size:clamp(.95rem,3vw,1.2rem);color:var(--soft)}
.hero.cover h1{font-size:clamp(1.45rem,5.4vw,2.6rem)}
.hero.cover .slogan-en{text-align:right;font-family:"Noto Sans",sans-serif;font-size:clamp(.62rem,2.4vw,.78rem);letter-spacing:.22em;color:var(--stone);text-transform:uppercase;margin-top:.4rem}
.jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:1.4rem}
.jump a{border:1px solid rgba(255,255,255,.3);border-radius:1.4rem;padding:.3rem .9rem;text-decoration:none;color:#fff;font-size:.84rem;background:rgba(0,23,36,.45)}
.jump a:hover{border-color:var(--stone);color:var(--stone)}
[id]{scroll-margin-top:1rem}

/* profile: service tiles with photos (stacked on desktop, side by side on phones) */
.plist{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15.5rem),1fr));gap:18px}
.pitem{display:flex;flex-direction:column;text-decoration:none;color:#fff;border:1px solid var(--hair);border-radius:1rem;overflow:hidden;background:var(--panel);transition:border-color .2s}
.pitem:hover,.pitem:focus-visible{border-color:var(--stone)}
.pitem img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--navy)}
.pitem .t{padding:14px 16px 16px;display:flex;flex-direction:column;gap:3px;flex:1}
.pitem h3{font-size:1.05rem;font-weight:500}
.pitem p{font-size:.86rem;color:var(--muted);line-height:1.7}
.pitem .go{font-size:.82rem;color:var(--stone);margin-top:6px}
@media (max-width:560px){
  .plist{gap:12px}
  .pitem{flex-direction:row;align-items:stretch}
  .pitem img{width:36%;flex:none;aspect-ratio:auto;height:auto;min-height:7.5rem}
  .pitem .t{padding:10px 14px 12px}
  .pitem h3{font-size:.98rem}
  .pitem p{font-size:.82rem}
}
.oneplace{container-type:inline-size;border-radius:1rem;padding:clamp(18px,3vw,26px);border:1px solid var(--hair);display:flex;flex-direction:column;justify-content:center;gap:6px;background:linear-gradient(135deg,var(--navy),var(--deep))}
.oneplace b{font-size:clamp(.9rem,5.6cqi,1.3rem);font-weight:700;white-space:nowrap}

/* profile: contact block */
.contacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));border:1px solid var(--hair);border-radius:1.2rem;overflow:hidden}
.contacts a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:18px 12px;text-decoration:none;color:#fff;text-align:center;border-inline-start:1px solid var(--hair)}
.contacts a:first-child{border-inline-start:0}
.contacts a:hover b{color:var(--stone)}
.contacts span{font-size:.8rem;color:var(--stone)}
.contacts b{font-weight:500;font-size:1.05rem;direction:ltr;unicode-bidi:isolate}
@media (max-width:640px){.contacts a{border-inline-start:0;border-top:1px solid var(--hair)}.contacts a:first-child{border-top:0}}
.note-ill{font-size:.75rem;color:var(--muted);text-align:center}
.nw{white-space:nowrap}

/* ==== header (Mohammed, 2026-10-07): the two circles sit UNDER the brand, on its side —
   right in Arabic, left in English — as on the homepage. The menu list drops below them. ==== */
.topbar{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:.75rem}
.menu nav{top:9rem;max-height:calc(100vh - 10rem);max-height:calc(100svh - 10rem)}
@media (max-height:860px){.menu nav{top:8.6rem}}

/* ==== English pages (2026-10-07): the same world, mirrored — left-to-right, Noto Sans ==== */
html[dir="ltr"]{direction:ltr}
html[lang="en"]{--kufi:"Noto Sans",system-ui,sans-serif}
html[lang="en"] h1,html[lang="en"] h2,html[lang="en"] h3{letter-spacing:-.01em}
html[dir="ltr"] .lens{transform:scaleX(-1)}
html[dir="ltr"] .hline i{transform-origin:left}
html[dir="ltr"] .qlist a::after{content:"→"}
html[dir="ltr"] .en-lbl,html[dir="ltr"] .facts dd small,html[dir="ltr"] .hero.cover .slogan-en{text-align:left}
html[lang="en"] .langsw{font-family:"Noto Kufi Arabic",sans-serif}
/* English pages: the small English echoes under Arabic headings would only repeat the heading */
html[lang="en"] .en-lbl,html[lang="en"] .band .en,html[lang="en"] .hero.cover .slogan-en{display:none}

/* quote form (Mohammed, 2026-10-08: "here it's a mess"): the choices sit in an even grid of equal
   buttons instead of a ragged wrap — two columns on a phone, an odd last choice takes the full row */
.chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));gap:10px}
.chips label{display:flex}
.chips span{display:flex;align-items:center;justify-content:center;width:100%;min-height:2.9rem;padding:.45rem .8rem;text-align:center;line-height:1.4}
@media(max-width:40rem){.chips{grid-template-columns:1fr 1fr}.chips label:last-child:nth-child(odd){grid-column:1/-1}}
/* the FAQ category tabs follow the same even grid: three across on a phone, one tidy row-grid on a laptop */
.tabs{display:grid;grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr));gap:10px}
.tabs button{min-height:2.75rem;padding:.4rem .6rem;text-align:center;line-height:1.35}
@media(max-width:40rem){.tabs{grid-template-columns:repeat(3,1fr)}.tabs button{font-size:.82rem}}
/* the brand is the real logo (Mohammed, 2026-10-08: "wrong logo") — the same drawing as the homepage */
.brand .logo{display:block;width:clamp(8.5rem,20vw,12rem);height:auto}

/* ---- longer FAQ answers (2026-10-11) ---- */
.fl-eg{border-inline-start:2px solid var(--stone);padding:.4rem 1.1rem;background:rgba(181,171,163,.08);border-radius:.4rem;max-width:64ch}
.fl-eg b{display:block;color:var(--stone);font-size:.85rem;font-weight:600;margin-bottom:.3rem}
.fl-eg p{margin:0;color:var(--soft);line-height:1.95}
.fl-ol{list-style:none;margin:0;padding:0;counter-reset:fl;display:flex;flex-direction:column;gap:14px;max-width:64ch}
.fl-ol li{counter-increment:fl;display:flex;gap:14px;align-items:flex-start;color:var(--soft);line-height:1.9}
.fl-ol li::before{content:counter(fl);flex:none;width:2rem;height:2rem;border-radius:50%;border:1px solid var(--stone);color:var(--stone);display:grid;place-items:center;font-family:"Noto Sans",sans-serif;font-size:.9rem}
/* quiet backdrop (Mohammed, 2026-10-15, ideas 1+6): a soft grain over the navy, and the brand mark very faint behind the plain
   sections, a different place and size in each so it never repeats the same way. Text sits above it (z-index -1, isolated). */
body{background-color:var(--deep);background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22220%22 height=%22220%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.9%22 numOctaves=%222%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 .71  0 0 0 0 .67  0 0 0 0 .64  0 0 0 .55 0%22/%3E%3C/filter%3E%3Crect width=%22220%22 height=%22220%22 filter=%22url%28%23n%29%22 opacity=%22.14%22/%3E%3C/svg%3E"),radial-gradient(60rem 36rem at 10% 4%,rgba(181,171,163,.11),transparent 70%),radial-gradient(52rem 32rem at 94% 62%,rgba(54,98,126,.26),transparent 70%);background-repeat:repeat,no-repeat,no-repeat;background-size:220px 220px,auto,auto}
main>.sec{position:relative;isolation:isolate}
/* the mark is only ever put in the free margin beside the 1080px column, on screens wide enough to have one (1600px+), alternating
   sides and heights; on anything narrower it is hidden and only the grain stays, so it can never sit behind text */
main>.sec::before{content:"";display:none}
@media(min-width:1600px){
main>.sec::before{display:block;position:absolute;z-index:-1;pointer-events:none;width:calc((100vw - 100%)/2 - 4rem);aspect-ratio:3.5;background:url(/assets/es-mark.svg) center/contain no-repeat;opacity:.1;inset-inline-end:calc(100% + 1.5rem);top:6%}
main>.sec:nth-of-type(3n+2)::before{inset-inline-end:auto;inset-inline-start:calc(100% + 1.5rem);top:38%}
main>.sec:nth-of-type(3n)::before{top:66%}
}
@media print{main>.sec::before{display:none}}
/* the tagline, once at the foot of the page (2026-10-17): small, beige, never a headline */
footer .ftag{flex:1 1 100%;text-align:center;color:var(--stone);font-size:.82rem;letter-spacing:.01em;padding-top:.6rem;border-top:1px solid var(--hair);margin-top:.2rem}

/* ==== phone and tablet, tidy and compact (Mohammed 2026-10-20: «الموقع من الجوال مو تمام»; «حاول تحاكي الموقع على اللاب توب»)
   The laptop page is the reference: same order of sections, same calm weight. On a phone the header circles
   are 44px (the touch minimum) instead of 54px, the heading steps down, the page margins are even, and every
   tap target reaches 44px. Desktop (821px and up) is not touched by this block. ==== */
@media (max-width:820px){
  .wrap{padding-inline:clamp(22px,6vw,48px)}
  .topbar{gap:.55rem;padding-block:.9rem .8rem}
  .brand{min-height:2.75rem;justify-content:center}
  .brand .logo{width:8rem}
  .langsw,.menu summary{width:2.75rem;height:2.75rem}
  .langsw{font-size:.85rem}
  .menu summary i{width:1.05rem;box-shadow:0 -5px 0 #fff,0 5px 0 #fff}
  .menu nav{inset-inline-start:clamp(22px,6vw,48px);top:7.4rem;max-height:calc(100vh - 8.4rem);max-height:calc(100svh - 8.4rem);gap:.5rem}
  .menu nav a .ic,.menu nav .mrow a .ic{width:2.9rem;height:2.9rem}
  .menu nav a .ic svg{width:1.2rem;height:1.2rem}
  .menu nav a{font-size:.98rem}
  .hgrid{padding-block:1.4rem 1.4rem}
  .crumbs{margin-bottom:.6rem}
  .hero h1,.hero.short h1,.hero.cover h1{font-size:clamp(1.45rem,5.4vw,2.1rem);line-height:1.45}
  .hero .lead{margin-top:.8rem;font-size:.95rem;line-height:1.8;padding-inline-start:.9rem}
  .ctas{margin-top:1.1rem;gap:.5rem}
  .btn{min-height:2.75rem;padding:0 1.1rem;font-size:.92rem}
  main{gap:44px;padding-block:28px 52px}
  .sec{gap:14px}
  .sec h2,.tool h2,.quote h2{font-size:clamp(1.2rem,4.8vw,1.5rem)}
  .sec>.en-lbl{margin-top:-10px}
  .more a,.jump a{display:inline-flex;align-items:center;min-height:2.75rem;padding-block:0}
  .morelink{display:inline-flex;align-items:center;min-height:2.75rem}
  .helpful button{min-height:2.75rem}
  .olist .btn{min-height:2.75rem;width:2.75rem}
  .en-lbl,.fig figcaption{font-size:.75rem}
  .hero.cover .slogan-en{font-size:clamp(.7rem,2.6vw,.78rem);letter-spacing:.16em}
  .fab{width:3rem;height:3rem;inset-inline-start:14px}
  footer{font-size:.8rem}
}
@media (max-width:560px){
  .hero .lead{max-width:none}
  .band .big{font-size:clamp(1.2rem,5.6vw,1.6rem)}
}
/* tablet: keep the laptop's two-column pairs (text beside photo) and a tidy 2 x 2 for the four steps, instead of one huge stacked photo */
@media (min-width:600px) and (max-width:820px){
  .split{grid-template-columns:1.05fr 1fr}
  .steps{grid-template-columns:repeat(2,1fr)}
}
/* the "one place" line wraps instead of running past its card (it was nowrap and overflowed on the English profile page, phone and tablet) */
.oneplace b{white-space:normal;text-wrap:balance;line-height:1.5}
@media (max-width:820px){.hero.cover .slogan-en{font-size:clamp(.75rem,2.7vw,.8rem);letter-spacing:.12em}}

/* desktop tidy + new photos (release 2026-10-21): a centred 1240 container, a readable scale, a two-column hero. Phone and tablet (< 1100) are untouched. */
picture{display:contents}
.hart{display:none}
@media (min-width:1100px){
  html{font-size:17px}
  body{font-size:1rem}
  .wrap{max-width:1240px;padding-inline:clamp(40px,4.6vw,72px)}
  .hgrid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,4vw,64px);align-items:center;padding-block:clamp(2.5rem,5vw,4.5rem) 2.5rem}
  .hero .copy{max-width:none}
  .hero h1{font-size:clamp(2.1rem,3.2vw,3rem)}
  .hero.short h1{font-size:clamp(1.9rem,2.8vw,2.6rem)}
  .hero .lead{max-width:50ch;font-size:1.04rem}
  .hart{display:block;position:relative;border-radius:1.4rem;overflow:hidden;border:1px solid var(--hair);background:var(--navy);aspect-ratio:4/3}
  .hart img{width:100%;height:100%;object-fit:cover;display:block}
  .split.hasart{grid-template-columns:1fr}
  .split.hasart .fig{display:none}
  .do{grid-template-columns:repeat(auto-fit,minmax(18rem,1fr))}
}
@media (min-width:1700px){
  html{font-size:18px}
  .wrap{max-width:1360px}
}
@media (min-width:1100px){
  .split.hasart .sec{max-width:none}
  .split.hasart .ticks{columns:2;column-gap:2.5rem}
  .split.hasart .ticks li{break-inside:avoid}
}
/* tap targets: every standalone link or button is at least 44 px tall (all widths) */
div.more a,nav.jump a,a.morelink,div.wr-it a{display:inline-flex;align-items:center;min-height:44px;box-sizing:border-box}
.btn.line{min-width:44px;min-height:44px}
.helpful button{min-width:46px;min-height:46px}
@media (min-width:1100px){ .langsw,.menu summary{width:46px;height:46px;font-size:.9rem} }
/* breadcrumb links: a 44 px tap target on every width */
.crumbs a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px}
/* the floating WhatsApp button never sits on the last lines of a page */
@media (max-width:820px){body{padding-bottom:calc(5.4rem + env(safe-area-inset-bottom,0px))}.fab{width:3rem;height:3rem}}

/* pictures: the extra pictures under a page's first section, the FAQ picture on every width, natural proportions for the figure */
.pics{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:12px;align-items:start;margin:1.4rem 0}
.pics img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:1rem}
.fig img{aspect-ratio:auto;max-height:34rem;object-fit:cover}
.hart.show{display:block;margin-top:1rem;border-radius:1rem;overflow:hidden;border:1px solid var(--hair);aspect-ratio:16/9;background:var(--navy)}
.hart.show img{width:100%;height:100%;object-fit:cover;display:block}
@media (min-width:1100px){.hart.show{margin-top:0;aspect-ratio:4/3}}
.pics picture{display:block}
/* ==== desktop header: ONE row from 1024px: logo | nav | actions (profile outlined, contact primary, EN, and the menu only where the row is tight) ==== */
.hbtn{display:none}
@media (min-width:1024px){
 html .topbar{flex-direction:row;align-items:center;justify-content:space-between;gap:1.4rem;padding-block:1.2rem}
 html .topbar .brand{flex:none;display:inline-flex;align-items:center;min-height:46px}
 html .topbar .langsw,html .topbar .menu summary{width:46px;height:46px}
 html .topbar .brand .logo{width:9.5rem}
 html .topbar .topnav{position:static;inset:auto;flex:1;min-width:0;justify-content:center;gap:1.2rem}
 html .topbar .topnav a{display:inline-flex;align-items:center;min-height:44px;padding:0 .15rem;font-size:.92rem;white-space:nowrap}
 html .topbar .tools{order:0;flex:none;gap:.6rem}
 .topbar .hbtn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 1.25rem;border-radius:999px;font-size:.9rem;white-space:nowrap;text-decoration:none;color:#fff;border:1px solid rgba(255,255,255,.5);background:transparent}
 .topbar .hbtn.line:hover{border-color:var(--stone);color:var(--stone)}
 .topbar .hbtn.solid{background:#fff;color:var(--navy);border-color:#fff;font-weight:700}
 .topbar .hbtn.solid:hover{background:var(--stone);border-color:var(--stone)}
 html .topbar .menu nav{top:5.6rem;inset-inline-start:auto;inset-inline-end:max(40px,calc((100vw - 1240px)/2))}
}
@media (min-width:1024px) and (max-width:1279px){.topbar .hbtn.line{display:none}}
@media (min-width:1280px){html .topbar .tools .menu{display:none}html .topbar .brand .logo{width:11rem}}
@media (min-width:1700px){html .topbar .brand .logo{width:12rem}html .topbar .topnav{gap:1.6rem}html .topbar .topnav a{font-size:1rem}}
/* EN / عربي circle: text centred both ways on every page and width */
.topbar .langsw,.th .langsw{display:inline-grid;place-items:center;justify-content:center;align-items:center;text-align:center;line-height:1;padding:0;box-sizing:border-box}
@media (min-width:1024px){html .topbar .tools .hbtn,html .th .tools .hbtn{min-height:46px;height:46px}}
/*social*/.social{display:grid;grid-template-columns:repeat(4,44px);justify-content:center;gap:6px;margin:14px 0 4px}@media(min-width:560px){.social{grid-template-columns:repeat(8,44px)}}.social a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;color:inherit;opacity:.85;border-radius:12px}.social a:hover,.social a:focus-visible{opacity:1;background:rgba(255,255,255,.12)}.social svg{width:22px;height:22px}/*/social*/
/* ===================== site2 (2026-10-21): «المنظومة» — navy header / page head / footer, light working area, numbered modules ===================== */
:root{--sand:#EFECE9;--beige:#B5ABA3;--ink:#00263A;--r:.3rem}
body.s2{background:var(--sand);background-image:none;color:var(--ink);padding-bottom:0}
body.s2::before,.s2 .lens{display:none}
.s2 main>.sec::before{display:none!important}
.s2 .ltr{direction:ltr;unicode-bidi:isolate;white-space:nowrap;display:inline-block}
.s2 :focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.s2h :focus-visible,.s2ph :focus-visible,.s2hero :focus-visible,.s2f :focus-visible,.s2band.dark :focus-visible{outline-color:#fff}
.skip{position:absolute;inset-inline-start:8px;top:-60px;background:#fff;color:var(--ink);padding:.7rem 1rem;z-index:99;text-decoration:none}
.skip:focus{top:8px}
body.s2>main:not(.s2c){display:block;padding:0;margin:0;max-width:none}
.s2w{max-width:1240px;margin:0 auto;padding-inline:clamp(16px,4vw,40px)}

/* ---- site header ---- */
.s2h{position:sticky;top:0;z-index:50;background:var(--ink);color:#fff;border-bottom:1px solid rgba(181,171,163,.3)}
.s2h .in{max-width:1400px;margin:0 auto;padding:0 clamp(16px,4vw,40px);min-height:68px;display:flex;align-items:center;gap:14px}
.s2h .lg{display:inline-flex;align-items:center;min-height:46px;flex:none}
.s2h .lg img{display:block;height:34px;width:auto}
.s2n{display:none}
.s2h .act{margin-inline-start:auto;display:flex;align-items:center;gap:.5rem}
.s2h .hb{display:none}
.s2h .langsw{width:46px;height:46px;min-width:46px;font-size:.85rem;border:1px solid rgba(255,255,255,.4);display:grid;place-items:center;border-radius:50%}
.s2h .menu summary{width:46px;height:46px;border-radius:50%}
.s2h .menu nav{top:76px;inset-inline-start:auto;inset-inline-end:clamp(16px,4vw,40px)}
@media (min-width:1024px){
 .s2h .in{gap:1rem}
 .s2h .lg img{height:38px}
 .s2h .hb.solid{display:inline-flex}
}
/* the full bar needs room: from 1400 px up (a script drops it back to the menu button if the words still do not fit with their full spacing) */
@media (min-width:1400px){
 .s2n{display:flex;flex:1;min-width:0;justify-content:center;gap:.4rem 28px}
 .s2n a{flex:none;display:inline-flex;align-items:center;min-height:46px;padding:0;color:#fff;text-decoration:none;font-size:.95rem;white-space:nowrap;border-bottom:2px solid transparent}
 .s2n a:hover{color:var(--beige)}
 .s2n a[aria-current]{border-bottom-color:var(--beige);color:var(--beige)}
 .s2h .menu{display:none}
 .s2h .in{gap:1.3rem}
}
.hb{align-items:center;justify-content:center;min-height:46px;padding:0 1.15rem;border-radius:var(--r);font-size:.9rem;font-weight:700;white-space:nowrap;text-decoration:none;color:#fff;border:1px solid rgba(255,255,255,.55);background:transparent}
.hb:hover{border-color:var(--beige);color:var(--beige)}
.hb.solid{background:var(--beige);border-color:var(--beige);color:var(--ink)}
.hb.solid:hover{background:#fff;border-color:#fff;color:var(--ink)}

/* ---- buttons (page head, hero, bands) ---- */
.b1,.b2{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:3.2rem;padding:0 1.5rem;border-radius:var(--r);font:700 1rem/1 var(--kufi);text-decoration:none;cursor:pointer;border:1px solid transparent}
.b1{background:var(--beige);color:var(--ink);border-color:var(--beige)}
.b1:hover{background:#fff;border-color:#fff}
.b2{background:transparent;color:#fff;border-color:var(--beige)}
.b2:hover{background:rgba(255,255,255,.1)}
.s2c .b1,.s2band:not(.dark) .b1{background:var(--ink);color:#fff;border-color:var(--ink)}
.s2c .b1:hover,.s2band:not(.dark) .b1:hover{background:#06324a}
.s2c .b2,.s2band:not(.dark) .b2{color:var(--ink);border-color:var(--ink)}
.s2band:not(.dark) .b2:hover{background:rgba(255,255,255,.4)}
.b1 svg,.b2 svg{width:1.15em;height:1.15em}

/* ---- page head (inner pages) ---- */
.s2ph{background:var(--ink);color:#fff}
.s2ph .in{max-width:1240px;margin:0 auto;padding:clamp(20px,4vw,40px) clamp(16px,4vw,40px);display:grid;gap:clamp(18px,3vw,36px);align-items:center}
.s2ph .crumbs{font-size:.85rem;color:#c3ccd2;margin-bottom:.8rem;display:flex;flex-wrap:wrap;gap:.2rem .5rem}
.s2ph .crumbs a{color:#c3ccd2;text-decoration:none;display:inline-flex;align-items:center;min-height:44px;min-width:44px}
.s2ph .crumbs a:hover{color:#fff}
.s2ph h1{font-size:clamp(1.7rem,4.2vw,2.8rem);font-weight:900;line-height:1.35}
.s2ph .lead{margin-top:.9rem;color:#EFECE9;max-width:46ch;font-size:1rem;border-inline-start:2px solid var(--beige);padding-inline-start:1rem}
.s2ph .ctas{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.3rem}
.s2ph .ctas .btn{border-radius:var(--r);min-height:3.2rem}
.s2ph .badges{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.1rem}
.s2ph .badges a,.s2ph .badges span{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:0 .9rem;border:1px solid var(--beige);color:var(--beige);font-size:.85rem;text-decoration:none}
.s2ph .badges a:hover{background:rgba(255,255,255,.08);color:#fff}
.s2ph .badges svg{width:1.1rem;height:1.1rem}
.s2pi{margin:0}
.s2pi img{display:block;width:100%;height:100%;max-height:420px;min-height:200px;object-fit:cover}
@media (min-width:900px){.s2ph .in.has-img{grid-template-columns:1.05fr .95fr}.s2pi img{min-height:340px}}
.s2ph.short h1{font-size:clamp(1.45rem,3.4vw,2.2rem)}

/* ---- the working area is light ---- */
.s2c{--txt:#00263A;--soft:#244559;--muted:#4b6270;--hair:rgba(0,38,58,.18);--hair-2:rgba(0,38,58,.12);--panel:#fff;--ok:#1f6f45;--warn:#8a5a0c;--bad:#a8362a;--deep:#EFECE9;--navy:#00263A;--stone:#6b6159;max-width:1240px;color:var(--ink);padding-block:clamp(28px,4vw,52px) clamp(48px,7vw,88px)}
.s2c a{color:var(--ink)}
.s2c .kicker{color:#6b6159;font-weight:700;font-size:.85rem;display:flex;align-items:center;gap:.6rem}
.s2c .kicker::before{content:"";width:22px;height:2px;background:var(--ink);flex:none}
.s2c .sec h2,.s2c .tool h2,.s2c .quote h2{color:var(--ink)}
.s2c .sub,.s2c .do p,.s2c .card p,.s2c .pitem p,.s2c .steps span,.s2c .pillar .pt span,.s2c .fl-eg p,.s2c .ticks{color:var(--soft)}
.s2c .do .it{border-top-color:var(--hair)}
.s2c .do .it::before,.s2c .card::before{background:var(--ink)}
.s2c .tool,.s2c .quote,.s2c .pillar,.s2c .band,.s2c .pitem,.s2c .contacts,.s2c .fig,.s2c .oneplace{background:#fff;border-color:var(--hair);border-radius:var(--r)}
.s2c .oneplace{background:var(--ink);color:#fff}
.s2c .fig{background:var(--ink)}
.s2c .tool input,.s2c .tool select,.s2c .quote textarea,.s2c .search{background:#fff;color:var(--ink);border:1px solid rgba(0,38,58,.35);color-scheme:light;border-radius:var(--r)}
.s2c .tool input:focus,.s2c .tool select:focus,.s2c .quote textarea:focus,.s2c .search:focus{border-color:var(--ink);box-shadow:0 0 0 2px rgba(0,38,58,.18)}
.s2c .tool label{color:var(--soft)}
.s2c .result{border-color:var(--hair);color:var(--soft);border-radius:var(--r)}
.s2c .result b{color:var(--ink)}
.s2c .result.ok{border-color:rgba(31,111,69,.55)}
.s2c .result.warn{border-color:rgba(138,90,12,.55)}
.s2c .result.bad{border-color:rgba(168,54,42,.55)}
.s2c .check label{color:var(--ink);border-bottom-color:var(--hair-2)}
.s2c .check input{border-color:rgba(0,38,58,.6)}
.s2c .check input:checked{background:var(--ink);border-color:var(--ink)}
.s2c .check input:checked::after{color:#fff}
.s2c .check label:has(input:checked) span{color:var(--muted);text-decoration-color:rgba(0,38,58,.35)}
.s2c .prog,.s2c .qsteps i{background:rgba(0,38,58,.15)}
.s2c .prog i,.s2c .qsteps i.on{background:var(--ink)}
.s2c .progtxt{color:var(--ink)}
.s2c .olist li{color:var(--ink)}
.s2c .areas span{border-color:rgba(0,38,58,.35);border-radius:var(--r)}
.s2c .faq summary::after{border-color:rgba(0,38,58,.4);background:linear-gradient(var(--ink),var(--ink)) center/10px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) center/1px 10px no-repeat}
.s2c .faq details[open] summary::after{border-color:var(--ink)}
.s2c .faq details p{color:var(--soft)}
.s2c .chips span{border-color:rgba(0,38,58,.35);background:#fff;border-radius:var(--r)}
.s2c .chips label:hover span{border-color:var(--ink)}
.s2c .chips input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff}
.s2c .chips input:focus-visible+span{outline-color:var(--ink)}
.s2c .quote legend,.s2c .qform>label{color:#6b6159!important}
.s2c .qmsg{border-inline-start-color:var(--ink);color:var(--soft)}
.s2c .card,.s2c .qlist a,.s2c .pitem,.s2c .contacts a{color:var(--ink)}
.s2c .card .go,.s2c .pitem .go,.s2c .contacts span{color:#6b6159}
.s2c .card ul{color:var(--soft)}
.s2c .card ul li::before,.s2c .steps li::before{color:#6b6159}
.s2c .qlist a::after{border-color:rgba(0,38,58,.35)}
.s2c .qlist a:hover,.s2c .contacts a:hover b{color:#6b6159}
.s2c .tabs button{border-color:rgba(0,38,58,.35);color:var(--ink);border-radius:var(--r)}
.s2c .tabs button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.s2c .answer{color:var(--ink);border-inline-start-color:var(--ink)}
.s2c .light-check label{color:var(--ink)}
.s2c .helpful{color:var(--muted)}
.s2c .helpful button{border-color:rgba(0,38,58,.4);color:var(--ink);border-radius:var(--r)}
.s2c .helpful .thanks,.s2c .progtxt{color:var(--ink)}
.s2c .more a{border-color:rgba(0,38,58,.35);color:var(--ink);border-radius:var(--r);display:inline-flex;align-items:center;min-height:44px}
.s2c .more a:hover{border-color:var(--ink);background:#fff;color:var(--ink)}
.s2c .morelink{color:var(--ink);border-bottom-color:rgba(0,38,58,.5)}
.s2c .morelink:hover{color:#6b6159;border-color:#6b6159}
.s2c .jump a{border-color:rgba(0,38,58,.35);color:var(--ink);background:#fff;border-radius:var(--r);display:inline-flex;align-items:center;min-height:44px}
.s2c .fl-eg{background:rgba(0,38,58,.05);border-inline-start-color:var(--ink);border-radius:0}
.s2c .fl-eg b,.s2c .fl-ol li::before{color:var(--ink)}
.s2c .fl-ol li{color:var(--soft)}
.s2c .fl-ol li::before{border-color:var(--ink)}
.s2c .steps li::before{background:var(--ink);color:#fff}
.s2c .pillar .pt .ico{border-color:rgba(0,38,58,.4);color:var(--ink)}
.s2c .band .en{color:var(--muted)}
.s2c .btn{background:var(--ink);color:#fff;border-color:var(--ink);border-radius:var(--r)}
.s2c .btn:hover{background:#06324a}
.s2c .btn.wa,.s2c .btn.light{background:var(--ink);color:#fff;border-color:var(--ink)}
.s2c .btn.ghost,.s2c .btn.line{background:transparent;color:var(--ink);border-color:var(--ink)}
.s2c .btn.ghost:hover,.s2c .btn.line:hover{background:rgba(0,38,58,.06)}
.s2c .facts dt{color:#6b6159}
.s2c .en-lbl{color:#6b6159}
.s2c .pitem img,.s2c .fig img{background:var(--ink)}
.s2c .note,.s2c .note-ill{color:var(--muted)}
.s2c .pics img{border-radius:var(--r)}
.s2c .quote{background:#fff}
.s2c a:not(.btn):not(.b1):not(.b2):not(.card):not(.pitem):not(.qlist a):not(.contacts a):not(.more a):not(.jump a):not(.morelink){text-decoration-color:rgba(0,38,58,.35)}
.s2c .sec .sub a,.s2c .ticks a,.s2c p a{display:inline-block;padding-block:11px;margin-block:-11px}

/* ---- footer ---- */
.s2f{background:var(--ink);color:#d3dce1;border-top:1px solid rgba(181,171,163,.3);font-size:.92rem}
.s2f .in{max-width:1240px;margin:0 auto;padding:clamp(28px,4vw,48px) clamp(16px,4vw,40px) 20px;display:grid;gap:26px 40px;grid-template-columns:1fr}
.s2f b{color:#fff;font-weight:700}
.s2f h3{font-size:.95rem;color:#fff;margin-bottom:.4rem}
.s2f ul{list-style:none;margin:0;padding:0}
.s2f li{margin:0}
.s2f a{color:#d3dce1;text-decoration:none;display:inline-flex;align-items:center;min-height:44px;min-width:44px}
.s2f a:hover{color:#fff;text-decoration:underline}
.s2f .brandcol img{display:block;height:36px;width:auto;margin-bottom:.8rem}
.s2f .brandcol p{margin:.2rem 0}
.s2f .legal{font-size:.82rem;color:#aebbc3;margin-top:.7rem}
.s2f .ftag{grid-column:1/-1;text-align:center;color:var(--beige);font-size:.88rem;padding-top:.9rem;border-top:1px solid rgba(181,171,163,.3)}
.s2f .ftag em{display:block;font:400 .82rem "Noto Sans",sans-serif;opacity:.85;margin-top:.15rem}
.s2f .social{grid-column:1/-1}
@media (min-width:700px){.s2f .in{grid-template-columns:1.2fr 1fr 1fr 1fr}}
.s2 .fab{width:3.2rem;height:3.2rem;inset-inline-start:14px;box-shadow:0 .6rem 1.6rem rgba(0,10,16,.4)}

/* ---- home: hero, units, activities, steps, stats, proof, video, band ---- */
.s2hero{background:var(--ink);color:#fff}
.s2hero .in{max-width:1240px;margin:0 auto;display:grid}
.s2hero .tx{padding:clamp(28px,5vw,60px) clamp(16px,4vw,40px)}
.s2hero .kick{display:inline-block;font-size:.88rem;color:var(--beige);border-top:1px solid var(--beige);padding-top:.5rem;margin-bottom:1rem}
.s2hero h1{font-size:clamp(2rem,5vw,3.4rem);font-weight:900;line-height:1.3;text-wrap:balance}
.s2hero p.lead{margin:1rem 0 1.4rem;font-size:1.05rem;color:#EFECE9;max-width:40ch}
.s2hero .cta{display:flex;gap:.7rem;flex-wrap:wrap}
.s2hero .tagl{margin-top:1.6rem;font-size:.95rem;color:var(--beige);font-weight:700}
.s2hero .tagl .bar{display:inline-block;width:2px;height:1em;background:currentColor;vertical-align:-.15em;margin:0 .6em;opacity:.8}
.s2hero .tagl em{display:block;font:400 .85rem "Noto Sans",sans-serif;direction:ltr;text-align:start;opacity:.85;margin-top:.15rem}
html[lang=en] .s2hero .tagl em{display:none}
.s2hero .px{position:relative;margin:0;min-height:240px}
.s2hero .px img{display:block;width:100%;height:100%;min-height:240px;object-fit:cover}
.s2hero .chip{position:absolute;bottom:14px;inset-inline-start:16px;background:var(--ink);color:#fff;font-size:.88rem;padding:.4rem .8rem;display:flex;align-items:center;gap:.5rem;border:1px solid var(--beige)}
.s2hero .chip i{width:8px;height:8px;background:#7fd1a0;border-radius:50%}
@media (min-width:900px){.s2hero .in{grid-template-columns:1.05fr .95fr;min-height:520px}.s2hero .px img{min-height:520px}}
.s2sec{padding:clamp(28px,4vw,52px) 0}
.s2sec.white{background:#fff}
.s2lbl{font-size:.85rem;color:#6b6159;font-weight:700;display:flex;align-items:center;gap:.6rem;margin-bottom:.4rem}
.s2lbl::before{content:"";width:22px;height:2px;background:var(--ink)}
.s2sec h2{font-size:clamp(1.4rem,3vw,2rem);line-height:1.4;margin-bottom:.4rem}
.s2sec .subt{color:#355468;margin-bottom:1.3rem;max-width:62ch}
.units{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.unit{background:#fff;border:1px solid rgba(0,38,58,.16);border-top:4px solid var(--ink);padding:16px 14px;display:flex;flex-direction:column;gap:.5rem;text-decoration:none;color:var(--ink);min-height:160px}
.unit:hover{border-top-color:var(--beige);box-shadow:0 .6rem 1.4rem rgba(0,38,58,.12)}
.unit svg{width:30px;height:30px}
.unit b{font-size:1.05rem;line-height:1.4}
.unit span{font-size:.92rem;color:#355468;line-height:1.7}
.unit .go{margin-top:auto;font-size:.88rem;font-weight:700;display:inline-flex;align-items:center;min-height:44px}
@media (min-width:1000px){.units{grid-template-columns:repeat(4,1fr)}}
.acts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.act-t{background:var(--ink);color:#fff;min-height:128px;padding:16px 14px;display:flex;flex-direction:column;justify-content:space-between;text-decoration:none;border-top:4px solid transparent}
.act-t svg{width:30px;height:30px;color:var(--beige)}
.act-t b{font-size:1.05rem}
.act-t span{font-size:.85rem;color:#c3ccd2;line-height:1.6}
.act-t:hover{border-top-color:var(--beige);background:#06324a}
.act-t.all{background:var(--beige);color:var(--ink)}
.act-t.all svg{color:var(--ink)}
@media (min-width:700px){.acts{grid-template-columns:repeat(4,1fr)}}
.steps7{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.stp{background:#fff;border:1px solid rgba(0,38,58,.16);padding:16px 14px;min-height:150px}
.stp em{font:900 2rem/1 "Noto Sans",sans-serif;color:var(--beige);font-style:normal;display:block;margin-bottom:.5rem}
.stp b{display:block;font-size:1rem;margin-bottom:.2rem}
.stp span{display:block;font-size:.9rem;color:#355468;line-height:1.7}
@media (max-width:700px){.steps7{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin-inline:calc(clamp(16px,4vw,40px)*-1);padding-inline:clamp(16px,4vw,40px);padding-bottom:6px}.stp{flex:0 0 220px;scroll-snap-align:start}}
.stats{display:grid;grid-template-columns:1fr 1fr;background:var(--ink);color:#fff}
.stats div{padding:24px 16px;border:1px solid rgba(181,171,163,.35)}
.stats b{font:900 2.6rem/1 "Noto Sans",sans-serif;display:block;color:var(--beige);margin-bottom:.3rem}
.stats span{font-size:1rem}
@media (min-width:800px){.stats{grid-template-columns:repeat(4,1fr)}}
.proof{display:grid;gap:12px;grid-template-columns:1fr}
.prf{margin:0;position:relative;background:var(--ink)}
.prf img{display:block;width:100%;height:100%;min-height:180px;max-height:240px;object-fit:cover}
.prf figcaption{position:absolute;inset-inline:0;bottom:0;background:linear-gradient(transparent,rgba(0,23,36,.9));color:#fff;padding:2rem 1rem .8rem;font-size:.92rem;display:flex;align-items:center;gap:.6rem}
.prf figcaption svg{width:1.2rem;height:1.2rem;color:var(--beige);flex:none}
@media (min-width:800px){.proof{grid-template-columns:2fr 1fr 1fr}.prf img{max-height:340px}}
.vids{display:grid;gap:12px;grid-template-columns:1fr}
.vids video{display:block;width:100%;aspect-ratio:16/9;background:var(--ink);object-fit:cover}
.vids figure{margin:0}
.vids figcaption{font-size:.9rem;color:#355468;padding:.5rem 0}
@media (min-width:800px){.vids{grid-template-columns:repeat(3,1fr)}}
.s2band{background:var(--beige);color:var(--ink);padding:clamp(28px,4vw,48px) 0}
.s2band .in{max-width:1240px;margin:0 auto;padding-inline:clamp(16px,4vw,40px);display:flex;flex-direction:column;gap:1rem}
.s2band h2{font-size:clamp(1.4rem,3vw,2rem)}
.s2band p{max-width:60ch;line-height:1.8}
@media (min-width:800px){.s2band .in{flex-direction:row;align-items:center;justify-content:space-between}}
.s2band.dark{background:var(--ink);color:#fff}

/* ---- new pages: modules ---- */
.s2m{padding:clamp(26px,3.2vw,42px) 0;border-bottom:1px solid rgba(0,38,58,.14)}
.s2m:last-child{border-bottom:0}
.s2m.white{background:#fff}
.s2m .num{font:900 .85rem "Noto Sans",sans-serif;color:#fff;background:var(--ink);display:inline-block;padding:.1rem .7rem;margin-bottom:.6rem}
.s2m h2{font-size:clamp(1.4rem,3vw,2rem);line-height:1.4;margin-bottom:.4rem}
.s2m .lead2{color:#355468;margin-bottom:1.3rem;max-width:62ch}
.cards2{display:grid;gap:12px;grid-template-columns:1fr}
.c2{background:#fff;border:1px solid rgba(0,38,58,.16);padding:16px;display:flex;gap:14px;align-items:flex-start}
.s2m.white .c2{background:var(--sand)}
.c2 .i{width:46px;height:46px;background:var(--ink);color:var(--beige);display:flex;align-items:center;justify-content:center;flex:none}
.c2 .i svg{width:24px;height:24px}
.c2 b{display:block;font-size:1.02rem;line-height:1.5}
.c2 span{display:block;font-size:.92rem;color:#355468;line-height:1.75}
.cards2.docs{grid-template-columns:1fr}
.cards2.docs .c2{flex-direction:column;border-top:4px solid var(--beige)}
@media (min-width:700px){.cards2{grid-template-columns:1fr 1fr}.cards2.docs{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.cards2.three{grid-template-columns:repeat(3,1fr)}.cards2.docs{grid-template-columns:repeat(4,1fr)}}
.vs{display:flex;flex-direction:column;max-width:760px}
.vs .s{display:flex;gap:14px;padding-bottom:20px;position:relative}
.vs .s::before{content:"";position:absolute;inset-inline-start:21px;top:44px;bottom:0;width:2px;background:var(--beige)}
.vs .s:last-child::before{display:none}
.vs .no{width:44px;height:44px;flex:none;background:var(--ink);color:#fff;font:900 1.1rem "Noto Sans",sans-serif;display:flex;align-items:center;justify-content:center}
.vs b{display:block;font-size:1.02rem}
.vs span{display:block;font-size:.92rem;color:#355468;line-height:1.75}
.vs .own{display:inline-block;margin-top:.2rem;font-size:.82rem;color:#6b6159;font-weight:700}
.tbl{background:#fff;border:1px solid rgba(0,38,58,.16)}
.tbl .r{display:grid;gap:.2rem 14px;padding:14px 16px;border-bottom:1px solid rgba(0,38,58,.1);grid-template-columns:1fr}
.tbl .r:last-child{border-bottom:0}
.tbl .r b{font-size:1rem}
.tbl .r span{font-size:.92rem;color:#355468;line-height:1.7}
.tbl .r a{font-weight:700}
@media (min-width:800px){.tbl .r{grid-template-columns:190px 1fr auto;align-items:center}}
.tbl .acts2{display:flex;gap:.5rem;flex-wrap:wrap}
.tbl .acts2 a{display:inline-flex;align-items:center;min-height:44px;padding:0 1rem;border:1px solid var(--ink);color:var(--ink);text-decoration:none;font-size:.9rem;font-weight:700;border-radius:var(--r);background:#fff}
.tbl .acts2 a.p{background:var(--ink);color:#fff}
.tbl .acts2 a:hover{background:#06324a;color:#fff}
.s2tabs{position:sticky;top:68px;z-index:40;background:#fff;border-bottom:1px solid rgba(0,38,58,.2);overflow-x:auto;scrollbar-width:none}
.s2tabs .in{max-width:1240px;margin:0 auto;display:flex;padding-inline:clamp(8px,3vw,32px)}
.s2tabs a{flex:0 0 auto;min-height:50px;padding:0 1rem;display:flex;align-items:center;font-size:.95rem;font-weight:700;color:var(--ink);text-decoration:none;border-bottom:3px solid transparent;white-space:nowrap}
.s2tabs a:hover,.s2tabs a.on{border-bottom-color:var(--ink)}
.s2m[id]{scroll-margin-top:130px}
.por{display:grid;gap:22px;align-items:start}
.pm{width:100%;max-width:320px;background:#fff;color:var(--ink);border:1px solid rgba(0,38,58,.2);padding:14px 14px 16px;display:flex;flex-direction:column;gap:10px}
.pm .top{display:flex;justify-content:space-between;align-items:center;font-size:.92rem;font-weight:700}
.pm .top span{font-weight:400;opacity:.65}
.pm .prog2{height:8px;background:var(--sand)}.pm .prog2 i{display:block;height:100%;width:42%;background:var(--ink)}
.pm .lab{font-size:.85rem;opacity:.7;display:flex;justify-content:space-between}
.pm .rep{display:flex;gap:10px;align-items:center;background:var(--sand);padding:8px}
.pm .rep img{width:56px;height:56px;object-fit:cover}
.pm .rep b{font-size:.9rem;display:block;line-height:1.5}.pm .rep small{font-size:.85rem;opacity:.7}
.pm .rw{display:flex;align-items:center;gap:10px;font-size:.9rem;min-height:44px;border-top:1px solid rgba(0,38,58,.12)}
.pm .rw svg{width:20px;height:20px}
.pl{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pl span{background:#fff;border:1px solid rgba(0,38,58,.16);min-height:50px;display:flex;align-items:center;gap:.5rem;padding:0 .7rem;font-size:.9rem}
.pl svg{width:20px;height:20px;flex:none}
@media (min-width:900px){.por{grid-template-columns:320px 1fr}}
.chain{display:flex;align-items:stretch;gap:6px;max-width:760px}
.chain div{flex:1;background:#fff;border:1px solid rgba(0,38,58,.2);padding:12px 6px;text-align:center;font-size:.9rem;font-weight:700;display:flex;flex-direction:column;align-items:center;gap:6px;border-top:4px solid var(--ink)}
.chain .ar{flex:0 0 22px;border:0;background:none;padding:0;justify-content:center;color:#6b6159;font-weight:400}
.chain svg{width:26px;height:26px}
.two{display:grid;gap:22px}
@media (min-width:900px){.two{grid-template-columns:1fr 1fr;align-items:start}}
.feed{background:#fff;border:1px solid rgba(0,38,58,.2);max-width:380px}
.feed img{display:block;width:100%;height:170px;object-fit:cover}
.feed .b{padding:12px 14px;font-size:.95rem}.feed .b small{display:block;font-size:.85rem;opacity:.7}
.feed .f{padding:10px 14px;border-top:1px solid rgba(0,38,58,.12);font-size:.88rem;display:flex;gap:.5rem;align-items:center}
.feed .f svg{width:18px;height:18px}

/* ---- the registration form ---- */
.fcard{background:#fff;border:1px solid rgba(0,38,58,.2);padding:clamp(16px,3vw,28px);border-top:4px solid var(--ink);max-width:760px}
.fm{display:flex;flex-direction:column;gap:20px}
.fm .fl{display:block;font-size:.95rem;font-weight:700;margin-bottom:.35rem}
.fm .fl small{font-weight:400;opacity:.7;font-size:.85rem;margin-inline-start:.4rem}
.fm input[type=text],.fm input[type=tel],.fm input[type=email],.fm textarea{width:100%;min-height:52px;padding:.6rem .9rem;border:1px solid rgba(0,38,58,.4);background:#fff;font:inherit;font-size:1rem;color:var(--ink);border-radius:0}
.fm textarea{min-height:96px;resize:vertical}
.fm input:focus,.fm textarea:focus{outline:2px solid var(--ink);outline-offset:1px}
.fm fieldset{border:0;padding:0;margin:0;min-width:0}
.fm legend{padding:0;font-size:.95rem;font-weight:700;margin-bottom:.35rem}
.fm legend small{font-weight:400;opacity:.7;font-size:.85rem;margin-inline-start:.5rem}
.fm .chips2{display:flex;flex-wrap:wrap;gap:8px}
.fm .chips2 label{position:relative;display:inline-flex}
.fm .chips2 input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.fm .chips2 span{display:inline-flex;align-items:center;min-height:46px;padding:0 1rem;border:1px solid rgba(0,38,58,.4);background:#fff;font-size:.95rem}
.fm .chips2 input:checked+span{background:var(--ink);color:#fff;border-color:var(--ink)}
.fm .chips2 input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}
.fm .two2{display:grid;gap:20px}
@media (min-width:700px){.fm .two2{grid-template-columns:1fr 1fr}}
.fm .consent{display:flex;gap:.7rem;align-items:flex-start;font-size:.92rem;line-height:1.7;background:var(--sand);padding:12px 14px;border:1px dashed rgba(0,38,58,.4)}
.fm .consent input{width:24px;height:24px;flex:none;margin:.2rem 0 0;accent-color:var(--ink)}
.fm .consent em{display:block;font-style:normal;color:#6b6159;font-size:.85rem}
.fm .go{min-height:56px;width:100%;background:var(--ink);color:#fff;font:700 1.05rem var(--kufi);border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.6rem}
.fm .go:hover{background:#06324a}
.fm .hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}
.fm .note2{font-size:.88rem;color:#355468;line-height:1.75}
.conf{margin-top:18px;background:var(--ink);color:#fff;padding:16px;display:flex;flex-direction:column;gap:.5rem;max-width:760px}
.conf small{color:var(--beige);font-size:.85rem}
.conf b{font-size:1.02rem}
.conf p{font-size:.92rem;line-height:1.8;opacity:.95}
.conf i{font-style:normal;color:var(--beige);font-size:.88rem;border-top:1px solid rgba(181,171,163,.4);padding-top:.5rem}
.thanks{max-width:760px}
.thanks .ref{display:inline-block;font:900 1.6rem "Noto Sans",sans-serif;background:#fff;border:1px solid rgba(0,38,58,.3);padding:.3rem 1rem;margin:.6rem 0;direction:ltr}
.ph-ready{display:none}
.s2m h2 a,.s2m .lead2 a{color:var(--ink);text-decoration-color:rgba(0,38,58,.35);display:inline-flex;align-items:center;min-height:44px}
.s2f .in{padding-bottom:calc(20px + 3.6rem)}
@media (min-width:1024px){.s2n a{min-width:44px;justify-content:center}}
.s2h .langsw{display:inline-grid;place-items:center;justify-content:center;text-align:center;line-height:1;padding:0;box-sizing:border-box}
.mk{display:block;font-size:.8rem;color:#6b6159;text-align:center;padding:.3rem 0 .1rem}
.s2m .b1{background:var(--ink);color:#fff;border-color:var(--ink)}
.s2m .b1:hover{background:#06324a}
.s2m .b2{color:var(--ink);border-color:var(--ink)}
.s2m .b2:hover{background:rgba(0,38,58,.06)}

/* ===================== layout rework (2026-10-21, after Mohammed's feedback): denser desktop/tablet, two-column modules ===================== */
/* tighter vertical rhythm everywhere */
.s2m{padding:clamp(18px,2.2vw,28px) 0}
.s2sec{padding:clamp(18px,2.4vw,32px) 0}
.s2c{padding-block:clamp(18px,2.6vw,32px) clamp(32px,4vw,52px)}
.s2ph .in{padding-block:clamp(16px,3.2vw,30px)}
.s2band{padding:clamp(20px,2.8vw,34px) 0}
.s2m .lead2,.s2sec .subt{margin-bottom:.9rem}
@media (min-width:700px){
 body.s2>main.s2c{gap:clamp(20px,2.4vw,30px)}
}
/* head column + body column (modules, home sections, restyled .sec blocks) */
@media (min-width:1000px){
 .s2row{display:grid;grid-template-columns:clamp(230px,25%,300px) minmax(0,1fr);gap:0 clamp(28px,4vw,56px);align-items:start}
 .s2row>.mh{position:sticky;top:132px}
 .s2sec>.s2row>.mh{top:92px}
 .s2row .lead2,.s2row .subt{max-width:none}
 .s2c .sec:has(>.sh){display:grid;grid-template-columns:clamp(230px,25%,300px) minmax(0,1fr);gap:0 clamp(28px,4vw,52px);align-items:start}
 .s2c .sec>.sh{position:sticky;top:92px}
 .s2c .sec>.sb:empty{display:none}
 .s2c .sec>.sb>:first-child{margin-top:0}
 .s2c .sec>.sb .cards{grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}
 .s2c .sec>.sb .do{grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
 .s2c .tool{margin-block:0}
}
.s2c .sec>.sh .kicker{margin-bottom:.2rem}
.s2c .sec>.sb>.sub{margin-top:0}
/* the seven steps as a grid of cards (desktop/tablet); phone keeps the vertical timeline */
@media (min-width:700px){
 .vs.step{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;max-width:none}
 .vs.step .s{display:block;padding:14px;background:#fff;border:1px solid rgba(0,38,58,.16);border-top:4px solid var(--ink);min-height:150px}
 .s2m.white .vs.step .s{background:var(--sand)}
 .vs.step .s::before{display:none}
 .vs.step .no{margin-bottom:.6rem;width:36px;height:36px;font-size:1rem}
 .vs.step .s.cta{background:var(--ink);color:#fff;text-decoration:none;border-top-color:var(--beige)}
 .vs.step .s.cta span{color:#c3ccd2}
 .vs.step .s.cta .no{background:var(--beige);color:var(--ink)}
 .vs.step .s.cta:hover{background:#06324a}
}
@media (min-width:700px){.steps7 .stp.cta{display:block}}
.steps7 .stp.cta{background:var(--ink);color:#fff;text-decoration:none;border-top:4px solid var(--beige)}
.steps7 .stp.cta em{color:var(--beige)}
.steps7 .stp.cta span{color:#c3ccd2}
.steps7 .stp.cta:hover{background:#06324a}
.steps7 .stp.cta em svg{width:28px;height:28px}
/* inside the body column the grids are tuned to ~860px */
@media (min-width:1000px){
 .s2row .steps7{grid-template-columns:repeat(4,1fr)}
 .s2row .units{grid-template-columns:repeat(2,1fr)}
 .s2row .acts{grid-template-columns:repeat(4,1fr)}
 .s2row .proof{grid-template-columns:2fr 1fr 1fr;margin-bottom:12px}
 .s2row .vids{grid-template-columns:repeat(3,1fr)}
 .s2row .cards2.docs{grid-template-columns:repeat(2,1fr)}
 .s2row .tbl .r{grid-template-columns:150px 1fr auto}
 .s2row .por{grid-template-columns:300px 1fr}
 .s2row .two{grid-template-columns:1fr 1fr}
 .s2row .vs:not(.step){max-width:none}
}
@media (min-width:1280px){.s2row .cards2.docs{grid-template-columns:repeat(4,1fr)}}
/* oversized photos are capped */
.s2c .pics img{max-height:300px}
.s2c .fig img,.s2c .hart img{max-height:380px;object-fit:cover}
.s2c .split{align-items:stretch}
.s2m .vs.step .s.cta,.s2m.white .vs.step .s.cta{background:var(--ink);color:#fff;border-top-color:var(--beige)}
.s2m .vs.step .s.cta b{color:#fff}
.s2m .vs.step .s.cta span{color:#c3ccd2}
.s2m .vs.step .s.cta:hover{background:#06324a}
@media (min-width:1000px){.s2c .sec>.sb .steps{grid-template-columns:repeat(4,1fr)}}

/* ---- header: one portal control that splits into the two doors; menu in two audience groups ---- */
.s2h .pgate{display:none;position:relative}
@media (min-width:1400px){.s2h .pgate{display:block}}
.pgate summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.55rem;min-height:46px;padding:0 1.05rem;border:1px solid rgba(255,255,255,.55);border-radius:var(--r);color:#fff;font-weight:700;font-size:.9rem;white-space:nowrap}
.pgate summary::-webkit-details-marker{display:none}
.pgate summary i{width:.5rem;height:.5rem;border-inline-end:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-.25rem}
.pgate summary:hover,.pgate[open] summary{border-color:var(--beige);color:var(--beige)}
.pgate .pg{position:absolute;top:calc(100% + 8px);inset-inline-end:0;width:310px;background:#fff;color:var(--ink);border:1px solid rgba(0,38,58,.25);box-shadow:0 1rem 2.2rem rgba(0,10,16,.35);z-index:60;display:flex;flex-direction:column}
.pgate .pg a{display:flex;flex-direction:column;gap:.15rem;padding:.8rem 1rem;min-height:60px;justify-content:center;text-decoration:none;color:var(--ink);border-inline-start:5px solid var(--ink)}
.pgate .pg a+a{border-top:1px solid rgba(0,38,58,.12)}
.pgate .pg a.ct{border-inline-start-color:#B5ABA3;background:#EFECE9}
.pgate .pg a:hover{background:var(--sand)}
.pgate .pg b{font-size:1rem}
.pgate .pg span{font-size:.85rem;color:#355468;line-height:1.6}
.s2h .menu .mg{margin:.8rem .6rem .15rem;padding-top:.6rem;border-top:1px solid rgba(181,171,163,.3);font-size:.82rem;font-weight:700;color:var(--beige)}
.s2h .menu .mg:first-child{margin-top:.2rem;border-top:0;padding-top:0}
.s2h .menu .mg.ct{color:#EFECE9}
/* ---- home: «اختر طريقك» ---- */
.s2aud{padding:clamp(18px,2.4vw,32px) 0;background:var(--sand)}
.s2aud .grid{display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:800px){.s2aud .grid{grid-template-columns:1fr 1fr;gap:16px}}
.s2aud .p{padding:clamp(18px,2.4vw,28px);display:flex;flex-direction:column;gap:.6rem}
.s2aud .p.own{background:#fff;border:1px solid rgba(0,38,58,.16);border-top:5px solid var(--ink)}
.s2aud .p.ctr{background:var(--ink);color:#fff;border-top:5px solid #B5ABA3}
.s2aud .tag{font-size:.85rem;font-weight:700;color:#6b6159}
.s2aud .ctr .tag{color:#EFECE9}
.s2aud h3{font-size:clamp(1.25rem,2.4vw,1.6rem);line-height:1.45}
.s2aud p{line-height:1.8;color:#355468}
.s2aud .ctr p{color:#d3dce1}
.s2aud ul{list-style:none;margin:.2rem 0 .4rem;padding:0;display:flex;flex-direction:column;gap:.35rem}
.s2aud li{display:flex;gap:.6rem;align-items:flex-start;font-size:.95rem;line-height:1.7}
.s2aud li svg{width:18px;height:18px;flex:none;margin-top:.3rem;color:var(--ink)}
.s2aud .ctr li svg{color:#B5ABA3}
.s2aud .cta{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:auto;padding-top:.4rem}
.s2aud .own .b1{background:var(--ink);color:#fff;border-color:var(--ink)}
.s2aud .own .b2{color:var(--ink);border-color:var(--ink);background:transparent}
.s2aud .ctr .b1{background:#B5ABA3;color:#06202e;border-color:#B5ABA3}
.s2aud .ctr .b2{color:#fff;border-color:#EFECE9}
.s2aud .more{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:inherit;text-decoration:none;border-bottom:1px solid currentColor;align-self:flex-start}
.more2{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:14px}
.more2 a{display:inline-flex;align-items:center;min-height:44px;padding:0 1rem;border:1px solid var(--ink);color:var(--ink);text-decoration:none;font-weight:700;font-size:.9rem;background:#fff}
.more2 a:hover{background:var(--sand)}
/* tablet: the portal module and the page-head photo */
@media (min-width:700px){.por{grid-template-columns:300px 1fr}}
@media (min-width:700px) and (max-width:999px){.s2pi img{max-height:300px;min-height:200px}}


/* ===== «مركز المهندس» (engineers/) ===== */
.engcards{display:grid;gap:12px;grid-template-columns:1fr;margin-bottom:20px}
@media (min-width:700px){.engcards{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.engcards{grid-template-columns:repeat(3,1fr)}}
.engcard{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid rgba(0,38,58,.2);border-top:4px solid var(--beige);padding:16px;text-decoration:none;color:var(--ink);min-height:44px}
.engcard:hover{border-top-color:var(--ink);box-shadow:0 8px 22px rgba(0,38,58,.12)}
.engcard .no{font:900 .8rem "Noto Sans",sans-serif;color:#fff;background:var(--ink);align-self:flex-start;padding:.1rem .6rem}
.engcard b{font-size:1.08rem;line-height:1.5}
.engcard .who{font-size:.9rem;color:#355468;line-height:1.7}
.engcard .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.engcard .chips i{font:700 .75rem "Noto Sans",sans-serif;font-style:normal;border:1px solid rgba(0,38,58,.35);padding:.1rem .5rem;direction:ltr}
.engcard .go2{margin-top:auto;display:inline-flex;align-items:center;gap:.4rem;font-weight:700;font-size:.92rem;min-height:44px}
.engcard .go2 svg{width:1.1em;height:1.1em}
.engdisc{margin:14px 0;padding:10px 14px;border-inline-start:4px solid var(--beige);background:#fff;font-size:.92rem;line-height:1.8;color:#355468}
.engnotice{margin:0 0 14px;padding:10px 14px;background:#fff;border:1px dashed rgba(0,38,58,.4);font-size:.92rem;line-height:1.8}
.engw{display:grid;gap:20px;grid-template-columns:minmax(0,1fr)}
@media (min-width:1000px){.engw{grid-template-columns:minmax(0,1fr) 340px;align-items:start}.engside{position:sticky;top:92px}}
.engart{background:#fff;border:1px solid rgba(0,38,58,.2);border-top:4px solid var(--ink);padding:clamp(16px,3vw,32px);line-height:1.9}
.engtitle{font-size:clamp(1.3rem,3vw,1.8rem);line-height:1.5;margin:0 0 .4rem;font-weight:700}
.engmeta{display:grid;gap:8px;margin:12px 0 4px;grid-template-columns:1fr}
@media (min-width:700px){.engmeta{grid-template-columns:repeat(3,1fr)}}
.engmeta div{background:var(--sand);padding:10px 12px}
.engmeta dt{font-weight:700;font-size:.85rem;color:#6b6159;margin:0}
.engmeta dd{margin:0;font-size:.95rem;line-height:1.7}
.engh{font-size:1.15rem;margin:1.6rem 0 .5rem;padding-bottom:.3rem;border-bottom:2px solid var(--ink)}
.chk{list-style:none;margin:0;padding:0}
.chk li{display:flex;gap:.75rem;align-items:flex-start;padding:.55rem 0;border-bottom:1px solid rgba(0,38,58,.12)}
.chk li:last-child{border-bottom:0}
.chk .bx{flex:none;width:22px;height:22px;border:2px solid var(--ink);margin-top:.35rem;background:#fff}
.chk .tx{flex:1;min-width:0}
.chk .cite{display:block;color:#6b6159;font-size:.82rem;line-height:1.6;margin-top:.1rem}
.bul{margin:0;padding-inline-start:1.4rem}
.bul li{margin:.25rem 0}
.engnote{margin:12px 0;padding:10px 14px;background:var(--sand);border-inline-start:4px solid var(--ink);font-weight:600}
.engp{margin:.4rem 0}
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:8px 0}
.engt{border-collapse:collapse;width:100%;font-size:.92rem;line-height:1.7}
.engt th,.engt td{border:1px solid rgba(0,38,58,.3);padding:.45rem .6rem;vertical-align:top;text-align:start}
.engt thead th{background:var(--sand);font-weight:700}
.engt.kv th{width:30%;background:var(--sand);font-weight:700}
.engt td a{display:flex;align-items:center;min-height:44px;direction:ltr;text-align:left;word-break:break-all}
.engfoot{margin-top:1.6rem;padding-top:.6rem;border-top:1px solid rgba(0,38,58,.3);font-size:.85rem;color:#6b6159}
.engside .fm{background:#fff;border:1px solid rgba(0,38,58,.2);border-top:4px solid var(--ink);padding:16px;gap:14px;margin-bottom:16px}
.engside .fm h3{display:flex;align-items:center;gap:.5rem;font-size:1.05rem;margin:0}
.engnav{background:#fff;border:1px solid rgba(0,38,58,.2);padding:14px 16px}
.engnav h3{font-size:1rem;margin:0 0 .4rem}
.engnav ul{list-style:none;margin:0;padding:0}
.engnav a{display:flex;gap:.6rem;align-items:center;min-height:44px;text-decoration:none;color:var(--ink);font-size:.92rem;border-bottom:1px solid rgba(0,38,58,.1)}
.engnav li:last-child a{border-bottom:0}
.engnav a[aria-current]{font-weight:700}
.engnav .no{font:900 .75rem "Noto Sans",sans-serif;background:var(--ink);color:#fff;padding:.05rem .45rem;flex:none}
button.b2{font-family:inherit}
.s2ph button.b2{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
/* print: only the checklist, black on white, with a navy letterhead */
@media print{
  @page{size:A4;margin:14mm 12mm 16mm}
  body.s2{background:#fff;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .skip,.s2h,.s2f,.fab,.s2ph,.s2tabs,.noprint,.s2band,.engnotice,#social,.social{display:none!important}
  .s2m{padding:0;border:0}
  .s2w,.engw{display:block;max-width:none;padding:0}
  .engart{border:0;padding:0;box-shadow:none}
  .engart::before{content:"";display:block}
  .chk li,.engt tr{break-inside:avoid}
  .engh{break-after:avoid}
  .engcard,.engmeta div{break-inside:avoid}
  a{color:inherit;text-decoration:none}
}
/* the PDF letterhead (also shown on paper) */
.pdfhead{display:none}
@media print{.pdfhead{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#00263A;color:#fff;padding:8px 14px;margin-bottom:12px;-webkit-print-color-adjust:exact;print-color-adjust:exact}.pdfhead img{height:34px;width:auto}.pdfhead span{font-size:.8rem}}
.engtitle{display:none}
@media print{.engtitle{display:block}}


/* ===== «اختر طريقك»: three background directions (dA photo, dB blueprint, dC gradient). One is chosen by adding its class to .s2aud ===== */
.s2aud .p{position:relative;isolation:isolate;overflow:hidden}
/* A: a real site photo under an identity-colour wash */
.s2aud.dA .p.own{background:linear-gradient(135deg,rgba(255,255,255,.90) 0%,rgba(239,236,233,.66) 55%,rgba(239,236,233,.42) 100%),url("/media/site/G16-plaster-wall-block.jpg") center/cover no-repeat}
.s2aud.dA .p.ctr{background:linear-gradient(135deg,rgba(0,38,58,.92) 0%,rgba(0,38,58,.72) 60%,rgba(4,64,94,.50) 100%),url("/media/site/G15-rebar-pipes-caps.jpg") center/cover no-repeat}
/* B: engineering drawing: fine grid + major grid + a villa plan in the corner */
.s2aud.dB .p.own{background-color:#fbfaf8;background-image:linear-gradient(rgba(0,38,58,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(0,38,58,.06) 1px,transparent 1px),linear-gradient(rgba(0,38,58,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(0,38,58,.11) 1px,transparent 1px);background-size:20px 20px,20px 20px,100px 100px,100px 100px}
.s2aud.dB .p.ctr{background-color:#00263A;background-image:linear-gradient(rgba(181,171,163,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(181,171,163,.10) 1px,transparent 1px),linear-gradient(rgba(181,171,163,.19) 1px,transparent 1px),linear-gradient(90deg,rgba(181,171,163,.19) 1px,transparent 1px);background-size:20px 20px,20px 20px,100px 100px,100px 100px}
.s2aud.dB .p::before{content:"";position:absolute;z-index:-1;inset-block-end:-6px;inset-inline-start:-6px;width:210px;height:150px;opacity:.9;background:no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 210 150' fill='none' stroke='%2300263A' stroke-opacity='.28' stroke-width='1.6'><path d='M10 140V20h120v50h70v70zM130 70v70M10 70h120M60 20v50M150 140v-30h30v30'/><path d='M34 70a14 14 0 0 1 14 14M168 110a14 14 0 0 0-14-14' stroke-opacity='.2'/></svg>")}
.s2aud.dB .p.ctr::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 210 150' fill='none' stroke='%23B5ABA3' stroke-opacity='.45' stroke-width='1.6'><path d='M10 140V20h120v50h70v70zM130 70v70M10 70h120M60 20v50M150 140v-30h30v30'/><path d='M34 70a14 14 0 0 1 14 14M168 110a14 14 0 0 0-14-14' stroke-opacity='.3'/></svg>")}
/* C: sand-to-navy gradients with a soft glow and fine arcs */
.s2aud.dC .p.own{background:radial-gradient(90% 70% at 100% 0%,rgba(201,163,90,.26),transparent 62%),radial-gradient(70% 60% at 0% 100%,rgba(181,171,163,.55),transparent 70%),linear-gradient(160deg,#ffffff 0%,#EFECE9 55%,#DDD3C8 100%)}
.s2aud.dC .p.ctr{background:radial-gradient(90% 70% at 0% 0%,rgba(181,171,163,.34),transparent 62%),radial-gradient(70% 60% at 100% 100%,rgba(181,171,163,.20),transparent 70%),linear-gradient(160deg,#00263A 0%,#03324c 55%,#0a5173 100%)}
.s2aud.dC .p::after{content:"";position:absolute;z-index:-1;inset-block-start:-70px;inset-inline-end:-70px;width:260px;height:260px;border-radius:50%;border:1px solid rgba(0,38,58,.16);box-shadow:0 0 0 22px rgba(0,38,58,.04),0 0 0 44px rgba(0,38,58,.03)}
.s2aud.dC .p.ctr::after{border-color:rgba(181,171,163,.32);box-shadow:0 0 0 22px rgba(181,171,163,.07),0 0 0 44px rgba(181,171,163,.05)}

/* the pressure gauge sits in the top part of the portrait photo: every wide crop keeps it (06-gauge-on-pipe.jpg is 1080x1350, gauge at x 44-74 %, y 0-26 %) */
img[src$="06-gauge-on-pipe.jpg"]{object-position:60% 4%!important}
/* anchors land below the sticky header (69 px) */
#quote,.quote[id]{scroll-margin-top:92px}
@media (max-width:640px){
  .s2aud.dA .p.own{background:linear-gradient(180deg,rgba(255,255,255,.93) 0%,rgba(239,236,233,.86) 60%,rgba(239,236,233,.6) 100%),url("/media/site/G16-plaster-wall-block.jpg") center/cover no-repeat}
  .s2aud.dA .p.ctr{background:linear-gradient(180deg,rgba(0,38,58,.95) 0%,rgba(0,38,58,.84) 60%,rgba(4,64,94,.6) 100%),url("/media/site/G15-rebar-pipes-caps.jpg") center/cover no-repeat}
  .s2aud.dB .p::before{opacity:.45;width:150px;height:108px}
}


/* ===== /services/ «خدماتنا» · «+70 خدمة» ===== */
.svchero .plus70{display:inline-block;color:var(--beige);font-weight:900;letter-spacing:-.02em;margin-inline-end:.15em}
.svchero h1{font-size:clamp(2.4rem,7vw,4.4rem);line-height:1.15}
.svcacts{display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:700px){.svcacts{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.svcacts{grid-template-columns:repeat(4,1fr)}}
.svca.cta{background:var(--ink);color:#fff;border-top-color:#B5ABA3}.svca.cta .ds{color:#d3dce1}.svca.cta .hd svg{color:#B5ABA3}.svca.cta .go2{color:#EFECE9}.svca.cta:hover{background:#06324a}
.svca{display:flex;flex-direction:column;gap:.5rem;background:#fff;border:1px solid rgba(0,38,58,.2);border-top:4px solid var(--beige);padding:16px;text-decoration:none;color:var(--ink)}
.svca:hover{border-top-color:var(--ink);box-shadow:0 8px 22px rgba(0,38,58,.12)}
.svca .hd{display:flex;align-items:center;gap:.7rem}
.svca .hd svg{width:30px;height:30px;flex:none;color:var(--ink)}
.svca .hd b{font-size:1.1rem}
.svca .ds{font-size:.9rem;line-height:1.7;color:#355468}
.svca ul{list-style:none;margin:.2rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.svca li{font-size:.82rem;line-height:1.5;border:1px solid rgba(0,38,58,.28);background:var(--sand);padding:.2rem .6rem}
.svca .go2{margin-top:auto;display:inline-flex;align-items:center;gap:.4rem;font-weight:700;font-size:.92rem;min-height:44px}
.svca .go2 svg{width:1.1em;height:1.1em}
.svcl{list-style:none;margin:0;padding:0;display:grid;gap:2px 28px;grid-template-columns:1fr}
@media (min-width:760px){.svcl{grid-template-columns:1fr 1fr}}
@media (min-width:1200px){.svcl{grid-template-columns:1fr 1fr 1fr}}
.svcl li{display:flex;gap:.65rem;align-items:flex-start;padding:.55rem 0;border-bottom:1px solid rgba(0,38,58,.12);line-height:1.7;font-size:.97rem}
.svcl li svg{width:18px;height:18px;flex:none;margin-top:.35rem;color:var(--ink)}
.svcl a{color:var(--ink);text-underline-offset:3px;display:inline-flex;align-items:center;min-height:44px;margin-block:-.55rem}
.more2 a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--ink)}
.svcmore{background:var(--ink);color:#fff;border-bottom:0}
.svcmore .lead2{color:#d3dce1;max-width:70ch;margin:0 auto;text-align:center;font-size:1.15rem;line-height:2}
/* the home strip */
.s2plus{background:var(--sand);padding:0 0 clamp(14px,2vw,22px)}
.s2plus .p70{display:grid;gap:10px 18px;grid-template-columns:auto 1fr;align-items:center;background:var(--ink);color:#fff;text-decoration:none;padding:clamp(16px,2.4vw,26px);border-top:5px solid #B5ABA3}
.s2plus .p70n{font:900 clamp(2.6rem,7vw,4.2rem)/1 "Noto Sans",sans-serif;color:var(--beige);letter-spacing:-.02em}
.s2plus .p70t b{display:block;font-size:clamp(1.05rem,2.4vw,1.5rem);line-height:1.5}
.s2plus .p70t small{display:block;color:#c9d6de;font-size:.92rem;line-height:1.7;margin-top:.2rem}
.s2plus .p70g{grid-column:1/-1;display:inline-flex;align-items:center;gap:.5rem;font-weight:700;min-height:44px;color:#EFECE9}
@media (min-width:800px){.s2plus .p70{grid-template-columns:auto 1fr auto}.s2plus .p70g{grid-column:auto}}
.s2plus .p70:hover{background:#06324a}

/* ===== home hero: slides (one real photo per activity) + rotating headline; kicker, lead and buttons stay fixed ===== */
.s2hero .px.hs{position:relative;overflow:hidden;aspect-ratio:16/10;min-height:240px}
.s2hero .px.hs .sl{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .9s ease,visibility 0s linear .9s}
.s2hero .px.hs .sl.on{opacity:1;visibility:visible;transition:opacity .9s ease,visibility 0s}
.s2hero .px.hs .sl picture{display:block;width:100%;height:100%}
.s2hero .px.hs .sl img{display:block;width:100%;height:100%;min-height:0;object-fit:cover}
@media (min-width:900px){.s2hero .px.hs{aspect-ratio:auto;min-height:520px}}
.s2hero h1.stk{display:grid}
.s2hero h1.stk .ht{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s linear .6s}
.s2hero h1.stk .ht.on{opacity:1;visibility:visible;transition:opacity .6s ease,visibility 0s}
.s2hero .hdots{position:absolute;z-index:2;inset-block-end:8px;inset-inline-start:8px;display:flex;background:rgba(0,38,58,.74)}
.s2hero .hs:not(.live) .hdots{display:none}
.s2hero .dt{width:44px;height:44px;display:grid;place-items:center;background:none;border:0;padding:0;cursor:pointer}
.s2hero .dt i{display:block;width:10px;height:10px;border-radius:50%;border:1.5px solid #fff;transition:width .3s ease,background .3s ease}
.s2hero .dt.on i{width:22px;border-radius:5px;background:var(--beige);border-color:var(--beige)}
@media (prefers-reduced-motion:reduce){.s2hero .px.hs .sl,.s2hero .px.hs .sl.on,.s2hero h1.stk .ht,.s2hero h1.stk .ht.on,.s2hero .dt i{transition:none}}

/* ===== portal menu: third door (field team) ===== */
.pgate .pg a.tm{border-inline-start-color:#B5ABA3;background:#F5F2EF}

/* ===== final hero: fixed text; the photo alone changes; activity label on top; bar with dots and a pause button ===== */
.s2plus .p70n{display:flex;flex-direction:column;align-items:center;line-height:1}
.s2plus .p70n small{font:600 .85rem "Noto Kufi Arabic","Noto Sans",sans-serif;color:#c9d6de;letter-spacing:0;margin-bottom:.15rem}
.s2plus .p70n b{font:900 clamp(2.6rem,7vw,4.2rem)/1 "Noto Sans",sans-serif;color:var(--beige);letter-spacing:-.02em}
.s2hero .px.hs .lbl{position:absolute;z-index:2;inset-block-start:12px;inset-inline-start:12px;background:rgba(0,38,58,.78);color:#fff;border-inline-start:3px solid var(--beige);padding:.35rem .8rem;font-size:.9rem;font-weight:700;line-height:1.5}
.s2hero .hbar{position:absolute;z-index:3;inset-block-end:8px;inset-inline:8px;display:flex;align-items:center;justify-content:space-between;gap:8px;pointer-events:none}
.s2hero .hbar>*{pointer-events:auto}
.s2hero .hdots{position:static;display:flex;background:rgba(0,38,58,.74)}
.s2hero .hpause{width:44px;height:44px;display:grid;place-items:center;background:rgba(0,38,58,.74);color:#fff;border:0;padding:0;cursor:pointer}
.s2hero .hpause:hover{background:rgba(0,38,58,.92)}
.s2hero .hpause .i-play{display:none}
.s2hero .hs.paused .hpause .i-play{display:block}
.s2hero .hs.paused .hpause .i-pause{display:none}
.s2hero .hs:not(.live) .hbar{display:none}
.s2hero .hlink{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;margin-top:.7rem;color:#EFECE9;font-weight:700;text-decoration:none;border-bottom:1px solid var(--beige)}
.s2hero .hlink:hover{color:var(--beige)}

/* the bar falls back to the menu button when the words do not fit with their full spacing (class set by the script in the page tail) */
.s2h.cmp .s2n,.s2h.cmp .pgate{display:none}
.s2h.cmp .menu{display:block}

/* ===== large text / zoom: card grids count columns by their content (rem), so columns drop instead of overflowing ===== */
.units,.s2row .units{grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr))}
.acts,.s2row .acts{grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr))}
.s2aud .grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))}
.svcacts{grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.svcl{grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr))}
.cards2,.cards2.three,.s2row .cards2.docs,.cards2.docs{grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.stats{grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr))}
.steps7,.s2row .steps7{grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr))}
.units>*,.acts>*,.svcacts>*,.cards2>*,.s2aud .grid>*,.stats>*,.steps7>*,.svcl>*{min-width:0;overflow-wrap:anywhere}
.s2ph .in,.s2ph .in.has-img{grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.s2ph .in.has-img{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}}
.s2ph .cp,.s2pi{min-width:0}
.s2ph h1,.s2ph .lead,.s2hero h1{overflow-wrap:anywhere}
.s2f .in{grid-template-columns:minmax(0,1fr)}
@media (min-width:700px){.s2f .in{grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}.s2f .in>.brandcol{grid-column:span 1}}
.s2f .in>*{min-width:0;overflow-wrap:anywhere}
.por,.s2row .por{grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.por,.s2row .por{grid-template-columns:minmax(0,300px) minmax(0,1fr)}}
.por>*,.two>*,.tbl .r>*,.two2>*,.mb>*,.sb>*{min-width:0}
.s2row .tbl .r{grid-template-columns:minmax(0,150px) minmax(0,1fr) auto}
.pl{grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr))}
.pl span{min-width:0;overflow-wrap:anywhere}
@media (min-width:800px){.proof,.s2row .proof{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr)}}
.proof>*,.vids>*{min-width:0}.prf figcaption{overflow-wrap:anywhere}

/* ===== Package 10 (Saud, 2026-10-21). Paste at the END of es.css, so these rules come last. ===== */

/* 1. The quote builder sits on a solid white panel: every text 4.5:1 or more, every chip and field edge 3:1 or more
      (measured with contrast-check.js; before this, labels were 1.85:1 on a see-through navy panel) */
.quote.quote{background:#fff;color:#00263A;border-color:rgba(0,38,58,.18);--soft:#244559;--muted:#4b6270;--stone:#6b6159}
.quote.quote h2,.quote.quote .kicker{color:#00263A}
.quote.quote legend,.quote.quote .qform>label{color:#4b4540!important;font-weight:600!important}
.quote.quote .qhint{color:#4b6270!important}
.quote.quote .chips span{background:#fff;color:#00263A;border-color:rgba(0,38,58,.55)}
.quote.quote .chips input:checked+span{background:#00263A;border-color:#00263A;color:#fff}
.quote.quote textarea{background:#fff;color:#00263A;border-color:rgba(0,38,58,.55);color-scheme:light}
.quote.quote textarea::placeholder{color:#5f6f78}
.quote.quote .qmsg{color:#244559;border-inline-start-color:#6b6159}
.quote.quote .qsend.navy{background:#fff!important;border:1px solid #00263A!important;color:#00263A!important}
.quote.quote .qsend.wa{background:#00263A!important;border:1px solid #00263A!important;color:#fff!important}

/* 2. The «كل الخدمات ←» link in the profile page was navy on navy (1:1) */
.oneplace .morelink{color:#fff!important}

/* 3. The proof section on the home page. Every block keeps the hidden attribute until Mohammed supplies the real
      thing; the section itself stays hidden while all of its blocks are */
.proof .shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:12px}
.proof .shots figure{margin:0;border-radius:.3rem;overflow:hidden;border:1px solid rgba(0,38,58,.18);background:#fff}
.proof .shots img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.proof .shots figcaption{padding:8px 12px;font-size:.88rem;color:#4b6270}
.proof .lic{font-weight:600;margin:14px 0 0}
.proof .maps{display:inline-flex;align-items:center;min-height:44px;margin-top:10px;font-weight:700;color:#00263A}
.proof blockquote{margin:14px 0 0;padding:14px 18px;border-inline-start:3px solid #6b6159;background:#fff;color:#00263A}
.proof blockquote cite{display:block;margin-top:6px;font-style:normal;font-size:.88rem;color:#4b6270}
.proof[hidden],.proof [hidden]{display:none!important}

/* ===================== Quality review 2026-10-22 (Mohammed «ايه»): header row, menu, bottom bar, quote form ===================== */

/* ---- 1. header: one row, one height. Order from the logo: quote (filled) · portals (outline) · language · menu (outline with its word) ---- */
.s2h .act{gap:8px;flex-wrap:nowrap}
.s2h .hb.hq,.s2h .pgate summary,.s2h .menu summary,.s2h .langsw{box-sizing:border-box;height:44px;min-height:44px;border-radius:var(--r);font-size:.88rem;line-height:1}
.s2h .hb.hq{display:inline-flex;align-items:center;justify-content:center;padding:0 .9rem;font-weight:700;white-space:nowrap}
.s2h .hb.hq .s,.s2h .hb.hq .m{display:none}
.s2h .langsw{width:44px;min-width:44px;padding:0}
.s2h .pgate{display:none;position:relative}
.s2h .pgate summary{display:inline-flex;align-items:center;gap:.5rem;padding:0 .9rem;font-weight:700;white-space:nowrap;border:1px solid rgba(255,255,255,.55);background:transparent;color:#fff}
.s2h .pgate summary i{flex:none;width:.5rem;height:.5rem;border:0;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-.28rem;transition:transform .15s}
.s2h .pgate[open] summary i{transform:rotate(225deg);margin-top:.22rem}
.s2h .pgate .pg a.rg{border-inline-start-color:#B5ABA3;background:#fff}
.s2h .pgate .pg a.rg:hover{background:var(--sand)}
.s2h .menu summary{width:auto;min-width:44px;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;padding:0 .85rem;border:1px solid rgba(255,255,255,.55);background:transparent;color:#fff;font-weight:700;white-space:nowrap;cursor:pointer}
.s2h .menu summary span{position:static;width:auto;height:auto;overflow:visible;clip-path:none}
.s2h .menu summary i{flex:none;display:block;width:1.05rem;height:1px;background:#fff;box-shadow:0 -5px 0 #fff,0 5px 0 #fff}
.s2h .menu[open] summary{border-color:var(--beige);color:var(--beige)}
.s2h .menu[open] summary i{background:var(--beige);box-shadow:0 -5px 0 var(--beige),0 5px 0 var(--beige)}
.s2h .hb.hq:hover,.s2h .pgate summary:hover,.s2h .menu summary:hover,.s2h .langsw:hover{border-color:var(--beige)}
@media (max-width:480px){.s2h .in{gap:10px;padding-inline:12px}.s2h .lg img{height:30px}.s2h .act{gap:6px}.s2h .hb.hq,.s2h .menu summary{padding:0 .7rem;font-size:.84rem}}
@media (max-width:429px){html[lang="ar"] .s2h .hb.hq .l{display:none}html[lang="ar"] .s2h .hb.hq .s{display:inline}}
@media (max-width:460px){html[lang="en"] .s2h .hb.hq .l{display:none}html[lang="en"] .s2h .hb.hq .m{display:inline}}
@media (max-width:399px){html[lang="en"] .s2h .hb.hq .m{display:none}html[lang="en"] .s2h .hb.hq .s{display:inline}}
@media (max-width:379px){.s2h .menu summary span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.s2h .menu summary{padding:0;width:44px}}
@media (min-width:768px){.s2h .pgate{display:block}.s2h.cmp .pgate{display:block}}
@media (min-width:1024px){.s2h .hb.hq,.s2h .pgate summary,.s2h .menu summary,.s2h .langsw{height:46px;min-height:46px;font-size:.9rem}.s2h .langsw{width:46px;min-width:46px}}
/* the full bar from 1200 px (the script in the page tail still drops back to the menu if the words do not fit) */
@media (min-width:1200px){
 .s2n{display:flex;flex:1;min-width:0;justify-content:center;gap:.4rem 28px}
 .s2n a{flex:none;display:inline-flex;align-items:center;min-height:46px;padding:0;color:#fff;text-decoration:none;font-size:.95rem;white-space:nowrap;border-bottom:2px solid transparent}
 .s2n a:hover{color:var(--beige)}
 .s2n a[aria-current]{border-bottom-color:var(--beige);color:var(--beige)}
 .s2h .menu{display:none}
 .s2h.cmp .menu{display:block}
 .s2h .in{gap:1.3rem}
}
@media (max-width:1023px){html:has(.s2h .menu[open]){overflow:hidden}}

/* ---- 2. the menu: every link on one screen (two columns), call / WhatsApp / mail pinned at the bottom ---- */
.s2h .menu nav{position:fixed;top:69px;inset-inline-start:0;inset-inline-end:0;width:auto;max-height:calc(100vh - 69px);max-height:calc(100svh - 69px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:10px 14px 0;margin:0;background:#00263A;border:0;border-bottom:1px solid rgba(181,171,163,.4);border-radius:0;box-shadow:0 18px 30px rgba(0,10,16,.5);display:grid;grid-template-columns:1fr 1fr;gap:2px 10px;align-content:start;z-index:40}
.s2h .menu nav::-webkit-scrollbar{display:block;width:6px}
.s2h .menu nav::-webkit-scrollbar-thumb{background:rgba(181,171,163,.5);border-radius:3px}
.s2h .menu[open] nav a{animation:none}
.s2h .menu nav a{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:.6rem;min-height:48px;padding:.2rem .4rem;border-radius:var(--r);color:#fff;font-size:.92rem;line-height:1.35;white-space:normal;text-decoration:none}
.s2h .menu nav a:hover,.s2h .menu nav a:focus-visible{background:rgba(255,255,255,.1)}
.s2h .menu nav a .ic{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:50%;background:#fff;color:#00263A}
.s2h .menu nav a .ic svg{width:18px;height:18px}
.s2h .menu nav a .lb{text-shadow:none}
.s2h .menu nav a[aria-current] .lb,.s2h .menu nav a:hover .lb{color:var(--beige)}
.s2h .menu nav a[aria-current] .ic,.s2h .menu nav a:hover .ic{background:var(--beige)}
.s2h .menu nav .mg{grid-column:1/-1;margin:.5rem 0 .1rem;padding:.5rem 0 0;border-top:1px solid rgba(181,171,163,.3);font-size:.82rem;font-weight:700;color:var(--beige)}
.s2h .menu nav .mg:first-child{margin-top:0;padding-top:0;border-top:0}
.s2h .menu nav .mg.ct{color:#EFECE9}
.s2h .menu nav .mrow{grid-column:1/-1;position:sticky;bottom:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:.35rem -14px 0;padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));background:#00263A;border-top:1px solid rgba(181,171,163,.3);box-shadow:0 -14px 14px -8px #00263A}
.s2h .menu nav .mrow a{flex-direction:row;justify-content:center;gap:.4rem;min-height:46px;padding:0 .3rem;border:1px solid rgba(255,255,255,.45);font-size:.9rem}
.s2h .menu nav .mrow a .ic{width:22px;height:22px;background:transparent;color:#fff}
.s2h .menu nav .mrow a .ic svg{width:18px;height:18px}
.s2h .menu nav .mrow a:hover .ic{background:transparent}
@media (min-width:700px){
 .s2h .menu nav{top:76px;inset-inline-start:auto;inset-inline-end:clamp(16px,4vw,40px);width:min(600px,calc(100vw - 32px));max-height:calc(100vh - 92px);max-height:calc(100svh - 92px);border:1px solid rgba(181,171,163,.4);padding-inline:16px}
 .s2h .menu nav .mrow{margin-inline:-16px;padding-inline:16px}
}

/* ---- 3. bottom bar on phone and tablet (replaces the floating WhatsApp button there); both step aside while the quote form is on screen ---- */
.mbar{display:none}
.fab{transition:opacity .2s}
body.on-quote .fab{opacity:0;pointer-events:none;visibility:hidden}
@media (max-width:1023px){
 .fab{display:none!important}
 .mbar{display:flex;gap:8px;position:fixed;inset-inline:0;bottom:0;z-index:30;padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));background:#00263A;border-top:1px solid rgba(181,171,163,.4);transition:transform .2s,visibility 0s}
 .mbar a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 .6rem;border-radius:var(--r);font-size:.9rem;font-weight:700;text-decoration:none;color:#fff;border:1px solid rgba(255,255,255,.55);flex:1 1 0;white-space:nowrap}
 .mbar a.mq{flex:1.7 1 0;background:#B5ABA3;border-color:#B5ABA3;color:#00263A}
 body.on-quote .mbar{transform:translateY(110%);visibility:hidden;transition:transform .2s,visibility 0s .2s}
 body.s2{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
}
@media print{.mbar{display:none!important}}

/* ---- 4. the quote form: shorter, several services, selects for place and city, same container on every page ---- */
.quote.quote{padding:clamp(16px,4vw,32px);gap:clamp(14px,3vw,32px);align-items:start}
.quote.quote .sec{gap:8px}
.quote.quote .sub{margin:0;font-size:.95rem;line-height:1.7}
.quote.quote .qhow{display:none;list-style:none;margin:6px 0 4px;padding:0;gap:10px;counter-reset:qh}
.quote.quote .qhow li{counter-increment:qh;display:flex;align-items:center;gap:.7rem;font-weight:700;color:#00263A}
.quote.quote .qhow li::before{content:counter(qh);display:grid;place-items:center;width:32px;height:32px;flex:none;border:1px solid #00263A;border-radius:var(--r);font-family:"Noto Sans",sans-serif;font-size:.9rem}
.quote.quote .qhint{margin:0;font-size:.9rem;font-weight:600;color:#4b6270!important}
.quote.quote .qform{gap:14px}
.quote.quote fieldset{min-width:0}
.quote.quote legend,.quote.quote .qf>span,.quote.quote .qmt{display:block;margin:0 0 6px;padding:0;font-size:.88rem;font-weight:700;color:#4b4540}
.quote.quote legend small{font-weight:400;color:#4b6270}
.qchips{display:flex;flex-wrap:wrap;gap:8px}
.qchips label{position:relative;display:inline-flex;cursor:pointer}
.qchips input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.qchips span{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 .85rem;border:1px solid rgba(0,38,58,.55);border-radius:var(--r);background:#fff;color:#00263A;font-size:.92rem;line-height:1.3;text-align:center}
.qchips label:hover span{border-color:#00263A}
.qchips input:checked+span{background:#00263A;border-color:#00263A;color:#fff;font-weight:700}
.qchips input:checked+span::before{content:"\2713";margin-inline-end:.4rem}
.qchips input:focus-visible+span{outline:2px solid #00263A;outline-offset:2px}
.qchips.c4{flex-wrap:nowrap}
.qchips.c4 label{flex:1 1 0;min-width:0}
.qchips.c4 span{width:100%;padding:0 .3rem;font-size:.88rem}
.quote.quote .qrow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.quote.quote .qrow .qa{grid-column:1/-1}
.quote.quote .qf{display:flex;flex-direction:column;min-width:0;margin:0}
.quote.quote .qform>label.qf{font-size:.88rem!important;font-weight:700!important;color:#4b4540!important}
.quote.quote select,.quote.quote .qf input[type=text]{width:100%;min-height:46px;padding:.5rem .8rem;border:1px solid rgba(0,38,58,.55);border-radius:var(--r);background:#fff;color:#00263A;font:inherit;font-size:1rem;line-height:1.3;color-scheme:light}
.quote.quote select{-webkit-appearance:none;appearance:none;padding-inline-end:2.4rem;cursor:pointer;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 4.5l5 5 5-5' fill='none' stroke='%2300263A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat left .85rem center/14px}
html[lang="en"] .quote.quote select{background-position:right .85rem center}
.quote.quote select:focus,.quote.quote .qf input[type=text]:focus,.quote.quote textarea:focus{outline:2px solid #00263A;outline-offset:1px;border-color:#00263A}
.quote.quote .qf input::placeholder,.quote.quote textarea::placeholder{color:#5f6f78}
.quote.quote textarea{min-height:68px;resize:vertical;font-size:1rem}
.quote.quote .qpv{display:block}
.quote.quote .qmsg{margin:0;font-size:.88rem;padding-block:2px}
.quote.quote .qsend,.quote.quote .qsend.wa{align-self:stretch;min-height:48px}
.quote.quote .qnote{margin:0;font-size:.85rem;line-height:1.6;color:#4b6270}
@media (min-width:561px){.quote.quote .qrow{grid-template-columns:1fr 1fr 1fr}.quote.quote .qrow .qa{grid-column:auto}}
@media (min-width:821px){
 .quote.quote{grid-template-columns:.8fr 1.2fr}
 .quote.quote .qhow{display:grid;margin-block:12px 8px}
 .quote.quote .sec{padding-top:4px}
}
@media (min-width:1100px){.quote.quote{grid-template-columns:.75fr 1.25fr}}
@media (max-width:480px){.quote.quote .sec h2{font-size:1.25rem;line-height:1.4}.quote.quote .qchips span{font-size:.9rem}}
.quote.quote{border-radius:var(--r)}
.quote.quote .qsteps i{background:rgba(0,38,58,.15)}
.quote.quote .qsteps i.on{background:#00263A}
.quote.quote textarea{border-radius:var(--r);min-height:56px}
.quote.quote .qsend,.quote.quote .qsend.wa{border-radius:var(--r)}
.quote.quote .qform{gap:12px}
@media (max-height:700px){.s2h .menu nav a{min-height:44px;padding-block:0}.s2h .menu nav .mg{margin-top:.25rem;padding-top:.3rem}.s2h .menu nav .mrow{padding-block:8px}}

/* ---- Wajha's notes (24-10) ---- */
/* 13: on a phone or a tablet the tab strip steps away while the visitor reads down and comes back on the way up; soft edges show that it slides sideways */
@media (max-width:1023px){
 .s2tabs{transition:transform .2s,visibility 0s;background:linear-gradient(to right,#fff 30%,rgba(255,255,255,0)) left center/36px 100% no-repeat local,linear-gradient(to left,#fff 30%,rgba(255,255,255,0)) right center/36px 100% no-repeat local,radial-gradient(farthest-side at 0 50%,rgba(0,38,58,.3),rgba(0,38,58,0)) left center/14px 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,rgba(0,38,58,.3),rgba(0,38,58,0)) right center/14px 100% no-repeat scroll,#fff}
 body.tabs-hide .s2tabs{transform:translateY(-110%);visibility:hidden;transition:transform .2s,visibility 0s .2s}
 /* 14: the bottom bar is the one fixed quote button: the header's copy and the strip's copy go (the buttons inside the page stay) */
 .s2h .hb.hq{display:none!important}
 .s2tabs a[href="#quote"]{display:none}
}
.s2m[hidden],.s2tabs[hidden]{display:none!important}
/* 15: the hint under «الخدمة» is readable (14 px at least) */
.quote.quote legend small{font-size:.9rem}

/* ===== site review 1 (2026-10-26) ===== */
/* ت-1: the services page's H1 is the size of every inner page's */
.svchero h1{font-size:clamp(1.7rem,4.2vw,2.8rem);line-height:1.35}
/* ش-1: no one-word last line in lead lines (headings were balanced already) */
.lead,.lead2,.subt,.sub,.s2ph .lead,.s2hero p.lead{text-wrap:balance}
p,li{text-wrap:pretty}
/* ت-3: on a phone the footer itself reaches the bottom of the page and holds the room for the fixed bar (no empty sand strip under it) */
@media (max-width:1023px){
  body.s2:has(footer.s2f){padding-bottom:0}
  .s2f .in{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
}
/* ش-7: on a tablet the fixed bar is a centred 560 px bar, not the whole width */
@media (min-width:700px) and (max-width:1023px){.mbar{max-width:560px;margin-inline:auto;border-radius:.3rem .3rem 0 0}}
/* ت-4: the header logo (logo-white-hd.svg: the Arabic name 2.1 times bigger, the English wordmark the same width as before, so the logo is taller, not wider) */
.s2h .lg img{height:44px}
@media (min-width:1024px){.s2h .lg img{height:49px}}
@media (max-width:480px){.s2h .lg img{height:39px}}
/* ت-11: the seven activity cards on a phone: name and one line only (the list is on the service's own page) */
@media (max-width:699px){.svca ul{display:none}}

/* ===== breadcrumb (2026-10-26) ===== */
/* the link, the slash and the current page on one line (centred together), one font and size; the current page is told apart by weight and colour only */
.s2ph .crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:0 .5rem;font-size:.85rem;line-height:1.5}
.s2ph .crumbs a,.s2ph .crumbs span{font:inherit;line-height:inherit;display:inline-flex;align-items:center;min-height:44px}
.s2ph .crumbs span{color:#fff;font-weight:700}