/* ============================================================
   RALPH GYAMBRAH 4 GFA
   PUBLIC WEBSITE
   Clean Production Stylesheet
   ============================================================ */


/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */

:root {
    --black: #050505;
    --black-soft: #0c0c0c;
    --charcoal: #171717;

    --gold: #d4af37;
    --gold-dark: #a77819;
    --gold-light: #f3d77c;
    --white-gold: #f7ebc4;

    --white: #ffffff;
    --cream: #f8f5ec;
    --cream-soft: #fcfaf4;

    --text: #181818;
    --muted: #686868;
    --muted-light: #a7a7a7;

    --border: #e5dfd2;
    --border-dark: rgba(255, 255, 255, .13);

    --shadow:
        0 24px 60px
        rgba(0, 0, 0, .10);

    --shadow-dark:
        0 30px 80px
        rgba(0, 0, 0, .30);

    --container: 1180px;
}


/* ============================================================
   2. RESET / GLOBAL
   ============================================================ */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;

    color: var(--text);

    background: var(--white);

    overflow-x: hidden;
}

a {
    color: inherit;

    text-decoration: none;
}

img {
    display: block;

    max-width: 100%;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

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

    margin-inline: auto;
}


/* ============================================================
   3. HEADER / NAVIGATION
   ============================================================ */

.site-header {
    position: fixed;

    inset:
        0 0 auto 0;

    z-index: 1000;

    padding:
        19px 0;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, .66),
            transparent
        );

    transition:
        padding .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}

.site-header.scrolled {
    padding:
        9px 0;

    background:
        rgba(5, 5, 5, .94);

    backdrop-filter:
        blur(16px);

    box-shadow:
        0 10px 35px
        rgba(0, 0, 0, .18);
}

.nav-wrap {
    display: flex;

    align-items: center;

    gap: 30px;
}

.brand {
    width: 165px;

    flex: 0 0 auto;
}

.brand img {
    width: 100%;
    height: 55px;

    object-fit: contain;

    object-position:
        left center;
}

.main-nav {
    display: flex;

    align-items: center;

    gap: 31px;

    margin-left: auto;
}

.main-nav a {
    position: relative;

    color: #fff;

    font-size: 14px;
    font-weight: 700;
}

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

    position: absolute;

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

    height: 2px;

    background:
        var(--gold);

    transition:
        right .25s ease;
}

.main-nav a:hover::after,
.main-nav a.active::after {
    right: 0;
}

.nav-cta {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 48px;

    padding:
        0 19px;

    color: #111;

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

    font-size: 13px;
    font-weight: 900;

    box-shadow:
        0 12px 28px
        rgba(212, 175, 55, .18);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.nav-cta:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 18px 32px
        rgba(212, 175, 55, .25);
}

.nav-toggle {
    display: none;

    width: 44px;
    height: 44px;

    margin-left: auto;

    border: 0;

    background: transparent;
}

.nav-toggle span {
    display: block;

    width: 26px;
    height: 2px;

    margin:
        5px auto;

    background: #fff;
}


/* ============================================================
   4. BUTTONS / LINKS
   ============================================================ */

.btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 12px;

    min-height: 52px;

    padding:
        0 23px;

    border:
        1px solid transparent;

    font-weight: 900;

    transition:
        transform .25s ease,
        background .25s ease,
        border-color .25s ease;
}

.btn:hover {
    transform:
        translateY(-3px);
}

.btn-gold {
    position: relative;

    overflow: hidden;

    color: #111;

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

    box-shadow:
        0 14px 34px
        rgba(212, 175, 55, .18);
}

.btn-ghost {
    color: #fff;

    border-color:
        rgba(255, 255, 255, .4);

    background:
        transparent;
}

.btn-ghost:hover {
    border-color:
        var(--gold);
}

.rg-arrow-link,
.text-link {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    color:
        var(--gold-dark);

    font-weight: 900;
}

.rg-arrow-link span,
.text-link span {
    transition:
        transform .2s ease;
}

.rg-arrow-link:hover span,
.text-link:hover span {
    transform:
        translateX(6px);
}


/* ============================================================
   5. COMMON TYPOGRAPHY
   ============================================================ */

.rg-section-eyebrow,
.eyebrow {
    display: block;

    color:
        var(--gold-dark);

    font-size: 11px;
    font-weight: 900;

    letter-spacing: .20em;

    text-transform: uppercase;
}

.rg-section-eyebrow.light,
.eyebrow.light {
    color:
        var(--gold-light);
}

.rg-section-heading {
    margin-bottom: 44px;
}

.rg-section-heading h2,
.section-head h2 {
    margin:
        13px 0 0;

    font-size:
        clamp(
            42px,
            5vw,
            70px
        );

    line-height: 1;

    letter-spacing: -.045em;
}

