/* ==========================================================================
   Seabound Journeys — Lead Capture / Cruise Quote System
   File: lead-forms.css
   --------------------------------------------------------------------------
   INTEGRATION PASS (Sept 16 2026): the placeholder token block this file
   shipped with has been replaced with the real seaboundjourneys.com design
   tokens, confirmed against the live site's own contact.html (navy/ocean
   palette, Cormorant Garamond + Jost fonts, --line/--text-soft naming) —
   not guessed. --muted maps to the site's own --text-soft value rather than
   redeclaring a new one, since the site does not define a sitewide --muted
   itself (verified: no collision). Radii/shadows/pill-shaped buttons were
   kept more rounded than the core site's boxier 2-4px buttons — per Joey's
   own standing preference (see [[preferences]] / [[seabound-monetization]])
   to let a new page cluster set a higher visual benchmark rather than being
   held down to the existing house style — while every COLOR and FONT below
   is the real brand identity, so the component reads as native, not foreign.
   Every rule in this file is scoped under .sjlf (Seabound Lead Form) or
   .sjmini (mini form) wrapper classes, and nothing here touches an
   un-namespaced element or class, so it is safe to include sitewide without
   affecting existing pages until those wrapper classes are actually used.
   ========================================================================== */

/* ---- Design tokens (real site values — see integration note above) ---- */
.sjlf,
.sjmini {
  --sj-teal-950: #0A1E33;      /* = site --navy */
  --sj-teal-900: #10304D;      /* = site --navy-2 */
  --sj-teal-700: #155A8A;      /* = site --ocean-deep */
  --sj-teal-500: #1a5f91;      /* = site --ocean (primary accent) */
  --sj-teal-300: #7FB6DD;      /* = site --ocean-light */
  --sj-teal-100: #E3EEF7;      /* light ocean tint, derived — site has no chip-tint token */
  --sj-sand-500: #1a5f91;      /* aliased to --ocean: the site has no gold/sand accent, */
  --sj-sand-600: #155A8A;      /* primary buttons use solid ocean → ocean-deep on hover */
  --sj-cream-50: #F4F8FB;      /* = site --mist */
  --sj-white: #ffffff;
  --sj-ink: #1C2B3A;           /* = site --text */
  --muted: var(--sj-muted, #52677C); /* = site --text-soft */
  --sj-line: #DCE6EF;          /* = site --line */
  --sj-danger: #b3261e;
  --sj-danger-bg: #fdecea;
  --sj-success: #1f7a4d;
  --sj-success-bg: #eaf6ef;
  --sj-radius-sm: 8px;
  --sj-radius-md: 14px;
  --sj-radius-lg: 22px;
  --sj-shadow-sm: 0 1px 2px rgba(10, 30, 51, 0.06), 0 1px 1px rgba(10, 30, 51, 0.04);
  --sj-shadow-md: 0 8px 24px rgba(10, 30, 51, 0.10), 0 2px 6px rgba(10, 30, 51, 0.06);
  --sj-shadow-lg: 0 20px 48px rgba(10, 30, 51, 0.16), 0 4px 12px rgba(10, 30, 51, 0.08);
  --sj-font-display: "Cormorant Garamond", Georgia, serif;   /* = site --display */
  --sj-font-body: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif; /* = site --body */
  --sj-maxw: 760px;
  --sj-gap: clamp(1rem, 2vw, 1.5rem);
  --sj-focus: 0 0 0 3px rgba(26, 95, 145, 0.35);
  --sj-transition-fast: 160ms cubic-bezier(.4,0,.2,1);
  --sj-transition-med: 320ms cubic-bezier(.4,0,.2,1);
  color-scheme: light;
}

/* ---- Reset, scoped ---- */
.sjlf *, .sjlf *::before, .sjlf *::after,
.sjmini *, .sjmini *::before, .sjmini *::after { box-sizing: border-box; }

.sjlf, .sjmini {
  font-family: var(--sj-font-body);
  color: var(--sj-ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.sjlf h1, .sjlf h2, .sjlf h3,
.sjmini h1, .sjmini h2, .sjmini h3 {
  font-family: var(--sj-font-display);
  color: var(--sj-teal-950);
  line-height: 1.2;
  margin: 0 0 0.4em;
  font-weight: 600;
}

.sjlf p, .sjmini p { margin: 0 0 1em; }
.sjlf a { color: var(--sj-teal-700); }

/* ==========================================================================
   FULL QUOTE FORM — layout shell
   ========================================================================== */

.sjlf-page {
  background: linear-gradient(180deg, var(--sj-teal-100) 0%, var(--sj-cream-50) 320px);
  padding: clamp(1.25rem, 4vw, 3rem) 1rem clamp(3rem, 6vw, 5rem);
  min-height: 100vh;
}

.sjlf-shell {
  max-width: var(--sj-maxw);
  margin: 0 auto;
}

.sjlf-intro {
  text-align: center;
  max-width: 560px;
  margin: 0 auto clamp(1.5rem, 4vw, 2.5rem);
}

.sjlf-intro .sjlf-eyebrow {
  display: inline-block;
  font-family: var(--sj-font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sj-teal-700);
  background: var(--sj-teal-100);
  padding: 0.35em 0.9em;
  border-radius: 999px;
  margin-bottom: 0.9em;
}

.sjlf-intro h1 { font-size: clamp(1.6rem, 4vw, 2.15rem); }
.sjlf-intro p { color: var(--muted); font-size: 1.02rem; }

/* ---- Progress indicator ---- */
.sjlf-progress {
  margin: 0 auto clamp(1.5rem, 3vw, 2rem);
}

.sjlf-progress-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 0.5em;
}

.sjlf-progress-label strong { color: var(--sj-teal-950); font-weight: 700; }

.sjlf-progress-track {
  height: 6px;
  border-radius: 999px;
  background: var(--sj-line);
  overflow: hidden;
}

.sjlf-progress-bar {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sj-teal-500), var(--sj-teal-700));
  width: 25%;
  transition: width var(--sj-transition-med);
}

