/* ============================================================
   SimplyGo Components
   ============================================================ */

/* ============================================================
   1. NAVIGATION
   ============================================================ */

.nav {
  width: 100%;
  background: var(--surface-primary);
  border-bottom: 1px solid var(--border-brand-light-blue);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  padding-block: var(--space-16);
  padding-inline: var(--layout-content-margin);
  z-index: 100;
}

.nav__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.nav__logo img {
  height: 34px;
  width: auto;
  display: block;
}

.nav__menu {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  margin-left: 0;
  flex: 0 1 auto;
}

.nav__item {
  font-size: 15px;
  line-height: 22px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--transition-fast);
  text-decoration: none;
  padding-inline: var(--space-8);
  flex-shrink: 0;
}

.nav__item:hover,
.nav__item--active {
  color: var(--text-brand-blue);
}

/* A- / A+ / Search icon controls */
.nav__controls {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  margin-left: var(--space-8);
  flex-shrink: 0;
}

.nav__icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--text-primary);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  transition: color var(--transition-fast);
  flex-shrink: 0;
}

.nav__icon-btn:hover { color: var(--text-brand-blue); }
.nav__icon-btn svg   { width: 24px; height: 24px; }

#fontDecrease svg,
#fontIncrease svg {
  transform: scale(1.24);
}

/* Mobile hamburger */
.nav__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: var(--space-8);
  background: none;
  border: none;
}

.nav__hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: transform var(--transition-normal), opacity var(--transition-normal);
}

/* Mobile nav drawer */
.nav__mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--surface-primary);
  z-index: 200;
  flex-direction: column;
  padding: var(--space-24);
  overflow-y: auto;
}

.nav__mobile-menu.is-open { display: flex; }

.nav__mobile-close {
  align-self: flex-end;
  margin-bottom: var(--space-32);
  font-size: 28px;
  line-height: 1;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-primary);
  padding: var(--space-8);
}

.nav__mobile-item {
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-lh);
  font-weight: 700;
  color: var(--text-primary);
  padding: var(--space-16) 0;
  border-bottom: 1px solid var(--border-divider);
  cursor: pointer;
  text-decoration: none;
}

.nav__mobile-item--active { color: var(--text-brand-blue); }

@media (min-width: 1280px) and (max-width: 1511px) {
  .nav__menu    { gap: var(--space-8); }
  .nav__item    { padding-inline: var(--space-4); }
}

/* Tablet and below: hamburger */
@media (max-width: 1279px) {
  .nav__menu      { display: none; }
  .nav__hamburger { display: flex; }
}

@media (max-width: 767px) {
  .nav            { padding-inline: var(--layout-content-margin); }
  .nav__logo img  { height: 26px; }
}


/* ============================================================
   2. GRADIENT BANNER
   ============================================================ */

.banner-gradient {
  width: 100%;
  background: var(--gradient-banner);
  padding: var(--layout-banner-tb) var(--layout-content-margin);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.banner-gradient__title {
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-lh);
  font-weight: 700;
  color: var(--text-invert);
  text-align: center;
  width: 100%;
}

.banner-gradient__subtitle {
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-lh);
  color: var(--text-invert);
  text-align: center;
  margin-top: var(--space-16);
  max-width: 800px;
}

@media (max-width: 1279px) {
  .banner-gradient { padding: var(--layout-banner-tb) var(--layout-content-margin); }
}

@media (max-width: 767px) {
  .banner-gradient { padding: var(--space-40) var(--layout-content-margin); }
  .banner-gradient__title { font-size: 28px; line-height: 36px; }
}


/* ============================================================
   3. BUTTONS
   ============================================================ */

/* Filled CTA (primary) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: var(--space-16) var(--space-24);
  font-family: var(--font-family);
  font-size: var(--text-cta-size);
  line-height: var(--text-cta-lh);
  font-weight: 700;
  border-radius: var(--radius-primary-btn);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
}

.btn--filled {
  background: var(--surface-brand-blue);
  color: var(--text-invert);
  border-color: var(--color-brand-blue);
}

.btn--filled:hover {
  background: transparent;
  color: var(--color-brand-dark-blue);
  border-color: var(--color-brand-dark-blue);
}

.btn--outline {
  background: transparent;
  color: var(--color-brand-blue);
  border-color: var(--color-brand-blue);
}

.btn--outline:hover {
  background: var(--color-brand-blue);
  color: var(--text-invert);
  border-color: var(--color-brand-blue);
}

.btn--text {
  background: transparent;
  border-color: transparent;
  color: var(--color-brand-dark-blue);
  padding-left: 0;
  padding-right: 0;
}

.btn--text:hover { color: var(--color-brand-blue); }

/* Icon-only round button */
.btn--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-max);
  background: var(--surface-primary);
  border: none;
  cursor: pointer;
  transition: background var(--transition-fast);
  flex-shrink: 0;
}

.btn--icon:hover { background: var(--color-brand-blue-50); }

.btn--icon svg { width: 32px; height: 32px; }

@media (max-width: 767px) {
  .btn { padding: var(--space-12) var(--space-16); }
  .btn--icon { width: 48px; height: 48px; }
  .btn--icon svg { width: 24px; height: 24px; }
}


/* ============================================================
   4. INFO CARD (light-blue container)
   ============================================================ */

.info-card {
  width: 100%;
  background: var(--surface-brand-blue-50);
  border-radius: var(--radius-card-large);
  padding: var(--card-py) var(--card-px);
  display: flex;
  gap: var(--space-32);
  align-items: center;
  overflow: hidden;
}

