/* Full services catalog. The homepage keeps its compact services presentation. */
.service-catalog-page > p { max-width: 900px; margin-bottom: 30px; }
.service-tile-tabs { gap: 0; margin-bottom: 34px; }
.service-tile-tabs button { min-height: 64px; padding: 18px 26px; }
.services-tile-catalog .service-group-heading { margin-bottom: 26px; gap: 24px; }
.services-tile-catalog .service-group-heading h3 { font-size: 20px; line-height: 1.5; }
.service-tile-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 22px; }
.service-tile-grid .service-tile { grid-column: span 2; padding: 0; min-width: 0; border: 1px solid #dce3e4; box-shadow: none; background: #f2f5f4; overflow: hidden; }
.service-tile-grid .service-tile:nth-child(3n+2) { background: #e8eff2; }
.service-tile-grid .service-tile:nth-child(3n) { background: #efede7; }
.service-tile::after { display: none; }
.service-tile-link { display: flex; flex-direction: column; height: 100%; position: relative; padding: 28px; color: #101e28; text-decoration: none; isolation: isolate; }
.tile-number { position: absolute; top: 26px; left: 28px; color: #607e8f; font-size: 14px; letter-spacing: .12em; }
.tile-art { position: relative; height: 100px; margin: -10px -8px 26px 40px; }
.tile-art::before { content: ''; position: absolute; inset: 12% 8%; border-radius: 50%; background: radial-gradient(ellipse,#ffffffb3,transparent 70%); }
.tile-art img { position: absolute; width: 85px; height: 85px; opacity: .62; object-fit: contain; right: 0; top: 10px; transition: transform .7s cubic-bezier(.2,.7,.2,1),filter .7s,opacity .5s; }
.tile-drawing { position: absolute; inset: 0; width: 100%; height: 100%; color: #6c8b9d; opacity: .32; }
.tile-drawing path { stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s cubic-bezier(.25,.6,.3,1),opacity .5s; }
.tile-drawing path:nth-child(2) { transition-delay: .12s; }
.tile-drawing path:nth-child(3) { transition-delay: .24s; }
.tile-copy { display: flex; flex-direction: column; flex: 1; }
.service-tile-grid .service-tile h3 { font: 600 22px/1.35 'Noto Sans',sans-serif; margin: 0 0 16px; overflow-wrap: anywhere; }
.service-tile-grid .service-tile p { font-size: 16px; line-height: 1.65; color: #506b7b; margin: 0 0 26px; }
.tile-detail { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 16px; font-weight: 600; padding-top: 18px; border-top: 1px solid #bccbd180; }
.tile-detail > span { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #afc1ca; border-radius: 50%; font-size: 20px; transition: background .35s,color .35s,transform .35s; }
.service-tile-grid .service-tile:first-child { background: #142631; border-color: #142631; }
.service-tile-grid .service-tile:first-child .service-tile-link, .service-tile-grid .service-tile:first-child h3 { color: #f5f2e9; }
.service-tile-grid .service-tile:first-child p, .service-tile:first-child .tile-number { color: #bdd0db; }
.service-tile:first-child .tile-drawing { color: #c0d6e0; }
.service-tile:first-child .tile-art::before { background: radial-gradient(ellipse,#8da9b630,transparent 70%); }
.service-tile:first-child .tile-detail > span { border-color: #8ba4b3; }
.service-tile-grid .service-tile:nth-child(-n+2), .service-tile-grid[data-count="6"] .service-tile { grid-column: span 3; }
.service-tile-grid .service-tile:nth-child(-n+2) .service-tile-link, .service-tile-grid[data-count="6"] .service-tile-link { padding-top: 140px; }
.service-tile-grid .service-tile:nth-child(-n+2) .tile-art, .service-tile-grid[data-count="6"] .tile-art { position: absolute; top: 12px; right: 18px; width: 65%; margin: 0; }
.service-tile-grid .service-tile:nth-child(-n+2) .tile-art img, .service-tile-grid[data-count="6"] .tile-art img { width: 90px; height: 90px; top: 10px; }
.service-tile-link:focus-visible { outline: 2px solid #58798b; outline-offset: -5px; }
.service-tile:focus-within .tile-drawing path { stroke-dashoffset: 0; }
.service-tile:focus-within .tile-detail > span { background: #101e28; color: white; }
@media(hover:hover) and (pointer:fine) {
 .service-tile-grid .service-tile:hover { transform: translateY(-3px); border-color: #8ca7b5; box-shadow: 0 16px 32px #101e2810; }
 .service-tile:hover .tile-drawing path { stroke-dashoffset: 0; }
 .service-tile:hover .tile-art img { transform: translateY(-5px) rotate(-2deg) scale(1.025); filter: drop-shadow(0 10px 10px #253a4714); }
 .service-tile:hover .tile-detail > span { background: #101e28; color: #fff; transform: rotate(45deg); }
}
@media(max-width:1050px) {
 .service-tile-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
 .service-tile-grid .service-tile { grid-column: span 1 !important; }
 .service-tile-grid .service-tile-link { padding: 140px 26px 26px; }
 .service-tile-grid .tile-art { position: absolute; top: 12px; right: 18px; width: 65%; margin: 0; }
 .service-tile-grid .tile-art img { width: 90px; height: 90px; top: 10px; }
}
@media(max-width:600px) {
 .service-tile-tabs { margin-bottom: 26px; }
 .service-tile-tabs button { min-width: 0; flex: 1 1 50%; min-height: 70px; padding: 12px 10px; font-size: 16px; line-height: 1.4; }
 .services-tile-catalog .service-group-heading h3 { font-size: 18px; }
 .service-tile-grid { grid-template-columns: minmax(0,1fr); gap: 16px; }
 .service-tile-grid .service-tile-link { padding: 130px 22px 22px; }
 .service-tile-grid .service-tile:nth-child(-n+2) .service-tile-link, .service-tile-grid[data-count="6"] .service-tile-link { padding-top: 130px; }
 .service-tile-grid .tile-art, .service-tile-grid .service-tile:nth-child(-n+2) .tile-art, .service-tile-grid[data-count="6"] .tile-art { width: 72%; top: 8px; right: 10px; height: 135px; }
 .service-tile-grid .tile-art img, .service-tile-grid .service-tile:nth-child(-n+2) .tile-art img, .service-tile-grid[data-count="6"] .tile-art img { width: 85px; height: 85px; top: 10px; }
 .tile-number { top: 23px; left: 22px; }
 .service-tile-grid .service-tile h3 { font-size: 21px; }
}
@media(hover:none) and (prefers-reduced-motion:no-preference) {
 .service-tile.r2-arrived .tile-drawing path { animation: tile-line-draw 1.5s calc(var(--arrival-delay,0ms) + .25s) both; }
 .service-tile.r2-arrived .tile-drawing path:nth-child(2) { animation-delay: calc(var(--arrival-delay,0ms) + .45s); }
 .service-tile.r2-arrived .tile-drawing path:nth-child(3) { animation-delay: calc(var(--arrival-delay,0ms) + .65s); }
}
@keyframes tile-line-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
 .service-tile:hover .tile-art img { animation: tile-icon-build .7s cubic-bezier(.2,.6,.25,1) both; }
 .service-tile:focus-within .tile-art img { animation: tile-icon-build .7s cubic-bezier(.2,.6,.25,1) both; }
}
@keyframes tile-icon-build { from { clip-path: inset(100% 0 0); opacity: .4; } to { clip-path: inset(0); opacity: .82; } }
@media(prefers-reduced-motion:reduce) {
 .service-tile-grid .service-tile, .service-tile-grid .tile-art img, .tile-detail > span { transition: none; transform: none !important; }
 .tile-drawing path { transition: none; animation: none; stroke-dashoffset: 0; }
}
