.cs-showcase{--cs-blue:#0876e8;--cs-navy:#07306b;--cs-green:#12b76a;--cs-purple:#8b42f4;--cs-orange:#ff8500;--cs-pink:#ff3f9b;--cs-cyan:#12aee5;background:#f7fbff;color:#0b2b5b;font-family:Arial,Helvetica,sans-serif;overflow:hidden}
.cs-showcase *{box-sizing:border-box}.cs-showcase .cs-wrap{width:min(1180px,94%);margin:auto}.cs-showcase a{text-decoration:none}.cs-showcase img{max-width:100%;display:block}.cs-showcase .cs-kicker{display:inline-block;font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--cs-blue);background:#dff3ff;border-radius:999px;padding:5px 11px}.cs-showcase h1,.cs-showcase h2,.cs-showcase h3{margin:0;color:#082d66}.cs-showcase p{color:#4e6280}.cs-showcase .cs-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:10px 18px;border-radius:8px;color:#fff;font-weight:800;font-size:14px;box-shadow:0 7px 18px rgba(11,83,160,.14);transition:.2s}.cs-showcase .cs-btn:hover{transform:translateY(-2px)}
.cs-showcase .cs-hero{position:relative;background:linear-gradient(135deg,#edf9ff 0%,#fff 58%,#dcf5ff 100%);padding:22px 0 0;border-bottom:1px solid #d9eaf7}.cs-showcase .cs-hero:before,.cs-showcase .cs-hero:after{content:"";position:absolute;top:0;width:0;height:0;border-style:solid;opacity:.9}.cs-showcase .cs-hero:before{right:0;border-width:0 150px 85px 0;border-color:transparent #0eb5f4 transparent transparent}.cs-showcase .cs-hero:after{right:0;border-width:0 85px 48px 0;border-color:transparent #0876e8 transparent transparent}.cs-showcase .cs-hero-head{display:grid;grid-template-columns:150px 1fr;gap:28px;align-items:center;text-align:center;position:relative;z-index:1}.cs-showcase .cs-hero-brand{display:flex;flex-direction:column;align-items:center}.cs-showcase .cs-hero-brand img{width:86px;height:86px;object-fit:contain}.cs-showcase .cs-hero-brand strong{font-size:16px;margin-top:4px;color:#082d66}.cs-showcase .cs-hero-brand small{font-size:9px;font-weight:700;color:#123b75}.cs-showcase .cs-hero-copy h1{font-size:clamp(38px,5vw,66px);line-height:.92;font-weight:900;letter-spacing:-2px}.cs-showcase .cs-hero-copy h1 span{display:block;font-size:.58em;color:#0876e8;letter-spacing:-1px;margin-top:4px}.cs-showcase .cs-tags{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:15px auto 8px}.cs-showcase .cs-tags span{background:#0a66bd;color:#fff;padding:7px 13px;border-radius:999px;font-weight:800;font-size:13px}.cs-showcase .cs-hero-media{margin-top:8px}.cs-showcase .cs-hero-media img{width:100%;height:auto;max-height:260px;object-fit:cover;object-position:center 55%;filter:saturate(1.04) contrast(1.02)}
.cs-showcase .cs-benefits{background:#fff;border-top:1px solid #e2edf8;border-bottom:1px solid #d7e8f5}.cs-showcase .cs-benefits-grid{display:grid;grid-template-columns:repeat(4,1fr)}.cs-showcase .cs-benefit{display:flex;gap:13px;align-items:center;justify-content:center;padding:20px 14px;border-right:1px solid #c9d9ea}.cs-showcase .cs-benefit:last-child{border-right:0}.cs-showcase .cs-benefit-icon{width:48px;height:48px;border-radius:14px;background:#eaf5ff;color:#0b73d8;display:grid;place-items:center;font-size:26px}.cs-showcase .cs-benefit strong{display:block;font-size:17px;line-height:1.05}.cs-showcase .cs-benefit span{font-size:12px;color:#59708d}
.cs-showcase .cs-section{padding:38px 0}.cs-showcase .cs-section-head{text-align:center;max-width:850px;margin:0 auto 26px}.cs-showcase .cs-section-head h2{font-size:clamp(27px,3.3vw,42px);font-weight:900;letter-spacing:-1.2px;margin:7px 0 5px}.cs-showcase .cs-section-head p{margin:0;line-height:1.55;font-size:14px}
.cs-showcase .cs-need-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.cs-showcase .cs-need-card{background:#fff;border:1px solid #d8e7f5;border-radius:15px;box-shadow:0 8px 22px rgba(6,59,112,.08);overflow:hidden;display:flex;flex-direction:column}.cs-showcase .cs-need-card .photo{height:155px;width:100%;object-fit:cover}.cs-showcase .cs-need-body{padding:16px 16px 14px;display:flex;flex:1;flex-direction:column}.cs-showcase .cs-need-title{display:flex;align-items:center;gap:10px;margin-bottom:8px}.cs-showcase .cs-icon-round{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:19px;font-weight:900;background:#e9f5ff;color:#0876e8}.cs-showcase .green .cs-icon-round{background:#e6fbf1;color:#0fb66a}.cs-showcase .purple .cs-icon-round{background:#f0e8ff;color:#8b42f4}.cs-showcase .orange .cs-icon-round{background:#fff2e2;color:#ff8500}.cs-showcase .cs-need-card h3{font-size:18px}.cs-showcase .cs-checks{list-style:none;padding:0;margin:0 0 15px}.cs-showcase .cs-checks li{font-size:12px;color:#4d6079;margin:7px 0;padding-left:18px;position:relative}.cs-showcase .cs-checks li:before{content:"✓";position:absolute;left:0;font-weight:900;color:#0b8bf0}.cs-showcase .green .cs-checks li:before{color:#13b76b}.cs-showcase .purple .cs-checks li:before{color:#8b42f4}.cs-showcase .orange .cs-checks li:before{color:#ff8500}.cs-showcase .cs-need-card .cs-btn{margin-top:auto;background:#0d8af0}.cs-showcase .green .cs-btn{background:#10b76b}.cs-showcase .purple .cs-btn{background:#8b42f4}.cs-showcase .orange .cs-btn{background:#ff8500}
.cs-showcase .cs-custom{padding:0 0 24px}.cs-showcase .cs-custom-grid{display:grid;grid-template-columns:1.05fr 1.25fr;gap:0;background:#fff;box-shadow:0 10px 26px rgba(5,69,127,.08);border-top:1px solid #dbe9f7;border-bottom:1px solid #dbe9f7}.cs-showcase .cs-custom-photo{min-height:310px;width:100%;height:100%;object-fit:cover}.cs-showcase .cs-custom-copy{padding:24px 34px}.cs-showcase .cs-custom-copy h2{font-size:clamp(28px,3vw,40px);font-weight:900;margin:7px 0 5px}.cs-showcase .cs-custom-copy>p{font-size:14px;line-height:1.45;margin:0 0 16px}.cs-showcase .cs-specs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.cs-showcase .cs-spec{border:2px solid #d5e6f6;border-radius:10px;padding:14px 8px;text-align:center;min-height:115px}.cs-showcase .cs-spec:nth-child(1){border-color:#1aa6ef}.cs-showcase .cs-spec:nth-child(2){border-color:#18bf88}.cs-showcase .cs-spec:nth-child(3){border-color:#a365ff}.cs-showcase .cs-spec:nth-child(4){border-color:#ffb140}.cs-showcase .cs-spec b{display:block;font-size:14px;margin-bottom:6px}.cs-showcase .cs-spec small{font-size:10px;color:#60718a;line-height:1.3}.cs-showcase .cs-spec i{font-style:normal;font-size:24px;display:block;margin-bottom:6px}.cs-showcase .cs-custom-copy .cs-btn{margin-top:12px;background:#0b73d8}
.cs-showcase .cs-products{background:linear-gradient(#e9f8ff,#f9fdff)}.cs-showcase .cs-product-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.cs-showcase .cs-product{background:#fff;border-radius:13px;border:1px solid #dceaf5;padding:10px;box-shadow:0 6px 16px rgba(15,69,116,.06);display:flex;flex-direction:column}.cs-showcase .cs-product img{width:100%;height:96px;object-fit:contain;border-radius:9px;background:#fff}.cs-showcase .cs-product h3{font-size:14px;line-height:1.08;margin:10px 0 5px;min-height:31px}.cs-showcase .cs-product ul{list-style:none;padding:0;margin:0 0 10px;flex:1}.cs-showcase .cs-product li{font-size:10px;line-height:1.35;color:#566a84;margin:4px 0;padding-left:13px;position:relative}.cs-showcase .cs-product li:before{content:"✓";position:absolute;left:0;color:#0a8cf0;font-weight:900}.cs-showcase .cs-product .cs-btn{font-size:11px;padding:8px 5px;min-height:34px;background:#0d8af0}.cs-showcase .cs-product:nth-child(2) .cs-btn{background:#10b76b}.cs-showcase .cs-product:nth-child(3) .cs-btn{background:#8b42f4}.cs-showcase .cs-product:nth-child(4) .cs-btn{background:#ff8500}.cs-showcase .cs-product:nth-child(5) .cs-btn{background:#13a9d8}.cs-showcase .cs-product:nth-child(6) .cs-btn{background:#ff3f9b}
.cs-showcase .cs-contact-row{display:grid;grid-template-columns:1.08fr .92fr;background:#fff}.cs-showcase .cs-store-gallery img{width:100%;height:165px;object-fit:cover}.cs-showcase .cs-quote{padding:22px 34px;display:flex;flex-direction:column;justify-content:center}.cs-showcase .cs-quote h2{font-size:28px;font-weight:900;margin:6px 0}.cs-showcase .cs-quote p{font-size:13px;margin:0 0 12px;line-height:1.45}.cs-showcase .cs-quote-actions{display:flex;gap:14px}.cs-showcase .cs-quote-actions .wa{background:#10b76b}.cs-showcase .cs-quote-actions .call{background:#0b73d8}
.cs-showcase .cs-bottom{background:#fff;padding:16px 0 34px}.cs-showcase .cs-bottom-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:24px;align-items:stretch}.cs-showcase .cs-faq h2{font-size:27px;margin:4px 0}.cs-showcase .cs-faq>p{font-size:12px;margin:0 0 12px}.cs-showcase details{border:1px solid #bfd8ee;border-radius:8px;margin:8px 0;background:#fff}.cs-showcase summary{padding:11px 13px;cursor:pointer;font-size:12px;font-weight:800;color:#133d70;list-style:none;position:relative}.cs-showcase summary::-webkit-details-marker{display:none}.cs-showcase summary:after{content:"+";position:absolute;right:12px;color:#1187e4;font-size:20px;top:4px}.cs-showcase details[open] summary:after{content:"−"}.cs-showcase details p{margin:0;padding:0 13px 12px;font-size:12px;line-height:1.45}.cs-showcase .cs-visit{background:linear-gradient(135deg,#0c6fc7,#07306b);border-radius:14px;overflow:hidden;position:relative;min-height:220px;color:#fff;box-shadow:0 10px 22px rgba(4,42,91,.2)}.cs-showcase .cs-visit img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.28}.cs-showcase .cs-visit-content{position:relative;z-index:1;padding:24px}.cs-showcase .cs-visit h3{color:#fff;font-size:24px}.cs-showcase .cs-visit p{color:#d8edff;font-size:12px;margin:5px 0 12px}.cs-showcase .cs-visit .cs-btn{background:#fff;color:#096cc6;box-shadow:none}.cs-showcase .cs-mini-benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:18px}.cs-showcase .cs-mini-benefits span{font-size:10px;line-height:1.15;font-weight:800;color:#d9ecff;text-align:center}.cs-showcase .sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media(max-width:980px){.cs-showcase .cs-hero-head{grid-template-columns:100px 1fr;gap:10px}.cs-showcase .cs-hero-brand img{width:70px;height:70px}.cs-showcase .cs-benefits-grid{grid-template-columns:repeat(2,1fr)}.cs-showcase .cs-benefit:nth-child(2){border-right:0}.cs-showcase .cs-benefit:nth-child(-n+2){border-bottom:1px solid #d7e8f5}.cs-showcase .cs-need-grid{grid-template-columns:repeat(2,1fr)}.cs-showcase .cs-custom-grid{grid-template-columns:1fr}.cs-showcase .cs-custom-photo{max-height:360px}.cs-showcase .cs-product-grid{grid-template-columns:repeat(3,1fr)}.cs-showcase .cs-contact-row,.cs-showcase .cs-bottom-grid{grid-template-columns:1fr}}
@media(max-width:640px){.cs-showcase .cs-wrap{width:min(94%,520px)}.cs-showcase .cs-hero{padding-top:14px}.cs-showcase .cs-hero-head{grid-template-columns:1fr}.cs-showcase .cs-hero-brand{display:none}.cs-showcase .cs-hero-copy h1{font-size:38px}.cs-showcase .cs-tags span{font-size:10px;padding:6px 9px}.cs-showcase .cs-hero-media img{min-height:150px;object-fit:cover}.cs-showcase .cs-benefits-grid{grid-template-columns:1fr 1fr}.cs-showcase .cs-benefit{padding:14px 8px}.cs-showcase .cs-benefit strong{font-size:13px}.cs-showcase .cs-benefit span{display:none}.cs-showcase .cs-benefit-icon{width:38px;height:38px;font-size:20px}.cs-showcase .cs-section{padding:28px 0}.cs-showcase .cs-section-head h2{font-size:28px}.cs-showcase .cs-need-grid{grid-template-columns:1fr}.cs-showcase .cs-need-card .photo{height:180px}.cs-showcase .cs-custom-copy{padding:22px 18px}.cs-showcase .cs-specs{grid-template-columns:1fr 1fr}.cs-showcase .cs-product-grid{grid-template-columns:1fr 1fr}.cs-showcase .cs-product img{height:90px}.cs-showcase .cs-quote{padding:22px 18px}.cs-showcase .cs-quote-actions{flex-direction:column}.cs-showcase .cs-mini-benefits{grid-template-columns:1fr 1fr}.cs-showcase .cs-store-gallery img{height:140px}}

/* 2026-10-05 layout correction: keep the showcase sections inside the site width,
   prevent text/card clipping, and preserve the user's existing computer-sales.css. */
.cs-showcase .cs-custom{padding:18px 0 30px;background:#fff}
.cs-showcase .cs-custom-grid{width:100%;grid-template-columns:minmax(0,1.03fr) minmax(0,1fr);border:1px solid #dbe9f7;border-radius:18px;overflow:hidden;box-shadow:0 10px 26px rgba(5,69,127,.08)}
.cs-showcase .cs-custom-grid>*{min-width:0}
.cs-showcase .cs-custom-photo{min-height:340px;height:100%;object-fit:cover;object-position:center}
.cs-showcase .cs-custom-copy{min-width:0;padding:28px 28px 24px;overflow:visible}
.cs-showcase .cs-custom-copy h2{font-size:clamp(28px,2.7vw,38px);line-height:1.08;letter-spacing:-.8px;overflow-wrap:anywhere}
.cs-showcase .cs-custom-copy>p{max-width:100%}
.cs-showcase .cs-specs{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;width:100%}
.cs-showcase .cs-spec{min-width:0;padding:13px 6px;min-height:118px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.cs-showcase .cs-spec b{font-size:13px;white-space:normal}
.cs-showcase .cs-spec small{font-size:9.5px;overflow-wrap:anywhere}
.cs-showcase .cs-custom-copy .cs-btn{max-width:100%;white-space:normal;text-align:center}

.cs-showcase .cs-contact{padding:0 0 28px;background:#fff}
.cs-showcase .cs-contact-row{width:100%;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);border:1px solid #dbe9f7;border-radius:18px;overflow:hidden;box-shadow:0 10px 26px rgba(5,69,127,.07)}
.cs-showcase .cs-contact-row>*{min-width:0}
.cs-showcase .cs-store-gallery{min-height:210px}
.cs-showcase .cs-store-gallery img{height:100%;min-height:210px;object-fit:cover;object-position:center}
.cs-showcase .cs-quote{padding:26px 28px}
.cs-showcase .cs-quote h2{font-size:clamp(25px,2.4vw,33px);line-height:1.12}
.cs-showcase .cs-quote p{font-size:13px;line-height:1.55}
.cs-showcase .cs-quote-actions{flex-wrap:wrap}
.cs-showcase .cs-quote-actions .cs-btn{flex:0 1 auto;min-width:160px}

@media(max-width:1100px) and (min-width:821px){
  .cs-showcase .cs-custom-grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
  .cs-showcase .cs-custom-copy{padding:24px 22px 22px}
  .cs-showcase .cs-specs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cs-showcase .cs-contact-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media(max-width:820px){
  .cs-showcase .cs-custom{padding-top:10px}
  .cs-showcase .cs-custom-grid,.cs-showcase .cs-contact-row{grid-template-columns:1fr}
  .cs-showcase .cs-custom-photo{min-height:0;max-height:none;aspect-ratio:16/10}
  .cs-showcase .cs-contact-row{border-radius:14px}
  .cs-showcase .cs-store-gallery{min-height:0}
  .cs-showcase .cs-store-gallery img{min-height:0;height:auto;aspect-ratio:16/6;object-fit:cover}
}
@media(max-width:520px){
  .cs-showcase .cs-custom-copy,.cs-showcase .cs-quote{padding:20px 16px}
  .cs-showcase .cs-specs{grid-template-columns:1fr 1fr;gap:9px}
  .cs-showcase .cs-quote-actions .cs-btn{width:100%}
}

/* Product image SEO/WebP refresh - isolated transparent assets */
.cs-showcase .cs-product .cs-product-image{
  display:block;
  width:100%;
  height:118px;
  max-width:170px;
  margin:0 auto 4px;
  padding:4px;
  object-fit:contain;
  object-position:center center;
  background:transparent;
  border-radius:0;
}
@media(max-width:640px){
  .cs-showcase .cs-product .cs-product-image{height:110px;max-width:160px}
}


/* 2026-10-05 product-card image enhancement
   Bigger transparent product images + mouse hover / touch zoom.
   This file is separate from the user's original computer-sales.css. */
.cs-showcase .cs-products .cs-product{
  overflow:hidden;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.cs-showcase .cs-products .cs-product .cs-product-image{
  width:100%;
  height:145px;
  max-width:195px;
  margin:0 auto 2px;
  padding:0;
  object-fit:contain;
  object-position:center center;
  background:transparent;
  transform:scale(1.05);
  transform-origin:center center;
  transition:transform .28s ease,filter .28s ease;
  cursor:zoom-in;
  will-change:transform;
}
@media (hover:hover) and (pointer:fine){
  .cs-showcase .cs-products .cs-product:hover{
    transform:translateY(-4px);
    border-color:#b9d9f2;
    box-shadow:0 14px 30px rgba(15,69,116,.14);
  }
  .cs-showcase .cs-products .cs-product:hover .cs-product-image{
    transform:scale(1.18);
    filter:contrast(1.03) saturate(1.04);
  }
}
@media (hover:none){
  .cs-showcase .cs-products .cs-product:active .cs-product-image{
    transform:scale(1.12);
  }
}
@media(max-width:980px){
  .cs-showcase .cs-products .cs-product .cs-product-image{
    height:155px;
    max-width:210px;
  }
}
@media(max-width:640px){
  .cs-showcase .cs-products .cs-product .cs-product-image{
    height:140px;
    max-width:190px;
    transform:scale(1.04);
  }
}


/* 2026-10-05 Custom PC image sizing + compact clickable badge */
.cs-showcase .cs-custom-media{
  position:relative;
  min-width:0;
  overflow:hidden;
  background:#f5f9fd;
  display:flex;
  align-items:center;
  justify-content:center;
}
.cs-showcase .cs-custom-media .cs-custom-photo{
  display:block;
  width:100%;
  height:320px;
  min-height:0;
  object-fit:cover;
  object-position:center;
}
.cs-showcase .cs-custom-badge{
  position:absolute;
  left:18px;
  bottom:18px;
  display:flex;
  align-items:center;
  gap:10px;
  max-width:250px;
  padding:10px 16px 10px 11px;
  border-radius:18px;
  background:rgba(5,50,96,.90);
  color:#fff;
  text-decoration:none;
  box-shadow:0 8px 22px rgba(0,27,61,.24);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  transition:transform .2s ease,background .2s ease,box-shadow .2s ease;
}
.cs-showcase .cs-custom-badge-icon{
  flex:0 0 40px;
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#1a73b9;
  font-size:24px;
  line-height:1;
}
.cs-showcase .cs-custom-badge strong{
  display:block;
  font-size:18px;
  line-height:1.05;
  letter-spacing:-.2px;
}
.cs-showcase .cs-custom-badge small{
  display:block;
  margin-top:4px;
  font-size:12px;
  line-height:1.1;
  color:#eaf5ff;
}
@media (hover:hover) and (pointer:fine){
  .cs-showcase .cs-custom-badge:hover{
    transform:translateY(-3px);
    background:rgba(3,62,116,.96);
    box-shadow:0 12px 26px rgba(0,27,61,.3);
  }
}
@media(max-width:980px){
  .cs-showcase .cs-custom-media .cs-custom-photo{
    height:300px;
  }
}
@media(max-width:640px){
  .cs-showcase .cs-custom-media .cs-custom-photo{
    height:230px;
    object-position:center;
  }
  .cs-showcase .cs-custom-badge{
    left:12px;
    bottom:12px;
    max-width:210px;
    padding:8px 12px 8px 9px;
    border-radius:14px;
    gap:8px;
  }
  .cs-showcase .cs-custom-badge-icon{
    flex-basis:34px;
    width:34px;
    height:34px;
    font-size:20px;
  }
  .cs-showcase .cs-custom-badge strong{
    font-size:15px;
  }
  .cs-showcase .cs-custom-badge small{
    font-size:10px;
  }
}

/* 2026-10-05 FINAL DESKTOP WIDTH REDUCTION
   Keep the footer full width, but reduce and center everything above it
   to the narrower desktop width shown by the yellow guide lines. */
@media (min-width:1100px){

  /* All Computer Sales content above the footer */
  .cs-showcase .cs-wrap{
    width:calc(100% - 80px) !important;
    max-width:1240px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  /* Hero/banner follows the same centered width */
  .cs-showcase .cs-hero-media{
    position:static !important;
    left:auto !important;
    transform:none !important;
    width:100% !important;
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  /* Keep cards balanced after reducing overall width */
  .cs-showcase .cs-need-grid{
    gap:16px !important;
  }

  .cs-showcase .cs-product-grid{
    gap:12px !important;
  }
}

/* Slightly wider on medium desktop/tablet so it does not feel cramped */
@media (min-width:981px) and (max-width:1099px){
  .cs-showcase .cs-wrap{
    width:calc(100% - 40px) !important;
    max-width:1000px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}

/* Footer intentionally remains unchanged / full width. */


/* =========================================================
   FINAL COMPUTER SALES HERO
   The new hero image already contains the logo, title,
   categories and feature content. Show the full image only.
   ========================================================= */

/* Keep the HTML heading for SEO/accessibility, but do not
   display the old separate hero heading above the new banner. */
.cs-showcase .cs-hero-head{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  clip-path:inset(50%) !important;
  white-space:nowrap !important;
  border:0 !important;
}

/* Remove all old blue/cyan decorative corner shapes. */
.cs-showcase .cs-hero::before,
.cs-showcase .cs-hero::after,
.cs-showcase .cs-hero > .cs-wrap::before,
.cs-showcase .cs-hero > .cs-wrap::after{
  display:none !important;
  content:none !important;
  width:0 !important;
  height:0 !important;
  border:0 !important;
  background:none !important;
}

/* The uploaded hero banner is the complete visual. */
.cs-showcase .cs-hero{
  position:relative;
  background:#fff !important;
  padding:0 !important;
  border-bottom:1px solid #d9eaf7 !important;
}

.cs-showcase .cs-hero > .cs-wrap{
  background:#fff !important;
  padding:0 !important;
  overflow:visible !important;
}

/* Never crop the new banner. */
.cs-showcase .cs-hero-media{
  display:block !important;
  position:static !important;
  left:auto !important;
  right:auto !important;
  transform:none !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
}

.cs-showcase .cs-hero-media img{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  max-height:none !important;
  min-height:0 !important;
  aspect-ratio:auto !important;
  object-fit:contain !important;
  object-position:center center !important;
  margin:0 !important;
  padding:0 !important;
  filter:none !important;
}

/* Mobile also shows the complete banner. */
@media(max-width:640px){
  .cs-showcase .cs-hero-media img{
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    object-fit:contain !important;
  }
}