/* =========================================================
   HAJOUI VOYAGES — Design system
   Palette: deep navy + gold, elegant serif/sans pairing
   ========================================================= */

:root {
  /* Colors */
  --navy-950: #081726;
  --navy-900: #0b2545;
  --navy-800: #123a6b;
  --navy-700: #1a4d86;
  --gold-600: #b8902f;
  --gold-500: #c9a227;
  --gold-400: #d9b94f;
  --gold-100: #f6ecd2;
  --cream-50: #faf7f0;
  --cream-100: #f3ecdd;
  --ink-900: #1f2630;
  --ink-700: #3b4452;
  --ink-500: #647186;
  --line: #e4dcc9;
  --white: #ffffff;
  --success: #2f7a4f;
  --whatsapp: #25d366;

  /* Type */
  --font-serif: "Playfair Display", "Amiri", Georgia, serif;
  --font-sans: "Inter", "Tajawal", -apple-system, Segoe UI, sans-serif;
  --font-arabic: "Cairo", "Tajawal", "Inter", sans-serif;
  --font-urdu: "Noto Nastaliq Urdu", "Cairo", sans-serif;
  --font-zh: "Noto Sans SC", "Inter", sans-serif;
  --font-hi: "Noto Sans Devanagari", "Inter", sans-serif;
  --font-bn: "Noto Sans Bengali", "Inter", sans-serif;

  /* Spacing / shape */
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 28px;
  --shadow-sm: 0 2px 10px rgba(11, 37, 69, 0.08);
  --shadow-md: 0 10px 30px rgba(11, 37, 69, 0.12);
  --shadow-lg: 0 24px 60px rgba(11, 37, 69, 0.18);
  --container: 1180px;
  --header-h: 84px;
}

/* ---------- Reset ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  color: var(--ink-900);
  background: var(--cream-50);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 700; line-height: 1.2; margin: 0 0 .5em; color: var(--navy-900); overflow-wrap: break-word; }
p { margin: 0 0 1em; color: var(--ink-700); overflow-wrap: break-word; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 1rem; }

/* RTL / Arabic */
[dir="rtl"] body, [lang="ar"] body { font-family: var(--font-arabic); }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 { font-family: var(--font-arabic); }

/* Other scripts */
[lang="ur"] body { font-family: var(--font-urdu); }
[lang="ur"] h1, [lang="ur"] h2, [lang="ur"] h3, [lang="ur"] h4 { font-family: var(--font-urdu); }
[lang="zh"] body { font-family: var(--font-zh); }
[lang="zh"] h1, [lang="zh"] h2, [lang="zh"] h3, [lang="zh"] h4 { font-family: var(--font-zh); }
[lang="hi"] body { font-family: var(--font-hi); }
[lang="hi"] h1, [lang="hi"] h2, [lang="hi"] h3, [lang="hi"] h4 { font-family: var(--font-hi); }
[lang="bn"] body { font-family: var(--font-bn); }
[lang="bn"] h1, [lang="bn"] h2, [lang="bn"] h3, [lang="bn"] h4 { font-family: var(--font-bn); }

/* ---------- Layout helpers ---------- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.section { padding: 88px 0; }
.section--tight { padding: 56px 0; }
.section--navy { background: var(--navy-900); color: var(--cream-50); }
.section--navy h2, .section--navy h3 { color: var(--white); }
.section--navy p { color: #c9d3e0; }
.section--cream { background: var(--cream-100); }
.section-head { max-width: 680px; margin: 0 auto 56px; text-align: center; }
.section-head .eyebrow { display: inline-block; }
.section-head h2 { font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem); }
.section-head p { font-size: 1.05rem; }

.eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .78rem;
  color: var(--gold-600);
  margin-bottom: 14px;
  display: block;
}
.section--navy .eyebrow { color: var(--gold-400); }

.grid { display: grid; gap: 32px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.divider-gold {
  width: 56px; height: 3px; background: var(--gold-500); border-radius: 2px; margin: 18px auto;
}
.section-head .divider-gold { margin: 18px auto 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 30px; border-radius: 999px; font-weight: 600; font-size: .95rem;
  border: 1px solid transparent; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn[hidden] { display: none; }
.btn-gold { background: linear-gradient(135deg, var(--gold-400), var(--gold-600)); color: var(--navy-950); box-shadow: var(--shadow-sm); }
.btn-gold:hover { box-shadow: var(--shadow-md); }
.btn-outline { background: transparent; color: var(--white); border-color: rgba(255,255,255,.45); }
.btn-outline:hover { background: rgba(255,255,255,.1); }
.btn-outline-navy { background: transparent; color: var(--navy-900); border-color: var(--navy-900); }
.btn-outline-navy:hover { background: var(--navy-900); color: var(--white); }
.btn-block { width: 100%; }
.btn-sm { padding: 10px 20px; font-size: .85rem; }
.btn-whatsapp { background: var(--whatsapp); color: var(--white); }

/* ---------- Header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: var(--header-h);
  display: flex; align-items: center;
  background: rgba(8, 23, 38, 0.92);
  backdrop-filter: saturate(160%) blur(10px);
  transition: background .25s ease, box-shadow .25s ease;
}
.site-header.is-scrolled { box-shadow: 0 8px 24px rgba(0,0,0,.18); }
/* Decoupled from the page's reading-width --container (1180px) so the
   header always sizes to its own real content above the inline-nav
   breakpoint below, rather than inheriting the same cap as section/footer
   content -- harmless now that the regrouped nav's worst case (~1112px,
   see the breakpoint comment below) fits under 1180px anyway, and keeps
   this safe if the nav grows again later. */
