/* ============================================================
 * Project Template — single-entry styles for the `project` CPT.
 * Mirrors the visual structure of /projects/exxonmobil/.
 *
 * All scoped to .locators-project. Mobile breakpoint 981px (Divi).
 * Defensive reveal block gated by html.locators-project-anim-ready.
 * ============================================================ */

/* ------------------------------------------------------------
   Design tokens (override in style.css to match Locators brand exactly)
   ------------------------------------------------------------ */
.locators-project {
  --loc-p-ink: #000000;          /* main headings + body copy */
  --loc-p-ink-soft: #000000;     /* body paragraphs, FAQ answers */
  --loc-p-muted: #6e6e6e;        /* genuinely secondary UI (breadcrumb sep, review meta) */
  --loc-p-border: #e3e3e3;
  --loc-p-surface: #ffffff;
  --loc-p-surface-alt: #f5f5f5;
  --loc-p-dark: #1f2733;             /* hero dark band */
  --loc-p-accent: #77216F;           /* Locators brand purple */
  --loc-p-accent-hover: #5d1857;     /* darker purple for hover */
  --loc-p-accent-soft: #a36b9d;      /* lighter purple (used in gradients) */

  --loc-p-radius-sm: 4px;
  --loc-p-radius: 8px;

  --loc-p-section-pad-y: 80px;
  --loc-p-section-pad-y-mob: 48px;
  --loc-p-container-max: 1400px;
  --loc-p-container-narrow: 980px;

  color: var(--loc-p-ink);
  font-size: 17px;
  line-height: 1.6;
  background: var(--loc-p-surface);
}

.locators-project * { box-sizing: border-box; }
.locators-project img { max-width: 100%; height: auto; }

.locators-project a {
  color: var(--loc-p-accent);
  text-decoration: none;
  transition: color 180ms ease;
}
.locators-project a:hover,
.locators-project a:focus-visible {
  color: var(--loc-p-accent-hover);
  text-decoration: underline;
}

.locators-project .container {
  width: 100%;
  max-width: var(--loc-p-container-max);
  margin: 0 auto;
  padding: 0 32px;
}
.locators-project .container--narrow {
  max-width: var(--loc-p-container-narrow);
}

.locators-project .lp-main > section {
  padding: var(--loc-p-section-pad-y) 0;
}

/* ------------------------------------------------------------
   1. HERO — centered title + breadcrumbs + intro on dark band
   ------------------------------------------------------------ */
.locators-project .lp-hero {
  position: relative;
  isolation: isolate;
  background: var(--loc-p-dark);
  color: #fff;
  padding: 80px 0 60px;
  text-align: center;
  overflow: hidden;
  border-bottom: 10px solid var(--loc-p-accent);   /* purple strip below hero */
}

.locators-project .lp-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.locators-project .lp-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.locators-project .lp-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.6) 100%);
  pointer-events: none;
}
/* Fallback: when no image, deepen the dark band so the title pops */
.locators-project .lp-hero:not(.lp-hero--has-image) {
  background: var(--loc-p-dark);
}

.locators-project .lp-hero-inner {
  position: relative;
  z-index: 1;
}

.locators-project .lp-hero-eyebrow {
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: #fff;
  opacity: 0.85;
  margin: 0 0 14px;
}

.locators-project .lp-hero-title {
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.1;
  font-weight: 700;
  color: #fff;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}

.locators-project .lp-hero-cta-wrap {
  margin: 28px auto 0;
  display: inline-block;
}
.locators-project .lp-hero-cta-button {
  /* Inherits Divi's default button styling (purple bg, white text).
     Hover goes black via Divi base — already the right look. */
  display: inline-block !important;
  width: auto !important;
  max-width: none !important;
}

/* Breadcrumbs */
.locators-project .lp-breadcrumbs {
  margin: 0 0 24px;
}
.locators-project .lp-breadcrumbs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 8px;
  font-size: 14px;
  color: rgba(255,255,255,0.92);
}
.locators-project .lp-bc-item,
.locators-project .lp-bc-current,
.locators-project .lp-bc-sep {
  display: inline-flex;
  align-items: center;
}
.locators-project .lp-bc-link {
  color: #fff;
  text-decoration: none;
}
.locators-project .lp-bc-link:hover,
.locators-project .lp-bc-link:focus-visible {
  text-decoration: underline;
}
.locators-project .lp-bc-current {
  font-style: italic;
  color: rgba(255,255,255,0.85);
}

