.mens-perm-page { background:var(--paper); }
.mens-perm-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(18rem,.85fr); align-items:center; gap:clamp(2rem,6vw,7rem); max-width:112rem; margin:0 auto; padding:clamp(1rem,3vw,3rem) var(--gutter) clamp(5rem,8vw,8rem); }
.mens-perm-copy { max-width:48rem; }
.mens-perm-copy h1, .mens-perm-details h2, .mens-perm-contact h2 { margin:.6rem 0 1.6rem; font-family:var(--serif); font-size:clamp(3.7rem,6.5vw,7.5rem); font-weight:400; line-height:.9; letter-spacing:-.05em; }
.mens-perm-copy h1 em, .mens-perm-details h2 em, .mens-perm-contact h2 em { color:var(--rose-deep); font-weight:400; }
.mens-perm-lede { max-width:38rem; color:var(--ink-soft); font-size:clamp(1.08rem,1.6vw,1.38rem); line-height:1.7; }
.mens-perm-actions { display:flex; flex-wrap:wrap; align-items:center; gap:1.25rem 2rem; margin-top:2.2rem; }
.mens-perm-actions .content-text-link { margin-top:0; }
.mens-perm-note { max-width:32rem; margin-top:1.75rem; color:var(--ink-soft); font-size:.85rem; line-height:1.65; }
.mens-perm-photo { min-width:0; margin:0; }
.mens-perm-photo img { display:block; width:100%; aspect-ratio:1/1; object-fit:cover; object-position:center top; background:var(--blush); }
.mens-perm-photo figcaption { margin-top:.8rem; color:var(--ink-soft); font-family:var(--serif); font-size:.9rem; font-style:italic; }
.mens-perm-details { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1fr); gap:clamp(2rem,7vw,8rem); padding:clamp(4rem,8vw,8rem) var(--gutter); background:var(--blush-light); }
.mens-perm-details h2, .mens-perm-contact h2 { font-size:clamp(3.1rem,5vw,5.7rem); }
.mens-perm-detail-copy { max-width:39rem; align-self:center; }
.mens-perm-detail-copy p, .mens-perm-contact>p:not(.eyebrow) { color:var(--ink-soft); font-size:clamp(1rem,1.35vw,1.2rem); line-height:1.75; }
.mens-perm-contact { display:flex; flex-direction:column; align-items:flex-start; padding:clamp(5rem,9vw,10rem) var(--gutter); }
.mens-perm-contact>p:not(.eyebrow) { max-width:37rem; margin:0 0 2rem; }
.mens-perm-contact .content-text-link { margin-top:2rem; }
@media (max-width: 760px) {
  .mens-perm-hero, .mens-perm-details { grid-template-columns:1fr; }
  .mens-perm-hero { padding-top:1rem; }
  .mens-perm-photo { grid-row:1; }
  .mens-perm-copy h1 { font-size:clamp(3.25rem,13vw,5rem); }
  .mens-perm-contact { padding-bottom:7rem; }
}