/* ============================================================
   HOME PAGE — css/pages/home.css

   Hero-specific overrides, stats bar enhancements, and
   entrance animations for the homepage.
   ============================================================ */


/* ------------------------------------------------------------
   1. HERO EYEBROW
   Coral accent label above the headline — establishes
   veteran-owned status at hero level.
   ------------------------------------------------------------ */

.home-hero__eyebrow {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-brand-warm);
  margin-bottom: var(--space-4);
}


/* ------------------------------------------------------------
   2. HERO TITLE — Desktop size boost
   The base .hero__title uses --text-6xl (36→48px).
   On desktop we push larger for more impact.
   ------------------------------------------------------------ */

@media (min-width: 64rem) {
  .home-hero__title {
    font-size: clamp(2.5rem, 2rem + 3vw, 4rem);
  }
}


/* ------------------------------------------------------------
   3. HERO OVERLAY — Gradient for text contrast
   Dark gradient anchored at bottom-left where text sits,
   fading out so the video shows through naturally.
   ------------------------------------------------------------ */

.home-hero .hero__overlay {
  background:
    linear-gradient(
      to right,
      rgba(17, 17, 17, 0.7) 0%,
      rgba(17, 17, 17, 0.35) 55%,
      rgba(17, 17, 17, 0.1) 100%
    ),
    linear-gradient(
      to top,
      rgba(17, 17, 17, 0.6) 0%,
      rgba(17, 17, 17, 0.15) 50%,
      transparent 100%
    );
}


/* ------------------------------------------------------------
   4. STATS BAR — Dividers
   Top border separates stats from hero. Vertical dividers
   between stat columns appear at tablet+.
   ------------------------------------------------------------ */

.home-stats .stats-bar {
  border-top: var(--border-width-thin) solid var(--color-border-dark);
}

@media (min-width: 48rem) {
  .home-stats .stat + .stat {
    border-left: var(--border-width-thin) solid var(--color-border-dark);
  }
}


/* ------------------------------------------------------------
   5. ENTRANCE ANIMATIONS
   Staggered fade-in + slide-up on page load.
   Reduced-motion handled globally by reset.css (collapses
   all animation-duration to 0.01ms).
   ------------------------------------------------------------ */

@keyframes heroFadeIn {
  from {
    opacity: 0;
    transform: translateY(1.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hero content children */
.home-hero .hero__content > * {
  opacity: 0;
  transform: translateY(1.5rem);
  animation: heroFadeIn 0.6s ease-out forwards;
}

.home-hero .hero__content > *:nth-child(1) { animation-delay: 0.1s; }
.home-hero .hero__content > *:nth-child(2) { animation-delay: 0.25s; }
.home-hero .hero__content > *:nth-child(3) { animation-delay: 0.4s; }
.home-hero .hero__content > *:nth-child(4) { animation-delay: 0.55s; }

/* Stats bar items */
.home-stat {
  opacity: 0;
  transform: translateY(1rem);
  animation: heroFadeIn 0.5s ease-out forwards;
  animation-delay: 0.7s;
}

.home-stat:nth-child(2) { animation-delay: 0.85s; }
.home-stat:nth-child(3) { animation-delay: 1.0s; }


/* ------------------------------------------------------------
   6. "BUILDING AN INDUSTRY" SECTION
   Light gradient background to contrast with the dark hero
   and stats bar above.
   ------------------------------------------------------------ */

.home-industry {
  background-image: linear-gradient(
    180deg,
    var(--color-surface-ghost) 0%,
    var(--color-surface-white) 100%
  );
}


/* ------------------------------------------------------------
   7. VALUE CARDS
   Dark cards with image top, text body below. Used for the
   Quality / Safety / PPC Family trio.
   ------------------------------------------------------------ */

.value-card {
  position: relative;
  background-color: var(--color-surface-darker);
  border-radius: 0;
  overflow: hidden;
  transition: transform var(--transition-base),
              box-shadow var(--transition-base);
}

.value-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-glow);
}

/* Animated outline — four edges trace simultaneously from three corners:
   UL corner: top edge grows right + left edge grows down (on ::before)
   UR corner: right edge grows down (on __outline::before)
   BL corner: bottom edge grows right (on __outline::after)
   All four edges complete in the same 0.3s window, matching the WF draft. */

/* UL anchor: top + left edges (grow width and height together).
   Opacity hides the 2×2px border intersection at the corner when at rest;
   flips instantly on hover-in, delays on hover-out until retract finishes. */
.value-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  opacity: 0;
  border-top: 2px solid var(--color-brand-accent);
  border-left: 2px solid var(--color-brand-accent);
  z-index: 2;
  pointer-events: none;
  transition: width 0.3s ease-in,
              height 0.3s ease-in,
              opacity 0s linear 0.3s;
}

