/* ============================================================
   Location pages — /locations/*-seo-agency/

   Visual + motion layer for the 118 city pages. Markup hooks
   (loc-* classes, image slots) are added by
   admin-server/scripts/enhance-locations.js; motion is driven by
   /locations/location-enhance.js. Page copy is untouched.

   Same monochrome system as the homepage: ink, white, greys.
   Everything is scoped under body.loc-page.

   0. Tokens & keyframes     5. FAQ
   1. Hero                   6. Closing CTA
   2. Long-form intro        7. "Read more" content
   3. Services               8. Scroll reveals
   4. Why choose us          9. Responsive / reduced motion
   ============================================================ */

/* ---------------- 0. Tokens & keyframes ---------------- */

.loc-page {
  --lp-ink: #0a0a0b;
  --lp-ink-2: #131316;
  --lp-ink-3: #1d1d21;
  --lp-bg: #f4f4f5;
  --lp-surface: #ffffff;
  --lp-text: #0f0f11;
  --lp-mid: #3a3b42;
  --lp-soft: #5c5d65;
  --lp-line: rgba(17, 17, 17, 0.1);
  --lp-line-2: rgba(17, 17, 17, 0.22);
  --lp-on-dark: #f4f4f5;
  --lp-on-dark-mid: #c9c9d0;
  --lp-on-dark-soft: #9d9da6;
  --lp-line-dark: rgba(255, 255, 255, 0.12);

  --lp-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --lp-ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  --lp-r-sm: 0.75rem;
  --lp-r: 1.125rem;
  --lp-r-lg: 1.5rem;
  --lp-wrap: 76rem;
  --lp-gutter: clamp(1rem, 4vw, 2rem);
  --lp-section: clamp(4.5rem, 3rem + 5vw, 7.5rem);

  --lp-grid-dark: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  --lp-grid-light: linear-gradient(rgba(17, 17, 17, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 17, 17, 0.045) 1px, transparent 1px);
  --lp-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

@keyframes lpUp {
  from { opacity: 0; transform: translate3d(0, 22px, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes lpRise {
  from { opacity: 0; transform: translate3d(0, 0.3em, 0); filter: blur(10px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes lpKen {
  from { opacity: 0; transform: scale(1.14); }
  15% { opacity: 1; }
  to { opacity: 1; transform: scale(1.03); }
}
@keyframes lpDrift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-3rem, 2rem, 0) scale(1.08); }
}
@keyframes lpDraw { to { stroke-dashoffset: 0; } }
@keyframes lpCardIn {
  from { opacity: 0; transform: translate3d(0, 32px, 0) rotate(1.5deg) scale(0.97); }
  to { opacity: 1; transform: none; }
}
@keyframes lpFloat {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -7px, 0); }
}
@keyframes lpBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes lpRing {
  from { transform: scale(1); opacity: 0.55; }
  to { transform: scale(2); opacity: 0; }
}
@keyframes lpScroll {
  0% { opacity: 0; transform: translate3d(0, -2px, 0); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(0, 0.8rem, 0); }
}
@keyframes lpBeam {
  0% { transform: translate3d(0, 0, 0) rotate(18deg); }
  60%, 100% { transform: translate3d(520%, 0, 0) rotate(18deg); }
}
@keyframes lpFade {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to { opacity: 1; transform: none; }
}

/* ---------------- 1. Hero ---------------- */

.loc-page .loc-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: clamp(36rem, calc(100svh - 6.5rem), 52rem);
  padding: clamp(4.5rem, 9vh, 7rem) 0 clamp(6rem, 11vh, 8rem);
  background: var(--lp-ink);
  color: var(--lp-on-dark);
}

.loc-hero-bg {
  position: absolute;
  inset: -3rem 0 -1rem;
  z-index: -1;
  pointer-events: none;
  will-change: transform;
}
.loc-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 50%;
  transform-origin: 70% 50%;
  filter: saturate(1.35) contrast(1.05) brightness(1.04);
  animation: lpKen 16s var(--lp-ease) both;
}
/* Our own copy of the homepage mesh. Keeping the nx-hero-grid2 class on it
   also tells script.js (v9) that this hero is already dressed. */
.loc-page .loc-hero-grid {
  position: absolute;
  inset: 0;
  background-image: var(--lp-grid-dark);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(64rem 36rem at 28% 45%, #000 20%, transparent 76%);
  mask-image: radial-gradient(64rem 36rem at 28% 45%, #000 20%, transparent 76%);
}
.loc-hero:has(.loc-hero-img) .loc-hero-grid { opacity: 0.55; }
.loc-hero-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: lpDrift 16s ease-in-out infinite;
}
.loc-hero-glow-a {
  width: 40rem;
  height: 40rem;
  top: -16rem;
  right: -10rem;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.04) 45%, transparent 70%);
}
.loc-hero-glow-b {
  width: 30rem;
  height: 30rem;
  bottom: -14rem;
  left: -8rem;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.09) 0%, transparent 70%);
  animation-duration: 21s;
  animation-delay: -7s;
}
.loc-hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(10, 10, 11, 0.82) 0%, rgba(10, 10, 11, 0.6) 30%, rgba(10, 10, 11, 0.16) 62%, rgba(10, 10, 11, 0) 100%),
    linear-gradient(180deg, rgba(10, 10, 11, 0.35) 0%, rgba(10, 10, 11, 0) 24%, rgba(10, 10, 11, 0) 70%, rgba(10, 10, 11, 0.78) 100%);
}

.loc-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: calc(var(--lp-wrap) + 2 * var(--lp-gutter));
  margin: 0 auto;
  padding: 0 var(--lp-gutter);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.loc-hero-copy { min-width: 0; text-align: left; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35); }
.loc-hero-copy > * { animation: lpUp 0.9s var(--lp-ease) both; }
.loc-hero-copy > :nth-child(1) { animation-delay: 0.05s; }
.loc-hero-copy > :nth-child(2) { animation-delay: 0.15s; }
.loc-hero-copy > :nth-child(3) { animation: lpRise 1.1s 0.25s var(--lp-ease) both; }
.loc-hero-copy > :nth-child(4) { animation-delay: 0.45s; }
.loc-hero-copy > :nth-child(5) { animation-delay: 0.58s; }

