.studios-content-main .button {
    background-color: #CD1B32;
    }
       .studios-content-main .button:hover {
    background-color: #444;
    }
      .BG_image{
      background-size: cover;
      background-repeat: no-repeat;
      background-position: 50% 50%;
    }

    .margin-center{
      margin:auto;
    }

    /* Image fill helpers. The wireframe preview injects these (see render.js
       gridCss); they must also ship in the export, or .bb-live collapses to
       height:0 in admin because nothing positions it to fill .bb-imgwrap. */
    .bb-imgwrap{position:relative;overflow:hidden;}
    .bb-imgwrap > .bb-live{position:absolute;top:0;right:0;bottom:0;left:0;}

       @media screen and (max-width: 768px){

      }
      /* Sticky SINGLE sided — ask / deliver */
    .mod_article-askDeliver {
      --ad-ink:    #0E1012;
      --ad-paper:  #EDEAE3;
      --ad-ask:    #8C949C;
      --ad-signal: #cd1b32;
      --ad-rule:   rgba(237,234,227,.13);
      --ad-ghost:  rgba(237,234,227,.055);

      --ad-fDisplay: "Archivo", "Helvetica Neue", Arial, sans-serif;
      --ad-fBody:    "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
      --ad-fVoice:   "Newsreader", Georgia, "Times New Roman", serif;

      /* the two knobs */
      --ad-stickyTop: 7vh;   /* how far down the panel pins */
      --ad-beatGap:  .24s;   /* pause between the ask and the answer */

      background-color: var(--ad-ink);
      color: var(--ad-paper);
      font-family: var(--ad-fBody);
    }

    .mod_article-askDeliver .row {
      display: flex;
      min-height: 100vh;
      align-items: flex-start;
      overflow: visible; /* any clipping here kills position:sticky silently */
    }

    .mod_article-askDeliver .sticky {
      position: -webkit-sticky;
      position: sticky;
      top: var(--ad-stickyTop);
      padding: 0;
      z-index: 1;
    }

    .mod_article-askDeliver .sticky-items {
      background-color: transparent;
      padding: 3.5em 2em 3.5em ;
      width: 100%;
    }

    .mod_article-askDeliver .not-sticky {
      padding: 0;
      z-index: 10;
    }

    /* ---- CMS fields emit their own tags, so style the wrapper
           and let every child inherit ---- */
    .mod_article-askDeliver .eyebrow,
    .mod_article-askDeliver .stickyCopy,
    .mod_article-askDeliver .attribution,
    .mod_article-askDeliver .lede,
    .mod_article-askDeliver .ask-copy,
    .mod_article-askDeliver .deliver-title,
    .mod_article-askDeliver .deliver-copy {
      margin: 0;
    }
    .mod_article-askDeliver .eyebrow > *,
    .mod_article-askDeliver .stickyCopy > *,
    .mod_article-askDeliver .attribution > *,
    .mod_article-askDeliver .lede > *,
    .mod_article-askDeliver .ask-copy > *,
    .mod_article-askDeliver .deliver-title > *,
    .mod_article-askDeliver .deliver-copy > * {
      /*font: inherit;*/
      color: inherit;
      letter-spacing: inherit;
      text-transform: inherit;
      margin: 0;
    }

    /* ---- sticky panel ---- */
    .mod_article-askDeliver .eyebrow {
      font-family: var(--ad-fDisplay);
      font-weight: 700;
      font-size: clamp(26px, 3.2vw, 44px);
      line-height: 1.08;
      letter-spacing: -.02em;
      text-wrap: balance;
      margin-bottom: 24px;
    }
    .mod_article-askDeliver .eyebrow em,
    .mod_article-askDeliver .eyebrow strong {
      font-style: normal;
      color: var(--ad-signal);
    }

    .mod_article-askDeliver .stickyCopy {
      font-family: var(--ad-fVoice);
      font-style: italic;
      font-weight: 300;
      font-size: clamp(17px, 1.5vw, 21px);
      line-height: 1.55;
      max-width: 34ch;
      margin-bottom: 14px;
      padding-left: 18px;
      border-left: 2px solid var(--ad-signal);
    }

    .mod_article-askDeliver .attribution {
      font-size: 12px;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--ad-ask);
      margin-bottom: 36px;
      padding-left: 20px;
    }

    .mod_article-askDeliver .lede {
      font-size: 17px;
      line-height: 1.6;
      color: var(--ad-ask);
      max-width: 32ch;
      margin-bottom: 32px;
    }

    /* ---- progress ticks ---- */
    .mod_article-askDeliver .ticks {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .mod_article-askDeliver .tick {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 7px 0;
      font-family: var(--ad-fDisplay);
      font-weight: 600;
      font-size: 11px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--ad-ask);
      opacity: .5;
      font-variant-numeric: tabular-nums;
      transition: opacity .35s ease, color .35s ease;
    }
    .mod_article-askDeliver .tick::before {
      content: "";
      flex: none;
      width: 22px;
      height: 2px;
      background: currentColor;
      transition: width .35s cubic-bezier(.2,.7,.2,1), background .35s ease;
    }
    .mod_article-askDeliver .tick .tick-num { margin-right: -6px; }
    .mod_article-askDeliver .tick.is-on { opacity: 1; color: var(--ad-paper); }
    .mod_article-askDeliver .tick.is-on::before { width: 44px; background: var(--ad-signal); }

    /* ---- scroll items ---- */
    .mod_article-askDeliver .scroll-items { padding: 0; }

    .mod_article-askDeliver .ask-item {
      position: relative;
      min-height: 58vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 40px 0;
      border-top: 1px solid var(--ad-rule);
      min-width: 0;
    }
    .mod_article-askDeliver .ask-item:first-child { border-top: 0; }

    .mod_article-askDeliver .ask-num {
      position: absolute;
      top: 24px;
      right: 0;
      font-family: var(--ad-fDisplay);
      font-weight: 800;
      font-size: clamp(64px, 9vw, 128px);
      line-height: 1;
      letter-spacing: -.04em;
      color: var(--ad-ghost);
      font-variant-numeric: tabular-nums;
      pointer-events: none;
    }

    /* beat one — the ask, in the customer's voice */
    .mod_article-askDeliver .ask-body { max-width: 47ch; margin-bottom: 28px; }
    .mod_article-askDeliver .ask-label {
      display: block;
      font-family: var(--ad-fDisplay);
      font-weight: 700;
      font-size: 14px;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--ad-ask);
      opacity: .65;
      margin-bottom: 12px;
    }
    .mod_article-askDeliver .ask-copy {
      font-family: var(--ad-fVoice);
      font-style: italic;
      font-weight: 400;
      font-size: clamp(19px, 2.1vw, 27px);
      line-height: 1.4;
      color: var(--ad-ask);
      text-wrap: balance;
    }

    /* beat two — what shipped */
    .mod_article-askDeliver .deliver-body { max-width: 47ch; }
    .mod_article-askDeliver .deliver-label {
      display: flex;
      align-items: center;
      gap: 10px;
      font-family: var(--ad-fDisplay);
      font-weight: 700;
      font-size: 14px;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--ad-signal);
      margin-bottom: 12px;
    }
    .mod_article-askDeliver .deliver-label::before {
      content: "";
      flex: none;
      width: 28px;
      height: 2px;
      background: var(--ad-signal);
    }
    .mod_article-askDeliver .deliver-title {
      font-family: var(--ad-fDisplay);
      font-weight: 800;
      font-size: clamp(23px, 2.9vw, 38px);
      line-height: 1.1;
      letter-spacing: -.015em;
      text-transform: uppercase;
      margin-bottom: 12px;
      text-wrap: balance;
    }
    .mod_article-askDeliver .deliver-copy {
      font-size: clamp(15px, 1.3vw, 17px);
      line-height: 1.55;
      color: var(--ad-ask);
    }
      .mod_article-askDeliver.is-tradeoff .deliver-copy {
    font-size: clamp(22px, 1.9vw, 26px);
    line-height: 1.45;
        color: rgb(237, 234, 227);
  font-weight: 800;
  }

    /* ---- reveal ----
       JS adds .is-armed only to items below the fold, so nothing
       sits at opacity 0 waiting for a scroll that may not come. */
    .mod_article-askDeliver .ask-item.is-armed .ask-body,
    .mod_article-askDeliver .ask-item.is-armed .deliver-body {
      opacity: 0;
      transform: translateY(22px);
      transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);
    }
    .mod_article-askDeliver .ask-item.is-armed.is-in .ask-body {
      opacity: 1;
      transform: none;
    }
    .mod_article-askDeliver .ask-item.is-armed.is-in .deliver-body {
      opacity: 1;
      transform: none;
      transition-delay: var(--ad-beatGap);
    }

    @media (prefers-reduced-motion: reduce) {
      .mod_article-askDeliver .ask-item .ask-body,
      .mod_article-askDeliver .ask-item .deliver-body {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
      }
      .mod_article-askDeliver .tick,
      .mod_article-askDeliver .tick::before { transition: none; }
    }

    @media screen and (max-width: 767px) {
      .mod_article-askDeliver .row { min-height: auto; }
      .mod_article-askDeliver .sticky {
        top: 0 !important;
        position: relative !important;
        max-height: none !important;
        min-height: auto;
      }
      .mod_article-askDeliver .sticky-items { padding: 3em 2em 1em; }
      .mod_article-askDeliver .not-sticky { padding: 0 0 3em; }
      .mod_article-askDeliver .eyebrow { margin-bottom: 18px; }
      .mod_article-askDeliver .lede { margin-bottom: 22px; }
      .mod_article-askDeliver .ticks {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px 16px;
      }
      .mod_article-askDeliver .tick { font-size: 10px; }
      .mod_article-askDeliver .tick::before { width: 14px; }
      .mod_article-askDeliver .tick.is-on::before { width: 24px; }
      .mod_article-askDeliver .ask-item { min-height: 0; padding: 34px 0; }
      .mod_article-askDeliver .ask-num { font-size: 56px; top: 14px; }
      .mod_article-askDeliver .ask-body { max-width: 47ch; margin-bottom: 22px; }
    }
    /*end sticky*/

    @media screen and (max-width: 767px) {
      .mobile{
        display:block!important;
      }
      .desktop{
        display:none!important;
      }

      .logoImg{
        width:250px!important;
        margin-bottom: 5%!important;
    }
    }
   .logoImg{
     width: 350px;
     margin-bottom: 3%;
     top: 1.5em;
     left: 1.5em;
     z-index: 3;

           }
    .desktop{
      display:block;
    }
    .mobile{
      display:none;
    }

  .box h3{
  margin: 0 0 0rem 0;
  }
  .box{
  padding:4%;
    background-color:#1e2023;
    color:#fff;
    border-left:solid 5px #cd2033;
  }
   @media screen and (max-width: 767px) {
      .addBox{
  padding:4%;
    background-color:#1e2023;
    color:#fff;
    border-left:solid 5px #cd2033;
      }

   }
      .box2{
  padding:4%;
    background-color:#1e2023;
    color:#fff;
  }
      /* ===== Red glow: base (rises from the bottom) ===== */
  .red-glow {
    --glow-height: 70%;     /* how far up the sides it rises */
    --glow-spread: 120px;   /* how far it billows out past the box */
    --glow-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='400' preserveAspectRatio='none'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.018 0.006' numOctaves='4' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  1.7 0 0 0 -0.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
    position: relative;      /* note: no z-index here */
  }

  .red-glow::before {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    left: calc(var(--glow-spread) * -1);
    right: calc(var(--glow-spread) * -1);
    bottom: -40px;
    height: calc(var(--glow-height) + 40px);
    background:
      radial-gradient(ellipse calc(var(--glow-spread) * 1.2) 100% at var(--glow-spread) 92%,
        rgba(255,35,35,.95), rgba(190,10,15,.6) 40%, transparent 72%),
      radial-gradient(ellipse calc(var(--glow-spread) * 1.2) 100% at calc(100% - var(--glow-spread)) 92%,
        rgba(255,35,35,.95), rgba(190,10,15,.6) 40%, transparent 72%),
      radial-gradient(ellipse 60% 45% at 50% 100%,
        rgba(255,40,40,.9), rgba(170,8,12,.5) 50%, transparent 80%);
    -webkit-mask-image: var(--glow-noise), linear-gradient(to top, transparent, #000 14%, #000 40%, transparent);
    -webkit-mask-size: 100% 100%;
    -webkit-mask-composite: source-in;
    mask-image: var(--glow-noise), linear-gradient(to top, transparent, #000 14%, #000 40%, transparent);
    mask-size: 100% 100%;
    mask-composite: intersect;
    filter: blur(7px);
  }

  /* bright edge line where the box meets the glow */
  .red-glow::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 3%; right: 3%; bottom: -3px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, transparent, rgba(255,70,70,.95) 20%, rgba(255,70,70,.95) 80%, transparent);
    box-shadow: 0 0 18px 4px rgba(230,20,25,.55);
  }

  /* put this on the section/row that contains the box */
  .red-glow-host { isolation: isolate; }

      .titleShadow{
      text-shadow: 3px 3px 1px #000;
      }

  .shadow{
    box-shadow: 1px 9px 18px rgba(0,0,0,.6);
  }