/* ---------------------------------------------------------------------------
   Contact page. Scoped under .wpg-contact / .wpg-slider.
   --------------------------------------------------------------------------- */

.wpg-contact {
  --wpg-gold: #8B7539;
  --wpg-gold-lift: #B8963F;
  --wpg-sky: #A3C4D9;
  --wpg-ink: #1F1D18;
  --wpg-muted: #6B6558;
  --wpg-rule: #E2DED4;
  --wpg-surface: #FBFAF7;

  margin: 2.5rem 0 0;
  padding-bottom: 3rem;
}

.wpg-contact__heading {
  font-size: 1.5rem;
  letter-spacing: .02em;
  color: var(--wpg-ink);
  margin: 0 0 1.25rem;
  text-align: center;
}

/* ---- quick-contact cards ---- */

.wpg-contact__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 0 0 2.5rem;
}

.wpg-contact__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  padding: 1.75rem 1rem;
  border: 1px solid var(--wpg-rule);
  border-radius: 4px;
  text-align: center;
  background: var(--wpg-surface);
}

.wpg-contact__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: .5rem;
  border-radius: 50%;
  border: 1px solid var(--wpg-gold);
  color: var(--wpg-gold);
}

.wpg-contact__big {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--wpg-ink);
  text-decoration: none;
}
a.wpg-contact__big:hover,
a.wpg-contact__big:focus-visible { color: var(--wpg-gold); }

.wpg-contact__sub {
  font-size: .85rem;
  color: var(--wpg-muted);
}

/* ---- slideshow ---- */

.wpg-slider {
  position: relative;
  margin: 0 0 2.75rem;
  border-radius: 4px;
  overflow: hidden;
  background: var(--wpg-surface);
}

.wpg-slider__track {
  position: relative;
  /* 12:5, matching the original 1200x500 image block. */
  aspect-ratio: 12 / 5;
}

.wpg-slider__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity .8s ease;
}
.wpg-slider__slide.is-active { opacity: 1; }

.wpg-slider__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wpg-slider__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.wpg-slider__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .25);
  cursor: pointer;
  transition: background-color .2s ease;
}
.wpg-slider__dot.is-active { background: var(--wpg-gold-lift); }
.wpg-slider__dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.wpg-slider__toggle {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .5);
  cursor: pointer;
}
.wpg-slider__toggle::before {
  content: "";
  display: block;
  margin: 0 auto;
  /* pause bars */
  width: 8px;
  height: 10px;
  border-left: 3px solid #fff;
  border-right: 3px solid #fff;
}
.wpg-slider__toggle[data-state="paused"]::before {
  /* play triangle */
  width: 0;
  height: 0;
  border-left: 10px solid #fff;
  border-right: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}
.wpg-slider__toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---- office map ---- */

.wpg-contact__map-section { margin: 0 0 3rem; }

.wpg-contact__map-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.wpg-contact__offices {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.wpg-office-block {
  padding: 1.25rem;
  border: 1px solid var(--wpg-rule);
  border-left: 3px solid var(--wpg-gold);
  border-radius: 3px;
  background: var(--wpg-surface);
}

.wpg-office-block__label {
  margin: 0 0 .4rem;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--wpg-gold);
}

.wpg-office-block__addr {
  margin: 0 0 .35rem;
  color: var(--wpg-ink);
  line-height: 1.6;
}

.wpg-office-block__phone {
  color: var(--wpg-muted);
  text-decoration: none;
}
.wpg-office-block__phone:hover { color: var(--wpg-gold); }

.wpg-office-block__pill {
  display: inline-block;
  margin-top: .7rem;
  padding: .35rem .85rem;
  border-radius: 100px;
  background: var(--wpg-gold-lift);
  color: #1A1A1A;
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
}

.wpg-contact__map {
  width: 100%;
  height: 340px;
  border: 1px solid var(--wpg-rule);
  border-radius: 3px;
  background: var(--wpg-surface);
}

/* shared pin + popup styles (mirror the portfolio) */
.wpg-pin { background: none; border: 0; }
.wpg-popup__name { margin: 0 0 .15rem; font-weight: 600; font-size: .95rem; color: var(--wpg-ink); }
.wpg-popup__addr { margin: 0; font-size: .82rem; color: var(--wpg-muted); line-height: 1.4; }
.wpg-contact .leaflet-popup-content-wrapper { border-radius: 3px; }

/* ---- form ---- */

.wpg-contact__form-section { margin: 0 0 3rem; max-width: 46rem; margin-left: auto; margin-right: auto; }
.wpg-contact__form-intro { text-align: center; color: var(--wpg-muted); margin: 0 0 1.5rem; }

/* ---- FAQ ---- */

.wpg-faq { max-width: 46rem; margin: 0 auto; }

.wpg-faq__list { margin: 0; }

.wpg-faq__item {
  padding: 1.25rem 0;
  border-top: 1px solid var(--wpg-rule);
}
.wpg-faq__item:last-child { border-bottom: 1px solid var(--wpg-rule); }

