/* ============================================================
   1-800-FOR-A-TOW — Launch Wireframe
   Base tokens + Nexus-derived, roadside-emergency palette
   ============================================================ */

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

html {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

:root {
  /* Type scale */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.25rem);
  --text-hero: clamp(2.5rem, 1rem + 5vw, 4.75rem);

  /* Spacing */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
  --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem;

  /* Surfaces — asphalt night */
  --color-bg: #0e1116;
  --color-surface: #151a21;
  --color-surface-2: #1a2029;
  --color-surface-offset: #202733;
  --color-divider: #2a323f;
  --color-border: #333c4a;

  /* Text */
  --color-text: #eef1f5;
  --color-text-muted: #9aa4b3;
  --color-text-faint: #5f6a7a;
  --color-text-inverse: #0e1116;

  /* Primary Accent — hazard amber */
  --color-primary: #ff9d1f;
  --color-primary-hover: #ffb347;
  --color-primary-active: #e8850a;
  --color-primary-highlight: #3a2c15;

  /* Urgent CTA — signal red */
  --color-urgent: #ff4d3d;
  --color-urgent-hover: #ff6a5c;
  --color-urgent-active: #e5392a;

  /* Available / open status */
  --color-success: #3ddc84;
  --color-success-highlight: #12301f;

  --radius-sm: 0.375rem; --radius-md: 0.625rem; --radius-lg: 1rem; --radius-xl: 1.5rem; --radius-full: 9999px;
  --shadow-md: 0 8px 24px rgba(0,0,0,0.35);
  --shadow-lg: 0 20px 48px rgba(0,0,0,0.45);
  --transition: 180ms cubic-bezier(0.16,1,0.3,1);

  --font-display: 'Space Grotesk', 'Helvetica Neue', sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', sans-serif;
}

body {
  min-height: 100dvh;
  line-height: 1.55;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-bg);
  background-image:
    radial-gradient(circle at 15% 0%, rgba(255,157,31,0.08), transparent 45%),
    radial-gradient(circle at 100% 20%, rgba(255,77,61,0.06), transparent 40%);
}

img, svg { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--font-display); text-wrap: balance; line-height: 1.1; letter-spacing: -0.01em; }
p, li { text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: var(--radius-sm); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

.wrap { max-width: 1160px; margin-inline: auto; padding-inline: var(--space-5); }

/* ---------- Top status bar ---------- */
.status-bar {
  background: var(--color-surface-offset);
  border-bottom: 1px solid var(--color-divider);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.status-bar .wrap { display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding-block: var(--space-2); flex-wrap: wrap; text-align: center; }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-success); box-shadow: 0 0 0 0 rgba(61,220,132,0.7); animation: pulse 2s infinite; flex-shrink: 0; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(61,220,132,0.55); } 70% { box-shadow: 0 0 0 7px rgba(61,220,132,0); } 100% { box-shadow: 0 0 0 0 rgba(61,220,132,0); } }
.status-bar strong { color: var(--color-success); font-weight: 600; }

