/* ============================================================
   Mobile first-class pass — mirrors pega.com below 1024px:
   a single 50px white header bar with a burger, a full-screen
   slide-in drawer, 30px page gutters, a stacked hero with the
   artwork on top, tabs collapsed behind "More", and accordion
   footer columns.
   ============================================================ */

/* pega.com renders its mobile hero with a flat 99.2px side padding — a quirk of
   the u-bolt-padding-*-xlarge classes never shrinking below desktop. On a tablet
   that reads as generous; on a 390px phone it eats half the screen, leaving the
   artwork 200px wide and the headline broken over five lines. So the clone keeps
   pega's figure as the ceiling and lets it fall to the site's own 30px gutter. */
:root{
  --hero-pad-mobile:clamp(30px,8vw,99.2px);
}

/* ---------------- pieces that only exist on mobile ---------------- */
.drawer-extra,
.drawer-cta{display:none;}
.burger__x{display:none;}
.burger__bars{display:block;}
.burger__bars span{display:block;height:2px;width:20px;background:var(--navy);margin:5px 0;border-radius:2px;}

.tabs__more{display:none;position:relative;}
.tabs__more-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:none;border:0;color:#fff;cursor:pointer;
  font-size:16px;padding:10px 14px;
}
.tabs__more-btn::after{
  content:"";width:7px;height:7px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
}
.tabs__dropdown{
  position:absolute;right:0;top:100%;z-index:4;
  min-width:200px;background:#fff;
  box-shadow:0 12px 24px -10px rgba(0,0,0,.45);
  padding:6px 0;display:none;
}
.tabs__more.is-open .tabs__dropdown{display:block;}
.tabs__dropdown button{
  display:block;width:100%;text-align:left;
  background:none;border:0;cursor:pointer;
  font-size:16px;line-height:1.35;color:var(--navy);
  padding:14px 18px;
}
.tabs__dropdown button:hover{background:var(--grey-100);}

.site-footer__acc-head{margin:0;}
.site-footer__acc{
  background:none;border:0;padding:0;cursor:default;
  font:inherit;font-size:15px;font-weight:700;color:var(--navy);
  text-align:left;
}

/* ---------------- large laptops ---------------- */
@media (max-width:1180px){
  .main-nav__list{gap:16px;}
  .main-nav__trigger{font-size:13.6px;}
  .hero h1,.hero__title,.cta__title{font-size:52px;}
}