@media (prefers-reduced-motion: reduce) {
  .sjlf-progress-bar { transition: none; }
}

.sjlf-steps-nav {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.6rem;
  list-style: none;
  padding: 0;
}

.sjlf-steps-nav li {
  flex: 1;
  text-align: center;
  font-size: 0.72rem;
  color: var(--muted);
  padding-top: 0.5rem;
  border-top: 3px solid var(--sj-line);
  transition: border-color var(--sj-transition-med), color var(--sj-transition-med);
}

.sjlf-steps-nav li.is-active,
.sjlf-steps-nav li.is-done {
  border-top-color: var(--sj-teal-500);
  color: var(--sj-teal-900);
  font-weight: 600;
}

/* ---- Card ---- */
.sjlf-card {
  background: var(--sj-white);
  border: 1px solid var(--sj-line);
  border-radius: var(--sj-radius-lg);
  box-shadow: var(--sj-shadow-md);
  padding: clamp(1.25rem, 4vw, 2.25rem);
  position: relative;
  overflow: hidden;
}

/* ---- Step panels + transition ----
   Without JS (no `.js` on <html>), every step stays visible so the form is
   still fully usable as one long page — see .sjlf-nojs-note below. With JS,
   only the active step shows and the rest of this file's wizard chrome
   (progress bar, step nav, Back/Next) takes over. */
.js .sjlf-step:not(.is-active) {
  display: none;
}
.sjlf-step:not(:first-child) {
  border-top: 1px solid var(--sj-line);
  margin-top: 1.75rem;
  padding-top: 1.75rem;
}
.js .sjlf-step:not(:first-child) {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}
.sjlf-step.is-active {
  animation: sjlf-step-in var(--sj-transition-med) both;
}
@keyframes sjlf-step-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .sjlf-step.is-active { animation: none; }
}

.sjlf-step-head { margin-bottom: 1.25rem; }
.sjlf-step-head h2 { font-size: 1.35rem; }
.sjlf-step-head p { color: var(--muted); font-size: 0.95rem; margin-bottom: 0; }

/* ---- Fieldsets / questions ---- */
.sjlf-q {
  border: 0;
  padding: 0;
  margin: 0 0 1.6rem;
}
.sjlf-q:last-child { margin-bottom: 0; }

