/* ─────────────────────────────────────────────────────────────
   TOKENS
   ───────────────────────────────────────────────────────────── */
:root{
  /* APPROVED BRAND COLORS — only these four are declared */
  --green-deep: #0F3B34;
  --green-med:  #154D45;
  --gold:       #D4AF37;
  --cream:      #F2E9D8;

  /* Permitted minor utility derivatives */
  --green-darker: #0A2A24;
  --gold-bright:  #E5C865;
  --cream-bright: #FAF4E5;

  /* Type */
  --display: "Playfair Display", "Cormorant Garamond", Georgia, serif;
  --serif:   "Cormorant Garamond", Georgia, serif;
  --body:    "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;
  --caps:    "Tenor Sans", "Manrope", sans-serif;

  /* Geometry */
  --max: 1280px;
  --gutter: clamp(1.5rem, 4vw, 3.5rem);

  /* Islamic pattern as data URI */
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23D4AF37' stroke-width='0.6'%3E%3Cpath d='M80 0 L96 64 L160 80 L96 96 L80 160 L64 96 L0 80 L64 64 Z'/%3E%3Cpath d='M80 16 L88 72 L144 80 L88 88 L80 144 L72 88 L16 80 L72 72 Z'/%3E%3Ccircle cx='80' cy='80' r='8'/%3E%3C/g%3E%3C/svg%3E");
}

/* ─────────────────────────────────────────────────────────────
   RESET / BASE
   ───────────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family: var(--body);
  font-weight: 400;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--green-deep);
  background: var(--cream);
  overflow-x: hidden;
}
img{ display:block; max-width:100%; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
::selection{ background: var(--gold); color: var(--green-deep); }

/* ─────────────────────────────────────────────────────────────
   UTILITIES
   ───────────────────────────────────────────────────────────── */
.container{
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.eyebrow-row{
  display:flex; align-items:center; gap:0.85rem;
  margin-bottom: 1.4rem;
}
.eyebrow-badge{
  width: 32px; height: 32px;
  background: var(--green-deep);
  display:grid; place-items:center;
  border-radius: 3px;
  flex-shrink:0;
}
.eyebrow-badge.on-dark{ background: var(--green-med); border:1px solid rgba(212,175,55,0.35); }
.eyebrow-badge svg{ width: 18px; height: 18px; }
.eyebrow-label{
  font-family: var(--serif);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  color: var(--green-deep);
}
.on-dark .eyebrow-label, .eyebrow-label.on-dark{ color: var(--gold); }

.headline{
  font-family: var(--serif);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1.05;
  color: var(--green-deep);
}
.headline em{ color: var(--gold); font-style: italic; }
.headline.on-dark{ color: var(--cream); }

.body-prose{
  font-family: var(--body);
  font-size: 0.98rem;
  line-height: 1.75;
  color: rgba(15,59,52,0.85);
  font-weight: 400;
}
.body-prose p + p{ margin-top: 1rem; }
.body-prose b, .body-prose strong{ color: var(--gold); font-weight: 600; }

.orn-divider{
  display:flex; align-items:center; justify-content:flex-start;
  gap: 0.7rem;
  margin: 1rem 0 1.4rem;
}
.orn-divider .rule{ height:1px; width:34px; background: var(--gold); }
.orn-divider .star{ color: var(--gold); font-size: 0.95rem; line-height:1; }
.orn-divider.center{ justify-content:center; }
.orn-divider.long .rule{ width:60px; }

.short-rule{
  display:block; width:80px; height:2px; background: var(--gold);
  margin: 1.1rem 0 1.4rem;
}

.left-rule{
  position: relative;
  padding-left: 1.4rem;
}
.left-rule::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0;
  width: 1px; background: var(--gold);
}

/* Photo wrap with brand tint */
.photo-wrap{
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(212, 175, 55, 0.4);
  background: var(--green-deep);
}
.photo-wrap img{
  width:100%; height:100%; object-fit:cover;
  filter: saturate(0.88) contrast(1.05);
  display:block;
  transition: transform 0.7s ease;
}
.photo-wrap::after{
  content:"";
  position:absolute; inset:0;
  background: rgba(15, 59, 52, 0.25);
  pointer-events: none;
}
.photo-wrap.hero-tint::after{ background: rgba(15,59,52,0.72); }
.photo-wrap.cta-tint::after{ background: rgba(15,59,52,0.78); }
.photo-wrap.heavy-tint::after{ background: rgba(15,59,52,0.55); }

/* Pattern overlay layer */
.pattern-bg{
  position:relative;
}
.pattern-bg::before{
  content:"";
  position:absolute; inset:0;
  background-image: var(--pattern);
  background-size: 220px 220px;
  opacity: 0.05;
  pointer-events:none;
  z-index: 0;
}
.pattern-bg > *{ position: relative; z-index: 1; }
.pattern-bg.heavier::before{ opacity: 0.07; }

/* Buttons */
.btn{
  display: inline-flex; align-items:center; gap:0.55rem;
  padding: 0.95rem 1.6rem;
  font-family: var(--caps);
  font-size: 0.8rem;
  text-transform: uppercase;
  border-radius: 2px;
  transition: all 0.28s ease;
  cursor: pointer;
  border: 1px solid var(--gold);
}
.btn-gold{
  background: var(--gold);
  color: var(--green-deep);
}
.btn-gold:hover{ background: var(--gold-bright); transform: translateY(-1px); }
.btn-ghost{
  background: transparent;
  color: var(--gold);
}
.btn-ghost:hover{ background: var(--gold); color: var(--green-deep); }
.btn-ghost-cream{
  background: transparent;
  color: var(--cream);
  border-color: var(--cream);
}
.btn-ghost-cream:hover{ background: var(--cream); color: var(--green-deep); border-color: var(--cream); }

