.canvas {
  height: auto;
  min-height: 4538px;
  overflow: visible;
}

.canvas main {
  position: relative;
  min-height: 4538px;
  padding-top: 4538px;
}

.cockroach-service-flow {
  position: relative;
  width: 1920px;
  margin-top: 0;
  color: #0c0c0c;
  background: #fdf4db;
}

.cockroach-service-flow,
.cockroach-service-flow * {
  box-sizing: border-box;
}

.flow-section,
.flow-footer {
  position: relative;
  width: 1920px;
  overflow: hidden;
}

.flow-container {
  width: 1594px;
  margin: 0 auto;
}

.flow-section {
  padding: 112px 0 120px;
}

.flow-eyebrow {
  margin: 0 0 24px;
  font-size: 26px;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: 0.04em;
}

.flow-section h2,
.final-cta-section h2 {
  margin: 0;
  font-family: "Paytone One", sans-serif;
  font-size: 60px;
  font-weight: 400;
  line-height: 75px;
}

.flow-section h3 {
  margin: 0;
  font-family: "Paytone One", sans-serif;
  font-weight: 400;
}

.flow-section p,
.flow-section summary,
.flow-section a {
  font-family: "Poppins", sans-serif;
}

.flow-icon,
.factor-icon,
.seo-icon,
.area-icon,
.button-icon {
  display: block;
  flex: 0 0 auto;
  color: currentColor;
}

.flow-icon {
  width: 76px;
  height: 76px;
}

.process-section {
  background: #fdf4db;
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-top: 70px;
  border: 3px solid #0c0c0c;
}

.process-card {
  position: relative;
  min-height: 430px;
  padding: 78px 28px 34px;
  background: #f4e6be;
  border-right: 3px solid #0c0c0c;
}

.process-card:last-child {
  border-right: 0;
}

.process-card .step-number {
  position: absolute;
  top: 24px;
  left: 28px;
  display: grid;
  width: 45px;
  height: 45px;
  place-items: center;
  border-radius: 50%;
  background: #f4e6be;
  font-size: 16px;
  font-weight: 700;
}

.process-card h3 {
  min-height: 84px;
  margin-top: 30px;
  font-size: 27px;
  line-height: 34px;
}

.process-card p {
  margin-top: 16px;
  color: #3a3a3a;
  font-size: 17px;
  line-height: 27px;
}

.step-arrow {
  position: absolute;
  z-index: 2;
  top: 190px;
  right: -24px;
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 3px solid #0c0c0c;
  border-radius: 50%;
  background: #f4e6be;
  font-size: 28px;
  line-height: 1;
}

.price-section {
  padding: 124px 0;
  color: #fdf4db;
  background: #0c0c0c;
}

.price-layout {
  display: grid;
  grid-template-columns: 0.88fr 1.12fr;
  gap: 126px;
  align-items: center;
}

.price-copy h2 {
  max-width: 700px;
}

.price-copy > p:not(.flow-eyebrow) {
  max-width: 620px;
  margin-top: 32px;
  color: rgba(253, 244, 219, 0.72);
  font-size: 20px;
  line-height: 32px;
}

.corner-button {
  position: relative;
  display: inline-flex;
  min-height: 78px;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 48px;
  padding: 20px 34px;
  color: #fdf4db;
  border: 3px solid #0c0c0c;
  background: #0c0c0c;
  font-size: 21px;
  font-weight: 600;
  line-height: 28px;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}

.corner-button-light {
  color: #0c0c0c;
  border-color: #fdf4db;
  background: #fdf4db;
}

.factor-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.factor-list li {
  display: grid;
  grid-template-columns: 52px 1fr 34px;
  gap: 22px;
  align-items: center;
  min-height: 92px;
  border-bottom: 2px solid #f4e6be;
}

.factor-icon {
  width: 44px;
  height: 44px;
}

.factor-list span {
  font-size: 25px;
  line-height: 32px;
}

.factor-list strong {
  font-family: "Poppins", sans-serif;
  font-size: 40px;
  font-weight: 300;
}

.preparation-section {
  background: #f4e6be;
}

.preparation-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 66px;
  border: 3px solid #0c0c0c;
}

.info-card {
  min-height: 440px;
  padding: 44px 42px;
  background: #fdf4db;
  border-right: 3px solid #0c0c0c;
}

.info-card:last-child {
  border-right: 0;
}

.info-card h3 {
  margin-top: 32px;
  font-size: 32px;
  line-height: 40px;
}

.info-card p {
  margin-top: 20px;
  color: #3a3a3a;
  font-size: 18px;
  line-height: 29px;
}

.repeat-section {
  background: #fdf4db;
}

.repeat-section h2 {
  max-width: 1180px;
}

.repeat-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin-top: 70px;
  border-top: 3px solid #0c0c0c;
  border-left: 3px solid #0c0c0c;
}

