.home-hero-section {position:relative; min-height:500px; overflow:hidden; background:var(--color-navy-primary, #272b55)}
.home-hero-container {display:grid; grid-template-columns:60% 40%; min-height:500px; align-items:center}
.home-hero-content {padding:3rem 2rem 3rem 4rem; position:relative; z-index:3}
.home-hero-content h1 {font-size:2.5rem; font-weight:200; color:#e0e0e0; line-height:1.2; margin-bottom:1rem}
.home-hero-content h2 {font-size:4rem; font-weight:700; color:#ffffff; text-transform:uppercase; line-height:1.1; margin:0; letter-spacing:1px}
.home-hero-image {position:relative; height:100%; overflow:hidden}
.home-hero-image img {width:100%; height:100%; object-fit:cover; object-position:center}
.hero-band-1, .hero-band-2 {position:absolute; background:var(--color-blue-secondary, #499acf); z-index:2; opacity:0.8}
.hero-band-1 {width:120px; height:300px; top:50%; right:45%; transform:translateY(-50%) rotate(-15deg); border-radius:10px}
.hero-band-2 {width:80px; height:200px; top:60%; right:50%; transform:translateY(-50%) rotate(25deg); border-radius:8px}
.home-capabilities-section {background:var(--color-gray-light, #f2f2f2); padding:4rem 0; min-height:600px}
.capabilities-layout {display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start; max-width:1400px; margin:0 auto; padding:0 2rem}
.capabilities-intro {padding:2rem}
.capabilities-intro h2 {font-size:2.2rem; font-weight:700; color:var(--color-navy-primary, #272b55); margin-bottom:1.5rem; line-height:1.2}
.capabilities-intro p {font-size:1.2rem; font-weight:300; color:var(--color-gray-dark, #363940); line-height:1.6; margin-bottom:2rem}
.capabilities-cta {display:inline-flex; align-items:center; background:var(--color-blue-primary, #1b82c3); color:white; padding:1rem 2rem; border:none; border-radius:5px; font-weight:600; text-decoration:none; transition:all 0.3s ease; text-transform:uppercase; letter-spacing:0.5px}
.capabilities-cta:hover {background:var(--color-link-hover, #256fa3); transform:translateY(-2px); box-shadow:0 4px 15px rgba(27, 130, 195, 0.3)}
.capabilities-cta svg {width:20px; height:20px; margin-right:0.5rem; fill:currentColor}
.home-story-section {padding:4rem 0; background:var(--color-gray-light, #f2f2f2)}
.story-container {max-width:1200px; margin:0 auto; padding:0 2rem}
.story-content {background:var(--color-navy-primary, #272b55); border-radius:0 5rem 5rem 0; padding:3rem 4rem 3rem 3rem; color:white; position:relative; max-width:70%}
.story-icon {width:6rem; height:6rem; margin-bottom:1rem}
.story-icon img {width:100%; height:100%; object-fit:contain}
.story-content h2 {font-size:2rem; font-weight:700; color:white; margin-bottom:1rem; margin-top:0.5rem}
.story-content p {font-size:1.1rem; line-height:1.6; margin-bottom:2rem; color:#e0e0e0}
.story-cta {display:inline-flex; align-items:center; background:var(--color-blue-secondary, #499acf); color:var(--color-navy-primary, #272b55); padding:1rem 2rem; border:none; border-radius:5px; font-weight:600; text-decoration:none; transition:all 0.3s ease; text-transform:uppercase; letter-spacing:0.5px}
.story-cta:hover {background:var(--color-blue-tertiary, #91b8d2); transform:translateY(-2px); box-shadow:0 4px 15px rgba(73, 154, 207, 0.3)}
.story-cta img {width:35px; height:35px; margin-right:0.5rem}
.home-agencies-section {padding:4rem 0; background:white}
.agencies-layout {display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; max-width:1400px; margin:0 auto; padding:0 2rem}
.agencies-intro {text-align:center; padding:2rem}
.agencies-icon {width:6rem; height:6rem; margin:0 auto 1.5rem; opacity:0.85}
.agencies-icon img {width:100%; height:100%; object-fit:contain}
.agencies-intro h2 {font-size:2rem; font-weight:700; color:var(--color-navy-primary, #272b55); margin-bottom:1rem}
.agencies-intro p {font-size:1.1rem; color:var(--color-gray-dark, #363940); line-height:1.6; margin-bottom:2rem}
.agencies-cta {display:inline-flex; align-items:center; background:var(--color-blue-primary, #1b82c3); color:white; padding:1rem 2rem; border:none; border-radius:5px; font-weight:600; text-decoration:none; transition:all 0.3s ease; text-transform:uppercase; letter-spacing:0.5px}
.agencies-cta:hover {background:var(--color-link-hover, #256fa3); transform:translateY(-2px); box-shadow:0 4px 15px rgba(27, 130, 195, 0.3)}
.agencies-cta img {width:35px; height:35px; margin-right:0.5rem}

@media (max-width: 1024px) {
.home-hero-container {grid-template-columns:1fr; min-height:400px;}
.home-hero-content {padding:2rem; text-align:center;}
.home-hero-content h1 {font-size:2rem;}
.home-hero-content h2 {font-size:3rem;}
.capabilities-layout, .agencies-layout {grid-template-columns:1fr; gap:2rem;}
.story-content {max-width:85%; border-radius:0 3rem 3rem 0; padding:2.5rem 3rem;}
.hero-band-1, .hero-band-2 {display:none;}
}

@media (max-width: 768px) {
.home-hero-content h1 {font-size:1.8rem;}
.home-hero-content h2 {font-size:2.5rem;}
.capabilities-intro h2, .agencies-intro h2 {font-size:1.8rem;}
.story-content {max-width:95%; border-radius:0 2rem 2rem 0; padding:2rem;}
.story-content h2 {font-size:1.8rem;}
.capabilities-intro, .agencies-intro {padding:1rem;}
.home-capabilities-section, .home-story-section, .home-agencies-section {padding:3rem 0;}
}

@media (max-width: 480px) {
.home-hero-content {padding:1.5rem;}
.home-hero-content h1 {font-size:1.5rem;}
.home-hero-content h2 {font-size:2rem;}
.story-content {border-radius:0 1.5rem 1.5rem 0; padding:1.5rem;}
.capabilities-cta, .story-cta, .agencies-cta {padding:0.8rem 1.5rem; font-size:0.9rem;}
}

.home-section {position:relative; overflow:hidden}
.home-container {max-width:1600px; margin:0 auto; padding:0 2rem}
.text-center {text-align:center}
.mb-0 {margin-bottom:0;}
.mb-1 {margin-bottom:1rem;}
.mb-2 {margin-bottom:2rem;}
.mb-3 {margin-bottom:3rem;}
.mt-0 {margin-top:0;}
.mt-1 {margin-top:1rem;}
.mt-2 {margin-top:2rem;}
.mt-3 {margin-top:3rem;}

@media (prefers-reduced-motion: reduce) {
.capabilities-cta, .story-cta, .agencies-cta {transition:none;}
.capabilities-cta:hover, .story-cta:hover, .agencies-cta:hover {transform:none;}
}

.capabilities-cta:focus, .story-cta:focus, .agencies-cta:focus {outline:2px solid var(--color-blue-secondary, #499acf); outline-offset:2px}