/* Original CSS rings, with a transparent aperture for a future image layer.
   Circle: 650px diameter; right:-150px; top:-180px.
   Place a photo behind ::before; keep heading content above both layers. */
.hero,.page-title{background:transparent;isolation:isolate}
/* Selected page imagery is behind the unchanged navy mask and inner stroke. */
body[data-page="new"]{--hero-photo:url('/orlando-inspired-skyline.webp')}
body[data-page="old"]{--hero-photo:url('/sales-commercial-property.webp')}
body[data-page="buy"]{--hero-photo:url('/a-confident-purchase.webp');--hero-photo-top:-140px}
body[data-page="sell"]{--hero-photo:url('/the-next-chapter.webp');--hero-photo-top:-150px}
body[data-page="lease"]{--hero-photo:url('/space-that-grows-with-you.webp')}
body[data-page="about"]{--hero-photo:url('/tools-for-better-decisions.webp')}
body[data-page="education"]{--hero-photo:url('/an-entrepreneurs-perspective.webp')}
body[data-page="contact"]{--hero-photo:url('/contact/one-call-away.webp')}
body[data-page] :is(.hero,.page-title){background-image:var(--hero-photo);background-repeat:no-repeat;background-size:650px 650px;background-position:right -150px top var(--hero-photo-top,-110px)}
/* Keep the shared site-wide heading size; only control line layout here. */
body[data-page="about"] .page-title h1{max-width:none;white-space:nowrap}
@media(max-width:1100px){body[data-page="about"] .page-title h1{white-space:normal}}
/* Retain the established small-screen contrast treatment inside the aperture. */
@media(max-width:1100px){body[data-page] :is(.hero,.page-title){background-image:linear-gradient(90deg,#012169e6,#01216999),var(--hero-photo)}}
.hero::before,.page-title::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:#012169;-webkit-mask-image:radial-gradient(circle at calc(100% - 175px) 145px,transparent 324px,#000 325px);mask-image:radial-gradient(circle at calc(100% - 175px) 145px,transparent 324px,#000 325px)}
/* An opaque light-blue stroke remains visible even over a pale photo or page. */
.hero::after,.page-title::after{content:"";display:block;position:absolute;right:-150px;top:-180px;width:650px;height:650px;box-sizing:border-box;border:1px solid #a1b5cb;border-radius:50%;background:transparent;box-shadow:0 0 0 80px #ffffff0a,0 0 0 160px #ffffff06;pointer-events:none}