.site-header .container { max-width: none; display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.brand { display: flex; flex-direction: row; align-items: center; gap: 10px; line-height: 1; }
.brand-name {
  font-family: var(--font-serif); font-weight: 700; letter-spacing: .03em;
  font-size: 1.5rem; color: var(--white);
}
.brand-name span { color: var(--gold-400); }
.brand-logo { display: block; height: 80px; width: auto; }
.brand-logo--footer { height: 72px; }

/* Shown only when running as the installed app (native or browser-PWA),
   never on an ordinary website visit -- see initAppBadge() in main.js. */
.app-badge {
  display: inline-flex; align-items: center;
  font-family: var(--font-sans); font-size: .68rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--gold-400);
  border: 1px solid var(--gold-500); border-radius: 999px; padding: 3px 10px;
  white-space: nowrap;
}
.app-badge[hidden] { display: none; }

/* Side-by-side with the logo widens .brand enough to push the lang button
   off the right edge on narrow phones (verified via getBoundingClientRect:
   the language button's right edge landed past the viewport at 320px) --
   stack the badge under the logo instead once screens get that tight. */
@media (max-width: 760px) {
  .brand { flex-direction: column; gap: 2px; }
  .app-badge { font-size: .6rem; padding: 2px 8px; }
  /* Stacked logo (80px) + badge (~16px) is taller than the 84px fixed
     header, so the badge's bottom edge was overflowing past the header's
     navy background by a couple px -- grow --header-h itself (not just
     .site-header's box) so every dependent spacing value (hero padding-top,
     page-hero padding, .main-nav's fixed top, scroll-margin-top) stays in
     sync. Scoped with :has() so ordinary website visitors (badge always
     [hidden]) keep the normal, more compact 84px header. */
  :root:has(.app-badge:not([hidden])) { --header-h: 108px; }
}

.main-nav { display: flex; align-items: center; gap: 2px; }
.main-nav a {
  display: inline-block; padding: 10px 16px; border-radius: 999px; color: #e7ecf3;
  font-size: .92rem; font-weight: 500; letter-spacing: .01em; transition: background .2s ease, color .2s ease;
}
.main-nav a:hover, .main-nav a.is-active { background: rgba(255,255,255,.1); color: var(--gold-400); }

/* Services dropdown -- groups Hajj & Omra / Voyages linguistiques / Voyages
   scolaires / the circuits-flights-custom anchors under one trigger, so the
   inline nav reads as 6 top-level items instead of 9 flat links. Click-toggle
   (not hover-intent) to match the existing .lang-switch pattern exactly --
   same accessibility behavior (real <button>, aria-expanded, Escape/outside-
   click to close), so visitors only need to learn one interaction model. */
.nav-dropdown { position: relative; }
.nav-dropdown-trigger {
  display: inline-flex; align-items: center; gap: 6px; font-family: inherit;
  background: none; border: none; cursor: pointer;
  padding: 10px 16px; border-radius: 999px; color: #e7ecf3;
  font-size: .92rem; font-weight: 500; letter-spacing: .01em; transition: background .2s ease, color .2s ease;
}
.nav-dropdown-trigger:hover, .nav-dropdown-trigger.is-active { background: rgba(255,255,255,.1); color: var(--gold-400); }
.nav-caret { flex: none; transition: transform .2s ease; }
.nav-dropdown-trigger[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }

.nav-dropdown-menu {
  position: absolute; top: calc(100% + 10px); left: 50%; z-index: 10;
  min-width: 248px; background: var(--white); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md); padding: 8px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translate(-50%, -6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.nav-dropdown-menu.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); }
.nav-dropdown-menu a {
  display: block; padding: 10px 14px; border-radius: 8px; color: var(--ink-900);
  font-size: .88rem; font-weight: 500; white-space: nowrap;
}
.nav-dropdown-menu a:hover { background: var(--cream-100); color: var(--gold-600); }
.nav-dropdown-menu a.is-active { color: var(--gold-600); font-weight: 700; }
[dir="rtl"] .nav-dropdown-menu a { text-align: right; }

.header-actions { display: flex; align-items: center; gap: 14px; }

.lang-switch { position: relative; }
.lang-switch button {
  display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18); color: var(--white); padding: 8px 14px; border-radius: 999px; font-size: .82rem; font-weight: 600;
}
.lang-menu {
  position: absolute; top: calc(100% + 8px); right: 0; background: var(--white); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md); min-width: 160px; max-height: 320px; padding: 6px; display: none; overflow-y: auto;
}
[dir="rtl"] .lang-menu { right: auto; left: 0; }
.lang-menu.is-open { display: block; }
.lang-menu button { width: 100%; text-align: left; padding: 10px 12px; border-radius: 8px; color: var(--ink-900); background: none; font-size: .88rem; font-weight: 500; }
[dir="rtl"] .lang-menu button { text-align: right; }
.lang-menu button:hover { background: var(--cream-100); }
.lang-menu button.is-active { color: var(--gold-600); font-weight: 700; }

/* Account sign-in trigger / signed-in menu -- cloned from .lang-switch's
   exact structure/CSS/JS pattern (see initAccountMenu() in auth.js) so
   visitors only ever have to learn one popover interaction model. */
.account-switch { position: relative; }
.account-switch [data-account-trigger] {
  display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18); color: var(--gold-400); padding: 8px 14px;
  border-radius: 999px; font-size: .82rem; font-weight: 600; max-width: 140px;
}
.account-switch [data-account-trigger][hidden] { display: none; }
.account-switch [data-account-trigger] span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-switch [data-signin-trigger][hidden] { display: none; }
.account-menu {
  position: absolute; top: calc(100% + 8px); right: 0; background: var(--white); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md); min-width: 180px; padding: 6px; display: none;
}
[dir="rtl"] .account-menu { right: auto; left: 0; }
.account-menu.is-open { display: block; }
.account-menu a, .account-menu button {
  display: block; width: 100%; text-align: left; padding: 10px 12px; border-radius: 8px;
  color: var(--ink-900); background: none; font-size: .88rem; font-weight: 500;
}
[dir="rtl"] .account-menu a, [dir="rtl"] .account-menu button { text-align: right; }
.account-menu a:hover, .account-menu button:hover { background: var(--cream-100); }

