:root{
    --bg:#0B0B0B;
    --bg-2:#15171C;         /* slate grey (section differentiation) */
    --slate:#15171C;
    --maxw:1300px;          /* content cap so sections don't stretch */
    --ink:#F5F2EA;          /* warm off-white, primary text */
    --rust:#B12A1C;         /* BRICK, pushed red (less orange) */
    --rust-2:#D6362A;       /* brighter red, hover */
    --linen:#E9D9CA;        /* beige secondary */
    --green:#1FB873;        /* green-screen green — used sparingly */
    --muted:#8C8276;        /* warm gray sublabels */
    --line:rgba(233,217,202,0.14);
    --line-2:rgba(233,217,202,0.30);
    --serif:'Newsreader', Georgia, serif;     /* BREADLEY SANS */
    --caps:'Jost', sans-serif;                /* SWEET SANS PRO */
    --pad: clamp(20px, 5vw, 90px);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    background:var(--bg);color:var(--ink);
    font-family:var(--caps);font-weight:300;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  ::selection{background:var(--rust);color:#fff}

  /* ---------- label / caps system (SWEET SANS) ---------- */
  .lbl{font-family:var(--caps);text-transform:uppercase;letter-spacing:.34em;
       font-size:11px;font-weight:500;color:var(--muted)}
  .lbl.rust{color:var(--rust-2)}
  .lbl.ink{color:var(--ink)}

  /* ---------- display (BREADLEY) ---------- */
  .display{font-family:var(--serif);font-weight:400;line-height:.96;
           letter-spacing:-.01em;color:var(--ink)}
  .display em{font-style:italic;color:var(--rust-2);font-weight:400}
  .sub{font-family:var(--serif);font-style:italic;font-weight:300;
       color:var(--linen);opacity:.82;line-height:1.45}

  /* ---------- top header / nav ---------- */
  header{position:sticky;top:0;z-index:50;background:rgba(11,11,11,.86);
    backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
    display:flex;align-items:center;justify-content:space-between;
    padding-top:14px;padding-bottom:14px;
    padding-left:max(var(--pad),calc((100% - var(--maxw))/2));
    padding-right:max(var(--pad),calc((100% - var(--maxw))/2))}
  .brandmark{display:flex;align-items:center;gap:12px}
  .dot{width:8px;height:8px;border-radius:50%;background:var(--rust);
    box-shadow:0 0 0 4px rgba(177,42,28,.22)}
  .wordmark{font-family:var(--caps);font-weight:500;letter-spacing:.28em;
    font-size:12px;text-transform:uppercase}
  nav{display:flex;gap:6px;flex-wrap:wrap}
  nav button{background:none;border:none;cursor:pointer;color:var(--muted);
    font-family:var(--caps);text-transform:uppercase;letter-spacing:.2em;
    font-size:11px;font-weight:400;padding:8px 12px;transition:color .25s;
    position:relative}
  nav button:hover{color:var(--ink)}
  nav button.active{color:var(--rust-2)}
  nav button.active::after{content:"";position:absolute;left:12px;right:12px;
    bottom:2px;height:1px;background:var(--rust)}

  /* ---------- view system ---------- */
  .view{display:none;animation:fade .5s ease both}
  .view.on{display:block}
  @keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

  section{padding-top:clamp(44px,6vw,96px);padding-bottom:clamp(44px,6vw,96px);
    padding-left:max(var(--pad),calc((100% - var(--maxw))/2));
    padding-right:max(var(--pad),calc((100% - var(--maxw))/2));position:relative}
  .frame{position:relative}
  /* corner brackets (carousel motif) */
  .bracket::before,.bracket::after{content:"";position:absolute;width:22px;height:22px;
    border-color:var(--line-2);}
  .bracket::before{top:0;left:0;border-top:1px solid var(--line-2);border-left:1px solid var(--line-2)}
  .bracket::after{bottom:0;left:0;border-bottom:1px solid var(--line-2);border-left:1px solid var(--line-2)}

  /* eyebrow row with page counter */
  .rowtop{display:flex;justify-content:space-between;align-items:center;margin-bottom:46px}
  .counter{font-family:var(--caps);letter-spacing:.3em;font-size:11px;color:var(--muted)}

  /* ---------- HERO ---------- */
  .hero{min-height:62vh;display:flex;flex-direction:column;justify-content:center;position:relative}
  .hero>*{position:relative;z-index:2}
  /* background video well (home hero) */
  .herovideo{position:absolute;inset:0;z-index:0;overflow:hidden;background:#070707}
  .herovideo video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
  .herovideo .vsim{position:absolute;inset:-25%;background:
      radial-gradient(60% 80% at 25% 30%, rgba(177,42,28,.22), transparent 60%),
      radial-gradient(50% 70% at 80% 70%, rgba(60,70,90,.30), transparent 60%),
      linear-gradient(120deg,#0a0a0a,#121318 60%,#0a0a0a);
    filter:saturate(.85);animation:drift 18s ease-in-out infinite alternate}
  @keyframes drift{from{transform:translate3d(-2%, -1%,0) scale(1.05)}to{transform:translate3d(2%,1%,0) scale(1.12)}}
  .herovideo .scrim{position:absolute;inset:0;background:
      linear-gradient(90deg,rgba(11,11,11,.92),rgba(11,11,11,.55) 55%,rgba(11,11,11,.35));}
  .herovideo .vchip{position:absolute;top:16px;right:16px;display:flex;align-items:center;gap:8px;z-index:3}
  .herovideo .vchip .ic{width:6px;height:6px;border-radius:50%;background:var(--rust)}
  .herovideo .vchip span{font-family:var(--caps);text-transform:uppercase;letter-spacing:.26em;font-size:9.5px;color:rgba(245,242,234,.7)}
  .hero .display{font-size:clamp(54px,11vw,150px)}
  .hero .sub{font-size:clamp(17px,2.2vw,24px);max-width:30ch;margin-top:30px}
  .reveal{opacity:0;transform:translateY(14px);animation:rise .8s cubic-bezier(.2,.7,.2,1) forwards}
  .d1{animation-delay:.05s}.d2{animation-delay:.18s}.d3{animation-delay:.32s}.d4{animation-delay:.46s}
  @keyframes rise{to{opacity:1;transform:none}}

  /* ---------- ARM CARDS (home) ---------- */
  .arms{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--line);
    max-width:var(--maxw);margin-inline:auto}
  .arm{padding:clamp(36px,5vw,72px) clamp(24px,4vw,64px);border-left:1px solid var(--line);
    position:relative;transition:background .3s}
  .arm:first-child{border-left:none}
  .arm:hover{background:var(--bg-2)}
  .arm .idx{font-family:var(--caps);font-size:13px;letter-spacing:.3em;color:var(--rust-2);margin-bottom:28px}
  .arm h3{font-family:var(--serif);font-weight:400;font-size:clamp(34px,4.6vw,60px);line-height:1;margin-bottom:18px}
  .arm h3 em{font-style:italic;color:var(--rust-2)}
  .arm p{font-family:var(--caps);font-weight:300;color:var(--muted);font-size:14px;line-height:1.7;max-width:34ch;margin-bottom:30px}
  .arm .tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:34px}
  .tag{font-family:var(--caps);text-transform:uppercase;letter-spacing:.16em;font-size:10px;
    color:var(--linen);border:1px solid var(--line);padding:5px 10px;border-radius:1px}
  .arm .cta{display:flex;gap:10px;flex-wrap:wrap}

  .btn{font-family:var(--caps);text-transform:uppercase;letter-spacing:.2em;font-size:11px;
    font-weight:500;padding:13px 20px;cursor:pointer;border:1px solid var(--rust);
    background:none;color:var(--ink);transition:.25s;display:inline-flex;align-items:center;gap:9px}
  .btn:hover{background:var(--rust);color:#fff}
  .btn.solid{background:var(--rust);color:#fff}
  .btn.solid:hover{background:var(--rust-2);border-color:var(--rust-2)}
  .btn.ghost{border-color:var(--line-2);color:var(--muted)}
  .btn.ghost:hover{border-color:var(--ink);color:var(--ink);background:none}
  .btn .arr{font-family:var(--serif)}

  /* ---------- image placeholders (= imagery direction) ---------- */
  .img{position:relative;background:
      repeating-linear-gradient(45deg,#0e0e0d 0 12px,#101010 12px 24px);
    border:1px solid var(--line);display:flex;flex-direction:column;
    justify-content:flex-end;overflow:hidden;min-height:240px}
  .img .imgtag{position:absolute;top:14px;left:14px;display:flex;align-items:center;gap:8px;z-index:3;
    background:rgba(11,11,11,.66);padding:5px 9px;border-radius:1px}
  .img .imgtag .ic{width:6px;height:6px;background:var(--rust);border-radius:50%}
  .img .imgtag span{font-family:var(--caps);text-transform:uppercase;letter-spacing:.28em;font-size:9.5px;color:var(--muted)}
  .img .cap{padding:16px 18px;background:linear-gradient(transparent,var(--bg) 44%);position:relative;z-index:3}
  .img .cap b{display:block;font-family:var(--caps);text-transform:uppercase;letter-spacing:.18em;
    font-size:10px;color:var(--linen);margin-bottom:6px;font-weight:500}
  .img .cap i{font-family:var(--serif);font-style:italic;font-weight:300;color:var(--ink);
    font-size:14px;line-height:1.4;opacity:.9}

  /* ---------- numbered list (specs-slide motif) ---------- */
  .speclist{border-top:1px solid var(--line);margin-top:8px}
  .specrow{display:grid;grid-template-columns:74px 1fr;gap:20px;align-items:baseline;
    padding:24px 0;border-bottom:1px solid var(--line)}
  .specrow .n{font-family:var(--caps);font-size:12px;letter-spacing:.2em;color:var(--rust-2);
    display:flex;align-items:center;gap:8px}
  .specrow .n::before{content:"";width:9px;height:9px;flex:none;
    background:repeating-linear-gradient(45deg,var(--rust-2) 0 1.5px,transparent 1.5px 3px)}
  .specrow .t{font-family:var(--serif);font-weight:400;font-size:clamp(20px,2.4vw,28px);color:var(--ink)}
  .specrow .t small{display:block;font-family:var(--caps);font-weight:300;text-transform:uppercase;
    letter-spacing:.16em;font-size:11px;color:var(--muted);margin-top:7px}

  /* section heading block */
  .sech{margin-bottom:48px}
  .sech .display{font-size:clamp(38px,6vw,80px)}

  /* portfolio grid */
  .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  .grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}

  /* campus strip */
  .campus{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:36px}

  /* stats */
  .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
    border:1px solid var(--line);margin-top:50px}
  .stat{background:var(--bg);padding:30px 24px}
  .stat .num{font-family:var(--serif);font-size:clamp(34px,5vw,56px);color:var(--ink);line-height:1}
  .stat .num em{font-style:italic;color:var(--rust-2)}
  .stat .lab{font-family:var(--caps);text-transform:uppercase;letter-spacing:.22em;font-size:10px;color:var(--muted);margin-top:12px}

  /* live tag (the one green touch) */
  .live{display:inline-flex;align-items:center;gap:8px;font-family:var(--caps);
    text-transform:uppercase;letter-spacing:.26em;font-size:10px;color:var(--green)}
  .live .pulse{width:7px;height:7px;border-radius:50%;background:var(--green);
    box-shadow:0 0 0 0 rgba(31,184,115,.5);animation:pulse 1.8s infinite}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(31,184,115,.45)}70%{box-shadow:0 0 0 9px rgba(31,184,115,0)}100%{box-shadow:0 0 0 0 rgba(31,184,115,0)}}

  /* CTA band */
  .cta-band{border-top:1px solid var(--line);text-align:center}
  .cta-band .display{font-size:clamp(40px,7vw,96px)}

  /* footer */
  footer{padding:40px var(--pad);border-top:1px solid var(--line);
    display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px}
  footer .lbl{font-size:10px}

  /* ---------- WIX BUILD NOTES (toggle) ---------- */
  .wix{display:none;margin:14px 0 0;padding:13px 15px;border:1px dashed var(--rust);
    border-radius:2px;background:rgba(177,42,28,.08)}
  body.notes .wix{display:block}
  .wix .h{font-family:var(--caps);text-transform:uppercase;letter-spacing:.24em;font-size:10px;
    color:var(--rust-2);font-weight:600;margin-bottom:6px;display:flex;align-items:center;gap:7px}
  .wix .h::before{content:"WIX";font-size:8px;background:var(--rust);color:#fff;padding:2px 5px;letter-spacing:.1em}
  .wix p{font-family:var(--caps);font-weight:300;font-size:12.5px;line-height:1.6;color:var(--linen)}
  .wix p + p{margin-top:5px}

  /* floating control (wireframe only — not part of the site) */
  .ctrl{position:fixed;right:18px;bottom:18px;z-index:90;display:flex;gap:8px;
    background:rgba(17,17,16,.92);backdrop-filter:blur(8px);
    border:1px solid var(--line-2);padding:8px;border-radius:3px}
  .ctrl button{font-family:var(--caps);text-transform:uppercase;letter-spacing:.16em;
    font-size:10px;font-weight:500;padding:9px 13px;cursor:pointer;border:1px solid var(--line);
    background:none;color:var(--muted);transition:.2s}
  .ctrl button:hover{color:var(--ink);border-color:var(--ink)}
  .ctrl button.on{background:var(--rust);color:#fff;border-color:var(--rust)}

  /* ---------- forms ---------- */
  .contact-wrap{max-width:960px}
  .segmented{display:inline-flex;border:1px solid var(--line);margin-bottom:48px;flex-wrap:wrap}
  .segmented button{font-family:var(--caps);text-transform:uppercase;letter-spacing:.2em;
    font-size:11px;font-weight:500;padding:15px 22px;background:none;border:none;
    border-right:1px solid var(--line);color:var(--muted);cursor:pointer;transition:.25s}
  .segmented button:last-child{border-right:none}
  .segmented button:hover{color:var(--ink)}
  .segmented button.active{background:var(--rust);color:#fff}
  .form{display:grid;grid-template-columns:1fr 1fr;gap:22px}
  .field{display:flex;flex-direction:column;gap:9px}
  .field.full{grid-column:1/-1}
  .field label{font-family:var(--caps);text-transform:uppercase;letter-spacing:.2em;
    font-size:10px;color:var(--muted)}
  .field label .req{color:var(--rust-2)}
  .field input,.field select,.field textarea{background:var(--bg-2);border:1px solid var(--line);
    color:var(--ink);font-family:var(--caps);font-weight:300;font-size:15px;padding:14px 15px;
    border-radius:1px;outline:none;transition:border-color .2s;width:100%}
  .field input::placeholder,.field textarea::placeholder{color:#5d564e}
  .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--rust)}
  .field textarea{min-height:130px;resize:vertical;font-family:var(--serif);font-style:italic;font-size:16px}
  .field select{appearance:none;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--rust-2) 50%),linear-gradient(135deg,var(--rust-2) 50%,transparent 50%);background-position:calc(100% - 18px) 20px,calc(100% - 13px) 20px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
  .field select option{background:var(--bg-2)}
  .formset{display:none}
  .formset.on{display:contents}
  .formfoot{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;
    flex-wrap:wrap;gap:18px;margin-top:8px}
  .formfoot .note{font-family:var(--serif);font-style:italic;color:var(--muted);font-size:13px;max-width:44ch;line-height:1.5}

  /* reusable drop-in CTA blocks */
  .cta-split{display:grid;grid-template-columns:1.2fr 1fr;gap:0;border:1px solid var(--line)}
  .cta-split>div{padding:clamp(30px,4vw,56px)}
  .cta-split .left{border-right:1px solid var(--line)}
  .cta-split .left h3{font-family:var(--serif);font-weight:400;font-size:clamp(28px,4vw,52px);line-height:1.02}
  .cta-split .left h3 em{font-style:italic;color:var(--rust-2)}
  .cta-split .right{display:flex;flex-direction:column;justify-content:center;gap:14px;background:var(--bg-2)}
  .cta-split .right .lbl{margin-bottom:4px}
  .blocklabel{font-family:var(--caps);text-transform:uppercase;letter-spacing:.24em;font-size:10px;
    color:var(--rust-2);margin:54px 0 14px}

  @media(max-width:1100px){
    .pipe{grid-template-columns:repeat(3,1fr)}
    .grid3{grid-template-columns:repeat(2,1fr)}
    .stats{grid-template-columns:repeat(2,1fr)}
    .diffgrid{grid-template-columns:repeat(2,1fr)}
    .vfgrid{grid-template-columns:repeat(2,1fr)}
    .logos{grid-template-columns:repeat(3,1fr) !important}
    nav{gap:0}
    nav button{padding:8px 9px;font-size:10px;letter-spacing:.12em}
  }
  @media(max-width:760px){
    .arms,.grid3,.grid2,.campus,.stats,.form,.cta-split,.paths,.diffgrid,.vfgrid{grid-template-columns:1fr}
    .bp-grid{grid-template-columns:1fr !important}
    .logos{grid-template-columns:repeat(2,1fr) !important}
    .pipe{grid-template-columns:repeat(2,1fr)}
    .arm{border-left:none;border-top:1px solid var(--line)}
    .arm:first-child{border-top:none}
    header{flex-direction:column;align-items:flex-start;gap:10px}
    nav{width:100%;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;
        scrollbar-width:none;padding-bottom:2px}
    nav::-webkit-scrollbar{display:none}
    nav button{white-space:nowrap;font-size:11px;padding:7px 11px}
    .stats{grid-template-columns:1fr 1fr}
    .cta-split .left{border-right:none;border-bottom:1px solid var(--line)}
    .hero{min-height:54vh}
  }  /* ---------- slide-out global menu ---------- */
  .menutoggle{border:1px solid var(--line-2) !important;color:var(--ink) !important;margin-left:6px}
  .menutoggle:hover{border-color:var(--rust) !important;color:var(--rust-2) !important}
  .menuscrim{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:88;opacity:0;
    pointer-events:none;transition:opacity .3s}
  .menuscrim.open{opacity:1;pointer-events:auto}
  .menupanel{position:fixed;top:0;right:0;height:100%;width:min(420px,86vw);z-index:89;
    background:var(--bg-2);border-left:1px solid var(--line-2);transform:translateX(100%);
    transition:transform .38s cubic-bezier(.4,0,.1,1);overflow-y:auto;padding:26px 30px 60px}
  .menupanel.open{transform:none}
  .menuclose{position:absolute;top:20px;right:24px;background:none;border:none;color:var(--muted);
    font-size:20px;cursor:pointer;font-family:var(--caps)}
  .menuclose:hover{color:var(--ink)}
  .menuinner{margin-top:40px}
  .menulink{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;
    font-family:var(--serif);font-weight:400;font-size:24px;color:var(--ink);padding:13px 0;
    border-bottom:1px solid var(--line);transition:color .2s;text-decoration:none}
  .menulink:hover{color:var(--rust-2)}
  .menulink.sub{font-size:16px;color:var(--muted);font-style:italic;padding-left:14px}
  .menulink.ext{color:var(--linen);opacity:.78}
  .menulink.phone{font-family:var(--caps);font-size:14px;letter-spacing:.18em;color:var(--rust-2);
    border-bottom:none;padding-top:22px}
  .mnote{font-family:var(--caps);text-transform:uppercase;letter-spacing:.18em;font-size:8.5px;
    color:var(--muted);border:1px solid var(--line);padding:3px 7px;border-radius:1px;flex-shrink:0}
  .menusocial{display:flex;gap:16px;margin-top:18px}
  .menusocial span{font-family:var(--caps);text-transform:uppercase;letter-spacing:.12em;
    font-size:10px;color:var(--muted);cursor:pointer}
  .menusocial span:hover{color:var(--rust-2)}

  /* ---------- brand path cards ---------- */
  .paths{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  .pathcard{border:1px solid var(--line);background:var(--bg);padding:32px 28px;
    border-top:2px solid var(--line);transition:.25s}
  .pathcard:hover{border-color:var(--line-2)}
  .pathcard.feature{border-top:2px solid var(--rust)}
  .pathcard .pn{font-family:var(--serif);font-size:30px;color:var(--ink);margin-bottom:16px}
  .pathcard p{font-family:var(--caps);font-weight:300;color:var(--linen);font-size:14px;line-height:1.65;margin-bottom:22px}
  .pathcard .pmeta{font-family:var(--caps);text-transform:uppercase;letter-spacing:.18em;font-size:10px;color:var(--rust-2)}

  /* ---------- client logo wall ---------- */
  .logocell{background:var(--bg);padding:34px 18px;display:flex;align-items:center;justify-content:center;
    text-align:center;font-family:var(--caps);text-transform:uppercase;letter-spacing:.14em;
    font-size:11px;color:var(--linen);min-height:90px}

  /* ---------- inverse (light) section — the one "white" moment ---------- */
  .inverse{background:var(--linen)}
  .inverse .display{color:#1b140f}
  .inverse .display em{color:var(--rust)}
  .inverse .lbl{color:#6b5d50}
  .inverse .lbl.rust{color:var(--rust)}
  .inverse .counter{color:#8a7c6e}
  .inverse .logos{background:rgba(27,20,15,.16) !important;border-color:rgba(27,20,15,.16) !important}
  .inverse .logocell{background:var(--linen);color:#3a2f26}
  .inverse .wix{background:rgba(177,42,28,.06)}
  .inverse .wix p{color:#4a3d33}

  /* ---------- pipeline strip ---------- */
  .pipe{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);
    border:1px solid var(--line);margin-top:42px}
  .pipestep{background:var(--bg);padding:26px 18px;display:flex;flex-direction:column;gap:10px}
  .pipestep.accent{background:rgba(177,42,28,.10)}
  .ps-top{display:flex;align-items:center;gap:10px}
  .ps-n{font-family:var(--caps);font-size:11px;letter-spacing:.2em;color:var(--rust-2)}
  .ps-t{font-family:var(--serif);font-size:clamp(20px,2.4vw,27px);color:var(--ink);line-height:1}
  .ps-d{font-family:var(--caps);font-weight:300;font-size:12px;line-height:1.55;color:var(--muted)}

  /* ---------- video tiles (Vimeo) ---------- */
  .vid{position:relative;background:repeating-linear-gradient(45deg,#0e0e0d 0 12px,#101010 12px 24px);
    border:1px solid var(--line);aspect-ratio:16/9;display:flex;flex-direction:column;justify-content:flex-end;
    overflow:hidden;cursor:pointer;transition:.25s}
  .vid:hover{border-color:var(--rust)}
  .vid .play{position:absolute;inset:0;margin:auto;width:54px;height:54px;display:flex;align-items:center;
    justify-content:center;border:1px solid var(--line-2);border-radius:50%;color:var(--ink);font-size:16px;
    background:rgba(11,11,11,.4);transition:.25s}
  .vid:hover .play{background:var(--rust);border-color:var(--rust);color:#fff}
  .vid .imgtag{position:absolute;top:12px;left:12px;display:flex;align-items:center;gap:7px;z-index:3;
    background:rgba(11,11,11,.66);padding:4px 8px;border-radius:1px}
  .vid .imgtag .ic{width:6px;height:6px;background:var(--rust);border-radius:50%}
  .vid .imgtag span{font-family:var(--caps);text-transform:uppercase;letter-spacing:.24em;font-size:9px;color:var(--muted)}
  .vid .cap{padding:14px 16px;background:linear-gradient(transparent,var(--bg) 46%);position:relative;z-index:3}
  .vid .cap b{display:block;font-family:var(--caps);text-transform:uppercase;letter-spacing:.16em;font-size:10px;color:var(--linen);margin-bottom:5px;font-weight:500}
  .vid .cap i{font-family:var(--serif);font-style:italic;font-weight:300;color:var(--ink);font-size:13px;opacity:.85}
  .vid.hide{display:none}

  /* ---------- cinematography motifs (subtle camera HUD) ---------- */
  /* rule-of-thirds grid on every framed media element */
  .img::before,.vid::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:
      linear-gradient(90deg,transparent calc(33.333% - .5px),rgba(233,217,202,.085) calc(33.333% - .5px),rgba(233,217,202,.085) calc(33.333% + .5px),transparent calc(33.333% + .5px)),
      linear-gradient(90deg,transparent calc(66.666% - .5px),rgba(233,217,202,.085) calc(66.666% - .5px),rgba(233,217,202,.085) calc(66.666% + .5px),transparent calc(66.666% + .5px)),
      linear-gradient(180deg,transparent calc(33.333% - .5px),rgba(233,217,202,.085) calc(33.333% - .5px),rgba(233,217,202,.085) calc(33.333% + .5px),transparent calc(33.333% + .5px)),
      linear-gradient(180deg,transparent calc(66.666% - .5px),rgba(233,217,202,.085) calc(66.666% - .5px),rgba(233,217,202,.085) calc(66.666% + .5px),transparent calc(66.666% + .5px));}
  /* center frame marker (the "+") on image frames */
  .img::after{content:"";position:absolute;left:50%;top:50%;width:20px;height:20px;transform:translate(-50%,-50%);
    z-index:1;pointer-events:none;opacity:.5;
    background:linear-gradient(var(--linen),var(--linen)) center/100% 1px no-repeat,
               linear-gradient(var(--linen),var(--linen)) center/1px 100% no-repeat;}
  /* hero thirds grid — fades out on the left so it sits clear of the headline, copy, and buttons */
  .herovideo::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:
      linear-gradient(90deg,transparent calc(33.333% - .5px),rgba(233,217,202,.085) calc(33.333% - .5px),rgba(233,217,202,.085) calc(33.333% + .5px),transparent calc(33.333% + .5px)),
      linear-gradient(90deg,transparent calc(66.666% - .5px),rgba(233,217,202,.085) calc(66.666% - .5px),rgba(233,217,202,.085) calc(66.666% + .5px),transparent calc(66.666% + .5px)),
      linear-gradient(180deg,transparent calc(33.333% - .5px),rgba(233,217,202,.085) calc(33.333% - .5px),rgba(233,217,202,.085) calc(33.333% + .5px),transparent calc(33.333% + .5px)),
      linear-gradient(180deg,transparent calc(66.666% - .5px),rgba(233,217,202,.085) calc(66.666% - .5px),rgba(233,217,202,.085) calc(66.666% + .5px),transparent calc(66.666% + .5px));
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 52%,#000 74%,#000 100%);
    mask-image:linear-gradient(90deg,transparent 0%,transparent 52%,#000 74%,#000 100%);}

  /* marker glyphs (camera bullets) */
  .mk{display:inline-block;vertical-align:middle;flex:none}
  .mk-plus{position:relative;width:11px;height:11px}
  .mk-plus::before,.mk-plus::after{content:"";position:absolute;background:var(--rust-2)}
  .mk-plus::before{left:50%;top:0;width:1.4px;height:100%;transform:translateX(-50%)}
  .mk-plus::after{top:50%;left:0;height:1.4px;width:100%;transform:translateY(-50%)}
  .mk-zebra{width:14px;height:11px;background:repeating-linear-gradient(45deg,var(--rust-2) 0 2px,transparent 2px 4.5px)}
  .mk-grid{width:12px;height:12px;border:1px solid var(--rust-2);
    background:linear-gradient(90deg,transparent 33%,var(--rust-2) 33% 34.5%,transparent 34.5% 66%,var(--rust-2) 66% 67.5%,transparent 67.5%),
               linear-gradient(180deg,transparent 33%,var(--rust-2) 33% 34.5%,transparent 34.5% 66%,var(--rust-2) 66% 67.5%,transparent 67.5%)}
  .mk-wave{display:inline-flex;align-items:center;gap:2px;height:12px}
  .mk-wave i{display:block;width:2px;background:var(--rust-2);height:40%}
  .mk-wave i:nth-child(2){height:90%}.mk-wave i:nth-child(3){height:60%}
  .mk-wave i:nth-child(4){height:100%}.mk-wave i:nth-child(5){height:50%}

  /* waveform divider */
  .waveform{display:flex;align-items:center;gap:3px;height:26px;margin:0 0 6px}
  .waveform span{display:block;width:2px;height:100%;background:var(--rust-2);opacity:.45;
    transform-origin:center;animation:wf 1.5s ease-in-out infinite}
  .waveform span:nth-child(3n){opacity:.7}
  .waveform span:nth-child(2n){animation-delay:.2s}
  .waveform span:nth-child(3n){animation-delay:.4s}
  .waveform span:nth-child(5n){animation-delay:.6s}
  @keyframes wf{0%,100%{transform:scaleY(.28)}50%{transform:scaleY(1)}}

  /* zebra edge on the featured tier card */
  .pathcard.feature{position:relative;overflow:hidden}
  .pathcard.feature::after{content:"";position:absolute;left:0;right:0;top:0;height:4px;
    background:repeating-linear-gradient(45deg,var(--rust) 0 3px,transparent 3px 6px)}
  /* ---------- section/arm icons ---------- */
  .armicon{color:var(--rust-2);margin-bottom:20px}
  .armicon svg{width:38px;height:38px;display:block}
  .secicon{color:var(--rust-2);margin-bottom:18px}
  .secicon svg{width:34px;height:34px;display:block}

  /* ---------- AI differentiator wall ---------- */
  .diffgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
    border:1px solid var(--line);margin:40px 0 14px}
  .diffcell{background:var(--bg);padding:24px 20px;display:flex;flex-direction:column;gap:11px}
  .diffcell .mk{margin-bottom:1px}
  .diffcell b{font-family:var(--caps);text-transform:uppercase;letter-spacing:.16em;font-size:11px;font-weight:600;color:var(--ink)}
  .diffcell i{font-family:var(--caps);font-style:normal;font-weight:300;font-size:13px;line-height:1.6;color:var(--muted)}
  /* ---------- vimeo feed embed (portfolio) ---------- */
  .vimeofeed{border:1px solid var(--line);background:var(--slate);padding:clamp(16px,2.5vw,26px)}
  .vfhead{display:flex;align-items:center;gap:10px;margin-bottom:16px}
  .vmark{width:28px;height:19px;background:var(--rust);color:#fff;font-family:var(--caps);font-weight:600;
    font-size:12px;display:flex;align-items:center;justify-content:center;border-radius:2px}
  .vfhead>span:last-child{font-family:var(--caps);text-transform:uppercase;letter-spacing:.2em;font-size:10px;color:var(--muted)}
  .vfgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
  .vfcell{aspect-ratio:16/9;background:repeating-linear-gradient(45deg,#0e0e0d 0 12px,#101010 12px 24px);
    border:1px solid var(--line);display:flex;align-items:center;justify-content:center}
  .vfcell .play{width:46px;height:46px;border:1px solid var(--line-2);border-radius:50%;display:flex;
    align-items:center;justify-content:center;color:var(--ink);font-size:13px;background:rgba(11,11,11,.4);transition:.25s}
  .vfcell:hover .play{background:var(--rust);border-color:var(--rust);color:#fff}
  .vfnote{font-family:var(--serif);font-style:italic;color:var(--muted);font-size:14px;margin-top:16px}

  /* ---------- scroll / entrance animations ---------- */
  body.js-anim .ra{opacity:0;transform:translateY(16px);
    transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
    transition-delay:var(--d,0s);will-change:opacity,transform}
  body.js-anim .ra.pop{transform:translateY(10px) scale(.84)}
  body.js-anim .ra.ra-in{opacity:1;transform:none}
  @media (prefers-reduced-motion: reduce){
    body.js-anim .ra{opacity:1 !important;transform:none !important;transition:none}
  }

/* ============================================================
   v3 MOTION + EFFECTS LAYER (appended from lbmg-global-FINAL.css)
   ============================================================ */

/* ============================================================================
   LAUNCHBOX MEDIA GROUP — GLOBAL STYLES (FINAL)
   Last updated: 2026-05-30

   Paste this entire file into:
     Wix Studio → Code panel (</>) → Page Code → CSS → global.css
     (Select all in the file, copy, paste — replaces any prior version.)

   KEY FIX vs earlier versions:
     • Hide-then-reveal classes (lb-reveal, lb-split, lb-clip-reveal) are now
       gated behind `html.lb-js`. The motion JS adds that class on boot.
       Result: when JS isn't running (editor canvas), elements stay VISIBLE.
       When JS runs (Preview / Published), elements hide then animate in.
       The editor stops "disappearing" your content while you build.

     • Removed forced padding on `.lb-btn-solid`/`.lb-btn-ghost` so they
       respect Wix's own button width and don't get text-wrapped.

   COMPANION FILES:
     • lbmg-motion-FINAL.html — paste into Dashboard → Settings → Custom Code
     • LBMG_BUILD_FROM_ZERO.md — the master walkthrough
   ============================================================================ */


/* ----------------------------------------------------------------------------
   TOKENS — color + motion variables
   ---------------------------------------------------------------------------- */
:root {
  --lb-bg:       #0B0B0B;
  --lb-slate:    #15171C;
  --lb-muted:    #8C8276;
  --lb-linen:    #E9D9CA;
  --lb-ink:      #F5F2EA;
  --lb-rust:     #B12A1C;
  --lb-rust-2:   #D6362A;
  --lb-line:     rgba(233, 217, 202, 0.14);
  --lb-line-2:   rgba(233, 217, 202, 0.30);
  --lb-maxw:     1300px;

  --lb-ease:        cubic-bezier(.2, .7, .2, 1);
  --lb-ease-out:    cubic-bezier(.16, 1, .3, 1);
  --lb-ease-in-out: cubic-bezier(.85, 0, .15, 1);
  --lb-fast:        180ms;
  --lb-med:         420ms;
  --lb-slow:        800ms;
  --lb-slower:      1200ms;
}


/* ----------------------------------------------------------------------------
   GLOBAL POLISH
   ---------------------------------------------------------------------------- */
html { scroll-behavior: smooth; }
::selection { background: var(--lb-rust); color: #fff; }
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
a, button, [role="button"],
.lb-pathcard, .lb-frame, .lb-diffcell, .lb-pipe-step,
.lb-tag, .lb-btn-solid, .lb-btn-ghost, .lb-video-tile {
  transition: all var(--lb-med) var(--lb-ease);
}


/* ============================================================================
   1. VIEWFINDER FRAME    →    lb-frame  (+ lb-label, lb-cap, lb-frame-brackets)
   Hover lift + slow image zoom + thirds grid overlay + center "+".
   ============================================================================ */
.lb-frame {
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
}
.lb-frame:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.6), 0 0 0 1px var(--lb-line-2);
}
.lb-frame img { transition: transform 1.2s var(--lb-ease-out); }
.lb-frame:hover img { transform: scale(1.04); }
.lb-frame::before {
  content: "";
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, transparent calc(33.333% - .5px), rgba(233,217,202,.085) calc(33.333% - .5px), rgba(233,217,202,.085) calc(33.333% + .5px), transparent calc(33.333% + .5px)),
    linear-gradient(90deg, transparent calc(66.666% - .5px), rgba(233,217,202,.085) calc(66.666% - .5px), rgba(233,217,202,.085) calc(66.666% + .5px), transparent calc(66.666% + .5px)),
    linear-gradient(180deg, transparent calc(33.333% - .5px), rgba(233,217,202,.085) calc(33.333% - .5px), rgba(233,217,202,.085) calc(33.333% + .5px), transparent calc(33.333% + .5px)),
    linear-gradient(180deg, transparent calc(66.666% - .5px), rgba(233,217,202,.085) calc(66.666% - .5px), rgba(233,217,202,.085) calc(66.666% + .5px), transparent calc(66.666% + .5px));
}
.lb-frame::after {
  content: "";
  position: absolute; left: 50%; top: 50%; width: 20px; height: 20px;
  transform: translate(-50%, -50%); z-index: 1; pointer-events: none; opacity: .5;
  background:
    linear-gradient(var(--lb-linen), var(--lb-linen)) center / 100% 1px no-repeat,
    linear-gradient(var(--lb-linen), var(--lb-linen)) center / 1px 100% no-repeat;
}
.lb-frame .lb-cap {
  position: relative; z-index: 3;
  background: linear-gradient(transparent, var(--lb-bg) 44%);
  padding: 20px 22px;
}
.lb-frame .lb-label {
  position: relative; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  background: rgba(11, 11, 11, .72);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: 1px;
}


/* ============================================================================
   2. HERO MASKED GRID    →    lb-hero-grid
   Left-fading thirds grid + slow drifting ambient mesh gradient behind.
   ============================================================================ */
.lb-hero-grid { position: relative; overflow: hidden; isolation: isolate; }
.lb-hero-grid::after {
  content: ""; position: absolute; inset: -10%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 85% 50%, rgba(177, 42, 28, 0.12), transparent 60%),
    radial-gradient(ellipse 50% 60% at 70% 30%, rgba(27, 31, 38, 0.8), transparent 60%),
    radial-gradient(ellipse 40% 40% at 90% 80%, rgba(214, 54, 42, 0.06), transparent 70%);
  animation: lbMeshDrift 24s ease-in-out infinite alternate;
}
@keyframes lbMeshDrift {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-3%, 2%) scale(1.05); }
}
.lb-hero-grid::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, transparent calc(33.333% - .5px), rgba(233,217,202,.085) calc(33.333% - .5px), rgba(233,217,202,.085) calc(33.333% + .5px), transparent calc(33.333% + .5px)),
    linear-gradient(90deg, transparent calc(66.666% - .5px), rgba(233,217,202,.085) calc(66.666% - .5px), rgba(233,217,202,.085) calc(66.666% + .5px), transparent calc(66.666% + .5px)),
    linear-gradient(180deg, transparent calc(33.333% - .5px), rgba(233,217,202,.085) calc(33.333% - .5px), rgba(233,217,202,.085) calc(33.333% + .5px), transparent calc(33.333% + .5px)),
    linear-gradient(180deg, transparent calc(66.666% - .5px), rgba(233,217,202,.085) calc(66.666% - .5px), rgba(233,217,202,.085) calc(66.666% + .5px), transparent calc(66.666% + .5px));
  -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 52%, #000 74%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0, transparent 52%, #000 74%, #000 100%);
}
.lb-hero-grid > * { position: relative; z-index: 2; }


/* ============================================================================
   3. MARKERS, TYPE ACCENTS, BUTTONS
   ============================================================================ */
.lb-mk-plus, .lb-mk-zebra {
  display: inline-block; width: 14px; height: 14px; flex: 0 0 auto; vertical-align: middle;
}
.lb-mk-plus { position: relative; }
.lb-mk-plus::before, .lb-mk-plus::after { content: ""; position: absolute; background: var(--lb-rust-2); }
.lb-mk-plus::before { left: 50%; top: 0; width: 1.5px; height: 100%; transform: translateX(-50%); }
.lb-mk-plus::after { top: 50%; left: 0; height: 1.5px; width: 100%; transform: translateY(-50%); }
.lb-mk-zebra { background: repeating-linear-gradient(45deg, var(--lb-rust-2) 0 2px, transparent 2px 4px); }

.lb-eyebrow {
  font-family: 'Objective', sans-serif !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--lb-rust) !important;
  line-height: 1.4 !important;
}
.lb-counter {
  font-family: 'Objective', sans-serif !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--lb-muted) !important;
}
.lb-tag {
  font-family: 'Objective', sans-serif !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--lb-linen) !important;
  padding: 7px 13px !important;
  border: 1px solid var(--lb-line) !important;
  display: inline-block;
  background: transparent;
  transition: all var(--lb-fast) var(--lb-ease);
}
.lb-tag:hover {
  border-color: var(--lb-rust);
  color: var(--lb-ink) !important;
}

