/* =====================================================================
   THE OHS — the closing band and the footer, on the hero photograph
   ---------------------------------------------------------------------
   Carries home-hero-bg.jpg down to the bottom of the page, so the site
   opens and closes on the same picture instead of ending on flat ink.

   THE TWO BANDS ARE TREATED DIFFERENTLY, AND THAT IS THE POINT.

   The "Already operating machinery?" band holds one heading, one line
   of copy and two buttons. There is room for a photograph there, so it
   gets one at full strength.

   The footer holds four columns of links, a legal paragraph and a
   copyright line -- eighteen pieces of small text. A photograph behind
   that is noise, and worse, it is unreadable noise. So the footer takes
   the same picture at a fraction of the strength: enough to continue
   the texture, not enough to compete with a link.

   A MEASURED PROBLEM, FOUND ON THE WAY.

   The footer's smallest text -- the SERVICES / THE FRAMEWORK /
   GOVERNMENT labels and the copyright line -- is rgb(141,132,116) at
   11px. On today's flat ink that measures 5.01:1, which clears the 4.5
   minimum by almost nothing. Put any photograph behind it and it fails:

     ink at 88% over the photo's brightest pixel -> 3.66:1
     ink at 92%                                  -> 4.14:1
     ink at 94%                                  -> 4.35:1
     ink at 95%                                  -> 4.49:1   still short

   There is no scrim strength that rescues that colour, so the colour
   itself is lifted to rgba(255,255,255,.62) -- which measures 6.21:1
   against the worst pixel the photograph can put behind it. That is not
   decoration; without it this file would make a legibility problem the
   page did not have before.
   ===================================================================== */

/* ── 1 · The closing band ─────────────────────────────────────────── */

section.eu-onink.eu-onink {
  position: relative;
  isolation: isolate;
  background-color: #16130f;      /* the colour it is today, if the photo never arrives */
  overflow: hidden;
}

section.eu-onink.eu-onink::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;

  background-image:
    /* the brand's warm light, so this band belongs to the same page as
       the hero rather than looking like a second site */
    radial-gradient(60% 120% at 0% 50%, rgba(140, 13, 21, .38) 0%, transparent 62%),
    /* the scrim: 80% ink. At that strength the body copy still measures
       6.6:1 and the heading 11:1 against the brightest pixel in the
       picture. */
    linear-gradient(90deg, rgba(22, 19, 15, .90) 0%, rgba(22, 19, 15, .80) 45%, rgba(22, 19, 15, .70) 100%),
    /* and a fade to solid ink at the bottom edge, which is what hides
       the seam where this band meets the footer */
    linear-gradient(180deg, rgba(22, 19, 15, .35) 0%, transparent 30%, rgba(22, 19, 15, .96) 100%),
    url("../img/home-hero-bg.jpg");

  background-repeat: no-repeat;
  background-size: cover, cover, cover, cover;
  background-position: center, center, center, 62% 55%;
  filter: saturate(.85);
}

/* The band's own content has to sit above the layer. */
section.eu-onink.eu-onink > * {
  position: relative;
  z-index: 1;
}

/* ── 2 · The footer ───────────────────────────────────────────────── */

body footer {
  position: relative;
  isolation: isolate;
  background-color: #16130f;
  overflow: hidden;
}

body footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;

  background-image:
    /* 94% ink. The picture is present as texture and grain, not as a
       subject -- which is all a footer can carry. */
    linear-gradient(180deg, rgba(22, 19, 15, .97) 0%, rgba(22, 19, 15, .94) 40%, rgba(22, 19, 15, .96) 100%),
    url("../img/home-hero-bg.jpg");

  background-repeat: no-repeat;
  background-size: cover, cover;
  /* Anchored to the bottom so the crop continues downward from the band
     above rather than restarting on the same part of the picture. */
  background-position: center, center bottom;
  filter: saturate(.7);
}

body footer > * {
  position: relative;
  z-index: 1;
}

/* The lift described at the top of this file. These are the two places
   rgb(141,132,116) is used: the column headings (SERVICES, THE
   FRAMEWORK, GOVERNMENT) and the copyright strip. */
body footer h4,
body footer .base {
  color: rgba(255, 255, 255, .62);
}

/* The legal paragraph and the "delivered with" line. The first already
   had headroom; the second is the same dim colour as the headings, so
   it is lifted with them rather than left to drift darker. */
body footer p {
  color: rgba(255, 255, 255, .74);
}

body footer a {
  color: rgba(255, 255, 255, .92);
}

body footer a:hover {
  color: #ffffff;
}

/* ── 3 · Narrow screens ───────────────────────────────────────────── */
/* The band's text runs full width once it stops being a two-column
   layout, so the left-to-right scrim becomes a top-to-bottom one for
   the same reason it does in the hero. */
@media (max-width: 900px) {
  section.eu-onink.eu-onink::before {
    background-image:
      radial-gradient(90% 60% at 50% 0%, rgba(140, 13, 21, .34) 0%, transparent 66%),
      linear-gradient(180deg, rgba(22, 19, 15, .88) 0%, rgba(22, 19, 15, .82) 50%, rgba(22, 19, 15, .96) 100%),
      url("../img/home-hero-bg.jpg");
    background-size: cover, cover, cover;
    background-position: center, center, 60% 45%;
  }
}