@charset "UTF-8";
/* ==========================================================================
   Majestic Tours & Holidays — design system
   Layout & hero geometry follow docs/05-hero-section-spec.md (LOCKED).
   Palette + type from 'Logo redesign and branding kit/brand.md'.
   ========================================================================== */

/* ---------- fonts (self-hosted, subset) ---------- */
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:400 600;font-display:swap;src:url(../fonts/PlayfairDisplay-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:400 600;font-display:swap;src:url(../fonts/PlayfairDisplay-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/PlayfairDisplay-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/PlayfairDisplay-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/IBMPlexSansArabic-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/IBMPlexSansArabic-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/IBMPlexSansArabic-400-arabic.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/IBMPlexSansArabic-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/IBMPlexSansArabic-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/IBMPlexSansArabic-500-arabic.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/IBMPlexSansArabic-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/IBMPlexSansArabic-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/IBMPlexSansArabic-600-arabic.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Amiri';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/Amiri-700-brand.woff2) format('woff2');unicode-range:U+0600-06FF,U+FB50-FDFF,U+FE70-FEFC}

/* ---------- tokens ---------- */
:root{
  /* palette — brand.md §Colors. Navy dominant, paper/cream as ground,
     gold under 5% of any surface and never a large fill. */
  --c-page:        #EFEDE7;   /* brand-paper — the frame; header sits on this */
  --c-white:       #FFFFFF;
  --c-cream:       #F5F2EA;   /* brand-cream — reverse text on navy */
  --c-navy:        #000078;   /* brand-navy — logo, headings, buttons */
  --c-navy-deep:   #00004B;
  --c-navy-soft:   #1B1B99;   /* hover */
  --c-gold:        #C39A3E;   /* brand-gold — rules, small marks, hover only */
  --c-gold-lift:   #D6B15E;
  --c-ink:         #1A1D2B;   /* brand-ink */
  --c-muted:       #6C7080;   /* brand-muted */
  --c-line:        #DCD8CE;   /* brand-line */
  --c-line-dark:   rgba(245,242,234,.18);
  --c-navy-t10:    #E6E6F2;

  /* type — brand.md §Fonts / §Type scale */
  --f-display: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  --f-sans:    'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --f-arabic:  'Amiri', 'Playfair Display', serif;

  /* geometry — docs/05-hero-section-spec.md §3 */
  --header-h:    78px;
  --hero-gutter: 22px;
  --page-gutter: clamp(16px, 2.5vw, 56px);
  --wrap:        2400px;   /* effectively full-width to 4K, like the desk */

  --ease: cubic-bezier(.22,.61,.36,1);
}

@media (max-width: 1023px){
  :root{ --header-h: 72px; --hero-gutter: 18px; }
}
@media (max-width: 767px){
  /* doc 05 §8 — gutters converge at mobile but NEVER reach zero */
  :root{ --header-h: 64px; --hero-gutter: 16px; }
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0;
  background:var(--c-page);
  color:var(--c-ink);
  font-family:var(--f-sans);
  font-size:16px;
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,video,svg{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
h1,h2,h3,h4,p,figure,ul,ol{ margin:0; }
ul,ol{ padding:0; list-style:none; }
:focus-visible{ outline:2px solid var(--c-gold); outline-offset:3px; }

/* ---------- typography ---------- */
.display{
  font-family:var(--f-display);
  font-weight:400;
  line-height:1.05;
  letter-spacing:-.015em;
}
.eyebrow{                       /* brand overline */
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--c-gold);
}
.lede{ color:var(--c-muted); font-size:clamp(15px,1.15vw,17px); line-height:1.65; }
.italic-serif{ font-family:var(--f-display); font-style:italic; font-weight:400; }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--page-gutter); }
.section{ padding-block:clamp(56px,7vw,110px); }
.section--tight{ padding-block:clamp(40px,4.5vw,68px); }
.section--navy{ background:var(--c-navy); color:#EDF1F5; }
.section--white{ background:var(--c-white); }
.section-head{ max-width:660px; }
.section-head--center{ margin-inline:auto; text-align:center; }
.section-head h2{
  font-family:var(--f-display); font-weight:600; letter-spacing:-.01em; line-height:1.15;
  font-size:clamp(29px,4vw,52px); margin-block:14px 0;
}
.section-head p{ margin-top:14px; }
.section--navy .section-head p{ color:#A9BCCC; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:50px; padding:0 26px;
  font-size:14px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  border-radius:2px; transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  text-align:center;
}
.btn--solid{ background:var(--c-navy); color:var(--c-cream); }
.btn--solid:hover{ background:var(--c-navy-soft); }
.btn--primary{ background:var(--c-navy); color:var(--c-cream); }
.btn--primary:hover{ background:var(--c-navy-soft); }
.btn--ghost{ border:1px solid var(--c-navy); color:var(--c-navy); }
.btn--ghost:hover{ background:var(--c-navy); color:#fff; }
.btn--light{ background:#fff; color:var(--c-navy); }
.btn--light:hover{ background:var(--c-cream); }
.btn--outline-light{ border:1px solid rgba(255,255,255,.5); color:#fff; }
.btn--outline-light:hover{ background:#fff; color:var(--c-navy); }
.btn--block{ width:100%; }

/* ==========================================================================
   HEADER — doc 05 §2
   ========================================================================== */
.site-header{
  position:relative; z-index:60;
  height:var(--header-h);
  padding-top:var(--hero-gutter);     /* balances the gap above/below the logo */
  box-sizing:border-box;
  background:var(--c-page);           /* same as the frame — they blend */
  display:flex; align-items:center;
}
.site-header__inner{
  width:100%; max-width:none;
  padding-inline:var(--page-gutter);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  position:relative;
}

/* logo lockup — brand.md §Lockup.
   Mark left; two stacked rows right, BOTH justified to the same width so the
   Arabic carries equal weight instead of reading as a translation.
   Arabic is never letter-spaced (it breaks the cursive joins). */
.logo{ display:flex; align-items:center; gap:12px; flex:0 0 auto; }
.logo__mark{ width:46px; height:46px; flex:0 0 auto; }
.logo__rows{ display:flex; flex-direction:column; gap:3px; }
.logo__row{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:10px; width:var(--lockup-w, 188px);
}
.logo__ar-name{ font-family:var(--f-arabic); font-weight:700; font-size:23px; line-height:1.15; color:var(--c-navy); }
.logo__ar-sub{ font-family:var(--f-sans); font-weight:600; font-size:10px; line-height:1.2; color:var(--c-navy); }
.logo__en-name{ font-family:var(--f-display); font-weight:700; font-style:italic; font-size:21px; line-height:1; color:var(--c-navy); }
.logo__en-sub{ font-family:var(--f-sans); font-weight:600; font-size:9px; letter-spacing:.15em; text-transform:uppercase; color:var(--c-navy); white-space:nowrap; }
/* reverse lockup on navy */
.site-footer .logo__ar-name,.site-footer .logo__ar-sub,
.site-footer .logo__en-name,.site-footer .logo__en-sub{ color:var(--c-cream); }

/* centred nav — optically centred, independent of the flanking clusters */
.nav{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:flex; align-items:center; gap:32px;
}
.nav a{
  font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:500;
  color:var(--c-navy); position:relative; padding-block:6px; white-space:nowrap;
}
.nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--c-gold); transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav a:hover::after,.nav a[aria-current="page"]::after{ transform:scaleX(1); }

/* right cluster */
.header-actions{ display:flex; align-items:center; gap:20px; flex:0 0 auto; }
.icon-btn{
  width:44px; height:44px; display:grid; place-items:center; color:var(--c-navy);
  border-radius:2px; transition:background .2s var(--ease);
}
.icon-btn:hover{ background:rgba(11,33,56,.07); }
.btn-login{
  width:184px; height:50px; padding:0;
  background:var(--c-navy); color:#fff; border-radius:2px;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-size:13px; font-weight:500; letter-spacing:.06em; text-transform:uppercase;
  transition:background .25s var(--ease);
}
.btn-login:hover{ background:var(--c-navy-soft); }
.btn-login__chev{ transition:transform .25s var(--ease); }
.btn-login[aria-expanded="true"] .btn-login__chev{ transform:rotate(180deg); }

/* signed-in: the Login button is replaced by the two desks */
.header-desks{ display:flex; gap:8px; flex:0 0 auto; }
.btn-desk{
  height:50px; padding:0 18px;
  min-width:108px;              /* keeps the pair identical despite label length */
  /* justify-content is load-bearing here: min-width makes the box wider than
     the label, so without it both labels sit at flex-start — and the shorter
     one (HOTEL) looks more off-centre than the longer one. */
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  text-align:center;
  border:1px solid var(--c-navy); border-radius:2px;
  color:var(--c-navy); background:transparent;
  font-size:13px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  transition:background .25s var(--ease), color .25s var(--ease);
}
.btn-desk:hover{ background:var(--c-navy); color:var(--c-cream); }
.btn-desk[aria-current="true"]{ background:var(--c-navy); color:var(--c-cream); }
@media (max-width:1023px){ .btn-desk{ padding:0 12px; min-width:94px; font-size:12px; } }
@media (max-width:767px){
  .header-desks{ gap:6px; }
  .btn-desk{ height:44px; padding:0 10px; min-width:80px; font-size:11px; letter-spacing:.06em; }
}
/* Signed in, the header carries logo + TWO desks + burger. That is tighter
   than the logged-out case, so the lockup and buttons give ground together
   rather than letting the row overflow. */
@media (max-width:430px){
  .header-desks{ gap:5px; }
  .btn-desk{ padding:0 8px; min-width:72px; font-size:10px; letter-spacing:.04em; }
  .site-header__inner:has(.header-desks) .logo__row{ --lockup-w:112px; }
  .site-header__inner:has(.header-desks) .logo__mark{ width:32px; height:32px; }
  .site-header__inner:has(.header-desks) .logo__ar-name{ font-size:14px; }
  .site-header__inner:has(.header-desks) .logo__en-name{ font-size:13px; }
}
@media (max-width:359px){
  .btn-desk{ padding:0 6px; min-width:64px; font-size:9.5px; }
  /* Below this the wordmark cannot coexist with two desks and a burger.
     The mark alone still identifies the brand, so the text rows step aside. */
  .site-header__inner:has(.header-desks) .logo__rows{ display:none; }
}

/* hamburger */
.burger{ display:none; width:44px; height:44px; place-items:center; color:var(--c-navy); border-radius:2px; }
.burger:hover{ background:rgba(11,33,56,.07); }

/* ---------- login dropdown — doc 05 §5 ---------- */
.login-pop{
  position:absolute; top:calc(100% + 8px); right:0;
  width:320px; padding:24px;
  background:#fff; border:1px solid var(--c-line);
  box-shadow:0 18px 46px rgba(6,21,35,.16);
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .15s var(--ease), transform .15s var(--ease), visibility .15s;
  z-index:70;
}
.login-pop[data-open="true"]{ opacity:1; visibility:visible; transform:translateY(0); }
.login-pop h3{ font-family:var(--f-display); font-size:22px; font-weight:600; margin-bottom:3px; }
.login-pop .login-pop__hint{ font-size:12.5px; color:var(--c-muted); margin-bottom:17px; }
.field{ margin-bottom:13px; }
.field label{ display:block; font-size:11px; letter-spacing:.11em; text-transform:uppercase; color:var(--c-muted); margin-bottom:6px; }
.field input{
  width:100%; height:44px; padding:0 12px;
  border:1px solid var(--c-line); border-radius:2px; background:#fff;
  transition:border-color .2s var(--ease);
}
.field input:focus{ border-color:var(--c-navy); outline:none; }
.login-pop__row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:14px 0 16px; font-size:12.5px; }
.check{ display:inline-flex; align-items:center; gap:8px; color:var(--c-muted); cursor:pointer; }
.check input{ width:15px; height:15px; accent-color:var(--c-navy); }
.login-pop__forgot{ color:var(--c-navy); text-decoration:underline; text-underline-offset:3px; }
.login-pop__err{
  display:none; margin-bottom:12px; padding:9px 11px;
  background:#FDECEE; border-left:2px solid #C2415A; color:#8A2338; font-size:12.5px;
}
.login-pop__err[data-show="true"]{ display:block; }
.login-pop__demo{ margin-top:15px; padding-top:14px; border-top:1px solid var(--c-line); font-size:11.5px; color:var(--c-muted); line-height:1.5; }
.login-pop__demo code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--c-navy); }

/* ==========================================================================
   HERO — enclosed on ALL FOUR sides. doc 05 §3. This is the identity.
   ========================================================================== */
.hero{ padding:var(--hero-gutter); background:var(--c-page); }
.hero__panel{
  position:relative; overflow:hidden;
  border-radius:0;                                        /* square, per spec */
  height:calc(100svh - var(--header-h) - (2 * var(--hero-gutter)));
  min-height:560px;
  background:var(--c-navy-deep);
  isolation:isolate;
}
@media (max-width:767px){ .hero__panel{ min-height:480px; } }

.hero__media{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.hero__poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
/* scrim — non-negotiable, doc 05 §3 */
.hero__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  /* Warm-black, not cool-black: a navy scrim greys out golden-hour footage.
     Two layers — a gradient for the top and bottom edges, plus a flat tint so
     the middle never drops away. The current footage runs bright (pale sand,
     turquoise water) exactly where the headline sits, and the old 14% midpoint
     left it fighting the background. Same on every breakpoint: one element,
     one rule. doc 05 §3 requires the layer, not the values. */
  background:
    linear-gradient(180deg, rgba(10,7,4,.46) 0%, rgba(10,7,4,.26) 42%, rgba(10,7,4,.54) 100%),
    rgba(0,0,0,.10);
}

.hero__content{
  position:absolute; z-index:2; left:0; right:0;
  top:46%; transform:translateY(-50%);                    /* doc 05 §4 */
  padding-inline:clamp(16px,4vw,48px);
  text-align:center;
}
.hero__title{
  font-family:var(--f-display); font-weight:700; font-style:italic;
  font-size:clamp(38px,6vw,92px); line-height:1.05; letter-spacing:-.012em;
  color:#F6F4EF;                                          /* off-white, not pure */
  text-wrap:balance;
  text-shadow:0 2px 30px rgba(0,0,0,.28);
}
.hero__sub{                     /* echoes the lockup's small tracked line */
  font-family:var(--f-sans); font-weight:600;
  font-size:clamp(11px,1vw,14px); letter-spacing:.22em; text-transform:uppercase;
  color:var(--c-cream);
  margin-top:22px;
  text-shadow:0 2px 20px rgba(0,0,0,.3);
}

/* action bar — doc 05 §4.3 */
.hero__bar{
  margin:40px auto 0; width:863px; max-width:92%;
  background:#fff; padding:12px; border-radius:0;
  display:flex; align-items:center; gap:15px;
  box-shadow:0 18px 50px rgba(4,14,24,.22);
}
.hero__field{ position:relative; flex:1 1 auto; min-width:0; }
.hero__field svg{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--c-muted); }
.hero__field input{
  width:100%; height:47px; padding:0 14px 0 42px;
  border:1px solid var(--c-line); border-radius:0; background:#fff;
  font-size:15px;
}
.hero__field input:focus{ border-color:var(--c-navy); outline:none; }
.hero__bar .btn{
  flex:0 0 auto; width:115px; height:47px; min-height:47px; padding:0;
  border-radius:0; font-size:12px;
}
@media (max-width:767px){
  /* align-items:stretch is load-bearing. The base rule sets align-items:center,
     which in column direction sizes children to their CONTENT on the cross
     axis — that left the input narrower than the button, which only escaped it
     via an explicit width:100%. Stretch makes both span the bar, per doc 05 §4
     ("input full width, button full width beneath it"). */
  .hero__bar{ flex-direction:column; align-items:stretch; gap:8px; padding:10px; margin-top:28px; }
  .hero__field{ flex:0 0 auto; width:100%; }
  .hero__bar .btn{ width:100%; }
  .hero__sub{ margin-top:14px; }
  /* the stacked bar adds height below the headline, so centre the block
     properly rather than keeping the desktop's 46% optical lift */
  .hero__content{ top:50%; }
}

/* floating badge — fixed to viewport, deliberately breaks the frame (doc 05 §4.4) */
.badge-wa{
  position:fixed; right:28px; bottom:28px; z-index:80;
  width:58px; height:58px; border-radius:50%;
  background:var(--c-navy); color:#fff;
  display:grid; place-items:center;
  box-shadow:0 10px 30px rgba(6,21,35,.34);
  transition:transform .25s var(--ease), background .25s var(--ease);
}
.badge-wa:hover{ transform:translateY(-3px); background:#1E7B4D; }
@media (max-width:767px){ .badge-wa{ width:52px; height:52px; right:20px; bottom:20px; } }

/* ==========================================================================
   INNER PAGE BANNER — same enclosure language, shorter
   ========================================================================== */
.banner{ padding:var(--hero-gutter); background:var(--c-page); }
.banner__panel{
  position:relative; overflow:hidden; background:var(--c-navy-deep);
  height:clamp(300px,46svh,460px);
  display:grid; place-items:center; text-align:center;
}
.banner__panel img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.banner__panel::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(4,14,24,.5) 0%, rgba(4,14,24,.32) 45%, rgba(4,14,24,.6) 100%);
}
.banner__text{ position:relative; z-index:2; padding-inline:24px; }
.banner__text h1{
  font-family:var(--f-display); font-weight:700; font-style:italic; color:var(--c-cream);
  font-size:clamp(32px,5vw,66px); line-height:1.06; letter-spacing:-.015em;
}
.banner__text p{ font-family:var(--f-sans); font-weight:600; color:var(--c-cream); font-size:clamp(11px,1vw,13px); letter-spacing:.2em; text-transform:uppercase; margin-top:16px; }

