/* ==================================
         DESIGN TOKENS – ManilaStay v9
         Shared across: Home, Airport, Trips, Stays, Guides, Contact
         ================================== */

      :root {
        /* Brand colors */
        --ms-color-bg: #ffffff;           /* Primary background */
        --ms-color-bg-soft: #f3f3f0;      /* Warm grey secondary background */
        --ms-color-text: #1f1f1f;         /* Primary text */
        --ms-color-primary: #475b66;      /* Slate for nav, footer, subtle UI */
        --ms-color-primary-dark: #32424b; /* Deeper slate for strong accents */
        --ms-color-accent: #d54b0f;       /* Burnt orange CTA */

        /* New theme color: hero card background (v8 booking form card) */
        --ms-color-hero-card: #0c141c;

        /* Supporting tokens */
        --ms-color-border-soft: rgba(15, 23, 42, 0.08);
        --ms-color-muted: rgba(31, 31, 31, 0.7);

        --ms-radius-sm: 6px;
        --ms-radius-md: 10px;
        --ms-radius-lg: 16px;

        --ms-shadow-soft: 0 12px 30px rgba(15, 23, 42, 0.12);

        --ms-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
          sans-serif;

        --ms-hero-overlay-opacity: 0.10;
 
      
      /* Spacing tokens from v8.1 */
      --ms-spacing-xs: 0.5rem;
      --ms-spacing-sm: 0.75rem;
      --ms-spacing-md: 1rem;
      --ms-spacing-lg: 1.5rem;
      --ms-spacing-xl: 2rem;
      --ms-spacing-xxl: 3rem;
}

      
      /* ==================================
         TYPOGRAPHY & UTILITIES (from v8.1)
         ================================== */
      .ms-heading-lg {
        font-size: 1.5rem;
        margin: 0 0 0.75rem;
      }

      .ms-text-lg {
        font-size: 1.125rem;
      }

      .ms-text-sm {
        font-size: 0.875rem;
      }

      .ms-text-xs {
        font-size: 0.75rem;
      }

      .ms-muted {
}

      /* Badge styles (Trusted since 2008) */
      .ms-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.2rem 0.65rem;
        border-radius: 999px;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        font-weight: 600;
      }

      .ms-badge--accent {
        background: var(--ms-color-accent);
        color: #ffffff;
        border: none;
      }

      /* Visually hidden helper for accessibility */
      .ms-visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }

      /* Full-width button helper */
      .ms-btn--full {
        width: 100%;
      }
/* ==================================
         GLOBAL RESET + BASE
         ================================== */

      * ,
      *::before,
      *::after {
        box-sizing: border-box;
      }

      html,
      body {
        margin: 0;
        padding: 0;
      }

      body {
        font-family: var(--ms-font-sans);
        background-color: var(--ms-color-bg);
        color: var(--ms-color-text);
        line-height: 1.6;
        -webkit-font-smoothing: antialiased;
      }

      img {
        max-width: 100%;
        display: block;
      }

      a {
        color: var(--ms-color-accent);
        text-decoration: none;
      }

      a:hover {
        text-decoration: underline;
      }

      main {
        min-height: 60vh;
      }

      .ms-container {
        max-width: 1120px;
        margin: 0 auto;
        padding-inline: 1rem;
      }

      @media (min-width: 768px) {
        .ms-container {
          padding-inline: 1.5rem;
        }
      }

      /* ==================================
         BUTTONS
         ================================== */

      .ms-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        padding: 0.55rem 1.1rem;
        font-size: 0.9rem;
        line-height: 1;
        font-weight: 600;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        border: 1px solid transparent;
        cursor: pointer;
        text-decoration: none;
        transition:
          background-color 0.15s ease,
          color 0.15s ease,
          box-shadow 0.15s ease,
          border-color 0.15s ease;
        white-space: nowrap;
      }

      .ms-btn--primary {
        background-color: var(--ms-color-accent);
        color: #ffffff;
        box-shadow: 0 10px 25px rgba(213, 75, 15, 0.35);
      }

      .ms-btn--primary:hover {
        background-color: #b13e0c;
        color: #ffffff;
        box-shadow: 0 14px 32px rgba(213, 75, 15, 0.4);
        text-decoration: none;
      }

      .ms-btn--ghost {
        background-color: transparent;
        color: var(--ms-color-primary-dark);
        border-color: rgba(71, 91, 102, 0.4);
      }

      .ms-btn--ghost:hover {
        background-color: rgba(71, 91, 102, 0.06);
        text-decoration: none;
      }

      
/* ==================================
         INLINE STYLE UTILITIES (QC)
         ================================== */
.ms-u-list-compact {
  margin-top:0.6rem;
  margin-bottom:0;
  padding-left:1.1rem;
}

.ms-u-m0 {
  margin:0;
}

.ms-u-divider-top {
  margin-top:0.85rem;
  padding-top:0.85rem;
  border-top:1px solid var(--ms-color-border-soft);
}

.ms-u-strong-primary {
  font-weight:700;
  color:var(--ms-color-primary);
  line-height:1.2;
}

.ms-u-text-lg {
  font-size:1.15rem;
}

.ms-u-info-box {
  margin-bottom:2rem;
  background: rgba(71,91,102,0.08);
  color: var(--ms-color-primary);
  border: 1px solid rgba(71,91,102,0.14);
}

.ms-u-banner-primary {
  margin-bottom:2rem;
  background: var(--ms-color-primary);
  color:#ffffff;
}

.ms-u-center-mt-2 {
  margin-top: 2rem;
  text-align: center;
}

.ms-u-mt-09-mb-0 {
  margin-top:0.9rem;
  margin-bottom:0;
}

/* ==================================
         GRID UTILITIES (QC)
         ================================== */
.ms-grid {
  display: grid;
  gap: 1.25rem;
}

.ms-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ms-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ms-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Responsive fallback: collapse to 1 column on small screens */
@media (max-width: 700px) {
  .ms-grid--2,
  .ms-grid--3,
  .ms-grid--4 {
    grid-template-columns: 1fr;
  }
}

/* Optional: soften 4-col to 2-col on medium screens */
@media (max-width: 1024px) {
  .ms-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* ==================================
         HEADER / NAV – GLOBAL
         Used on: Home, Airport, Trips, Stays, Guides, Contact
         Flow pages (booking / payment) keep their existing header variant.
         ================================== */

      .ms-nav {
        position: sticky;
        top: 0;
        z-index: 100;
        backdrop-filter: blur(10px);
        background-color: rgba(243, 243, 240, 0.96);
        border-bottom: 1px solid rgba(15, 23, 42, 0.04);
      }

      .ms-nav-inner {
        max-width: 1120px;
        margin: 0 auto;
        padding: 0.25rem 1rem 0.4rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
      }

      @media (min-width: 768px) {
        .ms-nav-inner {
          padding-inline: 1.5rem;
        }
      }

      .ms-nav-logo {
        display: flex;
        align-items: flex-end;
        flex-shrink: 0;
      }

      .ms-nav-logo img {
        height: 40px;
        width: auto;
        display: block;
        transform: translateY(4px);
      }

      @media (min-width: 1024px) {
        .ms-nav-logo img {
          height: 52px;
          transform: translateY(7px);
        }
      }

      .ms-nav-links {
        display: none;
        gap: 0.75rem;
        font-size: 0.95rem;
        flex-wrap: nowrap;
        justify-content: center;
        white-space: nowrap;
        flex: 1 1 auto;
      }

      @media (min-width: 900px) {
        .ms-nav-links {
          display: flex;
        }
      }

      .ms-nav-link {
        padding: 0.35rem 0.7rem;
        border-radius: 999px;
        text-decoration: none;
        color: var(--ms-color-text);
        transition:
          background-color 0.12s ease,
          color 0.12s ease;
      }

      .ms-nav-link:hover {
        background: rgba(213, 75, 15, 0.08);
        color: var(--ms-color-primary-dark);
        text-decoration: none;
      }

      .ms-nav-link--active {
        background: var(--ms-color-primary);
        color: #ffffff;
        text-decoration: none;
      }

      .ms-nav-cta {
        flex-shrink: 0;
        font-size: 0.8rem;
        padding-inline: 1.1rem;
        white-space: nowrap;
      }

      /* Small screens: hide CTA, keep logo and let content breathe */
      @media (max-width: 899px) {
        .ms-nav-cta {
          display: none;
        }
      }

      /* ==================================
         FOOTER – GLOBAL
         Used on: all pages, including flow pages
         ================================== */

      .ms-footer {
        background: var(--ms-color-primary);
        color: rgba(255, 255, 255, 0.88);
        padding-block: 2.5rem 2rem;
        margin-top: 0;
        font-size: 0.9rem;
      }

      .ms-footer a {
        color: rgba(255, 255, 255, 0.88);
        text-decoration: none;
      }

      .ms-footer a:hover {
        color: #ffffff;
      }

      .ms-footer-inner {
        max-width: 1120px;
        margin: 0 auto;
        padding-inline: 1rem;
      }

      @media (min-width: 768px) {
        .ms-footer-inner {
          padding-inline: 1.5rem;
        }
      }

      .ms-footer-grid {
        display: grid;
        gap: 1.75rem;
      }

      @media (min-width: 768px) {
        .ms-footer-grid {
          grid-template-columns: 1.4fr 1fr 1fr;
        }
      }

      .ms-footer-logo-row {
        display: flex;
        align-items: flex-start;
        gap: 0.9rem;
        margin-bottom: 0.75rem;
      }

      .ms-footer-tagline {
        margin: 0;
        color: rgba(255, 255, 255, 0.8);
        font-size: 0.9rem;
      }

      .ms-footer-heading {
        font-size: 0.95rem;
        font-weight: 600;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        margin: 0 0 0.6rem;
        color: rgba(255, 255, 255, 0.7);
      }

      .ms-footer-list {
        list-style: none;
        padding: 0;
        margin: 0;
      }

      .ms-footer-list li {
        margin-bottom: 0.4rem;
      }

      .ms-footer-list li:last-child {
        margin-bottom: 0;
      }

      .ms-footer-contact-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 0.4rem;
      }

      .ms-footer-contact-icon {
        width: 1rem;
        height: 1rem;
        flex-shrink: 0;
      }

      .ms-footer-contact-text {
        color: rgba(255, 255, 255, 0.85);
        font-size: 0.9rem;
      }

      .ms-footer-bottom {
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        margin-top: 2rem;
        padding-top: 1rem;
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        justify-content: space-between;
        align-items: center;
        font-size: 0.8rem;
        color: rgba(255, 255, 255, 0.7);
      }