/* BUTTONS — no forced padding (let Wix's button settings control sizing) */
.lb-btn-solid, .lb-btn-ghost {
  font-family: 'Objective', sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all var(--lb-med) var(--lb-ease) !important;
}
.lb-btn-solid {
  background-color: var(--lb-rust) !important;
  border: 1px solid var(--lb-rust) !important;
  color: #ffffff !important;
}
.lb-btn-solid::before {
  content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.18), transparent);
  transition: left 0.6s var(--lb-ease-out);
  pointer-events: none;
}
.lb-btn-solid:hover::before { left: 100%; }
.lb-btn-solid:hover {
  background-color: var(--lb-rust-2) !important;
  border-color: var(--lb-rust-2) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -8px rgba(177, 42, 28, 0.5);
}
.lb-btn-ghost {
  background-color: transparent !important;
  border: 1px solid var(--lb-line-2) !important;
  color: var(--lb-ink) !important;
}
.lb-btn-ghost:hover {
  border-color: var(--lb-ink) !important;
  background-color: rgba(245, 242, 234, 0.04) !important;
  transform: translateY(-2px);
}


/* ============================================================================
   4. LAYOUT BLOCKS — diffwall, pathcard, pipeline
   ============================================================================ */
.lb-diffwall {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--lb-line); border: 1px solid var(--lb-line);
}
.lb-diffcell {
  background: var(--lb-bg); padding: 28px 24px;
  display: flex; flex-direction: column; gap: 12px;
  transition: background var(--lb-med) var(--lb-ease);
}
.lb-diffcell:hover { background: var(--lb-slate); }

.lb-pathcard {
  background: var(--lb-bg); border: 1px solid var(--lb-line);
  padding: 40px 32px; position: relative;
  transition: all var(--lb-med) var(--lb-ease);
}
.lb-pathcard:hover {
  transform: translateY(-6px); border-color: var(--lb-line-2);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.5);
}
.lb-pathcard-feature { background: rgba(177, 42, 28, 0.06); border-top: 3px solid var(--lb-rust); }
.lb-pathcard-feature:hover { box-shadow: 0 30px 60px -20px rgba(177, 42, 28, 0.35); }

.lb-pipe-step {
  background: var(--lb-bg); padding: 28px 20px;
  display: flex; flex-direction: column; gap: 12px;
  position: relative; transition: background var(--lb-med) var(--lb-ease);
}
.lb-pipe-step::before {
  content: ""; position: absolute; top: 0; left: 0;
  height: 2px; width: 0; background: var(--lb-rust);
  transition: width var(--lb-med) var(--lb-ease);
}
.lb-pipe-step:hover::before { width: 100%; }
.lb-pipe-step:hover { background: var(--lb-slate); }
.lb-pipe-step-accent { background: rgba(177, 42, 28, 0.10); }


/* ============================================================================
   5. SECTIONS
   ============================================================================ */
.lb-section {
  padding: clamp(80px, 10vw, 140px) clamp(20px, 5vw, 80px) !important;
  position: relative;
}
.lb-section-slate { background-color: var(--lb-slate) !important; }
.lb-section-light { background-color: var(--lb-linen) !important; color: var(--lb-bg) !important; }


/* ============================================================================
   6. KINETIC TEXT BAND (lb-band-text)
   ============================================================================ */
.lb-band-text {
  overflow: hidden;
  background: var(--lb-bg);
  border-block: 1px solid var(--lb-line);
  padding: clamp(40px, 6vw, 80px) 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.lb-band-text-track {
  display: flex; gap: 80px; width: max-content;
  font-family: 'Breadley Sans', serif;
  font-size: clamp(72px, 14vw, 180px);
  line-height: 1; white-space: nowrap;
  color: var(--lb-ink);
  animation: lbBandScroll 40s linear infinite;
}
@keyframes lbBandScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.lb-band-text-slate { background: var(--lb-slate); }
.lb-band-text-rust .lb-band-text-track { color: var(--lb-rust); }


/* ============================================================================
   7. HORIZONTAL SCROLL SNAP (lb-hscroll)
   ============================================================================ */
.lb-hscroll {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: clamp(20px, 5vw, 80px);
  padding: 12px clamp(20px, 5vw, 80px) 40px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--lb-rust) transparent;
}
.lb-hscroll::-webkit-scrollbar { height: 6px; }
.lb-hscroll::-webkit-scrollbar-track { background: var(--lb-line); }
.lb-hscroll::-webkit-scrollbar-thumb { background: var(--lb-rust); border-radius: 3px; }
.lb-hscroll-item {
  flex: 0 0 clamp(280px, 38vw, 520px);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}


/* ============================================================================
   8. STICKY-SCROLL STORYTELLING (lb-sticky-pair)
   ============================================================================ */
.lb-sticky-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}
.lb-sticky-text {
  position: sticky;
  top: 120px;
  padding-block: 40px;
}
.lb-sticky-media {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 8vh, 100px);
}
.lb-sticky-media > * { min-height: 60vh; }


/* ============================================================================
   9. VIDEO GRID with hover-dim (lb-video-grid + lb-video-tile)
   ============================================================================ */
.lb-video-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--lb-line); border: 1px solid var(--lb-line);
}
.lb-video-tile {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--lb-bg);
  transition: transform var(--lb-med) var(--lb-ease), filter var(--lb-med) var(--lb-ease);
}
.lb-video-tile video, .lb-video-tile img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--lb-slower) var(--lb-ease-out);
}
.lb-video-grid:hover .lb-video-tile { filter: brightness(0.4) saturate(0.6); }
.lb-video-grid .lb-video-tile:hover {
  filter: brightness(1) saturate(1); z-index: 2;
}
.lb-video-grid .lb-video-tile:hover video,
.lb-video-grid .lb-video-tile:hover img { transform: scale(1.05); }
.lb-video-tile .lb-video-label {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 24px 22px;
  background: linear-gradient(transparent, rgba(11,11,11,0.95) 50%);
  z-index: 3;
  transform: translateY(20%);
  opacity: 0;
  transition: transform var(--lb-med) var(--lb-ease), opacity var(--lb-med) var(--lb-ease);
}
.lb-video-tile:hover .lb-video-label { transform: translateY(0); opacity: 1; }


/* ============================================================================
   10. SIDE-GUTTER INDEX (lb-side-mark)
   ============================================================================ */
.lb-side-mark {
  position: fixed;
  left: 20px;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: left center;
  z-index: 50;
  font-family: 'Objective', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--lb-muted);
  display: flex; gap: 12px; align-items: center;
  pointer-events: none;
}
.lb-side-mark::before {
  content: ""; width: 24px; height: 1px; background: var(--lb-line-2);
}


/* ============================================================================
   11. MARQUEE (text + image variants)
   ============================================================================ */
.lb-marquee {
  overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.lb-marquee-track {
  display: flex; gap: 60px; width: max-content;
  animation: lbMarquee 30s linear infinite;
}
.lb-marquee:hover .lb-marquee-track { animation-play-state: paused; }
@keyframes lbMarquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.lb-marquee-imgs .lb-marquee-track img {
  height: 40px; width: auto;
  opacity: 0.5; filter: grayscale(100%) brightness(0) invert(1);
  transition: opacity var(--lb-fast) var(--lb-ease);
}
.lb-marquee-imgs .lb-marquee-track img:hover { opacity: 1; filter: none; }


/* ============================================================================
   12. STAT (lb-stat)  — pure CSS styling. JS counter is optional.
   ============================================================================ */
.lb-stat {
  font-family: 'Breadley Sans', serif !important;
  font-size: clamp(56px, 9vw, 120px) !important;
  line-height: 1 !important;
  color: var(--lb-ink) !important;
  font-feature-settings: 'tnum' on;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}


/* ============================================================================
   13. KINETIC ACCENT (lb-kinetic) — pure CSS shimmer
   ============================================================================ */
.lb-kinetic {
  display: inline-block;
  background: linear-gradient(120deg, var(--lb-rust) 0%, var(--lb-rust-2) 50%, var(--lb-rust) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: lbKinetic 6s ease-in-out infinite;
}
@keyframes lbKinetic {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}


/* ============================================================================
   ★★★ EDITOR-SAFE GATING ★★★

   Hide-then-reveal classes (lb-reveal, lb-split, lb-clip-reveal) ONLY engage
   their hidden initial state when JS has loaded (`html.lb-js` class set
   by the motion script). Without JS, elements stay visible — so the
   editor canvas doesn't disappear your content while you build.
   ============================================================================ */

/* DEFAULTS: visible (no JS = editor-safe) */
.lb-reveal, .lb-reveal-up, .lb-reveal-left, .lb-reveal-right,
.lb-reveal-scale, .lb-reveal-blur,
.lb-clip-reveal, .lb-clip-reveal-up,
.lb-split {
  opacity: 1;
  transform: none;
  clip-path: none;
  filter: none;
}

/* Once JS has booted, apply hidden initial states */
html.lb-js .lb-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--lb-slow) var(--lb-ease-out),
              transform var(--lb-slow) var(--lb-ease-out);
  will-change: opacity, transform;
}
html.lb-js .lb-reveal-up    { transform: translateY(40px); }
html.lb-js .lb-reveal-left  { transform: translateX(-40px); }
html.lb-js .lb-reveal-right { transform: translateX(40px); }
html.lb-js .lb-reveal-scale { transform: scale(0.96); transform-origin: center; }
html.lb-js .lb-reveal-blur  { filter: blur(8px); }
html.lb-js .lb-reveal.in,
html.lb-js .lb-reveal-up.in,
html.lb-js .lb-reveal-left.in,
html.lb-js .lb-reveal-right.in,
html.lb-js .lb-reveal-scale.in { opacity: 1; transform: none; }
html.lb-js .lb-reveal-blur.in  { filter: blur(0); }

html.lb-js .lb-clip-reveal {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.2s var(--lb-ease-out);
}
html.lb-js .lb-clip-reveal.in { clip-path: inset(0 0 0 0); }
html.lb-js .lb-clip-reveal-up { clip-path: inset(100% 0 0 0); }
html.lb-js .lb-clip-reveal-up.in { clip-path: inset(0 0 0 0); }

html.lb-js .lb-split .lb-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.6em) rotateX(40deg);
  transform-origin: bottom;
  transition: opacity 600ms var(--lb-ease-out), transform 800ms var(--lb-ease-out);
}
html.lb-js .lb-split.in .lb-char {
  opacity: 1; transform: none;
  transition-delay: calc(var(--i, 0) * 28ms);
}

/* Stagger delays for use on grouped reveal elements */
.lb-d1 { transition-delay: 80ms; }
.lb-d2 { transition-delay: 160ms; }
.lb-d3 { transition-delay: 240ms; }
.lb-d4 { transition-delay: 320ms; }
.lb-d5 { transition-delay: 400ms; }
.lb-d6 { transition-delay: 480ms; }

@media (prefers-reduced-motion: reduce) {
  html.lb-js .lb-reveal, html.lb-js .lb-reveal-up, html.lb-js .lb-reveal-left,
  html.lb-js .lb-reveal-right, html.lb-js .lb-reveal-scale, html.lb-js .lb-reveal-blur,
  html.lb-js .lb-clip-reveal, html.lb-js .lb-clip-reveal-up,
  html.lb-js .lb-split .lb-char {
    opacity: 1 !important; transform: none !important; filter: none !important;
    clip-path: none !important; transition: none !important;
  }
}


/* ============================================================================
   PARALLAX, TILT, MAGNETIC — JS-driven, no editor side effects
   ============================================================================ */
.lb-parallax-slow { will-change: transform; transform: translate3d(0, calc(var(--y, 0) * -0.15), 0); }
.lb-parallax-med  { will-change: transform; transform: translate3d(0, calc(var(--y, 0) * -0.3), 0); }

.lb-tilt {
  transform-style: preserve-3d;
  transform: perspective(900px)
             rotateX(calc(var(--tilt-y, 0) * 1deg))
             rotateY(calc(var(--tilt-x, 0) * 1deg));
  transition: transform 300ms var(--lb-ease-out);
}
.lb-tilt > * { transform: translateZ(20px); }

/* MAGNETIC — uses --mx/--my that JS sets. No transform without JS, so
   buttons stay normal size. */
.lb-magnetic {
  transform: translate(calc(var(--mx, 0) * 1px), calc(var(--my, 0) * 1px));
  transition: transform 200ms var(--lb-ease-out);
}


/* ============================================================================
   CURSOR (lb-cursor-zone) — JS creates the cursor element; harmless without JS
   ============================================================================ */
.lb-cursor-zone { /* cursor: none only when JS is loaded */ }
html.lb-js .lb-cursor-zone { cursor: var(--lb-reticle), crosshair; }
.lb-cursor {
  position: fixed; top: 0; left: 0;
  width: 30px; height: 30px;
  border: 1px solid var(--lb-rust);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none; z-index: 9999;
  mix-blend-mode: difference;
  transition: width 250ms var(--lb-ease), height 250ms var(--lb-ease),
              border-color 250ms var(--lb-ease), background-color 250ms var(--lb-ease);
}
.lb-cursor.hover { width: 80px; height: 80px; border-color: var(--lb-rust-2); background-color: rgba(214, 54, 42, 0.1); }
.lb-cursor.hover-text { width: 100px; height: 100px; }
.lb-cursor-text {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Objective', sans-serif;
  font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.15em;
  color: var(--lb-ink);
  opacity: 0;
  transition: opacity 200ms var(--lb-ease);
}
.lb-cursor.hover-text .lb-cursor-text { opacity: 1; }


/* ============================================================================
   LOADER (lb-loader-pro) — only render if JS will remove it
   ============================================================================ */
.lb-loader-pro, .lb-loader {
  position: fixed; inset: 0; z-index: 99999;
  background: var(--lb-bg);
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  gap: 24px;
  transition: clip-path 1.2s var(--lb-ease-in-out) 400ms;
  clip-path: inset(0 0 0 0);
}
.lb-loader-pro.gone, .lb-loader.gone {
  clip-path: inset(0 0 100% 0);
  pointer-events: none;
}
.lb-loader-line {
  width: 2px; height: 0;
  background: var(--lb-rust);
  animation: lbLoaderLine 1.2s var(--lb-ease-out) forwards;
}
@keyframes lbLoaderLine {
  0% { height: 0; }
  100% { height: 80px; }
}
.lb-loader-wordmark {
  font-family: 'Breadley Sans', serif;
  font-size: 20px;
  color: var(--lb-ink);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0;
  animation: lbLoaderFade 0.8s var(--lb-ease-out) 1s forwards;
}
@keyframes lbLoaderFade { to { opacity: 1; } }


/* ============================================================================
   FOCUS RING
   ============================================================================ */
*:focus-visible {
  outline: 2px solid var(--lb-rust);
  outline-offset: 3px;
}


/* ============================================================================
   RESPONSIVE
   ============================================================================ */