.sjlf-q > legend,
.sjlf-label {
  display: block;
  font-weight: 600;
  color: var(--sj-teal-950);
  font-size: 1rem;
  margin-bottom: 0.15em;
  padding: 0;
}

.sjlf-hint {
  color: var(--muted);
  font-size: 0.86rem;
  margin: 0 0 0.7em;
}

.sjlf-optional-tag {
  font-weight: 500;
  font-size: 0.78rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-left: 0.4em;
}

/* ---- Text / email / tel / textarea / select inputs ---- */
.sjlf-input,
.sjlf-select,
.sjlf-textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--sj-ink);
  background: var(--sj-white);
  border: 1.5px solid var(--sj-line);
  border-radius: var(--sj-radius-sm);
  padding: 0.72em 0.85em;
  transition: border-color var(--sj-transition-fast), box-shadow var(--sj-transition-fast);
  min-height: 48px; /* touch target */
}

.sjlf-textarea { min-height: 96px; resize: vertical; }

.sjlf-input:focus-visible,
.sjlf-select:focus-visible,
.sjlf-textarea:focus-visible {
  outline: none;
  border-color: var(--sj-teal-500);
  box-shadow: var(--sj-focus);
}

.sjlf-input[aria-invalid="true"],
.sjlf-select[aria-invalid="true"],
.sjlf-textarea[aria-invalid="true"] {
  border-color: var(--sj-danger);
}

.sjlf-row {
  display: grid;
  gap: var(--sj-gap);
  grid-template-columns: 1fr;
}
.sjlf-row.sjlf-row-2 { grid-template-columns: 1fr 1fr; }
.sjlf-row.sjlf-row-3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 560px) {
  .sjlf-row.sjlf-row-2,
  .sjlf-row.sjlf-row-3 { grid-template-columns: 1fr; }
}

/* ---- Choice chips (multi-select destination / priorities / stateroom) ---- */
.sjlf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.sjlf-chip {
  position: relative;
}

.sjlf-chip input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  pointer-events: none;
}

.sjlf-chip label {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.6em 1.05em;
  min-height: 44px;
  border: 1.5px solid var(--sj-line);
  border-radius: 999px;
  background: var(--sj-white);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--sj-ink);
  cursor: pointer;
  transition: background var(--sj-transition-fast), border-color var(--sj-transition-fast), color var(--sj-transition-fast), transform var(--sj-transition-fast);
  user-select: none;
}

.sjlf-chip label:hover { border-color: var(--sj-teal-300); }

.sjlf-chip input:checked + label {
  background: var(--sj-teal-950);
  border-color: var(--sj-teal-950);
  color: var(--sj-white);
}

.sjlf-chip input:focus-visible + label {
  box-shadow: var(--sj-focus);
}

.sjlf-chip .sjlf-chip-check {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.sjlf-chip input:checked + label .sjlf-chip-check::after {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
}

/* ---- Segmented / single-choice cards (e.g. When would you like to travel) ---- */
.sjlf-segmented {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
}
@media (max-width: 560px) {
  .sjlf-segmented { grid-template-columns: 1fr; }
}

.sjlf-segmented input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}

.sjlf-segmented label {
  display: block;
  text-align: center;
  padding: 0.85em 0.6em;
  min-height: 48px;
  border: 1.5px solid var(--sj-line);
  border-radius: var(--sj-radius-sm);
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  transition: background var(--sj-transition-fast), border-color var(--sj-transition-fast), color var(--sj-transition-fast);
}

.sjlf-segmented input:checked + label {
  background: var(--sj-teal-100);
  border-color: var(--sj-teal-500);
  color: var(--sj-teal-950);
}
.sjlf-segmented input:focus-visible + label { box-shadow: var(--sj-focus); }

/* ---- Budget range list (radio, full-width rows) ---- */
.sjlf-budget { display: flex; flex-direction: column; gap: 0.5rem; }

