/* Westlake Capital Finance — website revamp
   Coded from "Westlake Capital Finance Revamp.fig" (1440px desktop frames). */

:root {
  --navy: #051b30;
  --blue-700: #2f62d3;
  --blue-400: #438ef6;
  --blue-100: #cee2fd;
  --blue-50: #e6f0fe;
  --amber: #faad28;
  --ink: #000;
  --gray-700: #444;
  --gray-900: #222;
  --rule: #d9d9d9;
  --white: #fff;

  --gutter: 90px;         /* page side margin at 1440 */
  --gap: 40px;            /* card gutter */
  --section: 80px;        /* vertical section padding */
  --header-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: var(--ink);
  background: var(--white);
}
body.is-locked { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--blue-400); outline-offset: 2px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.section { padding: var(--section) 0; }
.section--tint { background: var(--blue-50); }
.section--navy { background: var(--navy); color: var(--white); }
.center { text-align: center; }

/* ---------- Type ---------- */
.h2 { font-size: 32px; font-weight: 600; line-height: 39px; }
.h2--xl { font-size: 40px; line-height: 48px; }
.eyebrow {
  margin-bottom: 28px;
  font-size: 15px;
  font-weight: 600;
  line-height: 18px;
  color: var(--blue-700);
}
.section--navy .eyebrow { color: var(--blue-400); }
.lead { font-size: 18px; line-height: 24px; }
.section-intro { max-width: 759px; margin: 6px auto 0; font-size: 18px; line-height: 24px; }
.section-intro--sm { max-width: 728px; margin-top: 11px; font-size: 16px; }
.mark { background: linear-gradient(var(--amber), var(--amber)) 0 62% / 100% 62% no-repeat; padding: 0 3px; margin: 0 -3px; }
.mark--inline { background-size: 100% 100%; background-position: 0 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 250px;
  height: 58px;
  padding: 0 20px;
  font-family: inherit;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  color: var(--white);
  background: var(--blue-700);
  border: 0;
  border-radius: 8px;
  box-shadow: 0 0 8px rgba(0, 0, 0, .1);
  cursor: pointer;
  transition: filter .15s ease, transform .15s ease, box-shadow .15s ease;
}
.btn:hover { filter: brightness(.92); box-shadow: 0 2px 12px rgba(0, 0, 0, .2); }
.btn:active { transform: translateY(1px); }
.btn--amber { background: var(--amber); color: var(--navy); }
.btn--sky { background: var(--blue-400); box-shadow: 0 0 8px rgba(0, 0, 0, .15); }
.btn--navy { background: var(--navy); border-radius: 4px; box-shadow: 0 0 8px rgba(0, 0, 0, .2); }
.btn--wide { min-width: 334px; }
.btn--outline { box-shadow: 0 0 0 .5px var(--white), 0 0 6px rgba(0, 0, 0, .2); }
.btn-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 30px; }
.btn-row--start { justify-content: flex-start; }

.arrow-link {
  font-size: 18px;
  font-weight: 600;
  line-height: 22px;
  color: var(--blue-700);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.arrow-link::after { content: " →"; display: inline-block; white-space: pre; transition: transform .15s ease; }
a:hover > .arrow-link::after, .arrow-link:hover::after, .feature-card:hover .arrow-link::after { transform: translateX(4px); }

/* ---------- Top Menu Bar ---------- */
.top-menu {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  background: var(--white);
  box-shadow: 0 4px 4px rgba(0, 0, 0, .08);
}
.top-menu__inner { height: 100%; display: flex; align-items: center; gap: 24px; }
.top-menu__logo { flex: none; }
.top-menu__logo img { width: 127px; height: 44px; }
.top-menu__nav { margin-left: auto; display: flex; align-items: center; gap: 52px; }
.top-menu__link {
  display: inline-flex;
  align-items: center;
  height: var(--header-h);
  padding: 0;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  background: none;
  border: 0;
  cursor: pointer;
}
.top-menu__link:hover, .top-menu__link[aria-current="page"], .top-menu__item.is-open > .top-menu__link { color: var(--blue-700); }
.top-menu__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 49px;
  padding: 0 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--white);
  text-decoration: none;
  white-space: nowrap;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}