.locators-project .lp-hero-intro {
  max-width: 1100px;
  margin: 16px auto 0;
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.6;
  color: rgba(255,255,255,0.92);
}

/* ------------------------------------------------------------
   2. WHAT WE PROVIDED — full-width purple band, 2-col row
   ------------------------------------------------------------ */
.locators-project .lp-provided {
  background: var(--loc-p-accent);
  color: #fff;
  padding-top: 30px !important;
  padding-bottom: 30px !important;
  -moz-animation: alternate;
}

/* Override the standard .container max-width so this band's content is wider.
   max() keeps mobile sane (32px minimum side padding). */
.locators-project .lp-provided > .container {
  max-width: 1640px;
  padding: 0 max(32px, 4vw);
}

.locators-project .lp-provided-row {
  display: grid;
  grid-template-columns: 3fr 2fr;     /* more room for items (was 2fr 1fr) */
  gap: 24px 48px;
  align-items: center;
}

.locators-project .lp-provided-heading {
  font-size: clamp(26px, 2.8vw, 34px);
  font-weight: 700;
  color: #fff;
  margin: 0;
  line-height: 1.2;
}

/* PILL LAYOUT — items wrap horizontally as outlined chips. */
.locators-project .lp-provided-right {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;        /* desktop: hug the right edge */
  align-items: center;
  gap: 10px;
  text-align: right;
}

/* Each H2 IS the pill. */
.locators-project .lp-provided-item {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: #fff;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  padding: 10px 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;               /* anchor for the link overlay */
  transition:
    background-color 200ms ease,
    border-color 200ms ease,
    color 200ms ease,
    transform 200ms ease;
}

/* Linked pill — link is inline-flex with an invisible overlay so the
   ENTIRE pill is clickable, not just the text characters. */
.locators-project .lp-provided-item a {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.locators-project .lp-provided-item:has(a) a::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 999px;
}

/* Arrow only on linked pills. Nudges right on hover. */
.locators-project .lp-provided-item a::after {
  content: '→';
  font-size: 0.95em;
  line-height: 1;
  transition: transform 220ms ease;
}

/* Hover (linked pills only): filled white pill with purple text. */
.locators-project .lp-provided-item:has(a):hover,
.locators-project .lp-provided-item:has(a):focus-within {
  background: #fff;
  border-color: #fff;
  color: var(--loc-p-accent);
  transform: translateY(-1px);
}
.locators-project .lp-provided-item:has(a):hover a::after,
.locators-project .lp-provided-item:has(a):focus-within a::after {
  transform: translateX(3px);
}

/* ------------------------------------------------------------
   3. CONTENT — eyebrow + body + button, optional 50/50 with image bleeding to right edge
   ------------------------------------------------------------ */
.locators-project .lp-content {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}

/* Default (no image): standard centred single column. */
.locators-project .lp-content-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}

/* SPLIT mode: full-bleed section. Container drops its max-width so the
   right column can extend to the viewport edge. Left column uses
   `calc((100vw - 1240px) / 2 + 32px)` padding so the text lines up where
   the .container would have started. */
.locators-project .lp-content--split {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.locators-project .lp-content--split > .container {
  max-width: none;
  padding: 0;
}

.locators-project .lp-content--split .lp-content-row {
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
}

.locators-project .lp-content--split .lp-content-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;          /* centre the text content within its column */
  padding: 80px 56px;
}

/* Constrain the text content width and centre it inside the left column */
.locators-project .lp-content--split .lp-content-text > * {
  width: 100%;
  max-width: 800px;
}

.locators-project .lp-content--split .lp-content-image {
  position: relative;
  background: var(--loc-p-surface-alt);
  overflow: hidden;
  min-height: 480px;
  border-radius: 0;
}

.locators-project .lp-content--split .lp-content-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
  aspect-ratio: auto;
}

