/* ═══════════════════════════════════════════════════════
   Service closing fields and distinct About / Projects invitations.
   Full-bleed band with copy left and the original botanical stipple art.
   Load before responsive-type.css and design-polish.css.
   ═══════════════════════════════════════════════════════ */
.svc-cta {
  --cta-accent: var(--fc-deep, var(--forest, #547e50));
  --cta-tint: var(--fc-bar, #ddf4b0);
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100svh; /* the small viewport: one screen even with the phone's toolbars showing */
  display: flex;
  align-items: center;
  background: var(--cream, #efefeb);
  color: var(--charcoal, #0f172a);
  padding: clamp(4rem, 9vw, 7rem) 0;
}

.svc-cta__inner {
  position: static; /* the artwork anchors to the full-height section, not the copy */
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem;
}

.svc-cta__copy {
  position: relative;
  z-index: 1;
  max-width: 600px;
}

@media (min-width: 1024px) {
  .svc-cta__copy {
    max-width: min(600px, 52%);
  }
}

.svc-cta h2 {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: clamp(2.1rem, 4.4vw, 3.7rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--charcoal, #0f172a);
  max-width: 14ch;
  margin: 0 0 1.1rem;
}

.svc-cta h2 em {
  font-style: italic;
  color: var(--cta-accent);
}

.svc-cta p {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  line-height: 1.6;
  color: #4a4a4a;
  max-width: 40ch;
  margin: 0 0 2rem;
}

.svc-cta__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.svc-cta__btn,
.svc-cta__phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 52px;
  padding: 0 1.6rem;
  border-radius: 999px;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.svc-cta__btn {
  background: var(--cta-accent);
  color: #fff;
}

.svc-cta__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--cta-accent) 35%, transparent);
}

.svc-cta__btn svg {
  transition: transform 0.25s ease;
}

.svc-cta__btn:hover svg {
  transform: translateX(3px);
}

.svc-cta__phone {
  color: var(--cta-accent);
  border: 1.5px solid color-mix(in srgb, var(--cta-accent) 60%, transparent);
  background: transparent;
}

.svc-cta__phone:hover {
  border-color: var(--cta-accent);
  background: var(--cta-tint);
}

/* Phones: copy sits in the upper part of the screen, leaving the lower right
   corner to the art; buttons stack full width */
@media (max-width: 768px) {
  .svc-cta {
    align-items: flex-start;
    padding-top: clamp(6rem, 18svh, 9rem);
  }

  .svc-cta__copy {
    max-width: 100%;
    padding-right: 6%;
  }

  .svc-cta h2 {
    font-size: clamp(2.2rem, 10vw, 2.9rem);
  }

  .svc-cta p {
    max-width: 34ch;
  }

  .svc-cta__actions {
    flex-direction: column;
    align-items: stretch;
    max-width: 320px;
  }
}


/* Stipple subject per service: images/cta-<page>.svg used as a mask and painted
   in the page accent (--fc-deep), so one asset works with every colour.  The
   dabs' varied alpha survives the mask, which keeps the sponge texture. */
.svc-cta__art {
  position: absolute;
  right: 0;
  bottom: -4%;
  height: clamp(300px, 70%, 560px);
  width: 46%;
  background: var(--cta-accent);
  -webkit-mask: var(--svc-art) no-repeat right bottom / contain;
  mask: var(--svc-art) no-repeat right bottom / contain;
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
}

/* Sprinklers: a second head mirrored on the left with the copy centred
   between them. Only from 1024px up — below that the two heads squeeze the
   copy, so the page falls back to one head and left-aligned copy. */
.svc-cta__art--left {
  display: none;
}

@media (min-width: 1024px) {
  .svc-cta__art--left {
    display: block;
    right: auto;
    left: 0;
    transform: scaleX(-1);
  }

  .svc-cta--twin .svc-cta__art {
    max-width: 34%;
  }

  .svc-cta--twin .svc-cta__copy {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .svc-cta--twin h2,
  .svc-cta--twin p {
    margin-left: auto;
    margin-right: auto;
  }

  .svc-cta--twin .svc-cta__actions {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .svc-cta__art {
    right: -4%;
    bottom: -3%;
    height: clamp(230px, 42%, 360px);
    width: 72%;
    opacity: 0.5;
  }
}


@media (prefers-reduced-motion: reduce) {
  .svc-cta__btn,
  .svc-cta__btn svg {
    transition: none;
  }
}

/* About closes as an open letter: a masthead, personal note and reply line.
   Projects closes as a portfolio spread: dark field, real work and an invitation.
   Their layout and identity stay independent of the service-page art fields. */
.about-invitation,
.project-invitation {
  padding-block: clamp(5rem, 9vw, 9rem);
  font-family: var(--font-ui, 'Helvetica Now Display', Arial, sans-serif);
}
.about-invitation__inner,
.project-invitation__inner {
  width: min(var(--shell-max, 1320px), calc(100% - 2 * var(--shell-gutter, 1.5rem)));
  margin-inline: auto;
}
.about-invitation { background: #efefeb; color: #263c2a; }
.about-invitation__masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid #bfc8ba;
}
.about-invitation__from,
.about-invitation__signature {
  font: 300 .8rem/1.5 var(--font-label, 'PP Supply Mono', monospace);
}
.about-invitation__from { text-transform: uppercase; letter-spacing: .025em; }
.about-invitation__letter {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(2rem, 7vw, 8rem);
  align-items: end;
  padding-block: clamp(2.5rem, 5vw, 5rem);
}
.about-invitation h2,
.project-invitation h2 {
  margin: 0;
  color: inherit;
  font-family: inherit;
  font-size: clamp(2.35rem, 4.6vw, 4.75rem);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1.03;
  text-wrap: balance;
}
.about-invitation h2 { max-width: 15ch; }
.about-invitation h2 em { font-style: normal; color: #547e50; }
.about-invitation__message p,
.project-invitation__contact p {
  font-size: var(--type-copy, 1.125rem);
  line-height: 1.6;
  max-width: 38ch;
  margin: 0 0 2rem;
}
.about-invitation__signature { display: block; padding-top: 1.5rem; border-top: 1px solid #bfc8ba; }
.about-invitation__reply {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(2rem, 7vw, 8rem);
  align-items: center;
  padding: 1.5rem 0;
  border-block: 1px solid #bfc8ba;
}
.about-invitation__action,
.project-invitation__action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 70px;
  padding: 1rem 1.5rem;
  border-radius: 6px;
  font-size: clamp(1.1rem, 1.7vw, 1.5rem);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: background .2s ease;
}
.about-invitation__action { background: #3a5937; color: #fff; }
.about-invitation__action:hover { background: #263c2a; }
.about-invitation__phone { display: grid; gap: .25rem; width: fit-content; text-decoration: none; color: inherit; padding-block: .5rem; }
.about-invitation__phone span { font-size: .875rem; }
.about-invitation__phone strong { font-size: 1.25rem; font-weight: 500; }
.project-invitation { background: #263c2a; color: #f4f4ec; --section-tag-ink: #d8e6c8; }
.project-invitation__inner { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 3rem); }
.project-invitation__heading { grid-column: 1 / -1; padding-bottom: 1.5rem; border-bottom: 1px solid #71826c; }
.project-invitation__heading > .section-eyebrow { align-self: start; }
.project-invitation h2 { max-width: 14ch; }
.project-invitation h2 em { display: block; color: #c4d9ac; font-style: normal; }
.project-invitation__photo { margin: 0; min-width: 0; align-self: start; }
.project-invitation__photo img { display: block; width: 100%; height: clamp(270px, 28vw, 410px); object-fit: cover; border-radius: 8px; }
.project-invitation__photo figcaption { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; font: 300 .8rem/1.4 var(--font-label, 'PP Supply Mono', monospace); color: #d8e6c8; }
.project-invitation__contact { align-self: center; }
.project-invitation__contact h2 { margin-bottom: 1.25rem; }
.project-invitation__contact p { color: #e0e6dc; }
.project-invitation__action { background: #d8e6c8; color: #263c2a; }
.project-invitation__action:hover { background: #f4f4ec; }
.project-invitation__phone { display: inline-block; padding-block: 1rem .25rem; color: #e0e6dc; font-size: .95rem; text-underline-offset: .25em; }
.about-invitation a:focus-visible,
.project-invitation a:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
@media (max-width: 767px) {
  .about-invitation__masthead { align-items: flex-start; flex-direction: column; gap: 1rem; }
  .about-invitation__letter,
  .about-invitation__reply,
  .project-invitation__inner,
  .project-invitation__heading { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .about-invitation__letter { padding-block: 2.5rem; }
  .about-invitation h2,
  .project-invitation h2 { font-size: clamp(2.2rem, 8.5vw, 4rem); }
  .about-invitation__message p { max-width: 40ch; margin-bottom: 1.5rem; }
  .about-invitation__reply { gap: 1rem; }
  .about-invitation__phone { padding-block: .75rem; }
  .project-invitation__heading { gap: 2.5rem; padding-bottom: 2rem; }
  .project-invitation__photo img { height: auto; aspect-ratio: 4 / 3; }
  .project-invitation__contact { padding-bottom: 0; }
  .project-invitation__contact p { margin-bottom: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .about-invitation__action,
  .project-invitation__action { transition: none; }
}

/* The desktop portfolio invitation occupies one calm screen; the heading
   belongs with its consultation copy beneath the full-width divider. */
@media (min-width:768px){
 .project-invitation{min-height:100svh;display:flex;align-items:center;padding-block:clamp(3rem,6svh,5rem)}
 .project-invitation__photo img{height:clamp(220px,min(28vw,calc(100svh - 280px)),410px)}
}