@import url('./assets/fonts/fonts.css');

/* Foundations */
:root {
  --paper: #f6f3ea;
  --white: #fffdf6;
  --ink: #27392d;
  --primary: #ac4f28;
  --clay: #bd5d3f;
  --sea: #638e98;
  --sand: #e6d5b5;
  --muted: #626b60;
  --line: #d6d8c8;
  --night: #1b302c;
  --radius-card: 26px;
  --radius-control: 16px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 108px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 18px/1.75 'Space Grotesk', sans-serif; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; }
img { display: block; max-width: 100%; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { font-weight: 700; line-height: 1.15; }
em { font: inherit; font-style: normal; color: var(--clay); }
::selection { background: var(--sand); color: var(--ink); }
:focus-visible { outline: 3px solid var(--clay); outline-offset: 5px; }
[hidden] { display: none !important; }
.svg-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 22px; height: 22px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wrap { width: min(1200px, calc(100% - 96px)); margin-inline: auto; }
.section { padding-block: 100px; }
.eyebrow { display: block; font-size: 12px; line-height: 1.5; font-weight: 600; letter-spacing: 1.7px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: 58px; padding: 14px 23px; border: 1px solid var(--primary); border-radius: var(--radius-control); background: var(--primary); color: var(--white); font-size: 16px; font-weight: 600; line-height: 1.5; transition: background .25s, transform .25s, box-shadow .25s; }
.button:hover { background: var(--ink); transform: translateY(-3px); box-shadow: 0 7px 15px #27392d14; }
.button-small { min-height: 48px; font-size: 15px; padding: 10px 16px; gap: 10px; }
.round-button { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 50%; background: transparent; font-size: 27px; transition: background .25s, color .25s, transform .25s; flex-shrink: 0; }
.round-button:hover { background: var(--primary); color: var(--white); border-color: var(--primary); transform: rotate(-12deg); }
.skip-link { position: fixed; top: -100px; inset-inline-start: 20px; z-index: 100; padding: 12px 18px; border-radius: 12px; background: var(--ink); color: var(--white); }
.skip-link:focus { top: 10px; }
.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; }

/* Navigation */
.header { position: sticky; top: 0; z-index: 20; color: var(--paper); background: #27392df7; backdrop-filter: blur(15px); border-bottom: 1px solid #52604b; }
.header-inner { width: min(1280px, calc(100% - 80px)); margin: auto; min-height: 92px; display: flex; align-items: center; justify-content: space-between; gap: 26px; }
.wordmark { display: inline-flex; align-items: center; font-size: 43px; letter-spacing: -3px; font-weight: 700; line-height: 1; direction: ltr; }
.logo-star { font-size: 29px; color: #d8a17b; padding-left: 5px; align-self: flex-start; font-weight: 400; }
.logo-o { position: relative; }
.logo-o::after { content: ''; position: absolute; width: 15px; height: 2px; background: currentColor; left: 4px; top: 3px; }
.header nav { display: flex; align-items: center; gap: 26px; margin-inline-start: auto; }
.header nav a { position: relative; font-size: 15px; white-space: nowrap; font-weight: 500; }
.header nav a::after { content: ''; position: absolute; inset-inline: 0; bottom: -7px; height: 2px; background: #d8a17b; transform: scaleX(0); transition: transform .25s; }
.header nav a:hover::after { transform: scaleX(1); }
.header-actions { display: flex; align-items: center; gap: 13px; }
.language { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 7px 10px; border: 1px solid #ffffff30; border-radius: 12px; font-size: 15px; }
.language[lang='ar'] { font-family: 'Alexandria', sans-serif; }
.language[lang='en'] { font-family: 'Space Grotesk', sans-serif; }
.theme-button { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: transparent; border: 1px solid #ffffff30; border-radius: 12px; color: var(--paper); }
.theme-button[aria-pressed='true'] { background: var(--sand); color: var(--ink); }
.header .button { background: #7a8656; border-color: #7a8656; }
.header .button:hover { background: #93a16b; }
.menu-button { display: none; }
.scroll-progress { position: absolute; bottom: -1px; left: 0; width: 100%; height: 3px; background: #d8a17b; transform: scaleX(0); transform-origin: left; }

/* Intro and postcards */
.hero { display: grid; grid-template-columns: 1.04fr 1fr; align-items: center; min-height: 740px; padding-block: 55px; gap: 18px; }
.hero-copy { position: relative; z-index: 2; }
.hero-copy > .eyebrow { display: flex; align-items: center; gap: 11px; margin-bottom: 26px; font-size: 11px; letter-spacing: 1.3px; }
.tiny-sun { font-size: 25px; color: var(--clay); }
h1 { font-size: clamp(58px, 5.45vw, 77px); line-height: 1.08; letter-spacing: -3.6px; white-space: nowrap; }
h1 em { color: var(--clay); }
.hero-copy > p { max-width: 455px; margin-block: 26px 30px; color: var(--muted); font-size: 18px; line-height: 1.85; }
.hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 15px; margin-top: 32px; font-size: 12px; color: var(--muted); }
.hero-meta > span:first-child { display: flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: 1px; }
.hero-meta .icon { width: 16px; height: 16px; }
.hero-meta > span:last-child { border-inline-start: 1px solid var(--line); padding-inline-start: 15px; }
.scroll-note { display: flex; align-items: center; gap: 12px; margin-top: 43px; font-size: 10px; letter-spacing: 1.7px; color: var(--muted); }
.scroll-line { position: relative; width: 1px; height: 28px; background: var(--clay); }
.scroll-line::after { content: ''; position: absolute; width: 6px; height: 6px; left: -3px; bottom: 0; border-right: 1px solid var(--clay); border-bottom: 1px solid var(--clay); transform: rotate(45deg); }
.hero-art { position: relative; height: 570px; direction: ltr; transform: translateY(var(--scroll-drift, 0px)); }
.hero-postcard { position: absolute; padding: 11px 11px 0; background: var(--white); box-shadow: 0 17px 40px #27392d18; border-radius: 25px; }
.hero-postcard img { width: 100%; height: calc(100% - 38px); object-fit: cover; border-radius: 16px; }
.hero-postcard > span { display: block; font-size: 10px; letter-spacing: 2px; text-align: center; line-height: 38px; }
.postcard-dahab { z-index: 2; width: 246px; height: 362px; top: 126px; left: 0; transform: rotate(-12deg); }
.postcard-siwa { z-index: 1; width: 305px; height: 455px; top: 36px; right: 0; border-radius: 160px 160px 25px 25px; transform: rotate(8deg); }
.postcard-siwa img { border-radius: 150px 150px 16px 16px; }
.travel-stamp { position: absolute; top: 0; left: 2px; z-index: 3; width: 106px; height: 106px; border: 1px solid var(--primary); outline: 1px solid var(--primary); outline-offset: 5px; border-radius: 50%; transform: rotate(-17deg); background: var(--paper); color: var(--primary); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; }
.travel-stamp > span { font-size: 6px; letter-spacing: .9px; }
.travel-stamp .icon { width: 34px; height: 34px; }
.hero-caption { position: absolute; bottom: 13px; left: 65px; display: flex; align-items: center; gap: 10px; font-size: 14px; transform: rotate(-3deg); color: var(--primary); }
.hero-caption svg { width: 80px; margin-top: -15px; }
.coordinate { position: absolute; right: -18px; bottom: 130px; writing-mode: vertical-rl; font-size: 8px; letter-spacing: 1.5px; }
.orbit { position: absolute; width: 470px; max-width: 100%; height: 470px; right: 0; top: 27px; border: 1px solid #dcd5c2; border-radius: 50%; }
.orbit::after { content: '✦'; position: absolute; top: -23px; right: 75px; font-size: 37px; padding-inline: 9px; background: var(--paper); color: var(--clay); }
.destination-ribbon { border-block: 1px solid var(--line); background: #eae9de; }
.destination-ribbon .wrap { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding-block: 25px; }
.destination-ribbon span { font-size: 18px; letter-spacing: 5px; font-weight: 600; }
.destination-ribbon .icon { width: 20px; height: 20px; color: var(--clay); }
.destination-ribbon .ribbon-tag { font-size: 11px; letter-spacing: 1.5px; color: var(--muted); }

/* Shared headings and destination cards */
.section-heading { margin-bottom: 44px; }
.section-heading > .eyebrow { color: var(--primary); margin-bottom: 17px; }
h2, .section-heading h2 { font-size: 48px; letter-spacing: -1.8px; }
.section-heading p { max-width: 650px; font-size: 18px; color: var(--muted); margin-top: 21px; }
.destination-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.destination-card { overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: 0 10px 27px #27392d04; }
.destination-image { position: relative; height: 340px; overflow: hidden; border-radius: 25px; margin: 10px 10px 0; }
.destination-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease); }
.destination-card:hover .destination-image img { transform: scale(1.055); }
.postcard-label { position: absolute; top: 18px; left: 16px; border-radius: 30px; padding: 7px 12px; background: var(--paper); font-size: 10px; font-weight: 600; letter-spacing: 1px; }
.destination-number { position: absolute; right: 17px; bottom: 8px; color: var(--white); font-size: 62px; font-weight: 600; line-height: 1; opacity: .88; }
.destination-body { padding: 25px 23px; }
.destination-info { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.destination-info h3 { font-size: 31px; letter-spacing: -1px; }
.destination-info .round-button { width: 44px; height: 44px; }
.destination-tag { display: block; font-size: 13px; font-weight: 500; color: var(--clay); margin-top: 8px; }
.sea .destination-tag { color: #3a6e78; }
.olive .destination-tag { color: var(--primary); }
.destination-body > p { font-size: 15px; color: var(--muted); margin-top: 20px; }
.destination-highlights { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.destination-highlights span { display: inline-block; padding: 4px 8px; border-radius: 8px; font-size: 10px; color: var(--muted); background: #efefe4; }

/* Light moments on a dark canvas */
.experience-section { background: var(--night); color: var(--paper); position: relative; overflow: hidden; }
.experience-section .section-heading > .eyebrow { color: #c3cea6; }
.experience-section .section-heading em { color: #d5a17b; }
.experience-section .section-heading p { color: #c1cbbb; }
.experience-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.experience-item { border: 1px solid #f6f3ea25; border-radius: var(--radius-card); background: #f6f3ea08; overflow: hidden; }
.experience-sketch { height: 230px; position: relative; overflow: hidden; border-radius: 25px; margin: 10px; }
.experience-sketch > img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.experience-copy { padding: 18px 25px 28px; }
.experience-copy > .eyebrow { font-size: 11px; color: #b9c4a8; }
.experience-copy h3 { font-size: 27px; margin-block: 13px 14px; letter-spacing: -.7px; }
.experience-copy p { font-size: 16px; color: #c1cbbb; }
.sketch-badge { position: absolute; bottom: 17px; right: 17px; width: 43px; height: 43px; background: var(--paper); color: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.creative-sketch { background: #e7d6b5; direction: ltr; }
.sketch-paper { position: absolute; width: 180px; height: 174px; left: 50px; top: 25px; padding: 20px; background: var(--white); color: var(--primary); border: 1px solid #c5bd9e; border-radius: 12px; box-shadow: 7px 9px 0 #c7b997; transform: rotate(-9deg); font-size: 31px; font-weight: 700; line-height: 1.2; letter-spacing: -1px; }
.sketch-paper > svg { position: absolute; left: 14px; bottom: 8px; width: 150px; }
.drawn-star { position: absolute; right: 13px; bottom: 45px; font-size: 36px; color: var(--clay); }
.pencil { position: absolute; width: 153px; height: 11px; right: 19px; top: 126px; background: #c89249; border-right: 18px solid var(--ink); border-left: 14px solid #bd5d3f; border-radius: 4px; transform: rotate(-50deg); }
.paint-dot { position: absolute; width: 23px; height: 23px; border-radius: 50%; background: var(--clay); }
.p1 { top: 27px; right: 41px; }.p2 { bottom: 27px; left: 22px; background: var(--sea); width: 19px; height: 19px; }.p3 { top: 77px; right: 16px; background: var(--primary); width: 12px; height: 12px; }
.night-sketch > .night-landscape { width: 100%; height: 100%; object-fit: cover; }
.night-landscape { display: block; width: 100%; height: auto; }
.night-story { display: grid; grid-template-columns: .85fr 1.4fr; align-items: center; gap: 30px; margin-top: 65px; padding: 35px; border: 1px solid #ffffff20; background: #ffffff04; border-radius: 32px; }
.night-story-copy { padding: 12px 7px; }
.night-story-copy > .eyebrow { color: #c3cea6; font-size: 11px; }
.night-story h3 { font-size: 39px; line-height: 1.2; letter-spacing: -1px; margin-block: 20px; }
.night-story p { color: #c1cbbb; font-size: 16px; }
.text-link { display: inline-flex; align-items: center; gap: 16px; font-size: 16px; color: #e1be8b; margin-top: 24px; border-bottom: 1px solid #e1be8b66; padding-bottom: 5px; }
.night-story-art { overflow: hidden; border-radius: 25px; background: #213c34; }
.night-story-art .night-landscape { min-height: 340px; }

/* Route map and itinerary */
.journey-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 42px; }
.journey-heading .section-heading { margin-bottom: 0; }
.destination-switch { display: flex; gap: 4px; padding: 5px; border: 1px solid var(--line); border-radius: 18px; background: #ececde; flex-shrink: 0; }
.switch-button { border: 0; border-radius: 13px; background: transparent; padding: 11px 17px; font-size: 15px; font-weight: 500; }
.switch-button[aria-pressed='true'] { background: var(--primary); color: var(--white); box-shadow: 0 3px 9px #27392d14; }
.journey-layout { display: grid; grid-template-columns: .85fr 1.3fr; gap: 32px; align-items: start; }
.journey-map-card { position: sticky; top: 120px; border-radius: 30px; border: 1px solid var(--line); padding: 22px 18px 16px; background: #f0e6cf; overflow: hidden; }
.map-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 9px 18px; }
.map-heading .eyebrow { font-size: 11px; letter-spacing: 1.3px; }
.route-graphic { direction: ltr; }
.route-map { width: 100%; height: auto; display: block; border-radius: 25px; overflow: hidden; }
.map-north { font-size: 12px; fill: #746f52; font-weight: 700; }
.map-stop-label { font-size: 14px; fill: var(--ink); font-weight: 500; paint-order: stroke; stroke: #e9dabc; stroke-width: 5px; stroke-linejoin: round; }
.map-stop-number { font-size: 11px; fill: var(--primary); font-weight: 600; }
.map-stop.is-current > circle { fill: var(--clay); stroke: var(--clay); }
.map-stop.is-current > .map-stop-number { fill: var(--white); }
.map-stop.is-current > .map-stop-label { fill: var(--clay); font-weight: 700; }
.map-stop.is-visited > circle { fill: #596742; }
.map-stop.is-visited > .map-stop-number { fill: var(--white); }
.route-progress { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1s var(--ease); }
.route-marker { transform: translate(var(--pin-x), var(--pin-y)); transition: transform 1s var(--ease); }
.map-caption { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 10px 8px; }
.map-caption span { font-size: 12px; color: var(--muted); }
.map-caption h3 { font-size: 27px; margin-top: 7px; letter-spacing: -.6px; }
.map-caption .map-compass { font-size: 50px; color: var(--clay); line-height: 1; }
.map-note { margin-top: 9px; padding-inline: 10px; font-size: 11px; color: var(--muted); }
.day-tabs { display: flex; gap: 9px; margin-bottom: 20px; }
.day-tabs button { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 8px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); font-size: 24px; font-weight: 600; transition: background .25s, color .25s, transform .25s; }
.day-tabs button > span { font-size: 12px; font-weight: 500; }
.day-tabs button[aria-selected='true'] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.day-tabs button:hover { transform: translateY(-2px); }
.day-scene { position: relative; height: 235px; border-radius: 24px; overflow: hidden; background: var(--sand); }
.day-scene > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; opacity: 0; transform: scale(1.04); transition: opacity .7s var(--ease), transform 1.2s var(--ease); }
.day-scene > img.is-active { opacity: 1; transform: scale(1); }
.day-scene > img[data-scene='salt'], .day-scene > img[data-scene='night'] { object-position: center; }
.day-scene-label { position: absolute; bottom: 18px; left: 20px; border-radius: 12px; padding: 5px 14px; background: var(--paper); font-size: 13px; font-weight: 600; }
.scene-doodle { position: absolute; right: 18px; top: 18px; color: var(--paper); }
.scene-doodle .icon { width: 42px; height: 42px; }
.day-panel { padding: 27px 5px 0; }
.day-heading > .eyebrow { color: var(--clay); font-size: 12px; }
.day-heading h3 { font-size: 34px; letter-spacing: -1px; margin-block: 14px; }
.day-heading > p { font-size: 17px; color: var(--muted); }
.day-schedule { margin-top: 20px; }
.schedule-item { position: relative; display: flex; gap: 18px; padding-block: 15px; }
.schedule-icon { z-index: 1; flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); color: var(--primary); background: var(--paper); }
.schedule-icon .icon { width: 20px; height: 20px; }
.schedule-item:not(:last-child)::after { content: ''; position: absolute; width: 1px; background: var(--line); inset-inline-start: 20px; top: 55px; bottom: -15px; }
.schedule-item h4 { font-size: 17px; margin-top: 8px; }
.schedule-item p { color: var(--muted); font-size: 16px; line-height: 1.8; margin-top: 9px; }
.itinerary-note { margin-top: 23px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
html:not(.js) .day-panel[hidden] { display: block !important; border-top: 1px solid var(--line); margin-top: 28px; }

/* Stay and keepsakes */
.details-section { background: #eae4d2; padding-block: 70px; }
.details-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; }
.stay-block, .gift-block { background: #fffdf64d; border: 1px solid #d1c9b5; border-radius: 30px; padding: 35px; min-width: 0; }
.stay-block > .eyebrow, .gift-block > .eyebrow { color: var(--primary); margin-bottom: 20px; font-size: 11px; }
.stay-block h2 { font-size: 41px; letter-spacing: -1.6px; }
.stay-block > p, .gift-block > p { color: var(--muted); font-size: 16px; line-height: 1.85; margin-block: 23px; }
.stay-block ul { list-style: none; margin: 28px 0 20px; padding: 0; }
.stay-block li { display: flex; align-items: center; gap: 12px; font-size: 16px; margin-top: 14px; }
.stay-block li .icon { color: var(--primary); width: 20px; height: 20px; }
.stay-block small, .gift-block small { color: var(--muted); font-size: 12px; }
.stay-postcards { margin-top: 26px; height: 128px; position: relative; overflow: hidden; border-radius: 18px; }
.stay-postcards img { width: 100%; height: 100%; object-fit: cover; object-position: center 56%; }
.stay-postcards > span { position: absolute; bottom: 12px; left: 14px; padding: 5px 10px; background: var(--paper); border-radius: 8px; font-size: 10px; font-weight: 600; }
.gift-block h3 { font-size: 29px; letter-spacing: -.7px; }
.gift-art { position: relative; direction: ltr; width: 100%; max-width: 425px; height: 300px; margin: 0 auto 25px; }
.gift-orbit { position: absolute; width: 94%; height: 250px; left: 3%; top: 0; background: #f9f4e6; border-radius: 50%; transform: rotate(-9deg); }
.gift-notebook { position: absolute; top: 40px; left: 36px; width: 130px; height: 180px; padding: 22px 24px; border-radius: 12px; background: var(--primary); color: var(--paper); transform: rotate(-14deg); font-size: 18px; letter-spacing: 2px; line-height: 1.25; box-shadow: 5px 6px 0 #d9d2bc; }
.gift-notebook::before { content: ''; position: absolute; left: 12px; top: 0; height: 100%; width: 1px; background: #9da287; }
.gift-notebook span { display: block; font-size: 15px; letter-spacing: -1px; margin-top: 25px; }
.gift-tote { position: absolute; top: 78px; left: 172px; width: 163px; height: 177px; background: #cabb97; border: 1px solid #b5a984; border-radius: 12px 12px 24px 24px; transform: rotate(8deg); box-shadow: 10px 12px 20px #27392d18; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 17px; }
.tote-handle { position: absolute; width: 83px; height: 70px; border: 8px solid #cabb97; border-bottom: 0; border-radius: 40px 40px 0 0; top: -68px; }
.tote-logo { font-size: 34px; font-weight: 700; color: var(--primary); letter-spacing: -3px; }
.tote-line { text-align: center; font-size: 7px; letter-spacing: 1px; color: var(--primary); line-height: 1.8; }
.gift-keyring { position: absolute; bottom: 30px; right: 5px; width: 48px; height: 48px; border-radius: 50%; border: 3px solid #cba06d; background: var(--clay); color: var(--paper); text-align: center; line-height: 42px; font-size: 25px; transform: rotate(18deg); }
.gift-keyring::before { content: ''; position: absolute; top: -22px; left: 10px; width: 23px; height: 23px; border: 2px solid #b39660; border-radius: 50%; }
.gift-pencil { position: absolute; bottom: 15px; left: 48px; width: 170px; height: 10px; border-radius: 4px; background: #bda057; border-right: 17px solid var(--ink); border-left: 14px solid var(--clay); transform: rotate(9deg); }
.gift-spark { position: absolute; top: 0; right: 0; color: var(--clay); font-size: 40px; }

/* Tickets: native radio controls, perforation and original stamp art */
.booking-grid { display: grid; grid-template-columns: 1.75fr 1fr; gap: 28px; align-items: start; }
.plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding: 0; margin: 0; border: 0; min-width: 0; }
.ticket-card { position: relative; min-width: 0; border: 1px solid #a3ad96; border-radius: 23px; background: var(--white); box-shadow: 0 5px 18px #27392d05; transition: border-color .25s, box-shadow .25s, background .25s; }
.ticket-card.is-selected { border-color: var(--primary); background: #f1f4e7; box-shadow: 0 0 0 2px var(--primary), 0 9px 25px #27392d09; }
.ticket-card:hover:not(.unavailable) { box-shadow: 0 9px 30px #27392d12; }
.ticket-choice { position: relative; display: block; padding: 24px 24px 23px; cursor: pointer; overflow: hidden; border-radius: 23px 23px 0 0; min-height: 230px; }
.plan-top { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.plan-name { font-size: 18px; font-weight: 600; line-height: 1.45; }
.ticket-choice input { position: absolute; right: 25px; top: 25px; width: 24px; height: 24px; opacity: 0; margin: 0; }
.radio-dot { display: inline-block; width: 26px; height: 26px; border: 2px solid #91a089; border-radius: 50%; flex-shrink: 0; }
.ticket-choice input:checked + .radio-dot { border: 7px solid var(--primary); background: var(--paper); }
.ticket-choice input:focus-visible + .radio-dot { outline: 3px solid var(--clay); outline-offset: 4px; }
.ticket-number { display: block; margin-top: 11px; font-size: 10px; letter-spacing: 1.7px; color: var(--muted); }
.plan-price { display: block; font-size: 44px; line-height: 1.2; font-weight: 700; letter-spacing: -1.8px; margin-top: 20px; }
.plan-price small { display: inline-block; font-size: 11px; font-weight: 500; letter-spacing: 0; margin-inline-start: 8px; color: var(--muted); }
.plan-price-note { display: block; font-size: 12px; margin-top: 10px; color: var(--muted); line-height: 1.7; }
.ticket-art { position: absolute; bottom: 52px; right: 16px; transform: rotate(-16deg); width: 64px; height: 64px; border: 1px solid #a6ae9540; border-radius: 50%; color: var(--primary); opacity: .24; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.ticket-art .icon { width: 41px; height: 41px; }
.ticket-seam { position: relative; margin: 0; border-top: 1px dashed #a6af99; }
.ticket-seam::before, .ticket-seam::after { content: ''; position: absolute; top: -11px; width: 20px; height: 20px; border: 1px solid #a3ad96; border-radius: 50%; background: var(--paper); }
.ticket-seam::before { left: -11px; clip-path: inset(0 0 0 50%); }
.ticket-seam::after { right: -11px; clip-path: inset(0 50% 0 0); }
.ticket-bottom { padding: 21px 20px 20px; }
.plan-inclusion { display: flex; align-items: start; gap: 9px; margin-bottom: 13px; font-size: 14px; line-height: 1.7; }
.plan-inclusion > .icon { width: 17px; height: 17px; margin-top: 4px; color: var(--primary); }
.plan-inclusion > .inclusion-badge { margin-inline-start: auto; font-size: 9px; padding: 3px 7px; background: #e6d5b5; color: var(--ink); border-radius: 6px; white-space: nowrap; margin-top: 1px; }
.ticket-cta { width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 54px; padding: 12px 11px; border: 1px solid #dce0cd; border-radius: 14px; background: #e9ecdf; color: var(--primary); font-size: 13px; font-weight: 600; line-height: 1.5; transition: background .25s; margin-top: 20px; }
.ticket-cta > .icon { width: 18px; height: 18px; }
.ticket-cta > .icon:last-child { margin-inline-start: auto; }
.ticket-card.is-selected .ticket-cta { background: var(--primary); border-color: var(--primary); color: var(--white); }
.ticket-cta:hover:not(:disabled) { background: #d6dec4; color: var(--ink); }
.selected-text { display: none; }
.is-selected .selected-text { display: inline; }
.is-selected .unselected-text { display: none; }
.unavailable { background: #f0eee4; border-style: dashed; color: #707a6b; }
.unavailable .ticket-choice { cursor: not-allowed; }
.unavailable .plan-price { color: #77806d; }
.unavailable .radio-dot { border-style: dashed; }
.unavailable .ticket-art { opacity: .12; }
.unavailable .ticket-cta { color: #7d8377; border-style: dashed; background: transparent; }
.sold-badge { display: inline-block; font-size: 11px; line-height: 1.5; color: var(--clay); padding: 4px 10px; border: 1px solid var(--clay); border-radius: 8px; margin-top: 11px; }
.sample-note { font-size: 12px; color: var(--muted); line-height: 1.8; margin-top: 22px; }
.booking-summary { position: sticky; top: 120px; padding: 28px; border-radius: 28px; background: #e9dbbb; border: 1px solid #d5c5a4; overflow: hidden; }
.summary-heading { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 27px; }
.summary-heading .eyebrow { font-size: 10px; color: #6e684f; letter-spacing: 1px; }
.summary-heading h3 { font-size: 27px; letter-spacing: -.8px; margin-top: 10px; }
.summary-stamp { display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; border: 1px solid #8d936b; outline: 1px solid #8d936b; outline-offset: 4px; border-radius: 50%; color: var(--primary); transform: rotate(15deg); flex-shrink: 0; }
.summary-stamp .icon { width: 28px; height: 28px; }
.booking-summary > label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 9px; }
select { width: 100%; background: var(--white); color: var(--ink); border: 1px solid #b6b497; padding: 12px 15px; border-radius: 13px; font-size: 16px; }
.summary-row { display: grid; gap: 8px; border-bottom: 1px dashed #ada98c; padding-block: 24px; font-size: 14px; }
.summary-row > span { color: var(--muted); }
.summary-row strong { font-size: 18px; font-weight: 600; }
.summary-travelers { padding-block: 24px; border-bottom: 1px dashed #ada98c; }
.summary-travelers label { display: block; font-size: 17px; font-weight: 600; margin-bottom: 15px; }
.stepper { display: inline-flex; align-items: center; border: 1px solid #a9ad8c; border-radius: 15px; overflow: hidden; height: 50px; background: var(--white); }
.stepper button { width: 46px; height: 100%; border: 0; background: transparent; color: var(--primary); font-size: 24px; }
.stepper button:hover:not(:disabled) { background: #e9ecdf; }
.stepper button:disabled { color: #b7baa7; }
.stepper input { width: 56px; height: 100%; background: transparent; border: 0; border-inline: 1px solid #d4d6c4; text-align: center; padding: 0; font-weight: 600; font-size: 18px; appearance: textfield; -moz-appearance: textfield; }
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.total { padding-block: 25px; }
.total > span { display: block; font-size: 14px; color: var(--muted); }
.total > strong { display: block; font-size: 36px; letter-spacing: -1px; font-weight: 700; line-height: 1.3; margin-top: 7px; }
.total > small { display: block; font-size: 12px; color: var(--muted); margin-top: 10px; line-height: 1.75; }
.request-button { width: 100%; font-size: 14px; gap: 10px; padding-inline: 13px; }
.request-button > .icon { width: 20px; height: 20px; }
.summary-note { font-size: 12px; color: var(--muted); line-height: 1.8; margin-top: 17px; }
.summary-landscape { margin: 20px -28px -29px; height: 95px; }
.summary-landscape svg { width: 100%; height: 100%; display: block; }
.booking-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 35px; margin-top: 62px; padding-top: 35px; border-top: 1px solid var(--line); }
.booking-steps > div { display: flex; gap: 18px; align-items: start; }
.step-number { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; flex-shrink: 0; border-radius: 14px; border: 1px solid #d9cdb4; background: #e9dfcb; color: var(--clay); font-size: 19px; line-height: 1; }
.booking-steps h4 { font-size: 18px; margin-top: 3px; }
.booking-steps p { font-size: 14px; color: var(--muted); margin-top: 10px; }

/* Questions, closing and modal */
.faq-section { display: grid; grid-template-columns: .85fr 1.25fr; gap: 70px; padding-top: 20px; }
.faq-section .section-heading h2 { font-size: 42px; }
.faq-intro { min-width: 0; }
.faq-intro .section-heading { margin-bottom: 30px; }
.faq-escape { margin: 0; padding: 12px; border: 1px solid #d4cbb6; border-radius: 28px; background: #ebe2cf; box-shadow: 0 12px 28px #27392d06; }
.escape-canvas { position: relative; overflow: hidden; border-radius: 20px; aspect-ratio: 24 / 17; background: #c4d7d7; }
.escape-art { display: block; width: 100%; height: 100%; }
.faq-escape .escape-scene { opacity: 0; transition: opacity 1.1s var(--ease); }
.faq-escape .escape-scene.is-active { opacity: 1; }
.escape-corner-stamp { position: absolute; inset-inline-end: 15px; bottom: 14px; padding: 2px 8px; border: 1px solid #f6f3ea99; border-radius: 8px; color: var(--white); font-size: 15px; font-weight: 600; letter-spacing: -1px; transform: rotate(-7deg); }
.faq-escape figcaption { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 12px 17px; }
.escape-caption > .eyebrow { font-size: 9px; letter-spacing: 1.1px; color: var(--primary); }
.escape-caption > strong { display: block; margin-top: 6px; font-size: 27px; line-height: 1.2; font-weight: 700; letter-spacing: -.8px; }
.escape-caption > p { margin-top: 7px; font-size: 13px; line-height: 1.7; color: var(--muted); }
.escape-compass { flex-shrink: 0; color: var(--clay); font-size: 49px; font-weight: 400; line-height: 1; }
.escape-controls { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-top: 1px solid #d5ccb7; padding: 13px 4px 2px; }
.escape-choices { display: flex; gap: 4px; min-width: 0; }
.escape-choice { padding: 8px 12px; border: 1px solid transparent; border-radius: 11px; background: transparent; font-size: 12px; font-weight: 500; line-height: 1.5; transition: background .25s, color .25s; }
.escape-choice[aria-pressed='true'] { color: var(--white); background: var(--primary); border-color: var(--primary); }
.escape-choice:hover:not(:disabled) { background: #d9dcca; color: var(--ink); }
.escape-play { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 38px; height: 38px; padding: 0; border: 1px solid #b9b99c; border-radius: 50%; background: var(--paper); color: var(--primary); }
.escape-play .icon { width: 17px; height: 17px; }
.escape-play .escape-play-icon { display: none; }
.escape-play[aria-pressed='true'] .escape-pause-icon { display: none; }
.escape-play[aria-pressed='true'] .escape-play-icon { display: block; }
.escape-play:disabled { opacity: .5; }
html[data-motion='full'] .escape-water { animation: escape-water-drift 7s ease-in-out infinite alternate; animation-play-state: paused; }
html[data-motion='full'] .escape-boat { animation: escape-boat-bob 5s ease-in-out infinite; animation-play-state: paused; transform-origin: 286px 253px; }
html[data-motion='full'] .escape-birds { animation: escape-birds-drift 10s ease-in-out infinite alternate; animation-play-state: paused; }
html[data-motion='full'] .escape-palm { animation: escape-palm-sway 9s ease-in-out infinite alternate; animation-play-state: paused; transform-origin: bottom center; }
.faq-escape[data-playing='true'] .escape-scene.is-active .escape-water,
.faq-escape[data-playing='true'] .escape-scene.is-active .escape-boat,
.faq-escape[data-playing='true'] .escape-scene.is-active .escape-birds,
.faq-escape[data-playing='true'] .escape-scene.is-active .escape-palm { animation-play-state: running; }
@keyframes escape-water-drift { to { transform: translateX(9px); } }
@keyframes escape-boat-bob { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-4px) rotate(1deg); } }
@keyframes escape-birds-drift { to { transform: translateX(10px) translateY(-3px); } }
@keyframes escape-palm-sway { to { transform: rotate(.8deg); } }
.faq-list details { border: 1px solid var(--line); border-radius: 18px; margin-bottom: 12px; background: var(--white); }
.faq-list summary { display: flex; align-items: center; gap: 16px; padding: 21px; list-style: none; font-size: 17px; font-weight: 500; cursor: pointer; line-height: 1.65; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-number { color: var(--clay); font-size: 12px; flex-shrink: 0; }
.faq-plus { font-size: 26px; font-weight: 400; margin-inline-start: auto; flex-shrink: 0; transition: transform .3s; }
.faq-list details[open] .faq-plus { transform: rotate(45deg); }
.faq-list details > p { padding: 0 22px 23px 54px; font-size: 16px; color: var(--muted); line-height: 1.85; }
.closing { position: relative; overflow: hidden; background: var(--night); color: var(--paper); padding-block: 92px; }
.closing .wrap { position: relative; z-index: 2; }
.closing .eyebrow { color: #c3cea6; font-size: 12px; }
.closing h2 { font-size: 62px; letter-spacing: -2px; margin-block: 25px; }
.closing h2 em { color: #d7ad7e; }
.closing p { font-size: 18px; color: #c1cbbb; margin-bottom: 28px; }
.button-cream { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.button-cream:hover { background: var(--sand); color: var(--ink); }
.closing-art { position: absolute; width: 460px; height: 490px; right: -10px; bottom: -45px; border-radius: 260px 260px 25px 25px; overflow: hidden; opacity: .25; transform: rotate(-8deg); }
.closing-art img { width: 100%; height: 100%; object-fit: cover; }
.closing-star { position: absolute; right: 135px; top: 65px; color: #d1af7f; font-size: 90px; font-weight: 400; }
.footer { display: flex; align-items: center; justify-content: space-between; gap: 35px; padding-block: 43px; }
.footer .wordmark { font-size: 34px; }
.footer .logo-star { font-size: 26px; color: var(--clay); }
.footer p { font-size: 12px; color: var(--muted); margin-top: 11px; }
.footer small { font-size: 11px; color: var(--muted); }
.footer-meta { margin-inline-start: auto; text-align: end; }
dialog { width: min(650px, calc(100% - 32px)); max-height: calc(100dvh - 40px); padding: 30px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 25px; }
dialog::backdrop { background: #1b302caa; backdrop-filter: blur(7px); }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.dialog-head .eyebrow { font-size: 11px; }
dialog h2 { font-size: 34px; margin-top: 22px; letter-spacing: -1px; }
dialog p { font-size: 15px; color: var(--muted); margin-top: 16px; }
dialog textarea { display: block; width: 100%; min-height: 250px; resize: vertical; padding: 17px; margin-top: 23px; background: var(--white); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; font-size: 14px; line-height: 1.8; }
.dialog-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 23px; }
.preview-note { font-size: 13px; }

/* Motion is progressive: the static document remains visible without JS. */
html.js[data-motion='full'] .reveal-ready { opacity: 0; transform: translateY(34px); transition: opacity .8s var(--ease) var(--delay, 0ms), transform .8s var(--ease) var(--delay, 0ms); }
html.js[data-motion='full'] .reveal-ready.is-visible { opacity: 1; transform: translateY(0); }
html[data-motion='full'] .postcard-dahab { animation: postcard-breathe 8s ease-in-out infinite; }
html[data-motion='full'] .postcard-siwa { animation: postcard-breathe 10s ease-in-out 1s infinite reverse; }
html[data-motion='full'] .closing-star { animation: slow-rotate 50s linear infinite; }
html[data-motion='full'] .scene-stars { animation: stars-twinkle 4s ease-in-out infinite alternate; }
html[data-motion='full'] .scene-fire { transform-origin: 516px 433px; animation: fire-flicker 2s ease-in-out infinite alternate; }
html[data-motion='full'] .marker-halo { animation: marker-pulse 2s ease-out infinite; }
.hero-art:not(.motion-in-view) .hero-postcard, .night-story-art:not(.motion-in-view) .scene-fire, .night-story-art:not(.motion-in-view) .scene-stars, .night-sketch:not(.motion-in-view) .scene-stars, .night-sketch:not(.motion-in-view) .scene-fire, .route-graphic:not(.motion-in-view) .marker-halo { animation-play-state: paused; }
@keyframes postcard-breathe { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes slow-rotate { to { transform: rotate(360deg); } }
@keyframes stars-twinkle { to { opacity: .35; } }
@keyframes fire-flicker { to { transform: scale(.95, 1.1) rotate(3deg); } }
@keyframes marker-pulse { 0% { opacity: .8; scale: .75; } 100% { opacity: 0; scale: 1.25; } }
html[data-motion='reduced'] { scroll-behavior: auto; }
html[data-motion='reduced'] *, html[data-motion='reduced'] *::before, html[data-motion='reduced'] *::after { animation: none !important; transition: none !important; }
html[data-motion='reduced'] .hero-art { transform: none; }

/* Arabic shares the same components and uses Alexandria throughout. */
html[dir='rtl'] body { font-family: 'Alexandria', sans-serif; }
html[dir='rtl'] .eyebrow { letter-spacing: 0; }
html[dir='rtl'] h1 { line-height: 1.4; letter-spacing: -2px; font-size: clamp(53px, 4.8vw, 68px); }
html[dir='rtl'] h2 { line-height: 1.5; letter-spacing: -1px; }
html[dir='rtl'] h3, html[dir='rtl'] h4 { line-height: 1.5; }
html[dir='rtl'] .header nav a { font-size: 14px; }
html[dir='rtl'] .hero-copy > p { line-height: 2; }
html[dir='rtl'] .button .icon:last-child, html[dir='rtl'] .round-button > .icon, html[dir='rtl'] .text-link > .icon { transform: scaleX(-1); }
html[dir='rtl'] .map-stop-label { font-size: 12px; }
html[dir='rtl'] .ticket-choice input { right: auto; left: 25px; }
html[dir='rtl'] .ticket-art { right: auto; left: 16px; }
html[dir='rtl'] .plan-price { letter-spacing: -1px; }
html[dir='rtl'] .closing-art { right: auto; left: -10px; }
html[dir='rtl'] .closing-star { right: auto; left: 135px; }
html[dir='rtl'] .faq-list details > p { padding-inline: 54px 22px; }
html[dir='rtl'] .escape-choice { font-size: 11px; }
html[dir='rtl'] .escape-caption > strong { line-height: 1.5; }

/* Responsive layout */
@media (max-width: 1150px) {
  .wrap { width: calc(100% - 64px); }
  .header-inner { width: calc(100% - 48px); gap: 20px; }
  .header nav { gap: 20px; }
  .header nav a { font-size: 14px; }
  .header-actions { gap: 9px; }
  .header .button-small { font-size: 13px; padding-inline: 12px; }
  .hero { min-height: 690px; }
  h1 { font-size: 59px; letter-spacing: -3px; }
  .hero-art { height: 520px; }
  .postcard-siwa { width: 270px; height: 405px; top: 37px; }
  .postcard-dahab { width: 211px; height: 319px; top: 128px; left: 0; }
  .orbit { width: 410px; height: 410px; }
  .hero-caption { bottom: 0; left: 40px; font-size: 12px; }
  .hero-caption svg { width: 60px; }
  .coordinate { right: -14px; bottom: 102px; }
  .destination-image { height: 290px; }
  .destination-body { padding: 23px 19px; }
  .destination-info h3 { font-size: 28px; }
  .destination-tag { font-size: 12px; }
  .destination-body > p { font-size: 14px; }
  .experience-copy { padding-inline: 20px; }
  .experience-copy h3 { font-size: 24px; }
  .experience-copy p { font-size: 15px; }
  .experience-sketch { height: 210px; }
  .sketch-paper { left: 33px; width: 155px; height: 160px; font-size: 27px; }
  .pencil { right: 7px; }
  .night-story { grid-template-columns: 1fr 1.3fr; padding: 27px; }
  .night-story h3 { font-size: 34px; }
  .night-story-art .night-landscape { min-height: 320px; }
  .journey-layout { gap: 25px; }
  .day-heading h3 { font-size: 30px; }
  .map-caption h3 { font-size: 24px; }
  .stay-block, .gift-block { padding: 28px; }
  .stay-block h2 { font-size: 37px; }
  .gift-art { height: 285px; }
  .gift-notebook { left: 15px; }
  .gift-tote { left: 136px; }
  .booking-grid { grid-template-columns: 1.65fr 1fr; gap: 24px; }
  .plan-grid { gap: 17px; }
  .ticket-choice { padding-inline: 20px; }
  .plan-name { font-size: 16px; }
  .plan-price { font-size: 39px; }
  .plan-price small { display: block; margin: 6px 0 0; }
  .ticket-bottom { padding-inline: 17px; }
  .plan-inclusion { font-size: 13px; }
  .inclusion-badge { display: none !important; }
  .booking-summary { padding: 24px; }
  .summary-heading h3 { font-size: 24px; }
  .summary-stamp { width: 47px; height: 47px; }
  .request-button { font-size: 13px; }
  .summary-landscape { margin-inline: -24px; }
  .faq-section { gap: 40px; }
  html[dir='rtl'] .header nav a { font-size: 13px; }
  html[dir='rtl'] .header .button-small { font-size: 12px; }
}

@media (max-width: 980px) {
  .header-actions > .button { display: none; }
  .header nav a { font-size: 15px; }
  .header nav { gap: 25px; }
  .hero { min-height: 650px; gap: 10px; }
  h1 { font-size: 49px; letter-spacing: -2.5px; }
  .hero-copy > .eyebrow { font-size: 9px; letter-spacing: 1px; }
  .hero-copy > p { font-size: 16px; }
  .hero .button { font-size: 14px; padding-inline: 16px; }
  .hero-meta { gap: 10px; }
  .hero-meta > span:first-child { font-size: 9px; }
  .hero-meta > span:last-child { padding-inline-start: 10px; font-size: 11px; }
  .hero-art { height: 470px; }
  .postcard-siwa { width: 230px; height: 358px; right: 0; top: 35px; }
  .postcard-dahab { width: 179px; height: 274px; left: -4px; top: 113px; }
  .travel-stamp { width: 84px; height: 84px; }
  .travel-stamp > span { font-size: 5px; }
  .travel-stamp .icon { width: 27px; height: 27px; }
  .orbit { width: 325px; height: 360px; }
  .hero-caption { bottom: 12px; left: 12px; font-size: 11px; }
  .coordinate { bottom: 96px; right: -9px; }
  .section { padding-block: 78px; }
  h2, .section-heading h2 { font-size: 41px; }
  .section-heading p { font-size: 17px; }
  .destination-grid { gap: 19px; }
  .destination-image { height: 240px; margin: 8px 8px 0; }
  .destination-body { padding: 21px 17px; }
  .destination-info .round-button { width: 35px; height: 35px; }
  .destination-info h3 { font-size: 25px; }
  .destination-tag { font-size: 11px; }
  .postcard-label { font-size: 8px; padding: 5px 9px; left: 10px; }
  .destination-highlights span { font-size: 9px; }
  .experience-grid { gap: 18px; }
  .experience-sketch { height: 190px; }
  .experience-copy { padding-inline: 17px; }
  .experience-copy h3 { font-size: 22px; }
  .experience-copy p { font-size: 14px; }
  .sketch-paper { width: 130px; height: 145px; font-size: 23px; left: 18px; }
  .sketch-paper > svg { width: 108px; }
  .pencil { width: 120px; top: 125px; }
  .night-story { gap: 20px; padding: 25px; }
  .night-story h3 { font-size: 30px; }
  .night-story p { font-size: 15px; }
  .night-story-art .night-landscape { min-height: 300px; }
  .journey-heading { align-items: start; }
  .destination-switch { margin-top: 25px; }
  .switch-button { padding: 10px 13px; font-size: 13px; }
  .journey-layout { grid-template-columns: .85fr 1.15fr; gap: 21px; }
  .journey-map-card { padding: 17px 13px; }
  .map-heading .eyebrow { font-size: 9px; }
  .map-caption { gap: 10px; }
  .map-caption h3 { font-size: 22px; }
  .map-caption span { font-size: 11px; }
  .day-tabs { gap: 6px; }
  .day-tabs button { font-size: 19px; gap: 5px; }
  .day-tabs button > span { font-size: 10px; }
  .day-scene { height: 180px; }
  .day-heading h3 { font-size: 28px; }
  .schedule-item p { font-size: 15px; }
  .details-grid { gap: 22px; }
  .stay-block, .gift-block { padding: 25px; }
  .stay-block h2 { font-size: 31px; }
  .gift-tote { left: 110px; width: 139px; height: 160px; }
  .gift-notebook { left: 3px; width: 113px; height: 164px; font-size: 16px; }
  .gift-keyring { width: 41px; height: 41px; right: 0; bottom: 17px; font-size: 22px; line-height: 35px; }
  .gift-pencil { width: 150px; left: 12px; }
  .gift-block h3 { font-size: 25px; }
  .booking-grid { grid-template-columns: 1fr; }
  .plan-name { font-size: 20px; }
  .plan-price { font-size: 46px; }
  .plan-price small { display: inline; font-size: 13px; margin-inline-start: 10px; }
  .plan-price-note { font-size: 14px; }
  .plan-inclusion { font-size: 16px; }
  .inclusion-badge { display: inline-block !important; }
  .ticket-cta { font-size: 16px; }
  .booking-summary { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 0 35px; }
  .summary-heading { grid-column: 1/-1; }
  .booking-summary > label { grid-column: 1; }
  .booking-summary > select { grid-column: 1; }
  .summary-row { grid-column: 1; }
  .summary-travelers { grid-column: 1; }
  .total { grid-column: 2; grid-row: 2/5; padding-top: 0; }
  .request-button { grid-column: 2; grid-row: 5; font-size: 16px; }
  .summary-note { grid-column: 2; grid-row: 6; }
  .summary-landscape { grid-column: 1/-1; margin-bottom: -25px; }
  .booking-steps { gap: 20px; }
  .booking-steps > div { gap: 12px; }
  .booking-steps h4 { font-size: 16px; }
  .booking-steps p { font-size: 13px; }
  .faq-section { grid-template-columns: .8fr 1.2fr; gap: 30px; }
  .faq-section .section-heading h2 { font-size: 35px; }
  .faq-list summary { font-size: 15px; padding: 18px; gap: 10px; }
  .closing h2 { font-size: 53px; }
  html[dir='rtl'] h1 { font-size: 46px; }
  html[dir='rtl'] .header nav a { font-size: 13px; }
  html[dir='rtl'] .plan-name { font-size: 18px; }
}

@media (max-width: 720px) {
  html { scroll-padding-top: 98px; }
  .wrap { width: calc(100% - 40px); }
  .header-inner { min-height: 82px; width: calc(100% - 32px); gap: 15px; }
  .wordmark { font-size: 37px; }
  .logo-star { font-size: 26px; }
  .header-actions { gap: 10px; margin-inline-start: auto; }
  .language { min-height: 40px; padding: 5px 8px; font-size: 14px; }
  .theme-button { width: 40px; height: 40px; }
  .header nav { display: none; position: absolute; top: 82px; left: 12px; right: 12px; flex-direction: column; align-items: stretch; gap: 0; padding: 14px; border: 1px solid #ffffff30; border-radius: 0 0 20px 20px; background: var(--ink); box-shadow: 0 14px 25px #27392d35; }
  .header nav.open { display: flex; }
  .header nav a { padding: 13px; font-size: 17px; }
  .header nav a::after { display: none; }
  .menu-button { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 36px; height: 40px; gap: 6px; padding: 0; border: 0; background: transparent; color: var(--paper); }
  .menu-button span { width: 24px; height: 2px; background: currentColor; transition: transform .25s; }
  .menu-button[aria-expanded='true'] span:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-button[aria-expanded='true'] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  html:not(.js) .header nav { display: flex; position: static; flex-direction: row; flex-wrap: wrap; border: 0; padding: 0; width: 100%; }
  html:not(.js) .header-inner { flex-wrap: wrap; padding-block: 18px; }
  html:not(.js) .menu-button { display: none; }
  .hero { display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding-block: 47px 32px; gap: 20px; }
  .hero-copy > .eyebrow { font-size: 9px; letter-spacing: .75px; gap: 8px; margin-bottom: 22px; }
  .tiny-sun { font-size: 22px; }
  h1 { font-size: clamp(37px, 10.4vw, 65px); line-height: 1.1; letter-spacing: -2px; }
  .hero-copy > p { font-size: 17px; line-height: 1.8; margin-block: 23px 27px; max-width: 480px; }
  .hero .button { font-size: 15px; min-height: 56px; }
  .hero-meta { font-size: 11px; gap: 10px; margin-top: 25px; }
  .hero-meta > span:first-child { font-size: 10px; letter-spacing: .5px; }
  .hero-meta > span:last-child { font-size: 11px; }
  .scroll-note { display: none; }
  .hero-art { height: 450px; width: 100%; max-width: 445px; margin-inline: auto; margin-top: 10px; }
  .postcard-siwa { width: 248px; height: 371px; right: 18px; top: 26px; }
  .postcard-dahab { width: 188px; height: 279px; left: 9px; top: 113px; }
  .orbit { width: calc(100% - 30px); height: 370px; right: 15px; top: 27px; }
  .travel-stamp { left: 10px; top: 0; width: 85px; height: 85px; }
  .hero-caption { left: 50px; bottom: 0; font-size: 12px; }
  .coordinate { right: 0; bottom: 102px; }
  .hero-postcard > span { font-size: 9px; }
  .destination-ribbon .wrap { padding-block: 22px; gap: 15px; }
  .destination-ribbon span { font-size: 13px; letter-spacing: 2px; }
  .destination-ribbon .ribbon-tag, .destination-ribbon .icon:last-of-type { display: none; }
  .destination-ribbon .icon { width: 16px; height: 16px; }
  .section { padding-block: 64px; }
  .section-heading { margin-bottom: 31px; }
  h2, .section-heading h2 { font-size: 35px; line-height: 1.25; letter-spacing: -1.2px; }
  .section-heading > .eyebrow { font-size: 11px; letter-spacing: 1px; }
  .section-heading p { font-size: 17px; line-height: 1.8; margin-top: 18px; }
  .destination-grid, .experience-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .destination-image { height: 350px; margin: 10px 10px 0; }
  .destination-body { padding: 25px; }
  .destination-info h3 { font-size: 32px; }
  .destination-tag { font-size: 14px; }
  .destination-info .round-button { width: 46px; height: 46px; }
  .destination-body > p { font-size: 16px; margin-top: 18px; }
  .destination-highlights span { font-size: 11px; }
  .postcard-label { font-size: 11px; padding: 7px 12px; left: 16px; }
  .experience-sketch { height: 235px; }
  .experience-copy { padding: 20px 25px 28px; }
  .experience-copy h3 { font-size: 29px; }
  .experience-copy p { font-size: 17px; }
  .sketch-paper { width: 175px; height: 180px; font-size: 32px; left: 49px; }
  .sketch-paper > svg { width: 148px; }
  .pencil { width: 150px; top: 135px; right: 30px; }
  .night-story { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 27px; margin-top: 37px; }
  .night-story h3 { font-size: 34px; }
  .night-story p { font-size: 16px; }
  .night-story-art .night-landscape { min-height: 0; }
  .journey-heading { display: block; margin-bottom: 28px; }
  .destination-switch { display: inline-flex; margin-top: 24px; }
  .switch-button { font-size: 15px; padding: 10px 17px; }
  .journey-layout { display: flex; flex-direction: column; gap: 28px; }
  .journey-map-card { position: static; width: 100%; padding: 22px 18px 17px; }
  .route-map { max-height: 380px; }
  .map-heading .eyebrow { font-size: 11px; }
  .map-caption h3 { font-size: 27px; }
  .map-note { font-size: 12px; }
  .journey-detail { width: 100%; }
  .day-tabs button { gap: 5px; font-size: 22px; padding-block: 15px; }
  .day-tabs button > span { font-size: 11px; }
  .day-scene { height: 215px; }
  .day-heading h3 { font-size: 29px; }
  .day-heading > p { font-size: 17px; }
  .schedule-item { gap: 15px; }
  .schedule-item p { font-size: 16px; }
  .itinerary-note { font-size: 12px; }
  .details-section { padding-block: 45px; }
  .details-grid { grid-template-columns: minmax(0, 1fr); gap: 25px; }
  .stay-block, .gift-block { padding: 28px; }
  .stay-block h2 { font-size: 34px; }
  .stay-block > p, .gift-block > p { font-size: 16px; }
  .stay-block li { font-size: 16px; }
  .gift-art { height: 270px; max-width: 330px; }
  .gift-tote { left: 134px; top: 77px; width: 145px; height: 163px; }
  .gift-notebook { left: 14px; top: 36px; width: 120px; height: 166px; }
  .gift-keyring { bottom: 8px; }
  .gift-pencil { left: 20px; bottom: 13px; }
  .gift-block h3 { font-size: 28px; }
  .plan-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .ticket-choice { padding: 26px; min-height: 223px; }
  .plan-name { font-size: 21px; }
  .plan-price { font-size: 48px; }
  .plan-price small { display: inline-block; font-size: 13px; }
  .ticket-art { right: 25px; bottom: 50px; }
  .plan-price-note { font-size: 14px; }
  .ticket-bottom { padding: 24px; }
  .plan-inclusion { font-size: 16px; }
  .ticket-cta { font-size: 16px; min-height: 57px; }
  .booking-summary { display: block; padding: 28px; }
  .summary-heading h3 { font-size: 29px; }
  .summary-stamp { width: 55px; height: 55px; }
  .summary-row strong { font-size: 19px; }
  .total > strong { font-size: 40px; }
  .request-button { font-size: 15px; }
  .summary-note, .total > small { font-size: 13px; }
  .summary-landscape { margin-inline: -28px; margin-bottom: -29px; }
  .sample-note { font-size: 13px; }
  .booking-steps { grid-template-columns: minmax(0, 1fr); gap: 27px; margin-top: 36px; }
  .booking-steps > div { gap: 17px; }
  .booking-steps h4 { font-size: 20px; }
  .booking-steps p { font-size: 16px; }
  .faq-section { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 8px; }
  .faq-intro { margin-bottom: 30px; }
  .faq-escape { max-width: 460px; }
  .escape-choice { font-size: 13px; padding-inline: 13px; }
  .escape-caption > p { font-size: 14px; }
  .faq-section .section-heading h2 { font-size: 35px; }
  .faq-list summary { font-size: 16px; padding: 19px; }
  .faq-list details > p { font-size: 16px; padding: 0 19px 21px; }
  .closing { padding-block: 63px; }
  .closing h2 { font-size: 41px; line-height: 1.25; letter-spacing: -1.3px; }
  .closing p { font-size: 16px; max-width: 300px; }
  .closing-art { width: 290px; height: 350px; right: -100px; bottom: -45px; opacity: .14; }
  .closing-star { right: 20px; top: 28px; font-size: 50px; opacity: .7; }
  .closing .eyebrow { font-size: 10px; }
  .footer { padding-block: 34px; flex-wrap: wrap; gap: 25px; }
  .footer > .round-button { margin-inline-start: auto; order: 2; }
  .footer-meta { margin: 0; width: 100%; order: 3; text-align: start; padding-top: 20px; border-top: 1px solid var(--line); }
  .footer p { font-size: 12px; }
  dialog { padding: 23px; }
  dialog h2 { font-size: 28px; }
  dialog textarea { font-size: 14px; }
  .dialog-head .eyebrow { font-size: 10px; }
  html[dir='rtl'] h1 { font-size: clamp(41px, 11vw, 63px); line-height: 1.5; }
  html[dir='rtl'] h2 { font-size: 31px; }
  html[dir='rtl'] .hero-copy > .eyebrow { font-size: 9px; }
  html[dir='rtl'] .header nav a { font-size: 16px; }
  html[dir='rtl'] .plan-name { font-size: 20px; }
  html[dir='rtl'] .closing-art { left: -100px; }
  html[dir='rtl'] .closing-star { left: 20px; }
  html[dir='rtl'] .faq-list details > p { padding-inline: 19px; }
}

@media (max-width: 360px) {
  .wrap { width: calc(100% - 32px); }
  .header-actions { gap: 5px; }
  .wordmark { font-size: 33px; }
  .logo-star { font-size: 23px; }
  .language { font-size: 12px; padding-inline: 6px; }
  .theme-button { width: 35px; }
  .menu-button { width: 30px; }
  .hero-copy > .eyebrow { font-size: 8px; }
  .hero-art { height: 390px; }
  .postcard-siwa { width: 203px; height: 314px; right: 5px; }
  .postcard-dahab { width: 155px; height: 241px; left: 10px; top: 101px; }
  .orbit { height: 310px; }
  .travel-stamp { left: 9px; width: 77px; height: 77px; }
  .hero-caption { left: 25px; font-size: 10px; }
  .hero-caption svg { width: 50px; }
  .hero-meta > span:first-child { font-size: 9px; }
  .hero-meta > span:last-child { font-size: 10px; }
  .destination-body { padding: 22px; }
  .destination-image { height: 310px; }
  .night-story, .stay-block, .gift-block { padding: 22px; }
  .gift-art { height: 245px; }
  .gift-tote { left: 106px; width: 124px; height: 146px; }
  .gift-notebook { left: 1px; width: 105px; height: 151px; font-size: 15px; padding-inline: 20px; }
  .gift-notebook span { font-size: 13px; }
  .gift-pencil { width: 140px; left: 10px; bottom: 0; }
  .gift-keyring { bottom: 0; right: -4px; }
  .sketch-paper { left: 29px; }
  .pencil { right: 8px; }
  .switch-button { padding-inline: 14px; }
  .day-tabs button { font-size: 19px; gap: 4px; }
  .day-tabs button > span { font-size: 9px; }
  .booking-summary { padding: 24px; }
  .summary-heading h3 { font-size: 25px; }
  .summary-stamp { width: 44px; height: 44px; }
  .request-button { font-size: 13px; padding-inline: 10px; }
  .summary-landscape { margin-inline: -24px; margin-bottom: -25px; }
  .closing h2 { font-size: 36px; }
  .escape-choice { padding-inline: 9px; font-size: 12px; }
  html[dir='rtl'] .escape-choice { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  html:not([data-motion='full']) { scroll-behavior: auto; }
  html:not([data-motion='full']) *, html:not([data-motion='full']) *::before, html:not([data-motion='full']) *::after { animation: none !important; transition: none !important; }
}