/* OFAIR company-profile inspired visual system — 2026-09-13
   Two presentation modes derived from the official profile:
   Day: warm ivory. Night: midnight navy. Gold remains the accent.
   URW DIN Arabic is the brand typeface used in the supplied profile; the
   browser falls back only when a licensed webfont is not available. */

:root,
:root[data-theme="light"] {
  color-scheme: light;
  --ofair-page: #F2EFE6;
  --ofair-surface: #F7F3EA;
  --ofair-surface-2: #E8E3D8;
  --ofair-ink: #101722;
  --ofair-muted: #716E68;
  --ofair-navy: #08111C;
  --ofair-navy-2: #132131;
  --ofair-gold: #B59154;
  --ofair-gold-strong: #9B753E;
  --ofair-line: rgba(8, 17, 28, .15);
  --ofair-line-gold: rgba(181, 145, 84, .48);
  --ofair-header: rgba(242, 239, 230, .94);
  --ofair-header-text: #101722;
  --ofair-card: rgba(247, 243, 234, .92);
  --ofair-soft-shadow: 0 18px 48px rgba(8, 17, 28, .08);
  --ofair-image-filter: brightness(.72) saturate(.82) contrast(1.03);
  --ofair-font: "URW DIN Arabic", "DIN Next Arabic", "Arial", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --ofair-page: #08111C;
    --ofair-surface: #0E1928;
    --ofair-surface-2: #132131;
    --ofair-ink: #F2EFE6;
    --ofair-muted: #BDB8AE;
    --ofair-navy: #08111C;
    --ofair-navy-2: #132131;
    --ofair-gold: #B59154;
    --ofair-gold-strong: #C5A367;
    --ofair-line: rgba(242, 239, 230, .14);
    --ofair-line-gold: rgba(181, 145, 84, .52);
    --ofair-header: rgba(8, 17, 28, .92);
    --ofair-header-text: #F2EFE6;
    --ofair-card: rgba(14, 25, 40, .92);
    --ofair-soft-shadow: 0 20px 54px rgba(0, 0, 0, .24);
    --ofair-image-filter: brightness(.64) saturate(.78) contrast(1.05);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ofair-page: #08111C;
  --ofair-surface: #0E1928;
  --ofair-surface-2: #132131;
  --ofair-ink: #F2EFE6;
  --ofair-muted: #BDB8AE;
  --ofair-navy: #08111C;
  --ofair-navy-2: #132131;
  --ofair-gold: #B59154;
  --ofair-gold-strong: #C5A367;
  --ofair-line: rgba(242, 239, 230, .14);
  --ofair-line-gold: rgba(181, 145, 84, .52);
  --ofair-header: rgba(8, 17, 28, .92);
  --ofair-header-text: #F2EFE6;
  --ofair-card: rgba(14, 25, 40, .92);
  --ofair-soft-shadow: 0 20px 54px rgba(0, 0, 0, .24);
  --ofair-image-filter: brightness(.64) saturate(.78) contrast(1.05);
}

html {
  background: var(--ofair-page);
}

