/* ALTHOM — THE REVEAL, as the top of the real page.
   ==========================================================================
   Loaded AFTER site.css, sections.css and home.css, and additive by design:
   no palette tokens, no body rules, no resets. The standalone concept page
   declared all three because it stood alone; here they would fight the
   stylesheets that own them, most damagingly body{overflow:hidden} — on a
   page with fourteen sections below the fold that means the visitor can
   never leave the hero.

   The still underneath the film is a real <img>, not the video's poster
   attribute: a poster is dropped the instant the video has a frame, so a
   blocked or failed video leaves a black rectangle. One element then does
   three jobs — first paint, the reduced-motion composition, and the
   fallback — instead of three elements doing one each.

   Selectors scoped under .rv so nothing here reaches the sections. */

.rv{
  position:relative; height:100svh; min-height:560px; overflow:hidden;
  background:var(--paper);
}
.rv-stage{position:absolute; inset:0; z-index:1; background:var(--paper)}
.rv-still, .rv-film{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
}

/* A breath of lift under the headline, not a panel. The picture is already
   near white on the left; this only carries the last few per cent. */
.rv-scrim{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(103deg,
    rgba(248,247,244,.82) 0%, rgba(248,247,244,.52) 26%,
    rgba(248,247,244,.12) 46%, rgba(248,247,244,0) 62%);
}

.rv-copy{
  position:absolute; z-index:4; left:var(--edge); top:50%; transform:translateY(-50%);
  max-width:min(660px, 42vw);
}
.rv-eyebrow{
  margin:0 0 clamp(22px,3vh,36px);
  font-family:var(--mono); font-size:11px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--ci-red);
}
.rv h1{
  margin:0; font-weight:600; font-size:clamp(40px, 5vw, 88px); line-height:.94;
  letter-spacing:-.045em; text-wrap:balance;
}
.rv h1 em{font-style:normal; color:var(--ci-grey)}
.rv-lede{
  margin:clamp(26px,3.2vh,42px) 0 0; max-width:44ch;
  font-size:clamp(16px,1.2vw,19px); line-height:1.6; color:var(--ink-2);
}
.rv-cta{display:flex; flex-wrap:wrap; gap:12px; margin:clamp(32px,4.4vh,54px) 0 0}
.rv-note{
  position:absolute; z-index:4; right:var(--edge); bottom:clamp(24px,3.6vh,44px); margin:0;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); text-align:right;
}

/* The visual moves below the type and gets its own square framing rather
   than the desktop crop squeezed into a phone: on a 16:9 plate the wing
   root is the first thing a tall crop throws away, and the root is what
   makes the shot read as structure rather than as a metal edge. */
/* Stacked: phones, and tablets held upright. A portrait tablet above 820px
   used to get the desktop composition, with the headline over the wing. */
@media (max-width: 820px), (max-width: 1180px) and (orientation: portrait){
  .rv{display:flex; flex-direction:column; height:auto; min-height:100svh}
  .rv-scrim{display:none}
  .rv-copy{position:static; order:1; transform:none; max-width:none;
    padding:calc(var(--head) + clamp(20px,4vh,44px)) var(--edge) 0}
  .rv h1{font-size:clamp(34px, 9.2vw, 52px)}
  .rv-lede{font-size:16px; max-width:38ch}
  .rv-cta{margin-top:28px}
  .rv-stage{position:relative; inset:auto; order:2; flex:1 1 auto;
    min-height:clamp(320px, 42svh, 460px); margin-top:clamp(24px,4vh,42px)}
  .rv-note{right:var(--edge); bottom:12px; font-size:8.5px; color:#fff;
    mix-blend-mode:difference}
}
@media (max-width: 820px) and (max-height: 760px){
  .rv-copy{padding-top:calc(var(--head) + 14px)}
  .rv h1{font-size:clamp(28px, 7.8vw, 40px)}
  .rv-lede{font-size:14.5px; margin-top:16px; line-height:1.5}
  .rv-cta{margin-top:20px}
}

/* The film is removed and the still carries the hero. That is the whole
   fallback, and it is a real composition rather than a frozen video: the
   still was art-directed first and the film was made from it. */
@media (prefers-reduced-motion: reduce){
  .rv-film{display:none}
}

/* Phones on their side. The hero is shorter than the copy it holds, so the
   type steps down and the copy is pinned under the header instead of
   centred; otherwise the buttons fall below the fold. */
@media (orientation: landscape) and (max-height: 520px){
  .rv{min-height:100svh}
  .rv-copy{top:calc(var(--head) + 10px); transform:none}
  .rv-eyebrow{margin-bottom:10px; font-size:10px}
  .rv h1{font-size:clamp(26px, 4.4vw, 36px)}
  .rv-lede{font-size:14px; line-height:1.5; margin-top:12px}
  .rv-cta{margin-top:16px; gap:10px}
  .rv-cta .btn{min-height:42px; padding:0 18px}
  .rv-note{bottom:12px}
}

/* The navigation sits over the upper right of the plate, where the wing
   is brushed metal in mid-grey and the nav type all but disappears. A band
   of paper fades down from the top edge, strongest behind the header and
   gone before it reaches the metal that matters. Part of the hero, so it
   scrolls away with it; once the page moves the header draws its own
   background anyway. */
.rv::before{content:""; position:absolute; left:0; right:0; top:0; z-index:3;
  height:calc(var(--head) + 90px); pointer-events:none;
  background:linear-gradient(180deg, rgba(248,247,244,.94) 0%,
    rgba(248,247,244,.82) 45%, rgba(248,247,244,0) 100%)}
@media (max-width: 820px), (max-width: 1180px) and (orientation: portrait){
  .rv::before{display:none}
}

/* The corporate claim: two sentences, one per line where the width
   allows. Sized so "We deliver on our commitments." holds a single line on
   a desktop; where it cannot, text-wrap:balance splits it evenly instead of
   leaving one word behind. */
.rv-copy{max-width:min(780px, 52vw)}
.rv h1.claim{font-size:clamp(34px, 3vw, 56px); line-height:1.02; letter-spacing:-.04em;
  text-wrap:balance}
.rv h1.claim em{display:block}
@media (max-width: 820px), (max-width: 1180px) and (orientation: portrait){
  .rv-copy{max-width:none}
  .rv h1.claim{font-size:clamp(30px, 8.2vw, 50px)}
}
@media (max-width: 820px) and (max-height: 760px){
  .rv h1.claim{font-size:clamp(26px, 7.2vw, 38px)}
}
@media (orientation: landscape) and (max-height: 520px){
  .rv h1.claim{font-size:clamp(24px, 3.8vw, 34px)}
}