.web-design-hero{position:relative;isolation:isolate;--web-background-opacity:.16}
.web-design-hero::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background:url("../../../assets/web-design/web-design-background.png") center/cover no-repeat;opacity:var(--web-background-opacity);-webkit-mask-image:radial-gradient(ellipse at 65% 46%,#000 20%,transparent 76%);mask-image:radial-gradient(ellipse at 65% 46%,#000 20%,transparent 76%)}
.web-design-hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,#10110f99,#10110f22 65%,transparent)}
.web-approach-visual{width:100%;max-width:440px;margin:32px auto 0}
.web-approach-visual img{display:block;width:100%;height:auto}
.web-approach-visual figcaption{margin-top:18px;font-size:11px;line-height:1.7;color:var(--muted)}
.web-approach-visual figcaption a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:7px}
.web-approach-visual figcaption a>span:last-child{font-size:18px;color:var(--lime)}
.web-approach-visual figcaption a:hover{color:var(--lime)}
@media(min-width:761px){.approach{row-gap:32px;align-items:center}.approach-aside{display:contents}.approach-aside>.section-label{grid-column:1;grid-row:1}.web-approach-visual{grid-column:1;grid-row:2;margin-top:0}.approach-content{grid-column:2;grid-row:2}}
.landing-services .web-service-card{position:relative;isolation:isolate;overflow:hidden;background:#1b1c19;--service-photo-opacity:0;transition:border-color .25s,box-shadow .25s}
.web-service-photo{position:absolute;inset:0;z-index:-2;display:block;width:100%;height:100%;object-fit:cover;object-position:68% center;opacity:var(--service-photo-opacity);pointer-events:none;transition:opacity .3s,transform .4s}
.web-service-card::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(105deg,#1b1c19dc 6%,#1b1c1980 58%,#1b1c191a);opacity:0;transition:opacity .3s}
@media(hover:hover) and (pointer:fine){.web-service-card:hover{--service-photo-opacity:.3;border-color:#73844a;box-shadow:inset 0 0 0 1px #d4ef4212}.web-service-card:hover::before{opacity:1}.web-service-card:hover .web-service-photo{transform:scale(1.025)}}
.web-service-card .card-number{padding-bottom:16px;border-bottom:1px solid #d4ef4224}
.web-service-card .card-number>span{color:var(--lime)}
.web-service-card .card-actions{position:relative;z-index:1}
.web-service-card:last-child:nth-child(odd)::before{background:linear-gradient(90deg,#1b1c19ed 12%,#1b1c199e 54%,#1b1c190d)}
@media(max-width:760px){.web-design-hero{--web-background-opacity:.12}.web-design-hero::before{background-position:65% center}.web-approach-visual{max-width:380px;margin-top:22px}.web-approach-visual figcaption{margin-top:10px}}
@media(max-width:760px){.web-service-card:last-child:nth-child(odd)::before{background:linear-gradient(105deg,#1b1c19dc 6%,#1b1c1980 58%,#1b1c191a)}}

/* Keep the animation control readable on this page without replacing shared server styles. */
.motion-toggle:hover{background:var(--lime);border-color:var(--lime);color:var(--bg)}
