@charset "utf-8";
/* CSS Document */

body {
  font-family: "SAIB NRIB";
}

/* ==========================================================================
   Title Color Variants (taxonomy-driven)
   ========================================================================== */
.color--gold {
  color: #FADD96 !important;
}

.color--white {
  color: #FFFFFF !important;
}

.color--black {
  color: #000000 !important;
}

.color--dark-grey {
  color: #1A1C1E !important;
}

.color--brown {
  color: #A44F17 !important;
}

/* ==========================================================================
   Paragraph Container Utility
   - Apply to any .container inside a paragraph
   ========================================================================== */
.paragraph-container {
  padding: 4%;
}

header>.navbar {
  margin-top: -100px;
}

.user-logged-in header>.navbar {
  margin-top: 0;
}

header>.navbar>.container {
  /* background: rgba(255, 255, 255, 0.2); */
  /* transform: translateY(100px); */
  backdrop-filter: blur(30px);
  padding: 1.375rem 3.125rem;
}

.user-logged-in header>.navbar>.container {
  transform: translateY(0px);
}

.navbar-brand {
  padding: 0;
}

.region-content {
  padding: 0;
}

.searchboxcontainer i::before {
  content: "";
  background-image: url("../images/search-icon.svg");
  width: 24px;
  height: 24px;
  display: block;
}

.searchboxcontainer .btn {
  padding: 0;
  margin: 0;
}



/* ======================================================================
   Home Banner (similar to Page Banner)
   ====================================================================== */
.home-banner {
  background-repeat: no-repeat;
}

.home-banner-title,
.home-banner-subtitle {
  font-size: 4.25rem;
  line-height: 4.75rem;
  font-weight: 300;
}

.home-banner-title {
  color: #A44F17;
}

/* dark brown */

.home-banner-subtitle,
.home-banner-desc,
.page-banner-subtitle,
.page-banner-desc {
  max-width: 70%;
}

.home-banner-desc {
  font-size: 1.35rem;
  line-height: 1.75rem;
}

