/* /areas-we-serve/ : the home page's visual language (see ls-repairs.css for the shared reveal, progress, marquee and
   counter pieces) with an interactive 3D map, region chips and tilting neighborhood cards.
   Everything that moves animates transform or opacity only. Reduced-motion and touch fallbacks are at the bottom. */

.ar { --ease: cubic-bezier(.16, 1, .3, 1); --ink: #0a0a0a; --paper: #fdfcfb; --purple: #a855f7; }
.ar html, html:has(.ar) { scroll-padding-top: 8.5rem; }

/* ── hero map ── */
.ar .ar-map { position: relative; width: min(100%, 520px); margin-inline: auto; --mx: 0; --my: 0; --rx: 9deg; --ry: -7deg; }
.ar .ar-map__glow { position: absolute; inset: 10% 6%; border-radius: 9999px; background: linear-gradient(135deg, #a855f7, #ec4899 50%, #3b82f6); filter: blur(70px); opacity: .28; }
.ar .ar-map__plate {
  position: relative; aspect-ratio: 600 / 570; border-radius: 2rem; background: #fff;
  border: 1px solid rgba(10, 10, 10, .08);
  background-image: linear-gradient(rgba(10, 10, 10, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(10, 10, 10, .045) 1px, transparent 1px);
  background-size: 2.25rem 2.25rem;
  box-shadow: 0 9px 0 -1px rgba(10, 10, 10, .07), 0 18px 0 -3px rgba(10, 10, 10, .04), 0 46px 70px -26px rgba(88, 28, 135, .45);   /* stacked plate edges read as thickness */
  transform: perspective(1200px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .6s var(--ease);
  animation: arPlateIn 1.1s var(--ease) .5s both;
}
.ar .ar-map.is-live .ar-map__plate { transition: transform .12s linear; }
@keyframes arPlateIn { from { opacity: 0; transform: perspective(1200px) rotateX(46deg) rotateY(0deg) translateY(36px); } to { opacity: 1; } }
.ar .ar-map__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; border-radius: inherit; }
.ar .ar-layer { transition: transform .6s var(--ease); }
.ar .ar-layer--rings { transform: translate3d(calc(var(--mx) * -9px), calc(var(--my) * -6px), 0); }
.ar .ar-layer--roads { transform: translate3d(calc(var(--mx) * 7px), calc(var(--my) * 5px), 0); }
.ar .ar-layer--rings ellipse { fill: rgba(168, 85, 247, .035); stroke: rgba(168, 85, 247, .5); stroke-width: 1.6; stroke-dasharray: 4 7; }
.ar .ar-layer--roads path { fill: none; stroke: rgba(10, 10, 10, .26); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.ar .ar-layer--roads text { fill: rgba(10, 10, 10, .55); font: 700 11px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; }

.ar .ar-home { position: absolute; z-index: 2; transform: translate(-50%, -50%); width: 14px; height: 14px; pointer-events: none; }
.ar .ar-home i { position: absolute; inset: 0; border-radius: 9999px; background: var(--purple); box-shadow: 0 0 14px rgba(168, 85, 247, .8); }
.ar .ar-home i::after { content: ""; position: absolute; inset: -6px; border-radius: 9999px; border: 1px solid rgba(168, 85, 247, .5); animation: rpPing 2.4s ease-out infinite; }
.ar .ar-home b { position: absolute; top: 120%; left: 50%; transform: translateX(-50%); font: 800 10px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; color: rgba(10, 10, 10, .65); }

.ar .ar-pins { position: absolute; inset: 0; z-index: 3; }
.ar .ar-pin {
  position: absolute; transform: translate(-50%, -50%); width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center; -webkit-tap-highlight-color: transparent;
  animation: arPinIn .6s var(--ease) both; animation-delay: calc(var(--i) * 45ms + 900ms);
}
@keyframes arPinIn { from { opacity: 0; transform: translate(-50%, -50%) translateY(-18px) scale(.4); } to { opacity: 1; } }
.ar .ar-pin__dot {
  display: block; width: 13px; height: 13px; border-radius: 9999px; background: var(--ink); border: 2px solid var(--paper);
  box-shadow: 0 3px 8px rgba(10, 10, 10, .35); transition: scale .3s var(--ease), background .25s;
  animation: arFloat 4.2s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -310ms); animation-play-state: paused;
}
.ar .ar-map.is-live .ar-pin__dot { animation-play-state: running; }
@keyframes arFloat { from { translate: 0 -2px; } to { translate: 0 3px; } }
.ar .ar-pin:hover .ar-pin__dot, .ar .ar-pin:focus-visible .ar-pin__dot { scale: 1.55; background: var(--purple); }
.ar .ar-pin:focus-visible { outline: 3px solid var(--purple); outline-offset: -4px; border-radius: 9999px; }
.ar .ar-pin.is-active .ar-pin__dot { scale: 1.8; background: var(--purple); box-shadow: 0 0 0 5px rgba(168, 85, 247, .25), 0 6px 14px rgba(88, 28, 135, .5); }
.ar .ar-pin.is-active { z-index: 2; }
.ar .ar-pin__tip {
  position: absolute; bottom: 62%; left: 50%; transform: translate(-50%, 6px); opacity: 0; pointer-events: none; white-space: nowrap; z-index: 4;
  padding: .3rem .6rem; border-radius: .5rem; background: var(--ink); color: #fff; font: 700 .6875rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .1em; text-transform: uppercase; transition: opacity .2s, transform .25s var(--ease);
}
.ar .ar-pin:hover .ar-pin__tip, .ar .ar-pin:focus-visible .ar-pin__tip, .ar .ar-pin.is-active .ar-pin__tip { opacity: 1; transform: translate(-50%, 0); }

.ar .ar-pick {
  margin-top: 1.5rem; min-height: 9.5rem; padding: 1.25rem 1.4rem; border-radius: 1.5rem; background: #fff; border: 1px solid rgba(10, 10, 10, .08);
  box-shadow: 0 18px 40px -22px rgba(88, 28, 135, .4);
}
.ar .ar-pick__hint { margin: 0; font: 700 .75rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; text-transform: uppercase; color: rgba(10, 10, 10, .6); }
.ar .ar-pick__body { animation: arPickIn .45s var(--ease) both; }
@keyframes arPickIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.ar .ar-pick__zip { margin: 0; font: 700 .75rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; color: rgba(10, 10, 10, .6); }
.ar .ar-pick__name { margin: .15rem 0 .4rem; font-size: 1.75rem; line-height: 1; font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: -.03em; }
.ar .ar-pick__text { margin: 0 0 .75rem; font-size: .9375rem; line-height: 1.55; color: rgba(10, 10, 10, .72); }
.ar .ar-pick__go { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; font: 800 .75rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); text-decoration: underline; text-decoration-color: var(--purple); text-underline-offset: 5px; }
.ar .ar-pick__go:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; }
.ar .ar-map__note { margin: .75rem 0 0; text-align: center; font: 600 .6875rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; color: rgba(10, 10, 10, .55); }

/* ── region chips (sticky, scroll-spy) ── */
.ar .ar-chips { position: sticky; top: 5rem; z-index: 30; margin-top: 3.5rem; background: rgba(253, 252, 251, .92); border-block: 1px solid rgba(10, 10, 10, .06); }
@media (min-width: 1024px) { .ar .ar-chips { top: 6rem; padding-left: 8rem; } }
.ar .ar-chips__inner { display: flex; gap: .5rem; overflow-x: auto; padding: .75rem 1.5rem; max-width: 80rem; margin-inline: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ar .ar-chips__inner::-webkit-scrollbar { display: none; }
.ar .ar-chips a {
  flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.1rem; border-radius: 9999px; border: 1px solid rgba(10, 10, 10, .14);
  font: 800 .6875rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); text-decoration: none; background: #fff;
  transition: background .25s, color .25s, border-color .25s, transform .25s var(--ease);
}
.ar .ar-chips a:hover { border-color: var(--purple); }
.ar .ar-chips a[aria-current="true"] { background: var(--ink); color: #fff; border-color: var(--ink); transform: translateY(-1px); }
.ar .ar-chips a:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }

/* ── regions and cards ── */
.ar .ar-region { padding-block: 4rem 1rem; scroll-margin-top: 9rem; }
.ar .ar-region__head { margin-bottom: 2.25rem; max-width: 46rem; }
.ar .ar-mono { margin: 0 0 .9rem; font: 700 .75rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .14em; text-transform: uppercase; color: rgba(10, 10, 10, .6); }
.ar .ar-lede { margin: 1rem 0 0; font-size: 1.0625rem; line-height: 1.6; color: rgba(10, 10, 10, .7); }
.ar .ar-grid { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); list-style: none; margin: 0; padding: 0; }
@media (min-width: 640px) { .ar .ar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ar .ar-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } }
.ar .ar-grid > li { min-width: 0; }
.ar .ar-grid > li:nth-child(3n + 2) [data-reveal] { transition-delay: .12s; }
.ar .ar-grid > li:nth-child(3n + 3) [data-reveal] { transition-delay: .24s; }

