.men-page { background: #f7f5f1; }
.men-page .main-nav .is-active { color: #27352d; font-weight: 700; }

.men-hero {
  min-height: 680px;
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  overflow: hidden;
  margin-top: 20px;
  border-radius: 24px;
  color: #f4f2ed;
  background: #2c3830;
}
.men-hero-copy { align-self: center; padding: 74px clamp(42px, 6vw, 82px); }
.men-hero .eyebrow { color: #c6aa93; }
.men-hero h1 { margin-bottom: 28px; font-size: clamp(58px, 6.4vw, 88px); line-height: .92; font-weight: 410; letter-spacing: -.06em; }
.men-hero h1 em { color: #c5d0c3; font-style: normal; }
.men-hero-copy > p:not(.eyebrow) { max-width: 570px; color: rgba(244,242,237,.68); font-size: 17px; line-height: 1.75; }
.men-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; margin-top: 34px; }
.men-button-light { color: #2e3932; border-color: #f1eee8; background: #f1eee8; }
.men-button-light:hover { color: #2e3932; background: white; }
.men-text-link { color: rgba(255,255,255,.78); font-size: 12px; font-weight: 650; }
.men-text-link span { margin-left: 8px; }
.men-hero-notes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 56px; }
.men-hero-notes span { padding: 8px 12px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; color: rgba(255,255,255,.55); font-size: 10px; }
.men-hero-media { position: relative; min-width: 0; margin: 16px 16px 16px 0; overflow: hidden; border-radius: 19px; }
.men-hero-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(44,56,48,.34), transparent 36%); pointer-events: none; }
.men-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 34%; }
.men-hero-caption { position: absolute; z-index: 1; right: 22px; bottom: 22px; left: 22px; padding: 15px 17px; border-radius: 12px; color: white; background: rgba(28,35,30,.55); backdrop-filter: blur(12px); }
.men-hero-caption strong, .men-hero-caption span { display: block; }
.men-hero-caption strong { font-size: 13px; }
.men-hero-caption span { margin-top: 3px; color: rgba(255,255,255,.64); font-size: 10px; }

.men-intro, .men-procedures { padding-top: 120px; }
.men-section-heading { max-width: 690px; margin-bottom: 46px; }
.men-section-heading h2, .men-approach h2, .men-contact h2 { margin-bottom: 13px; font-size: clamp(38px, 4.4vw, 58px); line-height: 1.05; font-weight: 420; letter-spacing: -.045em; }
.men-section-heading > p:not(.eyebrow), .men-section-heading.split > p { color: #74766f; line-height: 1.7; }
.men-section-heading.split { max-width: none; display: grid; grid-template-columns: 1fr .65fr; gap: 70px; align-items: end; }
.men-section-heading.split > p { margin-bottom: 6px; }
.men-direction-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(44,45,41,.12); }
.men-direction-grid button { min-height: 250px; display: flex; flex-direction: column; align-items: flex-start; padding: 28px 25px; border: 0; border-right: 1px solid rgba(44,45,41,.12); color: #2c2d29; background: transparent; text-align: left; cursor: pointer; transition: background .25s ease; }
.men-direction-grid button:last-child { border-right: 0; }
.men-direction-grid button:hover { background: #ecefe9; }
.men-direction-grid span { margin-bottom: auto; color: #9c7c66; font-size: 11px; }
.men-direction-grid strong { display: block; margin-bottom: 10px; font-size: 23px; font-weight: 540; }
.men-direction-grid small { max-width: 220px; color: #7b7d76; font-size: 12px; line-height: 1.55; }
.men-direction-grid i { margin-top: 24px; color: #586e5d; font-size: 20px; font-style: normal; }

.men-procedure-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.men-procedure-grid article { overflow: hidden; border-radius: 19px; background: #efeee9; }
.men-procedure-grid img { width: 100%; height: 270px; object-fit: cover; object-position: center 34%; filter: saturate(.72); }
.men-procedure-grid article > div { padding: 25px 25px 27px; }
.men-procedure-grid small { color: #9a7861; font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.men-procedure-grid h3 { margin: 8px 0 10px; font-size: 23px; font-weight: 520; }
.men-procedure-grid p { min-height: 48px; color: #777a72; font-size: 12px; line-height: 1.6; }
.men-procedure-grid button { padding: 0; border: 0; color: #536a58; background: transparent; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.men-procedure-grid button span { margin-left: 6px; }

.men-approach { min-height: 520px; display: grid; grid-template-columns: 1fr .9fr; gap: 80px; align-items: center; margin-top: 120px; padding: clamp(46px, 6vw, 78px); border-radius: 24px; background: #e6ebe4; }
.men-approach-copy > p:not(.eyebrow) { max-width: 610px; margin-bottom: 28px; color: #697068; line-height: 1.75; }
.men-steps { margin: 0; padding: 0; list-style: none; }
.men-steps li { display: grid; grid-template-columns: 46px 1fr; gap: 18px; padding: 24px 0; border-top: 1px solid rgba(44,45,41,.12); }
.men-steps li:last-child { border-bottom: 1px solid rgba(44,45,41,.12); }
.men-steps li > span { color: #987a65; font-size: 11px; }
.men-steps strong { font-size: 17px; font-weight: 600; }
.men-steps p { margin: 5px 0 0; color: #777b74; font-size: 12px; }

.men-contact { min-height: 380px; display: grid; grid-template-columns: 1fr 330px; gap: 80px; align-items: center; margin-top: 120px; margin-bottom: 100px; padding: clamp(44px, 6vw, 76px); border-radius: 24px; color: white; background: #2c3830; }
.men-contact .eyebrow { color: #c4a991; }
.men-contact > div > p:not(.eyebrow) { max-width: 620px; color: rgba(255,255,255,.64); line-height: 1.7; }
.men-contact address { display: grid; gap: 12px; padding-left: 34px; border-left: 1px solid rgba(255,255,255,.15); font-style: normal; }
.men-contact address p, .men-contact address span { margin: 0; color: rgba(255,255,255,.58); font-size: 12px; line-height: 1.65; }
.men-contact address a { font-size: 15px; font-weight: 600; }

@media (max-width: 1000px) {
  .men-hero { grid-template-columns: 1fr; }
  .men-hero-media { min-height: 560px; margin: 0 14px 14px; }
  .men-direction-grid { grid-template-columns: repeat(2, 1fr); }
  .men-direction-grid button:nth-child(2) { border-right: 0; }
  .men-direction-grid button:nth-child(n+3) { border-top: 1px solid rgba(44,45,41,.12); }
  .men-procedure-grid { grid-template-columns: repeat(2, 1fr); }
  .men-approach, .men-contact { grid-template-columns: 1fr; gap: 40px; }
  .men-contact address { padding: 28px 0 0; border-top: 1px solid rgba(255,255,255,.15); border-left: 0; }
}

@media (max-width: 640px) {
  .men-hero { min-height: 0; margin-top: 8px; border-radius: 19px; }
  .men-hero-copy { padding: 46px 25px 38px; }
  .men-hero h1 { font-size: 52px; }
  .men-hero-copy > p:not(.eyebrow) { font-size: 14px; }
  .men-hero-actions { display: grid; }
  .men-hero-notes { margin-top: 38px; }
  .men-hero-media { min-height: 410px; margin: 0 8px 8px; border-radius: 15px; }
  .men-intro, .men-procedures { padding-top: 82px; }
  .men-section-heading.split { grid-template-columns: 1fr; gap: 12px; }
  .men-direction-grid { grid-template-columns: 1fr; }
  .men-direction-grid button { min-height: 210px; border-right: 0; border-bottom: 1px solid rgba(44,45,41,.12); }
  .men-direction-grid button:nth-child(n+3) { border-top: 0; }
  .men-procedure-grid { grid-template-columns: 1fr; }
  .men-procedure-grid img { height: 240px; }
  .men-approach, .men-contact { margin-top: 82px; padding: 38px 25px; border-radius: 19px; }
  .men-contact { margin-bottom: 70px; }
}

/* Pastel clinic identity */
.men-page {
  color: var(--ink);
  background:
    radial-gradient(circle at 4% 15%, rgba(238, 218, 212, .44), transparent 28rem),
    radial-gradient(circle at 96% 46%, rgba(218, 232, 220, .55), transparent 34rem),
    var(--ivory);
}
.men-page .main-nav .is-active { color: var(--green-deep); }

.men-hero {
  color: var(--ink);
  background: linear-gradient(130deg, #dfe9e1 0%, #e9eee6 48%, #f2dfda 100%);
}
.men-hero .eyebrow { color: #9a796b; }
.men-hero h1 em { color: var(--green-deep); }
.men-hero-copy > p:not(.eyebrow) { color: #687169; }
.men-button-light {
  border-color: rgba(255, 253, 249, .88);
  color: var(--green-deep);
  background: rgba(255, 253, 249, .88);
}
.men-button-light:hover { color: #fff; background: var(--green-deep); }
.men-text-link { color: var(--green-deep); }
.men-hero-notes span {
  border-color: rgba(101, 125, 106, .18);
  color: #6e776f;
  background: rgba(255, 253, 249, .35);
}
.men-hero-media::after { background: linear-gradient(90deg, rgba(110, 128, 114, .18), transparent 38%); }
.men-hero-caption { background: rgba(83, 102, 88, .66); }

.men-section-heading > p:not(.eyebrow),
.men-section-heading.split > p { color: var(--muted); }
.men-direction-grid { border-color: var(--line); }
.men-direction-grid button {
  border-color: var(--line);
  color: var(--ink);
}
.men-direction-grid button:hover { background: #e8efe8; }
.men-direction-grid span,
.men-procedure-grid small,
.men-steps li > span { color: #a07d6f; }
.men-direction-grid i,
.men-procedure-grid button { color: var(--green-deep); }

.men-procedure-grid article { background: #f4eee9; }
.men-procedure-grid article:nth-child(2n) { background: #ebf1ea; }
.men-procedure-grid img { filter: saturate(.68) contrast(.98); }

.men-approach { background: linear-gradient(125deg, #e4ede5, #f2e6e1); }
.men-approach-copy > p:not(.eyebrow),
.men-steps p { color: #707970; }
.men-steps li { border-color: rgba(101, 125, 106, .16); }

.men-contact {
  color: var(--ink);
  background: linear-gradient(125deg, #dce8df, #e9eee5 52%, #f0ddd8);
}
.men-contact .eyebrow { color: #9a786a; }
.men-contact > div > p:not(.eyebrow),
.men-contact address p,
.men-contact address span { color: #6c756d; }
.men-contact address { border-color: rgba(101, 125, 106, .2); }

@media (max-width: 1000px) {
  .men-contact address { border-color: rgba(101, 125, 106, .2); }
}

/* Brutal independent identity for men's cosmetology */
.men-page {
  --ink: #eef0eb;
  --muted: #9ba49d;
  --ivory: #171c19;
  --paper: #212723;
  --paper-soft: #282f2a;
  --green: #ad957e;
  --green-deep: #d0b69b;
  --green-pale: #29332d;
  --line: rgba(233, 238, 232, .13);
  --shadow: 0 22px 52px rgba(0, 0, 0, .22);
  color: var(--ink);
  background:
    radial-gradient(circle at 10% 8%, rgba(91, 106, 95, .22), transparent 30rem),
    radial-gradient(circle at 92% 44%, rgba(113, 91, 73, .15), transparent 34rem),
    #171c19;
}

.men-page .site-header {
  background: rgba(23, 28, 25, .93);
  border-color: rgba(238, 240, 235, .07);
}
.men-page .site-header.scrolled { border-color: rgba(238, 240, 235, .1); }
.men-page .brand-copy { color: #ecece6; }
.men-page .brand-copy small { color: #a98f78; }
.men-page .main-nav a,
.men-page .footer-nav a { color: #aeb6b0; }
.men-page .main-nav a:hover,
.men-page .main-nav .is-active,
.men-page .footer-nav a:hover { color: #d2b89d; }
.men-page .phone strong { color: #f0f1ec; }
.men-page .phone small { color: #858f88; }
.men-page .menu-toggle {
  border-color: rgba(238, 240, 235, .14);
  background: #222824;
}
.men-page .menu-toggle span { background: #e5e7e2; }
.men-page .button {
  border-color: #b29a82;
  color: #19201b;
  background: #b29a82;
}
.men-page .button:hover {
  border-color: #c8b097;
  color: #151a17;
  background: #c8b097;
}
.men-page .main-nav.open {
  border-color: rgba(238, 240, 235, .12);
  background: rgba(30, 36, 32, .98);
  box-shadow: 0 20px 44px rgba(0, 0, 0, .3);
}
.men-page .main-nav.open a { border-color: rgba(238, 240, 235, .08); }

.men-page .men-hero {
  color: #f2f2ed;
  background:
    radial-gradient(circle at 0 0, rgba(124, 142, 128, .18), transparent 28rem),
    linear-gradient(135deg, #202722 0%, #2a332d 58%, #302b26 100%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .2);
}
.men-page .men-hero .eyebrow,
.men-page .eyebrow { color: #bda086; }
.men-page .men-hero h1 em { color: #b9c8bb; }
.men-page .men-hero-copy > p:not(.eyebrow) { color: #aab2ac; }
.men-page .men-button-light {
  border-color: #b59d84;
  color: #171c19;
  background: #b59d84;
}
.men-page .men-text-link { color: #d1d5cf; }
.men-page .men-hero-notes span {
  border-color: rgba(238, 240, 235, .15);
  color: #9da69f;
  background: rgba(255, 255, 255, .025);
}
.men-page .men-hero-media::after { background: linear-gradient(90deg, rgba(20, 26, 22, .48), transparent 42%); }
.men-page .men-hero-caption {
  color: #f0f0eb;
  background: rgba(20, 26, 22, .68);
  border: 1px solid rgba(238, 240, 235, .1);
}
.men-page .men-hero-caption span { color: #a8b0aa; }

.men-page .men-section-heading h2,
.men-page .men-approach h2,
.men-page .men-contact h2 { color: #f0f1ec; }
.men-page .men-section-heading > p:not(.eyebrow),
.men-page .men-section-heading.split > p { color: #989f99; }
.men-page .men-direction-grid { border-color: rgba(238, 240, 235, .13); }
.men-page .men-direction-grid button {
  border-color: rgba(238, 240, 235, .13);
  color: #eceee9;
}
.men-page .men-direction-grid button:hover { background: #252d28; }
.men-page .men-direction-grid span,
.men-page .men-procedure-grid small,
.men-page .men-steps li > span { color: #b39880; }
.men-page .men-direction-grid small,
.men-page .men-procedure-grid p { color: #959e97; }
.men-page .men-direction-grid i,
.men-page .men-procedure-grid button { color: #c6ad94; }

.men-page .men-procedure-grid article,
.men-page .men-procedure-grid article:nth-child(2n) {
  border: 1px solid rgba(238, 240, 235, .07);
  background: #212723;
}
.men-page .men-procedure-grid article:nth-child(2n) { background: #262e29; }
.men-page .men-procedure-grid img { filter: saturate(.48) contrast(1.04) brightness(.84); }
.men-page .men-procedure-grid h3 { color: #eef0eb; }

.men-page .men-approach {
  background:
    linear-gradient(135deg, rgba(116, 133, 120, .08), transparent 42%),
    #222a25;
}
.men-page .men-approach-copy > p:not(.eyebrow),
.men-page .men-steps p { color: #9ba39d; }
.men-page .men-steps li { border-color: rgba(238, 240, 235, .12); }
.men-page .men-steps strong { color: #eceee9; }

.men-page .men-contact {
  color: #eef0eb;
  background:
    radial-gradient(circle at 100% 0, rgba(151, 122, 96, .12), transparent 25rem),
    #282f2a;
}
.men-page .men-contact .eyebrow { color: #bda086; }
.men-page .men-contact > div > p:not(.eyebrow),
.men-page .men-contact address p,
.men-page .men-contact address span { color: #a2aaa4; }
.men-page .men-contact address { border-color: rgba(238, 240, 235, .14); }

.men-page .footer {
  border-color: rgba(238, 240, 235, .09);
  background: #111512;
}
.men-page .footer-meta { color: #7f8881; }

.men-page .booking-backdrop { background: rgba(7, 9, 8, .72); }
.men-page .booking-dialog {
  border-color: rgba(238, 240, 235, .12);
  color: #eef0eb;
  background:
    radial-gradient(circle at 100% 0, rgba(124, 142, 128, .14), transparent 18rem),
    #202622;
}
.men-page .booking-close {
  border-color: rgba(238, 240, 235, .13);
  color: #e4e7e1;
  background: rgba(255, 255, 255, .04);
}
.men-page .booking-dialog-head > p:not(.eyebrow),
.men-page .booking-success-view > p:not(.eyebrow),
.men-page .booking-consent { color: #959e97; }
.men-page .booking-field > span { color: #c8cec9; }
.men-page .booking-field input,
.men-page .booking-field select {
  border-color: rgba(238, 240, 235, .14);
  color: #edf0eb;
  background: #29302b;
}
.men-page .booking-field select option { color: #edf0eb; background: #29302b; }

@media (max-width: 1000px) {
  .men-page .men-contact address { border-color: rgba(238, 240, 235, .14); }
}

.men-page .main-nav .nav-men-button {
  border-color: rgba(210, 184, 157, .28);
  color: #d2b89d;
  background: var(--ivory);
}
.men-page .main-nav .nav-men-button:hover {
  border-color: rgba(210, 184, 157, .48);
  color: #ead2ba;
  background: #202622;
}