/* Shared navigation behavior is in site.css; the navy fade is local to Services. */
.services-hero{
  position:relative;isolation:isolate;overflow:hidden;
  display:grid;grid-template-rows:minmax(250px,1fr) auto auto;
  gap:28px;height:auto;min-height:clamp(620px,100svh,980px);
  padding:0 0 28px;background:#071c31;color:#fff;
}
.services-hero .services-hero-inner{display:contents}
.services-hero-scene{
  position:absolute;inset:0;width:100%;height:100%;min-height:0;z-index:0;overflow:hidden;
  pointer-events:none;user-select:none;-webkit-user-select:none;
}
.services-hero-scene img{-webkit-user-drag:none;-webkit-touch-callout:none}
.services-hero-extension,
.services-hero-original{position:absolute;top:0;right:0;height:100%}
.services-hero-extension{width:100%;object-fit:cover;object-position:100% calc(28% - 42px);clip-path:inset(0 61% 0 0);filter:blur(2px)}
.services-hero-original{
  width:72%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%);
  mask-image:linear-gradient(90deg,transparent,#000 12%);
}
.services-hero-background{width:100%;height:100%;object-fit:cover;object-position:100% calc(28% - 42px);display:block}
/* The generated layer contains scenery only; original pixels cover the entire person. */
.services-hero-scene::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,28,49,.58) 0,rgba(7,28,49,.56) 28px,rgba(7,28,49,.52) 48px,rgba(7,28,49,.47) 64px,rgba(7,28,49,.38) 82px,rgba(7,28,49,.28) 104px,rgba(7,28,49,.18) 126px,rgba(7,28,49,.11) 146px,rgba(7,28,49,.063) 168px,rgba(7,28,49,.063) 45%,rgba(7,28,49,.72) 100%);
}
.services-hero h1{
  grid-area:1/1;align-self:end;position:relative;z-index:1;
  width:min(88.8%,1500px);max-width:none;margin:0 auto;color:#fff;
  text-shadow:none;
}
.services-hero-details{
  grid-area:2/1;position:relative;z-index:1;width:min(88.8%,1500px);margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(210px,.28fr);
  align-items:start;gap:clamp(36px,7.5vw,126px);
}
.services-hero-description{margin:0;color:#e9f1fa;max-width:clamp(540px,calc(50vw - 20px),860px);text-wrap:pretty}
.services-hero-identity{display:grid;flex-shrink:0;gap:3px;margin:0;text-align:right}
.services-hero-identity strong{color:#fff}
.services-hero-identity span{color:#b7cadc}
.services-hero-footer{grid-area:3/1;position:relative;z-index:1;width:min(88.8%,1500px);margin:0 auto;display:flex;justify-content:space-between;align-items:last baseline;gap:32px}
.services-hero-links{min-width:0}
.services-hero-links ul{display:flex;flex-wrap:wrap;gap:10px 48px;list-style:none;margin:0;padding:0}
.services-hero-links li{display:block}
.services-hero-links a{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;color:#e2ecf5;text-decoration:none}
.services-hero-links a::after{content:"";position:absolute;bottom:7px;left:0;right:100%;height:2px;background:var(--blue);transition:right .18s;pointer-events:none}
.services-hero-links a:hover::after,
.services-hero-links a:focus-visible::after{right:0}
.services-hero-link-icon{display:block;width:14px;height:14px;flex:none}
.services-hero-links a:hover{color:#fff}
.services-hero-links a:focus-visible{outline:2px solid #fff;outline-offset:4px;color:#fff}
/* Bring the paragraph closer to the sleeve on laptop screens, while preserving the 1100px boundary. */
@media(1100px<width<=1360px){
  .services-hero-description{max-width:clamp(540px,calc(50vw - 10px),660px)}
}
@media(width<=1100px){
  .services-hero-description{max-width:540px}
  .services-hero-details{gap:36px}
  .services-hero-links ul{gap:8px 32px}
}
@media(width>800px) and (max-aspect-ratio:3/2){
  .services-hero-extension,.services-hero-background{object-position:100% 30%}
}
@media(width<=800px){
  .services-hero{--services-mobile-photo-height:450px;display:block;height:auto;min-height:0;max-height:none;padding:450px 0 36px}
  .services-hero .services-hero-inner{position:relative;z-index:1;display:block;width:calc(100% - 40px)}
  .services-hero-scene{position:absolute;top:56px;right:0;width:100%;height:var(--services-mobile-photo-height)}
  .services-hero-extension{display:none}
  .services-hero-original{width:100%;height:100%;-webkit-mask-image:none;mask-image:none}
  .services-hero-background{object-position:50% 27%;object-fit:cover}
  .services-hero-scene::after{background:linear-gradient(180deg,rgba(7,28,49,0) 55%,rgba(7,28,49,.18) 68%,rgba(7,28,49,.66) 84%,#071c31 100%)}
  .services-hero h1{width:100%;max-width:none}
  .services-hero-title-break{display:none}
  .services-hero-details{width:100%;grid-template-columns:1fr;gap:26px;margin-top:30px}
  .services-hero-description{max-width:none;text-shadow:0 1px 3px rgba(0,0,0,.65)}
  .services-hero-identity{display:none}
  .services-hero-footer{width:100%;margin-top:30px;align-items:flex-end;gap:24px}
  .services-hero-links ul{display:grid;gap:0}
}
@media(width<=620px){
  .services-hero-scene{top:54px}
  .services-hero-footer{flex-wrap:wrap}
  .services-hero-links{width:100%}
  .services-hero-identity{margin-left:auto}
}
@media(width<=480px){
  .services-hero{--services-mobile-photo-height:350px;padding-top:380px}
  .services-hero-background{object-position:50% 23%}
  .services-hero-links ul{display:grid;gap:0}
  .services-hero-links a{min-height:44px}
}
@media(prefers-reduced-motion:reduce){
  .services-hero-links a::after{transition:none}
}
