/*
|--------------------------------------------------------------------------
| Royal Servicess LLC
| Public Information / Legal Pages
|--------------------------------------------------------------------------
|
| ONYX-PUBLIC-2026
|
| Shared presentation layer for public information pages.
|
|--------------------------------------------------------------------------
*/


/* ==========================================================================
   01. DESIGN SYSTEM
   ========================================================================== */

:root {
    --public-black: #070708;
    --public-black-soft: #0a0a0b;
    --public-panel: #101011;
    --public-panel-soft: #141415;

    --public-line: rgba(255, 255, 255, 0.075);
    --public-line-strong: rgba(255, 255, 255, 0.13);

    --public-text: #f4f1e9;
    --public-text-soft: #c6c1b7;
    --public-muted: #89857d;
    --public-muted-dark: #65615b;

    --public-gold: #c8a55b;
    --public-gold-soft: #e2ca94;
    --public-gold-pale: #f0dfb5;

    --public-serif:
        Georgia,
        "Times New Roman",
        Times,
        serif;

    --public-sans:
        Inter,
        ui-sans-serif,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --public-container: 1240px;

    --public-transition:
        220ms cubic-bezier(.2, .7, .3, 1);

    --public-shadow:
        0 26px 75px rgba(0, 0, 0, 0.3);
}


/* ==========================================================================
   02. BASE
   ========================================================================== */

html {
    scroll-behavior: smooth;
}

