/******Do not remove******/
.pushImgLeft{
  float: left;
  margin: 10px;
}
.pushImgRight{
  float: right;
  margin: 10px;
}
/******Do not remove******/
.banner-caption {
  display: flex;
  justify-content: center;
  align-items: center;
}
.cimm-banner-header{
  font-size:80px
}
.banner-overlay-title {
  font-size: 40px;
}
.banner_searchWrapper {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}
.banner_searchWrapper .form-control {
  height: 50px;
  padding-left: 32px;
}
.cimm-content{
  padding:24px;
  background:#F3F4F6;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sub-banner-caption {
  color: #FFF;
  font-size: 20px;
}
.sub-banner-caption .sub-banner-heading {
  font-size: 48px;
  font-weight: 700;
}
@media only screen and (max-width: 924px) {
  .cimm-content {
    flex-direction: column;
  }
}
.card-body{
  height:125px !important;
}
@media screen and (max-width: 900px){
  .banner-caption .banner_searchWrapper #txtSearch{
    font-size: 3rem;
    font-weight: 500;
  }
.banner-caption .banner-overlay-title{
  /***font-size: 1rem;***/
}
.banner-caption .fs-2{
  font-size: 3rem !important;
}
}
.card-img-border{
  border-radius: 7px;
}
.shopCategory {
  text-align:center;
  font-family: "DM Sans", sans-serif;
  font-size:20px;
  font-weight:700;
}
.carousel .item {
  height: 300px;
}
.item img {
  position: absolute;
  top: 0;
  left: 0;
  min-height: 300px;
}
/******Regal Trevor Additions******/
/* For centering contents in a container. */
.trevorCenter{
  display: grid;
  align-items: center;
}
/* Morton Card*/
.mortoncontainer{
  width: 100%;
  height: 400px;
  position: relative;
  transition: width 1s;
  margin: 20px;
  margin-left: 0;
}
.tsimg:hover {
  scale: 1.05;
}
.tsimg {
  transition: scale 0.5s
}
.tsimg {
  width:100%;
  height:100%;
  object-fit: cover;
}
.mbox{
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  position: absolute;
  top: 0;
  left: 0;
}
.morton-top{
  z-index: 9;
  overflow: hidden;
}
.morton-middle {
  z-index: 5;
  margin: 10px;
}
.morton-bottom {
  margin: 20px;
}
.morton-card {
  border-radius: 7px;
  outline: 1px solid #D3D3D3;
}
.morton-outline {
  outline: 1px solid #D3D3D3;
}
.mbox-static {
  width: calc(50% - 20px);
  height: calc(50% - 20px);
  position: absolute;
}
.static-topright{
  top: 0;
  left: calc(100% - calc(50% - 40px));
}
.static-topleft{
  top: 0;
  left: 0;
}
.static-botleft{
  top: calc(100% - calc(50% - 40px));
left:0;
}
.static-botright{
  top: calc(100% - calc(50% - 40px));
left: calc(100% - calc(50% - 40px));
}
@media screen and (max-width: 575px){
  .static-botright{
    top: calc(100% - calc(50% - 40px));
left: calc(100% - calc(50% - 10px));
}
.static-botright span{
  font-size: 3vw !important;
}
}
.sc-botleft{
  transform: translate(-20px, 0);
}
.sc-topleft{
  transform: translate(-20px, -20px);
}
.sc-topright{
  transform: translate(0, -20px);
}
.sc-botright{
}
.image_div {
  margin: 20px;
  outline: 1px solid #D3D3D3;
  height: calc(100%);
  max-height: calc(100% - 40px);
  width: auto;
  overflow:hidden;
}
.image_centerholder {
  height: 100%;
  max-height: 100%;
  width: auto;
  text-align: center;
  vertical-align:middle;
  display: grid;
  align-items: center;
}
.morton-bottom .centered {
  /* For text. */
  padding: 10px;
  background: #F5DEB3;
}
.invisible {
  background: rgba(0,0,0,0) !important;
}
.mortoncontainer *{
  box-sizing: content-box !important;
}
[data-widget='382'] .row {
  display : block;
}
@media screen and (max-width: 550px){
  .homeBannerCaption{
    top: 4px !important;
    /* bottom: unset !important;*/
  }
}
@media screen and (max-width: 485px){
  .banner-caption .banner-overlay-title{
    font-size: 1.5rem !important;
  }
}
.shopByCategory .cimm_slideItemImg {
  height: 200px;
}
.shopByCategory .cimm_slideItemImg img{
  height: 200px;
  max-height:200px;
}
.industrialItemsStatic{
  color: #EF1D1C;
  font-family: "DM Sans", sans-serif;
}
.industrialParaStatic{
  font-family: "DM Sans", sans-serif;
}
.TopBlock_Industries{
  position: relative;
  margin-bottom: 30px;
  border: 4px solid #f1f1f1;
  background-color: #fff;
}
.cimm_slider-title{
  margin-bottom: 0 !important;
}
.slick-next{
  text-align: right !important;
}
.slick-prev{
  margin-left: 10px !important;
}
.cimm_sliderWrap .cimm_caroWrap .slick-slide {
  margin-left: 25px !important;
}
.cimm_sliderWrap .cimm_caroWrap {
  margin: 0 0 0 -25px !important;
}
.mh300 {
  max-height: 300px !important;
}
.cover {
  object-fit: cover !important;
}
.contain {
  object-fit: contain !important;
}
.cimm_slideItemImg div {
  background-color: white;
  width: 100%;
  height: 100%;
}
.cimm_slideItemImg img {
  height: 100% !important;
  width: auto !important;
  padding: 0 !important
}
.cimm_slideItemImg a {
  width: 100% !important;
}
.zoom:hover img {
  transform: scale(1.1);
  /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}
