/* ============================================================
   Mar's Wash and Fold — Website styles
   Polished fork of the design-system UI kit.
   ============================================================ */
@import url("colors_and_type.css");

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bubble-50); color: var(--ink); font-family: var(--font-body); }
body { font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: var(--mars-red); text-decoration: none; font-weight: 600; }
a:hover { color: var(--mars-red-deep); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
button { font-family: inherit; cursor: pointer; }

img { display: block; max-width: 100%; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: 76px; display: flex; align-items: center;
  background: rgba(244, 248, 251, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bubble-200);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 24px; }
.brand-lockup { display: flex; align-items: center; gap: 12px; }
.brand-lockup img { width: 52px; height: 52px; border-radius: 999px; object-fit: cover; }
.brand-lockup .wordmark {
  font-family: var(--font-banner); font-size: 20px;
  color: var(--mars-navy); letter-spacing: 0.02em; line-height: 1;
}
.brand-lockup .tagline {
  font-family: var(--font-body); font-size: 11px; font-weight: 700;
  color: var(--mars-red); letter-spacing: 0.12em; text-transform: uppercase;
  margin-top: 4px;
}
.nav { display: flex; align-items: center; gap: 28px; }
.nav a {
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  color: var(--mars-navy); text-decoration: none;
  white-space: nowrap;
}
.nav a:hover { color: var(--mars-red); text-decoration: none; }

.open-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  background: var(--success-bg); color: var(--success);
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  letter-spacing: 0.01em;
}
.open-pill .pulse {
  width: 8px; height: 8px; border-radius: 999px; background: var(--success);
  box-shadow: 0 0 0 0 rgba(46,168,104,0.55);
  animation: pulse 2s infinite cubic-bezier(.2,.8,.2,1);
}
.open-pill.closed { background: var(--danger-bg); color: var(--danger); }
.open-pill.closed .pulse { background: var(--danger); box-shadow: 0 0 0 0 rgba(215,38,31,0.45); }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(46,168,104,0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(46,168,104,0); }
  100% { box-shadow: 0 0 0 0 rgba(46,168,104,0); }
}

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  padding: 12px 22px; border-radius: 999px; border: none;
  transition: transform 120ms cubic-bezier(.2,.8,.2,1), box-shadow 120ms, background 120ms, color 120ms;
  letter-spacing: 0.01em; display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--mars-red); color: #fff; }
.btn-primary:hover { background: var(--mars-red-deep); }
.btn-yellow { background: var(--mars-yellow); color: var(--mars-navy); }
.btn-yellow:hover { background: var(--mars-yellow-deep); }
.btn-ghost { background: transparent; color: var(--mars-navy); border: 2px solid var(--mars-navy); padding: 10px 20px; }
.btn-ghost:hover { background: var(--mars-navy); color: #fff; }
.btn-ghost-light { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,0.55); padding: 10px 20px; }
.btn-ghost-light:hover { background: #fff; color: var(--mars-navy); border-color: #fff; }
.btn-sticker {
  background: var(--mars-yellow); color: var(--mars-navy);
  border: 3px solid var(--mars-navy); border-radius: 14px;
  box-shadow: 0 6px 0 var(--mars-navy);
  font-family: var(--font-banner); letter-spacing: 0.04em;
  padding: 14px 26px; font-size: 17px;
}
.btn-sticker:hover { transform: translateY(2px); box-shadow: 0 4px 0 var(--mars-navy); background: var(--mars-yellow); }
.btn-sticker:active { transform: translateY(6px); box-shadow: 0 0 0 var(--mars-navy); }
.btn-lg { padding: 16px 30px; font-size: 17px; }

/* ---------- Sections ---------- */
section { padding: 104px 0; position: relative; }
section.tight { padding: 56px 0; }
section.alt { background: var(--white); }
section.deep { background: var(--mars-navy); color: var(--white); }
section.cream { background: var(--cream); }

.eyebrow {
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--mars-red);
  margin-bottom: 12px;
}
.section-title {
  font-family: var(--font-display); font-weight: 700; font-size: 52px;
  line-height: 1.05; letter-spacing: -0.015em; color: var(--mars-navy);
  margin: 0 0 18px;
  text-wrap: balance;
}
.section-title.on-deep { color: var(--white); }
.section-lede {
  font-family: var(--font-body); font-size: 19px; color: var(--ink-soft);
  max-width: 640px; line-height: 1.55; margin: 0 0 56px;
  text-wrap: pretty;
}
.section-lede.on-deep { color: rgba(255,255,255,0.82); }

