/* Destination half of the cross-document view transition opted into by
   styles.css — the "Drop a pin" links point here from several sections. */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: vt-out 200ms cubic-bezier(0.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: vt-in 340ms cubic-bezier(0.22, 1, 0.36, 1) both; }

@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; }
}

@font-face {
  font-family: "Trench Slab";
  src: url("assets/fonts/trench-slab/TrenchSlab-Regular.woff2") format("woff2"),
       url("assets/fonts/trench-slab/TrenchSlab-Regular.woff") format("woff");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

:root {
  --night: #000f08;
  --night-soft: #071810;
  --cream: #f3e6d0;
  --paper: #fff8ea;
  --heritage: #c4ac90;
  --red: #fb3640;
  --ink: #06110b;
  --line: rgba(0, 15, 8, 0.22);
  --line-light: rgba(243, 230, 208, 0.24);
  --font: "Trench Slab", "Arial Narrow", Impact, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --page: clamp(18px, 4vw, 64px);
  --nav-h: 76px;
}

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

html { scroll-behavior: smooth; background: var(--night); }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.4;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea { font: inherit; }

::selection { background: var(--red); color: var(--cream); }

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 10px;
  left: 14px;
  padding: 10px 14px;
  background: var(--red);
  color: var(--night);
  transform: translateY(-150%);
}
.skip-link:focus { transform: none; }

.nav {
  position: fixed;
  z-index: 100;
  inset: 0 0 auto;
  height: var(--nav-h);
  padding: 0 var(--page);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0, 15, 8, 0.96);
  color: var(--cream);
  border-bottom: 1px solid var(--line-light);
  backdrop-filter: blur(14px);
}

.nav-brand { width: clamp(118px, 10.5vw, 158px); line-height: 0; }
.nav-brand img { width: 100%; height: auto; }

.nav-links { display: flex; align-items: center; gap: clamp(20px, 3vw, 46px); }
.nav-links a {
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: 0.69rem;
}
.nav-links a:not(.nav-current):hover,
.nav-links a:not(.nav-current):focus-visible { color: var(--red); }
.nav-current { padding: 10px 14px 9px; border: 1px solid var(--cream); }

.pin-hero {
  padding: calc(var(--nav-h) + clamp(54px, 7vw, 110px)) var(--page) clamp(74px, 9vw, 136px);
  background: var(--night);
  color: var(--cream);
}

.pin-hero-meta {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--line-light);
  color: var(--heritage);
  text-transform: uppercase;
  letter-spacing: 0.17em;
  font-size: 0.63rem;
}

.pin-hero-grid {
  padding-top: clamp(52px, 7vw, 100px);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(300px, 0.6fr);
  align-items: end;
  gap: clamp(48px, 8vw, 140px);
}

.pin-hero h1 {
  margin: 0;
  font-size: clamp(6rem, 14vw, 15rem);
  font-weight: 400;
  line-height: 0.72;
  letter-spacing: -0.065em;
  text-transform: uppercase;
}
.pin-hero h1::first-line { color: var(--red); }

.pin-hero-copy { padding-bottom: 6px; }
.hero-index {
  display: block;
  margin-bottom: 24px;
  color: var(--red);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.66rem;
}
.pin-hero-copy p {
  max-width: 460px;
  margin: 0 0 36px;
  color: var(--heritage);
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
}
.pin-hero-copy a {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  width: 100%;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--cream);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.7rem;
}
.pin-hero-copy a:hover { color: var(--red); border-color: var(--red); }

.pin-progress {
  position: sticky;
  top: var(--nav-h);
  z-index: 50;
  padding: 14px var(--page);
  background: rgba(243, 230, 208, 0.96);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}
.pin-progress-inner {
  max-width: 1380px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(18px, 3vw, 48px);
}
.progress-label,
.pin-progress-count {
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.62rem;
  white-space: nowrap;
}
.pin-progress-count b { color: var(--red); font-weight: 400; }
.pin-progress-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.pin-step-dot { height: 4px; background: rgba(0, 15, 8, 0.14); transition: background 0.35s ease; }
.pin-step-dot.done { background: var(--red); }

.form-surface { background: var(--cream); }
.pin-form { max-width: 1380px; margin: 0 auto; padding: 0 var(--page); }

