/* Face-map CMS Page ------------------------------------------------------ */

.client-face-map {
    overflow: hidden;
    padding: clamp(44px, 7vw, 88px) 0 clamp(50px, 7vw, 78px);
    background:
        radial-gradient(circle at 50% 47%, rgba(250, 222, 208, .62), transparent 31%),
        linear-gradient(135deg, #fbf8f4, #f4ede5);
}

.client-face-map__head {
    max-width: 560px;
    margin: 0 auto 30px;
    text-align: center;
}

.client-face-map__eyebrow,
.client-face-map__detail-head > p {
    margin: 0 0 9px;
    color: #9f2e5f;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
}

.client-face-map__head h1 {
    margin: 0;
    color: #1b1b1f;
    font-size: clamp(30px, 4vw, 46px);
    letter-spacing: -.045em;
    line-height: 1.08;
}

.client-face-map__head > p:last-child {
    margin: 12px 0 0;
    color: var(--client-muted);
    font-size: 16px;
}

.client-face-map__guide {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(280px, 390px) minmax(180px, 1fr);
    gap: 28px;
    align-items: center;
    max-width: 1030px;
    margin: 0 auto;
}

.client-face-map__portrait {
    position: relative;
    z-index: 1;
    margin: 0;
    overflow: hidden;
    border: 7px solid rgba(255, 255, 255, .75);
    border-radius: 50% 50% 46% 46%;
    background: #f6e8de;
    box-shadow: 0 24px 54px rgba(76, 47, 41, .16);
}

.client-face-map__portrait img {
    display: block;
    width: 100%;
    aspect-ratio: .74;
    object-fit: cover;
}

.client-face-map__portrait figcaption {
    position: absolute;
    right: 14px;
    bottom: 14px;
    left: 14px;
    padding: 9px 12px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .84);
    color: #49434a;
    font-size: 11px;
    line-height: 1.45;
    text-align: center;
}

.client-face-map__zones { display: grid; gap: 34px; }
.client-face-map__zones--left { text-align: right; }

.client-face-map__zone {
    position: relative;
    display: flex;
    gap: 11px;
    align-items: flex-start;
    padding: 16px;
    border: 1px solid rgba(225, 215, 207, .95);
    border-radius: 12px;
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 10px 26px rgba(68, 47, 41, .08);
}

.client-face-map__zones--left .client-face-map__zone { flex-direction: row-reverse; }

.client-face-map__index {
    display: grid;
    flex: 0 0 27px;
    place-items: center;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: #f7e3ea;
    color: #9f2e5f;
    font-size: 10px;
    font-weight: 800;
}

