/* Sharm Voyage, staged homepage redesign.
   Logical properties throughout (margin-inline, inset-inline, text-align:start)
   so an Arabic page only needs <html dir="rtl" lang="ar"> plus an Arabic font. */

:root {
  /* palette: sea + sand, taken from the place, not from a template */
  --reef: #0b2e3f;        /* deep water off Ras Mohammed: dark surfaces */
  --reef-2: #123f55;      /* lighter water: hover / layered surfaces */
  --shallows: #8fe0d6;    /* White Island lagoon: accents on dark */
  --lagoon: #0c6a76;      /* lagoon text/links on light (6.3:1 on white, 5.7:1 on foam) */
  --sand: #e8c99a;        /* Sinai sandstone: highlights on dark */
  --ochre: #8a5414;       /* desert tag text on light (6.2:1 on white) */
  --foam: #eef5f4;        /* cool light background */
  --white: #ffffff;
  --ink: #10242e;         /* body text */
  --ink-soft: #3d5561;    /* secondary text (7.9:1 on white) */
  --line: #cfdedd;
  --wa: #25d366;          /* WhatsApp brand green; dark text on it */

  --f-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --f-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --radius: 14px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body {
  margin: 0; background: var(--foam); color: var(--ink);
  font-family: var(--f-body); font-size: 1rem; line-height: 1.6;
  text-rendering: optimizeLegibility;
}
img { display: block; max-inline-size: 100%; block-size: auto; }
a { color: var(--lagoon); text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--sand); outline-offset: 3px; border-radius: 4px; }
.band--white :focus-visible, .band--foam :focus-visible, .masthead :focus-visible { outline-color: var(--lagoon); }
h1, h2, h3 { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
.wrap { max-inline-size: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.mono { font-family: var(--f-mono); font-weight: 500; letter-spacing: .02em; }
.visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 12px; inset-block-start: -60px; z-index: 100; background: var(--white); color: var(--ink); padding: 10px 16px; border-radius: 8px; }
.skip:focus { inset-block-start: 12px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-block-size: 48px; padding: 12px 22px; border-radius: 999px;
  font: 600 1rem/1.1 var(--f-body); text-decoration: none; cursor: pointer;
  border: 2px solid transparent; transition: transform .18s var(--ease), background-color .18s, color .18s, border-color .18s;
  touch-action: manipulation;
}
.btn:active { transform: scale(.97); }
.btn--wa { background: var(--wa); color: var(--reef); }
.btn--wa:hover { background: #3fe07b; }
.btn--ghost { color: var(--white); border-color: rgba(255,255,255,.55); }
.btn--ghost:hover { border-color: var(--white); background: rgba(255,255,255,.08); }
.btn--line { background: transparent; color: var(--reef); border-color: var(--reef); }
.btn--line:hover { background: var(--reef); color: var(--white); }
.btn--onDark { color: var(--white); border-color: rgba(255,255,255,.6); }
.btn--sand { background: var(--sand); color: var(--reef); }
.btn--sand:hover { background: #f3dbb6; }
.btn--sm { min-block-size: 44px; padding: 8px 16px; font-size: .95rem; }
.btn--lg { min-block-size: 56px; padding: 14px 28px; font-size: 1.1rem; }
.icon { flex: none; }

/* ---------- type helpers ---------- */
.eyebrow { margin: 0 0 .75rem; font: 500 .8rem/1.3 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--lagoon); }
.eyebrow--light { color: var(--shallows); }
.section-title { font: 800 clamp(2.4rem, 5.5vw, 4rem)/.95 var(--f-display); text-transform: uppercase; letter-spacing: .005em; color: var(--reef); }
.section-title--light { color: var(--white); }
.section-head { margin-block-end: clamp(28px, 4vw, 44px); }
.section-head--split { display: grid; gap: 16px; align-items: end; }
.section-note { margin: 0; color: var(--ink-soft); max-inline-size: 42ch; }
@media (min-width: 900px) { .section-head--split { grid-template-columns: 1fr auto; } }
.band { padding-block: clamp(56px, 8vw, 104px); }
.band--white { background: var(--white); }
.band--foam { background: var(--foam); }

/* ---------- masthead ---------- */
.masthead { position: sticky; inset-block-start: 0; z-index: 40; background: rgba(255,255,255,.96); border-block-end: 1px solid var(--line); }
@supports (backdrop-filter: blur(8px)) { .masthead { background: rgba(255,255,255,.86); backdrop-filter: blur(8px); } }
.masthead__row { display: flex; align-items: center; gap: 16px; min-block-size: 68px; }
.brand img { inline-size: auto; block-size: 44px; }
.nav { margin-inline-start: auto; }
.nav__menu summary { list-style: none; cursor: pointer; min-block-size: 44px; display: inline-flex; align-items: center; padding-inline: 14px; border: 1px solid var(--line); border-radius: 999px; font-weight: 600; color: var(--reef); }
.nav__menu summary::-webkit-details-marker { display: none; }
.nav__menu ul { position: absolute; inset-inline: var(--gutter); inset-block-start: 64px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; box-shadow: 0 18px 40px rgba(11,46,63,.16); }
.nav__menu a { display: block; padding: 12px 14px; border-radius: 10px; color: var(--reef); font-weight: 600; text-decoration: none; }
.nav__menu a:hover { background: var(--foam); }
.nav__links { display: none; }
@media (min-width: 900px) {
  .nav__menu { display: none; }
  .nav__links { display: flex; gap: 2px; }
  .nav__links a { display: block; padding: 10px 12px; border-radius: 10px; color: var(--reef); font-weight: 600; text-decoration: none; }
  .nav__links a:hover { background: var(--foam); }
}

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: hidden; color: var(--white);
  background:
    radial-gradient(120% 70% at 85% 0%, rgba(143,224,214,.20), transparent 60%),
    linear-gradient(180deg, var(--reef-2) 0%, var(--reef) 70%);
  padding-block: clamp(40px, 6vw, 88px) clamp(56px, 8vw, 112px);
}
/* the horizon: a thin sandstone line where the sea meets Sinai */
.hero::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 10px; background: linear-gradient(90deg, var(--sand), #d7a96a 60%, var(--sand)); }
.hero__grid { display: grid; gap: clamp(36px, 5vw, 64px); align-items: center; }
@media (min-width: 980px) { .hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.hero__title { font-family: var(--f-display); text-transform: uppercase; line-height: .86; letter-spacing: .005em; }
.hero__line { display: block; font-weight: 900; font-size: clamp(2.9rem, 6.2vw, 5.2rem); }
.hero__line + .hero__line { color: var(--shallows); }
.hero__with { display: block; margin-block-start: .35em; font-weight: 700; font-size: clamp(1.6rem, 3.2vw, 2.6rem); color: var(--sand); letter-spacing: .04em; }
.hero__lede { margin: 1.4rem 0 0; max-inline-size: 34ch; font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: rgba(255,255,255,.86); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 1.8rem; }
.hero__phone { margin: 1rem 0 0; color: rgba(255,255,255,.75); font-size: .95rem; }
.hero__phone a { color: var(--white); }

.hero__stack { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: auto auto; gap: 12px; }
.shot { margin: 0; position: relative; border-radius: var(--radius); overflow: hidden; background: var(--reef-2); box-shadow: 0 24px 50px rgba(0,0,0,.35); }
.shot img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.shot figcaption { position: absolute; inset-inline: 0; inset-block-end: 0; padding: 28px 14px 12px; font-size: .9rem; font-weight: 600; line-height: 1.3; background: linear-gradient(transparent, rgba(6,24,33,.85)); }
.shot figcaption .mono { display: block; font-size: .72rem; color: var(--sand); text-transform: uppercase; letter-spacing: .1em; margin-block-end: 2px; }
.shot--main { grid-column: 1 / -1; aspect-ratio: 636 / 426; }
.shot--reef, .shot--sand { grid-column: span 3; aspect-ratio: 4 / 3; }
@media (min-width: 980px) {
  .hero__stack { display: block; block-size: 500px; }
  .shot { position: absolute; }
  .shot--main { inline-size: 88%; inset-inline-end: 0; inset-block-start: 0; z-index: 2; transform: rotate(-1.5deg); }
  .shot--reef { inline-size: 46%; inset-inline-start: 0; inset-block-end: 14px; z-index: 3; transform: rotate(2deg); }
  .shot--sand { inline-size: 50%; inset-inline-end: 4%; inset-block-end: 0; z-index: 4; transform: rotate(-3deg); border: 4px solid var(--sand); }
}
@media (prefers-reduced-motion: no-preference) {
  .shot { animation: rise .7s var(--ease) both; }
  .shot--reef { animation-delay: .08s; } .shot--sand { animation-delay: .16s; }
  @keyframes rise { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
}

/* ---------- category grid ---------- */
.cats { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 980px) { .cats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } }
.cat a { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: var(--radius); overflow: hidden; color: var(--white); text-decoration: none; background: var(--reef); }
@media (max-width: 560px) { .cat a { aspect-ratio: 4 / 5; } }
.cat img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.cat a:hover img { transform: scale(1.04); }
.cat__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,24,33,0) 30%, rgba(6,24,33,.88) 100%); }
.cat__body { position: absolute; inset-inline: 0; inset-block-end: 0; padding: clamp(12px, 2vw, 22px); display: grid; gap: 4px; }
.cat__count { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--sand); }
.cat__title { font: 800 clamp(1.6rem, 3vw, 2.4rem)/.95 var(--f-display); text-transform: uppercase; }
.cat__sub { font-size: .92rem; color: rgba(255,255,255,.85); line-height: 1.35; }
.cat--sea .cat__count { color: var(--shallows); }

