/* =========================
   Sail & Canvas Cleaning
   Modern white style + same visual language
   HTML structure unchanged
========================= */

.text{
  --sc-bg: #F8F8FA;
  --sc-card: #ffffff;
  --sc-ink: #202E52;
  --sc-blue: #005598;
  --sc-muted: #5f6b7a;
  --sc-border: rgba(15, 33, 64, 0.10);
  --sc-shadow: 0 18px 45px rgba(15, 33, 64, 0.08);
  --sc-shadow-hover: 0 22px 52px rgba(15, 33, 64, 0.12);
  --sc-radius: 24px;
  --sc-radius-sm: 18px;
  --sc-container: min(1180px, 92vw);

  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(4rem, 8vw, 7rem);
  background:#fafafa;
  overflow: hidden;
  box-sizing: border-box;
}

.text > .cleaning-intro,
.text > .common_issues-container,
.text > .services-container,
.text > .how_connect,
.text > .link_contact_us{
  width: var(--sc-container);
  margin: auto;
  box-sizing: border-box;
}

/* =========================
   Intro
========================= */

.cleaning-intro{
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(280px, .92fr);
  gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: center;
  padding: clamp(1.35rem, 3vw, 2.4rem);
  background: var(--sc-card);
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius);
  box-shadow: var(--sc-shadow);
}

.cleaning-intro__copy{
  min-width: 0;
}

.cleaning-intro__copy > h1{
  margin-top: 0;
  margin-bottom: 1.15rem;
  text-align: left;
  color: var(--sc-blue);
  font-size: clamp(2.35rem, 4.6vw, 5rem);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.04em;
  max-width: 11ch;
}

.cleaning-intro__copy > p{
  margin-top: 0;
  margin-bottom: 0;
  color: var(--sc-muted);
  font-size: clamp(1.08rem, 1.5vw, 1.26rem);
  line-height: 1.8;
  max-width: 78ch;
  text-wrap: pretty;
}

.cleaning-intro__media{
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(15, 33, 64, .08);
  border-radius: var(--sc-radius-sm);
  background: #e9edf3;
}

.cleaning-intro__media img{
  display: block;
  width: 100%;
  min-height: 320px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
}

/* =========================
   Shared section wrappers
========================= */

.common_issues-container,
.services-container,
.how_connect{
  position: relative;
  display: flex;
  flex-direction: column;
  margin-top: clamp(2.5rem, 5vw, 4.25rem);
  padding: clamp(1.8rem, 3vw, 2.4rem);
  background-color: #fafafa;

  border-radius: calc(var(--sc-radius) + 4px);
  backdrop-filter: blur(4px);
}

.common_issues-container > h2,
.services-container > h2,
.how_connect > h2{
  margin: 0 0 .85rem;
  color: var(--sc-ink);
  text-align: center;
  font-size: clamp(1.7rem, 2.7vw, 2.6rem);
  line-height: 1.15;
  font-weight: 650;
  letter-spacing: -0.03em;
}

.common_issues-container > p,
.services-container > p,
.how_connect > p{
  margin: auto;
  text-align: justify;
  color: var(--sc-muted);
  font-size: clamp(1rem, 1.35vw, 1.12rem);
  line-height: 1.8;
  max-width: 76ch;
}

/* =========================
   Grid areas
========================= */

.common_issues-container,
.services-container{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.35rem;
}

.common_issues-container > h2,
.common_issues-container > p,
.services-container > h2,
.services-container > p{
  grid-column: 1 / -1;
}

.common_issues-box{
  grid-column: span 4;
}

.services-box{
  grid-column: span 4;
}

/* =========================
   Cards
========================= */

.common_issues-box,
.services-box,
.how_connect_card{
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 1.25rem 1.2rem 1.35rem;
  background: var(--sc-card);
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius);
  box-shadow: var(--sc-shadow);
  overflow: hidden;
  transition:
    transform .24s ease,
    box-shadow .24s ease,
    border-color .24s ease;
}

.common_issues-box::before,
.services-box::before,
.how_connect_card::before{
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, #005598 0%, #2a7fc4 100%);
  opacity: 0;
  transition: opacity .24s ease;
}

.common_issues-box:hover,
.services-box:hover,
.how_connect_card:hover{
  transform: translateY(-4px);
  box-shadow: var(--sc-shadow-hover);
  border-color: rgba(0, 85, 152, 0.18);
}

