/* ==========================================================================
   Door to Door Pest Control — site layer
   Turns the design-system tokens into real component classes so the markup
   ships as static HTML and the layout can respond to viewport width.
   Depends on design-system.css (tokens, type classes, interaction states).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Document
   -------------------------------------------------------------------------- */

/* Smooth scrolling is switched on by site.js once the page has loaded. Set
   here on html it also animates the jump to #section when arriving from
   another page, so the page opened at the top and glided all the way down. */
html {
  scroll-padding-top: 88px;
}
@media (prefers-reduced-motion: no-preference) {
  html.is-loaded {
    scroll-behavior: smooth;
  }
}

body {
  background: var(--color-surface);
  overflow-x: hidden;
}

:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}

.dd-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--color-primary);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 var(--radius-md) 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
}
.dd-skip:focus {
  left: 0;
}

.dd-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--page-pad);
  padding-right: var(--page-pad);
}

.dd-section {
  padding: 80px 0;
}
.dd-section--tight {
  padding: 56px 0;
}

.dd-surface {
  background: var(--color-surface);
}
.dd-surface-alt {
  background: var(--color-accent-warm);
}
.dd-surface-dark {
  background: var(--color-neutral);
  color: #fff;
}
.dd-surface-tint {
  background: var(--color-secondary-tint);
}

/* Measure hint. The value arrives as an inline custom property (--mw) rather
   than an inline max-width, so the mobile override below can actually win. */
.mw {
  max-width: var(--mw);
}

.dd-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   2. Buttons — mirrors components/core/Button.jsx
   -------------------------------------------------------------------------- */

.dd-btn {
  font-family: var(--font-body);
  font-weight: var(--type-label-lg-weight);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-full);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, opacity .18s ease;
  font-size: var(--type-label-lg-size);
  padding: 0 30px;
  height: 51px;
  -webkit-tap-highlight-color: transparent;
}
.dd-btn--sm {
  font-size: 13px;
  padding: 0 18px;
  height: 40px;
}
.dd-btn--lg {
  font-size: 15px;
  padding: 0 34px;
  height: 56px;
}
.dd-btn--block {
  width: 100%;
}

.dd-btn--primary {
  background-color: var(--color-primary);
  color: var(--color-surface);
}
.dd-btn--secondary {
  background-color: var(--color-surface);
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.dd-btn--white-filled {
  background-color: var(--color-surface);
  color: var(--color-primary);
  font-weight: 700;
}
.dd-btn--outline-white {
  background-color: transparent;
  color: var(--color-surface);
  border-color: var(--border-on-dark-strong);
}

.dd-btn svg {
  flex-shrink: 0;
}

/* Circular arrow text link */
.dd-arrowlink {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  cursor: pointer;
  color: var(--color-neutral-80);
  font-family: var(--font-body);
  font-size: var(--type-label-lg-size);
  line-height: var(--type-label-lg-line);
  font-weight: 700;
}
.dd-arrowlink__ring {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid currentColor;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.dd-arrowlink:hover .dd-arrowlink__ring {
  transform: translateX(3px);
}

.dd-inline-link {
  color: var(--color-secondary);
  font-weight: 700;
  text-decoration: none;
}
.dd-inline-link:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   3. Header — one bar: brand, nav, phone, CTA, mobile drawer
   -------------------------------------------------------------------------- */

.dd-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 0.5px solid var(--border-subtle);
}
.dd-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  gap: 28px;
}
.dd-header__brand {
  flex: 0 0 auto;
}
.dd-header__nav {
  display: flex;
  gap: 30px;
  margin-left: auto;
}
.dd-header__nav a {
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--color-neutral-80);
  white-space: nowrap;
  transition: color .15s ease;
}
.dd-header__nav a:hover {
  color: var(--color-primary);
}
.dd-header__nav a[aria-current="page"] {
  color: var(--color-primary);
}
.dd-header__actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 0 0 auto;
  margin-left: auto;
}
.dd-header__nav + .dd-header__actions {
  margin-left: 0;
}
.dd-header__phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.3px;
  color: var(--color-neutral-80);
  white-space: nowrap;
  transition: color .15s ease;
}
.dd-header__phone:hover {
  color: var(--color-primary);
}
.dd-header__phone svg {
  color: var(--color-primary);
  flex-shrink: 0;
}
/* WhatsApp's own green, so it reads as WhatsApp at a glance. The darker
   shade passes contrast on white; the brand's #25d366 does not. */
.dd-header__wa {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  color: #128c4b;
  background: #e8f7ee;
  transition: background-color .15s ease;
}
.dd-header__wa:hover {
  background: #d3f0de;
}

/* The logo's viewBox is 3116 x 731. Height sets the size; "PEST CONTROL" is
   about a sixth of it, so below 44px that line stops being readable. */
.dd-wordmark {
  display: block;
  height: 48px;
  width: auto;
}
.dd-wordmark--dark {
  height: 60px;
}

.dd-burger {
  all: unset;
  display: none;
  box-sizing: border-box;
  cursor: pointer;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  color: var(--color-neutral-80);
}
.dd-burger:hover {
  background: var(--color-accent-warm);
}

