/* ==========================================================================
   مسألة وقت — Matter of Time · Design System (main.css)
   RTL-first · mobile-first · breakpoints 640 / 900 / 1200 (+1100 for the desktop nav)
   Sections:
   01 Tokens            09 Section head / eyebrow   17 Stats / skills / steps   25 CTA band / prefooter
   02 Reset & base      10 Page hero / breadcrumb   18 Pills / filters          26 Footer
   03 Typography        11 Cards (base)             19 Accordion                27 Floating actions
   04 Layout            12 Service card             20 Forms                    28 Reveal / motion
   05 Utilities         13 Tour card                21 Alerts                   29 Style-guide helpers
   06 Icons             14 Offer card               22 Carousel
   07 Buttons & links   15 Media shapes             23 Lightbox / video modal
   08 Badges & chips    16 Features / lists         24 Flight path
   ========================================================================== */

/* 01 — TOKENS ============================================================= */
:root {
  /* Brand teal (logo #26B0B2) */
  --teal-50:  #EFFAFA;
  --teal-100: #D7F2F2;
  --teal-200: #AFE4E5;
  --teal-300: #7FD2D4;
  --teal-400: #4DC0C2;
  --teal-500: #26B0B2;
  --teal-600: #1C9597;
  --teal-700: #157A7C;   /* primary buttons & links (white text AA 5.1:1) */
  --teal-800: #10595C;
  --teal-900: #0C3438;   /* ink: headings, dark sections */
  --teal-950: #07252A;

  /* Brand gold (logo #E0A94C) */
  --gold-50:  #FDF8EE;
  --gold-100: #FAEDD3;
  --gold-200: #F5DAA8;
  --gold-300: #EFC47E;
  --gold-400: #E8B563;
  --gold-500: #E0A94C;   /* accents, gold buttons (ink text 6.4:1) */
  --gold-600: #C98F33;
  --gold-700: #8F6220;   /* gold text on light backgrounds (AA) */
  --gold-800: #6B4917;
  --gold-900: #47300F;

  /* Neutrals */
  --ink: var(--teal-900);
  --sand-50:  #FDFBF7;
  --sand-100: #FBF7F0;   /* page background */
  --sand-200: #F5EEE2;
  --sand-300: #EADFCB;
  --white: #FFFFFF;
  --text: #34494C;
  --muted: #5B6B6D;
  --line: #E2ECEB;       /* hairline border, teal-tinted */
  --line-strong: #CFDFDE;

  /* Status */
  --success-50: #ECFDF3; --success-200: #ABEFC6; --success-700: #067647;
  --danger-50: #FEF3F2;  --danger-200: #FECDCA;  --danger-700: #B42318;
  --wa-green: #25D366;   --wa-green-dark: #128C4B;

  /* Contextual colours (re-mapped inside .on-dark) */
  --c-bg: var(--sand-100);
  --c-surface: var(--white);
  --c-heading: var(--ink);
  --c-text: var(--text);
  --c-muted: var(--muted);
  --c-border: var(--line);
  --c-link: var(--teal-700);
  --c-link-hover: var(--teal-800);
  --c-hl: var(--teal-600);
  --c-eyebrow: var(--gold-700);
  --c-focus: var(--teal-600);

  /* Typography */
  --font-display: "Kufam", "Tajawal", system-ui, sans-serif;
  --font-body: "Tajawal", system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
  --fs-2xs: 0.75rem;
  --fs-xs:  0.8125rem;
  --fs-sm:  0.9375rem;
  --fs-base: clamp(1.0625rem, 1.02rem + 0.2vw, 1.125rem);           /* 17 → 18px */
  --fs-lg:  clamp(1.125rem, 1.06rem + 0.3vw, 1.3125rem);             /* 18 → 21 */
  --fs-xl:  clamp(1.25rem, 1.12rem + 0.55vw, 1.5rem);                /* 20 → 24 */
  --fs-2xl: clamp(1.5rem, 1.28rem + 0.95vw, 1.875rem);               /* 24 → 30 */
  --fs-3xl: clamp(1.75rem, 1.35rem + 1.75vw, 2.625rem);              /* 28 → 42 */
  --fs-4xl: clamp(2.125rem, 1.5rem + 2.7vw, 3.375rem);               /* 34 → 54 */
  --fs-5xl: clamp(2.5rem, 1.6rem + 4vw, 4.375rem);                   /* 40 → 70 */
  --lh-body: 1.8;
  --lh-heading: 1.4;
  --lh-tight: 1.25;

  /* Spacing */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem;
  --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem;
  --section-y: clamp(3.75rem, 2.4rem + 5.5vw, 7rem);
  --gutter: clamp(1rem, 0.55rem + 2vw, 2rem);
  --gap: clamp(1rem, 0.7rem + 1.2vw, 1.75rem);
  --container: 1240px;
  --container-wide: 1440px;
  --container-narrow: 820px;

  /* Radii */
  --r-xs: 6px; --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-2xl: 44px; --r-pill: 999px;

  /* Shadows (teal-tinted, layered) */
  --shadow-xs: 0 1px 2px rgba(12, 52, 56, .06);
  --shadow-sm: 0 1px 2px rgba(12, 52, 56, .05), 0 4px 14px -4px rgba(12, 52, 56, .09);
  --shadow-md: 0 2px 4px rgba(12, 52, 56, .04), 0 14px 32px -10px rgba(12, 52, 56, .16);
  --shadow-lg: 0 4px 10px rgba(12, 52, 56, .05), 0 28px 60px -18px rgba(12, 52, 56, .28);
  --shadow-gold: 0 12px 26px -10px rgba(201, 143, 51, .6);
  --shadow-teal: 0 12px 26px -10px rgba(21, 122, 124, .55);

  /* Motion */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-1: .15s; --dur-2: .3s; --dur-3: .6s;

  /* Z-index scale */
  --z-base: 1; --z-raised: 10; --z-sticky: 200; --z-float: 300; --z-drawer: 400; --z-modal: 500; --z-skip: 600;

  /* Header */
  --header-h: 76px;
}
@media (min-width: 1100px) { :root { --header-h: 88px; } }

/* Dark context: any dark section re-maps the contextual colours */
.on-dark, .section--ink, .section--teal, .page-hero, .cta-band, .site-footer {
  --c-surface: rgba(255, 255, 255, .06);
  --c-heading: #FFFFFF;
  --c-text: rgba(255, 255, 255, .84);
  --c-muted: rgba(255, 255, 255, .7);
  --c-border: rgba(255, 255, 255, .14);
  --c-link: var(--gold-300);
  --c-link-hover: var(--gold-200);
  --c-hl: var(--gold-400);
  --c-eyebrow: var(--gold-300);
  --c-focus: var(--gold-400);
  color: var(--c-text);
}

/* 02 — RESET & BASE ======================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-tap-highlight-color: transparent;
}
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
html.is-locked, html.is-locked body { overflow: hidden; }
main { display: block; }
img, svg, video, canvas, iframe { display: block; max-width: 100%; }
img { height: auto; }
img, video { border-style: none; }
figure { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: normal; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: not-allowed; }
ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }
table { border-collapse: collapse; width: 100%; }
hr { border: 0; border-top: 1px solid var(--c-border); margin: var(--sp-8) 0; }
[hidden] { display: none !important; }
address { font-style: normal; }
::selection { background: var(--gold-200); color: var(--ink); }

:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: fixed;
  inset-block-start: 12px;
  inset-inline-start: 12px;
  z-index: var(--z-skip);
  padding: .75rem 1.25rem;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--dur-2) var(--ease-out);
}
.skip-link:focus, .skip-link:focus-visible { transform: none; outline-color: var(--gold-400); }

/* 03 — TYPOGRAPHY ========================================================== */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .5em;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-heading);
  color: var(--c-heading);
  text-wrap: balance;
}
h1, .h1 { font-size: var(--fs-4xl); font-weight: 800; line-height: 1.3; }
h2, .h2 { font-size: var(--fs-3xl); line-height: 1.35; }
h3, .h3 { font-size: var(--fs-xl); }
h4, .h4 { font-size: var(--fs-lg); }
h5, .h5, h6, .h6 { font-size: var(--fs-base); }
.display { font-family: var(--font-display); font-size: var(--fs-5xl); font-weight: 800; line-height: 1.25; color: var(--c-heading); }
p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
.lead { font-size: var(--fs-lg); line-height: 1.85; color: var(--c-muted); }
small, .text-sm { font-size: var(--fs-sm); }
.text-xs { font-size: var(--fs-xs); }
strong, b { font-weight: 700; }
a { color: var(--c-link); text-decoration-thickness: 1.5px; text-underline-offset: .3em; transition: color var(--dur-1) ease; }
a:hover { color: var(--c-link-hover); }
.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1em; }
.prose h2, .prose h3 { margin-top: 1.6em; }
.prose ul, .prose ol { padding-inline-start: 1.25em; margin: 0 0 1em; }
.prose li + li { margin-top: .4em; }
.prose li::marker { color: var(--teal-500); }
.hl {
  color: var(--c-hl);
  padding-bottom: .12em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M3 9C45 3 120 1.5 197 6' fill='none' stroke='%23E0A94C' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") bottom center / 100% .36em no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.hl--plain { background: none; padding: 0; }
.num, .ltr { direction: ltr; unicode-bidi: isolate; }
.text-gold { color: var(--gold-700); }
:is(.on-dark, .section--ink, .section--teal, .cta-band, .page-hero) .text-gold { color: var(--gold-300); }
.text-teal { color: var(--teal-700); }
.text-muted { color: var(--c-muted); }
.text-heading { color: var(--c-heading); }
.text-white { color: #fff; }
.font-display { font-family: var(--font-display); }
.fw-500 { font-weight: 500; } .fw-700 { font-weight: 700; } .fw-800 { font-weight: 800; }

/* 04 — LAYOUT ============================================================== */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide { max-width: calc(var(--container-wide) + var(--gutter) * 2); }
.container--narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }

.section { position: relative; padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * .6); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }
.section--white { background: var(--white); }
.section--sand { background: var(--sand-100); }
.section--sand-deep { background: var(--sand-200); }
.section--ink {
  background:
    radial-gradient(900px 420px at 88% -10%, rgba(38, 176, 178, .32), transparent 60%),
    radial-gradient(700px 380px at 0% 110%, rgba(224, 169, 76, .16), transparent 60%),
    linear-gradient(165deg, #0F4449 0%, var(--teal-900) 55%, var(--teal-950) 100%);
  isolation: isolate;
}
.section--teal { background: linear-gradient(150deg, var(--teal-700), var(--teal-800)); isolation: isolate; }
.section--map::before, .section--ink.section--map::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../img/misc/map.png") center 30% / min(1300px, 140%) auto no-repeat;
  opacity: .9;
  pointer-events: none;
}
.section--map { isolation: isolate; }
.section--ink.section--map::before, .section--teal.section--map::before { opacity: .07; }
.section--dots { background-image: radial-gradient(rgba(21, 122, 124, .14) 1.2px, transparent 1.2px); background-size: 22px 22px; }
.section--clip { overflow: clip; }