.client-face-map__zone strong,
.client-face-map__zone small { display: block; }
.client-face-map__zone strong { color: #1b1b1f; font-size: 14px; }
.client-face-map__zone small { margin-top: 4px; color: var(--client-muted); font-size: 12px; line-height: 1.45; }

.client-face-map__detail { padding: clamp(48px, 7vw, 82px) 0; }
.client-face-map__detail-head { max-width: 860px; margin: 0 auto 24px; text-align: center; }
.client-face-map__detail-head h2 { margin: 0; color: #1b1b1f; font-size: clamp(26px, 3vw, 34px); letter-spacing: -.035em; }
.client-face-map__content { max-width: 940px; }

@media (max-width: 860px) {
    .client-face-map__guide {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas: "portrait portrait" "left right";
        max-width: 700px;
    }
    .client-face-map__portrait { grid-area: portrait; width: min(100%, 330px); margin: 0 auto; }
    .client-face-map__zones { gap: 16px; }
}

@media (max-width: 560px) {
    .client-face-map__guide { grid-template-columns: 1fr; grid-template-areas: "portrait" "left" "right"; gap: 16px; }
    .client-face-map__zones--left { text-align: left; }
    .client-face-map__zones--left .client-face-map__zone { flex-direction: row; }
    .client-face-map__portrait { width: min(100%, 280px); }
    .client-face-map__head { margin-bottom: 24px; }
}

/* Consultation redesign: keeps the stored legacy CMS content but gives its
   existing questions a clear, current visual hierarchy. */
.client-face-map {
    padding: clamp(46px, 7vw, 88px) 0 clamp(54px, 7vw, 86px);
    background:
        radial-gradient(circle at 5% 78%, rgba(254, 179, 180, .3), transparent 24%),
        radial-gradient(circle at 95% 18%, rgba(251, 225, 205, .75), transparent 24%),
        #fbfaf8;
}

.client-face-map__head { max-width: 660px; margin-bottom: 42px; }
.client-face-map__consultation {
    display: grid;
    grid-template-columns: minmax(240px, .96fr) minmax(290px, 390px) minmax(180px, .62fr);
    gap: clamp(20px, 4vw, 56px);
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}

.client-face-map__intro-kicker { margin: 0 0 9px; color: #9f2e5f; font-size: 11px; font-weight: 800; letter-spacing: .11em; line-height: 1.3; }
.client-face-map__intro h2 { margin: 0; color: #1b1b1f; font-size: clamp(27px, 3.1vw, 39px); letter-spacing: -.05em; line-height: 1.08; }
.client-face-map__intro > p:not(.client-face-map__intro-kicker) { max-width: 320px; margin: 15px 0 24px; color: var(--client-muted); font-size: 14px; line-height: 1.65; }
.client-face-map__zone-list { display: grid; gap: 10px; }
.client-face-map__zone { gap: 11px; align-items: center; padding: 12px 13px; border-color: rgba(225, 215, 207, .9); background: rgba(255, 255, 255, .78); box-shadow: 0 8px 22px rgba(68, 47, 41, .055); }
.client-face-map__zone small { margin-top: 2px; font-size: 11px; line-height: 1.4; }

.client-face-map__portrait { border-radius: 47% 47% 42% 42%; }
.client-face-map__hotspot { position: absolute; display: grid; z-index: 1; place-items: center; width: 27px; height: 27px; border: 2px solid rgba(255, 255, 255, .95); border-radius: 50%; background: #b3195c; color: #fff; box-shadow: 0 5px 12px rgba(99, 28, 55, .28); font-size: 10px; font-weight: 800; }
.client-face-map__hotspot--eyes { top: 29%; left: 31%; }
.client-face-map__hotspot--tzone { top: 43%; left: 50%; }
.client-face-map__hotspot--cheeks { top: 53%; right: 23%; }

.client-face-map__journey { display: grid; grid-template-columns: 25px 1fr; gap: 13px 11px; align-items: start; padding: 8px 0 8px 20px; border-left: 1px solid #ded7d2; }
.client-face-map__journey > span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #1b1b1f; color: #fff; font-size: 9px; font-weight: 800; }
.client-face-map__journey p { margin: 1px 0 4px; color: var(--client-muted); font-size: 12px; line-height: 1.55; }
.client-face-map__journey strong { display: block; color: #1b1b1f; font-size: 13px; }
.client-face-map__journey a { grid-column: 1 / -1; display: inline-flex; gap: 7px; align-items: center; margin-top: 5px; color: #9f2e5f; font-size: 13px; font-weight: 800; text-decoration: none; }
.client-face-map__journey a .client-icon { transform: rotate(-90deg); }

.client-face-map__detail { background: #fff; }
.client-face-map__form-layout { display: grid; grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr); max-width: 1050px; margin: 0 auto; overflow: hidden; border: 1px solid var(--client-line); border-radius: 20px; background: #fff; box-shadow: 0 20px 55px rgba(27, 27, 31, .07); }
.client-face-map__form-aside { position: relative; min-height: 590px; overflow: hidden; background: #372f32; color: #fff; }
.client-face-map__form-aside::after { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(27, 27, 31, .06), rgba(27, 27, 31, .72)); content: ''; }
.client-face-map__form-aside img { width: 100%; height: 100%; object-fit: cover; }
.client-face-map__form-aside > div { position: absolute; z-index: 1; right: 26px; bottom: 30px; left: 26px; }
.client-face-map__form-aside p { margin: 0 0 9px; color: #ffd8df; font-size: 11px; font-weight: 800; letter-spacing: .11em; }
.client-face-map__form-aside h2 { margin: 0; color: #fff; font-size: clamp(26px, 3vw, 34px); letter-spacing: -.05em; line-height: 1.12; }
.client-face-map__form-aside span { display: block; margin-top: 13px; color: rgba(255, 255, 255, .82); font-size: 13px; line-height: 1.55; }
.client-face-map__form-card { min-width: 0; padding: clamp(26px, 5vw, 50px); }
.client-face-map__detail-head { max-width: none; margin: 0 0 23px; text-align: left; }
.client-face-map__content { max-width: none; }

/* The stored page is legacy WordPress markup. These selectors reshape it
   without changing its HTML, CMS ownership or inline-editor contract. */
.client-face-map__content .section,
.client-face-map__content .section-content,
.client-face-map__content .banner,
.client-face-map__content .banner-inner,
.client-face-map__content .banner-layers,
.client-face-map__content .text-box,
.client-face-map__content .text-box-content,
.client-face-map__content .text-inner { position: static !important; width: auto !important; height: auto !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; transform: none !important; }
.client-face-map__content .banner-bg,
.client-face-map__content .banner-link,
.client-face-map__content .section-bg,
.client-face-map__content > p:empty { display: none !important; }
.client-face-map__content .wpcf7 { margin: 0; }
.client-face-map__content .hidden-fields-container { display: none; }
.client-face-map__content .form-da { display: grid; gap: 15px; }
.client-face-map__content .form-data-header { padding-top: 17px; border-top: 1px solid var(--client-line); }
.client-face-map__content .form-data-header:first-child { padding-top: 0; border-top: 0; }
.client-face-map__content .form-data-header h3 { margin: 0; color: #1b1b1f; font-size: 16px; }
.client-face-map__content .form-data-header p { margin: 6px 0 0; color: var(--client-muted); font-size: 12px; line-height: 1.55; }
.client-face-map__content .form-data-header b { color: #b3195c; }
.client-face-map__content .form-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.client-face-map__content .form-group,
.client-face-map__content .form-group p { min-width: 0; margin: 0; }
.client-face-map__content .wpcf7-form-control-wrap { display: block; }
.client-face-map__content .input_tv,
.client-face-map__content .select_da,
.client-face-map__content .select_drl { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--client-line); border-radius: 10px; background: #fcfbfa; color: #1b1b1f; font: inherit; font-size: 13px; }
.client-face-map__content .input_tv:focus,
.client-face-map__content .select_da:focus,
.client-face-map__content .select_drl:focus { outline: 3px solid rgba(179, 25, 92, .14); border-color: #b3195c; }
.client-face-map__content .form-body + .form-data-header { margin-top: 4px; }
.client-face-map__content .btn_tv { min-width: 100%; min-height: 48px; padding: 12px 18px; border: 0; border-radius: 999px; background: #b3195c; color: #fff; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.client-face-map__content .btn_tv:hover { background: #8f174b; }
.client-face-map__content .wpcf7-response-output { margin: 0; font-size: 12px; }

@media (max-width: 900px) {
    .client-face-map__consultation { grid-template-columns: minmax(220px, .85fr) minmax(260px, 330px); grid-template-areas: "intro portrait" "journey journey"; }
    .client-face-map__intro { grid-area: intro; }
    .client-face-map__portrait { grid-area: portrait; width: auto; }
    .client-face-map__journey { grid-area: journey; grid-template-columns: 25px 1fr 25px 1fr; padding: 19px 0 0; border-top: 1px solid #ded7d2; border-left: 0; }
    .client-face-map__journey a { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
    .client-face-map__head { margin-bottom: 30px; }
    .client-face-map__consultation { grid-template-columns: 1fr; grid-template-areas: "portrait" "intro" "journey"; max-width: 420px; }
    .client-face-map__portrait { width: min(100%, 310px); justify-self: center; }
    .client-face-map__intro { text-align: center; }
    .client-face-map__intro > p:not(.client-face-map__intro-kicker) { margin-right: auto; margin-left: auto; }
    .client-face-map__zone { text-align: left; }
    .client-face-map__journey { grid-template-columns: 25px 1fr; }
    .client-face-map__form-layout { grid-template-columns: 1fr; border-radius: 16px; }
    .client-face-map__form-aside { min-height: 260px; }
    .client-face-map__form-aside > div { right: 20px; bottom: 22px; left: 20px; }
    .client-face-map__form-aside h2 { font-size: 26px; }
    .client-face-map__form-card { padding: 26px 19px; }
}

@media (max-width: 440px) {
    .client-face-map__content .form-body { grid-template-columns: 1fr; }
}