.opal-services{--service-white:#fff;--service-orange:#ff5d17;--service-row-ease:linear;box-sizing:border-box;color:var(--service-white);font-family:'Inter Tight',sans-serif}
.opal-services *{box-sizing:border-box}.opal-services a{color:inherit;text-decoration:none}.opal-services a:focus-visible{outline:2px solid var(--service-orange);outline-offset:5px}
.opal-service-section{background:#0a0a0a;padding:80px 40px}.opal-service-header{display:grid;grid-template-columns:27% 1fr;align-items:flex-start;gap:0;margin:0 0 48px}.opal-service-kicker{display:flex;gap:8px;align-items:center;padding-top:12px;font:500 14px/19.6px 'Inter Tight',sans-serif;letter-spacing:.28px}.opal-service-heading{font:600 62px/1.2 'Inter Tight',sans-serif;letter-spacing:-.02em;margin:0;max-width:500px;width:100%}
.opal-service-kicker i{display:block;width:8px;height:8px;border-radius:50%;background:#ff5d17}
.opal-service-layout{display:flex;gap:60px;align-items:flex-start}.opal-service-rows{flex:1;min-width:0;border-top:1px solid #f9f9f966}.opal-service-row{position:relative;display:flex;gap:30px;align-items:center;padding:32px 0;border-bottom:1px solid #f9f9f966}.opal-service-name{display:flex;gap:70px;align-items:center;flex:1;min-width:0;font-size:40px;font-weight:600;line-height:1.2;letter-spacing:-.02em}.opal-service-name span{opacity:.44;transition:opacity 1.5s var(--service-row-ease)}.opal-service-number{flex:none}.opal-service-label{min-width:0}.opal-service-arrow{display:flex;align-items:center;justify-content:center;flex:none;width:60px;height:60px;border-radius:30px;background:var(--service-white);color:#0a0a0a;transition:background 1.5s var(--service-row-ease),color 1.5s var(--service-row-ease),transform 1.5s var(--service-row-ease)}.opal-service-arrow svg{width:20px;height:20px}.opal-service-underline{position:absolute;bottom:-1px;left:0;width:0;height:1px;background:var(--service-orange);transition:width 1.5s var(--service-row-ease)}
.opal-service-row:is(:hover,:focus-visible) .opal-service-name span,.opal-service-row[data-hover=true] .opal-service-name span{opacity:1}.opal-service-row:is(:hover,:focus-visible) .opal-service-arrow,.opal-service-row[data-hover=true] .opal-service-arrow{background:var(--service-orange);color:var(--service-white);transform:rotate(-45deg)}.opal-service-row:is(:hover,:focus-visible) .opal-service-underline,.opal-service-row[data-hover=true] .opal-service-underline{width:100%}
.opal-service-media{flex:1;min-width:0;max-width:471px;height:248px;overflow:hidden;border-radius:12px}.opal-service-track{height:100%;transition:transform .4s cubic-bezier(.2,.85,.25,1.08)}.opal-service-image{display:block;min-width:471px;width:100%;height:248px;object-fit:cover;border-radius:12px}
.opal-hero-services{width:250px;max-width:100%;color:#f8f8f8}.opal-hero-services-header{display:flex;justify-content:flex-start;gap:8px;align-items:center;font-size:18px;line-height:26px;margin-bottom:20px}.opal-hero-services-header svg{width:13px;height:14.667px}.opal-hero-service-link{display:flex;justify-content:space-between;padding:10px 0;border-top:1px solid #f9f9f966;font-size:18px;line-height:26px}.opal-hero-service-link:last-child{border-bottom:1px solid #f9f9f966}.opal-service-roll{display:flex;flex-direction:column;height:26px;gap:10px;overflow:hidden}.opal-service-roll>span{flex:none;transition:transform .4s cubic-bezier(.2,.85,.25,1.08)}.opal-hero-service-link:is(:hover,:focus-visible) .opal-service-roll>span,.opal-hero-service-link[data-hover=true] .opal-service-roll>span{transform:translateY(-36px)}
@media(max-width:1199.98px){.opal-service-media{display:none}.opal-service-section{padding:80px 30px}.opal-service-name{font-size:32px;flex-direction:column;align-items:flex-start;gap:10px}.opal-service-name span{opacity:1}.opal-service-row{padding:20px 0;align-items:flex-end}.opal-service-arrow{width:49px;height:49px}.opal-service-heading{font-size:46px}.opal-service-header{margin-bottom:40px}}
@media(max-width:809.98px){.opal-service-section{padding:60px 20px}.opal-service-header{display:flex;flex-direction:column;gap:25px}.opal-service-heading{width:100%;font-size:36px}.opal-service-name{font-size:26px}}
@media(prefers-reduced-motion:reduce){.opal-services *{transition:none!important;animation:none!important}}
html[data-reduced-motion=true] .opal-services *{transition:none!important;animation:none!important}
