.page-hero{ position: relative; padding-top: 170px; padding-bottom: 90px; 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; }
.page-hero .eyebrow{ margin-bottom: 22px; }
.page-hero h1{ color: #fff; max-width: 22ch; }
.page-hero h1 .em{ color: var(--cyan); }
.page-hero .lead{ color: rgba(255,255,255,.78); margin-top: 28px; max-width: 720px; }
.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); }
.case-relations{ padding: 0 var(--pad-x); background: var(--navy-black); position: relative; z-index: 4; margin-top: clamp(24px, 3vw, 40px); }
.case-relations-inner{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); border-radius: 16px; overflow: hidden; margin-top: clamp(24px, 3vw, 40px); }
.relation{ padding: 22px 26px; background: rgba(0,0,0,.2); border-right: 1px solid rgba(255,255,255,.08); text-decoration: none; transition: background .3s var(--ease); display: block; }
.relation:last-child{ border-right: none; }
.relation:hover{ background: rgba(0,160,223,.12); }
.relation .lbl{ font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.50); margin-bottom: 8px; }
.relation .val{ font-family: var(--display); font-weight: 600; color: #fff; font-size: 15px; line-height: 1.35; }
.relation .val small{ display: block; font-family: var(--body); font-weight: 400; font-size: 12px; color: rgba(255,255,255,.65); margin-top: 4px; }
@media (max-width: 880px){ .case-relations-inner{ grid-template-columns: 1fr 1fr; } .relation:nth-child(2n){ border-right: none; } .relation:nth-child(-n+2){ border-bottom: 1px solid rgba(255,255,255,.08); } }
.case-image{ padding: clamp(40px,5vw,70px) var(--pad-x) 0; background: var(--navy-black); }
.case-image-frame{ background: var(--paper); border-radius: 20px; padding: 14px; box-shadow: 0 30px 80px rgba(2,6,31,.25); }
.case-image-frame img{ width: 100%; height: auto; display: block; border-radius: 12px; }
.cs-overview{ padding: clamp(70px, 9vw, 130px) var(--pad-x) clamp(40px,5vw,60px); background: var(--paper); }
.cs-overview .row-head{ margin-bottom: clamp(20px, 3vw, 30px); }
.cs-overview p{ font-size: clamp(17px, 1.7vw, 20px); color: var(--ink); line-height: 1.65; max-width: 78ch; }
.cs-section{ padding: clamp(80px, 11vw, 160px) var(--pad-x); background: var(--off); }
.cs-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2.5vw, 32px); margin-top: clamp(40px, 6vw, 70px); }
.cs-card{ background: var(--paper); border: 1px solid var(--line); border-radius: var(--rad); padding: clamp(28px, 3vw, 40px); transition: all .35s var(--ease); }
.cs-card:hover{ border-color: rgba(42,125,225,.3); box-shadow: 0 30px 60px rgba(10,10,10,.06); transform: translateY(-4px); }
.cs-card .num{ font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--blue); margin-bottom: 14px; }
.cs-card h3{ font-size: clamp(20px, 2vw, 24px); font-weight: 700; letter-spacing: -.015em; margin-bottom: 14px; line-height: 1.25; }
.cs-card p{ font-size: 15px; color: var(--grey-1); line-height: 1.65; margin: 0; }
@media (max-width: 880px){ .cs-grid{ grid-template-columns: 1fr; } }
.steps-section{ padding: clamp(80px, 11vw, 160px) var(--pad-x); background: var(--paper); }
.steps-list{ display: grid; grid-template-columns: 1fr; gap: 0; margin-top: clamp(40px, 6vw, 60px); border-top: 1px solid var(--line); }
.step{ display: grid; grid-template-columns: 80px 1fr 2fr; gap: clamp(24px, 4vw, 56px); padding: clamp(28px, 3.5vw, 44px) 0; border-bottom: 1px solid var(--line); align-items: start; }
.step-num{ font-family: var(--display); font-weight: 800; font-size: clamp(32px, 3.5vw, 44px); letter-spacing: -.04em; color: var(--blue); line-height: 1; }
.step-title{ font-family: var(--display); font-weight: 700; font-size: clamp(20px, 2.2vw, 26px); letter-spacing: -.02em; line-height: 1.25; }
.step-desc{ font-size: 15px; color: var(--grey-1); line-height: 1.65; }
@media (max-width: 720px){ .step{ grid-template-columns: 1fr; gap: 8px; } }
.impacts{ padding: clamp(80px, 11vw, 160px) var(--pad-x); background: var(--ink); color: #fff; position: relative; overflow: hidden; }
.impacts::before{ content:''; position:absolute; inset:0; background: radial-gradient(ellipse 60% 50% at 90% 50%, rgba(0,160,223,.18), transparent 60%); }
.impacts > *{ position:relative; z-index:2; }
.impacts h2{ color: #fff; }
.impacts h2 .em{ color: var(--cyan); }
.impact-grid{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; margin-top: clamp(40px, 6vw, 70px); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.10); border-radius: 24px; overflow: hidden; }
.impact{ padding: clamp(28px, 3vw, 40px); background: var(--ink); }
.impact b{ display: block; font-family: var(--display); font-weight: 800; font-size: clamp(28px, 3vw, 40px); letter-spacing: -.04em; color: var(--cyan); line-height: 1; margin-bottom: 12px; }
.impact h4{ font-size: 14px; font-weight: 700; letter-spacing: -.01em; color: #fff; margin: 0; }
@media (max-width: 980px){ .impact-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px){ .impact-grid{ grid-template-columns: 1fr; } }
.stack-section{ padding: clamp(80px, 11vw, 160px) var(--pad-x); background: var(--paper); }
.stack-grid{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(30px, 4vw, 50px); }
.stack-grid .pill{ font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding: 10px 18px; background: var(--off); border: 1px solid var(--line); border-radius: 100px; color: var(--ink); }
.related-section{ padding: clamp(80px, 11vw, 160px) var(--pad-x); background: var(--off); border-top: 1px solid var(--line); }
.related-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.5vw, 32px); margin-top: clamp(40px, 6vw, 60px); }
.related-card{ display: block; padding: 0; 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{ aspect-ratio: 16/9; background: var(--off); overflow: hidden; }
.related-card-img img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.related-card-body{ padding: clamp(24px, 2.6vw, 30px); }
.related-card .lbl{ font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); margin-bottom: 12px; }
.related-card h4{ font-size: 18px; font-weight: 700; letter-spacing: -.015em; line-height: 1.3; color: var(--ink); margin: 0; }
@media (max-width: 880px){ .related-grid{ grid-template-columns: 1fr; } }
.cta{ padding: clamp(100px, 14vw, 200px) 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(40px, 6vw, 70px); display: flex; gap: 14px; flex-wrap: wrap; }