.mh600 {
  max-height: 600px !important;
  filter: brightness(75%);
}
.mh425 {
  max-height: 425px !important;
  filter: brightness(75%);
}
.sharp_banner {
  position: relative;
  text-align: center;
  color: white;
}
.sharp_text {
  position: absolute;
  bottom: 9vw;
  left: 64px;
}
.im100{
  max-height: 95%;
  max-width: 100%;
}
.sharp_img {
  height: 300px;
  width:100%;
}
.bright-75 {
  filter: brightness(75%);
}
.bright-50 {
  filter: brightness(50%);
}
.z-0 {
  z-index: 0;
}
.z-1 {
  z-index: 1;
}
.cimm_staticPageWrap iframe{
  width:100%;
}
.customCheckBox  {
  margin-bottom: 0.5rem !important;
}
.banner_icon {
  width: auto;
  height: 200px;
}
@media screen and (max-width: 600px){
  .banner_icon {
    height: 100px;
  }
}
.me-3_small{
  margin-right: 1rem !important;
}
@media screen and (max-width: 600px){
  .me-3_small {
    margin-right: 0 !important;
  }
}
.ds{
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}
/****** Regal V2 design system ******/
/* Brand tokens (from brand.getregal.com). Use these vars, not raw hex. */
:root {
  --regal-red: #EF1D1C;
    --regal-red-dark: #C81714;
    --regal-red-tint: #FDEAEA;
    --regal-gray: #868686;
    --jet-black: #1E1E1E;
    --regal-accent: var(--regal-red);
      /* section-title accent bar ? flip to e.g. #D3D3D3 to neutralize */
      /* ?? Shape tokens ?????????????????????????????????????????????
      Single source of truth for how rounded/flat the site feels. Every
      card, button, image, modal and accordion rule below reads its radius
      and shadow from these variables instead of a hardcoded number ?
      change a value here and it updates everywhere that element type
      appears, with no HTML edits and no hunting through individual rules.
      Set to match the live e-commerce theme (2026-07-06, final decision
      after comparing rounded / SLA / e-commerce variants): cards/images/
      modals/accordion all 8px (.cimm_category-itemimage), buttons 6px
      (.btn-addtocart). The live theme itself has zero shadow anywhere and
      no hover feedback on cards ? that reads as dated copied 1:1, so the
      shadow/hover values below are deliberately a bit more present than
      the bare theme, not matched exactly. */
      --shape-radius-card: 8px;
      /* regal-card, regal-card-sm, reach-out-form */
      --shape-radius-btn: 6px;
      /* buttons (rounded-pill) + interest-pill */
      --shape-radius-accordion: 8px;
      /* acc-v2 accordion items */
      --shape-radius-image: 8px;
      /* hero/intro images (rounded-4) */
      --shape-radius-modal: 8px;
      /* modal dialogs */
      --shape-border-color: #E5E7EB;
      --shape-shadow-rest: 0 1px 3px rgba(0, 0, 0, .05);
      --shape-shadow-hover: 0 .5rem 1.25rem rgba(0, 0, 0, .10);
      --shape-shadow-hover-sm: 0 .3rem .6rem rgba(0, 0, 0, .08);
    }
/* feature-icon: round red icon badge above a card title (the look Trevor likes). */
.feature-icon {
  width: 72px;
  height: 72px;
  background: var(--regal-red-tint);
      color: var(--regal-red);
        font-size: 1.6rem;
      }
/* lead-italic: italic intro / closing lead copy. */
.lead-italic {
  font-size: 1.15rem;
  font-style: italic;
  color: #555;
  line-height: 1.7;
}
/* regal-section-title: centered heading with a short brand accent bar beneath.
The one brand-line device; replaces full-width <hr> rules. */
.regal-section-title {
  text-align: center;
}
/* regal-card-sm.hover-lift: the one remaining consumer of the old generic
"any hover-lift element gets a lift" rule (partials\_widget-1203.html,
6 cards) ? kept as its own distinct hover (smaller shadow, smaller lift),
unrelated to the card-family hover-flourish below. */
.regal-card-sm.hover-lift {
  transition: box-shadow .25s ease, transform .25s ease;
}
/* ?? Card family ??????????????????????????????????????????????????
regal-card, regal-card-sm and reach-out-form (further down this file)
all share the same shell ? background, border, radius and resting
shadow ? consolidated into one rule instead of repeating it three
times. Each class below only adds its own layout (padding, flex
direction, size). Markup is unchanged; these are the same class names
every page already uses. (regal-card-flat and a-chip were dropped from
this group 2026-08-27 -- both unused sitewide, see the CSS cleanup note
near the end of this file.) */
.regal-card,
.regal-card-sm,
.reach-out-form {
  background: #fff;
  border: 1px solid var(--shape-border-color);
      border-radius: var(--shape-radius-card);
        box-shadow: var(--shape-shadow-rest);
        }
/* regal-card: the standard padded content card, fills its grid column for
equal-height rows. Pair with hover-lift to make it interactive. */
.regal-card {
  display: flex;
  flex-direction: column;
  padding: 2.5rem;
  height: 100%;
}
/* ?? Hover flourish v2 (approved 2026-07-11, supersedes the top-bar
version) ?????????????????????????????????????????????????????????
Applies ONLY to cards that are actually interactive ? anything with
both a card-family class AND .hover-lift. Static/informational cards
(regal-card without hover-lift, e.g. our-team-updated.html's
department intros, brokerage-updated.html's "Meet Rego" card) are
deliberately left untouched ? hover feedback on something that isn't
clickable is misleading, not polish.
Matches the simpler pattern already live on .svc-tile/.explore-more-card:
border tints red + a shadow appears, no top bar, no card lift.
Icon cards only (see .feature-icon rule below): icon scales 1.08x ?
echoes the live e-commerce theme's own image-zoom-on-hover convention;
kept because Trevor's objection was to the top bar + card motion
specifically, not this detail.
Deliberately NOT applied to regal-card-cover's photo (tried an image-zoom
there too; reads as "dizzying" stacked with the border motion). */
.regal-card.hover-lift,
.regal-card-cover.hover-lift {
  position: relative;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.regal-card.hover-lift:hover,
.regal-card-cover.hover-lift:hover {
  border-color: var(--regal-red);
      box-shadow: var(--shape-shadow-hover);
      }
.regal-card.hover-lift .feature-icon {
  transition: transform .25s ease;
}
.regal-card.hover-lift:hover .feature-icon {
  transform: scale(1.08);
}
/* combo-band: full-width white band used for stats + community commitments (Option G).
No box-shadow (2026-08-27): every banded section on the site now uses the same
flat, hairline-only treatment -- no shadow anywhere, background/border only.
Border-top added to the base rule for the same reason -- previously only
combo-band-mid (the mid-page variant) had a top hairline; now both edges are
bordered by default so every combo-band instance reads as a bounded strip. */
.combo-band {
  background: #fff;
  border-top: 1px solid #E5E7EB;
  border-bottom: 1px solid #E5E7EB;
}
/* combo-band-mid: historically the mid-page variant (no shadow, both hairlines)
vs. the base "at a real section boundary" variant (shadow, bottom hairline
only). That distinction is retired -- base combo-band now behaves exactly
like this modifier. Kept as a harmless no-op so existing combo-band-mid
markup (about-us-updated.html) doesn't need to change. */
.combo-band.combo-band-mid {
  box-shadow: none;
  border-top: 1px solid #E5E7EB;
}
.combo-band .divider-v {
  width: 1px;
  background: #E5E7EB;
  align-self: stretch;
}
.combo-stat {
  text-align: center;
}
.combo-stat .num {
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--regal-red);
      line-height: 1;
    }
