/* ======================================================================
   LUSAIL INTERNATIONAL — LIGHT / DARK THEME LAYER
   Light is the first-visit default. Dark choice is stored in localStorage.
   ====================================================================== */

:root,
html[data-theme="light"] {
  --brand-pattern: url('../images/lusail-brand-watermark.png');
  --theme-bg: #f7faf9;
  --theme-surface: #ffffff;
  --theme-surface-2: #eef4f2;
  --theme-surface-3: #e5eeeb;
  --theme-text: #15211e;
  --theme-text-mid: #3d4a46;
  --theme-text-soft: #68746f;
  --theme-line: rgba(21, 33, 30, .12);
  --theme-line-strong: rgba(21, 33, 30, .20);
  --theme-glass: rgba(255, 255, 255, .86);
  --theme-shadow: 0 18px 55px rgba(21, 46, 40, .09);
  --theme-nav: rgba(255, 255, 255, .84);
  --theme-nav-scrolled: rgba(250, 252, 251, .96);
  --theme-hero-copy: #13201d;
  --theme-hero-muted: rgba(19, 32, 29, .70);
  --theme-pattern-opacity: .10;
  --paper: #f7faf9;
  --sand: #eef4f2;
  --sand-2: #e4ece9;
  --ink: #15211e;
  --ink-mid: #3d4a46;
  --ink-soft: #68746f;
  --dark-bg: #eef4f2;
  --dark-card: #ffffff;
}

html[data-theme="dark"] {
  --theme-bg: #081412;
  --theme-surface: #0d1d1a;
  --theme-surface-2: #122824;
  --theme-surface-3: #17312c;
  --theme-text: #f3f5f3;
  --theme-text-mid: #c5cfcc;
  --theme-text-soft: #93a39e;
  --theme-line: rgba(255, 255, 255, .11);
  --theme-line-strong: rgba(255, 255, 255, .18);
  --theme-glass: rgba(8, 20, 18, .76);
  --theme-shadow: 0 24px 70px rgba(0, 0, 0, .26);
  --theme-nav: rgba(8, 20, 18, .70);
  --theme-nav-scrolled: rgba(8, 20, 18, .95);
  --theme-hero-copy: #f5f7f5;
  --theme-hero-muted: rgba(255, 255, 255, .68);
  --theme-pattern-opacity: .12;
  --paper: #081412;
  --sand: #0d1d1a;
  --sand-2: #122824;
  --ink: #f3f5f3;
  --ink-mid: #c5cfcc;
  --ink-soft: #93a39e;
  --dark-bg: #081412;
  --dark-card: #0d1d1a;
}

html {
  background: var(--theme-bg);
  transition: background-color .28s ease, color .28s ease;
}

body,
.inner-page {
  background: var(--theme-bg);
  color: var(--theme-text);
  transition: background-color .28s ease, color .28s ease;
}

.section-pad,
.delivery-process,
.faq-section,
.projects-page .section-pad,
#about {
  background-color: var(--theme-bg);
  color: var(--theme-text);
}

.section-muted {
  background: var(--theme-surface-2);
}

/* Keep the brand watermark fully inside each section instead of cropping it. */
.section-pad::before {
  top: clamp(24px, 4vw, 58px) !important;
  right: max(18px, calc((100vw - 1320px) / 2 + 8px)) !important;
  width: clamp(110px, 14vw, 220px) !important;
  aspect-ratio: 1 / 1;
  background: var(--brand-pattern) center / contain no-repeat !important;
  opacity: .026 !important;
}

.section-pad::after {
  display: none !important;
}

html[data-theme="dark"] .section-pad::before {
  opacity: .05 !important;
}

/* ======================================================================
   NAVIGATION + THEME SWITCH
   ====================================================================== */
#mainNav .container,
.inner-page #mainNav .container,
#mainNav.scrolled .container {
  border-color: var(--theme-line);
  background: var(--theme-nav);
  box-shadow: var(--theme-shadow);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
}

#mainNav.scrolled .container {
  background: var(--theme-nav-scrolled);
}

.nav-link {
  color: var(--theme-text-mid) !important;
}

.nav-link:hover,
.nav-link:focus-visible,
.nav-link.active,
.nav-link[aria-current="page"] {
  color: var(--theme-text) !important;
}

.navbar-toggler {
  border-color: var(--theme-line-strong) !important;
}

html[data-theme="light"] .navbar-toggler-icon {
  filter: none !important;
}

html[data-theme="dark"] .navbar-toggler-icon {
  filter: invert(1) !important;
}