.dd-drawer {
  display: none;
  border-top: 0.5px solid var(--border-subtle);
  background: #fff;
  padding: 12px 0 22px;
}
.dd-drawer[data-open="true"] {
  display: block;
}
.dd-drawer__nav {
  display: flex;
  flex-direction: column;
}
.dd-drawer__nav a {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-neutral-80);
  padding: 14px 0;
  border-bottom: 0.5px solid var(--border-subtle);
}
.dd-drawer__cta {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dd-drawer__hours {
  margin-top: 16px;
  color: var(--color-tertiary);
  text-align: center;
}

/* --------------------------------------------------------------------------
   4. Hero
   -------------------------------------------------------------------------- */

.dd-hero {
  background: var(--color-neutral);
  border-bottom: 4px solid var(--color-primary);
  color: #fff;
}

.dd-hero__inner {
  padding-block: 88px 92px;
  display: grid;
  grid-template-columns: 1fr 0.82fr;
  gap: 56px;
  align-items: center;
}
.dd-hero__copy {
  max-width: 640px;
}

/* Video hero. The clip plays behind the copy, but the copy never sits on the
   moving picture itself. On wide screens the video starts a third of the way
   across, so the technician lands on the right, and its left edge fades into
   the navy the copy sits on. The clip is a white room full of white fog, so it
   also gets a light navy tint all over; without it the room glares and pulls
   the eye off the headline and the red button. Below 900px there is no room to
   put the two side by side, so the video becomes its own strip above the copy,
   and the copy sits on plain navy. */
.dd-hero--video {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.dd-hero--video .dd-hero__inner {
  position: relative;
  z-index: 1;
  grid-template-columns: 1fr;
  min-height: 600px;
}
.dd-hero__media {
  position: absolute;
  /* Starts just inside the copy column's right edge, so the fade below,
     not the video, is what sits behind the end of each line. */
  inset: 0 0 0 max(38%, calc(50% - 160px));
  z-index: 0;
  background: var(--color-neutral);
}
.dd-hero__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 50%;
  filter: saturate(0.85);
}
.dd-hero__media::after {
  content: "";
  position: absolute;
  inset: 0 0 0 -2px;  /* covers the subpixel seam at the video's left edge */
  background:
    linear-gradient(90deg,
      var(--color-neutral) 0%,
      rgba(19, 31, 46, 0.9) 16%,
      rgba(19, 31, 46, 0.45) 38%,
      rgba(19, 31, 46, 0.22) 55%,
      rgba(19, 31, 46, 0.22) 100%),
    linear-gradient(0deg, rgba(19, 31, 46, 0.5) 0%, rgba(19, 31, 46, 0) 30%);
}
.dd-hero__pause {
  position: absolute;
  z-index: 2;
  right: 20px;
  bottom: 20px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(19, 31, 46, 0.55);
  color: #fff;
  cursor: pointer;
}
.dd-hero__pause:hover {
  background: rgba(19, 31, 46, 0.8);
}
.dd-hero__pause:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.dd-hero__pause path {
  fill: currentColor;
}
.dd-hero__pause-play,
.dd-hero__pause[data-paused] .dd-hero__pause-bars {
  display: none;
}
.dd-hero__pause[data-paused] .dd-hero__pause-play {
  display: inline;
}
.dd-hero h1 {
  color: #fff;
  margin-top: 16px;
  max-width: 15ch;
}
.dd-hero__lead {
  color: rgba(255, 255, 255, 0.78);
  margin-top: 18px;
  max-width: 48ch;
}
.dd-hero__actions {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 34px;
  flex-wrap: wrap;
}
.dd-hero__rating {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
  flex-wrap: wrap;
}
.dd-hero__rating span {
  color: rgba(255, 255, 255, 0.72);
}
.dd-hero__fine {
  color: rgba(255, 255, 255, 0.62);
  margin-top: 22px;
}

/* Page hero for interior pages */
.dd-pagehero {
  background: var(--color-neutral);
  border-bottom: 4px solid var(--color-primary);
  color: #fff;
}
.dd-pagehero__inner {
  padding-block: 84px 88px;
}
.dd-pagehero--short .dd-pagehero__inner {
  padding-block: 64px 66px;
}
.dd-pagehero h1 {
  color: #fff;
  margin-top: 16px;
  max-width: 18ch;
}
.dd-pagehero__lead {
  color: rgba(255, 255, 255, 0.78);
  margin-top: 18px;
  max-width: 58ch;
}
.dd-pagehero__actions {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 32px;
  flex-wrap: wrap;
}
.dd-pagehero__phone {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.4px;
  color: #fff;
  text-decoration: none;
}

/* Pest page hero with a species photograph beside the copy */
.dd-pagehero--photo .dd-pagehero__inner {
  display: grid;
  grid-template-columns: 1fr 0.78fr;
  gap: 56px;
  align-items: center;
}
.dd-pagehero__photo {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 0.5px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
}
.dd-pagehero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Breadcrumbs */
.dd-crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-family: var(--font-body);
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 18px;
}
.dd-crumbs a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
}
.dd-crumbs a:hover {
  color: #fff;
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   5. Bands
   -------------------------------------------------------------------------- */

.dd-band {
  background: var(--color-neutral);
  color: #fff;
}
.dd-band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding-block: 26px;
  flex-wrap: wrap;
}
.dd-band__lead {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.dd-band__shout {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.6px;
  color: var(--color-secondary-light);
}
.dd-band__sub {
  color: rgba(255, 255, 255, 0.7);
}
.dd-band__sub a {
  color: #fff;
  font-weight: 700;
}
.dd-band__actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.dd-band__or {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 0.5px solid rgba(255, 255, 255, 0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
}
.dd-band__ask {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: #fff;
}

/* --------------------------------------------------------------------------
   6. Trusted-by logo wall
   -------------------------------------------------------------------------- */

.dd-logos {
  background: var(--color-surface);
  border-bottom: 0.5px solid var(--border-subtle);
}
.dd-logos__inner {
  padding-block: 46px 50px;
}
.dd-logos__label {
  color: var(--color-neutral-40);
  text-align: center;
}
.dd-logos__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: 44px;
  row-gap: 30px;
  margin-top: 30px;
  max-width: 940px;
  margin-inline: auto;
}
.dd-logos__row img {
  /* Height is set per logo by gen.py, so each carries a similar weight. */
  width: auto;
  max-width: 150px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.62;
  transition: opacity .18s ease;
}
.dd-logos__row img:hover {
  opacity: 1;
}
.dd-logos__row img[data-invert] {
  filter: grayscale(100%) invert(100%) brightness(0.55);
}

/* --------------------------------------------------------------------------
   7. Section heads
   -------------------------------------------------------------------------- */

.dd-sectionhead {
  text-align: center;
}
.dd-sectionhead h2 {
  margin-top: 12px;
  margin-inline: auto;
  max-width: 30ch;
}
.dd-sectionhead p {
  color: var(--color-tertiary);
  margin-top: 14px;
  max-width: 60ch;
  margin-inline: auto;
}
.dd-sectionhead--left {
  text-align: left;
}
.dd-sectionhead--left h2,
.dd-sectionhead--left p {
  margin-inline: 0;
}
.dd-sectionhead--dark h2 {
  color: #fff;
}
.dd-sectionhead--dark p {
  color: rgba(255, 255, 255, 0.72);
}

/* --------------------------------------------------------------------------
   8. Service cards / pest grid
   -------------------------------------------------------------------------- */

.dd-grid {
  display: grid;
  gap: 18px;
}
.dd-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}
.dd-grid--3 {
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.dd-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

.dd-service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 224px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: 24px 24px 22px;
  background: var(--color-surface);
  border: 1.5px solid var(--border-divider);
  color: var(--color-neutral-80);
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.dd-service-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-secondary);
  box-shadow: 0 14px 32px -18px rgba(6, 119, 232, 0.4);
}
.dd-service-card__chip {
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-secondary-tint);
}
.dd-service-card__chip svg {
  width: 32px;
  height: 32px;
}
.dd-service-card h3 {
  color: inherit;
  margin: 20px 0 0;
  max-width: 12ch;
  letter-spacing: -0.4px;
}
.dd-service-card p {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 21px;
  color: var(--color-tertiary);
  margin: 8px 0 0;
  max-width: 30ch;
}
.dd-service-card__more {
  margin-top: auto;
  padding-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: -0.2px;
  color: var(--color-secondary);
}
.dd-service-card:hover .dd-service-card__more svg {
  transform: translateX(3px);
}
.dd-service-card__more svg {
  transition: transform .18s ease;
}

