/* The public consultation form (herehomecare.app/consultation) and its office pieces (CEO, Oct 27, 2026; prototype consultation-form-proto.html,
   office-visual-system v1: one white surface, rows not boxes, chips and choice rows, never a native dropdown).
   Color and motion (CEO, Oct 29, 2026; consultation-color-proto.html): a cream page, a teal panel of slowly drifting shapes (no photos but the
   Care Manager's own headshot), colored choice cards, one progress bar that fills, screens that slide, a confirmation that celebrates.
   Everything that moves stops under prefers-reduced-motion. The public rules sit under .cf so the office sheets keep their look. */
body.cf-page { background: #FEF9EF; }
.cf-page .topbar, .cf-page .rail, .cf-page .tabbar { display: none !important; }
.cf-page .main { background: #FEF9EF; padding-bottom: env(safe-area-inset-bottom, 0px); }
.cf-page .main .gut { max-width: none; padding: 0; }
.cf { --c-surface: #FFFFFF; --c-tint: #F6F5F2; --c-line: #E7E5E0; --c-line2: #D5D2CB; --c-ink: #16211F; --c-ink2: #4A5553; --c-ink3: #6F7977;
  --c-teal: #184E49; --c-teal2: #22645D; --c-teal-soft: #E8F0EE; --c-cream: #FEF9EF; --c-cream2: #F6EEDD; --c-gold: #A58560; --c-gold-ink: #7A5F3D; --c-gold-soft: #F3EADC;
  --c-coral: #C9452F; --c-coral-soft: #FDECE9; --c-ok: #1B7A4E; --c-ok-soft: #E6F4EE; --c-warn: #8A5A00; --c-on-teal: #FEF9EF; --c-on-teal2: #C9DCD8;
  --c-shadow: 0 10px 30px rgba(22,33,31,.10); --c-ease: cubic-bezier(.2,.8,.2,1);
  font-family: 'Figtree', system-ui, sans-serif; font-weight: 500; font-size: 15px; line-height: 1.45; color: var(--c-ink); background: var(--c-cream); min-height: 100vh; font-variant-numeric: tabular-nums; overflow-x: clip; }
.cf button { font: inherit; color: inherit; }
.cf a { color: var(--c-teal); font-weight: 600; text-decoration: none; }
.cf :focus-visible { outline: 2px solid var(--c-teal); outline-offset: 2px; }
.cf svg { flex: none; }

/* header: logo, and the phone as a pill */
.cf-top { height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; background: var(--c-cream); }
.cf-top img { height: 26px; width: auto; display: block; }
.cf .cf-callpill { height: 36px; padding: 0 14px; border-radius: 999px; background: var(--c-surface); border: 1px solid var(--c-gold); color: var(--c-teal); font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.cf-callpill svg { width: 15px; height: 15px; }

/* layout: phone = the panel on top, the card overlapping it; computer = two columns, the panel sticky */
.cf-body { display: block; padding: 0 12px 28px; max-width: 640px; margin: 0 auto; }
.cf-side { display: block; position: relative; background: var(--c-teal); color: var(--c-on-teal); border-radius: 22px; overflow: hidden; margin: 0 0 -28px; }
.cf-art { position: relative; height: 210px; overflow: hidden; background: var(--c-teal); transition: height .45s var(--c-ease); }
.cf-geo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cf-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(24,78,73,0) 45%, rgba(24,78,73,.85) 100%); pointer-events: none; }
.cf-geo g { transform-box: fill-box; transform-origin: center; }
.cf-geo .g1 { animation: cf-drift1 14s ease-in-out infinite alternate; }
.cf-geo .g2 { animation: cf-drift2 18s ease-in-out infinite alternate; }
.cf-geo .g5 { animation: cf-breathe 9s ease-in-out infinite alternate; }
@keyframes cf-drift1 { to { transform: translate(-18px, 10px) rotate(8deg); } }
@keyframes cf-drift2 { to { transform: translate(14px, -12px); } }
@keyframes cf-breathe { to { transform: scale(1.12); } }
.cf-over { position: absolute; left: 20px; right: 20px; bottom: 14px; z-index: 1; }
.cf-side.slim .cf-over { bottom: 40px; }
.cf-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-cream); background: rgba(165,133,96,.95); border-radius: 999px; padding: 4px 10px; margin-bottom: 8px; }
.cf-kicker i { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: cf-blink 1.6s ease-in-out infinite; }
@keyframes cf-blink { 50% { opacity: .25; } }
.cf-side h2 { font-family: 'Newsreader', Georgia, serif; font-weight: 500; font-size: 32px; line-height: 1.05; margin: 0; color: var(--c-on-teal); text-wrap: balance; text-shadow: 0 1px 12px rgba(0,0,0,.18); }
.cf-story { padding: 12px 20px 44px; }
.cf-story > p { margin: 0; color: var(--c-on-teal2); font-size: 15px; }
.cf-sofar, .cf-next, .cf-call { display: none; }
.cf-side.slim .cf-art { height: 112px; }
.cf-side.slim .cf-kicker { display: none; }
.cf-side.slim h2 { font-size: 22px; }
.cf-side.slim .cf-story { display: none; }
.cf-card { background: var(--c-surface); border-radius: 22px; box-shadow: var(--c-shadow); padding: 24px 20px 26px; position: relative; z-index: 1; }
@media (min-width: 900px) {
  .cf-top { height: 76px; padding: 0 48px; }
  .cf-body { display: grid; grid-template-columns: 400px minmax(0, 600px); gap: 48px; justify-content: center; align-items: start; padding: 8px 48px 64px; max-width: none; }
  .cf-side, .cf-side.slim { margin: 0; position: sticky; top: 16px; }
  .cf-art, .cf-side.slim .cf-art { height: 300px; }
  .cf-side.slim .cf-kicker { display: inline-flex; }
  .cf-over, .cf-side.slim .cf-over { left: 30px; right: 30px; bottom: 22px; }
  .cf-side h2, .cf-side.slim h2 { font-size: 40px; }
  .cf-story, .cf-side.slim .cf-story { display: block; padding: 20px 30px 30px; margin: 0; }
  .cf-story > p { margin-bottom: 22px; }
  .cf-next, .cf-call { display: block; }
  .cf-sofar.has { display: block; }
  .cf-card { padding: 36px 40px 40px; }
}
.cf-sofar { margin: 0 0 20px; padding: 14px 16px; border-radius: 14px; background: rgba(254,249,239,.08); border: 1px solid rgba(254,249,239,.14); }
.cf-sofar .lab { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #D9BE97; margin-bottom: 6px; }
.cf-sofar ul { list-style: none; margin: 0; padding: 0; }
.cf-sofar li { display: flex; gap: 10px; align-items: flex-start; padding: 5px 0; font-size: 14px; color: var(--c-on-teal); overflow-wrap: anywhere; }
.cf-sofar li.new { animation: cf-rise .45s var(--c-ease) both; }
.cf-sofar li svg { width: 16px; height: 16px; color: #D9BE97; margin-top: 2px; }
.cf-sofar li small { display: block; color: var(--c-on-teal2); font-size: 12px; }
.cf-next { list-style: none; padding: 0; margin: 0 0 22px; }
.cf-next li { display: flex; gap: 14px; padding: 12px 0; border-top: 1px solid rgba(254,249,239,.16); font-size: 14px; color: var(--c-on-teal2); transition: color .3s; }
.cf-next li > span { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--c-gold); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 700; transition: background .3s, color .3s, transform .3s, box-shadow .3s; }
.cf-next li b { display: block; color: var(--c-on-teal); font-size: 15px; }
.cf-next li.on > span { background: var(--c-cream); color: var(--c-teal); transform: scale(1.12); box-shadow: 0 0 0 5px rgba(254,249,239,.14); }
.cf-next li.on b { color: #fff; }
.cf-call { font-size: 14px; color: var(--c-on-teal2); border-top: 1px solid rgba(254,249,239,.16); padding-top: 16px; }
.cf-call b { display: block; color: var(--c-on-teal); font-size: 20px; letter-spacing: .01em; }

/* progress: one bar that stays and fills; step and time left under it */
.cf-pbar { height: 8px; border-radius: 4px; background: var(--c-cream2); overflow: hidden; margin: 0 0 16px; position: relative; }
.cf-pbar[hidden] { display: none; }
.cf-pbar i { position: absolute; inset: 0 auto 0 0; width: 20%; border-radius: 4px; overflow: hidden; background: linear-gradient(90deg, var(--c-teal) 0%, var(--c-teal2) 70%, var(--c-gold) 100%); transition: width .6s var(--c-ease); }
.cf-pbar i::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); transform: translateX(-100%); animation: cf-sheen 2.6s ease-in-out infinite; }
@keyframes cf-sheen { 60%, 100% { transform: translateX(100%); } }
.cf-stepno { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-gold-ink); margin: 0 0 6px; display: flex; justify-content: space-between; gap: 12px; }
.cf-stepno .left { color: var(--c-ink3); letter-spacing: .04em; text-align: right; }
.cf-q { font-family: 'Newsreader', Georgia, serif; font-weight: 500; font-size: 28px; line-height: 1.12; margin: 0 0 6px; text-wrap: balance; color: var(--c-teal); }
@media (min-width: 900px) { .cf-q { font-size: 34px; } }
.cf-sub { color: var(--c-ink2); margin: 0 0 20px; }
.cf-fl { display: block; font-size: 14px; font-weight: 700; margin: 22px 0 8px; color: var(--c-ink); }
.cf-fl small { font-weight: 500; color: var(--c-ink3); margin-left: 4px; font-size: 13px; }
.cf-inp { width: 100%; height: 52px; border: 1px solid var(--c-line2); border-radius: 10px; padding: 0 14px; font: inherit; font-size: 16px; background: var(--c-surface); color: var(--c-ink); box-sizing: border-box; }
textarea.cf-inp { height: 96px; padding: 12px 14px; resize: vertical; }
.cf-inp:focus { outline: 2px solid var(--c-teal); outline-offset: 0; border-color: var(--c-teal); }
.cf .cf-inp { border-width: 1.5px; border-radius: 12px; }
.cf .cf-inp:focus { outline: 3px solid var(--c-teal-soft); border-color: var(--c-teal); }
.cf-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cf-help { font-size: 13px; color: var(--c-ink3); margin: 6px 0 0; }
.cf-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* choice cards with colored icon tiles */
.cf-choices { display: grid; gap: 10px; }
.cf-choice { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 76px; padding: 12px 14px; background: var(--c-surface); border: 1.5px solid var(--c-line); border-radius: 16px; text-align: left; cursor: pointer; transition: border-color .15s, background .15s, transform .15s, box-shadow .15s; }
.cf-choice:hover { border-color: var(--c-line2); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(22,33,31,.08); }
.cf-choice:active { transform: scale(.98); }
.cf-choice .ic { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; }
.cf-choice .ic svg { width: 24px; height: 24px; }
.cf-choice .ic.coral { background: var(--c-coral-soft); color: var(--c-coral); }
.cf-choice .ic.teal { background: var(--c-teal-soft); color: var(--c-teal); }
.cf-choice .ic.gold { background: var(--c-gold-soft); color: var(--c-gold-ink); }
.cf-choice .tx { flex: 1; min-width: 0; }
.cf-choice .tx b { display: block; font-size: 17px; font-weight: 700; }
.cf-choice .tx small { display: block; color: var(--c-ink3); font-size: 14px; margin-top: 2px; }
.cf-choice .len { display: inline-block; vertical-align: 2px; margin-left: 8px; font-size: 12px; font-weight: 700; color: var(--c-ink2); background: var(--c-tint); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.cf-choice .ck { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--c-line2); display: grid; place-items: center; color: #fff; }
.cf-choice .ck svg { width: 14px; height: 14px; opacity: 0; }
.cf-choice[aria-checked="true"] { border-color: var(--c-teal); background: var(--c-teal-soft); }
.cf-choice[aria-checked="true"] .ck { background: var(--c-teal); border-color: var(--c-teal); }
.cf-choice[aria-checked="true"] .ck svg { opacity: 1; }
.cf-choice[aria-checked="true"] .len { background: var(--c-surface); }

/* chips, days, times: picked = solid teal */
.cf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cf-chip { min-height: 40px; border: 1.5px solid var(--c-line2); border-radius: 999px; padding: 8px 14px; font-size: 15px; font-weight: 600; color: var(--c-ink2); background: var(--c-surface); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; text-align: left; transition: background .15s, border-color .15s, color .15s, transform .12s; }
.cf-chip:hover { border-color: var(--c-teal2); }
.cf-chip[aria-pressed="true"] { border-color: var(--c-teal); color: #fff; background: var(--c-teal); }
.cf-chip[aria-pressed="true"]::before { content: '✓'; font-size: 13px; }
.cf-days { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; margin: 0 -2px; scrollbar-width: thin; }
.cf-day { flex: none; width: 64px; height: 72px; border: 1px solid var(--c-line2); border-radius: 12px; background: var(--c-surface); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.cf-day small { font-size: 12px; color: var(--c-ink3); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.cf-day b { font-size: 20px; font-weight: 700; }
.cf-day[aria-pressed="true"] { border-color: var(--c-teal); background: var(--c-teal); color: #fff; }
.cf-day[aria-pressed="true"] small { color: #d6e6e3; }
.cf-day:disabled { opacity: .4; cursor: default; }
.cf-times { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (min-width: 900px) { .cf-times { grid-template-columns: repeat(4, 1fr); } }
.cf-time { height: 44px; border: 1px solid var(--c-line2); border-radius: 10px; background: var(--c-surface); font-weight: 600; font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; text-align: center; color: var(--c-ink); }
.cf-time[aria-pressed="true"] { border-color: var(--c-teal); background: var(--c-teal); color: #fff; }
.cf-time:disabled { color: var(--c-ink3); background: var(--c-tint); border-color: var(--c-tint); text-decoration: line-through; cursor: default; }
.cf .cf-day { height: 74px; border-width: 1.5px; border-radius: 14px; transition: background .15s, border-color .15s, color .15s, transform .12s; }
.cf .cf-day small { font-size: 11px; font-weight: 700; letter-spacing: .06em; }
.cf .cf-day b { font-size: 21px; }
.cf .cf-day:not(:disabled):hover, .cf .cf-time:not(:disabled):hover { border-color: var(--c-teal2); }
.cf .cf-day[aria-pressed="true"], .cf .cf-time[aria-pressed="true"] { border-color: var(--c-teal); background: var(--c-teal); color: #fff; }
.cf .cf-day[aria-pressed="true"] small { color: var(--c-on-teal2); }
.cf .cf-time { height: 46px; border-width: 1.5px; border-radius: 12px; font-weight: 700; color: var(--c-teal); transition: background .15s, border-color .15s, color .15s, transform .12s; }
.cf .cf-time:disabled { color: var(--c-ink3); background: var(--c-tint); border-color: var(--c-tint); }

/* who they talk with: the Care Manager's real headshot, the one photo on the page */
.cf-meet { display: flex; align-items: center; gap: 12px; margin: 10px 0 18px; padding: 12px; background: var(--c-cream); border-radius: 14px; }
.cf-meet img, .cf-meet .ini { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; border: 2px solid var(--c-surface); }
.cf-meet .ini { display: grid; place-items: center; background: var(--c-teal); color: var(--c-on-teal); font-weight: 700; font-size: 16px; }
.cf-meet b { display: block; font-size: 15px; }
.cf-meet small { font-size: 13px; color: var(--c-ink2); }

/* buttons */
.cf-acts { display: flex; gap: 12px; align-items: center; margin-top: 28px; flex-wrap: wrap; }
.cf-btn { height: 44px; padding: 0 18px; border-radius: 12px; border: 1.5px solid var(--c-line2); background: var(--c-surface); color: var(--c-ink); font-size: 15px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; cursor: pointer; transition: background .15s, border-color .15s; }
.cf-btn svg { width: 18px; height: 18px; }
.cf-btn:hover { border-color: var(--c-teal2); }
.cf-btn.primary { background: var(--c-teal); border-color: var(--c-teal); color: #fff; }
.cf-btn.primary:hover { background: var(--c-teal2); border-color: var(--c-teal2); }
.cf-btn.quiet { border-color: transparent; color: var(--c-teal); padding: 0 8px; background: none; }
.cf-btn.big { height: 54px; border-radius: 14px; font-size: 17px; flex: 1; }
.cf-btn.big .arr { display: inline-block; transition: transform .2s; }
.cf-btn.big:hover .arr { transform: translateX(4px); }
@media (min-width: 900px) { .cf-btn.big { flex: none; min-width: 240px; margin-left: auto; } }
.cf-btn:disabled { opacity: .6; cursor: default; }
.cf-btn.primary:disabled { opacity: .85; }
.cf-spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.35); border-top-color: #fff; animation: cf-spin .8s linear infinite; }
@keyframes cf-spin { to { transform: rotate(360deg); } }
.cf-err { color: var(--c-coral); font-size: 14px; font-weight: 700; margin: 14px 0 0; min-height: 1px; }
.cf-err:empty { margin: 0; }
.cf-err:not(:empty) { animation: cf-shake .35s ease; }
.cf-fine { font-size: 13px; color: var(--c-ink3); margin: 16px 0 0; }
.cf-fine b { color: var(--c-ink2); }
.cf .cf-link { background: none; border: 0; padding: 0; color: var(--c-teal); font-weight: 700; cursor: pointer; font-size: 14px; }
.cf .cf-link:hover { text-decoration: underline; }
.cf-trust { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--c-line); font-size: 13px; color: var(--c-ink2); font-weight: 600; }
.cf-trust span { display: inline-flex; align-items: center; gap: 6px; }
.cf-trust svg { width: 15px; height: 15px; color: var(--c-gold); }

/* the address */
.cf-ac-list { list-style: none; margin: 6px 0 0; padding: 0; border: 1px solid var(--c-line2); border-radius: 12px; box-shadow: var(--c-shadow); background: var(--c-surface); overflow: hidden; }
.cf-ac-list button { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--c-line); padding: 12px 14px; cursor: pointer; }
.cf-ac-list li:last-child button { border-bottom: 0; }
.cf-ac-list button:hover, .cf-ac-list button:focus-visible { background: var(--c-teal-soft); }
.cf-ac-list .pin { flex: none; color: var(--c-coral); }
.cf-ac-list .pin svg { width: 18px; height: 18px; display: block; }
.cf-ac-list b { display: block; font-size: 15px; font-weight: 600; }
.cf-ac-list small { display: block; font-size: 13px; color: var(--c-ink3); }
.cf-ac-list .none { padding: 12px 14px; font-size: 14px; color: var(--c-ink2); }
.cf-ac-foot { padding: 8px 14px; font-size: 11px; color: var(--c-ink3); background: var(--c-tint); }
.cf-ver { display: flex; align-items: flex-start; gap: 12px; padding: 14px; background: var(--c-ok-soft); border-radius: 14px; margin-top: 4px; }
.cf-ck { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--c-ok); color: #fff; display: grid; place-items: center; }
.cf-ck svg { width: 14px; height: 14px; }
.cf-ver .tx { flex: 1; min-width: 0; }
.cf-ver b { display: block; font-size: 16px; font-weight: 600; }
.cf-ver small { display: block; color: var(--c-ink2); font-size: 13px; margin-top: 2px; }
.cf-area { font-size: 13px; margin: 10px 0 0; color: var(--c-ok); font-weight: 700; }
.cf-area.out { color: var(--c-warn); }

/* Done, and the booking on the email link */
.cf-done-top { position: relative; overflow: hidden; background: var(--c-teal); color: var(--c-on-teal); border-radius: 18px; padding: 22px 20px; margin: 0 0 18px; }
.cf-done-top .dm { position: relative; width: 44px; height: 44px; border-radius: 50%; background: var(--c-gold); color: #fff; display: grid; place-items: center; margin-bottom: 12px; }
.cf-done-top .dm svg { width: 22px; height: 22px; }
.cf-done-top .cf-q { color: var(--c-on-teal); font-size: 28px; line-height: 1.1; }
.cf-done-top .cf-sub { margin: 0; color: var(--c-on-teal2); font-size: 14px; }
.cf-done-top .burst { position: absolute; left: 42px; top: 44px; width: 0; height: 0; }
.cf-done-top .burst b { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--c-gold); opacity: 0; }
.cf-done-top .burst b:nth-child(3n) { background: var(--c-cream); }
.cf-done-top .burst b:nth-child(4n) { background: var(--c-coral); }
.cf-hero { border: 1.5px solid var(--c-gold); border-radius: 16px; padding: 16px 18px; margin: 0 0 8px; background: var(--c-gold-soft); }
.cf-hero .when { font-family: 'Newsreader', Georgia, serif; font-size: 25px; line-height: 1.15; margin: 4px 0 6px; color: var(--c-teal); }
.cf-hero p { margin: 0; color: var(--c-ink2); font-size: 14px; }
.cf-hero p:empty { display: none; }
.cf-hero .cf-label { color: var(--c-gold-ink); }
.cf-hero .count { display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--c-teal); background: var(--c-surface); border-radius: 999px; padding: 2px 8px; vertical-align: 1px; }
.cf-label { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--c-ink3); }
.cf-ok { display: flex; gap: 8px; align-items: flex-start; color: var(--c-ok); font-weight: 700; font-size: 14px; margin: 12px 0 0; }
.cf-sum { margin: 20px 0 0; }
.cf-sum div { display: flex; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--c-line); font-size: 14px; }
.cf-sum dt { width: 100px; flex: none; color: var(--c-ink3); }
.cf-sum dd { margin: 0; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cf-wait { color: var(--c-ink3); font-size: 14px; margin: 12px 0 0; }

/* motion */
@keyframes cf-inR { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes cf-inL { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes cf-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes cf-pop { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes cf-ckin { 0% { transform: scale(0); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes cf-wob { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-10deg) scale(1.1); } 60% { transform: rotate(6deg); } }
@keyframes cf-draw { to { stroke-dashoffset: 0; } }
@keyframes cf-burst { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(1); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-70px) scale(.4); } }
@keyframes cf-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.cf-form.fwd > * { animation: cf-inR .42s var(--c-ease) both; }
.cf-form.back > * { animation: cf-inL .42s var(--c-ease) both; }
.cf-form.fwd > :nth-child(2), .cf-form.back > :nth-child(2) { animation-delay: .04s; }
.cf-form.fwd > :nth-child(3), .cf-form.back > :nth-child(3) { animation-delay: .08s; }
.cf-form.fwd > :nth-child(4), .cf-form.back > :nth-child(4) { animation-delay: .12s; }
.cf-form.fwd > :nth-child(n+5), .cf-form.back > :nth-child(n+5) { animation-delay: .16s; }
.cf-choice.just .ic { animation: cf-wob .5s ease; }
.cf-choice.just .ck { animation: cf-ckin .35s var(--c-ease); }
.cf-chip:active, .cf .cf-day:not(:disabled):active, .cf .cf-time:not(:disabled):active { transform: scale(.95); }
.cf-chip.just, .cf .cf-day.just, .cf .cf-time.just { animation: cf-pop .3s ease; }
.cf-days.rip .cf-day, .cf-times.rip .cf-time, .cf .cf-ac-list li { animation: cf-rise .35s var(--c-ease) both; animation-delay: calc(var(--i, 0) * 30ms); }
.cf-ver { animation: cf-rise .4s var(--c-ease) both; }
.cf-ver .cf-ck { animation: cf-ckin .45s .1s var(--c-ease) both; }
.cf-form > .cf-done-top { animation: cf-rise .5s var(--c-ease) both; }
.cf-done-top .dm.ck svg path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: cf-draw .5s .35s ease forwards; }
.cf-done-top .burst b { animation: cf-burst .9s .3s ease-out both; }
.cf-form > .cf-hero { animation: cf-rise .5s .15s var(--c-ease) both; }
.cf-sum div { animation: cf-rise .4s var(--c-ease) both; }
.cf-sum div:nth-child(1) { animation-delay: .3s; } .cf-sum div:nth-child(2) { animation-delay: .38s; } .cf-sum div:nth-child(3) { animation-delay: .46s; } .cf-sum div:nth-child(4) { animation-delay: .54s; }
@media (prefers-reduced-motion: reduce) {
  .cf *, .cf *::before, .cf *::after { animation: none !important; transition: none !important; }
  .cf-done-top .dm.ck svg path { stroke-dashoffset: 0; }
  .cf-done-top .burst { display: none; }
}

/* ---------- office: the inquiry record, Clients rows, Schedule, Settings › Consultations ---------- */
.ci-card { border-radius: 12px; box-shadow: var(--shadow); background: var(--surface); padding: 20px; margin: 0 0 28px; }
.ci-card .when { font-family: var(--f-display); font-size: 24px; line-height: 1.15; margin: 4px 0; }
.ci-card p { margin: 0; color: var(--ink-2); font-size: 14px; }
.ci-card .acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.ci-lbl { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.ci-cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; }
@media (max-width: 1000px) { .ci-cols { grid-template-columns: 1fr; gap: 0; } }
.ci-sec { margin: 0 0 32px; }
.ci-sec h2 { font-size: 17px; font-weight: 700; font-family: var(--f-ui); margin: 0 0 8px; }
.ci-kv { border-top: 1px solid var(--line); margin: 0; }
.ci-kv > div { display: flex; gap: 16px; min-height: 44px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.ci-kv dt { width: 150px; flex: none; color: var(--ink-3); }
.ci-kv dd { margin: 0; flex: 1; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 700px) { .ci-kv > div { flex-direction: column; align-items: flex-start; gap: 2px; } .ci-kv dt { width: auto; font-size: 13px; } }
.ci-rows { border-top: 1px solid var(--line); }
.ci-row { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.ci-row .t { flex: 1; min-width: 0; }
.ci-row .t b { display: block; font-weight: 600; }
.ci-row .t small { display: block; font-size: 13px; color: var(--ink-3); }
.ci-row .end { flex: none; font-size: 13px; color: var(--ink-3); text-align: right; }
.ci-new { margin-left: 8px; font-size: 11px; font-weight: 700; color: var(--teal); background: var(--wash); border-radius: 999px; padding: 2px 7px; vertical-align: 2px; }
.ci-head-acts { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 20px; }
.ci-sheet .cf-days, .ci-sheet .cf-times { --c-line2: #D5D2CB; --c-teal: #184E49; --c-tint: #F6F5F2; --c-ink3: #6F7977; --c-surface: #fff; }
.ci-reasons { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 16px; }
/* a consultation on the Schedule: a dashed gold outline, labelled Consultation; never a visit */
.cs-cons { margin: 0 0 16px; }
.cs-cons h3 { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 8px; font-family: var(--f-ui); }
.cs-ev { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; border: 1.5px dashed var(--gold); border-radius: 10px; background: var(--surface); padding: 10px 12px; margin: 0 0 8px; cursor: pointer; font: inherit; color: var(--ink); }
.cs-ev b { display: block; color: #7a5f3d; font-size: 14px; }
.cs-ev small { display: block; color: var(--ink-3); font-size: 13px; }
.cs-ev .tm { flex: none; font-weight: 700; font-size: 14px; min-width: 64px; }
.co-tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.co-tbl th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding: 0 12px 8px 0; border-bottom: 1px solid var(--line); }
.co-tbl td { height: 52px; padding: 6px 12px 6px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
@media (max-width: 700px) { .co-tbl .hide { display: none; } }
.co-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.co-row .t { flex: 1; min-width: 0; }
.co-row .t b { display: block; font-weight: 600; }
.co-row .t small { display: block; color: var(--ink-3); font-size: 13px; }
.co-sw { width: 40px; height: 24px; border-radius: 999px; background: var(--line-2); position: relative; flex: none; border: 0; cursor: pointer; }
.co-sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .15s; }
.co-sw[aria-checked="true"] { background: var(--teal); }
.co-sw[aria-checked="true"]::after { left: 19px; }
@media (prefers-reduced-motion: reduce) { .co-sw::after { transition: none; } }
.co-steps { display: inline-flex; align-items: center; gap: 6px; }
.co-steps button { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface); cursor: pointer; font-weight: 700; }
.co-mins { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; max-height: 220px; overflow-y: auto; }