/* ---------- Hero ---------- */
.hero {
  background: var(--mars-navy);
  color: #fff;
  padding: 88px 0 112px;
  position: relative; overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 82% 38%, rgba(255,199,39,0.12), transparent 55%),
    radial-gradient(circle at 12% 110%, rgba(215,38,31,0.20), transparent 55%);
  pointer-events: none;
}
.hero .container { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; position: relative; z-index: 1; }
.hero h1 {
  font-family: var(--font-banner); font-size: clamp(52px, 6.6vw, 88px);
  line-height: 0.96; letter-spacing: 0.02em; margin: 0 0 22px;
  color: #fff;
}
.hero h1 .yellow {
  color: var(--mars-yellow);
  -webkit-text-stroke: 2.5px var(--mars-navy-deep);
  text-shadow: 0 5px 0 var(--mars-navy-deep);
}
.hero .lede {
  font-family: var(--font-body); font-size: 20px; color: rgba(255,255,255,0.84);
  line-height: 1.5; max-width: 520px; margin: 0 0 28px;
}
.hero .ctas { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hero .meta { display: flex; align-items: center; gap: 18px; margin-top: 36px; color: rgba(255,255,255,0.82); font-size: 14px; flex-wrap: wrap; }
.hero .meta .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--mars-yellow); }
.hero .meta .meta-item { display: inline-flex; gap: 8px; align-items: center; }

/* ---------- Animated washing machine (hero) ---------- */
.washer-stage {
  position: relative;
  display: grid; place-items: center;
  height: 480px;
}
.washer-stage .bubbles {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.washer-stage .bubbles .b {
  position: absolute; bottom: -20px; border-radius: 999px;
  background: rgba(255,255,255,0.12);
  border: 2px solid rgba(255,255,255,0.35);
  animation: float-up linear infinite;
}
@keyframes float-up {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(-540px) translateX(var(--drift, 12px)); opacity: 0; }
}
.washer-stage .stars { position: absolute; inset: 0; pointer-events: none; }
.washer-stage .stars .star {
  position: absolute; color: var(--mars-yellow);
  animation: twinkle 2.4s ease-in-out infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50%      { opacity: 1;    transform: scale(1.1); }
}

