/* =====================================================================
   capabilities.html + technology.html, 23 Oct 2026: the network-side pages.
   One black room from top to bottom; the pictures are the lit things in it.
   Needs main.css (tokens, nav, footer, buttons), v2.css (--gutter) and pop.css.
   Five type sizes: h1, h2, h3 / list rows, body (18px), small (14px).
   ===================================================================== */
.np {
  --np-ink: #f5f5f5;
  --np-muted: #a8a8a8;                 /* 8:1 on black: secondary text, never fainter */
  --np-h1: clamp(34px, 4.9vw, 84px);
  --np-h2: clamp(34px, 4.2vw, 68px);
  --np-h3: clamp(24px, 2.2vw, 34px);
  --np-body: 18px;
  --np-small: 14px;
  --np-gap: clamp(112px, 12vw, 200px); /* between sections */
  background: #000; color: var(--np-ink);
}
.np p { font-size: var(--np-body); line-height: 1.6; }
.np-h1, .np-h2, .np-h3, .np-verb__word, .np-zoom__a, .np-zoom__b, .np-place__name {
  margin: 0; font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: -0.02em; color: var(--text-pure);
}
.np-h1 { font-size: var(--np-h1); line-height: 0.95; }
.np-h2 { font-size: var(--np-h2); line-height: 1; max-width: 22ch; text-wrap: balance; }
.np-h3 { font-size: var(--np-h3); line-height: 1.05; }
.np-lead { margin: 28px 0 0; max-width: 34em; color: var(--np-ink); }
.np-small, .np-cap { font-size: var(--np-small) !important; line-height: 1.55 !important; color: var(--np-muted); }
.np a:not(.btn) { color: inherit; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.np a:not(.btn):hover { color: var(--accent); }
.np-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 36px; }
.np .np-link { font-weight: 600; text-decoration: none; }
.np .np-link:hover { text-decoration: underline; color: var(--text-pure); }
.np section { padding: 0 var(--gutter); }
.np section + section { margin-top: var(--np-gap); }
.np figure { margin: 0; }
.np img { display: block; max-width: 100%; }
.np picture { display: contents; }   /* WebP / small-width wrappers (23 Oct): no box of their own, every img rule works as before */

/* ---------- hero: the headline left, one lit picture right ---------- */
.np-hero {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 96px);
  align-items: end; padding-top: clamp(120px, 14vh, 170px) !important; min-height: min(92svh, 980px);
}
.np-hero__text { padding-bottom: 8px; }
.np-hero__pic { align-self: stretch; position: relative; min-height: 420px; overflow: hidden; }   /* the lit picture fills the hero top to bottom */
.np-hero__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- capabilities: "A drone over every" + the places ---------- */
.np-places__list .np-h2 { margin-bottom: 40px; }
.np-place-list { list-style: none; margin: 0; padding: 0; }
.np-place__name { font-size: var(--np-h3); line-height: 1.05; }
.np-place__name button { all: unset; cursor: pointer; display: block; }
.np-place__name button:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.np-place__when { margin: 8px 0 0; font-size: var(--np-small) !important; color: var(--accent); }
.np-place__desc { margin: 14px 0 0; max-width: 36em; }
.np-place__who { margin: 6px 0 0; color: var(--np-muted); }
.np-place__pic img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

/* desktop with script: an index. The active place's picture and words sit in the sticky stage on the left */
@media (min-width: 1000px) {
  .js .np-places { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 5vw, 96px); align-items: start; }
  .js .np-places__list { grid-column: 2; grid-row: 1; padding-top: 4px; }
  .js .np-place { padding: 14px 0; }
  .js .np-place__pic, .js .np-place__desc, .js .np-place__who { display: none; }
  .js .np-place__when { margin: 6px 0 0; color: var(--np-muted); transition: color 0.24s ease; }
  .js .np-place__name { color: var(--np-muted); transition: color 0.24s ease; }
  .js .np-place.is-on .np-place__name { color: var(--text-pure); }
  .js .np-place.is-on .np-place__when { color: var(--accent); }
  .np-stage { grid-column: 1; grid-row: 1; position: sticky; top: 12vh; }
  .np-stage__pics { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #070707; }
  .np-stage__pics img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.03); transition: opacity 0.24s ease, transform 1.2s cubic-bezier(0.22, 0.8, 0.24, 1); }
  .np-stage__pics img.is-on { opacity: 1; transform: none; }
  .np-stage__words { position: relative; margin-top: 22px; min-height: 9.5em; }
  .np-stage__words > div { position: absolute; inset: 0 auto auto 0; opacity: 0; transform: translateY(10px); transition: opacity 0.24s ease, transform 0.24s ease; }
  .np-stage__words > div.is-on { opacity: 1; transform: none; position: relative; }
  .np-stage__words p { margin: 0; max-width: 36em; }
  .np-stage__words p + p { margin-top: 6px; color: var(--np-muted); }
}
@media (max-width: 999px) { .np-stage { display: none; } }