.top-menu__btn--primary { min-width: 184px; background: var(--blue-700); }
.top-menu__btn--phone { min-width: 147px; background: var(--blue-400); }
.top-menu__btn:hover { filter: brightness(.93); }
.top-menu__item { position: relative; }
.top-menu__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 231px;
  padding: 12px 0 13px;
  background: var(--white);
  box-shadow: 0 4px 4px rgba(0, 0, 0, .08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.top-menu__item:hover > .top-menu__dropdown,
.top-menu__item:focus-within > .top-menu__dropdown,
.top-menu__item.is-open > .top-menu__dropdown { opacity: 1; visibility: visible; transform: none; }
.top-menu__dropdown a {
  display: block;
  padding: 5px 20px 4px;
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  text-decoration: none;
}
.top-menu__dropdown a:hover { color: var(--blue-700); }
.top-menu__toggle { display: none; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 600px;
  margin-top: calc(-1 * var(--header-h));
  padding-top: var(--header-h);
  color: var(--white);
  background: var(--navy) center / cover no-repeat;
  isolation: isolate;
}
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(0, 0, 0, var(--shade, 0)); }
.hero--home { background-image: url("../assets/img/hero-home.jpg"); --shade: .24; }
.hero--abl { background-image: url("../assets/img/hero-abl.jpg"); --shade: .36; }
.hero--cre { background-image: url("../assets/img/hero-cre.jpg"); --shade: .2; }
.hero--contact { background-image: url("../assets/img/hero-contact.jpg"); }
.hero--contact::before { background: linear-gradient(270deg, rgba(67, 142, 246, .2) 0%, rgba(47, 98, 211, .8) 85.7%); }
.hero__inner { position: relative; padding-top: 66px; padding-bottom: 60px; }
.hero__title { font-size: 60px; font-weight: 700; line-height: 55px; letter-spacing: 0; }
.hero__title--semi { font-weight: 600; }
.hero__text { max-width: 477px; margin-top: 20px; font-size: 18px; line-height: 24px; }
.hero__text--bullet { position: relative; padding-left: 20px; }
.hero__text--bullet::before { content: ""; position: absolute; left: 0; top: 6px; width: 10px; height: 10px; background: var(--amber); }
.hero__cta { margin-top: 46px; }
.hero--abl .hero__inner { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.hero--abl .hero__text { max-width: 457px; padding-left: 0; }
.hero--abl .hero__text--bullet::before { position: static; display: inline-block; margin-right: 6px; vertical-align: 1px; }
.hero--abl .hero__cta { margin-top: 60px; }
.hero--cre .hero__inner { padding-top: 41px; }
.hero--cre .hero__text { max-width: 561px; }
.hero--cre .hero__cta { margin-top: 60px; }
.hero--about .hero__inner { padding-top: 56px; display: grid; grid-template-columns: minmax(0, 1fr) 431px; align-items: start; column-gap: 40px; padding-right: calc(var(--gutter) + 103px); }
.hero--about .hero__text { max-width: 607px; margin: 16px 0 0 1px; }
.hero--about .hero__cta { margin-top: 16px; }
.hero__logo { width: 431px; margin-top: 70px; }
.hero--contact .hero__inner { padding-top: 121px; }
.hero--contact .hero__text { max-width: 607px; margin: 24px 0 0 1px; }
.hero--contact .hero__cta { margin-top: 24px; }

/* ---------- Intro (headline + supporting copy) ---------- */
.intro { padding: var(--section) 0; }
.intro__grid { display: grid; grid-template-columns: minmax(0, 650px) minmax(0, 1fr); align-items: center; }
.intro__headline { padding-left: 89px; max-width: 540px; }
.intro__headline--abl, .intro__headline--cre { padding-left: 55px; max-width: none; }
.intro__headline--home { align-self: start; margin-top: 33px; }
.intro__kicker { font-size: 24px; font-weight: 500; line-height: 29px; }
.intro__body { max-width: 610px; margin-top: 19px; font-size: 18px; line-height: 24px; }
.intro__cta { margin-top: 38px; }
.rule { height: 0; margin: 0; border: 0; border-top: 1px solid var(--rule); }
.intro .rule { margin-top: var(--section); }
.intro--boxed { padding: 85px 0 0; }
.intro--boxed .intro__grid { grid-template-columns: minmax(0, 610px) minmax(0, 650px); }
.intro--boxed .rule { margin-top: 85px; }

.fact-box {
  padding: 35px 27px 33px 40px;
  background: var(--white);
  border: 1px solid var(--blue-400);
  border-radius: 14px;
}
.fact-box--cre { padding: 28px 27px 22px 41px; }
.fact-box__lead { font-size: 18px; font-weight: 600; line-height: 24px; }
.bullets { margin-top: 19px; padding-left: 21px; }
.fact-box--cre .bullets { margin-top: 12px; padding-left: 20px; }
.bullets li { position: relative; padding-left: 22px; font-size: 18px; line-height: 22px; }
.bullets li + li { margin-top: 16px; }
.fact-box--cre .bullets li { padding-left: 17px; }
.fact-box--cre .bullets li + li { margin-top: 13px; }
.bullets li::before { content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; background: var(--blue-400); }
.bullets .is-strong { font-weight: 600; }
.bullets--light li { font-weight: 500; padding-left: 17px; }
.bullets--light li + li { margin-top: 11px; }
sup { font-size: .6em; line-height: 0; }

/* ---------- Feature cards (image + copy + link) ---------- */
.feature-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap) 39px; margin-top: var(--section); }
.feature-card {
  display: flex;
  flex-direction: column;
  min-height: 508px;
  padding: 23px 23px 41px;
  color: inherit;
  text-align: left;
  text-decoration: none;
  background: var(--white);
  border: 1px solid var(--blue-400);
  border-radius: 14px;
  cursor: pointer;
  transition: box-shadow .2s ease;
}
.feature-card:hover, .feature-card:focus-visible { box-shadow: 0 0 13px rgba(67, 142, 246, .2); }
.feature-card--soft:hover, .feature-card--soft:focus-visible { box-shadow: 0 4px 14px rgba(0, 0, 0, .1); }
.feature-card__img { display: block; width: 100%; aspect-ratio: 564 / 213; border-radius: 7px; background: var(--blue-100) center / cover no-repeat; }
.feature-card__img--cre { background-image: url("../assets/img/card-cre.jpg"); }
.feature-card__img--abl { background-image: url("../assets/img/card-abl.jpg"); background-size: 100% 147.78%; background-position: 0 8.14%; }
.feature-card__img--start { background-image: url("../assets/img/card-start.jpg"); }
.feature-card__title { margin-top: 16px; font-size: 24px; font-weight: 600; line-height: 29px; }
.feature-card__sub { margin-top: 7px; font-size: 18px; font-weight: 600; line-height: 22px; color: var(--blue-700); }
.feature-card__text { margin-top: 12px; font-size: 16px; line-height: 24px; }
.feature-card--soft .feature-card__text { margin-top: 7px; }
.feature-card .arrow-link { margin-top: auto; padding-top: 24px; align-self: flex-start; }

