/* =========================================================
   Tusk Travel About Us
   Scoped to body.about-page to avoid affecting other pages.
   ========================================================= */

.about-page {
   --tt-about-ink: #1e2d38;
   --tt-about-muted: #5f6b73;
   --tt-about-accent: #c85232;
   --tt-about-accent-dark: #a43f25;
   --tt-about-line: #dfe3e5;
   --tt-about-soft: #f5f6f6;
   --tt-about-warm: #f7f3ec;
   --tt-about-white: #ffffff;
   color: var(--tt-about-ink);
}

.about-page .tt-about-section {
   padding: 86px 0;
}

.about-page .tt-about-section--soft {
   background: var(--tt-about-soft);
}

.about-page .tt-about-heading {
   margin-bottom: 28px;
}

.about-page .tt-about-heading > span {
   display: block;
   margin-bottom: 8px;
   color: var(--tt-about-accent);
   font-size: 13px;
   font-weight: 700;
   letter-spacing: .08em;
   text-transform: uppercase;
}

.about-page .tt-about-heading h2 {
   max-width: 760px;
   margin: 0;
   color: var(--tt-about-ink);
   font-size: clamp(32px, 3.1vw, 46px);
   font-weight: 600;
   line-height: 1.18;
}

.about-page .tt-about-heading > p {
   max-width: 720px;
   margin: 14px 0 0;
   color: var(--tt-about-muted);
   font-size: 17px;
}

.about-page .tt-about-heading--center {
   max-width: 800px;
   margin-right: auto;
   margin-bottom: 42px;
   margin-left: auto;
   text-align: center;
}

.about-page .tt-about-heading--center h2,
.about-page .tt-about-heading--center > p {
   margin-right: auto;
   margin-left: auto;
}

/* Intro */
.about-page .tt-about-intro__media {
   position: relative;
}

.about-page .tt-about-intro__media::before {
   position: absolute;
   top: 18px;
   right: 18px;
   bottom: -18px;
   left: -18px;
   z-index: -1;
   border: 1px solid #cfd4d6;
   content: "";
}

.about-page .tt-about-intro__media img {
   width: 100%;
   aspect-ratio: 4 / 3;
   object-fit: cover;
}

.about-page .tt-about-intro p {
   margin-bottom: 15px;
   color: #3f4b53;
   font-size: 17px;
   line-height: 1.75;
}

.about-page .tt-about-philosophy {
   display: grid;
   grid-template-columns: 160px 1fr;
   gap: 20px;
   margin-top: 25px;
   padding: 22px 24px;
   border-left: 4px solid var(--tt-about-accent);
   border-radius: 8px;
   background: var(--tt-about-warm);
}

.about-page .tt-about-philosophy strong {
   align-self: center;
   color: var(--tt-about-accent-dark);
   font-family: Georgia, "Times New Roman", serif;
   font-size: 21px;
   line-height: 1.25;
}

.about-page .tt-about-philosophy span {
   color: var(--tt-about-muted);
   font-size: 15px;
   line-height: 1.6;
}

.about-page .tt-about-trustline {
   display: flex;
   flex-wrap: wrap;
   gap: 10px 22px;
   margin-top: 20px;
   color: #34434d;
   font-size: 14px;
   font-weight: 700;
}

.about-page .tt-about-trustline i {
   margin-right: 6px;
   color: var(--tt-about-accent);
}

/* Personal planning */
.about-page .tt-about-process {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 30px 56px;
   max-width: 1050px;
   margin: 0 auto;
}

.about-page .tt-about-process__item {
   display: flex;
   align-items: flex-start;
   gap: 22px;
   padding: 16px 0;
}

.about-page .tt-about-process__icon {
   display: grid;
   flex: 0 0 auto;
   width: 74px;
   height: 74px;
   place-items: center;
   border-radius: 50%;
   background: #eef0f1;
   color: #273a45;
   font-size: 30px;
}

.about-page .tt-about-process__item h3 {
   margin: 0 0 9px;
   color: var(--tt-about-ink);
   font-size: 22px;
   font-weight: 700;
}

.about-page .tt-about-process__item p {
   margin: 0;
   color: var(--tt-about-muted);
   font-size: 16px;
   line-height: 1.65;
}

/* Team */
.about-page .tt-about-team {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 24px;
}

.about-page .tt-about-team__member {
   margin: 0;
   text-align: center;
}

.about-page .tt-about-team__member img {
   display: block;
   width: min(100%, 220px);
   aspect-ratio: 1;
   margin: 0 auto;
   border: 5px solid #fff;
   border-radius: 50%;
   object-fit: cover;
   object-position: center top;
   background: #eceeef;
   box-shadow: 0 4px 16px rgba(30, 45, 56, .12);
}