/* --------------------------------------------------------------------------
   9. Two-column split
   -------------------------------------------------------------------------- */

.dd-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  padding-block: 80px;
}
.dd-split--top {
  align-items: start;
}

/* The owner, cut out, standing on a blue arc. The arc is a circle centred on
   the section's bottom edge, so its left end meets that edge where the photo
   column starts, and it runs off the right side of the page. The section
   clips it, and her, at the line where the grey section below begins, so the
   two meet in one straight edge. */
.dd-owner-section {
  overflow: clip;
}
.dd-owner-section .dd-split {
  padding-bottom: 0;
  align-items: end;
}
.dd-owner-section .dd-split > div:first-child {
  align-self: center;
  padding-bottom: 80px;
}
/* --- People on circles ----------------------------------------------------
   Cut-out photographs of the team stand on circles, in the same language as
   the rings on the dark panels: solid circles and 1.5px outlines, nothing
   else. Each circle is centred on the bottom edge of its section, so only the
   top half shows, and the section clips it and the people at the line where
   the next section begins. */
.dd-shape {
  position: absolute;
  border-radius: 50%;
  aspect-ratio: 1;
  pointer-events: none;
}
.dd-cutout {
  position: relative;
  display: block;
  margin-bottom: -2px;   /* the last row of a cut-out is soft; the clip hides it */
}
.dd-cutout img {
  display: block;
  width: 100%;
  height: auto;
}
.dd-stage-section {
  overflow: clip;
}
.dd-section.dd-stage-section {
  padding-bottom: 0;
}

/* The owner: a blue circle inside a pale one, both running off the right
   edge. --d is wide enough to reach the edge of any screen, since the column
   starts about half way across. */
.dd-owner {
  --d: max(150%, 54vw);
  position: relative;
  display: flex;
  justify-content: flex-end;
}
.dd-owner__arc,
.dd-owner__halo {
  bottom: 0;
  transform: translateY(50%);
}
.dd-owner__arc {
  left: 0;
  width: var(--d);
  background: var(--color-secondary);
}
.dd-owner__halo {
  left: calc(var(--d) * -0.09);
  width: calc(var(--d) * 1.18);
  background: var(--color-secondary-tint);
}
.dd-owner__ring {
  left: 6%;
  top: 34%;
  width: 150px;
  border: 1.5px solid var(--color-primary);
  opacity: 0.55;
}
.dd-owner__photo {
  width: 92%;
  margin-right: -2%;
}

/* The team of four, centred on a blue circle with an outline ring. The
   photograph drops below the section edge so the cut falls around the waist;
   below that it is phones, a flag and four different pairs of trousers. */
.dd-teamstage {
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: 40px;
}
.dd-teamstage__arc,
.dd-teamstage__ring {
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
}
.dd-teamstage__arc {
  width: 62%;
  background: var(--color-secondary);
}
.dd-teamstage__ring {
  width: 74%;
  border: 1.5px solid var(--color-secondary);
  opacity: 0.35;
}
.dd-teamstage__photo {
  width: min(100%, 760px);
  margin-bottom: calc(-0.26 * min(100%, 760px));
}

/* About: three people in a row, the owner in the middle on blue, the others
   on pale circles. The three photographs are framed differently (a close
   portrait, a three-quarter shot, a pair at full length), so each is sized
   to make the heads match, and --sink drops the lower part of a photograph
   below the section edge instead of shrinking it. The values put the outer
   two at the same height and the owner just above them. */
