/* ─────────────────────────────────────────────────────
   PLATINUM FOUNDATION — inner.css
   All inner pages: banner, content sections, CTA
───────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────
   PAGE BANNER
───────────────────────────────────────────────────── */

.page-banner {
    position: relative;
    height: 52vh;
    min-height: 380px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    margin-top: 0;
}

.banner-bg {
    position: absolute;
    inset: 0;
    background: var(--dark) center/cover no-repeat;
}

.banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(9,21,32,.95) 0%,
        rgba(9,21,32,.6) 50%,
        rgba(9,21,32,.3) 100%
    );
}

.banner-content {
    position: relative;
    z-index: 2;
    padding: 0 64px 56px;
    width: 100%;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: rgba(255,255,255,.45);
    margin-bottom: 16px;
}

.breadcrumb a { color: rgba(255,255,255,.45); transition: color .2s; }
.breadcrumb a:hover { color: var(--purple); }
.breadcrumb-sep { color: var(--purple); font-size: 12px; }
.breadcrumb-current { color: rgba(255,255,255,.75); }

.banner-title {
    font-family: var(--f-display);
    font-weight: 400;
    font-size: clamp(44px, 6vw, 80px);
    line-height: .95;
    color: var(--white);
    letter-spacing: -.01em;
}

.banner-rule {
    width: 44px; height: 2px;
    background: var(--purple);
    margin-top: 20px;
}

/* ─────────────────────────────────────────────────────
   INNER CONTENT SECTIONS
───────────────────────────────────────────────────── */

.inner-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 700px;
}

.inner-section--flip .inner-section-text { order: -1; padding: 72px 64px 96px 3vw; }

.inner-section-image {
    position: relative;
    overflow: hidden;
    min-height: 600px;
}

.inner-section-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .9s ease;
}

.inner-section:hover .inner-section-image img { transform: scale(1.04); }

.inner-section-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 72px 3vw 96px 64px;
    background: var(--bg);
}

.inner-section-text--full {
    grid-column: 1 / -1;
    max-width: 860px;
    margin: 0 auto;
    padding: 72px 64px;
    text-align: center;
    background: transparent;
}

.inner-section:nth-child(even) .inner-section-text:not(.inner-section-text--full) { background: var(--cream); }
.inner-section-text:not(.inner-section-text--full) { background: var(--bg); }
.inner-section--cream .inner-section-text { background: rgba(13,34,51,.05) !important; }

.inner-section-text--full .section-label     { justify-content: center; }
.inner-section-text--full .inner-section-rule { margin-left: auto; margin-right: auto; }

.inner-section-heading {
    font-family: var(--f-display);
    font-weight: 400;
    font-size: clamp(36px, 4vw, 52px);
    line-height: .95;
    letter-spacing: -.01em;
    color: var(--green);
    margin-bottom: 20px;
}

.inner-section-rule {
    width: 44px; height: 2px;
    background: var(--purple);
    margin-bottom: 24px;
}

.inner-section-body {
    font-size: 15px;
    line-height: 1.85;
    color: var(--text-mid);
}

.inner-section-body p + p { margin-top: 16px; }

/* ─────────────────────────────────────────────────────
   CTA (shared across all inner pages)
───────────────────────────────────────────────────── */

.section-cta {
    position: relative;
    padding: 140px 64px;
    overflow: hidden;
    text-align: center;
}

.cta-bg {
    position: absolute;
    inset: 0;
    background: var(--dark) center/cover no-repeat;
}

.cta-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(9,21,32,.88), rgba(9,21,32,.93));
}

.cta-content {
    position: relative;
    z-index: 2;
    max-width: 640px;
    margin: 0 auto;
}

.cta-word {
    font-family: var(--f-display);
    font-weight: 400;
    font-size: clamp(48px, 7vw, 84px);
    line-height: .92;
    letter-spacing: -.01em;
    color: var(--white);
    margin-bottom: 16px;
}

.cta-rule {
    width: 44px; height: 2px;
    background: var(--purple);
    margin: 0 auto 28px;
}

.cta-subtitle {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 20px;
    color: var(--platinum);
    margin-bottom: 20px;
}

.cta-body {
    font-size: 15px;
    line-height: 1.85;
    color: rgba(255,255,255,.65);
    margin-bottom: 40px;
}

/* ─────────────────────────────────────────────────────
   RESPONSIVE — INNER
───────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .banner-content     { padding: 0 32px 48px; }
    .inner-section-text { padding: 56px 40px; }
    .section-cta        { padding: 100px 32px; }
}

@media (max-width: 768px) {
    .page-banner    { height: 44vh; min-height: 300px; }
    .banner-content { padding: 0 24px 36px; }

    .inner-section { grid-template-columns: 1fr; height: auto; }
    .inner-section-image { height: 260px; }
    .inner-section-text  { padding: 40px 24px; }
    .inner-section--flip .inner-section-text { order: 0; }
    .inner-section-body  { max-width: 100%; }

    .section-cta { padding: 80px 24px; }
    .cta-word    { font-size: 44px; }
}