/* Warm editorial backgrounds, loaded only by the homepage. */
.services-preview,
.results,
.testimonials,
.stats-bar{position:relative;isolation:isolate}
/* The bar keeps its designed dark cacao (var(--color-primary)). Its gold
   numbers and white-55% labels are built for a dark ground; a cream bar
   left the labels near-invisible. */
/* Labels were 4.21:1 on the cacao, under the 4.5 AA floor for small text.
   0.62 alpha lifts them to ~4.9:1 with no visible change in weight. */
.stats-bar__label{color:rgba(254,252,250,.62)}
.results-pile{border:1px solid #d8cbbb;background:#efe7dc}
.results-pile__hint{color:#775b3f;text-shadow:none}
.results h2,
.results .eyebrow,
.results__intro{text-shadow:none}
.testimonial-card{box-shadow:0 12px 28px -24px #59412b66;border:1px solid #e2d8cb;background:#fdfaf5}

/* A. Quiet cream makes the existing treatment panels and real photographs lead. */
.services-preview{background:transparent}
.services-preview .homepage-halos{display:none}
/* Warm light and cropped, fine-line halos frame both Why Haylo tabs. */
.why-wrapper{background:#483024;border-radius:0;isolation:isolate}
.why-wrapper::before{
  opacity:1;
  background:radial-gradient(ellipse at 0% 25%,#c49a6c45,transparent 48%),
    radial-gradient(ellipse at 100% 85%,#c49a6c38,transparent 45%),
    linear-gradient(120deg,transparent 25%,#21171038 65%,transparent);
}
.why-wrapper > .why-atmosphere{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.why-atmosphere::before,.why-atmosphere::after{
  content:'';position:absolute;width:680px;height:900px;border-radius:50%;
  border:1px solid #d6b48238;
  box-shadow:0 0 0 35px #d6b48209,0 0 0 36px #d6b48220,
    0 0 0 95px #d6b48205,0 0 0 96px #d6b48212;
}
.why-atmosphere::before{left:-490px;top:-250px;transform:rotate(32deg)}
.why-atmosphere::after{right:-500px;bottom:-380px;transform:rotate(32deg)}
.why-wrapper{--halo-left:490px;--halo-right:500px}
/* Armed by JS only: the default (including no JS) remains fully readable. */
.why-intro-ready .why-atmosphere::before{
  transform:translate(calc(var(--intro-width)/2 + var(--halo-left) - 340px),calc(var(--intro-height)/2 - 200px)) rotate(-24deg) scale(.22);
}
.why-intro-ready .why-atmosphere::after{
  transform:translate(calc(340px - var(--intro-width)/2 - var(--halo-right)),calc(70px - var(--intro-height)/2)) rotate(88deg) scale(.22);
}
.why-intro-ready > .why-intro,.why-intro-ready > .why-panel{opacity:0}
.why-intro-playing .why-atmosphere::before{animation:why-halo-open 3.8s cubic-bezier(.3,.65,.25,1) both}
.why-intro-playing .why-atmosphere::after{animation:why-halo-open 3.8s cubic-bezier(.3,.65,.25,1) .2s both}
.why-intro-playing > .why-intro{animation:why-copy-unveil 1.4s ease .8s both}
.why-intro-playing > .why-panel{animation:why-copy-unveil 1.5s ease 1.2s both}
/* Open past the resting size, then softly contract into the corner arcs. */
@keyframes why-halo-open{
  0%{opacity:.6}
  65%{transform:translate(0,0) rotate(39deg) scale(1.2);opacity:1;animation-timing-function:cubic-bezier(.25,.1,.25,1)}
  100%{transform:translate(0,0) rotate(32deg) scale(1);opacity:1}
}
@keyframes why-copy-unveil{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){
  .why-intro-ready .why-atmosphere::before,.why-intro-ready .why-atmosphere::after{animation:none;transform:rotate(32deg)}
  .why-intro-ready > .why-intro,.why-intro-ready > .why-panel{animation:none;opacity:1;translate:0 0}
}
@media(max-width:800px){
  .why-wrapper{--halo-left:620px;--halo-right:620px}
  .why-atmosphere{opacity:.65}
  .why-atmosphere::before{left:-620px}
  .why-atmosphere::after{right:-620px}
}
.results{background:#f7f4ee}
.testimonials{background:#ece3d7}

/* A+. Independent halo outlines behind treatments and before/after photos. */
.services-preview,.results{overflow:hidden}
.homepage-halos{display:block;position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.homepage-halos__ring{position:absolute;left:50%;top:52%;border:1px solid #a17d4542;border-radius:50%;transition:translate .9s cubic-bezier(.2,.65,.3,1)}
.homepage-halos__ring--one{width:1350px;height:690px;transform:translate(-50%,-50%) rotate(-19deg)}
.homepage-halos__ring--two{width:1180px;height:790px;transform:translate(-50%,-50%) rotate(19deg);border-color:#a17d4530}
.results .homepage-halos__ring{top:61%}
.results .homepage-halos__ring--one{width:1340px;height:710px}
.results .homepage-halos__ring--two{width:1200px;height:790px}
@media(max-width:900px){.homepage-halos__ring--one{width:900px;height:950px}.homepage-halos__ring--two{width:780px;height:1080px}}
@media(prefers-reduced-motion:reduce),(hover:none),(pointer:coarse),(max-width:900px){.homepage-halos__ring{transition:none;translate:0 0!important}}

/* ── Treatment cards: paired portraits behind the line art ──────────────
   The motif leads at rest and recedes on hover while the photographs come
   up. Note this inverts the base rule in styles.css, where the motif gets
   STRONGER on hover; here it has to give way to the image.

   Each panel shows two cells of assets/images/treatment-pairs.jpg (a 3x2
   grid of 512px cells) cropped by viewBox. The svg is a fixed pixel size,
   not a percentage, so a widening panel reveals MORE of the photograph
   instead of stretching or zooming it. */
.editorial-pair{position:absolute;inset:0;z-index:1;display:flex;opacity:.14;
  transition:opacity 1.1s ease;pointer-events:none}
.editorial-person{position:relative;width:50%;height:100%;overflow:hidden}
.editorial-person+.editorial-person{border-left:1px solid #f0d3a322}
.editorial-person svg{position:absolute;top:0;left:50%;width:520px;height:520px;
  max-width:none;transform:translateX(-50%)}
/* Scrim keeps the panel copy legible once a photograph is showing. */
.reveal-panel::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(#20140c38 0%,#21170e00 35%,#21170ed9 100%)}
.reveal-panel__motif{z-index:3;opacity:.75}
.reveal-panel__content{z-index:4}
.reveal-panel:is(:hover,:focus-within) .editorial-pair{opacity:1}
.reveal-panel:is(:hover,:focus-within) .reveal-panel__motif{opacity:.16}
/* No hover on touch, so the photographs sit a little more present at rest
   and the svg is sized to the 260px mobile panel. */
@media(max-width:800px){
  .editorial-pair{opacity:.5}
  .editorial-person svg{width:290px;height:290px}
}
@media(prefers-reduced-motion:reduce){.editorial-pair{transition:none}}