/* ---------- Sign-in / sign-up auth modal ---------- */
.auth-modal-backdrop {
  position: fixed; inset: 0; z-index: 1400; background: rgba(8,23,38,.55);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.auth-modal-backdrop[hidden] { display: none; }
.auth-modal {
  position: relative; background: var(--white); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); padding: 28px; max-width: 400px; width: 100%;
}
.auth-tabs { display: flex; gap: 6px; margin-bottom: 18px; padding-right: 22px; }
[dir="rtl"] .auth-tabs { padding-right: 0; padding-left: 22px; }
.auth-tabs button {
  flex: 1; padding: 10px; border-radius: 999px; font-weight: 600; font-size: .85rem;
  background: var(--cream-100); color: var(--ink-500); border: none;
}
.auth-tabs button.is-active { background: var(--navy-900); color: var(--white); }
.auth-box [data-auth-panel][hidden] { display: none; }
.auth-error { font-size: .85rem; color: #b3261e; margin: -4px 0 14px; }
.auth-error[hidden] { display: none; }
.auth-error.is-success { color: var(--success); }
.auth-divider { display: flex; align-items: center; gap: 10px; margin: 18px 0; color: var(--ink-500); font-size: .82rem; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-box .btn-outline-navy + .btn-outline-navy { margin-top: 10px; }
.auth-box [data-auth-forgot] {
  display: block; margin-top: 6px; background: none; border: none; color: var(--gold-600);
  font-size: .82rem; font-weight: 600; padding: 0;
}

.nav-toggle { display: none; background: none; border: none; padding: 12px; width: 44px; height: 44px; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--white); margin: 5px 0; border-radius: 2px; }

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 64vh; display: flex; align-items: center;
  padding-top: var(--header-h);
  background: var(--navy-950);
  color: var(--white); overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background-image: url('../img/hero-istanbul.jpg');
  background-size: cover; background-position: center 65%;
  animation: heroZoom 26s ease-in-out infinite alternate;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(circle at 18% 20%, rgba(201,162,39,.22), transparent 45%),
              linear-gradient(160deg, rgba(8,23,38,.78) 0%, rgba(10,30,55,.70) 55%, rgba(13,38,68,.65) 100%);
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1; opacity: .12; pointer-events: none;
  background-image:
    repeating-linear-gradient(45deg, rgba(201,162,39,.5) 0 2px, transparent 2px 26px),
    repeating-linear-gradient(-45deg, rgba(201,162,39,.5) 0 2px, transparent 2px 26px);
}
.hero .container { position: relative; z-index: 2; min-width: 0; }
@keyframes heroZoom {
  0% { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.12) translate(-1.5%, -1%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-bg { animation: none; }
}
.hero-row { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }
.hero-inner { max-width: 700px; min-width: 0; flex: 1 1 420px; }
.hero-inner h1 { color: var(--white); font-size: clamp(2.2rem, 1.8rem + 2.4vw, 3.6rem); margin-bottom: 22px; }
.hero-inner h1 em { font-style: normal; color: var(--gold-400); }
.hero-inner p.lead { font-size: 1.15rem; color: #d7deeb; max-width: 560px; }
.hero-cta { display: flex; gap: 16px; margin-top: 32px; flex-wrap: wrap; }
.hero-app-note { margin-top: 14px; font-size: .82rem; color: #c9d3e0; }

.hero-stats { display: flex; gap: 40px; margin-top: 64px; flex-wrap: wrap; }
.hero-stats .stat strong { display: block; font-family: var(--font-serif); font-size: 2.1rem; color: var(--gold-400); }
.hero-stats .stat span { font-size: .82rem; color: #c9d3e0; letter-spacing: .04em; }

/* ---------- Trust bar (below hero) ---------- */
.trust-bar { padding: 32px 0 40px; }
.trust-bar-inner { display: flex; justify-content: center; }
.trust-badges { display: flex; align-items: center; gap: 28px; }
.trust-badge { position: relative; display: inline-flex; text-decoration: none; }
.trust-badge-circle {
  width: 60px; height: 60px; border-radius: 50%; background: var(--white);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden;
  box-shadow: var(--shadow-sm); transition: transform .35s cubic-bezier(.34,1.56,.64,1);
  position: relative; z-index: 2;
}
.trust-badge-circle img { max-width: 42px; max-height: 42px; width: auto; height: auto; object-fit: contain; }
.trust-badge:hover .trust-badge-circle, .trust-badge:focus-visible .trust-badge-circle, .trust-badge.is-open .trust-badge-circle { transform: scale(1.08); }
/* Reads as an ON/OFF toggle switching on, not a tooltip popping up. The
   label starts as a zero-width point tucked *under* the circle ("knob") --
   inset-inline-end/start is offset by less than the knob's own width, and
   z-index sits below it -- so growth is hidden at first and then looks
   pulled out from behind the knob rather than appearing from a gap.
   border-radius is a fixed px (999px, clamped by the browser to whatever
   the box's own height allows) rather than a %, so while the box is still
   narrow it renders as a full circle and only resolves into a stadium/pill
   once wide enough: the shape itself morphs circle -> pill as it grows,
   like a switch's track lighting up. Anchored with inset-inline-* rather
   than left/right so it auto-mirrors under RTL. The two badges sit close
   together (28px gap), so a label opening *toward* the neighboring badge
   would slide right over it -- each one instead opens outward, away from
   the other, into the open space on its own side of the pair. */
.trust-badge-label {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 1;
  background: linear-gradient(135deg, var(--gold-400), var(--gold-600));
  color: var(--navy-950); font-size: .8rem; font-weight: 600; white-space: nowrap;
  max-width: 0; opacity: 0; overflow: hidden; padding: 10px 0; border-radius: 999px; box-shadow: none;
  transition: max-width .45s cubic-bezier(.34,1.56,.64,1), padding .45s cubic-bezier(.34,1.56,.64,1),
              opacity .3s ease .12s, box-shadow .3s ease;
}
.trust-badge:first-child .trust-badge-label { inset-inline-end: 48px; text-align: end; }
.trust-badge:last-child .trust-badge-label { inset-inline-start: 48px; }
.trust-badge:hover .trust-badge-label,
.trust-badge:focus-visible .trust-badge-label,
.trust-badge.is-open .trust-badge-label {
  max-width: 260px; opacity: 1; padding: 10px 26px;
  box-shadow: var(--shadow-md), 0 0 0 5px rgba(201,162,39,.25);
}
/* On narrow phones the two badges sit close to the screen's own edges, so
   a single-line 260px pill opening outward runs off-screen. Below 480px,
   let it wrap to 2-3 short lines within a width that actually fits, and
   ease off the stadium radius since a wrapped block reads oddly that round. */
@media (max-width: 480px) {
  .trust-badge-label { border-radius: 14px; }
  .trust-badge:hover .trust-badge-label,
  .trust-badge:focus-visible .trust-badge-label,
  .trust-badge.is-open .trust-badge-label {
    max-width: 118px; white-space: normal; line-height: 1.3; font-size: .74rem; padding: 8px 18px;
  }
}
@media (max-width: 340px) {
  .trust-badge:hover .trust-badge-label,
  .trust-badge:focus-visible .trust-badge-label,
  .trust-badge.is-open .trust-badge-label {
    max-width: 78px;
  }
}

/* ---------- Search widget ---------- */
.search-widget {
  position: relative; z-index: 5; margin-top: -16px; margin-bottom: 56px;
  background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  padding: 6px; overflow: hidden;
}
.search-tabs { display: flex; gap: 2px; padding: 6px 6px 0; }
.search-tab {
  display: flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 10px 10px 0 0;
  font-weight: 600; font-size: .9rem; color: var(--ink-500); background: transparent; border: none;
  cursor: pointer; transition: background .2s ease, color .2s ease;
}
.search-tab svg { width: 18px; height: 18px; flex-shrink: 0; }
.search-tab.is-active { background: var(--cream-100); color: var(--navy-900); }
.search-panel {
  display: flex; align-items: flex-end; gap: 16px; padding: 22px 26px 26px; flex-wrap: wrap;
  background: var(--cream-100); border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.search-panel[hidden] { display: none; }
.search-field { display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 220px; }
.search-field label { font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-500); }
.search-field select {
  padding: 13px 16px; border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: var(--white); color: var(--ink-900); font-size: .95rem;
}
.search-submit { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.search-panel p { margin: 0; flex: 1; min-width: 220px; color: var(--ink-700); font-size: .92rem; }
@media (max-width: 760px) {
  .search-widget { margin-top: -10px; }
  .search-tabs { overflow-x: auto; }
  .search-panel { padding: 18px; }
}

.destination-card.is-filtered-out { display: none; }
.destination-group.is-empty { display: none; }

.license-doc { max-width: 560px; width: 100%; height: auto; margin: 0 auto; border-radius: var(--radius-md); border: 1px solid var(--line); box-shadow: var(--shadow-md); }

.iata-logo { max-width: 260px; width: 100%; height: auto; margin: 0 auto; display: block; }
.iata-code { font-weight: 700; color: var(--navy-900); }
#accreditation, #accreditation-iata { scroll-margin-top: calc(var(--header-h) + 20px); }

.filter-pills { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 40px; }
.filter-pill {
  padding: 10px 20px; border-radius: 999px; font-weight: 600; font-size: .86rem;
  background: var(--white); color: var(--navy-900); border: 1px solid var(--line);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.filter-pill:hover { border-color: var(--gold-500); }
.filter-pill.is-active { background: linear-gradient(135deg, var(--gold-400), var(--gold-600)); color: var(--navy-950); border-color: transparent; }

@media (max-width: 760px) {
  .filter-pills { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; margin-left: -24px; margin-right: -24px; padding-left: 24px; padding-right: 24px; scrollbar-width: none; }
  .filter-pills::-webkit-scrollbar { display: none; }
  .filter-pill { flex-shrink: 0; }
}

.page-hero {
  padding: calc(var(--header-h) + 80px) 0 80px;
  background: linear-gradient(160deg, var(--navy-950), var(--navy-800));
  color: var(--white); text-align: center;
}
.page-hero h1 { color: var(--white); font-size: clamp(2rem, 1.6rem + 1.8vw, 2.8rem); }
.page-hero p { color: #c9d3e0; max-width: 620px; margin: 0 auto; }
.breadcrumb { font-size: .82rem; letter-spacing: .06em; color: var(--gold-400); margin-bottom: 14px; text-transform: uppercase; }

/* ---------- Cards ---------- */
.card {
  background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
  padding: 32px; border: 1px solid var(--line); transition: transform .2s ease, box-shadow .2s ease;
  height: 100%;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.card-icon {
  width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--gold-100), var(--gold-400)); margin-bottom: 20px; color: var(--navy-900);
}
.card-icon svg { width: 28px; height: 28px; }
.card h3 { font-size: 1.18rem; margin-bottom: 10px; }
.card p { font-size: .94rem; margin-bottom: 0; }
.card .card-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-weight: 600; font-size: .88rem; color: var(--gold-600); }

.destination-card { border-radius: var(--radius-md); overflow: hidden; background: var(--white); box-shadow: var(--shadow-sm); border: 1px solid var(--line); transition: transform .2s ease, box-shadow .2s ease; scroll-margin-top: calc(var(--header-h) + 20px); }
.destination-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.destination-media { position: relative; height: 220px; overflow: hidden; background: linear-gradient(135deg, var(--navy-800), var(--navy-950)); display: flex; align-items: center; justify-content: center; }
.destination-media svg { width: 64px; height: 64px; color: rgba(255,255,255,.35); }
.destination-media--logo svg { width: 130px; height: 130px; color: var(--gold-400); }
.destination-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.08) contrast(1.03); transition: transform .5s cubic-bezier(.2,.7,.3,1), filter .3s ease; }
.destination-media::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, rgba(8,23,38,0) 55%, rgba(8,23,38,.5) 100%); }
.destination-card:hover .destination-media img { transform: scale(1.08); }
.destination-tag { position: absolute; z-index: 2; top: 16px; left: 16px; background: rgba(8,23,38,.75); color: var(--gold-400); font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; }
[dir="rtl"] .destination-tag { left: auto; right: 16px; }
.popular-badge { position: absolute; z-index: 2; bottom: 16px; left: 16px; background: linear-gradient(135deg, var(--gold-400), var(--gold-600)); color: var(--navy-950); font-weight: 700; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; }
[dir="rtl"] .popular-badge { left: auto; right: 16px; }
.favorite-btn {
  position: absolute; z-index: 2; top: 14px; right: 14px; width: 36px; height: 36px;
  border-radius: 50%; background: rgba(8,23,38,.55); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: var(--white);
  transition: background .2s ease, color .2s ease;
}
[dir="rtl"] .favorite-btn { right: auto; left: 14px; }
.favorite-btn:hover { background: rgba(8,23,38,.8); }
.favorite-btn svg { width: 18px; height: 18px; }
.hrt-fill { display: none; }
.favorite-btn.is-favorited { background: rgba(8,23,38,.8); }
.favorite-btn.is-favorited .hrt-out { display: none; }
.favorite-btn.is-favorited .hrt-fill { display: inline; color: var(--gold-400); }
@keyframes fav-pop { 0%,100% { transform: scale(1); } 50% { transform: scale(1.35); } }
.favorite-btn.is-favorited svg { animation: fav-pop .25s ease; }
.destination-body { padding: 24px; }
.destination-body h3 { font-size: 1.15rem; margin-bottom: 6px; }
.destination-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.destination-price { font-family: var(--font-serif); color: var(--navy-900); font-weight: 700; font-size: 1.1rem; }
.destination-price small { display: block; font-family: var(--font-sans); font-weight: 500; font-size: .68rem; color: var(--ink-500); text-transform: uppercase; letter-spacing: .04em; }

.testimonial-card { background: var(--white); border-radius: var(--radius-md); padding: 32px; border: 1px solid var(--line); box-shadow: var(--shadow-sm); height: 100%; }
.testimonial-stars { color: var(--gold-500); letter-spacing: 2px; margin-bottom: 14px; font-size: 1rem; }
.testimonial-quote { font-style: italic; color: var(--ink-700); margin-bottom: 20px; }
.testimonial-person { display: flex; align-items: center; gap: 12px; }
.testimonial-avatar {
  width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--navy-800), var(--gold-500));
  display: flex; align-items: center; justify-content: center; color: var(--white); font-weight: 700; font-family: var(--font-serif);
}
.testimonial-person strong { display: block; font-size: .92rem; color: var(--navy-900); }
.testimonial-person span { font-size: .8rem; color: var(--ink-500); }

