/* ==========================================================================
   Partners Bank — Component & Section Styles
   Layered over Bootstrap 5.3. Design tokens live in tokens.css.
   ========================================================================== */

body {
  font-family: var(--pb-font-sans);
  color: var(--pb-ink);
  background: #fff;
}

/* --------------------------------------------------------------------------
   Shared type
   -------------------------------------------------------------------------- */
.pb-eyebrow {
  font-family: var(--pb-font-sans);
  font-weight: 700;
  font-size: 17.3px;
  letter-spacing: 0.87px;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 0;
}
.pb-eyebrow-sm { font-size: 14px; letter-spacing: 0.7px; }

.pb-heading {
  font-family: var(--pb-font-serif);
  font-weight: 600;
  font-size: 40px;
  letter-spacing: -0.4px;
  line-height: 1.35;
  margin-bottom: 0;
}

.pb-script {
  font-family: var(--pb-font-script);
  font-weight: 400;
  font-size: 1.4em;
  color: var(--pb-sky-bright);
  line-height: 1;
}

/* Centered gutter container for card groups */
.container-pb {
  width: 100%;
  max-width: var(--pb-content-max);
  margin-inline: auto;
  padding-inline: 20px;
}

/* Full-bleed sections with page gutters */
.pb-gutter { padding-inline: var(--pb-gutter); }