.info-card__content {
  flex: 1 0 0;
  min-width: 0;
}

.info-card__content p + p {
  margin-top: var(--space-8);
}

.info-card__aside {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  align-items: center;
  width: 200px;
}

.info-card__qr {
  width: 200px;
  height: 200px;
  border-radius: var(--radius-xsmall);
  object-fit: cover;
}

@media (max-width: 767px) {
  .info-card {
    flex-direction: column;
    padding: var(--space-32) var(--space-24);
  }
  .info-card__aside { width: 100%; align-items: center; }
  .info-card__qr    { width: 160px; height: 160px; }
}


/* ============================================================
   5. ACCORDION
   ============================================================ */

.accordion { width: 100%; }

.accordion__item {
  border-bottom: 1px solid var(--border-divider);
}

.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  padding: var(--space-20, 20px) 0;
  cursor: pointer;
  background: none;
  border: none;
  font-family: var(--font-family);
  text-align: left;
}

.accordion__trigger-content {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
}

.accordion__icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--text-brand-blue);
}

.accordion__title {
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-lh);
  font-weight: 700;
  color: var(--text-primary);
  transition: color var(--transition-fast);
}

.accordion__item--open .accordion__title {
  color: var(--text-brand-blue);
}

.accordion__toggle {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.accordion__toggle .icon-minus { display: none; }
.accordion__toggle .icon-plus  { display: block; }

.accordion__item--open .accordion__toggle .icon-minus { display: block; }
.accordion__item--open .accordion__toggle .icon-plus  { display: none; }

.accordion__body {
  display: none;
  padding: 0 calc(28px + var(--space-8)) var(--space-24) calc(28px + var(--space-8));
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  color: var(--text-secondary);
}

.accordion__item--open .accordion__body { display: block; }

@media (max-width: 767px) {
  .accordion__icon { width: 24px; height: 24px; }
  .accordion__toggle { width: 24px; height: 24px; }
  .accordion__title { font-size: var(--text-body-size); line-height: var(--text-body-lh); }
  .accordion__body { padding-left: calc(24px + var(--space-8)); padding-right: calc(24px + var(--space-8)); }
}


/* ============================================================
   6. ICON GRID ITEM (Other Features)
   ============================================================ */

.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  text-align: center;
}

.icon-item__img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  flex-shrink: 0;
}

.icon-item__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.icon-item__title {
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-lh);
  font-weight: 700;
  color: var(--text-primary);
}

.icon-item__desc {
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  color: var(--text-secondary);
}

@media (max-width: 767px) {
  .icon-item__img { width: 48px; height: 48px; }
  .icon-item__title { font-size: var(--text-body-size); line-height: var(--text-body-lh); }
}


/* ============================================================
   7. TOGGLE / PILL TABS
   ============================================================ */

.toggle-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
}

.toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) var(--space-24);
  border-radius: var(--radius-2xlarge);
  font-family: var(--font-family);
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-lh);
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: background var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
  text-decoration: none;
}

.toggle--default {
  background: var(--surface-brand-blue-50);
  color: var(--text-secondary);
}

.toggle--active {
  background: var(--surface-brand-blue);
  color: var(--text-invert);
}

.toggle:hover:not(.toggle--active) {
  background: var(--color-brand-light-blue);
}

@media (max-width: 767px) {
  .toggle-group { gap: var(--space-8); }
  .toggle { font-size: 14px; line-height: 22px; padding: var(--space-8) var(--space-12); }
}


/* ============================================================
   8. IMPORTANT NOTE BOX
   ============================================================ */

.note-box {
  width: 100%;
  background: var(--color-brand-amethyst-50);
  border: 1px solid var(--border-brand-amethyst);
  border-radius: var(--radius-others);
  padding: var(--space-32) var(--space-40);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.note-box__header {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.note-box__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--color-brand-amethyst);
}

.note-box__title {
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-lh);
  font-weight: 700;
  color: var(--text-primary);
}

.note-box__body {
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  color: var(--text-secondary);
}

@media (max-width: 767px) {
  .note-box { padding: var(--space-24) var(--space-24); }
  .note-box__title { font-size: var(--text-body-size); line-height: var(--text-body-lh); }
}


/* ============================================================
   9. STEP CARDS (horizontal row)
   ============================================================ */

.steps {
  display: flex;
  gap: var(--space-24);
  width: 100%;
}

.step-card {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  min-width: 0;
}

.step-card__image {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-card-small);
  overflow: hidden;
  background: var(--gradient-app-card);
  position: relative;
}

.cards-charms-tabs__media-card .cards-charms-tabs__media {
  border-radius: var(--radius-card-small);
}

.step-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.step-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.step-card__label {
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  font-weight: 700;
  color: var(--text-secondary);
}

.step-card__desc {
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  color: var(--text-secondary);
}

@media (max-width: 1024px) {
  .steps { flex-wrap: wrap; }
  .step-card { flex: 0 0 calc(50% - var(--space-12)); }
}

@media (max-width: 767px) {
  .step-card { flex: 0 0 100%; }
}


/* ============================================================
   10. CTA LIGHT BLUE BANNER
   ============================================================ */

.cta-banner {
  width: 100%;
  background: var(--surface-brand-light-blue);
  padding: var(--layout-banner-tb) var(--layout-content-margin);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  text-align: center;
}

