/* ==========================================================================
   Home Page Styles - Lone Star Building Company
   Spec: docs/superpowers/specs/2026-04-02-hero-section-design.md
   ========================================================================== */

/* --- Hero Section --- */

.hero {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 12px 0.72fr;
  overflow: hidden;
}

/* --- Text Side --- */

.hero__text {
  background: #E8E3DA;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px 64px 72px;
}

.hero__star svg {
  width: 32px;
  height: 32px;
}

.hero__content {
  display: flex;
  flex-direction: column;
}

.hero__eyebrow {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #B54A2E;
  margin-bottom: 28px;
}

.hero__name {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: clamp(56px, 6vw, 88px);
  line-height: 0.9;
  color: #2C2520;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin: 0;
}

.hero__name span {
  display: block;
}

.hero__name--accent {
  color: #B54A2E;
}

.hero__descriptor {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: #2C2520;
  opacity: 0.6;
  margin-top: 36px;
  max-width: 400px;
}

.hero__rule {
  width: 48px;
  height: 2px;
  background: #B54A2E;
  opacity: 0.35;
  margin: 36px 0;
  border: none;
}

.hero__services {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #2C2520;
  opacity: 0.35;
  margin: 0;
}

/* --- CTA --- */

.hero__cta {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 44px;
}

.hero__cta-btn {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: #B54A2E;
  color: #E8E3DA;
  border: none;
  padding: 18px 40px;
  text-decoration: none;
  display: inline-block;
  transition: background 0.2s ease-out;
}

.hero__cta-btn:hover {
  background: #9A3E26;
  color: #E8E3DA;
  opacity: 1;
}

.hero__cta-btn:focus-visible {
  outline: 2px solid #B54A2E;
  outline-offset: 2px;
}

.hero__cta-phone {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #2C2520;
  opacity: 0.45;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: opacity 0.2s ease-out;
}

.hero__cta-phone:hover {
  opacity: 0.75;
  color: #2C2520;
}

/* --- Rust Beam --- */

.hero__beam {
  background: #B54A2E;
  width: 12px;
}

/* --- Entrance animations --- */

@media (prefers-reduced-motion: no-preference) {
  .hero__beam {
    transform-origin: top;
    transform: scaleY(0);
    animation: beam-draw 450ms cubic-bezier(0.22, 1, 0.36, 1) 100ms forwards;
  }

  .hero__name span {
    opacity: 0;
    transform: translateY(24px);
    animation: word-rise 380ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }

  .hero__name span:nth-child(1) { animation-delay: 480ms; }
  .hero__name span:nth-child(2) { animation-delay: 540ms; }
  .hero__name span:nth-child(3) { animation-delay: 600ms; }
  .hero__name span:nth-child(4) { animation-delay: 660ms; }

  @keyframes beam-draw {
    to { transform: scaleY(1); }
  }

  @keyframes word-rise {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* --- Image Side --- */

.hero__image {
  position: relative;
  overflow: hidden;
  background: #2C2520;
}

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

.hero__image-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(44,37,32,0.12) 0%, transparent 30%),
    linear-gradient(to top, rgba(44,37,32,0.2) 0%, transparent 20%);
  pointer-events: none;
}

.hero__image-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(181,74,46,0.06);
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* ==========================================================================
   Services Section
   ========================================================================== */

.services {
  background: #2C2520;
  color: #E8E3DA;
}

.services__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 96px 64px 112px;
  display: grid;
  grid-template-columns: 0.35fr 0.65fr;
  gap: 64px;
}

.services__header {
  position: sticky;
  top: 96px;
  align-self: start;
}


.services__eyebrow {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #B54A2E;
  margin: 0 0 20px;
}

.services__heading {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: clamp(36px, 4vw, 56px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: #E8E3DA;
  margin: 0;
}

/* --- Service Items --- */

.services__list {
  display: flex;
  flex-direction: column;
}

.services__item {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 32px;
  padding: 48px 0;
  border-top: 1px solid rgba(232,227,218,0.1);
}

.services__item:last-child {
  border-bottom: 1px solid rgba(232,227,218,0.1);
}

.services__number {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #B54A2E;
}

.services__name {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.1;
  color: #E8E3DA;
  margin: 0 0 14px;
}

.services__desc {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: #E8E3DA;
  opacity: 0.5;
  margin: 0;
  max-width: 560px;
}

/* ==========================================================================
   Commercial Section
   ========================================================================== */

.commercial {
  background: #E8E3DA;
  position: relative;
}

.commercial__beam {
  background: #B54A2E;
  height: 12px;
  width: 100%;
}

.commercial__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 112px 64px 120px;
}

.commercial__top {
  margin-bottom: 56px;
}

.commercial__eyebrow {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #B54A2E;
  margin: 0 0 28px;
}

.commercial__heading {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: clamp(56px, 7vw, 104px);
  line-height: 0.92;
  letter-spacing: -0.035em;
  color: #2C2520;
  margin: 0;
  text-transform: none;
}

.commercial__heading-line {
  display: block;
}

@media (prefers-reduced-motion: no-preference) {
  .commercial__heading .commercial__heading-line {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .commercial__heading.is-revealed .commercial__heading-line:nth-child(1) {
    transition-delay: 0ms;
  }

  .commercial__heading.is-revealed .commercial__heading-line:nth-child(2) {
    transition-delay: 120ms;
  }

  .commercial__heading.is-revealed .commercial__heading-line {
    opacity: 1;
    transform: translateY(0);
  }
}

.commercial__heading-accent {
  color: #B54A2E;
}

.commercial__pitch {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px;
  line-height: 1.6;
  color: #2C2520;
  opacity: 0.7;
  margin: 0 0 88px;
  max-width: 600px;
}

.commercial__detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  margin-bottom: 96px;
  border-top: 1px solid rgba(44,37,32,0.18);
  padding-top: 56px;
}