.about-page .tt-about-team__member figcaption {
   padding-top: 15px;
}

.about-page .tt-about-team__member h3 {
   margin: 0 0 4px;
   color: var(--tt-about-ink);
   font-size: 18px;
   font-weight: 700;
}

.about-page .tt-about-team__member p {
   margin: 0;
   color: var(--tt-about-muted);
   font-size: 14px;
}

/* On-ground service */
.about-page .tt-about-service-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 24px;
}

.about-page .tt-about-service {
   overflow: hidden;
   border: 1px solid var(--tt-about-line);
   border-radius: 10px;
   background: var(--tt-about-white);
}

.about-page .tt-about-service > img {
   width: 100%;
   aspect-ratio: 16 / 10;
   object-fit: cover;
}

.about-page .tt-about-service__body {
   padding: 24px;
}

.about-page .tt-about-service h3 {
   margin: 0 0 14px;
   color: var(--tt-about-ink);
   font-size: 21px;
   font-weight: 700;
}

.about-page .tt-about-service ul {
   margin: 0;
   padding: 0;
   list-style: none;
}

.about-page .tt-about-service li {
   position: relative;
   margin-top: 24px;
   padding-left: 20px;
   color: var(--tt-about-muted);
   font-size: 15px;
   line-height: 1.5;
}

.about-page .tt-about-service li::before {
   position: absolute;
   top: 9px;
   left: 0;
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--tt-about-accent);
   content: "";
}

/* Experience */
.about-page .tt-about-experience-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 28px;
}

.about-page .tt-about-experience {
   margin: 0;
}

.about-page .tt-about-experience img {
   width: 100%;
   aspect-ratio: 4 / 3;
   border-radius: 10px;
   object-fit: cover;
}

.about-page .tt-about-experience > div {
   padding: 19px 2px 0;
}

.about-page .tt-about-experience h3 {
   margin: 0 0 7px;
   color: var(--tt-about-ink);
   font-family: Georgia, "Times New Roman", serif;
   font-size: 26px;
   font-weight: 500;
}

.about-page .tt-about-experience p {
   margin: 0;
   color: var(--tt-about-muted);
   font-size: 15px;
   line-height: 1.65;
}

/* Credentials */
.about-page .tt-about-certificates {
   background: var(--tt-about-warm);
}

.about-page .tt-about-certificate-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 22px;
   max-width: 980px;
   margin: 0 auto;
}

.about-page .tt-about-certificate-card {
   overflow: hidden;
   margin: 0;
   border: 1px solid #d4cec4;
   border-radius: 8px;
   background: #fff;
}

.about-page .tt-about-certificate-card > button {
   position: relative;
   display: block;
   width: 100%;
   height: 235px;
   padding: 0;
   border: 0;
   border-bottom: 1px solid #e3e0db;
   background: #f4f2ee;
   cursor: zoom-in;
}

.about-page .tt-about-certificate-card img {
   width: 100%;
   height: 100%;
   padding: 13px;
   object-fit: contain;
}

.about-page .tt-about-certificate-card__zoom {
   position: absolute;
   right: 10px;
   bottom: 10px;
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 6px 9px;
   border-radius: 4px;
   background: rgba(30, 45, 56, .88);
   color: #fff;
   font-size: 12px;
   font-weight: 700;
}

.about-page .tt-about-certificate-card figcaption {
   display: grid;
   gap: 5px;
   padding: 17px 18px 19px;
}

.about-page .tt-about-certificate-card figcaption strong {
   color: var(--tt-about-ink);
   font-size: 15px;
}

.about-page .tt-about-certificate-card figcaption span {
   color: var(--tt-about-muted);
   font-size: 13px;
}

/* Reviews and latest award */
.about-page .tt-about-reviews {
   padding-top: 70px;
   padding-bottom: 70px;
}

.about-page .tt-about-review-panel {
   display: grid;
   grid-template-columns: minmax(0, 1.5fr) minmax(260px, .7fr);
   align-items: center;
   gap: 35px;
   max-width: 980px;
   margin: 0 auto;
   padding: 30px 34px;
   border: 1px solid var(--tt-about-line);
   border-radius: 10px;
   background: #fff;
}

.about-page .tt-about-eyebrow {
   display: block;
   margin-bottom: 7px;
   color: var(--tt-about-accent);
   font-size: 12px;
   font-weight: 700;
   letter-spacing: .08em;
   text-transform: uppercase;
}

.about-page .tt-about-review-panel h2 {
   max-width: 570px;
   margin: 0 0 22px;
   color: var(--tt-about-ink);
   font-size: clamp(26px, 2.5vw, 36px);
   line-height: 1.25;
}

.about-page .tt-about-rating {
   display: flex;
   align-items: center;
   gap: 22px;
}