.dd-lineup {
  display: grid;
  grid-template-columns: 0.92fr 1fr 1.32fr;
  align-items: end;
  column-gap: 8px;
  padding-top: 56px;
}
.dd-lineup__person {
  --sink: 0%;
  position: relative;
  display: flex;
  justify-content: center;
  min-width: 0;
}
.dd-lineup__person--lead {
  --sink: 29%;
  z-index: 1;
}
.dd-lineup__person--pair {
  --sink: 42.5%;
}
.dd-lineup__person .dd-cutout {
  width: 100%;
  margin-bottom: calc(-1 * var(--sink) - 2px);
}
.dd-lineup__disc,
.dd-lineup__ring {
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
}
.dd-lineup__disc {
  width: 118%;
  background: rgba(6, 119, 232, 0.14);   /* --color-secondary, softened */
}
.dd-lineup__person--lead .dd-lineup__disc {
  width: 104%;
  background: var(--color-secondary);
}
.dd-lineup__ring {
  width: 130%;
  border: 1.5px solid var(--color-primary);
  opacity: 0.45;
}

.dd-split--narrow-left {
  grid-template-columns: 0.8fr 1fr;
  gap: 56px;
}
.dd-split--narrow-right {
  grid-template-columns: 1fr 0.9fr;
  gap: 56px;
}
.dd-split--faq {
  grid-template-columns: 0.7fr 1fr;
  gap: 56px;
}
.dd-split--trusted {
  grid-template-columns: 1.05fr 0.95fr;
  padding: 0;
}
.dd-split h2 {
  margin-top: 12px;
  margin-bottom: 0;
  max-width: 16ch;
}
.dd-split__body {
  color: var(--color-tertiary);
  margin-top: 16px;
  max-width: 52ch;
}
.dd-split__actions {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 26px;
  flex-wrap: wrap;
}
.dd-split__actions .dd-body-sm {
  color: var(--color-tertiary);
}
.dd-split__media--first {
  order: -1;
}

/* Initials in place of a customer's headshot, until real ones arrive. */
.dd-avatar {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-secondary-tint);
  color: var(--color-secondary);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.02em;
}

.dd-inline-testimonial {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 0.5px solid var(--border-subtle);
}
.dd-inline-testimonial p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 26px;
  color: var(--color-neutral-80);
  max-width: 42ch;
}
.dd-inline-testimonial__by {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.dd-inline-testimonial__name {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.2px;
  color: var(--color-neutral-80);
}
.dd-inline-testimonial__where {
  color: var(--color-neutral-40);
}


/* --------------------------------------------------------------------------
   9b. Photography
   Client job photos are portrait phone shots, so the slots are shaped to suit
   them rather than forcing a wide crop that cuts the technician out of frame.
   -------------------------------------------------------------------------- */

.dd-photo {
  display: block;
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-accent-warm);
}
.dd-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dd-split__photo {
  aspect-ratio: 1 / 1;
}

.dd-gallery {
  display: grid;
  gap: 20px;
  margin-top: 36px;
}
.dd-gallery--2 {
  grid-template-columns: repeat(2, 1fr);
}
.dd-gallery--3 {
  grid-template-columns: repeat(3, 1fr);
}
.dd-gallery .dd-photo {
  aspect-ratio: 4 / 3;
}
.dd-gallery--wide {
  margin-top: 44px;
}

/* --------------------------------------------------------------------------
   10. Seasonal pest carousel
   -------------------------------------------------------------------------- */

.dd-carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(190px, 1fr);
  gap: 18px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding-bottom: 6px;
  margin-top: 32px;
}
.dd-carousel::-webkit-scrollbar {
  height: 0;
}
.dd-carousel > * {
  scroll-snap-align: start;
}
.dd-carousel__photo {
  width: 100%;
  height: 170px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  background: var(--color-accent-warm);
}
/* still-empty slots keep the dashed placeholder look */
img.dd-carousel__photo {
  border: 1px dashed var(--color-neutral-20);
}
picture.dd-carousel__photo {
  overflow: hidden;
  border: 0.5px solid var(--border-subtle);
}
picture.dd-carousel__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}
.dd-carousel a:hover picture.dd-carousel__photo {
  border-color: var(--color-secondary);
}
.dd-carousel__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.2px;
  color: var(--color-neutral-80);
  margin-top: 14px;
}
.dd-carousel__latin {
  display: block;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 12.5px;
  color: var(--color-neutral-40);
  margin-top: 3px;
}
.dd-sectionrow {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   11. Testimonials (dark)
   -------------------------------------------------------------------------- */

.dd-testimonials {
  background: var(--color-neutral);
  color: #fff;
}
.dd-testimonials__inner {
  padding-block: 84px 88px;
}
.dd-featured {
  margin-top: 48px;
  background: var(--gradient-navy);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--color-primary);
  padding: 42px 46px;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 44px;
  align-items: center;
}
.dd-featured__ring {
  position: absolute;
  top: -110px;
  right: -90px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.10);
  pointer-events: none;
}
.dd-featured > div {
  position: relative;
}
.dd-featured blockquote {
  margin: 16px 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 30px;
  line-height: 1.24;
  letter-spacing: -0.8px;
  color: #fff;
  max-width: 22ch;
}
.dd-featured__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.3px;
  color: #fff;
  margin-top: 16px;
}
.dd-featured__role {
  color: rgba(255, 255, 255, 0.7);
}
.dd-featured__note {
  color: rgba(255, 255, 255, 0.45);
  margin-top: 16px;
  line-height: 18px;
  max-width: 30ch;
}

.dd-testimonial-card {
  margin: 0;
  background-color: rgba(255, 255, 255, 0.05);
  border: 0.5px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  padding: 22px;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
}
.dd-testimonial-card blockquote {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line);
  color: rgba(255, 255, 255, 0.7);
  flex: 1;
}
.dd-testimonial-card figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dd-testimonial-card figcaption b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.2px;
  color: #fff;
}
.dd-testimonial-card figcaption span {
  font-family: var(--font-body);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line);
  color: rgba(255, 255, 255, 0.35);
}