.loc-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.75rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--lp-on-dark-soft);
}
.loc-crumbs a {
  color: var(--lp-on-dark-soft);
  text-decoration: none;
  transition: color 0.2s ease;
}
.loc-crumbs a:hover { color: #fff; }
.loc-crumbs [aria-current] { color: var(--lp-on-dark); font-weight: 600; }
.loc-crumbs .sep { opacity: 0.45; }

.loc-page .loc-hero .loc-badge {
  display: inline-flex;
  align-items: center;
  margin: 0 0 1.5rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--lp-on-dark);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.loc-page .loc-hero .loc-h1 {
  margin: 0 0 1.5rem;
  font-size: clamp(2.75rem, 1.5rem + 4.8vw, 5.5rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: #fff;
  text-wrap: balance;
}
.loc-h1-city {
  position: relative;
  display: inline-block;
  padding-bottom: 0.06em;
  background: linear-gradient(92deg, #ffffff 10%, #c4c4cc 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.loc-h1-swash {
  position: absolute;
  left: -2%;
  bottom: -0.14em;
  width: 104%;
  height: 0.2em;
  overflow: visible;
  fill: none;
  stroke: rgba(255, 255, 255, 0.92);
  stroke-width: 2.6;
  stroke-linecap: round;
}
/* Set by JS when a long place name wraps inside the span: an underline the
   width of two lines reads as a strike-through, so drop it. */
.loc-h1-city.is-wrap .loc-h1-swash { display: none; }
.loc-h1-swash path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: lpDraw 1.2s 1s var(--lp-ease) forwards;
}

.loc-page .loc-hero-copy > p {
  max-width: 35rem;
  margin: 0 0 2.25rem;
  font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.25rem);
  line-height: 1.65;
  color: var(--lp-on-dark-mid);
}

.loc-page .loc-hero .loc-ctas {
  display: flex;
  flex-flow: row wrap;
  gap: 0.875rem;
  justify-content: flex-start;
}
.loc-page .loc-ctas > a,
.loc-page .loc-cta .mb-12 > a {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 3.5rem;
  padding: 0 1.75rem;
  border-radius: 0.875rem;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: none;
  transition: transform 0.25s var(--lp-ease), box-shadow 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.loc-page .loc-ctas > a svg,
.loc-page .loc-cta .mb-12 > a svg { width: 20px; height: 20px; margin: 0 !important; flex: none; }
.loc-page .loc-ctas > a:first-child,
.loc-page .loc-cta .mb-12 > a:first-child {
  background: #fff;
  color: var(--lp-ink);
  border: 1px solid #fff;
  box-shadow: 0 12px 32px -14px rgba(255, 255, 255, 0.45);
}
.loc-page .loc-ctas > a:first-child::after,
.loc-page .loc-cta .mb-12 > a:first-child::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(10, 10, 11, 0.1) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.8s var(--lp-ease);
  pointer-events: none;
}
.loc-page .loc-ctas > a:first-child:hover,
.loc-page .loc-cta .mb-12 > a:first-child:hover {
  background: #fff;
  transform: translateY(-2px);
  box-shadow: 0 20px 44px -14px rgba(255, 255, 255, 0.5);
}
.loc-page .loc-ctas > a:first-child:hover::after,
.loc-page .loc-cta .mb-12 > a:first-child:hover::after { transform: translateX(120%); }
.loc-page .loc-ctas > a:nth-child(2),
.loc-page .loc-cta .mb-12 > a:nth-child(2) {
  background: rgba(255, 255, 255, 0.04);
  color: var(--lp-on-dark);
  border: 1px solid rgba(255, 255, 255, 0.26);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.loc-page .loc-ctas > a:nth-child(2):hover,
.loc-page .loc-cta .mb-12 > a:nth-child(2):hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.55);
  transform: translateY(-2px);
}
.loc-page .loc-hero a:focus-visible,
.loc-page .loc-cta a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* Decorative search card ------------------------------------------------ */
.loc-page .loc-serp.nx-hero-visual { min-height: 0; }
.loc-serp {
  position: relative;
  justify-self: end;
  width: min(100%, 27rem);
  padding: 1.125rem;
  border-radius: 1.25rem;
  background: rgba(19, 19, 22, 0.66);
  border: 1px solid rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 40px 80px -24px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  color: var(--lp-on-dark);
  animation: lpCardIn 1.1s 0.45s var(--lp-ease) both;
}
.loc-serp-bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.875rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lp-on-dark-soft);
}
.loc-serp-bar i {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}
.loc-serp-bar span { margin-left: 0.5rem; }
.loc-serp-q {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  height: 3rem;
  margin-bottom: 0.875rem;
  padding: 0 1rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.95rem;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
}
.loc-serp-q svg { flex: none; opacity: 0.7; }
.loc-caret {
  flex: none;
  width: 1.5px;
  height: 1.1em;
  margin-left: -0.35rem;
  background: #fff;
  animation: lpBlink 1s steps(1) infinite;
}
.loc-serp-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.loc-serp-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  height: 3.75rem;
  padding: 0 0.875rem;
  border-radius: 0.875rem;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: transform 1s var(--lp-ease-io), background-color 0.6s ease, border-color 0.6s ease;
}
.loc-serp-row em {
  width: 1.75rem;
  font-style: normal;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--lp-on-dark-soft);
}
.loc-serp-row > div { flex: 1; min-width: 0; display: grid; gap: 0.3rem; }
.loc-serp-row strong { font-size: 0.85rem; font-weight: 700; color: #d4d4d8; }
.loc-serp-row .ln {
  display: block;
  width: 88%;
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.14);
}
.loc-serp-row .ln.s { width: 56%; background: rgba(255, 255, 255, 0.08); }
.loc-serp-row.is-you {
  z-index: 1;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
}
.loc-serp-row.is-you em,
.loc-serp-row.is-you strong { color: #fff; }
.loc-serp-up {
  flex: none;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  background: #fff;
  color: var(--lp-ink);
  font-size: 0.7rem;
  font-weight: 800;
  transition: opacity 0.4s 0.8s ease, transform 0.6s 0.8s var(--lp-ease);
}
/* Before the climb (set by JS): our row sits at #3, the others above it. */
.loc-serp.is-pre .loc-serp-row.is-you {
  transform: translate3d(0, calc(2 * (3.75rem + 0.5rem)), 0);
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(255, 255, 255, 0.07);
}
.loc-serp.is-pre .loc-serp-row.c1,
.loc-serp.is-pre .loc-serp-row.c2 { transform: translate3d(0, calc(-1 * (3.75rem + 0.5rem)), 0); }
.loc-serp.is-pre .loc-serp-up { opacity: 0; transform: scale(0.6); transition-delay: 0s; }

.loc-pin {
  position: absolute;
  left: -2.25rem;
  bottom: -1.75rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.125rem 0.75rem 0.75rem;
  border-radius: 1rem;
  background: #fff;
  color: var(--lp-ink);
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.65);
  animation: lpCardIn 1s 1.05s var(--lp-ease) both, lpFloat 6s 2.2s ease-in-out infinite;
}
.loc-pin-dot {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--lp-ink);
  color: #fff;
}
.loc-pin-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--lp-ink);
  animation: lpRing 2.4s ease-out infinite;
}
.loc-pin strong { display: block; font-size: 0.9rem; line-height: 1.25; }
.loc-pin span:not(.loc-pin-dot) { display: block; font-size: 0.75rem; color: var(--lp-soft); }

.loc-scroll {
  position: absolute;
  left: 50%;
  bottom: 1.75rem;
  z-index: 1;
  width: 1.5rem;
  height: 2.4rem;
  margin-left: -0.75rem;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  transition: border-color 0.2s ease;
  animation: lpUp 0.9s 1.2s var(--lp-ease) both;
}
.loc-scroll:hover { border-color: #fff; }
.loc-scroll span {
  position: absolute;
  left: 50%;
  top: 0.45rem;
  width: 3px;
  height: 0.45rem;
  margin-left: -1.5px;
  border-radius: 2px;
  background: #fff;
  animation: lpScroll 1.8s var(--lp-ease) infinite;
}

/* ---------------- 2. Long-form intro ---------------- */

.loc-page .loc-intro {
  max-width: none;
  margin: 0;
  padding: var(--lp-section) var(--lp-gutter);
  background: var(--lp-surface);
  scroll-margin-top: 4.5rem;
}
.loc-page .loc-intro .location-readmore-content { max-width: 48rem; margin: 0 auto; }
.loc-page .loc-intro .location-readmore-content > h2 {
  margin: 0 0 1.25rem;
  font-size: clamp(2rem, 1.35rem + 2.5vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: var(--lp-text);
  text-wrap: balance;
}
.loc-page .loc-intro .location-readmore-content > p {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--lp-mid);
}
.loc-page .loc-intro .location-readmore-content > p.loc-lead {
  font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
  line-height: 1.7;
}
.loc-page .loc-intro .location-readmore-content > h3 {
  position: relative;
  margin: 3.5rem 0 1rem;
  padding-top: 1.25rem;
  font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.65rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--lp-text);
}
.loc-page .loc-intro .location-readmore-content > h3::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2.5rem;
  height: 2px;
  background: var(--lp-ink);
  transform-origin: left;
  transition: transform 0.9s 0.2s var(--lp-ease);
}

/* Full-bleed-ish banner under the first paragraph. */
.loc-figure {
  position: relative;
  width: min(76rem, calc(100vw - 2 * var(--lp-gutter)));
  margin: 3rem 0 1rem calc(50% - min(38rem, 50vw - var(--lp-gutter)));
  aspect-ratio: 21 / 9;
  overflow: hidden;
  border-radius: var(--lp-r-lg);
  background: var(--lp-ink-3);
  clip-path: inset(0 round var(--lp-r-lg));
  transition: clip-path 1.3s var(--lp-ease);
}
.loc-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.08) contrast(1.02);
  transition: transform 1.8s var(--lp-ease);
}

/* "Our SEO services in …" ordered list -> numbered cards */
.loc-page .loc-intro .loc-svc-list {
  list-style: none;
  margin: 1.5rem 0 1rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.875rem;
  counter-reset: lpsvc;
}
.loc-page .loc-intro .loc-svc-list > li {
  position: relative;
  margin: 0;
  padding: 1.25rem 1.25rem 1.25rem 4rem;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r);
  background: var(--lp-surface);
  font-size: 0.975rem;
  line-height: 1.6;
  color: var(--lp-soft);
  counter-increment: lpsvc;
  transition: transform 0.3s var(--lp-ease), border-color 0.3s ease, box-shadow 0.3s ease;
}
.loc-page .loc-intro .loc-svc-list > li::before {
  content: counter(lpsvc, decimal-leading-zero);
  position: absolute;
  left: 1.25rem;
  top: 1.2rem;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.6rem;
  background: var(--lp-ink);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.loc-page .loc-intro .loc-svc-list > li strong { color: var(--lp-text); }
.loc-page .loc-intro .loc-svc-list > li:hover {
  transform: translateY(-3px);
  border-color: var(--lp-line-2);
  box-shadow: 0 16px 32px -20px rgba(0, 0, 0, 0.3);
}

/* Industries */
.loc-page .loc-intro .loc-ind-grid { gap: 1rem; margin-top: 1.5rem; }
.loc-page .loc-intro .loc-ind {
  position: relative;
  overflow: hidden;
  padding: 1.5rem;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r);
  background: var(--lp-surface);
  box-shadow: none;
  transition: transform 0.4s var(--lp-ease), box-shadow 0.4s ease, border-color 0.4s ease;
}
.loc-page .loc-intro .loc-ind::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(18rem circle at var(--mx, 50%) var(--my, 0%), rgba(10, 10, 11, 0.05), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.loc-page .loc-intro .loc-ind::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--lp-ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s var(--lp-ease);
}
.loc-page .loc-intro .loc-ind:hover {
  transform: translateY(-4px);
  border-color: var(--lp-line-2);
  box-shadow: 0 26px 50px -28px rgba(0, 0, 0, 0.35);
}
.loc-page .loc-intro .loc-ind:hover::before { opacity: 1; }
.loc-page .loc-intro .loc-ind:hover::after { transform: scaleX(1); }
.loc-page .loc-intro .loc-ind h4 { position: relative; font-size: 1.125rem; letter-spacing: -0.01em; color: var(--lp-text); }
.loc-page .loc-intro .loc-ind p { position: relative; color: var(--lp-soft); }
.loc-ind-media {
  margin: -1.5rem -1.5rem 1.25rem;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--lp-bg);
}
.loc-ind-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.05);
  transform: scale(1.02);
  transition: transform 1.1s var(--lp-ease), filter 0.7s ease;
}
.loc-ind:hover .loc-ind-media img { transform: scale(1.07); filter: saturate(1.15); }