/* phone and tablet: one card per place in a sideways row (native scrolling with snap, no script) */
@media (max-width: 999px) {
  .np-place-list {
    display: grid; grid-auto-flow: column; grid-auto-columns: min(84%, 520px); gap: 14px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); scroll-padding: 0 var(--gutter);
  }
  .np-place-list::-webkit-scrollbar { display: none; }
  .np-place { scroll-snap-align: start; }
  .np-place__pic { margin-bottom: 18px; }
  .np-place__name button { cursor: default; }
}

/* one look / every day */
.np-modes__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 96px); margin-top: 48px; }
.np-mode p { margin: 16px 0 0; max-width: 34em; }
.np-note { margin: 56px 0 0; max-width: 46em; }
.np-note a, .np-cap a { white-space: nowrap; }

/* ---------- the close: a plain sentence and one action ---------- */
.np-cta { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 28px clamp(32px, 5vw, 96px); align-items: end; padding-top: 0 !important; padding-bottom: 14vh !important; }
.np-cta__h { margin: 0; font-family: var(--font-body); font-weight: 600; font-size: clamp(22px, 2vw, 30px); line-height: 1.3; letter-spacing: -0.01em; text-transform: none; color: var(--text-pure); }
.np-cta__h + p { margin: 10px 0 0; max-width: 32em; }
.np-cta .np-actions { margin-top: 0; justify-content: flex-start; }
.np-cta .np-small { grid-column: 1 / -1; margin: 0; }