.theme-toggle {
  flex: 0 0 auto;
  min-width: 86px;
  min-height: 44px;
  margin-left: .65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .48rem;
  border: 1px solid var(--theme-line-strong);
  border-radius: 999px;
  background: var(--theme-surface);
  background: color-mix(in srgb, var(--theme-surface) 80%, transparent);
  color: var(--theme-text-mid);
  font-family: var(--ff-utility);
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .24s ease, border-color .24s ease, background-color .24s ease, color .24s ease;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(111,153,147,.58);
  background: color-mix(in srgb, var(--brand-pale) 58%, var(--theme-surface));
  color: var(--brand-dark);
}

.theme-toggle i {
  font-size: .88rem;
}

html[data-theme="dark"] .theme-toggle:hover,
html[data-theme="dark"] .theme-toggle:focus-visible {
  color: var(--brand-light);
  background: rgba(111,153,147,.13);
}

/* ======================================================================
   QATAR SKYLINE HERO — light first, dark optional
   Photo: Doha / West Bay skyline, Unsplash.
   ====================================================================== */
.hero-section {
  min-height: max(780px, 92svh);
  background-image:
    linear-gradient(90deg,
      rgba(247,250,249,.985) 0%,
      rgba(247,250,249,.955) 32%,
      rgba(247,250,249,.78) 54%,
      rgba(247,250,249,.28) 74%,
      rgba(247,250,249,.08) 100%),
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.08)),
    url('https://images.unsplash.com/photo-1604433203862-93bc73b0f1e9?auto=format&fit=crop&fm=jpg&q=80&w=2200');
  background-position: center, center, center 54%;
  background-size: cover;
  background-repeat: no-repeat;
}

html[data-theme="dark"] .hero-section {
  background-image:
    linear-gradient(90deg,
      rgba(8,20,18,.97) 0%,
      rgba(8,20,18,.93) 34%,
      rgba(8,20,18,.72) 58%,
      rgba(8,20,18,.34) 78%,
      rgba(8,20,18,.18) 100%),
    linear-gradient(180deg, rgba(8,20,18,.08), rgba(8,20,18,.30)),
    url('https://images.unsplash.com/photo-1604433203862-93bc73b0f1e9?auto=format&fit=crop&fm=jpg&q=80&w=2200');
}

.hero-overlay {
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 52%, rgba(247,250,249,.78) 100%);
}

html[data-theme="dark"] .hero-overlay {
  background: linear-gradient(180deg, rgba(8,20,18,.05), transparent 52%, rgba(8,20,18,.78) 100%);
}

/* The brand mark is framed entirely within the page edge. */
.hero-bg-pattern {
  inset: auto !important;
  top: clamp(112px, 13vh, 150px) !important;
  right: max(22px, calc((100vw - 1320px) / 2 + 12px)) !important;
  width: clamp(170px, 24vw, 360px) !important;
  aspect-ratio: 1 / 1;
  height: auto !important;
  background: var(--brand-pattern) center / contain no-repeat !important;
  opacity: var(--theme-pattern-opacity) !important;
  mix-blend-mode: normal;
}

html[data-theme="dark"] .hero-bg-pattern {
  mix-blend-mode: normal;
  opacity: .10 !important;
}

.hero-premium::before {
  z-index: 0;
  background-image:
    linear-gradient(rgba(21,33,30,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21,33,30,.035) 1px, transparent 1px);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.42), transparent 82%);
}

html[data-theme="dark"] .hero-premium::before {
  background-image:
    linear-gradient(rgba(255,255,255,.027) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.027) 1px, transparent 1px);
}

.hero-section .hero-container {
  position: relative;
  z-index: 2;
  padding-top: 152px;
  padding-bottom: 122px;
}

.hero-content {
  max-width: 720px;
}

.hero-eyebrow {
  color: var(--brand-dark);
}

html[data-theme="dark"] .hero-eyebrow {
  color: var(--brand-light);
}

.hero-title {
  color: var(--theme-hero-copy);
  text-shadow: none;
  font-size: clamp(3.9rem, 7vw, 7.35rem);
}

.hero-title .hero-accent {
  color: var(--brand-dark);
}

html[data-theme="dark"] .hero-title .hero-accent {
  color: var(--brand-light);
}

.hero-slogan {
  color: var(--theme-text-mid);
}

.hero-desc {
  color: var(--theme-hero-muted);
}

.hero-trust-row span {
  color: var(--theme-text-mid);
}

.hero-trust-row i {
  color: var(--brand-dark);
}

html[data-theme="dark"] .hero-trust-row i {
  color: var(--brand-light);
}

