/* Local mobile/tablet app presentation. Desktop rules stay in home.css/shop.css. */
.app-header,
.app-dock {
  display: none;
}
.app-sheet {
  max-width: 480px;
  padding: 24px;
}
.app-sheet-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.app-sheet-top h2 {
  font: 600 22px/1.3 var(--heading);
  letter-spacing: -0.4px;
  margin: 0;
}
.app-sheet-close {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  font-size: 30px;
  border-radius: 50%;
  background: var(--soft);
}
#app-sheet-content > p {
  font-size: 14px;
  margin: 16px 0;
}
.app-panel-note {
  font-size: 12px !important;
  color: var(--muted);
}
.app-menu-links {
  display: grid;
  margin-top: 12px;
}
.app-menu-links > a,
.app-menu-links > button {
  text-align: left;
  padding: 14px 0;
  min-height: 48px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.app-state-card {
  padding: 18px;
  background: var(--soft);
  border-radius: 14px;
  margin: 18px 0;
}
.app-state-card strong {
  font-size: 15px;
  font-weight: 600;
}
.app-state-card p {
  font-size: 14px;
  line-height: 1.6;
  margin-top: 10px;
}
.app-contact {
  display: block;
  padding: 14px 18px;
  margin: 18px 0;
  background: var(--navy);
  color: #fff;
  border-radius: 12px;
  text-align: center;
  font-size: 15px;
}
@media (max-width: 1024px) {
  body {
    background: #f7f9fc;
  }
  .website-header,
  .shop-header,
  .shop-preview {
    display: none;
  }
  .app-header {
    top: 0;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
  }
  .app-header > button {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    color: var(--navy);
    border-radius: 12px;
  }
  .app-header > button:hover {
    background: #edf5f9;
  }
  .app-brand {
    display: flex;
    align-items: center;
  }
  .app-brand img {
    object-fit: contain;
  }
  .app-dock {
    color: #fff;
    border-top: 1px solid #fff2;
  }
  .app-dock > a,
  .app-dock > button {
    font: 500 10px/1.4 var(--body);
  }
  .app-dock :focus-visible {
    outline-color: var(--sky);
    outline-offset: 0;
  }
  footer,
  .back-top {
    display: none;
  }
  .container {
    width: calc(100% - 32px);
  }
  .section {
    padding-block: 28px;
  }
  .section-heading h1,
  .section-heading h2,
  .hotels h2,
  .airlines h2 {
    font-size: 25px;
    letter-spacing: -0.5px;
  }
  .section-heading p {
    font-size: 13px;
    line-height: 1.5;
    margin-top: 8px;
  }
  .eyebrow {
    font-size: 26px;
    margin-bottom: 5px;
  }
  .badge {
    font-size: 20px;
    padding: 3px 12px;
  }
  .hero-shell {
    --hero-base-height: 248px;
  }
  .hero-shell .search-card {
    width: calc(100% - 32px);
    border-radius: 18px;
    box-shadow: 0 6px 24px #082f4610;
  }
  .hero-shell .search-submit {
    min-height: 46px;
  }
  .offers {
    padding-top: 22px;
  }
  .offers h1 {
    font-size: 25px;
  }
  .offer-grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    scrollbar-width: thin;
  }
  .offer-card {
    flex: 0 0 44%;
    scroll-snap-align: start;
  }
  .offer-card h2 {
    line-height: 1.2;
    margin: 8px 0 10px;
    letter-spacing: -0.4px;
  }
  .offer-card > div {
    width: 75%;
  }
  .offer-kicker {
    font-size: 8px;
  }
  .offer-example {
    font-size: 10px;
    margin-top: 5px;
  }
  .mini-pill {
    min-height: 40px;
    font-size: 11px;
  }
  .categories {
    padding-bottom: 24px;
  }
  .category-rail {
    padding-block: 4px 10px;
  }
  .category-card:nth-child(n) {
    transform: none;
  }
  .category-card h3 {
    margin: 8px 0 0;
  }
  .category-card small {
    font-size: 11px;
  }
  .slider-controls {
    margin-top: 12px;
    gap: 14px;
  }
  .circle {
    width: 44px;
    height: 44px;
  }
  .dots {
    gap: 4px;
  }
  .dots button {
    width: 24px;
    height: 28px;
    border: 0;
    border-radius: 0;
    position: relative;
  }
  .dots button:after {
    content: "";
    position: absolute;
    top: 10px;
    left: 8px;
    width: 8px;
    height: 8px;
    background: #c2d4df;
    border-radius: 50%;
  }
  .dots button.on {
    background: none;
    box-shadow: none;
  }
  .dots button.on:after {
    background: var(--navy);
  }
  .airline-grid button {
    min-height: 44px;
    font-size: 12px;
    font-weight: 500;
  }

  .service-marks {
    display: none;
  }
  .destinations {
    padding-top: 24px;
  }
  .destination-stage {
    height: 260px;
    margin: 12px 0 0;
  }
  .destination-card {
    height: 240px;
    width: 300px;
    border-radius: 18px;
  }
  .destination-card .caption {
    left: 18px;
    right: 18px;
    bottom: 16px;
  }
  .destination-card h3 {
    font-size: 19px;
  }
  .destination-card .caption button {
    min-height: 44px;
    padding: 9px 14px;
  }
  .destination-prev,
  .destination-next {
    width: 44px;
    height: 44px;
  }
  .hotel-card img {
    aspect-ratio: 1.4;
  }
  .hotel-card h3 {
    margin-top: 8px;
  }
  .rating,
  .stay-label {
    font-size: 11px;
  }
  .cta {
    margin-block: 18px 0;
    flex-direction: row;
    align-items: center;
  }
  .cta h2 {
    font-size: 26px;
  }
  .cta em {
    font-size: 30px;
  }
  .cta .eyebrow {
    font-size: 19px;
  }
  .about {
    padding-block: 28px;
  }
  .about-collage {
    gap: 10px;
  }
  .about-content h2 {
    font-size: 26px;
  }
  .about-content > p {
    font-size: 14px;
    margin: 12px 0;
  }
  .feature {
    gap: 12px;
    margin: 14px 0;
  }
  .feature h3 {
    font-size: 16px;
  }
  .feature p {
    font-size: 13px;
  }
  .feature > span {
    width: 40px;
    height: 40px;
  }
  .feature svg {
    width: 23px;
    height: 23px;
  }
  .about-content > .pill {
    min-height: 44px;
    font-size: 13px;
    padding: 10px 18px;
    margin-top: 4px;
  }
  .tour-card > img {
    aspect-ratio: 1.3;
  }
  .tour-body {
    padding: 12px;
  }
  .tour-body h3 {
    font-size: 14px;
    line-height: 1.4;
  }
  .tour-price {
    margin: 9px 0 12px;
    font-size: 11px;
  }
  .tour-price strong {
    font-size: 18px;
  }
  .tour-foot {
    flex-wrap: wrap;
  }
  .tour-foot button {
    min-height: 44px;
    font-size: 12px;
  }
  .newsletter {
    margin-block: 28px 16px;
    background: #edf7ef;
  }
  .newsletter-traveler,
  .newsletter-bag {
    display: none;
  }
  .newsletter h2 {
    font-size: 20px;
    line-height: 1.4;
    margin-bottom: 14px;
  }
  .newsletter form {
    padding: 5px 5px 5px 12px;
  }
  .newsletter input {
    font-size: 16px;
  }
  .newsletter .pill {
    min-height: 44px;
    padding: 10px 14px;
  }
  .newsletter #newsletter-status {
    font-size: 11px;
  }
  dialog:not(.app-sheet) {
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
  }
  .app-sheet {
    position: fixed;
    inset: auto 0 0;
    margin: 0 auto;
    max-width: 560px;
    width: 100%;
    max-height: 85dvh;
    overflow-y: auto;
    border: 0;
    border-radius: 22px 22px 0 0;
    padding: 20px 20px calc(24px + env(safe-area-inset-bottom, 0px));
  }
  .app-sheet::backdrop {
    background: #082f467a;
  }
  .shop-intro {
    padding-block: 24px;
    gap: 20px;
    grid-template-columns: 1.2fr 1fr;
  }
  .shop-intro h1 {
    font-size: 32px;
    letter-spacing: -0.7px;
  }
  .shop-intro > div > p:not(.shop-breadcrumb) {
    font-size: 14px;
    margin: 12px 0 16px;
  }
  .shop-breadcrumb {
    display: none;
  }
  .intro-art {
    min-height: 0;
  }
  .intro-art > svg {
    max-height: 180px;
  }
  .shop-catalog {
    padding-block: 20px 24px;
    scroll-margin-top: 76px;
  }
  .catalog-heading h2 {
    font-size: 24px;
  }
  .category-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    width: 100%;
  }
  .category-filters > button {
    min-height: 44px;
    flex-shrink: 0;
  }
  .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px 14px;
  }
  .product-image > svg {
    max-height: 170px;
  }
  .product-card h3 {
    font-size: 15px;
  }
  .product-bottom button {
    min-height: 44px;
  }
  .shop-help {
    padding: 22px;
    margin-bottom: 20px;
  }
  .shop-help h2 {
    font-size: 25px;
  }
}
@media (max-width: 640px) {
  .section {
    padding-block: 24px;
  }
  .section-heading h1,
  .section-heading h2,
  .offers h1,
  .hotels h2,
  .airlines h2 {
    font-size: 22px;
    line-height: 1.3;
  }
  .section-heading .example-note {
    font-size: 11px;
  }
  .eyebrow {
    font-size: 24px;
  }
  .badge {
    font-size: 19px;
  }
  .hero-shell {
    --hero-base-height: 210px;
  }
  .hero-shell .search-card {
    padding-top: 20px;
  }
  .hero-shell .service-tabs {
    width: calc(100% - 20px);
  }
  .hero-shell .service-tabs button,
  .hero-shell .service-tabs .service-link {
    font-size: 11px;
  }
  .hero-shell .service-tabs svg {
    width: 20px;
    height: 20px;
  }
  .hero-shell #travel-form {
    padding: 10px 12px 12px;
  }
  .hero-shell .search-options {
    margin-bottom: 8px;
  }
  .hero-shell .trip-types label {
    font-size: 11px;
    min-height: 30px;
    gap: 4px;
  }
  .hero-shell .trip-types {
    gap: 7px;
  }
  .hero-shell .search-layout,
  .hero-shell .search-fields {
    gap: 7px;
  }
  .hero-shell .search-field,
  .hero-shell .airport-pair .search-field,
  .hero-shell .date-pair,
  .hero-shell .date-pair > .search-field {
    min-height: 56px;
    padding: 6px 9px;
  }
  .hero-shell .date-pair {
    padding: 0;
  }
  .hero-shell .field-content > span {
    font-size: 10px;
  }
  .hero-shell .field-content > input,
  .hero-shell .field-content > select {
    font-size: 16px;
    height: 24px;
  }
  .hero-shell .field-content > small {
    font-size: 9px;
  }
  .hero-shell .traveler-controls {
    padding: 5px 9px;
  }
  .hero-shell .traveler-controls > button {
    font-size: 14px;
    min-height: 28px;
  }
  .hero-shell .traveler-controls > select {
    font-size: 16px;
  }
  .hero-shell .search-submit {
    min-height: 44px;
    height: 44px;
    font-size: 14px;
  }
  .hero-shell .search-submit span {
    font-size: 14px;
  }
  .hero-shell .popover {
    z-index: 25;
    width: calc(100vw - 64px);
  }
  .hero-shell .hero-motion {
    font-size: 9px;
    min-height: 28px;
    top: 10px;
    left: 12px;
  }
  .hero-shell .preview-label {
    letter-spacing: 0.5px;
    font-size: 6px;
    right: 12px;
    top: 10px;
  }
  .offers {
    padding-top: 20px;
  }
  .offer-card {
    flex-basis: 84%;
  }
  .offer-card h2 {
    line-height: 1.18;
  }
  .offer-card > img {
    right: -12%;
    width: 72%;
  }
  .offer-card .mini-pill {
    min-height: 40px;
  }
  .airline-grid button {
    font-size: 11px;
    gap: 6px;
  }
  .destination-stage {
    height: 230px;
  }
  .destination-card {
    width: 224px;
    height: 210px;
  }
  .destination-card .caption button {
    margin: 0;
    white-space: nowrap;
  }
  .hotel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cta h2 {
    font-size: 23px;
  }
  .cta em {
    font-size: 28px;
  }
  .cta .eyebrow {
    font-size: 18px;
  }
  .about {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .about-content h2 {
    font-size: 24px;
  }
  .tour-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tour-card > img {
    aspect-ratio: 1.35;
  }
  .tour-body .rating {
    font-size: 10px;
  }
  .tour-foot {
    font-size: 10px;
  }
  .tour-foot button {
    width: 100%;
  }
  .newsletter h2 {
    font-size: 18px;
  }
  .newsletter .pill {
    padding: 9px 12px;
    gap: 5px;
  }
  .shop-intro {
    grid-template-columns: 1fr;
    gap: 12px;
    padding-block: 22px;
  }
  .intro-art {
    display: none;
  }
  .shop-intro .pill {
    min-height: 44px;
    padding: 10px 18px;
    font-size: 13px;
  }
  .catalog-heading h2 {
    font-size: 22px;
  }
  .catalog-heading p {
    font-size: 12px;
  }
  .shop-eyebrow {
    font-size: 10px;
    margin-bottom: 6px;
  }
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 12px;
  }
  .product-image > svg {
    max-height: 135px;
  }
  .product-card h3 {
    font-size: 14px;
  }
  .product-bottom button {
    width: 100%;
    font-size: 12px;
  }
  .product-bottom {
    width: 100%;
    align-items: stretch;
  }
  .product-card > p {
    font-size: 12px;
  }
  #product-query {
    font-size: 16px;
  }
  .shop-help h2 {
    font-size: 23px;
  }
  .shop-help p {
    font-size: 14px;
  }
}

@media (max-width: 640px) {
  .hero-shell .field-content > span {
    line-height: 1.3;
  }
  .hero-shell .field-content > small {
    line-height: 1.2;
  }
  .hero-shell .date-value,
  .hero-shell .return-trigger strong {
    line-height: 22px;
  }
  .hero-shell .date-day {
    font-size: 9px;
    line-height: 1.2;
  }
}

@media (max-width: 1024px) {
  .hero-shell .search-region {
    scroll-margin-top: 32px;
  }
}
@media (max-width: 640px) {
  .shop-intro h1 {
    font-size: 24px;
    line-height: 1.25;
  }
  .shop-intro > div > p:not(.shop-breadcrumb) {
    font-size: 13px;
    line-height: 1.5;
    margin: 8px 0 12px;
  }
  .category-filters > button {
    font-size: 12px;
  }
}

/* Match desktop's exposed media space above the floating search strip on app widths. */
@media (max-width: 1024px) {
  .hero-video {
    object-position: 65% center;
  }
}

/* One label / heading / subtitle contract, using the existing Our Offers appearance. */
.section-heading {
  --section-title-size: 45px;
  --section-label-size: 23px;
  text-align: center;
  margin-bottom: 40px;
}
.section-heading > .eyebrow.badge {
  font:
    500 var(--section-label-size)/1.2 "Dancing Script",
    cursive;
  display: inline-block;
  color: var(--red);
  border: 0;
  border-radius: 0;
  padding: 6px 16px;
  margin-bottom: 8px;
  letter-spacing: normal;
  text-transform: none;
}
.section-heading > h1,
.section-heading > h2 {
  font:
    600 var(--section-title-size)/1.25 Roboto,
    Arial,
    sans-serif;
  color: var(--ink);
  letter-spacing: -0.7px;
  margin: 0;
}
.section-heading > h2 em {
  font: inherit;
  color: inherit;
}
.section-heading > p {
  font:
    400 11px/1.65 Roboto,
    Arial,
    sans-serif;
  color: #65727b;
  max-width: 730px;
  margin: 7px auto 0;
}
.section-heading-inverse > .eyebrow.badge,
.section-heading-inverse > h2,
.section-heading-inverse > p {
  color: #fff;
}
.cta .section-heading {
  margin-bottom: 0;
}
@media (max-width: 1000px) {
  .section-heading {
    --section-title-size: 36px;
  }
}
@media (max-width: 1024px) {
  .section-heading {
    --section-title-size: 25px;
    --section-label-size: 20px;
    margin-bottom: 20px;
  }
  .section-heading > .eyebrow.badge {
    margin-bottom: 5px;
  }
  .section-heading > p {
    line-height: 1.5;
  }
}
@media (max-width: 640px) {
  .section-heading {
    --section-title-size: 22px;
    --section-label-size: 19px;
    margin-bottom: 16px;
  }
}

