/* =========================================================================
   Travel Hub Egypt — Master UI layer
   -------------------------------------------------------------------------
   One shared visual language for every public page: RTL Arabic, Cairo,
   deep navy + teal + gold on warm paper, white cards, quiet shadows.

   This file loads AFTER site.css and is the single place where the master
   direction is defined. site.css keeps the legacy structure; this layer
   owns the tokens, the shared components (.master-*) and the corrections
   that bring the legacy classes in line. Do not fork these values into
   individual pages.
   ========================================================================= */

/* ---------------------------------------------------------------- tokens */
/* These are the Travel Hub Egypt brand values, taken from the parent site
   (travelhubegypt.com) so the two properties read as one company. Do not
   re-tune them per page — change them here or not at all. */
:root{
  /* brand */
  --m-navy:#12365f;
  --m-navy-deep:#0f3157;
  --m-navy-soft:#1c4e84;
  --m-teal:#17a078;
  --m-teal-deep:#0f7e6b;
  --m-gold:#efa400;
  --m-gold-deep:#d98d0a;
  --m-gold-tint:#fdf3de;

  /* surfaces */
  --m-paper:#fffdf9;
  --m-paper-warm:#faf5ec;
  --m-surface:#ffffff;
  --m-surface-alt:#f5f8f7;

  /* ink */
  --m-ink:#12263a;
  --m-ink-2:#31485f;
  --m-muted:#5a6b7b;
  --m-line:#e6ddcc;
  --m-line-cool:#dde4ea;

  /* radii — 8 / 12 / 16, same scale as the parent brand */
  --m-r-sm:8px;
  --m-r-md:12px;
  --m-r-lg:16px;
  --m-r-pill:999px;

  /* elevation */
  --m-sh-1:0 2px 8px rgba(18,38,58,.06);
  --m-sh-2:0 10px 26px -10px rgba(18,38,58,.22);
  --m-sh-3:0 14px 34px -16px rgba(18,38,58,.30);

  /* spacing scale */
  --m-1:4px;  --m-2:8px;  --m-3:12px; --m-4:16px; --m-5:22px;
  --m-6:30px; --m-7:40px; --m-8:56px; --m-9:76px; --m-10:100px;

  /* layout */
  --m-maxw:1320px;
  --m-section-y:clamp(46px, 6vw, 84px);

  /* legacy aliases — keep site.css consistent with the master palette */
  --navy:var(--m-navy);
  --navy-deep:var(--m-navy-deep);
  --gold:var(--m-gold);
  --gold-deep:var(--m-gold-deep);
  --gold-soft:#e5cd9c;
  --gold-bg:var(--m-gold-tint);
  --paper:var(--m-paper);
  --ink:var(--m-ink);
  --ink-light:var(--m-ink-2);
  --muted:var(--m-muted);
  --line:var(--m-line);
  --radius:var(--m-r-lg);
  --shadow:var(--m-sh-2);
  --shadow-lg:var(--m-sh-3);
}

/* ========================================================================
   Brand refinement — quiet confidence, August 2026
   One clear navigation, editorial spacing, no decorative icon noise.
   ======================================================================== */
:root{
  --brand-navy:#082f5b;
  --brand-ink:#12253a;
  --brand-gold:#b98a2f;
  --brand-green:#129978;
  --brand-ivory:#fbf8f1;
  --brand-paper:#fffefa;
}