.blog-card { background: var(--white); border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease; }
.blog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.blog-media { position: relative; height: 190px; overflow: hidden; background: linear-gradient(135deg, var(--gold-100), var(--cream-100)); display: flex; align-items: center; justify-content: center; }
.blog-media svg { width: 52px; height: 52px; color: var(--gold-600); opacity: .6; }
.blog-media img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.08) contrast(1.03); transition: transform .5s cubic-bezier(.2,.7,.3,1), filter .3s ease; }
.blog-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(8,23,38,0) 60%, rgba(8,23,38,.32) 100%); }
.blog-card:hover .blog-media img { transform: scale(1.08); }
.blog-body { padding: 24px; }
.blog-meta { font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--gold-600); font-weight: 600; margin-bottom: 10px; }
.blog-body h3 { font-size: 1.1rem; margin-bottom: 10px; }
.blog-body p { font-size: .92rem; }

.article-figure { border-radius: var(--radius-md); overflow: hidden; margin-bottom: 32px; box-shadow: var(--shadow-sm); }
.article-figure img { width: 100%; max-height: 380px; object-fit: cover; display: block; filter: saturate(1.08) contrast(1.03); transition: transform .6s cubic-bezier(.2,.7,.3,1); }
.article-figure:hover img { transform: scale(1.03); }

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field[hidden] { display: none; }
.field label { font-size: .85rem; font-weight: 600; color: var(--navy-900); }
.field input, .field select, .field textarea {
  width: 100%; min-width: 0; padding: 13px 16px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--white);
  color: var(--ink-900); transition: border-color .2s ease, box-shadow .2s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--gold-500); box-shadow: 0 0 0 3px rgba(201,162,39,.18);
}
.field textarea { resize: vertical; min-height: 110px; }
.form-note { font-size: .82rem; color: var(--ink-500); margin-top: 6px; }
.form-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.form-success { font-size: .9rem; font-weight: 600; color: var(--success); margin-top: 14px; }
.form-success[hidden] { display: none; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-950); color: #c9d3e0; padding: 80px 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 48px; padding-bottom: 56px; border-bottom: 1px solid rgba(255,255,255,.08); }
.footer-brand .brand-name { color: var(--white); }
.footer-brand p { color: #9fb0c6; max-width: 280px; margin-top: 16px; font-size: .92rem; }
.footer h4 { color: var(--white); font-family: var(--font-sans); font-size: .92rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 18px; }
.footer ul li { margin-bottom: 12px; font-size: .92rem; }
.footer ul li a:hover { color: var(--gold-400); }
.footer-contact li { display: flex; gap: 10px; align-items: flex-start; }
.footer-contact svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--gold-400); }
.footer-iata-logo { height: 20px; width: auto; flex-shrink: 0; margin-top: 1px; }
.footer-morocco-logo { height: 24px; width: auto; flex-shrink: 0; margin-top: -1px; }
.footer-payment { align-items: center; }
.footer-payment img { width: 96px; height: 34px; flex-shrink: 0; border-radius: 8px; }
.social-row { display: flex; gap: 10px; margin-top: 18px; }
.social-row a {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center;
  transition: background .2s ease, border-color .2s ease;
}
.social-row a svg { width: 17px; height: 17px; }
.social-row a:hover { background: var(--gold-500); border-color: var(--gold-500); color: var(--navy-950); }
/* Header reuses the footer's .social-row look (same dark-navy background)
   but sits inline with the other header-actions controls, so the
   footer's stacking margin-top doesn't apply here. Icon color also needs
   to be set explicitly here: .site-footer cascades a light ambient
   color to its plain-<a> children, but .site-header has no such ambient
   color (every header element sets its own color individually), so
   without this the icons would inherit the dark body text color and
   vanish against the dark header background. */