/* ======================= MOBILE / TABLET ======================= */
@media (max-width:1024px){

  /* ---- header: one 50px bar ---- */
  .utility-bar{display:none;}                 /* folds into the drawer */
  .site-header{box-shadow:0 1px 0 rgba(0,31,95,.12);}
  .site-header__inner{
    width:100%;max-width:none;
    padding:0 6px 0 18px;
    height:50px;gap:0;
  }
  .site-header__logo img{width:137px;}
  .site-header__actions{gap:0;}
  .site-header__actions .btn{display:none;}   /* the CTA lives in the drawer */
  .icon-btn{width:44px;height:44px;border-radius:4px;}
  .icon-btn svg{width:23px;height:23px;stroke-width:1.7;}

  .burger{
    display:flex;align-items:center;justify-content:center;
    width:44px;height:44px;padding:0;border-radius:4px;
  }
  .burger__x{width:24px;height:24px;fill:none;stroke:var(--navy);stroke-width:1.8;stroke-linecap:round;}
  .burger[aria-expanded="true"]{outline:2px solid var(--blue);outline-offset:-2px;}
  .burger[aria-expanded="true"] .burger__bars{display:none;}
  .burger[aria-expanded="true"] .burger__x{display:block;}

  /* ---- full-screen slide-in drawer ---- */
  .main-nav{
    position:fixed;left:0;right:0;top:50px;bottom:0;
    display:block;
    background:#EDEFF2;
    border-top:0;box-shadow:none;
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    transform:translateX(100%);
    transition:transform .28s var(--ease);
    padding-bottom:60px;
    z-index:70;
  }
  .main-nav.is-open{transform:none;}
  body.nav-open{overflow:hidden;}

  .main-nav__list{
    flex-direction:column;align-items:stretch;gap:0;
    padding:0;background:#fff;
  }
  .main-nav__item{position:relative;border-bottom:1px solid #E3E6EC;}
  .main-nav__trigger{
    display:flex;align-items:center;justify-content:space-between;
    width:100%;text-align:left;
    font-size:18px;font-weight:600;color:#1f2330;
    padding:19px 20px;border-bottom:0;
  }
  .main-nav__trigger::after{
    content:"";position:static;
    width:9px;height:9px;flex:none;
    border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);
    background:none;transform:rotate(-45deg);
    transition:transform .2s var(--ease);
  }
  .main-nav__item.is-open .main-nav__trigger::after{transform:rotate(45deg);}

  .mega{
    position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border-top:0;display:none;background:#F7F8FA;
  }
  .main-nav__item.is-open .mega{display:block;}
  .mega__inner,.mega__inner--wide{
    grid-template-columns:1fr;width:100%;max-width:none;
    padding:0;gap:0;
  }
  .mega__link{
    padding:15px 20px 15px 34px;font-size:16px;
    border-bottom:1px solid #E3E6EC;
  }
  .mega__link:last-child{border-bottom:0;}

  .drawer-extra{display:block;}
  .drawer-extra__group{background:#fff;margin-top:9px;}
  .drawer-row{
    display:flex;align-items:center;gap:12px;
    padding:19px 20px;
    font-size:18px;font-weight:600;color:#1f2330;
    border-bottom:1px solid #E3E6EC;
  }
  .drawer-row:last-child{border-bottom:0;}
  .drawer-row:hover{text-decoration:none;color:var(--blue);}
  .drawer-row::after{
    content:"";margin-left:auto;
    width:9px;height:9px;
    border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);
    transform:rotate(-45deg);
  }
  .drawer-row__icon{width:22px;height:22px;fill:none;stroke:var(--navy);stroke-width:1.6;}
  .drawer-row__icon--fill{fill:var(--navy);stroke:none;}
  .grid-icon--dark{grid-template-columns:repeat(3,4px);gap:2px;}
  .grid-icon--dark i{background:var(--navy);width:4px;height:4px;}

  .drawer-cta{
    display:flex;align-items:center;justify-content:center;
    position:fixed;left:0;right:0;bottom:0;height:52px;
    background:var(--blue);color:#fff;
    font-size:16px;font-weight:600;
  }
  .drawer-cta:hover{text-decoration:none;background:#2f52a0;}

  .header-search{padding:16px 0;}
  .header-search .container{width:100%;padding:0 18px;}

  /* ---- 30px page gutters, like the live site ---- */
  .container{width:100%;max-width:none;padding:0 30px;}

  /* ---- hero: artwork on top, then headline, copy, stacked buttons ---- */
  .hero__inner{padding:0;width:100%;}
  .hero__slide.is-active{
    grid-template-columns:1fr;gap:0;min-height:0;
    padding:clamp(56px,12vw,120px) var(--hero-pad-mobile) 72px;
  }
  .hero__copy{max-width:none;}
  .hero__media{order:-1;margin-bottom:26px;}
  .hero__media img{width:auto;max-width:100%;margin:0 auto;border-radius:14px;}
  .hero h1,.hero__title{font-size:41.6px;line-height:49.92px;margin-bottom:21.6px;}
  .hero__copy p{font-size:17px;max-width:none;}
  .hero .btn-row{flex-direction:column;align-items:flex-start;gap:10px;margin-top:24px;}
  .hero .btn{font-size:12.6px;padding:8.45px 21.7px;}
  .hero__dots{margin-top:0;padding-bottom:20px;}

  /* ---- sections ---- */
  .logos{padding:54px 0 48px;}
  .logos__title{font-size:28px;line-height:1.3;margin-bottom:26px;}
  .logos__viewport::before,.logos__viewport::after{width:40px;}

  .paths{padding:56px 0 64px;}
  .paths .section-title{margin-bottom:40px;}
  .paths__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 40px;}

  .blueprint{padding:92px 0 104px;}
  .blueprint .section-title{margin-bottom:34px;}
  .tabs__nav{justify-content:center;gap:0;margin-bottom:0;flex-wrap:nowrap;}
  .tabs__btn{display:none;}
  .tabs__btn.is-active{display:inline-flex;background:none;padding:10px 14px;}
  .tabs__more{display:flex;}
  .tabs__panel.is-active{grid-template-columns:1fr;padding:40px 25px;gap:30px;border-radius:18px;}
  .tabs__copy h3{font-size:28px;}
  .tabs__copy p{font-size:16px;}
  .reinvention{grid-template-columns:1fr;gap:30px;margin-top:78px;}
  .reinvention__logo{width:190px;}
  .reinvention__copy h3{font-size:26px;}

  .analysts{padding:54px 0 60px;}
  .analysts__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;}

  .quotes{padding:70px 0 82px;}
  .quotes__grid{grid-template-columns:1fr;gap:58px;}
  /* live mobile card: full-bleed 16:9 media, body text inset 25px */
  .quote-card__media{border-radius:0;margin-bottom:20px;}
  .quote-card__media img{aspect-ratio:16/9;object-fit:cover;width:100%;}
  .quote-card blockquote,
  .quote-card__name,
  .quote-card__role{padding:0 25px;}
  .quote-card__logo{margin-left:25px;max-height:37px;}

  .next-steps{padding:72px 0 84px;}
  .next-steps__grid{grid-template-columns:1fr;gap:40px;}
  .teaser__body{padding:25px 25px 32px;}
  .teaser__body h3{font-size:20px;}
  .teaser__body p{font-size:14px;line-height:1.55;}

  .cta{padding:112px 0 120px;}
  .cta__title{font-size:41.6px;line-height:49.92px;}
  .cta .btn-row{gap:12px;}

  /* ---- footer: accordion columns ---- */
  .site-footer{padding:34px 0 30px;}
  .site-footer__top{grid-template-columns:1fr;gap:0;}
  .site-footer__about{margin-bottom:22px;}
  .site-footer__about p{max-width:none;}
  .site-footer__col{border-top:1px solid var(--grey-200);}
  .site-footer__col:last-of-type{border-bottom:1px solid var(--grey-200);}
  .site-footer__acc{
    display:flex;align-items:center;justify-content:space-between;
    width:100%;cursor:pointer;
    padding:13px 0;font-size:16px;
  }
  .site-footer__acc::after{
    content:"";width:9px;height:9px;flex:none;
    border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);
    transform:rotate(45deg) translateY(-2px);
    transition:transform .2s var(--ease);
  }
  .site-footer__acc[aria-expanded="true"]::after{transform:rotate(-135deg) translateY(2px);}
  .site-footer__col ul{display:none;padding-bottom:12px;}
  .site-footer__col.is-open ul{display:block;}
  .site-footer__col ul li{margin-bottom:12px;}
  .site-footer__col a{font-size:15px;}
  .site-footer__langs,.site-footer__legal{border-top:0;margin-top:18px;padding-top:0;}
}

/* ---------------- phones ---------------- */
@media (max-width:640px){
  .paths__grid{grid-template-columns:1fr;gap:48px;}
  .analysts__grid{grid-template-columns:1fr;gap:20px;}
  .logos__item{width:150px;padding:0 22px;}
  .section-title{font-size:37.6px;line-height:45.12px;}
}

@media (max-width:380px){
  .hero h1,.hero__title,.cta__title{font-size:36px;line-height:42px;}
  .section-title{font-size:32px;line-height:38px;}
}