/* R63: quiet depth and responsive feedback; no new content or looping motion. */
.home-clear-r54 {
  background:
    radial-gradient(ellipse 850px 580px at 100% 18%, #edf1fc 0%, transparent 72%),
    radial-gradient(ellipse 960px 720px at 0% 32%, #f3eaf9 0%, transparent 74%),
    #fdfcfe;
}
.home-clear-r54 .hc-home {
  background:
    radial-gradient(ellipse at 2% 12%, #f4edfa 0%, transparent 60%),
    radial-gradient(ellipse at 100% 90%, #edf2fb 0%, transparent 57%),
    linear-gradient(135deg, #fff 18%, #fbf8fe 76%, #f8faff);
}
.home-clear-r54 .hc-header {
  background: linear-gradient(110deg, #fff 40%, #fcf9ff);
  box-shadow: 0 3px 18px #41256108;
}
.home-clear-r54 .hc-promo-row {
  background: linear-gradient(110deg, #f6effb, #f7f4fc 55%, #eef3fb);
}
.home-clear-r54 .hc-footer {
  background: linear-gradient(115deg, #f7f0fc, #faf8fd 55%, #f0f4fb);
}
.home-clear-r54 .hc-home h1,
.home-clear-r54.hc-options-page :is(h1,h2) {
  color: #3e2855;
  text-shadow: 0 1px 0 #fff, 0 2px 7px #50317708;
}
.home-clear-r54 .hc-home h1 span { color: #704595; }
.home-clear-r54 :is(.hc-route, .hc-builder-choice) {
  background: linear-gradient(125deg, #fff 8%, #f6effc 72%, #f0f3fc);
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 #e0d4ec, 0 10px 25px #50316c09;
}
.home-clear-r54 :is(.hc-route, .hc-builder-choice):is(:hover,:focus-visible) {
  background: linear-gradient(125deg, #fff, #efe2f9 65%, #e8effb);
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 #cdb5df, 0 12px 28px #7041951c;
}
.home-clear-r54 :is(.hc-package, .hc-breakdown) {
  background: linear-gradient(150deg, #fff 35%, #faf6fd);
  box-shadow: inset 0 1px 0 #fff, 0 6px 20px #52316f0b;
}
.home-clear-r54 .hc-package {
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.home-clear-r54 .hc-package:has(.hc-package-label:hover) {
  border-color: #ab8bc3;
  box-shadow: 0 7px 24px #65458618;
}
.home-clear-r54 .hc-package:has(input:checked) {
  background: linear-gradient(145deg, #fff, #f2e9fb);
  box-shadow: 0 4px 18px #66428817;
}
.home-clear-r54 .hc-package :is(.hc-selection,summary) {
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.home-clear-r54 .hc-package-label:hover .hc-selection {
  border-color: #a986c3;
  box-shadow: 0 2px 8px #60368212;
}
.home-clear-r54 .hc-package summary:hover { background: #eee6f64d; }
.home-clear-r54 .hc-visual img {
  box-shadow: 0 10px 28px #4a326412, 0 1px 0 #fff;
}
.home-clear-r54 .hc-enquiry {
  background: linear-gradient(145deg, #fff, #faf6fe);
  box-shadow: 0 10px 28px #4c31690d;
}
.home-clear-r54 :is(.hc-package-costs, .hc-costs) {
  background: linear-gradient(100deg, #f5eefb99, #f8faff55);
}
.home-clear-r54 .hc-action {
  color: #5d327f;
  background: linear-gradient(180deg, #fff, #faf7fd);
  border-color: #aa8bbf;
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 #dfd2e9, 0 6px 14px #5633760a;
}
.home-clear-r54 .hc-action:hover {
  color: #4a226c;
  background: linear-gradient(180deg, #fff, #f0e7f9);
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 #d0b9e1, 0 9px 20px #6236851b;
}
.home-clear-r54 .hc-action-primary {
  color: #fff;
  background: linear-gradient(120deg, #522977, #76439c);
  border-color: #573178;
  box-shadow: inset 0 1px 0 #ffffff2b, 0 3px 0 #43205f, 0 7px 17px #57307921;
}
.home-clear-r54 .hc-action-primary:hover {
  color: #fff;
  background: linear-gradient(120deg, #482369, #69398e);
  box-shadow: inset 0 1px 0 #ffffff38, 0 3px 0 #3b1b58, 0 10px 22px #57307930;
}
/* A third treatment: blue-violet, not a second quote button or another white one. */
.home-clear-r54 .hc-action.hc-build-now {
  color: #fff;
  background-image:
    linear-gradient(110deg, transparent 30%, #ffffff14 46%, transparent 62%),
    linear-gradient(120deg, #285486, #574197);
  background-size: 250% 100%, 100% 100%;
  background-position: 100% 0, 0 0;
  border-color: #3e4a85;
  box-shadow: inset 0 1px 0 #ffffff38, 0 3px 0 #273661, 0 7px 18px #3d458124;
  gap: 14px;
}
.home-clear-r54 .hc-action.hc-build-now::after {
  content: "";
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  flex: none;
  transition: translate .22s ease;
}
.home-clear-r54 .hc-action.hc-build-now:is(:hover,:focus-visible) {
  color: #fff;
  background-position: 0 0, 0 0;
  box-shadow: inset 0 1px 0 #ffffff45, 0 3px 0 #273661, 0 10px 24px #49539933;
}
.home-clear-r54 .hc-build-now:is(:hover,:focus-visible)::after { translate: 2px 0; }

/* R64: reassurance belongs to the builder action, not to its clickable label. */
.home-clear-r54 .hc-next-actions { align-items: flex-start; }
.home-clear-r54 .hc-build-action { display: flex; flex-direction: column; gap: 9px; text-align: center; }
.home-clear-r54 .hc-build-action > .hc-action { width: 100%; flex: none; }
.home-clear-r54 .hc-build-note { margin: 0; font-size: 13px; line-height: 1.5; font-style: italic; color: #665675; }
@media (min-width: 481px) and (max-width: 800px) {
  .home-clear-r54 .hc-next-actions > .hc-build-action { flex: 1; min-width: 0; }
}
@media (max-width: 480px) {
  .home-clear-r54 .hc-next-actions > * { width: 100%; flex: none; }
}

/* Shared button feedback, including the existing classic and guided builders.
   Individual translate preserves any existing component-specific transform. */
body :is(button, a.btn, .hc-action, .vital-header-cta, a.rv-button, a.vg-primary) {
  transition: translate .18s ease, box-shadow .22s ease, background-color .22s ease,
    border-color .22s ease, background-position .55s ease;
}
@media (hover: hover) and (pointer: fine) {
  body :is(button, a.btn, .hc-action, .vital-header-cta, a.rv-button, a.vg-primary):not(:disabled):not([aria-disabled="true"]):hover {
    translate: 0 -2px;
  }
}
body :is(button, a.btn, .hc-action, .vital-header-cta, a.rv-button, a.vg-primary):not(:disabled):not([aria-disabled="true"]):active {
  translate: 0 1px;
}
.home-clear-r54 .hc-action:active { box-shadow: inset 0 1px 3px #31204116, 0 1px 0 #c9b5da; }
.home-clear-r54 :is(.hc-action, button):focus-visible {
  outline: 3px solid #6c4390;
  outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  body :is(button, a.btn, .hc-action, .vital-header-cta, a.rv-button, a.vg-primary),
  .home-clear-r54 .hc-build-now::after {
    transition: none !important;
    animation: none !important;
    translate: none !important;
  }
  .home-clear-r54 .hc-action.hc-build-now { background-position: 100% 0, 0 0; }
  /* Outrank the legacy Classic Next hover rules that used !important loops. */
  html body .wizard-actions button.btn.primary.next-step,
  html body .wizard-actions button.btn.primary.next-step:is(:hover,:focus-visible,:active) {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    translate: none !important;
  }
  html body .wizard-actions button.btn.primary.next-step::before,
  html body .wizard-actions button.btn.primary.next-step::after,
  html body .wizard-actions button.btn.primary.next-step:is(:hover,:focus-visible,:active)::before,
  html body .wizard-actions button.btn.primary.next-step:is(:hover,:focus-visible,:active)::after {
    animation: none !important;
    transition: none !important;
  }
}
@media (forced-colors: active) {
  .home-clear-r54 :is(.hc-action, .hc-package, .hc-breakdown, .hc-builder-choice, .hc-route) {
    color: ButtonText;
    background: Canvas;
    border-color: ButtonText;
    box-shadow: none;
  }
  .home-clear-r54 .hc-action:focus-visible { outline-color: Highlight; }
}

/* Contact-only direct email path: visually identifiable, keyboard-visible, and safe at narrow widths. */
.campaign-form .direct-email-contact { margin-bottom: 0; }
.campaign-form .direct-email-link {
  color: #65358f;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-thickness: .1em;
  text-underline-offset: .2em;
  overflow-wrap: anywhere;
}
.campaign-form .direct-email-link:is(:hover, :focus-visible) { color: #4f2e7f; }
.campaign-form .direct-email-link:focus-visible {
  outline: 3px solid #8b5ba8;
  outline-offset: 4px;
  border-radius: 3px;
}
@media (forced-colors: active) {
  .campaign-form .direct-email-link:focus-visible { outline-color: Highlight; }
}