.dd-pulls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 44px;
  padding-top: 40px;
  border-top: 0.5px solid rgba(255, 255, 255, 0.1);
}
.dd-pulls p {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  line-height: 29px;
  letter-spacing: -0.3px;
  color: rgba(255, 255, 255, 0.92);
  max-width: 42ch;
}
.dd-pulls__by {
  margin-top: 16px;
}
.dd-pulls__by b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.2px;
  color: #fff;
}
.dd-pulls__by span {
  color: rgba(255, 255, 255, 0.5);
}

/* --------------------------------------------------------------------------
   12. Stats + same-day CTA
   -------------------------------------------------------------------------- */

.dd-statsrow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding-block: 20px 80px;
}
.dd-statcard {
  background: var(--color-accent-warm);
  border-radius: var(--radius-lg);
  padding: 36px;
  display: flex;
  flex-direction: column;
}
.dd-statcard h3 {
  margin-top: 12px;
  margin-bottom: 0;
  color: var(--color-neutral-80);
  max-width: 18ch;
}
.dd-statgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 24px;
  margin-top: 28px;
}
.dd-statgrid__n {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 46px;
  letter-spacing: -1.4px;
  line-height: 1;
  color: var(--color-neutral-80);
}
.dd-statgrid__n--sm {
  font-size: 34px;
}
.dd-statgrid__l {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--color-tertiary);
  margin-top: 8px;
}
.dd-badges {
  margin-top: auto;
  padding-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.dd-badges span {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-tertiary);
  background: var(--color-surface);
  border: 0.5px solid var(--border-subtle);
  border-radius: var(--radius-full);
  padding: 7px 14px;
}

.dd-sameday {
  background: var(--gradient-navy);
  border-radius: var(--radius-lg);
  padding: 36px;
  color: #fff;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.dd-sameday__ring {
  position: absolute;
  bottom: -90px;
  right: -70px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  pointer-events: none;
}
.dd-sameday > * {
  position: relative;
}
.dd-sameday__kicker {
  color: rgba(255, 255, 255, 0.7);
}
.dd-sameday__body {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 18px;
  line-height: 26px;
  color: #fff;
  margin-top: 12px;
  max-width: 34ch;
}
.dd-sameday__shout {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 40px;
  letter-spacing: -1.2px;
  line-height: 42px;
  color: var(--color-secondary-light);
  margin-top: auto;
  padding-top: 24px;
}
.dd-sameday__fine {
  color: rgba(255, 255, 255, 0.45);
  margin-top: 14px;
}

/* --------------------------------------------------------------------------
   13. FAQ
   -------------------------------------------------------------------------- */

.dd-faq-item {
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);
  padding: 18px 0;
}
.dd-faq-item__q {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-h4-size);
  line-height: var(--type-h4-line);
  letter-spacing: var(--type-h4-track);
  color: var(--text-strong);
  transition: color .15s ease;
}
.dd-faq-item__q:hover {
  color: var(--color-primary);
}
.dd-faq-item__q:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 4px;
}
.dd-faq-item__sign {
  flex-shrink: 0;
  color: var(--color-primary);
  font-size: 22px;
  line-height: 1;
  transition: transform .2s ease;
}
.dd-faq-item__q[aria-expanded="true"] .dd-faq-item__sign {
  transform: rotate(45deg);
}
.dd-faq-item__a {
  margin: 12px 0 0;
  max-width: 62ch;
  font-family: var(--font-body);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line);
  color: var(--color-tertiary);
}
.dd-faq-item__a[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   14. Quote form
   -------------------------------------------------------------------------- */

.dd-quote {
  background: var(--color-secondary-tint);
}
.dd-quote__inner {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 56px;
  align-items: center;
  padding-block: 80px;
}
.dd-quote h2 {
  margin: 12px 0 0;
  max-width: 16ch;
  color: var(--color-neutral-80);
}
.dd-quote h2 em {
  font-style: normal;
  color: var(--color-secondary);
}
.dd-quote__lead {
  color: var(--color-tertiary);
  margin-top: 18px;
  max-width: 40ch;
}
.dd-quote__points {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 28px;
}
.dd-quote__points div {
  display: flex;
  align-items: center;
  gap: 12px;
}
.dd-quote__points span {
  color: var(--color-neutral-80);
  font-weight: 600;
}

.dd-form {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 0.5px solid var(--border-subtle);
  box-shadow: 0 18px 50px rgba(11, 18, 30, 0.10);
  padding: 36px 34px;
}
.dd-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.dd-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 18px;
}
.dd-form__row .dd-field {
  margin-top: 0;
}
.dd-field > span {
  font-family: var(--font-body);
  font-size: var(--type-label-md-size);
  font-weight: var(--type-label-md-weight);
  color: var(--text-strong);
}
.dd-field > span small {
  color: var(--color-tertiary);
  font-weight: 400;
  font-size: inherit;
}
.dd-input {
  font-family: var(--font-body);
  font-size: var(--type-body-md-size);
  color: var(--color-neutral);
  background-color: var(--color-surface);
  border: 1px solid var(--color-neutral-20);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  width: 100%;
}
select.dd-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7785' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 42px;
}
textarea.dd-input {
  resize: vertical;
  min-height: 88px;
}
.dd-form__submit {
  margin-top: 24px;
}
.dd-form__fine {
  color: var(--color-tertiary);
  text-align: center;
  margin-top: 14px;
  margin-bottom: 0;
}
/* Shown only when the send fails. No display rule, so [hidden] still works. */
.dd-form__error {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--color-primary-90);
  color: var(--color-neutral-80);
  font-size: 14px;
  line-height: 1.5;
}
.dd-form__error:focus {
  outline: none;
}
.dd-form__sent {
  text-align: center;
  padding: 48px 40px;
}
.dd-form__sent-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--color-secondary-tint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dd-form__sent h3 {
  margin: 20px 0 0;
  color: var(--color-neutral-80);
}
.dd-form__sent p {
  color: var(--color-tertiary);
  margin-top: 12px;
  max-width: 32ch;
  margin-inline: auto;
}
[hidden] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */

.dd-footer {
  background: var(--color-neutral);
  color: #fff;
  border-top: 4px solid var(--color-primary);
}
.dd-footer__inner {
  padding-block: 56px 0;
}
.dd-footer__cols {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-top: 40px;
}
.dd-footer__contact {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.dd-footer__addr {
  display: flex;
  gap: 12px;
}
.dd-footer__addr b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  display: block;
}
.dd-footer__addr div > span {
  display: block;
  color: rgba(255, 255, 255, 0.6);
  line-height: 22px;
  font-size: var(--type-body-sm-size);
}
.dd-footer__label {
  color: rgba(255, 255, 255, 0.45);
}
.dd-footer__tel {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.6px;
  color: #fff;
  text-decoration: none;
  display: block;
  margin-top: 6px;
}
.dd-footer__tel + .dd-footer__tel {
  margin-top: 2px;
}
.dd-footer__wa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
}
.dd-footer__wa svg {
  color: #3ddc84;
}
.dd-footer__wa:hover span {
  text-decoration: underline;
}
.dd-footer__mail {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  margin-top: 10px;
  display: inline-block;
}
.dd-footer__hours {
  color: rgba(255, 255, 255, 0.6);
  margin-top: 6px;
}
.dd-footer__col ul {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.dd-footer__col a {
  font-family: var(--font-body);
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
}
.dd-footer__col a:hover {
  color: #fff;
}
.dd-footer__base {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 44px;
  padding-top: 22px;
  padding-bottom: 28px;
  border-top: 0.5px solid rgba(255, 255, 255, 0.1);
  flex-wrap: wrap;
  gap: 14px;
}
.dd-footer__base span,
.dd-footer__base a {
  color: rgba(255, 255, 255, 0.4);
}
.dd-footer__base a:hover {
  color: rgba(255, 255, 255, 0.8);
}
.dd-footer__legal {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   16. Prose / legal
   -------------------------------------------------------------------------- */

.dd-prose {
  padding-block: 64px 84px;
  max-width: 860px;
}
.dd-prose p {
  color: var(--color-tertiary);
  max-width: 70ch;
  line-height: 26px;
}
.dd-prose section {
  margin-top: 40px;
}
.dd-prose section h2 {
  margin: 0;
  color: var(--text-strong);
}
.dd-prose section > div {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dd-prose__toc {
  background: var(--color-accent-warm);
  border: 0.5px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  margin-top: 36px;
}
.dd-prose__toc ol {
  margin: 14px 0 0;
  padding-left: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
}
.dd-prose__toc a {
  color: var(--color-secondary);
  font-weight: 600;
  font-size: 13.5px;
}
.dd-prose__toc a:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   17. About page pieces
   -------------------------------------------------------------------------- */

.dd-pullcard {
  background: var(--color-secondary-tint);
  border-radius: var(--radius-lg);
  padding: 34px 32px;
  border: 0.5px solid var(--border-subtle);
}
.dd-pullcard p {
  margin: 18px 0 0;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 29px;
  color: var(--color-neutral-80);
}
.dd-pullcard__by {
  margin-top: 20px;
}
.dd-pullcard__by b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--color-neutral-80);
  display: block;
}
.dd-pullcard__by span {
  color: var(--color-tertiary);
}

.dd-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 36px;
}
.dd-metrics__n {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 40px;
  letter-spacing: -1.4px;
  color: var(--color-primary);
  line-height: 1;
}
.dd-metrics__l {
  color: var(--color-tertiary);
  margin-top: 8px;
}

.dd-tile {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 28px 26px;
  border: 0.5px solid var(--border-subtle);
}
.dd-tile b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.3px;
  color: var(--color-neutral-80);
  display: block;
}
.dd-tile p {
  color: var(--color-tertiary);
  margin-top: 12px;
  line-height: 22px;
}

.dd-areas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.dd-areas div {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--color-accent-warm);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  border: 0.5px solid var(--border-subtle);
}
.dd-areas span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--color-neutral-80);
}
.dd-areas svg {
  flex-shrink: 0;
}

.dd-checks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-top: 40px;
}
.dd-checks > div {
  display: flex;
  gap: 16px;
}
.dd-checks svg {
  flex-shrink: 0;
  margin-top: 2px;
}
.dd-checks b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: #fff;
  display: block;
}
.dd-checks p {
  color: rgba(255, 255, 255, 0.7);
  margin-top: 8px;
  max-width: 44ch;
  line-height: 22px;
}

.dd-ctaband {
  background: var(--color-secondary-tint);
}
.dd-ctaband__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding-block: 56px;
  flex-wrap: wrap;
}
.dd-ctaband h2 {
  margin: 0;
  max-width: 22ch;
  color: var(--color-neutral-80);
}
.dd-ctaband h2 em {
  font-style: normal;
  color: var(--color-secondary);
}

.dd-timeline {
  margin-top: 40px;
  display: grid;
  gap: 0;
}
.dd-timeline__item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 28px;
  padding: 24px 0;
  border-top: 0.5px solid var(--border-subtle);
}
.dd-timeline__item:last-child {
  border-bottom: 0.5px solid var(--border-subtle);
}
.dd-timeline__year {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.6px;
  color: var(--color-primary);
}
.dd-timeline__body b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--color-neutral-80);
  display: block;
}
.dd-timeline__body p {
  color: var(--color-tertiary);
  margin-top: 8px;
  max-width: 62ch;
}