/* Keep the coastline in the exposed area rather than spending it on sky. */
@media (max-width: 1024px) {
  .hero-shell > .hero {
    overflow: hidden;
    background-size:
      cover,
      auto 140%;
    background-position:
      center,
      65% 85%;
  }
  .hero-video {
    transform: scale(1.4);
    transform-origin: 65% 85%;
  }
}

/* Contact is a slim photo banner, not a stacked mobile content card. */
@media (max-width: 640px) {
  .cta {
    flex-direction: row;
    align-items: center;
  }
  .cta .section-heading {
    min-width: 0;
  }
  .cta .section-heading > .eyebrow.badge {
    padding: 0;
  }
  .cta .section-heading > h2 {
    line-height: 1.15;
    letter-spacing: -0.25px;
  }
  .cta .pill {
    width: 82px;
    flex-shrink: 0;
    min-height: 44px;
    padding: 8px;
    gap: 4px;
    font-size: 10px;
    align-self: center;
  }
  .cta .pill span {
    font-size: 18px;
  }
}

/* Full-width surface bands keep each content section visually independent. */
:root {
  --section-white: #fff;
  --section-sky: #edf7fb;
  --section-mist: #f2f4f8;
  --section-ice: #f0f7fa;
  --section-contact: #e5eef5;
  --section-tour: #eaf5fa;
  --section-newsletter: #f3f5f8;
}
main > .section-band {
  display: flow-root;
  isolation: isolate;
}
main > .offers {
  background: var(--section-white);
  border-top: 0;
}
main > .airlines {
  background: var(--section-mist);
}
main > .destinations {
  background: var(--section-white);
}
main > .hotels {
  background: var(--section-ice);
}
.contact-section > .cta {
  margin-block: 0;
}
main > .about-section {
  background: var(--section-white);
}
main > .tours {
  background-color: var(--section-tour);
}
.newsletter-section > .newsletter {
  margin-block: 0;
}
@media (max-width: 640px) {
  /* --search-card-half tracks the live card, so 0.4 half-heights is a 20% lift. */
  .hero-shell .search-region {
    top: calc(var(--search-card-half) * -0.4);
    margin-bottom: calc(var(--search-card-half) * -0.4);
  }
}

/* Preserve the desktop category fan on smaller screens, with portrait photographs. */
@media (max-width: 1024px) {
  .category-rail {
    padding: 20px 16px 30px;
    gap: 18px;
  }
  .category-card img {
    aspect-ratio: 3/4;
    border-radius: 23px;
  }
  .category-card:nth-child(1) {
    transform: rotate(-5deg) translateY(18px);
  }
  .category-card:nth-child(2) {
    transform: rotate(-3deg) translateY(3px);
  }
  .category-card:nth-child(3) {
    transform: none;
  }
  .category-card:nth-child(4) {
    transform: rotate(3deg) translateY(3px);
  }
  .category-card:nth-child(5) {
    transform: rotate(5deg) translateY(18px);
  }
}
@media (max-width: 640px) {
  .category-rail {
    padding: 16px 10px 24px;
    gap: 14px;
  }
  .category-card img {
    border-radius: 18px;
  }
  .category-card:nth-child(1) {
    transform: rotate(-5deg) translateY(10px);
  }
  .category-card:nth-child(2) {
    transform: none;
  }
  .category-card:nth-child(3) {
    transform: rotate(5deg) translateY(10px);
  }
}

/* Continuous discovery rails: three repeated cycles make wrap-around visually seamless. */
.loop-viewport {
  --loop-gap: 22px;
  --loop-visible: 3;
  scroll-behavior: auto !important;
  scrollbar-width: none;
  overflow-x: auto !important;
  overscroll-behavior-x: contain;
  overflow-anchor: none;
}
.loop-viewport::-webkit-scrollbar {
  display: none;
}
.offer-grid.loop-viewport,
.category-rail.loop-viewport {
  display: block;
  scroll-snap-type: none;
}
.loop-track {
  display: flex;
  width: max-content;
  align-items: stretch;
}
.loop-cycle {
  display: flex;
  flex: none;
  gap: var(--loop-gap);
  padding-right: var(--loop-gap);
  align-items: stretch;
}
.loop-cycle > .offer-card,
.loop-cycle > .category-card {
  width: var(--loop-card-width);
  flex: 0 0 var(--loop-card-width);
  min-width: 0;
}
.category-rail.loop-viewport {
  --loop-visible: 5;
  --loop-gap: 27px;
  padding: 22px 12px 36px;
}
.category-cycle > .category-card:nth-child(n) {
  display: block;
  transform: none;
}
.category-cycle > .category-card:nth-child(5n + 1) {
  transform: rotate(-5deg) translateY(18px);
}
.category-cycle > .category-card:nth-child(5n + 2) {
  transform: rotate(-3deg) translateY(3px);
}
.category-cycle > .category-card:nth-child(5n + 4) {
  transform: rotate(3deg) translateY(3px);
}
.category-cycle > .category-card:nth-child(5n) {
  transform: rotate(5deg) translateY(18px);
}
.destination-motion {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
}
.destination-card {
  transition:
    transform 650ms cubic-bezier(0.4, 0, 0.2, 1),
    filter 650ms ease,
    opacity 300ms ease;
}
.destination-card .caption {
  transition: opacity 300ms ease;
}
@media (max-width: 1024px) {
  .offer-grid.loop-viewport {
    --loop-visible: 2.2;
    --loop-gap: 12px;
  }
  .category-rail.loop-viewport {
    --loop-gap: 18px;
    padding: 22px 16px 36px;
  }
}
@media (max-width: 640px) {
  .offer-grid.loop-viewport {
    --loop-visible: 1.15;
  }
  .category-rail.loop-viewport {
    --loop-visible: 3;
    --loop-gap: 14px;
    padding: 20px 10px 30px;
  }
  .category-cycle > .category-card:nth-child(n) {
    transform: none;
  }
  .category-cycle > .category-card:nth-child(3n + 1) {
    transform: rotate(-5deg) translateY(10px);
  }
  .category-cycle > .category-card:nth-child(3n) {
    transform: rotate(5deg) translateY(10px);
  }
  #categories .slider-controls {
    gap: 8px;
    flex-wrap: wrap;
  }
}

