/* ==========================================================================
   Olin redesign: private credit homepage
   Loaded after olin-staging.css. Each section is scoped to its own modifier
   class so the redesign can be reviewed and rolled back section by section.
   ========================================================================== */

/* Every visible element sets its own font, but the body's default (Inter in
   olin-staging.css) still made Chrome download Inter on every page and hold
   back the load animations until it arrived. */
body {
  font-family: Astasans, Verdana, sans-serif;
}

/* Large screens: page content is at most 1680px wide (homepage feature cards
   ~549px), centred, and never closer to the edge than the nav logo (40px).
   Every .container lines up with it; the nav and the full-bleed homepage hero
   are unchanged. Below 1600px the section rules apply.
   Width preview (temporary): ?viewmode=1560 (as olin.ai) or ?viewmode=1832
   (600px cards); see _Layout. */
:root {
  --content-max: 1680px;
}

html.viewmode-1560 {
  --content-max: 1560px;
}

html.viewmode-1832 {
  --content-max: 1832px;
}

@media screen and (min-width: 1600px) {
  /* "html" outranks the section containers' own padding rules further down. */
  html .container:not(.hero):not(.nav-container) {
    max-width: none;
    padding-left: max(40px, calc((100% - var(--content-max)) / 2));
    padding-right: max(40px, calc((100% - var(--content-max)) / 2));
  }
}

.viewmode-bar {
  z-index: 9999;
  color: #fff;
  background: #1c1414e6;
  border-radius: 999px;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 6px 14px;
  font: 12px/1.2 Astasans, Verdana, sans-serif;
  display: flex;
  position: fixed;
  bottom: 16px;
  left: 16px;
  box-shadow: 0 4px 16px #0000004d;
}

.viewmode-bar a {
  color: #fff;
  border: 1px solid #ffffff33;
  border-radius: 999px;
  padding: 5px 10px;
  text-decoration: none;
}

.viewmode-bar a.is-on {
  background-color: var(--signal-100);
  border-color: var(--signal-100);
}

.viewmode-bar span {
  opacity: .6;
}

/* --------------------------------------------------------------------------
   1. Hero (.hero--credit)
   Full-bleed image, headline anchored bottom-left, proof strip along the base.
   -------------------------------------------------------------------------- */

.hero--credit {
  background-color: var(--maroon-100);
  overflow: hidden;
}

.hero--credit .hero__bg img.hero__img {
  object-position: 72% 50%;
}

