/* Services pages (expertise/*): hub grid, detail layout, "More services". Loaded only on the 7 Services pages. */
[data-area=services] .detail-main{--svc-gap:clamp(40px,5vw,72px)}

/* Hub: six services sit in an even 3 x 2 grid (the shared hub rule spans the first card, which left AI training alone on a third row). */
[data-area=services][data-template=hub] .library-grid{margin-bottom:40px}
@media(min-width:801px){[data-area=services][data-template=hub] .library-grid>.library-card:first-child{grid-column:auto}}

/* Cards: keep the arrow inside the card instead of on its border. */
[data-area=services] .library-card{padding-right:52px!important}
[data-area=services] .library-card b{top:22px;right:22px}

/* Detail: "What we do" as two columns, intro left and a numbered list right. */
[data-area=services] .svc-what{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);column-gap:var(--svc-gap);align-items:start}
[data-area=services] .svc-what>:not(.detail-list){grid-column:1}
[data-area=services] .svc-what h2{margin:0 0 18px}
[data-area=services] .svc-what>p{margin:0;max-width:44ch}
[data-area=services] .svc-what .detail-list{grid-column:2;grid-row:1/span 4;list-style:none;margin:0;padding:0;counter-reset:svc;border-top:1px solid var(--rule)}
[data-area=services] .svc-what .detail-list li{counter-increment:svc;display:flex;gap:22px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--rule);font-size:18px;line-height:1.45;color:var(--heading)}
[data-area=services] .svc-what .detail-list li:before{content:counter(svc,decimal-leading-zero);flex:none;font:10px/1 'IBM Plex Mono',monospace;letter-spacing:.1em;color:var(--accent)}

/* Detail: "Good to know" as a compact note instead of a full-height section. */
[data-area=services] .svc-note{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);column-gap:var(--svc-gap);align-items:center;margin:0;padding:28px 32px!important;border:1px solid var(--rule);border-radius:18px;background:linear-gradient(160deg,#101521,#0b0d12)}
[data-area=services] .svc-note h2{margin:0;font-size:clamp(22px,2vw,28px)!important}
[data-area=services] .svc-note p{margin:0;max-width:60ch}
[data-area=services] .svc-note a{color:var(--heading);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--accent)}

/* Detail: links to the other five services. */
[data-area=services] .svc-more h2{margin:0 0 28px;font-size:clamp(26px,2.6vw,36px)!important}
[data-area=services] .svc-more .library-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
[data-area=services] .svc-more .library-card>span{font-size:19px}

@media(max-width:800px){
 [data-area=services] :is(.svc-what,.svc-note){grid-template-columns:1fr}
 [data-area=services] .svc-what .detail-list{grid-column:1;grid-row:auto;margin-top:28px}
 [data-area=services] .svc-what .detail-list li{font-size:16px;padding:16px 0}
 [data-area=services] .svc-note{row-gap:10px;padding:24px 22px!important}
 [data-area=services] .svc-more .library-grid{grid-template-columns:1fr;gap:10px!important}
 [data-area=services] .svc-more .library-card{padding:16px 48px 16px 20px!important}
 [data-area=services] .svc-more .library-card p{display:none}
 [data-area=services] .svc-more .library-card b{top:14px}
 }

/* Card images: each service card shows that service's artwork on top. */
[data-area=services] .library-card{display:flex!important;flex-direction:column}
[data-area=services] .svc-thumb{display:block;width:calc(100% + 48px);max-width:none;aspect-ratio:16/9;object-fit:cover;margin:-22px -24px 20px -24px;border-radius:17px 17px 0 0;border-bottom:1px solid var(--rule);transition:scale 600ms var(--ease-out,ease)}
[data-area=services] .library-card{overflow:hidden}
[data-area=services] .library-card b{top:auto;bottom:22px}
@media(hover:hover) and (pointer:fine){[data-area=services] .library-card:hover .svc-thumb{scale:1.04}}

