:root {
  --navy: #171c2b;
  --gold: #c4943e;
  --cream: #f5f3ee;
  --white: #fafaf8;
  --navy-soft: #232a3f;
  /* Site-wide dark theme: the network canvas (see below) shows through every
     page, so body text and "muted" copy both need a light-on-navy value now
     rather than the navy-on-white one this site started with. */
  --text-muted: rgba(250, 250, 248, 0.72);
  --panel: rgba(35, 42, 63, 0.55);
  --panel-strong: rgba(35, 42, 63, 0.78);
  --panel-border: rgba(250, 250, 248, 0.12);
}

body {
  background-color: var(--navy);
  color: var(--white);
  font-family: "Poppins", "Tajawal", sans-serif;
}

/* Bootstrap's own .text-muted utility has its own mid-gray tuned for a white
   page - it does not read the --text-muted variable above, so every existing
   `class="text-muted"` usage needs this one override rather than a hunt
   through every card/summary that uses it. */
.text-muted { color: var(--text-muted) !important; }

/* -----------------------------------------------------------------------------
   Sitewide network background - a generative particle field parallaxed by
   cursor position (see wwwroot/js/alkaraji.bg-network.js), standing in for
   footage that does not exist for this site. Fixed behind every page; body's
   own navy fill above is the fallback wherever the canvas hasn't painted yet.
   -------------------------------------------------------------------------- */
.ak-bg-network { position: fixed; inset: 0; z-index: -1; }
.ak-bg-canvas { display: block; }

html[dir="rtl"] body {
  font-family: "Tajawal", "Poppins", sans-serif;
}

h1, h2, h3, h4, h5, .brand-font {
  font-family: "Poppins", "Tajawal", sans-serif;
  font-weight: 600;
}

html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] .brand-font {
  font-family: "Tajawal", "Poppins", sans-serif;
  font-weight: 700;
}

a { color: var(--white); text-decoration: none; }
a.text-gold, .text-gold { color: var(--gold) !important; }
/* Paired with .bg-cream on badges. Bootstrap has no navy, so without this the
   badge kept .badge's white text and vanished against the cream background. */
.text-navy { color: var(--navy) !important; }
.bg-navy { background-color: var(--navy) !important; color: var(--white); }
.bg-cream { background-color: var(--cream) !important; }
.bg-gold { background-color: var(--gold) !important; }
/* Featured engagement-model card: a full gold border picks it out of the row
   without needing a different background. A navy border on this site's now-dark
   cards would barely register against the panel behind it. */
.border-navy { border-color: var(--gold) !important; border-width: 2px !important; }
.btn-gold {
  background-color: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
  font-weight: 600;
}
.btn-gold:hover { background-color: #b3843a; border-color: #b3843a; color: var(--navy); }

/* Header - glass panel over the network rather than a solid fill, so the
   sticky bar still reads as part of the same moving scene as the rest of the
   page (matches .is-shrunk below). */
.site-header {
  background-color: var(--panel-strong);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--panel-border);
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.site-header.is-scrolled {
  border-bottom-color: transparent;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.site-header .navbar-brand img { height: 46px; width: auto; display: block; }
.site-header .nav-link { font-weight: 500; color: var(--white); position: relative; }
.site-header .nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px; background-color: var(--gold);
  transform: scaleX(0);
  transition: transform 0.2s ease;
}
.site-header .nav-link:hover::after { transform: scaleX(1); }
.lang-switch { font-weight: 600; border: 1px solid var(--white); color: var(--white); border-radius: 20px; padding: 4px 16px; transition: background-color 0.2s ease, color 0.2s ease; }
.lang-switch:hover { background-color: var(--white); color: var(--navy); }

/* Hero - no background of its own; the sitewide network (see .ak-bg-network
   above) shows through it exactly as it does through the rest of the page. */
.hero-section { color: var(--white); padding: 96px 0 72px; }
.hero-section .eyebrow { color: var(--gold); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.85rem; }
.hero-section h1 { font-size: 2.75rem; }
.hero-section p.lead { color: rgba(250, 250, 248, 0.8); }


/* Stats strip */
.stats-strip { background-color: var(--navy-soft); color: var(--white); padding: 32px 0; }
.stats-strip .stat-value { font-size: 2.25rem; font-weight: 700; color: var(--gold); }
.stats-strip .stat-label { color: rgba(250, 250, 248, 0.75); font-size: 0.9rem; }

/* Section headings */
.section-eyebrow { color: var(--gold); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.8rem; }
.section-title { font-size: 2rem; margin-bottom: 0.5rem; }
.section-padded { padding: 72px 0; }

/* Cards */
.service-card, .industry-card, .case-study-card, .testimonial-card {
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  background-color: var(--panel);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  height: 100%;
}
.service-card:hover, .industry-card:hover, .case-study-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
}
.service-card .icon-badge, .industry-card .icon-badge {
  width: 56px; height: 56px; border-radius: 12px;
  background-color: rgba(196, 148, 62, 0.15); color: var(--gold);
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
}
/* Case study cards. Flex column so every card in a row shares one baseline:
   the body stretches and the Read more link is pinned to the bottom, which is
   what stops ragged card heights when summaries differ in length. */
.case-study-card { display: flex; flex-direction: column; overflow: hidden; }
.case-study-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: var(--navy);
  flex-shrink: 0;
}
.case-study-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Scrim keeps the overlaid category legible over any artwork the client uploads. */
.case-study-media::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 55%;
  background: linear-gradient(to top, rgba(23, 28, 43, 0.85), transparent);
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.case-study-category {
  position: absolute;
  inset-block-end: 14px;
  inset-inline-start: 14px;
  z-index: 2;
  background-color: var(--gold);
  color: var(--navy);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  transition: transform 0.35s ease;
}
.case-study-card:hover .case-study-category { transform: translateY(-3px); }
.case-study-body { padding: 24px; display: flex; flex-direction: column; flex-grow: 1; }
.case-study-body h5 { margin-bottom: 8px; }

.case-study-metrics {
  display: flex;
  gap: 28px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--panel-border);
}
.case-study-metrics .metric-value { font-weight: 700; color: var(--gold); font-size: 1.35rem; line-height: 1.2; }
.case-study-metrics .metric-label { font-size: 0.75rem; color: var(--text-muted); }

