/* Custom typography overrides — keep Laila (display) for content headings only.
   The nav and CTA button use DM Sans so they read as quiet wayfinding instead
   of competing with page H1s. */
.nav-link,
.dropdown-link,
.request-an-estimate {
  font-family: "DM Sans", sans-serif;
  font-weight: 600;
}

/* Constrain the Clean So Good section so it matches the reading-width
   of the surrounding content (was sprawling full-viewport at ~1081px+).
   Unifies the page rhythm: wide hero → narrow story → narrow supporting
   content → wide closing CTA banner. */
.clean-so-good-section {
  max-width: 740px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

/* Webflow ships several rules on .clean-so-good-section .section
   (15vw L/R padding, plus width:70vw / width:90vw at different breakpoints)
   that all assumed the parent was full-viewport. Now that the parent is
   capped at 740px, those rules push the inner content off-center. Reset
   width and padding so the inner sections fill the parent column properly. */
.clean-so-good-section .section {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* Disable Webflow IX2 animations entirely. The animation engine sets
   inline opacity:0 + translate3d() on elements as starting state of
   scroll-triggered fade-ins. When the JS stalls (or even mid-animation
   when scroll-detection mis-fires), elements sit half-faded and offset
   — making headings invisible or content slid out of place. Catch BOTH
   elements with data-w-id AND elements where inline style still has
   the animation artifacts (the IX2 engine also animates descendants
   that have no data-w-id of their own). */
[data-w-id],
[style*="opacity:0"],
[style*="opacity: 0"],
[style*="translate3d"] {
  opacity: 1 !important;
  transform: none !important;
}

/* Privacy policy page: long URLs and email addresses (e.g.
   melanie.brown@bluedobiedev.com) sit in <p> elements that don't wrap
   them by default, pushing the paragraph wider than the parent column
   on mobile (was overflowing to ~410px in a 375px viewport). Allow the
   long tokens to break. */
#privacy p,
#privacy li {
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}

/* Testimonials page: .certificates-full is a flex row of certificate
   images with no flex-wrap, so on mobile the children laid out past
   the right edge of the viewport. Allow wrapping to a second row. */
.certificates-full {
  flex-wrap: wrap;
}

/* Tap targets: Webflow renders the FB/IG icons in the top nav at only
   10-13px wide — way under the 44px recommended touch target. Expand
   the tap area via padding without growing the icon visually. */
.header-top-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 4px;
  box-sizing: border-box;
}

/* 404 page logo link was 10x29 — way under tap target. Make the entire
   logo wrapper a comfortable tap zone back to home. */
._404-logo-wrapper .brand-3 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 8px;
  box-sizing: border-box;
}

/* Widen page-hero wrappers from Webflow's 760px default to 1000px.
   The Webflow template's hero wrappers cap content at 760 inside a
   1200 container, which on wider desktop viewports leaves an empty
   ~440px gap on the right that reads as unfinished/unbalanced. Going
   to 1000 lets the content fill more of the available column without
   pushing all the way to the container edge.
   Intentionally NOT widening .section-title-wrapper — that 740 cap is
   a reading-width constraint for body prose under section headings. */
.banner-title-wrapper,
.banner-title-wrapper-2,
.banner-about-us-title-wrapper {
  max-width: 1000px;
  width: 100%;
}

/* contact-us.html: the .contacts-location-slider is a Webflow slider
   with only ONE slide (the office address). Its left/right arrows and
   the 1px vertical divider between them have nothing to navigate, but
   they render anyway and the divider reads as a stray vertical bar
   floating near "Get in touch". Hide them. */
.contacts-arrows-divider,
.contacts-left-arrow,
.contacts-right-arrow {
  display: none !important;
}
.service-detail-grid {
  display: grid;
  grid-template-columns: minmax(180px, 240px) 1fr;
  gap: 1rem 1.5rem;
  margin: 1.5rem 0;
}

.service-detail-label {
  font-weight: 700;
  color: #002434;
}

.service-detail-copy {
  line-height: 1.6;
}

@media (max-width: 700px) {
  .service-detail-grid {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }

  .service-detail-copy {
    margin-bottom: 1rem;
  }
}

/* Accessibility: Webflow's CSS zeros `outline` on focused elements site-wide,
   leaving keyboard users with no visible cue of where they are. Restore a
   clear focus ring using :focus-visible (shows only on keyboard focus, not
   mouse clicks — so it doesn't bother sighted mouse users). Brand red so it
   reads as intentional brand element rather than an OS default. */
:focus-visible {
  outline: 2px solid #cc3a2b !important;
  outline-offset: 2px !important;
}