/* ==========================================================================
   COMPONENTS
   ========================================================================== */

/* trust strip */
.trust{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--c-line); }
.trust__item{ padding:26px 20px 0; text-align:center; border-right:1px solid var(--c-line); }
.trust__item:last-child{ border-right:0; }
.trust__item svg{ margin:0 auto 10px; color:var(--c-gold); }
.trust__item strong{ display:block; font-size:14px; font-weight:500; color:var(--c-navy); }
.trust__item span{ font-size:12.5px; color:var(--c-muted); }
@media (max-width:640px){
  .trust{ grid-template-columns:1fr 1fr; }
  .trust__item{ padding:20px 10px 0; border-bottom:1px solid var(--c-line); }
  .trust__item:nth-child(2){ border-right:0; }
  .trust__item:last-child{ grid-column:1/-1; border-bottom:0; }
}

/* service cards */
.cards{ display:grid; gap:clamp(14px,1.6vw,24px); }
.cards--3{ grid-template-columns:repeat(3,1fr); }
.cards--4{ grid-template-columns:repeat(4,1fr); }
.card{ display:block; background:var(--c-white); overflow:hidden; position:relative; }
.card__media{ position:relative; aspect-ratio:3/2; overflow:hidden; background:#DEE2E4; }
.card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.card:hover .card__media img{ transform:scale(1.05); }
.card__body{ padding:20px 22px 24px; }
.card__body h3{ font-family:var(--f-display); font-size:24px; font-weight:600; line-height:1.25; }
.card__body p{ font-size:13.5px; color:var(--c-muted); margin-top:6px; }
.card__more{
  display:inline-flex; align-items:center; gap:7px; margin-top:14px;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--c-navy); font-weight:500;
}
.card__more svg{ transition:transform .25s var(--ease); }
.card:hover .card__more svg{ transform:translateX(4px); }