body{background:var(--brand-paper);color:var(--brand-ink)}
.thb-topbar,.trust-strip,.depart-strip,.compliance-ribbon,.fab,.mobile-bar{display:none!important}
.thb-header{
  position:sticky;top:0;z-index:100;background:rgba(255,254,250,.97);
  border-bottom:1px solid rgba(8,47,91,.11);box-shadow:none;
}
.thb-header .nav{min-height:88px;gap:36px}
.brand{min-width:168px;gap:10px}
.brand-logo{width:112px;height:auto;object-fit:contain}
.brand-text,.brand-sub{display:none}
.menu{margin-inline:auto}
.menu ul{gap:30px}
.menu a{font-size:15px;font-weight:700;color:#233a51;padding:32px 0 27px}
.menu a::after{height:2px;background:var(--brand-gold)}
.nav-actions{gap:12px}
.header-wa{background:transparent!important;color:var(--brand-navy)!important;border:1px solid rgba(8,47,91,.28)!important;padding:11px 18px!important;box-shadow:none!important}
.header-wa:hover{background:var(--brand-navy)!important;color:#fff!important}

.hero.hero-photographic{min-height:650px;background-color:var(--brand-ivory)}
.hero-grid{min-height:650px}
.hero-copy{max-width:650px;padding:78px 0 68px}
.eyebrow,.sec-eyebrow,.master-eyebrow{letter-spacing:.02em;background:none!important;border:0!important;padding:0!important;color:var(--brand-gold)!important;font-size:14px;font-weight:800}
.hero h1{font-size:clamp(3.4rem,5.5vw,5.3rem);line-height:1.02;letter-spacing:-.055em;color:var(--brand-navy)}
.hero .lead{max-width:600px;font-size:18px;line-height:2;color:#43566a}
.hero-ctas{gap:12px;margin-top:28px}
.btn{min-height:50px;border-radius:8px;font-weight:800;box-shadow:none}
.btn-wa{background:var(--brand-navy);border-color:var(--brand-navy)}
.btn-teal{background:var(--brand-green);border-color:var(--brand-green)}
.hero-meta{margin-top:30px;padding-top:24px;border-top:1px solid rgba(8,47,91,.14);gap:0}
.hero-meta>div{padding:0 22px;border-inline-start:1px solid rgba(8,47,91,.12)}
.hero-meta>div:first-child{padding-inline-start:0;border:0}

section{padding-block:96px}
.sec-head,.master-head{margin-bottom:42px}
.sec-head h2,.master-heading{font-size:clamp(2rem,3vw,3rem);letter-spacing:-.035em;color:var(--brand-navy)}
.sec-head p,.master-head p{max-width:700px;margin-inline:auto;color:#68778a;font-size:16px;line-height:1.9}

.search-card{border:1px solid #e4e7e9;border-radius:14px;box-shadow:none;background:#fff;margin-bottom:36px}
.search-wrap{padding:24px}
.search-wrap>h2{font-size:18px;margin-bottom:18px;color:var(--brand-navy)}
.search-field label{font-size:12px;color:#68778a}
.search-field select{border-radius:7px;border-color:#dfe3e7;background:#fff}
.search-actions{border-top:1px solid #eceeef;padding-top:18px;margin-top:18px}

.prog-grid{grid-template-columns:repeat(2,minmax(0,420px));justify-content:center;gap:28px}
.prog-card{border:1px solid #e0e4e7;border-radius:12px;box-shadow:none;background:#fff;overflow:hidden;transition:transform .2s ease,border-color .2s ease}
.prog-card:hover{transform:translateY(-4px);border-color:rgba(185,138,47,.6);box-shadow:0 18px 45px rgba(8,47,91,.09)}
.pc-image{height:265px}
.pc-image img{filter:saturate(.84) contrast(.98)}
.pc-badge,.pc-illustrative{border-radius:4px;box-shadow:none}
.pc-body{padding:25px}
.pc-body h3{font-size:20px;line-height:1.65;color:var(--brand-navy)}
.pc-dates{font-size:13px;color:#7b8794;margin:8px 0 18px}
.pc-hotels{gap:7px}
.pc-hotel,.pc-transport{font-size:14px;color:#4c5d6e}
.pc-hotel svg,.pc-transport svg{display:none}
.pc-price-row{margin-top:22px;padding-top:20px;border-top:1px solid #e8eaec}
.pc-price b{font-size:25px;color:var(--brand-gold)}
.pc-cta{border:1px solid var(--brand-navy);background:transparent;color:var(--brand-navy);border-radius:7px}

.trip-steps,.children-policy{background:var(--brand-ivory)}
.steps-wrapper{gap:14px}
.step-item,.child-card,.master-card{border:1px solid #e4e7e9;border-radius:12px;box-shadow:none;background:#fff}
.step-num{background:transparent;border:1px solid rgba(185,138,47,.45);color:var(--brand-gold);box-shadow:none}
.child-kicker,.card-kicker{display:inline-block;color:var(--brand-gold);font-size:12px;font-weight:800;letter-spacing:.02em;margin-bottom:14px}
.child-icon{display:none}

footer{background:#092f59;border-top:0;padding-top:72px}
.foot-grid{gap:64px}
.foot-brand h3{color:#fff;font-size:25px;margin-bottom:16px}
.foot-brand p{max-width:390px;color:rgba(255,255,255,.7);line-height:2}
.foot-lic{background:transparent;border:1px solid rgba(185,138,47,.48);border-radius:6px;padding:9px 12px}
.branch{display:block;padding:0 0 17px;border-bottom:1px solid rgba(255,255,255,.09)}
.branch svg{display:none}
.foot-legal{margin-top:46px;border-top:1px solid rgba(255,255,255,.12)}

@media(max-width:1024px){
  .thb-header .nav{min-height:72px}
  .brand-logo{width:94px}
  .hero.hero-photographic,.hero-grid{min-height:580px}
  .hero-copy{padding-block:54px}
  .hero h1{font-size:clamp(3rem,8vw,4.4rem)}
  section{padding-block:76px}
}

@media(max-width:768px){
  .thb-header .nav{min-height:68px;padding-inline:18px}
  .brand-logo{width:88px}
  .header-wa{display:none!important}
  .hero.hero-photographic{min-height:auto;background-position:63% center}
  .hero-grid{min-height:620px;align-items:end}
  .hero-copy{margin-inline:-18px;padding:190px 24px 38px;background:linear-gradient(0deg,#fffefa 0%,rgba(255,254,250,.96) 70%,rgba(255,254,250,0) 100%)}
  .hero h1{font-size:clamp(2.65rem,13vw,3.55rem)}
  .hero .lead{font-size:16px;line-height:1.9}
  .hero-ctas{display:grid}.hero-ctas .btn{width:100%}
  .hero-meta{grid-template-columns:1fr 1fr;row-gap:20px}
  .hero-meta>div{padding-inline:12px;border:0}
  section{padding-block:64px}
  .sec-head,.master-head{margin-bottom:30px;text-align:start}
  .sec-head p,.master-head p{margin-inline:0}
  .search-card{margin-inline:-4px}
  .search-wrap{padding:18px}
  .prog-grid{grid-template-columns:1fr;gap:20px}
  .pc-image{height:230px}
  .foot-grid{gap:36px}
}

/* Almostafa release — calm, editorial public experience.
   Keep one restrained brand accent (teal) and remove ornamental gold rules.
   This block is intentionally last so legacy visual experiments cannot leak
   into the public home, program, or event pages. */
:root{
  --m-gold:var(--m-teal);
  --m-gold-deep:var(--m-teal-deep);
  --m-gold-tint:#e7f6f2;
  --gold:var(--m-teal);
  --gold-deep:var(--m-teal-deep);
  --gold-soft:#9fdcd2;
  --gold-bg:#e7f6f2;
  --brand-gold:var(--m-teal);
}
header.thb-header::after,
.master-info-strip::before,
.master-info-strip::after,
.islamic-rule::before,
.islamic-rule::after{content:none!important;background:none!important}
.thb-header{border-bottom-color:rgba(8,47,91,.09)}
.menu a::after{background:var(--m-teal)!important}
.eyebrow,.sec-eyebrow,.master-eyebrow,.child-kicker,.card-kicker{color:var(--m-teal-deep)!important}
.hero.hero-photographic{
  background:#f8f6f1 url("hero-kaaba-almostafa.png") center center/cover no-repeat!important;
}
.hero.hero-photographic::before{
  background:linear-gradient(90deg,rgba(255,254,250,.985) 0%,rgba(255,254,250,.94) 45%,rgba(255,254,250,.48) 68%,rgba(255,254,250,.08) 100%)!important;
}
.hero .accent,.pc-price b,.prog-price-box b{color:var(--m-teal-deep)!important}
.btn-wa{background:#082f5b!important;border-color:#082f5b!important}
.btn-teal{background:var(--m-teal)!important;border-color:var(--m-teal)!important}
.master-info-strip{border-bottom-color:var(--m-teal)!important}
.prog-card:hover{border-color:rgba(18,153,120,.55)!important}
.step-num{border-color:rgba(18,153,120,.38)!important;color:var(--m-teal-deep)!important}
@media(max-width:768px){
  .hero.hero-photographic{background-position:64% center!important}
  .hero.hero-photographic::before{background:linear-gradient(0deg,#fffefa 0%,rgba(255,254,250,.96) 68%,rgba(255,254,250,.12) 100%)!important}
}

/* Breakpoints used across this file (documented, since CSS has no vars for them):
   >1180  desktop      1024–1180 small desktop
   768–1024 tablet     <768 mobile      <=420 small mobile              */

/* ------------------------------------------------------------- base page */
body{
  background:var(--m-paper);
  color:var(--m-ink);
  font-family:"Cairo",system-ui,sans-serif;
  background-image:none;
}
/* The page texture is a khatam — the eight-point star built from two squares,
   the most common motif in Mamluk and Ottoman ornament. Kept near-invisible:
   it should register as paper grain, never as wallpaper. */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cg fill='none' stroke='%2312365f' stroke-width='1' opacity='0.02'%3E%3Crect x='23' y='23' width='44' height='44'/%3E%3Crect x='23' y='23' width='44' height='44' transform='rotate(45 45 45)'/%3E%3C/g%3E%3C/svg%3E");
  background-size:132px 132px;
}
.container{max-width:var(--m-maxw)}
/* site.css sets img,svg{display:block}, which defeats the hidden attribute —
   the empty file-preview images were rendering as broken-image + alt text. */
[hidden]{display:none !important}
html,body{overflow-x:clip;max-width:100%}
/* The honeypot used right:-9999px, which really does widen the layout in RTL.
   A zero-size clipped box hides it from people just as well without pushing
   the document past the viewport. */
.hp{position:absolute;right:auto;width:0;height:0;opacity:0;overflow:hidden;pointer-events:none}

/* ============================== components =============================== */

/* --- section shell ------------------------------------------------------ */
.master-section{
  position:relative;
  padding-block:var(--m-section-y);
  background:var(--m-paper);
}
.master-section--alt{background:var(--m-paper-warm)}
.master-section--white{background:var(--m-surface)}
.master-section--tight{padding-block:clamp(30px,4vw,52px)}

/* --- headings ----------------------------------------------------------- */
.master-eyebrow,
.sec-eyebrow{
  display:inline-block;
  color:var(--m-gold-deep);
  font-weight:800;
  font-size:.86rem;
  letter-spacing:.02em;
  margin-bottom:var(--m-2);
}
.master-heading,
.sec-head h2,
.section-title h2{
  color:var(--m-navy);
  font-weight:900;
  font-size:clamp(1.5rem,2.6vw,2.15rem);
  line-height:1.45;
  letter-spacing:-.02em;
}
.master-head{
  max-width:780px;
  margin-inline:auto;
  margin-bottom:var(--m-7);
  text-align:center;
}
.master-head p{
  color:var(--m-muted);
  font-size:1rem;
  line-height:1.95;
  margin-top:var(--m-2);
}
/* The section rule: a gold hairline broken by an eight-point star. This is
   the one ornament that repeats site-wide, so it carries the identity. */
.master-head .master-heading::after,
.sec-head h2::after{
  content:"";display:block;width:150px;height:14px;
  margin:var(--m-4) auto 0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='14' viewBox='0 0 150 14'%3E%3Cg stroke='%23efa400' stroke-width='1.4' fill='none' stroke-linecap='round'%3E%3Cpath d='M2 7h50M98 7h50'/%3E%3Cpath d='M75 1.6 80.4 7 75 12.4 69.6 7z'/%3E%3Cpath d='M70.8 2.8 79.2 11.2M79.2 2.8 70.8 11.2'/%3E%3C/g%3E%3C/svg%3E") center/150px 14px no-repeat;
}

/* --- cards -------------------------------------------------------------- */
.master-card{
  background:var(--m-surface);
  border:1px solid var(--m-line-cool);
  border-radius:var(--m-r-md);
  box-shadow:var(--m-sh-2);
  padding:var(--m-5);
}
.master-card--flat{box-shadow:var(--m-sh-1)}
.master-card--gold{border-color:#eddcbc;background:var(--m-gold-tint);box-shadow:none}

/* --- buttons ------------------------------------------------------------ */
.master-btn-primary,
.master-btn-secondary{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--m-2);
  min-height:46px;padding:12px 22px;
  border-radius:var(--m-r-sm);
  font:800 .95rem/1 "Cairo",sans-serif;
  border:1.5px solid transparent;
  cursor:pointer;text-align:center;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.master-btn-primary{background:var(--m-teal);color:#fff}
.master-btn-primary:hover{background:var(--m-teal-deep)}
.master-btn-secondary{background:transparent;color:var(--m-navy);border-color:var(--m-navy)}
.master-btn-secondary:hover{background:var(--m-navy);color:#fff}
.master-btn-primary:active,.master-btn-secondary:active{transform:translateY(1px)}

/* --- info strip (date / place / audience) -------------------------------- */
.master-info-strip{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  background:linear-gradient(120deg,var(--m-navy-deep),var(--m-navy-soft));
  border-radius:var(--m-r-lg);
  border-bottom:4px solid var(--m-gold);
  box-shadow:var(--m-sh-3);
  padding:var(--m-4) var(--m-3);
  color:#fff;
}
.master-info-strip > div{
  display:flex;align-items:center;gap:var(--m-3);
  padding:var(--m-2) var(--m-4);
  border-inline-start:1px solid rgba(255,255,255,.28);
}
.master-info-strip > div:first-child{border-inline-start:0}
.master-info-strip .mi-text{min-width:0}
.master-info-strip b{display:block;font-size:.86rem;font-weight:800;line-height:1.6}
.master-info-strip span{display:block;color:#d6e5f2;font-size:.78rem;line-height:1.7}
.master-info-strip svg{width:26px;height:26px;flex:0 0 26px;stroke:var(--m-gold);fill:none;stroke-width:1.7}

/* --- icon frame: a mihrab arch, not a circle ----------------------------- */
/* The pointed-arch niche is the most recognisable form in Islamic
   architecture and stays legible even at 48px. */
.master-icon-circle{
  display:grid;place-items:center;
  width:62px;height:72px;
  border-radius:50% 50% var(--m-r-sm) var(--m-r-sm) / 58% 58% var(--m-r-sm) var(--m-r-sm);
  background:var(--m-surface-alt);
  border:1px solid var(--m-line-cool);
  color:var(--m-teal);
  margin-inline:auto;
}
.master-icon-circle--round{width:62px;height:62px;border-radius:50%}
.master-icon-circle svg{width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:1.7}
.master-icon-circle--gold{background:var(--m-gold-tint);border-color:#eddcbc;color:var(--m-gold-deep)}

/* --- forms -------------------------------------------------------------- */
.master-form{display:grid;gap:var(--m-3)}
.master-form .mf-field{display:grid;gap:6px}
.master-form label,
.master-form .mf-label{
  font-weight:700;font-size:.85rem;color:var(--m-ink-2);
}
.master-form input:not([type=checkbox]):not([type=file]),
.master-form select,
.master-form textarea{
  width:100%;min-height:46px;
  padding:10px 14px;
  border:1px solid var(--m-line-cool);
  border-radius:var(--m-r-sm);
  background:var(--m-surface);
  font:700 .92rem "Cairo",sans-serif;
  color:var(--m-ink);
}
.master-form textarea{min-height:96px;padding-top:12px;line-height:1.8}
.master-form input:focus,.master-form select:focus,.master-form textarea:focus{
  outline:none;border-color:var(--m-teal);box-shadow:0 0 0 3px rgba(7,158,140,.14);
}
.master-form .mf-hint{font-size:.76rem;color:var(--m-muted);font-weight:600}
.master-form .mf-consent{
  display:flex;gap:var(--m-2);align-items:flex-start;
  font-size:.8rem;line-height:1.85;color:var(--m-ink-2);font-weight:600;
}
.master-form .mf-consent input{margin-top:5px;width:17px;height:17px;flex:0 0 17px;accent-color:var(--m-teal)}
.master-form .mf-consent a{color:var(--m-teal-deep);text-decoration:underline}
.master-form fieldset{border:0;border-top:1px solid var(--m-line-cool);padding:var(--m-4) 0 0;margin-top:var(--m-2)}
.master-form legend{padding:0 var(--m-2);font-weight:800;font-size:.88rem;color:var(--m-navy)}
.master-form button[type=submit]{width:100%}

/* --- empty state -------------------------------------------------------- */
.master-empty-state{
  display:grid;justify-items:center;gap:var(--m-3);text-align:center;
  background:var(--m-surface);
  border:1px dashed #cfd9e2;
  border-radius:var(--m-r-lg);
  padding:var(--m-8) var(--m-5);
  max-width:680px;margin-inline:auto;
}
.master-empty-state h3{color:var(--m-navy);font-size:1.15rem;font-weight:800}
.master-empty-state p{color:var(--m-muted);line-height:1.95;max-width:52ch}
.master-empty-state .master-icon-circle{margin-bottom:var(--m-1)}

/* --- misc shared -------------------------------------------------------- */
.master-note{
  display:flex;gap:var(--m-3);align-items:flex-start;
  background:var(--m-gold-tint);border:1px solid #eddcbc;
  border-radius:var(--m-r-md);padding:var(--m-4) var(--m-5);
  color:#6b5220;font-size:.9rem;line-height:1.95;font-weight:600;
}
.master-note svg{width:22px;height:22px;flex:0 0 22px;margin-top:4px;stroke:var(--m-gold-deep);fill:none;stroke-width:1.8}
.master-pill{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--m-gold-tint);border:1px solid #eddcbc;color:var(--m-gold-deep);
  border-radius:var(--m-r-pill);padding:6px 14px;font-weight:800;font-size:.8rem;
}

/* =========================== header / footer ============================= */
/* The parent brand's chrome: a white sticky bar, the real logo, plain text
   navigation and a teal WhatsApp button. The only addition for this property
   is the licence strip above it — the trust signal that matters most in the
   Egyptian Hajj and Umrah market. */

.thb-topbar{
  background:var(--m-navy-deep);
  color:#cfdcea;
  font-size:.79rem;
  position:relative;z-index:41;
}
.thb-topbar .container{
  display:flex;align-items:center;justify-content:space-between;gap:var(--m-4);
  min-height:36px;flex-wrap:wrap;
}
.thb-lic{display:inline-flex;align-items:center;gap:7px;color:#e7eef5;font-weight:600}
.thb-lic b{color:var(--m-gold);font-weight:800}
.thb-lic svg{width:15px;height:15px;flex:0 0 15px;stroke:var(--m-gold);fill:none;stroke-width:1.7}
.thb-topbar-info{display:flex;align-items:center;gap:var(--m-5);flex-wrap:wrap}
.thb-topbar-info a{
  display:inline-flex;align-items:center;gap:6px;
  color:#cfdcea;font-weight:600;transition:color .16s ease;
}
.thb-topbar-info a:hover{color:var(--m-gold)}
.thb-topbar-info svg{width:14px;height:14px;flex:0 0 14px;stroke:var(--m-gold);fill:none;stroke-width:1.7}

header.thb-header,
header{
  position:sticky;top:0;z-index:40;
  background:var(--m-surface);
  border-block-end:1px solid var(--m-line-cool);
  box-shadow:none;
  transition:box-shadow .25s ease;
}
/* A single gold hairline under the bar — the one ornament the header gets. */
header.thb-header::after{
  content:"";position:absolute;inset-inline:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,transparent,var(--m-gold) 20%,var(--m-gold) 80%,transparent);
  opacity:.55;
}
.nav{
  display:flex;align-items:center;gap:var(--m-5);
  min-height:68px;padding-block:8px;flex-wrap:nowrap;
}
.brand{display:flex;align-items:center;flex:0 0 auto;min-width:0}
/* On white, the real navy logo needs no plate at all. */
.brand-logo{
  display:block;width:auto;height:42px;max-width:190px;
  object-fit:contain;object-position:center;
  background:none;border-radius:0;padding:0;box-shadow:none;
}
.brand .brand-text,.brand .brand-sub{
  position:absolute;inset-inline-start:0;top:0;
  width:1px;height:1px;padding:0;margin:0;border:0;
  overflow:hidden;white-space:nowrap;clip-path:inset(50%);
}
.menu{margin-inline:auto}
.menu ul{display:flex;align-items:center;gap:var(--m-2);margin:0;padding:0;white-space:nowrap}
.menu a{
  display:inline-block;position:relative;
  color:var(--m-ink);font-weight:700;font-size:.88rem;
  padding:10px 12px;border-radius:var(--m-r-sm);
  transition:color .16s ease,background .16s ease;
}
.menu a:hover{color:var(--m-teal-deep);background:var(--m-surface-alt)}
.menu a[aria-current="page"]{color:var(--m-navy)}
.menu a[aria-current="page"]::after{
  content:"";position:absolute;inset-inline:12px;bottom:2px;height:3px;
  border-radius:2px;background:var(--m-gold);
}
.menu-mobile-action{display:none}

.nav-actions{display:flex;align-items:center;gap:var(--m-3);flex:0 0 auto}
.nav .btn,.nav-actions .btn{border-radius:var(--m-r-sm);font-weight:800;white-space:nowrap}
.header-wa{
  display:inline-flex;align-items:center;gap:8px;
  min-height:42px;padding:0 18px;font-size:.86rem;
  background:var(--m-teal);color:#fff;
}
.header-wa:hover{background:var(--m-teal-deep)}
.header-wa svg{width:18px;height:18px;fill:currentColor}
.lic-chip{display:none}
.user-badge{
  border:1px solid var(--m-line-cool);color:var(--m-ink-2);background:var(--m-surface-alt);
  border-radius:var(--m-r-pill);padding:7px 13px;font-size:.78rem;font-weight:700;
}
.user-badge:hover{border-color:var(--m-teal);color:var(--m-teal-deep)}
.user-badge .role{color:var(--m-muted);font-weight:600}

/* burger — three rules, not a glyph */
.menu-toggle{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0 10px;cursor:pointer;
  background:transparent;border:1px solid var(--m-line-cool);border-radius:var(--m-r-sm);
}
.menu-toggle span{display:block;height:2px;border-radius:2px;background:var(--m-navy);transition:transform .2s ease,opacity .2s ease}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.menu-close{display:none}

/* footer ------------------------------------------------------------------ */
footer{
  background:linear-gradient(115deg,var(--m-navy-deep),var(--m-navy));
  border-top:3px solid var(--m-gold);
  padding-top:var(--m-9);
  color:#d7e2ee;
  position:relative;z-index:1;
}
.foot-grid{
  display:grid;grid-template-columns:1.6fr 1fr 1.15fr 1.25fr;
  gap:var(--m-7);padding-bottom:var(--m-8);
}
.foot-logo{
  height:44px;width:auto;max-width:180px;margin-bottom:var(--m-4);
  background:#fff;border-radius:var(--m-r-sm);padding:7px 11px;
}
footer h4{
  color:#fff;font-size:.98rem;font-weight:800;margin-bottom:var(--m-4);
  padding-bottom:var(--m-2);position:relative;
}
footer h4::after{
  content:"";position:absolute;inset-inline-start:0;bottom:0;
  width:34px;height:2px;border-radius:2px;background:var(--m-gold);
}
.foot-brand p{color:#b3c6d9;line-height:2.05;font-size:.89rem}
.foot-brand .foot-lic{
  display:inline-flex;align-items:center;gap:8px;margin-top:var(--m-4);
  border:1px solid rgba(239,164,0,.45);border-radius:var(--m-r-sm);
  padding:8px 14px;font-size:.8rem;color:#fff;font-weight:700;
}
.foot-brand .foot-lic b{color:var(--m-gold)}
.foot-brand .foot-lic svg{width:16px;height:16px;flex:0 0 16px;stroke:var(--m-gold);fill:none;stroke-width:1.7}
footer ul{display:grid;gap:12px}
footer a{color:#c2d3e3;font-size:.89rem;transition:color .16s ease}
footer a:hover{color:var(--m-gold)}
footer ul li a span[dir=ltr]{display:block;color:#8ea7c0;font-size:.82rem;margin-top:2px}
.branch{display:flex;gap:10px;align-items:flex-start;margin-bottom:var(--m-4);font-size:.85rem;line-height:1.85}
.branch svg{width:18px;height:18px;flex:0 0 18px;margin-top:3px;stroke:var(--m-gold);fill:none;stroke-width:1.7}
.branch b{display:block;color:#fff;font-weight:800;margin-bottom:2px}
.branch span{color:#b3c6d9}
.foot-legal{
  display:flex;align-items:center;justify-content:space-between;gap:var(--m-4);
  flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.14);
  padding-block:var(--m-5);color:#8ea7c0;font-size:.81rem;
}
.foot-legal-facts{display:flex;gap:var(--m-4);flex-wrap:wrap}
.foot-legal-facts span{display:inline-flex;align-items:center;gap:7px}
.foot-legal-facts span::before{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--m-gold);flex:0 0 5px;
}
.foot-legal-links{display:flex;gap:var(--m-4)}
.foot-legal-links a{font-size:.81rem}
.fab{background:var(--m-teal);box-shadow:0 8px 22px -6px rgba(23,160,120,.55)}
.fab:hover{background:var(--m-teal-deep)}

/* ============================ page furniture ============================= */

/* --- hero (home): copy on the RTL reading side ---------------------------- */
.hero.hero-photographic{
  min-height:600px;padding:0;display:flex;align-items:stretch;overflow:hidden;
  background:#f6ecdc url("hero-kaaba-v2.jpg") center center/cover no-repeat;
}
.hero.hero-photographic::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,
    rgba(255,253,249,.985) 0%,
    rgba(255,253,249,.95) 30%,
    rgba(255,253,249,.52) 56%,
    rgba(255,253,249,.06) 100%);
}
.hero.hero-photographic::after{content:none}
.hero-photographic .hero-grid{min-height:600px;display:flex;align-items:center;width:100%;position:relative}
.hero-photographic .hero-copy{
  width:min(560px,50%);max-width:none;
  margin-inline-start:auto;margin-inline-end:0;
  padding-block:var(--m-7);position:relative;
  border-inline-start:3px solid var(--m-gold);padding-inline-start:var(--m-5);
}
.hero-photographic .hero-img{display:none}
.hero .eyebrow{
  display:inline-block;background:rgba(255,255,255,.82);
  border:1px solid rgba(230,164,43,.4);box-shadow:var(--m-sh-1);
  border-radius:var(--m-r-pill);padding:7px 15px;
  color:var(--m-gold-deep);font-weight:800;font-size:.8rem;
}
.hero h1{
  font-size:clamp(2.4rem,4.2vw,3.9rem);line-height:1.24;
  letter-spacing:-.035em;color:var(--m-navy-deep);font-weight:900;
}
.hero h1 .accent{color:var(--m-teal)}
.hero p.lead{max-width:520px;font-size:1.02rem;line-height:2;color:var(--m-ink-2);margin-bottom:var(--m-5)}
.hero-ctas{display:flex;gap:var(--m-3);flex-wrap:wrap}

/* --- buttons: one meaning per class across every page --------------------- */
/* Legacy class names are kept so no markup has to change: .btn-wa is the
   primary action (teal), .btn-teal the secondary (navy), .btn-gold the
   accent. Only the paint is unified here. */
.btn{border-radius:var(--m-r-sm);font-weight:800;padding:12px 22px;min-height:46px}
.btn-wa{background:var(--m-teal);color:#fff}
.btn-wa:hover{background:var(--m-teal-deep)}
.btn-teal{background:var(--m-navy);color:#fff}
.btn-teal:hover{background:var(--m-navy-deep)}
.btn-gold{background:var(--m-gold);color:#43300b}
.btn-gold:hover{background:var(--m-gold-deep);color:#fff}
.btn-hajj{background:var(--m-teal);color:#fff}
.btn-hajj:hover{background:var(--m-teal-deep)}
.btn-sm{min-height:38px;padding:8px 16px;font-size:.82rem}
/* .btn-ghost was authored for dark bars; on paper it needs ink, not white. */
.btn-ghost{background:transparent;border:1.5px solid var(--m-navy);color:var(--m-navy)}
.btn-ghost:hover{background:var(--m-navy);color:#fff}
header .btn-ghost,footer .btn-ghost,.trust .btn-ghost,.comply .btn-ghost,
.cta-band .btn-ghost,.mobile-bar .btn-ghost,.admin-quick .btn-ghost{
  border-color:rgba(255,255,255,.45);color:#fff;
}
header .btn-ghost:hover,footer .btn-ghost:hover,.cta-band .btn-ghost:hover,
.mobile-bar .btn-ghost:hover,.admin-quick .btn-ghost:hover{background:rgba(255,255,255,.14);color:#fff}
.hero-meta{
  display:flex;gap:var(--m-6);flex-wrap:wrap;
  margin-top:var(--m-5);padding-top:var(--m-4);
  border-top:1px solid rgba(6,55,102,.16);
}
.hero-meta div{display:grid;gap:2px}
.hero-meta b{color:var(--m-navy);font-size:1rem;font-weight:800}
.hero-meta div>*:last-child,.hero-meta small{color:var(--m-muted);font-size:.78rem}

/* --- trust strip --------------------------------------------------------- */
.trust{
  background:linear-gradient(110deg,var(--m-navy-deep),var(--m-navy-soft));
  position:relative;margin-top:-28px;z-index:2;
}
.trust .container{padding-inline:0}
.trust ul{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-radius:var(--m-r-lg);overflow:hidden;
  background:linear-gradient(110deg,var(--m-navy-deep),var(--m-navy-soft));
  border-bottom:3px solid var(--m-gold);box-shadow:var(--m-sh-3);
}
.trust li{
  display:flex;gap:var(--m-3);align-items:flex-start;
  padding:var(--m-5) var(--m-4);color:#e8f0f7;font-size:.85rem;line-height:1.85;
  border-inline-start:1px solid rgba(255,255,255,.14);
}
.trust li:first-child{border-inline-start:0}
.trust svg{width:24px;height:24px;flex:0 0 24px;margin-top:2px}
.trust svg,.trust svg path,.trust svg circle,.trust svg rect{stroke:var(--m-gold)}

/* --- departure cities ---------------------------------------------------- */
.depart{background:var(--m-paper);padding-block:var(--m-8)}
.depart-grid{display:grid;grid-template-columns:1fr 1.35fr;gap:var(--m-7);align-items:center}
.depart h2{color:var(--m-navy);font-weight:900;font-size:clamp(1.3rem,2.1vw,1.7rem);line-height:1.55}
.depart p{color:var(--m-muted);margin-top:var(--m-2);line-height:1.95;font-size:.94rem}
.city-list{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--m-3)}
.city{
  display:flex;gap:var(--m-3);align-items:center;
  background:var(--m-surface);border:1px solid var(--m-line-cool);
  border-radius:var(--m-r-md);padding:var(--m-4);box-shadow:var(--m-sh-1);
  transition:border-color .18s ease,transform .18s ease;
}
.city:hover{border-color:var(--m-gold);transform:translateY(-2px)}
.city svg{width:22px;height:22px;flex:0 0 22px;stroke:var(--m-teal);fill:none}
.city div{font-weight:800;color:var(--m-navy);font-size:.92rem;line-height:1.6}
.city span{display:block;font-weight:600;color:var(--m-muted);font-size:.78rem}

/* --- section rhythm ------------------------------------------------------ */
section{padding-block:var(--m-section-y)}
.sec-head{max-width:780px;margin-inline:auto;margin-bottom:var(--m-7);text-align:center}
.sec-head p{color:var(--m-muted);font-size:1rem;line-height:1.95;margin-top:var(--m-2)}

/* --- program cards ------------------------------------------------------- */
.prog-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
  gap:var(--m-5);align-items:stretch;
}
.prog-card{
  position:relative;display:flex;flex-direction:column;
  background:var(--m-surface);
  border:1px solid var(--m-line-cool);
  border-radius:var(--m-r-md);
  box-shadow:var(--m-sh-2);
  overflow:hidden;height:100%;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.prog-card::before{
  content:"";position:absolute;inset-inline:0;top:0;height:3px;z-index:2;
  background:linear-gradient(90deg,transparent,var(--m-gold),transparent);
  opacity:0;transition:opacity .2s ease;
}
.prog-card:hover::before{opacity:1}
.prog-card:hover{transform:translateY(-4px);box-shadow:var(--m-sh-3);border-color:var(--m-gold)}
.pc-image{position:relative;aspect-ratio:16/10;height:auto;background:#eef1f4;overflow:hidden}
.pc-image img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.prog-card:hover .pc-image img{transform:scale(1.04)}
.pc-badge{
  position:absolute;top:0;inset-inline-start:var(--m-4);
  border-radius:0 0 var(--m-r-sm) var(--m-r-sm);
  padding:6px 13px;color:#fff;font-weight:800;font-size:.78rem;
}
/* Honest marker: this card is showing the generic fallback, not the hotel. */
.pc-illustrative{
  position:absolute;inset-inline-end:var(--m-3);bottom:var(--m-3);
  background:rgba(4,38,74,.78);color:#fff;
  border-radius:var(--m-r-pill);padding:4px 11px;
  font-size:.68rem;font-weight:700;letter-spacing:.01em;
}
.pc-body{display:flex;flex-direction:column;gap:var(--m-2);padding:var(--m-5);flex:1}
.prog-card h3{color:var(--m-navy);font-size:1.02rem;font-weight:800;line-height:1.7}
.pc-dates{color:var(--m-muted);font-size:.84rem;font-weight:700}
.pc-hotels{display:grid;gap:7px;margin-top:var(--m-1)}
.pc-hotel{display:flex;gap:8px;align-items:flex-start;color:var(--m-ink-2);font-size:.83rem;line-height:1.7}
.pc-hotel svg{width:16px;height:16px;flex:0 0 16px;margin-top:4px;stroke:var(--m-teal);fill:none}
.pc-transport{display:flex;gap:8px;align-items:center;color:var(--m-muted);font-size:.8rem}
.pc-transport svg{width:16px;height:16px;flex:0 0 16px;stroke:var(--m-gold-deep);fill:none}
.pc-price-row{
  display:flex;align-items:flex-end;justify-content:space-between;gap:var(--m-3);
  margin-top:auto;padding-top:var(--m-4);border-top:1px solid var(--m-line-cool);
}
.pc-price{display:grid;gap:3px;min-width:0;align-content:end}
.pc-price .pc-label{color:var(--m-muted);font-size:.74rem;font-weight:700}
.pc-price b{color:var(--m-gold-deep);font-size:1.28rem;font-weight:900;line-height:1.25;white-space:nowrap}
.pc-price small{color:var(--m-muted);font-size:.73rem;line-height:1.6;display:block}
.pc-cta{
  flex:0 0 auto;
  border:1.5px solid var(--m-navy);color:var(--m-navy);
  border-radius:var(--m-r-sm);padding:9px 16px;
  font-weight:800;font-size:.83rem;white-space:nowrap;
  transition:background .18s ease,color .18s ease;
}
.prog-card:hover .pc-cta{background:var(--m-navy);color:#fff}
.seats{margin-top:var(--m-3)}

/* --- sold-out state ------------------------------------------------------ */
/* A full departure must never look like an available one. The card stays
   published (it is proof of activity and holds its search ranking) but every
   affordance changes to the waiting list. */
.prog-card.is-full .pc-image img{filter:grayscale(.55) brightness(.94)}
.prog-card.is-full .pc-price b{color:var(--m-muted)}
.prog-card.is-full:hover{border-color:var(--m-line-cool)}
.prog-card.is-full:hover::before{opacity:0}
.pc-full{
  position:absolute;inset-block-start:0;inset-inline-end:0;
  background:var(--m-navy-deep);color:#fff;
  padding:7px 14px;border-radius:0 0 0 var(--m-r-md);
  font-size:.78rem;font-weight:800;letter-spacing:.01em;
}
.seats-full{
  display:inline-block;background:var(--m-surface-alt);
  border:1px solid var(--m-line-cool);color:var(--m-muted);
  border-radius:var(--m-r-pill);padding:5px 13px;font-size:.78rem;font-weight:700;
}
.prog-full-note{
  display:flex;gap:var(--m-3);align-items:flex-start;margin-top:var(--m-5);
  background:var(--m-surface);border:1px solid var(--m-line-cool);
  border-inline-start:4px solid var(--m-navy);
  border-radius:var(--m-r-md);padding:var(--m-4) var(--m-5);
  color:var(--m-ink-2);font-size:.92rem;line-height:1.95;box-shadow:var(--m-sh-1);
}
.prog-full-note svg{width:22px;height:22px;flex:0 0 22px;margin-top:5px;stroke:var(--m-navy)}
.prog-full-note b{color:var(--m-navy)}

/* --- search / filter card ------------------------------------------------ */
/* site.css gives .search-card its own card chrome; here the chrome belongs to
   .search-wrap, so strip the outer shell rather than double-framing it. */
.search-card{
  background:transparent;box-shadow:none;border:0;border-radius:0;
  padding:0 0 var(--m-7);margin:0;
}
.search-wrap{
  background:var(--m-surface);
  border:1px solid var(--m-line-cool);
  border-top:3px solid var(--m-gold);
  border-radius:var(--m-r-lg);
  box-shadow:var(--m-sh-3);
  padding:var(--m-6);
}
.search-wrap h2{font-size:1.15rem;font-weight:800;color:var(--m-navy);margin-bottom:var(--m-4)}
.search-wrap h2::after{content:none}
.search-filters{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--m-3)}
.search-field{display:grid;gap:6px;min-width:0}
.search-field label{font-size:.8rem;font-weight:700;color:var(--m-ink-2)}
.search-field select{
  width:100%;min-height:46px;padding:9px 12px;
  border:1px solid var(--m-line-cool);border-radius:var(--m-r-sm);
  background:var(--m-surface);font:700 .87rem "Cairo",sans-serif;color:var(--m-ink);
}
.search-field select:focus{outline:none;border-color:var(--m-teal);box-shadow:0 0 0 3px rgba(7,158,140,.14)}
.search-actions{display:flex;align-items:center;gap:var(--m-3);margin-top:var(--m-5);flex-wrap:wrap}
#search-btn{background:var(--m-teal);color:#fff;border-radius:var(--m-r-sm);font-weight:800}
#search-btn:hover{background:var(--m-teal-deep)}
#clear-filters{border-radius:var(--m-r-sm);font-weight:800}
.search-result-count{color:var(--m-muted);font-size:.85rem;font-weight:700;margin-inline-start:auto}

/* --- journey steps ------------------------------------------------------- */
.trip-steps{background:var(--m-paper-warm)}
.steps-wrapper{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--m-4)}
.trip-steps{border:0;border-radius:0;box-shadow:none}
.step-item{
  position:relative;display:flex;flex-direction:row;text-align:start;
  gap:var(--m-4);align-items:flex-start;
  background:var(--m-surface);border:1px solid var(--m-line-cool);
  border-radius:var(--m-r-md);padding:var(--m-5);box-shadow:var(--m-sh-1);
  min-height:0;
}
.step-content{min-width:0}
.step-content p{max-width:none;margin:0}
.step-item::after{display:none}
.step-num{
  display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;
  border-radius:50%;background:var(--m-gold-tint);border:1px solid #eddcbc;
  color:var(--m-gold-deep);font-weight:900;font-size:1.05rem;
}
.step-content h3{color:var(--m-navy);font-size:.98rem;font-weight:800;line-height:1.7;margin-bottom:4px}
.step-content p{color:var(--m-muted);font-size:.86rem;line-height:1.9}

/* --- includes / docs / children ------------------------------------------ */
.inc-grid,.docs-grid,.children-grid{gap:var(--m-5)}
.inc-card,.doc-card,.child-card{
  background:var(--m-surface);border:1px solid var(--m-line-cool);
  border-radius:var(--m-r-md);box-shadow:var(--m-sh-1);
}
.children-policy{background:var(--m-surface)}
.child-card{padding:var(--m-5);text-align:center}
.child-card .child-icon{
  display:grid;place-items:center;width:58px;height:68px;
  border-radius:50% 50% var(--m-r-sm) var(--m-r-sm) / 58% 58% var(--m-r-sm) var(--m-r-sm);
  background:var(--m-gold-tint);border:1px solid #eddcbc;
  margin:0 auto var(--m-3);font-size:1.5rem;
}
.child-card h3{color:var(--m-navy);font-size:.98rem;font-weight:800;line-height:1.7}
.child-card p{color:var(--m-muted);font-size:.88rem;line-height:1.95;margin-top:6px}
.child-card .child-price{
  display:inline-block;margin-top:var(--m-3);
  background:var(--m-surface-alt);border:1px solid var(--m-line-cool);
  border-radius:var(--m-r-sm);padding:7px 14px;
  color:var(--m-navy);font-weight:800;font-size:.9rem;
}

/* --- content / guide placeholders ---------------------------------------- */
.content-section{background:var(--m-paper-warm)}
.content-section + .content-section{background:var(--m-paper)}
.placeholder-card{
  background:var(--m-surface);border:1px dashed #cfd9e2;
  border-radius:var(--m-r-lg);box-shadow:none;padding:var(--m-7) var(--m-5);text-align:center;
}
.placeholder-card p{color:var(--m-muted);line-height:1.95}
.placeholder-card a{color:var(--m-teal-deep);font-weight:800;text-decoration:underline}

/* --- compliance ribbon --------------------------------------------------- */
.comply-sec{background:var(--m-paper);padding-block:0 var(--m-8)}
.comply{
  background:linear-gradient(120deg,var(--m-navy-deep),var(--m-navy-soft));
  border-radius:var(--m-r-lg);border-bottom:4px solid var(--m-gold);
  box-shadow:var(--m-sh-3);padding:var(--m-5) var(--m-6);color:#fff;
  display:flex;align-items:center;gap:var(--m-6);flex-wrap:wrap;
}
.comply-brand{font-weight:900;font-size:1.05rem;color:var(--m-gold)}
.comply-items{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--m-5);flex:1;min-width:0}
.comply-item{font-size:.76rem;color:#c9dcec;line-height:1.7}
.comply-item b{display:block;color:#fff;font-size:.9rem;font-weight:800;margin-bottom:2px}

/* --- FAQ + payment notes -------------------------------------------------- */
/* .price-notes lived in the removed site.css override block; without these the
   inline warning icons stretch to the full container width. */
.price-notes{display:grid;gap:var(--m-3);max-width:900px;margin-inline:auto}
.price-notes .note{
  display:flex;gap:var(--m-3);align-items:flex-start;
  padding:var(--m-4) var(--m-5);
  border:1px solid #eddcbc;border-radius:var(--m-r-md);
  background:var(--m-gold-tint);color:#63501f;
  line-height:1.95;font-size:.9rem;
}
.price-notes .note.warn{border-color:#f2c9a8;background:#fff5ec;color:#7a3f1a}
.price-notes .note svg{width:22px;height:22px;flex:0 0 22px;margin-top:5px}
.price-notes .note b{color:var(--m-navy)}
.acc{max-width:900px;margin-inline:auto;display:grid;gap:var(--m-3)}
.acc-item{background:var(--m-surface);border:1px solid var(--m-line-cool);border-radius:var(--m-r-md);box-shadow:var(--m-sh-1)}
.acc-btn{color:var(--m-navy);font-weight:800;min-height:56px}
.acc-btn .chev{width:20px;height:20px;flex:0 0 20px;color:var(--m-gold-deep)}

/* --- forms on program / hajj --------------------------------------------- */
/* The booking band stays navy — it is the page's closing call to action, and
   the copy beside the form is written in white. */
.form-sec{background:linear-gradient(115deg,var(--m-navy-deep),var(--m-navy) 70%,var(--m-navy-soft));color:#fff}
.form-sec .sec-head{text-align:start;margin-inline:0;max-width:none}
.form-sec .sec-head h2::after{margin-inline:0;background-position:right center}
.form-sec .sec-eyebrow{color:var(--m-gold)}
.form-sec .sec-head h2{color:#fff}
.form-sec .sec-head p{color:#c6d9ea;opacity:1}
.form-side li{color:#dbe7f2;font-size:.93rem;line-height:1.9}
.form-side svg{stroke:var(--m-gold)}
form.book{
  background:var(--m-surface);border:1px solid var(--m-line-cool);
  border-radius:var(--m-r-lg);box-shadow:var(--m-sh-2);padding:var(--m-6);
}
.field label{font-weight:700;font-size:.85rem;color:var(--m-ink-2)}
.field input,.field select{
  min-height:46px;border:1px solid var(--m-line-cool);border-radius:var(--m-r-sm);
  font:700 .92rem "Cairo",sans-serif;color:var(--m-ink);
}
.field input:focus,.field select:focus{border-color:var(--m-teal);box-shadow:0 0 0 3px rgba(7,158,140,.14);outline:none}
.form-hint{margin-top:var(--m-3);color:var(--m-muted);font-size:.8rem;line-height:1.8;text-align:center}

/* --- programme detail page ----------------------------------------------- */
.prog-hero{
  position:relative;overflow:hidden;
  background:var(--m-paper);
  padding-block:0;min-height:520px;display:flex;align-items:stretch;
}
.prog-hero-media{
  position:absolute;inset:0;
  background-position:center;background-size:cover;background-repeat:no-repeat;
}
.prog-hero::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,
    rgba(255,253,249,.985) 0%,
    rgba(255,253,249,.95) 34%,
    rgba(255,253,249,.55) 60%,
    rgba(255,253,249,.10) 100%);
}
.prog-hero-grid{position:relative;z-index:2;display:flex;align-items:center;width:100%}
.prog-hero-copy{
  width:min(600px,54%);padding-block:var(--m-9);
  margin-inline-start:auto;margin-inline-end:0;
  border-inline-start:3px solid var(--m-gold);padding-inline-start:var(--m-5);
}
.prog-hero-copy h1{
  color:var(--m-navy-deep);font-weight:900;line-height:1.4;
  font-size:clamp(1.6rem,3vw,2.4rem);margin-top:var(--m-3);letter-spacing:-.02em;
}
.prog-badge{
  display:inline-block;margin-top:var(--m-3);
  border-radius:var(--m-r-pill);padding:5px 14px;
  color:#fff;font-weight:800;font-size:.78rem;
}
.prog-hero-copy .lead{
  color:var(--m-ink-2);font-size:1rem;line-height:2;
  margin-top:var(--m-3);max-width:520px;
}
.prog-price-box{
  display:flex;align-items:center;justify-content:space-between;gap:var(--m-4);
  flex-wrap:wrap;margin-top:var(--m-5);
  background:var(--m-surface);border:1px solid var(--m-line-cool);
  border-inline-start:4px solid var(--m-gold);
  border-radius:var(--m-r-md);box-shadow:var(--m-sh-2);
  padding:var(--m-4) var(--m-5);
}
.prog-price-box small{display:block;color:var(--m-muted);font-size:.76rem;line-height:1.7}
.prog-price-box b{display:block;color:var(--m-gold-deep);font-size:1.55rem;font-weight:900;line-height:1.4}
.prog-lic{
  color:var(--m-navy);font-weight:800;font-size:.76rem;
  background:var(--m-gold-tint);border:1px solid #eddcbc;
  border-radius:var(--m-r-sm);padding:7px 12px;
}
.prog-hero-copy .hero-ctas{margin-top:var(--m-5)}
.prog-img-note{margin-top:var(--m-3);color:var(--m-ink-2);font-size:.78rem;line-height:1.8;opacity:.9}

.prog-summary-sec{background:var(--m-paper);padding-block:var(--m-6)}
.prog-summary{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0;
  background:var(--m-surface);border:1px solid var(--m-line-cool);
  border-radius:var(--m-r-lg);box-shadow:var(--m-sh-2);overflow:hidden;
}
.prog-summary > div{padding:var(--m-4) var(--m-5);border-inline-start:1px solid var(--m-line-cool)}
.prog-summary > div:first-child{border-inline-start:0}
.prog-summary dt{color:var(--m-muted);font-size:.76rem;font-weight:700;margin-bottom:4px}
.prog-summary dd{color:var(--m-navy);font-size:.9rem;font-weight:800;line-height:1.75}

/* itinerary */
.itin{display:grid;grid-template-columns:1fr 1fr;gap:var(--m-5)}
.itin-card{
  background:var(--m-surface);border:1px solid var(--m-line-cool);
  border-radius:var(--m-r-lg);box-shadow:var(--m-sh-2);padding:var(--m-5);
}
.itin-city{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--m-3);
  padding-bottom:var(--m-3);margin-bottom:var(--m-4);
  border-bottom:2px solid var(--m-gold);
}
.itin-city h3{color:var(--m-navy);font-size:1.15rem;font-weight:900}
.itin-city .nights{color:var(--m-teal-deep);font-weight:800;font-size:.85rem}
.hotel-shots{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--m-2);margin-bottom:var(--m-4)}
.hotel-shots img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--m-r-sm)}
.hotel-shots img:only-child{grid-column:1/-1;aspect-ratio:16/9}
.itin-card .hotel{color:var(--m-ink-2);font-size:.92rem;line-height:1.95;margin-bottom:var(--m-4)}
.itin-card .hotel b{color:var(--m-navy)}
.itin-card .stars{color:var(--m-gold);letter-spacing:1px}
.ziyara{display:grid;gap:10px}
.ziyara li{display:flex;gap:10px;align-items:flex-start;color:var(--m-ink-2);font-size:.88rem;line-height:1.8}
.ziyara svg{width:18px;height:18px;flex:0 0 18px;margin-top:3px}
.prog-extra{
  display:flex;gap:var(--m-3);align-items:flex-start;margin-top:var(--m-5);
  background:var(--m-surface-alt);border:1px solid var(--m-line-cool);
  border-radius:var(--m-r-md);padding:var(--m-4) var(--m-5);
  color:var(--m-ink-2);line-height:1.95;font-size:.9rem;
}
.prog-extra svg{flex:0 0 18px;margin-top:5px}
.flight-bar{
  display:flex;gap:var(--m-4);align-items:center;margin-top:var(--m-4);
  background:var(--m-gold-tint);border:1px solid #eddcbc;
  border-radius:var(--m-r-md);padding:var(--m-4) var(--m-5);
  color:#5f4a1c;line-height:1.95;font-size:.9rem;
}
.flight-bar svg{flex:0 0 30px}
.flight-bar b{color:var(--m-navy)}

/* price table */
.price-wrap{
  background:var(--m-surface);border:1px solid var(--m-line-cool);
  border-radius:var(--m-r-lg);box-shadow:var(--m-sh-2);
  overflow-x:auto;
}
table.price{width:100%;border-collapse:collapse;min-width:520px}
table.price caption{
  text-align:start;padding:var(--m-5) var(--m-5) var(--m-3);
  color:var(--m-navy);font-weight:800;font-size:1rem;line-height:1.7;
}
table.price caption span{color:var(--m-muted);font-weight:600;font-size:.85rem}
table.price th{
  background:var(--m-surface-alt);color:var(--m-navy);
  font-size:.82rem;font-weight:800;text-align:start;
  padding:12px var(--m-5);border-block:1px solid var(--m-line-cool);
}
table.price td{
  padding:14px var(--m-5);border-bottom:1px solid var(--m-line-cool);
  color:var(--m-ink-2);font-size:.9rem;
}
table.price tr:last-child td{border-bottom:0}
table.price td.num{color:var(--m-navy);font-weight:900;font-size:1.02rem;white-space:nowrap}
table.price td.num small{color:var(--m-muted);font-weight:700;font-size:.75rem}
table.price tr.hot{background:var(--m-gold-tint)}
table.price tr.hot td.num{color:var(--m-gold-deep)}
.tag-best{
  display:inline-block;margin-inline-start:8px;
  background:var(--m-gold);color:#fff;border-radius:var(--m-r-pill);
  padding:3px 10px;font-size:.7rem;font-weight:800;
}
.price-wrap h3{color:var(--m-navy);font-size:1.15rem;font-weight:800;margin-bottom:var(--m-2)}
.price-wrap p{color:var(--m-muted);line-height:1.95;margin-bottom:var(--m-4)}
.dl-row{margin-top:var(--m-4);display:flex;justify-content:center}
.dl{
  display:inline-flex;align-items:center;gap:8px;
  border:1.5px solid var(--m-navy);color:var(--m-navy);
  border-radius:var(--m-r-sm);padding:11px 18px;font-weight:800;font-size:.88rem;
}
.dl:hover{background:var(--m-navy);color:#fff}
.dl svg{width:18px;height:18px}

/* --- pricing table ------------------------------------------------------- */
.ptable{gap:var(--m-3)}
.pcell{
  background:var(--m-surface);border:1px solid var(--m-line-cool);
  border-radius:var(--m-r-md);box-shadow:var(--m-sh-1);
}
.pcell.best{border-color:var(--m-gold);background:var(--m-gold-tint)}
.pcell b{color:var(--m-navy)}
.pcell.best b{color:var(--m-gold-deep)}

/* --- legal / editorial pages --------------------------------------------- */
.legal-page{background:var(--m-paper);padding-block:var(--m-8)}
.legal-content{
  max-width:820px;margin-inline:auto;
  background:var(--m-surface);border:1px solid var(--m-line-cool);
  border-radius:var(--m-r-lg);box-shadow:var(--m-sh-1);
  padding:clamp(26px,4vw,54px);
}
.legal-content h1{color:var(--m-navy);font-size:clamp(1.6rem,3vw,2.1rem);font-weight:900;line-height:1.5}
.legal-content .lead{color:var(--m-muted);font-size:.9rem;font-weight:700;margin-top:6px;margin-bottom:var(--m-5)}
.legal-content h2{
  color:var(--m-navy);font-size:1.1rem;font-weight:800;
  margin-top:var(--m-6);margin-bottom:var(--m-2);
  padding-inline-start:var(--m-3);border-inline-start:3px solid var(--m-gold);
}
.legal-content h2::after{content:none}
.legal-content p{color:var(--m-ink-2);line-height:2.1;font-size:.96rem}
.legal-content a{color:var(--m-teal-deep);text-decoration:underline}

.editorial-hero{
  background:linear-gradient(180deg,var(--m-gold-tint),var(--m-paper));
  border-bottom:1px solid var(--m-line);
  padding-block:clamp(46px,6vw,78px);text-align:center;
}
.about-mark{
  height:60px;width:auto;max-width:210px;margin:0 auto var(--m-5);
  background:var(--m-surface);border:1px solid var(--m-line-cool);
  border-radius:var(--m-r-md);padding:10px 18px;box-shadow:var(--m-sh-1);
}
.editorial-hero p{color:var(--m-gold-deep);font-weight:800;font-size:.9rem}
.editorial-hero h1{color:var(--m-navy);font-size:clamp(1.9rem,4vw,3rem);font-weight:900;line-height:1.35;margin-top:var(--m-2)}
.islamic-rule{
  width:150px;height:14px;margin:var(--m-4) auto 0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='14' viewBox='0 0 150 14'%3E%3Cg stroke='%23efa400' stroke-width='1.4' fill='none' stroke-linecap='round'%3E%3Cpath d='M2 7h50M98 7h50'/%3E%3Cpath d='M75 1.6 80.4 7 75 12.4 69.6 7z'/%3E%3Cpath d='M70.8 2.8 79.2 11.2M79.2 2.8 70.8 11.2'/%3E%3C/g%3E%3C/svg%3E") center/150px 14px no-repeat;
}
.section-title{max-width:780px;margin-inline:auto;margin-bottom:var(--m-7);text-align:center}
.section-title p{color:var(--m-muted);line-height:1.95;margin-top:var(--m-2)}
.policy-grid,.editorial-grid,.reels-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--m-5);
}
.policy-card,.editorial-card,.reel-card{
  background:var(--m-surface);border:1px solid var(--m-line-cool);
  border-radius:var(--m-r-md);box-shadow:var(--m-sh-1);padding:var(--m-5);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.policy-card:hover,.editorial-card:hover,.reel-card:hover{
  transform:translateY(-3px);box-shadow:var(--m-sh-2);border-color:var(--m-gold);
}
.policy-card h3,.editorial-card h2,.reel-card h2{color:var(--m-navy);font-size:1.05rem;font-weight:800;line-height:1.7}
.policy-card p,.editorial-card p,.reel-card p{color:var(--m-muted);line-height:1.95;font-size:.9rem;margin-top:var(--m-2)}
.editorial-card > span{
  display:inline-block;margin-bottom:var(--m-2);
  background:var(--m-gold-tint);border:1px solid #eddcbc;color:var(--m-gold-deep);
  border-radius:var(--m-r-pill);padding:4px 12px;font-size:.75rem;font-weight:800;
}
.text-link{display:inline-block;margin-top:var(--m-3);color:var(--m-teal-deep);font-weight:800;font-size:.88rem}
.text-link:hover{text-decoration:underline}

/* reels — no play affordance for a clip that does not exist yet */
.reel-frame{
  position:relative;display:grid;place-items:center;
  aspect-ratio:9/13;border-radius:var(--m-r-sm);
  background:linear-gradient(150deg,var(--m-navy),var(--m-navy-soft));
  color:#fff;margin-bottom:var(--m-4);overflow:hidden;
}
.reel-frame::before{
  content:"";position:absolute;inset:0;opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1'%3E%3Cpath d='M30 4 52 17v26L30 56 8 43V17z'/%3E%3C/g%3E%3C/svg%3E");
}
.reel-frame small{position:relative;background:rgba(0,0,0,.35);border-radius:var(--m-r-pill);padding:5px 13px;font-weight:700;font-size:.8rem}
.reel-play{display:none}
.reel-state{
  display:inline-block;margin-top:var(--m-3);
  background:var(--m-surface-alt);border:1px dashed #cfd9e2;color:var(--m-muted);
  border-radius:var(--m-r-pill);padding:6px 14px;font-size:.78rem;font-weight:700;
}

.article-page{max-width:800px;padding-block:var(--m-8)}
.article-page > span{
  display:inline-block;margin:var(--m-4) 0 var(--m-2);
  background:var(--m-gold-tint);border:1px solid #eddcbc;color:var(--m-gold-deep);
  border-radius:var(--m-r-pill);padding:4px 12px;font-size:.75rem;font-weight:800;
}
.article-page h1{color:var(--m-navy);font-size:clamp(1.7rem,3.4vw,2.4rem);font-weight:900;line-height:1.45}
.article-lead{color:var(--m-ink-2);font-size:1.05rem;line-height:2.05;margin-top:var(--m-3)}
.article-page section{padding-block:var(--m-4) 0;display:grid;grid-template-columns:44px 1fr;gap:var(--m-4);align-items:start}
.article-page section h2{
  color:var(--m-gold-deep);font-size:1rem;font-weight:900;
  background:var(--m-gold-tint);border:1px solid #eddcbc;border-radius:50%;
  width:40px;height:40px;display:grid;place-items:center;
}
.article-page section h2::after{content:none}
.article-page section p{color:var(--m-ink-2);line-height:2.1;font-size:.98rem}
.article-page aside{
  margin-top:var(--m-7);background:var(--m-gold-tint);border:1px solid #eddcbc;
  border-radius:var(--m-r-md);padding:var(--m-5);color:#6b5220;line-height:2;font-size:.9rem;
}

.cta-band{
  background:linear-gradient(120deg,var(--m-navy-deep),var(--m-navy-soft));
  border-radius:0;padding-block:var(--m-8);color:#fff;
}
.cta-band .container{display:flex;align-items:center;justify-content:space-between;gap:var(--m-6);flex-wrap:wrap}
.cta-band h2{color:#fff;font-size:clamp(1.3rem,2.4vw,1.8rem);font-weight:900}
.cta-band h2::after{content:none}
.cta-band p{color:#c4d8ea;margin-top:6px;line-height:1.95}
.cta-actions{display:flex;gap:var(--m-3);flex-wrap:wrap}

/* --- hajj page ----------------------------------------------------------- */
.hajj-box{
  background:var(--m-surface);border:1px solid var(--m-line-cool);
  border-radius:var(--m-r-lg);box-shadow:var(--m-sh-2);padding:var(--m-6);
}
.hajj-register-box{display:grid;grid-template-columns:1fr 1fr;gap:var(--m-7);align-items:start}
.hajj-register-box form.book{box-shadow:none;border:0;padding:0}
.free-badge{background:var(--m-teal);color:#fff;border-radius:var(--m-r-pill);font-weight:800}
.hajj-note{
  background:var(--m-gold-tint);border:1px solid #eddcbc;border-radius:var(--m-r-md);
  color:#6b5220;line-height:2;font-size:.88rem;
}

/* --- mobile action bar --------------------------------------------------- */
.mobile-bar{background:var(--m-navy-deep);border-top:2px solid var(--m-gold)}
.mobile-lic{color:#c9dcec}
.mobile-lic b{color:var(--m-gold)}

/* ============================== responsive =============================== */

/* small desktop */
@media(max-width:1180px){
  .container{padding-inline:24px}
  .nav{gap:var(--m-4)}
  .menu ul{gap:var(--m-4)}
  .menu a{font-size:.82rem}
  .search-filters{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero.hero-photographic,.hero-photographic .hero-grid{min-height:560px}
  .hero-photographic .hero-copy{width:min(520px,55%)}
  .foot-grid{grid-template-columns:1.4fr 1fr 1.1fr 1.2fr;gap:var(--m-6)}
  .menu a{padding-inline:9px;font-size:.84rem}
}

/* tablet */
@media(max-width:1024px){
  .header-cta{display:none}
  .menu-toggle{display:flex}
  .menu{
    display:none;position:absolute;top:100%;inset-inline:0;
    background:var(--m-surface);border-bottom:1px solid var(--m-line-cool);
    box-shadow:var(--m-sh-3);padding:var(--m-4) 24px var(--m-5);margin:0;
  }
  .menu.open{display:block}
  .menu ul{flex-direction:column;align-items:stretch;gap:0;white-space:normal}
  .menu a{
    display:block;color:var(--m-navy);padding:14px 6px;font-size:.95rem;
    border-bottom:1px solid var(--m-line-cool);min-height:48px;border-radius:0;
  }
  .menu a:hover{background:transparent;color:var(--m-teal-deep)}
  .menu a[aria-current="page"]{color:var(--m-teal-deep)}
  .menu a[aria-current="page"]::after{content:none}
  .menu-mobile-action{display:list-item;margin-top:var(--m-3)}
  .menu-mobile-action a{
    border:0;border-radius:var(--m-r-sm);text-align:center;font-weight:800;
    background:var(--m-surface-alt);color:var(--m-navy);
  }
  .menu-mobile-action a[target="_blank"]{background:var(--m-teal);color:#fff}
  .trust ul{grid-template-columns:repeat(2,1fr)}
  .trust li:nth-child(odd){border-inline-start:0}
  .trust li:nth-child(n+3){border-top:1px solid rgba(255,255,255,.14)}
  .depart-grid{grid-template-columns:1fr;gap:var(--m-5)}
  .steps-wrapper{grid-template-columns:repeat(2,1fr)}
  .comply-items{grid-template-columns:repeat(2,1fr)}
  .children-grid,.docs-grid,.inc-grid{grid-template-columns:1fr 1fr}
  .prog-summary{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr;gap:var(--m-6)}
  .hajj-register-box{grid-template-columns:1fr}
  .cta-band .container{flex-direction:column;align-items:flex-start}
  .article-page section{grid-template-columns:1fr;gap:var(--m-2)}
  .itin{grid-template-columns:1fr}
  .prog-hero-copy{width:min(600px,74%)}
}

@media(max-width:900px){
  .search-filters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero.hero-photographic{background-position:66% center}
  .hero.hero-photographic::before{
    background:linear-gradient(90deg,rgba(255,253,249,.985) 0%,rgba(255,253,249,.94) 58%,rgba(255,253,249,.3) 100%);
  }
  .hero-photographic .hero-copy{width:min(560px,72%)}
  .prog-grid{grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
  .prog-hero::before{background:linear-gradient(90deg,rgba(255,253,249,.985) 0%,rgba(255,253,249,.94) 62%,rgba(255,253,249,.3) 100%)}
  .master-info-strip{grid-template-columns:1fr}
  .master-info-strip > div{border-inline-start:0;border-top:1px solid rgba(255,255,255,.2)}
  .master-info-strip > div:first-child{border-top:0}
}

/* mobile */
@media(max-width:768px){
  .thb-topbar{display:none}
  .container{padding-inline:18px}
  .nav{min-height:64px;gap:var(--m-3)}
  .brand-logo{height:38px;max-width:150px}
  .header-wa{display:none}
  .user-badge{display:none}
  .menu{padding-inline:18px}

  .hero.hero-photographic,.hero-photographic .hero-grid{min-height:0}
  .hero.hero-photographic{background-position:72% center}
  .hero.hero-photographic::before{
    background:linear-gradient(90deg,rgba(255,253,249,.985) 0%,rgba(255,253,249,.95) 64%,rgba(255,253,249,.6) 100%);
  }
  .hero-photographic .hero-copy{
    width:100%;padding-block:var(--m-8) var(--m-9);
    border-inline-start:0;padding-inline-start:0;
  }
  .hero h1{font-size:clamp(1.95rem,8vw,2.5rem)}
  .hero p.lead{font-size:.95rem;line-height:1.95}
  .hero-ctas{display:grid;grid-template-columns:1fr}
  .hero-ctas .btn{min-height:48px}
  .hero-meta{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--m-3)}
  .hero-meta div{min-width:0}
  .hero-meta b{font-size:.85rem}
  .hero-meta div>*:last-child{font-size:.7rem}

  .trust{margin-top:-20px}
  .trust li{padding:var(--m-4) var(--m-3);font-size:.79rem}
  .city-list{grid-template-columns:1fr}
  .prog-grid{grid-template-columns:1fr;gap:var(--m-4)}
  .search-wrap{padding:var(--m-5) var(--m-4)}
  .search-filters{grid-template-columns:1fr}
  .search-actions{display:grid;grid-template-columns:1fr 1fr}
  .search-result-count{grid-column:1/-1;text-align:center;margin-inline-start:0}
  .steps-wrapper{grid-template-columns:1fr}
  .children-grid,.docs-grid,.inc-grid,.policy-grid,.editorial-grid{grid-template-columns:1fr}
  .prog-summary{grid-template-columns:1fr}
  .reels-grid{grid-template-columns:1fr 1fr}
  .trust li{min-width:0}
  .city div,.pc-body,.step-content,.child-card{min-width:0}
  .prog-hero{min-height:0}
  .prog-hero-copy{
    width:100%;padding-block:var(--m-8) var(--m-8);
    border-inline-start:0;padding-inline-start:0;
  }
  .prog-hero::before{background:linear-gradient(90deg,rgba(255,253,249,.985) 0%,rgba(255,253,249,.95) 66%,rgba(255,253,249,.6) 100%)}
  .prog-price-box{flex-direction:column;align-items:flex-start}
  .prog-summary > div{border-inline-start:0;border-top:1px solid var(--m-line-cool)}
  .prog-summary > div:first-child{border-top:0}
  .comply{flex-direction:column;align-items:flex-start;gap:var(--m-4)}
  .comply-items{grid-template-columns:1fr 1fr;width:100%}
  .foot-grid{grid-template-columns:1fr;gap:var(--m-6)}
  .foot-legal{flex-direction:column;align-items:flex-start;gap:var(--m-3);text-align:start}
  .foot-legal-facts{gap:var(--m-2) var(--m-4)}
  .legal-content{padding:var(--m-5) var(--m-4)}
  .cta-band .container{align-items:stretch}
  .cta-actions .btn{flex:1;text-align:center}
  /* --- touch targets: nothing interactive under 44px --- */
  .btn,.master-btn-primary,.master-btn-secondary,.pc-cta,.text-link,
  .dl,.acc-btn,.aswan-faq summary,.upload{min-height:44px}
  .pc-cta,.text-link,.dl{display:inline-flex;align-items:center}
  .brand{min-height:44px;align-items:center}
  footer ul{gap:0}
  footer ul li a{display:flex;align-items:center;min-height:44px}
  .branch{min-height:44px}
  .master-form .mf-consent,.consent{min-height:44px;align-items:center}
  .master-form .mf-consent input,.consent input{width:22px;height:22px;flex:0 0 22px}

  /* --- legibility: no body text below 14px on a phone ---
     The desktop scale uses .7–.8rem for captions; at phone size those fall
     under the 14px floor, so the smallest roles are pinned in px here. */
  small,
  .pc-price small,.pc-price .pc-label,.pc-dates,.pc-transport,
  .city span,.hero-meta small,.hero-meta div>*:last-child,
  .comply-item,.master-info-strip span,.foot-legal,
  .step-content p,.child-card p,.aswan-benefits small,
  .reel-state,.tag-best,.prog-img-note,.reg-privacy,
  .upload small,.mf-hint,.search-field label,.master-form label,
  .field label,.field .hint,.seats,.pc-illustrative,
  .editorial-card>span,.article-page>span,.master-pill,.pc-badge,
  .prog-summary dt,.prog-lic,.foot-brand .foot-lic,.mobile-lic{
    font-size:14px;
  }
  .pc-hotel,.ziyara li,.trust li,.form-side li,.branch,
  .aswan-agenda p,.aswan-why p,.policy-card p,.editorial-card p,
  .reel-card p,.acc-panel,.price-notes .note,.flight-bar,
  .prog-extra,.master-empty-state p,.placeholder-card p{
    font-size:14.5px;
  }
  .prog-summary dd,.itin-card .hotel,table.price td,table.price th{font-size:15px}
  /* these carry a two-class selector on desktop, so they need one here too */
  .master-form .mf-hint,.master-form .mf-consent,
  .prog-price-box small,.prog-hero-copy .prog-img-note,
  .pc-price .pc-label,.pc-price small,.master-info-strip span,
  .price-notes .note,.foot-brand p,.branch span,
  table.price td.num small,.itin-city .nights{font-size:14px}
  .prog-badge,.form-status,.search-result-count{font-size:14px}
  .hero .eyebrow,.pc-cta,.consent,form.book .consent,.form-hint,.pc-full,.seats-full,
  .foot-legal,.foot-legal-facts span,.foot-legal-links a,
  footer ul li a span[dir=ltr],.thb-lic,.thb-topbar-info a,
  .upload small,.registration-card .upload small{font-size:14px}
  .prog-price-box b{font-size:1.5rem}
}

@media(max-width:420px){
  .container{padding-inline:14px}
  body{font-size:15.5px}
  .brand-logo{height:34px;max-width:130px}
  .comply-items{grid-template-columns:1fr}
  .pc-price b{font-size:1.15rem}
  .pc-price-row{flex-direction:column;align-items:stretch;gap:var(--m-3)}
  .pc-cta{text-align:center;justify-content:center}
}

/* Final cascade: brand refinement must stay last. */
.thb-topbar,.trust-strip,.depart-strip,.compliance-ribbon,.fab,.mobile-bar{display:none!important}
.thb-header{position:sticky;top:0;z-index:100;background:rgba(255,254,250,.97);border-bottom:1px solid rgba(8,47,91,.11);box-shadow:none}
.thb-header .nav{min-height:88px;gap:36px}
.brand{min-width:168px;gap:10px}.brand-logo{width:112px;height:auto;object-fit:contain}.brand-text,.brand-sub{display:none}
.menu{margin-inline:auto}.menu ul{gap:30px}.menu a{font-size:15px;font-weight:700;color:#233a51;padding:32px 0 27px}.menu a::after{height:2px;background:#b98a2f}
.nav-actions{gap:12px}.header-wa{background:transparent!important;color:#082f5b!important;border:1px solid rgba(8,47,91,.28)!important;padding:11px 18px!important;box-shadow:none!important}.header-wa:hover{background:#082f5b!important;color:#fff!important}
.hero.hero-photographic{min-height:650px;background-color:#fbf8f1}.hero-grid{min-height:650px}.hero-copy{max-width:650px;padding:78px 0 68px}.hero h1{font-size:clamp(3.4rem,5.5vw,5.3rem);line-height:1.02;letter-spacing:-.055em;color:#082f5b}.hero .lead{max-width:600px;font-size:18px;line-height:2;color:#43566a}
.eyebrow,.sec-eyebrow,.master-eyebrow{letter-spacing:.02em;background:none!important;border:0!important;padding:0!important;color:#b98a2f!important;font-size:14px;font-weight:800}
.hero-ctas{gap:12px;margin-top:28px}.btn{min-height:50px;border-radius:8px;font-weight:800;box-shadow:none}.btn-wa{background:#082f5b;border-color:#082f5b}.btn-teal{background:#129978;border-color:#129978}
.hero-meta{margin-top:30px;padding-top:24px;border-top:1px solid rgba(8,47,91,.14);gap:0}.hero-meta>div{padding:0 22px;border-inline-start:1px solid rgba(8,47,91,.12)}.hero-meta>div:first-child{padding-inline-start:0;border:0}
section{padding-block:96px}.sec-head,.master-head{margin-bottom:42px}.sec-head h2,.master-heading{font-size:clamp(2rem,3vw,3rem);letter-spacing:-.035em;color:#082f5b}.sec-head p,.master-head p{max-width:700px;margin-inline:auto;color:#68778a;font-size:16px;line-height:1.9}
.search-card{border:1px solid #e4e7e9;border-radius:14px;box-shadow:none;background:#fff;margin-bottom:36px}.search-wrap{padding:24px}.search-wrap>h2{font-size:18px;margin-bottom:18px;color:#082f5b}.search-field label{font-size:12px;color:#68778a}.search-field select{border-radius:7px;border-color:#dfe3e7;background:#fff}.search-actions{border-top:1px solid #eceeef;padding-top:18px;margin-top:18px}
.prog-grid{grid-template-columns:repeat(2,minmax(0,420px));justify-content:center;gap:28px}.prog-card{border:1px solid #e0e4e7;border-radius:12px;box-shadow:none;background:#fff;overflow:hidden;transition:transform .2s ease,border-color .2s ease}.prog-card:hover{transform:translateY(-4px);border-color:rgba(185,138,47,.6);box-shadow:0 18px 45px rgba(8,47,91,.09)}.pc-image{height:265px}.pc-image img{filter:saturate(.84) contrast(.98)}.pc-badge,.pc-illustrative{border-radius:4px;box-shadow:none}.pc-body{padding:25px}.pc-body h3{font-size:20px;line-height:1.65;color:#082f5b}.pc-dates{font-size:13px;color:#7b8794;margin:8px 0 18px}.pc-hotels{gap:7px}.pc-hotel,.pc-transport{font-size:14px;color:#4c5d6e}.pc-hotel svg,.pc-transport svg{display:none}.pc-price-row{margin-top:22px;padding-top:20px;border-top:1px solid #e8eaec}.pc-price b{font-size:25px;color:#b98a2f}.pc-cta{border:1px solid #082f5b;background:transparent;color:#082f5b;border-radius:7px}
.trip-steps,.children-policy{background:#fbf8f1}.steps-wrapper{gap:14px}.step-item,.child-card,.master-card{border:1px solid #e4e7e9;border-radius:12px;box-shadow:none;background:#fff}.step-num{background:transparent;border:1px solid rgba(185,138,47,.45);color:#b98a2f;box-shadow:none}.child-kicker,.card-kicker{display:inline-block;color:#b98a2f;font-size:12px;font-weight:800;letter-spacing:.02em;margin-bottom:14px}.child-icon{display:none}
footer{background:#092f59;border-top:0;padding-top:72px}.foot-grid{gap:64px}.foot-brand h3{color:#fff;font-size:25px;margin-bottom:16px}.foot-brand p{max-width:390px;color:rgba(255,255,255,.7);line-height:2}.foot-lic{background:transparent;border:1px solid rgba(185,138,47,.48);border-radius:6px;padding:9px 12px}.branch{display:block;padding:0 0 17px;border-bottom:1px solid rgba(255,255,255,.09)}.branch svg{display:none}.foot-legal{margin-top:46px;border-top:1px solid rgba(255,255,255,.12)}

@media(max-width:1024px){.thb-header .nav{min-height:72px}.brand-logo{width:94px}.hero.hero-photographic,.hero-grid{min-height:580px}.hero-copy{padding-block:54px}.hero h1{font-size:clamp(3rem,8vw,4.4rem)}section{padding-block:76px}}
@media(max-width:768px){.thb-header .nav{min-height:68px;padding-inline:18px}.brand-logo{width:88px;height:auto}.header-wa{display:none!important}.hero.hero-photographic{min-height:auto;background-position:63% center}.hero-grid{min-height:620px;align-items:end}.hero-copy{width:100%;margin-inline:-18px;padding:190px 24px 38px;border:0;background:linear-gradient(0deg,#fffefa 0%,rgba(255,254,250,.96) 70%,rgba(255,254,250,0) 100%)}.hero h1{font-size:clamp(2.65rem,13vw,3.55rem)}.hero .lead{font-size:16px;line-height:1.9}.hero-ctas{display:grid}.hero-ctas .btn{width:100%}.hero-meta{grid-template-columns:1fr 1fr;row-gap:20px}.hero-meta>div{padding-inline:12px;border:0}section{padding-block:64px}.sec-head,.master-head{margin-bottom:30px;text-align:start}.sec-head p,.master-head p{margin-inline:0}.search-card{margin-inline:-4px}.search-wrap{padding:18px}.prog-grid{grid-template-columns:1fr;gap:20px}.pc-image{height:230px}.foot-grid{gap:36px}}
.master-head .master-heading::after,.sec-head h2::after{content:none!important}
.search-card{background:transparent;border:0;border-radius:0;box-shadow:none;margin:0 0 36px;padding:0}
.search-wrap{background:#fff;border:1px solid #e4e7e9;border-top:0;border-radius:12px;box-shadow:0 14px 40px rgba(8,47,91,.06);padding:24px}
.inc-grid svg,.docs-grid svg,.policy-grid svg,.comply svg,.flight-bar svg,.prog-extra svg,.ziyara svg{display:none!important}
.inc-item,.doc-card,.policy-card{align-items:flex-start;text-align:start}
.hero-photographic .hero-copy,.prog-hero-copy{border-inline-start:0!important;padding-inline-start:0!important}
.trust,.master-info-strip,.registration-card,.search-wrap,.flight-bar{border-bottom-color:transparent!important;border-top-color:transparent!important}

/* ── mobile legibility floor ────────────────────────────────────────────
   Appended last on purpose so it also lands after any later override
   block. It sets ONE property — font-size — on the bold fact labels only
   (venue, date, price, branch, badge). It changes no colour, spacing,
   layout or icon visibility, so it does not touch anyone's visual
   direction; it only holds the project's stated acceptance criterion
   that no text on a phone drops below 14px.

   Without it these render at 12.0–13.8px: the confirmed venue, the event
   date, the starting price and the branch names — the very facts a
   visitor is scanning for.                                              */
@media(max-width:768px){
  .hero-meta b,
  .master-info-strip b,
  .master-info-strip span,
  .branch b,
  .branch span,
  .free-badge,
  .card-kicker,
  .child-kicker,
  .aswan-benefits small,
  .aswan-benefits b,
  .prog-summary dt,
  .prog-summary dd,
  .event-partner span,
  .aswan-why p,
  table.price caption span,
  .reel-frame small{
    font-size:14px;
  }
}