.cta-banner__title {
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-lh);
  font-weight: 700;
  color: var(--text-primary);
  width: 100%;
}

.cta-banner__body {
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-lh);
  color: var(--text-secondary);
  width: 100%;
}

.cta-banner__link {
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-lh);
  font-weight: 700;
  text-decoration: underline;
  color: var(--text-primary);
  cursor: pointer;
}

.cta-banner__link:hover { color: var(--text-brand-blue); }

.cta-banner--full-bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

@media (max-width: 1279px) {
  .cta-banner { padding: var(--layout-banner-tb) var(--layout-content-margin); }
}

@media (max-width: 767px) {
  .cta-banner { padding: var(--space-40) var(--layout-content-margin); }
  .cta-banner__title { font-size: 24px; line-height: 32px; }
  .cta-banner__body { font-size: var(--text-body-size); line-height: var(--text-body-lh); }
  .cta-banner__link { font-size: var(--text-body-size); line-height: var(--text-body-lh); }
}


/* ============================================================
   11. FOOTER
   ============================================================ */

.footer {
  width: 100%;
  background: var(--surface-brand-blue-900);
  padding-block: var(--layout-section-tb);
  padding-inline: var(--layout-content-margin);
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}

.footer__top {
  display: grid;
  grid-template-columns: 160px 210px minmax(280px, 1fr) minmax(360px, 1.15fr);
  column-gap: clamp(var(--space-24), 2vw, var(--space-56));
  row-gap: var(--space-32);
  align-items: flex-start;
  width: 100%;
}

.footer__col-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  min-width: 0;
}

.footer__link {
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  font-weight: 700;
  color: var(--text-invert);
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

.footer__link:hover { opacity: 0.75; }

/* Column 3: contact + social */
.footer__col-contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  min-width: 0;
}

.footer__hotline {
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-lh);
  font-weight: 700;
  color: var(--text-invert);
}

.footer__hotline a {
  color: inherit;
  text-decoration: none;
}

.footer__hours {
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  color: var(--text-invert);
  font-style: italic;
  margin-top: var(--space-4);
}

.footer__social {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
}

.footer__social-label {
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-lh);
  font-weight: 700;
  color: var(--text-invert);
  white-space: nowrap;
}

.footer__social-icons {
  display: flex;
  gap: var(--space-12);
  align-items: center;
}

.footer__social-groups {
  display: flex;
  align-items: flex-start;
  gap: var(--space-32);
}

.footer__social-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.footer__social-brand {
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  color: rgba(255, 255, 255, 0.65);
  white-space: nowrap;
}

.footer__social-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.9);
  background: transparent;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: opacity var(--transition-fast);
  color: var(--text-invert);
  text-decoration: none;
}

.footer__social-icon:hover { opacity: 0.75; }
.footer__social-icon svg   { width: 20px; height: 20px; }

/* Column 4: app download */
.footer__col-download {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  min-width: 0;
}

.footer__download-title {
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-lh);
  font-weight: 700;
  color: var(--text-invert);
  white-space: nowrap;
}

.footer__app-buttons {
  display: flex;
  gap: var(--space-12);
  flex-wrap: wrap;
  align-items: flex-start;
}

.footer__col-download > div {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.footer__app-btn {
  display: block;
  width: 132px;
  text-decoration: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity var(--transition-fast);
}

.footer__app-btn:hover { opacity: 0.8; }

.footer__app-btn img {
  display: block;
  width: 100%;
  height: auto;
}

.footer__download-desc {
  font-size: var(--text-small-1-size);
  line-height: var(--text-small-1-lh);
  color: var(--text-invert);
  max-width: 324px;
  margin: 0;
}

/* Divider */
.footer__divider {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
  border: none;
}

/* Bottom row */
.footer__bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  flex-wrap: wrap;
  gap: var(--space-12);
}

.footer__copyright {
  font-size: var(--text-small-1-size);
  line-height: var(--text-small-1-lh);
  color: var(--text-invert);
}

.footer__legal {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  flex-wrap: wrap;
}

.footer__legal-link {
  font-size: var(--text-small-1-size);
  line-height: var(--text-small-1-lh);
  font-weight: 700;
  color: var(--text-invert);
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

.footer__legal-link:hover { opacity: 0.75; }

.footer__legal-sep {
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  color: var(--text-invert);
}

/* ---- Responsive ---- */
@media (max-width: 1279px) {
  .footer         { padding: var(--layout-section-tb) var(--layout-content-margin); }
  .footer__top {
    grid-template-columns: 160px 190px minmax(280px, 1fr) minmax(340px, 1.1fr);
    column-gap: var(--space-24);
  }
}

@media (max-width: 767px) {
  .footer         { padding: var(--space-40) var(--layout-content-margin); }
  .footer__top    { display: flex; flex-direction: column; gap: var(--space-32); }
  .footer__col-links {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-12) var(--space-32);
  }
  .footer__col-contact { width: 100%; }
  .footer__col-download { width: 100%; }
  .footer__download-title { white-space: normal; }
  .footer__social-groups { flex-wrap: wrap; gap: var(--space-24); }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .footer__legal  { flex-wrap: wrap; }
  .footer__hotline { font-size: var(--text-body-size); line-height: var(--text-body-lh); }
}


/* ============================================================
   12. ASK ADDY WIDGET
   ============================================================ */