/* Case-study paragraph -> dark quote card */
.loc-page .loc-intro .location-readmore-content > p.loc-quote {
  position: relative;
  overflow: hidden;
  margin: 1.25rem 0 1rem;
  padding: 2rem 2rem 2rem 4.5rem;
  border-radius: var(--lp-r-lg);
  background: var(--lp-ink);
  color: var(--lp-on-dark-mid);
  font-size: 1.1rem;
  line-height: 1.75;
}
.loc-page .loc-quote::before {
  content: "\201C";
  position: absolute;
  left: 1.5rem;
  top: 1.25rem;
  font: 700 4rem/1 Georgia, "Times New Roman", serif;
  color: rgba(255, 255, 255, 0.3);
}
.loc-page .loc-quote::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(28rem 14rem at 100% 0%, rgba(255, 255, 255, 0.1), transparent 70%), var(--lp-grid-dark);
  background-size: auto, 40px 40px;
  -webkit-mask-image: linear-gradient(90deg, transparent 20%, #000);
  mask-image: linear-gradient(90deg, transparent 20%, #000);
  pointer-events: none;
}
.loc-page .loc-quote .loc-num {
  color: #fff;
  font-weight: 800;
  background: linear-gradient(transparent 62%, rgba(255, 255, 255, 0.2) 62%);
  padding: 0 0.1em;
}

/* Process list -> vertical timeline */
.loc-page .loc-intro .loc-steps {
  position: relative;
  list-style: none;
  margin: 1.5rem 0 1rem;
  padding: 0;
  display: grid;
  gap: 0.25rem;
  counter-reset: lpstep;
}
.loc-page .loc-intro .loc-steps::before {
  content: "";
  position: absolute;
  left: 1.0625rem;
  top: 1rem;
  bottom: 1rem;
  width: 2px;
  background: linear-gradient(var(--lp-ink), rgba(10, 10, 11, 0.12));
  transform-origin: top;
  transition: transform 1.6s 0.1s var(--lp-ease);
}
.loc-page .loc-intro .loc-steps > li {
  position: relative;
  margin: 0;
  padding: 0.7rem 0 0.7rem 3.5rem;
  line-height: 1.6;
  color: var(--lp-mid);
  counter-increment: lpstep;
}
.loc-page .loc-intro .loc-steps > li::before {
  content: counter(lpstep);
  position: absolute;
  left: 0;
  top: 0.45rem;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 2px solid var(--lp-ink);
  background: var(--lp-surface);
  color: var(--lp-ink);
  font-size: 0.85rem;
  font-weight: 800;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.loc-page .loc-intro .loc-steps > li:hover::before { background: var(--lp-ink); color: #fff; }

/* Benefits list -> check tiles */
.loc-page .loc-intro .loc-checks {
  list-style: none;
  margin: 1.25rem 0 1.5rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.loc-page .loc-intro .loc-checks > li {
  position: relative;
  margin: 0;
  padding: 1rem 1rem 1rem 3.25rem;
  border-radius: var(--lp-r);
  background: var(--lp-bg);
  font-size: 0.975rem;
  line-height: 1.55;
  color: var(--lp-mid);
  transition: background-color 0.3s ease, transform 0.3s var(--lp-ease);
}
.loc-page .loc-intro .loc-checks > li::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--lp-ink) var(--lp-check) center / 0.85rem no-repeat;
}
.loc-page .loc-intro .loc-checks > li:hover { background: #ebebed; transform: translateY(-2px); }

/* Popular searches -> pills (the " | " separators collapse via font-size:0) */
.loc-page .loc-intro .loc-tags {
  margin-top: 2.5rem;
  padding: 1.75rem;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-lg);
  background: var(--lp-bg);
}
.loc-page .loc-intro .loc-tags h4 {
  margin-bottom: 1rem;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lp-soft);
}
.loc-page .loc-intro .loc-tags p { margin: 0; font-size: 0; line-height: 0; }
.loc-page .loc-intro .loc-tags p > a {
  display: inline-flex;
  align-items: center;
  margin: 0 0.5rem 0.5rem 0;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--lp-line);
  border-radius: 999px;
  background: var(--lp-surface);
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--lp-mid);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s var(--lp-ease);
}
.loc-page .loc-intro .loc-tags p > a::after { display: none; }
.loc-page .loc-intro .loc-tags p > a:hover {
  background: var(--lp-ink);
  border-color: var(--lp-ink);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}

/* ---------------- 3. Services ---------------- */

.loc-page .loc-services {
  position: relative;
  overflow: hidden;
  padding: var(--lp-section) 0;
  background: var(--lp-bg);
}
.loc-page .loc-services::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--lp-grid-light);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(60rem 26rem at 50% 0%, #000 25%, transparent 75%);
  mask-image: radial-gradient(60rem 26rem at 50% 0%, #000 25%, transparent 75%);
  pointer-events: none;
}
.loc-page .loc-services > div { position: relative; }
.loc-page .loc-services .text-center h2 {
  font-size: clamp(2.25rem, 1.4rem + 3vw, 3.5rem);
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.loc-page .loc-services .grid { counter-reset: lpcard; gap: 1.25rem; }
.loc-page .loc-services .loc-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--lp-line);
  border-radius: 1.25rem;
  background: var(--lp-surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  counter-increment: lpcard;
  transition: transform 0.45s var(--lp-ease), box-shadow 0.45s ease, border-color 0.45s ease;
}
.loc-page .loc-services .loc-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(22rem circle at var(--mx, 50%) var(--my, 0%), rgba(10, 10, 11, 0.065), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.loc-page .loc-services .loc-card::after {
  content: counter(lpcard, decimal-leading-zero);
  position: absolute;
  top: 1.6rem;
  right: 1.75rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(10, 10, 11, 0.3);
}
.loc-page .loc-services .loc-card > * { position: relative; }
.loc-page .loc-services .loc-card > div:first-child { transition: transform 0.5s var(--lp-ease), background-color 0.3s ease; }
.loc-page .loc-services .loc-card:hover {
  transform: translateY(-6px);
  border-color: rgba(10, 10, 11, 0.2);
  box-shadow: 0 32px 64px -32px rgba(0, 0, 0, 0.38);
}
.loc-page .loc-services .loc-card:hover::before { opacity: 1; }
.loc-page .loc-services .loc-card:hover > div:first-child { transform: rotate(-8deg) scale(1.06); }

/* ---------------- 4. Why choose us ---------------- */

.loc-page .loc-why { padding: var(--lp-section) 0; }
.loc-page .loc-why h2 { letter-spacing: -0.035em; text-wrap: balance; }
.loc-page .loc-why .sm\:grid-cols-2 > .flex {
  padding: 0.75rem 1rem;
  border-radius: var(--lp-r-sm);
  background: var(--lp-bg);
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s var(--lp-ease);
}
.loc-page .loc-why .sm\:grid-cols-2 > .flex:hover { background: var(--lp-ink); transform: translateX(4px); }
.loc-page .loc-why .sm\:grid-cols-2 > .flex:hover span,
.loc-page .loc-why .sm\:grid-cols-2 > .flex:hover svg { color: #fff; }
.loc-page .loc-why .sm\:grid-cols-2 > .flex svg { color: var(--lp-ink); transition: color 0.25s ease; }
.loc-page .loc-why .sm\:grid-cols-2 > .flex span { transition: color 0.25s ease; }

.loc-page .loc-why .loc-why-panel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 2rem;
  border-radius: 1.75rem;
  background: var(--lp-ink);
  color: var(--lp-on-dark);
  box-shadow: 0 48px 90px -48px rgba(0, 0, 0, 0.6);
}
.loc-page .loc-why .loc-why-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(30rem 18rem at 100% 0%, rgba(255, 255, 255, 0.1), transparent 70%), var(--lp-grid-dark);
  background-size: auto, 44px 44px;
  pointer-events: none;
}
.loc-page .loc-why-panel h3 { color: #fff; letter-spacing: -0.02em; }
.loc-page .loc-why-panel .text-center p,
.loc-page .loc-why-panel .text-gray-600 { color: var(--lp-on-dark-soft); }
.loc-page .loc-why-panel .text-gray-900 { color: #fff; }
.loc-page .loc-why-panel .bg-white {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1rem;
  box-shadow: none;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: transform 0.35s var(--lp-ease), background-color 0.35s ease, border-color 0.35s ease;
}
.loc-page .loc-why-panel .bg-white:hover {
  transform: translateX(6px);
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.2);
}
.loc-page .loc-why-panel .bg-white svg { color: #fff; }
.loc-why-media {
  position: relative;
  margin: -2rem -2rem 1.75rem;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.loc-why-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.08);
  transition: transform 1.4s var(--lp-ease);
}
.loc-why-panel:hover .loc-why-media img { transform: scale(1.04); }
.loc-why-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, var(--lp-ink) 100%);
}

