/*
  Homepage sections — matches the developer spec (Page Spec: HOME).
  Depends on tokens/components in denwatech-theme.css (loaded first).
  No DB/CMS-driven content — everything here is static markup.
*/

/* ---------- Hero ---------- */
.dw-hero {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: center;
  text-align: left;
  background-size: cover;
  background-position: center;
  background-color: var(--dw-navy);
  color: var(--dw-white);
  /* Inherited by every text element inside — a second, independent layer
     of contrast so legibility holds regardless of what's in the photo
     behind it, on top of the dark overlay. */
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

/*
  Bug fix: .dw-container normally centers itself on the page via
  margin-inline:auto, which works fine in block layout. But .dw-hero is a
  flex container, and flex items with auto margins get their free space
  absorbed by those margins *within the flex row* instead — so the
  container was shrinking to its content's width and re-centering itself
  inside the hero, landing ~166px right of where the header logic and
  every other section's container sits. Forcing full width here makes it
  behave exactly like a normal block-level .dw-container again.
*/
.dw-hero > .dw-container {
  width: 100%;
}

.dw-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8, 20, 45, 0.9) 0%, rgba(8, 20, 45, 0.68) 55%, rgba(8, 20, 45, 0.42) 100%);
}

.dw-hero__inner {
  position: relative;
  padding-block: 56px;
  max-width: 820px;
  text-align: left;
  margin-right: auto;
}

.dw-hero__title {
  font-family: var(--dw-font-heading);
  font-size: clamp(34px, 4.6vw, 54px);
  line-height: 1.15;
  font-weight: 800;
  margin: 0 0 24px;
}

.dw-hero__rule {
  width: 140px;
  height: 4px;
  background: var(--dw-white);
  margin-bottom: 8px;
}

/*
  Rotating hero slides (same photo, three banner text sets). All three
  slides stack in the same grid cell so the row's height is always the
  tallest of the three, regardless of which one is active — otherwise
  the whole hero visibly resized when switching to a slide with fewer
  lines (e.g. no tags line, or a shorter headline).
*/
.dw-hero__slides {
  display: grid;
}

.dw-hero__slide {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.dw-hero__slide.is-active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  animation: dwHeroFade 0.5s ease;
}

.dw-hero__tagline {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dw-teal);
  margin-bottom: 14px;
}

.dw-hero__tags {
  margin: 20px 0 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.85);
}

@keyframes dwHeroFade {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*
  Hero subtext + CTAs (now on the photo itself, inside .dw-hero__inner).
  Same grid-stack technique as the slides above, so the row height stays
  constant regardless of which subtext (2 vs 3 lines) is showing.
*/
.dw-hero-cta__texts {
  display: grid;
  margin-top: 28px;
}

.dw-hero-cta__text {
  grid-area: 1 / 1;
  max-width: 560px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 17px;
  line-height: 1.65;
  margin: 0;
  text-align: left;
  visibility: hidden;
  opacity: 0;
}

.dw-hero-cta__text.is-active {
  visibility: visible;
  opacity: 1;
  animation: dwHeroFade 0.5s ease;
}

.dw-hero-cta__buttons {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.dw-hero__dots {
  display: flex;
  gap: 10px;
  margin-top: 28px;
}

.dw-hero__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--dw-border);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.dw-hero__dot.is-active {
  background: var(--dw-teal);
  transform: scale(1.2);
}

/* ---------- Value Proposition ---------- */
.dw-valueprop {
  position: relative;
  background: radial-gradient(680px 420px at 0% 0%, rgba(0, 196, 140, 0.22) 0%, rgba(0, 196, 140, 0) 70%), var(--dw-white);
  text-align: left;
}

.dw-cards-panel {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  text-align: left;
}

.dw-feature-card {
  background: var(--dw-white);
  border: 1px solid var(--dw-border);
  border-radius: var(--dw-radius-card);
  padding: 32px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.dw-feature-card:hover {
  box-shadow: 0 20px 40px -24px rgba(11, 28, 61, 0.25);
  transform: translateY(-2px);
}

.dw-feature-card__number {
  display: block;
  font-family: var(--dw-font-heading);
  font-size: 13px;
  font-weight: 700;
  color: var(--dw-teal);
  margin-bottom: 14px;
}

.dw-feature-card__icon {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--dw-surface);
  color: var(--dw-navy);
  font-size: 26px;
  border-radius: 8px;
  margin-bottom: 18px;
}

.dw-feature-card h3 {
  font-family: var(--dw-font-heading);
  font-size: 21px;
  font-weight: 600;
  color: var(--dw-ink);
  margin: 0 0 12px;
}

.dw-feature-card p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--dw-text);
  margin: 0 0 18px;
}

.dw-feature-card p:last-child {
  margin-bottom: 0;
}

/* ---------- Industries carousel (real-photo moving tiles) ---------- */
.dw-industries-carousel .owl-stage {
  display: flex;
}

.dw-industries-carousel .owl-item {
  padding: 0 12px;
  display: flex;
}

.dw-industry-tile__photo {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--dw-radius-card);
  margin-bottom: 16px;
  background: var(--dw-surface);
}