.ask-addy {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.ask-addy__mascot {
  width: 40px;
  height: 38px;
}

.ask-addy__tab {
  background: var(--gradient-ask-addy);
  border-radius: 8px 0 0 8px;
  padding: var(--space-24) var(--space-8);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.ask-addy__label {
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-lh);
  font-weight: 700;
  color: var(--text-invert);
  white-space: nowrap;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

@media (max-width: 767px) {
  .ask-addy { display: none; }
}


/* ============================================================
   13. SECTION LAYOUT HELPERS
   ============================================================ */

/* Two-column: text + image (60/40 or 50/50) */
.two-col {
  display: flex;
  gap: var(--space-32);
  align-items: flex-start;
  width: 100%;
}

.two-col__main { flex: 1 0 0; min-width: 0; }
.two-col__aside { flex-shrink: 0; }

.two-col--equal .two-col__main,
.two-col--equal .two-col__aside {
  flex: 1 0 0;
  min-width: 0;
}

@media (max-width: 1024px) {
  .two-col { flex-wrap: wrap; gap: var(--space-24); }
  .two-col__aside { width: 100%; }
}

@media (max-width: 767px) {
  .two-col { gap: var(--space-16); }
}

/* Image with gradient overlay */
.img-gradient {
  border-radius: var(--radius-image);
  overflow: hidden;
  position: relative;
  background: var(--gradient-app-card);
}

.img-gradient img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.img-gradient::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 65%;
  background: linear-gradient(167deg, rgba(163,90,162,0) 24%, rgba(71,129,194,0.8) 74%);
  pointer-events: none;
}

/* Page section header */
.section-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  width: 100%;
}

.section-header + * { margin-top: var(--space-32); }

/* Rich text / body copy area */
.rich-text p + p  { margin-top: var(--space-16); }
.rich-text ul,
.rich-text ol     { padding-left: var(--space-24); list-style: initial; margin-top: var(--space-16); }
.rich-text li + li { margin-top: var(--space-8); }
.rich-text a      { color: var(--text-brand-dark-blue); font-weight: 700; text-decoration: underline; }

@media (max-width: 767px) {
  .section-header + * { margin-top: var(--space-24); }
  .rich-text ul,
  .rich-text ol { padding-left: var(--space-16); }
}

/* Divider (section separator) */
.section-divider {
  width: 100%;
  height: 1px;
  background: var(--border-divider);
  margin: 0 auto;
}


/* ============================================================
   14. CONTENT INTRO — Layout B (with bold highlight)
       Layout C (plain, no highlight)
   Node B: 10093-72476 · Node C: 10158-5992
   White bg · 10-col padding · center-aligned
   B: first child uses .content-intro__highlight (body-lg bold)
   C: all children use .content-intro__body (body-lg regular)
   ============================================================ */

.content-intro {
  width: 100%;
  background: var(--surface-primary);
  padding: var(--layout-section-tb) var(--layout-content-margin);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.content-intro__highlight {
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-lh);
  font-weight: 700;
  color: var(--text-secondary);
  width: 100%;
}

.content-intro__body {
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-lh);
  color: var(--text-secondary);
  width: 100%;
  margin-top: var(--space-24);
}

.content-intro__body a:not(.text-link),
.content-intro__highlight a:not(.text-link) {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  color: inherit;
  transition: opacity var(--transition-fast);
}

.content-intro__body a:not(.text-link):hover,
.content-intro__highlight a:not(.text-link):hover { opacity: 0.75; }

@media (max-width: 1279px) {
  .content-intro { padding: var(--layout-section-tb) var(--layout-content-margin); }
}

@media (max-width: 767px) {
  .content-intro { padding: var(--space-40) var(--layout-content-margin); }
  .content-intro__highlight,
  .content-intro__body { font-size: var(--text-body-size); line-height: var(--text-body-lh); }
}


/* ============================================================
   15. CONTENT IMAGE BANNER — Layout A
       Node: 10100-153131
       White bg · 10-col padding · image (full-width, 400px tall,
       radius 8px) → H2 heading → body paragraphs
   ============================================================ */

.content-image-banner {
  width: 100%;
  background: var(--surface-primary);
  padding: var(--layout-section-tb) var(--layout-content-margin);
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  align-items: flex-start;
}

.content-image-banner__img {
  width: 100%;
  height: 400px;
  border-radius: var(--radius-image);
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

.content-image-banner__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.content-image-banner__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  width: 100%;
}

.content-image-banner__heading {
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-lh);
  font-weight: 700;
  color: var(--text-primary);
}

.content-image-banner__body {
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  color: var(--text-secondary);
}

.content-image-banner__body p + p { margin-top: var(--space-16); }

@media (max-width: 1279px) {
  .content-image-banner { padding: var(--layout-section-tb) var(--layout-content-margin); }
  .content-image-banner__img { height: 300px; }
}

@media (max-width: 767px) {
  .content-image-banner { padding: var(--space-40) var(--layout-content-margin); gap: var(--space-24); }
  .content-image-banner__img { height: 200px; }
  .content-image-banner__heading { font-size: 24px; line-height: 32px; }
}


/* ============================================================
   16. SECTION CARD GRID — 2-image/content grid
       Node: 10093-72481
       White bg · 10-col padding · optional header block
       (H2 + body-bold) · two equal square cards (radius 28px)
   ============================================================ */

.section-card-grid {
  width: 100%;
  background: var(--surface-primary);
  padding: var(--layout-section-tb) var(--layout-content-margin);
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  align-items: flex-start;
}

.section-card-grid__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  width: 100%;
}

