/* ==========================================================================
   Inter — the fallback behind Aptos.
   The comps are set in Aptos, which functions.php loads from Adobe Fonts.
   That kit only serves the domains its web project lists, so this stays as
   the layer beneath: a self-hosted variable font covering 100–900, which
   costs nothing to declare and is only fetched if Aptos does not arrive.
   ========================================================================== */

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/inter-variable-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/inter-variable-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
        U+A720-A7FF;
}

/* ==========================================================================
   RedLock Capital — global styles
   Design tokens first: every brand value lives here so it can be retuned
   in one place. Block-specific rules live in blocks/<name>/<name>.css.
   ========================================================================== */

:root {
    /* Brand ------------------------------------------------------------ */
    --rl-red: #cb2026;      /* Figma R3, confirmed via API */
    --rl-red-dark: #a51a1f;
    --rl-black: #000000;
    --rl-ink: #0a0a0a;

    /* Neutrals --------------------------------------------------------- */
    --rl-white: #ffffff;
    --rl-off-white: #fafafa;
    --rl-page: #fcfcfc;    /* Landing Page fill; every section sits on it */
    --rl-surface: #f7f7f7;
    --rl-card: #ebebeb;
    --rl-rule: #d8d8d8;
    --rl-rule-dark: #3a3a3a;
    --rl-body: #6d6d6d;
    --rl-body-dark: #b3b3b3;

    /* Layout ----------------------------------------------------------- */
    --rl-max: 1440px;
    /* The carousel locks later than the rest of the layout so standard
       laptops still get the design's flush-left first slide. */
    --rl-carousel-max: 1728px;
    --rl-gutter: 56px;
    --rl-rail: 339px;   /* left label column on split sections */
    --rl-col-gap: 30px; /* gap between the two content cards */
    --rl-header-h: 100px;

    /* Type ------------------------------------------------------------- */
    /* Figma R3 uses exactly five text styles. Sizes, weights and line
       heights below are lifted from the file. Letter-spacing is 0
       throughout the design, so no rule here sets tracking. */
    --rl-font: "aptos", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;

    --rl-fw-light: 300;
    --rl-fw-bold: 700;   /* Aptos-Bold; only the legal bodies use it */
    --rl-fw-label: 600;

    --rl-fs-display: 70px;   /* Advantage slide titles       70/70 */
    --rl-lh-display: 1;
    --rl-fs-h2: 34px;        /* Section headlines            34/44 */
    --rl-lh-h2: 1.294;
    --rl-fs-name: 34px;      /* Leadership names, same as h2       */
    --rl-fs-body: 18px;      /* Body copy                    18/28 */
    --rl-lh-body: 1.556;
    --rl-fs-label: 14px;     /* Uppercase 600 labels         14/17 */
    --rl-lh-label: 1.214;
    --rl-fs-eyebrow: 14px;   /* Section rail label; 12px on mobile */
    --rl-lh-eyebrow: 1.214;
    --rl-fs-fine: 13px;      /* Disclaimers, footer links    13/15 */
    --rl-lh-fine: 1.154;
}

/* Editor-only block name markers (hidden on the front end) ----------------
   The canvas is its own iframe from WP 7.1 on, so #editor -- which lives in
   the admin document outside it -- no longer matches. The frame's own body
   carries .editor-styles-wrapper; the old selector stays for the contexts
   that are still rendered inline. */
.block-title {
    display: none;
}

#editor .block-title,
.editor-styles-wrapper .block-title {
    text-align: center;
    display: block;
    background: #000;
    color: #fff;
    text-transform: uppercase;
}

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

/* One-pager anchor nav: ease between sections and stop the sticky header
   from covering the top of the section being jumped to. */
html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--rl-header-h);
}

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

body {
    background: var(--rl-page);
    font-family: var(--rl-font);
    color: var(--rl-ink);
    font-size: var(--rl-fs-body);
    line-height: var(--rl-lh-body);
    font-weight: var(--rl-fw-light);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
}

