.step-help {
  margin: -3px 0 18px;
  color: var(--muted);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
}

.surface-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.special-rooms-section {
  margin-top: 14px;
  border: 2px solid #d2e6ef;
  border-radius: 13px;
  background: #fbfeff;
}

.special-rooms-section summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 72px;
  padding: 14px 17px;
  cursor: pointer;
  list-style: none;
}

.special-rooms-section summary::-webkit-details-marker {
  display: none;
}

.special-rooms-heading {
  display: grid;
  gap: 2px;
}

.special-rooms-heading b {
  color: var(--navy);
  font-size: 18px;
}

.special-rooms-heading small {
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}

.special-rooms-section .surface-status,
.room-picker summary .surface-status {
  flex-shrink: 0;
}

.special-rooms-section[open] summary {
  border-bottom: 1px solid #d8e9f2;
  background: #f3fcff;
}

.special-rooms-section .room-controls {
  padding: 0;
}

.special-rooms-section[open] .room-controls {
  padding: 18px;
}

.quote-booking-cue {
  display: flex;
  width: fit-content;
  min-width: min(100%, 340px);
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 26px auto 0;
  padding: 15px 18px 15px 21px;
  border: 2px solid #83dcf0;
  border-radius: 14px;
  background: #fff;
  color: var(--navy);
  box-shadow: 0 10px 22px rgba(7, 47, 100, .09);
  text-decoration: none;
}

.quote-price-help {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -8px 0 20px;
  padding: 12px 13px;
  border: 2px solid var(--yellow);
  border-radius: 11px;
  background: #fff8d8;
  color: var(--navy);
  text-decoration: none;
}

.quote-price-help span {
  display: grid;
  gap: 2px;
}

.quote-price-help b {
  font-size: 17px;
}

.quote-price-help small {
  color: #496a86;
  font-size: 13px;
  font-weight: 800;
}

.quote-price-help i {
  display: grid;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: var(--yellow);
  font-size: 18px;
  font-style: normal;
}

.quote-booking-cue span {
  display: grid;
  gap: 2px;
}

.quote-booking-cue b {
  font-size: 18px;
}

.quote-booking-cue small {
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.quote-booking-cue i {
  display: grid;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 25px;
  font-style: normal;
  font-weight: 900;
}

.quote-next-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 26px auto 0;
}

.quote-next-bubble {
  display: inline-flex;
  min-height: 56px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 18px;
  border: 2px solid transparent;
  border-radius: 999px;
  color: var(--navy);
  font-size: 17px;
  text-decoration: none;
}

.quote-next-bubble span {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 50%;
  font-size: 15px;
}

.quote-next-book {
  border-color: var(--blue);
  background: #eaf8ff;
}

.quote-next-book span {
  background: var(--blue);
  color: #fff;
}

.quote-next-fish {
  border-color: #f0c800;
  background: #fff8d8;
}

.quote-next-fish span {
  background: var(--yellow);
}

.quote-scroll-arrow {
  display: grid;
  justify-items: center;
  gap: 4px;
  width: fit-content;
  margin: 13px auto 0;
  color: var(--navy);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}

.quote-scroll-arrow i {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-size: 24px;
  font-style: normal;
}

.surface-card {
  overflow: hidden;
  border: 2px solid #c9dfed;
  border-radius: 15px;
  background: #fbfeff;
}

.surface-card.is-selected {
  border-color: var(--blue);
  background: #f0fbff;
  box-shadow: 0 0 0 3px rgba(8, 120, 237, .09);
}

#walls-card { grid-column: 1 / -1; }

.surface-toggle {
  display: grid !important;
  grid-template-columns: 23px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 15px;
  cursor: pointer;
}

.surface-toggle input {
  width: 22px;
  height: 22px;
  min-height: 22px;
  margin: 0;
  accent-color: var(--blue);
}

.surface-toggle span { display: grid; gap: 2px; }
.surface-toggle b { color: var(--navy); font-size: 19px; }

.surface-toggle small {
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
}