/* Pinned to the bottom of the body, with an arrow that leads on hover. */
.case-study-link { margin-top: auto; padding-top: 18px; font-weight: 600; font-size: 0.9rem; }
.case-study-link .arrow { display: inline-block; transition: transform 0.3s var(--ak-ease-out-expo, ease); }
.case-study-card:hover .case-study-link { color: var(--gold); }
.case-study-card:hover .case-study-link .arrow { transform: translateX(5px); }
html[dir="rtl"] .case-study-card:hover .case-study-link .arrow { transform: translateX(-5px); }

.testimonial-card { padding: 28px; }
.testimonial-card .quote-mark { font-size: 2.5rem; color: var(--gold); line-height: 1; }

/* Insights: list cards */
.article-card {
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  background-color: var(--panel);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.article-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35); }
.article-card-link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.article-card-media { aspect-ratio: 16 / 9; overflow: hidden; background-color: var(--navy); }
.article-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.article-card-body { padding: 24px; display: flex; flex-direction: column; flex-grow: 1; }
.article-card-meta {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--gold); font-weight: 700; margin-bottom: 10px;
}
.article-card-meta time { color: var(--text-muted); font-weight: 600; }
.article-card-body h5 { margin-bottom: 8px; }
.article-card-more { margin-top: auto; padding-top: 18px; font-weight: 600; font-size: 0.9rem; }
.article-card-more .arrow { display: inline-block; transition: transform 0.3s var(--ak-ease-out-expo, ease); }
.article-card:hover .article-card-more { color: var(--gold); }
.article-card:hover .article-card-more .arrow { transform: translateX(5px); }
html[dir="rtl"] .article-card:hover .article-card-more .arrow { transform: translateX(-5px); }

/* Insights: article body (rendered from Markdown) */
.article-body { font-size: 1.05rem; line-height: 1.85; }
.article-body > :first-child { margin-top: 0; }
.article-body h2 { font-size: 1.5rem; margin-top: 2.2rem; margin-bottom: 0.8rem; }
.article-body h3 { font-size: 1.2rem; margin-top: 1.8rem; margin-bottom: 0.6rem; }
.article-body p { margin-bottom: 1.1rem; }
.article-body ul, .article-body ol { margin-bottom: 1.1rem; padding-inline-start: 1.4rem; }
.article-body li { margin-bottom: 0.4rem; }
.article-body a { color: var(--gold); text-decoration: underline; }
.article-body blockquote {
  margin: 1.4rem 0; padding-inline-start: 1rem;
  border-inline-start: 3px solid var(--gold); color: var(--text-muted);
}
.article-body table { width: 100%; margin: 1.4rem 0; border-collapse: collapse; font-size: 0.95rem; }
.article-body th, .article-body td { border: 1px solid var(--panel-border); padding: 8px 12px; text-align: start; }
.article-body code {
  background-color: rgba(196, 148, 62, 0.12); color: var(--gold);
  padding: 2px 6px; border-radius: 5px; font-size: 0.9em;
}
.article-body pre { background-color: rgba(0, 0, 0, 0.3); padding: 16px; border-radius: 10px; overflow-x: auto; }
.article-body pre code { background: none; color: inherit; padding: 0; }

.article-cta { border-top: 1px solid var(--panel-border); padding-top: 28px; }

/* CTA band */
.cta-band { background-color: var(--gold); color: var(--navy); padding: 56px 0; }

/* Footer */
.site-footer { background-color: var(--navy); color: rgba(250, 250, 248, 0.75); padding: 56px 0 24px; }
.site-footer a { color: rgba(250, 250, 248, 0.85); }
.site-footer a:hover { color: var(--gold); }
.site-footer h6 { color: var(--white); font-weight: 600; margin-bottom: 16px; }

/* Motion lives in motion.css - reveal choreography, hero ambience, tilt,
   page transitions - paired with wwwroot/js/alkaraji.motion.js. */

/* -----------------------------------------------------------------------------
   Skip link - the first focusable element on the page. Off-screen until focused,
   rather than display:none, which would take it out of the tab order entirely.
   -------------------------------------------------------------------------- */
.ak-skip-link {
  position: absolute;
  inset-inline-start: 16px;
  inset-block-start: -60px;
  z-index: 1080;
  padding: 10px 18px;
  border-radius: 0 0 10px 10px;
  background: var(--navy);
  color: var(--white);
  font-weight: 600;
  font-size: 0.9rem;
  transition: inset-block-start 0.2s ease;
}
.ak-skip-link:focus { inset-block-start: 0; color: var(--white); outline: 2px solid var(--gold); }

/* -----------------------------------------------------------------------------
   Breadcrumbs - the visible half of the BreadcrumbList in the page's JSON-LD.
   Separators are drawn with ::before so they are decoration, not text a screen
   reader has to read out between every rung.
   -------------------------------------------------------------------------- */
.ak-breadcrumbs { background: var(--panel); border-bottom: 1px solid var(--panel-border); font-size: 0.85rem; }
.ak-breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 12px 0; }
.ak-breadcrumbs li { display: flex; align-items: center; gap: 8px; color: var(--text-muted); }
.ak-breadcrumbs li + li::before { content: "/"; color: var(--panel-border); }
html[dir="rtl"] .ak-breadcrumbs li + li::before { content: "\\"; }
.ak-breadcrumbs a { color: var(--text-muted); }
.ak-breadcrumbs a:hover { color: var(--gold); }
.ak-breadcrumbs [aria-current="page"] { color: var(--white); font-weight: 600; }

/* -----------------------------------------------------------------------------
   WhatsApp button - always visible, so it sits above the back-to-top dial that
   shares this corner (26px + 48px dial + 12px gap). Logical properties put it on
   the correct side in both LTR and RTL without a mirrored rule.
   -------------------------------------------------------------------------- */
