/* Cents Traders corporate division gateway */

.division-gateway {
  --gateway-cream: #fff5e8;
  --gateway-ink: #20130d;
  --gateway-orange: #fe5500;
  --gateway-gold: #ffaf01;
  --gateway-blue: #0878c9;
  position: relative;
  isolation: isolate;
  min-height: calc(100svh - 5rem);
  overflow: hidden;
  padding: clamp(3rem, 6vw, 6rem) 1.5rem clamp(2.5rem, 5vw, 4.5rem);
  color: #fff;
  background: linear-gradient(135deg, rgb(4 22 15 / 96%), rgb(5 18 25 / 97%)), url("../images/home/nairobi-skyline-hero.f3d79827dbf8.webp") center / cover no-repeat;
}

.division-gateway::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .2;
  background-image: linear-gradient(rgb(255 255 255 / 8%) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 8%) 1px, transparent 1px);
  background-size: 4rem 4rem;
  mask-image: linear-gradient(to bottom, #000, transparent 82%);
}

.division-gateway::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 0;
  left: 0;
  height: 18rem;
  background: linear-gradient(to top, rgb(0 0 0 / 30%), transparent);
  pointer-events: none;
}

.division-gateway__glow {
  position: absolute;
  z-index: -1;
  width: clamp(18rem, 35vw, 38rem);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(6rem);
  opacity: .18;
  pointer-events: none;
}

.division-gateway__glow--paper { top: 8%; left: -12%; background: var(--gateway-orange); }
.division-gateway__glow--dolfin { right: -12%; bottom: 5%; background: var(--gateway-blue); }

.division-gateway__intro {
  width: min(100%, 68rem);
  margin: 0 auto clamp(2.5rem, 5vw, 4.25rem);
  text-align: center;
}

.division-gateway__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  margin: 0 0 1.2rem;
  color: #e7dcd4;
  font-size: clamp(.72rem, .67rem + .2vw, .85rem);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.division-gateway__eyebrow span {
  width: .55rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--gateway-gold);
  box-shadow: 0 0 0 .3rem rgb(255 175 1 / 14%);
}

.division-gateway__intro h1 {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2.7rem, 2rem + 3.7vw, 5.8rem);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.055em;
  text-wrap: balance;
}

.division-gateway__lead {
  max-width: 44rem;
  margin: 1.5rem auto 0;
  color: #c8d0cc;
  font-size: clamp(1.02rem, .94rem + .3vw, 1.2rem);
  line-height: 1.65;
  text-wrap: balance;
}

.division-gateway__choices {
  position: relative;
  display: grid;
  width: min(100%, var(--content-wide));
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-inline: auto;
}

.division-choice {
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-rows: clamp(15rem, 25vw, 21rem) 1fr;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: clamp(1.15rem, 2vw, 1.75rem);
  color: inherit;
  text-decoration: none;
  box-shadow: 0 2rem 5rem rgb(0 0 0 / 28%);
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.division-choice::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 5rem;
  height: 5rem;
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  opacity: .9;
  pointer-events: none;
}

.division-choice--paper::after { background: var(--gateway-gold); }
.division-choice--dolfin::after { background: #29a9ff; }

.division-choice:hover,
.division-choice:focus-visible {
  z-index: 2;
  color: inherit;
  text-decoration: none;
  transform: translateY(-.65rem);
  border-color: rgb(255 255 255 / 52%);
  box-shadow: 0 2.7rem 6rem rgb(0 0 0 / 38%);
}

.division-choice__visual {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: #d9d1c8;
}

.division-choice__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(0 0 0 / 42%), transparent 56%);
}

.division-choice__visual::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  opacity: 0;
  background: radial-gradient(circle at var(--gateway-light-x, 50%) var(--gateway-light-y, 50%), rgb(255 255 255 / 24%), transparent 42%);
  transition: opacity .45s ease;
  pointer-events: none;
}

.division-choice:hover .division-choice__visual::before,
.division-choice:focus-visible .division-choice__visual::before { opacity: 1; }

.division-choice__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.035) translate3d(var(--gateway-x, 0), var(--gateway-y, 0), 0);
  transition: transform .85s cubic-bezier(.2, .75, .25, 1), filter .35s ease;
}

.division-choice--paper .division-choice__visual img { object-position: center 46%; }
.division-choice:hover .division-choice__visual img,
.division-choice:focus-visible .division-choice__visual img { transform: scale(1.075) translate3d(var(--gateway-x, 0), var(--gateway-y, 0), 0); filter: saturate(1.08) contrast(1.02); }

.division-choice__number {
  position: absolute;
  z-index: 2;
  top: 1.2rem;
  left: 1.4rem;
  color: rgb(255 255 255 / 78%);
  font: 600 clamp(1.2rem, 2vw, 1.75rem)/1 "Playfair Display", Georgia, serif;
  letter-spacing: .04em;
}

