/* 2027 homepage composition. Marketing geometry and typography live in ContentPatterns.css. */
body:has(.group-home) #header .headerImageNormal { display: none !important; }
body:has(.group-home) #header .headerImageWhite { display: block !important; }
body:has(.group-home) #header #menu > ul > li > a,
body:has(.group-home) #header #mobileMenuIcon > i { color: white !important; }
body:has(.group-tools) #header { background: #04416a !important; }
body:has(.group-tools) #header :is(#menu, #logo img, #mobileMenuIcon) { background: transparent !important; }

.group-home {
    --content-accent-color: #04416a;
    --group-navy: #082b43;
    --group-link: #04416a;
    line-height: 1.6;
}
#page .group-home p { margin: 0 0 1rem; font-size: 1rem; line-height: 1.6; }
.group-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--group-navy);
    color: white;
}
.group-hero-art { position: absolute; inset: 0; z-index: -2; }
.group-hero-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.group-hero::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    content: "";
    background: linear-gradient(90deg, rgb(3 25 43 / .5), rgb(3 25 43 / .15) 42%, transparent 65%);
    pointer-events: none;
}
.group-plus { color: #ff4850; }
.group-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.5rem; }
.group-home a:focus-visible { outline: 3px solid #0088c4; outline-offset: 5px; }
.group-hero a:focus-visible, .group-ecosystem a:focus-visible { outline-color: white; }
.group-home :is(section[id], #inquirySection) { scroll-margin-top: 75px; }
#page .group-home .inquiryHeader .inquiryTitle { font-size: 3rem; }
#page .group-home .group-eyebrow {
    margin: 0 0 .6rem;
    color: var(--group-link);
    font-size: var(--code-font-size-small);
    font-weight: var(--code-font-weight-bold);
    letter-spacing: .06em;
    text-transform: uppercase;
}
.group-capabilities { padding-block: 2.5rem; }
.group-capabilities .content-with-summary { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 2.5rem; margin-bottom: 2rem; }
#page .group-capabilities .content-summary { border-color: #d5dce1; background: transparent; }
#page .group-capabilities .content-summary p { font-size: 1rem; }
.group-capability-grid .content-link-card-copy { padding-block: .65rem 0; }
.group-ecosystem { padding-block: 2rem; background: var(--group-navy); color: white; }
.group-ecosystem-inner { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 3fr); align-items: center; gap: 2rem; }
#page .group-ecosystem :is(h2, .group-eyebrow) { color: white; }
#page .group-ecosystem h2 { margin-bottom: 0; font-size: clamp(1.6rem, 2.8vw, 2.1rem); }
.group-division-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.group-division-grid li { min-width: 0; margin: 0; padding: 0; }
.group-division-grid a { display: block; max-width: 144px; margin-inline: auto; overflow: hidden; border-radius: 12px; box-shadow: 0 4px 12px rgb(0 0 0 / .16); transition: transform 200ms ease; }
.group-division-grid a:hover { transform: translateY(-3px) scale(1.02); }
.group-division-grid img { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.group-news { padding-block: 2.5rem; background: #f5f7f9; }
.group-promotion-grid { --content-card-image-ratio: 4 / 3; margin-top: 2rem; }
#page .group-home .group-upcoming-title { margin: 2rem 0 1rem; font-size: var(--code-font-size-subsection-title); }
.group-news-links { display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin-top: 1.5rem; }
#page .group-news-links a { display: inline-flex; align-items: center; min-height: 44px; gap: .5rem; color: var(--group-link); font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
.group-tools .contentSectionFull { max-width: var(--content-pattern-max-width); padding: 3.5rem var(--content-pattern-gutter); }
.group-tools .content-link-grid { margin-top: 2rem; }
#page .group-tools h1 { font-size: clamp(2.4rem, 5vw, 4rem); }

@media (900px <= width < 1100px) {
    body:has(.group-home) #header #menu > ul { font-size: .875rem; }
    body:has(.group-home) #header #menu > ul > li > a { padding-inline: 7px; }
}
@media (max-width: 1000px) {
    .group-ecosystem-inner { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 800px) {
    .group-capabilities .content-with-summary { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
}
@media (701px <= width <= 1100px) {
    .group-hero::after { background: linear-gradient(90deg, rgb(3 25 43 / .92), rgb(3 25 43 / .85) 37%, rgb(3 25 43 / .4) 55%, transparent 75%); }
}
@media (max-width: 700px) {
    .group-hero .marketing-hero-inner { min-height: 0; padding-block: max(19rem, 68vw) 2rem; }
    .group-hero-art img { object-position: right top; }
    .group-hero::after { background: linear-gradient(0deg, rgb(3 25 43 / .35), transparent 70%); }
    .group-division-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    #page .group-home .inquiryHeader .inquiryTitle { font-size: 2rem; }
}
@media (max-width: 420px) {
    .group-division-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .group-actions { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
    .group-division-grid a { transition: none; }
    .group-division-grid a:hover { transform: none; }
}
