/* ==========================================================================
   DeilTech homepage — below-the-fold sections
   Scoped to the hero-only homepage layout (ViewData["HeroLayout"] = true).
   Reuses the bronze / charcoal / white tokens defined in home-hero.css
   (:root variables are global, so no redefinition is needed here).
   Does not modify the header or hero — see home-hero.css for those.
   ========================================================================== */

.dt-section {
  position: relative;
  padding: clamp(4rem, 8vw, 6.5rem) clamp(1.25rem, 4vw, 3.5rem);
}

.dt-section--light {
  background: var(--dt-white);
  color: var(--dt-charcoal);
}

.dt-section--dark {
  background: var(--dt-charcoal);
  color: var(--dt-white);
}

.dt-section--soft {
  background: #14161a;
  color: var(--dt-white);
}

.dt-section__inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.dt-section__header {
  max-width: 46rem;
  margin: 0 0 3rem;
}

.dt-section__header--center {
  margin-inline: auto;
  text-align: center;
}

.dt-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.85rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dt-gold);
}

.dt-eyebrow::before {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 2px;
  background: var(--dt-gold);
  border-radius: 999px;
}

.dt-section__title {
  margin: 0 0 1rem;
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.15;
}

.dt-section--light .dt-section__title,
.dt-section--light .dt-stat__value {
  color: var(--dt-charcoal);
}

.dt-section__lead {
  margin: 0;
  max-width: 42rem;
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.7;
}

.dt-section--light .dt-section__lead {
  color: #4a5158;
}

.dt-section--dark .dt-section__lead,
.dt-section--soft .dt-section__lead {
  color: var(--dt-muted);
}

/* ========== Buttons (section-scoped, mirrors hero button styling) ========== */

.dt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 2.1rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border-radius: 999px;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.dt-btn--primary {
  color: var(--dt-charcoal);
  background: var(--dt-gold);
  border: 2px solid var(--dt-gold);
}

.dt-btn--primary:hover,
.dt-btn--primary:focus-visible {
  background: var(--dt-gold-hover);
  border-color: var(--dt-gold-hover);
  color: var(--dt-charcoal);
  transform: translateY(-1px);
  text-decoration: none;
}

.dt-btn--secondary {
  color: var(--dt-gold);
  background: transparent;
  border: 2px solid var(--dt-gold);
}

.dt-btn--secondary:hover,
.dt-btn--secondary:focus-visible {
  color: var(--dt-white);
  background: rgba(201, 138, 62, 0.14);
  border-color: var(--dt-gold-hover);
  transform: translateY(-1px);
  text-decoration: none;
}

.dt-section--light .dt-btn--secondary {
  color: var(--dt-charcoal);
  border-color: var(--dt-charcoal);
}

.dt-section--light .dt-btn--secondary:hover,
.dt-section--light .dt-btn--secondary:focus-visible {
  color: var(--dt-charcoal);
  background: rgba(26, 28, 31, 0.06);
  border-color: var(--dt-charcoal);
}

.dt-btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.dt-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* ========== About ========== */

.about-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(26, 28, 31, 0.1);
}

.dt-stat__value {
  margin: 0 0 0.35rem;
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  font-weight: 800;
  color: var(--dt-gold);
}

.dt-stat__label {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #6b7279;
}

/* ========== Card grid primitives (Services / Why DeilTech) ========== */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}

.dt-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2rem 1.75rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(201, 138, 62, 0.22);
  border-radius: 0.6rem;
  transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.dt-section--light .dt-card {
  background: #faf8f5;
  border-color: rgba(26, 28, 31, 0.08);
}

.dt-card:hover {
  transform: translateY(-3px);
  border-color: var(--dt-gold);
}

.dt-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  color: var(--dt-gold);
  background: rgba(201, 138, 62, 0.12);
  border-radius: 0.5rem;
  flex-shrink: 0;
}

.dt-card__icon svg {
  width: 1.6rem;
  height: 1.6rem;
}

.dt-card__title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
}

.dt-card__body {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
}

.dt-section--dark .dt-card__body,
.dt-section--soft .dt-card__body {
  color: var(--dt-muted);
}

.dt-section--light .dt-card__body {
  color: #4a5158;
}

/* ========== Value / reason grid primitive (borderless icon + title + body) ==========
   Shared structural rules for the "value grid" pattern used by the
   Capabilities "Why DeilTech" section and the About "Why Clients Work With
   Us" section. Only text colour differs between the two (light vs. dark
   section background), so each page's own stylesheet sets just
   .value-item__title / .value-item__body colour on top of this. */

.value-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.75rem 2rem;
}

.value-item {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.value-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  color: var(--dt-gold);
}

.value-item__icon svg {
  width: 100%;
  height: 100%;
}

.value-item__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
}

.value-item__body {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
}

@media (max-width: 991.98px) {
  .value-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .value-grid {
    grid-template-columns: 1fr;
  }
}

/* ========== Featured Project ========== */

/* ========== Featured Development Spotlight (Strathmore Hub) ========== */

.dev-spotlight {
  display: grid;
  grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
  gap: clamp(1.75rem, 3.5vw, 2.75rem);
  align-items: center;
}

.dev-spotlight__name {
  margin: 0 0 0.6rem;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--dt-gold);
}

.dev-spotlight__headline {
  margin: 0 0 1.1rem;
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  font-weight: 800;
  line-height: 1.18;
  color: var(--dt-white);
}

