.institutional-page {
    background: #f4f7f7;
    color: #102432;
    font-family: "Segoe UI", Inter, Arial, sans-serif;
}

.institutional-page .container {
    width: min(1240px, calc(100% - 32px));
    padding-top: 24px;
}

.institutional-hero {
    position: relative;
    min-height: 610px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    border-radius: 18px;
    background: #061526;
    box-shadow: 0 28px 70px rgba(8, 30, 48, .2);
}

.institutional-hero > img,
.institutional-hero-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.institutional-hero > img { object-fit: cover; }
.institutional-hero-overlay { background: linear-gradient(90deg, rgba(3, 13, 29, .93), rgba(3, 13, 29, .5) 52%, rgba(3, 13, 29, .05)); }

.institutional-hero-content {
    position: relative;
    z-index: 1;
    width: min(720px, 100%);
    padding: 62px;
    color: #fff;
}

.institutional-hero h1 {
    margin: 14px 0 20px;
    color: #fff;
    font-size: clamp(46px, 6vw, 76px);
    line-height: .98;
    letter-spacing: -.055em;
    text-wrap: balance;
}

.institutional-hero p {
    max-width: 650px;
    color: rgba(255,255,255,.86);
    font-size: 19px;
    line-height: 1.55;
}

.institutional-kicker {
    color: #f0b95f;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.institutional-kicker.dark { color: #0f6d73; }
.institutional-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.institutional-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 21px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-weight: 750;
    transition: transform .2s ease, background .2s ease;
}

.institutional-btn:hover { transform: translateY(-2px); }
.institutional-btn.primary { background: #dfa94b; color: #11202a; }
.institutional-btn.ghost { border-color: rgba(255,255,255,.42); color: #fff; background: rgba(255,255,255,.08); }
.institutional-btn.light { background: #fff; color: #0c4f59; }

.institutional-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: end;
    padding: 90px 36px 38px;
}

.institutional-section h2,
.institutional-showcase h2,
.institutional-benefits h2,
.institutional-cta h2 {
    margin: 10px 0 14px;
    color: #102f40;
    font-size: clamp(32px, 4vw, 50px);
    line-height: 1.08;
    letter-spacing: -.04em;
}

.institutional-section p,
.institutional-showcase p,
.institutional-benefits p { color: #5c707b; font-size: 17px; line-height: 1.7; }

.institutional-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 24px 0 96px;
}

.institutional-steps article {
    display: flex;
    gap: 18px;
    min-height: 190px;
    padding: 30px;
    border: 1px solid #cbdadd;
    border-radius: 16px;
    background: #fff;
}

.institutional-steps article > span { color: #dfa94b; font-size: 30px; font-weight: 800; }
.institutional-steps h3 { color: #123649; font-size: 19px; }
.institutional-steps p { color: #637681; line-height: 1.6; }

.institutional-showcase {
    display: grid;
    grid-template-columns: 1.12fr .88fr;
    gap: 56px;
    align-items: center;
    padding: 64px;
    border-radius: 20px;
    background: #071b2c;
}

.institutional-showcase-photo { height: 560px; overflow: hidden; border-radius: 14px; }
.institutional-showcase-photo img { width: 100%; height: 100%; object-fit: cover; }
.institutional-showcase h2 { color: #fff; }
.institutional-showcase p { color: rgba(255,255,255,.72); }
.institutional-checks { display: grid; gap: 12px; padding: 0; list-style: none; color: rgba(255,255,255,.9); }
.institutional-checks li::before { content: "✓"; margin-right: 10px; color: #f0b95f; font-weight: 900; }

.institutional-audiences { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 96px 0 32px; }
.institutional-audiences article { min-height: 330px; padding: 42px; border: 1px solid #cbdadd; border-radius: 18px; background: #fff; }
.institutional-audiences h2 { margin: 22px 0 18px; color: #102f40; font-size: 31px; line-height: 1.12; letter-spacing: -.035em; }
.institutional-audiences p { color: #60737d; font-size: 16px; line-height: 1.7; }
.audience-label { color: #0f6d73; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

.institutional-benefits { padding: 70px 20px 96px; }
.benefit-heading { max-width: 760px; margin-bottom: 38px; }
.benefit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.benefit-grid article { padding: 28px; border-top: 3px solid #dfa94b; background: #fff; box-shadow: 0 14px 34px rgba(15,50,66,.07); }
.benefit-grid strong { color: #0f6d73; font-size: 18px; letter-spacing: .08em; }
.benefit-grid h3 { color: #16394a; }
.benefit-grid p { font-size: 14px; line-height: 1.55; }

.institutional-cta {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 52px;
    padding: 58px;
    border-radius: 20px;
    background: linear-gradient(135deg, #0d6670, #08283d);
    color: #fff;
}

.institutional-cta h2 { color: #fff; }
.institutional-cta p { color: rgba(255,255,255,.76); font-size: 16px; }
.institutional-cta .institutional-actions { flex-shrink: 0; }

@media (max-width: 860px) {
    .institutional-hero { min-height: 600px; }
    .institutional-hero-content { padding: 34px 26px; }
    .institutional-hero h1 { font-size: 48px; }
    .institutional-section,
    .institutional-showcase,
    .institutional-audiences { grid-template-columns: 1fr; }
    .institutional-section { padding: 70px 8px 28px; gap: 18px; }
    .institutional-steps,
    .benefit-grid { grid-template-columns: 1fr 1fr; }
    .institutional-showcase { padding: 24px; }
    .institutional-showcase-photo { height: 360px; }
    .institutional-cta { align-items: flex-start; flex-direction: column; padding: 36px 26px; }
}

@media (max-width: 560px) {
    .institutional-page .container { width: min(100% - 20px, 1240px); }
    .institutional-hero { min-height: 560px; }
    .institutional-hero h1 { font-size: 39px; }
    .institutional-hero p { font-size: 16px; }
    .institutional-steps,
    .benefit-grid { grid-template-columns: 1fr; }
    .institutional-steps { padding-bottom: 68px; }
    .institutional-audiences { padding-top: 68px; }
    .institutional-audiences article { min-height: auto; padding: 28px; }
    .institutional-showcase h2,
    .institutional-section h2,
    .institutional-benefits h2,
    .institutional-cta h2 { font-size: 33px; }
}