/* ==========================================================================
   Site Prep Pros — Inner Pages CSS
   Styles for: About, Services, Portfolio, Contact, Header-Footer pages
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PAGE HERO (Shared across all inner pages)
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  min-height: 26.25rem;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--charcoal);
  color: var(--text-on-dark);
}

@media (min-width: 640px) { .page-hero { min-height: 30rem; } }

.page-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  opacity: 0.75;
}

.page-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(15, 17, 22, 0.75) 0%,
    rgba(18, 20, 27, 0.6) 50%,
    rgba(18, 20, 27, 0.92) 100%
  );
}

.page-hero__noise {
  position: absolute;
  inset: 0;
  opacity: 0.25;
  mix-blend-mode: overlay;
}

.page-hero__gridlines {
  position: absolute;
  inset: 0;
  opacity: 0.25;
}

.page-hero__inner {
  position: relative;
  z-index: 10;
  max-width: var(--max-w-7xl);
  margin: 0 auto;
  padding: 9rem 1.25rem 3.5rem;
  width: 100%;
}

@media (min-width: 640px) { .page-hero__inner { padding: 10rem 1.5rem 5rem; } }

.page-hero__eyebrow {
  font-size: 0.625rem;
  letter-spacing: 0.4em;
  color: var(--primary);
  font-weight: 600;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

@media (min-width: 640px) { .page-hero__eyebrow { font-size: 0.75rem; } }

.page-hero__eyebrow-line {
  display: inline-block;
  width: 1.5rem;
  height: 1px;
  background: var(--primary);
  flex-shrink: 0;
}

@media (min-width: 640px) { .page-hero__eyebrow-line { width: 2rem; } }

.page-hero__h1 {
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 0.92;
  text-wrap: balance;
  max-width: 56rem;
}

.page-hero__subtitle {
  margin-top: 1.25rem;
  max-width: 36rem;
  font-size: 0.875rem;
  color: rgba(245, 244, 242, 0.75);
  line-height: 1.7;
}

@media (min-width: 640px) { .page-hero__subtitle { margin-top: 1.5rem; font-size: 1rem; } }

.page-hero__ctas {
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

@media (min-width: 640px) { .page-hero__ctas { gap: 1rem; } }

/* --------------------------------------------------------------------------
   2. ABOUT PAGE STYLES
   -------------------------------------------------------------------------- */

/* Story section */
.about-story {
  position: relative;
  padding: 5rem 0;
  background: var(--background);
  overflow: hidden;
}

.about-story__grid-overlay { position: absolute; inset: 0; opacity: 0.6; }

.about-story__inner {
  position: relative;
  max-width: var(--max-w-7xl);
  margin: 0 auto;
  padding: 0 1.25rem;
  display: grid;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 640px) { .about-story__inner { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .about-story__inner { grid-template-columns: 1fr 1fr; gap: 4rem; } }

.about-story__eyebrow {
  font-size: 0.625rem;
  letter-spacing: 0.4em;
  color: var(--primary);
  font-weight: 600;
  margin-bottom: 1rem;
}

@media (min-width: 640px) { .about-story__eyebrow { font-size: 0.75rem; } }

.about-story__heading {
  font-size: 2.5rem;
  line-height: 0.92;
  text-wrap: balance;
}

@media (min-width: 640px) { .about-story__heading { font-size: 3rem; } }
@media (min-width: 768px) { .about-story__heading { font-size: 3.75rem; } }

.about-story__body { margin-top: 1.5rem; color: var(--muted-foreground); line-height: 1.7; font-size: 1rem; }
@media (min-width: 640px) { .about-story__body { font-size: 1.125rem; } }
.about-story__body p + p { margin-top: 1rem; }

/* Story stat pills */
.about-stat-pills {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

@media (min-width: 640px) { .about-stat-pills { margin-top: 2.5rem; gap: 1rem; } }

.about-stat-pill {
  border: 1px solid var(--border);
  background: var(--card);
  padding: 1rem;
  text-align: center;
}

.about-stat-pill__value {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--primary);
}

@media (min-width: 640px) { .about-stat-pill__value { font-size: 1.875rem; } }

.about-stat-pill__label {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--muted-foreground);
  margin-top: 0.25rem;
}

/* Story image */
.about-story__image-wrap {
  position: relative;
  margin-top: 1rem;
}

@media (min-width: 1024px) { .about-story__image-wrap { margin-top: 0; } }

.about-story__image-border {
  position: absolute;
  inset: -0.75rem;
  border: 1px solid rgba(224, 120, 32, 0.3);
  pointer-events: none;
}

@media (min-width: 640px) { .about-story__image-border { inset: -1rem; } }

.about-story__image-container { position: relative; overflow: hidden; box-shadow: var(--shadow-hard); }

.about-story__img {
  width: 100%;
  height: 26.25rem;
  object-fit: cover;
  transition: transform 0.7s ease;
  display: block;
}

@media (min-width: 640px) { .about-story__img { height: 32.5rem; } }
@media (min-width: 1024px) { .about-story__img { height: 38.75rem; } }

.about-story__image-container:hover .about-story__img { transform: scale(1.05); }

/* Values section */
.about-values {
  position: relative;
  padding: 5rem 0;
  background: var(--charcoal);
  color: var(--text-on-dark);
  overflow: hidden;
}

.about-values__noise { position: absolute; inset: 0; opacity: 0.2; }
.about-values__gridlines { position: absolute; inset: 0; opacity: 0.4; }

.about-values__inner { position: relative; max-width: var(--max-w-7xl); margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 640px) { .about-values__inner { padding: 0 1.5rem; } }

.about-values__header { max-width: 48rem; margin-bottom: 3rem; }
@media (min-width: 640px) { .about-values__header { margin-bottom: 3.5rem; } }

