/*
 * Pet Doors custom components.
 *
 * Structural colours derive from Horizon's palette custom properties so a
 * palette change in theme settings cascades here.
 *
 * The two warm brand tokens below are defined explicitly and deliberately -
 * Horizon's 4-slot palette has no secondary accent, and the warm accent is a
 * brand decision rather than something derivable from the teal.
 *
 * Accessibility note on the warm accent: --pd-warm is a decorative fill only
 * (icon shapes, rules, tinted panels). It is roughly 2.5:1 on the page
 * background, so it must never carry text. Use --pd-warm-ink for warm-coloured
 * text - that one is 5.3:1 and passes AA.
 */

:root {
  --pd-accent: var(--color-primary-button-background);
  --pd-accent-hover: var(--color-primary-button-hover-background);

  --pd-warm: #e08a3c;
  --pd-warm-ink: #a0551a;
  --pd-warm-soft: #fbf1e4;

  --pd-card: #ffffff;
  --pd-tint: #f5efe5;
  --pd-rule: rgb(var(--color-foreground-rgb) / 0.1);
  --pd-rule-strong: rgb(var(--color-foreground-rgb) / 0.18);
  --pd-muted: rgb(var(--color-foreground-rgb) / 0.72);

  --pd-shadow-sm: 0 1px 2px rgb(16 51 58 / 0.04), 0 2px 8px rgb(16 51 58 / 0.05);
  --pd-shadow-md: 0 2px 4px rgb(16 51 58 / 0.04), 0 8px 24px rgb(16 51 58 / 0.08);
  --pd-shadow-lg: 0 4px 8px rgb(16 51 58 / 0.05), 0 18px 48px rgb(16 51 58 / 0.12);

  --pd-radius: 16px;
  --pd-radius-lg: 22px;
  --pd-gap: 24px;
}

/* ---------------------------------------------------------------- shared */

.pd-section {
  padding-block: clamp(52px, 7.5vw, 96px);
}

.pd-section--tint {
  background: var(--pd-tint);
}

.pd-inner {
  width: min(100% - 40px, 1180px);
  margin-inline: auto;
}

.pd-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-subheading--family, inherit);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pd-warm-ink);
  margin: 0 0 14px;
}

.pd-eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--pd-warm);
}

.pd-h2 {
  font-size: clamp(1.85rem, 3.6vw, 2.7rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 16px;
  text-wrap: balance;
}

.pd-lede {
  color: var(--pd-muted);
  font-size: 1.0625rem;
  line-height: 1.6;
  max-width: 62ch;
  margin: 0 0 36px;
}

/* ------------------------------------------------------------------ hero */

.pd-hero {
  padding-block: clamp(36px, 5vw, 68px) 0;
  background:
    radial-gradient(120% 80% at 88% 0%, var(--pd-warm-soft) 0%, transparent 62%),
    var(--color-background);
}

/* --- background-image hero -------------------------------------------- */

.pd-hero--media {
  position: relative;
  isolation: isolate;
  background: var(--color-foreground);
  padding-block: clamp(44px, 6vw, 92px);
}

.pd-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

.pd-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pd-hero-focal, center) center;
  display: block;
}

/* The overlay is what makes white text legible over an arbitrary photo.
   On wide screens it is heaviest on the left where the copy sits and eases
   off toward the form. On narrow screens the copy spans the full width, so
   the overlay has to be uniform instead of directional. */
.pd-hero--media .pd-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(16 51 58 / var(--pd-hero-overlay, 0.88));
}

@media (min-width: 940px) {
  .pd-hero--media .pd-hero__bg::after {
    background: linear-gradient(
      to right,
      rgb(16 51 58 / calc(var(--pd-hero-overlay, 0.88) + 0.06)) 0%,
      rgb(16 51 58 / var(--pd-hero-overlay, 0.88)) 52%,
      rgb(16 51 58 / var(--pd-hero-overlay-edge, 0.62)) 100%
    );
  }
}

.pd-hero--media .pd-hero__copy {
  color: #fff;
}

.pd-hero--media .pd-hero__title {
  color: #fff;
}

.pd-hero--media .pd-hero__sub {
  color: rgb(255 255 255 / 0.86);
}