.repeat-card {
  min-height: 390px;
  padding: 42px 30px;
  border-right: 3px solid #0c0c0c;
  border-bottom: 3px solid #0c0c0c;
}

.repeat-card h3 {
  margin-top: 30px;
  font-size: 29px;
  line-height: 37px;
}

.repeat-card p {
  margin-top: 18px;
  color: #636363;
  font-size: 17px;
  line-height: 28px;
}

.statement-strip {
  margin: 54px 0 0;
  padding: 30px 42px;
  color: #fdf4db;
  background: #0c0c0c;
  font-size: 24px;
  font-weight: 500;
  line-height: 34px;
}

.proof-section {
  background: #f4e6be;
}

.benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 68px;
  border: 3px solid #0c0c0c;
}

.benefit-card {
  min-height: 360px;
  padding: 46px;
  border-right: 3px solid #0c0c0c;
  background: #fdf4db;
}

.benefit-card:last-child {
  border-right: 0;
}

.benefit-card h3 {
  margin-top: 30px;
  font-size: 35px;
  line-height: 43px;
}

.benefit-card p {
  margin-top: 20px;
  color: #3a3a3a;
  font-size: 19px;
  line-height: 30px;
}

.area-strip {
  display: flex;
  min-height: 150px;
  align-items: center;
  gap: 32px;
  margin-top: 50px;
  padding: 30px 48px;
  color: #fdf4db;
  background: #0c0c0c;
}

.area-icon {
  width: 62px;
  height: 62px;
}

.area-strip h3 {
  font-size: 32px;
  line-height: 40px;
}

.area-strip p {
  margin-top: 6px;
  color: rgba(253, 244, 219, 0.72);
  font-size: 19px;
  line-height: 29px;
}

.faq-section {
  background: #fdf4db;
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 80px;
  margin-top: 64px;
}

.faq-item {
  border-bottom: 3px solid #0c0c0c;
}

.faq-item summary {
  display: grid;
  grid-template-columns: 1fr 44px;
  gap: 18px;
  align-items: center;
  min-height: 116px;
  cursor: pointer;
  list-style: none;
  font-size: 23px;
  font-weight: 600;
  line-height: 32px;
}

.faq-item summary::-webkit-details-marker,
.seo-panel summary::-webkit-details-marker {
  display: none;
}

.faq-item summary span {
  font-size: 32px;
  transition: transform 160ms ease;
}

.faq-item[open] summary span {
  transform: rotate(90deg);
}

.faq-item p {
  padding: 0 54px 34px 0;
  color: #3a3a3a;
  font-size: 18px;
  line-height: 30px;
}

.seo-section {
  background: #f4e6be;
}

.seo-panels {
  margin-top: 64px;
}

.seo-panel {
  margin-top: 30px;
  border: 3px solid #0c0c0c;
  background: #fdf4db;
}

.seo-panel summary {
  display: grid;
  grid-template-columns: 100px 1fr 60px;
  gap: 34px;
  align-items: center;
  min-height: 210px;
  padding: 36px 48px;
  cursor: pointer;
  list-style: none;
}

.seo-icon {
  width: 90px;
  height: 90px;
}

.seo-panel summary span {
  display: block;
}

.seo-panel summary strong {
  display: block;
  font-family: "Paytone One", sans-serif;
  font-size: 37px;
  font-weight: 400;
  line-height: 47px;
}

.seo-panel summary small {
  display: block;
  margin-top: 14px;
  color: #636363;
  font-size: 18px;
  line-height: 28px;
}

.seo-panel summary b {
  font-size: 42px;
  font-weight: 400;
  transition: transform 160ms ease;
}

.seo-panel[open] summary b {
  transform: rotate(90deg);
}

.seo-body {
  padding: 0 182px 50px;
}

.seo-body p {
  margin-top: 18px;
  color: #3a3a3a;
  font-size: 19px;
  line-height: 31px;
}

.final-cta-section {
  padding: 100px 0 0;
  background: linear-gradient(to bottom, #fdf4db 0 62%, #0c0c0c 62% 100%);
}

.final-cta-panel {
  position: relative;
  width: 1594px;
  min-height: 650px;
  margin: 0 auto;
  overflow: hidden;
  background: #f4e6be;
}

.final-decor {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: 1110px;
  pointer-events: none;
}

.final-cta-copy {
  position: relative;
  z-index: 2;
  width: 860px;
  padding: 74px 0 72px 74px;
}

.final-cta-copy h2 {
  font-size: 57px;
  line-height: 70px;
}

.final-cta-copy > p {
  max-width: 760px;
  margin-top: 26px;
  color: #3a3a3a;
  font-size: 20px;
  line-height: 31px;
}

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.button-icon {
  width: 30px;
  height: 30px;
}

.final-art {
  position: absolute;
  right: 28px;
  bottom: 26px;
  width: 640px;
  height: 470px;
}

.final-vehicle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 600px;
  height: auto;
}

