:root {
    --fBenton:  'BentonSans', 'Helvetica Neue', Helvetica, sans-serif;
    --fGuardian: 'Guardian Egyptian Web', serif;
    --Amex-Dark-Gray: #333;
    --Amex-Dark-Blue: #00175A;
    --Amex-Blue: #006FCF;
    --Amex-Blue-Tint-10: #F1F3F5;
    --Amex-Gray-100: #D9D9D9;
    --Amex-Dark-Blue-Tint-20: #CDD1DD;
    --light-grey: #F5F5F5;

}
body {
  --amex-nav-height: 64px;
  --amex-subnav-height: calc(75px - 4px); /* currently 75px in height but we're positioning it at 60px from top */
}
body.webview {
  --amex-nav-height: 0px;
  --amex-subnav-height: 0px;
}

/* .subnav,
.subnav-25BG {
    position: relative;
} */

.nowrap {
    white-space: nowrap;
}

section {
    width: initial;
    max-width: initial;
}

body {
    background: #fff;
}

html {
  scroll-behavior: smooth;

  @media (prefers-reduced-motion: reduce) {
    scroll-behavior: initial;
  }
}

body {
    font-family: var(--fBenton);
    scroll-behavior: smooth;

  @media (prefers-reduced-motion: reduce) {
    scroll-behavior: initial;
  }
}

p {
    font-family: var(--fBenton);
    font-size: calc(1.8rem * .625);
    font-style: normal;
    font-weight: 400;
    line-height: calc(2.8rem * .625);
    color: var(--Amex-Dark-Gray);

    @media (width < 768px) {
      font-size: calc(1.4rem * .625);
      line-height: calc(2.2rem * .625);
    }
}

p:last-of-type {
    margin-bottom: 0;
}

a:focus-visible,
button:focus-visible {
    outline: 1px dashed currentColor;
    outline-offset: 3px;
}

/* Accessibility */
[data-fouc] {
    opacity: 0;
}

.sr-only:not(:focus):not(:active) {
    clip: rect(0 0 0 0); 
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap; 
    width: 1px;
}

@media (prefers-reduced-motion: reduce) {
    [data-fouc] {
        opacity: 1;
    }
}

/* Utilities */
.relative { position: relative; }

.py-lg { padding-block: calc(6rem * .625); }

.pt-lg { padding-top: calc(6rem * .625); }

.py-md { padding-block: calc(4rem * .625); }

.my-lg { margin-block: calc(6rem * .625); }     

.my-30 { margin-block: calc(3rem * .625); }

.mb-lg { margin-bottom: calc(6rem * .625); }

.c-amex-blue { color: var(--Amex-Blue); }
.c-amex-dark-blue { color: var(--Amex-Dark-Blue); }

.bg-amex-dark-blue { background: var(--Amex-Dark-Blue); }
.bg-amex-blue { background: var(--Amex-Blue); }

