/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-jnxr6cgsuk],
.components-reconnect-repeated-attempt-visible[b-jnxr6cgsuk],
.components-reconnect-failed-visible[b-jnxr6cgsuk],
.components-pause-visible[b-jnxr6cgsuk],
.components-resume-failed-visible[b-jnxr6cgsuk],
.components-rejoining-animation[b-jnxr6cgsuk] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-jnxr6cgsuk],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-jnxr6cgsuk],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-jnxr6cgsuk],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-jnxr6cgsuk],
#components-reconnect-modal.components-reconnect-retrying[b-jnxr6cgsuk],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-jnxr6cgsuk],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-jnxr6cgsuk],
#components-reconnect-modal.components-reconnect-failed[b-jnxr6cgsuk],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-jnxr6cgsuk] {
    display: block;
}


#components-reconnect-modal[b-jnxr6cgsuk] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-jnxr6cgsuk 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-jnxr6cgsuk 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-jnxr6cgsuk 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-jnxr6cgsuk]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-jnxr6cgsuk 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-jnxr6cgsuk {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-jnxr6cgsuk {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-jnxr6cgsuk {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-jnxr6cgsuk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-jnxr6cgsuk] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-jnxr6cgsuk] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-jnxr6cgsuk] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-jnxr6cgsuk] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-jnxr6cgsuk] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-jnxr6cgsuk] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-jnxr6cgsuk 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-jnxr6cgsuk] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-jnxr6cgsuk {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/LandingPage.razor.rz.scp.css */
/* RPRA Consulting -- landing page (scoped to LandingPage.razor).
   2026-07 redesign: editorial left-aligned hero, hairline + gold detail system,
   numbered service cards, credentials column, plum contact band with ghosted R.
   Layered: base styles, then the accessibility layer (focus, skip link, reduced
   motion, contrast-safe inks), then the mobile layer (max-width 640px).
   Ink rule: small gold text uses var(--dark-ochre) #7d5719 (AA on cream); the
   brand gold var(--ochre) #b1832e is reserved for rules, borders, motif blocks,
   and large-text accents (3:1 large-text threshold only). */

/* ---- Accessibility: skip link ---- */
.skip-link[b-zr06p2bsz9] {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 12px 20px;
    background: var(--aubergine);
    color: var(--ivory);
    font: 600 13px/1 var(--sans);
    letter-spacing: .08em;
}

    .skip-link:focus[b-zr06p2bsz9] {
        left: 0;
    }

/* ---- Accessibility: visible keyboard focus ---- */
a:focus-visible[b-zr06p2bsz9],
.btn-gold:focus-visible[b-zr06p2bsz9],
.btn-gold-dark:focus-visible[b-zr06p2bsz9] {
    outline: 2px solid var(--dark-ochre);
    outline-offset: 3px;
}

.contact a:focus-visible[b-zr06p2bsz9] {
    outline-color: var(--gold);
}

/* ---- Accessibility: respect reduced-motion (belt to the JS guard's braces) ---- */
@media (prefers-reduced-motion: reduce) {
    [data-reveal][b-zr06p2bsz9] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ---- Header ---- */
.site-header[b-zr06p2bsz9] {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(247, 241, 230, .92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--hair-12);
}

.header-inner[b-zr06p2bsz9] {
    margin: 0 auto;
    padding: 0 6vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 72px;
    flex-wrap: wrap;
}

.brand-lockup[b-zr06p2bsz9] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 0;
}

    .brand-lockup img[b-zr06p2bsz9] {
        /* 29px, not 26. The 2026-07-25 suite files carry more internal padding than the
           previous generation, so identical CSS rendered the mark 12% smaller. This is
           optical parity with what shipped before, not a size change. */
        height: 29px;
        width: auto;
        display: block;
    }

