@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600&family=Manrope:wght@400;500;600;700&display=swap');

:root {
  --ink: #f0eee8;
  --deep: #090a09;
  --gold: #d3ad70;
  --cream: #101110;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: 'Manrope', sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
.site-header { height: 84px; padding: 0 7.2%; display: flex; align-items: center; justify-content: space-between; background: #0d0e0d; position: relative; z-index: 5; border-bottom: 1px solid #ffffff0d; }
.brand { display: inline-flex; align-items: center; }
.brand-name { display: flex; flex-direction: column; min-width: 154px; line-height: 1; }
.brand-title { position: relative; width: fit-content; color: #f4f4f2; font-family: 'Manrope', sans-serif; font-size: 17px; font-weight: 800; letter-spacing: 3.5px; text-transform: uppercase; }
.brand-title::after { content: ''; position: absolute; top: -3px; right: -7px; width: 4px; height: 4px; border: 1px solid #c9a75f; border-radius: 50%; }
.brand-subline { display: block; margin-top: 5px; color: #c0c1ba; font-size: 9px; font-weight: 500; letter-spacing: 3px; }
.main-nav { display: flex; align-items: center; gap: 38px; margin-left: 70px; }
.main-nav a, .header-cta { font-size: 12px; font-weight: 500; }
.main-nav a { color: #58645d; transition: color .2s; }
.main-nav a:hover { color: #b18c54; }
.header-cta { padding: 12px 17px; border: 1px solid #c9c4b7; border-radius: 2px; }
.header-cta span { margin-left: 12px; color: #a5814c; }
.hero { min-height: 625px; position: relative; overflow: hidden; color: white; background: #173a37; display: flex; align-items: center; padding: 67px 10.5% 72px; }
.hero-art { position: absolute; inset: 0; overflow: hidden; background: #080909; }
.hero-slide { position: absolute; inset: 0; opacity: 0; background-position: center 48%; background-size: cover; transform: scale(1.035); transition: opacity 1.2s ease, transform 7s ease; }
.hero-slide.is-active { opacity: 1; transform: scale(1); }
.slide-one { background-image: url('https://images.unsplash.com/photo-1591604129939-f1efa4d9f7fa?auto=format&fit=crop&w=2200&q=85'); }
.slide-two { background-image: url('https://images.unsplash.com/photo-1564769625905-50e93615e769?auto=format&fit=crop&w=2200&q=85'); background-position: 54% center; }
.slide-three { background-image: url('https://images.unsplash.com/photo-1586724237569-f3d0c1dee8c6?auto=format&fit=crop&w=2200&q=85'); background-position: 63% 52%; filter: brightness(1.12) saturate(1.12); }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, #080b0b 0%, #080b0be8 35%, #080b0b8c 64%, #080b0b40 100%), linear-gradient(0deg, #080b0b9c 0%, transparent 35%, #080b0b24 100%); }
.hero-art::before { content: ''; position: absolute; inset: 0; opacity: .13; background-image: radial-gradient(#e6d5ae 0.7px, transparent .8px); background-size: 34px 34px; mask-image: linear-gradient(to right, transparent, black); }
.moon { position: absolute; width: 180px; height: 180px; right: 21%; top: 56px; border-radius: 50%; background: #e6d5ae; opacity: .76; box-shadow: 0 0 85px 22px #e6d5ae3b; }
.distant-hills { position: absolute; bottom: 75px; right: -4%; width: 70%; height: 200px; background: #284640; clip-path: polygon(0 68%, 17% 43%, 32% 56%, 49% 20%, 65% 52%, 79% 33%, 100% 61%, 100% 100%, 0 100%); opacity: .8; }
.mosque { position: absolute; right: 7%; bottom: 91px; width: 56%; height: 250px; }
.mosque-body { position: absolute; bottom: 0; left: 12%; width: 75%; height: 116px; background: linear-gradient(90deg,#b5a783,#dfceb0 50%,#ab9873); border-top: 8px solid #d9c9a5; box-shadow: 0 15px 30px #0a201c66; }
.mosque-body span { position: relative; display: inline-block; width: 10%; height: 65px; margin: 32px 4.4% 0; border: 3px solid #9d8a67; border-bottom: 0; border-radius: 50% 50% 0 0; background: #294942; }
.mosque-roof { position: absolute; left: 10%; bottom: 115px; width: 79%; height: 58px; border-top: 5px solid #e3d4b6; }
.dome { position: absolute; bottom: 5px; display: block; background: #b6a47d; border: 3px solid #dfceb0; border-bottom: 0; border-radius: 50% 50% 0 0; }
.dome::before { content: ''; position: absolute; width: 2px; height: 14px; background: #d7c69f; left: 50%; top: -15px; }
.dome-left { width: 63px; height: 39px; left: 13%; }.dome-main { width: 100px; height: 59px; left: 40%; }.dome-right { width: 63px; height: 39px; right: 12%; }
.minaret { position: absolute; bottom: 65px; width: 22px; height: 190px; background: linear-gradient(90deg,#ad9a73,#dfcfad,#a48f67); clip-path: polygon(30% 18%, 70% 18%, 75% 100%, 25% 100%); }
.minaret::before { content: ''; position: absolute; top: 0; left: -10px; width: 42px; height: 44px; background: #d9c9a5; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.minaret::after { content: ''; position: absolute; top: 42px; left: -3px; width: 28px; height: 4px; background: #d9c9a5; box-shadow: 0 23px 0 #d9c9a5; }
.minaret i { position: absolute; top: 55px; left: 8px; width: 6px; height: 15px; background: #294942; border-radius: 50% 50% 0 0; }
.minaret-left { left: 5%; }.minaret-right { right: 4%; height: 164px; }
.kaaba { position: absolute; right: 31%; bottom: 39px; z-index: 2; width: 128px; height: 112px; background: linear-gradient(105deg,#111d1b,#202a26 70%,#121d1b); box-shadow: 0 15px 28px #0717148a; }
.kaaba-band { position: absolute; top: 21px; width: 100%; height: 13px; border-top: 3px solid #bd995a; border-bottom: 3px solid #bd995a; background: #a9854a; }
.kaaba-door { position: absolute; bottom: 0; right: 20px; height: 51px; width: 24px; background: linear-gradient(90deg,#9b7139,#c9a258); border: 2px solid #d0ad6a; }
.foreground { position: absolute; bottom: 0; left: 0; right: 0; height: 105px; background: linear-gradient(180deg,#1a3631,#102724); clip-path: polygon(0 35%, 18% 5%, 38% 38%, 62% 13%, 82% 38%, 100% 0, 100% 100%, 0 100%); }
.orbit { position: absolute; border: 1px solid #e0c9941c; border-radius: 50%; transform: rotate(-25deg); }
.orbit-one { width: 920px; height: 330px; bottom: -195px; right: -5%; }.orbit-two { width: 1120px; height: 430px; bottom: -248px; right: -12%; }
.hero-content { position: relative; z-index: 3; max-width: 590px; margin-top: -10px; }
.eyebrow { margin: 0 0 24px; color: #dbc99f; font-size: 10px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; }
.eyebrow span { display: inline-block; width: 24px; height: 1px; background: var(--gold); vertical-align: middle; margin-right: 9px; }
h1, h2 { margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; letter-spacing: -1.4px; }
.hero h1 { font-size: clamp(44px, 5.1vw, 69px); line-height: 1.11; }
h1 em, h2 em { color: #d9c49a; font-weight: 500; }
.hero-copy { max-width: 410px; margin: 22px 0 27px; color: #e0e7dfc9; font-size: 14px; line-height: 1.85; }
.hero-actions { display: flex; align-items: center; gap: 27px; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; padding: 15px 18px; font-size: 11px; font-weight: 600; letter-spacing: .1px; transition: transform .2s, background .2s; }
.button:hover { transform: translateY(-2px); }
.button-light { color: #183b35; background: #e8dcc0; }
.button-light span { color: #987646; font-size: 16px; }
.text-link { color: #e5e7df; font-size: 11px; }.text-link span { margin-left: 7px; color: var(--gold); }
.hero-note { display: flex; align-items: center; gap: 12px; margin-top: 45px; color: #c7d0c7; font-size: 10px; line-height: 1.75; }
.note-icon { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #ffffff45; border-radius: 50%; color: #ddc38f; font-size: 16px; }
.hero-note strong { color: white; font-weight: 500; }
.hero-caption { position: absolute; z-index: 3; right: 7.3%; bottom: 40px; display: flex; align-items: center; gap: 11px; color: #d1d4c8; font-size: 8px; letter-spacing: 1.6px; }
.caption-line { width: 28px; height: 1px; background: var(--gold); }.hero-index { position: absolute; z-index: 3; bottom: 38px; left: 7.4%; color: #dfd7c1; font-size: 10px; letter-spacing: 1px; }.hero-index span { padding: 0 5px; color: #89958a; }
.intro { position: relative; padding: 105px 15% 105px 17%; display: grid; grid-template-columns: 1fr 2.1fr; gap: 55px; align-items: start; background: var(--cream); }
.intro-label { padding-top: 13px; color: #7c8177; font-size: 9px; font-weight: 600; letter-spacing: 1.5px; }.intro-label span { display: block; margin-bottom: 17px; color: #b38e58; font-family: 'Cormorant Garamond',serif; font-size: 17px; letter-spacing: 0; }
.intro-copy h2, .section-heading h2, .contact h2 { color: var(--ink); font-size: 43px; line-height: 1.2; }.intro-copy h2 em, .section-heading h2 em, .contact h2 em { color: #a98755; }
.intro-copy p { max-width: 500px; margin: 22px 0 0; color: #737970; font-size: 13px; line-height: 1.9; }
.intro-seal { position: absolute; right: 11%; bottom: 74px; width: 82px; height: 82px; border: 1px solid #d7cdb7; border-radius: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #a1885e; transform: rotate(-12deg); }.intro-seal span { font-size: 19px; }.intro-seal small { margin-top: 2px; text-align: center; font-size: 7px; line-height: 1.4; letter-spacing: 1px; }
.services { padding: 83px 10.5% 100px; background: #efeee7; }
.section-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 44px; }.dark-eyebrow { margin-bottom: 17px; color: #8c7956; }.section-heading h2 { font-size: 40px; }.section-aside { width: 210px; margin: 0 0 6px; color: #787b72; font-size: 12px; line-height: 1.8; }
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }.service-card { min-height: 240px; position: relative; padding: 27px 27px 25px; background: #fbfaf6; border: 1px solid #e7e4db; }.service-card.featured { color: #fff; background: #23483f; border-color: #23483f; }.card-number { position: absolute; top: 29px; right: 28px; color: #a5a598; font-size: 9px; letter-spacing: 1px; }.featured .card-number { color: #b7c5b6; }.service-icon { display: grid; place-items: center; width: 39px; height: 39px; color: #a98854; border: 1px solid #dbd2bf; border-radius: 50%; font-size: 20px; }.featured .service-icon { color: #e1c68f; border-color: #789085; }.service-card h3 { margin: 24px 0 9px; font-family: 'Cormorant Garamond',serif; font-size: 19px; font-weight: 500; }.service-card p { max-width: 260px; margin: 0; color: #777a70; font-size: 11px; line-height: 1.8; }.featured p { color: #d0d8d0; }.service-card > a { position: absolute; right: 26px; bottom: 24px; color: #aa8955; font-size: 16px; }.featured > a { color: #e1c68f; }
.contact { position: relative; overflow: hidden; padding: 84px 20px 90px; text-align: center; color: white; background: var(--deep); }.contact::before, .contact::after { content: ''; position: absolute; width: 360px; height: 360px; border: 1px solid #d5bf8e1c; border-radius: 50%; }.contact::before { top: -245px; left: -120px; }.contact::after { right: -100px; bottom: -275px; width: 470px; height: 470px; }.contact-mark { display: grid; place-items: center; width: 43px; height: 43px; margin: 0 auto 24px; border: 1px solid #c2a874; border-radius: 50%; color: #d9c293; font-family: Georgia,serif; font-size: 26px; }.contact .eyebrow { margin-bottom: 16px; }.contact h2 { color: white; font-size: 43px; }.contact h2 em { color: #d9c49a; }.contact-copy { margin: 16px 0 8px; color: #c7d0c7; font-size: 12px; }.contact-email { display: inline-block; margin-bottom: 23px; color: #e1c58d; font-size: 13px; text-underline-offset: 4px; }.contact-email:hover { text-decoration: underline; }.button-dark { color: #173a35; background: #e4d5b3; }.button-dark span { color: #9a7749; font-size: 15px; }
.site-footer { min-height: 78px; padding: 15px 7.2%; display: flex; align-items: center; justify-content: space-between; background: #0d2523; color: #aab6ab; font-size: 10px; }

@media (max-width: 760px) {
  .site-header { height: 70px; padding: 0 5%; }.main-nav { display: none; }.header-cta { padding: 10px 12px; font-size: 10px; }
  .hero { min-height: 700px; padding: 57px 7% 100px; align-items: flex-start; }.hero-content { margin-top: 20px; }.hero h1 { font-size: clamp(43px, 10vw, 62px); }.hero-copy { max-width: 370px; font-size: 13px; }.mosque { right: -9%; bottom: 72px; width: 90%; transform: scale(.82); transform-origin: bottom right; }.kaaba { right: 38%; bottom: 31px; transform: scale(.82); transform-origin: bottom center; }.moon { top: auto; bottom: 245px; right: 14%; width: 120px; height: 120px; }.distant-hills { bottom: 53px; width: 100%; }.foreground { height: 75px; }.hero-caption { right: 6%; bottom: 29px; font-size: 7px; }.hero-index { bottom: 27px; left: 6%; }
  .intro { padding: 70px 8%; grid-template-columns: 1fr; gap: 20px; }.intro-label span { display: inline; margin-right: 10px; }.intro-copy h2, .section-heading h2, .contact h2 { font-size: 37px; }.intro-seal { right: 8%; bottom: 47px; width: 65px; height: 65px; }.intro-copy p { max-width: 80%; }
  .services { padding: 70px 7%; }.section-heading { align-items: start; flex-direction: column; gap: 14px; margin-bottom: 30px; }.section-aside { width: auto; }.service-grid { grid-template-columns: 1fr; gap: 12px; }.service-card { min-height: 210px; }
  .contact { padding: 70px 18px 75px; }.site-footer { padding: 21px 6%; flex-wrap: wrap; gap: 15px; }.site-footer > span:nth-child(2) { display: none; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; } }

/* Dark, editorial palette */
body, .site-header { background: #0d0e0d; }
.main-nav a { color: #c0c1ba; }
.header-cta { color: #f0eee8; border-color: #45443e; }
.intro { background: #111210; }
.intro-label, .intro-copy p { color: #b2b2a9; }
.services { background: #171816; }
.section-aside { color: #b4b4ab; }
.service-card { background: #20211e; border-color: #343530; }
.service-card:not(.featured) { color: #f0eee8; }
.service-card p { color: #c0c0b7; }
.service-card.featured { background: #26342d; border-color: #35473d; }
.site-footer { background: #050606; }
.slide-controls { position: absolute; z-index: 4; right: 7.3%; bottom: 66px; display: flex; align-items: center; gap: 8px; }
.slide-dot { width: 7px; height: 7px; padding: 0; border: 1px solid #e6d5ae; border-radius: 50%; background: transparent; cursor: pointer; transition: background .2s, transform .2s; }
.slide-dot.is-active { background: #e6d5ae; transform: scale(1.25); }
.slide-dot:focus-visible { outline: 2px solid white; outline-offset: 4px; }

@media (max-width: 760px) {
  .slide-controls { right: 6%; bottom: 54px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
  .brand-title { animation: none; }
}

/* Coming-soon launch polish */
:root {
  --ink: #f2f0e9;
  --gold: #d3ad70;
  --cream: #111210;
}

::selection { color: #111210; background: #d3ad70; }
:focus-visible { outline: 2px solid #d3ad70; outline-offset: 4px; }

.site-header { background: #0b0c0b; }
.brand-title { color: #f4f4f2; }
.brand-subline { color: #c0c1ba; }
.main-nav a { color: #c0c1ba; }
.main-nav a:hover { color: #e2c78f; }
.header-cta { border-color: #62563f; transition: background .2s, border-color .2s; }
.header-cta:hover { background: #ffffff0a; border-color: #d3ad70; }

.coming-soon-tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 19px;
  padding: 9px 12px;
  border: 1px solid #d3ad705c;
  color: #ecd7ad;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
}
.coming-soon-tag span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d3ad70;
  box-shadow: 0 0 10px #d3ad7070;
}
.hero .eyebrow { margin-bottom: 17px; }
.hero h1 { text-wrap: balance; }
.hero-copy { color: #e0e4dc; }
.button-light, .button-dark { transition: transform .2s, background .2s, box-shadow .2s; }
.button-light:hover, .button-dark:hover { background: #f1e6cf; box-shadow: 0 8px 28px #0004; }
.text-link:hover { color: #e2c78f; }

.intro { background: #111210; }
.intro-label, .intro-copy p { color: #b2b2a9; }
.intro-seal { border-color: #6b604c; }
.services { background: #171816; }
.dark-eyebrow { color: #d2b477; }
.section-heading h2 { color: #f0eee8; }
.section-aside { color: #b4b4ab; }
.service-card { background: #20211e; border-color: #343530; transition: transform .25s, border-color .25s, background .25s; }
.service-card:not(.featured) { color: #f0eee8; }
.service-card p { color: #c0c0b7; }
.service-card:hover { transform: translateY(-4px); border-color: #8d7650; }
.service-card.featured { background: #26342d; border-color: #35473d; }
.contact { background: radial-gradient(ellipse at 50% 0%, #1c2921 0%, #090a09 62%); }
.contact-mark { display: inline-flex; width: auto; height: auto; margin: 0 auto 26px; padding: 0; border: 0; border-radius: 0; }
.contact-mark .brand-name { align-items: center; }
.contact-mark .brand-title { font-size: 15px; }
.contact-mark .brand-subline { font-size: 8px; }
.contact .eyebrow { color: #d8c294; }
.contact-copy { max-width: 420px; margin: 16px auto 25px; color: #c7d0c7; line-height: 1.8; }
.site-footer { background: #080909; border-top: 1px solid #ffffff12; }

@media (max-width: 760px) {
  .main-nav { display: flex; margin-left: 0; }
  .main-nav > a:not(.header-cta) { display: none; }
  .header-cta { padding: 10px 12px; font-size: 10px; }
  .hero { min-height: 700px; }
  .hero-content { max-width: 540px; }
  .coming-soon-tag { margin-bottom: 16px; }
  .intro-copy p { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .service-card, .button-light, .button-dark, .header-cta { transition: none; }
}