html[data-theme="light"] .hero-actions .btn-outline-brand {
  border-color: rgba(21,33,30,.24);
  background: rgba(255,255,255,.60);
  color: var(--theme-text);
}

html[data-theme="light"] .hero-actions .btn-outline-brand:hover,
html[data-theme="light"] .hero-actions .btn-outline-brand:focus-visible {
  border-color: var(--brand-dark);
  background: rgba(255,255,255,.92);
  color: var(--brand-dark);
}

.hero-stats {
  position: relative;
  z-index: 3;
  border-top: 1px solid var(--theme-line);
  background: rgba(247,250,249,.80);
  backdrop-filter: blur(18px);
}

html[data-theme="dark"] .hero-stats {
  background: rgba(8,20,18,.80);
  border-top-color: rgba(255,255,255,.10);
}

html[data-theme="light"] .stat-num {
  color: var(--theme-text);
}

html[data-theme="light"] .stat-label {
  color: var(--theme-text-soft);
}

/* ======================================================================
   LIGHT SURFACES
   ====================================================================== */
html[data-theme="light"] .section-dark {
  background:
    radial-gradient(circle at 84% 10%, rgba(111,153,147,.09), transparent 24%),
    linear-gradient(180deg, #f3f8f6, #eaf1ef);
}

html[data-theme="light"] .section-dark .section-title.light,
html[data-theme="light"] #contact .section-title.light {
  color: var(--theme-text);
}

html[data-theme="light"] .section-eyebrow.light,
html[data-theme="light"] #contact .section-eyebrow.light {
  color: var(--brand-dark);
}

html[data-theme="light"] .section-dark .section-body-text.light,
html[data-theme="light"] #contact .section-body-text.light {
  color: var(--theme-text-soft);
}

html[data-theme="light"] .service-card {
  border-color: var(--theme-line);
  background: rgba(255,255,255,.88);
  box-shadow: 0 14px 38px rgba(21,46,40,.055);
}

html[data-theme="light"] .service-card::before {
  color: rgba(21,33,30,.12);
}

html[data-theme="light"] .service-card:hover {
  border-color: rgba(111,153,147,.34);
  background: #fff;
  box-shadow: var(--theme-shadow);
}

html[data-theme="light"] .service-card h5 {
  color: var(--theme-text);
}

html[data-theme="light"] .service-card p {
  color: var(--theme-text-soft);
}

html[data-theme="light"] .service-icon {
  border-color: rgba(111,153,147,.18);
  background: rgba(111,153,147,.10);
  color: var(--brand-dark);
}

html[data-theme="light"] .service-more {
  color: var(--brand-dark);
}

html[data-theme="light"] .qa-banner {
  border-color: rgba(111,153,147,.22);
  background: rgba(255,255,255,.72);
}

html[data-theme="light"] .qa-banner h5 {
  color: var(--theme-text);
}

html[data-theme="light"] .qa-banner p {
  color: var(--theme-text-soft);
}

.project-card,
.team-card,
.manpower-card,
.faq-item,
.content-shell,
.mv-card,
.org-node {
  background: var(--theme-surface);
  color: var(--theme-text);
  border-color: var(--theme-line);
}

.project-card {
  box-shadow: 0 14px 46px rgba(8,20,18,.07);
}

html[data-theme="dark"] .project-card,
html[data-theme="dark"] .team-card,
html[data-theme="dark"] .manpower-card,
html[data-theme="dark"] .faq-item,
html[data-theme="dark"] .content-shell,
html[data-theme="dark"] .mv-card,
html[data-theme="dark"] .org-node,
html[data-theme="dark"] .org-chart {
  background: var(--theme-surface);
  border-color: var(--theme-line);
  box-shadow: 0 16px 44px rgba(0,0,0,.16);
}

html[data-theme="dark"] .project-card-title,
html[data-theme="dark"] .project-info h5,
html[data-theme="dark"] .team-card h5,
html[data-theme="dark"] .manpower-card h4,
html[data-theme="dark"] .faq-item summary,
html[data-theme="dark"] .content-shell h1,
html[data-theme="dark"] .content-shell h2,
html[data-theme="dark"] .content-shell h3,
html[data-theme="dark"] .about-proof strong {
  color: var(--theme-text);
}

html[data-theme="dark"] .project-description,
html[data-theme="dark"] .project-info p,
html[data-theme="dark"] .team-desc,
html[data-theme="dark"] .manpower-card p,
html[data-theme="dark"] .faq-item p,
html[data-theme="dark"] .content-shell p,
html[data-theme="dark"] .content-shell li,
html[data-theme="dark"] .about-proof span,
html[data-theme="dark"] .ceo-quote {
  color: var(--theme-text-soft);
}