.about-values__eyebrow {
  font-size: 0.625rem;
  letter-spacing: 0.4em;
  color: var(--primary);
  font-weight: 600;
  margin-bottom: 1rem;
}

@media (min-width: 640px) { .about-values__eyebrow { font-size: 0.75rem; } }

.about-values__heading {
  font-size: 2.5rem;
  line-height: 0.92;
  text-wrap: balance;
}

@media (min-width: 640px) { .about-values__heading { font-size: 3rem; } }
@media (min-width: 768px) { .about-values__heading { font-size: 3.75rem; } }

/* Values grid */
.about-values__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.1);
}

@media (min-width: 640px) { .about-values__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .about-values__grid { grid-template-columns: repeat(4, 1fr); } }

.about-value-card {
  background: #1e2229;
  padding: 2rem;
  transition: background 0.3s;
}

.about-value-card:hover { background: #262b34; }

.about-value-card__number {
  font-size: 0.625rem;
  letter-spacing: 0.3em;
  color: var(--primary);
  margin-bottom: 1rem;
}

.about-value-card__icon {
  width: 2.25rem;
  height: 2.25rem;
  color: var(--primary);
  margin-bottom: 1.25rem;
  transition: transform 0.3s;
}

.about-value-card:hover .about-value-card__icon { transform: scale(1.1); }

.about-value-card__title {
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
}

@media (min-width: 640px) { .about-value-card__title { font-size: 1.5rem; } }

.about-value-card__desc {
  font-size: 0.875rem;
  color: rgba(245, 244, 242, 0.7);
  line-height: 1.6;
}

/* Trust section */
.about-trust {
  position: relative;
  padding: 5rem 0;
  background: var(--muted);
  overflow: hidden;
}

.about-trust__grid-overlay { position: absolute; inset: 0; opacity: 0.6; }

.about-trust__inner {
  position: relative;
  max-width: var(--max-w-7xl);
  margin: 0 auto;
  padding: 0 1.25rem;
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 640px) { .about-trust__inner { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .about-trust__inner { grid-template-columns: 5fr 7fr; gap: 3rem; } }

.about-trust__eyebrow { font-size: 0.625rem; letter-spacing: 0.4em; color: var(--primary); font-weight: 600; margin-bottom: 1rem; }
@media (min-width: 640px) { .about-trust__eyebrow { font-size: 0.75rem; } }

.about-trust__heading { font-size: 2.5rem; line-height: 0.9; text-wrap: balance; }
@media (min-width: 640px) { .about-trust__heading { font-size: 3rem; } }
@media (min-width: 768px) { .about-trust__heading { font-size: 3.75rem; } }

.about-trust__intro { margin-top: 1.5rem; color: var(--muted-foreground); line-height: 1.7; font-size: 0.875rem; }
@media (min-width: 640px) { .about-trust__intro { font-size: 1rem; } }

.about-trust__cta { margin-top: 2rem; display: inline-flex; }

/* Timeline section */
.about-timeline {
  position: relative;
  padding: 5rem 0;
  background: var(--background);
  overflow: hidden;
}

.about-timeline__grid-overlay { position: absolute; inset: 0; opacity: 0.6; }

.about-timeline__inner {
  position: relative;
  max-width: var(--max-w-6xl);
  margin: 0 auto;
  padding: 0 1.25rem;
}

@media (min-width: 640px) { .about-timeline__inner { padding: 0 1.5rem; } }

.about-timeline__header {
  text-align: center;
  margin-bottom: 3.5rem;
}

.about-timeline__eyebrow { font-size: 0.625rem; letter-spacing: 0.4em; color: var(--primary); font-weight: 600; margin-bottom: 1rem; }
@media (min-width: 640px) { .about-timeline__eyebrow { font-size: 0.75rem; } }

.about-timeline__heading { font-size: 2.5rem; line-height: 0.92; text-wrap: balance; }
@media (min-width: 640px) { .about-timeline__heading { font-size: 3rem; } }
@media (min-width: 768px) { .about-timeline__heading { font-size: 3.75rem; } }

.about-timeline__track {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.about-timeline__line {
  position: absolute;
  left: 1rem;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border);
}

@media (min-width: 640px) {
  .about-timeline__line { left: 50%; }
}

.about-timeline__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-left: 3rem;
}

@media (min-width: 640px) {
  .about-timeline__item { flex-direction: row; padding-left: 0; gap: 3rem; }
  .about-timeline__item:nth-child(even) { flex-direction: row-reverse; }
}

.about-timeline__card-wrap {
  flex: 1;
}

@media (min-width: 640px) { .about-timeline__card-wrap { padding: 0 2rem; } }

.about-timeline__card {
  background: var(--card);
  border: 1px solid var(--border);
  padding: 1.5rem;
  box-shadow: var(--shadow-soft);
}

@media (min-width: 640px) { .about-timeline__card { padding: 2rem; } }

.about-timeline__item:nth-child(even) .about-timeline__card {
  text-align: left;
}

@media (min-width: 640px) {
  .about-timeline__item:nth-child(even) .about-timeline__card { text-align: right; }
}

.about-timeline__year {
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  color: var(--primary);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.about-timeline__card-title { font-size: 1.25rem; margin-bottom: 0.5rem; }
@media (min-width: 640px) { .about-timeline__card-title { font-size: 1.5rem; } }

.about-timeline__card-desc { font-size: 0.875rem; color: var(--muted-foreground); line-height: 1.6; }

.about-timeline__dot {
  position: absolute;
  left: 1rem;
  top: 1.5rem;
  transform: translateX(-50%);
  width: 1rem;
  height: 1rem;
  background: var(--primary);
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--background);
  z-index: 10;
}

@media (min-width: 640px) {
  .about-timeline__dot {
    left: 50%;
    top: 1.5rem;
  }
  .about-timeline__spacer { flex: 1; }
}

/* About CTA section */
.about-cta {
  position: relative;
  padding: 5rem 0;
  overflow: hidden;
  color: var(--text-on-dark);
}

.about-cta__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.about-cta__overlay { position: absolute; inset: 0; background: rgba(25, 28, 35, 0.85); }
.about-cta__noise { position: absolute; inset: 0; opacity: 0.3; }

.about-cta__inner {
  position: relative;
  max-width: var(--max-w-5xl);
  margin: 0 auto;
  padding: 0 1.25rem;
  text-align: center;
}

@media (min-width: 640px) { .about-cta__inner { padding: 0 1.5rem; } }

.about-cta__eyebrow { font-size: 0.625rem; letter-spacing: 0.4em; color: var(--primary); font-weight: 600; margin-bottom: 1.25rem; }
@media (min-width: 640px) { .about-cta__eyebrow { font-size: 0.75rem; margin-bottom: 1.5rem; } }

.about-cta__heading { font-size: 2.5rem; line-height: 0.92; text-wrap: balance; }
@media (min-width: 640px) { .about-cta__heading { font-size: 3rem; } }
@media (min-width: 768px) { .about-cta__heading { font-size: 4.5rem; } }

.about-cta__body { margin-top: 1.5rem; max-width: 42rem; margin-left: auto; margin-right: auto; font-size: 1rem; color: rgba(245,244,242,.75); line-height: 1.7; }
@media (min-width: 640px) { .about-cta__body { margin-top: 2rem; font-size: 1.125rem; } }

.about-cta__ctas { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem; }
@media (min-width: 640px) { .about-cta__ctas { margin-top: 2.5rem; gap: 1rem; } }

/* --------------------------------------------------------------------------
   3. SERVICES PAGE STYLES
   -------------------------------------------------------------------------- */

/* Overview section */
.services-overview {
  position: relative;
  padding: 5rem 0;
  background: var(--background);
  overflow: hidden;
}

.services-overview__grid-overlay { position: absolute; inset: 0; opacity: 0.6; }

.services-overview__inner {
  position: relative;
  max-width: var(--max-w-7xl);
  margin: 0 auto;
  padding: 0 1.25rem;
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 640px) { .services-overview__inner { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .services-overview__inner { grid-template-columns: 5fr 7fr; gap: 2.5rem; align-items: start; } }

.services-overview__eyebrow { font-size: 0.625rem; letter-spacing: 0.4em; color: var(--primary); font-weight: 600; margin-bottom: 1rem; }
@media (min-width: 640px) { .services-overview__eyebrow { font-size: 0.75rem; } }

.services-overview__heading { font-size: 2.5rem; line-height: 0.92; text-wrap: balance; }
@media (min-width: 640px) { .services-overview__heading { font-size: 3rem; } }
@media (min-width: 768px) { .services-overview__heading { font-size: 3.75rem; } }

.services-overview__body p { font-size: 1rem; color: var(--muted-foreground); line-height: 1.7; }
@media (min-width: 640px) { .services-overview__body p { font-size: 1.125rem; } }
.services-overview__body p + p { margin-top: 1rem; }

/* Core services list */
.services-core {
  position: relative;
  padding: 5rem 0;
  background: var(--charcoal);
  color: var(--text-on-dark);
  overflow: hidden;
}

.services-core__noise { position: absolute; inset: 0; opacity: 0.2; }
.services-core__gridlines { position: absolute; inset: 0; opacity: 0.4; }

.services-core__inner { position: relative; max-width: var(--max-w-7xl); margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 640px) { .services-core__inner { padding: 0 1.5rem; } }

.services-core__header { margin-bottom: 3rem; }
.services-core__eyebrow { font-size: 0.625rem; letter-spacing: 0.4em; color: var(--primary); font-weight: 600; margin-bottom: 1rem; }
@media (min-width: 640px) { .services-core__eyebrow { font-size: 0.75rem; } }

.services-core__heading { font-size: 2.5rem; line-height: 0.92; text-wrap: balance; }
@media (min-width: 640px) { .services-core__heading { font-size: 3rem; } }
@media (min-width: 768px) { .services-core__heading { font-size: 3.75rem; } }

.services-core__list { display: flex; flex-direction: column; gap: 1px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.1); }

.service-row {
  display: grid;
  grid-template-columns: 1fr;
  background: #1a1e26;
  transition: background 0.3s;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

@media (min-width: 640px) { .service-row { grid-template-columns: 4fr 9fr; } }
@media (min-width: 1024px) { .service-row { grid-template-columns: 3fr 9fr; } }

.service-row:hover { background: #20252f; }

.service-row__image-wrap {
  position: relative;
  height: 14rem;
  overflow: hidden;
}

@media (min-width: 640px) { .service-row__image-wrap { height: auto; } }

.service-row__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
  transition: opacity 0.7s, transform 0.7s;
}

.service-row:hover .service-row__img { opacity: 1; transform: scale(1.1); }

.service-row__image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(25,28,35,0.4), transparent);
}

