:root {

  --navy:
    #12386e;

  --navy-dark:
    #0b2b59;

  --navy-deep:
    #071d3d;

  --blue:
    #17658a;

  --orange:
    #ff7628;

  --aqua:
    #48d5d2;

  --white:
    #ffffff;

  --paper:
    #f5f7fb;

  --ink:
    #0c2345;

  --muted:
    #65758a;

  --line:
    #dce4ed;
}


* {
  box-sizing:
    border-box;
}


html {
  scroll-behavior:
    smooth;
}


body {

  margin:
    0;

  background:
    var(--paper);

  color:
    var(--ink);

  font-family:
    Arial,
    Helvetica,
    sans-serif;
}


button,
input,
select {

  font:
    inherit;
}


button {

  cursor:
    pointer;
}


.hidden {

  display:
    none !important;
}


/* =====================================================
   LOGO
===================================================== */

.logo-symbol {

  position:
    relative;

  display:
    grid;

  place-items:
    center;

  border:
    2px solid
    var(--orange);

  border-radius:
    50%;
}


.logo-star {

  width:
    70%;

  height:
    70%;

  background:
    var(--orange);

  clip-path:
    polygon(
      50% 0%,
      60% 38%,
      100% 50%,
      60% 62%,
      50% 100%,
      40% 62%,
      0% 50%,
      40% 38%
    );
}


/* =====================================================
   HEADER
===================================================== */

.topbar {

  min-height:
    82px;

  padding:
    0
    clamp(
      24px,
      5vw,
      80px
    );

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  background:
    var(--navy);

  color:
    white;
}


.header-logo {

  display:
    flex;

  align-items:
    center;

  gap:
    15px;

  color:
    white;

  text-decoration:
    none;
}


.small-logo {

  width:
    52px;

  height:
    52px;
}


.header-logo-text {

  color:
    white;

  font-size:
    18px;

  font-weight:
    800;

  letter-spacing:
    0.05em;
}


.top-actions {

  display:
    flex;

  align-items:
    center;

  gap:
    12px;
}


.domain-label {

  color:
    white;

  font-size:
    15px;

  font-weight:
    700;
}


.status-badge {

  color:
    rgba(
      255,
      255,
      255,
      0.8
    );

  font-size:
    13px;
}


.status-badge.good {

  color:
    #bff5dc;
}


.status-badge.bad {

  color:
    #ffc0ae;
}


/* =========================================================
   HERO
========================================================= */

.hero {
  width: 100%;
  padding: 60px clamp(24px, 5vw, 80px) 45px;
  background:
    linear-gradient(
      135deg,
      var(--navy-dark) 0%,
      var(--navy) 52%,
      var(--blue) 100%
    );
  color: white;
}

.hero-copy {
  width: 100%;
  max-width: 1200px;
}

.hero .eyebrow {
  margin: 0 0 22px;
  color: var(--aqua);
}

.hero h1 {
  max-width: 1050px;
  margin: 0 0 28px;
  color: white;
  font-size: clamp(48px, 5vw, 72px);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.045em;
}

.hero-text {
  max-width: 900px;
  margin: 0 0 36px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 20px;
  line-height: 1.6;
}

@media (max-width: 700px) {
  .hero {
    padding: 40px 18px 32px;
  }

  .hero h1 {
    font-size: clamp(40px, 11vw, 52px);
  }

  .hero-text {
    font-size: 18px;
  }
}

/* =====================================================
   SEARCH
===================================================== */

.search-panel {

  width:
    100%;

  margin-top:
    38px;
}


.trip-row {

  margin-bottom:
    13px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    16px;
}


.segments {

  display:
    flex;

  gap:
    4px;
}


.trip-button {

  padding:
    11px 17px;

  border:
    0;

  border-radius:
    999px;

  background:
    transparent;

  color:
    rgba(
      255,
      255,
      255,
      0.65
    );

  font-weight:
    800;
}


.trip-button.active {

  background:
    rgba(
      255,
      255,
      255,
      0.14
    );

  color:
    white;
}


.cabin {

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  color:
    rgba(
      255,
      255,
      255,
      0.72
    );

  font-size:
    13px;
}


.cabin select {

  min-width:
    170px;

  padding:
    10px 12px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.2
    );

  border-radius:
    10px;

  background:
    #174778;

  color:
    white;
}


.search-grid {

  width:
    100%;

  display:
    grid;

  grid-template-columns:
    minmax(
      185px,
      1.2fr
    )
    42px
    minmax(
      185px,
      1.2fr
    )
    minmax(
      145px,
      0.85fr
    )
    minmax(
      145px,
      0.85fr
    )
    minmax(
      110px,
      0.6fr
    )
    minmax(
      190px,
      auto
    );

  align-items:
    stretch;

  overflow:
    visible;

  border-radius:
    18px;

  background:
    white;

  box-shadow:
    0 24px 65px
    rgba(
      4,
      20,
      45,
      0.25
    );
}


.airport-field,
.search-grid > label {

  position:
    relative;

  min-width:
    0;

  padding:
    20px;

  border-right:
    1px solid
    #e8edf2;

  color:
    #7c8ba0;

  font-size:
    10px;

  font-weight:
    900;

  letter-spacing:
    0.13em;
}


.airport-field label {

  display:
    block;
}


.search-grid input,
.search-grid select {

  width:
    100%;

  margin-top:
    9px;

  padding:
    0;

  border:
    0;

  outline:
    0;

  background:
    transparent;

  color:
    var(--ink);

  font-size:
    16px;

  font-weight:
    750;

  letter-spacing:
    normal;
}


.swap {

  z-index:
    5;

  width:
    40px;

  height:
    40px;

  align-self:
    center;

  margin-left:
    -20px;

  border:
    1px solid
    var(--line);

  border-radius:
    50%;

  background:
    white;

  color:
    var(--navy);

  font-size:
    18px;

  box-shadow:
    0 7px 18px
    rgba(
      0,
      0,
      0,
      0.10
    );
}


.search-button {

  min-width:
    190px;

  padding:
    0 25px;

  border:
    0;

  border-radius:
    0 18px 18px 0;

  background:
    var(--orange);

  color:
    white;

  font-size:
    16px;

  font-weight:
    900;
}


/* =====================================================
   AUTOCOMPLETE
===================================================== */

.suggestions {

  position:
    absolute;

  z-index:
    500;

  top:
    88px;

  left:
    0;

  right:
    0;

  max-height:
    300px;

  overflow-y:
    auto;

  border:
    1px solid
    var(--line);

  border-radius:
    12px;

  background:
    white;

  color:
    var(--ink);

  box-shadow:
    0 18px 45px
    rgba(
      5,
      25,
      50,
      0.18
    );

  letter-spacing:
    normal;
}


.suggestion {

  padding:
    13px 15px;

  border-bottom:
    1px solid
    #edf1f5;

  cursor:
    pointer;
}


.suggestion:hover {

  background:
    #f3f7fa;
}


.suggestion strong {

  display:
    block;

  font-size:
    13px;
}


.suggestion span {

  display:
    block;

  margin-top:
    4px;

  color:
    var(--muted);

  font-size:
    11px;
}


/* =====================================================
   FILTERS
===================================================== */

.filter-row {

  margin-top:
    15px;

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    10px;
}


.pill {

  padding:
    9px 13px;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.15
    );

  border-radius:
    999px;

  background:
    rgba(
      255,
      255,
      255,
      0.06
    );

  color:
    rgba(
      255,
      255,
      255,
      0.78
    );

  font-size:
    12px;
}


.pill input[type="number"] {

  width:
    75px;

  border:
    0;

  outline:
    none;

  background:
    transparent;

  color:
    white;
}


/* =====================================================
   WATCH
===================================================== */

.watch-panel {

  width:
    100%;

  margin-top:
    24px;

  padding:
    20px 23px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    24px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.16
    );

  border-radius:
    18px;

  background:
    rgba(
      255,
      255,
      255,
      0.08
    );
}


.watch-copy {

  display:
    flex;

  align-items:
    center;

  gap:
    16px;
}


.watch-icon {

  width:
    50px;

  height:
    50px;

  flex:
    0 0 50px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    50%;

  background:
    var(--orange);

  color:
    white;

  font-size:
    19px;
}


.watch-eyebrow {

  margin:
    0 0 4px;

  color:
    var(--aqua);

  font-size:
    9px;

  font-weight:
    900;

  letter-spacing:
    0.18em;
}


.watch-copy h3 {

  margin:
    0 0 5px;

  color:
    white;

  font-size:
    18px;
}


.watch-copy p:last-child {

  margin:
    0;

  max-width:
    700px;

  color:
    rgba(
      255,
      255,
      255,
      0.67
    );

  font-size:
    12px;

  line-height:
    1.5;
}


.watch-button {

  padding:
    13px 19px;

  border:
    0;

  border-radius:
    999px;

  background:
    var(--aqua);

  color:
    var(--navy-deep);

  font-weight:
    900;

  white-space:
    nowrap;
}


.watch-button.full {

  width:
    100%;
}


.active-watch {

  margin-top:
    10px;

  padding:
    14px 17px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    15px;

  border-radius:
    14px;

  background:
    #e7f8f4;

  color:
    #18463f;
}


.active-watch-copy {

  display:
    flex;

  align-items:
    center;

  gap:
    11px;
}


.watch-dot {

  width:
    10px;

  height:
    10px;

  border-radius:
    50%;

  background:
    #23a66e;
}


.active-watch p {

  margin:
    3px 0 0;

  color:
    #607a75;

  font-size:
    11px;
}


.active-watch button {

  border:
    0;

  background:
    transparent;

  color:
    #18463f;

  font-weight:
    800;
}


/* =====================================================
   RESULTS
===================================================== */

.results {

  width:
    100%;

  min-height:
    500px;

  padding:
    62px
    clamp(
      24px,
      5vw,
      80px
    )
    95px;
}


.results-header {

  margin-bottom:
    28px;

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    25px;
}


.results h2 {

  margin:
    6px 0;

  font-size:
    clamp(
      34px,
      4vw,
      54px
    );

  line-height:
    1;

  letter-spacing:
    -0.04em;
}


.results-header p:last-child {

  margin:
    0;

  color:
    var(--muted);

  font-size:
    15px;
}


#sort {

  min-width:
    200px;

  height:
    46px;

  padding:
    0 36px 0 14px;

  border:
    1px solid
    var(--line);

  border-radius:
    11px;

  background:
    white;

  color:
    var(--ink);
}


.results-grid {

  width:
    100%;
}


/* =====================================================
   RECOVERY SECTIONS
===================================================== */

.recovery-sections {

  width:
    100%;
}


.recovery-section {

  width:
    100%;

  margin:
    72px 0 38px;
}


.recovery-section:first-child {

  margin-top:
    15px;
}


.recovery-section-header {

  width:
    100%;

  margin-bottom:
    28px;

  padding:
    24px 28px;

  display:
    flex;

  align-items:
    center;

  gap:
    19px;

  border-radius:
    20px;

  background:
    linear-gradient(
      135deg,
      #10366c,
      #176485
    );

  color:
    white;

  box-shadow:
    0 18px 42px
    rgba(
      6,
      26,
      52,
      0.14
    );
}


.recovery-section-icon {

  width:
    55px;

  height:
    55px;

  flex:
    0 0 55px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    50%;

  background:
    var(--orange);

  color:
    white;

  font-size:
    23px;

  font-weight:
    900;
}


.recovery-section-copy h2 {

  margin:
    0;

  color:
    white;

  font-size:
    26px;

  font-weight:
    900;

  letter-spacing:
    0.03em;
}


.recovery-section-copy p {

  margin:
    6px 0 0;

  color:
    rgba(
      255,
      255,
      255,
      0.74
    );

  font-size:
    13px;
}


/* =====================================================
   RESULT GRID
===================================================== */

.recovery-group {

  width:
    100%;

  display:
    grid !important;

  grid-template-columns:
    repeat(
      3,
      minmax(
        0,
        1fr
      )
    ) !important;

  gap:
    25px !important;

  align-items:
    stretch;
}


/* =====================================================
   FLIGHT CARDS
===================================================== */

.flight-card {

  width:
    100%;

  min-width:
    0;

  overflow:
    hidden;

  display:
    flex;

  flex-direction:
    column;

  border:
    1px solid
    var(--line);

  border-radius:
    19px;

  background:
    white;

  box-shadow:
    0 12px 32px
    rgba(
      6,
      25,
      48,
      0.08
    );
}


.best-way-banner {

  width:
    100%;

  padding:
    10px 14px;

  background:
    var(--aqua);

  color:
    var(--navy-deep);

  font-size:
    11px;

  font-weight:
    900;

  letter-spacing:
    0.08em;

  text-align:
    center;

  white-space:
    nowrap;
}


.flight-top {

  min-height:
    190px;

  padding:
    24px;

  background:
    linear-gradient(
      135deg,
      #113c76,
      #176787
    );

  color:
    white;
}


.recovery-card-header {

  margin-bottom:
    12px;
}


.recovery-badge {

  display:
    inline-block;

  padding:
    6px 10px;

  border-radius:
    999px;

  font-size:
    10px;

  line-height:
    1;

  font-weight:
    900;

  letter-spacing:
    0.08em;

  white-space:
    nowrap;
}


.recovery-badge.direct {

  background:
    rgba(
      72,
      213,
      210,
      0.17
    );

  color:
    #7ef0ec;
}


.recovery-badge.connection {

  background:
    rgba(
      255,
      255,
      255,
      0.12
    );

  color:
    white;
}


.recovery-badge.alternate {

  background:
    var(--orange);

  color:
    white;
}


.recovery-route {

  width:
    100%;

  display:
    flex;

  align-items:
    center;

  flex-wrap:
    nowrap;

  gap:
    10px;

  margin-top:
    10px;
}


.airport-code {

  font-size:
    31px;

  line-height:
    1;

  font-weight:
    900;

  white-space:
    nowrap;
}


.connection-code {

  padding:
    5px 8px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.3
    );

  border-radius:
    7px;

  color:
    #8ee9e4;

  font-size:
    17px;

  font-weight:
    900;

  white-space:
    nowrap;
}


.route-arrow {

  flex-shrink:
    0;

  color:
    rgba(
      255,
      255,
      255,
      0.62
    );

  font-size:
    17px;
}


.flight-top .meta {

  margin-top:
    13px;

  color:
    rgba(
      255,
      255,
      255,
      0.72
    );

  font-size:
    12px;
}


.connection-description {

  margin-top:
    7px;

  color:
    #8ee9e4;

  font-size:
    12px;

  font-weight:
    750;
}


/* =====================================================
   CARD BODY
===================================================== */

.flight-body {

  padding:
    24px;

  flex:
    1;

  display:
    flex;

  flex-direction:
    column;
}


.carrier {

  min-height:
    46px;

  margin-bottom:
    17px;

  font-size:
    18px;

  line-height:
    1.3;

  font-weight:
    850;
}


.time-row {

  width:
    100%;

  display:
    grid;

  grid-template-columns:
    minmax(
      0,
      1fr
    )
    minmax(
      0,
      1fr
    );

  gap:
    22px;

  margin-bottom:
    16px;
}


.time-block {

  min-width:
    0;
}


.time-block:last-child {

  text-align:
    right;
}


.time {

  font-size:
    25px;

  line-height:
    1.05;

  font-weight:
    900;

  white-space:
    nowrap;
}


.small {

  margin-top:
    5px;

  color:
    #708095;

  font-size:
    12px;

  line-height:
    1.35;
}


/* =====================================================
   PARTY AVAILABILITY
===================================================== */

