/* ARCUSITE refined layout: stone, graphite and architectural navy. */
:root{
  --font-ar:"Tajawal",system-ui,sans-serif;
  --bg-0:#f6f8fa;
  --bg-1:#ffffff;
  --bg-2:#fcfdff;
  --bg-3:#edf2f6;
  --text:#202d39;
  --muted:#536272;
  --faint:#667687;
  --line:rgba(31,58,85,.11);
  --line-strong:rgba(31,58,85,.18);
  --blue-glow:rgba(49,81,126,.16);
  --radius:20px;
  --radius-sm:11px;
  --container:1320px;
  --header-h:82px;
}

html{scroll-padding-top:calc(var(--header-h) + 20px)}
body{font-size:clamp(16px,1.05vw,18px);line-height:1.7}
html[dir="rtl"] body{line-height:1.75}
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3{line-height:1.28}
h1,h2,h3,h4{font-weight:700;letter-spacing:0}
p{max-width:80ch}
picture{display:block}
img{height:auto}
.container{width:100%;padding-inline:clamp(20px,4.4vw,68px)}
.skip-link{position:fixed;z-index:1001;inset-block-start:10px;inset-inline-start:12px;padding:10px 18px;border-radius:9px;background:#fff;color:var(--blue-700);box-shadow:0 10px 32px rgba(20,40,60,.18);transform:translateY(-160%)}
.skip-link:focus{transform:none}

/* Navigation */
.site-header{background:rgba(255,255,255,.9);border-bottom:1px solid var(--line);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.site-header.scrolled{background:rgba(255,255,255,.95);box-shadow:0 8px 28px rgba(27,51,80,.075)}
.header-inner{gap:clamp(12px,1.6vw,25px)}
.brand{flex:none}
.brand-name b{font-weight:800;letter-spacing:.17em}
html[dir="rtl"] .brand-name b{letter-spacing:.17em}
.main-nav{gap:2px}
.main-nav a{padding:10px clamp(7px,.7vw,12px);font-size:.9rem;white-space:nowrap;border-radius:9px}
.main-nav a:hover,.main-nav a:focus-visible{background:#eef3f8;color:var(--blue-700)}
.main-nav a.active{background:#eaf1f7;color:var(--blue-700)}
.main-nav a.active::after{display:none}
.header-cta{flex:none}
.lang-switch{background:#f4f7fa;border-color:var(--line);padding:3px;gap:1px}
.lang-switch button{min-height:36px;padding:7px 11px;border-radius:999px;color:var(--muted)}
.lang-switch button.active{background:#fff;color:var(--blue-700);box-shadow:0 2px 8px rgba(27,51,80,.1)}
.btn{font-weight:700;letter-spacing:0;border-radius:10px;box-shadow:none;line-height:1.2}
.btn-primary{background:linear-gradient(145deg,#355983,#233f63);box-shadow:0 9px 22px rgba(35,63,99,.18)}
.btn-primary:hover{box-shadow:0 13px 28px rgba(35,63,99,.22)}
.btn-ghost{background:rgba(255,255,255,.8);border-color:var(--line-strong)}
.nav-toggle{border-radius:10px;background:#f6f8fa}

/* Type hierarchy and section rhythm */
.hero{min-height:min(760px,100svh);padding-block:calc(var(--header-h) + 76px) 92px}
.hero-inner{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(35px,5vw,80px)}
.hero-copy h1{font-size:clamp(2.4rem,4.6vw,4.45rem);line-height:1.14;margin-bottom:26px}
.hero-copy .lede{font-size:clamp(1rem,1.25vw,1.15rem);line-height:1.75;margin-bottom:30px}
.hero-actions{gap:12px;margin-bottom:36px}
.hero-stats{gap:18px 32px;padding-top:24px}
.stat b{font-size:clamp(1.5rem,2.2vw,2rem)}
.stat span{font-size:.88rem}
.hero-visual{min-height:clamp(400px,39vw,520px)}
.hero-visual .arch-frame{border-radius:220px 220px 18px 18px;box-shadow:0 28px 70px rgba(25,46,68,.17)}
.hero-visual .arch-ring{border-radius:240px 240px 22px 22px;inset:-16px}
.hero-badge{inset-inline-start:-14px;bottom:22px;padding:14px 18px;box-shadow:0 14px 34px rgba(25,46,68,.13)}
.hero-skyline{opacity:.42}
.section{padding-block:clamp(70px,7.5vw,112px)}
.section-head{margin-bottom:clamp(30px,4vw,52px)}
.eyebrow{font-size:.83rem;letter-spacing:.12em;margin-bottom:13px}
html[dir="rtl"] .eyebrow{letter-spacing:0}
.eyebrow::before{width:25px}
.section-title{font-size:clamp(1.85rem,3.15vw,3rem);line-height:1.26;margin-bottom:16px}
.section-sub{font-size:clamp(1rem,1.2vw,1.13rem);line-height:1.7}
.statement blockquote{font-size:clamp(1.2rem,2.05vw,1.8rem);line-height:1.65;max-width:860px}
.page-hero{padding-block:calc(var(--header-h) + clamp(48px,6vw,86px)) clamp(54px,6vw,82px)}
.page-hero h1{font-size:clamp(2rem,3.7vw,3.55rem);max-width:22ch;line-height:1.22}
.page-hero .lede{line-height:1.7}
.breadcrumbs{margin-bottom:18px}

/* Editorial cards and image framing */
.services-grid,.portfolio-grid,.blog-grid,.tiers{gap:clamp(16px,2vw,24px)}
.service-card,.tier,.project-card,.blog-card,.trust-item,.contact-card,.form-card,.case{
  border-color:var(--line);background:#fff;
  box-shadow:0 5px 24px rgba(28,51,75,.045);
}
.service-card{padding:clamp(25px,2.5vw,34px);min-width:0}
.service-card:hover,.project-card:hover,.blog-card:hover{transform:translateY(-4px);border-color:rgba(49,81,126,.26);box-shadow:0 17px 42px rgba(28,51,75,.11)}
.service-icon{width:54px;height:54px;border-radius:13px;background:#edf4f9;border-color:#dde9f3;margin-bottom:22px}
.service-card h3,.project-body h3,.blog-body h3{line-height:1.32}
.service-card p,.tier p,.blog-body p{line-height:1.65}
.service-card .en-sub{letter-spacing:.11em;margin-bottom:12px}
.project-thumb,.blog-thumb{background:#e9eef3}
.project-body,.blog-body{padding:clamp(20px,2vw,27px)}
.project-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
.tier-photo{margin:-34px -30px 24px}
.tier.featured{background:linear-gradient(180deg,#f1f6fa,#fff 42%);box-shadow:0 12px 36px rgba(28,51,75,.09)}
.trust-item,.contact-card{padding:clamp(18px,2vw,26px)}
.case{box-shadow:0 6px 25px rgba(28,51,75,.05)}
.form-card{box-shadow:0 16px 46px rgba(28,51,75,.08)}
.field input,.field select,.field textarea{border-radius:10px}
.cta-band{background:radial-gradient(650px 360px at 84% -10%,rgba(98,151,194,.2),transparent 65%),linear-gradient(145deg,#223e60,#142c45);border-radius:22px}
.cta-band p{max-width:62ch}
.site-footer{background:#eef2f5}
.footer-grid{gap:clamp(26px,3vw,48px)}
.reveal{opacity:1;transform:none}
.js-enabled .reveal{opacity:0;transform:translateY(20px)}
.js-enabled .reveal.revealed{opacity:1;transform:none}

/* Comfortable medium and small screens */
@media(max-width:1180px){
  .main-nav{position:fixed;top:var(--header-h);inset-inline:0;bottom:0;display:flex;flex-direction:column;align-items:stretch;gap:2px;overflow-y:auto;padding:22px clamp(20px,5vw,48px) 44px;background:rgba(249,251,253,.98);backdrop-filter:blur(20px);transform:translateY(-8px);opacity:0;pointer-events:none;visibility:hidden;transition:opacity .25s ease,transform .25s ease,visibility .25s}
  .main-nav.open{transform:none;opacity:1;pointer-events:auto;visibility:visible}
  .main-nav a{font-size:1.1rem;padding:14px 16px;border:0;white-space:normal}
  .nav-toggle{display:inline-flex}
  .header-cta .btn{display:none}
  .header-inner{justify-content:space-between}
  .main-nav{margin:0}
}
@media(max-width:960px){
  .hero{min-height:auto;padding-block:calc(var(--header-h) + 58px) 82px}
  .hero-inner{grid-template-columns:1fr;gap:54px}
  .hero-copy{max-width:760px}
  .hero-visual{min-height:clamp(340px,55vw,520px);width:min(100%,720px);margin-inline:auto}
  .hero-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
  .split,.contact-grid{gap:36px}
}
@media(max-width:640px){
  :root{--header-h:70px;--radius:16px}
  .container{padding-inline:20px}
  .site-header{height:var(--header-h)}
  .brand img{width:42px;height:40px}
  .brand-name{display:flex}
  .brand-name b,html[dir="rtl"] .brand-name b{font-size:.98rem;letter-spacing:.1em}
  .brand-name span{display:none}
  .header-inner{gap:8px}
  .header-cta{gap:8px}
  .lang-switch button{padding:6px 9px;font-size:.78rem;min-height:32px}
  .nav-toggle{width:42px;height:42px}
  .hero{padding-block:calc(var(--header-h) + 45px) 64px}
  .hero-copy h1{font-size:clamp(2.05rem,8vw,3.1rem);margin-bottom:20px}
  .hero-copy .lede{font-size:1rem}
  .hero-actions{margin-bottom:30px}
  .hero-actions .btn{min-height:48px;padding:12px 18px}
  .hero-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .hero-visual{min-height:clamp(280px,87vw,420px);margin-inline:auto}
  .hero-visual .arch-frame{border-radius:48% 48% 15px 15px}
  .hero-visual .arch-ring{inset:-10px;border-radius:49% 49% 18px 18px}
  .hero-badge{inset-inline-start:4px;inset-inline-end:4px;bottom:12px;padding:10px 12px;gap:9px}
  .hero-badge svg{width:26px;height:26px}
  .hero-badge b{font-size:.85rem}
  .hero-badge span{font-size:.74rem}
  .section{padding-block:62px}
  .page-hero{padding-block:calc(var(--header-h) + 44px) 53px}
  .page-hero h1{font-size:clamp(1.9rem,7.5vw,2.55rem)}
  .services-grid,.portfolio-grid,.blog-grid,.tiers{grid-template-columns:1fr}
  .process-track::before{inset-inline-start:25px}
  .step{gap:16px}
  .step-num{width:52px;height:52px}
  .step h3{margin:5px 0 5px}
  .ba-wrap{aspect-ratio:4/3}
  .ba-tag{top:10px;padding:5px 10px;font-size:.72rem}
  .ba-tag.before{inset-inline-start:8px}
  .ba-tag.after{inset-inline-end:8px}
  .case dl{grid-template-columns:1fr;gap:1px}
  .case dd{margin-bottom:10px}
  .contact-card{min-width:0}
  .contact-card span{overflow-wrap:anywhere}
  .form-row{grid-template-columns:1fr}
  .cta-band{padding:40px 22px}
  .cta-band .hero-actions{flex-direction:column;align-items:stretch}
  .cta-band .btn{width:100%}
}
@media(max-width:380px){
  .container{padding-inline:16px}
  .header-cta{gap:5px}
  .lang-switch button{padding-inline:7px}
  .brand{gap:6px}
  .brand img{width:35px}
  .brand-name b,html[dir="rtl"] .brand-name b{font-size:.86rem}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{width:100%}
  .hero-copy h1{font-size:1.9rem}
  .project-meta{gap:10px}
}
@media(prefers-reduced-motion:reduce){
  .main-nav{transition:none}
  .js-enabled .reveal{opacity:1;transform:none}
}