:root {
  --primary-mosque-green:#0b3c26;
  --luxury-gold:#c5a059;
  --luxury-gold-bright:#d4af37;
  --kaaba-dark:#1a1a1a;
  --spiritual-cream:#faf7f2;
  --pure-white:#fff;
  --font-header:'Cinzel','Iowan Old Style','Palatino Linotype',Georgia,serif;
  --font-body:'Plus Jakarta Sans','Aptos','Segoe UI',Arial,sans-serif;
  --premium-radius:16px;
  --arch-radius:120px 120px 0 0;
  --premium-shadow:0 10px 30px rgba(11,60,38,.06);
  --gold-border-glow:1px solid rgba(197,160,89,.24);
  --green:var(--primary-mosque-green);
  --green-dark:#082b1c;
  --green-mid:#1c5a3d;
  --gold:var(--luxury-gold);
  --gold-light:#efe0c3;
  --ink:var(--kaaba-dark);
  --muted:#6d7974;
  --line:#e8e1d5;
  --soft:var(--spiritual-cream);
  --serif:var(--font-header);
  --sans:var(--font-body);
  --shadow:var(--premium-shadow);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:90px; }
body { margin:0; color:var(--ink); font-family:var(--sans); font-size:15px; line-height:1.6; }
a { color:inherit; text-decoration:none; }
button,input,select { font:inherit; }
button,a,select { -webkit-tap-highlight-color:transparent; }
.wrap { width:min(1160px,calc(100% - 48px)); margin-inline:auto; }
.notice-bar { height:34px; padding:7px; background:var(--green-dark); color:#e4ddcd; text-align:center; font-size:11px; letter-spacing:.11em; text-transform:uppercase; }
.notice-bar span { padding:0 8px; color:var(--gold); }
.site-header { position:sticky; top:0; z-index:900; display:flex; height:78px; align-items:center; justify-content:space-between; padding:0 max(calc((100vw - 1240px)/2),24px); border-bottom:1px solid rgba(16,54,46,.08); background:#fff; }
.brand { display:flex; min-width:210px; align-items:center; gap:10px; color:var(--green); }
.brand-logo { width:48px; height:46px; flex:0 0 auto; object-fit:contain; }
.brand-name { font-size:14px; font-weight:700; letter-spacing:.11em; line-height:1.2; }
.brand-name small { display:block; margin-top:3px; font-size:8px; font-weight:600; letter-spacing:.12em; }
.main-nav { display:flex; align-items:center; gap:29px; }
.main-nav a,.footer-links a { color:#42524c; font-size:12px; transition:color .2s; }
.main-nav a:hover,.footer-links a:hover { color:#aa8146; }
.menu-toggle { display:none; border:0; background:none; color:var(--green); font-size:24px; cursor:pointer; }
.button { display:inline-flex; min-height:48px; align-items:center; justify-content:center; gap:10px; padding:0 21px; border:1px solid transparent; border-radius:4px; font-size:12px; font-weight:700; letter-spacing:.015em; cursor:pointer; transition:transform .2s,background .2s,border-color .2s; }
.button:hover { transform:translateY(-2px); }
.button-small { min-height:38px; padding:0 17px; }
.button-outline { border-color:#cdd7d1; background:#fff; color:var(--green); }
.button-dark { background:var(--green); color:#fff; }
.button-dark:hover { background:var(--green-mid); }
.button-gold { background:var(--gold); color:#1d2c26; }
.button-gold:hover { background:#e5c992; }
.button-full { width:100%; }
.hero { position:relative; height:min(675px,76vw); min-height:540px; overflow:hidden; background:#173d35; color:#fff; }
.hero-photo { position:absolute; inset:0; transform:scale(1.015); background-image:url('https://images.unsplash.com/photo-1564769625905-50e93615e769?auto=format&fit=crop&w=2200&q=85'); background-position:center 45%; background-size:cover; }
.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(8,28,25,.82),rgba(9,31,27,.56) 48%,rgba(8,26,23,.12)),linear-gradient(0deg,rgba(9,24,21,.46),transparent 40%); }
.hero-content { position:relative; padding-top:115px; }
.eyebrow { margin:0 0 14px; color:#9a7849; font-size:10px; font-weight:700; letter-spacing:.19em; text-transform:uppercase; }
.eyebrow-light { color:#ead3a9; }
.eyebrow-gold { color:var(--gold); }
.hero h1 { max-width:760px; margin:0 0 20px; font:500 clamp(43px,6.1vw,76px)/1.12 var(--serif); letter-spacing:-.035em; }
.hero-copy { max-width:480px; margin:0 0 27px; color:#f0f1eb; font-size:15px; line-height:1.8; }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:24px; }
.text-link { color:var(--green); font-size:12px; font-weight:700; white-space:nowrap; }
.text-link span { margin-left:5px; font-size:16px; }
.light-link { color:#f3e7d4; }
.hero-footnote { max-width:500px; margin-top:28px; color:#dfddd4; font-size:10px; }
.hero-pill { position:absolute; right:max(calc((100vw - 1160px)/2),24px); bottom:33px; padding:12px 16px; border:1px solid rgba(222,198,154,.5); background:rgba(14,47,40,.75); font-size:11px; letter-spacing:.04em; }
.hero-pill span { margin-right:7px; color:var(--gold); }
.quick-plan { display:grid; min-height:142px; grid-template-columns:1.1fr repeat(4,1fr); align-items:center; gap:20px; }
.quick-plan .eyebrow { margin-bottom:5px; }
.quick-plan h2 { margin:0; font:500 19px var(--serif); }
.quick-item { display:flex; min-height:52px; align-items:center; gap:11px; padding-left:17px; border-left:1px solid var(--line); }
.quick-icon { display:grid; width:34px; height:34px; flex:0 0 auto; place-items:center; border-radius:50%; background:#edf1eb; color:var(--green); font-size:18px; }
.quick-item b,.quick-item small { display:block; }
.quick-item b { font-size:11px; }
.quick-item small { margin-top:3px; color:var(--muted); font-size:9px; }
.quick-item i { margin-left:auto; color:#a28252; font-style:normal; }
.section { padding:86px 0; }
.section-soft { background:var(--soft); }
.section-dark { background:var(--green-dark); color:#fff; }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:32px; }
.section-heading h2,.tracking-layout h2,.community-copy h2 { margin:0; font:500 clamp(31px,4vw,43px)/1.2 var(--serif); letter-spacing:-.025em; }
.section-intro { max-width:590px; margin:13px 0 0; color:var(--muted); font-size:13px; }
.heading-light h2 { color:#fff; }
.heading-light .section-intro { color:#bdcbc3; }
.card-grid,.article-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:17px; }
.package-card,.article-card { border:1px solid #e8ece8; background:#fff; box-shadow:0 5px 16px rgba(20,46,38,.035); transition:transform .25s,box-shadow .25s; }
.package-card:hover,.article-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.card-image { position:relative; height:180px; background-position:center; background-size:cover; }
.card-tag { position:absolute; top:13px; left:13px; padding:5px 8px; background:rgba(255,255,255,.92); color:var(--green); font-size:9px; letter-spacing:.08em; text-transform:uppercase; }
.card-body { padding:18px; }
.card-kicker { color:#a27e4c; font-size:9px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.card-body h3 { margin:7px 0 8px; font:500 20px var(--serif); }
.card-body p { min-height:49px; margin:0 0 14px; color:var(--muted); font-size:11px; }
.card-meta { display:flex; align-items:center; justify-content:space-between; padding-top:12px; border-top:1px solid var(--line); color:var(--muted); font-size:10px; }
.card-meta strong { color:var(--green); font-size:13px; }
.card-arrow { color:#a27e4c; font-size:15px; }
.flight-tool { padding:22px; border:1px solid var(--line); background:#fff; box-shadow:0 9px 26px rgba(20,46,38,.05); }
.flight-form { display:grid; grid-template-columns:1fr 1fr 1fr auto; align-items:end; gap:13px; }
.flight-form label,.budget-strip label,.community-form label,.account-modal label { display:block; color:#54615c; font-size:10px; font-weight:700; letter-spacing:.04em; }
.flight-form select,.budget-strip input,.budget-strip select,.community-form input,.community-form select,.account-modal input { display:block; width:100%; height:43px; margin-top:6px; padding:0 11px; border:1px solid #dfe5e0; border-radius:3px; outline:none; background:#fff; color:var(--ink); font-size:12px; }
.flight-form select:focus,.budget-strip input:focus,.budget-strip select:focus,.community-form input:focus,.community-form select:focus,.account-modal input:focus { border-color:#78998d; box-shadow:0 0 0 3px rgba(41,104,86,.1); }
.flight-results { display:grid; grid-template-columns:repeat(3,1fr); gap:11px; margin-top:17px; }
.flight-option { padding:13px 15px; border-left:2px solid #c0a36d; background:#f6f8f5; font-size:10px; }
.flight-option b,.flight-option strong { display:block; }
.flight-option b { color:var(--green); font-size:12px; }
.flight-option span { color:var(--muted); }
.flight-option strong { margin-top:5px; color:var(--ink); font-size:13px; }
.flight-option a { display:inline-block; margin-top:7px; color:var(--green); font-size:10px; font-weight:700; }
.budget-strip { display:grid; grid-template-columns:1.5fr .65fr .7fr 1fr; align-items:center; gap:18px; margin-top:18px; padding:19px 22px; background:#f5f6f2; }
.budget-strip>div:first-child { display:flex; align-items:center; gap:12px; }
.budget-icon { display:grid; width:37px; height:37px; flex:0 0 auto; place-items:center; border-radius:50%; background:#e7ede5; color:var(--green); font-size:18px; }
.budget-strip b,.budget-strip small { display:block; }
.budget-strip b { font-size:12px; }
.budget-strip small { margin-top:2px; color:var(--muted); font-size:9px; }
.budget-strip input,.budget-strip select { height:36px; margin-top:4px; }
.budget-total { padding-left:17px; border-left:1px solid #dce2dc; }
.budget-total strong { display:block; color:var(--green); font-size:20px; }
.hotel-layout { display:grid; grid-template-columns:1.15fr .85fr; align-items:stretch; gap:18px; }
#hotel-map { z-index:1; height:455px; border-radius:5px; background:#e6e9e2; }
.hotel-list { display:grid; grid-template-columns:1fr 1fr; align-content:start; gap:12px; }
.hotel-card { overflow:hidden; border-radius:4px; background:#fff; color:var(--ink); box-shadow:0 5px 18px rgba(0,0,0,.1); }
.hotel-photo { position:relative; height:123px; background-position:center; background-size:cover; }
.hotel-distance { position:absolute; right:9px; bottom:8px; padding:4px 8px; background:#fff; color:var(--green); font-size:9px; font-weight:700; }
.hotel-copy { padding:12px; }
.hotel-copy h3 { margin:0 0 3px; font:500 15px var(--serif); }
.hotel-copy p { margin:0 0 8px; color:var(--muted); font-size:9px; }
.hotel-copy .hotel-price { color:var(--green); font-size:11px; font-weight:700; }
.hotel-copy .hotel-price small { color:var(--muted); font-size:9px; font-weight:400; }
.hotel-copy a { display:block; margin-top:8px; color:var(--green); font-size:9px; font-weight:700; }
.small-note { margin:13px 0 0; color:#a8b8b0; font-size:10px; }
.leaflet-popup-content { font-family:var(--sans); font-size:11px; }
.leaflet-popup-content b { color:var(--green); }
.service-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.service-card { min-height:180px; padding:22px 18px; border:1px solid var(--line); transition:border-color .2s,transform .2s; }
.service-card:hover { transform:translateY(-3px); border-color:#a6b8ad; }
.service-symbol { display:grid; width:36px; height:36px; place-items:center; border-radius:50%; background:#edf1eb; color:var(--green); font-size:17px; }
.service-card h3 { margin:12px 0 5px; font:500 18px var(--serif); }
.service-card p { margin:0; color:var(--muted); font-size:10px; line-height:1.65; }
.service-card a { display:inline-block; margin-top:12px; color:var(--green); font-size:10px; font-weight:700; }
.support-banner { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:21px; padding:29px 34px; background:var(--green); color:#fff; }
.support-banner h3 { margin:0 0 8px; font:500 24px var(--serif); }
.support-banner p:not(.eyebrow) { max-width:610px; margin:0; color:#d1ddd5; font-size:11px; }
.support-banner .eyebrow { margin-bottom:7px; }
.emergency-row { display:flex; align-items:center; flex-wrap:wrap; gap:22px; margin-top:18px; padding:17px 19px; border:1px solid #eadbd2; background:#fcf7f3; }
.emergency-row>div { display:flex; min-width:260px; flex:1; align-items:center; gap:10px; }
.emergency-icon { display:grid; width:30px; height:30px; flex:0 0 auto; place-items:center; border-radius:50%; background:#f0dfd6; color:#994d35; font-weight:700; }
.emergency-row b,.emergency-row small { display:block; }
.emergency-row b { font-size:11px; }
.emergency-row small { color:#836e64; font-size:9px; }
.emergency-row>a { color:#795343; font-size:9px; font-weight:700; }
.tracking-layout { display:grid; grid-template-columns:.75fr 1.25fr; align-items:center; gap:55px; }
.tracking-layout h2 { max-width:390px; }
.tracking-map { z-index:1; height:310px; border-radius:4px; background:#e6e9e2; }
.location-status { min-height:20px; margin-top:12px; color:var(--muted); font-size:10px; }
.article-image { height:155px; background-position:center; background-size:cover; }
.article-card .card-body { padding:16px; }
.article-card .card-body p { min-height:58px; }
.community-section { padding:83px 0; background:var(--green-dark); color:#fff; }
.community-layout { display:grid; grid-template-columns:1fr 440px; align-items:center; gap:70px; }
.community-copy h2 { max-width:460px; font-size:42px; }
.community-copy>p:not(.eyebrow) { max-width:500px; color:#c1cec6; font-size:12px; line-height:1.8; }
.community-benefits { padding:0; color:#d9e3dc; font-size:11px; line-height:2; list-style:none; }
.community-benefits li:before { padding-right:10px; color:var(--gold); content:'✓'; }
.community-form { padding:27px 28px; border-radius:4px; background:#fff; color:var(--ink); box-shadow:var(--shadow); }
.community-form h3 { margin:0; font:500 23px var(--serif); }
.form-note { margin:4px 0 17px; color:#9a6551; font-size:10px; }
.community-form>label,.community-form .form-columns { margin-bottom:11px; }
.form-columns { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.community-form input,.community-form select { height:38px; font-size:11px; }
.community-form .button { margin-top:5px; }
.form-message { min-height:15px; margin:9px 0 0; color:var(--green); font-size:10px; }
.site-footer { padding:36px 0 15px; background:#09231f; color:#dce4de; }
.footer-top { display:grid; grid-template-columns:250px 1fr auto; align-items:center; gap:35px; padding-bottom:27px; }
.brand-footer { color:#f0eadc; }
.footer-top>p { max-width:390px; color:#aebdb4; font-size:10px; }
.footer-links { display:flex; gap:17px; }
.footer-links a { color:#c3d0c8; font-size:10px; }
.footer-bottom { display:flex; justify-content:space-between; gap:12px; padding-top:13px; border-top:1px solid rgba(255,255,255,.12); color:#8fa198; font-size:9px; }
.modal-backdrop { position:fixed; z-index:2000; display:grid; padding:20px; place-items:center; background:rgba(7,25,22,.72); inset:0; }
.modal-backdrop[hidden] { display:none; }
.account-modal { position:relative; width:min(420px,100%); padding:32px; border-radius:5px; background:#fff; box-shadow:0 20px 70px rgba(0,0,0,.25); }
.account-modal h2 { margin:0 0 10px; font:500 29px var(--serif); }
.account-modal>p:not(.eyebrow) { color:var(--muted); font-size:11px; line-height:1.7; }
.account-modal label { margin-bottom:12px; }
.modal-close { position:absolute; top:10px; right:14px; border:0; background:none; color:#66736d; font-size:27px; cursor:pointer; }
.or-divider { display:flex; align-items:center; gap:10px; margin:15px 0; color:#89958e; font-size:9px; }
.or-divider:before,.or-divider:after { height:1px; flex:1; background:var(--line); content:''; }
@media (max-width:1000px) {
  .main-nav { gap:16px; }
  .quick-plan { grid-template-columns:repeat(4,1fr); padding:24px 0; }
  .quick-plan>div { grid-column:1/-1; }
  .quick-item:first-of-type { padding-left:0; border-left:0; }
  .card-grid,.article-grid { grid-template-columns:repeat(2,1fr); }
  .hotel-layout { grid-template-columns:1fr; }
  .hotel-list { grid-template-columns:repeat(4,1fr); }
  .hotel-photo { height:110px; }
  .service-grid { grid-template-columns:repeat(2,1fr); }
  .community-layout { grid-template-columns:1fr 390px; gap:35px; }
  .flight-form { grid-template-columns:1fr 1fr; }
  .flight-form .button { width:100%; }
}
@media (max-width:720px) {
  .wrap { width:min(100% - 34px,560px); }
  .site-header { height:67px; padding-inline:17px; }
  .brand { min-width:0; }
  .brand-logo { width:39px; height:38px; }
  .brand-name { font-size:12px; }
  .brand-name small { font-size:7px; }
  .menu-toggle { display:block; margin-right:12px; margin-left:auto; }
  .main-nav { position:absolute; top:66px; right:0; left:0; display:none; align-items:flex-start; flex-direction:column; gap:14px; padding:15px 22px 20px; border-bottom:1px solid var(--line); background:#fff; box-shadow:0 10px 18px rgba(0,0,0,.05); }
  .main-nav.is-open { display:flex; }
  .site-header>.button { min-height:34px; padding:0 12px; font-size:10px; }
  .hero { height:calc(100svh - 100px); min-height:590px; max-height:740px; }
  .hero-photo { background-position:58% center; }
  .hero-content { padding-top:100px; }
  .hero h1 { font-size:47px; }
  .hero-copy { max-width:380px; font-size:13px; }
  .hero-actions { align-items:flex-start; flex-direction:column; gap:17px; }
  .hero-pill { right:17px; bottom:18px; font-size:9px; }
  .quick-plan { grid-template-columns:1fr 1fr; gap:15px 7px; padding:25px 0; }
  .quick-plan>div { grid-column:1/-1; }
  .quick-plan h2 { font-size:18px; }
  .quick-item { gap:7px; padding-left:7px; }
  .quick-item b { font-size:9px; }
  .quick-item small { font-size:8px; }
  .quick-item:first-of-type { padding-left:0; border-left:0; }
  .quick-item i { display:none; }
  .section { padding:62px 0; }
  .section-heading { align-items:flex-start; flex-direction:column; gap:14px; margin-bottom:23px; }
  .section-heading h2,.tracking-layout h2,.community-copy h2 { font-size:34px; }
  .section-intro { font-size:11px; }
  .card-grid,.article-grid { grid-template-columns:1fr 1fr; gap:10px; }
  .card-image { height:130px; }
  .card-body { padding:13px; }
  .card-body h3 { font-size:17px; }
  .card-body p { min-height:60px; font-size:9px; }
  .card-meta { font-size:8px; }
  .card-meta strong { font-size:11px; }
  .flight-tool { padding:13px; }
  .flight-form { grid-template-columns:1fr 1fr; gap:10px; }
  .flight-form .button { padding:0 9px; font-size:10px; }
  .flight-results { grid-template-columns:1fr; }
  .budget-strip { grid-template-columns:1fr 1fr; gap:12px; padding:15px; }
  .budget-strip>div:first-child { grid-column:1/-1; }
  .budget-total { padding-left:0; border-left:0; }
  .hotel-layout { gap:12px; }
  #hotel-map { height:340px; }
  .hotel-list { grid-template-columns:1fr 1fr; gap:8px; }
  .hotel-photo { height:105px; }
  .hotel-copy { padding:9px; }
  .hotel-copy h3 { font-size:13px; }
  .service-grid { grid-template-columns:1fr 1fr; gap:9px; }
  .service-card { min-height:185px; padding:15px 12px; }
  .service-card h3 { font-size:16px; }
  .service-card p { font-size:9px; }
  .support-banner { align-items:flex-start; flex-direction:column; padding:22px 18px; }
  .support-banner h3 { font-size:21px; }
  .emergency-row { gap:13px; padding:14px; }
  .emergency-row>div { min-width:100%; }
  .tracking-layout { grid-template-columns:1fr; gap:20px; }
  .tracking-map { height:280px; }
  .article-image { height:116px; }
  .article-card .card-body { padding:12px; }
  .article-card .card-body h3 { font-size:15px; }
  .article-card .card-body p { min-height:70px; }
  .community-section { padding:61px 0; }
  .community-layout { grid-template-columns:1fr; gap:25px; }
  .community-copy h2 { font-size:35px; }
  .community-form { padding:22px 18px; }
  .form-columns { gap:7px; }
  .footer-top { grid-template-columns:1fr; gap:10px; }
  .footer-top>p { margin:3px 0; }
  .footer-links { flex-wrap:wrap; }
  .footer-bottom { flex-direction:column; gap:8px; }
  .notice-bar { font-size:9px; letter-spacing:.06em; }
}
@media (max-width:380px) {
  .hero h1 { font-size:39px; }
  .card-grid,.article-grid { grid-template-columns:1fr; }
  .card-image { height:170px; }
  .hotel-list { grid-template-columns:1fr; }
  .hotel-photo { height:140px; }
  .quick-icon { width:28px; height:28px; }
}