/* ============================================================
   JET Solution — Dubai premium design system
   Built around the gold-foil JET Solution logo (logo-home@2x.png)
   Deep warm black surfaces · champagne/foil gold · ivory type
   Typography: Cormorant Garamond (display) + Jost (body)
   ============================================================ */

:root {
  --black: #100e0b;        /* page background */
  --black-2: #17140f;      /* alternating sections */
  --card: #1e1a14;         /* raised surfaces */
  --gold: #d0b060;         /* logo foil mid tone */
  --gold-light: #e4c98a;   /* foil highlight */
  --gold-deep: #a9853f;    /* foil shadow */
  --ivory: #f0e9da;        /* headings */
  --body: #c9c0ae;         /* body text */
  --muted: #8d8471;
  --white: #ffffff;
  --input-bg: #1e1a14;
  --input-text: #f0e9da;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Jost", "Segoe UI", Arial, sans-serif;
}

/* ---------- Light theme ---------- */
:root[data-theme="light"] {
  --black: #f6f3ec;        /* page background */
  --black-2: #ede7d9;      /* alternating sections */
  --ivory: #1a1610;        /* headings turn dark */
  --body: #4a4438;
  --muted: #877e6c;
  --gold: #a9853f;         /* deeper gold for contrast on light */
  --gold-light: #c0a062;
  --gold-deep: #8a6c30;
  --input-bg: #ffffff;
  --input-text: #2a2620;
}

body, header, footer, input, select, textarea {
  transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 17px;
  color: var(--body);
  background: var(--black);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

a { color: var(--gold); text-decoration: none; transition: color .25s; }
a:hover { color: var(--gold-light); }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--ivory);
  line-height: 1.15;
}

h1 { font-size: clamp(2.6rem, 6vw, 4.5rem); letter-spacing: 0.02em; }
h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
h3 { font-size: 1.35rem; }

p { max-width: 68ch; margin-left: auto; margin-right: auto; }

/* thin gold rule utility (used under titles) */
.section-title::after,
.hero h1::after {
  content: "";
  display: block;
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-light), var(--gold-deep));
  margin: 1.5rem auto 0;
}

.hero h1::after {
  background: linear-gradient(90deg, #a9853f, #e4c98a, #a9853f); /* fixed: hero always dark */
}

/* ============ Header / navigation ============ */
header {
  background: rgba(16, 14, 11, 0.92);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid rgba(208, 176, 96, 0.28);
}

.nav-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 86px;
  display: flex;
  align-items: center;
}

header nav { margin-left: auto; }

/* ---------- Theme switcher ---------- */
.theme-toggle {
  margin-left: 1.8rem;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid rgba(208, 176, 96, 0.55);
  background: transparent;
  color: var(--gold);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .3s, color .3s;
}

.theme-toggle:hover { background: var(--gold); color: var(--black); }

.theme-toggle svg { width: 17px; height: 17px; display: block; }

.theme-toggle .i-moon { display: none; }
:root[data-theme="light"] .theme-toggle .i-sun { display: none; }
:root[data-theme="light"] .theme-toggle .i-moon { display: block; }

.brand img { height: 46px; width: auto; display: block; }

nav ul {
  list-style: none;
  display: flex;
  gap: 2.1rem;
  align-items: center;
}

nav a {
  font-family: var(--sans);
  font-weight: 400;
  color: var(--ivory);
  text-transform: uppercase;
  font-size: 0.76rem;
  letter-spacing: 0.24em;
  padding: 0.4rem 0;
  border-bottom: 1px solid transparent;
  transition: color .25s, border-color .25s;
}

nav a:hover { color: var(--gold); }
nav a.active { color: var(--gold); border-bottom-color: var(--gold); }

/* --- Hamburger (mobile) --- */
.nav-toggle { display: none; }

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  cursor: pointer;
  z-index: 1002;
}

.hamburger span {
  display: block;
  width: 26px;
  height: 1.5px;
  background: var(--gold);
  transition: transform .3s, opacity .3s;
}

