/* ==========================================================================
   CAREFINITY — COMPONENTS  (v2)
   --------------------------------------------------------------------------
   Buttons, cards, header, navigation, footer, forms, accordion, the icon
   system, and the care-finder wizard that fronts the home page.
   ========================================================================== */

/* ==========================================================================
   ICONS
   ========================================================================== */
.icon { width: 20px; height: 20px; flex: none; stroke-width: 1.75; }
.icon-arrow { transition: transform var(--t-base) var(--ease-out); }

/* Coloured tile behind a service or feature icon. */
.icon-tile {
  display: inline-grid;
  place-items: center;
  width: 60px; height: 60px;
  margin-bottom: var(--sp-5);
  border-radius: var(--r-md);
  background: var(--c-teal-light);
  color: var(--c-teal);
  flex: none;
  transition:
    transform var(--t-base) var(--ease-spring),
    background-color var(--t-base) var(--ease),
    color var(--t-base) var(--ease);
}
.icon-tile svg { width: 28px; height: 28px; stroke-width: 1.6; }
.icon-tile--sm { width: 46px; height: 46px; border-radius: var(--r-sm); margin-bottom: 0; }
.icon-tile--sm svg { width: 22px; height: 22px; }
.icon-tile--lav { background: var(--c-lavender-light); color: var(--c-lavender-deep); }
.icon-tile--solid { background: var(--c-teal); color: var(--c-white); }

/* ==========================================================================
   BUTTONS — pills in v2
   ========================================================================== */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 52px;
  padding: 0 var(--sp-7);
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform var(--t-base) var(--ease-spring),
    background-color var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease),
    color var(--t-base) var(--ease),
    box-shadow var(--t-base) var(--ease);
}

/* A soft sheen wipes across on hover — the small flourish the reference
   sites use to make CTAs feel alive. */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform var(--t-slow) var(--ease-out);
}
.btn:hover::after { transform: translateX(120%); }

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:hover .icon-arrow { transform: translateX(4px); }

.btn--primary {
  background: var(--c-teal);
  color: var(--c-white);
  box-shadow: var(--sh-btn);
}
.btn--primary:hover { background: var(--c-teal-dark); color: var(--c-white); box-shadow: var(--sh-btn-h); }

.btn--secondary {
  background: var(--c-white);
  border-color: var(--c-border-strong);
  color: var(--c-navy);
  box-shadow: var(--sh-xs);
}
.btn--secondary:hover { border-color: var(--c-teal); color: var(--c-teal-dark); box-shadow: var(--sh-sm); }

.btn--ghost {
  background: transparent;
  border-color: var(--c-teal);
  color: var(--c-teal-dark);
}
.btn--ghost:hover { background: var(--c-teal); color: var(--c-white); }

.btn--lav {
  background: var(--c-lavender-deep);
  color: var(--c-white);
}
.btn--lav:hover { background: #7B5292; color: var(--c-white); }

.btn--on-teal {
  background: var(--c-white);
  color: var(--c-teal-dark);
}
.btn--on-teal:hover { background: var(--c-teal-light); color: var(--c-teal-darker); }

.btn--outline-light {
  background: transparent;
  border-color: rgba(255, 255, 255, .45);
  color: var(--c-white);
}
.btn--outline-light:hover { background: rgba(255, 255, 255, .12); border-color: var(--c-white); color: var(--c-white); }

.btn--sm { min-height: 44px; padding-inline: var(--sp-5); font-size: var(--fs-xs); }
.btn--lg { min-height: 60px; padding-inline: var(--sp-8); font-size: var(--fs-body); }
.btn--block { display: flex; width: 100%; }

.btn[aria-disabled="true"], .btn:disabled { opacity: .6; pointer-events: none; }
.btn.is-loading { pointer-events: none; }

.btn__spinner {
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: cf-spin .7s linear infinite;
  flex: none;
}

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }
.btn-row--center { justify-content: center; }
@media (max-width: 460px) {
  .btn-row--stack { flex-direction: column; align-items: stretch; }
  .btn-row--stack .btn { width: 100%; }
}

/* Text link with a trailing arrow. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--c-teal-dark);
  text-decoration: none;
}
.link-arrow svg { width: 17px; height: 17px; transition: transform var(--t-base) var(--ease-out); }
.link-arrow:hover svg { transform: translateX(5px); }

/* ==========================================================================
   DECORATIVE SHAPES
   ========================================================================== */
