/* Landing hero: full viewport with the Limousine site's directional shadow treatment. */
.intro {
  height: 100svh;
  min-height: 100svh;
  max-height: none;
}

.intro::after {
  background:
    linear-gradient(90deg, #061015ec 0%, #0a0d1099 48%, #0a0d0b42 100%),
    linear-gradient(0deg, #061015d9 0%, transparent 55%) !important;
}

/* Do not lay the site-wide noise texture over the hero video. */
.grain {
  display: none;
}

.intro-foot > a {
  font-size: 8px;
  letter-spacing: 1.45px;
}

.intro-foot > a > span:last-child {
  margin-left: 14px;
  font-size: 20px;
  vertical-align: -3px;
}

/* Match the Limousine site's navigation frame while retaining Services'
   language control and enquiry action. */
.topbar {
  height: auto;
  min-height: 84px;
  padding: 25px 3.5vw;
}

.primary-nav {
  position: absolute;
  left: 50%;
  display: flex;
  gap: 21px;
  transform: translateX(-50%);
}

.primary-nav a { white-space: nowrap; }

.primary-nav a,
.topbar-actions .menu-button,
.topbar-actions .sign-in {
  color: var(--paper);
  font: 10px/1 Roboto Mono, monospace;
  letter-spacing: .16em;
  text-decoration: none;
  text-transform: uppercase;
}

.primary-nav a {
  transition: color .2s ease;
}

.primary-nav a:hover,
.primary-nav a:focus-visible {
  color: var(--gold);
  outline: none;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 25px;
  margin-left: auto;
}

.language-switcher { margin:0 !important; }
.language-menu { position:relative; }
.language-menu summary { display:flex;align-items:center;justify-content:center;min-width:56px;height:34px;border:1px solid rgba(243,241,235,.65);cursor:pointer;list-style:none; }
.language-menu summary::-webkit-details-marker { display:none; }
.language-menu summary::after { content:'▾';margin-left:8px;font-size:9px; }
.language-options { position:absolute;top:calc(100% + 6px);right:0;display:grid;min-width:56px;border:1px solid rgba(243,241,235,.65);background:#111415;box-shadow:0 12px 24px #0006; }
.language-options button { padding:10px;border:0;background:transparent;color:var(--paper);font:500 10px Roboto Mono,monospace;letter-spacing:.12em;cursor:pointer; }
.language-options button:hover,.language-options button:focus-visible { background:#25292a;outline:0; }
.topbar-actions .sign-in { border:0;padding:0;background:transparent;cursor:pointer; }
.topbar-actions .menu-button {
  padding: 11px 18px;
  background: rgba(10, 12, 12, .15);
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}

.topbar-actions .menu-button i {
  display: none !important;
}

.topbar-actions .menu-button:hover,
.topbar-actions .menu-button:focus-visible {
  background: var(--paper);
  color: var(--ink);
  outline: none;
}

@media (max-width: 720px) {
  .topbar {
    min-height: 70px;
  }

  .primary-nav {
    display: none;
  }

  .topbar-actions { gap:12px; }

  .topbar-actions .sign-in { display:none; }
  .language-menu summary { min-width:50px;height:32px; }

  .topbar-actions .menu-button {
    padding: 10px 11px;
    font-size: 8px;
  }
}

/* Preserve the full Monaco GP car in the Events service window. */
.service-dialog.events-dialog .dialog-image {
  background-color: #101315;
  background-position: 52% center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Keep the G800 nose within the narrow card and dialog crops. */
.service-card[data-service="jets"]::before {
  background-position: center, 15% center;
}

.service-dialog.jets-dialog .dialog-image {
  background-position: 15% center;
}

/* Preserve the yacht's bow in the narrow card and dialog crops. */
.service-card[data-service="yachts"]::before {
  background-position: center, 72% 58%;
}

.service-dialog.yachts-dialog .dialog-image {
  background-position: 72% 58%;
}

/* Service details open as a near-full-screen book spread. */
.service-dialog {
  width: min(96vw, 1680px);
  min-height: 0;
  height: min(92svh, 1040px);
  transform-origin: left center;
}

.service-dialog[open] {
  animation: service-book-open 720ms cubic-bezier(.16, .8, .18, 1) both;
}

.service-dialog::backdrop {
  animation: service-backdrop-in 500ms ease-out both;
}

@keyframes service-book-open {
  0% { opacity: 0; transform: perspective(1800px) rotateY(-72deg) scale(.82); filter: brightness(.7); }
  58% { opacity: 1; transform: perspective(1800px) rotateY(3deg) scale(1.01); filter: brightness(1); }
  100% { opacity: 1; transform: perspective(1800px) rotateY(0) scale(1); filter: brightness(1); }
}

@keyframes service-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 720px) {
  .service-dialog {
    width: 94vw;
    height: min(90svh, 760px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-dialog[open], .service-dialog::backdrop { animation: none; }
}

@media (max-width: 720px) {
  .intro {
    min-height: 100svh;
  }
}