@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;1,600&display=swap');

@font-face {
  font-family: "SolaimanLipi";
  src: url("fonts/SolaimanLipi.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --green: #063e31;
  --green-2: #0a5944;
  --green-3: #e9f1ed;
  --gold: #c99a3d;
  --gold-light: #e9c878;
  --ivory: #f7f3e9;
  --paper: #fffdf8;
  --ink: #17221e;
  --muted: #657069;
  --line: #dfe4df;
}

* { box-sizing: border-box; }
html { width: 100%; max-width: 100%; overflow-x: hidden; scroll-behavior: smooth; }
body { width: 100%; max-width: 100%; margin: 0; overflow-x: hidden; background: var(--paper); color: var(--ink); font-family: "SolaimanLipi", "Kalpurush", serif; font-variant-numeric: lining-nums tabular-nums; font-size: 17px; line-height: 1.72; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, textarea { font: inherit; }
::selection { background: var(--gold); color: white; }

.container { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.announcement { background: var(--green); color: rgba(255,255,255,.85); font-size: 13px; letter-spacing: .04em; }
.announcement-inner { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.announcement a { color: var(--gold-light); font-weight: 600; }

.site-header { position: sticky; top: 0; z-index: 30; background: rgba(255,253,248,.94); border-bottom: 1px solid rgba(6,62,49,.10); backdrop-filter: blur(16px); }
.nav-wrap { height: 84px; display: flex; align-items: center; gap: 34px; }
.brand { display: inline-flex; align-items: center; gap: 11px; margin-right: auto; }
.brand-mark { width: 49px; aspect-ratio: 1; border: 1px solid rgba(201,154,61,.55); border-radius: 50%; display: grid; place-items: center; position: relative; background: var(--ivory); color: var(--green); }
.brand-mark::before { content: ""; width: 27px; height: 27px; position: absolute; border: 2px solid var(--gold); border-radius: 50% 50% 44% 44%; }
.brand-mark b { position: relative; z-index: 1; font-family: Georgia, serif; font-size: 11px; letter-spacing: -.02em; background: var(--ivory); padding: 2px; }
.brand > span:last-child { display: flex; flex-direction: column; line-height: 1; }
.brand strong { font: 600 25px/1.05 "Playfair Display", Georgia, serif; color: var(--green); }
.brand small { color: var(--gold); font-size: 8px; letter-spacing: .27em; margin-top: 5px; }
.desktop-nav { display: flex; align-items: center; gap: 27px; font-size: 14px; font-weight: 500; }
.desktop-nav a { position: relative; padding: 6px 0; }
.desktop-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--gold); transition: .25s; }
.desktop-nav a:hover::after { right: 0; }
.mobile-menu { display: none; position: relative; }

.button { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 24px; border: 1px solid var(--gold); background: var(--gold); color: #102b22; padding: 13px 25px; font-size: 15px; font-weight: 700; transition: transform .2s, background .2s; }
.button:hover { transform: translateY(-2px); background: var(--gold-light); }
.button-small { min-height: 42px; padding: 9px 18px; font-size: 13px; }
.button-wide { width: 100%; }
.button-outline { background: transparent; color: white; border-color: rgba(255,255,255,.5); }
.text-link { display: inline-flex; align-items: center; gap: 28px; color: var(--green); font-weight: 700; border-bottom: 1px solid rgba(6,62,49,.25); padding-bottom: 4px; }
.light-link { color: white; border-bottom-color: rgba(255,255,255,.35); }

.hero { min-height: 710px; position: relative; color: white; display: grid; align-items: center; overflow: hidden; }
.hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2,27,21,.96) 0%, rgba(4,44,34,.83) 46%, rgba(5,38,30,.25) 74%, rgba(2,24,19,.48) 100%); }
.hero::after { content: ""; position: absolute; width: 520px; height: 520px; right: -240px; top: -270px; border: 1px solid rgba(233,200,120,.3); border-radius: 50%; box-shadow: 0 0 0 55px rgba(255,255,255,.03), 0 0 0 110px rgba(255,255,255,.025); }
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.35fr) 390px; gap: 80px; align-items: center; padding-block: 94px; }
.hero-copy { max-width: 710px; }
.eyebrow { margin: 0 0 17px; color: var(--green-2); text-transform: uppercase; letter-spacing: .18em; font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 12px; }
.eyebrow::before { content: ""; width: 34px; height: 1px; background: var(--gold); }
.eyebrow.light { color: var(--gold-light); }
.hero h1 { margin: 0; max-width: 720px; font-size: clamp(48px, 5.5vw, 78px); line-height: 1.13; letter-spacing: -.035em; font-weight: 600; }
.hero h1 em { color: var(--gold-light); font-family: "Playfair Display", Georgia, serif; font-weight: 600; }
.hero-lead { max-width: 655px; margin: 28px 0 34px; color: rgba(255,255,255,.78); font-size: 18px; line-height: 1.85; }
.hero-actions { display: flex; gap: 32px; align-items: center; }
.hero-proof { display: flex; gap: 0; margin-top: 58px; border-top: 1px solid rgba(255,255,255,.18); padding-top: 23px; }
.hero-proof div { min-width: 145px; display: flex; flex-direction: column; padding-right: 26px; margin-right: 26px; border-right: 1px solid rgba(255,255,255,.18); }
.hero-proof div:last-child { border-right: 0; }
.hero-proof strong { color: var(--gold-light); font-size: 17px; }
.hero-proof span { color: rgba(255,255,255,.62); font-size: 12px; }
.hero-card { background: rgba(253,250,241,.96); color: var(--ink); padding: 36px; border-top: 4px solid var(--gold); box-shadow: 0 30px 80px rgba(0,0,0,.2); }
.card-kicker { margin: 0 0 13px; color: var(--gold); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.hero-card h2 { margin: 0 0 25px; font-size: 29px; line-height: 1.35; color: var(--green); }
.hero-card small { display: block; text-align: center; color: var(--muted); margin-top: 13px; }
.check-list { list-style: none; padding: 0; margin: 22px 0 28px; }
.check-list li { display: flex; gap: 10px; margin: 9px 0; color: var(--muted); font-size: 14px; }
.check-list li::before { content: "✓"; color: var(--green-2); font-weight: 700; }
.compact { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 10px; border-top: 1px solid var(--line); padding-top: 20px; }
.hero-scroll { position: absolute; z-index: 2; right: 24px; bottom: 38px; display: flex; flex-direction: column; align-items: center; gap: 9px; font-size: 8px; letter-spacing: .25em; opacity: .7; }
.hero-scroll span { font-size: 18px; }

.trust-strip { background: var(--ivory); border-bottom: 1px solid var(--line); }
.trust-grid { min-height: 92px; display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); align-items: center; }
.trust-grid p { margin: 0; color: var(--green); font-weight: 700; font-size: 17px; }
.trust-grid div { text-align: center; font-size: 13px; border-left: 1px solid #d8d7cd; }
.trust-grid span { color: var(--gold); margin-right: 6px; }

.section { padding: 120px 0; }
.about-grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: 110px; align-items: center; }
.about-visual { height: 650px; position: relative; }
.about-visual::before { content: ""; position: absolute; left: -30px; top: -30px; width: 58%; height: 55%; border: 1px solid var(--gold); }
.about-visual img { position: relative; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; filter: saturate(.88); }
.visual-note { position: absolute; bottom: 28px; right: -52px; background: var(--green); color: white; width: 280px; padding: 25px 28px; display: flex; flex-direction: column; }
.visual-note strong { color: var(--gold-light); font-size: 17px; }
.visual-note span { color: rgba(255,255,255,.65); font-size: 12px; }
.about-copy h2, .section-heading h2, .umrah-copy h2, .process-grid h2, .faq-grid h2, .contact-copy h2 { margin: 0; color: var(--green); font-size: clamp(37px, 4.2vw, 56px); line-height: 1.25; letter-spacing: -.025em; }
.lead { font-size: 18px; color: var(--muted); line-height: 1.9; margin: 25px 0; }
.quote-box { display: grid; grid-template-columns: 50px 1fr; gap: 10px; margin: 30px 0; padding: 25px 28px; background: var(--ivory); border-left: 3px solid var(--gold); }
.quote-box span { font: 60px/1 Georgia, serif; color: var(--gold); }
.quote-box p { margin: 0; color: var(--green); font-size: 18px; }
.about-points { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; margin: 33px 0; }
.about-points > div { display: flex; gap: 14px; }
.about-points b { color: var(--gold); font-size: 12px; padding-top: 3px; }
.about-points span { display: flex; flex-direction: column; color: var(--muted); font-size: 13px; }
.about-points strong { color: var(--ink); font-size: 15px; margin-bottom: 5px; }

.packages-section { background: var(--green-3); }
.split-heading { display: grid; grid-template-columns: 1.5fr .75fr; gap: 100px; align-items: end; margin-bottom: 54px; }
.section-heading > p:last-child { color: var(--muted); }
.package-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.package-card { background: var(--paper); border: 1px solid #d6dfd9; padding: 30px; position: relative; transition: transform .25s, box-shadow .25s; }
.package-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(6,62,49,.08); }
.package-card.featured { background: var(--green); color: white; border-color: var(--green); }
.package-top { display: flex; justify-content: space-between; align-items: center; font-size: 11px; }
.package-top span { color: var(--gold); border: 1px solid rgba(201,154,61,.5); padding: 4px 10px; text-transform: uppercase; letter-spacing: .12em; }
.package-top b { color: var(--muted); font-weight: 500; }
.featured .package-top b, .featured .distance, .featured .price-note, .featured .check-list li { color: rgba(255,255,255,.65); }
.package-card h3 { color: var(--green); font-size: 26px; margin: 26px 0 5px; }
.featured h3 { color: white; }
.distance { color: var(--muted); font-size: 12px; min-height: 40px; }
.price { display: flex; align-items: baseline; gap: 10px; border-top: 1px solid var(--line); margin-top: 24px; padding-top: 22px; }
.featured .price { border-top-color: rgba(255,255,255,.16); }
.price strong { color: var(--green); font-size: 31px; }
.featured .price strong { color: var(--gold-light); }
.price span, .price-note { color: var(--muted); font-size: 11px; }
.price-note { margin: -2px 0 0; }
.package-card > a { display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 17px; font-weight: 700; color: var(--green); font-size: 13px; }
.featured > a { color: var(--gold-light); border-top-color: rgba(255,255,255,.16); }
.package-note { margin-top: 20px; padding: 20px 25px; background: rgba(255,255,255,.65); display: flex; justify-content: space-between; gap: 20px; align-items: center; font-size: 13px; color: var(--muted); }
.package-note p { margin: 0; }
.package-note a { color: var(--green); font-weight: 700; white-space: nowrap; }

.umrah-section { background: var(--green); color: white; position: relative; overflow: hidden; }
.umrah-section::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 15% 30%, rgba(201,154,61,.13), transparent 28%), linear-gradient(115deg, transparent 65%, rgba(255,255,255,.035) 65%); }
.umrah-grid { position: relative; display: grid; grid-template-columns: 1fr .8fr; gap: 100px; padding-block: 110px; align-items: center; }
.umrah-copy h2, .process-grid h2, .contact-copy h2 { color: white; }
.umrah-copy > p:not(.eyebrow) { color: rgba(255,255,255,.67); max-width: 650px; font-size: 17px; }
.umrah-prices { display: flex; gap: 40px; margin: 32px 0; }
.umrah-prices div { display: flex; flex-direction: column; }
.umrah-prices span { color: rgba(255,255,255,.55); font-size: 12px; }
.umrah-prices strong { color: var(--gold-light); font-size: 24px; }
.umrah-list { background: var(--paper); color: var(--ink); padding: 37px 42px; }
.umrah-list ul { list-style: none; padding: 0; margin: 0; }
.umrah-list li { display: flex; gap: 18px; padding: 17px 0; border-bottom: 1px solid var(--line); }
.umrah-list li b { color: var(--gold); font-size: 12px; }
.umrah-list li span { font-weight: 600; color: var(--green); }
.umrah-list small { color: var(--muted); display: block; margin-top: 18px; }