.rg-section-heading h2 strong,
.section-head h2 strong {
    display: block;

    color:
        var(--gold-dark);
}


/* ============================================================
   6. HOMEPAGE HERO
   ============================================================ */

.rg-hero {
    position: relative;

    min-height: 860px;
    height: 100vh;

    overflow: hidden;

    color: #fff;

    background:
        radial-gradient(
            circle at 50% 40%,
            #272216 0,
            #11100d 28%,
            #080808 55%,
            #040404 100%
        );

    isolation: isolate;
}

.rg-hero::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 160px;

    background:
        linear-gradient(
            to top,
            #050505,
            transparent
        );

    pointer-events: none;

    z-index: 2;
}

.rg-hero-watermark {
    position: absolute;

    width: 760px;
    height: 760px;

    left: 50%;
    top: 49%;

    transform:
        translate(-50%, -50%);

    background:
        url("/assets/images/logo.png")
        center / contain
        no-repeat;

    opacity: .025;

    filter:
        grayscale(1);

    pointer-events: none;
}

.rg-dot-pattern {
    position: absolute;

    width: 390px;
    height: 390px;

    background-image:
        radial-gradient(
            circle,
            rgba(212, 175, 55, .5) 2px,
            transparent 3px
        );

    background-size:
        29px 29px;

    opacity: .13;
}

.rg-dot-pattern-left {
    left: 2%;
    top: 20%;

    mask-image:
        linear-gradient(
            90deg,
            #000,
            transparent
        );
}

.rg-dot-pattern-right {
    right: 0;
    bottom: 9%;

    mask-image:
        linear-gradient(
            -90deg,
            #000,
            transparent
        );
}

.rg-hero-stage {
    position: relative;

    height: 100%;
    min-height: 860px;

    padding-top: 135px;

    z-index: 3;
}

.rg-hero-kicker {
    position: absolute;

    top: 140px;
    left: 0;

    display: flex;

    align-items: center;

    gap: 14px;

    color:
        rgba(255, 255, 255, .68);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .17em;

    text-transform: uppercase;
}

.rg-hero-kicker i {
    width: 48px;
    height: 1px;

    background:
        var(--gold);
}

.rg-big-name {
    position: absolute;

    top: 40%;

    transform:
        translateY(-50%);

    color: #fff;

    font-size:
        clamp(
            72px,
            8.6vw,
            142px
        );

    font-weight: 950;

    line-height: .82;

    letter-spacing: -.07em;

    white-space: nowrap;

    z-index: 1;
}

.rg-big-name-left {
    left: 0;
}

.rg-big-name-right {
    right: 0;

    color:
        var(--white-gold);
}

.rg-candidate {
    position: absolute;

    left: 50%;
    bottom: 0;

    transform:
        translateX(-50%);

    width:
        min(
            40vw,
            540px
        );

    height: 74%;

    display: flex;

    align-items: flex-end;

    justify-content: center;

    z-index: 4;
}

.rg-candidate img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    object-position:
        center bottom;

    filter:
        drop-shadow(
            0 30px 55px
            rgba(0, 0, 0, .7)
        );
}

.rg-candidate-glow {
    position: absolute;

    width: 85%;
    height: 75%;

    left: 50%;
    bottom: 4%;

    transform:
        translateX(-50%);

    background:
        radial-gradient(
            circle,
            rgba(212, 175, 55, .13),
            transparent 70%
        );

    filter:
        blur(16px);
}

.rg-hero-message {
    position: absolute;

    left: 0;
    bottom: 70px;

    width: 370px;

    z-index: 6;
}

.rg-gold-line {
    width: 72px;
    height: 4px;

    margin-bottom: 16px;

    background:
        linear-gradient(
            90deg,
            var(--gold-light),
            var(--gold)
        );
}

.rg-hero-small-title {
    margin:
        0 0 13px;

    color:
        rgba(255, 255, 255, .86);

    font-size: 16px;
    font-weight: 800;
}

.rg-hero-message h1 {
    margin: 0;

    font-size:
        clamp(
            42px,
            4vw,
            61px
        );

    line-height: .94;

    letter-spacing: -.05em;

    text-transform: uppercase;
}

.rg-hero-message h1 strong {
    display: block;

    color:
        var(--gold-light);
}

.rg-hero-actions {
    display: flex;

    align-items: center;

    gap: 18px;

    margin-top: 23px;
}

.rg-outline-link {
    display: inline-flex;

    padding-bottom: 6px;

    color:
        rgba(255, 255, 255, .73);

    border-bottom:
        1px solid
        rgba(255, 255, 255, .27);

    font-size: 12px;
    font-weight: 800;
}

.rg-outline-link:hover {
    color:
        var(--gold-light);

    border-color:
        var(--gold);
}