/* destination tiles — image-led, minimal text */
.dests{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.4vw,20px); }
.dest{ position:relative; overflow:hidden; aspect-ratio:4/5; display:block; background:#DEE2E4; }
.dest img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.dest:hover img{ transform:scale(1.06); }
.dest::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(4,14,24,0) 40%, rgba(4,14,24,.72) 100%);
}
.dest__label{ position:absolute; left:20px; right:20px; bottom:18px; z-index:2; color:#fff; }
.dest__label h3{ font-family:var(--f-display); font-size:24px; font-weight:600; }
.dest__label span{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--c-gold-lift); }

/* stats — no fill at all.
   Even enclosed, a saturated #000078 slab overpowers a paper page: it is the
   one element on the site carrying a large flat colour. The brand's own sheet
   uses navy as TYPE on paper and gold as hairline rules, so the figures do the
   work and the colour footprint drops to almost nothing. Navy on paper is also
   ~15:1 contrast, where gold on paper is ~2.5:1 — this is the legible way round. */
.stats-band{ background:var(--c-page); padding-block:clamp(38px,5vw,70px); }
.stats{
  width:100%; max-width:var(--wrap); margin-inline:auto;
  padding-inline:var(--page-gutter);
  display:grid; grid-template-columns:repeat(4,1fr);
  border-block:1px solid rgba(195,154,62,.38);   /* gold rules — brand.md's sanctioned accent use */
}
.stat{ padding:clamp(24px,2.8vw,38px) 14px; text-align:center; position:relative; }
.stat + .stat::before{
  content:''; position:absolute; left:0; top:20%; bottom:20%;
  width:1px; background:rgba(195,154,62,.34);
}
.stat__n{
  font-family:var(--f-display); font-weight:400;
  font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1;
  font-size:clamp(36px,4.6vw,60px); line-height:1;
  color:var(--c-navy);
}
.stat__sfx{ font-size:.55em; }
.stat__l{
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--c-muted); margin-top:12px;
}