/* Soft brand-derived shapes. Heavily blurred so they read as light rather
   than as flat circles, and continuously drifting and morphing so the page
   never looks completely still. */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(34px);
  pointer-events: none;
  z-index: 0;
  will-change: transform, border-radius;
  animation:
    cf-drift 14s var(--ease-in-out) infinite,
    cf-morph 11s var(--ease-in-out) infinite;
}
.blob--teal { background: var(--c-teal-tint); opacity: .75; }
.blob--lav  {
  background: var(--c-lavender);
  opacity: .45;
  animation-name: cf-drift-alt, cf-morph;
  animation-duration: 17s, 13s;
}
.blob--sand { background: var(--c-sand); opacity: .6; animation-duration: 20s, 15s; }

@media (prefers-reduced-motion: reduce) {
  .blob { animation: none; }
}

/* ==========================================================================
   HEADER + NAVIGATION
   ========================================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--t-base) var(--ease),
    box-shadow var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease);
}
.site-header.is-scrolled,
.site-header--solid {
  background: rgba(251, 248, 243, .88);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
          backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--c-border-warm);
  box-shadow: var(--sh-header);
}

body { padding-top: var(--header-h); }
body.has-transparent-header { padding-top: 0; }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  height: var(--header-h);
  transition: height var(--t-base) var(--ease);
}
.site-header.is-scrolled .site-header__inner { height: var(--header-h-sm); }

.brand { display: inline-flex; align-items: center; flex: none; text-decoration: none; }
.brand img, .brand svg {
  height: var(--logo-h);
  width: auto;
  transition: height var(--t-base) var(--ease);
}
.site-header.is-scrolled .brand img,
.site-header.is-scrolled .brand svg { height: var(--logo-h-sm); }
.brand:focus-visible { outline-offset: 6px; }

/* Desktop nav */
.primary-nav { margin-left: auto; }
.primary-nav__list { display: flex; align-items: center; gap: var(--sp-1); }
.primary-nav__link {
  position: relative;
  display: inline-block;
  padding: 0.6rem 1rem;
  border-radius: var(--r-pill);
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--c-navy);
  text-decoration: none;
  transition: color var(--t-base) var(--ease), background-color var(--t-base) var(--ease);
}
.primary-nav__link:hover { color: var(--c-teal); background: var(--c-teal-light); }
.primary-nav__link::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 4px;
  width: 0; height: 2px;
  border-radius: 2px;
  background: var(--c-teal);
  transform: translateX(-50%);
  transition: width var(--t-base) var(--ease-out);
}
.primary-nav__link[aria-current="page"] { color: var(--c-teal); }
.primary-nav__link[aria-current="page"]::after { width: 20px; }

.header-actions { display: flex; align-items: center; gap: var(--sp-3); flex: none; }

/* Phone link in the header — a reference-site staple. */
.header-phone {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.5rem 0.75rem;
  border-radius: var(--r-pill);
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--c-teal-dark);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--t-base) var(--ease);
}
.header-phone:hover { background: var(--c-teal-light); }
.header-phone svg { width: 17px; height: 17px; }

/* Hamburger */
.nav-toggle {
  display: none;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-border-strong);
  background: var(--c-white);
  color: var(--c-navy);
  transition: background-color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.nav-toggle:hover { background: var(--c-teal-light); border-color: var(--c-teal-tint); }
.nav-toggle__bars { display: block; width: 20px; height: 14px; position: relative; }
.nav-toggle__bars span {
  position: absolute;
  left: 0;
  width: 100%; height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--t-base) var(--ease-out), opacity var(--t-fast) var(--ease);
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 6px; }
.nav-toggle__bars span:nth-child(3) { top: 12px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile menu.

   Full screen, and it opens as a circle expanding out of the hamburger
   rather than sliding in from the edge. Two reasons beyond the look: an
   off-screen panel parked at translateX(100%) was widening the document on
   phones, and a full-screen sheet gives the links room to be properly large.

   Everything is driven by one class on the drawer, so the links, buttons and
   contact block can each be delayed off the same open. */
.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-drawer) - 1);
  background: rgba(24, 56, 61, .5);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-base) var(--ease), visibility var(--t-base) var(--ease);
}
.nav-backdrop.is-open { opacity: 1; visibility: visible; }