/* Use the theme's default H2 size + weight. Only set margin and colour. */
.locators-project .lp-content-eyebrow {
  margin: 0 0 24px;
  color: var(--loc-p-ink);
}

.locators-project .lp-content-body {
  font-size: 17px;
  line-height: 1.7;
  color: var(--loc-p-ink-soft);
}
.locators-project .lp-content-body p { margin: 0 0 1em; }
.locators-project .lp-content-body p:last-child { margin-bottom: 0; }
.locators-project .lp-content-body h2,
.locators-project .lp-content-body h3,
.locators-project .lp-content-body h4 {
  color: var(--loc-p-ink);
  font-weight: 700;
  line-height: 1.25;
  margin: 1.6em 0 0.5em;
}
.locators-project .lp-content-body h2 { font-size: 26px; }
.locators-project .lp-content-body h3 { font-size: 22px; }
.locators-project .lp-content-body h4 { font-size: 18px; text-transform: uppercase; letter-spacing: 0.04em; }
.locators-project .lp-content-body ul,
.locators-project .lp-content-body ol { margin: 0 0 1em 1.2em; padding: 0; }
.locators-project .lp-content-body li { margin-bottom: 0.4em; }
.locators-project .lp-content-body a {
  color: var(--loc-p-accent);
  text-decoration: underline;
}

/* Spacing for the Divi button wrapper after the body copy */
.locators-project .lp-content-button-wrap {
  margin-top: 28px;
}

/* ------------------------------------------------------------
   4. MID CTA — full-width purple band
   ------------------------------------------------------------ */
.locators-project .lp-cta {
  background: var(--loc-p-accent);
  color: #fff;
  text-align: center;
  padding: 64px 0 !important;
}

/* Close a 1-2px sub-pixel gap between the previous purple band and the CTA. */
.locators-project .lp-cta.et_pb_bg_layout_dark.is-in {
  margin-top: -2px;
}

.locators-project .lp-cta-heading {
  font-size: clamp(28px, 3.2vw, 38px);
  font-weight: 700;
  color: #fff;
  margin: 0 0 16px;
  line-height: 1.2;
}

.locators-project .lp-cta-text {
  font-size: 17px;
  line-height: 1.65;
  color: rgba(255,255,255,0.95);
  margin: 0 auto;
  max-width: 1080px;
}

/* Spacing for the Divi button wrapper in the CTA. */
.locators-project .lp-cta-button-wrap {
  margin-top: 28px;
}

/* Force the Contact us button to be WHITE bg with PURPLE text by default,
   and BLACK bg with WHITE text on hover — regardless of what the Divi
   `winu8i8ue6` preset would otherwise compute from CSS variables.
   Scoped to .lp-cta so it doesn't touch buttons elsewhere on the page. */
.locators-project .lp-cta .et_pb_button,
.locators-project .lp-cta .preset--module--divi-button--winu8i8ue6 {
  background-color: #ffffff !important;
  color: var(--loc-p-accent) !important;
  border-color: #ffffff !important;
  transition:
    background-color 220ms ease,
    color 220ms ease,
    border-color 220ms ease,
    padding 220ms ease !important;
}

.locators-project .lp-cta .et_pb_button:hover,
.locators-project .lp-cta .et_pb_button:focus-visible,
.locators-project .lp-cta .preset--module--divi-button--winu8i8ue6:hover,
.locators-project .lp-cta .preset--module--divi-button--winu8i8ue6:focus-visible {
  background-color: #000000 !important;
  color: #ffffff !important;
  border-color: #000000 !important;
}

/* ------------------------------------------------------------
   5. GALLERY — full-width edge-to-edge Swiper carousel, square images
   ------------------------------------------------------------ */
.locators-project .lp-gallery.lp-gallery--full {
  padding: 20px 0 !important;
  margin: 0;
  width: 100%;
  background: #fff;
}

.locators-project .lp-gallery-wrap {
  position: relative;
  width: 100%;
}

.locators-project .swiper.lp-swiper {
  width: 100%;
  padding: 0;
  margin: 0;
}

