/* =========================================================
   TUSK TRAVEL - NEW HOMEPAGE
   Build A: Hero + Intro
   Homepage-only styles. Header/footer remain global.
========================================================= */


/* =========================================================
   1. HOMEPAGE TOKENS
========================================================= */

:root {
   --home-container: 1240px;

   --home-ink: #172126;
   --home-muted: #667078;

   --home-primary: #173f4f;
   --home-primary-dark: #10313e;

   --home-accent: #b30334;

   --home-surface: #ffffff;
   --home-soft: #f6f7f7;
   --home-line: #e5e8e9;

   --home-radius: 12px;

   --home-shadow:
      0 12px 36px rgba(16, 34, 42, .08);
}


/* =========================================================
   2. BASE HOMEPAGE LAYOUT
========================================================= */

.home-main {
   overflow: hidden;
}

.home-container {
   width: min(calc(100% - 40px), var(--home-container));
   margin-inline: auto;
}

.home-eyebrow {
   display: inline-block;
   margin-bottom: 12px;

   color: var(--home-accent);

   font-size: 13px;
   font-weight: 700;
   line-height: 1.3;

   letter-spacing: .08em;
   text-transform: uppercase;
}

.home-eyebrow-light {
   color: #fff;
}


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

.home-btn {
   min-height: 48px;

   display: inline-flex;
   align-items: center;
   justify-content: center;

   padding: 11px 22px;

   border: 1px solid transparent;
   border-radius: 7px;

   font: inherit;
   font-size: 15px;
   font-weight: 700;
   line-height: 1.2;

   text-decoration: none !important;

   cursor: pointer;

   transition:
      background-color .2s ease,
      border-color .2s ease,
      color .2s ease,
      transform .2s ease;
}

.home-btn:hover {
   transform: translateY(-1px);
}

.home-btn-primary,
.home-btn-primary:visited {
   background: var(--home-accent);
   border-color: var(--home-accent);
   color: #fff !important;
}

.home-btn-primary:hover,
.home-btn-primary:focus {
   background: #cf5231;
   border-color: #cf5231;
   color: #fff !important;
}

.home-btn-light,
.home-btn-light:visited {
   background: rgba(255, 255, 255, .96);
   border-color: #fff;
   color: var(--home-primary) !important;
}

.home-btn-light:hover,
.home-btn-light:focus {
   background: #fff;
   border-color: #fff;
   color: var(--home-primary-dark) !important;
}


/* =========================================================
   4. HERO
========================================================= */

.home-hero {
   position: relative;
   min-height: 500px;
   display: flex;
   align-items: center;
   isolation: isolate;
   background: var(--home-primary-dark);
}

.home-hero-media {
   position: absolute;
   inset: 0;
   z-index: -2;
}

.home-hero-media img {
   width: 100%;
   height: 100%;
   display: block;
   object-fit: cover;
   object-position: center;
}

.home-hero::after {
   content: "";
   position: absolute;
   inset: 0;
   z-index: -1;

   background:
      linear-gradient(
         90deg,
         rgba(10, 31, 40, .88) 0%,
         rgba(10, 31, 40, .76) 32%,
         rgba(10, 31, 40, .48) 52%,
         rgba(10, 31, 40, .16) 74%,
         rgba(10, 31, 40, .04) 100%
      );
}

/*
   Do not set width:100% here.
   .home-container already controls the horizontal alignment.
*/
.home-hero-inner {
   position: relative;
}

.home-hero-content {
   max-width: 640px;
   padding: 68px 0 72px;
}

.home-hero h1 {
   max-width: 620px;
   margin: 0;
   color: #fff;

   font-size: clamp(42px, 4.2vw, 60px);
   font-weight: 700;
   line-height: 1.06;
   letter-spacing: -.03em;
}

.home-hero-lead {
   max-width: 585px;
   margin: 18px 0 0;
   color: rgba(255, 255, 255, .92);

   font-size: 18px;
   line-height: 1.55;
}