.pd-hero--media .pd-ticks li {
  color: rgb(255 255 255 / 0.95);
}

.pd-hero--media .pd-ticks svg {
  background: rgb(255 255 255 / 0.16);
  color: #fff;
}

.pd-hero--media .pd-eyebrow {
  color: #f3c48c;
}

.pd-hero--media .pd-eyebrow::before {
  background: var(--pd-warm);
}

.pd-hero--media .pd-phone {
  background: rgb(255 255 255 / 0.1);
  border-color: rgb(255 255 255 / 0.4);
  color: #fff;
  backdrop-filter: blur(4px);
}

.pd-hero--media .pd-phone:hover {
  background: rgb(255 255 255 / 0.18);
  color: #fff;
}

.pd-hero__grid {
  display: grid;
  gap: clamp(32px, 4.5vw, 56px);
  align-items: start;
  grid-template-columns: 1fr;
}

@media (min-width: 940px) {
  .pd-hero__grid {
    grid-template-columns: 1.06fr 0.94fr;
    align-items: center;
  }
}

.pd-hero__title {
  font-size: clamp(2.2rem, 5.2vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -0.022em;
  margin: 0 0 20px;
  text-wrap: balance;
}

.pd-hero__sub {
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--pd-muted);
  max-width: 52ch;
  margin: 0 0 28px;
}

.pd-ticks {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  display: grid;
  gap: 12px;
}

.pd-ticks li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  line-height: 1.4;
  font-size: 1rem;
}

.pd-ticks svg {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  padding: 3px;
  border-radius: 50%;
  background: var(--pd-warm-soft);
  color: var(--pd-warm-ink);
}

.pd-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.pd-phone {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  font-size: 1.0625rem;
  text-decoration: none;
  color: var(--color-foreground);
  background: var(--pd-card);
  border: 1px solid var(--pd-rule-strong);
  border-radius: 999px;
  padding: 11px 20px;
  box-shadow: var(--pd-shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.pd-phone:hover {
  color: var(--pd-accent);
  transform: translateY(-1px);
  box-shadow: var(--pd-shadow-md);
}

/* Wide photo band directly beneath the hero copy. The photos are the strongest
   asset on this site, so they get full width rather than a column. */
.pd-hero__banner {
  margin-top: clamp(36px, 5vw, 60px);
  padding-bottom: clamp(8px, 2vw, 20px);
}

.pd-hero__media {
  margin: 0;
  position: relative;
}

.pd-hero__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--pd-radius-lg);
  box-shadow: var(--pd-shadow-lg);
}

@media (min-width: 760px) {
  .pd-hero__media img {
    aspect-ratio: 16 / 7;
  }
}

.pd-hero__media figcaption {
  margin-top: 14px;
  font-size: 0.875rem;
  color: var(--pd-muted);
}

/* ---------------------------------------------------------- header cta */

.pd-header-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-self: end;
}

.pd-header-cta__phone {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  color: var(--color-foreground);
  white-space: nowrap;
}

.pd-header-cta__phone:hover {
  color: var(--pd-accent);
}

.pd-header-cta__button {
  display: inline-flex;
  align-items: center;
  background: var(--pd-accent);
  color: var(--color-primary-button-text);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 10px 20px;
  border-radius: 10px;
  white-space: nowrap;
  transition: background 0.15s ease;
}

.pd-header-cta__button:hover {
  background: var(--pd-accent-hover);
}

/* Below the menu-drawer breakpoint the header is tight, so the phone number
   drops and the button shrinks rather than wrapping the header onto two rows. */
@media screen and (max-width: 749px) {
  .pd-header-cta__phone span {
    display: none;
  }

  .pd-header-cta__button {
    padding: 9px 14px;
    font-size: 0.875rem;
  }
}

/* ----------------------------------------------------- interior page head */

.pd-page-header {
  padding-block: clamp(40px, 5.5vw, 76px) clamp(28px, 3.5vw, 44px);
  background:
    radial-gradient(120% 90% at 85% 0%, var(--pd-warm-soft) 0%, transparent 60%),
    var(--color-background);
}