.lockup-text[b-zr06p2bsz9] {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.lockup-name[b-zr06p2bsz9] {
    font: 600 13px/1.25 var(--sans);
    letter-spacing: .22em;
    color: var(--aubergine);
}

/* Sub-line ink is the AA-safe gold (house rule for small gold text). FR
   "CONSULTATION" is two letters longer than "CONSULTING", so its tracking
   eases to .27em (FR logo package: .26-.28em vs .32em EN) to keep a similar
   footprint. */
.lockup-sub[b-zr06p2bsz9] {
    font: 500 9px/1.25 var(--sans);
    letter-spacing: .32em;
    color: var(--dark-ochre);
}

.lockup-sub-fr[b-zr06p2bsz9] {
    letter-spacing: .27em;
}

.main-nav[b-zr06p2bsz9] {
    display: flex;
    align-items: center;
    gap: clamp(16px, 3vw, 36px);
}

.nav-link[b-zr06p2bsz9] {
    font: 500 12px/1 var(--sans);
    letter-spacing: .18em;
    color: var(--aubergine);
    white-space: nowrap;
    padding: 12px 2px; /* enlarged touch/click target */
    transition: color .2s ease;
}

    .nav-link:hover[b-zr06p2bsz9] {
        color: var(--dark-ochre); /* AA gold ink, not the raw brand gold */
    }

.nav-lang[b-zr06p2bsz9] {
    border-left: 1px solid var(--hair-12);
    padding-left: clamp(16px, 3vw, 36px);
    color: var(--dark-ochre);
}

/* ---- Shared detail system: gold rule + letterspaced eyebrow ---- */
.eyebrow[b-zr06p2bsz9] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 24px;
    font: 600 11px/1 var(--sans);
    letter-spacing: .3em;
    color: var(--dark-ochre);
}

.eyebrow-rule[b-zr06p2bsz9] {
    flex: 0 0 44px;
    height: 1px;
    background: var(--ochre);
}

/* ---- Hero: editorial left-aligned, brand-block motif at right ---- */
.hero[b-zr06p2bsz9] {
    background: var(--ivory);
}

.hero-inner[b-zr06p2bsz9] {
    padding: clamp(72px, 12vh, 120px) 6vw clamp(64px, 11vh, 110px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(40px, 6vw, 100px);
    flex-wrap: wrap;
}

.hero-copy[b-zr06p2bsz9] {
    max-width: 880px;
    flex: 1 1 480px;
}

.hero-title[b-zr06p2bsz9] {
    margin: 0;
    font: 500 clamp(56px, 7.2vw, 104px)/1.04 var(--serif);
    letter-spacing: -0.01em;
    color: var(--aubergine);
    text-wrap: balance;
}

    /* Large-text accent: 56px+ so the brand gold's 3.03:1 clears the 3:1 bar. */
    .hero-title em[b-zr06p2bsz9] {
        font-style: italic;
        color: var(--ochre);
    }

.hero-support[b-zr06p2bsz9] {
    margin: 36px 0 48px;
    font: 400 18px/1.7 var(--sans);
    color: var(--muted);
    max-width: 440px;
}

/* Outlined gold button on light bands */
.btn-gold[b-zr06p2bsz9] {
    display: inline-block;
    padding: 15px 34px;
    border: 1px solid var(--ochre);
    color: var(--aubergine);
    font: 600 12px/1 var(--sans);
    letter-spacing: .24em;
    transition: all .25s;
}

    .btn-gold:hover[b-zr06p2bsz9] {
        background: var(--aubergine);
        border-color: var(--aubergine);
        color: var(--ivory);
    }

.hero-motif[b-zr06p2bsz9] {
    flex: 0 1 auto;
    display: grid;
    grid-template-columns: repeat(2, clamp(100px, 11vw, 150px));
    gap: 8px;
    margin: 0 auto;
}

.motif-cell[b-zr06p2bsz9] {
    aspect-ratio: 1;
}

.motif-1[b-zr06p2bsz9] {
    background: var(--aubergine);
    border-radius: 0 45% 0 0;
}

.motif-2[b-zr06p2bsz9] {
    background: var(--ochre);
}

.motif-3[b-zr06p2bsz9] {
    background: var(--sand);
}

.motif-4[b-zr06p2bsz9] {
    background: var(--deep-plum);
    border-radius: 0 0 45% 0;
}

/* ---- Services (warm-white band) ---- */
.services[b-zr06p2bsz9] {
    background: var(--ivory-tint);
    border-top: 1px solid var(--hair-08);
}

.section-inner[b-zr06p2bsz9] {
    padding: clamp(72px, 11vh, 110px) 6vw clamp(76px, 12vh, 120px);
}

.section-head[b-zr06p2bsz9] {
    margin-bottom: clamp(48px, 8vh, 80px);
}

/* Title and intro are direct flex siblings: baseline alignment then pairs the
   title's baseline with the intro's first line. With the eyebrow inside the
   same flex item (the previous shape) the item's first line IS the eyebrow,
   so the intro rode at the top of the row instead. */
.section-head-row[b-zr06p2bsz9] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}