.service-row__body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (min-width: 640px) { .service-row__body { flex-direction: row; align-items: center; padding: 2rem; } }
@media (min-width: 1024px) { .service-row__body { padding: 2.5rem; } }

.service-row__number {
  font-size: 0.625rem;
  letter-spacing: 0.3em;
  color: var(--primary);
  font-weight: 600;
  flex-shrink: 0;
  width: 3rem;
}

.service-row__content { flex: 1; }

.service-row__title {
  font-size: 1.5rem;
  transition: color 0.3s;
}

@media (min-width: 640px) { .service-row__title { font-size: 1.875rem; } }

.service-row:hover .service-row__title { color: var(--primary); }

.service-row__desc {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: rgba(245, 244, 242, 0.7);
  line-height: 1.7;
}

@media (min-width: 640px) { .service-row__desc { font-size: 1rem; } }

.service-row__icon {
  display: none;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--primary);
  opacity: 0.6;
  transition: opacity 0.3s;
  flex-shrink: 0;
}

@media (min-width: 1024px) { .service-row__icon { display: block; } }
.service-row:hover .service-row__icon { opacity: 1; }

.service-row__arrow {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--primary);
  flex-shrink: 0;
  transition: transform 0.3s;
}

.service-row:hover .service-row__arrow { transform: translate(2px, -2px); }