.pd-page-header__title {
  font-size: clamp(2rem, 4.6vw, 3.1rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  max-width: 20ch;
  text-wrap: balance;
}

.pd-page-header__intro {
  color: var(--pd-muted);
  font-size: 1.125rem;
  line-height: 1.6;
  max-width: 62ch;
}

.pd-page-header__intro > :first-child {
  margin-top: 0;
}

.pd-page-header__note {
  margin: 26px 0 0;
  padding: 16px 20px;
  border-left: 3px solid var(--pd-warm);
  border-radius: 0 10px 10px 0;
  background: var(--pd-warm-soft);
  font-size: 0.9375rem;
  line-height: 1.55;
  max-width: 68ch;
}

.pd-page-header__note > :first-child {
  margin-top: 0;
}

.pd-page-header__note > :last-child {
  margin-bottom: 0;
}

.pd-page-header__note p {
  margin: 0 0 10px;
}

.pd-page-header__note ul {
  margin: 0 0 10px;
  padding-inline-start: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.pd-page-header__note li {
  position: relative;
  padding-inline-start: 26px;
  line-height: 1.55;
}

/* Numbered markers rather than bullets - the two parts of the quote are a
   sequence the customer receives, not an unordered list of features. */
.pd-page-header__note li::before {
  counter-increment: pd-note-item;
  content: counter(pd-note-item);
  position: absolute;
  left: 0;
  top: 1px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--pd-warm);
  color: var(--color-foreground);
  font-size: 0.6875rem;
  font-weight: 700;
}

.pd-page-header__note ul {
  counter-reset: pd-note-item;
}

/* ------------------------------------------------------------ quote form */

.pd-quote {
  background: var(--pd-card);
  border: 1px solid var(--pd-rule);
  border-radius: var(--pd-radius-lg);
  padding: clamp(24px, 3vw, 34px);
  box-shadow: var(--pd-shadow-lg);
}

.pd-quote__heading {
  font-size: 1.5rem;
  letter-spacing: -0.015em;
  margin: 0 0 8px;
}

.pd-quote__intro {
  color: var(--pd-muted);
  font-size: 0.9375rem;
  line-height: 1.5;
  margin: 0 0 22px;
}

.pd-quote__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  /* Align inputs to the bottom of each row so a label that wraps to two lines
     never knocks its neighbour's input out of line. */
  align-items: end;
}

@media (min-width: 560px) {
  .pd-quote__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.pd-quote__field--full {
  grid-column: 1 / -1;
}

.pd-quote__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pd-quote__field label {
  font-size: 0.8125rem;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* The label is a column so an optional hint can sit beneath it. Anything that
   belongs on the same line as the label text - such as the required marker -
   must go inside this span, or it becomes its own row. */
.pd-quote__label-text {
  display: block;
}

.pd-quote__hint {
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--pd-muted);
}

.pd-quote__req {
  color: var(--pd-warm-ink);
}

.pd-quote input,
.pd-quote select,
.pd-quote textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem; /* 16px avoids iOS zoom-on-focus */
  color: var(--color-foreground);
  background: var(--color-background);
  border: 1px solid var(--pd-rule-strong);
  border-radius: 10px;
  padding: 12px 13px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pd-quote textarea {
  resize: vertical;
}

.pd-quote input:focus-visible,
.pd-quote select:focus-visible,
.pd-quote textarea:focus-visible {
  outline: none;
  border-color: var(--pd-accent);
  box-shadow: 0 0 0 3px rgb(14 124 134 / 0.16);
}

.pd-quote__submit {
  margin-top: 22px;
  width: 100%;
  background: var(--pd-accent);
  color: var(--color-primary-button-text);
  border: 0;
  border-radius: 12px;
  padding: 15px 20px;
  font-weight: 600;
  font-size: 1.0625rem;
  cursor: pointer;
  box-shadow: var(--pd-shadow-md);
  transition: background 0.15s ease, transform 0.15s ease;
}

.pd-quote__submit:hover {
  background: var(--pd-accent-hover);
  transform: translateY(-1px);
}

.pd-quote__reassure {
  margin: 14px 0 0;
  font-size: 0.8125rem;
  color: var(--pd-muted);
  text-align: center;
}

.pd-quote__success,
.pd-quote__errors {
  border-radius: 12px;
  padding: 18px;
  display: grid;
  gap: 4px;
}

.pd-quote__success {
  border: 1px solid var(--pd-accent);
  background: rgb(14 124 134 / 0.06);
}

.pd-quote__errors {
  border: 1px solid #b3261e;
  color: #b3261e;
  background: #fdf3f2;
  margin-bottom: 18px;
}

.pd-quote__errors ul {
  margin: 4px 0 0;
  padding-inline-start: 18px;
}

/* -------------------------------------------------------------- trust bar */

.pd-trust {
  background: var(--color-foreground);
  color: var(--color-background);
  padding-block: 26px;
}

/* Equal-width grid columns made the spacing look uneven, because the four
   labels are different lengths and each sat left-aligned in its own column.
   Content-sized flex items with one shared gap reads as evenly spaced. */
.pd-trust__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px clamp(24px, 4vw, 52px);
}