.ak-whatsapp {
  position: fixed;
  inset-block-end: 86px;
  inset-inline-end: 26px;
  z-index: 1036;
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 52px;
  padding: 0 15px;
  border-radius: 26px;
  background: #25d366;
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  box-shadow: 0 10px 26px rgba(37, 211, 102, 0.35);
  transition: gap 0.35s var(--ak-ease-out-expo, ease), padding 0.35s var(--ak-ease-out-expo, ease),
              background-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.ak-whatsapp:hover, .ak-whatsapp:focus-visible {
  gap: 9px;
  padding-inline-end: 20px;
  background: #1eb457;
  color: #fff;
  box-shadow: 0 14px 32px rgba(37, 211, 102, 0.45);
}
.ak-whatsapp:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.ak-whatsapp i { font-size: 1.55rem; line-height: 1; }

/* The label is revealed by animating its width, so the collapsed pill is a circle
   and the text still exists for assistive tech at every size. */
.ak-whatsapp-label {
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-width 0.35s var(--ak-ease-out-expo, ease), opacity 0.25s ease;
}
.ak-whatsapp:hover .ak-whatsapp-label,
.ak-whatsapp:focus-visible .ak-whatsapp-label { max-width: 190px; opacity: 1; }

/* On a phone the pill would cover content, and there is no hover to expand it. */
@media (max-width: 575.98px) {
  .ak-whatsapp { height: 48px; padding: 0 13px; inset-block-end: 82px; inset-inline-end: 18px; }
  .ak-whatsapp i { font-size: 1.4rem; }
  .ak-whatsapp:hover .ak-whatsapp-label, .ak-whatsapp:focus-visible .ak-whatsapp-label { max-width: 0; opacity: 0; }
  .ak-whatsapp:hover, .ak-whatsapp:focus-visible { gap: 0; padding-inline-end: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .ak-whatsapp, .ak-whatsapp-label { transition: none; }
}

/* WhatsApp call to action on the contact page. Same green as the floating button so the two
   read as one channel rather than two different things. */
.btn-whatsapp {
  background-color: #25d366;
  border-color: #25d366;
  color: #fff;
  font-weight: 600;
}
.btn-whatsapp:hover, .btn-whatsapp:focus { background-color: #1eb457; border-color: #1eb457; color: #fff; }
.contact-whatsapp { padding-top: 20px; border-top: 1px solid var(--panel-border); }

/* Footer social row */
.footer-social { font-size: 1.15rem; margin-top: 18px; }
.footer-social a { display: inline-flex; transition: transform 0.25s var(--ak-ease-out-back, ease), color 0.2s ease; }
.footer-social a:hover { transform: translateY(-3px); }

/* Admin */
.admin-sidebar { background-color: var(--navy); min-height: 100vh; }
.admin-sidebar .nav-link { color: rgba(250, 250, 248, 0.75); }
.admin-sidebar .nav-link.active, .admin-sidebar .nav-link:hover { color: var(--white); background-color: var(--navy-soft); border-radius: 8px; }
.admin-topbar { background-color: var(--white); border-bottom: 1px solid rgba(23, 28, 43, 0.08); }

/* -----------------------------------------------------------------------------
   Consent banner
   -----------------------------------------------------------------------------
   Only rendered when something has been switched on that needs permission. It sits
   at the bottom rather than over the page: nothing is blocked while the visitor
   decides, and the site is fully usable whether they answer or not.

   Both buttons are the same size and weight. Making refusal the quieter option
   would be a dark pattern, and the consent it produced would not be worth having.
   -------------------------------------------------------------------------- */
.ak-consent {
  position: fixed;
  inset-inline: 12px;
  bottom: 12px;
  z-index: 1080;
  max-width: 640px;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  background-color: var(--panel-strong);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.35);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.ak-consent.is-dismissed { opacity: 0; transform: translateY(12px); pointer-events: none; }

.ak-consent-body { flex: 1 1 260px; min-width: 0; }
.ak-consent-title { font-weight: 600; font-size: 0.95rem; margin: 0 0 3px; }
.ak-consent-text { font-size: 0.85rem; color: var(--text-muted); margin: 0; line-height: 1.55; }

.ak-consent-actions { display: flex; gap: 8px; flex: 0 0 auto; margin-inline-start: auto; }
.ak-consent-btn {
  border: 1px solid var(--white);
  background: none;
  color: var(--white);
  border-radius: 999px;
  padding: 8px 20px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.16s ease, color 0.16s ease;
}
.ak-consent-btn:hover { background-color: rgba(250, 250, 248, 0.12); }
.ak-consent-btn--primary { background-color: var(--navy); color: var(--white); }
.ak-consent-btn--primary:hover { background-color: var(--navy-soft); color: var(--white); }

@media (max-width: 575.98px) {
  .ak-consent { flex-direction: column; align-items: stretch; }
  .ak-consent-actions { margin-inline-start: 0; }
  .ak-consent-btn { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ak-consent { transition: none; }
}


/* FAQ accordion (homepage). Uses <details> so it works without JS. */
.faq-list { max-width: 760px; margin-inline: auto; }
.faq-item { border-top: 1px solid var(--panel-border); }
.faq-item:last-child { border-bottom: 1px solid var(--panel-border); }
.faq-item > summary {
  list-style: none;
  cursor: pointer;
  padding: 1.15rem 2.5rem 1.15rem 0;
  font-weight: 600;
  color: var(--white);
  position: relative;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: "+";
  position: absolute;
  inset-inline-end: 0.25rem;
  top: 1rem;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--gold);
  transition: transform 0.16s ease;
}
.faq-item[open] > summary::after { content: "\2013"; }
.faq-item > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 3px; }
.faq-answer { padding: 0 2.5rem 1.25rem 0; color: var(--text-muted); max-width: 64ch; }
[dir="rtl"] .faq-item > summary { padding: 1.15rem 0 1.15rem 2.5rem; }
[dir="rtl"] .faq-answer { padding: 0 0 1.25rem 2.5rem; }
@media (prefers-reduced-motion: reduce) { .faq-item > summary::after { transition: none; } }

/* Service detail page. */
.service-hero-art {
  width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid rgba(245, 243, 238, 0.12);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.5);
  display: block;
}
.deliverable-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.deliverable-list li {
  position: relative;
  padding-inline-start: 1.9rem;
  color: var(--white);
  line-height: 1.55;
}
.deliverable-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.45em;
  width: 0.85rem;
  height: 0.5rem;
  border-inline-start: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(-45deg);
}
[dir="rtl"] .deliverable-list li::before { transform: rotate(-135deg) scaleX(-1); }
.side-card {
  background: var(--panel);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  padding: 1.4rem;
}
.tech-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tech-chip {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  color: var(--white);
}

/* Service index cards with artwork. */
.service-card--linked { overflow: hidden; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.service-card--linked:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35); }
.service-card-media { background: var(--navy); aspect-ratio: 16 / 10; overflow: hidden; }
.service-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (prefers-reduced-motion: reduce) { .service-card--linked, .service-card--linked:hover { transition: none; transform: none; } }