.availability-box {

  margin-top:
    15px;

  padding:
    12px 13px;

  display:
    flex;

  align-items:
    center;

  gap:
    11px;

  border:
    1px solid
    #cfe6df;

  border-radius:
    11px;

  background:
    #eef9f5;

  color:
    #244e46;
}


.availability-check {

  width:
    28px;

  height:
    28px;

  flex:
    0 0 28px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    50%;

  background:
    #2bae79;

  color:
    white;

  font-size:
    14px;

  font-weight:
    900;
}


.availability-box strong {

  display:
    block;

  font-size:
    12px;

  font-weight:
    850;
}


.availability-box span {

  display:
    block;

  margin-top:
    3px;

  color:
    #637b76;

  font-size:
    10px;

  line-height:
    1.35;
}


.detail-availability {

  margin:
    14px 0 18px;

  padding:
    13px 14px;

  border:
    1px solid
    #cfe6df;

  border-radius:
    11px;

  background:
    #eef9f5;

  color:
    #244e46;
}


.detail-availability strong {

  display:
    block;
}


.detail-availability span {

  display:
    block;

  margin-top:
    4px;

  color:
    #637b76;

  font-size:
    11px;
}


/* =====================================================
   RECOVERY INFORMATION
===================================================== */

.destination-arrival,
.route-summary {

  margin-top:
    13px;

  padding:
    11px 12px;

  border-radius:
    10px;

  background:
    #f3f6f9;

  color:
    #435b70;

  font-size:
    12px;

  line-height:
    1.5;
}


.alternate-airport-box {

  margin-top:
    15px;

  padding:
    14px;

  border:
    1px solid
    #d1e8e4;

  border-radius:
    12px;

  background:
    #edf8f6;
}


.alternate-title {

  margin-bottom:
    7px;

  color:
    #0b6667;

  font-size:
    11px;

  font-weight:
    900;

  text-transform:
    uppercase;
}


.alternate-route {

  color:
    #315c58;

  font-size:
    12px;

  line-height:
    1.5;
}


.ground-transfer {

  margin-top:
    9px;

  color:
    #536e69;

  font-size:
    12px;
}


.home-arrival {

  margin-top:
    10px;

  padding-top:
    9px;

  border-top:
    1px solid
    #c9e0dc;

  color:
    #18463f;

  font-size:
    12px;
}


.meta-row {

  width:
    100%;

  margin:
    18px 0 0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  color:
    #637286;

  font-size:
    12px;
}


/* =====================================================
   PRICE
===================================================== */

.price-row {

  width:
    100%;

  margin-top:
    auto;

  padding-top:
    20px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    16px;

  border-top:
    1px solid
    #edf1f5;
}


.price {

  font-size:
    28px;

  font-weight:
    900;

  white-space:
    nowrap;
}


.view-button {

  flex-shrink:
    0;

  padding:
    12px 16px;

  border:
    0;

  border-radius:
    999px;

  background:
    #eef3f7;

  color:
    var(--ink);

  font-weight:
    800;

  white-space:
    nowrap;
}


/* =====================================================
   RECOVERY MAP
===================================================== */

.recovery-map-section {

  margin:
    28px 0 30px;

  padding:
    20px;

  border:
    1px solid
    var(--line);

  border-radius:
    18px;

  background:
    #f7f9fc;
}


.map-heading {

  margin-bottom:
    15px;

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    20px;
}


.map-heading .eyebrow {

  margin-bottom:
    5px;
}


.map-heading h3 {

  margin:
    0;

  color:
    var(--ink);

  font-size:
    23px;
}


.map-route-label {

  padding:
    7px 11px;

  border-radius:
    999px;

  background:
    white;

  color:
    var(--navy);

  font-size:
    12px;

  font-weight:
    800;

  white-space:
    nowrap;

  box-shadow:
    0 4px 12px
    rgba(
      5,
      25,
      50,
      0.06
    );
}


.recovery-map {

  width:
    100%;

  height:
    330px;

  overflow:
    hidden;

  border-radius:
    14px;

  background:
    #dbe7ee;
}


.recovery-map-marker-wrapper {

  background:
    transparent !important;

  border:
    0 !important;
}


.map-marker-origin,
.map-marker-stop,
.map-marker-destination {

  width:
    20px;

  height:
    20px;

  border:
    4px solid
    white;

  border-radius:
    50%;

  box-shadow:
    0 3px 10px
    rgba(
      0,
      0,
      0,
      0.25
    );
}


.map-marker-origin {

  background:
    var(--navy);
}


.map-marker-stop {

  background:
    var(--orange);
}


.map-marker-destination {

  background:
    var(--aqua);
}


.map-popup {

  min-width:
    110px;
}


.map-popup strong {

  display:
    block;

  color:
    var(--navy);

  font-size:
    17px;
}


.map-popup div {

  margin-top:
    2px;

  color:
    var(--ink);

  font-size:
    12px;
}


.map-popup span {

  display:
    block;

  margin-top:
    5px;

  color:
    var(--muted);

  font-size:
    10px;

  text-transform:
    uppercase;

  letter-spacing:
    0.08em;
}


.map-legend {

  margin-top:
    13px;

  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    18px;

  color:
    var(--muted);

  font-size:
    11px;
}


.map-legend span {

  display:
    flex;

  align-items:
    center;

  gap:
    6px;
}


.map-legend i {

  width:
    10px;

  height:
    10px;

  display:
    inline-block;

  border-radius:
    50%;
}


.legend-origin {

  background:
    var(--navy);
}


.legend-stop {

  background:
    var(--orange);
}


.legend-destination {

  background:
    var(--aqua);
}


.map-unavailable {

  height:
    100%;

  padding:
    30px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  text-align:
    center;

  color:
    var(--muted);

  font-size:
    13px;

  line-height:
    1.6;
}


.connection-summary {

  margin:
    12px 0 5px;

  padding:
    11px 13px;

  border-radius:
    10px;

  background:
    #edf8f6;

  color:
    #315c58;

  font-size:
    13px;

  font-weight:
    750;
}


.connection-detail {

  color:
    #176a79;

  font-weight:
    700;
}


.recovery-detail-summary {

  color:
    var(--muted);

  font-weight:
    700;
}


/* =====================================================
   MESSAGES
===================================================== */

.notice {

  margin-top:
    22px;

  padding:
    14px 16px;

  border-radius:
    12px;

  background:
    #edf8f6;

  color:
    #315c58;

  font-size:
    13px;
}


.notice.error {

  background:
    #fff0ec;

  color:
    #8b3b2a;
}


.loading {

  padding:
    60px 20px;

  color:
    var(--muted);

  text-align:
    center;
}


.loading-dots span {

  width:
    9px;

  height:
    9px;

  margin:
    3px;

  display:
    inline-block;

  border-radius:
    50%;

  background:
    var(--navy);

  animation:
    bounce
    0.9s
    infinite
    alternate;
}


.loading-dots span:nth-child(2) {

  animation-delay:
    0.2s;
}


.loading-dots span:nth-child(3) {

  animation-delay:
    0.4s;
}


@keyframes bounce {

  to {

    transform:
      translateY(
        -8px
      );

    opacity:
      0.4;
  }
}


.empty-state {

  padding:
    60px 20px;

  border:
    1px dashed
    #c7d3df;

  border-radius:
    18px;

  background:
    white;

  color:
    var(--muted);

  text-align:
    center;
}


/* =====================================================
   DETAIL MODAL
===================================================== */

dialog {

  width:
    min(
      880px,
      calc(
        100% - 30px
      )
    );

  max-height:
    90vh;

  overflow-y:
    auto;

  padding:
    30px;

  border:
    0;

  border-radius:
    20px;

  background:
    white;

  box-shadow:
    0 35px 100px
    rgba(
      0,
      0,
      0,
      0.28
    );
}


dialog::backdrop {

  background:
    rgba(
      3,
      15,
      32,
      0.65
    );
}


.dialog-close {

  position:
    absolute;

  z-index:
    1000;

  top:
    14px;

  right:
    16px;

  width:
    34px;

  height:
    34px;

  border:
    0;

  border-radius:
    50%;

  background:
    #edf2f5;

  font-size:
    20px;
}


.itinerary-block {

  margin:
    18px 0;

  padding:
    16px;

  border:
    1px solid
    var(--line);

  border-radius:
    14px;
}


/* =====================================================
   ALERT
===================================================== */

.seat-alert {

  position:
    fixed;

  z-index:
    9999;

  right:
    22px;

  bottom:
    22px;

  width:
    min(
      390px,
      calc(
        100% - 32px
      )
    );

  padding:
    22px;

  border-radius:
    18px;

  background:
    var(--navy-deep);

  color:
    white;

  box-shadow:
    0 30px 90px
    rgba(
      0,
      0,
      0,
      0.35
    );
}


.alert-close {

  position:
    absolute;

  top:
    10px;

  right:
    12px;

  width:
    30px;

  height:
    30px;

  border:
    0;

  border-radius:
    50%;

  background:
    rgba(
      255,
      255,
      255,
      0.1
    );

  color:
    white;

  font-size:
    18px;
}


/* =====================================================
   FOOTER
===================================================== */

footer {

  padding:
    31px
    clamp(
      24px,
      5vw,
      80px
    );

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    25px;

  background:
    var(--navy-deep);

  color:
    #8d9baa;
}


.footer-logo {

  display:
    flex;

  align-items:
    center;

  gap:
    12px;
}


.footer-symbol {

  width:
    42px;

  height:
    42px;
}


.footer-brand-name {

  color:
    white;

  font-size:
    15px;

  font-weight:
    800;

  letter-spacing:
    0.13em;
}


.footer-domain {

  margin:
    5px 0 0;

  font-size:
    11px;
}


footer > p {

  max-width:
    620px;

  font-size:
    11px;

  text-align:
    right;
}


/* =====================================================
   TABLET
===================================================== */

@media (
  max-width:
  1150px
) {

  .search-grid {

    grid-template-columns:
      1fr
      42px
      1fr
      1fr;
  }


  .search-button {

    min-height:
      65px;

    border-radius:
      0 0 18px 0;
  }


  .recovery-group {

    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      ) !important;
  }
}


/* =====================================================
   MOBILE
===================================================== */