.washer {
  position: relative;
  width: 340px; height: 420px;
  background: linear-gradient(180deg, #E5EEF5 0%, #C9DCEC 100%);
  border: 5px solid var(--mars-navy);
  border-radius: 22px;
  box-shadow:
    0 10px 0 var(--mars-red),
    0 26px 60px rgba(0,0,0,0.32),
    inset 0 4px 0 rgba(255,255,255,0.6);
}
.washer .panel {
  position: absolute; top: 18px; left: 18px; right: 18px; height: 72px;
  background: var(--mars-navy);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 18px;
  border: 3px solid var(--mars-navy-deep);
}
.washer .panel .brand {
  font-family: var(--font-banner); color: var(--mars-yellow);
  font-size: 14px; letter-spacing: 0.06em;
  -webkit-text-stroke: 1.5px var(--mars-navy-deep);
}
.washer .panel .dots { display: flex; gap: 6px; }
.washer .panel .dots span {
  width: 8px; height: 8px; border-radius: 999px; background: rgba(255,255,255,0.25);
}
.washer .panel .dots span.on { background: var(--mars-yellow); box-shadow: 0 0 8px var(--mars-yellow); }
.washer .panel .dial {
  width: 30px; height: 30px; border-radius: 999px;
  background: var(--mars-yellow);
  border: 3px solid var(--mars-yellow-deep);
  position: relative;
}
.washer .panel .dial::after {
  content: ""; position: absolute; left: 50%; top: 4px;
  width: 3px; height: 11px; background: var(--mars-navy);
  transform: translateX(-50%) rotate(0deg);
  transform-origin: 50% 100%;
  animation: dial-tick 6s cubic-bezier(.2,.8,.2,1) infinite;
}
@keyframes dial-tick {
  0%   { transform: translateX(-50%) rotate(-60deg); }
  50%  { transform: translateX(-50%) rotate(40deg); }
  100% { transform: translateX(-50%) rotate(-60deg); }
}

.washer .door {
  position: absolute; left: 50%; top: 130px; transform: translateX(-50%);
  width: 240px; height: 240px; border-radius: 999px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.95), rgba(255,255,255,0.5) 30%, rgba(28,74,125,0.05) 60%, rgba(11,46,92,0.18) 100%);
  border: 8px solid var(--mars-navy);
  box-shadow:
    inset 0 0 0 6px var(--bubble-100),
    inset 0 0 0 12px var(--mars-navy),
    inset 0 0 24px rgba(11,46,92,0.18);
  overflow: hidden;
}
.washer .door .glass {
  position: absolute; inset: 18px; border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #DDECF5 35%, #9CBCD6 100%);
  overflow: hidden;
}
.washer .drum {
  position: absolute; inset: 0;
  animation: spin 3.8s linear infinite;
}
.washer .drum .clothes {
  position: absolute; border-radius: 14px;
}
.washer .drum .c1 { width: 80px; height: 50px; background: var(--mars-red); top: 30px; left: 28px; transform: rotate(-12deg); border: 3px solid var(--mars-red-deep); }
.washer .drum .c2 { width: 70px; height: 60px; background: var(--mars-yellow); top: 88px; right: 24px; transform: rotate(18deg); border: 3px solid var(--mars-yellow-deep); }
.washer .drum .c3 { width: 90px; height: 44px; background: #fff; bottom: 38px; left: 32px; transform: rotate(8deg); border: 3px solid var(--mars-navy); }
.washer .drum .c4 { width: 56px; height: 56px; background: var(--mars-blue); bottom: 26px; right: 36px; transform: rotate(-22deg); border-radius: 999px; border: 3px solid var(--mars-navy); }
.washer .drum .c5 { width: 50px; height: 50px; background: #6AB04A; top: 86px; left: 90px; border-radius: 999px; border: 3px solid #3F7D2A; }

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.washer .door .suds {
  position: absolute; left: 50%; bottom: 0; width: 220px;
  transform: translateX(-50%);
  pointer-events: none;
}
.washer .door .suds .sb {
  position: absolute; border-radius: 999px;
  background: rgba(255,255,255,0.86);
  border: 2px solid rgba(11,46,92,0.55);
  animation: bob 3s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

.washer .feet {
  position: absolute; bottom: -10px; left: 28px; right: 28px;
  display: flex; justify-content: space-between;
}
.washer .feet span {
  width: 28px; height: 16px; border-radius: 6px;
  background: var(--mars-navy);
}

/* sticker tag floating next to washer */
.washer-tag {
  position: absolute;
  font-family: var(--font-banner);
  background: var(--mars-yellow);
  color: var(--mars-navy);
  border: 4px solid var(--mars-navy);
  border-radius: 16px;
  padding: 10px 16px;
  box-shadow: 0 6px 0 var(--mars-navy);
  transform: rotate(-6deg);
  letter-spacing: 0.04em;
  font-size: 15px;
  animation: wiggle 3.5s ease-in-out infinite;
}
.washer-tag.tl { top: 50px; left: -28px; }
.washer-tag.br { bottom: 60px; right: -42px; transform: rotate(8deg); animation-delay: -1.5s; }
@keyframes wiggle {
  0%, 100% { transform: rotate(-6deg) translateY(0); }
  50%      { transform: rotate(-3deg) translateY(-4px); }
}
.washer-tag.br { animation-name: wiggle-r; }
@keyframes wiggle-r {
  0%, 100% { transform: rotate(8deg) translateY(0); }
  50%      { transform: rotate(5deg) translateY(-4px); }
}
.washer-tag .price-num {
  font-size: 28px; line-height: 1; display: block;
  color: var(--mars-yellow); -webkit-text-stroke: 2px var(--mars-navy);
  text-shadow: 0 3px 0 var(--mars-navy);
}
.washer-tag .price-unit { font-family: var(--font-display); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; }

/* ---------- Trust bar (right under hero) ---------- */
.trust-bar {
  background: var(--mars-navy-deep);
  color: rgba(255,255,255,0.78);
  padding: 18px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.trust-bar .container {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.trust-item {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
  letter-spacing: 0.02em;
}
.trust-item svg, .trust-item i { color: var(--mars-yellow); }
.trust-divider { width: 1px; height: 22px; background: rgba(255,255,255,0.16); }

/* ---------- Pricing ---------- */
.pricing-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 22px; }
.price-card {
  background: var(--cream); border: 3px solid var(--mars-navy);
  border-radius: 20px; box-shadow: 0 6px 0 var(--mars-navy);
  padding: 28px 28px 26px;
  transition: transform 200ms cubic-bezier(.2,.8,.2,1), box-shadow 200ms;
  display: flex; flex-direction: column;
}
.price-card.featured { background: #fff; }
.price-card:hover { transform: translateY(-4px); box-shadow: 0 10px 0 var(--mars-navy); }
.price-card .eyebrow { margin-bottom: 6px; }
.price-card .price-num {
  font-family: var(--font-banner);
  color: var(--mars-yellow);
  -webkit-text-stroke: 2.5px var(--mars-navy);
  text-shadow: 0 5px 0 var(--mars-navy);
  font-size: 68px; line-height: 1; letter-spacing: 0.01em;
  margin: 6px 0 6px;
}
.price-card .price-num.smaller { font-size: 56px; }
.price-card .price-unit { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--mars-navy); }
.price-card .price-foot {
  font-family: var(--font-body); font-size: 14px; color: var(--ink-soft);
  margin-top: 16px; padding-top: 16px; border-top: 2px dashed var(--bubble-200);
}
.price-card ul { padding-left: 18px; margin: 14px 0 0; flex: 1; }
.price-card li { font-family: var(--font-body); font-size: 15px; color: var(--ink); margin: 6px 0; }
.price-card .badge-row { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--mars-red); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
}
.badge.dark { background: var(--mars-navy); }

/* ---------- Services / How it works ---------- */
.three-up { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.step-card { background: #fff; border: 1px solid var(--bubble-200); border-radius: 20px;
  padding: 30px 28px; box-shadow: 0 4px 14px rgba(11,46,92,0.07);
  display: flex; flex-direction: column; gap: 12px;
  transition: transform 200ms cubic-bezier(.2,.8,.2,1), box-shadow 200ms;
  position: relative; overflow: hidden;
}
.step-card > * { position: relative; z-index: 1; }
.step-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(11,46,92,0.14); }
.step-card .num {
  font-family: var(--font-banner); font-size: 48px; line-height: 1;
  color: var(--mars-yellow);
  -webkit-text-stroke: 2px var(--mars-navy);
  text-shadow: 0 4px 0 var(--mars-navy);
  margin-bottom: 4px;
}
.step-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--mars-navy); margin: 0; }
.step-card p { font-family: var(--font-body); font-size: 15px; color: var(--ink-soft); line-height: 1.55; margin: 0; }
.step-card .icon { color: var(--mars-red); }
.step-card .ghost-num {
  position: absolute; right: -28px; bottom: -64px;
  font-family: var(--font-banner); font-size: 220px;
  color: var(--bubble-50);
  line-height: 1; pointer-events: none;
  z-index: 0;
  opacity: 0.85;
}

.feature-card {
  background: #fff; border: 1px solid var(--bubble-200); border-radius: 18px;
  padding: 24px; box-shadow: 0 4px 12px rgba(11,46,92,0.07);
  display: flex; gap: 16px; align-items: flex-start;
  transition: transform 200ms, box-shadow 200ms;
}
.feature-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(11,46,92,0.12); }
.feature-card .icon-wrap {
  flex-shrink: 0; width: 52px; height: 52px; border-radius: 14px;
  display: grid; place-items: center; background: var(--bubble-100); color: var(--mars-navy);
}
.feature-card.red .icon-wrap { background: var(--mars-red); color: #fff; }
.feature-card.yellow .icon-wrap { background: var(--mars-yellow); color: var(--mars-navy); }
.feature-card.navy .icon-wrap { background: var(--mars-navy); color: var(--mars-yellow); }
.feature-card .icon-wrap svg, .feature-card .icon-wrap i { width: 26px; height: 26px; }
.feature-card h4 { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--mars-navy); margin: 2px 0 6px; }
.feature-card p { font-family: var(--font-body); font-size: 14px; color: var(--ink-soft); line-height: 1.55; margin: 0; }

