/* scroll-lab (10/22): the five services as one horizontal track (B, C). See build.py and track.js. */

/* ---------- panels, stacked: phones, reduced motion, no JS ---------- */
html body .track{position:relative}
html body .track--services{padding-block:72px}
html body .track--services .track__back{margin-bottom:44px}
html body .track--services .track__back .eyebrow{margin-bottom:18px}
html body .track--services .track__back h2{margin:0}
html body .track--cover .track__rail{padding-block:72px 24px}
html body .track__veil{display:none}
html body .track__rail{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:24px}
html body .track-panel{display:flex;flex-direction:column;min-width:0;border-radius:12px;overflow:hidden;background:var(--v4-card);box-shadow:inset 0 0 0 1px var(--v4-line);color:inherit;text-decoration:none}
html body .track-panel:focus-visible{outline:1px solid var(--gold);outline-offset:-1px}
.track-panel__media{margin:0;aspect-ratio:16/10;overflow:hidden;background:#0d1821}
.track-panel__media img{display:block;width:100%;height:100%;object-fit:cover;transition:scale 1.6s var(--ucs-entry-ease,ease)}
.track-panel:hover .track-panel__media img{scale:1.03}
/* the two wide photos, cut narrower than in v4: keep the house and the tower in frame */
.track-panel--home-security .track-panel__media img{object-position:72% center}
.track-panel--building-security .track-panel__media img{object-position:20% center}
.track-panel__body{display:flex;flex-direction:column;flex:1;padding:28px 30px 30px}
.track-panel__top{display:flex;align-items:center;gap:12px;margin-bottom:18px}
html body .track-panel .ucs-icon{flex:none;width:24px;height:24px;margin:0;color:var(--gold)}
html body .track-panel .eyebrow{margin:0;color:var(--gold)}
.track-panel__count{margin-left:auto;font:500 13px/1 var(--sans);letter-spacing:.08em;color:#8d98a3;font-variant-numeric:tabular-nums}
html body .track-panel h3{margin:0;font-size:clamp(24px,2vw,28px);line-height:1.4;color:#f5f4ef}
html body .track-panel p:not(.eyebrow){margin:12px 0 0;font-size:16px;line-height:1.8;color:#aeb7c2}
.track-panel__link{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:28px;color:var(--gold);font-size:14px;letter-spacing:.04em}
.track-panel__link i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(246,245,239,.25);font-style:normal;transition:background-color .4s ease,color .4s ease}
.track-panel:hover .track-panel__link i{background:var(--gold);color:#111e28;box-shadow:none}
@media(max-width:650px){html body .track--services{padding-block:52px}html body .track--cover .track__rail{padding-block:52px 8px}html body .track__rail{gap:16px}.track-panel__body{padding:24px}}

/* ---------- pinned: the panels move left as the page scrolls down ---------- */
html.track-on body .track--services{padding:0}
html.track-on body .track__pin{position:sticky;top:0;height:100vh;overflow:clip}
html.track-on body .track--services .track__back{position:absolute;inset:0;margin:0 auto;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:13vh}
html.track-on body .track--services .track__back h2{font-size:clamp(44px,4.4vw,72px);line-height:1.32;max-width:42vw}
html.track-on body .track__veil{display:block;position:absolute;inset:0;z-index:1;background:#0b141c;opacity:calc(var(--cover,0) * .6);pointer-events:none}
html.track-on body .track__rail{position:absolute;top:0;bottom:0;left:0;z-index:2;display:flex;gap:0;width:max-content;max-width:none;margin:0;padding:0;transform:translate3d(calc(var(--start,0) * 100vw),0,0);will-change:transform}
html.track-on body .track-panel{width:clamp(440px,44vw,700px);height:100%;border-radius:0;box-shadow:inset 1px 0 0 var(--v4-line)}
html.track-on body .track-panel:first-of-type{box-shadow:-30px 0 60px rgba(5,10,15,.45)}
html.track-on body .track-panel__media{flex:1 1 0;min-height:0;aspect-ratio:auto}
html.track-on body .track-panel__body{flex:none;padding:36px 44px 48px}
html.track-on body .track-panel h3{font-size:clamp(28px,2.3vw,36px);line-height:1.38}

/* ---------- D: each service a card that all but fills the screen (deck.js) ---------- */
/* without JS or with reduced motion: the heading, then the cards, down the page */
html body .svc-deck{padding-bottom:12px}
.svc-deck__pin{display:flex;flex-direction:column;gap:12px;padding:0 12px}
html body .svc-deck__head{margin-bottom:32px}
html body .svc-deck__head .eyebrow{margin-bottom:18px}
html body .svc-deck__head h2{margin:0}
html body .svc-full{position:relative;display:block;height:calc(100vh - 24px);min-height:600px;border-radius:20px;overflow:hidden;isolation:isolate;
  background:#0d1821;color:#f5f4ef;text-decoration:none;transform-origin:50% 50%}
html body .svc-full:focus-visible{outline:1px solid var(--gold);outline-offset:-6px}
/* the photo (deck.js moves it as its card comes in) */
.svc-full__media{position:absolute;inset:0;overflow:hidden}
.svc-full__zoom{position:absolute;inset:0}
.svc-full__media img{position:absolute;top:0;left:-10%;width:120%;height:100%;object-fit:cover;will-change:transform} /* overhangs, so its lag (deck.js) never shows an edge */
.svc-full--home-security .svc-full__media img{object-position:72% center}
.svc-full--building-security .svc-full__media img{object-position:22% center}
/* words over any photo: dark at the foot and the left where they sit */
.svc-full__shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(9,17,24,.88) 0%,rgba(9,17,24,.5) 36%,rgba(9,17,24,.04) 70%),linear-gradient(90deg,rgba(9,17,24,.5),transparent 60%)}
/* the card beneath darkens as the next comes over it (deck.js) */
.svc-full__dim{position:absolute;inset:0;background:#070d12;opacity:0;pointer-events:none}
/* the words: one block at the foot on the left; the name in the size of a section heading, not a poster */
.svc-full__copy{position:absolute;left:clamp(24px,4.5vw,72px);bottom:clamp(32px,8vh,80px);width:min(34em,calc(100% - 48px))}
html body .svc-full__count{display:flex;align-items:center;gap:12px;margin:0 0 20px;font:500 13px/1 var(--sans);letter-spacing:.12em;color:var(--gold);font-variant-numeric:tabular-nums}
html body .svc-full .ucs-icon{display:block;flex:none;width:22px;height:22px;margin:0;color:var(--gold)}
html body .svc-full__name{margin:0 0 16px;font:400 clamp(38px,3.6vw,56px)/1.2 var(--serif);font-family:var(--serif)!important;letter-spacing:.02em;color:#f5f4ef}
html body .svc-full__name span,html body .svc-full__title span{font-family:inherit!important}
html body .svc-full__title{margin:0 0 10px;font:400 21px/1.55 var(--serif);font-family:var(--serif)!important;color:#e9e4d8}
html body .svc-full__line{margin:0;font-size:16px;line-height:1.8;color:#c8cfd6}
.svc-full__link{display:inline-flex;align-items:center;gap:14px;margin-top:24px;color:var(--gold);font-size:14px;letter-spacing:.04em}
.svc-full__link i{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(246,245,239,.3);font-style:normal;transition:background-color .4s ease,color .4s ease}
html body .svc-full:hover .svc-full__link i{background:var(--gold);color:#111e28;box-shadow:none}
html[lang=en] body .svc-full__name{font-size:clamp(34px,3.2vw,50px);letter-spacing:0}

/* with JS: one pinned stage, the heading alone on it at first (as B's), the cards coming over it one over another,
   later over earlier (deck.js moves them) */
html.deck-js body.page-index .svc-deck.section{padding-block:0} /* also when nested inside .map-deck */
html.deck-js body .svc-deck__pin{position:sticky;top:0;display:block;height:100vh;padding:0;overflow:clip}
/* the heading in the middle of the screen: at the foot (as B) it came into view only after an empty screen of dark */
html.deck-js body .svc-deck__head{position:absolute;inset:0;margin:0 auto;display:flex;flex-direction:column;justify-content:center;padding-top:40px;transform-origin:50% 50%}
/* the same size as the map's heading just above (map-lab D, as v4's section headings), so one runs into the next */
html.deck-js body .svc-deck__head h2{font-size:clamp(34px,3.4vw,50px);line-height:1.3}
html.deck-js body .svc-full{position:absolute;inset:12px;z-index:calc(var(--i) + 1);height:auto;min-height:0;will-change:transform;box-shadow:0 0 80px rgba(3,8,11,.55)}
/* the working-together steps: the site's own icons (as on the service cards) in place of the drawn ones */
html body .process-quiet .ucs-icon.process-quiet__icon{width:44px;height:44px;margin:10px 4px 0 0;color:var(--gold)}

@media(max-width:850px){
  .svc-deck__pin{gap:8px;padding:0 8px}
  html body .svc-full{height:84svh;min-height:540px;border-radius:16px}
  html.deck-js body .svc-deck__pin{height:100svh}
  .svc-full__media img{top:-10%;left:0;width:100%;height:120%} /* the cards come up: the photo's overhang is above and below */
  html.deck-js body .svc-deck__head h2{font-size:clamp(36px,10vw,48px)}
  html.deck-js body .svc-full{inset:76px 8px 8px} /* below the 68px header */
  .svc-full__copy{left:24px;bottom:28px}
  html body .svc-full__name{font-size:clamp(34px,9.5vw,44px)}
  html[lang=en] body .svc-full__name{font-size:clamp(30px,8vw,38px)}
  html body .svc-full__title{font-size:19px}
  html[data-variant] body .svc-full__copy{bottom:84px} /* clear of the comparison bar, which only the lab has */
}

/* ---------- D: the whole-screen map (map-lab D) above the services ---------- */
.map-deck{margin-top:14vh} /* room after the hero: the islands came straight under 250+ / 2013 */
/* the islands smaller: the tilted map drawn at 0.8x (its pins and photo are read off the screen, so they follow) */
html body .map-deck .fp-stage--d .footprint__plane{scale:.8}
/* A scroll-controlled fade, not a pop: keep the map's pin-projection coordinates unchanged on entry. */
html.deck-js body .map-deck>.fp-stage{opacity:var(--map-enter,1)}
/* These two blocks follow the scroll timeline; the site's separate .9s reveal must not delay them again. */
html.deck-js body .map-deck :is(.fp-stage__copy,.svc-deck__head){transition:none!important;transition-delay:0s!important}
html.deck-js body .map-deck .fp-stage__copy{translate:none}
/* Desktop: the map's full-size black veil closes first; only then does the service heading rise.
   Keep the veil's parent at full size so no blue border remains when blackout reaches 100%. */
@media(min-width:1000px){
  html.deck-js body .map-deck>.fp-stage{position:sticky;top:0;z-index:1;height:100vh;min-height:0;isolation:isolate}
  html.deck-js body .map-deck>.fp-stage::after{content:"";position:absolute;inset:0;z-index:5;background:#000;opacity:var(--map-dark,0);pointer-events:none}
  html.deck-js body .map-deck .footprint__plane{scale:calc(.8 - var(--map-dark,0) * .048)}
  html.deck-js body .map-deck>.fp-stage .fp-stage__copy{opacity:var(--map-copy,1)}
  html.deck-js body .map-deck>.svc-deck{position:relative;z-index:2;background:none}
  html.deck-js body .map-deck .svc-deck__pin{pointer-events:none}
  html.deck-js body .map-deck .svc-full{pointer-events:auto}
}

/* ---------- comparison bar (as hero-lab) ---------- */
.lab-bar{position:fixed;left:50%;bottom:16px;translate:-50% 0;z-index:200;display:flex;gap:2px;padding:4px;border:1px solid #ffffff26;border-radius:999px;background:#0a1219c4;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font:500 12px/1 var(--sans);letter-spacing:.04em;white-space:nowrap}
.lab-bar a{padding:9px 13px;border-radius:999px;color:#cfd6dd;text-decoration:none}
.lab-bar a:hover{color:#fff;background:#ffffff14}
.lab-bar a[aria-current]{background:#efb52e;color:#14181d}
@media(max-width:650px){.lab-bar a{padding:9px 11px}}