/* ===============================
   HOME – HERO (v8)
   =============================== */

/* Section wrapper + dark variant (used by hero) */
.ms-section {
  padding-block: var(--ms-spacing-xl);
}

@media (min-width: 768px) {
  .ms-section {
    padding-block: var(--ms-spacing-xxl);
  }
}

.ms-section--dark {
  background: radial-gradient(circle at top left, #475b66, #1f1f1f);
  color: #ffffff;
}

.ms-section--dark p {
  color: rgba(255, 255, 255, 0.9);
}

/* Hero base */
.ms-hero {
  position: relative;
  overflow: hidden;
  background-color: transparent;
  color: #ffffff;
  padding-top: 3.5rem;   /* was larger by default */
  padding-bottom: 1.5rem;
}

@media (min-width: 1024px) {
  .ms-hero {
    max-height: 65vh; /* try 65% view height */
  }
}

/* Inner container (controls hero padding & z-index)
   v1-2-1 fix: this container must not inherit the scaffold-grid behavior
   from components/hero.css. The nested .ms-hero-layout is the actual
   two-column hero grid for the v12 homepage/airport hero. */
.ms-hero-inner {
  position: relative;
  z-index: 1;
  display: block;
  grid-template-columns: none;
  gap: 0;
  align-items: initial;
  padding-block: 2.25rem 2.1rem;  /* top, bottom spacing */
}

@media (min-width: 768px) {
  .ms-hero-inner {
    display: block;
    grid-template-columns: none;
    gap: 0;
    align-items: initial;
    padding-block: 2.5rem 2.3rem;  /* slightly more breathing room */
  }
}

/* Image + slate overlay */
.ms-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(
      to bottom,
      rgba(26, 39, 48, 0.16) 10%,   /* slightly lighter at top */
      rgba(26, 39, 48, 0.32) 55%,
      rgba(26, 39, 48, 0.64) 88%
    ),
    url("manilastay-new/images/home/ms-hero-home-desktop.webp");
  background-size: cover;
  background-position: 50% 20%;    /* focus skyline, crop more bottom */
  background-repeat: no-repeat;
  z-index: 0;
}

/* Hero content wrapper */
.ms-hero-layout {
  display: grid;
  gap: 2rem;
}

@media (min-width: 768px) {
  .ms-hero-layout {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }
}

@media (min-width: 1024px) {
  .ms-hero-layout {
    align-items: start;   /* tighter top alignment */
    padding-top: 0rem;    /* lifts both columns even more */
  }
}

/* Heading sizing inside hero */
.ms-heading-xxl {
  font-size: 2.1rem;
  line-height: 1.5;          /* more vertical breathing room */
  letter-spacing: -0.02em;
  margin: 0 0 0.9rem;        /* slightly tighter below the heading */
}

@media (min-width: 768px) {
  .ms-heading-xxl {
    font-size: 2.6rem;
  }
}

.ms-hero-tagline {
  font-weight: 600;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  max-width: 34rem;
  margin-top: 0.6rem;        /* more space between heading and tagline */
  margin-bottom: 1.8rem;     /* more space before the form */
  line-height: 2.0;          /* comfy reading line height */
}

.ms-hero-kicker {
  margin-bottom: 0.9rem;
}

/* HERO – form card */
.ms-hero-form-card {
  background: rgba(12, 20, 28, 0.96);
  border-radius: var(--ms-radius-lg);
  padding: 1.25rem 1.25rem 0.75rem; /* tighter, premium */
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.55);
  max-width: 380px;
  margin-inline: auto;
}

/* HERO – Form layout rows (WP layout) */
.ms-hero-form-fields {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;  /* vertical spacing between form rows */
}

.ms-form-row {
  display: grid;
  gap: 0.75rem;
}

/* Always try to keep two fields side by side (date/time, passengers/luggage) */
.ms-hero-form-card .ms-form-row--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Optional: only stack on ultra-tiny screens */
@media (max-width: 340px) {
  .ms-hero-form-card .ms-form-row--two {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 900px) {
  .ms-hero-form-card {
    margin-left: auto;
  }
}

@media (min-width: 1024px) {
  .ms-hero-form-card {
    margin-top: -4.5rem; /* positions higher, as you wanted */
  }
}

/* Stepper controls */
.ms-stepper {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.ms-stepper-btn {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(15, 23, 32, 0.9);
  color: #ffffff;
  font-size: 1.05rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.ms-stepper-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

.ms-stepper-input {
  width: 100%;
  max-width: 3.5rem;
  text-align: center;
}

/* Hide native number arrows */
.ms-stepper-input::-webkit-outer-spin-button,
.ms-stepper-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.ms-stepper-input {
  -moz-appearance: textfield;
}

/* Inputs inside hero card */
.ms-input,
.ms-select {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border-radius: var(--ms-radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.28);
  background-color: rgba(10, 18, 26, 0.95);
  color: #ffffff;
  font-size: 0.9rem;
  outline: none;
}

/* Label font size & color */
.ms-form-group label {
  font-size: 0.9rem;                  /* WP-like size */
  color: rgba(255, 255, 255, 0.75);   /* soft grey */
  font-weight: 500;
  margin-bottom: 0.35rem;
  display: block;
  padding-left: 0.75rem;              /* aligns with input text */
}

/* Spacing between labels and input fields */
.ms-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.6rem; /* breathing room like WP */
}

.ms-hero-form-footer {
  margin-top: 0.85rem;
}

.ms-hero-form-note {
  margin-top: 0.75rem;
  text-align: center;
}

/* Mobile tweaks */

      /* HERO form input fine-tuning (from v8.1) */
      .ms-input {
        font-size: 0.85rem;
        color: rgba(255, 255, 255, 0.75);
      }

      .ms-stepper-input {
        font-size: 0.85rem;
      }

      .ms-input::placeholder {
        color: rgba(255, 255, 255, 0.55);
        opacity: 1;
      }

      input[type="date"],
      input[type="time"] {
        color-scheme: dark;
        color: rgba(255, 255, 255, 0.65);
      }

@media (max-width: 768px) {
  .ms-hero::before {
    background-image:
      linear-gradient(
        to bottom,
        rgba(26, 39, 48, var(--ms-hero-overlay-opacity)) 10%,
        rgba(26, 39, 48, 0.40) 55%,
        rgba(26, 39, 48, 0.64) 88%
      ),
      url("manilastay-new/images/home/ms-hero-home-mobile.webp");
    background-position: 50% 50%;
  }
}

    

/* ===============================
       TRUST TILES – Below hero
       =============================== */

    .ms-trust-grid,
    .ms-services-grid {
      display: grid;
      gap: 1.5rem;
    }

    /* Mobile: 1 per row (like WP) */
    /* Desktop: 3 across (like Blacklane) */
    @media (min-width: 768px) {
      .ms-trust-grid,
      .ms-services-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }

    .ms-trust-card,
    .ms-services-card {
      background: #ffffff;
      border-radius: 1.1rem;
      padding: 1.6rem 1.8rem 1.5rem;
      box-shadow: 0 18px 40px rgba(0, 0, 0, 0.06);
      border: 1px solid rgba(0, 0, 0, 0.04);
    }

    .ms-trust-header,
    .ms-services-header {
      display: flex;
      align-items: center;
      gap: 0.85rem;
      margin-bottom: 0.7rem;
    }

    .ms-trust-icon,
    .ms-services-icon {
      width: 32px;
      height: 32px;
      flex-shrink: 0;
      /* optional tiny nudge so it sits nicely on the baseline */
      transform: translateY(1px);
      /* Thinner look: keep SVG strokes light in the asset itself, or use a lighter color here */
    }

    .ms-trust-title,
    .ms-services-title {
      margin: 0;
      font-size: 1.08rem;
      font-weight: 600;
      letter-spacing: -0.01em;
      color: var(--ms-color-text);
    }

    .ms-trust-body,
    .ms-services-body {
      margin: 0;
      font-size: 0.9rem;
      line-height: 1.5;
}

/* ===============================
   HOME – Why choose: flat 2D grid (matches Airport "What's included")
   =============================== */
.ms-included-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 2.5rem;
  row-gap: 3rem;
}

.ms-included-item {
  padding: 0 1.5rem;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
  text-align: center;
}

.ms-included-icon {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}

.ms-included-icon img {
  width: 100%;
  max-width: 3.25rem;
  height: auto;
}

@media (max-width: 900px) {
  .ms-included-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .ms-included-grid {
    grid-template-columns: 1fr;
  }
}

    

/* ===============================
   HOME – Services cards as clickable links (v11.3)
   Tactile hover/press feedback while keeping the section calm.
   =============================== */
.ms-services-card--link {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    border-color 0.15s ease,
    background-color 0.15s ease;
  will-change: transform;
}

.ms-services-card--link:hover {
  text-decoration: none;
}

.ms-services-card--link:focus-visible {
  outline: 3px solid rgba(71, 91, 102, 0.45);
  outline-offset: 3px;
}

/* Desktop / precision pointers: lift + subtle tint */
@media (hover: hover) and (pointer: fine) {
  .ms-services-card--link:hover,
  .ms-services-card--link:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.08);
    border-color: rgba(50, 66, 75, 0.38);
    background-color: #ffffff;
  }

  .ms-services-card--link:hover .ms-services-micro,
  .ms-services-card--link:focus-visible .ms-services-micro {
    color: var(--ms-color-primary);
  }
}

