/* lp-hero.css

   The lift layer for the three lead magnet pages, 12 August 2026.

   It lives in one file rather than three because the pages are otherwise
   self-contained, and three copies of a hero treatment is three places for the
   brand to go stale. That is the defect this workforce is built to avoid, and a
   landing page is not exempt from it.

   Everything here sits on top of each page's own inline CSS. It never redefines
   the palette, only reaches for the variables the pages already declare, so a
   change to the ground colour still happens in one place per page.

   Three things it does:

     1. Puts a graded photograph behind the hero, with a scrim heavy enough on
        the left that the copy never fights the image, and light enough on the
        right that the image is worth having.
     2. Makes the inputs feel like an instrument rather than a form.
     3. Adds motion that a reader notices only if it is missing, and none at all
        for a reader who has asked their machine for none.
*/

/* ---------------------------------------------------------------- cinema */

.cinema{position:relative; isolation:isolate}
.cinema > *{position:relative; z-index:1}

.cinema-bg{position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none}
.cinema-bg img{
  width:100%; height:100%; object-fit:cover; object-position:64% 46%;
  /* A slow drift. Ten seconds is under the threshold at which a reader reads it
     as animation, which is the point: it should feel like a photograph that is
     alive rather than a photograph that is moving. */
  animation:cinema-drift 24s ease-in-out infinite alternate;
  transform-origin:70% 45%;
}
@keyframes cinema-drift{ from{transform:scale(1.03)} to{transform:scale(1.09)} }

/* The scrim is two gradients and a vignette. The horizontal one protects the
   column the words sit in. The vertical one lands the image into the ground
   colour so the section has no visible seam at its foot. */
.cinema-bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(100deg,
      var(--dark-ground) 0%,
      rgba(11,17,6,.95) 22%,
      rgba(11,17,6,.72) 40%,
      rgba(11,17,6,.15) 62%,
      rgba(11,17,6,.44) 100%),
    linear-gradient(to bottom,
      rgba(11,17,6,.80) 0%,
      rgba(11,17,6,.12) 24%,
      rgba(11,17,6,.30) 60%,
      var(--dark-ground) 99%),
    radial-gradient(125% 95% at 66% 36%, rgba(0,0,0,0) 42%, rgba(0,0,0,.50) 100%);
}

/* Grain. Three per cent, and it is the difference between a dark page and a
   photographed one. Generated rather than fetched, so it costs no request. */