.home-hero-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   margin-top: 26px;
}

.home-hero-actions .home-btn {
   min-width: 164px;
}

.home-hero-trust {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 12px;

   margin-top: 24px;

   color: rgba(255, 255, 255, .9);
   font-size: 13px;
   line-height: 1.4;
}

.home-hero-trust strong {
   color: #fff;
   font-weight: 700;
}

.home-hero-rating > span {
   margin-right: 7px;
   color: #ffd35a;
   letter-spacing: .05em;
}

.home-hero-trust-divider {
   width: 1px;
   height: 16px;
   background: rgba(255, 255, 255, .38);
}


/* =========================================================
   5. INTRO
========================================================= */

.home-intro {
   padding: 72px 0;

   background: var(--home-surface);

   border-bottom: 1px solid var(--home-line);
}

.home-intro-layout {
   display: grid;
   grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
   gap: clamp(48px, 7vw, 100px);

   align-items: start;
}

.home-intro-heading h2 {
   max-width: 500px;

   margin: 0;

   color: var(--home-ink);

   font-size: clamp(32px, 3.3vw, 46px);
   font-weight: 700;
   line-height: 1.12;

   letter-spacing: -.025em;
}

.home-intro-copy p {
   max-width: 690px;

   margin: 2px 0 0;

   color: var(--home-muted);

   font-size: 17px;
   line-height: 1.75;
}

.home-intro-copy p strong {
   color: var(--home-ink);
}

.home-intro-points {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 12px 26px;

   margin: 28px 0 0;
   padding: 0;

   list-style: none;
}

.home-intro-points li {
   display: flex;
   align-items: center;
   gap: 9px;

   color: var(--home-ink);

   font-size: 15px;
   font-weight: 600;
   line-height: 1.4;
}

.home-point-mark {
   width: 24px;
   height: 24px;

   flex: 0 0 24px;

   display: inline-flex;
   align-items: center;
   justify-content: center;

   border-radius: 50%;

   background: #fbe9e3;
   color: var(--home-accent);

   font-size: 13px;
   font-weight: 800;
}




/* =========================================================
   6. SHARED SECTION HEADING
========================================================= */

.home-section-head {
   margin-bottom: 30px;
}

.home-section-head-split {
   display: flex;
   align-items: end;
   justify-content: space-between;
   gap: 30px;
}

.home-section-head h2 {
   margin: 0;

   color: var(--home-ink);

   font-size: clamp(32px, 3vw, 44px);
   font-weight: 700;
   line-height: 1.12;

   letter-spacing: -.025em;
}

.home-section-head p {
   max-width: 690px;

   margin: 12px 0 0;

   color: var(--home-muted);

   font-size: 16px;
   line-height: 1.65;
}

.home-text-link,
.home-text-link:visited {
   display: inline-flex;
   align-items: center;
   gap: 7px;

   flex: 0 0 auto;

   color: var(--home-accent) !important;

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

   text-decoration: none !important;

   transition:
      color .2s ease,
      gap .2s ease;
}

.home-text-link:hover {
   gap: 10px;

   color: #c94e2d !important;
}


/* =========================================================
   7. POPULAR DESTINATIONS
========================================================= */

.home-destinations {
   padding: 72px 0;

   background: var(--home-soft);
}

.home-destination-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 18px;
}

.home-destination-card {
   position: relative;

   min-height: 250px;

   display: block;

   overflow: hidden;

   border-radius: var(--home-radius);

   background: #dfe4e6;

   box-shadow: 0 6px 18px rgba(17, 33, 41, .05);

   text-decoration: none !important;

   isolation: isolate;
}

.home-destination-media {
   position: absolute;
   inset: 0;
   z-index: -3;
}

.home-destination-media img {
   width: 100%;
   height: 100%;

   display: block;

   object-fit: cover;

   transition: transform .35s ease;
}

