/* Grupo Sineva — theme layer matched to gruposineva.com (loaded after site.css and chat.css).
   Same design language as the live site, set in Poppins (owner's choice) throughout, logo teal #0B6B6B as the action colour (was sage #5A7C6C until 2026-10-31),
   #FAFAFA page with white hairline cards, 6–12px radii, white header, light hero with the photo merging in from the right,
   deep green bands for the dark sections. Remove the <link> to theme.css to go back to the "Street Level" look. */

/* ---------- Tokens ---------- */
:root {
  --f-head: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --f-sans: var(--f-head);
  --f-karla: var(--f-head); --f-pop: var(--f-sans); --f-arch: var(--f-sans);
  --bg: #FAFAFA; --surface: #FFFFFF; --ink: #111C1C; --muted: #535F5F; --line: #D3E4E4;
  --band: #0C2626; --on-band: #F3F8F8; --action: #0B6B6B; --action-hover: #085858;
  --heading: #111C1C; --icon: #0B6B6B; --obm: #B6C9C9; --lob: #8FCFCB; --sage: #8FCFCB;
  --tint: #EBF5F5; --col-tint: #EBF5F5; --band-line: rgba(243, 248, 248, .12);
  --draw-fill: #EBF5F5; --focus: #0E7C7C; --stone: #EBF5F5; --accent: #8FCFCB; --on-action-muted: #CFE9E8;
  --r-lg: 12px; --r-md: 10px; --r-sm: 6px;
  --shadow: 0 1px 2px rgba(17, 28, 28, .05), 0 10px 30px -14px rgba(17, 28, 28, .16);
  --sec: clamp(64px, 9vw, 112px);
  --head-h: 64px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E1717; --surface: #142121; --ink: #EEF3F1; --muted: #A2B5B5; --line: #243434;
    --band: #0A1313; --on-band: #EEF3F1; --action: #6CC4BF; --action-hover: #8FD4D0;
    --heading: #F2F6F4; --icon: #6CC4BF; --obm: #A8BABA; --lob: #8FCFCB;
    --tint: #182828; --col-tint: #182828; --draw-fill: #182828; --focus: #8FCFCB; --stone: #182828; --on-action-muted: #182828;
    --shadow: 0 12px 34px -16px rgba(0, 0, 0, .7);
  }
}
:root[data-theme="dark"] {
  --bg: #0E1717; --surface: #142121; --ink: #EEF3F1; --muted: #A2B5B5; --line: #243434;
  --band: #0A1313; --on-band: #EEF3F1; --action: #6CC4BF; --action-hover: #8FD4D0;
  --heading: #F2F6F4; --icon: #6CC4BF; --obm: #A8BABA; --lob: #8FCFCB;
  --tint: #182828; --col-tint: #182828; --draw-fill: #182828; --focus: #8FCFCB; --stone: #182828; --on-action-muted: #182828;
  --shadow: 0 12px 34px -16px rgba(0, 0, 0, .7);
}

/* ---------- Type ---------- */
body { font: 400 16px/1.7 var(--f-sans); }
h1, h2, h3 { font-family: var(--f-head); }
h2 { font-weight: 700; font-size: clamp(1.75rem, 1.25rem + 2.2vw, 2.75rem); line-height: 1.15; letter-spacing: -.02em; }
h3 { font-weight: 600; font-size: clamp(1.0625rem, .98rem + .45vw, 1.3125rem); line-height: 1.35; letter-spacing: -.01em; }
.label { font: 600 12px/1.3 var(--f-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--action); }
.band .label { color: var(--sage); }
.lede { font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); line-height: 1.6; }
.num, .price { font-family: var(--f-sans); }
.price { font-weight: 700; }
.kw { font-weight: inherit; text-decoration: none; color: var(--action); }
.band .kw { color: var(--sage); }