.locators-project .lp-swiper .swiper-slide {
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--loc-p-surface-alt);
  border-radius: 0;           /* squared corners per request */
  overflow: hidden;
  aspect-ratio: 1 / 1;
}

.locators-project .lp-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

.locators-project .lp-swiper .swiper-button-prev,
.locators-project .lp-swiper .swiper-button-next {
  --swiper-navigation-size: 22px;
  --swiper-navigation-color: #fff;
  width: 44px;
  height: 44px;
  background: var(--loc-p-accent);
  border-radius: 50%;
  top: 50%;
  margin-top: -22px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  transition: background 180ms ease, transform 180ms ease;
}
.locators-project .lp-swiper .swiper-button-prev:hover,
.locators-project .lp-swiper .swiper-button-next:hover {
  background: var(--loc-p-accent-hover);
  transform: scale(1.05);
}
.locators-project .lp-swiper .swiper-button-prev::after,
.locators-project .lp-swiper .swiper-button-next::after {
  font-size: 18px;
  font-weight: 700;
}
.locators-project .lp-swiper .swiper-button-prev { left: 8px; }
.locators-project .lp-swiper .swiper-button-next { right: 8px; }

.locators-project .lp-swiper .swiper-pagination-bullet {
  background: var(--loc-p-muted);
  opacity: 0.4;
  width: 10px;
  height: 10px;
  transition: opacity 180ms ease, background 180ms ease, transform 180ms ease;
}
.locators-project .lp-swiper .swiper-pagination-bullet-active {
  background: var(--loc-p-accent);
  opacity: 1;
  transform: scale(1.2);
}

/* ------------------------------------------------------------
   6. FAQs — purple closed / white-with-purple-border open
   ------------------------------------------------------------ */
.locators-project .lp-faqs {
  padding: 80px 0 !important;
  background: #fff;
}

.locators-project .lp-faqs-heading {
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: center;
  color: var(--loc-p-ink);
  margin: 0 0 40px;
  line-height: 1.2;
}

.locators-project .lp-faqs-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* CLOSED state — purple background, white text */
.locators-project .lp-faq {
  background: var(--loc-p-accent);
  border: 2px solid var(--loc-p-accent);
  border-radius: var(--loc-p-radius);
  overflow: hidden;
  transition: background 200ms ease, border-color 200ms ease;
}

.locators-project .lp-faq-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 18px 24px;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  transition: color 200ms ease;
  counter-increment: faq-counter;
}

.locators-project .lp-faq-summary::-webkit-details-marker { display: none; }
.locators-project .lp-faq-summary::marker { content: ''; }

.locators-project .lp-faq-summary:focus-visible {
  outline: 3px solid rgba(255,255,255,0.6);
  outline-offset: -3px;
}

.locators-project .lp-faqs-list { counter-reset: faq-counter; }

.locators-project .lp-faq-question {
  flex: 1 1 auto;
}

.locators-project .lp-faq-question::before {
  content: counter(faq-counter) ". ";
  font-weight: 700;
}

/* Plus / Minus icon — white in closed, purple in open */
.locators-project .lp-faq-icon {
  flex: 0 0 auto;
  position: relative;
  width: 20px;
  height: 20px;
}
.locators-project .lp-faq-icon::before,
.locators-project .lp-faq-icon::after {
  content: '';
  position: absolute;
  background: currentColor;
  transition: transform 220ms ease, opacity 220ms ease;
}
.locators-project .lp-faq-icon::before {
  top: 50%; left: 0; right: 0; height: 2px; transform: translateY(-50%);
}
.locators-project .lp-faq-icon::after {
  left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%);
}
.locators-project .lp-faq[open] .lp-faq-icon::after {
  transform: translateX(-50%) scaleY(0);
}

/* OPEN state — white background, purple border, purple text */
.locators-project .lp-faq[open] {
  background: #fff;
  border-color: var(--loc-p-accent);
}
.locators-project .lp-faq[open] .lp-faq-summary {
  color: var(--loc-p-accent);
}