.cinema-bg::before{
  content:""; position:absolute; inset:0; z-index:2; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (max-width:900px){
  /* On a narrow screen the words run the full width, so the image has nowhere
     to be except behind them. It goes quieter rather than away. */
  .cinema-bg img{object-position:64% 40%; animation:none; transform:scale(1.04)}
  .cinema-bg::after{
    background:
      linear-gradient(to bottom,
        rgba(11,17,6,.80) 0%,
        rgba(11,17,6,.90) 34%,
        rgba(11,17,6,.97) 62%,
        var(--dark-ground) 92%);
  }
}


/* Framing is a property of the photograph, not of the layout, so it is named
   here rather than left to each page to guess at. The default sits low and
   right, which suits an interior. A frame whose subject is the horizon needs
   the crop lifted or the sky is all that survives. */
.cinema-bg.frame-horizon img{object-position:58% 24%}
.cinema-bg.frame-low img{object-position:60% 72%}
.cinema-bg.frame-right img{object-position:88% 48%}
.cinema-bg.frame-far-right img{object-position:100% 70%}
@media (max-width:900px){
  .cinema-bg.frame-horizon img{object-position:58% 20%}
  .cinema-bg.frame-right img{object-position:82% 44%}
}

/* ------------------------------------------------------------- top rail */

.rail-progress{
  position:fixed; top:0; left:0; height:2px; width:0; z-index:60;
  background:linear-gradient(90deg, rgba(201,242,45,.35), var(--accent));
  box-shadow:0 0 12px rgba(201,242,45,.55);
}

/* ------------------------------------------------------------- the film */

.film{
  border-color:rgba(201,242,45,.30) !important;
  box-shadow:0 32px 90px rgba(0,0,0,.62), 0 0 0 1px rgba(0,0,0,.5);
  position:relative;
}
/* The overlay is hidden until the script says otherwise, and the native
   controls are only suppressed once it is up. With the script blocked the film
   is exactly what it was before: a video element with its own controls. That
   ordering matters. An overlay that ships in the HTML and is dismissed by
   JavaScript makes the video unplayable on the day the JavaScript fails. */
.film-play{
  position:absolute; top:0; left:0; right:0; aspect-ratio:16/9;
  z-index:3; display:none; align-items:center; justify-content:center;
  pointer-events:none; transition:opacity .3s ease;
  background:linear-gradient(to bottom, rgba(11,17,6,.06), rgba(11,17,6,.34));
}
.film.enhanced .film-play{display:flex}
.film.enhanced:not(.played) video::-webkit-media-controls-enclosure{display:none}
.film-play.gone{opacity:0; visibility:hidden}
.film-play button{
  pointer-events:auto; cursor:pointer; border:0; border-radius:50%;
  width:78px; height:78px; background:var(--accent); color:#14200C;
  display:grid; place-items:center; font-size:0; padding:0;
  box-shadow:0 0 0 10px rgba(201,242,45,.14), 0 18px 40px rgba(0,0,0,.5);
  transition:transform .22s ease, box-shadow .22s ease;
}
.film-play button::before{
  content:""; display:block; width:0; height:0; margin-left:5px;
  border-left:22px solid #14200C; border-top:13px solid transparent; border-bottom:13px solid transparent;
}
.film-play button:hover{transform:scale(1.07); box-shadow:0 0 0 14px rgba(201,242,45,.18), 0 18px 40px rgba(0,0,0,.5)}

/* ------------------------------------------------------------- the form */

.card{box-shadow:0 24px 70px rgba(0,0,0,.42); backdrop-filter:blur(6px)}

.field{position:relative}
.field label{transition:color .18s ease}
.field.ok label::after{content:" \2713"; color:var(--accent); font-weight:700}
.field.bad label{color:var(--warn)}

.card input[type=text],
.card input[type=email],
.gate input[type=email]{
  transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.card input[type=text]:hover,
.card input[type=email]:hover{border-color:rgba(244,243,234,.38)}
.card input:focus,
.gate input:focus{
  outline:0 !important;
  border-color:var(--accent) !important;
  background:#0A1206;
  box-shadow:0 0 0 3px rgba(201,242,45,.20);
}
.field.ok input{border-color:rgba(201,242,45,.42)}
.field.bad input{border-color:var(--warn)}

.submit{
  position:relative; overflow:hidden; letter-spacing:.005em;
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
  box-shadow:0 10px 30px rgba(201,242,45,.14);
}
.submit:hover{transform:translateY(-2px); box-shadow:0 16px 40px rgba(201,242,45,.22)}
.submit:active{transform:translateY(0)}
.submit::after{
  content:""; position:absolute; top:0; bottom:0; left:0; width:60%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent);
  transform:translateX(-140%); transition:transform .65s cubic-bezier(.22,.61,.36,1);
}
.submit:hover::after{transform:translateX(280%)}
.submit[disabled]{transform:none; box-shadow:none}

/* --------------------------------------------------------- ruled kicker */

.kicker.ruled{display:flex; align-items:center; gap:.85rem}
.kicker.ruled::before{content:""; width:2.75rem; height:1px; background:var(--accent); flex:none; opacity:.8}


/* A lighter scrim, for a frame whose subject is a light source rather than a
   landscape. The boardroom is only worth having behind the words if the one lit
   thing in the room survives, so the gradient gives way and the display type
   takes a shadow instead. Opt in per page, because it costs contrast. */
.cinema.lit .cinema-bg::after{
  background:
    linear-gradient(100deg,
      rgba(11,17,6,.90) 0%, rgba(11,17,6,.76) 20%,
      rgba(11,17,6,.46) 42%, rgba(11,17,6,.10) 64%, rgba(11,17,6,.26) 100%),
    linear-gradient(to bottom,
      rgba(11,17,6,.55) 0%, rgba(11,17,6,.04) 24%,
      rgba(11,17,6,.14) 60%, var(--dark-ground) 99%);
}
.cinema.lit h1,
.cinema.lit .standfirst{text-shadow:0 2px 30px rgba(11,17,6,.96)}
.cinema.lit .hero-note{text-shadow:0 1px 16px rgba(11,17,6,.95)}
@media (max-width:900px){
  .cinema.lit .cinema-bg::after{
    background:linear-gradient(to bottom,
      rgba(11,17,6,.78) 0%, rgba(11,17,6,.90) 34%,
      rgba(11,17,6,.97) 62%, var(--dark-ground) 92%);
  }
}

/* --------------------------------------------------------- the wide band */

/* One photograph, full bleed, carrying one line. It exists because the hero
   gives half its width to the film, which leaves a photograph there able to
   carry mood but not a subject. Anything that has to be looked at goes here. */
.band-film{position:relative; min-height:clamp(24rem,46vw,38rem); display:grid; align-items:end;
  border-bottom:1px solid var(--dark-rule); overflow:hidden; isolation:isolate}
.band-film img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:64% 62%; z-index:-2}
.band-film::after{content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to bottom, var(--dark-ground) 0%, rgba(11,17,6,.58) 9%, rgba(11,17,6,.10) 36%, rgba(11,17,6,.86) 88%, var(--dark-ground) 100%),
    linear-gradient(to right, rgba(11,17,6,.86) 0%, rgba(11,17,6,.62) 34%, rgba(11,17,6,.10) 62%, rgba(11,17,6,0) 78%);
}
.band-film .wrap{padding-block:clamp(2.5rem,5vw,4.5rem)}
.band-film p.line{
  font-family:var(--serif); font-size:clamp(1.5rem,3.1vw,2.75rem); line-height:1.2;
  color:var(--dark-display); max-width:34rem; margin:0;
  text-shadow:0 2px 30px rgba(11,17,6,.95);
}
.band-film .credit{font-size:.8125rem; color:var(--dark-kicker); margin:1rem 0 0; letter-spacing:.02em}
@media (max-width:760px){
  .band-film img{object-position:78% 56%}
  .band-film::after{background:linear-gradient(to bottom, rgba(11,17,6,.55) 0%, rgba(11,17,6,.70) 40%, rgba(11,17,6,.94) 88%, var(--dark-ground) 100%)}
}

