:root {
  --black: #090909;
  --dark: #111112;
  --panel: #18181a;
  --gold: #dba932;
  --gold2: #f0c866;
  --cream: #f7f5ef;
  --green: #dba932;
  --emerald: #b98218;
  --ink: #171717;
}

html {
  scroll-behavior: auto;
}

body {
  color: #fff;
  background: #090909;
}

.site-header {
  background: rgba(9, 9, 9, .9);
  border-bottom-color: rgba(219, 169, 50, .2);
}

.logo-slot {
  border-color: rgba(219, 169, 50, .35);
  background: linear-gradient(145deg, rgba(255,255,255,.1), rgba(219,169,50,.06));
}

.brand mark,
footer mark {
  color: #f4d785;
  border-color: rgba(219, 169, 50, .48);
  background: rgba(219, 169, 50, .11);
}

.outline-btn {
  color: #f4d785;
  border-color: rgba(219,169,50,.55);
  background: rgba(219,169,50,.07);
}

.hero {
  min-height: 860px;
  grid-template-columns: 1.08fr .92fr;
  background:
    radial-gradient(circle at 78% 44%, rgba(219,169,50,.13), transparent 30%),
    radial-gradient(circle at 15% 18%, rgba(255,255,255,.055), transparent 23%),
    linear-gradient(125deg, #080808 0%, #171718 52%, #090909 100%);
}

.hero::after {
  background: linear-gradient(transparent, rgba(219,169,50,.22), transparent);
}

.hero .eyebrow {
  color: #f0c866;
  border-color: rgba(219,169,50,.28);
  background: rgba(219,169,50,.075);
}

h1 em {
  background: linear-gradient(90deg, #f6dd9b, #dba932);
  -webkit-background-clip: text;
  background-clip: text;
}

.hero-inquiry {
  width: min(690px, 100%);
  margin-top: 36px;
  padding: 9px;
  border: 1px solid rgba(219,169,50,.62);
  border-radius: 24px 7px 24px 7px;
  background: transparent;
  box-shadow: 0 22px 55px rgba(0,0,0,.2), inset 0 0 0 1px rgba(255,255,255,.025);
}

.hero-inquiry-head {
  padding: 17px 20px 14px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  color: #fff;
}

.hero-inquiry-head strong {
  font-size: 18px;
  font-weight: 900;
  white-space: nowrap;
}

.hero-inquiry-head span {
  color: #d7d2c7;
  font-size: 12px;
}

.hero-search-form {
  display: grid;
  grid-template-columns: 1fr 185px;
  gap: 9px;
}

.hero-field {
  position: relative;
}

.hero-field label {
  position: absolute;
  z-index: 2;
  top: 8px;
  right: 61px;
  margin: 0;
  color: #e8c870;
  font-size: 10px;
}

.hero-input-wrap {
  height: 70px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(219,169,50,.48);
  border-radius: 15px 5px 15px 5px;
  background: rgba(0,0,0,.28);
  transition: border-color .2s, box-shadow .2s;
}

.hero-input-wrap:focus-within {
  border-color: #dba932;
  box-shadow: 0 0 0 4px rgba(219,169,50,.14);
}

.hero-input-wrap > span {
  height: 42px;
  padding: 0 16px;
  display: grid;
  place-items: center;
  color: #f0c866;
  border-left: 1px solid rgba(219,169,50,.3);
  font-size: 20px;
}

.hero-input-wrap input {
  width: 100%;
  height: 100%;
  padding: 19px 17px 0;
  border: 0;
  outline: 0;
  color: #fff;
  background: transparent;
  direction: ltr;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  font-size: 19px;
}

.hero-input-wrap input::placeholder {
  color: rgba(255,255,255,.48);
}

.hero-submit-btn {
  height: 70px;
  border: 0;
  border-radius: 15px 5px 15px 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  color: #111;
  background: linear-gradient(135deg, #f0c866, #d39b27);
  box-shadow: 0 13px 28px rgba(185,130,24,.23);
  font-weight: 900;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
}

.hero-submit-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(185,130,24,.3);
}

.hero-submit-btn:disabled {
  cursor: wait;
  opacity: .65;
}

.hero-hint,
.hero-privacy {
  grid-column: 1 / -1;
  margin: 0 10px;
  color: #d5d0c4;
  font-size: 11px;
}

.hero-hint {
  padding-top: 3px;
}

.hero-privacy {
  margin-top: 3px;
  padding: 10px 0 7px;
  border-top: 1px solid rgba(219,169,50,.2);
}

.passport-cover {
  border-color: rgba(219,169,50,.42);
  background:
    linear-gradient(135deg, rgba(255,255,255,.09), transparent 25%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.014) 0 2px, transparent 2px 7px),
    linear-gradient(145deg, #242425, #0a0a0b);
}

.passport-cover::before {
  border-color: rgba(219,169,50,.25);
}

.passport-topline,
.passport-cover > strong {
  color: #f0c866;
}

.passport-cover > small {
  color: #e0d6c0;
}

.boarding-card {
  color: #171717;
  background: rgba(255,255,255,.97);
}

.boarding-card > span {
  color: #9b701e;
}

.boarding-card > b {
  color: #d39b27;
}

.boarding-card > small {
  color: #666;
}

.services {
  color: #171717;
  background:
    radial-gradient(circle at 7% 45%, rgba(219,169,50,.08), transparent 24%),
    #fff;
}

.service {
  background: #faf9f5;
  box-shadow: inset 0 0 0 1px rgba(20,20,20,.08), 0 14px 35px rgba(0,0,0,.045);
}

.service.featured {
  background:
    radial-gradient(circle at 75% 15%, rgba(219,169,50,.24), transparent 31%),
    linear-gradient(145deg, #242425, #0b0b0c);
}

.service:hover {
  box-shadow: inset 0 0 0 1px rgba(219,169,50,.7), 0 22px 50px rgba(0,0,0,.08);
}

.service-icon {
  color: #a97616;
  border-color: rgba(219,169,50,.48);
  background: rgba(219,169,50,.07);
}

.branches {
  color: #171717;
  background:
    radial-gradient(circle at 50% 0, rgba(219,169,50,.11), transparent 36%),
    #f5f3ed;
}

.branches .section-title > p:last-child {
  color: #6f6f6f;
}

.branch {
  color: #fff;
  background:
    radial-gradient(circle at 90% 0, rgba(219,169,50,.12), transparent 34%),
    linear-gradient(145deg, #222224, #0d0d0e);
  box-shadow: inset 0 0 0 1px rgba(219,169,50,.16), 0 24px 55px rgba(0,0,0,.12);
}

.branch-head > span {
  color: #f0c866;
  border-color: rgba(219,169,50,.45);
}

.branch-head small,
.status-dot {
  color: #e2c57e;
}

.contact > span,
.contact-line > span {
  color: #dba932;
}

.branch-button {
  color: #f2cf77;
  border-color: rgba(219,169,50,.5);
  background: rgba(219,169,50,.06);
}

.branch-button:hover {
  color: #111;
  background: #dba932;
  border-color: #dba932;
}

.modal-icon {
  color: #111;
  background: #dba932;
}

.modal.error .modal-icon {
  color: #fff;
  background: #8d1f1f;
}

.modal-card {
  background:
    radial-gradient(circle at 85% 0, rgba(219,169,50,.15), transparent 28%),
    linear-gradient(145deg, #252526, #0d0d0e);
}

.modal-action {
  background: linear-gradient(135deg, #f0c866, #d39b27);
}

@media (max-width: 980px) {
  .hero {
    min-height: auto;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .hero-copy {
    width: 100%;
    max-width: 760px;
  }
  .hero-visual {
    width: 100%;
    min-height: 480px;
    margin-top: 30px;
  }
  .hero-inquiry {
    max-width: 760px;
  }
}

@media (max-width: 650px) {
  .hero {
    padding-top: 125px;
    grid-template-columns: minmax(0, 1fr);
  }
  .hero-inquiry {
    padding: 7px;
    border-radius: 20px 6px 20px 6px;
  }
  .hero-inquiry-head {
    padding: 14px 13px 12px;
    display: grid;
    gap: 5px;
  }
  .hero-inquiry-head strong {
    font-size: 16px;
  }
  .hero-search-form {
    grid-template-columns: 1fr;
  }
  .hero-submit-btn {
    width: 100%;
  }
  .hero-hint,
  .hero-privacy {
    margin-inline: 7px;
  }
  .hero-visual {
    width: 100%;
    min-height: 360px;
    margin-top: 22px;
  }
  .passport-stage {
    width: 100%;
    max-width: 430px;
    height: 360px;
    margin-inline: auto;
    transform: scale(.76);
    transform-origin: top center;
  }
}