/* ---------- Testimonials ---------- */
.testi-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
.testi-card {
  background: var(--cream);
  border: 3px solid var(--mars-navy);
  border-radius: 22px;
  box-shadow: 0 6px 0 var(--mars-navy);
  padding: 30px 28px 26px;
  position: relative;
  display: flex; flex-direction: column;
  transition: transform 200ms cubic-bezier(.2,.8,.2,1), box-shadow 200ms;
}
.testi-card:hover { transform: translateY(-3px); box-shadow: 0 9px 0 var(--mars-navy); }
.testi-card.tilt-l { transform: rotate(-1deg); }
.testi-card.tilt-r { transform: rotate(1.2deg); }
.testi-card.tilt-l:hover { transform: rotate(-1deg) translateY(-3px); }
.testi-card.tilt-r:hover { transform: rotate(1.2deg) translateY(-3px); }

.testi-card .stars { display: flex; gap: 2px; margin-bottom: 12px; color: var(--mars-yellow); }
.testi-card .stars svg, .testi-card .stars i { width: 18px; height: 18px; fill: var(--mars-yellow); color: var(--mars-yellow); }
.testi-card p {
  font-family: var(--font-display); font-weight: 500; font-size: 17px;
  line-height: 1.45; color: var(--mars-navy); margin: 0 0 18px; flex: 1;
}
.testi-card .who {
  display: flex; align-items: center; gap: 12px;
  padding-top: 14px; border-top: 2px dashed var(--bubble-200);
}
.testi-card .who .avatar {
  width: 44px; height: 44px; border-radius: 999px;
  display: grid; place-items: center;
  font-family: var(--font-banner); font-size: 18px;
  color: var(--mars-navy);
  border: 3px solid var(--mars-navy);
  flex-shrink: 0;
}
.testi-card .who .avatar.a-1 { background: var(--mars-yellow); }
.testi-card .who .avatar.a-2 { background: #BFE2D0; }
.testi-card .who .avatar.a-3 { background: #F8C9C6; }
.testi-card .who .name { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--mars-navy); }
.testi-card .who .role { font-family: var(--font-body); font-size: 13px; color: var(--ink-soft); }

/* ---------- Info row ---------- */
.info-row { display: grid; grid-template-columns: 1.1fr 1fr; gap: 22px; }
.info-card {
  background: #fff; border-radius: 18px; padding: 30px; border: 1px solid var(--bubble-200);
  box-shadow: 0 4px 12px rgba(11,46,92,0.07);
}
.info-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--mars-navy); margin: 0 0 16px; display: flex; align-items: center; gap: 10px; }
.info-card .hours-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; border-bottom: 1px dashed var(--bubble-200);
  font-family: var(--font-body);
}
.info-card .hours-row:last-child { border-bottom: none; }
.info-card .hours-row .day { color: var(--ink); font-weight: 600; font-size: 15px; }
.info-card .hours-row .day.today { color: var(--mars-red); }
.info-card .hours-row .day.today::after { content: " · today"; color: var(--mars-red); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.info-card .hours-row .time { color: var(--ink-soft); font-family: var(--font-mono); font-size: 14px; }
.info-card .address { display: flex; flex-direction: column; gap: 10px; font-family: var(--font-body); color: var(--ink); font-size: 15px; }
.info-card .address-line { display: flex; align-items: flex-start; gap: 10px; }
.info-card .address-line .ic { color: var(--mars-red); flex-shrink: 0; margin-top: 2px; }

/* ---------- Map (illustrated) ---------- */
.map-block {
  background: #fff;
  border-radius: 22px;
  border: 1px solid var(--bubble-200);
  box-shadow: 0 4px 14px rgba(11,46,92,0.08);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
}
.map-vis {
  position: relative;
  background: linear-gradient(180deg, #DFEAF2 0%, #E5EEF5 100%);
  min-height: 360px;
  overflow: hidden;
}
.map-vis .road {
  position: absolute; background: #fff;
  box-shadow: 0 0 0 1px var(--bubble-200);
}
.map-vis .road .lane {
  position: absolute; top: 50%; left: 0; right: 0; height: 2px;
  background: repeating-linear-gradient(90deg, var(--bubble-300) 0 12px, transparent 12px 22px);
  transform: translateY(-50%);
}
.map-vis .road.vertical .lane {
  top: 0; bottom: 0; left: 50%; right: auto; width: 2px; height: auto;
  background: repeating-linear-gradient(180deg, var(--bubble-300) 0 12px, transparent 12px 22px);
  transform: translateX(-50%);
}
.map-vis .block {
  position: absolute; border-radius: 6px;
  background: var(--bubble-100); border: 1px solid var(--bubble-200);
}
.map-vis .park {
  position: absolute; border-radius: 8px; background: #C9E1C0; border: 1px solid #98C28A;
}
.map-vis .pin {
  position: absolute; top: 48%; left: 50%; transform: translate(-50%, -100%);
  animation: pin-drop 0.6s cubic-bezier(.2,.8,.2,1) both;
  z-index: 3;
}
@keyframes pin-drop {
  from { transform: translate(-50%, -160%); opacity: 0; }
  to   { transform: translate(-50%, -100%); opacity: 1; }
}
.map-vis .pin-shadow {
  position: absolute; top: 48%; left: 50%;
  width: 36px; height: 8px; border-radius: 999px;
  background: rgba(11,46,92,0.25);
  transform: translate(-50%, 6px);
  filter: blur(2px);
  z-index: 2;
}
.map-vis .label {
  position: absolute; top: 48%; left: 50%; transform: translate(-50%, calc(-100% - 60px));
  background: var(--mars-yellow); color: var(--mars-navy);
  border: 3px solid var(--mars-navy);
  border-radius: 12px; box-shadow: 0 4px 0 var(--mars-navy);
  padding: 6px 12px;
  font-family: var(--font-banner); font-size: 13px; letter-spacing: 0.04em;
  white-space: nowrap;
  z-index: 4;
}
.map-vis .label::after {
  content: ""; position: absolute; left: 50%; bottom: -10px;
  width: 0; height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 10px solid var(--mars-navy);
  transform: translateX(-50%);
}
.map-vis .corner-tag {
  position: absolute; right: 16px; top: 16px;
  background: rgba(11,46,92,0.85); color: #fff;
  font-family: var(--font-display); font-weight: 700;
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px;
  backdrop-filter: blur(4px);
}
.map-vis .you-here {
  position: absolute; left: 22%; top: 28%;
  font-family: var(--font-body); font-size: 12px;
  color: var(--ink-soft); font-style: italic;
}
.map-side {
  padding: 32px;
  display: flex; flex-direction: column; gap: 16px;
  background: #fff;
}
.map-side h3 {
  font-family: var(--font-display); font-weight: 700; font-size: 24px;
  color: var(--mars-navy); margin: 0;
}
.map-side .lines { display: flex; flex-direction: column; gap: 10px; }
.map-side .line { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--ink); }
.map-side .line .ic { color: var(--mars-red); margin-top: 2px; }
.map-side .nearby {
  background: var(--bubble-50); border-radius: 14px;
  padding: 14px 16px; font-size: 13px; color: var(--ink-soft);
  border: 1px solid var(--bubble-200);
}
.map-side .nearby strong { color: var(--mars-navy); font-family: var(--font-display); display: block; margin-bottom: 4px; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }
.map-side .btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; }