body.public-site {
    margin: 0;
    min-width: 320px;

    color: var(--public-text);

    background:
        radial-gradient(
            circle at 75% 0%,
            rgba(200, 165, 91, 0.055),
            transparent 28%
        ),
        var(--public-black);

    font-family: var(--public-sans);
    line-height: 1.6;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

.public-site a {
    color: inherit;
}

.public-site ::selection {
    color: #080808;
    background: var(--public-gold);
}

.public-container {
    width: min(
        calc(100% - 48px),
        var(--public-container)
    );

    margin-inline: auto;
}

.public-main {
    min-height: 70vh;
}

.public-eyebrow {
    color: var(--public-gold);

    font-size: 0.67rem;
    font-weight: 850;
    line-height: 1.3;

    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.public-skip-link {
    position: fixed;
    z-index: 9999;

    top: 12px;
    left: 12px;

    padding: 10px 14px;

    color: #080808;
    background: var(--public-gold-soft);

    border-radius: 8px;

    font-size: 0.75rem;
    font-weight: 800;

    text-decoration: none;

    transform: translateY(-180%);

    transition:
        transform var(--public-transition);
}

.public-skip-link:focus {
    transform: translateY(0);
}


/* ==========================================================================
   03. HEADER
   ========================================================================== */

.public-header {
    position: sticky;
    z-index: 1000;

    top: 0;

    border-bottom: 1px solid var(--public-line);

    background:
        rgba(7, 7, 8, 0.93);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.public-header__inner {
    min-height: 72px;

    display: grid;
    grid-template-columns:
        minmax(220px, 1fr)
        auto
        minmax(220px, 1fr);

    align-items: center;
    gap: 28px;
}

.public-brand {
    width: fit-content;

    display: inline-flex;
    align-items: center;
    gap: 11px;

    text-decoration: none;
}

.public-brand__mark {
    width: 39px;
    height: 39px;

    flex: 0 0 auto;

    display: grid;
    place-items: center;

    color: var(--public-gold-soft);

    border:
        1px solid
        rgba(200, 165, 91, 0.43);

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            rgba(240, 223, 181, 0.13),
            transparent 62%
        );

    font-family: var(--public-serif);
    font-size: 0.76rem;

    letter-spacing: 0.07em;
}

.public-brand__copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.public-brand__name {
    color: var(--public-text);

    font-family: var(--public-serif);
    font-size: 0.98rem;
    line-height: 1.1;
}

.public-brand__descriptor {
    color: var(--public-muted);

    font-size: 0.54rem;
    font-weight: 800;

    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.public-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 27px;
}

.public-nav a {
    position: relative;

    padding: 7px 0;

    color: #aaa69e;

    font-size: 0.64rem;
    font-weight: 800;

    letter-spacing: 0.09em;
    text-decoration: none;
    text-transform: uppercase;

    transition:
        color var(--public-transition);
}

.public-nav a::after {
    content: "";

    position: absolute;

    left: 0;
    right: 100%;
    bottom: 0;

    height: 1px;

    background: var(--public-gold);

    transition:
        right var(--public-transition);
}

.public-nav a:hover,
.public-nav a[aria-current="page"] {
    color: var(--public-gold-soft);
}

.public-nav a:hover::after,
.public-nav a[aria-current="page"]::after {
    right: 0;
}

.public-header__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 15px;
}

.public-header__account {
    color: #aaa69e;

    font-size: 0.64rem;
    font-weight: 800;

    letter-spacing: 0.085em;
    text-decoration: none;
    text-transform: uppercase;

    transition:
        color var(--public-transition);
}

.public-header__account:hover {
    color: var(--public-gold-soft);
}


/* ==========================================================================
   04. BUTTONS
   ========================================================================== */

.public-button {
    min-height: 44px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;

    padding:
        0
        20px;

    border: 1px solid transparent;
    border-radius: 999px;

    font-size: 0.62rem;
    font-weight: 900;

    letter-spacing: 0.1em;
    text-decoration: none;
    text-transform: uppercase;

    transition:
        transform var(--public-transition),
        color var(--public-transition),
        background var(--public-transition),
        border-color var(--public-transition),
        box-shadow var(--public-transition);
}

.public-button:hover {
    transform: translateY(-2px);
}

.public-button--gold {
    color: #080808;

    background:
        linear-gradient(
            135deg,
            var(--public-gold-pale),
            var(--public-gold)
        );

    border-color:
        rgba(240, 223, 181, 0.45);

    box-shadow:
        0 11px 30px
        rgba(200, 165, 91, 0.12);
}

.public-button--gold:hover {
    background:
        linear-gradient(
            135deg,
            #f5e8c7,
            #d7b970
        );

    box-shadow:
        0 16px 38px
        rgba(200, 165, 91, 0.18);
}

.public-button--outline {
    color: var(--public-text);

    background:
        rgba(255, 255, 255, 0.018);

    border-color:
        rgba(255, 255, 255, 0.13);
}

.public-button--outline:hover {
    border-color:
        rgba(200, 165, 91, 0.4);

    background:
        rgba(200, 165, 91, 0.05);
}

.public-button:focus-visible,
.public-nav a:focus-visible,
.public-header__account:focus-visible,
.legal-toc a:focus-visible,
.legal-inline-link:focus-visible,
.public-footer a:focus-visible {
    outline:
        2px solid
        var(--public-gold-soft);

    outline-offset: 4px;
}


/* ==========================================================================
   05. LEGAL HERO
   ========================================================================== */

.legal-hero {
    position: relative;

    overflow: hidden;

    padding:
        clamp(72px, 8vw, 120px)
        0
        clamp(62px, 7vw, 95px);

    border-bottom: 1px solid var(--public-line);

    background:
        linear-gradient(
            180deg,
            #09090a,
            #0b0b0c
        );
}

.legal-hero::before {
    content: "";

    position: absolute;

    width: 650px;
    height: 650px;

    top: -390px;
    right: -120px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(200, 165, 91, 0.12),
            transparent 67%
        );

    pointer-events: none;
}

.legal-hero::after {
    content: "RS";

    position: absolute;

    right: 3%;
    bottom: -0.32em;

    color:
        rgba(200, 165, 91, 0.025);

    font-family: var(--public-serif);
    font-size:
        clamp(
            9rem,
            20vw,
            19rem
        );

    line-height: 1;

    pointer-events: none;
}

.legal-hero__grid {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        315px;

    align-items: end;
    gap:
        clamp(
            55px,
            8vw,
            120px
        );
}

.legal-hero__title {
    max-width: 760px;

    margin:
        19px
        0
        0;

    color: var(--public-text);

    font-family: var(--public-serif);
    font-size:
        clamp(
            3.8rem,
            7vw,
            7rem
        );

    font-weight: 400;
    line-height: 0.92;

    letter-spacing: -0.055em;
}

.legal-hero__title span {
    display: block;

    color: var(--public-gold-soft);

    font-style: italic;
}

.legal-hero__lead {
    max-width: 660px;

    margin:
        27px
        0
        0;

    color: #a19d95;

    font-size: 0.94rem;
    line-height: 1.78;
}

.legal-meta {
    border:
        1px solid
        var(--public-line);

    border-radius: 18px;

    background:
        rgba(16, 16, 17, 0.78);

    box-shadow: var(--public-shadow);

    backdrop-filter: blur(10px);
}