.rg-hero-target {
    position: absolute;

    right: 0;
    bottom: 78px;

    width: 200px;

    text-align: right;

    z-index: 6;
}

.rg-target-label {
    display: block;

    margin-bottom: 5px;

    color:
        rgba(255, 255, 255, .52);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .20em;

    text-transform: uppercase;
}

.rg-hero-target strong {
    display: block;

    color:
        var(--gold-light);

    font-size: 47px;

    line-height: 1;
}

.rg-hero-target p {
    margin:
        10px 0 0;

    color:
        rgba(255, 255, 255, .58);

    font-size: 12px;

    line-height: 1.6;
}

.rg-scroll-cue {
    display: none;
}


/* ============================================================
   7. INTRODUCTION
   ============================================================ */

.rg-intro {
    padding:
        105px 0;

    background:
        #fff;
}

.rg-intro-grid {
    display: grid;

    grid-template-columns:
        minmax(0, .9fr)
        minmax(0, 1.1fr);

    gap: 80px;

    align-items: center;
}

.rg-photo-frame {
    position: relative;

    height: 560px;
}

.rg-photo-frame::before {
    content: "";

    position: absolute;

    top: -18px;
    left: -18px;

    width: 75%;
    height: 75%;

    border:
        1px solid
        var(--border);
}

.rg-photo-frame-gold {
    position: absolute;

    right: -14px;
    bottom: -14px;

    width: 93%;
    height: 93%;

    background:
        linear-gradient(
            135deg,
            var(--gold-light),
            var(--gold)
        );
}

.rg-photo-placeholder {
    position: absolute;

    inset: 0;

    display: flex;

    align-items: flex-end;

    justify-content: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 30%,
            #29241a,
            #080808 70%
        );
}

.rg-photo-placeholder img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    object-position:
        center bottom;
}

.rg-photo-caption {
    position: absolute;

    left: 20px;
    bottom: 18px;

    padding:
        8px 12px;

    color:
        var(--gold-light);

    background:
        rgba(0, 0, 0, .75);

    font-size: 10px;
    font-weight: 900;

    letter-spacing: .13em;

    text-transform: uppercase;
}

.rg-intro-copy {
    max-width: 620px;
}

.rg-mini-brand {
    display: flex;

    gap: 7px;

    margin-bottom: 22px;
}

.rg-mini-brand span {
    display: block;

    width: 6px;
    height: 27px;

    background:
        var(--gold);
}

.rg-mini-brand span:last-child {
    background:
        #111;
}

.rg-mini-brand.light span:last-child {
    background:
        #fff;
}

.rg-intro-copy h2 {
    margin:
        14px 0 24px;

    font-size:
        clamp(
            43px,
            4.6vw,
            67px
        );

    line-height: 1;

    letter-spacing: -.045em;
}

.rg-intro-copy h2 em {
    display: block;

    color:
        var(--gold-dark);

    font-style: normal;
}

.rg-intro-copy p {
    margin:
        0 0 17px;

    color:
        var(--muted);

    font-size: 16px;

    line-height: 1.75;
}

.rg-intro-copy .rg-lead {
    color:
        var(--text);

    font-size: 19px;
    font-weight: 800;
}


/* ============================================================
   8. PROGRAMME
   ============================================================ */

.rg-programme,
.programme {
    position: relative;

    overflow: hidden;

    padding:
        105px 0;

    background:
        var(--cream);
}

.rg-section-watermark,
.watermark-section::before {
    content: "";

    position: absolute;

    width: 620px;
    height: 620px;

    right: -170px;
    top: -160px;

    background:
        url("/assets/images/logo.png")
        center / contain
        no-repeat;

    opacity: .02;

    filter:
        grayscale(1);

    pointer-events: none;
}

.rg-programme-layout,
.programme-layout {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        120px 1fr;
}

.rg-vertical-heading,
.vertical-title {
    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;
}

.rg-vertical-heading > span,
.vertical-title > span {
    writing-mode:
        vertical-rl;

    transform:
        rotate(180deg);

    color:
        #ddd7c9;

    font-size: 60px;
    font-weight: 900;
}

.rg-vertical-bars {
    display: flex;

    gap: 7px;

    margin-top: 28px;
}

.rg-vertical-bars i {
    width: 6px;
    height: 44px;

    background:
        var(--gold);
}

.rg-vertical-bars i:last-child {
    background:
        #111;
}

.rg-programme-grid,
.programme-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

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

    border-left:
        1px solid
        var(--border);
}

.rg-programme-card,
.programme-card {
    position: relative;

    min-height: 290px;

    padding:
        34px;

    border-right:
        1px solid
        var(--border);

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

    background:
        rgba(255, 255, 255, .58);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background .3s ease,
        color .3s ease;
}

.rg-programme-card:hover,
.programme-card:hover {
    transform:
        translateY(-7px);

    color: #fff;

    background:
        #101010;

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

    z-index: 3;
}

