/* =====================================================================
   The responsive layer. The design mockups were drawn at 1440px only; this file carries them down to a phone.
   Loaded last, and every rule is scoped to .r2.m so it outranks the design layers without !important.
   Breakpoints: 1280 (narrow desktop), 1100 (menu collapses), 900 (tablet: grids stack), 600 (phone).
   ===================================================================== */

/* ---------------------------------------------------------------- menu button, hidden on desktop */
.r2.m .nav-toggle { all: unset; box-sizing: border-box; cursor: pointer; width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .35); place-items: center; color: #fff; }
.r2.m .nav-toggle i, .r2.m .nav-toggle i::before, .r2.m .nav-toggle i::after { display: block; width: 18px; height: 2px; border-radius: 2px;
  background: currentColor; transition: transform .25s var(--ease), opacity .2s; }
.r2.m .nav-toggle i { position: relative; }
.r2.m .nav-toggle i::before, .r2.m .nav-toggle i::after { content: ''; position: absolute; left: 0; }
.r2.m .nav-toggle i::before { transform: translateY(-6px); }
.r2.m .nav-toggle i::after { transform: translateY(6px); }
.r2.m .nav-open .nav-toggle i { background: transparent; }
.r2.m .nav-open .nav-toggle i::before { background: #fff; transform: rotate(45deg); }
.r2.m .nav-open .nav-toggle i::after { background: #fff; transform: rotate(-45deg); }
.r2.m .nav-toggle:focus-visible { outline: 2px solid #8CC4F8; outline-offset: 2px; }
.r2.m .nav-toggle { display: none; }
html.nav-lock { overflow: hidden; }

/* ---------------------------------------------------------------- 1280 */
@media (max-width: 1280px) {
  .r2.m { --gutter: 48px; --fs-page: 72px; --fs-section: 52px; }
  .r2.m .main-nav { gap: 18px; }
  .r2.m .head-row { gap: 28px; }
  .r2.m .hero-r4 .h-display { font-size: 84px; }
  .r2.m .sw-panel { grid-template-columns: 340px minmax(0, 1fr); }
  .r2.m .sw-stage .pc-note-a, .r2.m .ts-stage .pc-note-a { left: 18px; width: 220px; }
  .r2.m .sw-stage .pc-note-b, .r2.m .ts-stage .pc-note-b { left: 30px; width: 200px; }
  .r2.m .sw-stage .pv-phone { right: 8px; }
  .r2.m .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .r2.m .tool-sec { gap: 56px; }
  .r2.m .ts-h, .r2.m .sr-h { font-size: 40px; }
  .r2.m .team-band .team-grid, .r2.m .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 48px; }
  .r2.m .proof .stat .big { font-size: 170px; }
  .r2.m .intents { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- 1100: the menu collapses */
@media (max-width: 1100px) {
  .r2.m .head-row { height: 72px; }
  .r2.m .nav-toggle { display: grid; }
  .r2.m .login { display: none; }
  .r2.m .head-tools { margin-left: auto; gap: 12px; }
  .r2.m .btn-head { height: 42px; padding: 0 18px; font-size: 12px; }
  .r2.m .main-nav { position: fixed; left: 0; right: 0; top: 72px; bottom: 0; z-index: 50; display: none; flex-direction: column;
    gap: 0; margin: 0; padding: 12px var(--gutter) 40px; overflow-y: auto; background: #001F47; }
  .r2.m .nav-open .main-nav { display: flex; }
  .r2.m .nav-open { background: #001F47; }
  .r2.m .main-nav a { padding: 20px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); font-size: 20px; letter-spacing: .02em;
    text-transform: none; font-weight: 500; }
  .r2.m .main-nav a.is-active { border-bottom-color: rgba(255, 255, 255, .12); color: #8CC4F8; }
  .r2.m .main-nav .nav-only-m { display: block; }
  .r2.m .main-nav .nav-cta { margin-top: 28px; padding: 18px 24px; border: 0; border-radius: 99px; background: #fff; color: #001F47;
    text-align: center; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
  .r2.m .suite-nav { top: 72px; }
  .r2.m .hero-r4 { padding-top: 136px; }
  .r2.m .hero-r4 .h-display { font-size: 72px; }
  .r2.m .reel-slide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .r2.m .rs-copy { padding: 40px 36px 32px; }
  .r2.m .rs-problem { font-size: 23px; }
  .r2.m .f-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .r2.m .f-id { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------- 900: tablet, grids stack */
@media (max-width: 900px) {
  .r2.m { --gutter: 32px; --band-pad: 80px; --fs-page: 54px; --fs-section: 42px; --fs-lead: 19px; }
  .r2.m .band-head--row, .r2.m .ph-grid, .r2.m .svc-hero .ph-grid, .r2.m .pm-grid, .r2.m .trl-grid, .r2.m .figure-row,
  .r2.m .corner-list, .r2.m .corner-list .card--entry, .r2.m .crit-m, .r2.m .check-grid, .r2.m .faq-grid, .r2.m .price-grid,
  .r2.m .cf-grid, .r2.m .lookup, .r2.m .res-grid, .r2.m .rh-grid, .r2.m .entry-grid, .r2.m .carries-grid, .r2.m .share-grid,
  .r2.m .cons-grid, .r2.m .mvf, .r2.m .story-grid, .r2.m .gov-grid, .r2.m .demo-grid, .r2.m .ed-row, .r2.m .wi-grid,
  .r2.m .tool-sec, .r2.m .svc-row, .r2.m .reel-slide, .r2.m .sw-panel, .r2.m .cta-row, .r2.m .vision-m {
    grid-template-columns: minmax(0, 1fr); }
  .r2.m .band-head--row, .r2.m .ph-grid, .r2.m .pm-grid, .r2.m .trl-grid, .r2.m .tool-sec, .r2.m .svc-row, .r2.m .ed-row,
  .r2.m .wi-grid, .r2.m .res-grid, .r2.m .entry-grid, .r2.m .cf-grid, .r2.m .demo-grid, .r2.m .faq-grid, .r2.m .check-grid { gap: 32px; }
  .r2.m .price-grid, .r2.m .cta-row { display: grid; gap: 24px; }
  .r2.m .ed-flip .ed-img, .r2.m .tool-sec--flip .ts-copy { order: 0; }
  .r2.m .tool-sec--flip .ts-stage { order: 1; }
  .r2.m .page-hero.has-media .ph-media { display: none; }
  .r2.m .page-hero { padding-top: 132px; }
  .r2.m .h-page { max-width: none; }
  .r2.m .ph-meta, .r2.m .page-dpp4cd .ph-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* hero */
  .r2.m .hero-r4 .h-display { font-size: 60px; }
  .r2.m .hero-r4 .lead { font-size: 18px; }
  .r2.m .sw-copy { padding: 32px 28px 8px; }
  .r2.m .sw-panel { min-height: 0; }
  .r2.m .sw-name { font-size: 34px; margin: 18px 0 10px; }
  .r2.m .sw-line { margin-bottom: 24px; }
  .r2.m .sw-stage { height: 470px; margin: 20px 12px 12px; }
  .r2.m .sw-url { transform: none; }

  /* previews: shrink the product surfaces to fit a narrow stage */
  .r2.m .sw-stage .pv, .r2.m .ts-stage .pv { transform: scale(.82); }
  .r2.m .sw-stage--epd .pv, .r2.m .ts-stage--epd .pv { transform: scale(.74); }
  .r2.m .sw-stage--dpp .pv, .r2.m .ts-stage--dpp .pv { transform: none; }
  .r2.m .ts-stage { height: 480px; }

  /* problem reel */
  .r2.m .reel-tabs { grid-template-columns: repeat(6, minmax(128px, 1fr)); overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  .r2.m .reel-tabs::-webkit-scrollbar { display: none; }
  .r2.m .rs-img { min-height: 360px; }
  .r2.m .rs-big { font-size: 72px; }

  /* the rest */
  .r2.m .proof .stat .big { font-size: 140px; }
  .r2.m .tagcard { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .r2.m .europe.band--deep .figure .num { font-size: 104px; }
  .r2.m .figs, .r2.m .obj, .r2.m .how-steps, .r2.m .stages-m, .r2.m .wsf, .r2.m .counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .r2.m .road { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .r2.m .logos, .r2.m .cons-grid .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .r2.m .intents { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .r2.m .sr-head { position: static; }
  .r2.m .rel-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .r2.m .svc-index { margin-top: 12px; }
  .r2.m .legal-cols { columns: 1; }
}

/* ---------------------------------------------------------------- 600: phone */
@media (max-width: 600px) {
  .r2.m { --gutter: 20px; --band-pad: 64px; --fs-page: 42px; --fs-section: 34px; --fs-lead: 18px; --fs-body: 16px; }
  .r2.m .brand .logo { width: 150px; height: auto; }
  .r2.m .btn-head { display: none; }
  .r2.m .btn { height: 52px; padding: 0 22px; font-size: 13px; }
  .r2.m .actions { flex-wrap: wrap; }
  .r2.m .page-hero { padding-top: 112px; }

  .r2.m .hero-r4 { padding-top: 112px; }
  .r2.m .hero-r4 .h-display { font-size: 44px; line-height: 1.02; }
  .r2.m .hero-top4 { margin-bottom: 40px; }
  .r2.m .hero-r4 .lead { font-size: 17px; margin-top: 22px; }
  .r2.m .hero-r4 .actions { flex-direction: column; align-items: stretch; width: 100%; }
  .r2.m .sw-bar { justify-content: flex-start; }
  .r2.m .sw-tabs { flex: 1 1 auto; min-width: 0; }
  .r2.m .sw-tab { width: 62px; height: 40px; font-size: 12px; }
  .r2.m .sw-ind { width: 62px; }
  .r2.m .sw-frame { border-radius: 22px; }
  .r2.m .sw-in { border-radius: 20.5px; }
  .r2.m .sw-chrome { height: 40px; padding: 0 14px; }
  .r2.m .sw-chrome > i { width: 8px; height: 8px; }
  .r2.m .sw-url { font-size: 10.5px; padding: 6px 10px; }
  .r2.m .sw-copy { padding: 24px 20px 4px; }
  .r2.m .sw-name { font-size: 28px; }
  .r2.m .sw-line { font-size: 15.5px; }
  .r2.m .sw-stage { height: 380px; margin: 16px 8px 8px; border-radius: 16px; }
  .r2.m .ts-stage { height: 400px; border-radius: 20px; }
  .r2.m .sw-stage .pv, .r2.m .ts-stage .pv { transform: scale(.62); }
  .r2.m .sw-stage--epd .pv, .r2.m .ts-stage--epd .pv { transform: scale(.6); }
  /* the passport: the phone alone, centred; the floating notes need more room than a phone has */
  .r2.m .sw-stage--dpp .pv, .r2.m .ts-stage--dpp .pv { transform: none; }
  .r2.m .sw-stage .pv-phone, .r2.m .ts-stage .pv-phone { right: auto; left: calc(50% - 200px); top: 22px; }
  .r2.m .sw-stage .pc-note, .r2.m .ts-stage .pc-note { display: none; }
  .r2.m .pv-phone .device { transform: scale(.78); }

  .r2.m .reel-band { padding-top: 72px; }
  .r2.m .reel-slide { border-radius: 22px; }
  .r2.m .rs-img { min-height: 300px; }
  .r2.m .rs-img figcaption { padding: 110px 22px 22px; }
  .r2.m .rs-big { font-size: 56px; }
  .r2.m .rs-img figcaption p { font-size: 15px; }
  .r2.m .rs-img .rs-line { font-size: 21px; }
  .r2.m .rs-copy { padding: 28px 22px 24px; gap: 22px; }
  .r2.m .rs-problem { font-size: 20px; }
  .r2.m .rs-solve { font-size: 16px; }
  .r2.m .mini-tool { grid-template-columns: 36px minmax(0, 1fr); padding: 16px; gap: 14px; }
  .r2.m .mini-tool .mt-go { display: none; }
  .r2.m .mt-ico { width: 32px; height: 32px; }

  .r2.m .proof .stat .big { font-size: 104px; }
  .r2.m .hangtag { font-size: 17px; }
  .r2.m .tagcard { padding: 22px; }
  .r2.m .europe.band--deep .figure .num { font-size: 76px; }
  .r2.m .vision-big { font-size: 28px; }
  .r2.m .svc-grid { grid-template-columns: minmax(0, 1fr); }
  .r2.m .svc-card { min-height: 0; }
  .r2.m .svc-ico { margin-bottom: 24px; }

  .r2.m .suite-nav .sn-name { display: none; }
  .r2.m .suite-nav a { padding-right: 6px; }
  .r2.m .tool-sec { padding-block: 56px; }
  .r2.m .ts-h, .r2.m .sr-h { font-size: 31px; }
  .r2.m .ts-body, .r2.m .sr-lead { font-size: 17px; }
  .r2.m .svc-row { padding-block: 56px; }

  .r2.m .figs, .r2.m .obj, .r2.m .how-steps, .r2.m .stages-m, .r2.m .wsf, .r2.m .road, .r2.m .crit, .r2.m .carry,
  .r2.m .row2, .r2.m .intents, .r2.m .ph-meta, .r2.m .page-dpp4cd .ph-meta, .r2.m .kv { grid-template-columns: minmax(0, 1fr); }
  .r2.m .team-band .team-grid, .r2.m .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }
  .r2.m .counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .r2.m .rrow { grid-template-columns: minmax(0, 1fr); }
  .r2.m .rr-side { justify-content: flex-start; }
  .r2.m .f-top { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .r2.m .f-base { flex-direction: column; align-items: flex-start; gap: 16px; }
  .r2.m .meter-key { flex-wrap: wrap; }
  .r2.m .corner-jump a { height: 38px; font-size: 13px; }
  .r2.m .search { flex-wrap: wrap; }
}