/* Turnkey marketing — nine independent advantages */
.models {
  background-image:
    radial-gradient(circle at 84% 13%, rgb(245 191 0 / 10%), transparent 25%),
    linear-gradient(rgb(240 229 207 / 2%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(240 229 207 / 2%) 1px, transparent 1px);
  background-size: auto, 84px 84px, 84px 84px;
}

.models .section-heading {
  margin-bottom: clamp(58px, calc(var(--layout-vw) * 6), 90px);
}

.models .model-list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-inline: var(--section-left);
  border-top: 1px solid var(--line);
}

.models .model-list::before {
  display: none;
}

.models .model-row,
.models .model-grid,
.models .model-meta {
  display: contents;
}

.models .model-index,
.models .model-arrow,
.models .model-row::after,
.models .model-meta span:empty {
  display: none;
}

.models .model-grid > h3,
.models .model-grid > p,
.models .model-meta > span:not(:empty) {
  --benefit-icon: none;
  --benefit-padding: clamp(28px, calc(var(--layout-vw) * 3), 46px);
  --benefit-icon-size: clamp(44px, calc(var(--layout-vw) * 4), 62px);
  --benefit-ring-size: clamp(76px, calc(var(--layout-vw) * 7), 110px);
  --benefit-ring-offset: clamp(16px, calc(var(--layout-vw) * 1.5), 24px);
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: clamp(238px, calc(var(--layout-vw) * 18), 300px);
  margin: 0;
  padding: var(--benefit-padding);
  overflow: hidden;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--cream);
  background: rgb(3 10 23 / 34%);
  font: 400 clamp(25px, calc(var(--layout-vw) * 2.1), 36px) / 1.03 var(--font-display);
  letter-spacing: -0.025em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  transition:
    color 220ms ease,
    background-color 220ms ease,
    border-color 220ms ease,
    transform 220ms ease;
}

.models .model-grid > p {
  width: 100%;
  max-width: none;
}

.models .model-grid > h3 {
  border-left: 1px solid var(--line);
}

.models .model-grid > h3::before,
.models .model-grid > p::before,
.models .model-meta > span:not(:empty)::before {
  content: "";
  width: var(--benefit-icon-size);
  height: var(--benefit-icon-size);
  margin: 0 0 auto;
  flex: 0 0 auto;
  background: currentColor;
  color: var(--yellow);
  -webkit-mask: var(--benefit-icon) center / contain no-repeat;
  mask: var(--benefit-icon) center / contain no-repeat;
  transition: color 220ms ease, transform 220ms ease;
}

.models .model-grid > h3::after,
.models .model-grid > p::after,
.models .model-meta > span:not(:empty)::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(var(--benefit-padding) - var(--benefit-ring-offset));
  left: calc(var(--benefit-padding) - var(--benefit-ring-offset));
  width: var(--benefit-ring-size);
  aspect-ratio: 1;
  border: 1px solid rgb(245 191 0 / 16%);
  border-radius: 50%;
  box-shadow: 0 0 0 18px rgb(245 191 0 / 2.5%);
  transition: transform 450ms cubic-bezier(.22, 1, .36, 1), border-color 220ms ease;
}

.models .model-grid > h3:hover,
.models .model-grid > p:hover,
.models .model-meta > span:not(:empty):hover {
  color: var(--ink);
  background: var(--yellow);
  border-color: rgb(3 10 23 / 34%);
  transform: translateY(-4px);
}

.models .model-grid > h3:hover::before,
.models .model-grid > p:hover::before,
.models .model-meta > span:not(:empty):hover::before {
  color: var(--ink);
  transform: scale(1.08);
}

.models .model-grid > h3:hover::after,
.models .model-grid > p:hover::after,
.models .model-meta > span:not(:empty):hover::after {
  border-color: rgb(3 10 23 / 24%);
  transform: rotate(35deg) scale(1.18);
}

.models .model-list .model-row:hover .model-grid > p {
  color: var(--cream);
}

.models .model-list .model-row:hover .model-grid > p:hover {
  color: var(--ink);
}

/* Compass — advertising strategy */
.models .model-row:nth-child(1) .model-grid > h3 {
  --benefit-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='24' cy='24' r='18'/%3E%3Cpath d='m29.5 18.5-3.6 7.4-7.4 3.6 3.6-7.4 7.4-3.6Z'/%3E%3Cpath d='M24 6v3M24 39v3M6 24h3M39 24h3'/%3E%3C/g%3E%3C/svg%3E");
}

/* Customer journey and creative materials */
.models .model-row:nth-child(1) .model-grid > p {
  --benefit-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='8' width='13' height='11' rx='1'/%3E%3Crect x='29' y='29' width='13' height='11' rx='1'/%3E%3Cpath d='M19 13.5h8a8.5 8.5 0 0 1 8.5 8.5v7M29 34.5h-8A8.5 8.5 0 0 1 12.5 26v-7'/%3E%3Cpath d='m31 25 4.5 4 4.5-4M17 23l-4.5-4L8 23'/%3E%3C/g%3E%3C/svg%3E");
}