/* Touch / press feedback (mobile) */
.ms-services-card--link:active {
  transform: translateY(0);
  background-color: rgba(71, 91, 102, 0.05);
}

/* Footer micro-CTA */
.ms-services-footer {
  margin-top: 0.95rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--ms-color-border-soft);
  display: flex;
  justify-content: flex-end;
}

.ms-services-micro {
  font-size: 0.85rem;
  font-weight: 600;
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .ms-services-card--link {
    transition: none;
  }
  .ms-services-card--link:hover,
  .ms-services-card--link:focus-visible,
  .ms-services-card--link:active {
    transform: none;
  }
}

/* ==================================
   HOME – Services, Why Choose, Testimonials, FAQ
   ================================== */

.ms-section--standard {
  background: #ffffff;
  padding-top: 2.5rem;
  padding-bottom: 3rem;
}

@media (min-width: 768px) {
  .ms-section--standard {
    padding-top: 3rem;
    padding-bottom: 3.5rem;
  }
}

.ms-section-heading {
  text-align: center;
  margin-bottom: 0.35rem;
}

.ms-section-subheading {
  text-align: center;
  margin: 0 0 2rem;
}

.ms-testimonials-grid {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .ms-testimonials-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.ms-testimonial-card {
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
  padding: 1.35rem 1.35rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

@media (min-width: 1024px) {
  .ms-testimonial-card {
    padding: 1.5rem 1.7rem 1.35rem;
  }
}

.ms-testimonial-text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ms-color-text);
}

.ms-testimonial-name {
  margin: 0.5rem 0 0;
  font-weight: 600;
}

.ms-testimonial-meta {
  margin: 0;
  font-size: 0.85rem;
}

/* Star ratings for testimonials */
.ms-stars {
  display: flex;
  gap: 4px;
  margin-bottom: 0.75rem;
}

.ms-star-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: block;
}

@media (max-width: 480px) {
  .ms-star-icon {
    width: 18px;
    height: 18px;
  }
}

.ms-faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ms-faq-item {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid var(--ms-color-border-soft);
  padding: 0.75rem 1rem;
}

.ms-faq-item > summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.ms-faq-item > summary::-webkit-details-marker {
  display: none;
}

.ms-faq-question {
  flex: 1;
}

.ms-faq-chevron {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ms-faq-chevron::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--ms-color-text);
  border-bottom: 2px solid var(--ms-color-text);
  transform: rotate(45deg);
  transition: transform 0.18s ease;
}

/* Rotate chevron when the FAQ item is open */
.ms-faq-item[open] .ms-faq-chevron::before {
  transform: rotate(-135deg);
}

.ms-faq-cta {
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
}

.ms-faq-cta a {
  color: var(--ms-color-accent);
  text-decoration: none;
  font-weight: 600;
}

.ms-faq-cta a:hover {
  text-decoration: underline;
}

.ms-faq-item > p {
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
}

      /* ===============================
         MOBILE NAV + LOGO TWEAKS
         =============================== */
      .ms-nav-toggle {
        display: none;
        border: none;
        background: transparent;
        padding: 0.25rem;
        margin-left: auto;
        cursor: pointer;
      }

      .ms-nav-toggle img {
        display: block;
        width: 26px;
        height: 26px;
      }

      @media (max-width: 900px) {
        .ms-nav-inner {
          padding: 0.5rem 1.1rem 0.6rem;
        }

        .ms-nav-logo img {
          height: 44px;
          transform: translateY(6px);
        }

        .ms-nav-toggle {
          display: inline-flex;
          align-items: center;
          justify-content: center;
        }

        /* Hide desktop CTA on small screens */
        .ms-nav-cta {
          display: none;
        }

        /* Mobile dropdown nav – anchored right, partial width, dark theme */
        .ms-nav-inner {
          position: relative;
        }

        .ms-nav-links {
          position: absolute;
          top: 100%;
          right: 0;
          left: auto;
          margin-top: 0.25rem;
          width: 62vw;
          max-width: 280px;
          padding: 0.6rem 0.7rem 0.75rem;
          background-color: rgba(12, 20, 28, 0.97); /* dark, similar to hero card */
          box-shadow: 0 18px 35px rgba(15, 23, 42, 0.6);
          border-radius: 0 0 0 18px;
          flex-direction: column;
          gap: 0.25rem;
          font-size: 0.95rem;
          color: #ffffff;
        }

        .ms-nav.ms-nav--open .ms-nav-links {
          display: flex;
        }

        .ms-nav-link {
          padding: 0.45rem 0.9rem;
          color: #ffffff;
          border-radius: 999px;
        }

        .ms-nav-link:hover {
          background-color: rgba(255, 255, 255, 0.08);
          color: #ffffff;
        }
      }

/* Desktop-only whole-card click (Index Our services) — match Airport interaction model */
.ms-services-card--link { position: relative; }
.ms-card-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  border-radius: inherit;
  /* keep it non-visual */
  color: transparent;
  text-decoration: none;
}
.ms-services-card--link > *:not(.ms-card-overlay){
  position: relative;
  z-index: 2;
}

@media (hover: hover) and (pointer: fine){
  .ms-card-overlay{ display:block; pointer-events:auto; }
  .ms-services-card--link{ cursor: pointer; }
}

@media (hover: none) and (pointer: coarse){
  .ms-card-overlay{ display:none; pointer-events:none; }
  .ms-services-card--link{ cursor: default; }
}


