/*
 * Event report theme. Measurements follow the original report site:
 *   home + media pages   Inter, navy #040E57 on warm grey #EAE8E3, dark #080C14
 *   stories              Manrope text, Montserrat headings, ink #092747 on white
 *   albums               Noto Sans text, Montserrat headings, gold accents
 */
:root {
    --er-navy: #040e57;
    --er-ink: #092747;
    --er-dark: #080c14;
    --er-warm: #eae8e3;
    --er-warm-card: #f5f4f0;
    --er-muted: #52617a;
    --er-grey: #555;
    --er-gold: #80601f;
    --er-gold-line: #bb8b3d;
    --er-gold-text: #0b2743;
    --er-gold-fill: linear-gradient(135deg, #eaca7b, #ad7627);
    --er-text: #17171e;
    --er-sub: #656571;
    --er-line: #d7dce2;
    --er-gutter: 5.1vw;
    --er-max: 1290px;
    --er-sans: "Inter", "Noto Sans SC", system-ui, sans-serif;
    --er-story: "Manrope", "Noto Sans SC", Arial, sans-serif;
    --er-display: "Montserrat", "Noto Sans SC", Arial, sans-serif;
    --er-album: "Noto Sans", "Noto Sans SC", system-ui, sans-serif;
    --er-header-h: 88px;

    /* Type scale. Every text size in the theme is one of these; 12px is the floor. */
    --er-text-xs: 12px;
    --er-text-sm: 14px;
    --er-text-md: 16px;
    --er-text-base: 17px;
    --er-text-lg: 20px;
    --er-text-xl: 24px;
    --er-display-sm: clamp(28px, 2.6vw, 38px);
    --er-display-md: clamp(32px, 3.4vw, 48px);
    --er-display-lg: clamp(44px, 5vw, 72px);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

body {
    margin: 0;
    font-family: var(--er-sans);
    font-size: var(--er-text-base);
    line-height: 1.65;
    color: var(--er-text);
    background: #fff;
    -webkit-font-smoothing: antialiased;
}

body.er-header-landing,
body.er-report-page {
    background: var(--er-warm);
    color: var(--er-navy);
}

body.er-story-page {
    font-family: var(--er-story);
}

body.er-album-page {
    font-family: var(--er-album);
}

img,
video,
iframe {
    display: block;
    max-width: 100%;
}

/* width/height attributes reserve space; the height itself follows the CSS (aspect-ratio). */
img {
    height: auto;
}

a {
    color: inherit;
}

h1,
h2,
h3,
p {
    margin: 0;
}

button,
input,
select {
    font: inherit;
}

main:focus {
    outline: none;
}

.er-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.er-skip {
    position: absolute;
    left: 16px;
    top: -60px;
    z-index: 2000;
    padding: 10px 16px;
    background: #fff;
    color: var(--er-navy);
    border-radius: 4px;
}

.er-skip:focus {
    top: 12px;
}

.er-container {
    width: 100%;
    max-width: calc(1280px + 2 * var(--er-gutter));
    margin: 0 auto;
    padding: 0 var(--er-gutter);
}

:focus-visible {
    outline: 2px solid #8db7ff;
    outline-offset: 3px;
}

/* ---------------------------------------------------------------- Header */

.er-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 1000;
    transition: background-color .25s, border-color .25s, box-shadow .25s;
    border-bottom: 1px solid transparent;
}

.er-header-inner {
    display: flex;
    align-items: center;
    gap: 32px;
    height: var(--er-header-h);
    padding: 0 var(--er-gutter);
}

.er-logo {
    flex: 0 0 auto;
    display: block;
}

.er-logo img {
    width: 160px;
    height: auto;
}

.er-nav {
    flex: 1;
    display: flex;
    justify-content: center;
}

.er-nav ul,
.er-mobile-menu ul,
.er-lang-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.er-nav ul {
    display: flex;
}

.er-nav a {
    position: relative;
    display: flex;
    align-items: center;
    padding: 24px 16px;
    font-size: var(--er-text-md);
    font-weight: 600;
    line-height: 24px;
    letter-spacing: .02em;
    text-transform: uppercase;
    text-decoration: none;
    color: #000;
}

.er-nav a::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 18px;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s;
}

.er-nav a:hover::after,
.er-nav a.is-current::after {
    transform: scaleX(1);
}

.er-header-tools {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

/* Light header: white bar (albums, stories) */
.er-header-light .er-header {
    background: #fff;
}

.er-header-light.er-scrolled .er-header {
    border-bottom-color: #ececf1;
    box-shadow: 0 6px 24px rgba(9, 39, 71, .06);
}

/* Landing header: transparent over the hero, dark glass once scrolled */
.er-header-landing {
    --er-header-h: 84px;
}

.er-header-landing .er-logo img,
.er-header-report .er-logo img {
    filter: brightness(0) invert(1);
}

.er-header-landing .er-nav a,
.er-header-report .er-nav a {
    color: #fff;
}

.er-header-landing .er-nav a:hover,
.er-header-landing .er-nav a.is-current,
.er-header-report .er-nav a:hover {
    color: #8db7ff;
}

.er-header-landing .er-nav a::after,
.er-header-report .er-nav a::after {
    background: currentColor;
}

.er-header-landing.er-scrolled .er-header,
.er-header-report .er-header {
    background: rgba(8, 12, 20, .96);
    border-bottom-color: rgba(255, 255, 255, .14);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

/* Report header: key figures instead of the menu */
.er-header-report {
    --er-header-h: 80px;
}

/* Language switcher */
.er-lang {
    position: relative;
}

.er-lang-button {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 14px;
    font-size: var(--er-text-sm);
    font-weight: 600;
    color: var(--er-ink);
    background: transparent;
    border: 1px solid var(--er-line);
    border-radius: 4px;
    cursor: pointer;
}

.er-header-landing .er-lang-button,
.er-header-report .er-lang-button {
    color: #fff;
    border-color: rgba(255, 255, 255, .33);
}

.er-lang-caret {
    transition: transform .2s;
}

.er-lang-button[aria-expanded="true"] .er-lang-caret {
    transform: rotate(180deg);
}

.er-lang-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 160px;
    padding: 6px;
    background: #fff;
    border: 1px solid #e3e6ea;
    border-radius: 6px;
    box-shadow: 0 16px 40px rgba(8, 12, 20, .16);
}

.er-lang-menu a {
    display: block;
    padding: 9px 12px;
    font-size: var(--er-text-sm);
    color: var(--er-ink);
    text-decoration: none;
    border-radius: 4px;
}

.er-lang-menu a:hover {
    background: #f2f4f7;
}

.er-lang-menu a[aria-current] {
    font-weight: 700;
    color: var(--er-navy);
}

/* Mobile menu */
.er-menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--er-ink);
    cursor: pointer;
}

.er-header-landing .er-menu-toggle {
    color: #fff;
}

.er-menu-icon {
    display: grid;
    gap: 5px;
    width: 22px;
    margin: auto;
}

.er-menu-icon i {
    display: block;
    height: 2px;
    background: currentColor;
    transition: transform .2s, opacity .2s;
}

.er-menu-toggle[aria-expanded="true"] .er-menu-icon i:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.er-menu-toggle[aria-expanded="true"] .er-menu-icon i:nth-child(2) {
    opacity: 0;
}

.er-menu-toggle[aria-expanded="true"] .er-menu-icon i:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* The sheet under the bar on phones and tablets, in the header's colours: warm and light under
   the light header, night-dark under the landing and report headers. One reveal when it opens:
   the sheet fades in and the links follow one after another. */
