/* Sunset logo colours, with darker ink for readable text. */
:root {
  --brand-font: Arial, Helvetica, sans-serif;
  --orange: #ff5b37;
  --sunset-orange: #ff7a19;
  --gold: #ffad17;
  --brand-ink: #06143d;
  --brand-accent-ink: #a33b19;
  --blue: var(--brand-accent-ink);
  --line: #edcbb7;
  --mist: #fff4e8;
}
body { font-family: var(--brand-font); }
button, input, select, textarea { font-family: inherit; }
.hero-thanks h1 { font-family: inherit; }
.eyebrow { color: var(--brand-accent-ink); }
.eyebrow.light { color: #fff; }
.button {
  background: linear-gradient(110deg, var(--orange), var(--sunset-orange) 55%, var(--gold));
  color: var(--brand-ink);
}
.button:hover { background: #ffad17; }
.button:focus-visible, .quiz-nav button:focus-visible {
  outline: 3px solid var(--brand-ink);
  outline-offset: 4px;
}
.quiz-nav { background: #f6d6c5; }
.quiz-nav .next { background: #efc2a9; color: #432d25; }
.quiz-nav .next:hover { background: #e8b497; }
.quiz-nav .back { color: #432d25; }
.quiz-panel input[type=radio]:checked { border-color: var(--brand-accent-ink); }
.input-label input { border-color: var(--line); }
.input-label input:focus-visible { outline: 2px solid var(--brand-accent-ink); outline-offset: 2px; }
.success-mark, .benefits li::before, .pain-grid span {
  background: var(--gold);
  color: var(--brand-ink);
}
.accordion details { border-color: var(--line); background: #fffdf9; }
.accordion details[open] { border-color: #d47745; }
.accordion details p { color: #4c4038; background: #fff4e8; }
.accordion summary::after { color: var(--brand-accent-ink); }
.faq .intro { color: #4c4038; }
.review-stars { color: #a65d08; }
.gallery-frame { background: #f6d6c5; }
.dots i { background: #e6c5ae; }
.dots i.active { background: var(--sunset-orange); }
.service-grid article { border-color: var(--line); }
.cta, footer { border-top: 4px solid var(--sunset-orange); }
footer { color: #f6d6c5; }
.service-illustration { object-fit: contain; }

/* Keep every photograph inside one consistent frame without cropping. */
#gallery .gallery-frame {
  width: 100%;
  max-width: 1180px;
  aspect-ratio: 16 / 10;
  height: auto;
  overflow: hidden;
  background: #f2e8dc;
}
#gallery #gallery-image,
#gallery #gallery-image-next {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transform: none;
  transition: opacity .6s ease-in-out;
  will-change: opacity;
}
#gallery #gallery-image-next {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
#gallery .gallery-frame.crossfading #gallery-image { opacity: 0; }
#gallery .gallery-frame.crossfading #gallery-image-next { opacity: 1; }
#gallery .gallery-frame.no-transition #gallery-image,
#gallery .gallery-frame.no-transition #gallery-image-next { transition: none; }

@media (prefers-reduced-motion: reduce) {
  #gallery #gallery-image,
  #gallery #gallery-image-next { transition: none; }
}