/* ==========================================================================
   Resources group — customer stories, FAQ, blog, partners
   ========================================================================== */

/* Resources sub-navigation (extends the shared .jump bar) ---------------- */

.res-jump a[aria-current="page"] { font-weight: 700; color: var(--petrol); background: #DDF3EF; }
.res-jump a[aria-current="page"]:hover { background: #DDF3EF; }

/* Shared banner above the sub-navigation -------------------------------- */

.res-banner {
  position: relative; overflow: hidden;
  border-radius: 32px 32px 0 0;
  background-color: var(--slate);
  background-image: radial-gradient(rgba(20,184,162,.22) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  color: var(--white);
}
.res-banner__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.res-banner__shade { position: absolute; inset: 0; background: rgba(15,23,41,.55); }
.res-banner__body { position: relative; padding: 56px; }

/* Stories: featured story */
.res-banner--story { min-height: 440px; }
.res-banner--story .res-banner__body { max-width: 760px; }
.res-banner__quote { margin-top: 22px; font-size: 40px; line-height: 1.15; font-weight: 700; color: var(--white); }
.res-banner__meta { display: flex; flex-wrap: wrap; gap: 24px 40px; margin-top: 28px; align-items: flex-end; }
.res-banner__stat { font-size: 44px; font-weight: 700; color: var(--teal-bright); }
.res-banner__stat-label { font-size: 15px; color: var(--mist); }
.res-banner__link { padding: 8px 0; font-size: 16px; font-weight: 600; color: var(--white); }
.res-banner__link:hover { color: var(--teal-bright); }

/* Partners: statement banner */
.res-banner--partners { min-height: 360px; }
.res-banner--partners .res-banner__body {
  min-height: 360px; display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: flex-end;
}
.res-banner__copy { flex: 1 1 520px; }
.res-banner__statement { margin-top: 18px; font-size: 36px; line-height: 1.2; font-weight: 700; color: var(--white); }

/* Customer stories ------------------------------------------------------ */

.res-stories {
  display: grid; gap: 24px; margin-top: 40px;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
}
.res-story {
  text-decoration: none; background: var(--white); border-radius: 28px; overflow: hidden;
  box-shadow: 0 20px 48px rgba(15,23,41,.08);
  display: flex; flex-direction: column;
  transition: transform .2s ease;
}
.res-story[hidden] { display: none; }
.res-story:hover { transform: translateY(-4px); }
.res-story__media { position: relative; height: 220px; }
.res-story__media img { width: 100%; height: 100%; object-fit: cover; }
.res-story__name {
  position: absolute; left: 16px; bottom: 16px;
  padding: 6px 12px; border-radius: 999px; background: var(--white);
  font-size: 13px; font-weight: 700; color: var(--navy);
  box-shadow: 0 4px 12px rgba(15,23,41,.15);
}
.res-story__body { padding: 28px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.res-story__stat {
  display: block; font-size: 40px; line-height: 1; font-weight: 700; letter-spacing: -0.03em;
  color: var(--navy); white-space: nowrap;
}
.res-story__text { display: block; margin-top: 14px; font-size: 17px; line-height: 1.5; color: var(--slate); }
.res-story__more { margin-top: auto; font-size: 15px; font-weight: 600; color: var(--petrol); }

/* FAQ ------------------------------------------------------------------- */

.res-banner--search { min-height: 200px; }
.res-search { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; }
.res-search__copy { flex: 1 1 420px; }
.res-search__title { font-size: 30px; line-height: 1.2; font-weight: 700; color: var(--white); }
.res-search__sub { margin-top: 8px; font-size: 16px; color: var(--mist); }
.res-search__form { flex: 1 1 460px; display: flex; flex-wrap: wrap; gap: 10px; }
.res-search__form input {
  flex: 1 1 220px; min-width: 0; font: inherit; font-size: 16px; color: var(--ink);
  padding: 16px 20px; border: 0; border-radius: 999px; background: var(--white);
}
.res-search__form .btn { padding: 16px 26px; }

.res-chips--lg .chip { font-size: 15px; padding: 12px 18px; }
.res-chips--lg .chip[aria-pressed="true"] { font-weight: 700; }

.res-faq {
  margin-top: 32px; padding: 8px 36px; border-radius: 28px;
  background: var(--white); box-shadow: 0 24px 60px rgba(15,23,41,.08);
}
.res-faq__item { border-bottom: 1px solid var(--line); }
.res-faq__item[hidden] { display: none; }
.res-faq__item h3 { margin: 0; font-size: inherit; font-weight: inherit; }
.res-faq__btn {
  font: inherit; width: 100%; padding: 24px 0;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  background: transparent; border: 0; cursor: pointer; text-align: left; color: inherit;
}
.res-faq__cat { display: block; font-size: 12px; font-weight: 600; color: var(--petrol); }
.res-faq__q { display: block; margin-top: 4px; font-size: 20px; line-height: 1.3; font-weight: 700; color: var(--navy); }
.res-faq__btn:hover .res-faq__q { color: var(--petrol); }
.res-faq__sign {
  flex: none; width: 36px; height: 36px; border-radius: 999px;
  background: #DDF3EF; color: var(--petrol);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 600; line-height: 1;
}
.res-faq__sign::before { content: "+"; }
.res-faq__btn[aria-expanded="true"] .res-faq__sign::before { content: "\2212"; }
.res-faq__a { max-width: 820px; padding-bottom: 24px; }
.res-faq__a p { font-size: 17px; line-height: 1.65; }
.res-faq__more { display: inline-block; margin-top: 10px; padding: 4px 0; font-size: 15px; font-weight: 600; }
.res-faq__empty { padding: 24px 0; font-size: 16px; color: var(--slate); }

/* Without JS: show every answer and drop the controls that need scripting */
html:not(.js) .res-faq__a[hidden] { display: block; }
html:not(.js) .res-needs-js { display: none; }

/* Blog ------------------------------------------------------------------ */

.res-featured { display: flex; flex-wrap: wrap; min-height: 380px; }
.res-featured__media { flex: 1 1 460px; min-height: 360px; position: relative; }
.res-featured__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.res-featured__body { flex: 1 1 420px; padding: 48px; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.res-featured__meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 13px; color: var(--mist); }
.res-featured__title { font-size: 34px; line-height: 1.15; font-weight: 700; color: var(--white); }
.res-featured__text { font-size: 16px; line-height: 1.55; color: var(--mist); }
.res-featured__link { align-self: flex-start; padding: 4px 0; font-size: 16px; font-weight: 600; color: var(--teal-bright); }
.res-featured__link:hover { color: var(--white); }

.res-posts { margin-top: 32px; }
.res-post {
  display: flex; flex-wrap: wrap; gap: 24px; align-items: center;
  padding: 24px 0; border-top: 1px solid var(--line-strong); text-decoration: none;
}
.res-post[hidden] { display: none; }
.res-post__media { flex: 0 0 240px; height: 150px; border-radius: 18px; overflow: hidden; }
.res-post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.res-post:hover .res-post__media img { transform: scale(1.04); }
.res-post__body { flex: 1 1 360px; display: flex; flex-direction: column; gap: 10px; }
.res-post__body .pill { align-self: flex-start; }
.res-post__title { font-size: 24px; line-height: 1.25; font-weight: 700; color: var(--navy); }
.res-post:hover .res-post__title { color: var(--petrol); }
.res-post__text { font-size: 15px; line-height: 1.5; color: var(--ink); }
.res-post__arrow { font-size: 22px; color: var(--petrol); }

.res-newsletter { margin-top: 64px; padding: 44px; }
.res-newsletter .newsletter__copy h2 { font-size: 32px; line-height: 1.2; }

/* Partners -------------------------------------------------------------- */

.res-types {
  display: flex; flex-wrap: wrap; margin-top: 48px;
  background: var(--white); border-radius: 28px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(15,23,41,.08);
}
.res-type { flex: 1 1 280px; padding: 36px; }
.res-type + .res-type { border-left: 1px solid var(--line); }
.res-type__num { font-size: 13px; font-weight: 700; color: var(--petrol); }
.res-type h3 { margin-top: 10px; font-size: 24px; line-height: 1.25; font-weight: 700; color: var(--navy); }
.res-type h3 a { color: inherit; text-decoration: none; }
.res-type h3 a:hover { color: var(--petrol); text-decoration: underline; }
.res-type p { margin-top: 12px; font-size: 16px; line-height: 1.6; }

.res-benefits { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 40px; }
.res-benefit {
  flex: 1 1 240px; padding-top: 20px; border-top: 2px solid var(--teal-bright);
  font-size: 18px; font-weight: 700; color: var(--white);
}
.res-subhead { margin-top: 72px; font-size: 18px; font-weight: 600; color: var(--white); }
.res-steps { margin-top: 28px; }

.res-apply {
  display: flex; flex-wrap: wrap; border-radius: 32px; overflow: hidden;
  box-shadow: 0 40px 80px rgba(15,23,41,.15);
}
.res-apply__intro {
  flex: 1 1 320px; padding: 44px; background: var(--navy);
  display: flex; flex-direction: column; gap: 14px;
}
.res-apply__intro h2 { font-size: 34px; line-height: 1.15; font-weight: 700; color: var(--white); }
.res-apply__intro p { font-size: 16px; line-height: 1.6; color: var(--mist); }
.res-apply .form { flex: 2 1 520px; padding: 44px; gap: 18px; border-top: 0; }
.res-apply .form__row .field { flex-basis: 220px; }

/* Responsive ------------------------------------------------------------ */

@media (max-width: 720px) {
  .res-banner__body { padding: 32px 24px; }
  .res-banner--story { min-height: 0; }
  .res-banner__quote { font-size: 28px; }
  .res-banner__stat { font-size: 36px; }
  .res-banner--partners, .res-banner--partners .res-banner__body { min-height: 300px; }
  .res-banner__statement { font-size: 28px; }

  .res-story__media { height: 190px; }
  .res-story__body { padding: 24px; }
  .res-story__stat { font-size: 34px; white-space: normal; }

  .res-search__title { font-size: 24px; }
  .res-search__form .btn { flex: 1 1 100%; }
  .res-faq { padding: 4px 20px; }
  .res-faq__q { font-size: 18px; }
  .res-faq__btn { padding: 20px 0; }
  .res-faq__a p { font-size: 16px; }

  .res-featured__media { flex-basis: 100%; min-height: 220px; }
  .res-featured__body { padding: 32px 24px; }
  .res-featured__title { font-size: 26px; }
  .res-post { gap: 16px; }
  .res-post__media { flex: 1 1 100%; height: 180px; }
  .res-post__body { flex-basis: 100%; }
  .res-post__title { font-size: 20px; }
  .res-post__arrow { display: none; }
  .res-newsletter { padding: 32px 24px; }
  .res-newsletter .newsletter__copy h2 { font-size: 26px; }

  .res-type { padding: 28px 24px; }
  .res-type + .res-type { border-left: 0; border-top: 1px solid var(--line); }
  .res-subhead { margin-top: 56px; }
  .res-apply__intro, .res-apply .form { padding: 32px 24px; }
  .res-apply__intro h2 { font-size: 28px; }
}

/* Step headings sit under the "How it works" h3, so they are h4s styled like .step h3 */
.res-steps .step h4 { font-size: 22px; line-height: 1.25; font-weight: 600; color: var(--white); margin: 0; }