/* Layout primitives ------------------------------------------------------ */
.rl-container {
    width: 100%;
    max-width: var(--rl-max);
    margin-inline: auto;
    padding-inline: var(--rl-gutter);
}

/* Sections that pair a sticky-ish left label with a content column. */
.rl-split {
    display: grid;
    grid-template-columns: var(--rl-rail) minmax(0, 874px);
    align-items: start;
}

/* The rail label and the first line of the content column start from the
   same y in the design, measured cap to cap. Their boxes do start level, but
   a 44px line box carries 12.1px of leading above its capital where the
   label's 17px box carries 4.4 -- so the label rides high by 7.7. Nudged
   down to put the caps back on the same line.

   These leading figures are Aptos's: cap 0.657em, ascent 1.010, descent
   0.277. Every correction of this kind in the theme is derived from them,
   so they all move together if the face ever changes. */
.rl-split .rl-eyebrow {
    margin-top: 8px;
}

/* Both modules are padded 80 top and bottom in R3, measured to the ink --
   Figma bounds its text frames cap-top to baseline. The section opens on a
   34/44 headline whose line box carries 12 of leading above its capital, so
   the padding above is that 12 taken back out and the capitals land on the
   comp's 80. Below, both sections close on a box rather than a line of type,
   so there is no leading to correct and the 80 stands. */
.rl-section {
    padding-top: 68px;
    padding-bottom: 80px;
}

/* Neither the About nor the Leadership module carries a fill in R3: both sit
   straight on the page's own #FCFCFC. The variants stay in the block's field
   so a section can still be set apart later, but they resolve to the page
   tone by default rather than inventing two different whites. */
.rl-section--white,
.rl-section--surface {
    background: var(--rl-page);
}

/* The small uppercase section label in the left rail. */
.rl-eyebrow {
    font-size: var(--rl-fs-eyebrow);
    font-weight: var(--rl-fw-label);
    text-transform: uppercase;
    line-height: var(--rl-lh-eyebrow);
    margin: 0;
}

.rl-eyebrow--light {
    color: var(--rl-white);
}

/* Section headline. */
.rl-h2 {
    font-size: var(--rl-fs-h2);
    line-height: var(--rl-lh-h2);
    font-weight: var(--rl-fw-light);
    margin: 0 0 34px;
}

.rl-prose {
    color: var(--rl-body);
    font-size: var(--rl-fs-body);
    line-height: var(--rl-lh-body);
    font-weight: var(--rl-fw-light);
}

.rl-prose p {
    margin: 0 0 26px;
}

.rl-prose p:last-child {
    margin-bottom: 0;
}

.rl-fineprint {
    color: var(--rl-body);
    font-size: var(--rl-fs-fine);
    line-height: var(--rl-lh-fine);
    font-weight: var(--rl-fw-light);
}

.rl-fineprint p {
    margin: 0 0 14px;
}

.rl-fineprint p:last-child {
    margin-bottom: 0;
}

/* Buttons ---------------------------------------------------------------- */
.rl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 26px;
    border: 1px solid var(--rl-ink);
    border-radius: 999px;
    font-size: var(--rl-fs-label);
    font-weight: var(--rl-fw-label);
    text-transform: uppercase;
    text-decoration: none;
    line-height: var(--rl-lh-label);
    transition: background 0.25s ease, color 0.25s ease;
}

.rl-btn:hover,
.rl-btn:focus-visible {
    background: var(--rl-ink);
    color: var(--rl-white);
}

/* ==========================================================================
   Site header
   ========================================================================== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--rl-white);
    border-bottom: 1px solid var(--rl-rule);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: var(--rl-header-h);
}

.site-header__brand {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

.site-header__brand img {
    max-height: 52px;
    width: auto;
}

.site-header__brand-text {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
    text-transform: uppercase;
}

.site-header__right {
    display: flex;
    align-items: center;
    gap: 30px;
}

/* Only the mobile panel uses the watermark. */
.site-header__mark {
    display: none;
}