.section-title[b-zr06p2bsz9] {
    margin: 0;
    font: 500 clamp(40px, 4.2vw, 60px)/1.1 var(--serif);
    color: var(--aubergine);
    text-wrap: balance;
}

.section-intro[b-zr06p2bsz9] {
    margin: 0;
    font: 400 15px/1.7 var(--sans);
    color: var(--muted);
    max-width: 340px;
}

.pillars[b-zr06p2bsz9] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    column-gap: 48px;
    row-gap: 0;
}

.pillar[b-zr06p2bsz9] {
    margin: 0;
    padding: 48px 0 56px;
    border-top: 1px solid var(--hair-14);
}

.pillar-numeral[b-zr06p2bsz9] {
    font: 400 italic 18px/1 var(--serif);
    color: var(--dark-ochre);
}

.pillar-title[b-zr06p2bsz9] {
    margin: 18px 0 16px;
    font: 600 28px/1.2 var(--serif);
    color: var(--aubergine);
    text-wrap: balance;
}

.pillar-desc[b-zr06p2bsz9] {
    margin: 0;
    font: 400 15px/1.75 var(--sans);
    color: var(--muted);
}

/* ---- About (cream band, copy + credentials column) ---- */
.about[b-zr06p2bsz9] {
    background: var(--ivory);
    border-top: 1px solid var(--hair-08);
}

.about-grid[b-zr06p2bsz9] {
    padding: clamp(72px, 11vh, 120px) 6vw;
    display: grid;
    grid-template-columns: minmax(320px, 1.3fr) minmax(280px, 1fr);
    gap: clamp(48px, 7vw, 120px);
    align-items: start;
}

.about-copy .section-title[b-zr06p2bsz9] {
    margin-bottom: 32px;
}

.about-copy > p[b-zr06p2bsz9] {
    margin: 0 0 22px;
    font: 400 16px/1.8 var(--sans);
    color: var(--muted);
    max-width: 520px;
}

    .about-copy > p:last-child[b-zr06p2bsz9] {
        margin-bottom: 0;
    }

.credentials[b-zr06p2bsz9] {
    border-top: 1px solid var(--ochre);
    margin-top: 12px;
}

.cred-row[b-zr06p2bsz9] {
    padding: 32px 0;
    border-bottom: 1px solid var(--hair-12);
}

.cred-big[b-zr06p2bsz9] {
    font: 500 40px/1.1 var(--serif);
    color: var(--aubergine);
}

.cred-small[b-zr06p2bsz9] {
    margin-top: 10px;
    font: 600 12px/1.5 var(--sans);
    letter-spacing: .2em;
    color: var(--dark-ochre);
}

/* ---- Contact (plum band; ghosted R; carries the fine print) ---- */
.contact[b-zr06p2bsz9] {
    position: relative;
    overflow: hidden;
    background: var(--footer-plum);
    padding: clamp(84px, 13vh, 130px) 6vw clamp(24px, 4vh, 32px);
}

.contact-ghost[b-zr06p2bsz9] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font: 500 min(40vw, 520px)/1 var(--serif);
    color: rgba(247, 241, 230, .03);
    pointer-events: none;
    user-select: none;
}