.final-cockroach {
  position: absolute;
  top: 16px;
  right: 50px;
  width: 165px;
  height: 165px;
}

.flow-footer {
  top: auto;
  left: auto;
  height: 817px;
  color: #f4e6be;
  background: #0c0c0c;
  pointer-events: none;
}

.flow-footer a {
  pointer-events: auto;
}

.flow-footer h2 {
  position: absolute;
  top: 260px;
  height: 28px;
  color: #f4e6be;
  font-size: 25px;
  font-weight: 700;
  line-height: 28px;
  white-space: nowrap;
}

.flow-footer .footer-brand h2 { left: 295px; }
.flow-footer .footer-brand p { top: 354px; }
.flow-footer .footer-links h2 { left: 818px; }
.flow-footer .footer-account h2 { left: 1471px; }
.flow-footer .footer-home,
.flow-footer .footer-training,
.flow-footer .pay-link { top: 348px; }
.flow-footer .footer-pest,
.flow-footer .footer-prevent,
.flow-footer .footer-contact { top: 424px; }
.flow-footer .copyright { top: 680px; }

@media (max-width: 1100px) {
  .process-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .process-card:nth-child(3) {
    border-right: 0;
  }

  .process-card:nth-child(-n + 3) {
    border-bottom: 3px solid #0c0c0c;
  }

  .process-card:nth-child(4),
  .process-card:nth-child(5) {
    border-right: 3px solid #0c0c0c;
  }

  .process-card .step-arrow {
    display: none;
  }

  .preparation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .info-card:nth-child(2) {
    border-right: 0;
  }

  .info-card:nth-child(-n + 2) {
    border-bottom: 3px solid #0c0c0c;
  }

  .info-card:nth-child(3) {
    border-right: 3px solid #0c0c0c;
  }
}

