/* ===================================================================
   Local landing pages (city × service) — builds on styles.css tokens.
   Hero entrance is self-contained CSS (no JS dependency); below-fold
   sections use the global [data-reveal] system via script.js.
   =================================================================== */

.local-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line-2);
  padding-top: clamp(124px, 18vh, 200px); padding-bottom: clamp(58px, 8vw, 108px); }
.local-hero .glow { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(58% 48% at 12% -6%, rgba(139,92,246,.20), transparent 68%),
    radial-gradient(46% 44% at 104% 10%, rgba(109,40,217,.16), transparent 70%); }
.local-hero .hgrid { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .55;
  background-image: linear-gradient(var(--line-2) 1px, transparent 1px), linear-gradient(90deg, var(--line-2) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(72% 62% at 50% 0%, #000, transparent 76%);
          mask-image: radial-gradient(72% 62% at 50% 0%, #000, transparent 76%); }
.local-hero .wrap { position: relative; z-index: 1; }

.crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
  font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
.crumb a { color: var(--text-3); }
.crumb a:hover { color: var(--purple-bright); }
.crumb .sep { width: 14px; height: 1px; background: var(--line); display: inline-block; }
.crumb .here { color: var(--text-2); }

.local-hero h1 { margin-top: 26px; font-size: clamp(40px, 7vw, 82px); font-weight: 600;
  letter-spacing: -0.035em; line-height: 1.02; max-width: 15ch; }
.local-hero h1 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--purple-bright); }
.local-hero .lede { margin-top: 26px; font-size: clamp(17px, 2.1vw, 21px); line-height: 1.62; color: var(--text-2); max-width: 56ch; }
.local-hero .cta-row { margin-top: 34px; }
.local-trust { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; font-size: 13.5px; color: var(--text-3); }
.local-trust b { color: var(--text-2); font-weight: 600; }
.local-trust .d { width: 4px; height: 4px; border-radius: 50%; background: var(--purple); opacity: .7; }

/* hero entrance (independent of JS/curtain).
   Base state is VISIBLE — `both` fill holds the hidden frame only while the
   animation is queued/playing, so if animations never run the content still shows. */
.local-hero .crumb, .local-hero h1, .local-hero .lede, .local-hero .cta-row, .local-hero .local-trust {
  animation: lh-in .9s var(--ease) both; }
.local-hero h1 { animation-delay: .07s; }
.local-hero .lede { animation-delay: .16s; }
.local-hero .cta-row { animation-delay: .26s; }
.local-hero .local-trust { animation-delay: .36s; }
@keyframes lh-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* two-column "who we build for" */
.local-two { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px, 5vw, 76px); align-items: center; }
@media (max-width: 860px) { .local-two { grid-template-columns: 1fr; } }
.local-two > div > p { margin-top: 20px; color: var(--text-2); font-size: clamp(16px, 2vw, 18px); line-height: 1.68; max-width: 52ch; }
.local-list { list-style: none; display: grid; gap: 15px; }
.local-list li { display: flex; gap: 13px; align-items: flex-start; color: var(--text-2); font-size: 15.5px; line-height: 1.5; }
.local-list b { color: var(--text); font-weight: 600; }
.local-list .pic { flex: none; width: 24px; height: 24px; border-radius: 8px; background: rgba(139,92,246,.14);
  color: var(--purple-bright); display: grid; place-items: center; margin-top: 1px; }
.local-list .pic svg { width: 13px; height: 13px; }

/* areas we serve — cross-links */
.areas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 42px; }
.area-chip { display: inline-flex; align-items: center; gap: 10px; padding: 13px 18px; border: 1px solid var(--line);
  border-radius: 14px; background: var(--bg-2); color: var(--text); font-weight: 500; font-size: 15px;
  transition: border-color .3s ease, background .3s ease, transform .3s var(--ease); }
.area-chip:hover { border-color: rgba(167,139,250,.5); background: var(--surface); transform: translateY(-2px); }
.area-chip.current { border-color: rgba(167,139,250,.4); color: var(--text-3); pointer-events: none; }
.area-chip svg { width: 14px; height: 14px; color: var(--purple-bright); }

@media (prefers-reduced-motion: reduce) {
  .local-hero .crumb, .local-hero h1, .local-hero .lede, .local-hero .cta-row, .local-hero .local-trust {
    animation: none; opacity: 1; transform: none; }
}