.bg-bar-2 { background: #003886; }
.bg-bar-3 { background: #0059B2; }

.bg-amex-blue-08 { background: #ebf4fb; }

.bg-amex-blue-tint-10 { background: var(--Amex-Blue-Tint-10); }

.t-bold { font-weight: 700; }

.t-med { font-weight: 500; }

.t-center { text-align: center; }

@media (max-width: 767px) {
    .py-lg { padding-block: calc(4rem * .625) }
    .pt-lg { padding-top: calc(3rem * .625); }
    .py-md { padding-block: calc(2.5rem * .625); }
    .my-lg { margin-block: calc(3rem * .625); }
    .mb-lg { margin-bottom: calc(4rem * .625); }
}

.t-center {
    text-align: center;
}


/* Typography */
h1, h2, h3, h4, h5 {
    margin: 0;
    padding: 0;
    border: 0;
}

h2 {
    font-family: var(--fBenton);
    font-size: calc(3.8rem * .625);
    font-style: normal;
    font-weight: 500;
    line-height: calc(4.4rem * .625);
    margin-bottom: calc(2rem * .625);
}

@media (max-width: 767px) {
    h2 {
        font-size: calc(2.8rem * .625);
        line-height: calc(3.6rem * .625);
    }
}

h3,
.h3 {
    font-size: calc(2.4rem * .625);
    line-height: calc(3.2rem * .625);
    font-weight: 500;
    margin-bottom: calc(2rem * .625);
}

@media (max-width: 767px) {
    h3,
    .h3 {
        font-size: calc(2rem * .625);
        line-height: calc(2.6rem * .625);
        margin-bottom: calc(1.5rem * .625);
    }
}

h4 {
    font-size: calc(2rem * .625);
    font-style: normal;
    font-weight: 500;
    line-height: calc(2.8rem * .625);
    border: initial;
}

@media (max-width: 767px) {
    h4 {
        font-size: calc(1.6rem * .625);
        font-style: normal;
        font-weight: 500;
        line-height: calc(2.2rem * .625);
    }
}

.data-h1 {
    font-family: var(--fBenton);
    font-size: calc(2.4rem * .625);
    font-style: normal;
    font-weight: 400;
    line-height: calc(3.2rem * .625);
    margin-bottom: calc(3rem * .625);
}

.data-h2,
.data-h1-sm {
    font-size: calc(2rem * .625);
    line-height: calc(2.7rem * .625);
    font-weight: 400;
}

@media (max-width: 1079px) {
    .data-h1,
    .data-h1-sm {
        font-size: calc(2rem * .625);
        line-height: calc(2.6rem * .625);
    }

    .data-h2 {
        font-size: calc(1.6rem * .625);
        line-height: calc(2.2rem * .625);
    }

}

/* Containers */
  .outer-grid {
    --_bleed: calc(1.6rem * .625);
    --_max-width: 1200px;
    display: grid;
    grid-template-columns:
      [bleed-start]
      minmax(var(--_bleed), 1fr)
      [content-start]
      minmax(0, var(--_max-width))
      [content-end]
      minmax(var(--_bleed), 1fr)
      [bleed-end];
    width: 100%;
  }

.container {
    margin-inline: auto;
    padding-inline: calc(1.6rem * .625);
    width: 100%;
}

  .container > .container {
    padding-inline: 0;
  }

    .container--narrow {
        max-width: 732px;
    }

    .container--lg {
        max-width: 1080px;
    }

    .container--xl {
        /* max-width: 1140px;
        padding-inline: calc(2rem * .625); */
        max-width: 1440px;
        padding-inline: calc(16rem * .625);
    }

    .container--wide-sm {
        max-width: 1240px;
    }

    .container--wide {
        max-width: 1480px;
    }

    /* @media (min-width: 1440px) {
        .container--xl {
            max-width: 1240px;
        }
    } */
    @media (max-width: 1079px) {
        .container--xl {
            padding-inline: 15%;
        }
    }

    @media (max-width: 991px) {
        .container--xl {
            padding-inline: calc(1.6rem * .625);
            max-width: 732px;
        }
    }

    .container--px-0 {
        padding-inline: 0;
    }

/* Component Share Button */
.c-share-button {
    position: absolute;
    top: 0;
    padding: 0;
    right: calc(2rem * .625);
    cursor: pointer;
    border: none;
    display: flex;
    align-items: center;
    gap: calc(0.6rem * .625);
    background: none;
    z-index: 2;
}

.c-share-button.c-share-button--mobile { 
  position: relative;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  min-width: 0;
  width: max-content;
  margin-top: auto;
  margin-left: auto;
  margin-right: 10px;
  margin-bottom: 10px;
  background: rgba( 0 0 0 / 0.5);
  color: #fff;
  padding-block: 8px;
  padding-inline: 10px;
  flex-flow: row;
  color: white;
  border-radius: 3px;
  font-size: calc(1.2rem * .625);
  font-weight: 500;
  font-family: var(--fBenton);
  line-height: calc(1.4rem * .625);

  p {
    font-size: inherit;
    font-weight: 500;
    font-family: var(--fBenton);
  }

  img {
    color: white;
  }

  & > .link-copied {
    background: rgba( 0 0 0 / 0.5);
    color: #fff;
    padding-inline: 8px;
    left: -10px !important;
  }
}

.c-share-button .link-copied {
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease-in;
    font-size: calc(1.2rem * .625);
    position: absolute;
    width: max-content;
    top: -30px;
    left: -100%;
}

.c-share-button .link-copied.show {
    opacity: 1;
    visibility: visible;
    transition: all 0.2s ease-in;
}


@media (max-width: 991px) {
    .c-share-button {
        position: relative;
        right: initial;
        margin-bottom: 0;
        display: flex;
        margin-left: auto;
        
    }
}

/* Component HR */
.c-hr {
    border: 0;
    height: 1px;
    background: #CDD1DD;
    margin-block: calc(4rem * .625);
}

@media (max-width: 767px) {
    .c-hr {
        margin-block: calc(2rem * .625);
    }
}

/* Component Blockquote */
.c-blockquote {
    display: flex;
    flex-flow: column;
    gap: calc(2rem * .625);
    position: relative;
}

    .c-blockquote__quote-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        width: 24px;
        height: 16px;
    }

    .c-blockquote p {
        margin: 0;
        text-indent: 34px;
        font-size: calc(2.2rem * .625);
        line-height: calc(3.4rem * .625);

        @media (width < 768px) {
          font-size: calc(1.8rem * .625);
          line-height: calc(3rem * .625);
        }
    }

    .c-blockquote__footer {
        display: grid;
    }

   .c-blockquote__author {
        font-size: calc(1.8rem * .625);
        line-height: calc(2.6rem * .625);
        font-weight: 500;
   }

   .c-blockquote__title {
        font-size: calc(1.6rem * .625);
        line-height: calc(2.4rem * .625);
        font-weight: 400;
   }

/* Section Hero */
.s-hero {
    width: 100%;
    height: 100%;
    min-height: calc(100vh - 60px);
    /* background-image: url('../img/gtt2026/Hero_Desktop.jpg?v=0');
    background-size: cover;
    background-position: center; */
    color: #fff;
    display: flex;
    margin-top: -75px;
    /* padding-inline: calc(2rem * .625); */
    display: grid;
    grid-template-rows: 1fr max-content;
    background: #000;

    @media (width < 768px) {
      grid-template-rows: 1fr;
    }
}

  .s-hero > * {
    min-width: 0;
  }

  .bg-hero {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    z-index: 1;
    height: 100%;
    width: 100%;

    @media (width < 768px) {
      grid-row: 1;
    }

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

  /* .s-hero::after  {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.20) 8.81%, rgba(0, 0, 0, 0.00) 76.5%);
  } */

/* @media (max-width: 767px) {
    .s-hero {
        background-image: url('../img/gtt2026/Hero_Mobile.jpg?v=0');
    }
} */

    .s-hero img {
        max-width: 100%;
    }

    .s-hero__content {
        display: flex;
        flex-flow: column;
        justify-content: space-between;
        gap: 40px;
        width: 100%;
        margin-inline: auto;
        padding-top: 160px;
        z-index: 2;
        grid-row: 1;
        grid-column: 1 / -1;
        overflow-x: hidden;
    }


    @media (max-width: 767px) {
        .s-hero__content {
            margin-top: 77px;
            padding-top: 60px;
        }
    }

    .s-hero__logobox {
        /* background: rgba(11, 18, 18, 0.50); */
        /* padding-inline: calc(2rem * .625); */
        /* padding-block: calc(1.5rem * .625); */
        margin-bottom: calc(2rem * .625);
        margin-right: auto;
    }

    @media (max-width: 767px) {
        .s-hero__logobox {
            margin-bottom: calc(2rem * .625);
        }
    }

    .s-hero h1 {
        color: #fff;
        text-align: left;
        /* text-shadow: 0 2px 3px rgba(0, 0, 0, 0.15); */
        font-family: var(--fBenton);
        font-size: calc(7.2rem * .625);
        font-style: normal;
        font-weight: 800;
        line-height: 94.44%;
        margin: initial;
        margin-bottom: calc(2rem * .625);
        text-transform: uppercase;
    }

    @media (max-width: 767px) {
        .s-hero h1 {
            font-size: calc(4.8rem * .625);
            line-height: calc(4.6rem * .625);
        }
    }

    .s-hero__bottom-bg {
      grid-column: 1 / -1;
      /* grid-row: 1 / -1; */
      background: rgba(0 0 0 / 0.3);
      z-index: 2;
      margin-top: auto;
      overflow-x: clip;
      grid-row: 2;

      @media (width < 768px) {
        grid-row: 2;
      }
    }


/* embla carousel */
.embla {
    --slide-spacing: 15px;
    --slide-size: 65%;

    

    @media (width >= 768px) {
      --slide-spacing: 30px;
      --slide-size: 50%;
    }

    @media (width >= 1024px) {
      --slide-size: 33.333%;
    }

    @media (width >= 1200px) {
      --slide-size: 25%;
    }
}
/* .embla__viewport {
  overflow: hidden;
} */

.embla__container {
  display: flex;
  touch-action: pan-y pinch-zoom;
  margin-left: calc(var(--slide-spacing) * -1);
}

.embla__slide {
  flex: 0 0 var(--slide-size);
  min-width: 0;
  padding-left: var(--slide-spacing);
  max-width: calc(100vw - (16px * 2));
}

.embla__dots {
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.embla__dot {
    appearance: none;
    background-color: transparent;
    touch-action: manipulation;
    display: inline-flex;
    text-decoration: none;
    cursor: pointer;
    border: 0;
    padding: 0;
    margin: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    position: relative;
    color: white;

    &::before {
      width: calc(0.8rem * .625);
      height: calc(0.8rem * .625);
      border-radius: 50%;
      position: absolute;
      display: flex;
      align-items: center;
      background: #8E9092;
      content: '';
    }
}

  .embla__dot--selected {
    &::before {
      background: #006FCF;
      width: 12px;
      height: 12px;
    }
  }

/* Section Header */

.s-header__nav {
    max-width: 1240px;
    width: 100%;
    padding-top: calc(2.5rem * .625);
    padding-bottom: calc(6rem * .625);
    padding-inline: calc(1.6rem * .625);
    margin-inline: auto;
    color: white;
    max-height: min-content;
    position: relative;
}


    .s-header__nav-slide {
        display: flex;
        flex-flow: column;
        gap: calc(1.2rem * .625);
        font-size: calc(1.8rem * .625);
        font-style: normal;
        font-weight: 500;
        line-height: 140%; 
        color: #fff;
        text-decoration: none;
        /* height: 100%; */
        transition: all 0.2s ease-in;
        border-radius: 8px;
        border: 1px solid var(--Amex-Dark-Gray, #333);
        box-shadow: 0 1px 3px 0 rgba(255, 255, 255, 0.20);

        @media (width < 768px) {
          font-size: calc(1.6rem * .625);
        }

        &:hover {
          text-decoration: underline;
        }
    }

    .s-header__nav-slide.slick-slide {
      display: flex !important;
    }

    .s-header__nav-link {
      padding-inline: calc(1.6rem * .625);
      padding-bottom: calc(1.2rem * .625);
      display: flex;
      color: inherit;
      text-decoration: none;
      text-wrap: nowrap;
    }

    .s-header__nav-link:hover {
        text-decoration: underline;
        transition: all 0.2s ease-in;
    }

    .s-header__nav-img {
        width: 100%;
        height: 115px;
        object-fit: cover;
        overflow: hidden;
        border-radius: 8px 8px 0 0;
    }

    .s-header__nav-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: all 0.2s ease-in;
    }

/* Component Mobile Nav */
.c-mobile-nav {
    display: grid;
    grid-template-columns: 1fr 42px;
    gap: calc(1.2rem * .625) calc(2rem * .625);
    background: #fff;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    padding-top: calc(1.2rem * .625);
    z-index: 2;
}

    .c-mobile-nav__dropdown-header {
        display: grid;
        grid-template-columns: 1fr 42px;
        gap: calc(1.2rem * .625) calc(2rem * .625);
        background: #fff;
        padding-top: calc(1.2rem * .625);
        padding-bottom: calc(1.2rem * .625);
    }

    body.mobile-dropdown-open {
        overflow: hidden;
    }

    .c-mobile-nav__current {
        font-family: var(--fBenton);
        font-size: calc(1.4rem * .625);
        font-style: normal;
        font-weight: 500;
        line-height: calc(1.8rem * .625);
        grid-column: 1;
        padding-left: calc(2rem * .625);
        display: grid;
        perspective: 400px;
    }


    .c-mobile-nav__current .trend-name {
        grid-column: 1;
        grid-row: 1;
        visibility: hidden;
    }

    .c-mobile-nav__current .trend-name.active {
        visibility: visible;
    }

    .c-mobile-nav__menu-toggle {
        width: 22px;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        grid-column: 2;
        margin-right: calc(2rem * .625);
        border: none;
        background: none;
        padding: 0;
        cursor: pointer;
    }

    .c-mobile-nav__menu-icon {
        width: 22px;
    }
    .c-mobile-nav__close-icon {
        /* display: none; */
    }

    .c-mobile-nav__progress {
        position: relative;
        height: 5px;
        width: 100%;
        background: linear-gradient(180deg, #CDD1DD 0%, #E6E8EE 100%);
        display: grid;
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .c-mobile-nav__progress-inner {
        background: linear-gradient(180deg, #0059B2 0%, #006FCF 100%);
        width: 0%;
    }
    .c-mobile-nav__dropdown {
        display: none;
        position: fixed;
        top: 0;
        width: 100%;
        background: #fff;
        z-index: 99;
    }

    .c-mobile-nav__dropdown.open {
        display: grid;
    }

    .c-mobile-nav__body {
        display: grid;
        gap: calc(3rem * .625);
        border-top: 1px solid #DDD;
        border-bottom: 1px solid #DDD;
        padding-top: calc(3rem * .625);
        padding-bottom: calc(3rem * .625);
        padding-inline: calc(2rem * .625);
    }

    .c-mobile-nav__dropdown-heading {
        color: #333;
        font-family: var(--fBenton);
        font-size: calc(1.8rem * .625);
        font-style: normal;
        font-weight: 700;
        line-height: calc(2.2rem * .625);
    }

    .c-mobile-nav__dropdown ul {
        display: grid;
        gap: calc(1.5rem * .625);
    }


    .c-mobile-nav__download {
        display: flex;
        height: 40px;
        padding: 8px 14px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        align-self: stretch;
        border-radius: 4px;
        border: 1px solid var(--Amex-Blue);
        background: #FFF;
        color: var(--Amex-Blue);
        text-align: center;
        font-family: var(--fBenton);
        font-size: calc(1.3rem * .625);
        font-style: normal;
        font-weight: 400;
        line-height: calc(1.3rem * .625);
        letter-spacing: 0.3px;
        text-decoration: none;
    }

@media (min-width: 768px) {
    .c-mobile-nav {
        display: none;
    }
}


.s-trend {
  scroll-margin-top: calc(var(--amex-nav-height) + var(--amex-subnav-height));
}

/* Section trend-intro */
.s-trend-intro {
  padding-top: calc(6rem * 0.625);
}

.s-trend-intro h3 {
    font-size: calc(2.4rem * .625);
    font-style: normal;
    font-weight: 500;
    line-height: calc(3.4rem * .625);
    margin-bottom: calc(3rem * .625);
}

@media (max-width: 767px) {
    .s-trend-intro h3 {
        font-size: calc(2rem * .625);
        font-style: normal;
        font-weight: 500;
        line-height: calc(2.6rem * .625);
        margin-bottom: calc(4rem * .625);
    }
}

.s-trend-intro__banner {
  margin-block: calc(4rem * .625);

  @media (width < 1080px) {
    margin-bottom: 0;
  }

  @media (width >= 768px) {
    margin-top: calc(8rem * .625);
  }
}

.s-trend-intro__top-priority {
  grid-column: content;
  grid-row: 1;
  margin-left: calc(40% + 8px);
  padding-left: calc(6rem * .625);
  padding-block: calc(8rem * .625);
  color: var(--Amex-Dark-Blue);

  @media (max-width: 991px) {
    padding-left: 0;
  }

  @media (max-width: 767px) {
    padding-inline: 0;
    grid-row: 2;
    margin-left: 0;
    padding-block: calc(3rem * .625);
  }

  h3 {
    font-weight: 500;
    font-size: calc(2.4rem * .625);
    line-height: calc(3rem * .625);

    @media (min-width: 768px) {
      font-size: calc(3rem * .625);
      line-height: calc(3.8rem * .625);
    }

    span {
      font-weight: 700;
      font-size: calc(1.4rem * .625);
      line-height: calc(2.2rem * .625);
      display: block;
      margin-bottom: calc(0.8rem * .625);
      text-transform: uppercase;

      @media (min-width: 768px) {
        font-size: calc(1.8rem * .625);
        line-height: calc(2.8rem * .625);
      }
    }
  }

  .stat {
    display: flex;
    flex-flow: row;
    gap: calc(1rem * .625);
    padding-block: calc(3rem * .625);
    border-bottom: 1px solid var(--Amex-Dark-Blue-Tint-20);

    &:first-of-type {
      padding-top: 0;
    }

    &:last-of-type {
      padding-bottom: 0;
      border-bottom: none;
    }

    p {
      color: var(--Amex-Dark-Blue);
      font-size: calc(2rem * .625);
      line-height: calc(2.7rem * .625);

      @media (width < 768px) {
        font-size: calc(1.6rem * .625);
        line-height: calc(2.2rem * .625);
      }
    }
  }

  .number {
    font-size: calc(3.6rem * .625);
    line-height: 1;
    font-weight: 700;

    @media (min-width: 768px) {
      font-size: calc(4.4rem * .625);
    }

    span {
      font-size: 0.7em;
      vertical-align: top;
    }
  }
}

  .trends-intro-photo {
    grid-column: 1 / span 2;
    grid-row: 1;
    /* Container grid bleed calc */
    --_bleed-size: calc((100vw - 1200px) / 2);
    /* bleed + 40% of the second column */
    max-width: calc(var(--_bleed-size) + 0.4 * 1200px);
    width: 100%;
    overflow: clip;
    @media (min-width: 1200px) {
      max-height: 620px;
    }

    @media (width <= 767px) {
      max-width: 100%;
      max-height: 440px;
      grid-column: bleed;
    }
  }

    .trends-intro-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }


/* Section The Trends */
.s-the-trends {
    position: relative;
    overflow-x: clip;
}

/* Component Sidebar Nav */
.c-sidebar {
    position: sticky;
    top: 0px;
    left: 0;
    z-index: 3;
    padding-inline: 0;
}

  .sidebar-header {
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    margin-bottom: 10px;
  }

  .sidebar-btn {
    padding: 8px;
    border: none;
    background: transparent;
    display: grid;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease-in;
    cursor: pointer;

    &:hover {
      background: rgba(0, 111, 207, 0.08);
      transition: all 0.2s ease-in;
    }

    svg {
      width: 16px;
      height: 16px;
    }
  }

  .sidebar-open-btn {
    position: absolute;
    top: calc(90px + 75px);
    left: 0;
    z-index: 2;
    padding: 15px;
    background: #fff;
    box-shadow: 0 2px 6px 0 rgba(51, 51, 51, 0.15);
    border-radius: 0 4px 4px 0;
    border-top: 1px solid #EDEDED;
    border-right: 1px solid #EDEDED;
    border-bottom: 1px solid #EDEDED;


    &:hover {
      background: #fff;

      > div {
        background: rgba(0, 111, 207, 0.08);
      }
    }


    > div {
      padding: 8px;
    }
  }

  .sidebar-heading {
    font-size: calc(1.6rem * .625);
    line-height: calc(1.8rem * .625);
    font-weight: 800;
    text-transform: uppercase;
  }


    .c-sidebar__nav {
        width: 148px;
        padding: 15px;
        border-radius: 0 4px 4px 0;
        border: 1px solid #EDEDED;
        border-left: none;
        background: #FFF;
        box-shadow: 0px 2px 6px 0px rgba(51, 51, 51, 0.15);
        float: left;
        margin-top: calc(90px + 75px);
        margin-left: 0;
        position: relative;
        z-index: 9;

        &.closed {
          display: none;
        }
    }

    @media (max-width: 1079px) {
        .c-sidebar {
            display: none;
        }
        .c-sidebar__nav {
            margin-left: 0;
        }
    }

    @media (max-width: 991px) {
        .c-sidebar {
            display: none;
        }
    }

    .c-sidebar ul {
        display: flex;
        flex-flow: column;
    }

    .c-sidebar li {
        border-bottom: 1px solid #D9D9D6;

        &:last-of-type {
          border-bottom: none;
        }
    }

    .c-sidebar__link,
    .c-sidebar__download {
        font-size: calc(1.3rem * .625);
        line-height: calc(1.9rem * .625);
        font-weight: 500;
        padding-inline: calc(0.6rem * .625);
        padding-block: calc(0.8rem * .625);
        display: block;
        text-decoration: none;
        color: var(--Amex-Dark-Gray);
        transition: all 0.2s ease-in;
        display: flex;
        flex-flow: row;
        gap: 6px;
        align-items: center;
        justify-content: space-between;
        padding-block: calc(1.5rem * .625);

    }

    .c-sidebar__link svg {
      width: 12px;
      height: 12px;
      flex-shrink: 0;
    }

    .c-sidebar__link:hover,
    .c-sidebar__link:focus-visible {
        background: rgba(0, 111, 207, 0.08);
        transition: all 0.2s ease-in;
    }

    .c-sidebar__link:focus-visible {
      outline: 1px dashed currentColor;
    }

    .c-sidebar__link.active {
        background: rgba(0, 111, 207, 0.08);
        transition: all 0.2s ease-in;
        color: var(--Amex-Dark-Blue);
    }

    .c-sidebar__download {
        color: #006FCF;
        font-size: calc(1.2rem * .625);
        line-height: calc(1.5rem * .625);
        display: flex;
        gap: calc(0.5rem * .625);
        padding-right: 3px;
    }

    .c-sidebar__download:hover,
    .c-sidebar__download:focus-visible {
        text-decoration: underline;
        transition: all 0.2s ease-in;
    }

/* Trends Mobile Nav */
    .trends-mobile-nav {
        width: 100%;
        border-bottom: 1px solid #D9D9D9;
        display: flex;
        align-items: center;
        flex-flow: column;
        position: sticky;
        top: calc(var(--amex-nav-height) + var(--amex-subnav-height));
        background-color: #fff;
        z-index: 3;


        @media (width >= 1080px) {
            display: none;
        }

        #trends-menu-btn {
            display: flex;
            width: 100%;
            height: calc(4.4rem * .625);
            padding: calc(1rem * .625);
            color: var(--Amex-Blue);
            font-size: calc(1.3rem * .625);
            letter-spacing: 0.3px;
            text-align: center;
            align-items: center;
            justify-content: center;
            gap: calc(0.6rem * .625);
            background: var(--light-grey);
            border: none;
            cursor: pointer;

            &:focus-visible {
              outline-offset: -3px;
            }

            svg {
                transform: rotate(180deg);
            }

            &[aria-expanded="true"] {
                svg {
                    transform: rotate(0deg);
                }
            }
        }

        #trends-menu {
            display: none;
            width: 100%;
            max-width: 375px;
            margin-inline: auto;
            margin-block: calc(2rem * .625);
            padding-inline: calc(2rem * .625);

            &.open {
                display: flex;
                flex-flow: column;
                gap: calc(1rem * .625);
            }

            a {
                padding: calc(1rem * .625);
                background: var(--light-grey);
                color: var(--Amex-Dark-Gray);
                text-decoration: none;
                text-transform: uppercase;
                display: inline-block;
                width: 100%;
                font-size: calc(1.1rem * .625);
                font-weight: 700;
                letter-spacing: 1px;
            }
        }
    }

/* Component Tint Box */
.c-tintbox {
    background: var(--Amex-Blue-Tint-10);
    padding: calc(3rem * .625);
}

@media (max-width: 767px) {
    .c-tintbox {
        padding: calc(1.6rem * .625);
        margin-inline: calc(-1.6rem * .625);
    }
}

/* Component Donut */
.c-donut {
    display: flex;
    flex-flow: row;
    align-items: center;
    gap: calc(2rem * .625);
    margin-bottom: calc(4rem * .625);
}

.c-donut:last-of-type {
    margin-bottom: 0;
}

.c-donut svg {
    width: 128px;
    margin: 10px;
    flex: 1 0 128px;
}


@media (max-width: 767px) {
    .c-donut {
        margin-bottom: calc(3rem * .625);
    }

    .c-donut svg {
        flex: 1 0 92px;
        width: 92px;
        margin: 0;
    }
}


/* Component Trend Hero */
.c-trend-hero {
    background-size: cover;
    background-position: top;
    height: 560px;
    flex-flow:column;
    align-items: center;
    justify-content: center;
    max-width: 1200px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 560px;
    position: relative;

    clip-path: polygon(5% 5%, 95% 5%, 95% 95%, 5% 95%);

    @media (prefers-reduced-motion: reduce) {
        clip-path: none;
    }
}

    .c-trend-hero h2 {
        width: 100%;
        grid-column: 1;
        grid-row: 1;
        z-index: 2;
    }

    .c-trend-hero picture {
      width: 100%;
      height: 100%;
      grid-row: 1;
      grid-column: 1;
      z-index: 1;
    }

    .c-trend-hero picture img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .c-trend-hero--1::after {
      z-index: 1;
      content: "";
      position: absolute;
      inset: 0;
      /* background: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%); */
      background: linear-gradient(0deg, rgba(0, 0, 0, 0.41) 0%, rgba(0, 0, 0, 0.41) 100%);

    }

    .c-trend-hero--2::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      /* background: linear-gradient(0deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.10) 100%); */
      background: linear-gradient(0deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.35) 100%);

    }

    .c-trend-hero--3::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      background: linear-gradient(0deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.10) 100%);
    }

    .c-trend-hero--4::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      background: linear-gradient(0deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.10) 100%);
    }

    .c-trend-hero h2 {
        color: #FFF;
        text-align: center;
        text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.20);
        font-family: var(--fBenton);
        font-size: calc(7.2rem * .625);
        font-style: normal;
        font-weight: 700;
        line-height: calc(7.9rem * .625);
        padding-inline: calc(2.5rem * .625);

    }


    @media (max-width: 767px) {
        .c-trend-hero {
            height: 400px;
            grid-template-rows: 400px;
        }

        .c-trend-hero h2 {
            font-size: calc(4.8rem * .625);
            line-height: calc(5.4rem * .625);
        }
    }

    @media (max-width: 370px) {
      .c-trend-hero h2 {
        font-size: calc(3.6rem * .625);
        line-height: calc(4.2rem * .625);
      }
    }