@media (
  max-width:
  720px
) {

  .topbar {

    min-height:
      70px;

    padding:
      0 18px;
  }


  .small-logo {

    width:
      40px;

    height:
      40px;
  }


  .header-logo-text {

    font-size:
      14px;
  }


  .domain-label,
  .status-badge {

    display:
      none;
  }


  .hero {

    padding:
      46px
      18px
      55px;
  }


  .hero h1 {

    font-size:
      44px;

    letter-spacing:
      -0.04em;
  }


  .trip-row {

    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .search-grid {

    display:
      grid;

    grid-template-columns:
      1fr;

    gap:
      9px;

    background:
      transparent;

    box-shadow:
      none;
  }


  .airport-field,
  .search-grid > label {

    border:
      0;

    border-radius:
      12px;

    background:
      white;
  }


  .swap {

    display:
      none;
  }


  .search-button {

    min-height:
      58px;

    border-radius:
      12px;
  }


  .watch-panel {

    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .watch-button {

    width:
      100%;
  }


  .active-watch {

    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .results {

    padding:
      48px
      18px
      70px;
  }


  .results-header {

    align-items:
      flex-start;

    flex-direction:
      column;
  }


  #sort {

    width:
      100%;
  }


  .recovery-section {

    margin-top:
      50px;
  }


  .recovery-section-header {

    padding:
      18px;

    align-items:
      flex-start;
  }


  .recovery-section-icon {

    width:
      45px;

    height:
      45px;

    flex-basis:
      45px;
  }


  .recovery-section-copy h2 {

    font-size:
      20px;
  }


  .recovery-group {

    grid-template-columns:
      1fr !important;

    gap:
      20px !important;
  }


  .flight-top,
  .flight-body {

    padding:
      20px;
  }


  .airport-code {

    font-size:
      27px;
  }


  .time {

    font-size:
      23px;
  }


  .price-row {

    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .view-button {

    width:
      100%;
  }


  .map-heading {

    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .map-route-label {

    white-space:
      normal;
  }


  .recovery-map {

    height:
      270px;
  }


  .recovery-map-section {

    padding:
      14px;
  }


  dialog {

    width:
      calc(
        100% - 20px
      );

    padding:
      24px 16px;
  }


  footer {

    padding:
      28px 18px;

    flex-direction:
      column;

    text-align:
      center;
  }


  footer > p {

    text-align:
      center;
  }
}
/* =====================================================
   RECOVERY CARD LAYOUT HARD RESET
   Keeps all recovery sections at three equal cards across
   on desktop, two on tablet, one on mobile.
===================================================== */

.recovery-section .recovery-group {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 25px !important;
  align-items: stretch !important;
}

.recovery-section .recovery-group > .flight-card {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100%;
}

@media (max-width: 1150px) {
  .recovery-section .recovery-group {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  .recovery-section .recovery-group {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   GET US HOME WATCH — FINAL DESIGN
========================================================= */

#watchDialog {
  width: min(940px, calc(100% - 40px));
  max-height: 94vh;

  padding: 0;

  border: 0;
  border-radius: 24px;

  background: #ffffff;
  color: #0d2f63;

  box-shadow:
    0 30px 90px rgba(0, 20, 45, 0.4);

  overflow-y: auto;
}


#watchDialog::backdrop {
  background: rgba(4, 22, 42, 0.78);

  backdrop-filter: blur(5px);
}


/* =========================================================
   CLOSE
========================================================= */

#watchDialog .dialog-close {
  position: absolute;

  top: 20px;
  right: 24px;

  z-index: 5;

  width: 46px;
  height: 46px;

  padding: 0;

  border: 0;

  background: transparent;

  color: #0d2f63;

  font-size: 38px;
  font-weight: 400;
  line-height: 1;

  cursor: pointer;
}


/* =========================================================
   MAIN CONTENT
========================================================= */

.watch-dialog-content {
  padding:
    30px
    48px
    26px;
}


/* =========================================================
   LOGO
========================================================= */

.watch-dialog-logo {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 16px;

  margin:
    0
    60px
    28px;
}


.watch-logo-symbol {
  position: relative;

  width: 62px;
  height: 62px;

  flex:
    0
    0
    62px;
}


.watch-logo-star {
  position: absolute;
  inset: 0;
}


.watch-logo-star::before,
.watch-logo-star::after {
  content: "";

  position: absolute;

  top: 50%;
  left: 50%;

  background: #ff7425;

  transform:
    translate(
      -50%,
      -50%
    );
}


.watch-logo-star::before {
  width: 15px;
  height: 62px;

  clip-path:
    polygon(
      50% 0%,
      65% 38%,
      100% 50%,
      65% 62%,
      50% 100%,
      35% 62%,
      0% 50%,
      35% 38%
    );
}


.watch-logo-star::after {
  width: 62px;
  height: 15px;

  clip-path:
    polygon(
      0% 50%,
      38% 35%,
      50% 0%,
      62% 35%,
      100% 50%,
      62% 65%,
      50% 100%,
      38% 65%
    );
}


.watch-logo-copy {
  display: flex;
  flex-direction: column;

  align-items: center;
}


.watch-logo-name {
  color: #0d2f63;

  font-size: 36px;
  font-weight: 900;

  line-height: 0.95;

  letter-spacing: 1px;
}


.watch-logo-watch {
  width: 100%;

  display: flex;
  align-items: center;

  gap: 12px;

  margin-top: 9px;

  color: #0d2f63;

  font-size: 14px;
  font-weight: 900;

  letter-spacing: 8px;
}


.watch-logo-watch span {
  height: 2px;

  flex: 1;

  background: #ff7425;
}


/* =========================================================
   HEADLINE
========================================================= */

.watch-dialog-content > h2 {
  margin: 0;

  color: #0d2f63;

  font-size:
    clamp(
      28px,
      3vw,
      38px
    );

  font-weight: 900;

  line-height: 1.15;

  text-align: center;
}


.watch-dialog-intro {
  margin:
    14px
    auto
    28px;

  max-width: 680px;

  color: #566173;

  font-size: 18px;
  line-height: 1.45;

  text-align: center;
}


/* =========================================================
   OPTIONS
========================================================= */

.watch-option-list {
  display: grid;

  gap: 10px;
}


.watch-option {
  position: relative;

  min-height: 82px;

  display: grid;

  grid-template-columns:
    28px
    58px
    1fr;

  align-items: center;

  gap: 18px;

  padding:
    14px
    22px;

  border:
    1px solid
    #d9dee6;

  border-radius: 14px;

  background: #ffffff;

  cursor: pointer;

  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}


.watch-option:hover {
  border-color: #20bcc1;

  background: #fbffff;
}


.watch-option:has(
  input:checked
) {
  border:
    2px solid
    #14b7bd;

  background: #fbffff;

  box-shadow:
    0 5px 20px
    rgba(
      20,
      183,
      189,
      0.08
    );
}


/* CHECKBOX */

.watch-option input {
  width: 22px;
  height: 22px;

  margin: 0;

  accent-color: #14b7bd;

  cursor: pointer;
}


/* ICON CIRCLE */

.watch-option-icon {
  width: 54px;
  height: 54px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #f0f4f8;

  color: #0d2f63;
}


.watch-option:has(
  input:checked
)
.watch-option-icon {
  background: #e0f7f8;
}


.watch-option-icon svg {
  width: 31px;
  height: 31px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.8;

  stroke-linecap: round;
  stroke-linejoin: round;
}


/* OPTION TEXT */

.watch-option-copy {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 4px;
}


.watch-option-copy strong {
  color: #0d2f63;

  font-size: 19px;
  font-weight: 900;

  line-height: 1.15;
}


.watch-option-copy > span {
  color: #606a7b;

  font-size: 15px;

  line-height: 1.35;
}


/* =========================================================
   PRICE SECTION
========================================================= */

.watch-price-row {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 30px;

  margin-top: 20px;

  padding-top: 20px;

  border-top:
    1px solid
    #e2e6eb;
}


.watch-price-group {
  display: flex;
  align-items: center;

  gap: 18px;
}


.watch-price-icon {
  width: 58px;
  height: 58px;

  display: flex;
  align-items: center;
  justify-content: center;

  flex:
    0
    0
    58px;

  border-radius: 50%;

  background: #ddf6f7;

  color: #0aaab3;
}


.watch-price-icon svg {
  width: 30px;
  height: 30px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.8;

  stroke-linecap: round;
  stroke-linejoin: round;
}


.watch-price-group > div {
  display: flex;
  flex-direction: column;
}


.watch-price-amount {
  color: #0d2f63;

  font-size: 36px;
  font-weight: 900;

  line-height: 1;
}


.watch-price-description {
  margin-top: 6px;

  color: #12aeb6;

  font-size: 18px;
  font-weight: 800;
}


/* =========================================================
   CONTINUE BUTTON
========================================================= */

#continueWatchButton {
  min-width: 250px;
  min-height: 62px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 18px;

  padding:
    0
    36px;

  border: 0;
  border-radius: 18px;

  background: #43ced0;

  color: #062b55;

  font-size: 20px;
  font-weight: 900;

  cursor: pointer;

  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}


#continueWatchButton span {
  font-size: 28px;

  line-height: 1;
}


#continueWatchButton:hover {
  transform:
    translateY(-2px);

  box-shadow:
    0 10px 26px
    rgba(
      35,
      185,
      190,
      0.25
    );
}


/* =========================================================
   PAYMENT NOTE
========================================================= */

.watch-payment-note {
  margin:
    16px
    0
    0;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 9px;

  color: #667182;

  font-size: 13px;

  text-align: center;
}


.watch-lock {
  color: #747f8f;

  font-size: 13px;
}


/* =========================================================
   MOBILE
========================================================= */

@media (
  max-width: 680px
) {

  #watchDialog {
    width:
      calc(
        100% - 20px
      );

    border-radius: 20px;
  }


  .watch-dialog-content {
    padding:
      28px
      18px
      22px;
  }


  .watch-dialog-logo {
    justify-content: flex-start;

    margin:
      0
      44px
      24px
      0;

    gap: 10px;
  }


  .watch-logo-symbol {
    width: 46px;
    height: 46px;

    flex-basis: 46px;
  }


  .watch-logo-name {
    font-size: 23px;
  }


  .watch-logo-watch {
    font-size: 10px;

    letter-spacing: 5px;
  }


  .watch-dialog-content
  > h2 {
    font-size: 26px;
  }


  .watch-dialog-intro {
    font-size: 15px;
  }


  .watch-option {
    grid-template-columns:
      22px
      46px
      1fr;

    gap: 11px;

    padding:
      13px
      12px;
  }


  .watch-option-icon {
    width: 44px;
    height: 44px;
  }


  .watch-option-icon svg {
    width: 25px;
    height: 25px;
  }


  .watch-option-copy strong {
    font-size: 16px;
  }


  .watch-option-copy > span {
    font-size: 13px;
  }


  .watch-price-row {
    align-items: stretch;

    flex-direction: column;
  }


  #continueWatchButton {
    width: 100%;
  }
}
/* =========================================================
   GET US HOME WATCH PAYMENT
========================================================= */

.watch-payment-box {
  margin-top: 22px;
  padding-top: 22px;

  border-top:
    1px solid #e2e6eb;
}


.watch-payment-box.hidden {
  display: none;
}


.watch-payment-title {
  margin:
    0
    0
    14px;

  color:
    #0d2f63;

  font-size:
    17px;

  font-weight:
    800;

  text-align:
    center;
}


#paypal-button-container {
  max-width:
    500px;

  margin:
    0 auto;
}


.watch-payment-cancel {
  display:
    block;

  margin:
    14px
    auto
    0;

  padding:
    8px
    18px;

  border:
    0;

  background:
    transparent;

  color:
    #617083;

  font-size:
    14px;

  font-weight:
    700;

  cursor:
    pointer;
}


.watch-payment-cancel:hover {
  color:
    #0d2f63;
}

.watch-validation-message {
  margin: 18px 0 8px;
  padding: 12px 16px;

  border: 1px solid #f3b7b7;
  border-radius: 10px;

  background: #fff4f4;

  color: #a32020;

  font-size: 14px;
  font-weight: 700;

  text-align: center;
}

.watch-validation-message.hidden {
  display: none;
}

/* =========================================================
   HOMEPAGE WATCH LOGO — WHITE VERSION
========================================================= */

.watch-panel .watch-logo-name {
  color: #ffffff !important;
}

.watch-panel .watch-logo-watch {
  color: #ffffff !important;
}

.watch-panel .watch-logo-watch span {
  background: #ff7425;
}

/* =========================================================
   LARGER HEADER BRANDING
========================================================= */

.topbar {
  min-height: 110px;
}

.header-logo {
  gap: 18px;
}

.small-logo {
  width: 72px;
  height: 72px;
}

.header-logo-text {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.header-brand-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.header-tagline {
  margin-top: 5px;

  color: #48d5d2;

  font-size: 11px;
  font-weight: 900;

  letter-spacing: 0.12em;

  text-transform: uppercase;
}

/* =========================================================
   FLIGHT CARD TEXT VISIBILITY FIX
========================================================= */

.flight-card .flight-body,
.flight-card .carrier,
.flight-card .time,
.flight-card .price {
  color: var(--ink) !important;
}

/* =========================================================
   WATCH THIS FLIGHT BUTTON
========================================================= */

.flight-card .watch-this-flight-button {
  background: var(--orange) !important;
  color: white !important;
  border: 0 !important;
}

.flight-card .watch-this-flight-button:hover {
  background: #e85f13 !important;
  color: white !important;
}

/* =========================================================
   FLIGHT WATCH CRITERIA
========================================================= */

.watch-criteria-box {
  margin: 24px 0;
  padding: 22px;
  background: #f5fbfc;
  border: 1px solid #d8e8eb;
  border-radius: 18px;
}

.watch-criteria-title {
  margin-bottom: 18px;
  font-size: 20px;
  font-weight: 800;
  color: #062b59;
}

.watch-criteria-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.watch-criteria-grid > div {
  min-width: 0;
}

.watch-criteria-grid span {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #60758a;
}

.watch-criteria-grid strong {
  display: block;
  font-size: 16px;
  line-height: 1.3;
  color: #062b59;
}

@media (max-width: 700px) {
  .watch-criteria-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.search-heading h2 {
  color: #22d3d6;
  font-size: clamp(32px, 3vw, 44px);
  line-height: 1.1;
  margin: 10px 0 12px;
  font-weight: 800;
}

/* =========================================================
   HOMEPAGE — FINAL RESPONSIVE DESIGN
   White hero + right image + Flight Watch benefit cards
========================================================= */

/* HERO LAYOUT */
.hero {
  width: 100%;
  padding: 38px clamp(24px, 5vw, 80px) 56px;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.75fr);
  column-gap: 64px;
  row-gap: 34px;
  align-items: center;
  background: #ffffff;
  color: var(--navy-deep);
}

.hero-copy {
  width: 100%;
  max-width: 860px;
}

.hero .eyebrow {
  margin: 0 0 14px;
  color: var(--navy);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.hero h1 {
  max-width: 820px;
  margin: 0 0 18px;
  color: var(--navy);
  font-size: clamp(44px, 4.4vw, 66px);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.045em;
}

.hero-text {
  max-width: 780px;
  margin: 0;
  color: #34567f;
  font-size: 19px;
  line-height: 1.55;
}

/* HERO IMAGE */
.homepage-image-wrap {
  position: relative;
  width: 100%;
  max-width: 470px;
  height: 245px;
  justify-self: end;
  overflow: hidden;
  border-radius: 18px;
  background: #eef3f7;
  box-shadow: 0 12px 32px rgba(7, 29, 61, 0.10);
}

.homepage-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.homepage-image-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(7, 29, 61, 0.24), transparent 48%);
}

.image-caption {
  position: absolute;
  z-index: 2;
  left: 18px;
  bottom: 15px;
  margin: 0;
  padding: 9px 13px 9px 16px;
  border-left: 4px solid var(--orange);
  border-radius: 7px;
  background: rgba(7, 29, 61, 0.90);
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.28;
  letter-spacing: 0.02em;
}

/* FLIGHT WATCH HOMEPAGE PANEL */
.hero > .watch-panel {
  grid-column: 1 / -1;
  width: 100%;
  margin: 0;
  padding: 26px;
  display: block;
  border: 1px solid #d7e8f4;
  border-radius: 20px;
  background: #eef8ff;
  color: var(--navy-deep);
  box-shadow: none;
}

.watch-home-header {
  display: grid;
  grid-template-columns: 285px minmax(0, 1fr) auto;
  gap: 26px;
  align-items: center;
}

.hero > .watch-panel .watch-dialog-logo {
  justify-content: flex-start;
  margin: 0;
  padding-right: 24px;
  border-right: 1px solid #a9c3da;
}

.hero > .watch-panel .watch-logo-symbol {
  width: 68px;
  height: 68px;
  flex: 0 0 68px;
  border: 2px solid var(--orange);
  border-radius: 50%;
}

.hero > .watch-panel .watch-logo-name {
  color: var(--navy) !important;
  font-size: 25px;
}

.hero > .watch-panel .watch-logo-watch {
  color: var(--navy) !important;
  font-size: 11px;
  letter-spacing: 3px;
}

.hero > .watch-panel .watch-logo-watch span {
  background: var(--orange);
}

.watch-home-intro h2 {
  margin: 0 0 9px;
  color: var(--navy);
  font-size: clamp(25px, 2.2vw, 34px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.watch-home-intro p {
  max-width: 760px;
  margin: 0;
  color: #34567f;
  font-size: 15px;
  line-height: 1.5;
}

.watch-home-cta {
  min-width: 235px;
  text-align: center;
}

.hero > .watch-panel .watch-button {
  width: 100%;
  min-width: 0;
  padding: 16px 24px;
  border: 0;
  border-radius: 11px;
  background: var(--orange);
  color: #ffffff;
  font-size: 16px;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(255, 118, 40, 0.18);
}

.hero > .watch-panel .watch-button:hover {
  background: #e85f13;
  color: #ffffff;
}

.hero > .watch-panel .watch-price-description {
  margin: 10px 0 0;
  color: var(--navy);
  font-size: 12px;
  font-weight: 900;
}

/* WATCH BENEFIT CARDS */
.watch-benefit-grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.watch-benefit-card {
  min-width: 0;
  min-height: 178px;
  padding: 20px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border: 1px solid #e1eaf1;
  border-radius: 15px;
  background: #ffffff;
  box-shadow: 0 5px 15px rgba(7, 29, 61, 0.04);
}

.watch-benefit-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #eef6fb;
  color: var(--navy);
}

.watch-benefit-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.watch-benefit-icon svg circle:first-of-type {
  fill: var(--orange);
  stroke: var(--orange);
}

.watch-benefit-card h3 {
  margin: 2px 0 8px;
  color: var(--navy);
  font-size: 16px;
  font-weight: 900;
  line-height: 1.2;
}

.watch-benefit-card p {
  margin: 0;
  color: #536d88;
  font-size: 13px;
  line-height: 1.48;
}

/* SEARCH INTRO */
.search-heading {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: 10px;
}

.search-heading .eyebrow {
  margin: 0;
  color: var(--navy);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.search-heading h2 {
  margin: 8px 0 8px;
  color: var(--navy);
  font-size: clamp(32px, 3vw, 44px);
  line-height: 1.05;
  font-weight: 900;
}

.search-heading #resultsNote {
  max-width: 900px;
  margin: 0;
  color: #34567f;
  font-size: 15px;
  line-height: 1.5;
}

/* SEARCH PANEL ON WHITE HOMEPAGE */
.hero > .search-panel {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: -12px;
  padding: 20px;
  border-radius: 18px;
  background: #f4f7fa;
}

.hero .trip-button {
  color: #48627f;
}

.hero .trip-button.active {
  background: var(--navy);
  color: #ffffff;
}

.hero .cabin {
  color: var(--navy);
}

.hero .cabin select {
  border: 1px solid #d7e1ea;
  background: #ffffff;
  color: var(--ink);
}

.hero .pill {
  border: 1px solid #d9e2ea;
  background: #ffffff;
  color: var(--navy);
}

.hero .pill input[type="number"] {
  color: var(--ink);
}

/* HEADER — KEEP LARGE BRAND TREATMENT */
.topbar {
  min-height: 110px;
}

.small-logo {
  width: 72px;
  height: 72px;
}

.header-logo-text {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 0.06em;
}

/* TABLET */
@media (max-width: 1100px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) 340px;
    column-gap: 34px;
  }

  .hero h1 {
    font-size: clamp(42px, 5vw, 58px);
  }

  .watch-home-header {
    grid-template-columns: 240px minmax(0, 1fr);
  }

  .watch-home-cta {
    grid-column: 1 / -1;
    width: min(100%, 320px);
    min-width: 0;
    justify-self: end;
  }

  .watch-benefit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* MOBILE */