/* Tablet (≤ 1100px) */
@media (max-width: 1100px) {
  .lb-diffwall { grid-template-columns: repeat(2, 1fr); }
  .lb-section { padding: clamp(60px, 8vw, 100px) clamp(20px, 4vw, 50px) !important; }
  .lb-tilt { transform: none !important; }
  .lb-tilt > * { transform: none; }
  .lb-sticky-pair { grid-template-columns: 1fr; }
  .lb-sticky-text { position: static; }
  .lb-video-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile (≤ 760px) */
@media (max-width: 760px) {
  h1, .lb-h1 { font-size: 56px !important; line-height: 1.05 !important; }
  h2, .lb-h2 { font-size: 36px !important; line-height: 1.08 !important; }
  h3, .lb-h3 { font-size: 24px !important; line-height: 1.15 !important; }
  p, .lb-body { font-size: 16px !important; line-height: 1.65 !important; }
  .lb-eyebrow { font-size: 11px !important; letter-spacing: 0.18em !important; }
  .lb-counter { font-size: 10px !important; }

  .lb-section { padding: 64px 20px !important; }
  .lb-diffwall { grid-template-columns: 1fr; }
  .lb-video-grid { grid-template-columns: 1fr; }
  .lb-hscroll-item { flex: 0 0 80vw; }

  .lb-hero-grid::before {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 60%);
            mask-image: linear-gradient(180deg, transparent 0, #000 60%);
    opacity: 0.5;
  }
  .lb-hero-grid::after { animation: none; opacity: 0.7; }
  .lb-frame .lb-cap { padding: 14px 16px; }

  .lb-btn-solid, .lb-btn-ghost { width: 100% !important; }
  .lb-tag { font-size: 10px !important; padding: 5px 10px !important; }

  html.lb-js .lb-cursor-zone { cursor: auto; }
  .lb-cursor { display: none; }
  .lb-magnetic { transform: none !important; }

  .lb-frame:hover, .lb-pathcard:hover, .lb-pipe-step:hover,
  .lb-diffcell:hover, .lb-video-tile:hover { transform: none !important; }
  .lb-frame:hover img { transform: none !important; }
  .lb-video-grid:hover .lb-video-tile { filter: none !important; }

  .lb-marquee-track { animation-duration: 20s; gap: 36px; }
  .lb-band-text-track { animation-duration: 25s; gap: 50px; }

  .lb-side-mark { display: none; }
}


/* ============================================================================
   END OF GLOBAL STYLES (FINAL)
   ============================================================================ */


/* ===== NAV LINK FIX (for converted <a> elements) ===== */
nav a {
  background: none; border: none; cursor: pointer; color: var(--muted);
  font-family: var(--caps); font-weight: 500; font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 10px 12px; text-decoration: none;
  transition: color 0.18s var(--ease);
  position: relative;
}
nav a:hover { color: var(--ink); }
nav a.active { color: var(--rust-2); }
nav a.active::after {
  content: ""; position: absolute; left: 12px; right: 12px;
  bottom: 4px; height: 1px; background: var(--rust-2);
}
@media (max-width: 760px) {
  nav a { padding: 7px 11px; font-size: 11px; letter-spacing: 0.14em; white-space: nowrap; }
}

/* ===== ICON COLOR FIX — make our SVG icons render in ink/rust, not whatever they default to ===== */
.armicon img,
.secicon img { 
  filter: brightness(0) saturate(100%) invert(94%) sepia(8%) saturate(355%) hue-rotate(345deg) brightness(96%) contrast(91%);
  /* This filter converts black SVG to var(--linen) #E9D9CA */
}
/* When you want red icons instead: add class 'rust' to the img */
.armicon img.rust,
.secicon img.rust {
  filter: brightness(0) saturate(100%) invert(20%) sepia(83%) saturate(2890%) hue-rotate(354deg) brightness(95%) contrast(82%);
}

/* ===== SECTION CORNER BRACKETS (visible decoration on every framed section) ===== */
section.frame.bracket,
section.frame {
  position: relative;
}
section.frame::before,
section.frame::after {
  content: ""; position: absolute;
  width: 22px; height: 22px;
  border: 1px solid var(--rust);
  pointer-events: none; z-index: 4;
}
section.frame::before {
  top: 24px; left: 24px;
  border-right: none; border-bottom: none;
}
section.frame::after {
  bottom: 24px; right: 24px;
  border-left: none; border-top: none;
}
@media (max-width: 760px) {
  section.frame::before, section.frame::after { width: 14px; height: 14px; }
  section.frame::before { top: 14px; left: 14px; }
  section.frame::after { bottom: 14px; right: 14px; }
}

/* ===== PARALLAX HERO MEDIA ===== */
.herovideo {
  will-change: transform;
  transform: translate3d(0, calc(var(--y, 0) * -0.15), 0);
  transition: transform 100ms linear;
}

/* ===== AI ACCORDION / DIFFWALL (4-up benefit cells) ===== */
.lb-diffwall-ai {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin: 40px 0;
}
.lb-diffcell-ai {
  background: var(--bg);
  padding: 32px 26px;
  display: flex; flex-direction: column; gap: 14px;
  transition: background var(--med) var(--ease);
  cursor: default;
}
.lb-diffcell-ai:hover { background: var(--slate); }
.lb-diffcell-ai .diffcell-icon {
  width: 22px; height: 22px;
  border: 1px solid var(--rust);
  display: flex; align-items: center; justify-content: center;
  color: var(--rust);
  font-family: var(--serif); font-style: italic; font-size: 14px;
}
.lb-diffcell-ai .diffcell-title {
  font-family: var(--caps); font-weight: 500; font-size: 14px;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink);
}
.lb-diffcell-ai .diffcell-body {
  font-family: var(--serif); font-size: 16px; line-height: 1.55; color: var(--muted);
}
@media (max-width: 760px) {
  .lb-diffwall-ai { grid-template-columns: 1fr; }
}

/* ===== STATS GRID — 5-up version with counter-up styling ===== */
.stats-5 {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  margin-top: 32px;
}
.stats-5 .stat-cell {
  background: var(--bg);
  padding: 40px 22px;
  display: flex; flex-direction: column; gap: 8px;
  text-align: left;
}
.stats-5 .stat-cell .stat-num {
  font-family: var(--serif);
  font-size: clamp(48px, 6vw, 92px);
  line-height: 1; color: var(--ink);
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum' on;
}
.stats-5 .stat-cell .stat-num em {
  color: var(--rust-2); font-style: italic;
}
.stats-5 .stat-cell .stat-label {
  font-family: var(--caps); font-weight: 500; font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
  margin-top: 6px;
}
@media (max-width: 1100px) { .stats-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .stats-5 { grid-template-columns: 1fr; } }

/* ===== TEAM GRID (video-tile style, hover dim other tiles) ===== */
.team-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  margin-top: 40px;
}
.team-card {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 5; background: var(--bg);
  transition: filter var(--med) var(--ease), transform var(--med) var(--ease);
}
.team-grid:hover .team-card { filter: brightness(0.45) saturate(0.6); }
.team-card:hover { filter: brightness(1) saturate(1) !important; transform: scale(1.01); z-index: 2; }
.team-card .team-photo-placeholder {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--slate), var(--bg));
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-family: var(--caps); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  text-align: center; padding: 20px;
}
.team-card .team-info {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 18px 20px;
  background: linear-gradient(transparent, rgba(11,11,11,0.95) 50%);
  z-index: 3;
  transform: translateY(20%); opacity: 0;
  transition: transform var(--med) var(--ease), opacity var(--med) var(--ease);
}
.team-card:hover .team-info { transform: translateY(0); opacity: 1; }
.team-card .team-name {
  font-family: var(--serif); font-size: 20px; color: var(--ink);
}
.team-card .team-role {
  font-family: var(--caps); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--rust-2);
  margin-top: 4px;
}
@media (max-width: 1100px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px)  { .team-grid { grid-template-columns: 1fr; } }

/* ===== Hide the wireframe annotation .wix blocks in production ===== */
.wix { display: none !important; }


/* ===== REAL ASSETS — B&W TREATMENTS + BG SETUPS ===== */

/* Hero video: B&W, 35% opacity, with a dark grade on top */
.herovideo video.hero-bg-video {
  filter: grayscale(100%) contrast(1.05) brightness(0.85);
  opacity: 0.42;
}

/* Campus section: full-bleed B&W building photo as background, very dark */
section.campus-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
section.campus-section::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background-image: url('assets/launchbox-campus.jpg');
  background-size: cover; background-position: center;
  filter: grayscale(100%) contrast(1.1) brightness(0.32);
  opacity: 0.7;
  will-change: transform;
  transform: translate3d(0, calc(var(--y, 0) * -0.18), 0);
}
section.campus-section::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(11,11,11,0.5), rgba(11,11,11,0.8));
}
section.campus-section > * { position: relative; z-index: 2; }

/* AI section avatar accent */
.ai-avatar-block {
  position: relative;
  margin: 50px 0 0;
  height: clamp(320px, 50vh, 560px);
  overflow: hidden;
  border: 1px solid var(--line);
}
.ai-avatar-block img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  filter: grayscale(100%) contrast(1.05) brightness(0.78);
}
.ai-avatar-block::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, transparent 40%, rgba(11,11,11,0.85) 100%),
    radial-gradient(ellipse 60% 40% at 50% 60%, rgba(177,42,28,0.15), transparent 70%);
}
.ai-avatar-caption {
  position: absolute; left: 28px; bottom: 24px; right: 28px;
  z-index: 2;
  display: flex; justify-content: space-between; align-items: flex-end;
}
.ai-avatar-caption .left {
  font-family: var(--caps); font-weight: 500; font-size: 12px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--linen);
}
.ai-avatar-caption .right {
  font-family: var(--caps); font-weight: 500; font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--rust-2);
}

/* Campus image cards — when they have a real img, treat them B&W desaturated */
.campus .img.has-photo img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(100%) contrast(1.05) brightness(0.7);
  transition: filter var(--med) var(--ease), transform 1.2s var(--ease);
}
.campus .img.has-photo:hover img {
  filter: grayscale(100%) contrast(1.1) brightness(0.85);
  transform: scale(1.04);
}
.campus .img.has-photo {
  position: relative; overflow: hidden;
}

/* ===== Nav logo (replaces text wordmark) ===== */
.brandmark .brand-logo{ height:30px; width:auto; display:block; }
@media (max-width:760px){ .brandmark .brand-logo{ height:24px; } }

/* ===== Team headshots (real photos, consistent B&W to match grid) ===== */
.team-card .team-photo{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center top;
  filter:grayscale(100%) contrast(1.03) brightness(0.95);
  transition:filter var(--med) var(--ease), transform 1.1s var(--ease);
}
.team-card:hover .team-photo{ transform:scale(1.03); }

/* ===== Generic real-photo fill for .img.has-photo outside .campus (e.g. Brand Paths) ===== */
.img.has-photo > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.img.has-photo .cap{ z-index:2; }

/* ===== AI section: robot as right-anchored section background (matches Wix) ===== */
section.ai-section{ position:relative; overflow:hidden; isolation:isolate; }
section.ai-section::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-image:url('assets/ai-avatar.jpg');
  background-size:cover; background-position:right center; background-repeat:no-repeat;
  filter:grayscale(100%) contrast(1.06) brightness(0.9);
}
section.ai-section::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, var(--bg) 0%, var(--bg) 32%, rgba(11,11,11,0.35) 58%, rgba(11,11,11,0) 100%),
    linear-gradient(180deg, rgba(11,11,11,0.45) 0%, rgba(11,11,11,0.35) 55%, rgba(11,11,11,0.85) 100%);
}
section.ai-section > *{ position:relative; z-index:2; }
/* keep the upper AI content (headline/copy/diff cells) in a left column so the robot reads on the right */
.ai-section .diffgrid{ grid-template-columns:1fr; max-width:560px; }
.ai-section .ai-capture-tag{
  position:absolute; right:24px; bottom:20px; z-index:2;
  font-family:var(--caps); font-weight:500; text-transform:uppercase;
  letter-spacing:.2em; font-size:11px; color:var(--linen);
}
@media (max-width:860px){
  section.ai-section::before{ background-position:right -60px center; filter:grayscale(100%) brightness(0.4); }
  section.ai-section::after{ background:linear-gradient(180deg, rgba(11,11,11,0.55), rgba(11,11,11,0.88)); }
  .ai-section .diffgrid{ max-width:none; }
  .ai-section .ai-capture-tag{ position:static; display:block; margin-top:24px; right:auto; bottom:auto; }
}

/* ===== Punch-list fixes (homepage) ===== */

/* 1. no underlines on buttons */
.btn, .btn:link, .btn:visited, .btn:hover, .btn:focus { text-decoration: none; }

/* 2. kinetic band — reduced size */
.lb-band-text .lb-band-text-track { font-size: clamp(40px, 7.5vw, 104px); }

/* 3. arm icons: red + subtle idle pulse */
.armicon img.rust { animation: lbArmIconPulse 3.4s ease-in-out infinite; transform-origin: left center; }
@keyframes lbArmIconPulse { 0%,100% { transform: scale(1);   opacity: .92; } 50% { transform: scale(1.09); opacity: 1; } }

/* 4. AI accordion (native <details>, no JS) */
.ai-section .ai-accordion { max-width: 560px; margin: 36px 0 0; border-top: 1px solid var(--line); }
.ai-acc { border-bottom: 1px solid var(--line); }
.ai-acc summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 20px 4px;
}
.ai-acc summary::-webkit-details-marker { display: none; }
.ai-acc .ai-acc-title {
  font-family: var(--caps); font-weight: 500; text-transform: uppercase;
  letter-spacing: .16em; font-size: 13px; color: var(--ink);
  transition: color var(--med) var(--ease);
}
.ai-acc .ai-acc-plus {
  flex: none; color: var(--rust-2); font-family: var(--caps);
  font-size: 24px; line-height: 1; transition: transform .35s var(--ease);
}
.ai-acc[open] .ai-acc-plus { transform: rotate(45deg); }
.ai-acc summary:hover .ai-acc-title { color: var(--rust-2); }
.ai-acc > p {
  margin: 0; padding: 0 4px 20px; max-width: 52ch;
  font-family: var(--serif); font-size: 15px; line-height: 1.6; color: var(--muted);
}
.ai-acc[open] > p { animation: aiAccReveal .4s var(--ease) both; }
@keyframes aiAccReveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }


/* ===== Loader: blinking red REC dot (replaces the drawn line) ===== */
.lb-loader-line {
  width: 14px !important; height: 14px !important;
  border-radius: 50%;
  background: var(--lb-rust);
  box-shadow: 0 0 14px rgba(177,42,28,.75);
  animation: lbRecBlink 1.05s steps(1, end) infinite !important;
}
@keyframes lbRecBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .12; } }

