/* Experimental editorial layout. Add ?services=classic to view the preserved card section. */
html.services-classic .mosaic-illustration,
html.services-alt .solution-visual > svg:not(.mosaic-illustration) { display: none; }

html.services-alt .solution-online { --mosaic-accent: #9e95ff; --mosaic-stroke: #aaa2dc; }
html.services-alt .solution-branding { --mosaic-accent: #67c2ff; --mosaic-stroke: #86b8d3; }
html.services-alt .solution-direct { --mosaic-accent: #ffd85f; --mosaic-stroke: #c9a950; }

html.services-alt .mosaic-illustration { display: block; overflow: visible; }
html.services-alt .mosaic-illustration path[stroke] { stroke: var(--mosaic-stroke); }
html.services-alt .hero-transition > #companies { scroll-margin-top: 0; }
html.services-alt #audiences-title br { display: none; }

@media (min-width: 901px) {
  html.services-alt .business-solutions {
    display: grid;
    grid-template-columns: minmax(290px, .86fr) minmax(0, 2.14fr);
    align-items: start;
    gap: clamp(34px, 4.6vw, 82px);
    padding: clamp(104px, 8vw, 146px) var(--gutter) clamp(140px, 12vw, 210px);
  }

  html.services-alt .solutions-intro {
    position: sticky;
    top: 132px;
    display: flex;
    min-width: 0;
    min-height: min(660px, calc(100svh - 170px));
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    align-self: start;
    gap: 42px;
    padding: 0;
  }

  html.services-alt .solutions-intro h2 {
    width: 100%;
    max-width: 850px;
    font-size: clamp(52px, 4.45vw, 80px);
    line-height: 1.08;
    padding-bottom: .08em;
    overflow: visible;
  }

  html.services-alt .solutions-intro > p {
    width: 100%;
    max-width: 410px;
    padding: 0;
    border: 0;
    color: #35444f;
    font-size: clamp(23px, 1.85vw, 30px);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.025em;
  }

  html.services-alt .solutions-grid {
    --card-cut: clamp(42px, 3.6vw, 64px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(18px, 1.6vw, 28px);
    row-gap: clamp(30px, 3vw, 54px);
    align-items: start;
    margin: 0;
  }

  html.services-alt .solution-cell:nth-child(1) { margin-top: clamp(104px, 9vw, 166px); }
  html.services-alt .solution-cell:nth-child(3) {
    grid-column: 1 / -1;
    width: 78%;
    justify-self: center;
    margin-left: 4%;
  }

  html.services-alt .solution-cell::before {
    inset: 0;
    opacity: 0;
  }

  html.services-alt .solution-card {
    display: flex;
    min-height: clamp(465px, 35vw, 560px);
    height: auto;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(25px, 2.4vw, 40px) clamp(24px, 2.5vw, 42px) 77px;
    background: transparent;
    clip-path: none;
  }

  html.services-alt .solution-card::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--card-surface);
    clip-path: polygon(0 0, calc(100% - var(--card-cut)) 0, 100% var(--card-cut), 100% 100%, 0 100%);
    content: '';
    pointer-events: none;
  }

  html.services-alt .solution-online { --card-surface: #ebe9ff; }
  html.services-alt .solution-branding { --card-surface: #e7f6ff; }
  html.services-alt .solution-direct { --card-surface: #fff2cf; }

  html.services-alt .solution-visual { position: relative; z-index: 1; }
  html.services-alt .solution-copy { position: static; }
  html.services-alt .solution-copy h3,
  html.services-alt .solution-copy > p { position: relative; z-index: 1; }

  html.services-alt .solution-visual,
  html.services-alt .solution-online .solution-visual,
  html.services-alt .solution-branding .solution-visual,
  html.services-alt .solution-direct .solution-visual {
    min-height: 210px;
    margin: 0 0 22px;
    align-items: flex-start;
    justify-content: flex-start;
  }

  html.services-alt .solution-online .solution-visual svg { width: min(100%, 210px); }
  html.services-alt .solution-branding .solution-visual svg { width: min(100%, 205px); }
  html.services-alt .solution-direct .solution-visual svg { width: min(100%, 210px); }

  html.services-alt .solution-copy h3 { font-size: clamp(28px, 2.1vw, 38px); }
  html.services-alt .solution-copy > p {
    min-height: 0;
    margin-top: 18px;
    color: #35444f;
    font-size: clamp(15px, 1vw, 17px);
    line-height: 1.48;
  }

  html.services-alt .solution-cta {
    position: absolute;
    right: -13px;
    bottom: -17px;
    z-index: 3;
    display: inline-flex;
    min-height: 53px;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    margin: 0;
    padding: 14px 18px 14px 20px;
    border: 0;
    background: #050607;
    clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 0 100%);
    color: #fff;
    font-size: 15px;
    line-height: 1.2;
    white-space: nowrap;
  }

  html.services-alt .solution-cta .icon { flex: none; width: 21px; height: 21px; }
  html.services-alt .solution-cell:nth-child(1) .solution-cta,
  html.services-alt .solution-cell:nth-child(3) .solution-cta { right: auto; left: -14px; }

  html.services-alt .solution-cell:nth-child(3) .solution-card {
    display: grid;
    min-height: 365px;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: center;
    column-gap: 22px;
    padding-bottom: 45px;
  }

  html.services-alt .solution-cell:nth-child(3) .solution-copy { order: 1; }
  html.services-alt .solution-cell:nth-child(3) .solution-visual { order: 2; margin: 0; justify-content: center; }
  html.services-alt .solution-cell:nth-child(3) .solution-visual svg { width: min(100%, 210px); }

  html.services-alt .solution-card:focus-visible { outline-offset: 4px; }
}

@media (min-width: 1800px) {
  html.services-alt .solutions-intro h2 {
    font-size: clamp(56px, 2.45vw, 80px);
    text-wrap: balance;
  }
}

@media (min-width: 901px) and (max-width: 1180px) {
  html.services-alt .business-solutions { display: block; }
  html.services-alt .solutions-intro {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    min-height: 0;
    gap: 24px;
    padding-bottom: 54px;
  }
  html.services-alt .solutions-intro h2 { flex: none; font-size: clamp(50px, 5vw, 65px); }
  html.services-alt .solutions-intro > p { flex: none; max-width: 540px; }
  html.services-alt .solution-cell:nth-child(1) { margin-top: 100px; }
  html.services-alt .solution-cell:nth-child(3) { width: 72%; }
}

@media (min-width: 821px) and (max-width: 900px) {
  html.services-alt .solutions-intro {
    display: block;
    padding: 0 calc(var(--gutter) + 1px) 58px;
  }
  html.services-alt .solutions-intro h2 { max-width: none; font-size: clamp(48px, 6vw, 62px); }
  html.services-alt .solutions-grid { grid-template-columns: 1fr; }
  html.services-alt .solution-card { min-height: 610px; padding: var(--gutter); }
  html.services-alt .solution-visual { min-height: 300px; width: min(100%, 520px); margin: 0 auto 30px; }
  html.services-alt .solution-copy > p { min-height: 0; }
  html.services-alt .solution-copy h3 { font-size: clamp(34px, 5vw, 48px); }
}

@media (max-width: 900px) {
  html.services-alt .business-solutions { padding-top: 110px; }
  html.services-alt .solutions-intro h2 { line-height: 1.08; padding-bottom: .08em; overflow: visible; }
  html.services-alt .solutions-intro > p {
    max-width: 520px;
    margin-top: 28px;
    padding: 0;
    color: #35444f;
    font-size: clamp(21px, 3.2vw, 26px);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.025em;
  }
  html.services-alt .solution-visual .mosaic-illustration { width: min(100%, 220px); height: auto; }
}

@media (max-width: 600px) {
  html.services-alt .solution-visual .mosaic-illustration { width: 74%; }
}

@media (prefers-reduced-motion: reduce) {
  html.services-alt .solutions-intro { position: static; }
}