.sjlf-budget-opt { position: relative; }
.sjlf-budget-opt input {
  position: absolute; opacity: 0; width: 1px; height: 1px;
}
.sjlf-budget-opt label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8em 1em;
  border: 1.5px solid var(--sj-line);
  border-radius: var(--sj-radius-sm);
  cursor: pointer;
  font-weight: 600;
  transition: background var(--sj-transition-fast), border-color var(--sj-transition-fast);
}
.sjlf-budget-opt input:checked + label {
  background: var(--sj-teal-950);
  border-color: var(--sj-teal-950);
  color: var(--sj-white);
}
.sjlf-budget-opt input:focus-visible + label { box-shadow: var(--sj-focus); }
.sjlf-budget-opt .sjlf-budget-note { font-weight: 400; font-size: 0.82rem; opacity: 0.75; }

/* ---- Stepper (adults / children / rooms) ---- */
.sjlf-stepper {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--sj-line);
  border-radius: var(--sj-radius-sm);
  overflow: hidden;
}
.sjlf-stepper button {
  width: 44px; height: 44px;
  border: 0;
  background: var(--sj-teal-100);
  color: var(--sj-teal-950);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--sj-transition-fast);
}
.sjlf-stepper button:hover { background: var(--sj-teal-300); }
.sjlf-stepper button:disabled { opacity: 0.4; cursor: not-allowed; }
.sjlf-stepper button:focus-visible { outline: none; box-shadow: var(--sj-focus); position: relative; z-index: 1; }
.sjlf-stepper input {
  width: 52px;
  border: 0;
  text-align: center;
  font: inherit;
  font-weight: 700;
  font-size: 1.05rem;
  -moz-appearance: textfield;
}
.sjlf-stepper input::-webkit-outer-spin-button,
.sjlf-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---- Child-ages repeater ---- */
.sjlf-child-ages { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.8rem; }
.sjlf-child-age {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--sj-cream-50);
  border: 1.5px solid var(--sj-line);
  border-radius: var(--sj-radius-sm);
  padding: 0.4rem 0.5rem 0.4rem 0.8rem;
}
.sjlf-child-age label { font-size: 0.82rem; color: var(--muted); font-weight: 600; margin: 0; }
.sjlf-child-age select { min-height: 40px; border-radius: 6px; padding: 0.3em 0.4em; border: 1px solid var(--sj-line); font: inherit; }

/* ---- Conditional reveal blocks ---- */
.sjlf-reveal {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height var(--sj-transition-med), opacity var(--sj-transition-med), margin var(--sj-transition-med);
  margin-top: 0;
}
.sjlf-reveal.is-open {
  max-height: 900px;
  opacity: 1;
  margin-top: 1rem;
}
@media (prefers-reduced-motion: reduce) {
  .sjlf-reveal { transition: none; }
}
.sjlf-reveal-inner {
  border-left: 3px solid var(--sj-teal-300);
  padding-left: 1rem;
}

/* ---- Yes/No pill toggle (small binary questions) ---- */
.sjlf-pillgroup { display: inline-flex; gap: 0.5rem; flex-wrap: wrap; }
.sjlf-pill { position: relative; }
.sjlf-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sjlf-pill label {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.55em 1.3em;
  border: 1.5px solid var(--sj-line);
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--sj-transition-fast), border-color var(--sj-transition-fast), color var(--sj-transition-fast);
}
.sjlf-pill input:checked + label {
  background: var(--sj-teal-700);
  border-color: var(--sj-teal-700);
  color: var(--sj-white);
}
.sjlf-pill input:focus-visible + label { box-shadow: var(--sj-focus); }
.sjlf-pill input:disabled + label,
.sjlf-segmented input:disabled + label,
.sjlf-chip input:disabled + label {
  opacity: 0.45;
  cursor: not-allowed;
}
.sjlf-pill label.is-disabled { opacity: 0.45; cursor: not-allowed; }

.sjlf-hint[data-phone-method-hint] { display: none; }
.sjlf-hint[data-phone-method-hint].is-visible { display: block; color: var(--sj-teal-700); }