.section-card-grid__cards {
  display: flex;
  gap: var(--space-32);
  align-items: flex-start;
  width: 100%;
}

.section-card-grid__item {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.section-card-grid__image {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 28px;
  overflow: hidden;
  position: relative;
}

.section-card-grid__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* img-placeholder inside a card image fills the full card */
.section-card-grid__image .img-placeholder {
  height: 100%;
  border-radius: 0;
  padding: var(--space-40);
}

@media (max-width: 1279px) {
  .section-card-grid { padding: var(--layout-section-tb) var(--layout-content-margin); }
}

@media (max-width: 1024px) {
  .section-card-grid__cards { flex-wrap: wrap; }
  .section-card-grid__item  { flex: 0 0 calc(50% - var(--space-16)); }
}

@media (max-width: 767px) {
  .section-card-grid         { padding: var(--space-40) var(--layout-content-margin); }
  .section-card-grid__item   { flex: 0 0 100%; }
}


/* ============================================================
   17. QUICKLINKS LIST
       White bg · 12-col padding · alternating image/text rows
       Odd rows: image left, text right · Even rows: text left, image right
   ============================================================ */

.quicklinks-list {
  width: 100%;
  background: var(--surface-primary);
  padding: var(--layout-section-tb) var(--layout-content-margin);
  display: flex;
  flex-direction: column;
  gap: var(--space-80);
}

.quicklinks-list__item {
  display: flex;
  align-items: center;
  gap: var(--space-64);
}

.quicklinks-list__item--reverse {
  flex-direction: row-reverse;
}

.quicklinks-list__media {
  flex: 0 0 calc(50% - var(--space-32));
  border-radius: var(--radius-image);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.quicklinks-list__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.quicklinks-list__media .img-placeholder {
  height: 100%;
  border-radius: 0;
}

.quicklinks-list__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
}

.quicklinks-list__title {
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-lh);
  font-weight: 700;
  color: var(--text-primary);
}

.quicklinks-list__body {
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  color: var(--text-secondary);
  margin: 0;
}

.quicklinks-list__body .text-link {
  color: var(--text-brand-blue);
  text-decoration: underline;
}

@media (max-width: 1279px) {
  .quicklinks-list { padding: var(--layout-section-tb) var(--layout-content-margin); gap: var(--space-64); }
  .quicklinks-list__item { gap: var(--space-40); }
}

@media (max-width: 767px) {
  .quicklinks-list { padding: var(--space-40) var(--layout-content-margin); gap: var(--space-48); }
  .quicklinks-list__item,
  .quicklinks-list__item--reverse { flex-direction: column; gap: var(--space-24); }
  .quicklinks-list__media { flex: none; width: 100%; order: 1; }
  .quicklinks-list__content { order: 2; }
  .quicklinks-list__title {
    font-size: var(--text-subhead-size);
    line-height: var(--text-subhead-lh);
  }
}


/* ============================================================
   18. NUMBERED LIST
   ============================================================ */

.numbered-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.numbered-list li {
  display: flex;
  gap: var(--space-12);
  align-items: baseline;
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-lh);
  color: var(--text-secondary);
}

.numbered-list li::before {
  content: attr(data-n) ')';
  font-weight: 700;
  color: var(--text-brand-blue);
  flex-shrink: 0;
  min-width: 24px;
}

@media (max-width: 767px) {
  .numbered-list li { font-size: var(--text-body-size); line-height: var(--text-body-lh); }
}


/* ============================================================
   18. IMAGE PLACEHOLDER (temporary — awaiting real assets)
   ============================================================ */

.img-placeholder {
  width: 100%;
  background: var(--surface-brand-blue-50);
  border: 2px dashed var(--color-brand-light-blue);
  border-radius: var(--radius-card-large);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-12);
  padding: var(--space-40) var(--space-24);
  color: var(--color-brand-blue);
  text-align: center;
  box-sizing: border-box;
}

.img-placeholder svg {
  width: 40px;
  height: 40px;
  opacity: 0.5;
  flex-shrink: 0;
}

.img-placeholder__label {
  font-size: var(--text-small-1-size);
  line-height: var(--text-small-1-lh);
  font-weight: 700;
  color: var(--color-brand-blue);
  opacity: 0.65;
}


/* ============================================================
   19. SECTION BODY ONLY — Centered body-lg intro text
       Node: 10103-157810  (Section_Content Only)
       White bg · 12-col padding · content centered at max 838px
   ============================================================ */

.section-body-only {
  width: 100%;
  background: var(--surface-primary);
  padding: var(--layout-section-tb) var(--layout-content-margin);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.section-body-only__text {
  width: 100%;
  max-width: 838px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-lh);
  color: var(--text-secondary);
}

.section-body-only__text a:not(.text-link) {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  color: inherit;
}

@media (max-width: 1279px) {
  .section-body-only { padding: var(--layout-section-tb) var(--layout-content-margin); }
}

@media (max-width: 767px) {
  .section-body-only { padding: var(--space-40) var(--layout-content-margin); }
  .section-body-only__text {
    font-size: var(--text-body-size);
    line-height: var(--text-body-lh);
  }
}


/* ============================================================
   20. SECTION DIVIDER WRAP — 12-col horizontal padding
   ============================================================ */

.section-divider-wrap {
  width: 100%;
  padding: 0 var(--layout-content-margin);
}

@media (max-width: 1279px) {
  .section-divider-wrap { padding: 0 var(--layout-content-margin); }
}