@media (max-width: 1023px) {
  .hamburger { display: flex; }

  /* backdrop-filter would make the header a containing block, which
     traps the fixed-position menu inside the 86px header bar — so it
     is disabled on mobile and the header gets a solid background. */
  header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: #100e0b;
  }

  nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: #100e0b;
    transform: translateX(100%);
    transition: transform .35s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1001;
  }

  nav ul {
    flex-direction: column;
    gap: 1.5rem;
    text-align: center;
  }

  nav a {
    font-family: var(--serif);
    font-size: 1.7rem;
    text-transform: none;
    letter-spacing: 0.05em;
    font-weight: 500;
    color: var(--ivory);
  }

  nav a.active { color: var(--gold); }

  .nav-toggle:checked ~ nav { transform: translateX(0); }

  /* lock page scroll while the menu is open */
  body:has(.nav-toggle:checked) { overflow: hidden; }

  :root[data-theme="light"] header,
  :root[data-theme="light"] nav { background: #f6f3ec; }

  .hamburger { order: 2; }
  .theme-toggle { margin-left: auto; margin-right: 1rem; }
  .nav-toggle:checked ~ .hamburger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .nav-toggle:checked ~ .hamburger span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .hamburger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
}

/* light-theme surface overrides.
   NOTE: heroes and .bg-cover photo strips deliberately stay DARK in
   light mode — a light veil washed the photos out completely and the
   headings became unreadable. They use fixed light text colours. */
:root[data-theme="light"] header {
  background: rgba(246, 243, 236, 0.96);
  border-bottom-color: rgba(169, 133, 63, 0.4);
}

:root[data-theme="light"] footer {
  background: #ece6d8;
  border-top-color: rgba(169, 133, 63, 0.45);
}

:root[data-theme="light"] footer .legal { border-top-color: rgba(26, 22, 16, 0.18); }

/* ============ Hero ============ */
.hero {
  min-height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-size: cover;
  background-position: center;
  position: relative;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16, 14, 11, 0.82) 0%, rgba(16, 14, 11, 0.62) 50%, rgba(16, 14, 11, 0.92) 100%);
}

.hero > div {
  position: relative;
  padding: 5rem 1.5rem;
  max-width: 860px;
}

.hero h1 { color: #f0e9da; font-weight: 400; } /* fixed: hero stays dark in both themes */

.hero p.tagline {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: #e4c98a; /* fixed: hero stays dark in both themes */
  margin: 1.8rem auto 2.8rem;
}

.hero img.hero-logo {
  width: min(300px, 64vw);
  height: auto;
  margin-bottom: 2.6rem;
  filter: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.45));
}

.hero.small { min-height: 54vh; }
.hero.small h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }

/* ============ Buttons ============ */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 400;
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
  padding: 0.95rem 3rem;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  font-size: 0.78rem;
  cursor: pointer;
  transition: background .3s, color .3s;
}

.btn:hover { background: var(--gold); color: var(--black); }

.btn.outline { border-color: rgba(208, 176, 96, 0.6); }

/* buttons on always-dark surfaces keep foil gold in both themes */
.hero .btn, .bg-cover .btn {
  color: #d0b060;
  border-color: #d0b060;
}

.hero .btn:hover, .bg-cover .btn:hover {
  background: #d0b060;
  color: #100e0b;
}

/* ============ Sections ============ */
section { padding: 6.5rem 1.5rem; }

section:nth-of-type(even) { background: var(--black-2); }

.container { max-width: 1240px; margin: 0 auto; }
.center { text-align: center; }

.section-title { text-align: center; margin-bottom: 1.8rem; }

section .center p { margin-bottom: 0.6rem; }

/* photo strips keep a deep warm veil so gold and ivory read cleanly */
.bg-cover {
  background-size: cover;
  background-position: center;
  position: relative;
  color: #c9c0ae; /* fixed: dark strips keep light text in both themes */
}

/* headings on dark strips stay light in BOTH themes
   (Basic Services, Partners, Tell Us More About Your Specifications!) */