.combo-stat .lbl {
  font-size: .7rem;
  font-weight: 600;
  color: var(--regal-gray);
      letter-spacing: .07em;
      text-transform: uppercase;
      margin-top: .2rem;
    }
.combo-item {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.combo-item .ci-icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  background: var(--regal-red-tint);
      color: var(--regal-red);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .95rem;
      }
.combo-item .ci-text {
  font-size: .85rem;
  color: #374151;
  line-height: 1.4;
}
.combo-item .ci-text strong {
  display: block;
  font-weight: 700;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--jet-black);
      margin-bottom: .15rem;
    }
/* regal-card-cover: full-bleed cover image variant of regal-card.
Use with regal-card: <div class="regal-card regal-card-cover hover-lift"> */
.regal-card-cover {
  padding: 0;
  overflow: hidden;
}
.regal-card-cover .rcard-img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}
.regal-card-cover .rcard-body {
  padding: 1.5rem 1.75rem 1.75rem;
}
/* regal-card-row: horizontal scroll strip of small regal-cards (e.g. widget 1203). */
.regal-card-row {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding: .5rem .25rem 1rem;
  scrollbar-width: none;
}
.regal-card-row::-webkit-scrollbar {
  display: none;
}
/* regal-card-sm: smaller regal-card for use in sliders/rows.
Shell (bg/border/radius/shadow) comes from the card family rule above;
the hover-lift shadow is intentionally lighter since the card is small. */
.regal-card-sm {
  flex: 0 0 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  text-decoration: none;
  color: var(--jet-black);
      text-align: center;
    }
.regal-card-sm span {
  font-size: .8rem;
  font-weight: 600;
  transition: color .2s ease;
}
.regal-card-sm:hover span {
  color: var(--regal-red);
    }
.regal-card-sm.hover-lift:hover {
  box-shadow: var(--shape-shadow-hover-sm) !important;
      transform: translateY(-2px);
    }
/* regal-crown-icon: standalone crown mark from brand.getregal.com/assets/logos/icons/crown-red.svg */
.regal-crown-icon {
  height: 40px;
  width: auto;
  display: block;
  margin: 0 auto .8rem;
}
/* small_ts: Inksplosion logo in custom-prints alert */
.small_ts {
  height: 90px;
  width: auto;
  vertical-align: middle;
}
/* body-lg: body copy with bumped size and generous line-height. Use instead of repeating inline styles. */
.body-lg {
  font-size: 1.05rem;
  line-height: 1.9;
  color: #374151;
}
/* cta-logo-img: visual anchor image in Option 5 CTA section (e.g. anniversary logo). */
.cta-logo-img {
  max-height: 180px;
  max-width: 100%;
  object-fit: contain;
}
/* reach-out-form: container shell for all reach-out/contact widgets.
Border/radius come from the card family rule above; the resting shadow
is deliberately heavier than a plain card's since a contact form is
usually the page's focal point. */
.reach-out-form {
  padding: 2.25rem 2.5rem;
  box-shadow: 0 4px 24px rgba(0,0,0,.08);
}
.reach-out-form .form-control:focus {
  border-color: var(--regal-red);
      box-shadow: 0 0 0 3px rgba(239,29,28,.12);
      outline: none;
    }
/* interest-pill: toggle checkbox styled as a pill. Hidden input, visible span. */
.interest-pill {
  display: inline-block;
  cursor: pointer;
  margin: 0;
}
.interest-pill input[type="checkbox"] {
  display: none;
}
.interest-pill span {
  display: inline-block;
  padding: .38rem 1.1rem;
  border: 1.5px solid #E5E7EB;
  border-radius: var(--shape-radius-btn);
      font-size: .875rem;
      font-weight: 600;
      color: #374151;
      background: #fff;
      transition: border-color .18s ease, background .18s ease, color .18s ease;
      user-select: none;
    }
.interest-pill:hover span {
  border-color: var(--regal-red);
      color: var(--regal-red);
      }
.interest-pill input:checked + span {
  background: var(--regal-red-tint);
      border-color: var(--regal-red);
        color: var(--regal-red);
        }
/* cta-band-img: cover image inside a CTA image band. Use instead of inline styles
so CIMM2's editor doesn't strip them on paste-back. */
.cta-band-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 60% !important;
  display: block !important;
}
/* acc-v2: V2 accordion ? card-separated style (approved style B). Each item floats
as its own card; active item lifts. Add class="accordion acc-v2" to any accordion.
Note: higher-specificity selectors used so rules survive Bootstrap loading after this file. */
.accordion.acc-v2 {
  --bs-accordion-active-color: var(--jet-black);
      --bs-accordion-active-bg: #fff;
      --bs-accordion-border-color: transparent;
      --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236B7280'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
      --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23EF1D1C'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
      --bs-accordion-btn-focus-box-shadow: none;
    }
