/* ==========================================================================
   Sonex Branding — Service detail pages
   Branding · Designing · Printing · Digital Marketing · Website Development

   All five share this layout: a full-bleed banner, then a rounded outline
   "pill" holding the service name beside a column of justified body copy.
   Per-page differences (banner art, border colour, overlaid heading) are
   driven by the custom properties and modifier classes below.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Banner
   -------------------------------------------------------------------------- */

.svc-hero {
  position: relative;
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  /* Per-page hooks — set inline or on the modifier class */
  --hero-img: none;
  --hero-bg: #574848;
  --hero-size: 100% auto;
  --hero-repeat: repeat;
  --hero-pos: center center;
  --hero-border: 10px solid #1F201F;
  --hero-overlay: #000000;
  --hero-overlay-img: none;
  --hero-overlay-opacity: 0.29;

  background-color: var(--hero-bg);
  background-image: var(--hero-img);
  background-position: var(--hero-pos);
  background-repeat: var(--hero-repeat);
  background-size: var(--hero-size);
  border: var(--hero-border);
  padding: 39px 69px 0 175px;
}

.svc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: var(--hero-overlay-opacity);
  background-color: var(--hero-overlay);
  background-image: var(--hero-overlay-img);
  pointer-events: none;
}

.svc-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
}

/* Printing — a repeating strip on grey with a double border */
.svc-hero--printing {
  --hero-bg: #7A7A7A;
  --hero-size: 78% auto;
  --hero-repeat: repeat-x;
  --hero-border: 10px double #414643;
  --hero-overlay-opacity: 0.5;
  padding: 0 26px;
}

/* Designing — art anchored to the top, green-tinted border */
.svc-hero--designing {
  --hero-bg: #7A7A7A;
  --hero-pos: center top;
  --hero-border: 10px solid #1F3024;
  padding: 0 69px;
}

/* Headings sitting on top of the banner art */
.svc-hero__title {
  font-family: "Tiro Devanagari Hindi", serif;
  font-size: 37px;
  font-weight: var(--fw-semibold);
  line-height: 57px;
  color: #0F1010;
  text-align: center;
}

.svc-hero__title--designing {
  font-family: "Ysabeau Infant", sans-serif;
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  color: #677D86;
  text-align: start;
  padding-top: 62px;
}

.svc-hero__title--wd {
  font-family: var(--f-display);
  font-size: 27px;
  font-weight: var(--fw-bold);
  line-height: 1.3;
  color: #206C8C;
  text-align: start;
}

/* --------------------------------------------------------------------------
   Body — pill beside the copy
   -------------------------------------------------------------------------- */

.svc-body {
  display: flex;
  justify-content: space-evenly;
  gap: 198px;
  padding: 10px;
  max-width: 1420px;
  margin: 10px auto 0;
}

.svc-pill {
  flex: 0 0 auto;
  align-self: center;
  width: 29vw;
  max-width: 418px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5vw;
  border: 3px solid var(--c-white);
  border-radius: 74px;
}

/* Designing's pill is drawn in the off-white used across that page */
.svc-pill--soft {
  border-color: #FFF2F2;
}

.svc-pill__title {
  font-family: var(--f-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  color: var(--c-green-hover);
  text-align: center;
}

/* Half the row exactly — it must not grow into the space-evenly gaps */
.svc-copy {
  flex: 0 1 50%;
  min-width: 0;
  align-self: flex-end;
  margin-top: 33px;
  padding: 10px 10px var(--svc-tail, 10px);
}

/* --svc-tail reproduces blank space the live pages carry below this copy. It
   comes from empty wrapper elements left behind when the text was pasted into
   WordPress from ChatGPT. Set it to 10px to close the gap up. */

.svc-copy__text {
  font-family: var(--f-body);
  font-size: 21px;
  font-weight: var(--fw-regular);
  line-height: 36px;
  color: var(--c-white);
  text-align: justify;
}

/* Astra's paragraph rhythm, which the original inherits */
.svc-copy__text p {
  margin: 0 0 1.6em;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .svc-hero {
    min-height: 43vh;
    padding: 0;
  }

  .svc-hero--printing,
  .svc-hero--designing {
    padding: 0;
  }

  .svc-hero__title--designing {
    padding-top: 30px;
    text-align: center;
  }

  .svc-body {
    flex-direction: column;
    gap: 0;
    padding: 0 10px;
  }

  .svc-pill {
    width: 55vw;
    min-height: 194px;
    margin-top: 8vw;
    padding: 0;
  }

  .svc-copy {
    align-self: stretch;
    margin-top: 24px;
  }

  .svc-copy__text {
    font-size: var(--fs-body);
  }
}

@media (max-width: 767px) {
  .svc-hero {
    min-height: 29vh;
  }

  .svc-hero__title {
    font-size: 24px;
    line-height: 1.4;
  }

  .svc-pill {
    width: 77vw;
    min-height: 97px;
    margin-top: 16vw;
  }

  .svc-pill__title {
    font-size: var(--fs-h3);
  }
}