.value-card:hover::before {
  width: 100%;
  height: 100%;
  opacity: 1;
  transition: width 0.3s ease-out,
              height 0.3s ease-out,
              opacity 0s linear 0s;
}

/* Helper span hosts the other two edges (UR and BL anchors) */
.value-card__outline {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* UR anchor: right edge grows downward */
.value-card__outline::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-right: 2px solid var(--color-brand-accent);
  transition: height 0.3s ease-in;
}

.value-card:hover .value-card__outline::before {
  height: 100%;
  transition: height 0.3s ease-out;
}

/* BL anchor: bottom edge grows rightward */
.value-card__outline::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 0;
  border-bottom: 2px solid var(--color-brand-accent);
  transition: width 0.3s ease-in;
}

.value-card:hover .value-card__outline::after {
  width: 100%;
  transition: width 0.3s ease-out;
}

.value-card__image {
  overflow: hidden;
  height: 14rem;
}

.value-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.value-card:hover .value-card__image img {
  transform: scale(1.04);
}

.value-card__body {
  padding: var(--space-6);
}

.value-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  color: var(--color-text-on-dark);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-3);
}

.value-card__text {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--palette-navy-light);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-4);
}

/* Remove bottom margin on last element in card body */
.value-card__body > *:last-child {
  margin-bottom: 0;
}

/* Card CTA link — white on dark card, inverts to PPC Blue on white highlight */
.value-card__link {
  color: var(--color-text-on-dark);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-base),
              color var(--transition-base);
}

.value-card__link:hover,
.value-card__link:focus-visible {
  background-color: var(--color-surface-white);
  color: var(--color-brand-primary);
}


/* ------------------------------------------------------------
   8. SCROLL-TRIGGERED FADE-IN
   Elements with .fade-in start invisible and slide up when
   IntersectionObserver adds .is-visible. Stagger child cards
   via transition-delay.
   ------------------------------------------------------------ */

.fade-in {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger the three value cards */
.grid--3 > .fade-in:nth-child(2) { transition-delay: 0.15s; }
.grid--3 > .fade-in:nth-child(3) { transition-delay: 0.3s; }


/* ------------------------------------------------------------
   9. SERVICES OVERVIEW — Lifecycle Phases
   Editorial, typography-forward services section. Three phase
   cards anchored by oversized numerals, atmospheric charcoal
   background with blueprint grid + blue-glow radial. Hover
   interaction: hairline top-border slides in left→right, card
   lifts, numeral brightens. Mirrors the corner-trace animation
   on .value-card above to keep visual language consistent.
   ------------------------------------------------------------ */

.home-services {
  position: relative;
  background-color: var(--palette-charcoal);
  color: var(--color-text-on-dark);
  overflow: hidden;
  isolation: isolate;
}

/* Background: solar panel photo + dark gradient overlay + accent glow.
   Layering (top → bottom):
   1. radial blue glow (top-right) — brand atmosphere
   2. linear gradient — darkens image enough for text contrast (stronger
      at left/bottom where the heading + card text sit)
   3. solar panel photo — cover, desaturated via brightness filter */
.home-services__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    radial-gradient(
      ellipse 800px 600px at 92% 8%,
      rgba(63, 116, 255, 0.18) 0%,
      rgba(63, 116, 255, 0.06) 40%,
      transparent 70%
    ),
    linear-gradient(
      135deg,
      rgba(17, 17, 17, 0.92) 0%,
      rgba(17, 17, 17, 0.78) 45%,
      rgba(17, 17, 17, 0.85) 100%
    ),
    url('../../images/home/solar-panels-bg.jpg');
  background-size: cover, cover, cover;
  background-position: center, center, center;
  background-repeat: no-repeat;
  pointer-events: none;
}

.home-services__inner {
  position: relative;
}