/* Value stack */
.services-value-stack {
  position: relative;
  padding: 5rem 0;
  background: var(--background);
  overflow: hidden;
}

.services-value-stack__grid-overlay { position: absolute; inset: 0; opacity: 0.6; }

.services-value-stack__inner {
  position: relative;
  max-width: var(--max-w-6xl);
  margin: 0 auto;
  padding: 0 1.25rem;
  display: grid;
  gap: 3rem;
}

@media (min-width: 640px) { .services-value-stack__inner { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .services-value-stack__inner { grid-template-columns: 1fr 1fr; gap: 3rem; } }

.services-value-stack__eyebrow { font-size: 0.625rem; letter-spacing: 0.4em; color: var(--primary); font-weight: 600; margin-bottom: 1rem; }
@media (min-width: 640px) { .services-value-stack__eyebrow { font-size: 0.75rem; } }

.services-value-stack__heading { font-size: 2.5rem; line-height: 0.92; text-wrap: balance; }
@media (min-width: 640px) { .services-value-stack__heading { font-size: 3rem; } }
@media (min-width: 768px) { .services-value-stack__heading { font-size: 3.75rem; } }

.services-value-stack__intro { margin-top: 1.5rem; color: var(--muted-foreground); line-height: 1.7; font-size: 0.875rem; }
@media (min-width: 640px) { .services-value-stack__intro { font-size: 1rem; } }

.services-value-stack__cta { margin-top: 2rem; display: inline-flex; }

.stack-list { border: 1px solid var(--border); background: var(--card); box-shadow: var(--shadow-soft); }

.stack-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
  transition: background 0.2s;
}

.stack-item:last-child { border-bottom: none; }
.stack-item:hover { background: var(--muted); }

.stack-item__check {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--primary);
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.stack-item__number { font-size: 0.625rem; letter-spacing: 0.3em; color: var(--primary); font-weight: 600; margin-bottom: 0.25rem; }
.stack-item__text { font-size: 0.875rem; color: var(--foreground); line-height: 1.6; }
@media (min-width: 640px) { .stack-item__text { font-size: 1rem; } }

/* Services process section */
.services-process {
  position: relative;
  padding: 5rem 0;
  background: var(--muted);
  overflow: hidden;
}

.services-process__inner { position: relative; max-width: var(--max-w-7xl); margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 640px) { .services-process__inner { padding: 0 1.5rem; } }

.services-process__header { text-align: center; margin-bottom: 3.5rem; }
.services-process__eyebrow { font-size: 0.625rem; letter-spacing: 0.4em; color: var(--primary); font-weight: 600; margin-bottom: 1rem; }
@media (min-width: 640px) { .services-process__eyebrow { font-size: 0.75rem; } }

.services-process__heading { font-size: 2.5rem; line-height: 0.92; text-wrap: balance; }
@media (min-width: 640px) { .services-process__heading { font-size: 3rem; } }
@media (min-width: 768px) { .services-process__heading { font-size: 3.75rem; } }

.services-process__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 640px) { .services-process__grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; } }
@media (min-width: 1024px) { .services-process__grid { grid-template-columns: repeat(5, 1fr); gap: 1rem; } }

.services-process__connector {
  display: none;
}

@media (min-width: 1024px) {
  .services-process__connector {
    display: block;
    position: absolute;
    top: 1.5rem;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--border);
  }
}

.services-process-step { position: relative; }

.services-process-step__number {
  position: relative;
  z-index: 10;
  width: 3rem;
  height: 3rem;
  background: var(--primary);
  color: var(--primary-foreground);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.125rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-soft);
}

.services-process-step__title { font-size: 1.25rem; margin-bottom: 0.75rem; }

.services-process-step__desc { font-size: 0.875rem; color: var(--muted-foreground); line-height: 1.6; }

.services-process-step__arrow {
  display: none;
  position: absolute;
  top: 1rem;
  right: -0.5rem;
  width: 1rem;
  height: 1rem;
  color: var(--primary);
}

@media (min-width: 1024px) { .services-process-step__arrow { display: block; } }

/* Services CTA */
.services-cta {
  position: relative;
  padding: 5rem 0;
  overflow: hidden;
  color: var(--text-on-dark);
}

.services-cta__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.services-cta__overlay { position: absolute; inset: 0; background: rgba(25,28,35,.85); }
.services-cta__noise { position: absolute; inset: 0; opacity: .3; }

.services-cta__inner { position: relative; max-width: var(--max-w-5xl); margin: 0 auto; padding: 0 1.25rem; text-align: center; }
@media (min-width: 640px) { .services-cta__inner { padding: 0 1.5rem; } }

.services-cta__eyebrow { font-size: .625rem; letter-spacing: .4em; color: var(--primary); font-weight: 600; margin-bottom: 1.25rem; }
@media (min-width: 640px) { .services-cta__eyebrow { font-size: .75rem; margin-bottom: 1.5rem; } }

.services-cta__heading { font-size: 2.5rem; line-height: .92; text-wrap: balance; }
@media (min-width: 640px) { .services-cta__heading { font-size: 3rem; } }
@media (min-width: 768px) { .services-cta__heading { font-size: 4.5rem; } }