html[data-theme="dark"] .org-chart {
  border-color: var(--theme-line);
}

html[data-theme="dark"] .org-subnodes span,
html[data-theme="dark"] .service-scope-item {
  background: var(--theme-surface-2);
  color: var(--theme-text-mid);
  border-color: var(--theme-line);
}

html[data-theme="dark"] .value-tag {
  background: rgba(111,153,147,.14);
  color: var(--brand-light);
}

html[data-theme="dark"] .ceo-card {
  border-color: var(--theme-line);
  background: linear-gradient(135deg, rgba(111,153,147,.11), rgba(13,29,26,.95));
  box-shadow: var(--theme-shadow);
}

/* ======================================================================
   CONTACT — bright in light mode, deep teal in dark mode
   ====================================================================== */
html[data-theme="light"] #contact {
  background:
    radial-gradient(circle at 84% 12%, rgba(111,153,147,.10), transparent 26%),
    linear-gradient(180deg, #eef5f3, #e5efec);
}

html[data-theme="light"] .contact-info-block,
html[data-theme="light"] .contact-form {
  border-color: var(--theme-line);
  background: rgba(255,255,255,.82);
  box-shadow: 0 18px 54px rgba(21,46,40,.07);
}

html[data-theme="light"] .contact-info-intro span {
  color: var(--brand-dark);
}

html[data-theme="light"] .contact-info-intro h3,
html[data-theme="light"] .contact-item a,
html[data-theme="light"] .contact-item span {
  color: var(--theme-text);
}

html[data-theme="light"] .contact-info-intro p,
html[data-theme="light"] .contact-item strong {
  color: var(--theme-text-soft);
}

html[data-theme="light"] .contact-item {
  border-bottom-color: var(--theme-line);
}

html[data-theme="light"] .contact-icon {
  border-color: rgba(111,153,147,.18);
  background: rgba(111,153,147,.10);
  color: var(--brand-dark);
}

html[data-theme="light"] .form-input-dark,
html[data-theme="light"] .captcha-card {
  border-color: var(--theme-line-strong) !important;
  background: rgba(255,255,255,.92) !important;
  color: var(--theme-text) !important;
}

html[data-theme="light"] .form-input-dark::placeholder {
  color: #7a8782 !important;
}

html[data-theme="light"] .form-input-dark:focus {
  border-color: rgba(69,111,105,.62) !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(111,153,147,.13) !important;
}

html[data-theme="light"] .form-input-dark option {
  background: #fff;
  color: var(--theme-text);
}

/* ======================================================================
   INNER PAGES
   ====================================================================== */
.inner-hero {
  background:
    linear-gradient(90deg, rgba(247,250,249,.97), rgba(247,250,249,.82) 58%, rgba(247,250,249,.45)),
    url('https://lusailint.qa/assets/images/projects/33-flat-building/Picture%201.webp') center / cover no-repeat;
}

.projects-page .inner-hero {
  background:
    linear-gradient(90deg, rgba(247,250,249,.97), rgba(247,250,249,.80) 58%, rgba(247,250,249,.43)),
    url('https://lusailint.qa/assets/images/projects/luxury-private-majlis-alzaghwa/picture%201.webp') center / cover no-repeat;
}

html[data-theme="dark"] .inner-hero {
  background:
    linear-gradient(90deg, rgba(5,15,13,.94) 0%, rgba(5,15,13,.74) 58%, rgba(5,15,13,.56)),
    url('https://lusailint.qa/assets/images/projects/33-flat-building/Picture%201.webp') center / cover no-repeat;
}

html[data-theme="dark"] .projects-page .inner-hero {
  background:
    linear-gradient(90deg, rgba(5,15,13,.93) 0%, rgba(5,15,13,.70) 62%, rgba(5,15,13,.48)),
    url('https://lusailint.qa/assets/images/projects/luxury-private-majlis-alzaghwa/picture%201.webp') center / cover no-repeat;
}

html[data-theme="light"] .inner-title,
html[data-theme="light"] .inner-lead,
html[data-theme="light"] .breadcrumb-lite,
html[data-theme="light"] .breadcrumb-lite a,
html[data-theme="light"] .portfolio-hero-meta span {
  color: var(--theme-text);
}

html[data-theme="light"] .inner-lead,
html[data-theme="light"] .breadcrumb-lite,
html[data-theme="light"] .breadcrumb-lite a {
  color: var(--theme-text-mid);
}

html[data-theme="light"] .portfolio-hero-meta span {
  border-color: var(--theme-line-strong);
  background: rgba(255,255,255,.66);
}