body {
  font-family: var(--ofair-font) !important;
  font-synthesis: none;
  background: var(--ofair-page) !important;
  color: var(--ofair-ink) !important;
  line-height: 1.75;
  transition: background-color .28s ease, color .28s ease;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

.container {
  width: min(1320px, calc(100% - 72px));
}

.section-pad {
  padding: 118px 0 !important;
}

.eyebrow {
  color: var(--ofair-gold) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: .035em;
}

h1,
h2,
h3,
strong {
  font-family: var(--ofair-font) !important;
  font-weight: 500 !important;
}

h2 {
  color: var(--ofair-ink) !important;
  font-size: clamp(38px, 4.1vw, 64px) !important;
  line-height: 1.24 !important;
  letter-spacing: -.015em;
}

/* Header: thin editorial bar, matching the profile's page headers. */
.site-header {
  min-height: 78px;
  background: var(--ofair-header) !important;
  color: var(--ofair-header-text) !important;
  border-bottom: 1px solid var(--ofair-line) !important;
  box-shadow: none !important;
  backdrop-filter: blur(18px) saturate(1.05);
}

.nav-wrap {
  height: 78px !important;
  gap: 24px !important;
}

.brand img {
  width: 142px !important;
  height: 54px !important;
}

.main-nav {
  gap: 25px !important;
}

.main-nav a {
  color: var(--ofair-muted) !important;
  font-size: 13px !important;
  font-weight: 500;
  padding-block: 28px 22px !important;
}

.main-nav a:hover,
.main-nav a.active {
  color: var(--ofair-ink) !important;
}

.main-nav a.active::after {
  height: 1px !important;
  background: var(--ofair-gold) !important;
}

.nav-cta {
  border: 1px solid var(--ofair-gold) !important;
  border-radius: 0 !important;
  color: var(--ofair-gold-strong) !important;
  background: transparent !important;
  padding: 9px 16px !important;
}

.theme-toggle {
  appearance: none;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 7px 11px;
  border: 1px solid var(--ofair-line);
  border-radius: 0;
  background: transparent;
  color: var(--ofair-header-text);
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}

.theme-toggle:hover {
  border-color: var(--ofair-gold);
  color: var(--ofair-gold-strong);
}

.theme-toggle-icon {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  line-height: 1;
  font-size: 16px;
}

.theme-toggle-label {
  font-size: 11px;
  white-space: nowrap;
}

.menu-toggle span {
  background: var(--ofair-gold) !important;
}

/* Hero: editorial split — image panel + quiet brand statement. */
.hero {
  min-height: 790px !important;
  padding-top: 78px !important;
  background: var(--ofair-page) !important;
  color: var(--ofair-ink) !important;
  display: block !important;
  border-bottom: 1px solid var(--ofair-line);
}

.hero-photo {
  inset: 78px auto 0 0 !important;
  width: 46% !important;
  height: auto !important;
  background: var(--ofair-navy) !important;
  border-right: 1px solid var(--ofair-line-gold);
}

.hero-poster,
.hero-video {
  filter: var(--ofair-image-filter) !important;
}

.hero-photo::after {
  background:
    linear-gradient(180deg, rgba(8,17,28,.05) 0%, rgba(8,17,28,.14) 55%, rgba(8,17,28,.72) 100%),
    linear-gradient(90deg, rgba(8,17,28,.08), rgba(8,17,28,.42)) !important;
}

.watermark-hero {
  width: 360px !important;
  left: 42px !important;
  top: 11% !important;
  opacity: .14 !important;
}

.hero-grid {
  min-height: 710px !important;
  width: min(1320px, calc(100% - 72px)) !important;
  padding: 92px 0 150px !important;
  display: block !important;
}

.hero-brand-focus {
  width: 48% !important;
  max-width: 610px !important;
  min-height: 440px;
  margin: 0 0 0 auto !important;
  padding: 12px 0 0 !important;
  align-items: flex-start !important;
  justify-content: center !important;
  text-align: right !important;
  gap: 22px !important;
}

.hero-brand-focus::before {
  width: min(100%, 520px) !important;
  margin: 0 !important;
  background: var(--ofair-gold) !important;
  filter: none !important;
}

.hero-brand-focus::after {
  content: "إدارة متكاملة.\Aقيمة مستدامة.\A\Aنعتني بالمكان، ونرتقي بتجربته كل يوم.";
  white-space: pre-line;
  display: block;
  margin-top: 2px;
  max-width: 560px;
  color: var(--ofair-ink);
  font-size: clamp(22px, 2.4vw, 38px);
  line-height: 1.55;
  font-weight: 500;
}

.hero-actions-centered {
  width: 100% !important;
  justify-content: flex-start !important;
  margin-top: 8px !important;
}

.btn {
  min-width: 165px !important;
  border-radius: 0 !important;
  padding: 12px 21px !important;
  font-size: 13px;
  font-weight: 500 !important;
  box-shadow: none !important;
}

.btn-gold {
  background: var(--ofair-gold) !important;
  color: var(--ofair-navy) !important;
}

.btn-gold:hover {
  background: var(--ofair-gold-strong) !important;
  transform: none !important;
}

.btn-ghost {
  border: 1px solid var(--ofair-line) !important;
  color: var(--ofair-ink) !important;
  background: transparent !important;
}

.btn-ghost:hover {
  border-color: var(--ofair-gold) !important;
}

.hero-strip {
  right: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 112px;
  border: 0 !important;
  border-top: 1px solid var(--ofair-line) !important;
  border-radius: 0 !important;
  background: var(--ofair-surface) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding-inline: max(36px, calc((100vw - 1320px) / 2)) !important;
}

.hero-strip .glass-stat {
  min-height: 112px !important;
  padding: 20px 28px !important;
  color: var(--ofair-ink) !important;
}

.hero-strip .glass-stat:not(:last-child) {
  border-left: 1px solid var(--ofair-line) !important;
}

.hero-strip .glass-stat:hover {
  background: var(--ofair-surface-2) !important;
}

.cap-number {
  flex: 0 0 38px !important;
  width: 38px !important;
  height: 38px !important;
  border: 1px solid var(--ofair-gold) !important;
  border-radius: 0 !important;
  background: var(--ofair-navy) !important;
  color: var(--ofair-gold) !important;
}

.hero-strip .glass-stat strong {
  color: var(--ofair-ink) !important;
  font-size: 16px !important;
}

.hero-strip .glass-stat>div>span {
  color: var(--ofair-muted) !important;
  font-size: 11px !important;
}

/* Content sections: paper-like in day mode, deep architectural surfaces at night. */
.about,
.process,
.why {
  background: var(--ofair-page) !important;
  color: var(--ofair-ink) !important;
}

.services,
.contact {
  background: var(--ofair-surface) !important;
  color: var(--ofair-ink) !important;
}

.split-grid,
.reverse {
  gap: clamp(48px, 6vw, 96px) !important;
}

.section-copy p:not(.eyebrow),
.section-head>p,
.contact-copy p,
.process-line p,
.why-list p {
  color: var(--ofair-muted) !important;
}

.clean-points {
  margin: 34px 0 !important;
  gap: 0 !important;
  border-top: 1px solid var(--ofair-line);
}

.clean-points div {
  min-height: 62px;
  border-bottom: 1px solid var(--ofair-line) !important;
  padding: 13px 0 !important;
}

.clean-points b {
  min-width: 38px;
  color: var(--ofair-gold) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

.text-link {
  color: var(--ofair-gold-strong) !important;
  font-weight: 500 !important;
}

.about-showcase,
.photo-panel {
  min-height: 570px !important;
  border-radius: 0 !important;
  border: 1px solid var(--ofair-line-gold) !important;
  box-shadow: none !important;
}

.about-showcase::before,
.about-showcase::after {
  width: 74px !important;
  height: 74px !important;
  border-color: var(--ofair-gold) !important;
}

.about-showcase-image,
.photo-panel>img:first-child {
  filter: brightness(.67) saturate(.78) contrast(1.04) !important;
}

.about-showcase-copy>span,
.about-showcase-copy>strong,
.about-showcase-tags span {
  font-family: var(--ofair-font) !important;
}

.about-showcase-copy>strong {
  font-weight: 500 !important;
}

.about-showcase-tags span {
  border-radius: 0 !important;
  border-color: rgba(181,145,84,.42) !important;
}

.section-head {
  margin-bottom: 46px !important;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--ofair-line);
}

.service-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

.service-card {
  height: 330px !important;
  border-radius: 0 !important;
  border: 1px solid var(--ofair-line) !important;
  box-shadow: none !important;
  transition: transform .28s ease, border-color .28s ease;
}

.service-card:hover {
  transform: translateY(-4px);
  border-color: var(--ofair-gold) !important;
}

.services .service-overlay {
  background: linear-gradient(180deg, rgba(8,17,28,.08), rgba(8,17,28,.26) 42%, rgba(8,17,28,.93) 92%) !important;
}

.service-content {
  inset: auto 26px 24px !important;
}

.service-content span {
  color: var(--ofair-gold) !important;
  font-size: 12px !important;
}

.service-content h3 {
  color: #F2EFE6 !important;
  font-size: 25px !important;
  font-weight: 500 !important;
}

.service-content p {
  color: rgba(242, 239, 230, .72) !important;
  max-width: 520px;
}

.process-line {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0 !important;
  border-top: 1px solid var(--ofair-line) !important;
  border-bottom: 0 !important;
}

.process-line article {
  min-height: 220px !important;
  padding: 34px 30px !important;
  border-left: 0 !important;
  border-bottom: 1px solid var(--ofair-line);
  position: relative;
}

.process-line article:nth-child(odd) {
  border-left: 1px solid var(--ofair-line) !important;
}

.process-line span {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 34px;
  margin-bottom: 18px;
  background: var(--ofair-navy);
  color: var(--ofair-gold) !important;
  font-size: 11px !important;
}

.process-line h3 {
  color: var(--ofair-ink) !important;
  font-size: 24px !important;
  font-weight: 500 !important;
}

.why-list {
  gap: 0 !important;
  border-top: 1px solid var(--ofair-line);
}

.why-list article {
  padding: 22px 8px 22px 0 !important;
  border-bottom: 1px solid var(--ofair-line) !important;
}

.why-list h3 {
  color: var(--ofair-ink) !important;
  font-size: 18px !important;
  font-weight: 500 !important;
}

.contact-box {
  border-radius: 0 !important;
  border: 1px solid var(--ofair-line-gold) !important;
  background: var(--ofair-navy) !important;
  box-shadow: none !important;
  padding: 62px !important;
}

.contact-copy h2,
.contact-copy p,
.contact-box .eyebrow {
  color: #F2EFE6 !important;
}

.contact-box .eyebrow {
  color: var(--ofair-gold) !important;
}

.contact-fields a {
  border-radius: 0 !important;
  border-color: rgba(181,145,84,.35) !important;
  background: rgba(255,255,255,.02) !important;
  color: #F2EFE6 !important;
}

.contact-fields a:hover {
  border-color: var(--ofair-gold) !important;
}

.contact-fields span {
  color: rgba(242,239,230,.56) !important;
}

.site-footer {
  padding: 28px 0 !important;
  background: var(--ofair-page) !important;
  border-top: 1px solid var(--ofair-line) !important;
  color: var(--ofair-ink) !important;
}

.footer-wrap p {
  color: var(--ofair-gold-strong) !important;
}

.footer-wrap a,
.oriv-privacy-settings {
  color: var(--ofair-muted) !important;
}

/* Privacy component is created after page CSS, so theme overrides are explicit. */
.oriv-privacy-banner {
  font-family: var(--ofair-font) !important;
  border-radius: 0 !important;
  border-color: var(--ofair-line-gold) !important;
  background: var(--ofair-card) !important;
  color: var(--ofair-ink) !important;
  box-shadow: var(--ofair-soft-shadow) !important;
}

.oriv-privacy-banner strong {
  color: var(--ofair-ink) !important;
}

.oriv-privacy-banner p {
  color: var(--ofair-muted) !important;
}

.oriv-privacy-essential {
  color: var(--ofair-ink) !important;
  border-color: var(--ofair-line) !important;
}

.oriv-privacy-accept {
  border-radius: 0 !important;
  background: var(--ofair-gold) !important;
  color: var(--ofair-navy) !important;
}

.reveal {
  transform: translateY(12px) !important;
}

@media (max-width: 1100px) {
  .container,
  .hero-grid {
    width: min(100% - 48px, 1120px) !important;
  }

  .hero-brand-focus {
    width: 51% !important;
  }

  .hero-photo {
    width: 44% !important;
  }

  .hero-strip {
    padding-inline: 24px !important;
  }

  .theme-toggle-label {
    display: none;
  }
}

@media (max-width: 980px) {
  .site-header,
  .nav-wrap {
    min-height: 72px !important;
    height: 72px !important;
  }

  .brand img {
    width: 128px !important;
  }

  .theme-toggle {
    margin-right: auto;
  }

  .menu-toggle {
    margin-right: 0 !important;
  }

  .main-nav.open {
    top: 72px !important;
    right: 22px !important;
    left: 22px !important;
    border-radius: 0 !important;
    border-color: var(--ofair-line) !important;
    background: var(--ofair-surface) !important;
    color: var(--ofair-ink) !important;
    box-shadow: var(--ofair-soft-shadow) !important;
  }

  .main-nav.open a {
    color: var(--ofair-ink) !important;
    border-bottom-color: var(--ofair-line) !important;
  }

  .hero {
    min-height: auto !important;
    padding-top: 72px !important;
  }

  .hero-photo {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 52svh !important;
    min-height: 430px;
    border-right: 0 !important;
    border-bottom: 1px solid var(--ofair-line-gold);
  }

  .hero-grid {
    min-height: auto !important;
    padding: 58px 0 34px !important;
  }

  .hero-brand-focus {
    width: 100% !important;
    max-width: 720px !important;
    min-height: 0 !important;
    margin: 0 !important;
  }

  .hero-brand-focus::before {
    width: min(72vw, 500px) !important;
  }

  .hero-brand-focus::after {
    font-size: clamp(24px, 5vw, 36px);
  }

  .hero-strip {
    position: relative !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    min-height: 0;
  }

  .hero-strip .glass-stat,
  .hero-strip .glass-stat:nth-child(1),
  .hero-strip .glass-stat:nth-child(2) {
    border-bottom: 1px solid var(--ofair-line) !important;
  }

  .hero-strip .glass-stat:nth-child(2),
  .hero-strip .glass-stat:nth-child(4) {
    border-left: 0 !important;
  }

  .service-grid {
    grid-template-columns: 1fr !important;
  }

  .service-card {
    height: 310px !important;
  }

  .contact-box {
    padding: 44px !important;
  }
}

@media (max-width: 640px) {
  .container,
  .hero-grid {
    width: calc(100% - 28px) !important;
  }

  .section-pad {
    padding: 78px 0 !important;
  }

  h2 {
    font-size: clamp(34px, 10vw, 46px) !important;
  }

  .site-header,
  .nav-wrap {
    min-height: 68px !important;
    height: 68px !important;
  }

  .brand img {
    width: 116px !important;
    height: 44px !important;
  }

  .theme-toggle {
    min-height: 36px;
    padding: 7px 9px;
  }

  .main-nav.open {
    top: 68px !important;
    right: 14px !important;
    left: 14px !important;
  }

  .hero {
    padding-top: 68px !important;
  }

  .hero-photo {
    height: 45svh !important;
    min-height: 340px !important;
  }

  .hero-grid {
    padding: 44px 0 28px !important;
  }

  .hero-brand-focus {
    gap: 16px !important;
  }

  .hero-brand-focus::before {
    width: min(88vw, 430px) !important;
  }

  .hero-brand-focus::after {
    font-size: 26px;
    line-height: 1.6;
  }

  .hero-actions-centered {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .btn {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 12px !important;
  }

  .hero-strip {
    grid-template-columns: 1fr !important;
    padding-inline: 14px !important;
  }

  .hero-strip .glass-stat {
    min-height: 82px !important;
    padding: 14px 10px !important;
    border-left: 0 !important;
    border-bottom: 1px solid var(--ofair-line) !important;
  }

  .hero-strip .glass-stat:last-child {
    border-bottom: 0 !important;
  }

  .split-grid,
  .reverse {
    gap: 34px !important;
  }

  .about-showcase,
  .photo-panel {
    min-height: 420px !important;
  }

  .service-card {
    height: 270px !important;
  }

  .process-line {
    grid-template-columns: 1fr !important;
  }

  .process-line article,
  .process-line article:nth-child(odd) {
    min-height: 0 !important;
    padding: 28px 18px !important;
    border-left: 0 !important;
  }

  .why-list {
    grid-template-columns: 1fr !important;
  }

  .contact-box {
    padding: 32px 22px !important;
  }

  .footer-wrap {
    align-items: flex-start !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}