/* Software & Digital Services directory — loaded after services.css so it inherits the Solutions page design system
   (tokens, header, hero, .service-card, .cta-box, footer). Only directory-specific layout lives here (sd- prefix). */

/* Hero: reuse .hero, tighten the long H1 and add breadcrumb */
.sd-crumbs{display:block;height:auto;padding:11px 0;background:#F8F7FF;border-bottom:1px solid #EEEAFB;color:#A1A1AA;font-size:.84rem;font-weight:500;line-height:1.5}
.sd-crumbs .wrap{width:min(1180px,calc(100% - 40px))}
.sd-crumbs a{color:#7565A8;text-decoration:underline;text-decoration-color:rgba(117,101,168,.45);text-underline-offset:3px;transition:color .2s}
.sd-crumbs a:hover{color:#5B4A94;text-decoration:underline;text-underline-offset:3px}
.sd-crumbs a:focus-visible{outline:2px solid #6842F5;outline-offset:2px;border-radius:3px}
.sd-crumbs span{margin:0 5px}
.sd-crumbs [aria-current]{color:#0F172A;margin:0}
.sd-hero h1{max-width:1100px;font-size:clamp(2.4rem,4.8vw,4.2rem)}
.sd-hero .lead{max-width:720px}
.sd-hero .hero-links{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.sd-hero .btn-secondary{background:#fff;color:var(--ink);border-color:var(--line)}
.sd-hero .btn-secondary:hover{border-color:#c9b8ff;color:#4c38c8}

/* Section rhythm: white / lavender alternation */
.sd-section{background:#fff}
.sd-section.sd-lavender{background:linear-gradient(135deg,#f7f9fe 0%,#f0edff 100%)}
.sd-section .center{margin-bottom:46px}

/* Card grids: 3 columns desktop (last row centred), 2 tablet, 1 mobile */
.sd-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px}
.sd-grid>.service-card{grid-column:span 2;min-width:0;height:100%;padding:30px;border-color:#e3dcff}
.sd-grid.sd-grid-5>.service-card:nth-child(4){grid-column:2/span 2}
.sd-grid.sd-grid-5>.service-card:nth-child(5){grid-column:4/span 2}
.sd-grid.sd-grid-2>.service-card:nth-child(1){grid-column:2/span 2}
.sd-grid.sd-grid-2>.service-card:nth-child(2){grid-column:4/span 2}
.sd-grid .service-card{position:relative}
.sd-grid .service-card:hover{transform:translateY(-6px);box-shadow:0 22px 56px rgba(19,34,84,.12)}
.sd-grid .service-card h3{margin:0 0 10px}
.sd-grid .service-card p{margin:0 0 20px;font-size:1rem;line-height:1.65}
.sd-more{margin-top:auto;display:inline-flex;align-items:center;gap:7px;color:#4c38c8;font-weight:750;font-size:1rem;text-decoration:none}
.sd-more::after{content:"";position:absolute;inset:0;border-radius:20px}
.sd-more .sd-arrow{transition:transform .25s}
.service-card:hover .sd-more .sd-arrow{transform:translateX(4px)}
.sd-more:focus-visible{outline:none}
.sd-grid .service-card:focus-within{outline:3px solid var(--blue);outline-offset:3px}
.sd-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Why choose: informational cards (not links) */
.sd-grid.sd-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.sd-grid.sd-grid-4>.service-card{grid-column:auto;padding:28px}
.sd-grid.sd-grid-4 .service-card:hover{transform:none;box-shadow:none;border-color:#e3dcff}
.sd-grid.sd-grid-4 .service-card h3{font-size:1.2rem}
.sd-grid.sd-grid-4 .service-card p{margin:0}

/* Breakpoints */
@media(max-width:1024px){
  .sd-grid,.sd-grid.sd-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sd-grid>.service-card,.sd-grid.sd-grid-5>.service-card:nth-child(n),.sd-grid.sd-grid-2>.service-card:nth-child(n){grid-column:auto}
}
@media(max-width:600px){
  .sd-crumbs{padding:10px 0;font-size:.82rem}
  .sd-crumbs .wrap{width:calc(100% - 28px)}
  .sd-grid,.sd-grid.sd-grid-4{grid-template-columns:1fr}
  .sd-grid>.service-card{padding:26px}
  .sd-hero .hero-links .btn{width:100%}
  .sd-section{padding:64px 0}
}
@media(prefers-reduced-motion:reduce){.sd-grid .service-card,.sd-more .sd-arrow{transition:none}.sd-grid .service-card:hover{transform:none}}

/* Header fit on phones: the shared 92px logo + menu button overflowed narrow viewports */
@media(max-width:600px){header .logo{height:56px;max-width:calc(100vw - 130px);object-fit:contain}}