/* Digital Eagles — final responsive and reliability layer */
:root {
  --fix-container: 1320px;
  --fix-gutter: clamp(12px, 3.1vw, 44px);
  --fix-gap: clamp(12px, 1.4vw, 20px);
  --fix-radius: clamp(18px, 2vw, 28px);
}

html {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  scroll-padding-top: 92px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-width: 0 !important;
  width: 100%;
  max-width: 100%;
  overflow-x: clip !important;
}

main, section, header, footer, nav, form,
.wrap, .hero-grid, .facts-panel, .service-grid, .trust-grid,
.tabs, .price-panel, .price-box, .steps, .quality-grid,
.gallery-grid, .contact-grid {
  min-width: 0;
  max-width: 100%;
}

.wrap,
.top-row,
.hero > .wrap,
.facts .wrap,
.contact-premium > .wrap {
  width: min(var(--fix-container), calc(100% - (var(--fix-gutter) * 2))) !important;
  margin-inline: auto !important;
}

img, svg, video, canvas, iframe {
  max-width: 100%;
}

img {
  height: auto;
}

/* Never leave sections blank if animation JavaScript is delayed or blocked. */
.reveal,
.reveal.visible {
  opacity: 1 !important;
  transform: none !important;
}

/* Reliable anchors below the fixed header. */
#home, #services, #conditions, #prices, #process, #faq, #contact {
  scroll-margin-top: 92px;
}

/* Fix the core grid conflict: old spans must not survive new column counts. */
.service-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: var(--fix-gap) !important;
  align-items: stretch !important;
}

.service-card,
.service-card:nth-child(n) {
  grid-column: auto !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 190px !important;
  padding: clamp(18px, 2vw, 28px) !important;
  border-radius: var(--fix-radius) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

.service-card .icon {
  flex: 0 0 auto;
}

.service-card .copy {
  display: block !important;
  width: 100% !important;
  max-width: 610px !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: left top !important;
}

/* Four guarantees should form a balanced matrix, not 3 + 1. */
.trust-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: var(--fix-gap) !important;
  align-items: stretch !important;
}

.trust-card,
.trust-card:nth-child(n) {
  grid-column: auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: 100% !important;
}

/* Price images stay at their authored resolution and scale down only. */
.price-panel:not(.active) {
  display: none !important;
}

.price-panel.active {
  display: block !important;
}

.price-box {
  width: 100% !important;
  max-width: 1260px !important;
  margin-inline: auto !important;
  overflow: hidden !important;
}

.price-box img {
  display: block !important;
  width: 100% !important;
  max-width: 1260px !important;
  height: auto !important;
  margin-inline: auto !important;
}

/* Steps: reset inherited span-2 rules before applying each breakpoint. */
.steps {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: var(--fix-gap) !important;
  align-items: stretch !important;
}

#process .step,
#process .step:nth-child(n) {
  grid-column: auto !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 170px !important;
  height: 100% !important;
  padding: clamp(17px, 2vw, 26px) !important;
  border-radius: var(--fix-radius) !important;
}

#process .step-content img {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
}

/* Consistent photo grid prevents stretched or full-row accidental cards. */
.gallery-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-auto-rows: auto !important;
  gap: var(--fix-gap) !important;
  padding: clamp(8px, 1.2vw, 14px) !important;
}

.gallery-grid .photo,
.gallery-grid .photo:nth-child(n) {
  grid-column: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  aspect-ratio: 4 / 3 !important;
  height: auto !important;
  min-height: 0 !important;
  border-radius: clamp(14px, 1.5vw, 20px) !important;
}

.gallery-grid .photo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Tabs remain usable without creating horizontal page overflow. */
.tabs {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  width: 100% !important;
  gap: clamp(5px, 1vw, 10px) !important;
  overflow: visible !important;
}

.tab {
  min-width: 0 !important;
  width: 100% !important;
}

.tab img {
  max-width: 100% !important;
  object-fit: contain !important;
}

/* Form controls and interactive elements. */
button, a, input, textarea, select {
  min-width: 0;
}

button, [role="button"], a, input, textarea, select {
  touch-action: manipulation;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(255, 227, 80, .95) !important;
  outline-offset: 3px !important;
}

.website-field {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  left: auto !important;
}

@media (max-width: 720px) {
  html { scroll-padding-top: 76px; }
  #home, #services, #conditions, #prices, #process, #faq, #contact {
    scroll-margin-top: 76px;
  }

  input, textarea, select {
    font-size: 16px !important;
  }

  .service-card {
    min-height: 176px !important;
  }

  .issue-cta {
    grid-template-columns: 1fr !important;
  }

  .price-mobile {
    display: block !important;
  }

  .price-desktop {
    display: none !important;
  }

  .price-box,
  .price-box img {
    max-width: 720px !important;
  }

  #process .step {
    min-height: 160px !important;
  }

  .contact-phone,
  .contact-premium .contact-phone {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
}

@media (min-width: 480px) {
  .facts-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 640px) {
  .service-grid,
  .trust-grid,
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #process .step:nth-child(5) {
    grid-column: 1 / -1 !important;
    width: min(100%, 520px) !important;
    justify-self: center !important;
  }
}

@media (min-width: 900px) {
  .facts-panel {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .quality-grid {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) !important;
    align-items: stretch !important;
  }

  .contact-grid {
    grid-template-columns: minmax(0, 1fr) minmax(390px, .78fr) !important;
    align-items: stretch !important;
  }
}

@media (min-width: 1100px) {
  .service-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  #process .step:nth-child(4),
  #process .step:nth-child(5) {
    grid-column: auto !important;
    width: auto !important;
    justify-self: stretch !important;
  }

  #process .step:nth-child(4) {
    grid-column: 1 / 2 !important;
  }

  #process .step:nth-child(5) {
    grid-column: 2 / 3 !important;
  }
}

@media (min-width: 1200px) {
  .trust-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1280px) {
  .steps {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  #process .step,
  #process .step:nth-child(n) {
    grid-column: auto !important;
    width: auto !important;
    justify-self: stretch !important;
    min-height: 220px !important;
  }
}

@media (hover: none), (pointer: coarse) {
  .service-card:hover,
  .trust-card:hover,
  .step:hover,
  .photo:hover,
  .action:hover,
  .submit:hover,
  .tab:hover {
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@supports (padding: max(0px)) {
  .top {
    padding-top: env(safe-area-inset-top);
  }

  .contact {
    padding-bottom: max(30px, env(safe-area-inset-bottom)) !important;
  }

  .cookie-banner {
    bottom: max(16px, env(safe-area-inset-bottom)) !important;
  }
}