/* ==========================================================================
   Home page
   Breakpoints follow the original: tablet ≤1024px, mobile ≤767px.
   Section content width: 1140px desktop, 80% tablet, 90% mobile.
   ========================================================================== */

/* ---------- Hero ---------- */
.home-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  min-height: 80vh;
  padding: 10px;
  background: var(--c-gray-100) url("/assets/uploads/2024/01/Gradient-BG.svg") top center / cover no-repeat;
}
.home-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: min(907px, 100% - 20px);
  margin-top: 116px;
  padding: 10px 0;
}
.home-hero__row,
.home-hero__line {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.home-hero__row { width: 90%; padding: 10px; gap: 24px; }
.home-hero__row--design { padding: 0; gap: 40px; margin-bottom: -24px; }

.home-hero__word {
  display: block;
  flex: 0 0 auto;
  margin: 0 0 14px;
  font-family: var(--f-head);
  font-size: 100px;
  font-weight: 600;
  line-height: 100px;
  color: var(--c-navy);
  white-space: nowrap;
  text-align: center;
}
.home-hero__img { flex: 0 0 auto; height: auto; }
.home-hero__img--plus { width: 182px; }
.home-hero__img--curve { width: 163px; }
.home-hero__img--toggle { width: 284px; }

/* Desktop: intro + "simplify." / "impact." block */
.home-hero__split {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 93%;
  margin-top: -50px;
  padding: 10px;
}
.home-hero__intro { flex: 0 0 189px; margin-left: 16px; padding: 10px 10px 38.8px; }
.home-hero__intro p {
  margin: 0;
  font-family: var(--f-head);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--c-navy);
}
.home-hero__stack {
  display: flex;
  flex: 0 0 599px;
  flex-direction: column;
  align-items: flex-start;
  padding: 10px;
}
.home-hero__line { justify-content: flex-start; padding: 10px; }
.home-hero__line--simplify { flex: 0 0 auto; width: 600px; gap: 4px; margin-bottom: -8px; }
.home-hero__line--impact { flex: 0 0 auto; width: 604px; gap: 16px; }
.home-hero__line .home-hero__img--heart { width: 144px; }
.home-hero__line .home-hero__img--graphs { width: 170px; }

/* Tablet / mobile intro paragraph */
.home-hero__intro-sm {
  width: 100%;
  margin: 0;
  padding-bottom: 28.8px;
  font-family: var(--f-head);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--c-navy);
  text-align: center;
}

/* Scroll-down chevron */
.home-hero__scroll { padding: 0 30px 30px; line-height: 0; }
.home-hero__scroll a {
  display: flex;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-bottom: 4.8px;
  color: var(--c-text);
}
.home-hero__scroll a:hover, .home-hero__scroll a:focus-visible { color: var(--c-text); }
.home-hero__scroll svg { width: 21px; height: 24px; fill: currentColor; }
.home-anchor { height: 0; }

@media (max-width: 1024px) {
  .home-hero__inner { width: calc(80% - 20px); }
  .home-hero__row--design { gap: 16px; margin-bottom: -40px; }
  .home-hero__row--innovate,
  .home-hero__row--simplify { margin-bottom: -40px; }
  .home-hero__word { font-size: 50px; margin-bottom: 6px; }
  .home-hero__img--plus { width: 167px; }
  .home-hero__img--toggle-sm { width: 149px; }
  .home-hero__row .home-hero__img--heart { width: 128px; }
  .home-hero__row .home-hero__img--graphs { width: 154px; }
}
@media (max-width: 767px) {
  .home-hero__inner { width: calc((90% - 20px) * .9); }
  .home-hero__row { width: 100%; }
  .home-hero__row--design { gap: 9px; }
  .home-hero__row--innovate, .home-hero__row--simplify { gap: 8px; }
  .home-hero__row--impact { gap: 10px; }
  .home-hero__word { font-size: 32px; margin-bottom: -22.8px; }
  .home-hero__img--plus { width: 94px; }
  .home-hero__img--toggle-sm { width: 76px; }
  .home-hero__row .home-hero__img--heart { width: 66px; }
  .home-hero__row .home-hero__img--graphs { width: 97px; }
}