/* ===== Camera-reticle "+" cursor, site-wide (all pages) ===== */
:root { --lb-reticle: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2732%27%20height%3D%2732%27%20viewBox%3D%270%200%2032%2032%27%3E%3Cg%20stroke%3D%27%23E9D9CA%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%3E%3Cline%20x1%3D%2716%27%20y1%3D%272.5%27%20x2%3D%2716%27%20y2%3D%2712%27/%3E%3Cline%20x1%3D%2716%27%20y1%3D%2720%27%20x2%3D%2716%27%20y2%3D%2729.5%27/%3E%3Cline%20x1%3D%272.5%27%20y1%3D%2716%27%20x2%3D%2712%27%20y2%3D%2716%27/%3E%3Cline%20x1%3D%2720%27%20y1%3D%2716%27%20x2%3D%2729.5%27%20y2%3D%2716%27/%3E%3C/g%3E%3Ccircle%20cx%3D%2716%27%20cy%3D%2716%27%20r%3D%271.7%27%20fill%3D%27%23B12A1C%27/%3E%3C/svg%3E") 16 16; }
body { cursor: var(--lb-reticle), crosshair; }
a, button, summary, label, .btn, .lb-magnetic, .pathcard, .team-card, .img,
.ai-acc summary, [role="button"] { cursor: var(--lb-reticle), crosshair; }
input, textarea, select, [contenteditable="true"] { cursor: text; }
/* retire the old JS circle cursor so only the reticle shows */
.lb-cursor { display: none !important; }

/* ===== Cursor-zone override: show the reticle across the whole zone, not 'none' ===== */
html.lb-js .lb-cursor-zone * { cursor: var(--lb-reticle), crosshair; }
html.lb-js .lb-cursor-zone input,
html.lb-js .lb-cursor-zone textarea,
html.lb-js .lb-cursor-zone select { cursor: text; }

/* ===== Stats: alternating number colors (red / ink / red / ink / red) ===== */
.stats-5 .stat-cell:nth-child(odd)  .stat-num { color: var(--rust-2); }
.stats-5 .stat-cell:nth-child(even) .stat-num { color: var(--ink); }
.stats-5 .stat-cell .stat-num em { color: inherit; }

/* ===== Credibility section: space between the headline and the marquees ===== */
.inverse .lb-marquee { margin-top: clamp(40px, 6vw, 72px); }

/* alternating stat colors + marquee padding */
.stats-5 .stat-cell:nth-child(odd)  .stat-num { color: var(--rust-2); }
.stats-5 .stat-cell:nth-child(even) .stat-num { color: var(--ink); }
.stats-5 .stat-cell .stat-num em { color: inherit; }
.inverse .lb-marquee { margin-top: clamp(40px, 6vw, 72px); }

/* Make the background imagery read instead of going near-black */
.herovideo video.hero-bg-video { opacity: 0.6 !important; }
section.campus-section::before { filter: grayscale(100%) contrast(1.05) brightness(0.6) !important; opacity: 0.9 !important; }
section.ai-section::before { filter: grayscale(100%) contrast(1.06) brightness(0.95) !important; }

/* ===== HERO VIDEO FIX — reveal real footage ===== */
.herovideo .vsim{
  background:
    radial-gradient(60% 80% at 25% 30%, rgba(177,42,28,.16), transparent 60%),
    radial-gradient(50% 70% at 80% 70%, rgba(60,70,90,.20), transparent 60%) !important;
}
.herovideo video.hero-bg-video{
  opacity:.7 !important;
  filter:grayscale(100%) contrast(1.06) brightness(1) !important;
}
.herovideo .scrim{
  background:linear-gradient(90deg,rgba(11,11,11,.82),rgba(11,11,11,.45) 55%,rgba(11,11,11,.25)) !important;
}

/* ===== Reveal the two real background photos ===== */
section.campus-section::before{ filter:grayscale(100%) contrast(1.05) brightness(0.95) !important; opacity:1 !important; }
section.campus-section::after{ background:linear-gradient(180deg, rgba(11,11,11,0.25), rgba(11,11,11,0.6)) !important; }
section.ai-section::before{ filter:grayscale(100%) contrast(1.05) brightness(1) !important; }
section.ai-section::after{ background:linear-gradient(90deg, var(--bg) 0%, rgba(11,11,11,0.55) 38%, rgba(11,11,11,0) 75%) !important; }

/* ===== FINAL: let the two section photos show through ===== */
section.campus-section::before{
  background-image:url('assets/launchbox-campus.jpg') !important;
  background-size:cover !important; background-position:center !important;
  filter:grayscale(100%) contrast(1.05) brightness(0.85) !important;
  opacity:1 !important; transform:none !important;
}
section.campus-section::after{
  background:linear-gradient(180deg, rgba(11,11,11,0.20), rgba(11,11,11,0.55)) !important;
}
section.ai-section::before{
  background-image:url('assets/ai-avatar.jpg') !important;
  background-size:cover !important; background-position:right center !important;
  filter:grayscale(100%) contrast(1.05) brightness(1) !important;
  opacity:1 !important;
}
section.ai-section::after{
  background:linear-gradient(90deg, var(--bg) 0%, rgba(11,11,11,0.55) 42%, rgba(11,11,11,0) 80%) !important;
}

/* ===== FORCE section photos to fill (fix tiny-corner scaling) ===== */
section.campus-section, section.ai-section{ position:relative !important; }
section.campus-section::before, section.ai-section::before{
  content:"" !important;
  position:absolute !important;
  top:0 !important; right:0 !important; bottom:0 !important; left:0 !important;
  width:100% !important; height:100% !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-size:cover !important;
  transform:none !important;
}
section.campus-section::before{ background-image:url('assets/launchbox-campus.jpg') !important; }
section.ai-section::before{ background-image:url('assets/ai-avatar.jpg') !important; }

/* ===== FINAL ART DIRECTION — subtle dark backgrounds, text-readable ===== */

/* HERO — dark skyline, barely-there behind the headline */
.herovideo video.hero-bg-video{
  opacity:0.32 !important;
  filter:grayscale(100%) contrast(1.05) brightness(0.7) !important;
}
.herovideo .vsim{ background:radial-gradient(60% 80% at 72% 38%, rgba(177,42,28,0.05), transparent 60%) !important; }
.herovideo .scrim{ background:linear-gradient(90deg, rgba(11,11,11,0.92), rgba(11,11,11,0.72) 55%, rgba(11,11,11,0.55)) !important; }

/* CAMPUS — zoom onto the logo wall, cut the roof, drop it way down */
section.campus-section::before{
  background-image:url('assets/launchbox-campus.jpg') !important;
  background-repeat:no-repeat !important;
  background-size:150% auto !important;        /* KNOB 1: bigger % = more zoomed in */
  background-position:50% 80% !important;       /* KNOB 2: bigger 2nd % = cuts more roof off the top */
  filter:grayscale(100%) contrast(1.05) brightness(0.28) !important;
  opacity:0.5 !important;
  transform:none !important;
}
section.campus-section::after{
  background:linear-gradient(180deg, rgba(11,11,11,0.6) 0%, rgba(11,11,11,0.82) 100%) !important;
}

/* AI — flip robot to face LEFT, sit on the right, drastically darker */
section.ai-section::before{
  background-image:url('assets/ai-avatar.jpg') !important;
  background-repeat:no-repeat !important;
  background-size:cover !important;
  background-position:left center !important;
  transform:scaleX(-1) !important;              /* mirror so it looks left toward the text */
  filter:grayscale(100%) contrast(1.05) brightness(0.26) !important;
  opacity:0.5 !important;
}
section.ai-section::after{
  background:linear-gradient(90deg, var(--bg) 0%, var(--bg) 32%, rgba(11,11,11,0.72) 58%, rgba(11,11,11,0.45) 100%) !important;
}

/* ===== HERO: lift the skyline so it actually reads (subtle, not black) ===== */
.herovideo video.hero-bg-video{
  opacity:0.6 !important;
  filter:grayscale(100%) contrast(1.06) brightness(1.05) !important;
}
.herovideo .scrim{
  background:linear-gradient(90deg, rgba(11,11,11,0.9), rgba(11,11,11,0.5) 50%, rgba(11,11,11,0.22)) !important;
}

/* ===== PREMIUM PASS — all backgrounds fall off to black on the left (text side) ===== */

/* HERO — skyline guaranteed, gradient to black under the headline */
.herovideo{ background-image:url('assets/hero-poster.jpg') !important; background-size:cover !important; background-position:center !important; }
.herovideo .vsim{ display:none !important; }
.herovideo video.hero-bg-video{ opacity:1 !important; filter:grayscale(100%) contrast(1.04) brightness(0.45) !important; }
.herovideo .scrim{ z-index:6 !important; background:linear-gradient(90deg, #0B0B0B 0%, #0B0B0B 44%, rgba(11,11,11,0.5) 72%, rgba(11,11,11,0.15) 100%) !important; }

/* CAMPUS — slide the logo right off the headline, darker */
section.campus-section::before{
  background-size:150% auto !important;
  background-position:28% 80% !important;     /* KNOB: lower 1st number slides the logo further RIGHT */
  filter:grayscale(100%) contrast(1.05) brightness(0.24) !important;
  opacity:0.55 !important;
}
section.campus-section::after{
  background:linear-gradient(90deg, #0B0B0B 0%, #0B0B0B 36%, rgba(11,11,11,0.6) 64%, rgba(11,11,11,0.3) 100%) !important;
}

/* AI — robot darker, black gradient covers the whole menu so the nose fades out before the text */
section.ai-section::before{
  background-size:cover !important;
  background-position:left center !important;
  transform:scaleX(-1) !important;
  filter:grayscale(100%) contrast(1.05) brightness(0.22) !important;
  opacity:0.5 !important;
}
section.ai-section::after{
  background:linear-gradient(90deg, #0B0B0B 0%, #0B0B0B 50%, rgba(11,11,11,0.55) 76%, rgba(11,11,11,0.2) 100%) !important;
}

/* ===== HERO: kill the dead video box so the skyline still shows ===== */
.herovideo video.hero-bg-video{ display:none !important; }
.herovideo{ background-image:url('assets/hero-poster.jpg') !important; background-size:cover !important; background-position:center !important; }
.herovideo .vsim{ display:none !important; }
.herovideo .scrim{ z-index:6 !important; background:linear-gradient(90deg, #0B0B0B 0%, #0B0B0B 46%, rgba(11,11,11,0.55) 72%, rgba(11,11,11,0.2) 100%) !important; }

/* ===== CAMPUS: darker, falls to black on the left AND the bottom ===== */
section.campus-section::before{
  background-size:150% auto !important;
  background-position:28% 80% !important;     /* KNOB: lower 1st number slides logo further right */
  filter:grayscale(100%) contrast(1.05) brightness(0.20) !important;
  opacity:0.55 !important;
}
section.campus-section::after{
  background:
    linear-gradient(90deg, #0B0B0B 0%, #0B0B0B 34%, rgba(11,11,11,0.55) 62%, rgba(11,11,11,0.3) 100%),
    linear-gradient(180deg, transparent 35%, rgba(11,11,11,0.6) 80%, #0B0B0B 100%) !important;
}

/* ===== AI: robot shoved into the right third, falls off left to black ===== */
section.ai-section::before{
  background-size:150% auto !important;
  background-position:50% center !important;   /* KNOB: raise number to push robot further right */
  transform:scaleX(-1) !important;
  filter:grayscale(100%) contrast(1.05) brightness(0.20) !important;
  opacity:0.5 !important;
}
section.ai-section::after{
  background:linear-gradient(90deg, #0B0B0B 0%, #0B0B0B 48%, rgba(11,11,11,0.5) 70%, rgba(11,11,11,0.1) 100%) !important;
}

/* ===== HERO: skyline via ::before (same method campus/AI use) ===== */
.herovideo{ background:#070707 !important; }
.herovideo::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important; right:0 !important; top:-14% !important; bottom:-14% !important;
  background-image:url('assets/hero-poster.jpg') !important;
  background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important;
  transform:translateY(var(--py,0)) !important;
  z-index:0 !important;
}

/* ===== Robot further right + narrower accordion ===== */
section.ai-section::before{ background-position:65% center !important; }   /* raise 65 to push further right */
.ai-section .ai-accordion, .ai-section .diffgrid{ max-width:440px !important; }
.ai-section .ai-acc > p{ max-width:42ch !important; }

/* ===== Parallax travel on all three backgrounds ===== */
section.campus-section::before{ top:-14% !important; bottom:-14% !important; height:auto !important; transform:translateY(var(--py,0)) !important; }
section.ai-section::before{ top:-14% !important; bottom:-14% !important; height:auto !important; transform:translateY(var(--py,0)) scaleX(-1) !important; }

/* ===== FIX PACK 2026-05-30 ===== */

/* HERO: lb-hero-grid forced .herovideo to position:relative, collapsing it
   to 0 height so nothing could paint. Force it back to fill the section. */
.herovideo{ position:absolute !important; inset:0 !important; z-index:2 !important; overflow:hidden !important; background:#070707 !important; }
.herovideo > video.hero-bg-video{ display:none !important; }
.herovideo::before{
  content:"" !important; position:absolute !important;
  left:0 !important; right:0 !important; top:-14% !important; bottom:-14% !important;
  background-image:url('assets/hero-poster.jpg') !important;
  background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important;
  filter:grayscale(100%) brightness(.55) contrast(1.05) !important;
  opacity:.9 !important;
  transform:translateY(var(--py,0)) !important;
  z-index:0 !important;
}
.herovideo .scrim{ z-index:6 !important; }

/* AI section: un-cramp the accordion, push the robot further right */
.ai-section .ai-accordion, .ai-section .diffgrid{ max-width:540px !important; }
.ai-section .ai-acc p{ max-width:50ch !important; }
section.ai-section::before{ background-position:70% center !important; }

/* Pipeline hover: number + icon drift up, icon expands, rust line wipes in */
.pipestep{ position:relative; transition:background .4s ease; }
.pipestep::after{ content:""; position:absolute; left:0; top:0; height:2px; width:0; background:var(--rust-2); transition:width .5s cubic-bezier(.2,.7,.2,1); }
.pipestep:hover{ background:#0e0f10; }
.pipestep:hover::after{ width:100%; }
.ps-top,.ps-t{ transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.pipestep:hover .ps-top{ transform:translateY(-7px); }
.pipestep:hover .ps-t{ transform:translateY(-3px); }
.mk{ transition:transform .5s cubic-bezier(.2,.7,.2,1); transform-origin:left center; }
.pipestep:hover .mk{ transform:scale(1.25); }
.ps-n{ transition:color .4s ease, letter-spacing .4s ease; }
.pipestep:hover .ps-n{ color:var(--rust); letter-spacing:.3em; }

/* ===== FIX PACK 2 — 2026-05-30 ===== */

/* HERO VIDEO back on, contained so the full city flythrough is visible.
   Skyline ::before fills the edges; scrim keeps the left readable. */
.herovideo > video.hero-bg-video{
  display:block !important;
  position:absolute !important; inset:0 !important;
  width:100% !important; height:100% !important;
  object-fit:contain !important; object-position:center !important;
  opacity:1 !important;
  filter:grayscale(100%) brightness(.6) contrast(1.05) !important;
  z-index:1 !important;
}

/* ===== Clients section: live ON AIR meter cluster (upper right) ===== */
.onair{ position:absolute; top:clamp(84px,11vw,150px); right:clamp(18px,4vw,70px); width:clamp(210px,24vw,300px); z-index:4; pointer-events:none; }
.onair .oa-head{ display:flex; align-items:center; justify-content:space-between; font-family:var(--caps); text-transform:uppercase; letter-spacing:.26em; font-size:10px; color:var(--ink); margin-bottom:12px; }
.onair .oa-dot{ display:inline-flex; align-items:center; gap:8px; color:var(--rust); }
.onair .oa-dot i{ width:8px; height:8px; border-radius:50%; background:var(--rust); animation:oaPulse 1.6s ease-out infinite; }
.onair .oa-live{ color:rgba(21,23,28,.45); animation:oaBlink 2s steps(1,end) infinite; }
.onair .oa-wave{ display:flex; align-items:flex-end; gap:3px; height:46px; }
.onair .oa-wave i{ flex:1; height:100%; transform:scaleY(.18); transform-origin:bottom; background:linear-gradient(var(--rust-2),var(--rust)); border-radius:1px; animation:oaVu 1s ease-in-out infinite alternate; }
.onair .oa-wave i:nth-child(2n){ animation-duration:.78s; }
.onair .oa-wave i:nth-child(3n){ animation-duration:1.25s; }
.onair .oa-wave i:nth-child(5n){ animation-duration:.62s; }
.onair .oa-foot{ display:flex; justify-content:space-between; margin-top:10px; font-family:var(--caps); text-transform:uppercase; letter-spacing:.24em; font-size:8.5px; color:rgba(21,23,28,.42); }
@keyframes oaVu{ from{transform:scaleY(.12)} to{transform:scaleY(1)} }
@keyframes oaPulse{ 0%{box-shadow:0 0 0 0 rgba(177,42,28,.5)} 100%{box-shadow:0 0 0 10px rgba(177,42,28,0)} }
@keyframes oaBlink{ 0%,55%{opacity:1} 56%,100%{opacity:.25} }
@media (max-width:860px){ .onair{ display:none; } }

/* ===== FIX PACK 3 — 2026-05-30 ===== */

/* ON AIR cluster: right edge flush under CLIENTS (section content edge) */
.onair{ right:max(var(--pad),calc((100% - var(--maxw))/2)) !important; }

/* HERO: drop the still skyline layer so the contained video has no
   duplicate strip around it; letterbox stays clean black */
.herovideo::before{ display:none !important; }
.herovideo{ background:#070707 !important; }

/* ===== RESPONSIVE HARDENING — 2026-05-30 ===== */

/* No horizontal scroll on any device */
html,body{ max-width:100%; overflow-x:clip; }
img,video,svg{ max-width:100%; }

/* Hamburger hidden by default (desktop/tablet keep the inline nav) */
.nav-toggle{ display:none; }

/* Tablet: let the nav wrap neatly instead of cramming */
@media (max-width:1100px) and (min-width:761px){
  nav{ flex-wrap:wrap; justify-content:flex-end; gap:2px; }
  nav a{ padding:8px 9px; font-size:11px; letter-spacing:.1em; }
}

/* Phone: real slide-in menu (JS adds body.nav-ready / body.nav-open) */
@media (max-width:760px){
  body.nav-ready header{ flex-direction:row !important; align-items:center !important; justify-content:space-between !important; gap:0 !important; }
  .nav-toggle{
    display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
    width:42px; height:42px; padding:10px; background:none; border:none; cursor:pointer;
    position:relative; z-index:60;
  }
  .nav-toggle span{ display:block; height:2px; width:100%; background:var(--ink); transition:transform .3s var(--ease), opacity .3s var(--ease); }
  body.nav-open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
  body.nav-open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  body.nav-ready nav{
    position:fixed; top:0; right:0; height:100vh; width:min(82vw,320px);
    flex-direction:column; flex-wrap:nowrap; align-items:flex-start; gap:0;
    background:rgba(11,11,11,.97); backdrop-filter:blur(14px);
    padding:92px 28px 28px; overflow-y:auto;
    transform:translateX(100%); transition:transform .38s var(--ease);
    box-shadow:-20px 0 60px rgba(0,0,0,.5); z-index:55;
  }
  body.nav-open nav{ transform:translateX(0); }
  body.nav-ready nav a{ font-size:16px; padding:16px 0; width:100%; border-bottom:1px solid var(--line); letter-spacing:.16em; }
  body.nav-ready nav a.active::after{ display:none; }

  .hero{ min-height:78vh; }
  .rowtop{ flex-wrap:wrap; gap:8px; }
  .lb-side-mark{ display:none; }   /* vertical edge label off on phones */
}

@media (max-width:430px){ body.nav-ready nav a{ font-size:15px; } }

/* Short landscape phones: don't let the hero swallow the screen */
@media (max-height:520px) and (orientation:landscape){ .hero{ min-height:100vh; } }

/* ===== FIX PACK 5 — 2026-05-30 ===== */

/* Hero parallax restored on the video layer (::before is gone now).
   Extend past the section so the scroll shift never gaps; section overflow clips it. */
.herovideo{ top:-10% !important; bottom:-10% !important; height:auto !important; transform:translateY(var(--py,0)) !important; }

/* ===== Policy page ===== */
.policy{ max-width:860px; }
.policy-jump{ display:flex; flex-wrap:wrap; gap:8px; margin:30px 0 10px; }
.policy-jump a{ font-family:var(--caps); text-transform:uppercase; letter-spacing:.14em; font-size:11px; color:var(--muted); text-decoration:none; border:1px solid var(--line); padding:8px 14px; transition:color .2s var(--ease),border-color .2s var(--ease); }
.policy-jump a:hover{ color:var(--ink); border-color:var(--rust-2); }
.policy-sec{ border-top:1px solid var(--line); margin-top:clamp(30px,4vw,52px); padding-top:clamp(26px,3vw,40px); }
.policy-sec:first-child{ border-top:none; margin-top:18px; }
.policy .sec-tag{ font-family:var(--caps); text-transform:uppercase; letter-spacing:.24em; font-size:10px; color:var(--rust-2); }
.policy h2{ font-family:var(--serif); font-size:clamp(24px,3.2vw,38px); color:var(--ink); margin:6px 0 16px; scroll-margin-top:96px; line-height:1.12; }
.policy h3{ font-family:var(--caps); text-transform:uppercase; letter-spacing:.16em; font-size:13px; color:var(--linen); margin:26px 0 8px; }
.policy p{ font-family:var(--serif); font-weight:300; font-size:16px; line-height:1.72; color:var(--muted); margin-bottom:14px; }
.policy p.lead{ font-size:18px; color:var(--linen); }
.policy b{ color:var(--linen); font-weight:500; }
.policy ul{ list-style:none; margin:6px 0 18px; padding:0; }
.policy li{ font-family:var(--serif); font-weight:300; font-size:15.5px; line-height:1.6; color:var(--muted); padding:9px 0 9px 22px; position:relative; border-bottom:1px solid rgba(140,130,118,.12); }
.policy li::before{ content:""; position:absolute; left:0; top:16px; width:7px; height:7px; background:var(--rust-2); border-radius:50%; }
.policy-note{ background:var(--slate); border-left:2px solid var(--rust); padding:16px 20px; margin:18px 0; }
.policy-note p{ margin:0; color:var(--linen); font-size:15px; font-style:italic; }
#ip{ scroll-margin-top:96px; }

/* ===== FIX PACK 6 — 2026-05-30 ===== */

/* Clearly more space between the accordion and the Core/Pro/Studio cards */
.ai-section .ai-accordion{ margin-bottom:clamp(24px,3vw,48px) !important; }
.ai-section .paths{ margin-top:clamp(64px,9vw,120px) !important; }

/* Footer styles re-asserted (in case they didn't apply) */
.site-footer{ background:var(--bg); border-top:1px solid var(--line); padding:clamp(50px,7vw,92px) max(var(--pad),calc((100% - var(--maxw))/2)) clamp(26px,3vw,38px); }
.ft-top{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:clamp(28px,5vw,64px); align-items:start; }
.ft-brand .ft-logo{ height:30px; width:auto; display:block; margin-bottom:18px; }
.ft-tag{ font-family:var(--serif); font-style:italic; font-size:17px; color:var(--linen); }
.ft-col-h{ font-family:var(--caps); text-transform:uppercase; letter-spacing:.26em; font-size:10px; color:var(--rust-2); margin-bottom:4px; }
.ft-links{ display:flex; flex-direction:column; gap:11px; }
.ft-links a{ font-family:var(--caps); text-transform:uppercase; letter-spacing:.14em; font-size:12px; color:var(--muted); text-decoration:none; transition:color .2s var(--ease); }
.ft-links a:hover{ color:var(--ink); }
.ft-contact{ display:flex; flex-direction:column; gap:11px; align-items:flex-start; }
.ft-contact > span{ font-family:var(--caps); text-transform:uppercase; letter-spacing:.14em; font-size:12px; color:var(--muted); }
.ft-phone{ font-family:var(--caps); letter-spacing:.06em; font-size:16px; color:var(--ink); text-decoration:none; transition:color .2s var(--ease); }
.ft-phone:hover{ color:var(--rust-2); }
.ft-policy{ display:flex; gap:10px; align-items:center; margin-top:2px; }
.ft-policy a{ font-family:var(--caps); text-transform:uppercase; letter-spacing:.14em; font-size:12px; color:var(--muted); text-decoration:none; transition:color .2s var(--ease); }
.ft-policy a:hover{ color:var(--rust-2); }
.ft-policy span{ color:rgba(140,130,118,.45); }
.ft-bottom{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-top:clamp(38px,5vw,66px); padding-top:24px; border-top:1px solid var(--line); }
.ft-copy{ font-family:var(--caps); text-transform:uppercase; letter-spacing:.1em; font-size:10.5px; color:rgba(140,130,118,.75); }
.ft-mark{ display:inline-flex; align-items:center; gap:8px; font-family:var(--caps); text-transform:uppercase; letter-spacing:.22em; font-size:9.5px; color:rgba(140,130,118,.5); }
.ft-mark i{ width:6px; height:6px; border-radius:50%; background:var(--rust); animation:recPulse 1.6s ease-in-out infinite; }
@media (max-width:760px){ .ft-top{ grid-template-columns:1fr; gap:38px; } .ft-bottom{ flex-direction:column; align-items:flex-start; gap:12px; } }

/* ===== FIX PACK 7 — footer redesign (centered / high-end) ===== */
.site-footer{ background:var(--bg); border-top:1px solid var(--line); text-align:center; padding:clamp(64px,8vw,116px) var(--pad) clamp(34px,4vw,54px) !important; }
.ft-inner{ max-width:900px; margin:0 auto; display:flex; flex-direction:column; align-items:center; }
.ft-logo{ height:36px; width:auto; display:block; margin:0 auto !important; }
.ft-tag{ font-family:var(--serif); font-style:italic; font-size:clamp(17px,2vw,21px); color:var(--linen); margin-top:18px !important; }
.ft-nav{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px 32px; width:100%; max-width:820px; margin:clamp(44px,6vw,72px) auto; padding:clamp(34px,4vw,46px) 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.ft-nav a{ font-family:var(--caps); text-transform:uppercase; letter-spacing:.14em; font-size:12px; color:var(--muted); text-decoration:none; transition:color .2s var(--ease); white-space:nowrap; }
.ft-nav a:hover{ color:var(--ink); }
.ft-meta{ display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; }
.ft-phone{ font-family:var(--caps); letter-spacing:.08em; font-size:clamp(17px,2vw,20px); color:var(--ink); text-decoration:none; transition:color .2s var(--ease); }
.ft-phone:hover{ color:var(--rust-2); }
.ft-meta > span{ font-family:var(--caps); text-transform:uppercase; letter-spacing:.16em; font-size:12px; color:var(--muted); }
.ft-meta .ft-dot{ color:rgba(140,130,118,.4); }
.ft-policy2{ margin-top:16px; display:flex; gap:12px; align-items:center; justify-content:center; }
.ft-policy2 a{ font-family:var(--caps); text-transform:uppercase; letter-spacing:.16em; font-size:11px; color:var(--muted); text-decoration:none; transition:color .2s var(--ease); }
.ft-policy2 a:hover{ color:var(--rust-2); }
.ft-policy2 span{ color:rgba(140,130,118,.4); }
.ft-base{ margin-top:clamp(44px,6vw,72px); font-family:var(--caps); text-transform:uppercase; letter-spacing:.12em; font-size:10.5px; color:rgba(140,130,118,.7); }
@media (max-width:760px){ .ft-nav{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 24px; } }
@media (max-width:430px){ .ft-nav{ grid-template-columns:1fr; } }

/* ===== FIX PACK 8 — footer refinements + REC dot ===== */

/* phone + location move directly under the tagline, above Explore */
.ft-meta{ margin-top:clamp(20px,2.5vw,32px) !important; }

/* Explore: labeled top rule + grid + bottom rule */
.ft-explore{ width:100%; max-width:820px; margin:clamp(42px,5vw,66px) auto 0; }
.ft-rule{ position:relative; height:1px; background:var(--line); }
.ft-rule-label{ position:absolute; top:50%; left:0; transform:translateY(-50%); background:var(--bg); padding:0 16px 0 0; font-family:var(--caps); text-transform:uppercase; letter-spacing:.28em; font-size:10px; color:var(--rust-2); }
.ft-nav{ border:none !important; border-bottom:1px solid var(--line) !important; margin:0 !important; padding:clamp(30px,4vw,44px) 0 !important; }

/* policy + copyright at the bottom; copyright in faded hero-style italic */
.ft-policy2{ margin-top:clamp(34px,4vw,52px) !important; }
.ft-base{ margin-top:clamp(18px,2vw,26px) !important; font-family:var(--serif) !important; font-style:italic !important; text-transform:none !important; letter-spacing:0 !important; font-size:14px !important; color:rgba(233,217,202,.32) !important; }

/* live REC dot (re-asserted so it actually animates) */
.rec-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--rust-2); vertical-align:middle; margin-right:5px; animation:recPulse 1.4s ease-in-out infinite; }
@keyframes recPulse{ 0%,100%{opacity:1; box-shadow:0 0 0 0 rgba(214,54,42,.55)} 50%{opacity:.3; box-shadow:0 0 0 7px rgba(214,54,42,0)} }

/* ===== FIX PACK 9 — tighter footer, single-line nav, larger location ===== */
.ft-inner{ max-width:1040px !important; }
.site-footer{ padding:clamp(44px,5vw,76px) var(--pad) clamp(28px,3vw,42px) !important; }
.ft-logo{ height:32px !important; }
.ft-tag{ margin-top:14px !important; }

/* phone + location on one line; location now matches the phone size */
.ft-meta{ margin-top:clamp(14px,2vw,22px) !important; gap:16px !important; }
.ft-meta > span:not(.ft-dot){ font-size:clamp(17px,2vw,20px) !important; letter-spacing:.08em !important; }

/* all eight nav items on a single centered line (wraps only when too narrow) */
.ft-explore{ margin:clamp(28px,3.5vw,46px) auto 0 !important; max-width:1000px !important; }
.ft-nav{ display:flex !important; flex-wrap:wrap; justify-content:center; gap:clamp(16px,2vw,30px) !important; max-width:1000px !important; padding:clamp(20px,2.5vw,30px) 0 !important; }
.ft-nav a{ font-size:12px; letter-spacing:.12em; }

.ft-policy2{ margin-top:clamp(22px,3vw,34px) !important; }
.ft-base{ margin-top:clamp(16px,2vw,24px) !important; }
@media (max-width:600px){ .ft-nav{ gap:12px 20px; } }

/* ===== FIX PACK 10 — gap above footer + social icons ===== */
.cta-band{
  padding-top:clamp(64px,8vw,118px)!important;
  padding-bottom:clamp(30px,3.6vw,52px)!important;
}
.site-footer{ padding-top:clamp(34px,4vw,56px)!important; }

.ft-social{
  display:flex; align-items:center; justify-content:center;
  gap:22px; margin:clamp(20px,2.4vw,30px) 0 2px;
}
.ft-social a{
  color:var(--muted); width:21px; height:21px;
  display:inline-flex;
  transition:color .25s var(--ease), transform .25s var(--ease);
}
.ft-social a:hover{ color:var(--ink); transform:translateY(-3px); }
.ft-social svg{ width:100%; height:100%; display:block; }

/* ===== FIX PACK 11 — footer contact icons + social moved down ===== */
.ft-phone, .ft-loc-link{ display:inline-flex; align-items:center; gap:.45em; }
.ft-phone .ft-ico, .ft-loc-link .ft-ico{
  width:.92em; height:.92em; color:var(--rust-2); flex:0 0 auto;
}
.ft-ico{ transition:transform .2s var(--ease); }
.ft-loc-link{
  color:var(--ink)!important; text-decoration:none; cursor:pointer;
  transition:color .2s var(--ease);
}
.ft-loc-link:hover{ color:var(--linen)!important; }
.ft-loc-link:hover .ft-ico{ transform:translateY(-1px); }

/* ===== FIX PACK 12 — logo up, tagline removed, phone icon + size match ===== */
.ft-logo{ height:clamp(40px,3.2vw,48px)!important; width:auto!important; }
.ft-phone, .ft-loc-link{
  display:inline-flex; align-items:center; gap:.45em;
  font-size:clamp(16px,1.7vw,19px)!important;
}
.ft-ico{
  width:.92em; height:.92em; color:var(--rust-2); flex:0 0 auto;
  transition:transform .2s var(--ease);
}
.ft-phone:hover .ft-ico{ transform:translateY(-1px); }

/* ===== FIX PACK 13 — location all caps + red hover (matches phone) ===== */
.ft-loc-link{ text-transform:uppercase!important; letter-spacing:.03em; }
.ft-phone:hover, .ft-loc-link:hover{ color:var(--rust-2)!important; }

/* ===== FIX PACK 14 — CTA background film (B&W slow-mo) ===== */
.cta-band{ position:relative; overflow:hidden; isolation:isolate; }
.cta-bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0; pointer-events:none;
}
.cta-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(ellipse 85% 75% at 50% 50%, rgba(11,11,11,.34), rgba(11,11,11,.72) 78%),
    linear-gradient(180deg, #0B0B0B 0%, rgba(11,11,11,.42) 20%, rgba(11,11,11,.42) 80%, #0B0B0B 100%);
}
.cta-band > :not(.cta-bg):not(.cta-scrim){ position:relative; z-index:2; }

/* ===== FIX PACK 15 — darker CTA scrim ===== */
.cta-scrim{
  background:
    radial-gradient(ellipse 85% 75% at 50% 50%, rgba(11,11,11,.46), rgba(11,11,11,.80) 78%),
    linear-gradient(180deg, #0B0B0B 0%, rgba(11,11,11,.55) 18%, rgba(11,11,11,.55) 82%, #0B0B0B 100%);
}

/* ============================================================
   FIX PACK 16 — HERO FILL (all devices)
   Root issue: hero video was object-fit:contain, so a landscape
   clip letterboxed (black bars top/bottom) inside the tall mobile
   section. Force cover so the film fills the section edge to edge.
   KNOB: switch `cover` back to `contain` below to revert.
   ============================================================ */
.hero .herovideo{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
}
.hero .herovideo video,
.hero video{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
}
@media (max-width:760px){
  .hero, .hero.lb-hero-grid{
    min-height:100vh;
    min-height:100svh;
  }
}

/* ============================================================
   FIX PACK 16 — MOBILE RESPONSIVENESS PASS (2026-05-31)
   ============================================================ */

/* 1. HERO: fill the section on every device (was contain → letterboxed) */
.herovideo > video.hero-bg-video{
  object-fit:cover !important;
  object-position:center center !important;
}

/* 2. AI + CAMPUS: kill the stray rust frame-border bleeding through
   the background art (the "backwards red bracket"). Art + scrim stay. */
section.ai-section::before, section.ai-section::after,
section.campus-section::before, section.campus-section::after{
  border:none !important;
}

/* 3. AI PACKAGES: stack Core / Pro / Studio to one legible column */
@media (max-width:760px){
  .ai-section .paths{ grid-template-columns:1fr !important; gap:16px !important; }
  .ai-section .pathcard{ padding:28px 24px !important; }
}

/* 4. WHY LBMG: center stat numbers + labels on mobile */
@media (max-width:760px){
  .stats-5 .stat-cell{
    text-align:center !important;
    align-items:center !important;
    padding:34px 22px !important;
  }
}

/* 5. TEAM: names/titles always legible on mobile, solid opaque base.
   Also stop the hover-dim from sticking on tap. */
@media (max-width:760px){
  .team-card .team-info{
    opacity:1 !important;
    transform:none !important;
    padding-top:48px !important;
    background:linear-gradient(transparent, rgba(11,11,11,0.96) 38%, #0B0B0B 100%) !important;
  }
  .team-grid:hover .team-card,
  .team-grid .team-card:hover{ filter:none !important; transform:none !important; }
}

/* 6. CAMPUS: lift the brick on mobile + glass the empty studio cards
   so the wall reads behind labeled panels. Real photos drop in later.
   KNOBS: brightness 0.62 = brick exposure; rgba 0.42 = card glass. */
@media (max-width:760px){
  section.campus-section::before{
    filter:grayscale(100%) contrast(1.05) brightness(0.62) !important;
    opacity:0.95 !important;
  }
  section.campus-section::after{
    background:linear-gradient(180deg, rgba(11,11,11,0.35), rgba(11,11,11,0.62)) !important;
  }
  .campus-section .campus .img.has-photo{
    background:rgba(11,11,11,0.42) !important;
    min-height:210px !important;
  }
  .campus-section .campus .img.has-photo::before{ opacity:0.35 !important; }
}

/* ============================================================
   FIX PACK 17 — TEAM GALLERY: dark-until-hover spotlight (2026-05-31)
   ============================================================ */

/* Darker, bolder caption so name + title always read (all viewports) */
.team-card .team-info{
  background:linear-gradient(transparent, rgba(11,11,11,0.85) 26%, #0B0B0B 100%) !important;
}
.team-card .team-name{ font-weight:500 !important; text-shadow:0 2px 10px rgba(0,0,0,.85); }
.team-card .team-role{ font-weight:500; text-shadow:0 2px 8px rgba(0,0,0,.85); }

/* Desktop spotlight: entire grid dim, hovered card lights up + pops forward */
@media (hover:hover) and (min-width:761px){
  .team-card{
    filter:brightness(0.42) contrast(0.95) !important;
    transition:filter .45s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease) !important;
  }
  /* neutralize the old sibling-dim so grid-hover alone changes nothing */
  .team-grid:hover .team-card{ filter:brightness(0.42) contrast(0.95) !important; }
  /* the hovered card only */
  .team-card:hover{
    filter:brightness(1.08) contrast(1.05) !important;
    transform:scale(1.06) !important;
    z-index:5 !important;
    box-shadow:0 26px 70px rgba(0,0,0,0.7) !important;
  }
  .team-card .team-info{ opacity:0; transform:translateY(18%); }
  .team-card:hover .team-info{ opacity:1 !important; transform:translateY(0) !important; }
}

/* ============================================================
   FIX PACK 17 — TEAM GALLERY: dark-until-hover spotlight (2026-05-31)
   ============================================================ */

/* Darker, bolder caption so name + title always read (all viewports) */
.team-card .team-info{
  background:linear-gradient(transparent, rgba(11,11,11,0.85) 26%, #0B0B0B 100%) !important;
}
.team-card .team-name{ font-weight:500 !important; text-shadow:0 2px 10px rgba(0,0,0,.85); }
.team-card .team-role{ font-weight:500; text-shadow:0 2px 8px rgba(0,0,0,.85); }

/* Desktop spotlight: entire grid dim, hovered card lights up + pops forward */
@media (hover:hover) and (min-width:761px){
  .team-card{
    filter:brightness(0.42) contrast(0.95) !important;
    transition:filter .45s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease) !important;
  }
  /* neutralize the old sibling-dim so grid-hover alone changes nothing */
  .team-grid:hover .team-card{ filter:brightness(0.42) contrast(0.95) !important; }
  /* the hovered card only */
  .team-card:hover{
    filter:brightness(1.08) contrast(1.05) !important;
    transform:scale(1.06) !important;
    z-index:5 !important;
    box-shadow:0 26px 70px rgba(0,0,0,0.7) !important;
  }
  .team-card .team-info{ opacity:0; transform:translateY(18%); }
  .team-card:hover .team-info{ opacity:1 !important; transform:translateY(0) !important; }
}

/* ===== FIX PACK 18 — TEAM HOVER FIX (2026-05-31) =====
   FP17's ".team-grid:hover .team-card" re-dimmed the hovered card too.
   Give the hovered card a higher-specificity win so it actually lights up. */
@media (hover:hover) and (min-width:761px){
  .team-card{
    filter:brightness(0.42) contrast(0.95) !important;
    transition:filter .45s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease) !important;
  }
  .team-grid:hover .team-card:hover{
    filter:brightness(1.12) contrast(1.05) !important;
    transform:scale(1.06) !important;
    z-index:5 !important;
    box-shadow:0 26px 70px rgba(0,0,0,0.7) !important;
  }
  .team-grid:hover .team-card:hover .team-info{ opacity:1 !important; transform:translateY(0) !important; }
}

/* ============================================================
   FIX PACK 20 — team bracket + Pro stripe motion + CTA parallax
   2026-05-31
   ============================================================ */

/* 1. TEAM SECTION corner brackets: pin to top-left + bottom-right.
   This pulls the stray bottom-left red "L" over to the bottom-right.
   Scoped only to the section that contains the team grid. */
section:has(.team-grid){ position:relative; }
section:has(.team-grid)::before,
section:has(.team-grid)::after{
  content:"" !important;
  position:absolute !important;
  width:22px !important; height:22px !important;
  border:1px solid var(--rust) !important;
  pointer-events:none !important; z-index:4 !important;
}
section:has(.team-grid)::before{                /* top-left  ┌ */
  top:24px !important; left:24px !important; right:auto !important; bottom:auto !important;
  border-right:none !important; border-bottom:none !important;
}
section:has(.team-grid)::after{                 /* bottom-right  ┘ */
  bottom:24px !important; right:24px !important; top:auto !important; left:auto !important;
  border-left:none !important; border-top:none !important;
}
@media (max-width:760px){
  section:has(.team-grid)::before{ top:14px !important; left:14px !important; width:14px !important; height:14px !important; }
  section:has(.team-grid)::after{ bottom:14px !important; right:14px !important; width:14px !important; height:14px !important; }
}

/* 2. AI "Pro" card: animate the red stripe so it marches across the
   top edge. Featured (Pro) card only.
   KNOBS: speed = 1.1s (raise to slow), tile = 26px, height = 5px. */
.ai-section .pathcard.feature{ position:relative; overflow:hidden; }
.ai-section .pathcard.feature::after{
  content:"" !important;
  position:absolute !important;
  left:0 !important; right:0 !important; top:0 !important;
  height:5px !important;
  background:repeating-linear-gradient(
    115deg,
    var(--rust-2) 0 9px,
    #7c1d14 9px 18px
  ) !important;
  background-size:26px 100% !important;
  animation:lbProStripe 1.1s linear infinite !important;
}
@keyframes lbProStripe{
  from{ background-position:0 0; }
  to{   background-position:26px 0; }
}
@media (prefers-reduced-motion:reduce){
  .ai-section .pathcard.feature::after{ animation:none !important; }
}

/* 3. CTA "Let's roll" film: overscan room so the parallax shift
   (driven by script.js) never reveals a top/bottom edge.
   KNOB: bump the 12% if you raise TRAVEL in the JS. */
.cta-band .cta-bg{
  top:-12% !important; bottom:-12% !important; height:auto !important;
  width:100% !important; object-fit:cover !important;
  will-change:transform;
}

/* ============================================================
   FIX PACK 21 — force Pro stripe motion + CTA parallax room
   (no prefers-reduced-motion gate; appended after FP20 so it wins)
   2026-05-31
   ============================================================ */

/* Pro card stripe: re-declared with an animatable repeating gradient
   and the animation ungated. KNOBS: speed 0.9s, tile 26px, height 5px. */
.ai-section .pathcard.feature{ position:relative; overflow:hidden; }
.ai-section .pathcard.feature::after{
  content:"" !important;
  position:absolute !important;
  left:0 !important; right:0 !important; top:0 !important;
  height:5px !important;
  background:repeating-linear-gradient(
    115deg,
    var(--rust-2) 0 9px,
    #7c1d14 9px 18px
  ) !important;
  background-size:26px 100% !important;
  animation:lbProStripe 0.9s linear infinite !important;
}
@keyframes lbProStripe{
  from{ background-position:0 0; }
  to{   background-position:26px 0; }
}

/* CTA film: overscan room for the parallax shift. */
.cta-band .cta-bg{
  top:-14% !important; bottom:-14% !important; height:auto !important;
  width:100% !important; object-fit:cover !important;
  will-change:transform;
}

/* ============================================================
   FIX PACK 22 — campus studio photos + rule-of-thirds overlay
   2026-05-31
   ============================================================ */

/* Cards match the 3:2 source photos so nothing crops and the thirds
   grid maps onto the real composition. Uniform across all three. */
.campus .img.has-photo{
  aspect-ratio:3 / 2 !important;
  min-height:0 !important;
}

/* Lift the graded photos a touch (card filter was crushing the dark
   console shot). KNOB: brightness 0.85. */
.campus .img.has-photo img{
  filter:grayscale(100%) contrast(1.04) brightness(0.85) !important;
}

/* Rule-of-thirds grid, light, over each image and under the caption.
   Replaces the empty-state plus on photo cards.
   KNOB: rgba alpha 0.20 = line strength. */
.campus .img.has-photo::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important; width:auto !important; height:auto !important;
  transform:none !important; border:none !important;
  pointer-events:none !important;
  z-index:2 !important;
  background:
    linear-gradient(to right,  transparent calc(33.333% - 0.5px), rgba(245,242,234,0.20) calc(33.333% - 0.5px) calc(33.333% + 0.5px), transparent calc(33.333% + 0.5px)),
    linear-gradient(to right,  transparent calc(66.666% - 0.5px), rgba(245,242,234,0.20) calc(66.666% - 0.5px) calc(66.666% + 0.5px), transparent calc(66.666% + 0.5px)),
    linear-gradient(to bottom, transparent calc(33.333% - 0.5px), rgba(245,242,234,0.20) calc(33.333% - 0.5px) calc(33.333% + 0.5px), transparent calc(33.333% + 0.5px)),
    linear-gradient(to bottom, transparent calc(66.666% - 0.5px), rgba(245,242,234,0.20) calc(66.666% - 0.5px) calc(66.666% + 0.5px), transparent calc(66.666% + 0.5px)) !important;
}

/* Caption sits above the grid. */
.campus .img.has-photo .cap{ z-index:3 !important; }

/* Mobile: drop the FIX PACK 16 glass empty-state now that real photos
   are in, and keep the 3:2 shape. */
@media (max-width:760px){
  .campus-section .campus .img.has-photo{
    min-height:0 !important;
    background:transparent !important;
  }
}

/* ============================================================
   FIX PACK 22 — campus studio photos + rule-of-thirds overlay
   2026-05-31
   ============================================================ */

/* Cards match the 3:2 source photos so nothing crops and the thirds
   grid maps onto the real composition. Uniform across all three. */
.campus .img.has-photo{
  aspect-ratio:3 / 2 !important;
  min-height:0 !important;
}

/* Lift the graded photos a touch (card filter was crushing the dark
   console shot). KNOB: brightness 0.85. */
.campus .img.has-photo img{
  filter:grayscale(100%) contrast(1.04) brightness(0.85) !important;
}

/* Rule-of-thirds grid, light, over each image and under the caption.
   Replaces the empty-state plus on photo cards.
   KNOB: rgba alpha 0.20 = line strength. */
.campus .img.has-photo::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important; width:auto !important; height:auto !important;
  transform:none !important; border:none !important;
  pointer-events:none !important;
  z-index:2 !important;
  background:
    linear-gradient(to right,  transparent calc(33.333% - 0.5px), rgba(245,242,234,0.20) calc(33.333% - 0.5px) calc(33.333% + 0.5px), transparent calc(33.333% + 0.5px)),
    linear-gradient(to right,  transparent calc(66.666% - 0.5px), rgba(245,242,234,0.20) calc(66.666% - 0.5px) calc(66.666% + 0.5px), transparent calc(66.666% + 0.5px)),
    linear-gradient(to bottom, transparent calc(33.333% - 0.5px), rgba(245,242,234,0.20) calc(33.333% - 0.5px) calc(33.333% + 0.5px), transparent calc(33.333% + 0.5px)),
    linear-gradient(to bottom, transparent calc(66.666% - 0.5px), rgba(245,242,234,0.20) calc(66.666% - 0.5px) calc(66.666% + 0.5px), transparent calc(66.666% + 0.5px)) !important;
}

/* Caption sits above the grid. */
.campus .img.has-photo .cap{ z-index:3 !important; }

/* Mobile: drop the FIX PACK 16 glass empty-state now that real photos
   are in, and keep the 3:2 shape. */
@media (max-width:760px){
  .campus-section .campus .img.has-photo{
    min-height:0 !important;
    background:transparent !important;
  }
}

/* ============================================================
   FIX PACK 24 — campus caption legibility (ALWAYS ON, no hover)
                + slate rule-of-thirds grid
   2026-05-31
   ============================================================ */

/* Permanent bottom scrim on the card itself. Repurposes ::before (the
   empty-state hatch, which the photo covers anyway). This darkens the
   lower third regardless of how the caption element behaves.
   KNOB: 0.95 = darkness at the very bottom. */
.campus .img.has-photo::before{
  content:"" !important;
  position:absolute !important; inset:0 !important;
  z-index:2 !important; pointer-events:none !important; opacity:1 !important;
  background:linear-gradient(
    to top,
    rgba(11,11,11,0.95) 0%,
    rgba(11,11,11,0.80) 24%,
    rgba(11,11,11,0.32) 46%,
    transparent 64%
  ) !important;
}

/* Caption forced visible, pinned to the bottom, above everything,
   bright text. No hover dependency. */
.campus .img.has-photo .cap{
  position:absolute !important;
  left:0 !important; right:0 !important; bottom:0 !important; top:auto !important;
  z-index:4 !important;
  opacity:1 !important; transform:none !important;
  background:none !important;
  padding:0 22px 18px !important;
}
.campus .img.has-photo .cap b{ color:var(--ink) !important; }
.campus .img.has-photo .cap i{ color:rgba(245,242,234,0.92) !important; }

/* Rule-of-thirds grid in slate, opaque enough to read. Sits above the
   photo, below the caption. KNOB: alpha 0.7 = line strength. */
.campus .img.has-photo::after{
  content:"" !important;
  position:absolute !important; inset:0 !important;
  width:auto !important; height:auto !important; transform:none !important; border:none !important;
  z-index:3 !important; pointer-events:none !important;
  background:
    linear-gradient(to right,  transparent calc(33.333% - 0.6px), rgba(21,23,28,0.7) calc(33.333% - 0.6px) calc(33.333% + 0.6px), transparent calc(33.333% + 0.6px)),
    linear-gradient(to right,  transparent calc(66.666% - 0.6px), rgba(21,23,28,0.7) calc(66.666% - 0.6px) calc(66.666% + 0.6px), transparent calc(66.666% + 0.6px)),
    linear-gradient(to bottom, transparent calc(33.333% - 0.6px), rgba(21,23,28,0.7) calc(33.333% - 0.6px) calc(33.333% + 0.6px), transparent calc(33.333% + 0.6px)),
    linear-gradient(to bottom, transparent calc(66.666% - 0.6px), rgba(21,23,28,0.7) calc(66.666% - 0.6px) calc(66.666% + 0.6px), transparent calc(66.666% + 0.6px)) !important;
}

/* ============================================================
   FIX PACK 25 — Brand Paths "Strategy in Motion" meeting card
   Matches the campus treatment. Scoped to just this card via the
   image name, so nothing else is affected.
   2026-05-31
   ============================================================ */

/* Card shape (4:3, matches the crop) + position context. */
.img.has-photo:has(img[src*="brandpaths-strategy"]){
  aspect-ratio:4 / 3 !important;
  min-height:0 !important;
  position:relative !important;
  overflow:hidden !important;
}

/* Photo grade + hover scale (same as campus). */
.img.has-photo:has(img[src*="brandpaths-strategy"]) > img{
  filter:grayscale(100%) contrast(1.04) brightness(0.85) !important;
  transition:transform 1.2s var(--ease) !important;
}
.img.has-photo:has(img[src*="brandpaths-strategy"]):hover > img{
  transform:scale(1.04) !important;
}

/* Permanent bottom scrim so the caption reads. */
.img.has-photo:has(img[src*="brandpaths-strategy"])::before{
  content:"" !important;
  position:absolute !important; inset:0 !important;
  z-index:2 !important; pointer-events:none !important; opacity:1 !important;
  background:linear-gradient(
    to top,
    rgba(11,11,11,0.95) 0%,
    rgba(11,11,11,0.80) 24%,
    rgba(11,11,11,0.32) 46%,
    transparent 64%
  ) !important;
}

/* Caption forced visible, bottom, bright text. */
.img.has-photo:has(img[src*="brandpaths-strategy"]) .cap{
  position:absolute !important;
  left:0 !important; right:0 !important; bottom:0 !important; top:auto !important;
  z-index:4 !important;
  opacity:1 !important; transform:none !important; background:none !important;
  padding:0 22px 18px !important;
}
.img.has-photo:has(img[src*="brandpaths-strategy"]) .cap b{ color:var(--ink) !important; }
.img.has-photo:has(img[src*="brandpaths-strategy"]) .cap i{ color:rgba(245,242,234,0.92) !important; }

/* Slate rule-of-thirds grid (same as campus). KNOB: alpha 0.7. */
.img.has-photo:has(img[src*="brandpaths-strategy"])::after{
  content:"" !important;
  position:absolute !important; inset:0 !important;
  width:auto !important; height:auto !important; transform:none !important; border:none !important;
  z-index:3 !important; pointer-events:none !important;
  background:
    linear-gradient(to right,  transparent calc(33.333% - 0.6px), rgba(21,23,28,0.7) calc(33.333% - 0.6px) calc(33.333% + 0.6px), transparent calc(33.333% + 0.6px)),
    linear-gradient(to right,  transparent calc(66.666% - 0.6px), rgba(21,23,28,0.7) calc(66.666% - 0.6px) calc(66.666% + 0.6px), transparent calc(66.666% + 0.6px)),
    linear-gradient(to bottom, transparent calc(33.333% - 0.6px), rgba(21,23,28,0.7) calc(33.333% - 0.6px) calc(33.333% + 0.6px), transparent calc(33.333% + 0.6px)),
    linear-gradient(to bottom, transparent calc(66.666% - 0.6px), rgba(21,23,28,0.7) calc(66.666% - 0.6px) calc(66.666% + 0.6px), transparent calc(66.666% + 0.6px)) !important;
}

/* ============================================================
   FIX PACK 26 — flashing red recording dot (eyebrow marker)
   Renders only where <span class="rec-dot"></span> is placed.
   2026-05-31
   ============================================================ */
.rec-dot{
  display:inline-block;
  width:8px; height:8px; border-radius:50%;
  background:var(--rust-2);
  margin-right:11px;
  vertical-align:middle;
  position:relative; top:-1px;
  animation:lbRecBlink 1.15s ease-in-out infinite;
}
@keyframes lbRecBlink{
  0%,100%{ opacity:1;  box-shadow:0 0 0 0 rgba(214,54,42,.45); }
  50%    { opacity:.18; box-shadow:0 0 0 5px rgba(214,54,42,0); }
}

/* ============================================================
   FIX PACK 27 — "film side" hero background video
   Dark, subtle B&W loop matched to the home hero. The video and
   scrim sit behind the lb-hero-grid thirds grid + brackets; the
   headline stays on top (lb-hero-grid forces content to z-index 2).
   2026-05-31
   ============================================================ */

/* lb-hero-grid pins all direct children to z-index:2, so the video
   and scrim must be pinned behind explicitly. */
.film-hero-video{
  position:absolute !important; inset:0 !important;
  width:100% !important; height:100% !important;
  object-fit:cover !important; object-position:center !important;
  z-index:0 !important; pointer-events:none !important;
  opacity:0.5 !important;                                              /* KNOB: footage presence */
  filter:grayscale(100%) contrast(1.06) brightness(0.66) !important;   /* KNOB: B&W + darkness */
}

/* Left-heavy black scrim (headline side stays solid) + soft bottom blend. */
.film-hero-scrim{
  position:absolute !important; inset:0 !important;
  z-index:0 !important; pointer-events:none !important;
  background:
    linear-gradient(90deg, rgba(11,11,11,0.95) 0%, rgba(11,11,11,0.88) 36%, rgba(11,11,11,0.55) 66%, rgba(11,11,11,0.30) 100%),
    linear-gradient(180deg, rgba(11,11,11,0) 58%, rgba(11,11,11,0.80) 100%) !important;
}

/* Mobile: drop the video (battery/data), darken the poster as a still bg. */
@media (max-width:760px){
  .film-hero-video, .film-hero-scrim{ display:none !important; }
  body[data-page="commercial"] section.hero.lb-hero-grid{
    background-image:
      linear-gradient(180deg, rgba(11,11,11,0.55), rgba(11,11,11,0.82)),
      url('assets/film-hero-poster.jpg') !important;
    background-size:cover !important; background-position:center !important;
  }
}

/* ============================================================
   FIX PACK 28 — film hero viewfinder look
   - Deeper fade-to-black on the headline side
   - Visible thirds grid that masks out into the text (right-weighted)
   - Faint focus reticle on a thirds intersection
   2026-05-31
   ============================================================ */

/* Deeper, more dramatic fade-to-black on the headline side (overrides FP27). */
.film-hero-scrim{
  background:
    linear-gradient(90deg, #0B0B0B 0%, #0B0B0B 30%, rgba(11,11,11,0.72) 58%, rgba(11,11,11,0.34) 100%),
    linear-gradient(180deg, rgba(11,11,11,0) 56%, rgba(11,11,11,0.82) 100%) !important;
}

/* Viewfinder thirds grid as its own layer (section pseudos are used by the
   corner marks). Above video/scrim (z0), below the headline (z2). */
.film-vf{
  position:absolute !important; inset:0 !important;
  z-index:1 !important; pointer-events:none !important;
  background:
    linear-gradient(90deg,  transparent calc(33.333% - .6px), rgba(233,217,202,.16) calc(33.333% - .6px), rgba(233,217,202,.16) calc(33.333% + .6px), transparent calc(33.333% + .6px)),
    linear-gradient(90deg,  transparent calc(66.666% - .6px), rgba(233,217,202,.16) calc(66.666% - .6px), rgba(233,217,202,.16) calc(66.666% + .6px), transparent calc(66.666% + .6px)),
    linear-gradient(180deg, transparent calc(33.333% - .6px), rgba(233,217,202,.16) calc(33.333% - .6px), rgba(233,217,202,.16) calc(33.333% + .6px), transparent calc(33.333% + .6px)),
    linear-gradient(180deg, transparent calc(66.666% - .6px), rgba(233,217,202,.16) calc(66.666% - .6px), rgba(233,217,202,.16) calc(66.666% + .6px), transparent calc(66.666% + .6px)) !important;
  /* fade the grid out toward the headline (left), full on the footage (right) */
  -webkit-mask-image:linear-gradient(90deg, transparent 0, transparent 44%, #000 70%, #000 100%) !important;
          mask-image:linear-gradient(90deg, transparent 0, transparent 44%, #000 70%, #000 100%) !important;
}

/* Focus reticle on a thirds intersection, footage side. KNOB: opacity .5 */
.film-vf::after{
  content:"" !important;
  position:absolute !important; left:66.666% !important; top:33.333% !important;
  width:26px !important; height:26px !important; transform:translate(-50%,-50%) !important;
  pointer-events:none !important; opacity:.5 !important;
  background:
    linear-gradient(var(--linen),var(--linen)) center/100% 1px no-repeat,
    linear-gradient(var(--linen),var(--linen)) center/1px 100% no-repeat !important;
}

/* ============================================================
   FIX PACK 28 — film hero viewfinder look
   - Deeper fade-to-black on the headline side
   - Visible thirds grid that masks out into the text (right-weighted)
   - Faint focus reticle on a thirds intersection
   2026-05-31
   ============================================================ */

/* Deeper, more dramatic fade-to-black on the headline side (overrides FP27). */
.film-hero-scrim{
  background:
    linear-gradient(90deg, #0B0B0B 0%, #0B0B0B 30%, rgba(11,11,11,0.72) 58%, rgba(11,11,11,0.34) 100%),
    linear-gradient(180deg, rgba(11,11,11,0) 56%, rgba(11,11,11,0.82) 100%) !important;
}

/* Viewfinder thirds grid as its own layer (section pseudos are used by the
   corner marks). Above video/scrim (z0), below the headline (z2). */
.film-vf{
  position:absolute !important; inset:0 !important;
  z-index:1 !important; pointer-events:none !important;
  background:
    linear-gradient(90deg,  transparent calc(33.333% - .6px), rgba(233,217,202,.16) calc(33.333% - .6px), rgba(233,217,202,.16) calc(33.333% + .6px), transparent calc(33.333% + .6px)),
    linear-gradient(90deg,  transparent calc(66.666% - .6px), rgba(233,217,202,.16) calc(66.666% - .6px), rgba(233,217,202,.16) calc(66.666% + .6px), transparent calc(66.666% + .6px)),
    linear-gradient(180deg, transparent calc(33.333% - .6px), rgba(233,217,202,.16) calc(33.333% - .6px), rgba(233,217,202,.16) calc(33.333% + .6px), transparent calc(33.333% + .6px)),
    linear-gradient(180deg, transparent calc(66.666% - .6px), rgba(233,217,202,.16) calc(66.666% - .6px), rgba(233,217,202,.16) calc(66.666% + .6px), transparent calc(66.666% + .6px)) !important;
  /* fade the grid out toward the headline (left), full on the footage (right) */
  -webkit-mask-image:linear-gradient(90deg, transparent 0, transparent 44%, #000 70%, #000 100%) !important;
          mask-image:linear-gradient(90deg, transparent 0, transparent 44%, #000 70%, #000 100%) !important;
}

/* Focus reticle on a thirds intersection, footage side. KNOB: opacity .5 */
.film-vf::after{
  content:"" !important;
  position:absolute !important; left:66.666% !important; top:33.333% !important;
  width:26px !important; height:26px !important; transform:translate(-50%,-50%) !important;
  pointer-events:none !important; opacity:.5 !important;
  background:
    linear-gradient(var(--linen),var(--linen)) center/100% 1px no-repeat,
    linear-gradient(var(--linen),var(--linen)) center/1px 100% no-repeat !important;
}
/* ============================================================
   FIX PACK 34 — "What We Make" : funnel + training + signature
   Replaces FIX PACK 33. Funnel tiers now FLIP: the asset chips
   swap out for the stage description in the same space (no layout
   shift). Hover on desktop, tap on touch (tap again to flip back).
   2026-06-01
   ============================================================ */

.lbwm{ position:relative; max-width:980px; margin:0 auto; }

/* red production corner brackets around the SECTION only */
.lbwm-corner{ position:absolute; width:30px; height:30px; z-index:6; pointer-events:none; }
.lbwm-corner.tl{ top:-10px; left:-10px; border-top:2px solid var(--rust-2); border-left:2px solid var(--rust-2); }
.lbwm-corner.tr{ top:-10px; right:-10px; border-top:2px solid var(--rust-2); border-right:2px solid var(--rust-2); }
.lbwm-corner.bl{ bottom:-10px; left:-10px; border-bottom:2px solid var(--rust-2); border-left:2px solid var(--rust-2); }
.lbwm-corner.br{ bottom:-10px; right:-10px; border-bottom:2px solid var(--rust-2); border-right:2px solid var(--rust-2); }

/* faint film thirds-grid behind the funnel */
.lbwm-funnelwrap{ position:relative; }
.lbwm-funnelwrap::before{
  content:""; position:absolute; inset:-40px 0 0; z-index:0; pointer-events:none;
  background:
    linear-gradient(90deg,transparent calc(50% - .5px),rgba(233,217,202,.06) calc(50% - .5px),rgba(233,217,202,.06) calc(50% + .5px),transparent calc(50% + .5px)),
    linear-gradient(180deg,transparent calc(33.333% - .5px),rgba(233,217,202,.045) calc(33.333% - .5px),rgba(233,217,202,.045) calc(33.333% + .5px),transparent calc(33.333% + .5px)),
    linear-gradient(180deg,transparent calc(66.666% - .5px),rgba(233,217,202,.045) calc(66.666% - .5px),rgba(233,217,202,.045) calc(66.666% + .5px),transparent calc(66.666% + .5px));
  -webkit-mask-image:radial-gradient(120% 90% at 50% 30%,#000 30%,transparent 80%);
          mask-image:radial-gradient(120% 90% at 50% 30%,#000 30%,transparent 80%);
}

.lbwm-head{ position:relative; z-index:2; text-align:center; margin-bottom:54px; }
.lbwm-eyebrow{ font-size:12px; letter-spacing:.32em; text-transform:uppercase; color:var(--rust-2);
  display:flex; align-items:center; justify-content:center; gap:11px; margin-bottom:20px; }
.lbwm-dot{ width:7px;height:7px;border-radius:50%;background:var(--rust-2); animation:lbwmBlink 1.15s ease-in-out infinite; }
@keyframes lbwmBlink{0%,100%{opacity:1}50%{opacity:.18}}
.lbwm-h2{ font-family:"Newsreader",serif; font-weight:400; line-height:1.02; font-size:clamp(38px,6vw,76px); letter-spacing:-.01em; }
.lbwm-h2 em{ font-style:italic; color:var(--rust-2); }
.lbwm-head p{ color:var(--muted); font-size:clamp(13px,1.5vw,16px); letter-spacing:.04em; margin-top:18px; }

/* ---- funnel ---- */
.lbwm-funnel{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; }
.lbwm-tier{ position:relative; width:100%; margin:0 auto 16px; border:1px solid var(--line); border-radius:16px;
  background:linear-gradient(180deg,rgba(21,23,28,.66),rgba(11,11,11,.5)); padding:26px 30px 24px;
  cursor:default; will-change:transform,opacity;
  transition:transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s ease, border-color .45s ease; }
.lbwm-tier:nth-child(1){ max-width:100%; }
.lbwm-tier:nth-child(2){ max-width:88%; }
.lbwm-tier:nth-child(3){ max-width:74%; }
.lbwm-tier:nth-child(4){ max-width:60%; }
.lbwm-accent{ border-color:var(--line-2); box-shadow:inset 3px 0 0 var(--rust); }

.lbwm-trow{ display:flex; align-items:baseline; gap:14px; margin-bottom:16px; }
.lbwm-tn{ font-size:12px; letter-spacing:.22em; color:var(--rust-2); font-weight:500; }
.lbwm-tier h3{ font-family:"Newsreader",serif; font-weight:400; font-size:clamp(20px,2.6vw,30px); letter-spacing:-.01em; }
.lbwm-stagetag{ margin-left:auto; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); transition:color .4s ease; }

/* the swap area: chips and description share the same box */
.lbwm-face{ position:relative; }
.lbwm-chips{ display:grid; grid-template-columns:1fr 1fr; gap:9px 24px; transition:opacity .35s ease; }
.lbwm-chip{ display:flex; align-items:center; gap:10px; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); }
.lbwm-pt{ width:0;height:0;border-style:solid;border-width:5px 0 5px 8px; border-color:transparent transparent transparent var(--rust-2); flex:none; }
.lbwm-chip span{ opacity:.92; }
.lbwm-desc{ position:absolute; inset:0; margin:0; display:flex; align-items:center;
  opacity:0; transform:translateY(8px); pointer-events:none;
  color:rgba(233,217,202,.88); font-style:italic; font-size:clamp(15px,1.7vw,18px); line-height:1.5; letter-spacing:.005em;
  transition:opacity .35s ease, transform .42s cubic-bezier(.22,.61,.36,1); }

/* FLIP — desktop hover */
@media (hover:hover){
  .lbwm-tier:hover{ transform:translateY(-7px) scale(1.014); border-color:var(--rust);
    box-shadow:0 22px 60px rgba(0,0,0,.55), inset 3px 0 0 var(--rust); z-index:3; }
  .lbwm-tier:hover .lbwm-stagetag{ color:var(--rust-2); }
  .lbwm-tier:hover .lbwm-chips{ opacity:0; }
  .lbwm-tier:hover .lbwm-desc{ opacity:1; transform:none; }
}
/* FLIP — touch (class toggled by tap) */
.lbwm-tier.lbwm-flipped{ transform:translateY(-7px) scale(1.014); border-color:var(--rust);
  box-shadow:0 22px 60px rgba(0,0,0,.55), inset 3px 0 0 var(--rust); z-index:3; }
.lbwm-tier.lbwm-flipped .lbwm-stagetag{ color:var(--rust-2); }
.lbwm-tier.lbwm-flipped .lbwm-chips{ opacity:0; }
.lbwm-tier.lbwm-flipped .lbwm-desc{ opacity:1; transform:none; }

.lbwm-drip{ width:1.5px; height:46px; background:linear-gradient(var(--rust-2),var(--rust));
  transform-origin:top; margin:2px 0 0; border-radius:2px; position:relative; z-index:2; will-change:transform; }
.lbwm-rev{ position:relative; z-index:2; margin-top:10px; width:150px; height:150px; border-radius:50%;
  background:radial-gradient(circle at 38% 32%,var(--rust-2),var(--rust) 78%);
  display:flex; align-items:center; justify-content:center; will-change:transform,opacity;
  animation:lbwmRevGlow 2.8s ease-in-out infinite; }
.lbwm-rev span{ font-size:15px; letter-spacing:.24em; text-transform:uppercase; color:#fff; font-weight:500; }
.lbwm-rev::after{ content:""; position:absolute; inset:-6px; border-radius:50%; border:1px solid rgba(214,54,42,.4);
  animation:lbwmRipple 2.8s ease-out infinite; }
@keyframes lbwmRevGlow{ 0%,100%{ box-shadow:0 0 0 0 rgba(214,54,42,.45); } 50%{ box-shadow:0 0 38px 6px rgba(214,54,42,.28); } }
@keyframes lbwmRipple{ 0%{ opacity:.55; transform:scale(1); } 70%{ opacity:0; transform:scale(1.5); } 100%{ opacity:0; transform:scale(1.5); } }

/* ---- training & enablement ---- */
.lbwm-train{ position:relative; z-index:2; margin-top:96px; border:1px solid var(--line); border-top:2px solid var(--rust);
  border-radius:16px; background:linear-gradient(180deg,rgba(21,23,28,.5),rgba(11,11,11,.4)); padding:32px 36px 30px;
  will-change:transform,opacity; transition:transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s ease; }
@media (hover:hover){ .lbwm-train:hover{ transform:translateY(-6px); box-shadow:0 22px 60px rgba(0,0,0,.5); } }
.lbwm-train .lbwm-eyebrow{ justify-content:flex-start; margin-bottom:14px; }
.lbwm-trainh{ font-family:"Newsreader",serif; font-weight:400; font-size:clamp(22px,3vw,38px); letter-spacing:-.01em; margin-bottom:22px; }
.lbwm-trainh em{ font-style:italic; color:var(--rust-2); }
.lbwm-train .lbwm-chips{ grid-template-columns:1fr 1fr 1fr; gap:11px 24px; }

/* ---- signature productions ---- */
.lbwm-sig{ position:relative; z-index:2; margin-top:120px; }
.lbwm-sig .lbwm-head{ margin-bottom:46px; }
.lbwm-siggrid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.lbwm-sig-card{ position:relative; aspect-ratio:16/9; border:1px solid var(--line); border-radius:14px;
  overflow:hidden; background:var(--slate); will-change:transform,opacity; transition:border-color .45s ease; }
.lbwm-sig-card:hover{ border-color:var(--rust); }
.lbwm-photo{ position:absolute; inset:0; background-size:cover; background-position:center;
  filter:grayscale(100%) contrast(1.05) brightness(.82); transition:transform 1.2s cubic-bezier(.22,.61,.36,1); }
.lbwm-sig-card:hover .lbwm-photo{ transform:scale(1.04); }
.lbwm-photo.placeholder{ background-image:repeating-linear-gradient(135deg, rgba(233,217,202,.03) 0 10px, transparent 10px 20px); filter:none; }
.lbwm-phtag{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:3;
  font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); opacity:.7; }
.lbwm-sig-card::before{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(to top, rgba(11,11,11,.95) 0%, rgba(11,11,11,.55) 30%, transparent 64%); }
.lbwm-sig-card::after{ content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:
    linear-gradient(90deg,transparent calc(33.333% - .5px),rgba(233,217,202,.16) calc(33.333% - .5px),rgba(233,217,202,.16) calc(33.333% + .5px),transparent calc(33.333% + .5px)),
    linear-gradient(90deg,transparent calc(66.666% - .5px),rgba(233,217,202,.16) calc(66.666% - .5px),rgba(233,217,202,.16) calc(66.666% + .5px),transparent calc(66.666% + .5px)),
    linear-gradient(180deg,transparent calc(33.333% - .5px),rgba(233,217,202,.16) calc(33.333% - .5px),rgba(233,217,202,.16) calc(33.333% + .5px),transparent calc(33.333% + .5px)),
    linear-gradient(180deg,transparent calc(66.666% - .5px),rgba(233,217,202,.16) calc(66.666% - .5px),rgba(233,217,202,.16) calc(66.666% + .5px),transparent calc(66.666% + .5px)); }
.lbwm-sigcap{ position:absolute; left:0; right:0; bottom:0; z-index:4; padding:0 24px 20px; }
.lbwm-sigcap b{ display:block; font-family:"Newsreader",serif; font-weight:400; font-size:clamp(20px,2.4vw,28px); color:var(--ink); letter-spacing:-.01em; }
.lbwm-sigcap i{ display:block; font-style:normal; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgba(233,217,202,.72); margin-top:7px; }
.lbwm-signum{ position:absolute; top:16px; left:18px; z-index:4; font-size:11px; letter-spacing:.22em; color:var(--rust-2); }

@media (max-width:640px){
  .lbwm-tier:nth-child(2),.lbwm-tier:nth-child(3),.lbwm-tier:nth-child(4){ max-width:100%; }
  .lbwm-stagetag{ display:none; }
  .lbwm-train .lbwm-chips{ grid-template-columns:1fr 1fr; }
  .lbwm-siggrid{ grid-template-columns:1fr; }
}

/* ============================================================
   FIX PACK 35 — set the Training & Enablement section apart
   from the two black sections around it. Tonal lift only (same
   palette), so the rhythm reads dark / lifted / dark.
   2026-06-01
   ============================================================ */
.lbwm-train{
  background:linear-gradient(180deg, #1a1c22 0%, #141519 100%) !important;
}

/* ============================================================
   FIX PACK 35 — set the Training & Enablement section apart
   from the two black sections around it. Tonal lift only (same
   palette), so the rhythm reads dark / lifted / dark.
   2026-06-01
   ============================================================ */
.lbwm-train{
  background:linear-gradient(180deg, #1a1c22 0%, #141519 100%) !important;
}

/* ============================================================
   FIX PACK 36 — Training & Enablement as a full-width BAND.
   The lighter tone now runs edge to edge across the viewport so
   the whole zone reads as its own section, not just a lighter box.
   Content stays in the centered column; only the background bleeds.
   2026-06-01
   ============================================================ */

/* contain the full-bleed band so it can't trigger horizontal scroll */
main{ overflow-x:clip; }

.lbwm-train{
  border:none !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  margin-top:120px !important;
  padding:62px 30px 56px !important;
}
/* it's a band now, so it shouldn't lift like a card on hover */
.lbwm-train:hover{ transform:none !important; box-shadow:none !important; }

/* the edge-to-edge band, painted behind the content */
.lbwm-train::before{
  content:""; position:absolute; top:0; bottom:0; left:50%;
  width:100vw; margin-left:-50vw; z-index:-1;
  background:linear-gradient(180deg, #1a1c22 0%, #141519 100%);
  border-top:1px solid rgba(214,54,42,.7);
  border-bottom:1px solid rgba(233,217,202,.07);
}

/* ============================================================
   FIX PACK 37 — give the Training band the house film texture
   and tighten the dead space beneath it. Additive over FP36.
   2026-06-01
   ============================================================ */

/* faint film thirds-grid inside the band — same viewfinder motif as
   the funnel + signature cards, edge-faded so it reads as material,
   not lines. Sits behind the content, full-bleed like the band. */
.lbwm-train::after{
  content:""; position:absolute; top:0; bottom:0; left:50%;
  width:100vw; margin-left:-50vw; z-index:-1; pointer-events:none;
  background:
    linear-gradient(90deg,transparent calc(33.333% - .5px),rgba(233,217,202,.045) calc(33.333% - .5px),rgba(233,217,202,.045) calc(33.333% + .5px),transparent calc(33.333% + .5px)),
    linear-gradient(90deg,transparent calc(66.666% - .5px),rgba(233,217,202,.045) calc(66.666% - .5px),rgba(233,217,202,.045) calc(66.666% + .5px),transparent calc(66.666% + .5px)),
    linear-gradient(180deg,transparent calc(50% - .5px),rgba(233,217,202,.03) calc(50% - .5px),rgba(233,217,202,.03) calc(50% + .5px),transparent calc(50% + .5px));
  -webkit-mask-image:linear-gradient(90deg, transparent 3%, #000 24%, #000 76%, transparent 97%);
          mask-image:linear-gradient(90deg, transparent 3%, #000 24%, #000 76%, transparent 97%);
}

/* snugger band, and pull Signature up so the band doesn't float in a void */
.lbwm-train{ padding:56px 30px 52px !important; }
.lbwm-sig{ margin-top:76px !important; }
/* ============================================================
   FIX PACK 38 — Reel hover-to-play + HUD state (commercial-video)
   Append-only / last-wins. Scoped to #commercial-portfolio .reel.
   Color law: rust (--rust-2) = live / preview / playing.
   ============================================================ */

#commercial-portfolio .grid3 .reel{ position:relative; overflow:hidden; cursor:pointer; }

/* poster + video stacked; video fades in over poster on play */
#commercial-portfolio .grid3 .reel .reel-poster,
#commercial-portfolio .grid3 .reel .reel-vid{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
}
#commercial-portfolio .grid3 .reel .reel-poster{ z-index:0; }
#commercial-portfolio .grid3 .reel .reel-vid{ z-index:1; opacity:0; transition:opacity .28s ease; }
#commercial-portfolio .grid3 .reel.playing .reel-vid{ opacity:1; }
/* always-on lead tile (Carbon Helix): video visible even before JS runs */
#commercial-portfolio .grid3 .reel[data-reel-auto] .reel-vid{ opacity:1; }

/* rust "selector" frame — appears only on the live/preview tile */
#commercial-portfolio .grid3 .reel::after{
  content:""; position:absolute; inset:0; z-index:5; pointer-events:none; border-radius:inherit;
  box-shadow: inset 0 0 0 0 rgba(214,54,42,0);
  transition: box-shadow .18s ease;
}
#commercial-portfolio .grid3 .reel.playing::after{
  box-shadow:
    inset 0 0 0 2px var(--rust-2),
    inset 0 0 0 3px rgba(11,11,11,.55),
    0 14px 44px -16px rgba(214,54,42,.55);
}

/* HUD readouts — hidden until playing */
#commercial-portfolio .grid3 .reel .reel-rec,
#commercial-portfolio .grid3 .reel .reel-tc{
  position:absolute; z-index:6; right:12px; opacity:0; transform:translateY(-4px);
  transition:opacity .2s ease, transform .2s ease;
  font-family:'Jost',sans-serif; pointer-events:none;
  background:rgba(11,11,11,.55); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
#commercial-portfolio .grid3 .reel.playing .reel-rec,
#commercial-portfolio .grid3 .reel.playing .reel-tc{ opacity:1; transform:none; }

#commercial-portfolio .grid3 .reel .reel-rec{
  top:12px; display:inline-flex; align-items:center; gap:6px;
  font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#fff;
  border:1px solid rgba(214,54,42,.65); padding:4px 8px; border-radius:3px;
}
#commercial-portfolio .grid3 .reel .reel-rec i{
  width:7px; height:7px; border-radius:50%; background:var(--rust-2);
  box-shadow:0 0 6px var(--rust-2);
  animation:lbReelBlink 1.1s steps(1,end) infinite;
}
@keyframes lbReelBlink{ 0%,50%{opacity:1} 51%,100%{opacity:.12} }

#commercial-portfolio .grid3 .reel .reel-tc{
  top:40px; font-size:11px; font-weight:400; letter-spacing:.10em;
  color:var(--linen,#E9D9CA); padding:3px 7px; border-radius:3px;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
}

/* keep the category tag + caption above the video + frame */
#commercial-portfolio .grid3 .reel .imgtag,
#commercial-portfolio .grid3 .reel .cap{ z-index:7; }

/* touch devices: faint REC affordance so a tile reads as tappable */
@media (hover:none){
  #commercial-portfolio .grid3 .reel:not(.playing) .reel-rec{ opacity:.55; transform:none; }
  #commercial-portfolio .grid3 .reel:not(.playing) .reel-rec i{ animation:none; opacity:.5; }
}

/* respect Reduce Motion: state still works, just no transitions/blink */
@media (prefers-reduced-motion: reduce){
  #commercial-portfolio .grid3 .reel .reel-vid,
  #commercial-portfolio .grid3 .reel::after,
  #commercial-portfolio .grid3 .reel .reel-rec,
  #commercial-portfolio .grid3 .reel .reel-tc{ transition:none !important; }
  #commercial-portfolio .grid3 .reel .reel-rec i{ animation:none !important; }
}
/* ============================================================
   FIX PACK 38 — Reel hover-to-play + HUD state (commercial-video)
   Append-only / last-wins. Scoped to #commercial-portfolio .reel.
   Color law: rust (--rust-2) = live / preview / playing.
   ============================================================ */

#commercial-portfolio .grid3 .reel{ position:relative; overflow:hidden; cursor:pointer; }

/* poster + video stacked; video fades in over poster on play */
#commercial-portfolio .grid3 .reel .reel-poster,
#commercial-portfolio .grid3 .reel .reel-vid{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
}
#commercial-portfolio .grid3 .reel .reel-poster{ z-index:0; }
#commercial-portfolio .grid3 .reel .reel-vid{ z-index:1; opacity:0; transition:opacity .28s ease; }
#commercial-portfolio .grid3 .reel.playing .reel-vid{ opacity:1; }
/* always-on lead tile (Carbon Helix): video visible even before JS runs */
#commercial-portfolio .grid3 .reel[data-reel-auto] .reel-vid{ opacity:1; }

/* rust "selector" frame — appears only on the live/preview tile */
#commercial-portfolio .grid3 .reel::after{
  content:""; position:absolute; inset:0; z-index:5; pointer-events:none; border-radius:inherit;
  box-shadow: inset 0 0 0 0 rgba(214,54,42,0);
  transition: box-shadow .18s ease;
}
#commercial-portfolio .grid3 .reel.playing::after{
  box-shadow:
    inset 0 0 0 2px var(--rust-2),
    inset 0 0 0 3px rgba(11,11,11,.55),
    0 14px 44px -16px rgba(214,54,42,.55);
}

/* HUD readouts — hidden until playing */
#commercial-portfolio .grid3 .reel .reel-rec,
#commercial-portfolio .grid3 .reel .reel-tc{
  position:absolute; z-index:6; right:12px; opacity:0; transform:translateY(-4px);
  transition:opacity .2s ease, transform .2s ease;
  font-family:'Jost',sans-serif; pointer-events:none;
  background:rgba(11,11,11,.55); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
#commercial-portfolio .grid3 .reel.playing .reel-rec,
#commercial-portfolio .grid3 .reel.playing .reel-tc{ opacity:1; transform:none; }

#commercial-portfolio .grid3 .reel .reel-rec{
  top:12px; display:inline-flex; align-items:center; gap:6px;
  font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#fff;
  border:1px solid rgba(214,54,42,.65); padding:4px 8px; border-radius:3px;
}
#commercial-portfolio .grid3 .reel .reel-rec i{
  width:7px; height:7px; border-radius:50%; background:var(--rust-2);
  box-shadow:0 0 6px var(--rust-2);
  animation:lbReelBlink 1.1s steps(1,end) infinite;
}
@keyframes lbReelBlink{ 0%,50%{opacity:1} 51%,100%{opacity:.12} }

#commercial-portfolio .grid3 .reel .reel-tc{
  top:40px; font-size:11px; font-weight:400; letter-spacing:.10em;
  color:var(--linen,#E9D9CA); padding:3px 7px; border-radius:3px;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
}

/* keep the category tag + caption above the video + frame */
#commercial-portfolio .grid3 .reel .imgtag,
#commercial-portfolio .grid3 .reel .cap{ z-index:7; }

/* touch devices: faint REC affordance so a tile reads as tappable */
@media (hover:none){
  #commercial-portfolio .grid3 .reel:not(.playing) .reel-rec{ opacity:.55; transform:none; }
  #commercial-portfolio .grid3 .reel:not(.playing) .reel-rec i{ animation:none; opacity:.5; }
}

/* respect Reduce Motion: state still works, just no transitions/blink */
@media (prefers-reduced-motion: reduce){
  #commercial-portfolio .grid3 .reel .reel-vid,
  #commercial-portfolio .grid3 .reel::after,
  #commercial-portfolio .grid3 .reel .reel-rec,
  #commercial-portfolio .grid3 .reel .reel-tc{ transition:none !important; }
  #commercial-portfolio .grid3 .reel .reel-rec i{ animation:none !important; }
}
/* ============================================================
   FIX PACK 38 — Reel hover-to-play + HUD state (commercial-video)
   Append-only / last-wins. Scoped to #commercial-portfolio .reel.
   Color law: rust (--rust-2) = live / preview / playing.
   ============================================================ */

#commercial-portfolio .grid3 .reel{ position:relative; overflow:hidden; cursor:pointer; }

/* poster + video stacked; video fades in over poster on play */
#commercial-portfolio .grid3 .reel .reel-poster,
#commercial-portfolio .grid3 .reel .reel-vid{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
}
#commercial-portfolio .grid3 .reel .reel-poster{ z-index:0; }
#commercial-portfolio .grid3 .reel .reel-vid{ z-index:1; opacity:0; transition:opacity .28s ease; }
#commercial-portfolio .grid3 .reel.playing .reel-vid{ opacity:1; }
/* always-on lead tile (Carbon Helix): video visible even before JS runs */
#commercial-portfolio .grid3 .reel[data-reel-auto] .reel-vid{ opacity:1; }

/* rust "selector" frame — appears only on the live/preview tile */
#commercial-portfolio .grid3 .reel::after{
  content:""; position:absolute; inset:0; z-index:5; pointer-events:none; border-radius:inherit;
  box-shadow: inset 0 0 0 0 rgba(214,54,42,0);
  transition: box-shadow .18s ease;
}
#commercial-portfolio .grid3 .reel.playing::after{
  box-shadow:
    inset 0 0 0 2px var(--rust-2),
    inset 0 0 0 3px rgba(11,11,11,.55),
    0 14px 44px -16px rgba(214,54,42,.55);
}

/* HUD readouts — hidden until playing */
#commercial-portfolio .grid3 .reel .reel-rec,
#commercial-portfolio .grid3 .reel .reel-tc{
  position:absolute; z-index:6; right:12px; opacity:0; transform:translateY(-4px);
  transition:opacity .2s ease, transform .2s ease;
  font-family:'Jost',sans-serif; pointer-events:none;
  background:rgba(11,11,11,.55); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
#commercial-portfolio .grid3 .reel.playing .reel-rec,
#commercial-portfolio .grid3 .reel.playing .reel-tc{ opacity:1; transform:none; }

#commercial-portfolio .grid3 .reel .reel-rec{
  top:12px; display:inline-flex; align-items:center; gap:6px;
  font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#fff;
  border:1px solid rgba(214,54,42,.65); padding:4px 8px; border-radius:3px;
}
#commercial-portfolio .grid3 .reel .reel-rec i{
  width:7px; height:7px; border-radius:50%; background:var(--rust-2);
  box-shadow:0 0 6px var(--rust-2);
  animation:lbReelBlink 1.1s steps(1,end) infinite;
}
@keyframes lbReelBlink{ 0%,50%{opacity:1} 51%,100%{opacity:.12} }

#commercial-portfolio .grid3 .reel .reel-tc{
  top:40px; font-size:11px; font-weight:400; letter-spacing:.10em;
  color:var(--linen,#E9D9CA); padding:3px 7px; border-radius:3px;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
}

/* keep the category tag + caption above the video + frame */
#commercial-portfolio .grid3 .reel .imgtag,
#commercial-portfolio .grid3 .reel .cap{ z-index:7; }

/* touch devices: faint REC affordance so a tile reads as tappable */
@media (hover:none){
  #commercial-portfolio .grid3 .reel:not(.playing) .reel-rec{ opacity:.55; transform:none; }
  #commercial-portfolio .grid3 .reel:not(.playing) .reel-rec i{ animation:none; opacity:.5; }
}

/* respect Reduce Motion: state still works, just no transitions/blink */
@media (prefers-reduced-motion: reduce){
  #commercial-portfolio .grid3 .reel .reel-vid,
  #commercial-portfolio .grid3 .reel::after,
  #commercial-portfolio .grid3 .reel .reel-rec,
  #commercial-portfolio .grid3 .reel .reel-tc{ transition:none !important; }
  #commercial-portfolio .grid3 .reel .reel-rec i{ animation:none !important; }
}
/* ============================================================
   FIX PACK 39 — Reel spotlight (commercial-video)
   On engage (hover desktop / tap mobile), the active tile scales
   forward and the rest of the grid dims, like the team grid.
   Driven by .lb-reel-engaged on the grid + .playing on the active tile,
   so the rest-state (Carbon Helix auto-playing) is NOT dimmed.
   Append-only / last-wins.
   ============================================================ */

#commercial-portfolio .grid3 > div{
  transition: transform .28s cubic-bezier(.16,.84,.44,1), opacity .26s ease, filter .26s ease, box-shadow .26s ease;
  will-change: transform;
}

/* dim everything that isn't the live tile while engaged (incl. the placeholder) */
#commercial-portfolio .grid3.lb-reel-engaged > div:not(.playing){
  opacity:.5; filter:brightness(.5) saturate(.92); transform:scale(.985);
}

/* push the live tile forward */
#commercial-portfolio .grid3.lb-reel-engaged > .reel.playing{
  transform:scale(1.045); z-index:12;
}

/* deepen the frame so the scaled tile reads as lifted off the grid */
#commercial-portfolio .grid3.lb-reel-engaged > .reel.playing::after{
  box-shadow:
    inset 0 0 0 2px var(--rust-2),
    inset 0 0 0 3px rgba(11,11,11,.55),
    0 28px 72px -22px rgba(0,0,0,.88),
    0 0 0 1px rgba(214,54,42,.25);
}

@media (prefers-reduced-motion: reduce){
  #commercial-portfolio .grid3 > div{ transition:none !important; }
}
/* ============================================================
   FIX PACK 40 — "What we roll with" master-detail kit browser
   Left index of the 6 gear categories; right HUD-framed detail
   panel swaps to the full kit on hover (tap on mobile).
   Append-only / last-wins. Scoped to #commercial-gear.
   ============================================================ */

#commercial-gear .kitlist{
  display:grid;
  grid-template-columns: minmax(260px, 34%) 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items:stretch;
  margin-top:8px;
}

/* ---- left index ---- */
#commercial-gear .kit-index{
  display:flex; flex-direction:column;
  border-top:1px solid var(--line, rgba(233,217,202,.14));
}
#commercial-gear .kit-row{
  display:grid; grid-template-columns:56px 1fr auto; align-items:center; gap:16px;
  width:100%; text-align:left; background:transparent; border:0;
  border-bottom:1px solid var(--line, rgba(233,217,202,.14));
  padding:18px 6px 18px 0; cursor:pointer; color:inherit; position:relative;
  transition:padding-left .22s ease, background .22s ease;
  font:inherit;
}
#commercial-gear .kit-row::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--rust-2,#D6362A); transform:scaleY(0); transform-origin:top;
  transition:transform .22s ease;
}
#commercial-gear .kit-row.active::before{ transform:scaleY(1); }
#commercial-gear .kit-row.active{ padding-left:16px; background:rgba(255,255,255,.015); }