/* ---------- Info cards ---------- */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.section .cards { margin-top: 50px; }
.card {
  position: relative;
  min-height: 244px;
  padding: 26px 44px 26px 27px;
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--blue-400);
  border-radius: 14px;
  text-align: left;
}
.card--r8 { border-radius: 8px; }
.card--tint { background: var(--blue-100); border-color: transparent; }
.card__icon { height: 43px; display: flex; align-items: flex-end; margin: 0 0 21px -3px; }
.card__icon img { margin-bottom: -3px; max-height: 56px; width: auto; }
.card__title { margin-right: -34px; font-size: 18px; font-weight: 600; line-height: 22px; }
.card__text { margin-top: 7px; font-size: 16px; line-height: 24px; }
.card__meta { display: grid; grid-template-columns: auto 1fr; gap: 7px 6px; margin-top: 7px; font-size: 18px; line-height: 22px; }
.card__meta dt { font-weight: 600; }
.card__meta a { font-weight: 500; color: var(--blue-700); text-decoration: none; overflow-wrap: anywhere; }
.card__meta a:hover { text-decoration: underline; }
.card--action { display: flex; flex-direction: column; padding-bottom: 19px; }
.card--action .arrow-link { margin-top: auto; padding-top: 12px; align-self: flex-start; }
.section__cta { margin-top: 50px; display: flex; justify-content: center; }