/* ---------- signature: the time rail ---------- */
.planner { margin-block-end: 28px; }
.timeline { position: relative; display: flex; flex-wrap: wrap; gap: 8px; }
.timeline__rail { display: none; }
.tick {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px;
  min-block-size: 56px; padding: 8px 14px; border-radius: 12px; cursor: pointer;
  border: 1.5px solid var(--line); background: var(--white); color: var(--reef);
  font: 700 1rem/1.15 var(--f-body); text-align: start; transition: background-color .18s, border-color .18s, color .18s;
}
.tick__count { font-size: .72rem; color: var(--ink-soft); font-weight: 500; }
.tick:hover { border-color: var(--lagoon); }
.tick[aria-pressed="true"] { background: var(--reef); border-color: var(--reef); color: var(--white); }
.tick[aria-pressed="true"] .tick__count { color: var(--sand); }
.tick__dot { display: none; }

@media (min-width: 900px) {
  /* a real scale: each stop sits where its length falls on a log axis from 2 hours to 2 days */
  .timeline { display: block; block-size: 132px; margin-inline: 8px 60px; padding-inline-start: 150px; }
  .timeline__rail { display: block; position: absolute; inset-inline: 150px 0; inset-block-start: 46px; block-size: 6px; border-radius: 6px;
    background: linear-gradient(90deg, var(--shallows) 0%, #6cc3c9 35%, var(--sand) 70%, #d7a96a 100%); }
  .tick:not(.tick--all) { position: absolute; inset-block-start: 22px; inset-inline-start: calc(150px + (100% - 150px) * var(--pos)); translate: -50% 0;
    align-items: center; text-align: center; background: none; border: 0; padding: 0 4px; gap: 6px; min-inline-size: 64px; }
  [dir="rtl"] .tick:not(.tick--all) { translate: 50% 0; }
  .tick:not(.tick--all) .tick__dot { display: block; inline-size: 26px; block-size: 26px; margin-block-end: 8px; border-radius: 50%; background: var(--white); border: 3px solid var(--reef); transition: transform .18s var(--ease), background-color .18s; }
  .tick:not(.tick--all):hover .tick__dot { transform: scale(1.15); }
  .tick:not(.tick--all)[aria-pressed="true"] { background: none; color: var(--reef); }
  .tick:not(.tick--all)[aria-pressed="true"] .tick__dot { background: var(--reef); box-shadow: 0 0 0 5px rgba(12,106,118,.22); }
  .tick:not(.tick--all)[aria-pressed="true"] .tick__count { color: var(--lagoon); }
  .tick:not(.tick--all) .tick__label { font: 800 1.35rem/1 var(--f-display); text-transform: uppercase; white-space: nowrap; }
  .tick--all { position: absolute; inset-inline-start: 0; inset-block-start: 26px; }
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 18px; }
.chip { min-block-size: 44px; padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--white); color: var(--reef); font: 600 .95rem/1 var(--f-body); cursor: pointer; transition: background-color .18s, border-color .18s, color .18s; }
.chip:hover { border-color: var(--lagoon); }
.chip[aria-pressed="true"] { background: var(--lagoon); border-color: var(--lagoon); color: var(--white); }
.planner__status { margin: 16px 0 0; font: 500 .85rem/1.4 var(--f-mono); color: var(--ink-soft); }

/* ---------- tour cards ---------- */
.tours { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .tours { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .tours { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tour { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: box-shadow .2s var(--ease), translate .2s var(--ease); }
.tour:hover { box-shadow: 0 16px 36px rgba(11,46,63,.12); translate: 0 -2px; }
.tour[hidden] { display: none; }
.tour__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--foam); }
.tour__media img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.tour__media--contain { background: var(--white); }
.tour__media--contain img { object-fit: contain; padding: 18px; }
.tour__body { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 20px; flex: 1; }
.tour__meta { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 0; }
.tour__dur { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--reef); background: var(--foam); padding: 4px 8px; border-radius: 6px; }
.tour__cat { font-size: .82rem; font-weight: 600; color: var(--ink-soft); }
.tour__cat::before { content: ""; display: inline-block; inline-size: 8px; block-size: 8px; border-radius: 50%; margin-inline-end: 6px; vertical-align: .05em; background: currentColor; }
.tour__cat--sea { color: var(--lagoon); }
.tour__cat--desert { color: var(--ochre); }
.tour__cat--beyond { color: #6a3f8f; }
.tour__cat--relax { color: #9a3a52; }
.tour__name { font: 700 1.2rem/1.25 var(--f-body); color: var(--reef); }
.tour__desc { margin: 0; color: var(--ink-soft); font-size: .95rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tour__ask { margin-block-start: auto; align-self: flex-start; padding-block: 10px 4px; font-weight: 700; color: var(--lagoon); display: inline-block; }
.tour__ask::after { content: "\2192"; margin-inline-start: .4em; transition: translate .18s var(--ease); }
[dir="rtl"] .tour__ask::after { content: "\2190"; }
.tour__ask:hover::after { translate: 3px 0; }
.empty { text-align: center; padding: 40px 16px; color: var(--ink-soft); }
.more { display: flex; justify-content: center; margin-block-start: 32px; }
.more[hidden] { display: none; }

/* ---------- beyond (full bleed) ---------- */
.beyond { position: relative; isolation: isolate; color: var(--white); padding-block: clamp(72px, 10vw, 140px); overflow: hidden; background: var(--reef); }
.beyond picture, .beyond__bg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; z-index: -2; }
.beyond__bg { object-fit: cover; object-position: 60% 50%; }
.beyond::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8,30,41,.94) 0%, rgba(8,30,41,.82) 45%, rgba(8,30,41,.25) 100%); }
[dir="rtl"] .beyond::before { background: linear-gradient(270deg, rgba(8,30,41,.94) 0%, rgba(8,30,41,.82) 45%, rgba(8,30,41,.25) 100%); }
@media (max-width: 800px) { .beyond::before { background: linear-gradient(180deg, rgba(8,30,41,.9) 0%, rgba(8,30,41,.82) 60%, rgba(8,30,41,.55) 100%); } .beyond__bg { object-position: 70% 50%; } }
.beyond__inner > * { max-inline-size: 620px; }
.beyond__list { margin-block: 28px 32px; border-block-start: 1px solid rgba(255,255,255,.22); }
.beyond__list li { display: grid; grid-template-columns: 82px 1fr; gap: 14px; padding-block: 12px; border-block-end: 1px solid rgba(255,255,255,.22); font-weight: 600; }
.beyond__list .mono { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--sand); padding-block-start: .2em; }