#commercial-gear .kit-code{
  font-family:'Jost',sans-serif; font-size:11px; font-weight:600; letter-spacing:.18em;
  color:var(--muted,#8C8276); transition:color .22s ease;
}
#commercial-gear .kit-row.active .kit-code{ color:var(--rust-2,#D6362A); }
#commercial-gear .kit-name{
  display:block; font-family:'Newsreader',serif; font-size:clamp(20px,2vw,26px);
  line-height:1.1; color:var(--muted,#8C8276); transition:color .22s ease;
}
#commercial-gear .kit-row.active .kit-name{ color:var(--ink,#F5F2EA); }
#commercial-gear .kit-name em{ font-style:italic; color:var(--rust-2,#D6362A); }
#commercial-gear .kit-teaser{
  display:block; margin-top:6px; font-family:'Jost',sans-serif; font-size:11px;
  letter-spacing:.05em; text-transform:uppercase; color:var(--muted,#8C8276); opacity:.7;
}
#commercial-gear .kit-go{
  font-family:'Jost',sans-serif; color:var(--rust-2,#D6362A); font-size:16px;
  opacity:0; transform:translateX(-6px); transition:opacity .22s ease, transform .22s ease;
}
#commercial-gear .kit-row.active .kit-go{ opacity:1; transform:none; }

