/* Romoni Portfolio Hero — Figma exact match (hero 8 / 941:10582, frame 1440x760) */

.romoni-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 760px;
  overflow: hidden;
  background-color: #d9d9d8;
  color: #ffffff;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 890' preserveAspectRatio='none'%3E%3Cpath d='M1440 0V890H1299.13C1282.07 889.43 1268.35 875.57 1268.18 858.39L1268.02 843.22L1266.46 844.78C1258.56 852.51 1244.25 863.52 1234.62 868.96C1215.43 879.67 1195.61 885.93 1172.87 888.02H1172.77L1158.12 889.38C1153.54 889.83 1149.12 890 1144.71 890H0V0L1440 0Z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 890' preserveAspectRatio='none'%3E%3Cpath d='M1440 0V890H1299.13C1282.07 889.43 1268.35 875.57 1268.18 858.39L1268.02 843.22L1266.46 844.78C1258.56 852.51 1244.25 863.52 1234.62 868.96C1215.43 879.67 1195.61 885.93 1172.87 888.02H1172.77L1158.12 889.38C1153.54 889.83 1149.12 890 1144.71 890H0V0L1440 0Z' fill='%23000'/%3E%3C/svg%3E");
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
}

.romoni-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.romoni-hero__bg-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}

.romoni-hero__bg-gradient {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 182px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #151515 100%);
  pointer-events: none;
}

.romoni-hero__inner {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  height: 100%;
  box-sizing: border-box;
  padding: 140px 120px 64px;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}

.romoni-hero__title-block {
  position: absolute;
  left: 120px;
  bottom: 64px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
}

.romoni-hero__title {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 42px;
  line-height: 50.4px;
  letter-spacing: 0;
  color: #ffffff;
  margin: 0;
  white-space: nowrap;
}

.romoni-hero__subtitle {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 25.6px;
  letter-spacing: 0;
  color: #ffffff;
  margin: 0;
  max-width: 389px;
}

.romoni-hero__meta {
  position: absolute;
  left: 717px;
  bottom: 64px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 115px;
}

.romoni-hero__meta-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.romoni-hero__meta-solutions {
  width: 227px;
}

.romoni-hero__meta-label {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 28.8px;
  letter-spacing: 0;
  color: #ffffff;
  margin: 0;
}

.romoni-hero__chips {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.romoni-hero__chips-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.romoni-hero__chip {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 16px;
  border-radius: 999px;
  background-color: rgba(244, 244, 244, 0.8);
  border: 1px solid transparent;
  color: #000000;
  -webkit-backdrop-filter: blur(64px);
  backdrop-filter: blur(64px);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 19.6px;
  letter-spacing: 0;
}

.romoni-hero__client-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #ffffff;
  text-decoration: none;
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 22.4px;
  letter-spacing: 0;
}

.romoni-hero__client-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #ffffff;
  color: #000000;
  transition: transform 0.2s ease;
}

.romoni-hero__client-link:hover .romoni-hero__client-arrow {
  transform: translate(1px, -1px);
}

.romoni-hero__client-arrow svg {
  width: 4px;
  height: 4px;
  display: block;
}

@media (max-width: 1279px) {
  .romoni-hero {
    height: auto;
    min-height: 560px;
  }

  .romoni-hero__inner {
    position: static;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    padding: 120px 24px 48px;
  }

  .romoni-hero__title-block {
    position: static;
    gap: 12px;
  }

  .romoni-hero__title {
    font-size: 34px;
    line-height: 41px;
    white-space: normal;
  }

  .romoni-hero__subtitle {
    max-width: none;
  }

  .romoni-hero__meta {
    position: static;
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
    margin-top: 40px;
  }

  .romoni-hero__bg-gradient {
    height: 260px;
  }
}

/* ===== Romoni Section 2 — Overview (Figma node 941:10655, frame 1440x1060) ===== */

.romoni-s2 {
  background-color: #ffffff;
  width: 100%;
}

