:root {
  --bank-navy: #071b54;
  --bank-blue: #2878ff;
  --bank-ice: #e8f0fb;
}

body {
  overflow-x: hidden;
}

.bank-hero {
  grid-template-columns: minmax(0, .68fr) minmax(0, 1.32fr);
}

.bank-hero h1 {
  max-width: 620px;
}

.bank-hero h2 {
  color: var(--bank-blue);
}

.bank-hero-visual {
  overflow: hidden;
  background: var(--bank-navy);
}

.bank-hero-visual img {
  aspect-ratio: 4580 / 2940;
  object-fit: cover;
}

.bank-kicker {
  margin: 0 0 26px;
  color: var(--bank-blue) !important;
  font-size: .78rem !important;
  line-height: 1 !important;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.bank-process-scroll {
  overflow-x: auto;
  padding-bottom: 20px;
  scrollbar-width: thin;
}

.bank-process {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(190px, 1fr));
  min-width: 1060px;
  padding-top: 13px;
}

.bank-process::before {
  content: "";
  position: absolute;
  top: 29px;
  left: 2%;
  right: 2%;
  height: 2px;
  background: var(--bank-navy);
}

.bank-process article {
  position: relative;
  z-index: 1;
  padding-right: clamp(28px, 4vw, 60px);
}

.bank-process article::before {
  content: "";
  display: block;
  width: 34px;
  height: 34px;
  margin-bottom: 30px;
  border: 7px solid #fff;
  border-radius: 50%;
  background: var(--bank-blue);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--bank-blue) 45%, var(--divider));
}

.bank-process span,
.bank-editorial-grid span,
.bank-benchmark-copy span,
.bank-flow figcaption span {
  color: var(--bank-blue);
  font-size: .75rem;
  font-weight: 600;
}

.bank-process h3 {
  margin: 18px 0 15px;
  max-width: 180px;
  font-size: 1.03rem;
  line-height: 1.25;
  font-weight: 600;
}

.bank-process p {
  max-width: 185px;
  color: var(--text-secondary);
  font-size: .84rem;
  line-height: 1.55;
}

.bank-literature {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  gap: clamp(54px, 10vw, 164px);
  align-items: end;
  padding-top: clamp(36px, 5vw, 72px);
  border-top: 1px solid var(--divider);
}

.bank-lead {
  max-width: 850px;
  font-size: clamp(1.9rem, 3.7vw, 4rem);
  line-height: 1.1;
  letter-spacing: -.052em;
}

.bank-literature h3 {
  margin: 0 0 24px;
  font-size: clamp(1.45rem, 2.2vw, 2.3rem);
  line-height: 1.13;
  font-weight: 500;
  letter-spacing: -.04em;
}

.bank-literature div p,
.bank-editorial-grid p,
.bank-benchmark-copy p,
.bank-flow-link {
  color: var(--text-secondary);
  font-size: clamp(.96rem, 1.1vw, 1.08rem);
  line-height: 1.66;
}

.bank-editorial-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--divider);
}

.bank-editorial-grid article {
  min-height: 320px;
  padding: clamp(30px, 4vw, 56px) clamp(28px, 5vw, 78px) clamp(40px, 5vw, 70px) 0;
  border-bottom: 1px solid var(--divider);
}

.bank-editorial-grid article:nth-child(odd) {
  border-right: 1px solid var(--divider);
}

.bank-editorial-grid article:nth-child(even) {
  padding-left: clamp(28px, 5vw, 78px);
}

.bank-editorial-grid h3 {
  max-width: 520px;
  margin: clamp(42px, 6vw, 80px) 0 23px;
  font-size: clamp(1.8rem, 3vw, 3.15rem);
  line-height: 1;
  font-weight: 500;
  letter-spacing: -.05em;
}

.bank-editorial-grid p {
  max-width: 580px;
}

.bank-editorial-grid-five article:last-child {
  grid-column: 1 / -1;
  border-right: 0;
  padding-right: 50%;
}

.bank-benchmark-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--divider);
}

.bank-benchmark-grid > article {
  min-width: 0;
  padding: clamp(30px, 4vw, 52px) clamp(22px, 4vw, 56px) clamp(48px, 6vw, 78px) 0;
  border-bottom: 1px solid var(--divider);
}

.bank-benchmark-grid > article:nth-child(odd) {
  border-right: 1px solid var(--divider);
}

.bank-benchmark-grid > article:nth-child(even) {
  padding-left: clamp(22px, 4vw, 56px);
}

