/* ==========================================================================
   The closing band: About and the five service pages.

   The ZAUK logo is a window onto the page's own photograph: the mark
   (img/zauk-mark.png, the homepage's cut-out letters) masks a sharp copy of
   the picture, set over the same picture blurred and darkened. The letters
   read as clear glass onto the room; the band around them is the room out
   of focus, not a flat colour. Each page names its photograph once:

     <section class="close wrap" style="--close-img:url(/img/...)">

   The band runs straight into the footer: it fades to the footer's own
   colour at its foot, and the footer drops its top margin and rounded
   corners when it follows the band, so there is no strip of pale page
   between two dark blocks.
   ========================================================================== */

.close { position:relative; isolation:isolate; overflow:hidden;
  padding-block:clamp(3.2rem,7vw,5.2rem) clamp(2.2rem,4.5vw,3.4rem); }
/* The room, out of focus. Inset past the edges, because a blur fades to
   transparent at the edge of its own box and would leave a pale rim. */
.close::before { content:""; position:absolute; inset:-80px; z-index:-2;
  background:var(--close-img, none) center / cover no-repeat;
  filter:blur(30px) saturate(1.05) brightness(.4); }
/* Dim enough under the copy for white type, and fully the footer's #0E1A26
   at the foot, which is what joins the two. */
.close::after { content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to bottom,
    rgba(14,26,38,.62) 0%, rgba(14,26,38,.38) 34%, rgba(14,26,38,.5) 70%, #0E1A26 100%); }

/* The logo, at the width of the page's content. Masked rather than drawn:
   the letters ARE the photograph. */
.close-logo { margin-top:clamp(2.2rem,5.4vw,4rem); width:100%; aspect-ratio:2008 / 358;
  background:var(--close-img, none) center / cover no-repeat;
  -webkit-mask:url(/img/zauk-mark.png) center / contain no-repeat;
          mask:url(/img/zauk-mark.png) center / contain no-repeat;
  /* A slow settle as it arrives: the picture inside the letters eases from
     slightly enlarged to rest. Sized by WIDTH: the box is about 5.6:1, so a
     photograph as wide as the box is always taller than it, and covers. The
     transition restates .rv's two properties, or they would be dropped. */
  background-size:118% auto;
  transition:background-size 1.6s var(--ease-out, ease),
             opacity .8s var(--ease, ease) var(--d, 0ms), transform .8s var(--ease, ease) var(--d, 0ms); }
.close-logo.in { background-size:100% auto; }
@supports not ((mask-image:url(x)) or (-webkit-mask-image:url(x))) {
  .close-logo { background:none; }
}
@media (prefers-reduced-motion: reduce) { .close-logo, .close-logo.in { transition:none; background-size:100% auto; } }

/* One dark run from the band into the footer. */
.ondark + .site-footer { margin-top:0; border-radius:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08); }