@media (max-width: 767px) {
  .section-divider-wrap { padding: 0 var(--layout-content-margin); }
}


/* ============================================================
   21. LIGHT BLUE INFO CARD PAIR — 2-col equal blue-50 info cards
       Node: 10158-6070  (L2_Section_Information Card 2 Columns)
       White bg · 10-col padding · two equal cards stretched to
       same height · each card: blue-50 bg, radius-small, 40px padding
       Title: subhead bold (23px) · Body: body regular (16px)
   ============================================================ */

.section-info-cards {
  width: 100%;
  background: var(--surface-primary);
  padding: var(--layout-section-tb) var(--layout-content-margin);
  display: flex;
  gap: var(--space-32);
  align-items: stretch;
}

.section-info-cards__card {
  flex: 1 0 0;
  min-width: 0;
  background: var(--surface-brand-blue-50);
  border-radius: var(--radius-card-large);
  padding: var(--space-40);
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}

.section-info-cards__title {
  font-size: var(--text-subhead-size);
  line-height: var(--text-subhead-lh);
  font-weight: 700;
  color: var(--text-primary);
}

/* numbered-list inside info card uses body (16px), not body-lg */
.section-info-cards .numbered-list li {
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
}

@media (max-width: 1279px) {
  .section-info-cards { padding: var(--layout-section-tb) var(--layout-content-margin); }
}

@media (max-width: 767px) {
  .section-info-cards {
    padding: var(--space-40) var(--layout-content-margin);
    flex-direction: column;
  }
}

.section-info-cards--embedded {
  padding: 0;
}

.light-blue-info-card-pair .section-info-cards__title {
  font-size: var(--text-subhead-size);
  line-height: var(--text-subhead-lh);
}

.light-blue-info-card-pair__text {
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  color: var(--text-secondary);
}

.light-blue-info-card-pair .numbered-list {
  list-style: decimal;
  padding-left: var(--space-24);
}

.light-blue-info-card-pair .numbered-list li {
  display: list-item;
  padding-left: var(--space-8);
}

.light-blue-info-card-pair .numbered-list li::before {
  content: none;
}

.light-blue-info-card-pair .numbered-list li::marker {
  color: var(--text-secondary);
  font-weight: 400;
}

@media (max-width: 768px) {
  .light-blue-info-card-pair .section-info-cards__title {
    font-size: var(--text-body-lg-size);
    line-height: var(--text-body-lg-lh);
  }
}


/* ============================================================
   22. MOTORING FEATURE SECTION — Figma-aligned content block
   ============================================================ */

.motoring-feature-section {
  width: 100%;
  background: var(--surface-primary);
  padding: var(--layout-section-tb) var(--layout-content-margin);
}

.motoring-feature-section__inner {
  width: 100%;
  max-width: 1054px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  align-items: flex-start;
}

.motoring-feature-section__heading {
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-lh);
  font-weight: 700;
  color: var(--text-primary);
  width: 100%;
}

.motoring-feature-section .section-info-cards {
  width: 100%;
}

.motoring-feature-section__media {
  width: 100%;
  border-radius: var(--radius-image);
  overflow: hidden;
  background: var(--surface-brand-blue-50);
}

.motoring-feature-section__media img {
  width: 100%;
  height: auto;
  display: block;
}

.motoring-feature-section__body {
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  color: var(--text-secondary);
  width: 100%;
}

.motoring-feature-section__rich-text {
  width: 100%;
  color: var(--text-secondary);
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
}

.motoring-feature-section__rich-text p {
  margin: 0 0 var(--space-8);
}

.motoring-feature-section__rich-text ol {
  margin: 0 0 var(--space-24);
  padding-left: var(--space-24);
}

.motoring-feature-section__rich-text ol:last-child {
  margin-bottom: 0;
}

.motoring-feature-section__rich-text li + li {
  margin-top: var(--space-4);
}

.motoring-feature-section__pair {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-32);
}

.motoring-feature-section__pair-item {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-image);
  overflow: hidden;
  background: var(--surface-primary);
}

.motoring-feature-section__pair-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.motoring-feature-section__pair-item--contain {
  background: #0c2a57;
}

.motoring-feature-section__pair-item--contain img {
  object-fit: contain;
  padding: var(--space-40);
}

@media (max-width: 1279px) {
  .motoring-feature-section {
    padding: var(--layout-section-tb) var(--layout-content-margin);
  }
}

