/* ============================================================
   Recalibrate — The Overhaul Academy
   Global styles (converted from the design canvas)
   ============================================================ */

html, body { margin: 0; padding: 0; background: #FCFAF6; }
html { scroll-behavior: smooth; }
* { box-sizing: border-box; }

body {
    font-family: 'Manrope', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    color: #2B2B2B;
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
}

a { color: #B8862B; text-decoration: none; }
a:hover { color: #8E6716; }
::selection { background: #F4544A; color: #fff; }
input::placeholder { color: rgba(43, 43, 43, .42); }

h1, h2, h3, h4, p { text-wrap: pretty; }
h1 { text-wrap: balance; }

/* ---- page shell ---------------------------------------------------------- */

.ra-page { position: relative; background: #FCFAF6; }

.ra-glow {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    filter: blur(14px);
    background:
        radial-gradient(36% 24% at 11% 7%, rgba(240, 203, 138, .5), transparent 70%),
        radial-gradient(30% 22% at 88% 26%, rgba(243, 214, 158, .42), transparent 70%),
        radial-gradient(32% 24% at 27% 58%, rgba(238, 199, 148, .36), transparent 70%),
        radial-gradient(30% 26% at 80% 78%, rgba(240, 208, 158, .38), transparent 70%),
        radial-gradient(26% 20% at 45% 96%, rgba(239, 205, 150, .34), transparent 70%);
}

.ra-content { position: relative; z-index: 1; }

/* ---- header / nav ------------------------------------------------------- */

.ra-header {
    position: sticky;
    top: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 12px 6vw;
    background: rgba(252, 250, 246, .9);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(203, 169, 110, .28);
}

.ra-header__logo { height: 52px; width: auto; display: block; }

.ra-nav { display: flex; align-items: center; gap: 30px; }

.ra-nav__link {
    font-size: 14px;
    font-weight: 600;
    color: #4A4A4A;
    white-space: nowrap;
}
.ra-nav__link:hover { color: #F4544A; }

.ra-nav__cta {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    padding: 11px 22px;
    border-radius: 6px;
    background: linear-gradient(90deg, #C08B2C, #F0DC96);
    color: #2B2B2B;
    font-size: 14px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    font-family: inherit;
}
.ra-nav__cta:hover { filter: brightness(1.06); color: #2B2B2B; }

/* programs dropdown — CSS hover, no JS */
.ra-dropdown { position: relative; display: flex; align-items: center; }
.ra-dropdown__trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #4A4A4A;
    cursor: pointer;
}
.ra-dropdown:hover .ra-dropdown__trigger { color: #F4544A; }
.ra-dropdown__menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding-top: 14px;
    min-width: 190px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .14s ease;
}
.ra-dropdown:hover .ra-dropdown__menu,
.ra-dropdown:focus-within .ra-dropdown__menu { opacity: 1; visibility: visible; }
.ra-dropdown__panel {
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border: 1px solid rgba(206, 175, 116, .45);
    border-radius: 8px;
    box-shadow: 0 10px 26px rgba(90, 70, 30, .16);
    overflow: hidden;
}
.ra-dropdown__item {
    padding: 13px 18px;
    font-size: 15px;
    font-weight: 600;
    color: #2B2B2B;
}
.ra-dropdown__item + .ra-dropdown__item { border-top: 1px solid rgba(206, 175, 116, .28); }
.ra-dropdown__item:hover { background: #FDF7EA; color: #B8862B; }

/* ---- buttons ---------------------------------------------------------- */

.ra-btn {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    padding: 16px 28px;
    border-radius: 6px;
    font-size: 17px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    font-family: inherit;
    line-height: 1;
}
.ra-btn--gold {
    background: linear-gradient(90deg, #C08B2C, #F0DC96);
    color: #2B2B2B;
}
.ra-btn--gold:hover { filter: brightness(1.06); color: #2B2B2B; }
.ra-btn--ghost {
    background: #FFFFFF;
    border: 1px solid rgba(200, 160, 80, .5);
    color: #C99B3D;
}
.ra-btn--ghost:hover { border-color: #C99B3D; color: #B8862B; }

/* ---- sections -------------------------------------------------------- */

.ra-section { padding: 70px 6vw 90px; }
.ra-wrap { max-width: 1240px; margin: 0 auto; }
.ra-stack { display: flex; flex-direction: column; }

.ra-h2 {
    margin: 0;
    font-size: clamp(34px, 3.8vw, 52px);
    font-weight: 800;
    letter-spacing: -.02em;
}
.ra-lead {
    margin: 0;
    font-size: 19px;
    line-height: 1.7;
    color: #3F3F3F;
}

.ra-card {
    background: #FFFFFF;
    border: 1px solid rgba(206, 175, 116, .4);
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(90, 70, 30, .05);
}

/* ---- hero ---------------------------------------------------------- */

.ra-hero { position: relative; overflow: hidden; }
.ra-hero__panel {
    position: absolute;
    top: -12%;
    bottom: -12%;
    left: 34%;
    right: -6%;
    background: #FFFFFF;
    border-radius: 50% 0 0 50%;
}
.ra-hero__inner {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
    padding: 84px 6vw 96px;
    display: grid;
    grid-template-columns: 1.05fr .85fr;
    gap: 60px;
    align-items: center;
}
.ra-hero__title {
    margin: 0;
    font-size: clamp(38px, 4.6vw, 64px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: #F4544A;
}
.ra-hero__sub {
    margin: 0;
    font-size: clamp(30px, 3.6vw, 50px);
    font-weight: 800;
    line-height: 1.14;
    letter-spacing: -.02em;
    color: #2B2B2B;
}

/* ---- split image blocks ------------------------------------------- */

.ra-split {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: .42fr .58fr;
    gap: 70px;
    align-items: center;
    min-height: 560px;
}
.ra-split__media { position: relative; height: 100%; min-height: 560px; overflow: hidden; }
.ra-split__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 0 60% 60% 0 / 0 50% 50% 0;
}

/* ---- generic grids ---------------------------------------------------- */

.ra-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.ra-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }

.ra-pillar-card {
    padding: 30px 28px;
    background: #FFFFFF;
    border: 1px solid rgba(206, 175, 116, .4);
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(90, 70, 30, .05);
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.ra-pillar-card__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #E8CE84, #C79A34);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---- apply modal (native dialog) ----------------------------------- */

dialog.ra-modal {
    width: min(820px, 92vw);
    height: 94vh;
    max-width: none;
    max-height: none;
    padding: 0;
    border: none;
    border-radius: 12px;
    box-shadow: 0 24px 60px rgba(40, 28, 8, .4);
    overflow: hidden;
    background: #FFFFFF;
}
dialog.ra-modal::backdrop { background: rgba(43, 30, 12, .55); backdrop-filter: blur(3px); }
.ra-modal__body { display: flex; flex-direction: column; height: 100%; }
.ra-modal__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 22px;
    border-bottom: 1px solid rgba(206, 175, 116, .4);
    background: linear-gradient(90deg, rgba(192, 139, 44, .1), rgba(240, 220, 150, .14));
}
.ra-modal__title { margin: 0; font-size: 18px; font-weight: 800; color: #2B2B2B; white-space: nowrap; }
.ra-modal__close {
    width: 36px;
    height: 36px;
    flex: none;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    background: #F5EEDF;
    color: #2B2B2B;
    font-family: inherit;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
}
.ra-modal__frame { flex: 1; width: 100%; border: none; display: block; background: #FFFFFF; }

/* ---- footer ------------------------------------------------------- */

.ra-footer { padding: 34px 6vw 40px; border-top: 1px solid rgba(206, 175, 116, .35); }
.ra-footer__inner {
    max-width: 1240px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
}
.ra-footer__logo { height: 70px; width: auto; display: block; }
.ra-footer__copy { margin: 0; font-size: 14px; color: rgba(43, 43, 43, .55); }

/* ---- responsive ------------------------------------------------------- */

@media (max-width: 960px) {
    .ra-r-hero { grid-template-columns: 1fr !important; gap: 40px !important; }
    .ra-r-hero-panel { display: none !important; }
    .ra-r-split { grid-template-columns: 1fr !important; gap: 30px !important; min-height: 0 !important; }
    .ra-r-split-media { min-height: 340px !important; height: 340px !important; }
    .ra-r-split-media img { border-radius: 18px !important; }
    .ra-r-2col { grid-template-columns: 1fr !important; }
    .ra-r-3col { grid-template-columns: 1fr !important; }
    .ra-r-stack { grid-template-columns: 1fr !important; }
}

@media (max-width: 760px) {
    .ra-header { flex-wrap: wrap; gap: 12px; }
    .ra-nav { gap: 18px; flex-wrap: wrap; justify-content: center; width: 100%; }
}