.dw-industry-tile__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dw-industry-tile__number {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--dw-teal);
  margin-bottom: 8px;
}

.dw-industry-tile h3 {
  font-family: var(--dw-font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--dw-ink);
  margin: 0 0 8px;
}

.dw-industry-tile p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--dw-text-muted);
  margin: 0;
}

/* Plain linked grid of industry tiles (industries.php hub) — same photo/
   number/heading treatment as the homepage carousel, packaged as a bordered
   card with a hover lift + an explicit "explore" link for click affordance. */
.dw-industries-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.dw-industries-grid a.dw-industry-tile {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--dw-white);
  border: 1px solid var(--dw-border);
  border-radius: var(--dw-radius-card);
  padding: 18px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.dw-industries-grid a.dw-industry-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -24px rgba(11, 28, 61, 0.25);
  border-color: transparent;
}

.dw-industries-grid .dw-industry-tile__photo {
  margin-bottom: 18px;
}

.dw-industries-grid .dw-industry-tile__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--dw-navy);
}

.dw-industries-grid a.dw-industry-tile:hover .dw-industry-tile__more {
  color: var(--dw-teal);
}

.dw-industries-grid .dw-industry-tile__more i {
  font-size: 11px;
  transition: transform 0.2s ease;
}

.dw-industries-grid a.dw-industry-tile:hover .dw-industry-tile__more i {
  transform: translateX(3px);
}

@media (max-width: 1100px) {
  .dw-industries-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .dw-industries-grid {
    grid-template-columns: 1fr;
  }
}

.dw-industries-carousel .owl-nav button.owl-prev,
.dw-industries-carousel .owl-nav button.owl-next {
  position: absolute;
  top: 38%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--dw-white);
  border: 1px solid var(--dw-border);
  border-radius: 50%;
  color: var(--dw-navy);
  transition: background 0.2s ease, color 0.2s ease;
}

.dw-industries-carousel .owl-nav button.owl-prev:hover,
.dw-industries-carousel .owl-nav button.owl-next:hover {
  background: var(--dw-navy);
  color: var(--dw-white);
}

.dw-industries-carousel .owl-nav button.owl-prev {
  left: -20px;
}

.dw-industries-carousel .owl-nav button.owl-next {
  right: -20px;
}

.dw-industries-carousel {
  position: relative;
  margin-top: 40px;
}

.dw-industries-carousel .owl-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
}

.dw-industries-carousel .owl-dot span {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dw-border);
  transition: background 0.2s ease, transform 0.2s ease;
}

.dw-industries-carousel .owl-dot.active span {
  background: var(--dw-teal);
  transform: scale(1.2);
}

/* ---------- Core Capabilities ---------- */
.dw-capabilities {
  position: relative;
  background:
    linear-gradient(135deg, rgba(0, 196, 140, 0.32) 0%, rgba(0, 196, 140, 0) 55%),
    var(--dw-navy);
}

.dw-capabilities .dw-section__eyebrow {
  font-size: 14px;
  color: #2fe3ac;
}

.dw-capabilities__lede {
  max-width: 720px;
  margin: 16px 0 0;
  color: rgba(255, 255, 255, 0.75);
  font-size: 16px;
  line-height: 1.7;
}

/* ---------- Core Capabilities carousel (moving tiles) ---------- */
.dw-capabilities-carousel {
  position: relative;
  margin-top: 36px;
}

.dw-capabilities-carousel .owl-stage {
  display: flex;
}

.dw-capabilities-carousel .owl-item {
  padding: 0 12px;
  display: flex;
}

.dw-capability-tile {
  background: var(--dw-navy-mid);
  border-radius: var(--dw-radius-card);
  padding: 28px;
  width: 100%;
}

.dw-capability-tile__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  color: var(--dw-teal);
  font-size: 20px;
  border-radius: 8px;
  margin-bottom: 18px;
}

.dw-capability-tile h3 {
  font-family: var(--dw-font-heading);
  font-size: 18px;
  font-weight: 600;
  color: var(--dw-white);
  margin: 0 0 12px;
}

.dw-capability-tile p {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
}

.dw-capabilities-carousel .owl-nav button.owl-prev,
.dw-capabilities-carousel .owl-nav button.owl-next {
  position: absolute;
  top: 38%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: var(--dw-white);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.dw-capabilities-carousel .owl-nav button.owl-prev:hover,
.dw-capabilities-carousel .owl-nav button.owl-next:hover {
  background: var(--dw-teal);
  border-color: var(--dw-teal);
}

.dw-capabilities-carousel .owl-nav button.owl-prev {
  left: -20px;
}

.dw-capabilities-carousel .owl-nav button.owl-next {
  right: -20px;
}

.dw-capabilities-carousel .owl-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
}

.dw-capabilities-carousel .owl-dot span {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  transition: background 0.2s ease, transform 0.2s ease;
}

.dw-capabilities-carousel .owl-dot.active span {
  background: var(--dw-teal);
  transform: scale(1.2);
}