/* ---- Error messaging ---- */
.sjlf-error {
  display: none;
  align-items: flex-start;
  gap: 0.4em;
  color: var(--sj-danger);
  background: var(--sj-danger-bg);
  border-radius: 8px;
  padding: 0.5em 0.7em;
  font-size: 0.85rem;
  margin-top: 0.5em;
}
.sjlf-error.is-visible { display: flex; }
.sjlf-error::before { content: "⚠"; flex: none; }

.sjlf-banner {
  display: none;
  align-items: flex-start;
  gap: 0.6em;
  border-radius: var(--sj-radius-sm);
  padding: 0.9em 1em;
  font-size: 0.92rem;
  margin-bottom: 1.2rem;
}
.sjlf-banner.is-visible { display: flex; }
.sjlf-banner.sjlf-banner-error { background: var(--sj-danger-bg); color: var(--sj-danger); }
.sjlf-banner.sjlf-banner-info { background: var(--sj-teal-100); color: var(--sj-teal-900); }

/* ---- Honeypot (visually hidden; real users never see or reach it) ----
   Uses the same clip-path technique as .sjlf-vh rather than a large
   negative left offset — an off-screen `left:-9999px` element still gets
   counted in the page's scrollable-overflow region in some browsers/
   viewports and was previously causing horizontal scroll on narrow
   viewports (caught by the QA pass). Zero footprint, no offset needed. */
.sjlf-hp {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- Nav buttons ---- */
.sjlf-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--sj-line);
}

.sjlf-btn {
  font: inherit;
  font-weight: 700;
  font-size: 0.98rem;
  border-radius: 999px;
  padding: 0.85em 1.7em;
  min-height: 48px;
  border: 1.5px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  transition: background var(--sj-transition-fast), color var(--sj-transition-fast), border-color var(--sj-transition-fast), transform var(--sj-transition-fast), box-shadow var(--sj-transition-fast);
}
.sjlf-btn:focus-visible { outline: none; box-shadow: var(--sj-focus); }

.sjlf-btn-primary {
  /* Real site convention (contact.html's .btn-solid): solid ocean-blue,
     white text — no gold/sand accent exists on the live site, so this no
     longer uses a placeholder warm color even though the underlying tokens
     are aliased for a single-point change (see :root block above). */
  background: linear-gradient(180deg, var(--sj-sand-500), var(--sj-sand-600));
  color: var(--sj-white);
  box-shadow: var(--sj-shadow-sm);
}
.sjlf-btn-primary:hover { transform: translateY(-1px); box-shadow: var(--sj-shadow-md); }
.sjlf-btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.sjlf-btn-ghost {
  background: transparent;
  color: var(--sj-teal-900);
  border-color: var(--sj-line);
}
.sjlf-btn-ghost:hover { border-color: var(--sj-teal-500); }

.sjlf-btn-spinner {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(10,30,51,0.25);
  border-top-color: var(--sj-teal-950);
  animation: sjlf-spin 700ms linear infinite;
  display: none;
}
.sjlf-btn.is-loading .sjlf-btn-spinner { display: inline-block; }
.sjlf-btn.is-loading .sjlf-btn-label { opacity: 0.7; }
@keyframes sjlf-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .sjlf-btn-spinner { animation-duration: 1200ms; }
}

.sjlf-microcopy {
  text-align: center;
  color: var(--muted);
  font-size: 0.82rem;
  margin-top: 1rem;
}

/* ---- Consent ---- */
.sjlf-consent {
  display: flex;
  gap: 0.6em;
  align-items: flex-start;
  font-size: 0.85rem;
  color: var(--muted);
  background: var(--sj-cream-50);
  border-radius: var(--sj-radius-sm);
  padding: 0.8em 0.9em;
  margin-top: 1.4rem;
}
.sjlf-consent input { margin-top: 0.2em; width: 18px; height: 18px; flex: none; }
.sjlf-consent a { color: var(--sj-teal-700); }