/* --------------------------------------------------------- sticky claim */

.stickycta{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  transform:translateY(110%); transition:transform .32s cubic-bezier(.22,.61,.36,1);
  background:rgba(11,17,6,.94); border-top:1px solid rgba(201,242,45,.28);
  backdrop-filter:blur(10px);
}
.stickycta.up{transform:none}
.stickycta .inner{
  display:flex; align-items:center; justify-content:space-between; gap:1.25rem;
  padding:.85rem 0;
}
.stickycta p{margin:0; font-size:.9375rem; color:var(--dark-display); font-weight:600}
.stickycta small{display:block; font-weight:400; color:var(--dark-kicker); font-size:.8125rem}
.stickycta a{
  flex:none; text-decoration:none; font-weight:700; font-size:.9375rem;
  color:#14200C; background:var(--accent); padding:.8rem 1.4rem; border-radius:2px;
}
@media (max-width:560px){
  .stickycta small{display:none}
  .stickycta a{padding:.75rem 1rem}
}

/* -------------------------------------------------------------- reveals */

[data-reveal]{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1)}
[data-reveal].in{opacity:1; transform:none}
[data-reveal][data-reveal="2"]{transition-delay:.08s}
[data-reveal][data-reveal="3"]{transition-delay:.16s}
[data-reveal][data-reveal="4"]{transition-delay:.24s}

@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1; transform:none; transition:none}
  .cinema-bg img{animation:none}
  .submit::after{display:none}
  .stickycta{transition:none}
}