.header-social { margin-top: 0; }
.header-social a { color: var(--white); }
.footer-bottom { padding: 24px 0 28px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: .82rem; color: #7e8ea3; }

.price-converted { display: block; font-size: .74rem; font-weight: 500; color: var(--ink-500); margin-top: 2px; font-family: var(--font-sans); }

/* ---------- WhatsApp floating button ---------- */
/* bottom: 96px (not the usual 26px corner offset) to leave room below for
   .scroll-progress-fab, which now takes the bottom-most slot in this
   button stack -- see that rule's comment for the full stack order. */
.whatsapp-float {
  position: fixed; bottom: 96px; right: 26px; z-index: 1100;
  width: 60px; height: 60px; border-radius: 50%; background: var(--whatsapp); color: var(--white);
  display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px rgba(0,0,0,.25);
  animation: pulse 2.4s infinite;
}
[dir="rtl"] .whatsapp-float { right: auto; left: 26px; }
.whatsapp-float svg { width: 30px; height: 30px; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(37,211,102,.55), 0 10px 24px rgba(0,0,0,.25); }
  70% { box-shadow: 0 0 0 14px rgba(37,211,102,0), 0 10px 24px rgba(0,0,0,.25); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0), 0 10px 24px rgba(0,0,0,.25); }
}