.acc-v2 {
  --bs-accordion-btn-bg: #fff;
    --bs-accordion-bg: #fff;
    --bs-accordion-active-bg: #fff;
    --bs-accordion-active-color: var(--jet-black);
      --bs-accordion-border-color: transparent;
      --bs-accordion-border-radius: var(--shape-radius-accordion);
        --bs-accordion-inner-border-radius: calc(var(--shape-radius-accordion) - 1px);
        --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236B7280'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
        --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23EF1D1C'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
        --bs-accordion-btn-focus-box-shadow: none;
        border: none !important;
        display: flex;
        flex-direction: column;
        gap: .65rem;
      }
.accordion.acc-v2 .accordion-item {
  border: 1px solid #E5E7EB !important;
  border-radius: var(--shape-radius-accordion) !important;
      overflow: hidden;
      box-shadow: var(--shape-shadow-rest);
        transition: box-shadow .2s ease, transform .2s ease;
      }
.accordion.acc-v2 .accordion-item + .accordion-item {
  border-top: 1px solid #E5E7EB !important;
}
.accordion.acc-v2 .accordion-item:has(.accordion-button:not(.collapsed)) {
  box-shadow: var(--shape-shadow-hover-sm);
      transform: translateY(-2px);
    }
.acc-v2 .accordion-button {
  font-weight: 600;
  font-size: .95rem;
}
/* ===== Home page ===== */
@media (max-width: 550px) {
  .hidden-mobile {
    display: none;
  }
.mb-3mobile {
  margin-bottom: 6px;
}
}
::placeholder {
  color: #242424 !important;
}
::-webkit-input-placeholder {
  color: #242424 !important;
}
:-moz-placeholder {
  color: #242424 !important;
  opacity: 1 !important;
}
::-moz-placeholder {
  color: #242424 !important;
  opacity: 1;
}
:-ms-input-placeholder {
  color: #242424 !important;
}
::-ms-input-placeholder {
  color: #242424 !important;
}
.glass {
  backdrop-filter: blur(6px) saturate(102%) !important;
  -webkit-backdrop-filter: blur(6px) saturate(102%) !important;
  background-color: rgba(255, 255, 255, 0.64) !important;
}
.slick-dots li button::before {
  background: #ccc !important;
  opacity: .5;
}
.slick-dots li.slick-active button:before {
  background: #ef1d1c !important;
}
.image-overlay-container {
  position: relative;
  height: 250px;
  overflow: hidden;
  border-radius: 8px;
}
.image-overlay-container img.cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(75%);
  transition: filter 0.3s ease;
}
.image-overlay-container:hover img.cover {
  filter: brightness(65%);
}
.card-title-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 2.2rem;
  font-weight: 700;
  text-align: center;
  z-index: 2;
  padding: 0 12px;
  width: 100%;
  line-height: 1.2;
}
.shopByIndustry .card-body {
  height: auto !important;
  padding: 1rem 0.75rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #333;
}
.card-text {
  margin-bottom: 0.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.quotedSlider .cimm_slideItembg {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 175px;
  border: 0 !important;
  border-radius: var(--bs-border-radius-2xl) !important;
    }
@media screen and (max-width: 700px) {
  .quotedSlider .cimm_slideItembg {
    height: 250px;
  }
}
.quoted-text {
  width: 100%;
  height: 100px;
  font-style: italic;
  font-size: 1.1rem;
  color: #333;
  padding-left: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0;
  flex-direction: column;
}
.quote-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
}
.quote-author {
  font-size: 0.9rem;
  color: #666;
  margin-top: 0.5rem;
  text-align: center;
}
.quote-image-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}
.quote-image {
  width: 200px;
  max-width: 100%;
  height: auto;
}
.center-box {
  max-width: 640px;
  width: 100%;
  position: relative;
}
.center-box::before {
  content: "\201C";
  font-size: 5rem;
  position: absolute;
  top: 60px;
  left: -10px;
  color: #cccccc;
  z-index: 10;
}
.center-box::after {
  content: "\201D";
  font-size: 5rem;
  position: absolute;
  bottom: 5px;
  right: -10px;
  color: #cccccc;
}
.widget-center-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}
/* Buttons: rounded-pill is a Bootstrap utility (border-radius:50rem
!important). This rule just points it at the shape token instead of
Bootstrap's hardcoded value, so button roundness stays in sync with the
rest of the card family from one place. Higher specificity than
Bootstrap's bare `.rounded-pill` (two classes vs. one) so it wins
regardless of the two files' load order. */
.btn.rounded-pill {
  border-radius: var(--shape-radius-btn) !important;
    }
/* Search icon button (#performSearchBtn) uses rounded-pill on a square
button specifically to become a circle -- exempt it from the shared
button-radius token above, which is meant for rectangular CTA pills. */
.input-group > .form-control.rounded-pill {
  border-radius: 50rem 0 0 50rem !important;
}
.input-group > .btn.cimm_searchIcon.rounded-pill {
  border-radius: 0 50rem 50rem 0 !important;
}
/* btn-outline-dark and btn-outline-secondary: unilogweb.css hard-codes
btn-primary to font-size 16px and padding 10px 14px (important), overriding
Bootstrap's btn-lg size, but has no equivalent rule for outline buttons.
Match the primary's forced sizing so the pair always reads as one family.
Needs the .btn prefix (two classes, same technique as .btn.rounded-pill
above): the single-class version was losing a cascade tie to Bootstrap's
own py-3 and px-4 utilities (same specificity, but Bootstrap loads after
this file, so its important won on load order) -- that let a py-3 outline
button render 58px tall next to a 46px primary button beside it, on
regal-select-updated.html. Two classes wins on specificity instead,
regardless of load order. */
.btn.btn-outline-dark,
.btn.btn-outline-secondary {
  font-size: 16px !important;
  padding: 10px 14px !important;
}
/* rounded-4: Bootstrap utility used on hero/intro images (img-fluid
rounded-4). Points it at the image shape token instead of Bootstrap's
hardcoded 1rem. Selector needs the element qualifier (img.rounded-4) ?
Bootstrap's own .rounded-4 rule is also !important and loads after this
file, so a bare class selector would lose the specificity tie. */
img.rounded-4 {
  border-radius: var(--shape-radius-image) !important;
    }
