/* Homepage service choices and the illustrated website process. */
.home-page #services-rail .service-compact-icon {display:none;}

.home-page #working-together .flow-image {
  width:100%;aspect-ratio:3/2;margin:0;overflow:hidden;
  border-radius:10px;background:#edf3ef;
}
.home-page #working-together .flow-image img {
  display:block;width:100%;height:100%;object-fit:cover;
}
.home-page #working-together .process-preview-access {min-width:0;width:100%;}
.home-page #working-together .process-access-copy {margin:0 0 22px;}
.home-page #working-together .process-access-copy h3 {
  max-width:30ch;margin:0;font-size:clamp(24px,2vw,30px);
  line-height:1.2;letter-spacing:-.025em;color:var(--navy);
}
.home-page #working-together .process-access-copy p {
  max-width:70ch;margin:12px 0 0;font-size:17px;line-height:1.6;color:var(--body);
}
.home-page #working-together .process-access-stages {
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;min-width:0;width:100%;align-items:stretch;
}
.home-page #working-together .process-preview-access .process-demo {
  grid-column:auto;grid-row:auto;display:flex;flex-direction:column;
  width:100%;max-width:none;min-width:0;margin:0;
}
.home-page #working-together .process-preview-access .process-demo-toolbar {
  padding:12px;min-height:46px;
}
.home-page #working-together .process-preview-access .process-demo-preview {
  display:block;aspect-ratio:4/3;background:#f3f7f4;cursor:zoom-in;
}
.home-page #working-together .process-preview-access .process-demo-preview img {
  display:block;width:100%;height:100%;object-fit:contain;
}
.home-page #working-together .process-preview-access .process-demo figcaption {
  flex:1;display:flex;flex-direction:column;padding:18px;
}
.home-page #working-together .process-preview-access .process-demo figcaption strong {
  font-size:19px;line-height:1.3;
}
.home-page #working-together .process-preview-access .process-demo figcaption p {
  margin:10px 0 0;font-size:16px;line-height:1.5;
}
.home-page #working-together .process-preview-access .process-demo figcaption .process-demo-credit {
  font-size:13px;line-height:1.45;
}
.home-page #working-together .process-preview-access .process-demo figcaption a {
  align-self:flex-start;margin-top:auto;padding-top:8px;min-height:44px;
}
.home-page #solutions .customer-ad-path .conversion-copy {
  grid-template-columns:1fr;justify-items:end;
}