.dev-spotlight__body {
  margin: 0 0 2rem;
  max-width: 34rem;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--dt-muted);
}

.dev-spotlight__media {
  position: relative;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4);
  transition: box-shadow 0.3s ease;
}

.dev-spotlight__media:hover {
  box-shadow: 0 34px 80px rgba(0, 0, 0, 0.46);
}

.dev-spotlight__media img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
}

/* ========== Featured Developments ========== */

.dev-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}

.dev-card {
  display: flex;
  flex-direction: column;
  background: var(--dt-white);
  border: 1px solid rgba(26, 28, 31, 0.08);
  border-radius: 0.75rem;
  overflow: hidden;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.dev-card:hover {
  border-color: rgba(201, 138, 62, 0.4);
  box-shadow: 0 16px 34px rgba(26, 28, 31, 0.14);
}

.dev-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(160deg, #2a2d31, #1a1c1f 70%);
}

.dev-card__image {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(201, 138, 62, 0.55);
  background: linear-gradient(160deg, #2a2d31, #1a1c1f 70%);
  transition: transform 0.4s ease;
}

.dev-card__image svg {
  width: 26%;
  height: 26%;
}

.dev-card:hover .dev-card__image {
  transform: scale(1.045);
}

/* .dev-card__media also supports a real photograph (e.g. a related-development
   card linking to a project that already has approved imagery) as an
   alternative to the placeholder icon above — added when Strathmore Hub's
   image was reused on the iTex Flex Park "Related Developments" card. */

.dev-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.4s ease;
}

.dev-card:hover .dev-card__media img {
  transform: scale(1.045);
}

.dev-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.05) 60%);
  transition: opacity 0.25s ease;
}

.dev-card:hover .dev-card__overlay {
  opacity: 0.85;
}

.dev-card__category {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 1;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--dt-white);
}

.dev-card__category::before {
  content: "";
  display: inline-block;
  width: 0.9rem;
  height: 2px;
  margin-right: 0.4rem;
  background: var(--dt-gold);
  vertical-align: middle;
}

.dev-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.5rem 1.5rem 1.65rem;
}

.dev-card__title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--dt-charcoal);
}

.dev-card__desc {
  margin: 0 0 0.4rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: #6b7279;
}

.dev-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--dt-gold-hover);
  text-decoration: none;
}

.dev-card__link svg {
  width: 1rem;
  height: 1rem;
  transition: transform 0.2s ease;
}

.dev-card__link:hover,
.dev-card__link:focus-visible {
  color: var(--dt-charcoal);
}

.dev-card__link:hover svg,
.dev-card__link:focus-visible svg {
  transform: translateX(3px);
}

/* ========== Call To Action ========== */

.cta-band {
  padding: clamp(3.5rem, 7vw, 5rem) clamp(1.25rem, 4vw, 3.5rem);
  background: linear-gradient(120deg, #202327, var(--dt-charcoal) 65%);
  border-top: 1px solid var(--dt-gold-line);
  border-bottom: 1px solid var(--dt-gold-line);
  text-align: center;
}

.cta-band__inner {
  max-width: 42rem;
  margin: 0 auto;
}

.cta-band__title {
  margin: 0 0 0.85rem;
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  font-weight: 800;
  color: var(--dt-white);
}

.cta-band__body {
  margin: 0 0 2rem;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--dt-muted);
}

.cta-band .dt-btn-row {
  justify-content: center;
}

/* ========== Footer ========== */

.site-footer {
  padding: clamp(3rem, 6vw, 4rem) clamp(1.25rem, 4vw, 3.5rem) 2rem;
  background: #14161a;
  color: var(--dt-muted);
  border-top: 1px solid var(--dt-gold-line);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.5rem;
  max-width: 1200px;
  margin: 0 auto 2.5rem;
}

.site-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1rem;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--dt-white);
  text-decoration: none;
}

/* Approved stacked logo, sized slightly larger than the header version
   since the footer has more vertical room to work with. Width follows
   automatically to preserve the logo's aspect ratio. */
.site-footer__brand-mark {
  height: 5.5rem;
  width: auto;
  max-width: 100%;
}

.site-footer__tagline {
  margin: 0;
  max-width: 22rem;
  font-size: 0.9rem;
  line-height: 1.6;
}

.site-footer__heading {
  margin: 0 0 1.1rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dt-white);
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__links a {
  font-size: 0.92rem;
  color: var(--dt-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-footer__links a:hover,
.site-footer__links a:focus-visible {
  color: var(--dt-gold-hover);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.82rem;
}

.site-footer__bottom a {
  color: var(--dt-muted);
  text-decoration: none;
}

.site-footer__bottom a:hover,
.site-footer__bottom a:focus-visible {
  color: var(--dt-gold-hover);
}

/* ========== Responsive ========== */

@media (max-width: 991.98px) {
  .about-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .dev-spotlight {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .dev-spotlight__media {
    order: -1;
  }

  .dev-spotlight__media img {
    aspect-ratio: 16 / 10;
  }

  .site-footer__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    row-gap: 2rem;
  }

  .site-footer__brand-col {
    grid-column: 1 / -1;
  }
}

@media (max-width: 575.98px) {
  .about-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }

  .dev-grid {
    grid-template-columns: 1fr;
  }

  .dt-btn-row {
    flex-direction: column;
    align-items: stretch;
  }

  .dt-btn-row .dt-btn {
    width: 100%;
  }

  .site-footer__grid {
    grid-template-columns: 1fr;
  }

  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}