.grid { display: grid; gap: var(--gap); }
.grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.grid--auto { grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--min, 280px)), 1fr)); }
.grid--center { align-items: center; }
.span-full { grid-column: 1 / -1; }

.masonry { columns: var(--cols, 1); column-gap: var(--gap); }
.masonry > * { break-inside: avoid; margin-bottom: var(--gap); }
@media (min-width: 560px) { .masonry { --cols: 2; } }
@media (min-width: 900px) { .masonry { --cols: 3; } }
@media (min-width: 1200px) { .masonry--4 { --cols: 4; } }
.masonry--dense { --cols: 2; column-gap: .75rem; }
.masonry--dense > * { margin-bottom: .75rem; }
@media (min-width: 900px) { .masonry--dense { --cols: 3; column-gap: var(--gap); } .masonry--dense > * { margin-bottom: var(--gap); } }
@media (min-width: 1200px) { .masonry--dense { --cols: 4; } }

.stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--sp-4)); }
.stack--sm { --stack-gap: var(--sp-2); }
.stack--lg { --stack-gap: var(--sp-8); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, var(--sp-3)); }
.cluster--center { justify-content: center; }
.cluster--between { justify-content: space-between; }

.split { display: grid; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split--wide-media { grid-template-columns: 1.15fr 1fr; }
  .split--wide-text { grid-template-columns: 1fr 1.15fr; }
  .split--reverse > :first-child { order: 2; }
}

/* 05 — UTILITIES =========================================================== */
.visually-hidden, .sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.text-center { text-align: center; }
.text-start { text-align: start; }
.text-end { text-align: end; }
.mx-auto { margin-inline: auto; }
.mt-0 { margin-top: 0 !important; } .mb-0 { margin-bottom: 0 !important; }
.mt-2 { margin-top: var(--sp-2); } .mt-4 { margin-top: var(--sp-4); } .mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); } .mt-10 { margin-top: var(--sp-10); } .mt-12 { margin-top: var(--sp-12); } .mt-16 { margin-top: var(--sp-16); }
.mb-2 { margin-bottom: var(--sp-2); } .mb-4 { margin-bottom: var(--sp-4); } .mb-6 { margin-bottom: var(--sp-6); }
.mb-8 { margin-bottom: var(--sp-8); } .mb-12 { margin-bottom: var(--sp-12); }
.w-full { width: 100%; }
.max-w-prose { max-width: 62ch; }
.relative { position: relative; }
.rounded { border-radius: var(--r-lg); }
.rounded-xl { border-radius: var(--r-xl); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.overflow-clip { overflow: clip; }
@media (max-width: 639.98px) { .hide-sm { display: none !important; } }
@media (min-width: 640px) { .show-sm-only { display: none !important; } }
@media (max-width: 899.98px) { .hide-md-down { display: none !important; } }
@media (min-width: 900px) { .hide-md-up { display: none !important; } }

/* 06 — ICONS =============================================================== */
.icon { width: 1.25em; height: 1.25em; flex-shrink: 0; vertical-align: -0.2em; transition: transform var(--dur-2) var(--ease-out); }
.icon--xs { width: .875em; height: .875em; }
.icon--sm { width: 1em; height: 1em; }
.icon--lg { width: 1.6em; height: 1.6em; }
.icon--xl { width: 2.25em; height: 2.25em; }
.icon--flip { transform: scaleX(-1); }
.icon-circle {
  display: inline-grid; place-items: center; flex-shrink: 0;
  width: var(--size, 48px); height: var(--size, 48px); border-radius: 50%;
  background: var(--teal-50); color: var(--teal-700);
}
.icon-circle .icon { width: 46%; height: 46%; }
.icon-circle--gold { background: var(--gold-100); color: var(--gold-700); }
.icon-circle--ink { background: var(--ink); color: var(--gold-400); }
.icon-circle--white { background: #fff; color: var(--teal-700); box-shadow: var(--shadow-sm); }
:is(.on-dark, .section--ink, .section--teal, .cta-band, .page-hero) .icon-circle { background: rgba(255, 255, 255, .08); color: var(--gold-400); }

/* 07 — BUTTONS & LINKS ===================================================== */
.btn {
  --btn-bg: var(--teal-700);
  --btn-fg: #fff;
  --btn-bd: transparent;
  --btn-bg-h: var(--teal-800);
  --btn-fg-h: #fff;
  --btn-bd-h: transparent;
  --btn-shadow-h: var(--shadow-teal);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  min-height: 50px;
  padding: .7em 1.6em;
  border: 1.5px solid var(--btn-bd);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out),
              transform var(--dur-2) var(--ease-out);
}
.btn:hover {
  background: var(--btn-bg-h);
  color: var(--btn-fg-h);
  border-color: var(--btn-bd-h);
  box-shadow: var(--btn-shadow-h);
  transform: translateY(-2px);
}
.btn:active { transform: translateY(0); box-shadow: none; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }
.btn .icon { width: 1.2em; height: 1.2em; }
.btn:hover .icon-arrow-left, .btn:hover .icon-chevron-left { transform: translateX(-4px); }
.btn:hover .icon-arrow-right, .btn:hover .icon-chevron-right { transform: translateX(4px); }

.btn--primary { /* default */ }
.btn--gold {
  --btn-bg: var(--gold-500); --btn-fg: var(--ink);
  --btn-bg-h: var(--gold-400); --btn-fg-h: var(--ink); --btn-shadow-h: var(--shadow-gold);
}
.btn--ink {
  --btn-bg: var(--ink); --btn-fg: #fff; --btn-bg-h: var(--teal-950); --btn-shadow-h: var(--shadow-md);
}
.btn--outline {
  --btn-bg: transparent; --btn-fg: var(--teal-700); --btn-bd: var(--teal-700);
  --btn-bg-h: var(--teal-700); --btn-fg-h: #fff; --btn-bd-h: var(--teal-700);
}
.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--teal-700);
  --btn-bg-h: var(--teal-50); --btn-fg-h: var(--teal-800); --btn-shadow-h: none;
}
.btn--white {
  --btn-bg: #fff; --btn-fg: var(--ink);
  --btn-bg-h: var(--gold-50); --btn-fg-h: var(--ink); --btn-shadow-h: var(--shadow-md);
}
.btn--outline-white {
  --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .45);
  --btn-bg-h: #fff; --btn-fg-h: var(--ink); --btn-bd-h: #fff; --btn-shadow-h: none;
}
.btn--wa {
  --btn-bg: var(--wa-green-dark); --btn-fg: #fff;
  --btn-bg-h: #0E7A40; --btn-shadow-h: 0 12px 26px -10px rgba(18, 140, 75, .6);
}
.btn--sm { min-height: 40px; padding: .5em 1.1em; font-size: .9375rem; }
.btn--lg { min-height: 58px; padding: .85em 2em; font-size: 1.0625rem; }
.btn--block { display: flex; width: 100%; }
.btn--icon { width: 50px; min-height: 50px; height: 50px; padding: 0; }
.btn--icon.btn--sm { width: 40px; height: 40px; min-height: 40px; }
.btn--icon.btn--lg { width: 58px; height: 58px; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .45em;
  color: var(--c-link); font-weight: 700; text-decoration: none;
}
.link-arrow .icon { width: 1.1em; height: 1.1em; transition: transform var(--dur-2) var(--ease-out); }
.link-arrow:hover .icon { transform: translateX(-5px); }
.link-underline {
  color: inherit; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) no-repeat right bottom / 0 1.5px;
  transition: background-size var(--dur-2) var(--ease-out);
}
.link-underline:hover { background-size: 100% 1.5px; }