.er-mobile-menu {
    --menu-bg: #f5f4f0;
    --menu-text: var(--er-navy);
    --menu-muted: #6b7286;
    --menu-line: rgba(4, 14, 87, .1);
    --menu-current: var(--er-navy);
    --menu-cta-bg: var(--er-navy);
    --menu-cta-text: #fff;
    --menu-cta-icon-bg: #fff;
    --menu-cta-icon: var(--er-navy);
    position: fixed;
    inset: var(--er-header-h) 0 0;
    z-index: 999;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px var(--er-gutter) calc(28px + env(safe-area-inset-bottom));
    background: var(--menu-bg);
    border-top: 1px solid var(--menu-line);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .25s ease, transform .25s ease;
}

.er-mobile-menu.is-open {
    opacity: 1;
    transform: none;
}

.er-header-landing .er-mobile-menu,
.er-header-report .er-mobile-menu {
    --menu-bg: var(--er-dark);
    --menu-text: #fff;
    --menu-muted: rgba(255, 255, 255, .56);
    --menu-line: rgba(255, 255, 255, .1);
    --menu-current: #8db7ff;
    --menu-cta-bg: #fff;
    --menu-cta-text: var(--er-navy);
    --menu-cta-icon-bg: var(--er-navy);
    --menu-cta-icon: #fff;
}

.er-menu-open {
    overflow: hidden;
}

/* The sheet lists the languages itself, so the bar's language button steps aside. */
.er-menu-open .er-header-tools .er-lang {
    visibility: hidden;
}

/* The bar behind the open sheet is solid, also on the transparent landing header. */
.er-header-landing.er-menu-open .er-header,
.er-header-report.er-menu-open .er-header {
    background: var(--er-dark);
}

/* backdrop-filter makes the header the containing block of fixed children, which shrank the
   sheet into the 60px bar once the page was scrolled (and always on report pages). The sheet
   covers the page anyway, so the bar drops the blur while it's open. */
.er-menu-open .er-header,
.er-header-report.er-menu-open .er-header,
.er-header-landing.er-scrolled.er-menu-open .er-header {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.er-mobile-menu-links {
    margin: 0;
    padding: 0;
    list-style: none;
}

.er-mobile-menu-links li {
    border-bottom: 1px solid var(--menu-line);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .3s ease, transform .3s ease;
    transition-delay: calc(60ms + var(--i, 0) * 50ms);
}

.er-mobile-menu.is-open .er-mobile-menu-links li {
    opacity: 1;
    transform: none;
}

.er-mobile-menu-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 0;
    font-size: 30px;
    font-weight: 650;
    line-height: 1.15;
    letter-spacing: -.025em;
    color: var(--menu-text);
    text-decoration: none;
}

.er-mobile-menu-arrow {
    font-size: 22px;
    font-weight: 400;
    color: var(--menu-muted);
    transition: transform .2s, color .2s;
}

.er-mobile-menu-links a:hover .er-mobile-menu-arrow,
.er-mobile-menu-links a:focus-visible .er-mobile-menu-arrow {
    color: var(--menu-text);
    transform: translateX(4px);
}

.er-mobile-menu-links a.is-current {
    color: var(--menu-current);
}

.er-mobile-menu-links a.is-current .er-mobile-menu-arrow {
    color: var(--menu-current);
}

.er-mobile-menu a:focus-visible {
    outline: 2px solid var(--menu-current);
    outline-offset: 4px;
}

.er-mobile-menu-foot {
    display: grid;
    gap: 28px;
    margin-top: auto;
    padding-top: 36px;
}

.er-mobile-menu-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    height: 58px;
    padding: 0 8px 0 26px;
    font-size: var(--er-text-md);
    font-weight: 600;
    color: var(--menu-cta-text);
    text-decoration: none;
    background: var(--menu-cta-bg);
    border-radius: 999px;
}

.er-mobile-menu-cta:hover {
    color: var(--menu-cta-text);
}

.er-mobile-menu-cta-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    font-size: 18px;
    color: var(--menu-cta-icon);
    background: var(--menu-cta-icon-bg);
    border-radius: 50%;
}

.er-mobile-menu-langs p {
    margin-bottom: 10px;
    font-size: var(--er-text-sm);
    color: var(--menu-muted);
}

.er-mobile-menu-langs ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.er-mobile-menu-langs a {
    display: block;
    padding: 9px 16px;
    font-size: var(--er-text-sm);
    font-weight: 500;
    color: var(--menu-text);
    text-decoration: none;
    border: 1px solid var(--menu-line);
    border-radius: 999px;
}

.er-mobile-menu-langs a[aria-current="page"] {
    color: var(--menu-bg);
    background: var(--menu-text);
    border-color: var(--menu-text);
}

/* The desktop menu takes over above 1100px. */
@media (min-width: 1101px) {
    .er-mobile-menu {
        display: none;
    }
}

/* ---------------------------------------------------------------- Shared bits */

.er-section-title {
    font-size: var(--er-display-md);
    font-weight: 750;
    line-height: 1.14;
    letter-spacing: -.035em;
    text-transform: uppercase;
    max-width: 28ch;
}

.er-eyebrow {
    font-size: var(--er-text-sm);
    font-weight: 500;
    color: #626571;
}

.er-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 14px 26px;
    font-family: var(--er-story);
    font-size: var(--er-text-md);
    font-weight: 700;
    line-height: 1.25;
    text-decoration: none;
    border-radius: 999px;
    cursor: pointer;
    transition: transform .2s, box-shadow .2s, background-color .2s;
}

.er-button-gold {
    color: var(--er-gold-text);
    background: var(--er-gold-fill);
    border: 1px solid var(--er-gold-line);
    box-shadow: 0 8px 22px rgba(179, 139, 56, .16);
}

.er-button-gold:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 32px rgba(179, 139, 56, .28);
}

.er-button-outline {
    color: var(--er-gold-text);
    background: #fff;
    border: 1px solid #b8c0cb;
}

.er-button-outline:hover {
    border-color: var(--er-ink);
}

[hidden] {
    display: none !important;
}

/* ---------------------------------------------------------------- Home: hero */

.er-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    min-height: 100vh;
    min-height: 100svh;
    padding: 120px var(--er-gutter) 36px;
    overflow: hidden;
    isolation: isolate;
    background-color: var(--er-dark);
    color: #fff;
    text-align: center;
}

/* Slides cross-fade over each other while each one drifts in slowly (js/report.js moves is-active). */
.er-hero-slides,
.er-hero-slide {
    position: absolute;
    inset: 0;
}

.er-hero-slides {
    z-index: -1;
}

.er-hero-slides::after {
    content: "";
    position: absolute;
    inset: 0;
    /* Black fades behind the menu and the text at the bottom, clear in the middle. */
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .3) 12%, rgba(0, 0, 0, 0) 28%),
        linear-gradient(0deg, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .55) 22%, rgba(0, 0, 0, .15) 42%, rgba(0, 0, 0, 0) 55%);
    /* Above the active slide (z-index 1). */
    z-index: 2;
    pointer-events: none;
}

.er-hero-slide {
    opacity: 0;
    transition: opacity 1.8s cubic-bezier(.4, 0, .2, 1);
}

.er-hero-slide.is-active {
    z-index: 1;
    opacity: 1;
}

.er-hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 58%;
    transform: scale(1.001);
    will-change: transform;
}