/* ---------- about ---------- */
.about { display: grid; gap: clamp(32px, 5vw, 64px); }
@media (min-width: 980px) { .about { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; } }
.about__text p { max-inline-size: 60ch; color: var(--ink-soft); font-size: 1.05rem; }
.about__text .section-title { margin-block-end: 1.2rem; }
.about__lead { font-size: 1.25rem !important; color: var(--ink) !important; }
.facts { margin: 0; display: grid; gap: 0; border-block-start: 2px solid var(--reef); }
.fact { display: grid; grid-template-columns: minmax(0, 11rem) 1fr; gap: 16px; padding-block: 18px; border-block-end: 1px solid var(--line); align-items: baseline; }
.fact dt { font: 800 1.9rem/1 var(--f-display); text-transform: uppercase; color: var(--reef); }
.fact dd { margin: 0; color: var(--ink-soft); }
@media (max-width: 480px) { .fact { grid-template-columns: 1fr; gap: 4px; } }

/* ---------- contact ---------- */
.contact { background: var(--reef); color: var(--white); padding-block: clamp(64px, 9vw, 120px); position: relative; }
.contact::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 10px; background: linear-gradient(90deg, var(--shallows), #6cc3c9 50%, var(--shallows)); }
.contact__grid { display: grid; gap: 44px; align-items: center; }
@media (min-width: 980px) { .contact__grid { grid-template-columns: 1.15fr 1fr; } }
.contact__lead { color: rgba(255,255,255,.84); font-size: 1.1rem; max-inline-size: 44ch; margin-block: 1.1rem 1.8rem; }
.channels { border-block-start: 1px solid rgba(255,255,255,.2); }
.channels li { display: grid; grid-template-columns: 7rem 1fr; gap: 12px; padding-block: 14px; border-block-end: 1px solid rgba(255,255,255,.2); align-items: baseline; }
.channel__label { font: 500 .75rem/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--sand); }
.channels a { color: var(--white); font-weight: 600; overflow-wrap: anywhere; }
.social { display: flex; flex-wrap: wrap; gap: 6px 18px; }