.bg-cover h1, .bg-cover h2, .bg-cover h3,
.on-dark h1, .on-dark h2, .on-dark h3 {
  color: #f0e9da;
}

.bg-cover .section-title::after {
  background: linear-gradient(90deg, #a9853f, #e4c98a, #a9853f); /* fixed foil tones */
}

.bg-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(16, 14, 11, 0.92) 0%, rgba(30, 26, 20, 0.88) 100%);
}

.bg-cover .container { position: relative; }

/* ============ Service cards ============ */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.4rem;
  margin-top: 3rem;
}

.card {
  background: #1e1a14;
  color: #c9c0ae;
  padding: 3rem 1.8rem 2.6rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  border: 1px solid rgba(208, 176, 96, 0.22);
  border-top: 2px solid var(--gold);
  transition: transform .3s, border-color .3s;
}

.card:hover { transform: translateY(-6px); border-color: rgba(208, 176, 96, 0.5); }

.card img { height: 64px; width: auto; }

.card h3 {
  color: #d0b060;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.24em;
}

.card p { flex: 1; font-size: 0.95rem; line-height: 1.7; }

/* ============ Stats ============ */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2.5rem;
  text-align: center;
}

.stats .num {
  font-family: var(--serif);
  font-size: 4.2rem;
  font-weight: 500;
  line-height: 1;
  background: linear-gradient(180deg, #e4c98a 0%, #d0b060 45%, #a9853f 100%); /* fixed foil tones */
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.stats .label {
  margin-top: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  font-size: 0.78rem;
  color: #f0e9da;
}

/* ============ Services list ============ */
ul.services {
  list-style: none;
  margin: 2.2rem 0;
  display: inline-block;
  text-align: left;
}

ul.services li {
  padding: 0.45rem 0 0.45rem 2rem;
  position: relative;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.88rem;
  color: #f0e9da;
}

ul.services li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 20px;
  height: 1px;
  background: var(--gold);
}

/* ============ Partners ============ */
.partner-logos {
  display: flex;
  gap: 3.5rem;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 3rem;
}

.partner-logos img {
  max-height: 56px;
  width: auto;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s ease, transform .8s ease, filter .35s ease;
}

/* staggered entrance once scrolled into view (JS adds .in-view) */
.partner-logos.in-view img { opacity: 0.9; transform: translateY(0); }
.partner-logos.in-view img:nth-child(1) { transition-delay: 0s, 0s, 0s; }
.partner-logos.in-view img:nth-child(2) { transition-delay: .18s, .18s, 0s; }
.partner-logos.in-view img:nth-child(3) { transition-delay: .36s, .36s, 0s; }

/* gentle perpetual float, offset per logo */
@keyframes partner-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}

.partner-logos.in-view img { animation: partner-float 6s ease-in-out infinite; }
.partner-logos.in-view img:nth-child(2) { animation-delay: 2s; }
.partner-logos.in-view img:nth-child(3) { animation-delay: 4s; }

/* hover: glow gold */
.partner-logos img:hover {
  opacity: 1;
  filter: sepia(1) saturate(2.2) hue-rotate(-8deg) brightness(1.05)
          drop-shadow(0 0 14px rgba(208, 176, 96, 0.35));
}

/* light theme: the ivory logo art would vanish on light sections
   (dark .bg-cover strips are unaffected), so darken it there */
:root[data-theme="light"] section:not(.bg-cover) .partner-logos img {
  filter: brightness(0.3) sepia(0.25);
}

:root[data-theme="light"] section:not(.bg-cover) .partner-logos img:hover {
  filter: brightness(0.72) sepia(1) saturate(2.4) hue-rotate(-8deg);
}

@media (prefers-reduced-motion: reduce) {
  .partner-logos img { transition: none; animation: none !important; opacity: 0.9; transform: none; }
}

/* ============ Fleet ============ */
.fleet-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

@media (max-width: 820px) { .fleet-grid { grid-template-columns: 1fr; } }