.common_issues-box:hover::before,
.services-box:hover::before,
.how_connect_card:hover::before{
  opacity: 1;
}

/* =========================
   Images / logos inside cards
========================= */

.common_issues-box img,
.services-box img{
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: contain;
  display: block;
  border-radius: 18px;
  margin-bottom: 1rem;
  background:
    linear-gradient(180deg, rgba(0,85,152,0.03), rgba(32,46,82,0.02)),
    #f9fafc;
  border: 1px solid rgba(15,33,64,.06);
  padding: 1rem;
  box-sizing: border-box;
}

/* =========================
   Headings inside cards
========================= */

.common_issues-box h2,
.services-box h2{
  margin: .1rem 0 .7rem;
  color: var(--sc-ink);
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: .01em;
}

.common_issues-box p,
.services-box p{
  margin: 0;
  color: var(--sc-muted);
  font-size: .98rem;
  line-height: 1.72;
}

/* =========================
   How connect section
========================= */

.how_connect_cards{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.35rem;
}

.how_connect_card{
  grid-column: span 6;
  padding: 1.35rem 1.3rem 1.4rem;
}

.how_connect_card_wide{
  grid-column: 1 / -1;
}

.how_connect_card h4{
  margin: 0 0 .85rem;
  color: var(--sc-blue);
  font-size: clamp(1.06rem, 1.35vw, 1.18rem);
  line-height: 1.45;
  font-weight: 700;
}

.how_connect_card p{
  margin: 0 0 .8rem;
  color: var(--sc-muted);
  font-size: .99rem;
  line-height: 1.75;
}

.how_connect_card strong{
  color: var(--sc-ink);
  font-weight: 700;
}

.how_connect_card ul{
  margin: .25rem 0 1rem 1.2rem;
  padding: 0;
  color: var(--sc-muted);
}

.how_connect_card li{
  margin-bottom: .55rem;
  line-height: 1.7;
}

/* =========================
   Contact button
========================= */

.link_contact_us{
  align-items: center;
  justify-content: center;
  margin:auto;
  text-decoration: none;
  display: flex;
}

.buttonTitle{
  min-width: 215px;
  min-height: 74px;
  padding: 0 1.6rem;
  background: linear-gradient(180deg, #0b67b4 0%, #005598 100%);
  box-shadow: 0 20px 34px rgba(0, 85, 152, 0.16);
  display: inline-flex;
  align-items: center;
  margin: auto;
  justify-content: center;
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    filter .2s ease;
}

.buttonTitle h3{
  margin: 0;
  color: #fff;
  font-size: clamp(1.08rem, 1.4vw, 1.35rem);
  font-weight: 700;
  line-height: 1;
}

.link_contact_us:hover .buttonTitle,
.link_contact_us:focus-visible .buttonTitle{
  transform: translateY(-2px);
  box-shadow: 0 24px 38px rgba(0, 85, 152, 0.22);
  filter: brightness(1.03);
}

.link_contact_us:focus-visible{
  outline: none;
}

/* =========================
   Responsive
========================= */

@media (max-width: 1100px){
  .common_issues-box,
  .services-box{
    grid-column: span 6;
  }

  .how_connect_card{
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px){
  .cleaning-intro{
    grid-template-columns: 1fr;
  }

  .cleaning-intro__media img{
    min-height: 240px;
  }
}

@media (max-width: 760px){
  .text{
    padding-top: 2.6rem;
    padding-bottom: 3.4rem;
  }

  .cleaning-intro__copy > h1{
    max-width: 100%;
    margin-bottom: .95rem;
  }

  .cleaning-intro{
    padding: 1.2rem;
    border-radius: 22px;
  }

  .common_issues-container,
  .services-container,
  .how_connect{
    padding: 1.2rem;
    border-radius: 22px;
  }

  .common_issues-box,
  .services-box{
    grid-column: 1 / -1;
  }

  .common_issues-box,
  .services-box,
  .how_connect_card{
    border-radius: 20px;
  }

  .buttonTitle{
    min-width: 190px;
    min-height: 68px;
  }
}

@media (prefers-reduced-motion: reduce){
  .common_issues-box,
  .services-box,
  .how_connect_card,
  .buttonTitle{
    transition: none;
  }
}