/* ---------- Shared section widths ---------- */
.home-work__grid,
.home-approach__inner,
.home-articles__inner,
.home-roots__inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
}
@media (max-width: 1024px) {
  .home-work__grid, .home-approach__inner, .home-articles__inner, .home-roots__inner { max-width: 80%; }
}
@media (max-width: 767px) {
  .home-work__grid, .home-approach__inner, .home-articles__inner, .home-roots__inner { max-width: 90%; }
}

/* ---------- Work (case-study cards) ---------- */
.home-work { padding: 100px 0; background: var(--c-navy); }
.home-work__grid {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  gap: 40px;
}
.work-card {
  position: relative;
  display: flex;
  flex: 1 0 40%;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  min-height: 400px;
  padding: 20px;
  border: 1px solid var(--c-accent);
  border-radius: 8px;
  background: center / cover no-repeat;
  color: var(--c-navy);
  font-weight: 400;
  text-decoration: none;
  transition: all .3s ease-in-out;
}
.work-card:hover, .work-card:focus-visible { color: var(--c-navy); transform: scale(1.03); }
.work-card:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.work-card--wide {
  flex-basis: 100%;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}
.work-card--explore-wide { background-image: url("/assets/uploads/2024/03/Voiceitt-explore-full-screen-scaled.jpg"); }
.work-card--explore { background-image: url("/assets/uploads/2024/01/Namogoo-cover-image-1.jpg"); }
.work-card--ds { background-image: url("/assets/uploads/2024/02/DS.jpg"); }
.work-card--app { background-image: url("/assets/uploads/2024/01/Voiceitt-background-no-border.jpg"); }
.work-card--annotation { background-image: url("/assets/uploads/2024/03/Gringotts-small.jpg"); }
.work-card--annotation-wide { background-image: url("/assets/uploads/2024/03/Gringotts-home-screen-image-scaled.jpg"); }
.work-card--support { background-image: url("/assets/uploads/2024/02/Customer-support-home-page.jpg"); }
.work-card--hotel { background-image: url("/assets/uploads/2024/03/Houzzz-small.jpg"); }

.work-card__aside {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 30%;
  padding: 10px;
}
.work-card__body {
  display: flex;
  flex: 0 1 100%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  min-width: 0;
  padding: 10px;
}
.work-card__aside .work-card__body { flex: 0 0 auto; }
.work-card__logo { width: auto; height: 21px; }
.work-card__title {
  margin: 0 0 20px;
  font-family: var(--f-head);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--c-navy);
}
.work-card__aside .work-card__title { margin-bottom: 4px; }
.work-card__title--light { margin-bottom: 22.4px; color: #fff; }
.work-card__title--lg { margin-bottom: -1.2px; font-size: 18px; }
.work-card__subtitle {
  margin: 0;
  padding-bottom: 22.4px;
  font-family: var(--f-head);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--c-navy);
}

/* Lock badge (password-protected case studies). Mirrors the original
   50px icon that slightly overhangs its shrunk flex slot. */
.work-card__lock { flex: 0 1 50px; min-width: 0; height: 55px; }
.work-card__lock--offset { margin-left: 24px; }
.work-card__lock svg { width: 50px; height: 50px; max-width: none; }

