/* =============================================================
   BOOK AN APPOINTMENT (v2) — Figma node 10247:88
   ============================================================= */

.appointment-v2 {
  --appt-blue: #273775;
  --appt-coral: #fc5d61;
  --appt-text: #3d3d3d;
  --appt-border: #e5e7eb;
  --appt-placeholder: #9a9a9f;
  --appt-ease: cubic-bezier(.22, .61, .36, 1);
  font-family: Poppins, sans-serif;
}

.appt {
  position: relative;
  overflow: hidden;
  padding: 40px 0 45px;
  background: linear-gradient(-79.36deg, #eff2ff 7.556%, #fff 97.762%);
}

.appt-grid {
  display: grid;
  grid-template-columns: minmax(0, 583fr) minmax(0, 626fr);
  gap: 31px;
  align-items: start;
}

/* ---------- Left column ---------- */
.appt-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.appt-tagline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  border-radius: 9.069px;
  background: rgba(39, 55, 117, .1);
  color: var(--appt-blue);
  font-size: 12px;
  font-weight: 700;
  line-height: 9.976px;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

.appt-heading {
  max-width: 489px;
  margin: 0;
  padding: 2.035px 0 2.8px;
  color: var(--appt-blue);
  font-size: 42px;
  font-weight: 700;
  line-height: 50px;
  letter-spacing: -1.04px;
}

.appt-heading .accent,
.appt-card-title .accent {
  color: var(--appt-coral);
}

.appt-divider {
  display: block;
  width: 76px;
  height: 4px;
  border-radius: 2px;
  background: var(--appt-coral);
  transform-origin: left center;
}

.appt-lead {
  max-width: 508px;
  color: var(--appt-text);
  font-size: 16px;
  line-height: 25px;
}

.appointment-v2 .appt-lead p {
  margin: 0 0 25px;
  color: var(--appt-text);
  font-size: inherit;
  line-height: 25px;
}

.appointment-v2 .appt-lead p:last-child {
  margin-bottom: 0;
}

.appt-benefits {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 396px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.appt-benefit {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 15px 17px;
  border: 1px solid var(--appt-border);
  border-radius: 16px;
  background: #fff;
  transition: transform .3s var(--appt-ease), box-shadow .3s var(--appt-ease), border-color .3s ease;
}

.appt-benefit-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 72px;
  background: #fff;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25));
  transition: transform .4s var(--appt-ease);
}

.appt-benefit-icon img {
  display: block;
  flex-shrink: 0;
}

.appt-benefit-text {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  max-width: 302px;
}

.appt-benefit-text strong {
  padding: 1px 0;
  color: var(--appt-blue);
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
}

.appt-benefit-text span {
  padding-bottom: 1px;
  color: var(--appt-text);
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
}

/* ---------- Form card ---------- */
.appt-right {
  display: flex;
  justify-content: flex-end;
}

.appt-card {
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  padding: 40px;
  border-radius: 24px;
  background: #fff;
}

/* Figma's FormCard shadow layer, laid exactly where the design places it. */
.appt-card-shadow {
  position: absolute;
  top: -2.96%;
  left: -3.99%;
  display: block;
  width: 107.98%;
  max-width: none;
  height: 106.16%;
  pointer-events: none;
}

.appt-card-head {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.appt-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px 9px;
  border: 1px solid rgba(252, 93, 97, .2);
  border-radius: 30px;
  background: rgba(252, 93, 97, .1);
  color: var(--appt-blue);
  font-size: 13px;
  font-weight: 600;
  line-height: normal;
  white-space: nowrap;
}

.appt-pill img {
  display: block;
  flex-shrink: 0;
  transform-origin: 50% 20%;
}

.appointment-v2 .appt-card-title {
  margin: 0;
  text-transform: none;
  color: var(--appt-blue);
  font-size: 30px;
  font-weight: 700;
  line-height: 36px;
}

.appointment-v2 .appt-card-sub {
  max-width: 420px;
  margin: 0;
  color: var(--appt-text);
  font-size: 16px;
  line-height: 24px;
}

.appt-form {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.appt-row {
  display: flex;
  gap: 16px;
}

.appt-row > .appt-field {
  flex: 1 1 0;
  min-width: 0;
}

.appt-field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.appt-field > label {
  color: var(--appt-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  transition: color .2s ease;
}

.appt-field:focus-within > label {
  color: var(--appt-blue);
}

.appt-input {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 11px;
  border: 1px solid var(--appt-border);
  border-radius: 10px;
  background: #fff;
  transition: border-color .2s ease, box-shadow .25s ease;
}

.appt-input-icon {
  display: block;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  transition: transform .3s var(--appt-ease);
}

.appt-input input,
.appt-input select {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--appt-blue);
  font: 400 16px/20px Poppins, sans-serif;
}

.appt-input input::placeholder,
.appt-textarea textarea::placeholder {
  color: var(--appt-placeholder);
  opacity: 1;
}

.appt-input:hover,
.appt-textarea:hover {
  border-color: #c9cfe3;
}

.appt-input:focus-within,
.appt-textarea:focus-within {
  border-color: var(--appt-blue);
  box-shadow: 0 0 0 4px rgba(39, 55, 117, .08);
}

.appt-input:focus-within .appt-input-icon {
  transform: scale(1.12);
}

/* Practice Size uses the home booking form's dropdown (style-v2.css .field-select):
   script-v2.js swaps the native picker for the styled .field-select-list and the
   chevron sits in its pink chip. The field keeps its own flex row, so the home
   rules that absolutely place the chevron and pad the select are undone here. */
.appt-input.field-select select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  align-self: stretch;
  width: auto;
  padding: 0;
  cursor: pointer;
}

.appt-input.field-select select:invalid {
  color: var(--appt-placeholder);
}

.appt-input .field-select-chevron {
  position: static;
  translate: none;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-right: -3px;
}

.appt-input .field-select-list {
  top: calc(100% + 8px);
}

/* Each field keeps a stacking context from its entrance animation, so the open
   list would sit under the fields after it; lift the dropdown's field above them. */
.appt-field:has(.field-select) {
  z-index: 3;
}

.appt-field--message {
  padding-bottom: 7px;
}

.appt-textarea {
  position: relative;
  display: flex;
  padding: 13px 17px 53px;
  border: 1px solid var(--appt-border);
  border-radius: 10px;
  background: #fff;
  transition: border-color .2s ease, box-shadow .25s ease;
}

.appt-textarea textarea {
  flex: 1 1 0;
  min-width: 0;
  height: 20px;
  min-height: 20px;
  padding: 0;
  border: none;
  outline: none;
  resize: none;
  background: none;
  color: var(--appt-blue);
  font: 400 16px/20px Poppins, sans-serif;
  overflow: hidden;
}

.appt-textarea-resize {
  position: absolute;
  right: 11px;
  bottom: 4px;
  display: block;
  pointer-events: none;
}

/* ---------- Submit ---------- */
.appt-submit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
  padding: 14px 24px;
  overflow: hidden;
  border: none;
  border-radius: 70px;
  background: linear-gradient(to right, #273775 29.808%, #fc5d61);
  color: #fff;
  font: 600 16px/24px Poppins, sans-serif;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  isolation: isolate;
  transition: transform .3s var(--appt-ease), box-shadow .3s var(--appt-ease);
}

.appt-submit img {
  position: relative;
  z-index: 1;
  display: block;
  flex-shrink: 0;
}

.appt-submit-label {
  position: relative;
  z-index: 1;
  padding-left: 8px;
}

/* Light sweep that crosses the button on hover / focus. */
.appt-submit::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 -40%;
  z-index: 0;
  width: 35%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: skewX(-20deg) translateX(0);
  pointer-events: none;
}

