/* ============================================================
   Brand artifact band + interactive polish (CINEMA v4 layer)
   - .cine-artband: CONTAINED framed Higgsfield brand artwork card
     (light-first mandate 2026-07-12: the band no longer bleeds
     full-width dark across the page; the media/scrim/copy live
     INSIDE a max-width framed card — contained dark is permitted.
     Presentation matches the VET Sector Website relocation
     precedent, v3.css .cine-artband-v2 frame).
     The engine's photo-parallax still animates the image on scroll.
   - .gx shimmer: gradient display words get a slow light drift.
   - .hviz tilt: hero visual panels are pointer-tilted in 3D (JS).
   ============================================================ */
/* cq-lightfix: framed-card containment (was full-bleed) */
.cine-artband{
  position:relative;overflow:hidden;isolation:isolate;
  height:clamp(300px,46vh,540px);
  width:min(1280px,92%);margin:96px auto;
  border-radius:22px;border:1px solid #E4E7EC;
  box-shadow:0 24px 60px rgba(16,24,40,.16);
  background:#fff;
}
.cine-artband.cine-artband-v2{
  height:clamp(380px,52vh,560px);
  display:flex;align-items:center;
}
.cine-artband img,
.cine-artband video{
  position:absolute;left:0;top:-10%;
  width:100%;height:120%;object-fit:cover;display:block;
}
.cine-artband .cine-artband-scrim{
  position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(4,7,16,.82) 0%,rgba(4,7,16,.55) 38%,rgba(4,7,16,.08) 68%,transparent 100%);
}
/* slider/banner FX layer: per-site Higgsfield loop inside .cqbg (slide 1)
   or a photo masthead; sits under the existing scrim, photo stays as poster */
.cqbg video.cqfx,
.mast video.cqfx{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;display:block;
}
.mast video.cqfx{z-index:0}
.cine-artband .cine-artband-copy{
  position:relative;z-index:2;color:#fff;
  width:min(1240px,92%);margin:0 auto;
  max-width:none;
}
.cine-artband .cine-artband-copy>div{max-width:560px}
.cine-artband .cine-ab-kicker{
  font-size:12px;letter-spacing:.34em;text-transform:uppercase;
  color:rgba(255,255,255,.72);margin-bottom:14px;
}
.cine-artband .cine-ab-kicker::before{
  content:"";display:inline-block;width:26px;height:2px;margin-right:12px;vertical-align:middle;
  background:linear-gradient(90deg,var(--cine-accent),var(--cine-glow));
}
.cine-artband h2{
  font-family:var(--cine-display-font);
  font-size:clamp(26px,3.2vw,44px);line-height:1.12;margin:0 0 18px;color:#fff;
}
.cine-artband ul.cine-ab-points{
  list-style:none;margin:0 0 24px;padding:0;
  display:flex;flex-direction:column;gap:10px;
}
.cine-artband ul.cine-ab-points li{
  font-size:15px;line-height:1.5;color:rgba(255,255,255,.86);
  display:flex;align-items:flex-start;gap:10px;
}
.cine-artband ul.cine-ab-points li::before{
  content:"";flex:none;width:16px;height:16px;margin-top:3px;border-radius:50%;
  background:
    linear-gradient(135deg,rgba(var(--cine-glow-rgb),.9),rgba(var(--cine-accent-rgb),.9));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M2.5 8.5l3.5 3.5 7-8'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M2.5 8.5l3.5 3.5 7-8'/%3E%3C/svg%3E") center/contain no-repeat;
}
.cine-artband .cine-ab-cta{
  display:inline-block;padding:13px 26px;border-radius:999px;
  font-size:14px;font-weight:600;letter-spacing:.04em;text-decoration:none;color:#fff;
  background:linear-gradient(120deg,var(--cine-accent),var(--cine-glow));
  box-shadow:0 12px 30px rgba(var(--cine-accent-rgb),.35);
  transition:transform .3s cubic-bezier(.2,.6,.2,1),box-shadow .3s;
}
.cine-artband .cine-ab-cta:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 40px rgba(var(--cine-accent-rgb),.5);
}
@media (max-width:820px){
  /* cq-lightfix: keep the card contained on mobile too */
  .cine-artband{margin:56px auto}
  .cine-artband.cine-artband-v2{height:auto;min-height:0;padding:56px 26px}
  .cine-artband .cine-artband-scrim{
    background:linear-gradient(180deg,rgba(4,7,16,.78),rgba(4,7,16,.55));
  }
}
.cine-artband::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 140px rgba(0,0,0,.45);
}
.cine-artband .cine-artband-edge{
  position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--cine-glow-rgb),.5),transparent);
}
.cine-artband .cine-artband-edge.t{top:0}
.cine-artband .cine-artband-edge.b{bottom:0}

/* gradient display words: slow luminous drift */
.gx{
  background-size:220% 220%;
  animation:cineGxDrift 9s ease-in-out infinite;
}
@keyframes cineGxDrift{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}

/* hero visual panel 3D tilt (transform driven by cinema.js) */
.hviz{will-change:transform}
.cine-tilting{transition:none!important}

@media (prefers-reduced-motion:reduce){
  .gx{animation:none}
  .cine-artband img{transform:none!important}
  .hviz{transform:none!important}
}
@media print{
  .cine-artband{display:none!important}
}

/* --- newsletter block fix, 31 Aug 2026 ---------------------------------
   A consent paragraph (.cq-consent) and a Cloudflare Turnstile widget were
   injected INSIDE .cqft-card form. That form is a nowrap flex row styled as
   the white pill, so both became flex items on the same row as the input:
   the email field collapsed to about 100px (only "Enter y" was visible) and
   the pale consent text rendered over the pill edge, unreadable.

   The pill is rebuilt on the input and button themselves, the form is allowed
   to wrap, and the injected elements drop to their own full width row below.

   Where the card already carries its own .cqft-consent line the injected one
   is a duplicate, so it is hidden. That also covers the three sites with a
   white card, where white consent text would be invisible. No site that
   relies on the injected consent has a white card, so the white is safe. */
.cqft-card form{flex-wrap:wrap; background:transparent; padding:0; border-radius:0; gap:10px 0}
.cqft-card form > input[type=email]{flex:1 1 auto; min-width:0; background:#fff;
  border-radius:999px 0 0 999px; padding:16px 24px}
.cqft-card form > button{border-radius:0 999px 999px 0}
.cqft-card form > .cq-consent{flex:0 0 100%; order:9; margin:2px 0 0; opacity:1;
  text-align:left; color:rgba(255,255,255,.92)}
.cqft-card form > .cq-consent a{color:#fff; text-decoration:underline}
.cqft-card form > .cf-turnstile{flex:0 0 100%; order:10; margin:0}
.cqft-card:has(> .cqft-consent) form > .cq-consent{display:none}
/* --- end newsletter block fix --- */