/* ==========================================================
   ALPHA COMMERCIAL - Commercial Division Styles
   Loaded ONLY on /commercial/ pages (in addition to
   shared.css + main-site.css). Holds the styles for the
   B2B-only sections that don't exist on the residential
   pages: the intro band, "who we serve" audience cards,
   the two service cards, the project-type chips, and the
   4-step process grid.

   The commercial hero itself is styled in the page's inline
   critical CSS (dark gradient, no photo) so it renders
   instantly. This file only adds the sections below the hero.
   ========================================================== */


/* --- HERO OVERRIDE ----------------------------------------
   shared.css forces .hero to min-height:100vh (85vh desktop),
   which is a full-screen residential hero. The commercial hero
   is a compact, conversion-focused B2B hero sized to its
   content, so we override the height here (commercial.css loads
   after shared.css, so these win). The dark photo overlay is
   also set here so it can't be overridden by shared.css. */
.hero { min-height: auto; }
.hero__overlay {
  background: linear-gradient(135deg, rgba(17,17,32,0.94) 0%, rgba(26,26,46,0.82) 55%, rgba(36,16,24,0.78) 100%);
}
@media (min-width: 768px) {
  .hero { min-height: 560px; }
}


/* --- INTRO BAND -------------------------------------------
   A short, centered lead paragraph that frames Alpha
   Commercial as a serious division, right under the hero. */
.commercial-intro {
  background: var(--color-white);
  padding: var(--space-xl) 0;
}
.commercial-intro__inner {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.commercial-intro__eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-red);
  margin-bottom: var(--space-sm);
}
.commercial-intro__heading {
  font-size: 1.6rem;
  margin-bottom: var(--space-md);
}
.commercial-intro__text {
  font-size: 1.05rem;
  color: var(--color-medium-gray);
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .commercial-intro__heading { font-size: 2rem; }
}


/* --- WHO WE SERVE (audience cards) ------------------------
   Three cards on a light-gray band. One column on mobile,
   three across on desktop. */
.audience {
  background: var(--color-light-gray);
  padding: var(--space-xl) 0;
}
.audience__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.audience-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.audience-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 40px rgba(26,26,46,0.10);
}
.audience-card__icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(212,0,0,0.08);
  border-radius: var(--radius);
  margin-bottom: var(--space-sm);
}
.audience-card__title {
  font-size: 1.2rem;
  margin-bottom: var(--space-xs);
}
.audience-card__text {
  font-size: 0.97rem;
  color: var(--color-medium-gray);
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .audience__grid { grid-template-columns: repeat(3, 1fr); }
}


/* --- COMMERCIAL SERVICES (two large cards) ---------------
   The two core offerings. One column on mobile, two across
   on desktop. Dark cards so they read as "premium / B2B". */
.csvc {
  background: var(--color-white);
  padding: var(--space-xl) 0;
}
.csvc__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.csvc-card {
  position: relative;
  background: var(--color-dark);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  overflow: hidden;
}
/* Thin red accent bar down the left edge of each card */
.csvc-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--color-red);
}
.csvc-card__tag {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: var(--color-red);
  padding: 4px 12px;
  border-radius: 50px;
  margin-bottom: var(--space-sm);
}
.csvc-card__title {
  color: #fff;
  font-size: 1.45rem;
  margin-bottom: var(--space-sm);
}
.csvc-card__text {
  color: rgba(255,255,255,0.82);
  font-size: 0.98rem;
  margin-bottom: var(--space-md);
}
.csvc-card__list {
  list-style: none;
  margin: 0 0 var(--space-md);
  padding: 0;
}
.csvc-card__list li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.9);
}
/* Red check mark before each list item */
.csvc-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45rem;
  width: 8px;
  height: 14px;
  border: solid var(--color-red);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
.csvc-card__cta {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 700;
  color: #fff;
  border-bottom: 2px solid var(--color-red);
  padding-bottom: 2px;
  transition: color 0.2s ease;
}
.csvc-card__cta:hover { color: var(--color-red); }
@media (min-width: 768px) {
  .csvc__grid { grid-template-columns: repeat(2, 1fr); }
  .csvc-card { padding: var(--space-xl); }
}


/* --- PROJECT TYPE CHIPS ----------------------------------
   A simple wrapped list of the commercial space types we
   deliver. Good for visitors AND for SEO keyword coverage. */
.proj-types {
  background: var(--color-light-gray);
  padding: var(--space-xl) 0;
}
.proj-types__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  padding: 0;
  list-style: none;
}
.proj-types__chip {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 50px;
  padding: 12px 22px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-dark);
}


/* --- FEATURED PROJECTS ------------------------------------
   Real commercial projects with a photo grid each. The first
   image of the Fefles project is labelled "During" and the
   rest "After" to tell a before/after story. */
.projects {
  background: var(--color-white);
  padding: var(--space-xl) 0;
}
.projects__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  margin-top: var(--space-lg);
}
.project {
  border-top: 4px solid var(--color-red);
  padding-top: var(--space-lg);
}
.project__tag {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-red);
  margin-bottom: var(--space-xs);
}
.project__title {
  font-size: 1.5rem;
  margin-bottom: 0.15rem;
}
.project__meta {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-medium-gray);
  margin-bottom: var(--space-sm);
}
.project__text {
  max-width: 760px;
  color: var(--color-medium-gray);
  margin-bottom: var(--space-md);
}
.project__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
}
.project__fig {
  position: relative;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-light-gray);
}
.project__fig img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.project__fig:hover img { transform: scale(1.04); }
/* During/After badge in the corner of a photo */
.project__ba-label {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(26,26,46,0.85);
  padding: 4px 12px;
  border-radius: 50px;
}
.project__ba-label--after { background: var(--color-red); }
.projects__cta {
  text-align: center;
  margin-top: var(--space-lg);
}
@media (min-width: 768px) {
  .project__title { font-size: 1.8rem; }
  .project__grid { grid-template-columns: repeat(4, 1fr); }
  .project__grid--three { grid-template-columns: repeat(3, 1fr); }
}


/* --- 4-STEP PROCESS GRID ---------------------------------
   The shared .steps__grid is 3 columns on desktop. The
   commercial process has 4 steps, so this modifier makes it
   4 across on wide screens and 2x2 on tablets. */
@media (min-width: 600px) {
  .steps__grid--four { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .steps__grid--four { grid-template-columns: repeat(4, 1fr); }
}