/* ===== Source fidelity layer ===== */


      /* ==================================
         DESIGN TOKENS – ManilaStay v9
         Shared across: Home, Airport, Trips, Stays, Guides, Contact
         ================================== */

      :root {
        /* Brand colors */
        --ms-color-bg: #ffffff;           /* Primary background */
        --ms-color-bg-soft: #f3f3f0;      /* Warm grey secondary background */
        --ms-color-text: #1f1f1f;         /* Primary text */
        --ms-color-primary: #475b66;      /* Slate for nav, footer, subtle UI */
        --ms-color-primary-dark: #32424b; /* Deeper slate for strong accents */
        --ms-color-accent: #d54b0f;       /* Burnt orange CTA */

        /* New theme color: hero card background (v8 booking form card) */
        --ms-color-hero-card: #0c141c;

        /* Supporting tokens */
        --ms-color-border-soft: rgba(15, 23, 42, 0.08);
        --ms-color-muted: rgba(31, 31, 31, 0.7);

        --ms-radius-sm: 6px;
        --ms-radius-md: 10px;
        --ms-radius-lg: 16px;

        --ms-shadow-soft: 0 12px 30px rgba(15, 23, 42, 0.12);

        --ms-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
          sans-serif;

        --ms-hero-overlay-opacity: 0.10;
 
        /* Spacing tokens from v8.1 */
        --ms-spacing-xs: 0.5rem;
        --ms-spacing-sm: 0.75rem;
        --ms-spacing-md: 1rem;
        --ms-spacing-lg: 1.5rem;
        --ms-spacing-xl: 2rem;
        --ms-spacing-xxl: 3rem;
      }

      /* ==================================
         TYPOGRAPHY & UTILITIES (from v8.1)
         ================================== */
      .ms-heading-lg {
        font-size: 1.5rem;
        margin: 0 0 0.75rem;
      }

      .ms-text-lg {
        font-size: 1.125rem;
      }

      .ms-text-sm {
        font-size: 0.875rem;
      }

      .ms-text-xs {
        font-size: 0.75rem;
      }

      .ms-muted {
      }

      /* Badge styles */
      .ms-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.2rem 0.65rem;
        border-radius: 999px;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        font-weight: 600;
      }

      .ms-badge--accent {
        background: var(--ms-color-accent);
        color: #ffffff;
        border: none;
      }

      /* Visually hidden helper for accessibility */
      .ms-visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }

      /* Full-width button helper */
      .ms-btn--full {
        width: 100%;
      }

      /* ==================================
         GLOBAL RESET + BASE
         ================================== */

      *,
      *::before,
      *::after {
        box-sizing: border-box;
      }

      html,
      body {
        margin: 0;
        padding: 0;
      }

      body {
        font-family: var(--ms-font-sans);
        background-color: var(--ms-color-bg);
        color: var(--ms-color-text);
        line-height: 1.6;
        -webkit-font-smoothing: antialiased;
      }

      img {
        max-width: 100%;
        display: block;
      }

      a {
        color: var(--ms-color-accent);
        text-decoration: none;
      }

      a:hover {
        text-decoration: underline;
      }

      main {
        min-height: 60vh;
      }

      .ms-container {
        max-width: 1120px;
        margin: 0 auto;
        padding-inline: 1rem;
      }

      @media (min-width: 768px) {
        .ms-container {
          padding-inline: 1.5rem;
        }
      }

      /* ==================================
         BUTTONS
         ================================== */

      .ms-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        padding: 0.55rem 1.1rem;
        font-size: 0.9rem;
        line-height: 1;
        font-weight: 600;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        border: 1px solid transparent;
        cursor: pointer;
        text-decoration: none;
        transition:
          background-color 0.15s ease,
          color 0.15s ease,
          box-shadow 0.15s ease,
          border-color 0.15s ease;
        white-space: nowrap;
      }

      .ms-btn--primary {
        background-color: var(--ms-color-accent);
        color: #ffffff;
        box-shadow: 0 10px 25px rgba(213, 75, 15, 0.35);
      }

      .ms-btn--primary:hover {
        background-color: #b13e0c;
        color: #ffffff;
        box-shadow: 0 14px 32px rgba(213, 75, 15, 0.4);
        text-decoration: none;
      }

      .ms-btn--ghost {
        background-color: transparent;
        color: var(--ms-color-primary-dark);
        border-color: rgba(71, 91, 102, 0.4);
      }

      .ms-btn--ghost:hover {
        background-color: rgba(71, 91, 102, 0.06);
        text-decoration: none;
      }

      
/* ==================================
         INLINE STYLE UTILITIES (QC)
         ================================== */
.ms-u-list-compact {
  margin-top:0.6rem;
  margin-bottom:0;
  padding-left:1.1rem;
}

.ms-u-m0 {
  margin:0;
}

.ms-u-divider-top {
  margin-top:0.85rem;
  padding-top:0.85rem;
  border-top:1px solid var(--ms-color-border-soft);
}

.ms-u-strong-primary {
  font-weight:700;
  color:var(--ms-color-primary);
  line-height:1.2;
}

.ms-u-text-lg {
  font-size:1.15rem;
}

.ms-u-info-box {
  margin-bottom:2rem;
  background: rgba(71,91,102,0.08);
  color: var(--ms-color-primary);
  border: 1px solid rgba(71,91,102,0.14);
}

.ms-u-banner-primary {
  margin-bottom:2rem;
  background: var(--ms-color-primary);
  color:#ffffff;
}

.ms-u-center-mt-2 {
  margin-top: 2rem;
  text-align: center;
}

.ms-u-mt-09-mb-0 {
  margin-top:0.9rem;
  margin-bottom:0;
}

/* ==================================
         GRID UTILITIES (QC)
         ================================== */
.ms-grid {
  display: grid;
  gap: 1.25rem;
}

.ms-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ms-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ms-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Responsive fallback: collapse to 1 column on small screens */
@media (max-width: 700px) {
  .ms-grid--2,
  .ms-grid--3,
  .ms-grid--4 {
    grid-template-columns: 1fr;
  }
}

