/* Figma node 45:645 proportional layout. */
.facial-areas-page .fa-directions{min-height:clamp(820px,68.96vw,1324px);transform:none!important;opacity:1!important}
.facial-areas-page .fa-hero-copy>span{align-self:flex-start;max-width:100%;white-space:normal}
.facial-areas-page .fa-hero h1{font-size:clamp(48px,3.9vw,60px)!important;line-height:1.12!important}
@media(min-width:901px) and (max-width:1600px){
  .facial-areas-page .fa-hero{height:800px}
}
/* Desktop: copy vertically centered in hero height */
@media(min-width:761px){
  .facial-areas-page .fa-hero{
    align-items:center;
  }
  .facial-areas-page .fa-hero-copy{
    align-self:center;
    margin-block:auto;
    padding-top:0;
    padding-bottom:0;
  }
  .facial-areas-page .fa-hero-image{
    align-self:stretch;
  }
}
.facial-areas-page .fa-directions h2{font-size:clamp(38px,3.385vw,65px)}
.facial-areas-page .fa-treatment-note{padding:120px 24px;background:#fdfbf7}
.facial-areas-page .fa-treatment-note-inner{display:grid;grid-template-columns:minmax(0,480px) minmax(0,1fr);gap:70px;align-items:center;width:min(1250px,100%);margin:auto}
.facial-areas-page .fa-treatment-note-inner>img{display:block;width:100%;aspect-ratio:1.2;object-fit:cover;border-radius:24px}
.facial-areas-page .fa-treatment-note-copy{max-width:680px;color:#6b615b}
.facial-areas-page .fa-treatment-note-number{display:block;margin-bottom:10px;color:#d5a1a3;font:700 52px/1 Georgia,serif}
.facial-areas-page .fa-treatment-note-kicker{margin:0 0 8px;color:#d68c91;font-size:16px;font-weight:700}
.facial-areas-page .fa-treatment-note h2{margin:0 0 26px;color:#302f2f;font-size:clamp(30px,2.8vw,48px);line-height:1.24;letter-spacing:-.045em}
.facial-areas-page .fa-treatment-note-copy>p:last-child{margin:0;font-size:20px;line-height:1.8;letter-spacing:-.025em}
.facial-areas-page .fa-treatment-note strong{color:#3d332f;font-weight:700}
.facial-areas-page .fa-face-map{width:min(1450px,100%);height:clamp(760px,66vw,1040px)}
.facial-areas-page .fa-face-map>img{left:50%;bottom:0;width:min(1026px,66vw);height:auto;aspect-ratio:1/1;object-fit:contain}
.facial-areas-page .fa-labels{top:25%;width:18%;gap:clamp(4px,1.75vw,34px);font-size:clamp(17px,1.25vw,24px)}
.facial-areas-page .fa-labels.left{left:0}
.facial-areas-page .fa-labels.right{right:0}
.facial-areas-page .fa-area-pin{
  min-height:clamp(42px,3.65vw,70px);
  line-height:clamp(42px,3.65vw,70px);
  text-align:center;
  border-radius:999px;
  transition:color .2s ease,background-color .2s ease,border-color .2s ease,box-shadow .2s ease;
  -webkit-tap-highlight-color:rgba(214,140,145,.28);
}
.facial-areas-page .fa-area-pin:hover,
.facial-areas-page .fa-area-pin:focus-visible,
.facial-areas-page .fa-area-pin:active,
.facial-areas-page .fa-area-pin[aria-expanded="true"]{
  color:#d68c91;
  font-weight:700;
  background:rgba(214,140,145,.14);
  box-shadow:0 0 0 1px rgba(214,140,145,.35);
  outline:none;
}
.facial-areas-page .fa-labels.left .fa-area-pin:after,.facial-areas-page .fa-labels.right .fa-area-pin:before{width:clamp(100px,18vw,350px)}
@media(max-width:1100px) and (min-width:761px){.facial-areas-page .fa-directions{padding-top:100px}.facial-areas-page .fa-face-map{height:62vw}.facial-areas-page .fa-face-map>img{width:58vw}.facial-areas-page .fa-labels{top:24%;width:22%;font-size:17px}.facial-areas-page .fa-labels.left{left:2%}.facial-areas-page .fa-labels.right{right:0}.facial-areas-page .fa-labels.left .fa-area-pin:after,.facial-areas-page .fa-labels.right .fa-area-pin:before{width:18vw}}
@media(max-width:900px){
  .facial-areas-page .fa-hero{width:100%;height:auto;min-height:0;margin:92px 0 0;border-radius:0;display:flex;flex-direction:column}
  .facial-areas-page .fa-hero-copy{order:1;width:auto;max-width:none;margin:0;padding:64px 36px 38px}
  .facial-areas-page .fa-hero h1{font-size:clamp(42px,7vw,54px)!important}
  .facial-areas-page .fa-hero-image{order:2;height:520px;overflow:hidden;position:relative;background:#f6e1db}
  .facial-areas-page .fa-hero-image:before,
  .facial-areas-page .fa-hero-image:after{display:none!important}
  .facial-areas-page .fa-hero-image picture{display:block;width:100%;height:100%}
  /* Mobile crop already has face centered — just fill the frame */
  .facial-areas-page .fa-hero-image img{
    position:absolute!important;
    inset:0!important;
    left:0!important;
    right:0!important;
    top:0!important;
    bottom:0!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    margin:0!important;
    transform:none!important;
    object-fit:cover!important;
    object-position:50% 18%!important;
  }
}
@media(max-width:760px){
  .facial-areas-page .fa-hero{margin-top:68px}
  .facial-areas-page .fa-hero-copy{padding:56px 20px 28px}
  .facial-areas-page .fa-hero h1{font-size:38px!important;line-height:1.14!important}
  .facial-areas-page .fa-hero-image{height:440px}
  .facial-areas-page .fa-directions{min-height:0;padding:72px 14px 0}
  .facial-areas-page .fa-directions h2{max-width:340px;margin:0 auto;font-size:32px;line-height:1.22}
  .facial-areas-page .fa-treatment-note{padding:76px 20px}
  .facial-areas-page .fa-treatment-note-inner{grid-template-columns:1fr;gap:26px}
  .facial-areas-page .fa-treatment-note-inner>img{aspect-ratio:1.4;border-radius:18px}
  .facial-areas-page .fa-treatment-note-number{font-size:40px}
  .facial-areas-page .fa-treatment-note-kicker{font-size:14px}
  .facial-areas-page .fa-treatment-note h2{margin-bottom:18px;font-size:30px}
  .facial-areas-page .fa-treatment-note-copy>p:last-child{font-size:16px;line-height:1.7}
  .facial-areas-page .fa-face-map{height:500px;margin-top:26px;padding:0;overflow:hidden}
  .facial-areas-page .fa-face-map>img{position:absolute;left:50%;bottom:-6px;width:510px;height:auto;max-width:none;transform:translateX(-50%)}
  .facial-areas-page .fa-labels{display:grid;z-index:3;top:86px;width:116px;gap:44px;font-size:12px;font-weight:700;color:#3d332f}
  .facial-areas-page .fa-labels.left{left:0;text-align:left}
  .facial-areas-page .fa-labels.right{right:0;text-align:right}
  .facial-areas-page .fa-area-pin{display:flex;align-items:center;justify-content:center;min-height:34px;padding:7px 9px;line-height:1.25;border:1px solid rgba(214,140,145,.42);border-radius:999px;background:rgba(255,255,255,.9);box-shadow:0 4px 12px rgba(99,63,67,.08);text-align:center}
  .facial-areas-page .fa-area-pin:hover,
  .facial-areas-page .fa-area-pin:focus-visible,
  .facial-areas-page .fa-area-pin:active,
  .facial-areas-page .fa-area-pin[aria-expanded="true"]{
    color:#fff;
    font-weight:700;
    border-color:#d68c91;
    background:#d68c91;
    box-shadow:0 6px 16px rgba(214,140,145,.35);
  }
  .facial-areas-page .fa-labels.left .fa-area-pin:after,.facial-areas-page .fa-labels.right .fa-area-pin:before{width:22px;border-color:#d68c91}
  .facial-areas-page .fa-labels.left .fa-area-pin:after{left:calc(100% + 2px)}
  .facial-areas-page .fa-labels.right .fa-area-pin:before{right:calc(100% + 2px)}
  .facial-areas-page .fa-cards{-ms-overflow-style:none;scrollbar-width:none}
  .facial-areas-page .fa-cards::-webkit-scrollbar{display:none;width:0;height:0}
  .facial-areas-page .fa-area-popup{position:fixed;left:16px;right:16px;top:auto;bottom:92px;width:auto;transform:none}
  .facial-areas-page .fa-guides{padding:72px 20px}
  .facial-areas-page .fa-guide-grid{grid-template-columns:1fr}
}
.facial-areas-page .fa-area-popup{position:absolute;z-index:6;left:50%;top:12%;width:min(440px,78%);transform:translateX(-50%);padding:22px 48px 22px 24px;border-radius:20px;background:#f5efe8;color:#3d332f;box-shadow:0 20px 50px rgba(64,47,52,.16)}
.facial-areas-page .fa-area-popup[hidden]{display:none!important}
.facial-areas-page .fa-area-popup-kicker{margin:0 0 6px;color:#d68c91;font-size:13px;font-weight:700;letter-spacing:.08em}
.facial-areas-page .fa-area-popup strong{display:block;margin-bottom:8px;font-size:22px}
.facial-areas-page .fa-area-popup p:last-of-type{margin:0 0 14px;line-height:1.65;font-size:15px}
.facial-areas-page .fa-area-popup a{color:#d68c91;font-weight:700}
.facial-areas-page .fa-area-popup-close{position:absolute;top:12px;right:12px;width:36px;height:36px;border:0;border-radius:50%;background:#f6e1db;font-size:22px;cursor:pointer}
.facial-areas-page .fa-guides{padding:100px max(7vw,calc((100vw - 1500px)/2)) 80px;background:#f5efe8}
.facial-areas-page .fa-guides-head{max-width:760px;margin:0 auto 48px;text-align:center}
.facial-areas-page .fa-guides-head p{margin:0;color:#d68c91;font-weight:700;letter-spacing:.08em}
.facial-areas-page .fa-guides-head h2{margin:12px 0 16px;font-size:clamp(32px,3vw,50px)}
.facial-areas-page .fa-guides-head span{color:#6b6461;line-height:1.7}
.facial-areas-page .fa-guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.facial-areas-page .fa-guide-grid article{padding:28px 30px;border:1px solid #f0ddd8;border-radius:18px;background:#fdfbf7}
.facial-areas-page .fa-guide-grid article:target{border-color:#d68c91;box-shadow:0 0 0 3px rgba(214,140,145,.18)}
.facial-areas-page .fa-guide-grid h3{margin:0 0 10px;font-size:22px}
.facial-areas-page .fa-guide-grid p{margin:0;color:#5a504e;line-height:1.7}
@media(max-width:760px){
  .facial-areas-page .fa-area-popup{position:fixed;left:16px;right:16px;top:auto;bottom:92px;width:auto;transform:none}
  .facial-areas-page .fa-guides{padding:72px 20px}
  .facial-areas-page .fa-guide-grid{grid-template-columns:1fr}
}

/* Figma hero checklist: one grouped panel with divided rows. */
.facial-areas-page .fa-hero ul{
  gap:0;
  padding:0 20px;
  overflow:hidden;
  border:1px solid rgba(214,140,145,.22);
  border-radius:16px;
  background:rgba(255,255,255,.72);
}
.facial-areas-page .fa-hero li{
  min-height:50px;
  border:0;
  border-bottom:1px solid rgba(214,140,145,.18);
  border-radius:0;
  background:transparent;
}
.facial-areas-page .fa-hero li:last-child{border-bottom:0}
/* A distinct anatomical photo crop for each face-map popup. */
.facial-areas-page .fa-area-popup{width:min(530px,86%);padding:0 24px 22px;overflow:hidden;border:1px solid #f2dddd;border-radius:22px}
.facial-areas-page .fa-area-popup-photo{height:155px;margin:0 -24px 20px;overflow:hidden;background:#fff4f7}
.facial-areas-page .fa-area-popup-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.facial-areas-page .fa-area-popup[data-area="forehead"] .fa-area-popup-photo img{object-position:center 35%}
.facial-areas-page .fa-area-popup[data-area="jaw"] .fa-area-popup-photo img{object-position:center 75%}
.facial-areas-page .fa-area-popup .fa-area-popup-close{z-index:2;top:12px;right:12px;background:rgba(255,245,242,.92)}
@media(max-width:760px){
  .facial-areas-page .fa-area-popup{position:fixed;left:16px;right:16px;top:auto;bottom:92px;width:auto;max-height:calc(100dvh - 120px);transform:none;overflow-y:auto}
  .facial-areas-page .fa-area-popup-photo{height:125px}
}

/* Supplied artwork for the related treatment links. */
.facial-areas-page .fa-related{
  background-color:#4A413C;
  background-image:url("assets/figma-facial-areas/related-background-beautiful.jpg?v=20260923");
  background-position:center bottom;
  background-repeat:no-repeat;
  background-size:cover;
  color:#C9BEB4;
}
.facial-areas-page .fa-related h2,
.facial-areas-page .fa-related h2 strong{
  color:#F5EFE8!important;
}
.facial-areas-page .fa-related h2 span{
  color:#C9BEB4!important;
  font-weight:400;
}
.facial-areas-page .fa-cards a{
  border-color:rgba(245,239,232,.18);
  background:#3a312d;
  color:#C2B4A6;
}
.facial-areas-page .fa-cards b{
  color:#C2B4A6;
}
.facial-areas-page .fa-cards i{
  background:#df9298;
  color:#fff;
}
@media(max-width:760px){
  .facial-areas-page .fa-related{background-size:cover;background-position:center bottom}
}