@media (max-width: 720px) {
  .topbar {
    min-height: 76px;
    padding: 0 16px;
  }

  .small-logo {
    width: 46px;
    height: 46px;
  }

  .header-logo {
    gap: 11px;
  }

  .header-logo-text {
    font-size: 17px;
    letter-spacing: 0.045em;
  }

  .domain-label,
  .status-badge {
    display: none;
  }

  .hero {
    padding: 30px 18px 42px;
    display: block;
  }

  .hero .eyebrow {
    margin-bottom: 11px;
    font-size: 11px;
  }

  .hero h1 {
    margin-bottom: 16px;
    font-size: clamp(38px, 11vw, 48px);
    line-height: 1.03;
  }

  .hero h1 br {
    display: none;
  }

  .hero-text {
    font-size: 17px;
    line-height: 1.5;
  }

  .homepage-image-wrap {
    width: 100%;
    max-width: none;
    height: 225px;
    margin-top: 26px;
    border-radius: 16px;
  }

  .image-caption {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: fit-content;
    max-width: calc(100% - 24px);
    font-size: 10px;
  }

  .hero > .watch-panel {
    margin-top: 28px;
    padding: 20px 16px;
    border-radius: 18px;
  }

  .watch-home-header {
    display: block;
  }

  .hero > .watch-panel .watch-dialog-logo {
    width: 100%;
    justify-content: flex-start;
    margin: 0 0 20px;
    padding: 0 0 20px;
    border-right: 0;
    border-bottom: 1px solid #b9cfe1;
  }

  .hero > .watch-panel .watch-logo-symbol {
    width: 56px;
    height: 56px;
    flex-basis: 56px;
  }

  .hero > .watch-panel .watch-logo-name {
    font-size: 22px;
  }

  .watch-home-intro h2 {
    font-size: 28px;
  }

  .watch-home-intro p {
    margin-top: 10px;
    font-size: 14px;
  }

  .watch-home-cta {
    width: 100%;
    margin-top: 20px;
  }

  .hero > .watch-panel .watch-button {
    width: 100%;
    white-space: normal;
  }

  .watch-benefit-grid {
    margin-top: 20px;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .watch-benefit-card {
    min-height: 0;
    padding: 17px;
  }

  .search-heading {
    margin-top: 34px;
  }

  .search-heading h2 {
    font-size: 34px;
  }

  .hero > .search-panel {
    margin-top: 18px;
    padding: 14px;
  }

  .trip-row {
    align-items: stretch;
  }

  .segments {
    width: 100%;
  }

  .trip-button {
    flex: 1;
  }

  .cabin {
    width: 100%;
    justify-content: space-between;
  }

  .cabin select {
    min-width: 0;
    width: 58%;
  }

  .search-grid {
    grid-template-columns: 1fr;
    gap: 9px;
    background: transparent;
    box-shadow: none;
  }

  .airport-field,
  .search-grid > label {
    border: 1px solid #e2e8ef;
    border-radius: 12px;
    background: #ffffff;
  }

  .swap {
    display: none;
  }

  .search-button {
    min-height: 58px;
    border-radius: 12px;
  }

  .filter-row {
    align-items: stretch;
  }

  .pill {
    flex: 1 1 145px;
    justify-content: center;
  }
}

/* EXTRA SMALL PHONES */
@media (max-width: 420px) {
  .hero {
    padding-left: 14px;
    padding-right: 14px;
  }

  .hero h1 {
    font-size: 38px;
  }

  .homepage-image-wrap {
    height: 205px;
  }

  .watch-benefit-card {
    flex-direction: column;
  }

  .watch-benefit-icon {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  .search-heading h2 {
    font-size: 31px;
  }
}

/* =========================================================
   GET US HOME — FINAL HOMEPAGE DESIGN
   Header + Hero + Flight Watch + Recovery Search
   Desktop / Tablet / Mobile
========================================================= */


/* =========================================================
   MAIN HEADER
========================================================= */

.topbar {
  min-height: 120px;

  padding:
    18px
    clamp(36px, 5vw, 90px);

  display: flex;
  align-items: center;
  justify-content: space-between;

  background: var(--navy);

  color: #ffffff;
}


.header-logo {
  display: flex;
  align-items: center;

  gap: 20px;

  color: #ffffff;

  text-decoration: none;
}


.small-logo {
  width: 82px;
  height: 82px;

  flex: 0 0 82px;
}


.header-logo-text {
  color: #ffffff;

  font-size: 30px;
  font-weight: 900;

  letter-spacing: 0.055em;
}


.top-actions {
  display: flex;
  align-items: center;

  gap: 14px;
}


.domain-label {
  color: #ffffff;

  font-size: 16px;
  font-weight: 700;
}


.status-badge {
  font-size: 13px;
}


.status-badge.good {
  color: #bff5dc;
}


/* =========================================================
   HERO
========================================================= */

.hero {
  width: 100%;

  padding:
    42px
    clamp(36px, 5vw, 90px)
    0;

  display: grid;

  grid-template-columns:
    minmax(0, 1.35fr)
    minmax(390px, 0.65fr);

  column-gap: clamp(48px, 6vw, 90px);
  row-gap: 0;

  align-items: center;

  background:
    linear-gradient(
      120deg,
      #082f63 0%,
      #0c4384 55%,
      #0d559e 100%
    );

  color: #ffffff;
}


/* =========================================================
   HERO COPY
========================================================= */

.hero-copy {
  width: 100%;
  max-width: 900px;

  padding-bottom: 42px;
}


.hero .hero-copy .eyebrow {
  margin: 0 0 17px;

  color: #48d5d2;

  font-size: 13px;
  font-weight: 900;

  letter-spacing: 0.13em;

  text-transform: uppercase;
}


.hero .hero-copy h1 {
  max-width: 880px;

  margin: 0 0 20px;

  color: #ffffff;

  font-size:
    clamp(
      50px,
      4.3vw,
      70px
    );

  font-weight: 900;

  line-height: 1.02;

  letter-spacing: -0.04em;
}


.hero .hero-text {
  max-width: 860px;

  margin: 0;

  color:
    rgba(
      255,
      255,
      255,
      0.92
    );

  font-size: 18px;

  line-height: 1.5;
}


/* =========================================================
   HERO IMAGE
========================================================= */

.hero > .homepage-image-wrap {
  position: relative;

  width: 100%;
  max-width: 560px;

  height: 300px;

  justify-self: end;

  margin: 0 0 42px;

  overflow: hidden;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.17
    );

  border-radius: 22px;

  background: #0b315f;

  box-shadow:
    0 20px 50px
    rgba(
      0,
      15,
      40,
      0.24
    );
}


.hero > .homepage-image-wrap .homepage-image {
  display: block;

  width: 100%;
  height: 100%;

  min-height: 0;

  object-fit: cover;

  object-position: center center;
}


.hero > .homepage-image-wrap::after {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      to top,
      rgba(
        5,
        32,
        67,
        0.27
      ),
      transparent 50%
    );
}


.hero > .homepage-image-wrap .image-caption {
  position: absolute;

  z-index: 2;

  left: 20px;
  bottom: 18px;

  width: fit-content;
  max-width: 310px;

  margin: 0;

  padding:
    10px
    15px;

  border-left:
    5px solid
    var(--orange);

  border-radius: 8px;

  background:
    rgba(
      5,
      39,
      83,
      0.92
    );

  color: #ffffff;

  font-size: 12px;
  font-weight: 900;

  line-height: 1.25;

  letter-spacing: 0.015em;
}


/* =========================================================
   FLIGHT WATCH — FULL WIDTH BAND
========================================================= */

.hero > .watch-panel {
  grid-column: 1 / -1;

  width:
    calc(
      100% +
      (2 * clamp(36px, 5vw, 90px))
    );

  margin-left:
    calc(
      -1 *
      clamp(36px, 5vw, 90px)
    );

  margin-right:
    calc(
      -1 *
      clamp(36px, 5vw, 90px)
    );

  margin-top: 0;

  padding:
    28px
    clamp(36px, 5vw, 90px)
    30px;

  display: block;

  border: 0;
  border-radius: 0;

  background: #edf7fd;

  color: var(--navy-deep);

  box-shadow: none;
}


/* =========================================================
   FLIGHT WATCH TOP ROW
========================================================= */

.hero > .watch-panel .watch-home-header {
  width: 100%;
  max-width: 1600px;

  margin: 0 auto;

  display: grid;

  grid-template-columns:
    minmax(275px, 0.8fr)
    minmax(400px, 1.65fr)
    minmax(235px, 0.7fr);

  gap: 34px;

  align-items: center;
}


/* =========================================================
   FLIGHT WATCH LOGO
========================================================= */

.hero > .watch-panel .watch-dialog-logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;

  gap: 16px;

  margin: 0;

  padding-right: 30px;

  border-right:
    1px solid
    #a6bed2;
}


.hero > .watch-panel .watch-logo-symbol {
  width: 70px;
  height: 70px;

  flex:
    0
    0
    70px;
}


.hero > .watch-panel .watch-logo-name {
  color: var(--navy) !important;

  font-size: 25px;
  font-weight: 900;

  line-height: 1;
}


.hero > .watch-panel .watch-logo-watch {
  color: var(--navy) !important;

  font-size: 11px;
  font-weight: 900;

  letter-spacing: 2.5px;
}


.hero > .watch-panel .watch-logo-watch span {
  background: var(--orange);
}


/* =========================================================
   WATCH INTRO
========================================================= */

.hero > .watch-panel .watch-home-intro h2 {
  margin: 0 0 8px;

  color: var(--navy);

  font-size:
    clamp(
      25px,
      2vw,
      32px
    );

  font-weight: 900;

  line-height: 1.08;

  letter-spacing: -0.02em;
}


.hero > .watch-panel .watch-home-intro p {
  max-width: 760px;

  margin: 0;

  color: #345575;

  font-size: 15px;

  line-height: 1.5;
}


/* =========================================================
   WATCH CTA
========================================================= */

.hero > .watch-panel .watch-home-cta {
  width: 100%;

  text-align: center;
}


.hero > .watch-panel .watch-home-cta .watch-button {
  width: 100%;

  min-width: 230px;

  padding:
    16px
    23px;

  border: 0;
  border-radius: 11px;

  background: var(--orange);

  color: #ffffff;

  font-size: 16px;
  font-weight: 900;

  white-space: nowrap;

  box-shadow:
    0 8px 20px
    rgba(
      255,
      118,
      40,
      0.18
    );
}


.hero > .watch-panel .watch-home-cta .watch-button:hover {
  background: #e85f13;
}


.hero > .watch-panel .watch-price-description {
  margin: 10px 0 0;

  color: var(--navy);

  font-size: 13px;
  font-weight: 900;

  text-align: center;
}


/* =========================================================
   WATCH BENEFIT GRID
========================================================= */

.hero > .watch-panel .watch-benefit-grid {
  width: 100%;
  max-width: 1600px;

  margin: 24px auto 0;

  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  gap: 16px;
}


/* =========================================================
   WATCH BENEFIT CARDS
========================================================= */

.hero > .watch-panel .watch-benefit-card {
  min-width: 0;

  margin: 0;

  padding: 18px;

  display: flex;

  align-items: flex-start;

  gap: 14px;

  border:
    1px solid
    #dbe7ef;

  border-radius: 14px;

  background: #ffffff;

  color: #385874;

  box-shadow:
    0 5px 16px
    rgba(
      7,
      29,
      61,
      0.04
    );
}


.hero > .watch-panel .watch-benefit-card h3 {
  margin: 0 0 7px;

  color: var(--navy);

  font-size: 15px;
  font-weight: 900;

  line-height: 1.25;
}


.hero > .watch-panel .watch-benefit-card p {
  margin: 0;

  color: #587087;

  font-size: 12px;

  line-height: 1.45;
}


/* =========================================================
   BENEFIT ICONS
========================================================= */

.hero > .watch-panel .watch-benefit-icon {
  width: 42px;
  height: 42px;

  flex:
    0
    0
    42px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #edf5fb;
}


.hero > .watch-panel .watch-benefit-icon svg {
  width: 22px;
  height: 22px;

  fill: none;

  stroke: var(--orange);

  stroke-width: 1.8;

  stroke-linecap: round;
  stroke-linejoin: round;
}


/* =========================================================
   RECOVERY SEARCH — FINAL BLUE VERSION
========================================================= */

.hero > .search-heading {
  grid-column: 1 / -1;

  width:
    calc(
      100% +
      (2 * clamp(36px, 5vw, 90px))
    );

  margin-left:
    calc(
      -1 *
      clamp(36px, 5vw, 90px)
    );

  margin-right:
    calc(
      -1 *
      clamp(36px, 5vw, 90px)
    );

  margin-top: 0;

  padding:
    44px
    clamp(36px, 5vw, 90px)
    16px;

  background:
    linear-gradient(
      120deg,
      #082f63 0%,
      #0c4384 55%,
      #0d559e 100%
    );

  color: #ffffff;
}


/* =========================================================
   SEARCH SECTION EYEBROW
========================================================= */

.hero > .search-heading .eyebrow,
.hero > .search-heading .eyebrow.dark {
  margin: 0 0 12px;

  color: #48d5d2 !important;

  font-size: 13px;
  font-weight: 900;

  letter-spacing: 0.13em;

  text-transform: uppercase;
}


/* =========================================================
   SEARCH SECTION HEADLINE
========================================================= */

.hero > .search-heading h2 {
  margin: 0 0 10px;

  color: #ffffff !important;

  font-size:
    clamp(
      40px,
      3.5vw,
      56px
    );

  font-weight: 900;

  line-height: 1.03;

  letter-spacing: -0.035em;
}


/* =========================================================
   SEARCH DESCRIPTION
========================================================= */

.hero > .search-heading #resultsNote {
  max-width: 1100px;

  margin: 0;

  color:
    rgba(
      255,
      255,
      255,
      0.92
    ) !important;

  font-size: 16px;

  line-height: 1.55;
}


/* =========================================================
   SEARCH FORM BLUE BAND
========================================================= */

.hero > .search-panel {
  grid-column: 1 / -1;

  width:
    calc(
      100% +
      (2 * clamp(36px, 5vw, 90px))
    );

  margin-left:
    calc(
      -1 *
      clamp(36px, 5vw, 90px)
    );

  margin-right:
    calc(
      -1 *
      clamp(36px, 5vw, 90px)
    );

  margin-top: 0;

  padding:
    22px
    clamp(36px, 5vw, 90px)
    52px;

  background:
    linear-gradient(
      120deg,
      #082f63 0%,
      #0c4384 55%,
      #0d559e 100%
    );

  color: #ffffff;
}


/* =========================================================
   TRIP TYPE + CABIN ROW
========================================================= */

.hero .trip-row {
  margin-bottom: 18px;

  display: flex;

  align-items: center;
  justify-content: space-between;
}


.hero .segments {
  display: flex;

  align-items: center;

  gap: 8px;
}


/* =========================================================
   ROUND TRIP / ONE WAY BUTTONS
========================================================= */

.hero .trip-button {
  padding:
    12px
    20px;

  border: 1px solid transparent;
  border-radius: 999px;

  background: transparent;

  color: #ffffff !important;

  font-size: 16px;
  font-weight: 800;

  cursor: pointer;
}


.hero .trip-button.active {
  background: #ffffff;

  color: #123f7b !important;

  box-shadow:
    0 5px 14px
    rgba(
      0,
      0,
      0,
      0.08
    );
}


/* =========================================================
   CABIN
========================================================= */

.hero .cabin {
  display: flex;

  align-items: center;

  gap: 10px;

  color: #ffffff !important;

  font-size: 15px;
}