/* modal-content: every approved modal sets border-radius:1.25rem inline
(see style guide "Modal pattern"). This overrides that inline value with
the shape token so modals stay in sync with the rest of the site from
one place, without editing each page. */
.modal-content {
  border-radius: var(--shape-radius-modal) !important;
    }
/* eyebrow: small uppercase red label above a heading. Sweep idea 1,
option A ? approved 2026-07-06. Not yet applied to any real page;
needs a short label written per heading first. */
.eyebrow {
  display: block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--regal-red);
      margin-bottom: .5rem;
    }
/* img-framed: thin border + light shadow for non-hero images. Sweep idea 3,
option A ? approved 2026-07-06. Radius/shadow read from the same
--shape-* tokens as everything else, so it stays in sync automatically. */
.img-framed {
  border: 1px solid var(--shape-border-color);
      border-radius: var(--shape-radius-image);
        box-shadow: var(--shape-shadow-rest);
          background: #fff;
          display: block;
          width: 100%;
          height: auto;
        }
/* editorial-split: asymmetric image/text split (58/42), from ideas-elements.html
#26 ? Trevor's top pick for the V2.2 boost, approved 2026-07-08. Refactored
through the shape tokens (source file used raw border-radius:2rem). */
.editorial-split {
  display: flex;
  border-radius: var(--shape-radius-card);
      overflow: hidden;
      border: 1px solid var(--shape-border-color);
        box-shadow: var(--shape-shadow-rest);
        }
.editorial-split-img {
  flex: 0 0 58%;
}
.editorial-split-img img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  display: block;
}
.editorial-split-body {
  flex: 1;
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #fff;
}
.editorial-split.reverse {
  flex-direction: row-reverse;
}
@media (max-width: 767px) {
  .editorial-split, .editorial-split.reverse {
    flex-direction: column;
  }
.editorial-split-img {
  flex: 0 0 auto;
}
.editorial-split-img img {
  min-height: 220px;
}
}
/* overlap-float-card: card floats up over the bottom of an image via
negative margin-top, from ideas-elements.html #33 ? approved 2026-07-08.
Refactored through shape tokens (source used raw border-radius:1.5rem/2rem). */
.overlap-img-wrap {
  border-radius: var(--shape-radius-image);
      overflow: hidden;
      position: relative;
      background: #fff;
      border: 1px solid var(--shape-border-color);
      }
.overlap-img-wrap img {
  width: 100%;
  height: 340px;
  object-fit: contain;
  display: block;
}
.overlap-float-card {
  background: #fff;
  border-radius: var(--shape-radius-card);
      padding: 1.75rem 2rem;
      box-shadow: var(--shape-shadow-hover);
        margin: -2.5rem 1.5rem 0;
        position: relative;
        z-index: 2;
        border: 1px solid var(--shape-border-color);
        }
@media (max-width: 575px) {
  .overlap-float-card {
    margin: -1.5rem .75rem 0;
    padding: 1.25rem 1.5rem;
  }
}
/* fl-form: Bootstrap floating labels with the V2 focus ring, from
ideas-elements.html #32 ? approved 2026-07-08 ("text intercepts" the
border on focus/fill). Radius matches --shape-radius-btn, same value
Bootstrap's own .form-control default already resolves to. */
.fl-form .form-floating .form-control {
  border-radius: var(--shape-radius-btn);
      border-color: var(--shape-border-color);
      }
.fl-form .form-floating .form-control:focus {
  border-color: var(--regal-red);
      box-shadow: 0 0 0 3px rgba(239,29,28,.12);
    }
.fl-form .form-floating > .form-control:focus ~ label,
.fl-form .form-floating > .form-control:not(:placeholder-shown) ~ label {
  color: var(--regal-red);
    }
/* The sitewide `::placeholder { color:#242424 !important; }` rule above breaks
floating labels: it overrides Bootstrap's own rule that makes the real
placeholder transparent while a field is unfocused/empty, so the visible
placeholder and the floated label render on top of each other. Restore
transparency inside .fl-form specifically ? needs !important to outrank
the other !important rule (same-weight rules are decided by specificity,
and this selector is more specific than the bare `::placeholder`). */
.fl-form .form-floating > .form-control::placeholder {
  color: transparent !important;
}
/* marquee: auto-scrolling logo strip, from ideas-elements.html #12 ? approved
2026-07-08. No raw shape values to refactor here; the outer shell reuses
.regal-card for its border/radius/shadow instead of hardcoding new ones. */
.marquee-wrap {
  overflow: hidden;
  padding: 1.5rem 0;
}
@keyframes marquee {
  0% {
    transform: translateX(0);
  }
100% {
  transform: translateX(-50%);
}
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 22s linear infinite;
  gap: 0;
}
.marquee-track:hover {
  animation-play-state: paused;
}
.marquee-item {
  padding: .75rem 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.marquee-item img {
  max-height: 44px;
  max-width: 120px;
  object-fit: contain;
  filter: grayscale(100%) opacity(.55);
  transition: filter .3s ease;
}
.marquee-item:hover img {
  filter: grayscale(0%) opacity(1);
}
/* icon-row: compact scannable feature row, from ideas-elements.html #21 ?
approved 2026-07-08. Border/shadow through shape tokens. The icon badge is
a deliberately different shape (rounded square, not the circular
.feature-icon) ? that contrast is the point, not an oversight. */
.icon-row-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: var(--shape-radius-card);
      border: 1px solid var(--shape-border-color);
        background: #fff;
        box-shadow: var(--shape-shadow-rest);
        }