/* 08 — BADGES, CHIPS, PRICE =============================================== */
.badge {
  display: inline-flex; align-items: center; gap: .35em;
  padding: .2em .8em;
  border-radius: var(--r-pill);
  background: var(--teal-50);
  color: var(--teal-800);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.7;
  white-space: nowrap;
}
.badge .icon { width: 1.05em; height: 1.05em; }
.badge--gold { background: var(--gold-100); color: var(--gold-800); }
.badge--solid-gold { background: var(--gold-500); color: var(--ink); }
.badge--ink { background: var(--ink); color: #fff; }
.badge--teal { background: var(--teal-700); color: #fff; }
.badge--white { background: rgba(255, 255, 255, .92); color: var(--ink); box-shadow: var(--shadow-xs); backdrop-filter: blur(6px); }
.badge--glass { background: rgba(12, 52, 56, .55); color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.badge--outline { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; color: var(--teal-700); }
.badge--lg { font-size: var(--fs-sm); padding: .35em 1em; }

.chip {
  display: inline-flex; align-items: center; gap: .4em;
  color: var(--c-muted); font-size: var(--fs-sm); font-weight: 500; line-height: 1.5;
}
.chip .icon { width: 1.1em; height: 1.1em; color: var(--teal-600); }
:is(.on-dark, .section--ink, .section--teal, .cta-band, .page-hero) .chip .icon { color: var(--gold-400); }
.chip--box {
  padding: .35em .9em; border-radius: var(--r-pill);
  background: var(--c-surface); border: 1px solid var(--c-border);
}
.meta-row { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; }

.stars { display: inline-flex; gap: 2px; color: var(--gold-500); vertical-align: middle; }
.stars .icon { width: 1em; height: 1em; }

.price { display: inline-flex; flex-direction: column; line-height: 1.2; }
.price__label { font-size: var(--fs-xs); color: var(--c-muted); font-weight: 500; }
.price__value { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 800; color: var(--c-heading); white-space: nowrap; }
.price__value small { font-family: var(--font-body); font-size: .62em; font-weight: 700; color: var(--gold-700); margin-inline-start: .15em; }
:is(.on-dark, .section--ink, .section--teal, .cta-band, .page-hero) .price__value small { color: var(--gold-300); }
.price__old { font-size: var(--fs-sm); color: var(--c-muted); text-decoration: line-through; }

.price-tag {
  display: inline-flex; align-items: baseline; gap: .3em;
  padding: .45em 1em .4em;
  border-radius: var(--r-pill);
  background: var(--gold-500);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-sm);
  line-height: 1.3;
  box-shadow: var(--shadow-gold);
  white-space: nowrap;
}
.price-tag small { font-family: var(--font-body); font-weight: 700; font-size: .78em; }

/* 09 — SECTION HEAD & EYEBROW ============================================== */
.eyebrow {
  display: inline-flex; align-items: center; gap: .55em;
  margin-bottom: .85rem;
  color: var(--c-eyebrow);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 800;
  line-height: 1.5;
}
.eyebrow__trail {
  display: inline-block; width: 34px; height: 2px;
  background: repeating-linear-gradient(to left, currentColor 0 5px, transparent 5px 10px);
  opacity: .7;
}
.eyebrow__plane.icon { width: 1.05em; height: 1.05em; transform: rotate(-90deg); }
.eyebrow--light { --c-eyebrow: var(--gold-300); }
.eyebrow--plain .eyebrow__trail, .eyebrow--plain .eyebrow__plane { display: none; }

.section-head { margin-bottom: clamp(2rem, 1.4rem + 2.2vw, 3.5rem); }
.section-head--center { text-align: center; }
.section-head--center .section-head__text { max-width: 760px; margin-inline: auto; }
.section-head--center .section-head__lead { margin-inline: auto; }
.section-head__title { margin-bottom: 0; }
.section-head__lead { max-width: 62ch; margin-top: .9rem; font-size: var(--fs-lg); color: var(--c-muted); line-height: 1.85; }
.section-head--has-action { display: flex; flex-direction: column; gap: 1.25rem; }
.section-head--center.section-head--has-action { align-items: center; }
@media (min-width: 900px) {
  .section-head--start.section-head--has-action { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .section-head--start .section-head__action { flex-shrink: 0; }
}

/* 10 — PAGE HERO & BREADCRUMB ============================================== */
.page-hero {
  --curve-color: var(--sand-100);
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) clamp(5rem, 3.6rem + 5vw, 8rem);
  background:
    radial-gradient(900px 480px at 92% -20%, rgba(38, 176, 178, .45), transparent 62%),
    radial-gradient(700px 420px at -5% 120%, rgba(224, 169, 76, .22), transparent 60%),
    linear-gradient(160deg, #0F4A4F 0%, var(--teal-900) 58%, var(--teal-950) 100%);
  color: var(--c-text);
}
.page-hero--to-white { --curve-color: var(--white); }
.page-hero__bg {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("../img/misc/map.png") 30% 40% / min(1200px, 150%) auto no-repeat;
  opacity: .09;
}
.page-hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: linear-gradient(to left, #000 0%, transparent 55%);
  -webkit-mask-image: linear-gradient(to left, #000 0%, transparent 55%);
}
.page-hero__inner { position: relative; z-index: 2; display: grid; gap: 2.5rem; align-items: center; }
.page-hero__content { max-width: 720px; }
.page-hero__title { margin: 0; font-size: var(--fs-4xl); color: #fff; }
.page-hero__lead { margin-top: 1rem; max-width: 58ch; font-size: var(--fs-lg); color: rgba(255, 255, 255, .82); }
.page-hero .breadcrumb { margin-bottom: 1.5rem; }
.page-hero__media { display: none; }
.page-hero__curve {
  position: absolute; inset-inline: 0; bottom: -1px; z-index: 1;
  width: 100%; height: clamp(34px, 5vw, 80px);
  fill: var(--curve-color);
}
@media (min-width: 900px) {
  .page-hero--media .page-hero__inner { grid-template-columns: minmax(0, 1fr) auto; }
  .page-hero__media {
    display: block; width: clamp(220px, 22vw, 300px);
    margin-bottom: -2.5rem;
    border: 6px solid rgba(255, 255, 255, .1);
    border-radius: 160px 160px var(--r-xl) var(--r-xl);
    box-shadow: var(--shadow-lg);
  }
  .page-hero__media img { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; }
}

.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); font-weight: 500; }
.breadcrumb li { display: inline-flex; align-items: center; gap: .5rem; color: var(--c-muted); }
.breadcrumb li + li::before {
  content: ""; width: .55em; height: .55em;
  border-left: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor;
  transform: rotate(45deg); opacity: .6; margin-inline-end: .1rem;
}
.breadcrumb a { display: inline-flex; align-items: center; gap: .35em; color: var(--c-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--c-heading); }
.breadcrumb [aria-current] { color: var(--c-heading); font-weight: 700; }
.breadcrumb--light { --c-muted: rgba(255, 255, 255, .72); --c-heading: var(--gold-300); }
.breadcrumb--light li + li::before { color: rgba(255, 255, 255, .5); }

/* 11 — CARDS (BASE) ======================================================== */
.card {
  position: relative;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
}
.card--flat { box-shadow: none; }
.card--lg { border-radius: var(--r-xl); padding: clamp(1.5rem, 1rem + 2vw, 3rem); }
.card--sand { background: var(--sand-50); }
.card--hover { transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2); }
.card--hover:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--teal-100); }
.card__title { font-size: var(--fs-xl); margin-bottom: .5rem; }
.card__text { color: var(--c-muted); }
.glass {
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}
.stretched-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }

