.services-page .services-intro { padding-block: 64px 48px; background:var(--surface); overflow:clip; }
.services-intro-grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap:48px; align-items:center; }
/* Match the shared intro typography and the Solutions heading scale. */
.services-page .services-intro h1 { font-size:clamp(40px,4.2vw,60px); }
.services-intro h1 > span { display:block; }
.services-intro h1 em { font-style:normal; color:var(--accent); }
.services-intro-description { margin-top:24px; max-width:48ch; }
.services-intro-description p + p { margin-top:14px; color:var(--muted); }
.services-intro .actions { margin-top:24px; }
.service-art { margin:0; min-width:0; }
.service-art img { display:block; width:100%; height:auto; }
.service-art-hero { width:100%; }
.service-art-hero img { transform:translateY(-14px); }
.service-journey { position:sticky; top:0; z-index:3; border-block:1px solid var(--divider); background:var(--surface); }
.service-journey ol { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); }
.service-journey li { position:relative; min-width:0; }
.service-journey li + li::before { content:""; position:absolute; left:0; top:24px; bottom:24px; width:1px; background:var(--divider); }
.service-journey a { position:relative; display:flex; align-items:center; justify-content:center; gap:12px; min-height:80px; text-decoration:none; font-size:15px; line-height:1.4; font-weight:500; color:var(--muted); }
.service-journey a::after { position:absolute; content:''; height:3px; inset:auto 10% -1px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform 180ms ease-out; }
.service-journey .icon { width:28px; height:28px; color:var(--accent-text); }
.service-journey a[aria-current="location"] { color:var(--accent-text); font-weight:600; }
.service-journey a[aria-current="location"]::after { transform:scaleX(1); }
.service-detail { padding-block:40px; background:var(--surface); scroll-margin-top:104px; }
.service-detail:nth-child(even) { background:#F2F7FF; }
.service-detail:is(#consulting,#support) { padding-block:30px; }
.service-detail#implementation { padding-block:28px; }
.service-detail-grid { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:64px; align-items:center; }
.service-detail-grid > .service-art { width:100%; max-width:460px; }
.service-detail:is(#cybersecurity-consulting,#support) .service-detail-grid { grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); }
.service-detail:is(#cybersecurity-consulting,#support) .service-art { grid-column:2; grid-row:1; }
.service-detail:is(#cybersecurity-consulting,#support) .service-detail-body { grid-column:1; grid-row:1; }
.service-heading { display:flex; align-items:center; gap:20px; min-height:52px; }
.service-heading .icon-badge { width:52px; height:52px; border-radius:10px; flex-shrink:0; }
.service-heading .icon-badge .icon { width:28px; height:28px; }
.service-heading h2 { font-size:clamp(30px,3vw,40px); }
.service-lead { margin:8px 0 0 72px; font-size:17px; font-weight:500; line-height:1.65; max-width:49ch; color:var(--muted); }
.service-scope { margin-top:24px; }
.service-detail:is(#consulting,#implementation) :is(.service-scope,.service-description,.service-action) { margin-left:72px; }
.service-scope h3 { font-size:16px; font-weight:600; line-height:1.5; letter-spacing:0; color:var(--accent-text); }
.service-area-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-top:12px; }
.service-scope ul { list-style:none; padding:0; margin:0; }
.service-scope li + li { margin-top:7px; }
.service-scope li { display:flex; gap:9px; align-items:flex-start; font-size:16px; font-weight:500; line-height:1.55; color:var(--muted); }
.service-scope li .icon { width:16px; height:16px; flex-shrink:0; color:var(--accent-text); margin-top:3px; }
.service-detail:is(#consulting,#support) .service-scope { margin-top:20px; }
.service-detail:is(#consulting,#support) .service-area-columns { margin-top:10px; }
.service-detail:is(#consulting,#support) .service-scope li { line-height:1.55; }
.service-detail:is(#consulting,#support) .service-scope li + li { margin-top:4px; }
.service-detail:is(#consulting,#support) .service-description { margin-top:20px; }
.service-art-network { aspect-ratio:1.25; overflow:hidden; }
.service-art-network img { width:108%; max-width:none; margin:-26px 0 0 -4%; }
.service-description { margin-top:28px; }
.service-description summary { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; padding:0 0 8px; cursor:pointer; list-style:none; font-size:14px; color:var(--accent-text); border:0; border-bottom:1px solid var(--divider); border-radius:0; background:transparent; }
.service-description summary::-webkit-details-marker { display:none; }
.service-description summary .icon { width:16px; height:16px; transform:rotate(90deg); transition:transform 360ms; }
.service-description[open] summary .icon { transform:rotate(-90deg); }
.service-description-copy { padding-top:16px; font-size:16px; line-height:1.65; color:var(--muted); }
.service-description-copy p + p { margin-top:14px; }
.service-action { margin-top:12px; }
.service-action .button { font-size:15px; border-color:#6F98CD; border-radius:6px; }
.service-art-deployment img { aspect-ratio:1.23; object-fit:cover; border-radius:10px; }
.service-art-support img { aspect-ratio:1.6; object-fit:cover; border-radius:10px; }
.service-art-deployment, .service-art-support { width:100%; max-width:460px; }
.service-art-support { justify-self:end; }
.service-design-grid { grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:32px; align-items:start; }
.service-design-grid .service-scope { margin-top:0; }
.service-art-design-flow { width:100%; height:auto; margin:0; }
.service-art-design-flow img { width:100%; height:auto; margin:0; }
@supports (interpolate-size:allow-keywords) {
  .service-description { interpolate-size:allow-keywords; }
  .service-description::details-content { height:0; opacity:0; overflow:clip; transition:height 360ms ease,opacity 360ms ease,content-visibility 360ms allow-discrete; }
  .service-description[open]::details-content { height:auto; opacity:1; }
}
@media (max-width:1100px) {
  .services-page .services-intro { padding-block:48px; }
  .services-intro-grid { gap:32px; }
  .service-detail-grid { gap:36px; }
  .service-heading { gap:14px; }
  .service-heading .icon-badge { width:44px; height:44px; }
  .service-heading .icon-badge .icon { width:24px; height:24px; }
  .service-lead { margin:0 0 0 58px; font-size:17px; }
  .service-detail:is(#consulting,#implementation) :is(.service-scope,.service-description,.service-action) { margin-left:0; }
  .service-journey a { font-size:13px; gap:8px; }
}
@media (max-width:767px) {
  .services-page .services-intro { padding-block:36px 28px; }
  .services-intro-grid { grid-template-columns:1fr; gap:28px; }
  .service-art-hero { width:100%; margin-left:0; }
  .service-art-hero img { transform:none; }
  .service-journey { display:none; }
  .service-journey ol { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding-block:8px; }
  .service-journey li:last-child { grid-column:1 / -1; }
  .service-journey li + li::before { display:none; }
  .service-journey a { min-height:64px; font-size:14px; gap:4px; flex-direction:column; padding:6px 0; }
  .service-journey .icon { width:22px; height:22px; }
  .service-detail { padding-block:32px; scroll-margin-top:24px; }
  .service-detail:is(#consulting,#support,#implementation) { padding-block:32px; }
  .service-art-network { aspect-ratio:auto; height:auto; overflow:visible; }
  .service-art-network img { margin:0; width:100%; }
  .service-detail-grid, .service-detail:is(#cybersecurity-consulting,#support) .service-detail-grid { grid-template-columns:1fr; gap:24px; }
  .service-detail:is(#cybersecurity-consulting,#support) .service-art, .service-detail:is(#cybersecurity-consulting,#support) .service-detail-body { grid-column:auto; grid-row:auto; }
  .service-art, .service-detail-grid > .service-art { max-width:400px; margin-inline:auto; width:100%; }
  .service-heading .icon-badge { width:40px; height:40px; }
  .service-heading .icon-badge .icon { width:22px; height:22px; }
  .service-heading h2 { font-size:28px; }
  .service-heading { min-height:0; align-items:center; margin-bottom:14px; }
  .service-lead { margin:0; font-size:17px; }
  .service-area-columns { grid-template-columns:1fr; gap:7px; }
  .service-art-design-flow { margin-top:0; }
}
@media (prefers-reduced-motion:reduce) {
  .service-journey a::after, .service-description::details-content, .service-description summary .icon { transition:none; }
}
