/* ============================================================================
   /interest — "Bring Makeway to your city."
   Standalone page: no nav, logotype only. Full-bleed CARTO dark coverage map
   with HTML markers overlaid, one chip field that collects every selection
   however it was made, then contact.

   Tiles match the dashboard's Territory map (commit 6ea4852): OpenStreetMap
   data, CARTO dark_all styling. Same source of truth, same look.
   ========================================================================= */

@font-face { font-family:'Switzer'; font-weight:400; font-display:swap;
             src:url('../fonts/Switzer-Regular.otf')  format('opentype'); }
@font-face { font-family:'Switzer'; font-weight:500; font-display:swap;
             src:url('../fonts/Switzer-Medium.otf')   format('opentype'); }
@font-face { font-family:'Switzer'; font-weight:600; font-display:swap;
             src:url('../fonts/Switzer-Semibold.otf') format('opentype'); }

/* Field tokens track the Makeway design system (colors_and_type.css) rather than
   the hand-picked blue-greys this page shipped with. The system's input is FILLED
   on --grey-400 with no resting stroke, and focus lifts the surface a step while
   revealing blue; the old treatment was the inverse shape (a near-black hole inside
   a permanent grey outline) in hexes that sat off the neutral ramp. */
:root {
  --ig-bg:#000;
  --ig-ink:#ededed;          /* --text-primary   (was #fff) */
  --ig-body:#d7d7d7;
  --ig-muted:#b3b3b3;        /* --text-secondary (was #a8adb1) */
  --ig-dim:#787d82;
  --ig-line:#2a2a2a;
  --ig-field:#272727;        /* --grey-400       (was #0d0f11) */
  --ig-field-hi:#2f2f2f;     /* --grey-500, the focus lift */
  --ig-border:transparent;   /* filled, not outlined (was #2d3236) */
  --ig-focus:#80baf8;        /* --border-active / --mw-1100 */
  --ig-placeholder:#888;     /* --text-search    (was #5f656a) */
  --ig-accent:#3084d5;
  --ig-accent-hi:#469bee;
  --ig-error:#e24949;        /* --tomato-900     (was #ff6b6b) */
  /* matched to CARTO light_nolabels' land fill, so the band never flashes a
     different value between page paint and the first tile landing */
  --ig-map-bg:#e9eaec;
}

*,*::before,*::after { box-sizing:border-box; }