/* Reveal */
.reveal{ opacity: 0; transform: translateY(28px); transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2,0.7,0.2,1); }
.reveal.in{ opacity: 1; transform: none; }

/* ─────────────────────────────────────────────────────────────
   SCROLL PROGRESS
   ───────────────────────────────────────────────────────────── */
#scrollProgress{
  position: fixed; top:0; left:0;
  height: 3px; width: 0%;
  background: var(--gold);
  z-index: 200;
  transition: width 0.05s linear;
}

/* ─────────────────────────────────────────────────────────────
   01 · TOP BAR
   ───────────────────────────────────────────────────────────── */
.topbar{
  background: var(--green-deep);
  color: var(--gold);
  padding: 0.6rem 0;
  text-align: center;
  font-family: var(--caps);
  font-size: 0.72rem;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(212,175,55,0.18);
}

/* ─────────────────────────────────────────────────────────────
   02 · NAV
   ───────────────────────────────────────────────────────────── */
.nav-wrap{
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(242,233,216,0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(212,175,55,0.2);
  transition: padding 0.3s ease, background 0.3s ease;
}
.nav-wrap.scrolled{
  padding-top: 0;
  padding-bottom: 0;
  background: rgba(242,233,216,0.97);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 1rem 0;
  transition: padding 0.3s ease;
  gap: 1.5rem;
}
.nav-wrap.scrolled .nav-inner{ padding: 0.7rem 0; }
.nav-logo img{ height: 44px; width: auto; }
.nav-wrap.scrolled .nav-logo img{ height: 38px; }
.nav-links{
  display: flex; align-items:center; gap: 2.2rem;
  list-style: none;
}
.nav-links a{
  font-family: var(--body);
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--green-deep);
  position: relative;
  padding: 0.4rem 0;
  transition: color 0.25s ease;
}
.nav-links a::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:0; height:1px; background: var(--gold);
  transition: width 0.32s ease;
}
.nav-links a:hover, .nav-links a.active{ color: var(--gold); }
.nav-links a:hover::after, .nav-links a.active::after{ width: 100%; }
.nav-cta{ flex-shrink:0; }
.nav-burger{
  display:none;
  width: 36px; height: 36px;
  align-items:center; justify-content:center;
  flex-direction: column; gap: 5px;
  cursor: pointer;
}
.nav-burger span{
  display:block; width: 22px; height: 1.5px;
  background: var(--green-deep);
  transition: all 0.3s ease;
}

/* ─────────────────────────────────────────────────────────────
   03 · HERO
   ───────────────────────────────────────────────────────────── */
.hero{
  position: relative;
  min-height: 92vh;
  background: var(--green-deep);
  color: var(--cream);
  overflow: hidden;
  display: grid; place-items: center;
  padding: 6rem 0 5rem;
}
.hero .photo-wrap{
  position: absolute; inset: 0;
  border: none;
  z-index: 0;
}
.hero .pattern-overlay{
  position:absolute; inset:0;
  background-image: var(--pattern);
  background-size: 240px 240px;
  opacity: 0.05;
  z-index: 1;
}
.hero-content{
  position: relative; z-index: 2;
  text-align: center;
  max-width: 920px;
  padding: 0 var(--gutter);
}
.hero-logo{ height: 90px; width: auto; margin: 0 auto 2.2rem; }
.hero-meta{
  font-family: var(--caps);
  font-size: 0.74rem;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 2.2rem;
}
.hero-title{
  font-family: var(--display);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(2.3rem, 5.8vw, 4.6rem);
  line-height: 0.96;
  color: var(--cream);
  margin-bottom: 1.6rem;
}
.hero-title em{
  font-style: italic;
  color: var(--cream);
  background: linear-gradient(transparent, transparent);
}
.hero-title .line2{ color: var(--cream); font-style: italic; }
.hero-rule{
  width: 100px; height: 2px; background: var(--gold);
  margin: 0 auto 1.8rem;
}
.hero-sub{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  line-height: 1.55;
  color: var(--cream);
  max-width: 620px;
  margin: 0 auto 2.6rem;
  opacity: 0.95;
}
.hero-buttons{
  display:flex; flex-wrap:wrap; justify-content:center; gap: 1rem;
  margin-bottom: 3.4rem;
}
.hero-scroll{
  margin-top: 1.4rem;
}
.hero-scroll .orn{
  display:flex; align-items:center; justify-content:center;
  gap: 0.6rem; margin-bottom: 0.9rem;
}
.hero-scroll .orn .r{ width: 30px; height:1px; background: var(--gold); }
.hero-scroll .orn .s{ color: var(--gold); font-size:0.8rem; }
.hero-scroll .label{
  font-family: var(--caps);
  font-size: 0.65rem;
  color: var(--gold);
}
.hero-scroll .arrow{
  display:block; width: 1px; height: 36px;
  background: var(--gold);
  margin: 0.6rem auto 0;
  position: relative;
}
.hero-scroll .arrow::after{
  content:""; position:absolute; bottom:0; left:50%;
  width: 6px; height: 6px;
  border-right: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  transform: translateX(-50%) rotate(45deg);
}

/* ─────────────────────────────────────────────────────────────
   04 · COMPANY PROFILE
   ───────────────────────────────────────────────────────────── */