/* ---------- Header ---------- */
header.site {
  position: sticky; top: 0; z-index: 50;
  background: rgba(14,17,22,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-divider);
}
header.site .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-3); }
.brand { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 1; min-width: 0; }
.brand svg { width: 34px; height: 34px; flex-shrink: 0; }
.brand-word { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.brand-word .num { font-family: var(--font-display); font-weight: 700; font-size: clamp(0.95rem, 0.85rem + 0.6vw, 1.25rem); color: var(--color-text); white-space: nowrap; }
.brand-word .num span { color: var(--color-primary); }
.brand-word .tag { font-size: var(--text-xs); color: var(--color-text-faint); white-space: nowrap; }

.call-now-header {
  display: flex; align-items: center; gap: var(--space-2);
  background: var(--color-urgent);
  color: #fff;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: var(--text-sm);
  box-shadow: var(--shadow-md);
  white-space: nowrap;
  transition: transform var(--transition), background var(--transition), box-shadow var(--transition);
  flex-shrink: 0;
}
.call-now-header:hover { background: var(--color-urgent-hover); transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.call-now-header:active { transform: translateY(0); background: var(--color-urgent-active); }
.call-now-header svg { width: 18px; height: 18px; flex-shrink: 0; animation: ring 2.4s infinite; }
@keyframes ring { 0%,100% { transform: rotate(0); } 5% { transform: rotate(-15deg); } 10% { transform: rotate(12deg); } 15% { transform: rotate(-8deg); } 20% { transform: rotate(0); } }
.call-now-header .label-full { display: inline; }
.call-now-header .label-short { display: none; }
@media (max-width: 420px) {
  .call-now-header .label-full { display: none; }
  .call-now-header .label-short { display: inline; }
  .call-now-header { padding: var(--space-3) var(--space-4); }
}

/* ---------- Hero ---------- */
.hero { padding-block: var(--space-16) var(--space-12); position: relative; overflow: hidden; }
.hero .wrap { display: flex; flex-direction: column; gap: var(--space-6); text-align: center; align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); background: var(--color-primary-highlight); color: var(--color-primary); border: 1px solid rgba(255,157,31,0.35); padding: var(--space-1) var(--space-4); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; }
.hero h1 { font-size: var(--text-hero); font-weight: 700; max-width: 18ch; }
.hero h1 .accent { color: var(--color-primary); }
.hero p.lede { font-size: var(--text-lg); color: var(--color-text-muted); max-width: 46ch; }

.hero-ctas { display: flex; flex-direction: column; gap: var(--space-3); width: 100%; max-width: 420px; }
.btn { display: flex; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-5) var(--space-6); border-radius: var(--radius-lg); font-weight: 700; font-size: var(--text-lg); transition: transform var(--transition), background var(--transition), box-shadow var(--transition); }
.btn svg { width: 24px; height: 24px; flex-shrink: 0; }
.btn-primary { background: var(--color-urgent); color: #fff; box-shadow: var(--shadow-lg); }
.btn-primary:hover { background: var(--color-urgent-hover); transform: translateY(-2px); }
.btn-primary .sub { display: block; font-size: var(--text-xs); font-weight: 500; opacity: 0.85; margin-top: 2px; }
.btn-secondary { background: var(--color-surface-2); color: var(--color-text); border: 1px solid var(--color-border); font-size: var(--text-base); }
.btn-secondary:hover { background: var(--color-surface-offset); border-color: var(--color-primary); }
.hero-note { font-size: var(--text-xs); color: var(--color-text-faint); }

.trust-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-6) var(--space-10); margin-top: var(--space-8); padding-top: var(--space-8); border-top: 1px solid var(--color-divider); width: 100%; }
.trust-item { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); }
.trust-item .num { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; color: var(--color-primary); }
.trust-item .lbl { font-size: var(--text-xs); color: var(--color-text-muted); text-align: center; }

/* ---------- Section shell ---------- */
section { padding-block: var(--space-16); }
.section-head { text-align: center; max-width: 640px; margin: 0 auto var(--space-10); display: flex; flex-direction: column; gap: var(--space-3); align-items: center; }
.section-head .kicker { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-primary); }
.section-head h2 { font-size: var(--text-2xl); }
.section-head p { color: var(--color-text-muted); font-size: var(--text-base); }

/* ---------- Map / service area ---------- */
.map-section { background: var(--color-surface); border-top: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); }
.map-shell { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 860px) { .map-shell { grid-template-columns: 1.3fr 1fr; align-items: stretch; } }
.map-card { position: relative; border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--color-border); box-shadow: var(--shadow-lg); min-height: 380px; background: var(--color-surface-2); }
#map { position: absolute; inset: 0; }
.map-legend { position: absolute; left: var(--space-4); bottom: var(--space-4); background: rgba(14,17,22,0.85); backdrop-filter: blur(6px); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-size: var(--text-xs); color: var(--color-text-muted); display: flex; flex-direction: column; gap: var(--space-1); z-index: 5; }
.map-legend .row { display: flex; align-items: center; gap: var(--space-2); }
.legend-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.legend-dot.live { background: var(--color-success); }
.legend-dot.hub { background: var(--color-primary); }
.legend-dot.you { background: var(--color-urgent); }

