:root {
--br-wine: #741423;
--br-wine-deep: #4d0c17;
--br-gold: #dea43c;
--br-gold-soft: #f2d9a0;
--br-green: #516e1c;
--br-cream: #f4efe2;
--br-paper: #fbf8f0;
--br-ink: #2e1c1f;
--sidebar-w: 280px;
}

body {
font-family: 'Source Sans 3', sans-serif;
background-color: var(--br-wine-deep);
color: var(--br-ink);
line-height: 1.8;
}

h1, h2, h3, .brand-text, .footer-brand, .brand-side {
font-family: 'Bitter', serif;
}

.text-wine { color: var(--br-wine) !important; }
.text-gold { color: var(--br-gold) !important; }
.text-cream { color: var(--br-cream) !important; }

.sidebar-br {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: var(--sidebar-w);
background: var(--br-wine);
border-right: 5px solid var(--br-gold);
padding: 2rem 1.25rem;
z-index: 1030;
}

.logo-side {
width: 110px;
height: 110px;
object-fit: cover;
border: 3px solid var(--br-gold);
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
}

.brand-side {
display: block;
margin-top: 0.9rem;
color: var(--br-cream);
font-weight: 800;
font-size: 1.25rem;
line-height: 1.25;
}

.nav-side {
gap: 0.5rem;
width: 100%;
}

.nav-side-link {
display: flex;
align-items: center;
gap: 0.9rem;
color: var(--br-gold-soft);
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
font-size: 0.9rem;
padding: 0.9rem 1rem;
border-radius: 0.4rem;
border-left: 4px solid transparent;
transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.nav-side-link i {
font-size: 1.2rem;
color: var(--br-gold);
}

.nav-side-link:hover, .nav-side-link:focus {
background: var(--br-wine-deep);
border-left-color: var(--br-gold);
color: var(--br-cream);
transform: translateX(6px);
}

.sidebar-social {
display: flex;
justify-content: center;
gap: 0.75rem;
}

.navbar-br {
background: var(--br-wine);
border-bottom: 4px solid var(--br-gold);
}

.navbar-br .brand-text {
color: var(--br-cream);
font-weight: 800;
}

.navbar-br .text-wine {
color: var(--br-gold-soft) !important;
}

.navbar-scrolled {
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}

.logo-nav {
width: 44px;
height: 44px;
object-fit: cover;
border: 2px solid var(--br-gold);
}

.nav-br {
color: var(--br-cream);
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}

.nav-br:hover, .nav-br:focus {
color: var(--br-gold);
}

.page-wrap {
background: var(--br-paper);
}

@media (min-width: 992px) {
.page-wrap {
margin-left: var(--sidebar-w);
}
}

.kicker-br {
display: inline-block;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--br-cream);
background: var(--br-green);
padding: 0.35rem 1rem;
border-radius: 50rem;
margin-bottom: 1rem;
}

.kicker-cta {
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--br-wine-deep);
background: var(--br-gold);
padding: 0.4rem 1.1rem;
border-radius: 50rem;
}