/* Component Bar Charts */
.c-barcharts {
    display: grid;
    gap: calc(0.5rem * .625);
    margin-top: calc(2rem * .625);
}

    .c-barcharts__chart {
        display: flex;
        flex-flow: row;
    }

    .c-barcharts__img {
        flex: 0 0 100px;
        width: 100px;
        object-fit: cover;
    }

    .c-barcharts__bar {
        --max-percent: 100;
        --img-width: 100px;
        width: calc((100% - var(--img-width)) * (var(--bar-percent) / var(--max-percent)));
        color: #fff;
        padding-block: calc(2rem * .625);
        padding-inline: calc(1.5rem * .625);
        display: grid;
        grid-template-columns: 1fr min-content;
        gap: 5px 20px;
        align-items: center;
    }

    .c-barcharts__title {
        font-family: var(--fBenton);
        font-size: calc(2rem * .625);
        font-style: normal;
        font-weight: 500;
        line-height: calc(2.7rem * .625);
    }

    .c-barcharts__percent {
        font-family: var(--fBenton);
        font-size: calc(3rem * .625);
        font-style: normal;
        font-weight: 700;
        line-height: calc(3rem * .625);
        margin-left: auto;
        /* padding-left: calc(2rem * .625); */
    }

    .c-barcharts__desc {
        font-family: var(--fBenton);
        font-size: calc(1.3rem * .625);
        font-style: normal;
        font-weight: 500;
        line-height: calc(1.8rem * .625);
        grid-column: 1 / -1;
    }

    @media (max-width: 767px) {
        .c-barcharts__img {
            flex: 0 0 80px;
            width: 80px;
        }

        .c-barcharts__bar {
            --img-width: 80px;
            padding-inline: calc(1rem * .625);
            gap: 5px;
        }

        .c-barcharts__title {
            font-size: calc(1.4rem * .625);
            line-height: calc(1.8rem * .625);
        }

        .c-barcharts__percent {
            font-size: calc(1.8rem * .625);
            line-height: calc(2rem * .625);
        }
        .c-barcharts__desc {
            display: none;
        }
    }