.home-destination-overlay {
   position: absolute;
   inset: 0;
   z-index: -2;

   background:
      linear-gradient(
         180deg,
         rgba(7, 24, 31, .02) 20%,
         rgba(7, 24, 31, .18) 58%,
         rgba(7, 24, 31, .72) 100%
      );
}

.home-destination-card::after {
   content: "";

   position: absolute;
   inset: 0;
   z-index: -1;

   border: 1px solid rgba(255, 255, 255, .18);
   border-radius: inherit;

   pointer-events: none;
}

.home-destination-name {
   position: absolute;
   left: 18px;
   right: 18px;
   bottom: 17px;

   color: #fff;

   font-size: 20px;
   font-weight: 700;
   line-height: 1.2;

   text-shadow: 0 2px 10px rgba(0, 0, 0, .22);
}

.home-destination-card:hover .home-destination-media img {
   transform: scale(1.04);
}

.home-destination-mobile-link {
   display: none;
}


/* =========================================================
   8. TABLET - DESTINATIONS
========================================================= */

@media (max-width: 991.98px) {

   .home-destinations {
      padding: 60px 0;
   }

   .home-section-head-split {
      align-items: start;
   }

   .home-destination-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 15px;
   }

   .home-destination-card {
      min-height: 225px;
   }

}


/* =========================================================
   9. MOBILE - DESTINATIONS
========================================================= */

@media (max-width: 575.98px) {

   .home-destinations {
      padding: 46px 0;
   }

   .home-section-head {
      margin-bottom: 22px;
   }

   .home-section-head-split {
      display: block;
   }

   .home-section-head h2 {
      font-size: 29px;
      line-height: 1.13;
   }

   .home-section-head p {
      margin-top: 9px;

      font-size: 15px;
      line-height: 1.6;
   }

   .home-section-head-split > .home-text-link {
      display: none;
   }

   .home-destination-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
   }

   .home-destination-card {
      min-height: 185px;

      border-radius: 10px;
   }

   .home-destination-name {
      left: 13px;
      right: 13px;
      bottom: 12px;

      font-size: 17px;
   }

   .home-destination-mobile-link {
      display: block;

      margin-top: 22px;

      text-align: center;
   }

}


/* =========================================================
   6. TABLET
========================================================= */

@media (max-width: 991.98px) {

   .home-hero {
      min-height: 490px;
   }

   .home-hero-content {
      max-width: 610px;
      padding: 62px 0 66px;
   }

   .home-intro {
      padding: 60px 0;
   }

   .home-intro-layout {
      grid-template-columns: 1fr;
      gap: 24px;
   }

   .home-intro-heading h2 {
      max-width: 650px;
   }

   .home-intro-copy p {
      max-width: 760px;
   }

}


/* =========================================================
   7. MOBILE
========================================================= */

@media (max-width: 575.98px) {

   .home-main {
      padding-bottom: 70px;
   }


   .home-container {
      width: min(calc(100% - 30px), var(--home-container));
   }

   .home-eyebrow {
      margin-bottom: 10px;

      font-size: 11px;
   }

   .home-hero {
      min-height: 500px;
      align-items: flex-end;
   }

   .home-hero::after {
      background:
         linear-gradient(
            180deg,
            rgba(8, 28, 37, .15) 0%,
            rgba(8, 28, 37, .44) 36%,
            rgba(8, 28, 37, .91) 100%
         );
   }

   .home-hero-media img {
      object-position: center;
   }

   .home-hero-content {
      width: 100%;
      padding: 84px 0 38px;
   }

   .home-hero h1 {
      max-width: 330px;
      font-size: clamp(34px, 10vw, 44px);
      line-height: 1.07;
   }

   .home-hero-lead {
      max-width: 330px;
      margin-top: 14px;
      font-size: 15px;
      line-height: 1.55;
   }

   .home-hero-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 9px;

      margin-top: 23px;
   }

   .home-btn {
      width: 100%;
      min-height: 45px;

      padding: 9px 10px;

      font-size: 13px;
   }

   .home-hero-trust {
      gap: 9px;

      margin-top: 20px;

      font-size: 12px;
   }

   .home-hero-trust-divider {
      height: 14px;
   }

   .home-intro {
      padding: 46px 0;
   }

   .home-intro-layout {
      gap: 18px;
   }

   .home-intro-heading h2 {
      font-size: 29px;
      line-height: 1.12;
   }

   .home-intro-copy p {
      font-size: 16px;
      line-height: 1.68;
   }

   .home-intro-points {
      grid-template-columns: 1fr;
      gap: 10px;

      margin-top: 23px;
   }

   .home-intro-points li {
      font-size: 14px;
   }

}