.appt-submit:hover,
.appt-submit:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -8px rgba(39, 55, 117, .45), 0 6px 14px -6px rgba(252, 93, 97, .4);
}

.appt-submit:hover::before,
.appt-submit:focus-visible::before {
  animation: appt-sweep .9s var(--appt-ease);
}

.appt-submit:hover .appt-submit-arrow,
.appt-submit:focus-visible .appt-submit-arrow {
  animation: appt-nudge .9s ease-in-out infinite;
}

.appt-submit:active {
  transform: translateY(0) scale(.99);
}

.appt-submit:disabled {
  cursor: default;
  transform: none;
  box-shadow: none;
}

/* Sending: a spinner takes the calendar's place, the arrow hides and a light
   band keeps sweeping across, so the visitor can see the request is on its way. */
.appt-submit-spinner {
  position: relative;
  z-index: 1;
  display: none;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  border: 2.5px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: appt-spin .7s linear infinite;
}

.appt-submit.is-loading .appt-submit-icon,
.appt-submit.is-loading .appt-submit-arrow {
  display: none;
}

.appt-submit.is-loading .appt-submit-spinner {
  display: block;
}

.appt-submit.is-loading::before {
  animation: appt-sweep 1.2s var(--appt-ease) infinite;
}

/* Sent: green-tinted confirmation for a moment before the button resets. */
.appt-submit.is-success {
  background: linear-gradient(to right, #273775 29.808%, #12a150);
}

.appt-submit.is-success .appt-submit-arrow {
  display: none;
}

.appt-submit.is-success .appt-submit-icon {
  animation: appt-pop .4s var(--appt-ease);
}

/* ---------- Terms ---------- */
.appt-terms {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.appt-terms input {
  position: absolute;
  top: 1px;
  left: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.appt-terms label {
  display: flex;
  flex: 1 1 100%;
  align-items: flex-start;
  gap: 10px;
  color: var(--appt-placeholder);
  font-size: 12px;
  line-height: 18px;
  cursor: pointer;
}

.appt-check {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  padding: 1px;
  overflow: hidden;
  border: 1px solid var(--appt-coral);
  border-radius: 4px;
  background: var(--appt-coral);
  transition: background-color .2s ease, border-color .2s ease;
}

.appt-check img {
  display: block;
  transition: transform .25s var(--appt-ease), opacity .2s ease;
}

.appt-terms input:not(:checked) + label .appt-check {
  border-color: #c9cfe3;
  background: #fff;
}

.appt-terms input:not(:checked) + label .appt-check img {
  opacity: 0;
  transform: scale(.4);
}

.appt-terms input:focus-visible + label .appt-check {
  box-shadow: 0 0 0 3px rgba(252, 93, 97, .25);
}

/* ---------- Validation / status ---------- */
.appt-form-status {
  margin: -8px 0 0;
  color: var(--appt-blue);
  font-size: 14px;
  line-height: 20px;
}

.appt-form-status.is-success {
  color: #12a150;
  font-weight: 500;
}

.appt-form-status:empty {
  display: none;
}

.appt-form-status:focus {
  outline: none;
}

.appt-field-error {
  display: block;
  color: #b42318;
  font-size: 12px;
  line-height: 1.5;
}

.appt-field-error[hidden] {
  display: none;
}

.appt-terms .appt-field-error {
  flex-basis: 100%;
  margin-top: 6px;
}

.appt-input:has([aria-invalid="true"]),
.appt-textarea:has([aria-invalid="true"]) {
  border-color: #b42318;
  animation: appt-shake .35s ease;
}

/* =============================================================
   Motion
   ============================================================= */

/* Entrance: left column copy rises in, one item after another. */
.appt-anim {
  animation: appt-rise .7s var(--appt-ease) both;
  animation-delay: calc(var(--d, 0) * 90ms + 100ms);
}

.appt-divider.appt-anim {
  animation-name: appt-grow;
}

/* The card slides in from the right, then its fields cascade in. */
.appt-anim--card {
  animation-name: appt-card-in;
  animation-duration: .85s;
}

.appt-card-head > * {
  animation: appt-rise .6s var(--appt-ease) both;
}

.appt-card-head > :nth-child(1) { animation-delay: .45s; }
.appt-card-head > :nth-child(2) { animation-delay: .52s; }
.appt-card-head > :nth-child(3) { animation-delay: .59s; }

.appt-field-anim {
  animation: appt-rise .6s var(--appt-ease) both;
  animation-delay: calc(var(--i, 0) * 60ms + .66s);
}

/* The calendar in the pill gives a small ring every few seconds. */
.appt-pill img {
  animation: appt-ring 4s ease-in-out 1.6s infinite;
}

/* Benefit cards lift on hover and their icon turns. */
.appt-benefit:hover {
  border-color: rgba(39, 55, 117, .18);
  box-shadow: 0 14px 30px -14px rgba(39, 55, 117, .3);
  transform: translateY(-3px);
}

.appt-benefit:hover .appt-benefit-icon {
  transform: scale(1.08) rotate(-8deg);
}

@keyframes appt-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

@keyframes appt-grow {
  from { opacity: 0; transform: scaleX(0); }
  to   { opacity: 1; transform: scaleX(1); }
}

@keyframes appt-card-in {
  from { opacity: 0; transform: translateX(40px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

@keyframes appt-sweep {
  from { transform: skewX(-20deg) translateX(0); }
  to   { transform: skewX(-20deg) translateX(480%); }
}

@keyframes appt-nudge {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(4px); }
}

@keyframes appt-ring {
  0%, 82%, 100% { transform: rotate(0); }
  85% { transform: rotate(-14deg); }
  88% { transform: rotate(12deg); }
  91% { transform: rotate(-8deg); }
  94% { transform: rotate(5deg); }
}

@keyframes appt-spin {
  to { transform: rotate(360deg); }
}

@keyframes appt-pop {
  0% { transform: scale(.4); }
  70% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

@keyframes appt-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
  .appointment-v2 *,
  .appointment-v2 *::before {
    animation: none !important;
    transition: none !important;
  }

  /* The spinner is feedback, not decoration: keep it turning, slowly. */
  .appointment-v2 .appt-submit-spinner {
    animation: appt-spin 1.6s linear infinite !important;
  }
}

/* =============================================================
   Responsive
   ============================================================= */
@media (max-width: 1199px) {
  .appt-heading {
    font-size: 38px;
    line-height: 46px;
  }

  .appt-card {
    padding: 32px;
  }
}

@media (max-width: 991px) {
  .appt {
    padding: 40px 0 56px;
  }

  .appt-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .appt-heading,
  .appt-lead {
    max-width: 640px;
  }

  .appt-benefits {
    max-width: 640px;
  }

  .appt-benefit-text {
    max-width: none;
  }

  .appt-right {
    justify-content: stretch;
  }

  .appt-anim--card {
    animation-name: appt-rise;
  }
}

@media (max-width: 575px) {
  .appt {
    padding: 32px 0 48px;
  }

  .appt-tagline {
    white-space: normal;
    line-height: 14px;
    text-align: left;
  }

  .appt-heading {
    font-size: 30px;
    line-height: 38px;
    letter-spacing: -.6px;
  }

  .appt-lead {
    font-size: 15px;
    line-height: 24px;
  }

  .appointment-v2 .appt-lead p {
    margin-bottom: 16px;
    line-height: 24px;
  }

  .appt-benefit {
    padding: 14px;
    gap: 14px;
  }

  .appt-card {
    padding: 24px 18px;
    border-radius: 20px;
  }

  .appointment-v2 .appt-card-title {
    font-size: 26px;
    line-height: 32px;
  }

  .appointment-v2 .appt-card-sub {
    font-size: 15px;
  }

  .appt-row {
    flex-direction: column;
    gap: 20px;
  }

  .appt-submit {
    gap: 12px;
    padding: 14px 18px;
  }
}

/* =============================================================
   OUR MEDICAL BILLING & RCM SERVICES — Figma node 10252:1080
   The diagram is Figma's 1240 x 728 canvas, positioned as designed;
   appointment-v2.js scales it to the content width (--svc-s), and
   at 1080px and below it stacks into a hub + card grid.
   ============================================================= */

.svc {
  --svc-ease: cubic-bezier(.22, .61, .36, 1);
  position: relative;
  overflow: hidden;
  padding: 60px 0;
  background: #f1f4fe; /* #f7f8fc under the Figma #eff2ff overlay at 70% */
}

.svc-deco-ring {
  position: absolute;
  top: 120px;
  left: -140px;
  box-sizing: border-box;
  width: 432px;
  height: 432px;
  border: 56px solid rgba(39, 55, 117, .05);
  border-radius: 216px;
  pointer-events: none;
  animation: svc-drift 14s ease-in-out infinite;
}

.svc-deco-dot {
  position: absolute;
  right: -90px;
  bottom: -90px;
  width: 260px;
  height: 260px;
  border-radius: 130px;
  background: #ffedee;
  pointer-events: none;
  animation: svc-breathe 7s ease-in-out infinite;
}

.svc .container-page {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 56px;
}

/* ---------- Heading ---------- */
.svc-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.appointment-v2 .svc-tagline {
  text-transform: none;
}

.appointment-v2 .svc-title {
  margin: 20px 0 0;
  color: #273775;
  font-size: 32px;
  font-weight: 700;
  line-height: 35px;
  letter-spacing: -1.4px;
  text-transform: none;
}

.svc-title .accent {
  color: #fc5d61;
}

.appointment-v2 .svc-lead {
  width: 718px;
  max-width: 100%;
  margin: 15.445px 0 0;
  color: #3d3d3d;
  font-size: 16px;
  line-height: 25px;
}

/* ---------- Diagram canvas ---------- */
.svc-stage {
  --svc-s: 1;
  position: relative;
  height: calc(728px * var(--svc-s));
}

.svc-canvas {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1240px;
  height: 728px;
  transform: translateX(-50%) scale(var(--svc-s));
  transform-origin: 50% 0;
}

.svc-orbit {
  position: absolute;
  top: 47.55px;
  left: 50%;
  box-sizing: border-box;
  width: 642px;
  height: 642px;
  margin-left: -321px;
  border: 1px dashed #d3d8e8;
  border-radius: 385px;
  animation: svc-spin 90s linear infinite;
}

.svc-links {
  position: absolute;
  top: 8px;
  left: 0;
  width: 1240px;
  height: 720px;
  overflow: hidden;
  pointer-events: none;
}

.svc-links-lines,
.svc-links-ends,
.svc-links-center {
  position: absolute;
}

.svc-links-lines {
  inset: 10% 32.26%;
  display: block;
  width: 35.48%;
  max-width: none;
  height: 80%;
}

.svc-links-ends {
  inset: 9.03% 31.69%;
}

.svc-links-center {
  inset: 9.03% 39.92% 26.11% 39.92%;
}

.svc-links-ends img,
.svc-links-center img {
  position: absolute;
  display: block;
  max-width: none;
}

.svc-links-ends img {
  inset: -0.25% -0.33%;
  width: 100.66%;
  height: 100.5%;
}

.svc-links-center img {
  inset: -0.32% 0 0 0;
  width: 100%;
  height: 100.32%;
}

/* Hub: Figma places it at 450, 198 (340 x 340); everything inside is relative to it. */
.svc-hub {
  position: absolute;
  top: 198px;
  left: 450px;
  width: 340px;
  height: 340px;
}

.svc-hub-glow,
.svc-hub-ring,
.svc-hub-core,
.svc-hub-cycle {
  position: absolute;
  box-sizing: border-box;
  border-radius: 50%;
}

.svc-hub-glow {
  inset: 0;
  background: rgba(39, 55, 117, .05);
  animation: svc-pulse 3.6s ease-in-out infinite;
}

.svc-hub-ring {
  top: 30px;
  left: 30px;
  width: 282px;
  height: 282px;
  border: 1px solid #e1e5f0;
  background: #fff;
}

.svc-hub-core {
  top: 60px;
  left: 60px;
  width: 220px;
  height: 220px;
  background: #f3f5fb;
}

.svc-hub-cycle {
  top: 60px;
  left: 60px;
  display: block;
  width: 220px;
  height: 220px;
  border-radius: 0;
  animation: svc-float 5s ease-in-out infinite;
}

.svc-step {
  position: absolute;
  box-sizing: border-box;
  padding: 4px 0 5px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  line-height: normal;
  text-align: center;
  white-space: nowrap;
}

.svc-step--intake,
.svc-step--payment {
  left: 134px;
  width: 72px;
  color: #fff;
}

.svc-step--intake { top: 16px; background: #273775; }
.svc-step--payment { top: 298px; background: #fc5d61; }

.svc-step--coding,
.svc-step--claims {
  top: 156px;
  width: 74px;
  padding-right: 1px;
  padding-left: 1px;
  border: 1px solid #e1e5f0;
  background: #fff;
  color: #273775;
}

.svc-step--coding { left: 280px; }
.svc-step--claims { left: -12px; }

/* ---------- Service cards ---------- */
.svc-cards {
  margin: 0;
  padding: 0;
  list-style: none;
}

.svc-card {
  --fx: 0px;
  --fy: 0px;
  position: absolute;
  display: flex;
  align-items: center;
  gap: 16px;
  box-sizing: border-box;
  width: 400px;
  height: 124px;
  border: 1px solid #e1e5f0;
  border-radius: 62px;
  background: #fff;
  transition: transform .35s var(--svc-ease), box-shadow .35s var(--svc-ease), border-color .3s ease;
}

.svc-card--left { padding: 0 14px 0 18px; }
.svc-card--right { padding: 0 18px 0 14px; }

/* Figma positions; --fx / --fy point back toward the hub for the fly-out. */
.svc-card--01 { top: 18px;  left: 110px; --fx: 93px;   --fy: 85px; }
.svc-card--02 { top: 18px;  left: 730px; --fx: -93px;  --fy: 85px; }
.svc-card--03 { top: 210px; left: 840px; --fx: -126px; --fy: 28px; }
.svc-card--04 { top: 402px; left: 840px; --fx: -126px; --fy: -30px; }
.svc-card--05 { top: 594px; left: 730px; --fx: -93px;  --fy: -88px; }
.svc-card--06 { top: 594px; left: 110px; --fx: 93px;   --fy: -88px; }
.svc-card--07 { top: 402px; left: 0;     --fx: 126px;  --fy: -30px; }
.svc-card--08 { top: 210px; left: 0;     --fx: 126px;  --fy: 28px; }

.svc-num {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 22px;
  background: #273775;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: normal;
  transition: background-color .3s ease, transform .35s var(--svc-ease);
}

.svc-num--sm {
  width: 34px;
  height: 34px;
  border-radius: 17px;
  font-size: 12px;
}

.svc-card-text {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 1.75px;
  min-width: 0;
}

.svc-card--right .svc-card-text {
  gap: 3.75px;
}

.svc-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.svc-card-text strong {
  padding: 1px 0;
  color: #273775;
  font-size: 18px;
  font-weight: 700;
  line-height: normal;
}

.svc-card--right .svc-card-text strong {
  white-space: nowrap;
}

.svc-card-text > span:last-child {
  color: #3d3d3d;
  font-size: 12px;
  font-weight: 400;
  line-height: 18.75px;
}

.svc-card--02 .svc-card-text > span:last-child {
  width: 250px;
  max-width: 100%;
}

.svc-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 90px;
  height: 90px;
  padding: 1px;
  border: 1px solid #e5e7eb;
  border-radius: 45px;
  background: #eff2ff;
  transition: background-color .3s ease, border-color .3s ease;
}

.svc-icon img {
  display: block;
  flex-shrink: 0;
  transition: transform .45s var(--svc-ease);
}

.svc-card:hover {
  z-index: 2;
  border-color: rgba(39, 55, 117, .22);
  box-shadow: 0 18px 36px -18px rgba(39, 55, 117, .35);
  transform: translateY(-4px);
}

.svc-card:hover .svc-num {
  background: #fc5d61;
  transform: scale(1.08);
}

.svc-card:hover .svc-icon {
  border-color: rgba(252, 93, 97, .3);
  background: #fff;
}

.svc-card:hover .svc-icon img {
  transform: scale(1.12) rotate(-8deg);
}

/* ---------- CTA ---------- */
.svc-cta {
  display: flex;
  justify-content: center;
}

.appointment-v2 .svc-cta-btn {
  display: inline-flex;
  width: auto;
  color: #fff;
  text-decoration: none;
}

.appointment-v2 .svc-cta-btn:hover,
.appointment-v2 .svc-cta-btn:focus-visible {
  color: #fff;
}

/* ---------- Scroll-in motion ----------
   appointment-v2.js adds .is-armed (hidden start) and then .is-inview when the
   section scrolls in. Without JS, or with reduced motion, nothing is hidden.
   Entrances use translate / scale / rotate so hover can keep using transform. */
.svc.is-armed .svc-head > *,
.svc.is-armed .svc-cta {
  opacity: 0;
  translate: 0 24px;
  transition: opacity .7s var(--svc-ease), translate .7s var(--svc-ease);
}

.svc.is-armed .svc-head > :nth-child(2) { transition-delay: .08s; }
.svc.is-armed .svc-head > :nth-child(3) { transition-delay: .16s; }
.svc.is-armed .svc-cta { transition-delay: 1.5s; }

.svc.is-armed .svc-orbit {
  opacity: 0;
  scale: .85;
  transition: opacity .9s ease .2s, scale 1.1s var(--svc-ease) .2s;
}

.svc.is-armed .svc-hub {
  opacity: 0;
  scale: .6;
  transition: opacity .6s ease .25s, scale .9s cubic-bezier(.34, 1.56, .64, 1) .25s;
}

.svc.is-armed .svc-hub-cycle {
  rotate: -120deg;
  transition: rotate 1.2s var(--svc-ease) .35s;
}

.svc.is-armed .svc-step {
  opacity: 0;
  scale: .5;
  transition: opacity .4s ease, scale .5s cubic-bezier(.34, 1.56, .64, 1);
}

.svc.is-armed .svc-step--intake  { transition-delay: .8s; }
.svc.is-armed .svc-step--coding  { transition-delay: .9s; }
.svc.is-armed .svc-step--payment { transition-delay: 1s; }
.svc.is-armed .svc-step--claims  { transition-delay: 1.1s; }

/* Connector lines draw outward from the hub. */
.svc.is-armed .svc-links {
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 1.1s var(--svc-ease) .5s;
}

/* Cards fly out from the hub, 01 to 08 in turn. */
.svc.is-armed .svc-card {
  opacity: 0;
  translate: var(--fx) var(--fy);
  scale: .85;
  transition:
    opacity .6s ease calc(.6s + var(--n) * 90ms),
    translate .8s var(--svc-ease) calc(.6s + var(--n) * 90ms),
    scale .8s var(--svc-ease) calc(.6s + var(--n) * 90ms),
    transform .35s var(--svc-ease),
    box-shadow .35s var(--svc-ease),
    border-color .3s ease;
}

.svc.is-inview .svc-head > *,
.svc.is-inview .svc-cta,
.svc.is-inview .svc-orbit,
.svc.is-inview .svc-hub,
.svc.is-inview .svc-step,
.svc.is-inview .svc-card {
  opacity: 1;
  translate: none;
  scale: none;
}

.svc.is-inview .svc-hub-cycle {
  rotate: none;
}

.svc.is-inview .svc-links {
  clip-path: circle(75% at 50% 50%);
}

@keyframes svc-spin {
  to { transform: rotate(360deg); }
}

@keyframes svc-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.06); opacity: .65; }
}

@keyframes svc-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes svc-drift {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(18px, -14px); }
}

@keyframes svc-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

/* ---------- Stacked layout ---------- */
@media (max-width: 1080px) {
  .svc .container-page {
    gap: 40px;
  }

  .svc-stage {
    height: auto;
  }

  .svc-canvas {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 36px;
    width: auto;
    height: auto;
    transform: none;
  }

  .svc-orbit,
  .svc-links {
    display: none;
  }

  .svc-hub {
    position: relative;
    top: auto;
    left: auto;
    flex-shrink: 0;
  }

  .svc-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    width: 100%;
  }

  .svc-card {
    --fx: 0px;
    --fy: 24px;
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    height: auto;
    min-height: 124px;
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .svc-card--right .svc-card-text strong {
    white-space: normal;
  }
}

@media (max-width: 640px) {
  .appointment-v2 .svc-title {
    font-size: 26px;
    line-height: 32px;
    letter-spacing: -.8px;
  }

  .appointment-v2 .svc-lead {
    font-size: 15px;
    line-height: 24px;
  }

  .svc-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .svc-deco-ring {
    top: 60px;
    left: -260px;
  }
}

@media (max-width: 480px) {
  /* Shrink the 340px hub (labels overhang it by 12px) to clear a phone's gutters. */
  .svc-hub {
    margin: -20px 0;
    transform: scale(.88);
  }

  .svc-card {
    gap: 12px;
    border-radius: 28px;
  }

  .svc-card--left { padding: 14px 12px 14px 14px; }
  .svc-card--right { padding: 14px 14px 14px 12px; }

  .svc-icon {
    width: 64px;
    height: 64px;
  }

  .svc-card-text strong {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .svc *,
  .svc *::before {
    animation: none !important;
    transition: none !important;
  }
}