.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  width: 100%;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(120% 80% at 100% 0%, var(--c-teal-light) 0%, transparent 55%),
    radial-gradient(100% 70% at 0% 100%, var(--c-lavender-light) 0%, transparent 60%),
    var(--c-cream);
  overflow-y: auto;
  overscroll-behavior: contain;

  /* Closed: a zero-radius circle sitting on the hamburger. */
  clip-path: circle(0px at calc(100% - 44px) calc(var(--header-h) / 2));
  visibility: hidden;
  transition:
    clip-path 720ms var(--ease-out),
    visibility 0s linear 720ms;
}
.nav-drawer.is-open {
  clip-path: circle(155vmax at calc(100% - 44px) calc(var(--header-h) / 2));
  visibility: visible;
  transition:
    clip-path 720ms var(--ease-out),
    visibility 0s linear 0s;
}

/* A drifting shape inside the sheet so the open state is not flat. */
.nav-drawer::after {
  content: "";
  position: absolute;
  right: -18%;
  bottom: -14%;
  width: 78vw;
  height: 78vw;
  max-width: 460px;
  max-height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(199, 164, 216, .38), transparent 68%);
  filter: blur(18px);
  pointer-events: none;
  animation: cf-drift 16s var(--ease-in-out) infinite;
}

.nav-drawer__head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: var(--header-h);
  padding: var(--sp-4) var(--gutter);
}
.nav-drawer__close {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-border-strong);
  background: var(--c-white);
  color: var(--c-navy);
  transition: background-color var(--t-base) var(--ease), transform var(--t-base) var(--ease-spring);
}
.nav-drawer__close:hover { background: var(--c-teal-light); transform: rotate(90deg); }

.nav-drawer__body {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--sp-8);
  padding: var(--sp-6) var(--gutter) var(--sp-12);
  align-content: start;
  flex: 1;
}

.nav-drawer__list { display: flex; flex-direction: column; }

.nav-drawer__link {
  display: block;
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--c-border-warm);
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.2rem + 2.2vw, 2.4rem);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-tight);
  color: var(--c-heading);
  text-decoration: none;

  /* Each link waits its turn once the sheet is open. */
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  transition:
    opacity 520ms var(--ease-out),
    transform 640ms var(--ease-out),
    color var(--t-base) var(--ease),
    padding-left var(--t-base) var(--ease-out);
}
.nav-drawer.is-open .nav-drawer__link { opacity: 1; transform: none; }

.nav-drawer.is-open li:nth-child(1) .nav-drawer__link { transition-delay: .26s, .26s, 0s, 0s; }
.nav-drawer.is-open li:nth-child(2) .nav-drawer__link { transition-delay: .34s, .34s, 0s, 0s; }
.nav-drawer.is-open li:nth-child(3) .nav-drawer__link { transition-delay: .42s, .42s, 0s, 0s; }
.nav-drawer.is-open li:nth-child(4) .nav-drawer__link { transition-delay: .50s, .50s, 0s, 0s; }
.nav-drawer.is-open li:nth-child(5) .nav-drawer__link { transition-delay: .58s, .58s, 0s, 0s; }
.nav-drawer.is-open li:nth-child(6) .nav-drawer__link { transition-delay: .66s, .66s, 0s, 0s; }

.nav-drawer__link[aria-current="page"] { color: var(--c-teal); }
.nav-drawer__link:hover { color: var(--c-teal); padding-left: var(--sp-4); }

.nav-drawer__actions,
.nav-drawer__contact {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity 520ms var(--ease-out), transform 640ms var(--ease-out);
}
.nav-drawer.is-open .nav-drawer__actions { opacity: 1; transform: none; transition-delay: .62s; }
.nav-drawer.is-open .nav-drawer__contact { opacity: 1; transform: none; transition-delay: .72s; }

.nav-drawer__actions { display: grid; gap: var(--sp-3); }

.nav-drawer__contact {
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-5);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .7);
  border: 1px solid var(--c-border-warm);
  font-size: var(--fs-sm);
  color: var(--c-muted);
}
.nav-drawer__contact a { font-weight: var(--fw-bold); text-decoration: none; color: var(--c-teal-dark); }
.nav-drawer__contact a:hover { text-decoration: underline; }

/* Reduced motion: no expanding circle, no staggered arrival — just show it. */
@media (prefers-reduced-motion: reduce) {
  .nav-drawer { clip-path: none; opacity: 0; transition: opacity .001ms, visibility .001ms; }
  .nav-drawer.is-open { clip-path: none; opacity: 1; }
  .nav-drawer__link,
  .nav-drawer__actions,
  .nav-drawer__contact { opacity: 1 !important; transform: none !important; transition-delay: 0s !important; }
}