.bank-benchmark-copy h3 {
  margin: 26px 0 15px;
  font-size: clamp(1.8rem, 3vw, 3rem);
  line-height: 1;
  font-weight: 500;
  letter-spacing: -.048em;
}

.bank-benchmark-copy p {
  min-height: 88px;
  max-width: 590px;
}

.bank-benchmark-grid figure {
  height: clamp(420px, 46vw, 690px);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: clamp(34px, 5vw, 70px) 0 0;
  overflow: hidden;
  background: #fff;
}

.bank-benchmark-grid img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.bank-research-highlight {
  display: grid;
  grid-template-columns: minmax(170px, .45fr) minmax(0, 1.55fr);
  gap: clamp(38px, 8vw, 124px);
  align-items: end;
  margin-bottom: clamp(72px, 9vw, 130px);
  padding-bottom: clamp(36px, 5vw, 68px);
  border-bottom: 1px solid var(--divider);
}

.bank-research-highlight strong {
  color: var(--bank-blue);
  font-size: clamp(6rem, 13vw, 13rem);
  line-height: .75;
  font-weight: 500;
  letter-spacing: -.08em;
}

.bank-research-highlight p {
  font-size: clamp(2rem, 4vw, 4.5rem);
  line-height: .95;
  letter-spacing: -.055em;
}

.bank-insights article:last-child {
  grid-column: 1 / -1;
  border-right: 0;
  padding-right: 50%;
}

.bank-persona-heading {
  grid-template-columns: 1fr;
}

.bank-persona-image-wrap {
  width: 100%;
  overflow-x: auto;
  padding-bottom: 16px;
  scrollbar-width: thin;
}

.bank-persona-final {
  width: 100%;
  margin: 0;
}

.bank-persona-final img {
  width: 100%;
  height: auto;
  display: block;
}

.bank-feature-overview ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bank-diagram-scroll {
  width: 100%;
  overflow-x: auto;
  padding-bottom: 18px;
  scrollbar-width: thin;
}

.bank-diagram-scroll figure {
  width: 100%;
  margin: 0;
}

.bank-diagram-scroll img {
  width: 100%;
  height: auto;
  display: block;
}

.bank-main-features {
  display: grid;
  grid-template-columns: minmax(190px, .3fr) minmax(0, 1.7fr);
  gap: clamp(46px, 7vw, 110px);
  align-items: start;
}

.bank-main-features ol {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--divider);
}

.bank-main-features li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  padding-block: 19px;
  border-bottom: 1px solid var(--divider);
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
}

.bank-main-features li span {
  color: var(--bank-blue);
  font-size: .72rem;
}

.bank-main-features figure {
  margin: 0;
}

.bank-main-features img {
  width: 100%;
  height: auto;
  display: block;
}

.bank-feature-overview {
  display: grid;
  grid-template-columns: minmax(150px, .42fr) minmax(0, 1.58fr);
  gap: clamp(42px, 8vw, 130px);
  margin: calc(-1 * clamp(22px, 3vw, 44px)) 0 clamp(62px, 9vw, 126px);
}

.bank-feature-overview ul {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid var(--divider);
}

.bank-feature-overview li {
  width: 50%;
  padding: 17px 22px 17px 0;
  border-bottom: 1px solid var(--divider);
  color: var(--text-secondary);
  font-size: clamp(.92rem, 1.1vw, 1.06rem);
}

.bank-phone-gallery {
  display: grid;
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}

.bank-phone-gallery-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bank-phone-gallery-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 1040px;
  margin-inline: auto;
}

.bank-phone-gallery figure,
.bank-flow figure {
  min-width: 0;
  margin: 0;
}

.bank-phone-gallery figure > div {
  height: clamp(470px, 56vw, 830px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bank-phone-gallery img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
}

.bank-phone-gallery figcaption {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--divider);
  font-size: clamp(1.15rem, 1.8vw, 1.7rem);
  font-weight: 500;
}

.bank-flow-link {
  max-width: 720px;
  margin: calc(-1 * clamp(22px, 3vw, 44px)) 0 clamp(54px, 7vw, 92px) auto;
  padding-top: 22px;
  border-top: 1px solid var(--divider);
}

.bank-flow-link strong {
  color: var(--text-primary);
  font-weight: 500;
}

.bank-flow-scroll {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  overflow-x: auto;
  padding: 0 0 28px;
  scrollbar-width: thin;
}

.bank-flow {
  display: flex;
  width: max-content;
  gap: clamp(32px, 4vw, 68px);
  align-items: flex-start;
}