.services-cta__body { margin-top: 1.5rem; max-width: 42rem; margin-left: auto; margin-right: auto; font-size: 1rem; color: rgba(245,244,242,.75); line-height: 1.7; }
@media (min-width: 640px) { .services-cta__body { margin-top: 2rem; font-size: 1.125rem; } }

.services-cta__ctas { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem; }
@media (min-width: 640px) { .services-cta__ctas { margin-top: 2.5rem; gap: 1rem; } }

/* --------------------------------------------------------------------------
   4. PORTFOLIO PAGE STYLES
   -------------------------------------------------------------------------- */

/* Stats bar */
.portfolio-stats-bar {
  background: var(--charcoal);
  color: var(--text-on-dark);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.portfolio-stats-bar__inner {
  max-width: var(--max-w-7xl);
  margin: 0 auto;
  padding: 0 1.25rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-left: 1px solid rgba(255,255,255,0.1);
}

@media (min-width: 640px) {
  .portfolio-stats-bar__inner { grid-template-columns: repeat(4, 1fr); padding: 0 1.5rem; }
}

.portfolio-stat {
  padding: 1.5rem 1rem;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,0.1);
}

@media (min-width: 640px) { .portfolio-stat { padding: 2rem 2rem; } }

.portfolio-stat__value {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--primary);
  line-height: 1;
}

@media (min-width: 640px) { .portfolio-stat__value { font-size: 1.875rem; } }
@media (min-width: 768px) { .portfolio-stat__value { font-size: 2.25rem; } }

.portfolio-stat__label {
  margin-top: 0.375rem;
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245, 244, 242, 0.55);
}

@media (min-width: 640px) { .portfolio-stat__label { font-size: 0.75rem; } }

/* Gallery section */
.portfolio-gallery {
  position: relative;
  padding: 5rem 0 6rem;
  background: var(--background);
  overflow: hidden;
}

.portfolio-gallery__grid-overlay { position: absolute; inset: 0; opacity: 0.6; }

.portfolio-gallery__inner { position: relative; max-width: var(--max-w-7xl); margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 640px) { .portfolio-gallery__inner { padding: 0 1.5rem; } }

.portfolio-gallery__header {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-bottom: 3rem;
}

@media (min-width: 768px) { .portfolio-gallery__header { flex-direction: row; align-items: flex-end; justify-content: space-between; margin-bottom: 3.5rem; } }

.portfolio-gallery__eyebrow { font-size: .625rem; letter-spacing: .4em; color: var(--primary); font-weight: 600; margin-bottom: 1rem; display: flex; align-items: center; gap: .75rem; }
@media (min-width: 640px) { .portfolio-gallery__eyebrow { font-size: .75rem; } }

.portfolio-gallery__heading { font-size: 2.5rem; line-height: .9; text-wrap: balance; }
@media (min-width: 640px) { .portfolio-gallery__heading { font-size: 3rem; } }
@media (min-width: 768px) { .portfolio-gallery__heading { font-size: 3.75rem; } }
@media (min-width: 1024px) { .portfolio-gallery__heading { font-size: 4.5rem; } }

.portfolio-gallery__intro { max-width: 24rem; color: var(--muted-foreground); font-size: .875rem; line-height: 1.7; }
@media (min-width: 640px) { .portfolio-gallery__intro { font-size: 1rem; } }

/* Filter bar */
.portfolio-filter {
  margin-bottom: 2.5rem;
  margin-left: -1.25rem;
  margin-right: -1.25rem;
}

@media (min-width: 640px) { .portfolio-filter { margin-left: 0; margin-right: 0; margin-bottom: 3rem; } }

.portfolio-filter__scroll {
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 1.25rem;
}

.portfolio-filter__scroll::-webkit-scrollbar { display: none; }
@media (min-width: 640px) { .portfolio-filter__scroll { padding: 0; } }

.portfolio-filter__inner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: max-content;
  padding-bottom: 0.25rem;
}

@media (min-width: 640px) { .portfolio-filter__inner { gap: 0.75rem; } }

.portfolio-filter__label {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding-right: 0.5rem;
  font-size: 0.625rem;
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  border-right: 1px solid var(--border);
  margin-right: 0.25rem;
  flex-shrink: 0;
}

.portfolio-filter__btn {
  position: relative;
  flex-shrink: 0;
  padding: 0.5rem 1rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  color: var(--muted-foreground);
  background: transparent;
  cursor: pointer;
  transition: all 0.3s;
}

@media (min-width: 640px) { .portfolio-filter__btn { font-size: 0.75rem; } }

.portfolio-filter__btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.portfolio-filter__btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
  box-shadow: var(--shadow-glow);
}

.portfolio-filter__count {
  font-size: 0.5rem;
  margin-left: 0.375rem;
  opacity: 0.7;
  tabular-nums: 1;
}

.portfolio-filter__btn.active .portfolio-filter__count { opacity: 0.7; }

/* Gallery grid */
.portfolio-grid-wrap {
  transition: opacity 0.2s ease;
}

.portfolio-grid-wrap.fading { opacity: 0; }

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

@media (min-width: 640px) { .portfolio-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
@media (min-width: 1024px) { .portfolio-grid { grid-template-columns: repeat(4, 1fr); } }

/* Portfolio card - mobile has below-image info panel */
.portfolio-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  box-shadow: var(--shadow-soft);
  background: var(--card);
  border: 1px solid rgba(var(--border), 0.4);
  display: flex;
  flex-direction: column;
  animation: card-pop 0.45s cubic-bezier(.2,.8,.2,1) both;
}

@media (min-width: 640px) {
  .portfolio-card {
    background: transparent;
    border: none;
    display: block;
    aspect-ratio: 4/3;
  }
}

