/* ==========================================================================
   Hero Illustrations - Locations
   Unique CSS Art for Each Service Area - Luxury & Professional
   ========================================================================== */

/* ===== LONG ISLAND - NASSAU COUNTY ===== */

/* Nassau County Default - LI shape with pin */
.hi-nassau .hi-island {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-nassau .hi-li-shape {
  width: 180px; height: 60px;
  background: linear-gradient(90deg, var(--hi-secondary), var(--hi-primary));
  border-radius: 30px 100px 80px 20px;
  position: relative;
}
.hi-nassau .hi-pin-nassau {
  position: absolute; top: -20px; left: 30%;
  animation: hi-float 2s ease-in-out infinite;
}
.hi-nassau .hi-pin-nassau::before {
  content: '📍'; font-size: 2rem;
}
.hi-nassau .hi-wave {
  position: absolute; bottom: -20px; left: 0; right: 0;
  height: 20px; background: linear-gradient(90deg, #3b82f6, #0ea5e9, #3b82f6);
  border-radius: 50%;
}

/* Garden City - Garden/flowers aesthetic */
.hi-garden-city .hi-garden {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-garden-city .hi-garden-gate {
  width: 120px; height: 140px; border: 6px solid var(--hi-gold);
  border-radius: 60px 60px 0 0; position: relative;
}
.hi-garden-city .hi-gate-bars {
  display: flex; justify-content: space-around; height: 100%; padding: 20px 10px;
}
.hi-garden-city .hi-gate-bar {
  width: 4px; background: var(--hi-gold); border-radius: 2px;
}
.hi-garden-city .hi-flowers-gc {
  position: absolute; bottom: 10%; display: flex; gap: 15px;
}
.hi-garden-city .hi-flower-gc { font-size: 2rem; }

/* Great Neck - Waterfront mansion */
.hi-great-neck .hi-mansion {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-great-neck .hi-mansion-body {
  width: 140px; height: 80px; background: var(--hi-glass);
  border-radius: 8px; position: relative;
}
.hi-great-neck .hi-mansion-roof {
  width: 160px; height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 40px solid var(--hi-secondary);
  margin: 0 auto -5px;
}
.hi-great-neck .hi-columns {
  display: flex; justify-content: space-around; padding: 10px;
}
.hi-great-neck .hi-column {
  width: 12px; height: 60px; background: white; border-radius: 6px;
}
.hi-great-neck .hi-water-gn {
  position: absolute; bottom: 10%; left: 0; right: 0;
  height: 30px; background: linear-gradient(180deg, rgba(59,130,246,0.3), rgba(59,130,246,0.1));
  border-radius: 50%;
}

/* Massapequa - Beach/nautical */
.hi-massapequa .hi-beach {
  position: absolute; inset: 15%;
  animation: hi-float 4s ease-in-out infinite;
}
.hi-massapequa .hi-sand {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 40%; background: linear-gradient(180deg, #fcd34d, #fbbf24);
  border-radius: 50% 50% 0 0;
}
.hi-massapequa .hi-ocean {
  position: absolute; top: 0; left: 0; right: 0;
  height: 60%; background: linear-gradient(180deg, #0ea5e9, #3b82f6);
}
.hi-massapequa .hi-umbrella {
  position: absolute; bottom: 30%; left: 30%;
  font-size: 3rem;
}
.hi-massapequa .hi-sailboat {
  position: absolute; top: 20%; right: 20%;
  font-size: 2rem; animation: hi-float 3s ease-in-out infinite;
}

/* Rockville Centre - Downtown charm */
.hi-rockville .hi-downtown {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: flex; gap: 8px; align-items: flex-end;
  animation: hi-float 4s ease-in-out infinite;
}
.hi-rockville .hi-building-rv {
  background: var(--hi-glass); border-radius: 8px 8px 0 0;
}
.hi-rockville .hi-building-rv:nth-child(1) { width: 40px; height: 80px; }
.hi-rockville .hi-building-rv:nth-child(2) { width: 50px; height: 100px; background: var(--hi-primary); }
.hi-rockville .hi-building-rv:nth-child(3) { width: 35px; height: 70px; }
.hi-rockville .hi-building-rv:nth-child(4) { width: 45px; height: 90px; }
.hi-rockville .hi-windows-rv {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; padding: 8px;
}
.hi-rockville .hi-window-rv {
  width: 10px; height: 12px; background: rgba(255,255,255,0.3);
  border-radius: 2px;
}
.hi-rockville .hi-lamppost {
  position: absolute; bottom: 5%; left: 10%;
  font-size: 2rem;
}

/* Long Beach - Boardwalk */
.hi-long-beach .hi-boardwalk {
  position: absolute; inset: 15%;
  animation: hi-float 4s ease-in-out infinite;
}
.hi-long-beach .hi-boards {
  position: absolute; bottom: 20%; left: 10%; right: 10%;
  height: 30px; background: repeating-linear-gradient(90deg, #92400e, #92400e 20px, #78350f 20px, #78350f 22px);
  border-radius: 4px;
}
.hi-long-beach .hi-ocean-lb {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 40%; background: linear-gradient(180deg, #0ea5e9, #0284c7);
  border-radius: 50% 50% 0 0;
}
.hi-long-beach .hi-sun-lb {
  position: absolute; top: 10%; right: 20%;
  font-size: 3rem; color: #fbbf24;
  animation: hi-pulse 3s ease-in-out infinite;
}
.hi-long-beach .hi-seagull {
  position: absolute; top: 25%; left: 20%;
  font-size: 1.5rem; animation: hi-float 2s ease-in-out infinite;
}

/* ===== LONG ISLAND - SUFFOLK COUNTY ===== */

/* Suffolk Default - Eastern LI with lighthouse */
.hi-suffolk .hi-lighthouse {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-suffolk .hi-tower {
  width: 40px; height: 100px;
  background: repeating-linear-gradient(180deg, white, white 15px, #ef4444 15px, #ef4444 30px);
  border-radius: 8px 8px 0 0;
}
.hi-suffolk .hi-light-top {
  width: 50px; height: 30px; background: #fbbf24;
  border-radius: 8px; margin: 0 auto -5px;
  box-shadow: 0 0 30px rgba(251,191,36,0.6);
}
.hi-suffolk .hi-base-lh {
  width: 60px; height: 20px; background: #64748b;
  border-radius: 4px; margin: 0 auto;
}
.hi-suffolk .hi-rocks {
  display: flex; gap: 4px; justify-content: center; margin-top: 5px;
}
.hi-suffolk .hi-rock {
  width: 20px; height: 15px; background: #64748b; border-radius: 50%;
}

/* Huntington - Arts & culture */
.hi-huntington .hi-arts {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-huntington .hi-theater {
  width: 140px; height: 100px; background: var(--hi-glass);
  border-radius: 70px 70px 8px 8px;
}
.hi-huntington .hi-curtains {
  display: flex; justify-content: space-between; height: 80px; padding: 10px 15px;
}
.hi-huntington .hi-curtain {
  width: 30px; background: #dc2626;
  border-radius: 0 0 15px 15px;
}
.hi-huntington .hi-stage {
  height: 20px; background: #78350f; border-radius: 0 0 8px 8px;
}
.hi-huntington .hi-spotlight {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 40px; height: 60px;
  background: linear-gradient(180deg, #fbbf24, transparent);
  clip-path: polygon(30% 0%, 70% 0%, 100% 100%, 0% 100%);
  opacity: 0.5;
}

/* Southampton - Hamptons luxury */
.hi-southampton .hi-hamptons {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-southampton .hi-estate {
  width: 160px; height: 80px; background: white;
  border-radius: 8px;
}
.hi-southampton .hi-estate-roof {
  width: 180px; height: 40px;
  background: #64748b; border-radius: 4px;
  margin: 0 auto -10px;
  clip-path: polygon(10% 100%, 50% 0%, 90% 100%);
}
.hi-southampton .hi-estate-details {
  display: flex; justify-content: center; gap: 20px; padding: 15px;
}
.hi-southampton .hi-estate-window {
  width: 25px; height: 35px; background: rgba(59,130,246,0.3);
  border-radius: 4px; border: 2px solid #e5e7eb;
}
.hi-southampton .hi-hedge {
  width: 140px; height: 20px; background: #22c55e;
  border-radius: 10px; margin: 10px auto 0;
}
.hi-southampton .hi-luxury-car {
  position: absolute; bottom: 10%; right: 10%; font-size: 1.5rem;
}

/* Montauk - The End */
.hi-montauk .hi-point {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-montauk .hi-montauk-lighthouse {
  width: 30px; height: 80px;
  background: linear-gradient(180deg, #78350f, #92400e);
  border-radius: 6px 6px 0 0;
}
.hi-montauk .hi-light-mtk {
  width: 40px; height: 25px; background: #fbbf24;
  border-radius: 6px; margin: 0 auto -5px;
  box-shadow: 0 0 40px rgba(251,191,36,0.8);
  animation: hi-pulse 2s ease-in-out infinite;
}
.hi-montauk .hi-cliff {
  width: 120px; height: 40px; background: #78350f;
  border-radius: 60px 60px 0 0; margin-top: 10px;
}
.hi-montauk .hi-waves-mtk {
  position: absolute; bottom: 5%; left: 0; right: 0;
  font-size: 2rem; color: #3b82f6;
}
.hi-montauk .hi-sunrise {
  position: absolute; top: 10%; right: 15%;
  width: 50px; height: 50px;
  background: linear-gradient(180deg, #fbbf24, #f97316);
  border-radius: 50%;
  box-shadow: 0 0 30px rgba(251,191,36,0.5);
}

/* ===== NEW YORK CITY ===== */

/* Manhattan - Skyline */
.hi-manhattan .hi-skyline {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: flex; gap: 6px; align-items: flex-end;
  animation: hi-float 4s ease-in-out infinite;
}
.hi-manhattan .hi-skyscraper {
  background: var(--hi-glass); border-radius: 4px 4px 0 0;
  position: relative;
}
.hi-manhattan .hi-skyscraper:nth-child(1) { width: 25px; height: 80px; }
.hi-manhattan .hi-skyscraper:nth-child(2) { width: 30px; height: 120px; }
.hi-manhattan .hi-skyscraper:nth-child(3) { width: 35px; height: 160px; background: var(--hi-secondary); }
.hi-manhattan .hi-skyscraper:nth-child(4) { width: 28px; height: 100px; }
.hi-manhattan .hi-skyscraper:nth-child(5) { width: 32px; height: 140px; }
.hi-manhattan .hi-empire {
  position: absolute; top: -20px; left: 50%; transform: translateX(-50%);
  width: 10px; height: 30px; background: var(--hi-secondary);
}
.hi-manhattan .hi-lights {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; padding: 5px;
}
.hi-manhattan .hi-light-win {
  width: 6px; height: 8px; background: rgba(251,191,36,0.6);
}
.hi-manhattan .hi-taxi {
  position: absolute; bottom: 5%; left: 20%; font-size: 1.5rem;
}

/* Brooklyn - Bridge */
.hi-brooklyn .hi-bridge {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-brooklyn .hi-tower-br {
  width: 30px; height: 100px; background: #78350f;
  border-radius: 4px; position: relative;
}
.hi-brooklyn .hi-tower-br::before {
  content: ''; position: absolute; top: 10px; left: 5px;
  width: 20px; height: 30px; background: rgba(255,255,255,0.3);
  border-radius: 10px 10px 0 0;
}
.hi-brooklyn .hi-cables {
  position: absolute; top: 20px; left: -50px; right: -50px;
  height: 60px; border: 3px solid #64748b;
  border-radius: 0 0 100px 100px; border-top: none;
}
.hi-brooklyn .hi-road-br {
  position: absolute; bottom: 0; left: -60px; right: -60px;
  height: 15px; background: #374151;
}
.hi-brooklyn .hi-pizza {
  position: absolute; bottom: 20%; right: 10%; font-size: 2rem;
}

/* Queens - Diverse culture */
.hi-queens .hi-diversity {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-queens .hi-globe {
  width: 100px; height: 100px; background: linear-gradient(180deg, #3b82f6, #22c55e);
  border-radius: 50%; position: relative; overflow: hidden;
}
.hi-queens .hi-continents {
  position: absolute; inset: 10px;
  background: radial-gradient(circle at 30% 40%, #22c55e 20%, transparent 20%),
              radial-gradient(circle at 70% 30%, #22c55e 15%, transparent 15%),
              radial-gradient(circle at 50% 70%, #22c55e 25%, transparent 25%);
}
.hi-queens .hi-globe-lines {
  position: absolute; inset: 0;
  border: 2px solid rgba(255,255,255,0.2);
  border-radius: 50%;
}
.hi-queens .hi-flags {
  position: absolute; bottom: 10%; display: flex; gap: 10px;
  font-size: 1.5rem;
}
.hi-queens .hi-airplane {
  position: absolute; top: 10%; right: 10%; font-size: 2rem;
  animation: hi-float 2s ease-in-out infinite;
}

/* Bronx - Yankees/Zoo */
.hi-bronx .hi-bronx-icons {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-bronx .hi-baseball {
  width: 80px; height: 80px; background: white;
  border-radius: 50%; position: relative;
  border: 3px solid #ef4444;
}
.hi-bronx .hi-baseball::before {
  content: ''; position: absolute; top: 10px; left: 50%;
  transform: translateX(-50%);
  width: 50px; height: 60px;
  border: 3px solid #ef4444; border-radius: 50%;
  border-top-color: transparent; border-bottom-color: transparent;
}
.hi-bronx .hi-ny-logo {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-weight: bold; color: #1e3a8a; font-size: 1.5rem;
}
.hi-bronx .hi-bat {
  position: absolute; bottom: 20%; left: 10%;
  width: 80px; height: 12px; background: #92400e;
  border-radius: 6px; transform: rotate(-30deg);
}

/* Staten Island - Ferry */
.hi-staten .hi-ferry {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-staten .hi-boat {
  width: 140px; height: 50px; background: #f97316;
  border-radius: 0 0 20px 20px;
}
.hi-staten .hi-cabin {
  width: 100px; height: 40px; background: white;
  border-radius: 8px; margin: -30px auto 0;
}
.hi-staten .hi-cabin-windows {
  display: flex; gap: 8px; padding: 10px; justify-content: center;
}
.hi-staten .hi-cabin-window {
  width: 15px; height: 15px; background: #3b82f6;
  border-radius: 4px;
}
.hi-staten .hi-smokestack {
  width: 15px; height: 25px; background: #333;
  margin: -35px 20px 0 auto;
}
.hi-staten .hi-wake {
  position: absolute; bottom: -10px; left: 0; right: 0;
  height: 20px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  border-radius: 50%;
}

/* ===== WESTCHESTER ===== */

/* White Plains - Business district */
.hi-white-plains .hi-business {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: flex; gap: 10px; align-items: flex-end;
  animation: hi-float 4s ease-in-out infinite;
}
.hi-white-plains .hi-office {
  background: var(--hi-glass); border-radius: 8px 8px 0 0;
}
.hi-white-plains .hi-office:nth-child(1) { width: 40px; height: 100px; }
.hi-white-plains .hi-office:nth-child(2) { width: 50px; height: 130px; background: var(--hi-primary); }
.hi-white-plains .hi-office:nth-child(3) { width: 45px; height: 110px; }
.hi-white-plains .hi-briefcase-wp {
  position: absolute; bottom: 5%; left: 15%; font-size: 2rem;
}
.hi-white-plains .hi-train-wp {
  position: absolute; bottom: 5%; right: 15%; font-size: 1.5rem;
}

/* Scarsdale - Upscale residential */
.hi-scarsdale .hi-estate-sc {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-scarsdale .hi-manor {
  width: 160px; height: 100px; background: #fef3c7;
  border-radius: 8px; position: relative;
}
.hi-scarsdale .hi-manor-roof {
  width: 180px; height: 50px; background: #78350f;
  clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
  margin: 0 auto -10px;
}
.hi-scarsdale .hi-manor-windows {
  display: flex; justify-content: space-around; padding: 20px;
}
.hi-scarsdale .hi-manor-window {
  width: 30px; height: 40px; background: rgba(59,130,246,0.3);
  border: 3px solid #fef3c7; border-radius: 15px 15px 0 0;
}
.hi-scarsdale .hi-fountain {
  position: absolute; bottom: 5%; left: 50%; transform: translateX(-50%);
  font-size: 1.5rem;
}
.hi-scarsdale .hi-tree-sc {
  position: absolute; font-size: 2rem;
}
.hi-scarsdale .hi-tree-sc:nth-child(5) { bottom: 15%; left: 5%; }
.hi-scarsdale .hi-tree-sc:nth-child(6) { bottom: 15%; right: 5%; }

/* ===== NEW JERSEY ===== */

/* Jersey City - NYC skyline view */
.hi-jersey-city .hi-jc-view {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-jersey-city .hi-waterfront {
  width: 180px; height: 40px; background: linear-gradient(180deg, #3b82f6, #0ea5e9);
  border-radius: 8px;
}
.hi-jersey-city .hi-jc-buildings {
  display: flex; gap: 5px; align-items: flex-end; justify-content: center;
  margin-bottom: 10px;
}
.hi-jersey-city .hi-jc-building {
  background: var(--hi-glass); border-radius: 4px 4px 0 0;
}
.hi-jersey-city .hi-jc-building:nth-child(1) { width: 25px; height: 60px; }
.hi-jersey-city .hi-jc-building:nth-child(2) { width: 30px; height: 90px; background: var(--hi-primary); }
.hi-jersey-city .hi-jc-building:nth-child(3) { width: 35px; height: 70px; }
.hi-jersey-city .hi-jc-building:nth-child(4) { width: 28px; height: 80px; }
.hi-jersey-city .hi-nyc-bg {
  position: absolute; top: 10%; right: 5%;
  opacity: 0.3; font-size: 0.8rem;
}

/* Hoboken - Mile Square City */
.hi-hoboken .hi-brownstones {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: flex; gap: 5px;
  animation: hi-float 4s ease-in-out infinite;
}
.hi-hoboken .hi-brownstone {
  width: 40px; height: 80px; background: #92400e;
  border-radius: 4px 4px 0 0; position: relative;
}
.hi-hoboken .hi-brownstone-steps {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 15px; height: 10px; background: #78350f;
}
.hi-hoboken .hi-bs-windows {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px;
  padding: 8px;
}
.hi-hoboken .hi-bs-window {
  width: 10px; height: 15px; background: rgba(255,255,255,0.4);
  border-radius: 5px 5px 0 0;
}
.hi-hoboken .hi-path-hob {
  position: absolute; bottom: 5%; left: 0; right: 0;
  height: 15px; background: #22c55e; border-radius: 8px;
}
.hi-hoboken .hi-runner {
  position: absolute; bottom: 10%; right: 15%; font-size: 1.5rem;
}

/* Princeton - University */
.hi-princeton .hi-university {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-princeton .hi-nassau-hall {
  width: 160px; height: 80px; background: #f97316;
  border-radius: 8px; position: relative;
}
.hi-princeton .hi-cupola {
  width: 40px; height: 50px; background: #f97316;
  margin: 0 auto -10px; border-radius: 4px;
  position: relative;
}
.hi-princeton .hi-dome {
  width: 50px; height: 25px; background: #f97316;
  border-radius: 25px 25px 0 0; margin: 0 auto -5px;
}
.hi-princeton .hi-spire {
  width: 8px; height: 30px; background: #f97316;
  margin: 0 auto;
}
.hi-princeton .hi-ivy {
  position: absolute; top: 20px; left: 10px;
  font-size: 1.5rem; color: #22c55e;
}
.hi-princeton .hi-tiger {
  position: absolute; bottom: 10%; right: 10%;
  font-size: 2rem;
}

/* ===== CONNECTICUT ===== */

/* Stamford - Corporate HQ */
.hi-stamford .hi-corporate {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-stamford .hi-hq {
  width: 80px; height: 140px; background: linear-gradient(180deg, var(--hi-glass), var(--hi-secondary));
  border-radius: 8px; position: relative;
}
.hi-stamford .hi-hq-windows {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  padding: 10px;
}
.hi-stamford .hi-hq-window {
  width: 15px; height: 20px; background: rgba(59,130,246,0.4);
}
.hi-stamford .hi-logo-hq {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  width: 30px; height: 10px; background: var(--hi-primary);
}
.hi-stamford .hi-chart-st {
  position: absolute; bottom: 10%; right: 10%;
  font-size: 2rem;
}
.hi-stamford .hi-train-st {
  position: absolute; bottom: 5%; left: 10%;
  font-size: 1.5rem;
}

/* Greenwich - Gold Coast wealth */
.hi-greenwich .hi-gold-coast {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-greenwich .hi-yacht {
  width: 140px; height: 50px; position: relative;
}
.hi-greenwich .hi-yacht-hull {
  width: 140px; height: 30px; background: white;
  border-radius: 0 0 30px 30px;
}
.hi-greenwich .hi-yacht-cabin {
  width: 60px; height: 25px; background: white;
  border-radius: 8px; margin: -20px auto 0;
}
.hi-greenwich .hi-yacht-mast {
  width: 4px; height: 60px; background: #64748b;
  margin: -45px auto 0;
}
.hi-greenwich .hi-sail {
  position: absolute; top: -55px; left: 55%;
  width: 0; height: 0;
  border-left: 40px solid rgba(255,255,255,0.8);
  border-top: 50px solid transparent;
  border-bottom: 10px solid transparent;
}
.hi-greenwich .hi-water-gr {
  position: absolute; bottom: -10%; left: 0; right: 0;
  height: 30px; background: linear-gradient(180deg, rgba(59,130,246,0.3), rgba(59,130,246,0.1));
  border-radius: 50%;
}
.hi-greenwich .hi-coin {
  position: absolute; top: 10%; right: 10%;
  font-size: 2.5rem; color: var(--hi-gold);
}

/* New Haven - Yale */
.hi-new-haven .hi-yale {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-new-haven .hi-harkness {
  width: 50px; height: 120px; background: #64748b;
  border-radius: 4px; position: relative;
}
.hi-new-haven .hi-clock-tower {
  width: 35px; height: 35px; background: white;
  border-radius: 50%; margin: 20px auto;
  border: 3px solid #1e3a8a;
  display: flex; align-items: center; justify-content: center;
}
.hi-new-haven .hi-clock-hands {
  width: 2px; height: 12px; background: #1e3a8a;
  transform-origin: bottom; transform: rotate(-30deg);
}
.hi-new-haven .hi-gothic-window {
  width: 15px; height: 25px; background: rgba(255,255,255,0.3);
  border-radius: 8px 8px 0 0; margin: 0 auto 10px;
}
.hi-new-haven .hi-y-logo {
  position: absolute; bottom: 10%; right: 10%;
  font-size: 2rem; color: #1e3a8a; font-weight: bold;
}
.hi-new-haven .hi-books-nh {
  position: absolute; bottom: 15%; left: 10%;
  font-size: 1.5rem;
}

/* ===== REMAINING NASSAU COUNTY ===== */

/* Hempstead - Historic downtown */
.hi-hempstead .hi-town-center {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-hempstead .hi-town-hall {
  width: 120px; height: 80px; background: #fef3c7;
  border-radius: 8px; position: relative;
}
.hi-hempstead .hi-clock-hempstead {
  position: absolute; top: -30px; left: 50%; transform: translateX(-50%);
  width: 40px; height: 50px; background: #92400e;
  border-radius: 4px 4px 0 0;
}
.hi-hempstead .hi-clock-face {
  width: 25px; height: 25px; background: white;
  border-radius: 50%; margin: 8px auto;
  border: 2px solid #78350f;
}
.hi-hempstead .hi-columns-hmp {
  display: flex; justify-content: space-around; padding: 10px;
}
.hi-hempstead .hi-column-hmp {
  width: 10px; height: 50px; background: white; border-radius: 5px;
}

/* Freeport - Nautical Mile */
.hi-freeport .hi-nautical {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-freeport .hi-dock {
  width: 160px; height: 20px;
  background: repeating-linear-gradient(90deg, #78350f, #78350f 15px, #92400e 15px, #92400e 17px);
  border-radius: 4px;
}
.hi-freeport .hi-boats {
  display: flex; gap: 20px; justify-content: center; margin-bottom: 10px;
}
.hi-freeport .hi-fishing-boat {
  width: 50px; height: 25px; background: white;
  border-radius: 0 0 15px 15px;
}
.hi-freeport .hi-mast-fp {
  width: 3px; height: 30px; background: #64748b;
  margin: -25px auto 0;
}
.hi-freeport .hi-lobster {
  position: absolute; top: 10%; right: 15%; font-size: 2.5rem;
}

/* Valley Stream - Shopping/community */
.hi-valley-stream .hi-community {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-valley-stream .hi-mall-vs {
  width: 150px; height: 70px; background: var(--hi-glass);
  border-radius: 8px; display: flex; align-items: center; justify-content: center;
}
.hi-valley-stream .hi-stores {
  display: flex; gap: 5px;
}
.hi-valley-stream .hi-store-vs {
  width: 30px; height: 50px; background: rgba(255,255,255,0.2);
  border-radius: 4px;
}
.hi-valley-stream .hi-store-vs:nth-child(2) { background: var(--hi-primary); }
.hi-valley-stream .hi-park-vs {
  position: absolute; bottom: 10%; display: flex; gap: 20px;
}
.hi-valley-stream .hi-tree-vs { font-size: 2rem; }

/* Levittown - Suburban classic */
.hi-levittown .hi-suburb-classic {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-levittown .hi-cape-cods {
  display: flex; gap: 20px; align-items: flex-end;
}
.hi-levittown .hi-cape-cod {
  width: 60px; height: 40px; background: var(--hi-glass);
  border-radius: 4px; position: relative;
}
.hi-levittown .hi-cape-cod::before {
  content: ''; position: absolute; top: -25px; left: -5px;
  width: 0; height: 0;
  border-left: 35px solid transparent;
  border-right: 35px solid transparent;
  border-bottom: 30px solid var(--hi-secondary);
}
.hi-levittown .hi-cape-cod:nth-child(2)::before { border-bottom-color: var(--hi-primary); }
.hi-levittown .hi-picket-fence {
  position: absolute; bottom: 15%; left: 10%; right: 10%;
  height: 20px; background: repeating-linear-gradient(90deg, white, white 5px, transparent 5px, transparent 10px);
}

/* Hicksville - Rail hub */
.hi-hicksville .hi-transit {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-hicksville .hi-station {
  width: 140px; height: 60px; background: var(--hi-glass);
  border-radius: 8px 8px 0 0;
}
.hi-hicksville .hi-platform {
  width: 160px; height: 15px; background: #64748b;
  border-radius: 4px;
}
.hi-hicksville .hi-train-hv {
  position: absolute; top: 20%; width: 100px; height: 30px;
  background: linear-gradient(90deg, var(--hi-secondary), var(--hi-primary));
  border-radius: 8px 15px 15px 8px;
}
.hi-hicksville .hi-tracks {
  width: 180px; height: 8px;
  background: repeating-linear-gradient(90deg, #64748b, #64748b 20px, #374151 20px, #374151 22px);
  margin-top: 5px;
}

/* Oyster Bay - Historic harbor */
.hi-oyster-bay .hi-harbor {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-oyster-bay .hi-sagamore {
  width: 120px; height: 70px; background: #fef3c7;
  border-radius: 8px;
}
.hi-oyster-bay .hi-sagamore-roof {
  width: 140px; height: 40px; background: #78350f;
  clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
  margin: 0 auto -10px;
}
.hi-oyster-bay .hi-flag-ob {
  position: absolute; top: -20px; left: 50%; transform: translateX(-50%);
  font-size: 2rem;
}
.hi-oyster-bay .hi-oyster { font-size: 2rem; }
.hi-oyster-bay .hi-water-ob {
  position: absolute; bottom: 5%; left: 0; right: 0;
  height: 25px; background: linear-gradient(180deg, rgba(59,130,246,0.3), transparent);
  border-radius: 50%;
}

/* Mineola - County seat */
.hi-mineola .hi-courthouse {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-mineola .hi-court-building {
  width: 140px; height: 80px; background: white;
  border-radius: 8px;
}
.hi-mineola .hi-court-columns {
  display: flex; justify-content: space-around; padding: 15px;
}
.hi-mineola .hi-court-col {
  width: 12px; height: 50px; background: #e5e7eb; border-radius: 6px;
}
.hi-mineola .hi-pediment {
  width: 150px; height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 35px solid white;
  margin: 0 auto -5px;
}
.hi-mineola .hi-scales-mn {
  position: absolute; top: 15%; left: 50%; transform: translateX(-50%);
  font-size: 2rem; color: var(--hi-gold);
}

/* Glen Cove - Gold Coast */
.hi-glen-cove .hi-gold-estate {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-glen-cove .hi-gatsby-mansion {
  width: 160px; height: 90px; background: white;
  border-radius: 8px;
}
.hi-glen-cove .hi-gatsby-roof {
  width: 180px; height: 50px; background: #64748b;
  clip-path: polygon(5% 100%, 25% 30%, 50% 0%, 75% 30%, 95% 100%);
  margin: 0 auto -10px;
}
.hi-glen-cove .hi-gatsby-windows {
  display: flex; justify-content: space-around; padding: 20px;
}
.hi-glen-cove .hi-gatsby-win {
  width: 25px; height: 40px; background: rgba(59,130,246,0.3);
  border-radius: 12px 12px 0 0; border: 2px solid #e5e7eb;
}
.hi-glen-cove .hi-champagne {
  position: absolute; bottom: 10%; right: 10%; font-size: 2rem;
}

/* Westbury - Garden/Roosevelt Field */
.hi-westbury .hi-shopping {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-westbury .hi-mall-wb {
  width: 160px; height: 60px; background: var(--hi-glass);
  border-radius: 12px; display: flex; align-items: center;
  justify-content: center; gap: 15px;
}
.hi-westbury .hi-shopping-bag-wb {
  width: 35px; height: 45px; background: var(--hi-primary);
  border-radius: 0 0 8px 8px;
}
.hi-westbury .hi-shopping-bag-wb::before {
  content: ''; display: block; width: 25px; height: 15px;
  border: 4px solid var(--hi-primary); border-radius: 10px 10px 0 0;
  border-bottom: none; margin: -12px auto 0;
}
.hi-westbury .hi-garden-wb {
  position: absolute; bottom: 10%; display: flex; gap: 10px;
  font-size: 1.5rem;
}

/* Syosset - Affluent suburb */
.hi-syosset .hi-upscale {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-syosset .hi-colonial {
  width: 140px; height: 80px; background: #fef3c7;
  border-radius: 8px;
}
.hi-syosset .hi-colonial-roof {
  width: 160px; height: 45px; background: #1e3a5f;
  clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
  margin: 0 auto -10px;
}
.hi-syosset .hi-shutters {
  display: flex; justify-content: space-around; padding: 15px;
}
.hi-syosset .hi-window-sy {
  width: 20px; height: 30px; background: rgba(59,130,246,0.3);
  border: 3px solid #1e3a5f;
}
.hi-syosset .hi-luxury-sy {
  position: absolute; top: 10%; right: 10%; font-size: 2rem;
}

/* Jericho - Tech/business park */
.hi-jericho .hi-tech-park {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-jericho .hi-office-park {
  display: flex; gap: 10px; align-items: flex-end;
}
.hi-jericho .hi-office-jr {
  background: var(--hi-glass); border-radius: 8px;
}
.hi-jericho .hi-office-jr:nth-child(1) { width: 50px; height: 80px; }
.hi-jericho .hi-office-jr:nth-child(2) { width: 60px; height: 100px; background: var(--hi-secondary); }
.hi-jericho .hi-office-jr:nth-child(3) { width: 45px; height: 70px; }
.hi-jericho .hi-tech-icon {
  position: absolute; top: 10%; right: 10%; font-size: 2rem;
}
.hi-jericho .hi-briefcase-jr {
  position: absolute; bottom: 10%; left: 15%; font-size: 1.5rem;
}

/* Plainview - Family community */
.hi-plainview .hi-family-area {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-plainview .hi-split-level {
  width: 120px; position: relative;
}
.hi-plainview .hi-split-top {
  width: 80px; height: 40px; background: var(--hi-glass);
  border-radius: 4px; margin-left: 40px;
}
.hi-plainview .hi-split-bottom {
  width: 120px; height: 50px; background: var(--hi-glass);
  border-radius: 4px; margin-top: -10px;
}
.hi-plainview .hi-garage-pv {
  width: 35px; height: 30px; background: #374151;
  border-radius: 4px 4px 0 0; position: absolute;
  bottom: 0; left: 5px;
}
.hi-plainview .hi-basketball {
  position: absolute; top: 10%; right: 10%; font-size: 2rem;
}

/* Merrick - Waterfront living */
.hi-merrick .hi-canal {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-merrick .hi-waterfront-home {
  width: 100px; height: 60px; background: var(--hi-glass);
  border-radius: 8px;
}
.hi-merrick .hi-waterfront-dock {
  width: 120px; height: 15px;
  background: #78350f; border-radius: 4px;
  margin-top: 10px;
}
.hi-merrick .hi-kayak {
  position: absolute; bottom: 30%; right: 15%;
  width: 50px; height: 12px; background: #ef4444;
  border-radius: 25px 25px 10px 10px;
}
.hi-merrick .hi-canal-water {
  position: absolute; bottom: 5%; left: 0; right: 0;
  height: 30px; background: linear-gradient(180deg, rgba(59,130,246,0.4), rgba(59,130,246,0.1));
  border-radius: 50%;
}

/* Bellmore - Beach community */
.hi-bellmore .hi-beach-life {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-bellmore .hi-lifeguard {
  width: 60px; height: 80px; background: #ef4444;
  border-radius: 4px;
}
.hi-bellmore .hi-lifeguard-roof {
  width: 80px; height: 20px; background: #dc2626;
  margin: 0 auto -5px; border-radius: 4px;
}
.hi-bellmore .hi-beach-bl {
  position: absolute; bottom: 10%; left: 0; right: 0;
  height: 40px; background: linear-gradient(180deg, #fcd34d, #fbbf24);
  border-radius: 50% 50% 0 0;
}
.hi-bellmore .hi-beach-ball {
  position: absolute; bottom: 30%; right: 20%; font-size: 2rem;
}

/* Lynbrook - Village charm */
.hi-lynbrook .hi-village {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-lynbrook .hi-main-street {
  display: flex; gap: 8px; align-items: flex-end;
}
.hi-lynbrook .hi-shop-lb {
  background: var(--hi-glass); border-radius: 4px 4px 0 0;
}
.hi-lynbrook .hi-shop-lb:nth-child(1) { width: 40px; height: 60px; }
.hi-lynbrook .hi-shop-lb:nth-child(2) { width: 50px; height: 70px; background: var(--hi-primary); }
.hi-lynbrook .hi-shop-lb:nth-child(3) { width: 35px; height: 55px; }
.hi-lynbrook .hi-awning {
  width: 100%; height: 10px; background: #ef4444;
  border-radius: 0 0 4px 4px;
}
.hi-lynbrook .hi-streetlight {
  position: absolute; bottom: 5%; left: 10%; font-size: 2rem;
}

/* ===== REMAINING SUFFOLK COUNTY ===== */

/* Babylon - Village/boating */
.hi-babylon .hi-village-harbor {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-babylon .hi-village-row {
  display: flex; gap: 10px; align-items: flex-end;
}
.hi-babylon .hi-shop-bb {
  width: 40px; height: 50px; background: var(--hi-glass);
  border-radius: 4px;
}
.hi-babylon .hi-shop-bb:nth-child(2) { height: 60px; background: var(--hi-primary); }
.hi-babylon .hi-marina-bb {
  position: absolute; bottom: 5%; left: 0; right: 0;
  height: 30px; background: linear-gradient(180deg, #3b82f6, #0ea5e9);
  border-radius: 50% 50% 0 0;
}
.hi-babylon .hi-sailboat-bb {
  position: absolute; bottom: 25%; right: 15%; font-size: 2rem;
}

/* Smithtown - Historic bull */
.hi-smithtown .hi-history {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-smithtown .hi-bull {
  font-size: 4rem; color: #78350f;
}
.hi-smithtown .hi-historic-sign {
  position: absolute; bottom: 20%; background: #78350f;
  padding: 8px 20px; border-radius: 4px; color: white;
  font-size: 10px; font-weight: bold;
}
.hi-smithtown .hi-tree-st { position: absolute; font-size: 2.5rem; }
.hi-smithtown .hi-tree-st:nth-child(3) { left: 10%; top: 30%; }
.hi-smithtown .hi-tree-st:nth-child(4) { right: 10%; top: 35%; }

/* Islip - MacArthur Airport */
.hi-islip .hi-airport {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-islip .hi-terminal {
  width: 160px; height: 50px; background: var(--hi-glass);
  border-radius: 8px;
}
.hi-islip .hi-control-tower {
  width: 30px; height: 80px; background: #64748b;
  border-radius: 4px; position: absolute; left: 20px; top: -30px;
}
.hi-islip .hi-tower-cab {
  width: 50px; height: 20px; background: #22d3ee;
  border-radius: 4px; margin: -15px auto 0 -10px;
}
.hi-islip .hi-runway {
  width: 180px; height: 15px; background: #374151;
  margin-top: 10px; position: relative;
}
.hi-islip .hi-runway::before {
  content: ''; position: absolute; top: 6px; left: 10px; right: 10px;
  height: 3px; background: repeating-linear-gradient(90deg, white, white 15px, transparent 15px, transparent 30px);
}
.hi-islip .hi-plane-islip {
  position: absolute; top: 10%; right: 10%; font-size: 2rem;
  animation: hi-float 2s ease-in-out infinite;
}

/* Brookhaven - Research/labs */
.hi-brookhaven .hi-research {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-brookhaven .hi-lab {
  width: 140px; height: 80px; background: var(--hi-glass);
  border-radius: 8px; display: flex; align-items: center;
  justify-content: center;
}
.hi-brookhaven .hi-atom {
  width: 60px; height: 60px; position: relative;
}
.hi-brookhaven .hi-nucleus {
  width: 20px; height: 20px; background: var(--hi-primary);
  border-radius: 50%; position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.hi-brookhaven .hi-orbit {
  position: absolute; inset: 0;
  border: 2px solid var(--hi-accent); border-radius: 50%;
}
.hi-brookhaven .hi-orbit:nth-child(2) { transform: rotate(60deg); }
.hi-brookhaven .hi-orbit:nth-child(3) { transform: rotate(-60deg); }
.hi-brookhaven .hi-microscope {
  position: absolute; bottom: 10%; right: 10%; font-size: 2rem;
}

/* Riverhead - Wineries/farms */
.hi-riverhead .hi-wine-country {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-riverhead .hi-vineyard {
  display: flex; gap: 15px;
}
.hi-riverhead .hi-vine {
  width: 15px; height: 40px; background: #78350f; border-radius: 8px;
}
.hi-riverhead .hi-grapes { font-size: 1.5rem; margin-top: -10px; }
.hi-riverhead .hi-wine-bottle {
  position: absolute; top: 10%; right: 15%;
  width: 25px; height: 60px; background: #166534;
  border-radius: 4px 4px 12px 12px;
}
.hi-riverhead .hi-wine-bottle::before {
  content: ''; display: block; width: 12px; height: 15px;
  background: #166534; margin: -12px auto 0; border-radius: 4px 4px 0 0;
}
.hi-riverhead .hi-barn {
  position: absolute; bottom: 15%; left: 15%; font-size: 2rem;
}

/* Commack - Suburban center */
.hi-commack .hi-suburban-life {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-commack .hi-ranch-house {
  width: 140px; height: 50px; background: var(--hi-glass);
  border-radius: 8px;
}
.hi-commack .hi-ranch-roof {
  width: 160px; height: 30px; background: var(--hi-secondary);
  clip-path: polygon(0% 100%, 5% 0%, 95% 0%, 100% 100%);
  margin: 0 auto -5px;
}
.hi-commack .hi-garage-cm {
  width: 40px; height: 35px; background: #374151;
  border-radius: 4px 4px 0 0; position: absolute;
  bottom: 0; right: 15px;
}
.hi-commack .hi-driveway {
  position: absolute; bottom: 0; right: 25px;
  width: 50px; height: 40px; background: #64748b;
  clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
}

/* East Hampton - Luxury Hamptons */
.hi-east-hampton .hi-luxury-hamptons {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-east-hampton .hi-windmill {
  width: 40px; height: 80px; background: #78350f;
  border-radius: 4px; position: relative;
}
.hi-east-hampton .hi-windmill::before {
  content: ''; position: absolute; top: 10px; left: 50%;
  transform: translateX(-50%);
  width: 80px; height: 80px;
  border: 4px solid #78350f; border-radius: 50%;
  border-top-color: transparent; border-bottom-color: transparent;
  animation: hi-rotate 8s linear infinite;
}
.hi-east-hampton .hi-beach-eh {
  position: absolute; bottom: 10%; left: 0; right: 0;
  height: 30px; background: linear-gradient(180deg, #fcd34d, #fbbf24);
  border-radius: 50% 50% 0 0;
}
.hi-east-hampton .hi-celeb-car { font-size: 2rem; }

/* Patchogue - Arts/nightlife */
.hi-patchogue .hi-arts-district {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-patchogue .hi-theater-pg {
  width: 120px; height: 80px; background: var(--hi-secondary);
  border-radius: 8px; position: relative;
}
.hi-patchogue .hi-marquee {
  position: absolute; top: -15px; left: 10px; right: 10px;
  height: 25px; background: var(--hi-primary);
  border-radius: 4px;
  box-shadow: 0 0 20px rgba(249,115,22,0.5);
}
.hi-patchogue .hi-marquee-lights {
  display: flex; justify-content: space-around; padding: 5px;
}
.hi-patchogue .hi-bulb-pg {
  width: 8px; height: 8px; background: #fbbf24;
  border-radius: 50%; animation: hi-pulse 0.5s ease-in-out infinite;
}
.hi-patchogue .hi-bulb-pg:nth-child(2) { animation-delay: 0.2s; }
.hi-patchogue .hi-bulb-pg:nth-child(3) { animation-delay: 0.4s; }
.hi-patchogue .hi-music-note {
  position: absolute; top: 10%; right: 10%; font-size: 2rem;
}

/* Bay Shore - Ferry terminal */
.hi-bay-shore .hi-ferry-terminal {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-bay-shore .hi-terminal-bs {
  width: 140px; height: 50px; background: var(--hi-glass);
  border-radius: 8px 8px 0 0;
}
.hi-bay-shore .hi-dock-bs {
  width: 160px; height: 15px; background: #78350f;
  border-radius: 4px;
}
.hi-bay-shore .hi-ferry-bs {
  position: absolute; bottom: 25%; right: 10%;
  width: 60px; height: 30px; background: white;
  border-radius: 0 0 15px 15px;
}
.hi-bay-shore .hi-ferry-cabin {
  width: 40px; height: 20px; background: #3b82f6;
  border-radius: 4px; margin: -15px auto 0;
}
.hi-bay-shore .hi-fire-island {
  position: absolute; top: 10%; right: 10%;
  font-size: 0.8rem; color: var(--hi-accent);
}

/* Brentwood - Diverse community */
.hi-brentwood .hi-diversity-bw {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-brentwood .hi-homes-bw {
  display: flex; gap: 15px; align-items: flex-end;
}
.hi-brentwood .hi-home-bw {
  width: 50px; height: 45px; background: var(--hi-glass);
  border-radius: 4px; position: relative;
}
.hi-brentwood .hi-home-bw::before {
  content: ''; position: absolute; top: -20px; left: -5px;
  width: 0; height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 25px solid var(--hi-primary);
}
.hi-brentwood .hi-home-bw:nth-child(2)::before { border-bottom-color: var(--hi-secondary); }
.hi-brentwood .hi-home-bw:nth-child(3)::before { border-bottom-color: var(--hi-accent); }
.hi-brentwood .hi-community-bw {
  position: absolute; bottom: 10%; font-size: 2rem;
}

/* Central Islip - Courts */
.hi-central-islip .hi-courts {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-central-islip .hi-federal-court {
  width: 150px; height: 80px; background: white;
  border-radius: 8px;
}
.hi-central-islip .hi-court-facade {
  display: flex; justify-content: space-around; padding: 15px;
}
.hi-central-islip .hi-pillar-ci {
  width: 15px; height: 50px; background: #e5e7eb; border-radius: 8px;
}
.hi-central-islip .hi-court-top {
  width: 160px; height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 30px solid white;
  margin: 0 auto -5px;
}
.hi-central-islip .hi-gavel-ci {
  position: absolute; top: 10%; right: 10%; font-size: 2.5rem;
}

/* Hauppauge - Industrial park */
.hi-hauppauge .hi-industrial {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-hauppauge .hi-office-complex {
  display: flex; gap: 10px; align-items: flex-end;
}
.hi-hauppauge .hi-corp-building {
  background: var(--hi-glass); border-radius: 8px;
}
.hi-hauppauge .hi-corp-building:nth-child(1) { width: 50px; height: 90px; }
.hi-hauppauge .hi-corp-building:nth-child(2) { width: 60px; height: 110px; background: var(--hi-secondary); }
.hi-hauppauge .hi-corp-building:nth-child(3) { width: 45px; height: 80px; }
.hi-hauppauge .hi-park-sign {
  position: absolute; bottom: 5%; background: var(--hi-primary);
  padding: 5px 15px; border-radius: 4px; font-size: 10px; color: white;
}

/* Ronkonkoma - Lake */
.hi-ronkonkoma .hi-lake {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-ronkonkoma .hi-lake-water {
  width: 140px; height: 80px;
  background: radial-gradient(ellipse, #0ea5e9, #0284c7);
  border-radius: 50%;
}
.hi-ronkonkoma .hi-lake-reflect {
  width: 60px; height: 20px;
  background: rgba(255,255,255,0.3);
  border-radius: 50%; margin: 20px auto;
}
.hi-ronkonkoma .hi-trees-rk {
  position: absolute; display: flex; gap: 15px;
}
.hi-ronkonkoma .hi-trees-rk:nth-child(2) { top: 20%; left: 5%; }
.hi-ronkonkoma .hi-trees-rk:nth-child(3) { top: 25%; right: 5%; }
.hi-ronkonkoma .hi-tree-rk { font-size: 2rem; }
.hi-ronkonkoma .hi-duck { position: absolute; bottom: 30%; font-size: 1.5rem; }

/* Lindenhurst - Village */
.hi-lindenhurst .hi-village-lh {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-lindenhurst .hi-main-st-lh {
  display: flex; gap: 8px; align-items: flex-end;
}
.hi-lindenhurst .hi-store-lh {
  background: var(--hi-glass); border-radius: 4px 4px 0 0;
}
.hi-lindenhurst .hi-store-lh:nth-child(1) { width: 35px; height: 55px; }
.hi-lindenhurst .hi-store-lh:nth-child(2) { width: 45px; height: 65px; background: var(--hi-primary); }
.hi-lindenhurst .hi-store-lh:nth-child(3) { width: 40px; height: 50px; }
.hi-lindenhurst .hi-store-lh:nth-child(4) { width: 35px; height: 60px; }
.hi-lindenhurst .hi-clock-lh {
  position: absolute; top: 10%; left: 50%; transform: translateX(-50%);
  font-size: 2rem;
}

/* Coram - Nature/suburban */
.hi-coram .hi-nature {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-coram .hi-pine-trees {
  display: flex; gap: 20px; align-items: flex-end;
}
.hi-coram .hi-pine {
  width: 0; height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 60px solid #166534;
}
.hi-coram .hi-pine:nth-child(2) { border-bottom-height: 70px; border-bottom-color: #15803d; }
.hi-coram .hi-trunk-cr {
  width: 10px; height: 20px; background: #78350f;
  margin: 0 auto;
}
.hi-coram .hi-deer {
  position: absolute; bottom: 15%; right: 15%; font-size: 2rem;
}

/* Port Jefferson - Harbor village */
.hi-port-jeff .hi-harbor-village {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-port-jeff .hi-village-shops {
  display: flex; gap: 8px; align-items: flex-end;
}
.hi-port-jeff .hi-shop-pj {
  background: var(--hi-glass); border-radius: 4px 4px 0 0;
}
.hi-port-jeff .hi-shop-pj:nth-child(1) { width: 35px; height: 50px; }
.hi-port-jeff .hi-shop-pj:nth-child(2) { width: 45px; height: 60px; background: var(--hi-primary); }
.hi-port-jeff .hi-shop-pj:nth-child(3) { width: 30px; height: 45px; }
.hi-port-jeff .hi-ferry-pj {
  position: absolute; bottom: 10%; left: 50%; transform: translateX(-50%);
  width: 80px; height: 25px; background: white;
  border-radius: 0 0 12px 12px;
}
.hi-port-jeff .hi-harbor-water {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 35px; background: linear-gradient(180deg, #3b82f6, #0ea5e9);
  border-radius: 50% 50% 0 0;
}

/* Sayville - Fire Island gateway */
.hi-sayville .hi-gateway {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-sayville .hi-ferry-dock {
  width: 140px; height: 60px; background: var(--hi-glass);
  border-radius: 8px;
}
.hi-sayville .hi-dock-pier {
  width: 160px; height: 15px; background: #78350f;
  border-radius: 4px; margin-top: 10px;
}
.hi-sayville .hi-fi-ferry {
  position: absolute; top: 20%; right: 10%;
  width: 50px; height: 25px; background: var(--hi-primary);
  border-radius: 0 0 12px 12px;
  animation: hi-float 3s ease-in-out infinite;
}
.hi-sayville .hi-lighthouse-sy {
  position: absolute; top: 5%; left: 15%; font-size: 2rem;
}

/* ===== REMAINING WESTCHESTER ===== */

/* Yonkers - Urban/riverfront */
.hi-yonkers .hi-riverfront {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-yonkers .hi-buildings-yk {
  display: flex; gap: 8px; align-items: flex-end;
}
.hi-yonkers .hi-bldg-yk {
  background: var(--hi-glass); border-radius: 4px 4px 0 0;
}
.hi-yonkers .hi-bldg-yk:nth-child(1) { width: 35px; height: 80px; }
.hi-yonkers .hi-bldg-yk:nth-child(2) { width: 45px; height: 100px; background: var(--hi-secondary); }
.hi-yonkers .hi-bldg-yk:nth-child(3) { width: 40px; height: 90px; }
.hi-yonkers .hi-bldg-yk:nth-child(4) { width: 30px; height: 70px; }
.hi-yonkers .hi-hudson {
  position: absolute; bottom: 5%; left: 0; right: 0;
  height: 25px; background: linear-gradient(90deg, #3b82f6, #0ea5e9);
  border-radius: 50%;
}
.hi-yonkers .hi-palisades { font-size: 1.5rem; }

/* New Rochelle - Coastal city */
.hi-new-rochelle .hi-coastal {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-new-rochelle .hi-city-nr {
  display: flex; gap: 10px; align-items: flex-end;
}
.hi-new-rochelle .hi-tower-nr {
  background: var(--hi-glass); border-radius: 8px 8px 0 0;
}
.hi-new-rochelle .hi-tower-nr:nth-child(1) { width: 40px; height: 70px; }
.hi-new-rochelle .hi-tower-nr:nth-child(2) { width: 50px; height: 100px; background: var(--hi-primary); }
.hi-new-rochelle .hi-tower-nr:nth-child(3) { width: 35px; height: 60px; }
.hi-new-rochelle .hi-sound {
  position: absolute; bottom: 5%; left: 0; right: 0;
  height: 30px; background: linear-gradient(180deg, #0ea5e9, #0284c7);
  border-radius: 50% 50% 0 0;
}
.hi-new-rochelle .hi-island-nr {
  position: absolute; bottom: 20%; right: 10%; font-size: 1.5rem;
}

/* Mount Vernon - Historic */
.hi-mount-vernon .hi-historic-mv {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-mount-vernon .hi-city-hall-mv {
  width: 140px; height: 80px; background: #fef3c7;
  border-radius: 8px;
}
.hi-mount-vernon .hi-dome-mv {
  width: 50px; height: 30px; background: #64748b;
  border-radius: 25px 25px 0 0; margin: 0 auto -5px;
}
.hi-mount-vernon .hi-columns-mv {
  display: flex; justify-content: space-around; padding: 15px;
}
.hi-mount-vernon .hi-col-mv {
  width: 12px; height: 45px; background: white; border-radius: 6px;
}
.hi-mount-vernon .hi-flag-mv {
  position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
  font-size: 2rem;
}

/* Tarrytown - Sleepy Hollow */
.hi-tarrytown .hi-sleepy-hollow {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-tarrytown .hi-bridge-tt {
  width: 160px; height: 60px;
  border: 6px solid #64748b; border-radius: 80px 80px 0 0;
  border-bottom: none;
}
.hi-tarrytown .hi-hudson-tt {
  position: absolute; bottom: 5%; left: 0; right: 0;
  height: 30px; background: linear-gradient(180deg, #3b82f6, #0284c7);
  border-radius: 50%;
}
.hi-tarrytown .hi-headless {
  position: absolute; top: 10%; right: 10%; font-size: 2.5rem;
}
.hi-tarrytown .hi-pumpkin {
  position: absolute; bottom: 25%; left: 15%; font-size: 2rem;
}

/* Rye - Beach/amusement */
.hi-rye .hi-playland {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-rye .hi-ferris {
  width: 80px; height: 80px; border: 6px solid var(--hi-primary);
  border-radius: 50%; position: relative;
  animation: hi-rotate 10s linear infinite;
}
.hi-rye .hi-car-rye {
  width: 15px; height: 20px; background: var(--hi-secondary);
  border-radius: 4px; position: absolute;
}
.hi-rye .hi-car-rye:nth-child(1) { top: -10px; left: 50%; transform: translateX(-50%); }
.hi-rye .hi-car-rye:nth-child(2) { bottom: -10px; left: 50%; transform: translateX(-50%); }
.hi-rye .hi-car-rye:nth-child(3) { left: -10px; top: 50%; transform: translateY(-50%); }
.hi-rye .hi-car-rye:nth-child(4) { right: -10px; top: 50%; transform: translateY(-50%); }
.hi-rye .hi-beach-rye {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 25px; background: #fcd34d; border-radius: 50% 50% 0 0;
}

/* Mamaroneck - Harbor */
.hi-mamaroneck .hi-harbor-mm {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-mamaroneck .hi-boats-mm {
  display: flex; gap: 20px;
}
.hi-mamaroneck .hi-sailboat-mm {
  width: 40px; height: 30px; background: white;
  border-radius: 0 0 20px 20px;
}
.hi-mamaroneck .hi-mast-mm {
  width: 3px; height: 50px; background: #64748b;
  margin: -25px auto 0;
}
.hi-mamaroneck .hi-sail-mm {
  width: 0; height: 0;
  border-right: 25px solid rgba(255,255,255,0.9);
  border-top: 40px solid transparent;
  margin: -45px 0 0 5px;
}
.hi-mamaroneck .hi-water-mm {
  position: absolute; bottom: 5%; left: 0; right: 0;
  height: 30px; background: linear-gradient(180deg, #3b82f6, #0ea5e9);
  border-radius: 50%;
}

/* Port Chester - Border town */
.hi-port-chester .hi-border {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-port-chester .hi-downtown-pc {
  display: flex; gap: 8px; align-items: flex-end;
}
.hi-port-chester .hi-shop-pc {
  background: var(--hi-glass); border-radius: 4px 4px 0 0;
}
.hi-port-chester .hi-shop-pc:nth-child(1) { width: 35px; height: 60px; }
.hi-port-chester .hi-shop-pc:nth-child(2) { width: 45px; height: 75px; background: var(--hi-primary); }
.hi-port-chester .hi-shop-pc:nth-child(3) { width: 40px; height: 55px; }
.hi-port-chester .hi-ny-ct-sign {
  position: absolute; bottom: 10%; background: #166534;
  padding: 5px 12px; border-radius: 4px; font-size: 9px; color: white;
}

/* Ossining - Sing Sing/river */
.hi-ossining .hi-river-town {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-ossining .hi-village-os {
  display: flex; gap: 10px; align-items: flex-end;
}
.hi-ossining .hi-bldg-os {
  background: var(--hi-glass); border-radius: 4px 4px 0 0;
}
.hi-ossining .hi-bldg-os:nth-child(1) { width: 35px; height: 55px; }
.hi-ossining .hi-bldg-os:nth-child(2) { width: 45px; height: 70px; background: var(--hi-secondary); }
.hi-ossining .hi-bldg-os:nth-child(3) { width: 30px; height: 50px; }
.hi-ossining .hi-hudson-os {
  position: absolute; bottom: 5%; left: 0; right: 0;
  height: 25px; background: linear-gradient(90deg, #3b82f6, #0ea5e9);
  border-radius: 50%;
}
.hi-ossining .hi-train-os {
  position: absolute; bottom: 20%; right: 10%; font-size: 1.5rem;
}

/* ===== REMAINING NEW JERSEY ===== */

/* Newark - Urban center */
.hi-newark .hi-urban-center {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-newark .hi-skyline-nw {
  display: flex; gap: 6px; align-items: flex-end;
}
.hi-newark .hi-tower-nw {
  background: var(--hi-glass); border-radius: 4px 4px 0 0;
}
.hi-newark .hi-tower-nw:nth-child(1) { width: 30px; height: 90px; }
.hi-newark .hi-tower-nw:nth-child(2) { width: 40px; height: 130px; background: var(--hi-secondary); }
.hi-newark .hi-tower-nw:nth-child(3) { width: 35px; height: 100px; }
.hi-newark .hi-tower-nw:nth-child(4) { width: 28px; height: 80px; }
.hi-newark .hi-prudential {
  position: absolute; top: 5%; background: var(--hi-primary);
  padding: 3px 8px; border-radius: 4px; font-size: 8px; color: white;
}
.hi-newark .hi-airplane-nw {
  position: absolute; top: 15%; right: 10%; font-size: 2rem;
}

/* Paterson - Falls/industry */
.hi-paterson .hi-falls {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-paterson .hi-waterfall {
  width: 80px; height: 100px; position: relative;
}
.hi-paterson .hi-cliff-pt {
  width: 100%; height: 30px; background: #78350f;
  border-radius: 8px 8px 0 0;
}
.hi-paterson .hi-water-fall {
  width: 60px; height: 70px; margin: 0 auto;
  background: linear-gradient(180deg, #3b82f6, #bfdbfe);
}
.hi-paterson .hi-mist {
  position: absolute; bottom: 10%; left: 0; right: 0;
  font-size: 1.5rem; color: #bfdbfe;
}
.hi-paterson .hi-factory-pt {
  position: absolute; top: 10%; right: 5%; font-size: 2rem;
}

/* Elizabeth - Port/urban */
.hi-elizabeth .hi-port {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-elizabeth .hi-cranes {
  display: flex; gap: 30px;
}
.hi-elizabeth .hi-crane {
  width: 10px; height: 80px; background: #ef4444;
  position: relative;
}
.hi-elizabeth .hi-crane-arm {
  position: absolute; top: 5px; left: 5px;
  width: 50px; height: 8px; background: #ef4444;
}
.hi-elizabeth .hi-containers {
  position: absolute; bottom: 15%; display: flex; gap: 5px;
}
.hi-elizabeth .hi-container {
  width: 30px; height: 20px; border-radius: 2px;
}
.hi-elizabeth .hi-container:nth-child(1) { background: #3b82f6; }
.hi-elizabeth .hi-container:nth-child(2) { background: #22c55e; }
.hi-elizabeth .hi-container:nth-child(3) { background: #f97316; }
.hi-elizabeth .hi-ship-el { font-size: 2rem; }

/* Fort Lee - GWB */
.hi-fort-lee .hi-gwb {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-fort-lee .hi-bridge-fl {
  width: 180px; height: 80px; position: relative;
}
.hi-fort-lee .hi-tower-fl {
  width: 20px; height: 80px; background: #64748b;
  position: absolute; bottom: 20px;
}
.hi-fort-lee .hi-tower-fl:first-child { left: 20px; }
.hi-fort-lee .hi-tower-fl:nth-child(2) { right: 20px; }
.hi-fort-lee .hi-cables-fl {
  position: absolute; top: 0; left: 30px; right: 30px;
  height: 60px; border: 3px solid #94a3b8;
  border-radius: 0 0 50% 50%; border-top: none;
}
.hi-fort-lee .hi-deck-fl {
  position: absolute; bottom: 20px; left: 0; right: 0;
  height: 12px; background: #374151;
}
.hi-fort-lee .hi-hudson-fl {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 20px; background: #3b82f6; border-radius: 50%;
}

/* Hackensack - Medical/business */
.hi-hackensack .hi-medical-center {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-hackensack .hi-hospital {
  width: 140px; height: 90px; background: var(--hi-glass);
  border-radius: 8px; position: relative;
}
.hi-hackensack .hi-cross-hk {
  position: absolute; top: 15px; left: 50%; transform: translateX(-50%);
  width: 30px; height: 30px; background: #ef4444;
  clip-path: polygon(35% 0%, 65% 0%, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0% 65%, 0% 35%, 35% 35%);
}
.hi-hackensack .hi-ambulance {
  position: absolute; bottom: 10%; right: 10%; font-size: 2rem;
}

/* Paramus - Shopping */
.hi-paramus .hi-malls {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-paramus .hi-mall-pr {
  width: 160px; height: 70px; background: var(--hi-glass);
  border-radius: 12px; display: flex; align-items: center;
  justify-content: center; gap: 10px;
}
.hi-paramus .hi-store-pr {
  width: 35px; height: 50px; background: rgba(255,255,255,0.2);
  border-radius: 4px;
}
.hi-paramus .hi-store-pr:nth-child(2) { background: var(--hi-primary); }
.hi-paramus .hi-bags-pr {
  position: absolute; bottom: 10%; display: flex; gap: 15px;
  font-size: 2rem;
}

/* Englewood - Upscale suburb */
.hi-englewood .hi-upscale-ew {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-englewood .hi-colonial-ew {
  width: 140px; height: 80px; background: #fef3c7;
  border-radius: 8px;
}
.hi-englewood .hi-roof-ew {
  width: 160px; height: 50px; background: #1e3a5f;
  clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
  margin: 0 auto -10px;
}
.hi-englewood .hi-windows-ew {
  display: flex; justify-content: space-around; padding: 15px;
}
.hi-englewood .hi-win-ew {
  width: 25px; height: 35px; background: rgba(59,130,246,0.3);
  border: 3px solid #1e3a5f;
}
.hi-englewood .hi-palisades-ew {
  position: absolute; bottom: 10%; font-size: 1.5rem;
}

/* Morristown - Historic */
.hi-morristown .hi-historic-mt {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-morristown .hi-green-mt {
  width: 150px; height: 100px; background: #22c55e;
  border-radius: 50%; position: relative;
}
.hi-morristown .hi-monument-mt {
  position: absolute; top: 10%; left: 50%; transform: translateX(-50%);
  width: 20px; height: 60px; background: #64748b;
  border-radius: 4px;
}
.hi-morristown .hi-colonial-mt {
  position: absolute; bottom: -20px; right: -30px;
  width: 60px; height: 40px; background: #fef3c7;
  border-radius: 4px;
}
.hi-morristown .hi-flag-mt {
  position: absolute; top: 5%; left: 50%; font-size: 2rem;
}

/* Montclair - Arts/culture */
.hi-montclair .hi-arts-mc {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-montclair .hi-museum-mc {
  width: 140px; height: 80px; background: var(--hi-glass);
  border-radius: 8px;
}
.hi-montclair .hi-art-frame {
  width: 50px; height: 40px; border: 4px solid var(--hi-gold);
  margin: 15px auto;
}
.hi-montclair .hi-palette {
  position: absolute; bottom: 10%; right: 10%; font-size: 2.5rem;
}
.hi-montclair .hi-coffee-mc {
  position: absolute; bottom: 15%; left: 10%; font-size: 2rem;
}

/* Red Bank - Riverfront downtown */
.hi-red-bank .hi-downtown-rb {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-red-bank .hi-broad-st {
  display: flex; gap: 8px; align-items: flex-end;
}
.hi-red-bank .hi-shop-rb {
  background: var(--hi-glass); border-radius: 4px 4px 0 0;
}
.hi-red-bank .hi-shop-rb:nth-child(1) { width: 35px; height: 55px; }
.hi-red-bank .hi-shop-rb:nth-child(2) { width: 45px; height: 70px; background: var(--hi-primary); }
.hi-red-bank .hi-shop-rb:nth-child(3) { width: 40px; height: 60px; }
.hi-red-bank .hi-count-basie {
  position: absolute; bottom: 5%; background: #1a1a1a;
  padding: 5px 15px; border-radius: 4px; font-size: 10px; color: var(--hi-gold);
}
.hi-red-bank .hi-music-rb { font-size: 2rem; }

/* Asbury Park - Beach revival */
.hi-asbury .hi-boardwalk-ap {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-asbury .hi-convention-hall {
  width: 140px; height: 70px; background: #fef3c7;
  border-radius: 8px;
}
.hi-asbury .hi-sign-ap {
  width: 100px; height: 25px; background: var(--hi-primary);
  border-radius: 4px; margin: 0 auto -10px;
  box-shadow: 0 0 15px rgba(249,115,22,0.5);
}
.hi-asbury .hi-beach-ap {
  position: absolute; bottom: 5%; left: 0; right: 0;
  height: 35px; background: linear-gradient(180deg, #fcd34d, #fbbf24);
  border-radius: 50% 50% 0 0;
}
.hi-asbury .hi-guitar {
  position: absolute; top: 10%; right: 10%; font-size: 2.5rem;
}

/* ===== REMAINING CONNECTICUT ===== */

/* Norwalk - Maritime/oysters */
.hi-norwalk .hi-maritime {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-norwalk .hi-aquarium {
  width: 140px; height: 80px; background: linear-gradient(180deg, #0ea5e9, #0284c7);
  border-radius: 12px; position: relative; overflow: hidden;
}
.hi-norwalk .hi-fish-nw {
  font-size: 1.5rem; position: absolute;
  animation: hi-float 2s ease-in-out infinite;
}
.hi-norwalk .hi-fish-nw:nth-child(1) { top: 20%; left: 20%; }
.hi-norwalk .hi-fish-nw:nth-child(2) { top: 50%; right: 20%; animation-delay: 0.5s; }
.hi-norwalk .hi-oyster-nw {
  position: absolute; bottom: 10%; right: 15%; font-size: 2rem;
}

/* Bridgeport - Industrial/port */
.hi-bridgeport .hi-industrial-bp {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-bridgeport .hi-skyline-bp {
  display: flex; gap: 8px; align-items: flex-end;
}
.hi-bridgeport .hi-bldg-bp {
  background: var(--hi-glass); border-radius: 4px 4px 0 0;
}
.hi-bridgeport .hi-bldg-bp:nth-child(1) { width: 35px; height: 70px; }
.hi-bridgeport .hi-bldg-bp:nth-child(2) { width: 45px; height: 100px; background: var(--hi-secondary); }
.hi-bridgeport .hi-bldg-bp:nth-child(3) { width: 30px; height: 60px; }
.hi-bridgeport .hi-ferry-bp {
  position: absolute; bottom: 15%; font-size: 2rem;
}
.hi-bridgeport .hi-harbor-bp {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 25px; background: #3b82f6; border-radius: 50%;
}

/* Danbury - Hat city */
.hi-danbury .hi-hat-city {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-danbury .hi-top-hat {
  position: relative;
}
.hi-danbury .hi-hat-top {
  width: 60px; height: 70px; background: #1a1a1a;
  border-radius: 8px 8px 0 0;
}
.hi-danbury .hi-hat-brim-db {
  width: 90px; height: 15px; background: #1a1a1a;
  border-radius: 8px; margin-left: -15px;
}
.hi-danbury .hi-hat-band {
  position: absolute; bottom: 20px; left: 0; right: 0;
  height: 10px; background: var(--hi-primary);
}
.hi-danbury .hi-mall-db {
  position: absolute; bottom: 10%; font-size: 1.5rem;
}

/* Hartford - Capitol */
.hi-hartford .hi-capitol {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-hartford .hi-capitol-building {
  width: 150px; height: 80px; background: white;
  border-radius: 8px;
}
.hi-hartford .hi-dome-hf {
  width: 50px; height: 40px; background: var(--hi-gold);
  border-radius: 25px 25px 0 0; margin: 0 auto -5px;
}
.hi-hartford .hi-spire-hf {
  width: 6px; height: 25px; background: var(--hi-gold);
  margin: 0 auto -5px;
}
.hi-hartford .hi-columns-hf {
  display: flex; justify-content: space-around; padding: 15px;
}
.hi-hartford .hi-col-hf {
  width: 12px; height: 45px; background: #e5e7eb; border-radius: 6px;
}
.hi-hartford .hi-insurance {
  position: absolute; top: 10%; right: 5%;
  background: var(--hi-secondary); padding: 4px 10px;
  border-radius: 4px; font-size: 9px; color: white;
}

/* Westport - Affluent arts */
.hi-westport .hi-arts-wp {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-westport .hi-playhouse {
  width: 130px; height: 80px; background: #dc2626;
  border-radius: 8px; position: relative;
}
.hi-westport .hi-marquee-wp {
  position: absolute; top: -15px; left: 10px; right: 10px;
  height: 20px; background: white; border-radius: 4px;
}
.hi-westport .hi-curtain-wp {
  width: 40px; height: 50px; background: #fbbf24;
  margin: 20px auto 0; border-radius: 0 0 20px 20px;
}
.hi-westport .hi-beach-wp {
  position: absolute; bottom: 5%; font-size: 1.5rem;
}

/* Fairfield - Beach/university */
.hi-fairfield .hi-beach-uni {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-fairfield .hi-campus {
  width: 120px; height: 70px; background: #dc2626;
  border-radius: 8px;
}
.hi-fairfield .hi-tower-ff {
  width: 30px; height: 90px; background: #dc2626;
  margin: 0 auto -20px; border-radius: 4px;
  position: relative;
}
.hi-fairfield .hi-cross-ff {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  font-size: 1.5rem; color: white;
}
.hi-fairfield .hi-beach-ff {
  position: absolute; bottom: 5%; left: 0; right: 0;
  height: 25px; background: #fcd34d; border-radius: 50% 50% 0 0;
}

/* Darien - Wealthy suburb */
.hi-darien .hi-estate-dr {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-darien .hi-mansion-dr {
  width: 150px; height: 80px; background: white;
  border-radius: 8px;
}
.hi-darien .hi-roof-dr {
  width: 170px; height: 45px; background: #374151;
  clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
  margin: 0 auto -10px;
}
.hi-darien .hi-columns-dr {
  display: flex; justify-content: space-around; padding: 15px;
}
.hi-darien .hi-col-dr {
  width: 12px; height: 45px; background: white;
  border: 2px solid #e5e7eb; border-radius: 6px;
}
.hi-darien .hi-car-dr {
  position: absolute; bottom: 10%; right: 10%; font-size: 2rem;
}
.hi-darien .hi-train-dr {
  position: absolute; bottom: 10%; left: 10%; font-size: 1.5rem;
}

/* ===== GENERIC LOCATION TEMPLATES ===== */

/* Beach Town */
.hi-beach-town .hi-beach-scene {
  position: absolute; inset: 10%;
  animation: hi-float 4s ease-in-out infinite;
}
.hi-beach-town .hi-sky {
  height: 40%; background: linear-gradient(180deg, #7dd3fc, #bae6fd);
}
.hi-beach-town .hi-sea {
  height: 30%; background: linear-gradient(180deg, #0ea5e9, #0284c7);
}
.hi-beach-town .hi-shore {
  height: 30%; background: linear-gradient(180deg, #fcd34d, #fbbf24);
  border-radius: 50% 50% 0 0;
}
.hi-beach-town .hi-palm {
  position: absolute; bottom: 25%; left: 20%; font-size: 3rem;
}
.hi-beach-town .hi-sun-beach {
  position: absolute; top: 10%; right: 20%;
  width: 40px; height: 40px; background: #fbbf24;
  border-radius: 50%; box-shadow: 0 0 30px rgba(251,191,36,0.5);
}

/* Suburban */
.hi-suburban .hi-suburb-scene {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: hi-float 4s ease-in-out infinite;
}
.hi-suburban .hi-houses {
  display: flex; gap: 15px; align-items: flex-end;
}
.hi-suburban .hi-house-sub {
  width: 50px; height: 40px; background: var(--hi-glass);
  border-radius: 4px; position: relative;
}
.hi-suburban .hi-house-sub::before {
  content: ''; position: absolute; top: -20px; left: -5px;
  width: 0; height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 25px solid var(--hi-primary);
}
.hi-suburban .hi-lawn {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 30px; background: #22c55e; border-radius: 15px 15px 0 0;
}
.hi-suburban .hi-mailbox {
  position: absolute; bottom: 35%; right: 10%; font-size: 1.5rem;
}
.hi-suburban .hi-car-sub {
  position: absolute; bottom: 10%; left: 15%; font-size: 1.5rem;
}

/* Urban */
.hi-urban .hi-urban-scene {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: flex; gap: 8px; align-items: flex-end;
  animation: hi-float 4s ease-in-out infinite;
}
.hi-urban .hi-urban-building {
  background: var(--hi-glass); border-radius: 4px 4px 0 0;
}
.hi-urban .hi-urban-building:nth-child(1) { width: 30px; height: 70px; }
.hi-urban .hi-urban-building:nth-child(2) { width: 40px; height: 100px; background: var(--hi-secondary); }
.hi-urban .hi-urban-building:nth-child(3) { width: 35px; height: 85px; }
.hi-urban .hi-urban-building:nth-child(4) { width: 45px; height: 120px; background: var(--hi-primary); }
.hi-urban .hi-urban-building:nth-child(5) { width: 30px; height: 75px; }
.hi-urban .hi-street {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 20px; background: #374151;
}
.hi-urban .hi-street-line {
  position: absolute; bottom: 8px; left: 0; right: 0;
  height: 4px; background: repeating-linear-gradient(90deg, #fbbf24, #fbbf24 20px, transparent 20px, transparent 40px);
}