body.home-page .hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:40px;align-items:center;min-height:0;padding:52px max(24px,calc((100vw - 1240px)/2));background:#10182b;overflow:hidden}
body.home-page .hero .hero-content{position:relative;inset:auto;max-width:none;padding:0;margin:0;z-index:1}
body.home-page .hero h1{font-size:clamp(32px,3.4vw,54px);line-height:1.08;margin:16px 0 22px;max-width:13ch;color:#fff}
body.home-page .hero .hero-copy{font-size:18px;line-height:1.6;max-width:38ch;color:#d9e2ee;margin:0 0 28px}
body.home-page .hero .hero-buttons{display:flex;flex-wrap:wrap;gap:12px}
body.home-page .hero .hero-buttons .button{min-height:48px;border:1px solid #a6d8ff;background:transparent;color:#fff;padding:13px 20px;box-shadow:none}
body.home-page .hero .hero-buttons .button:hover{background:#20324c}
body.home-page .hero .hero-buttons .button:focus-visible,.hero-example-controls button:focus-visible{outline:3px solid #fff;outline-offset:4px}
.hero-examples{margin:0;min-width:0;border:1px solid #53647b;border-radius:16px;overflow:hidden;background:#17243a}
.hero-examples>img{display:block;width:100%;height:340px;object-fit:contain;background:#e9edf2}
.hero-examples figcaption{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px;color:#fff}
.hero-example-label{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#a7d8ff;margin-bottom:5px}
#hero-example-caption{font-size:14px;line-height:1.4;display:block}
.hero-example-controls{display:flex;gap:8px;align-items:center;flex-shrink:0}
.hero-example-controls button{border:1px solid #a6d8ff;background:transparent;color:#fff;width:46px;height:46px;cursor:pointer;border-radius:50%;font-size:22px}
#hero-example-count{font-size:12px;min-width:33px;text-align:center;font-variant-numeric:tabular-nums}
@media(max-width:760px){body.home-page .hero{grid-template-columns:1fr;gap:24px;padding:28px 18px}body.home-page .hero h1{font-size:34px;margin:12px 0 16px;max-width:16ch}body.home-page .hero .hero-copy{font-size:16px;margin-bottom:22px}body.home-page .hero .hero-buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px}body.home-page .hero .hero-buttons .button{padding:12px 8px;font-size:13px;white-space:normal;text-align:center}.hero-examples>img{height:220px}.hero-examples figcaption{padding:12px;gap:8px}.hero-example-controls{gap:5px}.hero-example-controls button{width:46px;height:46px}#hero-example-caption{font-size:12px}.hero-example-label{font-size:10px}}
/* Match the existing unified light-blue shell, including its important rules. */
body.home-page .hero{background:#f6f8fa!important;padding:40px max(24px,calc((100vw - 1240px)/2))!important;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)!important}
body.home-page .hero .hero-content{padding:0!important}
body.home-page .hero h1{color:#11172c!important}
body.home-page .hero .hero-copy{color:#4d596c!important}
body.home-page .hero .hero-buttons .button{color:#11172c!important;border-color:#88b9dc!important;background:transparent!important}
body.home-page .hero .hero-buttons .button:hover{background:#e8f2fa!important}
body.home-page .hero .hero-buttons .button:focus-visible{outline-color:#185d8e}
@media(max-width:760px){body.home-page .hero{padding:28px 18px!important;grid-template-columns:1fr!important}}

.project-media-link{margin:20px 0 0}.project-media-link a{display:inline-flex;align-items:center;min-height:44px;color:#175d8f;font-weight:600;text-underline-offset:4px}