.site-nav ul {
    display: flex;
    align-items: center;
    gap: 30px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-nav a {
    font-size: var(--rl-fs-label);
    font-weight: var(--rl-fw-label);
    text-transform: uppercase;
    text-decoration: none;
    line-height: var(--rl-lh-label);
    white-space: nowrap;
    transition: color 0.25s ease;
}

.site-nav a:hover,
.site-nav a:focus-visible {
    color: var(--rl-red);
}

/* 404 --------------------------------------------------------------------
   Borrows the legal pages' rail-plus-column layout, so only the pieces that
   are not already shared need declaring: the title, and the row of section
   links under the button. */
.rl-404__title {
    font-size: var(--rl-fs-h2);
    line-height: var(--rl-lh-h2);
    font-weight: var(--rl-fw-light);
    color: var(--rl-ink);
    margin: 0 0 22px;
}

.rl-404__body {
    max-width: 554px;
}

.rl-404__action {
    /* 40 from the copy's last baseline to the top of the button, less the 7.4
       of leading the copy already carries below that baseline. */
    margin: 33px 0 0;
}

.rl-404__nav {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid var(--rl-rule);
}

.rl-404__links {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 30px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rl-404__links a {
    font-size: var(--rl-fs-label);
    font-weight: var(--rl-fw-label);
    line-height: var(--rl-lh-label);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--rl-ink);
    transition: color 0.25s ease;
}

.rl-404__links a:hover,
.rl-404__links a:focus-visible {
    color: var(--rl-red);
}

@media (prefers-reduced-motion: reduce) {
    .rl-404__links a {
        transition: none;
    }
}

@media (max-width: 900px) {
    .rl-404__nav {
        margin-top: 34px;
        padding-top: 24px;
    }

    .rl-404__links {
        gap: 12px 24px;
    }
}

/* Mobile menu toggle ----------------------------------------------------- */
.site-header__toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

/* The bars and the cross are stacked in the same 20px box and swap by
   turning through each other, rather than one being hidden and the other
   shown. Scoping matters: an unscoped `.site-header__toggle span` also
   matches the two wrappers, which is enough to paint the cross as a black
   bar and then hide it. */
.site-header__toggle {
    position: relative;
}

.site-header__toggle-bars,
.site-header__toggle-close {
    grid-area: 1 / 1;
}

.site-header__toggle-bars span {
    display: block;
    height: 2px;
    width: 24px;
    margin-inline: auto;
    background: var(--rl-ink);
}

/* ==========================================================================
   Site footer

   Figma R3 "Footer Module" (node 2231:1875), 1440x379: 57px padding all
   round, a 40px gap between each of the four rows, and everything on
   #0A0A0A under a 5px red rule. All footer text is pure white in the design
   -- there is no muted tone down here.
   ========================================================================== */
.site-footer {
    position: relative;
    overflow: hidden;
    background: var(--rl-ink);
    color: var(--rl-white);
    border-top: 5px solid var(--rl-red);
    /* The rule is an inside stroke in Figma, so it eats into the 57px
       padding rather than adding to it. */
    padding-block: 52px 57px;
}

/* The keyhole watermark: the mark's own artwork at 10% opacity, cropped so
   only its left flank crosses the footer. In the file that flank belongs to
   an ellipse centred at (1288, 411) with radii 483 x 449 -- Figma stretches
   the square artwork slightly. An inline SVG letter-boxes rather than
   stretching, so the disc below is its true 966px diameter and the vertical
   offset is taken from the centre instead. Across the footer band that
   tracks the design's edge to within 8px, and the mark stays undistorted.

   The mark is anchored to the same 1440px centred column the footer content
   uses, not to the viewport. Past that width it stops growing and holds its
   position relative to the columns; a wider window just adds plain black at
   the sides. Sized off the viewport it kept inflating until only a shallow
   arc of the disc was on screen and the keyhole had left it entirely. */
.site-footer__mark {
    position: absolute;
    inset: 0;
    max-width: var(--rl-max);
    margin-inline: auto;
    color: #e6e6e6;
    opacity: 0.1;
    pointer-events: none;
    z-index: 0;
}

/* Percentages here resolve against that band. The vertical offset rides on
   translate rather than `top`, since a percentage top would resolve against
   the footer's height instead of its width and drift as the copy reflows.

   These are the design's own figures. The mark frames itself correctly at
   them now that the keyhole is traced from the artwork: the bulb sits whole
   inside the footer and the stem runs off the bottom edge, as it does in the
   comp. */
.site-footer__mark-disc {
    position: absolute;
    top: 0;
    left: 55.9%;
    width: 67.1%;
    aspect-ratio: 1;
    transform: translateY(-7.35%);
}

.site-footer__mark-disc svg {
    width: 100%;
    height: 100%;
    display: block;
}

.site-footer .rl-container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* 309 logo | 422 nav | 252 | 252, on a 30px gutter, inside 1326. */
.site-footer__top {
    display: grid;
    grid-template-columns: 309px 422px minmax(0, 1fr) minmax(0, 1fr);
    gap: 30px;
}

.site-footer__logo,
.site-footer__brand img {
    width: 140px;
    height: auto;
    max-height: none;
}

.site-footer__brand-text {
    font-size: 22px;
    font-weight: var(--rl-fw-label);
    text-transform: uppercase;
    text-decoration: none;
}

/* Figma stacks these 20px apart measured glyph-to-glyph. A 17px line box
   already supplies 8 of that, so the gap carries the rest. */
.footer-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
    align-content: start;
}