/* ---- Success state ---- */
.sjlf-success { text-align: center; padding: 0.5rem 0 0.5rem; }
.sjlf-success-badge {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--sj-success-bg);
  color: var(--sj-success);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
  font-size: 1.8rem;
}
.sjlf-success h2 { font-size: 1.5rem; }
.sjlf-success .sjlf-brandline {
  font-family: var(--sj-font-display);
  font-style: italic;
  color: var(--sj-teal-700);
  margin-top: 1.5rem;
}
.sjlf-summary {
  text-align: left;
  background: var(--sj-cream-50);
  border: 1px solid var(--sj-line);
  border-radius: var(--sj-radius-md);
  padding: 1rem 1.2rem;
  margin: 1.4rem 0;
  font-size: 0.92rem;
}
.sjlf-summary dt { font-weight: 700; color: var(--sj-teal-950); margin-top: 0.6rem; }
.sjlf-summary dt:first-child { margin-top: 0; }
.sjlf-summary dd { margin: 0 0 0.2rem; color: var(--sj-ink); }

/* ---- Visually-hidden util + skip target ---- */
.sjlf-vh {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- No-JS fallback ---- */
.sjlf-jsonly { display: none; }
.js .sjlf-jsonly { display: block; }
.sjlf-nojs-note { display: block; }
.js .sjlf-nojs-note { display: none; }
.js .sjlf-step:not(.is-active) { display: none; }
.no-js-hide-progress { display: none; }
.js .no-js-hide-progress { display: block; }

/* ==========================================================================
   MINI LEAD FORM — compact, embeddable in-content component
   ========================================================================== */

.sjmini {
  background: var(--sj-white);
  border: 1px solid var(--sj-line);
  border-radius: var(--sj-radius-lg);
  box-shadow: var(--sj-shadow-sm);
  padding: clamp(1.1rem, 3vw, 1.6rem);
  max-width: 640px;
}

.sjmini-head { display: flex; align-items: flex-start; gap: 0.8rem; margin-bottom: 1rem; }
.sjmini-head .sjmini-icon {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--sj-teal-100);
  color: var(--sj-teal-700);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
}
.sjmini-head h3 { font-size: 1.1rem; margin-bottom: 0.15em; }
.sjmini-head p { color: var(--muted); font-size: 0.88rem; margin: 0; }

.sjmini-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
@media (max-width: 480px) {
  .sjmini-grid { grid-template-columns: 1fr; }
}
.sjmini-field { display: flex; flex-direction: column; gap: 0.3rem; }
.sjmini-field label { font-size: 0.82rem; font-weight: 600; color: var(--sj-teal-950); }
.sjmini-field.sjmini-span2 { grid-column: 1 / -1; }

.sjmini-actions { margin-top: 1rem; }
.sjmini-microcopy { font-size: 0.76rem; color: var(--muted); margin-top: 0.6rem; text-align: center; }

.sjmini.is-compact .sjmini-grid { grid-template-columns: 1fr; }

/* Inline variant sits flush inside a content column, no card chrome */
.sjmini.sjmini-inline {
  border: none;
  box-shadow: none;
  border-top: 1px solid var(--sj-line);
  border-bottom: 1px solid var(--sj-line);
  border-radius: 0;
  padding-top: clamp(1.25rem, 3vw, 1.75rem);
  padding-bottom: clamp(1.25rem, 3vw, 1.75rem);
}

/* Success + error reuse the same classes as the full form for consistency */
.sjmini .sjlf-success { padding: 0.25rem 0; }
.sjmini .sjlf-success-badge { width: 48px; height: 48px; font-size: 1.4rem; }
.sjmini .sjlf-success h2 { font-size: 1.15rem; }

/* ==========================================================================
   v2 additions (Sept 16 2026) — trust rail, how-it-works, resume banner,
   richer success state. All still scoped under .sjlf / .sjmini.
   ========================================================================== */

/* Banner action button ("Start over") */
.sjlf-banner-action {
  font: inherit; font-weight: 600; font-size: 0.85rem;
  background: transparent; border: 1.5px solid currentColor; color: inherit;
  border-radius: 999px; padding: 0.25em 0.9em; margin-left: auto; cursor: pointer;
  white-space: nowrap;
}
.sjlf-banner-action:hover { background: rgba(255,255,255,0.5); }
.sjlf-banner-action:focus-visible { outline: none; box-shadow: var(--sj-focus); }

