/* GSK Productions — /filmset.html
   Dedicated marketing page for FilmSet, GSK's production-management
   product. Deliberately its own visual system (dark graphite + signal
   red, Big Shoulders Display / IBM Plex Mono) rather than the sitewide
   navy/cyan brand — this is a distinct software product, not another
   GSK service page — tied back to the main site via the top strip,
   footer "Company" column, and every CTA routing to the real contact
   form (contact.html?topic=filmset). */

.page-filmset{
  --bg:#0B0D0F; --bg-2:#101317; --surface:#14171B; --surface-2:#1A1E23;
  --border:#242A31; --border-strong:#333B44;
  --ink:#EDEFF0; --ink-2:#C3C9CF; --ink-3:#8A929C; --ink-4:#5A6470;
  --signal:#E5484D; --signal-2:#EB5F63; --signal-ink:#FFF;
  --signal-tint:rgba(229,72,77,0.12);
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --disp:"Big Shoulders Display","Arial Narrow",sans-serif;
  --body-font:"Source Sans 3",ui-sans-serif,system-ui,sans-serif;
  --rev-blue:#5B8DEF; --rev-pink:#E86FA8; --rev-yellow:#E8C24B; --rev-green:#4FB477;
  background:var(--bg); color:var(--ink);
  font-family:var(--body-font); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; margin:0;
}
.page-filmset *{box-sizing:border-box;}
html:has(.page-filmset){scroll-behavior:smooth;}
.page-filmset ::selection{background:var(--signal-tint); color:var(--signal-2);}
.page-filmset a{color:inherit; text-decoration:none;}
.page-filmset .disp{font-family:var(--disp); text-transform:uppercase; font-weight:800; letter-spacing:0.01em; line-height:0.94;}
.page-filmset .mono{font-family:var(--mono);}
.page-filmset .wrap{max-width:1200px; margin:0 auto; padding:0 32px;}
.page-filmset .eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--signal); display:inline-flex;
  align-items:center; gap:9px;
}
.page-filmset .eyebrow::before{content:""; width:20px; height:1px; background:var(--signal);}

/* ---------------- BACK-TO-GSK STRIP ---------------- */
.page-filmset .gsk-strip{
  background:var(--bg-2); border-bottom:1px solid var(--border);
  font-family:var(--mono); font-size:12px;
}
.page-filmset .gsk-strip-inner{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  height:38px; color:var(--ink-4);
}
.page-filmset .gsk-back{
  display:inline-flex; align-items:center; gap:6px; color:var(--ink-2);
  transition:color .14s;
}
.page-filmset .gsk-back:hover{color:var(--signal-2);}
.page-filmset .gsk-strip-tag{color:var(--ink-4);}
@media(max-width:640px){ .page-filmset .gsk-strip-tag{display:none;} }

/* ---------------- NAV ---------------- */
.page-filmset header.nav{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.page-filmset .nav-inner{display:flex; align-items:center; gap:14px; height:64px;}
.page-filmset .brand{display:flex; align-items:center; gap:10px;}
.page-filmset .brand .word{font-weight:700; font-size:17px; letter-spacing:-0.01em;}
.page-filmset .brand .word sup{color:var(--signal); font-size:9px; top:-0.7em;}
.page-filmset .nav-links{margin-left:auto; display:flex; gap:6px; align-items:center;}
.page-filmset .nav-links a{
  font-size:13.5px; color:var(--ink-2); padding:8px 12px; border-radius:6px;
  transition:background .14s, color .14s;
}
.page-filmset .nav-links a:hover{background:var(--surface); color:var(--ink);}
.page-filmset .btn{
  display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:14px;
  padding:10px 18px; border-radius:7px; border:1px solid transparent;
  cursor:pointer; transition:transform .12s, background .14s, border-color .14s;
}
.page-filmset .btn-primary{background:var(--signal); color:var(--signal-ink);}
.page-filmset .btn-primary:hover{background:var(--signal-2); transform:translateY(-1px);}
.page-filmset .btn-ghost{border-color:var(--border-strong); color:var(--ink);}
.page-filmset .btn-ghost:hover{border-color:var(--ink-3); background:var(--surface);}
.page-filmset .nav .btn{padding:8px 15px;}
@media(max-width:860px){ .page-filmset .nav-links a:not(.nav-cta){display:none;} }

/* ---------------- HERO ---------------- */
.page-filmset .hero{position:relative; padding:88px 0 76px; overflow:hidden;}
.page-filmset .hero::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(1100px 520px at 78% -8%, rgba(229,72,77,0.14), transparent 60%),
    linear-gradient(180deg, var(--bg-2), var(--bg));
}
.page-filmset .frame-bg{position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;}
.page-filmset .frame-bg svg{position:absolute;}
.page-filmset .hero-inner{position:relative; z-index:2; display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center;}
@media(max-width:960px){ .page-filmset .hero-inner{grid-template-columns:1fr; gap:40px;} }
.page-filmset .hero h1{font-size:clamp(46px,7vw,88px); margin:22px 0 0; text-wrap:balance;}
.page-filmset .hero h1 .line2{color:var(--ink-3);}
.page-filmset .hero .sub{font-size:20px; color:var(--ink-2); max-width:30em; margin:24px 0 0; line-height:1.5;}
.page-filmset .hero .cta-row{display:flex; gap:12px; margin-top:34px; flex-wrap:wrap;}
.page-filmset .hero .assurance{
  margin-top:22px; font-family:var(--mono); font-size:12px; color:var(--ink-4);
  letter-spacing:0.03em; display:flex; align-items:center; gap:8px;
}
.page-filmset .dot{width:6px;height:6px;border-radius:50%;background:var(--rev-green);box-shadow:0 0 8px var(--rev-green);}