.footer-nav a {
    /* Block, so the row is the height of this 14/17 text. Left inline, the
       list item's own 18px strut governs the line box and each row comes out
       28px tall, which is what pushed the whole footer out of shape. */
    display: block;
    font-size: var(--rl-fs-label);
    font-weight: var(--rl-fw-label);
    text-transform: uppercase;
    text-decoration: none;
    line-height: var(--rl-lh-label);
    transition: color 0.25s ease;
}

.footer-nav a:hover,
.footer-nav a:focus-visible {
    color: var(--rl-red);
}

/* Location / General Inquiries: label, hairline, value -- 20px apart, and the
   rule runs the full width of its own column rather than the text. */
.site-footer__col-title {
    font-size: var(--rl-fs-label);
    font-weight: var(--rl-fw-label);
    text-transform: uppercase;
    line-height: var(--rl-lh-label);
    color: var(--rl-white);
    margin: 0 0 17px;
    padding-bottom: 16px;
    border-bottom: 0.5px solid var(--rl-white);
}

.site-footer__col p,
.site-footer__col a {
    font-size: var(--rl-fs-fine);
    line-height: var(--rl-lh-fine);
    color: var(--rl-white);
    margin: 0;
    text-decoration: none;
    transition: color 0.25s ease;
}

.site-footer__col a:hover,
.site-footer__col a:focus-visible {
    color: var(--rl-red);
}

.site-footer__divider {
    height: 0;
    margin: 0;
    border: 0;
    border-top: 0.5px solid var(--rl-white);
}

/* 761 copyright | 535 links, the links spread across their own column. */
.site-footer__bottom {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 535px;
    gap: 30px;
    align-items: start;
    font-size: var(--rl-fs-fine);
    line-height: var(--rl-lh-fine);
    color: var(--rl-white);
}

.site-footer__copyright {
    margin: 0;
}

.site-footer__legal-links {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer__legal-links a {
    text-decoration: none;
    transition: color 0.25s ease;
}

.site-footer__legal-links a:hover,
.site-footer__legal-links a:focus-visible {
    color: var(--rl-red);
}

.site-footer__disclaimer {
    font-size: var(--rl-fs-fine);
    line-height: var(--rl-lh-fine);
    color: var(--rl-white);
}

.site-footer__disclaimer p {
    margin: 0 0 12px;
}

.site-footer__disclaimer p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1200px) {
    /* R3 only draws 1440 and 360, and its headline holds at 34px until the
       mobile comp drops it to 24. So nothing shrinks here except display,
       which at 70px would otherwise crowd the narrower slide. */
    :root {
        --rl-rail: 240px;
        --rl-fs-display: 56px;
    }

    .site-footer__top {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 40px;
    }
}