.hero .cabin select {
  min-width: 170px;

  padding:
    12px
    42px
    12px
    18px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.7
    );

  border-radius: 12px;

  background:
    rgba(
      255,
      255,
      255,
      0.05
    );

  color: #ffffff;

  font-size: 15px;
}


/* =========================================================
   MAIN WHITE SEARCH BAR
========================================================= */

.hero .search-grid {
  width: 100%;

  display: grid;

  grid-template-columns:
    minmax(220px, 1.1fr)
    52px
    minmax(260px, 1.3fr)
    minmax(190px, 0.8fr)
    minmax(180px, 0.75fr)
    minmax(300px, 1.35fr);

  align-items: stretch;

  gap: 0;

  overflow: hidden;

  border-radius: 20px;

  background: #ffffff;

  box-shadow:
    0 20px 45px
    rgba(
      0,
      20,
      50,
      0.2
    );
}


/* =========================================================
   SEARCH FIELDS
========================================================= */

.hero .airport-field,
.hero .search-grid > label {
  position: relative;

  min-width: 0;

  padding:
    20px
    24px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  border-right:
    1px solid
    #e1e7ed;

  background: #ffffff;

  color: #123f7b;
}


.hero .airport-field label,
.hero .search-grid > label {
  font-size: 12px;
  font-weight: 900;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}


.hero .airport-field input,
.hero .search-grid input,
.hero .search-grid select {
  width: 100%;

  margin-top: 6px;

  padding: 0;

  border: 0;
  outline: 0;

  background: transparent;

  color: #061f43;

  font-size: 18px;
  font-weight: 700;
}


.hero .airport-field input::placeholder {
  color: #777f89;

  opacity: 1;
}


/* =========================================================
   SWAP BUTTON
========================================================= */

.hero .swap {
  width: 52px;
  height: 52px;

  align-self: center;
  justify-self: center;

  z-index: 3;

  border:
    1px solid
    #dbe5ef;

  border-radius: 50%;

  background: #ffffff;

  color: #123f7b;

  font-size: 21px;

  cursor: pointer;

  box-shadow:
    0 4px 12px
    rgba(
      7,
      29,
      61,
      0.08
    );
}


/* =========================================================
   LARGE ORANGE SEARCH BUTTON
========================================================= */

.hero .search-button {
  width: 100%;
  height: 100%;

  min-height: 104px;

  padding:
    20px
    36px;

  border: 0;
  border-radius: 0;

  background: #ff7425;

  color: #ffffff;

  font-size: 22px;
  font-weight: 900;

  line-height: 1.15;

  cursor: pointer;

  white-space: normal;

  display: flex;

  align-items: center;
  justify-content: center;

  text-align: center;

  box-shadow: none;
}


.hero .search-button:hover {
  background: #e86014;
}


/* ROUND ONLY THE FAR RIGHT OF THE CTA */

.hero .search-grid .search-button {
  border-radius:
    0
    20px
    20px
    0;
}


/* =========================================================
   FILTER ROW
========================================================= */

.hero .filter-row {
  margin-top: 18px;

  display: flex;

  align-items: center;

  gap: 12px;

  flex-wrap: wrap;
}


/* =========================================================
   NONSTOP + MAX PRICE PILLS
========================================================= */

.hero .pill {
  min-height: 46px;

  padding:
    10px
    18px;

  display: flex;

  align-items: center;

  gap: 10px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.68
    );

  border-radius: 999px;

  background: transparent;

  color: #ffffff !important;

  font-size: 14px;
}


.hero .pill input[type="checkbox"] {
  width: 16px;
  height: 16px;
}


.hero .pill input[type="number"] {
  width: 82px;

  padding: 0;

  border: 0;

  background: transparent;

  color: #ffffff !important;

  font-size: 14px;

  outline: none;
}


.hero .pill input[type="number"]::placeholder {
  color:
    rgba(
      255,
      255,
      255,
      0.72
    );
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1150px) {

  .hero > .search-heading,
  .hero > .search-panel {
    width: calc(100% + 60px);

    margin-left: -30px;
    margin-right: -30px;
  }


  .hero > .search-heading {
    padding:
      40px
      30px
      14px;
  }


  .hero > .search-panel {
    padding:
      20px
      30px
      44px;
  }


  .hero .search-grid {
    grid-template-columns:
      minmax(180px, 1fr)
      48px
      minmax(210px, 1.2fr)
      minmax(165px, 0.8fr)
      minmax(150px, 0.7fr)
      minmax(230px, 1.1fr);
  }


  .hero .search-button {
    font-size: 19px;
  }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 720px) {

  .hero > .search-heading,
  .hero > .search-panel {
    width: calc(100% + 36px);

    margin-left: -18px;
    margin-right: -18px;
  }


  .hero > .search-heading {
    padding:
      34px
      18px
      12px;
  }


  .hero > .search-heading .eyebrow,
  .hero > .search-heading .eyebrow.dark {
    font-size: 10px;
  }


  .hero > .search-heading h2 {
    font-size: 36px;
  }


  .hero > .search-heading #resultsNote {
    font-size: 14px;
  }


  .hero > .search-panel {
    padding:
      18px
      18px
      38px;
  }


  .hero .trip-row {
    align-items: stretch;

    flex-direction: column;

    gap: 15px;
  }


  .hero .segments {
    width: 100%;
  }


  .hero .trip-button {
    flex: 1;

    text-align: center;
  }


  .hero .cabin {
    width: 100%;

    justify-content: space-between;
  }


  .hero .cabin select {
    flex: 1;

    max-width: 230px;
  }


  .hero .search-grid {
    display: grid;

    grid-template-columns: 1fr;

    gap: 10px;

    overflow: visible;

    border-radius: 0;

    background: transparent;

    box-shadow: none;
  }


  .hero .airport-field,
  .hero .search-grid > label {
    min-height: 76px;

    padding:
      16px
      18px;

    border: 0;

    border-radius: 12px;

    background: #ffffff;

    box-shadow:
      0 5px 16px
      rgba(
        0,
        20,
        50,
        0.12
      );
  }


  .hero .swap {
    display: none;
  }


  .hero .search-button {
    min-height: 64px;

    border-radius: 12px !important;

    font-size: 19px;
  }


  .hero .filter-row {
    margin-top: 14px;
  }


  .hero .pill {
    flex: 1;

    justify-content: center;
  }
}


/* =========================================================
   SEARCH FORM BAND
========================================================= */

.hero > .search-panel {
  grid-column: 1 / -1;

  width:
    calc(
      100% +
      (2 * clamp(36px, 5vw, 90px))
    );

  margin-left:
    calc(
      -1 *
      clamp(36px, 5vw, 90px)
    );

  margin-right:
    calc(
      -1 *
      clamp(36px, 5vw, 90px)
    );

  margin-top: 0;

  padding:
    22px
    clamp(36px, 5vw, 90px)
    50px;

  background: #ffffff;
}


/* =========================================================
   SEARCH CONTROLS ON WHITE BACKGROUND
========================================================= */

.hero .trip-button {
  color: #587087;
}


.hero .trip-button.active {
  background: var(--navy);

  color: #ffffff;
}


.hero .cabin {
  color: var(--navy);
}


.hero .cabin select {
  border:
    1px solid
    #dbe5ee;

  background: #ffffff;

  color: var(--ink);
}


.hero .pill {
  border:
    1px solid
    #d9e3ec;

  background: #f7f9fb;

  color: var(--navy);
}


.hero .pill input[type="number"] {
  color: var(--ink);
}


/* =========================================================
   SEARCH GRID
========================================================= */

.hero .search-grid {
  background: #ffffff;

  box-shadow:
    0 15px 42px
    rgba(
      7,
      29,
      61,
      0.12
    );
}


.hero .search-button {
  background: var(--orange);

  color: #ffffff;
}


.hero .search-button:hover {
  background: #e85f13;
}


/* =========================================================
   TABLET — LARGE
========================================================= */

@media (max-width: 1150px) {

  .topbar {
    min-height: 104px;

    padding:
      14px
      30px;
  }


  .small-logo {
    width: 70px;
    height: 70px;

    flex-basis: 70px;
  }


  .header-logo-text {
    font-size: 25px;
  }


  .hero {
    padding:
      38px
      30px
      0;

    grid-template-columns:
      minmax(0, 1.15fr)
      minmax(330px, 0.85fr);

    column-gap: 38px;
  }


  .hero .hero-copy h1 {
    font-size: 52px;
  }


  .hero > .homepage-image-wrap {
    height: 270px;

    margin-bottom: 36px;
  }


  .hero > .watch-panel,
  .hero > .search-heading,
  .hero > .search-panel {
    width: calc(100% + 60px);

    margin-left: -30px;
    margin-right: -30px;
  }


  .hero > .watch-panel {
    padding:
      26px
      30px
      30px;
  }


  .hero > .watch-panel .watch-home-header {
    grid-template-columns:
      260px
      minmax(0, 1fr);

    gap: 25px;
  }


  .hero > .watch-panel .watch-home-cta {
    grid-column: 1 / -1;

    max-width: 310px;

    justify-self: center;

    margin-top: 4px;
  }


  .hero > .watch-panel .watch-benefit-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  .hero > .search-heading {
    padding:
      40px
      30px
      10px;
  }


  .hero > .search-panel {
    padding:
      22px
      30px
      45px;
  }
}


/* =========================================================
   TABLET — PORTRAIT
========================================================= */

@media (max-width: 900px) {

  .hero {
    grid-template-columns: 1fr;

    padding-top: 34px;
  }


  .hero-copy {
    max-width: none;

    padding-bottom: 26px;
  }


  .hero .hero-copy h1 {
    max-width: 700px;

    font-size: 52px;
  }


  .hero > .homepage-image-wrap {
    width: 100%;
    max-width: none;

    height: 320px;

    justify-self: stretch;

    margin-bottom: 34px;
  }


  .hero > .watch-panel .watch-home-header {
    grid-template-columns: 1fr;
  }


  .hero > .watch-panel .watch-dialog-logo {
    padding-right: 0;
    padding-bottom: 20px;

    border-right: 0;

    border-bottom:
      1px solid
      #b8cada;
  }


  .hero > .watch-panel .watch-home-cta {
    max-width: 100%;
  }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 720px) {

  /* HEADER */

  .topbar {
    min-height: 82px;

    padding:
      11px
      18px;
  }


  .header-logo {
    gap: 11px;
  }


  .small-logo {
    width: 54px;
    height: 54px;

    flex-basis: 54px;
  }


  .header-logo-text {
    font-size: 18px;
  }


  .domain-label,
  .status-badge {
    display: none;
  }


  /* HERO */

  .hero {
    display: flex;

    flex-direction: column;

    padding:
      30px
      18px
      0;

    gap: 0;

    background:
      linear-gradient(
        145deg,
        #082f63 0%,
        #0d4f96 100%
      );
  }


  .hero-copy {
    width: 100%;

    padding-bottom: 26px;
  }


  .hero .hero-copy .eyebrow {
    margin-bottom: 12px;

    font-size: 10px;

    letter-spacing: 0.11em;
  }


  .hero .hero-copy h1 {
    margin-bottom: 16px;

    font-size:
      clamp(
        38px,
        11vw,
        48px
      );

    line-height: 1.02;
  }


  .hero .hero-text {
    font-size: 16px;

    line-height: 1.45;
  }


  /* IMAGE */

  .hero > .homepage-image-wrap {
    width: 100%;
    max-width: none;

    height: 230px;

    margin:
      0
      0
      28px;

    border-radius: 16px;
  }


  .hero > .homepage-image-wrap .image-caption {
    left: 12px;
    bottom: 12px;

    max-width:
      calc(
        100% - 24px
      );

    padding:
      8px
      10px;

    font-size: 10px;
  }


  /* FULL-WIDTH BANDS */

  .hero > .watch-panel,
  .hero > .search-heading,
  .hero > .search-panel {
    width: calc(100% + 36px);

    margin-left: -18px;
    margin-right: -18px;
  }


  /* WATCH */

  .hero > .watch-panel {
    padding:
      24px
      18px
      26px;
  }


  .hero > .watch-panel .watch-home-header {
    display: flex;

    flex-direction: column;

    align-items: stretch;

    gap: 20px;
  }


  .hero > .watch-panel .watch-dialog-logo {
    width: 100%;

    padding:
      0
      0
      18px;

    border-right: 0;

    border-bottom:
      1px solid
      #b9ccdc;
  }


  .hero > .watch-panel .watch-logo-symbol {
    width: 60px;
    height: 60px;

    flex-basis: 60px;
  }


  .hero > .watch-panel .watch-logo-name {
    font-size: 22px;
  }


  .hero > .watch-panel .watch-home-intro h2 {
    font-size: 27px;
  }


  .hero > .watch-panel .watch-home-intro p {
    font-size: 14px;
  }


  .hero > .watch-panel .watch-home-cta {
    width: 100%;

    max-width: none;
  }


  .hero > .watch-panel .watch-home-cta .watch-button {
    width: 100%;

    min-width: 0;
  }


  .hero > .watch-panel .watch-benefit-grid {
    margin-top: 22px;

    grid-template-columns: 1fr;

    gap: 12px;
  }


  .hero > .watch-panel .watch-benefit-card {
    padding: 16px;
  }


  /* SEARCH HEADING */

  .hero > .search-heading {
    padding:
      36px
      18px
      9px;
  }


  .hero > .search-heading h2 {
    font-size: 35px;
  }


  .hero > .search-heading #resultsNote {
    font-size: 14px;
  }


  /* SEARCH FORM */

  .hero > .search-panel {
    padding:
      18px
      18px
      38px;
  }


  .hero .trip-row {
    align-items: flex-start;

    flex-direction: column;
  }


  .hero .search-grid {
    display: grid;

    grid-template-columns: 1fr;

    gap: 9px;

    background: transparent;

    box-shadow: none;
  }


  .hero .airport-field,
  .hero .search-grid > label {
    border: 0;

    border-radius: 12px;

    background: #ffffff;

    box-shadow:
      0 4px 14px
      rgba(
        7,
        29,
        61,
        0.06
      );
  }


  .hero .swap {
    display: none;
  }


  .hero .search-button {
    min-height: 58px;

    width: 100%;

    border-radius: 12px;
  }


  .hero .filter-row {
    margin-top: 14px;
  }


  .hero .pill {
    background: #f7f9fb;
  }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

  .topbar {
    padding:
      10px
      14px;
  }


  .small-logo {
    width: 48px;
    height: 48px;

    flex-basis: 48px;
  }


  .header-logo-text {
    font-size: 16px;

    letter-spacing: 0.04em;
  }


  .hero {
    padding:
      27px
      15px
      0;
  }


  .hero .hero-copy h1 {
    font-size:
      clamp(
        36px,
        11.5vw,
        44px
      );
  }


  .hero .hero-text {
    font-size: 15px;
  }


  .hero > .homepage-image-wrap {
    height: 210px;
  }


  .hero > .watch-panel,
  .hero > .search-heading,
  .hero > .search-panel {
    width: calc(100% + 30px);

    margin-left: -15px;
    margin-right: -15px;
  }


  .hero > .watch-panel {
    padding:
      22px
      15px
      24px;
  }


  .hero > .search-heading {
    padding:
      32px
      15px
      8px;
  }


  .hero > .search-panel {
    padding:
      17px
      15px
      34px;
  }


  .hero > .watch-panel .watch-home-intro h2 {
    font-size: 25px;
  }


  .hero > .watch-panel .watch-benefit-icon {
    width: 38px;
    height: 38px;

    flex-basis: 38px;
  }
}

/* =========================================================
   FINAL RECOVERY SEARCH OVERRIDE
   BLUE SECTION + WHITE TEXT + LARGE ORANGE CTA
========================================================= */