/* 12 — SERVICE CARD ======================================================== */
.service-card {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start;
  height: 100%;
  padding: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2);
}
.service-card::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 4px;
  background: linear-gradient(to left, var(--teal-500), var(--gold-500));
  transform: scaleX(0); transform-origin: right; transition: transform var(--dur-3) var(--ease-out);
}
.service-card::after {
  content: ""; position: absolute; z-index: -1;
  inset-inline-end: -60px; bottom: -60px; width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle, var(--teal-50), transparent 70%);
  transition: transform var(--dur-3) var(--ease-out);
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; }
.service-card:hover::before { transform: scaleX(1); }
.service-card:hover::after { transform: scale(1.5); }
.service-card__icon {
  display: grid; place-items: center;
  width: 84px; height: 84px; margin-bottom: 1.4rem;
  border-radius: 28px 28px 28px 8px;
  background: var(--gold-50);
  box-shadow: inset 0 0 0 1px var(--gold-100);
  transition: background-color var(--dur-2) var(--ease-out), transform var(--dur-3) var(--ease-out);
}
.service-card__icon img { width: 52px; height: 52px; object-fit: contain; }
.service-card__icon .icon { width: 38px; height: 38px; color: var(--gold-600); }
.service-card:hover .service-card__icon { background: var(--ink); transform: rotate(-6deg); }
.service-card__num {
  position: absolute; top: 1.1rem; inset-inline-end: 1.4rem;
  font-family: var(--font-display); font-size: 2.6rem; font-weight: 800; line-height: 1;
  color: var(--teal-100);
}
.service-card__title { font-size: var(--fs-xl); margin-bottom: .5rem; }
.service-card__text { color: var(--muted); margin-bottom: 1.25rem; flex-grow: 1; }
.service-card .link-arrow { margin-top: auto; }
.service-card--dark { background: linear-gradient(160deg, var(--teal-800), var(--teal-900)); border-color: transparent; }
.service-card--dark .service-card__title { color: #fff; }
.service-card--dark .service-card__text { color: rgba(255, 255, 255, .78); }
.service-card--dark .service-card__icon { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.service-card--dark::after { background: radial-gradient(circle, rgba(38, 176, 178, .25), transparent 70%); }
.service-card--dark .service-card__num { color: rgba(255, 255, 255, .06); }
.service-card--dark .link-arrow { color: var(--gold-300); }

/* 13 — TOUR CARD =========================================================== */
.tour-card {
  position: relative;
  display: flex; flex-direction: column;
  height: 100%;
  padding: .7rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.tour-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.tour-card { container-type: inline-size; }
.tour-card__media {
  position: relative; display: block; overflow: hidden; isolation: isolate;
  border-radius: 200px 200px var(--r-lg) var(--r-lg);
  border-radius: 50cqi 50cqi var(--r-lg) var(--r-lg);
}
.tour-card__media img { width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; transition: transform .9s var(--ease-out); }
.tour-card:hover .tour-card__media img { transform: scale(1.06); }
.tour-card__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(7, 37, 42, .55), transparent 45%);
}
.tour-card__badges {
  position: absolute; z-index: 1; inset-inline: .8rem; bottom: .8rem;
  display: flex; justify-content: space-between; align-items: center; gap: .5rem;
}
.tour-card__body { display: flex; flex-direction: column; flex-grow: 1; padding: 1.1rem .7rem .5rem; }
.tour-card__loc { display: flex; align-items: center; gap: .35em; margin-bottom: .2rem; color: var(--muted); font-size: var(--fs-sm); font-weight: 500; }
.tour-card__loc .icon { color: var(--gold-600); width: 1.05em; height: 1.05em; }
.tour-card__title { font-size: var(--fs-xl); margin-bottom: .6rem; }
.tour-card__title a { color: inherit; text-decoration: none; }
.tour-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.tour-card__meta { margin-bottom: 1rem; }
.tour-card__foot {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  margin-top: auto; padding-top: 1rem; border-top: 1px dashed var(--line-strong);
}
.tour-card__foot .btn { position: relative; z-index: 2; }
.tour-card__go {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: var(--teal-50); color: var(--teal-700);
  transition: background-color var(--dur-2), color var(--dur-2), transform var(--dur-2) var(--ease-out);
}
.tour-card:hover .tour-card__go { background: var(--teal-700); color: #fff; transform: rotate(-45deg); }

/* 14 — OFFER CARD (poster thumbnails, square 1:1 and story 9:16) =========== */
.offer-card {
  position: relative;
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: .6rem;
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.offer-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.offer-card__media { position: relative; display: block; overflow: hidden; border-radius: calc(var(--r-lg) - 6px); background: var(--teal-50); }
.offer-card__media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform .8s var(--ease-out); }
.offer-card--story .offer-card__media img { aspect-ratio: 9 / 16; }
.offer-card--crop .offer-card__media img { aspect-ratio: 4 / 5; object-position: top; }
.offer-card:hover .offer-card__media img { transform: scale(1.04); }
.offer-card__zoom {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(12, 52, 56, .45); color: #fff; opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out);
}
.offer-card__zoom .icon { width: 54px; height: 54px; padding: 14px; border-radius: 50%; background: rgba(255, 255, 255, .18); backdrop-filter: blur(6px); }
.offer-card__media:hover .offer-card__zoom, .offer-card__media:focus-visible .offer-card__zoom { opacity: 1; }
.offer-card__badge { position: absolute; top: .75rem; inset-inline-start: .75rem; z-index: 1; }
.offer-card__body { display: flex; flex-direction: column; gap: .5rem; padding: .9rem .6rem .45rem; flex-grow: 1; }
.offer-card__title { font-size: var(--fs-lg); margin: 0; line-height: 1.5; }
.offer-card__text { font-size: var(--fs-sm); color: var(--muted); margin: 0; line-height: 1.7; }
.offer-card__foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: auto; padding-top: .6rem; }
/* Compact variant for 2-column mobile galleries */
.offer-card--compact { padding: .4rem; border-radius: var(--r-md); }
.offer-card--compact .offer-card__media { border-radius: calc(var(--r-md) - 4px); }
.offer-card--compact .offer-card__body { padding: .6rem .35rem .3rem; gap: .35rem; }
.offer-card--compact .offer-card__title { font-size: var(--fs-sm); line-height: 1.55; }
.offer-card--compact .offer-card__text { font-size: var(--fs-xs); }
.offer-card--compact .offer-card__foot { flex-wrap: wrap; gap: .4rem; }
.offer-card--compact .price__value { font-size: var(--fs-lg); }
.offer-card--compact .offer-card__badge { top: .45rem; inset-inline-start: .45rem; }
@media (max-width: 639.98px) { .offer-card--compact .offer-card__foot .btn { width: 100%; } }

/* 15 — MEDIA SHAPES ======================================================== */
/* Arch = rounded-top window echoing Gulf arches & airplane windows. Put the class on a wrapper; the child img/video gets the shape. */
.arch, .window, .media-frame { position: relative; container-type: inline-size; }
.arch > .arch__inner { overflow: hidden; }
.arch > img, .arch > video, .arch > picture > img, .arch > .arch__inner {
  display: block; width: 100%; height: 100%; object-fit: cover;
  border-radius: 200px 200px var(--r-lg) var(--r-lg);
  border-radius: 50cqi 50cqi var(--r-lg) var(--r-lg);
}
.arch--soft > img { border-radius: 120px 120px var(--r-lg) var(--r-lg); border-radius: 30cqi 30cqi var(--r-lg) var(--r-lg); }
.arch--full > img { border-radius: 200px 200px 0 0; border-radius: 50cqi 50cqi 0 0; }
.window > img, .window > video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 200px; border-radius: 50cqi; }
.media-frame > img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-xl); }
.arch--ring > img, .window--ring > img { box-shadow: 0 0 0 8px #fff, var(--shadow-lg); }
.ratio-1x1 > img, img.ratio-1x1 { aspect-ratio: 1 / 1; }
.ratio-4x5 > img, img.ratio-4x5 { aspect-ratio: 4 / 5; }
.ratio-3x4 > img, img.ratio-3x4 { aspect-ratio: 3 / 4; }
.ratio-2x3 > img, img.ratio-2x3 { aspect-ratio: 2 / 3; }
.ratio-9x16 > img, img.ratio-9x16 { aspect-ratio: 9 / 16; }
.ratio-16x9 > img, img.ratio-16x9 { aspect-ratio: 16 / 9; }
.ratio-4x3 > img, img.ratio-4x3 { aspect-ratio: 4 / 3; }
.img-cover { width: 100%; height: 100%; object-fit: cover; }
.zoom-hover { overflow: hidden; }
.zoom-hover img { transition: transform .9s var(--ease-out); }
.zoom-hover:hover img { transform: scale(1.05); }

/* Collage: big arch + small round image + floating badge */
.collage { position: relative; padding-bottom: 12%; padding-inline-end: 14%; max-width: 560px; }
.collage__main { width: 82%; }
.collage__main > img { aspect-ratio: 4 / 5; }
.collage__sub {
  position: absolute; inset-inline-end: 0; bottom: 0; width: 46%;
  border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 8px var(--c-bg), var(--shadow-lg);
}
.collage__sub img { aspect-ratio: 1; width: 100%; object-fit: cover; }
.collage__badge {
  position: absolute; top: 12%; inset-inline-end: 4%;
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem 1.1rem .75rem 1.25rem;
  background: #fff; border-radius: var(--r-md); box-shadow: var(--shadow-md);
  animation: float-y 6s var(--ease-in-out) infinite;
}
.collage__badge strong { display: block; font-family: var(--font-display); font-size: var(--fs-xl); color: var(--ink); line-height: 1.2; }
.collage__badge span { font-size: var(--fs-xs); color: var(--muted); }
.collage__dots {
  position: absolute; z-index: -1; top: -18px; inset-inline-start: -18px; width: 140px; height: 140px;
  background-image: radial-gradient(var(--gold-400) 2px, transparent 2px); background-size: 16px 16px; opacity: .55;
}
.collage { isolation: isolate; }

/* Video trigger */
.play-btn {
  position: relative; display: inline-grid; place-items: center;
  width: var(--size, 76px); height: var(--size, 76px); border-radius: 50%;
  background: var(--gold-500); color: var(--ink);
  box-shadow: var(--shadow-gold);
  transition: transform var(--dur-2) var(--ease-out);
}
.play-btn .icon { width: 34%; height: 34%; margin-left: 8%; }
.play-btn::before, .play-btn::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--gold-400); animation: pulse-ring 2.4s var(--ease-out) infinite;
}
.play-btn::after { animation-delay: 1.2s; }
.play-btn:hover { transform: scale(1.06); }
.video-card { position: relative; display: block; overflow: hidden; border-radius: var(--r-xl); color: #fff; text-decoration: none; }
.video-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .9s var(--ease-out); }
.video-card::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(7, 37, 42, .75), rgba(7, 37, 42, .15)); }
.video-card__center { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; }
.video-card__caption { position: absolute; z-index: 2; inset-inline: 1.5rem; bottom: 1.25rem; font-weight: 700; font-size: var(--fs-lg); }
.video-card:hover img { transform: scale(1.04); }

/* 16 — FEATURES, LISTS, CONTACT =========================================== */
.feature { display: flex; flex-direction: column; gap: .9rem; }
.feature__icon {
  display: grid; place-items: center; width: 64px; height: 64px; flex-shrink: 0;
  border-radius: 20px; background: var(--teal-50); color: var(--teal-700);
  transition: transform var(--dur-3) var(--ease-out), background-color var(--dur-2);
}
.feature__icon .icon { width: 30px; height: 30px; }
.feature__icon--gold { background: var(--gold-100); color: var(--gold-700); }
.feature__icon--ink { background: var(--ink); color: var(--gold-400); }
:is(.on-dark, .section--ink, .section--teal, .cta-band, .page-hero) .feature__icon { background: rgba(255, 255, 255, .08); color: var(--gold-400); }
.feature:hover .feature__icon { transform: translateY(-4px) rotate(-4deg); }
.feature__title { font-size: var(--fs-xl); margin: 0; }
.feature__text { color: var(--c-muted); margin: 0; }
.feature--row { flex-direction: row; align-items: flex-start; gap: 1.1rem; }
.feature--card { padding: clamp(1.4rem, 1.1rem + 1vw, 2rem); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); height: 100%; }
.feature--center { align-items: center; text-align: center; }