/* ---------- technology: one frame, three distances (a 300vh scroll with a sticky stage) ---------- */
.np-zoom { position: relative; height: 250vh; }
.np-zoom__stage {
  position: sticky; top: 0; height: 100svh; display: grid; place-items: center; align-content: center;
  grid-template-columns: 1fr minmax(0, min(30vw, 40svh)) 1fr; grid-template-rows: auto auto auto; column-gap: clamp(24px, 3vw, 48px);
}
.np .np-zoom__a, .np .np-zoom__b { grid-column: 1 / -1; font-size: clamp(44px, min(6.6vw, 11svh), 112px); line-height: 0.95; text-align: center; margin: 0; }   /* .np p would make them body size */
.np-zoom__a { grid-row: 1; margin-bottom: 0.18em; }
.np-zoom__frame { grid-column: 2; grid-row: 2; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: #070707; }
.np-zoom__frame img { width: 100%; height: 100%; object-fit: cover; transform-origin: var(--zx, 50%) var(--zy, 50%); transition: transform 0.7s cubic-bezier(0.22, 0.8, 0.24, 1); }
.np-zoom__b { grid-row: 3; position: relative; z-index: 1; margin-top: -0.3em; opacity: 0.001; transform: translateY(0.25em); transition: opacity 0.5s ease, transform 0.5s ease; }
.np-zoom__cap { grid-column: 3; grid-row: 2; align-self: start; justify-self: start; max-width: 28ch; margin: 0 !important; opacity: 0.001; transform: translateY(10px); transition: opacity 0.5s ease, transform 0.5s ease; }
.np-zoom[data-step="1"] .np-zoom__b, .np-zoom[data-step="2"] .np-zoom__b { opacity: 1; transform: none; }
.np-zoom[data-step="2"] .np-zoom__cap { opacity: 1; transform: none; }
@media (max-width: 800px) {
  .np-zoom__stage { grid-template-columns: 1fr; padding: 0 var(--gutter); }
  .np-zoom__frame { grid-column: 1; width: min(70vw, 44svh); }
  .np .np-zoom__a, .np .np-zoom__b { font-size: 10vw; }
  .np-zoom__cap { grid-column: 1; grid-row: 4; justify-self: center; text-align: center; margin-top: 18px !important; }
}

/* ---------- technology: the drag-to-compare pictures (23 Oct: heat = photo | thermal, the building site = 2020 | 2022) ---------- */
.np-vision { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.np-vision__text p { margin: 22px 0 0; max-width: 32em; }
.np-change { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.np-change__text p { margin: 22px 0 0; max-width: 32em; }
.np-compare { position: relative; aspect-ratio: var(--ar, 1600 / 1000); overflow: hidden; background: #070707; touch-action: pan-y; }
.np-compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.np-compare__before { clip-path: inset(0 calc(100% - var(--cut)) 0 0); }
.np-compare__line { position: absolute; top: 0; bottom: 0; left: var(--cut); width: 3px; margin-left: -1.5px; background: var(--text-pure); pointer-events: none; }
/* the knob: a white disc with two small arrows, so it reads as something to drag */
.np-compare__line::after {
  content: ''; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%;
  background: var(--text-pure) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath d='M17 16l-6 6 6 6M27 16l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 44px 44px no-repeat;
}
.np-compare__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
@media (pointer: coarse) { .np-compare.is-js .np-compare__range { pointer-events: none; } }   /* touch: js/netpages.js moves it */
.np-compare__range:focus-visible + .np-compare__tags { outline: 2px solid var(--accent); outline-offset: 4px; }
.np-compare__tags { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; padding: 14px 16px; pointer-events: none; }
.np-compare__tags span { background: #000; color: var(--text-pure); font-size: var(--np-small); font-weight: 600; padding: 6px 10px; }

/* ---------- technology: privacy ---------- */
.np-privacy { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.np-privacy__pic img { width: 100%; height: auto; }
.np-privacy__pic .np-cap { margin: 12px 0 0; }
.np-rules { list-style: none; margin: 30px 0 0; padding: 0; }
.np-rules li { font-size: var(--np-body); line-height: 1.55; padding: 16px 0 16px 28px; position: relative; max-width: 30em; }
.np-rules li::before { content: ''; position: absolute; left: 0; top: 26px; width: 12px; height: 12px; background: var(--accent); }

/* ---------- technology: wait / fly / look ---------- */
.np-verbs { padding: 0 !important; }
.np-verb { position: relative; height: 100svh; overflow: clip; display: flex; align-items: flex-end; padding-bottom: 26svh; }   /* the word stops above the sentence box at the bottom */
.np-verb img, .np-verb video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.72); }
.np-verb__word {
  position: sticky; top: 50%; transform: translateY(-50%); z-index: 1; align-self: flex-start; width: 100%; margin-top: 50svh;
  text-align: center; font-size: clamp(96px, 17vw, 300px); line-height: 0.85; color: var(--text-pure);
}
.np-verb__line {
  position: absolute; left: var(--gutter); bottom: clamp(28px, 6vh, 64px); z-index: 1; max-width: 34em; margin: 0;
  padding: 14px 18px; background: rgba(0, 0, 0, 0.72); color: var(--text-pure);
}

/* ---------- technology: where this stands ---------- */
.np-status__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 72px); margin-top: 48px; }
.np-status__cols p { margin: 14px 0 0; max-width: 26em; }
.np-specs { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 64px 0 0; padding: 0; }
.np-specs li { background: #0d0d0d; padding: 22px 22px 24px; font-size: var(--np-body); line-height: 1.4; color: var(--np-muted); }
.np-specs strong { display: block; margin-bottom: 4px; font-family: var(--font-display); font-weight: 700; font-size: var(--np-h3); line-height: 1.05; text-transform: uppercase; color: var(--text-pure); }

/* ---------- phone ---------- */
@media (max-width: 800px) {
  .np { --np-body: 16px; --np-gap: 104px; }
  .np { --np-h1: 9vw; }
  .np-hero { grid-template-columns: 1fr; min-height: 0; padding-top: 108px !important; gap: 36px; }
  .np-cta { grid-template-columns: 1fr; }
  .np-h1 { max-width: none; }
  .np-hero__pic { order: 2; margin: 0 calc(var(--gutter) * -1); min-height: 0; aspect-ratio: 4 / 3; }
  .np-modes__cols, .np-status__cols { grid-template-columns: 1fr; }
  .np-vision, .np-change, .np-privacy { grid-template-columns: 1fr; gap: 28px; }
  .np .np-compare, .np .np-privacy__pic { margin: 0 calc(var(--gutter) * -1); }   /* .np needed: ".np figure { margin: 0 }" won before */
  .np-change__text, .np-vision__text { order: -1; }   /* "drag to compare" is read before the picture */
  .np-specs { grid-template-columns: 1fr 1fr; }
  .np-verb__word { font-size: 24vw; }
  .np-verb { padding-bottom: 34svh; }
  .np-verb__line { left: 0; right: 0; bottom: 0; max-width: none; padding: 16px var(--gutter) 22px; }
  .np-cta { padding-top: 6vh !important; padding-bottom: 10vh !important; }
}
@media (max-width: 800px) and (min-width: 0) { .np-privacy__pic .np-cap { padding: 0 var(--gutter); } }

/* ---------- entrances: each part rises a little as its section comes in (js/netpages.js) ---------- */
.js .np-rise { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.8, 0.24, 1); transition-delay: var(--d, 0ms); }
.js .np-rise.is-in { opacity: 1; transform: none; }
.np-in img { animation: np-settle 1.6s cubic-bezier(0.22, 0.8, 0.24, 1) both; }
@keyframes np-settle { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .js .np-rise { opacity: 1; transform: none; transition: none; }
  .np-in img { animation: none; }
  .np-zoom { height: auto; }
  .np-zoom__stage { position: static; height: auto; padding: 40px var(--gutter); }
  .np-zoom__b, .np-zoom__cap { opacity: 1; transform: none; }
  .np-zoom__frame img, .np-stage__pics img { transition: none; }
}

/* 24 Oct 2026, inspection pages (inspections.html, et/ulevaatus.html): their own short header, the logo, the language
   switch and one button. No network menu: someone booking a roof check should not be offered 2027 things up top. */
.nav--solo .nav__right > .btn { display: inline-flex; }
.nav--solo .nav__right > .nav__lang { display: inline-flex; }   /* main.css hides it on phones (it lives in the phone menu there) */
.nav--solo .nav__brand, .nav--solo .nav__brand-mark { flex-shrink: 0; }
.nav--solo .solo-short { display: none; }
@media (max-width: 560px) {
  .nav--solo .nav__right { gap: 12px; }
  .nav--solo .nav__right > .btn { padding: 9px 16px; }
  .nav--solo .solo-long { display: none; }
  .nav--solo .solo-short { display: inline; }
}
/* inspection page: the four "good to know" points run in two columns on wide screens (no empty right half) */
@media (min-width: 1000px) {
  .np-know .np-rules { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(32px, 5vw, 96px); }
  .np-know .np-rules li { max-width: 34em; }
}
/* small tablets: three short columns read better as two than as one narrow column */
@media (min-width: 600px) and (max-width: 800px) {
  .np-status__cols { grid-template-columns: 1fr 1fr; }
}
/* inspection page, round 2 (Henry 24 Oct: "background is just a black colour"): How it works on a light field,
   the site's own off-white (--text-spectral) with black ink; Good to know opens with a wide picture, edge to edge. */
.np-field { background: var(--text-spectral); color: #0a0a0a; padding-top: clamp(80px, 9vw, 140px) !important; padding-bottom: clamp(80px, 9vw, 140px) !important; }
.np-field .np-h2, .np-field .np-h3 { color: #0a0a0a; }
.np-field p { color: #0a0a0a; }
.np-field + section { margin-top: clamp(80px, 9vw, 140px); }
.np .np-know__band { margin: 0 calc(var(--gutter) * -1) clamp(40px, 5vw, 72px); }
.np-know__band img { display: block; width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; }
@media (max-width: 800px) { .np-know__band img { aspect-ratio: 16 / 10; } }

/* network sub-pages, 24 Oct 2026 (Henry: "more colourful"): the off-white field on one section per page, and the
   close on the brand red with black ink (white on #FF3B30 is 3.6:1, too weak for body text). */
.np-field dt, .np-field dd, .np-field li, .np-field .ind-facts dd { color: #0a0a0a; }
.np-field .ind-facts dt, .np-field .np-small, .np-field .np-cap, .np-field .ind-side + .ind-side .ind-facts dd { color: #4a4a4a; }
.np-field a:not(.btn) { color: #0a0a0a; }
.np-field a:not(.btn):hover { color: var(--accent); }
.np-field .np-specs li { background: #0a0a0a; color: #c8c8c8; }
.np-field .np-specs strong { color: #fff; }
.np-red { background: var(--accent); color: #0a0a0a; padding-top: clamp(72px, 8vw, 128px) !important; padding-bottom: clamp(72px, 8vw, 128px) !important; }
.np-red .np-cta__h, .np-red p, .np-red .np-small { color: #0a0a0a; }
.np-red .btn--solid { background: #0a0a0a; color: #fff; border-color: #0a0a0a; }
.np-red .btn--solid:hover, .np-red .btn--solid:focus-visible { background: #fff; color: #0a0a0a; }
.np-red .np-link, .np-red a:not(.btn) { color: #0a0a0a; }
.np-red .np-link:hover, .np-red a:not(.btn):hover { color: #fff; }
.np-red :focus-visible { outline-color: #0a0a0a; }
.np-field .btn--ghost { background: transparent; border-color: #0a0a0a; color: #0a0a0a; }
.np-field .btn--ghost:hover, .np-field .btn--ghost:focus-visible { background: #0a0a0a; color: #fff; }