.company{
  background: var(--cream);
  padding: 7rem 0;
}
.company .grid{
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 4rem;
  align-items: stretch;
}
.company-visual{
  position: relative;
  min-height: 540px;
  background: var(--green-deep);
}
.company-visual .photo-wrap{
  position: absolute; inset: 0;
  border: none;
}
.company-visual .photo-wrap::after{ background: rgba(15,59,52,0.42); }
.company-visual .rosette-emblem{
  position:absolute; inset:0;
  display:grid; place-items:center;
  z-index: 2;
}
.company-visual .rosette-emblem svg{
  width: 150px; height: 150px;
  filter: drop-shadow(0 0 24px rgba(212,175,55,0.25));
}
/* Gold L corners */
.l-corner{
  position:absolute; width: 36px; height: 36px;
  z-index: 3;
}
.l-corner::before, .l-corner::after{
  content:""; position:absolute; background: var(--gold);
}
.l-corner.tl{ top:18px; left:18px; }
.l-corner.tl::before{ top:0; left:0; width:100%; height:1px; }
.l-corner.tl::after{ top:0; left:0; width:1px; height:100%; }
.l-corner.tr{ top:18px; right:18px; }
.l-corner.tr::before{ top:0; right:0; width:100%; height:1px; }
.l-corner.tr::after{ top:0; right:0; width:1px; height:100%; }
.l-corner.bl{ bottom:18px; left:18px; }
.l-corner.bl::before{ bottom:0; left:0; width:100%; height:1px; }
.l-corner.bl::after{ bottom:0; left:0; width:1px; height:100%; }
.l-corner.br{ bottom:18px; right:18px; }
.l-corner.br::before{ bottom:0; right:0; width:100%; height:1px; }
.l-corner.br::after{ bottom:0; right:0; width:1px; height:100%; }

.company-text{
  padding: 1rem 0;
}
.company-text .headline{ margin-bottom: 0.4rem; }

/* ─────────────────────────────────────────────────────────────
   05 · OUR STORY
   ───────────────────────────────────────────────────────────── */
.story{
  background: var(--cream);
  padding: 3rem 0 8rem;
}
.story .grid{
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 4rem;
  align-items: start;
}
.story-photos{
  display: flex; flex-direction: column;
  gap: 1.2rem;
}
.story-photos .photo-wrap{
  height: 200px;
}
.story-photos .between-orn{
  display:flex; align-items:center; justify-content:center;
  gap: 0.55rem;
  margin: -0.2rem 0;
}
.story-photos .between-orn .r{ width:22px; height:1px; background: var(--gold); }
.story-photos .between-orn .s{ color: var(--gold); font-size: 0.85rem; }

/* ─────────────────────────────────────────────────────────────
   06 · MISSION & VISION
   ───────────────────────────────────────────────────────────── */
.mv{
  background: var(--green-deep);
  color: var(--cream);
  padding: 7rem 0;
  position: relative;
}
.mv .grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  position: relative;
}
.mv-col{
  padding: 1rem 3.5rem;
}
.mv-col:first-child{ padding-left: 0; }
.mv-col:last-child{ padding-right: 0; }
.mv-divider{
  position:absolute; left:50%; top:0; bottom:0;
  width: 1px;
  background: rgba(212,175,55,0.55);
  display:flex; align-items:center; justify-content:center;
}
.mv-divider .star{
  background: var(--green-deep);
  color: var(--gold);
  padding: 0.6rem 0;
  font-size: 1rem;
}
.mv-statement{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  line-height: 1.45;
  color: var(--cream);
}

/* ─────────────────────────────────────────────────────────────
   07 · OFFER + COMMITMENT
   ───────────────────────────────────────────────────────────── */
.oc{
  background: var(--cream);
  padding: 7rem 0;
}
.oc .grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.2rem;
}
.oc-card{
  background: var(--cream-bright);
  border: 1px solid rgba(212,175,55,0.45);
  padding: 3rem 2.6rem;
  border-radius: 3px;
  position: relative;
}
.oc-card ul{
  list-style: none;
  margin-top: 1.4rem;
}
.oc-card ul li{
  position: relative;
  padding-left: 1.3rem;
  margin-bottom: 0.85rem;
  font-family: var(--body);
  color: rgba(15,59,52,0.88);
  font-size: 0.96rem;
  line-height: 1.6;
}
.oc-card ul li::before{
  content:"";
  position:absolute; left:0; top:0.55em;
  width: 6px; height: 6px;
  background: var(--gold);
  border-radius: 50%;
}

/* ─────────────────────────────────────────────────────────────
   08 · DESTINATIONS
   ───────────────────────────────────────────────────────────── */
.dest{
  background: var(--cream);
  padding: 7rem 0;
}
.dest-head{
  text-align: center;
  margin-bottom: 4rem;
}
.dest-head .eyebrow-row{ justify-content: center; }
.dest-head .headline{ margin: 0 auto; max-width: 800px; }
.dest-subhead{
  font-family: var(--serif);
  font-style: italic;
  color: var(--gold);
  font-size: 1.1rem;
  margin-top: 1rem;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.dest-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.dest-card{
  background: var(--cream-bright);
  border: 1px solid rgba(212,175,55,0.35);
  border-radius: 3px;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.2,0.7,0.2,1), border-color 0.4s ease, box-shadow 0.4s ease;
  cursor: pointer;
}
.dest-card .photo-wrap{
  height: 200px;
  border: none;
  border-bottom: 1px solid rgba(212,175,55,0.4);
}
.dest-card-name{
  padding: 1.1rem 1.1rem 1.2rem;
  font-family: var(--serif);
  font-weight: 500;
  color: var(--green-deep);
  font-size: 1rem;
  line-height: 1.3;
  min-height: 56px;
}
.dest-card:hover{
  transform: translateY(-6px);
  border-color: var(--gold);
  box-shadow: 0 14px 30px -18px rgba(212,175,55,0.55);
}
.dest-card:hover .photo-wrap img{ transform: scale(1.05); }

