/* =========================================================
   CSP Moving — public site
   Tokens mirror the Figma "CSP Colors" variables & v2 text styles
   ========================================================= */
:root {
  --green: #92E3A9;
  --green-tint: #36504A;
  --navy: #263238;
  --slate: #455A64;
  --white: #FFFFFF;
  --card: #2F3D44;
  --raised: #37474F;
  --text-2: #B0BEC5;
  --line: #46565E;
  --line-strong: #7D8C93;
  --placeholder: #9CA3AF;
  --dot: #C9D0D3;
  --error: #FF6B6B;
  --error-bg: #3A2A2E;
  --warn: #A15C00;

  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 28px;

  --font: "Sen", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.5; color: var(--white); background: var(--navy); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; border-radius: 6px; }

.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--green); color: var(--navy); padding: 10px 14px; border-radius: 10px; font-weight: 700; text-decoration: none; }
.skip-link:focus { top: 12px; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Type ---------- */
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--slate); }
.eyebrow--green { color: var(--green); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border-radius: var(--r-sm); border: 1.5px solid transparent; font-weight: 700; font-size: 16px; line-height: 1; text-decoration: none; white-space: nowrap; transition: background-color .15s, opacity .15s; }
.btn--primary { background: var(--green); color: var(--navy); }
.btn--primary:hover { background: #A6EBBA; }
.btn--secondary { background: transparent; color: var(--white); border-color: var(--line-strong); }
.btn--secondary:hover { background: rgba(255,255,255,.06); }
.btn--block { width: 100%; }
.btn--grow { flex: 1; }
.btn[disabled], .btn.is-disabled { background: var(--raised); color: var(--text-2); border-color: transparent; cursor: not-allowed; }
.btn.is-loading { pointer-events: none; }
.btn.is-loading svg { display: none; }
.btn.is-loading::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; }
.icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 0; background: transparent; border-radius: 10px; color: inherit; padding: 0; }
.linklike { background: none; border: 0; padding: 0; font-weight: 600; color: inherit; }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--text-2); border-right-color: transparent; animation: spin .8s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Splash & onboarding ---------- */
.splash { position: fixed; inset: 0; z-index: 90; background: var(--green); display: grid; place-content: center; justify-items: center; gap: 14px; color: var(--slate); font-size: 14px; transition: opacity .4s; }
.splash.is-leaving { opacity: 0; }
.onboarding { position: fixed; inset: 0; z-index: 80; background: var(--white); color: var(--navy); display: flex; flex-direction: column; padding: calc(56px + var(--safe-t)) 24px calc(32px + var(--safe-b)); }
.onboarding__skip { align-self: flex-end; background: none; border: 0; font-weight: 600; font-size: 14px; color: var(--slate); padding: 8px; }
.onboarding__track { flex: 1; display: grid; align-items: center; }
.onboarding__slide { display: grid; justify-items: center; text-align: center; gap: 24px; }
.onboarding__art { width: min(290px, 76vw); max-height: 42vh; object-fit: contain; }
.onboarding__slide h2 { font-size: 28px; line-height: 1.2; font-weight: 700; max-width: 330px; }
.onboarding__slide p { color: var(--slate); max-width: 320px; }
.dots { display: flex; gap: 6px; }
.dots span { width: 8px; height: 8px; border-radius: 4px; background: var(--dot); transition: width .2s; }
.dots span.is-on { width: 24px; background: var(--green); }

/* =========================================================
   MOBILE (default) — app layout
   ========================================================= */
.d-nav, .pitch, .how, .footer { display: none; }

.m-header { background: var(--green); color: var(--navy); border-bottom-right-radius: 56px; padding: calc(44px + var(--safe-t)) 20px 22px; }
.m-header__bar { display: flex; align-items: center; justify-content: space-between; }
.m-header__bar img { width: 170px; }
.m-header__intro { margin-top: 18px; }
.m-header__intro h1 { font-size: 28px; line-height: 1.2; font-weight: 700; }
.m-header__intro p { font-size: 14px; color: var(--slate); margin-top: 4px; }
.m-header.is-compact { border-bottom-right-radius: 40px; padding-bottom: 18px; }
.m-header.is-compact .m-header__intro { display: none; }

.quote { padding: 20px 20px calc(110px + var(--safe-b)); }
.quote__form { display: grid; gap: 20px; }

/* Stepper */
.stepper { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 8px; }
.stepper li { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.stepper__dot { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--line-strong); font-weight: 700; flex: none; }
.stepper__dot svg { display: none; }
.stepper li.is-current, .stepper li.is-done { color: var(--white); }
.stepper li.is-current .stepper__dot, .stepper li.is-done .stepper__dot { background: var(--green); border-color: var(--green); color: var(--navy); }
.stepper li.is-done .stepper__dot b { display: none; }
.stepper li.is-done .stepper__dot svg { display: block; }
.stepper .stepper__line { flex: 1; min-width: 12px; height: 2px; border-radius: 1px; background: var(--line); }
.stepper .stepper__line.is-done { background: var(--green); }