/* compact cards (About: "Why Businesses Work with WCF") and process steps */
.card--compact { min-height: 172px; padding: 20px 27px 15px; border-radius: 4px; }
.card--compact .card__icon { height: 30px; margin-bottom: 14px; }
.card--compact .card__title { line-height: 24px; }
.card--compact .card__text { margin-top: 10px; line-height: 19px; }

/* dark outline cards (Home: "The Benefits") */
.benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px var(--gap); margin-top: 56px; }
.benefit { min-height: 210px; padding: 26px 43px 24px; border: .5px solid var(--white); border-radius: 14px; }
.benefit__icon { height: 51px; display: flex; align-items: flex-end; margin: 0 0 13px -3px; }
.benefit__icon img { margin-bottom: -3px; }
.benefit__title { font-size: 18px; font-weight: 600; line-height: 22px; }
.benefit__text { margin-top: 12px; font-size: 16px; line-height: 19px; }

/* cards whose back face slides in on hover / focus / tap */
.flip { overflow: hidden; cursor: pointer; }
.flip__back {
  position: absolute;
  inset: -1px;
  padding: 90px 27px 20px;
  color: var(--white);
  background: var(--blue-400);
  border-radius: inherit;
  transform: translateY(101%);
  transition: transform .3s ease;
}
.flip--amber .flip__back { padding-top: 76px; color: var(--ink); background: var(--amber); }
.flip:hover .flip__back, .flip:focus-visible .flip__back, .flip.is-flipped .flip__back { transform: none; }
/* asset class cards fade the back face in instead of sliding it */
.asset-grid .flip__back { transform: none; opacity: 0; transition: opacity .3s ease; }
.asset-grid .flip:hover .flip__back, .asset-grid .flip:focus-visible .flip__back, .asset-grid .flip.is-flipped .flip__back { opacity: 1; }
.flip__title { font-size: 18px; font-weight: 600; line-height: 22px; }
.flip__list { margin-top: 7px; }
.flip__list li { position: relative; padding-left: 20px; font-size: 16px; line-height: 23px; }
.flip__list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; background: var(--amber); }
.flip--amber .flip__list li::before { background: var(--blue-700); }

/* ---------- ABL: asset classes ---------- */
.asset-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 51px var(--gap); padding-top: 79px; }
.asset-grid__title { align-self: center; padding-left: 55px; }

/* media grids */
.media { background: var(--blue-100) center / cover no-repeat; min-height: 244px; }
.media--abl { background-image: url("../assets/img/why-abl.jpg"); background-size: 160.85% 144.22%; background-position: 30.96% 32.21%; aspect-ratio: 392 / 244; }
.media--cre { background-image: url("../assets/img/why-cre.jpg"); }
.media--about { background-image: url("../assets/img/why-about.jpg"); background-position: 33% 50%; }
.split { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px var(--gap); margin-top: 52px; }
.split > .media { grid-column: 3; grid-row: 1 / span 2; }
.split--tight { gap: 25px var(--gap); margin-top: 52px; }

/* getting started band */
.band { padding: 56px 0 55px; }
.band__grid { display: grid; grid-template-columns: minmax(0, 586px) minmax(0, 1fr); column-gap: 0; padding-left: calc(var(--gutter) + 64px); align-items: start; }
.band__text { max-width: 333px; margin-top: 7px; font-size: 18px; font-weight: 600; line-height: 24px; }
.band .bullets { margin-top: 4px; padding-left: 0; max-width: 520px; }

