/* Scoped to the three service cards; the catalog, theme and scroll scene keep
   their own styles. Generated photographs share one crop and one visual scale. */
#services.services--visual .service-grid{
 display:grid;
 grid-template-columns:repeat(3,minmax(0,1fr));
 gap:28px;
 margin-top:56px;
 border:0;
}
#services.services--visual .service-card{
 position:relative;
 display:flex;
 flex-direction:column;
 align-items:stretch;
 min-width:0;
 padding:0 0 4px;
 border:0;
}
#services.services--visual .service-media{
 position:relative;
 overflow:hidden;
 aspect-ratio:16/10;
 background:var(--navy-800,#122750);
 isolation:isolate;
}
#services.services--visual .service-media::after{
 content:"";
 position:absolute;
 inset:0;
 pointer-events:none;
 background:linear-gradient(145deg,rgba(6,19,37,.2),transparent 42%);
 box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
#services.services--visual .service-media img{
 display:block;
 width:100%;
 height:100%;
 aspect-ratio:16/10;
 object-fit:cover;
 object-position:center;
 transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
#services.services--visual .service-index{
 position:absolute;
 z-index:1;
 top:16px;
 left:16px;
 display:grid;
 place-items:center;
 width:38px;
 height:38px;
 border:1px solid rgba(255,255,255,.45);
 background:rgba(6,19,37,.5);
 color:#fff;
 font-family:var(--sans,"Inter",sans-serif);
 font-size:11px;
 font-weight:500;
 line-height:1;
 letter-spacing:.12em;
 font-variant-numeric:tabular-nums;
}
#services.services--visual .service-card h3{
 margin:25px 0 0;
 font-size:clamp(28px,2.5vw,36px);
 line-height:1.1;
}
#services.services--visual .service-card p{
 flex:0 0 auto;
 max-width:unset;
 margin:14px 0 0;
 font-size:14px;
 line-height:1.7;
 color:rgba(255,255,255,.72);
}
#services.services--visual .service-tags{
 margin:20px 0 0;
 gap:7px 14px;
}
#services.services--visual .service-tags li{
 white-space:normal;
 color:rgba(255,255,255,.6);
 font-size:11px;
 line-height:1.5;
}
#services.services--visual .service-tags li+li::before{content:none}
#services.services--visual .service-link{
 position:static;
 align-self:stretch;
 justify-content:space-between;
 gap:20px;
 min-height:44px;
 margin-top:auto;
 padding:27px 0 12px;
 border:0;
 border-bottom:1px solid var(--line-dark,rgba(255,255,255,.16));
 text-align:left;
 font-size:11px;
 line-height:1.5;
 letter-spacing:.15em;
}
/* One semantic button per card. Its hit area also covers the photograph. */
#services.services--visual .service-link::after{
 content:"";
 position:absolute;
 z-index:2;
 inset:0;
 cursor:pointer;
}
#services.services--visual .service-link:focus-visible{outline:none}
#services.services--visual .service-link:focus-visible::after{
 outline:2px solid var(--focus,#8ab8ff);
 outline-offset:6px;
}
#services.services--visual .service-card:focus-within .service-link{
 color:var(--blue-soft,#8ab8ff);
 border-bottom-color:var(--blue-soft,#8ab8ff);
}
@media(hover:hover) and (pointer:fine){
 #services.services--visual .service-card:hover .service-media img{transform:scale(1.025)}
 #services.services--visual .service-card:hover .service-link{color:var(--blue-soft,#8ab8ff);border-bottom-color:var(--blue-soft,#8ab8ff)}
 #services.services--visual .service-card:hover .service-link svg{transform:translateX(4px)}
}
@media(max-width:1100px) and (min-width:761px){
 #services.services--visual .service-grid{gap:20px}
 #services.services--visual .service-card h3{font-size:28px}
 #services.services--visual .service-card p{font-size:13px}
}
@media(max-width:760px){
 #services.services--visual .service-grid{grid-template-columns:1fr;gap:42px;margin-top:36px}
 #services.services--visual .service-card h3{font-size:32px;margin-top:22px}
 #services.services--visual .service-card p{font-size:14px;margin-top:12px}
 #services.services--visual .service-tags{margin-top:16px}
 #services.services--visual .service-link{padding-top:24px}
}
@media(prefers-reduced-motion:reduce){
 #services.services--visual .service-media img,
 #services.services--visual .service-link,
 #services.services--visual .service-link svg{transition:none}
 #services.services--visual .service-card:hover .service-media img,
 #services.services--visual .service-card:hover .service-link svg{transform:none}
}

/* Rounded cards with the copy laid over the photograph; numbering hidden. */
#services.services--visual .service-card{
 overflow:hidden;
 justify-content:flex-end;
 min-height:500px;
 padding:32px;
 border-radius:20px;
 isolation:isolate;
}
#services.services--visual .service-media{
 position:absolute;
 inset:0;
 z-index:-1;
 aspect-ratio:auto;
}
#services.services--visual .service-media img{height:100%;aspect-ratio:auto}
#services.services--visual .service-media::after{
 background:linear-gradient(180deg,rgba(6,19,37,0) 25%,rgba(6,19,37,.55) 55%,rgba(6,19,37,.92) 100%);
 box-shadow:none;
}
#services.services--visual .service-index{display:none}
#services.services--visual .service-card h3{margin-top:0;color:#fff}
#services.services--visual .service-card p{color:rgba(255,255,255,.85)}
#services.services--visual .service-tags li{color:rgba(255,255,255,.7)}
#services.services--visual .service-link{margin-top:0;padding-top:22px;border-bottom-color:rgba(255,255,255,.3)}
#services.services--visual .service-link::after{border-radius:20px}
@media(max-width:760px){
 #services.services--visual .service-grid{gap:16px}
 #services.services--visual .service-card{min-height:440px;padding:24px;border-radius:16px}
}