.wpg-faq__q {
  margin: 0 0 .5rem;
  font-weight: 600;
  color: var(--wpg-ink);
  font-size: 1.05rem;
}

.wpg-faq__a {
  margin: 0;
  color: var(--wpg-muted);
  line-height: 1.7;
}
.wpg-faq__a a { color: var(--wpg-gold); }
.wpg-faq__a p { margin: 0 0 .6rem; }
.wpg-faq__a p:last-child { margin-bottom: 0; }

/* ---- desktop ---- */

@media (min-width: 768px) {
  .wpg-contact__cards { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
}

@media (min-width: 901px) {
  .wpg-contact__map-layout {
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
  }
  .wpg-contact__map { height: 420px; }
}

@media (prefers-reduced-motion: reduce) {
  .wpg-slider__slide { transition: none; }
}

/* ---------------------------------------------------------------------------
   Contact hero — replaces Bridge's generic stock-photo title band with a
   branded band: a warm gold-to-ink gradient, a faint site-plan line motif
   (echoing the maps used across the site), and the sky-blue accent from the
   logo. Self-contained; makes no image request.
   --------------------------------------------------------------------------- */

.wpg-hero {
  --wpg-gold: #8B7539;
  --wpg-gold-lift: #B8963F;
  --wpg-sky: #A3C4D9;

  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(115% 130% at 88% 12%, rgba(184, 150, 63, .34), transparent 56%),
    linear-gradient(135deg, #201D17 0%, #2E2819 55%, #4A3E22 100%);
}

/* Site-plan motif, anchored to the right where the gold glow sits. */
.wpg-hero__motif {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(620px, 58%);
  pointer-events: none;
  z-index: 0;
}
.wpg-hero__motif svg { width: 100%; height: 100%; display: block; }
.wpg-hero__streets { opacity: .16; }
.wpg-hero__parcels { opacity: .20; }

.wpg-hero__inner {
  position: relative;
  z-index: 1;
  /* Mirror .container_inner exactly so the headline lines up with the content
     below at every width. */
  width: 1350px;
  max-width: calc(100% - 80px);
  margin: 0 auto;
  /* Desktop header is fixed (~136px); reserve room so the headline clears it. */
  padding: 176px 0 84px;
}

.wpg-hero__accent {
  display: block;
  width: 44px;
  height: 3px;
  margin: 0 0 1.15rem;
  background: var(--wpg-sky);
  border-radius: 2px;
}

.wpg-hero__eyebrow {
  margin: 0 0 .7rem;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #D9BE7E;   /* light gold — legible on the dark band */
}

.wpg-hero__title {
  margin: 0;
  color: #FBFAF7;
  font-size: clamp(2.3rem, 5vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: .01em;
  text-transform: uppercase;
}

.wpg-hero__tagline {
  margin: .9rem 0 0;
  max-width: 36ch;
  color: rgba(251, 250, 247, .82);
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  line-height: 1.5;
}

/* Right-hand heritage / positioning panel — balances the composition and fills
   the width. A sky-blue rule ties it to the logo accent. */
.wpg-hero__aside {
  border-left: 2px solid rgba(163, 196, 217, .38);
  padding-left: clamp(1.25rem, 2vw, 2rem);
}
.wpg-hero__aside-badge {
  margin: 0 0 .8rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #D9BE7E;
}
.wpg-hero__aside-text {
  margin: 0;
  max-width: 34ch;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.6;
  color: rgba(251, 250, 247, .8);
}

/* Two columns once there's room; stacked below. */
@media (min-width: 880px) {
  .wpg-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .82fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
  }
}
@media (max-width: 879px) {
  .wpg-hero__aside { margin-top: 1.7rem; }
}

/* Mobile header is in normal flow, so the band needs far less top room. */
@media (max-width: 1000px) {
  .wpg-hero__inner { padding-top: 52px; padding-bottom: 56px; }
  .wpg-hero__motif { width: 78%; }
  .wpg-hero__streets { opacity: .12; }
  .wpg-hero__parcels { opacity: .15; }
}

/* One orchestrated load moment: the accent draws, the lines rise in sequence. */
.wpg-hero__accent { animation: wpg-hero-bar .6s ease .05s both; }
.wpg-hero__eyebrow,
.wpg-hero__title,
.wpg-hero__tagline,
.wpg-hero__aside { animation: wpg-hero-in .6s ease both; }
.wpg-hero__title   { animation-delay: .08s; }
.wpg-hero__tagline { animation-delay: .16s; }
.wpg-hero__aside   { animation-delay: .24s; }

@keyframes wpg-hero-in  { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes wpg-hero-bar { from { width: 0; } to { width: 44px; } }

@media (prefers-reduced-motion: reduce) {
  .wpg-hero__accent,
  .wpg-hero__eyebrow,
  .wpg-hero__title,
  .wpg-hero__tagline,
  .wpg-hero__aside { animation: none; }
}