/* =====================================================================
   Dream Cleen v2 - shared SERVICE PAGE tweaks (all 8 service pages)
   ---------------------------------------------------------------------
   1) Intro paragraph (the text beside the first photo, section 509439b):
      one consistent line height on every service page. Elementor had a
      different value per page (25px-44px at 17px text). !important beats
      the per-page Elementor rule.
   2) Intro VIDEO (e.g. the wheelie bin wash beside the intro paragraph):
      same size as the "Professional Service You Can Trust" video - half
      the row, 16:9, cropped to fill - and it plays automatically (muted,
      looping, like that one). A centred play button stays on top; its
      circle turns solid navy on hover. Clicking opens the full video with
      sound in the page gallery's lightbox (/assets/js/dc-sgallery-*.js).
   3) .dc-media-169: a photo shown at 16:9, cropped to fill (used where a
      16:9 video used to be, so the layout keeps its size).
   Edit the values marked <<<.
   ===================================================================== */
.elementor-element-509439b .elementor-heading-title {
  line-height: 1.6 !important;               /* <<< intro paragraph line height */
}

/* Intro row with a video: its two COLUMNS (video column + paragraph column) share the row 50/50,
   exactly like the "Professional Service You Can Trust" row. The video column has a 60% width
   setting in Elementor, which - shrinking against the paragraph column's 100% - left it at ~37%. */
.elementor-element-509439b > .e-con-inner:has(.dc-intro-video-widget) > .e-con {
  flex: 1 1 0 !important;                    /* equal halves (minus the gap) */
  width: auto !important;
  max-width: none !important;
  min-width: 0;
}
.elementor-element-509439b .e-con:has(> .dc-intro-video-widget) { justify-content: center; }   /* video centred against the paragraph */
.elementor-element-509439b .dc-intro-video-widget { width: 100% !important; max-width: none !important; }
@media (max-width: 767.98px) {
  /* phones: stacked, each full width */
  .elementor-element-509439b > .e-con-inner:has(.dc-intro-video-widget) > .e-con { flex-basis: 100% !important; }
}