/* The animation name stays the same from is-active to is-leaving, so the drift carries on through the fade. */
.er-hero-slide.is-active img,
.er-hero-slide.is-leaving img {
    animation: er-hero-drift 9s cubic-bezier(.33, 0, .2, 1) forwards;
}

@keyframes er-hero-drift {
    from {
        transform: scale(1.001);
    }
    to {
        transform: scale(1.08);
    }
}

.er-hero-note {
    max-width: 680px;
    font-size: var(--er-text-lg);
    line-height: 1.6;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}

.er-hero-scroll {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-top: 12px;
    font-size: 20px;
    color: #fff;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, .69);
    border-radius: 50%;
    background: rgba(4, 14, 87, .145);
    overflow: hidden;
    transition: background-color .2s, transform .2s;
}

.er-hero-scroll:hover {
    background: rgba(4, 14, 87, .55);
    transform: translateY(2px);
}

/* The arrow glides down out of the circle and back in from the top, with a rest in the middle. */
.er-hero-scroll span {
    display: block;
    animation: er-hero-scroll 2.4s cubic-bezier(.45, 0, .55, 1) infinite;
}

@keyframes er-hero-scroll {
    0% {
        opacity: 0;
        transform: translateY(-14px);
    }
    25%,
    55% {
        opacity: 1;
        transform: translateY(0);
    }
    85%,
    100% {
        opacity: 0;
        transform: translateY(14px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .er-hero-scroll span {
        animation: none;
    }
}

/* ---------------------------------------------------------------- Home: moments */

.er-moments {
    padding: 80px 0;
    background: var(--er-warm);
    color: var(--er-navy);
}

.er-moments .er-container {
    max-width: none;
    padding: 0 2.05vw;
}

.er-events {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 29.5px;
    align-items: start;
    margin-top: 52px;
}

.er-event {
    position: relative;
    display: flex;
    flex-direction: column;
    color: #292929;
    text-decoration: none;
}

.er-event:nth-child(even) {
    margin-top: 60px;
}

/* The day's number stands on the photo's top edge: in the flow, so the photo never covers it.
   The negative margin is Inter's depth below the baseline in a line-height 1 box. */
.er-event-number {
    align-self: flex-end;
    margin-bottom: -.13em;
    padding-right: .04em;
    font-size: clamp(64px, 7.7vw, 111px);
    font-weight: 750;
    line-height: 1;
    letter-spacing: -.065em;
    font-variant-numeric: tabular-nums;
    /* A solid tint: Inter's variable outlines overlap, so a text stroke would show their seams. */
    color: rgba(4, 14, 87, .2);
    pointer-events: none;
    transition: color .3s;
}

.er-event:hover .er-event-number,
.er-event:focus-visible .er-event-number {
    color: rgba(4, 14, 87, .45);
}

.er-event-thumb {
    position: relative;
    z-index: 1;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 3px;
    background: #d8d5ce;
}

.er-event-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}

.er-event-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    font-size: clamp(20px, 2.15vw, 31px);
    font-weight: 550;
    line-height: 1.2;
    letter-spacing: -.03em;
    text-align: center;
    color: #fff;
    background: var(--er-navy);
    opacity: 0;
    transition: opacity .3s;
}

.er-event:hover .er-event-overlay,
.er-event:focus-visible .er-event-overlay {
    opacity: 1;
}

.er-event:hover .er-event-thumb img {
    transform: scale(1.04);
}

.er-event-date {
    margin-top: 18px;
    font-size: var(--er-text-sm);
    font-weight: 500;
    line-height: 1.5;
    color: var(--er-grey);
}

.er-event-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}

.er-event-heading strong {
    font-size: var(--er-text-xl);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.025em;
    color: var(--er-navy);
}

.er-event-arrow {
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    font-size: 15px;
    line-height: 1;
    color: #fff;
    background: var(--er-navy);
    border-radius: 50%;
    transition: transform .25s;
}

.er-event:hover .er-event-arrow {
    transform: translateX(4px);
}

.er-event-action {
    margin-top: 16px;
    font-size: var(--er-text-sm);
    font-weight: 450;
    line-height: 1.5;
    color: var(--er-grey);
}

/* ---------------------------------------------------------------- Home: media results */

.er-results {
    padding: 80px 0;
    background: var(--er-navy);
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, .19);
}

.er-results .er-section-title {
    font-weight: 650;
    letter-spacing: -.02em;
}

.er-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 24px;
}

.er-stat {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 260px;
    padding: 30px 28px 24px;
    color: #fff;
    text-decoration: none;
    border: 1px solid rgba(164, 197, 255, .19);
    border-radius: 4px;
    background:
        linear-gradient(rgba(164, 197, 255, .05) 1px, transparent 1px) 0 0 / 100% 44px,
        linear-gradient(90deg, rgba(164, 197, 255, .05) 1px, transparent 1px) 0 0 / 44px 100%,
        linear-gradient(150deg, rgba(43, 76, 182, .55) 0%, rgba(4, 14, 87, 0) 70%);
    transition: border-color .25s, background-color .25s, transform .25s;
}

.er-stat:hover {
    border-color: rgba(164, 197, 255, .55);
    background-color: rgba(255, 255, 255, .03);
}

.er-stat-value {
    font-size: var(--er-display-lg);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -.055em;
}

.er-stat-label {
    max-width: 262px;
    margin-top: 16px;
    font-size: var(--er-text-sm);
    line-height: 1.55;
    opacity: .82;
}

.er-stat-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: auto;
    padding-top: 26px;
    font-size: var(--er-text-xs);
    font-weight: 600;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .25s, transform .25s;
}

.er-stat-cta span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    font-size: 16px;
    border: 1px solid #fff;
    border-radius: 50%;
}

.er-stat:hover .er-stat-cta,
.er-stat:focus-visible .er-stat-cta {
    opacity: 1;
    transform: none;
}

@media (hover: none) {
    .er-stat-cta {
        opacity: 1;
        transform: none;
    }
}

/* ---------------------------------------------------------------- Home: contact */

.er-consult {
    padding: 72px 0;
    background: var(--er-warm);
}

.er-consult-intro {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 64px;
}

.er-consult-intro h2 {
    font-size: clamp(36px, 3.1vw, 44px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.025em;
    color: var(--er-navy);
}

.er-consult-deck {
    max-width: 520px;
    font-size: var(--er-text-md);
    line-height: 1.55;
    color: #55534c;
    text-wrap: pretty;
}

.er-form {
    margin-top: 28px;
}

.er-form-pill {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 8px 8px 8px 32px;
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 10px 32px rgba(4, 14, 87, .07);
    transition: box-shadow .2s;
}

.er-form-pill:focus-within {
    box-shadow: 0 10px 32px rgba(4, 14, 87, .07), 0 0 0 2px rgba(4, 14, 87, .18);
}

.er-field {
    position: relative;
    flex: 1;
    min-width: 0;
}

.er-field-contact {
    flex: 1.3;
}

.er-field input {
    display: block;
    width: 100%;
    height: 48px;
    padding: 0;
    font: inherit;
    font-size: var(--er-text-md);
    color: var(--er-navy);
    background: transparent;
    border: 0;
    border-radius: 0;
    outline: none;
}

.er-field input::placeholder {
    color: #8f8d85;
    opacity: 1;
}

.er-field.has-error input::placeholder {
    color: #c0392b;
}

.er-field.has-error::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8px;
    height: 2px;
    border-radius: 1px;
    background: #c0392b;
}

