/* Route 2: Front Runner. Europe leads the page. Deep blue grounds, full
   bleed photography, and Jost, a geometric face close in spirit to the
   Avant Garde in the logo. The loudest and most commercial of the three. */
.r2 {
  --page: #FFFFFF; --warm: #EEF3F9; --tint: #E4EDF8;
  --ink: #081A33; --body: #3A4A60; --muted: #62728A; --rule: #D5DDE8;
  --brand: #003B7A; --deep: #001F47; --accent: #006CC0; --amber: #9A5B00; --live: #006CC0;
  --card-bg: #FFFFFF; --card-line: #D5DDE8; --field-bg: #FFFFFF; --field-line: #BFCADB; --skel: #DCE4EF; --vis-bg: #EEF3F9;
  --f-display: 'Jost', 'Futura', 'Century Gothic', sans-serif; --f-num: 'Jost', 'Futura', sans-serif;
  --w-display: 600; --w-num: 500; --w-card: 600;
  --fs-display: 112px; --fs-page: 86px; --fs-section: 60px; --fs-card: 23px;
  --ls-display: -0.028em; --ls-section: -0.022em;
  --band-pad: 124px;
  --head-bg: #001F47; --nav-ink: #FFFFFF;
  --foot-bg: #001F47; --foot-body: #B7C6DB; --foot-ink: #FFFFFF; --foot-muted: #7D95B6; --foot-rule: rgba(255, 255, 255, .16);
}
.r2 .band--deep { --accent: #7FBAF2; --muted: #8FB0D8; --live: #7FBAF2; }

/* type: geometric, confident, uppercase only in small functional labels */
.r2 .btn { font: 600 14px/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; height: 58px; padding: 0 30px; }
.r2 .btn-head { height: 46px; padding: 0 22px; font-size: 13px; }
.r2 .link-arrow { font: 600 14px/1.3 var(--f-display); letter-spacing: .08em; text-transform: uppercase; }
.r2 .main-nav a { font: 500 13px/1 var(--f-display); letter-spacing: .09em; text-transform: uppercase; }
.r2 .lang, .r2 .login { font: 500 13px/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; }
.r2 .vision-line, .r2 .mv p, .r2 .nots-list li, .r2 .proof-line, .r2 .law-date, .r2 .ph-sub, .r2 .v-label strong { font-weight: 500; }
.r2 .h-card { letter-spacing: -0.005em; }

/* home hero: full bleed, the film running behind the headline */
.r2 .site-head.overlay { position: absolute; top: 0; left: 0; right: 0; background: transparent; }
.r2 .hero { position: relative; height: 940px; overflow: hidden; background: #001F47; }
.r2 .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.r2 .hero-shade { position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(0, 22, 52, .95) 0%, rgba(0, 22, 52, .86) 34%, rgba(0, 22, 52, .35) 66%, rgba(0, 22, 52, .12) 100%),
  linear-gradient(0deg, rgba(0, 22, 52, .55), rgba(0, 22, 52, 0) 45%),
  linear-gradient(180deg, rgba(0, 22, 52, .78), rgba(0, 22, 52, 0) 24%); }
.r2 .hero-copy { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-top: 170px; padding-bottom: 112px; }
.r2 .hero .h-display { color: #fff; font-size: 92px; line-height: .97; max-width: 15.5ch; }
.r2 .hero .lead { color: #DCE7F6; margin-top: 34px; max-width: 33em; font-size: 20px; }
.r2 .hero .btn-primary { background: #fff; color: #001F47; border-color: #fff; }
.r2 .hero .btn-secondary { color: #fff; }
.r2 .video-chip { position: absolute; right: 80px; bottom: 118px; z-index: 3; display: flex; align-items: center; gap: 16px; color: #fff;
  font: 500 13px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
.r2 .pause { position: relative; width: 56px; height: 56px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .75); }
.r2 .pause::before, .r2 .pause::after { content: ''; position: absolute; top: 19px; width: 4px; height: 17px; background: #fff; }
.r2 .pause::before { left: 21px; }
.r2 .pause::after { right: 21px; }

/* what is happening now: three full bleed panels, edge to edge */
.r2 .now { padding-bottom: 0; }
.r2 .now .band-head { margin-bottom: 64px; }
.r2 .issues-wrap { padding: 0; max-width: none; }
.r2 .issues { gap: 0; }
.r2 .issue { position: relative; height: 680px; overflow: hidden; }
.r2 .issue-img { position: absolute; inset: 0; }
.r2 .issue-img img { height: 100%; aspect-ratio: auto; }
.r2 .issue-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 180px 48px 52px;
  background: linear-gradient(180deg, rgba(0, 22, 52, 0), rgba(0, 22, 52, .9) 42%, rgba(0, 22, 52, .96)); }
.r2 .issue .num { color: #fff; font-size: 80px; font-weight: 600; }
.r2 .issue p { color: #DCE7F6; font-size: 17px; }
.r2 .issue-sector, .r2 .issue .src { color: #8FB0D8; }
.r2 .issue + .issue { border-left: 1px solid rgba(255, 255, 255, .25); }

/* the claims band, light, with the number in the brand */
.r2 .proof .stat .big { color: var(--accent); font-weight: 600; font-size: 230px; }
.r2 .proof .law-date { color: var(--ink); font-weight: 600; }

/* Europe: the deep band, the figure in light blue */
.r2 .europe.band--deep .figure .num { color: #7FBAF2; font-size: 150px; font-weight: 600; }
.r2 .europe .h-section { max-width: 14ch; }

/* suite: white live panel inside the deep band */
.r2 .band--deep .prod--live { background: #FFFFFF; border-color: #FFFFFF;
  --ink: #081A33; --body: #3A4A60; --muted: #62728A; --rule: #D5DDE8; --accent: #006CC0; --live: #006CC0; }
.r2 .band--deep .prod--live .btn-primary { background: #001F47; color: #fff; border-color: #001F47; }
.r2 .prod--live .h-card { font-size: 42px; }

/* project: the photograph larger */
.r2 .proj-photo img { aspect-ratio: 4 / 3.4; }
.r2 .fact .num { font-weight: 600; }

/* page heroes: a full bleed picture under a deep shade */
.r2 .page-hero { background: #001F47;
  --ink: #FFFFFF; --body: #DCE7F6; --muted: #8FB0D8; --rule: rgba(255, 255, 255, .2); --accent: #9CC8F2;
  --btn-bg: #FFFFFF; --btn-ink: #001F47; }
.r2 .page-hero .btn-primary { background: #fff; color: #001F47; border-color: #fff; }
.r2 .page-hero.has-media { min-height: 660px; display: flex; align-items: flex-end; padding-block: 150px 100px; }
/* z-index: auto matters. The hero is a flex container here, and a flex item with any z-index forms its
   own stacking layer even unpositioned, which put the whole text column under the shade. */
.r2 .page-hero.has-media .ph-grid { position: static; z-index: auto; grid-template-columns: minmax(0, 1fr); width: 100%; }
.r2 .page-hero.has-media .ph-copy { position: relative; z-index: 2; }
.r2 .page-hero.has-media .ph-media { position: absolute; inset: 0; z-index: 0; }
.r2 .page-hero.has-media .ph-media img { height: 100%; aspect-ratio: auto; }
.r2 .page-hero.has-media .ph-mosaic { aspect-ratio: auto; gap: 0; grid-template-columns: 1.2fr 1fr 1fr; grid-template-rows: 1fr; }
.r2 .page-hero.has-media .ph-mosaic img:first-child { grid-row: auto; }
.r2 .page-hero.has-media::after { content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(0, 22, 52, .94), rgba(0, 22, 52, .78) 45%, rgba(0, 22, 52, .35)); }
.r2 .page-hero .h-page { max-width: 14ch; }
.r2 .page-hero.has-media .ph-meta { max-width: 760px; }
.r2 .checker { --ink: #081A33; --body: #3A4A60; --muted: #62728A; --field-line: #BFCADB; --card-bg: #FFFFFF; }
.r2 .search { --muted: #62728A; border-color: #fff; }

/* cards: square, flat, blue */
.r2 .card--nominate { background: #006CC0; border-color: #006CC0; }
.r2 .card--nominate p { color: #E4EFFB; }
.r2 .tier--mid { border-color: var(--accent); }
.r2 .cta-box { background: #006CC0; }
.r2 .cta-box .btn-primary { color: #003B7A; }
.r2 .step-n, .r2 .reader-n { font-weight: 600; }