/* SEARCH HEADING AREA */

.hero > .search-heading {
  grid-column: 1 / -1 !important;

  width: calc(100% + (2 * clamp(36px, 5vw, 90px))) !important;

  margin:
    0
    calc(-1 * clamp(36px, 5vw, 90px)) !important;

  padding:
    46px
    clamp(36px, 5vw, 90px)
    16px !important;

  background:
    linear-gradient(
      120deg,
      #082f63 0%,
      #0c4384 55%,
      #0d559e 100%
    ) !important;

  color: #ffffff !important;
}


/* TURQUOISE EYEBROW */

.hero > .search-heading .eyebrow,
.hero > .search-heading .eyebrow.dark {
  margin: 0 0 12px !important;

  color: #48d5d2 !important;

  font-size: 13px !important;
  font-weight: 900 !important;

  letter-spacing: 0.13em !important;

  text-transform: uppercase !important;
}


/* MAIN SEARCH HEADLINE */

.hero > .search-heading h2,
.hero > .search-heading #resultsTitle {
  margin: 0 0 11px !important;

  color: #ffffff !important;

  font-size: clamp(40px, 3.5vw, 56px) !important;
  font-weight: 900 !important;

  line-height: 1.03 !important;

  letter-spacing: -0.035em !important;
}


/* DESCRIPTION */

.hero > .search-heading #resultsNote {
  max-width: 1150px !important;

  margin: 0 !important;

  color: rgba(255, 255, 255, 0.94) !important;

  font-size: 16px !important;

  line-height: 1.55 !important;
}


/* =========================================================
   ENTIRE FORM AREA MUST ALSO BE BLUE
========================================================= */

.hero > form.search-panel,
.hero > .search-panel,
#searchForm {
  grid-column: 1 / -1 !important;

  width: calc(100% + (2 * clamp(36px, 5vw, 90px))) !important;

  margin:
    0
    calc(-1 * clamp(36px, 5vw, 90px)) !important;

  padding:
    22px
    clamp(36px, 5vw, 90px)
    54px !important;

  border: 0 !important;
  border-radius: 0 !important;

  background:
    linear-gradient(
      120deg,
      #082f63 0%,
      #0c4384 55%,
      #0d559e 100%
    ) !important;

  color: #ffffff !important;

  box-shadow: none !important;
}


/* =========================================================
   ROUND TRIP / ONE WAY / CABIN ROW
========================================================= */

#searchForm .trip-row {
  margin: 0 0 18px !important;

  display: flex !important;

  align-items: center !important;
  justify-content: space-between !important;

  background: transparent !important;
}


#searchForm .segments {
  display: flex !important;

  align-items: center !important;

  gap: 8px !important;
}


#searchForm .trip-button {
  padding: 12px 20px !important;

  border: 1px solid transparent !important;
  border-radius: 999px !important;

  background: transparent !important;

  color: #ffffff !important;

  font-size: 16px !important;
  font-weight: 800 !important;

  cursor: pointer !important;
}


#searchForm .trip-button.active {
  background: #ffffff !important;

  color: #123f7b !important;

  box-shadow:
    0 5px 14px
    rgba(0, 0, 0, 0.08) !important;
}


/* =========================================================
   CABIN
========================================================= */

#searchForm .cabin {
  display: flex !important;

  align-items: center !important;

  gap: 10px !important;

  color: #ffffff !important;

  font-size: 15px !important;

  background: transparent !important;
}


#searchForm .cabin select {
  min-width: 180px !important;

  padding:
    12px
    42px
    12px
    18px !important;

  border:
    1px solid
    rgba(255, 255, 255, 0.65) !important;

  border-radius: 12px !important;

  background: rgba(255, 255, 255, 0.06) !important;

  color: #ffffff !important;

  font-size: 15px !important;
}


/* OPTIONS NEED DARK TEXT WHEN DROPDOWN OPENS */

#searchForm .cabin select option {
  background: #ffffff !important;

  color: #082f63 !important;
}


/* =========================================================
   WHITE FLIGHT SEARCH BAR
========================================================= */

#searchForm .search-grid {
  width: 100% !important;

  display: grid !important;

  grid-template-columns:
    minmax(220px, 1fr)
    52px
    minmax(260px, 1.2fr)
    minmax(190px, 0.72fr)
    minmax(180px, 0.68fr)
    minmax(360px, 1.35fr) !important;

  align-items: stretch !important;

  gap: 0 !important;

  overflow: hidden !important;

  border: 0 !important;

  border-radius: 20px !important;

  background: #ffffff !important;

  box-shadow:
    0 18px 42px
    rgba(0, 20, 50, 0.20) !important;
}


/* =========================================================
   SEARCH FIELDS
========================================================= */

#searchForm .airport-field,
#searchForm .search-grid > label {
  min-width: 0 !important;

  padding: 20px 24px !important;

  display: flex !important;

  flex-direction: column !important;

  justify-content: center !important;

  border: 0 !important;

  border-right: 1px solid #dfe6ed !important;

  border-radius: 0 !important;

  background: #ffffff !important;

  color: #123f7b !important;

  box-shadow: none !important;
}


#searchForm .airport-field label,
#searchForm .search-grid > label {
  color: #123f7b !important;

  font-size: 12px !important;
  font-weight: 900 !important;

  letter-spacing: 0.08em !important;

  text-transform: uppercase !important;
}


#searchForm .airport-field input,
#searchForm .search-grid input,
#searchForm .search-grid select {
  width: 100% !important;

  margin-top: 6px !important;

  padding: 0 !important;

  border: 0 !important;

  outline: 0 !important;

  background: transparent !important;

  color: #061f43 !important;

  font-size: 18px !important;
  font-weight: 700 !important;
}


#searchForm .airport-field input::placeholder {
  color: #747d88 !important;

  opacity: 1 !important;
}


/* =========================================================
   SWAP BUTTON
========================================================= */

#searchForm .swap {
  width: 52px !important;
  height: 52px !important;

  align-self: center !important;
  justify-self: center !important;

  z-index: 5 !important;

  border: 1px solid #d7e3ed !important;

  border-radius: 50% !important;

  background: #ffffff !important;

  color: #123f7b !important;

  font-size: 21px !important;

  box-shadow:
    0 5px 15px
    rgba(7, 29, 61, 0.09) !important;
}


/* =========================================================
   LARGE ORANGE FIND A WAY HOME BUTTON
========================================================= */

#searchForm .search-button {
  width: 100% !important;
  height: 100% !important;

  min-width: 0 !important;
  min-height: 112px !important;

  margin: 0 !important;

  padding: 20px 35px !important;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  border: 0 !important;

  border-radius:
    0
    20px
    20px
    0 !important;

  background: #ff7425 !important;

  color: #ffffff !important;

  font-size: 22px !important;
  font-weight: 900 !important;

  line-height: 1.15 !important;

  text-align: center !important;

  white-space: nowrap !important;

  box-shadow: none !important;

  cursor: pointer !important;
}


#searchForm .search-button:hover {
  background: #e86014 !important;
}


/* =========================================================
   FILTERS
========================================================= */

#searchForm .filter-row {
  margin-top: 18px !important;

  display: flex !important;

  align-items: center !important;

  gap: 12px !important;

  flex-wrap: wrap !important;

  background: transparent !important;
}


#searchForm .pill {
  min-height: 46px !important;

  padding: 10px 18px !important;

  display: flex !important;

  align-items: center !important;

  gap: 10px !important;

  border:
    1px solid
    rgba(255, 255, 255, 0.65) !important;

  border-radius: 999px !important;

  background: transparent !important;

  color: #ffffff !important;

  font-size: 14px !important;

  box-shadow: none !important;
}


#searchForm .pill input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
}


#searchForm .pill input[type="number"] {
  width: 85px !important;

  margin: 0 !important;

  padding: 0 !important;

  border: 0 !important;

  background: transparent !important;

  color: #ffffff !important;

  font-size: 14px !important;

  outline: none !important;
}


#searchForm .pill input[type="number"]::placeholder {
  color: rgba(255, 255, 255, 0.72) !important;

  opacity: 1 !important;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1150px) {

  .hero > .search-heading,
  .hero > form.search-panel,
  .hero > .search-panel,
  #searchForm {
    width: calc(100% + 60px) !important;

    margin-left: -30px !important;
    margin-right: -30px !important;
  }


  .hero > .search-heading {
    padding:
      40px
      30px
      14px !important;
  }


  .hero > form.search-panel,
  .hero > .search-panel,
  #searchForm {
    padding:
      20px
      30px
      44px !important;
  }


  #searchForm .search-grid {
    grid-template-columns:
      minmax(170px, 1fr)
      48px
      minmax(200px, 1.1fr)
      minmax(160px, 0.75fr)
      minmax(145px, 0.65fr)
      minmax(260px, 1.2fr) !important;
  }


  #searchForm .search-button {
    font-size: 19px !important;

    padding:
      18px
      22px !important;
  }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 720px) {

  .hero > .search-heading,
  .hero > form.search-panel,
  .hero > .search-panel,
  #searchForm {
    width: calc(100% + 36px) !important;

    margin-left: -18px !important;
    margin-right: -18px !important;
  }


  .hero > .search-heading {
    padding:
      34px
      18px
      12px !important;
  }


  .hero > .search-heading .eyebrow,
  .hero > .search-heading .eyebrow.dark {
    font-size: 10px !important;
  }


  .hero > .search-heading h2,
  .hero > .search-heading #resultsTitle {
    font-size: 36px !important;
  }


  .hero > .search-heading #resultsNote {
    font-size: 14px !important;
  }


  .hero > form.search-panel,
  .hero > .search-panel,
  #searchForm {
    padding:
      18px
      18px
      38px !important;
  }


  #searchForm .trip-row {
    flex-direction: column !important;

    align-items: stretch !important;

    gap: 15px !important;
  }


  #searchForm .segments {
    width: 100% !important;
  }


  #searchForm .trip-button {
    flex: 1 !important;

    text-align: center !important;
  }


  #searchForm .cabin {
    width: 100% !important;

    justify-content: space-between !important;
  }


  #searchForm .cabin select {
    flex: 1 !important;

    max-width: 230px !important;
  }


  #searchForm .search-grid {
    display: grid !important;

    grid-template-columns: 1fr !important;

    gap: 10px !important;

    overflow: visible !important;

    border-radius: 0 !important;

    background: transparent !important;

    box-shadow: none !important;
  }


  #searchForm .airport-field,
  #searchForm .search-grid > label {
    min-height: 76px !important;

    padding:
      16px
      18px !important;

    border: 0 !important;

    border-radius: 12px !important;

    background: #ffffff !important;

    box-shadow:
      0 5px 16px
      rgba(0, 20, 50, 0.12) !important;
  }


  #searchForm .swap {
    display: none !important;
  }


  #searchForm .search-button {
    min-height: 66px !important;

    border-radius: 12px !important;

    font-size: 19px !important;

    white-space: normal !important;
  }


  #searchForm .filter-row {
    margin-top: 15px !important;
  }


  #searchForm .pill {
    flex: 1 !important;

    justify-content: center !important;
  }
}

/* =========================================================
   FIX ROUND-TRIP SEARCH BAR LAYOUT
========================================================= */

#searchForm .search-grid {
  grid-template-columns:
    minmax(190px, 1fr)
    52px
    minmax(220px, 1.15fr)
    minmax(170px, 0.72fr)
    minmax(170px, 0.72fr)
    minmax(155px, 0.65fr)
    minmax(310px, 1.3fr) !important;

  align-items: stretch !important;
}


/* KEEP ORANGE CTA IN THE FAR-RIGHT COLUMN */

#searchForm .search-button {
  grid-column: 7 !important;
  grid-row: 1 !important;

  width: 100% !important;
  height: 100% !important;

  min-height: 108px !important;

  border-radius:
    0
    20px
    20px
    0 !important;
}


/* RETURN DATE */

#searchForm #returnWrap {
  grid-column: 5 !important;
}


/* TRAVELERS */

#searchForm #returnWrap + label {
  grid-column: 6 !important;
}


/* =========================================================
   ONE-WAY MODE
   CLOSE THE SPACE LEFT BY RETURN DATE
========================================================= */

#searchForm:has(#returnWrap.hidden) .search-grid,
#searchForm:has(#returnWrap[style*="display: none"]) .search-grid {
  grid-template-columns:
    minmax(210px, 1fr)
    52px
    minmax(260px, 1.25fr)
    minmax(190px, 0.8fr)
    minmax(180px, 0.7fr)
    minmax(340px, 1.35fr) !important;
}


#searchForm:has(#returnWrap.hidden) .search-button,
#searchForm:has(#returnWrap[style*="display: none"]) .search-button {
  grid-column: 6 !important;
}


/* =========================================================
   MOBILE — RETURN TO SINGLE COLUMN
========================================================= */

@media (max-width: 720px) {

  #searchForm .search-grid,
  #searchForm:has(#returnWrap.hidden) .search-grid,
  #searchForm:has(#returnWrap[style*="display: none"]) .search-grid {
    grid-template-columns: 1fr !important;
  }


  #searchForm #returnWrap,
  #searchForm #returnWrap + label,
  #searchForm .search-button {
    grid-column: 1 !important;
    grid-row: auto !important;
  }


  #searchForm .search-button {
    min-height: 66px !important;

    border-radius: 12px !important;
  }
}

/* =========================================================
   FINAL SEARCH BAR COLUMN FIX
   Keep every field + CTA on one row
========================================================= */

/* ROUND TRIP — 7 COLUMNS */

#searchForm .search-grid {
  display: grid !important;

  grid-template-columns:
    minmax(190px, 1fr)      /* From */
    52px                    /* Swap */
    minmax(220px, 1.15fr)   /* To */
    minmax(175px, 0.72fr)   /* Depart */
    minmax(175px, 0.72fr)   /* Return */
    minmax(150px, 0.62fr)   /* Travelers */
    minmax(300px, 1.25fr) !important; /* CTA */

  grid-template-rows: 1fr !important;

  align-items: stretch !important;

  min-height: 112px !important;

  overflow: hidden !important;
}


/* FROM */

#searchForm .search-grid > .airport-field:nth-child(1) {
  grid-column: 1 !important;
  grid-row: 1 !important;
}


/* SWAP */

#searchForm #swapButton {
  grid-column: 2 !important;
  grid-row: 1 !important;

  align-self: center !important;
  justify-self: center !important;
}


/* TO */

#searchForm .search-grid > .airport-field:nth-child(3) {
  grid-column: 3 !important;
  grid-row: 1 !important;
}


/* DEPART */

#searchForm .search-grid > label:nth-child(4) {
  grid-column: 4 !important;
  grid-row: 1 !important;
}


/* RETURN */

#searchForm #returnWrap {
  grid-column: 5 !important;
  grid-row: 1 !important;
}


/* TRAVELERS */

#searchForm .search-grid > label:nth-child(6) {
  grid-column: 6 !important;
  grid-row: 1 !important;
}


/* ORANGE CTA */

#searchForm .search-button {
  grid-column: 7 !important;
  grid-row: 1 !important;

  width: 100% !important;
  height: 100% !important;

  min-height: 112px !important;

  margin: 0 !important;

  padding: 20px 28px !important;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  border-radius:
    0
    20px
    20px
    0 !important;

  background: #ff7425 !important;

  color: #ffffff !important;

  font-size: 21px !important;
  font-weight: 900 !important;

  white-space: nowrap !important;
}


/* MAKE ALL WHITE FIELD CELLS SAME HEIGHT */

#searchForm .airport-field,
#searchForm .search-grid > label {
  min-height: 112px !important;

  padding: 20px 28px !important;

  justify-content: center !important;
}