/* testimonials — text-led, no stock faces presented as clients */
.quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.6vw,22px); }
.quote{ background:var(--c-white); padding:clamp(26px,2.6vw,36px); display:flex; flex-direction:column; }
.section--navy .quote{ background:rgba(255,255,255,.05); border:1px solid var(--c-line-dark); }
.quote__mark{ font-family:var(--f-display); font-size:52px; line-height:.7; color:var(--c-gold); margin-bottom:14px; }
.quote p{ font-family:var(--f-display); font-style:italic; font-size:clamp(17px,1.5vw,20px); line-height:1.45; flex:1 1 auto; }
.section--navy .quote p{ color:#E8EEF3; }
.quote footer{ margin-top:22px; padding-top:16px; border-top:1px solid var(--c-line); }
.section--navy .quote footer{ border-color:var(--c-line-dark); }
.quote cite{ font-style:normal; font-size:13.5px; font-weight:500; display:block; }
.quote small{ font-size:12px; color:var(--c-muted); letter-spacing:.05em; }
.section--navy .quote small{ color:#93A8B9; }

/* split image + text */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,68px); align-items:center; }
.split__media img{ width:100%; aspect-ratio:3/2; object-fit:cover; }
.split--rev .split__media{ order:2; }
.split__body h2{ font-family:var(--f-display); font-weight:600; font-size:clamp(26px,3.4vw,42px); line-height:1.1; letter-spacing:-.015em; }
.split__body p{ margin-top:16px; color:var(--c-muted); }