/* ==========================================================================
   CARDS
   ========================================================================== */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 1.2rem + 1.1vw, 2.25rem);
  border-radius: var(--r-card);
  background: var(--c-white);
  border: 1px solid var(--c-border-soft);
  box-shadow: var(--sh-card);
  overflow: hidden;
  transition:
    transform var(--t-base) var(--ease-out),
    box-shadow var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease);
}

/* A teal wash rises from the bottom on hover. */
.card--hover::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 0;
  background: linear-gradient(to top, var(--c-teal-light), transparent);
  transition: height var(--t-slow) var(--ease-out);
  z-index: 0;
}
.card--hover:hover::before { height: 100%; }
.card > * { position: relative; z-index: 1; }

.card--hover:hover {
  transform: translateY(-6px);
  border-color: var(--c-teal-tint);
  box-shadow: var(--sh-lift);
}
.card--hover:hover .icon-tile { transform: scale(1.08) rotate(-4deg); }
.card--hover:hover .icon-tile:not(.icon-tile--lav) { background: var(--c-teal); color: var(--c-white); }
.card--hover:hover .icon-tile--lav { background: var(--c-lavender-deep); color: var(--c-white); }

.service-card__title { margin-bottom: var(--sp-3); }
.service-card__text { color: var(--c-muted); font-size: var(--fs-sm); }
.service-card__list { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-5); }
.service-card__foot { margin-top: auto; padding-top: var(--sp-6); }

.tag {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  border-radius: var(--r-pill);
  background: var(--c-cream-deep);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--c-muted);
  transition: background-color var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.card--hover:hover .tag { background: var(--c-white); color: var(--c-teal-dark); }

/* ==========================================================================
   FORMS
   ========================================================================== */
.form { display: grid; gap: var(--sp-5); }
.form__grid { display: grid; gap: var(--sp-5); }
@media (min-width: 620px) { .form__grid--2 { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: var(--sp-2); border: 0; padding: 0; margin: 0; min-width: 0; }

/* A legend is not a normal flow box in every engine, so pin it to full width
   before styling it like any other label. */
legend.field__label, legend.care-finder__q { display: block; width: 100%; float: none; }

.field__label, legend.field__label {
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--c-heading);
  padding: 0;
}
.field__req { color: var(--c-error); }
.field__hint { font-size: var(--fs-xs); color: var(--c-muted-light); }

.input, .select, .textarea {
  width: 100%;
  min-height: 54px;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-sm);
  background: var(--c-white);
  color: var(--c-text);
  font-size: var(--fs-body);
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.textarea { min-height: 140px; resize: vertical; line-height: var(--lh-body); padding-top: var(--sp-4); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--c-teal-tint); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--c-teal);
  box-shadow: 0 0 0 4px rgba(8, 124, 128, .13);
}
.input::placeholder, .textarea::placeholder { color: var(--c-muted-light); }

.select {
  appearance: none;
  padding-right: var(--sp-10);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1.5 7 7.5 13 1.5' stroke='%2318383D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
}

.field__error {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--c-error);
}
.field__error:empty { display: none; }
.field.is-invalid .input,
.field.is-invalid .select,
.field.is-invalid .textarea { border-color: var(--c-error); background: var(--c-error-bg); }
.field.is-invalid .input:focus,
.field.is-invalid .select:focus,
.field.is-invalid .textarea:focus { box-shadow: 0 0 0 4px rgba(179, 38, 30, .12); }

/* Radio / checkbox pills */
.choice-group { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.choice { position: relative; display: inline-flex; }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice span {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 var(--sp-5);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-pill);
  background: var(--c-white);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-text);
  cursor: pointer;
  transition: all var(--t-base) var(--ease);
}
.choice input:hover + span { border-color: var(--c-teal-tint); }
.choice input:checked + span {
  border-color: var(--c-teal);
  background: var(--c-teal-light);
  color: var(--c-teal-darker);
  font-weight: var(--fw-bold);
}
.choice input:focus-visible + span { box-shadow: var(--focus-ring-flat); }