/* Recognizable airline identity, with generous original-color logo artwork. */
.airline-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.airline-grid > .airline-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  background: white;
  border: 1px solid #dce5ec;
  min-width: 0;
  text-align: left;
}
.airline-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}
.airline-logo img {
  display: block;
  width: 100%;
  max-width: 190px;
}
.airline-logo.frontier-logo {
  background: #006643;
}
.airline-name {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  color: var(--navy);
  font: 500 13px var(--body);
}
.airline-name > span {
  font-size: 19px;
  color: var(--red);
}
.airline-card:hover {
  border-color: var(--sky);
  box-shadow: 0 8px 22px #0b3f5d12;
}
@media (max-width: 1024px) {
  .airline-grid {
    gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .airline-name {
    font-size: 11px;
  }
}
@media (max-width: 640px) {
  .airline-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .airline-grid > .airline-card {
    border-radius: 13px;
  }
  .airline-logo {
    min-height: 60px;
    padding: 6px;
  }
  .airline-logo img {
    height: 38px;
  }
  .airline-name {
    font-size: 11px;
  }
}

.airline-grid .airline-card > .airline-name {
  margin-left: 0;
  color: var(--navy);
  font-size: 13px;
  width: 100%;
}
@media (max-width: 1024px) {
  .airline-grid .airline-card > .airline-name {
    font-size: 11px;
  }
}

.category-cycle > .category-card {
  transition: none;
}

/* T46: portrait service cards, responsive coverflow and compact airline artwork. */
.category-card .service-photo {
  position: relative;
  display: block;
  aspect-ratio: 3/4;
  border-radius: 23px;
  overflow: hidden;
  background: var(--navy);
}
.category-card .service-photo > img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  border-radius: inherit;
}
.category-card > button,
.category-card > a {
  display: block;
  width: 100%;
  color: inherit;
  text-align: center;
  padding: 0;
}
.category-card .service-icon {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--navy);
  border-radius: 50%;
}
.category-card h3 {
  font-size: 18px;
  line-height: 1.3;
  min-height: 24px;
}
.category-card small {
  display: block;
  margin-top: 3px;
}
.destination-stage {
  height: var(--destination-stage-height, 544px);
  touch-action: pan-y;
  cursor: grab;
}
.destination-stage:active {
  cursor: grabbing;
}
.destination-stage .destination-card {
  width: var(--destination-card-width, 350px);
  height: var(--destination-card-height, 500px);
  aspect-ratio: 7/10;
  border-radius: 24px;
  transition:
    transform 1s ease,
    filter 1s ease,
    opacity 0.3s ease;
}
.destination-card > img {
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.about {
  grid-template-areas: "photos content";
}
.about-collage {
  grid-area: photos;
}
.about-content {
  grid-area: content;
}
@media (max-width: 1024px) {
  .about {
    grid-template-columns: 1fr;
    grid-template-areas: "content" "photos";
    gap: 24px;
  }
  .about-collage {
    width: min(100%, 600px);
    justify-self: center;
    grid-template-rows: 180px 180px;
  }
  .about-content {
    width: 100%;
    max-width: 700px;
    justify-self: center;
  }
  .category-card h3 {
    font-size: 14px;
  }
}
@media (max-width: 640px) {
  .category-card .service-photo {
    border-radius: 18px;
  }
  .category-card .service-icon {
    right: 6px;
    bottom: 6px;
  }
  .category-card h3 {
    font-size: 11px;
    min-height: 29px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .category-card small {
    font-size: 10px;
  }
  .destination-stage {
    margin-inline: 0;
  }
  .destination-card .caption {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    left: 12px;
    right: 12px;
    bottom: 12px;
    gap: 7px;
  }
  .destination-card h3 {
    font-size: 15px;
    line-height: 1.15;
  }
  .destination-card p {
    font-size: 9px;
    line-height: 1.2;
  }
  .destination-card .caption button {
    min-height: 44px;
    font-size: 10px;
    padding: 7px 10px;
  }
  .destination-prev,
  .destination-next {
    top: auto;
    bottom: 4px;
    transform: none;
    width: 44px;
    height: 44px;
  }
  .destination-prev {
    left: 2px;
  }
  .destination-next {
    right: 2px;
  }
  .about-collage {
    grid-template-rows: 120px 120px;
  }
  .airline-grid .airline-card {
    padding-block: 6px;
  }
  .airline-grid .airline-logo {
    padding-block: 3px;
  }
  .airline-grid .airline-name {
    padding-top: 5px;
  }
  .discovery-controls {
    gap: 10px;
    flex-wrap: wrap;
  }
}

.category-rail.loop-viewport {
  max-width: 1120px;
  margin-inline: auto;
}

/* T47: phone reading order is introduction, collage, then service details. */
@media (max-width: 640px) {
  .about {
    grid-template-areas: "content";
    row-gap: 0;
  }
  .about-content > .about-collage {
    grid-area: auto;
    margin: 20px auto 24px;
  }
}

/* T48: rear coverflow cards can be selected directly on every device. */
.destination-card[role="button"] {
  cursor: pointer;
}
.destination-card[role="button"]:focus-visible {
  outline: 3px solid var(--sky);
  outline-offset: -3px;
}

/* T50: upper corner curve is 50% of the 65px base dock height. */

/* T52: clear service symbols and a raised icon, without a circular surface. */
.hero-shell .service-tabs {
  min-height: 86px;
  top: -53px;
}
.hero-shell .service-tabs button,
.hero-shell .service-tabs .service-link {
  min-height: 86px;
  flex-direction: column;
  gap: 2px;
  padding: 5px 8px 7px;
  overflow: visible;
}
.hero-shell .service-tabs .service-glyph {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  flex: none;
  width: var(--service-icon-size);
  height: var(--service-icon-size);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hero-shell .service-glyph img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.hero-shell .service-tab-label {
  display: block;
  line-height: 1.25;
}
.hero-shell .service-tabs .selected .service-glyph,
.hero-shell .service-link:active .service-glyph {
  transform: translateY(var(--service-icon-lift)) scale(1.16);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.hero-shell .service-tabs .service-link:hover {
  background: transparent;
}
@media (max-width: 1024px) {
  .hero-shell .service-tabs {
    min-height: 76px;
    top: -43px;
  }
  .hero-shell .service-tabs button,
  .hero-shell .service-tabs .service-link {
    min-height: 76px;
    padding: 5px 5px 7px;
    gap: 2px;
  }
}
@media (max-width: 640px) {
  .hero-shell .service-tabs {
    min-height: 62px;
    top: -36px;
  }
  .hero-shell .service-tabs button,
  .hero-shell .service-tabs .service-link {
    min-height: 62px;
    padding: 4px 2px 6px;
    gap: 2px;
  }
  .hero-shell .service-tabs .service-glyph {
    padding: 3px;
  }
}

.hero-shell .service-tabs:has(.service-link:active) .selected .service-glyph {
  transform: none;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

/* T53: reconcile the full collage into one Travelsian visual system. */
.section-band.section {
  padding-block: 64px;
}
.section-band .section-heading {
  margin-bottom: 32px;
}
.section-band .section-heading > p {
  font-size: 15px;
  line-height: 1.65;
  max-width: 670px;
  margin-top: 12px;
}
.section-band .section-heading > .eyebrow.badge {
  padding-inline: 0;
}
.offers.section-band {
  padding-top: 36px;
}
.offer-card {
  min-height: 216.75px;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  background: var(--navy);
}
.offer-card.red {
  background: var(--red);
}
.offer-card.sky {
  background: #d5eef7;
  color: var(--navy);
}
.offer-card.orange {
  background: var(--navy);
}
.offer-card > div {
  width: 76%;
}
.offer-card h2 {
  font:
    600 clamp(22px, 2.1vw, 28px)/1.17 Roboto,
    Arial,
    sans-serif;
  margin: 9px 0 16px;
  letter-spacing: -0.5px;
}
.offer-kicker {
  font-size: 9px;
  letter-spacing: 0.9px;
  font-weight: 500;
}
.offer-card > img {
  right: -12%;
  bottom: -38%;
  height: 145%;
  width: 74%;
}
.offer-card.sky > img,
.offer-card.orange > img {
  inset: 0 0 0 auto;
  width: 57%;
  height: 100%;
  opacity: 1;
  mix-blend-mode: normal;
  object-fit: cover;
  object-position: center;
  mask-image: linear-gradient(90deg, transparent, #000 48%);
}
.offer-card.sky:after,
.offer-card.orange:after {
  display: none;
}
.offer-card.sky > img {
  object-position: 65% center;
}
.offer-card.orange > img {
  object-position: 75% center;
}
.offer-card .mini-pill {
  min-height: 40px;
  padding: 6px 8px 6px 14px;
  font-size: 11px;
  gap: 10px;
}
.slider-controls {
  margin-top: 26px;
  gap: 16px;
}
.circle {
  width: 42px;
  height: 42px;
}
.service-marks {
  justify-content: space-around;
  gap: 28px;
  padding-block: 32px;
}
.service-marks > span {
  font: 500 14px/1.4 var(--body);
  font-style: normal;
  letter-spacing: 0;
  color: var(--navy);
  gap: 12px;
}
.service-marks svg {
  color: var(--red);
  width: 25px;
  height: 25px;
}
.airline-grid {
  gap: 16px;
}
.airline-grid > .airline-card {
  padding: 12px 16px;
  box-shadow: none;
  border-radius: 14px;
}
.airline-logo {
  min-height: 62px;
  padding: 10px;
}
.airline-logo img {
  height: 40px;
}
.airline-name {
  padding-top: 10px;
}
.hotel-grid {
  gap: 24px;
}
.hotel-photo {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 16px;
}
.hotel-card .hotel-photo img {
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: 0;
}
.stay-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 10px;
  border-radius: 20px;
  color: var(--navy);
  background: #fffffff0;
  font: 500 10px/1.4 var(--body);
}
.hotel-card h3 {
  font: 600 17px/1.35 var(--heading);
  margin: 15px 0 7px;
}
.stay-location {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.stay-location svg {
  width: 14px;
  height: 14px;
  color: var(--red);
}
.cta .section-heading {
  text-align: left;
}
.cta .section-heading > .eyebrow.badge {
  padding: 0;
}
.cta .section-heading > p {
  margin-left: 0;
}
.about-content > .section-heading {
  text-align: left;
  margin-bottom: 24px;
}
.about-content > .section-heading > p {
  margin-left: 0;
}
.about-collage .about-tall {
  object-position: 49% center;
}
.about-collage .about-top {
  object-position: 75% center;
}
.about-collage .about-bottom {
  object-position: 58% center;
}
.feature {
  gap: 18px;
}
.feature > span {
  background: #e5f4f9;
  color: var(--navy);
}
.tours {
  position: relative;
}
.tours:after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 24%;
  background: #fff;
  z-index: -1;
}
.tour-grid {
  gap: 22px;
  align-items: stretch;
}
.tour-card {
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.tour-photo {
  position: relative;
}
.tour-photo > img {
  width: 100%;
  aspect-ratio: 1.12;
  object-fit: cover;
}
.tour-duration {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fffffff2;
  color: var(--navy);
  border-radius: 20px;
  padding: 5px 10px;
  font: 500 11px var(--body);
}
.tour-duration svg {
  width: 14px;
  height: 14px;
}
.tour-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 18px;
}
.tour-location {
  color: var(--muted);
  font: 400 12px/1.4 var(--body);
  margin-bottom: 7px;
}
.tour-body h3 {
  font: 600 17px/1.35 var(--heading);
  margin-bottom: 0;
}
.tour-price {
  margin: 18px 0;
  font-size: 11px;
  line-height: 1.5;
}
.tour-price strong {
  font-size: 23px;
  color: var(--navy);
  letter-spacing: -0.5px;
}
.tour-price > span {
  display: block;
  color: var(--muted);
}
.tour-foot {
  margin-top: auto;
}
.tour-foot button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  border-color: #d6e3ec;
  font-size: 12px;
  padding: 10px 16px;
}
.newsletter {
  grid-template-columns: 205px 1fr 140px;
}
.newsletter-traveler {
  width: 200px;
  height: 245px;
  left: -2px;
}
.newsletter .section-heading {
  --section-title-size: 26px;
  --section-label-size: 22px;
  margin-bottom: 18px;
}
.newsletter .section-heading > p {
  font-size: 13px;
  margin-top: 8px;
}
.newsletter .section-heading > h2 {
  letter-spacing: -0.4px;
}
.newsletter-bag {
  width: 135px;
  height: 185px;
  transform: none;
  object-fit: contain;
}
.newsletter #newsletter-status {
  font-size: 11px;
}
.footer-grid p,
.footer-grid > div:not(:first-child) > a,
.footer-grid > div:not(:first-child) > button:not(.pill) {
  font-size: 14px;
  line-height: 1.7;
}
.footer-grid {
  gap: 40px;
  grid-template-columns: 1.65fr 1fr 1fr 1.3fr;
}
@media (min-width: 1025px) {
  .about {
    gap: 55px;
    align-items: center;
  }
  .about-collage {
    grid-template-rows: 220px 220px;
  }
}
@media (max-width: 1024px) {
  .section-band.section {
    padding-block: 32px;
  }
  .section-band .section-heading {
    margin-bottom: 22px;
  }
  .section-band .section-heading > p {
    font-size: 14px;
    max-width: 580px;
    line-height: 1.6;
    margin-top: 9px;
  }
  .offers.section-band {
    padding-top: 26px;
  }
  .offer-card {
    min-height: 187px;
    padding: 16px 20px;
  }
  .offer-card h2 {
    font-size: 24px;
  }
  .airline-grid > .airline-card {
    padding: 10px;
  }
  .airline-logo {
    min-height: 60px;
    padding: 8px;
  }
  .airline-logo img {
    height: 38px;
  }
  .hotel-grid {
    gap: 20px 16px;
  }
  .hotel-card h3 {
    font-size: 15px;
  }
  .cta .section-heading {
    margin: 0;
  }
  .about-content > .section-heading {
    text-align: center;
  }
  .about-content > .section-heading > p {
    margin-inline: auto;
  }
  .tour-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
  .tour-photo > img {
    aspect-ratio: 1.5;
  }
  .newsletter .section-heading {
    --section-title-size: 24px;
    margin-bottom: 18px;
  }
  .newsletter .section-heading > p {
    font-size: 13px;
  }
  .newsletter > div {
    max-width: 580px;
    margin-inline: auto;
  }
}
@media (max-width: 640px) {
  .section-band.section {
    padding-block: 28px;
  }
  .section-band .section-heading {
    margin-bottom: 20px;
  }
  .section-band .section-heading > p {
    font-size: 13px;
    line-height: 1.55;
    margin-top: 8px;
  }
  .offers.section-band {
    padding-top: 24px;
  }
  .offer-card {
    min-height: 168px;
    padding: 14px 16px;
  }
  .offer-card h2 {
    font-size: 23px;
    margin: 8px 0 13px;
  }
  .offer-kicker {
    font-size: 8px;
    letter-spacing: 0.55px;
  }
  .offer-card > div {
    width: 77%;
  }
  .offer-card .mini-pill {
    font-size: 10px;
  }
  .slider-controls {
    margin-top: 18px;
    gap: 12px;
  }
  .hotel-grid {
    gap: 20px 12px;
  }
  .hotel-card h3 {
    font-size: 13px;
    margin: 10px 0 5px;
  }
  .hotel-photo {
    border-radius: 12px;
  }
  .hotel-card .hotel-photo img {
    aspect-ratio: 1;
  }
  .stay-tag {
    top: 8px;
    left: 8px;
    font-size: 8px;
    padding: 4px 7px;
  }
  .stay-location {
    font-size: 10px;
    gap: 3px;
  }
  .stay-location svg {
    width: 12px;
    height: 12px;
  }
  .airline-grid > .airline-card {
    padding: 6px 10px;
  }
  .airline-grid .airline-logo {
    height: 30px;
    min-height: 30px;
    padding: 3px 6px;
  }
  .airline-grid .airline-logo img {
    height: 24px;
  }
  .airline-name {
    padding-top: 5px;
  }
  .cta .section-heading {
    margin: 0;
    text-align: left;
  }
  .cta .section-heading > p {
    font-size: 11px;
    margin-top: 3px;
    line-height: 1.3;
  }
  .about-content > .section-heading {
    margin-bottom: 18px;
  }
  .about-content > .about-collage {
    margin-block: 20px 24px;
  }
  .feature {
    gap: 13px;
  }
  .feature h3 {
    font-size: 17px;
  }
  .feature p {
    font-size: 13px;
    line-height: 1.6;
  }
  .tour-grid {
    gap: 14px 12px;
  }
  .tour-photo > img {
    aspect-ratio: 1.15;
  }
  .tour-duration {
    left: 7px;
    bottom: 7px;
    font-size: 9px;
    padding: 4px 7px;
    gap: 4px;
  }
  .tour-duration svg {
    width: 12px;
    height: 12px;
  }
  .tour-body {
    padding: 12px 10px;
  }
  .tour-location {
    font-size: 10px;
    margin-bottom: 5px;
  }
  .tour-body h3 {
    font-size: 13px;
    line-height: 1.4;
  }
  .tour-price {
    margin: 12px 0;
    font-size: 10px;
  }
  .tour-price strong {
    font-size: 19px;
  }
  .tour-foot button {
    font-size: 11px;
    padding: 8px 12px;
  }
  .newsletter {
    min-height: 0;
  }
  .newsletter .section-heading {
    --section-title-size: 22px;
    --section-label-size: 19px;
    margin-bottom: 16px;
  }
  .newsletter .section-heading > p {
    font-size: 12px;
  }
  .newsletter #newsletter-status {
    line-height: 1.5;
  }
  .newsletter form {
    padding-left: 12px;
  }
  .newsletter .pill {
    min-height: 44px;
    font-size: 11px;
  }
}

/* T54: newsletter surfaces derive from brand sky; photographic assets share navy/red styling. */
.newsletter .section-heading > h2 {
  color: var(--navy);
}
.newsletter .section-heading > p,
.newsletter #newsletter-status {
  color: #405b6d;
}

/* T55: allow the larger model's head to rise above the sky banner. */
@media (min-width: 1025px) {
  .newsletter-traveler {
    height: 114.2%;
    width: auto;
    max-width: none;
    left: 12px;
    bottom: 0;
    z-index: 2;
  }
}

/* T56: measured contact and newsletter anatomy from the owner's focused references. */
main > .contact-section {
  padding-block: 36px;
  background: linear-gradient(to bottom, var(--section-ice) 0 50%, #fff 50%);
  border-top: 0;
}
.cta {
  min-height: 214px;
  padding: 30px;
  border-radius: 20px;
  background-color: var(--navy);
  background-repeat: no-repeat;
}
.cta .section-heading {
  --section-title-size: 45px;
  max-width: 60%;
  margin: 0;
}
.cta .section-heading > h2 {
  line-height: 1.05;
  letter-spacing: -0.6px;
}
.cta .section-heading > h2 em {
  font:
    500 1.08em/1 "Dancing Script",
    cursive;
  color: #8ad3e6;
}
.cta .section-heading > .eyebrow.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  line-height: 1.2;
}
.cta-label-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
}
.cta-label-icon svg {
  width: 19px;
  height: 19px;
}
.cta > .pill {
  min-height: 45px;
  padding: 6px 7px 6px 20px;
  gap: 10px;
  font:
    600 14px/1.2 Roboto,
    Arial,
    sans-serif;
}
.cta > .pill .cta-button-arrow {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: #fff;
  color: var(--navy);
  font-size: 24px;
}
main > .newsletter-section {
  padding-block: 80px 50px;
}
.newsletter {
  --newsletter-height: 264px;
  display: flex;
  align-items: center;
  position: relative;
  height: var(--newsletter-height);
  min-height: 0;
  padding: 0;
  gap: 0;
  border-radius: 20px;
  overflow: visible;
  background-color: #cbe7f3;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='264' viewBox='0 0 1200 264'%3E%3Cg fill='none' stroke='%2362bfdb' stroke-opacity='.18' stroke-width='1.2'%3E%3Cpath d='M-80 40C120 130 170-80 390 40S650 230 860 85 1150 90 1280 20M-80 50C120 140 170-70 390 50S650 240 860 95 1150 100 1280 30M-90 230C120 80 200 330 400 210S650 30 870 180 1110 130 1290 220M-90 240C120 90 200 340 400 220S650 40 870 190 1110 140 1290 230'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(110deg, #dceff8, #cbe7f3 48%, #b9deee);
  background-size: cover;
}
.newsletter > .newsletter-copy {
  width: 48%;
  max-width: none;
  margin: 0 0 0 26%;
  padding: 0;
  z-index: 3;
}
.newsletter-copy > h2 {
  font:
    600 24px/1.05 Roboto,
    Arial,
    sans-serif;
  letter-spacing: -0.3px;
  text-align: center;
  color: var(--navy);
  margin: 0 0 20px;
}
.newsletter form {
  height: 60px;
  min-height: 60px;
  background: #fff;
  border: 0;
  border-radius: 16px;
  padding: 8px 6px 8px 16px;
  gap: 10px;
}
.newsletter form > svg {
  width: 20px;
  height: 20px;
  color: var(--red);
}
.newsletter input {
  font-size: 14px;
}
.newsletter form > .pill {
  height: 40px;
  min-height: 40px;
  padding: 8px 14px;
  gap: 7px;
  font-size: 13px;
}
.newsletter form > .pill > svg {
  width: 18px;
  height: 18px;
}
.newsletter #newsletter-status {
  font:
    400 10px/1.4 Roboto,
    Arial,
    sans-serif;
  margin-top: 8px;
  text-align: center;
  color: #405b6d;
}
.newsletter > .newsletter-model-frame {
  position: absolute;
  left: 1%;
  bottom: 0;
  width: 24.5%;
  height: 125.2%;
  overflow: hidden;
  z-index: 2;
  pointer-events: none;
}
.newsletter-model-frame > .newsletter-traveler {
  position: absolute;
  bottom: auto;
  max-width: none;
}
.newsletter > .newsletter-luggage-frame {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 22%;
  height: 100%;
  overflow: hidden;
  border-radius: 0 20px 20px 0;
  z-index: 2;
  pointer-events: none;
}
.newsletter-luggage-frame > .newsletter-bag {
  position: absolute;
  left: 12%;
  top: 12px;
  width: 88%;
  height: auto;
  max-width: none;
  object-fit: contain;
  transform: rotate(-12deg);
  transform-origin: 50% 80%;
}
@media (max-width: 1200px) and (min-width: 1025px) {
  .newsletter-copy > h2 {
    font-size: 22px;
  }
  .newsletter form > .pill {
    padding-inline: 11px;
    font-size: 12px;
  }
  .newsletter input {
    font-size: 13px;
  }
}
@media (max-width: 1024px) {
  main > .contact-section {
    padding-block: 28px;
  }
  .cta {
    min-height: 170px;
    padding: 24px;
  }
  .cta .section-heading {
    --section-title-size: 30px;
    max-width: 68%;
  }
  .cta .section-heading > .eyebrow.badge {
    margin-bottom: 12px;
  }
  .cta > .pill {
    font-size: 12px;
    padding-left: 14px;
  }
  main > .newsletter-section {
    padding-block: 28px;
  }
  .newsletter {
    height: auto;
    min-height: 0;
    padding: 28px 24px;
    display: block;
  }
  .newsletter > .newsletter-copy {
    width: 100%;
    max-width: 610px;
    margin-inline: auto;
  }
  .newsletter > .newsletter-model-frame,
  .newsletter > .newsletter-luggage-frame {
    display: none;
  }
  .newsletter-copy > h2 {
    font-size: 24px;
  }
}
@media (max-width: 640px) {
  main > .contact-section {
    padding-block: 24px;
    background: var(--section-contact);
  }
  .cta {
    min-height: 105px;
    height: 105px;
    padding: 8px 10px;
    gap: 8px;
    border-radius: 16px;
    background-size:
      100% 100%,
      auto 100%;
    background-position:
      center,
      right center;
  }
  .cta .section-heading {
    --section-title-size: 16px;
    --section-label-size: 15px;
    max-width: none;
    flex: 1;
  }
  .cta .section-heading > .eyebrow.badge {
    gap: 4px;
    margin-bottom: 4px;
  }
  .cta-label-icon {
    width: 18px;
    height: 18px;
  }
  .cta-label-icon svg {
    width: 12px;
    height: 12px;
  }
  .cta > .pill {
    width: 82px;
    min-height: 44px;
    padding: 6px;
    gap: 4px;
    font-size: 10px;
  }
  .cta > .pill .cta-button-arrow {
    width: 20px;
    height: 20px;
    font-size: 17px;
  }
  main > .newsletter-section {
    padding-block: 24px;
  }
  .newsletter {
    padding: 26px 14px 20px;
    border-radius: 16px;
  }
  .newsletter-copy > h2 {
    font-size: 22px;
    line-height: 1.2;
    margin-bottom: 18px;
  }
  .newsletter form {
    height: 58px;
    min-height: 58px;
    padding: 7px 6px 7px 12px;
    gap: 7px;
  }
  .newsletter input {
    font-size: 16px;
  }
  .newsletter form > .pill {
    height: 44px;
    min-height: 44px;
    padding: 8px 11px;
    font-size: 11px;
    gap: 5px;
  }
  .newsletter form > .pill > svg {
    width: 16px;
    height: 16px;
  }
  .newsletter #newsletter-status {
    font-size: 10px;
  }
}

/* T57: restore the owner's preferred label, heading and subtitle. */
.newsletter .newsletter-heading {
  --section-title-size: 26px;
  --section-label-size: 23px;
  margin: 0 0 18px;
}
.newsletter .newsletter-heading > .eyebrow.badge {
  margin-bottom: 6px;
  padding: 0;
}
.newsletter .newsletter-heading > h2 {
  line-height: 1.25;
  letter-spacing: -0.4px;
}
.newsletter .newsletter-heading > p {
  font-size: 13px;
  line-height: 1.5;
  margin: 8px auto 0;
  color: #405b6d;
}
.newsletter-model-frame > .newsletter-traveler {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  object-fit: contain;
  object-position: center bottom;
}
@media (max-width: 1024px) {
  .newsletter .newsletter-heading {
    --section-title-size: 24px;
    --section-label-size: 20px;
  }
}
@media (max-width: 640px) {
  .newsletter .newsletter-heading {
    --section-title-size: 22px;
    --section-label-size: 19px;
  }
  .newsletter .newsletter-heading > p {
    font-size: 12px;
    line-height: 1.5;
  }
}