@media(min-width:940px) {
  .home-page :is(#solutions,#work)>.container {
    width:calc(100% - clamp(64px,5vw,80px));
    max-width:none;
  }
  .home-page #solutions .services-content {
    width:100%;max-width:none;margin-inline:auto;
  }
  .home-page #solutions .service-overview {
    width:100%;max-width:none;margin-inline:0;
  }
  .home-page #solutions #services-rail {
    display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
    gap:clamp(12px,1.2vw,22px);width:100%;max-width:none;margin:0;padding:0;
    overflow:visible;align-items:stretch;
  }
  .home-page #solutions #services-rail>.solution-card {
    grid-column:auto;min-width:0;width:100%;min-height:480px;
  }
  .home-page #solutions #services-rail>.solution-card .card-copy {
    flex:1;width:100%;min-height:0;padding:48px 18px 20px;
  }
  .home-page #solutions #services-rail>.solution-card>.expand-icon {
    top:12px;right:12px;width:30px;height:30px;
  }
  .home-page #solutions #services-rail .card-copy h3 {
    padding:0;font-size:clamp(20px,1.65vw,26px);line-height:1.2;
  }
  .home-page #solutions #services-rail .card-copy>p {
    max-width:48ch;font-size:16px;line-height:1.5;
  }
  .home-page #solutions #services-rail>.solution-card>:is(.site-art.device-preview,.search-art,.service-visual) {
    flex:0 0 220px;width:100%;height:220px;min-height:220px;margin:0;
  }
  .home-page #solutions #services-rail .device-phone {
    width:clamp(86px,7vw,108px);
  }
  .home-page #solutions #services-rail .hosting-site {gap:8px;padding:12px 10px;}
  .home-page #solutions #services-rail .hosting-site>img {width:26px;height:26px;}
  .home-page #solutions #services-rail .hosting-site>div {min-width:0;}
  .home-page #solutions #services-rail .hosting-site strong {font-size:clamp(11px,.9vw,15px);overflow-wrap:anywhere;}
  .home-page #solutions #services-rail .care-tasks {padding-inline:10px;}
  .home-page #solutions #services-rail>.service-video-tile {
    grid-column:1/-1;grid-row:2;justify-self:center;display:grid;
    grid-template-columns:minmax(0,1fr) 190px;align-items:center;
    gap:28px;width:100%;max-width:620px;min-height:0;
    margin:12px 0 0;padding:24px;
  }
  .home-page #solutions #services-rail .service-video-title {
    max-width:16ch;font-size:28px;line-height:1.2;
  }
  .home-page #solutions #services-rail>.service-video-tile>.video-card__media {
    width:190px;max-width:100%;margin:0;justify-self:center;
  }
  .home-page #solutions .customer-ad-section {
    width:100%;max-width:1232px;margin-inline:auto;
  }

  /* Four steps share one row; the supporting media follow below. */
  .home-page #solutions #working-together {
    width:100%;max-width:none;margin-inline:auto;
  }
  .home-page #working-together .project-flow {
    display:grid;grid-template-columns:minmax(0,1fr);align-items:start;
    gap:28px;padding:clamp(24px,2.2vw,36px);
  }
  .home-page #working-together .process-main {display:contents;}
  .home-page #working-together .process-copy {
    grid-column:1;grid-row:1;width:100%;max-width:920px;min-width:0;
  }
  .home-page #working-together .process-intro {
    max-width:76ch;font-size:18px;line-height:1.6;
  }
  .home-page #working-together .process-steps {
    grid-column:1;grid-row:2;width:100%;min-width:0;margin:0;
  }
  .home-page #working-together .project-flow-list {
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    align-items:stretch;gap:clamp(14px,1.2vw,22px);
    width:100%;min-width:0;margin:0;padding:0;list-style:none;
  }
  .home-page #working-together .project-flow-list>li {
    position:relative;display:flex;flex-direction:column;min-width:0;
    height:100%;margin:0;padding:0;
  }
  .home-page #working-together .project-flow-list>li::before,
  .home-page #working-together .project-flow-list>li::after {
    content:none;display:none;
  }
  .home-page #working-together .flow-number {
    position:absolute;inset:18px auto auto 18px;z-index:1;
    display:grid;place-items:center;width:34px;height:34px;
    margin:0;border-width:2px;font-size:18px;line-height:1;
  }
  .home-page #working-together .flow-card {
    display:flex;flex:1;flex-direction:column;gap:12px;
    width:100%;min-width:0;height:100%;padding:18px;
  }
  .home-page #working-together .flow-duration {
    display:inline-flex;align-items:center;align-self:flex-start;
    min-height:34px;margin:0 0 0 44px;padding:5px 10px;
    font-size:14px;line-height:1.3;white-space:nowrap;
  }
  .home-page #working-together .flow-card h3 {
    min-height:50px;margin:0;font-size:20px;line-height:1.25;
  }
  .home-page #working-together .flow-card p {
    max-width:none;margin:0;font-size:16px;line-height:1.55;
    overflow-wrap:break-word;
  }
  .home-page #working-together .process-media-stack {
    grid-column:1;grid-row:3;display:grid;
    grid-template-columns:260px minmax(0,1fr);
    align-items:center;justify-content:center;
    gap:clamp(24px,2.5vw,40px);width:100%;max-width:none;
    min-width:0;margin:0 auto;padding-top:28px;border-top:1px solid #cfdfd6;
  }
  .home-page #working-together .process-video {
    grid-column:1;grid-row:1;justify-self:center;
    width:260px;max-width:100%;margin:0;
  }
  .home-page #working-together .process-demo {
    grid-column:2;grid-row:1;width:100%;max-width:none;min-width:0;margin:0;
  }
  .home-page #working-together .process-demo figcaption p {
    font-size:16px;line-height:1.55;
  }
}

@media(min-width:640px) and (max-width:939px) {
  .home-page #working-together .process-preview-access {grid-column:1/-1;grid-row:3;}
}