.checkbox { display: flex; gap: var(--sp-3); align-items: flex-start; cursor: pointer; font-size: var(--fs-sm); color: var(--c-muted); }
.checkbox input {
  appearance: none;
  width: 22px; height: 22px;
  margin-top: 2px;
  border: 1px solid var(--c-border-strong);
  border-radius: 6px;
  background: var(--c-white);
  flex: none;
  cursor: pointer;
  transition: all var(--t-base) var(--ease);
}
.checkbox input:checked {
  background: var(--c-teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='M1 5.2 4.2 8.4 11 1.6' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat;
  border-color: var(--c-teal);
}
.checkbox input:focus-visible { box-shadow: var(--focus-ring-flat); }

.form-notice {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--c-lavender-light);
  border: 1px solid #E7DAEE;
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: #5A3B6E;
}
.form-notice svg { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.form-notice--error { background: var(--c-error-bg); border-color: #F3C9C5; color: #8A231D; }

.form-success {
  display: grid;
  gap: var(--sp-4);
  justify-items: center;
  text-align: center;
  padding: clamp(2rem, 1.4rem + 2.4vw, 3.25rem) var(--sp-5);
  border-radius: var(--r-card);
  background: var(--c-success-bg);
  border: 1px solid #C7E8D9;
  animation: cf-pop var(--t-slow) var(--ease-spring);
}
@keyframes cf-pop {
  from { opacity: 0; transform: scale(.96) translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.form-success__icon {
  display: grid;
  place-items: center;
  width: 62px; height: 62px;
  border-radius: 50%;
  background: var(--c-success);
  color: #fff;
}
.form-success__icon svg { width: 30px; height: 30px; }
.form-success h3 { color: #0B5C40; }
.form-success p { color: #2C6B54; font-size: var(--fs-sm); max-width: 46ch; }

.form-panel {
  padding: clamp(1.5rem, 1.1rem + 1.8vw, 2.75rem);
  border-radius: var(--r-card);
  background: var(--c-white);
  border: 1px solid var(--c-border-soft);
  box-shadow: var(--sh-card);
}
.form-panel__head { margin-bottom: var(--sp-6); }
.form-panel__head p { color: var(--c-muted); font-size: var(--fs-sm); margin-top: var(--sp-2); }

.form-alt {
  margin-top: var(--sp-6);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--c-border-soft);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}
.form-alt p { font-size: var(--fs-sm); color: var(--c-muted); }

/* ==========================================================================
   CARE FINDER — the multi-step wizard in the hero
   ========================================================================== */
.care-finder {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem);
  border-radius: var(--r-xl);
  background: var(--c-white);
  border: 1px solid var(--c-border-warm);
  box-shadow: var(--sh-panel);
}

/* A hairline of brand colour along the top edge of the panel. */
.care-finder::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: linear-gradient(90deg, var(--c-teal), var(--c-lavender));
}

.care-finder__head { margin-bottom: var(--sp-6); }
.care-finder__head .eyebrow { margin-bottom: var(--sp-4); }

.care-finder__progress {
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--c-cream-deep);
  overflow: hidden;
}
.care-finder__bar {
  display: block;
  height: 100%;
  width: var(--p, 20%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--c-teal), var(--c-lavender-deep));
  transition: width var(--t-slow) var(--ease-out);
}
.care-finder__count {
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--c-muted-light);
  letter-spacing: var(--ls-wide);
}

.care-finder__steps { position: relative; }