/* Anti-fraud and campaign warm-up */
.models .model-row:nth-child(1) .model-meta > span:not(:empty) {
  --benefit-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24 5 39 11v11c0 10.2-6.3 17.2-15 21-8.7-3.8-15-10.8-15-21V11l15-6Z'/%3E%3Cpath d='m16.5 24 5 5 10-11'/%3E%3C/g%3E%3C/svg%3E");
}

/* End-to-end analytics application */
.models .model-row:nth-child(2) .model-grid > h3 {
  --benefit-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='7' width='38' height='34' rx='2'/%3E%3Cpath d='M5 15h38M12 11h.1M17 11h.1M22 11h.1M11 34l8-8 6 4 11-10'/%3E%3Ccircle cx='19' cy='26' r='1.5'/%3E%3Ccircle cx='25' cy='30' r='1.5'/%3E%3Ccircle cx='36' cy='20' r='1.5'/%3E%3C/g%3E%3C/svg%3E");
}

/* Lead quality control */
.models .model-row:nth-child(2) .model-grid > p {
  --benefit-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 8h34L29 23v13l-10 5V23L7 8Z'/%3E%3Cpath d='m29 30 3 3 7-7'/%3E%3C/g%3E%3C/svg%3E");
}

/* Live call center */
.models .model-row:nth-child(2) .model-meta > span:not(:empty) {
  --benefit-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 25v-2C8 14.7 14.7 8 23 8h2c8.3 0 15 6.7 15 15v8'/%3E%3Crect x='5' y='23' width='8' height='12' rx='3'/%3E%3Crect x='35' y='23' width='8' height='12' rx='3'/%3E%3Cpath d='M39 35c0 4-3 6-8 6h-3'/%3E%3Crect x='22' y='38' width='7' height='5' rx='2.5'/%3E%3C/g%3E%3C/svg%3E");
}

/* Team onboarding */
.models .model-row:nth-child(3) .model-grid > h3 {
  --benefit-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 18 19-10 19 10-19 10L5 18Z'/%3E%3Cpath d='M12 22v10c7 5.3 17 5.3 24 0V22M43 18v13'/%3E%3C/g%3E%3C/svg%3E");
}

/* CRM and service integrations */
.models .model-row:nth-child(3) .model-grid > p {
  --benefit-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='18' width='12' height='12' rx='2'/%3E%3Crect x='31' y='6' width='12' height='12' rx='2'/%3E%3Crect x='31' y='30' width='12' height='12' rx='2'/%3E%3Cpath d='M17 24h7a7 7 0 0 0 7-7v-1M17 24h7a7 7 0 0 1 7 7v1'/%3E%3Ccircle cx='24' cy='24' r='2'/%3E%3C/g%3E%3C/svg%3E");
}

/* Design services */
.models .model-row:nth-child(3) .model-meta > span:not(:empty) {
  --benefit-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 40 4.5-13.5L29 10l9 9-16.5 16.5L8 40Z'/%3E%3Cpath d='m12.5 26.5 9 9M8 40l7.2-7.2M27 12l9 9M36 6v5M42 12h-5M38 8l3-3'/%3E%3C/g%3E%3C/svg%3E");
}

@media (max-width: 1050px) {
  .models .model-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .models .model-grid > h3,
  .models .model-grid > p,
  .models .model-meta > span:not(:empty) {
    min-height: 230px;
    font-size: clamp(25px, calc(var(--layout-vw) * 3.1), 34px);
  }

  .models .model-grid > h3 {
    border-left: 0;
  }

  .models .model-list > .model-row:nth-child(odd) .model-grid > h3,
  .models .model-list > .model-row:nth-child(even) .model-grid > p,
  .models .model-row:nth-child(1) .model-meta > span:not(:empty),
  .models .model-row:nth-child(3) .model-meta > span:not(:empty) {
    border-left: 1px solid var(--line);
  }

  .models .model-row:nth-child(3) .model-meta > span:not(:empty) {
    grid-column: 1 / -1;
    min-height: 190px;
  }
}