/* ---------- Schedule form ---------- */
.schedule {
  background: #fff; border-radius: 28px; border: 3px solid var(--mars-navy);
  box-shadow: 0 10px 0 var(--mars-red);
  padding: 40px 44px; max-width: 760px; margin: 0 auto;
}
.schedule h2 { margin-top: 0; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 8px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--mars-navy); letter-spacing: 0.01em; }
.input, .select, .textarea {
  font-family: var(--font-body); font-size: 16px;
  padding: 13px 14px; border: 2px solid var(--bubble-200); border-radius: 12px;
  background: #fff; color: var(--ink); width: 100%;
  transition: border-color 120ms, box-shadow 120ms;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--mars-navy);
  box-shadow: 0 0 0 4px rgba(255,199,39,0.4);
}
.textarea { resize: vertical; min-height: 80px; }
.help { font-family: var(--font-body); font-size: 12px; color: var(--ink-faint); }

.option-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.option-row.three { grid-template-columns: repeat(3, 1fr); }
.option {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--bubble-50); border: 2px solid var(--bubble-200); border-radius: 12px;
  padding: 14px 14px; cursor: pointer;
  transition: border-color 120ms, background 120ms, transform 120ms;
}
.option:hover { background: var(--bubble-100); }
.option.selected { border-color: var(--mars-navy); background: #fff; box-shadow: 0 4px 0 var(--mars-navy); transform: translateY(-1px); }
.option .radio {
  width: 18px; height: 18px; border-radius: 999px; border: 2px solid var(--mars-navy);
  flex-shrink: 0; margin-top: 2px; position: relative; background: #fff;
}
.option.selected .radio::after {
  content: ""; position: absolute; inset: 3px; border-radius: 999px; background: var(--mars-red);
}
.option .opt-title { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--mars-navy); }
.option .opt-sub   { font-family: var(--font-body); font-size: 12px; color: var(--ink-soft); margin-top: 2px; }