.btn-br {
background: var(--br-gold);
color: var(--br-wine-deep);
border: none;
border-radius: 50rem;
font-weight: 700;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-br:hover, .btn-br:focus {
background: var(--br-gold-soft);
color: var(--br-wine-deep);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

.btn-gold-br {
background: var(--br-gold);
color: var(--br-wine-deep);
border: none;
border-radius: 50rem;
font-weight: 700;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-gold-br:hover, .btn-gold-br:focus {
background: var(--br-gold-soft);
color: var(--br-wine-deep);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(222, 164, 60, 0.4);
}

.btn-outline-cream-br {
border: 2px solid var(--br-cream);
color: var(--br-cream);
border-radius: 50rem;
font-weight: 700;
transition: all 0.2s ease;
}

.btn-outline-cream-br:hover, .btn-outline-cream-br:focus {
background: var(--br-cream);
color: var(--br-wine-deep);
transform: translateY(-2px);
}

.hero-br {
min-height: 90vh;
display: flex;
align-items: center;
padding: 8rem 0 4.5rem;
background:
radial-gradient(circle at 85% 15%, rgba(222, 164, 60, 0.28), transparent 45%),
radial-gradient(circle at 10% 90%, rgba(81, 110, 28, 0.35), transparent 40%),
linear-gradient(160deg, var(--br-wine) 0%, var(--br-wine-deep) 100%);
color: var(--br-cream);
}

.hero-title {
font-weight: 900;
font-size: clamp(3rem, 7vw, 5.5rem);
line-height: 0.98;
letter-spacing: -0.02em;
color: var(--br-cream);
}

.hero-title-alt {
color: var(--br-gold);
font-style: italic;
font-weight: 600;
}

.hero-sub {
color: var(--br-gold-soft);
font-weight: 500;
border-left: 4px solid var(--br-gold);
padding-left: 1rem;
}

.hero-cta {
background: rgba(251, 248, 240, 0.08);
border: 1px solid rgba(222, 164, 60, 0.5);
border-radius: 1rem;
backdrop-filter: blur(6px);
color: var(--br-cream);
}

.section-br {
padding: 5.5rem 0;
background: var(--br-paper);
}

.section-deep {
background: var(--br-cream);
}

.section-label-col {
position: relative;
}

@media (min-width: 992px) {
.section-label {
position: sticky;
top: 2.5rem;
padding-right: 2.5rem;
}
}

.section-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--br-wine);
color: var(--br-gold);
font-size: 1.6rem;
box-shadow: 0 10px 24px rgba(77, 12, 23, 0.3);
margin-bottom: 1rem;
}

.section-title-br {
font-weight: 800;
color: var(--br-wine);
font-size: clamp(1.8rem, 3.5vw, 2.6rem);
line-height: 1.15;
}

.section-line {
display: block;
width: 72px;
height: 5px;
background: var(--br-gold);
border-radius: 50rem;
margin-top: 1rem;
}

.figure-br {
border: 1px solid var(--br-gold);
background: #ffffff;
padding: 0.7rem;
border-radius: 1rem;
box-shadow: 0 16px 38px rgba(77, 12, 23, 0.18);
}

.img-br {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
display: block;
border-radius: 0.7rem;
transition: transform 0.5s ease;
}

.figure-br:hover .img-br {
transform: scale(1.015);
}

.caption-br {
color: var(--br-wine);
font-size: 0.82rem;
font-style: italic;
}

.lead-br {
font-size: 1.12rem;
font-weight: 500;
color: var(--br-wine-deep);
}

.dropcap::first-letter {
font-family: 'Bitter', serif;
font-size: 3.6rem;
font-weight: 900;
line-height: 0.9;
color: var(--br-wine);
float: left;
padding-right: 0.6rem;
padding-top: 0.3rem;
}

.pullquote-br {
font-family: 'Bitter', serif;
font-size: 1.4rem;
font-weight: 700;
color: var(--br-green);
background: var(--br-gold-soft);
border-left: 8px solid var(--br-wine);
border-radius: 0 1rem 1rem 0;
padding: 1.5rem 2rem;
margin: 0;
}

.card-br {
border: none;
border-radius: 1.1rem;
overflow: hidden;
background: #ffffff;
box-shadow: 0 12px 30px rgba(77, 12, 23, 0.14);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-br:hover {
transform: translateY(-8px);
box-shadow: 0 22px 46px rgba(77, 12, 23, 0.26);
}

.img-br-card {
width: 100%;
aspect-ratio: 3 / 2;
object-fit: cover;
border-bottom: 5px solid var(--br-gold);
}

.section-chip {
display: inline-block;
background: var(--br-green);
color: var(--br-cream);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 0.3rem 0.9rem;
border-radius: 50rem;
}

.card-title-br {
color: var(--br-wine);
font-weight: 800;
}

.cta-br {
background:
radial-gradient(circle at 90% 20%, rgba(222, 164, 60, 0.22), transparent 45%),
linear-gradient(150deg, var(--br-wine) 0%, var(--br-wine-deep) 100%);
color: var(--br-cream);
padding: 5.5rem 0;
border-top: 5px solid var(--br-gold);
}

.cta-br .section-title-br {
color: var(--br-cream);
}

.cta-text {
max-width: 620px;
color: var(--br-gold-soft);
}

.footer-br {
background: var(--br-wine-deep);
color: var(--br-cream);
padding: 3.5rem 0 2.5rem;
}

.logo-footer {
width: 76px;
height: 76px;
object-fit: cover;
border: 2px solid var(--br-gold);
}

.footer-brand {
font-size: 1.5rem;
font-weight: 900;
}

.social-br {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
border: 1px solid var(--br-gold);
color: var(--br-gold-soft);
font-size: 1.25rem;
transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.social-br:hover {
background: var(--br-gold);
color: var(--br-wine-deep);
transform: translateY(-3px);
}

.footer-note {
color: rgba(244, 239, 226, 0.6);
max-width: 640px;
margin: 0 auto;
}

::selection {
background: var(--br-gold);
color: var(--br-wine-deep);
}