/* Exit Forward components authored for the multi-page site, shared by the
   homepage (which has its own inline chrome) and by PageLayout pages that opt
   into the theme. Everything here is built from existing tokens only — no new
   colour, font or easing. Keep ef-theme.css as the untouched theme extract and
   put anything we author here instead. */

/* Beat link: closes a compressed section and points at the page that carries
   it in full. Footer Explore link treatment (Bebas 20px, 1px tracking,
   uppercase) over the existing hairline, with the same cubic-bezier the header
   pill uses. */
.ef-beat-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .2);
  font-family: var(--FontBebasNeue), 'BebasNeue', 'Arial Narrow', sans-serif;
  font-size: 20px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  transition: gap .3s cubic-bezier(.4, 0, .2, 1);
}
.ef-beat-link:hover {
  gap: 22px;
  text-decoration: underline;
}
@media (max-width: 600px) {
  .ef-beat-link { margin-top: 24px; }
}

/* Full-bleed section photo. The homepage darkens these by eye per section and
   patches legibility in #replica-overrides with a text-shadow; this does the
   same job once, with a scrim built from the existing ground colour so the
   image reads as part of the panel rather than sitting on top of it. */
.ef-section-bg { opacity: .8; }
.ef-section-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Near-flat, so the scrim doesn't assume where the copy sits — these
     sections put type on the left, the right, or across both. Tuned against
     the Dilate team shot, which is a bright interior; darker photos will read
     stronger through it, which is the right way round. */
  background: linear-gradient(
    to right,
    rgba(21, 19, 19, .74) 0%,
    rgba(21, 19, 19, .64) 100%
  );
}
.ef-section-over-bg {
  text-shadow: 0 1px 10px rgba(15, 14, 14, .85), 0 0 26px rgba(15, 14, 14, .6);
}
/* No shadow on the display headline, anywhere. The outlined half of it is a
   1px stroke around empty space, so any glow wide enough to read floods the
   counters and the insides of the strokes and the line comes out as dark grey
   letters rather than an outline with the photograph behind it. The scrim
   below carries legibility instead; where a photo is bright enough to need
   more, that is what --heavy is for. */
.ef-section-over-bg .big__headline,
.ef-section-over-bg .standard__headline {
  text-shadow: none;
}

/* For bright photos — daylight exteriors, white walls. The display headline is
   outlined rather than filled until it reveals, so it has almost no contrast
   against a light frame; the homepage gets away with a lighter scrim only
   because its photos are all dark to begin with. */
.ef-section-bg--heavy { opacity: .68; }
.ef-section-bg--heavy::after {
  background: linear-gradient(
    to right,
    rgba(21, 19, 19, .78) 0%,
    rgba(21, 19, 19, .72) 100%
  );
}
@media (max-width: 767px) {
  .ef-section-bg--heavy { opacity: .5; }
  .ef-section-bg--heavy::after { background: rgba(21, 19, 19, .84); }
}
/* Heavy on the left, clearing to the right. For photos where the left of the
   frame should drop away and the right should carry the subject — and since
   the display headline and pull-quote both sit left, it doubles as contrast. */
.ef-section-bg--left::after {
  background: linear-gradient(
    to right,
    rgba(21, 19, 19, .97) 0%,
    rgba(21, 19, 19, .95) 34%,
    rgba(21, 19, 19, .74) 62%,
    rgba(21, 19, 19, .58) 100%
  );
}
@media (max-width: 767px) {
  .ef-section-bg--left::after { background: rgba(21, 19, 19, .86); }
}
@media (max-width: 767px) {
  .ef-section-bg { opacity: .55; }
  .ef-section-bg::after {
    background: rgba(21, 19, 19, .8);
  }
}

/* Contact block background. The boat sits in the upper-right of the source
   frame, so fitting the photo to the section put it dead centre, between the
   two columns and level with the pull-quote. Instead the image is sized off
   the section height and pulled down and left by a third of its own width, so
   the boat lands in the lower-left quadrant, under the copy rather than
   beside it. The offset is a percentage of the image, not the section, so the
   boat holds its distance from the left edge as the viewport widens. The fill
   is the photo's own #080808 edge tone, so the ground either side of it is
   invisible. */
.ef-form-bg { opacity: .9; background: #080808; }
.ef-form-bg img {
  position: absolute;
  left: 0;
  bottom: -5%;
  width: auto;
  height: 66%;
  max-width: none;
  transform: translateX(-32%);
  filter: grayscale(1);
}
.ef-form-bg::after {
  background: linear-gradient(
    160deg,
    rgba(21, 19, 19, .72) 0%,
    rgba(21, 19, 19, .38) 34%,
    rgba(21, 19, 19, .52) 62%,
    rgba(21, 19, 19, .80) 100%
  );
}
@media (max-width: 767px) {
  .ef-form-bg { opacity: .55; }
  .ef-form-bg::after { background: rgba(21, 19, 19, .8); }
}

/* Homepage proof list. Five business names, each with what it was. Read as one
   grey run they blurred together, so the name takes the white the site gives
   values and the descriptor takes the muted grey it gives labels — the same
   contrast the record strips use, rather than a sixth typeface. */
.ef-proof-list { list-style: none; margin: 0; padding: 0; }
.ef-proof-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 12px;
  padding: 7px 0;
}
.ef-proof-list b {
  font-family: var(--FontInterMedium), sans-serif;
  font-weight: 400;
  color: #fff;
  letter-spacing: .35px;
}
.ef-proof-list span {
  font-size: 14px;
  letter-spacing: .35px;
  /* Body grey rather than the #9c9c9c label grey: this list sits over a photo,
     not flat ground, and the lighter step still reads a clear rung below the
     white name given it is also smaller and set in the regular weight. */
  color: #c2c2c2;
}
/* The list sits over the operator photo, and the muted grey lands on the
   brightest part of the frame. Same shadow the section's story copy already
   carries in #replica-overrides. */
.ef-proof-list li { text-shadow: 0 1px 10px rgba(15, 14, 14, .85), 0 0 26px rgba(15, 14, 14, .6); }

/* Form heading, in the serif the pull-quote opposite it uses, so the two
   columns of the contact block are typographically paired.

   The Pipedrive form is a cross-origin iframe that fills its column but caps
   its own content at 482px and centres it, so the fields sit inset from the
   column edge at wide viewports and flush to it below ~960px. Matching that
   box here rather than guessing a fixed inset means the heading sits exactly
   over the first field at every width, and lines up with the submit button
   below it. */
.ef-form-heading {
  color: #fff;
  max-width: 482px;
  margin: 0 auto 26px;
}
@media (max-width: 767px) { .ef-form-heading { margin-bottom: 20px; } }