.check-list { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; }
.check-list li { position: relative; padding-inline-start: 2rem; line-height: 1.7; }
.check-list li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .25em;
  width: 1.3rem; height: 1.3rem; border-radius: 50%;
  background: var(--teal-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23157A7C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 62% no-repeat;
}
.check-list--gold li::before { background-color: var(--gold-100); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238F6220' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
:is(.on-dark, .section--ink, .section--teal, .cta-band, .page-hero) .check-list li::before { background-color: rgba(255, 255, 255, .1); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8B563' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.check-list--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }

.price-list { margin: 0; padding: 0; list-style: none; }
.price-list li { display: flex; align-items: baseline; gap: .75rem; padding-block: .8rem; border-bottom: 1px dashed var(--line-strong); }
.price-list li:last-child { border-bottom: 0; }
.price-list__name { font-weight: 700; color: var(--c-heading); }
.price-list__fill { flex: 1; }
.price-list__price { font-family: var(--font-display); font-weight: 800; color: var(--teal-700); white-space: nowrap; }
.price-list__price small { font-family: var(--font-body); font-size: .75em; color: var(--gold-700); }

.contact-list { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.contact-item { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.1rem; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); text-decoration: none; color: inherit; transition: border-color var(--dur-2), box-shadow var(--dur-2), transform var(--dur-2) var(--ease-out); }
a.contact-item:hover { border-color: var(--teal-200); box-shadow: var(--shadow-sm); transform: translateY(-2px); color: inherit; }
.contact-item__label { display: block; font-size: var(--fs-xs); color: var(--c-muted); font-weight: 500; }
.contact-item__value { display: block; font-weight: 700; color: var(--c-heading); overflow-wrap: anywhere; }

.map-embed { position: relative; overflow: hidden; border-radius: var(--r-xl); box-shadow: var(--shadow-md); background: var(--teal-50); aspect-ratio: 16 / 10; }
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.social { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.social__link {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: var(--teal-50); color: var(--teal-800);
  transition: background-color var(--dur-2), color var(--dur-2), transform var(--dur-2) var(--ease-out);
}
.social__link .icon { width: 19px; height: 19px; }
.social__link:hover { background: var(--teal-700); color: #fff; transform: translateY(-3px); }
.social--light .social__link { background: rgba(255, 255, 255, .08); color: #fff; }
.social--light .social__link:hover { background: var(--gold-500); color: var(--ink); }
.social--sm .social__link { width: 32px; height: 32px; }
.social--sm .social__link .icon { width: 15px; height: 15px; }
.social--sm { gap: .25rem; }

.divider-plane { display: flex; align-items: center; gap: 1rem; color: var(--gold-500); margin-block: var(--sp-8); }
.divider-plane::before, .divider-plane::after { content: ""; flex: 1; height: 2px; background: repeating-linear-gradient(to left, var(--line-strong) 0 6px, transparent 6px 12px); }
.divider-plane .icon { transform: rotate(-90deg); }

/* Key facts (tour / offer details): icon + label + value */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: .75rem; margin: 0; padding: 0; list-style: none; }
.fact { display: flex; align-items: center; gap: .8rem; padding: .9rem 1rem; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); }
.fact .icon-circle { --size: 44px; }
.fact__label { display: block; font-size: var(--fs-xs); color: var(--c-muted); line-height: 1.5; }
.fact__value { display: block; font-weight: 700; color: var(--c-heading); line-height: 1.5; }

/* Photo gallery (use with data-lightbox="group" links) */
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
@media (min-width: 900px) { .gallery { grid-template-columns: repeat(var(--gallery-cols, 4), minmax(0, 1fr)); gap: 1rem; } }
.gallery > a, .gallery > figure { position: relative; display: block; overflow: hidden; border-radius: var(--r-md); background: var(--teal-50); }
.gallery img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .8s var(--ease-out); }
.gallery > a:hover img { transform: scale(1.06); }
.gallery > a::after { content: ""; position: absolute; inset: 0; background: rgba(12, 52, 56, 0); transition: background-color var(--dur-2); }
.gallery > a:hover::after { background: rgba(12, 52, 56, .18); }
.gallery--featured > :first-child { grid-column: span 2; grid-row: span 2; }

/* Sticky side column (e.g. booking card next to tour details) */
.sticky-aside { position: sticky; top: calc(var(--header-h) + 1.5rem); }
.layout-aside { display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem); align-items: start; }
@media (min-width: 1000px) { .layout-aside { grid-template-columns: minmax(0, 1fr) 380px; } }

.empty-state { padding: 3rem 1.5rem; text-align: center; color: var(--c-muted); background: var(--c-surface); border: 1px dashed var(--line-strong); border-radius: var(--r-lg); }
.empty-state .icon { width: 44px; height: 44px; margin: 0 auto 1rem; color: var(--teal-400); }

/* 17 — STATS, SKILLS, STEPS =============================================== */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat { position: relative; text-align: center; padding: 1.5rem 1rem; }
.stat__icon { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto .9rem; border-radius: 50%; background: var(--teal-50); color: var(--teal-700); }
.stat__icon .icon { width: 28px; height: 28px; }
:is(.on-dark, .section--ink, .section--teal, .cta-band, .page-hero) .stat__icon { background: rgba(255, 255, 255, .08); color: var(--gold-400); }
.stat__value { display: block; font-family: var(--font-display); font-size: var(--fs-4xl); font-weight: 800; line-height: 1.15; color: var(--teal-700); direction: ltr; unicode-bidi: isolate; }
:is(.on-dark, .section--ink, .section--teal, .cta-band, .page-hero) .stat__value { color: var(--gold-400); }
.stat__label { display: block; margin-top: .35rem; color: var(--c-muted); font-weight: 700; }
.stats--divided .stat + .stat::before { content: ""; position: absolute; inset-inline-start: calc(var(--gap) / -2); top: 20%; bottom: 20%; width: 1px; background: var(--c-border); }
@media (max-width: 899.98px) { .stats--divided .stat:nth-child(odd)::before { display: none; } }

.skill + .skill { margin-top: 1.4rem; }
.skill__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .55rem; font-weight: 700; color: var(--c-heading); }
.skill__value { font-family: var(--font-display); color: var(--teal-700); direction: ltr; }
:is(.on-dark, .section--ink, .section--teal, .cta-band, .page-hero) .skill__value { color: var(--gold-400); }
.skill__track { position: relative; height: 10px; border-radius: var(--r-pill); background: var(--teal-50); overflow: visible; }
:is(.on-dark, .section--ink, .section--teal, .cta-band, .page-hero) .skill__track { background: rgba(255, 255, 255, .1); }
.skill__fill {
  position: relative; display: block; height: 100%; width: var(--value, 50%);
  border-radius: inherit; background: linear-gradient(to left, var(--teal-400), var(--teal-700));
  transition: width 1.6s var(--ease-out);
}
.skill__fill::after {
  content: ""; position: absolute; inset-inline-end: -4px; top: 50%; width: 18px; height: 18px; margin-top: -9px;
  border-radius: 50%; background: var(--gold-500); box-shadow: 0 0 0 4px #fff, var(--shadow-sm);
}
html.js .skill[data-reveal]:not(.is-visible) .skill__fill { width: 0; }

