/* css/home.css */

/* Hero */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  padding-block: var(--space-120);
}

.hero__inner { max-width: 680px; }

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  margin-bottom: var(--space-32);
}
.hero__eyebrow::before {
  content: '';
  display: block;
  width: 40px;
  height: 2px;
  background: var(--color-navy);
}

.hero h1 {
  margin-bottom: var(--space-24);
  color: var(--color-ink);
}

.hero__sub {
  font-size: var(--text-lg);
  color: var(--color-muted);
  margin-bottom: var(--space-48);
  font-family: var(--font-sans);
}

/* Hero bubble layer sits behind content */
.hero > .container,
.hero > .hero__inner {
  position: relative;
  z-index: 1;
}

/* Geometric accent rule */
.hero__accent {
  position: absolute;
  bottom: var(--space-80);
  left: 0;
  width: 120px;
  height: 2px;
  background: var(--color-navy);
  transform: rotate(-12deg);
  transform-origin: left center;
}

/* Services Preview */
.services-preview__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-48);
}

.service-card { border-bottom: 1px solid var(--color-border); padding-bottom: var(--space-32); }

.service-card__number {
  font-family: var(--font-serif);
  font-size: var(--text-5xl);
  color: var(--color-navy-10);
  line-height: 1;
  display: block;
  margin-bottom: var(--space-16);
  user-select: none;
}

.service-card h3 { margin-bottom: var(--space-16); }

.service-card p { margin-bottom: var(--space-24); }

/* Featured Projects */
.projects-preview__grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--space-16);
  margin-bottom: var(--space-32);
}

.projects-preview__main {
  grid-row: 1 / 3;
}

.project-thumb {
  width: 100%;
  height: 100%;
  min-height: 240px;
  object-fit: cover;
  display: block;
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* About Teaser */
.about-teaser__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-80);
  align-items: center;
}

.about-teaser__text h2 { margin-bottom: var(--space-24); }
.about-teaser__text p { margin-bottom: var(--space-32); }

.about-teaser__image {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 18px 42px rgba(13, 43, 85, 0.12);
}

/* Painted Away Section */
.painted-away .section-heading {
  margin-bottom: 0;
}

.painted-words {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin-top: var(--space-48);
  max-width: 680px;
}

/* Before/After Section */
.ba-section { background: var(--color-off-white); }

/* Shield section responsive */
@media (max-width: 900px) {
  .shield-section__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .shield-stats { justify-content: center; }
  .shield-wrap { margin-bottom: var(--space-48); }
}

/* Services grid */
.services-preview__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Responsive */
@media (max-width: 768px) {
  .hero {
    min-height: auto;
    align-items: flex-start;
    padding-top: calc(var(--nav-height) + var(--space-48));
    padding-bottom: var(--space-80);
  }
  .hero__inner { max-width: none; }
  .hero__eyebrow {
    align-items: flex-start;
    gap: var(--space-12);
    margin-bottom: var(--space-24);
  }
  .hero__eyebrow::before {
    width: 28px;
    flex: 0 0 28px;
    margin-top: 0.55rem;
  }
  .hero h1 { margin-bottom: var(--space-16); }
  .hero__sub {
    font-size: var(--text-base);
    margin-bottom: var(--space-32);
  }
  .hero__accent { display: none; }
  .services-preview__grid { grid-template-columns: 1fr; gap: var(--space-32); }
  .service-card__number { font-size: 3.6rem; }
  .projects-preview__grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: var(--space-24);
  }
  .projects-preview__main { grid-row: auto; }
  .project-thumb { min-height: 220px; }
  .about-teaser__grid { grid-template-columns: 1fr; gap: var(--space-48); }
  .about-teaser__image { aspect-ratio: 4 / 3; }
  .painted-words {
    max-width: none;
    margin-top: var(--space-32);
  }
}

@media (max-width: 480px) {
  .hero { padding-top: calc(var(--nav-height) + var(--space-32)); }
  .hero__eyebrow .label { line-height: 1.45; }
  .project-thumb { min-height: 190px; }
}