/* Framed sections — inset from viewport edges, big rounded top corners */
/* removed 2026-10-14: page gap is now main's flex gap (Figma: 80px between every section) */
/* removed 2026-10-14 (main gap) */   /* FAQ band is the last block on many product pages — keep it off the footer */   /* ice bands (FAQ, callout) never touch the CTA that follows (Drew 2026-09-17) */
/* removed 2026-10-14: page gap is now main's flex gap (Figma: 80px between every section) */   /* the ice callout band was touching the zero-bottom image/text section (Open an Account) */
/* Table block, `forms` style — Tools & Forms comp (Drew 2026-09-17): ice band, left heading with chevrons, filter box, icon rows */
.pb-table--forms { background: var(--pb-ice); padding-block: 56px 64px !important; position: relative; }
.pb-table--forms .pb-section-title { text-align: left; margin-bottom: 24px; }
.pb-table--forms .forms-chevrons { position: absolute; right: var(--pb-gutter); top: 44px; width: 160px; }
.pb-table--forms .pb-rates-table { overflow: visible !important; font-size: 15px; }
.pb-forms .forms-filter { display: flex; align-items: center; gap: 20px; background: #fff; border-radius: 12px; padding: 18px 28px; margin: 0 0 36px; }
.pb-forms .forms-filter img { width: 48px; height: 48px; }
.pb-forms .forms-filter select { flex: 1; border: 0; background: transparent; font-family: var(--pb-font-sans); font-weight: 700; font-size: 15px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--pb-blue); }
.pb-forms .forms-list { list-style: none; margin: 0; padding: 0 20px; }
.pb-forms .forms-list li { display: flex; align-items: center; gap: 20px; padding: 10px 0; }
.pb-forms .forms-list img { width: 34px; height: 34px; flex-shrink: 0; }
.pb-forms .form-name { flex: 1; font-weight: 700; font-size: 15px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--pb-blue); }
.pb-forms .forms-list .btn-pb { padding: 8px 22px; font-size: 15px; }   /* Drew 2026-09-17: the FAQ band and the framed CTA were touching (About, Compare) */
.pb-frame {
  margin-inline: var(--pb-frame-inset);
  border-top-left-radius: var(--pb-radius-frame);
  border-top-right-radius: var(--pb-radius-frame);
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn-pb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-family: var(--pb-font-sans);
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  padding: 10px 24px;
  border-radius: var(--pb-radius-pill);
  border: 1.25px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  transition: filter 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.btn-pb:hover { filter: brightness(0.92); }

/* Large serif CTAs (hero, bottom CTA) */
.btn-pb-lg {
  font-family: var(--pb-font-serif);
  font-weight: 500;
  font-size: 20px;
  min-height: 56px;
  padding: 8px 28px;
}

/* Outline variants */
.btn-pb-outline-white   { border-color: #fff; color: #fff; }
.btn-pb-outline-white:hover { background: rgba(255, 255, 255, 0.12); color: #fff; filter: none; }
.btn-pb-outline-navy    { border-color: var(--pb-navy); color: var(--pb-navy); }
.btn-pb-outline-navy:hover { background: rgba(0, 46, 87, 0.08); color: var(--pb-navy); filter: none; }
.btn-pb-outline-sky     { border-color: var(--pb-sky-bright); color: var(--pb-sky-bright); }
.btn-pb-outline-sky:hover { background: rgba(19, 153, 242, 0.08); color: var(--pb-sky-bright); filter: none; }
.btn-pb-outline-blue    { border-color: var(--pb-blue); color: var(--pb-blue); }
.btn-pb-outline-blue:hover { background: rgba(0, 90, 171, 0.08); color: var(--pb-blue); filter: none; }
.btn-pb-outline-magenta { border-color: var(--pb-magenta); color: var(--pb-magenta); }
.btn-pb-outline-magenta:hover { background: rgba(160, 31, 98, 0.08); color: var(--pb-magenta); filter: none; }

/* Solid variants */
.btn-pb-sky       { background: var(--pb-sky); color: var(--pb-navy); }
.btn-pb-sky:hover { color: var(--pb-navy); }
.btn-pb-orange       { background: var(--pb-orange); color: var(--pb-navy); }
.btn-pb-orange:hover { color: var(--pb-navy); }
.btn-pb-magenta       { background: var(--pb-magenta); color: #fff; }
.btn-pb-magenta:hover { color: #fff; }
.btn-pb-blue       { background: var(--pb-blue); color: #fff; }
.btn-pb-blue:hover { color: #fff; }
.btn-pb-sky-mid       { background: var(--pb-sky-mid); color: var(--pb-navy); }
.btn-pb-sky-mid:hover { color: var(--pb-navy); }
.btn-pb-orange-btn       { background: var(--pb-orange-btn); color: var(--pb-navy); }
.btn-pb-orange-btn:hover { color: var(--pb-navy); }

.btn-pb .btn-arrow { width: 52px; height: 23px; }

/* Small square-ish UI buttons */
.btn-pb-ui {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 14px;
  border-radius: var(--pb-radius-ui);
  border: 0;
  padding: 8px 16px;
  text-decoration: none;
  transition: filter 0.15s ease;
}
.btn-pb-ui:hover { filter: brightness(0.94); }
.btn-pb-login   { background: var(--pb-sky-pale); color: var(--pb-ink-75); font-weight: 600; }
.btn-pb-contact { background: var(--pb-yellow); color: var(--pb-ink); }

/* --------------------------------------------------------------------------
   Header — utility bar
   -------------------------------------------------------------------------- */
.pb-topbar {
  background: #fff;
  padding-block: 11px;
  border-bottom: 0.5px solid rgba(53, 53, 53, 0.4);
  font-size: 14px;
  color: var(--pb-ink-75);
}
.pb-topbar a { color: var(--pb-ink-75); text-decoration: none; }
.pb-topbar a:hover { color: var(--pb-ink); }
.pb-topbar .form-control {
  height: 24px;
  width: 150px;
  font-size: 14px;
  font-weight: 300;
  border-radius: 37px;
  border: 1px solid var(--pb-ink-50);
  padding: 3px 16px;
}
.pb-topbar .form-control::placeholder { color: var(--pb-ink-50); }

/* --------------------------------------------------------------------------
   Header — primary nav
   -------------------------------------------------------------------------- */
.pb-navbar { background: #fff; padding-block: 15px; }
.pb-navbar .navbar-brand img { width: 152px; height: 47px; }

.pb-navbar .nav-link {
  font-weight: 500;
  font-size: 16px;
  color: var(--pb-ink);
  padding: 0 0 7px 0;
  border-bottom: 2px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pb-navbar .nav-item.dropdown .nav-link::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 9px solid currentColor;
}

/* Per-item underline + caret colors (from design) */
.pb-nav-personal  .nav-link { border-bottom-color: var(--pb-sky); }
.pb-nav-personal  .nav-link::after { color: var(--pb-sky); }
.pb-nav-business  .nav-link { border-bottom-color: var(--pb-orange); }
.pb-nav-business  .nav-link::after { color: var(--pb-orange); }
.pb-nav-about     .nav-link { border-bottom-color: var(--pb-magenta); }
.pb-nav-about     .nav-link::after { color: var(--pb-magenta); }
.pb-nav-resources .nav-link { border-bottom-color: var(--pb-blue); }
.pb-nav-resources .nav-link::after { color: var(--pb-blue); }

.pb-navbar .navbar-nav { gap: 36px; align-items: center; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.pb-hero {
  position: relative;
  min-height: 528px;
  background: var(--pb-gradient-hero);
}
.pb-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/img/hero-bg-wave.png") center / contain no-repeat;
  pointer-events: none;
}
.pb-hero-inner {
  position: relative;
  z-index: 1;
  min-height: 528px;
  padding: 32px 0 0 clamp(20px, 2.1vw, 40px);
}
.pb-hero-title {
  font-family: var(--pb-font-serif);
  font-weight: 600;
  font-size: clamp(40px, 2.9vw, 56px);
  letter-spacing: -0.56px;
  line-height: 1.32;
  color: #fff;
}
.pb-hero-title .pb-script { color: var(--pb-sky-pale); font-size: 1.14em; }
.pb-hero-sub {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.38;
  color: #fff;
  max-width: 640px;
}
.pb-hero-people {
  position: absolute;
  right: clamp(20px, 6.8vw, 130px);
  bottom: 0;
  width: min(643px, 42vw);
  z-index: 1;
}
.pb-hero-chevrons-tr {
  position: absolute;
  top: 32px;
  right: clamp(120px, 20vw, 390px);
  width: 229px;
  z-index: 0;
}
.pb-hero .pb-chevrons-bl { width: 229px; margin-top: clamp(40px, 6vw, 116px); }
.pb-separating-rule { border: 0; border-top: 0.5px solid var(--pb-blue); opacity: 1; margin: 0; }

/* --------------------------------------------------------------------------
   3 Color Cards
   -------------------------------------------------------------------------- */
.pb-color-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.pb-color-card .card-photo {
  height: 143px;
  border-top-right-radius: var(--pb-radius-card);
  background-size: cover;
  background-position: center;
}
.pb-color-card .card-body-pb {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: 32px;
  border-bottom-right-radius: var(--pb-radius-card);
}
.pb-color-card .card-kicker { font-weight: 700; font-size: 14px; letter-spacing: 0.7px; text-transform: uppercase; margin-bottom: 8px; }
.pb-color-card .card-title-pb { font-family: var(--pb-font-serif); font-weight: 400; font-size: 28px; line-height: 1.4; margin-bottom: 0; }
.pb-color-card .card-copy { font-weight: 500; font-size: 16px; line-height: 1.55; margin: 16px 0 0; }
.pb-color-card .card-icon { width: 54px; height: 58px; flex-shrink: 0; }

.pb-card-sky    { background: var(--pb-sky);    color: var(--pb-navy); }
.pb-card-blue   { background: var(--pb-blue);   color: #fff; }
.pb-card-orange { background: var(--pb-orange); color: var(--pb-navy); }

/* --------------------------------------------------------------------------
   Testimonials
   -------------------------------------------------------------------------- */
.pb-testimonials {
  background: var(--pb-ice);
  padding-block: 40px 56px;
  position: relative;
  overflow: hidden;
}
.pb-testimonials .pb-dotted-wave {
  width: 100%;
  height: 163px;
  object-fit: cover;
  margin-bottom: -110px;
  pointer-events: none;
}
.pb-testimonials .pb-heading { color: var(--pb-blue); text-align: center; }

.pb-t-card {
  background: #fff;
  border-radius: 17.5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.18);
  padding: 64px 20px 32px;
  text-align: center;
  position: relative;
  width: 318px;
  max-width: 100%;
}
.pb-t-card .pb-t-avatar {
  position: absolute;
  top: -44px;
  left: 50%;
  transform: translateX(-50%);
  width: 87px;
  height: 87px;
  border-radius: 50%;
  object-fit: cover;
}
.pb-t-card .pb-t-quote {
  font-family: var(--pb-font-script);
  font-size: 20px;
  line-height: 1.15;
  color: var(--pb-sky-bright);
  margin-bottom: 10px;
}
.pb-t-card .pb-t-name {
  font-weight: 300;
  font-size: 16px;
  text-transform: uppercase;
  color: #000;
  margin-bottom: 14px;
}
.pb-t-card .pb-t-stars { width: 90px; }

.pb-t-side { opacity: 0.5; }
.pb-t-primary { width: 318px; }
.pb-t-primary .pb-t-avatar { width: 103px; height: 103px; top: -52px; }
.pb-t-primary .pb-t-quote { font-size: 28px; }
.pb-t-primary .pb-t-name { font-size: 20px; }

.pb-t-arrow {
  background: none;
  border: 0;
  padding: 8px;
  line-height: 0;
}
.pb-t-arrow img { width: 30px; height: 16px; }
.pb-t-arrow.prev img { transform: rotate(-90deg); }
.pb-t-arrow.next img { transform: rotate(90deg); }

/* --------------------------------------------------------------------------
   Recognition logos
   -------------------------------------------------------------------------- */
.pb-recognized { padding-block: 56px; text-align: center; }
.pb-recognized .pb-eyebrow-sm { color: var(--pb-magenta); margin-bottom: 32px; }
.pb-recognized img { max-height: 72px; width: auto; }
/* award-best-places.png is a multi-logo sheet; reproduce Figma's crop window */
.pb-logo-crop {
  position: relative;
  width: 236px;
  height: 69px;
  overflow: hidden;
}
.pb-logo-crop img {
  position: absolute;
  width: 279.22%;
  height: 540.3%;
  left: -159%;
  top: -193.1%;
  max-height: none;
  max-width: none;
}

/* --------------------------------------------------------------------------
   Featured accounts (magenta frame + angled photo)
   -------------------------------------------------------------------------- */
.pb-featured {
  background: var(--pb-magenta);
  color: #fff;
  display: flex;
  align-items: stretch;
  gap: 48px;
}
.pb-featured .pb-featured-content {
  flex: 1 1 auto;
  padding: clamp(40px, 5vw, 90px) 0 clamp(40px, 5vw, 90px) clamp(24px, 4.2vw, 80px);
  min-width: 0;
}
.pb-featured .pb-eyebrow { color: var(--pb-yellow); margin-bottom: 11px; }
.pb-featured .pb-heading { color: #fff; font-size: 36px; margin-bottom: 40px; }

.pb-featured-item { display: flex; align-items: center; gap: 18px; padding-block: 24px; }
.pb-featured-item + .pb-featured-item { border-top: 0.75px solid rgba(255, 255, 255, 0.6); }
.pb-featured-item .item-icon { width: 58px; height: 58px; flex-shrink: 0; }
.pb-featured-item .item-title {
  color: var(--pb-yellow);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.pb-featured-item .item-copy { font-size: 16px; letter-spacing: 0.8px; margin-bottom: 0; }
.pb-featured-item .btn-pb { flex-shrink: 0; }

.pb-featured-photo {
  flex: 0 0 clamp(280px, 24vw, 470px);
  position: relative;
  min-height: 480px;
}
.pb-featured-photo img.photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 100%);
}
.pb-featured-photo::before {
  content: "";
  position: absolute;
  top: -2%;
  bottom: -2%;
  left: calc(28% - 18px);
  width: 14px;
  background: #fff;
  transform: rotate(0.001deg) skewX(-14deg);
  transform-origin: top;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   Featured accounts swoosh panel — HOME PAGE ONLY. Independent of .pb-featured
   above (which HSA/mobile-banking still use) so this never touches those pages.
   Curves are real Figma vector data (bezier paths, node 1:2, file
   X5tyz75Cssi90IzLTbOHQ2), not an approximated clip-path — pulled by Mike's
   agent 2026-10-06, see ~/Downloads/partners-bank-featured-swoosh.zip.
   The photo panel is one box pinned to the section's right edge, full height,
   holding two layers: the photo (clipped by an objectBoundingBox SVG
   clipPath, so the curve scales with the box) and a white stripe (an inline
   SVG path whose right edge is the same curve as the photo's left edge, and
   whose left edge is a second, shallower curve — a true tapering vector
   shape, not a transform/offset trick).
   -------------------------------------------------------------------------- */
.pb-swoosh {
  --pb-swoosh-w: clamp(330px, 27.16vw, 521.515px);
  position: relative;
  overflow: hidden;
  background: var(--pb-magenta);
  color: #fff;
  min-height: 629px;
}
.pb-swoosh-content {
  position: relative;
  z-index: 1;
  padding: clamp(40px, 5vw, 114px) 0 clamp(40px, 5vw, 114px) clamp(24px, 4.2vw, 80px);
  /* Reserve the room the photo panel occupies, minus the sliver Figma lets the text column
     run under the curve (103 / 521.515 = 0.1975). Tracks --pb-swoosh-w so nothing collides
     at any width. */
  padding-right: calc(var(--pb-swoosh-w) * (1 - 0.1975));
}
.pb-swoosh .pb-eyebrow { color: var(--pb-yellow); margin-bottom: 11px; }
.pb-swoosh .pb-heading { color: #fff; margin-bottom: 40px; }
.pb-swoosh--blue   { background: var(--pb-blue); }
.pb-swoosh--sky    { background: var(--pb-sky); }
.pb-swoosh--orange { background: var(--pb-orange); }

.pb-swoosh-photo {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: var(--pb-swoosh-w);
  pointer-events: none;
}
.pb-swoosh-photo-clip {
  position: absolute;
  inset: 0;
  clip-path: url(#pb-swoosh-clip);
}
.pb-swoosh-photo-clip img {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  /* Start at 15% so the image always reaches past the curve's lowest point (15.3%). */
  left: 15%;
  width: 85%;
  height: 100%;
  object-fit: cover;
  /* Pin the face: the photo's (72%, 26%) point stays at the same spot in the panel at every
     scale, which keeps it right of the curve and visible on the whole responsive journey. */
  object-position: 72% 26%;
  display: block;
}
.pb-swoosh-stripe { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.pb-swoosh-stripe--h { display: none; }

@media (max-width: 1199.98px) {
  .pb-swoosh { min-height: 0; }
  .pb-swoosh-content { padding: 56px 32px 48px; padding-right: 32px; }
  .pb-swoosh-photo {
    position: relative;
    height: auto;
    width: 100%;
    aspect-ratio: 629.152 / 521.515;
    max-height: 520px;
  }
  .pb-swoosh-photo-clip { clip-path: url(#pb-swoosh-clip-h); }
  /* Placeholder photo only: crop off its left half (the filled-in wedge — see asset note).
     With a rectangular client photo, drop this rule and let object-fit do the work. */
  .pb-swoosh-photo-clip img { left: auto; right: 0; width: 170%; object-position: right 12%; }
  .pb-swoosh-stripe--v { display: none; }
  .pb-swoosh-stripe--h { display: block; }
}

/* --------------------------------------------------------------------------
   Industry grid
   -------------------------------------------------------------------------- */
.pb-industry { padding-block: 80px 64px; }
.pb-industry .pb-eyebrow { color: var(--pb-blue); text-align: center; margin-bottom: 16px; }
.pb-industry .pb-heading { color: var(--pb-blue); text-align: center; margin-bottom: 36px; }

.pb-ind-card {
  border: 2px solid;
  border-top-left-radius: var(--pb-radius-card);
  border-top-right-radius: var(--pb-radius-card);
  padding: 25px 17px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
}
.pb-ind-card .ind-kicker { font-weight: 700; font-size: 16px; letter-spacing: 0.8px; text-transform: uppercase; margin-bottom: 8px; }
.pb-ind-card .ind-copy { font-weight: 300; font-size: 16px; line-height: 1.55; margin-bottom: 0; color: #000; }

.pb-ind-magenta { border-color: var(--pb-magenta); }
.pb-ind-magenta .ind-kicker { color: var(--pb-magenta); }
.pb-ind-sky { border-color: var(--pb-sky-bright); }
.pb-ind-sky .ind-kicker { color: var(--pb-sky-bright); }
.pb-ind-orange { border-color: var(--pb-orange-deep); }
.pb-ind-orange .ind-kicker { color: var(--pb-orange-deep); }
.pb-ind-blue { border-color: var(--pb-blue); }
.pb-ind-blue .ind-kicker { color: var(--pb-blue); }

/* --------------------------------------------------------------------------
   Big CTA photo frame
   -------------------------------------------------------------------------- */
.pb-big-cta {
  position: relative;
  min-height: clamp(420px, 36vw, 707px);
  background: url("../assets/img/big-cta-photo.png") center / cover no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 37px;
  padding-top: 80px;
}
.pb-big-cta .pb-eyebrow { color: var(--pb-blue); text-align: center; margin-bottom: 9px; }
.pb-big-cta .pb-heading { color: var(--pb-blue); text-align: center; }
.pb-big-cta::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  aspect-ratio: 1920 / 180;   /* big-cta-bottom-overlap.png's native ratio */
  background: url("../assets/img/big-cta-bottom-overlap.png") center / 100% 100% no-repeat;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Blog feature
   -------------------------------------------------------------------------- */
.pb-blog { position: relative; padding-block: 72px 0; }
.pb-blog::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 344px;
  background: var(--pb-gradient-vert);
  z-index: 0;
}
.pb-blog .pb-eyebrow { color: var(--pb-blue); text-align: center; margin-bottom: 9px; }
.pb-blog .pb-heading { color: var(--pb-blue); text-align: center; margin-bottom: 48px; }
.pb-blog .container-pb { position: relative; z-index: 1; }

.pb-blog-card { display: flex; flex-direction: column; height: 100%; }
.pb-blog-card .blog-photo {
  position: relative;
  height: 254px;
  border-top-left-radius: var(--pb-radius-card);
  border-top-right-radius: var(--pb-radius-card);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.pb-blog-card .blog-photo .blog-wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
}
.pb-blog-card .blog-body {
  background: #fff;
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  flex: 1 0 0;
}
.pb-blog-card .blog-title { color: var(--pb-blue); font-weight: 600; font-size: 18px; text-transform: uppercase; margin-bottom: 16px; }
.pb-blog-card .blog-title a { color: inherit; text-decoration: none; }
.pb-blog-card .blog-copy { color: var(--pb-ink); font-weight: 500; font-size: 18px; margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Bottom CTA
   -------------------------------------------------------------------------- */
.pb-bottom-cta-wrap { position: relative; padding-top: 80px; }
.pb-bottom-cta {
  background: var(--pb-ice);
  border-radius: var(--pb-radius-card);
  padding: 64px 24px;
  text-align: center;
}
.pb-bottom-cta .pb-eyebrow { color: var(--pb-blue); margin-bottom: 4px; }
.pb-bottom-cta .cta-headline {
  font-family: var(--pb-font-serif);
  font-weight: 600;
  font-size: clamp(30px, 2vw, 38px);
  background: var(--pb-gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 8px;
}
.pb-bottom-cta .cta-headline .pb-script {
  font-size: 1.42em;
  background: var(--pb-gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pb-bottom-cta .cta-sub { font-weight: 300; font-size: 20px; color: var(--pb-ink); max-width: 666px; margin: 0 auto 40px; }
.pb-dotted-wave-bottom { width: 100%; height: 163px; object-fit: cover; display: block; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.pb-footer .pb-footer-rule { height: 17px; background: var(--pb-gradient-brand); }
.pb-footer .pb-footer-main { padding-block: 40px 79px; }
.pb-footer .footer-logo img { width: 168px; height: 52px; }
.pb-footer .footer-col h6 {
  white-space: nowrap;   /* Figma: column headings on one line */
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.pb-footer .footer-col.col-personal h6,
.pb-footer .footer-col.col-business h6 { color: var(--pb-magenta); }
.pb-footer .footer-col.col-quick h6,
.pb-footer .footer-col.col-contact h6 { color: var(--pb-blue); }
.pb-footer .footer-col ul { list-style: none; padding: 0; margin: 0; }
.pb-footer .footer-col li { margin-bottom: 4px; }
.pb-footer .footer-col a,
.pb-footer .footer-col li {
  color: var(--pb-ink);
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;   /* Figma footer: sentence case links, uppercase column headings */
  text-decoration: none;
}
.pb-footer .footer-col a:hover { color: var(--pb-blue); }

.pb-footer .pb-footer-bar {
  background: var(--pb-ice);
  min-height: 48px;
  font-size: 14px;
  color: var(--pb-blue);
}
.pb-footer .pb-footer-bar .social img { width: 24px; height: 24px; }
.pb-footer .pb-footer-bar .social a + a { margin-left: 15px; }

/* --------------------------------------------------------------------------
   Parent page — gradient header with overlapping photo
   -------------------------------------------------------------------------- */
.pb-parent-header { position: relative; background: #fff; }
.pb-parent-header .header-gradient {
  margin-left: var(--pb-frame-inset);
  margin-right: clamp(40px, 23vw, 300px);
  border-top-left-radius: var(--pb-radius-frame);
  border-top-right-radius: var(--pb-radius-frame);
  background: linear-gradient(89deg, var(--pb-blue) 0.3%, var(--pb-magenta) 83.7%);
  padding: 61px clamp(24px, 24vw, 306px) 60px 36px;
  color: #fff;
}
.pb-parent-header .header-gradient .pb-eyebrow { color: var(--pb-yellow); margin-bottom: 12px; }
.pb-parent-header .header-title {
  font-family: var(--pb-font-serif);
  font-weight: 600;
  font-size: 40px;
  letter-spacing: -0.4px;
  line-height: 1.25;
  color: #fff;
  max-width: 808px;
  margin-bottom: 35px;
}
.pb-parent-header .header-title .pb-script { color: var(--pb-yellow); font-size: 1.4em; line-height: 0.93; }
.pb-parent-header .header-intro { font-weight: 300; font-size: 20px; max-width: 88%; margin-bottom: 32px; }
.pb-parent-header .header-ctas { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.btn-pb-outline-yellow { border-color: var(--pb-yellow); color: var(--pb-yellow); }
.btn-pb-outline-yellow:hover { background: rgba(255, 212, 0, 0.12); color: var(--pb-yellow); filter: none; }
.btn-pb-outline-orange { border-color: var(--pb-orange-deep); color: var(--pb-orange-deep); }
.btn-pb-outline-orange:hover { background: rgba(235, 113, 0, 0.08); color: var(--pb-orange-deep); filter: none; }
.btn-pb-navy { background: var(--pb-navy); color: #fff; }
.btn-pb-navy:hover { color: #fff; }

.pb-parent-photo {
  position: absolute;
  right: 65px;
  bottom: 0;
  width: clamp(320px, 38vw, 491px);
  top: 75px;   /* Figma parent comp: photo box starts ~75px below the panel top and ends at its bottom — height follows the panel */
  border: 4px solid #fff;
  border-top-left-radius: var(--pb-radius-card);
  border-top-right-radius: var(--pb-radius-card);
  background: var(--pb-ice) center / cover no-repeat;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.03);
}
.pb-parent-header .chevron-pattern { position: absolute; width: 223px; }
.pb-parent-header .chevron-pattern.top { top: 20px; right: 40px; width: 172px; }
.pb-parent-header .chevron-pattern.bottom { bottom: 10px; right: calc(65px + clamp(320px, 38vw, 491px) - 120px); }

/* --------------------------------------------------------------------------
   Icon blurbs (ice band, 2×2 white cards)
   -------------------------------------------------------------------------- */
.pb-blurbs { background: var(--pb-ice); padding: 56px 0; }
.pb-blurbs .pb-eyebrow { color: var(--pb-magenta); text-align: center; margin-bottom: 12px; }
.pb-blurbs .pb-heading { color: var(--pb-blue); text-align: center; }
.pb-blurbs .blurbs-intro { font-weight: 300; font-size: 20px; text-align: center; max-width: clamp(784px, 61vw, 1200px); margin: 32px auto 40px; }
.pb-blurb-card {
  background: #fff;
  border-radius: 15px;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  height: 100%;
  min-height: 108px;
}
.pb-blurb-card img { width: 58px; height: 58px; flex-shrink: 0; }
.pb-blurb-card .blurb-title { font-weight: 600; font-size: 20px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 8px; }
.pb-blurb-card .blurb-copy { font-size: 16px; color: var(--pb-ink); margin-bottom: 0; }
.blurb-magenta .blurb-title { color: var(--pb-magenta); }
.blurb-blue .blurb-title { color: var(--pb-blue); }
.blurb-orange .blurb-title { color: var(--pb-orange-deep); }
.blurb-sky .blurb-title { color: var(--pb-sky-bright); }

/* --------------------------------------------------------------------------
   Option rows (6-item layout)
   -------------------------------------------------------------------------- */
.pb-options { padding-block: 72px 64px; }
.pb-options .pb-eyebrow { color: var(--pb-sky-mid); text-align: center; margin-bottom: 12px; }
.pb-options .pb-heading { color: var(--pb-blue); text-align: center; margin-bottom: 40px; }

.pb-option-row { border-top: 2px solid; }
.pb-option-row + .pb-option-row { margin-top: 32px; }
.pb-option-row .row-card {
  background: #fff;
  display: flex;
  align-items: stretch;
  border-bottom-right-radius: 24px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.22);
  min-height: 98px;
}
.pb-option-row .row-icon {
  width: 99px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.pb-option-row .row-icon img { width: 60px; height: 60px; }
.pb-option-row .row-title {
  width: 200px;
  flex-shrink: 0;
  font-weight: 700;
  font-size: 20px;
  text-transform: uppercase;
  line-height: 1.2;
  margin: 0 0 0 32px;
  align-self: center;
}
.pb-option-row .row-copy { font-weight: 500; font-size: 16px; line-height: 1.55; margin: 0 24px; align-self: center; flex: 1 1 auto; }
.pb-option-row .btn-pb { align-self: center; margin-right: 24px; flex-shrink: 0; }

.opt-sky     { border-top-color: var(--pb-sky-mid); }
.opt-sky .row-icon { background: var(--pb-sky-mid); }
.opt-sky .row-title { color: var(--pb-sky-bright); }
.opt-blue    { border-top-color: var(--pb-blue); }
.opt-blue .row-icon { background: var(--pb-blue); }
.opt-blue .row-title { color: var(--pb-blue); }
.opt-orange  { border-top-color: var(--pb-orange-btn); }
.opt-orange .row-icon { background: var(--pb-orange-btn); }
.opt-orange .row-title { color: var(--pb-orange-deep); }
.opt-magenta { border-top-color: var(--pb-magenta); }
.opt-magenta .row-icon { background: var(--pb-magenta); }
.opt-magenta .row-title { color: var(--pb-magenta); }
.opt-yellow  { border-top-color: var(--pb-yellow); }
.opt-yellow .row-icon { background: var(--pb-yellow); }
.opt-yellow .row-title { color: var(--pb-ink); }
.btn-pb-sky-bright { background: var(--pb-sky-bright); color: #fff; }
.btn-pb-sky-bright:hover { color: #fff; }
.btn-pb-yellow-solid, .btn-pb-yellow { background: var(--pb-yellow); color: var(--pb-ink); }
.btn-pb-yellow-solid:hover, .btn-pb-yellow:hover { color: var(--pb-ink); }
.btn-pb-orange-deep { background: var(--pb-orange-deep); color: #fff; }
.btn-pb-orange-deep:hover { color: #fff; }

/* Featured variant — blue (parent pages), fully rounded box */
.pb-featured--blue { background: var(--pb-blue); border-radius: var(--pb-radius-card); }
.pb-featured--magenta { background: var(--pb-magenta); border-radius: var(--pb-radius-card); }
.pb-featured--sky { background: var(--pb-sky); border-radius: var(--pb-radius-card); }
.pb-featured--orange { background: var(--pb-orange); border-radius: var(--pb-radius-card); }
.pb-frame--rounded { border-radius: var(--pb-radius-card); }

/* --------------------------------------------------------------------------
   Outline feature boxes
   -------------------------------------------------------------------------- */
.pb-keyfeatures { padding-block: 80px 0; text-align: center; }
/* Zero-bottom sections (keyfeatures / image-text / stats) rely on the next white section's own
   top padding. A full-bleed band (gradient CTA, ice blurbs, testimonials) has none, so give it the gap. */
/* removed 2026-10-14: page gap is now main's flex gap (Figma: 80px between every section) */
.pb-keyfeatures .pb-eyebrow { color: var(--pb-sky-mid); margin-bottom: 12px; }
.pb-keyfeatures .pb-heading { color: var(--pb-blue); margin-bottom: 43px; }
.pb-outline-box {
  border: 2px solid;
  border-radius: 15px;
  padding: 32px 16px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  text-align: center;
  width: 208px;
  max-width: 100%;
}
.pb-outline-box img { width: 60px; height: 60px; margin-top: 24px; }
.pb-outline-box .box-title { font-weight: 700; font-size: 16px; letter-spacing: 0.8px; text-transform: uppercase; margin-bottom: 8px; }
.pb-outline-box .box-copy { font-weight: 300; font-size: 14px; line-height: 1.7; margin-bottom: 0; color: var(--pb-ink); }
.obox-magenta { border-color: var(--pb-magenta); }
.obox-magenta .box-title { color: var(--pb-magenta); }
.obox-blue { border-color: var(--pb-blue); }
.obox-blue .box-title { color: var(--pb-blue); }
.obox-sky { border-color: var(--pb-sky-bright); }
.obox-sky .box-title { color: var(--pb-sky-bright); }
.obox-orange { border-color: var(--pb-orange-deep); }
.obox-orange .box-title { color: var(--pb-orange-deep); }

/* --------------------------------------------------------------------------
   Image + text split
   -------------------------------------------------------------------------- */
.pb-image-text { padding-block: 80px 0; }
.pb-image-text .split-photo {
  width: 354px;
  max-width: 100%;
  aspect-ratio: 1;   /* parent comp: square; child-text pages get 354×283 below */
  border-radius: var(--pb-radius-card);
  background: var(--pb-ice) center / cover no-repeat;
}
main:has(.pb-child-text-header) .pb-image-text .split-photo { aspect-ratio: 354 / 283; }   /* Figma child template (MM, HSA) */
@media (min-width: 768px) {
  /* Always flat-left/round-right, regardless of which column the photo sits in (confirmed with
     Drew on both the normal pb-image-text layout and the always-photo-right pb-getstarted
     layout — it's a fixed card treatment, not relative to the text column). Below 768px the
     row stacks and the base rule above (all four corners) applies. */
  .pb-image-text .split-photo { border-radius: 0 var(--pb-radius-card) var(--pb-radius-card) 0; }
}
.pb-image-text .pb-heading { color: var(--pb-blue); font-size: 40px; margin-bottom: 16px; }
.pb-image-text .split-copy { font-size: 16px; line-height: 1.55; margin-bottom: 31px; white-space: pre-line; }
.pb-image-text .split-subhead { font-family: var(--pb-font-sans); font-weight: 700; font-size: 20px; letter-spacing: 0.4px; text-transform: uppercase; color: var(--pb-blue); margin: 0 0 12px; }   /* "WHAT YOU'LL NEED TO GET STARTED" (Open an Account comps) */
.pb-image-text .split-text ol { padding-left: 22px; margin-bottom: 28px; }
.pb-image-text .split-text ol li + li { margin-top: 8px; }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.pb-faq { background: var(--pb-ice); padding-block: 56px 64px; }   /* Figma: ice band (Compare Accounts comp, Drew 2026-09-17: 56 in / 64 out) */
.pb-faq .faq-left { display: flex; flex-direction: column; height: 100%; padding-top: 20px; }
.pb-faq--boxes { background: #fff; }
/* band look (Compare Accounts comp, Drew 2026-09-17): items are the band's ice, navy border only — no white fill */
.pb-faq.pb-faq--band .accordion-item, .pb-faq.pb-faq--band .accordion-button, .pb-faq.pb-faq--band .accordion-button:not(.collapsed), .pb-faq.pb-faq--band .accordion-button:focus, .pb-faq.pb-faq--band .accordion-body { background: transparent; }   /* .pb-faq.pb-faq--band outranks the later .pb-faq .accordion-* white rules */
.pb-faq.pb-faq--boxes .accordion-item, .pb-faq.pb-faq--boxes .accordion-button, .pb-faq.pb-faq--boxes .accordion-button:not(.collapsed), .pb-faq.pb-faq--boxes .accordion-button:focus, .pb-faq.pb-faq--boxes .accordion-body { background: var(--pb-ice); }   /* whole box is ice, header included (the later .pb-faq .accordion-button rule was winning) */
.pb-faq .pb-eyebrow { color: var(--pb-magenta); margin-bottom: 12px; }
.pb-faq .pb-heading { color: var(--pb-blue); font-size: 46px; line-height: 1.15; max-width: 400px; }   /* comp: "Frequently asked / questions" on two lines */
.pb-faq .faq-chevrons { width: 230px; margin-top: auto; padding-top: 48px; }   /* chevron-pattern-b = sky at 50% (the white pattern vanished on the band) */

.pb-faq .accordion-item {
  border: 2px solid var(--pb-blue);
  border-radius: 0 8px 8px 0 !important;
  overflow: hidden;
  background: #fff;
  position: relative;
}
.pb-faq .accordion-item + .accordion-item { margin-top: 27px; }
/* item layout (comp): [? icon, centred] [question / answer] [▼ filled triangle, centred right] */
.pb-faq .faq-row { display: flex; align-items: center; gap: 28px; padding: 18px 60px 18px 16px; }
.pb-faq .faq-main { flex: 1; min-width: 0; }
.pb-faq .accordion-item::after { content: ""; position: absolute; right: 22px; top: 50%; width: 0; height: 0; margin-top: -4px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 9px solid var(--pb-sky-mid); transition: transform .2s; }
.pb-faq .accordion-item:has(.accordion-button:not(.collapsed))::after { transform: rotate(180deg); }
.pb-faq .accordion-button::after { display: none; }   /* Bootstrap's chevron — replaced by the triangle above */
.pb-faq .accordion-button {
  font-family: var(--pb-font-sans);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--pb-blue);
  background: #fff;
  box-shadow: none;
  gap: 20px;
  padding: 0;
  line-height: 1.3;
}
.pb-faq .accordion-button:not(.collapsed) { color: var(--pb-blue); background: #fff; box-shadow: none; }
.pb-faq .accordion-button:focus { box-shadow: 0 0 0 0.25rem rgba(32, 166, 255, 0.25); }
.pb-faq .faq-q-icon {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--pb-blue);
  color: var(--pb-blue);
  font-weight: 700;
  font-size: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pb-faq .accordion-body { font-size: 16px; line-height: 1.45; color: var(--pb-ink); padding: 8px 0 0; }   /* answer stacks under the question inside the row */

/* --------------------------------------------------------------------------
   Child page — headers + intro band
   `child` (gradient band) was Xander's assumption; `child-text` is the Figma
   "Small Child Header with Text" (frame 94:4178, design context pulled 2026-09-15).
   -------------------------------------------------------------------------- */
.pb-child-text-header { position: relative; background: #fff; }
.pb-child-text-header::before,
.pb-child-text-header::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: linear-gradient(to right, var(--pb-blue), var(--pb-magenta)); }
.pb-child-text-header::before { top: 0; }
.pb-child-text-header::after { bottom: 0; }
.pb-child-text-header .header-content { position: relative; display: flex; align-items: flex-end; min-height: 335px; }
.pb-child-text-header .header-left { position: relative; z-index: 2; width: 76%; padding-top: 34px; }   /* Figma: 850 of 1120 at 1280 */
.pb-child-text-header .header-eyebrow { color: var(--pb-sky-mid); font-weight: 700; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; margin: 0 0 6px; }
/* title-photo: the same header without the callout (Figma "Child Page" comps: President, Board, Market Managers) */
.pb-title-photo-header .header-content { min-height: 150px; align-items: center; }
.pb-title-photo-header .header-left { padding-block: 24px; }
.pb-title-photo-header .header-title { margin: 0; line-height: 1.1; }
.pb-title-photo-header .header-title .title-main { background: none; color: var(--pb-blue); }
.pb-child-text-header.pb-title-photo-header .header-title .pb-script { display: inline; font-size: 48px; line-height: 1; }
.pb-title-photo-header .header-photo { top: 20px; width: 480px; right: 80px; }
.pb-title-photo-header .header-chevrons { display: none; }
.pb-parent-header .header-intro { white-space: pre-line; }
.pb-child-text-header .header-title {
  text-wrap: balance;   /* no orphaned "at" before the script accent (wireframe child pages, 2026-09-17) */
  max-width: 570px;   /* wraps before the photo (Figma: "Find the right personal / account at Partners Bank") */
  font-family: var(--pb-font-serif);
  font-weight: 600;
  font-size: 40px;
  letter-spacing: -0.4px;
  line-height: normal;
  margin: 0 0 12px;
}
.pb-child-text-header .header-title .title-main {
  display: inline-block;
  background: linear-gradient(to right, var(--pb-blue), var(--pb-magenta) 50%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pb-child-text-header .header-title .pb-script { display: inline; white-space: nowrap; font-size: 56px; line-height: 64px; color: var(--pb-sky-bright); }   /* Drew 2026-09-16: script sits on the same line when it fits ("Partners Blog"); nowrap keeps "Partners Bank" together when it wraps (MM/HSA comps) */
.pb-child-text-header .header-callout {
  background: linear-gradient(to right, var(--pb-blue), var(--pb-magenta));
  color: #fff;
  border-radius: 25px 25px 0 0;
  padding: 30px;
  font-size: 24px;
  line-height: normal;
}
.pb-child-text-header .callout-title { font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; margin: 0 0 10px; }
.pb-child-text-header .callout-copy { font-weight: 400; margin: 0; }
.pb-child-text-header .header-photo {
  position: absolute; right: 76px; top: 13px; bottom: 0; z-index: 1;
  width: 555px;
  border-radius: 50px 50px 0 0;
  background: var(--pb-ice) center / cover no-repeat;
}
.pb-child-text-header .header-chevrons { position: absolute; z-index: 3; pointer-events: none; }
.pb-child-text-header .header-chevrons.a { right: 3px; bottom: 16px; width: 229px; }
.pb-child-text-header .header-chevrons.b { right: 521px; top: 98px; width: 144px; }

.pb-child-header .header-gradient {
  margin-inline: var(--pb-frame-inset);
  border-top-left-radius: var(--pb-radius-frame);
  border-top-right-radius: var(--pb-radius-frame);
  background: linear-gradient(89deg, var(--pb-blue) 0.3%, var(--pb-magenta) 83.7%);
  padding: 56px clamp(24px, 4vw, 76px);
  color: #fff;
}
.pb-child-header .pb-eyebrow { color: var(--pb-yellow); margin-bottom: 12px; }
.pb-child-header .header-title {
  font-family: var(--pb-font-serif);
  font-weight: 600;
  font-size: 40px;
  letter-spacing: -0.4px;
  color: #fff;
  margin-bottom: 0;
}

.pb-child-intro { background: var(--pb-ice); padding-block: 56px; }
.pb-child-intro.pb-gutter, .pb-getstarted.pb-gutter, .pb-image-text.pb-gutter { padding-inline: var(--pb-gutter-inner); }
.pb-child-intro .intro-row { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
@media (min-width: 768px) { .pb-child-intro .intro-row { flex-wrap: nowrap; } }
.pb-child-intro .intro-lead { font-weight: 700; color: var(--pb-blue); }
.pb-child-intro .intro-circle {
  width: 181px;
  height: 181px;
  border-radius: 50%;
  background: var(--pb-ice) center / cover no-repeat;
  flex-shrink: 0;
}
.pb-child-intro .intro-copy { font-weight: 400; font-size: 16px; line-height: 1.5; margin: 0; white-space: pre-line; }

/* Get-started split with qualification grid */
.pb-getstarted { padding-block: 80px; }
.pb-getstarted .pb-eyebrow { color: var(--pb-sky-mid); margin-bottom: 11px; }
.pb-getstarted .pb-heading { color: var(--pb-blue); font-size: 40px; margin-bottom: 16px; }
.pb-getstarted .split-photo {
  width: 354px;
  max-width: 100%;
  aspect-ratio: 1;
  border-radius: var(--pb-radius-card);
  background: var(--pb-ice) center / cover no-repeat;
}
@media (min-width: 768px) {
  /* Flat-left/round-right — same fixed card treatment as .pb-image-text, confirmed by Drew
     on this exact block (photo is the right-hand column here, and it's still squared on the
     left, not the outer/right edge). Below 768px it stacks and the base rule above applies. */
  .pb-getstarted .split-photo { border-radius: 0 var(--pb-radius-card) var(--pb-radius-card) 0; }
}
.pb-getstarted .gs-copy { font-size: 16px; line-height: 1.6; margin-bottom: 32px; }
.pb-getstarted .gs-buttons { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.pb-getstarted .qualify-title { font-weight: 600; font-size: 18px; color: var(--pb-blue); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 24px; }
.pb-qualify-card {   /* Figma HSA: white card, 2px border in the card colour (obox-*), icon left */
  background: #fff;
  border: 2px solid var(--pb-blue);
  border-radius: 15px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
}
.pb-getstarted [data-layout="qualify"] .split-photo { display: none; }   /* qualify layout has no photo in the comp */
.pb-qualify-card.obox-magenta { border-color: var(--pb-magenta); } .pb-qualify-card.obox-sky { border-color: var(--pb-sky-bright); } .pb-qualify-card.obox-orange { border-color: var(--pb-orange-deep); } .pb-qualify-card.obox-blue { border-color: var(--pb-blue); }   /* .pb-qualify-card's own border rule came later in the file than .obox-* and was winning */
.pb-getstarted .gs-copy { white-space: pre-line; }
.pb-qualify-card img, .pb-qualify-card .q-icon { width: 50px; height: 50px; flex-shrink: 0; }
.pb-qualify-card p { font-size: 14px; line-height: 1.45; margin: 0; }

/* Checklist variant of the featured content items */
.pb-check-item { display: flex; align-items: flex-start; gap: 25px; padding-block: 12px; }
.pb-check-item + .pb-check-item { border-top: 0.75px solid rgba(255, 255, 255, 0.6); }
.pb-check-item .check-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--pb-yellow);
  color: var(--pb-yellow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
}
.pb-check-item p { font-size: 16px; letter-spacing: 0.4px; margin: 0; align-self: center; }

/* Stat tile grid (child pages) — STYLING ASSUMED pending visual ref */
.pb-stats { padding-block: 80px 0; text-align: center; }
.pb-stats .pb-eyebrow { color: var(--pb-sky-mid); margin-bottom: 16px; }
.pb-stats .pb-heading { color: var(--pb-blue); font-size: 40px; margin-bottom: 26px; }
.pb-stats .stats-lead { font-size: 16px; margin-bottom: 40px; }
/* Figma: white outline tiles, 2px border, title in the border colour (obox-* = same palette as key features) */
.pb-stat-tile {
  width: 100%;   /* the column is d-flex for equal heights; without this the tile shrinks to its content */
  background: #fff;
  border: 2px solid var(--pb-blue);
  border-radius: 15px 15px 0 0;   /* Drew: rounded top corners, flat bottom */
  padding: 16px;
  height: 100%;
  min-height: 96px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.pb-stat-tile .stat-title { font-weight: 700; font-size: 16px; line-height: 1.25; letter-spacing: 0.8px; text-transform: uppercase; color: var(--pb-blue); margin-bottom: 8px; }
.pb-stat-tile .stat-title:last-child { margin-bottom: 0; }
.pb-stat-tile.obox-magenta .stat-title { color: var(--pb-magenta); }
.pb-stat-tile.obox-sky .stat-title { color: var(--pb-sky-bright); }
.pb-stat-tile.obox-orange .stat-title { color: var(--pb-orange-deep); }
.pb-stat-tile.obox-blue .stat-title { color: var(--pb-blue); }
.pb-stat-tile .stat-sub { font-weight: 300; font-size: 16px; line-height: 1.25; margin-bottom: 0; color: var(--pb-ink); }
.pb-stats .stats-close { font-weight: 300; font-size: 16px; margin: 40px auto 0; max-width: clamp(744px, 58vw, 1200px); }

/* Rates callout band — STYLING ASSUMED pending visual ref */
.pb-rates-band { background: var(--pb-ice); margin-top: 40px; padding-block: 32px; }
.pb-rates-band .band-icon { width: 91px; height: 91px; flex-shrink: 0; background: center / contain no-repeat; }
.pb-rates-band .band-icon--default { background-image: url('/assets/icons/rates-percent.svg'); }   /* stand-in until the Figma glyph (fi_126149) is exported */
.pb-rates-band .band-title { font-weight: 700; font-size: 18px; text-transform: uppercase; letter-spacing: 0.9px; color: var(--pb-sky-bright); margin-bottom: 6px; }
.pb-rates-band .band-copy { font-size: 16px; margin-bottom: 0; text-align: left; }

/* Mega dropdown (multi-column, from wireframe nav structure) */
.pb-mega { min-width: 280px; padding: 16px 8px; border: 1px solid rgba(0,90,171,0.2); border-radius: 12px; }
.pb-mega .mega-col { padding: 4px 0; }
.pb-mega .mega-col + .mega-col { border-top: 1px solid rgba(0,90,171,0.12); margin-top: 6px; padding-top: 10px; }
.pb-mega .dropdown-item { font-size: 15px; padding: 5px 16px; white-space: normal; }
.pb-mega .dropdown-item.fw-bold { color: var(--pb-blue); }
.pb-mega .dropdown-item:hover { background: var(--pb-ice); color: var(--pb-blue); }
@media (min-width: 992px) {
  .pb-mega { min-width: 320px; max-height: 70vh; overflow-y: auto; }
}

/* Rates tables (STYLING ASSUMED) */
.pb-rates-table { font-size: 14px; }
.pb-rates-table th { font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--pb-ink-75); background: #fff; vertical-align: middle; text-align: center; }
.pb-rates-table th[colspan] { background: var(--pb-ice); color: var(--pb-sky-mid); font-weight: 400; }   /* (Standard Rates) / (Relationship Rates) */
.pb-rates-table td { text-align: center; font-weight: 300; color: var(--pb-ink); }
.pb-rates-table td:first-child { font-weight: 400; }
.pb-rates-table .table { border-color: var(--pb-sky-pale); }   /* comp rules are pale sky, not grey */
.pb-rates-table .table > :not(caption) > * > * { border-left: 0; border-right: 0; padding: 10px 8px; }
/* Drew 2026-09-16 (comp): group labels are ice pills on their OWN row above the header row; pipes between header cells only; specials live inside the table */
.pb-rates-table .rates-groups, .pb-rates-table .rates-groups th { border: 0; }   /* no rule above the pills (Bootstrap puts a 1px top border on every row) */
.pb-rates-table .rates-groups th { background: #fff; padding: 0 0 6px; }
.pb-rates-table .rates-groups th[colspan] { background: var(--pb-ice); color: var(--pb-sky-mid); border-left: 4px solid #fff; border-right: 4px solid #fff; border-radius: 6px; padding: 8px; }
.pb-rates-table .rates-head th { border-top: 1px solid var(--pb-sky-pale); }
.pb-rates-table .rates-head th + th { border-left: 1px solid var(--pb-sky-pale); }
.pb-rates-table .rates-group td { background: var(--pb-ice); color: var(--pb-sky-mid); font-weight: 600; text-align: left; padding-left: 12px; }
.pb-rates-table .rates-subgroup td { font-weight: 400; }
.pb-rates-table strong, .pb-rates-note strong { font-weight: 700; }   /* the notes are weight 300 → `bolder` only reached 400 */
.pb-prose .lead-magenta { color: var(--pb-magenta); font-weight: 700; }   /* Terms & Conditions lead-ins (Drew 2026-09-16) */
/* Privacy Notice tables (federal model form) — sky rules, ice heads, like the rates tables */
.pb-prose .pb-legal-table { width: 100%; border-collapse: collapse; margin: 24px 0 32px; font-size: 15px; }
.pb-prose .pb-legal-table th, .pb-prose .pb-legal-table td { border: 1px solid var(--pb-sky-pale); padding: 12px 14px; vertical-align: top; text-align: left; }
.pb-prose .pb-legal-table th { background: var(--pb-ice); color: var(--pb-blue); font-weight: 700; }
.pb-prose .pb-legal-table td:first-child { font-weight: 600; color: var(--pb-blue); width: 34%; }
.pb-prose .pb-legal-table td p:last-child, .pb-prose .pb-legal-table td ul:last-child { margin-bottom: 0; }
.pb-prose .pb-legal-table ul { margin: 8px 0 0; padding-left: 20px; }
.pb-rates-table ol { font-size: 13.5px; font-weight: 300; line-height: 1.6; }
.pb-rates-note { font-size: 13.5px; font-weight: 300; line-height: 1.6; color: var(--pb-ink); }

/* Link grid (explore banking) */
.pb-link-grid .lg-item { border: 2px solid var(--pb-sky-bright); border-radius: 15px; padding: 24px 16px; text-align: center; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; justify-content: space-between; }
.pb-link-grid .lg-title { font-weight: 700; font-size: 15px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--pb-blue); margin: 0; }
.pb-link-grid .lgc-magenta { border-color: var(--pb-magenta); } .pb-link-grid .lgc-magenta .lg-title { color: var(--pb-magenta); }
.pb-link-grid .lgc-sky { border-color: var(--pb-sky-bright); } .pb-link-grid .lgc-sky .lg-title { color: var(--pb-sky-bright); }
.pb-link-grid .lgc-blue { border-color: var(--pb-blue); } .pb-link-grid .lgc-blue .lg-title { color: var(--pb-blue); }
.pb-link-grid .lgc-orange { border-color: var(--pb-orange-deep); } .pb-link-grid .lgc-orange .lg-title { color: var(--pb-orange-deep); }
.pb-link-grid .pb-heading .pb-script { font-size: 1.3em; }

/* Contact info cards + form (STYLING ASSUMED) */
.pb-info-card { background: var(--pb-ice); border-radius: 15px; padding: 32px; height: 100%; }
.pb-info-card h3 { font-family: var(--pb-font-sans); font-weight: 700; font-size: 22px; color: var(--pb-blue); margin-bottom: 14px; }
/* Figma Contact: white card, coloured top bar, serif title in the bar colour */
.pb-info-card--bar { background: #fff; border-radius: 0 0 25px 0; box-shadow: 0 4px 16px rgba(0, 46, 87, 0.12); border-top: 12px solid var(--pb-blue); padding: 24px 32px 28px; }
.pb-info-card--bar h3 { font-family: var(--pb-font-serif); font-weight: 400; font-size: 24px; line-height: 1.3; }
.pb-info-card--bar h4 { color: inherit; font-size: 20px; font-family: var(--pb-font-serif); font-weight: 400; }
.pb-info-card--bar p { font-size: 14px; }
.icard-blue { border-top-color: var(--pb-blue); } .icard-blue h3, .icard-blue h4 { color: var(--pb-blue); }
.icard-sky { border-top-color: var(--pb-sky-bright); } .icard-sky h3, .icard-sky h4 { color: var(--pb-sky-bright); }
.icard-magenta { border-top-color: var(--pb-magenta); } .icard-magenta h3, .icard-magenta h4 { color: var(--pb-magenta); }
.icard-orange { border-top-color: var(--pb-orange); } .icard-orange h3, .icard-orange h4 { color: var(--pb-orange-deep); }
/* Figma Contact: form on an ice band, pill inputs, navy submit */
.pb-form-band { background: var(--pb-ice); }
.pb-form-band .pb-section-title { color: var(--pb-blue); }
.pb-form-side p:first-child { color: var(--pb-blue); font-weight: 600; font-size: 18px; }
.pb-form-side p { font-size: 15px; }
.pb-info-card h4 { font-family: var(--pb-font-sans); font-weight: 700; font-size: 18px; color: var(--pb-magenta); margin: 18px 0 8px; }
.pb-info-card p { font-size: 16px; line-height: 1.55; margin-bottom: 8px; }
.pb-info-card a[href^="tel:"] { color: inherit; text-decoration: none; }   /* Drew 2026-09-16: phone numbers stay tappable but read as plain text (comp) */
.pb-form .form-control, .pb-form .form-select {
  border: 1px solid var(--pb-ink-50);
  border-radius: 62px;
  background: #fff;
  font-size: 16px;
  padding: 8px 16px;
}
.pb-form .form-control:focus, .pb-form .form-select:focus { border-color: var(--pb-sky-mid); box-shadow: 0 0 0 0.25rem rgba(32,166,255,0.25); }
.pb-form textarea.form-control { min-height: 181px; border-radius: 15px; }

/* Tab bar (calculators parent) — STYLING ASSUMED */
.pb-tabs { border-bottom: 0.5px solid var(--pb-blue); }
.pb-tabs .tab-lead { text-align: center; font-weight: 700; font-size: 17.3px; letter-spacing: 0.87px; text-transform: uppercase; color: var(--pb-blue); margin: 0 0 32px; }
.pb-tabs .nav { justify-content: flex-start; gap: 20px; padding-inline: var(--pb-gutter); border: 0; }
.pb-tabs .nav-link {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 16px; color: var(--pb-ink);
  background: none; border: 0; border-radius: 0; padding: 18px 16px;
}
.pb-tabs .nav-link::after { content: ""; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 9px solid var(--pb-blue); }
.pb-tabs .nav-link.active { color: var(--pb-blue); box-shadow: inset 0 -3px 0 var(--pb-blue); }

/* Calculator embed placeholder */
.pb-calc-embed { width: min(985px, 100%); aspect-ratio: 985 / 918; margin-inline: auto; border-radius: var(--pb-radius-card); background: var(--pb-ice) url('/assets/img/calculator-placeholder.png') center / contain no-repeat; display: block; }   /* empty ce_embed → Drew's placeholder screenshot (2026-09-17) until the real embed code lands */

/* Quick-tip callout box (STYLING ASSUMED) */
.pb-tip { background: var(--pb-ice); border-radius: 0; padding: 24px 24px 28px; }   /* Switch comp (Drew 2026-09-17): square ice box, sky title, 17px copy */
.pb-tip .tip-title { font-weight: 700; font-size: 17px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--pb-sky-bright); margin-bottom: 8px; }
.pb-tip p:last-child { font-size: 17px; line-height: 1.5; margin: 0; color: var(--pb-ink); }

/* Step prose (switch pages) */
.pb-steps-section { padding-top: 40px; }   /* comp: air between the step-1 button and step 2 */
.pb-steps-section .pb-steps { margin-left: 40px; }   /* Drew 2026-09-17: steps text lines up with the image_text photo above (photo sits 40px inside the gutter) */
.pb-steps h3, .pb-image-text .split-step-heading { font-family: var(--pb-font-sans); font-weight: 700; font-size: 20px; letter-spacing: 0.4px; text-transform: uppercase; color: var(--pb-blue); margin: 32px 0 12px; }   /* Switch comp: step headings are uppercase like the subheads */
.pb-steps h3:first-child { margin-top: 0; }
.pb-steps p, .pb-steps li { font-size: 16px; line-height: 1.7; }

/* Centered callout (e.g. "Need to switch banks?") */
.pb-callout { text-align: center; padding-block: 56px 64px; background: var(--pb-ice); }   /* Drew 2026-09-17 (Open an Account comp): full-width ice band */
.pb-callout .pb-heading { color: var(--pb-blue); font-size: 36px; margin-bottom: 24px; }
.pb-callout .callout-sub { font-size: 18px; font-weight: 300; margin-bottom: 32px; }

/* Plain title band header (utility pages: terms, contact, etc.) */
.pb-title-band { border-top: 0.5px solid rgba(53,53,53,0.4); border-bottom: 0.5px solid var(--pb-blue); padding: 16px 0 17px; }
.pb-title-band h1 { font-family: var(--pb-font-serif); font-weight: 600; font-size: 40px; letter-spacing: -0.4px; color: var(--pb-blue); margin: 0; display: inline-block; background: linear-gradient(to right, var(--pb-blue), var(--pb-magenta) 60%); -webkit-background-clip: text; background-clip: text; color: transparent; }   /* Figma: gradient title */
.pb-title-band { border-bottom: 0; }
.pb-title-band::after { content: ""; display: block; height: 17px; background: linear-gradient(to right, var(--pb-blue), var(--pb-magenta)); margin-top: 16px; }

/* Long-form prose (legal/policy pages) */
.pb-prose { padding-block: 56px 80px; max-width: 1120px; }
.pb-prose h2 { font-family: var(--pb-font-sans); font-weight: 700; font-size: 20px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--pb-blue); margin: 32px 0 12px; }
.pb-prose p, .pb-prose li { font-size: 16px; line-height: 1.7; }
.pb-prose ul { margin-bottom: 16px; }

/* Branch page (STYLING ASSUMED where noted — no visual ref) */
.pb-branch-header .header-title { margin-bottom: 20px; }   /* branch = child-text header + eyebrow; Figma 80:98 (line-art vector 80:416 not exported) */

.pb-section-title { font-family: var(--pb-font-serif); font-weight: 600; font-size: 36px; letter-spacing: -0.36px; color: var(--pb-blue); margin-bottom: 32px; }

.pb-map-section { padding-block: 56px 40px; }
.pb-map-section .hours-block { font-size: 15px; line-height: 1.6; min-width: 210px; }
.pb-map-section .hours-block h3 { font-weight: 700; font-size: 16px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--pb-magenta); margin: 18px 0 6px; }
.pb-map-section .hours-block h3:first-child { margin-top: 0; }
.pb-map-section .map-embed.map-embed--sample { background: url('/assets/img/branch-map-sample.jpg') center / cover no-repeat; }   /* comp's Portsmouth map, placeholder until live embeds */
.pb-map-section .map-embed {
  border-radius: var(--pb-radius-card);
  background: var(--pb-ice);
  width: 100%;
  min-height: 440px;
}
.pb-map-section .wayfinding { display: flex; align-items: center; gap: 12px; padding: 13px 4px; font-size: 16px; }
.pb-map-section .wayfinding { background: var(--pb-ice); padding: 13px 16px; font-weight: 600; color: var(--pb-blue); }
.pb-map-section .wayfinding .wf-icon { width: 30px; height: 30px; background: url('/assets/icons/map-pin.svg') center / contain no-repeat; flex-shrink: 0; }

.pb-contact-section { padding-block: 40px 56px; }
.pb-contact-card { background: var(--pb-ice); border-radius: 15px; padding: 32px 40px; height: 100%; color: var(--pb-navy); }
.pb-contact-card--sky { background: var(--pb-sky); }
.pb-contact-card--orange { background: var(--pb-orange-btn); }
.pb-contact-card a { color: inherit; }
.pb-contact-card .c-icon--phone { background: url('/assets/icons/contact-phone.svg') center / contain no-repeat; }
.pb-contact-card .c-icon--fax   { background: url('/assets/icons/contact-fax.svg') center / contain no-repeat; }
.pb-contact-card .c-icon--mail  { background: url('/assets/icons/contact-mail.svg') center / contain no-repeat; }
.pb-contact-card .contact-row { display: flex; align-items: center; gap: 17px; }
.pb-contact-card .contact-row + .contact-row { margin-top: 28px; }
.pb-contact-card .contact-row .c-icon { width: 32px; height: 32px; flex-shrink: 0; }
.pb-contact-card .contact-row p { margin: 0; font-size: 16px; }
.pb-contact-card .card-lead { font-weight: 700; font-size: 18px; letter-spacing: 0.9px; text-transform: uppercase; color: var(--pb-navy); margin-bottom: 12px; }
.pb-contact-card .card-copy { font-size: 16px; margin-bottom: 24px; }

/* Figma team card (About leadership, Board, Market Managers) */
/* Team card measured off the Board comp (Drew 2026-09-16): square 1:1 headshot, 27px sky bar, right-hand corners rounded top AND
   bottom (left side square), shadow. Empty photo → {placeholder_headshot} (brand mark on gradient, Drew's export). */
.pb-staff-card { background: #fff; border-radius: 0 25px 25px 0; box-shadow: 0 4px 16px rgba(0, 46, 87, 0.12); overflow: hidden; height: 100%; }
.pb-staff-card .staff-photo { aspect-ratio: 1 / 1; background: var(--pb-sky-pale) center / cover no-repeat; border-bottom: 27px solid var(--pb-sky-mid); }
.pb-staff-card--wide .staff-photo { aspect-ratio: 245 / 200; }   /* About comp: the 4-up Senior Management roster uses landscape headshots (Drew's exports are 245×200) */
.pb-staff-card .staff-body { padding: 16px 16px 20px; }
.pb-staff-card .staff-name { font-family: var(--pb-font-serif); font-weight: 400; font-size: 22px; line-height: 1.25; color: var(--pb-blue); margin-bottom: 10px; }
.pb-staff-card .staff-role { font-size: 14px; line-height: 1.6; margin: 0; }
.pb-staff-card .staff-phone { font-size: 14px; margin: 6px 0 0; }
.pb-staff-card--orange .staff-photo { border-bottom-color: var(--pb-orange); }
.pb-staff-card--orange .staff-name { color: var(--pb-orange-deep); }
.roster-label { font-weight: 700; font-size: 16px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--pb-blue); margin: 0 0 24px; }
/* Letter block (Figma "Message from the President") */
.pb-letter { padding-block: 64px 48px; }
.pb-letter .letter-photo { width: 100%; max-width: 354px; aspect-ratio: 354 / 494; border-radius: 15px; background: var(--pb-sky) center / cover no-repeat; }
.pb-letter .pb-eyebrow { color: var(--pb-sky-mid); margin-bottom: 8px; }
.pb-letter .pb-heading { color: var(--pb-blue); font-size: 40px; margin-bottom: 20px; }
.pb-letter .letter-lead { font-weight: 700; font-size: 18px; color: var(--pb-magenta); line-height: 1.5; margin-bottom: 20px; white-space: pre-line; }
.pb-letter .letter-body { font-size: 16px; line-height: 1.55; white-space: pre-line; margin-bottom: 24px; }
.pb-letter .letter-signoff { font-size: 16px; margin-bottom: 4px; }
.pb-letter .letter-signature { font-size: 40px; color: var(--pb-sky-bright); margin: 0 0 4px; }
.pb-letter .letter-name { font-weight: 700; font-size: 16px; margin: 0; }
.pb-letter .letter-chevrons { width: 230px; }
.pb-branch-card { display: block; text-decoration: none; color: var(--pb-ink); background: #fff; border-radius: 0 0 25px 0; box-shadow: 0 4px 16px rgba(0, 46, 87, 0.12); overflow: hidden; height: 100%; }
.pb-branch-card .branch-photo { aspect-ratio: 4 / 3; background: var(--pb-sky-pale) center / cover no-repeat; border-bottom: 12px solid var(--pb-sky); }
.pb-branch-card .branch-body { padding: 16px 16px 20px; }
.pb-branch-card .branch-name { font-family: var(--pb-font-serif); font-weight: 400; font-size: 22px; color: var(--pb-blue); margin-bottom: 10px; }
.pb-branch-card .branch-address { font-size: 13px; line-height: 1.5; margin-bottom: 10px; }
.pb-branch-card .branch-phone { font-size: 13px; margin: 0; display: flex; align-items: center; gap: 8px; }
.pb-branch-card .branch-phone strong { color: var(--pb-sky-bright); }
.pb-branch-card .c-icon--phone { width: 18px; height: 18px; background: url('/assets/icons/contact-phone.svg') center / contain no-repeat; flex-shrink: 0; }
.pb-branch-card--orange .branch-photo { border-bottom-color: var(--pb-orange); }
.pb-branch-card--orange .branch-name { color: var(--pb-orange-deep); }
.pb-branch-card--orange .branch-phone strong { color: var(--pb-orange-deep); }
.pb-branch-card:hover .branch-name { text-decoration: underline; }
.pb-team { border-bottom: 0.5px solid var(--pb-blue); padding-block: 56px; }
.pb-team--frame { border: 0; background: var(--pb-magenta); color: #fff; border-radius: var(--pb-radius-card); padding: 48px clamp(24px, 3vw, 40px); }
.pb-team--frame .pb-heading { color: #fff; font-size: 36px; margin-bottom: 16px; }
.pb-team--frame .team-intro { font-size: 16px; margin: 0; }
.pb-team.pb-team--frame .team-name { color: var(--pb-yellow); }
.pb-team.pb-team--frame .team-role { color: #fff; }
.pb-team.pb-team--frame .team-bio { color: #fff; font-size: 15px; line-height: 1.6; margin: 0; }
.pb-team .pb-eyebrow { color: var(--pb-yellow); margin-bottom: 12px; }
.pb-team .team-photo { width: 268px; aspect-ratio: 268 / 328; border-radius: var(--pb-radius-card); background: var(--pb-ice) center / cover no-repeat; flex-shrink: 0; }
.pb-team .team-name { font-weight: 700; font-size: 18px; color: var(--pb-blue); text-transform: uppercase; margin-bottom: 2px; }
.pb-team .team-role { font-weight: 600; font-size: 15px; color: var(--pb-magenta); margin-bottom: 12px; }
.pb-team .team-bio { font-size: 15px; line-height: 1.6; margin: 0; }

.pb-services-list ul { padding-left: 22px; margin: 16px 0; }
.pb-services-list li { font-size: 16px; line-height: 1.7; }

.pb-five-col { padding-block: 64px; text-align: center; }   /* items render as pb-outline-box (Figma About + branch comps) */
.pb-five-col .pb-outline-box { width: 208px; }
.pb-five-col .pb-heading { color: var(--pb-blue); }
.pb-specialties .pb-outline-box { width: 208px; }
.pb-services-list .services-note { white-space: pre-line; margin-top: 16px; }
.pb-services-list .services-note::first-line { color: var(--pb-orange-deep); font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; }
.pb-community { text-align: center; }
.pb-community .lh-copy { margin-inline: auto; }
.pb-visit .visit-label { color: var(--pb-blue); font-weight: 700; font-size: 13px; letter-spacing: 0.7px; text-transform: uppercase; }
.pb-visit .visit-details { line-height: 1.5; }
.pb-five-col .pb-eyebrow { color: var(--pb-sky-mid); margin-bottom: 12px; }
.pb-five-col .fc-item { padding: 16px; }
.pb-five-col .fc-item img, .pb-five-col .fc-item .fc-icon { width: 62px; height: 62px; margin-bottom: 28px; }
.pb-five-col .fc-title { font-weight: 700; font-size: 16px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--pb-blue); margin-bottom: 8px; }
.pb-five-col .fc-copy { font-weight: 300; font-size: 15px; line-height: 1.6; margin: 0; }

.pb-logo-highlight { padding-block: 48px 64px; }
.pb-logo-highlight .lh-copy { font-size: 17px; margin-bottom: 32px; }
.pb-logo-highlight .lh-logo { height: 110px; border-radius: 12px; background: var(--pb-ice); flex: 0 1 300px; }
.pb-logo-highlight .lh-logo[style*="background-image"] { background-color: transparent; background-size: contain; background-repeat: no-repeat; background-position: center; }   /* real logos: fit, don't crop */

/* Gradient CTA — DESIGN UNVERIFIED (no visual ref yet); modeled on brand gradient band */
.pb-gradient-cta {
  background: var(--pb-gradient-brand);
  color: #fff;
  text-align: center;
  padding-block: 88px;
}
.pb-gradient-cta .pb-eyebrow { color: var(--pb-yellow); margin-bottom: 12px; }
.pb-gradient-cta .pb-heading { color: #fff; margin-bottom: 16px; }
.pb-gradient-cta .cta-sub { font-weight: 300; font-size: 20px; max-width: clamp(666px, 52vw, 1100px); margin: 0 auto 40px; white-space: pre-line; }
.pb-gradient-cta .cta-wave { display: none; }
/* Card variant (Figma "Gradient CTA" instance): rounded card inside the gutter, blue→magenta, dotted wave across it */
.pb-gradient-cta--card { background: none; color: #fff; position: relative; overflow: hidden; padding-block: 80px 146px; }   /* Figma: 80 above the card, 146 below (wave inside) */
.pb-gradient-cta--card .cta-inner {
  position: relative; z-index: 1;
  background: linear-gradient(to right, var(--pb-blue), var(--pb-magenta));
  border-radius: var(--pb-radius-card);
  padding: 75px 40px 60px;
}
.pb-gradient-cta--card .cta-sub { max-width: clamp(960px, 75vw, 1400px); }
.pb-gradient-cta--card .cta-wave { display: block; position: absolute; left: 0; right: 0; bottom: 48px; z-index: 2; width: 100%; height: 163px; object-fit: fill; pointer-events: none; }   /* Drew's full-opacity dotted element (1280×163): crosses the card's bottom edge, dots run past the card at both sides */

/* --------------------------------------------------------------------------
   Responsive adjustments (desktop comps only — mobile design TBD)
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .pb-hero-people { width: 48vw; }
  .pb-featured-photo { display: none; }
  .pb-featured .pb-featured-content { padding-right: clamp(24px, 4.2vw, 80px); }
}

@media (max-width: 991.98px) {
  .pb-parent-photo, .pb-parent-header .chevron-pattern { display: none; }
  .pb-child-text-header .header-photo, .pb-child-text-header .header-chevrons { display: none; }
  .pb-child-text-header .header-left { width: 100%; }
  .pb-child-text-header .header-content { min-height: 0; }
  .pb-parent-header .header-gradient { margin-right: var(--pb-frame-inset); padding-right: 36px; }
  .pb-option-row .row-card { flex-wrap: wrap; padding-bottom: 16px; }
  .pb-option-row .row-title { width: auto; margin: 16px 24px 0; }
  .pb-option-row .row-copy { margin: 8px 24px 16px; flex-basis: 100%; }
  .pb-option-row .btn-pb { margin-left: 24px; }
  .pb-navbar .navbar-nav { gap: 8px; align-items: flex-start; }
  .pb-hero-inner { padding-right: clamp(20px, 2.1vw, 40px); }
  .pb-hero-people { position: static; width: min(500px, 80%); display: block; margin-inline: auto; }
  .pb-hero-chevrons-tr { display: none; }
  .pb-t-side { display: none; }
}

@media (max-width: 767.98px) {
  .pb-topbar .top-links { display: none !important; }
  .pb-topbar form { gap: 8px !important; }
  .pb-topbar form label { font-size: 12px; }
  .pb-topbar .form-control { width: 96px; }
  .pb-featured-item { flex-wrap: wrap; }
  .pb-heading { font-size: 32px; }
  .pb-hero-title { font-size: 36px; }
}

/* Meet Our Team tabs — Figma: coloured pill tabs, white uppercase labels */
.pb-tabs .nav-link.tab-blue, .pb-tabs .nav-link.tab-sky, .pb-tabs .nav-link.tab-orange, .pb-tabs .nav-link.tab-magenta, .pb-tabs .nav-link.tab-navy {
  color: #fff; font-weight: 700; font-size: 13px; letter-spacing: 0.8px; text-transform: uppercase; text-align: center;
  border: 0; border-radius: 12px 12px 0 0; padding: 12px 20px; min-width: 200px; opacity: 0.85;
}
.pb-tabs .nav-link[class*="tab-"].active { opacity: 1; box-shadow: none; color: #fff; }
.pb-tabs .nav-link[class*="tab-"]::after { border-top-color: #fff; }
.pb-tabs .nav-link.tab-blue { background: var(--pb-blue); }
.pb-tabs .nav-link.tab-sky { background: var(--pb-sky-bright); }
.pb-tabs .nav-link.tab-orange { background: var(--pb-orange-btn); }
.pb-tabs .nav-link.tab-magenta { background: var(--pb-magenta); }
.pb-tabs .nav-link.tab-navy { background: var(--pb-navy); }
.pb-tabs .nav { border-bottom: 2px solid var(--pb-blue); gap: 12px; padding-inline: var(--pb-gutter); flex-wrap: nowrap; }
.pb-tabs .nav-item { flex: 1 1 0; min-width: 0; }
.pb-tabs .nav-link[class*="tab-"] { width: 100%; min-width: 0; padding: 12px 12px; justify-content: center; white-space: normal; }

/* --------------------------------------------------------------------------
   Figma restyle additions (2026-09-15) — scenario cards, option rows (outline), quick links, blog cards, calculator tiles
   -------------------------------------------------------------------------- */
.pb-scenario-card { background: #fff; border-radius: 0 0 25px 0; box-shadow: 0 4px 16px rgba(0, 46, 87, 0.12); overflow: hidden; height: 100%; }
.pb-scenario-card .sc-photo { aspect-ratio: 265 / 150; background: var(--pb-sky-pale) center / cover no-repeat; border-bottom: 12px solid var(--pb-sky); }
.pb-scenario-card .sc-body { padding: 16px 16px 20px; }
.pb-scenario-card .sc-kicker { font-weight: 700; font-size: 11px; letter-spacing: 0.8px; text-transform: uppercase; margin: 0 0 4px; }
.pb-scenario-card .sc-title { font-family: var(--pb-font-serif); font-weight: 400; font-size: 22px; line-height: 1.25; color: var(--pb-blue); margin-bottom: 10px; }
.pb-scenario-card .sc-copy { font-size: 13px; line-height: 1.55; margin: 0; }
.pb-scenario-card.sc-sky .sc-photo { border-bottom-color: var(--pb-sky-bright); } .pb-scenario-card.sc-sky .sc-title, .pb-scenario-card.sc-sky .sc-kicker { color: var(--pb-sky-bright); }
.pb-scenario-card.sc-blue .sc-photo { border-bottom-color: var(--pb-blue); } .pb-scenario-card.sc-blue .sc-title, .pb-scenario-card.sc-blue .sc-kicker { color: var(--pb-blue); }
.pb-scenario-card.sc-orange .sc-photo { border-bottom-color: var(--pb-orange); } .pb-scenario-card.sc-orange .sc-title, .pb-scenario-card.sc-orange .sc-kicker { color: var(--pb-orange-deep); }
.pb-scenario-card.sc-magenta .sc-photo { border-bottom-color: var(--pb-magenta); } .pb-scenario-card.sc-magenta .sc-title, .pb-scenario-card.sc-magenta .sc-kicker { color: var(--pb-magenta); }
/* Compare Accounts comp (Drew 2026-09-16): 3 cards fill the row; "solid" style = colour card, photo on top, navy/white type, icon top-right */
.pb-scenario-row > .col-lg-3:first-child:nth-last-child(3), .pb-scenario-row > .col-lg-3:first-child:nth-last-child(3) ~ .col-lg-3 { flex: 0 0 auto; width: 33.3333%; }
@media (max-width: 991.98px) { .pb-scenario-row > .col-lg-3:first-child:nth-last-child(3), .pb-scenario-row > .col-lg-3:first-child:nth-last-child(3) ~ .col-lg-3 { width: 50%; } }
@media (max-width: 767.98px) { .pb-scenario-row > .col-lg-3:first-child:nth-last-child(3), .pb-scenario-row > .col-lg-3:first-child:nth-last-child(3) ~ .col-lg-3 { width: 100%; } }
.pb-scenario-card .sc-icon { display: none; }
.sc-style--solid .pb-scenario-card { position: relative; box-shadow: none; border-radius: 0 0 25px 0; color: var(--pb-navy); }
.sc-style--solid .pb-scenario-card .sc-photo { aspect-ratio: 360 / 143; border-bottom: 0; }
.sc-style--solid .pb-scenario-card .sc-body { padding: 28px 24px 28px; min-height: 190px; }
.sc-style--solid .pb-scenario-card .sc-kicker { font-size: 13px; letter-spacing: 1px; margin-bottom: 8px; }
.sc-style--solid .pb-scenario-card .sc-title { font-size: 30px; margin-bottom: 14px; }
.sc-style--solid .pb-scenario-card .sc-copy { font-size: 15px; font-weight: 500; line-height: 1.5; max-width: 82%; }
.sc-style--solid .pb-scenario-card .sc-icon { display: block; position: absolute; right: 24px; width: 58px; height: 58px; object-fit: contain; }
.sc-style--solid .pb-scenario-card .sc-photo + .sc-body .sc-icon { top: calc(28px + (100% - 0px) * 0); }   /* placeholder, overridden below */
.sc-style--solid .pb-scenario-card .sc-icon { top: auto; bottom: calc(190px - 28px - 58px); }
.sc-style--solid .pb-scenario-card.sc-sky { background: var(--pb-sky); }
.sc-style--solid .pb-scenario-card.sc-blue { background: var(--pb-blue); color: #fff; }
.sc-style--solid .pb-scenario-card.sc-orange { background: var(--pb-orange); }
.sc-style--solid .pb-scenario-card.sc-magenta { background: var(--pb-magenta); color: #fff; }
.sc-style--solid .pb-scenario-card .sc-title, .sc-style--solid .pb-scenario-card .sc-kicker { color: inherit; }
/* Compare table (Drew 2026-09-16, comp): ice pill column heads, sky row labels, centred values, outline buttons, no verticals */
.pb-compare { font-size: 15px; }
.pb-compare > :not(caption) > * > * { border-left: 0; border-right: 0; padding: 14px 8px; }
.pb-compare thead tr { border: 0; }
.pb-compare thead th { border: 0; background: #fff; padding: 0 0 6px; }
.pb-compare thead th:not(:first-child) { background: var(--pb-ice); color: var(--pb-sky-bright); font-weight: 700; font-size: 15px; text-align: center; text-transform: none; letter-spacing: 0; border-left: 5px solid #fff; border-right: 5px solid #fff; border-radius: 6px; padding: 12px 8px; }
.pb-compare tbody tr:first-child td { border-top: 2px solid var(--pb-sky); }
.pb-compare tbody td { text-align: center; border-color: var(--pb-sky-pale); color: var(--pb-ink); }
.pb-compare tbody td:first-child { text-align: left; color: var(--pb-sky-bright); font-weight: 600; }
.pb-compare tbody tr:last-child td { border-bottom: 0; padding-top: 20px; }

.pb-options .op-intro { text-align: center; font-size: 16px; margin: 0 auto 32px; max-width: clamp(800px, 62vw, 1200px); }
.pb-options--outline .pb-heading { margin-bottom: 8px; }
.pb-options--outline .pb-option-row { border-top: 0; }
.pb-options--outline .pb-option-row + .pb-option-row { margin-top: 16px; }
.pb-options--outline .pb-option-row .row-card { border: 2px solid var(--pb-blue); border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 46, 87, 0.08); padding: 10px 0; align-items: center; }   /* Drew 2026-09-17: icon + title + copy + button all vertically centred (the fixed-height icon box sat at the top under `stretch`) */
.pb-options--outline .pb-option-row .row-icon { background: none !important; width: 72px; height: 48px; }
.pb-options--outline .pb-option-row .row-icon img { width: 44px; height: 44px; }
.pb-options--outline .pb-option-row .row-title { font-size: 14px; }
.pb-options--outline .pb-option-row .row-copy { font-weight: 300; font-size: 13px; }
.pb-options--outline .opt-magenta .row-card { border-color: var(--pb-magenta); } .pb-options--outline .opt-magenta .row-title { color: var(--pb-magenta); }
.pb-options--outline .opt-sky .row-card { border-color: var(--pb-sky-bright); } .pb-options--outline .opt-sky .row-title { color: var(--pb-sky-bright); }
.pb-options--outline .opt-blue .row-card { border-color: var(--pb-blue); } .pb-options--outline .opt-blue .row-title { color: var(--pb-blue); }
.pb-options--outline .opt-orange .row-card { border-color: var(--pb-orange); } .pb-options--outline .opt-orange .row-title { color: var(--pb-orange-deep); }

.pb-quicklinks { background: var(--pb-ice); padding-block: 40px 48px; text-align: center; }
.pb-quicklinks .pb-eyebrow { color: var(--pb-blue); margin-bottom: 28px; }
.pb-quicklinks .ql-item { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pb-quicklinks .ql-icon { width: 48px; height: 48px; }
.pb-quicklinks .btn-pb { font-weight: 600; font-size: 14px; padding: 8px 20px; }

.pb-post-card { background: #fff; border-radius: 0 0 25px 0; box-shadow: 0 4px 16px rgba(0, 46, 87, 0.12); overflow: hidden; height: 100%; display: flex; flex-direction: column; }
.pb-post-card .post-photo { aspect-ratio: 360 / 160; background: var(--pb-sky-pale) center / cover no-repeat; border-bottom: 12px solid var(--pb-sky); }
.pb-post-card .post-body { padding: 20px 16px 24px; display: flex; flex-direction: column; flex: 1; }
.pb-post-card .post-date { font-weight: 700; font-size: 11px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--pb-magenta); margin-bottom: 8px; }
.pb-post-card .post-title { font-family: var(--pb-font-serif); font-weight: 400; font-size: 20px; line-height: 1.3; margin-bottom: 10px; }
.pb-post-card .post-title a { color: var(--pb-blue); text-decoration: none; }
.pb-post-card .post-excerpt { font-size: 13px; line-height: 1.5; margin-bottom: 20px; flex: 1; }
.pb-post-card .post-btn { align-self: flex-start; font-size: 14px; padding: 6px 18px; border-width: 1.5px; }
.pb-post-card.pc-sky .post-photo { border-bottom-color: var(--pb-sky-bright); } .pc-sky .post-btn { border-color: var(--pb-sky-bright); color: var(--pb-sky-bright); }
.pb-post-card.pc-blue .post-photo { border-bottom-color: var(--pb-blue); } .pc-blue .post-btn { border-color: var(--pb-blue); color: var(--pb-blue); }
.pb-post-card.pc-orange .post-photo { border-bottom-color: var(--pb-orange); } .pc-orange .post-btn { border-color: var(--pb-orange); color: var(--pb-orange-deep); }
.pb-post-card.pc-magenta .post-photo { border-bottom-color: var(--pb-magenta); } .pc-magenta .post-btn { border-color: var(--pb-magenta); color: var(--pb-magenta); }
.pb-blog .pb-eyebrow { color: var(--pb-sky-mid); }
main:has(.pb-child-text-header) .pb-blog::after { display: none; }   /* blog listing comp: white background (home keeps its gradient band) */
main:has(.pb-child-text-header) .pb-blog .pb-eyebrow { margin-bottom: 40px; }   /* listing has no heading under the eyebrow — Drew 2026-09-16: needs room before the cards (comp ≈ 46px) */
.pb-back-strip { background: var(--pb-ice); }
/* Individual blog page (Figma "Individual Blog Page"; Drew 2026-09-16): 80px between the back strip and the date, photo with a 12px orange bar + optional caption */
.pb-article { padding-block: 80px 48px; }
.pb-article .article-date { color: var(--pb-sky-mid); margin-bottom: 12px; }
.pb-article .article-figure { margin: 0; }
.pb-article .figure-photo { aspect-ratio: 355 / 282; background: var(--pb-ice) center / cover no-repeat; border-bottom: 12px solid var(--pb-orange); }
.pb-article .figure-caption { font-size: 14px; font-weight: 300; line-height: 1.6; color: var(--pb-ink); margin-top: 16px; }

/* calculator tiles inside tab panes (rte body from the deck) — Figma: outline boxes, sky border */
.tab-pane .fc-item { border: 2px solid var(--pb-sky-bright); border-radius: 15px; padding: 28px 16px 24px; height: 100%; text-align: center; }   /* Drew 2026-09-17: icon, title, copy centred (Calculators comp) */
.tab-pane .fc-item img { width: 58px; height: 58px; margin: 0 auto 20px; display: block; }
.tab-pane .fc-item .fc-title { color: var(--pb-blue); font-weight: 700; font-size: 14px; letter-spacing: 0.8px; text-transform: uppercase; margin-bottom: 10px; }
.tab-pane .fc-item .fc-copy { font-size: 13px; }
.tab-pane .pb-eyebrow { color: var(--pb-sky-mid); text-align: center; }

/* --------------------------------------------------------------------------
   Careers page (ported from Xander's HTML/css/main.css, 2026-09-15) + gradient CTA frame variant
   -------------------------------------------------------------------------- */
.pb-blurbs .row > .col-lg-6:only-child { flex: 0 0 100%; max-width: 100%; }
.pb-blurb-card.blurb-wide { align-items: center; gap: 32px; background: transparent; padding: 0; min-height: 0; }   /* Careers comp: badge + copy sit directly on the ice band, no white card */
.pb-blurb-card.blurb-wide img.blurb-badge { width: 264px; max-width: 40%; height: auto; flex-shrink: 0; }   /* comp: Best Places badge 264 wide */
.pb-blurb-card.blurb-wide .blurb-copy { font-weight: 600; color: var(--pb-blue); white-space: pre-line; }
.benefits-note { text-align: center; font-size: 13px; font-weight: 300; margin: 24px 0 0; }
.pb-mission-band { background: linear-gradient(89deg, var(--pb-blue) 0.3%, var(--pb-magenta) 83.7%); border-radius: var(--pb-radius-card); display: flex; align-items: center; gap: 32px; padding: 40px clamp(24px, 5vw, 64px); color: #fff; }
.pb-mission-band .mission-mark { width: 96px; height: 96px; flex-shrink: 0; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; }
.pb-mission-band .mission-mark img { width: 56px; height: 56px; }
.pb-mission-band .mission-mark--badge { width: 140px; height: 140px; background: transparent; }   /* Figma brand mark export is the whole badge (white ring + wave on the gradient) */
.pb-mission-band .mission-mark--badge img { width: 140px; height: 140px; }
.pb-mission-band .pb-eyebrow { color: var(--pb-yellow); margin-bottom: 8px; }
.pb-mission-band h2 { font-family: var(--pb-font-serif); font-size: 24px; margin-bottom: 8px; color: #fff; }
.pb-mission-band p { font-weight: 300; font-size: 17px; margin-bottom: 0; max-width: clamp(720px, 60vw, 1100px); }
/* Core-value card, measured off the Careers comp (Drew 2026-09-16): 360×143 photo, 28px colour bar, 28px serif title,
   rounded top corners + one big bottom-right corner (same single-corner accent as the other Figma cards), soft shadow. */
.pb-value-card { background: #fff; border-radius: 20px 20px 40px 0; overflow: hidden; box-shadow: 0 4px 16px rgba(0, 46, 87, 0.12); height: 100%; display: flex; flex-direction: column; }
.pb-value-card .value-photo { aspect-ratio: 360 / 143; background: var(--pb-sky-pale) center / cover no-repeat; }
.pb-value-card .value-bar { height: 28px; background: var(--pb-blue); }
.pb-value-card .value-body { background: #fff; padding: 22px 32px 36px; flex: 1; }
.pb-value-card .value-title { font-family: var(--pb-font-serif); font-weight: 400; font-size: 28px; line-height: 1.35; margin-bottom: 12px; color: var(--pb-blue); }   /* Figma: serif titles */
.pb-value-card .value-copy { font-size: 16px; line-height: 1.6; color: var(--pb-ink); margin-bottom: 0; }
.pb-value-card .value-cta { margin-top: 18px; }   /* optional per-card button (Community Involvement partnership cards) */
.value-orange .value-bar { background: var(--pb-orange-btn); } .value-orange .value-title { color: var(--pb-orange-deep); }
.value-magenta .value-bar { background: var(--pb-magenta); } .value-magenta .value-title { color: var(--pb-magenta); }
.value-sky .value-bar { background: var(--pb-sky-mid); } .value-sky .value-title { color: var(--pb-sky-bright); }
.pb-benefit-box { border: 2px solid var(--pb-blue); border-radius: 15px; padding: 28px 20px; text-align: center; height: 100%; }
.pb-benefit-box img { width: 48px; height: 48px; margin-bottom: 16px; }
.pb-benefit-box .benefit-title { font-weight: 700; font-size: 15px; letter-spacing: 0.6px; text-transform: uppercase; margin-bottom: 12px; color: var(--pb-blue); }
.pb-benefit-box ul { list-style: none; padding: 0; margin: 0; font-size: 15px; color: var(--pb-ink); }
.pb-benefit-box ul li + li { margin-top: 4px; }
.benefit-magenta { border-color: var(--pb-magenta); } .benefit-magenta .benefit-title { color: var(--pb-magenta); }
.benefit-sky { border-color: var(--pb-sky-mid); } .benefit-sky .benefit-title { color: var(--pb-sky-bright); }
.benefit-orange { border-color: var(--pb-orange-btn); } .benefit-orange .benefit-title { color: var(--pb-orange-deep); }
.pb-gradient-cta .cta-chevrons { display: none; }
.pb-gradient-cta--frame { margin-inline: var(--pb-frame-inset); border-radius: var(--pb-radius-frame); position: relative; overflow: hidden; padding-block: 72px; }
.pb-gradient-cta--frame .cta-chevrons { display: block; position: absolute; width: 229px; opacity: 0.6; }
.pb-gradient-cta--frame .cta-chevrons.left { left: 40px; bottom: 32px; }
.pb-gradient-cta--frame .cta-chevrons.right { right: 40px; top: 32px; }
.pb-gradient-cta--frame .cta-sub { font-size: 18px; }

/* ==========================================================================
   Megan's design-edits sheet, 2026-10-09 — Phase 1 global fixes (Ben, 2026-10-13)
   Row numbers = rows in "Partners Design Edits" (Google Sheet). Kept at the end of the file so these win the cascade.
   ========================================================================== */
/* Row 52 — Gradient CTA (card): dotted line runs to both page edges (PNG + cover, same as the testimonial wave) */
.pb-gradient-cta--card .cta-wave { object-fit: cover; }
/* Row 10 — Testimonials: the dotted wave no longer crosses behind the headline; it sits behind the avatars/cards */
/* Figma 1:4294 (re-audit 2026-10-14): band py-40, wave 163px pulled up by -137px so it crosses behind the headline's ends and dips
   behind the centre avatar; headline → carousel gap 16px (the carousel had 96px of mb-5 + pt-5) */
.pb-testimonials { padding-block: 40px; }
.pb-testimonials .pb-dotted-wave { position: static; margin: 0 0 -137px; height: 163px; object-fit: cover; }
.pb-testimonials .pb-eyebrow, .pb-testimonials .pb-heading { position: relative; z-index: 1; }
.pb-testimonials .pb-heading.mb-5 { margin-bottom: 16px !important; }
.pb-testimonials .pb-heading + .d-flex.pt-5 { padding-top: 46px !important; align-items: flex-start !important; }   /* comp: card tops aligned (frames 356/305 start on one line), primary card top 242px below the band top */
.pb-testimonials .pb-t-arrow { align-self: center; }
.pb-t-card .pb-t-stars, .pb-t-card .pb-t-avatar { display: block; margin-inline: auto; }
/* Row 4 — FAQ: the triangle is now the button's own ::after, so clicking it toggles the item (button static → positions against .accordion-item) */
.pb-faq .accordion-item::after { display: none; }
.pb-faq .accordion-button { position: static; }
.pb-faq .accordion-button::after {
  display: block; content: ""; position: absolute; right: 22px; top: 50%; width: 0; height: 0; margin-top: -4px;
  border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 9px solid var(--pb-blue);
  background: none; transform: none; transition: transform 0.2s;
}
.pb-faq .accordion-button:not(.collapsed)::after { transform: rotate(180deg); }
/* Row 18 — 4-item blurbs: 2×2, coloured all-caps headers (icons are content, added per entry in Phase 3) */
@media (min-width: 992px) {
  .pb-blurbs .row:has(> :nth-child(4):last-child) > .col-lg-4 { flex: 0 0 50%; max-width: 50%; }
}
/* (the numbered card's markup nests <h3> inside <p class="blurb-copy">, which the parser closes early — so target the card, not .blurb-copy) */
.pb-blurbs .pb-blurb-card h3 { font-family: var(--pb-font-sans); font-weight: 600; font-size: 18px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 8px; }
.pb-blurbs .row > :nth-child(4n+1) .pb-blurb-card h3 { color: var(--pb-magenta); }
.pb-blurbs .row > :nth-child(4n+2) .pb-blurb-card h3 { color: var(--pb-blue); }
.pb-blurbs .row > :nth-child(4n+3) .pb-blurb-card h3 { color: var(--pb-orange-deep); }
.pb-blurbs .row > :nth-child(4n+4) .pb-blurb-card h3 { color: var(--pb-sky-bright); }
/* Row 24 — 5 outline boxes sit in one row instead of 4 + 1 */
@media (min-width: 992px) {
  .pb-keyfeatures .row:has(> :nth-child(5):last-child) > .col-lg-3 { flex: 0 0 20%; max-width: 20%; }
}
/* Rows 261 / 284 / 297 — five-col groups: 40px between boxes at every width */
.pb-five-col .row { --bs-gutter-x: 40px; --bs-gutter-y: 40px; }
/* Rows 274–282 — team rosters (Board, Commercial, Market Managers, Mortgage, Senior): 180px inset so the photo area isn't too wide */
@media (min-width: 1200px) { .pb-team-list > .row { padding-inline: 100px; } }   /* Figma 1:2423: grid px-180 from the PAGE edge = 80 gutter + 100 */
/* Row 296 — Locations: "Find us locally" eyebrow + heading centred */
.pb-branch-list > .pb-eyebrow, .pb-branch-list > .pb-heading { text-align: center; }
/* Row 271 — Meet Our Team: the bar under each photo matches its tab colour */
.pb-staff-card--blue .staff-photo { border-bottom-color: var(--pb-blue); }
.pb-staff-card--blue .staff-name { color: var(--pb-blue); }
.pb-staff-card--sky .staff-photo { border-bottom-color: var(--pb-sky-bright); }
.pb-staff-card--sky .staff-name { color: var(--pb-blue); }
.pb-staff-card--magenta .staff-photo { border-bottom-color: var(--pb-magenta); }
.pb-staff-card--magenta .staff-name { color: var(--pb-magenta); }
/* Row 265 — President's signature: Outfit bold, blue (client asked to drop the script font) */
.pb-letter .letter-signature.pb-script { font-family: var(--pb-font-sans); font-weight: 700; font-size: 26px; color: var(--pb-blue); letter-spacing: 0.5px; }
/* Row 289 — Careers: framed CTA gets room above and below */
/* removed 2026-10-14: page gap is now main's flex gap (Figma: 80px between every section) */
/* Row 133 — Bundles: testimonials never touch the FAQ band */
/* removed 2026-10-14: page gap is now main's flex gap (Figma: 80px between every section) */
/* Row 264 / 268 — Small Child Header (title + photo): the comp has a thick gradient stripe along the bottom, thin rule on top */
.pb-child-text-header.pb-title-photo-header::after { height: 12px; }
/* Row 11 — Big photo CTA (home "Visit us", About, Locations, Community): taller so the wave never overlaps the buildings;
   the overlap art stays at its native 1920 width, so its extra wave ends only show on wide screens */
/* Figma "Big CTA Photo Frame" (Partners-to-code 1:4459, 2026-10-14): frame 1200×707 inside 40px insets, photo cover, 50px top radii;
   the wave art is the SAME 1920×180 PNG Drew used, but Figma sets it in a 1280×223 band with object-fit COVER — scaled ×1.24 and
   centre-cropped — which is why the comp shows ONE peak. Any other fit (stretch, native width) exposes the other peaks. */
.pb-big-cta { min-height: 707px; }
.pb-big-cta::after { aspect-ratio: auto; height: 223px; background-size: cover; background-position: center; }
/* Row 12 — Blog band: the gradient starts inside the photo area, not at the white mountain */
.pb-blog::after { top: 380px; bottom: 0; height: auto; }   /* Figma 1:4486: gradient top sits 308px below the eyebrow (+72 section padding) and runs to the card bottoms */
/* Row 14 — Bottom CTA: the dot pattern is layered over the ice card */
.pb-bottom-cta-wrap .pb-gutter { position: relative; z-index: 0; }
.pb-dotted-wave-bottom { position: relative; z-index: 1; margin-top: -110px; }
/* Row 9 — Home hero: the three figures a bit larger (comp: they fill the right half of the panel) */
.pb-hero-people { width: min(700px, 50vw); right: clamp(12px, 3vw, 60px); }
/* Row 295 — Locations: the "11 Branches Across…" first line of the intro is Medium (500) */
.pg-locations .pb-parent-header .header-intro::first-line { font-weight: 500; }

/* ==========================================================================
   Figma re-audit, 2026-10-14 (Ben) — node-by-node corrections, file "Partners to code" (rvJncY8shyROaozZcEwqJ8)
   ========================================================================== */
/* Parent Header (instance 1:1508 / 1:3083): intro is Outfit Light 20px; when it has a lead paragraph (<strong>, the 5 two-part intros)
   the lead is Medium 20px and the body drops to 16px. Photo box 491×481, top 87px, right 112px, flush to the panel bottom. */
.pb-parent-header .header-intro:has(strong) { font-size: 16px; }
.pb-parent-header .header-intro strong { font-weight: 500; font-size: 20px; }
.pb-parent-photo { top: 87px; right: 112px; width: 491px; border: 0; box-shadow: none; }
.pb-parent-header .chevron-pattern.top { top: 70px; right: 148px; width: 172px; }
.pb-parent-header .chevron-pattern.bottom { top: 412px; bottom: auto; right: 418px; width: 223px; }
/* Small Child Header with photo (1:2422 / 1:2311): title 40px, script 56/64, photo frame 480 wide with 50px top radii */
.pb-title-photo-header .header-title .title-main { font-size: 40px; }
.pb-child-text-header.pb-title-photo-header .header-title .pb-script { font-size: 56px; line-height: 64px; }
.pb-title-photo-header .header-photo { border-radius: 50px 50px 0 0; }
/* Gradient CTA card (1:2945): card inset = gutter, padding 64/80, title 38px, sub→buttons 48px, wave top 98px above the card bottom */
.pb-gradient-cta--card .cta-inner { padding: 64px 80px; }
.pb-gradient-cta--card .pb-heading { font-size: 38px; }
.pb-gradient-cta--card .cta-sub { margin-bottom: 48px; }
.pb-gradient-cta--card .cta-wave { bottom: 81px; }
/* Framed gradient CTA (Careers 1:2632): same card as above — 25px radius, inset = gutter, blue→magenta, chevron clusters top-left and bottom-right */
.pb-gradient-cta--frame { margin-inline: var(--pb-gutter); border-radius: 25px; padding: 64px 80px; background: linear-gradient(to right, var(--pb-blue), var(--pb-magenta)); }
.pb-gradient-cta--frame .pb-heading { font-size: 38px; }
.pb-gradient-cta--frame .cta-sub { font-size: 20px; }
.pb-gradient-cta--frame .cta-chevrons.left { left: 64px; top: 56px; bottom: auto; width: 180px; }
.pb-gradient-cta--frame .cta-chevrons.right { right: 64px; bottom: 44px; top: auto; width: 140px; }
/* Outline boxes (About 1:1380 / Locations 1:1640 / branch 1:2745): top corners only, 32/16 padding, 28px icon→text, 16px copy */
.pb-outline-box { border-radius: 15px 15px 0 0; padding: 32px 16px; gap: 28px; }
.pb-outline-box img { margin-top: 0; width: 58px; height: 58px; }
.pb-outline-box .box-title { line-height: 16px; margin-bottom: 8px; }
.pb-outline-box .box-copy { font-size: 16px; line-height: normal; }
/* Meet Our Team (1:618): tabs 16px bold caps, 16px padding, 25px top radii, full opacity; cards 268×200 photo, 24px serif name, 32px text inset */
.pb-tabs .nav { gap: 20px; }
.pb-tabs .nav-link[class*="tab-"] { font-size: 16px; line-height: 16px; letter-spacing: 0.8px; padding: 16px; border-radius: 25px 25px 0 0; opacity: 1; min-width: 0; }
.pb-staff-card--wide .staff-photo { aspect-ratio: auto; height: 200px; }
.pb-staff-card .staff-body { padding: 16px 32px 24px; }
.pb-staff-card .staff-name { font-size: 24px; line-height: 1.3; margin-bottom: 8px; }
.pb-staff-card .staff-role { font-size: 16px; font-weight: 500; line-height: 1.55; }
.pb-staff-card--sky .staff-name { color: var(--pb-sky-bright); }
/* Rosters on the team child pages (1:2423): 3-up, 290px portrait photos */
.pb-team-list .pb-staff-card .staff-photo { aspect-ratio: auto; height: 290px; }
.pb-team-list .row { --bs-gutter-x: 20px; --bs-gutter-y: 32px; }
/* Parent Header text column: Figma gives the intro the full 598px column (panel 940 − 36 − 306) at Outfit's natural leading; the 88% cap wrapped it a line early */
.pb-parent-header .header-intro { max-width: none; line-height: 1.3; }
/* Testimonial cards (1:4303 / 1:4317): 72/16/32 padding, script quote at 1.0 leading (28px primary, 20px side), quote→name gap 16 (primary) / 8 (side) */
.pb-t-card { padding: 72px 16px 32px; }
.pb-t-card .pb-t-quote { line-height: 1; margin-bottom: 8px; }
.pb-t-primary .pb-t-quote { margin-bottom: 16px; }
.pb-t-card .pb-t-name { line-height: 28px; margin-bottom: 8px; }
.pb-t-primary .pb-t-name { margin-bottom: 16px; }
/* Carousel vertical geometry from the 1:4294 render: side cards top 248 / primary 222 below the band top; avatars straddle 41px (primary) / 28px (side) above the card */
/* corrected to the frame metadata chain (1:4294 → Carousel y=72 h=356 → Frame with Photo y=45 / side y=26+45; images y=-44 / -30) */
.pb-testimonials .pb-heading + .d-flex.pt-5 { padding-top: 0 !important; min-height: 356px; }
.pb-testimonials .pb-heading { height: 56px; line-height: 56px; margin-bottom: 16px !important; }
.pb-t-card.pb-t-primary { margin-top: 45px; }
.pb-t-card.pb-t-side { margin-top: 71px; }
.pb-t-card .pb-t-avatar { top: -30px; }
.pb-t-primary .pb-t-avatar { top: -44px; }

/* ==========================================================================
   Page scaffolding from the Figma templates (2026-10-14, Ben): every page frame is a vertical autolayout with an 80px gap
   between sections, and 80px before the footer. Blocks carry ONLY their own internal padding (per node). No sibling margins.
   ========================================================================== */
main { display: flex; flex-direction: column; gap: 80px; padding-bottom: 80px; }
main > script, main > style { display: none; }
main > .pb-separating-rule { margin: -80px 0 0; }   /* home: the hairline belongs to the header frame (Figma "Separating Rule", h=0) */

/* ==========================================================================
   HOME — geometry from Figma "✓ Homepage 1280 px" (1:4163), node by node (Ben 2026-10-14).
   Every number below is read from the frame metadata (x/y/w/h + derived padding/gap), not estimated.
   Autolayout model: bands are full-bleed; content is FIXED-WIDTH children centred in the band (the 1550/1920 frames
   confirm: cards keep 360/318/265px and the band grows). So rows are flex + gap, cards keep their width, wrap when
   they no longer fit, and stay centred — that is the same behaviour at every viewport.
   ========================================================================== */
/* --- 3 Color Items (1:4225): 481 tall, no band padding; cards 360 wide, gap 20, centred ------------------------------ */
.pg- main > section[aria-label="Banking options"] { padding: 0 !important; }
.pg- main > section[aria-label="Banking options"] .container-pb { max-width: none; padding: 0; }
.pg- main > section[aria-label="Banking options"] .row { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin: 0; --bs-gutter-x: 0; --bs-gutter-y: 0; }
.pg- main > section[aria-label="Banking options"] .row > [class*="col-"] { flex: 0 0 360px; width: 360px; max-width: 100%; padding: 0; }
.pb-color-card .card-photo { height: 143px; }                                        /* 1:4227 */
.pb-color-card .card-body-pb { padding: 32px; gap: 32px; }                            /* 1:4228 pad 32, gap 32 */
.pb-color-card .card-kicker { font-size: 16px; line-height: 16px; letter-spacing: 0.8px; margin-bottom: 8px; }   /* 1:4232 h16, gap 8 */
.pb-color-card .card-title-pb { font-size: 28px; line-height: 40px; }                 /* 1:4233 h40 */
.pb-color-card .card-icon { width: 54px; height: 58px; }                             /* 1:4234 */
.pb-color-card .card-copy { margin-top: 16px; font-size: 16px; line-height: 1.55; }  /* 1:4247 y80 (64 + 16) */
.pb-color-card .btn-pb.w-100 { width: auto !important; align-self: flex-start; height: 38px; padding: 0 23px; font-size: 18px; }   /* 1:4248 184×38 */
/* --- Testimonials carousel (1:4298): px-80, gap 32, arrows 16 wide, cards 318 ------------------------------------------ */
.pb-testimonials .pb-heading + .d-flex { gap: 32px !important; padding-inline: 80px !important; }
.pb-t-card, .pb-t-primary { width: 318px; flex: 0 0 318px; }
.pb-t-arrow { padding: 0; width: 16px; }
.pb-t-arrow img { width: 30px; height: 16px; }   /* the SVG is a 30×16 chevron rotated ±90° by Drew's rules; the button box is 16×30 */
.pb-t-arrow { height: 30px; display: flex; align-items: center; justify-content: center; overflow: visible; }
/* --- Organization Highlight (1:4343): 120 tall = title 16 + gap 32 + logos 72; logos gap 80 ------------------------- */
.pb-recognized { padding: 0; }
.pb-recognized .pb-eyebrow-sm { font-size: 16px; line-height: 16px; margin-bottom: 32px; }
.pb-recognized > .d-flex { gap: 80px !important; height: 72px; }
/* --- 3 Content & Photo / featured swoosh (1:4351): 629 tall; text column 742 wide at x=80, pad-top 84 ------------------- */
.pb-frame--rounded .pb-swoosh { min-height: 629px; }
.pb-swoosh-content { padding: 84px 0 84px 40px; width: 782px; }                       /* 1:4354 content 742 @ page x=80 (frame x=40 + 40) */
.pb-swoosh .pb-eyebrow { font-size: 17.3px; line-height: 22px; margin-bottom: 11px; }   /* 1:4356 h22, gap 11 */
.pb-swoosh .pb-heading { font-size: 36px; line-height: 49px; margin-bottom: 40px; }      /* 1:4357 h49, gap 40 */
.pb-featured-item { padding-block: 24px; gap: 18px; }                                   /* item 81 + 24 + divider + 24 */
.pb-featured-item .item-icon { width: 58px; height: 58px; }
.pb-featured-item .item-title { font-size: 18px; line-height: 25px; margin-bottom: 16px; }   /* 1:4367 h25, gap 16 */
.pb-featured-item .item-copy { font-size: 16px; line-height: 20px; letter-spacing: 0.8px; }  /* 1:4368 h40 = 2 lines */
.pb-featured-item .btn-pb { height: 38px; padding: 0 23px; font-size: 18px; }           /* 1:4369 140×38 */
.pb-swoosh-content .pb-featured-item:first-of-type { padding-top: 0; }                   /* Figma: first item starts at the 40px gap, no leading divider space */
/* --- 8 Content Area / industry (1:4404): 640 tall = title 88 + gap 36 + grid 516; cards 265 wide, gap 20 / rows 23 ------ */
.pb-industry { padding: 0; }
.pb-industry .pb-eyebrow { font-size: 16px; line-height: 16px; margin-bottom: 16px; }   /* 1:4406 h16 gap 16 */
.pb-industry .pb-heading { font-size: 40px; line-height: 56px; margin-bottom: 36px; }   /* 1:4407 h56 gap 36 */
.pb-industry .row { display: flex; flex-wrap: wrap; justify-content: center; gap: 23px 20px; margin: 0; --bs-gutter-x: 0; --bs-gutter-y: 0; }
.pb-industry .row > [class*="col-"] { flex: 0 0 265px; width: 265px; max-width: 100%; padding: 0; }
.pb-ind-card { padding: 27px 19px; }                                                   /* min pad 27/19; rows equalise by content */
/* --- Blog Feature (1:4485): 652 tall; title 84 (22 + 9 + 53) + gap 48; cards 360 @ gap 20; gradient from y=308 ------------ */
.pb-blog { padding: 0 0 41px; }                                                        /* cards end at 611, band at 652 */
.pb-blog .pb-eyebrow { font-size: 17.3px; line-height: 22px; margin-bottom: 9px; }
.pb-blog .pb-heading { font-size: 40px; line-height: 53px; margin-bottom: 48px; }
.pb-blog::after { top: 308px; bottom: 0; height: auto; }
.pb-blog .container-pb { max-width: none; padding: 0; }
.pb-blog .row { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin: 0; --bs-gutter-x: 0; --bs-gutter-y: 0; }
.pb-blog .row > [class*="col-"] { flex: 0 0 360px; width: 360px; max-width: 100%; padding: 0; }
.pb-blog-card .blog-photo { height: 260px; }                                           /* Group 185 */
.pb-blog-card .blog-body { padding: 24px 32px; gap: 24px; }                            /* Frame 406: 218 = 24 + text + 24 + cta 38 + 24 */
.pb-blog-card .blog-title { font-size: 18px; line-height: normal; margin-bottom: 16px; }
.pb-blog-card .blog-copy { font-size: 18px; font-weight: 500; line-height: normal; }
.pb-blog-card .btn-pb { height: 38px; padding: 0 23px; font-size: 18px; }
/* --- Bottom CTA (1:4522): no band padding (page gap); card inset 80, pad 64, gap 40; wave pulled up 110 ------------------- */
.pb-bottom-cta-wrap { padding-top: 0; }
.pb-bottom-cta { padding: 64px 24px; }
.pb-bottom-cta .pb-eyebrow { margin-bottom: -11px; line-height: 17px; }
.pb-bottom-cta .cta-headline { height: 82px; margin-bottom: 0; display: flex; align-items: center; justify-content: center; font-size: 38px; }
.pb-bottom-cta .cta-sub { margin: 0 auto 40px; }

/* --- second pass from the DOM/Figma tree diff ---------------------------------------------------------------------- */
.pb-color-card .card-body-pb > div > .d-flex { gap: 0 !important; }                   /* 1:4230 Title&Icon: title area 242 + icon 54 = 296, no gap */
.pb-color-card .card-body-pb > div > .d-flex > div { width: 242px; flex: 0 0 242px; }
.pb-featured-item .item-copy { letter-spacing: 0; }                                   /* 1:4368 copy is 2 lines at 508px */
.pb-swoosh-content .pb-featured-item:last-of-type { padding-bottom: 0; }              /* 3 Content Items ends on the item (339 = 81+48+81+48+81) */
.pb-ind-card .ind-kicker { line-height: 16px; }
.pb-ind-card .btn-pb { height: 38px; padding-block: 0; }
.pb-bottom-cta .cta-sub { line-height: 1.38; }

/* ==========================================================================
   CHILD TEMPLATE — geometry from "✓ Template Child Page: Money Market Accounts" (1:2871) frame metadata (Ben 2026-10-14)
   ========================================================================== */
/* Frame 413: header (312 below the nav) + "Additional Header Content" are ONE frame with gap 0 */
.pb-child-text-header .header-content { min-height: 312px; }
.pb-child-text-header + .pb-child-intro { margin-top: -80px; }
.pb-child-intro { padding: 56px 120px; }                                             /* 1:2874 pad 56/120, gap 32, circle 181 */
.pb-child-intro .intro-row { gap: 32px; }
/* Frame 156 — get started (photo variant): text 654 + gap 32 + photo 354×354, inset 120 */
.pb-getstarted { padding: 0 120px; }
.pb-getstarted .row { display: flex; flex-wrap: wrap; gap: 32px; margin: 0; --bs-gutter-x: 0; --bs-gutter-y: 0; align-items: flex-start; }
.pb-getstarted .row > [class*="col-"] { padding: 0; width: auto; flex: 0 0 auto; }
.pb-getstarted .row > .col-md-7 { width: 654px; max-width: 100%; }
.pb-getstarted .row > .col-md-5 { width: 354px; max-width: 100%; }
.pb-getstarted .split-photo { width: 354px; max-width: 100%; aspect-ratio: 1; }
.pb-getstarted .pb-heading { font-size: 36px; line-height: 36px; margin-bottom: 16px; }     /* 1:2880 h108 = 3 lines */
.pb-getstarted .gs-copy { font-size: 18px; line-height: 1.46; margin-bottom: 32px; }         /* 1:2881 h79 = 3 lines */
.pb-getstarted .gs-buttons { gap: 16px; }
.pb-getstarted .btn-pb { height: 38px; padding: 0 23px; font-size: 18px; }
/* Frame 168 — stats (Group 167, 470) + 40 + rates band (Frame 159, 164) */
.pb-stats { padding: 0; }
.pb-stats .pb-eyebrow { font-size: 16px; line-height: 16px; margin-bottom: 16px; }
.pb-stats .pb-heading { font-size: 40px; line-height: 56px; margin-bottom: 26px; }
.pb-stats .stats-lead { font-size: 18px; line-height: 25px; margin-bottom: 21px; }
.pb-stats .row { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 20px; margin: 0; --bs-gutter-x: 0; --bs-gutter-y: 0; }
.pb-stats .row > [class*="col-"] { flex: 0 0 265px; width: 265px; max-width: 100%; padding: 0; }
.pb-stat-tile { padding: 16px; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.pb-stat-tile .stat-title { font-size: 16px; line-height: 16px; margin: 0; }
.pb-stat-tile .stat-sub { font-size: 16px; line-height: 20px; margin: 0; }
.pb-stats .stats-close { font-size: 18px; line-height: 25px; margin-top: 26px; }
.pb-stats + .pb-rates-band { margin-top: -40px; }
.pb-rates-band { margin-top: 0; padding: 32px 0; }
.pb-rates-band .pb-gutter { gap: 24px !important; align-items: center; }
.pb-rates-band .band-icon { width: 91px; height: 91px; }
.pb-rates-band .flex-grow-1 { min-height: 100px; display: flex; flex-direction: column; justify-content: center; max-width: 592px; }
.pb-rates-band .btn-pb { height: 38px; padding: 0 23px; font-size: 18px; margin-left: auto; }
/* Frame 427 — image + text: photo 354×283 left, gap 32, text 654; inset 120 */
.pb-image-text { padding: 0 120px; }
.pb-image-text .row { display: flex; flex-wrap: wrap; gap: 32px; margin: 0; --bs-gutter-x: 0; --bs-gutter-y: 0; align-items: flex-start; }
.pb-image-text .row > [class*="col"] { padding: 0; width: auto; flex: 0 0 auto; }
.pb-image-text .row > .col.split-text { width: 654px; max-width: 100%; }
.pb-image-text .split-photo { width: 354px; max-width: 100%; height: 283px; }
.pb-image-text .pb-heading { font-size: 36px; line-height: 46px; margin-bottom: 16px; }       /* 1:2940 h92 = 2 lines */
.pb-image-text .split-copy { font-size: 16px; line-height: 1.42; letter-spacing: 0; margin-bottom: 32px; }   /* 1:2941 h91 = 4 lines */
.pb-image-text .btn-pb { height: 38px; padding: 0 23px; font-size: 18px; }
/* FAQ Section (instance 1:1504 spec): pad 56/80, gap 32, items 664 wide, item pad 24/16 gap 28, icon 44, items gap 24 */
.pb-faq { padding: 56px 80px; }
.pb-faq .row { display: flex; flex-wrap: wrap; gap: 32px; margin: 0; --bs-gutter-x: 0; --bs-gutter-y: 0; }
.pb-faq .row > [class*="col-"] { padding: 0; }
.pb-faq .row > .col-lg-4 { flex: 1 1 0; width: auto; min-width: 200px; }
.pb-faq .row > .col-lg-8 { flex: 0 0 664px; width: 664px; max-width: 100%; }
.pb-faq .faq-left { padding-top: 0; }
.pb-faq .pb-eyebrow { font-size: 17.3px; margin-bottom: 12px; }
.pb-faq .pb-heading { font-size: 40px; line-height: normal; max-width: none; }
.pb-faq .faq-chevrons { width: 223px; padding-top: 0; margin-top: auto; }
.pb-faq .accordion-item + .accordion-item { margin-top: 24px; }
.pb-faq .faq-row { padding: 24px 16px; gap: 28px; }
.pb-faq .faq-q-icon { width: 44px; height: 44px; }
.pb-faq .accordion-button::after { right: 16px; }
.pb-faq .accordion-body { padding-top: 8px; line-height: normal; }
/* Gradient CTA card (1:2945): no top padding (page gap); card pad 64/80; wave 98px above the card bottom → 65px of band below */
.pb-gradient-cta--card { padding-block: 0 65px; }
.pb-gradient-cta--card .cta-wave { bottom: 0; }
.pb-gradient-cta--card .pb-heading { line-height: 1.25; }
.pb-gradient-cta--card .cta-sub { line-height: 1.38; }
/* get-started: the text column fills (654 + 32 + 354 = 1040 exactly, and sub-pixel rounding wrapped the photo) */
.pb-getstarted .row > .col-md-7 { width: auto; flex: 1 1 0; min-width: 0; }
.pb-getstarted .row { flex-wrap: nowrap; }
@media (max-width: 991.98px) { .pb-getstarted .row { flex-wrap: wrap; } }

/* ==========================================================================
   PARENT TEMPLATE / ABOUT / LOCATIONS — geometry from frames 1:3082, 1:1378, 1:1507 (Ben 2026-10-14)
   Shared section title across these blocks: eyebrow 17.3px (22px box) + 12 + heading 36px (43px box)
   ========================================================================== */
:is(.pb-blurbs, .pb-options, .pb-keyfeatures, .pb-five-col, .pb-branch-list, .pb-team-list) .pb-eyebrow { font-size: 17.3px; line-height: 22px; margin-bottom: 12px; }
:is(.pb-blurbs, .pb-options, .pb-five-col, .pb-branch-list, .pb-team-list) .pb-heading { font-size: 36px; line-height: 43px; margin-bottom: 40px; }
/* Frame 177 — blurbs (599): pad 56/80, title → 32 → intro (784, 20px) → 40 → 2×2 cards 550×108, gap 20 / rows 24, card pad 16/24 gap 18 */
.pb-blurbs { padding: 56px 0; }
.pb-blurbs > .pb-gutter { padding-inline: 80px; }
.pb-blurbs .pb-heading { margin-bottom: 32px; }
.pb-blurbs .pb-heading + .row, .pb-blurbs .mb-4 { margin-bottom: 0 !important; }
.pb-blurbs .blurbs-intro { font-size: 20px; line-height: 25px; max-width: 784px; margin: 0 auto 40px; }
.pb-blurbs .row { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px 20px; margin: 0; --bs-gutter-x: 0; --bs-gutter-y: 0; }
.pb-blurbs .row > [class*="col-"] { flex: 0 0 550px; width: 550px; max-width: 100%; padding: 0; }
.pb-blurb-card { padding: 16px 24px; gap: 18px; min-height: 108px; }
.pb-blurb-card .blurb-title { font-size: 20px; line-height: normal; margin-bottom: 8px; }
.pb-blurb-card .blurb-copy { font-size: 16px; line-height: normal; }
@media (min-width: 992px) { .pb-blurbs .row:has(> :nth-child(4):last-child) > .col-lg-4 { flex: 0 0 550px; max-width: 550px; } }
/* 6 Item Layout Section — options (869): pad 0/80, title → 40 → items 99 (+stroke), gap 32; icon 99×100, text at 131, CTA 184×38 */
.pb-options { padding: 0 80px; }
.pb-option-row + .pb-option-row { margin-top: 32px; }
.pb-option-row .row-card { height: 100px; }
.pb-option-row .row-card .btn-pb { height: 38px; padding: 0 23px; font-size: 18px; }
/* 4 Content Area Outline Boxes (443): title (16 + 12 + 57) → 43 → boxes 208 wide, gap 20, centred; box pad 32/16 centred, icon 60, gap 28, text gap 8 */
.pb-keyfeatures { padding: 0; }
.pb-keyfeatures .pb-eyebrow { font-size: 16px; line-height: 16px; margin-bottom: 12px; }
.pb-keyfeatures .pb-heading { font-size: 40px; line-height: 57px; margin-bottom: 43px; }
.pb-keyfeatures .row { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin: 0; --bs-gutter-x: 0; --bs-gutter-y: 0; }
.pb-keyfeatures .row > [class*="col-"] { flex: 0 0 208px; width: 208px; max-width: 100%; padding: 0; }
.pb-keyfeatures .pb-outline-box { padding: 32px 16px; justify-content: center; }
.pb-keyfeatures .pb-outline-box img { width: 60px; height: 60px; }
.pb-outline-box .box-copy { line-height: 25px; }
@media (min-width: 992px) { .pb-keyfeatures .row:has(> :nth-child(5):last-child) > .col-lg-3 { flex: 0 0 208px; max-width: 208px; } }
/* 5 Content Area — five-col (About 518 / Locations 410): title → 32 → intro (20px/25) → 40 → boxes 208, gap 40, centred; box pad 16, gap 28, centred */
.pb-five-col { padding: 0 120px; }
.pb-five-col > p:not(.pb-eyebrow) { font-size: 20px; line-height: 25px; max-width: 1040px; margin: -8px auto 40px; }   /* heading mb 40 → 32 before an intro */
.pb-five-col .row { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px; margin: 0; --bs-gutter-x: 0; --bs-gutter-y: 0; }
.pb-five-col .row > [class*="col-"] { flex: 0 0 208px; width: 208px; max-width: 100%; padding: 0; }
.pb-five-col .pb-outline-box { padding: 32px 16px; justify-content: center; width: 208px; }
.pb-five-col .pb-outline-box img { width: 58px; height: 58px; }
/* Image Callout Grid — branch list (1044): pad 80, title → 40 → cards 265, gap 20 / rows 32; photo 200, bar 27.6, text pad 16/32/32 gap 12 */
.pb-branch-list { padding: 0 80px; }
.pb-branch-list .row { display: flex; flex-wrap: wrap; justify-content: center; gap: 32px 20px; margin: 0; --bs-gutter-x: 0; --bs-gutter-y: 0; }
.pb-branch-list .row > [class*="col-"] { flex: 0 0 265px; width: 265px; max-width: 100%; padding: 0; }
.pb-branch-card .branch-photo { aspect-ratio: auto; height: 200px; border-bottom-width: 27.6px; }
.pb-branch-card .branch-body { padding: 16px 32px 32px; display: flex; flex-direction: column; gap: 12px; }
.pb-branch-card .branch-name { font-size: 24px; line-height: 39.6px; margin: 0; }
.pb-branch-card .branch-address { font-size: 16px; line-height: normal; margin: 0; }
.pb-branch-card .branch-phone { font-size: 16px; gap: 8px; }
.pb-branch-card .c-icon--phone { width: 24px; height: 25px; }
/* Image Callout Grid — team list (About 1148): pad 120, title → 32 → intro (20px) + roster label → 40 → cards 245, gap 20 / rows 32, photo 200; 3-up rosters (Board etc., 1:2423): inset 180, 293 wide, photo 290 */
.pb-team-list { padding: 0 120px; }
.pb-team-list .pb-heading { margin-bottom: 32px; }
.pb-team-list > p.text-center:not(.pb-eyebrow):not(.roster-label) { font-size: 20px !important; line-height: 25px; max-width: 1040px !important; margin: 0 auto 20px !important; }
.pb-team-list .roster-label { font-size: 17.3px; margin: 0 0 40px; }
.pb-team-list .row { display: flex; flex-wrap: wrap; justify-content: center; gap: 32px 20px; margin: 0; --bs-gutter-x: 0; --bs-gutter-y: 0; }
.pb-team-list .row > [class*="col-"] { padding: 0; flex: 0 0 245px; width: 245px; max-width: 100%; }
.pb-team-list .row > .col-lg-4 { flex: 0 0 293px; width: 293px; }
@media (min-width: 1200px) { .pb-team-list > .row { padding-inline: 0; } .pb-team-list .row:has(> .col-lg-4) { padding-inline: 60px; } }
.pb-team-list .pb-staff-card--wide .staff-photo { height: 200px; }
.pb-team-list .staff-body { padding: 16px 32px 24px; }
.pb-team-list .d-flex.mt-5 { margin-top: 40px !important; }
.pb-team-list .btn-pb-lg { height: 56px; padding: 8px 24px; }
/* image+text: swoosh featured is content-driven (OMB frame is 596, home 629) */
.pb-frame--rounded .pb-swoosh { min-height: 0; }
/* --- third pass from the tree diffs ------------------------------------------------------------------------------- */
.pb-parent-header + .pb-blurbs { margin-top: -80px; }                                  /* Frame 423: header + ice blurbs band are one frame, gap 0 */
.pb-branch-card .branch-photo, .pb-team-list .pb-staff-card .staff-photo, .pb-staff-card .staff-photo { box-sizing: content-box; }   /* Figma: Image Area 200 + Color Field 28 below it */
.pb-branch-card .branch-photo { border-bottom-width: 28px; }
.pb-staff-card .staff-photo { border-bottom-width: 28px; }
.pb-staff-card .staff-name { line-height: 33px; }                                     /* 1:1447 h66 = 2 lines */
.pb-staff-card .staff-role { line-height: 20px; }                                     /* 1:1448 h20 */
.pb-five-col .pb-outline-box .box-copy { line-height: 20px; }                         /* 1:1396 h80 = 4 lines (keyfeatures boxes keep 25) */
.pb-five-col .pb-outline-box .box-title { line-height: 16px; }
.pb-option-row { border-top-width: 1px; }                                              /* Stroke vector, 1px */
.pb-image-text .pb-heading { line-height: 49px; }                                     /* Noto Serif 36 "normal" = 49 (1:1432, 1:1497) */
.pb-image-text .pb-heading.mt-5 { margin-top: 32px !important; }                      /* Frame 383 follows at gap 32 */
.pb-image-text .it-second-copy, .pb-image-text .pb-heading.mt-5 + p { margin-bottom: 0; }
/* Small Child Header with Text (instance 1:386 spec): title row py-34 with mb-22, title box min-h 104 (40px serif + 56/64 script);
   callout p-30 gap 10 (20px medium caps + 16px), 270px shorter than the column (260 spacer + 10 gap); photo container 555 wide, right 76.5, pt-12 */
.pb-child-text-header .header-left { padding: 34px 0 0; width: 100%; }
.pb-child-text-header .header-title { min-height: 104px; display: flex; align-items: center; flex-wrap: wrap; margin: 0 0 12px; padding: 0; max-width: 566px; }
.pb-child-text-header .header-callout { padding: 30px; gap: 10px; display: flex; flex-direction: column; width: calc(100% - 270px); max-width: 850px; }
.pb-child-text-header .callout-title { font-size: 20px; font-weight: 500; letter-spacing: 1px; line-height: normal; margin: 0; }
.pb-child-text-header .callout-copy { font-size: 16px; line-height: normal; margin: 0; }
.pb-child-text-header .header-content { align-items: flex-start; }
.pb-child-text-header .header-photo { right: 76.5px; top: 13px; width: 555px; }
/* Home hero (1:4166 render): title cap-top ≈ y65, sub starts y159 (3 lines / 28), buttons y276 → inner padding-top 64, title→sub 30, sub→buttons 42 */
.pb-hero-inner { padding-top: 64px; }
.pb-hero-title.mb-4 { margin-bottom: 30px !important; }
.pb-hero-sub.mb-5 { margin-bottom: 42px !important; }
/* widths: the hero frame is 528 at 1280/1550/1920 (people image is pinned to the frame bottom) */
.pb-hero, .pb-hero-inner { height: 528px; min-height: 0; }
.pb-hero-people { max-height: 100%; width: auto; }
.pb-swoosh-content { width: min(782px, 100%); }

/* ==========================================================================
   NARROW VIEWPORTS — derived from the autolayout (no mobile frames exist in either Figma file, 2026-10-14):
   fixed-size children keep their size, cap at the viewport, wrap and stay centred; "fill" columns take 100%;
   side gutters fall back to --pb-gutter (24px at phone). The desktop numbers above are untouched ≥ 992.
   ========================================================================== */
@media (max-width: 991.98px) {
  .pb-hero, .pb-hero-inner { height: auto; min-height: 0; }
  .pb-hero::after { display: none; }                                                  /* the wave art is composed for the 1200×528 frame only */
  .pb-hero-people { width: min(500px, 80%); max-height: none; }
  .pb-child-text-header .header-callout { width: 100%; }
  .pb-child-text-header .header-title { max-width: none; }
  .pb-swoosh-content { padding: 56px 32px 48px; width: 100%; }
  .pb-featured-item, .pb-featured-item > div { max-width: 100%; min-width: 0; }
  .pb-getstarted, .pb-image-text, .pb-child-intro, .pb-five-col, .pb-team-list, .pb-branch-list, .pb-options, .pb-faq, .pb-blurbs > .pb-gutter { padding-inline: var(--pb-gutter); }
  .pb-getstarted .row > .col-md-5, .pb-image-text .row > .col.split-text, .pb-image-text .row > .col-md-auto, .pb-faq .row > .col-lg-8, .pb-faq .row > .col-lg-4 { width: 100%; flex: 0 0 100%; }
  .pb-image-text .split-photo, .pb-getstarted .split-photo { max-width: 100%; }
  .pb-team-list .row:has(> .col-lg-4) { padding-inline: 0; }
  .pb-blurbs .row > [class*="col-"] { flex: 0 0 100%; width: 100%; }
  .pb-blog .row > [class*="col-"], .pg- main > section[aria-label="Banking options"] .row > [class*="col-"] { max-width: calc(100% - 2 * var(--pb-gutter)); }
  .pb-testimonials .pb-heading + .d-flex { padding-inline: var(--pb-gutter) !important; }
  .pb-gradient-cta--card .cta-inner, .pb-gradient-cta--frame { padding: 48px 24px; }
  .pb-bottom-cta { padding: 48px 24px; }
  .pb-bottom-cta .cta-headline { height: auto; }
}
@media (max-width: 575.98px) {
  .pb-testimonials .pb-heading + .d-flex { gap: 12px !important; }
  .pb-t-card, .pb-t-primary { flex: 0 1 318px; }
  .pb-big-cta .btn-pb-lg, .pb-bottom-cta .btn-pb-lg, .pb-gradient-cta .btn-pb-lg { max-width: calc(100vw - 48px); white-space: normal; height: auto; min-height: 56px; }
}

/* ==========================================================================
   Card grid → Image Callout card (Megan row 17; Figma "Image Callout Grid" item: photo + 28px colour field + text, rounded
   top-right/bottom-right 25, drop shadow). Same card as the branch and team grids; cards 360 wide, gap 20 / rows 32.
   ========================================================================== */
.pb-card-grid { padding: 0 80px !important; }
.pb-card-grid .pb-eyebrow { font-size: 17.3px; line-height: 22px; margin-bottom: 12px !important; }
.pb-card-grid .pb-heading { font-size: 36px; line-height: 43px; margin-bottom: 40px !important; }
.pb-card-grid .pb-heading + .mb-4 { display: none; }
.pb-card-grid .row { display: flex; flex-wrap: wrap; justify-content: center; gap: 32px 20px; margin: 0; --bs-gutter-x: 0; --bs-gutter-y: 0; }
.pb-card-grid .row > [class*="col-"] { flex: 0 0 360px; width: 360px; max-width: 100%; padding: 0; }
.pb-callout-card.pb-info-card { background: #fff; border-radius: 0 25px 25px 0; box-shadow: 0 4px 2px rgba(0, 0, 0, 0.25); }
.pb-callout-card .callout-photo, .pb-callout-card > div[role="img"] { height: 200px !important; border-bottom: 28px solid var(--pb-sky-bright); box-sizing: content-box; }
.pb-callout-card > .p-4 { padding: 16px 32px 32px !important; gap: 12px; }
.pb-callout-card h3 { font-family: var(--pb-font-serif); font-weight: 400; font-size: 24px !important; line-height: 39.6px; color: var(--pb-sky-bright); margin: 0; }
.pb-callout-card p { font-size: 16px; line-height: normal; margin: 0; }
.pb-callout-card .btn-pb { height: 38px; padding: 0 23px; font-size: 18px; margin-top: 4px; }
.pb-callout-card--blue .callout-photo { border-bottom-color: var(--pb-blue); } .pb-callout-card--blue h3 { color: var(--pb-blue); }
.pb-callout-card--orange .callout-photo { border-bottom-color: var(--pb-orange); } .pb-callout-card--orange h3 { color: var(--pb-orange-deep); }
.pb-callout-card--magenta .callout-photo { border-bottom-color: var(--pb-magenta); } .pb-callout-card--magenta h3 { color: var(--pb-magenta); }
@media (max-width: 991.98px) { .pb-card-grid { padding-inline: var(--pb-gutter) !important; } }
.pb-callout-card--blue > div[role="img"] { border-bottom-color: var(--pb-blue); }
.pb-callout-card--orange > div[role="img"] { border-bottom-color: var(--pb-orange); }
.pb-callout-card--magenta > div[role="img"] { border-bottom-color: var(--pb-magenta); }

/* Card shadow (Mike 2026-10-14): Figma uses a single drop-shadow 0 4px 2px rgba(0,0,0,.25) on every card. Drew had four different ones. */
.pb-t-card, .pb-info-card--bar, .pb-staff-card, .pb-branch-card, .pb-scenario-card, .pb-post-card, .pb-value-card, .pb-callout-card.pb-info-card,
.pb-option-row .row-card, .pb-options--outline .pb-option-row .row-card, .pb-contact-card, .pb-blog-card { box-shadow: var(--pb-shadow-card); }
.sc-style--solid .pb-scenario-card { box-shadow: var(--pb-shadow-card); }

/* ==========================================================================
   Scenario cards, solid style = Figma "3 Color Items" card (home 1:4226 geometry; Megan row 22 for 3-item areas):
   360 wide, photo 143, body pad 32 / gap 32, title area 242 + icon 54×58, kicker 16/16 caps, serif title 28/40,
   copy 16 at +16, outline button 38 high. Section = eyebrow/heading + 40, cards centred, gap 20.
   ========================================================================== */
.pb-scenario-row.sc-style--solid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin: 0; --bs-gutter-x: 0; --bs-gutter-y: 0; }
.pb-scenario-row.sc-style--solid > [class*="col-"] { flex: 0 0 360px !important; width: 360px !important; max-width: 100%; padding: 0; }
.sc-style--solid .pb-scenario-card { border-radius: 15px; overflow: hidden; display: flex; flex-direction: column; height: 100%; }
.sc-style--solid .pb-scenario-card .sc-photo { aspect-ratio: auto; height: 143px; }
.sc-style--solid .pb-scenario-card .sc-body { padding: 32px; min-height: 0; display: flex; flex-direction: column; gap: 32px; flex: 1; position: relative; }
.sc-style--solid .pb-scenario-card .sc-kicker { font-size: 16px; line-height: 16px; letter-spacing: 0.8px; font-weight: 700; margin: 0 0 8px; }
.sc-style--solid .pb-scenario-card .sc-title { font-family: var(--pb-font-serif); font-weight: 400; font-size: 28px; line-height: 40px; margin: 0; max-width: 242px; }
.sc-style--solid .pb-scenario-card .sc-copy { font-size: 16px; line-height: 1.55; font-weight: 500; max-width: none; margin: 16px 0 0; flex: 1; white-space: pre-line; }
.sc-style--solid .pb-scenario-card .sc-icon { position: absolute; right: 32px; top: 35px; bottom: auto; width: 54px; height: 58px; }
.sc-style--solid .pb-scenario-card .sc-cta { align-self: flex-start; height: auto; min-height: 38px; padding: 6px 23px; font-size: 18px; line-height: 1.2; border-color: currentColor; color: inherit; max-width: 100%; white-space: normal; text-align: center; }   /* Figma button is hug-content; long labels wrap inside the card instead of clipping */
.sc-style--solid .pb-scenario-card.sc-sky, .sc-style--solid .pb-scenario-card.sc-orange { color: var(--pb-navy); }
.sc-style--solid .pb-scenario-card .sc-cta:hover { background: rgba(255,255,255,0.15); filter: none; }
.pb-scenario-row.sc-style--solid + .d-flex { margin-top: 40px !important; }
/* image+text photo (Figma 1:1429 / 1:1494): rounded top-right + bottom-right 25, left corners square */
.pb-image-text .split-photo, .pb-getstarted .split-photo { border-radius: 0 25px 25px 0; }

/* ==========================================================================
   Image + text = Figma "Left Photo and Text" (About 1:1428; Mike 2026-10-14): photo 438×283 top-aligned, gap 32, text column
   fills; heading 36 serif → 16 → body Outfit Light 16 (paragraphs 12 apart) → 32 → outline button 38. Child template keeps 354.
   ========================================================================== */
.pb-image-text .row { align-items: flex-start !important; }
.pb-image-text .row > .col-md-auto { width: 438px; flex: 0 0 438px; max-width: 100%; }
.pb-image-text .split-photo { width: 438px; max-width: 100%; height: 283px; }
main:has(.pb-child-text-header) .pb-image-text .row > .col-md-auto { width: 354px; flex: 0 0 354px; }
main:has(.pb-child-text-header) .pb-image-text .split-photo { width: 354px; }
.pb-image-text .row > .col.split-text { width: auto; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.pb-image-text .split-text > * { margin: 0 !important; }
.pb-image-text .pb-heading { font-size: 36px; line-height: normal; letter-spacing: -0.36px; }
.pb-image-text .split-copy, .pb-image-text .split-extra { font-size: 16px; font-weight: 300; line-height: normal; }
.pb-image-text .split-extra > * { margin: 0 0 12px; } .pb-image-text .split-extra > *:last-child { margin-bottom: 0; }
.pb-image-text .split-extra ul { padding-left: 24px; }
.pb-image-text .split-ctas { margin-top: 16px !important; display: flex; gap: 16px; flex-wrap: wrap; }   /* 16 (column gap) + 16 = the comp's 32 before the button */
.pb-image-text .split-ctas .btn-pb { height: 38px; padding: 0 23px; font-size: 18px; }
.pb-image-text .split-text .pb-heading.mt-5 { margin-top: 16px !important; }
@media (max-width: 991.98px) { .pb-image-text .row > .col-md-auto, .pb-image-text .split-photo { width: 100%; flex-basis: 100%; } }

/* ==========================================================================
   RESPONSIVE GRID MODEL (Mike 2026-10-14: the new section was fixed-width while the rest flexed).
   One rule for every card grid: N columns per row as drawn in Figma, each column capped at its Figma width and centred
   (so at 1280/1550/1920 the cards are exactly the comp), shrinking EQUALLY when the row is narrower than the comp
   (1024, 768), and stacking to one or two columns on phones. Overrides the fixed flex-basis rules above.
   ========================================================================== */
.pg- main > section[aria-label="Banking options"] .row, .pb-blog .row, .pb-card-grid .row, .pb-scenario-row.sc-style--solid,
.pb-industry .row, .pb-stats .row, .pb-branch-list .row, .pb-team-list .row, .pb-blurbs .row, .pb-keyfeatures .row, .pb-five-col .row {
  display: grid; grid-template-columns: repeat(var(--n), minmax(0, var(--card-w))); justify-content: center; align-items: stretch;
}
.pg- main > section[aria-label="Banking options"] .row, .pb-blog .row, .pb-card-grid .row, .pb-scenario-row.sc-style--solid { --n: 3; --card-w: 360px; }
.pb-industry .row, .pb-stats .row, .pb-branch-list .row { --n: 4; --card-w: 265px; }
.pb-team-list .row { --n: 4; --card-w: 245px; }  .pb-team-list .row:has(> .col-lg-4) { --n: 3; --card-w: 293px; }
.pb-blurbs .row { --n: 2; --card-w: 550px; }
.pb-keyfeatures .row { --n: 4; --card-w: 208px; }  .pb-keyfeatures .row:has(> :nth-child(5):last-child) { --n: 5; }
.pb-five-col .row { --n: 4; --card-w: 208px; }
:is(.pg- main > section[aria-label="Banking options"] .row, .pb-blog .row, .pb-card-grid .row, .pb-scenario-row.sc-style--solid, .pb-industry .row, .pb-stats .row, .pb-branch-list .row, .pb-team-list .row, .pb-blurbs .row, .pb-keyfeatures .row, .pb-five-col .row) > [class*="col-"]
  { width: auto !important; max-width: none !important; flex: none !important; min-width: 0; }
.pb-t-card, .pb-t-primary { flex: 0 1 318px; min-width: 0; }
.pb-testimonials .pb-heading + .d-flex { padding-inline: clamp(24px, 6.25vw, 80px) !important; }
@media (max-width: 991.98px) {
  .pb-industry .row, .pb-stats .row, .pb-branch-list .row, .pb-team-list .row, .pb-keyfeatures .row, .pb-five-col .row { --n: 2; }
  .pb-blurbs .row { --n: 1; }
  .pg- main > section[aria-label="Banking options"] .row, .pb-blog .row, .pb-card-grid .row, .pb-scenario-row.sc-style--solid { --n: 1; }
  .pb-blurbs .row > [class*="col-"] { width: auto; flex: none; }
}
@media (max-width: 575.98px) {
  .pb-industry .row, .pb-stats .row, .pb-branch-list .row, .pb-team-list .row, .pb-keyfeatures .row, .pb-five-col .row { --n: 1; }
  .btn-pb { max-width: 100%; white-space: normal; height: auto; min-height: 38px; text-align: center; }
}
/* column counts below the comp width must beat the :has() specificity above; gutters on the zero-padding sections */
.pb-keyfeatures, .pb-stats, .pb-industry { padding-inline: var(--pb-gutter); }
@media (max-width: 991.98px) {
  .pb-keyfeatures .row:has(> :nth-child(5):last-child), .pb-team-list .row:has(> .col-lg-4) { --n: 2; }
}
@media (max-width: 575.98px) {
  .pb-keyfeatures .row:has(> :nth-child(5):last-child), .pb-team-list .row:has(> .col-lg-4) { --n: 1; }
}

/* ==========================================================================
   IMAGE + TEXT, RESPONSIVE (Mike 2026-10-14: "not responsive" on Personal Checking). Exact Figma at 1280+ (438×283 photo,
   354×283 on child-text pages); below the comp width the photo scales with the row instead of holding 438px; below 1100 it
   stacks, photo full width at the Figma proportions (capped so tablets don't get a poster), text kept to a readable measure,
   gutters match the sections around it. The button grows instead of clipping when its label wraps.
   Photo is sized by width + ratio OR width + height, never ratio + height (Safari resolves that pair differently).
   ========================================================================== */
.pb-image-text .row > .col-md-auto { flex: 0 0 42.12%; width: 42.12%; }     /* 438 / 1040: photo and text keep the comp's split at EVERY width (Mike: it must respond above 1280 too) */
.pb-image-text .split-photo { width: 100%; height: auto; aspect-ratio: 438 / 283; align-self: flex-start; }
main:has(.pb-child-text-header) .pb-image-text .row > .col-md-auto { flex-basis: 34.04%; width: 34.04%; }   /* 354 / 1040 */
@media (min-width: 1281px) { .pb-image-text .row { align-items: center !important; } }   /* photo outgrows the copy above the comp: centre the copy against it */
main:has(.pb-child-text-header) .pb-image-text .split-photo { width: 100%; aspect-ratio: 354 / 283; }
.pb-image-text .split-ctas .btn-pb { height: auto; min-height: 38px; padding: 7px 23px; line-height: 1.2; max-width: 100%; white-space: normal; text-align: center; }
@media (max-width: 1099.98px) {
  .pb-image-text.pb-gutter { padding-inline: var(--pb-gutter); }
  .pb-image-text .row > .col-md-auto, main:has(.pb-child-text-header) .pb-image-text .row > .col-md-auto,
  .pb-image-text .row > .col.split-text { flex: 0 0 100%; width: 100%; }
  .pb-image-text .split-photo, main:has(.pb-child-text-header) .pb-image-text .split-photo {
    aspect-ratio: auto; height: round(down, min(420px, calc((100vw - 2 * var(--pb-gutter)) * 283 / 438)), 1px); }   /* whole px: a fractional height puts every later section on a half pixel */
  .pb-image-text .row > .col.split-text { max-width: 720px; }
  .pb-image-text .pb-heading, .pb-image-text .split-ctas .btn-pb { text-wrap: balance; }   /* no orphan "life"; Figma's greedy breaks kept ≥1100 */
}
@media (max-width: 575.98px) {
  .pb-image-text .pb-heading { font-size: 32px; letter-spacing: -0.32px; }
}

/* ---------- HSA "Get started" qualify layout (2026-10-19, Ben) ----------
   The .pb-getstarted .row rules above were written for the photo layout but match every .row in the section:
   they set the columns to width:auto and the card row to nowrap, so the 4 qualify cards ran 3,325px wide at 1280.
   Scoped to data-layout="qualify", sized to the fresh build (.tchart / .qual-grid): two 500 columns, gap 40,
   centred; cards 2 x 2, gap 24; stack below 1024, one card per row below 641. */
.pb-getstarted .row[data-layout="qualify"] { flex-wrap: nowrap; justify-content: center; align-items: center; gap: 40px; }
.pb-getstarted .row[data-layout="qualify"] > [class*="col-"] { flex: 0 1 500px; width: auto; min-width: 0; margin-left: 0; }
.pb-getstarted [data-layout="qualify"] > .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.pb-getstarted [data-layout="qualify"] > .row > [class*="col-"] { width: auto; min-width: 0; }
@media (max-width: 1023.98px) {
  .pb-getstarted .row[data-layout="qualify"] { flex-direction: column; align-items: stretch; }
  .pb-getstarted .row[data-layout="qualify"] > [class*="col-"] { flex: none; width: 100%; }
}
@media (max-width: 640.98px) {
  .pb-getstarted [data-layout="qualify"] > .row { grid-template-columns: 1fr; }
}