/* T59: deliberate card action contrast and coherent service photography. */
.offer-card.red .mini-pill,
.offer-card.orange .mini-pill {
  background: #fff;
  color: var(--navy);
}
.offer-card.red .mini-pill > span,
.offer-card.orange .mini-pill > span {
  background: var(--red);
  color: #fff;
}
.offer-card.sky .mini-pill {
  background: var(--navy);
  color: #fff;
}
.offer-card.sky .mini-pill > span {
  background: #fff;
  color: var(--navy);
}
.offer-card .mini-pill:hover {
  background: #e6f4fa;
  color: var(--navy);
}
.offer-card.sky .mini-pill:hover {
  background: var(--deep);
  color: #fff;
}
.tour-foot button,
.product-bottom button {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.tour-foot button:hover,
.product-bottom button:hover {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
.category-card .service-action {
  color: var(--navy);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.category-card .service-action > span {
  color: var(--red);
  margin-left: 2px;
}
.category-card.planned-service .service-action {
  color: var(--muted);
  font-weight: 400;
}
.category-card.shop-service .service-photo {
  background: linear-gradient(145deg, #edf8fc, #c7e7f3);
}
.category-card.shop-service .service-photo img {
  padding: 10px;
  object-fit: contain;
  object-position: center;
}
@media (max-width: 640px) {
  .category-card.shop-service .service-photo img {
    padding: 5px;
  }
}

/* T60: compact two-color selected service art; quiet gray inactive states. */
.hero-shell .search-tabs {
  flex: 1;
}
.hero-shell .service-tabs {
  --service-icon-size: 30px;
  --service-icon-lift: -8px;
}
.hero-shell .service-tabs button {
  color: #75818b;
}
.hero-shell .service-tabs .service-glyph {
  padding: 2px;
}
.hero-shell .service-glyph img {
  filter: grayscale(1);
  opacity: 0.58;
  transition:
    filter 200ms,
    opacity 200ms;
}
.hero-shell .service-tabs .selected {
  color: var(--navy);
}
.hero-shell .service-tabs .selected .service-glyph {
  transform: translateY(var(--service-icon-lift)) scale(1.12);
}
.hero-shell .selected .service-glyph img {
  filter: none;
  opacity: 1;
}
.hero-shell #travel-form[data-service="Shop"] .search-layout {
  flex-direction: row;
  flex-wrap: nowrap;
}
.hero-shell #travel-form[data-service="Shop"] .search-fields {
  flex: 1;
  min-width: 0;
}
.hero-shop-field {
  min-width: 0;
  width: 100%;
}
.hero-shop-field input {
  width: 100%;
  font-size: 15px;
}
.hero-shop-categories {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin: 14px 0 6px;
}
.hero-shop-categories button {
  border: 1px solid #dce6ec;
  border-radius: 24px;
  padding: 8px 13px;
  font-size: 11px;
  min-height: 36px;
  color: var(--navy);
  background: #fff;
}
.hero-shop-categories [aria-pressed="true"] {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.hero-shop-status {
  font-size: 10px;
  color: var(--muted);
  margin: 7px 0;
}
.hero-products {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}
.hero-product {
  display: block;
  min-width: 0;
  background: #f4f8fb;
  border: 1px solid #e0e9ef;
  border-radius: 12px;
  padding: 7px 8px 9px;
  text-align: center;
  color: var(--navy);
  transition:
    border-color 180ms,
    background 180ms;
}
.hero-product:hover,
.hero-product:focus-visible {
  border-color: var(--red);
  background: #fff;
}
.hero-product-art {
  height: 58px;
  display: block;
}
.hero-product-art svg {
  width: 100%;
  height: 100%;
  stroke: none;
}
.hero-product strong {
  display: block;
  font-size: 11px;
  line-height: 1.3;
  font-weight: 600;
  min-height: 29px;
  margin-top: 3px;
}
.hero-product small {
  display: block;
  font-size: 11px;
  margin-top: 4px;
}
.hero-product small > span {
  font-size: 9px;
  color: var(--muted);
}
.hero-shop-empty {
  display: flex;
  gap: 7px;
  align-items: center;
  flex-wrap: wrap;
  padding: 17px;
  background: #f4f8fb;
  border-radius: 12px;
  font-size: 12px;
}
.hero-shop-empty span {
  color: var(--muted);
}
.hero-shop-empty button {
  color: var(--red);
  text-decoration: underline;
  min-height: 36px;
  margin-left: auto;
}
.cta {
  background-image:
    linear-gradient(
      90deg,
      #0b3f5df5 0%,
      #0b3f5deb 32%,
      #0b3f5d99 44%,
      #0b3f5d14 61%,
      #082f4629 100%
    ),
    url("assets/contact-t68/keys-journey.png");
  background-size: cover;
  background-position: center 15%;
}
.cta > .pill {
  background: var(--red);
  color: #fff;
  border: 0;
  box-shadow: 0 5px 20px #082f464d;
  flex-shrink: 0;
}
.about-tall {
  object-position: 40% center;
}
.about-top,
.about-bottom {
  object-position: center;
}
.airline-logo img {
  filter: none;
  opacity: 1;
  object-fit: contain;
}
@media (max-width: 1024px) {
  .hero-shell .service-tabs {
    --service-icon-size: 30px;
  }
  .hero-products {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 7px;
  }
  .hero-product {
    padding: 6px;
  }
  .hero-product strong {
    font-size: 10px;
  }
}
@media (max-width: 640px) {
  .hero-shell .service-tabs {
    --service-icon-size: 26px;
    --service-icon-lift: -6px;
  }
  .hero-shell #travel-form[data-service="Shop"] .search-submit {
    width: 82px;
    flex: 0 0 82px;
    padding: 8px;
    min-height: 54px;
    font-size: 11px;
  }
  .hero-shell #travel-form[data-service="Shop"] .search-submit svg {
    width: 16px;
  }
  .hero-shop-field input {
    font-size: 14px;
  }
  .hero-shop-categories {
    gap: 5px;
    margin-top: 10px;
  }
  .hero-shop-categories button {
    font-size: 9px;
    padding: 6px 9px;
    min-height: 32px;
  }
  .hero-products {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 8px;
    padding-bottom: 5px;
    scrollbar-width: thin;
  }
  .hero-product {
    flex: 0 0 100px;
    scroll-snap-align: start;
    padding: 6px;
  }
  .hero-product-art {
    height: 50px;
  }
  .hero-product strong {
    min-height: 27px;
  }
  .hero-product small {
    font-size: 10px;
  }
  .hero-shop-empty {
    font-size: 11px;
    display: block;
  }
  .hero-shop-empty > * {
    display: block;
  }
  .cta > .pill {
    border-width: 0;
    box-shadow: 0 3px 12px #082f4666;
  }
}

/* T70: owner screenshot header geometry; Travelsian branding and authentic copy. */
.nav-wrap {
  position: relative;
  z-index: 36;
  min-height: 92px;
  gap: 32px;
  padding-right: 36px;
  background: #fff;
}
.nav-wrap .brand {
  position: relative;
  isolation: isolate;
  flex: 0 0 260px;
  min-width: 260px;
  min-height: 92px;
  padding: 15px 18px 15px 24px;
  gap: 12px;
  margin-right: 0;
  border-radius: 0;
  background: none;
  color: #fff;
}
.nav-wrap .brand:before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 -52px 0 0;
  background: var(--navy);
  mask: url("assets/header-brand-curve.svg") 0 0/100% 100% no-repeat;
}
.nav-wrap .brand img {
  width: 52px;
  height: 52px;
}
.nav-wrap #main-nav {
  display: flex;
  position: static;
  align-items: center;
  justify-content: flex-start;
  flex: 1;
  gap: 26px;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: none;
  font:
    400 16px/1.5 Inter,
    Arial,
    sans-serif;
  color: var(--navy);
}
#main-nav > a,
#main-nav > button,
#main-nav > .nav-dropdown > summary {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 32px 0;
  min-height: 92px;
  white-space: nowrap;
  cursor: pointer;
  transition: color 160ms;
}
#main-nav > button {
  font: inherit;
}
#main-nav > a:hover,
#main-nav > button:hover,
#main-nav > .nav-dropdown > summary:hover,
#main-nav .active {
  color: var(--red);
}
#main-nav > a:after,
#main-nav > .nav-dropdown > summary:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 27px;
  height: 1px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms;
}
#main-nav > a.active:after,
#main-nav > a:hover:after,
#main-nav > .nav-dropdown > summary.active:after,
#main-nav > .nav-dropdown[open] > summary:after {
  width: auto;
  transform: scaleX(1);
}
.nav-dropdown {
  position: relative;
}
.nav-dropdown > summary {
  list-style: none;
}
.nav-dropdown > summary::-webkit-details-marker {
  display: none;
}
.nav-dropdown > summary > svg {
  width: 12px;
  height: 12px;
  stroke-width: 1.7;
  transition: transform 180ms;
}
.nav-dropdown[open] > summary > svg {
  transform: rotate(180deg);
}
.nav-dropdown-panel {
  position: absolute;
  top: calc(100% - 8px);
  left: -22px;
  z-index: 50;
  min-width: 250px;
  padding: 18px 10px 10px;
  background: #fff;
  border: 1px solid #e2e9ee;
  border-top: 3px solid var(--red);
  border-radius: 0 0 14px 14px;
  box-shadow: 0 14px 35px #082f461a;
}
.nav-dropdown-label {
  display: block;
  padding: 0 12px 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
}
.nav-dropdown-panel > a,
.nav-dropdown-panel > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  min-height: 43px;
  padding: 10px 12px;
  border-radius: 7px;
  text-align: left;
  font:
    400 14px/1.4 Inter,
    Arial,
    sans-serif;
  color: var(--navy);
  transition:
    background 160ms,
    color 160ms;
}
.nav-dropdown-panel > a:hover,
.nav-dropdown-panel > button:hover,
.nav-dropdown-panel > a:focus-visible,
.nav-dropdown-panel > button:focus-visible {
  background: #edf7fb;
  color: var(--red);
}
.nav-dropdown-panel svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.5;
}
.nav-wrap .nav-book {
  flex-shrink: 0;
  justify-content: center;
  margin-left: auto;
  width: 160px;
  padding: 16px 22px;
  min-height: 56px;
  font:
    400 16px/1.2 Inter,
    Arial,
    sans-serif;
  gap: 14px;
}
.nav-book-arrow {
  width: 32px;
  height: 24px;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
#main-nav .active {
  color: var(--navy);
}
#main-nav > a.active:after,
#main-nav summary.active:after {
  background: var(--navy);
}
@media (min-width: 1025px) and (max-width: 1399px) {
  .nav-wrap {
    gap: 24px;
    padding-right: 24px;
  }
  .nav-wrap .brand {
    flex-basis: 224px;
    min-width: 224px;
    padding-left: 20px;
    padding-right: 8px;
    margin-right: 0;
    gap: 8px;
  }
  .nav-wrap .brand img {
    width: 46px;
    height: 46px;
  }
  .nav-wrap #main-nav {
    gap: 20px;
    font-size: 15px;
  }
  .nav-wrap .brand:before {
    right: -48px;
  }
  .nav-wrap .nav-book {
    width: 146px;
    padding: 12px 18px;
    min-height: 50px;
    font-size: 14px;
    gap: 14px;
  }
}
@media (min-width: 1025px) and (max-width: 1199px) {
  .nav-wrap {
    gap: 16px;
    padding-right: 16px;
  }
  .nav-wrap .brand {
    flex-basis: 198px;
    min-width: 198px;
    padding-left: 14px;
    padding-right: 8px;
    margin-right: 0;
    gap: 7px;
  }
  .nav-wrap .brand img {
    width: 42px;
    height: 42px;
  }
  .nav-wrap #main-nav {
    gap: 14px;
    font-size: 14px;
  }
  .nav-wrap .nav-book {
    width: 126px;
    padding: 12px 15px;
    min-height: 48px;
    font-size: 13px;
    gap: 10px;
  }
  .nav-wrap .brand:before {
    right: -42px;
  }
}
@media (min-width: 1600px) {
  .nav-wrap {
    gap: 50px;
    padding-right: 72px;
  }
  .nav-wrap .brand {
    flex-basis: 308px;
    min-width: 308px;
    padding-left: 68px;
    padding-right: 19px;
    gap: 12px;
  }
  .nav-wrap .brand img {
    width: 55px;
    height: 55px;
  }
  .nav-wrap #main-nav {
    gap: 40px;
  }
  .nav-wrap .nav-book {
    width: 180px;
  }
}
.topbar {
  font:
    400 14px/1.5 Inter,
    Arial,
    sans-serif;
}
.topbar .top-inner {
  min-height: 47px;
  padding: 0 36px;
}
.top-details {
  gap: 26px;
}
.top-details > span,
.top-details > a {
  display: flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
}
.top-details > a {
  border-left: 1px solid #cfd6db;
  padding-left: 26px;
}
.top-details svg {
  width: 15px;
  height: 15px;
  stroke-width: 1.5;
}
.top-help {
  display: flex;
  align-items: center;
  gap: 16px;
  white-space: nowrap;
}
.top-help > button,
.top-help > a {
  font: inherit;
}
.top-help .top-language {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-width: 140px;
  min-height: 34px;
  padding: 6px 18px;
  border: 1px solid #dce2e6;
  border-radius: 30px;
  background: #fff;
}
.top-language svg {
  width: 13px;
  height: 13px;
}
.top-help .top-language + button {
  border-left: 0;
  padding-left: 6px;
}
@media (min-width: 1600px) {
  .topbar .top-inner {
    padding-left: 68px;
    padding-right: 72px;
  }
}
@media (min-width: 1025px) and (max-width: 1199px) {
  .topbar {
    font-size: 12px;
  }
  .topbar .top-inner {
    padding-inline: 20px;
  }
  .top-details {
    gap: 14px;
  }
  .top-details > a {
    padding-left: 14px;
  }
  .top-help {
    gap: 12px;
  }
  .top-help .top-language {
    min-width: 112px;
  }
}
@media (max-width: 1024px) {
  .nav-wrap {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  #main-nav * {
    transition: none;
  }
}

/* T72: low-contrast scenic footer with accessible social marks. */
footer#contact {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-bottom: 20px;
}
footer#contact:before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background-image:
    url("assets/footer-t72/world-map.svg"),
    url("assets/footer-t72/coast-left.svg"),
    url("assets/footer-t72/coast-right.svg");
  background-repeat: no-repeat;
  background-size:
    820px auto,
    370px auto,
    370px auto;
  background-position:
    center 47%,
    left bottom,
    right bottom;
}
footer#contact > .footer-grid,
footer#contact > .trust-row,
footer#contact > .copyright {
  position: relative;
  z-index: 1;
}
.footer-social {
  margin-top: 23px;
}
.footer-social h4 {
  font:
    500 15px/1.4 Roboto,
    Arial,
    sans-serif;
  color: var(--navy);
  margin: 0 0 8px;
}
.footer-social-links {
  display: flex;
  align-items: center;
  gap: 4px;
}
.footer-social-links > button,
.footer-social-links > a {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: transparent;
  transition: transform 160ms;
}
.footer-social-links > a:before,
.footer-social-links > button:before {
  content: "";
  position: absolute;
  inset: 4px;
  z-index: -1;
  border-radius: 50%;
  background: var(--navy);
  transition: background 160ms;
}
.footer-social-links svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  stroke: none;
}
.footer-social-links > a:is(:hover, :focus-visible):before,
.footer-social-links > button:is(:hover, :focus-visible):before {
  background: var(--red);
}
.footer-social-links > a:is(:hover, :focus-visible),
.footer-social-links > button:is(:hover, :focus-visible) {
  color: #fff;
  transform: translateY(-2px);
}
@media (max-width: 1024px) {
  footer#contact {
    display: block;
    padding: 24px 16px 20px;
    background: #f6fafc;
  }
  footer#contact:before {
    background-size:
      440px auto,
      180px auto,
      180px auto;
    background-position:
      center 50%,
      left bottom,
      right bottom;
    opacity: 0.8;
  }
  footer#contact .footer-grid {
    display: block;
    width: 100%;
  }
  footer#contact .footer-grid > div {
    display: none;
  }
  footer#contact .footer-grid > div:last-child {
    display: block;
  }
  footer#contact .footer-grid > div:last-child > :not(.footer-social) {
    display: none;
  }
  footer#contact .footer-social {
    margin: 0;
    text-align: center;
  }
  footer#contact .footer-social h4 {
    font-size: 15px;
    margin-bottom: 8px;
  }
  footer#contact .footer-social-links {
    justify-content: center;
    gap: 4px;
  }
  footer#contact .footer-social-links > button,
  footer#contact .footer-social-links > a {
    width: 44px;
    height: 44px;
  }
  footer#contact .footer-social-links > a:before,
  footer#contact .footer-social-links > button:before {
    inset: 6px;
  }
  footer#contact .trust-row {
    display: none;
  }
  footer#contact .copyright {
    margin: 16px 0 0;
    padding: 0;
    font-size: 10px;
    line-height: 1.5;
  }
  footer#contact .copyright > span {
    display: none;
  }
}
@media (max-width: 360px) {
  footer#contact .footer-social-links {
    gap: 2px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .footer-social-links > * {
    transition: none;
    transform: none;
  }
}