@media (max-width: 900px) {
    /* Mobile sizes come from the R3 mobile comp (node 4001:1637), which
       specifies the About module and footer. Labels and fine print do not
       change size there; the section rail label drops to 12/15. Display is
       the one value the comp never adapts -- Advantage was left at desktop
       width -- so it is scaled in proportion to the headline. */
    /* Mobile figures come from the R3 mobile frame (node 4001:1637), which
       now adapts every module. Labels drop to 12/15 and fine print to 11/13;
       the one exception is the About partner-card caption, which the design
       leaves at 14/17 and which overrides this locally. */
    :root {
        --rl-gutter: 24px;
        --rl-fs-display: 34px;
        --rl-lh-display: 1.294;
        --rl-fs-h2: 24px;
        --rl-lh-h2: 1.25;
        --rl-fs-name: 24px;
        --rl-fs-body: 16px;
        --rl-lh-body: 1.5;
        --rl-fs-label: 12px;
        --rl-lh-label: 1.25;
        --rl-fs-eyebrow: 12px;
        --rl-lh-eyebrow: 1.25;
        --rl-fs-fine: 11px;
        --rl-lh-fine: 1.182;
        --rl-header-h: 64px;
        --rl-section-pad: 52px;
    }

    .rl-section {
        padding-block: var(--rl-section-pad);
    }

    /* The mobile frame stacks the label and its content 30px apart, so the
       cap-alignment nudge above no longer applies. */
    .rl-split {
        gap: 30px;
    }

    .rl-split .rl-eyebrow {
        margin-top: 0;
    }

    /* Collapse the label rail: the eyebrow sits above its content. */
    .rl-split {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    /* Header ------------------------------------------------------------
       64px bar, 100x34 logo, and a 20x10 hamburger of three hairlines that
       becomes the 16px cross from the file once the panel is open.

       Fixed rather than sticky here. The open menu locks the page with
       `overflow: hidden`, and that turns the scroller into a containing
       block, which a sticky header then sticks to instead of the viewport --
       it dropped away with the page and left a strip of content showing
       above the panel. Fixed is immune to that, so #page carries the header's
       height as padding to make up for it leaving the flow. */
    .site-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
    }

    #page {
        padding-top: calc(var(--rl-header-h) + 1px);
    }
    /* Header ------------------------------------------------------------
       64px bar, 100x34 logo, and a 20x10 hamburger of three hairlines that
       becomes the 16px cross from the file once the panel is open. */
    .site-header__brand img,
    .site-header__brand .custom-logo {
        width: 100px;
        max-height: 34px;
    }

    /* Hamburger <-> cross ------------------------------------------------
       Both marks occupy the same grid cell and turn through one another:
       the bars converge on the middle line and rotate out as the cross
       rotates in. The middle bar has nowhere to go, so it just fades. */
    .site-header__toggle {
        display: grid;
        place-items: center;
        width: 20px;
        height: 20px;
        gap: 0;
    }

    /* The glyph is 20px in the comp, which is under the 24px minimum a touch
       target is meant to offer. The drawing stays 20; the target around it is
       44, reaching out past the button rather than pushing the header about. */
    .site-header__toggle::after {
        content: '';
        position: absolute;
        inset: -12px;
    }

    .site-header__toggle-bars {
        display: flex;
        flex-direction: column;
        gap: 5px;
        width: 20px;
        transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .site-header__toggle-bars span {
        display: block;
        width: 20px;
        height: 1px;
        background: var(--rl-ink);
        transition:
            transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
            opacity 0.18s ease;
    }

    .site-header__toggle-close {
        display: block;
        width: 16px;
        height: 16px;
        color: var(--rl-ink);
        opacity: 0;
        transform: rotate(-90deg) scale(0.6);
        transition:
            transform 0.36s cubic-bezier(0.22, 1, 0.36, 1),
            opacity 0.2s ease;
    }

    .site-header__toggle-close svg {
        display: block;
        width: 100%;
        height: 100%;
    }

    .site-header__toggle[aria-expanded="true"] .site-header__toggle-bars {
        transform: rotate(90deg);
    }

    /* 6px is the gap between the outer bars and the centre line. */
    .site-header__toggle[aria-expanded="true"] .site-header__toggle-bars span:nth-child(1) {
        transform: translateY(6px);
        opacity: 0;
    }

    .site-header__toggle[aria-expanded="true"] .site-header__toggle-bars span:nth-child(2) {
        opacity: 0;
    }

    .site-header__toggle[aria-expanded="true"] .site-header__toggle-bars span:nth-child(3) {
        transform: translateY(-6px);
        opacity: 0;
    }

    .site-header__toggle[aria-expanded="true"] .site-header__toggle-close {
        opacity: 1;
        transform: rotate(0) scale(1);
        transition:
            transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.1s,
            opacity 0.24s ease 0.12s;
    }

    /* The panel covers the viewport, so the page behind it holds still.
       Scoped to the breakpoint: above it the panel is part of the header
       and there is nothing to lock. */
    html.has-nav-open,
    html.has-nav-open body {
        overflow: hidden;
    }

    /* Navigation panel ---------------------------------------------------
       A full screen below the bar rather than a dropdown: centred links on
       #FCFCFC, each over a 150px red rule, with the keyhole mark washed in
       behind at 30%. */
    .site-header__right {
        position: fixed;
        inset: calc(var(--rl-header-h) + 1px) 0 0 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0;
        padding: 40px var(--rl-gutter);
        background: var(--rl-surface-light, #fcfcfc);
        border-bottom: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        z-index: 40;

        /* Closed. Kept in the layout and hidden with visibility so the panel
           can fade rather than blink, and so nothing inside it is focusable
           until it is actually on screen. */
        opacity: 0;
        visibility: hidden;
        transition:
            opacity 0.28s ease,
            visibility 0s linear 0.28s;
    }

    .site-header__right.is-open {
        opacity: 1;
        visibility: visible;
        transition:
            opacity 0.28s ease,
            visibility 0s linear 0s;
    }

    /* Rows deal in from the top. --rl-i is each row's index, set by site.js,
       so the sequence holds whatever the menu contains. */
    .site-nav li,
    .site-header__right .rl-btn {
        opacity: 0;
        transform: translateY(-14px);
        transition:
            opacity 0.3s ease,
            transform 0.44s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .site-header__right.is-open .site-nav li,
    .site-header__right.is-open .rl-btn {
        opacity: 1;
        transform: none;
        transition-delay: calc(120ms + var(--rl-i, 0) * 70ms);
    }

    /* Leaving, they go together and quickly -- a staggered exit only delays
       the page the reader has already asked for. */
    .site-header__mark {
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .site-header__right.is-open .site-header__mark {
        opacity: 0.3;
        transition: opacity 0.4s ease 0.1s;
    }

    /* The mark is 683px across at a 360px screen -- nearly twice the width
       -- so only its left flank and the keyhole itself land on screen. */
    .site-header__mark {
        display: block;
        position: absolute;
        top: 0;
        left: 5.2%;
        width: 190%;
        aspect-ratio: 1;
        transform: translateY(4.9%);
        color: #e6e6e6;
        pointer-events: none;
    }

    .site-header__mark svg {
        display: block;
        width: 100%;
        height: 100%;
    }

    .site-nav {
        position: relative;
        z-index: 1;
        width: 100%;
    }

    .site-nav ul {
        flex-direction: column;
        align-items: center;
        gap: 0;
    }

    .site-nav li + li {
        margin-top: 34px;
    }

    .site-nav a {
        display: block;
        padding: 0;
        border-bottom: 0;
        font-size: var(--rl-fs-h2);
        line-height: var(--rl-lh-h2);
        font-weight: var(--rl-fw-light);
        text-transform: none;
        color: var(--rl-ink);
        text-align: center;
    }

    /* The rule under each link is a fixed 150px, centred, not a full-width
       border. */
    .site-nav a::after {
        content: "";
        display: block;
        width: 150px;
        height: 1px;
        margin: 8px auto 0;
        background: var(--rl-red);
    }

    .site-header__right .rl-btn {
        position: relative;
        z-index: 1;
        margin-top: 40px;
        align-self: center;
        padding: 5px 20px;
        min-width: 180px;
        border: 1px solid var(--rl-red);
        border-radius: 50px;
        font-size: var(--rl-fs-h2);
        line-height: var(--rl-lh-h2);
        font-weight: var(--rl-fw-light);
        text-transform: none;
        color: var(--rl-ink);
    }

    .site-header__right .rl-btn:hover,
    .site-header__right .rl-btn:focus-visible {
        background: var(--rl-red);
        color: var(--rl-white);
    }

    /* Footer -------------------------------------------------------------
       52px padding, one column, 52px between the logo, the nav row and the
       two contact blocks. The nav stays on one line and spreads. */
    .site-footer {
        padding-block: 47px 52px;
    }

    .site-footer .rl-container {
        gap: 40px;
    }

    /* Stacked, and the rhythm is uneven: 52px after the logo and after the
       nav row, but only 30px between the two contact blocks. The grid gap
       carries the 30 and the two items above make up the difference. */
    .site-footer__top {
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
    }

    .site-footer__brand,
    .site-footer .footer-nav {
        margin-bottom: 22px;
    }

    .site-footer__logo,
    .site-footer__brand img {
        width: 100px;
    }

    .footer-nav ul {
        grid-auto-flow: column;
        justify-content: space-between;
        gap: 20px;
    }

    .site-footer__col-title {
        font-size: var(--rl-fs-eyebrow);
        line-height: var(--rl-lh-eyebrow);
        margin: 0 0 14px;
        padding-bottom: 13px;
    }

    .site-footer__bottom {
        gap: 15px;
    }

    .site-footer__bottom {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    /* Spread across the column, ending flush with the right edge, exactly
       as the nav row above does -- both are SPACE_BETWEEN in the mobile
       frame. No wrapping: three short links fit the 312px column, and
       wrapping would break the alignment with the row above. */
    .site-footer__legal-links {
        flex-wrap: nowrap;
        gap: 20px;
    }

    /* Pull the watermark in at narrow widths, where a disc scaled to the
       full column reads as a smudge rather than a mark. */
    .site-footer__mark-disc {
        left: 45%;
        width: 90%;
    }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
    /* Everything still changes state, it just stops moving. */
    .site-header__toggle-bars,
    .site-header__toggle-bars span,
    .site-header__toggle-close,
    .site-header__right,
    .site-header__right.is-open,
    .site-nav li,
    .site-header__right .rl-btn,
    .site-header__right.is-open .site-nav li,
    .site-header__right.is-open .rl-btn,
    .site-header__mark,
    .site-header__right.is-open .site-header__mark,
    .site-header__toggle[aria-expanded="true"] .site-header__toggle-close,
    .site-header__toggle[aria-expanded="true"] .site-header__toggle-bars,
    .site-header__toggle[aria-expanded="true"] .site-header__toggle-bars span {
        transition: none;
        transition-delay: 0s;
    }

    /* The open state's own rules out-specify the plain-class resets above,
       so the cross has to be told again not to arrive spinning. */
    .site-header__toggle[aria-expanded="true"] .site-header__toggle-close {
        transform: none;
    }

    .site-header__toggle-close {
        transform: none;
    }

    .site-header__toggle[aria-expanded="true"] .site-header__toggle-bars,
    .site-header__toggle[aria-expanded="true"] .site-header__toggle-bars span {
        transform: none;
    }

    .site-nav li,
    .site-header__right .rl-btn {
        transform: none;
    }
}