/* ---- right detail panel ---- */
#commercial-gear .kit-detail{
  position:relative; padding:clamp(20px,2.4vw,34px);
  background:rgba(255,255,255,.02);
  border:1px solid var(--line, rgba(233,217,202,.12));
  min-height:clamp(420px, 40vw, 540px);
}
#commercial-gear .kit-br{ position:absolute; width:14px; height:14px; border:1px solid var(--rust-2,#D6362A); opacity:.55; pointer-events:none; }
#commercial-gear .kit-br.tl{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
#commercial-gear .kit-br.tr{ top:-1px; right:-1px; border-left:0; border-bottom:0; }
#commercial-gear .kit-br.bl{ bottom:-1px; left:-1px; border-right:0; border-top:0; }
#commercial-gear .kit-br.br{ bottom:-1px; right:-1px; border-left:0; border-top:0; }

#commercial-gear .kit-panel{ display:none; }
#commercial-gear .kit-panel.active{ display:block; animation:kitFade .32s ease both; }
@keyframes kitFade{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }

#commercial-gear .kit-phead{ margin-bottom:22px; }
#commercial-gear .kit-pnum{
  font-family:'Jost',sans-serif; font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--rust-2,#D6362A);
}
#commercial-gear .kit-ptitle{
  font-family:'Newsreader',serif; font-size:clamp(24px,2.6vw,34px);
  margin:6px 0 8px; color:var(--ink,#F5F2EA); line-height:1.05;
}
#commercial-gear .kit-ptitle em{ font-style:italic; color:var(--rust-2,#D6362A); }
#commercial-gear .kit-plede{
  font-family:'Newsreader',serif; font-size:14px; line-height:1.5;
  color:var(--muted,#8C8276); max-width:62ch; margin:0;
}

#commercial-gear .kit-groups{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(210px,1fr));
  gap:22px 30px;
}
#commercial-gear .kit-glabel{
  display:flex; align-items:center; gap:8px; font-family:'Jost',sans-serif;
  font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--linen,#E9D9CA); padding-bottom:8px; margin-bottom:8px;
  border-bottom:1px solid var(--line, rgba(233,217,202,.12));
}
#commercial-gear .kit-gdot{ width:5px; height:5px; border-radius:50%; background:var(--rust-2,#D6362A); flex:0 0 auto; }
#commercial-gear .kit-items{ list-style:none; margin:0; padding:0; }
#commercial-gear .kit-items li{ display:grid; grid-template-columns:34px 1fr; gap:10px; padding:5px 0; }
#commercial-gear .kit-items .q{
  font-family:'Jost',sans-serif; font-size:12px; font-weight:500;
  color:var(--rust-2,#D6362A); letter-spacing:.03em;
}
#commercial-gear .kit-items .nm{ font-family:'Newsreader',serif; font-size:15px; line-height:1.25; color:var(--ink,#F5F2EA); }
#commercial-gear .kit-items .nm small{
  display:block; font-family:'Jost',sans-serif; font-size:10.5px; letter-spacing:.03em;
  text-transform:uppercase; color:var(--muted,#8C8276); margin-top:3px; line-height:1.4;
}

/* ---- mobile: stack index over detail; tap swaps; full-width groups ---- */
@media (max-width:880px){
  #commercial-gear .kitlist{ grid-template-columns:1fr; gap:22px; }
  #commercial-gear .kit-detail{ min-height:0; }
  #commercial-gear .kit-groups{ grid-template-columns:1fr 1fr; gap:18px 22px; }
  #commercial-gear .kit-teaser{ display:none; }
}
@media (max-width:520px){
  #commercial-gear .kit-groups{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce){
  #commercial-gear .kit-panel.active{ animation:none; }
  #commercial-gear .kit-row,
  #commercial-gear .kit-row::before,
  #commercial-gear .kit-go{ transition:none !important; }
}
/* ============================================================
   FIX PACK 41 — HUD layer on the gear master-detail
   Thirds texture + persistent camera status bar (running timecode,
   green ONLINE cue) + slate motion bar that sweeps on category swap.
   Append-only / last-wins. Scoped to #commercial-gear.
   (No overflow:hidden on .kit-detail — it would clip the corner brackets.)
   ============================================================ */

/* thirds-grid texture behind the detail panel */
#commercial-gear .kit-detail::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.6;
  background:
    linear-gradient(90deg, transparent calc(33.33% - 1px), rgba(233,217,202,.05) 33.33%, transparent calc(33.33% + 1px)),
    linear-gradient(90deg, transparent calc(66.66% - 1px), rgba(233,217,202,.05) 66.66%, transparent calc(66.66% + 1px)),
    linear-gradient(0deg,  transparent calc(33.33% - 1px), rgba(233,217,202,.05) 33.33%, transparent calc(33.33% + 1px)),
    linear-gradient(0deg,  transparent calc(66.66% - 1px), rgba(233,217,202,.05) 66.66%, transparent calc(66.66% + 1px));
}
#commercial-gear .kit-br{ z-index:3; }
#commercial-gear .kit-bar,
#commercial-gear .kit-panel{ position:relative; z-index:1; }