/* ---------- CRE: process ---------- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-top: 34px; counter-reset: step; }
.step { counter-increment: step; display: flex; flex-direction: column; }
.step::before {
  content: counter(step);
  height: 26px;
  margin-bottom: 13px;
  font-size: 18px;
  font-weight: 700;
  line-height: 26px;
  text-align: center;
  color: var(--white);
  background: var(--blue-400);
  border-radius: 4px;
  box-shadow: 0 0 5px rgba(0, 0, 0, .15);
}
.step__body { flex: 1; min-height: 172px; padding: 25px 26px 26px 27px; color: var(--ink); background: var(--white); border: 1px solid var(--blue-400); border-radius: 4px; }
.step__title { font-size: 18px; font-weight: 600; line-height: 24px; }
.step__text { position: relative; margin-top: 15px; padding-left: 17px; font-size: 16px; line-height: 19px; }
.step__text::before { content: ""; position: absolute; left: 0; top: 6px; width: 8px; height: 8px; background: var(--blue-400); }

/* ---------- About ---------- */
.who { padding: 37px 0 38px; }
.who__card {
  max-width: 949px;
  margin: 0 auto;
  padding: 42px 95px 41px;
  text-align: center;
  background: var(--white);
  border: 1px solid var(--blue-400);
  border-radius: 14px;
  transition: box-shadow .2s ease;
}
.who__card:hover { box-shadow: 0 0 13px rgba(67, 142, 246, .2); }
.who__card p { margin-top: 28px; font-size: 18px; line-height: 24px; }

.story { padding-bottom: 33px; }
.timeline { display: grid; grid-template-columns: 434fr 432fr 394fr; margin-top: 47px; text-align: left; }
.timeline__item { position: relative; padding-top: 56px; padding-right: 40px; }
.timeline__item:last-child { padding-right: 0; }
.timeline__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 28px;
  border: 1px solid var(--blue-700);
  border-radius: 50%;
  background: radial-gradient(circle closest-side, var(--blue-700) 0 8px, transparent 8.5px);
}
.timeline__item:not(:last-child)::after { content: ""; position: absolute; top: 14px; left: 27px; right: 0; border-top: 1px solid var(--blue-400); }
.timeline__year { font-size: 24px; font-weight: 700; line-height: 29px; color: var(--blue-700); }
.timeline__title { margin-top: 7px; font-size: 18px; font-weight: 600; line-height: 22px; }
.timeline__text { margin-top: 7px; font-size: 18px; line-height: 24px; }

.leadership { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 50px var(--gap); padding-top: var(--section); }
.leadership__intro p { margin-top: 6px; font-size: 18px; line-height: 24px; }
.leader:nth-child(4) { grid-column: 2; }
.leader__photo {
  aspect-ratio: 393 / 378;
  background: #ddd no-repeat;
  filter: grayscale(1);
  transition: filter .3s ease;
}
.leader:hover .leader__photo, .leader:focus-within .leader__photo { filter: none; }
.leader__photo--ian { background-image: url("../assets/img/ian-anderson.jpg"); background-size: 155.12% 215.03%; background-position: 64.15% 12.09%; }
.leader__photo--todd { background-image: url("../assets/img/todd-laruffa.jpg"); background-size: 131.98% 171.46%; background-position: 80.3% 39.79%; }
.leader__photo--adam { background-image: url("../assets/img/adam-laskar.jpg"); background-size: 110.18% 143.14%; background-position: 71.37% 17.04%; }
.leader__name { margin-top: 23px; font-size: 24px; font-weight: 600; line-height: 29px; color: var(--blue-700); }
.leader__role { margin-top: 5px; font-size: 18px; line-height: 22px; }

/* ---------- Contact ---------- */
.contact-cards { padding: var(--section) 0 71px; }
.contact-cards .cards { margin-top: 0; }
.contact-cards .card { padding-bottom: 17px; }
.help { display: grid; grid-template-columns: minmax(0, 610px) minmax(0, 434px); justify-content: space-between; gap: 40px; padding: var(--section) 0 var(--section) 41px; }
.faq__item { margin-top: 10px; }
.faq__item + .faq__item { margin-top: 44px; }
.faq__q { font-size: 18px; font-weight: 600; line-height: 22px; color: var(--blue-400); }
.faq__a { margin-top: 8px; font-size: 18px; line-height: 22px; }
.faq__a a { color: var(--blue-700); }
.faq__hours { margin-top: 11px; font-size: 18px; line-height: 22px; }