/* Optional: soften 4-col to 2-col on medium screens */
@media (max-width: 1024px) {
  .ms-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* ==================================
         HEADER / NAV – GLOBAL
         Used on: Home, Airport, Trips, Stays, Guides, Contact
         ================================== */

      .ms-nav {
        position: sticky;
        top: 0;
        z-index: 100;
        backdrop-filter: blur(10px);
        background-color: rgba(243, 243, 240, 0.96);
        border-bottom: 1px solid rgba(15, 23, 42, 0.04);
      }

      .ms-nav-inner {
        max-width: 1120px;
        margin: 0 auto;
        padding: 0.25rem 1rem 0.4rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
      }

      @media (min-width: 768px) {
        .ms-nav-inner {
          padding-inline: 1.5rem;
        }
      }

      .ms-nav-logo {
        display: flex;
        align-items: flex-end;
        flex-shrink: 0;
      }

      .ms-nav-logo img {
        height: 40px;
        width: auto;
        display: block;
        transform: translateY(4px);
      }

      @media (min-width: 1024px) {
        .ms-nav-logo img {
          height: 52px;
          transform: translateY(7px);
        }
      }

      .ms-nav-links {
        display: none;
        gap: 0.75rem;
        font-size: 0.95rem;
        flex-wrap: nowrap;
        justify-content: center;
        white-space: nowrap;
        flex: 1 1 auto;
      }

      @media (min-width: 900px) {
        .ms-nav-links {
          display: flex;
        }
      }

      .ms-nav-link {
        padding: 0.35rem 0.7rem;
        border-radius: 999px;
        text-decoration: none;
        color: var(--ms-color-text);
        transition:
          background-color 0.12s ease,
          color 0.12s ease;
      }

      .ms-nav-link:hover {
        background: rgba(213, 75, 15, 0.08);
        color: var(--ms-color-primary-dark);
        text-decoration: none;
      }

      .ms-nav-link--active {
        background: var(--ms-color-primary);
        color: #ffffff;
        text-decoration: none;
      }

      .ms-nav-cta {
        flex-shrink: 0;
        font-size: 0.8rem;
        padding-inline: 1.1rem;
        white-space: nowrap;
      }

      @media (max-width: 899px) {
        .ms-nav-cta {
          display: none;
        }
      }

      /* ==================================
         FOOTER – GLOBAL
         Used on: all pages, including flow pages
         ================================== */

      .ms-footer {
        background: var(--ms-color-primary);
        color: rgba(255, 255, 255, 0.88);
        padding-block: 2.5rem 2rem;
        margin-top: 0;
        font-size: 0.9rem;
      }

      .ms-footer a {
        color: rgba(255, 255, 255, 0.88);
        text-decoration: none;
      }

      .ms-footer a:hover {
        color: #ffffff;
      }

      .ms-footer-inner {
        max-width: 1120px;
        margin: 0 auto;
        padding-inline: 1rem;
      }

      @media (min-width: 768px) {
        .ms-footer-inner {
          padding-inline: 1.5rem;
        }
      }

      .ms-footer-grid {
        display: grid;
        gap: 1.75rem;
      }

      @media (min-width: 768px) {
        .ms-footer-grid {
          grid-template-columns: 1.4fr 1fr 1fr;
        }
      }

      .ms-footer-logo-row {
        display: flex;
        align-items: flex-start;
        gap: 0.9rem;
        margin-bottom: 0.75rem;
      }

      .ms-footer-tagline {
        margin: 0;
        color: rgba(255, 255, 255, 0.8);
        font-size: 0.9rem;
      }

      .ms-footer-heading {
        font-size: 0.95rem;
        font-weight: 600;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        margin: 0 0 0.6rem;
        color: rgba(255, 255, 255, 0.7);
      }

      .ms-footer-list {
        list-style: none;
        padding: 0;
        margin: 0;
      }

      .ms-footer-list li {
        margin-bottom: 0.4rem;
      }

      .ms-footer-list li:last-child {
        margin-bottom: 0;
      }

      .ms-footer-contact-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 0.4rem;
      }

      .ms-footer-contact-icon {
        width: 1rem;
        height: 1rem;
        flex-shrink: 0;
      }

      .ms-footer-contact-text {
        color: rgba(255, 255, 255, 0.85);
        font-size: 0.9rem;
      }

      .ms-footer-bottom {
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        margin-top: 2rem;
        padding-top: 1rem;
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        justify-content: space-between;
        align-items: center;
        font-size: 0.8rem;
        color: rgba(255, 255, 255, 0.7);
      }

      /* ===============================
         HOME / AIRPORT – HERO (v8)
         =============================== */

      .ms-section {
        padding-block: var(--ms-spacing-xl);
      }

      @media (min-width: 768px) {
        .ms-section {
          padding-block: var(--ms-spacing-xxl);
        }
      }

      .ms-section--dark {
        background: radial-gradient(circle at top left, #475b66, #1f1f1f);
        color: #ffffff;
      }

      .ms-section--dark p {
        color: rgba(255, 255, 255, 0.9);
      }

      /* Hero base */
      .ms-hero {
        position: relative;
        overflow: hidden;
        background-color: transparent;
        color: #ffffff;
        padding-top: 3.5rem;
        padding-bottom: 1.5rem;
      }

      @media (min-width: 1024px) {
        .ms-hero {
          max-height: 65vh;
        }
      }

      .ms-hero-inner {
        position: relative;
        z-index: 1;
        padding-block: 2.25rem 2.1rem;
      }

      @media (min-width: 768px) {
        .ms-hero-inner {
          padding-block: 2.5rem 2.3rem;
        }
      }

      /* Image + slate overlay
         NOTE: switched to AIRPORT hero images (desktop + mobile) */
      .ms-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image:
          linear-gradient(
            to bottom,
            rgba(26, 39, 48, 0.16) 10%,
            rgba(26, 39, 48, 0.32) 55%,
            rgba(26, 39, 48, 0.64) 88%
          ),
          url("manilastay-new/images/airport/ms-hero-airport-desktop.webp");
        background-size: cover;
        background-position: 50% 65%;
        background-repeat: no-repeat;
        z-index: 0;
      }

      .ms-hero-layout {
        display: grid;
        gap: 2rem;
      }

      @media (min-width: 768px) {
        .ms-hero-layout {
          grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
        }
      }

      @media (min-width: 1024px) {
        .ms-hero-layout {
          align-items: start;
          padding-top: 0rem;
        }
      }

      .ms-heading-xxl {
        font-size: 2.1rem;
        line-height: 1.5;
        letter-spacing: -0.02em;
        margin: 0 0 0.9rem;
      }

      @media (min-width: 768px) {
        .ms-heading-xxl {
          font-size: 2.6rem;
        }
      }

      .ms-hero-tagline {
        font-weight: 600;
        text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
        max-width: 34rem;
        margin-top: 0.6rem;
        margin-bottom: 1.8rem;
        line-height: 2.0;
      }

      .ms-hero-kicker {
        margin-bottom: 0.9rem;
      }

      .ms-hero-form-card {
        background: rgba(12, 20, 28, 0.96);
        border-radius: var(--ms-radius-lg);
        padding: 1.25rem 1.25rem 0.75rem;
        box-shadow: 0 18px 45px rgba(0, 0, 0, 0.55);
        max-width: 380px;
        margin-inline: auto;
      }

      .ms-hero-form-fields {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
      }

      .ms-form-row {
        display: grid;
        gap: 0.75rem;
      }

      .ms-hero-form-card .ms-form-row--two {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      @media (max-width: 340px) {
        .ms-hero-form-card .ms-form-row--two {
          grid-template-columns: 1fr;
        }
      }

      @media (min-width: 900px) {
        .ms-hero-form-card {
          margin-left: auto;
        }
      }

      @media (min-width: 1024px) {
        .ms-hero-form-card {
          margin-top: -4.5rem;
        }
      }

      .ms-stepper {
        display: flex;
        align-items: center;
        gap: 0.35rem;
      }

      .ms-stepper-btn {
        width: 2rem;
        height: 2rem;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.35);
        background: rgba(15, 23, 32, 0.9);
        color: #ffffff;
        font-size: 1.05rem;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        padding: 0;
      }

      .ms-stepper-btn:hover {
        background: rgba(255, 255, 255, 0.08);
      }

      .ms-stepper-input {
        width: 100%;
        max-width: 3.5rem;
        text-align: center;
      }

      .ms-stepper-input::-webkit-outer-spin-button,
      .ms-stepper-input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }

      .ms-stepper-input {
        -moz-appearance: textfield;
      }

      .ms-input,
      .ms-select {
        width: 100%;
        padding: 0.5rem 0.75rem;
        border-radius: var(--ms-radius-sm);
        border: 1px solid rgba(255, 255, 255, 0.28);
        background-color: rgba(10, 18, 26, 0.95);
        color: #ffffff;
        font-size: 0.9rem;
        outline: none;
      }

      .ms-form-group label {
        font-size: 0.9rem;
        color: rgba(255, 255, 255, 0.75);
        font-weight: 500;
        margin-bottom: 0.35rem;
        display: block;
        padding-left: 0.75rem;
      }

      .ms-form-group {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
      }

      .ms-hero-form-footer {
        margin-top: 0.85rem;
      }

      .ms-hero-form-note {
        margin-top: 0.75rem;
        text-align: center;
      }

      .ms-input {
        font-size: 0.85rem;
        color: rgba(255, 255, 255, 0.75);
      }

      .ms-stepper-input {
        font-size: 0.85rem;
      }

      .ms-input::placeholder {
        color: rgba(255, 255, 255, 0.55);
        opacity: 1;
      }

      input[type="date"],
      input[type="time"] {
        color-scheme: dark;
        color: rgba(255, 255, 255, 0.65);
      }

      @media (max-width: 768px) {
        .ms-hero::before {
          background-image:
            linear-gradient(
              to bottom,
              rgba(26, 39, 48, var(--ms-hero-overlay-opacity)) 10%,
              rgba(26, 39, 48, 0.40) 55%,
              rgba(26, 39, 48, 0.64) 88%
            ),
            url("manilastay-new/images/airport/ms-hero-airport-mobile.webp");
          background-position: 50% 50%;
        }
      }

      /* ===============================
         TRUST TILES & SERVICES
         =============================== */

      .ms-trust-grid,
      .ms-services-grid {
        display: grid;
        gap: 1.5rem;
      }

      @media (min-width: 768px) {
        .ms-trust-grid,
        .ms-services-grid {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }
      }

      .ms-trust-card,
      .ms-services-card {
        background: #ffffff;
        border-radius: 1.1rem;
        padding: 1.6rem 1.8rem 1.5rem;
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.06);
        border: 1px solid rgba(0, 0, 0, 0.04);
      }

      /* Route/pricing cards: desktop whole-card click, mobile CTA-only click */
      .ms-route-card {
        position: relative;
        transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
      }

      .ms-card-overlay {
        position: absolute;
        inset: 0;
        border-radius: inherit;
        z-index: 1;
        display: none; /* enabled on desktop only */
      }

      .ms-card-content {
        position: relative;
        z-index: 2;
      }

      /* Keep the CTA as the explicit tap target */
      .ms-card-microcta-row {
        display: flex;
        justify-content: flex-end;
        margin-top: 0.8rem;
      }

      .ms-card-microcta-link {
        color: inherit;
        text-decoration: none;
        font-weight: 600;
        line-height: 1.2;
      }

      .ms-card-microcta-link:focus-visible {
        outline: 3px solid rgba(213, 75, 15, 0.35);
        outline-offset: 3px;
        border-radius: 0.4rem;
      }

      /* Desktop: card is clickable and tactile */
      @media (hover: hover) and (pointer: fine) {
        .ms-card-overlay { display: block; }
        .ms-card-content { pointer-events: none; } /* allow overlay to receive clicks */
        .ms-card-microcta-link { pointer-events: auto; }

        .ms-route-card:hover {
          transform: translateY(-2px);
          border-color: rgba(15, 23, 42, 0.22);
          box-shadow: 0 20px 52px rgba(15, 23, 42, 0.12);
        }

        /* Use the primary pill color as the hover accent (matches Custom quote pill) */
        .ms-route-card:hover .ms-badge {
          background: var(--ms-color-primary);
          color: #ffffff;
          border-color: rgba(213, 75, 15, 0.0);
        }

        .ms-route-card:hover .ms-card-microcta-link {
          color: var(--ms-color-primary);
        }
      }

      /* Touch/mobile: disable whole-card click, make CTA row a comfy tap strip */
      @media (hover: none) and (pointer: coarse) {
        .ms-card-overlay { display: none; }
        .ms-card-content { pointer-events: auto; }

        .ms-card-microcta-link {
          display: inline-flex;
          align-items: center;
          min-height: 44px;
          padding: 0.2rem 0;
          text-decoration: underline;
          text-underline-offset: 3px;
          text-decoration-thickness: 1px;
        }
      }

      .ms-trust-header,
      .ms-services-header {
        display: flex;
        align-items: center;
        gap: 0.85rem;
        margin-bottom: 0.7rem;
      }

      .ms-trust-icon,
      .ms-services-icon {
        width: 32px;
        height: 32px;
        flex-shrink: 0;
        transform: translateY(1px);
      }

      .ms-trust-title,
      .ms-services-title {
        margin: 0;
        font-size: 1.08rem;
        font-weight: 600;
        letter-spacing: -0.01em;
        color: var(--ms-color-text);
      }

      .ms-trust-body,
      .ms-services-body {
        margin: 0;
        font-size: 0.9rem;
        line-height: 1.5;
      }

      /* ==================================
         AIRPORT: Clickable route/price cards (v11.3)
         ================================== */

      a.ms-card-microcta {
        margin-top: 0.9rem;
        text-align: right;
        font-size: 0.9rem;
        font-weight: 600;
      }
      /* ==================================
         HOME – Services, Why Choose, Testimonials, FAQ
         (reused here on Airport page)
         ================================== */

      .ms-section--standard {
        background: #ffffff;
        padding-top: 2.5rem;
        padding-bottom: 3rem;
      }

      @media (min-width: 768px) {
        .ms-section--standard {
          padding-top: 3rem;
          padding-bottom: 3.5rem;
        }
      }

      .ms-section-heading {
        text-align: center;
        margin-bottom: 0.35rem;
      }

      .ms-section-subheading {
        text-align: center;
        margin: 0 0 2rem;
      }

      .ms-testimonials-grid {
        display: grid;
        gap: 1.5rem;
      }

      @media (min-width: 768px) {
        .ms-testimonials-grid {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }
      }

      .ms-testimonial-card {
        background: #ffffff;
        border-radius: 18px;
        box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
        padding: 1.35rem 1.35rem 1.2rem;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
      }

      @media (min-width: 1024px) {
        .ms-testimonial-card {
          padding: 1.5rem 1.7rem 1.35rem;
        }
      }

      .ms-testimonial-text {
        margin: 0;
        font-size: 0.95rem;
        line-height: 1.6;
        color: var(--ms-color-text);
      }

      .ms-testimonial-name {
        margin: 0.5rem 0 0;
        font-weight: 600;
      }

      .ms-testimonial-meta {
        margin: 0;
        font-size: 0.85rem;
      }

      .ms-stars {
        display: flex;
        gap: 4px;
        margin-bottom: 0.75rem;
      }

      .ms-star-icon {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
        display: block;
      }

      @media (max-width: 480px) {
        .ms-star-icon {
          width: 18px;
          height: 18px;
        }
      }

      .ms-faq-list {
        max-width: 760px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
      }

      .ms-faq-item {
        background: #ffffff;
        border-radius: 12px;
        border: 1px solid var(--ms-color-border-soft);
        padding: 0.75rem 1rem;
      }

      .ms-faq-item > summary {
        cursor: pointer;
        font-weight: 600;
        list-style: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
      }

      .ms-faq-item > summary::-webkit-details-marker {
        display: none;
      }

      .ms-faq-question {
        flex: 1;
      }

      .ms-faq-chevron {
        width: 18px;
        height: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .ms-faq-chevron::before {
        content: "";
        display: block;
        width: 10px;
        height: 10px;
        border-right: 2px solid var(--ms-color-text);
        border-bottom: 2px solid var(--ms-color-text);
        transform: rotate(45deg);
        transition: transform 0.18s ease;
      }

      .ms-faq-item[open] .ms-faq-chevron::before {
        transform: rotate(-135deg);
      }

      .ms-faq-cta {
        margin: 0.5rem 0 0;
        font-size: 0.9rem;
      }

      .ms-faq-cta a {
        color: var(--ms-color-accent);
        text-decoration: none;
        font-weight: 600;
      }

      .ms-faq-cta a:hover {
        text-decoration: underline;
      }

      .ms-faq-item > p {
        margin: 0.5rem 0 0;
        font-size: 0.9rem;
}

      /* ===============================
         MOBILE NAV + LOGO TWEAKS
         =============================== */

      .ms-nav-toggle {
        display: none;
        border: none;
        background: transparent;
        padding: 0.25rem;
        margin-left: auto;
        cursor: pointer;
      }

      .ms-nav-toggle img {
        display: block;
        width: 26px;
        height: 26px;
      }

      @media (max-width: 900px) {
        .ms-nav-inner {
          padding: 0.5rem 1.1rem 0.6rem;
        }

        .ms-nav-logo img {
          height: 44px;
          transform: translateY(6px);
        }

        .ms-nav-toggle {
          display: inline-flex;
          align-items: center;
          justify-content: center;
        }

        .ms-nav-cta {
          display: none;
        }

        .ms-nav-inner {
          position: relative;
        }

        .ms-nav-links {
          position: absolute;
          top: 100%;
          right: 0;
          left: auto;
          margin-top: 0.25rem;
          width: 62vw;
          max-width: 280px;
          padding: 0.6rem 0.7rem 0.75rem;
          background-color: rgba(12, 20, 28, 0.97);
          box-shadow: 0 18px 35px rgba(15, 23, 42, 0.6);
          border-radius: 0 0 0 18px;
          flex-direction: column;
          gap: 0.25rem;
          font-size: 0.95rem;
          color: #ffffff;
        }

        .ms-nav.ms-nav--open .ms-nav-links {
          display: flex;
        }

        .ms-nav-link {
          padding: 0.45rem 0.9rem;
          color: #ffffff;
          border-radius: 999px;
        }

        .ms-nav-link:hover {
          background-color: rgba(255, 255, 255, 0.08);
          color: #ffffff;
        }
      }
    
  /* AIRPORT: Vehicle tiles (reusing existing card styles) */
  
/* AIRPORT: Vehicle tiles (transparent PNG/WebP friendly — no cropping) */
.ms-vehicle-card {
  text-align: left;
  padding: 1.1rem 1.5rem 1.6rem;
}

/* Use a responsive box (not a fixed height) so mobile doesn’t crop unexpectedly */
.ms-vehicle-media {
  width: 100%;
  aspect-ratio: 3 / 2;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0.75rem;
  margin-bottom: 0.75rem;
  background: #ffffff;
  border-radius: 0.9rem;
}

.ms-vehicle-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;      /* key: show the full vehicle */
  object-position: center;  /* keep it centered */
  display: block;
  transform: none;          /* disable old per-vehicle transforms */
}