.dc-intro-video {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;                       /* <<< same shape as the Professional Service video */
  overflow: hidden;
  border-radius: 12px;                        /* <<< corner rounding */
  background: #111C52;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.dc-intro-video img,
.dc-intro-video video {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  object-position: 50% 42%;                   /* <<< which part of the tall video frame shows */
  border-radius: 0 !important;
  pointer-events: none;                       /* clicks go to the link (opens the lightbox) */
  transition: transform .5s ease;
}
.dc-intro-video::after {                      /* light shade so the white play button always reads */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(17, 28, 82, .30), rgba(17, 28, 82, .05));
  transition: background .3s ease;
}
.dc-intro-video__play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 68px;                                /* <<< play button size */
  height: 68px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(17, 28, 82, .35);          /* <<< see-through navy circle */
  border: 2px solid rgba(255, 255, 255, .95);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .25);
  transition: background .3s ease, transform .3s ease;
}
/* the triangle's own shape already sits a touch right of its box, which centres it optically */
.dc-intro-video__play svg { display: block; width: 28px; height: 28px; margin: 0; fill: #fff; }
.dc-intro-video:hover .dc-intro-video__play,
.dc-intro-video:focus-visible .dc-intro-video__play {
  background: #111C52;                        /* <<< solid navy on hover */
  transform: translate(-50%, -50%) scale(1.08);
}
.dc-intro-video:hover img, .dc-intro-video:focus-visible img,
.dc-intro-video:hover video, .dc-intro-video:focus-visible video { transform: scale(1.03); }
.dc-intro-video:focus-visible { outline: 3px solid #61CE70; outline-offset: 3px; }
@media (max-width: 767.98px) {
  .dc-intro-video__play { width: 58px; height: 58px; }
  .dc-intro-video__play svg { width: 24px; height: 24px; }
}

.dc-media-169 {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 50% 50%;                   /* <<< which part of the photo shows */
}

/* 4) "Other Areas Covered" under the intro paragraph (built by dreamcleen.co.uk_v2/tools/areas-covered.cjs):
      a navy label, then the areas as neat chips (North London first). Built as an Elementor heading +
      icon-list so the words stay editable in Devastator. */
.elementor-element-509439b .elementor-element.dc-areas { margin-top: 6px; }
.elementor-element-509439b .elementor-element.dc-areas .dc-areas__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 16px 8px 13px;
  border-radius: 999px;
  background: #111C52;                         /* <<< navy label */
  color: #fff !important;
  font-family: "Anek Latin", sans-serif;
  font-size: 15px !important;
  font-weight: 600;
  line-height: 1.2 !important;                 /* beats the intro paragraph line height above */
  letter-spacing: .06em;
  text-transform: uppercase;
}
.elementor-element-509439b .elementor-element.dc-areas .dc-areas__label::before {   /* map pin */
  content: "";
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  background: #61CE70;                         /* <<< pin colour (the site's green accent) */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.elementor-element-509439b .elementor-element.dc-areas-list .dc-areas__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.elementor-element-509439b .elementor-element.dc-areas-list .dc-areas__list .elementor-icon-list-item {
  margin: 0 !important;                        /* Elementor's inline-item spacing off; the gap handles it */
  padding: 6px 13px;
  border: 1.5px solid rgba(17, 28, 82, .22);   /* <<< chip border */
  border-radius: 999px;
  background: rgba(17, 28, 82, .04);
}
.elementor-element-509439b .elementor-element.dc-areas-list .dc-areas__list .elementor-icon-list-item::after { display: none !important; }   /* no Elementor dividers */
.elementor-element-509439b .elementor-element.dc-areas-list .dc-areas__list .elementor-icon-list-text {
  padding: 0 !important;
  color: #111C52;
  font-family: "Anek Latin", sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
}
.elementor-element-509439b .elementor-element.dc-areas-list .dc-areas__list .elementor-icon-list-item:first-child {
  border-color: #111C52;                       /* North London stands out */
  background: rgba(17, 28, 82, .08);
}
.elementor-element-509439b .elementor-element.dc-areas-list .dc-areas__list .elementor-icon-list-item:first-child .elementor-icon-list-text { font-weight: 700; }
/* linked area tags (location pages, e.g. Watford -> the Watford wheelie bin page) */
.elementor-element-509439b .elementor-element.dc-areas-list .dc-areas__list .elementor-icon-list-item.dc-area--link { padding: 0; border-color: #111C52; background: #fff; transition: background .2s ease, border-color .2s ease; }
.elementor-element-509439b .elementor-element.dc-areas-list .dc-areas__list .dc-area--link > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: 999px;
  text-decoration: none !important;
}
.elementor-element-509439b .elementor-element.dc-areas-list .dc-areas__list .dc-area--link > a::after {   /* small arrow: "this is a link" */
  content: "";
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  margin-left: 1px;
  color: #111C52;
  transition: color .2s ease, transform .2s ease;
}
.elementor-element-509439b .elementor-element.dc-areas-list .dc-areas__list .dc-area--link:hover,
.elementor-element-509439b .elementor-element.dc-areas-list .dc-areas__list .dc-area--link:focus-within { background: #111C52; }
.elementor-element-509439b .elementor-element.dc-areas-list .dc-areas__list .dc-area--link:hover .elementor-icon-list-text,
.elementor-element-509439b .elementor-element.dc-areas-list .dc-areas__list .dc-area--link:focus-within .elementor-icon-list-text,
.elementor-element-509439b .elementor-element.dc-areas-list .dc-areas__list .dc-area--link:hover > a::after,
.elementor-element-509439b .elementor-element.dc-areas-list .dc-areas__list .dc-area--link:focus-within > a::after { color: #fff; }
.elementor-element-509439b .elementor-element.dc-areas-list .dc-areas__list .dc-area--link:hover > a::after { transform: translateX(2px) rotate(45deg); }
.elementor-element-509439b .elementor-element.dc-areas-list .dc-areas__list .dc-area--link > a:focus-visible { outline: 3px solid #61CE70; outline-offset: 2px; }
@media (max-width: 767.98px) {
  .elementor-element-509439b .elementor-element.dc-areas .dc-areas__label { font-size: 14px !important; }
  .elementor-element-509439b .elementor-element.dc-areas-list .dc-areas__list .elementor-icon-list-text { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .dc-intro-video img, .dc-intro-video video, .dc-intro-video__play, .dc-intro-video::after { transition: none; }
}