/* ---------------- 5. FAQ (main + "read more" copies) ---------------- */

.loc-page .location-faq-section {
  padding: var(--lp-section) 0;
  background: var(--lp-bg);
}
.loc-page .location-faq-section .newservices_wrapper__ochBy {
  padding: 0;
  background: transparent;
  box-shadow: none;
}
.loc-page .newservices_accordion_h2__V2LzJ {
  margin-bottom: 2.25rem;
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.035em;
  text-align: center;
  color: var(--lp-text);
}
.loc-page .newservices_accordion__OM4MF { gap: 0.75rem; }
.loc-page :is(.newservices_accordion__OM4MF, .space-y-6) > div:has(> .newservices_title_1__sLFlZ) {
  overflow: hidden;
  border: 1px solid var(--lp-line);
  border-radius: 1rem;
  background: var(--lp-surface);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.loc-page :is(.newservices_accordion__OM4MF, .space-y-6) > div:has(> .newservices_title_1__sLFlZ):hover {
  border-color: rgba(10, 10, 11, 0.3);
  box-shadow: 0 14px 30px -22px rgba(0, 0, 0, 0.35);
}
.loc-page :is(.newservices_accordion__OM4MF, .space-y-6) > div:has(> [aria-expanded="true"]) {
  border-color: var(--lp-ink);
  box-shadow: 0 18px 38px -26px rgba(0, 0, 0, 0.45);
}
.loc-page .newservices_title_1__sLFlZ {
  padding: 1.2rem 1.5rem;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  text-shadow: none;
}
.loc-page .newservices_title_1__sLFlZ:hover { background: transparent !important; }
.loc-page .newservices_title_1__sLFlZ:focus-visible { outline: 2px solid var(--lp-ink); outline-offset: -4px; border-radius: 1rem; }
.loc-page .newservices_title_1__sLFlZ > div { align-items: center; gap: 0.875rem !important; }
.loc-page .newservices_title_1__sLFlZ svg {
  width: 1.9rem;
  height: 1.9rem;
  margin-top: 0 !important;
  padding: 0.4rem;
  border-radius: 50%;
  background: var(--lp-bg);
  color: var(--lp-ink);
  transition: transform 0.4s var(--lp-ease), background-color 0.25s ease, color 0.25s ease !important;
}
.loc-page .newservices_title_1__sLFlZ[aria-expanded="true"] svg { background: var(--lp-ink); color: #fff; }
.loc-page .newservices_accodion_h2__GRoTU {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--lp-text);
  text-shadow: none;
}
.loc-page .newservices_contain__aSMM0 {
  padding: 0 1.5rem 0 4.25rem;
  transition: max-height 0.45s var(--lp-ease), padding 0.45s var(--lp-ease);
}
.loc-page .newservices_contain__aSMM0.newservices_show__zRUJg {
  margin-top: 0;
  padding: 0 1.5rem 1.4rem 4.25rem;
  border-radius: 0;
  background: transparent;
}
.loc-page .newservices_container_accordion_ptag__R7lSs { color: var(--lp-soft); line-height: 1.75; }

/* ---------------- 6. Closing CTA ---------------- */

.loc-page .loc-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(5rem, 3.5rem + 6vw, 9rem) 0;
  background: var(--lp-ink);
}
.loc-cta-bg {
  position: absolute;
  inset: -12% 0;
  z-index: -3;
  will-change: transform;
}
.loc-cta-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% 50%;
  filter: saturate(1.3) brightness(0.9);
  opacity: 0.7;
}
.loc-page .loc-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: radial-gradient(ellipse 70% 80% at 50% 50%, rgba(10, 10, 11, 0.5), rgba(10, 10, 11, 0.85) 80%);
}
.loc-page .loc-cta::after {
  content: "";
  position: absolute;
  top: -50%;
  bottom: -50%;
  left: -30%;
  width: 22%;
  z-index: -1;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.045), transparent);
  animation: lpBeam 10s ease-in-out infinite;
  pointer-events: none;
}
.loc-cta-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--lp-grid-dark);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(50rem 26rem at 50% 50%, #000 15%, transparent 75%);
  mask-image: radial-gradient(50rem 26rem at 50% 50%, #000 15%, transparent 75%);
  pointer-events: none;
}
.loc-page .loc-cta h2 {
  font-size: clamp(2.25rem, 1.3rem + 3.6vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: #fff;
  text-wrap: balance;
  background: linear-gradient(180deg, #ffffff 30%, #b9b9c2);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.loc-page .loc-cta p { color: var(--lp-on-dark-mid); }
.loc-page .loc-cta .space-x-4 > a {
  transition: transform 0.3s var(--lp-ease), background-color 0.3s ease, border-color 0.3s ease;
}
.loc-page .loc-cta .space-x-4 > a svg { transition: color 0.3s ease; }
.loc-page .loc-cta .space-x-4 > a:hover {
  transform: translateY(-3px);
  background: #fff;
  border-color: #fff;
}
.loc-page .loc-cta .space-x-4 > a:hover svg { color: var(--lp-ink); }

/* ---------------- 7. "Read more" content ---------------- */

.loc-page [data-expanded-content]:not(.hidden) { animation: lpFade 0.6s var(--lp-ease) both; }
.loc-page [data-expanded-content] h2 { letter-spacing: -0.03em; }
.loc-page [data-expanded-content] section.bg-blue-50 {
  position: relative;
  overflow: hidden;
  background: var(--lp-ink);
}
.loc-page [data-expanded-content] section.bg-blue-50 .text-blue-800 { color: #fff; }
.loc-page [data-expanded-content] section.bg-blue-50 .text-3xl { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); letter-spacing: -0.03em; }
.loc-page [data-expanded-content] section.bg-blue-50 .text-gray-600 { color: var(--lp-on-dark-soft); }
.loc-page [data-expanded-content] .lg\:grid-cols-4 > div {
  position: relative;
  padding: 1.5rem;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r);
  background: var(--lp-surface);
  transition: transform 0.35s var(--lp-ease), border-color 0.35s ease, box-shadow 0.35s ease;
}
.loc-page [data-expanded-content] .lg\:grid-cols-4 > div:hover {
  transform: translateY(-4px);
  border-color: var(--lp-line-2);
  box-shadow: 0 22px 44px -28px rgba(0, 0, 0, 0.35);
}
.loc-page [data-expanded-content] .lg\:grid-cols-4 > div > div:first-child {
  background: var(--lp-ink);
  color: #fff;
  font-size: 1rem;
}

.loc-page .loc-readmore-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-width: 0;
  margin: 3rem auto;
  padding: 1rem 1.75rem 1rem 2rem;
  border-radius: 999px;
  background: var(--lp-ink);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 16px 36px -18px rgba(0, 0, 0, 0.55);
  transition: transform 0.25s var(--lp-ease), box-shadow 0.25s ease, background-color 0.25s ease;
}
.loc-page .loc-readmore-btn::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.35s var(--lp-ease);
}
.loc-page .loc-readmore-btn[aria-expanded="true"]::after { transform: translateY(2px) rotate(225deg); }
.loc-page .loc-readmore-btn:hover {
  background: #26262b;
  transform: translateY(-2px);
  box-shadow: 0 22px 44px -18px rgba(0, 0, 0, 0.6);
}
.loc-page .loc-readmore-btn:focus-visible { outline: 2px solid var(--lp-ink); outline-offset: 3px; }

/* ---------------- 8. Scroll reveals ----------------
   location-enhance.js sets html.loc-js, tags targets with [data-lr] and
   adds .in when they enter the viewport, then drops [data-lr] so the
   element's own hover transitions take over again. No JS = no hiding. */

html.loc-js [data-lr] {
  transition: opacity 0.85s var(--lp-ease), transform 0.85s var(--lp-ease), clip-path 1.3s var(--lp-ease);
  transition-delay: calc(var(--lr-i, 0) * 80ms);
}
html.loc-js [data-lr]:not(.in) { opacity: 0; transform: translate3d(0, 26px, 0); }
html.loc-js [data-lr="line"]:not(.in) { opacity: 1; transform: none; }
html.loc-js .loc-figure[data-lr]:not(.in) {
  opacity: 1;
  transform: none;
  clip-path: inset(9% 7% 9% 7% round var(--lp-r-lg));
}
html.loc-js .loc-figure[data-lr]:not(.in) img { transform: scale(1.14); }
html.loc-js .loc-intro .location-readmore-content > h3:not(.in)::before { transform: scaleX(0); }
html.loc-js .loc-intro .loc-steps:not(.in)::before { transform: scaleY(0); }

/* ---------------- 9. Responsive / reduced motion ---------------- */

@media (max-width: 1023px) {
  .loc-page .loc-hero { min-height: min(calc(100svh - 6.5rem), 42rem); }
  .loc-hero-inner { grid-template-columns: minmax(0, 1fr); }
  .loc-serp { display: none; }
  .loc-hero-shade {
    background:
      linear-gradient(180deg, rgba(10, 10, 11, 0.55) 0%, rgba(10, 10, 11, 0.45) 45%, rgba(10, 10, 11, 0.85) 100%);
  }
  .loc-hero-img { object-position: 68% 50%; }
}

@media (max-width: 767px) {
  .loc-page .loc-hero { min-height: 0; padding: 3.5rem 0 5.5rem; }
  /* enhancements.css caps every `main h1` on phones with !important; the
     hero headline is the one place that should stay large. */
  .loc-page .loc-hero .loc-h1 { font-size: clamp(2.4rem, 11vw, 3.25rem) !important; }
  .loc-page .loc-intro .loc-svc-list,
  .loc-page .loc-intro .loc-checks { grid-template-columns: minmax(0, 1fr); }
  .loc-figure { aspect-ratio: 4 / 3; margin-top: 2.25rem; }
  .loc-page .loc-intro .location-readmore-content > p.loc-quote { padding: 3.75rem 1.5rem 1.5rem; }
  .loc-page .loc-quote::before { left: 1.25rem; top: 1rem; }
  .loc-page .loc-intro .location-readmore-content > h3 { margin-top: 2.75rem; }
  .loc-page .loc-why .loc-why-panel { padding: 1.5rem; }
  .loc-why-media { margin: -1.5rem -1.5rem 1.5rem; }
  .loc-page .newservices_title_1__sLFlZ { padding: 1rem 1.1rem; }
  .loc-page .newservices_contain__aSMM0,
  .loc-page .newservices_contain__aSMM0.newservices_show__zRUJg { padding-left: 1.1rem; padding-right: 1.1rem; }
}

@media (max-width: 479px) {
  .loc-page .loc-hero .loc-ctas { flex-direction: column; }
  .loc-page .loc-ctas > a { justify-content: center; }
  .loc-scroll { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .loc-page *,
  .loc-page *::before,
  .loc-page *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
  }
  html.loc-js [data-lr]:not(.in) { opacity: 1; transform: none; clip-path: none; }
}

@media print {
  html.loc-js [data-lr] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .loc-serp, .loc-scroll, .loc-hero-glow { display: none !important; }
}

/* ============================================================
   Round 2 — more motion on the city pages, and the /locations/
   directory page (body.loc-index).

   10. Services band + CTA place-name backdrop
   11. Table of contents (wide screens)
   12. Word-by-word headings, tilt, spotlight, magnetic buttons
   13. /locations/ hero: search, region chips, globe
   14. /locations/ map
   15. /locations/ directory + filter bar
   16. /locations/ featured cities + CTA
   17. Responsive / reduced motion for this round
   ============================================================ */

@keyframes lpMarquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

.loc-page .loc-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.loc-page [hidden] { display: none !important; }

/* ---------------- 10. Services band + CTA place-name backdrop ---------------- */

.loc-marquee {
  position: relative;
  overflow: hidden;
  padding: 1.15rem 0;
  background: var(--lp-ink);
  color: var(--lp-on-dark);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.loc-marquee-track {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  width: max-content;
  animation: lpMarquee 42s linear infinite;
}
.loc-marquee::before,
.loc-marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: 6rem;
  pointer-events: none;
}
.loc-marquee::before { left: 0; background: linear-gradient(90deg, var(--lp-ink), transparent); }
.loc-marquee::after { right: 0; background: linear-gradient(270deg, var(--lp-ink), transparent); }
.loc-marquee:hover .loc-marquee-track { animation-play-state: paused; }
.loc-marquee span {
  font-size: clamp(1.1rem, 0.85rem + 0.9vw, 1.6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.loc-marquee span:nth-of-type(even) { color: rgba(255, 255, 255, 0.42); }
.loc-marquee i { display: grid; color: rgba(255, 255, 255, 0.35); }

.loc-cta-mark {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  z-index: -1;
  overflow: hidden;
  transform: translateY(-50%);
  pointer-events: none;
}
.loc-cta-mark > div {
  display: flex;
  gap: 4rem;
  width: max-content;
  animation: lpMarquee 70s linear infinite;
}
.loc-cta-mark span {
  font-size: clamp(6rem, 3rem + 12vw, 15rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.07);
}

/* ---------------- 11. Table of contents (built by JS) ---------------- */

.loc-toc { display: none; }
.loc-page .location-readmore-content > h3 { scroll-margin-top: 6rem; }

@media (min-width: 1280px) {
  .loc-page .loc-intro.has-toc {
    display: grid;
    grid-template-columns: minmax(10rem, 1fr) minmax(0, 46rem) minmax(0, 1fr);
    column-gap: 2.5rem;
  }
  .loc-page .loc-intro.has-toc > .location-readmore-content { grid-column: 2; grid-row: 1; margin: 0; }
  /* The banner would run under the sticky contents list, so keep it in the text column. */
  .loc-intro.has-toc .loc-figure { width: 100%; margin-left: 0; }
  .loc-toc {
    display: block;
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
    align-self: start;
    position: sticky;
    top: 6.5rem;
    /* Never wider than its column, so it can't spill off the left edge on
       laptop widths or when the browser is zoomed in. */
    width: min(15rem, 100%);
    min-width: 0;
    margin-top: 0.5rem;
  }
}
.loc-toc p {
  margin: 0 0 0.9rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lp-soft);
}
.loc-toc ol {
  position: relative;
  display: grid;
  gap: 0.1rem;
  margin: 0;
  padding: 0 0 0 1rem;
  list-style: none;
  border-left: 1px solid var(--lp-line);
}
.loc-toc a {
  display: block;
  padding: 0.4rem 0;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--lp-soft);
  text-decoration: none;
  transition: color 0.2s ease, transform 0.25s var(--lp-ease);
}
.loc-toc a:hover { color: var(--lp-text); transform: translateX(2px); }
.loc-toc a.is-active { color: var(--lp-text); font-weight: 600; }
.loc-toc a:focus-visible { outline: 2px solid var(--lp-ink); outline-offset: 2px; border-radius: 4px; }
.loc-toc-bar {
  position: absolute;
  left: -1px;
  top: 0;
  width: 2px;
  height: 0;
  background: var(--lp-ink);
  transition: transform 0.45s var(--lp-ease), height 0.45s var(--lp-ease);
}

/* ---------------- 12. Word reveal, tilt, spotlight, magnetic ---------------- */

.loc-page .lw {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.loc-page .lw > span {
  display: inline-block;
  transition: transform 0.95s var(--lp-ease);
  transition-delay: calc(var(--w, 0) * 45ms);
}
html.loc-js [data-lr="words"]:not(.in) { opacity: 1; transform: none; }
html.loc-js [data-lr="words"]:not(.in) .lw > span { transform: translate3d(0, 108%, 0); }

/* Card: entrance plays once ("backwards"), then the tilt vars take over. */
.loc-serp {
  animation: lpCardIn 1.1s 0.45s var(--lp-ease) backwards;
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.6s var(--lp-ease);
}
.loc-page .loc-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(36rem circle at var(--hx, 72%) var(--hy, 35%), rgba(255, 255, 255, 0.07), transparent 62%);
  pointer-events: none;
}
.loc-page .loc-ctas > a:first-child,
.loc-page .loc-cta .mb-12 > a:first-child,
.loc-page .loc-cta .max-w-4xl > a {
  translate: var(--tx, 0) var(--ty, 0);
  transition: transform 0.25s var(--lp-ease), translate 0.35s var(--lp-ease), box-shadow 0.25s ease, background-color 0.25s ease;
}

.loc-count { font-variant-numeric: tabular-nums; }

/* ---------------- 13. /locations/ hero ---------------- */

.loc-hero-index .loc-hero-inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
.loc-hero-copy > :nth-child(6) { animation-delay: 0.7s; }

.loc-find {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 34rem;
  height: 3.75rem;
  padding: 0.375rem 0.375rem 0.375rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}
.loc-find:focus-within {
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.09);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.08);
}
.loc-find svg { flex: none; opacity: 0.7; }
.loc-find input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 1.05rem;
  outline: none;
}
.loc-find input::placeholder { color: var(--lp-on-dark-soft); }
.loc-find input::-webkit-search-cancel-button { filter: invert(1); }
.loc-find button {
  flex: none;
  height: 100%;
  padding: 0 1.4rem;
  border: 0;
  border-radius: 0.7rem;
  background: #fff;
  color: var(--lp-ink);
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s var(--lp-ease), box-shadow 0.2s ease;
}
.loc-find button:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -12px rgba(255, 255, 255, 0.5); }
.loc-find button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.loc-find-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.loc-find-chips a {
  padding: 0.45rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  font-size: 0.8125rem;
  color: var(--lp-on-dark-mid);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.loc-find-chips a:hover { background: #fff; border-color: #fff; color: var(--lp-ink); }
.loc-find-chips a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.loc-globe {
  position: relative;
  justify-self: end;
  width: min(100%, 34rem);
  aspect-ratio: 1;
  animation: lpCardIn 1.2s 0.35s var(--lp-ease) backwards;
}
.loc-page .loc-globe.nx-hero-visual { min-height: 0; }
.loc-globe::before {
  content: "";
  position: absolute;
  inset: 7%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.025) 55%, transparent 72%);
  box-shadow: 0 0 120px rgba(255, 255, 255, 0.06);
}
.loc-globe canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: pan-y;
}
.loc-globe canvas:active { cursor: grabbing; }
.loc-globe-chip.loc-pin { left: 0; bottom: 10%; }