.er-form-divider {
    flex: none;
    width: 1px;
    height: 28px;
    background: #dedcd6;
}

.er-trap {
    position: absolute !important;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.er-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.er-submit {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 56px;
    padding: 0 32px;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    background: var(--er-navy);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color .2s;
}

.er-submit:hover {
    background: #1a2585;
}

.er-submit:focus-visible {
    outline: 2px solid var(--er-navy);
    outline-offset: 3px;
}

.er-submit-icon {
    font-size: 18px;
    line-height: 1;
    transition: transform .25s;
}

.er-submit:hover .er-submit-icon {
    transform: translateX(3px);
}

.er-submit[disabled] {
    opacity: .6;
    cursor: progress;
}

.er-form-message {
    margin-top: 16px;
    padding: 12px 16px;
    font-size: var(--er-text-sm);
    border-radius: 12px;
    background: rgba(4, 14, 87, .07);
    color: var(--er-navy);
}

.er-form-message.is-error {
    background: rgba(192, 57, 43, .1);
    color: #962d22;
}

/* ---------------------------------------------------------------- Report pages (press, social, elevator) */

.er-report-intro {
    padding: 152px 0 48px;
    border-bottom: 1px solid rgba(4, 14, 87, .145);
}

.er-back {
    font-size: var(--er-text-sm);
    color: var(--er-muted);
}

.er-back a {
    text-decoration: none;
}

.er-back a:hover {
    color: var(--er-navy);
}

.er-report-intro h1 {
    margin-top: 24px;
    font-size: var(--er-display-md);
    font-weight: 650;
    line-height: 1.14;
    letter-spacing: -.035em;
    color: var(--er-navy);
}

.er-deck {
    max-width: 60ch;
    margin-top: 20px;
    font-size: var(--er-text-lg);
    line-height: 1.55;
    color: var(--er-muted);
}

.er-jump {
    display: inline-flex;
    gap: 8px;
    margin-top: 20px;
    font-size: var(--er-text-sm);
    font-weight: 500;
    color: var(--er-navy);
    text-decoration: none;
}

.er-report-body {
    padding: 40px 0 80px;
}

.er-directory-tools {
    display: flex;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 40px;
}

.er-search {
    position: relative;
    width: 460px;
    max-width: 100%;
}

.er-search input {
    width: 100%;
    padding: 12px 0;
    font-size: var(--er-text-md);
    color: var(--er-navy);
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(4, 14, 87, .376);
    border-radius: 0;
    outline: none;
}

.er-search input:focus {
    border-bottom-color: var(--er-navy);
}

.er-search input::placeholder {
    color: var(--er-muted);
}

.er-directory-count {
    padding-bottom: 12px;
    font-size: var(--er-text-sm);
    color: var(--er-muted);
}

.er-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.er-card a {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: var(--er-navy);
    text-decoration: none;
}

.er-card-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 144px;
    background: var(--er-warm-card);
    border-radius: 4px;
    transition: background-color .2s, box-shadow .2s;
}

.er-card a:hover .er-card-thumb {
    background: #fff;
    box-shadow: 0 10px 28px rgba(4, 14, 87, .08);
}

.er-card-thumb img {
    max-width: 68%;
    height: 60px;
    object-fit: contain;
}

.er-card-thumb img.er-logo-square {
    width: 64px;
    height: 64px;
}

.er-card-publisher {
    margin: 10px 0 7px;
    font-size: var(--er-text-xs);
    line-height: 1.6;
    color: #626572;
}

.er-card-title {
    font-size: var(--er-text-lg);
    font-weight: 450;
    line-height: 1.3;
    letter-spacing: -.02em;
}

.er-card a:hover .er-card-title {
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
}

.er-cards-list {
    gap: 0 28px;
}

.er-cards-list .er-card a {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-areas: "icon title" "icon publisher";
    column-gap: 14px;
    row-gap: 2px;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid rgba(4, 14, 87, .12);
}

.er-cards-list .er-card-thumb,
.er-cards-list .er-card a:hover .er-card-thumb {
    grid-area: icon;
    width: 40px;
    height: 40px;
    background: none;
    box-shadow: none;
}

.er-cards-list .er-card-thumb img,
.er-cards-list .er-card-thumb img.er-logo-square {
    width: 40px;
    max-width: none;
    height: 40px;
}

.er-cards-list .er-card-title {
    grid-area: title;
    align-self: end;
    font-size: var(--er-text-md);
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -.01em;
}

.er-cards-list .er-card-publisher {
    grid-area: publisher;
    align-self: start;
    margin: 0;
}

.er-directory-empty {
    padding: 40px 0;
    font-size: var(--er-text-md);
    color: var(--er-muted);
}

.er-videos {
    padding-top: 0;
}

.er-videos h2 {
    margin-bottom: 32px;
    font-size: var(--er-display-sm);
    font-weight: 650;
    letter-spacing: -.03em;
    color: var(--er-navy);
}

.er-embeds {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px 24px;
}

.er-embed h3 {
    margin: 6px 0 16px;
    font-size: var(--er-text-lg);
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--er-navy);
}

.er-embed iframe {
    width: 100%;
    aspect-ratio: 9 / 17;
    border: 0;
    border-radius: 4px;
    background: #0d1421;
}

.er-source-link {
    display: inline-block;
    margin-top: 10px;
    font-size: var(--er-text-xs);
    color: var(--er-muted);
    text-decoration: none;
}

.er-source-link:hover {
    color: var(--er-navy);
}

.er-figures {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    margin: 0;
}

.er-figures div {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    gap: 14px;
}

.er-figures dd {
    margin: 0;
    font-size: var(--er-display-lg);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -.06em;
    color: var(--er-navy);
}

.er-intro-figures {
    max-width: 960px;
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid rgba(4, 14, 87, .145);
}

.er-intro-figures dd {
    font-size: var(--er-display-md);
    font-weight: 600;
    letter-spacing: -.04em;
}

.er-figures dt {
    font-size: var(--er-text-sm);
    line-height: 1.5;
    color: var(--er-muted);
}

.er-elevator-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 36px 28px;
}

.er-elevator-photo {
    margin: 0;
}

.er-elevator-photo img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: #e3e1dc;
    border-radius: 4px;
}

.er-elevator-photo figcaption {
    margin-top: 14px;
    padding-bottom: 12px;
    font-size: var(--er-text-lg);
    font-weight: 500;
    line-height: 1.4;
    color: var(--er-navy);
    border-bottom: 2px solid #ddd;
}

/* ---------------------------------------------------------------- Story */

.er-story-container {
    max-width: calc(var(--er-max) + 60px);
    margin: 0 auto;
    padding: 0 30px;
}

.er-story-cover {
    padding: 152px 0 64px;
}

.er-story-kicker {
    font-size: var(--er-text-sm);
    font-weight: 500;
    line-height: 1.5;
    color: #646773;
}

.er-story h1 {
    max-width: 22ch;
    margin-top: 24px;
    font-family: var(--er-display);
    font-size: var(--er-display-md);
    font-weight: 500;
    line-height: 1.18;
    letter-spacing: -.035em;
    color: var(--er-ink);
}

.er-story-deck {
    max-width: 60ch;
    margin-top: 20px;
    font-size: var(--er-text-lg);
    line-height: 1.55;
    color: #62636e;
}

.er-frame {
    margin: 0;
    overflow: hidden;
    border-radius: 10px;
    background: #eef0f4;
}

.er-frame a {
    display: block;
}

.er-frame img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}