@media (max-width: 767px) {
  .motoring-feature-section {
    padding: var(--space-40) var(--layout-content-margin);
  }

  .motoring-feature-section__inner {
    gap: var(--space-24);
  }

  .motoring-feature-section__pair {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   14. LOCATION LISTING
   ============================================================ */

.location-intro {
  width: 100%;
  background: var(--surface-primary);
  padding: var(--layout-section-tb) var(--layout-content-margin) var(--space-32);
  display: flex;
  justify-content: center;
}

.location-intro__text {
  width: 100%;
  max-width: 838px;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  text-align: center;
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  color: var(--text-secondary);
}

.location-intro__text strong {
  font-weight: 700;
  color: var(--text-primary);
}

.location-listing {
  width: 100%;
  padding: var(--space-24) var(--layout-content-margin) var(--layout-section-tb);
}

.location-listing__inner {
  width: 100%;
  max-width: 1272px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
}

.location-search {
  display: flex;
  gap: var(--space-24);
  width: 100%;
  padding: 0 0 var(--space-16);
}

.location-search__bar {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.location-search input[type="text"],
.location-search__select {
  width: 100%;
  height: 59px;
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  color: #8c8c8c;
  font-family: var(--font-family);
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  background-color: var(--surface-primary);
}

.location-search input[type="text"] {
  padding: 0 96px 0 20px;
}

.location-search input[type="text"]::placeholder {
  color: #8c8c8c;
}

.location-search input[type="text"]:focus,
.location-search__select:focus {
  border: 2px solid var(--color-brand-blue);
  outline: none;
}

.location-search__select {
  flex: 0 0 217px;
  padding: 0 52px 0 20px;
  appearance: none;
  background-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 9L12 15L18 9" stroke="%238C8C8C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat: no-repeat;
  background-position: right 20px center;
  background-size: 24px 24px;
}

.location-search__clear,
.location-search__submit {
  position: absolute;
  top: 50%;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  background: none;
  border: none;
}

.location-search__clear {
  right: 58px;
}

.location-search__clear[hidden] {
  display: none;
}

.location-search__submit {
  right: 10px;
}

.location-search__clear svg,
.location-search__submit svg {
  width: 24px;
  height: 24px;
}

.location-alpha {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: var(--space-8);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--border-divider);
}

.location-alpha__link {
  min-width: 18px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: #8c8c8c;
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-lh);
  font-weight: 700;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.location-alpha__link:hover,
.location-alpha__link:focus-visible {
  color: var(--text-brand-dark-blue);
  outline: none;
}

.location-alpha__link.is-active {
  color: var(--text-brand-dark-blue);
}

.location-alpha__link.is-active::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -9px;
  left: 0;
  height: 3px;
  background: var(--surface-brand-blue);
}

.location-alpha__link--empty {
  color: #8c8c8c;
  cursor: default;
}

.location-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}

.location-section[hidden] {
  display: none;
}

.location-section + .location-section {
  padding-top: var(--space-40);
}

.location-section__heading {
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-lh);
  font-weight: 700;
  color: var(--text-primary);
}

.location-item-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(var(--space-40), 5vw, var(--space-64));
  row-gap: var(--space-56);
}

.location-item {
  min-height: 216px;
  border-bottom: 1px solid var(--border-divider);
  background: var(--surface-primary);
  padding: 0 0 var(--space-32);
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}

.location-item.is-hidden {
  display: none;
}

.location-item.is-lazy-hidden {
  display: none;
}

.location-empty-state {
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  color: var(--text-secondary);
}

.location-lazy-sentinel {
  width: 100%;
  height: 1px;
}

.location-listing__inner > .location-section {
  display: none;
}

.location-item__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.location-item__title {
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-lh);
  font-weight: 700;
  color: var(--text-primary);
}

.location-item__address {
  position: relative;
  padding-left: 25px;
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  color: var(--text-secondary);
}

.location-item__address::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 16px;
  height: 16px;
  background-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_7347_10216)"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.11091 2.7779C5.14236 1.74645 6.54131 1.16699 8 1.16699C9.45869 1.16699 10.8576 1.74645 11.8891 2.7779C12.9205 3.80935 13.5 5.2083 13.5 6.66699C13.5 8.79935 12.1171 10.8441 10.637 12.4065C9.90719 13.1768 9.17567 13.8069 8.62604 14.2446C8.37117 14.4475 8.15629 14.6084 8 14.722C7.84371 14.6084 7.62883 14.4475 7.37396 14.2446C6.82433 13.8069 6.09281 13.1768 5.36298 12.4065C3.88287 10.8441 2.5 8.79935 2.5 6.66699C2.5 5.2083 3.07946 3.80935 4.11091 2.7779ZM7.72236 15.7495C7.72252 15.7496 7.72265 15.7497 8 15.3337L8.27735 15.7497C8.1094 15.8617 7.89031 15.8615 7.72236 15.7495ZM7.72236 15.7495L8 15.3337C8.27735 15.7497 8.27791 15.7493 8.27806 15.7492L8.27932 15.7484L8.28347 15.7456L8.29814 15.7357C8.31072 15.7271 8.32881 15.7147 8.35207 15.6986C8.39857 15.6664 8.46571 15.6193 8.55056 15.558C8.7202 15.4355 8.96088 15.2563 9.24896 15.0269C9.82433 14.5687 10.5928 13.9072 11.363 13.0942C12.8829 11.4899 14.5 9.20129 14.5 6.66699C14.5 4.94308 13.8152 3.28978 12.5962 2.0708C11.3772 0.851812 9.72391 0.166992 8 0.166992C6.27609 0.166992 4.62279 0.851812 3.40381 2.0708C2.18482 3.28978 1.5 4.94308 1.5 6.66699C1.5 9.20129 3.11713 11.4899 4.63702 13.0942C5.40719 13.9072 6.17567 14.5687 6.75104 15.0269C7.03912 15.2563 7.2798 15.4355 7.44944 15.558C7.53429 15.6193 7.60143 15.6664 7.64793 15.6986C7.67119 15.7147 7.68928 15.7271 7.70186 15.7357L7.71653 15.7456L7.72068 15.7484L7.72236 15.7495ZM6.5 6.66699C6.5 5.83857 7.17157 5.16699 8 5.16699C8.82843 5.16699 9.5 5.83857 9.5 6.66699C9.5 7.49542 8.82843 8.16699 8 8.16699C7.17157 8.16699 6.5 7.49542 6.5 6.66699ZM8 4.16699C6.61929 4.16699 5.5 5.28628 5.5 6.66699C5.5 8.0477 6.61929 9.16699 8 9.16699C9.38071 9.16699 10.5 8.0477 10.5 6.66699C10.5 5.28628 9.38071 4.16699 8 4.16699Z" fill="black"/></g><defs><clipPath id="clip0_7347_10216"><rect width="16" height="16" fill="white"/></clipPath></defs></svg>');
  background-repeat: no-repeat;
  background-size: 16px 16px;
}