/* Answer panel — only visible when open */
.locators-project .lp-faq-answer {
  padding: 0 24px 22px;
  color: var(--loc-p-ink);
  font-size: 16px;
  line-height: 1.65;
}
.locators-project .lp-faq-answer p { margin: 0 0 0.8em; }
.locators-project .lp-faq-answer p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------
   7. PRODUCTS USED — woo-style card on a soft grey band
   ------------------------------------------------------------ */
.locators-project .lp-products {
  padding-top: 80px !important;
  padding-bottom: 80px !important;
  background: #FAFAFA;
}

.locators-project .lp-products-heading {
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 700;
  text-align: center;
  color: var(--loc-p-ink);
  margin: 0 0 32px;
  line-height: 1.2;
}

.locators-project .lp-products-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.locators-project .lp-products-grid:has(.lp-product:only-child) {
  grid-template-columns: minmax(260px, 360px);
  justify-content: center;
}

.locators-project .lp-product { margin: 0; }

.locators-project .lp-product-card {
  background: #fff;
  border: 1px solid var(--loc-p-border);
  border-radius: var(--loc-p-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.locators-project .lp-product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.08);
}

.locators-project .lp-product-link {
  display: block;
  color: var(--loc-p-ink);
  text-decoration: none;
}
.locators-project .lp-product-link:hover { text-decoration: none; color: var(--loc-p-ink); }

.locators-project .lp-product-image {
  display: block;
  background: var(--loc-p-surface-alt);
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.locators-project .lp-product-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: 16px;
}

.locators-project .lp-product-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  padding: 20px 20px 24px;       /* breathing room above + below before button */
  text-align: center;
  color: var(--loc-p-ink);
}

/* Product card button — full-bleed slab flush with the bottom of the card.
   The card's overflow:hidden + border-radius gives the button its rounded
   bottom corners. Top corners stay square because they sit against the
   title block above. */
.locators-project .lp-product-button-wrap {
  margin: auto 0 0 !important;   /* push to the very bottom of the card */
  padding: 0;
  width: 100%;
  text-align: center;
}
.locators-project .lp-product-button-wrap .lp-product-button {
  display: block !important;     /* force block over Divi's inline-block default */
  width: 100% !important;        /* fill the card width edge-to-edge */
  max-width: 100% !important;    /* defeat Divi's max-width cap on et_pb_button */
  box-sizing: border-box !important;
  margin: 0 !important;          /* override Divi preset's auto margins */
  padding: 18px 24px !important;
  border-radius: 0 !important;
  text-align: center;
  font-size: 15px;
  letter-spacing: 0.06em;
}

/* ------------------------------------------------------------
   8. MAP EMBED — full width, edge to edge
   ------------------------------------------------------------ */
.locators-project .lp-map.lp-map--full {
  padding: 0 !important;
  margin: 0;
  width: 100%;
}

.locators-project .lp-map-frame {
  display: block;
  width: 100%;
  height: 450px;
  border: 0;
  margin: 0;
  vertical-align: middle;  /* kill the bottom whitespace inline-element iframes get */
}

/* ------------------------------------------------------------
   9. SOCIAL + CONTACT ROW
   ------------------------------------------------------------ */
.locators-project .lp-social {
  padding: 40px 0 !important;
  background: var(--loc-p-surface-alt);
  border-top: 1px solid var(--loc-p-border);
}

.locators-project .lp-social-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px 20px;
}

.locators-project .lp-social-item a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--loc-p-ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  padding: 8px 14px;
  background: #fff;
  border: 1px solid var(--loc-p-border);
  border-radius: 999px;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.locators-project .lp-social-item a:hover,
.locators-project .lp-social-item a:focus-visible {
  background: var(--loc-p-accent);
  border-color: var(--loc-p-accent);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}

