.about-hero {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 640px;
overflow: hidden;
container-type: inline-size;
} .about-hero__left {
display: flex;
align-items: center;
justify-content: center;
padding: var(--pad-section) var(--pad-x) var(--pad-section) max(var(--pad-x), calc((100cqw - var(--container)) / 2 + var(--pad-x)));
}
.about-hero__left-inner {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2rem;
width: 100%;
}
.about-hero__title {
font-family: var(--f-heading);
font-size: var(--text-9xl);
line-height: 1.05;
color: var(--blk-text, var(--c-dark));
}
.about-hero__sub {
font-family: var(--f-body);
font-size: var(--text-md);
line-height: 1.65;
color: var(--blk-text, var(--c-text-2));
} .about-hero__right {
position: relative;
overflow: hidden;
} .about-hero__right img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
} .about-hero.is-style-dark {
background-color: var(--dark-bg, #0D0D0D);
border-color: #333333;
}
.about-hero.is-style-dark .about-hero__title { color: #FFFFFF; }
.about-hero.is-style-dark .about-hero__sub   { color: #94A3B8; }
.about-hero.is-style-dark .eyebrow           { color: var(--dark-accent, #2EA3F1); }
.about-hero.is-style-dark .eyebrow__dot,
.about-hero.is-style-dark .eyebrow__line     { background-color: var(--dark-accent, #2EA3F1); } .about-hero.is-style-dark .btn--dark {
background-color: #FFFFFF;
color: #0D0D0D;
border-color: #FFFFFF;
}
.about-hero.is-style-dark .btn--dark:hover { opacity: 0.88; } @media (max-width: 1024px) {
.about-hero {
grid-template-columns: 1fr;
min-height: auto;
} .about-hero__right {
order: -1;
position: relative;
height: 360px;
}
.about-hero__left {
justify-content: flex-start;
}
.about-hero__left-inner {
max-width: 100%;
gap: 1.5rem;
}
}
@media (max-width: 768px) {
.about-hero__right {
height: 260px;
}
.about-hero__title {
font-size: var(--text-7xl);
}
}