.fleet-grid img { border: 1px solid rgba(208, 176, 96, 0.4); }

.fact-sheet {
  background: #1e1a14;
  color: #c9c0ae;
  padding: 2.6rem;
  border: 1px solid rgba(208, 176, 96, 0.22);
  border-top: 2px solid var(--gold);
}

.fact-sheet h3 {
  color: #d0b060;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  margin-bottom: 1.4rem;
}

.fact-sheet ul { list-style: none; }

.fact-sheet li {
  padding: 0.55rem 0;
  border-bottom: 1px solid rgba(208, 176, 96, 0.2);
  font-size: 0.98rem;
  color: #f0e9da;
}

.fact-sheet li:last-child { border-bottom: none; }

/* ============ Forms ============ */
form { display: grid; gap: 1.1rem; max-width: 640px; margin: 0 auto; }

input, select, textarea {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 0.95rem;
  color: var(--input-text);
  background: var(--input-bg);
  padding: 0.95rem 1.1rem;
  border: 1px solid rgba(208, 176, 96, 0.3);
  width: 100%;
  transition: border-color .25s;
}

input::placeholder, textarea::placeholder { color: var(--muted); }

select { color: var(--body); }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--gold);
}

textarea { min-height: 140px; resize: vertical; }

.checkbox { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.88rem; }
.checkbox input { width: auto; margin-top: 0.35rem; accent-color: var(--gold); }

form .btn { justify-self: center; margin-top: 0.6rem; }

/* ============ Contact details ============ */
.contact-details p { margin-bottom: 0.7rem; font-size: 1.05rem; color: var(--ivory); }
.contact-details strong {
  color: var(--gold);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.82rem;
}

/* ============ Legal page ============ */
.legal-page h1 { font-size: clamp(2rem, 4vw, 3rem); }
.legal-page h2 {
  margin: 3rem 0 1rem;
  font-size: 1.7rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(208, 176, 96, 0.35);
}
.legal-page h3 {
  margin: 1.6rem 0 0.5rem;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gold);
}
.legal-page p, .legal-page li { margin-bottom: 0.6rem; max-width: none; }
.legal-page ul { margin: 0.5rem 0 1rem 1.5rem; }
.legal-page strong { color: var(--ivory); font-weight: 400; }

/* ============ Footer ============ */
footer {
  background: #0b0a08;
  color: var(--muted);
  padding: 4.5rem 1.5rem 3rem;
  text-align: center;
  border-top: 1px solid rgba(208, 176, 96, 0.3);
}

footer > img { width: 175px; height: auto; margin-bottom: 2.2rem; }

footer nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.6rem 2.2rem;
  margin-bottom: 2rem;
}

footer nav a {
  color: var(--ivory);
  text-transform: uppercase;
  font-size: 0.74rem;
  letter-spacing: 0.24em;
}

footer nav a:hover { color: var(--gold); }

footer .legal {
  max-width: 920px;
  margin: 0 auto;
  padding-top: 2rem;
  border-top: 1px solid rgba(208, 176, 96, 0.2);
  font-size: 0.8rem;
  line-height: 1.8;
}

footer .legal p { margin-bottom: 0.8rem; max-width: none; }
footer .legal a { color: var(--gold); }
footer .legal a:hover { color: var(--gold-light); }
footer .legal strong { color: var(--ivory); font-weight: 400; letter-spacing: 0.08em; }
footer .copy { color: var(--muted); }

/* ============ Mobile refinements ============ */
@media (max-width: 640px) {
  body { font-size: 16px; }
  section { padding: 4.5rem 1.25rem; }
  .nav-wrap { height: 74px; }
  .brand img { height: 38px; }
  .hero { min-height: 78vh; }
  .hero p.tagline { letter-spacing: 0.22em; }
  .stats .num { font-size: 3.4rem; }
  .btn { padding: 0.9rem 2.2rem; letter-spacing: 0.2em; }
  .partner-logos img { max-height: 64px; }
  .fact-sheet { padding: 1.8rem; }
  footer > img { width: 145px; }
}