/* Stallion Contracting — base + component styles */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:110px}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:#0A0A0B;-webkit-font-smoothing:antialiased}
img,video{max-width:100%}
[hidden]{display:none !important}
a{color:#E2B865}a:hover{color:#F4EFE6}
.btn-gold{transition:background .15s ease, transform .15s ease}
.btn-gold:hover{background:#E2B865 !important;color:#0A0A0B !important;transform:translateY(-1px)}
.btn-line{transition:border-color .15s ease, color .15s ease}
.btn-line:hover{border-color:#C9973F !important;color:#E2B865 !important}
.card{transition:border-color .2s ease, transform .2s ease}
.card:hover{border-color:#C9973F !important;transform:translateY(-3px)}
.navlink{text-decoration:none}
.navlink:hover{color:#E2B865 !important}
input:focus, textarea:focus{outline:2px solid #C9973F;outline-offset:1px;border-color:#C9973F !important}
button:focus-visible, a:focus-visible, summary:focus-visible, .pill-input:focus-visible + .pill{outline:2px solid #E2B865;outline-offset:3px}
::placeholder{color:#8C877F}
.skip-link{position:absolute;left:16px;top:-60px;z-index:200;padding:12px 18px;background:#C9973F;color:#0A0A0B;font-weight:800;border-radius:4px;text-decoration:none}
.skip-link:focus{top:12px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* Pills (form project type + showcase) */
.pill-input{position:absolute;opacity:0;width:1px;height:1px}
.pill{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;font:inherit;font-size:14px;font-weight:700;cursor:pointer;background:transparent;color:#E6E0D6;border:1px solid #3A3A40;transition:background .2s ease,color .2s ease,border-color .2s ease}
.pill:hover{border-color:#C9973F}
.pill-input:checked + .pill{background:#C9973F;color:#0A0A0B;border-color:#C9973F}
.pill--outline{font-weight:800;letter-spacing:.03em;text-transform:uppercase;padding:0 18px}
.pill--outline[aria-pressed="true"]{background:#F4EFE6;color:#0A0A0B;border-color:#F4EFE6}
.seg{display:flex;gap:4px;padding:4px;background:#131315;border:1px solid #2A2A2E;border-radius:999px}
.seg button{min-height:44px;padding:0 18px;border-radius:999px;font:inherit;font-size:14px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;cursor:pointer;background:transparent;color:#E6E0D6;border:0;transition:background .2s ease,color .2s ease}
.seg button[aria-pressed="true"]{background:#C9973F;color:#0A0A0B}

/* Showcase viewer */
#ba-viewer{flex:999 1 560px;min-width:0;position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:6px;border:1px solid #2A2A2E;background:#0A0A0B}
.sc-fill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
#sc-before{clip-path:inset(0 50% 0 0)}
.sc-label{position:absolute;top:18px;padding:6px 12px;border-radius:3px;font-family:Michroma,sans-serif;font-size:11px;letter-spacing:.24em;text-transform:uppercase;pointer-events:none;transition:opacity .2s ease}
#sc-before-label{left:18px;background:rgba(10,10,11,.8);color:#F4EFE6}
#sc-after-label{right:18px;background:#C9973F;color:#0A0A0B}
#sc-divider{position:absolute;top:0;bottom:0;left:50%;width:3px;margin-left:-1.5px;background:#C9973F;box-shadow:0 0 20px rgba(201,151,63,.85);pointer-events:none}
#sc-knob{position:absolute;top:50%;left:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:#C9973F;color:#0A0A0B;display:flex;align-items:center;justify-content:center;pointer-events:none;animation:knobPulse 2s ease-in-out infinite}
@keyframes knobPulse{0%,100%{box-shadow:0 0 0 0 rgba(201,151,63,.55),0 8px 24px rgba(0,0,0,.5)}50%{box-shadow:0 0 0 14px rgba(201,151,63,0),0 8px 24px rgba(0,0,0,.5)}}
#sc-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
#sc-range:focus-visible ~ #sc-knob, #sc-knob:has(~ #sc-range:focus-visible){outline:3px solid #F4EFE6;outline-offset:3px}
.sc-stage{position:absolute;inset:0;overflow:hidden;opacity:0;transition:opacity .8s ease}
.sc-stage.is-active{opacity:1}
.sc-stage-blur{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(28px) brightness(.4) saturate(1.1);transform:scale(1.2)}
.sc-stage-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform:scale(.98);transition:transform 3.4s ease-out}
.sc-stage.is-active .sc-stage-img{transform:scale(1.05)}
.sc-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,11,.65) 0%,rgba(10,10,11,0) 28%,rgba(10,10,11,0) 62%,rgba(10,10,11,.8) 100%);pointer-events:none}
#sc-bars{position:absolute;left:20px;right:20px;top:18px;display:flex;gap:6px}
.sc-bar{flex:1;height:4px;background:rgba(244,239,230,.25);border-radius:2px;overflow:hidden}
.sc-bar-fill{height:100%;width:0;background:#C9973F}
#sc-play{position:absolute;right:20px;bottom:20px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid rgba(244,239,230,.4);background:rgba(10,10,11,.6);color:#F4EFE6;cursor:pointer}
#sc-play .ic-play{display:none}
#sc-play.is-paused .ic-play{display:block}
#sc-play.is-paused .ic-pause{display:none}
.sc-steps{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.sc-step{width:100%;min-height:52px;display:flex;align-items:center;gap:14px;padding:8px 14px;border-radius:4px;font:inherit;font-size:16px;font-weight:700;text-align:left;cursor:pointer;background:transparent;border:1px solid #2A2A2E;color:#CFC9BF;transition:background .2s ease,border-color .2s ease}
.sc-step:hover{border-color:#C9973F}
.sc-step.is-active{background:rgba(201,151,63,.14);border-color:#C9973F;color:#F4EFE6}
.sc-step-num{flex:none;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:13px;font-weight:800;border:1px solid #3A3A40;color:#C9973F}
.sc-step.is-active .sc-step-num{background:#C9973F;color:#0A0A0B;border-color:#C9973F}
#sc-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr));gap:12px}
.thumb{position:relative;padding:0;border:1px solid #2A2A2E;border-radius:4px;overflow:hidden;aspect-ratio:4/3;background:#131315;cursor:zoom-in;transition:border-color .2s ease}
.thumb:hover{border-color:#C9973F}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease,filter .5s ease;filter:saturate(.85)}
.thumb:hover img,.thumb:focus-visible img{transform:scale(1.08);filter:saturate(1.1)}
.thumb-tag{position:absolute;left:8px;bottom:8px;max-width:calc(100% - 16px);padding:4px 8px;background:rgba(10,10,11,.8);color:#E2B865;border-radius:3px;font-family:Michroma,sans-serif;font-size:10px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Lightbox */
#sc-lightbox{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:72px 24px 24px}
#sc-lb-backdrop{position:absolute;inset:0;background:rgba(5,5,6,.94);border:0;cursor:zoom-out}
.lb-fig{position:relative;margin:0;width:100%;max-width:1100px;display:flex;flex-direction:column;gap:14px;pointer-events:none}
.lb-fig img{width:100%;max-height:76vh;object-fit:contain;border-radius:4px}
.lb-fig figcaption{display:flex;justify-content:space-between;gap:12px;color:#CFC9BF;font-size:15px}
.lb-btn{position:absolute;display:flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer}
#sc-lb-close{top:16px;right:16px;width:48px;height:48px;border:1px solid #3A3A40;background:#131315;color:#F4EFE6}
#sc-lb-prev,#sc-lb-next{top:50%;width:52px;height:52px;margin-top:-26px;border:0;background:#C9973F;color:#0A0A0B}
#sc-lb-prev{left:16px}#sc-lb-next{right:16px}

/* FAQ */
.faq-item{border-bottom:1px solid #2A2A2E}
.faq-item summary{list-style:none;cursor:pointer;min-height:64px;padding:18px 0;display:flex;justify-content:space-between;align-items:center;gap:20px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item h3{margin:0;font-size:19px;font-weight:700;line-height:1.4;color:#F4EFE6}
.faq-icon{flex:none;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:1px solid #C9973F;border-radius:50%;color:#C9973F;font-size:20px;line-height:1}
.faq-icon::before{content:"+"}
.faq-item[open] .faq-icon::before{content:"\2212"}
.faq-item p{margin:0;padding:0 52px 22px 0;color:#A9A49B;font-size:17px}

#sc-slider,#sc-timeline{position:absolute;inset:0}
@media (max-width: 640px){
  .card[style*="span 2"]{grid-column:auto !important}
}
@media (max-width: 600px){
  #sc-knob{width:48px;height:48px;margin:-24px 0 0 -24px}
  #sc-lb-prev,#sc-lb-next{top:auto;bottom:16px;margin-top:0}
  .faq-item p{padding-right:0}
}
@media (prefers-reduced-motion: reduce){
  #sc-knob{animation:none}
  .thumb img,.sc-stage,.sc-stage-img{transition:none}
}

/* Phone: compact header + fixed call / quote bar */
.mobile-cta{display:none}
@media (max-width: 760px){
  .site-header{position:static !important;backdrop-filter:none !important}
  .site-header nav{padding-top:10px !important;padding-bottom:10px !important}
  .site-header img{height:48px !important}
  .nav-links,.nav-call{display:none !important}
  html{scroll-padding-top:16px}
  body{padding-bottom:76px}
  .mobile-cta{display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:50;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(10,10,11,.96);border-top:1px solid #2A2A2E;font-family:Archivo,system-ui,sans-serif}
  .mobile-cta a{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;border-radius:4px;font-weight:800;font-size:15px;letter-spacing:.04em;text-transform:uppercase;text-decoration:none}
  .mobile-cta-call{border:1px solid #3A3A40;color:#F4EFE6}
  .mobile-cta-quote{background:#C9973F;color:#0A0A0B}
}

/* Header + hero motion */
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.rise{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
.d1{animation-delay:.15s}.d2{animation-delay:.3s}.d3{animation-delay:.45s}.d4{animation-delay:.6s}.d5{animation-delay:.75s}
@keyframes slideIn{from{opacity:0;transform:translateX(48px)}to{opacity:1;transform:none}}
.slide-in{animation:slideIn .9s .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes hdrDrop{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:none}}
.hdr{animation:hdrDrop .7s cubic-bezier(.2,.7,.2,1) both;transition:box-shadow .3s ease,border-color .3s ease}
.hdr.is-scrolled{border-bottom-color:rgba(201,151,63,.55) !important;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.shine{background:linear-gradient(100deg,#C9973F 0%,#C9973F 38%,#F8E2A8 50%,#C9973F 62%,#C9973F 100%);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent !important;animation:shine 5s 1.4s ease-in-out infinite}
@keyframes shine{0%{background-position:100% 0}55%,100%{background-position:0 0}}
.stripes-drift{animation:drift 9s linear infinite}
@keyframes drift{to{background-position:67.88px 0}}
.mark-float{animation:markFloat 14s ease-in-out infinite alternate}
@keyframes markFloat{from{transform:translate(0,0) scale(1);opacity:.05}to{transform:translate(36px,-24px) scale(1.05);opacity:.09}}
.navlink{background-image:linear-gradient(#C9973F,#C9973F);background-size:0 2px;background-repeat:no-repeat;background-position:0 100%;padding-bottom:3px;transition:background-size .25s ease,color .2s ease}
.navlink:hover{background-size:100% 2px}
@keyframes ctaGlow{0%,70%,100%{box-shadow:0 0 0 0 rgba(201,151,63,0)}80%{box-shadow:0 0 0 0 rgba(201,151,63,.6)}95%{box-shadow:0 0 0 12px rgba(201,151,63,0)}}
.cta-glow{animation:ctaGlow 4s 2s ease-out infinite}
@media (prefers-reduced-motion: reduce){.ba-knob,.rise,.slide-in,.hdr,.shine,.stripes-drift,.mark-float,.cta-glow{animation:none !important}.thumb img{transition:none}}

/* Quote quiz */
.qprog{display:none;flex-direction:column;gap:8px}
.quiz-js .qprog{display:flex}
.qbars{display:flex;gap:6px}
.qbars span{flex:1;height:4px;border-radius:2px;background:#2A2A2E;transition:background .3s ease}
.qbars span.is-done{background:#C9973F}
.qnum{margin:0;font-family:Michroma,sans-serif;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#C9973F}
.qstep{border:0;margin:0;padding:0;min-width:0}
.quiz-js .qstep{display:none}
.quiz-js .qstep.is-current{display:block;animation:qIn .35s ease both}
@keyframes qIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.qlegend{padding:0;margin:0 0 14px;font-size:20px;line-height:1.25;font-weight:800;color:#F4EFE6;outline:none}
.qgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.qradio{position:absolute;opacity:0;width:1px;height:1px}
.qopt{min-height:58px;padding:10px 14px;display:flex;align-items:center;border-radius:6px;font-size:15px;font-weight:700;line-height:1.25;cursor:pointer;background:#0A0A0B;color:#F4EFE6;border:1px solid #3A3A40;transition:border-color .15s ease,background .15s ease,transform .15s ease}
.qopt:hover{border-color:#C9973F;transform:translateY(-1px)}
.qradio:checked + .qopt{background:#C9973F;color:#0A0A0B;border-color:#C9973F}
.qradio:focus-visible + .qopt{outline:2px solid #E2B865;outline-offset:2px}
.qsummary{display:flex;flex-wrap:wrap;gap:6px}
.qsummary span{padding:5px 10px;border:1px solid #3A3A40;border-radius:999px;font-size:13px;font-weight:600;color:#E2B865}
.qfoot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px}
.qback{min-height:44px;padding:0 4px;background:transparent;border:0;color:#CFC9BF;font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.qback:hover{color:#E2B865}
@media (max-width: 380px){.qgrid{grid-template-columns:1fr}}

/* Breadcrumbs (service pages) */
.crumbs ol{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none;font-size:14px;color:#8C877F}
.crumbs li+li::before{content:"/";margin-right:6px;color:#4A4A52}
.crumbs a{color:#CFC9BF;text-decoration:none}.crumbs a:hover{color:#E2B865}
.crumbs [aria-current]{color:#E2B865}

/* Logo glint */
.logo-glint{position:relative;overflow:hidden}
.logo-glint::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 38%,rgba(255,238,196,.95) 50%,transparent 62%);background-size:300% 100%;background-position:120% 0;-webkit-mask:url(../img/logo-light-560.png) center/contain no-repeat;mask:url(../img/logo-light-560.png) center/contain no-repeat;animation:glint 1.4s 1s ease-in-out both}
.logo-glint:hover::after{animation:glint 1.1s ease-in-out both}
@keyframes glint{from{background-position:120% 0}to{background-position:-20% 0}}

/* First-visit logo intro (home page) */
#intro{display:none}
.has-intro #intro{display:flex;position:fixed;inset:0;z-index:300;background:#0A0A0B;align-items:center;justify-content:center;cursor:pointer;animation:introOut .6s 1.6s ease forwards}
.intro-logo{position:relative;width:min(64vw,420px);animation:introLogo 1s cubic-bezier(.2,.7,.2,1) both}
.intro-logo img{display:block;width:100%;height:auto}
.intro-glint{position:absolute;inset:0;background:linear-gradient(105deg,transparent 38%,rgba(255,238,196,.95) 50%,transparent 62%);background-size:300% 100%;background-position:120% 0;-webkit-mask:url(../img/logo-light-560.png) center/contain no-repeat;mask:url(../img/logo-light-560.png) center/contain no-repeat;animation:glint 1s .6s ease-in-out both}
@keyframes introLogo{from{opacity:0;transform:scale(.86);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
@keyframes introOut{to{opacity:0;visibility:hidden}}
.has-intro .hdr{animation-delay:1.7s}
.has-intro .d1{animation-delay:1.85s}.has-intro .d2{animation-delay:2s}.has-intro .d3{animation-delay:2.15s}.has-intro .d4{animation-delay:2.3s}.has-intro .d5{animation-delay:2.45s}
.has-intro .slide-in{animation-delay:2.1s}
.has-intro .logo-glint::after{animation-delay:2.4s}
@media (prefers-reduced-motion: reduce){.logo-glint::after,.intro-glint,.quiz-js .qstep.is-current{animation:none !important}}

/* No sideways scrolling on phones */
html,body{overflow-x:clip}
.site-wrap{overflow-x:clip;max-width:100vw}
@supports not (overflow-x: clip){
  .site-wrap{overflow-x:hidden}
  @media (max-width: 760px){html,body{overflow-x:hidden}}
}
/* iOS Safari: make rounded boxes really clip their blurred / scaled media */
#ba-viewer{isolation:isolate;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-mask-image:-webkit-radial-gradient(white,black)}
/* Long all-caps words in the wide font wrap instead of pushing the page wider */
@media (max-width: 520px){
  h1,h2,h3{overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
  .crumbs,.qlegend,.pill--outline{overflow-wrap:anywhere}
}

/* Project video: one <video>, still blurred backdrop, explicit sizing (works on iPhone) */
.vid-frame{position:relative;height:clamp(460px,44vw,560px);overflow:hidden;border:1px solid #2A2A2E;border-radius:6px;background:#0A0A0B;isolation:isolate}
.vid-bg{position:absolute;inset:-40px;background:url(../video/mr-barber-west-district-poster.jpg) center/cover no-repeat;filter:blur(30px) brightness(.4) saturate(1.15)}
.vid-shade{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(10,10,11,0) 30%,rgba(10,10,11,.75) 100%)}
.vid-box{position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);aspect-ratio:478/850;max-width:100%;box-shadow:0 24px 60px rgba(0,0,0,.6);outline:1px solid rgba(201,151,63,.45);background:#000}
.vid-main{display:block;width:100%;height:100%;object-fit:cover}
.vid-tag{position:absolute;left:20px;top:20px;z-index:1;padding:8px 12px;background:#C9973F;color:#0A0A0B;border-radius:3px;font-family:Michroma,sans-serif;font-size:11px;letter-spacing:.22em;text-transform:uppercase}
@supports not (aspect-ratio: 1){.vid-box{width:280px}}
@media (max-width: 600px){.vid-frame{height:min(132vw,560px)}}

/* Calgary banner */
@keyframes calDraw{to{stroke-dashoffset:0}}
@keyframes calFill{to{fill-opacity:1}}
@keyframes calBeacon{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes calMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes calChinook{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:none}}
@keyframes calWin{0%{opacity:0}40%{opacity:1}55%{opacity:.25}70%,100%{opacity:.95}}
@keyframes calFadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.cal-city{stroke-dasharray:1;stroke-dashoffset:1;fill-opacity:0;animation:calDraw 3.6s cubic-bezier(.4,.1,.2,1) forwards,calFill 1.4s 2.8s ease forwards}
.cal-mtn{stroke-dasharray:1;stroke-dashoffset:1;animation:calDraw 2.6s .2s ease forwards}
.cal-beacon{opacity:.25;animation:calBeacon 2.2s 3s ease-in-out infinite}
.cal-win{fill:#F8E2A8;opacity:0;animation:calWin .9s ease forwards}
.cal-chinook{animation:calChinook 3.2s .5s ease-out both}
.cal-yyc{animation:calFadeUp 1s 4.2s ease both}
.cal-marquee{display:flex;width:max-content;animation:calMarquee 38s linear infinite}
.cal-sky{position:absolute;left:50%;bottom:0;width:1440px;height:260px;max-width:none;transform:translateX(-50%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.has-intro [class*="cal-"]{animation-play-state:paused !important}
@media (max-width: 760px){.cal-sky{width:1000px;height:181px}.cal-ribbon{height:48px !important}.cal-ribbon-lead{padding:0 14px 0 16px !important;gap:8px !important}.cal-ribbon-lead span{font-size:10px !important;letter-spacing:.18em !important}.cal-ribbon-sky{display:none !important}.cal-marquee{font-size:13px !important}.hero-inner{padding-bottom:230px !important}.cal-yyc{right:16px !important;bottom:12px !important;font-size:9px !important;padding:4px 8px !important}.cal-chinook{bottom:110px !important;height:300px !important}}
@media (prefers-reduced-motion: reduce){.cal-city,.cal-mtn{stroke-dashoffset:0;fill-opacity:1;animation:none}.cal-beacon,.cal-marquee,.cal-chinook,.cal-yyc{animation:none;opacity:1}.cal-win{animation:none;opacity:.95}}
/* Phone: one-line top bar, full-width services ribbon */
@media (max-width: 760px){.topbar-inner{justify-content:center !important;gap:2px 14px !important;padding:7px 16px !important;font-size:12px !important;text-align:center}.tb-area,.tb-email{display:none !important}.cal-ribbon{height:40px !important}.cal-ribbon-lead{display:none !important}.cal-marquee{font-size:12px !important;letter-spacing:.08em !important}.cal-marquee span[style*="padding: 0 22px"]{padding:0 14px !important}}
@media (max-width: 760px){.cal-ribbon > div:last-child{-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}}