/* Homepage service and industry photography. The compact crop keeps the cards
   information-first while giving every capability a distinct, human visual. */
.home-photo-card {
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.home-card-media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #111d32;
}

.home-card-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(7, 17, 34, .42));
    pointer-events: none;
}

.home-card-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .45s ease;
}

.home-photo-card:hover .home-card-media img { transform: scale(1.035); }
.home-card-body { padding: 1.5rem; flex: 1; }

@media (prefers-reduced-motion: reduce) {
    .home-card-media img,
    .home-photo-card:hover .home-card-media img { transition: none; transform: none; }
}

.hero-gcc-signals {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem 1rem;
    margin-top: 1.35rem;
    color: rgba(255, 255, 255, .78);
    font-size: .86rem;
}

.hero-gcc-signals span { display: inline-flex; align-items: center; gap: .4rem; }
.hero-gcc-signals i { color: var(--gold); }

.gulf-markets-section { position: relative; }
.gulf-markets-panel {
    overflow: hidden;
    border: 1px solid rgba(205, 164, 72, .25);
    border-radius: 1.25rem;
    background: linear-gradient(135deg, rgba(20, 37, 62, .98), rgba(9, 23, 44, .98));
    box-shadow: 0 24px 60px rgba(0, 0, 0, .24);
}

.gulf-markets-photo { position: relative; height: 100%; min-height: 520px; overflow: hidden; }
.gulf-markets-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(5, 16, 34, .82));
}
.gulf-markets-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gulf-photo-label {
    position: absolute;
    z-index: 1;
    inset-inline-start: 1.5rem;
    bottom: 1.5rem;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .65rem .9rem;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 999px;
    color: #fff;
    background: rgba(7, 20, 40, .72);
    backdrop-filter: blur(8px);
}
.gulf-photo-label i { color: var(--gold); }
.gulf-markets-copy { padding: clamp(2rem, 5vw, 4rem); }
.gulf-markets-copy .lead { color: rgba(255, 255, 255, .75); font-size: 1.02rem; line-height: 1.9; }
.gulf-country-list {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}
.gulf-country-list li {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .55rem .75rem;
    border: 1px solid rgba(205, 164, 72, .32);
    border-radius: .65rem;
    color: #fff;
    background: rgba(255,255,255,.045);
    font-size: .88rem;
}
.gulf-country-list i { color: var(--gold); }
.gulf-market-promises {
    display: grid;
    gap: .65rem;
    margin-top: 1.6rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255,255,255,.1);
    color: rgba(255,255,255,.82);
    font-size: .9rem;
}
.gulf-market-promises span { display: flex; align-items: center; gap: .5rem; }
.gulf-market-promises i { color: var(--gold); }

@media (max-width: 991.98px) {
    .gulf-markets-photo { min-height: 360px; }
}

/* --- Case-study gallery ----------------------------------------------------
   Samples of the delivered work, under the summary on a case-study page. */
.case-study-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.case-study-gallery-item { margin: 0; }

.case-study-gallery-item a {
  display: block;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid var(--panel-border);
}

.case-study-gallery-item img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.45s var(--ak-ease-out-expo, ease);
}

.case-study-gallery-item a:hover img,
.case-study-gallery-item a:focus-visible img { transform: scale(1.04); }