.legal-meta__item {
    padding:
        19px
        21px;

    display: flex;
    flex-direction: column;
    gap: 6px;

    border-bottom:
        1px solid
        var(--public-line);
}

.legal-meta__item:last-child {
    border-bottom: 0;
}

.legal-meta__item span {
    color: var(--public-muted-dark);

    font-size: 0.54rem;
    font-weight: 900;

    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.legal-meta__item strong {
    color: #d9d4ca;

    font-family: var(--public-serif);
    font-size: 1rem;
    font-weight: 400;
}


/* ==========================================================================
   06. LEGAL DOCUMENT LAYOUT
   ========================================================================== */

.legal-body {
    padding:
        clamp(70px, 8vw, 120px)
        0
        clamp(90px, 9vw, 140px);

    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(200, 165, 91, 0.025),
            transparent 28%
        ),
        var(--public-black);
}

.legal-layout {
    display: grid;
    grid-template-columns:
        225px
        minmax(0, 820px);

    justify-content: space-between;

    gap:
        clamp(
            55px,
            8vw,
            125px
        );
}

.legal-sidebar__inner {
    position: sticky;

    top: 105px;
}

.legal-toc {
    margin:
        22px
        0
        30px;

    display: flex;
    flex-direction: column;

    border-top:
        1px solid
        var(--public-line);
}

.legal-toc a {
    padding:
        12px
        2px;

    color: #817d76;

    border-bottom:
        1px solid
        var(--public-line);

    font-size: 0.67rem;
    font-weight: 750;

    letter-spacing: 0.025em;
    text-decoration: none;

    transition:
        color var(--public-transition),
        padding-left var(--public-transition);
}

.legal-toc a:hover {
    padding-left: 6px;

    color: var(--public-gold-soft);
}

.legal-document {
    min-width: 0;
}

.legal-section {
    position: relative;

    padding:
        0
        0
        52px;

    margin:
        0
        0
        52px;

    border-bottom:
        1px solid
        var(--public-line);
}

.legal-section__number {
    display: block;

    margin-bottom: 15px;

    color:
        rgba(200, 165, 91, 0.58);

    font-family: var(--public-serif);
    font-size: 0.74rem;
}

.legal-section h2 {
    max-width: 700px;

    margin:
        0
        0
        23px;

    color: var(--public-text);

    font-family: var(--public-serif);
    font-size:
        clamp(
            2rem,
            3.4vw,
            3rem
        );

    font-weight: 400;
    line-height: 1.08;

    letter-spacing: -0.025em;
}

.legal-section > p {
    max-width: 735px;

    margin:
        0
        0
        18px;

    color: #96928a;

    font-size: 0.85rem;
    line-height: 1.85;
}

.legal-section > p:last-child {
    margin-bottom: 0;
}


/* ==========================================================================
   07. DRAFT / NOTICE BLOCK
   ========================================================================== */

.legal-section--notice {
    padding:
        clamp(
            30px,
            4vw,
            42px
        );

    border:
        1px solid
        rgba(200, 165, 91, 0.25);

    border-radius: 19px;

    background:
        linear-gradient(
            135deg,
            rgba(200, 165, 91, 0.075),
            rgba(255, 255, 255, 0.012)
        );
}

.legal-section--notice::before {
    content: "";

    position: absolute;

    top: 0;
    left: 32px;

    width: 55px;
    height: 1px;

    background: var(--public-gold);
}

.legal-section--notice h2 {
    color: var(--public-gold-soft);
}


/* ==========================================================================
   08. LEGAL CONTENT COMPONENTS
   ========================================================================== */

.legal-points {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;

    margin-top: 29px;
}

.legal-point {
    min-height: 165px;

    padding:
        22px
        23px;

    border:
        1px solid
        var(--public-line);

    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            #111112,
            #0e0e0f
        );
}

.legal-point h3 {
    margin:
        0
        0
        10px;

    color: #d8d3c9;

    font-family: var(--public-serif);
    font-size: 1.2rem;
    font-weight: 400;
}

.legal-point p {
    margin: 0;

    color: #7f7b74;

    font-size: 0.73rem;
    line-height: 1.7;
}

.legal-list {
    margin:
        25px
        0
        0;

    padding: 0;

    list-style: none;

    border-top:
        1px solid
        var(--public-line);
}

