/* "Contact" page (inc/contact.php, Elementor page content).
   The page reuses compliance.css (.qst-comp*: hero, numbered rows, closing, buttons, eyebrow, title).
   This file adds the hero photo with its location card, the three contact cards (light section) and small page tweaks.
   Colour rules stay weaker than Elementor's own, so a colour picked in Elementor wins. */

/* hero: copy on the left, photo with a location card on the right */
.elementor .e-con.qst-comp-hero.qst-contact-hero { min-height: clamp(34rem, 84vh, 54rem); }
.elementor .e-con.qst-contact-hero > .elementor-widget:not(.qst-comp-hero__crumbs) { max-width: 50%; }
/* the same photo again, stretched across the whole hero and very faded (decoration; file: inc/img/contact-hero.webp).
   Strength = opacity below. ::after because Elementor uses ::before on containers. */
.elementor .e-con.qst-comp-hero.qst-contact-hero { isolation: isolate; }
.elementor .e-con.qst-comp-hero.qst-contact-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("img/contact-hero.webp") center 60% / cover no-repeat;
  filter: grayscale(1) contrast(1.1);
  opacity: 0.16;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  pointer-events: none;
}
.elementor .e-con.qst-comp-hero > .e-con.qst-contact-hero__art {
  position: absolute;
  top: 50%;
  right: clamp(1.5rem, 5vw, 6rem);
  z-index: 0;
  display: block;
  width: min(38vw, 36rem);
  padding: 0;
  transform: translateY(calc(-50% + var(--qm-head, 0px) / 2));
}
.elementor .e-con.qst-contact-hero__art::after {      /* brass hairline frame, offset behind the photo */
  content: "";
  position: absolute;
  inset: 1.1rem -1.1rem -1.1rem 1.1rem;
  z-index: -1;
  border: 1px solid var(--qm-accent);
  border-radius: 14px;
  opacity: 0.55;
}
.qst-contact-hero .qst-contact-hero__img { margin: 0; overflow: hidden; border-radius: 14px; box-shadow: 0 2.5rem 5rem -1.5rem rgba(0,0,0,0.9); }
.qst-contact-hero .qst-contact-hero__img img {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: 50% 62%;   /* keep the building and lawn, trim sky */
  border-radius: 14px;
  transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.elementor .e-con.qst-contact-hero__art:hover .qst-contact-hero__img img { transform: scale(1.04); }
.elementor .e-con.qst-contact-hero__art .e-con.qst-contact-hero__card {
  position: absolute;
  left: clamp(-2.6rem, -2.4vw, -1rem);
  bottom: clamp(1.2rem, 3vw, 2.2rem);
  display: flex;
  flex-direction: column;
  gap: 0;
  width: auto;
  min-width: 13.5rem;
  padding: 1.1rem 1.4rem 1.15rem;
  border: 1px solid rgba(244,244,240,0.16);
  border-radius: 12px;
  background-color: rgba(14,13,11,0.86);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 1.6rem 3rem -1rem rgba(0,0,0,0.8);
}
.qst-contact-hero .qst-contact-hero__card-label .elementor-heading-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.7rem;
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--qm-accent);
}
.qst-contact-hero .qst-contact-hero__card-label .elementor-heading-title::before {   /* "open" dot */
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
  animation: qst-contact-pulse 2.4s ease-out infinite;
}
@keyframes qst-contact-pulse { 0% { box-shadow: 0 0 0 0 rgba(216,180,106,0.6); } 100% { box-shadow: 0 0 0 0.7rem rgba(216,180,106,0); } }
.qst-contact-hero .qst-contact-hero__card-place .elementor-heading-title {
  margin: 0;
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  font-size: 1.9rem;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--qm-ink);
}