/* ---------- footer ---------- */
.footer { background: #071f2b; color: rgba(255,255,255,.8); padding-block: 56px 96px; font-size: .95rem; }
@media (min-width: 900px) { .footer { padding-block-end: 32px; } }
.footer__grid { display: grid; gap: 32px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
.footer__brand { grid-column: 1 / -1; }
@media (min-width: 900px) { .footer__brand { grid-column: auto; } }
.footer__logo { display: inline-block; background: var(--white); border-radius: 12px; padding: 10px 14px; }
.footer__logo img { block-size: 40px; inline-size: auto; }
.footer__brand p { max-inline-size: 34ch; }
.footer__h { font: 500 .75rem/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--sand); margin-block-end: 12px; }
.footer li { padding-block: 4px; }
.footer a { color: var(--white); text-decoration: none; overflow-wrap: anywhere; }
.footer a:hover { text-decoration: underline; }
.footer__legal { margin-block: 40px 0; padding-block-start: 20px; border-block-start: 1px solid rgba(255,255,255,.14); font-size: .85rem; color: rgba(255,255,255,.65); }

/* ---------- mobile booking dock ---------- */
.dock { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 50; display: grid; grid-template-columns: 1fr auto; gap: 10px;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: rgba(7,31,43,.96); border-block-start: 1px solid rgba(255,255,255,.12); }
@media (min-width: 900px) { .dock { display: none; } }

/* sticky header offset for in-page jumps */
section[id] { scroll-margin-block-start: 72px; }

.footer__contact { grid-column: 1 / -1; }
@media (min-width: 900px) { .footer__contact { grid-column: auto; } }
/* dock slides away while the hero (which has its own WhatsApp button) is on screen; JS-only enhancement */
.dock { transition: translate .25s var(--ease); }
.dock.is-tucked { translate: 0 110%; visibility: hidden; transition: translate .25s var(--ease), visibility 0s linear .25s; }