/* ============================================================
   SERVICE AREAS PAGE — Hero  (mirrors index.html .hero pattern)
   ============================================================ */
.sa-hero {
  position: relative;
  background-color: var(--clr-bg-cream);
  min-height: calc(56.25rem - var(--header-height)); /* 818px */
  overflow: hidden;
}

/* --- Background layer --- */
.sa-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.sa-hero__bg-img {
  position: absolute;
  top: -1.875rem;              /* y: -30 — matches design offset */
  left: 0;
  width: 100%;
  height: calc(100% + 1.875rem);
  object-fit: cover;
  object-position: right center;
}

/* Gradient: solid cream 0-30% → semi at 42% → transparent 58% */


/* --- Content grid: left(1fr) | form card(521px) --- */
.sa-hero__content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 32.5625rem; /* 521px form card */
  align-items: stretch;
  /* 135px = 217px (design y) − 82px (header height) */
  padding-top: 8.4375rem;
  padding-bottom: 10.9375rem;
  gap: 0;
}

/* --- Left column: title top, desc+buttons bottom --- */
.sa-hero__left {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  padding-right: 4.1875rem;   /* 67px gap between left and form card */
}

.sa-hero__title {
  font-size: 4.5rem;           /* 72px */
  font-weight: 600;
  color: var(--clr-text-dark);
  line-height: 1.05;
  letter-spacing: -0.28125rem; /* -4.5px */
  max-width: 47.5rem;          /* 760px */
}

.sa-hero__body {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;                 /* gap=40 between desc and buttons */
}

.sa-hero__desc {
  font-size: 1.125rem;         /* 18px */
  color: var(--clr-text-dark);
  line-height: 1.3;
  max-width: 32.375rem;        /* 604px - 95px right padding ≈ 510px */
}

/* --- Right: form card (x:873 y:217 w:521 pad:24 gap:50) --- */
.sa-hero__right {
  background: var(--clr-bg-cream);
  border-radius: var(--radius-md);
  padding: 1.5rem;             /* 24px */
  display: flex;
  flex-direction: column;
  gap: 3.125rem;               /* 50px */
}

.sa-hero__form-title {
  font-size: 2.625rem;         /* 42px */
  font-weight: 500;
  color: var(--clr-text-dark);
  line-height: 1.1;
  text-align: center;
  letter-spacing: -0.0625rem;
}

/* Hero form: full-width pink submit button (no checkbox) */
.sa-hero .form__submit-row {
  padding-top: 1rem;           /* Margin pad=[16,0,0,0] */
}

.sa-hero__submit-btn {
  width: 100%;
  color: var(--clr-text-dark);
  height: auto;
  padding-block: 1.25rem;
  font-size: 1.375rem;         /* 22px */
}

/* Hero form button — explicit padding */
.sa-hero .form__submit-row .btn {
  color: var(--clr-text-dark);
  height: auto;
  padding-block: 1.25rem;
}

/* Submit row inner — checkbox left, button fills right */
.form__submit-inner {
  display: flex;
  align-items: center;
  gap: 1.875rem;
}

.form__privacy {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.form__privacy-check {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.form__privacy-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  font-size: 1rem;
  color: #070d19;
  line-height: 1.3;
}

.form__privacy-box {
  display: block;
  width: 1.333rem;
  height: 1.333rem;
  border-radius: 0.334rem;
  border: 1px solid rgba(17, 18, 25, 0.2);
  flex-shrink: 0;
}

.form__privacy-check:checked + .form__privacy-label .form__privacy-box {
  background: #070d19;
  border-color: #070d19;
}

.form__submit-inner > .btn {
  flex: 1;
}


/* ============================================================
   SERVICE AREAS PAGE — Services Grid
   ============================================================ */
.sa-services {
  background: var(--clr-bg-cream);
  padding-block: 7.5rem; /* 120px */
  padding-inline: var(--pad-side);
}

.sa-services__inner {
  max-width: var(--max-width);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.875rem; /* 30px */
}

/* Text cell spans cols 1–2, row 1 */
.sa-services__text-cell {
  grid-column: 1 / 3;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.25rem;
}

.sa-services__title {
  font-size: 3.5rem;          /* 56px */
  font-weight: 600;
  color: var(--clr-text-dark);
  line-height: 1.071;
  letter-spacing: -0.125rem;
}

.sa-services__desc {
  font-size: 1rem;
  color: #5b5b5b;
  line-height: 1.5;
  max-width: 38rem;
}

/* Service cards — bg #fafcfa, radius 5, 350px */
.sa-service-card {
  background: #fafcfa;
  border-radius: var(--radius-sm);
  padding: 0.625rem 0.625rem 1.875rem; /* 10px 10px 30px */
  height: 21.875rem; /* 350px */
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  text-decoration: none;
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}

.sa-service-card:hover {
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}

.sa-service-card__img-wrap {
  flex: 1;
  border-radius: 3px;
  overflow: hidden;
}

.sa-service-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sa-service-card__name {
  font-size: 2rem;        /* 32px */
  font-weight: 500;
  color: var(--clr-text-dark);
  text-align: center;
  line-height: 1.1;
  flex-shrink: 0;
}


/* ============================================================
   SERVICE AREAS PAGE — Proudly Serving Mosaic
   ============================================================ */
.sa-serving {
  background: #fafcfa;
  padding-block: 7.5rem;
  padding-inline: var(--pad-side);
}

.sa-serving__inner {
  max-width: var(--max-width);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 3.75rem;
}

.sa-serving__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.25rem;
}