/* --------------------------------------------------------------------------
   18. Pest detail pages
   -------------------------------------------------------------------------- */

.dd-pest-hero__icon {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.10);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}
.dd-pest-hero__icon svg {
  width: 42px;
  height: 42px;
  color: #fff;
}

.dd-signs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 32px;
}
.dd-signs li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--color-surface);
  border: 0.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 22px;
  color: var(--color-tertiary);
}
.dd-signs svg {
  flex-shrink: 0;
  margin-top: 3px;
}
ul.dd-signs {
  list-style: none;
  padding: 0;
}

.dd-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
  counter-reset: step;
}
.dd-steps--4 {
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.dd-step {
  background: var(--color-surface);
  border: 0.5px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
}
.dd-step__n {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
}
.dd-step b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.3px;
  color: var(--color-neutral-80);
  display: block;
  margin-top: 18px;
}
.dd-step p {
  color: var(--color-tertiary);
  margin-top: 10px;
  line-height: 22px;
}

.dd-factlist {
  margin-top: 28px;
  border-top: 0.5px solid var(--border-subtle);
}
.dd-factlist div {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 0.5px solid var(--border-subtle);
}
.dd-factlist dt {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  color: var(--color-neutral-80);
}
.dd-factlist dd {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 23px;
  color: var(--color-tertiary);
}

.dd-factlist--dark {
  border-top-color: rgba(255, 255, 255, 0.16);
}
.dd-factlist--dark div {
  border-bottom-color: rgba(255, 255, 255, 0.16);
}
.dd-factlist--dark dt {
  color: #fff;
}
.dd-factlist--dark dd {
  color: rgba(255, 255, 255, 0.72);
}

.dd-otherpests {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 32px;
}
.dd-otherpests a {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--color-surface);
  border: 0.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--color-neutral-80);
  transition: border-color .18s ease, transform .18s ease;
}
.dd-otherpests a:hover {
  border-color: var(--color-secondary);
  transform: translateY(-2px);
}
.dd-otherpests svg {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   19. Responsive
   The original export had no media queries at all — every grid was a fixed
   column count. These breakpoints are the reason this layer exists.
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  :root {
    --type-display-size: 44px;
    --type-display-line: 48px;
    --type-display-track: -1.4px;
    --type-h2-size: 32px;
    --type-h2-line: 38px;
    --type-h2-track: -1px;
  }
  .dd-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .dd-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .dd-factlist--dark {
  border-top-color: rgba(255, 255, 255, 0.16);
}
.dd-factlist--dark div {
  border-bottom-color: rgba(255, 255, 255, 0.16);
}
.dd-factlist--dark dt {
  color: #fff;
}
.dd-factlist--dark dd {
  color: rgba(255, 255, 255, 0.72);
}

.dd-otherpests {
    grid-template-columns: repeat(2, 1fr);
  }
  .dd-header__nav {
    gap: 22px;
  }
  .dd-header__nav a {
    font-size: 13.5px;
  }
  .dd-header__actions {
    gap: 14px;
  }
  .dd-header__cta {
    display: none;
  }
  .dd-featured {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 36px 32px;
  }
  .dd-featured blockquote {
    font-size: 26px;
  }
  .dd-split,
  .dd-split--narrow-left,
  .dd-split--narrow-right,
  .dd-split--faq,
  .dd-split--trusted {
    gap: 44px;
  }
}