.care-finder__step { display: none; border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.care-finder__step.is-active { display: block; animation: cf-step-in var(--t-slow) var(--ease-out); }
.care-finder__step.is-active.is-back { animation-name: cf-step-in-back; }

@keyframes cf-step-in {
  from { opacity: 0; transform: translate3d(24px, 0, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes cf-step-in-back {
  from { opacity: 0; transform: translate3d(-24px, 0, 0); }
  to   { opacity: 1; transform: none; }
}

/* The question is a <p> so the page keeps one clean heading outline — but it
   has to *look* like the heading of the panel, which means saying so here.
   Without this it inherited body text and the whole panel read as flat. */
.care-finder__q {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.2rem + 0.75vw, 1.75rem);
  font-weight: var(--fw-semi);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  color: var(--c-heading);
  text-wrap: balance;
  margin-bottom: var(--sp-2);
}
.care-finder__q:focus { outline: none; }

.care-finder__hint {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--c-muted);
  margin-bottom: var(--sp-5);
}

/* Option tiles — big, tappable, obviously selectable. */
.cf-options { display: grid; gap: var(--sp-3); }
@media (min-width: 560px) { .cf-options--2 { grid-template-columns: 1fr 1fr; } }

.cf-option { position: relative; display: block; }
.cf-option input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; cursor: pointer; margin: 0; }

.cf-option__box {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  min-height: 60px;
  padding: var(--sp-4) var(--sp-5);
  border: 1.5px solid var(--c-border-strong);
  border-radius: var(--r-md);
  background: var(--c-white);
  cursor: pointer;
  transition:
    border-color var(--t-base) var(--ease),
    background-color var(--t-base) var(--ease),
    transform var(--t-base) var(--ease-spring),
    box-shadow var(--t-base) var(--ease);
}
.cf-option input:hover + .cf-option__box { border-color: var(--c-teal-tint); transform: translateY(-2px); }
.cf-option input:checked + .cf-option__box {
  border-color: var(--c-teal);
  background: var(--c-teal-light);
  box-shadow: var(--sh-sm);
}
.cf-option input:focus-visible + .cf-option__box { box-shadow: var(--focus-ring-flat); }

.cf-option__mark {
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  margin-top: 1px;
  border: 1.5px solid var(--c-border-strong);
  border-radius: 50%;
  background: var(--c-white);
  flex: none;
  transition: all var(--t-base) var(--ease);
}
.cf-option--check .cf-option__mark { border-radius: 7px; }
.cf-option__mark svg { width: 13px; height: 13px; opacity: 0; transform: scale(.5); transition: all var(--t-base) var(--ease-spring); color: #fff; }
.cf-option input:checked + .cf-option__box .cf-option__mark { background: var(--c-teal); border-color: var(--c-teal); }
.cf-option input:checked + .cf-option__box .cf-option__mark svg { opacity: 1; transform: scale(1); }

.cf-option__text { display: grid; gap: 2px; }
.cf-option__label { font-family: var(--font-heading); font-weight: var(--fw-bold); color: var(--c-heading); font-size: var(--fs-sm); }
.cf-option__desc  { font-size: var(--fs-xs); color: var(--c-muted); line-height: 1.55; }

.care-finder__fields { display: grid; gap: var(--sp-4); }
@media (min-width: 560px) {
  .care-finder__fields--2 { grid-template-columns: 1fr 1fr; }
}
.care-finder__fields .field__label { font-size: var(--fs-xs); }
.care-finder__fields .input,
.care-finder__fields .textarea { min-height: 50px; }
.care-finder__fields .textarea { min-height: 92px; }

.care-finder__nav {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-border-soft);
}
.care-finder__nav .btn--primary { margin-left: auto; }

.care-finder__back {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--c-muted);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color var(--t-base) var(--ease);
}
.care-finder__back:hover { color: var(--c-teal-dark); }
.care-finder__back svg { width: 16px; height: 16px; transform: rotate(180deg); }

/* Reassurance quote that rides along beside the steps. */
.care-finder__aside {
  margin-top: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  background: var(--c-cream);
  border-left: 3px solid var(--c-lavender);
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--c-muted);
}
.care-finder__aside strong { display: block; color: var(--c-heading); margin-top: var(--sp-1); font-size: var(--fs-xs); }

.care-finder__legal { margin-top: var(--sp-4); font-size: 0.75rem; color: var(--c-muted-light); line-height: 1.6; }
.care-finder__legal a { color: var(--c-muted); }

.care-finder__done {
  display: grid;
  gap: var(--sp-4);
  justify-items: center;
  text-align: center;
  padding: var(--sp-8) var(--sp-4);
  animation: cf-pop var(--t-slow) var(--ease-spring);
}

/* ==========================================================================
   ACCORDION
   ========================================================================== */
.accordion { display: grid; gap: var(--sp-3); }

.accordion__item {
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-md);
  background: var(--c-white);
  overflow: hidden;
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.accordion__item:hover { border-color: var(--c-teal-tint); }
.accordion__item.is-open { border-color: var(--c-teal-tint); box-shadow: var(--sh-card); }

.accordion__item h3 { margin: 0; }

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
  padding: var(--sp-5) var(--sp-6);
  text-align: left;
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  color: var(--c-heading);
  transition: color var(--t-base) var(--ease);
}
.accordion__trigger:hover { color: var(--c-teal-dark); }

