/* Crystal Clear-style hero (title video mask) for additional page */
:root{
  --cc-font-display:"Anton",Impact,Haettenschweiler,sans-serif;
}
.hero--crystal-clear{
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
}
.hero--crystal-clear .hero__content--brand{
  max-width:min(100%,52rem);
  width:100%;
  padding-top:clamp(1rem,2.5vw,1.5rem);
  margin-top:auto;
}
.hero--crystal-clear .hero__lead{
  max-width:38ch;
}

.title-outline{
  position:relative;
  display:block;
  width:100%;
  max-width:100%;
  margin:0 0 .85rem;
  padding:0 clamp(.5rem,1.5vw,1rem);
  overflow:hidden;
  text-align:center;
  font-family:var(--cc-font-display);
  font-weight:400;
  line-height:1;
  --title-letter-stroke:rgba(34,34,34,.42);
  pointer-events:none;
}
.title-outline:after{display:none}
.title-outline__canvas{
  display:none;
  width:100%;
  height:auto;
  vertical-align:top;
  pointer-events:none;
}
.title-outline.is-video .title-outline__canvas{display:block}
.title-outline__decoder{
  position:absolute;
  left:0;
  top:0;
  width:180px;
  height:100px;
  opacity:0.02;
  pointer-events:none;
  z-index:-1;
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
}
.title-outline__decoder::-webkit-media-controls,
.title-outline__decoder::-webkit-media-controls-start-playback-button{
  display:none!important;
  -webkit-appearance:none!important;
  opacity:0!important;
}
.title-outline__text{
  display:block;
  width:100%;
  white-space:pre-line;
  font-family:var(--cc-font-display);
  font-size:clamp(2.4rem,11vw,9.5rem);
  letter-spacing:.02em;
  font-weight:400;
  line-height:1;
  paint-order:stroke fill;
}
.title-outline.is-video .title-outline__text{
  position:absolute;
  inset:0;
  opacity:0!important;
  pointer-events:none;
}
.title-outline--bleed{
  width:72%;
  max-width:72%;
  margin-left:auto;
  margin-right:auto;
  padding-left:clamp(.85rem,2.5vw,1.5rem);
  padding-right:clamp(.85rem,2.5vw,1.5rem);
  box-sizing:border-box;
  align-self:center;
  text-align:center;
}
.hero .title-outline{
  position:relative;
  z-index:2;
  margin-top:clamp(1rem,3vw,1.75rem);
  margin-bottom:1rem;
  margin-left:auto;
  margin-right:auto;
  padding-left:clamp(.5rem,1.25vw,.85rem);
  padding-right:clamp(.5rem,1.25vw,.85rem);
  min-height:clamp(5.5rem,20vw,14rem);
  color:#fff;
  text-align:center;
  --title-letter-stroke:rgba(255,255,255,.55);
}
.hero--photo-fill .title-outline{
  color:#fff;
  --title-letter-stroke:rgba(0,0,0,.78);
}
.hero--bg-grey .title-outline{
  --title-letter-stroke:rgba(34,34,34,.38);
}
.hero .title-outline__text{font-size:clamp(2.8rem,12vw,12rem);text-align:center;line-height:1}
.hero--photo-fill .title-outline:not(.is-video) .title-outline__text{
  background-color:#c4a48a;
  background-image:url("../images/gallery/treatment-face.png");
  background-size:cover;
  background-position:68% 30%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
.hero .title-outline__canvas{margin:0 auto;width:100%}
@media (min-width:900px){
  .hero .title-outline{min-height:clamp(7rem,18vw,15rem)}
  .hero .title-outline__text{font-size:clamp(4rem,11vw,14rem)}
}
@media (min-width:1400px){
  .hero .title-outline__text{font-size:clamp(5rem,10.5vw,16rem)}
}
@media (prefers-reduced-motion:reduce){
  .title-outline.is-static .title-outline__text{
    position:static;opacity:1;pointer-events:auto;
  }
}