/* =========================================================
   10. BEST-SELLING PRIVATE TOURS
========================================================= */

.home-tours {
   padding: 72px 0;
   background: var(--home-surface);
}

.home-tours-heading {
   max-width: 760px;
   margin-inline: auto;
   text-align: center;
}

.home-tour-tabs {
   display: flex;
   justify-content: center;
   gap: 38px;

   margin: 28px 0 34px;

   border-bottom: 1px solid var(--home-line);
}

.home-tour-tab {
   position: relative;

   min-width: 120px;

   padding: 0 4px 13px;

   border: 0;
   background: transparent;

   color: var(--home-muted);

   font: inherit;
   font-size: 17px;
   font-weight: 700;
   line-height: 1.3;

   cursor: pointer;
}

.home-tour-tab::after {
   content: "";

   position: absolute;
   left: 0;
   right: 0;
   bottom: -1px;

   height: 3px;

   border-radius: 3px 3px 0 0;

   background: transparent;
}

.home-tour-tab.is-active {
   color: var(--home-ink);
}

.home-tour-tab.is-active::after {
   background: var(--home-accent);
}

.home-tour-panel {
   display: none;
}

.home-tour-panel.is-active {
   display: block;
}

.home-tour-slider {
   position: relative;
}

.home-tour-track {
   display: grid;
   grid-auto-flow: column;
   grid-auto-columns: calc((100% - 54px) / 4);
   gap: 18px;

   overflow-x: auto;
   overflow-y: hidden;

   padding: 2px 2px 12px;

   scroll-snap-type: x mandatory;
   scroll-behavior: smooth;
   scroll-padding-inline: 2px;

   overscroll-behavior-x: contain;

   -webkit-overflow-scrolling: touch;

   scrollbar-width: none;
}

.home-tour-track::-webkit-scrollbar {
   display: none;
}

.home-tour-card {
   min-width: 0;

   display: flex;
   flex-direction: column;

   overflow: hidden;

   scroll-snap-align: start;

   border: 1px solid var(--home-line);
   border-radius: var(--home-radius);

   background: #fff;

   box-shadow: 0 6px 20px rgba(16, 34, 42, .055);
}

.home-tour-image {
   position: relative;

   display: block;

   overflow: hidden;

   aspect-ratio: 3 / 2;

   background: #e8ebec;
}

.home-tour-image img {
   width: 100%;
   height: 100%;

   display: block;

   object-fit: cover;

   transition: transform .32s ease;
}

.home-tour-card:hover .home-tour-image img {
   transform: scale(1.035);
}

.home-tour-duration {
   position: absolute;
   top: 12px;
   right: 12px;

   display: inline-flex;
   align-items: center;
   justify-content: center;

   min-height: 30px;

   padding: 6px 11px;

   border-radius: 999px;

   background: rgba(23, 63, 79, .94);
   color: #fff;

   font-size: 12px;
   font-weight: 800;
   line-height: 1;
}

.home-tour-body {
   flex: 1;

   display: flex;
   flex-direction: column;

   padding: 16px;
}

.home-tour-body h3 {
   margin: 0;

   color: var(--home-ink);

   font-size: 17px;
   font-weight: 700;
   line-height: 1.35;
}

.home-tour-body h3 a,
.home-tour-body h3 a:visited {
   color: var(--home-ink) !important;
   text-decoration: none !important;
}

