:root{--bg:#F7F7F7;--surface:#FFFFFF;--ink:#1F2937;--ink-soft:#4B5563;--muted:#6B7280;
--brand:#8A1538;--brand-2:#D6B25E;--ring:#8A1538;--maxw:1200px;--radius:16px;--shadow:0 10px 30px rgba(17,24,39,.08);}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font:16px/1.6 'Inter','Tajawal',system-ui}
a{color:var(--brand);text-decoration:none}a:hover{text-decoration:underline}
.container{max-width:var(--maxw);width:min(96vw,var(--maxw));margin:0 auto;padding:0 20px}
.site-header{position:sticky;top:0;background:var(--surface);box-shadow:0 1px 0 rgba(0,0,0,.06);z-index:50}
.top-ribbon{height:6px;background:linear-gradient(90deg,var(--brand),var(--brand-2))}
.nav{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{display:flex;align-items:center;gap:12px;font-weight:700;color:var(--ink)}.brand em{font-style:normal;color:var(--ink-soft);font-weight:600}
.logo{width:40px;height:40px;border-radius:9px;object-fit:contain;background:#fff}
.links{display:flex;gap:22px;align-items:center}.links a{color:var(--ink)}.links a.cta{color:#fff}
.mobile-btn{display:none;background:transparent;border:0;color:var(--ink);font-size:22px}
.cta{padding:10px 16px;border-radius:12px;background:var(--brand);color:#fff;font-weight:600;border:1px solid var(--brand);box-shadow:var(--shadow)}
.cta.small{padding:8px 12px}.ghost{padding:10px 16px;border-radius:12px;border:1px solid var(--brand);color:var(--brand);background:transparent;font-weight:600}
.hero{padding:72px 0}.hero-light{background:linear-gradient(180deg,#fff,#faf9f7)}
.hero-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:36px;align-items:center}
.eyebrow{display:inline-block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);background:#f3f4f6;border:1px solid #e5e7eb;padding:6px 10px;border-radius:999px}
h1{font-size:40px;line-height:1.2;margin:14px 0 10px}h2{font-size:28px;margin:0 0 14px}
.lead{font-size:18px;color:var(--ink-soft)}
.hero-actions{display:flex;gap:12px;margin-top:14px}.hero-list .ticks{margin:10px 0 0 18px}
.section{padding:64px 0}.muted{color:var(--muted)}.small{font-size:14px}
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.card{background:var(--surface);border:1px solid #e5e7eb;border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}.card h3{margin:8px 0 6px;font-size:18px}.card .link{font-weight:600}
.narrow{max-width:860px}.bullets{margin:8px 0 0 18px}.links-list{margin:10px 0 0 18px}.ticks{color:var(--ink-soft)}
.callout{background:#fff7ed;border:1px solid #fed7aa;padding:14px;border-radius:12px}
.svc-block{margin-bottom:28px;padding:20px;background:var(--surface);border:1px solid #e5e7eb;border-radius:var(--radius);box-shadow:var(--shadow)}
/* Sticky services subnav */
.subnav-wrap{position:sticky;top:76px;z-index:40;background:linear-gradient(180deg,#ffffff,#faf9f7);border-bottom:1px solid #e5e7eb}
.subnav{display:flex;gap:14px;flex-wrap:wrap;padding:12px 0}
.subnav a{display:inline-block;padding:8px 12px;border:1px solid #e5e7eb;border-radius:999px;background:#fff;color:var(--ink);font-weight:600}
.subnav a.active{border-color:var(--brand);box-shadow:0 0 0 2px rgba(138,21,56,.15)} .svc-block{scroll-margin-top:110px}
.contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:22px}
.contact-form input,.contact-form textarea{width:100%;background:var(--surface);border:1px solid #d1d5db;color:var(--ink);padding:12px 14px;border-radius:12px;outline:none;margin-bottom:10px}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--ring);box-shadow:0 0 0 4px rgba(138,21,56,.12)}
.site-footer{background:var(--surface);border-top:1px solid #e5e7eb;padding:30px 0 60px;color:var(--ink)}
.foot-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr 1fr;gap:18px}.copyright{margin-top:22px;font-size:14px;text-align:center;color:var(--ink-soft)}
html[dir="rtl"] body{font-family:'Tajawal','Inter',system-ui}
html[dir="rtl"] .bullets,html[dir="rtl"] .links-list{margin:8px 18px 0 0}
html[dir="rtl"] .ticks{margin:10px 18px 0 0}
@media (max-width:960px){.hero-grid{grid-template-columns:1fr}h1{font-size:32px}.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.contact-grid{grid-template-columns:1fr}.foot-grid{grid-template-columns:1fr 1fr}.links{display:none}.mobile-btn{display:block}.why-grid{grid-template-columns:1fr 1fr}}

/* === XL polish pack === */
main{min-height:calc(100vh - 300px)} /* keep footer at bottom on tall screens */

/* Wider container on desktops & ultra-wide displays */
@media (min-width:1280px){ :root{ --maxw:1280px } }
@media (min-width:1536px){ :root{ --maxw:1400px } }
@media (min-width:1760px){ :root{ --maxw:1560px } }

/* Typographic scaling on big screens */
@media (min-width:1280px){
  h1{font-size:48px}
  .lead{font-size:20px}
  .logo{width:48px;height:48px}
}
@media (min-width:1536px){
  h1{font-size:56px}
  .hero{padding:92px 0}
  .section{padding:76px 0}
}

/* Make services pill-subnav easier to scan on XL */
@media (min-width:1400px){
  .subnav{gap:16px}
  .subnav a{padding:10px 14px}
}

/* Slightly denser footer on XL so the page doesn't look empty */
@media (min-width:1536px){
  .foot-grid{grid-template-columns:1.2fr .9fr .9fr 1fr}
}

/* Fluid container on ultra-wide screens */
@media (min-width:1280px){ :root{ --maxw: 1360px } }
@media (min-width:1536px){ :root{ --maxw: 1680px } }
@media (min-width:1760px){ :root{ --maxw: 1840px } }
@media (min-width:1920px){ :root{ --maxw: 1960px } }
@media (min-width:2200px){ :root{ --maxw: 2100px } }


/* === Home centering === */
.hero + .section h2{ text-align:center }
.hero + .section .cards{ justify-items:center; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) }
.hero + .section .card{ text-align:center }

.why h2{ text-align:center }
.why .why-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; justify-items:center }
.why .point{ text-align:center; max-width:520px }

@media (min-width:1536px){
  .hero + .section .cards{ grid-template-columns:repeat(5,minmax(0,1fr)) }
}


/* === Why Zero One: elevated card styling === */
.why .why-grid{ gap:22px }
.why .point{
  background: var(--surface);
  border: 1px solid #e5e7eb;
  border-radius: var(--radius);
  padding: 18px 18px 16px;
  box-shadow: var(--shadow);
  position: relative;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.why .point::after{
  content: "";
  position: absolute;
  inset: 0 0 auto 0; /* top bar */
  height: 4px;
  background: linear-gradient(90deg,var(--brand),var(--brand-2));
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}
.why .point h4{
  margin: 8px 0 6px;
  font-size: 18px;
}
.why .point p{ color: var(--ink-soft) }
.why .point:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(138,21,56,.12);
  border-color: rgba(138,21,56,.25);
}

/* Slight polish so featured cards and why cards look cohesive */
.cards .card{
  border: 1px solid #e5e7eb;
}
@media (max-width:768px){
  /* Make the row container the positioning context */
  .nav{ position: relative; }

  /* Target the nav element that has class="links" */
  nav.links{
    display: none;
    position: absolute;
    top: 60px; left: 0; width: 100%;
    background: #ffffff;
    padding: 12px 12px 8px;
    box-shadow: 0 10px 20px rgba(0,0,0,.08);
    border-top: 1px solid #eee;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  nav.links a{
    display:block; width:100%;
    padding: 12px 10px; border-radius: 10px;
  }
  nav.links a:hover{ background:#fafafa; }

  /* Show when JS adds .active */
  nav.links.active{ display:flex !important; }
}

/* Also cover the 769–960 range */
@media (max-width:960px){
  nav.links{ display:none; }
  nav.links.active{ display:flex !important; }
}