@import url("https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;600;700;800;900&display=swap");
:root {
  --black: #080a0b;
  --panel: #111315;
  --gold: #c68b2c;
  --gold2: #e2b65f;
  --cream: #f3eee5;
  --muted: #aaa9a4;
  --line: #292b2d;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--black);
  color: var(--cream);
  font-family: "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.7;
}
a {
  color: inherit;
  text-decoration: none;
}
.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 10;
  height: 108px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(24px, 7vw, 110px);
  border-bottom: 1px solid #ffffff22;
  background: linear-gradient(180deg, #080a0bd9, transparent);
  backdrop-filter: blur(8px);
}
.logo-wrap,
.footer-logo {
  display: inline-flex;
  padding: 0;
  background: transparent;
  filter: drop-shadow(0 8px 22px #0009);
}
.site-header img,
footer img {
  display: block;
  width: 235px;
  height: auto;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  background: var(--gold);
  color: #120d06;
  padding: 17px 25px;
  font-weight: 800;
  font-size: 18px;
  cursor: pointer;
  transition: 0.25s;
}
.button:hover {
  background: var(--gold2);
  transform: translateY(-2px);
}
.button.mini {
  padding: 15px 23px;
  font-size: 16px;
}
.hero {
  height: 100vh;
  min-height: 760px;
  max-height: 960px;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero-image {
  position: absolute;
  inset: 0;
  background: url("nasama-dubai-hero.png") center/cover;
}
.shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 74% 47%, #c68b2c24, transparent 32%),
    linear-gradient(
      90deg,
      transparent 0%,
      #080a0b55 42%,
      #080a0bed 70%,
      #080a0b 100%
    ),
    linear-gradient(0deg, #080a0b 0%, transparent 32%);
}
.hero-content {
  position: relative;
  width: min(790px, 86vw);
  margin-inline-start: clamp(24px, 8vw, 130px);
  padding-top: 70px;
  padding-inline-start: clamp(22px, 3vw, 42px);
  border-inline-start: 3px solid var(--gold);
}
.eyebrow,
.label {
  color: var(--gold2);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.07em;
  display: flex;
  align-items: center;
  gap: 9px;
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
h1 {
  font-size: clamp(54px, 6.3vw, 94px);
  line-height: 1.12;
  margin: 28px 0;
  letter-spacing: -0.04em;
  font-family: "Tajawal", "Segoe UI", Tahoma, sans-serif;
  font-weight: 800;
}
h1 em {
  color: var(--gold2);
  font-family: "Tajawal", "Segoe UI", Tahoma, sans-serif;
  font-style: normal;
  font-weight: 400;
  text-shadow: 0 0 40px #c68b2c55;
}
.lead {
  max-width: 690px;
  color: #d2cec7;
  font-size: clamp(20px, 1.65vw, 25px);
  line-height: 1.9;
}
.actions {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 38px;
}
.under {
  border-bottom: 1px solid #a58e68;
  padding-bottom: 6px;
}
.trust {
  margin-top: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #b6b3ac;
  font-size: 16px;
  flex-wrap: wrap;
}
.trust svg {
  width: 19px;
  color: var(--gold);
}
.trust i {
  width: 1px;
  height: 18px;
  background: #ffffff38;
  margin: 0 8px;
}
.section {
  padding: 128px clamp(24px, 8vw, 130px);
}
.about {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(48px, 9vw, 140px);
  align-items: center;
}
.label {
  margin-bottom: 22px;
}
.section h2,
.booking h2 {
  font-size: clamp(43px, 4.7vw, 68px);
  line-height: 1.35;
  letter-spacing: -0.03em;
  font-family: "Tajawal", "Segoe UI", Tahoma, sans-serif;
  font-weight: 800;
}
.about-copy {
  border-inline-start: 1px solid var(--gold);
  padding-inline-start: 34px;
}
.about-copy p {
  color: #bbb9b3;
  font-size: 21px;
  line-height: 1.95;
}
.services {
  padding-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.services article {
  background: linear-gradient(145deg, #181a1c, #0f1112);
  padding: 48px 40px;
  min-height: 360px;
  position: relative;
  border: 1px solid #323336;
  box-shadow: 0 24px 70px #0005;
}
.services article.featured {
  background: linear-gradient(145deg, #2b2215, #141311 72%);
  transform: translateY(-18px);
  border: 1px solid var(--gold);
}
.services article > b {
  position: absolute;
  inset-inline-end: 28px;
  top: 25px;
  color: #676762;
  font-family: Georgia;
}
.services article > svg {
  color: var(--gold);
  width: 31px;
  height: 31px;
  margin: 30px 0;
}
.services h3 {
  font-size: 32px;
}
.services p {
  color: #aaa9a3;
  line-height: 1.9;
  font-size: 18px;
}
.process {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  background: #0e1011;
}
.process ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
.process li {
  display: flex;
  gap: 22px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}
.process li > b {
  font-family: Georgia;
  color: var(--gold);
  font-size: 22px;
}
.process li span {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.process strong {
  font-size: 23px;
}
.process small {
  font-size: 18px;
  color: #969691;
}
.booking {
  padding: 105px clamp(24px, 8vw, 130px);
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(55px, 8vw, 120px);
  background: linear-gradient(135deg, #181612, #0c0e0f 60%);
  border-top: 1px solid #302b23;
}
.booking-copy > p:not(.label) {
  color: #afaca6;
  font-size: 21px;
  line-height: 1.9;
}
.privacy {
  margin-top: 35px;
  color: #9f9e98;
  display: flex;
  gap: 12px;
  line-height: 1.7;
}
.privacy svg {
  color: var(--gold);
  flex: none;
}
form {
  display: grid;
  gap: 20px;
  background: #111315;
  border: 1px solid #30302c;
  padding: clamp(24px, 4vw, 44px);
  box-shadow: 0 30px 80px #0008;
}
form label {
  display: grid;
  gap: 9px;
  color: #d8d4cc;
  font-size: 17px;
  font-weight: 700;
}
form label small {
  color: #777;
  font-weight: 400;
}
input,
select,
textarea {
  width: 100%;
  background: #0b0d0e;
  border: 1px solid #343536;
  color: #f2eee5;
  padding: 17px 18px;
  font: inherit;
  outline: none;
  border-radius: 0;
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px #c68b2c22;
}
.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.consent {
  grid-template-columns: auto 1fr !important;
  align-items: start;
  font-weight: 400 !important;
  line-height: 1.6;
}
.consent input {
  width: 17px;
  height: 17px;
  accent-color: var(--gold);
  margin-top: 3px;
}
.consent a {
  color: var(--gold2);
  text-decoration: underline;
}
.submit {
  width: 100%;
  font-size: 18px;
}
.submit:disabled {
  opacity: 0.65;
  cursor: wait;
}
.error {
  color: #ff8d87;
  text-align: center;
  margin: 0;
}
.success {
  text-align: center;
  padding: 45px 20px;
}
.success > div {
  width: 65px;
  height: 65px;
  margin: 0 auto 22px;
  background: var(--gold);
  color: #111;
  display: grid;
  place-items: center;
  border-radius: 50%;
}
.success h3 {
  font-size: 28px;
}
.success p {
  color: #aaa;
  line-height: 1.8;
}
.success button {
  border: 0;
  background: none;
  color: var(--gold2);
  cursor: pointer;
  text-decoration: underline;
}
footer {
  padding: 42px clamp(24px, 8vw, 130px);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  border-top: 1px solid var(--line);
  color: #858580;
}
footer p {
  text-align: center;
  margin: 0;
}
footer > div {
  display: flex;
  flex-direction: column;
  gap: 7px;
  text-align: end;
  color: #bbb;
}
@media (max-width: 850px) {
  .hero-image {
    background-position: 38% center;
  }
  .shade {
    background: linear-gradient(90deg, #080a0b22, #080a0bee 60%, #080a0b);
  }
  .about,
  .process,
  .booking {
    grid-template-columns: 1fr;
  }
  .services {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .services article.featured {
    transform: none;
  }
  .section,
  .booking {
    padding-block: 78px;
  }
  .process {
    gap: 30px;
  }
}
@media (max-width: 600px) {
  .site-header {
    height: 78px;
  }
  .site-header img {
    width: 125px;
  }
  .header-actions {
    gap: 8px;
  }
  .logo-wrap {
    padding: 0;
  }
  .button.mini {
    padding: 11px 12px;
    font-size: 14px;
    gap: 6px;
  }
  .site-header {
    padding: 0 16px;
  }
  .site-header .button.mini {
    display: none;
  }
  .lang button {
    padding: 11px 10px;
    font-size: 13px;
  }
  .hero {
    min-height: 820px;
    align-items: flex-end;
    padding-bottom: 55px;
  }
  .hero-content {
    margin: 0 22px;
    width: auto;
    padding-inline-start: 20px;
  }
  h1 {
    font-size: clamp(48px, 14vw, 64px);
  }
  .lead {
    font-size: 19px;
  }
  .eyebrow,
  .label {
    font-size: 16px;
  }
  .actions {
    align-items: stretch;
    flex-direction: column;
    gap: 18px;
  }
  .under {
    align-self: center;
  }
  .trust {
    margin-top: 28px;
  }
  .two {
    grid-template-columns: 1fr;
  }
  footer {
    grid-template-columns: 1fr;
    gap: 25px;
    text-align: center;
  }
  footer > div {
    text-align: center;
    align-items: center;
  }
  footer img {
    margin: auto;
  }
}

[hidden] { display: none !important; }
.icons { position: absolute; width: 0; height: 0; overflow: hidden; }
svg:not(.icons) { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.eyebrow svg { width: 16px; height: 16px; }
.phone-row { display: grid; grid-template-columns: minmax(115px, 1fr) 3fr; gap: 16px; }
.honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
@media (max-width:600px) { .phone-row { grid-template-columns: minmax(105px, 1fr) 2fr; } }

/* Language switcher */
.header-actions { display: flex; align-items: center; gap: 14px; }
.lang { display: flex; border: 1px solid #ffffff38; }
.lang button { border: 0; background: none; color: #cfcac1; font: inherit; font-size: 14px; font-weight: 800; line-height: 1; padding: 13px 12px; cursor: pointer; transition: 0.2s; }
.lang button + button { border-inline-start: 1px solid #ffffff24; }
.lang button:hover { color: var(--gold2); }
.lang button[aria-pressed="true"] { background: var(--gold); color: #120d06; }

/* Date & time picker: two fields that open a pop-up panel */
.field { display: grid; gap: 9px; align-content: start; }
.pop { position: relative; }
.field-label { color: #d8d4cc; font-size: 17px; font-weight: 700; }
.field-note { margin: 0 0 10px; color: #8f8d87; font-size: 13px; line-height: 1.6; }
.field-note strong { color: var(--gold2); }
.field-error { margin: 0; color: #ff8d87; font-size: 15px; }
.pop-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #0b0d0e; border: 1px solid #343536; color: #f2eee5; padding: 17px 18px; font: inherit; text-align: start; cursor: pointer; }
.pop-trigger:focus-visible, .pop-trigger[aria-expanded="true"] { border-color: var(--gold); box-shadow: 0 0 0 2px #c68b2c22; outline: none; }
.pop-trigger .placeholder { color: #77766f; }
.pop-trigger svg { color: var(--gold); width: 20px; height: 20px; }
.popover { position: absolute; top: calc(100% + 6px); inset-inline-start: 0; z-index: 30; width: min(330px, calc(100vw - 48px)); background: var(--panel); border: 1px solid #3a3a36; box-shadow: 0 24px 60px #000c; padding: 14px; }
.popover-end { inset-inline-start: auto; inset-inline-end: 0; }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.cal-head strong { font-size: 16px; }
.cal-nav { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #343536; background: none; color: var(--cream); cursor: pointer; }
.cal-nav:hover:not(:disabled) { border-color: var(--gold); color: var(--gold2); }
.cal-nav:disabled { opacity: 0.3; cursor: default; }
.cal-nav svg { width: 16px; height: 16px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; }
.cal-wd { color: #8f8d87; font-size: 11px; font-weight: 700; padding: 2px 0 4px; }
.cal-day { height: 36px; border: 1px solid transparent; background: #17191b; color: var(--cream); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; padding: 0; }
.cal-day:hover:not(:disabled) { border-color: var(--gold); }
.cal-day.today { border-color: #ffffff40; }
.cal-day:disabled { background: none; color: #45464a; font-weight: 400; cursor: default; }
.cal-day[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: #120d06; }
.slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-height: 300px; overflow-y: auto; }
.slot { display: grid; justify-items: center; gap: 1px; padding: 8px 4px; border: 1px solid #343536; background: #0b0d0e; color: var(--cream); font: inherit; font-size: 15px; font-weight: 800; line-height: 1.25; cursor: pointer; direction: ltr; }
.slot small { color: #8f8d87; font-size: 11px; font-weight: 500; }
.slot:hover:not(:disabled) { border-color: var(--gold); }
.slot:disabled { color: #45464a; text-decoration: line-through; cursor: default; }
.slot:disabled small { color: #45464a; }
.slot[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: #120d06; }
.slot[aria-pressed="true"] small { color: #4a3510; }
.slots-empty { grid-column: 1 / -1; margin: 0; padding: 14px; border: 1px dashed #343536; color: #8f8d87; font-size: 14px; text-align: center; }
.arr-back { transform: scaleX(-1); }
[dir="ltr"] .arr-back { transform: none; }
@media (max-width: 600px) {
  .popover, .popover-end { inset-inline: 0; width: auto; }
}

/* Left-to-right languages (English, French, Turkish) */
[dir="ltr"] .arr { transform: scaleX(-1); }
[dir="ltr"] .shade {
  background:
    radial-gradient(circle at 26% 47%, #c68b2c24, transparent 32%),
    linear-gradient(270deg, transparent 0%, #080a0b55 42%, #080a0bed 70%, #080a0b 100%),
    linear-gradient(0deg, #080a0b 0%, transparent 32%);
}
[dir="ltr"] h1, [dir="ltr"] .section h2, [dir="ltr"] .booking h2 { letter-spacing: -0.02em; }
[dir="ltr"] h1 { font-size: clamp(44px, 4.6vw, 70px); }
[dir="ltr"] .section h2, [dir="ltr"] .booking h2 { font-size: clamp(36px, 3.8vw, 56px); }
@media (max-width: 850px) {
  [dir="ltr"] .shade { background: linear-gradient(270deg, #080a0b22, #080a0bee 60%, #080a0b); }
}
@media (max-width: 600px) {
  [dir="ltr"] h1 { font-size: clamp(36px, 10vw, 48px); }
  [dir="ltr"] .section h2, [dir="ltr"] .booking h2 { font-size: clamp(32px, 8.5vw, 40px); }
}