/* T73 payment row; T74 compact reference-sized card marks. */
.footer-payments {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 18px;
}
.footer-payments > p {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font:
    500 13px/1.4 Roboto,
    Arial,
    sans-serif;
  color: var(--navy);
}
.payment-preview {
  border: 1px solid #d9e5ec;
  border-radius: 20px;
  padding: 3px 8px;
  color: var(--muted);
  background: #fff;
  font:
    400 10px/1.2 Roboto,
    Arial,
    sans-serif;
}
.payment-marks {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.payment-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 24px;
  background: #fff;
  border: 1px solid #dce5ec;
  border-radius: 3px;
  overflow: hidden;
}
.payment-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (max-width: 1024px) {
  footer#contact .footer-payments {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #e1ebf1;
  }
  footer#contact .footer-payments > p {
    font-size: 12px;
  }
  footer#contact .payment-marks {
    justify-content: center;
    gap: 8px;
  }
  footer#contact .payment-mark {
    width: 38px;
    height: 24px;
  }
}

/* T76: screenshot-based split-airport route grid. */
:root {
  --route-surface: #edf6fa;
}
.flight-routes {
  background: var(--route-surface);
}
.flight-routes .routes-container {
  max-width: 1144px;
}
.route-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
}
.route-tabs > button {
  min-width: 140px;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: 4px;
  background: #edf2f6;
  color: var(--muted);
  font-weight: 600;
  font-size: 14px;
  transition:
    background 160ms,
    color 160ms;
}
.route-tabs > button[aria-selected="true"] {
  background: var(--red);
  color: #fff;
}
.route-tabs > button:hover {
  background: var(--navy);
  color: #fff;
}
.route-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.route-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  height: 80px;
  padding: 16px 20px;
  border: 1px solid #e1e9ef;
  border-radius: 8px;
  background: #fff;
  text-align: left;
}
.route-card:before {
  content: "";
  position: absolute;
  inset: 6px auto 6px 50%;
  width: 1px;
  background: #e5edf3;
}
.route-airport {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.route-arrival {
  text-align: right;
}
.route-airport strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.route-airport small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 12px;
}
.route-plane {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #e4f1f7;
  color: var(--navy);
}
.route-card:is(:hover, :focus-visible) {
  border-color: var(--navy);
  background: #eef6fa;
}
@media (max-width: 1024px) {
  .route-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .route-card {
    padding-inline: 16px;
  }
}
@media (max-width: 640px) {
  .route-tabs > button {
    min-width: 126px;
    min-height: 44px;
    padding: 10px 16px;
  }
  .route-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .route-card {
    height: 76px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .route-card,
  .route-tabs > button {
    transition: none;
  }
}

/* T78: six-logo reference carousel; shared LoopRail supplies loop/swipe/motion guards. */
.travel-brand-container {
  padding-bottom: 42px;
}
.travel-brand-viewport.loop-viewport {
  --loop-visible: 6;
  --loop-gap: 25px;
  cursor: grab;
  touch-action: pan-x pan-y;
}
.travel-brand-viewport:active {
  cursor: grabbing;
}
.brand-cycle {
  align-items: center;
}
.brand-cycle > .travel-brand-mark {
  display: grid;
  place-items: center;
  width: var(--loop-card-width);
  flex: 0 0 var(--loop-card-width);
  height: 82px;
  min-width: 0;
}
.travel-brand-mark img {
  display: block;
  width: 100%;
  height: 74px;
  object-fit: contain;
}
@media (max-width: 999px) {
  .travel-brand-viewport.loop-viewport {
    --loop-visible: 3;
  }
}
@media (max-width: 599px) {
  .travel-brand-strip {
    padding-top: 24px;
  }
  .travel-brand-container {
    padding-bottom: 24px;
  }
  .travel-brand-viewport.loop-viewport {
    --loop-visible: 2;
    --loop-gap: 25px;
  }
  .brand-cycle > .travel-brand-mark {
    height: 70px;
  }
  .travel-brand-mark img {
    height: 62px;
  }
}

/* T80: transparent desktop overlay, original curved menu surface on scroll. */
@media (min-width: 1025px) {
  .hero-shell .search-region {
    scroll-margin-top: 64px;
  }
  .website-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 60;
    background: transparent;
  }
  .website-header .nav-wrap {
    transition:
      background 200ms,
      box-shadow 200ms;
  }
  .website-header .brand:before {
    transition: opacity 200ms;
  }
  .website-header:not(.is-scrolled) .brand:before {
    opacity: 0;
  }
  .website-header:not(.is-scrolled) #main-nav {
    color: #fff;
  }
  .website-header:not(.is-scrolled) #main-nav > a,
  .website-header:not(.is-scrolled) #main-nav > button,
  .website-header:not(.is-scrolled) #main-nav > .nav-dropdown > summary {
    color: #fff;
    text-shadow: 0 1px 10px #082f4655;
  }
  .website-header:not(.is-scrolled) #main-nav > a:after,
  .website-header:not(.is-scrolled) #main-nav > .nav-dropdown > summary:after {
    background: #fff;
  }
  .website-header:not(.is-scrolled) #main-nav > a:hover,
  .website-header:not(.is-scrolled) #main-nav > button:hover,
  .website-header:not(.is-scrolled) #main-nav > .nav-dropdown > summary:hover {
    color: var(--red);
  }
  .website-header:not(.is-scrolled) .nav-book {
    box-shadow: 0 0 0 1px #ffffff4d;
  }
  .website-header.is-scrolled .brand:before {
    opacity: 1;
  }
  .hero-shell > .hero:after {
    background: linear-gradient(
      180deg,
      #082f468c 0%,
      #082f462e 112px,
      #082f460d 65%
    );
  }
}
@media (prefers-reduced-motion: reduce) {
  .website-header .nav-wrap,
  .website-header .brand:before {
    transition: none;
  }
}

/* T81: preserve more hero media and use the owner's service-icon navigation layout. */
.hero-shell {
  --hero-clearance: 70px;
  --hero-photo-height: calc(
    max(
        var(--hero-base-height),
        calc(var(--search-card-half) + var(--hero-clearance))
      ) *
      1.3
  );
}
@media (max-width: 1024px) {
  .hero-shell {
    --hero-clearance: 230px;
  }
}
@media (min-width: 1025px) {
  html {
    scroll-padding-top: 96px;
  }
  .website-header .nav-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 24px;
    min-height: 80px;
    margin-inline: auto;
    padding: 0;
    background: transparent;
    box-shadow: none;
  }
  .website-header.is-scrolled {
    background: #fff;
    box-shadow: 0 4px 20px #082f4614;
  }
  .website-header.is-scrolled .nav-wrap {
    background: transparent;
    box-shadow: none;
  }
  .website-header .nav-wrap .brand {
    display: flex;
    align-items: center;
    justify-self: start;
    min-height: 80px;
    min-width: 0;
    margin: 0;
    gap: 8px;
    color: #fff;
  }
  .website-header .brand:before {
    display: none;
  }
  .website-header .nav-wrap .brand img {
    width: 196px;
    height: 53px;
  }
  .website-header.is-scrolled .brand {
    color: var(--navy);
  }
  .website-header.is-scrolled .brand img {
    filter: none;
  }
  .website-header #main-nav.header-service-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: none;
    padding: 0;
    font:
      500 14px/1.2 Inter,
      Arial,
      sans-serif;
    color: var(--navy);
  }
  .website-header #main-nav > .header-service {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 72px;
    min-height: 80px;
    padding: 8px 10px;
    color: var(--navy);
    font: inherit;
    text-shadow: none;
    border-radius: 0;
  }
  .website-header #main-nav > .header-service img {
    display: block;
    width: 30px;
    height: 26px;
    object-fit: contain;
  }
  .website-header #main-nav > .header-service:after {
    content: "";
    position: absolute;
    bottom: 7px;
    left: 16px;
    right: 16px;
    height: 2px;
    background: var(--red);
    transform: scaleX(0);
    transition: transform 180ms;
  }
  .website-header #main-nav > .header-service.is-active:after {
    transform: scaleX(1);
  }
  .website-header #main-nav > .header-service:hover {
    color: var(--red);
  }
  .website-header:not(.is-scrolled) #main-nav > .header-service {
    color: #fff;
  }
  .website-header:not(.is-scrolled) #main-nav > .header-service img {
    filter: none;
  }
  .header-actions {
    display: flex;
    align-items: center;
    justify-self: end;
    gap: 16px;
    white-space: nowrap;
  }
  .header-chat {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 0;
    min-height: 44px;
    font:
      600 14px/1.2 Inter,
      Arial,
      sans-serif;
    color: var(--navy);
  }
  .header-chat > svg {
    width: 27px;
    height: 27px;
  }
  .header-signin {
    min-width: 88px;
    min-height: 40px;
    padding: 10px 18px;
    background: var(--navy);
    color: #fff;
    border-radius: 4px;
    font:
      500 13px/1.2 Inter,
      Arial,
      sans-serif;
  }
  .header-actions .header-menu {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    min-height: 0;
    padding: 6px;
    background: var(--navy);
    color: #fff;
    border-radius: 10px;
  }
  .header-menu svg {
    width: 18px;
    height: 18px;
    stroke: #fff;
  }
  .header-signin:hover,
  .header-actions .header-menu:hover {
    background: var(--red);
  }
  .header-chat:hover {
    color: var(--red);
  }
  .website-header:not(.is-scrolled) .header-chat {
    color: #fff;
    --chat-mark: var(--navy);
  }
  .website-header:not(.is-scrolled) .header-signin,
  .website-header:not(.is-scrolled) .header-menu {
    box-shadow: none;
  }
  .hero-shell .hero-motion,
  .hero-shell .preview-label {
    top: 96px;
  }
}
@media (min-width: 1025px) and (max-width: 1199px) {
  .website-header .nav-wrap {
    gap: 16px;
    width: calc(100% - 40px);
  }
  .website-header #main-nav.header-service-nav {
    gap: 2px;
  }
  .website-header #main-nav > .header-service {
    min-width: 64px;
    padding-inline: 8px;
    font-size: 13px;
  }
  .header-actions {
    gap: 12px;
  }
  .header-chat {
    font-size: 13px;
  }
  .header-signin {
    min-width: 78px;
    padding-inline: 14px;
  }
}

@media (min-width: 1025px) {
  .header-icon {
    position: relative;
    display: block;
    width: 30px;
    height: 26px;
  }
  .website-header #main-nav > .header-service .header-icon img {
    position: absolute;
    inset: 0;
  }
  .website-header #main-nav > .header-service img.header-icon-light {
    display: none;
  }
  .website-header:not(.is-scrolled)
    #main-nav
    > .header-service
    img.header-icon-color {
    display: none;
  }
  .website-header:not(.is-scrolled)
    #main-nav
    > .header-service
    img.header-icon-light {
    display: block;
  }
}

/* T83: hide all header service items until the existing T82 reveal point. */
@media (min-width: 1025px) {
  .website-header:not(.has-service-icons) #main-nav {
    visibility: hidden;
    pointer-events: none;
  }
  .website-header.has-service-icons #main-nav {
    visibility: visible;
    pointer-events: auto;
  }
}
/* T85/T140: curved brand panel visible at rest;remaining header stays transparent. */
@media (min-width: 1025px) {
  .website-header .nav-wrap {
    width: 100%;
    max-width: none;
    margin: 0;
    padding-inline: 36px;
  }
  .website-header .nav-wrap .brand {
    position: relative;
    left: -36px;
    width: 260px;
    padding: 0 24px;
    isolation: isolate;
  }
  .website-header .nav-wrap .brand:before {
    display: block;
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 -52px 0 0;
    background: var(--navy);
    mask: url("assets/header-brand-curve.svg") 0 0/100% 100% no-repeat;
    opacity: 1;
    transition: none;
  }
  .website-header.is-scrolled .nav-wrap .brand:before {
    opacity: 1;
  }
  .website-header.is-scrolled .nav-wrap .brand {
    color: #fff;
  }
}
@media (min-width: 1025px) and (max-width: 1199px) {
  .website-header .nav-wrap {
    padding-inline: 20px;
  }
  .website-header .nav-wrap .brand {
    left: -20px;
    width: 242px;
    padding-left: 14px;
    padding-right: 14px;
  }
  .website-header .nav-wrap .brand:before {
    right: -42px;
  }
}
@media (min-width: 1600px) {
  .website-header .nav-wrap {
    padding-inline: 68px;
  }
  .website-header .nav-wrap .brand {
    left: -68px;
    width: 308px;
    padding-left: 68px;
    padding-right: 24px;
  }
  .website-header .nav-wrap .brand:before {
    right: -52px;
  }
}

/* T87: one restrained light sweep on filled action buttons. */
:root {
  --red-hover: #9f1820;
}
:is(
  .pill,
  .mini-pill,
  .search-submit,
  .header-signin,
  .header-menu,
  .app-pills > button,
  .product-bottom > button,
  .tour-foot > button
) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  user-select: none;
  transition:
    background-color 220ms,
    filter 220ms,
    transform 220ms;
}
:is(
  .pill,
  .mini-pill,
  .search-submit,
  .header-signin,
  .header-menu,
  .app-pills > button,
  .product-bottom > button,
  .tour-foot > button
)::before {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
  top: -50%;
  left: 0;
  width: 28%;
  height: 200%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.04) 25%,
    rgba(255, 255, 255, 0.12) 50%,
    rgba(255, 255, 255, 0.04) 75%,
    transparent
  );
  opacity: 0;
  transform: translateX(-180%) skewX(-20deg);
}
@keyframes travelsian-button-shine {
  0% {
    opacity: 0;
    transform: translateX(-180%) skewX(-20deg);
  }
  15% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(500%) skewX(-20deg);
  }
}
@media (hover: hover) {
  :is(
    .pill,
    .mini-pill,
    .search-submit,
    .header-signin,
    .header-menu,
    .app-pills > button,
    .product-bottom > button,
    .tour-foot > button
  ):hover {
    filter: brightness(1.04);
  }
  :is(
      .pill,
      .mini-pill,
      .search-submit,
      .header-signin,
      .header-menu,
      .app-pills > button,
      .product-bottom > button,
      .tour-foot > button
    ):hover::before {
    animation: travelsian-button-shine 900ms ease-out both;
  }
  .header-actions .header-signin:hover,
  .header-actions .header-menu:hover {
    background: var(--deep);
  }
  .cta > .pill:hover,
  .newsletter .accent:hover,
  .hero-shell .search-submit:hover {
    background: var(--red-hover);
  }
  .tour-foot > button:hover,
  .product-bottom > button:hover {
    background: var(--deep);
    border-color: var(--deep);
  }
}
@media (prefers-reduced-motion: reduce) {
  :is(
    .pill,
    .mini-pill,
    .search-submit,
    .header-signin,
    .header-menu,
    .app-pills > button,
    .product-bottom > button,
    .tour-foot > button
  ) {
    transition: none;
  }
  :is(
    .pill,
    .mini-pill,
    .search-submit,
    .header-signin,
    .header-menu,
    .app-pills > button,
    .product-bottom > button,
    .tour-foot > button
  )::before {
    display: none;
    animation: none !important;
  }
  :is(
    .pill,
    .mini-pill,
    .search-submit,
    .header-signin,
    .header-menu,
    .app-pills > button,
    .product-bottom > button,
    .tour-foot > button
  ):hover {
    transform: none;
  }
}

