/* Original Vaulter hero rules, isolated from the rest of the new site. */
.hero {
  padding: 80px 80px 40px;
  min-height: 100vh;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  background: url("../assets/brand/logo-vertical-simple-light.65207ab251694173.svg") no-repeat bottom right;
  background-size: cover;
  background-color: var(--color-background);
  line-height: 1;
}
.hero__row { display: flex; flex-wrap: wrap; align-content: center; align-items: center; width: 100%; }
.hero__column { flex: 50%; max-width: 50%; }
.hero .hero-title { margin: 12px 0 36px; }
.hero .nowrap { white-space: nowrap; }
.hero a { text-decoration: none; }
.hero__visual { text-align: right; }
.hero__product-image {
  display: block;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(67, 76, 96, .06);
  border-radius: 8px;
  background: #f8f5f0;
  box-shadow:
    0 16px 40px -24px rgba(79, 43, 57, .20),
    0 2px 10px rgba(33, 41, 62, .025);
}
.hero__product-image img { width: 100%; mix-blend-mode: multiply; }
.hero__cta { display: inline-block; margin-top: var(--space-60); }
@media (max-width: 1279px) { .hero { padding-right: var(--space-20); } }
@media (max-width: 1149px) {
  .hero { padding-left: var(--space-40); }
  .hero .hero-title { margin-right: var(--space-20); }
  .hero .eyebrow { margin-right: var(--space-20); }
  .hero .nowrap { white-space: break-spaces; }
}
@media (max-width: 759px) {
  .hero .hero-title { margin-right: 0; margin-bottom: var(--space-24); }
  .hero .eyebrow { margin-right: 0; }
  .hero { padding-right: 0; }
}
@media (max-width: 599px) {
  .hero .hero-title, .hero .eyebrow { margin-right: var(--space-40); }
  .hero__column { flex: 100%; max-width: 100%; }
  .hero { padding-top: 140px; }
  .hero__visual { text-align: center; }
  .hero__cta { margin: 30px 0; }
}
@media (max-width: 399px) { .hero { padding-left: var(--space-20); } }
@media (max-width: 319px) { .hero { padding-top: 100px; } }

/* New copy uses the existing body typography and original animated CTA. */
.hero__description { line-height: var(--leading-body); }
@media (max-width: 599px) { .hero__description { margin-right: var(--space-40); } }


/* Give the full dashboard a readable column and even gutters at every size. */
.page--home .hero {
  min-height: 100svh;
  padding: clamp(128px, 9vw, 160px) var(--gutter) clamp(64px, 6vw, 96px);
}

.page--home .hero__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 72px);
  max-width: 1760px;
  margin-inline: auto;
}

.page--home .hero__column { max-width: none; }
.page--home .hero-title,
.page--home .hero .eyebrow,
.page--home .hero__description { margin-right: 0; }
.page--home .hero__cta { margin: var(--space-60) 0 0; }

@media (max-width: 1099px) {
  .page--home .hero__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-48); }
  .page--home .hero__column:first-child { max-width: 780px; }
  .page--home .hero__visual { width: 100%; max-width: 900px; justify-self: center; }
}

@media (max-width: 599px) {
  .page--home .hero__row { gap: var(--space-40); }
  .page--home .hero__cta { margin-top: var(--space-32); }
}