/* persistent camera status bar */
#commercial-gear .kit-bar{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding-bottom:13px; margin-bottom:18px;
  border-bottom:1px solid var(--line, rgba(233,217,202,.12));
  font-family:'Jost',sans-serif; font-size:10px; letter-spacing:.16em; text-transform:uppercase;
}
#commercial-gear .kit-status{ display:inline-flex; align-items:center; gap:7px; color:var(--signal,#4FE36E); }
#commercial-gear .kit-status i{
  width:7px; height:7px; border-radius:50%; background:var(--signal,#4FE36E);
  box-shadow:0 0 7px var(--signal,#4FE36E); animation:kitPulse 1.8s ease-in-out infinite;
}
@keyframes kitPulse{ 0%,100%{opacity:1} 50%{opacity:.32} }
#commercial-gear .kit-readout{ color:var(--muted,#8C8276); }
#commercial-gear .kit-tc{
  margin-left:auto; color:var(--linen,#E9D9CA);
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; letter-spacing:.12em;
}

/* slate motion bar under each panel head — sweeps on activate */
#commercial-gear .kit-phead{ position:relative; }
#commercial-gear .kit-phead::after{
  content:""; display:block; height:3px; margin-top:14px;
  background:repeating-linear-gradient(115deg, var(--rust-2,#D6362A) 0 10px, transparent 10px 20px);
  background-size:200% 100%; opacity:.5;
}
#commercial-gear .kit-panel.active .kit-phead::after{ animation:kitSlate .6s cubic-bezier(.16,.84,.44,1) both; }
@keyframes kitSlate{ from{background-position:120% 0; opacity:0} to{background-position:0 0; opacity:.5} }

@media (prefers-reduced-motion:reduce){
  #commercial-gear .kit-status i{ animation:none; }
  #commercial-gear .kit-panel.active .kit-phead::after{ animation:none; }
}
/* ============================================================
   FIX PACK 42 — "Got a story?" CTA black-and-white film background
   Mirrors the home CTA treatment: B&W slow-mo bg + scrim, type lifted above.
   Append-only / last-wins.
   ============================================================ */

.cta-band{
  position:relative; overflow:hidden;
  min-height:clamp(440px, 70vh, 780px);
  display:flex; flex-direction:column; justify-content:center; align-items:center;
}
.cta-band .film-hero-video.cta-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  filter:grayscale(1) contrast(1.05) brightness(.96);
}
.cta-band .cta-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(135% 100% at 50% 50%, rgba(11,11,11,.42), rgba(11,11,11,.88) 78%);
}
/* lift the headline + buttons above the film + scrim */
.cta-band > h2,
.cta-band > div{ position:relative; z-index:5; }
/* keep the .frame corner brackets above the film, if drawn as pseudo-elements */
.cta-band::before,
.cta-band::after{ z-index:6; }
/* ============================================================
   FIX PACK 43 — "Got a story?" director's-monitor HUD overlay
   Edge chrome only (REC + TC corners, camera-data ribbon, thirds +
   center mark). Frame brackets stay the single anchor; no focus dial.
   Sits above the scrim, below the headline. Append-only / last-wins.
   ============================================================ */

.cta-band .cta-hud{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  font-family:'Jost',sans-serif; opacity:.92;
}

/* framing guides */
.cta-band .cta-thirds{
  position:absolute; inset:34px;
  background:
   linear-gradient(90deg,transparent calc(33.33% - .5px),rgba(233,217,202,.10) 33.33%,transparent calc(33.33% + .5px)),
   linear-gradient(90deg,transparent calc(66.66% - .5px),rgba(233,217,202,.10) 66.66%,transparent calc(66.66% + .5px)),
   linear-gradient(0deg, transparent calc(33.33% - .5px),rgba(233,217,202,.10) 33.33%,transparent calc(33.33% + .5px)),
   linear-gradient(0deg, transparent calc(66.66% - .5px),rgba(233,217,202,.10) 66.66%,transparent calc(66.66% + .5px));
}
.cta-band .cta-cross{ position:absolute; left:50%; top:50%; width:18px; height:18px; transform:translate(-50%,-50%); opacity:.45; }
.cta-band .cta-cross::before,.cta-band .cta-cross::after{ content:""; position:absolute; background:rgba(233,217,202,.55); }
.cta-band .cta-cross::before{ left:50%; top:0; width:1px; height:100%; transform:translateX(-50%); }
.cta-band .cta-cross::after{ top:50%; left:0; height:1px; width:100%; transform:translateY(-50%); }

