/* Hand Coded With Love by We Unfuck */
/* ============================================================
   Homepage styles
   ============================================================ */

/* ---------- Hero ---------- */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--c-ink-900);
  margin-top: -128px;
  min-height: 100vh;
  padding: 208px 16px 32px;
  z-index: 1;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/img/lion1.webp") no-repeat fixed 100% 100% / 570px auto;
  pointer-events: none;
}
.hero__inner {
  position: relative;
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
}
.hero__content { max-width: 684px; padding: 16px 0 48px; }
.hero__title {
  font-size: 60px;
  font-weight: 400;
  line-height: 1.1em;
  letter-spacing: -1.3px;
  color: #fff;
  margin: 0 0 32px;
}
.hero__title b { font-weight: 700; }
.hero__kicker {
  font-family: var(--f-text);
  font-size: 22px;
  font-weight: 600;
  line-height: 1em;
  letter-spacing: -0.2px;
  color: #fff;
  margin: 0;
}
.hero__list {
  list-style: none;
  padding: 27px 0 27px;
  margin: 0;
}
.hero__list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 18px;
  font-weight: 600;
  line-height: 21.6px;
  letter-spacing: normal;
  text-transform: capitalize;
  color: #fff;
  margin-bottom: 3px;
}
.hero__list svg { flex: 0 0 15px; margin-top: 4px; fill: #fff; }
.hero__note {
  font-size: 18px;
  font-weight: 400;
  line-height: 18px;
  color: #fff;
  margin: 0 0 16px;
}
.hero__note b { font-weight: 700; }
.hero__promise {
  font-family: var(--f-text);
  font-size: 18px;
  font-weight: 600;
  font-style: italic;
  line-height: 18px;
  color: #fff;
  margin: 0;
}
.hero .btn-wrap { margin-top: 32px; }
@media (max-width: 1024px) {
  .hero::before { opacity: 0.7; }
  .hero { margin-top: -80px; padding-left: 32px; padding-right: 32px; }
  .hero__content { padding-top: 12px; padding-bottom: 0; }
  .hero__list { padding: 16px 0; }
}
@media (max-width: 767px) {
  .hero {
    margin-top: -88px;
    padding: 112px 16px 48px;
  }
  .hero::before { background-size: 85% auto; }
  .hero__title { font-size: 36px; }
  .hero__kicker { font-size: 20px; }
  .hero__list li { font-size: 15px; line-height: 15px; }
}

/* ---------- Logo carousel ---------- */
.logos {
  background: var(--c-gray-150);
  padding: 32px 32px;
}
.logos__viewport {
  max-width: 1140px;
  margin: 0 auto;
  overflow: hidden;
}
.carousel__track {
  display: flex;
  align-items: center;
  gap: 40px;
  height: 61px;
  will-change: transform;
}
.carousel__track img {
  flex: 0 0 auto;
  width: 129px;
  height: auto;
  display: block;
}

/* ---------- Stats ---------- */
.stats {
  background: var(--c-gray-150);
  padding: 0 32px;
}
.stats__grid {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2px;
}
.stats__card {
  background: #fff;
  padding: 48px 32px 40px;
}
.stats__label {
  font-family: var(--f-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1em;
  letter-spacing: normal;
  color: var(--c-secondary);
  margin: 0 0 32px;
}
.stats__number {
  font-family: var(--f-display);
  font-size: 60px;
  font-weight: 500;
  line-height: 1em;
  letter-spacing: -2.5px;
  color: var(--c-text);
  text-align: right;
}
.stats__divider {
  border: 0;
  border-top: 1px solid #000;
  margin: 22px 0 0;
}
@media (max-width: 767px) {
  .stats__grid { grid-template-columns: 1fr; gap: 18px; }
}

/* ---------- Quote band ---------- */
.quote {
  background: var(--c-gray-150);
  padding: 64px 64px;
}
.quote__inner {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  gap: 20px;
}
.quote__mark { flex: 0 0 240px; }
.quote__mark svg { width: 25px; height: 25px; fill: #69727D; }
.quote__body { flex: 1; }
.quote__text {
  font-size: 20px;
  font-weight: 400;
  line-height: 27px;
  letter-spacing: 0;
  color: var(--c-text);
  margin: 0 0 24px;
}
.quote__author {
  display: flex;
  align-items: center;
  gap: 10px;
}
.quote__avatar { width: 40px; height: 40px; object-fit: cover; border-radius: 50%; }
.quote__name {
  font-family: var(--f-display);
  font-size: 16px;
  font-weight: 800;
  line-height: 1em;
  text-transform: capitalize;
  color: var(--c-text);
  margin: 0;
}
.quote__role {
  font-family: var(--f-display);
  font-size: 15px;
  font-weight: 600;
  line-height: 1em;
  text-transform: capitalize;
  color: var(--c-steel);
  margin: 5px 0 0;
}
@media (max-width: 767px) {
  .quote { padding: 48px 16px; }
  .quote__inner { flex-direction: column; gap: 24px; }
  .quote__mark { flex: 0 0 auto; }
}

/* ---------- Card sections (shared) ---------- */
.cardsec { background: var(--c-gray-150); padding: 0 32px; }
.cardsec__stack {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cardsec__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}
.card {
  background: #fff;
}
.card--head { padding: 96px 64px 79px; }
.eyebrow-label {
  font-family: var(--f-display);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2em;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--c-steel);
  margin: 0 0 16px;
}
.h2-title {
  font-family: var(--f-display);
  font-size: 48px;
  font-weight: 400;
  line-height: 1.2em;
  letter-spacing: -0.5px;
  text-transform: capitalize;
  color: #061B31;
  margin: 0;
}
.h2-title b { font-weight: 700; }
.card--dark { background: var(--c-ink-800); }
.card--dark .h2-title { color: #fff; }
.cardsec--dark .cardsec__stack { background: #252729; }

/* familiar cells */
.cell { background: #fff; padding: 48px 64px; }
.cell__title {
  font-family: var(--f-display);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.2em;
  letter-spacing: -0.4px;
  color: var(--c-text);
  margin: 0 0 16px;
  max-width: 441px;
}
.cell__title b { font-weight: 700; }
.cell p {
  font-size: 17px;
  font-weight: 400;
  line-height: 23px;
  letter-spacing: 0;
  color: var(--c-text);
  margin: 0;
  max-width: 441px;
}

/* ---------- Mid CTA strip ---------- */
.midcta {
  background: var(--c-gray-150);
  padding: 32px 64px 64px;
}
.midcta__inner {
  max-width: 999px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.midcta__text {
  flex: 0 0 66.6%;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3em;
  letter-spacing: -0.2px;
  color: var(--c-text);
  margin: 0;
  padding: 16px 0;
}
.midcta__btn { flex: 1; text-align: right; }
.btn--solid-steel {
  background: var(--c-steel);
  border-color: var(--c-steel);
  color: #fff;
}
.btn--solid-steel:hover { color: #fff !important; border-color: var(--c-primary) !important; background-color: var(--c-primary) !important; }
.btn--solid-steel:hover .btn__text { left: -1rem; }
.btn--solid-steel:hover .btn__icon { right: 1rem; opacity: 1; color: #fff !important; }
@media (max-width: 767px) {
  .midcta__inner { flex-direction: column; gap: 0; }
  .midcta__text { flex: none; padding: 16px 0 0; }
  .midcta__btn { text-align: center; }
}

/* ---------- How we work rows ---------- */
.how-row { background: #fff; display: flex; padding: 64px; gap: 0; }
.how-row__left { flex: 0 0 41%; }
.how-row__right { flex: 1; padding-right: 0; }
.step-label { margin-bottom: 8px; }
.how-row__title {
  font-family: var(--f-display);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.2em;
  letter-spacing: -0.4px;
  color: var(--c-text);
  margin: 0;
}
.how-row__title b { font-weight: 700; }
.how-row__right p {
  font-size: 17px;
  font-weight: 400;
  line-height: 23px;
  letter-spacing: 0;
  color: var(--c-text);
  margin: 0;
  max-width: 575px;
}
@media (max-width: 767px) {
  .how-row { flex-direction: column; padding: 48px 16px; gap: 16px; }
  .how-row__left { flex: none; }
}

/* ---------- Old way / New way ---------- */
.way-card { background: var(--c-ink-800); padding: 64px; }
.way-card__title {
  font-family: var(--f-display);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.2em;
  letter-spacing: -0.4px;
  color: #fff;
  margin: 0 0 16px;
}
.way-card__title b { font-weight: 700; }
.way-list { list-style: none; margin: 0; padding: 0; }
.way-list li {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  font-size: 17px;
  font-weight: 400;
  line-height: 23px;
  letter-spacing: 0;
  color: var(--c-gray-200);
  margin-bottom: 20px;
}
.way-list li:last-child { margin-bottom: 0; }
.way-list svg { flex: 0 0 20px; height: 20px; margin-top: 1px; }
.way-list--x svg { fill: var(--c-gray-200); padding: 2px 3px; box-sizing: border-box; }
.way-list--check svg { fill: var(--c-primary); }
.way-list--check li { color: #fff; }

/* ---------- Case studies ---------- */
.case-row {
  position: relative;
  background-color: var(--c-ink-800);
  background-size: cover;
  background-position: 50% 50%;
  padding: 64px 64px 49px;
}
.case-row::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0.75;
}
.case-row > * { position: relative; }
.case-row .eyebrow-label { margin-bottom: 8px; }
.case-row__title {
  font-family: var(--f-display);
  font-size: 30px;
  font-weight: 800;
  line-height: 1.2em;
  letter-spacing: -0.5px;
  color: #fff;
  margin: 0 0 16px;
}
.case-row__text {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.3em;
  letter-spacing: -0.2px;
  color: #fff;
  margin: 0 0 16px;
  max-width: 666px;
}
.link-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--f-display);
  font-size: 14px;
  font-weight: 700;
  line-height: 1em;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #fff;
  padding: 5px 8px 8px 0;
  transition: color .3s;
}
.link-btn svg { width: 14px; height: 12px; fill: currentColor; }
.link-btn:hover { color: var(--c-primary); }
@media (max-width: 767px) {
  .case-row { padding: 48px 24px; }
}

/* ---------- Team / since 2001 ---------- */
.team-text { background: #fff; padding: 64px; }
.team-text p {
  max-width: 442px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.3em;
  letter-spacing: -0.2px;
  color: var(--c-text);
  margin: 0 0 27px;
  max-width: 441px;
}
.team-text .btn-wrap { display: block; text-align: right; margin-top: 59px; }
.team-photo {
  background-size: cover;
  background-position: 50% 50%;
  min-height: 400px;
}
@media (max-width: 1024px) {
  .cardsec__row--team { display: flex; flex-direction: column-reverse; }
  .cardsec__row--team .team-photo { min-height: 440px; }
}
@media (max-width: 767px) {
  .team-text { padding: 40px 24px; }
  .team-text .btn-wrap { text-align: center; }
}

/* shared responsive for card grids */
@media (max-width: 767px) {
  .cardsec { padding: 0 16px; }
  .cardsec__row { grid-template-columns: 1fr; }
  .card--head { padding: 56px 24px 40px; }
  .h2-title { font-size: 33px; }
  .cell { padding: 40px 24px 32px; }
  .way-card { padding: 40px 24px; }
}

/* sub-line inside header cards */
.card-sub {
  font-family: var(--f-text);
  font-size: 18px; font-weight: 600; line-height: 18px; letter-spacing: -0.2px;
  color: var(--c-text);
  margin: 8px 0 0; padding: 0;
}

/* ---------- Tablet/mobile fidelity overrides ---------- */
@media (max-width: 1024px) and (min-width: 768px) {
  .carousel__track img { width: 117px; }
  .carousel__track { height: 55px; }
}
@media (max-width: 767px) {
  .carousel__track img { width: 28vw; }
  .carousel__track { height: auto; gap: 24px; }
  .logos { padding: 35px 16px; }
  .stats { padding: 0 16px; }
  .stats__card { padding: 32px 16px 56px; }
  .stats__grid { gap: 16px; }
  .quote { padding: 48px 48px 64px; }
  .quote__text { font-size: 18px; line-height: 1.3; }
  .cell { padding: 48px 16px; }
  .cell__title { font-size: 25px; }
  .card--head { padding: 64px 16px 64px; }
  .how-row { padding: 48px 16px; }
  .how-row__title { font-size: 25px; }
  .way-card { padding: 48px 16px; }
  .cardsec__row--way { grid-template-columns: 1fr; }
  .way-list { margin-top: 33px; }
  .way-list li { font-size: 18px; line-height: 23.4px; margin-bottom: 0; padding: 3px 0; }
  .way-card__title { font-size: 25px; }
  .case-row {
    padding: 16px 16px 64px;
    min-height: 50vh;
    display: flex; flex-direction: column; justify-content: center;
  }
  .team-text { padding: 32px 16px 16px; }
  .team-cta { text-align: center !important; }
  .cardsec__row--team .team-photo { min-height: 245px; }
  .midcta { padding: 32px 32px 81px; }
}

.team-cta { display: block; text-align: right; margin-top: 59px; }

/* ---------- Tablet-only (768-1024) layout dial-in ---------- */
@media (max-width: 1024px) and (min-width: 768px) {
  .quote { padding: 48px 64px 28px; }
  .card--head { padding: 64px 32px; }
  .cardsec__row { grid-template-columns: 1fr; }
  .cardsec__row--way { grid-template-columns: 1fr 1fr; }
  .cell { padding: 48px 32px; }
  .cell p, .cell__title { max-width: none; }
  .how-row { padding: 48px 32px; }
  .cardsec__stack > .how-row:last-child { margin-top: 24px; margin-bottom: 23px; }
  .way-card { padding: 32px; }
  .case-row {
    padding: 16px 32px 64px;
    min-height: 50vh;
    display: flex; flex-direction: column; justify-content: center;
  }
  .case-row__text { max-width: 483px; }
  .team-text p { max-width: none; }
}

@media (max-width: 1024px) {
  .team-sec .card--head { padding-bottom: 48px; }
}
@media (max-width: 767px) {
  .team-text .btn-wrap { margin-bottom: 32px; }
  .case-row .eyebrow-label { margin-bottom: 16px; }
  .case-row__title { margin-bottom: 24px; }
}