.locators-project .lp-social-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex: 0 0 auto;
}
.locators-project .lp-social-facebook  .lp-social-icon { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path fill='%23222' d='M22.675 0H1.325C.593 0 0 .593 0 1.325v21.351C0 23.408.593 24 1.325 24H12.82v-9.294H9.692V11.08h3.128V8.413c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.464.099 2.797.143v3.243l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.31h3.587l-.467 3.625h-3.12V24h6.116c.73 0 1.323-.592 1.323-1.324V1.325C24 .593 23.407 0 22.675 0z'/></svg>"); }
.locators-project .lp-social-linkedin  .lp-social-icon { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23222' d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.049c.476-.9 1.637-1.852 3.37-1.852 3.601 0 4.267 2.369 4.267 5.455v6.288zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.062 2.062 0 112.063 2.065zm1.778 13.019H3.555V9h3.56v11.452z'/></svg>"); }
.locators-project .lp-social-youtube   .lp-social-icon { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23222' d='M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.016 3.016 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.016 3.016 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.546 15.568V8.432L15.818 12l-6.272 3.568z'/></svg>"); }
.locators-project .lp-social-instagram .lp-social-icon { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23222' d='M12 2.163c3.204 0 3.584.012 4.85.07 1.366.062 2.633.336 3.608 1.311.975.975 1.249 2.242 1.311 3.608.058 1.266.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.062 1.366-.336 2.633-1.311 3.608-.975.975-2.242 1.249-3.608 1.311-1.266.058-1.645.069-4.85.069-3.204 0-3.584-.012-4.849-.069-1.366-.062-2.633-.336-3.608-1.311-.975-.975-1.249-2.242-1.311-3.608C2.175 15.647 2.163 15.268 2.163 12s.012-3.584.07-4.849C2.295 5.785 2.569 4.518 3.544 3.543 4.519 2.568 5.786 2.295 7.152 2.232 8.416 2.175 8.796 2.163 12 2.163m0-2.163C8.741 0 8.332.013 7.052.072 5.197.157 3.355.567 2.014 1.908.673 3.249.262 5.092.157 6.947.013 8.332 0 8.741 0 12c0 3.259.013 3.668.072 4.948.085 1.855.495 3.697 1.836 5.038 1.341 1.341 3.183 1.751 5.038 1.836C8.332 23.987 8.741 24 12 24c3.259 0 3.668-.013 4.948-.072 1.855-.085 3.697-.495 5.038-1.836 1.341-1.341 1.751-3.183 1.836-5.038.059-1.28.072-1.689.072-4.948 0-3.259-.013-3.668-.072-4.948-.085-1.855-.495-3.697-1.836-5.038C20.645.567 18.803.157 16.948.072 15.668.013 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zm0 10.162a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z'/></svg>"); }
.locators-project .lp-social-phone     .lp-social-icon { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23222' d='M6.62 10.79a15.05 15.05 0 006.59 6.59l2.2-2.2a1 1 0 011.05-.24c1.16.39 2.41.6 3.7.6a1 1 0 011 1V20a1 1 0 01-1 1A17 17 0 013 4a1 1 0 011-1h3.5a1 1 0 011 1c0 1.29.21 2.54.6 3.7a1 1 0 01-.24 1.05l-2.24 2.04z'/></svg>"); }
.locators-project .lp-social-email     .lp-social-icon { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23222' d='M20 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V6a2 2 0 00-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/></svg>"); }

.locators-project .lp-social-item a:hover .lp-social-icon,
.locators-project .lp-social-item a:focus-visible .lp-social-icon {
  filter: brightness(0) invert(1);
}


/* ------------------------------------------------------------
   STATS — count-up callouts on a light band
   ------------------------------------------------------------ */
.locators-project .lp-stats {
  padding: 64px 0 !important;
  background: #FAFAFA;
}

.locators-project .lp-stats-heading {
  text-align: center;
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 700;
  margin: 0 0 36px;
  color: var(--loc-p-ink);
}

.locators-project .lp-stats-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 32px;
  text-align: center;
}
.locators-project .lp-stats-grid[data-stat-count="2"] { grid-template-columns: repeat(2, 1fr); }
.locators-project .lp-stats-grid[data-stat-count="3"] { grid-template-columns: repeat(3, 1fr); }
.locators-project .lp-stats-grid[data-stat-count="4"] { grid-template-columns: repeat(4, 1fr); }

.locators-project .lp-stat {
  margin: 0;
  padding: 0;
}

.locators-project .lp-stat-value {
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 700;
  color: var(--loc-p-accent);
  line-height: 1;
  margin: 0 0 10px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.locators-project .lp-stat-suffix {
  font-size: 0.7em;
  margin-left: 2px;
}

.locators-project .lp-stat-label {
  font-size: 15px;
  line-height: 1.45;
  color: var(--loc-p-ink);
  margin: 0;
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
}

/* ------------------------------------------------------------
   VIDEO — responsive 16:9 iframe
   ------------------------------------------------------------ */
.locators-project .lp-video {
  padding: 64px 0 !important;
  background: #fff;
}

.locators-project .lp-video-heading {
  text-align: center;
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 700;
  margin: 0 0 28px;
  color: var(--loc-p-ink);
}

.locators-project .lp-video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--loc-p-dark);
  border-radius: var(--loc-p-radius);
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,0.18);
}
.locators-project .lp-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ------------------------------------------------------------
   RELATED PROJECTS — three-card grid
   ------------------------------------------------------------ */
.locators-project .lp-related {
  padding: 80px 0 !important;
  background: #FAFAFA;
}

.locators-project .lp-related-heading {
  text-align: center;
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 700;
  margin: 0 0 40px;
  color: var(--loc-p-ink);
}

.locators-project .lp-related-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.locators-project .lp-related-card { margin: 0; }

.locators-project .lp-related-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--loc-p-border);
  border-radius: var(--loc-p-radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--loc-p-ink);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.locators-project .lp-related-link:hover,
.locators-project .lp-related-link:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.10);
  border-color: var(--loc-p-accent);
  text-decoration: none;
}