/* ─────────────────────────────────────────────────────────────
   09 · WHY
   ───────────────────────────────────────────────────────────── */
.why{
  background: var(--green-deep);
  color: var(--cream);
  padding: 7rem 0;
  position: relative;
}
.why-head{
  text-align: center;
  margin-bottom: 4rem;
}
.why-head .eyebrow-row{ justify-content: center; }
.why-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem 3rem;
}
.why-cell{
  border-top: 1px solid rgba(212,175,55,0.35);
  padding-top: 1.5rem;
  position: relative;
}
.why-num{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 3rem;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 0.7rem;
  display: block;
}
.why-title{
  font-family: var(--serif);
  font-weight: 500;
  color: var(--cream);
  font-size: 1.25rem;
  line-height: 1.3;
}

/* ─────────────────────────────────────────────────────────────
   10 · BRAND VALUES + POSITIONING
   ───────────────────────────────────────────────────────────── */
.bv{
  background: var(--cream);
  padding: 7rem 0;
}
.bv .grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.2rem;
}
.bv-card{
  background: var(--cream-bright);
  border: 1px solid rgba(212,175,55,0.45);
  padding: 3rem 2.6rem;
  border-radius: 3px;
}
.values-row{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  margin-top: 1.6rem;
}
.value-chip{
  text-align: center;
  padding: 1rem 0.6rem;
  border-right: 1px solid rgba(212,175,55,0.35);
}
.value-chip:last-child{ border-right: none; }
.value-chip svg{
  width: 44px; height: 44px;
  margin: 0 auto 0.85rem;
  display: block;
}
.value-chip .name{
  font-family: var(--serif);
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--green-deep);
  line-height: 1.25;
}
.bv-positioning{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.28rem;
  color: var(--green-deep);
  line-height: 1.5;
  margin-top: 1rem;
}
.bv-caption{
  display:flex; align-items:center; gap: 0.55rem;
  margin-top: 1.6rem;
  font-family: var(--caps);
  font-size: 0.7rem;
  text-transform: uppercase;
  color: rgba(15,59,52,0.65);
}
.bv-caption .s{ color: var(--gold); }

/* ─────────────────────────────────────────────────────────────
   11 · CTA / CONTACT
   ───────────────────────────────────────────────────────────── */
.cta{
  background: var(--green-deep);
  color: var(--cream);
  padding: 10rem 0;
  position: relative;
  overflow: hidden;
}
.cta .photo-wrap{
  position: absolute; inset:0;
  border: none;
  z-index: 0;
}
.cta .pattern-overlay{
  position:absolute; inset:0;
  background-image: var(--pattern);
  background-size: 240px 240px;
  opacity: 0.07;
  z-index: 1;
}
.cta-inner{
  position: relative; z-index: 2;
  text-align: center;
}
.cta-logo{ height: 70px; width: auto; margin: 0 auto 1.6rem; }
.cta-headline{
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.2rem, 4.5vw, 4rem);
  line-height: 1.05;
  color: var(--cream);
  margin-bottom: 0.6rem;
}
.cta-headline em{ color: var(--gold); }
.cta-sub{
  font-family: var(--serif);
  font-style: italic;
  color: var(--gold);
  font-size: 1.3rem;
  margin-bottom: 3.5rem;
}
.contact-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.3rem;
  margin-bottom: 3.5rem;
  text-align: left;
}
.contact-card{
  background: var(--green-med);
  border: 1px solid rgba(212,175,55,0.4);
  padding: 2rem 1.5rem;
  display: flex; flex-direction: column; gap: 0.6rem;
  position: relative;
  transition: border-color 0.3s ease;
}
.contact-card::before{
  content:"";
  position:absolute; top:0; left:0;
  height: 2px; width: 0;
  background: var(--gold);
  transition: width 0.4s ease;
}
.contact-card:hover{ border-color: var(--gold); }
.contact-card:hover::before{ width: 100%; }
.contact-card svg{ width: 32px; height: 32px; }
.contact-card .label{
  font-family: var(--caps);
  font-size: 0.74rem;
  color: var(--gold);
  text-transform: uppercase;
  margin-top: 0.3rem;
}
.contact-card .value{
  font-family: var(--body);
  font-size: 0.85rem;
  color: rgba(242,233,216,0.7);
  border-bottom: 1px dotted rgba(212,175,55,0.45);
  padding-bottom: 0.3rem;
  font-style: italic;
}

/* ─────────────────────────────────────────────────────────────
   12 · FOOTER
   ───────────────────────────────────────────────────────────── */