.accordion__icon {
  position: relative;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--c-teal-light);
  flex: none;
  transition: background-color var(--t-base) var(--ease), transform var(--t-slow) var(--ease-spring);
}
.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 13px; height: 2px;
  border-radius: 2px;
  background: var(--c-teal);
  transform: translate(-50%, -50%);
  transition: transform var(--t-base) var(--ease-out), opacity var(--t-base) var(--ease);
}
.accordion__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.accordion__item.is-open .accordion__icon { background: var(--c-teal); transform: rotate(180deg); }
.accordion__item.is-open .accordion__icon::before,
.accordion__item.is-open .accordion__icon::after { background: #fff; }
.accordion__item.is-open .accordion__icon::after { opacity: 0; transform: translate(-50%, -50%) rotate(0); }

.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-slow) var(--ease-out);
}
.accordion__item.is-open .accordion__panel { grid-template-rows: 1fr; }
.accordion__panel > div { overflow: hidden; }
.accordion__panel p {
  padding: 0 var(--sp-6) var(--sp-6);
  color: var(--c-muted);
  font-size: var(--fs-sm);
}
.accordion__panel p + p { padding-top: var(--sp-3); }
.accordion__panel a { color: var(--c-teal-dark); font-weight: var(--fw-medium); }

/* ==========================================================================
   FOOTER
   --------------------------------------------------------------------------
   Arched top edge, two drifting orbs, an oversized contact line, the four
   link columns, and the company name set huge and half-cropped along the
   bottom. The arch is done with an elliptical border-radius rather than an
   SVG wave so it works over whatever section happens to sit above it — cream
   on the home page, teal on contact, white on the legal pages.
   ========================================================================== */
.site-footer {
  position: relative;
  margin-top: calc(-1 * var(--sp-2));
  padding-top: clamp(4rem, 3rem + 4vw, 7rem);
  padding-bottom: var(--sp-8);
  background:
    radial-gradient(120% 90% at 15% 0%, #0A6F73 0%, transparent 55%),
    var(--c-teal-darker);
  color: var(--c-on-teal-muted);
  overflow: hidden;
  border-top-left-radius: 50% 56px;
  border-top-right-radius: 50% 56px;
}

/* Slow-moving light behind everything. */
.footer-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(40px);
  animation: cf-drift 22s var(--ease-in-out) infinite, cf-morph 17s var(--ease-in-out) infinite;
}
.footer-orb--1 {
  width: 46vw; height: 46vw;
  max-width: 560px; max-height: 560px;
  top: -22%; right: -8%;
  background: radial-gradient(circle, rgba(199, 164, 216, .34), transparent 70%);
}
.footer-orb--2 {
  width: 38vw; height: 38vw;
  max-width: 440px; max-height: 440px;
  bottom: -18%; left: -10%;
  background: radial-gradient(circle, rgba(8, 124, 128, .5), transparent 70%);
  animation-duration: 28s, 21s;
  animation-direction: reverse;
}

.site-footer > * { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   Oversized contact line
   -------------------------------------------------------------------------- */
.footer-lead {
  padding-bottom: clamp(2.5rem, 1.8rem + 2.6vw, 4rem);
  margin-bottom: clamp(2.5rem, 1.8rem + 2.6vw, 4rem);
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.footer-lead__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: baseline;
}
.footer-lead__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.05rem + 2.1vw, 2.6rem);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-tight);
  color: var(--c-white);
  text-decoration: none;
  overflow-wrap: anywhere;
}
/* The rule under the link draws itself in from the left on hover. */
.footer-lead__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  width: 100%; height: 2px;
  background: var(--c-lavender);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-slow) var(--ease-out);
}
.footer-lead__link:hover { color: var(--c-white); }
.footer-lead__link:hover::after,
.footer-lead__link:focus-visible::after { transform: scaleX(1); }
.footer-lead__link svg {
  width: 20px; height: 20px;
  color: var(--c-lavender);
  transition: transform var(--t-base) var(--ease-spring);
}
.footer-lead__link:hover svg { transform: scale(1.2) rotate(-8deg); }

/* --------------------------------------------------------------------------
   Columns
   -------------------------------------------------------------------------- */
