* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  font-family: sans-serif;
  font-weight: 400;
  line-height: 1;
  color: #333;
}

.container {
  max-width: 120rem;
  padding: 0 4.8rem;
  margin: 0 auto;
}

.grid {
  display: grid;
  column-gap: 3.2rem;
  row-gap: 2.4rem;
}

.grid--2--cols {
  grid-template-columns: repeat(2, 1fr);
}

.grid--3--cols {
  grid-template-columns: repeat(3, 1fr);
}
.grid--4--cols {
  grid-template-columns: repeat(4, 1fr);
}

.red-star {
  color: red;
  margin-left: 2px;
}

.text-center {
  text-align: center;
}

.city-color {
  color: var(--primary);
}

.subheading {
  display: block;
  font-size: 1.6rem;
  line-height: 1.5;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--primary);
  letter-spacing: 0.75px;
  margin-bottom: 0.5rem;
}

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

.header {
  height: 76px;
  width: 100%;

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

  padding: 0 40px;

  background: var(--bg-white);

  border-bottom: 1px solid #e8eef5;

  position: sticky;
  top: 0;
  z-index: 1000;
}

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

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

  text-decoration: none;
  flex-shrink: 0;
}

.logo {
  display: block;

  width: 20rem;
  height: 5rem;

  object-fit: contain;
}

/* ================================
   MAIN NAV
================================ */

.main-nav {
  display: flex;
  align-items: center;

  margin-left: auto;
}

.main-nav-list {
  display: flex;
  align-items: center;
  gap: 6px;

  margin: 0;
  padding: 0;

  list-style: none;
}

/* ================================
   NAV LINKS
================================ */

.main-nav-link {
  display: flex;
  align-items: center;
  gap: 6px;

  padding: 10px 13px;

  color: var(--text-main);

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

  text-decoration: none;

  border-radius: 8px;

  transition:
    color 0.2s ease,
    background 0.2s ease;
}

.main-nav-link:hover {
  color: var(--primary);
  background: var(--primary-thin);
}

/* ================================
   DROPDOWN
================================ */

.dropdown {
  position: relative;
}

.dropdown-toggle {
  cursor: pointer;
}

.dropdown-arrow {
  width: 16px;
  height: 16px;

  transition: transform 0.2s ease;
}

.dropdown:hover .dropdown-arrow {
  transform: rotate(180deg);
}

/* ================================
   DROPDOWN MENU
================================ */

.dropdown-menu {
  position: absolute;

  top: calc(100% + 10px);
  left: 0;

  min-width: 245px;

  margin: 0;
  padding: 8px;

  list-style: none;

  background: var(--bg-white);

  border: 1px solid #e2eaf3;
  border-radius: 12px;

  box-shadow: var(--shadow-md);

  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);

  transition:
    opacity 0.2s ease,
    visibility 0.2s ease,
    transform 0.2s ease;
}

.dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-menu li {
  width: 100%;
}

.dropdown-menu a {
  display: block;

  padding: 11px 13px;

  color: var(--text-main);

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

  text-decoration: none;

  border-radius: 8px;

  transition:
    color 0.2s ease,
    background 0.2s ease;
}

.dropdown-menu a:hover {
  color: var(--primary);
  background: var(--primary-thin);
}

/* ================================
   CALL CTA
================================ */