/* "View Case Study" pill on the wide cards */
.work-card__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 200px;
  padding: 8px 24px 6px;
  border: 1px solid var(--c-gray-300);
  border-radius: 100px;
  background: #fff;
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--c-navy);
  transition: background .3s, border .3s;
}
.work-card__cta:hover { background: var(--c-gray-50); border-color: var(--c-accent); }
.work-card__cta-text { display: block; padding-bottom: 2.4px; }
.work-card__cta-icon { display: flex; justify-content: center; width: 16px; height: 21px; color: #69727d; }
.work-card__cta-icon svg { width: 14px; height: 16px; fill: currentColor; }

@media (max-width: 1024px) {
  .work-card { padding: 16px; }
}
@media (max-width: 767px) {
  .home-work__grid { flex-direction: column; flex-wrap: nowrap; }
  .work-card { flex: 0 0 auto; width: 100%; }
  .work-card:hover { transform: none; }
}

/* ---------- Quote + process ---------- */
.home-approach { padding: 100px 0; background: var(--c-gray-100); }
.home-approach__inner { display: flex; flex-direction: column; gap: 24px; }

.home-quote { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 10px; text-align: center; }
.home-quote p { margin: 0; font-family: var(--f-head); font-weight: 600; line-height: 1.2; }
.home-quote__lead { font-size: 40px; color: var(--c-primary); }
.home-quote__rest, .home-quote__cite { font-size: 18px; color: var(--c-text); }

.home-process {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 48px;
  margin: 0;
  padding: 10px;
  list-style: none;
}
.home-process__item {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 200px;
  min-height: 200px;
  padding: 16px 0 0;
  border-radius: 400px;
  background: #fff;
  box-shadow: 0 0 16px 0 rgba(223, 223, 223, .5);
  text-align: center;
}
.home-process__icon { width: 40px; height: 45px; }
.home-process__icon lord-icon { display: block; width: 40px; height: 40px; }
.home-process__name {
  margin: 0 0 -8.6px;
  font-family: var(--f-head);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--c-navy);
}
.home-process__desc { margin: 0; padding-bottom: 22.4px; font-size: 14px; line-height: 1.2; color: var(--c-text); }

.home-approach__text { margin-top: 16px; padding: 10px; }
.home-approach__text p {
  margin: 0 0 16.8px;
  font-family: var(--f-head);
  font-size: 18px;
  line-height: 1.2;
  color: var(--c-text);
  text-align: center;
}
.home-approach__text p:last-child { margin-bottom: 28.8px; }

@media (max-width: 1024px) {
  /* The original nests a boxed container here: content is 80% (tablet) / 90% (mobile) wide */
  .home-process { flex-wrap: wrap; padding-inline: calc(10px + (100% - 20px) * .1); }
  .home-approach__text p { max-width: 80%; margin-inline: auto; }
}
@media (max-width: 767px) {
  .home-process { flex-direction: column; flex-wrap: nowrap; padding-inline: calc(10px + (100% - 20px) * .05); }
  .home-process__item { width: 100%; }
  .home-approach__text p { max-width: 90%; }
}

/* ---------- Articles ---------- */
.home-articles { padding: 100px 0; background: var(--c-navy); }
.home-articles__inner { display: flex; align-items: flex-start; justify-content: center; gap: 40px; }
.home-article { display: flex; flex: 1 1 0; flex-direction: column; gap: 24px; min-width: 0; padding: 10px; }
.home-article__media { display: block; width: 70%; padding: 10px; }
.home-article__media img { width: 100%; }
.home-article__body { display: flex; flex-direction: column; align-items: flex-start; padding: 10px; color: #fff; }
.home-article__label { margin: 0 0 3.2px; font-size: 12px; font-weight: 700; line-height: 1.2; }
.home-article__title { margin: 0 0 15.2px; font-size: 22px; font-weight: 600; line-height: 1.2; color: #fff; }
.home-article__desc { margin: 0 0 18.4px; font-size: 14px; line-height: 1.2; }
.home-article__btn {
  display: inline-block;
  padding: 10px 40px;
  border: 1px solid var(--c-gray-300);
  border-radius: 100px;
  background: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--c-navy);
  transition: all .3s;
}
.home-article__btn:hover, .home-article__btn:focus-visible { color: var(--c-navy); background: var(--c-gray-100); }

@media (max-width: 767px) {
  .home-articles__inner { flex-direction: column; align-items: stretch; }
  .home-article { flex: 0 0 auto; }
  .home-article__media { width: 100%; }
}

/* ---------- Roots / map ---------- */
.home-roots { padding: 100px 0; background: #fff; }
.home-roots__inner { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.home-roots__title {
  width: 100%;
  margin: 10px 0;
  padding: 0 10px;
  font-size: 40px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--c-primary);
  text-align: center;
}
.home-roots__text {
  margin: 0 0 16.8px;
  font-family: var(--f-head);
  font-size: 18px;
  line-height: 1.2;
  color: var(--c-text);
  text-align: center;
}
.home-roots__map { width: 1024px; max-width: 100%; }