.er-frame a:hover img {
    transform: scale(1.02);
}

.er-frame-cover {
    margin-top: 32px;
}

.er-story-section {
    padding: 64px 0;
}

.er-story-section .er-story-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.er-story-section h2 {
    max-width: 760px;
    font-family: var(--er-display);
    font-size: var(--er-display-sm);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -.02em;
    color: var(--er-ink);
}

.er-story-section h3 {
    max-width: 495px;
    margin-top: 16px;
    font-family: var(--er-display);
    font-size: var(--er-text-xl);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -.025em;
    color: var(--er-ink);
}

.er-story-triptych {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.er-story-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.er-story-video video {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: #101016;
    border-radius: 10px;
}

.er-story-dark {
    background: #081727;
    color: #fff;
}

.er-story-dark h2,
.er-story-dark h3 {
    color: #fff;
}

.er-story-dark .er-story-kicker {
    color: #9eb0c6;
}

.er-story-cinema {
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

.er-story-cinema video {
    border-radius: 0;
}

.er-story-next {
    padding: 64px 0;
}

.er-story-next .er-story-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px;
}

/* ---------------------------------------------------------------- Albums */

.er-page {
    max-width: 1350px;
    margin: 0 auto;
    padding: 136px 30px 72px;
}

.er-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: var(--er-text-sm);
    line-height: 1.6;
    color: var(--er-sub);
}

.er-breadcrumb a {
    text-decoration: none;
}

.er-breadcrumb a:hover {
    color: var(--er-ink);
}

.er-page-heading {
    margin-top: 32px;
}

.er-kicker {
    display: block;
    font-size: var(--er-text-sm);
    font-weight: 600;
    line-height: 1.6;
    color: var(--er-gold);
}

.er-page-heading h1 {
    margin-top: 12px;
    font-family: var(--er-display);
    font-size: var(--er-display-md);
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: -.02em;
    color: #000;
}

.er-intro {
    max-width: 640px;
    margin-top: 16px;
    font-size: var(--er-text-base);
    line-height: 1.7;
    color: var(--er-sub);
}

.er-heading-meta {
    margin-top: 18px;
    font-size: var(--er-text-sm);
    line-height: 1.5;
}

.er-heading-links {
    margin-top: 20px;
    font-size: var(--er-text-sm);
}

.er-heading-links a {
    color: var(--er-sub);
    text-decoration: none;
}

.er-heading-links a:hover {
    color: var(--er-ink);
}

.er-browser {
    margin-top: 35px;
}

.er-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 0;
    margin-bottom: 20px;
    border-top: 1px solid #ececf1;
}

.er-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.er-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    font-size: var(--er-text-sm);
    font-weight: 500;
    line-height: 1.65;
    color: var(--er-ink);
    text-decoration: none;
    border: 1px solid var(--er-line);
    border-radius: 4px;
    transition: background-color .2s, border-color .2s, color .2s;
}

.er-filter:hover {
    border-color: var(--er-ink);
}

.er-filter.is-active {
    color: #fff;
    background: var(--er-ink);
    border-color: var(--er-ink);
}

.er-filter-count {
    font-size: var(--er-text-xs);
    opacity: .75;
}

.er-group-form {
    display: flex;
    align-items: center;
    gap: 11px;
}

.er-group-form label {
    font-size: var(--er-text-sm);
    font-weight: 500;
}

.er-group-form select {
    min-width: 259px;
    height: 44px;
    padding: 8px 36px 8px 14px;
    font-size: var(--er-text-sm);
    color: var(--er-grey);
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%23555' stroke-width='1.5' d='m1 1 4 4 4-4'/%3E%3C/svg%3E") no-repeat right 14px center;
    border: 2px solid #ddd;
    border-radius: 0;
    -webkit-appearance: none;
    appearance: none;
}

.er-nojs {
    display: none;
}

.no-js .er-nojs {
    display: inline-block;
}

.er-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px 20px;
    transition: opacity .2s;
}

.er-grid.is-loading {
    opacity: .45;
}

.er-media-card {
    display: block;
    color: inherit;
}

.er-media-card-img {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 18px;
    background: #f1f0f6;
}

.er-media-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}

.er-media-card:hover img {
    transform: scale(1.04);
}

.er-video-label {
    position: absolute;
    left: 12px;
    bottom: 12px;
    padding: 5px 10px;
    font-size: var(--er-text-xs);
    line-height: 1.5;
    color: #fff;
    background: rgba(23, 23, 30, .85);
    border-radius: 20px;
}

.er-empty {
    padding: 64px 0;
    text-align: center;
}

.er-empty h2 {
    font-family: var(--er-display);
    font-size: var(--er-text-xl);
    font-weight: 600;
}

.er-empty p {
    margin-top: 8px;
    font-size: var(--er-text-md);
    color: var(--er-sub);
}

.er-more-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 32px;
}

.er-status {
    font-size: var(--er-text-sm);
    color: #73727e;
}

.er-albums {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 28px;
    margin-top: 40px;
}

.er-album-card a {
    display: block;
    color: inherit;
    text-decoration: none;
}

.er-album-cover {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 20px;
    background: #f1eff7;
}

.er-album-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}

.er-album-card a:hover .er-album-cover img {
    transform: scale(1.03);
}

.er-album-open {
    position: absolute;
    right: 16px;
    bottom: 16px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    font-size: 22px;
    color: var(--er-gold);
    background: #fff;
    border-radius: 50%;
    transition: transform .25s;
}

.er-album-card a:hover .er-album-open {
    transform: rotate(45deg);
}

.er-album-info {
    display: block;
    padding-top: 20px;
}

.er-album-name {
    display: block;
    margin-top: 8px;
    font-family: var(--er-display);
    font-size: var(--er-text-xl);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -.03em;
    color: #000;
}

.er-album-counts {
    display: block;
    margin-top: 6px;
    font-size: var(--er-text-sm);
    color: var(--er-sub);
}

.er-prose-page .er-prose {
    max-width: 760px;
    margin-top: 32px;
}

/* ---------------------------------------------------------------- Lightbox */

.er-lightbox {
    width: min(1280px, 100vw);
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    margin: auto;
    padding: 16px 24px;
    overflow: hidden;
    color: #fff;
    background: #131318;
    border: 0;
    box-shadow: 0 0 0 100vmax rgba(16, 16, 21, .91);
    font-family: var(--er-album);
}

.er-lightbox::backdrop {
    background: rgba(16, 16, 21, .94);
}

.er-lightbox[open] {
    display: flex;
    flex-direction: column;
}

.er-lightbox-top {
    display: flex;
    flex-shrink: 0;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    min-height: 48px;
}

/* The title takes the free space and wraps to two lines; the counter sits underneath. */
.er-lightbox-heading {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding-top: 2px;
}

.er-lightbox-heading h2 {
    display: -webkit-box;
    overflow: hidden;
    font-family: var(--er-sans);
    font-size: var(--er-text-lg);
    font-weight: 600;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow-wrap: anywhere;
}

.er-lightbox-counter {
    flex-shrink: 0;
    font-size: var(--er-text-sm);
    color: #b9b7c4;
}

.er-lightbox-tools {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 12px;
}

.er-lightbox-types {
    display: flex;
    gap: 6px;
}

.er-lightbox-types button {
    padding: 8px 14px;
    font-size: var(--er-text-sm);
    color: #e7e5ef;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 20px;
    cursor: pointer;
}

.er-lightbox-types button[aria-pressed="true"] {
    color: #131318;
    background: #fff;
    border-color: #fff;
}