.home-tour-body h3 a:hover {
   color: var(--home-accent) !important;
}

.home-tour-route {
   display: flex;
   align-items: flex-start;
   gap: 8px;

   margin: 11px 0 0;

   color: var(--home-muted);

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

.home-tour-pin {
   position: relative;

   width: 15px;
   height: 15px;

   flex: 0 0 15px;

   margin-top: 2px;

   border: 1.7px solid var(--home-accent);
   border-radius: 50% 50% 50% 0;

   transform: rotate(-45deg);
}

.home-tour-pin::after {
   content: "";

   position: absolute;
   top: 4px;
   left: 4px;

   width: 4px;
   height: 4px;

   border-radius: 50%;

   background: var(--home-accent);
}

.home-tour-actions {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 8px;

   margin-top: 18px;
}

.home-tour-view,
.home-tour-enquire {
   min-height: 40px;

   display: inline-flex;
   align-items: center;
   justify-content: center;

   padding: 8px 9px;

   border-radius: 7px;

   font: inherit;
   font-size: 13px;
   font-weight: 700;
   line-height: 1.2;

   text-align: center;

   cursor: pointer;

   transition:
      background-color .2s ease,
      border-color .2s ease,
      color .2s ease;
}

.home-tour-view,
.home-tour-view:visited {
   border: 1px solid var(--home-primary);

   background: #fff;
   color: var(--home-primary) !important;

   text-decoration: none !important;
}

.home-tour-view:hover,
.home-tour-view:focus {
   background: var(--home-primary);
   color: #fff !important;
}

.home-tour-enquire {
   border: 1px solid var(--home-accent);

   background: var(--home-accent);
   color: #fff;
}

.home-tour-enquire:hover,
.home-tour-enquire:focus {
   border-color: #cf5231;

   background: #cf5231;
   color: #fff;
}

.home-tour-arrow {
   position: absolute;
   top: 42%;
   z-index: 4;

   width: 40px;
   height: 40px;

   display: inline-flex;
   align-items: center;
   justify-content: center;

   padding: 0;

   border: 1px solid var(--home-line);
   border-radius: 50%;

   background: #fff;
   color: var(--home-primary);

   box-shadow: 0 6px 18px rgba(16, 34, 42, .12);

   font-family: Arial, sans-serif;
   font-size: 26px;
   line-height: 1;

   cursor: pointer;

   transform: translateY(-50%);
}

.home-tour-arrow:hover {
   border-color: var(--home-primary);

   background: var(--home-primary);
   color: #fff;
}

.home-tour-arrow-prev {
   left: -20px;
}

.home-tour-arrow-next {
   right: -20px;
}

.home-tour-all {
   margin-top: 20px;

   text-align: right;
}


/* =========================================================
   11. TABLET - TOURS
========================================================= */

@media (max-width: 1199.98px) {

   .home-tour-track {
      grid-auto-columns: calc((100% - 36px) / 3);
   }

}


@media (max-width: 991.98px) {

   .home-tours {
      padding: 60px 0;
   }

   .home-tour-track {
      grid-auto-columns: calc((100% - 18px) / 2);
   }

   .home-tour-arrow-prev {
      left: -8px;
   }

   .home-tour-arrow-next {
      right: -8px;
   }

}


/* =========================================================
   12. MOBILE - TOURS
========================================================= */

@media (max-width: 575.98px) {

   .home-tours {
      padding: 46px 0;
   }

   .home-tours-heading {
      text-align: left;
   }

   .home-tour-tabs {
      gap: 0;

      margin: 22px 0 24px;
   }

   .home-tour-tab {
      flex: 1;

      min-width: 0;

      padding: 0 5px 11px;

      font-size: 15px;
   }

   /*
      Native touch scrolling.
      88% leaves a visible slice of the next card so users
      immediately understand that the row can be swiped.
   */
   .home-tour-track {
      grid-auto-columns: 88%;
      gap: 12px;

      padding: 2px 1px 10px;
   }

   .home-tour-card {
      border-radius: 10px;
   }

   .home-tour-image {
      aspect-ratio: 16 / 10;
   }

   .home-tour-duration {
      top: 10px;
      right: 10px;

      min-height: 28px;

      padding: 5px 10px;

      font-size: 11px;
   }

   .home-tour-body {
      padding: 14px;
   }

   .home-tour-body h3 {
      font-size: 16px;
   }

   .home-tour-route {
      margin-top: 9px;

      font-size: 12px;
   }

   .home-tour-actions {
      margin-top: 15px;
   }

   .home-tour-view,
   .home-tour-enquire {
      min-height: 39px;

      padding: 8px 6px;

      font-size: 12px;
   }

   /*
      Touch is the primary mobile control.
      Hide arrows to avoid covering the card image.
   */
   .home-tour-arrow {
      display: none;
   }

   .home-tour-all {
      margin-top: 18px;

      text-align: center;
   }

}


/* =========================================================
   13. WHY TUSK + TRUST
========================================================= */

.home-why {
   padding: 72px 0;
   background: var(--home-soft);
   border-top: 1px solid var(--home-line);
   border-bottom: 1px solid var(--home-line);
}

.home-why-layout {
   display: grid;
   grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
   gap: clamp(46px, 6vw, 88px);
   align-items: start;
}

.home-why-intro h2 {
   max-width: 520px;
   margin: 0;

   color: var(--home-ink);

   font-size: clamp(32px, 3vw, 44px);
   font-weight: 700;
   line-height: 1.12;
   letter-spacing: -.025em;
}

.home-why-intro p {
   max-width: 560px;
   margin: 18px 0 20px;

   color: var(--home-muted);

   font-size: 16px;
   line-height: 1.7;
}

.home-why-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 26px 30px;
}