.romoni-s2__inner {
  max-width: 1440px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 120px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.romoni-s2__eyebrow {
  flex-shrink: 0;
  width: 91px;
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 32px;
  letter-spacing: 0;
  color: #111111;
  margin: 0;
}

.romoni-s2__content {
  margin-left: 281px;
  max-width: 807px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.romoni-s2__title {
  font-family: "Oldschool Grotesk", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 47px;
  line-height: 65.8px;
  letter-spacing: 0;
  color: #111111;
  margin: 0;
}

.romoni-s2__body {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.romoni-s2__body p {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 32px;
  letter-spacing: 0;
  color: #111111;
  margin: 0;
}

.romoni-s2__stats {
  display: flex;
  flex-direction: row;
  gap: 50px;
}

.romoni-s2__stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.romoni-s2__stat-label {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 25.6px;
  letter-spacing: 0;
  color: #9c9c9c;
}

.romoni-s2__stat-value {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 25.6px;
  letter-spacing: 0;
  color: #111111;
}

@media (max-width: 1279px) {
  .romoni-s2__inner {
    flex-direction: column;
    padding: 80px 24px 80px;
    gap: 24px;
  }

  .romoni-s2__content {
    margin-left: 0;
    max-width: none;
    gap: 28px;
  }

  .romoni-s2__title {
    font-size: 34px;
    line-height: 45px;
  }

  .romoni-s2__stats {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 28px 50px;
  }

  .romoni-s2__stat {
    flex: 1 1 200px;
  }
}

@media (max-width: 479px) {
  .romoni-s2__stats {
    flex-direction: column;
    gap: 28px;
  }

  .romoni-s2__stat {
    flex: 1 1 auto;
  }
}

/* ===== Romoni Section 3 — Full-bleed image (Figma node 941:10692, frame 1440x790) ===== */

.romoni-s3 {
  background-color: #ffffff;
  width: 100%;
}

.romoni-s3__inner {
  max-width: 1440px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0 120px;
}

.romoni-s3__image {
  display: block;
  width: 100%;
  height: auto;
}

/* ===== Romoni Section 4 — Two images (Figma node 941:10696, frame 1440x750) ===== */

.romoni-s4 {
  background-color: #ffffff;
  width: 100%;
}

.romoni-s4__inner {
  max-width: 1440px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 30px 120px 120px;
  display: flex;
  flex-direction: row;
  gap: 30px;
}

.romoni-s4__image {
  flex: 1;
  width: 0;
  max-width: 585px;
  display: block;
  object-fit: cover;
}

@media (max-width: 1279px) {
  .romoni-s3__inner {
    padding: 0 24px;
  }

  .romoni-s4__inner {
    flex-direction: column;
    padding: 24px;
    gap: 24px;
  }

  .romoni-s4__image {
    width: 100%;
    max-width: none;
  }
}

/* ===== Romoni Section 5 — The Challenge (Figma node 941:10701, frame 1440x779) ===== */

.romoni-s5 {
  background-color: #ffffff;
  width: 100%;
}

.romoni-s5__inner {
  max-width: 1440px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0 120px 100px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.romoni-s5__eyebrow {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 28.8px;
  letter-spacing: 0;
  color: #000000;
  margin: 0;
  flex-shrink: 0;
}

.romoni-s5__content {
  margin-left: 267px;
  max-width: 807px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.romoni-s5__title {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  font-size: 42px;
  line-height: 58.8px;
  letter-spacing: 0;
  color: #111111;
  margin: 0;
}

.romoni-s5__body {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
}

.romoni-s5__body p {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 28.8px;
  letter-spacing: 0;
  color: #111111;
  margin: 0;
}

.romoni-s5__subtitle {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 28.8px;
  letter-spacing: 0;
  color: #111111;
  margin: 24px 0 0;
}

.romoni-s5__list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.romoni-s5__list li {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 28.8px;
  letter-spacing: 0;
  color: #111111;
}

@media (max-width: 1279px) {
  .romoni-s5__inner {
    flex-direction: column;
    padding: 80px 24px;
    gap: 16px;
  }

  .romoni-s5__content {
    margin-left: 0;
    max-width: none;
  }

  .romoni-s5__title {
    font-size: 32px;
    line-height: 44px;
  }
}

/* ===== Romoni Section 6 — Full-bleed image (Figma node 941:10711, frame 1440x812) ===== */

.romoni-s6 {
  background-color: #ffffff;
  width: 100%;
  position: relative;
}

.romoni-s6__image {
  display: block;
  width: 100%;
  height: auto;
}

.romoni-s6__overlay {
  position: absolute;
  top: 70px;
  left: 70px;
  width: 89px;
  height: 89px;
  display: block;
}

/* ===== Romoni Section 7 — Project Goals (Figma node 941:10715, frame 1440x1166) ===== */

.romoni-s7 {
  background-color: #ffffff;
  width: 100%;
}

.romoni-s7__inner {
  max-width: 1440px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0 120px 100px;
}

.romoni-s7__header {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  margin-top: 120px;
}

.romoni-s7__eyebrow {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 28.8px;
  letter-spacing: 0;
  color: #000000;
  margin: 0;
  flex-shrink: 0;
}

.romoni-s7__content {
  margin-left: 267px;
  max-width: 807px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.romoni-s7__title {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  font-size: 42px;
  line-height: 58.8px;
  letter-spacing: 0;
  color: #111111;
  margin: 0;
}

.romoni-s7__body {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 28.8px;
  letter-spacing: 0;
  color: #111111;
  margin: 20px 0 0;
}

.romoni-s7__image {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 60px;
}

@media (max-width: 1279px) {
  .romoni-s7__inner {
    padding: 0 24px 80px;
  }

  .romoni-s7__header {
    flex-direction: column;
    gap: 16px;
    margin-top: 60px;
  }

  .romoni-s7__content {
    margin-left: 0;
    max-width: none;
  }

  .romoni-s7__title {
    font-size: 32px;
    line-height: 44px;
  }

  .romoni-s7__image {
    margin-top: 40px;
  }
}

/* ===== Romoni Section 8 — Personas & Quotes (Figma node 941:10725, frame 1440x1166) ===== */

.romoni-s8 {
  background-color: #ffffff;
  width: 100%;
}

.romoni-s8__inner {
  max-width: 1440px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 20px 120px 86px;
}

.romoni-s8__row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.romoni-s8__row + .romoni-s8__row {
  margin-top: 40px;
}

.romoni-s8__card {
  flex-shrink: 0;
  width: 435px;
  height: 510px;
  position: relative;
  overflow: hidden;
}

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

.romoni-s8__card-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 139px;
  padding: 30px 30px 0;
  box-sizing: border-box;
}

.romoni-s8__card-overlay--purple {
  background: linear-gradient(to bottom, rgba(31, 1, 65, 0) 0%, rgba(5, 0, 11, 1) 100%);
}

.romoni-s8__card-overlay--dark {
  background: linear-gradient(to bottom, rgba(17, 17, 17, 0) 0%, rgba(17, 17, 17, 1) 100%);
}

.romoni-s8__card-name {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 600;
  font-size: 32px;
  line-height: 51.2px;
  letter-spacing: 0;
  color: #ffffff;
  margin: 0;
}

.romoni-s8__card-role {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 28.8px;
  letter-spacing: 0;
  color: #ffffff;
  margin: 0;
}

.romoni-s8__quote {
  flex: 1;
  min-width: 0;
}

.romoni-s8__quote-mark {
  display: block;
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 400;
  font-size: 40px;
  line-height: 31px;
  letter-spacing: 0;
  color: #898989;
}

.romoni-s8__quote-text {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 44.8px;
  letter-spacing: 0;
  color: #000000;
  margin: 36px 0 0;
}

.romoni-s8__frust-title {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 32px;
  letter-spacing: 0;
  color: #000000;
  margin: 36px 0 0;
}

.romoni-s8__frust-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.romoni-s8__frust-list li {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 32px;
  letter-spacing: 0;
  color: #000000;
}

.romoni-s8__row:first-child .romoni-s8__quote {
  margin-left: 90px;
}

.romoni-s8__row:last-child .romoni-s8__quote {
  margin-left: 22px;
  margin-right: 80px;
}

@media (max-width: 1279px) and (min-width: 1024px) {
  .romoni-s8__card {
    width: 380px;
  }

  .romoni-s8__row:first-child .romoni-s8__quote {
    margin-left: 40px;
  }

  .romoni-s8__row:last-child .romoni-s8__quote {
    margin-left: 16px;
    margin-right: 32px;
  }
}

@media (max-width: 1023px) {
  .romoni-s8__inner {
    padding: 20px 24px 60px;
  }

  .romoni-s8__row {
    flex-direction: column;
    gap: 32px;
  }

  .romoni-s8__card {
    width: 100%;
    height: auto;
    aspect-ratio: 435 / 510;
  }

  .romoni-s8__row:first-child .romoni-s8__quote,
  .romoni-s8__row:last-child .romoni-s8__quote {
    margin-left: 0;
    margin-right: 0;
  }

  .romoni-s8__quote-text {
    font-size: 26px;
    line-height: 36.4px;
  }
}

/* ===== Romoni Section 9 — Full-width image (Figma node 941:10754, frame 1440x881) ===== */

.romoni-s9 {
  background-color: #ffffff;
  width: 100%;
}

.romoni-s9__inner {
  max-width: 1440px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 20px 120px 120px;
}

.romoni-s9__image {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 1279px) {
  .romoni-s9__inner {
    padding: 20px 24px 60px;
  }
}

/* ===== Romoni Section 10 — The Process (Figma node 941:10757, frame 1440x703) ===== */

.romoni-s10 {
  background-color: #ffffff;
  width: 100%;
}

.romoni-s10__inner {
  max-width: 1440px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0 120px 120px;
}

.romoni-s10__header {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.romoni-s10__eyebrow {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 28.8px;
  letter-spacing: 0;
  color: #000000;
  margin: 0;
  flex-shrink: 0;
}

.romoni-s10__content {
  margin-left: 267px;
  max-width: 807px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.romoni-s10__title {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  font-size: 42px;
  line-height: 58.8px;
  letter-spacing: 0;
  color: #111111;
  margin: 0;
}

.romoni-s10__body {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 28.8px;
  letter-spacing: 0;
  color: #111111;
  margin: 20px 0 0;
}

.romoni-s10__grid {
  display: grid;
  grid-template-columns: repeat(4, 288px);
  column-gap: 16px;
  margin-top: 80px;
}

.romoni-s10__card {
  width: 288px;
  height: 398px;
  box-sizing: border-box;
  background-color: #f6f7f8;
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.romoni-s10__badge {
  width: 60px;
  height: 60px;
  display: block;
}

.romoni-s10__card-title {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 32px;
  letter-spacing: 0;
  color: #000000;
  margin: 28px 0 0;
}

.romoni-s10__card-desc {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 25.6px;
  letter-spacing: 0;
  color: #000000;
  margin: 10px 0 0;
  height: 104px;
}

.romoni-s10__card-list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.romoni-s10__card-list li {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 25.6px;
  letter-spacing: 0;
  color: #000000;
  position: relative;
  padding-left: 12px;
}

.romoni-s10__card-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #000000;
}

@media (max-width: 1279px) {
  .romoni-s10__inner {
    padding: 40px 24px 80px;
  }

  .romoni-s10__header {
    flex-direction: column;
    gap: 16px;
  }

  .romoni-s10__content {
    margin-left: 0;
    max-width: none;
  }

  .romoni-s10__title {
    font-size: 32px;
    line-height: 44px;
  }

  .romoni-s10__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .romoni-s10__card {
    width: 100%;
  }
}

@media (max-width: 1023px) {
  .romoni-s10__grid {
    grid-template-columns: 1fr;
    margin-top: 48px;
  }

  .romoni-s10__card {
    height: auto;
  }

  .romoni-s10__card-desc {
    height: auto;
  }
}

/* ===== Romoni Section 11 — Two images (Figma node 941:10820, frame 1440x930) ===== */

.romoni-s11 {
  background-color: #ffffff;
  width: 100%;
}

.romoni-s11__inner {
  max-width: 1440px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 120px 120px 120px;
  display: flex;
  flex-direction: row;
  gap: 30px;
}

.romoni-s11__image {
  flex: 1;
  width: 0;
  max-width: 585px;
  display: block;
  object-fit: cover;
}

@media (max-width: 1279px) {
  .romoni-s11__inner {
    flex-direction: column;
    padding: 60px 24px;
    gap: 24px;
  }

  .romoni-s11__image {
    width: 100%;
    max-width: none;
  }
}

/* ===== Romoni Section 12 — Full-bleed image (Figma node 941:10852, frame 1440x830) ===== */

.romoni-s12 {
  background-color: #ffffff;
  width: 100%;
}

.romoni-s12__image {
  display: block;
  width: 100%;
  height: auto;
}

/* ===== Romoni Section 13 — The Solution (Figma node 941:10854, frame 1440x718) ===== */

.romoni-s13 {
  background-color: #ffffff;
  width: 100%;
}

.romoni-s13__inner {
  max-width: 1440px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 120px 120px 0;
}

.romoni-s13__header {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.romoni-s13__eyebrow {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 28.8px;
  letter-spacing: 0;
  color: #000000;
  margin: 0;
  flex-shrink: 0;
}

.romoni-s13__content {
  margin-left: 267px;
  max-width: 807px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.romoni-s13__title {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  font-size: 42px;
  line-height: 58.8px;
  letter-spacing: 0;
  color: #111111;
  margin: 0;
}

.romoni-s13__body {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
}

.romoni-s13__body p {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 28.8px;
  letter-spacing: 0;
  color: #111111;
  margin: 0;
}

.romoni-s13__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 24px;
  row-gap: 24px;
  margin-top: 30px;
  width: 100%;
}

.romoni-s13__item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 20px;
}

.romoni-s13__num {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background-color: #f14976;
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 0;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.romoni-s13__item-title {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 28.8px;
  letter-spacing: 0;
  color: #000000;
  margin: 6px 0 0;
}

.romoni-s13__item-desc {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 28.8px;
  letter-spacing: 0;
  color: #000000;
  margin: 0;
}

@media (max-width: 1279px) {
  .romoni-s13__inner {
    padding: 60px 24px 0;
  }

  .romoni-s13__header {
    flex-direction: column;
    gap: 16px;
  }

  .romoni-s13__content {
    margin-left: 0;
    max-width: none;
  }

  .romoni-s13__title {
    font-size: 32px;
    line-height: 44px;
  }

  .romoni-s13__grid {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 40px;
  }
}

@media (max-width: 767px) {
  .romoni-s13__grid {
    grid-template-columns: 1fr;
  }
}

/* ===== Romoni Section 14 — Overview (Figma node 941:10889, frame 1440x1027) ===== */

.romoni-s14 {
  background-color: #ffffff;
  width: 100%;
}

.romoni-s14__inner {
  max-width: 1440px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 120px 120px;
}

.romoni-s14__image {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 1279px) {
  .romoni-s14__inner {
    padding: 60px 24px;
  }
}

/* ===== Romoni Section 15 — Full-bleed image (Figma node 941:10941/941:10942, frame 1440x854) ===== */

.romoni-s15 {
  background-color: #fdeded;
  width: 100%;
}

.romoni-s15__image {
  display: block;
  width: 100%;
  height: auto;
}

/* ===== Romoni Section 16 — Designed for Exploration and Confidence (Figma node 941:10943, frame 1440x1118) ===== */

.romoni-s16 {
  background-color: #ffffff;
  width: 100%;
}

.romoni-s16__inner {
  max-width: 1440px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 120px 120px;
}

.romoni-s16__title {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  font-size: 42px;
  line-height: 58.8px;
  letter-spacing: 0;
  color: #111111;
  text-align: center;
  margin: 0 auto;
  max-width: 100%;
}

.romoni-s16__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 40px;
  row-gap: 40px;
  margin-top: 30px;
  align-items: stretch;
}

.romoni-s16__col {
  display: flex;
  flex-direction: column;
}

.romoni-s16__media {
  position: relative;
  width: 100%;
  border-radius: 24px;
  overflow: hidden;
  background-color: #c1c1c1;
}

.romoni-s16__image {
  display: block;
  width: 100%;
  height: auto;
}

.romoni-s16__card {
  position: absolute;
  left: 30px;
  right: 30px;
  bottom: 30px;
  box-sizing: border-box;
  border-radius: 20px;
  padding: 30px;
  background-color: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(25px);
  backdrop-filter: blur(25px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.romoni-s16__card-title {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 38.4px;
  letter-spacing: 0;
  color: #000000;
  margin: 0;
}

.romoni-s16__list {
  list-style: none;
  margin: 19px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.romoni-s16__list-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
}

.romoni-s16__check {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.romoni-s16__check svg {
  display: block;
}

.romoni-s16__list-text {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 25.2px;
  letter-spacing: 0;
  color: #000000;
}

@media (max-width: 1279px) {
  .romoni-s16__inner {
    padding: 60px 24px;
  }

  .romoni-s16__title {
    font-size: 32px;
    line-height: 44px;
  }

  .romoni-s16__grid {
    grid-template-columns: 1fr;
    margin-top: 40px;
  }
}

/* ===== Romoni Section 17 — Full-bleed image (Figma node 941:10991/941:10992, frame 1440x854) ===== */

.romoni-s17 {
  background-color: #ffeded;
  width: 100%;
}

.romoni-s17__image {
  display: block;
  width: 100%;
  height: auto;
}

/* ===== Romoni Section 18 — Before/After + Results (Figma node 941:10993, frame 1440x2209) ===== */

.romoni-s18 {
  background-color: #ffffff;
  width: 100%;
}

.romoni-s18__inner {
  max-width: 1440px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 120px 120px;
}

.romoni-s18__title {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  font-size: 42px;
  line-height: 58.8px;
  letter-spacing: 0;
  color: #111111;
  text-align: center;
  margin: 0 auto;
  max-width: 100%;
}

.romoni-s18__cards {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 46px;
  margin-top: 60px;
}

.romoni-s18__card {
  width: calc(50% - 23px);
  display: flex;
  flex-direction: column;
}

.romoni-s18__card--redesigned {
  margin-top: 248px;
}

.romoni-s18__card-header {
  width: 100%;
  box-sizing: border-box;
  height: 84px;
  border-radius: 24px;
  padding: 0 16px 0 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.romoni-s18__card--previous .romoni-s18__card-header {
  background-color: #fff4f4;
}

.romoni-s18__card--redesigned .romoni-s18__card-header {
  background-color: #e3ffd5;
}

.romoni-s18__card-title {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 600;
  font-size: 28px;
  line-height: 44.8px;
  letter-spacing: 0;
  color: #111111;
  margin: 0;
}

.romoni-s18__card-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.romoni-s18__card--previous .romoni-s18__card-icon {
  background-color: #ffd9d9;
}

.romoni-s18__card--redesigned .romoni-s18__card-icon {
  background-color: #43cb00;
}

.romoni-s18__card-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 30px;
  margin-top: 20px;
}

.romoni-s18__list {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.romoni-s18__list-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
}

.romoni-s18__list-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.romoni-s18__list-icon svg {
  display: block;
}

.romoni-s18__list-text {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 35.2px;
  letter-spacing: 0;
  color: #000000;
}

.romoni-s18__card--redesigned .romoni-s18__list-text {
  font-weight: 500;
}

.romoni-s18__panel {
  margin-top: 80px;
  background-color: #fff9ff;
  border-radius: 20px;
  padding: 41px;
  box-sizing: border-box;
}

.romoni-s18__panel-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 393px;
}

.romoni-s18__eyebrow {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 28.8px;
  letter-spacing: 0;
  color: #000000;
  margin: 0;
  flex-shrink: 0;
}

.romoni-s18__panel-content {
  max-width: 725px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.romoni-s18__panel-title {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  font-size: 42px;
  line-height: 58.8px;
  letter-spacing: 0;
  color: #111111;
  margin: 0;
}

.romoni-s18__panel-body {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 28.8px;
  letter-spacing: 0;
  color: #111111;
  margin: 20px 0 0;
}

.romoni-s18__metrics {
  margin-top: 80px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: start;
}

.romoni-s18__metric {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 30px;
  border-left: 1px solid rgba(156, 156, 156, 0.2);
}

.romoni-s18__metric:first-child {
  border-left: none;
  padding-left: 0;
}

.romoni-s18__metric-value {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  font-size: 62px;
  line-height: 99.2px;
  letter-spacing: 0;
  color: #e35583;
}

.romoni-s18__metric-label {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 25.6px;
  letter-spacing: 0;
  color: #111111;
}

/* ===== Romoni Section 19 — Full-bleed image (Figma node 941:11073/941:11074, frame 1440x854) ===== */

.romoni-s19 {
  background-color: #ffeded;
  width: 100%;
}

.romoni-s19__image {
  display: block;
  width: 100%;
  height: auto;
}

/* ===== Romoni Section 20 — Related Case study (Figma node 941:11075, frame 1440x1032) ===== */

.romoni-s20 {
  background-color: #ffffff;
  width: 100%;
}

.romoni-s20__inner {
  max-width: 1440px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 120px 120px 97px;
}

.romoni-s20__title {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 600;
  font-size: 42px;
  line-height: 58.8px;
  letter-spacing: 0;
  color: #111111;
  text-align: center;
  margin: 0 auto;
}

.romoni-s20__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 30px;
  row-gap: 40px;
  margin-top: 60px;
}

.romoni-s20__card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
}

.romoni-s20__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 24px;
}

.romoni-s20__eyebrow {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 0;
  color: #888888;
  margin-top: 24px;
}

.romoni-s20__card-title {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 33.6px;
  letter-spacing: 0;
  color: #000000;
  margin-top: 16px;
}

@media (max-width: 1279px) {
  .romoni-s20__inner {
    padding: 60px 24px;
  }

  .romoni-s20__title {
    font-size: 32px;
    line-height: 44px;
  }

  .romoni-s20__grid {
    grid-template-columns: 1fr;
    margin-top: 40px;
  }
}

@media (max-width: 1279px) {
  .romoni-s18__inner {
    padding: 60px 24px;
  }

  .romoni-s18__title {
    font-size: 32px;
    line-height: 44px;
  }

  .romoni-s18__cards {
    flex-direction: column;
    gap: 40px;
    margin-top: 40px;
  }

  .romoni-s18__card {
    width: 100%;
  }

  .romoni-s18__card--redesigned {
    margin-top: 0;
  }

  .romoni-s18__panel-row {
    flex-direction: column;
    gap: 20px;
  }

  .romoni-s18__panel-title {
    font-size: 32px;
    line-height: 44px;
  }

  .romoni-s18__metrics {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 40px;
    column-gap: 24px;
    margin-top: 60px;
  }
}

@media (max-width: 479px) {
  .romoni-s18__metrics {
    grid-template-columns: 1fr;
  }

  .romoni-s18__card-header {
    height: auto;
    min-height: 84px;
    padding: 12px 16px 12px 24px;
  }

  .romoni-s18__card-title {
    font-size: 24px;
    line-height: 36px;
  }
}