/* Steps */
.step { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 18px; }
.js .step:not(.is-active) { display: none; }
.step__title { padding: 0; display: grid; gap: 4px; }
.step__title span { font-size: 20px; line-height: 1.25; font-weight: 700; }
.step__title small { font-size: 14px; color: var(--text-2); }

/* Service grid */
.services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.service { position: relative; display: grid; justify-items: center; align-content: center; gap: 8px; min-height: 108px; padding: 12px 6px; border-radius: var(--r-md); background: var(--card); border: 1px solid var(--line); text-align: center; cursor: pointer; transition: border-color .15s, background-color .15s; }
.service:hover { border-color: var(--line-strong); }
.service input { position: absolute; opacity: 0; pointer-events: none; }
.service__chip { width: 48px; height: 48px; border-radius: 12px; background: var(--white); display: grid; place-items: center; }
.service__label { font-size: 12px; font-weight: 500; line-height: 1.3; }
.service__check { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; background: var(--green); color: var(--navy); display: none; place-items: center; }
.service:has(input:checked) { background: var(--green-tint); border: 2px solid var(--green); }
.service:has(input:checked) .service__check { display: grid; }
.service:has(input:focus-visible) { outline: 3px solid var(--green); outline-offset: 2px; }

/* Fields */
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field { display: grid; gap: 8px; min-width: 0; }
.field > label { font-size: 14px; font-weight: 600; }
.field__box { position: relative; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border-radius: var(--r-sm); background: var(--white); color: var(--slate); box-shadow: 0 0 0 0 transparent; transition: box-shadow .15s; }
.field__box:focus-within { box-shadow: 0 0 0 2px var(--green); }
.field__box > svg { flex: none; }
.field__box input, .field__box textarea, .field__box select { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--navy); font-size: 16px; padding: 12px 0; }
.field__box input::placeholder, .field__box textarea::placeholder { color: var(--placeholder); }
.field__box--multi { align-items: flex-start; padding-top: 14px; }
.field__box--multi textarea { resize: vertical; min-height: 76px; padding: 0 0 12px; }
.field__box--noicon { padding-left: 14px; }
.field.has-error .field__box { box-shadow: 0 0 0 2px var(--error); }
.field-error { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--error); }
.field-error::before { content: "!"; display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; font-size: 9px; font-weight: 800; flex: none; }
.field__chev { color: var(--slate); flex: none; }
.picker-btn { flex: 1; text-align: left; border: 0; background: transparent; padding: 12px 0; font-size: 16px; color: var(--navy); }
.picker-btn .is-placeholder { color: var(--placeholder); }
.native-only { display: none; }
html:not(.js) .native-only { display: block; }
html:not(.js) .picker-btn, html:not(.js) .field__chev { display: none; }
html:not(.js) select.native-only { appearance: auto; }

.hint { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); }
.banner { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r-sm); font-size: 14px; font-weight: 600; }
.banner--error { background: var(--error-bg); color: var(--white); }
.banner--error svg { color: var(--error); flex: none; }

/* Fixed bottom action bar on mobile */
.actions { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; gap: 12px; padding: 16px 20px calc(20px + var(--safe-b)); background: var(--navy); border-top: 1px solid var(--line); }
.quote__form.is-sending .step { opacity: .6; pointer-events: none; }