/* ---------- Currency converter floating button ---------- */
.fx-float {
  position: fixed; bottom: 166px; right: 26px; z-index: 1100;
  width: 60px; height: 60px; border-radius: 50%; background: var(--navy-900); color: var(--gold-400);
  display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px rgba(0,0,0,.25);
  border: none; cursor: pointer; padding: 0;
}
.fx-float:hover { background: var(--navy-800); }
.fx-float svg { width: 32px; height: 32px; }
[dir="rtl"] .fx-float { right: auto; left: 26px; }
.fx-panel {
  position: fixed; bottom: 236px; right: 26px; z-index: 1200;
  width: 300px; max-width: calc(100vw - 52px);
  background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  padding: 20px; border: 1px solid var(--line);
}
[dir="rtl"] .fx-panel { right: auto; left: 26px; }
.fx-panel[hidden] { display: none; }
.fx-panel h3 { font-size: 1rem; margin: 0 0 14px; padding-right: 22px; }
[dir="rtl"] .fx-panel h3 { padding-right: 0; padding-left: 22px; }
.fx-panel .field { margin-bottom: 14px; }
.fx-row { display: flex; gap: 8px; align-items: flex-end; }
.fx-row .field { flex: 1; margin-bottom: 0; min-width: 0; }
.fx-swap {
  flex: none; background: var(--cream-100); border: 1px solid var(--line); border-radius: var(--radius-sm);
  cursor: pointer; color: var(--gold-600); padding: 12px 9px; margin-bottom: 0;
}
.fx-swap:hover { background: var(--gold-100); }
.fx-result {
  margin-top: 16px; padding: 12px 14px; background: var(--cream-100); border-radius: var(--radius-sm);
  font-weight: 700; color: var(--navy-900); text-align: center; font-size: .92rem; min-height: 20px;
}
.fx-close {
  position: absolute; top: 14px; right: 16px; background: none; border: none; cursor: pointer;
  color: var(--ink-500); font-size: 1.4rem; line-height: 1; padding: 0;
}
[dir="rtl"] .fx-close { right: auto; left: 16px; }

/* ---------- Scroll-progress / back-to-top floating button ----------
   Bottom-most button in the fixed bottom-right stack -- sits under the
   WhatsApp button (96px) and currency converter (166px) above it, same
   60x60 size as both. Injected by main.js' initScrollProgress() rather
   than hardcoded per-page markup, like the other dynamic bits in main.js.
   Built from two stacked SVG <circle>s: .track is the always-visible pale
   ring, .fill is the same ring with a dashed stroke whose dash-offset
   main.js drives from scroll position, so it draws in clockwise from the
   top as the visitor scrolls down. Center label shows the live percentage;
   clicking the button anywhere smooth-scrolls back to top. */
