.subpage-header { position: relative; background: var(--ink); }

.hair-hero { display: grid; grid-template-columns: 1.1fr .9fr; min-height: 650px; background: var(--ink); color: #fff; }
.hair-hero-photo { min-height: 650px; background: #332d28; border-right: 1px solid rgba(177,139,82,.5); }
.hero-photo-image { display: block; width: 100%; height: 100%; min-height: 650px; object-fit: contain; object-position: center; }
.content-placeholder, .portrait-placeholder, .work-placeholder { display: grid; place-items: center; text-align: center; color: rgba(246,241,233,.72); font-size: 12px; letter-spacing: .04em; }
.content-placeholder { background: linear-gradient(135deg, rgba(177,139,82,.34), transparent 50%), #332d28; border-right: 1px solid rgba(177,139,82,.5); }
.hair-hero-copy { align-self: center; max-width: 490px; padding: 80px 12%; }
.hair-hero h1 { margin: 0; font: 500 clamp(52px,6vw,86px)/1.02 var(--serif); letter-spacing: -.04em; }
.hair-hero-copy > p:not(.eyebrow) { max-width: 370px; color: #d8cec2; margin: 26px 0 34px; }

.team-section { background: var(--cream); }
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px; max-width: 1260px; margin: auto; }
.stylist-card { background: #fff; border: 1px solid rgba(177,139,82,.25); }
.portrait-placeholder { min-height: 300px; background: linear-gradient(145deg, #d9ccbd, #aa906f); color: #fff; }
.stylist-photo { display: block; width: 100%; height: 300px; object-fit: cover; object-position: center 40%; }
.stylist-card > div:last-child { padding: 22px 20px 25px; }
.stylist-card h3 { margin: 0; font: 500 25px/1.15 var(--serif); }
.stylist-card p { margin: 9px 0 0; color: var(--muted); font-size: 14px; }

.hair-services-section { display: grid; grid-template-columns: 1fr .8fr; align-items: center; gap: 12%; background: var(--sand); }
.hair-services-section h2, .hair-booking h2 { margin: 0; font: 500 clamp(39px,4vw,62px)/1.05 var(--serif); letter-spacing: -.04em; }
.hair-services-copy { margin: 0; max-width: 410px; color: var(--muted); font-size: 17px; }

.hair-work-section { background: var(--cream); }
.hair-work-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; max-width: 1260px; margin: auto; }
.work-placeholder { min-height: 290px; border: 1px solid rgba(177,139,82,.45); background: linear-gradient(135deg, rgba(177,139,82,.12), transparent), #e8ddd0; color: var(--muted); }
.work-photo { display: block; width: 100%; height: 288px; object-fit: contain; object-position: center; }

.hair-booking { padding: 105px 7%; text-align: center; color: #fff; background: var(--ink); }
.hair-booking h2 { margin-top: 8px; }
.hair-booking > p:not(.eyebrow) { margin: 20px auto 29px; color: #d8cec2; }

@media (max-width: 800px) {
  .hair-hero { grid-template-columns: 1fr; }
  .hair-hero-photo { min-height: 350px; }
  .hero-photo-image { min-height: 350px; height: auto; }
  .hair-hero-copy { padding: 75px 7% 85px; }
  .hair-services-section { grid-template-columns: 1fr; gap: 28px; }
  .portrait-placeholder { min-height: 270px; }
  .hair-booking { padding: 85px 7%; }
}