.home-why-item {
   display: grid;
   grid-template-columns: 46px minmax(0, 1fr);
   gap: 14px;
   align-items: start;
}

.home-why-icon {
   width: 46px;
   height: 46px;

   display: inline-flex;
   align-items: center;
   justify-content: center;

   border-radius: 50%;

   background: #fff;
   border: 1px solid #e7e9ea;

   color: var(--home-accent);

   box-shadow: 0 5px 16px rgba(16, 34, 42, .05);
}

.home-why-icon svg {
   width: 23px;
   height: 23px;

   fill: none;
   stroke: currentColor;
   stroke-width: 1.7;
   stroke-linecap: round;
   stroke-linejoin: round;
}

.home-why-item h3 {
   margin: 1px 0 6px;

   color: var(--home-ink);

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

.home-why-item p {
   margin: 0;

   color: var(--home-muted);

   font-size: 14px;
   line-height: 1.6;
}


/* Trust strip */

.home-trust-strip {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));

   margin-top: 46px;

   overflow: hidden;

   border: 1px solid var(--home-line);
   border-radius: var(--home-radius);

   background: #fff;
}

.home-trust-item {
   position: relative;

   min-height: 92px;

   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;

   padding: 18px 20px;

   text-align: center;
}

.home-trust-item:not(:last-child)::after {
   content: "";

   position: absolute;
   top: 22%;
   right: 0;
   bottom: 22%;

   width: 1px;

   background: var(--home-line);
}

.home-trust-item strong {
   color: var(--home-primary);

   font-size: 26px;
   font-weight: 800;
   line-height: 1;
}

.home-trust-item span {
   color: var(--home-muted);

   font-size: 13px;
   font-weight: 600;
   line-height: 1.35;
}

.home-trust-rating strong {
   color: var(--home-accent);
}


/* =========================================================
   14. TABLET - WHY TUSK
========================================================= */

@media (max-width: 991.98px) {

   .home-why {
      padding: 60px 0;
   }

   .home-why-layout {
      grid-template-columns: 1fr;
      gap: 34px;
   }

   .home-why-intro p {
      max-width: 760px;
   }

   .home-trust-item {
      min-height: 86px;
      gap: 8px;
      padding: 16px 12px;
   }

   .home-trust-item strong {
      font-size: 23px;
   }

}