.locate-card { background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-8); padding-top: var(--space-12); display: flex; flex-direction: column; gap: var(--space-5); justify-content: center; }
.locate-card h3 { font-size: var(--text-lg); }
.locate-card p { color: var(--color-text-muted); font-size: var(--text-sm); }
#locateBtn { background: var(--color-primary); color: var(--color-text-inverse); font-weight: 700; padding: var(--space-4) var(--space-6); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; gap: var(--space-2); font-size: var(--text-base); transition: background var(--transition), transform var(--transition); }
#locateBtn:hover { background: var(--color-primary-hover); transform: translateY(-1px); }
#locateBtn svg { width: 20px; height: 20px; }
.locate-result { border-top: 1px dashed var(--color-border); padding-top: var(--space-4); display: none; flex-direction: column; gap: var(--space-2); }
.locate-result.show { display: flex; }
.locate-result .eta-num { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--color-success); font-weight: 700; line-height: 1; }
.locate-result .eta-lbl { font-size: var(--text-xs); color: var(--color-text-muted); }
.locate-result .hub-name { font-size: var(--text-sm); color: var(--color-text); font-weight: 600; }
.locate-result .connect-btn { margin-top: var(--space-2); background: var(--color-urgent); color: #fff; text-align: center; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-weight: 700; display: flex; align-items: center; justify-content: center; gap: var(--space-2); }
.locate-status { font-size: var(--text-xs); color: var(--color-text-faint); }

/* ---------- 24/7 markers ---------- */
.avail-strip { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--space-4); }
@media (min-width: 720px) { .avail-strip { grid-template-columns: repeat(4,1fr); } }
.avail-card { background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); text-align: center; align-items: center; }
.avail-card .badge247 { width: 48px; height: 48px; border-radius: 50%; background: var(--color-primary-highlight); color: var(--color-primary); display: flex; align-items: center; justify-content: center; }
.avail-card .badge247 svg { width: 24px; height: 24px; }
.avail-card h4 { font-size: var(--text-sm); }
.avail-card p { font-size: var(--text-xs); color: var(--color-text-muted); }

/* ---------- How it works ---------- */
.steps { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3,1fr); } }
.step { background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-8); position: relative; }
.step .n { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--color-primary-highlight); -webkit-text-stroke: 1.5px var(--color-primary); color: transparent; position: absolute; top: var(--space-4); right: var(--space-6); opacity: 0.6; }
.step h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); margin-top: var(--space-2); }
.step p { color: var(--color-text-muted); font-size: var(--text-sm); }

/* ---------- Final CTA ---------- */
.final-cta { text-align: center; background: linear-gradient(160deg, var(--color-surface-offset), var(--color-surface)); border-top: 1px solid var(--color-divider); }
.final-cta h2 { font-size: var(--text-2xl); margin-bottom: var(--space-4); }
.final-cta p { color: var(--color-text-muted); max-width: 46ch; margin: 0 auto var(--space-8); }

/* ---------- Footer ---------- */
footer { border-top: 1px solid var(--color-divider); padding-block: var(--space-10); font-size: var(--text-xs); color: var(--color-text-faint); }
footer .wrap { display: flex; flex-direction: column; gap: var(--space-4); }
footer .foot-links { display: flex; gap: var(--space-4); flex-wrap: wrap; }
footer .compliance { max-width: 70ch; line-height: 1.6; }

/* Sticky mobile call bar (secondary reinforcement) */
.sticky-call-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--color-urgent); box-shadow: 0 -8px 24px rgba(0,0,0,0.4); display: none; }
.sticky-call-bar a { display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-4); color: #fff; font-weight: 700; font-size: var(--text-base); }
.sticky-call-bar svg { width: 20px; height: 20px; }
@media (max-width: 640px) { .sticky-call-bar { display: block; } body { padding-bottom: 62px; } }

/* ---------- Partner page ---------- */
.partner-hero { padding-block: var(--space-16) var(--space-10); text-align: center; }
.partner-hero .wrap { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); }
.partner-hero h1 { font-size: var(--text-2xl); max-width: 24ch; }
.partner-hero p.lede { color: var(--color-text-muted); font-size: var(--text-lg); max-width: 52ch; }