/* No hover state (removed 2026-08): every current .icon-row-item is a plain,
non-clickable <div> (the Industries We Serve list on home-updated.html) ?
a red-tint hover cue implies it's clickable when it isn't. If a genuinely
linked icon-row is ever needed, add hover styling scoped to that specific
usage (e.g. an <a> wrapper), don't restore it here globally. */
.icon-row-icon {
  width: 44px;
  height: 44px;
  border-radius: .75rem;
  background: var(--regal-red-tint, #FDEAEA);
      color: var(--regal-red);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
        flex-shrink: 0;
      }
.icon-row-item h6 {
  margin-bottom: .15rem;
  font-size: .9rem;
}
.icon-row-item p {
  margin: 0;
  font-size: .8rem;
  color: #6B7280;
  line-height: 1.45;
}
/* ???????????????????????????????????????????????????????????????????
Home page option elements, from ideas-elements.html -- added 2026-07-08
for the 10 home-option-* explorations. All refactored through the
--shape- and brand tokens (source file used raw rem values throughout).
??????????????????????????????????????????????????????????????????? */
/* pull-quote: editorial dark-bg quote block, #02 */
.pull-quote {
  position: relative;
  padding: 2rem 2rem 2rem 3.5rem;
  border-radius: var(--shape-radius-card);
      background: var(--jet-black);
        color: #fff;
      }
.pull-quote::before {
  content: '\201C';
  position: absolute;
  left: 1rem;
  top: .5rem;
  font-size: 5rem;
  line-height: 1;
  color: var(--regal-red);
      font-family: Georgia, serif;
    }
.pull-quote p {
  font-size: 1.2rem;
  font-style: italic;
  line-height: 1.7;
  margin-bottom: .75rem;
  color: rgba(255,255,255,.92);
}
.pull-quote cite {
  font-size: .82rem;
  font-style: normal;
  color: rgba(255,255,255,.5);
}
/* timeline: vertical dot+year+text, #03 */
.timeline {
  position: relative;
  padding-left: 2.25rem;
}
.timeline::before {
  content: '';
  position: absolute;
  left: .55rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--shape-border-color);
    }
.tl-item {
  position: relative;
  padding-bottom: 2rem;
}
.tl-item:last-child {
  padding-bottom: 0;
}
.tl-dot {
  position: absolute;
  left: -1.7rem;
  top: .25rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--regal-red);
      border: 3px solid #fff;
      box-shadow: 0 0 0 2px var(--regal-red);
      }
.tl-dot.upcoming {
  background: #fff;
}
.tl-year {
  font-size: .78rem;
  font-weight: 700;
  color: var(--regal-red);
      letter-spacing: .06em;
      text-transform: uppercase;
      margin-bottom: .2rem;
    }
/* hover-reveal: image card, text slides up on hover, #05 */
.hover-reveal {
  position: relative;
  border-radius: var(--shape-radius-card);
      overflow: hidden;
      cursor: pointer;
      box-shadow: var(--shape-shadow-rest);
      }
.hover-reveal img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
  transition: transform .45s ease;
}
.hover-reveal:hover img {
  transform: scale(1.06);
}
.hover-reveal-body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.75rem 1.5rem 1.25rem;
  background: linear-gradient(to top, rgba(12,12,12,.88) 0%, transparent 100%);
  color: #fff;
  transform: translateY(40%);
  transition: transform .35s ease;
}
.hover-reveal:hover .hover-reveal-body {
  transform: translateY(0);
}
.hover-reveal-tag {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--regal-red);
      margin-bottom: .3rem;
    }
/* stat-callout / mini-stat-row / num-band: three number-forward densities, #07/#23/#31 */
.stat-callout {
  text-align: center;
  padding: 2rem;
}
.stat-callout .big-num {
  font-size: 3.5rem;
  font-weight: 900;
  line-height: 1;
  color: var(--jet-black);
    }
.stat-callout .big-num span {
  color: var(--regal-red);
    }
.stat-callout p {
  color: #6B7280;
  max-width: 220px;
  margin: .5rem auto 0;
  font-size: .88rem;
  line-height: 1.5;
}
.mini-stat-row {
  display: flex;
  border: 1px solid var(--shape-border-color);
      border-radius: var(--shape-radius-card);
        overflow: hidden;
        background: #fff;
      }
.mini-stat {
  flex: 1;
  padding: 1.5rem 1rem;
  text-align: center;
  border-right: 1px solid var(--shape-border-color);
    }
.mini-stat:last-child {
  border-right: none;
}
.mini-stat .ms-num {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--jet-black);
      line-height: 1;
    }
.mini-stat .ms-num em {
  color: var(--regal-red);
      font-style: normal;
    }
.mini-stat .ms-lbl {
  font-size: .72rem;
  color: #9CA3AF;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top: .3rem;
}
.num-band {
  background: var(--jet-black);
      border-radius: var(--shape-radius-card);
        padding: 3rem 2rem;
      }
.num-band-flex {
  display: flex;
  flex-wrap: wrap;
}
.num-band-item {
  flex: 1 1 25%;
  text-align: center;
  position: relative;
  padding: .5rem 0;
}
.num-band-item + .num-band-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10%;
  bottom: 10%;
  width: 1px;
  background: rgba(239,29,28,.35);
}
.nb-num {
  font-size: 3rem;
  font-weight: 900;
  line-height: 1;
  color: #fff;
}
.nb-num span {
  color: var(--regal-red);
    }
.nb-lbl {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.45);
  margin-top: .5rem;
}
/* mosaic: asymmetric 2fr/1fr image collage, #27 */
.mosaic {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: .75rem;
  height: 340px;
}
.mosaic-a {
  grid-row: 1 / 3;
}
.mosaic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--shape-radius-image);
    }
/* video-card: play-button overlay, pure CSS, #24 */
.video-card {
  position: relative;
  border-radius: var(--shape-radius-card);
      overflow: hidden;
      cursor: pointer;
    }
.video-card img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  display: block;
  filter: brightness(.75);
  transition: filter .3s ease;
}
.video-card:hover img {
  filter: brightness(.65);
}
.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 68px;
  height: 68px;
  background: rgba(255,255,255,.95);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--regal-red);
      font-size: 1.4rem;
      padding-left: .2rem;
      box-shadow: var(--shape-shadow-hover);
        transition: transform .25s ease;
      }