/* ways to reach us (light) */
.elementor .e-con.qst-contact {
  --qm-ink: #0a0a0a;
  --qm-dim: rgba(10,10,10,0.7);
  --qm-line: rgba(10,10,10,0.14);
  --qm-accent: #c8102e;
  background-color: #eeefeb;
}
.qst-contact .qst-comp__eyebrow .elementor-heading-title { color: var(--qm-ink); }
.qst-contact .qst-comp__eyebrow .elementor-heading-title::before { background: var(--qm-accent); }
.elementor .e-con.qst-contact__head { display: flex; flex-direction: column; gap: 0; width: 100%; padding: 0 0 clamp(2rem, 5vh, 3.2rem); }
.elementor .e-con.qst-contact__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.8rem, 1.4vw, 1.4rem);
  width: 100%;
  padding: 0;
}
.elementor .e-con.qst-contact__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  padding: clamp(1.5rem, 2.4vw, 2.4rem);
  background-color: #ffffff;
  border: 1px solid rgba(10,10,10,0.12);
  border-radius: 10px;
  overflow: hidden;
  transition: transform .4s cubic-bezier(.2,.7,.2,1), border-color .4s, box-shadow .4s;
}
.elementor .e-con.qst-contact__card::after {         /* red sweep along the top edge on hover, as on the certification cards */
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 3px;
  background: var(--qm-accent);
  transform: scaleX(0.14);
  transform-origin: left;
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.elementor .e-con.qst-contact__card:hover { transform: translateY(-6px); border-color: rgba(10,10,10,0.5); box-shadow: 0 24px 44px -24px rgba(10,10,10,0.35); }
.elementor .e-con.qst-contact__card:hover::after { transform: scaleX(1); }
.elementor .e-con.qst-contact__card .elementor-widget { width: 100%; }
.qst-contact .qst-contact__label .elementor-heading-title {
  margin: 0 0 clamp(1.6rem, 5vh, 3rem);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--qm-accent);
}
.qst-contact .qst-contact__value .elementor-heading-title {
  margin: 0 0 0.9rem;
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  font-size: clamp(1.7rem, 2.5vw, 2.6rem);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  color: var(--qm-ink);
}
.qst-contact .qst-contact__value .elementor-heading-title a { color: inherit; text-decoration: none; transition: color .3s; }
.qst-contact .qst-contact__value .elementor-heading-title a:hover { color: var(--qm-accent); }
.qst-contact .qst-contact__value .elementor-heading-title a:focus-visible { outline: 2px solid var(--qm-accent); outline-offset: 3px; }
.qst-contact .qst-contact__text,
.qst-contact .qst-contact__text p {
  margin: 0;
  font-size: clamp(0.92rem, 1.02vw, 1.02rem);
  line-height: 1.65;
  color: var(--qm-dim);
}
.qst-contact .qst-contact__note,
.qst-contact .qst-contact__note p {
  margin: 0;
  max-width: 46rem;
  font-size: clamp(0.92rem, 1.05vw, 1.05rem);
  line-height: 1.65;
  color: var(--qm-dim);
}
.elementor .e-con.qst-contact .qst-contact__note { margin-top: clamp(1.6rem, 4vh, 2.6rem); padding-top: clamp(1.2rem, 3vh, 1.8rem); border-top: 1px solid var(--qm-line); }

/* closing follows another dark section: a hairline keeps them apart */
.elementor .e-con.qst-contact-cta { border-top: 1px solid var(--qm-line); }
.qst-contact-cta .qst-comp-cta__title .elementor-heading-title { font-size: clamp(2.6rem, 6.4vw, 6.4rem); }

@media (max-width: 1000px) {
  /* the photo leaves the right side and follows the copy */
  .elementor .e-con.qst-comp-hero.qst-contact-hero { min-height: 0; }
  .elementor .e-con.qst-contact-hero > .elementor-widget:not(.qst-comp-hero__crumbs) { max-width: 100%; }
  .elementor .e-con.qst-comp-hero > .e-con.qst-contact-hero__art { position: relative; top: auto; right: auto; order: 9; width: calc(100% - 1.1rem); margin: clamp(2.4rem, 6vh, 3.6rem) 0 1.1rem; transform: none; }
  .qst-contact-hero .qst-contact-hero__img img { aspect-ratio: 16 / 10; }
  .elementor .e-con.qst-contact-hero__art .e-con.qst-contact-hero__card { left: 0.9rem; bottom: 0.9rem; }
}
@media (max-width: 900px) {
  .elementor .e-con.qst-contact__grid { grid-template-columns: 1fr; }
  .qst-contact .qst-contact__label .elementor-heading-title { margin-bottom: 1.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .qst-contact-hero .qst-contact-hero__img img { transition: none; }
  .qst-contact-hero .qst-contact-hero__card-label .elementor-heading-title::before { animation: none; }
  .elementor .e-con.qst-contact__card,
  .elementor .e-con.qst-contact__card::after { transition: none; }
  .elementor .e-con.qst-contact__card:hover { transform: none; }
}