.location-item__map {
  width: 24px;
  height: 24px;
  margin-top: auto;
  display: block;
  overflow: hidden;
  text-indent: -9999px;
  background-image: url('data:image/svg+xml,<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.2522 10.9567C12.0914 10.8816 11.9055 10.8816 11.7447 10.9567L4.24472 14.4567C4.09873 14.5248 3.98627 14.6488 3.93266 14.8007L0.932656 23.3007C0.858382 23.5111 0.907043 23.7454 1.05898 23.9089C1.21091 24.0723 1.44102 24.138 1.65632 24.0792L6.99059 22.6244L11.3984 23.9468V24.0004H11.577L11.826 24.0751C11.9385 24.1088 12.0584 24.1088 12.1709 24.0751L12.4199 24.0004H12.5984V23.9468L17.0063 22.6244L22.3406 24.0792C22.5559 24.138 22.786 24.0723 22.9379 23.9089C23.0899 23.7454 23.1385 23.5111 23.0642 23.3007L20.0642 14.8007C20.0106 14.6488 19.8982 14.5248 19.7522 14.4567L12.2522 10.9567ZM16.3196 21.5776L12.5984 22.694L12.5984 12.4425L14.9825 13.5551L16.3196 21.5776ZM17.527 21.5226L21.5515 22.6202L19.0165 15.4376L16.3017 14.1707L17.527 21.5226ZM11.3984 22.694L11.3984 12.4425L9.01414 13.5552L7.67708 21.5776L11.3984 22.694ZM2.44537 22.6202L4.98042 15.4376L7.69499 14.1708L6.46967 21.5227L2.44537 22.6202Z" fill="%23AA57A1"/><path fill-rule="evenodd" clip-rule="evenodd" d="M8.64663 0.879261C9.67104 0.305256 10.8252 0.00259453 11.9995 0C13.1738 0.00242288 14.3285 0.304955 15.353 0.878869C16.3775 1.45278 17.2383 2.27902 17.8536 3.27913C18.4689 4.27924 18.8183 5.42003 18.8687 6.59315C18.919 7.76627 18.6686 8.93279 18.1413 9.98193L14.6078 17.5855C14.3769 18.0824 14.0087 18.5031 13.5467 18.7978C13.0847 19.0926 12.548 19.2492 12 19.2492C11.4519 19.2492 10.9153 19.0926 10.4533 18.7978C9.99123 18.5031 9.62307 18.0824 9.39214 17.5855L5.85868 9.98241C5.33137 8.93327 5.081 7.76677 5.13133 6.59367C5.18167 5.42057 5.53104 4.27981 6.14628 3.27968C6.76152 2.27956 7.62221 1.45327 8.64663 0.879261ZM10.649 4.45258C11.0486 4.18563 11.5183 4.04315 11.9988 4.04315C12.6428 4.04441 13.2601 4.30077 13.7155 4.7561C14.1708 5.21142 14.4272 5.82862 14.4285 6.47255C14.4285 6.95304 14.286 7.42273 14.019 7.82224C13.752 8.22176 13.3726 8.53314 12.9286 8.71702C12.4847 8.90089 11.9961 8.94899 11.5248 8.85525C11.0535 8.76151 10.6206 8.53014 10.2808 8.19038C9.94103 7.85063 9.70963 7.41776 9.61588 6.9465C9.52213 6.47525 9.57025 5.98677 9.75414 5.54286C9.93804 5.09895 10.2495 4.71952 10.649 4.45258Z" fill="%233F84C5"/></svg>');
  background-repeat: no-repeat;
  background-size: 24px 25px;
  transition: transform var(--transition-fast);
}

.location-item__map:hover,
.location-item__map:focus-visible {
  transform: translateY(-2px);
  outline: none;
}

.location-item__map svg {
  display: none;
}

@media (max-width: 1279px) {
  .location-intro {
    padding-inline: var(--layout-content-margin);
  }

  .location-listing {
    padding: var(--space-24) var(--layout-content-margin) var(--layout-section-tb);
  }

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

@media (max-width: 767px) {
  .location-intro {
    padding: var(--space-40) var(--layout-content-margin) var(--space-24);
  }

  .location-listing {
    padding: var(--space-16) var(--layout-content-margin) var(--space-40);
  }

  .location-listing__inner {
    gap: var(--space-32);
  }

  .location-search {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-16);
    padding: 0 0 var(--space-16);
  }

  .location-search__bar,
  .location-search__select {
    flex: 0 0 100%;
  }

  .location-alpha {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--space-8) var(--space-12);
  }

  .location-alpha__link {
    min-height: 30px;
    font-size: 14px;
    line-height: 22px;
  }

  .location-alpha__link.is-active::after {
    bottom: -9px;
  }

  .location-item-grid {
    grid-template-columns: 1fr;
  }

  .location-item {
    min-height: 168px;
    padding-bottom: var(--space-24);
  }

}