.home-banner {
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

.home-banner-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.home-banner-mobile,
.home-banner .container {
  position: relative;
  z-index: 1;
}

/* ======================================================================
   Home Banner CTA Buttons
   ====================================================================== */
.home-banner-cta {
  flex-wrap: wrap;
}

/* Primary CTA (filled) */
.paragraph--type--home-banner .home-banner-primary-cta a,
.paragraph--type--home-banner .home-banner-primary-cta a:hover,
.paragraph--type--home-banner .home-banner-primary-cta a:visited,
.paragraph--type--home-banner .home-banner-primary-cta a:active {
  /* 18px */
  /* 28px */
  /* dark grey */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  display: inline-block;
  padding: 1.3rem 2rem;
  font-size: 1rem;
  font-weight: 500
    /* medium */
  ;
  text-decoration: none;
  color: #ffffff;
  background-color: #A44F17;
  border-radius: 1rem;
}

.page-banner {
  /* white */
  position: relative;
  padding: 8% 0;
  color: #fff;
  background-size: cover;
  background-position: center right;
  overflow: hidden;
}

.page-banner-overlay {
  position: absolute;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  inset: 0;
}

.page-banner-title {
  /* color: #fff; */
  color: #1A1C1E;
  max-width: 678px;
}

/* white */
/* media queries in addition to global */

.page-banner-desc {
  /* color: #e8e2db; */
  color: #1A1C1E;
}

/* light grey */

.page-banner-title-dif-color {
  color: #A44F17;
}

/* ======================================================================
   Banner CTA Group
   ====================================================================== */
.page-banner-cta {
  flex-wrap: wrap;
}

/* Primary CTA (filled) */
.paragraph--type--page-banner .page-banner-primary-cta a,
.paragraph--type--page-banner .page-banner-primary-cta a:hover,
.paragraph--type--page-banner .page-banner-primary-cta a:visited,
.paragraph--type--page-banner .page-banner-primary-cta a:active {
  /* 18px */
  /* 28px */
  /* dark grey */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  display: inline-block;
  padding: 1rem 2rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 500
    /* medium */
  ;
  text-decoration: none;
  color: #ffffff;
  border-radius: 1em;
  background-color: #A44F17;
}

/* Secondary CTA (outlined) */
.paragraph--type--page-banner .page-banner-secondary-cta a,
.paragraph--type--page-banner .page-banner-secondary-cta a:hover,
.paragraph--type--page-banner .page-banner-secondary-cta a:visited,
.paragraph--type--page-banner .page-banner-secondary-cta a:active {
  /* 18px */
  /* 28px */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  display: inline-block;
  padding: 1rem 2rem;
  border-radius: 1em;
  border-color: #A44F17;
  border-style: solid;
  border-width: 1px;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 500
    /* medium */
  ;
  text-decoration: none;
  color: #A44F17;
  background-color: transparent;
}

/* ======================================================================
   Three Cards Section
   ====================================================================== */
.three-cards {
  padding: 8% 0;
  background-color: #fff;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.three-cards-head .three-cards-title {
  /* 52px */
  /* 60px */
  /* dark grey */
  font-size: 3.25rem;
  line-height: 3.75rem;
  color: #A44F17;
}

/*media queries in addition to global */

.three-cards-title-golden {
  /* dark brown */
  color: #1A1C1E;
}

.three-cards-intro {
  /* very dark brown */
  /* 22px */
  /* 28px */
  color: #1a1514;
  font-size: 1.35rem;
  line-height: 1.75rem;
}

/* ======================================================================
   Card Item
   ====================================================================== */
.card-item {
  padding: 1rem;
}

.card-item-inner {
  /* fallback gradient */
  position: relative;
  border-radius: 24px;
  padding: 4rem 3rem;
  color: #fff;
  background: #FBF7F1;
  /* background: linear-gradient(180deg, #7f501d 0%, #402106 100%); */
  background-size: cover;
  background-position: center;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

/* scales everything up by ~27px */
.card-item-inner:hover {
  transform: scale(1.07);
}

.card-item-title {
  color: #A44F17;
  font-weight: 300 !important;
}

.card-item-text {
  /* 18px */
  /* 32px */
  color: #635E5E;
  font-size: 1.125rem;
  line-height: 2rem;
}

.card-item-cta {
  bottom: 4rem;
  z-index: 2;
}

.card-item-cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 20px;
  color: #1a1c1e;
  text-decoration: none;
  font-size: 28px;
  line-height: 1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  background: #A44F17;
  /* background: linear-gradient(180deg, #f2d794 0%, #d0a457 100%); */
}

.card-item-cta a::before {
  content: "↗";
  color: #FBF7F1;
}

.card-item-cta a:hover {
  /* no underline on hover */
  text-decoration: none;
}

.card-item-corner {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: right bottom;
}

/* ======================================================================
   Feature Grid (parent section)
   ====================================================================== */
.feature-grid {
  /* fallback gradient */
  padding: 8% 0;
  color: #fff;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.feature-grid.feature-grid--light {
  background: transparent;
}

.feature-grid-head .feature-grid-title {
  /* 52px */
  /* 60px */
  /* gold line, per mock */
  margin: 0;
  font-size: 3.25rem;
  line-height: 3.75rem;
  color: #A44F17;
}

.feature-grid--light .feature-grid-head .feature-grid-title {
  /* dark brown */
  color: #a44f17;
}

/* media queries in addition to global */

.feature-grid-title-white {
  /* white */
  color: #ffffff;
}

.feature-grid--light .feature-grid-title-white {
  /* dark grey */
  color: #1a1c1e;
}

.feature-grid-intro {
  /* white */
  /* 22px */
  /* 28px */
  color: #ffffff;
  font-size: 1.35rem;
  line-height: 1.75rem;
}

.feature-grid--light .feature-grid-intro {
  /* very dark brown */
  color: #1a1514;
}

/* ======================================================================
   Feature Item (child)
   ====================================================================== */
.feature-item-inner {
  /* white with 10% opacity */
  /* white with 30% opacity */
  position: relative;
  border-radius: 24px;
  padding: 2.2rem;
  border-color: #FBF7F1;
  border-width: 1px;
  border-style: solid;
  color: #fff;
  background: #FBF7F1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  backdrop-filter: blur(20px);
}

.feature-grid--light .feature-item-inner {
  /* very light brown */
  /* very light brown */
  /* medium grey */
  border-color: #fff;
  color: #635e5e;
  /* background-color: #fff; */
}

.feature-grid--dark .feature-item-inner {
  background: #fff;
}

.feature-item-body {
  /* above corner image */
  position: relative;
  z-index: 2;
}

.feature-item-align-right .feature-item-body {
  text-align: right;
}

.feature-item-title {
  color: #A44F17;
  font-weight: 300 !important;
}

.feature-grid--light .feature-item-title {
  /* dark brown */
  color: #A44F17;
  font-weight: 300 !important;

}

.feature-item-text {
  /* white */
  /* 16px */
  /* 24px */
  margin-bottom: 1.5rem;
  color: #fff;
  font-size: 1rem;
  line-height: 1.5rem;
}

.feature-grid--light .feature-item-text {
  /* medium grey */
  color: #635e5e;
}

.feature-item-corner {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: right bottom;
}

.feature-item-corner.feature-item-corner-left {
  right: auto;
  left: 0;
  background-position: left bottom;
}

/* media queries in addition to global */
.feature-item-cta a,
.feature-item-cta a:hover,
.feature-item-cta a:visited,
.feature-item-cta a:active {
  /* 14px */
  /* 20px */
  /* dark grey */
  display: inline-block;
  padding: 0.7rem 2rem;
  border-radius: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500
    /* medium */
  ;
  text-decoration: none;
  color: #1a1c1e;
  background-color: #FADD96;
}

/* ======================================================================
   Layout sizing by position
   ====================================================================== */
.feature-grid .feature-grid-top>.feature-item:nth-child(1) .feature-item-corner {
  right: auto;
  left: 0;
  top: 0;
  padding-top: 1rem;
  background-position: left top;
}

.feature-grid .feature-grid-top>.feature-item:nth-child(1) .feature-item-corner.feature-item-corner-right {
  right: 0;
  left: auto;
  background-position: right top;
}

.feature-grid .feature-grid-top>.feature-item:nth-child(1) .feature-item-inner {
  display: flex;
  flex-wrap: wrap;
  padding-top: 6rem;
  align-content: center;
}

.feature-grid .feature-grid-top>.feature-item:nth-child(2) .feature-item-corner {
  right: auto;
  left: 0;
  top: 0;
  padding-top: 1rem;
  background-position: left top;
}

.feature-grid .feature-grid-top>.feature-item:nth-child(2) .feature-item-corner.feature-item-corner-right {
  right: 0;
  left: auto;
  background-position: right top;
}

.feature-grid .feature-grid-top>.feature-item:nth-child(4) .feature-item-inner {
  padding-top: 6rem;
}

.feature-grid .feature-grid-cta {
  margin-top: 3rem;
  text-align: center;
}

.feature-grid .feature-grid-cta a,
.feature-grid .feature-grid-cta a:hover,
.feature-grid .feature-grid-cta a:visited,
.feature-grid .feature-grid-cta a:active {
  padding: 1em 2em;
  line-height: 1.6em;
  -webkit-border-radius: 1rem;
  -moz-border-radius: 1rem;
  border-radius: 1rem;
  display: inline-block;
  background: #A44F17;
  color: #FFF;
}

/* Optional: hide field labels globally for this component (if not hidden in Manage display) */
.paragraph--type--feature-grid .field__label,
.paragraph--type--feature-item .field__label {
  display: none !important;
}

.feature-grid .feature-grid-top,
.feature-grid .feature-grid-bottom {
  display: grid;
  gap: 1.5rem;
}

/* ======================================================================
   Hero Text + Media
   ====================================================================== */
.hero-text-media {
  position: relative;
  padding: 2% 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-text-media .container {
  min-height: 475px;
}

/* two-column layout */
.hero-text-media-grid {
  display: flex;
  align-items: center;
  gap: 48px;
}

/* left (text) column */
.hero-text-media-text {
  flex: 0 1 50%;
  max-width: 50%;
}

.hero-text-media-title {
  /* 52px */
  /* dark grey */
  font-size: 3.25rem;
  line-height: 3.75rem;
  color: #1a1c1e;
}

/* ======================================================================
   Hero title color variations
   ====================================================================== */
.hero-text-media-title-black {
  color: #1a1c1e;
}

.hero-text-media-title-white {
  color: #ffffff;
}

.hero-text-media-title-gold {
  color: #a44f17;
}

.hero-text-media-title strong,
.hero-text-media-title em {
  color: #a44f17;
}

.hero-text-media-intro {
  /* dark grey */
  /* 22px */
  /* 34px */
  color: #1a1c1e;
  font-size: 1.35rem;
  line-height: 2.1rem;
}

.hero-text-media-cta a,
.hero-text-media-cta a:hover,
.hero-text-media-cta a:visited,
.hero-text-media-cta a:active {
  /* 18px */
  /* 28px */
  /* dark grey */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  display: inline-block;
  padding: 1rem 2rem;
  border-radius: 999px;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 500
    /* medium */
  ;
  text-decoration: none;
  color: #fff;
  background: #A44F17;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.hero-text-media-cta a:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
}

.hero-text-media-media {
  /* align the layout of the image and its text on multiple lines */
  flex: 1 1 auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.hero-text-media-media img {
  display: block;
  width: clamp(280px, 40vw, 460px);
  height: auto;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.1));
  transform: translateX(8px);
}

.paragraph.hero-text-media-pos-left .hero-text-media-text {
  order: 2;
}

.paragraph.hero-text-media-pos-left .hero-text-media-media {
  justify-content: flex-start;
  transform: translateX(0);
  order: 1;
}

.hero-text-media-align-end {
  text-align: end;
}

.hero-text-media-align-start {
  text-align: start;
}

/* ======================================================================
   Regional Markets
   ====================================================================== */
.regional-markets {
  padding: 8% 0;
}

.regional-markets .regional-markets-title {
  /* 52px */
  /* dark grey */
  font-size: 3.25rem;
  line-height: 3.75rem;
  color: #1a1c1e;
}

.regional-markets .regional-markets-title strong,
.regional-markets .regional-markets-title em {
  color: #a44f17;
}

.regional-markets .regional-markets-intro {
  /* dark grey */
  /* 22px */
  /* 34px */
  color: #1a1c1e;
  font-size: 1.35rem;
  line-height: 2.1rem;
}

/* Items row */
.regional-markets-items {
  max-width: 972px;
  margin: 0 auto;
}

.regional-markets .market-item {
  /* 18px */
  /* 18px */
  padding-left: 1.125rem;
  padding-right: 1.125rem;
}

.regional-markets .market-item-flag {
  padding: 8px;
}

.regional-markets .market-item-inner {
  /* very light brown */
  /* very light grey */
  /* 10px */
  display: flex;
  flex-direction: row;
  justify-content: center;
  border-radius: 20px;
  border-color: #f2efed;
  border-style: solid;
  border-width: 1px;
  padding: 0.625rem;
  background-color: #fbf7f1;
}

.regional-markets .market-item-country {
  /* 20px */
  /* dark grey */
  display: flex;
  flex-wrap: wrap;
  padding: 8px;
  font-size: 1.25rem;
  color: #000;
  align-content: center;
}

.regional-markets .regional-markets-cta {
  margin-top: 3rem;
  text-align: center;
}

.regional-markets .regional-markets-cta a,
.regional-markets .regional-markets-cta a:hover,
.regional-markets .regional-markets-cta a:visited,
.regional-markets .regional-markets-cta a:active {
  /* 18px */
  /* 28px */
  /* dark grey */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  display: inline-block;
  padding: 1rem 2rem;
  border-radius: 999px;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 500
    /* medium */
  ;
  text-decoration: none;
  color: #fff;
  background: #A44F17;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.regional-markets .regional-markets-cta a:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
}

/* ======================================================================
   Trading Venues (parent section)
   ====================================================================== */
.trading-venues {
  padding: 8% 0;
}

.trading-venues .trading-venues-title {
  /* 52px */
  /* 60px */
  font-size: 3.25rem;
  line-height: 3.75rem;
}

.trading-venues .trading-venues-title .trading-venues-title-golden {
  color: #a44f17;
}

.trading-venues .trading-venues-intro {
  font-size: 1.35rem;
  line-height: 2.1rem;
}

/* ======================================================================
   Trading Venue Item (card)
   ====================================================================== */
.trading-venues .trading-venue-item-inner {
  border-radius: 32px;
  padding: 3.5rem;
  text-align: center;
  background-color: #ffffff;
  box-shadow: 0 4px 32px 0 rgba(94, 45, 0, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  transform: scale(1);
  transform-origin: center;
}

.trading-venues .trading-venue-item-inner:hover {
  box-shadow: 0 10px 28px rgba(94, 45, 0, 0.12);
  transform: scale(1.1);
  margin: 0 0.5rem;
}

/* Symbol / label */
.trading-venues .trading-venue-item-symbol {
  /* 28px */
  /* 36px */
  font-size: 1.75rem;
  line-height: 2.25rem;
  color: #635e5e;
}

.trading-venues .trading-venue-item-sparkline {
  width: 129px;
  height: 75px;
  margin: 1rem auto;
  background-repeat: no-repeat;
  background-position: top;
}

/* Value (number) */
.trading-venues .trading-venue-item-value {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  color: #000000;
}

/* Direction colors & icons */
.trading-venues .trading-venue-item.is-up .trading-venue-item-delta {
  color: #519644;
}

/* green */
.trading-venues .trading-venue-item.is-down .trading-venue-item-delta {
  color: #a7001e;
}

/* red */
.trading-venues .trading-venue-item.is-flat .trading-venue-item-delta {
  color: #282424;
}

/* grey */

.trading-venues .trading-venue-item .delta-icon {
  border-radius: 50%;
  width: 24px;
  height: 24px;
}

.trading-venues .trading-venue-item.is-up .delta-icon {
  /* light green */
  background-color: #e0f0dd;
}

.trading-venues .trading-venue-item.is-down .delta-icon {
  /* light red */
  background-color: #f3d7d7;
}

.trading-venues .trading-venue-item.is-flat .delta-icon {
  display: none;
}

.trading-venues .trading-venue-item .delta-icon::before {
  display: inline-block;
  transform: translateY(-1px);
  content: "→";
}

.trading-venues .trading-venue-item.is-up .delta-icon::before {
  content: "↑";
}

.trading-venues .trading-venue-item.is-down .delta-icon::before {
  content: "↓";
}

.hpwqtitles,
.titles {
  /* 52px */
  /* 60px */
  font-size: 3.25rem;
  line-height: 3.75rem;
}

.field--name-field-hwq-description,
.description {
  font-size: 1.35rem;
  line-height: 2.1rem;
  margin: 1rem;
}

.field--name-field-hpwr-title {
  /* 28px */
  /* 36px */
  padding: 1.5rem 0;
  font-size: 1.75rem;
  line-height: 2.25rem;
  font-weight: 300;
  color: #A44F17;
}

.field--name-field-hpwr-description {
  /* 18px */
  /* 28px */
  font-size: 1.125rem;
  line-height: 2rem;
}

/* ======================================================================
   Coverage Requirements
   ====================================================================== */
.coverage-req {
  padding: 11%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Head: title + intro */
.coverage-req .coverage-req-title {
  /* 52px */
  /* 60px */
  /* white */
  margin: 0;
  font-size: 3.25rem;
  line-height: 3.75rem;
  /* color: #ffffff; */
  color: #1A1C1E;
}

.coverage-req .coverage-req-title strong,
.coverage-req .coverage-req-title em {
  /* 52px */
  /* 60px */
  /* gold line, per mock */
  margin: 0;
  font-size: 3.25rem;
  line-height: 3.75rem;
  color: #A44F17;
}

.coverage-req .coverage-req-intro {
  /* white */
  /* 22px */
  /* 34px */
  color: #1A1C1E;
  font-size: 1.35rem;
  line-height: 2.1rem;
}

/* Item card (glassy, subtle border, 24px radius) */
.coverage-req .coverage-req-item-inner {
  /* 22px 40px */
  /* white with 10% opacity */
  /* white with 30% opacity */
  border-radius: 24px;
  padding: 4.7% 8.4%;
  border-color: #fffdfb;
  border-width: 1px;
  border-style: solid;
  color: #1A1C1E;
  background: #fffdfb;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  backdrop-filter: blur(20px);
}

/* Flag */
.coverage-req .coverage-req-item-flag {
  flex-basis: 60px;
  flex-shrink: 0;
}

/* percent */
.coverage-req .coverage-req-item-percent {
  /* 22px */
  /* 34px */
  font-size: 1.35rem;
  line-height: 2.1rem;
}

/* ======================================================================
   Info Grid (parent section)
   ====================================================================== */
.info-grid {
  /* fallback gradient */
  padding: 8% 0;
  color: #fff;
  background: linear-gradient(180deg, #7f501d 0%, #402106 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.info-grid.info-grid--light {
  background: transparent;
}

/* Head */
.info-grid-head .info-grid-title {
  /* 52px */
  /* 60px */
  /* gold line, per mock */
  margin: 0;
  font-size: 3.25rem;
  line-height: 3.75rem;
  color: #fadd96;
}

.info-grid--light .info-grid-head .info-grid-title {
  /* dark brown */
  color: #a44f17;
}

/* media queries in addition to global */

.info-grid-title-white {
  /* white */
  color: #ffffff;
}

.info-grid--light .info-grid-title-white {
  /* dark grey */
  color: #1a1c1e;
}

.info-grid .info-grid-intro {
  /* white */
  /* 22px */
  /* 28px */
  color: #ffffff;
  font-size: 1.35rem;
  line-height: 1.75rem;
}

.info-grid--light .info-grid-intro {
  /* very dark brown */
  color: #1a1514;
}

/* ======================================================================
   Info Item (child)
   ====================================================================== */

.info-grid .info-item-inner {
  /* white with 10% opacity */
  /* white with 30% opacity */
  position: relative;
  border-radius: 24px;
  padding: 2.2rem;
  border-color: rgba(255, 255, 255, 0.3);
  border-width: 1px;
  border-style: solid;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  backdrop-filter: blur(20px);
}

.info-grid--light .info-item-inner {
  /* very light brown */
  /* very light brown */
  /* medium grey */
  border-color: #fbf7f1;
  color: #635e5e;
  background-color: #fbf7f1;
}

/* Body above corner image */
.info-grid .info-item-body {
  /* above corner image */
  position: relative;
  z-index: 2;
}

.info-item-align-right .info-item-body {
  text-align: right;
}

/* Title & text */
.info-grid .info-item-title {
  /* white */
  color: #fff;
}

.info-grid--light .info-item-title {
  /* dark brown */
  color: #a44f17;
}

.info-grid .info-item-text {
  /* white */
  /* 16px */
  /* 24px */
  margin-bottom: 1.5rem;
  color: #fff;
  font-size: 1rem;
  line-height: 1.5rem;
}

.info-grid--light .info-item-text {
  /* medium grey */
  color: #635e5e;
}

/* Child CTA (small gold pill) */

.info-grid .info-grid-cta {
  margin-top: 3rem;
  text-align: center;
}

.info-grid .info-grid-cta a,
.info-grid .info-grid-cta a:hover,
.info-grid .info-grid-cta a:visited,
.info-grid .info-grid-cta a:active {
  /* 18px */
  /* 28px */
  /* dark grey */
  display: inline-block;
  padding: 1.2rem 2rem;
  border-radius: 999px;
  font-size: 1.2rem;
  line-height: 1.75rem;
  font-weight: 500
    /* medium */
  ;
  text-decoration: none;
  color: #fff;
  background: #A44F17;
}

.info-grid .info-grid-cta a:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
}

/* Corner image */
.info-grid .info-item-corner {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: right bottom;
}

.info-grid .info-item-corner.info-item-corner-left {
  right: auto;
  left: 0;
  background-position: left bottom;
}

/* ======================================================================
   Layout sizing by position
   ====================================================================== */
.info-grid .info-grid-items>.info-item:nth-child(1) .info-item-corner {
  right: auto;
  left: 0;
  top: 0;
  padding-top: 1rem;
  background-position: left top;
}

.info-grid .info-grid-items>.info-item:nth-child(1) .info-item-corner.info-item-corner-right {
  right: 0;
  left: auto;
  background-position: right top;
}

.info-grid .info-grid-items>.info-item:nth-child(2) .info-item-corner {
  right: auto;
  left: 0;
  top: 0;
  padding-top: 1rem;
  background-position: left top;
}

.info-grid .info-grid-items>.info-item:nth-child(2) .info-item-corner.info-item-corner-right {
  right: 0;
  left: auto;
  background-position: right top;
}

/* ======================================================================
   FAQ Accordion (parent section)
   ====================================================================== */
.faq-accordion {
  /* fallback gradient */
  padding: 8% 0;
  color: #fff;
  background: linear-gradient(180deg, #7f501d 0%, #402106 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.faq-accordion.faq-accordion--light {
  background: transparent;
}

/* Title 1 + Title 2 */
.faq-accordion .faq-accordion-title {
  /* 52px */
  /* 60px */
  /* gold line, per mock */
  margin: 0;
  font-size: 3.25rem;
  line-height: 3.75rem;
  color: #fadd96;
}

.faq-accordion--light .faq-accordion-title {
  /* dark brown */
  color: #a44f17;
}

.faq-accordion-title-white {
  /* white */
  color: #ffffff;
}

.faq-accordion--light .faq-accordion-title-white {
  /* dark grey */
  color: #1a1c1e;
}

/* Intro text */
.faq-accordion .faq-accordion-intro {
  /* white */
  /* 22px */
  /* 28px */
  max-width: 776px;
  color: #ffffff;
  font-size: 1.35rem;
  line-height: 1.75rem;
}

.faq-accordion--light .faq-accordion-intro {
  /* very dark brown */
  color: #1a1514;
}

/* ======================================================================
   FAQ Item (child)
   ====================================================================== */
.faq-accordion-items {
  border-left: 1px solid #e4e4e4;
}

/* Toggle button (Question row) */
.faq-item .faq-item-toggle {
  /* room for icon on the right */
  /* 18px */
  /* 28px */
  position: relative;
  width: 100%;
  border: 0;
  padding: 0.8rem 3.25rem 0.8rem 1.25rem;
  text-align: left;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 500;
  color: #1a1c1e;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  border-top: solid 1px #D6D6D6;
}

.paragraph--type--faq-accordion .faq-item:first-child .faq-item-toggle {
  border-top: none;
}

/* ======================================================================
   FAQ Item Icon Styles
   ====================================================================== */
.faq-item .faq-item-icon {
  position: absolute;
  right: 1.25rem;
  top: 50%;
  font-size: 1.5rem;
  line-height: 1;
  color: #a44f17;
  transition: transform 0.2s ease;
  transform: translateY(-50%);
}

/* Plus/minus icon states */
.faq-item .faq-icon-plus,
.faq-item .faq-icon-minus {
  display: block;
  transition: opacity 0.2s ease;
}

.faq-item .faq-icon-minus {
  font-size: 2rem;
}

.faq-item .faq-item-toggle[aria-expanded="true"] .faq-icon-plus {
  display: none;
}

.faq-item .faq-item-toggle[aria-expanded="true"] .faq-icon-minus {
  display: block !important;
}

.faq-item .faq-item-body {
  padding: 0.5rem 1.25rem 0.75rem;
}

/* Question panel */
.faq-item .faq-item-question {
  /* 18px */
  font-size: 1.125rem;
}

/* Answer panel */
.faq-item .faq-item-answer {
  /* 16px */
  /* 25.6px */
  color: #635e5e;
  font-size: 1rem;
  line-height: 1.6rem;
}

/* Focus styles for accessibility */
.faq-item .faq-item-toggle:focus-visible {
  outline: 0;
}

/* Open/close states */
.faq-item .faq-item-toggle[aria-expanded="true"]+.faq-item-body[hidden] {
  display: block;
}

/* safety */
.faq-item .faq-item-toggle[aria-expanded="true"]+.faq-item-body {
  display: block;
}

.faq-item .faq-item-body[hidden] {
  display: none;
}

/* borders between items */
.faq-item-border {
  border-top: 1px solid #e4e4e4;
  margin-left: 1.25rem;
}

.faq-item-border:last-child {
  border-top: none;
}

.faq-item .faq-item-body {
  /* Increased to accommodate larger content */
  max-height: 1000px;
  margin-bottom: 0.75rem;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 1;
  overflow: hidden;
  visibility: visible;
}

/* Handle hidden state */
.faq-item .faq-item-body[hidden] {
  display: block !important;
  max-height: 0;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Active state shadow effect */
.faq-item .faq-item-toggle[aria-expanded="true"] {
  box-shadow: inset 1px 0 0 #a44f17;
}

/* ======================================================================
   Responsive tweaks
   ====================================================================== */

/* Docs & Reports */

/* Section wrapper */
.docs-reports {
  padding: 8% 0;
  background-position: right top;
  background-repeat: no-repeat;
}

.docs-reports>.container {
  max-width: 1040px;
  margin: 0 auto;
}

/* Headings & intro */
.docs-reports .docs-reports-display {
  /* 52px */
  /* 60px */
  /* dark grey */
  margin: 0;
  font-size: 3.25rem;
  line-height: 3.75rem;
  color: #1a1c1e;
}

.docs-reports .docs-reports-title-gold {
  color: #a44f17;
}

.docs-reports .docs-reports-intro {
  max-width: 866px;
  margin: 0 auto;
  color: #1a1c1e;
  font-size: 1.35rem;
  line-height: 2.1rem;
}

/* Tabs (Docs / Ann) */
.docs-reports .docs-reports-tabs {
  gap: 1rem;
  margin-bottom: 5rem;
}

.docs-reports .docs-reports-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid #cfcfcf;
  font-weight: 500;
  color: #1a1c1e;
  background: #ffffff;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease,
    color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
}

.docs-reports .docs-reports-tab:hover {
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

.docs-reports .docs-reports-tab.is-active {
  border-color: #1a1c1e;
  color: #ffffff;
  background: #1a1c1e;
}

.docs-reports .docs-reports-pane.is-hidden {
  display: none;
}

/* ---------- Documents: Group pills ---------- */
.docs-reports .docs-reports-groups {
  gap: 0.5rem;
  flex-wrap: wrap;
}

.docs-reports .group-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  border: 1px solid #e6d8c6;
  color: #1a1c1e;
  font-weight: 500;
  background: #fff7ed;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease,
    color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
}

.docs-reports .group-pill:hover {
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

.docs-reports .group-pill.is-active {
  border-color: #a44f17;
  color: #ffffff;
  background: #a44f17;
}

/* ---------- Documents: List & items ---------- */
.docs-reports .docs-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 1040px;
  margin: 0 auto;
}

/* Single doc item row */
.doc-item .doc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid #eeeeee;
  border-radius: 16px;
  padding: 16px 18px;
  background: #ffffff;
}

/* Left bundle (icon + meta) */
.doc-item .doc-row-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Decorative doc icon */
.doc-item .doc-icon {
  position: relative;
  flex: 0 0 60px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

.doc-item .doc-icon::after {
  /* simple "paper" glyph */
  position: absolute;
  left: 14px;
  top: 7px;
  width: 34px;
  height: 42px;
  background: url("/sites/default/files/styles/medium/public/2025-10/report-icon.webp") no-repeat center;
  content: "";
}

/* Doc meta */
.doc-item .doc-title {
  color: #000000;
  font-size: 1.125rem;
}

.doc-item .doc-date {
  color: #635e5e;
  font-size: 1rem;
  margin-top: 2px;
}

/* Right (download link) */
.doc-item .doc-row-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.doc-item .file--application-pdf {
  background-image: none;
}

.doc-item .doc-download a,
.doc-item .doc-download a:hover,
.doc-item .doc-download a:visited,
.doc-item .doc-download a:active {
  color: #463f3f;
}

.doc-item .doc-download {
  padding-left: 28px;
  background: url("/sites/default/files/2025-10/download-icon.svg") no-repeat left center;
}

/* ---------- Announcements: Year pills ---------- */
.docs-reports .docs-reports-years {
  gap: 0.5rem;
  flex-wrap: wrap;
}

.docs-reports .year-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1.85rem;
  border-radius: 2rem;
  border: 0 none;
  color: #a44f17;
  font-size: 1.25rem;
  font-weight: 500;
  background: #fbf7f1;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease,
    color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
}

.docs-reports .year-pill:hover {
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

.docs-reports .year-pill.is-active {
  color: #ffffff;
  background: #a44f17;
}

/* ---------- Announcements: Cards ---------- */
.ann-item .ann-card {
  position: relative;
  padding-right: 18px;
}

.ann-item+.ann-item {
  margin-top: 1rem;
}

/* Text */
.ann-item .ann-title {
  color: #1a1c1e;
}

.ann-item .ann-date {
  color: #6f6f6f;
}

.ann-item .ann-text {
  color: #1a1c1e;
}

.docs-reports .ann-list-title {
  /* 28px */
  /* 36px */
  padding-left: 3rem;
  font-size: 1.75rem;
  line-height: 2.25rem;
  background: url("/sites/default/files/2025-10/bell-icon.svg") no-repeat left center;
}

.docs-reports .ann-list-wrapper {
  padding: 2.5rem;
  border-radius: 16px;
  background-color: #fbf7f1;
}

/* Scrollable announcement list */
.docs-reports .ann-list-scroll {
  max-height: 700px;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

/* Optional scrollbar style */
.docs-reports .ann-list-scroll::-webkit-scrollbar {
  width: 6px;
}

.docs-reports .ann-list-scroll::-webkit-scrollbar-thumb {
  border-radius: 99px;
  background: #a44f17;
}

.docs-reports .ann-list-scroll::-webkit-scrollbar-track {
  background: #e8e2db;
}

/* Ensure inner cards don't stretch oddly */
.docs-reports .ann-item+.ann-item {
  margin-top: 1rem;
}

/* ---------- Theme Variants ---------- */
.docs-reports--dark .docs-reports-intro {
  color: #e8e2db;
}

.docs-reports--dark .docs-reports-tab {
  background: #1c1c1c;
  color: #ededed;
  border-color: #2a2a2a;
}

.docs-reports--dark .docs-reports-tab.is-active {
  background: #ffffff;
  color: #1a1c1e;
  border-color: #ffffff;
}

.docs-reports--dark .group-pill,
.docs-reports--dark .year-pill {
  background: #2a1f17;
  color: #ededed;
  border-color: #4a3827;
}

.docs-reports--dark .group-pill.is-active,
.docs-reports--dark .year-pill.is-active {
  background: #a44f17;
  color: #ffffff;
  border-color: #a44f17;
}

.docs-reports--dark .doc-item .doc-row {
  background: #1c1c1c;
  border-color: #2a2a2a;
}

.docs-reports--dark .doc-title {
  color: #ffffff;
}

.docs-reports--dark .doc-date {
  color: #bdbdbd;
}

.docs-reports--dark .doc-download a {
  color: #ffffff;
  border-color: #3a3a3a;
}

.docs-reports--dark .doc-download a:hover {
  background: #2a2a2a;
  border-color: #5a4a38;
}

.docs-reports--dark .ann-item .ann-card {
  background: #1c1c1c;
}

.docs-reports--dark .ann-item .ann-title {
  color: #ffffff;
}

.docs-reports--dark .ann-item .ann-text {
  color: #ededed;
}

/* ---------- Utilities & A11y ---------- */
.docs-reports .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.main_title_txt {
  /* 52px */
  /* 60px */
  font-size: 3.25rem;
  line-height: 3.75rem;
}

.sub-txt {
  /* 22px */
  /* 34px */
  max-width: 800px;
  margin: 0 auto;
  color: #1a1c1e;
  font-size: 1.35rem;
  line-height: 2.1rem;
}

/* ======================================================================
   Points list inside hero-text-media
   ====================================================================== */

/* Each child point_item */
.point-item {
  position: relative;
  padding-left: 2rem;
}

/* Diamond bullet */
.point-item::before {
  position: absolute;
  left: 0;
  top: 48%;
  width: 12px;
  height: 12px;
  background: #a44f17;
  transform: rotate(45deg);
  content: "";
}

/* Title + body styling */
.point-item-title {
  /* 18px */
  /* 28px */
  margin-bottom: 0.25rem;
  font-weight: 500
    /* medium */
  ;
  color: #282424;
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.point-item-body {
  /* 16px */
  /* 24px */
  color: #5f6b75;
  font-size: 1rem;
  line-height: 1.5rem;
}

.hop-mobile-container {
  padding-top: 7.5rem;
}

/* ==========================================================================
   Head & Intro rhythm
   - Centers head containers and constrains title/intro width per ICAP guide
   ========================================================================== */
.three-cards-head {
  max-width: 100% !important;
}

/* .three-cards-head, */
.feature-grid-head,
.hero-text-media-head,
.regional-markets-head,
.trading-venues-head,
.info-grid-head,
.faq-accordion-head {
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

.three-cards-title,
.feature-grid-title,
.hero-text-media-title,
.regional-markets-title,
.trading-venues-title,
.info-grid-title,
.faq-accordion-title {
  font-weight: 300;
}

.three-cards-intro,
.feature-grid-intro,
.hero-text-media-intro,
.regional-markets-intro,
.trading-venues-intro,
.info-grid-intro,
.faq-accordion-intro {
  font-size: 1.35rem;
  line-height: 2.1rem;
  color: #1a1c1e;
}

/* ==========================================================================
   Items Row Helper
   - Ensures 4/3/2 layout across breakpoints
   ========================================================================== */
.items-row {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}

.items-row>.item {
  flex: 0 1 calc(25% - 1.5rem);
  max-width: calc(25% - 1.5rem);
}

/* ICAP Map — crop out the place-card area (keeps current embed) */
#block-icap-bs5-location .field--name-field-google-maps-link {
  height: 206px;
  border-radius: 24px;
  border: 0;
  overflow: hidden;
}

#block-icap-bs5-location iframe[src*="google.com/maps"] {
  height: 345px;
  margin-top: -65px;
  /* crop ~60px from the bottom where the card renders */
  clip-path: inset(66px 0 0 0);
}

.paragraph--type--home-increase-your-buying {
  position: relative;
}

.paragraph--type--home-increase-your-buying>.container {
  padding: 1.875rem;
}

.paragraph--type--home-increase-your-buying .corner {
  width: 207px;
  height: 293px;
  background-repeat: no-repeat;
  top: 5rem;
}

.paragraph--type--home-increase-your-buying .rounded-bg {
  border-radius: 24px;
  background-repeat: no-repeat;
  max-width: 965px;
  max-height: 591px;
  background-color: #fff;
  width: 100%;
  height: 100%;
}

.paragraph--type--qr-app-store {
  background-repeat: no-repeat;
}

.home-news-row .views-field {
  min-height: 100%;
  display: flex;
}

.hpnrviewcont,
.hpnrviewbg {
  height: 100%;
}

.searchboxcontainer i {
  margin-top: 5px;
}

.paragraph--type--home-reason .lottie-wrapper {
  min-height: 150px;
}

.paragraph--type--home-reason lottie-player {
  margin: auto;
}

/* ---- ICAP modal shell ---- */
.icap-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, .75);
  justify-content: center;
  align-items: center;
}

.icap-modal.is-active {
  display: flex;
}

.icap-modal-dialog {
  background: #fff;
  border-radius: 20px;
  padding: 2.2rem;
  box-shadow: 0 14px 44px rgba(0, 0, 0, .28);
  outline: 0;
}

#icapModalApp .icap-modal-dialog {
  max-width: 620px;
}

.icap-modal-close {
  position: absolute;
  top: 1rem;
  border: 0;
  background: transparent;
  font-size: 3rem;
  font-weight: 300;
  line-height: 1;
  color: #A44F17;
  width: 25px;
  height: 25px;
  padding: 0;
}

#icapModalApp .icap-modal-close {
  border: 1px solid #D2D5D7;
  border-radius: 50%;
  background: #D2D5D7;
  color: #FFF;
  font-size: 1.5rem;
  font-weight: 500;
}

#icapModalUS .row-col.row-col-1 {
  min-width: 36%;
}