@media (max-width: 700px) {
  .cockroach-service-flow {
    width: 1920px;
  }

  .flow-section {
    padding-top: 220px;
    padding-bottom: 240px;
  }

  .flow-eyebrow {
    margin-bottom: 54px;
    font-size: 68px;
    line-height: 82px;
  }

  .flow-section h2,
  .final-cta-section h2 {
    font-size: 142px;
    line-height: 166px;
  }

  .process-grid,
  .preparation-grid,
  .repeat-grid,
  .benefit-grid,
  .faq-grid {
    grid-template-columns: 1fr;
  }

  .process-card,
  .info-card,
  .repeat-card,
  .benefit-card {
    border-right: 0 !important;
    border-bottom: 3px solid #0c0c0c;
  }

  .process-card {
    min-height: 920px;
    padding: 210px 74px 90px;
  }

  .process-card .step-number {
    top: 65px;
    left: 74px;
    width: 110px;
    height: 110px;
    font-size: 46px;
  }

  .flow-icon {
    width: 180px;
    height: 180px;
  }

  .process-card h3,
  .info-card h3,
  .repeat-card h3,
  .benefit-card h3 {
    min-height: 0;
    margin-top: 58px;
    font-size: 96px;
    line-height: 118px;
  }

  .process-card p,
  .info-card p,
  .repeat-card p,
  .benefit-card p {
    margin-top: 42px;
    font-size: 66px;
    line-height: 96px;
  }

  .process-card:last-child,
  .info-card:last-child,
  .benefit-card:last-child {
    border-bottom: 0;
  }

  .repeat-grid {
    border-right: 3px solid #0c0c0c;
  }

  .price-layout {
    grid-template-columns: 1fr;
    gap: 170px;
  }

  .price-copy > p:not(.flow-eyebrow) {
    max-width: 1450px;
    margin-top: 70px;
    font-size: 68px;
    line-height: 100px;
  }

  .corner-button {
    min-height: 220px;
    margin-top: 90px;
    padding: 48px 70px;
    gap: 38px;
    font-size: 64px;
    line-height: 88px;
    clip-path: polygon(0 0, calc(100% - 48px) 0, 100% 48px, 100% 100%, 48px 100%, 0 calc(100% - 48px));
  }

  .factor-list li {
    grid-template-columns: 130px 1fr 80px;
    gap: 44px;
    min-height: 230px;
  }

  .factor-icon {
    width: 110px;
    height: 110px;
  }

  .factor-list span {
    font-size: 68px;
    line-height: 90px;
  }

  .factor-list strong {
    font-size: 100px;
  }

  .info-card {
    min-height: 1320px;
    padding: 110px 76px;
  }

  .repeat-card {
    min-height: 900px;
    padding: 110px 76px;
  }

  .statement-strip {
    margin-top: 100px;
    padding: 74px 78px;
    font-size: 66px;
    line-height: 96px;
  }

  .benefit-card {
    min-height: 850px;
    padding: 110px 76px;
  }

  .area-strip {
    min-height: 530px;
    gap: 60px;
    margin-top: 100px;
    padding: 80px;
  }

  .area-icon {
    width: 150px;
    height: 150px;
  }

  .area-strip h3 {
    font-size: 92px;
    line-height: 114px;
  }

  .area-strip p {
    margin-top: 26px;
    font-size: 62px;
    line-height: 92px;
  }

  .faq-grid {
    gap: 0;
  }

  .faq-item summary {
    grid-template-columns: 1fr 110px;
    gap: 30px;
    min-height: 310px;
    font-size: 68px;
    line-height: 94px;
  }

  .faq-item summary span {
    font-size: 90px;
  }

  .faq-item p {
    padding: 0 110px 90px 0;
    font-size: 64px;
    line-height: 96px;
  }

  .seo-panel {
    margin-top: 70px;
  }

  .seo-panel summary {
    grid-template-columns: 190px 1fr 100px;
    gap: 54px;
    min-height: 680px;
    padding: 90px 70px;
  }

  .seo-icon {
    width: 170px;
    height: 170px;
  }

  .seo-panel summary strong {
    font-size: 92px;
    line-height: 116px;
  }

  .seo-panel summary small {
    margin-top: 34px;
    font-size: 60px;
    line-height: 90px;
  }

  .seo-panel summary b {
    font-size: 100px;
  }

  .seo-body {
    padding: 0 100px 110px;
  }

  .seo-body p {
    margin-top: 50px;
    font-size: 64px;
    line-height: 98px;
  }

  .final-cta-section {
    padding-top: 180px;
    background: linear-gradient(to bottom, #fdf4db 0 70%, #0c0c0c 70% 100%);
  }

  .final-cta-panel {
    min-height: 0;
    padding-bottom: 80px;
  }

  .final-decor {
    display: none;
  }

  .final-cta-copy {
    width: 1594px;
    padding: 130px 80px;
  }

  .final-cta-copy h2 {
    font-size: 132px;
    line-height: 158px;
  }

  .final-cta-copy > p {
    max-width: 1450px;
    margin-top: 56px;
    font-size: 64px;
    line-height: 96px;
  }

  .contact-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px;
    width: 1050px;
    margin-top: 90px;
  }

  .contact-actions .corner-button {
    margin-top: 0;
  }

  .button-icon {
    width: 92px;
    height: 92px;
  }

  .final-art {
    position: relative;
    right: auto;
    bottom: auto;
    width: 1080px;
    height: 820px;
    margin: 20px 30px 0 auto;
  }

  .final-vehicle {
    width: 1060px;
  }

  .final-cockroach {
    width: 220px;
    height: 220px;
  }

  .flow-footer {
    height: 1800px;
  }

  .flow-footer h2 {
    top: 220px;
    height: 100px;
    font-size: 78px;
    line-height: 96px;
  }

  .flow-footer .footer-brand h2 {
    left: 140px;
  }

  .flow-footer .footer-brand p {
    left: 140px;
    top: 430px;
    width: 560px;
    height: auto;
    font-size: 58px;
    line-height: 88px;
  }

  .flow-footer .footer-links h2 {
    left: 760px;
  }

  .flow-footer .footer-account h2 {
    left: 1300px;
  }

  .flow-footer .footer-links a,
  .flow-footer .footer-account a {
    height: 90px;
    font-size: 58px;
    line-height: 84px;
  }

  .flow-footer .footer-home,
  .flow-footer .footer-training,
  .flow-footer .pay-link {
    top: 430px;
  }

  .flow-footer .footer-pest,
  .flow-footer .footer-prevent,
  .flow-footer .footer-contact {
    top: 610px;
  }

  .flow-footer .footer-home,
  .flow-footer .footer-pest {
    left: 760px;
  }

  .flow-footer .footer-training,
  .flow-footer .footer-prevent {
    left: 1000px;
  }

  .flow-footer .pay-link,
  .flow-footer .footer-contact {
    left: 1300px;
  }

  .flow-footer .footer-home {
    left: 760px;
    top: 430px;
  }

  .flow-footer .footer-pest {
    left: 760px;
    top: 610px;
  }

  .flow-footer .footer-prevent {
    left: 760px;
    top: 790px;
  }

  .flow-footer .footer-training {
    left: 760px;
    top: 970px;
  }

  .flow-footer .pay-link {
    top: 430px;
  }

  .flow-footer .footer-contact {
    top: 610px;
  }

  .flow-footer .copyright {
    left: 140px;
    top: 1460px;
    width: 1200px;
    height: 90px;
    font-size: 54px;
    line-height: 80px;
  }
}