.inner-hero::after {
  right: max(22px, calc((100vw - 1320px) / 2 + 10px)) !important;
  width: clamp(150px, 20vw, 300px) !important;
  opacity: .08 !important;
}

html[data-theme="light"] .inner-cta {
  border-color: rgba(21,33,30,.10);
  background:
    radial-gradient(circle at 90% 20%, rgba(111,153,147,.14), transparent 26%),
    #eaf2ef;
}

html[data-theme="light"] .inner-cta h2,
html[data-theme="light"] .inner-cta p {
  color: var(--theme-text);
}

html[data-theme="light"] .inner-cta p {
  color: var(--theme-text-soft);
}

/* Footer stays visually anchored in both modes, but is lighter in light mode. */
html[data-theme="light"] .main-footer {
  background: #17302d;
}

html[data-theme="dark"] .main-footer {
  background: #040d0c;
}

.main-footer::before {
  right: 28px;
  top: 28px;
  width: clamp(140px, 18vw, 260px);
  opacity: .045;
}

/* ======================================================================
   RESPONSIVE
   ====================================================================== */
@media (max-width: 991px) {
  #mainNav .container {
    display: flex;
    flex-wrap: wrap;
  }

  .theme-toggle {
    order: 2;
    min-width: 44px;
    width: 44px;
    padding: 0;
    margin-left: auto;
    margin-right: .4rem;
  }

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

  .navbar-toggler { order: 3; }
  .navbar-collapse { order: 4; width: 100%; }

  #navMenu {
    border-color: var(--theme-line);
    background: var(--theme-surface);
    background: color-mix(in srgb, var(--theme-surface) 94%, transparent);
  }

  .hero-section {
    min-height: auto;
    background-position: center, center, 66% 50%;
  }

  .hero-section .hero-container {
    min-height: 760px;
    align-items: flex-end;
    padding-top: 150px;
    padding-bottom: 96px;
  }

  .hero-bg-pattern {
    top: 116px !important;
    right: 22px !important;
    width: 180px !important;
  }
}

@media (max-width: 767px) {
  .container { width: min(100% - 1.25rem, 1320px); }

  .hero-section {
    background-image:
      linear-gradient(180deg,
        rgba(247,250,249,.93) 0%,
        rgba(247,250,249,.84) 40%,
        rgba(247,250,249,.94) 76%,
        rgba(247,250,249,.99) 100%),
      url('https://images.unsplash.com/photo-1604433203862-93bc73b0f1e9?auto=format&fit=crop&fm=jpg&q=78&w=1200');
    background-position: center, 58% center;
  }

  html[data-theme="dark"] .hero-section {
    background-image:
      linear-gradient(180deg,
        rgba(8,20,18,.76) 0%,
        rgba(8,20,18,.68) 38%,
        rgba(8,20,18,.92) 75%,
        rgba(8,20,18,.99) 100%),
      url('https://images.unsplash.com/photo-1604433203862-93bc73b0f1e9?auto=format&fit=crop&fm=jpg&q=78&w=1200');
  }

  .hero-section .hero-container {
    min-height: 720px;
    padding-top: 132px;
    padding-bottom: 78px;
  }

  .hero-title {
    font-size: clamp(3.25rem, 14.8vw, 5rem);
    line-height: .86;
  }

  .hero-bg-pattern {
    top: 110px !important;
    right: 14px !important;
    width: 118px !important;
    opacity: .09 !important;
  }

  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .section-pad::before {
    top: 18px !important;
    right: 14px !important;
    width: 92px !important;
  }

  .main-footer::before {
    right: 14px;
    top: 24px;
    width: 120px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html,
  body,
  .theme-toggle {
    transition: none !important;
  }
}

@media (min-width: 992px) {
  #mainNav .brand-logo-link { order: 1; }
  #mainNav .navbar-collapse { order: 2; }
  #mainNav .theme-toggle { order: 3; margin-left: .75rem; }
}

/* Every decorative brand mark stays fully visible inside its owning surface. */
.ceo-card::after,
.qa-banner::after {
  right: 18px !important;
  top: 18px !important;
  width: clamp(92px, 12vw, 170px) !important;
  transform: none !important;
  background: var(--brand-pattern) center / contain no-repeat !important;
  opacity: .04 !important;
}

.process-card::after {
  right: 12px !important;
  bottom: 12px !important;
  width: 72px !important;
  opacity: .028 !important;
}

.inner-cta::after {
  right: 18px !important;
  bottom: 16px !important;
  width: 150px !important;
  opacity: .055 !important;
}