/* ---------- Closing CTA ---------- */
.cta { padding: var(--section) 0; text-align: center; }
.cta__title { max-width: 855px; margin: 0 auto; font-size: 24px; font-weight: 600; line-height: 29px; color: var(--ink); }
.cta__title--navy { color: var(--navy); }
.cta__title--narrow { max-width: 628px; }
.cta__text { max-width: 692px; margin: 6px auto 0; font-size: 18px; font-weight: 500; line-height: 22px; }
.cta .btn-row { margin-top: 48px; }
.cta__title--navy + .btn-row { margin-top: 43px; }
.cta__contact { margin-top: 43px; font-size: 24px; font-weight: 600; line-height: 29px; color: var(--navy); }
.cta__links { margin-top: 18px; display: grid; gap: 10px; justify-items: center; }
.cta__links a { font-size: 20px; font-weight: 700; line-height: 24px; color: var(--blue-700); text-decoration: none; }
.cta__links a:hover { text-decoration: underline; }

/* ---------- Disclaimer + Footer ---------- */
.disclaimer { padding: 17px 0 18px; background: var(--gray-900); color: var(--white); font-size: 12px; font-weight: 500; line-height: 15px; text-align: center; }
.footer { background: var(--ink); color: var(--white); font-size: 12px; line-height: 15px; }
.footer__inner { position: relative; min-height: 310px; padding-top: 32px; padding-bottom: 54px; display: grid; grid-template-columns: 331px 221px auto; justify-content: start; }
.footer__logo { width: 129px; height: 44px; margin-bottom: 15px; }
.footer__col p { margin: 0 0 15px; }
.footer__col strong { font-weight: 600; }
.footer__col a { text-decoration: none; }
.footer__col a:hover { text-decoration: underline; }
.footer__col--links { display: flex; flex-direction: column; align-items: flex-start; padding-top: 59px; }
.footer__link { margin-bottom: 15px; padding: 0; font-weight: 600; text-decoration: underline !important; background: none; border: 0; cursor: pointer; }
.footer__sublink { margin-bottom: 5px; font-size: 14px; line-height: 17px; }
.footer__copy { position: absolute; left: var(--gutter); bottom: 22px; margin: 0; font-size: 10px; font-weight: 500; line-height: 12px; }

