/* AD Solutions new category - ALL styles scoped to .cs-page only.
   Existing homepage, header, footer and shared CSS unaffected. */
.cs-page{--navy:#22233f;--navy2:#171930;--red:#db2038;--muted:#626675;--bg:#f8f9fb;--line:#e7e8ed;--width:1370px;color:var(--navy);background:#fff;line-height:1.6}
.cs-page *{box-sizing:border-box}
.cs-page [hidden]{display:none!important}
.cs-page .skip-main{position:absolute;left:-9999px}
.cs-page img{max-width:100%;display:block}
.cs-page a{color:inherit;text-decoration:none}
.cs-page button{font:inherit}
.cs-page button,
.cs-page a{touch-action:manipulation}
.cs-page button:focus-visible,
.cs-page a:focus-visible,
.cs-page summary:focus-visible{outline:3px solid #f66;outline-offset:3px}
.cs-page .wrap{width:min(var(--width),calc(100% - 64px));margin-inline:auto}
.cs-page .eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.13em;font-weight:830;color:#ef7184}
.cs-page .eyebrow.dark{color:var(--red)}
.cs-page h1,
.cs-page h2,
.cs-page h3,
.cs-page p{margin-top:0}
.cs-page h1{font-size:clamp(38px,3.45vw,56px);line-height:1.14;letter-spacing:-.042em;font-weight:720}
.cs-page h2{font-size:clamp(29px,2.45vw,43px);line-height:1.22;letter-spacing:-.036em;font-weight:720}
.cs-page h3{font-size:22px;line-height:1.3;letter-spacing:-.018em}
.cs-page p{color:#4b5061}
.cs-page .lead{font-size:clamp(16px,1.15vw,19px);line-height:1.75}
.cs-page .hero{padding:32px 0 20px}
.cs-page .hero-frame{display:grid;grid-template-columns:42% 58%;background:var(--navy);min-height:545px;overflow:hidden}
.cs-page .hero-content{position:relative;z-index:2;padding:clamp(30px,4.8vw,84px) clamp(28px,4.5vw,82px);display:flex;flex-direction:column;justify-content:center;color:#fff}
.cs-page .hero-content:after{content:"";position:absolute;left:100%;top:0;width:72px;height:100%;background:var(--navy);clip-path:polygon(0 0,0 100%,100% 50%);pointer-events:none}
.cs-page .hero h1{margin:20px 0 25px;color:#fff}
.cs-page .hero .lead{color:#fff;margin-bottom:24px;max-width:580px}
.cs-page .hero .microcopy{font-size:13px;color:#e3e5f1;margin:17px 0 0}
.cs-page .hero-photo{height:100%;min-height:545px;overflow:hidden;position:relative}
.cs-page .hero-photo img{width:100%;height:100%;object-fit:cover}
.cs-page .hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(24,25,46,.12),transparent 60%)}
.cs-page .image-credit{position:absolute;bottom:14px;right:20px;background:rgba(28,30,50,.72);color:white;font-size:10px;border-radius:3px;padding:4px 8px;letter-spacing:.03em;z-index:3}
.cs-page .btnrow{display:flex;flex-wrap:wrap;gap:12px}
.cs-page .btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;padding:15px 21px;font-size:13px;letter-spacing:.01em;font-weight:800;border-radius:3px;line-height:1.2;min-height:50px;transition:transform .2s,background .2s,box-shadow .2s}
.cs-page .btn:hover{transform:translateY(-2px);box-shadow:0 9px 24px #12142c28}
.cs-page .btn-red{background:var(--red);color:white}
.cs-page .btn-white{background:white;color:var(--navy)}
.cs-page .btn-outline{border:1px solid #fff;color:#fff}
.cs-page .btn-ink{background:var(--navy);color:white}
.cs-page .btn-soft{background:#f4f4f8;color:var(--navy)}
.cs-page .underhero{display:flex;justify-content:space-between;gap:18px;padding:19px 0 8px;align-items:center}
.cs-page .trust-inline{display:flex;gap:28px;flex-wrap:wrap;font-size:12px;color:#6d707c;font-weight:700}
.cs-page .trust-inline span:before{content:"✓";display:inline-grid;place-items:center;color:var(--red);font-weight:900;margin-right:8px}
.cs-page .crumb{font-size:12px;color:#828591}
.cs-page .crumb a:hover{text-decoration:underline}
.cs-page .section{padding:92px 0}
.cs-page .section.tight{padding:60px 0}
.cs-page .section.pale{background:var(--bg)}
.cs-page .section-heading{max-width:770px;margin-bottom:38px}
.cs-page .section-heading.center{margin-inline:auto;text-align:center}
.cs-page .section-heading .eyebrow{display:block;margin-bottom:12px}
.cs-page .section-heading p{font-size:17px;line-height:1.75}
.cs-page .cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.cs-page .card{background:#fff;border:1px solid var(--line);overflow:hidden;box-shadow:0 8px 30px rgba(26,32,60,.03)}
.cs-page .card-img{width:100%;height:260px;object-fit:cover}
.cs-page .card-img.tall{height:290px}
.cs-page .card-body{padding:29px}
.cs-page .card-body h3{margin-bottom:11px}
.cs-page .card-body p{font-size:14px;line-height:1.8}
.cs-page .kicker{font-size:11px;color:var(--red);font-weight:900;letter-spacing:.11em;text-transform:uppercase;margin-bottom:10px}
.cs-page .arrowlink{display:inline-flex;gap:10px;align-items:center;font-size:13px;font-weight:850;color:var(--red);margin-top:12px}
.cs-page .arrowlink:hover{text-decoration:underline}
.cs-page .featurebar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:1px solid var(--line);background:#fff}
.cs-page .featurebar>div{padding:24px 23px;border-right:1px solid var(--line)}
.cs-page .featurebar>div:last-child{border-right:0}
.cs-page .featurebar b{display:block;font-size:14px;margin-bottom:6px}
.cs-page .featurebar p{font-size:12px;margin-bottom:0;line-height:1.6}
.cs-page .featurebar .featureicon{font-size:24px;margin-bottom:9px;color:var(--red)}
.cs-page .split{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(30px,5vw,75px)}
.cs-page .split.reverse .split-media{order:-1}
.cs-page .split-media{position:relative;min-height:410px}
.cs-page .split-media img{width:100%;height:510px;object-fit:cover}
.cs-page .split-body h2{margin:15px 0 22px}
.cs-page .split-body p{line-height:1.85}
.cs-page .bullets{margin:20px 0 28px;padding:0;list-style:none}
.cs-page .bullets li{position:relative;padding:7px 0 7px 27px;color:#4d5261;font-size:15px}
.cs-page .bullets li:before{position:absolute;content:"✓";left:0;color:var(--red);font-weight:900}
.cs-page .sectionline{border-bottom:1px solid var(--line)}
.cs-page .tab-controls{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:26px}
.cs-page .tab-controls button{border:1px solid #e1e3e9;background:white;padding:12px 18px;font-size:13px;font-weight:790;border-radius:4px;cursor:pointer;color:var(--navy)}
.cs-page .tab-controls button[aria-selected=true]{border-color:var(--navy);color:white;background:var(--navy)}
.cs-page .tab-panel{display:none}
.cs-page .tab-panel.active{display:grid;grid-template-columns:49% 1fr;gap:0;min-height:440px;background:var(--navy)}
.cs-page .tab-panel img{width:100%;height:440px;object-fit:cover}
.cs-page .tab-copy{color:#fff;padding:55px 50px;display:flex;flex-direction:column;justify-content:center}
.cs-page .tab-copy h3{font-size:30px;max-width:460px}
.cs-page .tab-copy p{color:#dde0ec;max-width:480px;line-height:1.8}
.cs-page .tab-copy .arrowlink{color:#ff92a2}
.cs-page .productgrid{display:grid;grid-template-columns:1fr 1fr;gap:23px}
.cs-page .productgrid .card-img{height:350px}
.cs-page .productgrid .card-body{padding:34px}
.cs-page .gallery{display:grid;grid-template-columns:1.32fr 1fr 1fr;grid-template-rows:250px 250px;gap:13px}
.cs-page .gallery figure{margin:0;overflow:hidden;position:relative;cursor:zoom-in}
.cs-page .gallery figure:first-child{grid-row:span 2}
.cs-page .gallery img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.cs-page .gallery figure:hover img{transform:scale(1.045)}
.cs-page .gallery figure figcaption{background:linear-gradient(0deg,#11172e9e,transparent);color:white;font-size:12px;font-weight:600;position:absolute;bottom:0;left:0;right:0;padding:31px 15px 13px}
.cs-page .banner{display:flex;align-items:center;justify-content:space-between;gap:32px;background:var(--navy);padding:57px 65px;color:#fff}
.cs-page .banner h2{color:white;max-width:780px;margin:9px 0 12px}
.cs-page .banner p{color:#dde0ec;max-width:750px;margin-bottom:0}
.cs-page .banner .btn{white-space:nowrap}
.cs-page .faq-list{display:grid;gap:11px;max-width:950px;margin:auto}
.cs-page .faq-list details{border:1px solid var(--line);background:#fff}
.cs-page .faq-list summary{padding:19px 25px;cursor:pointer;font-weight:750;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px}
.cs-page .faq-list summary:after{content:"+";font-size:24px;font-weight:400;color:var(--red)}
.cs-page .faq-list details[open] summary:after{content:"−"}
.cs-page .faq-list details p{padding:0 25px 18px;max-width:850px;font-size:14px;line-height:1.8;margin:0}
.cs-page .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cs-page .step{padding:30px;background:#fff;border:1px solid var(--line)}
.cs-page .step .num{color:var(--red);font-size:12px;font-weight:900}
.cs-page .step h3{margin:11px 0}
.cs-page .step p{font-size:14px;line-height:1.7;margin:0}
.cs-page .disclaimer{font-size:12px;color:#858891;line-height:1.7;margin-top:20px}
.cs-page .statbig{font-size:49px;font-weight:730;line-height:1.1;letter-spacing:-.05em;color:var(--red)}
.cs-page .subtle-label{display:block;color:#8b8b9c;font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:800;margin-top:12px}
.cs-page .pill{border:1px solid #e2e4ea;display:inline-block;padding:7px 11px;font-size:11px;border-radius:99px;font-weight:750;letter-spacing:.02em;color:#54586a;background:white}
.cs-page .path-hint{font-size:13px;padding:14px 22px;border-left:3px solid var(--red);background:#f7f7fa;margin:26px 0}
.cs-page .path-hint b{color:var(--navy)}
.cs-page dialog#cs-lightbox{border:0;padding:0;max-width:min(95vw,1100px);background:transparent;box-shadow:none}
.cs-page dialog#cs-lightbox::backdrop{background:#111423dd}
.cs-page dialog#cs-lightbox img{max-height:82vh;max-width:94vw;object-fit:contain}
.cs-page dialog#cs-lightbox button{position:absolute;right:7px;top:6px;background:#fff;border:0;border-radius:2px;padding:4px 13px;font-size:25px;cursor:pointer}
@media (max-width:1200px){
.cs-page .hero-content{padding:45px}
.cs-page .hero-frame{min-height:480px}
.cs-page .hero-photo{min-height:480px}
.cs-page .hero-content:after{width:38px}
}
@media (max-width:900px){
.cs-page .hero-frame{grid-template-columns:1fr}
.cs-page .hero-content:after{display:none}
.cs-page .hero-photo{min-height:360px;height:360px}
.cs-page .hero-frame{min-height:0}
.cs-page .hero-content{padding:50px 45px}
.cs-page .cards,
.cs-page .featurebar{grid-template-columns:repeat(2,minmax(0,1fr))}
.cs-page .featurebar>div{border-bottom:1px solid var(--line)}
.cs-page .split,
.cs-page .productgrid{grid-template-columns:1fr}
.cs-page .split.reverse .split-media{order:0}
.cs-page .split-media img{height:380px}
.cs-page .gallery{grid-template-columns:1fr 1fr;grid-template-rows:230px 230px}
.cs-page .gallery figure:first-child{grid-row:span 2}
.cs-page .gallery figure:nth-child(4){display:none}
.cs-page .tab-panel.active{grid-template-columns:1fr}
.cs-page .tab-panel img{height:330px}
.cs-page .tab-copy{padding:35px}
.cs-page .steps{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
.cs-page .wrap{width:calc(100% - 32px)}
.cs-page .hero{padding-top:16px}
.cs-page .hero-content{padding:37px 27px 34px}
.cs-page .hero h1{font-size:39px}
.cs-page .hero .lead{font-size:16px}
.cs-page .hero-photo{height:260px;min-height:260px}
.cs-page .hero .microcopy{font-size:11px}
.cs-page .btn{width:100%}
.cs-page .underhero{display:block}
.cs-page .trust-inline{gap:10px 18px;padding-top:13px}
.cs-page .section{padding:58px 0}
.cs-page .section.tight{padding:42px 0}
.cs-page .section-heading{margin-bottom:24px}
.cs-page .section-heading p{font-size:15px}
.cs-page .cards,
.cs-page .featurebar,
.cs-page .steps,
.cs-page .productgrid{grid-template-columns:1fr}
.cs-page .featurebar>div{border-right:0}
.cs-page .card-img,
.cs-page .card-img.tall{height:220px}
.cs-page .productgrid .card-img{height:250px}
.cs-page .card-body,
.cs-page .productgrid .card-body{padding:25px}
.cs-page .tab-controls button{flex:1 1 100%}
.cs-page .tab-panel img{height:260px}
.cs-page .tab-copy{padding:28px}
.cs-page .tab-copy h3{font-size:25px}
.cs-page .split-media{min-height:0}
.cs-page .split-media img{height:260px}
.cs-page .gallery{display:flex;overflow:auto;gap:10px;scroll-snap-type:x mandatory}
.cs-page .gallery figure,
.cs-page .gallery figure:first-child,
.cs-page .gallery figure:nth-child(4){display:block;min-width:82%;height:270px;scroll-snap-align:center}
.cs-page .banner{padding:38px 26px;display:block}
.cs-page .banner .btn{margin-top:25px}
.cs-page .faq-list summary{padding:17px}
.cs-page .faq-list details p{padding:0 17px 17px}
}

/* On this website the existing shared header and footer are used. */
.cs-page .cs-local-service{background:#fff;border-top:1px solid var(--line)}
.cs-page .cs-local-service .cs-service-grid{display:grid;grid-template-columns:1fr 1fr;gap:45px;align-items:start}
.cs-page .cs-local-service p{line-height:1.85}
.cs-page .cs-area-list{margin:0;padding:0;display:flex;flex-wrap:wrap;gap:9px;list-style:none}
.cs-page .cs-area-list li{padding:7px 12px;border:1px solid var(--line);border-radius:3px;font-size:13px}
.cs-page .cs-area-list li:before{content:none}
.cs-page .cs-crumb a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.cs-page img{max-width:100%;display:block}
.cs-page a:focus-visible,.cs-page button:focus-visible,.cs-page summary:focus-visible{outline:3px solid #e8374a;outline-offset:3px}
@media(max-width:900px){.cs-page .cs-local-service .cs-service-grid{grid-template-columns:1fr}}
@media(max-width:600px){.cs-page .cs-local-service .cs-service-grid{gap:15px}}


/* AD Solutions v6: match the smaller, calmer typography used on existing product pages.
   This changes only the three carport / FIX product pages, never the shared homepage. */
@media (min-width: 601px) {
  .cs-page h1 {font-size:clamp(30px,2.45vw,40px);line-height:1.26;letter-spacing:-.022em;font-weight:650}
  .cs-page h2 {font-size:clamp(25px,2vw,34px);line-height:1.3;letter-spacing:-.018em;font-weight:650}
  .cs-page h3 {font-size:20px;line-height:1.4;letter-spacing:-.01em;font-weight:650}
  .cs-page .hero h1 {margin:16px 0 19px}
  .cs-page .hero-frame {min-height:480px}
  .cs-page .hero-photo {min-height:480px}
  .cs-page .hero-content {padding:48px clamp(30px,3.5vw,64px)}
  .cs-page .tab-copy h3 {font-size:clamp(21px,1.8vw,26px)}
}
.cs-page .lead {font-size:clamp(15px,1.05vw,18px);line-height:1.65}
.cs-page .section-heading p {font-size:16px;line-height:1.75}
.cs-page .split-body p,.cs-page .tab-copy p {font-size:15px;line-height:1.8}
.cs-page .btn {font-size:12.5px;font-weight:750}
.cs-page .eyebrow {font-size:11px;letter-spacing:.11em}
.cs-page .section {padding-block:76px}
@media (max-width:900px) {
  .cs-page .hero-content {padding:43px 35px}
  .cs-page .hero-frame {min-height:0}
  .cs-page .hero-photo {min-height:340px}
  .cs-page .section {padding-block:60px}
}
@media (max-width:600px) {
  .cs-page h1,.cs-page .hero h1 {font-size:clamp(29px,7vw,35px);line-height:1.22;letter-spacing:-.02em}
  .cs-page h2 {font-size:clamp(24px,6vw,30px);line-height:1.28}
  .cs-page h3 {font-size:19px}
  .cs-page .hero-content {padding:34px 25px 32px}
  .cs-page .hero-photo {min-height:260px}
  .cs-page .section {padding-block:54px}
  .cs-page .tab-copy h3 {font-size:23px}
  .cs-page .section-heading p {font-size:15px}
}