.case-study-gallery-item figcaption {
  margin-top: 8px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Bikya case study — an editorial, image-led project narrative. Its cream, red
   and yellow accents come from the delivered identity while the typography and
   spacing remain part of the Alkaraji site. */
.bikya-case {
  --bikya-ink: #181818;
  --bikya-cream: #f7f4ec;
  --bikya-red: #e4231c;
  --bikya-yellow: #ffc427;
  background: var(--bikya-cream);
  color: var(--bikya-ink);
  overflow: hidden;
}
.bikya-hero { padding: clamp(5rem, 10vw, 9rem) 0 clamp(2.5rem, 6vw, 5rem); }
.bikya-hero-copy { max-width: 940px; }
.bikya-kicker, .bikya-number {
  color: var(--bikya-red);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.bikya-hero h1 { font-size: clamp(4.5rem, 14vw, 10rem); line-height: .84; letter-spacing: -.065em; margin: 1rem 0 2rem; }
.bikya-hero-lead { max-width: 880px; font-size: clamp(1.35rem, 2.8vw, 2.35rem); line-height: 1.25; letter-spacing: -.025em; }
.bikya-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: clamp(3rem, 7vw, 6rem) 0 0; border-block: 1px solid rgba(24,24,24,.18); }
.bikya-facts > div { padding: 1.25rem 1rem; border-inline-start: 1px solid rgba(24,24,24,.18); }
.bikya-facts > div:first-child { border-inline-start: 0; }
.bikya-facts dt { color: rgba(24,24,24,.58); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.bikya-facts dd { margin: .35rem 0 0; font-size: 1rem; font-weight: 700; }
.bikya-cover-wrap { max-width: 1440px; padding-inline: clamp(.75rem, 3vw, 2rem); }
.bikya-cover { display: block; width: 100%; height: auto; border-radius: clamp(1rem, 2vw, 2rem); }
.bikya-intro, .bikya-handoff { padding: clamp(5rem, 11vw, 10rem) 0; }
.bikya-two-col { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 8vw, 8rem); align-items: start; }
.bikya-two-col h2, .bikya-chapter h2, .bikya-cta h2 { font-size: clamp(2.25rem, 5vw, 4.75rem); line-height: 1.03; letter-spacing: -.045em; }
.bikya-two-col p:not(.bikya-number), .bikya-chapter-copy p:not(.bikya-number) { font-size: clamp(1.05rem, 1.7vw, 1.35rem); line-height: 1.65; }
.bikya-proof { background: var(--bikya-red); color: #fff; padding: 2.25rem 0; }
.bikya-proof .container { display: grid; grid-template-columns: repeat(4, 1fr); }
.bikya-proof .container > div { padding: .8rem 1.5rem; border-inline-start: 1px solid rgba(255,255,255,.32); }
.bikya-proof .container > div:first-child { border-inline-start: 0; }
.bikya-proof strong { display: block; font-size: clamp(2rem, 4vw, 4rem); line-height: 1; }
.bikya-proof span { display: block; margin-top: .5rem; color: rgba(255,255,255,.78); }
.bikya-story { padding: clamp(5rem, 10vw, 9rem) 0; }
.bikya-chapter { margin-bottom: clamp(7rem, 15vw, 14rem); }
.bikya-chapter-copy { max-width: 820px; margin-bottom: clamp(2rem, 5vw, 4rem); }
.bikya-chapter-split { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(2rem, 7vw, 7rem); align-items: center; }
.bikya-chapter-split .bikya-chapter-copy { margin-bottom: 0; }
.bikya-visual { margin: 0; min-width: 0; }
.bikya-visual a { display: block; overflow: hidden; background: #e9e2d3; border-radius: clamp(.75rem, 1.5vw, 1.5rem); }
.bikya-visual img { display: block; width: 100%; height: auto; transition: transform .7s var(--ak-ease-out-expo, ease); }
.bikya-visual a:hover img, .bikya-visual a:focus-visible img { transform: scale(1.015); }
.bikya-visual figcaption { margin-top: .75rem; color: rgba(24,24,24,.62); font-size: .8rem; }
.bikya-visual-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2.5rem); align-items: start; }
.bikya-visual-pair-offset > :nth-child(2) { margin-top: clamp(2rem, 8vw, 7rem); }
.bikya-handoff { background: var(--bikya-ink); color: #fff; }
.bikya-handoff .bikya-number { color: var(--bikya-yellow); }
.bikya-deliverables { border-top: 1px solid rgba(255,255,255,.25); }
.bikya-deliverables > div { display: grid; grid-template-columns: 5rem 1fr; gap: 1rem; padding: 1.3rem 0; border-bottom: 1px solid rgba(255,255,255,.25); align-items: baseline; }
.bikya-deliverables strong { color: var(--bikya-yellow); font-size: 2rem; }
.bikya-deliverables span { color: rgba(255,255,255,.76); }
.bikya-cta { background: var(--bikya-yellow); padding: clamp(5rem, 11vw, 10rem) 0; }
.bikya-cta .bikya-kicker { color: var(--bikya-ink); }
.bikya-cta h2 { max-width: 900px; margin-inline: auto; }
.bikya-back { display: inline-block; margin-top: 2rem; color: var(--bikya-ink); font-size: .88rem; font-weight: 600; }

@media (max-width: 767.98px) {
  .bikya-facts, .bikya-proof .container { grid-template-columns: repeat(2, 1fr); }
  .bikya-facts > div:nth-child(3), .bikya-proof .container > div:nth-child(3) { border-inline-start: 0; }
  .bikya-two-col, .bikya-chapter-split { grid-template-columns: 1fr; }
  .bikya-chapter-split .bikya-chapter-copy { margin-bottom: 1rem; }
}

@media (max-width: 479.98px) {
  .bikya-visual-pair { grid-template-columns: 1fr; }
  .bikya-visual-pair-offset > :nth-child(2) { margin-top: 0; }
}

/* Dolaby case study — its rose, paper and ink palette mirrors the Arabic
   launch experience, while the responsive grid follows the portfolio system. */
.dolaby-case {
  --dolaby-ink: #292225;
  --dolaby-rose: #a55566;
  --dolaby-rose-dark: #75384a;
  --dolaby-blush: #f1ccd3;
  --dolaby-paper: #fffdf9;
  --dolaby-tan: #efe4d7;
  --dolaby-muted: #675d61;
  background: var(--dolaby-paper);
  color: var(--dolaby-ink);
  overflow: hidden;
}
.dolaby-hero { padding: clamp(5rem, 10vw, 9rem) 0; background: radial-gradient(600px 420px at 8% 10%, rgba(165,85,102,.1), transparent 65%); }
.dolaby-hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(3rem, 8vw, 8rem); align-items: center; }
.dolaby-kicker, .dolaby-number { color: var(--dolaby-rose); font-size: .78rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.dolaby-hero h1, .dolaby-brief h2, .dolaby-heading h2, .dolaby-privacy h2, .dolaby-launch h2, .dolaby-cta h2 { font-size: clamp(2.7rem, 6vw, 5.7rem); line-height: 1.03; letter-spacing: -.05em; }
.dolaby-hero h1 { margin: 1rem 0 1.5rem; }
.dolaby-lead { max-width: 720px; color: var(--dolaby-muted); font-size: clamp(1.15rem, 2vw, 1.55rem); line-height: 1.6; }
.dolaby-tags { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2rem; }
.dolaby-tags span { padding: .55rem 1rem; border: 1px solid rgba(41,34,37,.14); border-radius: 999px; font-size: .8rem; font-weight: 700; }
.dolaby-phone-stage { position: relative; min-height: 650px; display: grid; place-items: center; }
.dolaby-blob { position: absolute; border-radius: 50%; }
.dolaby-blob-one { width: 390px; height: 390px; background: var(--dolaby-blush); top: 5%; inset-inline-end: -5%; opacity: .72; }
.dolaby-blob-two { width: 260px; height: 260px; background: var(--dolaby-tan); bottom: 3%; inset-inline-start: 2%; }
.dolaby-phone { position: relative; z-index: 1; width: min(340px, 85vw); padding: 1rem 1.15rem 1.4rem; border: 10px solid var(--dolaby-ink); border-radius: 42px; background: #fff; box-shadow: 0 35px 70px rgba(41,34,37,.22); transform: rotate(-2deg); direction: rtl; }
.dolaby-status { display: flex; justify-content: space-between; direction: ltr; font-size: .72rem; font-weight: 700; }
.dolaby-app-name { margin: .7rem 0 1.2rem; font-size: 1rem; font-weight: 800; }
.dolaby-phone > p { margin: 0; color: var(--dolaby-muted); font-size: .78rem; }
.dolaby-phone > h2 { margin: .15rem 0 1rem; font-size: 1.25rem; letter-spacing: 0; }
.dolaby-outfit { padding: 1.1rem; border-radius: 20px; background: #f4e8dc; }
.dolaby-outfit strong, .dolaby-outfit small { display: block; }
.dolaby-outfit small { color: var(--dolaby-muted); }
.dolaby-clothes { height: 110px; display: flex; align-items: end; gap: .55rem; margin-top: .8rem; }
.dolaby-clothes i { display: block; width: 30%; height: 100%; border-radius: 15px 15px 6px 6px; background: #2b3040; }
.dolaby-clothes i:nth-child(2) { height: 82%; background: var(--dolaby-rose); }
.dolaby-clothes i:nth-child(3) { height: 64%; background: #c99b6e; }
.dolaby-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-top: .8rem; }
.dolaby-actions span { padding: .8rem .5rem; border: 1px solid rgba(41,34,37,.1); border-radius: 14px; text-align: center; font-size: .8rem; font-weight: 700; }
.dolaby-brief, .dolaby-features, .dolaby-privacy { padding: clamp(5rem, 11vw, 10rem) 0; }
.dolaby-two-col { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: clamp(2rem, 8vw, 8rem); align-items: center; }
.dolaby-two-col p:not(.dolaby-number) { color: var(--dolaby-muted); font-size: clamp(1.05rem, 1.8vw, 1.4rem); line-height: 1.75; }
.dolaby-proof { padding: 2.2rem 0; background: var(--dolaby-rose); color: #fff; }
.dolaby-proof .container { display: grid; grid-template-columns: repeat(4,1fr); }
.dolaby-proof .container > div { padding: .8rem 1.4rem; border-inline-start: 1px solid rgba(255,255,255,.28); }
.dolaby-proof .container > div:first-child { border-inline-start: 0; }
.dolaby-proof strong { display: block; font-size: clamp(2rem,4vw,4rem); line-height: 1; }
.dolaby-proof span { display: block; margin-top: .5rem; color: rgba(255,255,255,.8); }
.dolaby-heading { max-width: 850px; margin-bottom: clamp(2.5rem,6vw,5rem); }
.dolaby-card-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; }
.dolaby-card-grid article { padding: clamp(1.5rem,3vw,2.3rem); border: 1px solid rgba(41,34,37,.1); border-radius: 24px; background: #faf9f5; }
.dolaby-card-grid h3 { margin: 1.5rem 0 .7rem; font-size: 1.25rem; }
.dolaby-card-grid p { min-height: 100px; color: var(--dolaby-muted); }
.dolaby-card-grid b { color: #2d7d50; font-size: .8rem; }
.dolaby-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--dolaby-blush); color: var(--dolaby-rose-dark); font-size: 1.2rem; }
.dolaby-swatches { display: flex; gap: .45rem; }
.dolaby-swatches i { width: 35px; height: 45px; border-radius: 8px; background: #7c8b67; }
.dolaby-swatches i:nth-child(2) { background: var(--dolaby-tan); }.dolaby-swatches i:nth-child(3) { background: #c99b6e; }.dolaby-swatches i:nth-child(4) { background: #2b3040; }.dolaby-swatches i:nth-child(5) { background: var(--dolaby-rose); }
.dolaby-pills { display: flex; gap: .6rem; flex-wrap: wrap; }.dolaby-pills span { padding: .45rem .8rem; border-radius: 999px; background: #e7f4eb; color: #2d7d50; font-size: .75rem; font-weight: 700; }.dolaby-pills span:last-child { background: #f4e8dc; color: #8a6a46; }
.dolaby-steps { padding: clamp(5rem,11vw,10rem) 0; background: var(--dolaby-ink); color: #fff; }
.dolaby-steps .dolaby-number { color: var(--dolaby-blush); }
.dolaby-steps ol { display: grid; grid-template-columns: repeat(3,1fr); padding: 0; margin: 0; list-style: none; border: 1px solid rgba(255,255,255,.12); border-radius: 24px; overflow: hidden; }
.dolaby-steps li { padding: clamp(1.7rem,4vw,3rem); border-inline-start: 1px solid rgba(255,255,255,.12); }.dolaby-steps li:first-child { border-inline-start: 0; }
.dolaby-steps li > span { color: rgba(255,255,255,.28); font-size: 2.5rem; font-weight: 800; }.dolaby-steps h3 { margin: 2rem 0 .7rem; }.dolaby-steps li p { color: rgba(255,255,255,.65); }
.dolaby-lock-card { padding: clamp(3rem,7vw,6rem) 2rem; border-radius: 30px; background: linear-gradient(145deg,var(--dolaby-blush),#f2dfe1); text-align: center; }
.dolaby-lock-card > span { display: grid; place-items: center; width: 70px; height: 70px; margin: 0 auto 1.5rem; border-radius: 18px; background: var(--dolaby-ink); color: #fff; font-size: 2rem; }
.dolaby-lock-card strong, .dolaby-lock-card small { display: block; }.dolaby-lock-card strong { font-size: 1.35rem; }.dolaby-lock-card small { margin-top: .5rem; color: var(--dolaby-muted); }
.dolaby-launch { padding: clamp(6rem,13vw,12rem) 0; background: var(--dolaby-tan); }
.dolaby-launch h2, .dolaby-launch p { max-width: 980px; margin-inline: auto; }.dolaby-launch p { margin-top: 1.5rem; color: var(--dolaby-muted); font-size: 1.15rem; }
.dolaby-cta { padding: clamp(5rem,11vw,10rem) 0; background: linear-gradient(145deg,var(--dolaby-rose-dark),var(--dolaby-rose)); color: #fff; }
.dolaby-cta .dolaby-kicker { color: var(--dolaby-blush); }.dolaby-cta h2 { max-width: 900px; margin-inline: auto; }.dolaby-back { display: inline-block; margin-top: 2rem; color: #fff; font-size: .88rem; }

@media (max-width: 767.98px) {
  .dolaby-hero-grid, .dolaby-two-col { grid-template-columns: 1fr; }
  .dolaby-phone-stage { grid-row: 1; min-height: 560px; }
  .dolaby-card-grid, .dolaby-steps ol { grid-template-columns: 1fr; }
  .dolaby-card-grid p { min-height: 0; }
  .dolaby-steps li { border-inline-start: 0; border-top: 1px solid rgba(255,255,255,.12); }
  .dolaby-steps li:first-child { border-top: 0; }
  .dolaby-proof .container { grid-template-columns: repeat(2,1fr); }
  .dolaby-proof .container > div:nth-child(3) { border-inline-start: 0; }
}

/* Grounded-AI real-estate concept. Marked illustrative in both content and
   schema; the interface demonstrates the interaction without claiming a client. */
.property-ai-case { --pa-navy:#0f172a; --pa-deep:#0b1220; --pa-gold:#c9a227; --pa-cream:#f7f5f0; --pa-muted:#6b7280; background:#fff; color:#1a1a1a; overflow:hidden; }
.property-ai-hero { position:relative; padding:clamp(6rem,13vw,12rem) 0; background:radial-gradient(650px 430px at 80% 75%,rgba(201,162,39,.18),transparent 65%),linear-gradient(180deg,var(--pa-deep),#182338); color:#fff; }
.property-ai-hero .container { position:relative; z-index:2; max-width:980px; }
.property-ai-demo { display:inline-flex; align-items:center; gap:.4rem; padding:.5rem 1rem; border:1px solid rgba(255,255,255,.22); border-radius:999px; background:rgba(255,255,255,.08); font-size:.78rem; font-weight:700; }
.property-ai-kicker,.property-ai-number { color:var(--pa-gold); font-size:.78rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.property-ai-hero .property-ai-kicker { margin:2rem 0 1rem; }
.property-ai-hero h1,.property-ai-principle h2,.property-ai-heading h2,.property-ai-demo-section h2,.property-ai-cta h2 { font-size:clamp(2.6rem,6.5vw,6rem); line-height:1.02; letter-spacing:-.05em; }
.property-ai-lead { max-width:800px; margin:1.5rem auto 2.5rem; color:rgba(255,255,255,.72); font-size:clamp(1.05rem,2vw,1.45rem); }
.property-ai-search { display:grid; grid-template-columns:44px 1fr 36px; gap:.5rem; align-items:center; max-width:720px; margin:0 auto 1rem; padding:.55rem; border:1px solid rgba(255,255,255,.18); border-radius:17px; background:rgba(255,255,255,.07); text-align:start; }
.property-ai-search > span { display:grid; place-items:center; height:44px; border-radius:11px; background:var(--pa-gold); color:var(--pa-deep); }.property-ai-search p { margin:0; padding-inline:.5rem; color:rgba(255,255,255,.55); }.property-ai-search b { color:#e4c55c; }
.property-ai-hero small { color:rgba(255,255,255,.55); }
.property-ai-skyline { position:absolute; inset:0; display:flex; justify-content:space-around; align-items:end; opacity:.07; }.property-ai-skyline i { width:12%; height:35%; background:#fff; }.property-ai-skyline i:nth-child(2){height:60%}.property-ai-skyline i:nth-child(3){height:45%}.property-ai-skyline i:nth-child(4){height:70%}.property-ai-skyline i:nth-child(5){height:30%}
.property-ai-principle,.property-ai-pillars,.property-ai-demo-section,.property-ai-system { padding:clamp(5rem,11vw,10rem) 0; }
.property-ai-two-col { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(2rem,8vw,8rem); align-items:center; }
.property-ai-two-col > div > p:not(.property-ai-number) { color:var(--pa-muted); font-size:clamp(1.05rem,1.8vw,1.4rem); line-height:1.75; }
.property-ai-heading { max-width:900px; margin-bottom:clamp(2.5rem,6vw,5rem); }
.property-ai-pillars { background:var(--pa-cream); }
.property-ai-pillar-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.property-ai-pillar-grid article { padding:clamp(1.6rem,3vw,2.6rem); border:1px solid rgba(15,23,42,.1); border-radius:22px; background:#fff; }.property-ai-pillar-grid article > span { display:grid; place-items:center; width:58px; height:58px; border-radius:50%; background:var(--pa-navy); color:var(--pa-gold); font-size:1.3rem; }.property-ai-pillar-grid h3 { margin:1.5rem 0 .7rem; }.property-ai-pillar-grid p { color:var(--pa-muted); }
.property-ai-demo-section { background:#fff; }
.property-ai-chat { overflow:hidden; border-radius:24px; background:var(--pa-navy); box-shadow:0 30px 65px rgba(15,23,42,.2); }
.property-ai-chat-head { display:flex; justify-content:space-between; gap:1rem; padding:1.2rem 1.5rem; color:#fff; font-size:.8rem; }.property-ai-chat-head span { display:flex; align-items:center; gap:.5rem; color:rgba(255,255,255,.65); }.property-ai-chat-head i { width:8px; height:8px; border-radius:50%; background:#4ade80; box-shadow:0 0 8px #4ade80; }.property-ai-chat-head b { color:#e4c55c; }
.property-ai-chat-body { padding:1.7rem; background:#fff; }.property-ai-chat-body p { max-width:85%; padding:1rem 1.2rem; border-radius:18px; font-size:.9rem; }.property-ai-chat-body .user { margin-inline-start:auto; background:var(--pa-navy); color:#fff; border-end-end-radius:4px; }.property-ai-chat-body .bot { margin:1rem 0 0; background:var(--pa-cream); border-end-start-radius:4px; }
.property-ai-system { background:var(--pa-navy); color:#fff; }.property-ai-system .property-ai-heading { margin-inline:auto; text-align:center; }.property-ai-flow { display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; gap:1rem; align-items:center; }.property-ai-flow span { padding:1.4rem 1rem; border:1px solid rgba(255,255,255,.16); border-radius:14px; text-align:center; color:rgba(255,255,255,.8); }.property-ai-flow b { color:var(--pa-gold); font-size:1.5rem; }
.property-ai-cta { padding:clamp(6rem,12vw,11rem) 0; background:var(--pa-cream); }.property-ai-cta h2 { max-width:900px; margin-inline:auto; }.property-ai-back { display:inline-block; margin-top:2rem; color:var(--pa-navy); font-size:.88rem; font-weight:600; }

@media (max-width:767.98px){
  .property-ai-two-col,.property-ai-pillar-grid { grid-template-columns:1fr; }
  .property-ai-flow { grid-template-columns:1fr; }.property-ai-flow b { transform:rotate(90deg); text-align:center; }
  .property-ai-chat { margin-top:1rem; }
}

/* B2B medical-supply commerce capability — teal, white and operational UI. */
.med-commerce-case{--med-deep:#053746;--med-teal:#0b7180;--med-aqua:#82c4cc;--med-paper:#f3f7f8;--med-ink:#15343b;background:#fff;color:var(--med-ink);overflow:hidden}.med-commerce-hero{position:relative;padding:clamp(6rem,12vw,11rem) 0;background:linear-gradient(135deg,var(--med-deep),#087789);color:#fff}.med-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:84px 84px}.med-hero-grid{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(3rem,7vw,7rem);align-items:center}.med-demo{display:inline-flex;padding:.5rem 1rem;border:1px solid rgba(255,255,255,.25);border-radius:999px;background:rgba(255,255,255,.08);font-size:.78rem;font-weight:700}.med-kicker,.med-number{color:#8bd1d8;font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.med-hero-grid .med-kicker{margin:2rem 0 1rem}.med-commerce-case h1,.med-commerce-case h2{letter-spacing:-.045em}.med-commerce-hero h1,.med-overview h2,.med-heading h2,.med-cta h2{font-size:clamp(2.6rem,5.8vw,5.5rem);line-height:1.03}.med-lead{max-width:760px;color:rgba(255,255,255,.72);font-size:clamp(1.05rem,2vw,1.4rem);line-height:1.65}.med-trust{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:2rem}.med-trust span{padding:.5rem .8rem;border-radius:999px;background:rgba(255,255,255,.1);font-size:.75rem;font-weight:700}.med-process-card{padding:clamp(1.6rem,3vw,2.6rem);border:1px solid rgba(255,255,255,.18);border-radius:24px;background:rgba(255,255,255,.09);backdrop-filter:blur(8px)}.med-process-card h2{font-size:1.25rem;letter-spacing:0}.med-process-card ol{margin:1.3rem 0 0;padding-inline-start:1.4rem}.med-process-card li{padding:.85rem .5rem;border-bottom:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.78)}.med-overview,.med-catalog,.med-workflow,.med-capabilities{padding:clamp(5rem,11vw,10rem) 0}.med-two-col{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,8vw,8rem);align-items:center}.med-two-col p:not(.med-number){color:#567078;font-size:clamp(1.05rem,1.8vw,1.4rem);line-height:1.75}.med-number{color:var(--med-teal)}.med-heading{max-width:900px;margin-bottom:clamp(2.5rem,6vw,5rem)}.med-catalog{background:var(--med-paper)}.med-catalog-shell{display:grid;grid-template-columns:250px 1fr;overflow:hidden;border:1px solid #d9e8eb;border-radius:24px;background:#fff;box-shadow:0 25px 60px rgba(5,55,70,.1)}.med-catalog-shell aside{padding:1.5rem;background:#f8fbfb}.med-catalog-shell aside h3{margin-bottom:1.5rem}.med-catalog-shell aside label{display:block;margin:1.3rem 0 .6rem;color:#6a8086;font-size:.72rem;font-weight:800;text-transform:uppercase}.med-catalog-shell aside span{display:flex;justify-content:space-between;padding:.55rem .7rem;border-radius:8px;font-size:.82rem}.med-catalog-shell aside .active{background:#dceff1;color:var(--med-deep);font-weight:700}.med-products{padding:1.5rem}.med-toolbar{display:flex;justify-content:space-between;gap:1rem;margin-bottom:1.3rem}.med-toolbar span{color:#6a8086;font-size:.8rem}.med-product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.med-product-grid article{overflow:hidden;border:1px solid #d9e8eb;border-radius:16px;padding:0 1rem 1rem}.med-product-image{display:grid;place-items:center;height:130px;margin:0 -1rem 1rem;background:#e6f2f4;color:var(--med-teal);font-size:2.5rem}.med-product-grid small{color:#6a8086}.med-product-grid h3{min-height:48px;margin:.4rem 0;font-size:.95rem}.med-product-grid article>span{display:block;color:#23724a;font-size:.75rem}.med-product-grid button{width:100%;margin-top:1rem;padding:.65rem;border:0;border-radius:8px;background:var(--med-teal);color:#fff;font-weight:700;opacity:1}.med-workflow{background:var(--med-deep);color:#fff}.med-workflow .med-number{color:var(--med-aqua)}.med-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;gap:1rem;align-items:center}.med-flow span{padding:1.3rem 1rem;border:1px solid rgba(255,255,255,.16);border-radius:14px;text-align:center;color:rgba(255,255,255,.82)}.med-flow b{color:var(--med-aqua);font-size:1.4rem}.med-cap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}.med-cap-grid article{padding:1.7rem;border:1px solid #d9e8eb;border-radius:20px}.med-cap-grid article>span{display:grid;place-items:center;width:50px;height:50px;border-radius:14px;background:#dceff1;color:var(--med-teal);font-size:1.25rem}.med-cap-grid h3{margin:1.3rem 0 .6rem;font-size:1.05rem}.med-cap-grid p{color:#6a8086;font-size:.88rem}.med-cta{padding:clamp(6rem,12vw,11rem) 0;background:linear-gradient(135deg,var(--med-deep),#087789);color:#fff}.med-cta .med-kicker{color:#8bd1d8}.med-cta h2{max-width:900px;margin-inline:auto}.med-back{display:inline-block;margin-top:2rem;color:#fff;font-size:.88rem}
@media(max-width:991.98px){.med-hero-grid,.med-two-col{grid-template-columns:1fr}.med-catalog-shell{grid-template-columns:1fr}.med-catalog-shell aside{display:none}.med-cap-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:767.98px){.med-product-grid,.med-cap-grid{grid-template-columns:1fr}.med-flow{grid-template-columns:1fr}.med-flow b{transform:rotate(90deg);text-align:center}}

/* --- Lightbox --------------------------------------------------------------
   Built by alkaraji.lightbox.js; hidden entirely until a picture is opened. */
.ak-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  background-color: rgba(9, 12, 20, 0.92);
}

.ak-lightbox[hidden] { display: none; }
body.ak-lightbox-open { overflow: hidden; }

.ak-lightbox-figure {
  margin: 0;
  max-width: min(1100px, 100%);
  max-height: 100%;
  text-align: center;
}

.ak-lightbox-figure img {
  max-width: 100%;
  max-height: calc(100vh - 120px);
  object-fit: contain;
  border-radius: 8px;
}

.ak-lightbox-figure figcaption {
  margin-top: 12px;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.ak-lightbox-close,
.ak-lightbox-nav {
  flex: none;
  width: 44px;
  height: 44px;
  font-size: 1.6rem;
  line-height: 1;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  cursor: pointer;
}

.ak-lightbox-close:hover,
.ak-lightbox-nav:hover { background-color: rgba(255, 255, 255, 0.2); }

.ak-lightbox-close {
  position: absolute;
  inset-block-start: 16px;
  inset-inline-end: 16px;
}

/* The arrows point the way the language reads. */
html[dir="rtl"] .ak-lightbox-nav.prev,
html[dir="rtl"] .ak-lightbox-nav.next { transform: scaleX(-1); }

@media (max-width: 575.98px) {
  .ak-lightbox { padding: 12px; }
  .ak-lightbox-nav { width: 36px; height: 36px; font-size: 1.3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .case-study-gallery-item img { transition: none; }
  .case-study-gallery-item a:hover img { transform: none; }
}