/* Component Bar Chart Small */
.c-barchart-sm {
    display: grid;
    gap: calc(1rem * .625);
    margin-top: calc(2rem * .625);
    margin-bottom: calc(2rem * .625);
}

.c-barchart-sm:last-of-type {
    margin-bottom: calc(4rem * .625);
}

    .c-barchart-sm__header {
        display: flex;
        flex-flow: row;
        align-items: center;
        justify-content: space-between;
        gap: calc(1rem * .625);
    }

    .c-barchart-sm__percent {
        font-family: var(--fBenton);
        font-size: calc(2.4rem * .625);
        font-style: normal;
        font-weight: 700;
        line-height: calc(2.4rem * .625)
    }

    .c-barchart-sm__label {
        font-family: var(--fBenton);
        font-size: calc(1.4rem * .625);
        font-style: normal;
        font-weight: 500;
        line-height: calc(1.7rem * .625);
        color: #333;
    }

    .c-barchart-sm__bar {
        width: 100%;
        height: calc(3rem * .625);
        background: linear-gradient(180deg, #CDD1DD 0%, #E6E8EE 100%);
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
    }

    .c-barchart-sm__inner {
        --bar-percent: 100%;
        width: var(--bar-percent);
    }

    .c-barchart-sm__inner--gradient-1 {
        background: linear-gradient(180deg, #00175A 0%, #003886 100%);
    }

    .c-barchart-sm__inner--gradient-2 {
        background: linear-gradient(180deg, #0059B2 0%, #006FCF 100%);
    }

/* Component Pull Stat */
.c-pull-stat {
    display: grid;
    grid-template-columns: 4fr 6fr;
    align-items: center;
    gap: calc(4rem * .625);
    /* margin-block: calc(6.5rem * .625); */
    background: #ebf4fb;
    color: var(--Amex-Dark-Blue);
}

    .c-pull-stat__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .c-pull-stat__txt {
        font-family: var(--fBenton);
        font-size: calc(3.2rem * .625);
        font-style: normal;
        font-weight: 400;
        line-height: calc(4.2rem * .625);
        padding-right: calc(6rem * .625);
        padding-block: calc(3rem * .625);
    }

      .c-pull-stat__txt.c-pull-stat__txt--sm {
          font-size: calc(2rem * .625);
          line-height: calc(2.6rem * .625);

          @media (width >= 768px) {
            font-size: calc(2.4rem * .625);
            line-height: calc(3.2rem * .625);
          }
      }

    @media (max-width: 767px) {
        .c-pull-stat {
            grid-template-columns: 1fr;
            gap: 0;
            /* margin-inline: calc(-2rem * .625); */
        }

        .c-pull-stat__txt {
            padding-inline: calc(2.5rem * .625);
            padding-block: calc(3rem * .625);
            font-size: calc(2.4rem * .625);
            line-height: calc(3.2rem * .625);
        }
    }

/* Component Related */
.c-related {
    display: grid;
    gap: calc(2rem * .625);
    grid-template-columns: 1fr 1fr;
    margin-top: calc(2rem * .625);
    margin-bottom: calc(8rem * .625);

    @media (width < 768px) {
        margin-bottom: calc(4rem * .625);
    }
}

.c-related__heading,
.explore-more-heading {
  text-align: left;

  @media (width >= 768px) {
    text-align: center;
  }
}

    .c-related--1-item {
        grid-template-columns: max-content;
        justify-content: center;
        text-align: left;
        margin-inline: 0 !important;
    }

    .c-related__link {
        display: grid;
        grid-template-columns: 100px 1fr;
        gap: calc(2rem * .625);
        align-items: center;
        padding: calc(1.2rem * .625);
        position: relative;
        border: 1px solid var(--Amex-Gray-100);
        text-decoration: none;
        color: #333;
        font-size: calc(1.6rem * .625);
        font-style: normal;
        font-weight: 400;
        line-height: calc(2.4rem * .625);
        transition: all 0.2s ease-in;
    }
        .c-related__link:hover {
            text-decoration: underline;
            transition: all 0.2s ease-in;
        }
        .c-related__link:hover svg path {
            fill: #53565A;
            transition: all 0.2s ease-in;
        }
        @media (min-width: 768px) {
          .c-related__link {
            padding: calc(1.6rem * .625);
          }

          .c-related__link:hover .c-related__img img {
            transform: scale(1.15);
            transition: all 0.2s ease-in;
          }
        }

    .c-related__img {
        overflow: clip;
        width: 100%;
        width: 100px;
    }
    .c-related__img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: scale(1);
        transition: all 0.2s ease-out;
        aspect-ratio: 1;
    }

    .c-related__link svg {
        position: absolute;
        top: calc(1rem * .625);
        right: calc(1rem * .625);
        width: calc(1.4rem * .625);
        aspect-ratio: 1/1;
    }

    .c-related__link svg path  {
        transition: all 0.2s ease-in;
    }

    @media (max-width: 767px) {
        .c-related {
            grid-template-columns: 1fr;
            margin-inline: calc(-1.6rem * .625);
        }

        .c-related.slick-initialized .slick-slide {
            height: 100% !important;
            display: grid;
            margin: 0 5px;
        }

        .c-related .slick-track {
            height: 100%;
        }

        .c-related.slick-initialized .slick-list {
            margin: 0 0px;
        }
    }

    .past-reports {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 20px;

        @media (width < 992px) {
          grid-template-columns: 1fr;
          margin-bottom: 40px;
        }
    }
    
        .past-report {
            width: 100%;
            max-width: 700px;
            margin-inline: auto;
            display: flex;
            flex-flow: column;
            align-items: center;
            background: #f8f8f8;
            border: 1px solid #e2e2e2;
            border-radius: 3px;
            padding: 5px;

            @media (width < 992px) {
              flex-flow: row;
            }

            @media (width < 350px) {
              flex-flow: column;
            }
        }
        
            .past-report img { 
              width: 100%;
              height: 100%;
              object-fit: cover;
              max-height: 260px;

              @media (width < 992px) {
                max-width: 140px;
              }

              @media (width < 350px) {
                max-width: initial;
              }
            }

            .past-report-text {
              width: 100%;
              padding: 20px;

              @media (width < 992px) {
                padding: 20px 15px;
              }
            }

            .past-report-amex { font-weight: 500; color: #696F77; text-transform: uppercase; letter-spacing: 1px; margin-bottom: calc(1.5rem * .625); font-size: calc(1.1rem * .625); }
            .past-report-title { font-size: calc(2rem * .625); margin-bottom: 1.5em; font-weight: 500;}
            .past-report-cta { display: inline-block; background: #fff; text-decoration: none; color: var(--Amex-Blue); text-align: center; border-radius: 4px; border: 1px solid var(--Amex-Blue); padding: .75em 2em; margin-top: calc(2rem * .625); transition: all 0.2s ease-in; }
            .past-report-cta:hover { background: var(--Amex-Blue); color: #fff; text-decoration: none; border: 1px solid var(--Amex-Blue); transition: all 0.2s ease-in; }

            @media (prefers-reduced-motion: reduce) {
                .past-report-cta {
                    transition: none;
                }

                .past-report-cta:hover {
                    transition: none;
                }
            }

        @media (max-width: 991px) {
            .past-reports {
                grid-template-columns: 1fr;
            }


        }

        @media (max-width: 767px) {
            .past-report-amex {
                font-size: calc(1rem * .625);
                line-height: calc(1.1rem * .625);
                margin-bottom: calc(1.5rem * .625);
            }

            .past-report-cta {
                margin-top: calc(2rem * .625);
                margin-bottom: calc(0.8rem * .625);
                font-size: calc(1.3rem * .625);
            }
        }

/* Component Hover Cards */
.c-hover-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(0.2rem * .625);
    margin-block-end: calc(6rem * .625);
}

    .hover-cards-heading {
        margin-block-start: calc(6rem * .625);
        font-size: calc(2rem * .625);
        line-height: calc(2.7rem * .625);
        font-weight: 400;

        @media (max-width: 767px) {
            font-size: calc(1.6rem * .625);
            line-height: calc(2.2rem * .625);
        }
    }

    .c-hover-cards__card {
        display: grid;
        grid-template-rows: 260px auto;
        overflow: hidden;
        position: relative;
    }

    .c-hover-cards__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        grid-column: 1;
        grid-row: 1;
    }

    .c-hover-cards__footer {
        display: flex;
        flex-flow: row;
        justify-content: space-between;
        align-items: center;
        gap: calc(1rem * .625);
        background: linear-gradient(180deg, #00175A 0%, #003886 100%);
        color: #fff;
        padding-block: calc(2rem * .625);
        padding-inline: calc(1.5rem * .625);
        grid-column: 1;
        grid-row: 2;
        cursor: pointer;
    }

    .c-hover-cards__footer:hover + .c-hover-cards__desc {
        /* display: flex;
        opacity: 1;
        height: 100%;
        transition: all 0.25s ease-in; 
        grid-column: 1 / -1;
        grid-row: 1 / -1; */
        transform: translateY(0);
        transition: 0.25s ease-in;
    }

    .c-hover-cards__footer span,
    .c-hover-cards__txt > span:first-of-type {
        font-size: calc(3rem * .625);
        line-height: calc(3rem * .625);
        font-weight: 700;
    }

    /* .c-hover-cards__footer img {
        margin-bottom: auto;
    } */

    .c-hover-cards__desc {
        display: flex;
        flex-flow: row;
        gap: 10px;
        justify-content: space-between;
        padding: calc(1.5rem * .625);
        background: linear-gradient(180deg, #00175A 0%, #003886 100%);
        color: #fff;
        /* grid-column: 1; */
        /* grid-row: 2; */
        /* display: none; */
        /* opacity: 0; */
        /* height: 0; */
        pointer-events: none;
        transition: all 0.25s ease-in;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        top: 0;
        transform: translateY(100%);
        transition: transform 0.25s ease-in;
    }

    .c-hover-cards__txt {
        font-family: var(--fBenton);
        font-size: calc(2.4rem * .625);
        font-style: normal;
        font-weight: 400;
        line-height: calc(3.2rem * .625);
        flex: 1 1 auto;
    }

    .c-hover-cards__txt span:not(:first-of-type) {
        font-weight: 500;
    }

    .c-hover-cards__desc img {
        margin-left: auto;
        margin-bottom: auto;
        width: 16px;
        flex: 0 0 16px;
        display: block;

        @media (width >= 768px) {
            display: none;
        }
    }

    @media (max-width: 1079px) {
        .c-hover-cards {
            grid-template-columns: 1fr;
        }

        .c-hover-cards__card {
            grid-template-rows: 227px auto;
            max-width: 440px;
            width: 100%;
            margin-inline: auto;
        }
    }


    @media (max-width: 767px) {
        .c-hover-cards {
            margin-block: calc(3rem * .625);
        }

        .c-hover-cards__footer span, 
        .c-hover-cards__txt > span:first-of-type {
            font-size: calc(2.4rem * .625);
            line-height: calc(2.4rem * .625);
        }

        .c-hover-cards__txt {
            font-size: calc(2rem * .625);
            line-height: calc(2.6rem * .625);
        }
    }

/* Component CTA Banner */
.c-cta-banner {
    background-image: url(../img/gtt2025/cta-banner.jpg?v=0);
    background-size: cover;
    background-position: bottom;
    margin-bottom: calc(6rem * .625);
    color: #fff;
}

    .c-cta-banner__container {
        display: grid;
        gap: calc(2rem * .625);
        padding-block: calc(8rem * .625);
    }

    .c-cta-banner h2 { 
        text-align: center;
        margin-bottom: 0;
    }

    .c-cta-banner a {
        border-radius: 4px;
        justify-content: center;
        display: flex;
        align-items: center;
        gap: 10px;
        flex-shrink: 0;
        padding-inline: calc(3.5rem * .625);
        padding-block: calc(1.5rem * .625);
        background: #fff;
        color: var(--Amex-Blue);
        font-size: calc(1.5rem * .625);
        font-style: normal;
        font-weight: 400;
        line-height: calc(1.5rem * .625);
        letter-spacing: 0.5px;
        text-decoration: none;
        margin-inline: auto;
        transition: all 0.2s ease-in;
    }

    .c-cta-banner a:hover {
        background: var(--Amex-Blue);
        color: #fff;
        transition: all 0.2s ease-in;
    }

@media (max-width: 767px) {
    .c-cta-banner {
        background-image: url(../img/gtt2025/cta-banner-m.jpg?v=0);
        margin-bottom: calc(4rem * .625);
        max-height: 340px;
        aspect-ratio: 1 / 1;
        display: flex;
        flex-flow: column;
        justify-content: center;
    }

    .c-cta-banner__container {
        padding-block: calc(5rem * .625);
        padding-inline: calc(2.5rem * .625);
    }
}


.s-methodology {
    margin-top: calc(6.5rem * .625);
}

@media (max-width: 767px) {
    .s-methodology {
        margin-top: calc(4rem * .625);
    }
}
.methodology { font-family: 'Helvetica Neue', Helvetica, sans-serif; font-size: calc(1.2rem * .625); line-height: 1.4em;}

.wst-footer {
    max-width: none;
}

.legal {
    max-width: 1240px;
    margin-inline: auto;
    margin-top: calc(8rem * .625);
    padding-inline: calc(1.6rem * .625);
}

@media (max-width: 767px) {
    .legal {
        margin-top: calc(4rem * .625);
    }
}