.sa-serving__title {
  font-size: 3.5rem;
  font-weight: 600;
  color: var(--clr-text-dark);
  line-height: 1.071;
  letter-spacing: -0.125rem;
}

.sa-serving__desc {
  font-size: 1rem;
  color: #5b5b5b;
  line-height: 1.5;
  max-width: 46rem;
}

/* 4-col grid, 2 rows */
.sa-serving__mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 19.1875rem); /* 307px */
  gap: 1rem;
}

/* col 1, row 1 */
.sa-serving__mosaic > .sa-feature-card:nth-child(1) { grid-column: 1; grid-row: 1; }

/* col 2, rows 1–2 — tall image */
.sa-serving__img-tall { grid-column: 2; grid-row: 1 / 3; border-radius: var(--radius-md); overflow: hidden; }

/* col 3, row 1 */
.sa-serving__mosaic > .sa-feature-card:nth-child(3) { grid-column: 3; grid-row: 1; }

/* col 4, row 1 — small image */
.sa-serving__img-sm { grid-column: 4; grid-row: 1; border-radius: var(--radius-md); overflow: hidden; }

/* col 1, row 2 */
.sa-serving__mosaic > .sa-feature-card:nth-child(5) { grid-column: 1; grid-row: 2; }

/* cols 3–4, row 2 — wide feature card */
.sa-feature-card--wide { grid-column: 3 / 5; grid-row: 2; }

.sa-serving__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Feature card */
.sa-feature-card {
  background: #5b5b5b;
  border-radius: var(--radius-md);
  padding: 2rem;             /* 32px */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4rem;                 /* 64px */
}

.sa-feature-card__icon {
  width: 3rem;               /* 48px */
  height: 3rem;
  flex-shrink: 0;
}

.sa-feature-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.sa-feature-card__heading {
  font-size: 1.375rem;   /* 22px */
  font-weight: 600;
  color: #f5f1ed;
  line-height: 1.2;
}

.sa-feature-card__text {
  font-size: 1rem;
  color: rgba(245, 241, 237, 0.7);
  line-height: 1.5;
}


/* ============================================================
   SERVICE AREAS PAGE — All Areas (pill tags)
   ============================================================ */
.sa-areas {
  background: var(--clr-bg-cream);
  padding-block: 7.5rem;
  padding-inline: var(--pad-side);
}

.sa-areas__inner {
  max-width: var(--max-width);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.75rem;
}

.sa-areas__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.25rem;
}

.sa-areas__title {
  font-size: 3.5rem;
  font-weight: 600;
  color: var(--clr-text-dark);
  line-height: 1.071;
  letter-spacing: -0.125rem;
}

.sa-areas__desc {
  font-size: 1rem;
  color: #5b5b5b;
  line-height: 1.5;
  max-width: 44rem;
}

.sa-areas__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;               /* 8px */
  justify-content: center;
}

.sa-area-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #fafcfa;
  border-radius: 3.125rem;   /* pill */
  border: 0.8px solid #e5e7eb;
  padding: 0.625rem 1.25rem; /* 10px 20px */
  font-size: 1rem;
  color: var(--clr-text-dark);
  line-height: 1.3;
  white-space: nowrap;
}


/* ============================================================
   SERVICE AREAS PAGE — CTA 1 (Ready to Book)
   ============================================================ */
.sa-cta1 {
  background: var(--clr-bg-cream);
  padding-inline: var(--pad-side);
  padding-block: 3rem;
}

.sa-cta1__card {
  position: relative;
  max-width: var(--max-width);
  margin-inline: auto;
  background: #5b5b5b;
  border-radius: 1.25rem;   /* 20px */
  padding: 3.125rem;        /* 50px */
  overflow: hidden;
}