.steps { display: grid; gap: 2rem; counter-reset: step; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .steps { grid-template-columns: repeat(var(--steps, 4), minmax(0, 1fr)); } }
.step { position: relative; text-align: center; padding-inline: .5rem; }
.step__num {
  position: relative; z-index: 1;
  display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto 1.1rem;
  border-radius: 50%; background: #fff; color: var(--teal-700);
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 800;
  box-shadow: 0 0 0 8px var(--c-bg), 0 0 0 9px var(--line-strong), var(--shadow-md);
  transition: background-color var(--dur-2), color var(--dur-2);
}
.step__num .icon { width: 28px; height: 28px; }
.step:hover .step__num { background: var(--gold-500); color: var(--ink); }
.step__title { font-size: var(--fs-lg); margin-bottom: .35rem; }
.step__text { color: var(--c-muted); font-size: var(--fs-sm); line-height: 1.75; margin: 0; }
@media (min-width: 1000px) {
  .step:not(:last-child)::after {
    content: ""; position: absolute; top: 34px; inset-inline-start: calc(50% + 50px); width: calc(100% - 100px + 2rem); height: 2px;
    background: repeating-linear-gradient(to left, var(--gold-400) 0 6px, transparent 6px 13px);
  }
}
/* Vertical steps (for narrow columns / split layouts) */
.steps--vertical { grid-template-columns: 1fr !important; gap: 1.6rem; }
.steps--vertical .step { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1.1rem; text-align: start; padding: 0; }
.steps--vertical .step__num { grid-row: span 2; width: 56px; height: 56px; margin: 0; font-size: 1.25rem; box-shadow: 0 0 0 6px var(--c-bg), 0 0 0 7px var(--line-strong), var(--shadow-sm); }
.steps--vertical .step__title { margin: .7rem 0 .2rem; }
.steps--vertical .step:not(:last-child)::after {
  content: ""; position: absolute; top: 70px; bottom: -1.2rem; inset-inline-start: 27px; width: 2px; height: auto;
  background: repeating-linear-gradient(to bottom, var(--gold-400) 0 6px, transparent 6px 13px);
}
.section--white .steps--vertical .step__num { box-shadow: 0 0 0 6px #fff, 0 0 0 7px var(--line-strong), var(--shadow-sm); }
.section--white .step__num { box-shadow: 0 0 0 8px #fff, 0 0 0 9px var(--line-strong), var(--shadow-md); }

/* 18 — PILLS / FILTERS / SEARCH =========================================== */
.pills { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.pills--center { justify-content: center; }
.pill {
  display: inline-flex; align-items: center; gap: .5em;
  min-height: 44px; padding: .45em 1.2em;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: #fff; color: var(--ink);
  font-size: var(--fs-sm); font-weight: 700; line-height: 1.3;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur-2), color var(--dur-2), border-color var(--dur-2), box-shadow var(--dur-2);
}
.pill .icon { width: 1.1em; height: 1.1em; color: var(--teal-600); }
.pill:hover { border-color: var(--teal-400); color: var(--teal-800); }
.pill.is-active, .pill[aria-pressed="true"], .pill[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: var(--shadow-sm); }
.pill.is-active .icon, .pill[aria-pressed="true"] .icon, .pill[aria-selected="true"] .icon { color: var(--gold-400); }
.pill__count { display: inline-grid; place-items: center; min-width: 1.7em; height: 1.7em; padding-inline: .35em; border-radius: var(--r-pill); background: var(--teal-50); color: var(--teal-800); font-size: .8em; }
.pill.is-active .pill__count, .pill[aria-pressed="true"] .pill__count { background: rgba(255, 255, 255, .16); color: #fff; }
.pills--segmented { display: inline-flex; flex-wrap: wrap; gap: .25rem; padding: .35rem; background: #fff; border: 1px solid var(--line); border-radius: var(--r-pill); box-shadow: var(--shadow-xs); }
.pills--segmented .pill { border-color: transparent; min-height: 40px; }
.pills--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
.pills--scroll::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .pills--scroll { flex-wrap: wrap; margin-inline: 0; padding-inline: 0; } }

.toolbar { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; }
@media (min-width: 900px) { .toolbar { flex-direction: row; align-items: center; justify-content: space-between; } }
.toolbar__count { color: var(--c-muted); font-size: var(--fs-sm); }

.search-field { position: relative; min-width: min(100%, 320px); }
.search-field .icon { position: absolute; inset-inline-start: 1rem; top: 50%; width: 20px; height: 20px; margin-top: -10px; color: var(--teal-600); pointer-events: none; }
.search-field .input { padding-inline-start: 2.9rem; border-radius: var(--r-pill); }

/* 19 — ACCORDION =========================================================== */
.accordion { display: grid; gap: .8rem; }
.accordion__item {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  transition: border-color var(--dur-2), box-shadow var(--dur-2);
}
.accordion__item.is-open { border-color: var(--teal-200); box-shadow: var(--shadow-md); }
.accordion__heading { margin: 0; font-size: inherit; font-family: var(--font-body); }
.accordion__trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; padding: 1.1rem 1.35rem; text-align: start;
  font-family: var(--font-body); font-size: var(--fs-lg); font-weight: 700; line-height: 1.6; color: var(--ink);
  border-radius: var(--r-md);
}
.accordion__trigger:hover { color: var(--teal-700); }
.accordion__icon {
  position: relative; flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  background: var(--teal-50); color: var(--teal-700);
  transition: background-color var(--dur-2), color var(--dur-2), transform var(--dur-2) var(--ease-out);
}
.accordion__icon::before, .accordion__icon::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px;
  background: currentColor; border-radius: 2px; transition: transform var(--dur-2) var(--ease-out);
}
.accordion__icon::after { transform: rotate(90deg); }
.accordion__item.is-open .accordion__icon { background: var(--gold-500); color: var(--ink); transform: rotate(180deg); }
.accordion__item.is-open .accordion__icon::after { transform: rotate(0deg); }
.accordion__panel-inner { padding: 0 1.35rem 1.35rem; color: var(--muted); }
.accordion__panel-inner > :last-child { margin-bottom: 0; }
html.js .accordion__panel {
  display: grid; grid-template-rows: 0fr; visibility: hidden;
  transition: grid-template-rows var(--dur-2) var(--ease-out), visibility 0s linear var(--dur-2);
}
html.js .accordion__panel > .accordion__panel-inner { overflow: hidden; min-height: 0; padding-block-end: 0; transition: padding var(--dur-2) var(--ease-out); }
html.js .accordion__item.is-open .accordion__panel { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows var(--dur-2) var(--ease-out), visibility 0s; }
html.js .accordion__item.is-open .accordion__panel > .accordion__panel-inner { padding-block-end: 1.35rem; }

/* 20 — FORMS =============================================================== */
.form-card {
  position: relative;
  padding: clamp(1.5rem, 1rem + 2.2vw, 3rem);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-md);
}
.form-card__title { font-size: var(--fs-2xl); margin-bottom: .35rem; }
.form-card__lead { color: var(--muted); margin-bottom: 1.75rem; }
.form-grid { display: grid; gap: 1.15rem 1.25rem; }
@media (min-width: 640px) {
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field--full, .form-grid > .alert, .form-grid > .form-actions { grid-column: 1 / -1; }
}
.field { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.field__label { font-size: var(--fs-sm); font-weight: 700; color: var(--ink); }
.field__label .req { color: var(--gold-700); margin-inline-start: .15em; }
.field__hint { font-size: var(--fs-xs); color: var(--muted); }
.field__error { display: flex; align-items: center; gap: .35em; margin: 0; font-size: var(--fs-xs); font-weight: 700; color: var(--danger-700); }
.field__error:empty { display: none; }
.input, .select, .textarea {
  display: block; width: 100%; min-height: 54px;
  padding: .8rem 1.05rem;
  background: var(--sand-50);
  border: 1.5px solid var(--line-strong);
  border-radius: 14px;
  color: var(--ink);
  font-size: 1rem; line-height: 1.5;
  transition: border-color var(--dur-2), box-shadow var(--dur-2), background-color var(--dur-2);
  appearance: none; -webkit-appearance: none;
}
.input::placeholder, .textarea::placeholder { color: #7F9091; opacity: 1; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--teal-300); }
.input:focus, .select:focus, .textarea:focus, .input:focus-visible, .select:focus-visible, .textarea:focus-visible {
  outline: none; border-color: var(--teal-500); background: #fff; box-shadow: 0 0 0 4px rgba(38, 176, 178, .2);
}
.textarea { min-height: 150px; resize: vertical; }
.select {
  padding-inline-end: 2.8rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23157A7C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 18px; background-position: left 1rem center;
}
input[type="tel"].input, input[type="email"].input, input[type="url"].input, input[type="number"].input { direction: ltr; text-align: right; }
input[type="tel"].input::placeholder, input[type="email"].input::placeholder { direction: rtl; }
input[type="date"].input { min-height: 54px; }
.field.is-invalid .input, .field.is-invalid .select, .field.is-invalid .textarea,
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: var(--danger-700); background: var(--danger-50);
}
.field.is-invalid .input:focus, .field.is-invalid .select:focus, .field.is-invalid .textarea:focus { box-shadow: 0 0 0 4px rgba(180, 35, 24, .15); }
.field.is-valid .input, .field.is-valid .select, .field.is-valid .textarea { border-color: var(--success-700); }
.check { display: inline-flex; align-items: flex-start; gap: .6rem; cursor: pointer; font-size: var(--fs-sm); line-height: 1.7; }
.check input { width: 20px; height: 20px; margin: .2em 0 0; accent-color: var(--teal-700); flex-shrink: 0; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: .5rem; }
.form-note { font-size: var(--fs-xs); color: var(--muted); display: flex; align-items: center; gap: .4em; }
.form-note .icon { color: var(--teal-600); }
:is(.on-dark, .section--ink, .section--teal, .cta-band, .page-hero) .field__label { color: #fff; }
:is(.on-dark, .section--ink, .section--teal, .cta-band, .page-hero) .input, :is(.on-dark, .section--ink, .section--teal, .cta-band, .page-hero) .select, :is(.on-dark, .section--ink, .section--teal, .cta-band, .page-hero) .textarea { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .2); color: #fff; }
:is(.on-dark, .section--ink, .section--teal, .cta-band, .page-hero) .input::placeholder, :is(.on-dark, .section--ink, .section--teal, .cta-band, .page-hero) .textarea::placeholder { color: rgba(255, 255, 255, .6); }
:is(.on-dark, .section--ink, .section--teal, .cta-band, .page-hero) .select option { color: var(--ink); }

/* Inline quick-request form (e.g. inside a hero) */
.inline-form {
  display: grid; gap: .75rem; padding: .75rem;
  background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
}
.inline-form .field__label { font-size: var(--fs-xs); color: var(--muted); padding-inline-start: .25rem; }
.inline-form .input, .inline-form .select { min-height: 50px; height: 50px; padding-block: 0; background-color: var(--sand-50); border-color: transparent; }
@media (min-width: 900px) {
  .inline-form { grid-template-columns: repeat(var(--fields, 3), minmax(0, 1fr)) auto; align-items: end; border-radius: var(--r-xl); padding: .9rem .9rem .9rem 1rem; }
  .inline-form .btn { min-height: 50px; }
}

/* 21 — ALERTS ============================================================== */
.alert {
  display: flex; align-items: flex-start; gap: .8rem;
  padding: 1rem 1.2rem; border-radius: var(--r-md); border: 1px solid;
  font-size: var(--fs-sm); line-height: 1.75;
}
.alert .icon { width: 22px; height: 22px; margin-top: .15em; }
.alert__title { display: block; font-weight: 800; margin-bottom: .1rem; }
.alert--success { background: var(--success-50); border-color: var(--success-200); color: var(--success-700); }
.alert--error { background: var(--danger-50); border-color: var(--danger-200); color: var(--danger-700); }
.alert--info { background: var(--teal-50); border-color: var(--teal-200); color: var(--teal-800); }
.alert--gold { background: var(--gold-50); border-color: var(--gold-200); color: var(--gold-800); }

/* 22 — CAROUSEL (CSS scroll-snap) ========================================= */
.carousel { position: relative; --per-view: 1.15; --c-gap: var(--gap); }
@media (min-width: 640px) { .carousel { --per-view: 2.1; } }
@media (min-width: 900px) { .carousel { --per-view: 3; } }
@media (min-width: 1200px) { .carousel--4 { --per-view: 4; } }
.carousel__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.carousel__track {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--per-view) - 1) * var(--c-gap)) / var(--per-view));
  gap: var(--c-gap);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-block: .75rem 1.75rem; margin-block: -.75rem -1.75rem;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > * { scroll-snap-align: start; min-width: 0; }
.carousel--bleed .carousel__track { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
.carousel__nav { display: flex; gap: .5rem; }
.carousel__btn {
  display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%;
  background: #fff; color: var(--ink); border: 1px solid var(--line-strong);
  transition: background-color var(--dur-2), color var(--dur-2), border-color var(--dur-2), opacity var(--dur-2);
}
.carousel__btn:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: #fff; }
.carousel__btn:disabled { opacity: .35; }
:is(.on-dark, .section--ink, .section--teal, .cta-band, .page-hero) .carousel__btn { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .2); }
.carousel.is-static .carousel__nav { visibility: hidden; }