.rg-card-top {
    display: flex;

    align-items: center;

    justify-content: space-between;
}

.rg-card-number,
.card-no {
    color:
        #aaa294;

    font-size: 12px;
    font-weight: 900;
}

.rg-card-arrow {
    color:
        #aaa294;

    font-size: 21px;
}

.rg-programme-icon {
    position: absolute;

    top: 74px;
    right: 28px;

    color:
        rgba(0, 0, 0, .04);

    font-size: 82px;
    font-weight: 950;
}

.rg-programme-card:hover
.rg-programme-icon {
    color:
        rgba(212, 175, 55, .10);
}

.rg-programme-card h3,
.programme-card h3 {
    margin:
        72px 0 11px;

    max-width: 390px;

    font-size: 26px;

    line-height: 1.1;
}

.rg-programme-card p,
.programme-card p {
    margin:
        0 0 20px;

    color:
        var(--muted);

    line-height: 1.65;
}

.rg-programme-card:hover p,
.programme-card:hover p {
    color:
        rgba(255, 255, 255, .67);
}

.rg-programme-card strong,
.programme-card b {
    color:
        var(--gold-dark);

    font-size: 13px;
}

.rg-programme-card:hover strong,
.programme-card:hover b {
    color:
        var(--gold-light);
}


/* ============================================================
   9. STATEMENT BAND
   ============================================================ */

.rg-statement-band {
    position: relative;

    overflow: hidden;

    padding:
        95px 0;

    color: #fff;

    text-align: center;

    background:
        linear-gradient(
            135deg,
            #050505,
            #151108
        );
}

.rg-statement-logo {
    position: absolute;

    inset: 0;

    background:
        url("/assets/images/logo.png")
        center / 550px auto
        no-repeat;

    opacity: .03;

    filter:
        grayscale(1);
}

.rg-statement-inner {
    position: relative;

    max-width: 850px;

    z-index: 2;
}

.rg-statement-inner > span {
    color:
        var(--gold-light);

    font-size: 10px;
    font-weight: 900;

    letter-spacing: .23em;

    text-transform: uppercase;
}

.rg-statement-inner h2 {
    margin:
        18px 0;

    font-size:
        clamp(
            48px,
            6vw,
            82px
        );

    line-height: .96;

    letter-spacing: -.05em;
}

.rg-statement-inner h2 strong {
    display: block;

    color:
        var(--gold-light);
}

.rg-statement-inner p {
    margin: 0;

    color:
        rgba(255, 255, 255, .62);

    font-size: 17px;

    line-height: 1.7;
}


/* ============================================================
   10. JOURNEY / TIMELINE
   ============================================================ */

.rg-journey,
.journey {
    position: relative;

    overflow: hidden;

    padding:
        105px 0;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #050505,
            #171108
        );
}

.rg-journey-bg,
.journey-watermark {
    position: absolute;

    inset: 0;

    background:
        url("/assets/images/logo.png")
        center / 600px auto
        no-repeat;

    opacity: .025;

    filter:
        grayscale(1);
}

.rg-journey-content,
.journey-inner {
    position: relative;

    z-index: 2;
}

.rg-journey-heading h2,
.journey h2 {
    margin:
        14px 0 0;

    max-width: 800px;

    font-size:
        clamp(
            50px,
            6vw,
            84px
        );

    line-height: .96;

    letter-spacing: -.05em;
}

.rg-journey-heading h2 strong {
    display: block;

    color:
        var(--gold-light);
}

.rg-timeline,
.timeline {
    position: relative;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 36px;

    margin-top: 62px;
}

.rg-timeline::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    top: 68px;

    height: 1px;

    background:
        rgba(255, 255, 255, .18);
}

.rg-timeline-number,
.timeline b {
    display: block;

    color:
        var(--gold-light);

    font-size: 38px;
    font-weight: 900;
}

.rg-timeline-dot {
    position: relative;

    width: 14px;
    height: 14px;

    margin-top: 23px;

    border:
        3px solid
        var(--gold);

    border-radius: 50%;

    background:
        #080808;

    z-index: 2;
}

.rg-timeline-card h3,
.timeline h3 {
    margin:
        26px 0 12px;

    font-size: 23px;
}

.rg-timeline-card p,
.timeline p {
    margin: 0;

    color:
        rgba(255, 255, 255, .63);

    line-height: 1.7;
}


/* ============================================================
   11. VALUES
   ============================================================ */

.rg-values,
.values {
    padding:
        100px 0;

    background:
        #fff;
}

.rg-heading-row,
.section-head.row {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 30px;
}

.rg-values-grid,
.value-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 22px;
}