.q {
  display: grid;
  grid-template-columns: minmax(240px, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(48px, 8vw, 140px);
  padding: clamp(76px, 9vw, 136px) 0;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: calc(var(--nav-h) + 70px);
}
.q-intro { align-self: start; position: sticky; top: calc(var(--nav-h) + 70px); }
.q-num {
  display: block;
  margin-bottom: 24px;
  color: var(--red);
  text-transform: uppercase;
  letter-spacing: 0.17em;
  font-size: 0.66rem;
}
.q-title {
  max-width: 580px;
  margin: 0;
  font-size: clamp(2.6rem, 5.2vw, 5.8rem);
  font-weight: 400;
  line-height: 0.86;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}
.q-help {
  max-width: 440px;
  margin: 28px 0 0;
  color: rgba(0, 15, 8, 0.68);
  font-size: clamp(1rem, 1.25vw, 1.18rem);
}
.q-fields { min-width: 0; align-self: start; }

.field { display: flex; flex-direction: column; gap: 10px; }
.field + .field { margin-top: 28px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field label,
.product-fieldset legend {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: rgba(0, 15, 8, 0.72);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.64rem;
}
.field label span { color: var(--red); }

.pin-input,
.pin-textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(0, 15, 8, 0.34);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  outline: none;
  padding: 17px 18px 15px;
  font-size: clamp(1rem, 1.25vw, 1.18rem);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.pin-textarea { min-height: 190px; resize: vertical; line-height: 1.55; }
.pin-input::placeholder,
.pin-textarea::placeholder { color: rgba(0, 15, 8, 0.42); opacity: 1; }
.pin-input:hover,
.pin-textarea:hover { border-color: rgba(0, 15, 8, 0.62); }
.pin-input:focus,
.pin-textarea:focus {
  border-color: var(--red);
  background: #fffdf7;
  box-shadow: 0 0 0 3px rgba(251, 54, 64, 0.15);
}
.pin-input.err,
.pin-textarea.err { border-color: var(--red); box-shadow: 0 0 0 3px rgba(251, 54, 64, 0.15); }
.char-count { align-self: flex-end; color: rgba(0, 15, 8, 0.55); font-size: 0.68rem; letter-spacing: 0.1em; }
.char-count.over { color: var(--red); }

.city-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.city-choice { position: relative; min-width: 0; }
.city-choice input,
.chip input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.city-choice span {
  position: relative;
  min-height: 112px;
  padding: 22px 46px 20px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}
.city-choice:nth-child(odd) span { border-left: 1px solid var(--line); }
.city-choice span::after {
  content: "";
  position: absolute;
  top: 20px;
  right: 18px;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(0, 15, 8, 0.5);
  border-radius: 50%;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.city-choice strong { font-size: clamp(1.45rem, 2.2vw, 2.3rem); font-weight: 400; text-transform: uppercase; }
.city-choice em { color: rgba(0, 15, 8, 0.58); font-size: 0.61rem; font-style: normal; letter-spacing: 0.13em; text-transform: uppercase; }
.city-choice:hover span { background: rgba(255, 248, 234, 0.72); }
.city-choice input:checked + span { background: var(--night); color: var(--cream); }
.city-choice input:checked + span em { color: var(--heritage); }
.city-choice input:checked + span::after { background: var(--red); border-color: var(--red); box-shadow: inset 0 0 0 3px var(--night); }
.city-choice input:focus-visible + span { outline: 3px solid var(--red); outline-offset: -3px; }
.city-choice-new { grid-column: 1 / -1; }
.city-choice-new span { min-height: 92px; border-left: 1px solid var(--line); }

.new-city-wrap { display: none; margin-top: 26px; }
.new-city-wrap.show { display: block; }

.product-fieldset { margin: 0; padding: 0; border: 0; }
.product-fieldset legend { width: 100%; margin-bottom: 13px; }
.chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.chip { position: relative; }
.chip span {
  position: relative;
  min-height: 58px;
  padding: 17px 46px 15px 18px;
  display: flex;
  align-items: center;
  border: 1px solid rgba(0, 15, 8, 0.34);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}
.chip span::after {
  content: "+";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-52%);
  color: var(--red);
  font-size: 1.3rem;
}
.chip:hover span { border-color: var(--night); }
.chip input:checked + span { background: var(--red); color: var(--night); border-color: var(--red); }
.chip input:checked + span::after { content: "✓"; color: var(--night); }
.chip input:focus-visible + span { outline: 3px solid var(--night); outline-offset: 2px; }

.volume { margin-top: 54px; padding: 28px; border: 1px solid var(--line); background: var(--paper); }
.volume-heading { display: flex; justify-content: space-between; gap: 24px; align-items: baseline; margin-bottom: 30px; }
.volume-heading > span { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.64rem; }
.volume-heading strong { color: var(--red); font-size: clamp(1rem, 1.5vw, 1.35rem); font-weight: 400; text-align: right; text-transform: uppercase; }

.volume input[type="range"] {
  --fill: 50%;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 26px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  outline: none;
}
.volume input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  border: 1px solid var(--night);
  background: linear-gradient(90deg, var(--red) 0 var(--fill), rgba(0, 15, 8, 0.13) var(--fill) 100%);
}
.volume input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -9px;
  border: 4px solid var(--paper);
  border-radius: 50%;
  background: var(--night);
  box-shadow: 0 0 0 2px var(--red);
}
.volume input[type="range"]::-moz-range-track { height: 8px; border: 1px solid var(--night); background: rgba(0, 15, 8, 0.13); }
.volume input[type="range"]::-moz-range-progress { height: 8px; background: var(--red); }
.volume input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border: 4px solid var(--paper); border-radius: 50%; background: var(--night); box-shadow: 0 0 0 2px var(--red); }
.volume input[type="range"]:focus-visible { outline: 2px solid var(--red); outline-offset: 5px; }
.volume-scale { display: flex; justify-content: space-between; margin-top: 12px; color: rgba(0, 15, 8, 0.58); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.58rem; }

