/* Shared Almuhallab brand layer — 2026-10-10.
   Loaded last so legacy page templates share one logo, palette, spacing scale,
   focus treatment and mobile behavior while keeping their product logic. */
@font-face{font-family:"Cairo";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/cairo-400.woff2") format("woff2")}
@font-face{font-family:"Cairo";font-style:normal;font-weight:500 600;font-display:swap;src:url("/fonts/cairo-500.woff2") format("woff2")}
@font-face{font-family:"Cairo";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/cairo-700.woff2") format("woff2")}
@font-face{font-family:"Cairo";font-style:normal;font-weight:800 900;font-display:swap;src:url("/fonts/cairo-800.woff2") format("woff2")}

:where(a,button,input,select,textarea,summary):focus-visible{outline:3px solid #d89b45;outline-offset:3px}
.skip{position:fixed;z-index:9999;inset-block-start:10px;inset-inline-start:10px;transform:translateY(-160%);padding:10px 14px;border-radius:10px;background:#14212d;color:#fff!important;font-weight:800;text-decoration:none;box-shadow:0 8px 30px rgba(20,33,45,.22)}
.skip:focus{transform:none}
.brand-logo-wide{display:block;width:clamp(150px,18vw,230px);height:auto}

/* The service pages now use the same cool neutral and amber system as the
   current company mark. Their step and FAQ sections become single surfaces,
   cutting the number of separate floating boxes without losing hierarchy. */
.service-page{
  --bg:#f3f6f8;--surface:#fff;--surface-2:#e8eef2;
  --ink:#14212d;--ink-soft:#41515e;--muted:#697985;
  --brown:#b87827;--brown-deep:#8f5715;
  --line:#dce4ea;--radius:16px;
  --shadow-sm:0 1px 2px rgba(20,33,45,.04),0 10px 28px rgba(20,33,45,.055);
  --shadow-md:0 6px 18px rgba(20,33,45,.08),0 22px 52px rgba(20,33,45,.1);
  --font-ar-display:"Cairo",system-ui,sans-serif;
  --font-en-display:"Cairo",system-ui,sans-serif;
  --font-body:"Cairo",system-ui,sans-serif;
  background-image:radial-gradient(circle at 12% 3%,rgba(216,155,69,.10),transparent 27rem),linear-gradient(#f8fafb 0,#f3f6f8 34rem);
}
.service-page>nav{top:10px;margin:10px 12px 0;border:1px solid rgba(220,228,234,.92);border-radius:16px;background:rgba(255,255,255,.9);box-shadow:0 10px 32px rgba(20,33,45,.07)}
.service-page .nav-row{min-height:70px;padding:10px 18px}
.service-page .brand{flex:0 1 auto;letter-spacing:0}
.service-page .brand-logo-wide{width:clamp(160px,18vw,218px);padding:7px 10px;border-radius:12px;background:#14212d}
.service-page .nav-cta{color:#14212d;letter-spacing:.04em}
.service-page .lang-toggle{min-width:48px;min-height:44px;border-radius:11px;background:#14212d}
.service-page .crumbs{position:static;margin:0;padding:26px 0 0;background:transparent;box-shadow:none;border-radius:0}
.service-page .crumbs a:hover,.service-page .nav-cta:hover{color:#a8661e}
.service-page header.svc-hero{padding-block:42px 24px}
.service-page .sec-label{padding:5px 10px;border:1px solid rgba(184,120,39,.28);border-radius:999px;background:rgba(255,255,255,.7);letter-spacing:.12em}
.service-page h1.svc-title{max-width:15ch;color:#14212d;font-size:clamp(36px,6.5vw,66px)}
.service-page .hr-wave{opacity:.78}
.service-page section{padding-block:48px}
.service-page .grid{gap:14px}
.service-page .card{padding:23px;border-radius:16px;border-color:#dce4ea;box-shadow:var(--shadow-sm)}
.service-page .card:hover{transform:translateY(-2px);border-color:rgba(184,120,39,.45);box-shadow:var(--shadow-md)}
.service-page .num{border-radius:10px;background:#eef2f5;color:#a8661e}
.service-page .steps{gap:0;overflow:hidden;border:1px solid #dce4ea;border-radius:16px;background:#fff;box-shadow:var(--shadow-sm)}
.service-page .step{border:0;border-radius:0;background:transparent;box-shadow:none}
.service-page .step+.step{border-top:1px solid #e3e9ed}
.service-page details.faq{margin:0;padding:19px 4px;border:0;border-bottom:1px solid #dce4ea;border-radius:0;background:transparent}
.service-page details.faq:first-of-type{border-top:1px solid #dce4ea}
.service-page .cta{border:1px solid #283a49;border-radius:20px;background:linear-gradient(145deg,#14212d,#1e3445);box-shadow:0 22px 55px rgba(20,33,45,.16)}
.service-page .pill{box-shadow:none}
.service-page footer{padding-block:38px 48px;border-top:1px solid #dce4ea}

/* The live system keeps its dense application layout, but moves onto the
   lighter company palette. A dark masthead preserves clear product context. */
.nizam-page{
  color-scheme:light;
  --bg:#f3f6f8;--panel:#fff;--panel-2:#eef2f5;--panel-3:#e4ebf0;
  --border:#d7e0e6;--border-input:#aab8c2;
  --text:#14212d;--muted:#5f707c;
  --tint:#ad6d20;--tint-hover:#925716;--on-tint:#fff;
  --stripe:#d3a15e;--tint-strong:#14212d;--on-bar:#f7fafc;
  --on-bar-bd:#718391;--on-bar-fill:#223645;
  --sand:#b07a1f;--good:#16734b;--danger:#b63a36;--info:#276db4;
  --warn-bg:#fff9ea;--viz-zero:#82909a;--viz-grid:#dfe6eb;
  --ord-1:#f0dfc7;--ord-2:#dfbd8c;--ord-3:#cc9955;--ord-4:#b87a29;--ord-5:#955b17;
  --viz-pos:#198557;--viz-neg:#c14742;
  background-image:radial-gradient(circle at 12% 0,rgba(216,155,69,.09),transparent 32rem);
}
.nizam-page .topbar header{background:#14212d;border-bottom-color:#263b4a}
.nizam-page .brand{gap:14px}
.nizam-page .brand-logo-link{display:flex;align-items:center;padding:5px 8px;border-radius:10px;background:#0d1821;text-decoration:none}
.nizam-page .brand-logo-wide{width:clamp(145px,16vw,205px)}
.nizam-page .brand h1{font-size:16px}.nizam-page .brand small{font-size:11px;color:#c8d3da}
.nizam-page nav.tabs{background:rgba(255,255,255,.96);box-shadow:0 8px 26px rgba(20,33,45,.07)}
.nizam-page .tile,.nizam-page .flow,.nizam-page .orders,.nizam-page form,.nizam-page table{box-shadow:0 8px 28px rgba(20,33,45,.045)}
.nizam-page footer.site{background:linear-gradient(90deg,transparent,rgba(184,120,39,.42),transparent) top/100% 1px no-repeat}

/* Clear direct links on the homepage service cards. */
.service-more{display:inline-flex;align-items:center;justify-content:center;min-height:40px;margin-top:auto;padding:8px 12px;border:1px solid var(--border);border-radius:9px;color:var(--tint);font-size:12.5px;font-weight:800;text-decoration:none}
.service-more:hover{border-color:var(--tint);background:var(--panel-2)}

@media(max-width:640px){
  .service-page>nav{top:6px;margin:6px 8px 0;border-radius:14px}
  .service-page .nav-row{min-height:62px;padding:8px 10px}
  .service-page .brand-logo-wide{width:140px;padding:6px 8px}
  .service-page .nav-cta{font-size:12px}
  .service-page .lang-toggle{padding:8px 12px}
  .service-page section{padding-block:38px}
  .service-page header.svc-hero{padding-block:32px 14px}
  .service-page .card{padding:20px}
  .service-page .step{padding:18px}
  .nizam-page .topbar header{padding:10px 14px}
  .nizam-page .brand{width:100%;justify-content:space-between;gap:8px}
  .nizam-page .brand-logo-wide{width:138px}
  .nizam-page .brand>div{min-width:0;text-align:end}
  .nizam-page .brand small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}.service-page .reveal{opacity:1!important;transform:none!important;transition:none!important}}
/* Almuhallab mobile spacing system — 2026-10-10.
   One phone gutter and one component rhythm across every public experience. */
@media (max-width: 640px) {
  :root {
    --mobile-gutter: 20px;
    --mobile-card-pad: 18px;
    --mobile-section-gap: 44px;
  }

  html {
    overflow-x: clip;
    scroll-padding-top: 9rem;
  }

  body {
    max-width: 100%;
    overflow-x: clip;
  }

  :where(button, .btn, .service-more, .pill, .channel, .nav-cta, .lang-toggle) {
    min-height: 44px;
  }

  /* Company homepage */
  .home-page {
    --page-gutter: var(--mobile-gutter);
    --card-padding: var(--mobile-card-pad);
  }

  .home-page > header,
  .home-page > main,
  .home-page .fcols,
  .home-page .base {
    padding-left: max(var(--mobile-gutter), env(safe-area-inset-left));
    padding-right: max(var(--mobile-gutter), env(safe-area-inset-right));
  }

  .home-page > header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding-top: max(10px, env(safe-area-inset-top));
    padding-bottom: 10px;
  }

  .home-page > header .brand {
    width: 100%;
    min-width: 0;
    margin: 0;
    flex-direction: row;
    justify-content: space-between;
    gap: 12px;
    text-align: start;
  }

  .home-page > header .brand .logo {
    width: clamp(138px, 42vw, 166px);
  }

  .home-page > header .brand .term {
    min-width: 0;
    max-width: 154px;
    justify-content: flex-end;
    gap: 5px;
    font-size: 11px;
    text-align: end;
    white-space: nowrap;
  }

  .home-page > header nav.site {
    width: 100%;
    padding: 3px;
    gap: 3px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    background: rgba(255, 255, 255, .035);
  }

  .home-page > header nav.site a,
  .home-page > header nav.site a.btn {
    min-height: 44px;
    padding: 8px 4px;
    border-radius: 9px;
    font-size: 12px;
  }

  html.scrolled .home-page > header {
    gap: 6px;
  }

  html.scrolled .home-page > header .brand .logo {
    width: 138px;
  }

  .home-page > main {
    padding-top: 20px;
    padding-bottom: calc(52px + env(safe-area-inset-bottom));
  }

  .home-page :is(#services, #process) {
    padding-inline: 0;
  }

  .home-page :is(.slider, .proc, .work, .contact) {
    margin-block: 0 var(--mobile-section-gap);
  }

  .home-page .rowhead {
    gap: 14px;
    margin-bottom: 16px;
  }

  .home-page .rail {
    gap: 14px;
  }

  .home-page #nokhatha .rail {
    grid-template-columns: repeat(4, minmax(0, calc(100vw - (2 * var(--mobile-gutter)))));
  }

  .home-page #services .rail {
    grid-template-columns: repeat(7, minmax(0, calc(100vw - (2 * var(--mobile-gutter)))));
  }

  .home-page :is(.card, .product, .qform, .channel) {
    padding: var(--mobile-card-pad);
  }

  .home-page .nokhatha-stats {
    padding: 16px;
    gap: 16px 10px;
  }

  .home-page .hero {
    padding-block: 20px 34px;
  }

  .home-page .hero .actions {
    gap: 12px;
  }

  .home-page .hero .actions .btn,
  .home-page .qform .send {
    width: 100%;
    justify-content: center;
    padding-inline: 18px;
  }

  .home-page .channels {
    gap: 12px;
  }

  .home-page .fcols {
    padding-top: 30px;
    padding-bottom: 24px;
    gap: 26px 20px;
  }

  .home-page .base {
    padding-top: 18px;
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
  }

  /* Nokhatha product portal */
  .nokhatha-page > header,
  .nokhatha-page > main,
  .nokhatha-page > footer {
    padding-left: max(var(--mobile-gutter), env(safe-area-inset-left));
    padding-right: max(var(--mobile-gutter), env(safe-area-inset-right));
  }

  .nokhatha-page > header {
    gap: 7px;
    padding-top: max(10px, env(safe-area-inset-top));
    padding-bottom: 10px;
  }

  .nokhatha-page > header .brand-wordmark {
    width: 156px;
  }

  .nokhatha-page > header .brand {
    min-height: 44px;
  }

  .nokhatha-page > header nav {
    width: 100%;
    padding: 3px;
    gap: 3px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    background: rgba(255, 255, 255, .035);
  }

  .nokhatha-page > header nav a,
  .nokhatha-page > header nav button {
    min-height: 44px;
    padding: 8px 4px;
    border-radius: 9px;
    font-size: 11.5px;
  }

  .nokhatha-page > main {
    padding-top: 24px;
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
  }

  .nokhatha-page .hero {
    gap: 26px;
    padding-block: 20px 34px;
  }

  .nokhatha-page .hero-visual {
    padding: var(--mobile-card-pad);
  }

  .nokhatha-page :is(.unit-card, .plan, form.auth, .demo-banner, .panel) {
    padding: var(--mobile-card-pad);
  }

  .nokhatha-page :is(.grid, .proof, .stat-row) {
    gap: 14px;
  }

  /* Unified system application */
  .nizam-page .topbar > header,
  .nizam-page > main,
  .nizam-page > footer.site {
    padding-left: max(var(--mobile-gutter), env(safe-area-inset-left));
    padding-right: max(var(--mobile-gutter), env(safe-area-inset-right));
  }

  .nizam-page .topbar > header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding-top: max(10px, env(safe-area-inset-top));
    padding-bottom: 10px;
  }

  .nizam-page .topbar > header .brand {
    width: 100%;
    min-width: 0;
    margin: 0;
    gap: 10px;
  }

  .nizam-page .brand-logo-link {
    flex: 0 0 auto;
    min-height: 44px;
  }

  .nizam-page .brand-logo-wide {
    width: 126px;
  }

  .nizam-page .topbar > header nav.site {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    margin: 0;
    padding: 3px;
    gap: 4px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    background: rgba(255, 255, 255, .035);
  }

  .nizam-page .topbar > header nav.site a {
    justify-content: center;
    min-width: 0;
    min-height: 44px;
    padding: 8px 10px;
    border-radius: 9px;
  }

  .nizam-page > main {
    padding-top: 20px;
    padding-bottom: calc(92px + env(safe-area-inset-bottom));
  }

  .nizam-page nav.tabs {
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
    scroll-padding-inline: var(--mobile-gutter);
  }

  .nizam-page :is(.tile, .flow, .orders, form, .panel) {
    padding: 16px;
  }

  .nizam-page :is(.tiles, .row, .grid) {
    gap: 12px;
  }

  .nizam-page > footer.site {
    padding-top: 18px;
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
  }

  /* Service landing pages */
  .service-page {
    --mobile-gutter: 20px;
  }

  .service-page .wrap,
  .service-page .foot {
    padding-left: max(var(--mobile-gutter), env(safe-area-inset-left));
    padding-right: max(var(--mobile-gutter), env(safe-area-inset-right));
  }

  .service-page > nav {
    margin: max(8px, env(safe-area-inset-top)) 8px 0;
  }

  .service-page .nav-row {
    display: grid;
    grid-template-columns: minmax(52px, auto) minmax(0, 1fr) minmax(48px, auto);
    padding: 9px 10px;
    gap: 10px;
  }

  .service-page .nav-cta {
    grid-column: 1;
    justify-self: start;
  }

  .service-page .nav-row .brand {
    grid-column: 2;
    justify-self: center;
    min-width: 0;
    min-height: 44px;
  }

  .service-page .nav-row .lang-toggle {
    grid-column: 3;
    justify-self: end;
  }

  .service-page .brand-logo-wide {
    width: 132px;
  }

  .service-page header.svc-hero {
    padding-block: 34px 20px;
  }

  .service-page section {
    padding-block: var(--mobile-section-gap);
  }

  .service-page :is(.card, .step) {
    padding: var(--mobile-card-pad);
  }

  .service-page .cta {
    padding: 30px var(--mobile-card-pad);
  }

  .service-page details.faq {
    padding: 18px 4px;
  }

  .service-page footer {
    padding-top: 34px;
    padding-bottom: calc(42px + env(safe-area-inset-bottom));
  }
}

/* The tablet masthead keeps the brand and navigation on one calm row instead
   of inheriting the phone stack until the desktop breakpoint. */
@media (min-width: 641px) and (max-width: 899px) {
  .home-page > header {
    display: grid;
    grid-template-columns: minmax(210px, 1fr) auto;
    align-items: center;
    gap: 20px;
    padding-inline: max(24px, env(safe-area-inset-left));
  }

  .home-page > header .brand {
    justify-self: start;
    align-items: flex-start;
    margin: 0;
    text-align: start;
  }

  .home-page > header .brand .logo {
    width: 210px;
  }

  .home-page > header nav.site {
    width: auto;
    justify-self: end;
  }
}

@media (max-width: 359px) {
  :root,
  .service-page {
    --mobile-gutter: 16px;
    --mobile-card-pad: 16px;
  }

  .service-page .brand-logo-wide {
    width: 122px;
  }

  .service-page .nav-row {
    padding-inline: 8px;
  }

  .nizam-page .brand-logo-wide {
    width: 118px;
  }

  .home-page > header .brand .term {
    max-width: 132px;
    font-size: 10px;
  }
}
/* Almuhallab original logo rendering — lossless vector pass, 2026-10-12.
   The supplied SVG remains untouched. Its own viewBox and intrinsic ratio
   control the artwork on every page. Integer CSS widths avoid sub-pixel
   rasterisation of the fine horizontal details on small screens. */
:where(.home-page .brand .logo,
       .nokhatha-page .brand-wordmark,
       .nizam-page .brand-logo-wide,
       .service-page .brand-logo-wide,
       .footer-wordmark) {
  display: block;
  flex: 0 0 auto;
  max-width: 100%;
  height: auto;
  aspect-ratio: 4096 / 1488;
  margin: 0;
  object-fit: contain;
  object-position: center;
  overflow: visible;
  image-rendering: auto;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  backface-visibility: visible;
  will-change: auto;
  filter: none !important;
  transform: none !important;
}

:where(.home-page .brand,
       .nokhatha-page > header .brand,
       .nizam-page .brand-logo-link,
       .service-page .nav-row .brand) {
  overflow: visible;
}

.home-page > header .brand .logo { width: 220px; }
.nokhatha-page .brand-wordmark { width: 198px; }

.nizam-page .brand-logo-link,
.service-page .nav-row .brand {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.nizam-page .brand-logo-wide { width: 146px; }
.service-page .brand-logo-wide { width: 150px; }
.footer-wordmark { width: 260px; }

@media (min-width: 641px) and (max-width: 899px) {
  .home-page > header .brand .logo { width: 206px; }
}

@media (max-width: 640px) {
  .home-page > header .brand .logo { width: 188px; }
  .nokhatha-page .brand-wordmark { width: 170px; }
  .nizam-page .brand-logo-wide { width: 134px; }
  .service-page .brand-logo-wide { width: 136px; }
  .footer-wordmark { width: 238px; }
}

@media (max-width: 359px) {
  .home-page > header .brand .logo { width: 166px; }
  .nokhatha-page .brand-wordmark { width: 158px; }
  .nizam-page .brand-logo-wide { width: 124px; }
  .service-page .brand-logo-wide { width: 126px; }
}
/* Shared padding refinement — 2026-10-11. Loaded last on every page. */
:root {
  --shell-gutter: clamp(24px, 4vw, 48px);
  --section-pad: clamp(60px, 7vw, 92px);
  --surface-pad: clamp(22px, 2.6vw, 32px);
}

:where(.home-page, .nokhatha-page, .nizam-page, .service-page) {
  --page-gutter: var(--shell-gutter);
  --card-padding: var(--surface-pad);
}

:where(.home-page, .nokhatha-page, .nizam-page, .service-page)
  :where(.card, .product, .panel, .tile, .plan, .step, .qform, form.auth) {
  padding: var(--surface-pad);
}

.home-page > header,
.nokhatha-page > header,
.nizam-page .topbar > header,
.home-page > main,
.home-page .fcols,
.home-page .base,
.nokhatha-page > main,
.nokhatha-page > footer,
.nizam-page > main,
.nizam-page > footer.site,
.service-page .wrap,
.service-page .foot {
  padding-left: max(var(--shell-gutter), env(safe-area-inset-left));
  padding-right: max(var(--shell-gutter), env(safe-area-inset-right));
}

.service-page section { padding-block: var(--section-pad); }

@media (min-width: 641px) and (max-width: 899px) {
  :root {
    --shell-gutter: 24px;
    --section-pad: 64px;
    --surface-pad: 24px;
  }
}

@media (max-width: 640px) {
  :root {
    --shell-gutter: 20px;
    --section-pad: 48px;
    --surface-pad: 20px;
    --mobile-gutter: var(--shell-gutter);
    --mobile-card-pad: var(--surface-pad);
  }

  .home-page > header,
  .nokhatha-page > header,
  .nizam-page .topbar > header {
    gap: 10px;
    padding-top: max(12px, env(safe-area-inset-top));
    padding-bottom: 12px;
  }

  .home-page > header .brand,
  .nokhatha-page > header .brand,
  .nizam-page .topbar > header .brand {
    min-height: 52px;
  }

  .home-page > header .brand {
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    text-align: center;
  }

  .home-page > header .brand .term {
    max-width: none;
    justify-content: center;
    text-align: center;
  }

  .home-page > header nav.site,
  .nokhatha-page > header nav,
  .nizam-page .topbar > header nav.site {
    padding: 4px;
    gap: 4px;
  }

  .home-page > header nav.site a,
  .nokhatha-page > header nav :where(a, button),
  .nizam-page .topbar > header nav.site a {
    padding: 9px 6px;
  }

  .home-page > main { padding-top: 26px; }
  .home-page .hero { padding-block: 26px 40px; }
  .home-page .rowhead { margin-bottom: 18px; }
  .home-page .rail { gap: 16px; padding-block: 8px 18px; }
  .home-page .fcols { padding-top: 38px; padding-bottom: 32px; }
  .home-page .base { padding-top: 20px; }

  .nokhatha-page > main { padding-top: 28px; }
  .nokhatha-page .hero { padding-block: 24px 40px; }
  .nokhatha-page :is(.grid, .proof, .stat-row) { gap: 16px; }
  .nokhatha-page > footer { padding-top: 20px; }

  .nizam-page > main { padding-top: 26px; }
  .nizam-page :is(.tiles, .row, .grid) { gap: 14px; }

  .service-page > nav { margin: max(10px, env(safe-area-inset-top)) 10px 0; }
  .service-page .nav-row { padding: 10px 12px; gap: 10px; }
  .service-page header.svc-hero { padding-block: 40px 24px; }
  .service-page .cta { padding: 32px var(--surface-pad); }
  .service-page details.faq { padding: 20px 6px; }
  .service-page footer { padding-top: 38px; }
}

@media (max-width: 359px) {
  :root { --shell-gutter: 16px; --surface-pad: 16px; }
}

@media (min-width: 360px) and (max-width: 389px) {
  :root { --shell-gutter: 18px; --surface-pad: 18px; }
}

/* v72 theme consolidation and accessibility refinement. */
:where(a, button, input, select, textarea, summary):focus-visible {
  outline-color: var(--focus-ring, #e7b567);
}

.home-page,
.nokhatha-page {
  --focus-ring: #e7b567;
}

.nizam-page,
.service-page {
  --focus-ring: #754807;
}

/* One dark brand masthead across company, product and service pages. */
.service-page > nav {
  border-color: rgba(113, 131, 145, .42);
  background: rgba(20, 33, 45, .97);
  box-shadow: 0 10px 32px rgba(20, 33, 45, .14);
}

.service-page .brand-logo-wide {
  padding: 0;
  background: transparent;
}

.service-page .nav-cta {
  color: #f7fafc;
}

.service-page .nav-cta:hover {
  color: #fff;
  background: rgba(255, 255, 255, .08);
}

.service-page .lang-toggle {
  border-color: #e7b567;
  background: #e7b567;
  color: #171007;
}

.service-page .lang-toggle:hover {
  border-color: #f2c87c;
  background: #f2c87c;
  color: #171007;
}

/* Keep supporting Arabic copy readable on phones and light surfaces. */
.service-page :is(.crumbs, .foot) { font-size: 13px; }
.service-page .sec-label { font-size: 12.5px; }
.nizam-page :is(.tile .l, .tile .sub, th, .fig .cap, .legend, .status) { font-size: 13px; }

@media (min-width: 641px) {
  html,
  body { overflow-x: visible; }

  /* Reveal more of the next section instead of spending most of a desktop
     viewport on empty hero space. */
  .home-page .hero {
    min-height: clamp(420px, calc(100vh - 440px), 560px);
  }
}

@media (max-width: 640px) {
  .home-page > header {
    gap: 6px;
    padding-top: max(8px, env(safe-area-inset-top));
    padding-bottom: 8px;
  }

  .home-page > header .brand .logo { width: 166px; }
  .home-page > header .brand {
    min-height: 0;
    flex-direction: row;
    justify-content: space-between;
    gap: 10px;
    text-align: start;
  }

  .home-page > header .brand .term {
    max-width: 146px;
    justify-content: flex-end;
    text-align: end;
  }

  .nokhatha-page > header .brand-wordmark { width: 156px; }

  .nizam-page .topbar > header {
    gap: 6px;
    padding-top: max(8px, env(safe-area-inset-top));
    padding-bottom: 8px;
  }

  .nizam-page .brand-logo-wide { width: 126px; }
  .service-page .brand-logo-wide { width: 128px; }
}

@media (max-width: 359px) {
  .home-page > header .brand .logo { width: 145px; }
  .home-page > header .brand .term { max-width: 124px; font-size: 10px; }
}

/* v73 responsive fit pass — 2026-10-12.
   Final sizing authority for the public templates. This layer removes the
   remaining oversized surfaces while preserving 44px interactive targets. */
:root {
  --shell-gutter: clamp(20px, 3vw, 40px);
  --surface-pad: clamp(18px, 2vw, 22px);
  --section-pad: clamp(44px, 5vw, 64px);
}

/* Company homepage */
.home-page { --content-max: 70rem; }
.home-page > main,
.home-page .fcols { max-width: var(--content-max); }
.home-page > header .brand .logo { width: 190px; }
.home-page .hero { min-height: clamp(440px, calc(100vh - 470px), 510px); }
.home-page :is(#services, #process) {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.home-page :is(.card, .product, .qform, .channel) { padding: 18px; }
.home-page .card > .scene { height: 96px; }
.home-page :is(.tile, .card .tile, .channel .tile) { width: 40px; height: 40px; }
.home-page :is(.tile, .card .tile, .channel .tile) .ic { width: 20px; height: 20px; }
.home-page .qform textarea { min-height: 104px; }

/* Nokhatha product */
.nokhatha-page .unit-card .tile {
  width: 40px;
  height: 40px;
  padding: 0;
}
.nokhatha-page .unit-card .tile .ic { width: 21px; height: 21px; }
.nokhatha-page :is(.plan, form.auth) { max-width: 480px; padding: 24px; }
.nokhatha-page form.auth :is(input, select) { min-height: 48px; }
.nokhatha-page form.auth .btn { min-height: 48px; }

/* Nizam application */
.nizam-page :is(.tile, .flow, .orders, form, .panel) { padding: 14px; }
.nizam-page .tiles { gap: 10px; }

/* Service pages */
.service-page .nav-row {
  width: 100%;
  max-width: 1180px;
  min-height: 64px;
  margin-inline: auto;
  padding: 8px 16px;
}
.service-page .brand-logo-wide { width: 140px; }
.service-page .crumbs { padding-top: 20px; }
.service-page header.svc-hero { padding-block: 34px 18px; }
.service-page h1.svc-title {
  max-width: 16ch;
  font-size: clamp(32px, 5.4vw, 56px);
}
.service-page .lead { font-size: clamp(16px, 1.7vw, 18px); }
.service-page .hr-wave { max-width: 280px; margin-top: 20px; }
.service-page section { padding-block: var(--section-pad); }
.service-page h2.sec-title { font-size: clamp(22px, 3vw, 32px); }
.service-page .sec-sub { margin-bottom: 22px; }
.service-page .grid { gap: 12px; }
.service-page .card { padding: 20px; }
.service-page .num { width: 30px; height: 30px; margin-bottom: 10px; font-size: 13px; }
.service-page .step { gap: 14px; padding: 16px 18px; }
.service-page .cta { padding: 32px 24px; }
.service-page .cta h2 { font-size: clamp(24px, 3.6vw, 34px); }
.service-page .cta-label { font-size: 12px; }
.service-page .cta-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: 8px;
  overflow-wrap: anywhere;
}
.service-page .pill { min-height: 44px; padding: 8px 14px; }
.service-page footer { padding-block: 30px 40px; }

@media (min-width: 641px) and (max-width: 980px) {
  :root {
    --shell-gutter: 24px;
    --surface-pad: 20px;
    --section-pad: 50px;
  }

  .home-page > header .brand .logo { width: 184px; }
  .home-page .hero { min-height: 480px; }

  .nokhatha-page > header {
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 76px;
    gap: 24px;
    padding: 8px 24px;
  }
  .nokhatha-page > header .brand { justify-self: start; }
  .nokhatha-page > header .brand-wordmark { width: 176px; }
  .nokhatha-page > header nav {
    width: auto;
    justify-self: end;
    justify-content: flex-end;
    flex-wrap: nowrap;
  }
  .nokhatha-page > header nav :is(a, button) {
    padding: 9px 11px;
    font-size: 13px;
  }
}

@media (max-width: 820px) {
  .home-page .flowmap .wire {
    width: 2px;
    height: 18px;
    min-height: 18px;
  }
  .home-page .fnode { padding: 8px 10px; }
}

@media (min-width: 720px) {
  .nokhatha-page .proof-bar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .nokhatha-page .proof-item { border-top: 0; }
  .nokhatha-page .proof-item:not(:first-child) { border-inline-start: 1px solid var(--border); }
}

@media (max-width: 640px) {
  :root {
    --shell-gutter: 18px;
    --surface-pad: 18px;
    --section-pad: 36px;
    --mobile-section-gap: 32px;
  }

  .home-page > header { gap: 4px; padding-block: max(6px, env(safe-area-inset-top)) 6px; }
  .home-page > header .brand .logo { width: 154px; }
  .home-page > main { padding-top: 16px; }
  .home-page .hero { min-height: 0; padding-block: 14px 28px; }
  .home-page .hero h1 { font-size: clamp(28px, 8.5vw, 34px); }
  .home-page :is(.card, .product, .qform, .channel) { padding: 16px; }
  .home-page .card > .scene { height: 88px; }
  .home-page .rail { gap: 12px; padding-block: 6px 14px; }
  .home-page .rowhead { margin-bottom: 14px; }
  .home-page .fcols { padding-top: 28px; padding-bottom: 24px; }

  .nokhatha-page > header { gap: 5px; padding-block: max(7px, env(safe-area-inset-top)) 7px; }
  .nokhatha-page > header .brand-wordmark { width: 150px; }
  .nokhatha-page > main { padding-top: 18px; }
  .nokhatha-page .hero { gap: 20px; padding-block: 14px 28px; }
  .nokhatha-page .hero h1 { font-size: clamp(28px, 8.2vw, 34px); line-height: 1.2; }
  .nokhatha-page .hero p { font-size: 14px; line-height: 1.75; }
  .nokhatha-page .hero .actions { gap: 8px; }
  .nokhatha-page .hero-visual { min-height: 270px; padding: 16px; }
  .nokhatha-page .unit-card { padding: 16px; gap: 8px; }
  .nokhatha-page .unit-card .tile { width: 38px; height: 38px; padding: 0; }
  .nokhatha-page .unit-card h3 { font-size: 16px; }
  .nokhatha-page .unit-card p { font-size: 13.5px; line-height: 1.65; }
  .nokhatha-page .proof-bar { margin-bottom: 34px; }
  .nokhatha-page .proof-item { min-height: 76px; padding: 10px; gap: 7px; }
  .nokhatha-page .proof-item .ic { width: 20px; height: 20px; }
  .nokhatha-page .proof-item span { font-size: 11.5px; }
  .nokhatha-page :is(.plan, form.auth) { padding: 18px; }

  .nizam-page .topbar > header { gap: 4px; padding-block: max(7px, env(safe-area-inset-top)) 7px; }
  .nizam-page .brand-logo-wide { width: 118px; }
  .nizam-page .topbar > header nav.site { padding: 2px; gap: 3px; }
  .nizam-page > main { padding-top: 18px; padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .nizam-page > footer.site { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .nizam-page :is(.tile, .flow, .orders, form, .panel) { padding: 12px; }
  .nizam-page .tile .n { font-size: 16px; }

  .service-page > nav { margin: max(6px, env(safe-area-inset-top)) 6px 0; }
  .service-page .nav-row { min-height: 60px; padding: 8px 10px; gap: 8px; }
  .service-page .brand-logo-wide { width: 124px; }
  .service-page .crumbs { padding-top: 16px; }
  .service-page header.svc-hero { padding-block: 30px 16px; }
  .service-page h1.svc-title { font-size: clamp(30px, 8.4vw, 32px); }
  .service-page .hr-wave { max-width: 240px; margin-top: 18px; }
  .service-page section { padding-block: 36px; }
  .service-page .card { padding: 17px; }
  .service-page .step { padding: 15px 16px; }
  .service-page .cta { padding: 26px 18px; }
  .service-page details.faq { padding: 16px 4px; }
  .service-page footer { padding-block: 28px 36px; }
}

@media (min-width: 360px) and (max-width: 640px) {
  .home-page .hero .actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-page .hero .actions .btn { width: auto; min-width: 0; padding-inline: 10px; }
  .nizam-page .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nizam-page #xbrl-form fieldset { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px; gap: 10px; }
  .nizam-page #xbrl-form fieldset label.total { grid-column: 1 / -1; }
}

@media (max-width: 359px) {
  :root { --shell-gutter: 16px; --surface-pad: 16px; }
  .home-page > header .brand .logo { width: 140px; }
  .nokhatha-page > header .brand-wordmark { width: 140px; }
  .service-page .brand-logo-wide { width: 118px; }
}