/* T89: reference-family photo zoom/wipe; imagery stays clipped to its own frame. */
:root {
  --photo-hover-scale: 1.3;
  --photo-zoom-duration: 1.3s;
  --photo-wipe-duration: 400ms;
}
:is(.service-photo, .hotel-photo, .tour-photo) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
:is(.service-photo, .hotel-photo, .tour-photo) > img {
  transition: transform var(--photo-zoom-duration) ease;
  transform-origin: center;
  user-select: none;
  -webkit-user-drag: none;
}
:is(.service-photo, .hotel-photo, .tour-photo)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #ffffff80;
  opacity: 0;
  transform: scaleY(0);
  transform-origin: top;
  pointer-events: none;
}
@keyframes travelsian-photo-wipe {
  0% {
    opacity: 0.6;
    transform: scaleY(0);
  }
  100% {
    opacity: 0;
    transform: scaleY(1);
  }
}
.service-icon,
.stay-tag,
.tour-duration {
  z-index: 2;
}
.tour-card {
  transition:
    transform 500ms ease,
    box-shadow 500ms ease;
}
.destination-card.side {
  filter: blur(4px);
}
.loop-viewport {
  cursor: grab;
}
.loop-viewport.is-dragging {
  cursor: grabbing;
  user-select: none;
}
.loop-viewport img {
  user-select: none;
  -webkit-user-drag: none;
}
.travel-brand-mark {
  position: relative;
  overflow: hidden;
}
.travel-brand-mark > img {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.travel-brand-mark > img.brand-roll-copy {
  transform: translateY(-150%);
  opacity: 0;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  :is(.category-card, .hotel-card, .tour-card):hover
    :is(.service-photo, .hotel-photo, .tour-photo)
    > img {
    transform: scale(var(--photo-hover-scale));
  }
  :is(.category-card, .hotel-card, .tour-card):hover
    :is(.service-photo, .hotel-photo, .tour-photo)::after {
    animation: travelsian-photo-wipe var(--photo-wipe-duration) linear both;
  }
  .tour-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 20px #0b3f5d14;
  }
  .travel-brand-mark:hover > img:not(.brand-roll-copy) {
    transform: translateY(50%);
    opacity: 0;
  }
  .travel-brand-mark:hover > img.brand-roll-copy {
    transform: translateY(-50%);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  :is(.service-photo, .hotel-photo, .tour-photo) > img,
  .tour-card,
  .travel-brand-mark > img {
    transition: none !important;
  }
  :is(.service-photo, .hotel-photo, .tour-photo)::after {
    display: none;
    animation: none !important;
  }
  :is(.category-card, .hotel-card, .tour-card):hover
    :is(.service-photo, .hotel-photo, .tour-photo)
    > img,
  .tour-card:hover {
    transform: none;
  }
  .travel-brand-mark:hover > img:not(.brand-roll-copy) {
    transform: translateY(-50%);
    opacity: 1;
  }
  .travel-brand-mark:hover > img.brand-roll-copy {
    opacity: 0;
  }
}

/* T90: patterned upper surfaces, quiet floating edge art and clean slider controls. */
:root {
  --ambient-opacity: 0.45;
}
main > .categories {
  background-color: #fff;
  background-image: var(--travel-pattern);
  background-position: center top;
  background-size: var(--travel-pattern-size);
  background-repeat: repeat;
}
main > .tours {
  position: relative;
  background: #fff;
}
.tours::after {
  content: none;
}
.tours::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 0;
  height: var(--tour-pattern-height, 65%);
  background-color: var(--section-tour);
  background-image: var(--travel-pattern);
  background-position: center top;
  background-size: var(--travel-pattern-size);
  background-repeat: repeat;
  pointer-events: none;
}
main .dots,
.destination-motion {
  display: none;
}
.tour-grid.loop-viewport {
  display: block;
  --loop-visible: 4;
  --loop-gap: 24px;
  padding: 8px 0 24px;
  scroll-snap-type: none;
}
.tour-cycle > .tour-card {
  width: var(--loop-card-width);
  flex: 0 0 var(--loop-card-width);
  min-width: 0;
  background: #fff;
}
:is(.destinations, .about-section, .tours) {
  position: relative;
  isolation: isolate;
}
:is(.destinations, .about-section, .tours) > .container,
:is(.about-section) > .about {
  position: relative;
  z-index: 1;
}
.ambient-decor {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  opacity: var(--ambient-opacity);
}
.ambient-decor img {
  width: 100%;
  height: auto;
  object-fit: contain;
  user-select: none;
}
.decor-balloons > img {
  position: absolute;
  width: 46%;
  left: 0;
  top: 34px;
  animation: travelsian-cloud-drift 10s linear infinite;
}
.decor-balloons > img:nth-child(2) {
  animation-duration: 15s;
  animation-delay: -4s;
}
.decor-balloons > img:nth-child(3) {
  animation-duration: 20s;
  animation-delay: -9s;
}
.decor-flight {
  width: clamp(40px, calc((100vw - 1280px) / 3), 120px);
  right: clamp(4px, calc((100vw - 1440px) / 4), 120px);
  bottom: 10%;
  animation: travelsian-side-drift 8s ease-in-out infinite;
}
.decor-tour-flight {
  width: clamp(40px, calc((100vw - 1280px) / 3), 110px);
  right: clamp(4px, calc((100vw - 1440px) / 4), 120px);
  bottom: 14px;
  animation: travelsian-side-drift 8s ease-in-out -3s infinite;
}
@keyframes travelsian-cloud-drift {
  0%,
  100% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(5px, -9px);
  }
  50% {
    transform: translate(11px, 0);
  }
  75% {
    transform: translate(5px, 8px);
  }
}
@keyframes travelsian-side-drift {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-16px);
  }
}
@media (max-width: 1299px) {
  .tour-grid.loop-viewport {
    --loop-visible: 3;
  }
}
@media (max-width: 1199px) {
  .tour-grid.loop-viewport {
    --loop-visible: 2;
  }
  .ambient-decor {
    display: none;
  }
}
@media (max-width: 767px) {
  .tour-grid.loop-viewport {
    --loop-visible: 1;
    --loop-gap: 16px;
  }
  .tour-cycle .tour-photo > img {
    aspect-ratio: 1.3;
  }
  .tours .slider-controls {
    margin-top: 4px;
  }
}
@media (max-width: 640px) {
  :root {
    --travel-pattern-size: 630px 465px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ambient-decor,
  .ambient-decor > img {
    animation: none !important;
  }
}

/* T91: section-specific details measured from the corresponding reference. */
:root {
  --travel-pattern: url("assets/section-art-t91/travel-scene.svg");
  --travel-pattern-size: 1920px 632px;
  --tour-card-line: #bcced2;
}
main > .section-band {
  border-top: 0;
}
.travel-brand-container {
  border-bottom: 0;
}
footer#contact {
  border-top: 0;
}
main .slider-controls,
main .destination-prev,
main .destination-next {
  display: none;
}
main > .categories,
.tours::before {
  background-size: var(--travel-pattern-size);
  background-repeat: no-repeat;
  background-position: center top;
}
.tour-card {
  border: 1px solid var(--tour-card-line);
  border-top: 0;
  box-shadow: none;
}
.tour-photo {
  border-radius: 16px 16px 0 0;
}
.hotel-grid.loop-viewport {
  display: block;
  --loop-visible: 4;
  --loop-gap: 24px;
  padding: 4px 0 12px;
  scroll-snap-type: none;
}
.hotel-cycle > .hotel-card {
  width: var(--loop-card-width);
  flex: 0 0 var(--loop-card-width);
  min-width: 0;
}
.travel-brand-mark > img {
  transition: none;
}
.travel-brand-mark:hover > img:not(.brand-roll-copy) {
  transform: translateY(-50%);
  opacity: 1;
}
.travel-brand-mark > .brand-roll-copy {
  display: none;
}
:is(.destinations, .about-section, .tours) {
  overflow: clip;
}
.decor-balloons {
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: min(1280px, calc(100% - 96px));
  height: 100%;
  opacity: 0.55;
}
.decor-balloons > img:nth-child(1) {
  width: 15px;
  left: -16%;
  top: 12%;
  animation: travelsian-balloon-rise 10s linear infinite;
}
.decor-balloons > img:nth-child(2) {
  width: 56px;
  left: -16%;
  top: 20%;
  animation: travelsian-balloon-rise 15s linear infinite;
}
.decor-balloons > img:nth-child(3) {
  width: 35px;
  left: -10%;
  top: 14%;
  animation: travelsian-balloon-rise 20s linear infinite;
}
@keyframes travelsian-balloon-rise {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-80px);
  }
}
.rail-drag-cursor {
  position: fixed;
  z-index: 60;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: #0b3f5db8;
  color: #fff;
  pointer-events: none;
  transform: translate(-50%, -50%);
  font: 500 12px var(--body);
  backdrop-filter: blur(2px);
}
.rail-drag-cursor[hidden] {
  display: none;
}
.rail-drag-cursor > span:not(.drag-word) {
  font-size: 24px;
  font-weight: 300;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .has-drag-cursor,
  .has-drag-cursor img {
    cursor: none;
  }
}
@media (max-width: 1024px) {
  .hotel-grid.loop-viewport {
    --loop-visible: 2;
    --loop-gap: 14px;
  }
}
@media (max-width: 1199px) {
  .decor-balloons {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .decor-balloons > img {
    animation: none !important;
  }
  .rail-drag-cursor {
    display: none;
  }
}

/* Keep one footer payment separator rather than framing the service marks. */
footer#contact .trust-row {
  border-top: 0;
}

/* T92: category pagination only, matching the reference's outlined circular marks. */
#categories .slider-controls {
  display: flex;
  justify-content: center;
  margin-top: 4px;
}
#categories .slider-controls > .circle {
  display: none;
}
#categories #category-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
  max-width: 100%;
}
#category-dots > button {
  position: relative;
  display: block;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  padding: 0;
  box-shadow: none;
  transition: none;
}
#category-dots > button::before {
  content: "";
  position: absolute;
  width: 7.5px;
  height: 7.5px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 0.5px solid var(--navy);
  border-radius: 50%;
  background: transparent;
  transition:
    background-color 180ms,
    border-color 180ms;
}
#category-dots > button.on::before {
  background: var(--navy);
  border-color: var(--navy);
}
#category-dots > button::after {
  content: none;
}
@media (max-width: 640px) {
  #categories #category-dots {
    gap: 0;
  }
  #category-dots > button {
    flex-basis: 40px;
    width: 40px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #category-dots > button::before {
    transition: none;
  }
}

/* T94: offer pagination and brand-only filled offer actions. */
:root {
  --offer-dot-muted: #bfd2df;
}
#offers .slider-controls {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
#offers .slider-controls > .circle {
  display: none;
}
#offers #offer-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}
#offer-dots > button {
  position: relative;
  flex: 0 0 32px;
  width: 32px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition: none;
}
#offer-dots > button::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  transform: translate(-50%, -50%);
  background: var(--offer-dot-muted);
  border-radius: 50%;
}
#offer-dots > button::after {
  content: none;
}
#offer-dots > button.on::before {
  background: var(--navy);
}
#offer-dots > button.on::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 15px;
  height: 15px;
  transform: translate(-50%, -50%);
  border: 1px solid var(--navy);
  border-radius: 50%;
  background: transparent;
}
.offer-card.red .mini-pill,
.offer-card.sky .mini-pill {
  background: var(--navy);
  color: #fff;
}
.offer-card.orange .mini-pill {
  background: var(--red);
  color: #fff;
}
.offer-card.red .mini-pill > span,
.offer-card.sky .mini-pill > span {
  background: var(--red);
  color: #fff;
}
.offer-card.orange .mini-pill > span {
  background: var(--navy);
  color: #fff;
}
.offer-card.red .mini-pill:hover,
.offer-card.sky .mini-pill:hover {
  background: var(--deep);
  color: #fff;
}
.offer-card.orange .mini-pill:hover {
  background: var(--red-hover);
  color: #fff;
}

/* T95: white newsletter surroundings and quiet, layered scenic footer. */
:root {
  --footer-surface: #f9fafb;
  --newsletter-surround: #fff;
}
main > .newsletter-section {
  background: var(--newsletter-surround);
}
footer#contact {
  background: var(--footer-surface);
}
footer#contact::before {
  background-size:
    min(1000px, 60vw) auto,
    30% auto,
    25% auto;
  background-position:
    center 55%,
    left bottom,
    right bottom;
}
/* T97: equal gaps from the blue panel to both adjacent section surfaces. */
@media (min-width: 1025px) {
  main > .newsletter-section {
    padding-block: 80px;
  }
  footer#contact {
    padding-top: 96px;
  }
}
@media (max-width: 1024px) {
  footer#contact::before {
    background-size:
      440px auto,
      180px auto,
      180px auto;
    background-position:
      center 50%,
      left bottom,
      right bottom;
  }
}

/* T98: reference-shaped partner ribbon across the airline/white-section boundary. */
:root {
  --brand-card-overlap: 80px;
  --brand-card-pad: 40px;
}
main > .airlines.section-band.section {
  padding-bottom: calc(64px + var(--brand-card-overlap));
}
.travel-brand-strip {
  position: relative;
  z-index: 2;
  display: flow-root;
  padding: 0;
  background: #fff;
}
.travel-brand-container {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: calc(-1 * var(--brand-card-overlap));
  max-width: 1296px;
  padding: var(--brand-card-pad) 20px;
  border: 0;
  border-radius: 20px;
  background: var(--navy);
}
.travel-brand-container::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("assets/brand-strip-t98/brand-ribbons.svg") center/100% 100%
    no-repeat;
  pointer-events: none;
}
.travel-brand-viewport.loop-viewport {
  padding: 0;
}
/* T100: owner selects the previous white logo treatment after the T99 trial. */
.travel-brand-mark img {
  filter: brightness(0) invert(1);
}
@media (max-width: 1024px) {
  :root {
    --brand-card-overlap: 72px;
    --brand-card-pad: 32px;
  }
  main > .airlines.section-band.section {
    padding-bottom: calc(32px + var(--brand-card-overlap));
  }
  .travel-brand-viewport.loop-viewport {
    --loop-visible: 3;
  }
}
@media (max-width: 640px) {
  :root {
    --brand-card-overlap: 58px;
    --brand-card-pad: 24px;
  }
  main > .airlines.section-band.section {
    padding-bottom: calc(28px + var(--brand-card-overlap));
  }
  .travel-brand-container {
    padding-inline: 16px;
    border-radius: 18px;
  }
  .travel-brand-viewport.loop-viewport {
    --loop-visible: 2;
  }
}

/* T101: filled route airplane with one outgoing/incoming hover exchange. */
.route-card {
  user-select: none;
}
.route-plane {
  width: 27px;
  height: 27px;
  overflow: hidden;
  transition: background-color 200ms ease-in-out;
}
.route-plane svg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20.25px;
  height: 20.25px;
  fill: currentColor;
  stroke: none;
  pointer-events: none;
  transition: transform 500ms ease-in-out;
}
.route-plane svg:first-child {
  transform: translate(-50%, -50%);
  color: var(--navy);
}
.route-plane svg:last-child {
  transform: translate(calc(-50% - 24.75px), calc(-50% + 24.75px));
  color: #fff;
}
.route-card:is(:focus-visible, :active) {
  border-color: var(--navy);
  background: #e4f1f7;
}
.route-card:is(:focus-visible, :active) .route-plane {
  background: var(--navy);
}
.route-card:is(:focus-visible, :active) .route-plane svg:first-child {
  transform: translate(calc(-50% + 24.75px), calc(-50% - 24.75px));
}
.route-card:is(:focus-visible, :active) .route-plane svg:last-child {
  transform: translate(-50%, -50%);
}
.route-card:is(:focus-visible, :active) .route-airport strong {
  color: var(--navy);
}
@media (hover: hover) {
  .route-card:hover {
    border-color: var(--navy);
    background: #e4f1f7;
  }
  .route-card:hover .route-plane {
    background: var(--navy);
  }
  .route-card:hover .route-plane svg:first-child {
    transform: translate(calc(-50% + 24.75px), calc(-50% - 24.75px));
  }
  .route-card:hover .route-plane svg:last-child {
    transform: translate(-50%, -50%);
  }
  .route-card:hover .route-airport strong {
    color: var(--navy);
  }
}
@media (prefers-reduced-motion: reduce) {
  .route-plane,
  .route-plane svg {
    transition: none;
  }
}

/* T102: route airplane18px (+50%); incoming plane brand-red on navy. */

/* T103: owner selects white incoming hover plane;18px size retained. */

/* T104: scale route plane and circle50% again:27px and36px. */
.route-airport {
  padding-right: 21px;
}
.route-arrival {
  padding-right: 0;
  padding-left: 21px;
}

