/* Invata Global Marketing: "One brand, three channels". M1 finishes a plain box into a brand; M2 to M4 carry the same box
   through Social, Search, and Web. Loaded after film.css on the Marketing home page only. */

.brand, .chead { padding-block: clamp(120px, 14vw, 200px); }
.chead { padding-bottom: clamp(24px, 4vw, 56px); }
.chead h2 { max-width: 18ch; font: 800 clamp(38px, 5vw, 68px)/1 var(--head); letter-spacing: -.02em; }

/* ---------- a channel: the copy builds up as the box travels ---------- */
.channel .shade { position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: linear-gradient(90deg, rgba(11,14,20,.84) 0%, rgba(11,14,20,.5) 36%, rgba(11,14,20,0) 62%); }
.channel .panel { position: absolute; left: var(--gl); top: 50%; transform: translateY(-50%); width: min(520px, calc(100% - var(--gl) - var(--gr))); }
.channel .num { display: block; font: italic 600 clamp(80px, 11vw, 168px)/.8 var(--serif); color: var(--cobalt-hi); opacity: .9; margin-bottom: 18px; }
.channel h2 { margin: 0 0 16px; font: 800 clamp(40px, 5.4vw, 76px)/1 var(--head); letter-spacing: -.025em; }
.channel .panel > p { margin: 0; max-width: 40ch; font-size: clamp(17px, 1.4vw, 20px); color: rgba(236,231,220,.88); }
.channel .links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px !important; }
.channel .links a { padding: 10px 16px; border: 1px solid rgba(185,200,255,.35); border-radius: 999px; color: var(--ivory); text-decoration: none;
  font: 600 14px/1 var(--head); transition: border-color .2s ease, background .2s ease; }
.channel .links a:hover { border-color: var(--cobalt-hi); background: rgba(108,140,255,.14); }
.channel .panel [data-at] { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
.channel .panel [data-at].on { opacity: 1; transform: none; }
.film:not(.live) .panel [data-at], .film.still .panel [data-at] { opacity: 1; transform: none; }

@media (max-width: 760px) {
  .channel .shade { background: linear-gradient(180deg, rgba(11,14,20,.2) 0%, rgba(11,14,20,.1) 35%, rgba(11,14,20,.7) 62%, rgba(11,14,20,.92) 100%); }
  .channel .panel { top: auto; bottom: calc(32px + env(safe-area-inset-bottom, 0px)); transform: none; }
  .channel .num { font-size: 72px; margin-bottom: 10px; }
  .channel h2 { font-size: clamp(36px, 10vw, 48px); }
}