/* Styles only for the generated sub-pages. Everything else comes from css/site.css. */
.page-hero{background:var(--navy-deep);color:#fff;padding:140px 0 64px;position:relative;overflow:hidden}
.page-hero::before{content:"";position:absolute;top:-120px;right:-120px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(1,168,236,.35),transparent 70%)}
.page-hero .wrap{position:relative;z-index:1}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:13.5px;color:#aebfd8;margin-bottom:22px}
.crumbs a{color:#aebfd8}
.crumbs a:hover{color:#fff}
.page-hero h1{color:#fff;font-size:clamp(32px,4.6vw,54px);max-width:21ch}
.page-hero .lede{color:#cfe1f7;font-size:18px;line-height:1.6;margin-top:20px;max-width:68ch}

.page-body{padding:32px 0 88px}
.ps{padding-top:48px}
.ps h2{font-size:clamp(25px,3vw,34px);margin-bottom:18px}
.ps-text{max-width:820px}
.ps p{font-size:16.5px;line-height:1.7;margin-top:14px}
.ps h2+p{margin-top:0}
.ps p a,.ps li a{color:#0079ad;text-decoration:underline;text-underline-offset:2px}
.ps p a:hover,.ps li a:hover{color:var(--navy)}
.ps-intro{margin-bottom:26px;max-width:820px}

.ps-list,.ps-steps{margin-top:6px}
.ps-list{list-style:none}
.ps-list li{position:relative;padding-left:26px;margin-bottom:12px;font-size:16.5px;line-height:1.6}
.ps-list li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;border-radius:50%;border:2px solid var(--cyan)}
.ps-steps{padding-left:22px}
.ps-steps li{margin-bottom:12px;font-size:16.5px;line-height:1.6;padding-left:6px}
.ps-steps li::marker{color:var(--cyan);font-weight:800}

.fact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.fact-grid-2{grid-template-columns:repeat(2,1fr)}
.fact-grid-3{grid-template-columns:repeat(3,1fr)}
.fact{background:var(--bg-soft);border-radius:var(--radius);padding:26px}
.fact h3{font-size:18px;margin-bottom:10px}
.fact p{font-size:15px;line-height:1.6;margin-top:0;color:var(--grey)}

.ps .detail-col h3{font-size:15px;color:var(--cyan);font-family:var(--sans);font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin-bottom:16px;display:flex;align-items:center;gap:9px;line-height:1.3}
.ps .detail-col h3 .st{width:24px;height:24px;flex-shrink:0;border-radius:7px;background:var(--bg-soft);color:var(--navy);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-family:var(--display)}
.ps .detail-col li{font-size:15px}

.faq-item{border-top:1px solid var(--line);padding:20px 0}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-item h3{font-size:18px;line-height:1.3}
.faq-item p{margin-top:8px;font-size:16px;color:var(--grey)}

.proj-group{padding-top:48px}
.proj-group h2{font-size:clamp(25px,3vw,34px);margin-bottom:22px}

.rel{padding-top:64px}
.rel h2{font-size:clamp(25px,3vw,34px);margin-bottom:22px}
.rel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.rel-card{display:block;border:1px solid var(--line);border-radius:var(--radius);padding:24px;transition:transform .25s,box-shadow .25s,border-color .25s}
.rel-card:hover{transform:translateY(-4px);border-color:var(--cyan);box-shadow:var(--shadow-md)}
.rel-card strong{display:block;font-family:var(--display);font-weight:800;font-size:17px;line-height:1.25;color:var(--navy)}
.rel-card span{display:block;font-size:14px;line-height:1.5;color:var(--grey);margin-top:8px}

@media(max-width:1080px){
  .fact-grid,.rel-grid{grid-template-columns:repeat(2,1fr)}
  .fact-grid-3{grid-template-columns:1fr}
}
@media(max-width:760px){
  .page-hero{padding:116px 0 44px}
  .page-hero .lede{font-size:16.5px}
  .page-body{padding:12px 0 64px}
  .ps,.proj-group{padding-top:38px}
  .fact-grid,.fact-grid-2,.rel-grid{grid-template-columns:1fr}
}