/* Two-column shell on wide screens: form + trust rail */
.sjlf-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; }
@media (min-width: 980px) {
  .sjlf-layout { grid-template-columns: minmax(0, 1fr) 300px; }
  .sjlf-layout .sjlf-shell { max-width: none; }
}

/* Trust rail */
.sjlf-trust {
  background: var(--sj-white);
  border: 1px solid var(--sj-line);
  border-radius: var(--sj-radius-lg);
  box-shadow: var(--sj-shadow-sm);
  padding: clamp(1.1rem, 2.5vw, 1.5rem);
  font-size: 0.92rem;
  position: sticky; top: 112px;
}
.sjlf-trust-who { display: flex; gap: 0.85rem; align-items: center; margin-bottom: 1rem; }
.sjlf-trust-avatar {
  flex: none; width: 52px; height: 52px; border-radius: 50%;
  background: var(--sj-teal-950); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sj-font-display); font-weight: 600; font-size: 1.35rem; letter-spacing: 0.02em;
}
.sjlf-trust-who strong { display: block; color: var(--sj-teal-950); font-size: 1rem; }
.sjlf-trust-who span { color: var(--muted); font-size: 0.84rem; }
.sjlf-trust ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.sjlf-trust li { display: flex; gap: 0.55rem; align-items: flex-start; color: var(--sj-ink); line-height: 1.4; }
.sjlf-trust li::before {
  content: ""; flex: none; width: 18px; height: 18px; margin-top: 0.1em; border-radius: 50%;
  background: var(--sj-teal-100);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23155A8A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E");
  background-size: 12px; background-position: center; background-repeat: no-repeat;
}
.sjlf-trust-quote {
  margin: 1.1rem 0 0; padding: 0.9rem 1rem; border-left: 3px solid var(--sj-teal-300);
  background: var(--sj-cream-50); border-radius: 0 var(--sj-radius-sm) var(--sj-radius-sm) 0;
  font-family: var(--sj-font-display); font-style: italic; font-size: 1.05rem; color: var(--sj-teal-900); line-height: 1.45;
}
.sjlf-trust-quote cite { display: block; font-style: italic; font-family: var(--sj-font-display); font-size: 0.95rem; color: var(--sj-teal-500); margin-top: 0.5rem; letter-spacing: 0.01em; }
.sjlf-trust-contact { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--sj-line); font-size: 0.86rem; color: var(--muted); }
.sjlf-trust-contact a { color: var(--sj-teal-700); font-weight: 600; text-decoration: none; }
.sjlf-trust-contact a:hover { text-decoration: underline; }
@media (max-width: 979px) {
  .sjlf-trust { position: static; }
  .sjlf-trust-quote { display: none; }
}

/* How it works — three quiet steps under the intro */
.sjlf-how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin: 0 auto clamp(1.5rem, 3vw, 2rem); max-width: 720px; }
.sjlf-how div { background: var(--sj-white); border: 1px solid var(--sj-line); border-radius: var(--sj-radius-md); padding: 0.85rem 0.95rem; font-size: 0.86rem; color: var(--muted); line-height: 1.4; }
.sjlf-how b { display: block; color: var(--sj-teal-950); font-weight: 600; font-size: 0.92rem; margin-bottom: 0.15rem; }
.sjlf-how small { display: inline-block; color: var(--sj-teal-500); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.25rem; }
@media (max-width: 560px) { .sjlf-how { grid-template-columns: 1fr; gap: 0.5rem; } .sjlf-how div { display: flex; gap: 0.7rem; align-items: baseline; } .sjlf-how small { flex: none; } }

/* Time estimate on the intro */
.sjlf-intro .sjlf-time { display: inline-flex; align-items: center; gap: 0.35em; color: var(--muted); font-size: 0.85rem; margin-top: -0.4rem; }

/* Success state: next-step actions */
.sjlf-success-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; margin: 1.2rem 0 0.4rem; }
.sjlf-success-actions .sjlf-btn { text-decoration: none; }
.sjlf-success-next { text-align: left; margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--sj-line); }
.sjlf-success-next h3 { font-size: 1.05rem; margin-bottom: 0.5rem; }
.sjlf-success-next p { color: var(--muted); font-size: 0.92rem; }
.sjlf-success-next ul { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.45rem; }
.sjlf-success-next a { color: var(--sj-teal-700); font-weight: 600; text-decoration: none; }
.sjlf-success-next a:hover { text-decoration: underline; }