@media (max-width: 720px) {
  .models .model-list {
    grid-template-columns: minmax(0, 1fr);
    padding-inline: var(--section-left);
  }

  .models .model-list::before {
    inset-inline: var(--section-left);
  }

  .models .model-grid > h3,
  .models .model-grid > p,
  .models .model-meta > span:not(:empty),
  .models .model-row:nth-child(3) .model-meta > span:not(:empty) {
    --benefit-icon-size: 42px;
    --benefit-ring-size: 66px;
    grid-column: auto;
    min-height: 126px;
    padding: 24px 20px;
    border-left: 1px solid var(--line);
    font-size: clamp(23px, calc(var(--layout-vw) * 7.2), 31px);
    line-height: 1;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 22px;
  }

  .models .model-grid > h3::before,
  .models .model-grid > p::before,
  .models .model-meta > span:not(:empty)::before {
    width: var(--benefit-icon-size);
    height: var(--benefit-icon-size);
    margin: 0;
  }

  .models .model-grid > h3::after,
  .models .model-grid > p::after,
  .models .model-meta > span:not(:empty)::after {
    top: 50%;
    left: 8px;
    width: var(--benefit-ring-size);
    transform: translateY(-50%);
  }

  .models .model-grid > h3:hover,
  .models .model-grid > p:hover,
  .models .model-meta > span:not(:empty):hover {
    transform: none;
  }

  .models .model-grid > h3:hover::after,
  .models .model-grid > p:hover::after,
  .models .model-meta > span:not(:empty):hover::after {
    transform: translateY(-50%) rotate(35deg) scale(1.1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .models .model-grid > h3,
  .models .model-grid > p,
  .models .model-meta > span:not(:empty),
  .models .model-grid > h3::before,
  .models .model-grid > p::before,
  .models .model-meta > span:not(:empty)::before,
  .models .model-grid > h3::after,
  .models .model-grid > p::after,
  .models .model-meta > span:not(:empty)::after {
    transition: none;
  }
}

/* Global alignment fixes requested during review */
.statement::before {
  background-image: url("/elvion-assets/phone-handset.svg?v=complete");
}

.statement h2 > span {
  display: block;
  margin-top: 0.06em;
}

.markets-note br {
  display: block;
}

.case-logo-green-zebra {
  width: clamp(164px, calc(var(--layout-vw) * 14), 214px);
  height: 76px;
  padding: 13px 20px 12px;
  color: #153b2c;
  border-color: rgb(3 10 23 / 45%);
  background: rgb(240 229 207 / 96%);
  box-shadow: 8px 8px rgb(245 191 0 / 20%);
  justify-content: flex-start;
}

.green-zebra-name {
  width: max-content;
  padding: 0;
  line-height: 0.74;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.green-zebra-name strong {
  color: #153b2c;
  font: 400 22px / 0.82 var(--font-display);
  letter-spacing: -0.03em;
  font-weight: 400;
}

.green-zebra-name em {
  color: #6f8f37;
  font: italic 600 25px / 0.8 var(--font-serif);
  letter-spacing: -0.06em;
}

.guarantee-copy {
  --guarantee-line-inset: 0px;
}

.guarantee-copy ul {
  margin-left: calc(-1 * var(--guarantee-line-inset));
}

.guarantee-copy li {
  padding-left: 0;
  grid-template-columns: var(--guarantee-cell) minmax(0, 1fr);
  column-gap: 12px;
}

.guarantee-copy li > span { justify-self: center; }

@media (min-width: 901px) {
  .guarantee-copy {
    --guarantee-line-inset: calc(var(--guarantee-cell) * 0.72);
  }

  .cases .case-grid {
    gap: 22px;
  }

  .cases .case-visual {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .cases .case-copy {
    padding: clamp(20px, calc(var(--layout-vw) * 2), 30px);
  }

  .cases .case h3 {
    font-size: clamp(43px, calc(var(--layout-vw) * 4.4), 68px);
  }

  .cases .case-detail {
    margin-top: 12px;
    font-size: clamp(18px, calc(var(--layout-vw) * 1.55), 23px);
  }

  .cases .case-placeholder-card {
    min-height: 0;
    aspect-ratio: 4 / 3;
    padding: clamp(24px, calc(var(--layout-vw) * 2.8), 40px);
  }

  .cases .case-placeholder-card strong {
    font-size: clamp(40px, calc(var(--layout-vw) * 4.1), 64px);
  }
}

@media (min-width: 1181px) {
  .cases .case-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }

  .cases .case-1,
  .cases .case-2,
  .cases .case-3,
  .cases .case-4,
  .cases .case-5,
  .cases .case-6,
  .cases .case-7 {
    grid-column: auto;
    width: auto;
    margin-top: 0;
  }

}

@media (max-width: 720px) {
  .case-logo-green-zebra {
    width: min(180px, calc(var(--layout-vw) * 62));
    height: 64px;
    padding: 11px 17px 10px;
  }

  .green-zebra-name strong {
    font-size: 19px;
  }

  .green-zebra-name em {
    font-size: 22px;
  }
}

@media (min-width: 721px) {
  .statement::before {
    top: clamp(70px, calc(var(--layout-vw) * 5.2), 104px);
    opacity: 0.075;
  }
}