.consent { position: relative; margin-top: 28px; display: grid; grid-template-columns: 22px 1fr; align-items: start; gap: 13px; cursor: pointer; }
.consent input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.consent-box { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid var(--night); background: var(--paper); }
.consent input:checked + .consent-box { background: var(--red); border-color: var(--red); }
.consent input:checked + .consent-box::after { content: "✓"; color: var(--night); font-size: 0.82rem; }
.consent input:focus-visible + .consent-box { outline: 3px solid rgba(251, 54, 64, 0.35); outline-offset: 2px; }
.consent > span:last-child { color: rgba(0, 15, 8, 0.7); font-size: 0.92rem; line-height: 1.55; }

.honeypot { position: absolute; left: -9999px; }
.pin-submit {
  margin: 0 calc(var(--page) * -1);
  padding: clamp(60px, 8vw, 110px) var(--page);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 30px;
  background: var(--red);
  color: var(--night);
}
.pin-submit > div > span { text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.62rem; }
.pin-submit > div > p { margin: 12px 0 0; font-size: clamp(1.6rem, 3vw, 3rem); text-transform: uppercase; }
.btn {
  min-width: 210px;
  padding: 17px 20px 15px;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  border: 1px solid var(--night);
  border-radius: 0;
  background: var(--night);
  color: var(--cream);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  font-size: 0.7rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.btn:hover,
.btn:focus-visible { background: var(--cream); color: var(--night); }
.btn:disabled { opacity: 0.68; cursor: wait; }
.pin-note { grid-column: 1 / -1; min-height: 1.4em; margin: 0; font-size: 0.85rem; }
.pin-note.err { color: var(--night); font-weight: 700; }

.pin-done { display: none; max-width: 1000px; margin: 0 auto; padding: clamp(100px, 12vw, 180px) var(--page); text-align: center; }
.pin-done.show { display: block; animation: done-in 0.65s var(--ease) both; }
@keyframes done-in { from { opacity: 0; transform: translateY(24px); } }
.pin-done h2 { margin: 0; font-size: clamp(4rem, 10vw, 9rem); font-weight: 400; line-height: 0.8; letter-spacing: -0.05em; text-transform: uppercase; }
.pin-done > p { max-width: 560px; margin: 30px auto 40px; color: rgba(0, 15, 8, 0.7); font-size: 1.1rem; }
.pin-done-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.btn-ghost { background: transparent; color: var(--night); }
.pin-receipt { margin: 56px auto 0; padding: 30px; max-width: 620px; border: 1px solid var(--line); background: var(--paper); text-align: left; }
.pin-receipt-label { display: block; margin-bottom: 20px; color: var(--red); text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.64rem; }
.pin-receipt dl { display: grid; grid-template-columns: 80px 1fr; gap: 12px 24px; margin: 0; }
.pin-receipt dt { color: rgba(0, 15, 8, 0.58); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.62rem; }
.pin-receipt dd { margin: 0; }

.pin-footer { padding: clamp(60px, 8vw, 110px) var(--page) 34px; background: var(--night); color: var(--cream); }
.pin-footer > img { width: min(100%, 1180px); margin: 0 auto; }
.pin-footer-meta { margin-top: 46px; padding-top: 22px; display: grid; grid-template-columns: 1fr auto auto; gap: 44px; border-top: 1px solid var(--line-light); color: var(--heritage); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.61rem; }
.pin-footer-meta a { color: var(--cream); text-decoration: none; }
.pin-footer-meta a:hover { color: var(--red); }

@media (max-width: 900px) {
  .pin-hero-grid { grid-template-columns: 1fr; align-items: start; }
  .pin-hero-copy { max-width: 540px; }
  .q { grid-template-columns: 1fr; gap: 48px; }
  .q-intro { position: static; }
  .q-help { max-width: 620px; }
  .pin-footer-meta { grid-template-columns: 1fr 1fr; }
  .pin-footer-meta span:last-child { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  :root { --page: 18px; --nav-h: 66px; }
  .nav-links a:nth-child(2) { display: none; }
  .nav-links { gap: 14px; }
  .nav-links a { font-size: 0.58rem; }
  .nav-current { padding: 9px 10px 8px; }
  .nav-brand { width: 112px; }
  .pin-hero { padding-bottom: 76px; }
  .pin-hero-meta { font-size: 0.55rem; }
  .pin-hero h1 { font-size: clamp(5rem, 25vw, 8rem); }
  .pin-progress { padding-block: 11px; }
  .progress-label { display: none; }
  .pin-progress-inner { grid-template-columns: 1fr auto; }
  .q { padding-block: 70px; gap: 38px; }
  .q-title { font-size: clamp(2.5rem, 13vw, 4rem); }
  .city-choices,
  .chips,
  .field-row { grid-template-columns: 1fr; }
  .city-choice:nth-child(even) span { border-left: 1px solid var(--line); }
  .city-choice span { min-height: 96px; }
  .volume { margin-top: 38px; padding: 22px 16px; }
  .volume-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
  .volume-heading strong { text-align: left; }
  .pin-submit { grid-template-columns: 1fr; }
  .pin-submit .btn { width: 100%; }
  .pin-note { grid-column: auto; }
  .pin-footer-meta { grid-template-columns: 1fr; gap: 10px; }
  .pin-footer-meta span:last-child { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   POLISH PASS — targets, focus, device coverage

   The pin form is the site's only conversion surface, so it answers to the
   same floors as the index: 44px on anything tappable, a visible focus ring
   on everything reachable by keyboard, and clearance for the notch.
   ══════════════════════════════════════════════════════════════════════════ */

:root { --tap: 44px; }

/* ── Notch and home indicator ───────────────────────────────────────────── */
.nav {
  padding-left: calc(var(--page) + env(safe-area-inset-left));
  padding-right: calc(var(--page) + env(safe-area-inset-right));
}

@media (orientation: landscape) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

.pin-footer { padding-bottom: calc(34px + env(safe-area-inset-bottom)); }

/* ── Tap targets ────────────────────────────────────────────────────────── */

/* The wordmark is 38px tall and is the way back to the index. */
.nav-brand {
  display: flex;
  align-items: center;
  min-height: var(--tap);
}

/* "Home" and "Cities" were bare 14px text — 13px tall as a hit area. */
.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}

/* "Start the request" and "Return home" are ruled links, so the underline has
   to stay on its baseline: an overlay grows the target without moving it. */
.pin-hero-copy a,
.pin-footer-meta a {
  position: relative;
}

.pin-hero-copy a::before,
.pin-footer-meta a::before {
  content: "";
  position: absolute;
  inset: -14px -8px;
}

/* ── Focus ──────────────────────────────────────────────────────────────── */

/* These four were reachable by keyboard with nothing to show for it. */
.nav-brand:focus-visible,
.nav-current:focus-visible,
.pin-hero-copy a:focus-visible,
.pin-footer-meta a:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 4px;
}

.pin-hero-copy a:focus-visible,
.pin-footer-meta a:focus-visible { color: var(--red); }

/* ── Contrast ───────────────────────────────────────────────────────────── */

/* .pin-footer-meta runs at 0.61rem — 9.8px, under wide tracking. */
.pin-footer-meta { font-size: max(11px, 0.61rem); }

/* ── Short viewports ────────────────────────────────────────────────────── */

/* The sticky progress rail sits under a fixed nav. On a landscape phone the
   two together eat most of the screen, leaving barely a question visible. */
@media (max-height: 520px) {
  :root { --nav-h: 58px; }
  .pin-progress { position: static; }
}

/* The volume dial is the one control on the form you drag rather than tap, and
   at 26px tall the whole strip was under the thumb's own footprint. Growing the
   input's box (not the track) widens the grab area; the track stays 8px, so the
   dial looks identical. The Firefox thumb was also 18px against WebKit's 24 —
   same control, two sizes. */
.volume input[type="range"] { height: var(--tap); }
.volume input[type="range"]::-webkit-slider-thumb { margin-top: -8px; }
.volume input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; }

/* 0.58rem is 9.3px, and these are the labels that say what the dial means. */
.volume-scale {
  font-size: max(10.5px, 0.58rem);
  color: rgba(0, 15, 8, 0.72);
}

.volume-heading > span { font-size: max(11px, 0.64rem); }

/* 27px wide with 20px of clear space each side clears WCAG's spacing
   exception, but not Apple's 44. Padding plus a cancelling margin costs
   nothing visually. */
.nav-links a:not(.nav-current) {
  padding-inline: 9px;
  margin-inline: -9px;
}

.pin-hero-copy a::before,
.pin-footer-meta a::before { inset: -15px -8px; }