.contact-inner[b-zr06p2bsz9] {
    position: relative;
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.contact-monogram[b-zr06p2bsz9] {
    width: 96px;
    height: auto;
    display: block;
    opacity: .95;
}

.contact-rule[b-zr06p2bsz9] {
    width: 44px;
    height: 1px;
    background: var(--gold);
    margin: 32px 0;
}

.contact-title[b-zr06p2bsz9] {
    margin: 0 0 24px;
    font: 500 clamp(38px, 4.5vw, 58px)/1.15 var(--serif);
    color: var(--ivory);
    text-wrap: balance;
}

    /* Large-text accent: --gold is 6.06:1 on the footer plum, AA at any size. */
    .contact-title em[b-zr06p2bsz9] {
        font-style: italic;
        color: var(--gold);
    }

/* Contrast-safe: 65% cream is 6.60:1 on the footer plum. */
.contact-sub[b-zr06p2bsz9] {
    margin: 0 0 44px;
    font: 400 16px/1.7 var(--sans);
    color: rgba(247, 241, 230, .65);
    max-width: 440px;
}

/* Outlined gold button on the plum band */
.btn-gold-dark[b-zr06p2bsz9] {
    display: inline-block;
    padding: 15px 34px;
    border: 1px solid var(--gold);
    color: var(--ivory);
    font: 600 12px/1 var(--sans);
    letter-spacing: .24em;
    transition: all .25s;
}

    .btn-gold-dark:hover[b-zr06p2bsz9] {
        background: var(--gold);
        color: var(--footer-plum);
    }

.contact-email[b-zr06p2bsz9] {
    margin-top: 28px;
    font: 400 14px/1 var(--sans);
    letter-spacing: .04em;
    color: var(--gold);
    padding: 10px 0; /* enlarged touch target */
    transition: color .2s ease;
}

    .contact-email:hover[b-zr06p2bsz9] {
        color: var(--ivory);
    }

/* Fine-print row: the page footer, inside the plum band.
   Contrast-safe: 65% cream (6.60:1); the redesign's 50% sat at the 4.5:1 line. */
.fine-print[b-zr06p2bsz9] {
    position: relative;
    margin-top: clamp(64px, 10vh, 100px);
    padding-top: 32px;
    border-top: 1px solid rgba(247, 241, 230, .12);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    font: 400 11px/1.6 var(--sans);
    letter-spacing: .16em;
    color: rgba(247, 241, 230, .65);
}

/* ---- Mobile layer (dedicated small-screen formatting) ---- */
@media (max-width: 640px) {
    /* Two compact rows (lockup, then links) and NOT sticky: the localized lockup
       plus four letterspaced links cannot share one 375px row, and a ~100px
       sticky header eats a third of a phone screen. Design-review fallback. */
    .site-header[b-zr06p2bsz9] {
        position: static;
    }

    .header-inner[b-zr06p2bsz9] {
        justify-content: center;
        row-gap: 0;
        padding: 4px 5vw 10px;
        min-height: 0;
    }

    .brand-lockup[b-zr06p2bsz9] {
        padding: 8px 0 2px;
    }

    .main-nav[b-zr06p2bsz9] {
        gap: 12px;
    }

    .nav-link[b-zr06p2bsz9] {
        font-size: 11px;
        letter-spacing: .12em;
        padding: 8px 2px;
    }

    .nav-lang[b-zr06p2bsz9] {
        padding-left: 12px;
    }

    .hero-inner[b-zr06p2bsz9] {
        padding: 52px 20px 56px;
    }

    /* FR "Comptabilisées." is one unbreakable 299px word at the 56px clamp floor;
       16vw keeps it inside viewports down to 320px. */
    .hero-title[b-zr06p2bsz9] {
        font-size: clamp(44px, 16vw, 56px);
    }

    .hero-support[b-zr06p2bsz9] {
        margin: 28px 0 36px;
        font-size: 16px;
    }

    /* No mobile override for .hero-motif: the base clamp(100px, 11vw, 150px)
       bottoms out at 100px cells (motif 208px), centred by its own margin,
       which is exactly the design spec on a phone. */

    .btn-gold[b-zr06p2bsz9],
    .btn-gold-dark[b-zr06p2bsz9] {
        width: 100%;
        max-width: 320px;
        text-align: center;
        padding: 16px 20px;
        box-sizing: border-box;
    }

    .section-inner[b-zr06p2bsz9],
    .about-grid[b-zr06p2bsz9] {
        padding: 56px 20px;
    }

    .section-inner[b-zr06p2bsz9] {
        padding-bottom: 40px;
    }

    .section-head[b-zr06p2bsz9] {
        margin-bottom: 8px;
    }

    .about-grid[b-zr06p2bsz9] {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .pillar[b-zr06p2bsz9] {
        padding: 28px 0 32px;
    }

        /* the section's own 40px bottom padding carries the gap after the last card */
        .pillar:last-child[b-zr06p2bsz9] {
            padding-bottom: 8px;
        }

    .cred-big[b-zr06p2bsz9] {
        font-size: 32px;
    }

    .contact[b-zr06p2bsz9] {
        padding: 64px 20px 24px;
    }

    .contact-monogram[b-zr06p2bsz9] {
        width: 76px;
    }

    .fine-print[b-zr06p2bsz9] {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 8px;
        margin-top: 56px;
    }
}