/* Heading — left-aligned, no divider, constrained width */
.home-services__heading {
  max-width: 40rem;
  margin-bottom: var(--space-12);
}

.home-services__heading .section-heading__title {
  text-transform: none;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  color: var(--color-text-on-dark);
  margin-bottom: var(--space-5);
}

.home-services__heading .section-heading__subtitle {
  color: var(--color-text-on-dark-muted);
  margin-left: 0;
  margin-right: 0;
}

@media (min-width: 64rem) {
  .home-services__heading {
    margin-bottom: var(--space-16);
  }
}


/* --- Phase Grid ------------------------------------------- */

.phase-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 64rem) {
  .phase-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }
}


/* --- Phase Card ------------------------------------------- */

.phase-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-8) var(--space-6);
  min-height: 16rem;
  text-decoration: none;
  color: inherit;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: transform var(--transition-base),
              background-color var(--transition-base),
              border-color var(--transition-base),
              box-shadow var(--transition-base);
  overflow: hidden;
}

@media (min-width: 64rem) {
  .phase-card {
    padding: var(--space-10) var(--space-8);
    min-height: 20rem;
  }
}

/* Accent hairline that slides in on hover, left → right.
   Matches the corner-trace animation language of .value-card. */
.phase-card::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 2px;
  background-color: var(--color-brand-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s ease-out;
  pointer-events: none;
  z-index: 2;
}

.phase-card:hover,
.phase-card:focus-visible {
  transform: translateY(-4px);
  background-color: var(--palette-white);
  border-color: var(--palette-white);
  box-shadow: var(--shadow-glow);
  outline: none;
}

.phase-card:hover::before,
.phase-card:focus-visible::before {
  transform: scaleX(1);
}

/* Oversized numeral — top-right accent blue, brightens on hover */
.phase-card__number {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: clamp(4rem, 3rem + 5vw, 6.5rem);
  line-height: 1;
  color: var(--color-brand-accent);
  opacity: 0.25;
  transition: opacity var(--transition-base),
              color var(--transition-base);
  pointer-events: none;
  user-select: none;
}

.phase-card:hover .phase-card__number,
.phase-card:focus-visible .phase-card__number {
  opacity: 0.85;
}

@media (min-width: 64rem) {
  .phase-card__number {
    top: var(--space-6);
    right: var(--space-6);
  }
}

/* Eyebrow label — accent blue at rest, darker on hover */
.phase-card__eyebrow {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-brand-accent);
  margin-bottom: var(--space-4);
  position: relative;
  z-index: 1;
  transition: color var(--transition-base);
}

.phase-card:hover .phase-card__eyebrow,
.phase-card:focus-visible .phase-card__eyebrow {
  color: var(--color-brand-accent-hover);
}

/* Title — white at rest, dark heading color when card goes solid */
.phase-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-text-on-dark);
  margin-bottom: var(--space-4);
  position: relative;
  z-index: 1;
  max-width: 18rem;
  transition: color var(--transition-base);
}

.phase-card:hover .phase-card__title,
.phase-card:focus-visible .phase-card__title {
  color: var(--color-text-heading);
}

/* Body — muted-light at rest, dark-secondary on hover */
.phase-card__text {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: auto;
  position: relative;
  z-index: 1;
  max-width: 22rem;
  transition: color var(--transition-base);
}

.phase-card:hover .phase-card__text,
.phase-card:focus-visible .phase-card__text {
  color: var(--color-text-secondary);
}

/* "Explore X →" link at card bottom */
.phase-card__link {
  display: inline-block;
  margin-top: var(--space-6);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-brand-accent);
  transition: letter-spacing var(--transition-base),
              color var(--transition-base);
  position: relative;
  z-index: 1;
}

.phase-card:hover .phase-card__link,
.phase-card:focus-visible .phase-card__link {
  letter-spacing: 0.12em;
  color: var(--color-brand-accent-hover);
}


/* ------------------------------------------------------------
   10. FEATURED PROJECTS — Asymmetric Bento Grid
   Portfolio-style showcase with one flagship tile + two small
   tiles. Photo-first: MW rating is the display-scale hero,
   with project name eyebrow + location supporting. Hover zoom
   + accent-bar slide-in echo the .phase-card interaction
   language for cross-section cohesion.
   ------------------------------------------------------------ */