.commercial__column-label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #2C2520;
  opacity: 0.4;
  margin: 0 0 24px;
}

.commercial__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.commercial__list li {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.35;
  color: #2C2520;
  padding: 14px 0;
  border-top: 1px solid rgba(44,37,32,0.1);
}

.commercial__list li:first-child {
  border-top: none;
  padding-top: 0;
}

.commercial__proof {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #2C2520;
  opacity: 0.55;
  margin: 0;
  line-height: 1.7;
}

.commercial__proof-label {
  font-weight: 700;
  color: #B54A2E;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 11px;
  margin-right: 14px;
  opacity: 1;
}

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

.about {
  background: #E8E3DA;
  display: grid;
  grid-template-columns: 0.45fr 0.55fr;
  position: relative;
}

.about__beam {
  background: #B54A2E;
  height: 12px;
  width: 100%;
  grid-column: 1 / -1;
}

.about__photo {
  background: #2C2520;
  min-height: 520px;
  overflow: hidden;
}

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

.about__content {
  padding: 80px 64px 80px 72px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.about__eyebrow {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #B54A2E;
  margin: 0 0 20px;
}

.about__heading {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: clamp(32px, 3.5vw, 44px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: #2C2520;
  margin: 0 0 28px;
}

.about__body {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: #2C2520;
  opacity: 0.6;
  margin: 0 0 32px;
  max-width: 480px;
}

.about__values {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 32px;
}

.about__value {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #2C2520;
}

.about__value-dot {
  color: #B54A2E;
  font-size: 20px;
  line-height: 1;
}

.about__quote {
  margin: 0;
  padding: 24px 0 0;
  border-top: 1px solid rgba(44,37,32,0.18);
  max-width: 480px;
}

.about__quote-text {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 19px;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: #2C2520;
  margin: 0 0 14px;
}

.about__quote-attr {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #B54A2E;
  margin: 0;
}

/* ==========================================================================
   Contact Section
   ========================================================================== */

.contact {
  background: #2C2520;
  color: #E8E3DA;
}

.contact__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 96px 64px 112px;
  display: grid;
  grid-template-columns: 0.4fr 0.6fr;
  gap: 64px;
  align-items: start;
}

.contact__eyebrow {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #B54A2E;
  margin: 0 0 20px;
}

.contact__heading {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: clamp(36px, 4vw, 56px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: #E8E3DA;
  margin: 0;
}

.contact__body {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: #E8E3DA;
  opacity: 0.5;
  margin: 0 0 48px;
  max-width: 440px;
}

.contact__methods {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.contact__method {
  display: block;
  text-decoration: none;
  color: #E8E3DA;
  border-top: 1px solid rgba(232,227,218,0.1);
  padding-top: 24px;
}

.contact__method:not(.contact__method--static):hover .contact__method-value {
  color: #B54A2E;
}

.contact__method-label {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #E8E3DA;
  opacity: 0.35;
  margin-bottom: 8px;
}

.contact__method-value {
  display: block;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: #E8E3DA;
  transition: color 0.2s ease-out;
}

/* ==========================================================================
   Responsive - Mobile (below 768px)
   ========================================================================== */

@media (max-width: 767px) {

  .hero {
    grid-template-columns: 1fr;
    grid-template-rows: 35vh 8px auto;
    min-height: auto;
    overflow: visible;
  }

  .hero__image {
    grid-row: 1;
  }

  .hero__beam {
    grid-row: 2;
    width: 100%;
    height: 8px;
  }

  .hero__text {
    grid-row: 3;
    padding: 32px 24px 48px;
    justify-content: flex-start;
  }

  .hero__star {
    margin-bottom: 32px;
  }

  .hero__name {
    font-size: clamp(42px, 10vw, 56px);
  }

  .hero__descriptor {
    margin-top: 28px;
    max-width: none;
  }

  .hero__rule {
    margin: 28px 0;
  }

  .hero__cta {
    margin-top: 36px;
  }

  /* Services mobile */
  .services__inner {
    padding: 64px 24px 80px;
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .services__header {
    position: static;
  }



  .services__item {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 36px 0;
  }

  .services__number {
    font-size: 48px;
  }

  /* Commercial mobile */
  .commercial__inner {
    padding: 72px 24px 80px;
  }

  .commercial__top {
    margin-bottom: 40px;
  }

  .commercial__heading {
    font-size: clamp(44px, 12vw, 64px);
  }

  .commercial__pitch {
    font-size: 16px;
    margin: 0 0 56px;
  }

  .commercial__detail {
    grid-template-columns: 1fr;
    gap: 48px;
    padding-top: 40px;
    margin-bottom: 64px;
  }

  .commercial__list li {
    font-size: 19px;
  }

  /* About mobile */
  .about {
    grid-template-columns: minmax(0, 1fr);
  }

  .about__photo {
    min-height: 300px;
    min-width: 0;
  }

  .about__content {
    padding: 48px 24px 64px;
  }

  /* Contact mobile */
  .contact__inner {
    padding: 64px 24px 80px;
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .contact__method-value {
    font-size: 18px;
  }
}

@media (max-width: 379px) {

  .hero__cta {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}