@keyframes card-pop {
  from { opacity: 0; transform: scale(0.93) translateY(12px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.portfolio-card__img-wrap {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  flex-shrink: 0;
}

@media (min-width: 640px) {
  .portfolio-card__img-wrap {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
  }
}

.portfolio-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.portfolio-card:hover .portfolio-card__img { transform: scale(1.1); }

.portfolio-card__tag {
  position: absolute;
  top: 0.625rem;
  left: 0.625rem;
  padding: 0.125rem 0.625rem;
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: 0.4375rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1.4;
}

@media (min-width: 640px) {
  .portfolio-card__tag { top: 0.75rem; left: 0.75rem; font-size: 0.5625rem; }
}

/* Desktop overlays */
.portfolio-card__gradient {
  display: none;
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(25,28,35,.9) 0%, rgba(25,28,35,.2) 50%, transparent 100%);
}

.portfolio-card__hover-tint {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(224,120,32,0);
  transition: background 0.3s;
}

@media (min-width: 640px) {
  .portfolio-card__gradient { display: block; }
  .portfolio-card__hover-tint { display: block; }
  .portfolio-card:hover .portfolio-card__hover-tint { background: rgba(224,120,32,.1); }
}

/* Desktop overlay text */
.portfolio-card__desktop-info {
  display: none;
}

@media (min-width: 640px) {
  .portfolio-card__desktop-info {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.75rem 1rem;
    color: var(--text-on-dark);
    transform: translateY(2px);
    transition: transform 0.3s;
  }
  .portfolio-card:hover .portfolio-card__desktop-info { transform: translateY(0); }
}

.portfolio-card__desktop-location {
  font-size: 0.5rem;
  color: var(--primary);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 0.125rem;
}

@media (min-width: 640px) { .portfolio-card__desktop-location { font-size: 0.5625rem; } }

.portfolio-card__desktop-title {
  font-size: 0.75rem;
  line-height: 1.3;
}

@media (min-width: 640px) { .portfolio-card__desktop-title { font-size: 0.875rem; } }

.portfolio-card__desktop-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.375rem;
  font-size: 0.5625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary);
  opacity: 0;
  transition: opacity 0.3s;
}

.portfolio-card:hover .portfolio-card__desktop-link { opacity: 1; }

/* Mobile info panel */
.portfolio-card__mobile-info {
  padding: 0.625rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

@media (min-width: 640px) { .portfolio-card__mobile-info { display: none; } }

.portfolio-card__mobile-title {
  font-size: 0.6875rem;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--foreground);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.portfolio-card__mobile-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 0.25rem;
  border-top: 1px solid rgba(var(--border), 0.5);
}

.portfolio-card__mobile-location {
  font-size: 0.5rem;
  color: var(--muted-foreground);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Portfolio lightbox */
.portfolio-lightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(25, 28, 35, 0.97);
  backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

@media (min-width: 640px) { .portfolio-lightbox { padding: 1.5rem; } }

.portfolio-lightbox.active { opacity: 1; pointer-events: all; }

.portfolio-lightbox__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  color: rgba(245,244,242,.7);
  transition: color 0.2s;
  z-index: 10;
  background: none;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
}

@media (min-width: 640px) { .portfolio-lightbox__close { top: 1.5rem; right: 1.5rem; } }
.portfolio-lightbox__close:hover { color: var(--primary); }

.portfolio-lightbox__prev,
.portfolio-lightbox__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(255,255,255,.2);
  color: rgba(245,244,242,.7);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  z-index: 10;
  cursor: pointer;
  background: none;
}

@media (min-width: 640px) { .portfolio-lightbox__prev, .portfolio-lightbox__next { width: 3rem; height: 3rem; } }

.portfolio-lightbox__prev { left: 0.75rem; }
.portfolio-lightbox__next { right: 0.75rem; }

@media (min-width: 640px) { .portfolio-lightbox__prev { left: 1.5rem; } .portfolio-lightbox__next { right: 1.5rem; } }

.portfolio-lightbox__prev:hover,
.portfolio-lightbox__next:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.portfolio-lightbox__inner { max-width: 64rem; width: 100%; }

.portfolio-lightbox__img {
  width: 100%;
  max-height: 62vh;
  object-fit: contain;
  box-shadow: var(--shadow-hard);
}

@media (min-width: 640px) { .portfolio-lightbox__img { max-height: 70vh; } }

.portfolio-lightbox__caption { margin-top: 1.25rem; color: var(--text-on-dark); }
@media (min-width: 640px) { .portfolio-lightbox__caption { margin-top: 1.5rem; } }