/* Date picker */
.date-picker {
  border: 2px solid var(--bubble-200); border-radius: 14px;
  padding: 14px; background: var(--bubble-50);
}
.dp-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
  font-family: var(--font-display); font-weight: 700;
  color: var(--mars-navy);
}
.dp-head button {
  background: #fff; border: 2px solid var(--bubble-200);
  width: 32px; height: 32px; border-radius: 999px;
  display: grid; place-items: center; color: var(--mars-navy);
  transition: background 120ms, border-color 120ms;
}
.dp-head button:hover { background: var(--bubble-100); border-color: var(--mars-navy); }
.dp-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
}
.dp-dow {
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  text-align: center; color: var(--ink-faint); padding: 4px 0;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.dp-day {
  aspect-ratio: 1; display: grid; place-items: center;
  border-radius: 10px; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
  color: var(--mars-navy); background: transparent;
  border: 2px solid transparent;
  transition: background 100ms, color 100ms, border-color 100ms;
}
.dp-day:hover:not(.muted):not(.disabled) { background: var(--bubble-100); }
.dp-day.muted { color: var(--ink-faint); opacity: 0.45; cursor: default; }
.dp-day.disabled { color: var(--ink-faint); opacity: 0.35; cursor: not-allowed; text-decoration: line-through; }
.dp-day.today { border-color: var(--mars-yellow); }
.dp-day.selected { background: var(--mars-red); color: #fff; }
.dp-day.selected.today { border-color: var(--mars-navy); }

.time-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.time-chip {
  padding: 10px 6px; border-radius: 12px;
  background: var(--bubble-50); border: 2px solid var(--bubble-200);
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  color: var(--mars-navy); cursor: pointer;
  text-align: center;
  transition: background 120ms, border-color 120ms, transform 120ms;
}
.time-chip:hover { background: var(--bubble-100); }
.time-chip.selected {
  background: var(--mars-navy); color: #fff; border-color: var(--mars-navy);
  transform: translateY(-1px);
  box-shadow: 0 3px 0 var(--mars-navy-deep);
}
.time-chip.disabled { opacity: 0.4; cursor: not-allowed; text-decoration: line-through; }

/* Pounds estimator */
.pounds-row { display: flex; align-items: center; gap: 16px; }
.pounds-slider {
  flex: 1; -webkit-appearance: none; appearance: none;
  height: 8px; border-radius: 999px;
  background: linear-gradient(90deg, var(--mars-yellow) 0%, var(--mars-yellow) var(--pct, 30%), var(--bubble-200) var(--pct, 30%), var(--bubble-200) 100%);
}
.pounds-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; border-radius: 999px;
  background: var(--mars-red); border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--mars-navy), 0 3px 8px rgba(11,46,92,0.3);
  cursor: pointer;
}
.pounds-slider::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 999px;
  background: var(--mars-red); border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--mars-navy);
  cursor: pointer;
}
.pounds-readout {
  font-family: var(--font-banner); font-size: 28px;
  color: var(--mars-yellow);
  -webkit-text-stroke: 2px var(--mars-navy);
  text-shadow: 0 3px 0 var(--mars-navy);
  min-width: 100px; text-align: right; letter-spacing: 0.02em;
}
.pounds-est {
  background: var(--bubble-50); border-radius: 14px;
  padding: 14px 16px; margin-top: 12px;
  display: flex; justify-content: space-between; align-items: center;
  border: 1px dashed var(--bubble-300);
  font-family: var(--font-body);
}
.pounds-est .left { color: var(--ink-soft); font-size: 13px; }
.pounds-est .right { font-family: var(--font-display); font-weight: 700; color: var(--mars-navy); font-size: 18px; }