/* Titles / notes */
.icap-modal-title {
  font-weight: 300;
  font-size: 1.75rem;
  color: #252525;
  margin-bottom: 0.5rem;
  text-align: center;
}

.icap-modal-section-title {
  font-weight: 500;
  font-size: 1.35rem;
  color: #A44F17;
  margin: 1rem 0 .5rem;
}

.icap-modal-section-title p {
  margin-bottom: 0.5rem;
}

.icap-modal-app-body {
  font-size: 1.125rem;
}

.icap-modal-section-note,
.icap-modal-note {
  text-align: center;
  font-size: .9rem;
  color: #635E5E;
  margin-top: .75rem;
}

#icapModalGCC .icap-modal-section-note {
  border-top: 1px solid #E8E2DB;
  padding-top: 1.25rem;
}

/* Tables */
.icap-modal-table {
  width: 100%;
}

.icap-modal-table th p,
.icap-modal-table td p {
  margin: 0;
}

.row-col-2 {
  text-align: center;
}

.row-col-3 {
  text-align: end;
}

.icap-modal-table th.row-col {
  font-weight: 500;
  font-size: 1.125rem;
  color: #635E5E;
  width: 33%;
  padding-bottom: 0.5rem;
}

.icap-modal-table.header-color-brown th.row-col {
  color: #A44F17;
}