.pd-trust__list li {
  display: flex;
  gap: 11px;
  align-items: center;
  font-size: 0.9375rem;
  line-height: 1.35;
  font-weight: 500;
}

@media (max-width: 640px) {
  .pd-trust__list {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

.pd-trust__list svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--pd-warm);
}

/* --------------------------------------------------------------- process */

.pd-steps {
  display: grid;
  gap: var(--pd-gap);
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  counter-reset: pd-step;
}

.pd-step {
  position: relative;
  border: 1px solid var(--pd-rule);
  border-radius: var(--pd-radius);
  padding: 30px 26px 28px;
  background: var(--pd-card);
  box-shadow: var(--pd-shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.pd-step:hover {
  transform: translateY(-3px);
  box-shadow: var(--pd-shadow-md);
}

.pd-step__num {
  counter-increment: pd-step;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--pd-accent);
  color: var(--color-primary-button-text);
  font-family: var(--font-heading--family, inherit);
  font-size: 1rem;
  margin-bottom: 18px;
  box-shadow: 0 0 0 6px rgb(14 124 134 / 0.1);
}

.pd-step__num::before {
  content: counter(pd-step, decimal-leading-zero);
}

.pd-step h3 {
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}

.pd-step p {
  margin: 0;
  color: var(--pd-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.pd-steps__cta {
  margin-top: 34px;
  text-align: center;
}

.pd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: var(--pd-accent);
  color: var(--color-primary-button-text);
  text-decoration: none;
  font-weight: 600;
  font-size: 1.0625rem;
  padding: 15px 30px;
  border-radius: 12px;
  box-shadow: var(--pd-shadow-md);
  transition: background 0.15s ease, transform 0.15s ease;
}

.pd-btn:hover {
  background: var(--pd-accent-hover);
  transform: translateY(-2px);
}

.pd-steps__cta-note {
  margin: 12px 0 0;
  font-size: 0.875rem;
  color: var(--pd-muted);
}

@media (prefers-reduced-motion: reduce) {
  .pd-btn {
    transition: none;
  }

  .pd-btn:hover {
    transform: none;
  }
}

/* ------------------------------------------------------------------- faq */

.pd-faq__list {
  max-width: 860px;
  background: var(--pd-card);
  border: 1px solid var(--pd-rule);
  border-radius: var(--pd-radius);
  box-shadow: var(--pd-shadow-sm);
  overflow: hidden;
}

.pd-faq__item + .pd-faq__item {
  border-top: 1px solid var(--pd-rule);
}

.pd-faq__item summary {
  cursor: pointer;
  list-style: none;
  padding: 22px 52px 22px 26px;
  position: relative;
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.4;
  transition: background 0.15s ease;
}

.pd-faq__item summary:hover {
  background: var(--pd-warm-soft);
}

.pd-faq__item summary::-webkit-details-marker {
  display: none;
}

.pd-faq__item summary::after {
  content: "";
  position: absolute;
  right: 24px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -7px;
  border-right: 2px solid var(--pd-warm-ink);
  border-bottom: 2px solid var(--pd-warm-ink);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.pd-faq__item[open] summary::after {
  transform: rotate(-135deg);
  margin-top: -2px;
}

.pd-faq__item summary:focus-visible {
  outline: 2px solid var(--pd-accent);
  outline-offset: -2px;
}

.pd-faq__answer {
  padding: 0 26px 24px;
  color: var(--pd-muted);
  line-height: 1.65;
  max-width: 68ch;
}

.pd-faq__answer > :first-child {
  margin-top: 0;
}

.pd-faq__answer > :last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------- gallery */

.pd-gallery {
  display: grid;
  gap: var(--pd-gap);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.pd-gallery__item {
  margin: 0;
}

.pd-gallery__item--pair {
  grid-column: span 2;
}

@media (max-width: 700px) {
  .pd-gallery__item--pair {
    grid-column: auto;
  }
}

.pd-gallery img {
  display: block;
  width: 100%;
  height: auto;
  /* Most real job photos are shot in portrait on a phone. A landscape crop
     decapitates the subject, so the grid is portrait-first. */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--pd-radius);
  box-shadow: var(--pd-shadow-md);
  background: var(--pd-tint);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.pd-gallery__item:hover img {
  transform: translateY(-4px);
  box-shadow: var(--pd-shadow-lg);
}

.pd-gallery figcaption {
  margin-top: 12px;
  font-size: 0.875rem;
  color: var(--pd-muted);
  line-height: 1.45;
}

.pd-gallery__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.pd-gallery__half {
  position: relative;
}

.pd-gallery__tag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--color-foreground);
  color: var(--color-background);
}

.pd-gallery__tag--after {
  background: var(--pd-accent);
  color: var(--color-primary-button-text);
}

.pd-gallery__empty {
  border: 1px dashed var(--pd-rule-strong);
  border-radius: var(--pd-radius);
  padding: 32px;
  color: var(--pd-muted);
  text-align: center;
}

/* --------------------------------------------------------- service areas */

.pd-areas__grid {
  display: grid;
  gap: 10px 24px;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.pd-areas__grid li {
  border-bottom: 1px solid var(--pd-rule);
}

.pd-areas__grid a,
.pd-areas__grid span {
  display: block;
  padding: 11px 0;
  text-decoration: none;
  color: var(--color-foreground);
  font-size: 0.9375rem;
}

.pd-areas__grid a:hover {
  color: var(--pd-accent);
}

.pd-areas__note {
  margin-top: 28px;
  color: var(--pd-muted);
  font-size: 0.9375rem;
  max-width: 62ch;
}

/* -------------------------------------------------------------- cta band */

.pd-cta {
  position: relative;
  overflow: hidden;
  background: var(--color-foreground);
  color: var(--color-background);
  border-radius: var(--pd-radius-lg);
  padding: clamp(36px, 5vw, 62px);
  display: grid;
  gap: 30px;
  align-items: center;
  box-shadow: var(--pd-shadow-lg);
}

.pd-cta::after {
  content: "";
  position: absolute;
  inset: auto -60px -120px auto;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: rgb(224 138 60 / 0.16);
  pointer-events: none;
}

@media (min-width: 860px) {
  .pd-cta {
    grid-template-columns: 1fr auto;
  }
}

.pd-cta h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
  text-wrap: balance;
}

.pd-cta p {
  margin: 0;
  opacity: 0.85;
  max-width: 54ch;
  line-height: 1.55;
}

.pd-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  position: relative;
  z-index: 1;
}

.pd-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--pd-warm);
  color: var(--color-foreground);
  text-decoration: none;
  font-weight: 600;
  padding: 15px 26px;
  border-radius: 12px;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.pd-cta__btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
}

.pd-cta__btn--ghost {
  background: transparent;
  color: var(--color-background);
  border: 1px solid rgb(255 255 255 / 0.38);
}

.pd-cta__btn--ghost:hover {
  background: rgb(255 255 255 / 0.12);
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  .pd-faq__item summary::after,
  .pd-step,
  .pd-gallery img,
  .pd-phone,
  .pd-quote__submit,
  .pd-cta__btn {
    transition: none;
  }

  .pd-step:hover,
  .pd-gallery__item:hover img,
  .pd-phone:hover,
  .pd-quote__submit:hover,
  .pd-cta__btn:hover {
    transform: none;
  }
}