/* Decorative shapes — same pattern as index.html .cta__shape */
.sa-cta1__deco {
  position: absolute;
  top: 0;
  height: 100%;
  width: auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.sa-cta1__deco--left {
  left: 0;
  object-position: left center;
}

.sa-cta1__deco--right {
  right: 0;
  object-position: right center;
  transform: scaleX(-1);
}

.sa-cta1__content {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  max-width: 62rem;
  margin-inline: auto;
  text-align: center;
  align-items: center;
}

.sa-cta1__title {
  font-size: 4.5rem;         /* 72px */
  font-weight: 600;
  color: #f0efeb;
  line-height: 1.05;
  letter-spacing: -0.1875rem;
}

.sa-cta1__body {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
  width: 100%;
}

.sa-cta1__desc {
  font-size: 1.125rem;       /* 18px */
  color: #eef1f6;
  line-height: 1.5;
  max-width: 44rem;
}

.sa-cta1__actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

/* Light-bg button (bg #eef1f6) */
.sa-btn--light {
  background: #eef1f6;
  color: #2c2c2c;
  border-color: transparent;
}

.sa-btn--light:hover {
  background: #dde2eb;
}


/* ============================================================
   SERVICE AREAS PAGE — Bottom Form CTA
   ============================================================ */
.sa-form-cta {
  min-height: 40rem;
  background-size: cover;
  background-position: center;
  position: relative;
  padding-block: 7.5rem;
}

.sa-form-cta__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 4rem;
}

.sa-form-cta__left {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-top: 1rem;
}

.sa-form-cta__title {
  font-size: 3.5rem;
  font-weight: 600;
  color: var(--clr-text-dark);
  line-height: 1.071;
  letter-spacing: -0.1875rem;
}

.sa-form-cta__caption {
  font-size: 1rem;
  color: #5b5b5b;
  line-height: 1.5;
  max-width: 23.75rem;
}

.sa-form-cta__right {
  background: var(--clr-bg-cream);
  border-radius: var(--radius-md);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.sa-form-cta .form__submit-row .btn {
  color: var(--clr-text-dark);
  height: auto;
  padding-block: 1.25rem;
}


/* ============================================================
   SERVICE AREAS PAGE — FAQ
   ============================================================ */
.sa-faq {
  background: var(--clr-bg-cream);
  padding-block: 7.5rem;
  padding-inline: var(--pad-side);
}

.sa-faq__inner {
  max-width: var(--max-width);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.75rem;
}

.sa-faq__title {
  font-size: 3.5rem;
  font-weight: 600;
  color: var(--clr-text-dark);
  line-height: 1.071;
  letter-spacing: -0.125rem;
  text-align: center;
}

.sa-faq__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;             /* 20px */
  width: 72rem;             /* 1152px */
  max-width: 100%;
}

.sa-faq__item {
  background: #fafcfa;
  border-radius: var(--radius-md);
}

.sa-faq__details {
  padding: 1.40625rem 1.6875rem; /* 22.5px 27px */
}

.sa-faq__summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  cursor: pointer;
  list-style: none;
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--clr-text-dark);
  line-height: 1.4;
}

.sa-faq__summary::-webkit-details-marker { display: none; }

.sa-faq__chevron {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.sa-faq__details[open] .sa-faq__chevron {
  transform: rotate(180deg);
}

.sa-faq__answer {
  margin-top: 1rem;
  font-size: 1rem;
  color: #5b5b5b;
  line-height: 1.6;
}


/* ============================================================
   SERVICE AREAS PAGE — Success Modal
   ============================================================ */
.sa-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(7, 13, 25, 0.96);
}

.sa-modal[hidden] {
  display: none;
}

.sa-modal__card {
  width: 51rem;
  background: #f0f2f7;
  border-radius: 2rem;
  padding: 5.3325rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.9375rem;
}

.sa-modal__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sa-modal__thank {
  font-size: 3.669rem;
  font-weight: 300;
  color: #070d19;
  line-height: 1.022;
  letter-spacing: -0.0731rem;
  text-align: center;
}

.sa-modal__desc {
  font-size: 1.5rem;
  color: #111212;
  line-height: 1.333;
  text-align: center;
  max-width: 38rem;
}

.sa-modal__ok {
  background: #070d19;
  color: #f0f2f7;
  border: 2px solid #f0f2f7;
  border-radius: 1rem;
  padding: 1.0725rem 2.791rem;
  font-family: var(--font-body);
  font-size: 1.169rem;
  line-height: 1.711;
  cursor: pointer;
  transition: filter 0.2s ease;
}

.sa-modal__ok:hover {
  filter: brightness(1.15);
}


/* ============================================================
   SERVICE AREAS PAGE — Responsive
   ============================================================ */