.ig-body {
  margin:0; background:var(--ig-bg); color:var(--ig-ink);
  font-family:'Switzer',-apple-system,"Helvetica Neue",Arial,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

.ig-vh {
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}
.ig-hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---- masthead: the logotype is the only chrome ----
   160px wide, matching .image in the Webflow nav on every other page. This was
   11px tall (66px wide), which made the same home link read 2.4x smaller here
   than it does on the home page. The nav logo is 160px at every breakpoint,
   phones included, so there is no size step to mirror. */
.ig-mast { padding:22px 26px; }
.ig-wordmark { display:block; width:160px; height:auto; }
.ig-mast a { display:inline-block; border-radius:4px; }

/* ---- header ---- */
.ig-head { padding:40px 26px 38px; text-align:center; }
.ig-head h1 {
  font-weight:600; font-size:clamp(28px,4.6vw,42px); line-height:1.06;
  letter-spacing:-.02em; margin:0 0 16px; color:var(--ig-ink); text-wrap:balance;
}
.ig-head p {
  margin:0 auto; max-width:54ch; color:var(--ig-body);
  font-size:clamp(15px,1.5vw,17px); line-height:1.7;
}

/* ---- full-bleed map band ----
   The band is LIGHT on a black page: it is the one bright object on the page,
   and it meets the black with a clean edge rather than a fade. A fade only
   works between two similar values — fading a light map to black just produces
   a grey smudge across the map's top and bottom. So there is deliberately no
   ::after gradient here. Anything layered over the tiles later must sit below
   .leaflet-marker-pane (600) and above .leaflet-tile-pane (200), which works
   only because #ig-map sets no z-index and creates no stacking context. */
.ig-mapband { position:relative; width:100%; height:clamp(380px,52vh,560px); background:var(--ig-map-bg); }
#ig-map { position:absolute; inset:0; background:var(--ig-map-bg); }

/* a quiet placeholder until tiles paint, matched to the light basemap so the
   band never flashes dark before the first tile lands */
.ig-maploading {
  position:absolute; inset:0; background:var(--ig-map-bg); z-index:1;
  transition:opacity .4s ease; pointer-events:none;
}
.ig-mapband.is-ready .ig-maploading { opacity:0; }

/* Leaflet chrome, repainted for a light basemap */
.leaflet-container { background:var(--ig-map-bg); font-family:inherit; outline:none; }
.leaflet-control-attribution {
  background:rgba(255,255,255,.72) !important; color:#5b656e !important;
  font-size:9.5px !important; padding:2px 7px !important;
  border-radius:5px 0 0 0;
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
.leaflet-control-attribution a { color:#39424a !important; }

/* ---- markers ---- */
.ig-mk {
  display:flex; align-items:center; gap:9px; background:none; border:0; padding:4px;
  margin:0; font:inherit; color:#fff; white-space:nowrap;
}
.ig-mk--pick { cursor:pointer; }
.ig-mk__dot {
  width:11px; height:11px; border-radius:50%; flex:0 0 auto;
  border:1.5px solid #7d848a; background:rgba(0,0,0,.55);
  transition:background .18s, border-color .18s;
}
.ig-mk__tag {
  display:inline-flex; align-items:center; gap:5px;
  background:rgba(8,10,12,.82); border:1px solid #2f353b; border-radius:999px;
  padding:5px 12px; font-size:12.5px; color:#c9ced2;
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  transition:background .18s, border-color .18s, color .18s;
}
.ig-tick { width:0; height:13px; opacity:0; flex:0 0 auto; transition:width .18s, opacity .18s; }

.ig-mk--pick:hover .ig-mk__tag { border-color:#4d545a; color:#fff; }
.ig-mk--pick:hover .ig-mk__dot { border-color:#b9bec2; }
.ig-mk--pick:focus-visible { outline:2px solid var(--ig-accent-hi); outline-offset:2px; border-radius:999px; }
.ig-mk--pick.is-on .ig-mk__dot { background:var(--ig-accent); border-color:var(--ig-accent); }
.ig-mk--pick.is-on .ig-mk__tag { background:var(--ig-accent); border-color:var(--ig-accent); color:#fff; }
.ig-mk--pick.is-on .ig-tick { width:13px; opacity:1; }

/* Hoboken: live. Checked, pulsing, and not a control — there is nothing to request. */
.ig-mk--live .ig-mk__dot { background:var(--ig-accent); border-color:var(--ig-accent); width:13px; height:13px; }
.ig-mk--live .ig-mk__tag { background:var(--ig-accent); border-color:var(--ig-accent); color:#fff; font-weight:500; }
.ig-mk--live .ig-tick { width:13px; opacity:1; }
.ig-mk__pulse {
  position:absolute; left:4px; top:50%; width:13px; height:13px; margin-top:-6.5px;
  border-radius:50%; background:var(--ig-accent); opacity:.5;
  animation:ig-pulse 2.4s cubic-bezier(.2,.6,.4,1) infinite;
}
@keyframes ig-pulse {
  0%   { transform:scale(1);   opacity:.5; }
  70%  { transform:scale(4.2); opacity:0;  }
  100% { transform:scale(4.2); opacity:0;  }
}

/* ---- form ---- */
.ig-form { max-width:520px; margin:0 auto; padding:40px 26px 20px; }

/* #ig-chips is display:contents so each chip becomes a direct flex child of the
   field. As a normal span it was ONE flex item, so the gap applied between the
   whole chip group and the input while the chips themselves sat flush at 0px. */
#ig-chips { display:contents; }

.ig-cityfield {
  display:flex; flex-wrap:wrap; align-items:center; gap:11px; row-gap:11px;
  background:var(--ig-field); border:1px solid var(--ig-border); border-radius:12px;
  padding:12px; min-height:54px; cursor:text;
  transition:border-color .12s ease, background .12s ease;
}
.ig-cityfield:focus-within { border-color:var(--ig-focus); background:var(--ig-field-hi); }
.ig-cityfield.is-bad { border-color:var(--ig-error); }

.ig-chip {
  display:inline-flex; align-items:center; gap:6px; background:var(--ig-accent);
  color:#fff; border-radius:999px; padding:6px 7px 6px 13px; font-size:12.5px;
  line-height:1.3; white-space:nowrap;
}
.ig-chip__x {
  display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; border:0; border-radius:50%; padding:0; flex:0 0 auto;
  background:rgba(0,0,0,.28); color:#fff; cursor:pointer;
}
.ig-chip__x svg { width:10px; height:10px; }
.ig-chip__x:hover { background:rgba(0,0,0,.5); }

#ig-typed {
  flex:1 1 130px; min-width:130px; background:none; border:0; outline:0;
  color:var(--ig-ink); caret-color:var(--ig-accent);
  font-family:inherit; font-size:16px; padding:6px 3px;  /* 16px avoids iOS zoom-on-focus */
}
#ig-typed::placeholder { color:var(--ig-placeholder); }

.ig-hr { border:0; border-top:1px solid var(--ig-line); margin:34px 0; }

.ig-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.ig-field { display:grid; gap:6px; margin-bottom:20px; }
.ig-field label { font-size:12px; font-weight:500; color:var(--ig-muted); }
.ig-opt { color:var(--ig-placeholder); font-weight:400; }
/* .mw-input, verbatim: radius 12 is the system's input step (the ladder is
   3/7/12/20/999 — the 9px this had is not on it), 14/16 padding, 16/24 type. */
.ig-field input {
  background:var(--ig-field); border:1px solid var(--ig-border); border-radius:12px;
  padding:14px 16px; font-size:16px; line-height:24px;   /* 16px avoids iOS zoom-on-focus */
  color:var(--ig-ink); font-family:inherit; width:100%;
  caret-color:var(--ig-accent);
  transition:border-color .12s ease, background .12s ease;
}
.ig-field input:focus { outline:0; border-color:var(--ig-focus); background:var(--ig-field-hi); }
.ig-field input.is-bad { border-color:var(--ig-error); }
.ig-field input::placeholder { color:var(--ig-placeholder); }

.ig-consent { display:flex; gap:12px; align-items:flex-start; margin:8px 0 30px; }
.ig-consent input[type=checkbox] {
  width:17px; height:17px; margin:3px 0 0; flex:0 0 auto;
  accent-color:var(--ig-accent); cursor:pointer;
}
.ig-consent label { font-size:13px; color:var(--ig-body); cursor:pointer; }
.ig-fine { font-size:11.5px; color:var(--ig-dim); line-height:1.55; margin:6px 0 0; }

/* small pill, deliberately quieter than the 45px nav button */
.ig-submit {
  display:inline-flex; align-items:center; justify-content:space-between; gap:12px;
  height:38px; padding:0 6px 0 16px; border:0; border-radius:12px;
  background:var(--ig-accent); color:#fff; font-family:inherit; font-size:13px;
  cursor:pointer; transition:background .2s, opacity .2s;
}
.ig-submit:hover { background:var(--ig-accent-hi); }
.ig-submit[disabled] { opacity:.55; cursor:default; }
/* Distinct from .ig-chip (the city token) on purpose — one class, one job. */
.ig-arrow {
  width:26px; height:26px; border-radius:999px; background:#000; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
}
.ig-arrow svg { width:13px; height:13px; color:#fff; }

.ig-err { margin:0; font-size:12px; color:var(--ig-error); }
.ig-field .ig-err { margin-top:-2px; }
.ig-err--form { margin-top:16px; }

/* ---- confirmation, replaces the form in place ---- */
.ig-done { max-width:520px; margin:0 auto; padding:44px 26px 20px; text-align:center; }
.ig-done h2 {
  margin:0 0 10px; font-size:22px; font-weight:600; color:#fff; letter-spacing:-.01em;
}
.ig-done p { margin:0; font-size:14px; color:var(--ig-body); line-height:1.7; }

/* ---- footer ---- */
.ig-foot {
  display:flex; gap:22px; justify-content:center; flex-wrap:wrap;
  padding:44px 26px 40px; border-top:1px solid var(--ig-line); margin-top:44px;
}
.ig-foot a { color:var(--ig-dim); font-size:12.5px; text-decoration:none; }
.ig-foot a:hover { color:var(--ig-body); }

a:focus-visible, button:focus-visible, input:focus-visible {
  outline:2px solid var(--ig-accent-hi); outline-offset:2px;
}

@media (max-width:820px) {
  .ig-mapband { height:clamp(420px,62vh,540px); }
  .ig-mk__tag { font-size:11px; padding:4px 9px; }
  .ig-mk__dot { width:10px; height:10px; }
}
@media (max-width:560px) {
  .ig-head { padding:30px 22px 30px; }
  .ig-form { padding:34px 22px 20px; }
  .ig-grid2 { grid-template-columns:1fr; gap:0; }
  .ig-done { padding:38px 22px 20px; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none !important; transition:none !important; }
  .ig-mk__pulse { opacity:.32; }
}