.nav .precise-brand { min-width:280px; }
.precise-brand strong { font-size:30px; letter-spacing:.08em; }
.precise-brand small { padding-left:0; letter-spacing:.08em; font-size:10px; white-space:nowrap; }
@media (max-width:900px) {
  .nav .precise-brand { min-width:0; }
  .precise-brand strong { font-size:24px; }
  .precise-brand small { font-size:8px; }
}
.nav { height:143px; background:#000; }
.nav .rail { padding:14px 20px 6px; }
.nav .precise-brand { display:block; flex:0 0 260px; width:260px; height:117px; overflow:hidden; }
.nav .precise-brand img { display:block; width:260px; max-width:none; height:auto; object-fit:initial; clip-path:none; transform:translateY(-18px); }
.nav nav a { color:#fff; }
.menu-toggle { display:none; }
@media (max-width:900px) {
  .nav { height:auto; min-height:105px; }
  .nav .precise-brand { flex-basis:190px; width:190px; height:86px; }
  .nav .precise-brand img { width:190px; height:auto; transform:translateY(-13px); }
}
@media (max-width:600px) {
  .nav { height:105px; min-height:0; position:relative; z-index:10; }
  .nav .rail { height:100%; flex-direction:row; justify-content:space-between; align-items:center; padding:8px 0; }
  .nav .precise-brand { flex:0 0 auto; width:190px; height:86px; }
  .menu-toggle { display:flex; align-items:center; gap:8px; padding:9px 12px; border:1px solid #be8c4d; border-radius:3px; background:transparent; color:#fff; font:600 14px/1 Barlow,sans-serif; cursor:pointer; }
  .menu-toggle span { color:#be8c4d; font-size:19px; line-height:1; }
  .nav #hair-page-menu { display:none; position:absolute; top:100%; left:0; right:0; padding:8px 14px 14px; background:#000; box-shadow:0 12px 18px #0005; }
  .nav #hair-page-menu.is-open { display:flex; flex-direction:column; gap:0; }
  .nav #hair-page-menu a { display:block; padding:13px 12px; text-align:left; border-top:1px solid #ffffff26; font-size:15px; }
}

/* Typography shared with the salon homepage. */
.hero h1,
.success h2,
.what-intro h2,
.benefits-heading h2,
.steps h2,
.monique h2,
.faq h2,
.what-card h3,
.benefit h3,
.steps-grid b { font-family:Oswald,sans-serif; font-weight:600; }
.what-intro h2,
.benefits-heading h2,
.steps h2 { color:#171717; }
.success p,
.what-intro > p,
.what-card p,
.benefit p,
.monique .split p,
.faq details p { color:#171717; font:400 22px/1.45 Montserrat,sans-serif; }
.steps-grid p { color:#171717; font:400 20px/1.45 Montserrat,sans-serif; }
.cta-stack a,
.steps .cta-stack a { min-height:74px; font:600 32px/1 Oswald,sans-serif; }
.success { height:auto; padding-bottom:40px; }
@media (max-width:900px) {
  .success p,
  .what-intro > p,
  .what-card p,
  .benefit p,
  .monique .split p,
  .faq details p { font-size:20px; }
  .cta-stack a,
  .steps .cta-stack a { min-height:57px; font-size:23px; }
  .what-card { min-height:0; padding:32px 25px; }
  .benefits-layout { gap:28px; }
}
@media (min-width:901px) {
  .what,.benefits,.monique,.faq { height:auto; }
  .what { padding-bottom:70px; }
  .faq { overflow:visible; }
  .faq details[open] p { display:block; }
}