/* Cotra — responsive layer (tablet and phone). Desktop 1200–1440 scales the 1440 design;
   1440–1919 shows it at full size; 1920+ (large monitors, TVs) scales it up. Below 1200 the
   layout reflows with the rules here. Inline styles are overridden by attribute selectors. */

.mnav { display: none }

@media (max-width: 1199px) {
  html { -webkit-text-size-adjust: 100% }
  .zm { width: 100% !important; zoom: 1 !important }
  .frame, .cur, .cur-dot, .lvlnav { display: none !important }

  /* header: menu button replaces the link row */
  .nav nav[aria-label="Main"], .nav > div > .btn { display: none !important }
  .nav > div { padding: 16px 28px !important; justify-content: space-between; gap: 20px !important }
  .mnav { display: block; position: static }
  .mnav > summary { list-style: none; cursor: pointer; width: 48px; height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; border: 1px solid rgba(217,220,224,.22) }
  .mnav > summary::-webkit-details-marker { display: none }
  .mnav > summary span { display: block; width: 20px; height: 1px; background: #EEF1F5; transition: transform .4s cubic-bezier(.16,1,.3,1) }
  .mnav[open] > summary span:first-child { transform: translateY(4px) rotate(45deg) }
  .mnav[open] > summary span:last-child { transform: translateY(-4px) rotate(-45deg) }
  .mnav .mpanel { position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - 80px); overflow-y: auto; background: rgba(9,20,40,.98); border-top: 1px solid rgba(217,220,224,.09); border-bottom: 1px solid rgba(217,220,224,.09); padding: 12px 28px 28px; display: flex; flex-direction: column; box-shadow: 0 40px 80px rgba(0,0,0,.6) }
  .mnav .mpanel a { display: block; padding: 14px 0; border-bottom: 1px solid rgba(217,220,224,.08); font-family: Georgia, 'Times New Roman', serif; font-size: 22px; color: #EEF1F5; text-decoration: none }
  .mnav .mpanel .msub { padding-left: 18px; font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #C6CACF }
  .mnav .mpanel .btn { margin-top: 22px; text-align: center; justify-content: center; font-family: Arial, Helvetica, sans-serif; font-size: 15px }

  /* containers and spacing */
  [style*="max-width: 1400px"] { padding-left: 28px !important; padding-right: 28px !important }
  [style*="padding: 170px 56px"], [style*="padding: 150px 56px 170px"] { padding-top: 96px !important; padding-bottom: 104px !important }
  [style*="padding: 90px 56px 100px"] { padding-top: 72px !important; padding-bottom: 80px !important }
  [style*="padding: 120px 56px 56px"] { padding-top: 80px !important }
  [style*="gap: 110px"], [style*="gap: 90px"], [style*="gap: 80px"], [style*="gap: 70px"] { gap: 48px !important }
  [style*="position: sticky"] { position: static !important }
  [style*="width: 380px"], [style*="width: 420px"] { width: auto !important; max-width: 100% !important }

  /* two-column layouts stack */
  [style*="grid-template-columns: 380px"], [style*="grid-template-columns: 420px"],
  [style*="grid-template-columns: 220px"], [style*="grid-template-columns: 190px"],
  [style*="grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr)"] { grid-template-columns: minmax(0, 1fr) !important; gap: 32px !important }
  [style*="grid-template-columns: repeat(4, minmax(0, 1fr))"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important }
  [style*="display: flex"][style*="gap: 90px"]:not([style*="flex-direction"]) { flex-direction: column }

  /* type */
  [style*="font-size: 120px"] { font-size: 76px !important }
  [style*="font-size: 92px"], [style*="font-size: 88px"] { font-size: 68px !important }
  [style*="font-size: 58px"], [style*="font-size: 56px"], [style*="font-size: 54px"], [style*="font-size: 50px"] { font-size: 44px !important }
  [style*="font-size: 44px"] { font-size: 38px !important }
  .lead { font-size: 18px }

  /* hero */
  .h8 { height: auto; min-height: 640px; max-height: none }
  .h8.short { min-height: 560px }
  .h8 .wrap { position: relative; min-height: inherit; padding: 150px 28px 64px }
  .h8 .meta { left: 28px; right: 28px; top: 104px }
  .h8 .shade { background: linear-gradient(0deg, #0B1A33 0%, rgba(11,26,51,.72) 45%, rgba(11,26,51,.35) 100%) }

  /* image + text splits */
  .split { grid-template-columns: minmax(0, 1fr); min-height: 0 }
  .split .unveil { order: 0 !important; min-height: 440px }
  .split .txt { padding: 72px 28px 88px !important }

  /* numbered lists */
  .ix { grid-template-columns: 96px minmax(0, 1fr); gap: 20px 28px; padding: 44px 0 }
  .ix > :nth-child(n+3) { grid-column: 2 }
  .ix .n { font-size: 64px }
  .ix h3 { font-size: 30px }
  .ix2 { grid-template-columns: minmax(0, 1fr) }

  /* end card */
  .endc { height: auto; min-height: 620px }
  .endc .media, .endc .plate { left: 0 !important; width: 100% !important; opacity: .45 }
  .endc .shade { background: linear-gradient(0deg, #0B1A33 0%, rgba(11,26,51,.6) 50%, rgba(11,26,51,.85) 100%) }
  .endc .wrap { height: auto; min-height: 620px; padding: 96px 28px }

  /* forms */
  .pair { grid-template-columns: minmax(0, 1fr); gap: 28px }
  .opts { grid-template-columns: minmax(0, 1fr) }
  .opt { min-height: 64px }

  /* footer bottom row */
  .fbot { flex-direction: column; align-items: flex-start !important; gap: 18px }
}

@media (max-width: 767px) {
  [style*="max-width: 1400px"] { padding-left: 20px !important; padding-right: 20px !important }
  .nav > div { padding: 12px 20px !important }
  .nav > div > a img:first-child { width: 34px !important }
  .nav > div > a img + img { width: 100px !important }
  .mnav .mpanel { padding: 8px 20px 24px }
  [style*="padding: 170px 56px"], [style*="padding: 150px 56px 170px"] { padding-top: 72px !important; padding-bottom: 80px !important }
  [style*="gap: 110px"], [style*="gap: 90px"], [style*="gap: 80px"], [style*="gap: 70px"] { gap: 36px !important }

  [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important }

  [style*="font-size: 120px"] { font-size: 52px !important }
  [style*="font-size: 92px"], [style*="font-size: 88px"] { font-size: 46px !important }
  [style*="font-size: 58px"], [style*="font-size: 56px"], [style*="font-size: 54px"], [style*="font-size: 50px"] { font-size: 34px !important }
  [style*="font-size: 44px"], [style*="font-size: 40px"] { font-size: 30px !important }
  [style*="font-size: 34px"] { font-size: 27px !important }
  .lead { font-size: 17px }
  .disp { overflow-wrap: break-word }

  .h8 { min-height: 600px }
  .h8 .wrap { padding: 130px 20px 48px; gap: 22px }
  .h8 .meta { left: 20px; right: 20px; top: 92px }
  .h8 .meta .idx + .idx { display: none }
  .h8 .meta .idx i { width: 40px }

  .split .unveil { min-height: 320px }
  .split .txt { padding: 56px 20px 72px !important }

  .ix { grid-template-columns: minmax(0, 1fr); gap: 14px }
  .ix > :nth-child(n+2) { grid-column: 1 }
  .ix .n { font-size: 48px }
  .ix h3 { font-size: 26px }

  .dir a { grid-template-columns: 34px minmax(0, 1fr) 20px; gap: 6px 12px; padding: 18px 0 }
  .dir i { display: none }
  .dir .nm { font-size: 23px }
  .dir .sc { grid-column: 2; grid-row: 2; white-space: normal }
  .dir svg { grid-column: 3; grid-row: 1; opacity: .6; transform: none }

  .tile .tw { font-size: 120px }
  .tile .tn { font-size: 28px }

  .endc, .endc .wrap { min-height: 520px }
  .endc .wrap { padding: 72px 20px }
  .btn { padding-left: 22px; padding-right: 22px }
}

@media (max-width: 767px) {
  .status9 { flex-wrap: wrap; max-width: 100% }
  .status9 .rot { display: none }
}

/* component layouts */
@media (max-width: 1199px) {
  .ix2 .ix { grid-template-columns: 96px minmax(0, 1fr); gap: 20px 28px }
  .spec { grid-template-columns: 220px minmax(0, 1fr); gap: 28px }
  .pf { grid-template-columns: 80px minmax(0, 1fr); gap: 24px 32px; padding: 52px 0 }
  .pf > :nth-child(n+3) { grid-column: 2 }
  .nums { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .tile { min-height: 240px }
  .plate-cap { padding: 20px 24px }
  .status9 .rot { min-width: 0 }
}
@media (max-width: 767px) {
  .ix2 .ix, .ix { grid-template-columns: minmax(0, 1fr); gap: 14px }
  .ix2 .ix > *, .ix > * { grid-column: 1 !important }
  .ix2 .ix .n { font-size: 48px }
  .spec { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 24px 0 }
  .pf { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 44px 0 }
  .pf > * { grid-column: 1 !important }
  .nums { grid-template-columns: minmax(0, 1fr) }
  .offl { grid-template-columns: minmax(0, 1fr); row-gap: 22px }
  .tile { min-height: 200px; padding: 26px 26px }
  .li { grid-template-columns: 40px minmax(0, 1fr) 20px; gap: 12px }
  .h8 .meta { display: none }
  .plate-cap { padding: 16px 20px }
  .sent { gap: 22px }
}

@media (max-width: 1199px) {
  .bignext { font-size: 84px !important; gap: 20px }
  .bignext svg { width: 48px; height: 48px; flex-shrink: 0 }
}
@media (max-width: 767px) {
  .bignext { font-size: 52px !important; overflow-wrap: anywhere }
  .bignext svg { width: 36px; height: 36px }
}

@media (max-width: 1199px) {
  [style*="grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)"] { grid-template-columns: minmax(0, 1fr) !important; gap: 40px !important }
  [style*="padding: 150px 56px;"] { padding-top: 96px !important; padding-bottom: 104px !important }
  .h8 .meta { display: none }
  .card { min-height: 220px !important }
}

/* large monitors and TVs: the page is zoomed up, so viewport units are divided by the zoom */
@media (min-width: 1920px) {
  :root { --gx: max(0px, calc((100vw / var(--z, 1) - 1400px) / 2)) }
  .split.rev .txt { padding-left: max(56px, calc((100vw / var(--z, 1) - 1400px) / 2 + 56px)) }
  .split:not(.rev) .txt { padding-right: max(56px, calc((100vw / var(--z, 1) - 1400px) / 2 + 56px)) }
}

/* ---------- Insights ---------- */
.igrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px }
.icard { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 340px; padding: 34px; text-decoration: none; color: inherit; overflow: hidden;
  background: radial-gradient(420px 320px at 80% 10%, rgba(46,74,122,.32), transparent 70%), linear-gradient(160deg, #16284A, #0B1A33);
  box-shadow: inset 0 0 0 1px rgba(167,171,176,.2), inset 0 1px 0 rgba(255,255,255,.06);
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px); transition: box-shadow .8s }
.icard:hover { box-shadow: inset 0 0 0 1px rgba(217,220,224,.34) }
.icard .tk { margin: 0; font-family: Arial, Helvetica, sans-serif; font-weight: 700; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: #A7ABB0 }
.icard .tn { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: 32px; line-height: 1.12; color: #EEF1F5 }
.icard.big .tn { font-size: 46px }
.icard .td { margin: 0; font-size: 15px; line-height: 1.7; color: #C6CACF; max-width: 560px }
.icard .imeta { margin: 0; display: flex; align-items: center; gap: 18px; font-family: Arial, Helvetica, sans-serif; font-weight: 700; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: #A7ABB0; border-top: 1px solid rgba(217,220,224,.14); padding-top: 18px }
.icard .imeta span:first-child { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 400; font-size: 18px; letter-spacing: 0; color: #D9DCE0 }
.icard .imeta svg { margin-left: auto; transition: transform .8s cubic-bezier(.16,1,.3,1) }
.icard:hover .imeta svg { transform: translateX(8px) }
.ameta { display: flex; flex-direction: column; gap: 22px; padding-top: 8px; border-top: 1px solid rgba(217,220,224,.14) }
.ameta > div { display: flex; flex-direction: column; gap: 6px }
.ameta .small { margin: 0 }
.art { max-width: 760px; display: flex; flex-direction: column; gap: 26px }
.art .alead { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: 25px; line-height: 1.55; color: #EEF1F5 }
.art .abody { margin: 0; font-size: 18px; line-height: 1.85; color: #D9DCE0 }
.art h2.disp { font-size: 36px; margin-top: 26px }
.art blockquote { margin: 18px 0; padding: 34px 0; border-top: 1px solid rgba(217,220,224,.2); border-bottom: 1px solid rgba(217,220,224,.2) }
.art blockquote p { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-size: 34px; line-height: 1.3; color: #FFFFFF }
.art .adisc { margin: 30px 0 0; padding-top: 24px; border-top: 1px solid rgba(217,220,224,.12); font-size: 13.5px; line-height: 1.7; color: #A7ABB0 }

@media (max-width: 1199px) {
  .igrid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .icard.big .tn { font-size: 38px }
  .ameta { position: static !important; flex-direction: row; flex-wrap: wrap; gap: 18px 36px }
  [style*="font-size: 72px"] { font-size: 54px !important }
  [style*="padding: 120px 56px 140px"], [style*="padding: 110px 56px 130px"], [style*="padding: 150px 56px 120px"] { padding-top: 80px !important; padding-bottom: 88px !important }
  .bignext[style*="font-size: 64px"] { font-size: 52px !important }
}
@media (max-width: 767px) {
  .igrid { grid-template-columns: minmax(0, 1fr) }
  .icard { min-height: 260px; padding: 26px }
  .icard .tn, .icard.big .tn { font-size: 28px }
  [style*="font-size: 72px"] { font-size: 38px !important }
  .art .alead { font-size: 21px }
  .art .abody { font-size: 17px }
  .art h2.disp { font-size: 29px }
  .art blockquote p { font-size: 26px }
  .bignext[style*="font-size: 64px"] { font-size: 36px !important }
}

.icard.big { grid-column: span 2 }
.chips2 { display: flex; flex-wrap: wrap; gap: 8px }
.chip2 { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid rgba(217,220,224,.2); font-family: Arial, Helvetica, sans-serif; font-weight: 700; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: #D9DCE0; text-decoration: none; transition: background .5s, border-color .5s }
.chip2:hover { background: rgba(217,220,224,.08); border-color: rgba(217,220,224,.45) }
@media (max-width: 1199px) { [style*="padding: 110px 56px;"] { padding-top: 80px !important; padding-bottom: 80px !important } [style*="padding: 0 56px 120px"] { padding-bottom: 80px !important } }
@media (max-width: 767px) { .icard.big { grid-column: span 1 } .chip2 { min-height: 44px } }