/* full-bleed CTA band (enclosed, same language as hero) */
.band{ padding:var(--hero-gutter); background:var(--c-page); }
.band__panel{
  position:relative; overflow:hidden; min-height:clamp(320px,44svh,480px);
  display:grid; place-items:center; text-align:center; background:var(--c-navy-deep);
}
.band__panel img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.band__panel::after{ content:''; position:absolute; inset:0; background:rgba(4,14,24,.44); z-index:1; }
.band__inner{ position:relative; z-index:2; padding:40px 24px; }
.band__inner h2{ font-family:var(--f-display); font-weight:700; font-style:italic; color:var(--c-cream); font-size:clamp(30px,4.6vw,62px); line-height:1.06; letter-spacing:-.015em; }
.band__inner .btn{ margin-top:26px; }

/* ---------- footer ---------- */
.site-footer{ background:var(--c-navy-deep); color:#B9C8D5; padding-block:clamp(44px,5vw,72px) 0; }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:clamp(24px,3vw,48px); }
.site-footer h4{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--c-gold); margin-bottom:16px; font-weight:500; }
.site-footer li{ margin-bottom:10px; font-size:14px; }
.site-footer a:hover{ color:#fff; }
.site-footer p{ font-size:14px; line-height:1.7; }
.footer-bottom{
  margin-top:clamp(32px,4vw,52px); padding-block:22px;
  border-top:1px solid var(--c-line-dark);
  display:flex; flex-wrap:wrap; gap:12px 24px; justify-content:space-between;
  font-size:12.5px; color:#7D93A6;
}

/* ---------- forms ---------- */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-grid .field--full{ grid-column:1/-1; }
.field textarea{
  width:100%; min-height:118px; padding:12px; resize:vertical;
  border:1px solid var(--c-line); border-radius:2px; background:#fff; font-family:inherit;
}
.field select{
  width:100%; height:44px; padding:0 12px; border:1px solid var(--c-line); border-radius:2px; background:#fff;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235D6B77' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
}
.field textarea:focus,.field select:focus{ border-color:var(--c-navy); outline:none; }
.form-note{ font-size:12.5px; color:var(--c-muted); margin-top:14px; }
.form-ok{
  display:none; margin-top:16px; padding:14px 16px;
  background:#EAF4EE; border-left:2px solid #2E7D52; color:#1E5637; font-size:14px;
}
.form-ok[data-show="true"]{ display:block; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* contact detail list */
.contact-detail{ margin-bottom:26px; }
.contact-detail h4{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--c-gold); margin-bottom:8px; font-weight:500; }
.contact-detail p,.contact-detail a{ font-size:15px; line-height:1.7; color:var(--c-ink); }
.contact-detail a:hover{ color:var(--c-navy); text-decoration:underline; text-underline-offset:3px; }
.map-frame{ border:0; width:100%; aspect-ratio:16/10; filter:grayscale(1) contrast(.95); }

/* ---------- motion ----------
   Everything here is gated behind html.js (so a failed script never hides
   content) and switched off entirely for prefers-reduced-motion. */

/* Hero settles in on load, one element after another. */
@keyframes riseIn{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
html.js .hero__title{ animation:riseIn .95s var(--ease) both .10s; }
html.js .hero__sub{   animation:riseIn .95s var(--ease) both .28s; }
html.js .hero__bar{   animation:riseIn .95s var(--ease) both .44s; }

/* Grids deal themselves in rather than appearing as a block. */
html.js .reveal.stagger > *{
  opacity:0; transform:translateY(16px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
html.js .reveal.stagger.is-in > *{ opacity:1; transform:none; }
html.js .reveal.stagger.is-in > *:nth-child(1){ transition-delay:.02s; }
html.js .reveal.stagger.is-in > *:nth-child(2){ transition-delay:.10s; }
html.js .reveal.stagger.is-in > *:nth-child(3){ transition-delay:.18s; }
html.js .reveal.stagger.is-in > *:nth-child(4){ transition-delay:.26s; }
html.js .reveal.stagger.is-in > *:nth-child(5){ transition-delay:.34s; }
html.js .reveal.stagger.is-in > *:nth-child(6){ transition-delay:.42s; }
html.js .reveal.stagger.is-in > *:nth-child(7){ transition-delay:.50s; }
html.js .reveal.stagger.is-in > *:nth-child(8){ transition-delay:.58s; }
/* The container itself must not fade too, or the two compound into mush. */
html.js .reveal.stagger{ opacity:1; transform:none; }

/* The gold rules on the stats draw themselves in with the counters. */
html.js .stats{ --rule:0; }
html.js .stats.is-in{ --rule:1; }

@media (prefers-reduced-motion: reduce){
  html.js .hero__title,
  html.js .hero__sub,
  html.js .hero__bar{ animation:none; }
  html.js .reveal.stagger > *{ opacity:1; transform:none; transition:none; }
}

/* ---------- scroll reveal ----------
   Only hide content once JS has confirmed it can reveal it again (html.js is
   set by an inline script in <head>). Without JS every section stays visible
   — content must never be permanently invisible because a script failed. */
html.js .reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
html.js .reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  html.js .reveal{ opacity:1; transform:none; transition:none; }
  .card__media img,.dest img{ transition:none; }
}

/* ==========================================================================
   RESPONSIVE — doc 05 §8. The enclosure holds at EVERY breakpoint.
   ========================================================================== */
@media (max-width:1279px){
  .nav{ gap:24px; }
  .btn-login{ width:150px; }
}

/* tablet & below: centre nav collapses, Login stays visible */
@media (max-width:1023px){
  .burger{ display:grid; }
  .nav{
    position:fixed; inset:var(--header-h) 0 auto 0; transform:none; left:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--c-page); border-top:1px solid var(--c-line);
    padding:8px var(--page-gutter) 20px;
    box-shadow:0 20px 40px rgba(6,21,35,.12);
    display:none; z-index:65;
  }
  .nav[data-open="true"]{ display:flex; }
  .nav a{ padding:15px 0; border-bottom:1px solid var(--c-line); font-size:13px; }
  .nav a:last-child{ border-bottom:0; }
  .nav a::after{ display:none; }
  .header-actions .icon-btn{ display:none; }
  .cards--4{ grid-template-columns:repeat(2,1fr); }
  .dests{ grid-template-columns:repeat(2,1fr); }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .quotes{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .split{ grid-template-columns:1fr; }
  .split--rev .split__media{ order:0; }
}

@media (max-width:767px){
  .site-header__inner{ gap:10px; }
  .logo{ gap:9px; }
  .logo__mark{ width:36px; height:36px; }
  .logo__row{ --lockup-w:132px; gap:7px; }
  .logo__ar-name{ font-size:16px; }
  .logo__ar-sub{ font-size:7.5px; }
  .logo__en-name{ font-size:15px; }
  .logo__en-sub{ font-size:6.5px; letter-spacing:.12em; }
  .btn-login{ width:auto; min-width:104px; height:44px; padding:0 16px; font-size:11.5px; letter-spacing:.05em; }
  .header-actions{ gap:6px; }

  /* login panel anchors full-width under the header — doc 05 §5 */
  .login-pop{
    position:fixed; top:var(--header-h); left:0; right:0; width:auto;
    border-left:0; border-right:0; padding:20px var(--page-gutter) 24px;
    max-height:calc(100svh - var(--header-h)); overflow-y:auto;
  }

  .cards--3,.cards--4{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(odd)::before{ display:none; }
  .stat:nth-child(n+3)::after{
    content:''; position:absolute; top:0; left:14%; right:14%;
    height:1px; background:rgba(195,154,62,.30);
  }
  .footer-grid{ grid-template-columns:1fr; gap:30px; }
  .form-grid{ grid-template-columns:1fr; }
  .trust__item strong{ font-size:13px; }

  /* destinations become a snap-scrolling rail rather than a cramped grid */
  .dests{
    display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
    margin-inline:calc(var(--page-gutter) * -1);
    padding-inline:var(--page-gutter);
  }
  .dests::-webkit-scrollbar{ display:none; }
  .dest{ flex:0 0 74%; scroll-snap-align:start; aspect-ratio:4/5; }
}

@media (max-width:400px){
  .btn-login{ min-width:92px; padding:0 12px; }
}
/* Only drop the Arabic row on genuinely tiny screens — 390px is the most
   common phone width and must keep the full bilingual lockup. */
@media (max-width:359px){
  .logo__row--ar{ display:none; }
  .logo__row{ --lockup-w:112px; }
}

/* short viewport: let it scroll rather than crush the headline (doc 05 §8) */
@media (max-height:520px) and (orientation:landscape){
  .hero__panel{ min-height:420px; }
  .hero__bar{ margin-top:22px; }
}

/* print */
@media print{
  .site-header,.badge-wa,.hero__media{ display:none !important; }
}