.video-card:hover .play-btn {
  transform: translate(-50%,-50%) scale(1.08);
}
/* split-cta: dark/light two-tone side by side, #16 */
.split-cta {
  display: flex;
  flex-wrap: wrap;
  min-height: 280px;
  border-radius: var(--shape-radius-card);
      overflow: hidden;
    }
.split-cta-dark {
  flex: 1 1 320px;
  background: var(--jet-black);
      padding: 2.5rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      color: #fff;
    }
.split-cta-light {
  flex: 1 1 320px;
  background: #F9FAFB;
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.split-cta-dark h2, .split-cta-dark h3 {
  color: #fff;
  font-weight: 800;
}
.split-cta-dark p {
  color: rgba(255,255,255,.65);
}
/* testimonial-card: 3 background variants, #28 */
.testimonial-card {
  border-radius: var(--shape-radius-card);
      padding: 1.5rem 1.75rem;
      background: #fff;
      border: 1px solid var(--shape-border-color);
        box-shadow: var(--shape-shadow-rest);
          height: 100%;
        }
.testimonial-stars {
  color: #F59E0B;
  font-size: .8rem;
  margin-bottom: .6rem;
  letter-spacing: .05em;
}
.testimonial-text {
  font-size: .88rem;
  line-height: 1.7;
  font-style: italic;
  color: #374151;
  margin-bottom: .85rem;
}
.testimonial-name {
  font-size: .82rem;
  font-weight: 700;
  margin: 0;
}
.testimonial-role {
  font-size: .74rem;
  color: #9CA3AF;
}
/* checklist: feature/offer list with colored status dots, #08 */
.check-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .6rem 0;
  border-bottom: 1px solid #F3F4F6;
  font-size: .9rem;
}
.check-list li:last-child {
  border-bottom: none;
}
.check-list .ci {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .65rem;
  margin-top: .1rem;
}
.check-list .ci.yes {
  background: #D1FAE5;
  color: #059669;
}
/* divider-text: line-with-label section break, #34 sub-2 (approved variant) */
.divider-text {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.divider-text span {
  font-size: .72rem;
  color: #9CA3AF;
  white-space: nowrap;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.divider-text::before, .divider-text::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--shape-border-color);
    }
/* filter chips: tag-style pills, #10 */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .9rem;
  border-radius: 999px;
  border: 1px solid var(--shape-border-color);
      background: #fff;
      font-size: .82rem;
      font-weight: 500;
      text-decoration: none;
      color: #374151;
      transition: all .2s ease;
    }
.chip:hover {
  border-color: var(--regal-red);
      color: var(--regal-red);
        text-decoration: none;
      }
.chip.active-red {
  background: var(--regal-red);
      border-color: var(--regal-red);
        color: #fff;
      }
.chip img {
  width: 15px;
  height: 15px;
  object-fit: contain;
}
/* ???????????????????????????????????????????????????????????????????
home-updated.html components ? migrated from the home-option-03e
editorial demo (2026-07-09). Home page V2 conversion.
??????????????????????????????????????????????????????????????????? */
/* home-hero: full-bleed photo hero, Variant B pattern (see style guide),
380px / rgba(12,12,12,.45) ? same as about-us/community-associations/sourcing. */
.home-hero {
  position: relative;
  min-height: 380px;
  background: url('/ASSETS/IMAGES/CMS/STATIC_IMAGES/1746126994074.jpg') center / cover no-repeat var(--jet-black);
    }