/* Legacy per-vehicle transform rules are neutralized by transform:none above */

  .ms-services-meta {
    font-size: 0.88rem;
    margin-top: -0.15rem;
    margin-bottom: 0.5rem;
  }

  .ms-vehicles-note {
    margin-top: 1.25rem;
    text-align: center;
    font-size: 0.85rem;
  }

  /* What's included grid (v7-style inside v9 cards) */
  
  .ms-included-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 2.5rem;
    row-gap: 3rem;
  }

  .ms-included-item {
    padding: 0 1.5rem;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    text-align: center;
  }

  .ms-included-icon {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
  }

  .ms-included-icon img {
    width: 100%;
    max-width: 3.25rem;
    height: auto;
  }

@media (max-width: 900px) {
    .ms-vehicle-media {
      padding: 0.65rem;
    }

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

  @media (max-width: 520px) {
    .ms-included-grid {
      grid-template-columns: 1fr;
    }
  }

      /* Layout grid helpers (borrowed from v7) */
      .ms-grid {
        display: grid;
        gap: var(--ms-spacing-lg);
      }

      .ms-grid-4 {
        grid-template-columns: 1fr;
      }

      @media (min-width: 768px) {
        .ms-grid-4 {
          grid-template-columns: repeat(4, minmax(0, 1fr));
        }
      }
    

      /* Simple center helper */
      .ms-center {
        text-align: center;
      }
    

      /* Numbered circle for step indicators */
      .ms-icon-circle {
        width: 3.5rem;
        height: 3.5rem;
        border-radius: 999px;
        background: rgba(71, 91, 102, 0.08);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        margin: 0 auto 0.75rem;
      }
    


/* ===== Source fidelity layer ===== */


/* ==================================
   DESIGN TOKENS – ManilaStay v9
   Shared across: Home, Airport, Trips, Stays, Guides, Contact
   ================================== */

:root {
  /* Brand colors */
  --ms-color-bg: #ffffff;           /* Primary background */
  --ms-color-bg-soft: #f3f3f0;      /* Warm grey secondary background */
  --ms-color-text: #1f1f1f;         /* Primary text */
  --ms-color-primary: #475b66;      /* Slate for nav, footer, subtle UI */
  --ms-color-primary-dark: #32424b; /* Deeper slate for strong accents */
  --ms-color-accent: #d54b0f;       /* Burnt orange CTA */

  /* New theme color: hero card background (v8 booking form card) */
  --ms-color-hero-card: #0c141c;

  /* Supporting tokens */
  --ms-color-border-soft: rgba(15, 23, 42, 0.08);
  --ms-color-muted: rgba(31, 31, 31, 0.7);

  --ms-radius-sm: 6px;
  --ms-radius-md: 10px;
  --ms-radius-lg: 16px;

  --ms-shadow-soft: 0 12px 30px rgba(15, 23, 42, 0.12);

  --ms-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;

  --ms-hero-overlay-opacity: 0.30;

  /* Spacing tokens from v8.1 */
  --ms-spacing-xs: 0.5rem;
  --ms-spacing-sm: 0.75rem;
  --ms-spacing-md: 1rem;
  --ms-spacing-lg: 1.5rem;
  --ms-spacing-xl: 2rem;
  --ms-spacing-xxl: 3rem;
}

/* ==================================
   TYPOGRAPHY & UTILITIES (from v8.1)
   ================================== */
.ms-heading-lg {
  font-size: 1.5rem;
  margin: 0 0 0.75rem;
}

.ms-text-lg {
  font-size: 1.125rem;
}

.ms-text-sm {
  font-size: 0.875rem;
}

.ms-text-xs {
  font-size: 0.75rem;
}

.ms-muted {
}

/* Badge styles (Curated Stays) */
.ms-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.ms-badge--accent {
  background: var(--ms-color-accent);
  color: #ffffff;
  border: none;
}

/* Visually hidden helper for accessibility */
.ms-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Full-width button helper */
.ms-btn--full {
  width: 100%;
}

/* ==================================
   GLOBAL RESET + BASE
   ================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--ms-font-sans);
  background-color: var(--ms-color-bg);
  color: var(--ms-color-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--ms-color-accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

main {
  min-height: 60vh;
}

.ms-container {
  max-width: 1120px;
  margin: 0 auto;
  padding-inline: 1rem;
}

@media (min-width: 768px) {
  .ms-container {
    padding-inline: 1.5rem;
  }
}

/* ==================================
   BUTTONS
   ================================== */

.ms-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  font-size: 0.9rem;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease,
    border-color 0.15s ease;
  white-space: nowrap;
}