.footer{
  background: var(--green-darker);
  color: var(--cream);
  padding: 4rem 0 2.5rem;
}
.footer-grid{
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}
.footer-logo img{ height: 50px; width: auto; margin-bottom: 1.3rem; }
.footer-tagline{
  font-family: var(--serif);
  font-style: italic;
  color: var(--gold);
  font-size: 1.05rem;
  margin-bottom: 1rem;
}
.footer-desc{
  font-family: var(--body);
  font-size: 0.88rem;
  color: rgba(242,233,216,0.65);
  line-height: 1.7;
}
.footer-col h4{
  font-family: var(--caps);
  font-size: 0.78rem;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.4rem;
  font-weight: normal;
}
.footer-col ul{ list-style: none; }
.footer-col li{
  margin-bottom: 0.7rem;
}
.footer-col a, .footer-col span{
  font-family: var(--body);
  font-size: 0.88rem;
  color: rgba(242,233,216,0.72);
  transition: color 0.25s ease;
}
.footer-col a:hover{ color: var(--gold); }
.footer-rule{ height:1px; background: rgba(212,175,55,0.25); margin: 1rem 0 1.6rem; }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  gap: 1rem; flex-wrap: wrap;
  font-family: var(--body);
  font-size: 0.75rem;
  color: rgba(242,233,216,0.5);
}

/* ─────────────────────────────────────────────────────────────
   13 · FLOATING WHATSAPP
   ───────────────────────────────────────────────────────────── */