/* ---------- Submit a Request modal ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
  background: rgba(5, 27, 48, .55);
}
.modal__dialog {
  position: relative;
  width: 100%;
  max-width: 711px;
  margin: auto;
  padding: 31px 45px 43px 40px;
  background: var(--blue-100);
  border-radius: 27px;
  box-shadow: 0 0 12px rgba(0, 0, 0, .25);
  animation: modal-in .2s ease;
}
@keyframes modal-in { from { opacity: 0; transform: translateY(12px); } }
.modal__close {
  position: absolute;
  top: 18px;
  right: 23px;
  width: 33px;
  height: 33px;
  padding: 0;
  display: grid;
  place-items: center;
  background: var(--gray-900);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(0, 0, 0, .15);
  cursor: pointer;
}
.modal__close::before, .modal__close::after { content: ""; grid-area: 1 / 1; width: 19px; height: 2.5px; background: var(--white); border-radius: 1px; transform: rotate(45deg); }
.modal__close::after { transform: rotate(-45deg); }
.modal__title { padding: 0 40px; font-size: 32px; font-weight: 600; line-height: 39px; text-align: center; text-transform: uppercase; }
.modal__intro { margin-top: 10px; font-size: 20px; line-height: 26px; }
.rform { margin-top: 17px; }
.rform__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; }
.rform__full { grid-column: 1 / -1; }
.rfield, .rselect__btn {
  display: block;
  width: 100%;
  height: 43px;
  padding: 0 13px;
  font: inherit;
  font-size: 18px;
  line-height: 26px;
  color: var(--ink);
  text-align: left;
  background: var(--white);
  border: .5px solid var(--blue-700);
  border-radius: 0;
  outline: none;
  appearance: none;
}
.rfield::placeholder { color: var(--gray-700); opacity: 1; }
.rfield:focus, .rselect__btn:focus-visible { border-width: 1px; box-shadow: 0 0 0 2px rgba(47, 98, 211, .25); }
.rfield.is-invalid, .rselect.is-invalid .rselect__btn { border: 1.5px solid #dc2626; }
.rform__legend { margin: 0; padding: 17px 0 10px; font-size: 20px; line-height: 26px; }
.rform__legend.is-invalid { color: #dc2626; }
.rform fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.rchecks { display: grid; grid-template-columns: minmax(0, 323fr) minmax(0, 303fr); gap: 8.5px 0; margin-bottom: 19px; }
.rcheck { display: flex; align-items: center; gap: 6px; min-height: 26px; font-size: 20px; line-height: 26px; cursor: pointer; }
.rcheck input[type="checkbox"] {
  flex: none;
  appearance: none;
  width: 17px;
  height: 17px;
  margin: 0;
  background: var(--white);
  border: .5px solid var(--blue-700);
  cursor: pointer;
}
.rcheck input:checked {
  background: var(--blue-700) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'%3E%3Cpath d='M3.5 8.8l3.3 3.3 6.7-7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.rcheck--other { grid-column: 1 / -1; }
.rcheck--other .rfield { height: 33px; max-width: 466px; margin-left: 1px; font-size: 16px; }
.rcheck--col1 { grid-column: 1; }
.rselects { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.rselect { position: relative; min-width: 0; }
.rselect > select { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.rselect__btn { padding-right: 44px; color: var(--gray-700); cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rselect.has-value .rselect__btn { color: var(--ink); }
.rselect__btn::after, .rselect__head::after {
  content: "";
  position: absolute;
  right: 13px;
  top: 15px;
  border-left: 8.5px solid transparent;
  border-right: 8.5px solid transparent;
  border-top: 14px solid var(--blue-700);
}
.rselect__panel { position: absolute; z-index: 5; top: 0; left: 0; width: 100%; padding-bottom: 8px; background: var(--white); border: .5px solid var(--blue-700); font-size: 18px; }
.rselect__head { position: relative; height: 38px; padding: 8px 44px 0 13px; line-height: 26px; color: var(--gray-700); cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rselect__head::after { border-top: 0; border-bottom: 14px solid var(--blue-700); }
.rselect__list { max-height: 300px; overflow-y: auto; outline: none; }
.rselect__option { padding: 0 13px; line-height: 27.5px; color: var(--blue-700); cursor: pointer; }
.rselect__option.is-active { background: var(--blue-50); }
.rselect__option[aria-selected="true"] { font-weight: 600; }
.rform__error { margin-top: 12px; font-size: 14px; line-height: 18px; color: #b91c1c; }
.rform__submit { display: flex; justify-content: center; margin-top: 40px; }
.modal__done { padding: 40px 0 10px; text-align: center; }
.modal__done p { margin: 12px 0 32px; font-size: 20px; line-height: 26px; }

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
  :root { --gutter: 40px; --gap: 28px; }
  .top-menu__nav { gap: 28px; }
  .intro__headline, .intro__headline--abl, .intro__headline--cre, .asset-grid__title { padding-left: 0; }
  .intro__grid, .intro--boxed .intro__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); column-gap: 40px; }
  .band__grid { padding-left: var(--gutter); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; }
  .hero--about .hero__inner { padding-right: var(--gutter); }
  .help { padding-left: 0; }
}

@media (max-width: 1160px) {
  .top-menu__toggle {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-left: auto;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
  }
  .top-menu__toggle span, .top-menu__toggle span::before, .top-menu__toggle span::after { display: block; width: 24px; height: 2.5px; background: var(--ink); border-radius: 2px; transition: transform .2s ease, background .2s ease; }
  .top-menu__toggle span { position: relative; }
  .top-menu__toggle span::before, .top-menu__toggle span::after { content: ""; position: absolute; left: 0; }
  .top-menu__toggle span::before { top: -8px; }
  .top-menu__toggle span::after { top: 8px; }
  .top-menu.is-open .top-menu__toggle span { background: transparent; }
  .top-menu.is-open .top-menu__toggle span::before { transform: translateY(8px) rotate(45deg); }
  .top-menu.is-open .top-menu__toggle span::after { transform: translateY(-8px) rotate(-45deg); }
  .top-menu__nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 8px var(--gutter) 20px;
    background: var(--white);
    box-shadow: 0 8px 12px rgba(0, 0, 0, .12);
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }
  .top-menu.is-open .top-menu__nav { display: flex; }
  .top-menu__link { height: 48px; width: 100%; }
  .top-menu__dropdown { position: static; width: auto; padding: 0 0 8px 16px; box-shadow: none; opacity: 1; visibility: visible; transform: none; }
  .top-menu__btn { margin-top: 10px; }

  .hero__logo { width: 320px; }
  .hero--about .hero__inner { grid-template-columns: minmax(0, 1fr) 320px; }
  .cards, .asset-grid, .steps, .leadership { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .asset-grid__title { grid-column: 1 / -1; }
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split > .media { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 9; order: 9; }
  .media { width: 100%; min-height: 0; }
  .leadership__intro { grid-column: 1 / -1; }
  .leader:nth-child(4) { grid-column: auto; }
  .help { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 820px) {
  :root { --gutter: 20px; --section: 56px; --gap: 20px; }
  .hero { min-height: 0; }
  .hero__inner, .hero--cre .hero__inner, .hero--about .hero__inner, .hero--contact .hero__inner { padding-top: 48px; padding-bottom: 56px; }
  .hero__title { font-size: clamp(34px, 9vw, 48px); line-height: 1.02; }
  .hero__title br { display: none; }
  .hero__cta, .hero--abl .hero__cta, .hero--cre .hero__cta { margin-top: 32px; }
  .hero--about .hero__inner { grid-template-columns: minmax(0, 1fr); }
  .hero__logo { width: 240px; margin-top: 40px; grid-row: 1; }
  .h2 { font-size: 26px; line-height: 32px; }
  .h2--xl { font-size: 30px; line-height: 37px; }
  .h2 br { display: none; }
  .intro__grid, .intro--boxed .intro__grid, .band__grid { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .intro--boxed { padding-top: var(--section); }
  .intro--boxed .rule { margin-top: var(--section); }
  .feature-cards, .benefits { grid-template-columns: minmax(0, 1fr); }
  .feature-card { min-height: 0; }
  .timeline { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .timeline__item { padding: 0 0 0 44px; }
  .timeline__item:not(:last-child)::after { top: 27px; bottom: -28px; left: 14px; right: auto; border-top: 0; border-left: 1px solid var(--blue-400); }
  .who__card { padding: 32px 24px; }
  .fact-box, .fact-box--cre { padding: 24px 20px; }
  .bullets, .fact-box--cre .bullets { padding-left: 0; }
  .modal__dialog { padding: 28px 20px 32px; border-radius: 20px; }
  .modal__title { font-size: 24px; line-height: 30px; }
  .modal__intro, .rform__legend, .rcheck { font-size: 17px; line-height: 23px; }
  .rfield, .rselect__btn, .rselect__panel { font-size: 16px; }
  /* Long questions wrap instead of being cut off. */
  .rselect__btn { height: auto; min-height: 43px; padding-top: 11px; padding-bottom: 11px; line-height: 20px; white-space: normal; }
  .rselect__head { height: auto; min-height: 38px; padding-top: 11px; line-height: 20px; white-space: normal; }
  .footer__inner { grid-template-columns: 1fr 1fr; gap: 0 24px; }
  .footer__col--contact { grid-column: 1 / -1; }
  .footer__col--links { padding-top: 16px; }
}

@media (max-width: 600px) {
  .cards, .cards--2, .asset-grid, .steps, .split, .leadership { grid-template-columns: minmax(0, 1fr); }
  .card, .benefit { min-height: 0; }
  .flip { min-height: 244px; }
  .btn { min-width: 0; width: 100%; font-size: 18px; }
  .btn--wide { min-width: 0; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .hero--abl .hero__cta { align-self: stretch; }
  .section__cta .btn, .rform__submit .btn { max-width: 320px; }
  .rform__grid, .rchecks { grid-template-columns: minmax(0, 1fr); }
  .rcheck--other { flex-wrap: wrap; }
  .rcheck--other .rfield { margin-left: 23px; }
  .cta__links a { font-size: 18px; overflow-wrap: anywhere; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}