/* House of Hair LDN: blush pink + rose + the purple of the street door, neon pink accent. */
:root { --ink: #2B1633; --blue: #B23A68; --gold: #E07AA0; --light: #F9E9EC; --cream: #FDF6F7; --muted: #6E5A70; --pink: #E86B9A; --lilac: #5A3A8E; }
.br-brand img { border-radius: 50%; background: #fff; object-fit: cover; }
.br-brand b { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: 28px; letter-spacing: .02em; }
.bh-foot { background: #24112B; } .bh-hours li, .bh-foot-bottom { border-color: #3A2242; }
.bh-hero .hero-image::before { background: linear-gradient(90deg, rgba(36,12,40,.85) 0%, rgba(36,12,40,.5) 45%, rgba(36,12,40,.08) 82%); }
@media (max-width: 650px) { .bh-hero .hero-image::before { background: linear-gradient(180deg, rgba(36,12,40,.15) 0%, rgba(36,12,40,.55) 35%, rgba(36,12,40,.92) 100%); } }
.bh-hero h1 em { color: #FF9CC4; font-style: italic; }
.section-heading h2 span, .reviews-heading h2 span, .bh-journey h2 span { color: var(--pink); font-style: italic; }
.service-strip { background: var(--lilac); } .service-strip i { color: #FF9CC4; }
.br-work { background: #2B1633; } .br-work .button { background: #FF9CC4; color: #2B1633; }
.review-initials { background: #FBE1EA; color: var(--ink); } .review-stars { color: #E0A33A; }
.br-style { border-color: #F0D5DD; }
.br-style-img img { object-position: center 25%; }

/* The walk-in: how to find the hidden salon */
.hh-walk { background: #1F0E25; color: #fff; }
.hh-walk .eyebrow { color: #FF9CC4; } .hh-walk h2 { color: #fff; } .hh-walk .section-heading p { color: #D9C6DD; }
.hh-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; counter-reset: s; }
.hh-step { position: relative; border-radius: 20px; overflow: hidden; background: #000; aspect-ratio: 3 / 4; }
.hh-step video, .hh-step img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hh-step::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(20,6,24,.92)); }
.hh-step div { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 1; }
.hh-step b { display: block; font-size: 12px; letter-spacing: .2em; color: #FF9CC4; }
.hh-step h3 { color: #fff; font-size: 26px; margin: 6px 0 4px; }
.hh-step p { color: #E9DCEB; font-size: 14px; line-height: 1.45; margin: 0; }
.hh-note { margin-top: 18px; font-size: 13px; color: #BFA9C4; }
@media (max-width: 1100px) { .hh-steps { grid-template-columns: repeat(5, 72%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; } .hh-step { scroll-snap-align: start; } }
@media (max-width: 600px) { .hh-steps { grid-template-columns: repeat(5, 86%); } }

/* Team */
.hh-team { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: start; }
.hh-team figure { margin: 0; border-radius: 22px; overflow: hidden; box-shadow: 0 30px 60px -36px rgba(43,22,51,.55); }
.hh-team figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.hh-people { display: grid; gap: 14px; margin: 22px 0; }
.hh-people div { background: #fff; border: 1px solid #F0D5DD; border-radius: 16px; padding: 16px 18px; }
.hh-people strong { font-family: "Cormorant Garamond", serif; font-size: 26px; display: block; }
.hh-people span { color: var(--muted); font-size: 14.5px; }
@media (max-width: 900px) { .hh-team { grid-template-columns: 1fr; gap: 28px; } }
.hh-team figure video { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.hh-tw { background: #FBEFF3; }
.contact-details .hh-twbtn { display: inline-block; margin: 0 0 14px 12px; }