/* ---------------- 14. /locations/ map ---------------- */

.loc-page .loc-network,
.loc-page .loc-directory { background: var(--lp-bg); padding: var(--lp-section) 0; }
.loc-page .loc-network { position: relative; overflow: hidden; }
.loc-page .loc-network::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--lp-grid-light);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(60rem 26rem at 50% 0%, #000 25%, transparent 75%);
  mask-image: radial-gradient(60rem 26rem at 50% 0%, #000 25%, transparent 75%);
  pointer-events: none;
}
.loc-page .loc-network > div { position: relative; }
.loc-page :is(.loc-network, .loc-directory, .loc-featured) .text-center h2 {
  font-size: clamp(2.25rem, 1.4rem + 3vw, 3.5rem);
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.loc-page .loc-map-card {
  padding: 0.75rem;
  border: 1px solid var(--lp-line);
  border-radius: 1.5rem;
  background: var(--lp-surface);
  box-shadow: 0 40px 80px -48px rgba(0, 0, 0, 0.35);
}
.loc-page #locations-map { border-radius: 1rem; background: #e9e9ec; }
.loc-page .leaflet-tile-pane { filter: grayscale(1) contrast(1.04) brightness(1.02); }
.loc-page .leaflet-bar {
  overflow: hidden;
  border: 1px solid var(--lp-line) !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 8px 20px -12px rgba(0, 0, 0, 0.3) !important;
}
.loc-page .leaflet-bar a { color: var(--lp-ink); border-bottom-color: var(--lp-line); }
.loc-page .leaflet-popup-content-wrapper { border-radius: 0.875rem; box-shadow: 0 20px 44px -18px rgba(0, 0, 0, 0.45); }
.loc-page .leaflet-popup-content { margin: 0.9rem 1.1rem; font-size: 0.875rem; line-height: 1.5; color: var(--lp-mid); }
.loc-page .leaflet-popup-content strong { font-size: 1rem; color: var(--lp-text); }
.loc-page .leaflet-popup-content a { color: var(--lp-ink); font-weight: 600; }
.loc-mk { background: none; border: 0; }
.loc-mk span {
  position: relative;
  display: block;
  width: 10px;
  height: 10px;
  margin: 4px;
  border-radius: 50%;
  background: #0a0a0b;
  box-shadow: 0 0 0 3px #fff, 0 3px 8px rgba(0, 0, 0, 0.35);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.loc-mk span::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid rgba(10, 10, 11, 0.5);
  animation: lpRing 2.6s ease-out infinite;
}
.loc-mk:hover span,
.loc-mk:focus-visible span { transform: scale(1.45); }

/* ---------------- 15. /locations/ directory ---------------- */

.loc-dir-bar {
  position: sticky;
  top: 4.25rem;
  z-index: 20;
  display: grid;
  gap: 0.875rem;
  margin: 0 0 2.75rem;
  padding: 0.875rem;
  border: 1px solid var(--lp-line);
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 24px 48px -36px rgba(0, 0, 0, 0.35);
}
.loc-dir-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }
.loc-dir-search {
  position: relative;
  flex: 1 1 18rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  height: 2.9rem;
  padding: 0 1rem;
  border: 1px solid var(--lp-line);
  border-radius: 0.8rem;
  background: var(--lp-surface);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.loc-dir-search:focus-within { border-color: var(--lp-ink); box-shadow: 0 0 0 3px rgba(10, 10, 11, 0.08); }
.loc-dir-search svg { flex: none; color: var(--lp-soft); }
.loc-dir-search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.95rem;
  color: var(--lp-text);
  outline: none;
}
.loc-dir-count { margin: 0; font-size: 0.85rem; color: var(--lp-soft); font-variant-numeric: tabular-nums; }
.loc-dir-count strong { color: var(--lp-text); }
.loc-dir-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.loc-dir-chips button {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--lp-line);
  border-radius: 999px;
  background: var(--lp-surface);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--lp-mid);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.loc-dir-chips button span {
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: var(--lp-bg);
  font-size: 0.72rem;
  color: var(--lp-soft);
  font-variant-numeric: tabular-nums;
}
.loc-dir-chips button:hover { border-color: var(--lp-ink); color: var(--lp-text); }
.loc-dir-chips button[aria-pressed="true"] { background: var(--lp-ink); border-color: var(--lp-ink); color: #fff; }
.loc-dir-chips button[aria-pressed="true"] span { background: rgba(255, 255, 255, 0.16); color: #fff; }
.loc-dir-chips button:focus-visible,
.loc-dir-az a:focus-visible { outline: 2px solid var(--lp-ink); outline-offset: 2px; }
.loc-dir-az { display: flex; flex-wrap: wrap; gap: 0.2rem; }
.loc-dir-az a,
.loc-dir-az span {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
}
.loc-dir-az a { color: var(--lp-mid); transition: background-color 0.2s ease, color 0.2s ease; }
.loc-dir-az a:hover,
.loc-dir-az a.is-active { background: var(--lp-ink); color: #fff; }
.loc-dir-az span { color: rgba(17, 17, 17, 0.22); }

.loc-page .loc-letter { scroll-margin-top: 14rem; margin-bottom: 3rem; }
.loc-page .loc-letter > .flex { margin-bottom: 1.25rem; }
.loc-page .loc-letter > .flex > div:first-child {
  width: 3rem;
  height: 3rem;
  margin-right: 1rem;
  border-radius: 0.875rem;
  background: var(--lp-ink);
}
.loc-page .loc-letter > .flex > div:first-child span { font-size: 1.25rem; }
.loc-page .loc-letter h2 { font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.75rem); letter-spacing: -0.02em; }
.loc-page .loc-letter .grid { gap: 0.75rem; }
@media (min-width: 1280px) {
  .loc-page .loc-letter .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.loc-page .loc-dir-card { position: relative; }
.loc-page .loc-dir-card:hover { transform: none; }
.loc-page .loc-dir-card > div {
  position: relative;
  overflow: hidden;
  height: 100%;
  padding: 1rem 2.75rem 1rem 1.1rem;
  border: 1px solid var(--lp-line);
  border-radius: 1rem;
  background: var(--lp-surface);
  box-shadow: none;
  transition: transform 0.35s var(--lp-ease), border-color 0.35s ease, box-shadow 0.35s ease;
}
.loc-page .loc-dir-card > div::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(14rem circle at var(--mx, 50%) var(--my, 0%), rgba(10, 10, 11, 0.06), transparent 60%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.loc-page .loc-dir-card > div::after {
  content: "";
  position: absolute;
  right: 1.1rem;
  top: 50%;
  width: 0.5rem;
  height: 0.5rem;
  border-top: 2px solid var(--lp-ink);
  border-right: 2px solid var(--lp-ink);
  opacity: 0.3;
  transform: translate(-4px, -50%) rotate(45deg);
  transition: transform 0.3s var(--lp-ease), opacity 0.3s ease;
}
.loc-page .loc-dir-card:hover > div,
.loc-page .loc-dir-card:focus-visible > div {
  transform: translateY(-3px);
  border-color: rgba(10, 10, 11, 0.35);
  box-shadow: 0 20px 40px -26px rgba(0, 0, 0, 0.4);
}
.loc-page .loc-dir-card:hover > div::before { opacity: 1; }
.loc-page .loc-dir-card:hover > div::after { opacity: 1; transform: translate(0, -50%) rotate(45deg); }
.loc-page .loc-dir-card:focus-visible { outline: none; }
.loc-page .loc-dir-card:focus-visible > div { outline: 2px solid var(--lp-ink); outline-offset: 2px; }
.loc-page .loc-dir-card .w-12 {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  margin-right: 0.875rem;
  background: var(--lp-ink);
  transition: transform 0.4s var(--lp-ease);
}
.loc-page .loc-dir-card:hover .w-12 { transform: rotate(-10deg) scale(1.06); }
.loc-page .loc-dir-card .w-12 svg { width: 16px; height: 16px; }
.loc-page .loc-dir-card h3 { position: relative; font-size: 1rem; line-height: 1.3; color: var(--lp-text); }
.loc-page .loc-dir-card:hover h3 { color: var(--lp-text); }
.loc-page .loc-dir-card p { position: relative; font-size: 0.78rem; color: var(--lp-soft); }
.loc-page .loc-dir-card.is-enquire > div { background: var(--lp-bg); border-style: dashed; }
.loc-page .loc-dir-card.is-enquire p::after {
  content: " \00B7  Enquire";
  font-weight: 700;
  color: var(--lp-text);
}
.loc-dir-empty {
  margin: 0 0 3rem;
  padding: 2.5rem 1.5rem;
  border: 1px dashed var(--lp-line-2);
  border-radius: 1.25rem;
  text-align: center;
  color: var(--lp-soft);
}
.loc-dir-empty a { color: var(--lp-ink); font-weight: 700; }

/* ---------------- 16. /locations/ featured + CTA ---------------- */

.loc-page .loc-featured { padding: var(--lp-section) 0; background: var(--lp-surface); }
.loc-page .loc-featured .grid { gap: 1rem; }
.loc-page .loc-feat {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-height: 15rem;
  padding: 1.5rem;
  border-radius: 1.25rem;
  background: var(--lp-ink);
  box-shadow: none;
  transition: transform 0.45s var(--lp-ease), box-shadow 0.45s ease;
}
.loc-page .loc-feat::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(16rem circle at var(--mx, 80%) var(--my, 0%), rgba(255, 255, 255, 0.14), transparent 60%),
    linear-gradient(180deg, rgba(10, 10, 11, 0) 30%, rgba(10, 10, 11, 0.85) 100%),
    var(--lp-grid-dark);
  background-size: auto, auto, 36px 36px;
}
.loc-page .loc-feat::after {
  content: "";
  position: absolute;
  top: 1.4rem;
  right: 1.4rem;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E") center / 1rem no-repeat;
  transform: scale(0.85);
  opacity: 0.85;
  transition: transform 0.35s var(--lp-ease), opacity 0.35s ease;
}
.loc-page .loc-feat:hover { transform: translateY(-6px); box-shadow: 0 36px 70px -36px rgba(0, 0, 0, 0.6); }
.loc-page .loc-feat:hover::after { transform: scale(1) rotate(45deg); opacity: 1; }
.loc-page .loc-feat:focus-visible { outline: 2px solid var(--lp-ink); outline-offset: 3px; }
.loc-feat-media { position: absolute; inset: 0; z-index: -2; }
.loc-feat-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.3) brightness(0.98);
  transition: transform 1.1s var(--lp-ease), filter 0.6s ease;
}
.loc-feat:hover .loc-feat-media img { transform: scale(1.07); filter: saturate(1.2) brightness(0.95); }
.loc-page .loc-feat > .text-center { width: 100%; text-align: left; }
.loc-page .loc-feat .w-16 { display: none; }
.loc-page .loc-feat h3 {
  margin-bottom: 0.25rem;
  font-size: clamp(1.4rem, 1.1rem + 0.8vw, 1.85rem);
  letter-spacing: -0.03em;
  color: #fff;
}
.loc-page .loc-feat:hover h3 { color: #fff; }
.loc-page .loc-feat p { color: var(--lp-on-dark-soft); }

.loc-page .loc-cta .max-w-4xl > a {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 3.5rem;
  padding: 0 1.75rem;
  border: 1px solid #fff;
  border-radius: 0.875rem;
  background: #fff;
  color: var(--lp-ink);
  font-weight: 700;
  box-shadow: 0 12px 32px -14px rgba(255, 255, 255, 0.45);
}
.loc-page .loc-cta .max-w-4xl > a svg { width: 20px; height: 20px; margin: 0 !important; }
.loc-page .loc-cta .max-w-4xl > a:hover { background: #fff; transform: translateY(-2px); }

/* ---------------- 17. Responsive / reduced motion (round 2) ---------------- */

@media (max-width: 1023px) {
  .loc-hero-index .loc-hero-inner { grid-template-columns: minmax(0, 1fr); }
  .loc-globe { justify-self: center; width: min(100%, 24rem); margin-top: 0.5rem; }
  .loc-page .loc-hero-index { min-height: 0; }
}
@media (max-width: 767px) {
  .loc-find { height: 3.4rem; }
  .loc-find button { padding: 0 1rem; }
  .loc-dir-bar { top: 3.75rem; padding: 0.7rem; gap: 0.6rem; }
  .loc-dir-az,
  .loc-dir-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .loc-dir-az::-webkit-scrollbar,
  .loc-dir-chips::-webkit-scrollbar { display: none; }
  .loc-dir-chips button { flex: none; }
  .loc-page .loc-feat { min-height: 11rem; }
  .loc-marquee::before,
  .loc-marquee::after { width: 2.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .loc-marquee-track,
  .loc-cta-mark > div { animation: none !important; transform: none !important; }
  html.loc-js [data-lr="words"]:not(.in) .lw > span { transform: none; }
}

/* ---------------- 18. Coexisting with script.js card effects ----------------
   script.js tags content cards with .nx-card / .nx-spot. Its .nx-spot::after
   (inset:0, opacity:0) and a.nx-card (flex column) would otherwise pin the
   arrows/counters here to the left edge and push tile copy to the top. */
.loc-page .loc-feat { flex-direction: column; justify-content: flex-end; align-items: stretch; }
.loc-page .loc-feat::after { left: auto; bottom: auto; }
.loc-page .loc-dir-card > div::after { left: auto; bottom: auto; background: none; }
.loc-page .loc-dir-card:hover > div::after { opacity: 1; }
.loc-page .loc-services .loc-card::after { left: auto; bottom: auto; opacity: 1; background: none; }
.loc-page .loc-intro .loc-ind::after { top: auto; opacity: 1; }
/* Map and directory share a background, so trim the doubled padding between them. */
.loc-page .loc-network { padding-bottom: 3rem; }
.loc-page .loc-directory { padding-top: 3.5rem; }

/* ============================================================
   19. PPC pages (body.loc-page.loc-ppc) — /ppc-for/<industry>/
   Markup hooks from admin-server/scripts/enhance-ppc.js. Everything
   above this section (hero, services cards, FAQ, CTA, reveals) is
   shared with the location pages.
   ============================================================ */

/* Hero ad preview ---------------------------------------------------- */
.loc-ad-result {
  position: relative;
  display: grid;
  gap: 0.35rem;
  margin-bottom: 0.875rem;
  padding: 0.95rem 1rem 1rem;
  border-radius: 0.875rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.28);
  transition: opacity 0.6s ease, transform 0.8s var(--lp-ease);
}
.loc-ad-tag {
  justify-self: start;
  padding: 0.18rem 0.45rem;
  border-radius: 0.35rem;
  background: #fff;
  color: var(--lp-ink);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.loc-ad-result strong { font-size: 0.95rem; color: #fff; }
.loc-ad-result .ln {
  display: block;
  width: 90%;
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.2);
}
.loc-ad-result .ln.s { width: 60%; background: rgba(255, 255, 255, 0.1); }
.loc-ad-btn {
  position: absolute;
  right: 1rem;
  bottom: 0.9rem;
  padding: 0.35rem 0.7rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
}
.loc-ad-chart {
  display: grid;
  gap: 0.6rem;
  padding: 0.9rem 1rem 1rem;
  border-radius: 0.875rem;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.loc-ad-chart > span {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lp-on-dark-soft);
}
.loc-ad-bars { display: flex; align-items: flex-end; gap: 0.45rem; height: 5.5rem; }
.loc-ad-bars i {
  flex: 1;
  height: var(--h);
  border-radius: 0.35rem 0.35rem 0.15rem 0.15rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.25));
  transform-origin: bottom;
  transition: transform 0.9s var(--lp-ease);
  transition-delay: calc(0.5s + var(--b, 0) * 70ms);
}
.loc-serp.is-pre .loc-ad-result { opacity: 0; transform: translate3d(0, 12px, 0); }
.loc-serp.is-pre .loc-ad-bars i { transform: scaleY(0); transition-delay: 0s; }

/* Services band sits flush under the hero */
.loc-page.loc-ppc .loc-marquee { border-top: 0; }

/* Stats band --------------------------------------------------------- */
.loc-page .loc-stats {
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 2rem + 3vw, 4.5rem) 0;
  background: var(--lp-bg);
}
.loc-page .loc-stats .grid { gap: 1rem; }
.loc-page .loc-stats .grid > div {
  position: relative;
  padding: 1.75rem 1.25rem;
  border: 1px solid var(--lp-line);
  border-radius: 1.25rem;
  background: var(--lp-surface);
  box-shadow: none;
  transition: transform 0.35s var(--lp-ease), border-color 0.35s ease, box-shadow 0.35s ease;
}
.loc-page .loc-stats .grid > div:hover {
  transform: translateY(-4px);
  border-color: var(--lp-line-2);
  box-shadow: 0 22px 44px -28px rgba(0, 0, 0, 0.35);
}
.loc-page .loc-stats .text-3xl {
  font-size: clamp(2.25rem, 1.6rem + 2vw, 3rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--lp-text);
  font-variant-numeric: tabular-nums;
}
.loc-page .loc-stats .text-gray-600 { margin-top: 0.4rem; font-size: 0.9rem; color: var(--lp-soft); }

/* "Why … choose us" cards -------------------------------------------- */
.loc-page .loc-why3,
.loc-page .loc-process { padding: var(--lp-section) 0; }
.loc-page :is(.loc-why3, .loc-process, .loc-services) .text-center h2 {
  font-size: clamp(2.1rem, 1.35rem + 2.8vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: var(--lp-text);
  text-wrap: balance;
}
.loc-page :is(.loc-why3, .loc-process, .loc-services) .text-center > p { color: var(--lp-soft); }
.loc-page .loc-why3 .grid { gap: 1.25rem; margin-bottom: 0; }
.loc-page .loc-why3 .grid > div {
  position: relative;
  overflow: hidden;
  padding: 2.25rem 1.75rem;
  border: 1px solid var(--lp-line);
  border-radius: 1.25rem;
  background: var(--lp-surface);
  text-align: left;
  transition: transform 0.4s var(--lp-ease), border-color 0.4s ease, box-shadow 0.4s ease;
}
.loc-page .loc-why3 .grid > div:hover {
  transform: translateY(-5px);
  border-color: rgba(10, 10, 11, 0.25);
  box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.38);
}
.loc-page .loc-why3 .grid > div > div:first-child {
  width: 3.25rem;
  height: 3.25rem;
  margin: 0 0 1.25rem;
  border-radius: 0.95rem;
  background: var(--lp-ink);
  color: #fff;
  transition: transform 0.45s var(--lp-ease);
}
.loc-page .loc-why3 .grid > div > div:first-child svg { color: #fff; stroke: #fff; }
.loc-page .loc-why3 .grid > div:hover > div:first-child { transform: rotate(-8deg) scale(1.06); }
.loc-page .loc-why3 h3 { font-size: 1.25rem; letter-spacing: -0.015em; color: var(--lp-text); }
.loc-page .loc-why3 .grid p { color: var(--lp-soft); line-height: 1.7; }

/* Service cards: bullet lists as tidy rows --------------------------- */
.loc-page .loc-services .loc-card { padding: 2rem 1.75rem; }
.loc-page .loc-services .loc-card h3 { padding-right: 2.5rem; font-size: 1.2rem; letter-spacing: -0.015em; color: var(--lp-text); }
.loc-page .loc-services .loc-card ul {
  display: grid;
  gap: 0.4rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--lp-line);
}
.loc-page .loc-services .loc-card ul > li { margin: 0; color: var(--lp-mid); }

/* Process: connected steps ------------------------------------------- */
.loc-page .loc-process .grid { position: relative; gap: 1.25rem; }
@media (min-width: 768px) {
  .loc-page .loc-process .grid::before {
    content: "";
    position: absolute;
    left: 12.5%;
    right: 12.5%;
    top: 2rem;
    height: 2px;
    background: linear-gradient(90deg, var(--lp-ink), rgba(10, 10, 11, 0.15));
    transform-origin: left;
    transition: transform 1.6s 0.2s var(--lp-ease);
  }
  html.loc-js .loc-page .loc-process .grid:not(.in)::before { transform: scaleX(0); }
}
.loc-page .loc-process .grid > div { position: relative; padding: 0 0.5rem; }
.loc-page .loc-process .grid > div > div:first-child {
  position: relative;
  width: 4rem;
  height: 4rem;
  border: 2px solid var(--lp-ink);
  background: var(--lp-surface);
  box-shadow: 0 0 0 8px var(--lp-surface);
  transition: background-color 0.3s ease, transform 0.4s var(--lp-ease);
}
.loc-page .loc-process .grid > div > div:first-child span { color: var(--lp-ink); transition: color 0.3s ease; }
.loc-page .loc-process .grid > div:hover > div:first-child { background: var(--lp-ink); transform: scale(1.06); }
.loc-page .loc-process .grid > div:hover > div:first-child span { color: #fff; }
.loc-page .loc-process h3 { font-size: 1.15rem; color: var(--lp-text); }
.loc-page .loc-process .grid p { color: var(--lp-soft); }

/* CTA copy on this template sits in .container, not .max-w-4xl */
.loc-page.loc-ppc .loc-cta .container { position: relative; }
.loc-page.loc-ppc .loc-cta .text-green-100,
.loc-page.loc-ppc .loc-cta p { color: var(--lp-on-dark-mid); }

/* PPC headlines are sentence-length ("Dentists PPC Services & Digital Advertising"), so they run smaller than a place name. */
.loc-page .loc-hero-ppc .loc-h1 { font-size: clamp(2.4rem, 1.4rem + 3.2vw, 4.1rem); line-height: 1.04; }
@media (max-width: 767px) { .loc-page .loc-hero-ppc .loc-h1 { font-size: clamp(2.1rem, 9vw, 2.75rem) !important; } }

/* ============================================================
   20. PPC hubs + platform pages (body.loc-ppc-generic)
   enhance-ppc.js moves each page's original hero copy — with its
   old wrappers — into .loc-hero-copy. Flatten those wrappers so the
   copy flows left-aligned like every other hero, then polish the
   sidebar/article/quote-form layout these pages share.
   ============================================================ */

.loc-hero-copy-generic :is(div, section) {
  position: static !important;
  inset: auto !important;
  display: block;
  width: auto;
  max-width: none;
  height: auto;
  margin: 0;
  padding: 0;
  text-align: left !important;
  background: none !important;
  opacity: 1 !important;
}
.loc-hero-copy-generic .loc-ctas { display: flex; }
.loc-hero-copy-generic > * { animation: lpUp 0.9s var(--lp-ease) both; }
.loc-hero-copy-generic > :nth-child(2) { animation-delay: 0.15s; }
.loc-page .loc-hero-copy-generic h1 { color: #fff; }
.loc-page .loc-hero-copy-generic p {
  max-width: 35rem;
  margin: 0 0 2.25rem;
  font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.25rem);
  line-height: 1.65;
  color: var(--lp-on-dark-mid);
  opacity: 1;
}
/* Three-button heroes (the hub): all the same pill style, wrapping neatly. */
.loc-page .loc-hero-copy-generic .loc-ctas > a {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  min-height: 3.5rem;
  padding: 0 1.6rem;
  border-radius: 0.875rem;
  font-size: 1rem;
  font-weight: 700;
  transform: none;
  box-shadow: none;
}
.loc-page .loc-hero-copy-generic .loc-ctas > a:nth-child(3) {
  background: transparent;
  color: var(--lp-on-dark);
  border: 1px solid rgba(255, 255, 255, 0.26);
}
.loc-page .loc-hero-copy-generic .loc-ctas > a:nth-child(3):hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.55); }