/* =========================================================
   15. MOBILE - WHY TUSK
========================================================= */

@media (max-width: 575.98px) {

   .home-why {
      padding: 46px 0;
   }

   .home-why-layout {
      gap: 28px;
   }

   .home-why-intro h2 {
      font-size: 29px;
   }

   .home-why-intro p {
      margin: 14px 0 17px;

      font-size: 15px;
      line-height: 1.65;
   }

   .home-why-grid {
      grid-template-columns: 1fr;
      gap: 20px;
   }

   .home-why-item {
      grid-template-columns: 42px minmax(0, 1fr);
      gap: 12px;
   }

   .home-why-icon {
      width: 42px;
      height: 42px;
   }

   .home-why-icon svg {
      width: 21px;
      height: 21px;
   }

   .home-why-item h3 {
      font-size: 16px;
   }

   .home-why-item p {
      font-size: 13px;
      line-height: 1.55;
   }

   .home-trust-strip {
      grid-template-columns: repeat(2, minmax(0, 1fr));

      margin-top: 32px;
   }

   .home-trust-item {
      min-height: 78px;

      display: block;

      padding: 14px 10px;
   }

   .home-trust-item:nth-child(1),
   .home-trust-item:nth-child(2) {
      border-bottom: 1px solid var(--home-line);
   }

   .home-trust-item:nth-child(odd) {
      border-right: 1px solid var(--home-line);
   }

   .home-trust-item::after {
      display: none !important;
   }

   .home-trust-item strong {
      display: block;

      margin-bottom: 5px;

      font-size: 22px;
   }

   .home-trust-item span {
      display: block;

      font-size: 12px;
   }

}


/* =========================================================
   16. TRAVELLER REVIEWS
========================================================= */

.home-reviews {
   padding: 72px 0;
   background: var(--home-surface);
}

.home-review-summary {
   display: flex;
   align-items: center;
   gap: 12px;

   flex: 0 0 auto;
}

.home-review-summary > div {
   display: grid;
   gap: 2px;
}

.home-review-summary strong {
   color: var(--home-ink);

   font-size: 20px;
   font-weight: 800;
   line-height: 1;
}

.home-review-summary span:not(.home-review-stars) {
   color: var(--home-muted);

   font-size: 12px;
   font-weight: 600;
}

.home-review-stars {
   color: #f2b01e;

   font-size: 16px;
   line-height: 1;

   letter-spacing: .05em;
}

.home-review-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 18px;
}

.home-review-card {
   display: flex;
   flex-direction: column;

   min-height: 100%;

   padding: 22px;

   border: 1px solid var(--home-line);
   border-radius: var(--home-radius);

   background: #fff;

   box-shadow: 0 6px 18px rgba(16, 34, 42, .045);
}

.home-review-card-top {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
}

.home-review-source {
   color: var(--home-muted);

   font-size: 11px;
   font-weight: 700;
   line-height: 1.2;

   text-transform: uppercase;
   letter-spacing: .06em;
}

.home-review-card h3 {
   margin: 18px 0 9px;

   color: var(--home-ink);

   font-size: 19px;
   font-weight: 700;
   line-height: 1.35;
}

.home-review-card > p {
   margin: 0;

   color: var(--home-muted);

   font-size: 14px;
   line-height: 1.65;
}

.home-review-author {
   display: flex;
   align-items: center;
   gap: 11px;

   margin-top: auto;
   padding-top: 20px;
}

.home-review-avatar {
   width: 38px;
   height: 38px;

   flex: 0 0 38px;

   display: inline-flex;
   align-items: center;
   justify-content: center;

   border-radius: 50%;

   background: #fbe9e3;
   color: var(--home-accent);

   font-size: 14px;
   font-weight: 800;
}