.main-nav-list > li:last-child {
  margin-left: 10px;
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: 10px;

  min-height: 50px;

  padding: 7px 15px 7px 11px;

  background: var(--primary);
  color: var(--text-white) !important;

  border-radius: 10px;

  box-shadow: 0 5px 14px var(--primary-shadow);

  transition:
    background 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.nav-cta:hover {
  background: var(--primary-hover);

  transform: translateY(-1px);

  box-shadow: 0 8px 18px var(--primary-shadow);
}

.nav-cta-logo {
  flex: 0 0 auto;

  width: 21px;
  height: 21px;
}

.nav-cta-box {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-ctn-number {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}

/* ================================
   MOBILE NAV BUTTON
================================ */

.btn-mobile-nav {
  display: none;

  width: 42px;
  height: 42px;

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

  background: transparent;

  border: none;
  border-radius: 8px;

  color: var(--text-main);

  cursor: pointer;
}

.icon-mobile-nav {
  width: 27px;
  height: 27px;
}

/* 默认显示 menu icon */
.icon-mobile-nav[name="close-outline"] {
  display: none;
}

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

.footer {
  background: #172235;
  color: #ffffff;
}

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

.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 50px;

  padding-top: 70px;
  padding-bottom: 65px;

  align-items: start;
}

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

.footer-col {
  min-width: 0;
  margin: 0;
  padding: 0;
}

/* 所有列标题统一基线 */
.footer-heading {
  margin: 0 0 22px;
  padding: 0;

  color: #ffffff;

  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

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

.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;

  margin: 0;
  padding: 0;

  list-style: none;
}

.footer-nav li {
  margin: 0;
  padding: 0;

  color: #aeb9c9;

  font-size: 1.4rem;
  line-height: 1.6;
}

.footer-nav a {
  display: inline-block;

  margin: 0;
  padding: 0;

  color: #aeb9c9;

  font-size: 1.4rem;
  line-height: 1.55;

  text-decoration: none;

  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

.footer-nav a:hover {
  color: #ffffff;
  transform: translateX(3px);
}

/* ================================
   LOCAL SERVICE
================================ */

.footer-local .footer-nav li:first-child {
  color: #ffffff;

  font-size: 1.4rem;
  font-weight: 600;
}

/* ================================
   FUTURE NAP
================================ */

.footer-nap {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;

  margin: 20px 0 0;
  padding: 0;
}

.footer-nap-item {
  margin: 0;
  padding: 0;

  color: #8f9daf;

  font-size: 1.4rem;
  line-height: 1.55;
}

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

.footer-map-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  margin: 14px 0 0;
  padding: 0;

  color: #ffffff;

  font-size: 1.4rem;
  font-weight: 600;

  text-decoration: none;

  transition: color 0.2s ease;
}

.footer-map-link:hover {
  color: var(--primary);
}

.footer-map-link ion-icon {
  font-size: 1.6rem;
}

/* ================================
   BUSINESS INFORMATION
================================ */

.footer-business-info {
  display: flex;
  flex-direction: column;

  margin: 0 0 20px;
  padding: 0;
}

/* ================================
   BUSINESS INFORMATION ITEM
================================ */

.footer-business-item {
  margin: 0 0 1.2rem;
  padding: 0;

  color: var(--bg-white);
  font-size: 1.4rem;
  line-height: 1.55;
}

/* Business Name */

.footer-business-item strong {
  color: var(--bg-white);
  font-size: 1.4rem;
  font-weight: 600;
}

/* ================================
   GOOGLE BUSINESS PROFILE
================================ */

.footer-gbp-link {
  display: inline-flex;
  align-items: center;

  width: fit-content;

  margin: 0 0 1.2rem;
  padding: 0;

  color: #aeb9c9;
  font-size: 1.4rem;
  font-weight: 600;
  gap: 6px;

  text-decoration: none;

  transition: color 0.2s ease;
}

.footer-gbp-link:hover {
  color: var(--bg-white);
}

.footer-gbp-link ion-icon {
  font-size: 1.8rem;
}

.footer-cta-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.6rem;
}
/* ================================
   PHONE
================================ */

.footer-phone {
  display: inline-block;

  padding: 0;

  color: var(--bg-white);

  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.4;

  text-decoration: none;

  transition: color 0.2s ease;
}

.footer-phone:hover {
  color: var(--primary);
}

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

.footer-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;

  min-height: 44px;

  margin: 0;
  padding: 1.2rem 2.4rem;

  background: var(--primary);
  color: var(--bg-white);

  border-radius: 9px;

  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;

  text-decoration: none;

  box-shadow: 0 5px 14px rgba(59, 130, 246, 0.18);

  transition:
    background 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.footer-cta:hover {
  background: var(--primary-hover);

  transform: translateY(-1px);

  box-shadow: 0 8px 18px rgba(59, 130, 246, 0.25);
}

.footer-cta ion-icon {
  font-size: 1.8rem;
}

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

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom-inner {
  min-height: 70px;

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

  gap: 20px;
}

.copyright,
.footer-location {
  margin: 0;
  padding: 0;

  color: #7f8b9c;

  font-size: 12px;
  line-height: 1.5;
}

.footer-location {
  text-align: right;
}