/* DOGLC — visual tuning overrides
   Kept brand: navy + white (accent stays navy-family). */

:root {
  /* accent (navy-family, less “neon”) */
  --blue: #1f4aa8;
  --blue-h: #183c8a;

  /* spacing scale */
  --pad-x: clamp(20px, 4vw, 56px);
  --section-y: clamp(72px, 8vw, 112px);
}

/* Prevent horizontal overflow on mobile (removes right-side whitespace) */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}
img,
svg,
video,
canvas {
  max-width: 100%;
}

/* Ensure fixed nav doesn't contribute to horizontal scroll */
nav,
.nav-inner {
  max-width: 100%;
}

/* Footer simplification layout */
.ft-top {
  grid-template-columns: 1.6fr 1fr !important;
  gap: 32px !important;
}
/* Navbar logo behavior:
   - At top (over hero): show elegant DOGLC wordmark (always readable)
   - Scrolled (white nav): show logo.png image */
.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.nav-wordmark {
  font-family: "Playfair Display", serif;
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #fff;
  line-height: 1;
}
.nav-wordmark span {
  color: var(--blue);
}
.nav-logo-img {
  height: 36px; /* bigger, clearer */
  width: auto;
  display: block;
}

/* Swap (requested):
   - At top (page load): show image logo
   - Scrolled: show wordmark */
nav.at-top .nav-logo-img {
  display: block;
}
nav.at-top .nav-wordmark {
  display: none;
}

nav.scrolled .nav-logo-img {
  display: none;
}
nav.scrolled .nav-wordmark {
  display: inline-block;
  color: var(--black); /* readable on white scrolled nav */
}

.ft-brand {
  display: inline-flex !important;
  align-items: center;
}
.ft-brand img {
  height: 24px;
  width: auto;
  display: block;
}
.ft-tagline {
  max-width: 360px !important;
}
.ft-contact {
  margin-top: 14px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.38);
}
.ft-contact a {
  color: rgba(255, 255, 255, 0.55);
}
.ft-contact a:hover {
  color: #fff;
}

/* If you still don't see changes after a hard refresh,
   this tiny visual tweak is an easy "is tuning.css active?" check. */
nav.scrolled {
  box-shadow: 0 1px 0 rgba(220, 227, 240, 0.9), 0 10px 30px rgba(15, 31, 61, 0.06) !important;
}

/* Consistent gutters across sections */
#hero,
#trusted,
#problem,
#support,
#capabilities,
#services,
#value,
#testimonials,
#cta,
footer {
  padding-left: var(--pad-x) !important;
  padding-right: var(--pad-x) !important;
}

/* Calmer vertical rhythm (reduce “tall” sections) */
#problem,
#support,
#services,
#testimonials {
  padding-top: var(--section-y) !important;
  padding-bottom: var(--section-y) !important;
}

/* Hero: tighten internal spacing */
#hero {
  padding-top: 120px !important;
  padding-bottom: 80px !important;
}
.hero-layout {
  gap: 56px !important;
}
.hero-eyebrow {
  margin-bottom: 18px !important;
}
.hero-sub {
  margin-bottom: 36px !important;
}
.hero-stats {
  margin-top: 64px !important;
  padding-top: 32px !important;
}

/* Section headers + grids: less “gappy” */
.sec-h2 {
  margin-bottom: 32px !important;
}
.svc-tabs-row {
  margin-bottom: 40px !important;
}
.insights-header {
  margin-bottom: 36px !important;
}
.t-grid {
  margin-top: 36px !important;
}
.cta-inner {
  margin-bottom: 48px !important;
}

/* Reduce “bulky” feel: slightly tighter service typography */
.svc-desc {
  font-size: 12.5px !important;
  line-height: 1.6 !important;
}
.svc-body {
  gap: 12px !important;
}
.svc-steps {
  padding-top: 14px !important;
}
.svc-step {
  margin-bottom: 8px !important;
}

/* CTA + booking: reduce whitespace slightly */
#cta {
  padding-top: clamp(64px, 7vw, 96px) !important;
  padding-bottom: clamp(64px, 7vw, 96px) !important;
}

/* Buttons: keep premium “navy” feel */
.btn-primary,
.nav-cta,
.mobile-nav .mn-cta {
  background: var(--blue) !important;
}
.btn-primary:hover,
.nav-cta:hover,
.mobile-nav .mn-cta:hover {
  background: var(--blue-h) !important;
}

/* NAV DROPDOWN: prevent hover-gap flicker (lets users click) */
.nav-item {
  position: relative; /* anchor hover-bridge */
}
.nav-item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 14px; /* bridges the gap between button and dropdown */
}
.mega-drop {
  /* Keep it slightly below the button, but the bridge above prevents flicker. */
  top: calc(100% + 8px) !important;
}
.nav-item:hover .mega-drop,
.nav-item:focus-within .mega-drop {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}