/* Shared visual system: type, containers and spacing for the entire homepage. */
@font-face{font-family:'NF Arabic';src:url('assets/noto-sans-arabic.ttf') format('truetype');font-style:normal;font-weight:100 900;font-display:swap}
@font-face{font-family:'NF Sans';src:url('assets/dm-sans.ttf') format('truetype');font-style:normal;font-weight:100 1000;font-display:swap}
:root{--content-width:1344px;--header-height:80px;--radius:28px;--gutter:32px;--ink:#292330;--muted:#716b77;--title-size:40px;--section-space:88px}
body{font-family:'NF Arabic','NF Sans',Arial,sans-serif;font-size:16px;font-weight:400;line-height:1.8}
[dir=ltr] body{font-family:'NF Sans','NF Arabic',Arial,sans-serif;line-height:1.6}
h1,h2,h3{font-weight:600;letter-spacing:0;line-height:1.4}
[dir=ltr] h1,[dir=ltr] h2,[dir=ltr] h3{letter-spacing:-.035em;line-height:1.2}
.section-shell,.content-section{max-width:var(--content-width)}
.header-inner{width:calc(100% - var(--gutter)*2);max-width:var(--content-width);padding:0 16px;gap:24px}
.brand{gap:9px}
.brand-mark{font-family:'NF Sans',Arial,sans-serif;width:44px;height:44px;border-radius:14px;font-size:28px;font-weight:700;letter-spacing:-2px;padding:0 2px 0 0}
.brand-name{font-family:'NF Sans',Arial,sans-serif;font-size:22px;font-weight:700;line-height:1;letter-spacing:-.6px;padding:0}
.desktop-nav{gap:32px}
.nav-link{font-size:16px;font-weight:500;color:#5e5863;gap:10px;padding:10px 0}
.nav-link .icon{width:18px;height:18px}
.button{min-height:48px;padding:12px 28px;font-size:16px;font-weight:600;gap:18px;line-height:1.5}
.button .icon{width:21px;height:21px}
.header-join{margin-inline-start:0;min-width:174px}
.language-link{font-size:14px;font-weight:500;white-space:nowrap;color:#5e5863;min-height:44px;display:inline-flex;align-items:center}

.hero{margin-top:16px}
.hero-main{min-height:396px;padding:32px 64px 24px;gap:56px;grid-template-columns:1fr 1fr}
.hero-copy{padding:0}
.hero h1,[dir=ltr] .hero h1{font-size:52px;font-weight:600;line-height:1.4;letter-spacing:0}
[dir=ltr] .hero h1{font-weight:600;line-height:1.15;letter-spacing:-.025em}
.hero-copy>p{font-size:18px;font-weight:400;line-height:1.85;max-width:440px;margin-top:16px}
[dir=ltr] .hero-copy>p{font-size:20px;line-height:1.5}
.hero-cta,[dir=ltr] .hero-cta{font-size:17px;font-weight:600;min-height:50px;min-width:250px;padding:12px 28px;gap:24px;margin-top:24px}
.hero-cta .icon{width:23px;height:23px}
.hero-secondary,[dir=ltr] .hero-secondary{font-size:14px;font-weight:500;line-height:1.7;margin:14px 0 0;text-underline-offset:5px;padding:0}
.hero-art{width:100%;max-width:430px;height:328px;margin:0 auto}
.hero-portrait{border-radius:45% 45% 22px 22px}
.hero-portrait img{object-position:center 40%}
.floating-photo{width:23%;border-width:3px;box-shadow:0 8px 28px #24153212}
.photo-spa{right:-5%;top:7%}.photo-cleaning{left:-6%;bottom:0}
.hero-services{padding:8px 44px 16px}
.hero-services button,[dir=ltr] .hero-services button{font-size:16px;font-weight:500;min-height:46px;gap:12px;padding:8px 10px}
.hero-services .icon{width:27px;height:27px;stroke-width:1.5}

.services{padding-top:var(--section-space)}
.section-heading{margin-bottom:40px;padding-inline:16px}
.section-heading h2,.how-section h2{font-size:var(--title-size);font-weight:600;line-height:1.4;letter-spacing:0;color:var(--ink)}
.section-heading p{font-size:18px;font-weight:400;line-height:1.8;margin-top:16px;color:var(--muted)}
.directory-link{font-size:15px;font-weight:500;margin-top:18px;gap:10px;text-underline-offset:5px}
.service-grid{gap:24px}
.service-card,.service-card-button{border-radius:24px}
.service-card-button{padding:12px}
.service-image{aspect-ratio:1.5;border-radius:16px}
.service-content{padding:24px 12px 12px}
.service-content h3,[dir=ltr] .service-content h3{font-size:23px;font-weight:600;line-height:1.4;white-space:normal;min-height:0}
.service-content p{font-size:16px;line-height:1.8;margin-top:10px;min-height:58px;color:#61586b}
.round-arrow{width:42px;height:42px;margin-top:18px;box-shadow:none}
.round-arrow .icon{width:21px;height:21px}
.how-section{padding:var(--section-space) 0}
.how-section h2{margin-bottom:36px}
.steps{gap:24px}
.steps li{padding:24px;gap:20px;min-height:126px;border-radius:20px}
.step-number{font-family:'NF Sans',sans-serif;font-size:44px;font-weight:500;letter-spacing:-.04em;padding:0}
.steps h3,[dir=ltr] .steps h3{font-size:20px;font-weight:600;white-space:normal;line-height:1.5;margin-bottom:6px}
.steps p{font-size:15px;line-height:1.8;color:var(--muted)}
.steps .icon{width:28px;height:28px}
.provider{padding:56px 64px 28px}
.provider-main{min-height:420px;gap:48px}
.provider-copy h2,[dir=ltr] .provider-copy h2{font-size:42px;font-weight:600;line-height:1.45;letter-spacing:0}
[dir=ltr] .provider-copy h2{line-height:1.2;letter-spacing:-.035em}
.provider-copy>p{font-size:18px;line-height:1.9;margin-top:18px}
.provider-copy .button{font-size:17px;min-height:50px;min-width:220px;margin-top:24px}
.provider-copy .provider-hint{font-size:14px;margin-top:14px}
.plan-card{padding:28px 22px;min-height:350px;border-radius:24px;max-width:262px}
.plan-card h3{font-size:27px;font-weight:600;line-height:1.4;letter-spacing:0}
.plan-value{font-size:38px;font-weight:600;line-height:1.5}
.plan-icon{width:34px;height:34px}
.optional{font-size:20px;font-weight:500}
.plan-card ul,[dir=ltr] .plan-card ul{font-size:15px;font-weight:500;line-height:1.7;gap:16px;margin-top:24px;text-align:start}
.check{width:22px;height:22px}
.provider-note{font-size:16px;font-weight:400;line-height:1.8;margin-top:24px;padding:15px 20px;border-radius:16px}
.faq{padding:var(--section-space) 16px;gap:64px}
.faq-heading h2,[dir=ltr] .faq-heading h2{font-size:38px;font-weight:600;line-height:1.45;letter-spacing:0}
.faq-heading p{font-size:18px;line-height:1.8;margin-top:16px;color:var(--muted)}
.faq-item{border-radius:20px}
.faq-item summary,[dir=ltr] .faq-item summary{font-size:18px;font-weight:500;line-height:1.7;padding:22px 24px;gap:16px}
.faq-item p{font-size:16px;line-height:1.9;padding:0 24px 24px}
.faq-icon{width:24px;height:24px}
.site-footer{padding:40px max(32px,calc((100% - var(--content-width))/2)) 24px}
.footer-main{padding-bottom:28px;gap:32px}
.footer-main>div>p{font-size:15px;margin-top:14px}
.footer-main nav{font-size:15px;font-weight:500;gap:28px}
.prototype-label{font-size:13px;line-height:1.9}

.mega-menu{padding:24px max(48px,calc((100vw - 1312px)/2)) 24px}
.mega-heading>strong{font-size:22px;font-weight:600}
.mega-columns{gap:36px}
.menu-group summary{font-size:18px;font-weight:600;padding:18px 0 24px}
.menu-group ul{gap:8px}
.menu-group li button,.menu-group li>span{font-size:16px;font-weight:400;min-height:40px;gap:10px;text-align:start}
.menu-group small,[dir=ltr] .menu-group small{font-size:10px;line-height:1.8;padding:2px 8px}
.mega-bottom{font-size:14px;padding-top:22px;margin-top:28px}
dialog{max-width:590px;border-radius:24px}
.dialog-inner{padding:36px}
dialog h2{font-size:28px;font-weight:600;line-height:1.5;letter-spacing:0}
dialog h2+p{font-size:16px;line-height:1.8}
.dialog-kicker{font-size:13px;font-weight:500;line-height:1.8}
.field-label,legend{font-size:15px;font-weight:500}
.choice{font-size:15px;line-height:1.7;min-height:54px;border-radius:12px}
.choice:has(input:checked){font-weight:500}
.full-width{font-size:16px;min-height:50px}

@media(max-width:1199px){
  :root{--gutter:24px;--title-size:36px;--section-space:72px}
  .header-inner{gap:20px;padding-inline:8px}.desktop-nav{gap:26px}.nav-link{font-size:15px}.header-join{min-width:156px;font-size:15px;padding-inline:24px}
  .hero-main{padding:32px 40px 24px;gap:40px;min-height:380px}.hero h1,[dir=ltr] .hero h1{font-size:46px}.hero-art{height:306px;max-width:390px}.hero-cta,[dir=ltr] .hero-cta{min-width:220px}
  .hero-services{padding-inline:24px}.hero-services button,[dir=ltr] .hero-services button{font-size:15px;gap:10px}
  .service-grid{gap:18px}.service-content{padding:20px 8px 8px}.service-content h3,[dir=ltr] .service-content h3{font-size:20px}.service-content p{font-size:15px}
  .steps li{padding:22px 18px;gap:16px}.steps h3,[dir=ltr] .steps h3{font-size:18px}
  .provider{padding:44px 40px 26px}.provider-main{gap:32px}.provider-copy h2,[dir=ltr] .provider-copy h2{font-size:38px}.plan-card{padding:26px 16px;min-height:350px}.plan-card ul,[dir=ltr] .plan-card ul{font-size:14px}
  .faq{gap:40px}.faq-heading h2,[dir=ltr] .faq-heading h2{font-size:34px}
}
@media(max-width:950px){
  .header-inner{justify-content:space-between}.language-link{margin-inline-start:auto;margin-inline-end:8px}
  .hero-main{padding:30px 32px 24px;gap:32px;min-height:350px}.hero h1,[dir=ltr] .hero h1{font-size:38px}.hero-copy>p,[dir=ltr] .hero-copy>p{font-size:16px;line-height:1.8}.hero-art{height:278px}.hero-cta,[dir=ltr] .hero-cta{font-size:15px;min-width:0;gap:20px;padding-inline:24px}.hero-secondary,[dir=ltr] .hero-secondary{font-size:13px}
  .hero-services button,[dir=ltr] .hero-services button{font-size:13px;gap:8px}.hero-services .icon{width:23px;height:23px}
  .service-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.service-content{padding:24px 14px 12px}.service-content h3,[dir=ltr] .service-content h3{font-size:23px}.service-content p{font-size:16px;min-height:0}
  .steps li{gap:12px}.step-number{font-size:40px}.steps p{font-size:14px}
  .provider-main{grid-template-columns:1fr;gap:16px}.provider-copy h2 .line{display:inline}.provider-copy>p .line{display:inline}.provider-copy .button{min-width:220px}.plan-comparison{max-width:540px;margin:12px auto 0}.plan-card{min-height:350px;padding:28px 22px}.plan-card ul,[dir=ltr] .plan-card ul{font-size:15px}
  .faq{padding-inline:0;gap:32px}.faq-heading h2 .line{display:inline}.footer-main nav{gap:24px}
  .mega-menu{padding:16px 28px 24px}.mega-heading{margin-bottom:4px}.menu-group summary{font-size:17px;padding:18px 0}.menu-group ul{padding:0 36px 16px 0}.menu-group li button,.menu-group li>span{font-size:15px;min-height:42px}.mobile-nav{gap:24px;font-size:15px;font-weight:500;padding-top:18px}
  [dir=ltr] .menu-group ul{padding:0 0 16px 36px}
}
@media(max-width:700px){
  :root{--gutter:20px;--header-height:72px;--radius:24px;--title-size:29px;--section-space:60px}
  body{font-size:15px}.header-inner{width:calc(100% - 32px);padding:0 4px;gap:12px}.brand-mark{width:38px;height:38px;font-size:25px;border-radius:12px}.brand-name{font-size:19px}.brand{gap:8px}.language-link{font-size:12px;margin-inline-end:0}
  .hero{margin-top:8px}.hero-main{padding:30px 24px 26px;gap:28px;min-height:0}.hero-copy{text-align:center}.hero h1,[dir=ltr] .hero h1{font-size:35px;line-height:1.4}.hero-copy>p,[dir=ltr] .hero-copy>p{font-size:16px;line-height:1.8;max-width:290px;margin:14px auto 0}.hero-cta,[dir=ltr] .hero-cta{font-size:16px;min-height:48px;padding:11px 26px;margin-top:22px;gap:24px}.hero-secondary,[dir=ltr] .hero-secondary{font-size:13px;margin:14px auto 0;line-height:1.7}
  .hero-art{width:calc(100% - 14px);height:auto;aspect-ratio:1.25;max-width:350px;margin:0 auto}.hero-portrait{border-radius:45% 45% 18px 18px}.hero-portrait img{object-position:center 38%}.floating-photo{width:24%;border-width:2px}
  .hero-services{padding:0 14px 14px}.hero-services button,[dir=ltr] .hero-services button{min-height:50px;font-size:12px;line-height:1.5;gap:8px;padding:8px 4px}.hero-services .icon{width:22px;height:22px}
  .section-heading{padding-inline:0;margin-bottom:30px}.section-heading h2{font-size:var(--title-size);line-height:1.5}.section-heading p{font-size:16px;line-height:1.9;margin-top:14px}.directory-link{font-size:14px;margin-top:16px;gap:8px}
  .service-grid{grid-template-columns:1fr;gap:24px}.service-card{max-width:460px}.service-content h3,[dir=ltr] .service-content h3{font-size:23px}.service-content p{font-size:16px}.round-arrow{margin-top:20px}
  .how-section h2{font-size:28px;line-height:1.5;margin-bottom:28px}.steps{gap:16px}.steps li{padding:24px;gap:18px;min-height:110px}.step-number{font-size:42px}.steps h3,[dir=ltr] .steps h3{font-size:19px}.steps p{font-size:14px}.steps .icon{width:26px;height:26px}
  .provider{padding:36px 22px 22px}.provider-main{gap:24px}.provider-copy h2,[dir=ltr] .provider-copy h2{font-size:31px;line-height:1.5}.provider-copy h2 .line{display:block}.provider-copy>p{font-size:16px;line-height:1.9;margin-top:16px}.provider-copy .button{font-size:16px;min-height:48px;min-width:0;max-width:260px;margin-top:22px}.provider-copy .provider-hint{font-size:13px;margin-top:12px}.plan-comparison{padding:0;gap:18px;margin:0}.plan-card{max-width:360px;min-height:0;padding:28px 24px;border-radius:20px}.plan-card h3{font-size:25px}.plan-value{font-size:34px}.optional{font-size:18px}.plan-card ul,[dir=ltr] .plan-card ul{font-size:15px;gap:16px}.provider-note{font-size:14px;line-height:1.9;padding:14px;margin-top:24px}
  .faq{gap:28px}.faq-heading{padding:0}.faq-heading h2,[dir=ltr] .faq-heading h2{font-size:29px;line-height:1.5}.faq-heading p{font-size:16px;margin-top:12px}.faq-item summary,[dir=ltr] .faq-item summary{font-size:16px;line-height:1.7;padding:20px 16px;gap:12px}.faq-icon{width:22px;height:22px}.faq-item p{font-size:15px;padding:0 20px 22px}
  .site-footer{padding:32px 24px 24px}.footer-main{gap:24px}.footer-main>div>p{font-size:14px}.footer-main nav{font-size:14px;gap:22px}.prototype-label{font-size:12px}
  .mega-menu{padding:16px 24px 24px}.mega-heading>strong{font-size:20px}.menu-group summary{font-size:17px}.mega-bottom>span{font-size:13px}.mega-bottom>.text-button{font-size:15px}.menu-group small{font-size:10px}
  dialog{width:calc(100% - 24px);border-radius:22px}.dialog-inner{padding:28px 22px}dialog h2{font-size:25px}dialog h2+p{font-size:15px}.dialog-kicker{font-size:12px}.choice{font-size:15px;min-height:54px;padding:14px}.full-width{font-size:15px}
}
@media(max-width:360px){
  :root{--gutter:16px}.hero-main{padding-inline:20px}.hero h1,[dir=ltr] .hero h1{font-size:30px}.hero-copy>p,[dir=ltr] .hero-copy>p{font-size:15px}.hero-cta,[dir=ltr] .hero-cta{font-size:15px;padding-inline:22px}.hero-services button,[dir=ltr] .hero-services button{font-size:11px}.hero-services .icon{width:20px;height:20px}.section-heading h2{font-size:27px}.steps li{padding:20px;gap:16px}.provider-copy h2,[dir=ltr] .provider-copy h2{font-size:28px}.faq-heading h2,[dir=ltr] .faq-heading h2{font-size:27px}.faq-item summary,[dir=ltr] .faq-item summary{font-size:15px}
}