.rg-value-card,
.value-card {
    min-height: 260px;

    padding:
        33px;

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

    background: #fff;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.rg-value-card:hover,
.value-card:hover {
    transform:
        translateY(-7px);

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

.rg-value-featured,
.value-card:first-child {
    color: #fff;

    background:
        #101010;

    border-color:
        #101010;
}

.rg-value-check,
.value-card > span {
    display: grid;

    width: 38px;
    height: 38px;

    place-items: center;

    border-radius: 50%;

    color: #111;

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

    font-weight: 900;
}

.rg-value-card h3,
.value-card h3 {
    margin:
        34px 0 12px;

    font-size: 24px;
}

.rg-value-card p,
.value-card p {
    margin: 0;

    color:
        var(--muted);

    line-height: 1.65;
}

.rg-value-featured p,
.value-card:first-child p {
    color:
        rgba(255, 255, 255, .66);
}


/* ============================================================
   12. NEWS
   ============================================================ */

.rg-news,
.news-section,
.news-page {
    position: relative;

    overflow: hidden;

    padding:
        100px 0;

    background:
        var(--cream);
}

.rg-news-watermark {
    position: absolute;

    width: 600px;
    height: 600px;

    left: -200px;
    bottom: -230px;

    background:
        url("/assets/images/logo.png")
        center / contain
        no-repeat;

    opacity: .02;

    filter:
        grayscale(1);
}

.rg-news-grid,
.news-grid {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 25px;
}

.rg-news-card,
.news-card {
    overflow: hidden;

    background: #fff;

    box-shadow:
        0 12px 40px
        rgba(0, 0, 0, .05);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.rg-news-card:hover,
.news-card:hover {
    transform:
        translateY(-7px);

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

.rg-news-image,
.news-image {
    display: block;

    height: 245px;

    background-color:
        #111;

    background-size: cover;

    background-position: center;
}

.rg-news-body,
.news-card > div {
    padding:
        24px;
}

.rg-news-meta {
    display: flex;

    justify-content: space-between;

    gap: 12px;

    color:
        var(--gold-dark);

    font-size: 10px;
    font-weight: 900;

    letter-spacing: .1em;

    text-transform: uppercase;
}

.rg-news-meta time {
    color: #999;
}

.rg-news-card h3,
.news-card h3 {
    margin:
        13px 0;

    font-size: 22px;

    line-height: 1.2;
}

.rg-news-card p,
.news-card p {
    margin:
        0 0 18px;

    color:
        var(--muted);

    line-height: 1.6;
}

.rg-news-read {
    display: inline-flex;

    gap: 9px;

    color:
        var(--gold-dark);

    font-size: 12px;
    font-weight: 900;
}

.rg-news-placeholder-image {
    height: 245px;

    display: grid;

    place-items: center;

    background:
        #0b0b0b;
}

.rg-news-placeholder-image img {
    width: 50%;

    max-height: 130px;

    object-fit: contain;
}


/* ============================================================
   13. FINAL CTA
   ============================================================ */

.rg-final,
.final-cta {
    position: relative;

    overflow: hidden;

    padding:
        100px 0;

    color: #fff;

    background:
        linear-gradient(
            125deg,
            #050505,
            #171108
        );
}

.rg-final-watermark,
.final-logo-mark {
    position: absolute;

    width: 650px;
    height: 650px;

    right: -150px;
    top: 50%;

    transform:
        translateY(-50%);

    background:
        url("/assets/images/logo.png")
        center / contain
        no-repeat;

    opacity: .035;

    filter:
        grayscale(1);
}

.rg-final-grid,
.final-grid {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        1.05fr .95fr;

    gap: 70px;

    align-items: center;
}

.rg-final h2,
.final-cta h2 {
    margin:
        13px 0 0;

    font-size:
        clamp(
            52px,
            6vw,
            84px
        );

    line-height: .93;

    letter-spacing: -.055em;

    text-transform: uppercase;
}

.rg-final h2 strong,
.final-cta h2 strong {
    display: block;

    color:
        var(--gold-light);
}

.rg-final-copy p,
.final-cta p {
    margin:
        0 0 24px;

    color:
        rgba(255, 255, 255, .67);

    font-size: 17px;

    line-height: 1.75;
}

.rg-final-actions {
    display: flex;

    align-items: center;

    gap: 22px;
}


/* ============================================================
   14. GENERIC PAGE HERO
   ============================================================ */

.page-hero {
    position: relative;

    overflow: hidden;

    padding:
        180px 0 95px;

    color: #fff;

    background:
        #090909;
}

.page-hero::after {
    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    right: -100px;
    top: -100px;

    background:
        url("/assets/images/logo.png")
        center / contain
        no-repeat;

    opacity: .04;

    filter:
        grayscale(1);
}

.page-hero.compact {
    padding-bottom:
        75px;
}

.page-hero h1 {
    position: relative;

    z-index: 2;

    max-width: 920px;

    margin:
        18px 0;

    font-size:
        clamp(
            50px,
            7vw,
            86px
        );

    line-height: .96;

    letter-spacing: -.05em;
}

.page-hero p {
    position: relative;

    z-index: 2;

    max-width: 720px;

    color:
        #c7c7c7;

    font-size: 18px;

    line-height: 1.7;
}


/* ============================================================
   15. ABOUT PAGE
   ============================================================ */

.bio-section {
    padding:
        100px 0;
}

.bio-grid {
    display: grid;

    grid-template-columns:
        .9fr 1.1fr;

    gap: 70px;

    align-items: center;
}

.bio-photo {
    height: 600px;

    background:
        url("/assets/images/hero.jpg")
        center / cover
        no-repeat;

    box-shadow:
        14px 14px 0
        var(--gold);
}

.bio-grid h2 {
    margin:
        13px 0 22px;

    font-size:
        clamp(
            42px,
            5vw,
            67px
        );

    line-height: 1;

    letter-spacing: -.04em;
}

.bio-grid p {
    color:
        var(--muted);

    font-size: 17px;

    line-height: 1.75;
}

blockquote {
    margin:
        30px 0;

    padding-left: 21px;

    border-left:
        4px solid
        var(--gold);

    font-size: 27px;
}


/* ============================================================
   16. PROGRAMME PAGE
   ============================================================ */

.policy-section {
    padding:
        90px 0;

    background:
        var(--cream);
}

.policy-list {
    position: relative;

    z-index: 2;
}

.policy-item {
    display: grid;

    grid-template-columns:
        105px 1fr;

    gap: 35px;

    padding:
        44px 0;

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

.policy-no {
    color:
        #c7bfae;

    font-size: 46px;
    font-weight: 900;
}

.policy-item h2 {
    margin:
        0 0 18px;

    font-size: 34px;
}

.policy-item ul {
    padding-left:
        20px;
}

.policy-item li {
    margin:
        10px 0;

    color:
        #575757;

    line-height: 1.65;
}


/* ============================================================
   17. NEWS ARTICLE PAGE
   ============================================================ */

.story {
    padding-bottom:
        90px;
}

.story-head {
    padding:
        170px 0 60px;

    background:
        var(--cream);
}

.narrow {
    max-width: 900px;
}

.story-head h1 {
    font-size:
        clamp(
            44px,
            6vw,
            72px
        );

    line-height: 1.03;

    letter-spacing: -.04em;
}

.story-meta {
    color:
        var(--gold-dark);

    font-weight: 800;
}

.story-image {
    margin-top:
        50px;
}

.story-image img {
    width: 100%;

    max-height: 650px;

    object-fit: cover;
}

.story-layout {
    display: grid;

    grid-template-columns:
        85px
        minmax(0, 760px);

    gap: 42px;

    justify-content: center;

    padding-top:
        50px;
}

.share-rail {
    position: sticky;

    top: 105px;

    align-self: start;

    display: flex;

    flex-direction: column;

    gap: 9px;
}

.share-rail span {
    color: #777;

    font-size: 10px;

    letter-spacing: .16em;

    text-transform: uppercase;
}

.share-rail a {
    display: grid;

    width: 40px;
    height: 40px;

    place-items: center;

    border:
        1px solid #ddd;

    border-radius: 50%;

    font-weight: 800;
}

.share-rail a:hover {
    color: #fff;

    background:
        #111;
}

.story-body {
    font-size: 18px;

    line-height: 1.85;
}

.story-body img {
    max-width: 100%;
}


/* ============================================================
   18. CONTACT PAGE
   ============================================================ */

.contact-section {
    padding:
        100px 0;

    background:
        var(--cream);
}

.contact-grid {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        .8fr 1.2fr;

    gap: 70px;
}

.contact-copy h2 {
    margin:
        14px 0;

    font-size:
        52px;
}

.contact-copy p {
    color:
        #565656;

    line-height: 1.7;
}

.contact-lines {
    display: grid;

    gap: 9px;

    margin-top:
        25px;
}

.contact-form {
    padding:
        35px;

    background:
        #fff;

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

label {
    display: block;

    margin-bottom:
        16px;

    font-size: 13px;
    font-weight: 800;
}

input,
textarea,
select {
    width: 100%;

    margin-top:
        7px;

    padding:
        13px 14px;

    border:
        1px solid
        #d8d2c6;

    outline: none;

    background:
        #fff;
}

input:focus,
textarea:focus,
select:focus {
    border-color:
        var(--gold);
}

.alert {
    margin-bottom:
        17px;

    padding:
        13px 15px;

    border-left:
        4px solid
        #d75c37;

    background:
        #fff0eb;
}

.alert.ok {
    border-color:
        #57964e;

    background:
        #edf7eb;
}


/* ============================================================
   19. FOOTER
   ============================================================ */

.site-footer {
    position: relative;

    overflow: hidden;

    padding:
        70px 0 23px;

    color: #fff;

    background:
        #050505;
}

.footer-grid {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        1.4fr
        .7fr
        1fr
        .7fr;

    gap: 45px;
}

.footer-logo {
    width: 190px;

    margin-bottom:
        18px;
}

.footer-grid p {
    color:
        #a8a8a8;

    line-height: 1.6;
}

.footer-grid h4 {
    color:
        var(--gold-light);
}

.footer-grid > div > a {
    display: block;

    margin:
        9px 0;

    color:
        #bbb;
}

.footer-grid > div > a:hover {
    color:
        var(--gold-light);
}

.footer-slogan {
    color:
        var(--gold-light) !important;

    font-weight: 800;
}

.social-row {
    display: flex;

    gap: 8px;
}

.social-row a {
    display: grid;

    width: 38px;
    height: 38px;

    place-items: center;

    border:
        1px solid
        #333;

    border-radius: 50%;
}

.social-row a:hover {
    color:
        #111;

    background:
        var(--gold);

    border-color:
        var(--gold);
}

.footer-bottom {
    display: flex;

    justify-content:
        space-between;

    gap: 20px;

    margin-top:
        48px;

    padding-top:
        18px;

    border-top:
        1px solid #242424;

    color:
        #777;

    font-size: 12px;
}


/* ============================================================
   20. EMPTY STATES
   ============================================================ */

.empty-state {
    grid-column:
        1 / -1;

    padding:
        60px 30px;

    border:
        1px dashed
        #cfc7b7;

    text-align: center;
}


/* ============================================================
   21. REVEAL ANIMATION
   ============================================================ */

.reveal {
    opacity: 0;

    transform:
        translateY(22px);

    transition:
        opacity .65s ease,
        transform .65s ease;
}

.reveal.in {
    opacity: 1;

    transform: none;
}


/* ============================================================
   22. TABLET
   ============================================================ */

@media (max-width: 980px) {

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


    .nav-toggle {
        display: block;
    }


    .nav-cta {
        display: none;
    }


    .main-nav {
        position: absolute;

        top: 82px;
        left: 17px;
        right: 17px;

        display: none;

        flex-direction: column;

        align-items: flex-start;

        gap: 18px;

        padding:
            24px;

        background:
            #0a0a0a;

        box-shadow:
            var(--shadow-dark);
    }


    .main-nav.open {
        display: flex;
    }


    .rg-hero {
        min-height: 880px;
        height: auto;
    }


    .rg-hero-stage {
        min-height: 880px;
    }


    .rg-big-name {
        top: 34%;

        font-size:
            clamp(
                66px,
                11vw,
                105px
            );
    }


    .rg-candidate {
        width:
            min(
                61vw,
                520px
            );

        height: 66%;
    }


    .rg-hero-message {
        bottom: 50px;

        width: 40%;
    }


    .rg-hero-target {
        bottom: 56px;
    }


    .rg-intro-grid,
    .bio-grid,
    .contact-grid,
    .rg-final-grid,
    .final-grid {
        grid-template-columns:
            1fr;

        gap: 52px;
    }


    .rg-programme-layout,
    .programme-layout {
        grid-template-columns:
            1fr;
    }


    .rg-vertical-heading,
    .vertical-title {
        display: none;
    }


    .rg-news-grid,
    .news-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .footer-grid {
        grid-template-columns:
            1fr 1fr;
    }


    .story-layout {
        grid-template-columns:
            1fr;
    }


    .share-rail {
        position: static;

        flex-direction: row;
    }

}


/* ============================================================
   23. MOBILE
   ============================================================ */

@media (max-width: 650px) {

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


    .site-header {
        padding:
            10px 0;
    }


    .brand {
        width: 138px;
    }


    .brand img {
        height: 48px;
    }


    .main-nav {
        top: 70px;
    }


    .rg-hero {
        min-height: 830px;
    }


    .rg-hero-stage {
        min-height: 830px;

        padding-top: 88px;
    }


    .rg-hero-kicker {
        position: relative;

        top: auto;

        flex-wrap: wrap;

        gap: 8px;

        padding-top: 9px;

        font-size: 8px;
    }


    .rg-hero-kicker i {
        width: 24px;
    }


    .rg-big-name {
        top: 21%;

        font-size: 15vw;

        z-index: 4;
    }


    .rg-big-name-right {
        top: 27%;
    }


    .rg-candidate {
        width: 92vw;

        height: 57%;

        bottom: 110px;
    }


    .rg-hero-message {
        left: 0;
        bottom: 25px;

        width: 68%;
    }


    .rg-hero-small-title {
        font-size: 12px;
    }


    .rg-hero-message h1 {
        font-size: 33px;
    }


    .rg-hero-actions {
        margin-top: 14px;
    }


    .rg-hero-actions
    .rg-outline-link {
        display: none;
    }


    .rg-hero-actions
    .btn {
        min-height: 44px;

        padding:
            0 15px;

        font-size: 11px;
    }


    .rg-hero-target {
        right: 0;
        bottom: 30px;

        width: 29%;
    }


    .rg-hero-target strong {
        font-size: 28px;
    }


    .rg-hero-target p {
        display: none;
    }


    .rg-dot-pattern {
        width: 220px;
        height: 220px;

        background-size:
            23px 23px;
    }


    .rg-intro,
    .rg-programme,
    .programme,
    .rg-values,
    .values,
    .rg-news,
    .news-section,
    .news-page,
    .bio-section,
    .policy-section,
    .contact-section,
    .rg-final,
    .final-cta {
        padding:
            70px 0;
    }


    .rg-intro-grid {
        grid-template-columns:
            1fr;

        gap: 45px;
    }


    .rg-photo-frame {
        height: 430px;
    }


    .rg-intro-copy h2,
    .rg-section-heading h2,
    .section-head h2,
    .bio-grid h2 {
        font-size: 39px;
    }


    .rg-programme-grid,
    .programme-grid {
        grid-template-columns:
            1fr;
    }


    .rg-programme-card,
    .programme-card {
        min-height: 250px;

        padding: 27px;
    }


    .rg-programme-card h3,
    .programme-card h3 {
        margin-top: 55px;

        font-size: 23px;
    }


    .rg-statement-band {
        padding:
            72px 0;
    }


    .rg-statement-inner h2 {
        font-size: 43px;
    }


    .rg-journey,
    .journey {
        padding:
            75px 0;
    }


    .rg-journey-heading h2,
    .journey h2 {
        font-size: 45px;
    }


    .rg-timeline,
    .timeline {
        grid-template-columns:
            1fr;

        gap: 32px;

        margin-top: 45px;
    }


    .rg-timeline::before {
        display: none;
    }


    .rg-timeline-card,
    .timeline > div {
        padding-left: 26px;

        border-left:
            1px solid
            rgba(212, 175, 55, .35);
    }


    .rg-timeline-dot {
        position: absolute;

        left: -8px;
        top: 45px;

        margin: 0;
    }


    .rg-heading-row,
    .section-head.row {
        align-items: flex-start;

        flex-direction: column;

        gap: 12px;
    }


    .rg-values-grid,
    .value-grid {
        grid-template-columns:
            1fr;
    }


    .rg-news-grid,
    .news-grid {
        grid-template-columns:
            1fr;
    }


    .rg-news-image,
    .news-image,
    .rg-news-placeholder-image {
        height: 215px;
    }


    .rg-final-grid,
    .final-grid {
        gap: 35px;
    }


    .rg-final h2,
    .final-cta h2 {
        font-size: 47px;
    }


    .rg-final-actions {
        align-items: flex-start;

        flex-direction: column;
    }


    .page-hero {
        padding:
            130px 0 65px;
    }


    .page-hero h1 {
        font-size: 46px;
    }


    .bio-photo {
        height: 430px;

        box-shadow:
            10px 10px 0
            var(--gold);
    }


    .policy-item {
        grid-template-columns:
            1fr;

        gap: 8px;

        padding:
            32px 0;
    }


    .policy-no {
        font-size: 30px;
    }


    .policy-item h2 {
        font-size: 28px;
    }


    .story-head {
        padding:
            130px 0 45px;
    }


    .story-head h1 {
        font-size: 40px;
    }


    .story-layout {
        padding-top:
            30px;
    }


    .story-body {
        font-size: 16px;
    }


    .contact-form {
        padding: 23px;
    }


    .contact-copy h2 {
        font-size: 42px;
    }


    .footer-grid {
        grid-template-columns:
            1fr;
    }


    .footer-bottom {
        flex-direction: column;

        gap: 9px;
    }

}


/* ============================================================
   24. VERY SMALL PHONES
   ============================================================ */

@media (max-width: 400px) {

    .rg-hero-message h1 {
        font-size: 30px;
    }


    .rg-photo-frame {
        height: 390px;
    }


    .rg-intro-copy h2,
    .rg-section-heading h2,
    .section-head h2 {
        font-size: 36px;
    }


    .rg-final h2,
    .final-cta h2 {
        font-size: 42px;
    }

}


/* ============================================================
   25. ACCESSIBILITY
   ============================================================ */

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

    html {
        scroll-behavior: auto;
    }


    .reveal {
        opacity: 1;

        transform: none;

        transition: none;
    }


    .rg-programme-card,
    .programme-card,
    .rg-value-card,
    .value-card,
    .rg-news-card,
    .news-card,
    .btn {
        transition: none;
    }

}