/* T105:25% smaller plane/circle; pale-blue full-card hover for all six routes. */

/* T106: measured reference soft hover shadow. */
.route-card {
  box-shadow: none;
  transition:
    border-color 200ms ease-in-out,
    background-color 200ms ease-in-out,
    box-shadow 200ms ease-in-out;
}
.route-card:is(:focus-visible, :active) {
  box-shadow: 0 16px 24px -16px rgba(0, 0, 0, 0.16);
}
@media (hover: hover) {
  .route-card:hover {
    box-shadow: 0 16px 24px -16px rgba(0, 0, 0, 0.16);
  }
}
@media (prefers-reduced-motion: reduce) {
  .route-card {
    transition: none;
  }
}

/* T107: preview the selected visual treatment on hero service hover/focus. */
.hero-shell .service-tabs button {
  transition: color 200ms ease;
}
.hero-shell .service-tabs button::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 0;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 200ms ease;
}
.hero-shell .service-tabs button.selected::after,
.hero-shell .service-tabs button:focus-visible::after {
  transform: scaleX(1);
}
.hero-shell .service-tabs button:focus-visible {
  color: var(--navy);
}
.hero-shell .service-tabs button:focus-visible .service-glyph {
  transform: translateY(var(--service-icon-lift)) scale(1.12);
}
.hero-shell .service-tabs button:focus-visible .service-glyph img {
  filter: none;
  opacity: 1;
}
@media (hover: hover) and (pointer: fine) {
  .hero-shell .service-tabs button:hover {
    color: var(--navy);
  }
  .hero-shell .service-tabs button:hover::after {
    transform: scaleX(1);
  }
  .hero-shell .service-tabs button:hover .service-glyph {
    transform: translateY(var(--service-icon-lift)) scale(1.12);
  }
  .hero-shell .service-tabs button:hover .service-glyph img {
    filter: none;
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-shell .service-tabs button,
  .hero-shell .service-tabs button::after,
  .hero-shell .service-glyph,
  .hero-shell .service-glyph img {
    transition: none;
  }
}

/* T109: restore the previous detailed navy/red service miniatures. */
.category-card .service-icon {
  width: 44px;
  height: 44px;
  box-shadow: 0 3px 10px #082f4626;
}
.category-card .service-icon svg {
  width: 34px;
  height: 34px;
  stroke: none;
  overflow: visible;
}
@media (max-width: 640px) {
  .category-card .service-icon {
    width: 32px;
    height: 32px;
  }
  .category-card .service-icon svg {
    width: 25px;
    height: 25px;
  }
}

/* T112: one desktop-family curved brand panel across the app shell. */
@media (max-width: 1024px) {
  .app-header {
    gap: 6px;
    border: 0;
  }
  .app-brand {
    position: relative;
    isolation: isolate;
    height: 60px;
    min-height: 60px;
    width: 220px;
    margin-right: auto;
    padding: 0 34px 0 18px;
    color: #fff;
    gap: 6px;
  }
  .app-brand:before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--navy);
    mask: url("assets/header-brand-curve.svg") 0 0/100% 100% no-repeat;
  }
  .app-brand .logo-globe {
    display: none;
    width: 30px;
    height: 30px;
  }
  .app-brand .logo-lockup {
    width: 164px;
    height: 45px;
    flex-shrink: 0;
  }
  .app-header > button {
    flex: 0 0 44px;
    transition:
      background-color 180ms,
      color 180ms;
  }
  .app-header > button:is(:hover, :focus-visible) {
    background: var(--red);
    color: #fff;
  }
  /* Reduce the old hero-to-card clearance to 75%, preserving the live card height. */
  .hero-shell {
    --hero-photo-height: calc(
      max(
          var(--hero-base-height),
          calc(var(--search-card-half) + var(--hero-clearance))
        ) *
        0.975 + var(--search-card-half) * 0.25
    );
  }
  /* T113: one restrained treatment for all five navigation items. */
  .app-dock > a,
  .app-dock > button,
  .app-contact-toggle {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
  }
  .app-dock svg {
    width: 21px;
    height: 21px;
    flex-shrink: 0;
  }
  .app-dock [aria-current="page"]:before {
    position: absolute;
    top: auto;
    bottom: 1px;
    left: 50%;
    width: 14px;
    height: 2px;
    border-radius: 2px;
    background: var(--red);
    transform: translateX(-50%);
  }
  .app-contact-slot {
    min-width: 0;
  }
  .app-contact-orb {
    position: relative;
    display: grid;
    place-items: center;
    color: inherit;
  }
  .app-contact-orb svg {
    position: absolute;
  }
  .contact-chat {
    opacity: 0;
  }
  .app-contact-menu {
    color: var(--navy);
  }
  .app-contact-menu[hidden],
  .app-contact-menu [hidden] {
    display: none;
  }
  .app-contact-menu > a:is(:hover, :focus-visible),
  .app-contact-menu > button:is(:hover, :focus-visible) {
    background: #edf6fa;
  }
  .app-contact-row-icon {
    display: grid;
    place-items: center;
    flex: 0 0 40px;
    height: 40px;
    background: var(--navy);
    color: #fff;
    border-radius: 50%;
  }
  .app-contact-menu strong {
    display: block;
  }
  .app-contact-slot[data-chat-ready="true"] .contact-phone {
    animation: contact-phone-swap 5s ease-in-out infinite;
  }
  .app-contact-slot[data-chat-ready="true"] .contact-chat {
    animation: contact-chat-swap 5s ease-in-out infinite;
  }
}
@media (max-width: 640px) {
  .hero-shell {
    --hero-photo-height: calc(
      max(
          var(--hero-base-height),
          calc(var(--search-card-half) + var(--hero-clearance))
        ) *
        0.975 + var(--search-card-half) * 0.35
    );
  }
}
@media (max-width: 360px) {
  .app-brand {
    width: 202px;
    padding-left: 12px;
    padding-right: 26px;
    gap: 4px;
  }
  .app-brand .logo-lockup {
    width: 154px;
    height: 42px;
  }
  .app-header {
    padding-right: 6px;
    gap: 2px;
  }
}
@keyframes contact-menu-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes contact-phone-swap {
  0%,
  40%,
  100% {
    opacity: 1;
    transform: none;
  }
  50%,
  90% {
    opacity: 0;
    transform: scale(0.7) rotate(-12deg);
  }
}
@keyframes contact-chat-swap {
  0%,
  40%,
  100% {
    opacity: 0;
    transform: scale(0.7) rotate(12deg);
  }
  50%,
  90% {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .app-contact-slot *,
  .app-header > button,
  .app-dock > a,
  .app-dock > button {
    animation: none !important;
    transition: none !important;
  }
}

/* T114: attached bottom edge; reference-like press and restrained icon lift. */
@media (max-width: 1024px) {
  .app-dock > a,
  .app-dock > button,
  .app-contact-toggle {
    transition:
      background-color 200ms,
      color 200ms,
      transform 150ms;
  }
  .app-dock > a > svg,
  .app-dock > button > svg,
  .app-contact-orb {
    transform-origin: center;
    transition: transform 250ms cubic-bezier(0.2, 0.8, 0.2, 1.2);
  }
  .app-dock > a[aria-current="page"] > svg {
    transform: translateY(-1px);
  }
  .app-dock > a:focus-visible > svg,
  .app-dock > button:focus-visible > svg,
  .app-contact-toggle:is(:focus-visible, [aria-expanded="true"])
    .app-contact-orb {
    transform: translateY(-3px) scale(1.06);
  }
  .app-dock > a:active,
  .app-dock > button:active,
  .app-contact-toggle:active {
    transform: scale(0.94);
  }
  .app-dock > a:active > svg,
  .app-dock > button:active > svg,
  .app-contact-toggle:active .app-contact-orb {
    transform: scale(0.92);
  }
}
@media (max-width: 1024px) and (hover: hover) and (pointer: fine) {
  .app-dock > a:hover > svg,
  .app-dock > button:hover > svg,
  .app-contact-toggle:hover .app-contact-orb {
    transform: translateY(-3px) scale(1.06);
  }
}
@media (prefers-reduced-motion: reduce) {
  .app-dock > a,
  .app-dock > button,
  .app-contact-toggle,
  .app-dock > a > svg,
  .app-dock > button > svg,
  .app-contact-orb,
  .app-contact-menu > a,
  .app-contact-menu > button {
    transition: none !important;
    transform: none !important;
  }
}

/* T115 layout; T116 owner-selected brand navy surface. */
@media (max-width: 1024px) {
  .app-dock {
    background: var(--navy);
  }
  .app-dock > a,
  .app-dock > button,
  .app-contact-toggle {
    height: 60px;
    min-height: 60px;
    gap: 3px;
    color: #fff;
    font: 600 10.5px/1.4 var(--body);
    border-radius: 0;
    background: transparent;
  }
  .app-dock > a > svg,
  .app-dock > button > svg {
    box-sizing: content-box;
    width: 22px;
    height: 22px;
    padding: 4px 10px;
    border-radius: 15px;
    background: transparent;
    transition:
      background-color 200ms,
      color 200ms,
      transform 250ms cubic-bezier(0.2, 0.8, 0.2, 1.2);
  }
  .app-dock > a[aria-current="page"] > svg {
    background: #ffffff24;
  }
  .app-contact-orb {
    width: 42px;
    height: 30px;
    border-radius: 15px;
    transition:
      background-color 200ms,
      color 200ms,
      transform 250ms cubic-bezier(0.2, 0.8, 0.2, 1.2);
  }
  .app-contact-orb svg {
    width: 22px;
    height: 22px;
  }
  .app-dock > a:is(:hover, :focus-visible),
  .app-dock > button:is(:hover, :focus-visible),
  .app-contact-toggle:is(:hover, :focus-visible, [aria-expanded="true"]) {
    background: transparent;
    color: #fff;
  }
  .app-dock > a:is(:hover, :focus-visible) > svg,
  .app-dock > button:is(:hover, :focus-visible) > svg,
  .app-contact-toggle:is(:hover, :focus-visible, [aria-expanded="true"])
    .app-contact-orb {
    background: var(--red);
  }
  .app-dock > a:focus-visible,
  .app-dock > button:focus-visible,
  .app-contact-toggle:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -2px;
    border-radius: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .app-dock > a > svg,
  .app-dock > button > svg,
  .app-contact-orb {
    transition: none !important;
  }
}

/* T117: exact owner-requested Dhaka reference composition; travel labels and palette. */
@font-face {
  font-family: TravelsianDockNunito;
  src: url("assets/dock-reference-t117/Nunito.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
}
@font-face {
  font-family: TravelsianDockDuotone;
  src: url("assets/dock-reference-t117/fa-duotone-900.woff2") format("woff2");
  font-style: normal;
  font-weight: 900;
  font-display: block;
}
.dock-glyph {
  position: relative;
  font-family: TravelsianDockDuotone !important;
  font-style: normal;
  font-weight: 900;
  letter-spacing: normal;
  line-height: 1;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  --dock-primary: #fff;
  --dock-secondary: #b9e3ef;
  --dock-secondary-opacity: 0.62;
}
.dock-glyph:before {
  position: absolute;
  color: var(--dock-primary);
  opacity: 1;
}
.dock-glyph:after {
  color: var(--dock-secondary);
  opacity: var(--dock-secondary-opacity);
}
.dock-house:before {
  content: "\f015";
}
.dock-house:after {
  content: "\f015\f015";
}
.dock-book:before {
  content: "\f518";
}
.dock-book:after {
  content: "\f518\f518";
}
.dock-heart:before {
  content: "\f004";
}
.dock-heart:after {
  content: "\f004\f004";
}
.dock-cart:before {
  content: "\f07a";
}
.dock-cart:after {
  content: "\f07a\f07a";
}
.dock-receipt:before {
  content: "\f543";
}
.dock-receipt:after {
  content: "\f543\f543";
}
.dock-plane:before {
  content: "\f072";
}
.dock-plane:after {
  content: "\f072\f072";
}
.dock-calendar:before {
  content: "\f274";
}
.dock-calendar:after {
  content: "\f274\f274";
}
.dock-phone:before {
  content: "\f095";
}
.dock-phone:after {
  content: "\f095\f095";
}
.dock-chat:before {
  content: "\f4ad";
}
.dock-chat:after {
  content: "\f4ad\f4ad";
}
@media (max-width: 1024px) {
  body {
    padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px));
  }
  .app-dock {
    --dock-paint: linear-gradient(
      100deg,
      #082f46 0%,
      #0b3f5d 30%,
      #226b88 52%,
      #0b3f5d 74%,
      #082f46 100%
    );
    --dock-tile: url("assets/dock-travel-t123/travel-line-art.svg");
    --dock-accent: linear-gradient(
      145deg,
      #d84a50 0%,
      var(--red) 55%,
      #94151c 100%
    );
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: stretch;
    position: fixed;
    inset: auto 10px 0;
    width: auto;
    max-width: none;
    margin: 0;
    z-index: 40;
    height: auto;
    min-height: 0;
    overflow: visible;
    background-color: var(--deep);
    background-image: var(--dock-tile), var(--dock-paint);
    background-size:
      240px 54px,
      auto;
    background-repeat: repeat, no-repeat;
    background-position:
      0 0,
      center;
    background-blend-mode: normal, normal;
    border-radius: 30px 30px 0 0;
    border: 1px solid #ffffff38;
    border-top-color: #ffffff57;
    padding: 0 6px env(safe-area-inset-bottom, 0px);
    box-shadow:
      0 14px 34px #082f4673,
      inset 0 1px 0 #ffffff1f;
    backdrop-filter: none;
  }
  .app-dock > a,
  .app-dock > button {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    min-height: 52px;
    height: auto;
    padding: 0;
    border-radius: 0;
    background: none;
    color: #ffffffd1;
    font-family: TravelsianDockNunito, system-ui, sans-serif;
    font-size: 10.5px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0.2px;
    text-decoration: none;
    transition:
      color 200ms,
      transform 150ms;
  }
  .app-dock > a > span,
  .app-dock > button > span {
    line-height: 1.2;
  }
  .app-dock > a > .dock-glyph,
  .app-dock > button > .dock-glyph {
    display: grid;
    place-items: center;
    width: 41.4px;
    height: 28px;
    border-radius: 14px;
    font-size: 17px;
    line-height: 1;
    transition:
      background 250ms,
      color 250ms,
      box-shadow 250ms,
      transform 250ms;
  }
  .app-dock [aria-current="page"] {
    background: transparent;
    color: #fff;
  }
  .app-dock [aria-current="page"]:before {
    content: none;
  }
  .app-dock [aria-current="page"] > .dock-glyph {
    --dock-primary: #fff;
    --dock-secondary: #ffc3c6;
    --dock-secondary-opacity: 0.6;
    background: linear-gradient(135deg, #d84a50, var(--red));
    box-shadow:
      0 6px 16px #b81d2459,
      inset 0 1px 0 #ffffff80;
    transform: translateY(-1px);
  }
  .app-dock > a:is(:hover, :focus-visible),
  .app-dock > button:is(:hover, :focus-visible) {
    background: transparent;
    color: #fff;
  }
  .app-dock > a:active,
  .app-dock > button:active {
    transform: scale(0.94);
  }
  .app-dock > a:focus-visible,
  .app-dock > button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -3px;
    border-radius: 0;
  }
  .app-dock > .app-dock-primary {
    height: 52px;
    justify-content: flex-end;
    padding-bottom: 4.7px;
  }
  .app-dock > .app-dock-primary > .dock-glyph,
  .app-dock > .app-dock-primary[aria-current="page"] > .dock-glyph {
    flex: none;
    width: 39px;
    height: 39px;
    border-radius: 50%;
    font-size: 17px;
    transform: none;
    margin-bottom: 5px;
    --dock-primary: #fff;
    --dock-secondary: #ffc3c6;
    --dock-secondary-opacity: 0.8;
    background-color: var(--red);
    background-image: var(--dock-tile), var(--dock-accent);
    background-size:
      240px 54px,
      auto;
    background-position: center, center;
    box-shadow:
      0 10px 22px #082f4680,
      0 0 0 4px #fff,
      inset 0 2px 0 #ffffff59,
      inset 0 -3px 0 #58101573;
  }
  .app-dock > .app-dock-primary[aria-current="page"] > .dock-glyph {
    box-shadow:
      0 10px 22px #082f4699,
      0 0 0 4px #fff,
      0 0 0 7px #b81d24bf,
      inset 0 2px 0 #ffffff59,
      inset 0 -3px 0 #58101573;
  }
  .app-dock > .app-dock-primary:active > .dock-glyph {
    transform: scale(0.94);
  }
  .app-contact-slot {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 52px;
    height: auto;
  }
  .app-contact-toggle {
    position: relative;
    display: block;
    flex: none;
    width: 46px;
    height: 46px;
    min-height: 0;
    margin: 0 1px 0 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    background-color: var(--red);
    background-image: var(--dock-tile), var(--dock-accent);
    background-size:
      240px 54px,
      auto;
    background-position: center, center;
    box-shadow:
      0 10px 22px #082f4680,
      inset 0 2px 0 #ffffff59,
      inset 0 -3px 0 #58101573;
    transition:
      transform 150ms,
      box-shadow 250ms;
  }
  .app-contact-toggle:is(:hover, :focus-visible, [aria-expanded="true"]) {
    color: inherit;
    background-color: var(--red);
    background-image: var(--dock-tile), var(--dock-accent);
  }
  .app-contact-toggle:active {
    transform: scale(0.94);
  }
  .app-contact-toggle:focus {
    outline: none;
  }
  .app-contact-toggle:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
    border-radius: 50%;
  }
  .app-contact-toggle[aria-expanded="true"] {
    box-shadow:
      0 10px 22px #082f4699,
      0 0 0 3px #fff,
      inset 0 2px 0 #ffffff59,
      inset 0 -3px 0 #58101573;
  }
  .app-contact-orb,
  .app-contact-toggle:is(:hover, :focus-visible, [aria-expanded="true"])
    .app-contact-orb {
    position: absolute;
    inset: 0;
    display: block;
    width: 46px;
    height: 46px;
    background: transparent;
    border-radius: 50%;
    transform: none;
    transition: none;
  }
  .app-contact-orb > .dock-glyph {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 16.15px;
    line-height: 1;
    --dock-primary: #fff;
    --dock-secondary: #ffc3c6;
    --dock-secondary-opacity: 0.8;
  }
  .app-contact-slot .contact-phone,
  .app-contact-slot[data-chat-ready="true"] .contact-phone {
    animation: reference-contact-call 5s ease-in-out infinite;
  }
  .app-contact-slot .contact-chat,
  .app-contact-slot[data-chat-ready="true"] .contact-chat {
    animation: reference-contact-chat 5s ease-in-out infinite;
  }
  .app-contact-menu {
    position: absolute;
    right: -6px;
    bottom: calc(100% + 4px);
    z-index: 41;
    display: grid;
    gap: 6px;
    width: 214px;
    min-width: 0;
    max-width: calc(100vw - 20px);
    padding: 8px;
    border-radius: 20px;
    background: #fff;
    box-shadow:
      0 18px 40px #082f4659,
      0 0 0 1px #082f4614;
    transform-origin: calc(100% - 30px) calc(100% + 14px);
    animation: reference-contact-in 180ms ease-out;
  }
  .app-contact-menu:after {
    content: "";
    position: absolute;
    right: 23px;
    bottom: -7px;
    width: 14px;
    height: 14px;
    background: #fff;
    transform: rotate(45deg);
    border-radius: 0 0 4px 0;
    box-shadow: 3px 3px 6px #082f461f;
  }
  .app-contact-menu > a,
  .app-contact-menu > button {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 9px 10px 9px 9px;
    border: 0;
    border-radius: 14px;
    background: #edf6fa;
    color: var(--deep);
    text-align: left;
    text-decoration: none;
    font-family: TravelsianDockNunito, system-ui, sans-serif;
    transition:
      background 200ms,
      transform 150ms;
  }
  .app-contact-menu > a:active,
  .app-contact-menu > button:active {
    transform: scale(0.98);
    background: #dfeff6;
  }
  .app-contact-menu > a:focus-visible,
  .app-contact-menu > button:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 2px;
  }
  .app-contact-menu .app-contact-row-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 33.12px;
    height: 33.12px;
    border-radius: 50%;
    font-size: 11.628px;
    background-color: var(--red);
    background-image: var(--dock-tile), var(--dock-accent);
    background-size:
      240px 54px,
      auto;
    background-position: center, center;
    box-shadow:
      inset 0 2px 0 #ffffff59,
      inset 0 -3px 0 #58101573;
    --dock-primary: #fff;
    --dock-secondary: #ffc3c6;
    --dock-secondary-opacity: 0.8;
  }
  .app-contact-menu strong {
    font:
      400 15px/1.2 TravelsianDockNunito,
      system-ui,
      sans-serif;
    color: var(--deep);
  }
  .app-contact-menu small {
    display: block;
    margin-top: 1px;
    font:
      400 12px/1.3 TravelsianDockNunito,
      system-ui,
      sans-serif;
    color: #536b79;
  }
  .app-contact-menu > button:disabled {
    opacity: 0.55;
    cursor: default;
    transform: none;
  }
}
@keyframes reference-contact-call {
  0%,
  40%,
  100% {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
  50%,
  90% {
    opacity: 0;
    transform: scale(0.55) rotate(-20deg);
  }
}
@keyframes reference-contact-chat {
  0%,
  40%,
  100% {
    opacity: 0;
    transform: scale(0.55);
  }
  50%,
  90% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes reference-contact-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 359px) {
  .app-dock > a,
  .app-dock > button {
    font-size: 10px;
    letter-spacing: 0;
  }
  .app-dock > a > .dock-glyph,
  .app-dock > button > .dock-glyph {
    width: 36px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .app-dock > a,
  .app-dock > button,
  .app-contact-toggle,
  .app-contact-menu,
  .app-contact-orb > .dock-glyph {
    transition: none !important;
    animation: none !important;
  }
  .app-contact-orb > .contact-phone {
    opacity: 1;
  }
  .app-contact-orb > .contact-chat {
    opacity: 0;
  }
}

/* T119: preserve each glyph's15% reduction when its slot changes. */
@media (max-width: 1024px) {
  .app-dock > [data-app-route="shop"] > .dock-glyph {
    font-size: 13.02795px;
  }
}

/* T121/T122: initial10%,then another20% smaller (.9 * .8 = .72). */
@media (max-width: 1024px) {
  .app-dock [aria-current="page"] > .dock-glyph,
  .app-dock > .app-dock-primary > .dock-glyph,
  .app-contact-toggle {
    scale: 0.72;
  }
  .app-contact-toggle:before {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
  }
}

/* T127: plane nose points toward the upper right,matching owner reference. */
.app-dock-primary > .dock-plane:before,
.app-dock-primary > .dock-plane:after {
  transform: rotate(-45deg);
  transform-origin: center;
}

@media (max-width: 1024px) {
  .app-contact-menu > a > span,
  .app-contact-menu > button > span {
    min-width: 0;
  }
}

/* T131/T132/T143: normal and sticky app rows share60px height. */
.app-service-nav {
  display: none;
}
@media (max-width: 1024px) {
  html {
    scroll-padding-top: calc(max(60px, var(--app-sticky-height, 60px)) + 16px);
  }
  .app-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 60;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px 44px;
    grid-template-rows: 60px;
    column-gap: 6px;
    row-gap: 0;
    align-items: center;
    height: 60px;
    min-height: 60px;
    padding: 0 12px 0 0;
    background: #fff;
    box-shadow: none;
    transition:
      background-color 200ms,
      box-shadow 200ms;
  }
  .app-header .app-brand {
    grid-column: 1;
    grid-row: 1;
    width: 220px;
    height: 60px;
    min-height: 60px;
    margin: 0;
  }
  .app-header .app-brand:before {
    opacity: 1;
  }
  .app-header > [data-app-panel="account"] {
    grid-column: 2;
    grid-row: 1;
  }
  .app-header > [data-app-panel="menu"] {
    grid-column: 3;
    grid-row: 1;
  }
  .app-header > button {
    justify-self: center;
  }
  body[data-app-page="home"] > main,
  body[data-app-page="shop"] > main {
    padding-top: 60px;
  }
  .app-header.is-scrolled {
    grid-template-columns: 64px minmax(0, 1fr) 32px 32px;
    grid-template-rows: 60px;
    height: 60px;
    min-height: 60px;
    padding: 0 6px 0 0;
    column-gap: 2px;
    background: #fff;
    box-shadow: 0 4px 20px #082f4614;
  }
  .app-header.is-scrolled .app-brand {
    width: 64px;
    height: 60px;
    min-height: 60px;
    padding: 0 25px 0 9px;
    gap: 0;
    justify-content: flex-start;
  }
  .app-header.is-scrolled .app-brand:before {
    display: block;
    opacity: 1;
  }
  .app-header.is-scrolled .app-brand .logo-lockup {
    display: none;
  }
  .app-header.is-scrolled > [data-app-panel="account"] {
    grid-column: 3;
  }
  .app-header.is-scrolled > [data-app-panel="menu"] {
    grid-column: 4;
  }
  .app-header.is-scrolled > button {
    display: grid;
    width: 32px;
    height: 44px;
    border-radius: 10px;
    color: var(--navy);
  }
  .app-header.is-scrolled > button svg {
    width: 20px;
    height: 20px;
  }
  .app-header.is-scrolled > button:is(:hover, :focus-visible) {
    background: var(--red);
    color: #fff;
  }
  .app-header.is-scrolled .app-brand .logo-globe {
    display: block;
  }
  .app-header.is-scrolled .app-service-nav {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    min-width: 0;
    height: 60px;
    margin: 0;
    padding: 0;
    visibility: visible;
    pointer-events: auto;
  }
  .app-service-nav > .header-service {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.4px;
    flex: 0 1 16%;
    max-width: 40px;
    min-width: 0;
    min-height: 44px;
    height: 60px;
    padding: 4px 1.6px;
    border-radius: 0;
    color: var(--navy);
    font: 500 10.12px/1.2 var(--body);
    white-space: nowrap;
  }
  .app-service-nav .header-icon {
    position: relative;
    display: block;
    width: 22.08px;
    height: 20.24px;
  }
  .app-service-nav .header-icon img {
    position: absolute;
    inset: 0;
    display: block;
    width: 22.08px;
    height: 20.24px;
    object-fit: contain;
  }
  .app-service-nav .header-icon-light {
    display: none !important;
  }
  .app-service-nav > .header-service:after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 3px;
    width: 20px;
    height: 2px;
    background: var(--red);
    transform: translateX(-50%) scaleX(0);
    transition: transform 180ms;
  }
  .app-service-nav
    > .header-service:is(.is-active, [aria-current="page"]):after {
    transform: translateX(-50%) scaleX(1);
  }
  .app-service-nav > .header-service:is(:hover, :focus-visible) {
    color: var(--red);
  }
}
@media (max-width: 360px) {
  .app-header:not(.is-scrolled) {
    padding-right: 6px;
    column-gap: 2px;
  }
  .app-header:not(.is-scrolled) .app-brand {
    width: 202px;
  }
  /* T136: use all central space on narrow phones instead of bunching labels. */
  .app-header.is-scrolled .app-service-nav > .header-service {
    flex: 1 1 0;
    max-width: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .app-header,
  .app-service-nav > .header-service:after {
    transition: none;
  }
}

/* T139: the same measured normal iPad shell;sticky adds only services. */
@media (min-width: 768px) and (max-width: 1024px) {
  .app-header,
  .app-header.is-scrolled {
    grid-template-columns: 220px minmax(0, 1fr) 44px 44px;
    grid-template-rows: 60px;
    height: 60px;
    min-height: 60px;
    column-gap: 6px;
    padding: 0 12px 0 0;
    box-shadow: none;
  }
  .app-header .app-brand,
  .app-header.is-scrolled .app-brand {
    width: 220px;
    height: 60px;
    min-height: 60px;
    padding: 0 34px 0 18px;
    gap: 6px;
    color: #fff;
    justify-content: flex-start;
  }
  .app-header .app-brand .logo-globe,
  .app-header.is-scrolled .app-brand .logo-globe {
    display: none;
  }
  .app-header .app-brand .logo-lockup,
  .app-header.is-scrolled .app-brand .logo-lockup {
    display: block;
    width: 164px;
    height: 45px;
  }
  .app-header > [data-app-panel="account"] {
    grid-column: 3;
  }
  .app-header > [data-app-panel="menu"] {
    grid-column: 4;
  }
  .app-header > button,
  .app-header.is-scrolled > button {
    display: grid;
    width: 44px;
    height: 44px;
    padding: 1px 6px;
    border-radius: 12px;
    background: transparent;
    color: var(--navy);
  }
  .app-header > button svg,
  .app-header.is-scrolled > button svg {
    display: block;
    width: 24px;
    height: 24px;
  }
  .app-header > button:is(:hover, :focus-visible),
  .app-header.is-scrolled > button:is(:hover, :focus-visible) {
    background: var(--red);
    color: #fff;
  }
  .app-header.is-scrolled .app-service-nav {
    height: 60px;
  }
  .app-header.is-scrolled .app-service-nav > .header-service {
    flex: 1 1 0;
    max-width: 72px;
    height: 60px;
    min-height: 60px;
    padding: 4px;
    gap: 3px;
    font-size: 11.9px;
  }
  .app-header.is-scrolled .header-icon,
  .app-header.is-scrolled .header-icon img {
    width: 25.5px;
    height: 22.1px;
  }
  .app-header.is-scrolled .app-service-nav > .header-service:after {
    width: 40px;
    bottom: 3px;
  }
}

/* T141: desktop-style transparent Home overlay on iPad;blue brand stays visible. */
@media (min-width: 768px) and (max-width: 1024px) {
  body[data-app-page="home"] .app-header:not(.is-scrolled) {
    background: transparent;
  }
  body[data-app-page="home"] .app-header:not(.is-scrolled) > button {
    color: #fff;
  }
  .hero-shell > .hero {
    top: -60px;
    height: calc(var(--hero-photo-height) + 60px);
  }
  .hero-shell > .hero:after {
    background: linear-gradient(
      180deg,
      #082f468c 0%,
      #082f462e 112px,
      #082f460d 65%
    );
  }
}

/* T154: phone menu is 60px in both states so the full logo has room. */
@media (max-width: 767px) {
  .app-header,
  .app-header.is-scrolled {
    grid-template-rows: 60px;
    height: 60px;
    min-height: 60px;
  }
  .app-header .app-brand,
  .app-header.is-scrolled .app-brand {
    height: 60px;
    min-height: 60px;
  }
  .app-header.is-scrolled .app-service-nav {
    height: 60px;
  }
  .app-service-nav > .header-service {
    height: 60px;
  }
  body[data-app-page="home"] > main,
  body[data-app-page="shop"] > main {
    padding-top: 60px;
  }
  html {
    scroll-padding-top: calc(var(--app-sticky-height, 60px) + 16px);
  }
}

/* T145: globe keeps its normal position while the brand panel contracts. */
@media (max-width: 767px) {
  .app-header .app-brand .logo-globe {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
  }
  .app-header.is-scrolled .app-brand {
    padding-left: 18px;
  }
}
@media (max-width: 360px) {
  .app-header.is-scrolled .app-brand {
    padding-left: 12px;
  }
}

/* T146: more blue breathing room to the right;reuse the original curve mask. */
@media (max-width: 767px) {
  .app-header.is-scrolled {
    grid-template-columns: 76px minmax(0, 1fr) 32px 32px;
  }
  .app-header.is-scrolled .app-brand {
    width: 76px;
    padding-right: 28px;
  }
}

/* T147: extend the decorative lower sweep,not the brand/grid or service positions.
   The tip ends8px before Flight text under the existing16%/40px service sizing. */
@media (min-width: 361px) and (max-width: 767px) {
  .app-header.is-scrolled .app-brand:before {
    right: auto;
    width: max(calc(18vw + 29.2px), calc(50vw - 99.44px));
  }
}

/* T148: reuse the normal menu's curve at the same scale,only crop its flat left. */
@media (max-width: 767px) {
  .app-header.is-scrolled .app-brand:before {
    mask-image: url("assets/header-brand-curve.svg");
    mask-size: 220px 60px;
    mask-position: right top;
  }
}
@media (max-width: 360px) {
  .app-header.is-scrolled .app-brand:before {
    mask-size: 202px 60px;
  }
}

/* T149: give the narrow-phone globe clearance from the curve's shoulder. */
@media (max-width: 360px) {
  .app-header.is-scrolled {
    grid-template-columns: 84px minmax(0, 1fr) 32px 32px;
  }
  .app-header.is-scrolled .app-brand {
    width: 84px;
    padding-right: 42px;
  }
}