.er-lightbox-types button span {
    opacity: .7;
}

.er-lightbox-close,
.er-lightbox-prev,
.er-lightbox-next {
    display: grid;
    place-items: center;
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    font-size: 26px;
    line-height: 1;
    color: #fff;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50%;
    cursor: pointer;
}

.er-lightbox-close {
    font-size: 18px;
}

.er-lightbox-prev svg,
.er-lightbox-next svg {
    display: block;
}

.er-lightbox-close:hover,
.er-lightbox-prev:hover,
.er-lightbox-next:hover {
    background: rgba(255, 255, 255, .11);
}

.er-lightbox-prev:disabled,
.er-lightbox-next:disabled {
    opacity: .25;
    cursor: default;
}

.er-lightbox-stage-row {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 18px;
    min-height: 0;
    margin: 10px 0;
}

/* Photo and caption are one group, centred together, so the caption sits right under the
   photo. The photo is capped by the group height (container units) minus the caption line. */
.er-lightbox-media {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 0;
    height: 100%;
    margin: 0;
    container-type: size;
}

.er-lightbox-stage {
    position: relative;
    display: flex;
    flex: 0 1 auto;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 0;
    max-height: 100%;
}

.er-lightbox-stage img {
    max-width: 100%;
    max-height: 100%;
    max-height: calc(100cqh - 3.5em);
    width: auto;
    height: auto;
    object-fit: contain;
}

.er-lightbox-stage video {
    width: 100%;
    max-height: 100%;
    max-height: calc(100cqh - 3.5em);
    background: #000;
}

.er-lightbox-stage .er-lightbox-status {
    font-size: var(--er-text-sm);
    color: #c9c6d6;
}

.er-lightbox-caption {
    flex-shrink: 0;
    max-width: 72ch;
    min-height: 1.5em;
    font-size: var(--er-text-md);
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    color: #e7e5ef;
}

.er-lightbox-caption:empty {
    display: none;
}

.er-lightbox-thumbs {
    display: flex;
    flex-shrink: 0;
    gap: 8px;
    padding: 6px 4px 10px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.er-lightbox-thumb {
    position: relative;
    flex: 0 0 72px;
    width: 72px;
    height: 54px;
    padding: 0;
    overflow: hidden;
    color: #fff;
    background: #34323d;
    border: 2px solid transparent;
    border-radius: 8px;
    cursor: pointer;
}

.er-lightbox-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.er-lightbox-thumb.is-active {
    border-color: #eaca7b;
}

.er-lightbox-thumb span {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: var(--er-text-sm);
    text-shadow: 0 1px 8px #000;
}

.er-dialog-open {
    overflow: hidden;
}

/* ---------------------------------------------------------------- Thank-you letter */

.er-letter-intro {
    padding-bottom: 40px;
}

.er-letter-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
}

.er-letter-kicker {
    font-size: var(--er-text-sm);
    font-weight: 500;
    color: var(--er-muted);
}

.er-letter-head h1 {
    margin-top: 12px;
}

.er-letter-to {
    margin-top: 28px;
}

.er-letter-to-label {
    font-size: var(--er-text-sm);
    color: var(--er-muted);
}

.er-letter-to-name {
    margin: 4px 0;
    font-size: var(--er-text-xl);
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: -.02em;
    color: var(--er-navy);
}

.er-letter-cta {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 14px;
    height: 56px;
    padding: 0 8px 0 28px;
    font-size: var(--er-text-md);
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    background: var(--er-navy);
    border-radius: 999px;
    transition: background-color .2s;
}

.er-letter-cta:hover {
    color: #fff;
    background: #1a2585;
}

.er-letter-cta-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    font-size: 18px;
    color: var(--er-navy);
    background: #fff;
    border-radius: 50%;
    transition: transform .25s;
}

.er-letter-cta:hover .er-letter-cta-icon {
    transform: rotate(45deg);
}

.er-letter-body {
    padding-top: 40px;
}

.er-letter-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 40px;
    align-items: start;
}

/* The letter reads like paper: white, a navy top edge, a measure under 75 characters. */
.er-letter {
    padding: 40px 48px 48px;
    font-size: var(--er-text-base);
    line-height: 1.75;
    color: #2b2f3a;
    background: #fff;
    border-top: 3px solid var(--er-navy);
    border-radius: 2px 2px 6px 6px;
    box-shadow: 0 12px 40px rgba(4, 14, 87, .06);
}

.er-letter > p {
    max-width: 68ch;
    margin-top: 18px;
}

.er-letter-sender {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 24px;
    margin-bottom: 8px;
    font-size: var(--er-text-sm);
    color: var(--er-muted);
    border-bottom: 1px solid rgba(4, 14, 87, .1);
}

.er-letter-sender img {
    width: auto;
    height: 36px;
}

.er-letter .er-letter-greeting {
    margin-top: 28px;
    font-weight: 650;
    color: var(--er-navy);
}

.er-letter-sign {
    margin-top: 36px;
    text-align: right;
}

.er-letter-signer-title {
    margin-top: 6px;
    font-size: var(--er-text-sm);
    color: var(--er-muted);
}

.er-letter-signer-name {
    margin-top: 4px;
    font-size: var(--er-text-lg);
    font-weight: 700;
    color: var(--er-navy);
}

