/* =============================================================
   Section: Closing CTA
   Maps to: template-parts/sections/section-closing-cta.php
   ============================================================= */

.closing {
  background: var(--ink);
  color: var(--bone);
  position: relative;
  overflow: hidden;
  padding-block: clamp(4rem, 8vw, 7rem);
  isolation: isolate;
}

/* Full-bleed photo background. Heavy dark gradient overlay so the
   semi-circle SVG accent and oversized headline still dominate. */
.closing__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.closing__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
  filter: grayscale(0.5) contrast(1.05) brightness(0.55);
}

.closing::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg,
      rgba(11,11,12,0.85) 0%,
      rgba(11,11,12,0.78) 60%,
      rgba(11,11,12,0.95) 100%),
    url("../../img/textures/grain.svg");
  background-size: auto, 320px 320px;
  background-blend-mode: normal, overlay;
  pointer-events: none;
}

/* Off-axis semi-circle accent behind the type */
.closing__deco {
  position: absolute;
  left: 55%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(560px, 70vw, 1100px);
  height: clamp(560px, 70vw, 1100px);
  color: var(--safety);
  pointer-events: none;
  opacity: 0.85;
}

.closing__deco--small {
  position: absolute;
  right: -8vw;
  bottom: -10vw;
  width: 32vw;
  height: 32vw;
  color: var(--dirt);
  opacity: 0.5;
  pointer-events: none;
}

/* "GET ACTIVE" oversized brand watermark — sits behind the headline,
   bleeds off the bottom-right edge. Pure decoration, aria-hidden. */
.closing__ghost {
  position: absolute;
  right: -0.04em;
  bottom: -0.18em;
  z-index: 0;
  font-family: var(--font-display, "Anton", Impact, sans-serif);
  font-size: clamp(7rem, 22vw, 22rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 0.85;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--bone);
  opacity: 0.06;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.closing__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
}

@media (min-width: 980px) {
  .closing__inner {
    grid-template-columns: 1.5fr 1fr;
    gap: var(--s-9);
    align-items: end;
  }
}

.closing__title {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: 0.88;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.closing__title .accent { color: var(--safety); }

.closing__title .stroke {
  -webkit-text-stroke: 1.5px var(--bone);
  color: transparent;
}

.closing__copy {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.5;
  color: var(--muted-dark);
  max-width: 44ch;
  margin-bottom: var(--s-6);
}

.closing__cta-row {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.closing__contact {
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule-dark);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-dark);
}

.closing__contact a {
  color: var(--bone);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.closing__contact a:hover { color: var(--safety); border-bottom-color: var(--safety); }

/* Two-column address block inside .closing__contact */
.closing__addresses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule-dark);
}

@media (max-width: 600px) {
  .closing__addresses { grid-template-columns: 1fr; }
}

.closing__address-label {
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  color: var(--safety);
  margin-bottom: var(--s-2);
}

.closing__address-lines {
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--bone);
  text-transform: none;
  letter-spacing: 0.04em;
}

.closing__directions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--s-3);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  color: var(--safety);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.closing__directions:hover { border-bottom-color: var(--safety); }

/* Standalone page variant — extra top padding for the fixed header */
.closing--page {
  padding-top: calc(var(--header-h, 80px) + clamp(3rem, 6vw, 5rem));
  min-height: 100svh;
}

@media (min-width: 980px) {
  .closing--page .closing__inner {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

/* ---- Contact form ---- */
.contact-form {
  background: rgba(244, 241, 234, 0.06);
  border: 1px solid var(--rule-dark);
  padding: var(--s-6);
  border-radius: 2px;
}

.contact-form__title {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--safety);
  margin-bottom: var(--s-5);
}

.contact-form__form {
  display: grid;
  gap: var(--s-4);
}

.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}

@media (max-width: 600px) {
  .contact-form__row { grid-template-columns: 1fr; }
}

.contact-form__field {
  display: grid;
  gap: 6px;
}

.contact-form__field label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-dark);
}

.contact-form__field label abbr {
  text-decoration: none;
  color: var(--safety);
}

.contact-form__field input,
.contact-form__field select,
.contact-form__field textarea {
  color-scheme: dark;
  background: rgba(244, 241, 234, 0.08);
  border: 1px solid var(--rule-dark);
  color: var(--bone);
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  border-radius: 2px;
  transition: border-color var(--dur-fast, 180ms) ease;
}

.contact-form__field select option {
  background: var(--ink-2);
  color: var(--bone);
}

.contact-form__field input:focus,
.contact-form__field select:focus,
.contact-form__field textarea:focus {
  outline: none;
  border-color: var(--safety);
}

.contact-form__field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23F4F1EA' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

.contact-form__field textarea {
  resize: vertical;
  min-height: 100px;
}

.contact-form .btn {
  justify-self: start;
  margin-top: var(--s-3);
}

/* ---- CF7 integration overrides ---- */
.contact-form .wpcf7 {
  width: 100%;
}

.contact-form .wpcf7-form {
  display: grid;
  gap: var(--s-4);
}

.contact-form .wpcf7-form-control-wrap {
  display: block;
}

.contact-form .wpcf7-form-control:not(.wpcf7-submit) {
  width: 100%;
  box-sizing: border-box;
  color-scheme: dark;
  background: rgba(244, 241, 234, 0.08);
  border: 1px solid var(--rule-dark);
  color: var(--bone);
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  border-radius: 2px;
  transition: border-color var(--dur-fast, 180ms) ease;
}

.contact-form .wpcf7-form-control:not(.wpcf7-submit):focus {
  outline: none;
  border-color: var(--safety);
}

.contact-form .wpcf7-form-control.wpcf7-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23F4F1EA' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

.contact-form .wpcf7-form-control.wpcf7-select option {
  background: var(--ink-2);
  color: var(--bone);
}

.contact-form .wpcf7-form-control.wpcf7-textarea {
  resize: vertical;
  min-height: 100px;
}

.contact-form .wpcf7-not-valid {
  border-color: var(--safety) !important;
}

.contact-form .wpcf7-not-valid-tip {
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--safety);
}

.contact-form .wpcf7-response-output {
  margin: var(--s-4) 0 0;
  padding: 10px 14px;
  border: 1px solid var(--rule-dark);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.contact-form .wpcf7-form.sent .wpcf7-response-output {
  border-color: #5cb85c;
  color: #5cb85c;
}

.contact-form .wpcf7-form.invalid .wpcf7-response-output,
.contact-form .wpcf7-form.unaccepted .wpcf7-response-output,
.contact-form .wpcf7-form.failed .wpcf7-response-output {
  border-color: var(--safety);
  color: var(--safety);
}

.contact-form .wpcf7-spinner {
  display: block;
  margin: var(--s-3) auto 0;
}

.contact-form .wpcf7-form .wpcf7-submit {
  justify-self: start;
}