/* ---------- Confirmation ---------- */
.confirmation { text-align: center; padding: 20px 12px 8px; }
.confirmation .stamp {
  display: inline-grid; place-items: center; width: 88px; height: 88px;
  border-radius: 999px; background: var(--success-bg); color: var(--success);
  margin: 0 auto 20px;
  box-shadow: 0 0 0 6px rgba(46,168,104,0.18);
  animation: stamp-in 400ms cubic-bezier(.2,.8,.2,1);
}
@keyframes stamp-in { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.confirmation .stamp svg { width: 46px; height: 46px; }
.confirmation h2 { margin: 0 0 8px; }
.confirmation p { color: var(--ink-soft); margin: 0 auto 6px; max-width: 460px; }
.confirmation .sig { font-family: var(--font-body); font-style: italic; font-weight: 600; color: var(--ink-soft); margin-top: 16px; font-size: 17px; }

/* ---------- Sticky CTA ---------- */
.sticky-cta {
  position: fixed; right: 24px; bottom: 24px; z-index: 60;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}
.sticky-cta .toast {
  background: var(--mars-navy); color: #fff;
  border: 3px solid var(--mars-yellow);
  padding: 10px 16px; border-radius: 14px;
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  box-shadow: 0 6px 16px rgba(11,46,92,0.32);
  max-width: 220px; line-height: 1.35;
  animation: toast-in 600ms cubic-bezier(.2,.8,.2,1) both;
}
.sticky-cta .toast .sig { display: block; font-style: italic; font-weight: 500; color: var(--mars-yellow); margin-top: 4px; font-family: var(--font-body); font-size: 12px; }
@keyframes toast-in {
  from { transform: translateY(20px) scale(0.9); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
.sticky-cta button.fab {
  background: var(--mars-red); color: #fff;
  border: 4px solid var(--mars-navy); border-radius: 999px;
  padding: 14px 22px;
  font-family: var(--font-banner); font-size: 16px; letter-spacing: 0.04em;
  display: inline-flex; align-items: center; gap: 10px;
  box-shadow: 0 6px 0 var(--mars-navy), 0 16px 30px rgba(11,46,92,0.32);
  transition: transform 120ms, box-shadow 120ms;
}
.sticky-cta button.fab:hover { transform: translateY(2px); box-shadow: 0 4px 0 var(--mars-navy), 0 12px 22px rgba(11,46,92,0.28); }
.sticky-cta button.fab:active { transform: translateY(6px); box-shadow: 0 0 0 var(--mars-navy), 0 6px 12px rgba(11,46,92,0.2); }

/* ---------- Modal ---------- */
.modal-scrim {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(6, 26, 56, 0.62);
  backdrop-filter: blur(4px);
  display: grid; place-items: center;
  padding: 24px;
  animation: scrim-in 200ms ease-out;
}
@keyframes scrim-in { from { opacity: 0; } to { opacity: 1; } }
.modal-card {
  width: 100%; max-width: 720px; max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: #fff;
  border: 3px solid var(--mars-navy);
  border-radius: 24px;
  box-shadow: 0 12px 0 var(--mars-red), 0 24px 60px rgba(0,0,0,0.4);
  position: relative;
  animation: modal-in 320ms cubic-bezier(.2,.8,.2,1);
}
@keyframes modal-in {
  from { transform: translateY(30px) scale(0.96); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
.modal-card .close {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  width: 40px; height: 40px; border-radius: 999px;
  background: var(--bubble-100); border: 2px solid var(--bubble-200); color: var(--mars-navy);
  display: grid; place-items: center;
  transition: background 120ms, transform 120ms;
}
.modal-card .close:hover { background: var(--bubble-200); transform: rotate(90deg); }
.modal-card .modal-body { padding: 36px 40px 36px; }
.modal-card .modal-eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.modal-card h2 { font-family: var(--font-display); font-weight: 700; font-size: 30px; color: var(--mars-navy); margin: 0 0 8px; line-height: 1.1; }
.modal-card .modal-lede { color: var(--ink-soft); font-size: 15px; margin: 0 0 22px; max-width: 540px; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--mars-navy); color: rgba(255,255,255,0.78);
  padding: 64px 0 36px;
  position: relative;
  overflow: hidden;
}
.site-footer::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 8% 0%, rgba(255,199,39,0.10), transparent 40%),
    radial-gradient(circle at 92% 100%, rgba(215,38,31,0.18), transparent 50%);
  pointer-events: none;
}
.site-footer .container { position: relative; z-index: 1; }
.site-footer .grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px;
  padding-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,0.14);
}
.site-footer h5 {
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--mars-yellow);
  margin: 0 0 14px;
}
.site-footer a { color: rgba(255,255,255,0.82); display: inline-block; padding: 4px 0; font-weight: 500; }
.site-footer a:hover { color: var(--mars-yellow); text-decoration: none; }
.site-footer .brand-lockup .wordmark { color: #fff; }
.site-footer .brand-lockup .tagline { color: var(--mars-yellow); }
.site-footer .colophon {
  padding-top: 22px;
  display: flex; justify-content: space-between;
  font-size: 13px; color: rgba(255,255,255,0.55);
  flex-wrap: wrap; gap: 12px;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.social-pills { display: flex; gap: 10px; margin-top: 12px; }
.social-pills a {
  width: 40px; height: 40px; border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  display: grid; place-items: center; color: #fff;
  transition: background 120ms, border-color 120ms;
  padding: 0;
}
.social-pills a:hover { background: var(--mars-yellow); color: var(--mars-navy); border-color: var(--mars-yellow); }

/* ---------- Tiny utilities ---------- */
.flex-row { display: flex; gap: 12px; align-items: center; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.center { text-align: center; }
.muted { color: var(--ink-soft); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero .container, .pricing-grid, .three-up, .info-row, .testi-grid, .site-footer .grid, .field-grid, .map-block { grid-template-columns: 1fr; }
  .nav { display: none; }
  .open-pill { display: none; }
  .section-title { font-size: 38px; }
  section { padding: 72px 0; }
  .washer-stage { height: 420px; }
  .washer { width: 290px; height: 360px; }
  .washer .door { width: 200px; height: 200px; top: 120px; }
  .modal-card .modal-body { padding: 28px 24px; }
}
@media (max-width: 600px) {
  .container { padding: 0 20px; }
  .hero h1 { font-size: 44px; }
  .time-chips { grid-template-columns: repeat(3, 1fr); }
  .option-row.three { grid-template-columns: 1fr; }
  .sticky-cta { right: 14px; bottom: 14px; }
  .sticky-cta .toast { display: none; }
}