.home-review-author > div {
   display: grid;
   gap: 2px;
}

.home-review-author strong {
   color: var(--home-ink);

   font-size: 13px;
   font-weight: 700;
}

.home-review-author span {
   color: var(--home-muted);

   font-size: 12px;
}

.home-review-link {
   margin-top: 22px;

   text-align: right;
}


/* =========================================================
   17. FINAL CTA
========================================================= */

.home-final-cta {
   padding: 64px 0;

   background: var(--home-primary-dark);
}

.home-final-cta-inner {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
   gap: 44px;
   align-items: center;
}

.home-final-cta-copy {
   max-width: 760px;
}

.home-final-cta h2 {
   margin: 0;

   color: #fff;

   font-size: clamp(32px, 3vw, 44px);
   font-weight: 700;
   line-height: 1.12;

   letter-spacing: -.025em;
}

.home-final-cta p {
   max-width: 720px;

   margin: 14px 0 0;

   color: rgba(255, 255, 255, .78);

   font-size: 16px;
   line-height: 1.65;
}

.home-final-note {
   display: flex;
   align-items: center;
   gap: 9px;

   margin-top: 19px;

   color: rgba(255, 255, 255, .9);

   font-size: 13px;
   font-weight: 600;
   line-height: 1.45;
}

.home-final-note-mark {
   width: 24px;
   height: 24px;

   flex: 0 0 24px;

   display: inline-flex;
   align-items: center;
   justify-content: center;

   border-radius: 50%;

   background: rgba(255, 255, 255, .12);
   color: #fff;

   font-size: 13px;
   font-weight: 800;
}

.home-final-actions {
   display: flex;
   flex-direction: column;
   gap: 10px;

   min-width: 190px;
}

.home-final-actions .home-btn {
   width: 100%;
}

.home-btn-whatsapp,
.home-btn-whatsapp:visited {
   background: #fff;
   border-color: #fff;

   color: #1e6d4f !important;
}

.home-btn-whatsapp:hover,
.home-btn-whatsapp:focus {
   background: #f5f7f6;
   border-color: #f5f7f6;

   color: #18583f !important;
}


/* =========================================================
   18. TABLET - REVIEWS + FINAL CTA
========================================================= */

@media (max-width: 991.98px) {

   .home-reviews {
      padding: 60px 0;
   }

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

   .home-review-card:last-child {
      grid-column: 1 / -1;

      max-width: calc(50% - 9px);
   }

   .home-final-cta {
      padding: 56px 0;
   }

   .home-final-cta-inner {
      grid-template-columns: 1fr;
      gap: 28px;
   }

   .home-final-actions {
      flex-direction: row;

      min-width: 0;
      max-width: 410px;
   }

}


/* =========================================================
   19. MOBILE - REVIEWS + FINAL CTA
========================================================= */

@media (max-width: 575.98px) {

   .home-reviews {
      padding: 46px 0;
   }

   .home-review-summary {
      margin-top: 18px;
   }

   .home-review-grid {
      grid-template-columns: 1fr;
      gap: 12px;
   }

   .home-review-card,
   .home-review-card:last-child {
      max-width: none;

      grid-column: auto;

      padding: 18px;
   }

   .home-review-card h3 {
      margin-top: 14px;

      font-size: 17px;
   }

   .home-review-card > p {
      font-size: 13px;
      line-height: 1.6;
   }

   .home-review-author {
      padding-top: 17px;
   }

   .home-review-link {
      margin-top: 20px;

      text-align: center;
   }

   .home-final-cta {
      padding: 46px 0;
   }

   .home-final-cta-inner {
      gap: 24px;
   }

   .home-final-cta h2 {
      font-size: 29px;
   }

   .home-final-cta p {
      margin-top: 11px;

      font-size: 15px;
      line-height: 1.6;
   }

   .home-final-note {
      align-items: flex-start;

      margin-top: 16px;

      font-size: 12px;
   }

   .home-final-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 9px;

      max-width: none;
   }

}