.services-band { background: var(--color-surface); padding-block: var(--space-48); }
.services-band__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-40); }
.services-band__item + .services-band__item { border-left: 1px solid #434c6033; padding-left: var(--space-40); }
.services-band .item-title { margin-bottom: var(--space-16); }
.services-band p { font-size: var(--type-small); line-height: var(--leading-body); }
@media (max-width: 820px) {
  .services-band__grid { grid-template-columns: 1fr; gap: var(--space-28); }
  .services-band__item + .services-band__item { border-left: 0; padding-left: 0; border-top: 1px solid #434c6033; padding-top: var(--space-28); }
}

.services-band__icon { display: block; width: 56px; height: 56px; margin-bottom: var(--space-20); color: var(--color-text, #434c60); }
.services-band__icon-accent { stroke: #a0145e; }

/* Offering card layout, using the existing Vaulter type and colour tokens. */
.offering__intro .section-title { max-width: 900px; }
.offering__intro > p { max-width: 1100px; margin-top: var(--space-24); }
.offering__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-32); }
.offering-card { display: flex; flex-direction: column; min-width: 0; background: var(--color-background); opacity: 0.9; }
.offering-card__image { display: block; aspect-ratio: 8 / 5; overflow: hidden; }
.offering-card__image img { width: 100%; height: 100%; object-fit: cover; }
.offering-card__body { padding: var(--space-24); display: flex; flex: 1; flex-direction: column; align-items: flex-start; }
.offering-card__link { margin-top: auto; padding-top: var(--space-24); }
.offering-card__link .cta__row { flex-wrap: nowrap; align-items: center; }
.offering-card__link .cta__copy { margin-top: 0; line-height: 1.5; }
.offering-card .card-title { margin-bottom: var(--space-16); }
.offering-card p { font-size: var(--type-small); line-height: var(--leading-body); }
@media (max-width: 820px) { .offering__cards { grid-template-columns: 1fr; } }

.platform-overview__intro { align-items: end; margin-bottom: var(--space-64); }
.platform-overview__summary { max-width: 48ch; padding-bottom: 4px; }

.platform-overview__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-40) clamp(32px, 6vw, 96px);
}
.platform-overview__item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: var(--space-24);
  border-top: 1px solid var(--color-line);
  padding-top: var(--space-32);
}
.platform-overview__icon { display: block; width: 48px; height: 48px; }
.platform-overview__accent { stroke: var(--color-accent); }
.platform-overview__item .item-title { margin-bottom: var(--space-16); }
.platform-overview__item p { font-size: var(--type-small); }
.platform-overview__link { margin-top: var(--space-48); }

@media (max-width: 820px) {
  .platform-overview__intro { gap: var(--space-24); margin-bottom: var(--space-40); }
  .platform-overview__summary { max-width: var(--measure); padding-bottom: 0; }
}
@media (max-width: 640px) {
  .platform-overview__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-32); }
  .platform-overview__item { grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-16); padding-top: var(--space-24); }
  .platform-overview__icon { width: 40px; height: 40px; }
  .platform-overview__link { margin-top: var(--space-32); }
}

/* An editorial introduction beside three distinct audience summaries. */
.who-we-work-with__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(40px, 7vw, 112px);
  align-items: start;
}
.who-we-work-with__intro > p:last-child { margin-top: var(--space-28); max-width: 42ch; }
.who-we-work-with__audiences { display: grid; gap: var(--space-24); }
.who-we-work-with__audience {
  border-top: 2px solid var(--color-accent);
  border-radius: 0 0 8px 8px;
  padding: var(--space-32);
  background: var(--color-background);
}
.who-we-work-with__audience .item-title { margin-bottom: var(--space-16); max-width: 26ch; }
.who-we-work-with__audience p { font-size: var(--type-small); max-width: 58ch; }

@media (max-width: 820px) {
  .who-we-work-with__layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-40); }
  .who-we-work-with__intro .section-title { max-width: 20ch; }
  .who-we-work-with__intro > p:last-child { max-width: var(--measure); }
  .who-we-work-with__audience { padding: var(--space-24); }
}

/* Matterline's homepage location layout with Vaulter's shared type and controls. */
.home-location { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--color-background); }
.home-location__copy { align-self: center; min-width: 0; padding: clamp(40px, 4vw, 64px) clamp(32px, 4vw, 64px) clamp(40px, 4vw, 64px) max(var(--gutter), calc((100vw - var(--shell-width)) / 2)); }
.home-location__intro { margin-block: var(--space-28); max-width: var(--measure); }
.home-location__visual { position: relative; min-width: 0; overflow: hidden; }
.home-location__visual picture, .home-location__visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 58%; }
@media (max-width: 820px) {
  .home-location { grid-template-columns: minmax(0, 1fr); }
  .home-location__copy { padding: var(--space-48) var(--gutter); }
  .home-location__visual { height: clamp(290px, 47vw, 380px); }
}

/* Reusable three-column text sections, independent of page identity. */
.columns-intro .section-title { max-width: 1000px; }
.columns-intro > p:last-child { max-width: 1100px; margin-top: var(--space-24); }
.columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-40); }
.columns article { border-top: 1px solid var(--color-surface); padding-top: var(--space-32); min-width: 0; }
.columns--strong-lines article { border-color: var(--color-line); }
.columns .item-title { margin-bottom: var(--space-20); }
.columns p { font-size: var(--type-small); line-height: var(--leading-body); }
.columns-note { margin-top: var(--space-48); }
@media (max-width: 820px) { .columns { grid-template-columns: 1fr; gap: var(--space-32); } }