/* 23 — LIGHTBOX / VIDEO MODAL (built by main.js) =========================== */
.lightbox {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: grid; place-items: center; padding: 4.5rem 1rem 3.5rem;
  background: rgba(5, 28, 32, .92);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-2) var(--ease-out), visibility 0s linear var(--dur-2);
}
.lightbox.is-open { opacity: 1; visibility: visible; transition: opacity var(--dur-2) var(--ease-out), visibility 0s; }
.lightbox__stage { display: grid; place-items: center; max-width: 100%; }
.lightbox__figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .9rem; max-width: 100%; }
.lightbox__img {
  max-width: min(92vw, 1100px); max-height: calc(100vh - 11rem); max-height: calc(100dvh - 11rem);
  width: auto; height: auto; object-fit: contain; border-radius: var(--r-md); box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
  transform: scale(.97); transition: transform var(--dur-3) var(--ease-out), opacity var(--dur-2);
}
.lightbox.is-open .lightbox__img { transform: none; }
.lightbox__img.is-loading { opacity: .3; }
.lightbox__caption { color: rgba(255, 255, 255, .88); font-weight: 500; text-align: center; max-width: 60ch; }
.lightbox__close, .lightbox__nav {
  position: absolute; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%;
  background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(255, 255, 255, .18);
  transition: background-color var(--dur-2), color var(--dur-2);
}
.lightbox__close:hover, .lightbox__nav:hover { background: var(--gold-500); color: var(--ink); border-color: var(--gold-500); }
.lightbox__close { top: 1rem; inset-inline-end: 1rem; }
.lightbox__nav { top: 50%; margin-top: -25px; }
.lightbox__nav--prev { inset-inline-start: 1rem; }
.lightbox__nav--next { inset-inline-end: 1rem; }
.lightbox__counter { position: absolute; top: 1.6rem; inset-inline-start: 1.25rem; color: rgba(255, 255, 255, .75); font-size: var(--fs-sm); margin: 0; }
@media (max-width: 639.98px) {
  .lightbox__nav { top: auto; bottom: 1rem; margin: 0; }
}
.lightbox__video { width: min(1000px, 92vw); aspect-ratio: 16 / 9; border-radius: var(--r-md); overflow: hidden; background: #000; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.lightbox__video iframe { width: 100%; height: 100%; border: 0; }

/* 24 — FLIGHT PATH (decorative) =========================================== */
.flight-path {
  position: absolute; z-index: 0; pointer-events: none;
  width: clamp(220px, 34vw, 520px); height: auto; aspect-ratio: 620 / 220;
  color: var(--fp-color, var(--gold-400));
  overflow: visible;
}
.flight-path__line { stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: .5 10; vector-effect: non-scaling-stroke; opacity: .85; }
.flight-path__origin { fill: none; stroke: currentColor; stroke-width: 2; opacity: .7; }
.flight-path__plane { fill: currentColor; }
.flight-path--teal { --fp-color: var(--teal-500); }
.flight-path--white { --fp-color: rgba(255, 255, 255, .6); }
.flight-path--flip { transform: scaleX(-1); }
@media (max-width: 639.98px) { .flight-path:not(.flight-path--keep) { display: none; } }
.flight-path--page-hero { top: 18%; inset-inline-start: -2%; width: clamp(240px, 38vw, 560px); opacity: .55; }
.page-hero--media .flight-path--page-hero { inset-inline-start: auto; inset-inline-end: 24%; top: 8%; }
.flight-path--cta { bottom: -16%; inset-inline-end: 26%; width: clamp(260px, 34vw, 500px); opacity: .42; }
@media (max-width: 999.98px) { .flight-path--cta { inset-inline-end: -10%; bottom: auto; top: -6%; opacity: .3; } }
@media (prefers-reduced-motion: no-preference) {
  .flight-path__line { animation: dash-fly 1.6s linear infinite; }
}

/* 25 — CTA BAND & PREFOOTER ================================================ */
.cta-band {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; gap: 1.75rem; align-items: center;
  padding: clamp(2rem, 1.2rem + 3.5vw, 4rem);
  border-radius: var(--r-2xl);
  background:
    radial-gradient(600px 300px at 100% 0%, rgba(77, 192, 194, .45), transparent 65%),
    radial-gradient(500px 300px at 0% 100%, rgba(224, 169, 76, .25), transparent 60%),
    linear-gradient(125deg, var(--teal-700) 0%, var(--teal-800) 50%, var(--teal-900) 100%);
  box-shadow: var(--shadow-lg);
}
.cta-band__bg {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("../img/misc/map.png") center / 120% auto no-repeat; opacity: .08;
}
.cta-band__content { position: relative; z-index: 1; max-width: 640px; }
.cta-band__title { font-size: var(--fs-3xl); color: #fff; margin: 0; }
.cta-band__text { margin-top: .75rem; color: rgba(255, 255, 255, .84); font-size: var(--fs-lg); }
.cta-band__actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: .75rem; }
@media (max-width: 479.98px) { .cta-band__actions .btn { flex: 1 1 100%; } }
@media (min-width: 1000px) {
  .cta-band { grid-template-columns: minmax(0, 1fr) auto; gap: 3rem; }
  .cta-band__actions { flex-direction: column; min-width: 250px; }
}
.cta-band--gold { background: linear-gradient(125deg, var(--gold-400), var(--gold-500) 55%, var(--gold-600)); --c-heading: var(--ink); --c-text: var(--teal-900); --c-eyebrow: var(--teal-900); --c-focus: var(--ink); }
.cta-band--gold .cta-band__title { color: var(--ink); }
.cta-band--gold .cta-band__text { color: rgba(12, 52, 56, .85); }

.prefooter { --overlap: clamp(5rem, 4rem + 4vw, 7.5rem); position: relative; z-index: 2; margin-bottom: calc(-1 * var(--overlap)); padding-top: clamp(1rem, .5rem + 2vw, 2rem); }
.prefooter--white { background: linear-gradient(to bottom, #fff calc(100% - var(--overlap)), transparent 0); }

/* 26 — HEADER, NAV, DRAWER, FOOTER ========================================= */
.topbar { display: none; background: var(--teal-950); color: rgba(255, 255, 255, .8); font-size: var(--fs-xs); }
@media (min-width: 900px) { .topbar { display: block; } }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 44px; }
.topbar__contact { display: flex; align-items: center; gap: 1.5rem; }
.topbar a { display: inline-flex; align-items: center; gap: .45em; color: inherit; text-decoration: none; font-weight: 500; }
.topbar a:hover { color: var(--gold-300); }
.topbar .icon { color: var(--gold-400); }
.topbar__end { display: flex; align-items: center; gap: 1.25rem; }
.topbar .social__link { background: transparent; color: rgba(255, 255, 255, .8); }
.topbar .social__link:hover { background: rgba(255, 255, 255, .1); color: var(--gold-300); transform: none; }
.topbar .social__link .icon { color: inherit; }

.site-header {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(16px) saturate(1.6); -webkit-backdrop-filter: blur(16px) saturate(1.6);
  border-bottom: 1px solid rgba(12, 52, 56, .06);
  transition: box-shadow var(--dur-2) var(--ease-out), background-color var(--dur-2);
}
.site-header.is-scrolled { background: rgba(255, 255, 255, .95); box-shadow: 0 10px 30px -18px rgba(12, 52, 56, .35); }
.site-header__inner { display: flex; align-items: center; gap: 1.25rem; min-height: var(--header-h); transition: min-height var(--dur-2) var(--ease-out); }
.site-header.is-scrolled .site-header__inner { min-height: calc(var(--header-h) - 12px); }

.brand { display: inline-flex; align-items: center; gap: .9rem; flex-shrink: 0; text-decoration: none; color: var(--ink); }
.brand__logo { height: 54px; width: auto; transition: height var(--dur-2) var(--ease-out); }
@media (min-width: 1100px) { .brand__logo { height: 64px; } .site-header.is-scrolled .brand__logo { height: 54px; } }
.brand__text { display: none; flex-direction: column; padding-inline-start: .9rem; border-inline-start: 1px solid var(--line-strong); line-height: 1.35; }
.brand__en { font-family: var(--font-display); font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-700); direction: ltr; text-align: right; }
.brand__ar { font-size: .875rem; font-weight: 700; color: var(--gold-700); }
@media (min-width: 1280px) { .brand__text { display: flex; } }

.main-nav { display: none; margin-inline: auto; }
@media (min-width: 1100px) { .main-nav { display: block; } }
.main-nav__list { display: flex; align-items: center; gap: .15rem; }
.main-nav__link {
  position: relative; display: block; padding: .55rem .85rem;
  color: var(--ink); font-weight: 700; font-size: 1rem; text-decoration: none; border-radius: var(--r-pill);
  transition: color var(--dur-2), background-color var(--dur-2);
}
.main-nav__link::after {
  content: ""; position: absolute; left: 50%; bottom: .1rem; width: 6px; height: 6px; margin-left: -3px;
  border-radius: 50%; background: var(--gold-500); transform: scale(0); transition: transform var(--dur-2) var(--ease-out);
}
.main-nav__link:hover { color: var(--teal-700); background: var(--teal-50); }
.main-nav__link.is-active { color: var(--teal-700); }
.main-nav__link.is-active::after { transform: scale(1); }
@media (min-width: 1100px) and (max-width: 1239.98px) { .main-nav__link { padding-inline: .6rem; font-size: .9375rem; } }

.site-header__actions { display: flex; align-items: center; gap: .6rem; margin-inline-start: auto; }
@media (min-width: 1100px) { .site-header__actions { margin-inline-start: 0; } }
.header-cta { min-height: 46px; padding: .6em 1.3em; }
.header-cta .icon { width: 1.3em; height: 1.3em; }
@media (max-width: 519.98px) {
  .header-cta { width: 46px; padding: 0; }
  .header-cta__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}
.burger {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: var(--teal-50); color: var(--ink); transition: background-color var(--dur-2), color var(--dur-2);
}
.burger:hover { background: var(--ink); color: #fff; }
.burger .icon { width: 24px; height: 24px; }
@media (min-width: 1100px) { .burger { display: none; } }

.drawer { position: fixed; inset: 0; z-index: var(--z-drawer); visibility: hidden; transition: visibility 0s linear .4s; }
.drawer.is-open { visibility: visible; transition: visibility 0s; }
.drawer__backdrop { position: absolute; inset: 0; background: rgba(7, 37, 42, .55); backdrop-filter: blur(3px); opacity: 0; transition: opacity .4s var(--ease-out); }
.drawer.is-open .drawer__backdrop { opacity: 1; }
.drawer__panel {
  position: absolute; top: 0; bottom: 0; inset-inline-end: 0;
  display: flex; flex-direction: column; gap: 1.25rem;
  width: min(380px, 88vw); padding: 1.1rem 1.25rem 1.5rem;
  background: var(--sand-50) url("../img/misc/map.png") center 115% / 180% auto no-repeat;
  box-shadow: var(--shadow-lg); overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(-104%); transition: transform .4s var(--ease-out);
}
[dir="ltr"] .drawer__panel { transform: translateX(104%); }
.drawer.is-open .drawer__panel { transform: none; }
.drawer__panel:focus { outline: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.drawer__head .brand__logo { height: 52px; }
.drawer__close { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }
.drawer__close:hover { background: var(--ink); color: #fff; }
.drawer__nav ul { display: grid; gap: .2rem; margin: 0; padding: 0; list-style: none; }
.drawer__link {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .8rem 1rem; border-radius: var(--r-md);
  font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; color: var(--ink); text-decoration: none;
  transition: background-color var(--dur-2), color var(--dur-2);
}
.drawer__link .icon { color: var(--teal-400); }
.drawer__link:hover { background: #fff; color: var(--teal-700); }
.drawer__link.is-active { background: var(--ink); color: #fff; }
.drawer__link.is-active .icon { color: var(--gold-400); }
.drawer__contact { display: grid; gap: .6rem; margin-top: auto; }
.drawer__mail { display: inline-flex; align-items: center; justify-content: center; gap: .45em; padding: .4rem; font-weight: 700; color: var(--teal-700); text-decoration: none; font-size: var(--fs-sm); }
.drawer__foot { display: flex; justify-content: center; padding-top: 1rem; border-top: 1px solid var(--line); }

.site-footer {
  position: relative; isolation: isolate; overflow: clip;
  padding-top: calc(clamp(5rem, 4rem + 4vw, 7.5rem) + clamp(3rem, 2rem + 3vw, 4.5rem));
  background: linear-gradient(180deg, var(--teal-900) 0%, var(--teal-950) 100%);
  color: rgba(255, 255, 255, .74);
  font-size: var(--fs-sm);
}
.site-footer--plain { padding-top: clamp(3.5rem, 2.5rem + 3vw, 5rem); }
.site-footer__glow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(700px 360px at 85% 0%, rgba(38, 176, 178, .16), transparent 70%),
    url("../img/misc/map.png") 50% 70% / min(1300px, 160%) auto no-repeat;
  opacity: 1;
}
.site-footer__glow::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 52, 56, .93), rgba(7, 37, 42, .95)); }
.site-footer__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 1.5rem; padding-bottom: 3rem; }
.footer-brand, .footer-col--contact { grid-column: 1 / -1; }
@media (min-width: 640px) { .footer-brand, .footer-col--contact { grid-column: auto; } .site-footer__grid { gap: 2.5rem 2rem; } }
@media (min-width: 640px) and (max-width: 1099.98px) { .footer-brand { grid-column: 1 / -1; } .footer-brand__text { max-width: 60ch; } }
@media (min-width: 1100px) { .site-footer__grid { grid-template-columns: 1.35fr .8fr .9fr 1.35fr; gap: 3rem; } }
.footer-brand__badge {
  display: inline-grid; place-items: center; padding: .7rem .9rem; margin-bottom: 1.25rem;
  background: #fff; border-radius: var(--r-lg); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .5);
}
.footer-brand__badge img { height: 78px; width: auto; }
.footer-brand__text { max-width: 36ch; margin-bottom: 1.25rem; line-height: 1.9; }
.footer-col__title {
  position: relative; margin-bottom: 1.25rem; padding-bottom: .75rem;
  font-size: var(--fs-lg); color: #fff;
}
.footer-col__title::after { content: ""; position: absolute; bottom: 0; inset-inline-start: 0; width: 36px; height: 3px; border-radius: 3px; background: linear-gradient(to left, var(--gold-500), var(--gold-300)); }
.footer-links { display: grid; gap: .55rem; }
.footer-links a { position: relative; display: inline-flex; align-items: center; gap: .5rem; color: rgba(255, 255, 255, .74); text-decoration: none; transition: color var(--dur-2), transform var(--dur-2) var(--ease-out); }
.footer-links a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--teal-500); transition: background-color var(--dur-2); }
.footer-links a:hover { color: #fff; transform: translateX(-4px); }
.footer-links a:hover::before { background: var(--gold-400); }
.footer-contact { display: grid; gap: 1rem; }
.footer-contact li { display: flex; align-items: flex-start; gap: .85rem; }
.footer-contact__icon { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, .07); color: var(--gold-400); }
.footer-contact__icon .icon { width: 19px; height: 19px; }
.footer-contact__label { display: block; font-size: var(--fs-xs); color: rgba(255, 255, 255, .55); line-height: 1.5; }
.footer-contact a { color: #fff; font-weight: 700; text-decoration: none; overflow-wrap: anywhere; line-height: 1.7; }
.footer-contact a:hover { color: var(--gold-300); }
.footer-contact__sep { margin-inline: .45rem; color: rgba(255, 255, 255, .4); }
.site-footer__bottom { border-top: 1px solid rgba(255, 255, 255, .1); }
.site-footer__bottom-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.5rem; padding-block: 1.25rem; padding-inline-end: calc(var(--gutter) + 64px); }
.site-footer__copy, .site-footer__en { margin: 0; font-size: var(--fs-xs); }
.site-footer__en { letter-spacing: .14em; color: rgba(255, 255, 255, .45); font-weight: 700; font-family: var(--font-display); }