@media (max-width: 900px) {
  :root {
    --page-pad: 22px;
  }
  html {
    scroll-padding-top: 76px;
  }

  .dd-header__nav,
  .dd-header__cta {
    display: none;
  }
  .dd-burger {
    display: inline-flex;
  }
  .dd-header__inner {
    height: 68px;
    gap: 12px;
  }

  .dd-section {
    padding: 56px 0;
  }
  .dd-hero__inner {
    padding-block: 64px 68px;
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .dd-hero--video .dd-hero__inner {
    min-height: 0;
    padding-top: 40px;
  }
  .dd-hero__media {
    position: relative;
    inset: auto;
    aspect-ratio: 16 / 10;
  }
  .dd-hero__media video {
    object-position: 62% 50%;
  }
  /* Only a light tint, enough to stop the white room glaring next to the
     navy below it. */
  .dd-hero__media::after {
    inset: 0;
    background: rgba(19, 31, 46, 0.12);
  }
  .dd-hero__pause {
    right: 14px;
    bottom: 14px;
  }
  /* Stacked: she stands under the copy, centred on the circles, which run
     off both edges of the screen evenly. */
  .dd-owner-section .dd-split {
    padding-bottom: 0;
  }
  .dd-owner-section .dd-split > div:first-child {
    padding-bottom: 0;
  }
  .dd-owner {
    --d: max(150%, 140vw);
    justify-content: center;
  }
  .dd-owner__arc,
  .dd-owner__halo {
    left: 50%;
    transform: translate(-50%, 50%);
  }
  .dd-owner__ring {
    width: 96px;
    left: 0;
    top: 40%;
  }
  .dd-owner__photo {
    width: 86%;
    max-width: 420px;
    margin-right: 0;
  }
  .dd-teamstage {
    margin-top: 32px;
  }
  .dd-teamstage__arc {
    width: 96%;
  }
  .dd-teamstage__ring {
    width: 112%;
  }
  /* Three across is too small on a phone, so the outer two tuck in behind
     the owner. */
  /* Three across leaves the faces tiny on a phone, so the owner comes
     forward and the other two stand partly behind her, as in a group shot. */
  .dd-lineup {
    grid-template-columns: 0.95fr 1.25fr 1.25fr;
    column-gap: 0;
    padding-top: 32px;
    margin-inline: -14px;
  }
  .dd-lineup__person:first-child {
    margin-right: -22%;
  }
  .dd-lineup__person--pair {
    margin-left: -24%;
  }
  .dd-lineup__ring {
    display: none;
  }
  .dd-pagehero__inner {
    padding-block: 56px 60px;
  }
  .dd-pagehero--photo .dd-pagehero__inner {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .dd-pagehero--short .dd-pagehero__inner {
    padding-block: 44px 46px;
  }
  .dd-split,
  .dd-split--narrow-left,
  .dd-split--narrow-right,
  .dd-split--faq,
  .dd-split--trusted,
  .dd-quote__inner {
    grid-template-columns: 1fr;
    gap: 36px;
    padding-block: 56px;
  }
  .dd-split--trusted {
    padding: 0;
  }
  .dd-split__media--first {
    order: 0;
  }
  .dd-split h2,
  .dd-sectionhead h2 {
    max-width: 24ch;
  }
  .dd-split__photo {
    aspect-ratio: 4 / 3;
  }
  .dd-gallery--3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .dd-statsrow,
  .dd-pulls,
  .dd-checks,
  .dd-steps,
  .dd-steps--4 {
    grid-template-columns: 1fr;
  }
  .dd-statsrow {
    padding-block: 0 56px;
  }
  .dd-pulls {
    gap: 28px;
    margin-top: 32px;
    padding-top: 28px;
  }
  .dd-signs {
    grid-template-columns: 1fr;
  }
  .dd-prose__toc ol {
    grid-template-columns: 1fr;
  }
  .dd-factlist div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .dd-timeline__item {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .dd-band__inner {
    padding-block: 22px;
    gap: 18px;
  }
  .dd-band__actions .dd-band__or,
  .dd-band__actions .dd-band__ask {
    display: none;
  }
  .dd-sameday__shout {
    font-size: 32px;
    line-height: 34px;
  }
  .dd-featured__ring,
  .dd-sameday__ring {
    display: none;
  }

  .dd-footer__cols {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .dd-footer__contact {
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  :root {
    --type-display-size: 34px;
    --type-display-line: 39px;
    --type-display-track: -1px;
    --type-h2-size: 26px;
    --type-h2-line: 32px;
    --type-h2-track: -0.7px;
    --type-h3-size: 22px;
    --type-h3-line: 28px;
    --type-h4-size: 17px;
    --type-h4-line: 24px;
  }

  .dd-grid--4,
  .dd-grid--3,
  .dd-grid--2,
  .dd-areas,
  .dd-metrics,
  .dd-statgrid,
  .dd-form__row,
  .dd-factlist--dark {
  border-top-color: rgba(255, 255, 255, 0.16);
}
.dd-factlist--dark div {
  border-bottom-color: rgba(255, 255, 255, 0.16);
}
.dd-factlist--dark dt {
  color: #fff;
}
.dd-factlist--dark dd {
  color: rgba(255, 255, 255, 0.72);
}

.dd-otherpests {
    grid-template-columns: 1fr;
  }
  .dd-metrics {
    gap: 20px;
  }
  .dd-service-card {
    min-height: 0;
  }
  .dd-service-card h3,
  .dd-service-card p {
    max-width: none;
  }

  .dd-header__phone span {
    display: none;
  }
  .dd-header__phone {
    width: 44px;
    height: 44px;
    justify-content: center;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-divider);
  }
  .dd-header__wa {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
  }
  /* Logo, WhatsApp, phone and menu have to share 331px. */
  .dd-header__actions {
    gap: 8px;
  }
  .dd-header__inner {
    gap: 10px;
  }
  .dd-wordmark {
    height: 44px;
  }

  .dd-hero h1,
  .dd-pagehero h1,
  .mw {
    max-width: none;
  }
  .dd-hero__lead,
  .dd-pagehero__lead,
  .dd-split__body,
  .dd-quote__lead,
  .dd-inline-testimonial p,
  .dd-featured blockquote,
  .dd-pulls p,
  .dd-sameday__body,
  .dd-checks p,
  .dd-featured__note {
    max-width: none;
  }
  .dd-hero__actions .dd-btn,
  .dd-pagehero__actions .dd-btn,
  .dd-ctaband .dd-btn {
    width: 100%;
  }

  .dd-statcard,
  .dd-sameday,
  .dd-form,
  .dd-pullcard {
    padding: 26px 22px;
  }
  .dd-form__sent {
    padding: 34px 22px;
  }
  .dd-featured {
    padding: 28px 22px;
  }
  .dd-featured blockquote {
    font-size: 22px;
  }
  .dd-statgrid__n {
    font-size: 38px;
  }

  .dd-footer__cols {
    grid-template-columns: 1fr;
  }
  .dd-footer__base {
    flex-direction: column;
    align-items: flex-start;
  }
  .dd-band__shout {
    font-size: 20px;
  }
  .dd-carousel {
    grid-auto-columns: minmax(160px, 1fr);
  }
  .dd-gallery--2,
  .dd-gallery--3 {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: 74%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 14px;
    padding-bottom: 6px;
  }
  .dd-gallery > * {
    scroll-snap-align: start;
  }
  .dd-gallery::-webkit-scrollbar {
    height: 0;
  }
  .dd-split__photo {
    aspect-ratio: 1 / 1;
  }
  .dd-prose {
    padding-block: 44px 60px;
  }
}

/* The smallest phones (iPhone SE, 320px): logo, WhatsApp, phone and menu
   only fit if each gives a little. */
@media (max-width: 400px) {
  .dd-wordmark {
    height: 36px;
  }
  .dd-header__wa,
  .dd-header__phone {
    width: 40px;
    height: 40px;
  }
  .dd-header__actions {
    gap: 6px;
  }
  .dd-header__inner {
    gap: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .dd-header,
  .dd-drawer,
  .dd-band,
  .dd-quote,
  .dd-footer {
    display: none;
  }
}