/* ==========================================================================
   Summit Hospitality - site stylesheet
   --------------------------------------------------------------------------
   This is the approved homepage's stylesheet, extracted VERBATIM so the
   service pages inherit the exact same type scale, colours, spacing,
   buttons, breakpoints and animations rather than a re-implementation.
   The only edits are asset URLs made absolute (the file is served from
   /style/, the homepage served them relative to /).
   Service-page-only additions live in summit-service.css, loaded after.
   ========================================================================== */

    @font-face {
      font-family: 'SummitHeading';
      src: url('/fonts/heading-font.woff2') format('woff2');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'SummitBody';
      src: url('/fonts/body-font.woff2') format('woff2');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }

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

    :root {
      --dark-teal: rgb(17, 56, 74);
      --medium-teal: rgb(24, 86, 104);
      --button-teal: rgb(82, 128, 142);
      --light-bg: rgb(197, 213, 217);
      --lighter-bg: rgb(197, 213, 217);
      --white: #FFFFFF;
      --font-heading: 'SummitHeading', 'Times New Roman', Georgia, serif;
      --font-body: 'SummitBody', 'Helvetica Neue', Helvetica, Arial, sans-serif;

      /* ---- Fluid type & spacing scale (used in <=768px viewports) ----
         clamp(MIN, PREFERRED-vw, MAX) — scales smoothly with viewport width
         so headings, body and buttons shrink on narrow phones instead of
         clipping or wrapping. MAX matches the legacy fixed mobile sizes. */
      --fs-display: clamp(38px, 13vw, 54px);   /* hero display heading */
      --fs-h2:      clamp(28px, 9.6vw, 42px);  /* section headings */
      --fs-h3:      clamp(28px, 9.6vw, 40px);  /* card subheadings */
      --fs-stat:    clamp(30px, 10vw, 52px);   /* stat numbers */
      --fs-nav:     clamp(22px, 7vw, 31px);    /* fullscreen nav links */
      --fs-lead:    clamp(17px, 5.6vw, 23px);  /* hero subtext */
      --fs-body:    clamp(16px, 5.4vw, 21px);  /* body paragraphs */
      --fs-button:  clamp(15px, 5vw, 24px);    /* button labels */
      --fs-small:   clamp(16px, 4.6vw, 20px);  /* small links */

      --lh-tight:   1.18;
      --lh-body:    1.45;

      --btn-pad-x:  clamp(18px, 7vw, 36px);
      --btn-h:      clamp(48px, 13.5vw, 60px);
      --sec-pad-x:  clamp(16px, 6vw, 24px);

      /* ---- Large-screen shell ----
         Caps the CONTENT column so wide monitors show the same balanced
         composition as a laptop, instead of content drifting left (or
         stretching apart) into empty space. Section backgrounds stay
         full-bleed — only the content inside them is centred.

         --shell-x  = the original 80px gutter until the viewport passes
                      --shell, then it grows to keep content centred.
         --shell-x0 = same with no minimum gutter, for full-bleed splits.

         Both are a strict no-op at or below --shell: the calc() is negative
         there, so max() returns the original gutter and nothing moves.
         Uses 100% (containing block) rather than 100vw so a desktop
         scrollbar can't push the content column off-centre. */
      --shell:    1440px;
      --shell-x:  max(80px, calc((100% - var(--shell)) / 2));
      --shell-x0: max(0px,  calc((100% - var(--shell)) / 2));
    }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    html {
      scroll-behavior: auto;
    }

    html {
      overflow-x: hidden;
    }

    body {
      font-family: var(--font-body);
      color: var(--dark-teal);
      line-height: 1.4;
    }

    /* ===== HEADER ===== */
    .header-wrapper {
      position: sticky;
      top: 0;
      z-index: 100;
      margin: 0 5.5% -50px;
      transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .header-wrapper.header-hidden {
      transform: translateY(-150%);
    }

    .site-header {
      background-color: var(--dark-teal);
      height: 112px;
      display: flex;
      align-items: center;
      padding: 0 107px 0 28px;
    }

    .header-logo {
      flex-shrink: 0;
    }

    .header-logo img {
      width: 256px;
      height: auto;
    }

    .header-nav {
      display: flex;
      align-items: center;
      gap: 32px;
      margin-left: auto;
    }

    .header-nav a {
      font-family: var(--font-body);
      font-size: 14px;
      color: var(--white);
      text-decoration: none;
      letter-spacing: normal;
      -webkit-font-smoothing: antialiased;

    }

    .header-nav a:hover {
      opacity: 0.7;
    }

    .header-nav .btn-partner {
      background-color: var(--button-teal);
      color: var(--white);
      width: 176px;
      height: 112px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-family: var(--font-heading);
      text-decoration: none;
      letter-spacing: normal;
      -webkit-font-smoothing: antialiased;
      font-weight: 300;
      flex-shrink: 0;

    }

    .header-nav .btn-partner:hover {
      background-color: #6a9aaa;
      opacity: 1;
    }

    .mobile-toggle {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      padding: 10px;
      z-index: 110;
    }

    .mobile-toggle span {
      display: block;
      width: 24px;
      height: 2px;
      background: var(--white);
      transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                  opacity 0.2s ease;
      transform-origin: center;
    }

    .mobile-toggle.active span:nth-child(1) {
      transform: translateY(7px) rotate(45deg);
    }
    .mobile-toggle.active span:nth-child(2) {
      opacity: 0;
      transform: scaleX(0);
    }
    .mobile-toggle.active span:nth-child(3) {
      transform: translateY(-7px) rotate(-45deg);
    }

    /* ===== HERO ===== */
    .hero {
      position: relative;
      width: 100%;
      height: 769px;
      overflow: hidden;
      margin-top: -30px;
    }

    .hero-bg {
      position: absolute;
      inset: 0;
      background-image: url('/images/hero-mountain.jpg');
      background-size: cover;
      background-position: center;
    }

    .hero-overlay {
      display: none;
    }

    .hero-content {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
      text-align: center;
      padding: 40px 40px 40px;
      max-width: 900px;
      margin: 0 auto;
    }

    .hero-h1-mask {
      overflow: hidden;
      margin-bottom: 30px;
    }

    @keyframes slideUpTransform {
      from { transform: translateY(100%); }
      to { transform: translateY(0); }
    }

    @keyframes slideUpOpacity {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    .hero .hero-visual-heading {
      font-family: var(--font-heading);
      font-size: 97px;
      font-weight: 300;
      color: var(--white);
      line-height: 106.7px;
      letter-spacing: 3.88px;
      -webkit-font-smoothing: antialiased;
      margin-bottom: 0;
      transform: translateY(100%);
      opacity: 0;
      animation:
        slideUpTransform 1.8s cubic-bezier(0.87, 0, 0.13, 1) forwards,
        slideUpOpacity 1.8s cubic-bezier(0.37, 0, 0.63, 1) forwards;
    }

    .hero p {
      font-family: var(--font-body);
      font-size: 20px;
      color: var(--white);
      line-height: 28px;
      max-width: 663px;
      -webkit-font-smoothing: antialiased;
    }

    /* ===== SECTION: COMPREHENSIVE HOUSEKEEPING ===== */
    .section-housekeeping {
      background: var(--white);
      padding: 80px var(--shell-x) 40px;
    }

    .section-housekeeping .content-wrapper {
      max-width: 967px;
    }

    .section-housekeeping h2 {
      font-family: var(--font-heading);
      font-size: 55px;
      font-weight: 400;
      color: var(--medium-teal);
      line-height: 77px;
      -webkit-font-smoothing: antialiased;
      margin-bottom: 40px;
    }

    .section-housekeeping p {
      font-size: 17px;
      line-height: 23.8px;
      color: var(--dark-teal);
      -webkit-font-smoothing: antialiased;
      margin-bottom: 30px;
    }

    .btn-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 240px;
      height: 60px;
      background-color: var(--medium-teal);
      color: var(--white);
      font-family: var(--font-heading);
      font-size: 24px;
      font-weight: 400;
      text-decoration: none;
      -webkit-font-smoothing: antialiased;

    }

    .btn-cta:hover {
      background-color: var(--dark-teal);
    }

    .btn-call {
      background-color: var(--button-teal);
    }

    @media (hover: hover) {
      .btn-call:hover {
        background-color: var(--medium-teal);
      }
    }

    @media (hover: none), (pointer: coarse) {
      .btn-cta.btn-call,
      .btn-cta.btn-call:hover,
      .btn-cta.btn-call:focus,
      .btn-cta.btn-call:active {
        background-color: var(--button-teal);
      }
    }

    .hero .btn-call {
      margin-top: 30px;
      width: auto;
      padding: 0 32px;
    }

    .call-mobile { display: none; }

    /* ===== STATS BAR ===== */
    .section-stats {
      display: flex;
      gap: 46px;
      padding: 50px var(--shell-x) 50px;
      background: var(--white);
    }

    .stat-item {
      text-align: left;
      flex: 1;
    }

    .stat-number {
      font-family: var(--font-heading);
      font-size: 35px;
      color: var(--medium-teal);
      line-height: 38.5px;
      letter-spacing: -1.05px;
      -webkit-font-smoothing: antialiased;
      margin-bottom: 4px;
    }

    .stat-label {
      font-family: var(--font-body);
      font-size: 20px;
      color: var(--dark-teal);
      font-style: normal;
      -webkit-font-smoothing: antialiased;
    }

    /* ===== BEYOND THE STANDARD ===== */
    .section-beyond {
      position: relative;
      min-height: 685px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: var(--light-bg);
    }

    .section-beyond .bg-image {
      position: absolute;
      inset: 0;
      background-image: url('/images/beyond-mountain.jpg');
      background-size: cover;
      background-position: center;
      opacity: 0.9;
    }

    .section-beyond .content-card {
      position: relative;
      z-index: 2;
      background: rgb(255, 255, 255);
      padding: 60px 72px;
      width: 804px;
      text-align: left;
    }

    .section-beyond h3 {
      font-family: var(--font-heading);
      font-size: 35px;
      font-weight: 400;
      color: var(--dark-teal);
      line-height: 49px;
      -webkit-font-smoothing: antialiased;
      margin-bottom: 16px;
    }

    .section-beyond .subtitle {
      font-size: 20px;
      color: var(--dark-teal);
      line-height: 28px;
      -webkit-font-smoothing: antialiased;
      margin-bottom: 24px;
    }

    .section-beyond ul {
      text-align: left;
      list-style: disc;
      padding-left: 24px;
    }

    .section-beyond li {
      font-size: 17px;
      color: var(--dark-teal);
      line-height: 23.8px;
      margin-bottom: 0;
      margin-left: 13px;
      -webkit-font-smoothing: antialiased;
    }

    /* ===== AIRBNB SECTION ===== */
    .section-airbnb {
      background-color: var(--medium-teal);
      display: flex;
      min-height: 421px;
      /* Background stays full-bleed; the two columns centre at --shell. */
      padding-inline: var(--shell-x0);
    }

    .airbnb-left {
      flex: 392 1 0%;
      padding: 80px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
    }

    .airbnb-left h2 {
      font-family: var(--font-heading);
      font-size: 50px;
      font-weight: 400;
      color: var(--white);
      line-height: 60px;
      -webkit-font-smoothing: antialiased;
      max-width: 483px;
    }

    .airbnb-right {
      flex: 588 1 0%;
      padding: 80px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
    }

    .airbnb-right p {
      font-size: 20px;
      color: var(--white);
      line-height: 28.8px;
      margin-bottom: 30px;
      max-width: 436px;
      -webkit-font-smoothing: antialiased;
    }

    .airbnb-divider {
      display: none;
    }

    .airbnb-right a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      align-self: flex-start;
      width: 240px;
      height: 60px;
      background-color: var(--button-teal);
      color: var(--white);
      font-family: var(--font-heading);
      font-size: 24px;
      font-weight: 400;
      text-decoration: none;
      -webkit-font-smoothing: antialiased;
      transition: background-color 0.2s ease;
    }

    .airbnb-right a:hover {
      background-color: var(--dark-teal);
      opacity: 1;
    }

    /* ===== TAILOR-MADE SECTION ===== */
    .section-tailormade {
      background-color: var(--light-bg);
      padding: 80px var(--shell-x) 60px;
      text-align: center;
    }

    .section-tailormade h2 {
      font-family: var(--font-heading);
      font-size: 55px;
      font-weight: 400;
      color: var(--dark-teal);
      line-height: 77px;
      -webkit-font-smoothing: antialiased;
      margin-bottom: 40px;
      max-width: 792px;
      margin-left: auto;
      margin-right: auto;
    }

    .section-tailormade > p {
      font-size: 20px;
      color: var(--dark-teal);
      line-height: 28px;
      max-width: 828px;
      margin: 0 auto 60px;
      -webkit-font-smoothing: antialiased;
    }

    .icons-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 40px 60px;
      max-width: 900px;
      margin: 0 auto 50px;
    }

    .icon-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }

    .icon-item svg {
      width: 80px;
      height: 80px;
      fill: var(--dark-teal);
      stroke: var(--dark-teal);
    }

    .icon-item .icon-label {
      font-family: var(--font-body);
      font-size: 17px;
      color: var(--dark-teal);
      text-align: center;
      line-height: normal;
      letter-spacing: 3.4px;
      -webkit-font-smoothing: antialiased;
    }

    .section-tailormade .inspection-text {
      font-size: 17px;
      font-style: italic;
      color: var(--dark-teal);
      line-height: 23.8px;
      max-width: 700px;
      margin: 0 auto 30px;
      -webkit-font-smoothing: antialiased;
    }

    .btn-cta-outline {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 363px;
      height: 60px;
      background-color: var(--dark-teal);
      color: var(--white);
      font-family: var(--font-heading);
      font-size: 24px;
      font-weight: 400;
      text-decoration: none;
      -webkit-font-smoothing: antialiased;

      margin-bottom: 40px;
    }

    .btn-cta-outline:hover {
      background-color: var(--medium-teal);
    }

    /* ===== PARTNERS + CLIENTS ===== */
    .section-partners {
      position: relative;
      margin: 60px max(5.5%, calc((100% - var(--shell)) / 2)) 80px;
      min-height: 695px;
    }

    .partners-left {
      position: absolute;
      top: 0;
      left: 0;
      width: 60%;
      min-height: 586px;
      height: calc(100% - 109px);
      background-color: var(--dark-teal);
      padding: 80px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .partners-left h2 {
      font-family: var(--font-heading);
      font-size: 55px;
      font-weight: 400;
      color: var(--white);
      line-height: 77px;
      -webkit-font-smoothing: antialiased;
      margin-bottom: 30px;
    }

    .partners-left p {
      font-size: 20px;
      color: var(--white);
      line-height: 28px;
      -webkit-font-smoothing: antialiased;
      margin-bottom: 16px;
      max-width: 420px;
    }

    .partners-left .detail-text {
      font-size: 17px;
      line-height: 23.8px;
    }

    .clients-right {
      position: absolute;
      top: 53px;
      right: 0;
      width: 53%;
      min-height: 642px;
      background-color: var(--lighter-bg);
      padding: 64px 56px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
    }

    .clients-right h2 {
      font-family: var(--font-heading);
      font-size: 45px;
      font-weight: 400;
      color: var(--dark-teal);
      line-height: 56px;
      -webkit-font-smoothing: antialiased;
      margin-bottom: 34px;
    }

    .clients-list {
      list-style: none;
      margin: 0 0 32px;
      column-count: 3;
      column-gap: 30px;
      text-align: center;
      width: 100%;
    }

    .clients-list li {
      font-size: 18px;
      color: var(--dark-teal);
      line-height: 1.4;
      margin-bottom: 9px;
      break-inside: avoid;
      -webkit-column-break-inside: avoid;
      -webkit-font-smoothing: antialiased;
      white-space: nowrap;
    }

    .clients-list a {
      color: var(--dark-teal);
      text-decoration: none;

    }

    .clients-list a:hover {
      opacity: 0.7;
      text-decoration: underline;
    }

    .btn-work {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 240px;
      height: 60px;
      background-color: var(--dark-teal);
      color: var(--white);
      font-family: var(--font-heading);
      font-size: 24px;
      font-weight: 400;
      text-decoration: none;
      -webkit-font-smoothing: antialiased;

    }

    .btn-work:hover {
      background-color: var(--dark-teal);
    }

    /* ===== FAQ SECTION ===== */
    .section-faq {
      padding: 80px 80px;
      max-width: 1200px;
      margin: 0 auto;
    }

    .faq-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 40px;
      max-width: 916px;
    }

    .faq-header h2 {
      font-family: var(--font-heading);
      font-size: 32px;
      font-weight: 400;
      color: var(--medium-teal);
      line-height: 38.4px;
      -webkit-font-smoothing: antialiased;
    }

    .faq-search {
      display: flex;
      align-items: center;
      gap: 8px;
      border-bottom: 1px solid #ccc;
      padding-bottom: 4px;
    }

    .faq-search input {
      border: none;
      outline: none;
      font-family: var(--font-body);
      font-size: 16px;
      color: var(--medium-teal);
      background: transparent;
      width: 256px;
      height: 40px;
      -webkit-font-smoothing: antialiased;
    }

    .faq-search input::placeholder {
      color: #999;
    }

    .faq-search svg {
      width: 16px;
      height: 16px;
      fill: #999;
    }

    .faq-item {
      border-bottom: 1px solid var(--button-teal);
      max-width: 916px;
    }

    .faq-question {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 24px 0;
      cursor: pointer;

    }

    .faq-question:hover {
      opacity: 0.7;
    }

    .faq-question h3 {
      font-family: var(--font-body);
      font-size: 20px;
      font-weight: 400;
      color: var(--medium-teal);
      line-height: 24px;
      -webkit-font-smoothing: antialiased;
    }

    .faq-question .chevron {
      width: 30px;
      height: 30px;

      flex-shrink: 0;
      margin-left: 20px;
    }

    .faq-item.active .faq-question .chevron {
      transform: rotate(180deg);
    }

    .faq-answer {
      height: 0;
      overflow: hidden;
      transition: height 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .faq-answer p {
      padding-bottom: 24px;
    }

    .faq-answer p {
      font-size: 16px;
      color: var(--medium-teal);
      line-height: 24px;
      -webkit-font-smoothing: antialiased;
    }

    /* ===== CONTACT + FOOTER ===== */
    .section-contact {
      display: flex;
      width: 100%;
      /* Cap + centre so the two columns don't drift to opposite edges on
         wide monitors. No background here, so nothing loses full-bleed. */
      max-width: var(--shell);
      margin: 88px auto 0;
    }

    .contact-left {
      flex: 489 1 0%;
      padding: 60px 40px 60px 5.5%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
    }

    .contact-left .footer-logo {
      margin-bottom: 20px;
    }

    .contact-left .footer-logo img {
      width: 286px;
      height: auto;
    }

    .contact-left .footer-tagline {
      font-size: 17px;
      color: var(--dark-teal);
      line-height: 23.8px;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      margin-bottom: 40px;
      max-width: 500px;
    }

    .contact-left .inquiries-title {
      font-family: var(--font-heading);
      font-size: 45px;
      font-weight: 400;
      color: var(--medium-teal);
      margin-bottom: 16px;
    }

    .contact-left .inquiries-text {
      font-size: 16px;
      color: var(--dark-teal);
      line-height: 1.6;
      margin-bottom: 30px;
      max-width: 500px;
    }

    .contact-left .phone-number {
      font-family: var(--font-heading);
      font-size: 38px;
      color: var(--medium-teal);
      text-decoration: none;
      display: block;
      margin-bottom: 8px;
    }

    .contact-left .phone-number:hover {
      color: var(--medium-teal);
    }

    .contact-left .phone-cta {
      font-family: var(--font-heading);
      font-size: 25px;
      color: var(--medium-teal);
      margin-bottom: 40px;
    }

    .footer-nav {
      list-style: none;
      margin-bottom: 30px;
    }

    .footer-nav li {
      margin-bottom: 35px;
    }

    .footer-nav a {
      font-family: var(--font-body);
      font-size: 17px;
      color: var(--dark-teal);
      text-decoration: none;

    }

    .footer-nav a:hover {
      opacity: 0.7;
    }

    .footer-social a {
      display: inline-block;
    }

    .footer-social img {
      width: 39px;
      height: 39px;
      opacity: 0.7;

    }

    .footer-social img:hover {
      opacity: 1;
    }

    .footer-credit {
      margin-top: auto;
      padding-top: 40px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      font-size: 12px;
      color: var(--dark-teal);
      opacity: 0.6;
    }

    .contact-right {
      flex: 491 1 0%;
      padding: 60px 5.5% 60px 25%;
    }

    .contact-right .footer-social {
      display: flex;
      justify-content: flex-end;
      margin-top: 24px;
    }

    .contact-right h2 {
      font-family: var(--font-heading);
      font-size: 55px;
      font-weight: 400;
      color: var(--medium-teal);
      margin-bottom: 40px;
    }

    .contact-form {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }

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

    .form-group.full-width {
      grid-column: 1 / -1;
    }

    .form-group label {
      font-size: 14px;
      color: var(--medium-teal);
      margin-bottom: 6px;
      -webkit-font-smoothing: antialiased;
    }

    .form-group input:not(.iti__search-input),
    .form-group textarea {
      border: 1px solid rgba(24, 86, 104, 0.6);
      border-radius: 0;
      box-sizing: border-box;
      padding: 0 12px;
      height: 42px;
      font-family: var(--font-body);
      font-size: 16px;
      color: var(--dark-teal);
      background: transparent;
      outline: none;
      -webkit-appearance: none;
      appearance: none;
      -webkit-font-smoothing: antialiased;
    }

    .form-group input:not(.iti__search-input):focus,
    .form-group textarea:focus {
      border-color: var(--medium-teal);
    }

    .form-group textarea {
      height: auto;
      min-height: 92px;
      padding: 8px 12px;
      resize: vertical;
    }

    /* intl-tel-input: make the phone control fill its grid cell like the others */
    .form-group .iti {
      display: block;
      width: 100%;
    }

    .form-group .iti input[type="tel"] {
      width: 100%;
    }

    /* Country dropdown search box — larger, padded & inset (was cramped).
       Global (not .form-group-scoped) so it also styles the fullscreen
       popup intl-tel-input mounts on <body> at mobile/touch widths. */
    .iti__search-input-wrapper {
      padding: 12px 12px 8px;
    }

    .iti__search-input {
      height: 48px !important;
      box-sizing: border-box;
      border: 1px solid rgba(24, 86, 104, 0.35) !important;
      border-radius: 4px !important;
      padding-left: 42px !important;
      padding-right: 14px !important;
      font-family: var(--font-body);
      font-size: 16px !important;
      color: var(--dark-teal);
    }

    .iti__search-input:focus {
      outline: none !important;
      border-color: var(--medium-teal) !important;
      box-shadow: none !important;
    }

    .iti__search-icon {
      left: 25px !important;
      right: auto !important;
    }

    .form-submit {
      grid-column: 1 / -1;
      display: flex;
      justify-content: flex-end;
    }

    .btn-submit {
      background-color: var(--dark-teal);
      color: var(--white);
      font-family: var(--font-body);
      font-size: 24px;
      font-weight: 400;
      width: 100%;
      height: 62px;
      padding: 16px 22px;
      border: none;
      cursor: pointer;
      -webkit-font-smoothing: antialiased;

    }

    .btn-submit:hover {
      background-color: var(--dark-teal);
    }

    .btn-submit:disabled {
      opacity: .65;
      cursor: default;
    }

    /* Honeypot — visually hidden, kept in the accessibility tree off-tab */
    .hp-field {
      position: absolute !important;
      left: -9999px !important;
      width: 1px;
      height: 1px;
      overflow: hidden;
    }

    .form-error {
      grid-column: 1 / -1;
      margin: 0;
      color: #b42318;
      font-family: var(--font-body);
      font-size: 15px;
      line-height: 1.4;
    }

    /* display:grid would otherwise override the [hidden] attribute */
    .contact-form[hidden] {
      display: none !important;
    }

    .form-success {
      border: 1px solid var(--button-teal);
      background: rgba(82, 128, 142, 0.08);
      padding: 22px 24px;
      margin-top: 4px;
    }

    .form-success h3 {
      font-family: var(--font-heading);
      color: var(--dark-teal);
      font-size: 26px;
      font-weight: 400;
      margin: 0 0 8px;
    }

    .form-success p {
      font-family: var(--font-body);
      color: var(--medium-teal);
      font-size: 17px;
      line-height: 1.5;
      margin: 0;
    }

    .form-success a {
      color: var(--dark-teal);
      font-weight: 600;
    }

    /* ===== FOOTER BAR ===== */
    .footer-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 49px;
      padding: 0 var(--shell-x);
      font-family: var(--font-body);
      font-size: 14px;
      color: var(--dark-teal);
      -webkit-font-smoothing: antialiased;
    }

    /* ===== SCROLL ANIMATIONS ===== */
    .scroll-animate {
      transform: translateY(100%);
      opacity: 0;
    }

    .scroll-animate.visible {
      animation:
        slideUpTransform 1.4s cubic-bezier(0.5, 0, 0.07, 1) forwards,
        slideUpOpacity 1.4s cubic-bezier(0.3, 0, 0.07, 1) forwards;
    }

    .scroll-animate-mask {
      overflow: hidden;
    }

    .mobile-partner-bar {
      display: none;
    }

    /* ===== MOBILE RESPONSIVE ===== */
    /* ===== TABLET: stack the airbnb section + reflow its icon grid so it doesn't overflow ===== */
    @media (max-width: 1024px) {
      .section-airbnb { flex-direction: column; }
      .airbnb-left  { flex: none; padding: 56px 6% 12px; }
      .airbnb-right { flex: none; padding: 12px 6% 56px; }
      .icons-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); max-width: 100%; }
    }

    /* ===== TABLET: collapse the nav to a hamburger before it overflows (keeps the desktop header bar) ===== */
    @media (max-width: 1100px) {
      .mobile-toggle { display: flex; margin-left: auto; }
      .site-header { padding-right: clamp(16px, 4vw, 28px); }
      .header-nav {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100vh;
        height: 100dvh;   /* iOS: track the real viewport as the URL bar moves */
        margin-left: 0;
        background: var(--dark-teal);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        /* When the menu is taller than the screen (phones in landscape), a
           plain `center` overflows BOTH ends and the top items become
           unreachable — scrolling can't reach overflow above the start edge.
           `safe center` falls back to flex-start in exactly that case, and
           overflow-y lets the rest scroll. Browsers without `safe` support
           ignore this line and keep the `center` above, so nothing regresses. */
        justify-content: safe center;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding: 40px 40px 120px;
        gap: 28px;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        z-index: 200;
      }
      .header-nav.open { opacity: 1; pointer-events: auto; }
      .header-nav a {
        font-family: var(--font-heading);
        font-size: var(--fs-nav);
        letter-spacing: 1px;
        opacity: 0;
        transform: translateY(-14px);
        transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      }
      .header-nav.open a { opacity: 1; transform: translateY(0); }
      .header-nav.open a:nth-child(1) { transition-delay: 0.08s; }
      .header-nav.open a:nth-child(2) { transition-delay: 0.14s; }
      .header-nav.open a:nth-child(3) { transition-delay: 0.20s; }
      .header-nav.open a:nth-child(4) { transition-delay: 0.26s; }
      .header-nav.open a:nth-child(5) { transition-delay: 0.32s; }
      .header-nav.open a:nth-child(6) { transition-delay: 0.38s; }
      .header-nav.open a:nth-child(7) { transition-delay: 0.44s; }
      /* Partner CTA reachable inside the overlay menu at tablet (no top partner-bar at this width) */
      .header-nav .btn-partner {
        width: auto;
        height: auto;
        padding: 16px 36px;
        font-size: var(--fs-nav);
        margin-top: 8px;
      }
      /* Below 1100px the absolute overlap gets cramped — stack the two panels */
      .section-partners {
        position: static;
        min-height: 0;
        height: auto;
        margin: 50px 5.5%;
        display: flex;
        flex-direction: column;
      }
      .partners-left {
        position: static;
        width: 100%;
        height: auto;
        min-height: 0;
        padding: 56px clamp(28px, 6vw, 64px);
      }
      .clients-right {
        position: static;
        width: 100%;
        height: auto;
        min-height: 0;
        padding: 56px clamp(28px, 6vw, 64px);
      }
      .clients-list { column-count: 2; column-gap: 30px; }
    }


    @media (max-width: 768px) {
      /* --- HEADER --- */
      body {
        background-color: var(--dark-teal);
        overscroll-behavior: none;
      }

      /* On reload: fully static so restored scroll position never causes half-off glitch */
      .is-reload .header-wrapper {
        position: static !important;
      }

      /* Wrapper sticks once partner bar (50px) has scrolled off the top */
      .header-wrapper {
        position: sticky;
        top: -50px;
        z-index: 100;
        margin: 0 !important;
        padding: 0;
        transition: none !important;
      }

      /* Partner bar: in normal flow, scrolls up and out of view */
      .mobile-partner-bar {
        display: block;
        height: 50px;
        background: var(--button-teal);
      }

      .mobile-partner-bar a {
        display: -webkit-box;
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: center;
        justify-content: center;
        height: 50px;
        font-family: var(--font-heading);
        font-size: 16px;
        color: var(--white);
        text-decoration: none;
        -webkit-font-smoothing: antialiased;
        letter-spacing: 1px;
      }

      .site-header {
        position: relative;
        height: 124px;
        padding: 0 var(--sec-pad-x);
        justify-content: space-between;
      }

      .header-logo {
        padding-left: clamp(8px, 4vw, 16px);
      }

      .header-logo img {
        width: clamp(200px, 70vw, 320px);
        height: auto;
      }

      .mobile-toggle {
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
      }

      .header-nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100vh;
        height: 100dvh;   /* iOS: track the real viewport as the URL bar moves */
        background: var(--dark-teal);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        /* See the ≤1100px block: `safe center` keeps the top items reachable
           when the menu is taller than the screen (phones in landscape),
           where a plain `center` would overflow off both ends unscrollably. */
        justify-content: safe center;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding: 40px 40px 120px;
        gap: 28px;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        z-index: 200;
      }

      .header-nav.open {
        opacity: 1;
        pointer-events: auto;
      }

      .header-nav a {
        font-family: var(--font-heading);
        font-size: var(--fs-nav);
        letter-spacing: 1px;
        opacity: 0;
        transform: translateY(-14px);
        transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      }

      .header-nav.open a { opacity: 1; transform: translateY(0); }
      .header-nav.open a:nth-child(1) { transition-delay: 0.08s; }
      .header-nav.open a:nth-child(2) { transition-delay: 0.14s; }
      .header-nav.open a:nth-child(3) { transition-delay: 0.20s; }
      .header-nav.open a:nth-child(4) { transition-delay: 0.26s; }
      .header-nav.open a:nth-child(5) { transition-delay: 0.32s; }

      .header-nav .btn-partner {
        display: none;
      }

      .mobile-toggle {
        display: flex;
      }

      .mobile-toggle span {
        width: 28px;
        height: 2px;
      }

      .mobile-toggle.active {
        z-index: 210;
      }

      /* --- HERO --- */
      .hero {
        height: auto;
        min-height: 680px;
        margin-top: 0;
      }

      .hero-content {
        padding: 80px var(--sec-pad-x);
        text-align: center;
        align-items: center;
      }

      .hero .hero-visual-heading {
        font-size: var(--fs-display);
        line-height: 1.06;
        letter-spacing: 1.5px;
      }

      .hero p:not(.hero-visual-heading) {
        font-size: var(--fs-lead);
        line-height: var(--lh-body);
        max-width: 100%;
        text-align: center;
        padding: 0 5%;
      }

      /* --- GLOBAL PARAGRAPH SIZE --- */
      p {
        font-size: var(--fs-body);
        line-height: var(--lh-body);
      }

      /* --- HOUSEKEEPING --- */
      .section-housekeeping {
        padding: 40px var(--sec-pad-x) 30px;
        text-align: center;
      }

      .section-housekeeping .content-wrapper {
        max-width: 100%;
      }

      .section-housekeeping h2 {
        font-size: var(--fs-h2);
        line-height: var(--lh-tight);
      }

      .section-housekeeping p {
        font-size: var(--fs-body);
        line-height: var(--lh-body);
      }

      .btn-cta {
        width: auto;
        height: var(--btn-h);
        padding: 0 var(--btn-pad-x);
        font-size: var(--fs-button);
      }

      .call-desktop { display: none; }
      .call-mobile { display: inline-flex; }

      .btn-cta-outline {
        width: auto;
        height: var(--btn-h);
        padding: 0 var(--btn-pad-x);
        font-size: var(--fs-button);
        margin-bottom: 0;
      }

      .btn-work {
        height: var(--btn-h);
        font-size: var(--fs-button);
        width: auto;
        padding: 0 var(--btn-pad-x);
      }

      .btn-submit {
        height: var(--btn-h);
        font-size: var(--fs-button);
      }

      /* --- STATS --- */
      .section-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 32px 0;
        padding: 40px clamp(14px, 4.5vw, 24px) 40px 0;
        text-align: center;
        align-items: start;
      }

      .stat-item {
        text-align: center;
        min-width: 0;
        width: 100%;
        padding: 0 12px;
      }

      .stat-item .scroll-animate-mask {
        width: 100%;
      }

      .stat-number {
        font-size: var(--fs-stat);
        line-height: 1.15;
      }

      .stat-label {
        font-size: var(--fs-lead);
        margin: 6px auto 0;
        max-width: 9ch;
      }

      /* --- BEYOND --- */
      .section-beyond {
        min-height: auto;
        padding: 40px var(--sec-pad-x);
      }

      .section-beyond .content-card {
        width: 100%;
        margin: 0;
        padding: 40px var(--sec-pad-x);
      }

      .section-beyond h3 {
        font-size: var(--fs-h3);
        line-height: var(--lh-tight);
      }

      .section-beyond .subtitle {
        font-size: var(--fs-body);
        line-height: var(--lh-body);
      }

      .section-beyond li {
        font-size: var(--fs-body);
        line-height: var(--lh-body);
      }

      /* --- AIRBNB --- */
      .section-airbnb {
        flex-direction: column;
        text-align: center;
      }

      .airbnb-left {
        padding: 40px var(--sec-pad-x) 8px;
      }

      .airbnb-right {
        padding: 8px var(--sec-pad-x) 40px;
      }

      .airbnb-left h2 {
        font-size: var(--fs-h2);
        line-height: var(--lh-tight);
        max-width: 100%;
      }

      .airbnb-right p {
        max-width: 100%;
      }

      .airbnb-right a {
        align-self: center;
        width: auto;
        height: var(--btn-h);
        padding: 0 var(--btn-pad-x);
        font-size: var(--fs-button);
      }

      /* --- TAILOR-MADE --- */
      .section-tailormade {
        padding: 40px var(--sec-pad-x);
      }

      .section-tailormade h2 {
        font-size: var(--fs-h2);
        line-height: var(--lh-tight);
        max-width: 100%;
      }

      .section-tailormade > p {
        font-size: var(--fs-body);
        line-height: var(--lh-body);
        max-width: 100%;
      }

      .icons-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 20px;
        max-width: 100%;
        justify-items: stretch;
      }

      .icon-item {
        width: 100%;
        min-width: 0;
      }

      .icon-item img {
        width: clamp(96px, 33vw, 150px) !important;
        height: clamp(96px, 33vw, 150px) !important;
      }

      .icon-item .icon-label {
        font-size: clamp(13px, 4vw, 17px);
        letter-spacing: 1.5px;
        max-width: 100%;
        overflow-wrap: break-word;
      }

      /* --- PARTNERS --- */
      .section-partners {
        position: static;
        height: auto;
        margin: 0;
        display: flex;
        flex-direction: column;
      }

      .partners-left {
        position: static;
        width: 100%;
        height: auto;
        padding: 50px var(--sec-pad-x);
        background-color: var(--white);
        text-align: center;
      }

      .partners-left h2 {
        font-size: var(--fs-h2);
        line-height: var(--lh-tight);
        color: var(--dark-teal);
      }

      .partners-left p {
        max-width: 100%;
        color: var(--dark-teal);
        font-size: var(--fs-body);
        line-height: var(--lh-body);
      }

      .partners-left .detail-text {
        color: var(--dark-teal);
        font-size: var(--fs-body);
        line-height: var(--lh-body);
      }

      .clients-right {
        position: static;
        width: 100%;
        height: auto;
        padding: 50px var(--sec-pad-x);
        background-color: var(--lighter-bg);
      }

      .clients-list {
        column-count: 2;
        column-gap: 24px;
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
      }

      .clients-list li {
        font-size: var(--fs-body);
        line-height: 1.4;
        white-space: normal;
      }

      .clients-right h2 {
        font-size: var(--fs-h2);
        line-height: var(--lh-tight);
      }

      /* --- FAQ --- */
      .section-faq {
        padding: 40px var(--sec-pad-x);
        background-color: var(--white);
      }

      .faq-question:hover {
        opacity: 1;
      }

      .faq-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
      }

      .faq-header h2 {
        font-size: var(--fs-h2);
        line-height: var(--lh-tight);
      }

      .faq-item {
        max-width: 100%;
      }

      .faq-question h3 {
        font-size: clamp(18px, 5.5vw, 24px);
      }

      .faq-search {
        width: 100%;
      }

      .faq-search input {
        width: 100%;
        height: 44px;
      }

      /* --- CONTACT --- */
      .section-contact {
        flex-direction: column;
        max-width: 100%;
        margin: 0;
        background-color: var(--white);
      }

      .contact-left {
        flex: none;
        padding: 40px var(--sec-pad-x) 16px;
        background-color: var(--white);
      }

      .contact-right {
        flex: none;
        padding: 16px var(--sec-pad-x) 40px;
        background-color: var(--white);
      }

      .contact-left .footer-logo img {
        width: clamp(200px, 65vw, 260px);
        height: auto;
      }

      .contact-right h2 {
        font-size: var(--fs-h2);
        line-height: var(--lh-tight);
      }

      .contact-form {
        grid-template-columns: 1fr;
        gap: 22px;
      }

      /* Taller, touch-friendlier fields on mobile */
      .form-group input:not(.iti__search-input),
      .form-group textarea {
        height: 52px;
      }

      .form-group textarea {
        height: auto;
        min-height: 120px;
      }

      .form-group label {
        font-size: 15px;
        margin-bottom: 8px;
      }

      .contact-left .inquiries-title {
        font-size: var(--fs-h2);
        line-height: var(--lh-tight);
      }

      .contact-left .phone-number {
        font-size: clamp(18px, 5.5vw, 24px);
      }

      .footer-nav li {
        margin-bottom: 20px;
      }

      .footer-bar {
        flex-direction: column;
        gap: 8px;
        padding: 16px var(--sec-pad-x);
        height: auto;
        text-align: center;
        background-color: var(--white);
      }
    }

    /* Phones in landscape: the menu only has ~375–430px of height to work
       with. Tighten the rhythm so all seven items fit on screen instead of
       relying on scrolling. Placed AFTER the ≤768px block so it wins there
       too — that block re-declares .header-nav and its link sizing. */
    @media (max-width: 1100px) and (max-height: 560px) {
      .header-nav {
        gap: clamp(4px, 1.6vh, 14px);
        padding: 64px 40px 24px;
      }
      /* Vertical padding buys back tap height without adding layout gap. */
      .header-nav a {
        font-size: clamp(17px, 4.6vh, 26px);
        padding-block: clamp(3px, 1vh, 8px);
      }
      .header-nav .btn-partner {
        padding: clamp(7px, 1.6vh, 12px) 26px;
        font-size: clamp(15px, 4vh, 21px);
        margin-top: 2px;
      }
      /* Hamburger sits over the menu, so keep clear of it at the top. */
      .mobile-toggle { z-index: 210; }
    }

    /* ===== DESKTOP-ONLY: scale CTA buttons by 25% ===== */
    @media (min-width: 769px) {
      .btn-cta {
        width: 300px;
        height: 75px;
        font-size: 30px;
      }

      .btn-cta-outline {
        width: 454px;
        height: 75px;
        font-size: 30px;
      }

      .btn-work {
        width: 300px;
        height: 75px;
        font-size: 30px;
      }

      .btn-submit {
        height: 78px;
        font-size: 30px;
        padding: 20px 28px;
      }

      .airbnb-right a {
        width: 300px;
        height: 75px;
        font-size: 30px;
      }
    }
    /* ===== SECTION: DEPARTURE-CLEAN ESTIMATOR ===== */
    .section-estimator {
      background: #eef2f3;
      border-top: 1px solid rgba(24, 86, 104, 0.14);
      padding: 92px var(--shell-x) 96px;
    }
    .estimator-grid {
      display: grid;
      /* Card holds its designed width (512px incl. its 34px padding); the
         text column absorbs any extra space. This lets the grid span the
         full content column, so the card lands on the right gutter and the
         section reads as centred — previously max-width:1180px + margin:0
         left-aligned the grid and dumped all the slack on the right.
         Intro copy is capped at 42ch and the h2 breaks manually, so the
         wider text column doesn't change how the copy wraps. */
      grid-template-columns: minmax(0, 1fr) minmax(0, 512px);
      gap: 100px;
      margin: 0;
      align-items: start;
    }
    /* Left column & card are top-anchored in the grid; the script vertically
       centres the shorter of the two against the taller (estimate-view height),
       so the text block sits central to the box without drifting when the
       quote form expands. */
    .estimator-intro .eyebrow {
      font-family: var(--font-body);
      font-size: 13px;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: var(--button-teal);
      margin-bottom: 18px;
      -webkit-font-smoothing: antialiased;
    }
    .estimator-intro h2 {
      font-family: var(--font-heading);
      font-size: 55px;
      font-weight: 400;
      line-height: 77px;
      text-transform: uppercase;
      color: var(--medium-teal);
      margin-bottom: 32px;
      -webkit-font-smoothing: antialiased;
    }
    .estimator-intro p {
      font-size: 17px;
      line-height: 23.8px;
      color: var(--dark-teal);
      margin-bottom: 18px;
      max-width: 42ch;
      -webkit-font-smoothing: antialiased;
    }
    .estimator-trust {
      list-style: none;
      margin-top: 28px;
      display: grid;
      gap: 13px;
    }
    .estimator-trust li {
      display: flex;
      align-items: flex-start;
      gap: 11px;
      font-size: 17px;
      line-height: 23.8px;
      color: var(--dark-teal);
      -webkit-font-smoothing: antialiased;
    }
    .estimator-trust svg { flex-shrink: 0; margin-top: 1px; color: var(--button-teal); }

    .estimator-card {
      background: var(--white);
      border: 1px solid rgba(24, 86, 104, 0.14);
      box-shadow: 0 22px 56px -32px rgba(17, 56, 74, 0.48);
      padding: 32px 34px 30px;
      overflow: hidden;
    }
    .estimator-card .card-title {
      font-family: var(--font-body);
      font-size: 13px;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--button-teal);
      margin-bottom: 26px;
      -webkit-font-smoothing: antialiased;
    }

    .est-control { margin-bottom: 24px; }
    .est-control-head {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 16px;
    }
    .est-control-head .label {
      font-family: var(--font-body);
      font-size: 16px;
      color: var(--dark-teal);
      -webkit-font-smoothing: antialiased;
    }
    .est-control-head .value {
      font-family: var(--font-heading);
      font-size: 25px;
      color: var(--medium-teal);
      line-height: 1;
    }
    input[type="range"].est-slider {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 6px;
      border-radius: 999px;
      background: linear-gradient(to right, var(--medium-teal) 0 var(--fill, 13px), var(--light-bg) var(--fill, 13px) 100%);
      outline: none;
      cursor: pointer;
    }
    input[type="range"].est-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 26px; height: 26px;
      border-radius: 50%;
      background: var(--medium-teal);
      border: 3px solid #fff;
      box-shadow: 0 2px 9px rgba(17, 56, 74, 0.45);
      cursor: pointer;
      transition: transform .12s ease;
    }
    input[type="range"].est-slider::-webkit-slider-thumb:active { transform: scale(1.14); }
    input[type="range"].est-slider::-moz-range-thumb {
      width: 26px; height: 26px;
      border-radius: 50%;
      background: var(--medium-teal);
      border: 3px solid #fff;
      box-shadow: 0 2px 9px rgba(17, 56, 74, 0.45);
      cursor: pointer;
    }
    input[type="range"].est-slider:focus-visible { box-shadow: 0 0 0 3px rgba(82, 128, 142, 0.45); }

    .est-stops {
      position: relative;
      height: 22px;
      margin-top: 14px;
    }
    .est-stops button {
      position: absolute;
      /* Pulled up by the extra top padding below so the label sits in exactly
         the same place as before — the added padding is invisible hit area.
         min-width gives a ~44px touch target (was as little as 4px wide for
         "1"); translateX(-50%) keeps it centred on the slider stop. */
      top: -8px;
      transform: translateX(-50%);
      min-width: 44px;
      box-sizing: border-box;
      text-align: center;
      background: none;
      border: none;
      font-family: var(--font-body);
      font-size: 13.5px;
      line-height: 1;
      color: var(--button-teal);
      cursor: pointer;
      padding: 12px 6px 18px;
      white-space: nowrap;
      transition: color .15s;
      -webkit-font-smoothing: antialiased;
    }
    .est-stops button[aria-current="true"] { color: var(--medium-teal); font-weight: 700; }
    @media (hover: hover) { .est-stops button:hover { color: var(--dark-teal); } }

    .est-result {
      margin-top: 4px;
      padding: 28px 6px 10px;
      border-top: 1px solid rgba(24, 86, 104, 0.18);
      text-align: center;
      min-height: 96px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .est-result .price {
      font-family: var(--font-heading);
      font-size: 42px;
      line-height: 1;
      color: var(--medium-teal);
      letter-spacing: -0.5px;
    }
    .est-result .price .cur { font-size: 23px; vertical-align: 7px; opacity: .65; margin: 0 1px; }
    .est-result .price-sub {
      font-family: var(--font-body);
      font-size: 12.5px;
      color: var(--dark-teal);
      opacity: 0.68;
      margin-top: 10px;
      letter-spacing: .2px;
    }
    .est-result .est-message {
      font-family: var(--font-body);
      font-size: 15.5px;
      line-height: 1.55;
      color: var(--dark-teal);
      max-width: 44ch;
      margin: 0 auto;
    }
    .est-result.is-message .price, .est-result.is-message .price-sub { display: none; }
    .est-result:not(.is-message) .est-message { display: none; }

    .est-cta {
      display: inline-flex; align-items: center; justify-content: center;
      width: 100%;
      min-height: 66px;
      margin-top: 20px;
      background: var(--medium-teal);
      color: #fff;
      font-family: var(--font-heading);
      font-size: 24px;
      line-height: 1.14;
      text-transform: uppercase;
      letter-spacing: 0;
      padding: 14px 18px;
      white-space: normal;
      text-align: center;
      border: none;
      cursor: pointer;
      text-decoration: none;
      -webkit-font-smoothing: antialiased;
      transition: background .2s;
    }
    .est-cta:hover { background: var(--dark-teal); }

    /* Two-step wizard inside one card footprint */
    .est-panel[hidden], .est-quote[hidden] { display: none; }
    /* .quote-grid is display:grid, which otherwise beats the [hidden] attribute (same fix as .contact-form). */
    .quote-grid[hidden] { display: none; }
    /* On submit success, collapse the quote step to show only the confirmation — mirrors the bottom contact form. */
    .est-quote.quote-done > :not(.quote-success) { display: none; }
    .est-panel { animation: estSlideIn .36s cubic-bezier(.4, 0, .2, 1); }
    .est-quote { animation: estSlideInRight .36s cubic-bezier(.4, 0, .2, 1); }
    @keyframes estSlideInRight {
      from { opacity: 0; transform: translateX(26px); }
      to   { opacity: 1; transform: translateX(0); }
    }
    @keyframes estSlideIn {
      from { opacity: 0; transform: translateX(-22px); }
      to   { opacity: 1; transform: translateX(0); }
    }
    @media (prefers-reduced-motion: reduce) {
      .est-panel, .est-quote { animation: none; }
    }

    /* Section entrance reveal (staggered fade-up) */
    .est-reveal { opacity: 0; transform: translateY(26px); transition: opacity .85s ease, transform .85s cubic-bezier(.2, .7, .2, 1); }
    .est-reveal.visible { opacity: 1; transform: none; }
    @media (prefers-reduced-motion: reduce) {
      .est-reveal { opacity: 1; transform: none; transition: none; }
    }
    .est-back {
      display: inline-flex; align-items: center; gap: 7px;
      background: none; border: none; cursor: pointer;
      font-family: var(--font-body); font-size: 13px;
      color: var(--button-teal); padding: 0; margin-bottom: 16px;
      -webkit-font-smoothing: antialiased;
    }
    .est-back:hover { color: var(--dark-teal); }
    .est-back svg { display: block; }
    .est-quote h3 {
      font-family: var(--font-heading);
      font-size: 25px; font-weight: 400;
      color: var(--medium-teal);
      margin-bottom: 6px;
      -webkit-font-smoothing: antialiased;
    }
    .est-quote .quote-intro {
      font-size: 14px; color: var(--dark-teal); margin-bottom: 16px; line-height: 1.5;
    }
    .est-config-chip {
      display: inline-block;
      background: var(--light-bg);
      color: var(--dark-teal);
      font-size: 13px;
      padding: 8px 14px;
      margin-bottom: 20px;
    }
    .quote-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
    .quote-field { display: flex; flex-direction: column; }
    .quote-field.full { grid-column: 1 / -1; }
    .quote-field label { font-size: 14px; color: var(--dark-teal); margin-bottom: 6px; }
    .quote-field input, .quote-field textarea {
      width: 100%;
      box-sizing: border-box;
      height: 42px;
      border: 1px solid rgba(24, 86, 104, .6);
      padding: 0 12px;
      font-family: var(--font-body);
      /* 16px min: anything smaller makes iOS Safari zoom-to-fit on focus (matches the contact form below). */
      font-size: 16px;
      color: var(--dark-teal);
      background: #fff;
      -webkit-appearance: none;
      appearance: none;
    }
    .quote-field textarea { height: 78px; padding: 10px 12px; resize: vertical; }
    /* Phone field: make the intl-tel-input wrapper + its input fill the cell like every other field (same as the contact form). */
    .quote-field .iti { display: block; width: 100%; }
    .quote-field .iti input[type="tel"] { width: 100%; }
    .quote-field input:focus, .quote-field textarea:focus { outline: 2px solid var(--button-teal); outline-offset: -1px; }
    .quote-check {
      grid-column: 1 / -1;
      display: flex; align-items: flex-start; gap: 10px;
      font-size: 14px; color: var(--dark-teal); cursor: pointer; line-height: 1.4;
    }
    .quote-check input { width: 18px; height: 18px; margin-top: 1px; flex-shrink: 0; accent-color: var(--medium-teal); }
    .quote-submit {
      grid-column: 1 / -1;
      min-height: 66px;
      margin-top: 16px;
      padding: 14px 16px;
      white-space: normal;
      line-height: 1.14;
      text-align: center;
      background: var(--medium-teal); color: #fff;
      border: none; cursor: pointer;
      font-family: var(--font-heading); font-size: 24px;
      text-transform: uppercase; letter-spacing: 0;
      -webkit-font-smoothing: antialiased;
      transition: background .2s;
    }
    .quote-submit:hover { background: var(--dark-teal); }
    .quote-submit:disabled { opacity: .6; cursor: default; }
    .quote-error { grid-column: 1 / -1; color: #b42318; font-size: 14px; }
    .quote-success { background: var(--dark-teal); color: #fff; padding: 28px; text-align: center; margin-top: 8px; }
    .quote-success h3 { font-family: var(--font-heading); font-weight: 400; color: #fff; font-size: 25px; margin-bottom: 8px; -webkit-font-smoothing: antialiased; }
    .quote-success p { font-size: 15px; line-height: 1.5; opacity: .92; }
    .quote-success a { color: #fff; }
    .est-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

    /* ===== TABLET: stack the side-by-side sections so they aren't cramped / don't overflow ===== */
    @media (max-width: 1200px) {
      .estimator-grid { grid-template-columns: 1fr; gap: 38px; }
      .estimator-intro p { max-width: none; }
      /* Contact: drop from 2-column flex (heavy % padding overflows) to a stacked layout */
      .section-contact { flex-direction: column; }
      .contact-left  { flex: none; min-width: 0; padding: 56px 6% 24px; }
      .contact-right { flex: none; min-width: 0; padding: 8px 6% 60px; }
    }
    @media (max-width: 768px) {
      .section-estimator { padding: 48px var(--sec-pad-x) 56px; }
      .estimator-intro h2 { font-size: var(--fs-h2); line-height: var(--lh-tight); margin-bottom: 22px; }
      .estimator-card { padding: 26px 22px 26px; }
      .est-result .price { font-size: 38px; }
      .quote-grid { grid-template-columns: 1fr; gap: 22px; }
      .est-stops button { font-size: 12px; }
      .est-cta { font-size: var(--fs-button); min-height: 56px; letter-spacing: 0.3px; }
      .quote-submit { font-size: var(--fs-button); min-height: 56px; letter-spacing: 0.3px; }
      /* Match the contact form's larger, touch-friendlier mobile fields. */
      .quote-field input, .quote-field textarea { height: 52px; }
      .quote-field textarea { height: auto; min-height: 120px; }
      .quote-field label { font-size: 15px; margin-bottom: 8px; }
    }

    /* ======================================================================
       ADDED FOR THE SERVICE PAGES (2026-08-12)
       Purely additive: every rule below uses a NEW class name, so nothing
       above this comment changes behaviour. The approved homepage layout,
       type, colour and copy are untouched.
       ====================================================================== */

    /* ----- SERVICES dropdown in the header nav -----
       Desktop: a hover/focus panel under SERVICES.
       <=1100px: the wrapper and panel become display:contents so the links
       collapse into the existing fullscreen overlay as direct flex children,
       and the overlay's own descendant-selector rules keep applying. */
    .nav-dd {
      position: relative;
      display: flex;
      align-items: center;
    }

    .nav-dd-trigger {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
    }

    .nav-dd-trigger svg { transition: transform 0.25s ease; }

    .nav-dd:hover .nav-dd-trigger svg,
    .nav-dd.open .nav-dd-trigger svg { transform: rotate(180deg); }

    .nav-dd-panel {
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translate(-50%, 8px);
      min-width: 268px;
      background: var(--medium-teal);
      padding: 6px 0;
      display: flex;
      flex-direction: column;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
      box-shadow: 0 14px 34px rgba(17, 56, 74, 0.28);
      z-index: 120;
    }

    /* Bridges the 8px gap so the panel doesn't close as the pointer travels */
    .nav-dd::after {
      content: '';
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      height: 14px;
    }

    .nav-dd:hover .nav-dd-panel,
    .nav-dd:focus-within .nav-dd-panel,
    .nav-dd.open .nav-dd-panel {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translate(-50%, 0);
    }

    /* The links live in a wrapper rather than directly in the panel: on desktop
       it is simply the column, and at <=1100px it is the box the accordion clips,
       which is what lets the panel animate to their real height. */
    .nav-dd-list {
      display: flex;
      flex-direction: column;
    }

    .header-nav .nav-dd-panel a {
      padding: 13px 22px;
      font-size: 14px;
      white-space: nowrap;
      /* Caps to match the rest of the nav, applied in CSS rather than typed into
         the markup so the link text stays real words for screen readers and for
         the internal-link anchor text. */
      text-transform: uppercase;
      border-left: 3px solid transparent;
      transition: background-color 0.2s ease, border-color 0.2s ease;
    }

    .header-nav .nav-dd-panel a:hover {
      opacity: 1;
      background-color: var(--button-teal);
      border-left-color: var(--white);
    }

    /* ----- SERVICES HUB section (sits between AIRBNB and TAILOR-MADE) ----- */
    .section-services-hub {
      background-color: var(--white);
      padding: 90px var(--shell-x) 80px;
      text-align: center;
    }

    .section-services-hub .hub-eyebrow {
      display: block;
      font-family: var(--font-body);
      font-size: 13px;
      letter-spacing: 2.2px;
      text-transform: uppercase;
      color: var(--button-teal);
      margin-bottom: 18px;
      -webkit-font-smoothing: antialiased;
    }

    .section-services-hub h2 {
      font-family: var(--font-heading);
      font-size: 55px;
      font-weight: 400;
      color: var(--medium-teal);
      line-height: 1.24;
      -webkit-font-smoothing: antialiased;
      max-width: 900px;
      margin: 0 auto 26px;
    }

    .section-services-hub .hub-intro {
      font-size: 17px;
      line-height: 27px;
      color: var(--dark-teal);
      max-width: 720px;
      margin: 0 auto 56px;
      -webkit-font-smoothing: antialiased;
    }

    .hub-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 32px;
      max-width: 1040px;
      margin: 0 auto;
      text-align: left;
    }

    .hub-card {
      background: var(--light-bg);
      border-top: 4px solid var(--medium-teal);
      padding: 40px 38px 38px;
      display: flex;
      flex-direction: column;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    @media (hover: hover) {
      .hub-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 18px 40px rgba(17, 56, 74, 0.14);
      }
    }

    .hub-card .hub-tag {
      font-size: 12px;
      letter-spacing: 1.8px;
      text-transform: uppercase;
      color: var(--button-teal);
      margin-bottom: 14px;
      -webkit-font-smoothing: antialiased;
    }

    .hub-card h3 {
      font-family: var(--font-heading);
      font-size: 32px;
      font-weight: 400;
      color: var(--medium-teal);
      line-height: 1.2;
      margin-bottom: 16px;
      -webkit-font-smoothing: antialiased;
    }

    .hub-card p {
      font-size: 16px;
      line-height: 26px;
      color: var(--dark-teal);
      margin-bottom: 22px;
      -webkit-font-smoothing: antialiased;
    }

    .hub-card ul {
      list-style: none;
      margin: 0 0 30px;
    }

    .hub-card li {
      position: relative;
      padding-left: 20px;
      font-size: 15px;
      line-height: 24px;
      color: var(--medium-teal);
      margin-bottom: 9px;
      -webkit-font-smoothing: antialiased;
    }

    .hub-card li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 9px;
      width: 7px;
      height: 7px;
      background: var(--button-teal);
    }

    .hub-card .hub-link {
      margin-top: auto;
      align-self: flex-start;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 240px;
      height: 60px;
      background-color: var(--medium-teal);
      color: var(--white);
      font-family: var(--font-heading);
      font-size: 24px;
      font-weight: 400;
      text-decoration: none;
      -webkit-font-smoothing: antialiased;
      transition: background-color 0.2s ease;
    }

    .hub-card .hub-link:hover { background-color: var(--dark-teal); }

    @media (min-width: 769px) {
      .hub-card .hub-link { width: 280px; height: 72px; font-size: 28px; }
    }

    @media (max-width: 1100px) {
      /* Overlay menu: SERVICES is a tap-to-expand accordion row.
         ⛔ The previous build flattened the panel with `display: contents`. That
         removes the box but NOT the inherited properties, so the two links kept
         the panel's `visibility: hidden` / `pointer-events: none` and rendered as
         an invisible gap under SERVICES. The panel keeps a real box here and
         collapses by height instead. */
      .nav-dd {
        position: static;
        flex-direction: column;
        align-items: center;
        width: 100%;
      }
      .nav-dd::after { content: none; }

      .nav-dd-trigger { gap: 10px; }
      .nav-dd-trigger svg {
        display: inline-block;
        width: 0.4em;
        height: 0.4em;
        stroke-width: 3.5;
      }
      /* Touch leaves a sticky :hover behind, which would strand the chevron
         upside-down after a tap. Only `.open` may rotate it at this width. */
      .nav-dd:hover .nav-dd-trigger svg { transform: none; }
      .nav-dd.open .nav-dd-trigger svg { transform: rotate(180deg); }

      /* ⛔ An over-shooting `max-height` (0 -> 40vh for ~68px of links) hits the
         real height inside the first fifth of the duration and eases nothing
         after it - that is what read as a jump. A 0fr -> 1fr grid track
         interpolates to the exact content height, so the rows below slide at a
         constant, honest speed. */
      .nav-dd-panel {
        position: static;
        min-width: 0;
        width: 100%;
        background: none;
        box-shadow: none;
        padding: 0;
        opacity: 1;
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      }
      .nav-dd.open .nav-dd-panel { grid-template-rows: 1fr; }

      .nav-dd-list {
        overflow: hidden;
        min-height: 0;        /* without this the 0fr track never collapses */
        align-items: center;
        gap: 18px;
      }
      /* ⛔ The offset from SERVICES has to be a MARGIN on the content, not
         padding on `.nav-dd-list`: padding on the clipped box survives the
         collapsed track (a 0 height still renders its padding) and leaves a
         permanent 20px gap under SERVICES. A margin inside it is clipped. */
      .nav-dd-list a:first-child { margin-top: 20px; }

      /* The desktop panel is centred with a -50% translate; in the column it is
         already centred, so every open state has to cancel that.
         ⛔⛔ `visibility` must NOT flip at this width. The desktop panel hides
         itself with `visibility: hidden`, and a hidden subtree is never painted,
         so WebKit had no raster for these two links until the first expand
         revealed them - the row opened EMPTY and both links flashed in at the
         end. Only the first time; every later expand reused the warm raster and
         was smooth. Nothing here needs visibility to stay hidden: the row is
         clipped to zero height when closed. `inert` (set in JS) keeps the closed
         links out of the tab order, which is all visibility was buying us. */
      .nav-dd-panel,
      .nav-dd:hover .nav-dd-panel,
      .nav-dd:focus-within .nav-dd-panel,
      .nav-dd.open .nav-dd-panel {
        visibility: visible;
        transform: none;
      }

      /* Mirror the overlay's own reveal: the sub-links fade and slide in on the
         same curve, duration and 60ms rhythm as ABOUT / ESTIMATE / CLIENTS do
         when the menu opens.
         ⛔ `.header-nav.open` alone must NOT reveal them - it would put them at
         full opacity before the row ever expands, which is why the old version
         only ever animated a height. They belong to `.nav-dd.open`. */
      .header-nav.open .nav-dd-panel a {
        opacity: 0;
        transform: translateY(-14px);
        transition-delay: 0s;
      }
      .header-nav.open .nav-dd.open .nav-dd-panel a {
        opacity: 1;
        transform: translateY(0);
      }
      /* The overlay's items are staggered from 0.08s because they arrive over a
         background that is already there. Here the row is opening UNDERNEATH
         them, so the same head start would show an empty gap for ~150ms before
         any text. The links lead instead: first one immediately, second on the
         overlay's own 60ms beat, both landing with the row. */
      .header-nav.open .nav-dd.open .nav-dd-panel a:nth-child(2) { transition-delay: 0.06s; }

      .header-nav .nav-dd-panel a {
        font-size: calc(var(--fs-nav) * 0.62);
        padding: 0;
        border-left: none;
        white-space: normal;
        text-align: center;
        color: var(--light-bg);
        /* ⛔ The base `.header-nav .nav-dd-panel a` rule outranks
           `.header-nav a` and replaces its transition list with background and
           border only - without restating these two the links SNAP into place
           and only the row height ever animates. Same curve and duration as the
           overlay's own items. */
        transition: opacity 0.4s ease,
                    transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      }
      .header-nav .nav-dd-panel a:hover { background: none; }

      /* One frame of "fully open, no transition", applied by JS while the
         overlay is still closed (and therefore invisible), purely so WebKit
         rasterises the links before the user ever expands the row. Belt and
         braces with the visibility rule above - it costs one frame and nothing
         is on screen to see it. */
      /* ⛔ Suppressing the transition is a SEPARATE class that outlives the
         priming frame by one. Undoing them together made the panel animate its
         420ms collapse the moment priming ended, so the first tap on the burger
         showed the sub-menu closing itself behind the fading-in overlay. */
      .nav-dd.nav-dd-no-anim .nav-dd-panel,
      .nav-dd.nav-dd-no-anim .nav-dd-panel a { transition: none; }
      .nav-dd.nav-dd-priming .nav-dd-panel { grid-template-rows: 1fr; }
      .nav-dd.nav-dd-priming .nav-dd-panel a { opacity: 1; transform: none; }
    }

    @media (max-width: 900px) {
      .hub-grid { grid-template-columns: 1fr; gap: 24px; max-width: 620px; }
    }

    @media (max-width: 768px) {
      .section-services-hub {
        padding: 52px var(--sec-pad-x) 56px;
        background-color: var(--white);
      }
      .section-services-hub h2 {
        font-size: var(--fs-h2);
        line-height: var(--lh-tight);
        margin-bottom: 20px;
      }
      .section-services-hub .hub-intro {
        font-size: 16px;
        line-height: 26px;
        margin-bottom: 34px;
      }
      .hub-card { padding: 30px 24px 28px; }
      .hub-card h3 { font-size: 28px; }
      .hub-card .hub-link {
        width: 100%;
        height: var(--btn-h);
        font-size: var(--fs-button);
      }
    }

    /* Landscape phones: seven rows collapsed, nine with SERVICES expanded */
    @media (max-width: 1100px) and (max-height: 560px) {
      .header-nav { gap: clamp(2px, 1.1vh, 10px); padding: 52px 40px 24px; }
      .header-nav a {
        font-size: clamp(15px, 3.6vh, 24px);
        padding-block: clamp(2px, 0.7vh, 6px);
      }
      .header-nav .nav-dd-panel a { font-size: clamp(12px, 2.9vh, 18px); }
      .nav-dd-list { gap: clamp(2px, 1.1vh, 10px); }
      .nav-dd-list a:first-child { margin-top: clamp(2px, 1.1vh, 10px); }
      .header-nav .btn-partner {
        padding: clamp(5px, 1.2vh, 10px) 26px;
        font-size: clamp(14px, 3.2vh, 20px);
        margin-top: 2px;
      }
    }