/* ---------- Featured Projects (rotating carousel) ---------- */
.dw-projects-carousel {
  position: relative;
  margin-top: 36px;
}

.dw-projects-carousel .owl-stage {
  display: flex;
}

.dw-projects-carousel .owl-item {
  padding: 0 12px;
  display: flex;
}

.dw-projects-carousel .owl-nav button.owl-prev,
.dw-projects-carousel .owl-nav button.owl-next {
  position: absolute;
  top: 38%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--dw-white);
  border: 1px solid var(--dw-border);
  border-radius: 50%;
  color: var(--dw-navy);
  transition: background 0.2s ease, color 0.2s ease;
}

.dw-projects-carousel .owl-nav button.owl-prev:hover,
.dw-projects-carousel .owl-nav button.owl-next:hover {
  background: var(--dw-navy);
  color: var(--dw-white);
}

.dw-projects-carousel .owl-nav button.owl-prev {
  left: -20px;
}

.dw-projects-carousel .owl-nav button.owl-next {
  right: -20px;
}

.dw-projects-carousel .owl-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
}

.dw-projects-carousel .owl-dot span {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dw-border);
  transition: background 0.2s ease, transform 0.2s ease;
}

.dw-projects-carousel .owl-dot.active span {
  background: var(--dw-teal);
  transform: scale(1.2);
}

.dw-project-tile {
  width: 100%;
  border: 1px solid var(--dw-border);
  border-left: 4px solid var(--dw-teal);
  background: var(--dw-white);
  border-radius: var(--dw-radius-card);
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.dw-project-tile:hover {
  box-shadow: 0 20px 40px -24px rgba(11, 28, 61, 0.25);
  transform: translateY(-2px);
}

.dw-project-tile__image {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.dw-project-tile__body {
  padding: 24px 28px;
}

.dw-project-tile__tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dw-teal);
  margin-bottom: 10px;
}

.dw-project-tile__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.dw-project-tile__head h3 {
  font-family: var(--dw-font-heading);
  font-size: 17px;
  font-weight: 600;
  color: var(--dw-ink);
  margin: 0;
  line-height: 1.4;
}

.dw-project-tile__value {
  flex-shrink: 0;
  font-family: var(--dw-font-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--dw-teal);
  white-space: nowrap;
}

.dw-project-tile__body p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--dw-text);
  margin: 0 0 16px;
}

/* ---------- Safety & Quality ---------- */
.dw-safety {
  background: var(--dw-navy);
  color: rgba(255, 255, 255, 0.8);
}

.dw-safety .dw-section__eyebrow {
  color: var(--dw-teal);
}

.dw-safety__lede {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.8);
  max-width: 640px;
  margin: 0 0 36px;
}

.dw-safety__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.dw-stat--text .dw-stat__value {
  font-size: 26px;
}

.dw-safety__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 36px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.dw-safety__supporting {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
}

/* ---------- Accreditations ---------- */
.dw-accreditations {
  background: var(--dw-white);
  padding-block: 40px;
  border-top: 1px solid var(--dw-border);
  border-bottom: 1px solid var(--dw-border);
}

.dw-accreditations__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  justify-content: center;
}

.dw-accreditations__label {
  font-family: var(--dw-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dw-text-muted);
}

.dw-accreditations__badges {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.dw-badge {
  padding: 12px 20px;
  border: 1px solid var(--dw-border);
  border-radius: var(--dw-radius-card);
  font-size: 13px;
  font-weight: 500;
  color: var(--dw-ink);
  white-space: nowrap;
}

/* ---------- Closing CTA ---------- */
.dw-cta {
  position: relative;
  background:
    radial-gradient(680px 420px at 0% 0%, rgba(0, 196, 140, 0.16) 0%, rgba(0, 196, 140, 0) 70%),
    radial-gradient(680px 420px at 100% 100%, rgba(0, 196, 140, 0.16) 0%, rgba(0, 196, 140, 0) 70%),
    var(--dw-white);
  text-align: center;
  padding-block: 72px;
}

.dw-cta__title {
  font-family: var(--dw-font-heading);
  font-size: clamp(28px, 3.6vw, 36px);
  font-weight: 700;
  color: var(--dw-ink);
  margin: 0 0 20px;
}

.dw-cta__title span {
  color: var(--dw-teal);
}

.dw-cta p {
  max-width: 560px;
  margin: 0 auto 32px;
  color: var(--dw-text);
  font-size: 17px;
  line-height: 1.7;
}

@media (max-width: 1100px) {
  .dw-cards-panel {
    grid-template-columns: 1fr;
  }

  .dw-safety__stats {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .dw-section {
    padding-block: 48px;
  }

  .dw-hero {
    min-height: 520px;
  }

  /* Text spans nearly the full width on mobile, unlike desktop where it's
     confined to the left column — the left-to-right gradient overlay isn't
     enough on its own here, so flatten it to a uniform stronger tint. */
  .dw-hero::before {
    background: rgba(8, 20, 45, 0.72);
  }

  .dw-safety__stats {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .dw-safety__footer {
    flex-direction: column;
    align-items: flex-start;
  }
}