/* Services and benefits have one component stylesheet; shared hero sizing stays in style.css. */
.services-shell{padding-top:56px}
#services .section-heading{font-size:clamp(36px,2.5vw,40px);line-height:1.15;margin:0 0 28px}
.services-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;align-items:stretch}
.service-card{display:grid;grid-template-rows:subgrid;grid-row:span 4;row-gap:16px;min-width:0;padding:24px;text-align:center;border:1px solid #fff;border-radius:24px;box-shadow:0 8px 18px #1738580c;color:var(--ink)}
.service-card h3{font-size:clamp(26px,1.75vw,28px);font-weight:800;line-height:1.15;margin:0;letter-spacing:-.3px}
.service-card p{font-size:18px;line-height:1.5;font-weight:500;margin:0}
.service-web{background:linear-gradient(135deg,#e0f2ff,#d8edfc)}
.service-portals{background:linear-gradient(135deg,#fff6e8,#fcf0de)}
.service-seo{background:linear-gradient(135deg,#e2f9f2,#dcf6ef)}
.service-ads{background:linear-gradient(135deg,#ffebe4,#ffe5df)}
.service-illustration{display:grid;place-items:center;aspect-ratio:3/2;width:100%;min-width:0}
.service-illustration img{display:block;width:100%;height:100%;object-fit:contain}
.service-more{display:flex;align-items:center;justify-content:center;gap:10px;min-height:44px;font-size:20px;font-weight:800;line-height:1.3;align-self:end}
.service-more svg{width:23px;height:23px}
.service-more:focus-visible{outline:3px solid var(--orange);outline-offset:4px;border-radius:8px}
.benefits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;min-height:64px;margin-top:24px;padding:12px 0;border-radius:22px;background:linear-gradient(180deg,#193e65,#092341);color:white;box-shadow:0 6px 16px #15395910}
.benefit{display:flex;align-items:center;justify-content:center;gap:16px;min-width:0;padding-inline:12px;font-size:20px;line-height:1.35;font-weight:700}
.benefit+.benefit{border-inline-start:2px solid var(--orange)}
.benefit svg{width:32px;height:32px;color:#ff8500}
.service-dialog{width:min(600px,calc(100% - 32px));padding:32px;border:1px solid #d5e0f0;border-radius:24px;color:var(--ink);background:#fff;box-shadow:0 25px 90px #0017364d;max-height:calc(100dvh - 48px);overflow:auto}
.service-dialog::backdrop{background:#05132f99;backdrop-filter:blur(5px)}
.service-dialog h2{font-size:30px;line-height:1.2;margin:0 0 16px;padding-left:24px}
.service-dialog p,.service-dialog li{font-size:18px;line-height:1.6}.service-dialog p{margin:0 0 16px}.service-dialog ul{margin:0;padding-inline-start:24px}
@media(hover:hover){.service-more:hover{text-decoration:underline;text-underline-offset:5px}}
@media(max-width:1100px){.benefit{font-size:18px;gap:10px}}
@media(max-width:1023px){.services-shell{padding-top:40px}.services-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.service-card h3{font-size:28px}.benefits{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:20px;padding-block:18px}.benefit:nth-child(3){border:0}}
@media(max-width:767px){
 .services-shell{padding-top:32px}#services .section-heading{font-size:36px;margin-bottom:24px}
 .services-grid{grid-template-columns:1fr}.service-card h3{font-size:28px}
 .benefits{border-radius:18px}
 .benefit{display:grid;grid-template-columns:27px minmax(0,1fr);align-items:center;justify-content:normal;font-size:16px;gap:8px;padding-inline:8px}.benefit svg{width:27px;height:27px;justify-self:center}.benefit>span{text-align:center;min-width:0}
 .service-dialog{padding:30px 22px}
}

/* Homepage service tiles: one accessible link and a gentle individual lift. */
.home #services a.service-card{color:var(--ink);text-decoration:none;cursor:pointer;transition:transform .22s ease,box-shadow .22s ease}
.home #services a.service-card:focus-visible{outline:3px solid var(--orange);outline-offset:4px;box-shadow:0 14px 28px #17385824}
@media(hover:hover) and (pointer:fine){.home #services a.service-card:hover{transform:translateY(-8px);box-shadow:0 16px 30px #17385824}.home #services a.service-card:hover .service-more{text-decoration:underline;text-underline-offset:5px}}
@media(prefers-reduced-motion:reduce){.home #services a.service-card{transition:none}.home #services a.service-card:hover{transform:none}}