/* HD COOL R22 – picture-led layout, first-screen service discovery and systematic 320–1920px correction. */
:root{--r22-cyan:#1cdbed;--r22-line:rgba(35,206,232,.40);--r22-card:#07283c}
html,body{overflow-x:clip}*{min-width:0}img{image-rendering:auto;max-width:100%}.shell,.header-inner{width:min(1640px,calc(100% - 32px))}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid #57eefa;outline-offset:3px}
.hero h1,.section-head h2,.r20-tech-band h2{overflow-wrap:normal;hyphens:none;text-wrap:pretty;letter-spacing:-.8px}
.hero-copy{width:min(56%,800px)}.hero .hero-lead{max-width:675px}
.grid-wrap{padding:15px;background:linear-gradient(130deg,#061e30,#08293d);border:1px solid #20809d;border-top:0}
.grid-head{padding:1px 4px 14px}.grid-head .eyebrow{font-size:12px}
.service-grid{gap:12px}.service-card{height:clamp(190px,15vw,240px);min-height:0;aspect-ratio:auto;border-radius:11px;box-shadow:0 10px 22px #00121a4d;border-color:#2385a4}.service-card .tile-img{width:100%;height:100%;object-fit:cover;object-position:center center}.service-card .tile-shade{background:linear-gradient(0deg,rgba(1,17,29,.99),rgba(2,21,34,.75) 29%,transparent 78%)}.tile-info strong{font-size:clamp(15px,1.2vw,21px)}.tile-info small{line-height:1.36;font-size:12px;color:#d6eff5}.service-card:has(img[src$='.svg']){background:#062c40}
/* Real responsive photo tiles: not excessively tall, photo and label both readable. */
@media(min-width:821px) and (max-width:1200px){.service-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.service-card{height:183px}.tile-info{padding:8px}.tile-info strong{font-size:15px}.tile-info small{font-size:11px}}
/* High-level page starts: approachable technical content instead of generic word walls. */
.detail-section,.editorial-rich,.r20-tech-band,.r21-editorial,.knowledge{margin-top:25px}.section-head h2{font-size:clamp(26px,2.7vw,38px);max-width:1140px;line-height:1.14;margin-bottom:8px}.section-head p{max-width:900px;color:#bad9e8}.knowledge-grid{gap:12px}.knowledge-item{border-radius:10px;padding:20px;background:linear-gradient(135deg,#092d42,#062438);border-color:#25718b}.knowledge-item h3{font-size:clamp(17px,1.2vw,21px);margin-top:4px}.knowledge-item p{font-size:14px;max-width:75ch;line-height:1.65}
.r22-home .r19-ev-feature{margin-top:25px}.r22-home .hero h1{font-size:clamp(36px,3.5vw,61px);max-width:850px}
.r22-home-shortcuts{display:flex;flex-wrap:wrap;gap:7px;margin:20px 0 18px;max-width:720px}
.r22-home-shortcuts a{display:inline-flex;align-items:center;gap:8px;padding:9px 13px;color:#effaff;background:#06283bde;border:1px solid #2c859f;border-radius:8px;font-size:13px;font-weight:800;box-shadow:0 3px 10px #0003}
.r22-home-shortcuts a:hover{border-color:#49eaff;background:#0b4560}.r22-short-icon{color:#2be9f0;font-size:19px}
.r22-home .home-panels{margin-top:12px;gap:10px}.r22-home .home-panel{border:1px solid #2a93ab;box-shadow:0 9px 20px #00172566}.r22-home .home-panel>img{filter:saturate(1.06)}
.r22-home .home-panel>span{background:linear-gradient(0deg,rgba(2,15,26,.95),transparent);padding:12px 9px}
.r22-home .home-panel strong{font-size:clamp(19px,1.55vw,27px);letter-spacing:-.4px}
.r22-home .home-panel em{line-height:1.35;color:#d5ecf6}
.r22-home .r21-service-map{margin-top:22px}.r22-home .r21-map-photo{height:165px}
.r22-home .r21-map-links{display:grid;grid-template-columns:1fr 1fr;gap:2px 8px}.r22-home .r21-map-link{font-size:12px}
.r22-home .r19-ev-feature{border:1px solid #145c78}
/* Cameras visual premium module */
.r22-cameras .r22-camera-hero{border-color:#218fa9}
.r22-cameras .r22-camera-hero .hero-media img{object-position:58% center}
.r22-cameras .r22-camera-hero .hero-shade{background:linear-gradient(90deg,#021524 0%,#031a2bf7 23%,#042134e2 43%,#041b2b12 85%)}
.r22-cameras .r22-camera-hero h1{font-size:clamp(36px,3.4vw,61px)}
.r22-camera-card img[src$='.webp']{object-position:center 38%}
.r22-camera-story{border:1px solid #1e7993;border-radius:13px;margin-top:18px;padding:24px 25px;background:linear-gradient(112deg,#082c43,#041c2d);box-shadow:0 13px 34px #0003}
.r22-story-head{margin-bottom:18px}.r22-story-head h2{font-size:clamp(27px,2.8vw,43px);margin:6px 0 10px;line-height:1.12;letter-spacing:-.8px}.r22-story-head p{margin:0;color:#c5e1ea;max-width:1050px;font-size:15px}
.r22-story-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.r22-story-photo{position:relative;overflow:hidden;isolation:isolate;border-radius:10px;min-height:265px;border:1px solid #2a96a9;background:#123347}
.r22-story-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.r22-story-photo:before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(1,18,29,.98) 0,rgba(1,17,29,.71) 28%,transparent 72%)}
.r22-story-photo>div{position:absolute;z-index:2;left:17px;right:15px;bottom:18px;display:grid;gap:7px}.r22-story-photo b{font-size:19px;color:#fff}.r22-story-photo span{font-size:13px;color:#d9ecf6;line-height:1.35}
.r22-camera-workflow{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:9px;margin-top:18px;padding:14px;background:#041c2b;border:1px solid #1f5c78;border-radius:9px}.r22-camera-workflow span{font-weight:800;color:#e7f8fc;font-size:13px}.r22-camera-workflow b{color:#16dff0;font-size:18px}
.r22-deep-dive{border:1px solid #226d85;border-radius:10px;background:#082b41;margin-block:14px;padding:0 14px;overflow:hidden}.r22-deep-dive>summary{cursor:pointer;color:#e4f7fc;font-size:15px;font-weight:850;padding:18px 8px;list-style:none}.r22-deep-dive>summary:after{content:'＋';float:right;color:#1eeced}.r22-deep-dive[open]>summary:after{content:'−'}.r22-deep-dive>section{width:100%;margin:0;border:0;border-top:1px solid #2c7085;border-radius:0;padding:17px 0;background:transparent}
.r22-deep-dive .section-head h2{font-size:clamp(22px,2vw,30px)}
/* Page-specific photo and explanatory panels */
.r22-compact-intro,.r22-photo-feature{display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:22px;border:1px solid #21748f;background:linear-gradient(105deg,#06283b,#0b4058);border-radius:12px;padding:23px 24px;margin-top:22px}
.r22-compact-intro h2,.r22-photo-feature h2{font-size:clamp(24px,2.35vw,36px);line-height:1.14;margin:7px 0 10px}.r22-compact-intro p,.r22-photo-feature p{color:#d0e7f2;line-height:1.54;font-size:14px;max-width:700px}.r22-mini-steps{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.r22-mini-steps span{background:#05263c;border:1px solid #2a7490;border-radius:8px;padding:13px;color:#e2f6fc;font-size:13px;font-weight:800}.r22-mini-steps b{color:#16e5f2;display:inline-block;margin-right:7px}
.r22-photo-feature{grid-template-columns:1fr 1fr}.r22-photo-feature>img{width:100%;height:280px;object-fit:cover;border-radius:9px;border:1px solid #408da3}.r22-inline-links{display:flex;gap:9px;flex-wrap:wrap;margin:16px 0}.r22-inline-links a{border:1px solid #47adbf;background:#07283b;border-radius:7px;color:#a8f1fa;padding:8px 10px;font-size:12px;font-weight:800}
.r22-brand-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}.r22-brand-row span{display:inline-flex;align-items:center;justify-content:center;padding:5px 12px;border:1px solid #3e8799;border-radius:6px;background:#062337;letter-spacing:.2px;font-weight:900;color:#eafaff;font-style:italic;font-size:13px}.r22-brand-row span:first-child{font-size:16px;color:#fff}
.r22-references .hero-media img{object-position:57% 43%}.r22-references .work-gallery{grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}.r22-references .work-tile{border-radius:11px;overflow:hidden;border:1px solid #3787a0;background:#082b3b}.r22-references .work-tile img{height:235px;width:100%;object-fit:cover}.r22-references .work-tile figcaption{font-size:13px;font-weight:750;min-height:48px;color:#e4f6fb;padding:9px 12px}
.r22-vrf .hero-media img{object-position:55% 45%}
/* Trustworthiness: avoid gratuitous promises or oversized headings */
.r22-cameras .detail-section .section-head h2,.r22-clima .detail-section .section-head h2{font-size:clamp(24px,2.5vw,35px)}
@media(max-width:1000px){.r22-story-grid{grid-template-columns:1fr 1fr}.r22-story-photo:last-child{grid-column:1/-1}.r22-references .work-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){.shell,.header-inner{width:calc(100% - 20px)}.service-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.service-card{height:175px}.r22-photo-feature,.r22-compact-intro{grid-template-columns:1fr}.r22-story-photo{min-height:210px}}
@media(max-width:520px){
 .shell,.header-inner{width:calc(100% - 12px)}
 .r22-home .r22-home-hero{display:block;position:relative;min-height:0;background:#041929;isolation:isolate}
 .r22-home .r22-home-hero .hero-media{position:absolute;inset:0;width:100%;height:100%;order:unset;opacity:.24;pointer-events:none;z-index:-1;margin:0}
 .r22-home .r22-home-hero .hero-image{height:100%;width:100%;object-fit:cover;object-position:63% center}
 .r22-home .r22-home-hero .hero-shade{background:linear-gradient(90deg,#041624cc,#041624ca)}
 .r22-home .r22-home-hero .hero-copy{padding:17px 15px 16px;width:100%}
 .r22-home .r22-home-hero .hero-copy .eyebrow{font-size:9px;letter-spacing:.85px}
 .r22-home .r22-home-hero h1{font-size:clamp(26px,7.05vw,33px);line-height:1.08;letter-spacing:-.75px;margin:7px 0 9px;max-width:360px}
 .r22-home .r22-home-hero .hero-lead{font-size:12.4px;line-height:1.42;margin:0 0 11px}
 .r22-home-shortcuts{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:10px 0 12px}
 .r22-home-shortcuts a{padding:9px 7px;font-size:11.2px;gap:6px;min-height:43px}
 .r22-home-shortcuts .r22-short-icon{font-size:18px}
 .r22-home .r22-home-hero .hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}
 .r22-home .r22-home-hero .hero-actions .btn{font-size:11px;min-height:40px;padding:8px 9px}
 .r22-home .home-panels{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:7px}
 .r22-home .home-panel{height:137px;border-radius:8px}.r22-home .home-panel strong{font-size:15px;line-height:1.13}.r22-home .home-panel em{font-size:9px;line-height:1.2}
 .r22-home .r21-map-links{grid-template-columns:1fr 1fr}.r22-home .r21-map-photo{height:155px}
 .service-grid{grid-template-columns:1fr;gap:7px}.service-card{height:99px;min-height:99px;aspect-ratio:auto;display:grid;grid-template-columns:120px minmax(0,1fr)}
 .service-card .tile-img{position:relative;width:120px;height:99px;object-fit:cover}
 .service-card .tile-shade{background:linear-gradient(90deg,transparent,#06293b 47%,#06283e 100%)}
 .service-card .tile-info{position:relative;max-height:none;padding:9px 8px;align-self:center}
 .service-card .tile-info strong{font-size:13px;line-height:1.15}.service-card .tile-info small{font-size:10.5px;line-height:1.24}
 .r22-story-grid{grid-template-columns:1fr;gap:8px}.r22-story-photo{min-height:190px}.r22-story-photo:last-child{grid-column:auto}.r22-story-head h2{font-size:24px}.r22-story-head p{font-size:12.5px}.r22-camera-story{padding:15px 12px}.r22-story-photo b{font-size:16px}.r22-story-photo span{font-size:11.5px}
 .r22-camera-workflow{gap:6px;padding:9px}.r22-camera-workflow span{font-size:10px}.r22-camera-workflow b{font-size:12px}
 .r22-deep-dive>summary{font-size:12px}.r22-deep-dive{padding:0 8px}
 .r22-compact-intro,.r22-photo-feature{padding:15px;gap:11px}.r22-photo-feature>img{height:160px}.r22-compact-intro h2,.r22-photo-feature h2{font-size:24px}.r22-mini-steps span{font-size:10.5px;padding:10px}
 .r22-references .work-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.r22-references .work-tile img{height:140px}.r22-references .work-tile figcaption{font-size:10px;min-height:0}
 .r22-cameras .r22-camera-hero h1{font-size:clamp(26px,7.3vw,36px)}
 .r22-cameras .r22-camera-hero .hero-copy{padding:15px 14px 0}
}
@media(max-width:360px){.r22-home-shortcuts a{font-size:10px;padding:7px 4px}.r22-home .r22-home-hero h1{font-size:25px}.r22-home .home-panel strong{font-size:14px}}
/* R22 final: the historical EV feature is never wider than the mobile viewport. */
@media(max-width:520px){.r19-ev-feature,.r19-ev-photo,.r19-ev-copy{width:100%;max-width:100%;min-width:0}.r19-ev-photo{height:175px;min-height:0}.r19-ev-feature{overflow:hidden}}
/* Critical regression fix: R22 desktop .hero-copy sizing must never override the mobile full-width column. */
@media(max-width:820px){.hero .hero-copy{width:100%;max-width:100%;flex:none}.hero .hero-copy h1,.hero .hero-copy p{max-width:100%}.hero .hero-lead{max-width:100%}}
@media(max-width:520px){.hero .hero-copy{padding:16px 14px 0}.hero .hero-copy h1{font-size:clamp(27px,7.4vw,36px);line-height:1.08}.hero .hero-copy .eyebrow{font-size:9px;letter-spacing:.7px}}
.r22-directory{margin-top:25px;margin-bottom:27px;padding:23px;border:1px solid #247d9a;border-radius:13px;background:linear-gradient(110deg,#07293f,#041b2e)}
.r22-directory-header h2{font-size:clamp(24px,2.55vw,36px);margin:6px 0 8px;line-height:1.17}
.r22-directory-header p{font-size:14px;color:#c6e1eb;margin:0 0 18px}
.r22-directory-group{border:1px solid #276f8a;background:#082d43;border-radius:9px;margin:8px 0;overflow:hidden}
.r22-directory-group summary{cursor:pointer;padding:13px 17px;font-size:16px;font-weight:850;color:#e8f9fd;list-style:none}
.r22-directory-group summary::after{content:'＋';float:right;color:#36e3ef}
.r22-directory-group[open] summary::after{content:'−'}
.r22-directory-links{border-top:1px solid #245e78;padding:10px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.r22-directory-links a{display:flex;align-items:center;padding:9px 11px;border-radius:6px;background:#061f31;border:1px solid #1b5b73;color:#d6edf7;font-size:12px;line-height:1.28;min-height:42px;font-weight:720}
.r22-directory-links a:hover{border-color:#21dfeb;background:#0b425a}
.r22-home-shortcuts a.r22-all-services{border-style:dashed;border-color:#43c4d4}
@media(max-width:820px){.r22-directory-links{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.r22-directory{padding:13px}.r22-directory-links{grid-template-columns:1fr;gap:5px}.r22-directory-links a{min-height:37px;font-size:11px}.r22-directory-group summary{font-size:13px}.r22-home-shortcuts a.r22-all-services{grid-column:1/-1;justify-content:center;min-height:36px}}