/* "Your next move" band: artwork on the right, fading into the band behind the text. */
[data-area=services] .detail-cta{position:relative;isolation:isolate;overflow:hidden;border-radius:18px;background:#0b0d12}
[data-area=services] .detail-cta:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#0b0d12 0%,#0b0d12 30%,#0b0d12cc 48%,#0b0d1200 72%),url(/assets/landing/images/cta-next-move.webp) right 22%/cover no-repeat}
@media(max-width:800px){
 [data-area=services] .detail-cta:before{background:linear-gradient(0deg,#0b0d12 0%,#0b0d12 50%,#0b0d1299 72%,#0b0d1233 100%),url(/assets/landing/images/cta-next-move.webp) 70% top/auto 62% no-repeat}
 [data-area=services] .detail-cta{padding-top:180px!important}
 [data-area=services] .svc-more .library-card{flex-direction:row;align-items:center}
 [data-area=services] .svc-more .svc-thumb{width:64px;aspect-ratio:4/3;margin:0 16px 0 0;border-radius:8px;border:1px solid var(--rule)}
}

/* Hero: longer intro and two actions. */
[data-area=services] .svc-intro{max-width:56ch;margin:0 0 30px;font-size:16px!important;line-height:1.75}
[data-area=services] .svc-actions{display:flex;flex-wrap:wrap;gap:12px}
[data-area=services] .svc-btn{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 22px;border-radius:999px;background:var(--accent);color:#04121c!important;font-size:14px;font-weight:500;transition:transform 200ms,background 200ms}
[data-area=services] .svc-btn:hover{background:#8fdcff;transform:translateY(-1px)}
[data-area=services] .svc-btn-ghost{background:none;border:1px solid var(--rule);color:var(--heading)!important}
[data-area=services] .svc-btn-ghost:hover{background:#58c8ff14;border-color:#58c8ff66}

/* "What we do": four cards with a short description each, plus a light grid backdrop. */
[data-area=services] .svc-what .svc-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;border:0}
[data-area=services] .svc-what .svc-items li{position:relative;isolation:isolate;overflow:hidden;display:block;padding:24px 24px 26px;border:1px solid var(--rule);border-radius:18px;background:linear-gradient(160deg,#101521,#0b0d12);font-size:inherit;transition:border-color 220ms,transform 260ms}
[data-area=services] .svc-what .svc-items li:before{display:block;margin-bottom:34px}
[data-area=services] .svc-what .svc-items li:after{content:"";position:absolute;right:-40px;top:-40px;z-index:-1;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,#58c8ff22,transparent 70%);transition:opacity 300ms;opacity:.55}
[data-area=services] .svc-what .svc-items li:hover{border-color:#329fff70;transform:translateY(-2px)}
[data-area=services] .svc-what .svc-items li:hover:after{opacity:1}
[data-area=services] .svc-what .svc-items h3{margin:0 0 10px;font-size:19px!important;line-height:1.3;letter-spacing:-.01em}
[data-area=services] .svc-what .svc-items p{margin:0;font-size:13.5px!important;line-height:1.65}
[data-area=services] .svc-what{position:relative}
[data-area=services] .svc-what>h2:after{content:"";display:block;width:56px;height:2px;margin-top:22px;background:linear-gradient(90deg,var(--accent),transparent)}
@media(max-width:800px){
 [data-area=services] .svc-what .svc-items{grid-template-columns:1fr;gap:10px}
 [data-area=services] .svc-what .svc-items li{padding:20px}
 [data-area=services] .svc-what .svc-items li:before{margin-bottom:18px}
 [data-area=services] .svc-actions .svc-btn{flex:1 1 auto;justify-content:center}
}
[data-area=services] .library-card b{top:14px;right:14px;bottom:auto;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#0b0d12b3;border:1px solid var(--rule);font-size:15px;line-height:1;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
[data-area=services] .library-card{padding-right:24px!important}
@media(max-width:800px){[data-area=services] .svc-more .library-card b{top:50%;translate:0 -50%}[data-area=services] .svc-more .library-card{padding-right:56px!important}}