/* =========================================================
   ONE WAY
   Remove return column completely
========================================================= */

#searchForm .search-grid:has(#returnWrap.hidden),
#searchForm .search-grid:has(#returnWrap[style*="display: none"]) {
  grid-template-columns:
    minmax(200px, 1fr)
    52px
    minmax(250px, 1.2fr)
    minmax(185px, 0.75fr)
    minmax(160px, 0.65fr)
    minmax(330px, 1.3fr) !important;
}


/* Travelers moves left when Return is hidden */

#searchForm .search-grid:has(#returnWrap.hidden) > label:nth-child(6),
#searchForm .search-grid:has(#returnWrap[style*="display: none"]) > label:nth-child(6) {
  grid-column: 5 !important;
}


/* CTA moves left when Return is hidden */

#searchForm .search-grid:has(#returnWrap.hidden) .search-button,
#searchForm .search-grid:has(#returnWrap[style*="display: none"]) .search-button {
  grid-column: 6 !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 720px) {

  #searchForm .search-grid,
  #searchForm .search-grid:has(#returnWrap.hidden),
  #searchForm .search-grid:has(#returnWrap[style*="display: none"]) {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;

    gap: 10px !important;

    min-height: 0 !important;

    overflow: visible !important;
  }


  #searchForm .search-grid > .airport-field,
  #searchForm .search-grid > label,
  #searchForm #swapButton,
  #searchForm .search-button {
    grid-column: 1 !important;
    grid-row: auto !important;
  }


  #searchForm #swapButton {
    display: none !important;
  }


  #searchForm .airport-field,
  #searchForm .search-grid > label {
    min-height: 76px !important;
  }


  #searchForm .search-button {
    min-height: 66px !important;

    border-radius: 12px !important;

    white-space: normal !important;
  }
}

/* =========================================================
   FINAL MOBILE SEARCH FIX
========================================================= */

@media (max-width: 720px) {

  /* BLUE SEARCH SECTION */

  #searchForm {
    width: calc(100% + 36px) !important;

    margin-left: -18px !important;
    margin-right: -18px !important;

    padding:
      18px
      18px
      36px !important;
  }


  /* TRIP TYPE */

  #searchForm .trip-row {
    display: block !important;

    margin-bottom: 20px !important;
  }


  #searchForm .segments {
    width: 100% !important;

    display: grid !important;

    grid-template-columns: 1fr 1fr !important;

    gap: 10px !important;

    margin-bottom: 16px !important;
  }


  #searchForm .trip-button {
    width: 100% !important;

    min-height: 52px !important;

    padding: 12px 14px !important;

    text-align: center !important;
  }


  /* CABIN */

  #searchForm .cabin {
    width: 100% !important;

    display: block !important;

    color: #ffffff !important;
  }


  #searchForm .cabin select {
    width: 100% !important;

    max-width: none !important;

    margin-top: 8px !important;

    min-height: 54px !important;

    padding:
      12px
      16px !important;
  }


  /* =====================================================
     MAIN SEARCH FIELDS
  ====================================================== */

  #searchForm .search-grid,
  #searchForm .search-grid:has(#returnWrap.hidden),
  #searchForm .search-grid:has(#returnWrap[style*="display: none"]) {

    display: grid !important;

    grid-template-columns: 1fr !important;

    grid-template-rows: auto !important;

    gap: 12px !important;

    width: 100% !important;

    min-height: 0 !important;

    overflow: visible !important;

    border-radius: 0 !important;

    background: transparent !important;

    box-shadow: none !important;
  }


  /* RESET ALL DESKTOP GRID POSITIONS */

  #searchForm .search-grid > * {
    grid-column: 1 !important;

    grid-row: auto !important;
  }


  /* HIDE SWAP BUTTON ON MOBILE */

  #searchForm #swapButton {
    display: none !important;
  }


  /* WHITE FIELD CARDS */

  #searchForm .airport-field,
  #searchForm .search-grid > label {

    width: 100% !important;

    min-width: 0 !important;

    min-height: 78px !important;

    padding:
      15px
      18px !important;

    display: flex !important;

    justify-content: center !important;

    border: 0 !important;

    border-radius: 14px !important;

    background: #ffffff !important;

    box-shadow:
      0 5px 14px
      rgba(0, 20, 50, 0.12) !important;

    overflow: visible !important;
  }


  /* FIELD LABELS */

  #searchForm .airport-field label,
  #searchForm .search-grid > label {

    color: #123f7b !important;

    font-size: 11px !important;

    font-weight: 900 !important;

    letter-spacing: 0.08em !important;
  }


  /* FIELD INPUTS */

  #searchForm .airport-field input,
  #searchForm .search-grid input,
  #searchForm .search-grid select {

    width: 100% !important;

    min-width: 0 !important;

    margin-top: 6px !important;

    font-size: 18px !important;

    line-height: 1.2 !important;

    white-space: normal !important;
  }


  /* RETURN FIELD */

  #searchForm #returnWrap {
    width: 100% !important;
  }


  /* TRAVELERS */

  #searchForm .search-grid > label:nth-child(6) {
    width: 100% !important;
  }


  /* =====================================================
     ORANGE CTA
  ====================================================== */

  #searchForm .search-button {

    grid-column: 1 !important;

    grid-row: auto !important;

    width: 100% !important;

    height: auto !important;

    min-height: 64px !important;

    margin: 0 !important;

    padding:
      16px
      18px !important;

    border-radius: 14px !important;

    font-size: 20px !important;

    line-height: 1.2 !important;

    white-space: normal !important;

    text-align: center !important;
  }


  /* =====================================================
     FILTERS
  ====================================================== */

  #searchForm .filter-row {

    display: grid !important;

    grid-template-columns: 1fr !important;

    gap: 10px !important;

    width: 100% !important;

    margin-top: 16px !important;
  }


  #searchForm .pill {

    width: 100% !important;

    min-height: 50px !important;

    justify-content: flex-start !important;

    padding:
      11px
      16px !important;
  }


  #searchForm .pill input[type="number"] {
    width: 100px !important;
  }
}

/* =========================================================
   FINAL MOBILE HOMEPAGE
   Larger branding + larger copy + stacked flight search
   KEEP THIS AS THE LAST CODE IN styles.css
========================================================= */

@media screen and (max-width: 720px) {

  /* =====================================================
     MAIN HEADER — LARGER MOBILE LOGO
  ====================================================== */

  .topbar {
    min-height: 94px !important;

    padding:
      12px
      18px !important;

    display: flex !important;
    align-items: center !important;
  }

  .header-logo {
    gap: 14px !important;
  }

  .small-logo {
    width: 64px !important;
    height: 64px !important;

    flex:
      0
      0
      64px !important;
  }

  .header-logo-text {
    font-size: 21px !important;
    font-weight: 900 !important;

    line-height: 1 !important;

    letter-spacing: 0.045em !important;
  }

  .domain-label,
  .status-badge {
    display: none !important;
  }


  /* =====================================================
     TOP HERO — SLIGHTLY LARGER MOBILE COPY
  ====================================================== */

  .hero {
    padding:
      34px
      18px
      0 !important;
  }

  .hero .hero-copy .eyebrow {
    margin-bottom: 14px !important;

    font-size: 12px !important;
    line-height: 1.35 !important;

    letter-spacing: 0.12em !important;
  }

  .hero .hero-copy h1 {
    margin-bottom: 19px !important;

    font-size:
      clamp(
        42px,
        11.5vw,
        50px
      ) !important;

    line-height: 1.02 !important;
  }

  .hero .hero-text {
    font-size: 17px !important;
    line-height: 1.55 !important;
  }


  /* =====================================================
     HERO IMAGE
  ====================================================== */

  .hero > .homepage-image-wrap {
    width: 100% !important;
    max-width: none !important;

    height: 235px !important;

    margin:
      0
      0
      28px !important;

    border-radius: 16px !important;
  }

  .hero > .homepage-image-wrap .image-caption {
    left: 12px !important;
    bottom: 12px !important;

    max-width:
      calc(
        100% - 24px
      ) !important;

    padding:
      9px
      11px !important;

    font-size: 11px !important;
  }


  /* =====================================================
     RECOVERY SEARCH HEADING
  ====================================================== */

  .hero > .search-heading {
    width:
      calc(
        100% + 36px
      ) !important;

    margin:
      0
      -18px !important;

    padding:
      38px
      18px
      14px !important;

    background:
      linear-gradient(
        120deg,
        #082f63 0%,
        #0c4384 55%,
        #0d559e 100%
      ) !important;

    color: #ffffff !important;
  }

  .hero > .search-heading .eyebrow,
  .hero > .search-heading .eyebrow.dark {
    margin:
      0
      0
      12px !important;

    color: #48d5d2 !important;

    font-size: 12px !important;
    font-weight: 900 !important;

    line-height: 1.35 !important;
    letter-spacing: 0.11em !important;
  }

  .hero > .search-heading h2,
  .hero > .search-heading #resultsTitle {
    margin:
      0
      0
      14px !important;

    color: #ffffff !important;

    font-size:
      clamp(
        40px,
        11vw,
        48px
      ) !important;

    font-weight: 900 !important;

    line-height: 1.02 !important;
  }

  .hero > .search-heading #resultsNote {
    margin: 0 !important;

    color:
      rgba(
        255,
        255,
        255,
        0.94
      ) !important;

    font-size: 17px !important;

    line-height: 1.55 !important;
  }


  /* =====================================================
     ENTIRE SEARCH FORM BLUE AREA
  ====================================================== */

  #searchForm {
    width:
      calc(
        100% + 36px
      ) !important;

    margin:
      0
      -18px !important;

    padding:
      22px
      18px
      40px !important;

    border: 0 !important;
    border-radius: 0 !important;

    background:
      linear-gradient(
        120deg,
        #082f63 0%,
        #0c4384 55%,
        #0d559e 100%
      ) !important;

    box-shadow: none !important;
  }


  /* =====================================================
     ROUND TRIP / ONE WAY
  ====================================================== */

  #searchForm .trip-row {
    width: 100% !important;

    display: block !important;

    margin:
      0
      0
      22px !important;
  }

  #searchForm .segments {
    width: 100% !important;

    display: grid !important;

    grid-template-columns:
      1fr
      1fr !important;

    gap: 10px !important;

    margin:
      0
      0
      18px !important;
  }

  #searchForm .trip-button {
    width: 100% !important;

    min-height: 56px !important;

    margin: 0 !important;

    padding:
      13px
      12px !important;

    border-radius: 999px !important;

    color: #ffffff !important;

    font-size: 18px !important;
    font-weight: 900 !important;

    text-align: center !important;
  }

  #searchForm .trip-button.active {
    background: #ffffff !important;

    color: #123f7b !important;
  }


  /* =====================================================
     CABIN — FULL WIDTH
  ====================================================== */

  #searchForm .cabin {
    width: 100% !important;

    display: block !important;

    margin: 0 !important;

    color: #ffffff !important;

    font-size: 17px !important;
  }

  #searchForm .cabin select {
    display: block !important;

    width: 100% !important;
    max-width: none !important;

    min-height: 58px !important;

    margin-top: 9px !important;

    padding:
      12px
      16px !important;

    border:
      1px solid
      rgba(
        255,
        255,
        255,
        0.65
      ) !important;

    border-radius: 14px !important;

    background:
      rgba(
        255,
        255,
        255,
        0.07
      ) !important;

    color: #ffffff !important;

    font-size: 18px !important;
  }

  #searchForm .cabin select option {
    background: #ffffff !important;

    color: #082f63 !important;
  }


  /* =====================================================
     FLIGHT SEARCH
     FORCE A TRUE VERTICAL STACK
  ====================================================== */

  #searchForm .search-grid,
  #searchForm .search-grid:has(#returnWrap.hidden),
  #searchForm .search-grid:has(
    #returnWrap[style*="display: none"]
  ) {
    width: 100% !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: stretch !important;

    gap: 12px !important;

    margin: 0 !important;
    padding: 0 !important;

    min-height: 0 !important;

    overflow: visible !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;

    box-shadow: none !important;
  }


  /* REMOVE ALL DESKTOP GRID POSITIONS */

  #searchForm .search-grid > * {
    grid-column: auto !important;
    grid-row: auto !important;

    order: initial !important;

    flex:
      0
      0
      auto !important;
  }


  /* NO SWAP ICON ON MOBILE */

  #searchForm #swapButton {
    display: none !important;
  }


  /* =====================================================
     STACKED WHITE SEARCH CARDS
  ====================================================== */

  #searchForm .airport-field,
  #searchForm .search-grid > label {
    box-sizing: border-box !important;

    width: 100% !important;
    max-width: 100% !important;

    min-width: 0 !important;
    min-height: 88px !important;

    margin: 0 !important;

    padding:
      16px
      18px !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: stretch !important;
    justify-content: center !important;

    border: 0 !important;

    border-radius: 14px !important;

    background: #ffffff !important;

    color: #123f7b !important;

    box-shadow:
      0
      5px
      15px
      rgba(
        0,
        20,
        50,
        0.12
      ) !important;

    overflow: visible !important;
  }


  /* =====================================================
     FIELD LABELS — LARGER
  ====================================================== */

  #searchForm .airport-field label {
    display: block !important;

    margin:
      0
      0
      6px !important;

    color: #123f7b !important;

    font-size: 13px !important;
    font-weight: 900 !important;

    line-height: 1.2 !important;

    letter-spacing: 0.08em !important;
  }

  #searchForm .search-grid > label {
    color: #123f7b !important;

    font-size: 13px !important;
    font-weight: 900 !important;

    line-height: 1.2 !important;

    letter-spacing: 0.08em !important;
  }


  /* =====================================================
     FIELD VALUES — LARGER
  ====================================================== */

  #searchForm .airport-field input,
  #searchForm .search-grid > label input,
  #searchForm .search-grid > label select {
    box-sizing: border-box !important;

    width: 100% !important;
    max-width: 100% !important;

    min-width: 0 !important;

    margin:
      7px
      0
      0 !important;

    padding: 0 !important;

    border: 0 !important;

    background: transparent !important;

    color: #061f43 !important;

    font-size: 20px !important;
    font-weight: 750 !important;

    line-height: 1.3 !important;
  }

  #searchForm .airport-field input::placeholder {
    color: #737d88 !important;

    opacity: 1 !important;
  }


  /* =====================================================
     RETURN
  ====================================================== */

  #searchForm #returnWrap {
    width: 100% !important;
  }

  #searchForm #returnWrap.hidden {
    display: none !important;
  }


  /* =====================================================
     ORANGE CTA — FULL WIDTH
  ====================================================== */

  #searchForm .search-button {
    box-sizing: border-box !important;

    width: 100% !important;
    max-width: 100% !important;

    height: auto !important;

    min-width: 0 !important;
    min-height: 70px !important;

    margin: 0 !important;

    padding:
      17px
      20px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    border: 0 !important;

    border-radius: 14px !important;

    background: #ff7425 !important;

    color: #ffffff !important;

    font-size: 21px !important;
    font-weight: 900 !important;

    line-height: 1.2 !important;

    text-align: center !important;

    white-space: normal !important;
  }


  /* =====================================================
     FILTERS — STACKED TOO
  ====================================================== */

  #searchForm .filter-row {
    width: 100% !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: stretch !important;

    gap: 10px !important;

    margin:
      16px
      0
      0 !important;

    padding: 0 !important;

    background: transparent !important;
  }

  #searchForm .pill {
    box-sizing: border-box !important;

    width: 100% !important;

    min-height: 52px !important;

    margin: 0 !important;

    padding:
      12px
      17px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: flex-start !important;

    gap: 11px !important;

    border:
      1px solid
      rgba(
        255,
        255,
        255,
        0.65
      ) !important;

    border-radius: 999px !important;

    background: transparent !important;

    color: #ffffff !important;

    font-size: 16px !important;
  }

  #searchForm .pill input[type="number"] {
    width: 100px !important;

    color: #ffffff !important;

    font-size: 16px !important;
  }

}