.locators-project .lp-related-image {
  display: block;
  background: var(--loc-p-surface-alt);
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.locators-project .lp-related-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.locators-project .lp-related-image--placeholder {
  background: linear-gradient(135deg, var(--loc-p-accent) 0%, var(--loc-p-accent-hover) 100%);
}

.locators-project .lp-related-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 24px 26px;
  flex: 1 1 auto;
}

.locators-project .lp-related-title {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  color: var(--loc-p-ink);
}

.locators-project .lp-related-cta {
  margin-top: auto;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--loc-p-accent);
}

/* ------------------------------------------------------------
   NEXT / PREVIOUS PROJECT NAV
   ------------------------------------------------------------ */
.locators-project .lp-pnav {
  padding: 48px 0 !important;
  background: #fff;
  border-top: 1px solid var(--loc-p-border);
  border-bottom: 1px solid var(--loc-p-border);
}

.locators-project .lp-pnav-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.locators-project .lp-pnav-item {
  margin: 0;
}

.locators-project .lp-pnav-link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px;
  border-radius: var(--loc-p-radius);
  color: var(--loc-p-ink);
  text-decoration: none;
  transition: background 200ms ease;
}
.locators-project .lp-pnav-link:hover,
.locators-project .lp-pnav-link:focus-visible {
  background: var(--loc-p-surface-alt);
  text-decoration: none;
}

.locators-project .lp-pnav-next .lp-pnav-link {
  flex-direction: row-reverse;
  text-align: right;
}

.locators-project .lp-pnav-thumb {
  flex: 0 0 auto;
  display: block;
  width: 72px;
  height: 72px;
  border-radius: var(--loc-p-radius-sm);
  overflow: hidden;
  background: var(--loc-p-surface-alt);
}
.locators-project .lp-pnav-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.locators-project .lp-pnav-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.locators-project .lp-pnav-direction {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--loc-p-accent);
}

.locators-project .lp-pnav-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--loc-p-ink);
}

/* ------------------------------------------------------------
   SCROLL-REVEAL — gated by html.locators-project-anim-ready
   ------------------------------------------------------------ */
html.locators-project-anim-ready .locators-project [data-anim] {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 600ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 70ms);
  will-change: opacity, transform;
}
html.locators-project-anim-ready .locators-project [data-anim].is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html.locators-project-anim-ready .locators-project [data-anim],
  html.locators-project-anim-ready .locators-project [data-anim].is-in {
    opacity: 1; transform: none; transition: none;
  }
}

/* ============================================================
 * MOBILE  ≤ 981px  (Divi breakpoint)
 * ============================================================ */