/* Results */
.result { display: flex; flex-direction: column; align-items: center; gap: 24px; min-height: calc(100vh - 40px); padding-bottom: calc(24px + var(--safe-b)); }
.result:focus { outline: none; }
.result__logo { width: 150px; margin-top: 24px; }
.result__body { flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; }
.result__body h1, .result__body h2 { font-size: 28px; line-height: 1.2; font-weight: 700; max-width: 340px; }
.result__body > p { color: var(--text-2); max-width: 340px; }
.result__big { font-size: 44px; line-height: 1.15; font-weight: 700; color: var(--green); }
.result__actions { width: 100%; display: grid; gap: 12px; }
.result__errors { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; text-align: left; width: 100%; }
.result__errors li { display: flex; gap: 8px; align-items: flex-start; color: var(--white); background: var(--error-bg); padding: 10px 12px; border-radius: 10px; font-size: 14px; }
.result__errors svg { color: var(--error); flex: none; margin-top: 2px; }
.note { display: flex; align-items: center; gap: 8px; text-align: left; font-size: 12px; color: var(--text-2); background: var(--card); padding: 10px 14px; border-radius: var(--r-sm); max-width: 340px; }
.ring { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; background: var(--green-tint); }
.ring > span { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: var(--navy); }
.ring--error { background: var(--error-bg); }
.ring--error > span { background: var(--error); }
.ring--warn { background: var(--raised); }
.ring--warn > span { background: var(--warn); color: var(--white); }
.ring--neutral > span { background: var(--raised); color: var(--white); }
.summary { width: 100%; margin: 0; padding: 4px 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); text-align: left; }
.summary div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.summary div:last-child { border-bottom: 0; }
.summary dt { font-size: 14px; color: var(--text-2); }
.summary dd { margin: 0; font-size: 14px; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
body.show-result .m-header { display: none; }
.status-page .result--page { padding: 24px; max-width: 560px; margin: 0 auto; min-height: 100vh; }

/* ---------- Sheets (bottom sheet on mobile, dialog on desktop) ---------- */
.scrim { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.55); }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; max-height: 88vh; overflow: auto; display: grid; gap: 16px; padding: 12px 20px calc(32px + var(--safe-b)); background: var(--card); border-radius: var(--r-xl) var(--r-xl) 0 0; animation: sheet-in .22s ease-out; }
@keyframes sheet-in { from { transform: translateY(24px); opacity: .6; } }
.sheet__grab { justify-self: center; width: 40px; height: 4px; border-radius: 2px; background: var(--line-strong); }
.sheet__close { position: absolute; top: 8px; right: 8px; display: none; }
.sheet h2 { font-size: 20px; line-height: 1.25; font-weight: 700; }
.sheet__lead, .sheet__foot { font-size: 14px; color: var(--text-2); }
.sheet__foot a { color: var(--green); }
.sheet__actions { display: flex; gap: 12px; }
.info-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: var(--navy); border-radius: 14px; text-decoration: none; }
.info-row__chip { width: 40px; height: 40px; border-radius: 12px; background: var(--green-tint); color: var(--green); display: grid; place-items: center; flex: none; }
.info-row small { display: block; font-size: 12px; color: var(--text-2); }
.info-row b { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }

/* Calendar */
.cal { display: grid; gap: 8px; }
.cal__head { display: flex; align-items: center; justify-content: space-between; }
.cal__month { font-weight: 600; font-size: 14px; }
.cal__head .icon-btn[disabled] { color: var(--line-strong); cursor: not-allowed; }
.cal__week, .cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.cal__week span { font-size: 12px; color: var(--text-2); padding: 4px 0; }
.cal__grid button, .cal__grid span { height: 42px; display: grid; place-items: center; }
.cal__grid button { border: 0; background: none; padding: 0; font-weight: 600; font-size: 14px; }
.cal__grid button b { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; }
.cal__grid button:hover:not([disabled]) b { background: var(--raised); }
.cal__grid button[disabled] { color: var(--line-strong); text-decoration: line-through; cursor: not-allowed; }
.cal__grid button.is-today b { box-shadow: inset 0 0 0 1.5px var(--green); }
.cal__grid button[aria-selected="true"] b { background: var(--green); color: var(--navy); }

/* State options */
.options { display: grid; gap: 10px; }
.option { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; border: 1.5px solid transparent; background: var(--navy); text-align: left; font-weight: 600; font-size: 14px; }
.option span { flex: 1; }
.option small { color: var(--text-2); font-size: 12px; }
.option svg { display: none; color: var(--green); }
.option[aria-selected="true"] { background: var(--green-tint); border-color: var(--green); }
.option[aria-selected="true"] svg { display: block; }

/* =========================================================
   DESKTOP ≥ 960px — hero + quote card
   ========================================================= */