/* Left wash: keeps the headline legible without burying the skyline. */
.hero--credit .hero__grad {
  width: 100%;
  background-image: linear-gradient(90deg, #351313e6 0%, #35131380 32%, #35131300 64%);
}

/* Base wash: grounds the text and proof strip, fades out before the horizon. */
.hero--credit .hero__grad.second {
  width: 100%;
  background-image: linear-gradient(0deg, var(--maroon-100) 0%, #351313b3 20%, #35131300 46%);
}

.hero--credit .hero-container {
  justify-content: flex-end;
  padding-top: 140px;
}

.hero--credit .hero__text {
  margin-top: auto;
  margin-bottom: 0;
}

.hero--credit .hero__headline {
  max-width: none;
  margin-bottom: 20px;
  text-wrap: balance;
}

/* Headline spans ~40% of the viewport on desktop, as in the Model ML hero. */
.hero--credit .hero__headline .headline-1 {
  font-size: clamp(2.75rem, 3.25vw, 4.75rem);
}

.hero--credit .hero__sub {
  /* Wide enough for the one-line subtitle at the largest hero font (20px). */
  max-width: 760px;
  margin-bottom: 0;
  text-wrap: balance;
}

.hero--credit .hero__cta {
  margin-top: 36px;
  display: flex;
}

.hero__proof {
  border-top: 1px solid var(--white-20);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 40px;
  margin-top: 64px;
  padding: 32px 0 44px;
  display: grid;
}

.hero__proof-item {
  flex-flow: column;
  row-gap: 8px;
  max-width: 460px;
  display: flex;
}

.hero__proof-item p {
  margin-bottom: 0;
}

/* Logo row along the hero base. Heights are set per logo
   so the marks read at the same optical weight, not the same box size. */
.hero__logos {
  border-top: 1px solid var(--white-20);
  flex-flow: wrap;
  justify-content: center;
  align-items: center;
  column-gap: clamp(48px, 5vw, 96px);
  row-gap: 28px;
  margin-top: 64px;
  padding: 36px 0 48px;
  display: flex;
}

.hero__logo {
  width: auto;
  max-width: none;
  opacity: .85;
}

.hero__logo--ke {
  height: 20px;
}

.hero__logo--ms {
  height: 48px;
}

.hero__logo--dws {
  height: 32px;
}

.hero__logo--ps {
  height: 44px;
}

/* Short desktop windows (e.g. 1280x720 laptops): tighten vertical rhythm. */
@media screen and (min-width: 992px) and (max-height: 800px) {
  .hero--credit .hero-container {
    padding-top: 110px;
  }

  .hero--credit .hero__cta {
    margin-top: 28px;
  }

  .hero__proof {
    margin-top: 40px;
    padding: 24px 0 28px;
  }
}

@media screen and (max-width: 991px) {
  .hero--credit .hero__bg img.hero__img {
    object-position: 78% 50%;
  }

  .hero--credit .hero__grad {
    width: 100%;
    background-image: linear-gradient(90deg, #351313b3 0%, #35131300 70%);
  }

  .hero--credit .hero__grad.second {
    background-image: linear-gradient(0deg, var(--maroon-100) 0%, #351313d9 32%, #35131300 62%);
  }

  .hero--credit .hero-container {
    height: auto;
    min-height: 100svh;
    padding-top: 120px;
    padding-bottom: 0;
  }

  .hero__proof {
    column-gap: 24px;
    margin-top: 48px;
    padding: 24px 0 40px;
  }
}

@media screen and (max-width: 767px) {
  .hero--credit .hero__headline .headline-1 {
    font-size: clamp(2.5rem, 11vw, 3.25rem);
  }

  /* Phones: the photo fills the top of the hero only, so the seated figure
     sits above the headline instead of behind it. The base wash blends it
     into the maroon below. */
  .hero--credit .hero__bg {
    height: 64%;
  }

  .hero--credit .hero__bg img.hero__img {
    object-position: 74% 50%;
  }

  .hero--credit .hero__grad.second {
    background-image: linear-gradient(0deg, var(--maroon-100) 0%, #351313cc 18%, #35131300 50%);
  }

  .hero--credit .hero__cta {
    margin-top: 28px;
  }

  /* Phones: titles only, stacked, so the image keeps the top half. */
  .hero__proof {
    grid-template-columns: 1fr;
    row-gap: 10px;
    margin-top: 36px;
    padding: 20px 0 32px;
  }

  .hero__proof-item .p-3 {
    display: none;
  }

  .hero__proof-item .p-1 {
    font-size: 1rem;
  }

  .hero__logos {
    grid-template-columns: repeat(2, max-content);
    justify-content: center;
    justify-items: center;
    align-items: center;
    column-gap: 32px;
    row-gap: 24px;
    margin-top: 36px;
    padding: 24px 0 32px;
    display: grid;
  }

  .hero__logo--ke {
    height: 14px;
  }

  .hero__logo--ms {
    height: 34px;
  }

  .hero__logo--dws {
    height: 24px;
  }

  .hero__logo--ps {
    height: 34px;
  }
}

/* Phones in landscape: headline must clear the figure on the right. */
@media screen and (max-width: 991px) and (max-height: 500px) and (orientation: landscape) {
  .hero--credit .hero-container {
    padding-top: 96px;
  }

  .hero--credit .hero__headline .headline-1 {
    font-size: 2.5rem;
  }
}

/* --------------------------------------------------------------------------
   2. Feature videos (.section_features)
   Three large video cards, Model ML scale. One plays at a time; behaviour in
   js/feature-videos.js.
   -------------------------------------------------------------------------- */

.section_features {
  background-color: var(--stone);
  color: var(--maroon-100);
  padding-top: 96px;
  padding-bottom: 120px;
}

.container.rel.features__container {
  max-width: none;
  padding-left: 4vw;
  padding-right: 4vw;
}

.features__intro {
  max-width: 920px;
  margin-bottom: 56px;
}

.features__intro .headline-3 {
  margin: 0;
  text-wrap: balance;
}

.features__lede {
  color: var(--maroon-75);
  margin: 16px 0 0;
}

.features__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  display: grid;
}

.feature-card {
  cursor: pointer;
}

.feature-card__media {
  aspect-ratio: 4 / 3;
  background-color: var(--slate-50);
  border-radius: 6px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}

.feature-card__video {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

/* Thin progress line on the playing card. */
.feature-card__progress {
  background-color: var(--signal-100);
  height: 3px;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: opacity .3s ease;
  position: absolute;
  inset: auto 0 0;
}

.feature-card.is-playing .feature-card__progress {
  opacity: 1;
}

.feature-card__title {
  color: var(--maroon-100);
  margin: 0 0 8px;
}

.feature-card__text {
  color: var(--maroon-75);
  max-width: 520px;
  margin: 0;
}

@media screen and (max-width: 991px) {
  .section_features {
    padding-top: 70px;
    padding-bottom: 88px;
  }

  .container.rel.features__container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .features__intro {
    margin-bottom: 40px;
  }

  /* Tablets: one card per row, full uncropped 16:9 video. */
  .features__grid {
    grid-template-columns: 1fr;
    row-gap: 48px;
  }

  .feature-card__media {
    aspect-ratio: 16 / 9;
  }
}

@media screen and (max-width: 767px) {
  .section_features {
    padding-top: 52px;
    padding-bottom: 64px;
  }

  .features__intro {
    margin-bottom: 32px;
  }

  .features__grid {
    row-gap: 40px;
  }

  .feature-card__media {
    aspect-ratio: 4 / 3;
    margin-bottom: 16px;
  }
}

/* --------------------------------------------------------------------------
   3. Product walkthrough (.section_product)
   Dark band, tab strip with progress lines, near full-width video player.
   Behaviour in js/product-videos.js.
   -------------------------------------------------------------------------- */

.section_product {
  background-color: var(--maroon-100);
  color: var(--white);
  padding-top: 112px;
  padding-bottom: 120px;
}

.container.rel.product__container {
  max-width: none;
  padding-left: 4vw;
  padding-right: 4vw;
}

/* Heading and call to action line up with the rest of the page. */
.product__stage {
  width: 100%;
}

/* Tabs and video share one width: the full column when the screen is tall
   enough, otherwise narrower and centred, so the heading, tabs and video fit
   on one screen. 312px = fixed nav (57) + heading block (~91 + 56 gap) + tabs
   (~40 + 20 gap) + ~24px above and below. */
@media screen and (min-width: 992px) {
  .product__tabs,
  .product__player {
    width: clamp(640px, calc((100vh - 312px) * 16 / 9), 100%);
    margin-left: auto;
    margin-right: auto;
  }
}

.product__intro {
  margin-bottom: 56px;
}

.product__intro .headline-3 {
  margin: 0;
  text-wrap: balance;
}

.product__lede {
  color: var(--white-70);
  margin: 16px 0 0;
}

.product__tabs {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 24px;
  margin-bottom: 20px;
  display: grid;
}

.product__tab {
  color: var(--white-50);
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  flex-flow: column;
  row-gap: 14px;
  padding: 0;
  font-family: Astasans, Verdana, sans-serif;
  transition: color .3s ease;
  display: flex;
}

.product__tab:hover,
.product__tab.is-active {
  color: var(--white);
}

.product__tab:focus-visible {
  outline: 2px solid var(--signal-100);
  outline-offset: 6px;
}

.product__tab-text {
  align-items: baseline;
  column-gap: 12px;
  font-size: clamp(.95rem, 1.1vw, 1.125rem);
  line-height: 130%;
  display: flex;
}

.product__tab-num {
  font-size: .8em;
  letter-spacing: .06em;
  transition: color .3s ease;
}

.product__tab.is-active .product__tab-num {
  color: var(--signal-100);
}

.product__tab-bar {
  margin-top: auto;
  background-color: var(--white-20);
  border-radius: 2px;
  height: 2px;
  display: block;
  overflow: hidden;
}

.product__tab-fill {
  background-color: var(--white);
  height: 100%;
  transform: scaleX(0);
  transform-origin: left;
  display: block;
}

.product__mobile-label {
  display: none;
}

.product__player {
  aspect-ratio: 16 / 9;
  background-color: #f9f8fb;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 32px 80px #0000004d;
}

/* The outgoing video stays fully visible underneath until the incoming one
   has faded in on top, so hand-offs between matching frames never flash. */
.product__video {
  object-fit: cover;
  opacity: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0s linear .5s;
  display: block;
  position: absolute;
  inset: 0;
}

.product__video.is-active {
  opacity: 1;
  z-index: 1;
  transition: opacity .5s ease;
}

@media screen and (max-width: 991px) {
  .section_product {
    padding-top: 80px;
    padding-bottom: 88px;
  }

  .container.rel.product__container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .product__stage {
    width: 100%;
  }

  .product__intro {
    margin-bottom: 40px;
  }

  .product__tabs {
    column-gap: 16px;
  }
}

@media screen and (max-width: 767px) {
  .section_product {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .product__intro {
    margin-bottom: 32px;
  }

  /* Phones: numbered segments only, active title shown above them. */
  .product__tabs {
    column-gap: 6px;
    margin-bottom: 16px;
  }

  .product__tab {
    padding: 10px 0;
  }

  .product__tab-text {
    display: none;
  }

  .product__tab-bar {
    height: 3px;
  }

  .product__mobile-label {
    color: var(--white);
    column-gap: 12px;
    margin-bottom: 4px;
    font-family: Astasans, Verdana, sans-serif;
    font-size: 1rem;
    display: flex;
  }

  .product__mobile-count {
    color: var(--signal-100);
  }
}

/* Call to action closing the product band. */
.product__cta {
  border-top: 1px solid var(--white-20);
  justify-content: space-between;
  align-items: center;
  column-gap: 48px;
  row-gap: 28px;
  margin-top: 64px;
  padding-top: 48px;
  display: flex;
}

.product__cta-text .headline-4 {
  margin: 0;
}

.product__cta-lede {
  color: var(--white-70);
  margin: 10px 0 0;
}

.product__cta-actions {
  flex: none;
  align-items: center;
  column-gap: 32px;
  row-gap: 16px;
  display: flex;
}

.product__cta-link {
  color: var(--white-70);
  text-decoration: none;
  transition: color .3s ease;
}

.product__cta-link:hover {
  color: var(--white);
}

@media screen and (max-width: 767px) {
  .product__cta {
    flex-flow: column;
    align-items: flex-start;
    margin-top: 40px;
    padding-top: 32px;
  }

  .product__cta-actions {
    flex-flow: wrap;
  }
}

/* --------------------------------------------------------------------------
   4. Beyond debt finance (.section_beyond)
   Two large image cards: Deal Diligence and Strategic Partnerships.
   -------------------------------------------------------------------------- */

.section_beyond {
  background-color: var(--stone);
  color: var(--maroon-100);
  padding-top: 112px;
  padding-bottom: 120px;
}

.container.rel.beyond__container {
  max-width: none;
  padding-left: 4vw;
  padding-right: 4vw;
}

.beyond__intro {
  max-width: 920px;
  margin-bottom: 56px;
}

.beyond__intro .label-2 {
  color: var(--maroon-75);
  margin: 0 0 20px;
}

.beyond__intro .headline-3 {
  margin: 0;
  text-wrap: balance;
}

.beyond__lede {
  color: var(--maroon-75);
  max-width: 720px;
  margin: 16px 0 0;
}

.beyond__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  display: grid;
}

.beyond-card {
  background-color: var(--white);
  border: 1px solid var(--stroke-grey);
  border-radius: 6px;
  flex-flow: column;
  display: flex;
  overflow: hidden;
}

.beyond-card__media {
  aspect-ratio: 16 / 10;
  background-color: var(--slate-50);
  overflow: hidden;
}

.beyond-card__media .image {
  width: 100%;
  object-position: 50% 0%;
}

.beyond-card__body {
  flex-flow: column;
  flex: 1;
  align-items: flex-start;
  padding: 40px 40px 44px;
  display: flex;
}

.beyond-card__label {
  color: var(--signal-100);
  margin: 0 0 16px;
}

.beyond-card__title {
  color: var(--maroon-100);
  margin: 0 0 16px;
  text-wrap: balance;
}

.beyond-card__text {
  color: var(--maroon-75);
  max-width: 560px;
  margin: 0 0 32px;
  text-wrap: pretty;
}

.beyond-card__body .re-button {
  margin-top: auto;
}

@media screen and (max-width: 991px) {
  .section_beyond {
    padding-top: 80px;
    padding-bottom: 88px;
  }

  .container.rel.beyond__container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .beyond__intro {
    margin-bottom: 40px;
  }

  .beyond__grid {
    grid-template-columns: 1fr;
    row-gap: 24px;
  }
}

@media screen and (max-width: 767px) {
  .section_beyond {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .beyond-card__body {
    padding: 28px 24px 32px;
  }
}

/* --------------------------------------------------------------------------
   5. Who it's for (.section_audience) - used on solutions/debt-finance.html
   -------------------------------------------------------------------------- */

.section_audience {
  background-color: var(--stone);
  color: var(--maroon-100);
  padding-top: 24px;
  padding-bottom: 120px;
}

.container.rel.audience__container {
  max-width: none;
  padding-left: 4vw;
  padding-right: 4vw;
}

.audience__intro {
  max-width: 920px;
  margin-bottom: 56px;
}

.audience__intro .headline-3 {
  margin: 0;
  text-wrap: balance;
}

.audience__lede {
  color: var(--maroon-75);
  margin: 16px 0 0;
}

.audience__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  display: grid;
}

.audience-card {
  background-color: var(--white);
  border: 1px solid var(--stroke-grey);
  border-radius: 6px;
  flex-flow: column;
  padding: 40px 36px 44px;
  display: flex;
}

.audience-card__num {
  color: var(--signal-100);
  margin-bottom: 40px;
}

.audience-card__title {
  color: var(--maroon-100);
  margin-bottom: 14px;
  font-size: clamp(1.375rem, 1.7vw, 1.75rem);
  line-height: 120%;
}

.audience-card__text {
  color: var(--maroon-75);
  max-width: 460px;
  margin: 0;
  text-wrap: pretty;
  hyphens: manual;
}

@media screen and (max-width: 991px) {
  .section_audience {
    padding-top: 16px;
    padding-bottom: 88px;
  }

  .container.rel.audience__container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .audience__intro {
    margin-bottom: 40px;
  }

  .audience__grid {
    grid-template-columns: 1fr;
  }

  .audience-card__num {
    margin-bottom: 24px;
  }
}

@media screen and (max-width: 767px) {
  .section_audience {
    padding-top: 8px;
    padding-bottom: 64px;
  }

  .audience-card {
    padding: 28px 24px 32px;
  }
}

/* --------------------------------------------------------------------------
   6. Book a Consultation page (book-consultation.html)
   Centred intro and form card on the contact page's dark background.
   -------------------------------------------------------------------------- */

/* Footer flows after the form (not pinned), so it can never overlap it. */
.section-contact.book {
  flex-flow: column;
  padding-top: 140px;
  padding-bottom: 0;
}

.section-contact.book .contact__bottom {
  margin-top: auto;
  padding-top: 120px;
  position: relative;
  inset: auto;
}

.book__container {
  flex-flow: column;
  align-items: center;
  display: flex;
}

.book__intro {
  text-align: center;
  max-width: 640px;
  margin-bottom: 56px;
}

.book__title {
  color: var(--white);
  margin: 0;
}

.book__lede {
  color: var(--white-70);
  margin: 20px 0 0;
  text-wrap: balance;
}

.contact__form.book__card {
  max-width: 900px;
  padding: 48px;
  border: 1px solid var(--white-10);
  box-shadow: 0 30px 80px #00000040;
}

.book__form {
  align-items: stretch;
  width: 100%;
}

.book__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 20px;
  width: 100%;
  display: grid;
}

.book__grid .input {
  flex-flow: column;
  row-gap: 8px;
  display: flex;
}

.book__grid .label-1 {
  color: var(--white-90);
  font-weight: 600;
}

.book__req {
  color: var(--signal-100);
  margin-left: 2px;
}

.book__full {
  grid-column: 1 / -1;
}

.book__grid .input-field {
  height: 48px;
  margin: 0;
}

.book__grid .input-field.area {
  height: auto;
  min-height: 112px;
}

.book__grid .input-field:focus {
  border-color: var(--signal-100);
  outline: none;
  box-shadow: 0 0 0 3px #ff683633;
}

.book__actions {
  flex-flow: column;
  align-items: center;
  row-gap: 18px;
  width: 100%;
  margin-top: 32px;
  display: flex;
}

.book__note {
  color: var(--white-60);
  text-align: center;
  margin: 0;
  font-size: .8125rem;
  line-height: 150%;
}

.book__note a {
  text-decoration: none;
}

@media screen and (max-width: 767px) {
  .section-contact.book {
    padding-top: 110px;
  }

  .section-contact.book .contact__bottom {
    padding-top: 64px;
  }

  .book__intro {
    margin-bottom: 36px;
  }

  .contact__form.book__card {
    padding: 28px 20px;
  }

  .book__grid {
    grid-template-columns: 1fr;
    row-gap: 20px;
  }
}

.book__label {
  color: var(--white-70);
  margin: 0 0 20px;
}

/* --------------------------------------------------------------------------
   7. Security & Trust page (security-trust.html)
   -------------------------------------------------------------------------- */

.container.rel.sec__container {
  max-width: none;
  padding-left: 4vw;
  padding-right: 4vw;
}

.sec__eyebrow {
  color: var(--maroon-75);
  margin: 0 0 16px;
}

.sec__intro {
  max-width: none;
  margin-bottom: 28px;
}

.sec__intro .headline-3,
.sec-overview__text .headline-3 {
  margin: 0;
  text-wrap: balance;
}

.sec__body {
  color: var(--maroon-75);
  max-width: 760px;
  margin: 16px 0 0;
}

.sec-icon {
  flex: none;
  display: block;
}

/* Hero */
.sec-hero {
  color: var(--white);
  background-color: var(--maroon-100);
  background-image: url("../images/footer-bg.webp");
  background-position: 50%;
  background-size: cover;
  padding-top: 170px;
  padding-bottom: 56px;
}

.sec-hero__content {
  max-width: 980px;
}

.sec-hero__label {
  color: var(--white-70);
  margin: 0 0 24px;
}

.sec-hero__title {
  margin: 0;
  text-wrap: balance;
}

.sec-hero__lede {
  color: var(--white-70);
  max-width: 640px;
  margin: 24px 0 0;
}

.sec-proof {
  border-top: 1px solid var(--white-20);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  margin-top: 72px;
  padding-top: 32px;
  display: grid;
}

.sec-proof__item {
  align-items: flex-start;
  column-gap: 16px;
  display: flex;
}

.sec-proof__badge {
  flex: none;
  width: 72px;
  height: 72px;
  margin-top: -6px;
}

.sec-proof__item .sec-icon {
  color: var(--signal-100);
  margin-top: 2px;
}

.sec-proof__title {
  margin: 0 0 6px;
  font-family: Astasans, Verdana, sans-serif;
  font-size: 1.0625rem;
  font-weight: 600;
}

.sec-proof__text {
  color: var(--white-70);
  max-width: 360px;
  margin: 0;
  font-family: Astasans, Verdana, sans-serif;
  font-size: .9375rem;
  line-height: 150%;
}

/* Overview: compact, with a small ISO badge under the text */
.sec-overview {
  background-color: var(--stone);
  color: var(--maroon-100);
  padding-top: 64px;
  padding-bottom: 56px;
}

.sec-overview__text {
  max-width: 900px;
}

.sec-iso {
  align-items: center;
  column-gap: 18px;
  margin-top: 28px;
  display: flex;
}

.iso-badge {
  color: var(--maroon-100);
  flex: none;
  width: 84px;
  height: 84px;
}

.iso-badge text[font-size="10"] {
  display: none;
}

.iso-badge__year {
  fill: var(--signal-100);
}

.sec-iso__title {
  margin: 0 0 4px;
  font-family: Astasans, Verdana, sans-serif;
  font-size: 1rem;
  font-weight: 600;
}

.sec-iso__caption {
  color: var(--maroon-75);
  margin: 0;
  font-family: Astasans, Verdana, sans-serif;
  font-size: .875rem;
}

/* Principles: reuses the homepage's "The Gap" layout */
.section_gap.sec-gap {
  padding-top: 96px;
  padding-bottom: 96px;
}

.sec-gap .gap__container .label-2,
.sec-gap .gap__container .headline-3,
.sec-gap .gap__container .p-2 {
  margin: 0;
}

.sec-gap .gap__card {
  z-index: 1;
  padding: 32px 32px 40px;
}

.sec-gap .gap__card .headline-5 {
  font-size: clamp(1.25rem, 1.7vw, 1.6rem);
  line-height: 120%;
}

.sec-gap .gap__card .p-2 {
  margin: 0;
}

.sec-gap__icon {
  color: var(--signal-100);
}

.gap__card.second .sec-gap__icon {
  color: var(--white);
}

/* Hosting: light, compressed to fit one screen */
.sec-hosting {
  background-color: var(--maroon-100);
  color: var(--white);
  padding-top: 52px;
  padding-bottom: 52px;
}

.sec-hosting .sec__eyebrow {
  color: var(--white-70);
}

.sec-hosting__lede {
  color: var(--white-70);
  max-width: none;
  margin: 12px 0 0;
}

.sec-tabs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}

.sec-tab {
  color: var(--white-70);
  text-align: left;
  cursor: pointer;
  background-color: #ffffff0a;
  border: 1px solid var(--white-10);
  border-radius: 6px;
  align-items: baseline;
  column-gap: 12px;
  padding: 14px 20px;
  font-family: Astasans, Verdana, sans-serif;
  font-size: clamp(.95rem, 1.1vw, 1.0625rem);
  transition: background-color .3s ease, border-color .3s ease, color .3s ease, box-shadow .3s ease;
  display: flex;
}

.sec-tab:hover {
  color: var(--white);
  border-color: var(--white-20);
}

.sec-tab.is-active {
  color: var(--white);
  background-color: #ffffff14;
  border-color: var(--signal-100);
}

.sec-tab:focus-visible {
  outline: 2px solid var(--signal-100);
  outline-offset: 3px;
}

.sec-tab__num {
  color: var(--signal-100);
  font-size: .8em;
  letter-spacing: .06em;
}

.sec-scale {
  color: var(--white-50);
  align-items: center;
  column-gap: 16px;
  margin: 12px 0 28px;
  font-family: Astasans, Verdana, sans-serif;
  font-size: .8125rem;
  display: flex;
}

.sec-scale__bar {
  background-image: linear-gradient(90deg, #ffffff40, var(--signal-100));
  border-radius: 2px;
  flex: 1;
  height: 2px;
}

.sec-panel {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  align-items: start;
  gap: 56px;
  display: grid;
}

.sec-panel__copy {
  display: grid;
}

.sec-panel__item {
  opacity: 0;
  visibility: hidden;
  grid-area: 1 / 1;
  transition: opacity .35s ease, visibility 0s linear .35s;
}

.sec-panel[data-model="1"] .sec-panel__item[data-for="1"],
.sec-panel[data-model="2"] .sec-panel__item[data-for="2"],
.sec-panel[data-model="3"] .sec-panel__item[data-for="3"] {
  opacity: 1;
  visibility: visible;
  transition: opacity .35s ease .1s, visibility 0s;
}

/* Tag sits level with the zone labels opposite. */
.sec-panel__tag {
  color: var(--signal-100);
  margin: 0 0 12px;
  padding-top: 18px;
}

.sec-panel__item .headline-4 {
  margin: 0 0 12px;
}

.sec-panel__text {
  color: var(--white-70);
  margin: 0;
}

/* Diagram: chips move between Olin's environment and the client tenant. */
.sec-diagram {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  display: grid;
}

.sec-zone {
  background-color: #0000;
  border: 1px dashed var(--white-20);
  border-radius: 8px;
  flex-flow: column;
  row-gap: 10px;
  height: 222px;
  padding: 18px 18px 18px;
  transition: border-color .4s ease, background-color .4s ease;
  display: flex;
  position: relative;
}

.sec-zone--client {
  background-color: #ff68360d;
  border-style: solid;
  border-color: #ff683659;
}

.sec-zone__label {
  color: var(--white-50);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin: 0 0 4px;
  font-family: Astasans, Verdana, sans-serif;
  font-size: .75rem;
  font-weight: 700;
}

.sec-zone--client .sec-zone__label {
  color: var(--signal-75);
}

.sec-chip {
  color: var(--white);
  background-color: #ffffff12;
  border: 1px solid var(--white-10);
  border-radius: 6px;
  align-items: center;
  column-gap: 12px;
  max-height: 60px;
  padding: 11px 14px;
  font-family: Astasans, Verdana, sans-serif;
  font-size: .9375rem;
  transition: opacity .4s ease, transform .4s ease, max-height .4s ease, padding .4s ease, margin .4s ease;
  display: flex;
  overflow: hidden;
}

.sec-chip .sec-icon {
  color: var(--signal-100);
}

.sec-chip--keys {
  border-color: #ff683666;
}

.sec-zone__empty {
  color: var(--white-50);
  text-align: center;
  opacity: 0;
  margin: auto 0;
  font-family: Astasans, Verdana, sans-serif;
  font-size: .875rem;
  transition: opacity .4s ease;
}

/* Hidden chips collapse so the visible ones stay grouped at the top. */
.sec-panel[data-model="1"] .sec-zone--client .sec-chip,
.sec-panel[data-model="2"] .sec-zone--olin .sec-chip--keys,
.sec-panel[data-model="2"] .sec-zone--client .sec-chip--platform,
.sec-panel[data-model="2"] .sec-zone--client .sec-chip--data,
.sec-panel[data-model="3"] .sec-zone--olin .sec-chip {
  opacity: 0;
  border-width: 0;
  max-height: 0;
  margin-top: -10px;
  padding-top: 0;
  padding-bottom: 0;
  transform: scale(.96);
}

.sec-panel[data-model="3"] .sec-zone--olin .sec-zone__empty,
.sec-panel[data-model="1"] .sec-zone__empty--client {
  opacity: 1;
}

/* Comparison table */
.sec-table-wrap {
  background-color: #0000;
  border: 1px solid var(--white-10);
  border-radius: 6px;
  margin-top: 28px;
  overflow-x: auto;
}

.sec-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 720px;
  font-family: Astasans, Verdana, sans-serif;
  font-size: .875rem;
  line-height: 140%;
}

.sec-table th,
.sec-table td {
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--white-10);
  padding: 9px 20px;
}

.sec-table thead th {
  color: var(--white);
  background-color: #ffffff0a;
  font-weight: 600;
}

.sec-table tbody th {
  color: var(--white-50);
  width: 20%;
  font-weight: 400;
}

.sec-table td {
  color: var(--white-90);
}

.sec-table tbody tr:last-child th,
.sec-table tbody tr:last-child td {
  border-bottom: 0;
}

@media screen and (max-width: 991px) {
  .container.rel.sec__container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .sec-hero {
    padding-top: 140px;
  }

  .sec-proof {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 48px;
  }

  .section_gap.sec-gap {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  .sec-hosting {
    padding-top: 64px;
    padding-bottom: 72px;
  }

  .sec-panel {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .sec-panel__tag {
    padding-top: 0;
  }
}

@media screen and (max-width: 767px) {
  .sec-hero {
    padding-top: 120px;
    padding-bottom: 48px;
  }

  .sec-overview {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .sec-tabs {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .sec-diagram {
    grid-template-columns: 1fr;
  }

  .sec-zone {
    height: auto;
    min-height: 0;
  }
}

/* ISO mark in the footer bar (all pages). */
.footer__iso {
  color: var(--white-70);
  border: 1px solid var(--white-20);
  border-radius: 999px;
  align-items: center;
  column-gap: 7px;
  padding: 5px 12px 5px 10px;
  font-family: Astasans, Verdana, sans-serif;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  white-space: nowrap;
  transition: color .25s ease, border-color .25s ease;
  display: inline-flex;
}

.footer__iso svg {
  color: var(--signal-100);
  flex: none;
}

.footer__iso:hover {
  color: var(--white);
  border-color: var(--signal-100);
}

/* Short laptop screens: keep the whole hosting section in one view. */
@media screen and (min-width: 992px) and (max-height: 860px) {
  .sec-hosting {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .sec-hosting .sec__eyebrow {
    margin-bottom: 10px;
  }

  .sec-hosting .headline-3 {
    font-size: clamp(1.5rem, 2.4vw, 2.125rem);
  }

  .sec-scale {
    margin: 10px 0 20px;
  }

  .sec-zone {
    height: 186px;
    row-gap: 8px;
    padding: 14px 16px;
  }

  .sec-chip {
    padding: 9px 12px;
  }

  .sec-panel__tag {
    padding-top: 14px;
  }

  .sec-table th,
  .sec-table td {
    padding: 7px 20px;
  }

  .sec-table-wrap {
    margin-top: 20px;
  }
}

/* Comparison table: column headings are clickable, selected column is lit. */
.sec-table__pick {
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  align-items: center;
  column-gap: 8px;
  padding: 0;
  transition: color .25s ease;
  display: inline-flex;
}

.sec-table__pick::after {
  content: "";
  border: 1px solid var(--white-50);
  border-radius: 50%;
  flex: none;
  width: 9px;
  height: 9px;
  transition: background-color .25s ease, border-color .25s ease;
}

.sec-table__pick:hover {
  color: var(--signal-75);
}

.sec-table__pick:focus-visible {
  outline: 2px solid var(--signal-100);
  outline-offset: 4px;
  border-radius: 2px;
}

.sec-table th:nth-child(n + 2),
.sec-table td {
  transition: background-color .3s ease, color .3s ease, box-shadow .3s ease;
  cursor: pointer;
}

/* Hovering a column previews it (js/security-hosting.js sets data-hover). */
.sec-table[data-hover="1"]:not([data-model="1"]) tr > :nth-child(2),
.sec-table[data-hover="2"]:not([data-model="2"]) tr > :nth-child(3),
.sec-table[data-hover="3"]:not([data-model="3"]) tr > :nth-child(4) {
  background-color: #ffffff0d;
}

.sec-table[data-model="1"] tr > :nth-child(2),
.sec-table[data-model="2"] tr > :nth-child(3),
.sec-table[data-model="3"] tr > :nth-child(4) {
  color: var(--white);
  background-color: #ff683614;
  box-shadow: inset 1px 0 #ff683666, inset -1px 0 #ff683666;
}

.sec-table[data-model="1"] thead th:nth-child(2),
.sec-table[data-model="2"] thead th:nth-child(3),
.sec-table[data-model="3"] thead th:nth-child(4) {
  color: var(--signal-100);
  background-color: #ff683626;
  box-shadow: inset 1px 0 #ff683666, inset -1px 0 #ff683666, inset 0 2px var(--signal-100);
}

.sec-table[data-model="1"] thead th:nth-child(2) .sec-table__pick::after,
.sec-table[data-model="2"] thead th:nth-child(3) .sec-table__pick::after,
.sec-table[data-model="3"] thead th:nth-child(4) .sec-table__pick::after {
  background-color: var(--signal-100);
  border-color: var(--signal-100);
}

/* Security & Trust closing band (replaces the footer CTA panel here). */
.sec-close {
  background-color: var(--stone);
  color: var(--maroon-100);
  text-align: center;
  padding-top: 88px;
  padding-bottom: 88px;
}

.sec-close__inner {
  flex-flow: column;
  align-items: center;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.sec-close__inner .headline-3 {
  margin: 0;
}

.sec-close__text {
  color: var(--maroon-75);
  margin: 16px 0 32px;
  text-wrap: balance;
}

.sec-close__actions {
  flex-flow: wrap;
  justify-content: center;
  align-items: center;
  column-gap: 28px;
  row-gap: 16px;
  display: flex;
}

.sec-close__link {
  color: var(--maroon-75);
  text-decoration: none;
  transition: color .25s ease;
}

.sec-close__link:hover {
  color: var(--signal-100);
}

@media screen and (max-width: 767px) {
  .sec-close {
    padding-top: 64px;
    padding-bottom: 64px;
  }
}

/* Hero client logos, left-aligned with a label (launch: K&E only). */
.hero__logos--trusted {
  justify-content: flex-start;
  column-gap: clamp(40px, 4vw, 72px);
}

.hero__logos-label {
  color: var(--white-50);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  margin: 0;
  font-family: Astasans, Verdana, sans-serif;
  font-size: .75rem;
  font-weight: 700;
}

@media screen and (max-width: 767px) {
  .hero__logos.hero__logos--trusted {
    flex-flow: wrap;
    justify-content: flex-start;
    align-items: center;
    column-gap: 24px;
    display: flex;
  }
}

/* Footer CTA paragraph: even line lengths, no one-word last line. */
.footer__top-container .p-2 {
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   8. About page (about.html). Reuses .sec-hero / .sec__container from the
   Security & Trust page.
   -------------------------------------------------------------------------- */

.ab-hero {
  padding-bottom: 96px;
}

/* Hero: mission (left) and why (right) in one section */
.ab-hero__grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 72px;
  display: grid;
}

/* Cap height of the headline lines up with the first line opposite. */
.ab-hero__title {
  margin: -.12em 0 0;
  font-size: clamp(2.5rem, 4.4vw, 4.5rem);
  line-height: 112%;
  text-wrap: balance;
}

.ab-hero__lead {
  color: var(--white);
  margin: 0 0 24px;
  font-family: "Merriweather 24 Pt", Georgia, serif;
  font-size: clamp(1.15rem, 1.45vw, 1.4rem);
  line-height: 145%;
}

.ab-hero__text {
  color: var(--white-70);
  margin: 0 0 16px;
  font-family: Astasans, Verdana, sans-serif;
  font-size: clamp(.95rem, 1.05vw, 1.0625rem);
  line-height: 160%;
}

.ab-hero__text:last-child {
  margin-bottom: 0;
}

@media screen and (max-width: 991px) {
  .ab-hero__grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

/* Why we built Olin */
.ab-why {
  background-color: var(--stone);
  color: var(--maroon-100);
  padding-top: 112px;
  padding-bottom: 112px;
}

.ab-why__grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: start;
  gap: 64px;
  display: grid;
}

.ab-why__intro .headline-3 {
  margin: 0;
  text-wrap: balance;
}

.ab-why__story .p-1 {
  color: var(--maroon-75);
  margin: 0 0 20px;
}

.ab-why__story .p-1:last-child {
  margin-bottom: 0;
}

.ab-leverage {
  border-top: 1px solid var(--maroon-50);
  margin-top: 88px;
  padding-top: 48px;
}

.ab-leverage__lead {
  max-width: 820px;
  margin: 0 0 40px;
  font-family: "Merriweather 24 Pt", Georgia, serif;
  font-size: clamp(1.25rem, 1.8vw, 1.75rem);
  line-height: 135%;
  text-wrap: balance;
}

.ab-leverage__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  display: grid;
}

.ab-lever {
  background-color: var(--white);
  border: 1px solid var(--stroke-grey);
  border-radius: 6px;
  padding: 32px 32px 36px;
}

.ab-lever__num {
  color: var(--signal-100);
  letter-spacing: .06em;
  margin: 0 0 28px;
  font-family: Astasans, Verdana, sans-serif;
  font-size: .875rem;
  font-weight: 700;
}

.ab-lever__title {
  margin: 0 0 12px;
  font-size: clamp(1.2rem, 1.5vw, 1.5rem);
  line-height: 125%;
}

.ab-lever__text {
  color: var(--maroon-75);
  margin: 0;
}

/* Mission statement under the argument */
.ab-mission {
  border-top: 1px solid var(--maroon-50);
  margin-top: 72px;
  padding-top: 56px;
}

.ab-mission__statement {
  max-width: 980px;
  margin: 0;
  font-family: "Merriweather 24 Pt", Georgia, serif;
  font-size: clamp(1.75rem, 2.9vw, 2.5rem);
  line-height: 125%;
  text-wrap: balance;
}

.ab-mission__result {
  color: var(--maroon-75);
  margin: 20px 0 0;
}

/* Team */
.ab-team {
  background-color: var(--white);
  color: var(--maroon-100);
  padding-top: 112px;
  padding-bottom: 112px;
}

.ab-team__grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 40px 20px;
  display: grid;
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
  .ab-team__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.ab-person__photo {
  aspect-ratio: 4 / 5;
  background-image: linear-gradient(160deg, var(--maroon-75), var(--maroon-100));
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  display: flex;
  overflow: hidden;
}

.ab-person__photo img {
  object-fit: cover;
  object-position: 50% 20%;
  width: 100%;
  height: 100%;
  display: block;
}

.ab-person__photo span {
  color: #ffffff33;
  font-family: "Merriweather 24 Pt", Georgia, serif;
  font-size: clamp(2.5rem, 3.5vw, 3.5rem);
}

.ab-person__name {
  margin: 0 0 6px;
  font-family: "Merriweather 24 Pt", Georgia, serif;
  font-size: clamp(1.125rem, 1.35vw, 1.3rem);
  font-weight: 400;
}

.ab-person__role {
  color: var(--signal-100);
  min-height: 2.6em;
  margin: 0 0 12px;
  font-family: Astasans, Verdana, sans-serif;
  font-size: .875rem;
  line-height: 130%;
  font-weight: 600;
}

.ab-person__bio {
  color: var(--maroon-75);
  flex: 1;
  margin: 0 0 14px;
  font-family: Astasans, Verdana, sans-serif;
  font-size: .875rem;
  line-height: 155%;
}

/* Cards stretch to the tallest in the row; bios grow so every LinkedIn
   link sits on the same line. */
.ab-person {
  flex-flow: column;
  display: flex;
}

.ab-person__body {
  flex-flow: column;
  flex: 1;
  display: flex;
}

.ab-person__link {
  align-self: flex-start;
  color: var(--maroon-75);
  align-items: center;
  column-gap: 8px;
  font-family: Astasans, Verdana, sans-serif;
  font-size: .875rem;
  text-decoration: none;
  transition: color .25s ease;
  display: inline-flex;
}

.ab-person__link:hover {
  color: var(--signal-100);
}

/* Shown but not clickable until the profile link is added. */
.ab-person__link.is-disabled {
  pointer-events: none;
}

/* Advisors */
.ab-advisors {
  border-top: 1px solid var(--stroke-grey);
  margin-top: 88px;
  padding-top: 48px;
}

.ab-advisors__grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 24px;
  display: grid;
}

.ab-advisor {
  align-items: center;
  column-gap: 16px;
  display: flex;
}

.ab-advisor__photo {
  background-color: var(--stone);
  border: 1px solid var(--stroke-grey);
  border-radius: 50%;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 64px;
  height: 64px;
  display: flex;
}

.ab-advisor__photo span {
  color: var(--maroon-50);
  font-family: Astasans, Verdana, sans-serif;
  font-size: .875rem;
  font-weight: 700;
}

.ab-advisor__name {
  margin: 0 0 4px;
  font-family: Astasans, Verdana, sans-serif;
  font-size: 1rem;
  font-weight: 600;
}

.ab-advisor__role {
  color: var(--maroon-75);
  margin: 0;
  font-family: Astasans, Verdana, sans-serif;
  font-size: .875rem;
}

/* Backers */
.ab-backers {
  background-color: var(--stone);
  color: var(--maroon-100);
  padding-top: 56px;
  padding-bottom: 56px;
}

.ab-backers__row {
  border-top: 1px solid var(--maroon-50);
  border-bottom: 1px solid var(--maroon-50);
  align-items: center;
  column-gap: clamp(32px, 4vw, 64px);
  row-gap: 20px;
  padding: 28px 0;
  display: flex;
}

.ab-backers__label {
  color: var(--maroon-75);
  flex: none;
}

.ab-backers__logos {
  flex-flow: wrap;
  align-items: center;
  gap: 16px 40px;
  display: flex;
}

.ab-backer {
  color: var(--maroon-50);
  border: 1px dashed var(--maroon-50);
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 48px;
  font-family: Astasans, Verdana, sans-serif;
  font-size: .75rem;
  display: flex;
}

@media screen and (max-width: 991px) {
  .ab-why,
  .ab-team {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .ab-why__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .ab-mission {
    margin-top: 48px;
    padding-top: 36px;
  }

  .ab-leverage__grid {
    grid-template-columns: 1fr;
  }

  .ab-team__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ab-person__photo {
    aspect-ratio: 1;
  }

  .ab-advisors__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ab-advisors {
    margin-top: 56px;
  }
}

@media screen and (max-width: 767px) {
  .ab-hero {
    padding-bottom: 56px;
  }

  .ab-why,
  .ab-team {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .ab-team__grid {
    grid-template-columns: 1fr;
  }

  .ab-person__photo {
    aspect-ratio: 1;
  }

  .ab-advisors__grid {
    grid-template-columns: 1fr;
  }

  .ab-backers__row {
    flex-flow: column;
    align-items: flex-start;
  }
}

.ab-hero__close {
  color: var(--white);
  font-weight: 700;
}

.ab-advisor__photo {
  overflow: hidden;
}

.ab-advisor__photo img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

/* Preview only (index.html?neutral): charcoal washes instead of maroon. */
.hero-neutral .hero--credit {
  background-color: #141517;
}

.hero-neutral .hero--credit .hero__grad {
  background-image: linear-gradient(90deg, #141517e6 0%, #14151780 32%, #14151700 64%);
}

.hero-neutral .hero--credit .hero__grad.second {
  background-image: linear-gradient(0deg, #141517 0%, #141517b3 20%, #14151700 46%);
}

/* Preview only: muted grade keeps a softened maroon wash. */
.hero-muted .hero--credit {
  background-color: #231a1a;
}

.hero-muted .hero--credit .hero__grad {
  background-image: linear-gradient(90deg, #231a1ae6 0%, #231a1a80 32%, #231a1a00 64%);
}

.hero-muted .hero--credit .hero__grad.second {
  background-image: linear-gradient(0deg, #231a1a 0%, #231a1ab3 20%, #231a1a00 46%);
}

/* Preview switcher bar (shared with the earlier mission switcher style). */
.mission-review {
  z-index: 200;
  color: var(--white);
  background-color: #000000d9;
  border-radius: 8px;
  flex-flow: wrap;
  align-items: center;
  gap: 8px;
  max-width: calc(100vw - 32px);
  padding: 10px 12px;
  font-family: Astasans, Verdana, sans-serif;
  font-size: .8125rem;
  display: flex;
  position: fixed;
  bottom: 16px;
  right: 16px;
}

.mission-review span {
  color: var(--white-70);
  margin-right: 4px;
}

.mission-review button {
  color: var(--white);
  cursor: pointer;
  font: inherit;
  background: #ffffff1a;
  border: 1px solid var(--white-20);
  border-radius: 999px;
  padding: 6px 12px;
}

.mission-review button.is-on {
  background-color: var(--signal-100);
  border-color: var(--signal-100);
}

/* ==========================================================================
   Consistency layer
   One rhythm for every page, taken from the homepage: sections 112px top and
   bottom; in a section intro, label -> heading 16px, heading -> intro text
   16px, intro -> content 56px; intros left-aligned (closing calls to action
   stay centred); one card radius and border; one inner-page hero heading
   size. Kept last so it overrides the per-section rules above.
   ========================================================================== */

:root {
  --section-y: 112px;
  --intro-gap: 16px;
  --content-gap: 56px;
  --inner-hero-top: 152px;
  --card-radius: 8px;
  --card-border: #3513131f;
}

@media screen and (max-width: 991px) {
  :root {
    --section-y: 88px;
    --content-gap: 48px;
    --inner-hero-top: 128px;
  }
}

@media screen and (max-width: 767px) {
  :root {
    --section-y: 64px;
    --content-gap: 40px;
    --inner-hero-top: 112px;
  }
}

/* Section spacing */
.section_features,
.section_product,
.section_beyond,
.section_gap,
.section_media,
.ab-team,
.sec-hosting {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}

.section_gap.sec-gap {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}

/* Sections that continue the one above on the same background keep one gap. */
.section_gap + .section_audience {
  padding-top: 0;
}

.section_audience {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}

/* Strategic Partnerships (homepage): one full-width white card on the light
   background, a small image on the left and the text beside it. */
.section_partner {
  background-color: var(--stone);
  color: var(--maroon-100);
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}

.partner-card {
  background-color: var(--white);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  grid-template-columns: minmax(200px, 1fr) minmax(0, 3fr);
  display: grid;
  overflow: hidden;
}

.partner-card__media {
  background-color: var(--slate-50);
  position: relative;
}

.partner-card__media .image {
  object-fit: cover;
  object-position: 50% 20%;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

/* Text with the button below it, vertically centred in the card. */
.partner-card__body {
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  row-gap: 32px;
  padding: 48px;
  display: flex;
}

.partner-card__label {
  color: var(--signal-100);
  margin: 0 0 var(--intro-gap);
}

.partner-card__title {
  margin: 0 0 var(--intro-gap);
  text-wrap: balance;
}

.partner-card__text {
  color: var(--maroon-75);
  max-width: 820px;
  margin: 0;
  text-wrap: pretty;
}

@media screen and (max-width: 767px) {
  .partner-card {
    grid-template-columns: 1fr;
  }

  .partner-card__media {
    aspect-ratio: 16 / 7;
  }

  .partner-card__body {
    padding: 32px 24px 36px;
  }
}
/* Strategic Partnerships page: hero without a product image, so the dark
   background covers the whole section. */
.section_solution--plain {
  padding-bottom: var(--section-y);
}

.section_solution--plain .solution__bg {
  height: 100%;
}

.section_how {
  padding-top: var(--section-y);
}

/* Inner-page heroes start at the same height below the nav. */
.section_solution,
.sec-hero,
.section-contact.book {
  padding-top: var(--inner-hero-top);
}

/* Contact's content block carries its own 40px offset. */
.section-contact:not(.book) {
  padding-top: calc(var(--inner-hero-top) - 40px);
}

/* Intro: label -> heading -> text */
.label-2.mb-m,
.sec-hero__label,
.sec__eyebrow,
.beyond__intro .label-2 {
  margin-bottom: var(--intro-gap);
}

.section__title-wrap,
.how__left,
.contact__content {
  grid-row-gap: var(--intro-gap);
  row-gap: var(--intro-gap);
}

/* The About title is pulled up to align its cap height; compensate so the
   visible gap matches. */
.ab-hero .sec-hero__label {
  margin-bottom: calc(var(--intro-gap) + 8px);
}

.how__left > img {
  margin-top: calc(var(--content-gap) - var(--intro-gap));
}

.sec-hero__lede,
.sec-hosting__lede {
  margin-top: var(--intro-gap);
}

.sec-tabs {
  margin-top: var(--content-gap);
}

/* Centred Webflow intros (Debt Finance, Deal Diligence, Security) align left
   like every other section intro. */
.gap__container {
  text-align: left;
  grid-row-gap: var(--intro-gap);
  row-gap: var(--intro-gap);
  align-items: flex-start;
  max-width: 920px;
  margin-left: 0;
  margin-right: 0;
}

.gap__container + .gap__cards {
  margin-top: var(--content-gap);
}

/* Centred intros where chosen (Debt Finance sections, Security's data section). */
.is-centered .gap__container,
.is-centered .audience__intro {
  text-align: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
}

.features__intro,
.product__intro,
.beyond__intro,
.audience__intro {
  margin-bottom: var(--content-gap);
}

/* Two-column titles stack on smaller screens: keep the intro gap. */
@media screen and (max-width: 991px) {
  .section__title {
    grid-row-gap: var(--intro-gap);
    row-gap: var(--intro-gap);
  }
}

.sec-gap .gap__container {
  margin-bottom: var(--content-gap);
}

/* Label and intro text colours: muted on light, 70% white on dark. */
.section_gap .label-2,
.section_how .label-2 {
  color: var(--maroon-75);
}

.gap__container > .p-2 {
  color: var(--maroon-75);
}

.section_solution .label-2,
.section_media.bg-dark .label-2,
.section-contact .label-2 {
  color: var(--white-70);
}

.section_solution .section__title-par .p-2,
.section_media.bg-dark .section__title-par .p-2,
.contact__content .p-1 {
  color: var(--white-70);
}

/* Inner-page hero headings: one size (h1.headline-2). The solution heroes'
   title column is widened so the larger heading keeps two lines. */
.solution__title {
  margin: 0;
}

@media screen and (min-width: 992px) {
  .section_solution .section__title-wrap.max-w-5 {
    width: 50%;
    max-width: 680px;
  }

  .section_solution .section__title-par.max-w-4 {
    width: 33.3333%;
  }
}

/* Cards, panels and framed media: one radius and border. */
.feature-card__media,
.product__player,
.beyond-card,
.audience-card,
.col__item-media,
.gap__card,
.how__item,
.ab-person__photo,
.ab-lever,
.sec-zone,
.sec-table-wrap,
.contact__form.book__card,
.solution__dashboard {
  border-radius: var(--card-radius);
}

.beyond-card,
.audience-card {
  border-color: var(--card-border);
}

/* Debt Finance "The Difference": text left (wide), smaller square image right,
   both top-aligned (stacks below 992px, image under the text). */
.media-split {
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  align-items: start;
  column-gap: 80px;
  display: grid;
}

.media-split__label {
  margin: 0 0 var(--intro-gap);
}

.media-split__text .headline-4 {
  margin: 0 0 24px;
  text-wrap: balance;
}

.media-split__text .p-2 {
  color: var(--white-70);
  max-width: 820px;
  margin: 0;
}

.media-split__image .image {
  width: 100%;
  height: auto;
  display: block;
}

@media screen and (max-width: 991px) {
  .media-split {
    grid-template-columns: 1fr;
    row-gap: var(--content-gap);
  }

  .media-split__image {
    max-width: 560px;
  }
}
/* Buttons: the label box is 1.15em tall; give it the label's own scaling font
   size so it always matches the label line (below ~1440px the label shrinks
   and the hidden hover copy used to peek out underneath). */
.re-button__text {
  font-size: clamp(.75rem, 1vw, .875rem);
}

/* Strategic Partnerships page: "Ways we partner" cards on the light background,
   then a white closing CTA. */
.sec-close--white {
  background-color: var(--white);
}

/* Thank-you panels (Contact Us, Book a Consultation): centred, with the text
   kept to a readable width in the wider booking card. */
.form__success .p-2 {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}