@media(max-width:639px) {
  .home-page #working-together .process-access-copy h3 {font-size:24px;}
  .home-page #working-together .process-access-copy p {font-size:16px;line-height:1.5;}
  .home-page #working-together #process-access-rail {
    --preview-slide:94%;display:flex;align-items:stretch;gap:14px;
    min-width:0;width:100%;padding:1px 1px 8px;overflow-x:auto;
    scroll-snap-type:x mandatory;scroll-padding-inline:1px;
    overscroll-behavior-x:contain;scrollbar-width:none;
  }
  .home-page #working-together #process-access-rail::-webkit-scrollbar {display:none;}
  .home-page #working-together #process-access-rail>.process-demo {
    flex:0 0 var(--preview-slide);width:var(--preview-slide);max-width:none;
    min-width:0;scroll-snap-align:start;scroll-margin-inline:1px;
  }
  .home-page #working-together #process-access-rail::after {
    content:"";flex:0 0 max(1px,calc(100% - var(--preview-slide) - 14px));
  }
  .home-page #solutions .service-overview {margin-bottom:22px;}
  .home-page #solutions #services-rail {
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;width:100%;max-width:none;min-width:0;margin:0;padding:0;
    overflow:visible;align-items:stretch;scroll-snap-type:none;
  }
  .home-page #solutions #services-rail::after {content:none;display:none;}
  .home-page #solutions #services-rail>button.solution-card {
    display:grid;grid-template-columns:minmax(0,1fr) 24px;
    grid-template-rows:32px minmax(0,1fr);gap:8px;
    grid-column:auto;grid-row:auto;order:0;align-content:stretch;
    align-items:start;justify-items:start;flex:none;
    width:100%;max-width:none;min-width:0;height:120px;
    min-height:120px!important;max-height:none;margin:0;padding:12px;
    border:1px solid #c8dcd2;border-radius:15px;background:#fff;
    color:var(--navy);box-shadow:0 3px 12px #082b4705;
    text-align:left;overflow:visible;transform:none;scroll-snap-align:none;
  }
  .home-page #solutions #services-rail>button.solution-card>.card-copy {
    display:contents;position:static;inset:auto;width:auto;min-height:0;
    padding:0;margin:0;
  }
  .home-page #solutions #services-rail>button.solution-card .card-copy>h3 {
    position:static;inset:auto;grid-column:1/-1;grid-row:2;
    align-self:center;width:auto;max-width:none;margin:0;padding:0;
    font-size:16px;font-weight:500;line-height:1.18;letter-spacing:-.015em;
    text-align:left;text-wrap:pretty;overflow-wrap:normal;
  }
  .home-page #solutions #services-rail>button.solution-card :is(
    .card-copy>p,.site-art,.search-art,.service-visual,.photo-art,.content-art,.care-art
  ) {display:none;}
  .home-page #solutions #services-rail>button.solution-card>.service-compact-icon {
    display:grid;grid-column:1;grid-row:1;place-items:center;
    width:32px;height:32px;margin:0;padding:6px;
    border:1px solid #d5e7dd;border-radius:9px;background:#edf5f0;
    color:var(--teal-deep);
  }
  .home-page #solutions #services-rail .service-compact-icon>svg {
    display:block;width:20px;height:20px;fill:none;stroke:currentColor;
    stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  }
  .home-page #solutions #services-rail>button.solution-card>.expand-icon {
    position:static;inset:auto;grid-column:2;grid-row:1;
    align-self:center;justify-self:end;display:grid;place-items:center;
    width:24px;height:24px;margin:0;padding:3px;border:0;border-radius:6px;
    background:transparent;color:#527a72;box-shadow:none;transform:none;
  }
  .home-page #solutions #services-rail>button.solution-card>.expand-icon svg {
    width:17px;height:17px;stroke-width:1.7;
  }
  /* One featured choice and four equal tiles make the full range visible at once. */
  .home-page #solutions #services-rail>button#website-redesign {
    grid-column:1/-1;grid-template-columns:minmax(0,1fr) 40px;
    grid-template-rows:auto auto;align-content:center;align-items:center;
    gap:12px 14px;height:160px;min-height:160px!important;padding:18px;
    background:#e6f1eb;border-color:#adcdbc;
  }
  .home-page #solutions #services-rail>button#website-redesign>.service-compact-icon {
    grid-column:2;grid-row:1;justify-self:end;width:40px;height:40px;padding:9px;
    background:#fff;border-color:#c4ddd0;
  }
  .home-page #solutions #services-rail>button#website-redesign .card-copy>h3 {
    grid-column:1;grid-row:1;max-width:17ch;font-size:23px;line-height:1.14;
  }
  .home-page #solutions #services-rail>button#website-redesign .card-copy>p {
    display:block;grid-column:1;grid-row:2;margin:0;max-width:32ch;
    font-size:15px;line-height:1.4;color:var(--body);
  }
  .home-page #solutions #services-rail>button#website-redesign>.expand-icon {
    grid-column:2;grid-row:2;align-self:end;justify-self:end;
    width:32px;height:32px;padding:7px;background:#fff;border-radius:8px;
  }
  .home-page #solutions #services-rail>button.solution-card:hover,
  .home-page #solutions #services-rail>button.solution-card:active {
    border-color:#80b09a;background:#f1f8f3;box-shadow:0 3px 12px #082b4705;
    transform:none;
  }
  .home-page #solutions #services-rail>button.solution-card:focus-visible {
    outline:3px solid var(--teal-deep);outline-offset:3px;
  }

  /* Keep the full-size native player below the five service choices. */
  .home-page #solutions #services-rail>.service-video-tile {
    display:flex;flex-direction:column;align-items:center;order:1;
    grid-column:1/-1;grid-row:auto;flex:none;width:100%;max-width:none;
    min-width:0;min-height:0;height:auto;margin:12px 0 0;padding:18px 8px 8px;
    border:1px solid #c8dcd2;border-radius:16px;scroll-snap-align:none;
  }
  .home-page #solutions #services-rail .service-video-title {
    width:100%;max-width:28ch;margin:0;padding:0;text-align:center;
    font-size:20px;line-height:1.25;
  }
  .home-page #solutions #services-rail>.service-video-tile>.video-card__media {
    width:100%;max-width:350px;margin:12px auto 0;
  }
}