/* GetLayers effects for LVL UP RX — see gl-effects.js */
/* Cream ring: trails the native cursor; the faint dark edge keeps it visible on light sections */
.gl-ring-wrap{position:fixed;left:0;top:0;width:0;height:0;z-index:10002;pointer-events:none;opacity:0;transition:opacity .35s ease;will-change:transform}
.gl-ring-wrap.is-in{opacity:1}
.gl-ring-wrap.is-typing{opacity:0}
.gl-ring{position:absolute;left:-17px;top:-17px;width:34px;height:34px;box-sizing:border-box;border-radius:50%;border:1px solid rgba(245,240,230,.72);box-shadow:0 0 0 1px rgba(15,20,11,.34);transition:transform .45s cubic-bezier(.22,1,.36,1),border-color .3s ease,background-color .3s ease}
.gl-ring-wrap.is-live .gl-ring{transform:scale(1.6);border-color:rgba(245,240,230,.95);background-color:rgba(245,240,230,.06)}
.gl-ring-wrap.is-down .gl-ring{transform:scale(.85)}
.gl-ring-wrap.is-live.is-down .gl-ring{transform:scale(1.35)}

/* Fine grain over everything, beneath the cursor */
.gl-grain{position:fixed;inset:0;width:100%;height:100%;z-index:10001;pointer-events:none;mix-blend-mode:overlay;opacity:.1}

/* Section scenes */
.gl-scene{display:block;border:0;pointer-events:none}

/* Philosophy close: the LVL UP mark on Holographic Cloth ("Black Gloss"), beside the closing line */
.gl-scene--live{pointer-events:auto}
.gl-cloth-close{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(32px,5vw,80px);text-align:left;padding-left:clamp(24px,7vw,110px);padding-right:clamp(24px,7vw,110px)}
.gl-cloth-close .gl-cloth-copy h2,.gl-cloth-close .gl-cloth-copy p{margin-left:0;margin-right:0}
.gl-cloth-stage{position:relative;margin:0;height:min(76svh,720px);border:1px solid rgba(196,207,183,.16);overflow:hidden}
.gl-cloth-stage .gl-scene{position:absolute;inset:0;width:100%;height:100%}
.gl-cloth-stage figcaption{position:absolute;left:16px;bottom:14px;font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:rgba(241,238,230,.45);pointer-events:none}
@media (max-width:860px){
  .gl-cloth-close{grid-template-columns:1fr;text-align:center}
  .gl-cloth-close .gl-cloth-copy h2,.gl-cloth-close .gl-cloth-copy p{margin-left:auto;margin-right:auto}
  .gl-cloth-stage{order:-1;height:min(110vw,560px)}
}

/* Quality hero: the campaign film behind fluted glass ("Refract · Fluted"), sunk into the green so the copy leads */
#lab-page .quality-section .gl-refract{position:absolute;inset:0;z-index:-3;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.6s ease;mix-blend-mode:overlay;filter:grayscale(1) contrast(1.15)}
#lab-page .quality-section.gl-refract-on .gl-refract{opacity:.38}

/* Partners join + Contact: Liquid Colour · Silk ("Olive", re-dressed to the brand ramp) behind the copy */
[data-gl-silk]{position:relative;isolation:isolate}
[data-gl-silk] > .gl-silk{position:absolute !important;inset:0;z-index:-1;opacity:0;transition:opacity 1.6s ease;pointer-events:none}
[data-gl-silk] > .gl-silk.on{opacity:1}
[data-gl-silk] > .gl-silk::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(9,12,8,.6),rgba(9,12,8,.18) 62%,rgba(9,12,8,.42))}
/* Contact: one sheet of silk across the whole section, falling into deep shade under the form (replaces the rock panel) */
#contact-page .con-layout[data-gl-silk]{background:#0f140b}
#contact-page .con-layout > .gl-silk::after{background:linear-gradient(90deg,rgba(9,12,8,.5) 0,rgba(9,12,8,.22) 34%,rgba(9,12,8,.66) 56%,rgba(9,12,8,.84) 100%)}
#contact-page .con-l,#contact-page .con-r{background:none;padding:120px clamp(28px,5vw,72px) 76px;display:flex;flex-direction:column;justify-content:center}
#contact-page .con-r{border-left:1px solid rgba(232,228,207,.13);align-items:center}
#contact-page .con-r > *{width:100%;max-width:500px}
#contact-page .con-l .s-label,#contact-page .cd-lbl{color:rgba(232,228,207,.72)}
#contact-page .con-sub{color:rgba(241,238,230,.82)}
#contact-page .con-details{border-top-color:rgba(232,228,207,.18)}
#contact-page .cd-lbl{letter-spacing:.14em}
#contact-page .cd-val{letter-spacing:.06em}
#contact-page .con-r .s-label{color:rgba(205,216,190,.82);font-size:9px}
#contact-page .con-form-h2{text-wrap:balance}
#contact-page .con-r .fl{color:rgba(245,242,236,.72);font-size:9px}
#contact-page .con-r .fi,#contact-page .con-r .fs,#contact-page .con-r .ft{padding:11px 0 12px;border-bottom-color:rgba(245,242,236,.26)}
#contact-page .con-r .fg{margin-bottom:20px}
#contact-page .con-r .fs:has(option[value=""]:checked){color:rgba(245,242,236,.5)}
#contact-page .con-r .fi::placeholder,#contact-page .con-r .ft::placeholder{color:rgba(245,242,236,.5)}
#contact-page .con-r .order-legal{color:rgba(245,242,236,.55);font-size:9px}
@media (max-width:900px){
  #contact-page .con-l{padding-top:110px;padding-bottom:48px}
  #contact-page .con-r{padding-top:48px;border-left:0;border-top:1px solid rgba(232,228,207,.13)}
  #contact-page .con-layout > .gl-silk::after{background:linear-gradient(180deg,rgba(9,12,8,.45) 0,rgba(9,12,8,.3) 30%,rgba(9,12,8,.72) 50%,rgba(9,12,8,.86) 100%)}
}
/* touch screens: the cloth is shown, not grabbed, so swiping over it still scrolls the page */
@media (hover:none),(pointer:coarse){.gl-cloth-stage .gl-scene--live{pointer-events:none}.gl-cloth-stage figcaption{display:none}}