.surface-status {
  padding: 6px 9px;
  border-radius: 999px;
  background: #e5f4f9;
  color: #46708a;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.surface-card.is-selected .surface-status { background: var(--blue); color: #fff; }
.surface-detail { padding: 0 15px 15px; }
.surface-detail label { font-size: 15px; }
.surface-detail input { margin-top: 6px; }

/* Quick side movement keeps the journey lively without slowing the scroll. */
body { overflow-x: hidden; }
.motion-reveal.motion-from-left { transform: translate3d(-34px, 0, 0); }
.motion-reveal.motion-from-right { transform: translate3d(34px, 0, 0); }
.motion-reveal.is-visible { transform: translate3d(0, 0, 0); }

@keyframes surface-detail-left {
  from { opacity: 0; transform: translate3d(-14px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes surface-detail-right {
  from { opacity: 0; transform: translate3d(14px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes selected-surface {
  0% { transform: translate3d(-7px, 0, 0) scale(.985); }
  65% { transform: translate3d(2px, 0, 0) scale(1.008); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

.surface-card.is-selected { animation: selected-surface .32s cubic-bezier(.16, .85, .25, 1.15); }
.surface-card:nth-child(odd).is-selected .surface-detail { animation: surface-detail-left .25s ease-out both; }
.surface-card:nth-child(even).is-selected .surface-detail { animation: surface-detail-right .25s ease-out both; }

.coat-choice label > span {
  display: grid;
  gap: 2px;
}

.coat-choice label > span b {
  color: var(--navy);
  font-size: 15px;
}

.coat-choice label > span small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

/* A calm, full-card question rather than an urgent warning. */
.coat-choice {
  display: grid;
  margin: 22px 0 0;
  border: 0;
  border-radius: 14px;
  background: #fff8da;
  overflow: hidden;
}

.coat-choice-header {
  display: grid;
  gap: 8px;
  padding: 20px 20px 15px;
  background: #fff8da;
}

.coat-choice h4 {
  margin: 0;
  color: var(--navy);
  font-size: 19px;
  line-height: 1.2;
}

.coat-choice p {
  width: auto;
  margin: 0;
  color: #304b68;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
}

.coat-choice-options {
  display: grid;
  gap: 11px;
  padding: 0 20px 20px;
  background: #fff8da;
}

.coat-choice label {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border: 1px solid #eadb97;
  border-radius: 10px;
  background: rgba(255, 255, 255, .56);
}

.coat-choice label:has(input:checked) {
  border-color: #58bfe7;
  background: #fffdf2;
  box-shadow: 0 0 0 2px rgba(35, 196, 231, .16);
}

.coat-choice input {
  flex: 0 0 auto;
  margin-top: 3px;
}

.colour-details {
  display: grid;
  gap: 17px;
  margin: 22px 0 0;
  padding: 19px;
  border: 2px solid #b7e6f1;
  border-radius: 13px;
  background: linear-gradient(135deg, #f0fcff, #fff);
}

.colour-details > legend,
.colour-choice > legend {
  padding: 0 7px;
  color: var(--navy);
  font-size: 18px;
  font-weight: 900;
}

.colour-details-lead {
  margin: -2px 0 1px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
}

.colour-choice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}

.colour-choice label {
  display: flex !important;
  align-items: flex-start;
  gap: 9px;
  min-height: 74px;
  padding: 12px;
  border: 2px solid #c8e2ee;
  border-radius: 10px;
  background: #fff;
}

.colour-choice label:has(input:checked) {
  border-color: var(--blue);
  background: #eafaff;
  box-shadow: 0 0 0 3px rgba(8, 120, 237, .1);
}

.colour-choice input {
  width: 20px;
  height: 20px;
  min-height: 20px;
  margin: 1px 0 0;
}

.colour-choice span {
  display: grid;
  gap: 2px;
}

.colour-choice b { color: var(--navy); font-size: 15px; }
.colour-choice small { color: var(--muted); font-size: 13px; font-weight: 700; line-height: 1.3; }
.colour-later-note { margin: 0; padding: 13px 14px; border-left: 4px solid var(--aqua); border-radius: 8px; background: #eafaff; color: #315f7d; font-size: 15px; font-weight: 700; line-height: 1.45; }
.paint-counts strong { color: #fff; font-size: 15px; line-height: 1.35; }
.paint-counts #paint-selection-note { color: #c7e6ff; font-size: 13px; line-height: 1.35; }
.walkthrough-card #walk-continue:disabled { cursor: not-allowed; opacity: .52; box-shadow: none; transform: none; }

.manager-notifications { margin-top: 21px; }
.manager-notification-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.manager-notification-head .eyebrow { margin-bottom: 4px; }
.manager-notification-head h2 { margin-bottom: 0; }
.manager-notification-head > span { flex: 0 0 auto; padding: 6px 9px; border-radius: 999px; background: #eafaff; color: var(--blue); font-size: 12px; font-weight: 900; }
.manager-notification-list { display: grid; gap: 8px; max-height: 238px; margin-top: 14px; padding-right: 5px; overflow-y: auto; overscroll-behavior: contain; }
.manager-notification-list article { display: grid; grid-template-columns: 9px minmax(0, 1fr); gap: 10px; padding: 11px 0; border-top: 1px solid #d9e6ef; }
.manager-notification-list i { width: 9px; height: 9px; margin-top: 6px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px #e9f9ff; }
.manager-notification-list div { display: grid; gap: 2px; }
.manager-notification-list b { color: var(--navy); font-size: 15px; }
.manager-notification-list span { color: var(--muted); font-size: 14px; line-height: 1.35; }
.manager-notification-list small { color: #7890a2; font-size: 12px; font-weight: 800; }

@media (max-width: 800px) {
  .colour-choice { grid-template-columns: 1fr; }
  .colour-details { padding: 16px; }
  .manager-notification-list { max-height: 216px; }
}

.quote-memos {
  display: grid;
  gap: 5px;
  margin: 0 0 20px;
  padding: 14px;
  border-left: 4px solid var(--yellow);
  border-radius: 9px;
  background: #124c91;
}

.quote-memos b {
  color: var(--yellow);
  font-size: 15px;
}

.quote-memos span {
  color: #d5eaff;
  font-size: 14px;
  line-height: 1.4;
}

/* A fast opening hit: a blue light sweep, offer card launch and side reveal. */
@keyframes hero-sweep {
  0% { opacity: 0; transform: translate3d(-170%, 0, 0) skewX(-16deg); }
  12% { opacity: .58; }
  72% { opacity: .22; }
  100% { opacity: 0; transform: translate3d(390%, 0, 0) skewX(-16deg); }
}

@keyframes hero-snap-left {
  0% { opacity: 0; transform: translate3d(-42px, 0, 0) rotate(-.45deg); }
  72% { opacity: 1; transform: translate3d(3px, 0, 0) rotate(0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes hero-deal-launch {
  0% { opacity: 0; transform: translate3d(76px, 0, 0) rotate(12deg) scale(.78); }
  68% { opacity: 1; transform: translate3d(-3px, 0, 0) rotate(3deg) scale(1.025); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(4deg) scale(1); }
}

@keyframes offer-stamp {
  0% { opacity: 0; transform: rotate(-5deg) scale(.55); }
  72% { opacity: 1; transform: rotate(1.5deg) scale(1.08); }
  100% { opacity: 1; transform: rotate(0) scale(1); }
}

@keyframes offer-stamp-long {
  0% { opacity: 0; transform: rotate(-7deg) scale(.5); }
  34% { opacity: 1; transform: rotate(2.2deg) scale(1.12); }
  60% { transform: rotate(-1deg) scale(.98); }
  78% { transform: rotate(.6deg) scale(1.035); }
  100% { opacity: 1; transform: rotate(0) scale(1); }
}

@keyframes hero-title-reveal {
  0% { opacity: 0; transform: translate3d(-18px, 0, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes hero-title-underline {
  0% { transform: scaleX(0); opacity: 0; }
  32% { opacity: 1; }
  100% { transform: scaleX(1); opacity: 1; }
}

.hero.hero-launch::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: -30%;
  left: 0;
  width: 28%;
  height: 165%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(8, 120, 237, .38), rgba(35, 196, 231, .25), transparent);
  animation: hero-sweep .86s cubic-bezier(.18, .76, .26, 1) both;
}

.hero.hero-launch .hero-grid > div:first-child > .eyebrow,
.hero.hero-launch .hero-grid > div:first-child > h1,
.hero.hero-launch .hero-copy,
.hero.hero-launch .hero-actions,
.hero.hero-launch .hero-trust {
  animation: hero-snap-left .5s both cubic-bezier(.16, .85, .24, 1.12);
}

/* Keep the small location/service line readable while matching the title accent. */
.hero-grid > div:first-child > .eyebrow { margin: 2px 0 8px; color: #86c9ee; }

.hero.hero-launch .hero-grid > div:first-child > h1 { animation-delay: .08s; }
.hero h1 .hero-title-line {
  position: relative;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.hero h1 .hero-title-line::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -10px;
  left: 0;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #d5f5fc, #ecfbff);
  transform: scaleX(0);
  transform-origin: left;
}

.hero.hero-launch .hero-grid > div:first-child > h1 .hero-offer {
  animation: offer-stamp-long 1.35s .14s both cubic-bezier(.16, .85, .24, 1.16);
}

.hero.hero-launch .hero-grid > div:first-child > h1 .hero-title-line {
  animation: hero-title-reveal .72s .12s both cubic-bezier(.16, .85, .24, 1.02);
}

.hero.hero-launch .hero-grid > div:first-child > h1 .hero-title-line::after {
  animation: hero-title-underline 1.05s .72s both cubic-bezier(.16, .85, .24, 1);
}
.hero.hero-launch .hero-copy { animation-delay: .16s; }
.hero.hero-launch .hero-actions { animation-delay: .24s; }
.hero.hero-launch .hero-trust { animation-delay: .32s; }

.hero.hero-launch .deal-card {
  animation: hero-deal-launch .68s both cubic-bezier(.16, .85, .24, 1.12), dealFloat 4.8s ease-in-out .72s infinite;
}

@media (max-width: 800px) {
  .step-help { font-size: 16px; }
  .surface-picker { grid-template-columns: 1fr; }
  .surface-toggle { padding: 14px 13px; }
  .surface-toggle b { font-size: 18px; }
  .surface-toggle small { font-size: 13px; }
  .surface-detail { padding: 0 13px 13px; }
}