.division-choice__badge {
  position: absolute;
  z-index: 2;
  right: 1.25rem;
  bottom: 1.2rem;
  padding: .6rem .85rem;
  border: 1px solid rgb(255 255 255 / 45%);
  border-radius: 999rem;
  color: #fff;
  background: rgb(5 18 15 / 68%);
  backdrop-filter: blur(.65rem);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.division-choice__body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2.4rem);
}

.division-choice--paper .division-choice__body {
  color: var(--gateway-ink);
  background: radial-gradient(circle at 100% 0, rgb(255 175 1 / 20%), transparent 34%), var(--gateway-cream);
}

.division-choice--dolfin .division-choice__body {
  color: #f4f9fc;
  background: radial-gradient(circle at 100% 0, rgb(41 169 255 / 18%), transparent 35%), #071d2b;
}

.division-choice__kicker {
  margin: 0 0 .55rem;
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .105em;
  line-height: 1.4;
  text-transform: uppercase;
}

.division-choice--paper .division-choice__kicker { color: #a33b07; }
.division-choice--dolfin .division-choice__kicker { color: #69c4ff; }

.division-choice h2 {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2.25rem, 2rem + 1.2vw, 3.25rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.045em;
}

.division-choice__description {
  max-width: 32rem;
  margin: 1rem 0 1.25rem;
  font-size: clamp(.98rem, .92rem + .2vw, 1.08rem);
  line-height: 1.58;
}

.division-choice__description strong {
  color: inherit;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-thickness: .08em;
  text-underline-offset: .18em;
}

.division-choice--paper .division-choice__description { color: #69544a; }
.division-choice--dolfin .division-choice__description { color: #bbcad2; }

.division-choice__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin: 0 0 1.7rem;
  padding: 0;
  list-style: none;
}

.division-choice__tags li {
  padding: .42rem .68rem;
  border: 1px solid currentColor;
  border-radius: 999rem;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1;
}

.division-choice--paper .division-choice__tags li { color: #9d4a1d; border-color: #e9c7b4; background: rgb(255 255 255 / 55%); }
.division-choice--dolfin .division-choice__tags li { color: #bfe6ff; border-color: rgb(105 196 255 / 30%); background: rgb(255 255 255 / 4%); }

.division-choice__action {
  display: flex;
  width: 100%;
  min-height: 3.45rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding: .8rem 1rem .8rem 1.15rem;
  border-radius: .65rem;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: background .25s ease, color .25s ease;
}

.division-choice--paper .division-choice__action { color: #fff; background: linear-gradient(135deg, var(--gateway-orange), #ef7200); }
.division-choice--dolfin .division-choice__action { color: #071d2b; background: #fff; }

.division-choice__action svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .25s ease;
}

.division-choice:hover .division-choice__action svg,
.division-choice:focus-visible .division-choice__action svg { transform: translateX(.3rem); }
.division-choice--paper:hover .division-choice__action { background: #d94800; }
.division-choice--dolfin:hover .division-choice__action { background: #8bd2ff; }

.division-gateway__or {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  display: grid;
  width: 3rem;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 28%);
  border-radius: 50%;
  color: #d9e1dd;
  background: #0a1b18;
  box-shadow: 0 .6rem 1.4rem rgb(0 0 0 / 22%);
  font: italic 500 .9rem/1 "Playfair Display", Georgia, serif;
  transform: translate(-50%, -50%);
}

.division-gateway__footnote {
  margin: clamp(2rem, 4vw, 3.25rem) auto 0;
  color: #9eaaa5;
  font-size: .85rem;
  letter-spacing: .035em;
  text-align: center;
}

@media (max-width: 48rem) {
  .division-gateway { padding-inline: 1rem; }
  .division-gateway__intro h1 br { display: none; }
  .division-gateway__choices { width: min(100%, 37rem); grid-template-columns: 1fr; gap: 1.35rem; }
  .division-choice { grid-template-rows: clamp(10rem, 44vw, 14rem) 1fr; }
  .division-choice__body { padding: 1.25rem; }
  .division-choice__kicker,
  .division-choice__tags { display: none; }
  .division-choice h2 { font-size: clamp(2rem, 8vw, 2.6rem); }
  .division-choice__description { margin: .65rem 0 1rem; font-size: .96rem; line-height: 1.45; }
  .division-choice__action { min-height: 3.25rem; }
  .division-gateway__or { top: 50%; width: 2.6rem; }
}

@media (max-width: 30rem) {
  .division-gateway { padding: 2.5rem .75rem 2.25rem; }
  .division-gateway__intro { margin-bottom: 2rem; padding-inline: .5rem; }
  .division-gateway__intro h1 { font-size: clamp(2.55rem, 12vw, 3.45rem); line-height: 1.02; letter-spacing: -.035em; }
  .division-gateway__lead { font-size: 1rem; }
  .division-choice__body { padding: 1.1rem; }
  .division-choice__badge { right: .9rem; bottom: .9rem; font-size: .65rem; }
  .division-choice__number { top: 1rem; left: 1rem; }
  .division-choice__action { font-size: .76rem; }
}

/* Premium gateway entrance and interaction motion. */
.js .division-gateway.gateway-motion-ready [data-gateway-reveal] { opacity: 0; }
.js .division-gateway.gateway-motion-ready [data-gateway-reveal="intro"] { transform: translateY(2rem); transition: opacity .9s ease, transform 1.15s cubic-bezier(.16, 1, .3, 1); }
.js .division-gateway.gateway-motion-ready [data-gateway-reveal="intro"] .division-gateway__eyebrow { transform: translateY(.8rem); transition: transform .85s .16s cubic-bezier(.16, 1, .3, 1); }
.js .division-gateway.gateway-motion-ready [data-gateway-reveal="intro"] h1 { clip-path: inset(0 0 100% 0); transform: translateY(1.5rem); transition: clip-path 1.1s .2s cubic-bezier(.16, 1, .3, 1), transform 1.1s .2s cubic-bezier(.16, 1, .3, 1); }
.js .division-gateway.gateway-motion-ready [data-gateway-reveal="intro"] .division-gateway__lead { opacity: 0; transform: translateY(1rem); transition: opacity .8s .55s ease, transform .9s .55s cubic-bezier(.16, 1, .3, 1); }
.js .division-gateway.gateway-motion-ready [data-gateway-reveal="paper-card"] { transform: translate3d(-3.5rem, 2rem, 0) rotateY(5deg) scale(.97); transform-origin: right center; transition: opacity .9s .22s ease, transform 1.2s .22s cubic-bezier(.16, 1, .3, 1), border-color .35s ease, box-shadow .35s ease; }
.js .division-gateway.gateway-motion-ready [data-gateway-reveal="dolfin-card"] { transform: translate3d(3.5rem, 2rem, 0) rotateY(-5deg) scale(.97); transform-origin: left center; transition: opacity .9s .34s ease, transform 1.2s .34s cubic-bezier(.16, 1, .3, 1), border-color .35s ease, box-shadow .35s ease; }
.js .division-gateway.gateway-motion-ready .division-choice__visual { clip-path: inset(0 0 100% 0); transition: clip-path 1.05s .48s cubic-bezier(.16, 1, .3, 1); }
.js .division-gateway.gateway-motion-ready .division-choice--dolfin .division-choice__visual { transition-delay: .6s; }
.js .division-gateway.gateway-motion-ready .division-choice__tags li { opacity: 0; transform: translateY(.65rem) scale(.94); transition: opacity .5s var(--tag-delay, 720ms) ease, transform .65s var(--tag-delay, 720ms) cubic-bezier(.16, 1, .3, 1); }
.js .division-gateway.gateway-motion-ready [data-gateway-reveal="or"] { transform: translate(-50%, -50%) scale(.55) rotate(-20deg); transition: opacity .6s .85s ease, transform .8s .85s cubic-bezier(.2, 1.3, .35, 1); }
.js .division-gateway.gateway-motion-ready [data-gateway-reveal="footnote"] { transform: translateY(1rem); transition: opacity .7s ease, transform .9s cubic-bezier(.16, 1, .3, 1); }
.js .division-gateway.gateway-motion-ready [data-gateway-reveal].gateway-is-visible { opacity: 1; transform: none; }
.js .division-gateway.gateway-motion-ready [data-gateway-reveal="or"].gateway-is-visible { transform: translate(-50%, -50%) scale(1) rotate(0); }
.js .division-gateway.gateway-motion-ready [data-gateway-reveal="intro"].gateway-is-visible h1 { clip-path: inset(0); transform: none; }
.js .division-gateway.gateway-motion-ready [data-gateway-reveal="intro"].gateway-is-visible :is(.division-gateway__eyebrow, .division-gateway__lead) { opacity: 1; transform: none; }
.js .division-gateway.gateway-motion-ready .division-choice.gateway-is-visible .division-choice__visual { clip-path: inset(0); }
.js .division-gateway.gateway-motion-ready .division-choice.gateway-is-visible .division-choice__tags li { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .division-gateway.gateway-motion-ready [data-gateway-reveal],
  .js .division-gateway.gateway-motion-ready [data-gateway-reveal] *,
  .js .division-gateway.gateway-motion-ready .division-choice__visual,
  .js .division-gateway.gateway-motion-ready .division-choice__tags li {
    opacity: 1 !important;
    clip-path: none !important;
    transform: none !important;
    transition: none !important;
  }
  .division-choice,
  .division-choice__visual img,
  .division-choice__action svg { transition: none; }
}