/* Loop 9.7 media direction: beauty lookbook scale with a functional booking spine. */
.appointment-hero{grid-template-columns:minmax(320px,.78fr) minmax(520px,1.22fr);gap:clamp(42px,6vw,96px);padding-top:44px;padding-bottom:76px;align-items:center}
.appointment-hero-copy{position:relative;z-index:1}
.appointment-hero-copy h1{max-width:9ch;font-size:clamp(58px,5.7vw,88px);line-height:.94;letter-spacing:-.065em;text-wrap:balance}
.appointment-hero-copy>p:not(.eyebrow):not(.breadcrumb){max-width:38ch;font-size:16px;line-height:1.65;text-wrap:pretty}
.appointment-photo{height:clamp(500px,47vw,650px);border-radius:0;background:#eee9e5;overflow:hidden}
.appointment-photo .photo,.appointment-photo img{display:block;width:100%;height:100%;margin:0}
.appointment-photo img{object-fit:cover;animation:loop97-media-in 420ms cubic-bezier(.2,.7,.2,1) both}
.appointment-photo-label{display:none!important}
.appointment-photo .photo-ongles img{object-position:50% 48%}
.appointment-photo .photo-coiffure{background:linear-gradient(180deg,#1a2922 0%,#2a3936 52%,#263936 100%)}
.appointment-photo .photo-coiffure img{object-fit:contain;object-position:50% 50%;scale:1}
.appointment-photo .photo-regard img{object-position:50% 46%}
.appointment-photo .photo-visage-corps img{object-position:50% 42%}
.appointment-photo .photo-epilation img{object-position:52% 50%}
.appointment-photo .photo-head-spa img{object-position:50% 44%}

/* Category art is context, not treatment-result proof. Do not repeat it on every detail. */
.appointment-detail .detail-image{display:none}
.appointment-detail .detail-stage{grid-template-columns:minmax(0,1.18fr) minmax(300px,.82fr);grid-template-rows:auto auto;min-height:0;gap:36px clamp(54px,7vw,110px)}
.appointment-detail .detail-title{grid-column:1;grid-row:1}
.appointment-detail .detail-facts{grid-column:1;grid-row:2}
.appointment-detail .detail-main-action{grid-column:2;grid-row:1;align-self:end;margin:0;min-height:52px;justify-content:space-between}
.appointment-detail .detail-conditions{grid-column:2;grid-row:2;border-top:1px solid var(--line);padding-top:24px}

/* The directory remains wayfinding, but its imagery reads as a deliberate visual index. */
.directory-list>a{grid-template-columns:35px 164px minmax(0,1fr) 30px;gap:clamp(24px,3vw,44px);padding:18px 0}
.directory-list .photo{height:128px;background:#eee9e5}
.directory-list .photo img{object-fit:cover}
.directory-list h2{font-size:clamp(32px,3vw,44px);letter-spacing:-.045em}

/* Keep the approved real institute photograph uninterrupted. */
.studio-process .photo{border-radius:0;overflow:hidden}
.studio-process .photo img{display:block;width:100%;height:100%;object-fit:contain}

@keyframes loop97-media-in{from{transform:translateY(10px) scale(1.01)}to{transform:none}}

@media(max-width:1000px) and (min-width:761px){
  .appointment-hero{grid-template-columns:minmax(280px,.9fr) minmax(400px,1.1fr);gap:38px}
  .appointment-hero-copy h1{font-size:clamp(52px,6.6vw,70px)}
  .appointment-photo{height:520px}
  .appointment-detail .detail-stage{gap:32px 48px}
}

@media(max-width:760px){
  .appointment-hero{display:flex;flex-direction:column;gap:22px;padding-top:24px;padding-bottom:42px;align-items:stretch}
  .appointment-hero-copy{display:block;width:100%}
  .appointment-hero-copy .breadcrumb{margin:0 0 24px;font-size:10px}
  .appointment-hero-copy .eyebrow{display:block;font-size:9px;margin:0 0 12px}
  .appointment-hero-copy h1{max-width:10ch;font-size:clamp(43px,13.5vw,56px);line-height:.94;margin:0 0 18px}
  .appointment-hero-copy>p:not(.eyebrow):not(.breadcrumb){max-width:34ch;font-size:14px;line-height:1.55;margin:0}
  .appointment-next{display:none}
  .appointment-photo{order:2;width:calc(100% + 40px);height:clamp(270px,78vw,350px);margin:2px -20px 0;border-radius:0}
  .appointment-photo img{object-position:center}
  .appointment-photo:has(.photo-coiffure){height:auto;aspect-ratio:1065/1600}
  .appointment-photo .photo-coiffure img{object-fit:contain;object-position:50% 50%;scale:1}
  .appointment-photo .photo-regard img{object-position:50% 46%}
  .appointment-photo .photo-visage-corps img{object-position:50% 42%}
  .appointment-photo .photo-epilation img{object-position:52% 50%}
  .appointment-photo .photo-head-spa img{object-position:50% 43%}
  .appointment-detail .detail-stage{display:flex;min-height:0;gap:24px}
  .appointment-detail .detail-image{display:none}
  .appointment-detail .detail-main-action{order:3;width:100%;margin:0}
  .appointment-detail .detail-conditions{order:4;border-top:1px solid var(--line);padding-top:22px}
  .directory-list>a{grid-template-columns:18px 88px minmax(0,1fr) 18px;gap:12px;padding:14px 0}
  .directory-list .photo{height:102px}
  .directory-list h2{font-size:25px}
}

@media(prefers-reduced-motion:reduce){
  .appointment-photo img{animation:none}
}