.about-page .tt-about-rating > img {
   width: 165px;
   height: auto;
}

.about-page .tt-about-rating strong {
   display: block;
   color: var(--tt-about-ink);
   font-family: Georgia, "Times New Roman", serif;
   font-size: 31px;
   font-weight: 500;
   line-height: 1;
}

.about-page .tt-about-stars {
   display: block;
   margin-top: 7px;
   color: #15927e;
   font-size: 17px;
   letter-spacing: 2px;
}

.about-page .tt-about-rating p {
   margin: 5px 0 0;
   color: var(--tt-about-muted);
   font-size: 13px;
}

.about-page .tt-about-review-links {
   display: flex;
   flex-wrap: wrap;
   gap: 8px 22px;
}

.about-page .tt-about-inline-link {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   margin-top: 18px;
   color: var(--tt-about-accent-dark);
   font-size: 14px;
   font-weight: 700;
   text-decoration: none;
}

.about-page .tt-about-inline-link:hover {
   color: var(--tt-about-ink);
}

.about-page .tt-about-latest-award {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 18px;
   padding-left: 34px;
   border-left: 1px solid var(--tt-about-line);
}

.about-page .tt-about-latest-award img {
   width: 112px;
   max-height: 130px;
   object-fit: contain;
}

.about-page .tt-about-latest-award strong {
   display: block;
   margin-bottom: 5px;
   color: var(--tt-about-ink);
   font-size: 16px;
}

.about-page .tt-about-latest-award span {
   display: block;
   color: var(--tt-about-muted);
   font-size: 13px;
   line-height: 1.5;
}

/* Guest proof links */
.about-page .tt-about-proof-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 24px;
}

.about-page .tt-about-proof {
   overflow: hidden;
   border: 1px solid var(--tt-about-line);
   border-radius: 10px;
   background: #fff;
   color: inherit;
   text-decoration: none;
   transition: border-color .2s ease, transform .2s ease;
}

.about-page .tt-about-proof:hover {
   transform: translateY(-3px);
   border-color: #adb6ba;
   color: inherit;
}

.about-page .tt-about-proof > img {
   width: 100%;
   aspect-ratio: 16 / 10;
   object-fit: cover;
}

.about-page .tt-about-proof > span {
   display: grid;
   grid-template-columns: auto 1fr;
   column-gap: 13px;
   padding: 22px;
}

.about-page .tt-about-proof i {
   grid-row: 1 / span 2;
   color: var(--tt-about-accent);
   font-size: 25px;
}

.about-page .tt-about-proof strong {
   color: var(--tt-about-ink);
   font-size: 18px;
}

.about-page .tt-about-proof small {
   margin-top: 3px;
   color: var(--tt-about-muted);
   font-size: 13px;
}

/* CTA */
.about-page .tt-about-cta {
   padding: 70px 0;
   background: #183548;
   color: #fff;
}

.about-page .tt-about-cta__inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 45px;
}

.about-page .tt-about-cta__inner > div:first-child {
   max-width: 720px;
}

.about-page .tt-about-cta span {
   display: block;
   margin-bottom: 8px;
   color: #efb56b;
   font-size: 13px;
   font-weight: 700;
   letter-spacing: .08em;
   text-transform: uppercase;
}

.about-page .tt-about-cta h2 {
   margin: 0;
   color: #fff;
   font-size: clamp(30px, 3vw, 43px);
   line-height: 1.2;
}

.about-page .tt-about-cta p {
   max-width: 650px;
   margin: 14px 0 0;
   color: #d7e0e5;
   font-size: 16px;
}

.about-page .tt-about-cta__actions {
   display: flex;
   flex: 0 0 auto;
   gap: 12px;
}

.about-page .tt-about-btn-light {
   border: 1px solid rgba(255, 255, 255, .75);
   color: #fff;
}

.about-page .tt-about-btn-light:hover {
   border-color: #fff;
   background: #fff;
   color: #183548;
}

/* Certificate lightbox */
.about-page.tt-about-lightbox-open {
   overflow: hidden;
}

.about-page .tt-about-lightbox {
   position: fixed;
   z-index: 99999;
   inset: 0;
   display: none;
   align-items: center;
   justify-content: center;
   padding: 28px;
   background: rgba(10, 18, 24, .92);
}

.about-page .tt-about-lightbox.is-open {
   display: flex;
}

.about-page .tt-about-lightbox__content {
   max-width: 920px;
   max-height: 92vh;
}

.about-page .tt-about-lightbox__content img {
   display: block;
   max-width: 100%;
   max-height: 92vh;
   margin: auto;
   object-fit: contain;
}

