/* TECH MEDIA V5.10 — one-screen overview, one-screen deep dive, calmer type.
   Dedicated detail scrolling: this CSS never changes page section geometry. */
.detail-overlay{--detail-fixed-height:165px;--detail-pad-x:clamp(28px,4.3vw,72px)}
.detail-scroll{min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scroll-behavior:smooth;scroll-snap-type:y proximity;scroll-padding-top:0}
.detail-content{width:min(calc(100% - (2 * var(--detail-pad-x))),1330px)!important;max-width:1330px;margin-inline:auto;padding:0!important;box-sizing:border-box}
.detail-page{box-sizing:border-box;scroll-snap-align:start;min-height:calc(100dvh - var(--detail-fixed-height));position:relative;padding:clamp(22px,3.6svh,37px) 0;}
.detail-page--overview{display:flex;flex-direction:column;justify-content:center;gap:clamp(14px,2.2svh,23px)}
.detail-page--overview .detail-topline{margin:0!important;padding-bottom:clamp(12px,1.6svh,18px);line-height:1.35;font-size:10px;flex-shrink:0}
.detail-hero{display:grid;grid-template-columns:minmax(0,1.23fr) minmax(260px,.77fr);align-items:center;gap:clamp(26px,4.2vw,65px);height:auto;min-height:0!important;overflow:visible;padding:0!important;margin:0!important}
.detail-hero h2{font-family:'Roboto Condensed','Barlow Condensed',Impact,sans-serif;font-size:clamp(45px,min(5.1vw,8svh),77px)!important;line-height:.99!important;letter-spacing:-.018em;max-width:890px;margin:0 0 clamp(14px,2svh,23px)!important;overflow-wrap:normal;word-break:normal;text-wrap:balance}
.detail-hero p{font-size:clamp(14px,1.08vw,17px)!important;line-height:1.55!important;max-width:720px;margin:0!important;color:#35476e}
.detail-image{min-height:0!important;max-height:clamp(160px,27svh,285px);overflow:visible}
.detail-image img{width:100%;max-height:clamp(160px,27svh,285px)!important;object-fit:contain}
.detail-hero--no-image{grid-template-columns:1fr}.detail-hero--no-image h2{max-width:1100px}.detail-hero--no-image p{max-width:900px}
.detail-opening{border-top:1px solid rgba(17,49,155,.15);padding-top:clamp(15px,2.1svh,23px);font-size:clamp(14px,1.08vw,16px)!important;line-height:1.6!important;max-width:990px!important;margin:0!important;color:#34496f}
.detail-page-cue{display:flex;align-items:center;gap:14px;font-size:10px;letter-spacing:.14em;color:#1d42ad;font-weight:800;margin-top:auto;padding-top:8px}
.detail-page-cue span{display:grid;place-items:center;border:1px solid rgba(15,57,171,.32);height:29px;width:29px;border-radius:50%;font-size:16px}
.detail-page--depth{display:flex;flex-direction:column;justify-content:center;border-top:1px solid rgba(15,50,171,.14);padding-block:clamp(26px,4.1svh,48px)}
.detail-body{border:none!important;max-width:none!important;padding:0!important;margin:0!important}
.detail-columns{display:grid!important;grid-template-columns:minmax(0,1.22fr) minmax(300px,.78fr)!important;gap:clamp(38px,5vw,85px)!important;align-items:start;padding:0!important}
.detail-columns--principles{grid-template-columns:minmax(0,1.75fr) minmax(255px,.75fr)!important;gap:clamp(25px,2.7vw,44px)!important}
.detail-sub{display:block;margin:0 0 clamp(15px,2.2svh,23px);font-size:clamp(10px,.72vw,12px)!important;line-height:1.4;letter-spacing:.15em;font-weight:800}
.detail-points{margin:0!important;padding:0!important;list-style:none}
.detail-points li{display:flex;gap:14px;align-items:baseline;border-bottom:1px solid rgba(13,48,157,.12);padding:clamp(9px,1.55svh,15px) 0!important;font-size:clamp(12px,.93vw,15px)!important;line-height:1.45!important;letter-spacing:-.01em;color:#243b67;overflow-wrap:normal}
.detail-points li:first-child{border-top:1px solid rgba(13,48,157,.12)}
.detail-points li::before{content:''!important;display:block!important;position:relative;top:-1px;flex:0 0 6px;width:6px;height:6px;padding:0!important;margin:0!important;background:#0b34dc;border-radius:50%}
.detail-columns--principles .detail-points li{font-size:clamp(11.5px,.88vw,14px)!important;letter-spacing:-.018em}
.detail-approach{min-width:0}
.detail-columns p{font-size:clamp(13px,.98vw,16px)!important;line-height:1.65!important;color:#3b4f77;margin:0 0 clamp(18px,3svh,30px)!important}
.detail-result{padding-top:clamp(15px,2.5svh,27px)!important;gap:10px!important}
.detail-result strong{font-size:clamp(25px,2.7vw,41px)!important;line-height:1.1}
.detail-timeline{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3.6svh,36px) clamp(34px,4vw,70px)!important;padding:0!important}
.detail-stage{padding:clamp(12px,2svh,21px) 0 0!important}
.detail-stage p{font-size:clamp(13px,.95vw,16px)!important;line-height:1.6!important;margin:10px 0 0!important}
.detail-disclosure{margin:clamp(15px,2.5svh,28px) 0 0!important;padding:clamp(14px,1.8vw,22px)!important}
.detail-disclosure p{font-size:clamp(12px,.85vw,14px)!important;line-height:1.55!important}
.detail-toolbar{min-height:73px;padding-block:14px!important}
.detail-foot{min-height:68px;padding-block:12px!important}
.detail-related{gap:8px!important}
.related-btn{font-size:9px;padding:9px 12px;line-height:1.35}
@media(min-width:1100px){
 .detail-columns--principles .detail-points li{white-space:nowrap}
}
@media(min-width:701px) and (max-height:740px){
 .detail-page{padding-block:clamp(14px,2.5svh,26px)}
 .detail-hero h2{font-size:clamp(39px,min(4.7vw,7svh),67px)!important;margin-bottom:10px!important}
 .detail-image,.detail-image img{max-height:23svh!important}
 .detail-page--overview{gap:10px}
 .detail-opening{padding-top:12px;font-size:13px!important;line-height:1.5!important}
 .detail-points li{padding:7px 0!important;line-height:1.35!important}
 .detail-columns p{line-height:1.45!important}
 .detail-stage p{line-height:1.4!important}
}
@media(max-width:1099px){
 .detail-columns,.detail-columns--principles{grid-template-columns:minmax(0,1fr) minmax(220px,.73fr)!important;gap:clamp(19px,3vw,36px)!important}
 .detail-points li{white-space:normal}
 .detail-hero h2{font-size:clamp(39px,6vw,68px)!important}
 .detail-hero{grid-template-columns:minmax(0,1fr) minmax(165px,.58fr);gap:18px}
 .detail-image,.detail-image img{max-height:210px!important}
}
@media(max-width:700px){
 .detail-overlay{--detail-pad-x:20px}
 .detail-scroll{scroll-snap-type:y proximity}
 .detail-page{min-height:calc(100dvh - var(--detail-fixed-height));padding:clamp(20px,3svh,29px) 0}
 .detail-page--overview{justify-content:flex-start;gap:clamp(12px,2svh,20px)}
 .detail-topline{font-size:9px!important;padding-bottom:12px!important}
 .detail-hero{display:flex!important;flex-direction:column;align-items:stretch;gap:10px;min-height:0!important;padding:0!important}
 .detail-hero h2{font-size:clamp(38px,10.4vw,58px)!important;line-height:1.0!important;margin:0 0 10px!important}
 .detail-hero p{font-size:13px!important;line-height:1.47!important}
 .detail-image{display:flex;justify-content:center;max-height:clamp(102px,17svh,165px)!important;min-height:0!important}
 .detail-image img{width:auto;max-width:80%;max-height:clamp(102px,17svh,165px)!important}
 .detail-opening{font-size:13px!important;line-height:1.5!important;padding-top:13px}
 .detail-page-cue{font-size:8px;letter-spacing:.1em;gap:9px}
 .detail-page-cue span{width:24px;height:24px;font-size:13px}
 .detail-page--depth{justify-content:flex-start}
 .detail-columns,.detail-columns--principles{display:flex!important;flex-direction:column;gap:27px!important}
 .detail-points li{font-size:13px!important;padding:9px 0!important;white-space:normal}
 .detail-columns--principles .detail-points li{font-size:12.5px!important;white-space:normal}
 .detail-columns p{font-size:13px!important;line-height:1.5!important}
 .detail-result strong{font-size:29px!important}
 .detail-timeline{grid-template-columns:1fr!important;gap:16px!important}
 .detail-stage p{font-size:13px!important;line-height:1.5!important}
 .detail-toolbar{min-height:60px;padding:12px 18px!important}
 .detail-foot{min-height:58px;max-height:110px;overflow-y:auto;padding:10px 16px!important}
 .detail-foot>span{display:none}
 .detail-related{margin-top:0!important;flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start}
 .related-btn{white-space:nowrap;font-size:9px;padding:8px 10px}
}
@media(prefers-reduced-motion:reduce){.detail-scroll{scroll-behavior:auto;scroll-snap-type:none}}
/* Keep the first-screen narrative visually centered while the scroll cue
   stays anchored at the bottom of that screen. */
@media(min-width:701px){.detail-page--overview .detail-page-cue{position:absolute;bottom:clamp(17px,2.4svh,26px);left:0;margin:0;padding:0}}