.legal-list li {
    position: relative;

    padding:
        15px
        10px
        15px
        29px;

    color: #928e86;

    border-bottom:
        1px solid
        var(--public-line);

    font-size: 0.8rem;
    line-height: 1.65;
}

.legal-list li::before {
    content: "";

    position: absolute;

    top: 24px;
    left: 4px;

    width: 6px;
    height: 6px;

    background: var(--public-gold);

    border-radius: 50%;

    box-shadow:
        0 0 0 5px
        rgba(200, 165, 91, 0.055);
}

.legal-emphasis {
    padding:
        19px
        21px;

    color: #c8c3b9 !important;

    border-left:
        2px solid
        var(--public-gold);

    background:
        rgba(200, 165, 91, 0.04);
}

.legal-inline-link {
    display: inline-flex;
    align-items: center;
    gap: 11px;

    margin-top: 7px;

    color: var(--public-gold-soft);

    font-size: 0.65rem;
    font-weight: 900;

    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
}

.legal-inline-link span {
    transition:
        transform var(--public-transition);
}

.legal-inline-link:hover span {
    transform: translateX(4px);
}


/* ==========================================================================
   09. FINAL CTA
   ========================================================================== */

.legal-final {
    position: relative;

    overflow: hidden;

    padding:
        clamp(
            34px,
            5vw,
            50px
        );

    border:
        1px solid
        rgba(200, 165, 91, 0.2);

    border-radius: 21px;

    background:
        linear-gradient(
            130deg,
            #171510,
            #0f0f10 67%
        );
}

.legal-final::after {
    content: "RS";

    position: absolute;

    right: -20px;
    bottom: -55px;

    color:
        rgba(200, 165, 91, 0.035);

    font-family: var(--public-serif);
    font-size: 10rem;

    pointer-events: none;
}

.legal-final > * {
    position: relative;
    z-index: 2;
}

.legal-final h2 {
    max-width: 650px;

    margin:
        13px
        0
        16px;

    font-family: var(--public-serif);
    font-size:
        clamp(
            2rem,
            3.5vw,
            3.1rem
        );

    font-weight: 400;
    line-height: 1.07;
}

.legal-final p {
    max-width: 600px;

    margin:
        0
        0
        24px;

    color: #8d8981;

    font-size: 0.8rem;
    line-height: 1.75;
}

.legal-final__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}


/* ==========================================================================
   10. FOOTER
   ========================================================================== */

.public-footer {
    padding:
        44px
        0
        28px;

    border-top:
        1px solid
        var(--public-line);

    background: #070708;
}

.public-footer__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
}

.public-footer__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap:
        9px
        23px;
}

.public-footer__links a {
    color: #79766f;

    font-size: 0.58rem;
    font-weight: 800;

    letter-spacing: 0.075em;
    text-decoration: none;
    text-transform: uppercase;

    transition:
        color var(--public-transition);
}

.public-footer__links a:hover {
    color: var(--public-gold-soft);
}

.public-footer__rule {
    height: 1px;

    margin:
        31px
        0
        20px;

    background: var(--public-line);
}

