/* A navy banner with the site's existing editorial type and real portrait. */
.hero-banner{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 85% 5%,#284c7d 0,transparent 58%),linear-gradient(115deg,#102a43 20%,#183863 100%);color:#fff}
.hero-banner:before,.hero-banner:after{content:"";position:absolute;z-index:-1;pointer-events:none;border:1px solid #a7c0e733;border-radius:50%;width:650px;height:650px;right:-170px;top:-125px}
.hero-banner:after{width:490px;height:490px;right:-90px;top:-45px;border-color:#d9b66755}
.hero-banner .hero{grid-template-columns:1.2fr 1fr;gap:70px;padding-block:64px 28px}
.hero-banner .hero-copy{position:relative;z-index:1}
.hero-banner .eyebrow{color:#dce7f5;font-size:11px;letter-spacing:1.5px}
.hero-banner .gold-rule{background:#e2bd71}
.hero-banner h1{font-size:clamp(52px,5.2vw,76px);font-weight:600;letter-spacing:-1.4px;line-height:1.06;color:#fff}
.hero-banner h1 em{color:#e7c681;font-weight:600}
.hero-banner .hero-intro{color:#fff;font-size:19px;line-height:1.65;max-width:490px}
.hero-banner .hero-detail{color:#d8e3f2;font-size:16px;line-height:1.8;max-width:490px}
.hero-banner .actions{gap:16px;margin-top:30px}
.hero-banner .hero .actions .pill-link{min-height:48px;padding:12px 22px;border-radius:4px;border:1px solid #d4e0f080;font-size:14px;font-weight:600;color:#fff;justify-content:center}
.hero-banner .hero .actions .pill-link:first-child{background:#e7c681;border-color:#e7c681;color:#102a43}
.hero-banner .hero .actions .pill-link:hover{background:#fff;color:#102a43;border-color:#fff}
.hero-banner .portrait-composition{margin:0;padding:0;max-width:435px;justify-self:end;width:100%}
.hero-banner .portrait-frame{height:auto;aspect-ratio:1/1;border-radius:120px 8px 8px 8px;border:1px solid #d5e3f033;background:#f5f1ec;box-shadow:0 18px 50px #071b3433}
.hero-banner .portrait-photo{width:100%;height:100%;object-fit:cover;object-position:center}
.hero-banner .portrait-foot{color:#e3edf9;font-size:9px;letter-spacing:1px;gap:12px;line-height:1.6}
.hero-banner .portrait-foot span:last-child{color:#d0def0}
.hero-banner .hero-signature{padding-block:16px 22px;border-top:1px solid #d7e6fa30;margin-bottom:0;font-size:9px;letter-spacing:2px;color:#ccdcf0}
@media(max-width:1100px){.hero-banner .hero{gap:36px}.hero-banner h1{font-size:58px}.hero-banner .portrait-frame{border-top-left-radius:90px}.hero-banner .actions{gap:12px}.hero-banner .pill-link{padding:12px 16px}}
@media(max-width:900px){.hero-banner .hero{grid-template-columns:1.15fr 1fr;gap:28px;padding-top:48px}.hero-banner h1{font-size:50px}.hero-banner .hero-intro{font-size:17px}.hero-banner .hero-detail{font-size:15px}.hero-banner .eyebrow{font-size:9px}.hero-banner .portrait-foot{flex-direction:column;gap:3px}.hero-banner .pill-link{width:100%;max-width:260px}}
@media(max-width:650px){.hero-banner .hero{grid-template-columns:1fr;gap:32px;padding-block:40px 26px}.hero-banner h1{font-size:clamp(43px,11.5vw,64px);letter-spacing:-1px}.hero-banner .hero-intro{font-size:18px}.hero-banner .hero-detail{font-size:16px}.hero-banner .eyebrow{font-size:9px;letter-spacing:1px}.hero-banner .actions{align-items:stretch;gap:12px}.hero-banner .pill-link{max-width:none}.hero-banner .portrait-composition{justify-self:center;max-width:360px}.hero-banner .portrait-frame{border-top-left-radius:90px}.hero-banner .portrait-foot{flex-direction:row;font-size:8px}.hero-banner .hero-signature{font-size:8px;letter-spacing:1.4px}.hero-banner:before{right:-350px;top:380px}.hero-banner:after{right:-270px;top:460px}}
