/* ══════════════════════════════════════════════
   SHELVIAN — CITIES PAGE STYLES
   ══════════════════════════════════════════════ */

body::before{content:'';position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");opacity:.025;pointer-events:none;z-index:0}

/* PAGES */
.page{display:none}
.page.active{display:block}

/* ===== CITIES INDEX ===== */
.ci-hero{padding:136px 32px 64px;max-width:1200px;margin:0 auto}
.ci-hero h1{font-family:var(--f-head);font-size:52px;line-height:1.1;letter-spacing:-0.02em;margin-bottom:16px}
.ci-hero p{font-size:15px;color:var(--text2);max-width:560px;line-height:1.7;margin-bottom:32px}

/* Stats strip */
.stats-strip{display:grid;grid-template-columns:repeat(4,1fr);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh);overflow:hidden;margin-bottom:56px}
.stat-cell{padding:20px 24px;border-right:1px solid var(--border)}
.stat-cell:last-child{border-right:none}
.stat-val{font-family:var(--f-mono);font-size:26px;font-weight:500;letter-spacing:-0.02em;color:var(--dark)}
.stat-val span{font-size:16px}
.stat-lbl{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.08em;font-weight:500;margin-top:2px}

/* Region sections */
.region-section{max-width:1200px;margin:0 auto;padding:0 32px 64px}
.region-label{font-family:var(--f-mono);font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.12em;color:var(--text3);margin-bottom:16px;display:flex;align-items:center;gap:10px}
.region-label::after{content:'';flex:1;height:1px;background:var(--border)}
.city-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.city-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh);overflow:hidden;cursor:pointer;transition:all 200ms var(--ease);text-decoration:none;display:flex;flex-direction:column;position:relative}
.city-card:hover{box-shadow:var(--sh-md);transform:translateY(-2px);border-color:var(--border2)}
.city-card.featured{grid-column:unset}
.city-card-img{height:180px;background:linear-gradient(160deg,#1c1c1c 0%,#2a2a2a 100%);position:relative;overflow:hidden;display:flex;align-items:flex-end;flex-shrink:0}
.city-card-img-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.55) 0%,transparent 60%)}
.city-card-img>svg{position:absolute;bottom:0;left:0;width:100%;height:100%;opacity:0.38}
.city-card-body{padding:16px 20px 18px;flex:1}
.city-skyline{position:absolute;bottom:0;left:0;right:0}
.skyline-label{position:absolute;bottom:10px;left:14px;font-family:var(--f-mono);font-size:9px;font-weight:500;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,0.35);z-index:2}
.city-card-badge{position:absolute;top:12px;right:12px;font-family:var(--f-mono);font-size:9px;font-weight:500;text-transform:uppercase;letter-spacing:.10em;background:var(--lime);color:var(--dark);padding:3px 9px;border-radius:var(--r-pill)}
.city-name{font-family:var(--f-head);font-size:22px;color:var(--dark);margin-bottom:4px}
.city-card.featured .city-name{font-size:28px}
.city-state{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.08em;font-weight:500}
.city-meta{display:flex;gap:16px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.city-meta-item{display:flex;flex-direction:column;gap:2px}
.city-meta-val{font-family:var(--f-mono);font-size:14px;font-weight:500;color:var(--dark)}
.city-meta-key{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.06em}
.city-card-footer{background:var(--elevated);border-top:1px solid var(--border);padding:10px 20px;display:flex;align-items:center;justify-content:space-between}
.city-card-link{font-size:12px;font-weight:600;color:var(--dark);display:flex;align-items:center;gap:4px}
.city-card-link svg{transition:transform 150ms}
.city-card:hover .city-card-link svg{transform:translateX(3px)}

/* Store logos strip */
.store-strip{background:#F5F5F0;border-top:1px solid #E8E8E2;border-bottom:1px solid #E8E8E2;padding:28px 0;overflow:hidden;margin-bottom:0}
.store-strip-track{display:flex;align-items:center;gap:60px;width:max-content;animation:store-scroll 40s linear infinite}
.store-strip:hover .store-strip-track{animation-play-state:paused}
@keyframes store-scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.store-logo{display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0.4;filter:grayscale(100%);transition:opacity 250ms,filter 250ms;cursor:default}
.store-logo:hover{opacity:0.7;filter:grayscale(50%)}
.store-logo svg{height:32px;width:auto}
.store-logo img{height:32px;width:auto;object-fit:contain}

/* Coming soon card */
.city-card.coming-soon{opacity:.7;cursor:default}
.city-card.coming-soon:hover{transform:none;box-shadow:var(--sh);border-color:var(--border)}
.coming-badge{font-family:var(--f-mono);font-size:9px;font-weight:500;text-transform:uppercase;letter-spacing:.10em;background:var(--elevated);color:var(--text3);border:1px solid var(--border);padding:3px 9px;border-radius:var(--r-pill)}

/* ===== CITY DETAIL PAGE ===== */
.cd-hero{padding:96px 32px 0;max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.cd-breadcrumb{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text3);margin-bottom:16px;font-weight:500}
.cd-breadcrumb a{color:var(--text3);text-decoration:none;transition:color 120ms}
.cd-breadcrumb a:hover{color:var(--text)}
.cd-breadcrumb span{opacity:.5}
.cd-hero h1{font-family:var(--f-head);font-size:52px;line-height:1.1;letter-spacing:-0.02em;margin-bottom:14px}
.cd-hero p{font-size:15px;color:var(--text2);line-height:1.7;margin-bottom:28px;max-width:480px}
.cd-cta-group{display:flex;align-items:center;gap:12px;margin-bottom:32px}
.btn-lime{display:inline-block;font-size:14px;font-weight:600;color:#111;background:var(--lime);border:none;cursor:pointer;padding:11px 24px;border-radius:var(--r);transition:all 180ms var(--ease);text-decoration:none}
.btn-lime:hover{background:#bfdf30;transform:translateY(-1px)}

/* City hero stats */
.cd-hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cd-stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px 20px;box-shadow:var(--sh)}
.cd-stat-card.accent{background:var(--dark);border-color:var(--dark)}
.cd-stat-card.accent .cd-stat-val{color:#fff}
.cd-stat-card.accent .cd-stat-lbl{color:rgba(255,255,255,0.5)}
.cd-stat-val{font-family:var(--f-mono);font-size:32px;font-weight:500;letter-spacing:-0.02em;color:var(--dark);line-height:1}
.cd-stat-val .unit{font-size:16px}
.cd-stat-lbl{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.08em;margin-top:6px}
.cd-stat-card.lime{background:var(--lime);border-color:#b5d93a}
.cd-stat-card.lime .cd-stat-val{color:var(--dark)}
.cd-stat-card.lime .cd-stat-lbl{color:rgba(17,17,17,0.6)}

/* Map card */
.cd-map-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh);overflow:hidden;margin-top:0}
.cd-map-inner{height:200px;background:linear-gradient(135deg,#e8e8e0 0%,#d8d8d0 100%);position:relative;display:flex;align-items:center;justify-content:center}
.cd-map-pins{position:absolute;inset:0}
.cd-map-dot{position:absolute;width:10px;height:10px;background:var(--lime);border-radius:50%;border:2px solid var(--dark);box-shadow:0 0 0 3px rgba(203,236,69,0.3)}
.cd-map-pulse{animation:pulse 2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(203,236,69,0.3)}50%{box-shadow:0 0 0 8px rgba(203,236,69,0.1)}}
.cd-map-footer{padding:12px 16px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--border)}
.map-store-count{font-size:12px;color:var(--text2);font-weight:500}
.map-store-count span{font-family:var(--f-mono);font-size:14px;font-weight:500;color:var(--dark)}

/* Retail partners */
.cd-section{max-width:1200px;margin:0 auto;padding:64px 32px 0}
.cd-section-hdr{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:28px}
.cd-section-hdr h2{font-family:var(--f-head);font-size:32px;letter-spacing:-0.02em}
.cd-section-sub{font-size:13px;color:var(--text3);font-weight:500;padding-bottom:4px}
.retailer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.retailer-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px;box-shadow:var(--sh);display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.retailer-icon{width:44px;height:44px;border-radius:var(--r);background:var(--elevated);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:20px;overflow:hidden}
.retailer-icon img{width:100%;height:100%;object-fit:contain;filter:grayscale(100%);opacity:0.6;transition:filter 250ms,opacity 250ms}
.retailer-card:hover .retailer-icon img{filter:grayscale(50%);opacity:0.85}
.retailer-name{font-family:var(--f-head);font-size:16px;color:var(--dark)}
.retailer-count{font-family:var(--f-mono);font-size:12px;color:var(--text3)}
.retailer-badge{font-family:var(--f-mono);font-size:9px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;background:var(--lime);color:var(--dark);padding:3px 8px;border-radius:var(--r-pill)}
.retailer-badge.new{background:var(--elevated);color:var(--text3);border:1px solid var(--border)}

/* Ambassadors (city-specific) */
.amb-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.amb-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh);overflow:hidden;transition:all 200ms var(--ease)}
.amb-card:hover{box-shadow:var(--sh-md);transform:translateY(-2px)}
.amb-avatar{height:180px;background:linear-gradient(160deg,#2a2a2a,#111);display:flex;align-items:center;justify-content:center;font-size:52px;position:relative}
.amb-rating{position:absolute;bottom:10px;right:10px;background:var(--lime);color:var(--dark);font-family:var(--f-mono);font-size:11px;font-weight:500;padding:3px 8px;border-radius:var(--r-pill);display:flex;align-items:center;gap:3px}
.amb-card-body{padding:14px 16px}
.amb-name{font-family:var(--f-head);font-size:16px;margin-bottom:2px}
.amb-role{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;font-weight:500;margin-bottom:10px}
.amb-stats{display:flex;gap:12px;padding-top:10px;border-top:1px solid var(--border)}
.amb-stat{display:flex;flex-direction:column;gap:1px}
.amb-stat-val{font-family:var(--f-mono);font-size:13px;font-weight:500;color:var(--dark)}
.amb-stat-key{font-size:10px;color:var(--text3)}
.amb-card-footer{background:var(--elevated);border-top:1px solid var(--border);padding:9px 16px}
.amb-shifts-bar{height:4px;background:var(--border);border-radius:var(--r-pill);margin-top:4px;overflow:hidden}
.amb-shifts-fill{height:100%;background:var(--lime);border-radius:var(--r-pill)}

/* How it works (city-specific) */
.cd-how-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-top:0}
.how-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:24px;box-shadow:var(--sh)}
.how-num{font-family:var(--f-head);font-size:40px;color:var(--lime);line-height:1;margin-bottom:12px}
.how-title{font-family:var(--f-head);font-size:18px;margin-bottom:8px}
.how-body{font-size:13px;color:var(--text2);line-height:1.6}

/* Testimonials (city-specific) */
.testi-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.testi-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:24px;box-shadow:var(--sh)}
.testi-card.dark{background:var(--dark);border-color:var(--dark)}
.testi-quote{font-family:var(--f-head);font-size:18px;line-height:1.5;color:var(--dark);margin-bottom:16px}
.testi-card.dark .testi-quote{color:#fff}
.testi-author{display:flex;align-items:center;gap:10px}
.testi-avatar{width:36px;height:36px;border-radius:50%;background:var(--elevated);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:16px}
.testi-card.dark .testi-avatar{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.15)}
.testi-name{font-size:13px;font-weight:600;color:var(--dark)}
.testi-card.dark .testi-name{color:#fff}
.testi-role{font-size:11px;color:var(--text3);font-weight:500}
.testi-card.dark .testi-role{color:rgba(255,255,255,0.5)}
.testi-card.lime-card{background:var(--lime);border-color:#b5d93a}
.testi-card.lime-card .testi-quote{color:var(--dark)}
.testi-stars{color:var(--dark);font-size:13px;letter-spacing:1px;margin-bottom:12px;opacity:.7}

/* CTA band */
.cd-cta-band{background:var(--dark);margin:64px 0 0;padding:80px 32px}
.cd-cta-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.cd-cta-band h2{font-family:var(--f-head);font-size:42px;line-height:1.1;letter-spacing:-0.02em;color:#fff;margin-bottom:12px}
.cd-cta-band p{font-size:14px;color:rgba(255,255,255,0.6);line-height:1.7;max-width:420px}
.cd-cta-right{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cd-cta-card{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.10);border-radius:var(--r-lg);padding:18px}
.cd-cta-card-val{font-family:var(--f-mono);font-size:24px;font-weight:500;color:#fff;margin-bottom:4px}
.cd-cta-card-lbl{font-size:11px;color:rgba(255,255,255,0.5);text-transform:uppercase;letter-spacing:.08em}
.cd-cta-btns{display:flex;gap:10px;margin-top:28px;flex-wrap:wrap}

/* City switch banner */
.city-switch{background:var(--surface);border-bottom:1px solid var(--border);padding:12px 32px;display:flex;align-items:center;gap:12px;overflow-x:auto;scrollbar-width:none;margin-top:68px}
.city-switch-label{font-family:var(--f-mono);font-size:10px;text-transform:uppercase;letter-spacing:.10em;color:var(--text3);white-space:nowrap;flex-shrink:0;margin-right:8px}
.city-pill{background:var(--elevated);border:1px solid var(--border);border-radius:var(--r-pill);padding:5px 14px;font-size:12px;font-weight:500;color:var(--text2);white-space:nowrap;cursor:pointer;transition:all 120ms;flex-shrink:0;display:inline-flex;align-items:center;gap:5px}
.city-pill:hover{border-color:var(--border2);color:var(--text)}
.city-pill.active{background:var(--dark);border-color:var(--dark);color:#fff}
.city-pill .dot{width:5px;height:5px;border-radius:50%;background:var(--lime);flex-shrink:0}

/* Animations */
.fade-up{animation:fadeUp 400ms var(--ease) both}
.fade-up-1{animation:fadeUp 400ms 80ms var(--ease) both}
.fade-up-2{animation:fadeUp 400ms 160ms var(--ease) both}
.fade-up-3{animation:fadeUp 400ms 240ms var(--ease) both}
.fade-up-4{animation:fadeUp 400ms 320ms var(--ease) both}

/* Responsive */
@media(max-width:900px){
  .city-grid{grid-template-columns:repeat(3,1fr)}
  .amb-grid{grid-template-columns:1fr 1fr}
  .retailer-grid{grid-template-columns:1fr 1fr}
  .cd-how-grid{grid-template-columns:1fr}
  .testi-grid{grid-template-columns:1fr}
  .cd-hero{grid-template-columns:1fr;gap:32px}
  .cd-cta-inner{grid-template-columns:1fr}
  .stats-strip{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .ci-hero{padding:80px 20px 48px}
  .ci-hero h1,.cd-hero h1{font-size:36px}
  .city-grid{grid-template-columns:repeat(3,1fr)}
  .stats-strip{grid-template-columns:1fr 1fr}
  .amb-grid{grid-template-columns:1fr 1fr}
  .region-section,.cd-section{padding-left:20px;padding-right:20px}
}