/* 27 — FLOATING ACTIONS ==================================================== */
.floating-actions {
  position: fixed; z-index: var(--z-float);
  inset-inline-end: max(16px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; gap: .7rem;
  pointer-events: none;
}
.floating-actions > * { pointer-events: auto; }
.wa-float {
  position: relative; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%;
  background: linear-gradient(145deg, #2EE071, var(--wa-green) 45%, #1DA851); color: #fff;
  box-shadow: 0 12px 28px -8px rgba(18, 140, 75, .65), 0 2px 6px rgba(0, 0, 0, .12);
  text-decoration: none; transition: transform var(--dur-2) var(--ease-out);
}
.wa-float .icon { width: 30px; height: 30px; }
.wa-float:hover { transform: scale(1.07); color: #fff; }
.wa-float__ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--wa-green); animation: pulse-ring 2.2s var(--ease-out) infinite; pointer-events: none; }
.wa-float__label {
  position: absolute; inset-inline-start: calc(100% + 12px); top: 50%;
  padding: .4rem .9rem; border-radius: var(--r-pill); background: var(--ink); color: #fff;
  font-size: var(--fs-xs); font-weight: 700; white-space: nowrap;
  opacity: 0; transform: translate(-6px, -50%); transition: opacity var(--dur-2), transform var(--dur-2) var(--ease-out); pointer-events: none;
}
@media (hover: hover) and (min-width: 900px) {
  .wa-float:hover .wa-float__label, .wa-float:focus-visible .wa-float__label { opacity: 1; transform: translate(0, -50%); }
}
.back-to-top {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: #fff; color: var(--ink); box-shadow: var(--shadow-md); border: 1px solid var(--line);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity var(--dur-2), transform var(--dur-2) var(--ease-out), visibility 0s linear var(--dur-2), background-color var(--dur-2), color var(--dur-2);
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; transition: opacity var(--dur-2), transform var(--dur-2) var(--ease-out), visibility 0s, background-color var(--dur-2), color var(--dur-2); }
.back-to-top:hover { background: var(--ink); color: #fff; }
.back-to-top .icon { width: 20px; height: 20px; }

/* 28 — REVEAL & MOTION ===================================================== */
html.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity .85s var(--ease-out), transform .85s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}
html.js [data-reveal="fade"] { transform: none; }
html.js [data-reveal="zoom"] { transform: scale(.94); }
html.js [data-reveal="start"] { transform: translate3d(36px, 0, 0); }
html.js [data-reveal="end"] { transform: translate3d(-36px, 0, 0); }
html.js [data-reveal].is-visible { opacity: 1; transform: none; }

@keyframes pulse-ring { 0% { transform: scale(1); opacity: .75; } 100% { transform: scale(1.65); opacity: 0; } }
@keyframes float-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes dash-fly { to { stroke-dashoffset: -21; } }
@keyframes fade-in-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.is-filter-in { animation: fade-in-up .45s var(--ease-out) both; }
.float-y { animation: float-y 6s var(--ease-in-out) infinite; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  html.js [data-reveal] { opacity: 1; transform: none; }
  .wa-float__ring, .play-btn::before, .play-btn::after { display: none; }
}

/* 29 — PRINT =============================================================== */
@media print {
  .topbar, .site-header, .drawer, .floating-actions, .prefooter, .flight-path { display: none !important; }
  body { background: #fff; }
}