/* 1280px */
@media (max-width: 80rem) {
  .sa-hero__title {
    font-size: 3.5rem;
    letter-spacing: -0.1875rem;
  }

  .sa-services__title,
  .sa-serving__title,
  .sa-areas__title,
  .sa-cta1__title,
  .sa-faq__title,
  .sa-form-cta__title {
    font-size: 2.75rem;
    letter-spacing: -0.1rem;
  }

  .sa-form-cta__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .sa-serving__mosaic {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }

  .sa-serving__mosaic > .sa-feature-card:nth-child(1) { grid-column: 1; grid-row: 1; }
  .sa-serving__img-tall { grid-column: 2; grid-row: 1 / 3; min-height: 22rem; }
  .sa-serving__mosaic > .sa-feature-card:nth-child(3) { grid-column: 1; grid-row: 2; }
  .sa-serving__img-sm { grid-column: 2; grid-row: 3; }
  .sa-serving__mosaic > .sa-feature-card:nth-child(5) { grid-column: 1; grid-row: 3; }
  .sa-feature-card--wide { grid-column: 1 / 3; grid-row: 4; }
}

/* 1024px */
@media (max-width: 64rem) {
  .sa-hero__content {
    grid-template-columns: 1fr;
    padding-bottom: 4rem;
  }

  .sa-hero__left {
    padding-right: 0;
    min-height: 16rem;
    gap: 2rem;
  }

  .sa-hero__right {
margin-top: 25px;
  }

  .sa-hero__title {
    font-size: 2.75rem;
    letter-spacing: -0.125rem;
  }



  .sa-services__inner {
    grid-template-columns: repeat(2, 1fr);
  }

  .sa-services__text-cell {
    grid-column: 1 / 3;
  }

  .sa-cta1__title {
    font-size: 3rem;
    letter-spacing: -0.125rem;
  }

  .sa-serving__mosaic {
    grid-template-columns: 1fr;
  }

  .sa-serving__mosaic > .sa-feature-card:nth-child(1) { grid-column: 1; grid-row: auto; }
  .sa-serving__img-tall { grid-column: 1; grid-row: auto; max-height: 10rem; }
  .sa-serving__mosaic > .sa-feature-card:nth-child(3) { grid-column: 1; grid-row: auto; }
  .sa-serving__img-sm { grid-column: 1; grid-row: auto; min-height: 14rem; }
  .sa-serving__mosaic > .sa-feature-card:nth-child(5) { grid-column: 1; grid-row: auto; }
  .sa-feature-card--wide { grid-column: 1; grid-row: auto; }
}

/* 768px */
@media (max-width: 48rem) {
  .sa-hero__content {
    padding-top: 5rem;
    padding-bottom: 3rem;
  }

  .sa-hero__title {
    font-size: 2.5rem;
    letter-spacing: -0.075rem;
  }

  .sa-hero__right {
    padding: 1rem;
  }

  .sa-hero__form-title {
    font-size: 1.75rem;
  }
.sa-hero__bg-img{
	object-position: center;
}


  .sa-services,
  .sa-serving,
  .sa-areas,
  .sa-faq {
    padding-block: 3.75rem;
    padding-inline: 1rem;
  }

  .sa-cta1 {
    padding-inline: 1rem;
    padding-block: 2rem;
  }

  .sa-cta1__card {
    padding: 2rem 1.25rem;
  }

  .sa-cta1__title {
    font-size: 2.25rem;
    letter-spacing: -0.075rem;
  }

  .sa-services__inner {
    grid-template-columns: 1fr;
  }

  .sa-services__text-cell {
    grid-column: 1;
  }

  .sa-service-card {
    height: 16rem;
  }

  .sa-service-card__name {
    font-size: 1.5rem;
  }

  .sa-serving__mosaic {
    grid-template-rows: auto;
  }

  .sa-feature-card {
    gap: 2rem;
  }

  .sa-services__title,
  .sa-serving__title,
  .sa-areas__title,
  .sa-faq__title,
  .sa-form-cta__title {
    font-size: 2rem;
    letter-spacing: -0.05rem;
  }

  .sa-form-cta {
    padding-inline: 1rem;
    padding-block: 3.75rem;
  }

  .sa-form-cta__right {
    padding: 1.25rem;
  }

  .sa-faq__list {
    gap: 0.75rem;
  }

  .sa-faq__summary {
    font-size: 1rem;
  }

  .form__submit-inner {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }

  .form__submit-inner > .btn {
    width: 100%;
  }

  .sa-modal__card {
    width: calc(100% - 2rem);
    padding: 2.5rem 1.5rem;
  }

  .sa-modal__thank {
    font-size: 2.25rem;
  }

  .sa-modal__desc {
    font-size: 1.125rem;
  }

  .sa-cta1__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .sa-cta1__actions > .btn,
  .sa-hero__actions > .btn {
    text-align: center;
  }
}