.ar .ar-town {
  position: relative; display: flex; flex-direction: column; height: 100%; min-height: 15rem; padding: 1.5rem; overflow: hidden; border-radius: 1.75rem;
  background: #fff; border: 1px solid rgba(10, 10, 10, .08); color: inherit; text-decoration: none;
  box-shadow: 0 20px 44px -26px rgba(88, 28, 135, .35);
  transform: perspective(1000px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); transition: transform .5s var(--ease), box-shadow .4s var(--ease), border-color .3s;
}
.ar .ar-town.is-tilting { transition: transform .08s linear, box-shadow .4s var(--ease), border-color .3s; }
.ar a.ar-town:hover { border-color: rgba(168, 85, 247, .5); box-shadow: 0 30px 60px -24px rgba(88, 28, 135, .5); }
.ar a.ar-town:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; }
.ar .ar-town__zip { font: 700 .75rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; color: rgba(10, 10, 10, .6); }
.ar .ar-town__name { margin: .5rem 0 .75rem; font-size: 1.75rem; line-height: 1; font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: -.03em; }
.ar .ar-town__text { margin: 0; flex: 1; font-size: .95rem; line-height: 1.6; color: rgba(10, 10, 10, .72); }
.ar .ar-town__go { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.1rem; font: 800 .6875rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.ar .ar-town__go svg { transition: transform .3s var(--ease); flex: none; }
.ar a.ar-town:hover .ar-town__go svg { transform: translateX(5px); }
.ar .ar-glare { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(168, 85, 247, .16), transparent 55%); }
.ar .ar-town:hover .ar-glare { opacity: 1; }
.ar .ar-job__where { margin: -.25rem 0 .6rem; font-weight: 700; font-size: .9375rem; }
.ar .ar-job__where a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--purple); text-underline-offset: 4px; }