.scroll-progress-fab {
  position: fixed; bottom: 26px; right: 26px; z-index: 1100;
  width: 60px; height: 60px; border-radius: 50%; background: var(--white);
  border: none; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}
.scroll-progress-fab:hover { background: var(--cream-100); }
[dir="rtl"] .scroll-progress-fab { right: auto; left: 26px; }
.scroll-progress-fab svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  transform: rotate(-90deg); /* fill starts at 12 o'clock instead of 3 o'clock */
}
.scroll-progress-fab .track { fill: none; stroke: var(--cream-100); stroke-width: 4; }
.scroll-progress-fab .fill { fill: none; stroke-width: 4; stroke-linecap: round; }
@media (prefers-reduced-motion: no-preference) {
  .scroll-progress-fab .fill { transition: stroke-dashoffset .1s linear; }
}
.scroll-progress-fab .label {
  position: relative; font-family: var(--font-sans); font-weight: 700;
  font-size: .72rem; color: var(--navy-900);
}

/* ---------- iOS install instructions modal ---------- */
.ios-modal-backdrop {
  position: fixed; inset: 0; z-index: 1400; background: rgba(8,23,38,.55);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.ios-modal-backdrop[hidden] { display: none; }
.ios-modal {
  position: relative; background: var(--white); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); padding: 28px; max-width: 360px; width: 100%;
}
.ios-modal h3 { font-size: 1.05rem; margin: 0 0 16px; padding-right: 22px; }
[dir="rtl"] .ios-modal h3 { padding-right: 0; padding-left: 22px; }
.ios-modal ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; font-size: .92rem; color: var(--ink-700); }
[dir="rtl"] .ios-modal ol { padding-left: 0; padding-right: 22px; }

/* ---------- Misc ---------- */
.badge { display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--gold-100); color: var(--gold-600); font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.placeholder-note { background: #fff7e0; border: 1px dashed var(--gold-500); color: #6b5418; padding: 14px 18px; border-radius: var(--radius-sm); font-size: .84rem; margin: 18px 0; text-align: center; }
.account-promo { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px; background: var(--cream-100); border: 1px solid var(--line); color: var(--navy-900); padding: 16px 22px; border-radius: var(--radius-md); margin: 0 0 24px; text-align: center; }
.account-promo[hidden] { display: none; }
.account-promo svg { color: var(--gold-600); flex-shrink: 0; }
.map-embed { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.map-embed iframe { width: 100%; height: 360px; border: 0; display: block; }
.map-fallback { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; height: 360px; padding: 24px; border-radius: var(--radius-md); border: 1px solid var(--line); box-shadow: var(--shadow-sm); background: var(--cream-100); color: var(--ink-700); }
.map-fallback[hidden] { display: none; }
.map-fallback svg { color: var(--gold-600); }
.map-fallback p { font-weight: 600; margin: 0; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.media-frame {
  border-radius: var(--radius-lg); overflow: hidden; position: relative; min-height: 420px;
  background: linear-gradient(155deg, var(--navy-900), var(--navy-700));
  display: flex; align-items: center; justify-content: center;
}
.media-frame svg { width: 90px; height: 90px; color: rgba(255,255,255,.25); }
.media-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.06) contrast(1.03); transition: transform .6s cubic-bezier(.2,.7,.3,1); }
.media-frame::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, rgba(8,23,38,0) 65%, rgba(8,23,38,.3) 100%); }
.media-frame:hover img { transform: scale(1.04); }
.media-frame .frame-badge {
  position: absolute; z-index: 2; bottom: 24px; left: 24px; background: var(--white); padding: 16px 22px; border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); display: flex; gap: 14px; align-items: center;
}
[dir="rtl"] .media-frame .frame-badge { left: auto; right: 24px; }
.frame-badge strong { display: block; font-family: var(--font-serif); font-size: 1.4rem; color: var(--navy-900); }
.frame-badge span { font-size: .76rem; color: var(--ink-500); }
.frame-badge--compact { bottom: 14px; left: 14px; padding: 8px 12px; gap: 8px; }
[dir="rtl"] .frame-badge--compact { left: auto; right: 14px; }
.frame-badge--compact svg { width: 16px; height: 16px; }
.frame-badge--compact strong { font-size: .92rem; }
.frame-badge--compact span { font-size: .66rem; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; counter-reset: step; }
.step { position: relative; padding-top: 8px; }
.step .step-num {
  display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--navy-900); color: var(--gold-400); font-family: var(--font-serif); font-weight: 700; font-size: 1.2rem; margin-bottom: 18px;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px 32px; }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .steps { grid-template-columns: 1fr; }
}
/* Nav was regrouped from 9 flat links down to 6 top-level items (Accueil,
   À propos, Services▾, Destinations, Blog, Contact) -- the "Services"
   dropdown holds Circuits/Vols & hôtels/Hajj & Omra/Voyages linguistiques/
   Voyages scolaires/Sur mesure. Remeasured the same way as before (Playwright,
   all 10 site languages, header container max-width uncapped): worst case is
   now Russian at ~1112px of header width (previously ~1600px before the
   regroup), so this breakpoint dropped from 1700px to 1200px (~90px buffer)
   -- most laptops (1366px+) now get the inline link row instead of the
   hamburger, while still guaranteed to never overflow in any language. */