/* Old stock hero photos (until each page gets its own): keep them calm. */
.loc-hero-ppc[data-fallback-img] .loc-hero-img { filter: saturate(0.9) brightness(0.85); }

/* Body: sidebar nav, article cards and quote form ------------------- */
.loc-ppc-generic main aside > div,
.loc-ppc-generic main .lg\:col-span-2 > div,
.loc-ppc-generic main .lg\:col-span-2 > section,
.loc-ppc-generic main .lg\:col-span-3 > div,
.loc-ppc-generic main .lg\:col-span-3 > section {
  border: 1px solid var(--lp-line);
  border-radius: 1.25rem !important;
  box-shadow: none !important;
}
.loc-ppc-generic main aside a {
  border-radius: 0.65rem;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.25s var(--lp-ease);
}
.loc-ppc-generic main aside li a:hover { background: var(--lp-bg); color: var(--lp-text); transform: translateX(4px); }
.loc-ppc-generic main :is(h2, h3) { letter-spacing: -0.02em; }
.loc-ppc-generic main [class*="border-b-2"][class*="border-"] { border-color: var(--lp-ink) !important; }
.loc-ppc-generic main :is(.text-purple-600, .text-blue-600, .text-red-600, .text-green-600, .text-pink-600) { color: var(--lp-ink); }
.loc-ppc-generic main input,
.loc-ppc-generic main textarea { border-radius: 0.75rem; transition: box-shadow 0.2s ease; }
.loc-ppc-generic main input:focus,
.loc-ppc-generic main textarea:focus { outline: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35); }

@media (max-width: 1023px) {
  .loc-hero-copy-generic h1 { text-align: left; }
}
.loc-page .loc-hero-copy-generic :is(h1, p) { text-align: left !important; padding-left: 0 !important; padding-right: 0 !important; }