@media (min-width: 960px) {
  .m-header, .onboarding, .splash { display: none !important; }
  .d-nav, .pitch { display: flex; }
  .how, .footer { display: grid; }
  body.show-result .m-header { display: none; }

  .top { background: var(--green); color: var(--navy); border-bottom-right-radius: 160px; padding: 0 max(40px, calc((100vw - 1200px) / 2)) 96px; }
  .d-nav { align-items: center; justify-content: space-between; height: 96px; }
  .d-nav__logo img { width: 204px; }
  .d-nav__links { display: flex; gap: 40px; font-size: 14px; font-weight: 600; }
  .d-nav__links a { text-decoration: none; }
  .d-nav__links a:hover, .linklike:hover { text-decoration: underline; }
  .call-btn { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 20px; border-radius: var(--r-sm); background: var(--navy); color: var(--white); font-weight: 700; text-decoration: none; }
  .call-btn svg { color: var(--green); }

  .hero { display: grid; grid-template-columns: minmax(0, 1fr) 576px; gap: 64px; padding-top: 40px; align-items: start; }
  .pitch { flex-direction: column; gap: 24px; }
  .pitch h1 { font-size: 44px; line-height: 1.15; font-weight: 700; max-width: 560px; }
  .pitch__lead { color: var(--slate); max-width: 520px; }
  .chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 12px; }
  .chips li { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; background: var(--white); font-size: 12px; font-weight: 500; }
  .chips svg { color: var(--slate); }
  .pitch__art { width: 442px; }

  .quote { padding: 32px; background: var(--navy); color: var(--white); border-radius: var(--r-lg); box-shadow: 0 24px 48px -8px rgba(20, 31, 36, .28); }
  .quote__form { gap: 24px; }
  .step__title span { font-size: 28px; line-height: 1.2; }
  .step__title small { font-size: 16px; }
  .services { grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .actions { position: static; padding: 0; border: 0; background: none; }
  .result { min-height: 0; padding: 0; gap: 24px; }
  .result__logo { display: none; }
  .result__actions { grid-template-columns: 1fr auto; }

  .how { padding: 96px max(40px, calc((100vw - 1200px) / 2)); gap: 10px; }
  .how h2 { font-size: 28px; line-height: 1.2; margin-bottom: 30px; }
  .how__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .how__steps li { display: grid; align-content: start; gap: 14px; padding: 28px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); }
  .how__num { width: 40px; height: 40px; border-radius: 12px; background: var(--green); color: var(--navy); display: grid; place-items: center; font-weight: 700; }
  .how__steps h3 { font-size: 20px; }
  .how__steps p { font-size: 14px; color: var(--text-2); }

  .footer { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; padding: 48px max(40px, calc((100vw - 1200px) / 2)); border-top: 1px solid var(--line); }
  .footer img { width: 170px; margin-bottom: 12px; }
  .footer h3 { font-size: 14px; margin-bottom: 8px; }
  .footer p { font-size: 14px; color: var(--text-2); line-height: 1.8; }
  .footer a { text-decoration: none; }
  .footer a:hover { color: var(--white); text-decoration: underline; }
  .footer__muted { font-size: 12px !important; }

  .scrim { background: rgba(0,0,0,.45); }
  .sheet { left: 50%; top: 50%; right: auto; bottom: auto; width: 440px; transform: translate(-50%, -50%); border-radius: var(--r-lg); padding: 28px; animation: none; }
  .sheet__grab { display: none; }
  .sheet__close { display: inline-grid; }
  .status-page .result--page { justify-content: center; }
  .status-page .result__logo { display: block; }
}

@media (max-width: 380px) {
  .services { grid-template-columns: repeat(2, 1fr); }
  .row { grid-template-columns: 1fr; }
  .stepper li > span:last-child { display: none; }
  .stepper li.is-current > span:last-child { display: inline; }
}

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

/* iOS Safari form field fixes */
.field,
.field__box,
.row {
  min-width: 0;
  max-width: 100%;
}

.field__box {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}

.field__box input,
.field__box textarea,
.field__box select {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  font-size: 16px;
  line-height: 1.4;
}

.field__box input {
  flex: 1 1 0%;
}

/* Stack first and last name on narrow screens */
@media (max-width: 380px) {
  .row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Keep the mobile action buttons within the viewport */
.actions {
  box-sizing: border-box;
  width: 100%;
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}

.actions .btn {
  min-width: 0;
  white-space: normal;
}


/* Fix name fields on iOS Safari */
.row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}

.row > .field {
  min-width: 0;
  width: 100%;
}

.field__box {
  min-width: 0;
  width: 100%;
}

.field__box input {
  min-width: 0;
  width: 100%;
  flex: 1 1 0%;
  box-sizing: border-box;
  font-size: 16px; /* Prevents iOS Safari input zoom */
}

/* Stack fields on small iPhones */
@media (max-width: 380px) {
  .row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Fix duplicate State field on iOS Safari */
.field__box select.native-only {
  display: none !important;
}

html.js .field__box .picker-btn {
  display: block;
  width: 100%;
}

html.js .field__box select.native-only {
  display: none !important;
}

/* Keep the custom state picker aligned */
.field__box .picker-btn {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* iOS: show only the custom date/state picker */
html.js .field__box > .native-only {
  display: none !important;
}

html.js .field__box > .picker-btn {
  display: block;
  flex: 1 1 0%;
  min-width: 0;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border: 0;
  background: transparent;
  color: var(--navy);
  font: inherit;
  text-align: left;
  -webkit-appearance: none;
  appearance: none;
}

/* Keep the date and chevron from shrinking unpredictably */
.field__box > svg,
.field__box > .field__chev {
  flex: 0 0 auto;
}