.ms-btn--primary {
  background-color: var(--ms-color-accent);
  color: #ffffff;
  box-shadow: 0 10px 25px rgba(213, 75, 15, 0.35);
}

.ms-btn--primary:hover {
  background-color: #b13e0c;
  color: #ffffff;
  box-shadow: 0 14px 32px rgba(213, 75, 15, 0.4);
  text-decoration: none;
}

.ms-btn--ghost {
  background-color: transparent;
  color: var(--ms-color-primary-dark);
  border-color: rgba(71, 91, 102, 0.4);
}

.ms-btn--ghost:hover {
  background-color: rgba(71, 91, 102, 0.06);
  text-decoration: none;
}

/* ==================================
         INLINE STYLE UTILITIES (QC)
         ================================== */
.ms-u-list-compact {
  margin-top:0.6rem;
  margin-bottom:0;
  padding-left:1.1rem;
}

.ms-u-m0 {
  margin:0;
}

.ms-u-divider-top {
  margin-top:0.85rem;
  padding-top:0.85rem;
  border-top:1px solid var(--ms-color-border-soft);
}

.ms-u-strong-primary {
  font-weight:700;
  color:var(--ms-color-primary);
  line-height:1.2;
}

.ms-u-text-lg {
  font-size:1.15rem;
}

.ms-u-info-box {
  margin-bottom:2rem;
  background: rgba(71,91,102,0.08);
  color: var(--ms-color-primary);
  border: 1px solid rgba(71,91,102,0.14);
}

.ms-u-banner-primary {
  margin-bottom:2rem;
  background: var(--ms-color-primary);
  color:#ffffff;
}

.ms-u-center-mt-2 {
  margin-top: 2rem;
  text-align: center;
}

.ms-u-mt-09-mb-0 {
  margin-top:0.9rem;
  margin-bottom:0;
}

/* ==================================
         GRID UTILITIES (QC)
         ================================== */
.ms-grid {
  display: grid;
  gap: 1.25rem;
}

.ms-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ms-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ms-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Responsive fallback: collapse to 1 column on small screens */
@media (max-width: 700px) {
  .ms-grid--2,
  .ms-grid--3,
  .ms-grid--4 {
    grid-template-columns: 1fr;
  }
}

/* Optional: soften 4-col to 2-col on medium screens */
@media (max-width: 1024px) {
  .ms-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* ==================================
   HEADER / NAV – GLOBAL
   Used on: Home, Airport, Trips, Stays, Guides, Contact
   Flow pages (booking / payment) have a slight CTA variant.
   ================================== */

.ms-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(10px);
  background-color: rgba(243, 243, 240, 0.96);
  border-bottom: 1px solid rgba(15, 23, 42, 0.04);
}

.ms-nav-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0.25rem 1rem 0.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

@media (min-width: 768px) {
  .ms-nav-inner {
    padding-inline: 1.5rem;
  }
}

.ms-nav-logo {
  display: flex;
  align-items: flex-end;
  flex-shrink: 0;
}

.ms-nav-logo img {
  height: 40px;
  width: auto;
  display: block;
  transform: translateY(4px);
}

@media (min-width: 1024px) {
  .ms-nav-logo img {
    height: 52px;
    transform: translateY(7px);
  }
}

.ms-nav-links {
  display: none;
  gap: 0.75rem;
  font-size: 0.95rem;
  flex-wrap: nowrap;
  justify-content: center;
  white-space: nowrap;
  flex: 1 1 auto;
}

@media (min-width: 900px) {
  .ms-nav-links {
    display: flex;
  }
}

.ms-nav-link {
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  text-decoration: none;
  color: var(--ms-color-text);
  transition:
    background-color 0.12s ease,
    color 0.12s ease;
}

.ms-nav-link--active {
  background: var(--ms-color-primary);
  color: #ffffff;
}

.ms-nav-link:hover {
  background: rgba(213, 75, 15, 0.08);
  color: var(--ms-color-primary-dark);
  text-decoration: none;
}

.ms-nav-link--active {
  background: var(--ms-color-primary);
  color: #ffffff;
  text-decoration: none;
}

.ms-nav-cta {
  flex-shrink: 0;
  font-size: 0.8rem;
  padding-inline: 1.1rem;
  white-space: nowrap;
}

/* ===============================
   MOBILE NAV + LOGO TWEAKS
   =============================== */
.ms-nav-toggle {
  display: none;
  border: none;
  background: transparent;
  padding: 0.25rem;
  margin-left: auto;
  cursor: pointer;
}

.ms-nav-toggle img {
  display: block;
  width: 26px;
  height: 26px;
}

@media (max-width: 900px) {
  .ms-nav-inner {
    padding: 0.5rem 1.1rem 0.6rem;
  }

  .ms-nav-logo img {
    height: 44px;
    transform: translateY(6px);
  }

  .ms-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .ms-nav-cta {
    display: none;
  }

  .ms-nav-inner {
    position: relative;
  }

  .ms-nav-links {
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    margin-top: 0.25rem;
    width: 62vw;
    max-width: 280px;
    padding: 0.6rem 0.7rem 0.75rem;
    background-color: rgba(12, 20, 28, 0.97);
    box-shadow: 0 18px 35px rgba(15, 23, 42, 0.6);
    border-radius: 0 0 0 18px;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.95rem;
    color: #ffffff;
  }

  .ms-nav.ms-nav--open .ms-nav-links {
    display: flex;
  }

  .ms-nav-link {
    padding: 0.45rem 0.9rem;
    color: #ffffff;
    border-radius: 999px;
  }

  .ms-nav-link:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: #ffffff;
  }
}

/* ==================================
   FOOTER – GLOBAL
   Used on: all pages, including flow pages
   ================================== */

.ms-footer {
  background: var(--ms-color-primary);
  color: rgba(255, 255, 255, 0.88);
  padding-block: 2.5rem 2rem;
  margin-top: 0;
  font-size: 0.9rem;
}

.ms-footer a {
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
}

.ms-footer a:hover {
  color: #ffffff;
}

.ms-footer-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding-inline: 1rem;
}

@media (min-width: 768px) {
  .ms-footer-inner {
    padding-inline: 1.5rem;
  }
}

.ms-footer-grid {
  display: grid;
  gap: 1.75rem;
}

@media (min-width: 768px) {
  .ms-footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}

.ms-footer-logo-row {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  margin-bottom: 0.75rem;
}

.ms-footer-tagline {
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
}

.ms-footer-heading {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0 0 0.6rem;
  color: rgba(255, 255, 255, 0.7);
}

.ms-footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ms-footer-list li {
  margin-bottom: 0.4rem;
}

.ms-footer-list li:last-child {
  margin-bottom: 0;
}

.ms-footer-contact-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.ms-footer-contact-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.ms-footer-contact-text {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
}

.ms-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 2rem;
  padding-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
}
 