@media (max-width: 981px) {
  .locators-project { font-size: 16px; }
  .locators-project .container { padding: 0 20px; }

  /* Center-align ALL text content on mobile. */
  .locators-project,
  .locators-project p,
  .locators-project h1,
  .locators-project h2,
  .locators-project h3,
  .locators-project h4,
  .locators-project h5,
  .locators-project h6,
  .locators-project li,
  .locators-project blockquote,
  .locators-project .lp-content-body,
  .locators-project .lp-content-body *,
  .locators-project .lp-faq-answer,
  .locators-project .lp-faq-answer * {
    text-align: center;
  }

  /* Centre list bullets too (no left-indent jutting out) */
  .locators-project .lp-content-body ul,
  .locators-project .lp-content-body ol {
    list-style-position: inside;
    margin-left: 0;
    padding-left: 0;
  }

  /* Center the text content inside the 50/50 column */
  .locators-project .lp-content--split .lp-content-text {
    align-items: center;
  }

  .locators-project .lp-main > section {
    padding: var(--loc-p-section-pad-y-mob) 0;
  }

  /* Hero */
  .locators-project .lp-hero {
    padding: 56px 0 44px;
  }

  /* What We Provided — stack the columns, centre the pills */
  .locators-project .lp-provided-row {
    grid-template-columns: 1fr;
    gap: 18px;
    text-align: center;
  }
  .locators-project .lp-provided-right {
    justify-content: center;        /* centre pills under the heading */
    gap: 8px;
  }
  .locators-project .lp-provided-item {
    font-size: 13px;
    padding: 9px 16px;
  }

  /* Overview 50/50 — stack to single column on mobile. Text gets normal
     padding, image becomes a 16:10 hero-strip flush to the edges. */
  .locators-project .lp-content--split .lp-content-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .locators-project .lp-content--split .lp-content-text {
    padding: 48px 20px;
  }
  .locators-project .lp-content--split .lp-content-image {
    min-height: auto;
    aspect-ratio: 16 / 10;
  }

  /* Map — keep full width but reduce height */
  .locators-project .lp-map-frame {
    height: 360px;
  }

  /* Gallery carousel — smaller arrow buttons */
  .locators-project .lp-swiper .swiper-button-prev,
  .locators-project .lp-swiper .swiper-button-next {
    width: 36px;
    height: 36px;
    --swiper-navigation-size: 16px;
  }

  /* FAQs */
  .locators-project .lp-faq-summary {
    font-size: 16px;
    padding: 16px 4px;
  }

  /* Products — 2 cols, then 1 */
  .locators-project .lp-products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  /* Stats — 2 cols on tablet, 1 on phone */
  .locators-project .lp-stats-grid,
  .locators-project .lp-stats-grid[data-stat-count="3"],
  .locators-project .lp-stats-grid[data-stat-count="4"] {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  /* Related projects — stack to one column */
  .locators-project .lp-related-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Next/Prev — stack the two cards */
  .locators-project .lp-pnav-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .locators-project .lp-pnav-next .lp-pnav-link {
    flex-direction: row;
    text-align: left;
  }
  .locators-project .lp-pnav-thumb {
    width: 56px;
    height: 56px;
  }

  /* Social row — compact */
  .locators-project .lp-social-list { gap: 10px 12px; }
  .locators-project .lp-social-item a {
    padding: 7px 12px;
    font-size: 13px;
  }
}

@media (max-width: 540px) {
  /* Stats — 1 col on small phones */
  .locators-project .lp-stats-grid,
  .locators-project .lp-stats-grid[data-stat-count="2"],
  .locators-project .lp-stats-grid[data-stat-count="3"],
  .locators-project .lp-stats-grid[data-stat-count="4"] {
    grid-template-columns: 1fr;
  }

  .locators-project .lp-products-grid { grid-template-columns: 1fr; }

  /* Hide social text labels on tiny screens — keep icons only */
  .locators-project .lp-social-item a {
    padding: 10px;
    width: 44px;
    height: 44px;
    justify-content: center;
  }
  .locators-project .lp-social-label {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .locators-project .lp-social-phone .lp-social-label,
  .locators-project .lp-social-email .lp-social-label { display: none; }
}