/* ── how it works ── */
.ar .ar-steps { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); list-style: none; margin: 0; padding: 0; }
@media (min-width: 768px) { .ar .ar-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } }
.ar .ar-steps li { padding: 1.75rem; border-radius: 1.75rem; background: var(--paper); border: 1px solid rgba(10, 10, 10, .08); }
.ar .ar-step__n { display: block; font-size: 4rem; line-height: .9; font-weight: 900; font-style: italic; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 2px var(--purple); }
.ar .ar-steps h3 { margin: .75rem 0 .4rem; font-size: 1.25rem; font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; }
.ar .ar-steps p { margin: 0; line-height: 1.6; color: rgba(10, 10, 10, .72); }

/* ── reviews ── */
.ar .ar-review { height: 100%; margin: 0; padding: 1.5rem; border-radius: 1.75rem; background: #fff; border: 1px solid rgba(10, 10, 10, .08); box-shadow: 0 20px 44px -26px rgba(88, 28, 135, .3); }
.ar .ar-review__top { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.ar .ar-review__top time { margin-left: auto; font: 700 .75rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; color: rgba(10, 10, 10, .6); }
.ar .ar-review__av { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 9999px; background: var(--ink); color: #fff; font-weight: 900; font-size: 1.1rem; flex: none; }
.ar .ar-review figcaption { font-weight: 800; }
.ar .ar-review__stars { display: block; color: #7e22ce; font-size: .95rem; line-height: 1; margin-top: .2rem; letter-spacing: .05em; }
.ar .ar-dim { color: rgba(10, 10, 10, .2); }
.ar .ar-review blockquote { margin: 0; line-height: 1.65; color: rgba(10, 10, 10, .8); }
.ar .ar-link { font-weight: 800; color: var(--ink); text-decoration: underline; text-decoration-color: var(--purple); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.ar .ar-link--light { color: #fff; }
.ar .ar-link:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; }

/* ── FAQ ── */
.ar .ar-faq { border-radius: 1.5rem; background: #fff; border: 1px solid rgba(10, 10, 10, .08); overflow: hidden; }
.ar .ar-faq summary { position: relative; display: flex; align-items: center; min-height: 3.5rem; padding: 1rem 3.5rem 1rem 1.5rem; font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: -.02em; cursor: pointer; list-style: none; }
.ar .ar-faq summary::-webkit-details-marker { display: none; }
.ar .ar-faq summary::after { content: "+"; position: absolute; right: 1.5rem; top: 50%; translate: 0 -50%; font-size: 1.5rem; line-height: 1; font-style: normal; color: var(--purple); transition: rotate .3s var(--ease); }
.ar .ar-faq[open] summary { background: var(--ink); color: #fff; }
.ar .ar-faq[open] summary::after { rotate: 45deg; }
.ar .ar-faq summary:focus-visible { outline: 3px solid var(--purple); outline-offset: -3px; }
.ar .ar-faq p { margin: 0; padding: 1.25rem 1.5rem 1.5rem; line-height: 1.65; color: rgba(10, 10, 10, .75); border-top: 1px solid rgba(10, 10, 10, .06); }

/* ── touch: no hover, so no tilt ── */
@media (hover: none) {
  .ar .ar-town { transform: none; }
  .ar .ar-glare { display: none; }
}

/* ── reduced motion: flat map, everything visible, nothing moves ── */
@media (prefers-reduced-motion: reduce) {
  .ar .ar-map__plate, .ar .ar-pin, .ar .ar-pick__body { animation: none !important; transform: none !important; opacity: 1 !important; }
  .ar .ar-map__plate { transition: none !important; }
  .ar .ar-pin { transform: translate(-50%, -50%) !important; }
  .ar .ar-pin__dot, .ar .ar-home i::after { animation: none !important; }
  .ar .ar-layer { transform: none !important; transition: none !important; }
  .ar .ar-town, .ar .ar-town.is-tilting { transform: none !important; transition: none !important; }
  .ar .ar-glare { display: none; }
  .ar .ar-chips a { transition: none; }
}