/* The patient sees the cases, then the specific treatments, then the evaluation. */
@property --procedure-light-x{syntax:'<percentage>';inherits:true;initial-value:14%}
@property --procedure-light-y{syntax:'<percentage>';inherits:true;initial-value:12%}
@property --procedure-counter-x{syntax:'<percentage>';inherits:true;initial-value:82%}
@property --procedure-counter-y{syntax:'<percentage>';inherits:true;initial-value:76%}
@property --procedure-hue{syntax:'<angle>';inherits:true;initial-value:-18deg}
@property --procedure-rim-angle{syntax:'<angle>';inherits:true;initial-value:-12deg}
.procedures.section-shell{background:#050505;color:var(--ivory);padding:88px 7vw;scroll-margin-top:30px}
.procedures-inner{max-width:1120px;margin:0 auto}
.procedures-header{margin-bottom:40px}
#procedures-title{font:400 var(--main-title-scale)/1.08 var(--display);letter-spacing:-.025em;text-wrap:balance;max-width:26ch;margin:0 0 24px}
.procedures-header p{max-width:68ch;color:#bbb8b1;font:400 16px/1.65 var(--body);margin:0}
.procedures .treatment-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start}
.procedure-glass-surface{position:relative;border:0;border-radius:20px;background:transparent;isolation:isolate;min-width:0;overflow:visible}
.procedure-glass-surface>h3{position:relative;z-index:1;margin:0;font-weight:400}
.procedures .treatment-trigger{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;width:100%;aspect-ratio:1;min-height:0;padding:24px;border:0;border-radius:20px;background:transparent;color:var(--ivory);text-align:center}
.procedures .treatment-icon{display:block;width:96px;height:96px;flex:0 0 96px;align-self:center;pointer-events:none}
.procedures .treatment-skin{overflow:visible}
.procedures .treatment-heading{display:block;min-height:60px;max-width:100%;font:400 22px/1.35 var(--body);letter-spacing:0;color:#fff;text-shadow:0 1px 2px #0009}
.procedures .treatment-heading>span:not(.faq-chevron){min-width:0}
.procedures .faq-chevron{position:absolute;left:calc(50% - 6px);bottom:18px;display:flex;align-items:center;justify-content:center;width:12px;height:16px;transform:none;transition:none;pointer-events:none}
.procedures .faq-chevron::before{content:'';width:7px;height:7px;border-top:1.25px solid currentColor;border-right:1.25px solid currentColor;transform:rotate(135deg)}
.procedures .treatment-panel{position:relative;z-index:1;overflow:hidden}
.procedures .treatment-panel[hidden]{display:none}
.procedures .faq-panel-inner{padding:0 28px 28px;color:#fff;font:400 16px/1.65 var(--body);text-shadow:0 1px 2px #0009}
.procedures ul{list-style:none;margin:0;padding:0}
.procedures li{margin:0;padding:10px 0;border-top:1px solid #eee9df19;overflow-wrap:break-word}
.procedures li:first-child{padding-top:16px}
.procedures li:last-child{padding-bottom:0}
.procedures .treatment-trigger:focus-visible{outline:2px solid var(--ivory);outline-offset:-6px}
.procedure-glass-surface>.control-glass{border-radius:20px;opacity:1;--glass-tint:.48;background:rgba(15,21,29,calc(var(--glass-tint,.48) * .17));box-shadow:0 16px 36px #0006,0 2px 8px #0003}
/* This is the same core/peripheral lens and thin optical rim as the menu. */
.procedure-glass-surface .control-glass__lens{-webkit-mask-image:var(--glass-core-mask);mask-image:var(--glass-core-mask);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-backdrop-filter:blur(2.4px) saturate(150%);backdrop-filter:blur(2.4px) saturate(150%)}
.procedure-glass-surface .control-glass__edge-lens{position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;-webkit-mask-image:var(--glass-edge-mask);mask-image:var(--glass-edge-mask);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-backdrop-filter:blur(.3px) saturate(150%);backdrop-filter:var(--glass-edge-lens,blur(.3px) saturate(150%))}
.procedure-glass-surface>.control-glass{animation:procedure-reflections var(--reflection-duration,24s) ease-in-out var(--reflection-delay,0s) infinite;animation-play-state:paused}
.procedures.has-visible-glass .procedure-glass-surface>.control-glass{animation-play-state:running}
.procedure-glass-surface:nth-child(1){--reflection-duration:23s;--reflection-delay:-3s}
.procedure-glass-surface:nth-child(2){--reflection-duration:29s;--reflection-delay:-13s}
.procedure-glass-surface:nth-child(3){--reflection-duration:19s;--reflection-delay:-9s}
.procedure-glass-surface>.control-glass:before{opacity:1;filter:saturate(165%) hue-rotate(var(--procedure-hue));background:conic-gradient(from calc(var(--glass-angle,135deg) + var(--procedure-rim-angle)),#ffffff12 0deg,rgb(var(--glass-violet,195 169 255) / .65) 35deg,#ffffffb8 72deg,rgb(var(--glass-cyan,148 224 231) / .62) 128deg,#ffffff16 161deg,#f8dfc261 206deg,rgb(var(--glass-violet,195 169 255) / .55) 260deg,#ffffffb8 308deg,#ffffff12 360deg)}
/* The bevel mask fades light inward instead of cutting it into a four-pixel strip. */
.procedure-glass-surface>.control-glass:after{padding:0;-webkit-mask:var(--procedure-reflection-mask,linear-gradient(transparent,transparent)) center/100% 100% no-repeat;mask:var(--procedure-reflection-mask,linear-gradient(transparent,transparent)) center/100% 100% no-repeat;-webkit-mask-composite:source-over;mask-composite:add;filter:saturate(165%) hue-rotate(var(--procedure-hue));background:radial-gradient(ellipse 70% 38% at var(--procedure-light-x) var(--procedure-light-y),rgb(var(--glass-violet,195 169 255) / .42),#ffffff24 30%,transparent 76%),radial-gradient(ellipse 50% 72% at var(--procedure-counter-x) var(--procedure-counter-y),rgb(var(--glass-cyan,148 224 231) / .40),#ffffff20 32%,transparent 78%),radial-gradient(ellipse 44% 58% at calc(100% - var(--procedure-light-x)) calc(100% - var(--procedure-counter-y)),#f9e5ca38,transparent 72%),radial-gradient(ellipse 75% 28% at calc(100% - var(--procedure-counter-x)) var(--procedure-counter-y),#ffffff38,transparent 74%)}
@keyframes procedure-reflections{
 0%,100%{--procedure-light-x:14%;--procedure-light-y:12%;--procedure-counter-x:82%;--procedure-counter-y:76%;--procedure-hue:-18deg;--procedure-rim-angle:-12deg}
 33%{--procedure-light-x:54%;--procedure-light-y:-4%;--procedure-counter-x:100%;--procedure-counter-y:26%;--procedure-hue:12deg;--procedure-rim-angle:35deg}
 67%{--procedure-light-x:100%;--procedure-light-y:46%;--procedure-counter-x:42%;--procedure-counter-y:108%;--procedure-hue:-7deg;--procedure-rim-angle:105deg}
}
.procedure-glass-surface:is(.is-opening,.is-closing)>.control-glass{will-change:width,height,left,top,border-radius}
.procedure-glass-surface:is(.is-opening,.is-closing) li{will-change:transform,opacity}
@media(hover:hover){.procedures .treatment-trigger:hover{color:var(--white)}.procedures .treatment-trigger:hover~.control-glass:before{filter:brightness(1.08)}}
@media(max-width:1000px){.procedures.section-shell{padding:76px 6vw}.procedures .treatment-grid{gap:16px}.procedures .treatment-trigger{padding:20px;gap:18px}.procedures .treatment-heading{font-size:20px}.procedures .faq-panel-inner{padding:0 20px 24px}}
@media(max-width:700px){
 .procedures.section-shell{padding:60px 6vw;scroll-margin-top:20px}
 .procedures-header{margin-bottom:28px}
 #procedures-title{margin-bottom:20px}
 .procedures .treatment-grid{grid-template-columns:minmax(0,1fr);gap:20px;max-width:360px;margin:0 auto}
 .procedures .treatment-trigger{padding:24px;gap:24px}
 .procedures .treatment-heading{font-size:20px}
 .procedures .faq-panel-inner{padding:0 24px 28px}
}
@media(prefers-reduced-motion:reduce){.procedure-glass-surface>.control-glass{animation:none}}
@media(forced-colors:active){.procedure-glass-surface{border:1px solid ButtonText;background:Canvas;color:CanvasText}.procedure-glass-surface>.control-glass{display:none}.procedures .treatment-trigger,.procedures .faq-panel-inner{color:CanvasText;text-shadow:none}}

/* Keep the mobile optical surface on one layer while its disclosure changes size. */
@media(max-width:700px){
 .procedure-glass-surface>.control-glass{transform:translateZ(0);backface-visibility:hidden}
 .procedure-glass-surface:is(.is-opening,.is-closing)>.control-glass{will-change:auto;animation-play-state:paused}
 .procedures.has-visible-glass .procedure-glass-surface:is(.is-opening,.is-closing)>.control-glass{animation-play-state:paused}
}