/* REC + timecode, top corners (inside the frame brackets) */
.cta-band .cta-rec,
.cta-band .cta-tc{
  position:absolute; top:34px; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  background:rgba(11,11,11,.42); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  padding:5px 9px; border-radius:3px;
}
.cta-band .cta-rec{ left:40px; display:inline-flex; align-items:center; gap:7px; color:#fff; border:1px solid rgba(214,54,42,.6); }
.cta-band .cta-rec i{ width:7px;height:7px;border-radius:50%;background:var(--rust-2,#D6362A);box-shadow:0 0 6px var(--rust-2,#D6362A); animation:ctaRec 1.1s steps(1,end) infinite; }
@keyframes ctaRec{ 0%,50%{opacity:1} 51%,100%{opacity:.15} }
.cta-band .cta-tc{ right:40px; color:var(--linen,#E9D9CA); font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; letter-spacing:.12em; }

/* camera-data ribbon, bottom-left */
.cta-band .cta-meta{
  position:absolute; left:40px; bottom:34px; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--linen,#E9D9CA); opacity:.82;
  background:rgba(11,11,11,.38); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  padding:5px 10px; border-radius:3px;
}

@media (max-width:680px){
  .cta-band .cta-thirds{ inset:18px; }
  .cta-band .cta-rec{ left:22px; } .cta-band .cta-tc{ right:22px; }
  .cta-band .cta-meta{ left:22px; bottom:22px; font-size:9px; letter-spacing:.1em; }
  .cta-band .cta-rec, .cta-band .cta-tc{ top:22px; }
}
@media (prefers-reduced-motion:reduce){ .cta-band .cta-rec i{ animation:none; } }
/* ============================================================
   FIX PACK 44 — repair CTA director-monitor HUD geometry
   The generic ".cta-band > div" lift was collapsing the HUD layer,
   so its inset never applied and the readouts bunched in the center.
   Force the HUD layer full-bleed with explicit edges (no inset shorthand)
   and re-pin each readout to its corner. Append-only / last-wins.
   ============================================================ */

.cta-band > .cta-hud{
  position:absolute !important;
  top:0 !important; right:0 !important; bottom:0 !important; left:0 !important;
  width:auto !important; height:auto !important;
  display:block !important; z-index:3 !important;
}

/* framing + readouts pinned with explicit offsets */
.cta-band .cta-hud .cta-thirds{ position:absolute; top:34px; right:34px; bottom:34px; left:34px; }
.cta-band .cta-hud .cta-cross{ position:absolute; top:50%; left:50%; }
.cta-band .cta-hud .cta-rec{ position:absolute; top:34px; left:40px; right:auto; bottom:auto; }
.cta-band .cta-hud .cta-tc{ position:absolute; top:34px; right:40px; left:auto; bottom:auto; }
.cta-band .cta-hud .cta-meta{ position:absolute; bottom:34px; left:40px; top:auto; right:auto; }

@media (max-width:680px){
  .cta-band .cta-hud .cta-thirds{ top:18px; right:18px; bottom:18px; left:18px; }
  .cta-band .cta-hud .cta-rec{ top:22px; left:22px; }
  .cta-band .cta-hud .cta-tc{ top:22px; right:22px; }
  .cta-band .cta-hud .cta-meta{ bottom:22px; left:22px; }
}
/* ============================================================
   FIX PACK 45 — CTA director-monitor HUD refinements
   Drop the framing grid + center mark, spread the camera settings
   across the bottom center, add an audio waveform under REC, and
   add two media-card chips under the timecode. Append-only / last-wins.
   ============================================================ */

/* declutter (also removed from markup; this is belt-and-suspenders) */
.cta-band .cta-hud .cta-thirds,
.cta-band .cta-hud .cta-cross{ display:none !important; }

/* audio waveform under REC (top-left) */
.cta-band .cta-hud .cta-wave{
  position:absolute; top:64px; left:40px;
  display:flex; align-items:flex-end; gap:2px; width:150px; height:20px; opacity:.7;
}
.cta-band .cta-hud .cta-wave span{
  flex:1; background:var(--linen,#E9D9CA); height:100%;
  transform:scaleY(.3); transform-origin:bottom;
  animation:ctaWave 1.1s ease-in-out infinite alternate;
}
@keyframes ctaWave{ from{transform:scaleY(.16)} to{transform:scaleY(1)} }

/* dual media cards under the timecode (top-right) */
.cta-band .cta-hud .cta-cards{
  position:absolute; top:64px; right:40px;
  display:flex; flex-direction:column; gap:6px; align-items:flex-end;
}
.cta-band .cta-hud .cta-card{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(11,11,11,.42); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  border:1px solid rgba(233,217,202,.16); border-radius:3px; padding:5px 9px;
  font-family:'Jost',sans-serif; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--linen,#E9D9CA); white-space:nowrap;
}
.cta-band .cta-hud .cta-card .ic{ position:relative; width:13px; height:16px; border:1px solid var(--signal,#4FE36E); border-radius:2px; flex:0 0 auto; }
.cta-band .cta-hud .cta-card .ic::after{ content:""; position:absolute; top:1px; right:1px; width:4px; height:4px; background:var(--signal,#4FE36E); }
.cta-band .cta-hud .cta-card b{ color:#fff; font-weight:600; }
.cta-band .cta-hud .cta-card .dur{ color:var(--signal,#4FE36E); }
.cta-band .cta-hud .cta-card .fmt{ color:var(--muted,#8C8276); }

/* camera settings spread across the bottom center */
.cta-band .cta-hud .cta-meta{
  position:absolute; left:0 !important; right:0 !important; bottom:30px; top:auto !important;
  display:flex; justify-content:center; flex-wrap:wrap; gap:clamp(18px,3vw,54px);
  background:none !important; backdrop-filter:none !important; padding:0 40px; border-radius:0;
  font-family:'Jost',sans-serif; font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--linen,#E9D9CA); opacity:.82;
}

@media (max-width:680px){
  .cta-band .cta-hud .cta-wave{ top:54px; left:22px; width:108px; }
  .cta-band .cta-hud .cta-cards{ top:54px; right:22px; }
  .cta-band .cta-hud .cta-card .fmt{ display:none; }
  .cta-band .cta-hud .cta-meta{ gap:14px; font-size:9px; letter-spacing:.12em; padding:0 18px; bottom:20px; }
}
@media (prefers-reduced-motion:reduce){
  .cta-band .cta-hud .cta-wave span{ animation:none; transform:scaleY(.5); }
}
/* ============================================================
   FIX PACK 46 — CTA luma waveform scope (bottom-left)
   Styles the panel that holds the live canvas luma scope.
   Append-only / last-wins.
   ============================================================ */

.cta-band .cta-hud .cta-scope{ position:absolute; bottom:34px; left:40px; width:220px; }
.cta-band .cta-hud .cta-scope-head{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:5px;
  font-family:'Jost',sans-serif; font-size:9px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
}
.cta-band .cta-hud .cta-scope-head .lbl{ color:var(--linen,#E9D9CA); }
.cta-band .cta-hud .cta-scope-head .ire{ color:var(--muted,#8C8276); }
.cta-band .cta-hud .cta-scope-body{
  border:1px solid rgba(233,217,202,.16);
  background:rgba(11,11,11,.55); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
}
.cta-band .cta-hud .cta-scope-cv{ display:block; width:220px; height:120px; }

@media (max-width:980px){
  .cta-band .cta-hud .cta-scope{ width:180px; }
  .cta-band .cta-hud .cta-scope-cv{ width:180px; height:100px; }
}
@media (max-width:680px){
  .cta-band .cta-hud .cta-scope{ display:none; }   /* keep mobile uncluttered */
}
/* ============================================================
   FIX PACK 47 — CTA viewfinder cleanup (adopt David's layout)
   Drop the audio meter, collapse SD cards into a compact inline row
   beside the timecode, move format into the bottom strip (dimmed group).
   Append-only / last-wins.
   ============================================================ */

/* audio meter removed from markup; hide any remnant */
.cta-band .cta-hud .cta-wave{ display:none !important; }

/* top-right status row: A | B | timecode, inline */
.cta-band .cta-hud .cta-status{
  position:absolute; top:34px; right:40px; left:auto; bottom:auto;
  display:flex; align-items:center; gap:12px;
}
.cta-band .cta-hud .cta-status .cta-tc{
  position:static !important; top:auto !important; right:auto !important;
  background:none !important; backdrop-filter:none !important; padding:0 !important; border-radius:0;
  color:var(--linen,#E9D9CA); font-family:'Jost',sans-serif; font-size:11px;
  letter-spacing:.12em; font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
}

/* compact media chips */
.cta-band .cta-hud .cta-card{
  display:inline-flex; align-items:center; gap:6px; padding:4px 8px;
  background:rgba(11,11,11,.42); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  border:1px solid rgba(233,217,202,.16); border-radius:3px;
  font-family:'Jost',sans-serif; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--linen,#E9D9CA); white-space:nowrap;
}
.cta-band .cta-hud .cta-card .ic{ position:relative; width:12px; height:15px; border:1px solid var(--signal,#4FE36E); border-radius:2px; flex:0 0 auto; }
.cta-band .cta-hud .cta-card .ic::after{ content:""; position:absolute; top:1px; right:1px; width:3px; height:3px; background:var(--signal,#4FE36E); }
.cta-band .cta-hud .cta-card b{ color:#fff; font-weight:600; }
.cta-band .cta-hud .cta-card .dur{ color:var(--signal,#4FE36E); }

/* bottom strip: format spans dimmed so they read as a separate group */
.cta-band .cta-hud .cta-meta .fmt{ color:var(--muted,#8C8276); }

@media (max-width:680px){
  .cta-band .cta-hud .cta-status{ top:22px; right:22px; gap:8px; }
  .cta-band .cta-hud .cta-meta .fmt{ display:none; }
}
/* ============================================================
   FIX PACK 47 — CTA viewfinder cleanup (adopt David's layout)
   Drop the audio meter, collapse SD cards into a compact inline row
   beside the timecode, move format into the bottom strip (dimmed group).
   Append-only / last-wins.
   ============================================================ */

/* audio meter removed from markup; hide any remnant */
.cta-band .cta-hud .cta-wave{ display:none !important; }

/* top-right status row: A | B | timecode, inline */
.cta-band .cta-hud .cta-status{
  position:absolute; top:34px; right:40px; left:auto; bottom:auto;
  display:flex; align-items:center; gap:12px;
}
.cta-band .cta-hud .cta-status .cta-tc{
  position:static !important; top:auto !important; right:auto !important;
  background:none !important; backdrop-filter:none !important; padding:0 !important; border-radius:0;
  color:var(--linen,#E9D9CA); font-family:'Jost',sans-serif; font-size:11px;
  letter-spacing:.12em; font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
}

/* compact media chips */
.cta-band .cta-hud .cta-card{
  display:inline-flex; align-items:center; gap:6px; padding:4px 8px;
  background:rgba(11,11,11,.42); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  border:1px solid rgba(233,217,202,.16); border-radius:3px;
  font-family:'Jost',sans-serif; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--linen,#E9D9CA); white-space:nowrap;
}
.cta-band .cta-hud .cta-card .ic{ position:relative; width:12px; height:15px; border:1px solid var(--signal,#4FE36E); border-radius:2px; flex:0 0 auto; }
.cta-band .cta-hud .cta-card .ic::after{ content:""; position:absolute; top:1px; right:1px; width:3px; height:3px; background:var(--signal,#4FE36E); }
.cta-band .cta-hud .cta-card b{ color:#fff; font-weight:600; }
.cta-band .cta-hud .cta-card .dur{ color:var(--signal,#4FE36E); }

/* bottom strip: format spans dimmed so they read as a separate group */
.cta-band .cta-hud .cta-meta .fmt{ color:var(--muted,#8C8276); }

@media (max-width:680px){
  .cta-band .cta-hud .cta-status{ top:22px; right:22px; gap:8px; }
  .cta-band .cta-hud .cta-meta .fmt{ display:none; }
}
/* ============================================================
   FIX PACK 48 — quiet the CTA HUD so the CTA stays the hero
   Format lines match the rest of the settings strip; the SD cards
   and timecode drop the green and go light-gray. Only rust left is
   the REC dot. Append-only / last-wins.
   ============================================================ */

/* format spans match the rest of the bottom strip */
.cta-band .cta-hud .cta-meta .fmt{ color:var(--linen,#E9D9CA) !important; }

/* SD cards + timecode -> light gray, no green */
.cta-band .cta-hud .cta-card{ color:var(--linen,#E9D9CA); border-color:rgba(233,217,202,.14); }
.cta-band .cta-hud .cta-card b{ color:var(--linen,#E9D9CA); font-weight:500; }
.cta-band .cta-hud .cta-card .dur{ color:var(--muted,#8C8276); }
.cta-band .cta-hud .cta-card .ic{ border-color:rgba(233,217,202,.4); }
.cta-band .cta-hud .cta-card .ic::after{ background:rgba(233,217,202,.55); }
.cta-band .cta-hud .cta-status .cta-tc{ color:var(--linen,#E9D9CA); }
/* ============================================================
   FIX PACK 49 — funnel hover fix + training focus-HUD + parallax base
   Append-only / last-wins.
   ============================================================ */

/* --- funnel: keep the video-type chips visible on hover ---
   (overrides whatever in styles.css is fading/collapsing them) */
.lbwm-tier:hover .lbwm-chips,
.lbwm-tier:hover .lbwm-chips .lbwm-chip,
.lbwm-tier:hover .lbwm-chip span,
.lbwm-tier:hover .lbwm-pt{ opacity:1 !important; visibility:visible !important; }
.lbwm-tier:hover .lbwm-chips{ transform:none !important; max-height:none !important; height:auto !important; }

/* --- training block: kill the grid wash, host the focus reticle --- */
.lbwm-train{ position:relative; overflow:hidden; background-image:none !important; }
.lbwm-train::before{ background-image:none !important; }
.lbwm-train > *:not(.lbwm-train-hud){ position:relative; z-index:2; }

.lbwm-train-hud{
  position:absolute; right:-150px; top:calc(50% - 210px);
  width:420px; height:420px; z-index:1; pointer-events:none; opacity:.92; will-change:transform;
}
.lbwm-train-hud .lbwm-focus{ display:block; width:100%; height:100%; }
.lbwm-train-hud .lbwm-focus-lbl{
  position:absolute; left:30px; top:50%; transform:translateY(-50%);
  font-family:'Jost',sans-serif; font-size:9px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted,#8C8276);
}

@media (max-width:880px){
  .lbwm-train-hud{ width:300px; height:300px; right:-130px; top:calc(50% - 150px); opacity:.6; }
  .lbwm-train-hud .lbwm-focus-lbl{ display:none; }
}

/* --- parallax base --- */
[data-parallax]{ will-change:transform; }
.film-hero-video.lb-parallax-cover{ transform-origin:center center; }
/* ============================================================
   FIX PACK 50 — animated Lens Focus Ring (ported from the video HUD kit)
   Replaces the static reticle in the training block. Spinning tick dial,
   rust ring on a focus-pull, center core. Scaled up + bleeds off the right.
   Append-only / last-wins.
   ============================================================ */

.lbwm-train-hud .lens-stage{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
}
.lbwm-train-hud .lens-ticks{
  width:360px; height:360px; border-radius:50%;
  background:repeating-conic-gradient(rgba(233,217,202,.55) 0deg .5deg, transparent .5deg 7.5deg);
  -webkit-mask:radial-gradient(closest-side,transparent 71%,#000 73%,#000 81%,transparent 83%);
          mask:radial-gradient(closest-side,transparent 71%,#000 73%,#000 81%,transparent 83%);
  animation:lensSpin 24s linear infinite;
}
.lbwm-train-hud .lens-ring{
  position:absolute; width:250px; height:250px; border-radius:50%;
  border:1px solid rgba(214,54,42,.7);
  animation:lensPull 4.6s ease-in-out infinite;
}
.lbwm-train-hud .lens-core{
  position:absolute; width:8px; height:8px; border-radius:50%; background:var(--rust-2,#D6362A);
}
@keyframes lensSpin{ to{ transform:rotate(360deg); } }
@keyframes lensPull{
  0%,100%{ transform:scale(1); opacity:.5; }
  44%{ transform:scale(.78); opacity:1; }
  56%{ transform:scale(.78); opacity:1; }
}

@media (max-width:880px){
  .lbwm-train-hud .lens-ticks{ width:260px; height:260px; }
  .lbwm-train-hud .lens-ring{ width:180px; height:180px; }
}
/* ============================================================
   FIX PACK 51 — training block: tuck the lens ring + kill the thirds grid
   Ring slides right so only an edge peaks in, clear of the text.
   Grid kill is lens-safe (only zeroes the section/chips, not .lens-*).
   Append-only / last-wins.
   ============================================================ */

/* lens ring just peaks past the right edge */
.lbwm-train-hud{ right:-280px !important; }
@media (max-width:880px){ .lbwm-train-hud{ right:-210px !important; } }

/* remove the thirds grid washing over the training block */
.lbwm-train{ background:none !important; }
.lbwm-train::before,
.lbwm-train::after{ background:none !important; border:0 !important; }
.lbwm-train .lbwm-chips,
.lbwm-train .lbwm-chips::before,
.lbwm-train .lbwm-chips::after{ background:none !important; }
.lbwm-train .lbwm-chips{ column-rule:0 !important; }
/* ============================================================
   FIX PACK 52 — full responsive pass for commercial-video.html
   Stacks multi-column blocks, hides/statics the decorative HUD on small
   screens, collapses the CTA monitor, kills horizontal overflow.
   (Gear, luma scope, and lens already have their own breakpoints.)
   Append-only / last-wins.
   ============================================================ */

/* no horizontal scrollbar from HUD bleeds / parallax */
html{ overflow-x:clip; }

/* ---------- TABLET  ≤1024 ---------- */
@media (max-width:1024px){
  .lbwm-siggrid{ grid-template-columns:1fr 1fr !important; }
}

/* ---------- LARGE PHONE / SMALL TABLET  ≤768 ---------- */
@media (max-width:768px){
  .lb-side-mark{ display:none !important; }                    /* free the left rail */
  #commercial-portfolio .grid3{ grid-template-columns:1fr !important; }

  /* funnel + training: stack the video-type chips one per row */
  .lbwm-tier .lbwm-chips,
  .lbwm-train .lbwm-chips{ display:grid !important; grid-template-columns:1fr !important; gap:12px !important; }

  /* stage tag drops inline instead of floating into the title */
  .lbwm-trow{ flex-wrap:wrap; row-gap:6px; }
  .lbwm-stagetag{ position:static !important; display:inline-block; margin-top:4px; }
}

/* ---------- PHONE  ≤640 ---------- */
@media (max-width:640px){
  .lbwm-siggrid{ grid-template-columns:1fr !important; }

  /* decorative lens ring off on phones */
  .lbwm-train-hud{ display:none !important; }

  /* CTA monitor: drop the media cards, keep REC + timecode + slim strip */
  .cta-band .cta-hud .cta-card{ display:none !important; }
  .cta-band .cta-hud .cta-status{ gap:0 !important; }
  .cta-band .cta-hud .cta-meta{ gap:10px !important; font-size:8.5px !important; letter-spacing:.1em !important; }
}

/* ---------- SMALL PHONE  ≤480 ---------- */
@media (max-width:480px){
  .cta-band .cta-hud .cta-meta .fmt{ display:none !important; }   /* exposure settings only */
  .cta-band > div:not(.cta-hud):not(.cta-scrim){ flex-direction:column !important; align-items:stretch !important; }
  .cta-band .btn{ width:100% !important; justify-content:center !important; }
}
/* ============================================================
   FIX PACK 53 — Brand Paths page
   Hero italic -> red, plus styling for the content components pulled
   from the old page (manifesto, provides grid, framework flow,
   card focus lists, who-thrives, process). Append-only / last-wins.
   ============================================================ */

/* hero italic -> rust */
body[data-page="brandpaths"] .hero h1 em{ color:var(--rust-2,#D6362A) !important; }
body[data-page="brandpaths"] .hero h1 em *{ color:inherit !important; }

/* shared text helpers */
.bp-lede{ font-family:'Jost',sans-serif; font-size:clamp(15px,1.5vw,18px); line-height:1.7; color:var(--linen,#E9D9CA); max-width:64ch; margin:0 0 30px; }
.bp-foot-italic{ font-family:'Newsreader',serif; font-style:italic; color:var(--muted,#8C8276); font-size:15px; line-height:1.6; max-width:72ch; margin-top:28px; }

/* manifesto */
.bp-manifesto{ max-width:62ch; }
.bp-manifesto p{ font-family:'Newsreader',serif; font-size:clamp(20px,2.6vw,30px); line-height:1.45; color:var(--ink,#F5F2EA); margin:0 0 20px; }
.bp-manifesto .bp-mfoot{ font-size:clamp(15px,1.6vw,18px); font-style:italic; color:var(--muted,#8C8276); }

/* what-a-path-provides */
.bp-provides{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px 34px; margin:6px 0; }
.bp-prov{ padding:20px 0 18px; border-top:1px solid var(--line-2,rgba(233,217,202,.16)); }
.bp-prov .bp-pn{ font-family:'Jost',sans-serif; font-size:12px; letter-spacing:.2em; color:var(--rust-2,#D6362A); }
.bp-prov b{ display:block; font-family:'Newsreader',serif; font-weight:400; font-size:22px; color:var(--ink,#F5F2EA); margin:8px 0 6px; }
.bp-prov i{ font-style:normal; font-family:'Jost',sans-serif; font-size:13.5px; line-height:1.6; color:var(--muted,#8C8276); }

/* framework flow */
.bp-flow{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line-2,rgba(233,217,202,.16)); border:1px solid var(--line-2,rgba(233,217,202,.16)); }
.bp-step{ background:var(--bg,#0B0B0B); padding:24px 22px 26px; }
.bp-step .bp-step-n{ font-family:'Jost',sans-serif; font-size:11px; letter-spacing:.24em; color:var(--rust-2,#D6362A); }
.bp-step b{ display:block; font-family:'Newsreader',serif; font-weight:400; font-size:24px; color:var(--ink,#F5F2EA); margin:8px 0 8px; }
.bp-step i{ font-style:normal; font-family:'Jost',sans-serif; font-size:13px; line-height:1.6; color:var(--muted,#8C8276); }

/* path-card focus lists */
.bp-card-list{ list-style:none; margin:14px 0 16px; padding:0; }
.bp-card-list li{ font-family:'Jost',sans-serif; font-size:13.5px; line-height:1.5; color:var(--linen,#E9D9CA);
  padding:6px 0 6px 18px; position:relative; border-top:1px solid var(--line,rgba(233,217,202,.09)); }
.bp-card-list li:first-child{ border-top:0; }
.bp-card-list li::before{ content:"\203A"; position:absolute; left:0; color:var(--rust-2,#D6362A); }

/* who-thrives */
.bp-fit{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.bp-fit-col{ padding:26px 26px 24px; border:1px solid var(--line-2,rgba(233,217,202,.16)); border-radius:12px; }
.bp-fit-h{ font-family:'Jost',sans-serif; font-size:12px; letter-spacing:.24em; text-transform:uppercase; margin-bottom:14px; }
.bp-fit-yes .bp-fit-h{ color:var(--rust-2,#D6362A); }
.bp-fit-no .bp-fit-h{ color:var(--muted,#8C8276); }
.bp-fit-col ul{ list-style:none; margin:0; padding:0; }
.bp-fit-col li{ font-family:'Jost',sans-serif; font-size:14px; line-height:1.55; color:var(--linen,#E9D9CA);
  padding:9px 0 9px 22px; position:relative; border-top:1px solid var(--line,rgba(233,217,202,.09)); }
.bp-fit-col li:first-child{ border-top:0; }
.bp-fit-yes li::before{ content:"+"; position:absolute; left:0; color:var(--rust-2,#D6362A); }
.bp-fit-no li{ color:var(--muted,#8C8276); }
.bp-fit-no li::before{ content:"\2013"; position:absolute; left:0; color:var(--muted,#8C8276); }

/* process two-col */
.bp-cols{ display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.bp-col-h{ font-family:'Newsreader',serif; font-weight:400; font-size:clamp(22px,2.4vw,30px); color:var(--ink,#F5F2EA); margin:0 0 14px; }
.bp-col p{ font-family:'Jost',sans-serif; font-size:14.5px; line-height:1.75; color:var(--muted,#8C8276); margin:0; }

@media (max-width:880px){ .bp-flow{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){
  .bp-provides{ grid-template-columns:1fr; }
  .bp-flow{ grid-template-columns:1fr; }
  .bp-fit{ grid-template-columns:1fr; }
  .bp-cols{ grid-template-columns:1fr; gap:26px; }
}
/* ============================================================
   FIX PACK 54 — Brand Paths: hero fix, motion/hover polish, growth dashboard
   Append-only / last-wins. (Entrance reveals are JS-driven in the page;
   these are the resting styles, hover states, and CSS keyframe accents.)
   ============================================================ */

/* ---------- hero ---------- */
body[data-page="brandpaths"] .bp-hero-h{ line-height:1.02; }
body[data-page="brandpaths"] .bp-hero-h .bp-hl{ display:block; }
body[data-page="brandpaths"] .bp-hero-h em{ font-style:italic; color:var(--rust-2,#D6362A); }

/* ---------- hover effects across components ---------- */
.bp-prov{ transition:transform .45s ease, border-color .45s ease; }
.bp-prov:hover{ transform:translateY(-3px); border-top-color:var(--rust-2,#D6362A); }
.bp-prov:hover b{ color:var(--rust-2,#D6362A); }

.bp-step{ transition:background .45s ease, transform .45s ease; }
.bp-step:hover{ background:#111014; transform:translateY(-2px); }
.bp-step:hover .bp-step-n{ letter-spacing:.3em; }

.bp-fit-col{ transition:border-color .45s ease, transform .45s ease; }
.bp-fit-yes:hover{ border-color:rgba(214,54,42,.5); transform:translateY(-3px); }
.bp-fit-no:hover{ border-color:var(--line-2,rgba(233,217,202,.28)); transform:translateY(-3px); }

.bp-card-list li{ transition:color .3s ease, padding-left .3s ease; }
.bp-card-list li:hover{ color:var(--ink,#F5F2EA); padding-left:22px; }

.pathcard{ transition:transform .5s ease, box-shadow .5s ease, border-color .5s ease; }
.pathcard:hover{ box-shadow:0 22px 70px rgba(0,0,0,.5); border-color:rgba(214,54,42,.4); }

.specrow{ transition:transform .4s ease; }
.specrow:hover{ transform:translateX(6px); }
.specrow:hover .n{ color:var(--rust-2,#D6362A); }

/* ---------- growth dashboard ---------- */
.bp-dash{ position:relative; background:linear-gradient(180deg,#0c0c0f,#0b0b0b);
  border:1px solid var(--line-2,rgba(233,217,202,.16)); border-radius:12px; padding:24px 26px 20px; overflow:hidden; }
.bp-dash .bp-dash-br{ position:absolute; width:16px; height:16px; border:1px solid var(--rust-2,#D6362A); opacity:.7; }
.bp-dash .bp-dash-br.tl{ top:10px; left:10px; border-right:0; border-bottom:0; }
.bp-dash .bp-dash-br.tr{ top:10px; right:10px; border-left:0; border-bottom:0; }
.bp-dash .bp-dash-br.bl{ bottom:10px; left:10px; border-right:0; border-top:0; }
.bp-dash .bp-dash-br.br{ bottom:10px; right:10px; border-left:0; border-top:0; }
.bp-dash-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.bp-dash-tag{ display:flex; align-items:center; gap:9px; font-family:'Jost',sans-serif; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--linen,#E9D9CA); }
.bp-dash-dot{ width:7px; height:7px; border-radius:50%; background:var(--rust-2,#D6362A); animation:bpBlink 1.4s ease-in-out infinite; }
.bp-dash-span{ font-family:'Jost',sans-serif; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted,#8C8276); }
.bp-dash-chart{ height:260px; }
.bp-chart{ width:100%; height:100%; display:block; }
.bp-line{ stroke-dasharray:1300; stroke-dashoffset:1300; animation:bpDraw 2.6s cubic-bezier(.16,.84,.44,1) forwards .4s; }
.bp-area{ opacity:0; animation:bpFade 1.4s ease forwards 2s; }
.bp-dots circle{ opacity:0; transform-box:fill-box; transform-origin:center; animation:bpPop .5s ease forwards; }
.bp-dots circle:nth-child(1){ animation-delay:1.1s } .bp-dots circle:nth-child(2){ animation-delay:1.35s }
.bp-dots circle:nth-child(3){ animation-delay:1.6s } .bp-dots circle:nth-child(4){ animation-delay:1.85s }
.bp-dots circle:nth-child(5){ animation-delay:2.1s }
.bp-now{ animation:bpPulse 1.7s ease-in-out infinite 2.6s; }
.bp-metrics{ display:flex; gap:38px; margin-top:16px; padding-top:16px; border-top:1px solid var(--line,rgba(233,217,202,.09)); }
.bp-metric{ display:flex; flex-direction:column; }
.bp-mval{ font-family:'Newsreader',serif; font-weight:400; font-size:clamp(22px,2.4vw,30px); color:var(--ink,#F5F2EA); font-variant-numeric:tabular-nums; }
.bp-mlbl{ font-family:'Jost',sans-serif; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted,#8C8276); margin-top:5px; }

@keyframes bpDraw{ to{ stroke-dashoffset:0; } }
@keyframes bpFade{ to{ opacity:1; } }
@keyframes bpPop{ from{ opacity:0; transform:scale(0); } to{ opacity:1; transform:scale(1); } }
@keyframes bpPulse{ 0%,100%{ r:5; opacity:1; } 50%{ r:8; opacity:.45; } }
@keyframes bpBlink{ 0%,100%{ opacity:1; } 50%{ opacity:.2; } }

@media (max-width:640px){
  .bp-dash-chart{ height:200px; }
  .bp-metrics{ gap:22px; }
}
/* ============================================================
   FIX PACK 55 — Brand Paths: three full path sections (video + detail)
   Alternating media/text, HUD-framed video with play overlay + caption.
   Append-only / last-wins.
   ============================================================ */

.bp-path{ display:flex; align-items:center; gap:clamp(28px,4vw,64px); }
.bp-path.rev{ flex-direction:row-reverse; }

.bp-pathmedia{ position:relative; flex:1 1 52%; aspect-ratio:16/9;
  background:#0c0c0f; border:1px solid var(--line-2,rgba(233,217,202,.16)); border-radius:12px; overflow:hidden; }
.bp-pathvid{ width:100%; height:100%; object-fit:cover; display:block; }

.bp-playbtn{ position:absolute; inset:0; margin:auto; width:66px; height:66px; border-radius:50%;
  border:1px solid rgba(233,217,202,.5); background:rgba(11,11,11,.4);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); cursor:pointer; transition:.4s ease; }
.bp-playbtn::before{ content:""; position:absolute; top:50%; left:54%; transform:translate(-50%,-50%);
  border-style:solid; border-width:9px 0 9px 15px; border-color:transparent transparent transparent var(--linen,#E9D9CA); }
.bp-playbtn:hover{ border-color:var(--rust-2,#D6362A); background:rgba(214,54,42,.18); }
.bp-path.is-playing .bp-playbtn{ opacity:0; pointer-events:none; }

.bp-pathmedia .bp-br{ position:absolute; width:16px; height:16px; border:1px solid var(--rust-2,#D6362A); opacity:.7; pointer-events:none; }
.bp-pathmedia .bp-br.tl{ top:12px; left:12px; border-right:0; border-bottom:0; }
.bp-pathmedia .bp-br.tr{ top:12px; right:12px; border-left:0; border-bottom:0; }
.bp-pathmedia .bp-br.bl{ bottom:12px; left:12px; border-right:0; border-top:0; }
.bp-pathmedia .bp-br.br{ bottom:12px; right:12px; border-left:0; border-top:0; }

.bp-vidcap{ position:absolute; left:18px; right:18px; bottom:16px; font-family:'Jost',sans-serif;
  font-size:12px; letter-spacing:.03em; color:var(--linen,#E9D9CA); text-shadow:0 1px 10px rgba(0,0,0,.85); transition:opacity .4s ease; }
.bp-path.is-playing .bp-vidcap{ opacity:0; }

.bp-pathtext{ flex:1 1 48%; }
.bp-pathtext .lbl{ display:block; margin-bottom:14px; }
/* PATCH: path-section headings live outside .sech, so .display never gets a
   contextual font-size and collapses — the sub-paragraph then overlaps it.
   Give them an explicit size + bottom margin so they stack cleanly. */
.bp-path .bp-pathtext h2.display{ display:block; font-size:clamp(30px,4vw,54px); line-height:1.04; margin:0 0 18px; }
.bp-pathsub{ font-family:'Jost',sans-serif; font-size:clamp(15px,1.5vw,18px); line-height:1.7;
  color:var(--linen,#E9D9CA); max-width:48ch; margin:0 0 26px; }
.bp-pathcols{ display:grid; grid-template-columns:1fr 1fr; gap:24px 32px; margin-top:clamp(40px,6vw,60px); }
.bp-pathlbl{ display:block; font-family:'Jost',sans-serif; font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--rust-2,#D6362A); margin-bottom:8px; }

@media (max-width:880px){
  .bp-path, .bp-path.rev{ flex-direction:column; align-items:stretch; }
  .bp-pathmedia{ flex-basis:auto; width:100%; }
}
@media (max-width:560px){
  .bp-pathcols{ grid-template-columns:1fr; gap:18px; }
}
/* ============================================================
   PATCH PACK — sitewide header spacing + hover-cell padding
   Append-only / last-wins.
   ============================================================ */
/* (a) Big serif section headlines (.display, line-height:.96) sit too close to
   the paragraph right under them; small inline margins let the text overlap.
   Guarantee a clear gap after any content-section heading (hero excluded). */
.frame:not(.hero) .display + p{ margin-top:clamp(26px,2.6vw,38px) !important; }

/* (b) .term hover cells (m-glow) had zero padding, so the hover border clamped
   onto the text. Add padding + radius; border is invisible until hover. */
body[data-page="rentals"] .term,
body[data-page="locations"] .term{ padding:16px 18px; border-radius:10px; border:1px solid transparent; }

/* (c) HOME film/live columns:
   - tighten the keyword band so it doesn't leave a tall gap above the columns
   - drop the band's full-width bottom rule so the only horizontal line at the
     top of the grid is the arms' own border-top, which connects to the column
     divider (fixes the disconnected line)
   - trim the arm padding so the hover panel hugs its content
   - bound the grid top+bottom and add a real gap before the campus so the
     opaque hover panel can't butt into / appear to overlap the building image */
body[data-page="home"] .lb-band-text{ padding-block:clamp(20px,3vw,40px); border-bottom:0; }
body[data-page="home"] .arms{ position:relative; z-index:1; background:var(--bg); border-bottom:1px solid var(--line); margin-bottom:clamp(44px,6vw,84px); }
body[data-page="home"] .arm{ padding-top:clamp(28px,3vw,46px); padding-bottom:clamp(28px,3vw,46px); }

/* ============================================================
   MOBILE PATCH PACK — HOME (≤760)  ·  2026-06-07
   Append-only / last-wins. Scoped to body[data-page="home"]
   where possible. Each block is independently reversible.
   ============================================================ */

/* (M1) HERO — hide the entire drone HUD on phones.
   The inline #cv-home style only hid .hud-tele; REC, timecode,
   the thirds grid and the DJI readout were still painting over
   the headline. One rule kills the whole overlay. */
@media (max-width:760px){
  body[data-page="home"] .hud-drone{ display:none !important; }
}

/* (M2) PIPELINE — the base `.pipe{grid-template-columns:repeat(5,1fr)}`
   (declared LATE in the file) was overriding the mobile @media rules,
   so the 5 steps never collapsed and ran off-screen. On phones turn the
   strip into a horizontal scroll-snap carousel (reel/timeline feel);
   each card shows ~80% width so the next one peeks = obviously swipeable. */
@media (max-width:760px){
  body[data-page="home"] .pipe{
    display:flex !important;
    grid-template-columns:none !important;
    flex-wrap:nowrap !important;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-padding-left:0;
    -webkit-overflow-scrolling:touch;
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
    scrollbar-width:none;
  }
  body[data-page="home"] .pipe::-webkit-scrollbar{ display:none; }
  body[data-page="home"] .pipe .pipestep{
    scroll-snap-align:start;
    flex:0 0 80%;
    min-width:80%;
    padding:26px 22px;
  }
}

/* (M3) ARMS (film / live event) — full structural fix.
   Root issue: the two columns hold different amounts of copy, so they
   rendered unequal — the top-border + center divider ("T-bar") looked
   broken and the CTAs sat at different vertical positions. Make each arm a
   flex column and bottom-align the CTA so both columns end on the same line,
   the divider reads full-height, and the heights look intentional. */
body[data-page="home"] .arm{ display:flex; flex-direction:column; }

/* Clean dividers (one top hairline on the strip, one vertical hairline
   between the two columns on desktop — no doubled borders). */
body[data-page="home"] .arms{ border-top:1px solid var(--line); }
body[data-page="home"] .arm{ border-left:1px solid var(--line); border-top:none; }
body[data-page="home"] .arm:first-child{ border-left:none; }

/* Desktop / tablet: push the CTA to the bottom so both arms' buttons align. */
@media (min-width:761px){
  body[data-page="home"] .arm .cta{ margin-top:auto; padding-top:18px; }
}

/* Mobile: single column — vertical divider becomes a top hairline between
   the stacked arms; CTA buttons stack full-width with a fixed gap (no
   auto-stretch gap). */
@media (max-width:760px){
  body[data-page="home"] .arm{ border-left:none; border-top:1px solid var(--line); }
  body[data-page="home"] .arm:first-child{ border-top:none; }
  body[data-page="home"] .arm .cta{
    margin-top:26px; padding-top:0;
    flex-direction:column; align-items:stretch; gap:12px;
  }
  body[data-page="home"] .arm .cta .btn{ width:100%; justify-content:center; }
}

/* Kill the sticky arm hover tint on touch so a tap doesn't leave the
   film/live panel (and the Gear List button) highlighted. */
@media (hover:none){
  body[data-page="home"] .arm:hover{ background:transparent !important; }
}

/* (M4) CAMPUS — kill the background-image parallax on phones. The JS
   --py swing (~±160px) was dragging the faint building image to the
   bottom of this tall stacked section, leaving a black void above and a
   hard edge across the photos. Pin the art to the section and cover it. */
@media (max-width:760px){
  section.campus-section::before{
    top:0 !important; bottom:0 !important; height:100% !important;
    transform:none !important;
    background-size:cover !important;
    background-position:center !important;
    filter:grayscale(100%) contrast(1.05) brightness(0.5) !important;
    opacity:0.5 !important;
  }
  section.campus-section::after{
    background:linear-gradient(180deg, rgba(11,11,11,0.45), rgba(11,11,11,0.72)) !important;
  }
}

/* (M5) AI PACKAGES — Core/Pro/Studio overlap was sticky :hover on touch:
   a tap left the 70px drop-shadow + rust border latched on, bleeding into
   the next card (the "click animation"). Neutralize hover on touch devices
   and tighten the oversized top margin that gave Core its dead space. */
@media (max-width:760px){
  .ai-section .paths{ margin-top:clamp(34px,8vw,60px) !important; }
  .ai-section .pathcard{ transform:none !important; margin:0 !important; }
}
@media (hover:none){
  .ai-section .pathcard,
  .ai-section .pathcard:hover{
    box-shadow:none !important;
    transform:none !important;
    border-color:var(--line) !important;
  }
  .ai-section .pathcard.feature,
  .ai-section .pathcard.feature:hover{ border-color:var(--rust) !important; }
}

/* (M6) CTA "Let's roll" — ROOT CAUSE (confirmed in DevTools): a PERCENTAGE
   height on an absolutely-positioned <video> will not resolve against a
   parent whose height is a clamp()/auto value — Chrome falls back to the
   video's intrinsic 16:9 height, so it sits as a strip at the top with
   black below. Fix: size the video in VIEWPORT units (vh resolves against
   the viewport, never the parent) to exactly match the section height, and
   kill the mobile parallax transform so no edge is revealed. Mobile-scoped. */
@media (max-width:760px){
  .cta-band{
    min-height:0 !important;
    height:clamp(460px, 78vh, 640px) !important;
    overflow:hidden !important;
  }
  .cta-band .cta-bg{
    position:absolute !important;
    top:0 !important; left:0 !important; right:0 !important; bottom:auto !important;
    width:100% !important;
    height:clamp(460px, 78vh, 640px) !important;   /* same vh value as the section = exact fill, no % dependency */
    object-fit:cover !important;
    transform:none !important;                       /* disable mobile parallax so cover stays flush */
  }
}

/* ============================================================
   MOBILE PATCH PACK v2 — HOME refinements  ·  2026-06-07
   Spacing/affordance follow-ups. Append-only / last-wins.
   The clamp() values are KNOBS — say "tighter"/"more room" and
   I'll dial the numbers.
   ============================================================ */

/* (M7a) ARMS — pull the film/live block UP toward the STRATEGIZE band.
   The gap was the band's bottom padding + the arm's top padding + the
   icon margin stacking up. Tighten all three on mobile. */
@media (max-width:760px){
  body[data-page="home"] .lb-band-text{ padding-block:12px !important; }
  body[data-page="home"] .arm{ padding-top:16px !important; }
  body[data-page="home"] .armicon{ margin-bottom:12px !important; }
}

/* (M7b) "Approved for … workflows" (inverse/clients) — pull the eyebrow +
   heading up (less top padding) AND open a clear gap between the heading and
   the two scrolling client marquees so they aren't crammed together. */
@media (max-width:760px){
  section.frame.inverse{
    padding-top:clamp(22px,6vw,40px) !important;
    padding-bottom:clamp(20px,5vw,34px) !important;
  }
  section.frame.inverse .display{ margin-bottom:clamp(44px,11vw,64px) !important; }
  section.frame.inverse .lb-marquee{ margin-top:clamp(10px,3vw,20px) !important; }
}

/* (M7c) WHY LBMG stats — move the block UP (less top padding) but keep a
   clear gap between the "Why LBMG" label and the first stat counter, and
   keep room below before the team grid. */
@media (max-width:760px){
  body[data-page="home"] .frame:has(> .stats-5){
    padding-top:clamp(10px,3vw,22px) !important;
    padding-bottom:clamp(40px,8vw,64px) !important;
  }
  body[data-page="home"] .frame:has(> .stats-5) .lbl{ margin-bottom:clamp(28px,7vw,44px) !important; }
  body[data-page="home"] .stats-5{ margin-top:0 !important; }
}

/* (M7d) PIPELINE CAROUSEL — fade both edges to transparent so cards appear
   to scroll INTO the dark and disappear (the "going into something" look).
   Note: an edge mask and a hard border can't coexist on one element — the
   fade erases the border at the very edge — so the fade replaces the bright
   rust lines. Keep the swipe label. (Want crisp red edge-markers ON TOP of
   the fade too? That needs a small wrapper div — say the word.) */
@media (max-width:760px){
  body[data-page="home"] .pipe{
    border-left:none !important;
    border-right:none !important;
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
            mask-image:linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  }
  body[data-page="home"] .pipewrap{ position:relative; }
  body[data-page="home"] .pipewrap > .frame::after{
    content:"\25C2  SWIPE  \25B8";              /* ◂ SWIPE ▸ */
    display:block; text-align:center; margin-top:16px;
    font-family:var(--caps); font-weight:500; font-size:10px;
    letter-spacing:.28em; text-transform:uppercase; color:var(--rust-2);
    opacity:.85;
  }
}

/* (M7e) ARM HOVER — the grey panel tint on hover (var(--bg-2)) was washing
   the area behind the buttons grey. Drop it on the home arms entirely; the
   buttons keep their own rust/ink hover states. */
body[data-page="home"] .arm:hover{ background:transparent !important; }

/* (M7f) "Move the header text up" — the eyebrow row (.rowtop, e.g. TRUSTED
   BY · CLIENTS) had a fixed 46px bottom margin that pushed every section
   heading down. Tighten it on mobile so headings sit up under their eyebrow,
   and pull the inverse ("Approved for…") section up a touch more. KNOB. */
@media (max-width:760px){
  body[data-page="home"] .rowtop{ margin-bottom:clamp(16px,4vw,26px) !important; }
  section.frame.inverse{ padding-top:clamp(26px,6vw,44px) !important; }
}

/* ============================================================
   COMMERCIAL-VIDEO mobile fix  ·  2026-06-07
   The rule at ~2561 sets `.film-hero-video, .film-hero-scrim { display:none }`
   on mobile to drop the hero film for a static poster. Problem: (1) you want
   the hero film PLAYING + the headline side darkened on mobile, and (2) the
   "Got a story?" CTA video also carries .film-hero-video, so that same rule
   was hiding the CTA video → the black box. Un-hide all three and give the
   hero a mobile-appropriate scrim. Append-only / last-wins.
   ============================================================ */
@media (max-width:760px){
  /* show the hero film + scrim on ANY page that uses them (commercial,
     corporate, …), and the CTA film (shares .film-hero-video). */
  section.hero .film-hero-video,
  section.hero .film-hero-scrim,
  .film-hero-video.cta-bg{ display:block !important; }

  /* hero scrim re-tuned for a single-column phone layout: darken the left
     (headline is left-aligned) AND the bottom (sub sits low) so the light
     text reads cleanly over the moving footage. */
  section.hero .film-hero-scrim{
    background:
      linear-gradient(90deg, rgba(11,11,11,0.92) 0%, rgba(11,11,11,0.70) 52%, rgba(11,11,11,0.42) 100%),
      linear-gradient(180deg, rgba(11,11,11,0.15) 0%, rgba(11,11,11,0.50) 55%, rgba(11,11,11,0.85) 100%) !important;
  }

  /* commercial only: the video now plays, so drop the duplicate static-poster
     background (it ghosted through the semi-transparent video). */
  body[data-page="commercial"] section.hero.lb-hero-grid{
    background-image:none !important;
    background:var(--bg) !important;
  }
}

/* ============================================================
   AI page mobile stacking  ·  2026-06-07
   Base .paths{repeat(3)} (L308) and .diffgrid{repeat(4)} (L421) sit LATER in
   source than the ≤760 stack rule (L264), so they win at phone widths and the
   tiers + ownership cards stay crammed side-by-side (one word per line). The
   existing .ai-section overrides never fire — those sections carry no
   .ai-section class. Scope to the real page flag instead. Append / last-wins.
   ============================================================ */
@media (max-width:760px){
  body[data-page="ai"] .paths{ grid-template-columns:1fr !important; gap:0 !important; }
  body[data-page="ai"] .pathcard{ margin:0 0 18px !important; transform:none !important; padding:28px 24px !important; }
  body[data-page="ai"] .paths .pathcard:last-child{ margin-bottom:0 !important; }
  body[data-page="ai"] .diffgrid{ grid-template-columns:1fr !important; }
}

/* ============================================================
   BRAND SWITCHER  ·  2026-06-07
   Same-tab hop between the two LaunchBox sites (mirrors the
   shinewithnatasha / withshinestudio tab pattern). Sits above the sticky
   header; scrolls away on scroll. Matching bar lives on the Wix (Collective)
   side too so the two feel like tabs of one property. Normal links (no
   target=_blank) so navigation stays in the same browser tab.
   ============================================================ */
.lb-switch{ display:flex; align-items:stretch; gap:6px; background:#080808; border-bottom:1px solid var(--line); padding:4px clamp(10px,4vw,36px) 0; }
.lb-switch-tab{ position:relative; display:inline-flex; align-items:center; padding:10px 18px; font-family:var(--caps); font-weight:300; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); text-decoration:none; white-space:nowrap; border-radius:6px 6px 0 0; transition:color .2s ease, background .2s ease; }
.lb-switch-tab:hover{ background:rgba(255,255,255,.05); color:var(--ink); }
/* current site = you are here */
.lb-switch-tab.active{ color:var(--ink); }
.lb-switch-tab.active::after{ content:''; position:absolute; left:18px; right:18px; bottom:-1px; height:2px; background:var(--rust-2); }
/* the other site = invite the click */
.lb-switch-tab:not(.active){ background:rgba(255,255,255,.04); }
.lb-switch-tab:not(.active)::after{ content:'→'; margin-left:9px; color:var(--rust-2); display:inline-block; transition:transform .2s ease; }
.lb-switch-tab:not(.active):hover{ background:rgba(214,54,42,.12); }
.lb-switch-tab:not(.active):hover::after{ transform:translateX(3px); }
@media (max-width:480px){
  .lb-switch{ padding:3px 8px 0; }
  .lb-switch-tab{ padding:8px 11px; font-size:9.5px; letter-spacing:.12em; }
  .lb-switch-tab.active::after{ left:11px; right:11px; }
  .lb-switch-tab:not(.active)::after{ margin-left:6px; }
}
/* mobile: drop the "LaunchBox" word from the switcher tabs (the logo says it) so
   "MEDIA GROUP" / "COLLECTIVE" fit without running off-screen. Matches the Wix side. */
@media (max-width:600px){
  .lb-switch{ padding:3px 10px 0; }
  .lb-switch .lbsw-pfx{ display:none; }
}

/* ============================================================
   HERO VIDEO — single source of truth (June 2026)
   Resolves the stacked .herovideo overrides and the banding.
   Banding was caused by brightness(0.45) crushing dark 8-bit
   video into too few levels. Darkening now lives in the scrim,
   not the brightness filter, so the gradient stays smooth.
   ============================================================ */
.herovideo{
  position:absolute !important; inset:0 !important;
  transform:none !important;            /* kill the parallax shift that slid the video up and exposed the grey strip */
  overflow:hidden !important;
}
.herovideo > video.hero-bg-video,
.herovideo video.hero-bg-video{
  display:block !important;
  position:absolute !important; inset:0 !important;
  width:100% !important; height:100% !important;
  object-fit:cover !important; object-position:center center !important;
  opacity:1 !important;
  filter:grayscale(100%) contrast(1.0) brightness(0.85) !important;
}
.herovideo .scrim{
  z-index:6 !important;
  background:linear-gradient(90deg,#0B0B0B 0%, rgba(11,11,11,0.8) 34%, rgba(11,11,11,0.32) 66%, rgba(11,11,11,0.04) 100%) !important;
}

/* HERO container lock — overrides the leftover top:-10%/bottom:-10% parallax buffer
   (parallax is removed from the hero in script.js) so the video fills the section
   exactly, top to bottom, with no exposed strip. Highest-specificity, last word. */
body[data-page="home"] section.hero.lb-hero-grid .herovideo{
  top:0 !important; right:0 !important; bottom:0 !important; left:0 !important;
  height:100% !important; transform:none !important;
}