/* ==========================================================================
   DotnDot inner pages (Services, About, ...): page hero, breadcrumb,
   particle picture box and the dark band. Loaded after site.css.
   ========================================================================== */

/* ===== Hero: same dot-typography stage as the homepage, a little shorter ===== */
.page-hero{min-height:clamp(580px,calc(100vh - 84px),800px)}
.page-hero .stage-c{padding:22px 0 72px}
.page-hero .copy.center .t2{min-height:0}                  /* static title: no space kept for changing slides */
.page-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;z-index:-2;height:140px;pointer-events:none;background:linear-gradient(rgba(255,255,255,0),#fff)}   /* soft edge into the next section */
.crumbs{display:inline-flex;align-items:center;gap:10px;margin-bottom:14px;padding:7px 16px;border-radius:999px;background:rgba(255,255,255,.85);border:1px solid var(--line);
  font:600 12.5px/1 "Inter Tight",sans-serif;color:var(--muted);backdrop-filter:blur(6px)}
.crumbs a{transition:color .3s}
.crumbs a:hover{color:var(--blue)}
.crumbs [aria-current]{color:var(--navy)}
.crumbs .sep{width:5px;height:5px;border-radius:50%;background:var(--red)}

/* ===== Particle pictures (dotart.js) and the little window dots on picture cards ===== */
.dot-art{position:relative;overflow:hidden;background:radial-gradient(circle at 50% 45%,#fff,rgba(255,255,255,0) 62%),linear-gradient(160deg,#EAF1F9,#F8FAFD)}
.dot-art canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.dot-art.bare{background:none;overflow:visible}                     /* no box: the dots sit straight on the page */
.dot-art.bare canvas{-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(transparent,#000 7%,#000 93%,transparent);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(transparent,#000 7%,#000 93%,transparent);mask-composite:intersect}
.sv-dots{display:flex;gap:6px}
.sv-dots i{width:9px;height:9px;border-radius:50%;background:#C9D6E4}
.sv-dots i:first-child{background:var(--red)}.sv-dots i:nth-child(2){background:var(--blue)}

/* ===== Dark band: navy section with soft blue/red glows and a dot texture ===== */
.dark{color:#AEB8CC;background:#070A26}
.dark::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 0% 0%,rgba(38,114,172,.32),transparent 45%),radial-gradient(circle at 100% 100%,rgba(218,37,30,.18),transparent 40%)}
.dark::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;background-image:radial-gradient(circle,rgba(255,255,255,.09) 1px,transparent 1.5px);background-size:26px 26px;
  -webkit-mask-image:linear-gradient(90deg,#000,transparent 60%);mask-image:linear-gradient(90deg,#000,transparent 60%)}
.dark .container{position:relative;z-index:1}
.dark .kicker{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#fff}
.dark .h2{color:#fff}
.dark .h2 .hl{color:#FF6A60}
.dark .lead{color:#AEB8CC}

@media (max-width:900px){
  .page-hero{min-height:0}
  .page-hero .stage-c{padding:16px 0 36px}
}