.portfolio-lightbox__caption-inner {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

@media (min-width: 640px) { .portfolio-lightbox__caption-inner { flex-direction: row; align-items: flex-start; justify-content: space-between; } }

.portfolio-lightbox__meta { font-size: 0.625rem; color: var(--primary); letter-spacing: 0.3em; text-transform: uppercase; margin-bottom: 0.5rem; }
@media (min-width: 640px) { .portfolio-lightbox__meta { font-size: 0.75rem; } }

.portfolio-lightbox__title { font-size: 1.25rem; }
@media (min-width: 640px) { .portfolio-lightbox__title { font-size: 1.5rem; } }
@media (min-width: 768px) { .portfolio-lightbox__title { font-size: 1.875rem; } }

.portfolio-lightbox__desc {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: rgba(245,244,242,.65);
  line-height: 1.6;
  max-width: 32rem;
}

.portfolio-lightbox__counter {
  margin-top: 1rem;
  font-size: 0.625rem;
  color: rgba(245,244,242,.35);
  letter-spacing: 0.2em;
}

/* Portfolio empty state */
.portfolio-empty {
  padding: 5rem 0;
  text-align: center;
  color: var(--muted-foreground);
  animation: fadein 0.4s ease;
}

/* Portfolio ready section */
.portfolio-ready {
  position: relative;
  padding: 5rem 0 6rem;
  background: var(--muted);
  overflow: hidden;
}

.portfolio-ready__grid-overlay { position: absolute; inset: 0; opacity: 0.6; }

.portfolio-ready__inner {
  position: relative;
  max-width: var(--max-w-7xl);
  margin: 0 auto;
  padding: 0 1.25rem;
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 640px) { .portfolio-ready__inner { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .portfolio-ready__inner { grid-template-columns: 5fr 7fr; gap: 4rem; align-items: start; } }

.portfolio-ready__eyebrow { font-size: .625rem; letter-spacing: .4em; color: var(--primary); font-weight: 600; margin-bottom: 1rem; }
@media (min-width: 640px) { .portfolio-ready__eyebrow { font-size: .75rem; } }

.portfolio-ready__heading { font-size: 2.5rem; line-height: .9; text-wrap: balance; }
@media (min-width: 640px) { .portfolio-ready__heading { font-size: 3rem; } }
@media (min-width: 768px) { .portfolio-ready__heading { font-size: 3.75rem; } }

.portfolio-ready__intro { margin-top: 1.5rem; color: var(--muted-foreground); line-height: 1.7; font-size: .875rem; max-width: 28rem; }
@media (min-width: 640px) { .portfolio-ready__intro { font-size: 1rem; } }

.portfolio-ready__ctas { margin-top: 2rem; display: flex; flex-direction: column; gap: .75rem; }
@media (min-width: 640px) { .portfolio-ready__ctas { flex-direction: row; } }

.portfolio-category-list { border-top: 1px solid var(--border); }

.portfolio-category-row {
  border-bottom: 1px solid var(--border);
  padding: 1.75rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: background 0.3s;
}

@media (min-width: 640px) { .portfolio-category-row { flex-direction: row; align-items: center; justify-content: space-between; padding: 2rem 0; } }

.portfolio-category-row:hover { background: var(--background); }

.portfolio-category-row__inner { display: flex; align-items: flex-start; gap: 1rem; }

.portfolio-category-row__number { font-size: .875rem; color: var(--primary); font-family: var(--font-display); letter-spacing: .2em; padding-top: 0.125rem; flex-shrink: 0; }
@media (min-width: 640px) { .portfolio-category-row__number { font-size: 1rem; } }

.portfolio-category-row__title { font-size: 1.125rem; transition: color .3s; }
@media (min-width: 640px) { .portfolio-category-row__title { font-size: 1.25rem; } }

.portfolio-category-row:hover .portfolio-category-row__title { color: var(--primary); }

.portfolio-category-row__desc { margin-top: .25rem; font-size: .75rem; color: var(--muted-foreground); line-height: 1.6; max-width: 28rem; }
@media (min-width: 640px) { .portfolio-category-row__desc { font-size: .875rem; } }

.portfolio-category-row__link {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: .625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--primary);
  flex-shrink: 0;
  align-self: flex-start;
  transition: gap .3s;
}

.portfolio-category-row__link:hover { gap: .75rem; }

/* --------------------------------------------------------------------------
   5. CONTACT PAGE STYLES
   -------------------------------------------------------------------------- */

.contact-page-grid {
  position: relative;
  padding: 5rem 0;
  background: var(--background);
  overflow: hidden;
}

.contact-page-grid__grid-overlay { position: absolute; inset: 0; opacity: 0.6; }

.contact-page-grid__inner {
  position: relative;
  max-width: var(--max-w-7xl);
  margin: 0 auto;
  padding: 0 1.25rem;
  display: grid;
  gap: 3rem;
}

@media (min-width: 640px) { .contact-page-grid__inner { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .contact-page-grid__inner { grid-template-columns: 1fr 1fr; gap: 4rem; } }

.contact-page-grid__eyebrow { font-size: .625rem; letter-spacing: .4em; color: var(--primary); font-weight: 600; margin-bottom: 1rem; }
@media (min-width: 640px) { .contact-page-grid__eyebrow { font-size: .75rem; } }

.contact-page-grid__heading { font-size: 2.5rem; line-height: .92; text-wrap: balance; }
@media (min-width: 640px) { .contact-page-grid__heading { font-size: 3rem; } }
@media (min-width: 768px) { .contact-page-grid__heading { font-size: 3.125rem; } }

.contact-page-grid__intro { margin-top: 1.25rem; color: var(--muted-foreground); font-size: .875rem; line-height: 1.7; }
@media (min-width: 640px) { .contact-page-grid__intro { font-size: 1rem; } }

/* Map section */
.contact-map-section {
  position: relative;
  padding: 5rem 0;
  background: var(--muted);
  overflow: hidden;
}

.contact-map-section__inner { position: relative; max-width: var(--max-w-7xl); margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 640px) { .contact-map-section__inner { padding: 0 1.5rem; } }

.contact-map-section__header { text-align: center; margin-bottom: 2.5rem; }
.contact-map-section__eyebrow { font-size: .625rem; letter-spacing: .4em; color: var(--primary); font-weight: 600; margin-bottom: 1rem; }
@media (min-width: 640px) { .contact-map-section__eyebrow { font-size: .75rem; } }

.contact-map-section__heading { font-size: 1.875rem; line-height: .92; text-wrap: balance; }
@media (min-width: 640px) { .contact-map-section__heading { font-size: 2.5rem; } }
@media (min-width: 768px) { .contact-map-section__heading { font-size: 3.125rem; } }

.contact-page-map { aspect-ratio: 16/9; border: 1px solid var(--border); overflow: hidden; box-shadow: var(--shadow-hard); }
.contact-page-map iframe { width: 100%; height: 100%; display: block; }

/* Contact FAQ section */
.contact-faq-section {
  position: relative;
  padding: 5rem 0;
  background: var(--background);
  overflow: hidden;
}

.contact-faq-section__inner { position: relative; max-width: 56rem; margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 640px) { .contact-faq-section__inner { padding: 0 1.5rem; } }

.contact-faq-section__header { text-align: center; margin-bottom: 3rem; }
.contact-faq-section__eyebrow { font-size: .625rem; letter-spacing: .4em; color: var(--primary); font-weight: 600; margin-bottom: 1rem; }
@media (min-width: 640px) { .contact-faq-section__eyebrow { font-size: .75rem; } }

.contact-faq-section__heading { font-size: 2.5rem; line-height: .92; text-wrap: balance; }
@media (min-width: 640px) { .contact-faq-section__heading { font-size: 3rem; } }
@media (min-width: 768px) { .contact-faq-section__heading { font-size: 3.125rem; } }

/* Contact bottom CTA */
.contact-bottom-cta {
  position: relative;
  padding: 5rem 0;
  background: var(--charcoal);
  color: var(--text-on-dark);
  overflow: hidden;
}

.contact-bottom-cta__noise { position: absolute; inset: 0; opacity: .2; }
.contact-bottom-cta__gridlines { position: absolute; inset: 0; opacity: .4; }

.contact-bottom-cta__inner { position: relative; max-width: var(--max-w-5xl); margin: 0 auto; padding: 0 1.25rem; text-align: center; }
@media (min-width: 640px) { .contact-bottom-cta__inner { padding: 0 1.5rem; } }

.contact-bottom-cta__eyebrow { font-size: .625rem; letter-spacing: .4em; color: var(--primary); font-weight: 600; margin-bottom: 1.25rem; }
@media (min-width: 640px) { .contact-bottom-cta__eyebrow { font-size: .75rem; margin-bottom: 1.5rem; } }

.contact-bottom-cta__heading { font-size: 2.5rem; line-height: .92; text-wrap: balance; }
@media (min-width: 640px) { .contact-bottom-cta__heading { font-size: 3rem; } }
@media (min-width: 768px) { .contact-bottom-cta__heading { font-size: 4.5rem; } }

.contact-bottom-cta__ctas { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem; }
@media (min-width: 640px) { .contact-bottom-cta__ctas { gap: 1rem; } }

/* Extended contact form (more fields than homepage) */
.contact-full-form { background: var(--card); border: 1px solid var(--border); padding: 1.5rem; box-shadow: var(--shadow-soft); }
@media (min-width: 640px) { .contact-full-form { padding: 2rem; } }
@media (min-width: 768px) { .contact-full-form { padding: 2.5rem; } }

.contact-full-form .form-consent {
  font-size: .75rem;
  color: var(--muted-foreground);
  text-align: center;
  margin-top: .5rem;
}

/* --------------------------------------------------------------------------
   6. HEADER FOOTER PAGE STYLES
   -------------------------------------------------------------------------- */

.hf-page {
  position: relative;
  padding: 6rem 0;
  background: var(--background);
  overflow: hidden;
  min-height: 100vh;
}

.hf-page__grid-overlay { position: absolute; inset: 0; opacity: 0.6; }

.hf-page__inner {
  position: relative;
  max-width: var(--max-w-7xl);
  margin: 0 auto;
  padding: 0 1.25rem;
}

@media (min-width: 640px) { .hf-page__inner { padding: 0 1.5rem; } }

.hf-page__header { margin-bottom: 3rem; }

.hf-page__eyebrow { font-size: .625rem; letter-spacing: .4em; color: var(--primary); font-weight: 600; margin-bottom: 1rem; }
@media (min-width: 640px) { .hf-page__eyebrow { font-size: .75rem; } }

.hf-page__heading { font-size: 2.5rem; line-height: .92; text-wrap: balance; }
@media (min-width: 640px) { .hf-page__heading { font-size: 3rem; } }

.hf-page__intro { margin-top: 1rem; color: var(--muted-foreground); font-size: .875rem; line-height: 1.7; max-width: 48rem; }
@media (min-width: 640px) { .hf-page__intro { font-size: 1rem; } }

.hf-sections { display: flex; flex-direction: column; gap: 3rem; }

.hf-section {
  border: 1px solid var(--border);
  background: var(--card);
  padding: 2rem;
}

@media (min-width: 640px) { .hf-section { padding: 2.5rem; } }

.hf-section__heading {
  font-size: 1.25rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.hf-section__heading::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 1.25rem;
  background: var(--primary);
  flex-shrink: 0;
}

.hf-preview-header {
  background: var(--background);
  border: 1px solid var(--border);
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.hf-preview-header__logo img { height: 3rem; width: auto; }

.hf-preview-header__info { font-size: .75rem; color: var(--muted-foreground); text-align: right; }
.hf-preview-header__info div { line-height: 1.6; }
.hf-preview-header__info a { color: var(--primary); transition: opacity .2s; }
.hf-preview-header__info a:hover { opacity: 0.8; }

.hf-preview-footer {
  background: var(--charcoal);
  color: var(--text-on-dark);
  padding: 1.5rem;
}

.hf-preview-footer__brand { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.hf-preview-footer__brand img { height: 2.5rem; width: auto; }
.hf-preview-footer__tagline { font-size: .75rem; color: rgba(245,244,242,.6); line-height: 1.5; }

.hf-preview-footer__bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: .75rem;
  display: flex;
  justify-content: space-between;
  font-size: .625rem;
  color: rgba(245,244,242,.4);
  letter-spacing: .1em;
}

.hf-info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 640px) { .hf-info-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .hf-info-grid { grid-template-columns: repeat(3, 1fr); } }

.hf-info-item { padding: 1rem; background: var(--muted); }
.hf-info-item__label { font-size: .625rem; text-transform: uppercase; letter-spacing: .2em; color: var(--primary); font-weight: 600; margin-bottom: .5rem; }
.hf-info-item__value { font-size: .875rem; color: var(--foreground); }