/* CSS ROLE: page-specific legacy CSS for services.html.
   Generated during CSS architecture split from darlings-pages.css.
   Keep only selectors scoped to body.page-services. */

body.page-services .stage {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    touch-action: none;
}

body.page-services .fade-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 42%;
    background: linear-gradient(to bottom,#f0eeea 30%,transparent 100%);
    z-index: 20;
    pointer-events: none;
}

body.page-services .fade-bot {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 42%;
    background: linear-gradient(to top,#f0eeea 30%,transparent 100%);
    z-index: 20;
    pointer-events: none;
}

body.page-services .tick {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: min(500px,88vw);
    z-index: 15;
    pointer-events: none;
}

body.page-services .tick::before,
body.page-services .tick::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(155,126,88,.32);
}

body.page-services .tick::before {
    top: -52px;
}

body.page-services .tick::after {
    top: 52px;
}

body.page-services .reel {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

body.page-services .svc {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 104px;
    width: 100%;
    cursor: pointer;
    position: absolute;
    left: 0;
    right: 0;
    text-decoration: none;
    color: inherit;
}

body.page-services .laser-label br {
    display: none;
}

@media (max-width: 640px) {
  body.page-services .laser-label br {
          display: block;
      }
}

@media (max-width: 640px) {
  body.page-services .laser-label {
          white-space: normal;
          line-height: 1.25;
          text-align: center;
      }
}

body.page-services .svc span {
    font-family: "EB Garamond",serif;
    font-weight: 400;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    line-height: 1;
    pointer-events: none;
    display: block;
}

body.page-services .hint {
    position: fixed;
    bottom: calc(64px + clamp(20px, 3vw, 28px));
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: opacity .6s;
    pointer-events: none;
}

@media (max-width: 640px) {
  body.page-services .hint {
          display: none;
      }
}

body.page-services .hint.gone {
    opacity: 0;
}

body.page-services .hint p {
    font-size: 9px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #a89b8c;
}

body.page-services .hint svg {
    animation: ab 2s ease-in-out infinite;
}

body.page-services .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

body.page-services .u-services-001 {
    font-size: 43px;
    opacity: 0.967;
    filter: none;
    color: rgb(35, 31, 26);
    letter-spacing: 4.9px;
}

body.page-services .u-services-002 {
    font-size: 44px;
    opacity: 0.993;
    filter: none;
    color: rgb(29, 25, 20);
    letter-spacing: 5px;
}


@keyframes ab {0%,
100% {
        transform: translateY(0);
    }50% {
        transform: translateY(6px);
    }
}