/* Treatments hub — editorial overview aligned with homepage signature board */

.hh-tx {
 --hh-tx-paper: #f7f2eb;
 --hh-tx-paper-deep: #efe6dc;
 --hh-tx-line: #e4dbd2;
 --hh-tx-accent: #e7c3a4;
 --hh-tx-accent-deep: #c9956a;
 --hh-bronze: #8a6a45;
}

.hh-tx .hh-tx-hero {
 position: relative;
 padding: clamp(3.2rem, 7vw, 5rem) 0 clamp(2.4rem, 4.5vw, 3.2rem);
 background:
 radial-gradient(ellipse 80% 60% at 12% 0%, rgba(255, 214, 186, 0.45), transparent 55%),
 radial-gradient(ellipse 70% 50% at 88% 18%, rgba(232, 214, 196, 0.55), transparent 50%),
 linear-gradient(180deg, #faf6f1 0%, var(--hh-tx-paper) 48%, #fbf9f6 100%);
 border-bottom: 1px solid var(--hh-tx-line);
 overflow: hidden;
}

.hh-tx .hh-tx-hero::before {
 content: "";
 position: absolute;
 inset: auto -8% -40% 40%;
 height: 70%;
 background: url("../images/science/science-spa-texture.webp") center / cover no-repeat;
 opacity: 0.12;
 pointer-events: none;
}

.hh-tx .hh-tx-hero .hh-wrap {
 position: relative;
 max-width: 42rem;
}

.hh-tx .hh-tx-hero .hh-kicker {
 margin: 0 0 0.85rem;
 font-family: var(--hh-latin);
 font-size: 0.72rem;
 font-weight: 500;
 letter-spacing: 0.22em;
 text-transform: uppercase;
 color: var(--hh-bronze);
}

.hh-tx .hh-tx-hero h1 {
 margin: 0 0 1rem;
 font-family: var(--hh-serif);
 font-weight: 500;
 font-size: clamp(2.15rem, 4.6vw, 3.15rem);
 line-height: 1.22;
 letter-spacing: 0.04em;
 color: var(--hh-ink);
}

.hh-tx .hh-tx-hero .hh-lede {
 margin: 0;
 font-size: 1.02rem;
 line-height: 1.9;
 color: var(--hh-ink-soft);
}

.hh-tx .hh-tx-hero .hh-lede p {
 margin: 0;
}

.hh-tx .hh-tx-board {
 padding: clamp(3.4rem, 6vw, 5rem) 0 clamp(2.8rem, 5vw, 4rem);
 background: #fbf9f6;
}

.hh-tx .hh-tx-board__intro {
 max-width: 38rem;
 margin: 0 0 clamp(2.4rem, 4vw, 3.2rem);
}

.hh-tx .hh-tx-board__intro .hh-kicker {
 margin: 0 0 0.65rem;
 color: var(--hh-bronze);
}

.hh-tx .hh-tx-board__intro h2 {
 margin: 0 0 0.85rem;
 font-family: var(--hh-serif);
 font-weight: 500;
 font-size: clamp(1.65rem, 3vw, 2.15rem);
 line-height: 1.3;
 letter-spacing: 0.04em;
 color: var(--hh-ink);
}

.hh-tx .hh-tx-board__intro p {
 margin: 0;
 font-size: 0.95rem;
 line-height: 1.9;
 color: var(--hh-ink-soft);
}

.hh-tx .hh-sig-board {
 display: flex;
 flex-direction: column;
 gap: clamp(2.8rem, 5vw, 3.8rem);
}

.hh-tx .hh-sig-audience__label {
 display: flex;
 align-items: center;
 gap: 0.9rem;
 margin: 0 0 1.55rem;
 font-family: var(--hh-serif);
 font-weight: 500;
 font-size: 0.78rem;
 letter-spacing: 0.22em;
 color: var(--hh-bronze);
 white-space: nowrap;
}

.hh-tx .hh-sig-audience__label::before,
.hh-tx .hh-sig-audience__label::after {
 content: "";
 flex: 1 1 auto;
 height: 1px;
 background: var(--hh-tx-line);
}

.hh-tx .hh-sig-grid {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 0;
 align-items: stretch;
}

.hh-tx a.hh-sig-item,
.hh-tx a.hh-sig-item:hover,
.hh-tx a.hh-sig-item:focus,
.hh-tx a.hh-sig-item:focus-visible,
.hh-tx a.hh-sig-item:active,
.hh-tx a.hh-sig-item:visited {
 color: inherit;
 text-decoration: none;
 text-decoration-line: none;
 background-image: none;
}

.hh-tx a.hh-sig-item h3,
.hh-tx a.hh-sig-item p,
.hh-tx a.hh-sig-item:hover h3,
.hh-tx a.hh-sig-item:hover p,
.hh-tx a.hh-sig-item:focus-visible h3,
.hh-tx a.hh-sig-item:focus-visible p {
 text-decoration: none;
 text-decoration-line: none;
 border-bottom: 0;
 background-image: none;
}

.hh-tx .hh-sig-item {
 display: flex;
 flex-direction: column;
 min-width: 0;
 padding: 0.15rem 1.35rem 0;
 transition: transform 320ms var(--hh-ease);
}

.hh-tx .hh-sig-item:first-child {
 padding-left: 0;
}

.hh-tx .hh-sig-item:last-child {
 padding-right: 0;
}

.hh-tx .hh-sig-item + .hh-sig-item {
 border-left: 1px solid var(--hh-tx-line);
}

.hh-tx .hh-sig-item h3 {
 margin: 0;
 font-family: var(--hh-serif);
 font-weight: 500;
 font-size: clamp(1.38rem, 1.7vw, 1.68rem);
 line-height: 1.35;
 letter-spacing: 0.05em;
 color: var(--hh-bronze);
}

.hh-tx .hh-sig-item h3::after {
 content: "";
 display: block;
 width: 2.1rem;
 height: 1px;
 margin-top: 0.72rem;
 background: var(--hh-tx-accent);
 transition: background-color 280ms var(--hh-ease), width 280ms var(--hh-ease);
}

.hh-tx a.hh-sig-item:hover h3::after,
.hh-tx a.hh-sig-item:focus-visible h3::after {
 background: var(--hh-tx-accent-deep);
 width: 2.8rem;
}

.hh-tx .hh-sig-item p {
 margin: 0.95rem 0 0;
 max-width: 28em;
 font-size: 0.84rem;
 line-height: 1.95;
 color: var(--hh-ink-soft);
}

.hh-tx .hh-sig-item__media {
 display: block;
 margin: 1.45rem 0 0;
 overflow: hidden;
 background: var(--hh-tx-paper-deep);
}

.hh-tx .hh-sig-item__media--cutout {
 background: transparent;
}

.hh-tx .hh-sig-item__media img {
 display: block;
 width: 100%;
 height: auto;
 aspect-ratio: 3 / 4;
 object-fit: cover;
 object-position: center 18%;
 transition: transform 420ms var(--hh-ease);
}

.hh-tx a.hh-sig-item:hover .hh-sig-item__media img,
.hh-tx a.hh-sig-item:focus-visible .hh-sig-item__media img {
 transform: scale(1.03);
}

.hh-tx .hh-sig-item__media--cutout img {
 object-fit: contain;
 object-position: center bottom;
 background: transparent;
}

.hh-tx .hh-sig-item__media img[src*="men-scalp-assessment"] {
 width: 100%;
 height: auto;
 aspect-ratio: 3 / 4;
 object-fit: cover;
 object-position: center center;
}

.hh-tx .hh-tx-services {
 padding: clamp(2.8rem, 5vw, 4rem) 0;
 background:
 linear-gradient(180deg, #f3ece4 0%, var(--hh-tx-paper) 100%);
 border-top: 1px solid var(--hh-tx-line);
}

.hh-tx .hh-tx-services__head {
 max-width: 36rem;
 margin: 0 0 2rem;
}

.hh-tx .hh-tx-services__head .hh-kicker {
 margin: 0 0 0.55rem;
 color: var(--hh-bronze);
}

.hh-tx .hh-tx-services__head h2 {
 margin: 0 0 0.75rem;
 font-family: var(--hh-serif);
 font-weight: 500;
 font-size: clamp(1.45rem, 2.4vw, 1.85rem);
 letter-spacing: 0.04em;
 color: var(--hh-ink);
}

.hh-tx .hh-tx-services__head p {
 margin: 0;
 font-size: 0.92rem;
 line-height: 1.85;
 color: var(--hh-ink-soft);
}

.hh-tx .hh-tx-svc-grid {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 1.25rem;
}

.hh-tx a.hh-tx-svc,
.hh-tx a.hh-tx-svc:hover,
.hh-tx a.hh-tx-svc:focus,
.hh-tx a.hh-tx-svc:focus-visible,
.hh-tx a.hh-tx-svc:visited {
 color: inherit;
 text-decoration: none;
 background: #fffcf8;
 border: 1px solid var(--hh-tx-line);
 outline-offset: 3px;
}

.hh-tx .hh-tx-svc {
 display: flex;
 flex-direction: column;
 min-width: 0;
 overflow: hidden;
 transition: border-color 280ms var(--hh-ease), transform 280ms var(--hh-ease);
}

.hh-tx a.hh-tx-svc:hover,
.hh-tx a.hh-tx-svc:focus-visible {
 border-color: #d8c8b6;
 transform: translateY(-2px);
}

.hh-tx .hh-tx-svc__media {
 display: block;
 margin: 0;
 aspect-ratio: 16 / 11;
 overflow: hidden;
 background: var(--hh-tx-paper-deep);
}

.hh-tx .hh-tx-svc__media img {
 display: block;
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: transform 420ms var(--hh-ease);
}

.hh-tx a.hh-tx-svc:hover .hh-tx-svc__media img,
.hh-tx a.hh-tx-svc:focus-visible .hh-tx-svc__media img {
 transform: scale(1.04);
}

.hh-tx .hh-tx-svc__body {
 display: flex;
 flex-direction: column;
 gap: 0.55rem;
 padding: 1.15rem 1.2rem 1.35rem;
}

.hh-tx .hh-tx-svc__body h3 {
 margin: 0;
 font-family: var(--hh-serif);
 font-weight: 500;
 font-size: 1.18rem;
 letter-spacing: 0.04em;
 color: var(--hh-bronze);
}

.hh-tx .hh-tx-svc__body p {
 margin: 0;
 font-size: 0.84rem;
 line-height: 1.8;
 color: var(--hh-ink-soft);
}

.hh-tx .hh-tx-note {
 padding: clamp(2.4rem, 4vw, 3.2rem) 0;
 background: #fffcf8;
 border-top: 1px solid var(--hh-tx-line);
}

.hh-tx .hh-tx-note .hh-wrap {
 max-width: 40rem;
}

.hh-tx .hh-tx-note h2 {
 margin: 0 0 0.85rem;
 font-family: var(--hh-serif);
 font-weight: 500;
 font-size: clamp(1.35rem, 2.2vw, 1.7rem);
 letter-spacing: 0.04em;
 color: var(--hh-ink);
}

.hh-tx .hh-tx-note p {
 margin: 0;
 font-size: 0.94rem;
 line-height: 1.9;
 color: var(--hh-ink-soft);
}

@media (max-width: 860px) {
 .hh-tx .hh-sig-grid,
 .hh-tx .hh-tx-svc-grid {
 grid-template-columns: 1fr;
 }

 .hh-tx .hh-sig-item,
 .hh-tx .hh-sig-item:first-child,
 .hh-tx .hh-sig-item:last-child {
 padding: 0;
 border-left: 0;
 }

 .hh-tx .hh-sig-item + .hh-sig-item {
 margin-top: 2.35rem;
 padding-top: 2.15rem;
 border-top: 1px solid var(--hh-tx-line);
 border-left: 0;
 }

 .hh-tx .hh-tx-hero::before {
 opacity: 0.08;
 }
}

@media (prefers-reduced-motion: reduce) {
 .hh-tx .hh-sig-item__media img,
 .hh-tx a.hh-sig-item:hover .hh-sig-item__media img,
 .hh-tx a.hh-sig-item:focus-visible .hh-sig-item__media img,
 .hh-tx .hh-tx-svc__media img,
 .hh-tx a.hh-tx-svc:hover .hh-tx-svc__media img,
 .hh-tx a.hh-tx-svc:focus-visible .hh-tx-svc__media img,
 .hh-tx a.hh-tx-svc:hover,
 .hh-tx a.hh-tx-svc:focus-visible {
 transition: none;
 transform: none;
 }
}