.home-hero-scrim {
  position: absolute;
  inset: 0;
  background: rgba(12,12,12,.45);
}
.home-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: 380px;
}
@media (max-width: 575px) {
  .home-hero, .home-hero-inner {
    min-height: 280px;
  }
.home-hero-inner .container {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}
}
/* Home page only ? raise the container ceiling on very large viewports (1440p/4K)
so content doesn't shrink to a narrow column in a sea of whitespace. Bootstrap's
default .container caps at 1320px above 1400px viewport, which is unchanged
here for every other page. */
@media (min-width: 1600px) {
  .home-v2-page .container {
    max-width: 1500px;
  }
}
@media (min-width: 2200px) {
  .home-v2-page .container {
    max-width: 1800px;
  }
}
@media (min-width: 3400px) {
  .home-v2-page .container {
    max-width: 2000px;
  }
}
/* hero-right-col / hr-stat-rotator: right-side rotating stat in the home hero
? number rolls odometer-style (translateY on a stacked track), label
crossfades, left-justified to align with the headline. Driven by JS in
js/regal.js (initHeroStatRotator) ? that file is a real site-wide asset
loaded via <script src> OUTSIDE every page's EDITABLE REGION (same
pattern as CustomCss.css), specifically so the CMS page editor's paste
sanitizer can't strip it ? an earlier inline <script> INSIDE the editable
region got silently dropped on paste and killed the rotator on stage. See
[[cimm2-home-page-redesign]]. (A pure-CSS @keyframes version was tried in
between and works, but Trevor asked to go back to JS + a shared regal.js
file instead ? kept the transition-based CSS here to match.) */
.hero-right-col {
  display: flex;
  align-items: center;
  justify-content: center;
}
.hr-stat-rotator {
  width: 220px;
  color: #fff;
  text-align: left;
}
.hr-stat-rotator .num-mask {
  height: 3.2rem;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.hr-stat-rotator .num-track {
  display: flex;
  flex-direction: column;
  transition: transform .6s cubic-bezier(.65,0,.35,1);
}
.hr-stat-rotator .num-track span {
  font-size: 3rem;
  font-weight: 900;
  line-height: 3.2rem;
  height: 3.2rem;
}
.hr-stat-rotator .lbl {
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  opacity: .85;
  margin-top: .4rem;
  transition: opacity .3s ease;
}
.hr-stat-rotator.with-rule {
  border-left: 3px solid var(--regal-red);
      padding-left: 1.1rem;
    }
/* jump-strip: narrow login-aware quick-link bar under the home intro line. */
.jump-strip {
  background: #fff;
  border-top: 1px solid var(--shape-border-color);
      border-bottom: 1px solid var(--shape-border-color);
        padding: .85rem 1rem;
      }
.jump-strip .jump-link {
  font-size: .82rem;
  color: #374151;
  text-decoration: none;
}
.jump-strip .jump-link:hover {
  color: var(--regal-red);
    }
.jump-strip .jump-sep {
  color: #D1D5DB;
  margin: 0 .6rem;
}
/* svc-tile: card with a large background-watermark icon, used for Explore Services
and Shop Categories. Deliberately simpler hover (border+shadow, no top accent
bar) than .regal-card.hover-lift ? Trevor's preference, see memory
cimm2-hover-flourish-reconsideration; not yet the sitewide default. */
.svc-tile {
  position: relative;
  display: block;
  border-radius: var(--shape-radius-card);
      border: 1px solid var(--shape-border-color);
        background: #fff;
        padding: 1.75rem 1.5rem;
        overflow: hidden;
        height: 100%;
        min-height: 130px;
        transition: border-color .2s ease, box-shadow .2s ease;
        text-decoration: none;
      }
.svc-tile:hover {
  border-color: var(--regal-red);
      box-shadow: var(--shape-shadow-hover);
      }
.svc-tile-bgicon {
  position: absolute;
  right: -18px;
  bottom: -18px;
  width: 150px;
  height: 150px;
  object-fit: contain;
  opacity: .09;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.svc-tile:hover .svc-tile-bgicon {
  opacity: .28;
  transform: scale(1.06);
}
.svc-tile h6 {
  position: relative;
  z-index: 1;
  font-weight: 700;
  margin-bottom: .35rem;
  color: #111;
}
.svc-tile .go {
  position: relative;
  z-index: 1;
  font-size: .78rem;
  color: var(--regal-red);
    }
/* icon-corner-badge: drawn icon in a white circle badge at the bottom outside
corner of an editorial-split photo (Regal Advantage, Product Finder) ? the
photo itself is undarkened. "Outside" = away from the text panel: bottom
RIGHT when the image is on the right (.reverse, e.g. Regal Advantage),
bottom LEFT when the image is on the left (Product Finder) ? use
.icon-corner-badge.pos-right / .pos-left accordingly.
.editorial-split-img img (the rule that sizes the main photo ? width:100%;
height:100%; min-height:320px; object-fit:cover) cascades onto ANY <img>
nested inside .editorial-split-img, including this icon, since it's a plain
tag selector with nothing excluding it ? that's why the icon needs its own
!important overrides here, not just a size on the class. */
.icon-corner-badge {
  position: absolute;
  bottom: 1.5rem;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
  overflow: hidden;
  z-index: 2;
}
.icon-corner-badge.pos-right {
  right: 1.5rem;
}
.icon-corner-badge.pos-left {
  left: 1.5rem;
}
/* Font Awesome glyph variant ? for pages whose drawn PNG icon doesn't read well
oversized/clipped at 150px (e.g. the Regal Select crown mark looked bad
cropped that tight). Simple centered glyph instead, same badge shell. */
.icon-corner-badge i {
  font-size: 2.1rem;
  color: var(--regal-red);
    }
.icon-corner-badge img {
  width: 150px !important;
  height: 150px !important;
  min-height: 0 !important;
  max-width: 150px !important;
  max-height: 150px !important;
  object-fit: contain !important;
}
/* h-rail: horizontal scroll-snap testimonial rail (home page "What Our Customers Say"). */
.h-rail {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: .75rem;
}
.h-rail-card {
  flex-shrink: 0;
  scroll-snap-align: start;
  width: 300px;
}
/* dash-panel: bordered content panel (checklist / form), home "What Regal Offers". */
.dash-panel {
  border: 1px solid var(--shape-border-color);
      border-radius: var(--shape-radius-card);
        background: #fff;
        padding: 1.75rem;
        height: 100%;
        box-shadow: var(--shape-shadow-rest);
        }
.dash-panel-title {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #9CA3AF;
  margin-bottom: 1rem;
}
/* ind-feature: single feature image + overlay statement, left panel of home
"The Industries We Serve" (replaces a redundant photo-trio + duplicate labels). */
.ind-feature {
  position: relative;
  border-radius: var(--shape-radius-card);
      overflow: hidden;
      height: 100%;
      min-height: 420px;
    }
.ind-feature img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.55);
}
.ind-feature-overlay {
  position: relative;
  z-index: 1;
  height: 100%;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2rem;
}
/* explore-more-card: photo+eyebrow+title teaser card, home "More From Regal". */
.explore-more-card {
  display: block;
  text-decoration: none;
  border: 1px solid var(--shape-border-color);
      border-radius: var(--shape-radius-card);
        overflow: hidden;
        background: #fff;
        height: 100%;
        transition: border-color .2s ease, box-shadow .2s ease;
      }
.explore-more-card:hover {
  border-color: var(--regal-red);
      box-shadow: var(--shape-shadow-hover);
      }
.explore-more-card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}
.explore-more-card .body {
  padding: 1.5rem;
}
.explore-more-card .eyebrow {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--regal-red);
      margin-bottom: .4rem;
    }
.explore-more-card h5 {
  font-weight: 700;
  margin-bottom: .5rem;
  color: #111;
}
.explore-more-card p {
  color: #6B7280;
  font-size: .88rem;
  line-height: 1.6;
  margin-bottom: .75rem;
}
.explore-more-card .rm {
  font-size: .8rem;
  color: var(--regal-red);
      font-weight: 600;
    }
.btn.customCheckBox {
  line-height: 1.5 !important;
}
.explore-more-card.compact img { height: 120px; }
.explore-more-card.compact .body { padding: .85rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.explore-more-card.compact h5 { font-size: .95rem; margin: 0; }
.explore-more-card.compact .rm { font-size: .95rem; transition: transform .2s ease; }
.explore-more-card.compact:hover .rm { transform: translateX(3px); }