.centered { max-width: 720px; text-align: center; margin: 0 auto 60px; }
.centered .eyebrow { justify-content: center; }
.centered > p:last-child { max-width: 570px; margin-inline: auto; }
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.services-grid article { padding: 38px; min-height: 250px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.services-grid span { color: var(--gold); font-size: 12px; }
.services-grid h3 { color: var(--green); font-size: 23px; margin: 35px 0 8px; }
.services-grid p { margin: 0; color: var(--muted); font-size: 14px; }

.process-section { background: #102820; color: white; }
.process-grid { display: grid; grid-template-columns: .8fr 1.1fr; gap: 100px; padding-block: 95px; align-items: start; }
.process-grid ol { list-style: none; margin: 0; padding: 0; }
.process-grid li { display: grid; grid-template-columns: 70px 1fr; border-top: 1px solid rgba(255,255,255,.16); padding: 24px 0; }
.process-grid li:last-child { border-bottom: 1px solid rgba(255,255,255,.16); }
.process-grid li > b { color: var(--gold); font-size: 12px; }
.process-grid li span { color: rgba(255,255,255,.58); font-size: 14px; }
.process-grid li strong { display: block; color: white; font-size: 20px; margin-bottom: 4px; }

.faq-grid { display: grid; grid-template-columns: .72fr 1.15fr; gap: 110px; }
.faq-grid > div:first-child > p:not(.eyebrow) { color: var(--muted); }
.faqs details { border-top: 1px solid var(--line); padding: 20px 0; }
.faqs details:last-child { border-bottom: 1px solid var(--line); }
.faqs summary { cursor: pointer; color: var(--green); font-size: 18px; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 20px; }
.faqs summary::after { content: "+"; color: var(--gold); font-size: 23px; }
.faqs details[open] summary::after { content: "−"; }
.faqs p { color: var(--muted); margin: 14px 40px 0 0; }

.contact-section { background: var(--green); color: white; }
.contact-grid { padding-block: 100px; display: grid; grid-template-columns: 1.1fr .75fr; gap: 110px; align-items: center; }
.contact-copy > p:not(.eyebrow) { max-width: 640px; color: rgba(255,255,255,.67); }
.contact-actions { display: flex; gap: 15px; margin-top: 28px; }
.contact-card { background: #fff; color: var(--ink); padding: 37px 40px; font-style: normal; }
.contact-card > div { display: flex; flex-direction: column; padding: 18px 0; border-bottom: 1px solid var(--line); }
.contact-card > div:last-child { border-bottom: 0; }
.contact-card span { color: var(--gold); text-transform: uppercase; letter-spacing: .15em; font-size: 10px; margin-bottom: 6px; }
.contact-card a { color: var(--green); font-size: 18px; font-weight: 700; }
.contact-card p { color: var(--muted); margin: 0; font-size: 14px; }

footer { background: #071b15; color: white; }
.footer-top { min-height: 175px; display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 60px; align-items: center; border-bottom: 1px solid rgba(255,255,255,.12); }
.footer-brand { margin-right: 0; }
.footer-brand .brand-mark, .footer-brand .brand-mark b { background: #071b15; color: white; }
.footer-brand strong { color: white; }
.footer-top p { color: rgba(255,255,255,.55); }
.footer-links { display: flex; gap: 25px; justify-content: flex-end; font-size: 13px; }
.footer-bottom { height: 65px; display: flex; justify-content: space-between; align-items: center; color: rgba(255,255,255,.4); font-size: 11px; letter-spacing: .04em; }

@media (max-width: 1050px) {
  .desktop-nav { display: none; }
  .mobile-menu { display: block; order: 3; }
  .mobile-menu summary { list-style: none; cursor: pointer; color: var(--green); font-weight: 700; }
  .mobile-menu nav { position: absolute; right: 0; top: 45px; width: 230px; padding: 15px; background: white; border: 1px solid var(--line); box-shadow: 0 18px 50px rgba(0,0,0,.12); display: flex; flex-direction: column; }
  .mobile-menu nav a { padding: 10px; border-bottom: 1px solid var(--line); }
  .hero-grid { grid-template-columns: 1fr 340px; gap: 35px; }
  .hero h1 { font-size: 54px; }
  .about-grid { gap: 65px; }
  .visual-note { right: -20px; }
  .package-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { gap: 50px; }
}

@media (max-width: 760px) {
  .container { width: min(100% - 32px, 620px); }
  .announcement-inner { justify-content: center; text-align: center; min-height: 34px; }
  .announcement-inner span { display: none; }
  .nav-wrap { height: 72px; gap: 16px; }
  .brand-mark { width: 42px; }
  .brand strong { font-size: 21px; }
  .button-small { display: none; }
  .hero { min-height: auto; }
  .hero-image { object-position: 55% 50%; }
  .hero-shade { background: linear-gradient(90deg, rgba(2,27,21,.96), rgba(4,44,34,.78)); }
  .hero-grid { grid-template-columns: 1fr; padding-block: 72px; }
  .hero h1 { font-size: clamp(41px, 12vw, 57px); }
  .hero-lead { font-size: 16px; }
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .hero-proof { flex-wrap: wrap; gap: 20px; margin-top: 45px; }
  .hero-proof div { min-width: 105px; margin-right: 0; padding-right: 18px; }
  .hero-card { padding: 28px 24px; }
  .hero-scroll { display: none; }
  .trust-grid { grid-template-columns: 1fr 1fr; gap: 18px; padding-block: 24px; }
  .trust-grid p { grid-column: 1 / -1; text-align: center; }
  .trust-grid div { border: 0; text-align: left; }
  .section { padding: 78px 0; }
  .about-grid, .split-heading, .umrah-grid, .process-grid, .faq-grid, .contact-grid { grid-template-columns: 1fr; gap: 45px; }
  .about-visual { height: 520px; }
  .about-visual::before { left: -10px; top: -10px; }
  .visual-note { right: 12px; bottom: 12px; width: 250px; }
  .about-copy h2, .section-heading h2, .umrah-copy h2, .process-grid h2, .faq-grid h2, .contact-copy h2 { font-size: 38px; }
  .about-points { grid-template-columns: 1fr; }
  .package-grid { grid-template-columns: 1fr; }
  .package-note { align-items: flex-start; flex-direction: column; }
  .umrah-grid, .process-grid, .contact-grid { padding-block: 75px; }
  .umrah-prices { flex-direction: column; gap: 15px; }
  .umrah-list { padding: 30px 24px; }
  .services-grid { grid-template-columns: 1fr; }
  .services-grid article { min-height: 210px; }
  .contact-actions { flex-direction: column; }
  .contact-card { padding: 28px 24px; }
  .footer-top { grid-template-columns: 1fr; gap: 22px; padding-block: 50px; }
  .footer-links { justify-content: flex-start; flex-wrap: wrap; }
  .footer-bottom { height: auto; padding-block: 22px; gap: 10px; flex-direction: column; align-items: flex-start; }
}

/* =========================================================
   CONTEMPORARY ARCHITECTURAL — SELECTED DESIGN C
   ========================================================= */
:root {
  --green: #063f35;
  --green-2: #0d5949;
  --green-3: #ebe6d8;
  --gold: #c8a35c;
  --gold-light: #e9dcc0;
  --ivory: #f5f0e5;
  --paper: #fbf8f1;
  --ink: #18302b;
  --muted: #68746e;
  --line: rgba(6,63,53,.15);
  --soft-shadow: 0 24px 70px rgba(15,50,42,.12);
}

body {
  background:
    linear-gradient(rgba(6,63,53,.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6,63,53,.032) 1px, transparent 1px),
    var(--ivory);
  background-size: 80px 80px;
  color: var(--ink);
}

.container { width: min(1340px, calc(100% - 64px)); }
.announcement { background: var(--green); letter-spacing: .02em; }
.announcement-inner { min-height: 42px; }
.announcement a { color: white; }

.site-header {
  background: rgba(245,240,229,.93);
  border-bottom-color: var(--line);
  backdrop-filter: blur(18px);
}
.nav-wrap { height: 104px; gap: 32px; }
.brand { gap: 14px; }
.brand-mark {
  width: 58px;
  border: 0;
  border-radius: 20px 20px 10px 20px;
  background: var(--green);
  color: var(--ivory);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.brand-mark::before { display: none; }
.brand-mark b {
  background: transparent;
  color: var(--ivory);
  font: 700 14px/1 Georgia, serif;
  letter-spacing: -.03em;
}
.brand strong { color: var(--green); font-size: 27px; }
.brand small { color: var(--gold); font-size: 9px; letter-spacing: .24em; }
.desktop-nav { gap: 32px; font-size: 15px; font-weight: 600; }
.desktop-nav > a::after { left: auto; right: 0; bottom: -3px; height: 2px; width: 0; transition: width .25s; }
.desktop-nav > a:hover::after,
.desktop-nav > a.active::after { width: 100%; }
.nav-dropdown > button { color: var(--ink); font-weight: 600; }
.dropdown-menu { top: calc(100% + 30px); border-radius: 18px; padding: 12px; box-shadow: var(--soft-shadow); }
.dropdown-menu a { border-radius: 10px; border-bottom: 0; margin: 2px 0; }
.button { border-radius: 14px 14px 7px 14px; background: var(--green); border-color: var(--green); color: white; box-shadow: 0 12px 30px rgba(6,63,53,.13); }
.button:hover { background: var(--green-2); }
.button-small { background: rgba(255,255,255,.6); color: var(--green); border-color: var(--line); box-shadow: none; padding-inline: 20px; }
.button-small:hover { background: white; }
.header-call {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 14px 9px 9px;
  border: 1px solid var(--line);
  border-radius: 15px 15px 6px 15px;
  background: rgba(255,255,255,.55);
  transition: transform .2s, background .2s;
}
.header-call:hover { transform: translateY(-2px); background: white; }
.phone-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px 12px 5px 12px; background: var(--green); color: white; font-size: 14px; }
.header-call small { display: block; color: var(--muted); font-size: 9px; line-height: 1.2; }
.header-call b { display: block; color: var(--green); font-size: 13px; margin-top: 3px; line-height: 1.2; }
.button-outline { background: transparent; border-color: rgba(255,255,255,.38); box-shadow: none; }
.text-link { color: var(--green); border-bottom-color: rgba(6,63,53,.25); }
.light-link { color: var(--green); border-bottom-color: rgba(6,63,53,.25); }

/* Asymmetrical light hero */
.hero {
  min-height: 742px;
  display: block;
  color: var(--ink);
  background: rgba(245,240,229,.58);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  width: 390px;
  height: 390px;
  left: -180px;
  top: 150px;
  border: 1px solid rgba(200,163,92,.43);
  border-radius: 50%;
}
.hero::after {
  width: 430px;
  height: 540px;
  right: -105px;
  top: 72px;
  border: 1px solid rgba(200,163,92,.34);
  border-radius: 200px 0 0 200px;
  box-shadow: none;
}
.hero-image {
  inset: 55px 5.2% 56px auto;
  width: 43%;
  height: calc(100% - 111px);
  object-position: 48% 54%;
  border-radius: 145px 24px 125px 24px;
  box-shadow: var(--soft-shadow);
  z-index: 0;
}
.hero-shade {
  inset: 55px 5.2% 56px auto;
  width: 43%;
  height: calc(100% - 111px);
  border-radius: 145px 24px 125px 24px;
  background: linear-gradient(180deg, rgba(4,45,37,.05), rgba(4,45,37,.52));
  z-index: 1;
}
.hero-grid {
  min-height: 742px;
  grid-template-columns: 1fr .74fr;
  gap: 80px;
  padding-block: 80px;
}
.hero-copy { max-width: 700px; align-self: center; }
.hero .eyebrow { color: var(--green-2); }
.hero h1 { color: var(--green); font-size: clamp(54px, 5.2vw, 80px); max-width: 720px; }
.hero h1 em { color: var(--gold); }
.hero-lead { color: var(--muted); max-width: 610px; margin-block: 26px 32px; }
.hero-actions { gap: 24px; }
.hero-proof { border-top-color: var(--line); margin-top: 52px; }
.hero-proof div { border-right-color: var(--line); }
.hero-proof strong { color: var(--green); }
.hero-proof span { color: var(--muted); }
.hero-card {
  align-self: end;
  justify-self: end;
  width: 360px;
  margin: 0 0 -12px;
  padding: 28px 30px;
  border: 1px solid rgba(255,255,255,.35);
  border-top: 0;
  border-radius: 24px 24px 10px 24px;
  background: rgba(251,248,241,.94);
  box-shadow: var(--soft-shadow);
  backdrop-filter: blur(15px);
  z-index: 3;
}
.hero-card::before { content: ""; display: block; width: 48px; height: 3px; margin-bottom: 19px; background: var(--gold); border-radius: 4px; }
.hero-card h2 { font-size: 26px; }
.hero-card .button { min-height: 48px; }
.hero-scroll { color: var(--green); }

.trust-strip { background: var(--green); color: white; border: 0; }
.trust-grid { min-height: 104px; }
.trust-grid p { color: white; font-size: 18px; }
.trust-grid div { color: rgba(255,255,255,.72); border-left-color: rgba(255,255,255,.16); }
.trust-grid span { color: var(--gold-light); }

.section { padding-block: 112px; }
.about { background: var(--paper); }
.about-grid { gap: 100px; }
.about-visual { height: 620px; }
.about-visual::before { left: -22px; top: -22px; border-radius: 72px 12px 72px 12px; border-color: rgba(200,163,92,.7); }
.about-visual img { border-radius: 110px 20px 100px 20px; box-shadow: var(--soft-shadow); }
.visual-note { right: -30px; bottom: 34px; border-radius: 20px 20px 8px 20px; box-shadow: 0 20px 45px rgba(6,63,53,.2); }
.about-copy h2,
.section-heading h2,
.umrah-copy h2,
.process-grid h2,
.faq-grid h2,
.contact-copy h2 { font-size: clamp(40px, 4vw, 60px); }
.quote-box { border: 1px solid var(--line); border-left: 0; border-radius: 22px 22px 8px 22px; background: var(--ivory); }

.packages-section { background: rgba(235,230,216,.82); }
.package-grid { gap: 22px; }
.package-card {
  border-color: var(--line);
  border-radius: 24px 24px 9px 24px;
  padding: 32px;
  box-shadow: 0 10px 35px rgba(15,50,42,.045);
}
.package-card:hover { box-shadow: var(--soft-shadow); transform: translateY(-7px); }
.package-card.featured { background: var(--green); border-color: var(--green); box-shadow: 0 24px 60px rgba(6,63,53,.18); }
.package-top span { border-radius: 10px 10px 4px 10px; }
.package-note { border-radius: 16px 16px 6px 16px; border: 1px solid rgba(255,255,255,.8); }

.umrah-section { background: var(--green); }
.umrah-section::before { background: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 80px 80px; }
.umrah-grid { padding-block: 105px; }
.umrah-list { border-radius: 30px 30px 10px 30px; box-shadow: 0 30px 70px rgba(0,0,0,.15); }
.services { background: var(--paper); }
.services-grid { gap: 16px; border: 0; }
.services-grid article { min-height: 245px; border: 1px solid var(--line); border-radius: 22px 22px 8px 22px; background: rgba(255,255,255,.38); transition: transform .2s, background .2s; }
.services-grid article:hover { transform: translateY(-4px); background: white; }
.process-section { background: #092f28; }
.faq-section { background: var(--ivory); }
.faqs details { padding: 23px 0; }
.contact-section { background: var(--green); }
.contact-card { border-radius: 28px 28px 10px 28px; box-shadow: 0 30px 75px rgba(0,0,0,.14); }

footer { background: #06251f; }
.footer-brand .brand-mark { background: var(--gold); color: var(--green); }
.footer-brand .brand-mark b { color: var(--green); background: transparent; }

/* Inner pages */
.page-hero { min-height: 500px; color: var(--ink); background: rgba(245,240,229,.68); }
.page-hero > img {
  inset: 45px 5.2% 45px auto;
  width: 42%;
  height: calc(100% - 90px);
  border-radius: 120px 20px 100px 20px;
  object-position: 50% 54%;
  box-shadow: var(--soft-shadow);
}
.page-hero-shade {
  inset: 45px 5.2% 45px auto;
  width: 42%;
  height: calc(100% - 90px);
  border-radius: 120px 20px 100px 20px;
  background: linear-gradient(180deg, rgba(4,45,37,.03), rgba(4,45,37,.42));
}
.page-hero-content { padding-block: 95px 75px; }
.page-hero h1 { color: var(--green); max-width: 670px; font-size: clamp(52px, 5vw, 74px); }
.page-hero .eyebrow { color: var(--green-2); }
.page-hero-content > p:not(.eyebrow) { color: var(--muted); max-width: 620px; }
.breadcrumb { color: var(--muted); }
.breadcrumb b { color: var(--gold); }
.inner-section { background: var(--paper); }
.content-layout { gap: 75px; }
.article-content > h2,
.contact-page-grid h2 { font-size: 38px; }
.package-summary { gap: 12px; border: 0; }
.package-summary > div { border: 1px solid var(--line); border-radius: 20px 20px 7px 20px; background: var(--ivory); }
.feature-columns { border-radius: 24px 24px 8px 24px; border: 1px solid rgba(255,255,255,.8); }
.notice { border: 1px solid rgba(200,163,92,.35); border-left: 4px solid var(--gold); border-radius: 18px 18px 6px 18px; }
.related-grid { gap: 16px; }
.related-grid a { border-radius: 20px 20px 7px 20px; border: 1px solid var(--line); transition: transform .2s, background .2s; }
.related-grid a:hover { transform: translateY(-4px); background: var(--paper); }
.side-card { border: 0; border-radius: 26px 26px 9px 26px; box-shadow: var(--soft-shadow); }
.inner-cta { background: var(--green); }
.values-section { background: rgba(235,230,216,.86); }
.contact-info-grid { gap: 12px; border: 0; }
.contact-info-grid > div { border: 1px solid var(--line); border-radius: 18px 18px 6px 18px; background: var(--ivory); }
.inquiry-card { border-top: 0; border-radius: 28px 28px 10px 28px; box-shadow: var(--soft-shadow); background: var(--ivory); }
.inquiry-card input,
.inquiry-card select,
.inquiry-card textarea { border-radius: 11px; background: var(--paper); }
.floating-whatsapp { border-radius: 16px 16px 6px 16px; }

@media (max-width: 1050px) {
  .container { width: min(100% - 40px, 920px); }
  .nav-wrap { height: 86px; }
  .hero-grid { grid-template-columns: 1fr .68fr; gap: 36px; }
  .hero-image,
  .hero-shade { right: 2.5%; width: 44%; }
  .hero h1 { font-size: 58px; }
  .hero-card { width: 315px; }
  .page-hero > img,
  .page-hero-shade { right: 2.5%; width: 43%; }
  .header-call { display: none; }
}

@media (max-width: 760px) {
  body { background-size: 52px 52px; }
  .container { width: min(100% - 32px, 620px); }
  .nav-wrap { height: 76px; }
  .brand-mark { width: 46px; border-radius: 16px 16px 7px 16px; }
  .hero { padding-top: 0; }
  .hero-grid { min-height: auto; grid-template-columns: 1fr; padding: 58px 0 435px; }
  .hero-image,
  .hero-shade {
    display: block;
    position: absolute;
    inset: auto 16px 34px;
    width: calc(100% - 32px);
    height: 360px;
    border-radius: 72px 15px 60px 15px;
  }
  .hero-image { object-position: 50% 52%; }
  .hero-shade { background: linear-gradient(180deg, rgba(4,45,37,.03), rgba(4,45,37,.42)); }
  .hero h1 { font-size: clamp(43px, 12vw, 58px); }
  .hero-card { width: 100%; margin: 10px 0 -5px; justify-self: stretch; }
  .hero-proof { gap: 18px; }
  .hero-proof div { min-width: 105px; }
  .trust-grid { padding-block: 28px; }
  .about-visual img { border-radius: 72px 14px 60px 14px; }
  .section { padding-block: 78px; }
  .page-hero { min-height: 440px; }
  .page-hero > img,
  .page-hero-shade { inset: 0; width: 100%; height: 100%; border-radius: 0; }
  .page-hero-shade { background: linear-gradient(90deg, rgba(245,240,229,.98), rgba(245,240,229,.92) 55%, rgba(245,240,229,.55)); }
  .page-hero-content { padding-block: 75px 60px; }
  .page-hero h1 { font-size: 45px; max-width: 90%; }
  .page-hero-content > p:not(.eyebrow) { max-width: 88%; }
  .package-summary { grid-template-columns: 1fr; }
  .services-grid article { border-radius: 18px 18px 6px 18px; }
}

@media (max-width: 420px) {
  .brand > span:last-child { display: none; }
  .compact { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: 1fr; }
  .trust-grid p { grid-column: auto; }
  .about-visual { height: 430px; }
  .package-card { padding: 25px 22px; }
  .price strong { font-size: 27px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* Multi-page navigation and inner pages */
.desktop-nav > a.active,
.nav-dropdown > button.active { color: var(--green-2); }
.desktop-nav > a.active::after { right: 0; }
.nav-dropdown { position: relative; }
.nav-dropdown > button { border: 0; background: transparent; color: var(--ink); padding: 6px 0; cursor: pointer; font: inherit; font-weight: 500; }
.nav-dropdown > button span { color: var(--gold); margin-left: 4px; }
.dropdown-menu { position: absolute; left: 50%; top: calc(100% + 20px); width: 245px; padding: 10px; background: white; border: 1px solid var(--line); box-shadow: 0 18px 45px rgba(6,62,49,.14); opacity: 0; visibility: hidden; transform: translate(-50%, 8px); transition: .2s; }
.dropdown-menu::before { content: ""; position: absolute; left: 0; right: 0; height: 22px; top: -22px; }
.dropdown-menu a { display: block; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 13px; }
.dropdown-menu a:last-child { border-bottom: 0; }
.dropdown-menu a:hover { background: var(--ivory); color: var(--green); }
.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.mobile-menu nav strong { color: var(--gold); padding: 10px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.mobile-menu nav .sub-link { padding-left: 25px; color: var(--muted); }

.page-hero { min-height: 455px; position: relative; display: grid; align-items: center; color: white; overflow: hidden; }
.page-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 53%; }
.page-hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2,28,22,.96), rgba(5,56,43,.80) 58%, rgba(4,35,28,.38)); }
.page-hero-content { position: relative; z-index: 2; padding-block: 86px 66px; }
.page-hero h1 { max-width: 850px; margin: 0; font-size: clamp(48px, 6vw, 76px); line-height: 1.12; letter-spacing: -.035em; }
.page-hero-content > p:not(.eyebrow) { max-width: 670px; color: rgba(255,255,255,.75); font-size: 17px; }
.breadcrumb { display: flex; gap: 10px; align-items: center; margin-top: 38px; color: rgba(255,255,255,.6); font-size: 12px; }
.breadcrumb b { color: var(--gold-light); font-weight: 500; }
.inner-section { background: var(--paper); }
.content-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 80px; align-items: start; }
.article-content > h2,
.contact-page-grid h2 { color: var(--green); font-size: 34px; line-height: 1.3; margin: 52px 0 16px; }
.article-content > h2:first-of-type { margin-top: 0; }
.article-content > p { color: var(--muted); }
.package-summary { display: grid; grid-template-columns: repeat(2, 1fr); margin: 38px 0 50px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.package-summary > div { min-height: 130px; padding: 25px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; }
.package-summary span { color: var(--gold); text-transform: uppercase; letter-spacing: .13em; font-size: 10px; }
.package-summary strong { color: var(--green); font-size: 20px; margin-top: 6px; }
.feature-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; background: var(--green-3); padding: 25px 30px; }
.feature-columns .check-list { margin: 0; }
.notice { margin: 35px 0; padding: 22px 25px; background: var(--ivory); border-left: 3px solid var(--gold); color: var(--muted); font-size: 14px; }
.notice strong { color: var(--green); }
.timeline { border-top: 1px solid var(--line); }
.timeline > div { display: grid; grid-template-columns: 60px 1fr; gap: 15px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.timeline b { color: var(--gold); font-size: 12px; }
.timeline span { color: var(--muted); font-size: 14px; }
.timeline strong { display: block; color: var(--green); font-size: 18px; margin-bottom: 3px; }
.document-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 30px; list-style: none; padding: 0; }
.document-list li { color: var(--muted); border-bottom: 1px solid var(--line); padding: 10px 0; }
.document-list li::before { content: "✓"; color: var(--gold); margin-right: 10px; }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.related-grid a { min-height: 160px; padding: 20px; background: var(--green-3); display: flex; flex-direction: column; }
.related-grid span { color: var(--gold); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.related-grid strong { color: var(--green); margin: 10px 0 auto; }
.related-grid small { color: var(--muted); }
.booking-sidebar { position: sticky; top: 115px; }
.side-card { padding: 32px; background: var(--green); color: white; border-top: 4px solid var(--gold); }
.side-card h3 { font-size: 28px; line-height: 1.35; margin: 8px 0; }
.side-price { display: block; color: var(--gold-light); font-size: 22px; margin: 18px 0 4px; }
.side-card p:not(.card-kicker) { color: rgba(255,255,255,.65); font-size: 14px; }
.side-whatsapp { display: block; text-align: center; color: var(--gold-light); border-bottom: 1px solid rgba(233,200,120,.35); padding: 15px 0 4px; font-weight: 700; }
.inner-cta { background: var(--green); color: white; }
.inner-cta-grid { min-height: 330px; display: grid; grid-template-columns: 1fr auto; gap: 80px; align-items: center; }
.inner-cta h2 { color: white; font-size: 43px; line-height: 1.25; max-width: 700px; margin: 0; }
.inner-cta p:not(.eyebrow) { color: rgba(255,255,255,.6); max-width: 700px; }
.inner-cta-grid > div:last-child { display: flex; gap: 12px; }
.values-section { background: var(--green-3); }
.contact-page-grid { display: grid; grid-template-columns: 1fr .78fr; gap: 90px; align-items: start; }
.contact-page-grid h2 { margin-top: 0; font-size: 46px; }
.contact-info-grid { display: grid; grid-template-columns: 1fr 1fr; margin-top: 35px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.contact-info-grid > div { min-height: 155px; padding: 25px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; }
.contact-info-grid span { color: var(--gold); text-transform: uppercase; letter-spacing: .14em; font-size: 10px; margin-bottom: 8px; }
.contact-info-grid a { color: var(--green); font-weight: 700; }
.contact-info-grid p { color: var(--muted); margin: 0; font-size: 14px; }
.inquiry-card { background: var(--green-3); padding: 38px; border-top: 4px solid var(--gold); }
.inquiry-card h3 { color: var(--green); font-size: 30px; margin: 4px 0 25px; }
.inquiry-card label { display: block; color: var(--green); font-size: 12px; font-weight: 700; margin-bottom: 16px; }
.inquiry-card input,
.inquiry-card select,
.inquiry-card textarea { width: 100%; border: 1px solid #cfd9d3; background: white; color: var(--ink); padding: 12px 14px; margin-top: 6px; outline: none; }
.inquiry-card input:focus,
.inquiry-card select:focus,
.inquiry-card textarea:focus { border-color: var(--gold); }
.floating-whatsapp { position: fixed; z-index: 50; right: 20px; bottom: 20px; background: #128c4b; color: white; padding: 12px 17px; border-radius: 40px; box-shadow: 0 10px 30px rgba(0,0,0,.2); font-size: 13px; font-weight: 700; }

@media (max-width: 1050px) {
  .content-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; }
  .contact-page-grid { gap: 45px; }
}

@media (max-width: 760px) {
  .page-hero { min-height: 410px; }
  .page-hero h1 { font-size: 44px; }
  .content-layout,
  .contact-page-grid,
  .inner-cta-grid { grid-template-columns: 1fr; gap: 45px; }
  .booking-sidebar { position: static; }
  .package-summary,
  .contact-info-grid { grid-template-columns: 1fr; }
  .feature-columns,
  .document-list { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: 1fr; }
  .related-grid a { min-height: 130px; }
  .inner-cta-grid { padding-block: 70px; }
  .inner-cta h2 { font-size: 36px; }
  .inner-cta-grid > div:last-child { flex-direction: column; }
  .contact-page-grid h2 { font-size: 38px; }
  .inquiry-card { padding: 30px 22px; }
}

/* =========================================================
   FINAL HERO FIX — desktop contrast, bounded copy, mobile crop
   Kept last so it consistently overrides every shared page rule.
   ========================================================= */
.hero-image { object-position: 50% 84%; }
.hero-grid { grid-template-columns: minmax(0, 690px) minmax(360px, 1fr); }
.hero-copy {
  width: 100%;
  max-width: 690px;
  padding: 42px 44px;
  overflow: hidden;
  border: 1px solid rgba(6,63,53,.13);
  border-radius: 28px 28px 10px 28px;
  background: rgba(251,248,241,.96);
  box-shadow: 0 22px 60px rgba(15,50,42,.10);
  backdrop-filter: blur(12px);
}
.hero-copy > * { max-width: 100%; }
.hero h1 {
  max-width: 100%;
  overflow-wrap: anywhere;
  color: var(--green);
}
.hero-lead { color: #52615b; }
.hero .eyebrow { color: var(--green-2); }
.hero-proof { max-width: 100%; }
.hero-proof div { min-width: 0; flex: 1; }

.page-hero {
  min-height: 540px;
  display: flex;
  align-items: center;
  color: var(--ink);
  background:
    linear-gradient(rgba(6,63,53,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6,63,53,.03) 1px, transparent 1px),
    var(--ivory);
  background-size: 80px 80px;
}
.page-hero > img {
  position: absolute;
  inset: 45px 5% 45px auto;
  width: 44%;
  height: calc(100% - 90px);
  object-fit: cover;
  object-position: 50% 84%;
  border-radius: 120px 20px 100px 20px;
  box-shadow: var(--soft-shadow);
}
.page-hero-shade {
  position: absolute;
  inset: 45px 5% 45px auto;
  width: 44%;
  height: calc(100% - 90px);
  border-radius: 120px 20px 100px 20px;
  background: linear-gradient(180deg, rgba(4,45,37,.02), rgba(4,45,37,.36));
}
.page-hero-content {
  position: relative;
  z-index: 2;
  width: min(620px, calc(50% - 50px));
  margin: 0 0 0 max(32px, calc((100% - 1340px)/2));
  padding: 42px 44px;
  overflow: hidden;
  border: 1px solid rgba(6,63,53,.13);
  border-radius: 28px 28px 10px 28px;
  background: rgba(251,248,241,.97);
  box-shadow: 0 22px 60px rgba(15,50,42,.10);
}
.page-hero-content > * { max-width: 100%; }
.page-hero h1 {
  max-width: 100%;
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--green);
  font-size: clamp(44px, 4.25vw, 66px);
  line-height: 1.15;
}
.page-hero .eyebrow { color: var(--green-2); }
.page-hero-content > p:not(.eyebrow) { max-width: 100%; color: #52615b; }
.breadcrumb { max-width: 100%; flex-wrap: wrap; margin-top: 28px; color: var(--muted); }
.breadcrumb b { color: var(--gold); }

@media (max-width: 1050px) and (min-width: 761px) {
  .hero-grid { grid-template-columns: minmax(0, 56%) minmax(300px, 1fr); }
  .hero-copy { padding: 34px; }
  .hero h1 { font-size: clamp(46px, 5.4vw, 58px); }
  .hero-card { width: 300px; padding: 24px; }
  .page-hero-content { width: calc(52% - 40px); padding: 34px; }
  .page-hero h1 { font-size: clamp(40px, 5vw, 52px); }
}

@media (max-width: 760px) {
  .hero {
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 16px 0 54px;
  }
  .hero::before,
  .hero::after { display: none; }
  .hero-image {
    position: relative;
    inset: auto;
    order: 1;
    width: calc(100% - 32px);
    height: 340px;
    margin: 0 auto;
    object-position: 50% 87%;
    border-radius: 72px 15px 60px 15px;
  }
  .hero-shade { display: none; }
  .hero-grid {
    order: 2;
    display: block;
    min-height: 0;
    padding: 26px 0 0;
  }
  .hero-copy { padding: 28px 24px; border-radius: 22px 22px 8px 22px; }
  .hero h1 { font-size: clamp(40px, 11vw, 54px); }
  .hero-lead { font-size: 16px; }
  .hero-proof { gap: 12px; }
  .hero-proof div { padding-right: 10px; }
  .hero-card { width: 100%; margin-top: 20px; }

  .page-hero {
    min-height: 0;
    display: block;
    padding: 16px 0 50px;
    background-size: 52px 52px;
  }
  .page-hero > img {
    position: relative;
    inset: auto;
    display: block;
    width: calc(100% - 32px);
    height: 300px;
    margin: 0 auto;
    object-position: 50% 88%;
    border-radius: 72px 15px 60px 15px;
  }
  .page-hero-shade { display: none; }
  .page-hero-content {
    width: calc(100% - 32px);
    margin: -22px auto 0;
    padding: 30px 24px;
    border-radius: 22px 22px 8px 22px;
  }
  .page-hero h1 { max-width: 100%; font-size: clamp(36px, 10.5vw, 46px); }
  .page-hero-content > p:not(.eyebrow) { max-width: 100%; font-size: 15px; }
  .breadcrumb { margin-top: 22px; }
}

@media (max-width: 420px) {
  .hero-image { height: 300px; }
  .hero-copy { padding: 25px 20px; }
  .hero h1 { font-size: 38px; }
  .hero-actions .button { width: 100%; }
  .hero-actions .text-link { margin-left: 2px; }
  .hero-proof { display: grid; grid-template-columns: 1fr 1fr; }
  .page-hero > img { height: 260px; }
  .page-hero-content { padding: 26px 20px; }
  .page-hero h1 { font-size: 36px; }
}

/* Interaction, keyboard access, and narrow-screen safety */
body { overflow-x: clip; }

[id] { scroll-margin-top: 120px; }

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 4px;
}

.nav-dropdown.is-open .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.mobile-menu summary {
  min-width: 48px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 1050px) {
  .mobile-menu nav {
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

@media (max-width: 420px) {
  .mobile-menu nav {
    position: fixed;
    top: 112px;
    right: 16px;
    left: 16px;
    width: auto;
  }

  .floating-whatsapp {
    right: 12px;
    bottom: 12px;
  }
}

/* =========================================================
   PROFESSIONAL BRAND & CONVERSION UPGRADE
   ========================================================= */
.brand-logo {
  width: 66px;
  height: 66px;
  flex: 0 0 66px;
  object-fit: contain;
  border-radius: 14px;
  background: #fff;
  padding: 3px;
  box-shadow: 0 8px 24px rgba(6,63,53,.1);
}

.footer-brand .brand-logo {
  background: rgba(255,255,255,.95);
  box-shadow: none;
}

.button-whatsapp {
  background: #117a47;
  border-color: #117a47;
  color: #fff;
}

.button-whatsapp:hover { background: #0c6038; }

.credibility-section { background: var(--paper); }
.credibility-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.credibility-grid article {
  min-height: 280px;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 24px 24px 8px 24px;
  background: var(--ivory);
}

.credibility-grid article > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  background: rgba(200,163,92,.16);
  color: #9a7228;
  font-size: 12px;
  font-weight: 700;
}

.credibility-grid h3 {
  margin: 34px 0 10px;
  color: var(--green);
  font-size: 22px;
}

.credibility-grid p { margin: 0; color: var(--muted); font-size: 14px; }
.verification-note {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 28px;
  align-items: center;
  margin-top: 20px;
  padding: 24px 28px;
  border: 1px solid rgba(200,163,92,.35);
  border-radius: 18px 18px 6px 18px;
  background: #fffaf0;
}

.verification-note strong { color: var(--green); }
.verification-note p { margin: 0; color: var(--muted); font-size: 14px; }
.verification-note a { color: var(--green); font-weight: 700; white-space: nowrap; }

.comparison-section {
  background:
    linear-gradient(rgba(6,63,53,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6,63,53,.025) 1px, transparent 1px),
    var(--ivory);
  background-size: 80px 80px;
}

.comparison-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 24px 24px 8px 24px;
  background: var(--paper);
  box-shadow: 0 20px 55px rgba(15,50,42,.08);
}

.package-table { width: 100%; min-width: 820px; border-collapse: collapse; }
.package-table th {
  padding: 18px 22px;
  background: var(--green);
  color: rgba(255,255,255,.8);
  text-align: left;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.package-table td { padding: 21px 22px; border-bottom: 1px solid var(--line); color: var(--muted); }
.package-table tbody tr:last-child td { border-bottom: 0; }
.package-table tbody tr:hover { background: rgba(200,163,92,.06); }
.package-table td strong { display: block; color: var(--green); }
.package-table td span { display: block; color: var(--gold); font-size: 11px; }
.package-table td a { color: var(--green); font-weight: 700; border-bottom: 1px solid rgba(6,63,53,.25); }
.comparison-actions { display: flex; align-items: center; justify-content: center; gap: 28px; margin-top: 34px; }

.review-section { background: #082f27; color: white; }
.review-grid { display: grid; grid-template-columns: 1.1fr .8fr; gap: 100px; align-items: center; }
.review-grid h2 { margin: 0; max-width: 720px; font-size: clamp(39px, 4vw, 58px); line-height: 1.2; }
.review-grid > div:first-child > p:not(.eyebrow) { max-width: 670px; color: rgba(255,255,255,.66); }
.review-actions { display: flex; gap: 14px; margin-top: 28px; }
.review-principles { display: grid; gap: 12px; }
.review-principles div {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 24px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 18px 18px 6px 18px;
  background: rgba(255,255,255,.045);
}

.review-principles b { min-width: 90px; color: var(--gold-light); font-size: 20px; }
.review-principles span { color: rgba(255,255,255,.65); }

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.catalog-card {
  scroll-margin-top: 130px;
  display: flex;
  flex-direction: column;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 24px 24px 8px 24px;
  background: var(--ivory);
  box-shadow: 0 12px 40px rgba(15,50,42,.055);
}

.catalog-card.featured { background: var(--green); color: white; }
.catalog-card h3 { margin: 24px 0 6px; color: var(--green); font-size: 27px; }
.catalog-card.featured h3 { color: white; }
.catalog-price { color: var(--green); font-size: 29px; font-weight: 700; }
.catalog-card.featured .catalog-price { color: var(--gold-light); }
.catalog-price small { font-size: 12px; font-weight: 500; color: var(--muted); }
.catalog-card.featured .catalog-price small { color: rgba(255,255,255,.6); }
.catalog-card dl { margin: 25px 0 8px; border-top: 1px solid var(--line); }
.catalog-card.featured dl { border-top-color: rgba(255,255,255,.16); }
.catalog-card dl div { display: flex; justify-content: space-between; gap: 15px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.catalog-card.featured dl div { border-bottom-color: rgba(255,255,255,.16); }
.catalog-card dt { color: var(--muted); font-size: 12px; }
.catalog-card dd { margin: 0; color: var(--green); font-weight: 700; font-size: 13px; text-align: right; }
.catalog-card.featured dt { color: rgba(255,255,255,.55); }
.catalog-card.featured dd { color: white; }
.catalog-card .check-list { flex: 1; }
.catalog-card.featured .check-list li { color: rgba(255,255,255,.68); }

.map-section { position: relative; min-height: 420px; background: var(--ivory); }
.map-section iframe { display: block; filter: saturate(.72) contrast(.96); }
.map-card {
  position: absolute;
  right: 5%;
  bottom: 35px;
  left: auto;
  width: min(530px, calc(100% - 40px));
  padding: 28px 30px;
  border-radius: 24px 24px 8px 24px;
  background: rgba(251,248,241,.97);
  box-shadow: var(--soft-shadow);
}

.map-card h2 { margin: 0; color: var(--green); font-size: 32px; }
.map-card p:not(.eyebrow) { color: var(--muted); }

.legal-hero {
  padding: 90px 0 70px;
  background: var(--ivory);
  border-bottom: 1px solid var(--line);
}

.legal-hero h1 { margin: 0; color: var(--green); font-size: clamp(46px, 6vw, 74px); }
.legal-hero p:last-child { color: var(--muted); }
.legal-content { max-width: 850px; }
.legal-content h2 { margin: 42px 0 10px; color: var(--green); font-size: 28px; }
.legal-content p { color: var(--muted); }
.legal-content a { color: var(--green); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.mobile-contact-bar { display: none; }

@media (max-width: 1180px) {
  .desktop-nav { gap: 20px; font-size: 13px; }
  .brand-logo { width: 58px; height: 58px; flex-basis: 58px; }
  .credibility-grid { grid-template-columns: repeat(2, 1fr); }
  .catalog-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  body { padding-bottom: 62px; }
  .brand-logo { width: 50px; height: 50px; flex-basis: 50px; border-radius: 11px; }
  .hero-actions { width: 100%; }
  .hero-actions .button { width: 100%; }
  .credibility-grid,
  .catalog-grid,
  .review-grid { grid-template-columns: 1fr; }
  .credibility-grid article { min-height: 220px; }
  .verification-note { grid-template-columns: 1fr; gap: 10px; }
  .comparison-actions,
  .review-actions { flex-direction: column; align-items: stretch; }
  .comparison-actions .button,
  .review-actions .button { width: 100%; }
  .review-grid { gap: 45px; }
  .review-principles b { min-width: 72px; }
  .map-section { padding-bottom: 0; }
  .map-section iframe { height: 520px; }
  .map-card { right: 16px; bottom: 20px; width: calc(100% - 32px); }
  .mobile-contact-bar {
    position: fixed;
    z-index: 80;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 62px;
    padding: 8px 12px;
    gap: 8px;
    background: rgba(251,248,241,.97);
    border-top: 1px solid var(--line);
    backdrop-filter: blur(14px);
  }
  .mobile-contact-bar a {
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--green);
    color: white;
    font-weight: 700;
  }
  .mobile-contact-bar a:last-child { background: #117a47; }
  .floating-whatsapp { display: none; }
}

@media (max-width: 420px) {
  .credibility-grid article,
  .catalog-card { padding: 25px 22px; }
  .map-card { padding: 24px 22px; }
}

.not-found {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 50px 0;
  text-align: center;
  background:
    radial-gradient(circle at 50% 30%, rgba(200,163,92,.16), transparent 26%),
    var(--ivory);
}

.not-found .brand { justify-content: center; width: max-content; margin: 0 auto 45px; }
.error-code { margin: 0; color: var(--gold); font: 700 clamp(80px, 17vw, 170px)/.85 Georgia, serif; opacity: .35; }
.not-found h1 { margin: 20px 0 10px; color: var(--green); font-size: clamp(40px, 6vw, 68px); }
.not-found p:not(.error-code) { color: var(--muted); }
.not-found > .container > div { display: flex; justify-content: center; gap: 12px; margin-top: 28px; }
.button-outline-dark { background: transparent; color: var(--green); border-color: var(--green); box-shadow: none; }

/* Package photography */
.package-media {
  height: 190px;
  margin: -32px -32px 25px;
  overflow: hidden;
  border-radius: 24px 24px 0 0;
  background: #d9ded8;
}

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

.package-card:hover .package-media img,
.catalog-card:hover .package-media img { transform: scale(1.045); }

.featured .package-media { border-bottom: 1px solid rgba(255,255,255,.12); }

.related-grid a { overflow: hidden; }
.related-image {
  width: calc(100% + 40px);
  height: 105px;
  margin: -20px -20px 17px;
  object-fit: cover;
}

/* Footer credit, clearer numerals, and viewport containment */
.developer-credit { text-align: center; color: rgba(255,255,255,.6); }
.developer-credit a { color: var(--gold-light); font-weight: 600; }
.footer-bottom { gap: 24px; }
.footer-bottom > * { min-width: 0; }

.price strong,
.catalog-price,
.side-price,
.package-top b,
.umrah-prices strong,
.contact-card a,
.contact-info-grid a,
.package-table td,
.hero-proof strong {
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

main,
header,
footer,
section,
.container,
.nav-wrap,
.hero-grid,
.hero-copy,
.hero-card,
.page-hero,
.page-hero-content,
.content-layout,
.article-content,
.contact-grid,
.contact-card,
.comparison-wrap,
.review-grid,
.catalog-grid {
  min-width: 0;
  max-width: 100%;
}

main,
header,
footer,
section { overflow-x: clip; }

img,
iframe,
video { max-width: 100%; }

@media (max-width: 760px) {
  html,
  body { touch-action: pan-y; }

  .container { max-width: calc(100% - 32px); }
  .mobile-menu { min-width: 0; }
  .mobile-menu nav { max-width: calc(100vw - 32px); }
  .hero-copy,
  .hero-card,
  .page-hero-content,
  .contact-card,
  .inquiry-card,
  .map-card { max-width: 100%; }

  .comparison-wrap { overflow: visible; border: 0; background: transparent; box-shadow: none; }
  .package-table,
  .package-table tbody,
  .package-table tr,
  .package-table td { display: block; width: 100%; min-width: 0; }
  .package-table thead { display: none; }
  .package-table tr {
    margin-bottom: 14px;
    padding: 10px 18px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 18px 18px 6px 18px;
    background: var(--paper);
  }
  .package-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 12px 0;
    text-align: right;
  }
  .package-table td::before { color: var(--muted); font-size: 12px; text-align: left; }
  .package-table td:nth-child(1)::before { content: "Package"; }
  .package-table td:nth-child(2)::before { content: "Duration"; }
  .package-table td:nth-child(3)::before { content: "Distance"; }
  .package-table td:nth-child(4)::before { content: "Price"; }
  .package-table td:nth-child(5)::before { content: "Details"; }

  .footer-bottom { align-items: center; text-align: center; }
  .developer-credit { order: 3; width: 100%; }
  .package-media { height: 205px; }
}

@media (max-width: 420px) {
  .package-media { margin: -25px -22px 22px; border-radius: 20px 20px 0 0; }
}

/* Traditional Hajj agency redesign */
@font-face {
  font-family: "Li Ador Noirrit";
  src: local("Li Ador Noirrit Regular"),
       local("Li Ador Noirrit"),
       url("fonts/Li Ador Noirrit Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --agency-gold: #bd9826;
  --agency-gold-dark: #9f7a15;
  --agency-charcoal: #3d3d3f;
  --agency-cream: #f7e9b8;
  --agency-soft: #f7f7f5;
}

body {
  background: #fff;
  color: #242526;
  font-family: "Li Ador Noirrit", "SolaimanLipi", "Kalpurush", sans-serif;
  font-size: 18px;
  line-height: 1.65;
}

h1, h2, h3, h4, .brand strong {
  font-family: "Li Ador Noirrit", "SolaimanLipi", "Kalpurush", sans-serif;
  letter-spacing: 0;
}

.agency-topbar {
  background: var(--agency-charcoal);
  color: #fff;
  font-size: 14px;
}

.agency-topbar-inner {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.agency-topbar p { margin: 0; }
.agency-topbar-inner > div { display: flex; align-items: center; gap: 24px; }
.agency-topbar a { color: #fff; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  overflow: visible;
  border: 0;
  background: #fff;
  backdrop-filter: none;
  box-shadow: 0 3px 12px rgba(0,0,0,.08);
}

.agency-head { background: #fff; }
.agency-head-inner {
  min-height: 96px;
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  align-items: center;
  gap: 30px;
}

.agency-head .brand { min-width: 0; }
.agency-head .brand-logo {
  width: 76px;
  height: 76px;
  flex-basis: 76px;
  border-radius: 0;
  object-fit: contain;
  background: transparent;
  box-shadow: none;
}

.agency-head .brand strong { color: #0b523d; font-size: 34px; line-height: .9; }
.agency-head .brand small { color: var(--agency-gold-dark); letter-spacing: .18em; }
.agency-assurance { text-align: center; color: var(--agency-charcoal); }
.agency-assurance b { display: block; color: #0b523d; font-size: 20px; }
.agency-assurance span { display: block; margin-top: 4px; color: #777; font-size: 14px; }
.agency-contact { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.agency-contact a { color: var(--agency-charcoal); line-height: 1.4; }
.agency-contact a:first-child { font-size: 20px; }

.agency-nav { background: var(--agency-gold); }
.agency-nav .nav-wrap { height: 62px; justify-content: center; gap: 26px; }
.agency-nav .desktop-nav { flex: 1; justify-content: center; gap: 6px; }
.agency-nav .desktop-nav > a,
.agency-nav .nav-dropdown > button {
  padding: 20px 16px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
}

.agency-nav .desktop-nav > a::after { display: none; }
.agency-nav .desktop-nav > a:hover,
.agency-nav .desktop-nav > a.active,
.agency-nav .nav-dropdown > button:hover,
.agency-nav .nav-dropdown > button.active,
.agency-nav .nav-dropdown.is-open > button { background: rgba(73,49,0,.16); color: #fff; }
.agency-nav .dropdown-menu { top: calc(100% + 1px); border-radius: 0 0 8px 8px; }
.nav-quote {
  flex: 0 0 auto;
  padding: 9px 15px;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 5px;
  color: #fff;
  font-weight: 700;
}

.hero { min-height: 610px; }
.hero-shade { background: linear-gradient(90deg, rgba(8,36,29,.92) 0%, rgba(8,36,29,.68) 50%, rgba(8,36,29,.26) 100%); }
.hero h1 { max-width: 790px; font-size: clamp(52px, 6.6vw, 88px); line-height: 1.03; }
.hero-card { border-radius: 6px; border-top: 5px solid var(--agency-gold); }
.button { border-radius: 5px; background: var(--agency-gold); box-shadow: none; }
.button:hover { background: var(--agency-gold-dark); }

.trip-planner {
  position: relative;
  z-index: 2;
  padding: 0 0 82px;
  background: linear-gradient(180deg, #efe4cf 0 115px, #fff 115px);
}

.planner-card {
  margin-top: -42px;
  padding: clamp(30px, 4vw, 58px);
  border: 1px solid #eee;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 25px 60px rgba(27,31,30,.14);
}

.planner-heading { max-width: 920px; margin: 0 auto 32px; text-align: center; }
.planner-heading h2 { margin: 5px 0 8px; color: var(--agency-charcoal); font-size: clamp(34px, 4vw, 52px); }
.planner-heading p:last-child { margin: 0; color: #666; }
.planner-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 18px; }
.planner-grid label { min-width: 0; }
.planner-grid label > span { display: block; margin-bottom: 7px; color: #444; font-weight: 700; }
.planner-grid input,
.planner-grid textarea {
  width: 100%;
  min-height: 54px;
  padding: 12px 14px;
  border: 1px solid #d9dcde;
  border-radius: 2px;
  background: #f8f8f8;
  color: #222;
  font: inherit;
}
.planner-grid input:focus,
.planner-grid textarea:focus { outline: 2px solid rgba(189,152,38,.25); border-color: var(--agency-gold); }
.planner-grid textarea { min-height: 95px; resize: vertical; }
.planner-wide { grid-column: 1 / -1; }
.planner-submit {
  display: block;
  min-width: min(360px, 100%);
  margin: 28px auto 10px;
  padding: 14px 24px;
  border: 0;
  border-radius: 4px;
  background: var(--agency-charcoal);
  color: #fff;
  font: 700 18px/1.4 inherit;
  cursor: pointer;
}
.planner-submit:hover { background: #222; }
.planner-card > small { display: block; color: #777; text-align: center; }

.trust-strip { background: var(--agency-charcoal); }
.section { padding-block: 95px; }
.section-heading h2 { color: var(--agency-charcoal); }
.eyebrow { color: var(--agency-gold-dark); }

.packages-section { background: #f6f6f5; }
.package-grid { grid-template-columns: repeat(3, 1fr); gap: 26px; }
.package-card,
.package-card.featured {
  overflow: hidden;
  padding: 0 28px 28px;
  border: 0;
  border-radius: 7px;
  background: #fff;
  color: #252525;
  box-shadow: 0 12px 34px rgba(0,0,0,.09);
}
.package-card.featured h3,
.package-card.featured .price strong { color: #0b523d; }
.package-card.featured .distance,
.package-card.featured .price-note,
.package-card.featured .price span { color: var(--muted); }
.package-card.featured .check-list li::before { color: var(--green); }
.package-media,
.package-card.featured .package-media {
  height: 245px;
  margin: 0 -28px 24px;
  border-radius: 0;
  border: 0;
}
.package-top { margin-top: 0; }
.package-card h3 { margin-top: 18px; font-size: 27px; }
.package-actions {
  display: grid;
  grid-template-columns: .9fr 1.15fr 1fr;
  gap: 8px;
  margin-top: 22px;
}
.package-actions a {
  display: grid;
  min-height: 42px;
  place-items: center;
  padding: 8px 10px;
  border: 0;
  border-radius: 999px;
  color: #fff !important;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}
.card-call, .card-detail { background: var(--agency-gold); }
.card-whatsapp { background: #0eaa65; }
.package-card > .package-actions { border-top: 0; padding-top: 0; }

.agency-packages { background: #fff; }
.agency-package-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.agency-package-card { overflow: hidden; border-radius: 7px; background: #fff; box-shadow: 0 12px 34px rgba(0,0,0,.1); }
.agency-package-image { position: relative; height: 245px; overflow: hidden; background: #eee; }
.agency-package-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.agency-package-card:hover img { transform: scale(1.035); }
.agency-package-image > span { position: absolute; top: 16px; left: 16px; padding: 5px 12px; border-radius: 3px; background: var(--agency-gold); color: #fff; font-weight: 700; }
.agency-package-body { padding: 30px; }
.agency-package-body h3 { margin: 0 0 10px; color: var(--agency-charcoal); font-size: 28px; line-height: 1.2; }
.agency-package-body > p { min-height: 58px; color: #626262; }
.agency-package-body ul { margin: 18px 0 0; padding: 0; list-style: none; }
.agency-package-body li { padding: 5px 0; }
.agency-package-body li::before { content: "✓"; margin-right: 8px; color: #0b7d58; font-weight: 700; }

.pillars-section { padding: 90px 0; background: var(--agency-cream); }
.pillars-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px; max-width: 1000px; margin: 42px auto 0; }
.pillars-grid article { padding: 36px 15px 28px; border-radius: 10px; background: #fff; text-align: center; box-shadow: 0 8px 18px rgba(92,67,10,.11); }
.pillars-grid article > span { display: block; color: #d79e00; font-size: 52px; line-height: 1; }
.pillars-grid h3 { margin: 24px 0 2px; color: #5c441f; font-size: 25px; }
.pillars-grid p { margin: 0; color: #8a7a62; }

.airline-options { padding: 80px 0 90px; background: #fff; }
.airline-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 40px; }
.airline-grid span { display: grid; min-height: 100px; place-items: center; padding: 15px; border: 6px solid #f0f0f0; color: #34425a; font-family: Arial, sans-serif; font-size: 20px; font-weight: 800; text-align: center; }

.service-area-section {
  background-color: #f6faf2;
  background-image: linear-gradient(45deg, rgba(11,82,61,.035) 25%, transparent 25%, transparent 75%, rgba(11,82,61,.035) 75%), linear-gradient(45deg, rgba(11,82,61,.035) 25%, transparent 25%, transparent 75%, rgba(11,82,61,.035) 75%);
  background-position: 0 0, 18px 18px;
  background-size: 36px 36px;
}
.service-area-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 45px; }
.service-office { display: flex; flex-direction: column; padding: 44px; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.07); }
.service-office h3 { margin: 4px 0 24px; color: #2f3a31; font-size: 34px; }
.office-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.office-list a { display: grid; grid-template-columns: 30px 1fr; column-gap: 8px; padding: 16px; border-radius: 8px; background: #f4f8f1; color: #203628; }
.office-list a:last-child { grid-column: 1 / -1; }
.office-list span { grid-row: 1 / 3; color: #16844f; font-size: 20px; }
.office-list b, .office-list small { grid-column: 2; }
.office-list small { color: #6c776e; overflow-wrap: anywhere; }
.office-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: auto; padding-top: 30px; border-top: 1px solid #dfe7dc; text-align: center; }
.office-facts strong { display: block; color: var(--agency-gold-dark); font-size: 25px; }
.office-facts span { display: block; color: #59635b; font-size: 14px; }
.why-card { position: relative; min-height: 650px; overflow: hidden; background: #132a22; }
.why-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.why-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,28,22,.96), rgba(10,28,22,.72) 62%, rgba(10,28,22,.3)); }
.why-overlay { position: relative; z-index: 1; max-width: 520px; padding: 54px 48px; color: #fff; }
.why-overlay h3 { margin: 5px 0 25px; font-size: 42px; line-height: 1.1; }
.why-overlay ul { display: grid; gap: 12px; margin: 0 0 30px; padding: 0; list-style: none; }
.why-overlay li::before { content: "✓"; margin-right: 10px; color: #f0c247; font-weight: 800; }
.why-overlay > a { display: inline-block; padding: 11px 20px; border-radius: 999px; background: var(--agency-gold); color: #fff; font-weight: 700; }

@media (max-width: 1120px) {
  .agency-head-inner { grid-template-columns: 1fr 1fr; }
  .agency-assurance { display: none; }
  .agency-nav .desktop-nav > a,
  .agency-nav .nav-dropdown > button { padding-inline: 10px; font-size: 15px; }
  .planner-grid { grid-template-columns: repeat(2, 1fr); }
  .package-grid,
  .agency-package-grid { grid-template-columns: repeat(2, 1fr); }
  .pillars-grid { gap: 16px; }
  .airline-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 760px) {
  body { font-size: 17px; }
  .agency-topbar-inner { min-height: 34px; justify-content: center; text-align: center; }
  .agency-topbar p { font-size: 13px; }
  .agency-topbar-inner > div { display: none; }
  .agency-head-inner { min-height: 74px; grid-template-columns: 1fr auto; gap: 10px; }
  .agency-head .brand-logo { width: 58px; height: 58px; flex-basis: 58px; }
  .agency-head .brand strong { font-size: 26px; }
  .agency-head .brand small { font-size: 9px; }
  .agency-contact { align-items: flex-end; }
  .agency-contact a:first-child { font-size: 16px; }
  .agency-contact a:last-child { display: none; }
  .agency-nav .nav-wrap { height: 54px; justify-content: space-between; }
  .agency-nav .desktop-nav, .nav-quote { display: none; }
  .agency-nav .mobile-menu { display: block; margin-left: auto; }
  .agency-nav .mobile-menu summary { color: #fff; }
  .agency-nav .mobile-menu nav { top: calc(100% + 10px); right: 0; }
  .hero { min-height: 670px; }
  .hero h1 { font-size: clamp(44px, 13vw, 62px); }
  .trip-planner { padding-bottom: 60px; background: linear-gradient(180deg, #efe4cf 0 70px, #fff 70px); }
  .planner-card { margin-top: -18px; padding: 28px 20px; }
  .planner-heading h2 { font-size: 34px; }
  .planner-grid { grid-template-columns: 1fr; gap: 15px; }
  .planner-wide { grid-column: auto; }
  .section { padding-block: 72px; }
  .package-grid,
  .agency-package-grid,
  .service-area-grid { grid-template-columns: 1fr; }
  .package-media,
  .package-card.featured .package-media { height: 230px; margin-inline: -22px; }
  .package-card, .package-card.featured { padding: 0 22px 24px; }
  .package-actions { grid-template-columns: 1fr; }
  .package-actions a { min-height: 45px; }
  .agency-package-image { height: 230px; }
  .agency-package-body { padding: 25px 22px; }
  .pillars-section { padding: 70px 0; }
  .pillars-grid { grid-template-columns: repeat(2, 1fr); }
  .pillars-grid article:last-child { grid-column: 1 / -1; }
  .airline-grid { grid-template-columns: repeat(2, 1fr); }
  .airline-grid span { min-height: 82px; font-size: 16px; }
  .service-office { padding: 28px 20px; }
  .service-office h3 { font-size: 30px; }
  .office-list { grid-template-columns: 1fr; }
  .office-list a:last-child { grid-column: auto; }
  .office-facts { grid-template-columns: 1fr; }
  .why-card { min-height: 620px; }
  .why-overlay { padding: 42px 24px; }
  .why-overlay h3 { font-size: 36px; }
}

@media (max-width: 420px) {
  .agency-head .brand span { display: block; }
  .agency-contact a:first-child { font-size: 14px; }
  .planner-card { padding-inline: 16px; }
  .pillars-grid { gap: 12px; }
  .pillars-grid article { padding-inline: 8px; }
}

/* Four-column agency footer */
.agency-footer {
  overflow: hidden;
  background: #353536;
  color: rgba(255,255,255,.78);
  font-family: Arial, "Li Ador Noirrit", "SolaimanLipi", sans-serif;
}

.footer-columns {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.25fr;
  gap: clamp(38px, 5vw, 88px);
  padding-top: 76px;
  padding-bottom: 68px;
}

.footer-columns section { min-width: 0; }
.footer-columns h2 {
  position: relative;
  margin: 0 0 26px;
  padding-left: 17px;
  color: #fff;
  font: 700 16px/1.3 Arial, sans-serif;
}
.footer-columns h2::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--agency-gold);
}
.footer-columns p { margin: 0; color: rgba(255,255,255,.72); font-size: 15px; line-height: 1.8; }
.footer-columns nav,
.footer-columns address { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.footer-columns address { margin: 0; font-style: normal; }
.footer-columns address p { margin-bottom: 5px; }
.footer-columns a { color: rgba(255,255,255,.84); font-size: 15px; }
.footer-columns nav a:hover,
.footer-columns address a:hover,
.footer-read-more:hover { color: #f1c84f; transform: translateX(2px); }
.footer-read-more { display: inline-block; margin-top: 18px; color: #e8bd3d !important; font-weight: 700; }
.footer-contact-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.footer-contact-actions a {
  display: grid;
  min-height: 36px;
  place-items: center;
  padding: 6px 12px;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.footer-contact-actions a:hover { border-color: var(--agency-gold); background: var(--agency-gold); }
.footer-copyright { background: rgba(255,255,255,.045); border-top: 1px solid rgba(255,255,255,.03); }
.footer-copyright .container {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  color: rgba(255,255,255,.78);
  font-size: 13px;
}
.footer-copyright .developer-credit { color: rgba(255,255,255,.68); }
.footer-copyright .developer-credit a { color: #e8bd3d; }
.back-to-top {
  position: fixed;
  z-index: 70;
  right: 22px;
  bottom: 22px;
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 50%;
  background: #cc625c;
  color: #fff;
  font: 700 26px/1 Arial, sans-serif;
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
}
.floating-whatsapp { bottom: 84px; }

@media (max-width: 1050px) {
  .footer-columns { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .footer-columns {
    grid-template-columns: 1fr;
    gap: 42px;
    padding-top: 58px;
    padding-bottom: 50px;
  }
  .footer-columns h2 { margin-bottom: 20px; }
  .footer-copyright .container {
    min-height: 100px;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding-block: 18px;
    text-align: center;
  }
  .back-to-top { right: 14px; bottom: 76px; width: 42px; height: 42px; }
}

/* Unified site colour system */
:root {
  --green: #0b523d;
  --green-2: #0b523d;
  --green-3: #f5f2e9;
  --gold: #bd9826;
  --gold-light: #ead17a;
  --ivory: #f5f2e9;
  --paper: #fff;
  --ink: #2f3131;
  --muted: #676b69;
  --line: #ded9cc;
  --agency-gold: #bd9826;
  --agency-gold-dark: #95740f;
  --agency-charcoal: #353536;
  --agency-cream: #f5e7b7;
  --agency-soft: #f5f2e9;
}

body { background: #fff; color: var(--ink); }
.about,
.services,
.agency-packages,
.airline-options,
.inner-section,
.package-catalog,
.contact-main,
.legal-content-section { background: #fff; }

.packages-section,
.faq-section,
.values-section,
.credibility-section,
.comparison-section,
.service-area-section,
.legal-hero,
.map-section { background: var(--agency-soft); background-image: none; }

.process-section,
.review-section,
.contact-section,
.inner-cta,
.umrah-section { background: var(--green); }

.trust-strip,
.planner-submit { background: var(--agency-charcoal); }
.pillars-section { background: var(--agency-cream); }
.agency-nav,
.button,
.card-call,
.card-detail,
.agency-package-image > span,
.why-overlay > a { background: var(--agency-gold); }

.button:hover,
.card-call:hover,
.card-detail:hover,
.why-overlay > a:hover { background: var(--agency-gold-dark); }

.catalog-card,
.catalog-card.featured,
.package-card,
.package-card.featured,
.agency-package-card,
.services-grid article,
.credibility-grid article,
.service-office,
.inquiry-card,
.contact-info-grid > div,
.related-grid a,
.package-summary > div,
.pillars-grid article {
  background: #fff;
  color: var(--ink);
  border-color: var(--line);
}

.catalog-card.featured h3,
.catalog-card.featured .catalog-price,
.catalog-card.featured dt,
.catalog-card.featured dd,
.catalog-card.featured li,
.package-card.featured h3,
.package-card.featured .price strong { color: inherit; }
.catalog-card.featured .check-list li::before,
.package-card.featured .check-list li::before { color: var(--green); }
.quote-box,
.notice,
.verification-note,
.office-list a { background: var(--agency-soft); }
.back-to-top { background: var(--agency-gold); }
.back-to-top:hover { background: var(--agency-gold-dark); }
.agency-footer { background: var(--agency-charcoal); }

/* Compact rhythm and card corrections */
.agency-topbar-inner { min-height: 32px; }
.agency-head-inner { min-height: 82px; }
.agency-head .brand-logo { width: 64px; height: 64px; flex-basis: 64px; }
.agency-head .brand strong { font-size: 30px; }
.agency-nav .nav-wrap { height: 54px; }
.agency-nav .desktop-nav > a,
.agency-nav .nav-dropdown > button { padding-block: 16px; }

.hero { min-height: 530px; }
.hero-grid { gap: 52px; padding-block: 65px; }
.hero h1 { font-size: clamp(48px, 5.5vw, 74px); }
.hero-lead { margin-bottom: 24px; }

.trip-planner { padding-bottom: 58px; }
.planner-card { padding: clamp(28px, 3vw, 42px); }
.planner-heading { margin-bottom: 24px; }
.planner-heading h2 { font-size: clamp(32px, 3.5vw, 44px); }
.planner-grid { gap: 14px; }
.planner-grid input { min-height: 48px; }
.planner-grid textarea { min-height: 78px; }
.planner-submit { margin-top: 20px; }

.section { padding-block: 68px; }
.section-heading { margin-bottom: 36px; }
.split-heading { gap: 42px; margin-bottom: 36px; }
.section-heading h2 { font-size: clamp(34px, 4vw, 50px); }
.trust-grid { min-height: 78px; }

.package-grid,
.agency-package-grid { gap: 20px; align-items: start; }
.package-card,
.package-card.featured { padding: 0 22px 22px; }
.package-media,
.package-card.featured .package-media { height: 205px; margin: 0 -22px 18px; }
.package-card h3,
.package-card.featured h3 { margin: 14px 0 4px; color: var(--green); font-size: 24px; }
.distance,
.package-card.featured .distance { min-height: 0; margin: 0; color: var(--muted); }
.price,
.package-card.featured .price { margin-top: 15px; padding-top: 14px; border-top-color: var(--line); }
.price strong,
.package-card.featured .price strong { color: var(--green); font-size: 29px; }
.price span,
.price-note,
.package-card.featured .price span,
.package-card.featured .price-note { color: var(--muted); }
.package-card .check-list { margin: 14px 0; }
.featured .package-top b,
.featured .distance,
.featured .price-note,
.featured .check-list li,
.package-card.featured .check-list li { color: var(--muted); }
.package-actions { gap: 7px; margin-top: 14px; }
.package-actions a { min-height: 39px; padding: 7px 8px; font-size: 13px; }
.package-note { margin-top: 16px; padding: 15px 18px; }

.agency-package-image { height: 205px; }
.agency-package-body { padding: 23px 22px; }
.agency-package-body h3 { font-size: 25px; }
.agency-package-body > p { min-height: 0; margin-bottom: 10px; }
.agency-package-body ul { margin-top: 10px; }

.services-grid article { min-height: 0; padding: 26px; }
.services-grid article h3 { margin: 12px 0 8px; }
.process-grid { gap: 60px; padding-block: 68px; }
.credibility-grid article { min-height: 0; padding: 28px; }
.verification-note { margin-top: 24px; }
.review-grid { gap: 60px; }
.faqs details { padding: 17px 0; }
.contact-grid { gap: 65px; padding-block: 70px; }

.pillars-section { padding: 64px 0; }
.pillars-grid { margin-top: 30px; gap: 18px; }
.pillars-grid article { padding: 27px 12px 22px; }
.pillars-grid article > span { font-size: 42px; }
.pillars-grid h3 { margin-top: 16px; }
.airline-options { padding: 62px 0 68px; }
.airline-grid { margin-top: 28px; }
.airline-grid span { min-height: 78px; border-width: 4px; font-size: 17px; }
.service-area-grid { margin-top: 30px; }
.service-office { padding: 32px; }
.why-card { min-height: 520px; }
.why-overlay { padding: 40px 36px; }

.page-hero { min-height: 350px; }
.page-hero-content { padding-block: 62px 48px; }
.page-hero-content h1 { font-size: clamp(42px, 6vw, 68px); }
.catalog-grid { gap: 18px; align-items: start; }
.catalog-card,
.catalog-card.featured { padding: 0 22px 22px; color: var(--ink); }
.catalog-card .package-media,
.catalog-card.featured .package-media { height: 205px; margin: 0 -22px 18px; }
.catalog-card h3,
.catalog-card.featured h3 { margin: 14px 0 5px; color: var(--green); font-size: 24px; }
.catalog-card .catalog-price,
.catalog-card.featured .catalog-price { color: var(--green); font-size: 27px; }
.catalog-card.featured .catalog-price small,
.catalog-card.featured dt,
.catalog-card.featured dd,
.catalog-card.featured .check-list li { color: var(--muted); }
.catalog-card dl { margin: 14px 0 5px; }
.catalog-card .check-list { margin: 13px 0 17px; }
.package-summary > div,
.contact-info-grid > div { min-height: 0; padding: 20px; }
.feature-columns { gap: 22px; padding: 22px; }
.related-grid a { min-height: 0; padding: 18px; }
.inner-cta-grid { min-height: 240px; gap: 45px; }
.map-section { min-height: 360px; }

.footer-columns { gap: clamp(32px, 4vw, 65px); padding-top: 58px; padding-bottom: 50px; }

@media (max-width: 760px) {
  .agency-head-inner { min-height: 68px; }
  .agency-head .brand-logo { width: 52px; height: 52px; flex-basis: 52px; }
  .agency-nav .nav-wrap { height: 48px; }
  .hero { min-height: auto; }
  .hero-grid { padding-block: 54px; }
  .trip-planner { padding-bottom: 46px; }
  .section { padding-block: 52px; }
  .section-heading { margin-bottom: 28px; }
  .split-heading { gap: 18px; margin-bottom: 28px; }
  .package-media,
  .package-card.featured .package-media,
  .agency-package-image,
  .catalog-card .package-media,
  .catalog-card.featured .package-media { height: 190px; }
  .process-grid,
  .contact-grid { gap: 38px; padding-block: 52px; }
  .page-hero { min-height: 285px; }
  .page-hero-content { padding-block: 48px 38px; }
  .inner-cta-grid { min-height: 0; padding-block: 52px; }
  .why-card { min-height: 500px; }
  .footer-columns { padding-top: 48px; padding-bottom: 42px; }
}

/* Green navigation and action buttons */
.agency-nav { background: var(--green); }
.agency-nav .desktop-nav > a:hover,
.agency-nav .desktop-nav > a.active,
.agency-nav .nav-dropdown > button:hover,
.agency-nav .nav-dropdown > button.active,
.agency-nav .nav-dropdown.is-open > button { background: rgba(255,255,255,.12); }

.agency-nav .nav-quote {
  border-color: var(--agency-gold);
  background: var(--agency-gold);
  color: #fff;
}
.agency-nav .nav-quote:hover {
  border-color: var(--agency-gold-dark);
  background: var(--agency-gold-dark);
}

.button,
.card-call,
.card-detail,
.planner-submit,
.why-overlay > a,
.back-to-top {
  background: var(--green);
  color: #fff;
}

.button:hover,
.card-call:hover,
.card-detail:hover,
.planner-submit:hover,
.why-overlay > a:hover,
.back-to-top:hover { background: #073d2e; }

.hero .button,
.contact-section .button,
.inner-cta .button,
.review-section .button {
  border: 1px solid rgba(255,255,255,.45);
  background: #0d6b50;
}

.hero .button:hover,
.contact-section .button:hover,
.inner-cta .button:hover,
.review-section .button:hover { background: #07513c; }

.button-whatsapp,
.card-whatsapp { background: #0eaa65; }
.button-whatsapp:hover,
.card-whatsapp:hover { background: #087d4a; }

/* Hajj booking ticker */
.agency-topbar-inner { overflow: hidden; }
.booking-ticker {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  white-space: nowrap;
}
.booking-ticker span {
  display: inline-block;
  padding-left: 100%;
  color: #fff;
  font-weight: 700;
  animation: hajj-booking-ticker 22s linear infinite;
  animation-delay: -11s;
  will-change: transform;
}
.booking-ticker:hover span { animation-play-state: paused; }

@keyframes hajj-booking-ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
  .booking-ticker { text-align: center; text-overflow: ellipsis; }
  .booking-ticker span { max-width: 100%; padding-left: 0; animation: none; }
}

@media (max-width: 760px) {
  .booking-ticker { display: block !important; width: 100%; }
  .booking-ticker span { animation-duration: 18s; }
}

/* Premium emerald palette and compact mobile sticky header */
:root {
  --green: #074837;
  --green-2: #0a5b45;
  --gold: #b9922f;
  --gold-light: #e5ca78;
  --ivory: #f7f3e9;
  --paper: #fffefa;
  --ink: #262c29;
  --muted: #68716d;
  --line: #ded8c9;
  --agency-gold: #b9922f;
  --agency-gold-dark: #8d6c17;
  --agency-charcoal: #292d2b;
  --agency-cream: #f3e5b8;
  --agency-soft: #f7f3e9;
}

body { background: #fbfaf6; }
.agency-topbar { background: #292d2b; }
.agency-head {
  border-bottom: 1px solid rgba(7,72,55,.08);
  background: #fffefa;
}
.agency-nav { background: #074837; }
.site-header { box-shadow: 0 8px 24px rgba(24,38,32,.09); }
.agency-nav .nav-quote {
  border-color: #c39a32;
  background: linear-gradient(135deg, #caa33d, #a87f1c);
  box-shadow: 0 7px 18px rgba(117,83,8,.2);
}
.agency-nav .nav-quote:hover { background: linear-gradient(135deg, #b68d27, #8d6813); }

.button,
.card-call,
.card-detail,
.planner-submit,
.why-overlay > a,
.back-to-top { background: #074837; }
.button:hover,
.card-call:hover,
.card-detail:hover,
.planner-submit:hover,
.why-overlay > a:hover,
.back-to-top:hover { background: #043529; }
.eyebrow,
.package-top span { color: #9a7417; }
.package-top span { border-color: rgba(185,146,47,.5); }
.package-card,
.agency-package-card,
.catalog-card,
.planner-card,
.service-office,
.pillars-grid article {
  box-shadow: 0 14px 36px rgba(30,45,38,.09);
}
.agency-footer { background: #292d2b; }
.footer-copyright { background: rgba(0,0,0,.12); }

@media (max-width: 760px) {
  .site-header .agency-nav {
    max-height: 48px;
    overflow: visible;
    opacity: 1;
    transform: translateY(0);
    transition: max-height .22s ease, opacity .18s ease, transform .22s ease;
  }
  .site-header.is-mobile-scrolled .agency-nav {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
  }
  .site-header.is-mobile-scrolled {
    box-shadow: 0 8px 25px rgba(18,34,28,.14);
  }
  .site-header.is-mobile-scrolled .agency-head-inner { min-height: 62px; }
  .site-header.is-mobile-scrolled .agency-head .brand-logo {
    width: 47px;
    height: 47px;
    flex-basis: 47px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header .agency-nav { transition: none; }
}

.mobile-menu-close { display: none; }

@media (max-width: 760px) {
  body.mobile-menu-open { overflow: hidden; }

  .agency-nav .mobile-menu[open]::before {
    content: "";
    position: fixed;
    z-index: 100;
    inset: 0;
    background: rgba(9,22,17,.58);
    backdrop-filter: blur(3px);
  }

  .agency-nav .mobile-menu nav {
    position: fixed;
    z-index: 101;
    top: 0;
    right: 0;
    display: flex !important;
    width: min(340px, 86vw);
    max-width: none;
    height: 100vh;
    height: 100dvh;
    padding: 78px 24px 30px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 0;
    border-left: 1px solid rgba(185,146,47,.25);
    border-radius: 0;
    background: #fffefa;
    box-shadow: -20px 0 55px rgba(6,24,17,.24);
    opacity: 0;
    visibility: hidden;
    transform: translateX(105%);
    transition: transform .28s ease, opacity .22s ease, visibility .28s;
  }

  .agency-nav .mobile-menu[open] nav {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }

  .agency-nav .mobile-menu nav a,
  .agency-nav .mobile-menu nav strong {
    display: block;
    padding: 12px 4px;
    border-bottom: 1px solid #e7e1d5;
    color: #29332f;
    font-size: 17px;
  }
  .agency-nav .mobile-menu nav strong { color: #8d6c17; }
  .agency-nav .mobile-menu nav .sub-link {
    padding-left: 20px;
    color: #626b67;
    font-size: 15px;
  }
  .agency-nav .mobile-menu nav a:hover { color: var(--green); }

  .mobile-menu-close {
    position: absolute;
    top: 20px;
    right: 20px;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(7,72,55,.16);
    border-radius: 50%;
    background: #f4f0e6;
    color: var(--green);
    font: 400 30px/1 Arial, sans-serif;
    cursor: pointer;
  }
  .mobile-menu-close:hover { background: #ece4d3; }
}

@media (prefers-reduced-motion: reduce) {
  .agency-nav .mobile-menu nav { transition: none; }
}

/* Consistent premium SVG icon system */
.ui-icon {
  --icon: none;
  display: inline-block;
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  margin-right: .42em;
  vertical-align: -.12em;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.icon-phone { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.69 2.8a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.33 1.85.56 2.81.69A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E"); }
.icon-mail { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); }
.icon-user { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E"); }
.icon-calendar { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18'/%3E%3C/svg%3E"); }
.icon-moon { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3 7 7 0 0 0 21 12.8z'/%3E%3C/svg%3E"); }
.icon-bed { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 5v16M21 12v9M3 17h18M7 12h12a2 2 0 0 1 2 2v3H3v-3a2 2 0 0 1 2-2h2z'/%3E%3Cpath d='M7 12V8h5a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E"); }
.icon-users { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='9' cy='8' r='4'/%3E%3Cpath d='M2 21a7 7 0 0 1 14 0M16 4a4 4 0 0 1 0 8M17 15a6 6 0 0 1 5 6'/%3E%3C/svg%3E"); }
.icon-info { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7h.01'/%3E%3C/svg%3E"); }
.icon-pin { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 5-8 11-8 11S4 15 4 10a8 8 0 1 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"); }
.icon-external { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M7 7h10v10'/%3E%3C/svg%3E"); }
.icon-arrow-right { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
.icon-chevron-down { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.icon-chevron-up { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 15 6-6 6 6'/%3E%3C/svg%3E"); }
.icon-chevron-right { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E"); }
.icon-eye { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.icon-menu { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E"); }
.icon-close { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 6 12 12M18 6 6 18'/%3E%3C/svg%3E"); }
.icon-check { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4L19 6'/%3E%3C/svg%3E"); }
.icon-heart { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1.1-1.1a5.5 5.5 0 0 0-7.8 7.8l1.1 1.1L12 21l7.8-7.5 1.1-1.1a5.5 5.5 0 0 0-.1-7.8z'/%3E%3C/svg%3E"); }
.icon-faith { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 15.5A8 8 0 1 1 10.5 5 6.5 6.5 0 0 0 19 15.5z'/%3E%3Cpath d='m17.5 5 .5 1.4 1.5.1-1.2.9.4 1.5-1.2-.9-1.3.9.5-1.5-1.2-.9 1.5-.1z'/%3E%3C/svg%3E"); }
.icon-prayer { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13V8a2 2 0 0 1 4 0v3-6a2 2 0 0 1 4 0v6-4a2 2 0 0 1 4 0v5-2a2 2 0 0 1 4 0v4c0 4-3 7-7 7h-2c-4 0-7-3-7-7z'/%3E%3C/svg%3E"); }
.icon-kaaba { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 8 8-4 8 4v11l-8 2-8-2z'/%3E%3Cpath d='M4 10h16M4 13h16M12 4v17'/%3E%3C/svg%3E"); }

.package-actions a { display: flex; align-items: center; justify-content: center; }
.nav-dropdown .ui-icon,
.text-link .ui-icon,
.footer-read-more .ui-icon,
.related-grid small .ui-icon { margin-right: 0; margin-left: .42em; }
.back-to-top .ui-icon,
.mobile-menu-close .ui-icon,
.pillars-grid article > .ui-icon { margin: 0; }
.mobile-menu-close .ui-icon { width: 22px; height: 22px; }
.back-to-top .ui-icon { width: 24px; height: 24px; }
.pillars-grid article > .ui-icon { display: block; width: 1em; height: 1em; margin-inline: auto; }
.agency-contact a,
.agency-topbar a,
.footer-columns address a { display: inline-flex; align-items: center; }

.check-list li::before,
.document-list li::before,
.agency-package-body li::before,
.why-overlay li::before {
  content: "";
  display: inline-block;
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  margin-top: .28em;
  margin-right: 9px;
  background: currentColor;
  -webkit-mask: var(--check-svg) center / contain no-repeat;
  mask: var(--check-svg) center / contain no-repeat;
}
:root {
  --check-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4L19 6'/%3E%3C/svg%3E");
}

.icon-pause { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='6' y='5' width='4' height='14' rx='1'/%3E%3Crect x='14' y='5' width='4' height='14' rx='1'/%3E%3C/svg%3E"); }
.icon-play { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='m8 5 11 7-11 7z'/%3E%3C/svg%3E"); }

/* Responsive bounded video hero */
.hero {
  min-height: 0;
  padding: 34px 0 42px;
  overflow: hidden;
  color: var(--ink);
  background: linear-gradient(135deg, #fbfaf5, #f4efe3);
}
.hero::before,
.hero::after { display: none; }
.hero-layout {
  position: relative;
  z-index: 1;
  width: min(92vw, 1500px);
  display: grid;
  grid-template-columns: minmax(420px, .9fr) minmax(540px, 1.1fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
}
.hero .hero-copy {
  width: 100%;
  max-width: none;
  padding: clamp(30px, 3.4vw, 52px);
  overflow: visible;
  border: 1px solid rgba(7,72,55,.12);
  border-radius: 24px;
  background: rgba(255,254,250,.95);
  box-shadow: 0 20px 55px rgba(24,43,35,.09);
  backdrop-filter: none;
}
.hero .eyebrow { color: var(--green-2); }
.hero h1 {
  max-width: 760px;
  margin: 0;
  overflow-wrap: normal;
  color: var(--green);
  font-size: clamp(46px, 4.5vw, 72px);
  line-height: 1.08;
}
.hero h1 em { color: var(--agency-gold); }
.hero-lead { max-width: 650px; color: var(--muted); }
.hero-proof { margin-top: 34px; border-top-color: var(--line); }
.hero-proof div { border-right-color: var(--line); }
.hero-proof strong { color: var(--green); }
.hero-proof span { color: var(--muted); }
.hero-media {
  position: relative;
  min-width: 0;
  min-height: 520px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid rgba(185,146,47,.2);
  border-radius: 72px 18px 72px 18px;
  background: #163a2f;
  box-shadow: 0 24px 65px rgba(18,43,34,.16);
}
.hero-video,
.hero-video-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-video { z-index: 0; object-fit: cover; object-position: center; }
.hero-video-shade {
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(4,35,27,.08), rgba(4,35,27,.58));
}
.hero .hero-card {
  position: absolute;
  z-index: 2;
  right: 24px;
  bottom: 24px;
  width: min(355px, calc(100% - 48px));
  margin: 0;
  padding: 25px 27px;
  border: 1px solid rgba(255,255,255,.4);
  border-top: 4px solid var(--agency-gold);
  border-radius: 12px;
  background: rgba(255,254,250,.95);
  box-shadow: 0 18px 45px rgba(3,24,17,.22);
  backdrop-filter: blur(10px);
}
.hero .hero-card h2 { margin-bottom: 16px; font-size: 25px; }
.hero .hero-card .check-list { margin-block: 12px 16px; }
.hero .hero-card .check-list li { margin-block: 5px; }
.hero-video-toggle {
  position: absolute;
  z-index: 3;
  top: 18px;
  right: 18px;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 50%;
  background: rgba(5,48,36,.76);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(8px);
}
.hero-video-toggle .ui-icon { width: 18px; height: 18px; margin: 0; }
.hero-video-toggle .toggle-play { display: none; }
.hero-video-toggle.is-paused .toggle-pause { display: none; }
.hero-video-toggle.is-paused .toggle-play { display: inline-block; }
.media-credit { display: block; margin-top: 14px; color: rgba(255,255,255,.48); font-size: 10px; line-height: 1.5; }
.media-credit a { color: rgba(255,255,255,.7); font-size: inherit; text-decoration: underline; text-underline-offset: 2px; }

@media (min-width: 1800px) {
  .hero-layout { width: min(90vw, 1900px); }
}
@media (min-width: 2600px) {
  .hero-layout { width: 82vw; max-width: none; }
}
@media (max-width: 1100px) {
  .hero-layout { grid-template-columns: minmax(360px, .85fr) minmax(470px, 1.15fr); }
  .hero h1 { font-size: clamp(44px, 5.5vw, 62px); }
  .hero-media { min-height: 500px; }
}
@media (max-width: 900px) {
  .hero { padding-top: 26px; }
  .hero-layout { width: min(100% - 32px, 760px); grid-template-columns: 1fr; gap: 22px; }
  .hero .hero-copy { padding: 34px 30px; }
  .hero-media { min-height: 520px; aspect-ratio: 16 / 11; }
}
@media (max-width: 600px) {
  .hero { padding: 18px 0 30px; }
  .hero-layout { width: calc(100% - 24px); }
  .hero .hero-copy { padding: 28px 20px; border-radius: 18px; }
  .hero h1 { font-size: clamp(40px, 12vw, 54px); overflow-wrap: normal; }
  .hero-actions { flex-direction: column; gap: 10px; }
  .hero-actions .button { width: 100%; }
  .hero-proof { margin-top: 26px; }
  .hero-proof div { padding-right: 12px; margin-right: 12px; }
  .hero-media {
    min-height: 620px;
    aspect-ratio: auto;
    display: grid;
    grid-template-rows: 265px auto;
    overflow: hidden;
    border-radius: 40px 12px 40px 12px;
  }
  .hero-video,
  .hero-video-shade { bottom: auto; height: 280px; }
  .hero .hero-card {
    position: relative;
    right: auto;
    bottom: auto;
    grid-row: 2;
    align-self: start;
    width: calc(100% - 28px);
    margin: -26px 14px 14px;
    padding: 23px 20px;
  }
  .hero-video-toggle { top: 14px; right: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-video-toggle { display: none; }
}

/* Talbiyah floating audio player */
.audio-dock {
  position: fixed;
  z-index: 92;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-family: "Li Ador Noirrit", sans-serif;
}
.audio-dock-trigger {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 126px;
  min-height: 46px;
  padding: 7px 9px 7px 12px;
  border: 1px solid rgba(205,163,57,.45);
  border-radius: 999px;
  background: rgba(5,67,50,.96);
  color: #fff;
  box-shadow: 0 12px 30px rgba(4,42,32,.22);
  cursor: pointer;
  backdrop-filter: blur(12px);
}
.audio-wave-icon { display: flex; align-items: center; gap: 2px; height: 20px; }
.audio-wave-icon i { width: 2px; height: 8px; border-radius: 3px; background: #e4bd52; }
.audio-wave-icon i:nth-child(2) { height: 15px; }
.audio-wave-icon i:nth-child(3) { height: 11px; }
.audio-wave-icon i:nth-child(4) { height: 17px; }
.audio-dock.is-playing .audio-wave-icon i { animation: audio-wave .75s ease-in-out infinite alternate; }
.audio-dock.is-playing .audio-wave-icon i:nth-child(2) { animation-delay: -.35s; }
.audio-dock.is-playing .audio-wave-icon i:nth-child(3) { animation-delay: -.2s; }
.audio-dock.is-playing .audio-wave-icon i:nth-child(4) { animation-delay: -.5s; }
@keyframes audio-wave { to { height: 5px; } }
.audio-trigger-label { font-size: 14px; font-weight: 700; white-space: nowrap; }
.audio-mini-switch,
.audio-power {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 20px;
  margin-left: auto;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.22);
}
.audio-mini-switch i,
.audio-power i {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transform: translateX(14px);
  transition: transform .2s ease;
}
.audio-dock.is-disabled .audio-mini-switch i,
.audio-power[aria-checked="false"] i { transform: translateX(0); }
.audio-dock.is-disabled .audio-wave-icon { opacity: .45; }
.audio-dock.is-autoplay-blocked .audio-dock-trigger {
  box-shadow: 0 0 0 0 rgba(211,169,60,.42), 0 12px 30px rgba(4,42,32,.22);
  animation: audio-attention 1.7s ease-out infinite;
}
@keyframes audio-attention {
  70%, 100% { box-shadow: 0 0 0 11px rgba(211,169,60,0), 0 12px 30px rgba(4,42,32,.22); }
}
.audio-panel {
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  width: min(350px, calc(100vw - 178px));
  padding: 24px;
  border: 1px solid rgba(185,146,47,.28);
  border-radius: 22px;
  background: rgba(255,254,250,.98);
  color: #27322e;
  box-shadow: 0 24px 60px rgba(5,48,36,.22);
  opacity: 0;
  visibility: hidden;
  transform: translate(-8px, -50%);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  backdrop-filter: blur(14px);
}
.audio-dock.is-open .audio-panel { opacity: 1; visibility: visible; transform: translate(0, -50%); }
.audio-panel-close {
  position: absolute;
  top: 13px;
  right: 13px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  padding: 0;
  border: 1px solid #e6dfd0;
  border-radius: 50%;
  background: #f7f3e9;
  color: var(--green);
  cursor: pointer;
}
.audio-panel-close .ui-icon { width: 17px; height: 17px; margin: 0; }
.audio-kicker { margin: 0 42px 5px 0; color: #a47c1b; font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.audio-panel h2 { margin: 0 32px 8px 0; color: var(--green); font-size: 21px; line-height: 1.35; }
.audio-arabic { margin: 0 0 18px; color: #626b67; font-family: serif; font-size: 17px; line-height: 1.8; }
.audio-main-control { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 11px; padding: 12px; border-radius: 15px; background: #f3efe4; }
.audio-main-control > div { min-width: 0; }
.audio-main-control strong,
.audio-main-control span { display: block; }
.audio-main-control strong { color: #174c3e; font-family: system-ui, sans-serif; font-size: 14px; }
.audio-state { color: #767d79; font-size: 11px; }
.audio-play {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  cursor: pointer;
}
.audio-play-symbol { width: 0; height: 0; margin-left: 3px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 9px solid currentColor; }
.audio-dock.is-playing .audio-play-symbol { width: 10px; height: 12px; margin: 0; border: 0; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.audio-power { flex: 0 0 auto; background: #0c8a63; cursor: pointer; }
.audio-power[aria-checked="false"] { background: #c5c4bf; }
.audio-progress,
.audio-volume { accent-color: #0b7456; cursor: pointer; }
.audio-progress { width: 100%; margin: 16px 0 8px; }
.audio-volume-row { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 8px; }
.audio-volume-row > span { color: #8b908e; font-family: system-ui, sans-serif; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.audio-mute { display: grid; width: 32px; height: 32px; place-items: center; padding: 0; border: 0; background: transparent; color: var(--green); cursor: pointer; }
.audio-speaker-icon { position: relative; width: 9px; height: 10px; border-radius: 2px 0 0 2px; background: currentColor; }
.audio-speaker-icon::before { content: ""; position: absolute; left: 7px; top: -3px; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 8px solid currentColor; }
.audio-speaker-icon::after { content: ""; position: absolute; left: 18px; top: -4px; width: 8px; height: 16px; border: 2px solid currentColor; border-left: 0; border-radius: 0 12px 12px 0; }
.audio-dock.is-muted .audio-speaker-icon::after { left: 19px; top: 1px; width: 10px; height: 2px; border: 0; border-radius: 2px; background: currentColor; transform: rotate(45deg); }
.audio-notice { display: block; margin-top: 12px; color: #8a8e8c; font-size: 10px; line-height: 1.5; }

@media (max-width: 760px) {
  body.mobile-menu-open {
    position: fixed;
    inset-inline: 0;
    top: var(--menu-scroll-lock, 0);
    width: 100%;
    overflow: hidden;
  }
  .agency-nav .mobile-menu nav {
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior-y: contain;
  }
  .audio-dock { left: 10px; top: auto; bottom: 82px; transform: none; }
  .audio-dock-trigger { min-width: 48px; width: 48px; min-height: 48px; height: 48px; justify-content: center; padding: 0; }
  .audio-trigger-label,
  .audio-mini-switch { display: none; }
  .audio-panel {
    position: fixed;
    left: 12px;
    right: 12px;
    top: auto;
    bottom: 142px;
    width: auto;
    max-height: calc(100dvh - 175px);
    overflow-y: auto;
    transform: translateY(14px);
  }
  .audio-dock.is-open .audio-panel { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .audio-dock.is-playing .audio-wave-icon i { animation: none; }
  .audio-dock.is-autoplay-blocked .audio-dock-trigger { animation: none; }
  .audio-panel,
  .audio-mini-switch i,
  .audio-power i { transition: none; }
}

/* Compact, zoom-safe Talbiyah player */
.audio-panel {
  width: 370px;
  max-width: calc(100vw - 180px);
  max-height: calc(100vh - 32px);
  padding: 20px;
  overflow-y: auto;
  border-radius: 18px;
}
.audio-panel-heading {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: 0 38px 13px 0;
}
.audio-heading-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: linear-gradient(145deg, #07533f, #0b7456);
  box-shadow: 0 7px 18px rgba(5,83,63,.17);
}
.audio-heading-mark i { width: 3px; height: 10px; border-radius: 4px; background: #e6bd51; }
.audio-heading-mark i:nth-child(2) { height: 20px; }
.audio-heading-mark i:nth-child(3) { height: 14px; }
.audio-kicker { margin: 0 0 2px; font-size: 11px; line-height: 1.2; }
.audio-panel h2 {
  margin: 0;
  color: #063f31;
  font-size: 18px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.audio-arabic {
  margin: 0 0 12px;
  padding: 9px 13px;
  border: 1px solid #e9e0ce;
  border-radius: 11px;
  background: #fbf8f0;
  color: #41534c;
  font-size: 16px;
  line-height: 1.55;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.audio-main-control {
  grid-template-columns: 40px minmax(0, 1fr) 36px;
  gap: 10px;
  padding: 10px;
  border-radius: 13px;
}
.audio-play { width: 38px; height: 38px; }
.audio-main-control strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audio-progress { margin: 11px 0 5px; }
.audio-volume-row { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 7px; }
.audio-notice { margin-top: 7px; text-align: center; }

@media (max-width: 980px) and (min-width: 761px) {
  .audio-panel {
    position: fixed;
    left: 50%;
    top: 50%;
    width: min(370px, calc(100vw - 32px));
    max-width: none;
    transform: translate(-50%, -46%);
  }
  .audio-dock.is-open .audio-panel { transform: translate(-50%, -50%); }
}

@media (max-width: 760px) {
  .audio-panel {
    left: 12px;
    right: 12px;
    bottom: 140px;
    width: auto;
    max-width: none;
    max-height: calc(100dvh - 170px);
    padding: 18px;
  }
  .audio-panel-heading { margin-right: 35px; }
  .audio-panel h2 { font-size: 17px; }
}

/* iOS Safari: viewport drawer scrolling and direct layer control */
@media (max-width: 760px) {
  body.mobile-menu-open .site-header {
    z-index: 120;
    transform: none !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  body.mobile-menu-open .site-header .agency-nav {
    max-height: 48px;
    overflow: visible;
    opacity: 1;
    pointer-events: auto;
    transform: none !important;
  }
  body.mobile-menu-open .agency-nav .mobile-menu nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    height: auto;
    min-height: 0;
    max-height: none;
    padding-bottom: calc(34px + env(safe-area-inset-bottom));
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior-y: contain;
  }
  body.mobile-menu-open .mobile-contact-bar,
  body.mobile-menu-open .audio-dock,
  body.mobile-menu-open .back-to-top {
    visibility: hidden;
    pointer-events: none;
  }
}

/* iPhone controls system volume; provide a clear mute control instead */
.audio-dock.is-ios .audio-volume-row {
  grid-template-columns: 34px minmax(0, 1fr);
  margin-top: 7px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #f5f1e7;
}
.audio-dock.is-ios .audio-volume { display: none; }
.audio-dock.is-ios .audio-volume-row > span {
  color: #66706c;
  font-family: "Li Ador Noirrit", sans-serif;
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
}