/* =========================================================
   REMOVE EMPTY SPACE + FINAL FOOTER
========================================================= */


/* REMOVE BLANK RESULTS AREA WHEN NOTHING IS DISPLAYING */

.results:has(#resultsGrid:empty):has(#loading.hidden):has(#errorBox.hidden):has(#setupBox.hidden) {
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}


/* =========================================================
   FOOTER
========================================================= */

footer {
  width: 100%;

  padding:
    28px
    clamp(24px, 5vw, 80px);

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 35px;

  background: #071d3d;

  color: #ffffff;
}


.footer-right {
  max-width: 720px;

  display: flex;

  flex-direction: column;

  align-items: flex-end;

  gap: 10px;
}


.footer-links {
  display: flex;

  align-items: center;

  gap: 22px;
}


.footer-links a {
  color: #ffffff;

  font-size: 13px;
  font-weight: 800;

  text-decoration: none;
}


.footer-links a:hover {
  color: #48d5d2;
}


.footer-disclaimer {
  margin: 0;

  color: rgba(255, 255, 255, 0.62);

  font-size: 11px;

  line-height: 1.5;

  text-align: right;
}


/* =========================================================
   MOBILE FOOTER
========================================================= */

@media screen and (max-width: 720px) {

  footer {
    padding:
      28px
      18px
      32px !important;

    flex-direction: column !important;

    align-items: center !important;

    gap: 22px !important;

    text-align: center !important;
  }


  .footer-right {
    width: 100%;

    align-items: center !important;

    gap: 14px;
  }


  .footer-links {
    width: 100%;

    justify-content: center;

    gap: 24px;
  }


  .footer-links a {
    font-size: 15px;
  }


  .footer-disclaimer {
    max-width: 420px;

    font-size: 12px;

    line-height: 1.5;

    text-align: center !important;
  }

}

/* =========================================================
   MATCH HEADER TO FOOTER NAVY
========================================================= */

.topbar {
  background: #071d3d !important;
}

/* =========================================================
   ABOUT US PAGE
========================================================= */

.about-page {
  background: #ffffff;
}


/* =========================================================
   ABOUT HERO
========================================================= */

.about-hero {
  width: 100%;
  padding: 90px clamp(30px, 7vw, 110px);
  background:
    linear-gradient(
      120deg,
      #082f63 0%,
      #0c4384 55%,
      #0d559e 100%
    );
  color: #ffffff;
}

.about-hero-inner {
  max-width: 1050px;
  margin: 0 auto;
}

.about-hero .eyebrow {
  margin: 0 0 20px;
  color: #48d5d2;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.about-hero h1 {
  max-width: 950px;
  margin: 0 0 28px;
  color: #ffffff;
  font-size: clamp(48px, 6vw, 76px);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.about-hero-intro {
  max-width: 760px;
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 21px;
  line-height: 1.6;
}


/* =========================================================
   ABOUT CONTENT
========================================================= */

.about-story,
.about-platform,
.about-watch,
.about-mission,
.about-disclaimer {
  width: 100%;
  padding: 80px clamp(30px, 7vw, 110px);
}

.about-story-inner {
  max-width: 900px;
  margin: 0 auto;
}

.about-section-label {
  margin: 0 0 14px;
  color: #0c8f92;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.about-story h2,
.about-platform h2,
.about-watch h2,
.about-mission h2 {
  margin: 0 0 30px;
  color: #071d3d;
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.about-story p,
.about-platform p,
.about-watch p,
.about-mission p {
  margin: 0 0 24px;
  color: #34445a;
  font-size: 18px;
  line-height: 1.75;
}

.about-story strong,
.about-platform strong,
.about-watch strong,
.about-mission strong {
  color: #071d3d;
}


/* =========================================================
   FOUNDER QUOTE
========================================================= */

.about-story blockquote {
  margin: 48px 0 0;
  padding: 30px 34px;
  border-left: 6px solid #ff7425;
  background: #f3f8fc;
  color: #071d3d;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.3;
}


/* =========================================================
   PLATFORM SECTION
========================================================= */

.about-platform {
  background: #f3f8fc;
}


/* =========================================================
   FLIGHT WATCH SECTION
========================================================= */

.about-watch {
  background: #ffffff;
}


/* =========================================================
   MISSION SECTION
========================================================= */

.about-mission {
  background: #eaf7f8;
}

.about-mission-statement {
  margin-top: 35px !important;
  padding: 28px 32px;
  border-radius: 16px;
  background: #ffffff;
  color: #071d3d !important;
  font-size: 22px !important;
}

.about-founder {
  margin-top: 38px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.about-founder strong {
  color: #071d3d;
  font-size: 20px;
}

.about-founder span {
  color: #607086;
  font-size: 15px;
  font-weight: 700;
}


/* =========================================================
   DISCLAIMER
========================================================= */

.about-disclaimer {
  padding-top: 35px;
  padding-bottom: 35px;
  background: #f7f9fb;
}

.about-disclaimer p {
  max-width: 900px;
  margin: 0;
  color: #687588;
  font-size: 12px;
  line-height: 1.6;
}


/* =========================================================
   ABOUT MOBILE
========================================================= */

@media screen and (max-width: 720px) {

  .about-hero {
    padding: 55px 20px 60px;
  }

  .about-hero .eyebrow {
    font-size: 12px;
  }

  .about-hero h1 {
    font-size: 43px;
    line-height: 1.03;
  }

  .about-hero-intro {
    font-size: 18px;
    line-height: 1.55;
  }

  .about-story,
  .about-platform,
  .about-watch,
  .about-mission {
    padding: 55px 20px;
  }

  .about-story h2,
  .about-platform h2,
  .about-watch h2,
  .about-mission h2 {
    font-size: 36px;
  }

  .about-story p,
  .about-platform p,
  .about-watch p,
  .about-mission p {
    font-size: 17px;
    line-height: 1.7;
  }

  .about-story blockquote {
    margin-top: 35px;
    padding: 25px 24px;
    font-size: 25px;
  }

  .about-mission-statement {
    padding: 24px !important;
    font-size: 19px !important;
  }

  .about-disclaimer {
    padding: 30px 20px;
  }

}

/* =========================================================
   ABOUT PAGE — SMALLER TYPOGRAPHY
========================================================= */

.about-hero {
  padding-top: 65px !important;
  padding-bottom: 65px !important;
}

.about-hero h1 {
  font-size: clamp(40px, 4.5vw, 58px) !important;
  line-height: 1.08 !important;
}

.about-hero-intro {
  font-size: 18px !important;
  line-height: 1.55 !important;
}

.about-hero .eyebrow,
.about-section-label {
  font-size: 11px !important;
}

.about-story,
.about-platform,
.about-watch,
.about-mission {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}

.about-story h2,
.about-platform h2,
.about-watch h2,
.about-mission h2 {
  font-size: clamp(30px, 3vw, 40px) !important;
  line-height: 1.12 !important;
  margin-bottom: 24px !important;
}

.about-story p,
.about-platform p,
.about-watch p,
.about-mission p {
  font-size: 16px !important;
  line-height: 1.65 !important;
  margin-bottom: 19px !important;
}

.about-story blockquote {
  font-size: 23px !important;
  padding: 24px 28px !important;
}

.about-mission-statement {
  font-size: 18px !important;
}

.about-founder strong {
  font-size: 18px !important;
}

.about-founder span {
  font-size: 14px !important;
}


/* MOBILE */

@media screen and (max-width: 720px) {

  .about-hero {
    padding: 42px 20px 46px !important;
  }

  .about-hero h1 {
    font-size: 35px !important;
    line-height: 1.08 !important;
  }

  .about-hero-intro {
    font-size: 16px !important;
  }

  .about-story,
  .about-platform,
  .about-watch,
  .about-mission {
    padding: 42px 20px !important;
  }

  .about-story h2,
  .about-platform h2,
  .about-watch h2,
  .about-mission h2 {
    font-size: 29px !important;
  }

  .about-story p,
  .about-platform p,
  .about-watch p,
  .about-mission p {
    font-size: 15px !important;
    line-height: 1.65 !important;
  }

  .about-story blockquote {
    font-size: 21px !important;
  }

  .about-mission-statement {
    font-size: 17px !important;
  }

}

/* =========================================================
   ABOUT HERO — COMPACT
========================================================= */

.about-hero {
  padding-top: 42px !important;
  padding-bottom: 44px !important;
}

.about-hero .eyebrow {
  margin-bottom: 14px !important;
  font-size: 10px !important;
}

.about-hero h1 {
  max-width: 1150px !important;
  margin-bottom: 18px !important;
  font-size: clamp(36px, 3.7vw, 50px) !important;
  line-height: 1.06 !important;
}

.about-hero-intro {
  max-width: 850px !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
}


/* MOBILE */

@media screen and (max-width: 720px) {

  .about-hero {
    padding: 34px 20px 38px !important;
  }

  .about-hero h1 {
    font-size: 31px !important;
    line-height: 1.08 !important;
  }

  .about-hero-intro {
    font-size: 14px !important;
  }

}

/* =========================================================
   CONTACT US PAGE
========================================================= */

.contact-page {
  background: #ffffff;
}


/* =========================================================
   CONTACT HERO
========================================================= */

.contact-hero {
  width: 100%;
  padding: 42px clamp(30px, 7vw, 110px) 44px;
  background:
    linear-gradient(
      120deg,
      #082f63 0%,
      #0c4384 55%,
      #0d559e 100%
    );
  color: #ffffff;
}

.contact-inner {
  max-width: 1050px;
  margin: 0 auto;
}

.contact-hero .eyebrow {
  margin: 0 0 12px;
  color: #48d5d2;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.contact-hero h1 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: clamp(36px, 4vw, 50px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.contact-hero-intro {
  max-width: 680px;
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 15px;
  line-height: 1.5;
}


/* =========================================================
   CONTACT CONTENT
========================================================= */

.contact-content {
  padding: 55px clamp(30px, 7vw, 110px) 60px;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}


/* =========================================================
   CONTACT CARDS
========================================================= */

.contact-card {
  padding: 30px;
  border: 1px solid #dce5ee;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(7, 29, 61, 0.06);
}

.contact-card-label {
  margin: 0 0 12px;
  color: #0c8f92;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.contact-card h2 {
  margin: 0 0 16px;
  color: #071d3d;
  font-size: 25px;
  font-weight: 900;
  line-height: 1.1;
}

.contact-card p {
  margin: 0 0 17px;
  color: #45556a;
  font-size: 14px;
  line-height: 1.6;
}

.contact-card strong {
  color: #071d3d;
}

.contact-email {
  display: inline-block;
  margin: 3px 0 18px;
  color: #0c4384;
  font-size: 15px;
  font-weight: 900;
  text-decoration: none;
}

.contact-email:hover {
  color: #ff7425;
}

.contact-small {
  color: #6d7a8c !important;
  font-size: 12px !important;
}


/* =========================================================
   BUSINESS IDENTITY
========================================================= */

.contact-business {
  margin-top: 38px;
  padding: 25px 28px;
  display: flex;
  align-items: center;
  gap: 17px;
  border-radius: 14px;
  background: #eaf7f8;
}

.contact-logo-symbol {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
}

.contact-business > div:last-child {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.contact-business strong {
  color: #071d3d;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0.05em;
}

.contact-business span {
  color: #607086;
  font-size: 13px;
  font-weight: 700;
}


/* =========================================================
   CONTACT LEGAL
========================================================= */

.contact-legal {
  max-width: 900px;
  margin-top: 30px;
}

.contact-legal p {
  margin: 0 0 10px;
  color: #6d7a8c;
  font-size: 12px;
  line-height: 1.6;
}

.contact-legal a {
  color: #0c4384;
  font-weight: 800;
  text-decoration: none;
}

.contact-legal a:hover {
  color: #ff7425;
}


/* =========================================================
   CONTACT MOBILE
========================================================= */

@media screen and (max-width: 800px) {

  .contact-hero {
    padding: 34px 20px 38px;
  }

  .contact-hero h1 {
    font-size: 32px;
  }

  .contact-hero-intro {
    font-size: 14px;
  }

  .contact-content {
    padding: 40px 20px 45px;
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .contact-card {
    padding: 24px;
  }

  .contact-card h2 {
    font-size: 23px;
  }

  .contact-business {
    margin-top: 25px;
    padding: 22px;
  }

}

/* =========================================================
   CONTACT PAGE — FINAL ALIGNMENT
========================================================= */

.contact-inner {
  width: min(1180px, calc(100% - 80px)) !important;
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.contact-hero {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.contact-content {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

@media screen and (max-width: 800px) {

  .contact-inner {
    width: calc(100% - 40px) !important;
  }

}

/* =========================================================
   AIRPORT DROPDOWN — PREVENT CLIPPING
========================================================= */

#searchForm,
#searchForm .search-grid,
#searchForm .airport-field {
  overflow: visible !important;
}

#searchForm {
  position: relative !important;
  z-index: 50 !important;
}

#searchForm .airport-field {
  position: relative !important;
}

#searchForm .airport-field:focus-within {
  z-index: 10000 !important;
}

#searchForm .suggestions {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 99999 !important;

  max-height: 280px !important;
  overflow-y: auto !important;

  background: #ffffff !important;
}

/* =========================================================
   COOKIE / ANALYTICS CONSENT
========================================================= */

.cookie-consent {
  position: fixed;
  z-index: 999999;
  left: 24px;
  right: 24px;
  bottom: 24px;

  max-width: 1180px;
  margin: 0 auto;

  padding: 20px 22px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;

  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;

  background: #071d3d;
  color: #ffffff;

  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.28);
}

.cookie-consent-copy {
  flex: 1;
}

.cookie-consent-copy strong {
  display: block;
  margin-bottom: 6px;

  color: #ffffff;

  font-size: 15px;
  font-weight: 900;
}

.cookie-consent-copy p {
  margin: 0;

  color: rgba(255, 255, 255, 0.78);

  font-size: 12px;
  line-height: 1.55;
}

.cookie-consent-copy a {
  color: #48d5d2;
  font-weight: 800;
  text-decoration: underline;
}

.cookie-consent-actions {
  display: flex;
  align-items: center;
  gap: 10px;

  flex-shrink: 0;
}

.cookie-consent button {
  min-height: 42px;
  padding: 10px 17px;

  border-radius: 999px;

  font-size: 12px;
  font-weight: 900;

  white-space: nowrap;
}

.cookie-reject {
  border: 1px solid rgba(255, 255, 255, 0.35);

  background: transparent;
  color: #ffffff;
}

.cookie-reject:hover {
  background: rgba(255, 255, 255, 0.08);
}

.cookie-accept {
  border: 1px solid #ff7628;

  background: #ff7628;
  color: #ffffff;
}

.cookie-accept:hover {
  background: #e9651d;
  border-color: #e9651d;
}


/* MOBILE */

@media screen and (max-width: 720px) {

  .cookie-consent {
    left: 14px;
    right: 14px;
    bottom: 14px;

    padding: 18px;

    align-items: stretch;
    flex-direction: column;

    gap: 16px;
  }

  .cookie-consent-actions {
    width: 100%;
  }

  .cookie-consent button {
    flex: 1;
  }

}