.bank-flow figure {
  width: clamp(250px, 24vw, 360px);
  flex: none;
}

.bank-flow figure > div {
  height: clamp(510px, 49vw, 740px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bank-flow img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
}

.bank-flow figcaption {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--divider);
  font-size: clamp(1rem, 1.4vw, 1.3rem);
  line-height: 1.2;
  font-weight: 500;
}

.bank-flow-short {
  min-width: min-content;
}

.bank-closing h2 {
  max-width: 1180px;
  font-size: clamp(3.4rem, 7.8vw, 8.2rem);
}

@media (max-width: 900px) {
  .bank-hero {
    grid-template-columns: 1fr;
  }

  .bank-hero-visual {
    width: 100%;
  }

  .bank-literature,
  .bank-main-features {
    grid-template-columns: 1fr;
  }

  .bank-benchmark-copy p {
    min-height: 112px;
  }

  .bank-persona-final {
    width: 1080px;
  }

  .bank-phone-gallery-three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bank-phone-gallery figure > div {
    height: clamp(520px, 84vw, 760px);
  }
}

@media (max-width: 640px) {
  .bank-process {
    min-width: 980px;
  }

  .bank-literature {
    gap: 56px;
  }

  .bank-editorial-grid,
  .bank-benchmark-grid,
  .bank-phone-gallery-three,
  .bank-phone-gallery-two {
    grid-template-columns: 1fr;
  }

  .bank-editorial-grid article,
  .bank-editorial-grid article:nth-child(even),
  .bank-editorial-grid-five article:last-child,
  .bank-insights article:last-child,
  .bank-benchmark-grid > article,
  .bank-benchmark-grid > article:nth-child(even) {
    grid-column: auto;
    min-height: 0;
    padding: 32px 0 46px;
    border-right: 0;
  }

  .bank-editorial-grid article:nth-child(odd),
  .bank-benchmark-grid > article:nth-child(odd) {
    border-right: 0;
  }

  .bank-editorial-grid h3 {
    margin-top: 42px;
  }

  .bank-benchmark-copy p {
    min-height: 0;
  }

  .bank-benchmark-grid figure {
    height: 520px;
    margin-top: 34px;
  }

  .bank-research-highlight {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .bank-diagram-scroll {
    width: calc(100% + var(--gutter));
  }

  .bank-diagram-scroll figure {
    width: 1180px;
  }

  .bank-main-features {
    gap: 42px;
  }

  .bank-main-features ol {
    order: 2;
  }

  .bank-main-features figure {
    order: 1;
  }

  .bank-feature-overview {
    grid-template-columns: 1fr;
    margin-top: -12px;
  }

  .bank-feature-overview ul {
    grid-column: auto;
  }

  .bank-feature-overview li {
    width: 100%;
  }

  .bank-phone-gallery-two {
    max-width: none;
  }

  .bank-phone-gallery figure > div {
    height: auto;
    max-height: none;
  }

  .bank-phone-gallery img {
    width: 100%;
    height: auto;
    max-height: none;
  }

  .bank-flow-scroll {
    scroll-snap-type: x proximity;
  }

  .bank-flow {
    gap: 30px;
  }

  .bank-flow figure {
    width: 280px;
    scroll-snap-align: start;
  }

  .bank-flow figure > div {
    height: 575px;
  }
}

/* Shared portfolio typography roles */
.bank-kicker,
.bank-process span,
.bank-editorial-grid span,
.bank-benchmark-copy span,
.bank-flow figcaption span {
  font-size: var(--type-label) !important;
  line-height: 1.5;
}

.bank-lead,
.bank-research-highlight p {
  font-size: var(--type-lead);
  line-height: 1.25;
  font-weight: 400;
}

.bank-research-highlight strong {
  font-size: var(--type-page-h1);
  line-height: .9;
}

.bank-literature h3,
.bank-editorial-grid h3,
.bank-benchmark-copy h3 {
  font-size: var(--type-feature-heading);
  line-height: 1.08;
  font-weight: 500;
}

.bank-literature div p,
.bank-editorial-grid p,
.bank-benchmark-copy p,
.bank-flow-link,
.bank-feature-overview li,
.bank-main-features li {
  font-size: var(--type-body);
  line-height: 1.65;
}

.bank-phone-gallery figcaption,
.bank-flow figcaption {
  font-size: var(--type-label);
  line-height: 1.5;
}

.bank-closing h2 {
  font-size: var(--type-large-section);
  line-height: 1;
}