.home-projects {
  background-color: var(--color-surface-snow);
  color: var(--color-text-primary);
}

/* Header row: title left, CTA right on desktop */
.home-projects__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  margin-bottom: var(--space-10);
}

.home-projects__heading {
  margin-bottom: 0;
}

.home-projects__cta {
  flex-shrink: 0;
  white-space: nowrap;
}

@media (min-width: 64rem) {
  .home-projects__header {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-8);
    margin-bottom: var(--space-12);
  }
}


/* Bento grid + project tile styles promoted to components.css
   for shared use across home and projects pages. */


/* ============================================================
   11. HOME — ABOUT CTA ("Est. 2012" closing statement)
   Single-focus editorial closing section. Navy background
   creates a bookend with the navy Stats Bar near page top.
   Oversized faint "2012" numeral acts as typographic ornament,
   echoing the phase-card numerals in the services section.
   ============================================================ */

.home-cta {
  position: relative;
  overflow: hidden;
  background-color: var(--color-surface-darker);
  color: var(--color-text-on-dark);
}

.home-cta__ornament {
  position: absolute;
  top: -0.25em;
  right: -0.08em;
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: clamp(8rem, 6rem + 10vw, 18rem);
  line-height: 0.8;
  letter-spacing: var(--tracking-tight);
  color: var(--palette-royal);
  opacity: 0.08;
  pointer-events: none;
  user-select: none;
  z-index: var(--z-base);
}

.home-cta__inner {
  position: relative;
  z-index: var(--z-raised);
  max-width: 48rem;
}

.home-cta__eyebrow {
  margin: 0 0 var(--space-4);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-brand-accent);
}

.home-cta__title {
  margin: 0 0 var(--space-6);
  max-width: 40rem;
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-on-dark);
}

.home-cta__text {
  margin: 0 0 var(--space-8);
  max-width: 36rem;
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: rgba(255, 255, 255, 0.82);
}

.home-cta__button {
  display: inline-flex;
}

/* On small screens, push the ornament further off-edge and
   dim it more so it doesn't compete with the headline. */
@media (max-width: 63.9375rem) {
  .home-cta__ornament {
    right: -0.15em;
    opacity: 0.06;
  }
}


/* ============================================================
   12. HOME — WORKFORCE DEVELOPMENT
   Apprenticeship program + IRA workforce support. Two-column
   editorial block: narrative left, dark credential panel right.
   Ghost background steps down from the snow Projects section
   above into the charcoal CTA below.
   The panel reuses the visual language of .cert-item on the
   services page (charcoal card, royal icons, uppercase label
   over muted detail) — restated here because services.css is
   not loaded on the homepage.
   ============================================================ */

.home-workforce__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: start;
}

@media (min-width: 64rem) {
  .home-workforce__inner {
    /* Narrative gets the wider column; panel stays compact. */
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--space-12);
  }
}

@media (min-width: 90rem) {
  .home-workforce__inner {
    gap: var(--space-16);
  }
}

/* Slightly more breathing room under the title than the
   shared .section-heading__title default (--space-4). */
.home-workforce__content .section-heading__title {
  margin-bottom: var(--space-6);
}

.home-workforce__text {
  margin: 0 0 var(--space-5);
  max-width: 34rem;
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
}

.home-workforce__text:last-of-type {
  margin-bottom: 0;
}


/* ---- Credential panel ---------------------------------- */

.home-workforce__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin: 0;
  padding: var(--space-8);
  list-style: none;
  background-color: var(--palette-charcoal);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-md);
}

.home-workforce__item {
  display: grid;
  grid-template-columns: 2rem 1fr;
  column-gap: var(--space-4);
  row-gap: var(--space-1);
  align-items: start;
}

/* Hairline divider between entries. */
.home-workforce__item + .home-workforce__item {
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.home-workforce__icon {
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  color: var(--color-brand-accent);
}

.home-workforce__icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-workforce__label {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height: var(--leading-snug);
  color: var(--color-text-on-dark);
}

/* --color-text-on-dark-muted is flagged "large text only" in
   variables.css because of its 2.8:1 ratio on navy. On this
   charcoal panel it measures ~9:1, so it is safe at 13px. */
.home-workforce__detail {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-on-dark-muted);
}