/* ---------- Buttons: 6px radius like the live site ---------- */
.btn { min-height: 46px; padding: 0 26px; border-radius: var(--r-sm); border-width: 1px; font: 600 16px/1.2 var(--f-sans); box-shadow: 0 1px 2px rgba(17, 28, 28, .06); }
.btn-primary { background: var(--action); color: #FFFFFF; }
.btn-primary:hover { background: var(--action-hover); }
.btn-outline { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-outline:hover { background: var(--tint); }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
.btn-onband, .band .btn-primary { background: #FFFFFF; color: var(--band); }
.btn-onband:hover, .band .btn-primary:hover { background: var(--sage); color: #111C1C; }
.band .btn-outline { background: transparent; color: var(--on-band); border-color: rgba(243, 248, 248, .35); }
.text-link { font: 600 16px/1.3 var(--f-sans); color: var(--action); }
.icon-btn { border-radius: var(--r-sm); }

/* ---------- Header: white bar with a hairline, like the live site ---------- */
.site-head { background: var(--surface); color: var(--ink); border-bottom: 1px solid var(--line); --focus: var(--action); }
/* Brand: teal "S" tile + "Grupo Sineva Consulting" set in Poppins (the original site's mark) */
.logo, .foot-logo, .contact-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; padding: 0; }
.brand-mark { flex: none; width: 32px; height: 32px; border-radius: 8px; background: var(--action); color: #FFFFFF; display: grid; place-items: center; font: 700 17px/1 var(--f-head); }
.brand-name { font: 700 18px/1 var(--f-head); letter-spacing: -.015em; white-space: nowrap; }
.brand-name span { font-weight: 500; color: var(--muted); }
@media (max-width: 380px) { .logo .brand-name { font-size: 16px; } .logo { gap: 8px; } }
.contact-logo { width: auto; height: auto; color: var(--on-band); margin-bottom: 20px; }
.contact-logo .brand-name span { color: var(--sage); }
.nav { gap: 4px; }
.nav a { color: var(--ink); font: 500 15px/1 var(--f-sans); padding: 10px 14px; border: 0; border-radius: var(--r-sm); transition: background-color .18s var(--ease); }
.nav a:hover { background: var(--tint); }
.nav a[aria-current="true"] { background: var(--tint); color: var(--action); }
.site-head .icon-btn { color: var(--ink); }
.site-head .icon-btn:hover { border-color: var(--line); }
.site-head .btn-onband, .head-book { background: var(--action); color: #FFFFFF; min-height: 40px; padding: 0 18px; font-size: 14px; }
.site-head .btn-onband:hover { background: var(--action-hover); color: #FFFFFF; }
.menu-btn { color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-sm); font: 600 15px/1 var(--f-sans); min-height: 40px; }
.sheet { background: var(--surface); color: var(--ink); --focus: var(--action); border-top: 1px solid var(--line); }
.sheet nav { border-top-color: var(--line); }
.sheet nav a { color: var(--ink); border-bottom-color: var(--line); font: 700 26px/1.2 var(--f-head); letter-spacing: -.015em; }
.sheet nav a .num { font: 600 12px/1 var(--f-sans); color: var(--action); }
.sheet .btn-onband { background: var(--action); color: #FFFFFF; }
.sheet-addr { color: var(--muted); font: 400 14px/1.6 var(--f-sans); letter-spacing: 0; }
.sheet-close-nojs { color: var(--ink); }

/* ---------- Hero: copy on the left, variant A ---------- */
/* "Split, photo bleeds to the edge": quiet copy on the left, a tall street photo that runs to the right edge of the
   screen with a soft rounded inner (left) edge, and the opening checklist as a small card tucked under the photo's
   lower-left corner (below the owner's feet, never over him). Phones: photo card first, then the copy, then the checklist. */
.hero.band {
  background: linear-gradient(180deg, var(--tint) 0%, var(--bg) 62%);
  color: var(--ink); --heading: var(--ink); --icon: var(--action); --focus: var(--action);
  --muted: #535F5F; /* the page's muted ink again (.band swaps it for the on-dark grey; var(--muted) here would be a cycle) */
}
.hero .sky { display: none; }

/* Phone and tablet: one calm column */
.hero .hero-grid {
  display: flex; flex-direction: column; row-gap: 0; column-gap: 0;
  padding-top: 16px; padding-bottom: clamp(56px, 8vw, 88px);
}
.hero .hero-bg {
  order: 0; display: block; position: relative; overflow: hidden; margin: 0;
  aspect-ratio: 4 / 3; border-radius: var(--r-lg); background: var(--tint);
  box-shadow: 0 1px 2px rgba(17, 28, 28, .05), 0 22px 44px -30px rgba(17, 28, 28, .45);
}
.hero .hero-bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 38% 80%; }
.hero .hero-copy { order: 1; grid-column: auto; min-width: 0; margin-top: 28px; max-width: 600px; }
.hero .hero-media { order: 2; grid-column: auto; align-self: stretch; min-width: 0; margin: 36px 0 0; max-width: 420px; }

/* Eyebrow: a short sage rule instead of a pill */
.hero .label {
  display: flex; align-items: center; gap: 12px; padding: 0; border: 0; background: none;
  font: 600 12px/1.4 var(--f-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--action);
}
.hero .label::before { content: ""; flex: none; width: 28px; height: 1px; border-radius: 0; background: var(--action); }

/* Live Miami time: small and grey (site.js reveals it with .is-live; the slot is reserved from first paint) */
.hero .hero-time {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; min-height: 2.8em;
  font: 400 13px/1.4 var(--f-sans); letter-spacing: 0; color: var(--muted);
}
.hero .hero-time .ic { flex: none; margin: 1px 0 0; color: var(--action); }

.hero .hero-q { margin-top: 14px; max-width: 40ch; font: 500 15px/1.5 var(--f-sans); color: var(--ink); }
.hero h1 {
  margin-top: 8px; max-width: 17ch; color: var(--ink);
  font: 600 clamp(2rem, 1.55rem + 1.9vw, 3.25rem)/1.12 var(--f-head); letter-spacing: -.025em; text-wrap: balance;
}
.hero .kw { color: var(--action); }
.hero .lede { margin-top: 18px; max-width: 48ch; font-size: 16px; line-height: 1.65; color: var(--muted); }

.hero .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero .hero-cta .btn { min-height: 48px; padding: 0 22px; width: 100%; justify-content: center; }
.hero .btn-onband { background: var(--action); color: #FFFFFF; border-color: var(--action); }
.hero .btn-onband:hover { background: var(--action-hover); border-color: var(--action-hover); color: #FFFFFF; }
.hero .btn-outline { background: var(--surface); color: var(--ink); border-color: var(--line); }
.hero .btn-outline:hover { background: var(--tint); }
.hero .hero-note { margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--muted); }

/* Proof: a quiet footnote under a hairline */
.hero .hero-proof {
  display: grid; gap: 4px; margin-top: 28px; padding: 18px 0 0; max-width: 52ch;
  border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none;
}
.hero .hero-proof b { font: 600 15px/1.45 var(--f-head); color: var(--ink); letter-spacing: -.005em; }
.hero .hero-proof span { font-size: 14px; line-height: 1.55; color: var(--muted); }

/* Checklist card: compact and white, no string or pin */
.hero .ticket-wrap { grid-column: auto; margin: 0; max-width: none; min-width: 0; text-align: left; }
.hero .ticket {
  position: relative; padding: 16px 18px 12px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); color: var(--ink); --focus: var(--action);
  box-shadow: 0 1px 2px rgba(17, 28, 28, .05), 0 18px 40px -22px rgba(17, 28, 28, .35);
}
.hero .ticket::before, .hero .ticket::after { display: none; content: none; }
.hero .ticket-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.hero .ticket-title { font: 600 15px/1.3 var(--f-head); color: var(--ink); letter-spacing: -.005em; }
.hero .ticket-tag {
  padding: 4px 8px; border-radius: 999px; background: var(--tint);
  font: 600 11px/1 var(--f-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--action); white-space: nowrap;
}
.hero .ticket-list { margin-top: 2px; }
.hero .ticket-list li {
  grid-template-columns: 16px minmax(0, 1fr) auto; gap: 10px; padding: 7px 0;
  border-bottom: 1px solid var(--line); font: 400 13px/1.4 var(--f-sans); color: var(--ink);
}
.hero .ticket-list li:last-child { border-bottom: 0; }
.hero .ticket-list li.open { font: 600 13px/1.4 var(--f-sans); }
.hero .ticket-list li.open b { font-weight: 600; }
.hero .who-owns { font: 600 11px/1 var(--f-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.hero .ticket-list li.open .who-owns { color: var(--action); }
.hero .tk { width: 16px; height: 16px; stroke: var(--action); }
.hero .ticket-list li.open .tk circle { fill: var(--action); }
.hero .ticket-list li.open .tk .tk-c { stroke: #FFFFFF; }
.hero .ticket-foot { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.5; color: var(--muted); }

/* Small phones: the eyebrow fits on one line without its rule */
@media (max-width: 559px) {
  .hero .label { font-size: 11px; letter-spacing: .08em; }
  .hero .label::before { display: none; }
}

/* Tablet: a wider photo, buttons side by side */
@media (min-width: 560px) {
  .hero .hero-bg { aspect-ratio: 16 / 10; }
  .hero .hero-bg img { object-position: 38% 78%; }
  .hero .hero-cta .btn { width: auto; }
  .hero .hero-time { min-height: 1.4em; }
}

/* Desktop: copy | photo bleeding to the right edge of the screen; proof and checklist share a quiet last row */
@media (min-width: 1024px) {
  .hero .hero-grid {
    display: grid; width: 100%; max-width: none; margin: 0;
    grid-template-columns:
      [full-start] minmax(var(--pad), 1fr)
      [copy-start] minmax(0, 560px) [copy-end]
      minmax(40px, 72px)
      [photo-start] minmax(0, 568px) [content-end]
      minmax(var(--pad), 1fr) [full-end];
    grid-template-rows: [photo-top] minmax(0, 1fr) repeat(7, auto) minmax(0, 1fr) [photo-bottom] auto;
    padding-top: clamp(24px, 3vw, 40px); padding-bottom: clamp(56px, 6vw, 88px);
  }
  .hero .hero-copy { display: contents; }
  .hero .hero-copy > * { grid-column: copy-start / copy-end; }
  .hero .label { grid-row: 2; }
  .hero .hero-time { grid-row: 3; min-height: 1.4em; }
  .hero .hero-q { grid-row: 4; margin-top: 22px; }
  .hero h1 { grid-row: 5; }
  .hero .lede { grid-row: 6; font-size: 17px; }
  .hero .hero-cta { grid-row: 7; margin-top: 32px; }
  .hero .hero-cta .btn { padding: 0 20px; font-size: 15px; }
  .hero .hero-note { grid-row: 8; }
  .hero .hero-proof { grid-row: 10; align-self: start; margin-top: 44px; max-width: 50ch; }

  /* The photo: a consultant shows a couple a map of Florida in a Miami high-rise office, right edge flush with the screen */
  .hero .hero-bg {
    grid-column: photo-start / full-end; grid-row: photo-top / photo-bottom; align-self: stretch;
    aspect-ratio: auto;
    min-height: clamp(560px, calc(100vh - var(--head-h) - 150px), 760px);
    min-height: clamp(560px, calc(100svh - var(--head-h) - 150px), 760px);
    border-radius: 24px 0 0 24px; box-shadow: none;
    background: var(--tint) url("../images/hero-day-landscape.jpg") no-repeat 52% 55% / cover;
  }
  .hero .hero-bg img { position: absolute; inset: 0; opacity: 0; }

  /* The checklist tucks under the photo's lower-left corner: it overlaps only the bottom 110px (the desk edge), below the people */
  .hero .hero-media {
    grid-column: photo-start / content-end; grid-row: photo-bottom; align-self: start; justify-self: start;
    position: relative; z-index: 2; width: 340px; max-width: none; margin: -110px 0 0 -40px;
  }
}

/* Subtle entrance only when motion is welcome */
@media (prefers-reduced-motion: no-preference) {
  .hero .hero-bg { animation: hero-a-fade .9s var(--ease, ease-out) both; }
  .hero .hero-copy > * { animation: hero-a-rise .6s var(--ease, ease-out) both; }
  .hero .hero-copy > :nth-child(3) { animation-delay: 60ms; }
  .hero .hero-copy > :nth-child(4) { animation-delay: 120ms; }
  .hero .hero-copy > :nth-child(5) { animation-delay: 180ms; }
  .hero .hero-copy > :nth-child(n + 6) { animation-delay: 240ms; }
  .hero .hero-media { animation: hero-a-rise .7s var(--ease, ease-out) .35s both; }
  .hero .ticket-list li.open .tk circle { animation-name: hero-a-tk-fill; }
}
@keyframes hero-a-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hero-a-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes hero-a-tk-fill { from { fill: rgba(11, 107, 107, 0); } to { fill: var(--action); } }

/* Dark bands (How it works, Contact): deep green like the live site's "Two roads" section */
.band:not(.hero) { background: var(--band); background-image: radial-gradient(1200px 500px at 50% -10%, rgba(11, 107, 107, .22), transparent 70%); }

/* ======================== who-move ======================== */
/* ---------- Proof strip: four small tiles on a light-grey band right under the hero ---------- */
.strip { background: var(--surface); border-bottom: 0; padding-block: clamp(20px, 4vw, 40px); }
.strip .strip-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.strip .strip-grid > div:nth-child(n) {
  grid-template-columns: 28px minmax(0, 1fr); column-gap: 14px; row-gap: 4px;
  padding: 20px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg);
}
.strip .strip-grid .ic { grid-row: span 2; width: 28px; height: 28px; margin: 0; color: var(--icon); }
.strip .strip-grid strong { font: 600 18px/1.3 var(--f-sans); letter-spacing: -.02em; color: var(--heading); }
.strip .strip-grid span { font-size: 15px; line-height: 1.45; letter-spacing: -.01em; color: var(--muted); }
@media (min-width: 560px) {
  .strip .strip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip .strip-grid > div:nth-child(n) { grid-template-columns: minmax(0, 1fr); row-gap: 6px; padding: 24px; }
  .strip .strip-grid .ic { grid-row: auto; margin-bottom: 6px; }
}
@media (min-width: 1024px) { .strip .strip-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }

/* ---------- Showcase heads (Who, Your whole move): centred title block ---------- */
#who .head, #move .head { margin-inline: auto; text-align: center; justify-items: center; max-width: 820px; margin-bottom: clamp(40px, 5vw, 64px); }
#who .head .lede, #move .head .lede { margin-inline: auto; max-width: 60ch; }

/* ---------- Who: three big rounded grey cards on white ---------- */
#who .who { grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 900px) { #who .who { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
#who .who article {
  gap: 14px; padding: clamp(24px, 3vw, 32px); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
}
/* Route code: white pill (can wrap on a narrow card, so it keeps a real line-height) */
#who .route-code {
  justify-self: start; max-width: 100%; padding: 6px 12px; border: 0; border-radius: 999px; background: var(--bg);
  font: 600 12px/1.25 var(--f-sans); letter-spacing: .04em; color: var(--action);
}
#who .who .from { font: 500 14px/1.4 var(--f-sans); letter-spacing: -.005em; text-transform: none; color: var(--muted); }
#who .who h3 { font-size: clamp(1.5rem, 1.25rem + .8vw, 1.75rem); line-height: 1.14; letter-spacing: -.022em; }
#who .who article > p:not(.from):not(.route-code) { font-size: 16px; line-height: 1.5; max-width: 62ch; }
#who .checks { gap: 10px; margin-top: 6px; padding-top: 18px; border-top: 1px solid var(--line); }
#who .checks li { font-size: 15px; line-height: 1.4; letter-spacing: -.01em; }
#who .checks li::before { background: var(--icon); }

/* ---------- Your whole move: the ladder sits in one white card (line re-measured for the card padding) ---------- */
#move .ladder { --lp: 24px; padding: var(--lp); background: var(--bg); border-radius: var(--r-lg); }
@media (min-width: 768px) { #move .ladder { --lp: 32px; } }
#move .station { background: var(--bg); }
/* #move .station outranks site.css's last-station rule: re-assert the gold "you are here" stop */
#move .ladder li:last-child .station { background: var(--accent); border-color: var(--icon); }
#move .ladder b { font: 600 clamp(1.0625rem, -.2rem + 1.6vw, 1.1875rem)/1.2 var(--f-sans); letter-spacing: -.02em; color: var(--heading); overflow-wrap: break-word; }
#move .ladder-t span { font-size: 14px; line-height: 1.45; letter-spacing: -.01em; color: var(--muted); }
/* Phones and tablets: vertical line (six columns are too narrow below 1024px) */
@media (max-width: 1023px) {
  #move .ladder { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  #move .ladder::before { top: calc(var(--lp) + 14px); bottom: calc(var(--lp) + 14px); left: calc(var(--lp) + 6px); right: auto; width: 2px; height: auto; }
  #move .ladder li { grid-template-columns: 14px 28px minmax(0, 1fr); grid-template-rows: auto; column-gap: 16px; align-items: start; }
  #move .ladder li .station { grid-column: 1; grid-row: 1; margin-top: 7px; }
  #move .ladder li .ic { grid-column: 2; grid-row: 1; }
  #move .ladder li .ladder-t { grid-column: 3; grid-row: 1; }
}
@media (min-width: 1024px) {
  #move .ladder::before { top: calc(var(--lp) + 47px); left: calc(var(--lp) + 7px); right: calc(var(--lp) + (100% - 2 * var(--lp) - 5 * var(--g)) / 6 - 7px); }
}
/* Tour note: a slim white card attached under the ladder */
#move .tour { margin-top: 12px; padding: 20px 24px; border-top: 0; border-radius: var(--r-md); background: var(--bg); }
#move .tour b { font: 600 18px/1.35 var(--f-sans); letter-spacing: -.018em; color: var(--heading); }
#move .tour span { font-size: 15px; color: var(--muted); }

/* What you're juggling: heading left, numbered list in a white card */
#move .juggle { margin-top: clamp(56px, 7vw, 96px); gap: 24px 56px; }
#move .juggle-head h3, #move .arrive h3 { font-size: clamp(1.625rem, 1.15rem + 1.6vw, 2.25rem); line-height: 1.12; letter-spacing: -.026em; }
#move .juggle-head .num { font-weight: 600; letter-spacing: -.02em; color: var(--action); }
#move .juggle-list { padding: 4px 24px; border-top: 0; border-radius: var(--r-lg); background: var(--bg); }
#move .juggle-list li { padding: 18px 0; }
#move .juggle-list li:last-child { border-bottom: 0; }
#move .jl-n { font: 600 13px/24px var(--f-sans); letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--muted); }
#move .juggle-list b { font: 600 17px/1.3 var(--f-sans); letter-spacing: -.018em; color: var(--heading); }
#move .juggle-list li span:not(.jl-n) { font-size: 15px; line-height: 1.45; }

/* After you arrive: white card, grey pill chips; checked = teal ring + tint + filled tick */
#move .arrive { margin-top: clamp(56px, 7vw, 96px); gap: 14px; padding: clamp(24px, 4vw, 40px); border-radius: var(--r-lg); background: var(--bg); }
#move .arrive-chips { gap: 10px; margin-top: 8px; }
#move .arrive-chips li, #move .arrive-chips label { max-width: 100%; }
#move .arrive-chips label { border-color: transparent; background: var(--surface); font: 500 15px/1.3 var(--f-sans); letter-spacing: -.01em; }
#move .arrive-chips label:hover { border-color: var(--icon); }
#move .arrive-chips input:checked + label { border-color: var(--action); background: var(--tint); box-shadow: inset 0 0 0 1px var(--action); }
#move .arrive-count { font: 600 13px/1 var(--f-sans); letter-spacing: -.005em; color: var(--muted); }
#move .arrive > p:last-child { font-size: 16px; }

/* Who sees what: white card, segmented control of rounded grey buttons */
#move .lens { margin-top: clamp(56px, 7vw, 96px); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg); }
#move .lens-btns { gap: 8px; padding: 12px; border-bottom: 0; }
#move .lens-btn { gap: 4px; padding: 14px 16px; border: 0; border-radius: var(--r-sm); background: var(--surface); color: var(--ink); }
#move .lens-btn small { font: 500 13px/1.3 var(--f-sans); letter-spacing: -.005em; text-transform: none; color: var(--muted); }
#move .lens-btn b { font: 600 17px/1.25 var(--f-sans); letter-spacing: -.018em; color: var(--heading); }
/* Hover: the tint alone is close to the grey in light mode, so unpressed buttons also get a hairline teal ring */
#move .lens-btn:hover { background: var(--tint); }
#move .lens-btn:not([aria-pressed="true"]):hover { box-shadow: inset 0 0 0 1px var(--icon); }
#move .lens-btn[aria-pressed="true"] { background: var(--action); color: var(--bg); }
#move .lens-btn[aria-pressed="true"] small { color: var(--on-action-muted); }
#move .lens-btn[aria-pressed="true"] b { color: var(--bg); }
/* Focus ring sits outside the button on the white card, so --focus reads for pressed and unpressed alike */
#move .lens-btn:focus-visible, #move .lens-btn[aria-pressed="true"]:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
#move .lens-fig { padding: 8px 20px 20px; }
#move .lens-cap { font: 500 14px/1.5 var(--f-sans); letter-spacing: -.01em; color: var(--muted); }
@media (max-width: 760px) { #move .lens-fig { padding: 4px 12px 16px; } }

/* Forced colors: re-assert the selected states the #move rules above would otherwise mask */
@media (forced-colors: active) {
  #move .lens-btn { border: 1px solid ButtonText; }
  #move .lens-btn[aria-pressed="true"] { background: Highlight; color: HighlightText; border-color: Highlight; }
  #move .lens-btn[aria-pressed="true"] :is(small, b) { color: HighlightText; }
  #move .lens-btn[aria-pressed="true"]:focus-visible { outline-color: CanvasText; }
  #move .arrive-chips label { border-color: ButtonText; }
  #move .arrive-chips input:checked + label { border-color: Highlight; }
}


/* ======================== path-launch-plans ======================== */
/* ---------- Five steps (band): centred title, one rounded panel holding the timeline ---------- */
#path .head { margin-inline: auto; text-align: center; justify-items: center; }
#path .head .lede { margin-inline: auto; }
#path .path {
  max-width: 1040px; margin-inline: auto; padding: 4px 18px;
  border-radius: var(--r-lg); background: rgba(245, 245, 247, .05);
  background: color-mix(in srgb, var(--on-band) 6%, var(--band));
}
/* Connector runs through the dot centres: panel padding + half the dot - half the line */
#path .path::before { left: calc(18px + 19px); top: 40px; bottom: 40px; width: 1.5px; background: var(--sage); opacity: .7; }
#path .stop { grid-template-columns: 40px minmax(0, 1fr); gap: 14px 16px; padding: 24px 0; }
#path .stop.credited + .stop { border-top: 1px dashed var(--sage); }
#path .dot {
  width: 40px; height: 40px; border-width: 1.5px; font: 600 17px/1 var(--f-sans); letter-spacing: -.02em;
  background: var(--band); background: color-mix(in srgb, var(--on-band) 6%, var(--band));
}
#path .stop:first-child .dot { background: var(--accent); border-color: var(--accent); color: #0E2627; }
#path .stop h3 { font: 600 clamp(1.25rem, 1.05rem + .7vw, 1.5rem)/1.2 var(--f-sans); letter-spacing: -.022em; }
#path .stop-body > p { margin-top: 6px; font-size: 16px; line-height: 1.5; }
#path .cost { grid-column: 2; justify-items: start; text-align: left; gap: 4px; }
#path .cost .price { font-size: 24px; font-weight: 600; letter-spacing: -.025em; }
#path .cost small { font: 500 13px/1.35 var(--f-sans); letter-spacing: -.005em; text-transform: none; color: var(--lob); }
#path .credit { color: var(--sage); }
/* Day strip and inclusions: soft rounded tiles instead of ruled boxes */
#path .days { border-radius: var(--r-sm); background: rgba(245, 245, 247, .04); }
#path .days b { font: 600 12px/1 var(--f-sans); letter-spacing: .02em; text-transform: none; }
#path .days span { font-size: 14px; }
#path .incl span { min-height: 32px; padding: 4px 12px; border-color: var(--band-line); background: rgba(245, 245, 247, .06); font-size: 13px; letter-spacing: -.01em; }
#path .path-note { max-width: 72ch; margin: 28px auto 0; padding-top: 0; border-top: 0; text-align: center; font-size: 14px; line-height: 1.5; }
/* theme.css paints .text-link in --action, which vanishes on the band: keep it light */
#path .steps-ask { display: flex; width: fit-content; max-width: 100%; margin: 16px auto 0; color: var(--on-band); }
#path .steps-ask:hover { color: var(--accent); }
/* Very narrow phones: keep the widest nowrap price inside the panel */
@media (max-width: 359px) {
  #path .path { padding-inline: 14px; }
  #path .path::before { left: calc(14px + 19px); }
  #path .cost .price { font-size: 21px; }
}
@media (min-width: 761px) {
  #path .path { padding: 8px 32px; }
  #path .path::before { left: calc(32px + 23px); }
  #path .stop { grid-template-columns: 48px minmax(0, 1fr) minmax(180px, auto); gap: 28px; padding: 30px 0; }
  #path .dot { width: 48px; height: 48px; font-size: 19px; }
  #path .cost { grid-column: auto; justify-items: end; text-align: right; }
  #path .cost .price { font-size: 30px; }
  #path .incl span { padding: 4px 14px; font-size: 14px; }
}

/* ---------- Launch checklist: grey tile, white cards, the opening card in brand teal ---------- */
#launch { background: var(--surface); }
@media (min-width: 1024px) { #launch .launch-grid .head { top: calc(var(--head-h) + 40px); } }
#launch .checklist { gap: 12px; border-top: 0; }
#launch .checklist li {
  grid-template-columns: 24px minmax(0, 1fr); gap: 4px 14px; padding: 20px 22px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg);
}
#launch .checklist b { font: 600 17px/1.3 var(--f-sans); letter-spacing: -.018em; }
#launch .checklist span { font-size: 15px; line-height: 1.45; }
/* Opening card: dark band tile; the inset hairline keeps its edge readable on the dark-mode grey */
#launch .checklist li.lit { background: var(--band); box-shadow: inset 0 0 0 1px var(--band-line); }
#launch .checklist li.lit b { color: var(--on-band); }
#launch .checklist li.lit span { color: var(--obm); }
@media (min-width: 521px) {
  /* Wider screens: icon sits above the title, Apple card style */
  #launch .checklist li { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 26px 24px; }
  #launch .checklist .ic { grid-row: auto; width: 28px; height: 28px; margin-bottom: 6px; }
}

/* ---------- Plans: centred title, rounded grey comparison card, pill segmented switch ---------- */
#plans.seam > .wrap { border-top: 0; }
#plans .head { margin-inline: auto; text-align: center; justify-items: center; }
#plans .head .lede { margin-inline: auto; }
#plans .table-wrap { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
#plans .plans-table th, #plans .plans-table td { padding: 18px 24px; }
#plans .plans-table thead th { padding-top: 26px; padding-bottom: 20px; }
#plans .plan-name { font: 600 21px/1.2 var(--f-sans); letter-spacing: -.022em; }
#plans .plans-table thead .price { margin-top: 4px; font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
#plans .plans-table tbody th { font: 500 15px/1.4 var(--f-sans); letter-spacing: -.01em; color: var(--ink); }
#plans .plans-table td { font-size: 15px; letter-spacing: -.01em; }
@media (min-width: 641px) {
  /* Column focus: the hovered/focused plan lifts to the page ground, its name in brand teal */
  #plans .plans-table[data-col="2"] :is(th, td):nth-child(2),
  #plans .plans-table[data-col="3"] :is(th, td):nth-child(3),
  #plans .plans-table[data-col="4"] :is(th, td):nth-child(4) { background: var(--bg); }
  #plans .plans-table[data-col="2"] thead th:nth-child(2) .plan-name,
  #plans .plans-table[data-col="3"] thead th:nth-child(3) .plan-name,
  #plans .plans-table[data-col="4"] thead th:nth-child(4) .plan-name { color: var(--action); }
}
@media (max-width: 640px) {
  #plans .plan-switch { gap: 4px; padding: 4px; margin-bottom: 16px; border: 0; border-radius: 999px; overflow: visible; background: var(--surface); }
  #plans .plan-switch button, #plans .plan-switch button:first-child { min-height: 54px; border: 0; border-radius: 999px; }
  #plans .plan-switch .ps-name { font: 600 15px/1.1 var(--f-sans); letter-spacing: -.018em; }
  #plans .plan-switch .ps-price { font: 500 12px/1.1 var(--f-sans); letter-spacing: -.005em; color: var(--muted); }
  #plans .plan-switch button[aria-checked="true"] { background: var(--action); }
  #plans .plan-switch button[aria-checked="true"] span { color: var(--bg); }
  #plans .table-wrap { border-radius: var(--r-md); }
  #plans .table-wrap[data-plan] .plans-table :is(th, td) { padding: 14px 16px; }
}
@media (prefers-reduced-motion: no-preference) {
  #plans .plan-switch button { transition: background-color .2s var(--ease), color .2s var(--ease); }
}
/* Forced colors: the id-level fills above outrank the Highlight rule in site.css, so restate it */
@media (forced-colors: active) {
  #plans .plan-switch { border: 1px solid CanvasText; }
  #plans .plan-switch button[aria-checked="true"] { background: Highlight; }
  #plans .plan-switch button[aria-checked="true"] span { color: HighlightText; }
}

/* Add-ons: rounded grey cards with teal icons and tight prices */
#plans .addons { gap: 16px; margin-top: clamp(32px, 4vw, 48px); }
#plans .addons > div { gap: 8px; padding: 26px 24px; border-top: 0; border-radius: var(--r-md); background: var(--surface); }
#plans .addons .ic { width: 28px; height: 28px; margin-bottom: 4px; }
#plans .addons h3 { font: 600 19px/1.25 var(--f-sans); letter-spacing: -.02em; }
#plans .addons .price { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
#plans .addons p { font-size: 15px; line-height: 1.5; }


/* ======================== work-fit-avenue ======================== */
/* ---------- Our work, Fit stories, The avenue: shared ---------- */
/* Showcase heads: centred title, lede under it */
#work .head, #fit .head, #businesses .head { margin-inline: auto; text-align: center; justify-items: center; margin-bottom: clamp(36px, 5vw, 64px); }
/* Small eyebrow line on work and story cards: sans, teal pin */
#work .kind, #fit .kind { gap: 6px; font: 600 12px/1.3 var(--f-sans); letter-spacing: .04em; color: var(--muted); }
#work .kind .ic, #fit .kind .ic { width: 16px; height: 16px; color: var(--icon); }

/* ---------- Our work: white cards on the grey tile ---------- */
#work .work { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; }
#work .work-feature, #work .work-side { background: var(--bg); border: 1px solid transparent; border-radius: var(--r-lg); }
/* Feature: illustration full-bleed on top, copy padded under it */
#work .work-feature { gap: 10px; padding: 0 0 32px; overflow: hidden; }
#work .work-feature > :not(.work-fig) { margin-inline: 24px; }
#work .work-fig { margin: 0 0 14px; }
#work .mk-legend { padding-inline: 24px; margin-top: 16px; gap: 8px 18px; }
#work .mk-legend li { font-size: 14px; }
#work .mk-l { font: 500 12px/1.2 var(--f-sans); letter-spacing: -.005em; border-color: transparent; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .45); padding: 5px 10px; }
#work .mk-n { font: 600 12px/1 var(--f-sans); }
#work .work-feature h3 { font: 700 clamp(1.625rem, 1.2rem + 1.4vw, 2.25rem)/1.1 var(--f-sans); letter-spacing: -.028em; }
#work .work-feature > p:not(.kind) { color: var(--muted); font-size: 17px; line-height: 1.5; }
/* Side cases: compact cards (the shared rule above already replaces the old hairlines) */
#work .work-side { gap: 10px; padding: 26px 24px; }
#work .work-side h3 { font: 600 21px/1.2 var(--f-sans); letter-spacing: -.02em; }
#work .work-side p:not(.kind) { font-size: 16px; line-height: 1.5; }
@media (min-width: 640px) {
  #work .work-feature > :not(.work-fig), #work .mk-legend { margin-inline: 32px; padding-inline: 0; }
  #work .work-side { padding: 30px 32px; }
}
@media (max-width: 900px) {
  #work .work { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  #work .work-feature { grid-row: auto; padding-bottom: 28px; }
}

/* ---------- Fit stories: grey cards, the lesson as a dark tile ---------- */
#fit .fit-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr); gap: 20px; }
#fit .story-card { gap: 12px; padding: 28px 24px; margin: 0; border: 1px solid transparent; border-radius: var(--r-lg); background: var(--surface); }
#fit .story-card h3 { font: 600 clamp(1.25rem, 1.05rem + .6vw, 1.5rem)/1.2 var(--f-sans); letter-spacing: -.02em; }
#fit .story-card p:not(.kind) { font-size: 16px; line-height: 1.5; }
#fit .story-card.lesson { background: var(--band); padding: 32px 28px; box-shadow: var(--shadow); }
#fit .story-card.lesson .kind { color: var(--accent); }
#fit .story-card.lesson ul { gap: 12px; }
#fit .story-card.lesson li { font-size: 16px; line-height: 1.45; letter-spacing: -.01em; }
#fit .story-card.lesson .btn { margin-top: 12px; }
@media (min-width: 961px) { #fit .story-card { padding: 32px; } #fit .story-card.lesson { padding: 36px 32px; } }
/* Tablet: two stories side by side, the lesson full width under them */
@media (min-width: 640px) and (max-width: 960px) {
  #fit .fit-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #fit .story-card.lesson { grid-column: 1 / -1; }
}
@media (max-width: 639px) { #fit .fit-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; } }

/* ---------- The avenue: centred tools ---------- */
#businesses .biz-tools { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 20px; }
/* Category stones become pills; selected = brand teal */
#businesses .filters { justify-content: center; gap: 8px; }
#businesses .fchip {
  gap: 7px; padding: 0 16px; border: 1px solid transparent; border-radius: 999px; background: var(--surface); color: var(--ink);
  font: 500 14px/1.2 var(--f-sans); letter-spacing: -.01em; text-transform: none;
}
#businesses .fchip span { font: 600 13px/1 var(--f-sans); letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--muted); }
#businesses .fchip:hover { background: var(--tint); border-color: transparent; }
#businesses .fchip[aria-pressed="true"] { background: var(--action); color: var(--bg); border-color: var(--action); }
#businesses .fchip[aria-pressed="true"] span { color: var(--bg); opacity: .75; }
/* Search: grey filled pill */
#businesses .biz-search { width: min(100%, 440px); }
#businesses .biz-search .ic { left: 16px; }
#businesses .biz-search input { min-height: 48px; padding: 0 18px 0 46px; border: 1px solid transparent; border-radius: 999px; background: var(--surface); font: 400 17px/1.2 var(--f-sans); letter-spacing: -.016em; }
#businesses .biz-search input:focus-visible { border-color: var(--icon); }
/* Status line and quiz pill */
#businesses .biz-bar { margin: 32px 0 24px; }
#businesses .biz-status { font: 500 14px/1.3 var(--f-sans); letter-spacing: -.005em; }
#businesses .quiz-btn { gap: 10px; padding: 0 20px 0 16px; border: 1px solid transparent; background: var(--tint); color: var(--action); font: 500 15px/1.25 var(--f-sans); letter-spacing: -.012em; }
#businesses .quiz-btn:hover { background: var(--tint); border-color: var(--action); }
@media (max-width: 520px) { #businesses .quiz-btn { border-radius: 24px; padding-block: 10px; } }
#businesses .biz-empty { padding: 32px; border: 1px solid transparent; border-radius: var(--r-lg); background: var(--surface); }
#businesses .biz-empty p { font: 600 21px/1.25 var(--f-sans); letter-spacing: -.02em; }

/* ---------- The avenue: product cards ---------- */
/* 300px minimum: 1 column at 375, 2 at 768, 3 from ~1000px, so the CTA pill and bookmark keep to one row */
#businesses .biz-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; padding-left: 0; }
@media (min-width: 768px) { #businesses .biz-grid { gap: 24px; } }
#businesses .biz { margin: 0; border: 1px solid transparent; border-radius: var(--r-lg); background: var(--surface); }
/* Photo on top with the card's rounded corners */
#businesses .biz-media { border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0; }
#businesses .biz-body { gap: 8px; padding: 22px 24px 24px; }
#businesses .biz-exp { font: 600 13px/1.3 var(--f-sans); letter-spacing: -.005em; text-transform: none; color: var(--action); }
#businesses .biz-exp .ic { color: var(--icon); }
#businesses .biz-exp.quiet, #businesses .biz-exp.quiet .ic { color: var(--muted); }
#businesses .biz h3 { font: 600 22px/1.18 var(--f-sans); letter-spacing: -.022em; margin-top: 2px; }
#businesses .biz-desc, #businesses .biz-fit { font-size: 15px; line-height: 1.5; letter-spacing: -.008em; }
/* Price chip: white inset on the grey card, gold dot kept */
#businesses .biz-price { margin-top: auto; padding: 12px 14px 12px 32px; border: 1px solid transparent; border-radius: var(--r-sm); background: var(--bg); }
#businesses .biz-price::before { left: 13px; }
#businesses .biz-price small { font: 500 12px/1.3 var(--f-sans); letter-spacing: 0; text-transform: none; color: var(--muted); }
#businesses .biz-price .price { font: 600 17px/1.3 var(--f-sans); letter-spacing: -.02em; }
#businesses .biz-price .ask { font: 500 15px/1.4 var(--f-sans); letter-spacing: -.01em; }
/* CTA row: teal pill + round bookmark; on a very narrow card (320px phones) the pill text wraps inside its 44px height instead of overflowing */
#businesses .biz-actions { margin-top: 6px; gap: 10px; }
#businesses .biz-link {
  flex: 0 1 auto; justify-content: center; text-align: center; padding: 0 16px; border: 1px solid transparent; border-radius: 999px;
  background: var(--action); color: var(--bg); font: 500 15px/1.2 var(--f-sans); letter-spacing: -.012em;
}
#businesses .biz-link:hover { background: var(--action-hover); text-decoration: none; }
#businesses .biz-save { border: 1px solid var(--line); background: var(--bg); color: var(--action); }
#businesses .biz-save:hover { border-color: var(--icon); }
#businesses .biz-save[aria-pressed="true"] { background: var(--action); border-color: var(--action); color: var(--bg); }
#businesses .biz-note { margin-top: 36px; font-size: 13px; line-height: 1.6; }
/* Soft lift on hover (pointer devices only) */
@media (hover: hover) { #businesses .biz:hover { box-shadow: var(--shadow); } }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #businesses .biz { transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
  #businesses .biz:hover { transform: translateY(-3px); }
}
/* Forced colors: the ID-scoped chip rules above outrank site.css's Highlight rule, so restate it here */
@media (forced-colors: active) {
  #businesses .fchip[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; outline-color: CanvasText; }
  #businesses .fchip[aria-pressed="true"] span { color: HighlightText; opacity: 1; }
}

/* ---------- Shortlist tray: floating frosted capsule (always dark, in both themes) ---------- */
#businesses .tray {
  padding: 8px 8px 8px 20px; border-radius: var(--r-md); background: rgba(14, 38, 39, .88); color: #F5F5F7;
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(245, 245, 247, .1); box-shadow: 0 24px 48px -18px rgba(0, 0, 0, .5);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { #businesses .tray { background: #0E2627; } }
@media (min-width: 601px) { #businesses .tray { border-radius: 999px; } }
#businesses .tray-label { font: 600 16px/1.2 var(--f-sans); letter-spacing: -.016em; }
#businesses .tray-label .num { font-weight: 600; letter-spacing: -.01em; }
#businesses .tray-clear { font: 500 14px/1 var(--f-sans); color: var(--obm); }
#businesses .tray-clear:hover { color: #FFFFFF; }


/* ======================== about-to-footer ======================== */
/* ---------- About: story on the grey tile, lobby directory as a dark hero card ---------- */
#about .story h2 { margin: 12px 0 28px; }
#about .story > p:not(.label):not(.pull):not(.compared) { font-size: 17px; line-height: 1.6; }
#about .story .compared { font-size: 15px; line-height: 1.5; }
.route { gap: 8px 4px; margin: 0 0 32px; font: 500 14px/1 var(--f-sans); letter-spacing: -.01em; }
.route .stopname { min-height: 36px; padding: 0 14px; background: var(--bg); border: 1px solid var(--line); color: var(--ink); }
.route .stopname.now { background: var(--band); border-color: var(--icon); color: var(--on-band); }
.route .stopname.spur { background: transparent; color: var(--muted); }
.route .arrow { color: var(--muted); opacity: .7; }
#about .pull {
  margin-top: 32px !important; padding: 2px 0 2px 20px; border-left: 3px solid var(--accent);
  font: 600 clamp(1.25rem, 1.05rem + .9vw, 1.625rem)/1.3 var(--f-sans); letter-spacing: -.02em; color: var(--heading); max-width: 34ch;
}
#about .partners { margin-top: 32px; gap: 8px; }
#about .partners li { min-height: 38px; padding: 0 16px 0 12px; background: var(--bg); border-color: transparent; font: 500 14px/1.2 var(--f-sans); letter-spacing: -.01em; }
#about .lobby {
  border-radius: var(--r-lg); border: 1px solid var(--band-line); box-shadow: var(--shadow);
  padding: clamp(24px, 4vw, 36px) clamp(20px, 4vw, 36px) clamp(18px, 3vw, 28px);
}
/* Sticky only when the whole card (about 740px tall) fits under the header, so its last rows are never held off-screen */
@media (min-width: 861px) and (min-height: 900px) { #about .lobby { position: sticky; top: calc(var(--head-h) + 24px); } }
#about .lobby-head { padding-bottom: 20px; }
#about .lobby-addr { font: 500 12px/1.3 var(--f-sans); letter-spacing: .06em; }
#about .lobby-num { font: 600 clamp(3.5rem, 3rem + 2vw, 4.5rem)/1 var(--f-sans); letter-spacing: -.045em; font-variant-numeric: tabular-nums lining-nums; }
#about .lobby-s { font: 600 12px/1.3 var(--f-sans); letter-spacing: .08em; }
#about .team li { padding: 14px 0; border-bottom: 1px solid var(--band-line); }
#about .team li:last-child { border-bottom: 0; }
#about .team li > img { box-shadow: 0 0 0 1px var(--band-line); }
#about .team b { font: 600 17px/1.3 var(--f-sans); letter-spacing: -.015em; }
#about .team span { font-size: 14px; line-height: 1.45; }
#about .lobby-link {
  margin-top: 16px; min-height: 40px; padding: 0 18px; border-radius: 999px; background: rgba(245, 245, 247, .12);
  font: 500 15px/1.2 var(--f-sans); letter-spacing: -.01em; text-decoration: none;
}
#about .lobby-link:hover { background: rgba(245, 245, 247, .2); }

/* ---------- FAQ: Apple-support accordion, hairline rows, round plus that fills when open ---------- */
#faq .faq-grid { gap: 32px clamp(32px, 6vw, 96px); }
#faq .faq-head .head { margin-bottom: 24px; }
@media (min-width: 900px) { #faq .faq-head { top: calc(var(--head-h) + 40px); } }
#faq .faq { border-top: 1px solid var(--line); }
#faq .faq details { border-bottom: 1px solid var(--line); }
#faq .faq summary {
  min-height: 64px; padding: 20px 0; gap: 20px; border-radius: 8px;
  font: 600 clamp(1.0625rem, .98rem + .4vw, 1.3125rem)/1.3 var(--f-sans); letter-spacing: -.018em; color: var(--heading);
}
#faq .faq summary:hover { color: var(--action); }
#faq .pm { width: 32px; height: 32px; padding: 8px; border-radius: 50%; background: var(--surface); stroke: var(--icon); stroke-width: 1.75; }
#faq .faq details[open] .pm { background: var(--action); stroke: var(--bg); }
#faq .faq details p { padding: 0 clamp(0px, 5vw, 52px) 24px 0; font-size: 17px; line-height: 1.6; color: var(--muted); }
/* Forced colours drop the filled disc: keep the plus/minus drawn in the system text colour */
@media (forced-colors: active) { #faq .pm, #faq .faq details[open] .pm { stroke: CanvasText; } }

/* ---------- Fear: centred showcase head, two big rounded tiles, the bus line as a statement ---------- */
#fear .head { max-width: 820px; margin-inline: auto; text-align: center; justify-items: center; }
#fear .head .lede { margin-inline: auto; }
#fear h2 { font-weight: 700; }
#fear .fear-grid { gap: clamp(16px, 2vw, 24px); }
#fear .fear-grid > div { gap: 20px; padding: clamp(24px, 4vw, 40px); border-radius: var(--r-lg); }
#fear .fear-grid .fears { background: var(--surface); border: 0; }
#fear .fear-grid .stay { background: var(--tint); }
#fear .fear-grid h3 { font: 600 clamp(1.25rem, 1.1rem + .6vw, 1.5rem)/1.25 var(--f-sans); letter-spacing: -.02em; }
#fear .fear-grid ul { gap: 14px; }
#fear .fear-grid li { padding-left: 32px; font-size: 17px; line-height: 1.45; }
#fear .bus { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 20px; max-width: 860px; margin: clamp(56px, 7vw, 96px) auto 0; }
#fear .bus > .ic { margin-top: 0; }
#fear .bus-body { justify-items: center; gap: 20px; }
#fear .bus-line { font: 600 clamp(1.625rem, 1.1rem + 2.4vw, 2.75rem)/1.12 var(--f-sans); letter-spacing: -.03em; }
#fear .bus-line .kw { color: var(--action); } /* gold on white fails AA; brand teal keeps the emphasis readable */
#fear .bus-body .lede { max-width: 54ch; }

/* ---------- Booking: centred head, the widget in a white rounded card with a hairline ---------- */
#book .head { max-width: 760px; margin-inline: auto; text-align: center; justify-items: center; }
#book .head .lede { margin-inline: auto; }
#book .book-frame {
  max-width: 1040px; margin-inline: auto; padding: 8px; background: #FFFFFF; /* the third-party widget is always light */
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow);
}
@media (max-width: 640px) { #book .book-frame { border-radius: var(--r-md); } }

/* ---------- Contact (band): bold headline, details in a frosted rounded card, pill copy buttons ---------- */
#contact .contact-copy { gap: 20px; }
#contact .contact-copy h2 { font-weight: 700; letter-spacing: -.03em; max-width: 18ch; }
#contact .contact-copy .btn { margin-top: 12px; }
#contact .contact-card {
  min-width: 0; padding: clamp(24px, 4vw, 36px); border-radius: var(--r-lg);
  background: rgba(245, 245, 247, .06); border: 1px solid var(--band-line);
}
#contact .contact-logo { margin-bottom: 16px; }
#contact .lines { border-top: 0; }
#contact .lines li { gap: 16px; padding: 18px 0; }
#contact .lines li:last-child { border-bottom: 0; padding-bottom: 4px; }
#contact .lines .val { font: 500 17px/1.4 var(--f-sans); letter-spacing: -.012em; font-variant-numeric: tabular-nums lining-nums; } /* the font shorthand resets numeric variants */
#contact .maps { gap: 6px; font: 500 15px/1.2 var(--f-sans); letter-spacing: -.01em; text-decoration: none; }
#contact .maps:hover { text-decoration: underline; }
#contact .copy {
  min-height: 38px; padding: 0 16px; border: 1px solid transparent; background: rgba(245, 245, 247, .12);
  font: 500 14px/1 var(--f-sans); letter-spacing: -.01em;
}
#contact .copy:hover { background: rgba(245, 245, 247, .2); }
#contact .minimap { margin-top: 20px; border-radius: var(--r-md); }
#contact .minimap .mm-street { padding: 4px 10px; border-radius: 999px; font: 500 12px/1 var(--f-sans); letter-spacing: .06em; }

/* ---------- Footer: light-grey tile, small muted type, hairline base ---------- */
.site-foot { background: var(--surface); padding-bottom: 32px; }
.site-foot .foot-sky { color: var(--line); }
.site-foot .foot-top { padding-top: 32px; }
#contact .lines .val a { color: inherit; text-decoration: none; }
#contact .lines .val a:hover { text-decoration: underline; text-underline-offset: 3px; }
.site-foot .foot-grid { gap: 28px; margin-top: 24px; }
.site-foot .disclaimer { font-size: 12px; line-height: 1.6; }
.site-foot .group { gap: 2px; font-size: 13px; }
.site-foot .group .label { margin-bottom: 6px; font: 600 12px/1.3 var(--f-sans); letter-spacing: 0; text-transform: none; color: var(--ink); }
.site-foot .group a, .site-foot .foot-links a { color: var(--muted); text-decoration: none; }
.site-foot .group a:hover, .site-foot .foot-links a:hover { color: var(--ink); text-decoration: underline; }
.site-foot .foot-links { margin-top: 20px; gap: 0 20px; font-size: 12px; }
.site-foot .foot-base { margin-top: 8px; padding-top: 16px; }
.site-foot .small { font-size: 12px; }
.site-foot .back-bay { font: 500 13px/1 var(--f-sans); letter-spacing: -.01em; color: var(--action); text-decoration: none; }
.site-foot .back-bay:hover { text-decoration: underline; }

/* ---------- Legal pages: big tight title, quiet date, hairline-separated sections ---------- */
.legal { padding-block: clamp(56px, 8vw, 104px); }
.legal h1 { font: 700 clamp(2.5rem, 1.6rem + 3.6vw, 3.75rem)/1.05 var(--f-sans); letter-spacing: -.035em; margin-bottom: 12px; }
.legal p { font-size: 17px; line-height: 1.6; }
.legal h1 + p { font: 400 15px/1.4 var(--f-sans); letter-spacing: -.01em; text-transform: none; color: var(--muted); }
.legal h2 { font: 600 clamp(1.25rem, 1.1rem + .6vw, 1.5rem)/1.25 var(--f-sans); letter-spacing: -.02em; margin: 40px 0 12px; padding-top: 28px; }
.legal > p:last-child { margin-top: 40px; font-size: 15px; }
.legal-back { font: 400 14px/1.2 var(--f-sans); letter-spacing: -.01em; color: var(--muted); text-decoration: none; }
.legal-back:hover { color: var(--action); text-decoration: underline; }
/* phones: the short brand leaves room for the back link */
@media (max-width: 420px) { .legal-head .brand-name > span { display: none; } .legal-head .head-row { gap: 12px; } }

/* ---------- Motion (only when allowed) ---------- */
@media (prefers-reduced-motion: no-preference) {
  #faq .faq summary { transition: color .2s var(--ease); }
  #faq .pm { transition: background-color .2s var(--ease), stroke .2s var(--ease); }
  #contact .copy, #about .lobby-link { transition: background-color .2s var(--ease); }
}


/* ======================== sol-chat ======================== */
/* ---------- Sol chat: Apple Messages-style guide (overrides chat.css; behaviour classes untouched) ---------- */
/* Tokens: point Sol's palette at the page tokens. The two dark selectors match chat.css's own dark rules at equal
   specificity, so these win in every mode; values are tokens, so light/dark still flip through :root. */
.sc-root, :root:not([data-theme="light"]) .sc-root, :root[data-theme="dark"] .sc-root {
  --sc-bg: var(--bg); --sc-surface: var(--surface); --sc-ink: var(--ink); --sc-muted: var(--muted); --sc-line: var(--line);
  --sc-band: var(--band); --sc-on-band: var(--on-band); --sc-band-soft: var(--obm); --sc-head: var(--heading);
  --sc-action: var(--action); --sc-on-action: #FFFFFF; --sc-accent: var(--accent); --sc-tint: var(--tint); --sc-focus: var(--focus);
  --sc-launch: var(--action); --sc-launch-ink: #FFFFFF; --sc-launch-hover: var(--action-hover);
  --sc-k: var(--f-sans); --sc-p: var(--f-sans); --sc-a: var(--f-sans);
  --sc-hover: color-mix(in srgb, var(--ink) 6%, transparent);
  font: 400 15px/1.47 var(--f-sans); letter-spacing: -.01em;
}
/* Dark: brand action turns light sage, so text sitting on it turns dark */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sc-root { --sc-on-action: #0B1C1D; --sc-launch-ink: #0B1C1D; }
}
:root[data-theme="dark"] .sc-root { --sc-on-action: #0B1C1D; --sc-launch-ink: #0B1C1D; }

/* Launcher: brand pill with a soft lift; a faint inner ring keeps its edge on the dark band */
.sc-launch {
  font: 500 16px/1 var(--f-sans); letter-spacing: -.016em;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 10px 28px -8px rgba(0, 0, 0, .35);
}
.sc-launch:focus-visible { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 0 0 3px var(--bg); }
@media (prefers-reduced-motion: no-preference) {
  .sc-launch { transition: background-color .2s var(--sc-e), transform .2s var(--sc-e); }
  .sc-launch:active { transform: scale(.96); }
}

/* Teaser: floating message bubble */
.sc-teaser { border: 1px solid var(--line); border-radius: 18px 18px 6px 18px; background: var(--bg); box-shadow: var(--shadow); }
.sc-tgo { border-radius: 17px 0 0 17px; font: 500 15px/1.4 var(--f-sans); letter-spacing: -.012em; }

/* Panel: 20px rounded card with soft depth (desktop/tablet); the phone sheet stays full-bleed below */
.sc-panel {
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .06), 0 28px 72px -20px rgba(0, 0, 0, .32);
}
@media (prefers-reduced-motion: no-preference) and (min-width: 601px) {
  .sc-panel { transform-origin: 100% 100%; transform: translateY(12px) scale(.98); }
  .sc-panel.sc-in { transform: none; }
}

/* Header: light bar, hairline divider, brand-teal icon buttons */
.sc-head { min-height: 64px; background: var(--bg); color: var(--ink); border-bottom: 1px solid var(--line); }
.sc-head :focus-visible { outline-color: var(--sc-focus); }
.sc-disc { width: 36px; height: 36px; background: var(--band); color: var(--accent); box-shadow: none; }
.sc-name { font: 600 17px/1.1 var(--f-sans); letter-spacing: -.022em; color: var(--heading); }
.sc-sub { font: 400 12px/1.3 var(--f-sans); letter-spacing: 0; color: var(--muted); }
.sc-head .sc-ib { color: var(--icon); }
.sc-head .sc-ib:hover { background: var(--surface); }
/* EN/ES: segmented control; the pressed side is a solid ink pill so aria-pressed reads at a glance */
.sc-lang { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.sc-lang button { font: 600 12px/1 var(--f-sans); letter-spacing: .04em; color: var(--muted); }
.sc-lang button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.sc-lang :focus-visible { outline-offset: 2px; }

/* Log and bubbles: grey Sol bubbles, brand-teal user bubbles, 18px radius with a small tail corner */
.sc-log { gap: 8px; padding: 16px 16px 20px; background: var(--bg); }
.sc-from { margin-top: 10px; font: 600 11px/1 var(--f-sans); letter-spacing: .04em; color: var(--muted); }
.sc-from span { background: var(--band); color: var(--accent); }
.sc-msg { padding: 11px 15px; border: 0; border-radius: 18px 18px 18px 6px; background: var(--surface); color: var(--ink); }
.sc-msg.sc-typing { padding: 14px 16px; }
.sc-user { background: var(--action); color: var(--sc-on-action); border-radius: 18px 18px 6px 18px; }
.sc-kick, .sc-rs, .sc-tag small { font: 600 11px/1.35 var(--f-sans); letter-spacing: .04em; color: var(--muted); }
.sc-title { font: 600 16px/1.3 var(--f-sans); letter-spacing: -.018em; color: var(--heading); }
.sc-price, .sc-rv, .sc-data { font-family: var(--f-sans); font-weight: 600; letter-spacing: -.012em; }
.sc-data { font-weight: 500; }
.sc-list svg { color: var(--icon); }
.sc-rn { font: 600 15px/1.3 var(--f-sans); letter-spacing: -.014em; color: var(--heading); }
.sc-ask { font: 400 12px/1.35 var(--f-sans); }
.sc-num { font: 600 12px/1 var(--f-sans); }
.sc-rowbtn { border-radius: 10px; }
.sc-rowbtn:hover { background: var(--sc-hover); }
/* Option cards inside a bubble (the font shorthand resets numeric variants, so tabular figures are restated) */
.sc-card { gap: 6px 14px; padding-top: 12px; }
.sc-thumb { border-radius: 10px; background: var(--band); }
.sc-cname { font: 600 16px/1.25 var(--f-sans); letter-spacing: -.018em; color: var(--heading); }
.sc-cexp { font: 600 11px/1.3 var(--f-sans); letter-spacing: .04em; }
.sc-cprice small { font: 600 11px/1.3 var(--f-sans); letter-spacing: .04em; }
.sc-cprice span { font: 600 16px/1.35 var(--f-sans); letter-spacing: -.016em; font-variant-numeric: tabular-nums lining-nums; }

/* Action buttons: Apple pills; ghost = hairline outline. Disabled restated so ghost never overrides it */
.sc-act { min-height: 44px; padding: 10px 20px; border: 1px solid var(--action); background: var(--action); color: var(--sc-on-action); font: 500 15px/1.2 var(--f-sans); letter-spacing: -.012em; }
.sc-act:hover { background: var(--action-hover); }
.sc-act.sc-ghost { background: transparent; border-color: var(--line); color: var(--action); }
.sc-act.sc-ghost:hover { background: var(--surface); }
.sc-act[disabled], .sc-act[aria-disabled="true"] { border-color: var(--line); color: var(--muted); background: transparent; }

/* Quiz picker: soft grey tiles in a two-up grid; hover darkens the tile itself so it reads in light and dark */
.sc-pick { gap: 8px; }
.sc-stone { min-height: 52px; padding: 12px 14px; border: 0; border-radius: var(--r-sm); background: var(--surface); color: var(--heading); }
.sc-stone:hover { background: color-mix(in srgb, var(--ink) 8%, var(--surface)); }
.sc-sl { font: 600 12px/1.25 var(--f-sans); letter-spacing: .03em; }
.sc-sn { font: 500 12px/1 var(--f-sans); color: var(--muted); }

/* Quick-reply chips: hairline pills with brand-teal text */
.sc-replies { gap: 8px; }
.sc-reply { padding: 9px 16px; border: 1px solid var(--line); background: var(--bg); color: var(--action); font: 500 15px/1.25 var(--f-sans); letter-spacing: -.012em; }
.sc-reply:hover { background: var(--surface); }
.sc-reply.sc-menu { border-color: var(--line); color: var(--muted); }

/* Composer: rounded pill field with a round send button */
.sc-form { align-items: center; padding: 10px 12px 8px; border-top: 1px solid var(--line); background: var(--bg); }
.sc-input { height: 44px; padding: 0 18px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: 400 16px/1.2 var(--f-sans); letter-spacing: -.01em; }
.sc-input:focus { border-color: var(--action); background: var(--bg); }
.sc-send { background: var(--action); color: var(--sc-on-action); }
.sc-send:hover { background: var(--action-hover); }
.sc-foot { padding: 0 16px 10px; background: var(--bg); font: 400 11px/1.4 var(--f-sans); letter-spacing: 0; color: var(--muted); }

/* Phone: keep the full-screen sheet flat and edge-to-edge (restates chat.css after the overrides above,
   including the header's safe-area height, which the 64px min-height above would otherwise replace) */
@media (max-width: 600px) {
  .sc-panel { border: 0; border-radius: 0; box-shadow: none; }
  .sc-head { min-height: calc(64px + env(safe-area-inset-top, 0px)); }
  .sc-log { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  .sc-foot { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
}

/* ======================== icons: one consistent line style ======================== */
/* Every Lucide icon uses the same stroke weight; the map pin is outlined like the rest instead of filled. */
.ic { stroke-width: 1.75; }
.pin-solid, .band .pin-solid, .pin-solid.on-band { fill: none; stroke: currentColor; }
/* Proof strip: each icon sits in the same small mint tile, like the live site's feature icons */
.strip .strip-grid .ic {
  box-sizing: border-box; width: 44px; height: 44px; padding: 10px; margin: 0 0 6px;
  border-radius: var(--r-md); background: var(--tint); color: var(--action); stroke: currentColor; fill: none;
}
@media (max-width: 559px) { .strip .strip-grid .ic { grid-row: span 2; margin: 0; } .strip .strip-grid > div:nth-child(n) { grid-template-columns: 44px minmax(0, 1fr); } }

/* ======================== Who sees what: a livelier lens ======================== */
/* Each adviser owns a colour and an icon; picking one pops its part of the street in colour and greys out the rest.
   "Grupo Sineva" lights the whole street and draws the route that links every stop. */
:root { --lens-law: #4F7396; --lens-real: #B5704A; --lens-deal: #A07A22; --lens-all: #0B6B6B; --lens-sky: rgba(143, 207, 203, .38); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --lens-law: #8DB0D3; --lens-real: #E3A57F; --lens-deal: #D9B45E; --lens-all: #6CC4BF; --lens-sky: rgba(108, 196, 191, .16); }
}
:root[data-theme="dark"] { --lens-law: #8DB0D3; --lens-real: #E3A57F; --lens-deal: #D9B45E; --lens-all: #6CC4BF; --lens-sky: rgba(108, 196, 191, .16); }

#move .lens { background: var(--surface); box-shadow: var(--shadow); }
#move .lens-btns { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 14px; }
#move .lens-btn[data-lens="lawyer"] { --c: var(--lens-law); }
#move .lens-btn[data-lens="realtor"] { --c: var(--lens-real); }
#move .lens-btn[data-lens="broker"] { --c: var(--lens-deal); }
#move .lens-btn[data-lens="all"] { --c: var(--lens-all); }
#move .lens-btn {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px; align-content: center;
  padding: 14px; text-align: left; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
#move .lens-ic {
  grid-row: 1 / span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px;
  background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); transition: background-color .2s var(--ease), color .2s var(--ease);
}
#move .lens-ic .ic { width: 22px; height: 22px; }
#move .lens-btn small { color: var(--muted); }
#move .lens-btn b { color: var(--heading); }
#move .lens-btn:hover { background: var(--surface); border-color: var(--c); box-shadow: none; transform: translateY(-2px); }
#move .lens-btn:not([aria-pressed="true"]):hover { box-shadow: 0 8px 20px -14px var(--c); }
#move .lens-btn[aria-pressed="true"] { background: var(--c); border-color: var(--c); box-shadow: 0 12px 28px -16px var(--c); }
#move .lens-btn[aria-pressed="true"] .lens-ic { background: rgba(255, 255, 255, .2); color: #FFFFFF; }
#move .lens-btn[aria-pressed="true"] small { color: rgba(255, 255, 255, .82); }
#move .lens-btn[aria-pressed="true"] b { color: #FFFFFF; }
:root[data-theme="dark"] #move .lens-btn[aria-pressed="true"] :is(small, b, .lens-ic) { color: #0E1717; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #move .lens-btn[aria-pressed="true"] :is(small, b, .lens-ic) { color: #0E1717; } }
@media (max-width: 860px) { #move .lens-btns { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { #move .lens-btn { grid-template-columns: 34px minmax(0, 1fr); column-gap: 10px; padding: 12px; } #move .lens-ic { width: 34px; height: 34px; } #move .lens-btn b { font-size: 15px; } }

/* The drawing: each group takes its adviser's colour */
#move .lens-fig { padding: 6px 18px 18px; }
#move .lens-svg { overflow: visible; stroke-width: 1.75; }
#move .lens-svg g[data-g="lawyer"] { color: var(--lens-law); }
#move .lens-svg g[data-g="realtor"] { color: var(--lens-real); }
#move .lens-svg g[data-g="broker"] { color: var(--lens-deal); }
#move .lens-svg g[data-g="all"], #move .lens-svg g[data-g="route"] { color: var(--lens-all); }
#move .lens-svg g[data-g="road"] { color: var(--muted); }
#move .lens-svg .lf { fill: color-mix(in srgb, currentColor 12%, var(--surface)); }
#move .lens-svg .ld { fill: currentColor; }
#move .lens-svg .la { fill: color-mix(in srgb, currentColor 45%, var(--surface)); }
#move .lens-svg .lp { fill: currentColor; }
#move .lens-svg .lens-sun { fill: color-mix(in srgb, var(--accent) 55%, transparent); stroke: none; }
#move .lens-svg g[data-g] { transform-box: fill-box; transform-origin: 50% 100%; transition: opacity .3s var(--ease), filter .3s var(--ease); }
#move .lens-svg[data-lens="lawyer"] g[data-g]:not([data-g="lawyer"]),
#move .lens-svg[data-lens="realtor"] g[data-g]:not([data-g="realtor"]),
#move .lens-svg[data-lens="broker"] g[data-g]:not([data-g="broker"]) { opacity: .22; filter: grayscale(1); }
/* Route: only in the Grupo Sineva view */
#move .lens-route { fill: none; stroke-width: 2; stroke-dasharray: 2 9; }
#move .lens-pin circle:first-child { fill: var(--surface); stroke-width: 2; }
#move .lens-svg:not([data-lens="all"]) g[data-g="route"] { opacity: 0 !important; }
/* Caption becomes a pill with the active colour */
#move .lens-cap:not(:empty) { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 6px 14px; border-radius: 999px; background: var(--tint); color: var(--heading); font-weight: 600; }
#move .lens-cap:not(:empty)::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--lens-all); }
#lens:has(.lens-svg[data-lens="lawyer"]) .lens-cap::before { background: var(--lens-law); }
#lens:has(.lens-svg[data-lens="realtor"]) .lens-cap::before { background: var(--lens-real); }
#lens:has(.lens-svg[data-lens="broker"]) .lens-cap::before { background: var(--lens-deal); }

@media (prefers-reduced-motion: no-preference) {
  #move .lens-svg[data-lens="lawyer"] g[data-g="lawyer"],
  #move .lens-svg[data-lens="realtor"] g[data-g="realtor"],
  #move .lens-svg[data-lens="broker"] g[data-g="broker"] { animation: lens-pop .55s cubic-bezier(.3, 1.6, .5, 1) both; }
  #move .lens-svg[data-lens="all"] .lens-route { animation: lens-march 1.4s linear infinite; }
  #move .lens-svg[data-lens="all"] .lens-pin { animation: lens-drop .5s cubic-bezier(.3, 1.6, .5, 1) both; transform-box: fill-box; transform-origin: 50% 100%; }
  #move .lens-svg[data-lens="all"] .lens-pin:nth-of-type(2) { animation-delay: .12s; }
  #move .lens-svg[data-lens="all"] .lens-pin:nth-of-type(3) { animation-delay: .24s; }
  #move .lens-svg .lens-car { animation: lens-drive 5s ease-in-out infinite alternate; }
  #move .lens-svg:not([data-lens="all"]) .lens-car { animation-play-state: paused; }
  #move .lens-btn[aria-pressed="true"] .lens-ic { animation: lens-pop .45s cubic-bezier(.3, 1.6, .5, 1) both; }
}
@keyframes lens-pop { 0% { transform: scale(.94); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes lens-march { to { stroke-dashoffset: -22; } }
@keyframes lens-drop { from { transform: translateY(-14px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes lens-drive { from { transform: translateX(-26px); } to { transform: translateX(14px); } }
@media (forced-colors: active) {
  #move .lens-btn[aria-pressed="true"] { background: Highlight; border-color: Highlight; }
  #move .lens-btn[aria-pressed="true"] :is(small, b, .lens-ic) { color: HighlightText; }
}
/* Phones: the street is too wide to read at 340px, so a single adviser zooms the camera onto their stop;
   "Grupo Sineva" pulls back to the whole street. */
@media (max-width: 640px) {
  #move .lens-fig { overflow: hidden; }
  #move .lens-svg { transform-origin: 0 50%; }
  #move .lens-svg:not([data-lens="all"]) { width: 240%; max-width: none; }
  #move .lens-svg[data-lens="realtor"] { transform: translateX(-27%); }
  #move .lens-svg[data-lens="broker"] { transform: translateX(-58%); }
}
@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
  #move .lens-svg { transition: width .5s var(--ease), transform .5s var(--ease); }
}

/* ======================== light-only + header tweaks ======================== */
/* The site is light only now (no theme toggle); the menu button shows just its icon. */
.menu-btn { width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; }
/* "Who sees what" in the site's own colours: shades of the brand green instead of extra hues */
:root, :root[data-theme="light"] { --lens-law: #084A4A; --lens-real: #0B6B6B; --lens-deal: #4FA6A2; --lens-all: #0B6B6B; --lens-sky: rgba(143, 207, 203, .38); }
#move .lens-btn[aria-pressed="true"] { background: var(--action); border-color: var(--action); box-shadow: 0 12px 28px -16px var(--action); }

/* ======================== Your whole move: step cards, tour banner, juggling cards ======================== */
/* Ladder: six white step cards joined by a line; each icon sits in a mint disc and the last stop is filled sage. */
#move .ladder { --g: 16px; counter-reset: step; padding: 0; background: none; border: 0; column-gap: var(--g); }
#move .ladder::before { top: 44px; left: calc(100% / 12); right: calc(100% / 12); height: 2px; background: linear-gradient(90deg, var(--line), var(--action)); }
#move .ladder li {
  position: relative; z-index: 1; display: flex; flex-direction: column; gap: 14px; counter-increment: step;
  padding: 20px 18px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(17, 28, 28, .04); transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
#move .ladder .station { display: none; }
#move .ladder li .ic { box-sizing: border-box; width: 48px; height: 48px; padding: 12px; border-radius: 50%; background: var(--tint); color: var(--action); flex: none; }
#move .ladder-t::before { content: counter(step, decimal-leading-zero); display: block; margin-bottom: 6px; font: 600 12px/1 var(--f-sans); letter-spacing: .14em; color: var(--action); }
#move .ladder b { font: 600 17px/1.25 var(--f-head); letter-spacing: -.01em; color: var(--ink); }
#move .ladder-t span { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--muted); }
#move .ladder li:last-child { background: var(--action); border-color: var(--action); box-shadow: 0 18px 36px -20px rgba(11, 107, 107, .9); }
#move .ladder li:last-child .ic { background: rgba(255, 255, 255, .18); color: #FFFFFF; }
#move .ladder li:last-child b { color: #FFFFFF; }
#move .ladder li:last-child .ladder-t span { color: rgba(255, 255, 255, .86); }
#move .ladder li:last-child .ladder-t::before { color: rgba(255, 255, 255, .8); }
@media (hover: hover) {
  #move .ladder li:hover { transform: translateY(-4px); border-color: var(--sage); box-shadow: 0 18px 36px -22px rgba(17, 28, 28, .35); }
  #move .ladder li:last-child:hover { border-color: var(--action); }
}
/* Phones and tablets: a vertical timeline, the line running through the icon discs */
@media (max-width: 1023px) {
  #move .ladder { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
  #move .ladder::before { top: 44px; bottom: 44px; left: 41px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, var(--line), var(--action)); }
  #move .ladder li { flex-direction: row; align-items: flex-start; gap: 16px; padding: 18px; }
  #move .ladder li .ic { margin: 0; }
}

/* Tour: a mint banner with the car in a sage disc */
#move .tour {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 18px; align-items: center;
  margin-top: 20px; padding: 22px 26px; border: 1px solid var(--line); border-radius: 14px;
  background: linear-gradient(90deg, var(--tint) 0%, var(--surface) 100%);
}
#move .tour .ic { box-sizing: border-box; width: 56px; height: 56px; padding: 15px; margin: 0; border-radius: 50%; background: var(--action); color: #FFFFFF; grid-row: span 2; }
#move .tour b { font: 600 18px/1.4 var(--f-head); letter-spacing: -.01em; color: var(--ink); }
#move .tour span { font-size: 15px; color: var(--muted); }
@media (max-width: 560px) { #move .tour { grid-template-columns: 48px minmax(0, 1fr); padding: 18px; } #move .tour .ic { width: 48px; height: 48px; padding: 12px; } #move .tour b { font-size: 16px; } }

/* What you're juggling: heading stays in view, five separate cards with a mint icon tile and a "1/5" pill */
#move .juggle { gap: 28px 64px; }
@media (min-width: 861px) { #move .juggle-head { position: sticky; top: calc(var(--head-h) + 32px); } }
#move .juggle-head h3 { font: 700 clamp(1.625rem, 1.2rem + 1.5vw, 2.375rem)/1.15 var(--f-head); letter-spacing: -.02em; color: var(--ink); }
#move .juggle-head .num { display: inline; font-weight: 700; color: var(--action); }
#move .juggle-list { gap: 12px; padding: 0; border: 0; background: none; }
#move .juggle-list li {
  grid-template-columns: 48px minmax(0, 1fr) auto; gap: 16px; align-items: center;
  padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(17, 28, 28, .04); transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
#move .juggle-list li:last-child { border-bottom: 1px solid var(--line); }
#move .juggle-list .ic { grid-column: 1; grid-row: 1; box-sizing: border-box; width: 48px; height: 48px; padding: 12px; border-radius: 12px; background: var(--tint); color: var(--action); }
#move .juggle-list li > div { grid-column: 2; grid-row: 1; min-width: 0; }
#move .jl-n { grid-column: 3; grid-row: 1; align-self: center; padding: 5px 10px; border-radius: 999px; background: var(--tint); font: 600 12px/1 var(--f-sans); letter-spacing: .04em; color: var(--action); }
#move .juggle-list b { font: 600 17px/1.3 var(--f-head); color: var(--ink); }
#move .juggle-list li span:not(.jl-n) { margin-top: 2px; font-size: 14px; line-height: 1.5; color: var(--muted); }
@media (hover: hover) {
  #move .juggle-list li:hover { transform: translateX(6px); border-color: var(--sage); box-shadow: 0 14px 30px -22px rgba(17, 28, 28, .4); }
}
@media (prefers-reduced-motion: reduce) { #move .ladder li, #move .juggle-list li { transition: none; } #move .ladder li:hover, #move .juggle-list li:hover { transform: none; } }

/* ======================== After you arrive: a checklist of cards with a progress bar ======================== */
#move .arrive {
  display: grid; gap: 14px; padding: clamp(24px, 4vw, 44px); border: 1px solid var(--line); border-radius: 20px;
  background: linear-gradient(135deg, var(--surface) 0%, var(--tint) 100%); box-shadow: 0 1px 2px rgba(17, 28, 28, .04);
}
#move .arrive h3 { font: 700 clamp(1.5rem, 1.15rem + 1.3vw, 2.125rem)/1.15 var(--f-head); letter-spacing: -.02em; color: var(--ink); }
#move .arrive-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 6px 0 0; }
#move .arrive-chips li { min-width: 0; }
#move .arrive-chips label {
  display: flex; align-items: center; gap: 12px; width: 100%; max-width: none; min-height: 64px; padding: 10px 14px 10px 10px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer;
  font: 500 15px/1.3 var(--f-sans); color: var(--ink); text-align: left;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
#move .arrive-chips .ic { box-sizing: border-box; flex: none; width: 42px; height: 42px; padding: 11px; border-radius: 10px; background: var(--tint); color: var(--action); transition: background-color .2s var(--ease), color .2s var(--ease); }
#move .arrive-chips .box { order: 1; margin-left: auto; width: 22px; height: 22px; border: 1.5px solid var(--line); background: var(--surface); transition: background-color .2s var(--ease), border-color .2s var(--ease); }
#move .arrive-chips .box svg { width: 13px; height: 13px; stroke: #FFFFFF; }
#move .arrive-chips label:hover { border-color: var(--sage); box-shadow: 0 12px 24px -18px rgba(17, 28, 28, .35); transform: translateY(-2px); }
#move .arrive-chips input:checked + label { border-color: var(--action); background: var(--tint); box-shadow: none; }
#move .arrive-chips input:checked + label .ic { background: var(--action); color: #FFFFFF; }
#move .arrive-chips input:checked + label .box { background: var(--action); border-color: var(--action); }
#move .arrive-chips input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; }
/* "x of 8 checked" becomes a label over a progress bar */
#move .arrive-count { position: relative; padding-bottom: 14px; font: 600 13px/1.2 var(--f-sans); letter-spacing: .02em; color: var(--action); }
#move .arrive-count::before, #move .arrive-count::after { content: ""; position: absolute; left: 0; bottom: 0; height: 6px; border-radius: 999px; }
#move .arrive-count::before { right: 0; background: var(--line); }
#move .arrive-count::after { width: calc(var(--arrive-p, 0) * 100%); background: var(--action); transition: width .35s var(--ease); }
#move .arrive > p:last-child { font-size: 15px; line-height: 1.6; color: var(--muted); }
#move .arrive > p:last-child a { color: var(--action); font-weight: 600; text-decoration-thickness: 1.5px; }
@media (max-width: 480px) {
  #move .arrive-chips { grid-template-columns: minmax(0, 1fr); }
  #move .arrive-chips label { min-height: 58px; }
}
/* Desktop: the heading, progress and note on the left; the eight cards on the right */
@media (min-width: 1024px) {
  #move .arrive { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 48px; align-items: start; }
  #move .arrive > :not(.arrive-chips) { grid-column: 1; }
  #move .arrive-chips { grid-column: 2; grid-row: 1 / span 5; margin: 0; }
  #move .arrive .label { grid-row: 1; } #move .arrive h3 { grid-row: 2; }
  #move .arrive-count { grid-row: 3; margin-top: 18px; max-width: 320px; }
  #move .arrive > p:last-child { grid-row: 4; margin-top: 6px; max-width: 40ch; }
}
@media (prefers-reduced-motion: reduce) { #move .arrive-chips label, #move .arrive-count::after { transition: none; } #move .arrive-chips label:hover { transform: none; } }

/* Lens: no empty strip under the drawing, a little more air above it */
#move .lens-fig { padding: 10px 18px 16px; }
#move .lens-cap:not(:empty) { margin-top: 12px; }

/* ======================== Businesses toolbar: search, categories and status in one card ======================== */
#businesses .biz-tools {
  display: grid; grid-template-columns: minmax(0, 1fr); justify-items: stretch; gap: 16px;
  margin-top: 8px; padding: 20px 20px 16px; background: var(--surface); border: 1px solid var(--line); border-bottom: 0; border-radius: 16px 16px 0 0;
}
#businesses .biz-search { order: -1; width: 100%; max-width: 560px; }
#businesses .biz-search .ic { left: 16px; color: var(--action); }
#businesses .biz-search input {
  min-height: 50px; padding: 0 18px 0 48px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg);
  font: 400 16px/1.2 var(--f-sans); color: var(--ink); transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}
#businesses .biz-search input::placeholder { color: var(--muted); opacity: .8; }
#businesses .biz-search input:hover { border-color: var(--sage); }
#businesses .biz-search input:focus, #businesses .biz-search input:focus-visible { outline: 0; border-color: var(--action); background: var(--surface); box-shadow: 0 0 0 4px rgba(11, 107, 107, .15); }

#businesses .filters { justify-content: flex-start; gap: 8px; }
#businesses .fchip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 8px 0 14px; white-space: nowrap;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink);
  font: 500 14px/1.2 var(--f-sans); letter-spacing: 0; text-transform: none; cursor: pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
}
#businesses .fchip span {
  display: inline-grid; place-items: center; min-width: 26px; height: 24px; padding: 0 7px; border-radius: 999px;
  background: var(--tint); color: var(--action); font: 600 12px/1 var(--f-sans); letter-spacing: 0; opacity: 1;
}
#businesses .fchip:hover { border-color: var(--sage); background: var(--surface); }
#businesses .fchip[aria-pressed="true"] { background: var(--action); border-color: var(--action); color: #FFFFFF; }
#businesses .fchip[aria-pressed="true"] span { background: rgba(255, 255, 255, .2); color: #FFFFFF; opacity: 1; }
#businesses .fchip:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Bottom of the card: result count on the left, the quiz on the right */
#businesses .biz-bar {
  margin: 0 0 28px; padding: 14px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 0 0 16px 16px;
  box-shadow: 0 18px 36px -30px rgba(17, 28, 28, .35);
}
#businesses .biz-tools + .biz-bar { border-top: 1px solid var(--line); }
#businesses .biz-status { font: 500 14px/1.3 var(--f-sans); letter-spacing: 0; color: var(--muted); }
#businesses .quiz-btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 18px 0 14px; border-radius: 999px;
  border: 1px solid var(--action); background: var(--surface); color: var(--action); font: 600 14px/1.25 var(--f-sans); letter-spacing: 0; text-decoration: none;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
#businesses .quiz-btn:hover { background: var(--action); color: #FFFFFF; border-color: var(--action); }

/* Phones: categories become one swipeable row instead of three wrapped rows */
@media (max-width: 760px) {
  #businesses .biz-tools { padding: 16px 0 12px; }
  #businesses .biz-search { padding: 0 16px; max-width: none; }
  #businesses .biz-search .ic { left: 32px; }
  #businesses .filters {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none;
    padding: 2px 16px 4px; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent);
  }
  #businesses .filters::-webkit-scrollbar { display: none; }
  #businesses .fchip { scroll-snap-align: start; flex: none; }
  #businesses .biz-bar { padding: 12px 16px; }
  #businesses .quiz-btn { width: 100%; justify-content: center; border-radius: 12px; padding-block: 10px; }
}