.icap-modal-section--table {
  margin-bottom: 2rem;
}

.field--name-field-modal-sections>.field__item:last-child .icap-modal-section--table {
  margin-bottom: 0;
}

/* App variant */
.icap-modal-app-grid {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 1rem;
  align-items: center;
}

.icap-modal-qr img {
  width: 120px;
  height: 120px;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
}

.icap-modal-cta-group {
  display: flex;
  gap: .6rem;
  margin-top: 1rem;
}

.icap-cta-outline a,
.icap-cta-outline a:hover,
.icap-cta-outline a:visited,
.icap-cta-outline a:active {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem 2rem;
  border-radius: 1rem;
  border: 1px solid #1A1C1E;
  color: #1A1C1E;
  text-decoration: none;
  font-size: 0.875rem;
}

.icap-cta-gold a,
.icap-cta-gold a:hover,
.icap-cta-gold a:visited,
.icap-cta-gold a:active {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem 2rem;
  border-radius: 1rem;
  border: 1px solid #A44F17;
  color: #FFF;
  text-decoration: none;
  font-size: 0.875rem;
  background-color: #A44F17;
}

.article-page-head {
  margin-top: 180px;
}

.article-page-title {
  font-weight: 300;
  color: #A44F17;
  font-size: 4.25rem;
  line-height: 5.3125rem;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.article-page-date {
  font-size: 1.375rem;
  line-height: 2.125rem;
  color: #635E5E;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.article-page-hero {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.article-page-body {
  font-size: 1.375rem;
  line-height: 2.125rem;
  color: #1A1C1E;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.hpnrimg {
  position: relative;
  overflow: hidden;
}

.hpnr-tag {
  position: absolute;
  top: 1rem;
  background: #FBF7F1;
  padding: 8px 12px;
  font-size: 0.75rem;
  border-radius: 999px;
  font-weight: 400;
  color: #A44F17;
  z-index: 5;
}

.hpnr-image-wrapper img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

.trending-articles-block {
  background-image: url('/sites/default/files/2025-10/light-bg.webp');
  padding-top: 13%;
  padding-bottom: 13%;
}

.trending-articles-title {
  font-size: 52px;
  font-weight: 300;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  text-align: center;
  color: #A44F17;
}

.view-articles.view-display-id-newsroom {
  padding: 8% 13%;
}

.view-articles.view-display-id-newsroom .description {
  max-width: 60%;
  margin: 0 auto;
}

.view-announcements {
  background-image: url('/sites/default/files/2025-10/light-bg.webp');
  padding: 8.35%;
}

.slick-arrow.slick-disabled {
  background-color: rgba(255, 255, 255, 0.7);
}

.ann-slide-title {
  font-size: 1.75rem;
  line-height: 2.25rem;
}

.ann-slide-date {
  font-size: 1rem;
  line-height: 1.5rem;
  color: #818181;
}

.ann-slide-text {
  font-size: 1.125rem;
  line-height: 2rem;
  color: #5A5A5A;
}

.ann-slide-media {
  max-width: 570px;
}

.view-announcements .slick-cstm-nav .slick-dots {
  margin: 0;
}

.career-upload-box {
  background: #FBF7F1;
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
  border: 1px solid #E8E2DB;
  position: relative;
}

.career-upload-input input[type="file"] {
  opacity: 0;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.career-upload-box .webform-managed-file-placeholder,
.career-upload-box .webform-managed-file-preview,
.career-upload-box .webform-file-button {
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: #635E5E;
  margin: 0 auto;
}

.career-upload-box .form-item {
  margin: 0;
}

.career-upload-icon {
  padding: 0.5rem;
}

.career-upload-help {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: #757575;
}

.career-upload-box .file--image {
  background: none;
}

.career-upload-box .js-form-item input {
  min-height: 24px;
}

.career-upload-box .btn:hover,
.career-upload-box .button:hover,
.career-upload-box :not(.btn-check)+.btn:active,
.career-upload-box :not(.btn-check)+.button:active,
.career-upload-box .btn:focus-visible,
.career-upload-box .button:focus-visible,
.career-upload-box .btn.show,
.career-upload-box .button.show,
.career-upload-box .btn:disabled,
.career-upload-box .button:disabled,
.career-upload-box .btn.disabled,
.career-upload-box .button.disabled {
  background-color: #A44F17;
  border: 1px solid #A44F17;
}

.annual-reports .docs-reports-title {
  margin-bottom: 5rem;
}

.annual-reports .doc-item {
  margin-bottom: 1.5rem;
}

.view-trending-newsroom .hpnrviewbg {
  background-color: #FFF;
}

.vat .hib-cntnt [class^="color--"] {
  display: inline-block;
}

.feature-grid-summary {
  font-size: 1.35rem;
  line-height: 1.625rem;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  text-align: center;
  color: #635E5E;
}

.vat .three-items-checked {
  max-width: 1040px;
}

.vat .three-items-checked .item-1 .feature-item-title {
  font-size: 2.5rem;
  font-weight: 300;
}

.vat .three-items-checked .item-1 .feature-item-text {
  font-size: 1.375rem;
  line-height: 2.125rem;
}


/* ======================================================================
   Grouped Media Queries (Merged by breakpoint)
   ====================================================================== */
@media (max-width: 575.98px) {

  /* Mobile fallback for section padding */
  .three-cards {
    padding: 40px 0;
  }

  .feature-grid {
    padding: 40px 0;
  }

  .hero-text-media {
    padding: 20px 0;
  }

  .regional-markets {
    padding: 40px 0;
  }

  .info-grid {
    padding: 40px 0;
  }

  .faq-accordion {
    padding: 40px 0;
  }

  .home-banner {
    padding: 40px 0;
  }

  .page-banner {
    padding: 0;
  }

  .page-banner-mobile {
    padding: 40px 0;
  }

  .trading-venues .trading-venues-title {
    font-size: 1.75rem;
    line-height: 2.25rem;
  }

  .hpwqtitles {
    font-size: 1.75rem;
    line-height: 2.25rem;
  }

  .items-row>.item {
    flex-basis: calc(50% - 1.5rem);
    max-width: calc(50% - 1.5rem);
  }

}

@media (max-width: 767.98px) {

  .feature-item-inner {
    min-height: unset;
    padding: 1.5rem;
  }

  .feature-grid-intro {
    padding: 0 0.5rem;
  }

  .card-item-inner {
    min-height: unset;
    padding: 1.5rem;
  }

  .info-item-inner {
    padding: 1.5rem;
  }

  .info-grid-intro {
    padding: 0 0.5rem;
  }

  .info-item-corner {
    background-size: 40%;
  }

  .doc-item .doc-row {
    padding-right: 0;
    padding-left: 0;
  }

  .doc-item .doc-row-right {
    margin-left: auto;
  }

  .faq-accordion {
    padding: 2%;
  }

  .docs-reports .ann-list-scroll {
    max-height: 500px;
  }
}

@media (max-width: 991.98px) {
  main>.container {
    padding-left: 0;
    padding-right: 0;
  }

  .paragraph-container {
    padding: 2rem;
  }

  .paragraph-container .row {
    margin: 0;
  }

  .paragraph-container .row>* {
    padding: 0 !important;
  }

  .home-banner-title,
  .home-banner-subtitle,
  .page-banner-title,
  .field--name-field-hm-title,
  .field--name-field-hm-sub-title,
  .hpftitles,
  .hphopitles,
  .field--name-field-hib-title-1,
  .field--name-field-hib-title-2,
  .hpwqtitles,
  .field--name-field-hpnr-title,
  .field--name-field-cqr-title-2,
  .field--name-field-cqr-title-3,
  .hpwqtitle1,
  .regional-markets .regional-markets-title,
  .titles {
    font-size: 1.75rem;
    line-height: 1.2;
  }

  .home-banner-subtitle,
  .home-banner-desc,
  .desription {
    max-width: 90%;
  }

  .home-banner {
    background-image: none !important;
    padding: 0 !important;
    background-color: #E9D8B9;
  }

  .home-banner.has-video {
    background-color: #E7D1AF;
  }

  .paragraph--type--home-one-platform {
    background-image: none !important;
  }

  .page-banner-desc,
  .home-banner-desc,
  .field--name-field-hm-description,
  .field--name-field-hpf-desription,
  .field--name-field-hop-description,
  .field--name-field-hwq-description,
  .regional-markets .regional-markets-intro,
  .desription {
    /* 14px */
    font-size: 0.875rem;
    line-height: 1.35rem;
  }

  .field--name-field-hm-description,
  .field--name-field-hpf-desription,
  .desription {
    text-align: center;
    margin-right: auto;
    margin-left: auto;
  }

  .paragraph--type--home-banner .home-banner-primary-cta a,
  .paragraph--type--home-banner .home-banner-primary-cta a:hover,
  .paragraph--type--home-banner .home-banner-primary-cta a:visited,
  .paragraph--type--home-banner .home-banner-primary-cta a:active,
  .paragraph--type--page-banner .page-banner-primary-cta a,
  .paragraph--type--page-banner .page-banner-primary-cta a:hover,
  .paragraph--type--page-banner .page-banner-primary-cta a:visited,
  .paragraph--type--page-banner .page-banner-primary-cta a:active,
  .paragraph--type--page-banner .page-banner-secondary-cta a,
  .paragraph--type--page-banner .page-banner-secondary-cta a:hover,
  .paragraph--type--page-banner .page-banner-secondary-cta a:visited,
  .paragraph--type--page-banner .page-banner-secondary-cta a:active,
  .field--name-field-hib-link a,
  .field--name-field-hib-link a:link,
  .field--name-field-hib-link a:visited,
  .field--name-field-hib-link a:hover {
    /* 14px */
    font-size: 0.875rem;
    line-height: 1.3rem;
    padding: 1.22rem 2rem;
  }

  .page-banner-mobile,
  .home-banner-mobile {
    background-position-x: 70%;
    background-position-y: bottom;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 500px;
    padding-top: 130px;
  }

  .home-banner-mobile {
    background-color: #E9D8B9;
    min-height: 666px;
  }

  .home-banner-video {
    bottom: 0;
    width: 200%;
    position: absolute;
  }

  .has-video .page-banner-mobile,
  .has-video .home-banner-mobile {
    background-image: none !important;
    background-color: transparent;
  }

  .paragraph--type--home-mobile {
    background-position-x: 60%;
    background-position-y: bottom;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .hop-mobile {
    background-position-x: 35%;
    background-position-y: bottom;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 5rem;
    padding-bottom: 22rem;
  }

  .field--name-field-hm-image {
    max-width: 133px;
    margin: auto;
  }

  .paragraph--type--homepage-funds,
  .paragraph--type--home-news,
  .paragraph--type--qr-app-store {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .hpfCarousselItem,
  .home-news-row {
    max-width: 284px;
  }

  .hpf-content {
    padding: 2rem 1.25rem;
  }

  .hpnrtitle {
    padding: 1.5rem 1.25rem 0.5rem 1.25rem;
    margin: 0 auto;
    font-size: 1.125rem;
  }

  .hpnrdesc {
    padding: 0.5rem 1.25rem 1rem 1.25rem;
    margin: 0 auto;
    font-size: 0.75rem;
  }

  .field--name-field-hf-title {
    font-size: 1.125rem;
  }

  .slick-cstm-nav {
    max-width: 240px;
    margin: 0 auto;
  }

  .paragraph-container .row.slickcstm-container {
    margin-left: -2rem;
  }

  .slick-cstm-nav ul.slick-dots {
    margin: 0;
    text-align: center;
  }

  .hpnrview .slick-dotted.slick-slider {
    margin-bottom: 0;
  }

  .field--name-field-hf-icon img.img-fluid {
    max-height: 92px;
    width: auto;
  }

  .field--name-field-hf-icon,
  .lottie-wrapper {
    padding: 1.4rem 0.5rem;
  }

  .field--name-field-hf-description,
  .field--name-field-cqr-description,
  .field--name-field-hpnr-description,
  .field--name-field-hib-description {
    font-size: 0.875rem;
    line-height: 1.4rem;
  }

  .paragraph--type--home-increase-your-buying>.container {
    margin: 0.75rem;
    position: relative;
    padding: 0;
  }

  .paragraph--type--home-increase-your-buying .corner {
    width: 176px;
    height: 168px;
  }

  .hib-cntnt {
    padding-left: 1.8rem !important;
    padding-right: 1.8rem !important;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
    text-align: center;
  }

  .paragraph--type--home-increase-your-buying .rounded-bg {
    max-height: 543px;
    background-size: cover;
  }

  .paragraph--type--home-increase-your-buying .hib-img {
    margin: -1rem;
  }

  .hero-text-media-grid {
    flex-direction: column;
    gap: 28px;
    min-height: unset;
    text-align: center;
  }

  .paragraph .hero-text-media-grid.invert-mobile {
    flex-direction: column-reverse;
  }

  .hero-text-media-media {
    justify-content: center;
  }

  .hero-text-media-text {
    max-width: 640px;
  }

  .hero-text-media-media img {
    width: clamp(220px, 60vw, 380px);
    transform: none;
  }

  .paragraph--type--home-reason .field--name-field-media-image img {
    max-width: 96px;
  }

  .field--name-field-hpwr-title {
    font-size: 1.25rem;
    line-height: 1.75rem;
    padding-bottom: 0.5rem;
  }

  .field--name-field-hpwr-description {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .field--name-field-cqr-title-1 {
    font-size: 0.875rem;
    line-height: 1.35rem;
  }

  .field--name-field-cqr-qr-text {
    font-size: 1rem;
    line-height: 1.2rem;
    margin-top: 2rem;
  }

  .three-cards-head .three-cards-title {
    /* 40px */
    /* 48px */

    font-size: 1.75rem;
    line-height: 3rem;
  }

  .three-cards-intro,
  .feature-grid-intro,
  .hero-text-media-intro,
  .regional-markets-intro,
  .trading-venues .trading-venues-intro,
  .info-grid-intro,
  .faq-accordion-intro {
    font-size: 1rem;
    line-height: normal;
  }

  .card-item-text {
    font-size: 1rem;
    margin-bottom: 3rem !important;
  }

  .card-item-title {
    font-size: 1.25em;
  }

  .card-item-corner {
    background-size: 40%;
  }

  .feature-grid-head .feature-grid-title {
    /* 40px */
    /* 48px */

    font-size: 1.75rem;
    line-height: 3rem;
  }

  .feature-item-inner {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }

  .trading-venues .trading-venues-title {
    font-size: 1.75rem;
    line-height: 1.2;
  }

  .trading-venues-title-golden {
    display: block;
  }

  .paragraph--type--home-why-icap {
    padding: 5rem 1rem;
    background-size: cover;
    background-position: 28% 0;
  }

  .coverage-req .coverage-req-title {
    /* 40px */
    /* 48px */

    font-size: 2.5rem;
    line-height: 3rem;
  }

  .info-grid-head .info-grid-title {
    /* 40px */
    /* 48px */

    font-size: 2.5rem;
    line-height: 3rem;
  }

  .info-grid .info-item-inner {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }

  .faq-accordion .faq-accordion-title {
    /* 40px tablet */
    /* 48px tablet */

    font-size: 2.5rem;
    line-height: 3rem;
  }

  .annual-reports>.container {
    padding-right: 1.25rem;
    padding-left: 1.25rem;
  }

  .docs-reports .docs-reports-display {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .annual-reports .docs-reports-title {
    margin-bottom: 2rem;
  }

  .docs-reports .docs-reports-tabs {
    font-size: 0.875rem;
    margin-bottom: 2rem;
  }

  .doc-item .doc-title {
    font-size: 0.875rem;
    line-height: 1.35rem;
  }

  footer>.container {
    padding: 1rem 1.25rem;
  }

  footer div.region-footer {
    flex-direction: column;
    padding: 0;
  }

  footer .menu--footer {
    padding-top: 1rem;
    padding-bottom: 0.5rem;
  }

  .region-footer>.block>h5,
  .region-footer>.block>h2 {
    font-size: 1.125rem;
  }

  .region-footer .navbar-nav {
    display: flex;
    flex-direction: row;
    max-width: 100%;
  }

  .region-footer .navbar-nav li {
    margin-right: 1rem;
  }

  .region-footer .navbar-nav .nav-link {
    /* 12px */
    font-size: 0.75rem;
  }

  .btmcont .navbar-brand {
    justify-content: center;
  }

  .btmcont .navbar-brand .site-logo img {
    margin: 0 auto;
  }

  .btmbdy {
    text-align: center;
  }

  #block-icap-bs5-footer-5 ul {
    justify-content: center;
  }

  #block-icap-bs5-contactus {
    margin-top: 1rem;
  }

  header .navbar-toggler {
    border: 0;
  }

  header .navbar-toggler:focus {
    box-shadow: none;
  }

  header>.navbar>.container {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .btmcont .copyright {
    text-align: center !important;
  }

  .region-nav-branding {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  #toggle-icon .label {
    display: none;
  }

  .responsive-menu-toggle-icon::before,
  .responsive-menu-toggle-icon::after,
  .responsive-menu-toggle-icon span.icon {
    background: #1A1C1E;
    height: 1.5px;
    width: 19.5px;
  }

  .mm-menu--offcanvas,
  .mm-panels {
    background-color: transparent !important;
  }

  .mm-panel--opened {
    background-color: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(30px);
    padding: 3.5rem 2rem;
  }

  .mm-wrapper--opened .mm-page.mm-slideout {
    transform: translate3d(0, 0, 0) !important;
    z-index: 1;
  }

  .mm-menu--offcanvas {
    -webkit-transform: translate3d(clamp(var(--mm-min-size), var(--mm-size), var(--mm-max-size)), 0, 0);
    transform: translate3d(clamp(var(--mm-min-size), var(--mm-size), var(--mm-max-size)), 0, 0);
    -webkit-transition-duration: .4s;
    -o-transition-duration: .4s;
    transition-duration: .4s;
    -webkit-transition-timing-function: ease;
    -o-transition-timing-function: ease;
    transition-timing-function: ease;
    -webkit-transition-property: width, -webkit-transform;
    transition-property: width, -webkit-transform;
    -o-transition-property: width, transform;
    transition-property: width, transform;
    transition-property: width, transform, -webkit-transform;
  }

  .mm-menu--offcanvas.mm-menu--opened {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    z-index: 2;
  }

  .mm-listitem__btn {
    display: none;
  }

  .mmenu-close-button {
    height: 22px;
  }

  .mmenu-close-button::before {
    transform: rotate(45deg);
    top: 9px;
    height: 2px;
    width: 22px;
  }

  .mmenu-close-button span.icon {
    display: none;
  }

  .mmenu-close-button::after {
    transform: rotate(-45deg);
    top: 9px;
    height: 2px;
    width: 22px;
  }

  .mm-panels>.mm-panel {
    padding: 3.5rem 2rem;
  }

  .mm-listitem__text {
    padding-left: 0;
    padding-right: 0;
  }

  #mm-1 .mm-listview {
    margin-top: 2.5rem;
  }

  .mm-listitem::after {
    display: none;
  }

  .mm-wrapper--opened .mm-wrapper__blocker {
    background-color: #1A1C1E;
    opacity: 70%;

  }

  .mmenu-custom-bottom {
    padding: 2.75rem 2rem;
  }

  .mmenu-custom-bottom a.emenu-item,
  .mmenu-custom-bottom a.emenu-item:link,
  .mmenu-custom-bottom a.emenu-item:visited,
  .mmenu-custom-bottom a.emenu-item:hover,
  .mmenu-custom-bottom a.emenu-item:active {
    margin: 0.75rem auto;
    text-align: center;
  }

  .mmenu-custom-bottom a.emenu-item-2,
  .mmenu-custom-bottom a.emenu-item-2:link,
  .mmenu-custom-bottom a.emenu-item-2:visited,
  .mmenu-custom-bottom a.emenu-item-2:hover,
  .mmenu-custom-bottom a.emenu-item-2:active {
    background: #F0E1BC;
    color: #1A1C1E;
    border: 1px solid #FFFFFF;
    border-radius: 20px;
  }

  .mmenu-custom-languageswitcher ul {
    list-style: none;
    margin: 0;
    padding: 0.875rem 0;
  }

  .mmenu-custom-languageswitcher ul li.is-active {
    display: none;
  }

  .mmenu-custom-searchbox {
    padding: 0.875rem 0;
  }

  .mmenu-custom-bottom .navbar-nav {
    padding: 0;
  }

  .responsive-menu-toggle-wrapper {
    display: flex;
  }

  .toggle-extra .mmenu-custom-languageswitcher ul,
  .toggle-extra .mmenu-custom-searchbox {
    padding: 0;
  }

  .toggle-extra .mmenu-custom-languageswitcher {
    margin-bottom: 2px;
  }

  .toggle-extra .mmenu-custom-searchbox {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .responsive-menu-toggle-icon {
    height: 30px;
    margin-top: 3px;
  }

  .region-breadcrumb {
    top: 80px;
  }

  .card-item-cta a {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
  }

  .brokerage .page-banner-mobile {
    background-position-x: 86%;
    background-position-y: bottom;
  }

  .brokerage .feature-grid .feature-grid-bottom>.feature-item:nth-child(2n) .feature-item-inner .feature-item-body,
  .brokerage .feature-grid .feature-grid-top>.feature-item:nth-child(2n) .feature-item-inner .feature-item-body {
    text-align: start !important;
    max-width: 80%;
    margin-left: 0;
  }

  .brokerage .feature-grid .feature-grid-top>.feature-item:nth-child(1) .feature-item-corner {
    background-position: right top;
  }

  .brokerage .feature-grid .feature-grid-top>.feature-item:nth-child(2) .feature-item-corner {
    background-position: right bottom;
  }

  .brokerage .feature-grid .feature-grid-top>.feature-item:nth-child(4) .feature-item-corner {
    background-position: right bottom;
  }

  .mm-listitem--selected>.mm-listitem__text {
    background: transparent;
    font-weight: 600;
  }

  .mm-listitem--opened .mm-listitem__text {
    padding-top: 0;
  }

  .mm-listitem--opened>.mm-panel {
    background: transparent;
    padding-top: 0;
    padding-bottom: 0;
  }

  #mm-1 .mm-listitem--opened .mm-listview {
    margin-top: 0;
  }

  .hpwqtitle1 {
    display: block;
  }

  .local-market .page-banner-mobile {
    background-position-x: 60%;
    background-position-y: bottom;
  }

  .local-market .page-banner-mobile .container {
    padding-bottom: 0;
  }

  .icap-modal-dialog {
    padding: 1.25rem;
  }

  .icap-modal-app-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .icap-modal-cta-group {
    justify-content: center;
    flex-wrap: wrap;
  }

  /* Fullscreen overlay stays */
  .icap-modal {
    align-items: flex-end;
    /* push modal to bottom */
    padding: 0;
    /* remove extra space */
  }

  /* Convert dialog into bottom sheet */
  .icap-modal-dialog {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 24px 24px 0 0 !important;
    margin: 0;
    padding: 1.5rem !important;
    animation: icap-sheet-slide-up .28s ease-out;
    transform: translateY(0);
    position: relative;
    bottom: 0;
  }

  /* Optional: small drag indicator */
  .icap-modal-dialog::before {
    content: "";
    width: 48px;
    height: 5px;
    border-radius: 999px;
    background: #ddd;
    margin: 0 auto 12px auto;
    display: block;
  }

  /* Close button reposition */
  .icap-modal-close {
    top: 12px;
    right: 16px;
  }

  /* Slide-up animation */
  @keyframes icap-sheet-slide-up {
    from {
      transform: translateY(50%);
      opacity: 0;
    }

    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  .newsroom .page-banner-mobile {
    padding-top: 120px;
  }

  .description {
    font-size: 0.875rem;
    line-height: 1.375rem;
  }

  .view-articles.view-display-id-newsroom {
    padding: 5rem 2%;
  }

  .view-articles.view-display-id-newsroom .description {
    max-width: 100%;
  }

  .view-announcements {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .ann-slide-title {
    text-align: center;
    padding-top: 2rem;
  }

  .ann-slide-date {
    text-align: center;
    font-size: 0.75rem;
  }

  .ann-slide-text {
    text-align: center;
    font-size: 0.875rem;
    line-height: 1.375rem;
  }

  .ann-slide-cta {
    text-align: center;
  }

  .article-page-title {
    font-size: 1.75rem;
    line-height: 2.25rem;
    padding-bottom: 0;
  }

  .article-page-head {
    margin-top: 80px;
  }

  .article-page-date {
    padding-bottom: 0.5rem;
    padding-top: 1rem;
    font-size: 0.75rem;
  }

  .article-page-hero {
    padding-top: 0.5rem;
    padding-bottom: 1rem;
  }

  .article-page-body {
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding-top: 1rem;
    padding-bottom: 0px;
  }

  .trending-articles-title {
    font-size: 1.75rem;
    line-height: 2.25rem;
    padding-top: 3rem;
    padding-bottom: 1rem;
  }

  .trending-articles-block {
    padding-bottom: 5rem;
  }

  .annual-reports.docs-reports {
    padding-top: 5rem;
  }

  .annual-reports .docs-reports-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start !important;
    gap: 0.75rem;
    padding-bottom: 0.25rem;
  }

  .annual-reports .docs-reports-tab {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .annual-reports .docs-reports-tabs::-webkit-scrollbar {
    display: none;
  }

  .annual-reports .docs-reports-tabs {
    scrollbar-width: none;
  }

  .doc-item .doc-download a,
  .doc-item .doc-download a:hover,
  .doc-item .doc-download a:visited,
  .doc-item .doc-download a:active {
    display: none;
  }

  .doc-item .doc-download {
    height: 20px;
  }

  .doc-item .doc-row-left {
    gap: 0;
  }

  .doc-item .doc-date {
    font-size: 0.875rem;
  }

  .annual-reports-mobile {
    padding: 1.5rem 0;
  }

  .annual-reports-mobile-load-more {
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
    display: block;
    background: transparent;
    border: 1px solid #A44F17;
    border-radius: 24px;
    padding: 1.25rem 1.5rem;
    font-size: 0.875rem;
    color: #A44F17;
    text-align: center;
  }

  .annual-reports-mobile-load-more:hover,
  .annual-reports-mobile-load-more:focus {
    background: #A44F17;
    color: #fff;
  }

}

@media (min-width: 992px) {

  .home-banner-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
  }

  .feature-grid .feature-grid-top {
    /* three columns */

    grid-template-columns: 1fr 1.5fr 1fr;
  }

  .feature-grid .feature-grid-bottom {
    /* two columns */

    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr;
  }

  /* neutralize Bootstrap column sizing on grid items */
  .feature-grid .feature-item {
    flex: none;
    width: auto;
    padding: 0;
  }

  /* place items */
  .feature-grid .feature-grid-top>.feature-item:nth-child(1) {
    grid-column: 1;
    grid-row: 1 / span 2;
    min-height: 452px;
  }

  .feature-grid .feature-grid-top>.feature-item:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
  }

  .feature-grid .feature-grid-top>.feature-item:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
  }

  .feature-grid .feature-grid-top>.feature-item:nth-child(4) {
    grid-column: 3;
    grid-row: 1 / span 2;
  }

  /* make item fill their grid cells vertically */
  .feature-grid .feature-item-inner {
    height: 100%;
  }

  .navbar-brand img {
    height: 56px;
    margin: 0;
  }

  .paragraph-container {
    padding: 5%;
    min-height: 400px;
  }

  .home-banner-mobile,
  .hop-mobile {
    background-image: none !important;
  }

  .card-item-inner {
    min-height: 550px;
  }

  .card-item-cta {
    position: absolute;
  }

  .feature-grid {
    padding: 6%;
  }

  .info-grid {
    padding: 6% 1%;
  }

  .info-grid .info-item-inner {
    min-height: 330px;
  }

  .faq-accordion {
    padding: 6% 1%;
  }

  .icap-modal-dialog {
    position: relative;
    width: min(743px, 92vw);
    max-width: 743px;
  }

  #icapModalApp .icap-modal-title {
    text-align: start;
  }

  /* prevents background scroll while any modal is open */
  html.is-modal-open {
    overflow: hidden;
  }
}

@media (max-width: 1199.98px) {

  .feature-grid .feature-grid-top>.feature-item:nth-child(4) .feature-item-inner {
    padding-top: 2.2rem;
  }

  .items-row>.item {
    flex-basis: calc(33.333% - 1.5rem);
    max-width: calc(33.333% - 1.5rem);
  }
}

@media (min-width: 1200px) {
  .paragraph-container {
    padding: 8%;
    min-height: 400px;
  }

  .three-cards {
    padding: 5%;
  }
}

@media (min-width: 1400px) {
  .trading-venues {
    min-height: 874px;
    display: flex;
  }

  .trading-venues .container {
    margin: auto;
  }

  .paragraph--type--home-why-icap {
    min-height: 790px;
    display: flex;
    margin: 0 !important;
  }

  .paragraph--type--home-why-icap .container {
    margin: auto;
  }

  .container {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
    position: relative;
  }

  .paragraph-container {
    padding: 2% 10%;
    min-height: 830px;
  }

  .home .paragraph-container {
    padding: 8% 10%;
  }

  .paragraph-container.paragraph--type--qr-app-store {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .three-cards {
    padding: 11% 9%;
  }

  .feature-grid {
    padding: 10% 12.5%;
  }

  .info-grid {
    padding: 10% 12.5%;
  }

  .faq-accordion {
    padding: 10% 12.5%;
  }
}