@media (max-width: 1200px) {
  .site-header .container { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
  .brand { justify-self: center; }
  .nav-toggle { justify-self: start; }
  .header-actions { justify-self: end; }
  .main-nav { position: fixed; top: var(--header-h); left: 0; right: 0; background: var(--navy-950); flex-direction: column;
    align-items: stretch; padding: 12px; gap: 4px; max-height: 0; overflow: hidden; transition: max-height .3s ease; }
  .main-nav.is-open { max-height: 70vh; overflow-y: auto; }
  .main-nav a { width: 100%; padding: 14px 16px; }
  .nav-toggle { display: block; }
  .header-actions { gap: 8px; }
  .header-actions > .btn-gold { display: none; }
  /* Same treatment as the gold CTA button just above: the collapsed
     hamburger nav already leaves .header-actions very little room
     (see the icon-only sign-in/account gotcha further down), so the
     header's social icons drop out below this breakpoint too -- they
     stay reachable in the footer, which is never this cramped. */
  .header-social { display: none; }

  /* The floating popover panel doesn't make sense inside a full-width
     vertical mobile menu -- becomes an inline accordion instead, expanding
     downward in place when the trigger is tapped. */
  .nav-dropdown { width: 100%; }
  .nav-dropdown-trigger { width: 100%; justify-content: space-between; padding: 14px 16px; }
  .nav-dropdown-menu {
    position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto;
    min-width: 0; box-shadow: none; background: none; padding: 0; margin: 0;
    max-height: 0; overflow: hidden; transition: max-height .25s ease;
  }
  /* .nav-dropdown-menu.is-open (two classes) outranks the plain
     .nav-dropdown-menu override above on specificity alone -- without
     repeating it here, its desktop transform: translate(-50%, 0) still
     wins and shoves the accordion off-screen by half its own width. */
  .nav-dropdown-menu.is-open { max-height: 360px; transform: none; }
  .nav-dropdown-menu a { color: #cdd6e3; padding-top: 12px; padding-bottom: 12px; padding-inline-start: 32px; padding-inline-end: 16px; }
  .nav-dropdown-menu a:hover, .nav-dropdown-menu a.is-active { background: rgba(255,255,255,.08); color: var(--gold-400); }
}

@media (max-width: 760px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .form-grid { grid-template-columns: 1fr; }
  .hero-stats { gap: 28px; }
  .form-actions { flex-direction: column; align-items: flex-start; }
  .section { padding: 64px 0; }
  /* The hero's desktop layout vertically centers .hero-inner inside a
     64vh band via align-items:center -- fine when the content (heading
     + CTA buttons) is short, but the CTA stack has grown (quote, careers,
     app-download buttons, note text) to the point its height can exceed
     the centered band on a phone-height viewport, which pushes the
     content's top edge up past the fixed header and gets visually
     clipped behind it. Top-align + let the box grow instead of forcing
     a height, so this can't recur however many buttons get added later. */
  .hero { align-items: flex-start; min-height: 0; padding-top: calc(var(--header-h) + 32px); padding-bottom: 48px; }
  .hero-inner h1 { font-size: clamp(1.7rem, 1.3rem + 3vw, 2.4rem); }
  /* Buttons size to their own text by default (different widths for
     "We're hiring" vs "Request a free quote" vs "Download the app"),
     which looks inconsistent once they're stacked in a single column on
     narrow screens -- stretch them to match instead. Scoped to the
     homepage's top hero specifically (".hero .hero-cta"), since the
     ".hero-cta" class is reused on every other page's bottom CTA band
     (always just 2 buttons, never reported as a problem) and those
     should keep their current auto-width look. */
  .hero .hero-cta { flex-direction: column; align-items: stretch; }
  .media-frame { min-height: 280px; }
  .frame-badge--compact { bottom: 10px; left: 10px; padding: 6px 9px; gap: 6px; }
  [dir="rtl"] .frame-badge--compact { left: auto; right: 10px; }
  .frame-badge--compact svg { width: 13px; height: 13px; }
  .frame-badge--compact strong { font-size: .78rem; }
  .frame-badge--compact span { font-size: .58rem; }

  /* Both the "Connexion" sign-in button and, once signed in, the account
     trigger (icon + full account name, max-width:140px) sit right next to
     the language button inside .header-actions -- on a phone that combined
     width doesn't fit the grid column CSS grid reserves for it (1fr auto
     1fr tracks default to minmax(auto,1fr), so they size to content rather
     than shrinking, and .site-header is `position:fixed` so the overflow
     doesn't even grow the page's scrollbar -- it just visually clips past
     the screen edge). Icon-only on phones for both buttons removes the
     variable-length text/name from the width budget entirely -- each
     button already carries an aria-label (header.signIn / header.account.aria)
     via data-i18n-aria, so this stays just as accessible with a screen
     reader as it was with the text visible. The person icon itself is the
     signed-in/out cue: neutral white (matching the header's other icons,
     via .btn-outline's color) while signed out, gold (set directly on
     [data-account-trigger]'s base color further up, so it applies at every
     width, not just this breakpoint) once actually signed in. */
  .account-switch [data-signin-trigger],
  .account-switch [data-account-trigger] {
    max-width: none; padding: 8px; gap: 0; width: 38px; height: 38px;
    justify-content: center;
  }
  .account-switch [data-signin-trigger] span,
  .account-switch [data-account-trigger] span { display: none; }
}

/* Even with both buttons icon-only above, the header's own 24px column
   gap + 24px side padding (both tuned for desktop) still don't leave
   quite enough room on the smallest real phones still in use (measured:
   needs ~367px, so still clips ~7-47px past the edge at 320-360px
   viewports) -- tighten just those two on phones this narrow specifically,
   rather than touching the shared .container padding every section uses. */
@media (max-width: 400px) {
  .site-header .container { gap: 10px; padding-left: 14px; padding-right: 14px; }
}