/* Network page */

/* ---------- Points of presence ---------- */
.net-stats { position: relative; background: var(--gs-black); color: #fff; padding: clamp(80px,10vw,152px) 0; overflow: hidden; }
.net-stats__glow { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 70% at 18% 50%, rgba(181,84,28,.22), rgba(10,11,13,0) 70%); }
.net-stats__grid { position: relative; --gap: clamp(48px,6vw,96px); align-items: center; }
.net-stats__hero { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px; margin-top: 40px; }
.net-stats__16 {
  font: 800 clamp(180px,22vw,320px)/.82 var(--font-display); font-stretch: 125%; letter-spacing: -.05em;
  color: transparent; -webkit-text-stroke: 2px var(--gs-copper-400); text-shadow: 0 0 80px rgba(181,84,28,.35);
  font-variant-numeric: tabular-nums;
}
.net-stats__hero-label { padding-bottom: 18px; display: flex; flex-direction: column; gap: 10px; font: 700 20px/1.25 var(--font-display); font-stretch: 112%; max-width: 200px; }
.net-stats__rule { width: 48px; height: 2px; background: var(--accent); }
.net-stats__legend { display: flex; gap: 28px; margin-top: 40px; font: 500 12px/1 var(--font-mono); letter-spacing: .14em; }
.net-stats__legend span { display: flex; align-items: center; gap: 10px; }
.swatch { width: 12px; height: 12px; border-radius: 2px; }
.swatch--ygn { background: var(--accent); }
.swatch--mdy { background: var(--gs-gold-500); }

.net-rows { display: flex; flex-direction: column; }
.net-row { padding: 32px 0; border-top: 1px solid rgba(255,255,255,.14); display: flex; flex-direction: column; gap: 18px; }
.net-row__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; }
.net-row__main { display: flex; align-items: baseline; gap: 20px; }
.net-row__v { font: 800 clamp(48px,5vw,72px)/1 var(--font-display); font-stretch: 125%; letter-spacing: -.02em; color: #fff; transition: color 400ms; font-variant-numeric: tabular-nums; }
.net-row__l { font: 600 12px/1.4 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.85); }
.net-row__cap { font: 500 12px/1 var(--font-mono); letter-spacing: .1em; color: rgba(255,255,255,.55); white-space: nowrap; }
.net-row__bar { display: flex; gap: 4px; height: 10px; transition: height 400ms var(--ease-out); }
.net-row__a, .net-row__b {
  width: 0; border-radius: 2px; display: flex; align-items: center; padding-left: 12px; box-sizing: border-box; overflow: hidden;
  font: 600 11px/1 var(--font-mono); white-space: nowrap; color: transparent;
  transition: width 1400ms var(--ease-out), color 300ms;
}
.net-row__a { background: var(--accent); }
.net-row__b { background: var(--gs-gold-500); transition-delay: 200ms, 0ms; }
.net-stats.is-visible .net-row__a { width: calc(var(--a) / (var(--a) + var(--b)) * 100% - 2px); }
.net-stats.is-visible .net-row__b { width: calc(var(--b) / (var(--a) + var(--b)) * 100% - 2px); }
.net-row:hover .net-row__v { color: var(--gs-copper-400); }
.net-row:hover .net-row__bar { height: 32px; }
.net-row:hover .net-row__a { color: #fff; }
.net-row:hover .net-row__b { color: var(--gs-black); }

/* ---------- City cards ---------- */
.city-card {
  position: relative; min-height: 520px; height: 100%; box-sizing: border-box; border-radius: var(--radius-md); overflow: hidden;
  color: #fff; background: var(--gs-ink-900); display: flex; flex-direction: column; justify-content: flex-end;
  --sx: 50%; --sy: 50%;
}
.city-card__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(10,11,13,.1) 20%, rgba(10,11,13,.92) 100%); }
.city-card__spot {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 400ms;
  background: radial-gradient(circle 280px at var(--sx) var(--sy), rgba(217,172,60,.32), rgba(181,84,28,.12) 45%, transparent 70%);
}
.city-card.is-lit .city-card__spot { opacity: 1; }
.city-card__body { position: relative; padding: 40px; pointer-events: none; }
.city-card__tag { font: 500 12px/1 var(--font-mono); letter-spacing: .16em; color: var(--gs-gold-400); margin-bottom: 16px; }
.city-card__name { margin: 0 0 28px; font: 800 clamp(40px,5vw,64px)/1 var(--font-display); font-stretch: 125%; letter-spacing: -.02em; }
.city-card__nums { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(255,255,255,.2); }
.city-card__nums > div { padding: 20px 20px 0 0; }
.city-card__nums > div + div { padding: 20px 0 0 20px; border-left: 1px solid rgba(255,255,255,.2); }
.city-card__nums strong { display: block; font: 800 36px/1 var(--font-display); font-stretch: 125%; }
.city-card__nums span { display: block; font: 600 11px/1.4 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-top: 10px; }
@media (max-width: 480px) { .city-card__body { padding: 28px; } }

/* ---------- Showroom & after-sales ---------- */
.showroom__aside { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.showroom__aside p { margin: 0; font: 400 17px/1.6 var(--font-body); color: rgba(255,255,255,.7); }
.showroom__meta { margin-top: 20px; font: 500 11px/1.4 var(--font-mono); letter-spacing: .12em; color: rgba(255,255,255,.5); }
.aftersales { display: flex; flex-direction: column; gap: 32px; }