.public-footer__bottom {
    display: grid;
    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: center;
    gap: 25px;

    color: #4d4a46;

    font-size: 0.55rem;
    font-weight: 700;

    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.public-footer__bottom p {
    margin: 0;
}

.public-footer__bottom p:last-child {
    text-align: right;
}

.public-footer__credit {
    text-align: center;
}

.public-footer__credit a {
    position: relative;

    color: var(--public-gold-soft);

    font-weight: 850;

    text-decoration: none;

    transition:
        color var(--public-transition);
}

.public-footer__credit a::after {
    content: "";

    position: absolute;

    left: 0;
    right: 100%;
    bottom: -3px;

    height: 1px;

    background: var(--public-gold);

    transition:
        right var(--public-transition);
}

.public-footer__credit a:hover {
    color: var(--public-gold-pale);
}

.public-footer__credit a:hover::after {
    right: 0;
}


/* ==========================================================================
   11. TABLET
   ========================================================================== */

@media (max-width: 980px) {

    .public-container {
        width:
            min(
                calc(100% - 34px),
                var(--public-container)
            );
    }

    .public-header__inner {
        min-height: 67px;

        grid-template-columns:
            1fr
            auto;
    }

    .public-nav {
        display: none;
    }

    .legal-hero__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .legal-meta {
        max-width: 680px;

        display: grid;
        grid-template-columns:
            repeat(3, 1fr);
    }

    .legal-meta__item {
        border-bottom: 0;
        border-right:
            1px solid
            var(--public-line);
    }

    .legal-meta__item:last-child {
        border-right: 0;
    }

    .legal-layout {
        grid-template-columns:
            180px
            minmax(0, 1fr);

        gap: 45px;
    }

    .public-footer__bottom {
        grid-template-columns:
            1fr
            1fr;

        gap:
            10px
            25px;
    }

    .public-footer__credit {
        grid-column:
            1
            / -1;

        grid-row: 2;

        text-align: left;
    }
}


/* ==========================================================================
   12. MOBILE
   ========================================================================== */

@media (max-width: 720px) {

    .public-container {
        width:
            calc(100% - 26px);
    }

    .public-header__inner {
        min-height: 63px;
    }

    .public-brand {
        gap: 8px;
    }

    .public-brand__mark {
        width: 35px;
        height: 35px;
    }

    .public-brand__name {
        font-size: 0.86rem;
    }

    .public-brand__descriptor {
        font-size: 0.47rem;
    }

    .public-header__account {
        display: none;
    }

    .public-header__actions
    .public-button {
        min-height: 35px;

        padding-inline: 14px;

        font-size: 0.56rem;
    }

    .legal-hero {
        padding:
            58px
            0
            52px;
    }

    .legal-hero__title {
        font-size:
            clamp(
                3rem,
                14vw,
                4.75rem
            );
    }

    .legal-hero__lead {
        margin-top: 21px;

        font-size: 0.84rem;
    }

    .legal-meta {
        grid-template-columns: 1fr;

        max-width: none;
    }

    .legal-meta__item {
        border-right: 0;
        border-bottom:
            1px solid
            var(--public-line);
    }

    .legal-meta__item:last-child {
        border-bottom: 0;
    }

    .legal-body {
        padding:
            58px
            0
            75px;
    }

    .legal-layout {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .legal-sidebar__inner {
        position: static;
    }

    .legal-sidebar
    .public-button {
        width: 100%;
    }

    .legal-section {
        padding-bottom: 39px;
        margin-bottom: 39px;
    }

    .legal-section h2 {
        font-size:
            clamp(
                1.85rem,
                9vw,
                2.55rem
            );
    }

    .legal-section > p {
        font-size: 0.79rem;
    }

    .legal-section--notice {
        padding:
            27px
            22px;
    }

    .legal-points {
        grid-template-columns: 1fr;
    }

    .legal-point {
        min-height: auto;
    }

    .legal-final {
        padding:
            30px
            23px;
    }

    .legal-final__actions {
        flex-direction: column;
    }

    .legal-final__actions
    .public-button,
    .legal-final
    > .public-button {
        width: 100%;
    }

    .public-footer__top {
        flex-direction: column;
        align-items: flex-start;
    }

    .public-footer__links {
        justify-content: flex-start;
    }

    .public-footer__bottom {
        grid-template-columns: 1fr;

        gap: 8px;
    }

    .public-footer__credit {
        grid-column: auto;
        grid-row: auto;

        text-align: left;
    }

    .public-footer__bottom
    p:last-child {
        text-align: left;
    }
}


/* ==========================================================================
   13. SMALL MOBILE
   ========================================================================== */

@media (max-width: 430px) {

    .public-container {
        width:
            calc(100% - 20px);
    }

    .public-brand__descriptor {
        display: none;
    }

    .legal-hero__title {
        font-size:
            clamp(
                2.75rem,
                14vw,
                3.7rem
            );
    }
}


/* ==========================================================================
   14. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    .public-site *,
    .public-site *::before,
    .public-site *::after {
        transition-duration:
            0.001ms !important;

        animation-duration:
            0.001ms !important;

        animation-iteration-count:
            1 !important;
    }
}


/* ==========================================================================
   15. PRINT
   ========================================================================== */

@media print {

    .public-header,
    .public-footer,
    .legal-sidebar {
        display: none !important;
    }

    body.public-site {
        color: #000;
        background: #fff;
    }

    .legal-layout {
        display: block;
    }

    .legal-section,
    .legal-section--notice {
        color: #000;
        background: #fff;

        border-color: #ccc;
    }

    .legal-section h2,
    .legal-section p,
    .legal-list li {
        color: #000 !important;
    }
}