@media (max-width: 1100px) {
    .er-letter-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .er-letter-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .er-letter {
        padding: 28px 20px 32px;
    }

    .er-letter-sender {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

}

/* ---------------------------------------------------------------- Responsive */

@media (max-width: 1100px) {
    .er-nav {
        display: none;
    }

    .er-menu-toggle {
        display: block;
    }

    .er-events {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 72px;
    }

    .er-event:nth-child(even) {
        margin-top: 0;
    }

    .er-stats,
    .er-cards,
    .er-embeds,
    .er-elevator-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 900px) {
    .er-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .er-page {
        padding-left: 24px;
        padding-right: 24px;
    }
}

@media (max-width: 600px) {
    :root {
        --er-gutter: 20px;
        --er-text-base: 16px;
        --er-text-lg: 18px;
        --er-text-xl: 22px;
        --er-display-sm: 26px;
        --er-display-md: 30px;
    }

    .er-consult {
        padding: 40px 0;
    }

    /* Phones: the title centred, then one field per row and the button under them. Prefixed with
       .er-consult so these win over the 900px block, which comes later in the file. */
    .er-consult .er-consult-intro {
        align-items: center;
        text-align: center;
    }

    .er-consult-intro h2 {
        font-size: 28px;
        line-height: 1.15;
        letter-spacing: -.02em;
        text-wrap: balance;
    }

    .er-consult-deck {
        display: none;
    }

    .er-consult .er-form {
        margin-top: 20px;
    }

    .er-consult .er-form-pill {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        padding: 0;
        background: none;
        border-radius: 0;
        box-shadow: none;
    }

    .er-form-pill:focus-within {
        box-shadow: none;
    }

    .er-field input {
        height: 52px;
        padding: 0 18px;
        background: #fff;
        border-radius: 999px;
    }

    .er-field input:focus {
        box-shadow: 0 0 0 2px rgba(4, 14, 87, .18);
    }

    .er-field.has-error input {
        box-shadow: 0 0 0 2px rgba(192, 57, 43, .45);
    }

    .er-field.has-error::after,
    .er-form-divider {
        display: none;
    }

    .er-consult .er-submit {
        grid-column: 1 / -1;
        width: 100%;
        height: 52px;
        margin-top: 4px;
    }

    .er-consult .er-form-message {
        text-align: center;
    }

    .er-header-inner {
        gap: 12px;
        height: 68px;
    }

    .er-header-landing,
    .er-header-report,
    .er-site {
        --er-header-h: 68px;
    }

    .er-logo img {
        width: 112px;
    }

    .er-lang-button {
        height: 40px;
        padding: 0 10px;
    }

    .er-lang-button > span {
        display: none;
    }

    .er-moments,
    .er-results {
        padding: 56px 0;
    }

    .er-moments .er-container {
        padding: 0 20px;
    }

    .er-events {
        grid-template-columns: 1fr;
        row-gap: 64px;
        margin-top: 64px;
    }

    .er-stats,
    .er-cards,
    .er-embeds,
    .er-elevator-grid,
    .er-albums,
    .er-story-triptych,
    .er-story-grid,
    .er-figures {
        grid-template-columns: 1fr;
    }

    /* Two figures per row keep the intro short; the numbers fit at this size. */
    .er-intro-figures {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 16px;
        margin-top: 32px;
        padding-top: 24px;
    }

    .er-intro-figures div {
        gap: 6px;
    }

    .er-intro-figures dd {
        font-size: 26px;
    }

    .er-stat {
        min-height: 200px;
    }

    .er-consult {
        padding: 56px 0;
    }

    .er-consult-intro {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .er-form {
        margin-top: 24px;
    }

    .er-form-pill {
        gap: 16px;
        padding: 6px 6px 6px 24px;
    }

    .er-field-contact {
        flex: 1;
    }

    .er-submit {
        height: 52px;
        padding: 0 24px;
        gap: 8px;
    }

    .er-report-intro {
        padding-top: 112px;
    }

    .er-directory-tools {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }

    .er-page {
        padding: 104px 20px 48px;
    }

    .er-toolbar,
    .er-group-form {
        align-items: stretch;
        flex-direction: column;
    }

    .er-group-form select {
        width: 100%;
        min-width: 0;
    }

    .er-grid {
        gap: 12px;
    }

    .er-media-card-img {
        border-radius: 12px;
    }

    .er-video-label {
        left: 8px;
        bottom: 8px;
    }

    .er-story-container {
        padding: 0 20px;
    }

    .er-story-cover {
        padding: 112px 0 40px;
    }

    .er-story-section {
        padding: 40px 0;
    }

    .er-story-next .er-button {
        width: 100%;
    }

    .er-lightbox {
        padding: 12px 10px;
    }

    /* Buttons on the top row, the title full width under them. */
    .er-lightbox-top {
        flex-wrap: wrap;
        gap: 10px;
    }

    .er-lightbox-tools {
        order: -1;
        width: 100%;
        justify-content: flex-end;
    }

    .er-lightbox-types {
        margin-right: auto;
    }

    .er-lightbox-heading h2 {
        font-size: var(--er-text-md);
    }

    .er-lightbox-types button {
        padding: 6px 10px;
        font-size: var(--er-text-xs);
    }

    .er-lightbox-stage-row {
        position: relative;
        gap: 6px;
    }

    .er-lightbox-prev,
    .er-lightbox-next {
        position: absolute;
        z-index: 2;
        width: 40px;
        min-width: 40px;
        height: 40px;
        background: rgba(21, 21, 27, .74);
    }

    .er-lightbox-prev {
        left: 0;
    }

    .er-lightbox-next {
        right: 0;
    }

    .er-lightbox-caption {
        padding: 0 8px;
        font-size: var(--er-text-sm);
    }

    .er-lightbox-thumb {
        flex-basis: 60px;
        width: 60px;
        height: 46px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}

/* ---------------------------------------------------------------- 404 */

/* A lost visitor gets one clear way back (the home button), two quieter ones, and the event
   itself: the home page's four days as photo cards. */
.er-not-found-code {
    font-size: var(--er-text-sm);
    font-weight: 600;
    color: var(--er-muted);
}

.er-not-found-intro h1 {
    margin-top: 12px;
}

.er-not-found-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 28px;
    margin-top: 32px;
}

.er-not-found-home {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    height: 56px;
    padding: 0 8px 0 28px;
    font-size: var(--er-text-md);
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    background: var(--er-navy);
    border-radius: 999px;
    transition: background-color .2s;
}

.er-not-found-home:hover {
    color: #fff;
    background: #1a2585;
}

.er-not-found-home-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    font-size: 18px;
    color: var(--er-navy);
    background: #fff;
    border-radius: 50%;
    transition: transform .25s;
}

.er-not-found-home:hover .er-not-found-home-icon {
    transform: translateX(3px);
}

.er-not-found-link {
    font-size: var(--er-text-md);
    font-weight: 500;
    color: var(--er-navy);
    text-decoration: underline;
    text-decoration-color: rgba(4, 14, 87, .3);
    text-underline-offset: 5px;
    transition: text-decoration-color .2s;
}

.er-not-found-link:hover {
    color: var(--er-navy);
    text-decoration-color: currentColor;
}

.er-not-found-home:focus-visible,
.er-not-found-link:focus-visible,
.er-not-found-moments a:focus-visible {
    outline: 2px solid var(--er-navy);
    outline-offset: 4px;
}

.er-not-found-moments h2 {
    margin-bottom: 28px;
    font-size: var(--er-display-sm);
    font-weight: 650;
    letter-spacing: -.03em;
    color: var(--er-navy);
}

.er-not-found-moments ul {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.er-not-found-moments a {
    display: flex;
    flex-direction: column;
    color: var(--er-navy);
    text-decoration: none;
}

.er-not-found-moments img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 3px;
    background: #d8d5ce;
    transition: opacity .2s;
}

.er-not-found-moments a:hover img {
    opacity: .88;
}

.er-not-found-date {
    margin-top: 14px;
    font-size: var(--er-text-xs);
    color: var(--er-muted);
}

.er-not-found-moments strong {
    margin-top: 4px;
    font-size: var(--er-text-lg);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.02em;
}

.er-not-found-moments strong span {
    display: inline-block;
    transition: transform .25s;
}

.er-not-found-moments a:hover strong span {
    transform: translateX(3px);
}

@media (max-width: 1100px) {
    .er-not-found-moments ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .er-not-found-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }

    .er-not-found-moments ul {
        gap: 24px 12px;
    }

    .er-not-found-date {
        margin-top: 10px;
    }
}

/* Report pages: a dark bar, so a white menu button. */
.er-header-report .er-menu-toggle {
    color: #fff;
}

.er-card-title,
.er-album-name {
    margin: 0;
}

.er-media-card {
    text-decoration: none;
}

.er-media-card-caption {
    display: block;
    margin-top: 10px;
    font-size: var(--er-text-xs);
    line-height: 1.6;
    color: #62626e;
}

@media (max-width: 600px) {
    .er-media-card-caption {
        margin-top: 8px;
    }
}

/* Story section backgrounds, chosen per section in the admin. */
.er-tone-warm {
    background: #f7f6f2;
}

.er-tone-cool {
    background: #f5f6f8;
}

