@import url('utility-pages.css');
@import url('social-icons.css');
@import url('icon-alignment.css');
/* Visual corrections measured from ui设计.pen. Kept separate so generated assets
   and Pen-spec styling remain easy to replace without touching app behavior. */
.hero { color: #10224a; }
.hero-image { background-image: url('assets/images/hero-china-color-v2.png'); }
.hero-overlay { background: linear-gradient(90deg, rgba(255,255,255,.28), rgba(255,255,255,.06) 44%, transparent 74%); }
.hero .eyebrow { color: #0756d8; background: rgba(255,255,255,.95); border: 1px solid rgba(30,95,214,.14); box-shadow: 0 4px 14px rgba(21,42,78,.12); }
.hero h1 em { background: linear-gradient(102deg,#e24d6b 0%,#f1a82c 25%,#28a66a 50%,#38a8de 72%,#8458b8 100%); background-clip: text; }
.hero-content > p:not(.eyebrow) { color: #26395d; }
.hero .outline { border-color: #0756d8; box-shadow: 0 6px 16px rgba(21,42,78,.11); }
.color-ribbons { display: none; }

footer { overflow: hidden; background: #0649b8; }
.footer-ribbons { height: 80px; background: url('assets/images/footer-wave.svg') center / 100% 100% no-repeat; }
.footer-ribbons, .footer-inner, .copyright { position: relative; z-index: 1; }
.footer-inner { grid-template-columns: 1.45fr .72fr .9fr 1.22fr 1.22fr; gap: 34px; min-height: 238px; padding-top: 36px; padding-bottom: 28px; }
.footer-about { max-width: 280px; }
.footer-about p { margin-top: 17px; max-width: 255px; }
.footer-inner h3 { margin-bottom: 14px; }
.footer-inner > div:not(.footer-about) a, .footer-inner > div:not(.footer-about) p { margin: 5px 0; }
.newsletter { position: relative; z-index: 2; }
.copyright { min-height: 36px; align-items: center; padding-top: 10px; padding-bottom: 10px; }

/* Brand and footer refinements to match the supplied composition more closely. */
.site-header { height: 64px; }
.site-header .brand { gap: 9px; }
.header-brand { display: flex; align-items: center; width: 255px; height: 54px; }
.header-brand .official-logo-mark { display: block; width: 55px; height: 54px; object-fit: contain; object-position: center; margin-right: 6px; }
.header-brand strong { display: block; color: #084aae; font: 800 18px/1 Outfit,"DM Sans",sans-serif; letter-spacing: -.15px; }
.header-brand small { display: block; color: #3970bd; font: 700 8px/1.2 Outfit,sans-serif; letter-spacing: 1.9px; margin-top: 4px; }
.brand-mark { width: 48px; height: 48px; border: 0; background: radial-gradient(circle at 46% 31%, #f9fdff 0 28%, #dceeff 29% 30%, transparent 31%); overflow: visible; }
.brand-mark::before { content: ""; position: absolute; z-index: 0; left: 7px; top: 3px; width: 31px; height: 31px; border: 1.8px solid #1770cf; border-radius: 50%; background: linear-gradient(90deg, transparent 46%, #3e8dd9 47% 52%, transparent 53%), linear-gradient(transparent 46%, #3e8dd9 47% 52%, transparent 53%); opacity: .95; }
.brand-mark::after { content: "✈"; z-index: 3; right: -2px; top: -4px; color: #0862d0; font: 700 13px/1 Arial, sans-serif; transform: rotate(-24deg); }
.brand-mark i { z-index: 2; left: 2px; bottom: 5px; width: 38px; height: 13px; border-width: 4px; }
.brand-mark i:nth-child(1) { left: 10px; bottom: 0; }
.brand-mark i:nth-child(2) { left: 4px; bottom: 7px; }
.brand-mark i:nth-child(3) { left: 2px; bottom: 14px; }
.brand-mark i:nth-child(4) { left: 10px; bottom: 22px; }
.site-header .brand strong { font-size: 18px; letter-spacing: -.15px; }
.site-header .brand small { letter-spacing: 1.9px; }
.book-now { min-width: 105px; padding: 10px 16px; }

.gallery { position: relative; z-index: 2; padding-bottom: 0; }
footer { z-index: 1; margin-top: -54px; }
.footer-ribbons { height: 112px; background-position: center top; background-size: 100% 112px; }
/* Remove the decorative rainbow globe on the right; the footer keeps only the water-wave edge. */
footer::after { display: none; }
.footer-inner { min-height: 218px; padding-top: 29px; padding-bottom: 23px; }
.footer-brand .brand-mark { transform: scale(.92); transform-origin: left center; margin-right: -2px; }
.footer-brand .brand-mark { display: none; }
.footer-brand::before { content: ""; display: block; width: 52px; height: 52px; flex: 0 0 52px; background: url('assets/images/hues-official-mark-v2.png') center / contain no-repeat; mix-blend-mode: multiply; }
.footer-about p { margin-top: 12px; }
.copyright { min-height: 34px; }

@media (max-width:680px) {
  .footer-ribbons { height: 60px; }
  footer::after { display: none; }
  .footer-inner { min-height: auto; padding-top: 26px; padding-bottom: 26px; }
}