.wa-float{
  position: fixed; bottom: 24px; right: 24px;
  width: 60px; height: 60px;
  background: #25D366;
  border-radius: 50%;
  display: grid; place-items: center;
  z-index: 80;
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
  cursor: pointer;
  transition: transform 0.25s ease;
}
.wa-float:hover{ transform: scale(1.05); }
.wa-float svg{ width: 32px; height: 32px; color: #fff; }
.wa-float::before{
  content:""; position:absolute; inset:0;
  border-radius: 50%;
  background: #25D366;
  animation: pulse 2s infinite;
  z-index: -1;
}
@keyframes pulse{
  0%{ transform: scale(1); opacity: 0.55; }
  100%{ transform: scale(1.6); opacity: 0; }
}

/* ─────────────────────────────────────────────────────────────
   14 · MODAL
   ───────────────────────────────────────────────────────────── */
.modal-overlay{
  position: fixed; inset: 0;
  background: rgba(15,59,52,0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 300;
  display: none;
  align-items: center; justify-content: center;
  padding: 2rem;
  overflow-y: auto;
}
.modal-overlay.open{ display: flex; }
.modal{
  background: var(--green-deep);
  border: 1px solid var(--gold);
  max-width: 560px;
  width: 100%;
  padding: 3rem;
  position: relative;
  color: var(--cream);
  max-height: 90vh;
  overflow-y: auto;
}
.modal-close{
  position: absolute; top: 1rem; right: 1.2rem;
  font-size: 1.6rem;
  color: var(--gold);
  cursor: pointer;
  line-height: 1;
}
.modal-title{
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: 2rem;
  color: var(--cream);
  margin: 0.6rem 0 0.3rem;
  line-height: 1.1;
}
.modal-title em{ color: var(--gold); }
.modal-sub{
  font-family: var(--serif);
  font-style: italic;
  color: var(--gold);
  font-size: 1rem;
  margin-bottom: 1.8rem;
}
.form-field{ margin-bottom: 1.1rem; }
.form-field label{
  display: block;
  font-family: var(--caps);
  font-size: 0.7rem;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.form-field input,
.form-field select,
.form-field textarea{
  width: 100%;
  background: var(--green-med);
  border: 1px solid rgba(212,175,55,0.45);
  color: var(--cream);
  padding: 0.8rem 0.95rem;
  font-family: var(--body);
  font-size: 0.92rem;
  border-radius: 2px;
  transition: border-color 0.25s ease;
}
.form-field textarea{ resize: vertical; min-height: 90px; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  outline: none;
  border-color: var(--gold);
}
.form-field select option{ background: var(--green-deep); color: var(--cream); }
.modal .btn-gold{
  width: 100%;
  margin-top: 0.6rem;
  justify-content: center;
}


/* ─────────────────────────────────────────────────────────────
   PACKAGES
   ───────────────────────────────────────────────────────────── */
.pkg{
  background: var(--cream);
  padding: 7rem 0;
}
.pkg-head{ text-align: center; margin-bottom: 4rem; }
.pkg-head .eyebrow-row{ justify-content: center; }
.pkg-head .headline{ margin: 0 auto; max-width: 900px; }
.pkg-subhead{
  font-family: var(--serif);
  font-style: italic;
  color: var(--gold);
  font-size: 1.1rem;
  margin-top: 0.8rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
.pkg-grid{
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  justify-content: center;
}
.pkg-card{
  flex: 0 0 calc((100% - 4.8rem) / 4); /* 4 columns, 3 gaps of 1.6rem */
  max-width: calc((100% - 4.8rem) / 4);
}
.pkg-card{
  background: var(--cream-bright);
  border: 1px solid rgba(212,175,55,0.35);
  border-radius: 3px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.4s cubic-bezier(0.2,0.7,0.2,1), border-color 0.4s ease, box-shadow 0.4s ease;
}
.pkg-card:hover{
  transform: translateY(-6px);
  border-color: var(--gold);
  box-shadow: 0 14px 30px -18px rgba(212,175,55,0.55);
}
.pkg-card:hover .photo-wrap img{ transform: scale(1.04); }
.pkg-card .photo-wrap{
  height: 200px;
  border: none;
  border-bottom: 1px solid rgba(212,175,55,0.4);
}
.pkg-card-body{
  padding: 1.4rem 1.5rem 1.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  flex: 1;
}
.pkg-meta{
  font-family: var(--caps);
  font-size: 0.74rem;
  color: var(--gold);
  text-transform: uppercase;
}
.pkg-name{
  font-family: var(--serif);
  font-weight: 500;
  font-style: italic;
  font-size: 1.55rem;
  color: var(--green-deep);
  line-height: 1.1;
}
.pkg-sub{
  font-family: var(--serif);
  font-style: italic;
  color: var(--gold);
  font-size: 0.95rem;
  margin-top: -0.35rem;
}
.pkg-desc{
  font-family: var(--body);
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgba(15,59,52,0.82);
}
.pkg-card-foot{
  margin-top: auto;
  padding-top: 0.7rem;
  border-top: 1px solid rgba(212,175,55,0.35);
}
.pkg-card-foot a {
  font-family: var(--caps);
  font-size: 0.72rem;
  color: #ffffff;
  text-transform: capitalize;
  transition: color 0.25s ease;
}

@media (max-width: 1100px){ .pkg-card{ flex: 0 0 calc((100% - 1.6rem) / 2); max-width: calc((100% - 1.6rem) / 2); } }
@media (max-width: 560px){ .pkg-card{ flex: 0 0 100%; max-width: 100%; } }


/* TRUSTED PARTNERSHIPS */
.trust{ background: var(--cream); padding: 1rem 0 8rem; }
.trust .grid{ display: grid; grid-template-columns: 7fr 5fr; gap: 4rem; align-items: center; }
.trust .body-prose strong{ color: var(--gold); font-weight: 600; }
.partner-stack{ display: flex; flex-direction: column; gap: 1.4rem; }
.partner-card{
  background: var(--green-deep);
  border: 1px solid rgba(212,175,55,0.45);
  padding: 2.4rem 2rem;
  display: grid; place-items: center;
  min-height: 160px;
  border-radius: 3px;
  position: relative;
}
.partner-card img{ max-height: 80px; width: auto; max-width: 80%; }
.partner-card .partner-text{
  font-family: var(--display);
  font-style: italic; font-weight: 500;
  color: var(--cream);
  font-size: 2rem;
  text-align: center;
}
.partner-card .partner-text small{
  display: block;
  font-family: var(--caps);
  color: var(--gold);
  font-size: 0.7rem;
  margin-top: 0.5rem;
  font-style: normal;
}
.partner-divider{ display: flex; align-items: center; justify-content: center; gap: 0.6rem; }
.partner-divider .r{ width: 26px; height: 1px; background: var(--gold); }
.partner-divider .s{ color: var(--gold); font-size: 0.95rem; }

/* WHAT WE OFFER — 7-card grid */
.offer{ background: var(--cream); padding: 7rem 0; }
.offer-head{ text-align: center; margin-bottom: 4rem; }
.offer-head .eyebrow-row{ justify-content: center; }
.offer-head .headline{ margin: 0 auto; max-width: 900px; }
.offer-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.offer-grid.row2{ grid-template-columns: repeat(3, 1fr); margin-top: 1.5rem; max-width: 75%; margin-left: auto; margin-right: auto; }
.offer-card{
  background: var(--cream-bright);
  border: 1px solid rgba(212,175,55,0.45);
  padding: 2rem 1.6rem 1.8rem;
  border-radius: 3px;
  display: flex; flex-direction: column; gap: 0.9rem;
  position: relative;
  transition: border-color 0.3s ease, transform 0.4s ease;
}
.offer-card:hover{ border-color: var(--gold); transform: translateY(-4px); }
.offer-card .num{
  position: absolute; top: 1.2rem; right: 1.4rem;
  font-family: var(--serif);
  font-style: italic; font-weight: 500;
  color: var(--gold); font-size: 1.15rem;
}
.offer-card .title{
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.18rem;
  line-height: 1.25;
  color: var(--green-deep);
  padding-right: 2.2rem;
  min-height: 2.8em;
}
.offer-card .rule{ height: 1px; background: rgba(212,175,55,0.55); width: 100%; margin-top: 0.4rem; }
.offer-card .desc{
  font-family: var(--body);
  font-size: 0.88rem;
  line-height: 1.65;
  color: rgba(15,59,52,0.82);
}

/* OUR COMMITMENT — standalone */
.commit{ background: var(--cream); padding: 5rem 0 8rem; }
.commit .grid{
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 4rem;
  align-items: stretch;
}
.commit-visual{ position: relative; min-height: 500px; background: var(--green-deep); }
.commit-visual .photo-wrap{ position: absolute; inset: 0; border: none; }
.commit-visual .photo-wrap::after{ background: rgba(15,59,52,0.35); }
.commit-text{ padding: 1rem 0; }
.commit-list{ list-style: none; margin-top: 1rem; }
.commit-list li{
  font-family: var(--body);
  color: rgba(15,59,52,0.88);
  font-size: 1rem;
  line-height: 1.5;
  padding: 1.1rem 0;
  border-bottom: 1px solid rgba(212,175,55,0.4);
}
.commit-list li:last-child{ border-bottom: none; }

/* BRAND VALUES — expanded with descriptions */
.value-chip{
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 1.4rem 0.9rem;
}
.value-chip .desc{
  font-family: var(--body);
  font-size: 0.78rem;
  line-height: 1.55;
  color: rgba(15,59,52,0.72);
  margin-top: 0.6rem;
}

/* GUIDING PRINCIPLES eyebrow */
.mv-eyebrow{
  text-align: center;
  font-family: var(--caps);
  font-size: 0.75rem;
  color: var(--gold);
  margin-bottom: 3.5rem;
  display: flex; align-items: center; justify-content: center;
  gap: 0.9rem;
}
.mv-eyebrow .r{ width: 30px; height: 1px; background: var(--gold); opacity: 0.6; }

@media (max-width: 1100px){
  .offer-grid{ grid-template-columns: repeat(3, 1fr); }
  .offer-grid.row2{ grid-template-columns: repeat(3, 1fr); max-width: 100%; }
}
@media (max-width: 880px){
  .trust .grid, .commit .grid{ grid-template-columns: 1fr; gap: 3rem; }
  .commit-visual{ min-height: 380px; }
  .offer-grid{ grid-template-columns: repeat(2, 1fr); }
  .offer-grid.row2{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .offer-grid{ grid-template-columns: 1fr; }
  .offer-grid.row2{ grid-template-columns: 1fr; }
  .trust, .commit, .offer{ padding: 5rem 0; }
}

/* ─────────────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1100px){
  .dest-grid{ grid-template-columns: repeat(3, 1fr); }
  .company .grid{ gap: 3rem; }
  .why-grid{ gap: 2.2rem; }
}

@media (max-width: 880px){
  .nav-links{ display: none; }
  .nav-burger{ display: flex; }
  .nav-cta{ display: none; }
  .nav-wrap.open .nav-links{
    display: flex; flex-direction: column;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--cream);
    border-bottom: 1px solid rgba(212,175,55,0.3);
    padding: 1.5rem var(--gutter);
    gap: 1.2rem;
  }
  .company .grid,
  .story .grid,
  .oc .grid,
  .bv .grid{
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .company-visual{ min-height: 400px; }
  .mv .grid{ grid-template-columns: 1fr; }
  .mv-divider{ display: none; }
  .mv-col{ padding: 2rem 0; border-bottom: 1px solid rgba(212,175,55,0.3); }
  .mv-col:last-child{ border-bottom: none; }
  .dest-grid{ grid-template-columns: repeat(3, 1fr); }
  .why-grid{ grid-template-columns: repeat(2, 1fr); }
  .contact-grid{ grid-template-columns: repeat(2, 1fr); }
  .footer-grid{ grid-template-columns: 1fr; gap: 2.5rem; }
  .values-row{ grid-template-columns: repeat(5, 1fr); }
}

@media (max-width: 760px){
  .hero{ min-height: 88vh; padding: 5rem 0 4rem; }
  .dest-grid{ grid-template-columns: repeat(2, 1fr); }
  .why-grid{ grid-template-columns: repeat(2, 1fr); }
  .values-row{ grid-template-columns: repeat(5, 1fr); gap: 0; }
  .value-chip svg{ width: 36px; height: 36px; }
  .value-chip .name{ font-size: 0.78rem; }
  .oc-card, .bv-card{ padding: 2.2rem 1.6rem; }
  .modal{ padding: 2rem 1.5rem; }
}

@media (max-width: 560px){
  :root{ --gutter: 1.25rem; }
  .topbar{ font-size: 0.62rem; padding: 0.55rem 0.8rem; }
  .nav-logo img{ height: 36px; }
  .hero-logo{ height: 70px; margin-bottom: 1.6rem; }
  .hero-meta{ font-size: 0.65rem; }
  .hero-buttons{ flex-direction: column; align-items: stretch; }
  .hero-buttons .btn{ justify-content: center; }
  .company{ padding: 5rem 0; }
  .story{ padding: 4rem 0 6rem; }
  .mv{ padding: 5rem 0; }
  .oc, .dest, .why, .bv{ padding: 5rem 0; }
  .cta{ padding: 6rem 0; }
  .dest-grid{ grid-template-columns: 1fr; }
  .why-grid{ grid-template-columns: 1fr; }
  .contact-grid{ grid-template-columns: 1fr; }
  .values-row{ grid-template-columns: repeat(2, 1fr); }
  .value-chip{ border-right: none; border-bottom: 1px solid rgba(212,175,55,0.3); padding: 1.2rem 0.5rem; }
  .value-chip:nth-child(5){ grid-column: 1 / -1; }
  .footer-bottom{ flex-direction: column; text-align: center; }
  .wa-float{ width: 52px; height: 52px; bottom: 18px; right: 18px; }
  .wa-float svg{ width: 26px; height: 26px; }
}

/* ─────────────────────────────────────────────────────────────
   PRINT
   ───────────────────────────────────────────────────────────── */
@media print{
  #scrollProgress, .nav-wrap, .wa-float, .modal-overlay,
  .hero-scroll, .nav-cta, .nav-burger{
    display: none !important;
  }
  body{ background: white; color: black; }
  .hero, .mv, .why, .cta, .footer{ background: white !important; color: black !important; }
  .photo-wrap::after{ display: none; }
}
/* ─────────────────────────────────────────────────────────────
   PACKAGE CARD — WhatsApp inquiry button (per-card)
   ───────────────────────────────────────────────────────────── */
.pkg-card-foot{
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(212,175,55,0.35);
}
.pkg-card-foot a.pkg-wa-btn{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  width: 100%;
  padding: 0.75rem 0.95rem;
  background: var(--green-deep);
  color: #ffffff;
  font-family: var(--caps);
  font-size: 0.72rem;
  text-transform: capitalize;
  border: 1px solid rgba(212,175,55,0.45);
  border-radius: 2px;
  transition: background 0.28s ease, border-color 0.28s ease, color 0.28s ease, transform 0.2s ease;
}
.pkg-card-foot a.pkg-wa-btn svg{ color: var(--gold); flex-shrink: 0; }
.pkg-card-foot a.pkg-wa-btn span:not(.arrow){ flex: 1; text-align: left; }
.pkg-card-foot a.pkg-wa-btn .arrow{ color: var(--gold); font-family: var(--serif); font-size: 1rem; flex-shrink: 0; }
.pkg-card-foot a.pkg-wa-btn:hover{
  background: var(--gold);
  border-color: var(--gold);
  color: var(--green-deep);
  transform: translateY(-1px);
}
.pkg-card-foot a.pkg-wa-btn:hover svg,
.pkg-card-foot a.pkg-wa-btn:hover .arrow{ color: var(--green-deep); }

/* Partner card logo sizing in Trust section */
.partner-card img{
  max-height: 80px;
  width: auto;
  max-width: 80%;
  filter: brightness(1.02);
}

/* Print fixes for the new WhatsApp button (keeps printable) */
@media print{
  .pkg-card-foot a.pkg-wa-btn{ display: none !important; }
}

/* ─────────────────────────────────────────────────────────────
   04B · MALAYSIA & EGYPT FRIENDSHIP
   ───────────────────────────────────────────────────────────── */
.friendship{
  padding: 1rem 0;
  position: relative;
  overflow: hidden;
}
.friendship .friendship-head{
  text-align: center;
  max-width: 820px;
  margin: 0 auto 4.5rem;
}
.friendship .friendship-head .eyebrow-row{
  justify-content: center;
}
.friendship .friendship-head .headline{
  margin-bottom: 1rem;
}
.friendship .friendship-body{
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 4.5rem;
  align-items: start;
  max-width: 1180px;
  margin: 0 auto;
}
.friendship .friendship-text{
  font-family: var(--sans);
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--ink);
}
.friendship .friendship-text p{
  margin: 0 0 1.5rem;
}
.friendship .friendship-text p:last-child{ margin-bottom: 0; }
.friendship .friendship-text em{
  font-style: italic;
  color: var(--gold);
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.friendship .friendship-photo{
  position: relative;
  align-self: stretch;
}
.friendship .friendship-photo .photo-wrap{
  position: relative;
  aspect-ratio: 3/3;
  overflow: hidden;
  border: 1px solid rgba(212,175,55,0.35);
}
.friendship .friendship-photo .photo-wrap img{
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.friendship .friendship-photo .l-corner{
  position: absolute; width: 18px; height: 18px; pointer-events: none;
  border-color: var(--gold);
}
.friendship .friendship-photo .l-corner.tl{ top: -1px;    left: -1px;    border-top: 1.5px solid; border-left: 1.5px solid; }
.friendship .friendship-photo .l-corner.tr{ top: -1px;    right: -1px;   border-top: 1.5px solid; border-right: 1.5px solid; }
.friendship .friendship-photo .l-corner.bl{ bottom: -1px; left: -1px;    border-bottom: 1.5px solid; border-left: 1.5px solid; }
.friendship .friendship-photo .l-corner.br{ bottom: -1px; right: -1px;   border-bottom: 1.5px solid; border-right: 1.5px solid; }

.friendship-quote{
  text-align: center;
  margin: 5rem auto 0;
  max-width: 780px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  line-height: 1.45;
  color: var(--green-deep);
  position: relative;
  padding: 2rem 1rem;
}
.friendship-quote::before,
.friendship-quote::after{
  content: '';
  display: block;
  width: 90px;
  height: 1px;
  background: var(--gold);
  margin: 1.2rem auto;
}
.friendship-quote::before{ margin-bottom: 1.8rem; }
.friendship-quote::after{  margin-top:    1.8rem; }

@media (max-width: 900px){
  .friendship{ padding: 5rem 0; }
  .friendship .friendship-body{
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .friendship .friendship-photo{ max-width: 480px; margin: 0 auto; }
  .friendship-quote{ margin-top: 3.5rem; font-size: 1.3rem; }
}

/* ─────────────────────────────────────────────────────────────
   Trust partner logo — enlarge per client request
   ───────────────────────────────────────────────────────────── */
.partner-stack .partner-card img{
  max-width: 80% !important;
  max-height: 200px !important;
  width: auto;
  height: auto;
  object-fit: contain;
}
.partner-stack .partner-card{
  min-height: 220px;
  padding: 2rem;
}

/* ─────────────────────────────────────────────────────────────
   Footer · Connect column with gold icons
   ───────────────────────────────────────────────────────────── */
.footer-connect{
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-connect li{
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin: 0 0 1rem;
  line-height: 1.5;
}
.footer-connect .ic{
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  color: var(--gold);
  margin-top: 0.18rem;
}
.footer-connect .ic svg{
  width: 18px;
  height: 18px;
  display: block;
}
.footer-connect a,
.footer-connect span{
  color: var(--cream);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-connect a:hover{
  color: var(--gold);
}

/* ─────────────────────────────────────────────────────────────
   Nav · tighter spacing + language switcher on far right
   ───────────────────────────────────────────────────────────── */
.nav-inner{ gap: 0.9rem; }
.nav-links{ gap: 1.6rem; }
.nav-translate{
  margin-right: 0;
  margin-left: 0.6rem;
}
@media (max-width: 880px){
  .nav-translate{ margin-left: 0; }
}

/* ─────────────────────────────────────────────────────────────
   Nav · right cluster (button + language) — tight group on far right
   Logo / Menu / Right-cluster get the big gaps via space-between
   ───────────────────────────────────────────────────────────── */
.nav-right{
  display: flex;
  align-items: center;
  gap: 0.5rem;        /* very tight gap between button and language */
  flex-shrink: 0;
}
.nav-right .nav-translate{
  margin: 0;
}
.nav-inner{
  gap: 0;             /* let space-between do all the work between logo/menu/right */
}
@media (max-width: 880px){
  .nav-right{ gap: 0; }
}