.about-page .tt-about-lightbox__close {
   position: absolute;
   top: 16px;
   right: 18px;
   display: grid;
   width: 46px;
   height: 46px;
   padding: 0;
   place-items: center;
   border: 1px solid rgba(255, 255, 255, .65);
   border-radius: 50%;
   background: transparent;
   color: #fff;
   font-size: 21px;
}

.about-page .tt-about-lightbox__close:hover {
   background: #fff;
   color: #172c3a;
}

/* Tablet */
@media (max-width: 991.98px) {
   .about-page .tt-about-section {
      padding: 68px 0;
   }

   .about-page .tt-about-intro__media::before {
      display: none;
   }

   .about-page .tt-about-process {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 24px 34px;
   }

   .about-page .tt-about-team {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }

   .about-page .tt-about-service-grid,
   .about-page .tt-about-experience-grid,
   .about-page .tt-about-proof-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }

   .about-page .tt-about-service:last-child,
   .about-page .tt-about-experience:last-child,
   .about-page .tt-about-proof:last-child {
      grid-column: 1 / -1;
      width: calc(50% - 12px);
      margin-right: auto;
      margin-left: auto;
   }

   .about-page .tt-about-review-panel {
      grid-template-columns: 1fr;
   }

   .about-page .tt-about-latest-award {
      justify-content: flex-start;
      padding-top: 25px;
      padding-left: 0;
      border-top: 1px solid var(--tt-about-line);
      border-left: 0;
   }

   .about-page .tt-about-cta__inner {
      display: block;
   }

   .about-page .tt-about-cta__actions {
      margin-top: 26px;
   }
}

/* Mobile */
@media (max-width: 575.98px) {
   .about-page .tt-about-section {
      padding: 52px 0;
   }

   .about-page .tt-about-heading {
      margin-bottom: 24px;
   }

   .about-page .tt-about-heading--center {
      margin-bottom: 30px;
      text-align: left;
   }

   .about-page .tt-about-heading h2 {
      font-size: 30px;
   }

   .about-page .tt-about-heading > p {
      font-size: 16px;
   }

   .about-page .tt-about-intro p {
      font-size: 16px;
   }

   .about-page .tt-about-philosophy {
      grid-template-columns: 1fr;
      gap: 7px;
      padding: 19px 18px;
   }

   .about-page .tt-about-trustline {
      display: grid;
      gap: 8px;
   }

   .about-page .tt-about-process {
      grid-template-columns: 1fr;
      gap: 4px;
   }

   .about-page .tt-about-process__item {
      gap: 16px;
      padding: 16px 0;
   }

   .about-page .tt-about-process__icon {
      width: 62px;
      height: 62px;
      font-size: 26px;
   }

   .about-page .tt-about-process__item h3 {
      font-size: 20px;
   }

   .about-page .tt-about-process__item p {
      font-size: 15px;
   }

   .about-page .tt-about-team {
      gap: 22px 12px;
   }

   .about-page .tt-about-team__member h3 {
      font-size: 16px;
   }

   .about-page .tt-about-team__member p {
      font-size: 12px;
      line-height: 1.45;
   }

   .about-page .tt-about-service-grid,
   .about-page .tt-about-experience-grid,
   .about-page .tt-about-proof-grid {
      grid-template-columns: 1fr;
   }

   .about-page .tt-about-service:last-child,
   .about-page .tt-about-experience:last-child,
   .about-page .tt-about-proof:last-child {
      grid-column: auto;
      width: 100%;
   }

   .about-page .tt-about-service__body {
      padding: 21px;
   }

   .about-page .tt-about-certificate-grid {
      grid-template-columns: repeat(3, 220px);
      gap: 14px;
      margin-right: -12px;
      padding-right: 12px;
      overflow-x: auto;
      scroll-snap-type: x proximity;
      scrollbar-width: thin;
   }

   .about-page .tt-about-certificate-card {
      scroll-snap-align: start;
   }

   .about-page .tt-about-certificate-card > button {
      height: 185px;
   }

   .about-page .tt-about-review-panel {
      padding: 25px 20px;
   }

   .about-page .tt-about-rating {
      display: block;
   }

   .about-page .tt-about-rating > img {
      width: 170px;
      margin-bottom: 18px;
   }

   .about-page .tt-about-latest-award {
      align-items: flex-start;
   }

   .about-page .tt-about-latest-award img {
      width: 92px;
   }

   .about-page .tt-about-cta {
      padding: 52px 0;
   }

   .about-page .tt-about-cta__actions {
      display: grid;
   }

   .about-page .tt-about-cta__actions .btn {
      width: 100%;
   }

   .about-page .tt-about-lightbox {
      padding: 58px 10px 14px;
   }

   .about-page .tt-about-lightbox__close {
      top: 8px;
      right: 9px;
   }
}

@media (prefers-reduced-motion: reduce) {
   .about-page .tt-about-proof {
      transition: none;
   }
}