.benefit-grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; margin-top: var(--space-4); }
@media (min-width: 720px) { .benefit-grid { grid-template-columns: repeat(3,1fr); } }
.benefit-card { background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); text-align: left; }
.benefit-card .ico { width: 44px; height: 44px; border-radius: 50%; background: var(--color-primary-highlight); color: var(--color-primary); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-4); }
.benefit-card .ico svg { width: 22px; height: 22px; }
.benefit-card h3 { font-size: var(--text-base); margin-bottom: var(--space-2); }
.benefit-card p { color: var(--color-text-muted); font-size: var(--text-sm); }

.form-section { background: var(--color-surface); border-top: 1px solid var(--color-divider); }
.form-card { max-width: 680px; margin: 0 auto; background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-8); box-shadow: var(--shadow-lg); }
.form-grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 620px) { .form-grid.two-col { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field.full { grid-column: 1 / -1; }
.field label { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); }
.field .req { color: var(--color-urgent); }
.field input[type=text], .field input[type=email], .field input[type=tel], .field select, .field textarea {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4); color: var(--color-text); font-size: var(--text-base); font-family: var(--font-body);
  transition: border-color var(--transition);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--color-primary); }
.field select { cursor: pointer; }
.field input::placeholder, .field textarea::placeholder { color: var(--color-text-muted); opacity: 1; }
.field textarea { min-height: 100px; resize: vertical; }
.field-hint { font-size: var(--text-xs); color: var(--color-text-faint); margin-top: calc(var(--space-2) * -1); }
.fleet-divider { padding-top: var(--space-5); border-top: 1px dashed var(--color-border); }

.custom-select { position: relative; }
.select-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); color: var(--color-text-muted); font-size: var(--text-base); font-family: var(--font-body); text-align: left; cursor: pointer; transition: border-color var(--transition); }
.custom-select.has-value .select-trigger { color: var(--color-text); }
.select-trigger:focus, .select-trigger[aria-expanded=true] { border-color: var(--color-primary); outline: none; }
.custom-select.has-error .select-trigger { border-color: var(--color-urgent); }
.select-trigger svg { flex-shrink: 0; transition: transform var(--transition); color: var(--color-text-faint); }
.select-trigger[aria-expanded=true] svg { transform: rotate(180deg); }
.select-menu { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20; background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); overflow: hidden; }
.select-option { padding: var(--space-3) var(--space-4); font-size: var(--text-base); color: var(--color-text); cursor: pointer; transition: background var(--transition); }
.select-option:hover, .select-option:active { background: var(--color-primary-highlight); }
.select-option[aria-selected=true] { color: var(--color-primary); font-weight: 600; }
.select-error { color: var(--color-urgent); font-size: var(--text-xs); margin-top: var(--space-2); }
.checkbox-group { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.checkbox-pill { display: flex; align-items: center; gap: var(--space-2); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-full); padding: var(--space-2) var(--space-4); font-size: var(--text-sm); cursor: pointer; transition: border-color var(--transition), background var(--transition); }
.checkbox-pill:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-highlight); }
.checkbox-pill input { accent-color: var(--color-primary); }
.form-honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; overflow: hidden; }
.submit-partner-btn { background: var(--color-urgent); color: #fff; font-weight: 700; font-size: var(--text-base); padding: var(--space-4) var(--space-6); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; gap: var(--space-2); transition: background var(--transition), transform var(--transition); }
.submit-partner-btn:hover { background: var(--color-urgent-hover); transform: translateY(-1px); }
.form-legal { font-size: var(--text-xs); color: var(--color-text-faint); text-align: center; }
.success-banner { display: none; background: var(--color-success-highlight); border: 1px solid rgba(61,220,132,0.4); color: var(--color-success); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); text-align: center; font-weight: 600; margin-bottom: var(--space-6); align-items: center; justify-content: center; gap: var(--space-2); }
.success-banner.show { display: flex; }

/* Annotation labels for wireframe review */
.wf-tag { position: absolute; top: var(--space-3); left: var(--space-3); background: var(--color-primary); color: var(--color-text-inverse); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 8px; border-radius: var(--radius-full); z-index: 6; }
.map-card, .call-now-header, .locate-card { position: relative; }