/* Match the route and About pages to the established homepage identity. */
:root {
  --ink: #020b18;
  --ink-deep: #000000;
  --ink-raise: #07162a;
  --ink-raise2: #0c1d31;

  --ivory: #ffffff;
  --ivory-2: rgba(255, 255, 255, .78);
  --mist: rgba(255, 255, 255, .65);
  --mist-2: rgba(255, 255, 255, .48);

  --champagne: #c99a2e;
  --champagne-2: #e0b653;
  --champagne-3: #8a6a1f;

  --line: rgba(255, 255, 255, .12);
  --line-soft: rgba(255, 255, 255, .07);
  --line-warm: rgba(201, 154, 46, .65);

  --serif: Georgia, "Times New Roman", serif;
  --sans: Arial, Helvetica, sans-serif;
}

body {
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--sans);
  font-weight: 400;
  letter-spacing: 0;
}

.d1,
.d2,
.d3,
.hero-meta b,
.mf-title,
.feat-name,
.ac h3,
.about-card h3,
.apt h3,
.acopt h3,
.rline-pt b,
.rfacts-grid b,
.rt-empty b,
.mnav-links a {
  font-family: var(--serif);
}

.d1,
.d2,
.d3 {
  font-weight: 400;
  letter-spacing: -2px;
}

.d1 em,
.d2 em,
.d3 em {
  color: var(--champagne-2);
}

.lead {
  color: var(--ivory-2);
  font-weight: 400;
}

.eyebrow {
  color: var(--champagne);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 4px;
}

.eyebrow::before {
  display: none;
}

.hdr,
.mnav {
  background: rgba(2, 11, 24, .96);
}

.hdr {
  border-bottom-color: rgba(201, 154, 46, .24);
}

/* Match the homepage logo's visual scale, including its transparent canvas. */
@media (min-width: 901px) {
  :root {
    --hdr-h: 122px;
  }

  .hdr-logo img {
    content: url("/assets/images/phoenix-logo-private-flights-blanco-hd.png");
    width: 410px;
    max-width: 410px;
    height: 140px;
    object-fit: contain;
  }

  .hdr.is-stuck .hdr-logo img {
    height: 112px;
  }
}

@media (max-width: 900px) {
  :root {
    --hdr-h: 104px;
  }

  .hdr-logo img {
    content: url("/assets/images/phoenix-logo-private-flights-blanco-hd.png");
    width: 198px;
    max-width: 198px;
    height: 96px;
    object-fit: contain;
  }

  .hdr.is-stuck .hdr-logo img {
    height: 82px;
  }
}

.hdr-nav,
.lang-btn,
.lang-menu,
.mnav-foot,
.label,
.tlink,
.ftr-col h3 {
  font-family: var(--sans);
}

.hdr-nav a,
.lang-btn {
  color: rgba(255, 255, 255, .72);
}

.hdr-nav a:hover,
.hdr-nav a[aria-current],
.lang-btn:hover {
  color: var(--champagne);
}

.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 30px;
  overflow: hidden;
  border: 1px solid rgba(201, 154, 46, .65);
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  color: var(--ivory);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.6px;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .08);
  transition: transform .38s cubic-bezier(.16, 1, .3, 1), box-shadow .38s ease, background .38s ease, color .38s ease, border-color .38s ease, letter-spacing .38s ease;
}

.btn::before {
  content: none;
}

.btn::after {
  content: "";
  position: absolute;
  inset: -55% -85%;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 34%, rgba(255, 255, 255, .42) 48%, transparent 62%);
  transform: translateX(-72%) rotate(8deg);
  transition: transform .95s cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
}

.btn--solid {
  border-color: transparent;
  background: linear-gradient(135deg, var(--champagne-2) 0%, var(--champagne) 48%, #b98516 100%);
  color: var(--ink-deep);
  box-shadow: 0 14px 34px rgba(201, 154, 46, .22), inset 0 1px 0 rgba(255, 255, 255, .38);
}

.btn--ghost {
  border-color: rgba(201, 154, 46, .65);
  background: rgba(255, 255, 255, .05);
  color: var(--ivory);
}

.btn:hover,
.btn:focus-visible {
  transform: translateY(-4px) scale(1.012);
  border-color: var(--champagne);
  background: var(--champagne);
  color: var(--ink-deep);
  letter-spacing: 2.1px;
  box-shadow: 0 22px 54px rgba(201, 154, 46, .34), 0 0 0 1px rgba(201, 154, 46, .22), inset 0 1px 0 rgba(255, 255, 255, .42);
}

/* Route-detail entrances follow the homepage's restrained reveal language. */
.rhero .eyebrow,
.rhero-h1 {
  animation: phoenixRouteEnter .95s cubic-bezier(.16, 1, .3, 1) both;
}

.rhero-h1 { animation-delay: .08s; }

@keyframes phoenixRouteEnter {
  from { opacity: 0; transform: translateY(28px); filter: blur(7px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
  .rhero .eyebrow,
  .rhero-h1 {
    animation: none !important;
  }
}

.btn--solid:hover,
.btn--solid:focus-visible {
  border-color: var(--ivory);
  background: var(--ivory);
  color: var(--ink-deep);
}

.btn:hover::after,
.btn:focus-visible::after {
  transform: translateX(72%) rotate(8deg);
}

.btn:active {
  transform: translateY(-1px) scale(.985);
}

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(2, 11, 24, .95), 0 0 0 7px rgba(201, 154, 46, .72), 0 22px 54px rgba(201, 154, 46, .28);
}

.tlink,
.feat-name em,
.rt-codes,
.apt-code {
  color: var(--champagne-2);
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn::after {
    transition: none;
  }
}

/* About and routes hub: match the logo canvas and dimensions of the homepage. */
.about-page .ftr-brand img,
.routes-hub-page .ftr-brand img {
  width: 255px;
  max-width: 255px;
  height: auto;
  margin: -26px 0 -24px -26px;
  object-fit: contain;
}

@media (min-width: 901px) {
  .hdr-logo {
    transform: translateX(calc((min(1560px, 100vw) - min(1220px, calc(100vw - 48px))) / 2 - var(--gut) - 170px));
  }

  .routes-hub-page .hdr-logo img {
    width: 410px;
    max-width: 410px;
    height: 140px;
    object-fit: contain;
  }

  .routes-hub-page .hdr.is-stuck .hdr-logo img {
    height: 112px;
  }
}

@media (max-width: 900px) {
  .hdr-logo {
    transform: translateX(calc(24px - var(--gut)));
  }

  .routes-hub-page .hdr-logo img {
    width: 198px;
    max-width: 198px;
    height: 96px;
    object-fit: contain;
  }

  .routes-hub-page .hdr.is-stuck .hdr-logo img {
    height: 82px;
  }
}

@media (max-width: 680px) {
  .hdr-logo {
    transform: translateX(calc(16px - var(--gut)));
  }

  .about-page .ftr-brand img,
  .routes-hub-page .ftr-brand img {
    width: 194px;
    max-width: 194px;
    margin: -28px 0 -32px -30px;
  }
}

/* The desktop CTA must never displace or clip the mobile menu controls. */
@media (max-width: 1080px) {
  .hdr .hdr-in {
    min-width: 0;
    overflow: visible;
  }

  .hdr .hdr-cta {
    display: none !important;
  }

  .hdr .hdr-burger {
    display: block;
    flex: 0 0 auto;
    margin-left: auto;
  }
}