.page-filmset .viewport{
  position:relative; background:var(--surface); border:1px solid var(--border-strong);
  border-radius:12px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,0.5);
}
.page-filmset .vp-bar{
  display:flex; align-items:center; gap:7px; padding:11px 14px;
  border-bottom:1px solid var(--border); background:var(--bg-2);
}
.page-filmset .vp-bar .lights{display:flex; gap:6px;}
.page-filmset .vp-bar .lights i{width:9px;height:9px;border-radius:50%;background:var(--border-strong);display:block;}
.page-filmset .vp-bar .path{font-family:var(--mono); font-size:11px; color:var(--ink-4); margin-left:6px;}
.page-filmset .vp-body{padding:6px;}
.page-filmset .vp-row{
  display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:8px;
  border-bottom:1px solid var(--border);
}
.page-filmset .vp-row:last-child{border-bottom:0;}
.page-filmset .vp-row .rev{width:4px; height:30px; border-radius:2px; flex-shrink:0;}
.page-filmset .vp-row .lbl{font-family:var(--mono); font-size:11px; color:var(--ink-3); width:52px; flex-shrink:0;}
.page-filmset .vp-row .main{font-size:13.5px; color:var(--ink); font-weight:500;}
.page-filmset .vp-row .main small{display:block; color:var(--ink-4); font-weight:400; font-size:11.5px; font-family:var(--mono);}
.page-filmset .vp-row .tag{margin-left:auto; font-family:var(--mono); font-size:10px; padding:3px 8px; border-radius:20px; border:1px solid var(--border-strong); color:var(--ink-3); white-space:nowrap;}
.page-filmset .vp-row .tag.live{color:var(--rev-green); border-color:rgba(79,180,119,0.4);}
.page-filmset .vp-row .tag.hold{color:var(--rev-yellow); border-color:rgba(232,194,75,0.4);}
.page-filmset .vp-sync{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:10px; font-family:var(--mono); font-size:10.5px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--ink-4); border-top:1px solid var(--border);
  background:var(--bg-2);
}
.page-filmset .vp-sync .pulse{width:5px;height:5px;border-radius:50%;background:var(--signal);animation:filmset-pulse 1.8s infinite;}
@keyframes filmset-pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.3;transform:scale(.7);}}

/* logo strip */
.page-filmset .marquee{border-block:1px solid var(--border); padding:26px 0; background:var(--bg-2);}
.page-filmset .marquee .wrap{display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:center;}
.page-filmset .marquee p{font-family:var(--mono); font-size:11.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-4);}
.page-filmset .marquee .roles{display:flex; gap:26px; flex-wrap:wrap; justify-content:center;}
.page-filmset .marquee .roles span{font-size:14px; color:var(--ink-3); font-weight:600;}

/* ---------------- SECTION SHELL ---------------- */
.page-filmset section.blk{padding:96px 0; position:relative;}
.page-filmset .sec-head{max-width:720px; margin-bottom:52px;}
.page-filmset .sec-head h2{font-size:clamp(30px,4vw,48px); margin:18px 0 0;}
.page-filmset .sec-head p{color:var(--ink-2); font-size:18px; margin-top:16px; max-width:60ch;}
.page-filmset .num-badge{font-family:var(--mono); font-size:12px; color:var(--signal);}

