.story {
display: grid;
grid-template-columns: 1fr 1fr;
overflow: hidden;
container-type: inline-size;
} .story__image {
min-height: 600px;
overflow: hidden;
}
.story__image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transition: transform var(--t-med);
}
.story__image:hover img {
transform: scale(1.02);
} .story__content {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 1.75rem;
padding: 4.5rem max(var(--pad-x), calc((100cqw - var(--container)) / 2 + var(--pad-x))) 4.5rem var(--pad-x);
} .story__title {
font-family: var(--f-heading);
font-size: var(--text-5xl);
line-height: 1.12;
color: var(--blk-text, var(--c-dark));
} .story__body {
font-family: var(--f-body);
font-size: var(--text-base);
line-height: 1.7;
color: var(--blk-text, var(--c-text-2));
} .story__quote {
display: flex;
align-items: flex-start;
gap: 1rem;
background-color: var(--blk-surface, var(--c-gray));
border-radius: var(--r-sm);
padding: 1.25rem 1.5rem;
}
.story__quote-bar {
width: 3px;
min-height: 40px;
background-color: var(--blk-accent, var(--c-dark));
border-radius: 2px;
flex-shrink: 0;
align-self: stretch;
}
.story__quote p {
font-family: var(--f-body);
font-size: 0.9375rem;
font-weight: 600;
line-height: 1.5;
color: var(--blk-text, var(--c-dark));
} .story.is-style-dark {
background-color: var(--dark-bg, #0D0D0D);
border-color: #333333;
}
.story.is-style-dark .story__title    { color: #FFFFFF; }
.story.is-style-dark .story__body     { color: #94A3B8; }
.story.is-style-dark .eyebrow         { color: var(--dark-accent, #2EA3F1); }
.story.is-style-dark .eyebrow__dot,
.story.is-style-dark .eyebrow__line   { background-color: var(--dark-accent, #2EA3F1); }
.story.is-style-dark .story__quote    { background-color: #1A1A1A; }
.story.is-style-dark .story__quote p  { color: #FFFFFF; }
.story.is-style-dark .story__quote-bar { background-color: var(--dark-accent, #2EA3F1); } .story.is-style-dark .btn--dark {
background-color: #FFFFFF;
color: #0D0D0D;
border-color: #FFFFFF;
}
.story.is-style-dark .btn--dark:hover { opacity: 0.88; } @media (max-width: 1024px) {
.story {
grid-template-columns: 1fr;
}
.story__image {
min-height: 360px;
order: -1;
}
.story__content {
padding: 3.5rem var(--pad-x);
gap: 1.5rem;
}
}
@media (max-width: 768px) {
.story__image {
min-height: 260px;
}
.story__title {
font-size: var(--text-4xl);
}
.story__content {
gap: 1.25rem;
}
}
@media (prefers-reduced-motion: reduce) {
.story__image img {
transition: none;
}
}