.site-footer__main {
  display: grid;
  gap: var(--gap-split);
  padding-bottom: clamp(2.5rem, 1.8rem + 2.6vw, 4rem);
}
@media (min-width: 720px)  { .site-footer__main { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .site-footer__main { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }

.site-footer__brand img, .site-footer__brand svg { height: 58px; width: auto; }
.site-footer__tagline {
  margin-top: var(--sp-4);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-style: italic;
  color: var(--c-white);
}
.site-footer__desc { margin-top: var(--sp-3); font-size: var(--fs-sm); max-width: 40ch; }

.footer-col__title {
  margin-bottom: var(--sp-5);
  font-family: var(--font-heading);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-white);
}

.footer-links { display: grid; gap: var(--sp-3); }
.footer-links a {
  position: relative;
  display: inline-block;
  padding-left: 0;
  font-size: var(--fs-sm);
  color: var(--c-on-teal-muted);
  text-decoration: none;
  transition: color var(--t-base) var(--ease), padding-left var(--t-base) var(--ease-out);
}
/* A dash grows out of the left edge on hover instead of the link jumping. */
.footer-links a::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 0; height: 1.5px;
  background: var(--c-lavender);
  transform: translateY(-50%);
  transition: width var(--t-base) var(--ease-out);
}
.footer-links a:hover { color: var(--c-white); padding-left: 22px; }
.footer-links a:hover::before { width: 14px; }

.footer-contact { display: grid; gap: var(--sp-4); }
.footer-contact__item { display: flex; gap: var(--sp-3); font-size: var(--fs-sm); }
.footer-contact__item svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--c-lavender); }
.footer-contact a { color: var(--c-on-teal-muted); text-decoration: none; }
.footer-contact a:hover { color: var(--c-white); text-decoration: underline; }
.footer-name { color: var(--c-white); }

.social-row { display: flex; gap: var(--sp-3); margin-top: var(--sp-6); }
.social-row a {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .18);
  color: var(--c-on-teal-muted);
  transition: all var(--t-base) var(--ease-spring);
}
.social-row a:hover {
  background: var(--c-white);
  border-color: var(--c-white);
  color: var(--c-teal-darker);
  transform: translateY(-4px) scale(1.06);
}
.social-row svg { width: 18px; height: 18px; }

/* --------------------------------------------------------------------------
   Bottom bar + back to top
   -------------------------------------------------------------------------- */
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-top: var(--sp-6);
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: var(--fs-xs);
}
.site-footer__disclaimer { max-width: 60ch; opacity: .75; }

.footer-top {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.6rem 1.1rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, .2);
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--c-white);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.footer-top:hover { background: rgba(255, 255, 255, .12); border-color: var(--c-white); color: var(--c-white); }
.footer-top svg { width: 15px; height: 15px; transform: rotate(-90deg); transition: transform var(--t-base) var(--ease-out); }
.footer-top:hover svg { transform: rotate(-90deg) translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .footer-orb { animation: none; }
}

@media (max-width: 560px) {
  .site-footer { border-top-left-radius: 50% 30px; border-top-right-radius: 50% 30px; }
  .footer-lead__links { gap: var(--sp-4); flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   HEADER RESPONSIVE SWITCH
   ========================================================================== */
@media (max-width: 1180px) {
  .header-actions .btn--secondary { display: none; }
}
@media (max-width: 1040px) {
  .primary-nav { display: none; }
  .nav-toggle { display: grid; }
  .header-actions { margin-left: auto; }
}
@media (max-width: 700px) {
  /* Just the icon once the bar gets tight. */
  .header-phone { font-size: 0; gap: 0; padding: 0.5rem; }
  .header-phone svg { font-size: 1rem; }
}
@media (max-width: 620px) {
  .header-actions .btn--primary { display: none; }
}
@media (min-width: 1041px) {
  .nav-drawer, .nav-backdrop { display: none; }
}

/* ==========================================================================
   CARDS ON A WHITE GROUND
   --------------------------------------------------------------------------
   Cards are white, which works everywhere the section behind them is cream,
   teal or lavender. On the sections that are themselves white they had no
   edge at all and read as flat text — so there they take the cream surface
   instead, and the inputs inside them stay white and pop.
   ========================================================================== */
.bg-white .card,
.bg-white .feature-item,
.bg-white .accordion__item,
.bg-white .contact-info__card,
.bg-white .form-panel,
.bg-white .jump-nav,
.bg-white .step,
.bg-white .quote-card,
.bg-white .stat,
.bg-white .consult {
  background: var(--c-cream);
  border-color: var(--c-border-warm);
}

/* The hover wash needs a touch more presence over cream than over white. */
.bg-white .card--hover:hover,
.bg-white .accordion__item.is-open,
.bg-white .feature-item:hover { border-color: var(--c-teal-tint); }

.bg-white .accordion__item { background: var(--c-cream); }
.bg-white .accordion__item.is-open { background: var(--c-white); }

/* Tag pills sit on cream cards now, so give them their own step of contrast. */
.bg-white .tag { background: var(--c-white); }
.bg-white .card--hover:hover .tag { background: var(--c-teal-light); }