/* PROBLEM */
.page-filmset .problem{background:var(--bg-2); border-block:1px solid var(--border);}
.page-filmset .mess{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:8px;}
@media(max-width:760px){ .page-filmset .mess{grid-template-columns:1fr 1fr;} }
.page-filmset .mess .chip{
  border:1px solid var(--border); border-radius:9px; padding:16px 16px 15px;
  background:var(--surface); position:relative; transition:transform .18s, border-color .18s;
}
.page-filmset .mess .chip:hover{transform:translateY(-2px); border-color:var(--border-strong);}
.page-filmset .mess .chip .k{font-family:var(--mono); font-size:10.5px; color:var(--ink-4); letter-spacing:0.06em; text-transform:uppercase;}
.page-filmset .mess .chip .v{font-size:15px; font-weight:600; margin-top:6px;}
.page-filmset .mess .chip .x{position:absolute; top:14px; right:14px; color:var(--ink-4); font-size:13px;}
.page-filmset .problem-line{
  margin-top:36px; font-family:var(--disp); text-transform:uppercase;
  font-size:clamp(24px,3.4vw,40px); font-weight:800; line-height:1.02; max-width:20ch;
}
.page-filmset .problem-line em{color:var(--signal); font-style:normal;}

/* SOLUTION */
.page-filmset .record-hub{
  border:1px solid var(--border-strong); border-radius:14px; overflow:hidden;
  background:linear-gradient(180deg,var(--surface),var(--bg-2));
}
.page-filmset .record-hub .rh-top{
  padding:20px 24px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:12px;
}
.page-filmset .record-hub .rh-top .disp{font-size:20px;}
.page-filmset .record-hub .rh-top .badge{margin-left:auto; font-family:var(--mono); font-size:10.5px; color:var(--rev-green); border:1px solid rgba(79,180,119,0.35); padding:4px 10px; border-radius:20px;}
.page-filmset .rh-grid{display:grid; grid-template-columns:repeat(4,1fr);}
@media(max-width:760px){ .page-filmset .rh-grid{grid-template-columns:1fr 1fr;} }
.page-filmset .rh-cell{padding:18px 20px; border-right:1px solid var(--border); border-top:1px solid var(--border);}
.page-filmset .rh-cell .i{font-family:var(--mono); font-size:11px; color:var(--signal);}
.page-filmset .rh-cell .n{font-weight:600; font-size:14.5px; margin-top:7px;}
.page-filmset .rh-cell .d{font-size:12.5px; color:var(--ink-4); margin-top:3px; font-family:var(--mono);}

/* MODULES grid */
.page-filmset .mods{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:12px; overflow:hidden;}
@media(max-width:960px){ .page-filmset .mods{grid-template-columns:1fr 1fr;} }
@media(max-width:520px){ .page-filmset .mods{grid-template-columns:1fr;} }
.page-filmset .mod{background:var(--surface); padding:22px 20px; transition:background .16s;}
.page-filmset .mod:hover{background:var(--surface-2);}
.page-filmset .mod .idx{font-family:var(--mono); font-size:11px; color:var(--ink-4);}
.page-filmset .mod h4{font-size:15px; margin:12px 0 7px; font-weight:600;}
.page-filmset .mod p{font-size:13px; color:var(--ink-3); line-height:1.5;}

/* AI governance chain */
.page-filmset .ai{background:linear-gradient(180deg,var(--bg),var(--bg-2)); border-block:1px solid var(--border);}
.page-filmset .chain{display:grid; grid-template-columns:repeat(5,1fr); gap:0; margin-top:8px;}
@media(max-width:900px){ .page-filmset .chain{grid-template-columns:1fr;} }
.page-filmset .chain .step{
  position:relative; padding:26px 22px; border:1px solid var(--border);
  background:var(--surface); border-right:0;
}
.page-filmset .chain .step:first-child{border-radius:12px 0 0 12px;}
.page-filmset .chain .step:last-child{border-right:1px solid var(--border); border-radius:0 12px 12px 0; background:linear-gradient(180deg,var(--surface),rgba(229,72,77,0.06));}
@media(max-width:900px){
  .page-filmset .chain .step{border-right:1px solid var(--border); border-bottom:0;}
  .page-filmset .chain .step:first-child{border-radius:12px 12px 0 0;}
  .page-filmset .chain .step:last-child{border-bottom:1px solid var(--border); border-radius:0 0 12px 12px;}
}
.page-filmset .chain .step .k{font-family:var(--mono); font-size:11px; color:var(--signal); letter-spacing:0.05em;}
.page-filmset .chain .step .t{font-family:var(--disp); text-transform:uppercase; font-size:22px; font-weight:800; margin:12px 0 8px;}
.page-filmset .chain .step .d{font-size:12.5px; color:var(--ink-3); line-height:1.5;}
.page-filmset .chain .step .arrow{position:absolute; right:-9px; top:50%; transform:translateY(-50%); z-index:3; width:18px; height:18px; border-radius:50%; background:var(--bg); border:1px solid var(--border-strong); display:flex; align-items:center; justify-content:center; font-size:10px; color:var(--ink-3);}
@media(max-width:900px){ .page-filmset .chain .step .arrow{right:50%; top:auto; bottom:-9px; transform:translateX(50%);} }
.page-filmset .ai-flank{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:22px;}
@media(max-width:760px){ .page-filmset .ai-flank{grid-template-columns:1fr;} }
.page-filmset .ai-card{border:1px solid var(--border); border-radius:12px; padding:24px; background:var(--surface);}
.page-filmset .ai-card h4{font-size:16px; margin-bottom:8px;}
.page-filmset .ai-card p{font-size:14px; color:var(--ink-3);}
.page-filmset .pull{
  margin-top:30px; border-left:2px solid var(--signal); padding:6px 0 6px 22px;
  font-family:var(--disp); text-transform:uppercase; font-weight:700;
  font-size:clamp(20px,2.6vw,30px); line-height:1.05; color:var(--ink); max-width:22ch;
}