/* ==================================
   PAGE-SPECIFIC STYLES – Contact (flow layout aligned with Booking/Payment)
   ================================== */

    .ms-page {
      padding-block: var(--ms-spacing-xl);
    }

    @media (min-width: 768px) {
      .ms-page {
        padding-block: var(--ms-spacing-xxl);
      }
    }

    .ms-booking-layout {
      display: grid;
      gap: 1.75rem;
      align-items: flex-start;
    }

    @media (min-width: 900px) {
      .ms-booking-layout {
        grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.1fr);
      }
    }

    .ms-page-title {
      font-size: 1.6rem;
      margin: 0 0 0.2rem;
      letter-spacing: -0.02em;
    }

    .ms-page-subtitle {
      margin: 0 0 1.5rem;
      font-size: 0.95rem;
    }

    .ms-card {
      background: #ffffff;
      border-radius: 1.1rem;
      padding: 1.8rem 1.6rem 1.7rem;
      box-shadow: 0 18px 40px rgba(0, 0, 0, 0.06);
      border: 1px solid rgba(0, 0, 0, 0.035);
    }

    .ms-card--soft {
      background: #ffffff;
    }

    .ms-form-grid {
      display: grid;
      gap: 1rem;
    }

    .ms-form-row {
      display: grid;
      gap: 0.75rem;
    }

    .ms-form-row--two {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ms-form-row--three {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    @media (max-width: 680px) {
      .ms-form-row--two,
      .ms-form-row--three {
        grid-template-columns: 1fr;
      }
    }

    .ms-form-divider {
      height: 1px;
      background: rgba(0, 0, 0, 0.06);
      margin: 0.25rem 0;
    }

    .ms-form-section-title {
      font-size: 1rem;
      letter-spacing: 0.02em;
      margin: 0.25rem 0 0.2rem;
      color: rgba(31, 31, 31, 0.9);
    }

    .ms-form-section {
      padding: 0.35rem 0 0.1rem;
    }

    .ms-form-hint {
      font-size: 0.82rem;
      color: rgba(31, 31, 31, 0.65);
      margin: 0.35rem 0 0;
      line-height: 1.35;
    }

    .ms-honeypot {
      position: absolute;
      left: -9999px;
      width: 1px;
      height: 1px;
      overflow: hidden;
    }

    .ms-form-status {
      margin: 0.5rem 0 0;
      font-size: 0.85rem;
      color: rgba(31, 31, 31, 0.75);
    }

    .ms-form-group {
      display: flex;
      flex-direction: column;
    }

    .ms-form-group-label {
      font-size: 0.85rem;
      color: rgba(31, 31, 31, 0.75);
      font-weight: 500;
      margin-bottom: 0.3rem;
      padding-left: 0.15rem;
    }

    .ms-input {
      width: 100%;
      padding: 0.55rem 0.75rem;
      border-radius: var(--ms-radius-sm);
      border: 1px solid rgba(71, 91, 102, 0.28);
      background-color: #ffffff;
      color: var(--ms-color-text);
      font-size: 0.9rem;
      outline: none;
    }

    .ms-input::placeholder {
      color: rgba(31, 31, 31, 0.45);
      opacity: 1;
    }

    .ms-input:focus {
      border-color: var(--ms-color-accent);
      box-shadow: 0 0 0 1px rgba(213, 75, 15, 0.35);
    }

    /* Make the required service dropdown feel "must choose" when empty */
textarea.ms-input {
      resize: vertical;
      min-height: 3.2rem;
    }

    .ms-form-footer {
      margin-top: 1.5rem;
      display: flex;
      flex-direction: column;
      gap: 0.6rem;
    }

    /* ==================================
       Custom dropdown – Contact "What are you interested in?"
       ================================== */
    .ms-select {
      position: relative;
      width: 100%;
    }

    .ms-select-trigger {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;

      padding: 0.55rem 2.85rem 0.55rem 0.75rem; /* extra right padding for chevron */
      border-radius: var(--ms-radius-sm);
      border: 1px solid rgba(71, 91, 102, 0.28);

      background-color: var(--ms-color-primary);
      color: #ffffff;
      font-size: 0.9rem;
      line-height: 1.3;
      text-align: left;

      cursor: pointer;
      outline: none;
      position: relative;
    }

    .ms-select-trigger:focus {
      border-color: rgba(255, 255, 255, 0.7);
      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
    }

    .ms-select[aria-expanded="true"] .ms-select-trigger:focus {
      border-color: rgba(71, 91, 102, 0.45);
      box-shadow: 0 0 0 1px rgba(71, 91, 102, 0.22);
    }

    .ms-select-value {
      flex: 1;
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .ms-select-chevron {
      position: absolute;
      right: 0.95rem; /* more right margin */
      width: 22px;
      height: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .ms-select-chevron::before {
      content: "";
      display: block;
      width: 12px;
      height: 12px;
      border-right: 2.5px solid #ffffff;
      border-bottom: 2.5px solid #ffffff;
      transform: rotate(45deg);
      transition: transform 0.18s ease;
    }

    .ms-select[aria-expanded="true"] .ms-select-chevron::before {
      transform: rotate(-135deg);
    }

    /* When open, the trigger becomes 'browsing' (white/black), and chevron turns slate */
    .ms-select[aria-expanded="true"] .ms-select-trigger {
      background-color: #ffffff;
      color: var(--ms-color-text);
      border-color: rgba(71, 91, 102, 0.28);
    }

    .ms-select[aria-expanded="true"] .ms-select-chevron::before {
      border-right-color: var(--ms-color-primary);
      border-bottom-color: var(--ms-color-primary);
    }

    .ms-select-menu {
      position: absolute;
      left: 0;
      right: 0;
      top: calc(100% + 0.35rem);
      z-index: 50;

      background: #ffffff;
      border: 1px solid var(--ms-color-border-soft);
      border-radius: 14px;
      box-shadow: 0 18px 40px rgba(0, 0, 0, 0.10);

      padding: 0.35rem;
    }

    .ms-select-option {
      padding: 0.55rem 0.75rem;
      font-size: 0.9rem;
      line-height: 1.3;
      border-radius: 12px;
      color: var(--ms-color-text);
      cursor: pointer;
      user-select: none;
    }

    .ms-select-option:hover,
    .ms-select-option:focus {
      background: var(--ms-color-primary);
      color: #ffffff;
      outline: none;
    }

    /* Placeholder behaves like a normal option (we control highlight via .is-active) */
    .ms-select-option--placeholder {
      cursor: default;
    }

    .ms-select-option.is-active {
      background: var(--ms-color-primary);
      color: #ffffff;
    }

    .ms-form-error {
      margin-top: 0.35rem;
      font-size: 0.85rem;
      color: #b42318;
    }


    /* ==================================
       FAQ – match index.html styles
       ================================== */
.ms-faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ms-faq-item {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid var(--ms-color-border-soft);
  padding: 0.75rem 1rem;
}

.ms-faq-item > summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.ms-faq-item > summary::-webkit-details-marker {
  display: none;
}

.ms-faq-question {
  flex: 1;
}

.ms-faq-chevron {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ms-faq-chevron::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--ms-color-text);
  border-bottom: 2px solid var(--ms-color-text);
  transform: rotate(45deg);
  transition: transform 0.18s ease;
}

/* Rotate chevron when the FAQ item is open */
.ms-faq-item[open] .ms-faq-chevron::before {
  transform: rotate(-135deg);
}

.ms-faq-cta {
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
}

.ms-faq-cta a {
  color: var(--ms-color-accent);
  text-decoration: none;
  font-weight: 600;
}




    .ms-form-disclaimer {
      font-size: 0.78rem;
      text-align: center;
    }

    .ms-contact-sidebar {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .ms-contact-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .ms-contact-list-item {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-bottom: 0.5rem;
      font-size: 0.9rem;
    }

    .ms-contact-list-item img {
      width: 1rem;
      height: 1rem;
      flex-shrink: 0;
    }

    .ms-contact-note {
      font-size: 0.78rem;
      margin-top: 0.75rem;
    }

    .ms-contact-side-title {
      font-size: 1rem;
      font-weight: 600;
      color: var(--ms-color-primary);
      margin-bottom: 1.65rem;
    }

    .ms-contact-checklist {
      margin: 0;
      padding-left: 1.1rem;
      font-size: 0.9rem;
    }

    .ms-contact-checklist li {
      margin-bottom: 0.4rem;
    }


/* === Theme scaffolding fallbacks for missing media assets === */
.ms-nav-logo {
  display: inline-flex;
  align-items: center;
  font-weight: 800;
  font-size: 1.125rem;
  color: #ffffff;
  text-decoration: none;
  letter-spacing: 0.01em;
}
.ms-nav-logo-text { display: inline-block; }
.ms-nav-toggle .ms-nav-toggle-icon { display: inline-block; font-size: 1.25rem; line-height: 1; }
.ms-services-icon-fallback,
.ms-included-icon-fallback,
.ms-footer-contact-icon-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(71, 91, 102, 0.12);
}
.ms-services-icon-fallback { width: 2.25rem; height: 2.25rem; }
.ms-included-icon-fallback { width: 3rem; height: 3rem; background: rgba(213, 75, 15, 0.08); }
.ms-footer-contact-icon-fallback { width: 1rem; height: 1rem; }
.ms-stars-text { letter-spacing: 0.12em; color: var(--ms-color-accent); font-size: 0.95rem; }
.ms-card-overlay { text-decoration: none; }
@media (max-width: 980px) {
  .ms-nav-links { display: none; }
  .ms-nav-links.is-open { display: flex; flex-direction: column; width: 100%; }
}