/* Mini form: quiet secondary "or book a call" line */
.sjmini-alt { font-size: 0.82rem; color: var(--muted); margin-top: 0.7rem; text-align: center; }
.sjmini-alt a { color: var(--sj-teal-700); font-weight: 600; text-decoration: none; }
.sjmini-alt a:hover { text-decoration: underline; }
.sjmini[hidden], .sjmini-head[hidden] { display: none; }

/* Quiet cross-link from the quote wizard to the booking-transfer page, for
   the visitor who arrives already booked. Deliberately low-contrast — it
   must not compete with the form it sits above. */
.sjlf-alreadybooked {
  max-width: 1080px; margin: 1rem auto 0; padding: 0 1rem;
  font-family: 'Jost', system-ui, sans-serif; font-size: .88rem; line-height: 1.5;
  color: var(--muted, #52677C); text-align: center;
}
.sjlf-alreadybooked a { color: var(--sj-teal-700, #155A8A); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.sjlf-alreadybooked a:hover { color: var(--sj-teal-950, #0A1E33); }

/* ==========================================================================
   v45 additions (Sept 28 2026)
   .sj-adv     one restrained "ask Joey" invite on a guide page (native <details>)
   .sjmini-home / .sjmini-contact   the short form on the homepage and contact page
   ========================================================================== */

.sj-adv {
  --sj-adv-ink: var(--ink, #1C2B3A);
  --sj-adv-muted: var(--muted, #52677C);
  --sj-adv-line: var(--sea-line, var(--line, #DCE6EF));
  --sj-adv-accent: var(--sea, var(--ocean, #1a5f91));
  margin: 2rem 0;
  padding: 1.1rem 0;
  border-top: 1px solid var(--sj-adv-line);
  border-bottom: 1px solid var(--sj-adv-line);
  color: var(--sj-adv-ink);
  font: inherit;
  max-width: 68ch;
}
.sj-adv > p { margin: 0 0 .75rem; font-size: 1rem; line-height: 1.55; }
.sj-adv > p strong { font-weight: 650; }
.sj-adv-d { margin: 0; }
.sj-adv-d > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding: .55rem 1rem;
  border: 1.5px solid var(--sj-adv-accent);
  border-radius: 999px;
  color: var(--sj-adv-accent);
  background: transparent;
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.2;
}
.sj-adv-d > summary::-webkit-details-marker { display: none; }
.sj-adv-d > summary::after { content: "+"; font-weight: 400; font-size: 1.15rem; line-height: 1; }
.sj-adv-d[open] > summary::after { content: "\2212"; }
.sj-adv-d > summary:hover { background: var(--sj-adv-accent); color: #fff; }
.sj-adv-d > summary:focus-visible { outline: 3px solid #f0b400; outline-offset: 3px; }
.sj-adv-d .sjmini {
  --sj-font-body: inherit;
  --sj-font-display: inherit;
  margin-top: .9rem;
  max-width: none;
  border: 1px solid var(--sj-adv-line);
  border-radius: 12px;
  box-shadow: none;
  background: var(--paper, #fff);
}
.sj-adv-d .sjmini-head { display: block; margin-bottom: .8rem; }
.sj-adv-d .sjmini-head h3 { font-size: 1.05rem; }
.sj-adv-note { font-size: .82rem; color: var(--sj-adv-muted); margin: .6rem 0 0; }
.sj-adv-tool { margin-top: 1.2rem; }
@media (prefers-reduced-motion: no-preference) {
  .sj-adv-d > summary { transition: background .16s ease, color .16s ease; }
}

/* Homepage + contact page: the same mini engine, sized to sit in those layouts */
.sjmini-home, .sjmini-contact { max-width: none; }
.sjmini-home .sjmini-grid, .sjmini-contact .sjmini-grid { grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) {
  .sjmini-home .sjmini-grid, .sjmini-contact .sjmini-grid { grid-template-columns: 1fr; }
}