.page-hero{ position: relative; padding-top: 170px; padding-bottom: 70px; padding-left: var(--pad-x); padding-right: var(--pad-x); background: var(--navy-black); color: #fff; overflow: hidden; }
.page-hero::before{ content:''; position:absolute; inset:0; background: radial-gradient(ellipse 60% 50% at 90% 30%, rgba(0,160,223,.30), transparent 60%), radial-gradient(ellipse 50% 60% at 0% 100%, rgba(13,152,122,.20), transparent 60%); }
.page-hero-inner{ position:relative; z-index:2; max-width: 900px; }
.page-hero .eyebrow{ margin-bottom: 22px; }
.page-hero h1{ color: #fff; max-width: 22ch; }
.page-hero h1 .em{ color: var(--cyan); }
.page-hero-meta{ position:absolute; top: 76px; left: 0; right: 0; z-index: 3; display:flex; justify-content:space-between; align-items:center; padding: 14px var(--pad-x); border-bottom: 1px solid rgba(255,255,255,.08); font-family: var(--mono); font-size:11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.50); }
.page-hero-meta a{ color: rgba(255,255,255,.70); transition: color .25s var(--ease); }
.page-hero-meta a:hover{ color: var(--cyan); }
.article-byline{ display:flex; flex-wrap:wrap; gap: 10px 24px; margin-top: 30px; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.62); }
.article-byline .cat{ color: var(--cyan); }

.article-image{ padding: clamp(36px,5vw,64px) var(--pad-x) 0; background: var(--navy-black); }
.article-image-frame{ max-width: 1100px; margin: 0 auto; background: var(--paper); border-radius: 20px; padding: 12px; box-shadow: 0 30px 80px rgba(2,6,31,.28); }
.article-image-frame img{ width: 100%; height: auto; display: block; border-radius: 12px; }

.article-body{ padding: clamp(56px,7vw,96px) var(--pad-x) clamp(60px,8vw,110px); background: var(--paper); }
.article-body-inner{ max-width: 760px; margin: 0 auto; }
.article-body p{ font-size: 18px; line-height: 1.75; color: var(--ink); margin: 0 0 24px; }
.article-body .lead-para{ font-size: clamp(20px,2.1vw,24px); line-height: 1.6; font-family: var(--display); font-weight: 500; letter-spacing: -.01em; color: var(--ink); margin-bottom: 34px; }
.article-body h2{ font-family: var(--display); font-weight: 700; font-size: clamp(24px,2.8vw,32px); letter-spacing: -.02em; line-height: 1.2; color: var(--ink); margin: 48px 0 18px; }
.article-body h3{ font-family: var(--display); font-weight: 700; font-size: clamp(19px,2vw,22px); letter-spacing: -.01em; color: var(--ink); margin: 34px 0 14px; }
.article-body ul{ margin: 0 0 24px; padding: 0; list-style: none; }
.article-body ul li{ position: relative; padding-left: 28px; font-size: 17px; line-height: 1.7; color: var(--ink); margin-bottom: 12px; }
.article-body ul li::before{ content:''; position:absolute; left: 4px; top: 12px; width: 8px; height: 8px; border-radius: 2px; background: var(--blue); }
.article-body blockquote{ margin: 34px 0; padding: 4px 0 4px 28px; border-left: 3px solid var(--blue); font-family: var(--display); font-weight: 500; font-size: clamp(19px,2.1vw,23px); line-height: 1.5; letter-spacing: -.01em; color: var(--ink); }
.article-body blockquote cite{ display:block; margin-top: 14px; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-style: normal; color: var(--grey-1); }
.article-body .callout{ background: var(--off); border: 1px solid var(--line); border-radius: 18px; padding: clamp(24px,3vw,34px); margin: 36px 0; }
.article-body .callout h3{ margin-top: 0; }
.article-body .callout p:last-child{ margin-bottom: 0; }
.article-body strong{ color: var(--ink); font-weight: 700; }
.article-share{ max-width: 760px; margin: 0 auto; padding-top: 34px; border-top: 1px solid var(--line); display:flex; align-items:center; gap: 16px; flex-wrap: wrap; }
.article-share span{ font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--grey-1); }
.article-share a{ width: 40px; height: 40px; border-radius: 50%; background: var(--off); display:grid; place-items:center; color: var(--ink); transition: all .25s var(--ease); }
.article-share a:hover{ background: var(--blue); color:#fff; transform: translateY(-2px); }
.article-share a svg{ width: 17px; height: 17px; }

.related-section{ padding: clamp(70px,9vw,120px) var(--pad-x); background: var(--off); border-top: 1px solid var(--line); }
.related-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px,2.5vw,32px); margin-top: clamp(36px,5vw,56px); }
.related-card{ display: flex; background: var(--paper); border: 1px solid var(--line); border-radius: var(--rad); transition: all .3s var(--ease); overflow: hidden; text-decoration: none; color: var(--ink); }
.related-card:hover{ border-color: rgba(42,125,225,.3); transform: translateY(-4px); box-shadow: 0 30px 60px rgba(10,10,10,.06); }
.related-card-img{ width: 40%; min-width: 40%; background: var(--off); overflow: hidden; }
.related-card-img img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.related-card-body{ padding: clamp(22px,2.4vw,28px); }
.related-card .lbl{ font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); margin-bottom: 10px; }
.related-card h4{ font-size: 17px; font-weight: 700; letter-spacing: -.015em; line-height: 1.3; color: var(--ink); margin: 0; }
@media (max-width: 720px){ .related-grid{ grid-template-columns: 1fr; } }

.cta{ padding: clamp(90px, 13vw, 180px) var(--pad-x); background: var(--navy-black); color: #fff; position: relative; overflow: hidden; }
.cta::before{ content:''; position:absolute; inset:0; background: radial-gradient(ellipse 60% 40% at 50% 100%, rgba(0,160,223,.22), transparent 60%); }
.cta > *{ position: relative; z-index: 2; }
.cta .eyebrow{ color: var(--cyan); margin-bottom: 28px; }
.cta h2{ color: #fff; max-width: 22ch; }
.cta h2 .em{ color: var(--cyan); }
.cta .lead{ color: rgba(255,255,255,.7); margin-top: 26px; }
.cta-actions{ margin-top: clamp(36px, 5vw, 60px); display: flex; gap: 14px; flex-wrap: wrap; }