@media (max-width: 600px) {
    /* Three photos: one large, two small underneath. */
    .er-story-triptych {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .er-story-triptych .er-frame:first-child {
        grid-column: 1 / -1;
    }

    .er-story-triptych .er-frame {
        border-radius: 8px;
    }
}

/* Responsive check 2026-10-31: touch targets of at least 24 px for the small text links, and
   16 px form text on touch screens so iOS doesn't zoom the page on focus. */
.er-breadcrumb a,
.er-back a,
.er-heading-links a,
.er-jump,
.er-source-link {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
}

@media (hover: none) and (pointer: coarse) {
    .er-group-form select,
    .er-search input {
        font-size: 16px;
    }
}

/* Per-element widths of the reference report pages: the heading lines stop at 28ch, the deck
   and the key figures use the full content width, and "Featured videos" sits at the right end
   of the search row. */
.er-report-intro h1,
.er-videos h2 {
    max-width: 28ch;
}

.er-report-intro .er-deck,
.er-intro-figures {
    max-width: none;
}

.er-directory-tools .er-jump {
    margin: 0 0 0 auto;
    padding-bottom: 12px;
}

/* Content widths as on the reference site. The report pages (press, social, elevator) have no
   max width, only a 5.1vw side margin measured on the full window. Half the scrollbar width
   ((100vw - 100%) / 2) comes off, as on the reference, whose sections are 100vw wide; with
   overlay scrollbars (phones, macOS) that term is 0. The elevator photos stay in a centred
   1200px grid. Phones keep the 20px gutter. */
@media (min-width: 601px) {
    .er-report-page .er-container {
        max-width: none;
        padding-left: calc(5.1vw - (100vw - 100%) / 2);
        padding-right: calc(5.1vw - (100vw - 100%) / 2);
    }
}

.er-report-page .er-elevator-grid {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.er-story h1 {
    max-width: 80%;
}

@media (max-width: 600px) {
    .er-story h1 {
        max-width: none;
    }
}

/* Thank-you letter, as on the reference: a centred 1200px column (55px side margins, 35px on
   phones), the letter beside one 350px photo card (280px on tablets) that stays in view, the
   photo below the letter on phones. More specific than the full-width report-page rule above. */
.er-report-page.er-letter-page .er-container {
    width: min(1200px, calc(100% - 110px));
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
}

.er-letter-page .er-letter-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 350px;
    gap: 36px;
    align-items: start;
}

/* Beside the letter: the first of the home page's "Moments to remember" (Ký kết), as one card
   in the reference's photo-card style; it opens that album. */
.er-letter-moment {
    position: sticky;
    top: 112px;
}

.er-letter-moment a {
    display: block;
    overflow: hidden;
    color: var(--er-navy);
    text-decoration: none;
    background: #fff;
    border: 1px solid rgba(4, 14, 87, .082);
    border-radius: 3px;
    transition: box-shadow .2s;
}

.er-letter-moment a:hover {
    color: var(--er-navy);
    box-shadow: 0 10px 28px rgba(4, 14, 87, .08);
}

.er-letter-moment a:focus-visible {
    outline: 2px solid var(--er-navy);
    outline-offset: 3px;
}

.er-letter-moment img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.er-letter-moment-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 22px 20px;
}

.er-letter-moment-text strong {
    font-size: var(--er-text-md);
    font-weight: 650;
    line-height: 1.3;
}

.er-letter-moment-text span {
    font-size: 12px;
    line-height: 1.6;
    color: #65718a;
}

@media (max-width: 1023px) {
    .er-letter-page .er-letter-layout {
        grid-template-columns: minmax(0, 1fr) 280px;
        gap: 24px;
    }
}

@media (max-width: 767px) {
    .er-report-page.er-letter-page .er-container {
        width: calc(100% - 70px);
    }

    .er-letter-page .er-letter-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .er-letter-moment {
        position: static;
    }

    /* Wider and flatter under the letter on phones, as on the reference. */
    .er-letter-moment img {
        aspect-ratio: 3 / 2;
    }
}

/* Thank-you letter typography and surfaces, measured from the reference letter page. */
body.er-letter-page {
    background: #f3f4f7;
}

.er-letter-page .er-letter-intro {
    padding-bottom: 0;
    border-bottom: 0;
}

.er-letter-page .er-letter-head {
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(4, 14, 87, .125);
}

.er-letter-page .er-letter-body {
    padding-top: 36px;
}

.er-letter-page .er-letter-kicker {
    font-size: 11px;
    font-weight: 500;
    line-height: 1.65;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #65718a;
}

.er-letter-page .er-letter-intro h1 {
    margin-top: 16px;
    font-size: 40px;
    font-weight: 650;
    line-height: 1.15;
    letter-spacing: -.035em;
    text-transform: uppercase;
}

.er-letter-page .er-letter-to-label {
    font-size: 13px;
    line-height: 1.65;
    color: #65718a;
}

.er-letter-page .er-letter-to-name {
    font-size: 25px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.025em;
}

.er-letter-page .er-letter-cta {
    gap: 20px;
    min-height: 52px;
    padding: 6px 6px 6px 22px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .025em;
    border-radius: 40px;
}

.er-letter-page .er-letter-cta-icon {
    width: 38px;
    height: 38px;
    font-size: 23px;
}

.er-letter-page .er-letter {
    padding: 40px 44px;
    color: #34415b;
    box-shadow: 0 10px 32px rgba(4, 14, 87, .016);
}

.er-letter-page .er-letter-sender {
    gap: 24px;
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(4, 14, 87, .094);
}

.er-letter-page .er-letter-sender img {
    width: 126px;
    height: auto;
}

.er-letter-page .er-letter-sender span {
    font-size: 11px;
    line-height: 1.7;
    color: #65718a;
}

.er-letter-page .er-letter > p {
    max-width: none;
    margin: 0 0 20px;
    font-size: 15px;
    line-height: 1.85;
    color: #34415b;
}

.er-letter-page .er-letter > p.er-letter-greeting {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.7;
    color: var(--er-navy);
}

.er-letter-page .er-letter-sign {
    margin-top: 0;
    padding-top: 8px;
}

.er-letter-page .er-letter-closing {
    font-size: 14px;
    line-height: 1.6;
    color: #34415b;
}

.er-letter-page .er-letter-signer-title {
    font-size: 11px;
    line-height: 1.6;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #65718a;
}

.er-letter-page .er-letter-signer-name {
    font-size: 19px;
    font-weight: 600;
    line-height: 1.6;
    color: var(--er-navy);
}

@media (max-width: 767px) {
    .er-letter-page .er-letter-intro h1 {
        font-size: 32px;
    }

    .er-letter-page .er-letter {
        padding: 28px 22px;
    }
}

.er-letter-page .er-letter-cta span:first-child {
    text-transform: uppercase;
}

/* Back to top, as on the reference: a 46px dark circle bottom right, hidden until the page is
   scrolled, with a ring that fills with the scroll position. */
.er-to-top {
    position: fixed;
    right: max(32px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
    z-index: 998;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    color: #8db7ff;
    background: #0b111c;
    border: 0;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(4, 14, 87, .5);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: opacity .2s linear, visibility .2s linear, transform .2s linear;
}

.er-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.er-to-top:hover {
    color: #fff;
}

.er-to-top-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.er-to-top-ring path {
    fill: none;
    stroke: #040e57;
    stroke-width: 4;
    transition: stroke-dashoffset 10ms linear;
}

.er-to-top-arrow {
    position: relative;
}

@media (max-width: 600px) {
    .er-to-top {
        right: max(16px, env(safe-area-inset-right));
    }
}

/* The form is the last thing on the home page: while a message shows, leave room below it so
   the fixed back-to-top button (46px, 16px from the bottom) can't sit on top of it. */
.er-consult .er-form-message:not([hidden]) {
    margin-bottom: 64px;
}