/* TRUST */
.page-filmset .trust-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:8px;}
@media(max-width:760px){ .page-filmset .trust-grid{grid-template-columns:1fr;} }
.page-filmset .trust-item{display:flex; gap:14px; padding:20px; border:1px solid var(--border); border-radius:11px; background:var(--surface);}
.page-filmset .trust-item .ic{flex-shrink:0; width:34px; height:34px; border-radius:8px; background:var(--signal-tint); display:flex; align-items:center; justify-content:center;}
.page-filmset .trust-item h4{font-size:15px; margin-bottom:5px;}
.page-filmset .trust-item p{font-size:13.5px; color:var(--ink-3);}

/* COMPARE */
.page-filmset .compare{background:var(--bg-2); border-block:1px solid var(--border);}
.page-filmset .ctable{width:100%; border-collapse:separate; border-spacing:0; margin-top:8px; font-size:14px; border:1px solid var(--border); border-radius:12px; overflow:hidden;}
.page-filmset .ctable th, .page-filmset .ctable td{text-align:left; padding:15px 18px; border-bottom:1px solid var(--border); vertical-align:top;}
.page-filmset .ctable thead th{font-family:var(--mono); font-size:11px; letter-spacing:0.05em; text-transform:uppercase; color:var(--ink-3); background:var(--surface); font-weight:500;}
.page-filmset .ctable thead th:last-child{color:var(--signal);}
.page-filmset .ctable td:first-child{font-weight:600; color:var(--ink); width:24%;}
.page-filmset .ctable td.fs{color:var(--ink); font-weight:500;}
.page-filmset .ctable td.fs::before{content:"✓ "; color:var(--rev-green); font-weight:700;}
.page-filmset .ctable tbody tr:last-child td{border-bottom:0;}
.page-filmset .ctable .col-fs{background:rgba(229,72,77,0.045);}
@media(max-width:760px){
  .page-filmset .ctable thead{display:none;}
  .page-filmset .ctable td{display:block; border:0; padding:8px 16px;}
  .page-filmset .ctable tr{display:block; border-bottom:1px solid var(--border); padding:10px 0;}
  .page-filmset .ctable td:first-child{padding-top:14px;}
}

/* CTA band */
.page-filmset .cta-band{position:relative; overflow:hidden; text-align:center; padding:104px 0;}
.page-filmset .cta-band::before{content:""; position:absolute; inset:0; background:radial-gradient(700px 400px at 50% 0%, rgba(229,72,77,0.16), transparent 65%);}
.page-filmset .cta-band .inner{position:relative; z-index:2;}
.page-filmset .cta-band h2{font-size:clamp(34px,5vw,60px); max-width:16ch; margin:14px auto 0;}
.page-filmset .cta-band p{color:var(--ink-2); font-size:18px; margin:18px auto 0; max-width:44ch;}
.page-filmset .cta-band .cta-row{display:flex; gap:12px; justify-content:center; margin-top:32px; flex-wrap:wrap;}

/* FOOTER */
.page-filmset footer.ft{border-top:1px solid var(--border); padding:56px 0 40px; background:var(--bg-2);}
.page-filmset .ft-top{display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap;}
.page-filmset .ft-brand{max-width:300px;}
.page-filmset .ft-brand p{font-size:13px; color:var(--ink-4); margin-top:14px; line-height:1.6;}
.page-filmset .ft-cols{display:flex; gap:56px; flex-wrap:wrap;}
.page-filmset .ft-col h5{font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-4); margin-bottom:14px;}
.page-filmset .ft-col a{display:block; font-size:13.5px; color:var(--ink-2); padding:5px 0;}
.page-filmset .ft-col a:hover{color:var(--ink);}
.page-filmset .ft-bottom{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:44px; padding-top:22px; border-top:1px solid var(--border); font-size:12px; color:var(--ink-4); font-family:var(--mono);}
.page-filmset .ft-bottom .credit strong{color:var(--ink-2); font-weight:600;}

@media (prefers-reduced-motion: reduce){ .page-filmset *{animation:none !important; transition:none !important;} .page-filmset{scroll-behavior:auto;} }