/*recent posts */
.recent-posts-01 article {
	background-color: #fafafa;
	text-align: center;
	border: 1px solid #e3e3e3;
	margin-bottom: 20px;
	color: #333333;
}
.recent-posts-01 .pic img {
	width: 100%;
}
.recent-posts-01 .title {
	font-size: 18px;
	line-height: 23px;
	margin: 60px 15px 29px 15px;
	position: relative;
}
.recent-posts-01 .title a,
.recent-posts-01 .title a:link,
.recent-posts-01 .title a:active,
.recent-posts-01 .title a:visited {
	color: #333333;
}
.recent-posts-01 .title a:hover {
	color: #20a3f0;
	text-decoration: none;
}
.recent-posts-01 .title:before {
	width: 27px;
	margin: 0 0 0 -14px;
	border: 1px solid #000;
	content: "";
	position: absolute;
	left: 50%;
	bottom: -18px;
}
.recent-posts-01 span.time {
	color: #d610ce;
	display: inline-block;
	padding: 0 0 25px 0;
	line-height: 1.2;
}
.recent-posts-01 .excerpt {
	padding: 0 30px;
}
.recent-posts-01 .imginfo {
	border-top: 1px solid #e3e3e3;
	padding: 30px 0;
	margin: 32px 0 0 0;
}
.recent-posts-01 .imginfo img {
	display: inline-block;
}
.recent-posts-01 .imginfo span {
	display: inline-block;
	margin: 0 0 0 5px;
}

@media only screen and (max-width: 991px) {
.recent-posts-01 .title {
	margin-top: 30px;
}
}
.recent-posts-02 {
	margin: 0 !important;
	padding: 0;
	overflow: hidden;
}
.recent-posts-02 .item {
	color: #d610ce;
	position: relative;
	padding: 0;
	background-size: cover;
	border-right: 1px solid #dcdcdc;
	-moz-transition: color ease-in 200ms;
	-webkit-transition: color ease-in 200ms;
	-o-transition: color ease-in 200ms;
	-ms-transition: color ease-in 200ms;
	transition: color ease-in 200ms;
}
.recent-posts-02 .item:last-child {
	border: none!important;
}
.recent-posts-02 .item:after {
	content: "";
	background-color: #f8f8f8;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	-moz-transition: background-color ease-in 200ms;
	-webkit-transition: background-color ease-in 200ms;
	-ms-transition: background-color ease-in 200ms;
	-o-transition: background-color ease-in 200ms;
	transition: background-color ease-in 200ms;
}
.recent-posts-02 .imgbg-cover {
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
}
.recent-posts-02 .cont-box {
	padding: 70px 40px 160px;
}
.recent-posts-02 .cont-box > * {
	position: relative;
	z-index: 1;
}
.recent-posts-02 .title {
	font-size: 24px;
	font-weight: normal;
	margin: 0 0 90px;
	-moz-transition: color ease-in 200ms;
	-webkit-transition: color ease-in 200ms;
	-o-transition: color ease-in 200ms;
	-ms-transition: color ease-in 200ms;
	transition: color ease-in 200ms;
	position: relative;
}
.recent-posts-02 .title:after {
	content: "";
	width: 80px;
	display: block;
	position: absolute;
	bottom: -45px;
	left: 0;
	border-bottom: 2px solid #20a3f0;
	transition: border-color ease-in 200ms;
	-moz-transition: border-color ease-in 200ms;
	/* Firefox 4 */
	-webkit-transition: border-color ease-in 200ms;
	/* Safari and Chrome */
	-o-transition: border-color ease-in 200ms;
	/* Opera */
	-ms-transition: border-color ease-in 200ms;/* IE9? */
}
.recent-posts-02 .title a,
.recent-posts-02 .title a:link,
.recent-posts-02 .title a:active,
.recent-posts-02 .title a:visited {
	color: #333333;
}
.recent-posts-02 .item .title a:hover,
.recent-posts-02 .item:hover .title a:hover {
	color: #20a3f0;
	text-decoration: none;
}
.recent-posts-02 .date {
	font-style: italic;
	font-size: 14px;
}
.recent-posts-02 .footer {
	position: absolute;
	bottom: 60px;
	left: 40px;
	right: 40px;
}
.recent-posts-02 .footer:after {
	content: "";
	display: block;
	clear: both;
}
.recent-posts-02 .footer i {
	margin: 0px 6px;
	font-size: 1.2em;
	vertical-align: text-top;
}
.recent-posts-02 .footer,
.recent-posts-02 .footer a,
.recent-posts-02 .footer a:link,
.recent-posts-02 .footer a:active,
.recent-posts-02 .footer a:visited {
	color: #20a3f0;
	transition: color ease-in 200ms;
	-moz-transition: color ease-in 200ms;
	/* Firefox 4 */
	-webkit-transition: color ease-in 200ms;
	/* Safari and Chrome */
	-o-transition: color ease-in 200ms;
	/* Opera */
	-ms-transition: color ease-in 200ms;/* IE9? */
}
.recent-posts-02 .item:hover,
.recent-posts-02 .item:hover .title a {
	color: #FFF;
}
.recent-posts-02 .item:hover .title:after {
	border-color: #FFF;
}
.recent-posts-02 .item:hover:after {
	background-color: rgba(0, 0, 0, 0.85);
}
.recent-posts-02 .item:hover .title:after {
	border-color: #FFF;
}
.recent-posts-02 .postlikes.activate >i:before {
	content: "\f004";
}
.recent-posts-02 .item:hover .footer,
.recent-posts-02 .item:hover .footer a,
.recent-posts-02 .item:hover .footer a:link,
.recent-posts-02 .item:hover .footer a:active,
.recent-posts-02 .item:hover .footer a:visited {
	color: #FFF;
}
.recent-posts-02 .item:hover .footer a:hover {
	color: #20a3f0;
	text-decoration: none;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
.recent-posts-02 .cont-box {
	padding: 15px 15px 80px 15px;
}
.recent-posts-02 .title {
	font-size: 18px;
	margin-bottom: 40px;
}
.recent-posts-02 .title:after {
	bottom: -20px;
}
.recent-posts-02 .footer {
	left: 15px;
	right: 15px;
	bottom: 20px;
}
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
.recent-posts-02 .cont-box {
	padding: 15px 15px 80px 15px;
}
.recent-posts-02 .title {
	font-size: 14px;
	margin-bottom: 40px;
}
.recent-posts-02 .title:after {
	bottom: -20px;
}
.recent-posts-02 .footer {
	left: 15px;
	right: 15px;
	bottom: 20px;
}
}

@media only screen and (max-width: 767px) {
.recent-posts-02 {
	display: block;
}
.recent-posts-02 .item {
	width: 100%;
	display: block;
	border: none;
	border-bottom: 1px solid #dcdcdc;
}
.recent-posts-02 .cont-box {
	padding: 15px 15px 80px 15px;
}
.recent-posts-02 .footer {
	left: 15px;
	right: 15px;
	bottom: 20px;
}
}
.recent-posts-03 {
}
.recent-posts-03 article {
	background-color: #FFF;
	text-align: center;
	margin-bottom: 20px;
}
.recent-posts-03 .pic img {
    width: 100%;
    transition: all ease 0.3s;
}
.recent-posts-03 .cont {
    padding: 15px 15px;
    background: #f9f9f9;
    text-align: justify;
    border: 2px solid #dfdfdf;
    border-top: none;
}
.recent-posts-03 .title {
    font-size: 16px;
    color: #333333;
    line-height: 2;
    margin: 0px 0 8px 0;
    position: relative;
}
.recent-posts-03 .title a,
.recent-posts-03 .title a:link,
.recent-posts-03 .title a:active,
.recent-posts-03 .title a:visited {
	color: #1d4781;
}
.recent-posts-03 .title a:hover {
	color: #f77419;
	text-decoration: none;
}
.recent-posts-03 .info {
    color: #666;
    line-height: 1.2;
    font-size: 11px;
}
.recent-posts-03 .info:after {
    content: "";
    width: 80px;
    margin: 15px 0;
    border-bottom: 2px solid #1d4781;
    display: block;
}
.recent-posts-03 .sep {
	margin: 0 6px;
}
.recent-posts-03 .social {
	overflow: hidden;
	margin-top: 20px;
}
.recent-posts-03 .social>span {
	display: inline-block;
	position: relative;
	padding: 0 10px;
}
.recent-posts-03 .social>span:after,
.recent-posts-03 .social>span:before {
	content: "";
	position: absolute;
	left: 100%;
	top: 50%;
	width: 1000px;
	border-bottom: 1px solid #bbbbbb;
	margin-top: -1px;
}
.recent-posts-03 .social>span:before {
	left: auto;
	right: 100%;
}
.recent-posts-03 .social .fa {
	color: #000000;
	display: inline-block;
	vertical-align: middle;
	font-size: 16px;
	margin: 0 5px;
	transition: all ease-in 200ms;
	-moz-transition: all ease-in 200ms;
	/* Firefox 4 */
	-webkit-transition: all ease-in 200ms;
	/* Safari and Chrome */
	-o-transition: all ease-in 200ms;
	/* Opera */
	-ms-transition: all ease-in 200ms;/* IE9? */
}
.recent-posts-03 .social .fa:hover {
	color: #20a3f0;
}
.recent-posts-03 .more a {
	color: inherit;
	text-decoration-line: none;
}
.recent-posts-04 .pic img {
	max-width: 100%;
}
.recent-posts-04 .cont {
	padding: 25px 0;
}
.recent-posts-04 .title {
	margin: 0 0 8px;
	font-size: 18px;
}
.recent-posts-04 .title a,
.recent-posts-04 .title a:link,
.recent-posts-04 .title a:active,
.recent-posts-04 .title a:visited {
	color: #333333;
}
.recent-posts-04 .title a:hover {
	color: #20a3f0;
	text-decoration: none;
}
.recent-posts-04 .time {
	margin-bottom: 10px;
	display: block;
}
.recent-posts-04 .cont > p .fa {
	padding-right: 5px;
}
.recent-posts-04.light,
.recent-posts-04.light .title,
.recent-posts-04.light .title a,
.recent-posts-04.light .title a:link,
.recent-posts-04.light .title a:active,
.recent-posts-04.light .title a:visited {
	color: #FFF;
}
.recent-posts-04.light .excerpt,
.recent-posts-04.light .excerpt a,
.recent-posts-04.light .excerpt a:link,
.recent-posts-04.light .excerpt a:active,
.recent-posts-04.light .excerpt a:visited {
	color: #fff;
}
.recent-posts-05 article {
	margin-bottom: 15px;
	position: relative;
}
.recent-posts-05 .title {
	font-size: 18px;
	margin: 0 0 8px;
}
.recent-posts-05 .title a,
.recent-posts-05 .title a:link,
.recent-posts-05 .title a:active,
.recent-posts-05 .title a:visited {
	color: #333333;
}
.recent-posts-05 .title a:hover {
	color: #20a3f0;
	text-decoration: none;
}
.recent-posts-05 .newsbox {
	padding: 25px 20px;
	border: 1px solid #e3e3e3;
	border-top: 0;
}
.recent-posts-05 .category {
	margin: 0 -20px 20px;
	padding: 0 20px 10px;
	border-bottom: 1px solid #e3e3e3;
}
.recent-posts-05 .category a,
.recent-posts-05 .category a:link,
.recent-posts-05 .category a:active,
.recent-posts-05 .category a:visited {
	color: #666666;
}
.recent-posts-05 .sep {
	color: #cccccc;
	padding: 0px 5px;
}
.recent-posts-05 img {
	width: 100%;
}
.recent-posts-05 p {
	margin-bottom: 20px;
}
.recent-posts-05 .date {
	position: absolute;
	width: 52px;
	left: 0;
	top: 0;
	text-align: center;
}
.recent-posts-05 .date .month {
	display: block;
	height: 25px;
	line-height: 25px;
	color: #FFF;
	font-size: 14px;
	background-color: #20a3f0;
}
.recent-posts-05 .date .day {
	display: block;
	background-color: #eeeeee;
	line-height: 38px;
	font-size: 20px;
	color: #333333;
}
.recent-posts-05.light,
.recent-posts-05.light .title,
.recent-posts-05.light .title a,
.recent-posts-05.light .title a:link,
.recent-posts-05.light .title a:active,
.recent-posts-05.light .title a:visited {
	color: #FFF;
}
.recent-posts-05.light .category a,
.recent-posts-05.light .category a:link,
.recent-posts-05.light .category a:active,
.recent-posts-05.light .category a:visited {
	color: #dbdbdb;
}
.recent-posts-05.light .excerpt,
.recent-posts-05.light .excerpt a,
.recent-posts-05.light .excerpt a:link,
.recent-posts-05.light .excerpt a:active,
.recent-posts-05.light .excerpt a:visited {
	color: #fff;
}
.recent-posts-05.light .newsbox,
.recent-posts-05.light .category {
	border-color: rgba(255,255,255,0.2);
}
.recent-posts-06 article {
	margin-bottom: 20px;
}
.recent-posts-06 .pic img {
	max-width: 100%;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}
.recent-posts-06 .title {
	font-size: 18px;
	margin: 16px 0 5px;
}
.recent-posts-06 .title a,
.recent-posts-06 .title a:link,
.recent-posts-06 .title a:active,
.recent-posts-06 .title a:visited {
	color: #333333;
}
.recent-posts-06 .title a:hover {
	color: #20a3f0;
	text-decoration: none;
}
.recent-posts-06 .date {
	padding: 0 0 12px;
}
.recent-posts-06 .date .fa {
	margin-right: 5px;
}
.recent-posts-06.light,
.recent-posts-06.light .title,
.recent-posts-06.light .title a,
.recent-posts-06.light .title a:link,
.recent-posts-06.light .title a:active,
.recent-posts-06.light .title a:visited {
	color: #FFF;
}
.recent-posts-06.light .excerpt,
.recent-posts-06.light .excerpt a,
.recent-posts-06.light .excerpt a:link,
.recent-posts-06.light .excerpt a:active,
.recent-posts-06.light .excerpt a:visited {
	color: #fff;
}
.recent-posts.owl-carousel {
	width: auto;
}


.postnav-container{
	width: 1380px;
	padding-left:15px;
	padding-right:15px;
	margin-left: auto !important;
	margin-right: auto !important;
}
@media only screen and (max-width: 1599px) and (min-width: 1200px){
	.postnav-container{
		width: 1170px;
	}
}
@media only screen and (max-width: 1199px) {	
	.postnav-container{
		width: 970px;
	}	
}	
@media only screen and (max-width: 991px)  {
	.postnav-container{
		width: 750px;
	}
}
@media only screen and (max-width: 767px) {
	.postnav-container{
		width: auto;
	}
}


.recent-posts-03 article .pic {
    position: relative;
    overflow: hidden;
}
.recent-posts-03 article:hover .pic img {
    transform: scale(1.1) rotate( -5deg );
    -webkit-transform: scale(1.1) rotate( -5deg );
    -ms-transform: scale(1.1) rotate(-5deg);
}
.recent-posts-03 article .pic::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #000;
    opacity: 0;
    transition: all ease 0.3s;
    z-index:1;
}
.recent-posts-03 article:hover .pic::before {
    opacity: 0.3;
}
.lg-size {
    font-size: 16px;
}


.btn-accent, a.btn-accent {
    border-radius: 3px;
    background-color: var(--button-color1);
    min-width: 150px;
    color: #FFF;
    font-family: var(--family2);
    font-weight: 400;
    padding-bottom: 2px;
}
}

-------------------------------------------


.dng-megamenu .dnngo_slide_menu li a {
    text-decoration: none;
    text-align: left;
    padding: 0px 30px 0px 60px;
    font-size: 13px;
    display: block;
    -webkit-transition: color ease-in 200ms, background-color ease-in 200ms;
    transition: color ease-in 200ms, background-color ease-in 200ms;
}










.latest-posts-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.5rem;
  margin: 0;
}

.latest-post-col {
  flex: 1 1 calc(33.333% - 1rem);
  box-sizing: border-box;
  margin-bottom: 2rem;
  transition: transform 0.3s ease;
}

@media (max-width: 991px) {
  .latest-post-col {
    flex: 1 1 calc(50% - 1rem);
  }
}

@media (max-width: 576px) {
  .latest-post-col {
    flex: 1 1 100%;
  }
}

.latest-post-card {
  background: linear-gradient(145deg, #f5f8fc, #e3eaf5);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(100, 120, 160, 0.2);
  overflow: hidden;
  transition: all 0.35s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid #cbd6e4;
  position: relative;
}

.latest-post-card:hover {
  transform: translateY(-5px) scale(1.01);
  box-shadow: 0 10px 25px rgba(13, 110, 253, 0.3);
  border-color: #0d6efd;
}

.post-image {
  max-height: 200px;
  overflow: hidden;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  position: relative;
}

.post-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
  filter: brightness(1);
}

.latest-post-card:hover .post-image img {
  transform: scale(1.05);
}

.post-content {
  padding: 1rem 1.25rem;
  color: #333f58;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.post-title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.2rem;
  margin: 0 0 0.6rem;
  line-height: 1.4;
}

.post-title a {
  color: #0d6efd;
  text-decoration: none;
  transition: color 0.3s ease;
}

.post-title a:hover {
  color: #4a90e2;
}

/* ✅ تغییر داده شده برای وسط چین کردن آیکون و تاریخ */
.post-info {
  font-size: 0.85rem;
  color: #7a869a;
  margin-bottom: 0.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.4rem;
}

.post-info .fa {
  color: #0d6efd;
}

.post-excerpt {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #555f7a;
  margin-top: auto;
}



#dnn_ctr765_dnnTITLE_titleLabel,
.dnntitle {
    display: none !important;
}









































































/* ========================================================================
   ELIAWEB GENERAL UI SYSTEM
   Reusable visual classes derived from the existing CWP/GLD design language.
   These classes are intentionally low-specificity and can be reused site-wide.
======================================================================== */

:root {
    --eliaweb-blue: #0053a0;
    --eliaweb-blue-soft: #3d6ab3;
    --eliaweb-blue-deep: #002b57;
    --eliaweb-blue-dark: #003b75;
    --eliaweb-red: #e2231a;
    --eliaweb-red-dark: #b91813;
    --eliaweb-white: #ffffff;
    --eliaweb-text: #1d2a37;
    --eliaweb-muted: #5a6d7e;
    --eliaweb-page: #d0dbe4;
    --eliaweb-pale: #edf5fc;
    --eliaweb-border: rgba(0, 83, 160, .17);
    --eliaweb-shadow-sm: 0 10px 25px rgba(43, 66, 84, .08);
    --eliaweb-shadow-md: 0 20px 48px rgba(43, 66, 84, .13);
    --eliaweb-shadow-blue: 0 18px 40px rgba(0, 83, 160, .20);
    --eliaweb-radius-sm: 12px;
    --eliaweb-radius-md: 18px;
    --eliaweb-radius-lg: 26px;
    --eliaweb-font: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.eliaweb-theme-citywide {
    --eliaweb-primary: var(--eliaweb-blue);
    --eliaweb-primary-soft: var(--eliaweb-blue-soft);
    --eliaweb-primary-deep: var(--eliaweb-blue-deep);
    --eliaweb-accent: var(--eliaweb-red);
    --eliaweb-accent-dark: var(--eliaweb-red-dark);
}

.eliaweb-page,
.eliaweb-page * {
    box-sizing: border-box;
}

.eliaweb-page {
    color: var(--eliaweb-text);
    font-family: var(--eliaweb-font);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.eliaweb-section {
    position: relative;
    isolation: isolate;
    width: 100%;
}

.eliaweb-section--light {
    background: var(--eliaweb-white);
}

.eliaweb-section--muted {
    background: var(--eliaweb-page);
}

.eliaweb-section--blue {
    color: var(--eliaweb-white);
    background:
        radial-gradient(circle at 100% 0%, rgba(255,255,255,.15), transparent 34%),
        linear-gradient(145deg, #126ab5 0%, var(--eliaweb-blue) 48%, var(--eliaweb-blue-deep) 100%);
}

.eliaweb-section-inner {
    width: min(100%, 1120px);
    margin-inline: auto;
}

.eliaweb-surface {
    background:
        radial-gradient(circle at 100% 0%, rgba(61,106,179,.07), transparent 34%),
        linear-gradient(145deg, #ffffff, #f7fafc);
    border: 1px solid var(--eliaweb-border);
    box-shadow: var(--eliaweb-shadow-md), inset 0 1px 0 #ffffff;
}

.eliaweb-radius-lg {
    border-radius: var(--eliaweb-radius-lg);
}

.eliaweb-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    color: var(--eliaweb-red);
    font-size: 11px;
    line-height: 1.3;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.eliaweb-kicker--danger {
    padding: 8px 14px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--eliaweb-red), var(--eliaweb-red-dark));
    border-radius: 999px;
}

.eliaweb-kicker--light {
    color: #ffffff;
}

.eliaweb-title {
    margin-top: 0;
    color: var(--eliaweb-blue-deep);
    line-height: 1.08;
    font-weight: 900;
    letter-spacing: -.04em;
    text-wrap: balance;
}

.eliaweb-title--hero {
    font-size: clamp(36px, 4.5vw, 56px);
}

.eliaweb-title--section {
    font-size: clamp(31px, 3.7vw, 47px);
}

.eliaweb-title--light {
    color: #ffffff;
}

.eliaweb-copy {
    min-width: 0;
}

.eliaweb-heading {
    max-width: 850px;
}

.eliaweb-heading--centre {
    margin-inline: auto;
    text-align: center;
}

.eliaweb-panel {
    position: relative;
    width: 100%;
    border-radius: var(--eliaweb-radius-lg);
}

.eliaweb-panel--external {
    overflow: hidden;
}

.eliaweb-card {
    position: relative;
    min-width: 0;
    background: linear-gradient(145deg, #ffffff, #f2f7fb);
    border: 1px solid var(--eliaweb-border);
    border-radius: var(--eliaweb-radius-md);
    box-shadow: var(--eliaweb-shadow-sm), inset 0 1px 0 #ffffff;
    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}

.eliaweb-card--compact {
    padding: 14px;
}

.eliaweb-card--service {
    overflow: hidden;
}

.eliaweb-card--price {
    display: flex;
    flex-direction: column;
}

.eliaweb-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.eliaweb-btn {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 10px 16px;
    border: 1px solid transparent;
    border-radius: var(--eliaweb-radius-sm);
    font: 850 13px/1.25 var(--eliaweb-font);
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    transition:
        color .24s ease,
        background .24s ease,
        border-color .24s ease,
        box-shadow .24s ease,
        transform .24s ease;
}

.eliaweb-btn--danger {
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--eliaweb-red), var(--eliaweb-red-dark));
    border-color: var(--eliaweb-red);
    box-shadow: 0 11px 24px rgba(226, 35, 26, .22);
}

.eliaweb-btn--secondary {
    color: var(--eliaweb-blue-deep) !important;
    background: #ffffff;
    border-color: rgba(0, 83, 160, .20);
}

.eliaweb-btn--light {
    color: var(--eliaweb-blue-deep) !important;
    background: #ffffff;
    border-color: #ffffff;
}

.eliaweb-btn--ghost {
    color: #ffffff !important;
    background: rgba(255,255,255,.09);
    border-color: rgba(255,255,255,.30);
}

.eliaweb-icon-btn {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

.eliaweb-note {
    padding: 16px 18px;
    color: #465b6d;
    background: linear-gradient(145deg, #edf6fd, #ffffff);
    border: 1px solid rgba(0,83,160,.20);
    border-left: 4px solid var(--eliaweb-blue);
    border-radius: 14px;
}

.eliaweb-alert {
    position: relative;
    border: 1px solid rgba(0,83,160,.25);
    border-left: 5px solid var(--eliaweb-blue);
    border-radius: var(--eliaweb-radius-md);
}

.eliaweb-alert--danger {
    border-color: rgba(226,35,26,.30);
    border-left-color: var(--eliaweb-red);
}

.eliaweb-cta {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
}

.eliaweb-cta--blue {
    color: #ffffff;
    background:
        radial-gradient(circle at 100% 0%, rgba(255,255,255,.15), transparent 35%),
        linear-gradient(145deg, #116bb7 0%, var(--eliaweb-blue) 48%, var(--eliaweb-blue-deep) 100%);
    box-shadow: 0 22px 50px rgba(0,59,117,.23);
}

.eliaweb-tabs {
    display: grid;
    gap: 8px;
}

.eliaweb-tab {
    font-family: var(--eliaweb-font);
}

.eliaweb-accordion-item {
    overflow: hidden;
}

.eliaweb-link {
    color: var(--eliaweb-blue) !important;
    font-weight: 850;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

.eliaweb-feature {
    position: relative;
    isolation: isolate;
}

.eliaweb-faq {
    position: relative;
}

@media (hover: hover) {
    .eliaweb-card:hover {
        border-color: rgba(0,83,160,.48);
        box-shadow: 0 20px 42px rgba(43,66,84,.17);
        transform: translateY(-4px);
    }

    .eliaweb-btn:hover {
        transform: translateY(-3px);
    }
}

.eliaweb-page :is(a, button, summary, [tabindex]):focus-visible {
    outline: 3px solid rgba(0,83,160,.55);
    outline-offset: 3px;
}

@media (max-width: 760px) {
    .eliaweb-heading--centre {
        text-align: left;
    }

    .eliaweb-title--hero {
        font-size: clamp(31px, 9vw, 41px);
    }

    .eliaweb-title--section {
        font-size: clamp(29px, 8vw, 38px);
    }

    .eliaweb-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .eliaweb-btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .eliaweb-page *,
    .eliaweb-page *::before,
    .eliaweb-page *::after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }
}


/* ========================================================================
   COMPONENT: GAS SAFETY CORE
======================================================================== */
/* =========================================================
   CITYWIDE PLUMBERS — CP12 & CP42 GAS SAFETY CONTENT

   Blue:      #0053a0
   Soft blue: #3d6ab3
   Deep blue: #002b57
   Red:       #e2231a
   Page:      #d0dbe4
========================================================= */

#cwp-cert-content,
#cwp-cert-content * {
    box-sizing: border-box;
}

#cwp-cert-content {
    --blue: #0053a0;
    --blue-soft: #3d6ab3;
    --blue-deep: #002b57;
    --blue-dark: #003b75;
    --red: #e2231a;
    --red-dark: #b91813;
    --white: #ffffff;
    --text: #1d2a37;
    --muted: #5a6d7e;
    --page: #d0dbe4;
    --pale: #edf5fc;

    position: relative !important;
    isolation: isolate;

    display: block !important;

    width: 100% !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: clamp(36px, 5vw, 70px) 0 !important;

    overflow: hidden !important;

    color: var(--text);

    background:
        radial-gradient(circle at 8% 2%, rgba(61,106,179,.14), transparent 30%),
        radial-gradient(circle at 94% 14%, rgba(226,35,26,.05), transparent 24%),
        var(--page) !important;
}

#cwp-cert-content::before {
    content: "";

    position: absolute;
    top: 0;
    right: 0;
    left: 0;

    height: 4px;

    background:
        linear-gradient(
            90deg,
            var(--red) 0 22%,
            var(--blue-soft) 22% 50%,
            var(--blue) 50% 100%
        );
}

#cwp-cert-content::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: .09;

    background-image:
        linear-gradient(rgba(0,83,160,.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,83,160,.07) 1px, transparent 1px);

    background-size: 46px 46px;

    -webkit-mask-image: linear-gradient(180deg, #000, transparent 75%);
    mask-image: linear-gradient(180deg, #000, transparent 75%);
}

#cwp-cert-content > .is-boxes,
#cwp-cert-content > .is-boxes > .is-container {
    position: relative !important;
    z-index: 2;

    display: block !important;

    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;

    transform: none !important;
}

#cwp-cert-content > .is-boxes > .is-container {
    max-width: 1280px !important;

    margin: 0 auto !important;
    padding: 0 24px !important;
}

#cwp-cert-content .row {
    margin: 0 !important;
}

#cwp-cert-content .col-md-12 {
    width: 100% !important;
    padding: 0 !important;
}

#cwp-cert-content .cwp-cert {
    width: 100%;

    font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;

    font-size: 16px;
    line-height: 1.7;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

#cwp-cert-content h2,
#cwp-cert-content h3,
#cwp-cert-content h4,
#cwp-cert-content p {
    margin-top: 0;
}

#cwp-cert-content a {
    overflow-wrap: anywhere;
    text-underline-offset: 3px;
}


/* =========================================================
   QUICK NAVIGATION
========================================================= */

#cwp-cert-content .cwp-cert-nav {
    display: grid;

    gap: 10px;

    margin-bottom: 24px;
    padding: 15px;

    overflow: hidden;

    background:
        linear-gradient(145deg, #ffffff, #f5f9fc);

    border: 1px solid rgba(0,83,160,.17);
    border-radius: 20px;

    box-shadow:
        0 20px 45px rgba(43,66,84,.14),
        inset 0 1px 0 #ffffff;
}

#cwp-cert-content .cwp-cert-nav__head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;

    padding: 4px 5px 13px;

    border-bottom: 1px solid #dfe9f1;
}

#cwp-cert-content .cwp-cert-nav__head span,
#cwp-cert-content .cwp-cert-nav__head strong {
    display: block;
}

#cwp-cert-content .cwp-cert-nav__head span {
    margin-bottom: 3px;

    color: var(--red);

    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

#cwp-cert-content .cwp-cert-nav__head strong {
    color: var(--blue-deep);

    font-size: 15px;
}

#cwp-cert-content .cwp-cert-nav__head small {
    padding: 6px 10px;

    color: #53687a;

    background: #edf3f8;
    border-radius: 999px;

    font-size: 11px;
    font-weight: 760;
}

#cwp-cert-content .cwp-cert-nav__tabs {
    display: grid;

    grid-template-columns: repeat(6, minmax(0, 1fr));

    gap: 8px;
}

#cwp-cert-content .cwp-cert-tab {
    position: relative;

    display: grid;

    grid-template-columns: 28px minmax(0, 1fr);

    align-items: center;

    gap: 8px;

    min-width: 0;
    min-height: 56px;

    padding: 11px 10px;

    color: #33495c;

    background: #f1f6fa;
    border: 1px solid #d8e4ed;
    border-radius: 13px;

    font-family: inherit;
    font-size: 13.5px;
    line-height: 1.25;
    font-weight: 850;
    text-align: left;

    cursor: pointer;

    transition:
        color .24s ease,
        background .24s ease,
        border-color .24s ease,
        box-shadow .24s ease,
        transform .24s ease;
}

#cwp-cert-content .cwp-cert-tab > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;

    color: var(--blue);

    background: #ffffff;
    border-radius: 8px;

    font-size: 9.5px;
    font-weight: 900;
}

#cwp-cert-content .cwp-cert-tab.is-active {
    color: #ffffff;

    background:
        linear-gradient(135deg, var(--blue-soft), var(--blue));

    border-color: var(--blue);

    box-shadow:
        0 11px 23px rgba(0,83,160,.21);
}

#cwp-cert-content .cwp-cert-tab.is-active > span {
    color: #ffffff;
    background: var(--red);
}

#cwp-cert-content .cwp-cert-nav__actions {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr))
        minmax(190px, .72fr);

    gap: 8px;
}

#cwp-cert-content .cwp-cert-nav__actions a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    min-height: 47px;

    padding: 10px 14px;

    border-radius: 11px;

    font-size: 13.5px !important;
    font-weight: 850 !important;
    text-align: center;
    text-decoration: none !important;

    transition:
        color .24s ease,
        background .24s ease,
        border-color .24s ease,
        box-shadow .24s ease,
        transform .24s ease;
}

#cwp-cert-content .cwp-cert-anchor {
    color: var(--blue-deep) !important;

    background: #ffffff;
    border: 1px solid #d5e2ec;
}

#cwp-cert-content .cwp-cert-book {
    gap: 9px;

    color: #ffffff !important;

    background:
        linear-gradient(135deg, var(--red), var(--red-dark));

    border: 1px solid var(--red);
}


/* =========================================================
   INTRO
========================================================= */

#cwp-cert-content .cwp-cert-intro {
    display: grid;

    grid-template-columns:
        minmax(0, 1.5fr)
        minmax(300px, .5fr);

    align-items: center;

    gap: clamp(28px, 4vw, 54px);

    margin-bottom: 20px;
    padding: clamp(32px, 4.8vw, 58px);

    overflow: hidden;

    background:
        radial-gradient(circle at 100% 0%, rgba(61,106,179,.10), transparent 34%),
        linear-gradient(145deg, #ffffff, #f7fafc);

    border: 1px solid rgba(0,83,160,.16);
    border-radius: 29px;

    box-shadow:
        0 24px 56px rgba(43,66,84,.14),
        inset 0 1px 0 #ffffff;
}

#cwp-cert-content .cwp-cert-kicker,
#cwp-cert-content .cwp-cert-heading > span {
    display: block;

    margin-bottom: 9px;

    color: var(--red);

    font-size: 11px;
    font-weight: 900;
    letter-spacing: .09em;
    text-transform: uppercase;
}

#cwp-cert-content .cwp-cert-intro h2 {
    margin: 0 0 17px;

    color: var(--blue-deep);

    font-size: clamp(36px, 4.5vw, 56px);
    line-height: 1.03;
    font-weight: 900;
    letter-spacing: -.045em;
}

#cwp-cert-content .cwp-cert-intro h2 strong {
    display: block;

    margin-top: 6px;

    color: var(--blue);

    font: inherit;
}

#cwp-cert-content .cwp-cert-intro p {
    margin-bottom: 0;

    color: #526779;

    font-size: 15.5px;
    line-height: 1.76;
}

#cwp-cert-content .cwp-cert-intro__points {
    display: flex;
    flex-wrap: wrap;

    gap: 9px;

    margin-top: 20px;
    padding-top: 18px;

    border-top: 1px solid #dfe9f1;
}

#cwp-cert-content .cwp-cert-intro__points span {
    position: relative;

    padding: 8px 12px 8px 31px;

    color: #344b5e;

    background: #edf5fc;
    border: 1px solid rgba(0,83,160,.13);
    border-radius: 11px;

    font-size: 13px;
    line-height: 1.45;
    font-weight: 750;
}

#cwp-cert-content .cwp-cert-intro__points span::before {
    content: "✓";

    position: absolute;
    top: 8px;
    left: 11px;

    color: var(--red);

    font-weight: 900;
}


















/* =========================================================
   TRUST, INLINE LINKS & CHILD-PAGE LINKS
========================================================= */

#cwp-cert-content .cwp-cert-inline-link {
    color: var(--blue) !important;
    font-weight: 850;
    text-decoration: underline !important;
}





#cwp-cert-content .cwp-cert-choice__link,
#cwp-cert-content .cwp-cert-panel-link {
    display: inline-flex !important;
    align-items: center;

    gap: 8px;

    color: var(--blue) !important;

    font-size: 12.5px !important;
    line-height: 1.45 !important;
    font-weight: 850 !important;
    text-decoration: none !important;
}

#cwp-cert-content .cwp-cert-choice__link {
    margin-top: 16px;
}

#cwp-cert-content .cwp-cert-panel-link {
    justify-content: center;

    min-height: 48px;

    margin-top: 17px;
    padding: 10px 15px;

    color: #ffffff !important;

    background:
        linear-gradient(135deg, var(--blue-soft), var(--blue));

    border: 1px solid var(--blue);
    border-radius: 11px;

    box-shadow:
        0 11px 24px rgba(0, 83, 160, .18);
}

#cwp-cert-content .cwp-cert-choice__link span,
#cwp-cert-content .cwp-cert-panel-link span {
    transition: transform .24s ease;
}

@media (hover: hover) {

    

    

    #cwp-cert-content .cwp-cert-choice__link:hover {
        color: var(--red) !important;
    }

    #cwp-cert-content .cwp-cert-choice__link:hover span,
    #cwp-cert-content .cwp-cert-panel-link:hover span {
        transform: translateX(4px);
    }

    #cwp-cert-content .cwp-cert-panel-link:hover {
        color: #ffffff !important;

        background:
            linear-gradient(135deg, var(--red), var(--red-dark));

        border-color: var(--red);

        box-shadow:
            0 15px 30px rgba(226, 35, 26, .25);

        transform: translateY(-3px);
    }

}

/* =========================================================
   PANELS
========================================================= */

#cwp-cert-content .cwp-cert-panel,
#cwp-cert-content .cwp-cert-related {
    position: relative;

    margin-top: 18px;
    padding: clamp(30px, 4.3vw, 48px);

    overflow: hidden;

    background:
        radial-gradient(circle at 100% 0%, rgba(61,106,179,.055), transparent 31%),
        linear-gradient(145deg, #ffffff, #f8fbfd);

    border: 1px solid rgba(0,83,160,.16);
    border-radius: 26px;

    box-shadow:
        0 20px 48px rgba(43,66,84,.12),
        inset 0 1px 0 #ffffff;
}

#cwp-cert-content .cwp-cert-panel::before,
#cwp-cert-content .cwp-cert-related::before {
    content: "";

    position: absolute;
    top: 0;
    right: 18px;
    left: 18px;

    height: 4px;

    border-radius: 0 0 999px 999px;

    background:
        linear-gradient(90deg, var(--blue-soft), var(--blue));
}

#cwp-cert-content .cwp-cert-tab-panel[hidden] {
    display: none !important;
}

#cwp-cert-content .cwp-cert-heading {
    max-width: 850px;

    margin-bottom: 27px;
}

#cwp-cert-content .cwp-cert-heading--center {
    margin-right: auto;
    margin-left: auto;

    text-align: center;
}

#cwp-cert-content .cwp-cert-heading h3 {
    margin: 0 0 11px;

    color: var(--blue-deep);

    font-size: clamp(31px, 3.7vw, 43px);
    line-height: 1.09;
    font-weight: 890;
    letter-spacing: -.038em;
}

#cwp-cert-content .cwp-cert-heading p {
    margin-bottom: 0;

    color: var(--muted);

    font-size: 15px;
    line-height: 1.72;
}


/* =========================================================
   SHARED GRIDS
========================================================= */

#cwp-cert-content .cwp-cert-grid {
    display: grid;

    gap: 14px;
}

#cwp-cert-content .cwp-cert-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

#cwp-cert-content .cwp-cert-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

#cwp-cert-content .cwp-cert-grid article,
#cwp-cert-content .cwp-cert-process li {
    position: relative;

    padding: 21px;

    overflow: hidden;

    background:
        linear-gradient(145deg, #ffffff, #f1f7fb);

    border: 1px solid rgba(0,83,160,.15);
    border-radius: 17px;

    box-shadow:
        0 10px 25px rgba(43,66,84,.07),
        inset 0 1px 0 #ffffff;

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}

#cwp-cert-content .cwp-cert-grid article > b,
#cwp-cert-content .cwp-cert-process li > b {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    margin-bottom: 15px;

    color: #ffffff;

    background:
        linear-gradient(135deg, var(--blue-soft), var(--blue));

    border-radius: 12px;

    font-size: 11px;
    font-weight: 900;
}

#cwp-cert-content .cwp-cert-grid article > span {
    display: block;

    margin-bottom: 7px;

    color: var(--red);

    font-size: 10.5px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

#cwp-cert-content .cwp-cert-grid h4,
#cwp-cert-content .cwp-cert-process h4 {
    margin: 0 0 7px;

    color: var(--blue-deep);

    font-size: 18px;
    line-height: 1.34;
}

#cwp-cert-content .cwp-cert-grid p,
#cwp-cert-content .cwp-cert-process p {
    margin: 0;

    color: var(--muted);

    font-size: 13.5px;
    line-height: 1.68;
}

#cwp-cert-content .cwp-cert-grid a,
#cwp-cert-content .cwp-cert-split a,
#cwp-cert-content .cwp-cert-note a {
    color: var(--blue) !important;

    font-weight: 850;
    text-decoration: underline;
}


/* =========================================================
   CHOICE CARDS
========================================================= */

#cwp-cert-content .cwp-cert-choice-grid {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 16px;
}

#cwp-cert-content .cwp-cert-choice {
    display: grid;

    grid-template-columns: 86px minmax(0, 1fr);

    gap: 19px;

    padding: 24px;

    background:
        linear-gradient(145deg, #ffffff, #edf5fc);

    border: 1px solid rgba(0,83,160,.18);
    border-radius: 19px;

    box-shadow:
        0 13px 31px rgba(43,66,84,.09),
        inset 0 1px 0 #ffffff;
}

#cwp-cert-content .cwp-cert-choice--commercial {
    background:
        linear-gradient(145deg, #f6f9fc, #e6eff7);
}

#cwp-cert-content .cwp-cert-choice__code {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 86px;
    height: 86px;

    color: #ffffff;

    background:
        linear-gradient(135deg, var(--blue-soft), var(--blue));

    border-radius: 20px;

    box-shadow:
        0 13px 27px rgba(0,83,160,.20);

    font-size: 22px;
    font-weight: 900;
}

#cwp-cert-content .cwp-cert-choice--commercial .cwp-cert-choice__code {
    background:
        linear-gradient(135deg, var(--blue), var(--blue-deep));
}

#cwp-cert-content .cwp-cert-choice__label {
    display: block;

    margin-bottom: 5px;

    color: var(--red);

    font-size: 10.5px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

#cwp-cert-content .cwp-cert-choice h4 {
    margin: 0 0 8px;

    color: var(--blue-deep);

    font-size: 20px;
}

#cwp-cert-content .cwp-cert-choice p {
    margin-bottom: 13px;

    color: var(--muted);

    font-size: 13.5px;
    line-height: 1.67;
}

#cwp-cert-content .cwp-cert-choice ul {
    display: grid;

    gap: 7px;

    margin: 0;
    padding: 0;

    list-style: none;
}

#cwp-cert-content .cwp-cert-choice li {
    position: relative;

    padding-left: 19px;

    color: #455b6e;

    font-size: 12.5px;
    line-height: 1.55;
}

#cwp-cert-content .cwp-cert-choice li::before {
    content: "✓";

    position: absolute;
    left: 0;

    color: var(--red);

    font-weight: 900;
}


/* =========================================================
   DUTIES, NOTES, SPLITS
========================================================= */

#cwp-cert-content .cwp-cert-duty-grid strong {
    display: block;

    min-height: 52px;

    margin-bottom: 12px;

    color: var(--blue);

    font-size: clamp(20px, 2.1vw, 27px);
    line-height: 1.07;
}

#cwp-cert-content .cwp-cert-note {
    margin-top: 17px;
    padding: 17px 19px;

    color: #465b6d;

    background:
        linear-gradient(145deg, #edf6fd, #ffffff);

    border: 1px solid rgba(0,83,160,.20);
    border-left: 4px solid var(--blue);
    border-radius: 14px;

    font-size: 13.5px;
    line-height: 1.68;
}

#cwp-cert-content .cwp-cert-note strong {
    color: var(--blue-deep);
}

#cwp-cert-content .cwp-cert-split {
    display: grid;

    grid-template-columns:
        minmax(230px, .65fr)
        minmax(0, 1.35fr);

    align-items: center;

    gap: 25px;

    margin-top: 17px;
    padding: 22px;

    background:
        linear-gradient(145deg, #edf5fc, #ffffff);

    border: 1px solid rgba(0,83,160,.18);
    border-left: 4px solid var(--blue-soft);
    border-radius: 16px;
}

#cwp-cert-content .cwp-cert-split span {
    display: block;

    margin-bottom: 5px;

    color: var(--red);

    font-size: 10.5px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

#cwp-cert-content .cwp-cert-split h4 {
    margin: 0;

    color: var(--blue-deep);

    font-size: 20px;
}

#cwp-cert-content .cwp-cert-split p {
    margin: 0;

    color: var(--muted);

    font-size: 13.5px;
    line-height: 1.7;
}


/* =========================================================
   SCOPE TABLE
========================================================= */

#cwp-cert-content .cwp-cert-table-mobile-hint,
#cwp-cert-content .cwp-cert-table-scroll-control {
    display: none;
}

#cwp-cert-content .cwp-cert-scope-table-wrap {
    position: relative;

    width: 100%;

    border-radius: 17px;

    outline: none;
}

#cwp-cert-content .cwp-cert-scope-table-wrap:focus-visible {
    outline: 3px solid rgba(0, 83, 160, .45);
    outline-offset: 4px;
}

#cwp-cert-content .cwp-cert-scope-table {
    width: 100%;

    overflow: hidden;

    border: 1px solid rgba(0,83,160,.17);
    border-radius: 17px;

    box-shadow:
        0 11px 27px rgba(43,66,84,.07);
}

#cwp-cert-content .cwp-cert-scope-table > div {
    display: grid;

    grid-template-columns:
        minmax(160px, .7fr)
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 1px;

    background: #d6e4ee;
}

#cwp-cert-content .cwp-cert-scope-table > div > * {
    padding: 14px 16px;

    background: #ffffff;
}

#cwp-cert-content .cwp-cert-scope-table__head > * {
    color: #ffffff;

    background:
        linear-gradient(135deg, var(--blue-soft), var(--blue)) !important;

    font-size: 13px;
}

#cwp-cert-content .cwp-cert-scope-table span {
    color: var(--blue-deep);

    font-size: 13.5px;
    font-weight: 850;
}

#cwp-cert-content .cwp-cert-scope-table b {
    color: var(--muted);

    font-size: 12.75px;
    line-height: 1.55;
    font-weight: 650;
}


/* =========================================================
   PROCESS & EMERGENCY
========================================================= */

#cwp-cert-content .cwp-cert-process {
    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 13px;

    margin: 0;
    padding: 0;

    list-style: none;
}

#cwp-cert-content .cwp-cert-process li > b {
    border-radius: 50%;
}

#cwp-cert-content .cwp-cert-emergency {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 22px;

    margin-top: 18px;
    padding: 22px;

    background:
        radial-gradient(circle at 100% 0%, rgba(226,35,26,.10), transparent 35%),
        linear-gradient(145deg, #fff2f1, #ffffff);

    border: 1px solid rgba(226,35,26,.30);
    border-left: 5px solid var(--red);
    border-radius: 17px;
}

#cwp-cert-content .cwp-cert-emergency > div > span {
    display: block;

    margin-bottom: 4px;

    color: var(--red);

    font-size: 10.5px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

#cwp-cert-content .cwp-cert-emergency strong {
    display: block;

    margin-bottom: 6px;

    color: #70211c;

    font-size: 19px;
}

#cwp-cert-content .cwp-cert-emergency p {
    margin: 0;

    color: #65504e;

    font-size: 13.5px;
    line-height: 1.68;
}

#cwp-cert-content .cwp-cert-emergency p a {
    color: var(--blue) !important;
    font-weight: 850;
}

#cwp-cert-content .cwp-cert-emergency > a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    gap: 9px;

    min-width: 205px;
    min-height: 50px;

    padding: 11px 16px;

    color: #ffffff !important;

    background:
        linear-gradient(135deg, var(--red), var(--red-dark));

    border-radius: 13px;

    font-size: 13px !important;
    font-weight: 880 !important;
    text-decoration: none !important;
}


/* =========================================================
   PRICING — FIXED LAYOUT
========================================================= */

#cwp-cert-content .cwp-cert-panel--pricing {
    overflow: visible;
}

#cwp-cert-content .cwp-cert-prices {
    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    align-items: stretch;

    gap: 16px;

    padding-top: 18px;
}

#cwp-cert-content .cwp-price-card {
    position: relative;

    display: flex;
    flex-direction: column;

    width: 100%;
    min-width: 0;
    min-height: 438px;
    height: 100%;

    padding: 28px 22px 21px;

    overflow: visible;

    background:
        linear-gradient(150deg, #ffffff, #f3f8fc);

    border: 1px solid rgba(0,83,160,.18);
    border-radius: 22px;

    box-shadow:
        0 16px 37px rgba(43,66,84,.12),
        inset 0 1px 0 #ffffff;
}

#cwp-cert-content .cwp-price-card--meter {
    border-color: rgba(226, 35, 26, .28);

    background:
        radial-gradient(circle at 100% 0%, rgba(226,35,26,.08), transparent 35%),
        linear-gradient(150deg, #ffffff, #fff7f6);
}

#cwp-cert-content .cwp-price-card--meter .cwp-price-card__type {
    color: var(--red-dark);

    background: #fff0ef;
}

#cwp-cert-content .cwp-price-card--meter .cwp-price-card__scope {
    color: var(--red-dark);

    font-weight: 800;
}

#cwp-cert-content .cwp-price-card--featured {
    border: 2px solid var(--blue);

    background:
        radial-gradient(circle at 100% 0%, rgba(61,106,179,.12), transparent 35%),
        linear-gradient(150deg, #ffffff, #edf5fc);

    box-shadow:
        0 20px 45px rgba(0,83,160,.17),
        inset 0 1px 0 #ffffff;
}

#cwp-cert-content .cwp-price-card__popular {
    position: absolute;
    z-index: 5;

    top: -15px;
    left: 50%;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 29px;

    padding: 6px 13px;

    color: #ffffff;

    background:
        linear-gradient(135deg, var(--red), var(--red-dark));

    border-radius: 999px;

    box-shadow:
        0 9px 19px rgba(226,35,26,.21);

    font-size: 9px;
    font-weight: 900;
    letter-spacing: .07em;
    text-transform: uppercase;
    white-space: nowrap;

    transform: translateX(-50%);
}

#cwp-cert-content .cwp-price-card__type {
    display: inline-flex;
    align-self: center;
    align-items: center;
    justify-content: center;

    min-height: 38px;

    margin-bottom: 19px;
    padding: 8px 16px;

    color: var(--blue);

    background: #e8f1f9;
    border-radius: 999px;

    font-size: 13px;
    font-weight: 850;
    text-align: center;
}

#cwp-cert-content .cwp-price-card__price {
    display: flex;
    align-items: flex-start;
    justify-content: center;

    min-height: 74px;

    margin-bottom: 13px;

    color: var(--blue-deep);

    line-height: 1;
    white-space: nowrap;
}

#cwp-cert-content .cwp-price-card__price sup {
    position: relative;
    top: 12px;

    margin-right: 2px;

    font-size: 21px;
    font-weight: 900;
}

#cwp-cert-content .cwp-price-card__price strong {
    font-size: clamp(48px, 4.4vw, 62px);
    font-weight: 520;
    letter-spacing: -.055em;
}

#cwp-cert-content .cwp-price-card__price small {
    position: relative;
    top: 13px;

    margin-left: 3px;

    font-size: 20px;
    font-weight: 650;
}

#cwp-cert-content .cwp-price-card h4 {
    margin: 0 0 10px;

    color: var(--blue-deep);

    font-size: 16.5px;
    line-height: 1.35;
    text-align: center;
}

#cwp-cert-content .cwp-price-card > p {
    flex: 1 1 auto;

    min-height: 104px;

    margin-bottom: 18px;

    color: var(--muted);

    font-size: 13px;
    line-height: 1.65;
    text-align: center;
}

#cwp-cert-content .cwp-price-card > a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 50px;

    margin-top: auto;
    padding: 11px 14px;

    color: #ffffff !important;

    background:
        linear-gradient(135deg, var(--red), var(--red-dark));

    border: 1px solid var(--red);
    border-radius: 11px;

    box-shadow:
        0 11px 23px rgba(226,35,26,.20);

    font-size: 13.5px !important;
    font-weight: 880 !important;
    text-decoration: none !important;
}

#cwp-cert-content .cwp-price-card > a::after {
    content: "→";

    margin-left: 9px;

    font-size: 17px;
}

#cwp-cert-content .cwp-price-card__scope {
    display: block;

    margin-top: 14px;

    color: #6d7f8f;

    font-size: 11.5px;
    line-height: 1.5;
    text-align: center;
}

#cwp-cert-content .cwp-cert-disclaimer {
    position: relative;
    z-index: 2;

    max-width: 900px;

    margin: 26px auto 0;

    color: var(--muted);

    font-size: 12px;
    line-height: 1.65;
    text-align: center;
}


/* =========================================================
   CP42 QUOTE
========================================================= */

#cwp-cert-content .cwp-cp42-quote {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 25px;

    margin-top: 22px;
    padding: 27px;

    color: #ffffff;

    background:
        radial-gradient(circle at 100% 0%, rgba(255,255,255,.14), transparent 35%),
        linear-gradient(145deg, #116bb7, var(--blue), var(--blue-deep));

    border-radius: 20px;

    box-shadow:
        0 20px 46px rgba(0,59,117,.22);
}

#cwp-cert-content .cwp-cp42-quote__copy > span {
    display: block;

    margin-bottom: 5px;

    font-size: 10.5px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

#cwp-cert-content .cwp-cp42-quote h4 {
    margin: 0 0 8px;

    color: #ffffff;

    font-size: 25px;
    line-height: 1.22;
}

#cwp-cert-content .cwp-cp42-quote p {
    max-width: 760px;

    margin: 0;

    color: rgba(255,255,255,.76);

    font-size: 13.5px;
    line-height: 1.67;
}

#cwp-cert-content .cwp-cp42-quote__points {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;

    margin-top: 15px;
}

#cwp-cert-content .cwp-cp42-quote__points span {
    padding: 6px 9px;

    color: rgba(255,255,255,.88);

    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 9px;

    font-size: 11px;
}

#cwp-cert-content .cwp-cp42-quote__actions {
    display: grid;

    gap: 9px;

    width: 220px;
}

#cwp-cert-content .cwp-cp42-quote__actions a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    min-height: 49px;

    padding: 11px 14px;

    border-radius: 11px;

    font-size: 12.5px !important;
    font-weight: 850 !important;
    text-decoration: none !important;
}

#cwp-cert-content .cwp-cp42-quote__primary {
    color: var(--blue-deep) !important;

    background: #ffffff;
}

#cwp-cert-content .cwp-cp42-quote__secondary {
    color: #ffffff !important;

    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.28);
}


/* =========================================================
   RELATED & CTA
========================================================= */

#cwp-cert-content .cwp-cert-related {
    background:
        linear-gradient(145deg, #edf4f9, #ffffff);
}

#cwp-cert-content .cwp-cert-cta {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 25px;

    margin-top: 18px;
    padding: clamp(27px, 4vw, 39px);

    color: #ffffff;

    background:
        radial-gradient(circle at 100% 0%, rgba(226,35,26,.20), transparent 35%),
        linear-gradient(145deg, #116bb7, var(--blue), var(--blue-deep));

    border-radius: 22px;

    box-shadow:
        0 22px 50px rgba(0,59,117,.23);
}

#cwp-cert-content .cwp-cert-cta > div:first-child > span {
    display: block;

    margin-bottom: 5px;

    font-size: 10.5px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

#cwp-cert-content .cwp-cert-cta h3 {
    margin: 0 0 7px;

    color: #ffffff;

    font-size: clamp(25px, 3vw, 35px);
}

#cwp-cert-content .cwp-cert-cta p {
    margin: 0;

    color: rgba(255,255,255,.75);

    font-size: 13.5px;
    line-height: 1.65;
}

#cwp-cert-content .cwp-cert-cta > div:last-child {
    display: grid;

    gap: 9px;

    width: 220px;
}

#cwp-cert-content .cwp-cert-cta a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    min-height: 49px;

    padding: 11px 14px;

    border-radius: 11px;

    font-size: 12.5px !important;
    font-weight: 850 !important;
    text-decoration: none !important;
}

#cwp-cert-content .cwp-cert-cta__primary {
    color: #ffffff !important;

    background:
        linear-gradient(135deg, var(--red), var(--red-dark));
}

#cwp-cert-content .cwp-cert-cta__secondary {
    color: #ffffff !important;

    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.28);
}


/* =========================================================
   HOVER
========================================================= */

@media (hover: hover) {

    #cwp-cert-content .cwp-cert-tab:hover {
        color: var(--blue);

        background: #ffffff;
        border-color: rgba(0,83,160,.50);

        box-shadow:
            0 12px 25px rgba(0,83,160,.13);

        transform: translateY(-3px);
    }

    #cwp-cert-content .cwp-cert-tab.is-active:hover {
        color: var(--blue);

        background: #ffffff;
    }

    #cwp-cert-content .cwp-cert-anchor:hover {
        color: #ffffff !important;

        background:
            linear-gradient(135deg, var(--blue-soft), var(--blue));

        border-color: var(--blue);

        transform: translateY(-3px);
    }

    #cwp-cert-content .cwp-cert-book:hover {
        color: #ffffff !important;

        box-shadow:
            0 15px 29px rgba(226,35,26,.29);

        transform: translateY(-3px);
    }

    #cwp-cert-content .cwp-cert-grid article:hover,
    #cwp-cert-content .cwp-cert-process li:hover,
    #cwp-cert-content .cwp-cert-choice:hover,
    #cwp-cert-content .cwp-price-card:hover {
        border-color: rgba(0,83,160,.48);

        box-shadow:
            0 20px 42px rgba(43,66,84,.17),
            -8px 0 20px rgba(61,106,179,.06),
            8px 0 20px rgba(0,83,160,.04);

        transform: translateY(-4px);
    }

    #cwp-cert-content .cwp-price-card > a:hover,
    #cwp-cert-content .cwp-cert-cta__primary:hover {
        color: #ffffff !important;

        background:
            linear-gradient(135deg, var(--blue-soft), var(--blue));

        border-color: var(--blue);

        transform: translateY(-3px);
    }

    #cwp-cert-content .cwp-cp42-quote__primary:hover {
        color: #ffffff !important;

        background:
            linear-gradient(135deg, var(--blue-soft), var(--blue-deep));

        transform: translateY(-3px);
    }

    #cwp-cert-content .cwp-cp42-quote__secondary:hover,
    #cwp-cert-content .cwp-cert-cta__secondary:hover {
        color: var(--blue-deep) !important;

        background: #ffffff;
        border-color: #ffffff;

        transform: translateY(-3px);
    }

}

#cwp-cert-content button:focus-visible,
#cwp-cert-content a:focus-visible,
#cwp-cert-content [tabindex="0"]:focus-visible {
    outline: 3px solid rgba(0,83,160,.55);
    outline-offset: 3px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1080px) {

    #cwp-cert-content .cwp-cert-intro {
        grid-template-columns: 1fr;
    }

    #cwp-cert-content .cwp-cert-nav__tabs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #cwp-cert-content .cwp-cert-choice-grid {
        grid-template-columns: 1fr;
    }

    #cwp-cert-content .cwp-cert-grid--4,
    #cwp-cert-content .cwp-cert-prices {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #cwp-cert-content .cwp-cert-process {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 760px) {

    #cwp-cert-content {
        padding: 28px 0 !important;
    }

    #cwp-cert-content > .is-boxes > .is-container {
        padding-right: 12px !important;
        padding-left: 12px !important;
    }

    #cwp-cert-content .cwp-cert-nav {
        padding: 10px;
    }

    #cwp-cert-content .cwp-cert-nav__head small {
        display: none;
    }

    #cwp-cert-content .cwp-cert-nav__tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #cwp-cert-content .cwp-cert-nav__actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #cwp-cert-content .cwp-cert-book {
        grid-column: 1 / -1;
    }

    #cwp-cert-content .cwp-cert-intro {
        padding: 27px 18px;

        border-radius: 22px;
    }

    #cwp-cert-content .cwp-cert-intro h2 {
        font-size: clamp(31px, 9vw, 41px);
    }

    #cwp-cert-content .cwp-cert-panel,
    #cwp-cert-content .cwp-cert-related {
        padding: 25px 17px;

        border-radius: 21px;
    }

    #cwp-cert-content .cwp-cert-heading--center {
        text-align: left;
    }

    #cwp-cert-content .cwp-cert-grid--3,
    #cwp-cert-content .cwp-cert-grid--4,
    #cwp-cert-content .cwp-cert-process,
    #cwp-cert-content .cwp-cert-prices {
        grid-template-columns: 1fr;
    }

    #cwp-cert-content .cwp-cert-choice {
        grid-template-columns: 1fr;
    }

    #cwp-cert-content .cwp-cert-choice__code {
        width: 74px;
        height: 74px;
    }

    #cwp-cert-content .cwp-cert-split {
        grid-template-columns: 1fr;
    }

    #cwp-cert-content .cwp-cert-emergency,
    #cwp-cert-content .cwp-cp42-quote,
    #cwp-cert-content .cwp-cert-cta {
        grid-template-columns: 1fr;
    }

    #cwp-cert-content .cwp-cert-emergency > a,
    #cwp-cert-content .cwp-cp42-quote__actions,
    #cwp-cert-content .cwp-cert-cta > div:last-child {
        width: 100%;
        min-width: 0;
    }

    #cwp-cert-content .cwp-price-card {
        min-height: 0;
    }

    #cwp-cert-content .cwp-price-card > p {
        min-height: 0;
    }

}

@media (max-width: 460px) {

    #cwp-cert-content .cwp-cert-nav__tabs,
    #cwp-cert-content .cwp-cert-nav__actions {
        grid-template-columns: 1fr;
    }

    #cwp-cert-content .cwp-cert-book {
        grid-column: auto;
    }

    #cwp-cert-content .cwp-cert-tab {
        min-height: 52px;
    }

    #cwp-cert-content .cwp-cert-heading h3 {
        font-size: 29px;
    }

    #cwp-cert-content .cwp-price-card__price strong {
        font-size: 56px;
    }

}

@media (prefers-reduced-motion: reduce) {

    #cwp-cert-content * {
        transition: none !important;
    }

}


/* =========================================================
   FINAL CONTENT FOCUS UPDATES
========================================================= */

#cwp-cert-content .cwp-cert-nav__tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

#cwp-cert-content .cwp-cert-intro--single {
    display: block;

    padding: clamp(31px, 4.5vw, 52px);
}

#cwp-cert-content .cwp-cert-intro--single .cwp-cert-intro__copy {
    width: 100%;
    max-width: 980px;

    margin: 0 auto;
}

#cwp-cert-content .cwp-cert-coverage {
    margin-top: 14px !important;
    padding: 14px 16px;

    color: #445b6e !important;

    background:
        linear-gradient(
            145deg,
            #edf5fc,
            #ffffff
        );

    border: 1px solid rgba(0, 83, 160, .17);
    border-left: 4px solid var(--blue);
    border-radius: 13px;

    font-size: 13.5px !important;
    line-height: 1.65 !important;
}

#cwp-cert-content .cwp-cert-choice-grid--compact .cwp-cert-choice {
    align-items: center;
}

#cwp-cert-content .cwp-cert-choice-grid--compact .cwp-cert-choice p {
    margin-bottom: 0;
}

#cwp-cert-content .cwp-cert-choice-grid--compact .cwp-cert-choice__link {
    margin-top: 12px;
}

@media (max-width: 1080px) {

    #cwp-cert-content .cwp-cert-nav__tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 760px) {

    #cwp-cert-content .cwp-cert-intro--single {
        padding: 26px 17px;
    }

    #cwp-cert-content .cwp-cert-coverage {
        padding: 12px 13px;

        font-size: 12.75px !important;
    }

}

@media (max-width: 460px) {

    #cwp-cert-content .cwp-cert-nav__tabs {
        grid-template-columns: 1fr;
    }

}



/* =========================================================
   MOBILE SCROLLABLE TABLE
========================================================= */

@media (max-width: 760px) {

    #cwp-cert-content .cwp-cert-table-mobile-hint {
        display: flex;
        align-items: center;

        gap: 11px;

        width: 100%;

        margin: 0 0 12px;
        padding: 11px 13px;

        color: var(--blue-deep);

        background:
            linear-gradient(
                145deg,
                #ffffff,
                #edf5fc
            );

        border: 1px solid rgba(0, 83, 160, .25);
        border-left: 4px solid var(--red);
        border-radius: 13px;

        box-shadow:
            0 10px 24px rgba(0, 59, 117, .11),
            inset 0 1px 0 #ffffff;
    }

    #cwp-cert-content .cwp-cert-table-mobile-hint__icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        width: 40px;
        height: 34px;

        flex: 0 0 40px;

        color: #ffffff;

        background:
            linear-gradient(
                135deg,
                var(--red),
                var(--red-dark)
            );

        border-radius: 10px;

        box-shadow:
            0 8px 17px rgba(226, 35, 26, .22);
    }

    #cwp-cert-content .cwp-cert-table-mobile-hint__icon svg {
        width: 25px;
        height: 16px;

        fill: none;
        stroke: currentColor;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;

        animation:
            cwp-cert-table-swipe 1.2s ease-in-out infinite;
    }

    #cwp-cert-content .cwp-cert-table-mobile-hint__copy {
        display: flex;
        flex-direction: column;

        min-width: 0;
    }

    #cwp-cert-content .cwp-cert-table-mobile-hint__copy strong {
        margin-bottom: 2px;

        color: var(--blue-deep);

        font-size: 12px;
        line-height: 1.35;
        font-weight: 880;
    }

    #cwp-cert-content .cwp-cert-table-mobile-hint__copy small {
        color: #5b6f80;

        font-size: 10.75px;
        line-height: 1.45;
        font-weight: 720;
    }

    #cwp-cert-content .cwp-cert-scope-table-wrap {
        position: relative;

        overflow-x: auto;
        overflow-y: hidden;

        padding: 0 0 4px;

        border: 1px solid rgba(0, 83, 160, .16);
        border-radius: 17px;

        background: #ffffff;

        -webkit-overflow-scrolling: touch;
        overscroll-behavior-inline: contain;
        scroll-behavior: smooth;
        scrollbar-width: none;

        cursor: grab;
        touch-action: pan-x pan-y;
    }

    #cwp-cert-content .cwp-cert-scope-table-wrap:active {
        cursor: grabbing;
    }

    #cwp-cert-content .cwp-cert-scope-table-wrap::-webkit-scrollbar {
        display: none;
    }

    #cwp-cert-content .cwp-cert-scope-table {
        width: 720px;
        min-width: 720px;

        border: 0;
        border-radius: 16px;

        box-shadow: none;
    }

    #cwp-cert-content .cwp-cert-scope-table > div {
        min-width: 720px;
    }

    #cwp-cert-content .cwp-cert-table-scroll-control {
        display: grid;

        grid-template-columns:
            28px
            minmax(0, 1fr)
            28px;

        align-items: center;

        gap: 7px;

        width: 100%;

        margin-top: 10px;
        padding: 10px 11px 9px;

        background:
            linear-gradient(
                145deg,
                #edf5fc,
                #ffffff
            );

        border: 1px solid rgba(0, 83, 160, .22);
        border-radius: 13px;

        box-shadow:
            0 9px 21px rgba(0, 59, 117, .08),
            inset 0 1px 0 #ffffff;

        user-select: none;
        -webkit-user-select: none;
    }

    #cwp-cert-content .cwp-cert-table-scroll-control__arrow {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        width: 28px;
        height: 28px;

        color: #ffffff;

        background:
            linear-gradient(
                135deg,
                var(--blue-soft),
                var(--blue)
            );

        border-radius: 50%;

        box-shadow:
            0 7px 15px rgba(0, 83, 160, .18);

        font-size: 15px;
        line-height: 1;
        font-weight: 900;
    }

    #cwp-cert-content .cwp-cert-table-scroll-control__track {
        position: relative;

        width: 100%;
        height: 16px;

        overflow: hidden;

        background:
            linear-gradient(
                180deg,
                #dbe8f2,
                #edf4f9
            );

        border: 1px solid rgba(0, 83, 160, .18);
        border-radius: 999px;

        box-shadow:
            inset 0 2px 5px rgba(0, 59, 117, .10);

        cursor: ew-resize;
        touch-action: none;
    }

    #cwp-cert-content .cwp-cert-table-scroll-control__track::before {
        content: "";

        position: absolute;
        top: 50%;
        right: 7px;
        left: 7px;

        height: 2px;

        background:
            repeating-linear-gradient(
                90deg,
                rgba(0, 83, 160, .24) 0 7px,
                transparent 7px 12px
            );

        transform: translateY(-50%);
    }

    #cwp-cert-content .cwp-cert-table-scroll-control__thumb {
        position: absolute;
        z-index: 2;

        top: 2px;
        left: 2px;

        width: 42%;
        min-width: 56px;
        height: 11px;

        background:
            linear-gradient(
                90deg,
                var(--red),
                #f34a42
            );

        border-radius: 999px;

        box-shadow:
            0 3px 8px rgba(185, 24, 19, .25),
            inset 0 1px 0 rgba(255, 255, 255, .24);

        transform: translateX(0);
        will-change: transform;

        cursor: grab;
        touch-action: none;

        animation:
            cwp-cert-scroll-thumb-intro 1.8s ease-in-out 2;
    }

    #cwp-cert-content .cwp-cert-table-scroll-control.is-ready
    .cwp-cert-table-scroll-control__thumb {
        animation: none;
    }

    #cwp-cert-content .cwp-cert-table-scroll-control__thumb:active {
        cursor: grabbing;
    }

    #cwp-cert-content .cwp-cert-table-scroll-control__label {
        grid-column: 1 / -1;

        display: block;

        margin-top: 1px;

        color: #53697b;

        font-size: 10.5px;
        line-height: 1.35;
        font-weight: 800;
        text-align: center;
    }

}

@media (max-width: 420px) {

    #cwp-cert-content .cwp-cert-table-mobile-hint {
        padding: 10px 11px;
    }

    #cwp-cert-content .cwp-cert-table-mobile-hint__copy strong {
        font-size: 11.5px;
    }

    #cwp-cert-content .cwp-cert-table-mobile-hint__copy small,
    #cwp-cert-content .cwp-cert-table-scroll-control__label {
        font-size: 10px;
    }

    #cwp-cert-content .cwp-cert-table-scroll-control {
        grid-template-columns:
            26px
            minmax(0, 1fr)
            26px;

        gap: 6px;

        padding-right: 9px;
        padding-left: 9px;
    }

    #cwp-cert-content .cwp-cert-table-scroll-control__arrow {
        width: 26px;
        height: 26px;
    }

}

@keyframes cwp-cert-scroll-thumb-intro {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(22px);
    }

}

@keyframes cwp-cert-table-swipe {

    0%,
    100% {
        transform: translateX(-3px);
    }

    50% {
        transform: translateX(3px);
    }

}


/* ========================================================================
   COMPONENT: WHY IT MATTERS
======================================================================== */
/* =========================================================
   CITYWIDE PLUMBERS — GAS SAFETY CERTIFICATE MATTERS
   Fully scoped for DNN / ContentBuilder
========================================================= */

#matter,
#matter * {
    box-sizing: border-box;
}

#matter.cwp-gsm-section {
    --cwp-blue: #0053a0;
    --cwp-blue-soft: #3d6ab3;
    --cwp-blue-dark: #003b75;
    --cwp-blue-deep: #002b57;
    --cwp-red: #e2231a;
    --cwp-red-dark: #b91813;
    --cwp-white: #ffffff;
    --cwp-text: #1d2a37;
    --cwp-muted: #5b6d7d;
    --cwp-pale: #edf5fc;

    position: relative !important;
    isolation: isolate;

    display: block !important;

    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;

    margin: 0 !important;
    padding: clamp(36px, 5vw, 68px) 0 !important;

    overflow: hidden !important;

    color: var(--cwp-text);

    background:
        radial-gradient(
            circle at 8% 4%,
            rgba(61, 106, 179, .075),
            transparent 27%
        ),
        radial-gradient(
            circle at 94% 14%,
            rgba(0, 83, 160, .05),
            transparent 25%
        ),
        #ffffff !important;
}

#matter.cwp-gsm-section::before {
    content: "";

    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    left: 0;

    height: 4px;

    background:
        linear-gradient(
            90deg,
            var(--cwp-blue-soft),
            var(--cwp-blue),
            var(--cwp-blue-deep)
        );
}

#matter.cwp-gsm-section::after {
    content: "";

    position: absolute;
    z-index: 0;
    inset: 0;

    pointer-events: none;

    opacity: .065;

    background-image:
        linear-gradient(
            rgba(0, 83, 160, .08) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(0, 83, 160, .08) 1px,
            transparent 1px
        );

    background-size: 46px 46px;

    -webkit-mask-image:
        linear-gradient(
            180deg,
            #000,
            transparent 72%
        );

    mask-image:
        linear-gradient(
            180deg,
            #000,
            transparent 72%
        );
}


/* =========================================================
   DNN / CONTENTBUILDER LAYOUT FIX
========================================================= */

#matter.cwp-gsm-section > .is-boxes,
#matter.cwp-gsm-section > .is-boxes > .is-container {
    position: relative !important;
    z-index: 2;

    inset: auto !important;

    display: block !important;

    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;

    transform: none !important;
}

#matter.cwp-gsm-section > .is-boxes {
    margin: 0 !important;
    padding: 0 !important;
}

#matter.cwp-gsm-section > .is-boxes > .is-container {
    max-width: 1220px !important;

    margin: 0 auto !important;
    padding: 0 22px !important;
}

#matter .row {
    width: auto !important;

    margin: 0 !important;
}

#matter .col-md-12 {
    width: 100% !important;
    min-height: 0 !important;

    padding: 0 !important;
}

#matter .cwp-gsm {
    width: 100%;
    max-width: 1080px;

    margin: 0 auto;

    font-family:
        Inter,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

#matter h2,
#matter h3,
#matter p {
    margin-top: 0;
}

#matter a {
    text-underline-offset: 3px;
}

#matter svg {
    width: 100%;
    height: 100%;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   HEADER
========================================================= */

#matter .cwp-gsm__header {
    position: relative;

    display: block;

    width: 100%;

    margin: 0 0 18px;
    padding: clamp(34px, 5vw, 54px);

    overflow: hidden;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(255, 255, 255, .15),
            transparent 35%
        ),
        radial-gradient(
            circle at 0% 100%,
            rgba(61, 106, 179, .24),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #126ab5 0%,
            var(--cwp-blue) 48%,
            var(--cwp-blue-deep) 100%
        );

    border: 1px solid rgba(0, 83, 160, .22);
    border-radius: 28px;

    box-shadow:
        0 25px 58px rgba(0, 59, 117, .20),
        inset 0 1px 0 rgba(255, 255, 255, .14);

    transition:
        border-color .28s ease,
        box-shadow .28s ease,
        transform .28s ease;
}

#matter .cwp-gsm__header::before {
    content: "";

    position: absolute;
    top: 0;
    right: 18px;
    left: 18px;

    height: 4px;

    border-radius: 0 0 999px 999px;

    background:
        linear-gradient(
            90deg,
            #76a7cf 0%,
            #ffffff 30%,
            var(--cwp-blue-soft) 37%,
            var(--cwp-blue) 68%,
            #7cb0d7 100%
        );
}

#matter .cwp-gsm__header-copy {
    position: relative;
    z-index: 1;

    display: block;

    width: 100%;
    max-width: 900px;

    margin: 0 auto;

    text-align: center;
}

#matter .cwp-gsm__kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 34px;

    margin: 0 0 15px;
    padding: 8px 14px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--cwp-red),
            var(--cwp-red-dark)
        );

    border: 1px solid rgba(255, 255, 255, .17);
    border-radius: 999px;

    box-shadow:
        0 10px 22px rgba(185, 24, 19, .22),
        inset 0 1px 0 rgba(255, 255, 255, .18);

    font-size: 11px;
    line-height: 1.25;
    font-weight: 900;
    letter-spacing: .08em;
    text-align: center;
    text-transform: uppercase;
}

#matter .cwp-gsm__header h2 {
    display: block;

    width: 100%;
    max-width: 900px;

    margin: 0 auto 16px !important;
    padding: 0 !important;

    color: #ffffff !important;

    background: none !important;
    border: 0 !important;

    font-size: clamp(36px, 4.6vw, 54px) !important;
    line-height: 1.06 !important;
    font-weight: 900 !important;
    letter-spacing: -.04em !important;
    text-align: center !important;

    overflow-wrap: normal;
    word-break: normal;
}

#matter .cwp-gsm__header h2::before,
#matter .cwp-gsm__header h2::after {
    display: none !important;
    content: none !important;
}

#matter .cwp-gsm__header h2 strong {
    display: block;

    margin-top: 6px;

    color: #ffffff;

    font: inherit;

    text-shadow:
        2px 2px 0 var(--cwp-red),
        4px 4px 0 rgba(0, 43, 87, .45);
}

#matter .cwp-gsm__header p {
    width: 100%;
    max-width: 760px;

    margin: 0 auto !important;

    color: rgba(255, 255, 255, .82) !important;

    font-size: 15px !important;
    line-height: 1.7 !important;
    text-align: center !important;
}


/* =========================================================
   URGENT GAS WARNING
========================================================= */

#matter .cwp-gsm__warning {
    display: grid;

    grid-template-columns:
        48px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 15px;

    width: 100%;

    margin: 0 0 18px;
    padding: 18px 20px;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(61, 106, 179, .10),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #f2f7fc,
            #ffffff
        );

    border: 1px solid rgba(0, 83, 160, .27);
    border-left: 5px solid var(--cwp-blue);
    border-radius: 18px;

    box-shadow:
        0 16px 36px rgba(0, 59, 117, .10),
        inset 0 1px 0 #ffffff;

    transition:
        border-color .26s ease,
        box-shadow .26s ease,
        transform .26s ease;
}

#matter .cwp-gsm__warning-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    padding: 10px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--cwp-blue-soft),
            var(--cwp-blue)
        );

    border-radius: 14px;

    box-shadow:
        0 11px 23px rgba(0, 83, 160, .22),
        inset 0 1px 0 rgba(255, 255, 255, .18);
}

#matter .cwp-gsm__warning-copy {
    min-width: 0;
}

#matter .cwp-gsm__warning-copy > span {
    display: block;

    margin-bottom: 3px;

    color: var(--cwp-blue);

    font-size: 10.5px;
    line-height: 1.3;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

#matter .cwp-gsm__warning-copy > strong {
    display: block;

    margin-bottom: 4px;

    color: var(--cwp-blue-deep);

    font-size: 15.5px;
    line-height: 1.4;
}

#matter .cwp-gsm__warning p {
    margin: 0 !important;

    color: #4f6577 !important;

    font-size: 13.25px !important;
    line-height: 1.65 !important;
}

#matter .cwp-gsm__warning a:not(.cwp-gsm__warning-call),
#matter .cwp-gsm__link-note a {
    color: var(--cwp-blue) !important;

    font-weight: 850;
    text-decoration: underline !important;
}

#matter .cwp-gsm__warning-call,
#matter .cwp-gsm__warning-call:visited {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    gap: 8px;

    min-width: 190px;
    min-height: 48px;

    padding: 10px 14px;

    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            var(--cwp-blue-soft),
            var(--cwp-blue)
        );

    border: 1px solid var(--cwp-blue);
    border-radius: 12px;

    box-shadow:
        0 13px 27px rgba(0, 83, 160, .22),
        inset 0 1px 0 rgba(255, 255, 255, .16);

    font-size: 12.5px !important;
    line-height: 1.3 !important;
    font-weight: 850 !important;
    white-space: nowrap;
    text-decoration: none !important;

    transition:
        background .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}

#matter .cwp-gsm__warning-call span {
    transition: transform .25s ease;
}


/* =========================================================
   ACCORDION
========================================================= */

#matter .cwp-gsm__accordion {
    display: grid;

    gap: 12px;

    width: 100%;
}

#matter .cwp-gsm__item {
    position: relative;

    width: 100%;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(61, 106, 179, .075),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #ffffff,
            #f5f9fc
        );

    border: 1px solid rgba(0, 83, 160, .19);
    border-radius: 19px;

    box-shadow:
        0 14px 32px rgba(0, 59, 117, .085),
        inset 0 1px 0 #ffffff;

    transition:
        border-color .26s ease,
        box-shadow .26s ease,
        transform .26s ease;
}

#matter .cwp-gsm__item::before {
    content: "";

    position: absolute;
    top: 13px;
    bottom: 13px;
    left: 0;

    width: 4px;

    border-radius: 0 999px 999px 0;

    background:
        linear-gradient(
            180deg,
            var(--cwp-blue-soft),
            var(--cwp-blue),
            var(--cwp-blue-deep)
        );

    opacity: .42;
}

#matter .cwp-gsm__item[open] {
    border-color: rgba(0, 83, 160, .52);

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(61, 106, 179, .11),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #ffffff,
            #edf5fc
        );

    box-shadow:
        0 22px 48px rgba(0, 59, 117, .15),
        -9px 0 22px rgba(61, 106, 179, .065),
        9px 0 22px rgba(0, 83, 160, .045),
        inset 0 1px 0 #ffffff;
}

#matter .cwp-gsm__item[open]::before {
    top: 0;
    bottom: 0;

    opacity: 1;
}

#matter .cwp-gsm__summary {
    display: grid;

    grid-template-columns:
        52px
        minmax(0, 1fr)
        38px;

    align-items: center;

    gap: 15px;

    min-height: 88px;

    padding: 17px 19px;

    list-style: none;
    cursor: pointer;
}

#matter .cwp-gsm__summary::-webkit-details-marker {
    display: none;
}

#matter .cwp-gsm__summary::marker {
    display: none;
    content: "";
}

#matter .cwp-gsm__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;

    padding: 12px;

    color: var(--cwp-blue);

    background:
        linear-gradient(
            145deg,
            var(--cwp-pale),
            #ffffff
        );

    border: 1px solid rgba(0, 83, 160, .22);
    border-radius: 15px;

    transition:
        color .24s ease,
        background .24s ease,
        border-color .24s ease,
        box-shadow .24s ease,
        transform .24s ease;
}

#matter .cwp-gsm__item[open] .cwp-gsm__icon {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--cwp-blue-soft),
            var(--cwp-blue)
        );

    border-color: var(--cwp-blue);

    box-shadow:
        0 10px 22px rgba(0, 83, 160, .20);

    transform: scale(1.03);
}

#matter .cwp-gsm__heading {
    min-width: 0;
}

#matter .cwp-gsm__eyebrow {
    display: block;

    margin-bottom: 4px;

    color: var(--cwp-blue);

    font-size: 10px;
    line-height: 1.3;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

#matter .cwp-gsm__title {
    display: block;

    color: var(--cwp-blue-deep);

    font-size: 18px;
    line-height: 1.35;
    font-weight: 850;

    overflow-wrap: anywhere;
}

#matter .cwp-gsm__toggle {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    background:
        linear-gradient(
            145deg,
            var(--cwp-pale),
            #ffffff
        );

    border: 1px solid #cbddec;
    border-radius: 50%;

    transition:
        background .24s ease,
        border-color .24s ease,
        box-shadow .24s ease,
        transform .24s ease;
}

#matter .cwp-gsm__toggle::before,
#matter .cwp-gsm__toggle::after {
    content: "";

    position: absolute;

    width: 14px;
    height: 2px;

    background: var(--cwp-blue-deep);
    border-radius: 999px;

    transition:
        opacity .24s ease,
        transform .24s ease;
}

#matter .cwp-gsm__toggle::after {
    transform: rotate(90deg);
}

#matter .cwp-gsm__item[open] .cwp-gsm__toggle {
    background:
        linear-gradient(
            135deg,
            var(--cwp-blue-soft),
            var(--cwp-blue)
        );

    border-color: var(--cwp-blue);

    box-shadow:
        0 9px 19px rgba(0, 83, 160, .19);

    transform: rotate(180deg);
}

#matter .cwp-gsm__item[open] .cwp-gsm__toggle::before,
#matter .cwp-gsm__item[open] .cwp-gsm__toggle::after {
    background: #ffffff;
}

#matter .cwp-gsm__item[open] .cwp-gsm__toggle::after {
    opacity: 0;
}


/* =========================================================
   OPEN CONTENT
========================================================= */

#matter .cwp-gsm__content {
    padding: 0 22px 23px 88px;
}

#matter .cwp-gsm__intro {
    max-width: 850px;

    margin: 0 0 14px !important;

    color: var(--cwp-muted) !important;

    font-size: 13.75px !important;
    line-height: 1.68 !important;
}

#matter .cwp-gsm__points {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 10px;
}

#matter .cwp-gsm__points article {
    position: relative;

    min-width: 0;

    padding: 15px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #edf5fc
        );

    border: 1px solid rgba(0, 83, 160, .17);
    border-radius: 13px;

    box-shadow:
        0 9px 22px rgba(0, 59, 117, .06),
        inset 0 1px 0 #ffffff;

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}

#matter .cwp-gsm__points article::after {
    content: "";

    position: absolute;
    right: 15px;
    bottom: 0;
    left: 15px;

    height: 3px;

    background:
        linear-gradient(
            90deg,
            var(--cwp-blue-soft),
            var(--cwp-blue),
            var(--cwp-blue-deep)
        );

    opacity: .42;

    transform: scaleX(.30);
    transform-origin: left;

    transition:
        opacity .25s ease,
        transform .25s ease;
}

#matter .cwp-gsm__points strong {
    display: block;

    margin-bottom: 6px;

    color: var(--cwp-blue-deep);

    font-size: 13.5px;
    line-height: 1.4;
}

#matter .cwp-gsm__points p {
    margin: 0 !important;

    color: var(--cwp-muted) !important;

    font-size: 12.75px !important;
    line-height: 1.6 !important;
}

#matter .cwp-gsm__link-note {
    margin: 12px 0 0 !important;
    padding: 12px 14px;

    color: #4d6274 !important;

    background:
        linear-gradient(
            145deg,
            #edf6fd,
            #ffffff
        );

    border: 1px solid rgba(0, 83, 160, .19);
    border-left: 4px solid var(--cwp-blue);
    border-radius: 11px;

    font-size: 12.75px !important;
    line-height: 1.62 !important;
}


/* =========================================================
   CTA
========================================================= */

#matter .cwp-gsm__cta {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 24px;

    width: 100%;

    margin: 18px 0 0;
    padding: clamp(25px, 3.7vw, 37px);

    color: #ffffff;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(255, 255, 255, .15),
            transparent 35%
        ),
        radial-gradient(
            circle at 0% 100%,
            rgba(61, 106, 179, .24),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #126ab5 0%,
            var(--cwp-blue) 48%,
            var(--cwp-blue-deep) 100%
        );

    border: 1px solid rgba(0, 83, 160, .20);
    border-radius: 22px;

    box-shadow:
        0 23px 54px rgba(0, 59, 117, .22),
        inset 0 1px 0 rgba(255, 255, 255, .12);

    transition:
        box-shadow .26s ease,
        transform .26s ease;
}

#matter .cwp-gsm__cta-copy {
    min-width: 0;
}

#matter .cwp-gsm__cta-copy > span {
    display: block;

    margin-bottom: 5px;

    color: #ffffff;

    font-size: 10.5px;
    line-height: 1.3;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

#matter .cwp-gsm__cta h3 {
    margin: 0 0 7px !important;

    color: #ffffff !important;

    font-size: clamp(24px, 2.8vw, 33px) !important;
    line-height: 1.18 !important;
    font-weight: 850 !important;
}

#matter .cwp-gsm__cta p {
    max-width: 700px;

    margin: 0 !important;

    color: rgba(255, 255, 255, .76) !important;

    font-size: 13.25px !important;
    line-height: 1.62 !important;
}

#matter .cwp-gsm__cta-phone {
    color: #ffffff !important;

    font-weight: 850;
    text-decoration: underline !important;
}

#matter .cwp-gsm__actions {
    display: grid;

    gap: 8px;

    width: 210px;
}

#matter .cwp-gsm__actions a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 46px;

    padding: 10px 14px;

    border-radius: 11px;

    font-size: 12.5px !important;
    line-height: 1.25 !important;
    font-weight: 850 !important;
    text-align: center;
    text-decoration: none !important;

    transition:
        color .25s ease,
        background .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}

#matter .cwp-gsm__primary,
#matter .cwp-gsm__primary:visited {
    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            var(--cwp-red),
            var(--cwp-red-dark)
        );

    border: 1px solid var(--cwp-red);

    box-shadow:
        0 11px 23px rgba(185, 24, 19, .22),
        inset 0 1px 0 rgba(255, 255, 255, .16);
}

#matter .cwp-gsm__secondary,
#matter .cwp-gsm__secondary:visited {
    color: #ffffff !important;

    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .33);
}


/* =========================================================
   SOURCE
========================================================= */

#matter .cwp-gsm__source {
    width: 100%;

    margin: 13px 0 0 !important;
    padding: 12px 14px;

    color: #53697b !important;

    background:
        linear-gradient(
            145deg,
            #f4f8fb,
            #ffffff
        );

    border: 1px solid rgba(0, 83, 160, .15);
    border-radius: 11px;

    font-size: 11.75px !important;
    line-height: 1.6 !important;
    text-align: center;
}

#matter .cwp-gsm__source a {
    color: var(--cwp-blue) !important;

    font-weight: 820;
    text-decoration: underline !important;
    overflow-wrap: anywhere;
}


/* =========================================================
   HOVER
========================================================= */

@media (hover: hover) {

    #matter .cwp-gsm__header:hover,
    #matter .cwp-gsm__cta:hover {
        box-shadow:
            0 31px 70px rgba(0, 59, 117, .28),
            0 0 31px rgba(61, 106, 179, .14);

        transform: translateY(-3px);
    }

    #matter .cwp-gsm__warning:hover {
        border-color: rgba(0, 83, 160, .50);

        box-shadow:
            0 22px 45px rgba(0, 59, 117, .15),
            -8px 0 21px rgba(61, 106, 179, .06),
            8px 0 21px rgba(0, 83, 160, .045);

        transform: translateY(-3px);
    }

    #matter .cwp-gsm__warning-call:hover {
        color: #ffffff !important;

        background:
            linear-gradient(
                135deg,
                #5683c6,
                var(--cwp-blue-deep)
            );

        box-shadow:
            0 17px 34px rgba(0, 83, 160, .30);

        transform: translateY(-3px);
    }

    #matter .cwp-gsm__warning-call:hover span {
        transform: translateX(4px);
    }

    #matter .cwp-gsm__item:not([open]):hover {
        border-color: rgba(0, 83, 160, .46);

        box-shadow:
            0 20px 43px rgba(0, 59, 117, .14),
            -8px 0 20px rgba(61, 106, 179, .06),
            8px 0 20px rgba(0, 83, 160, .04);

        transform: translateY(-3px);
    }

    #matter .cwp-gsm__item:not([open]) .cwp-gsm__summary:hover {
        background:
            linear-gradient(
                90deg,
                rgba(229, 239, 248, .82),
                rgba(255, 255, 255, .90)
            );
    }

    #matter .cwp-gsm__points article:hover {
        border-color: rgba(0, 83, 160, .48);

        box-shadow:
            0 17px 34px rgba(0, 59, 117, .13),
            -7px 0 18px rgba(61, 106, 179, .055),
            7px 0 18px rgba(0, 83, 160, .035);

        transform: translateY(-4px);
    }

    #matter .cwp-gsm__points article:hover::after {
        opacity: 1;
        transform: scaleX(1);
    }

    #matter .cwp-gsm__primary:hover {
        color: var(--cwp-blue-deep) !important;

        background: #ffffff;
        border-color: #ffffff;

        box-shadow:
            0 14px 28px rgba(0, 43, 87, .22);

        transform: translateY(-3px);
    }

    #matter .cwp-gsm__secondary:hover {
        color: #ffffff !important;

        background:
            linear-gradient(
                135deg,
                var(--cwp-blue-soft),
                var(--cwp-blue)
            );

        border-color: var(--cwp-blue-soft);

        box-shadow:
            0 14px 28px rgba(0, 83, 160, .24);

        transform: translateY(-3px);
    }

    #matter .cwp-gsm__source a:hover,
    #matter .cwp-gsm__warning a:not(.cwp-gsm__warning-call):hover,
    #matter .cwp-gsm__link-note a:hover {
        color: var(--cwp-blue-deep) !important;
    }

}

#matter .cwp-gsm__summary:focus-visible,
#matter a:focus-visible {
    outline: 3px solid rgba(0, 83, 160, .58);
    outline-offset: 3px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    #matter .cwp-gsm__header {
        padding: 38px 28px;
    }

    #matter .cwp-gsm__header h2 {
        font-size: clamp(34px, 6vw, 46px) !important;
    }

    #matter .cwp-gsm__warning {
        grid-template-columns:
            48px
            minmax(0, 1fr);
    }

    #matter .cwp-gsm__warning-call {
        grid-column: 1 / -1;

        width: 100%;
    }

    #matter .cwp-gsm__points {
        grid-template-columns: 1fr;
    }

    #matter .cwp-gsm__cta {
        grid-template-columns: 1fr;

        gap: 18px;
    }

    #matter .cwp-gsm__actions {
        width: 100%;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 640px) {

    #matter.cwp-gsm-section {
        padding: 28px 0 !important;

        overflow-x: clip !important;
    }

    #matter.cwp-gsm-section > .is-boxes > .is-container {
        padding-right: 12px !important;
        padding-left: 12px !important;
    }

    #matter .cwp-gsm__header {
        margin-bottom: 14px;
        padding: 26px 16px;

        border-radius: 21px;
    }

    #matter .cwp-gsm__header::before {
        right: 11px;
        left: 11px;
    }

    #matter .cwp-gsm__kicker {
        min-height: 31px;

        margin-bottom: 12px;
        padding: 7px 11px;

        font-size: 9px;
        letter-spacing: .065em;
    }

    #matter .cwp-gsm__header h2 {
        margin-bottom: 12px !important;

        font-size: clamp(28px, 9vw, 36px) !important;
        line-height: 1.08 !important;
        letter-spacing: -.028em !important;
    }

    #matter .cwp-gsm__header h2 strong {
        margin-top: 4px;

        text-shadow:
            1.5px 1.5px 0 var(--cwp-red),
            3px 3px 0 rgba(0, 43, 87, .42);
    }

    #matter .cwp-gsm__header p {
        font-size: 13px !important;
        line-height: 1.62 !important;
    }

    #matter .cwp-gsm__warning {
        grid-template-columns:
            42px
            minmax(0, 1fr);

        gap: 11px;

        margin-bottom: 14px;
        padding: 14px 13px;

        border-radius: 15px;
    }

    #matter .cwp-gsm__warning-icon {
        width: 42px;
        height: 42px;

        padding: 9px;
    }

    #matter .cwp-gsm__warning-copy > strong {
        font-size: 14px;
    }

    #matter .cwp-gsm__warning p {
        font-size: 12.5px !important;
        line-height: 1.6 !important;
    }

    #matter .cwp-gsm__warning-call {
        grid-column: 1 / -1;

        width: 100%;
        min-width: 0;
        min-height: 45px;
    }

    #matter .cwp-gsm__accordion {
        gap: 9px;
    }

    #matter .cwp-gsm__item {
        border-radius: 15px;
    }

    #matter .cwp-gsm__summary {
        grid-template-columns:
            43px
            minmax(0, 1fr)
            31px;

        gap: 9px;

        min-height: 76px;

        padding: 12px 10px;
    }

    #matter .cwp-gsm__icon {
        width: 43px;
        height: 43px;

        padding: 10px;

        border-radius: 12px;
    }

    #matter .cwp-gsm__eyebrow {
        margin-bottom: 3px;

        font-size: 8.25px;
    }

    #matter .cwp-gsm__title {
        font-size: 14.5px;
        line-height: 1.35;
    }

    #matter .cwp-gsm__toggle {
        width: 31px;
        height: 31px;
    }

    #matter .cwp-gsm__toggle::before,
    #matter .cwp-gsm__toggle::after {
        width: 12px;
    }

    #matter .cwp-gsm__content {
        padding: 0 12px 15px;
    }

    #matter .cwp-gsm__intro {
        margin-bottom: 10px !important;

        font-size: 12.75px !important;
        line-height: 1.62 !important;
    }

    #matter .cwp-gsm__points {
        gap: 8px;
    }

    #matter .cwp-gsm__points article {
        padding: 13px;
    }

    #matter .cwp-gsm__points strong {
        font-size: 13px;
    }

    #matter .cwp-gsm__points p,
    #matter .cwp-gsm__link-note {
        font-size: 12.25px !important;
        line-height: 1.58 !important;
    }

    #matter .cwp-gsm__cta {
        gap: 16px;

        margin-top: 14px;
        padding: 22px 15px;

        border-radius: 18px;

        text-align: center;
    }

    #matter .cwp-gsm__cta h3 {
        font-size: 25px !important;
    }

    #matter .cwp-gsm__cta p {
        font-size: 12.75px !important;
    }

    #matter .cwp-gsm__actions {
        grid-template-columns: 1fr;

        gap: 7px;
    }

    #matter .cwp-gsm__actions a {
        width: min(100%, 330px);

        margin-right: auto;
        margin-left: auto;
    }

    #matter .cwp-gsm__source {
        padding: 11px 12px;

        font-size: 10.75px !important;
        text-align: left;
    }

}

@media (max-width: 380px) {

    #matter .cwp-gsm__header {
        padding-right: 13px;
        padding-left: 13px;
    }

    #matter .cwp-gsm__header h2 {
        font-size: 27px !important;
    }

    #matter .cwp-gsm__summary {
        grid-template-columns:
            40px
            minmax(0, 1fr)
            29px;

        gap: 7px;

        padding-right: 8px;
        padding-left: 8px;
    }

    #matter .cwp-gsm__icon {
        width: 40px;
        height: 40px;
    }

    #matter .cwp-gsm__title {
        font-size: 13.75px;
    }

    #matter .cwp-gsm__toggle {
        width: 29px;
        height: 29px;
    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

    #matter * {
        transition: none !important;
    }

    #matter .cwp-gsm__header:hover,
    #matter .cwp-gsm__warning:hover,
    #matter .cwp-gsm__item:hover,
    #matter .cwp-gsm__cta:hover,
    #matter .cwp-gsm__actions a:hover {
        transform: none !important;
    }

}


/* ========================================================================
   COMPONENT: WHY CHOOSE US FEATURE
======================================================================== */
/* =========================================================
   CITYWIDE PLUMBERS — GAS LEAK DETECTION
   Fully scoped for DNN / ContentBuilder
========================================================= */

.cwp-gld-feature-section,
.cwp-gld-feature-section * {
    box-sizing: border-box;
}

.cwp-gld-feature-section {
    position: relative !important;
    isolation: isolate;

    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    width: 100% !important;
    min-height: 1px !important;
    height: auto !important;

    margin: 0 !important;

    overflow: hidden !important;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(255, 255, 255, .15),
            transparent 34%
        ),
        radial-gradient(
            circle at 0% 100%,
            rgba(61, 106, 179, .24),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #126ab5 0%,
            #0053a0 48%,
            #002b57 100%
        ) !important;
}

.cwp-gld-feature-section::before {
    content: "";

    position: absolute;
    z-index: 0;
    inset: 0;

    pointer-events: none;

    opacity: .11;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, .10) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .10) 1px,
            transparent 1px
        );

    background-size: 42px 42px;

    -webkit-mask-image:
        linear-gradient(
            90deg,
            #000 0%,
            rgba(0, 0, 0, .55) 55%,
            transparent 100%
        );

    mask-image:
        linear-gradient(
            90deg,
            #000 0%,
            rgba(0, 0, 0, .55) 55%,
            transparent 100%
        );
}

.cwp-gld-feature-section > .is-boxes,
.cwp-gld-feature-section > .is-boxes > .is-container {
    position: relative !important;
    z-index: 2;

    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    width: 100% !important;
    min-height: 1px !important;
    height: auto !important;

    transform: none !important;
}

.cwp-gld-feature-section > .is-boxes {
    inset: auto !important;

    margin: 0 !important;
    padding: 0 !important;
}

.cwp-gld-feature-section > .is-boxes > .is-container {
    inset: auto !important;

    max-width: 1240px !important;

    margin-right: auto !important;
    margin-left: auto !important;
    padding-right: 24px !important;
    padding-left: 24px !important;
}

.cwp-gld-feature-section .row {
    display: flex !important;
    flex-wrap: wrap !important;

    width: auto !important;
    min-height: 1px !important;
    height: auto !important;

    margin-right: -15px !important;
    margin-left: -15px !important;
}

.cwp-gld-feature-section .col-md-12 {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    min-height: 1px !important;
    height: auto !important;

    padding-right: 15px !important;
    padding-left: 15px !important;
}

.cwp-gld-feature-section .cwp-gld-feature-editor {
    position: relative !important;

    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    width: 100% !important;
    min-height: 1px !important;
    height: auto !important;

    overflow: visible !important;
}

#cwp-gld-feature,
#cwp-gld-feature * {
    box-sizing: border-box;
}

#cwp-gld-feature {
    --cwp-blue: #0053a0;
    --cwp-blue-soft: #3d6ab3;
    --cwp-blue-deep: #002b57;
    --cwp-red: #e2231a;
    --cwp-red-dark: #b91813;
    --cwp-white: #ffffff;
    --cwp-pale: #edf5fc;
    --cwp-text: #1d2a37;
    --cwp-muted: #5d6f7f;

    position: relative !important;
    z-index: 1 !important;
    isolation: isolate;

    display: grid !important;

    grid-template-columns:
        minmax(320px, 1fr)
        minmax(360px, 1fr);

    align-items: center;

    gap: clamp(24px, 3.5vw, 42px);

    width: 100% !important;
    min-height: 1px !important;

    margin: 0 !important;
    padding: clamp(30px, 4vw, 46px) 0 !important;

    color: #ffffff;

    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

#cwp-gld-feature::before {
    content: "";

    position: absolute;
    z-index: 0;

    top: 24px;
    left: -24px;

    width: min(53%, 560px);
    height: calc(100% - 48px);

    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 27px;

    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .065) 1px,
            transparent 1px
        ),
        linear-gradient(
            rgba(255, 255, 255, .065) 1px,
            transparent 1px
        ),
        radial-gradient(
            circle at 10% 10%,
            rgba(61, 106, 179, .30),
            transparent 38%
        );

    background-size:
        26px 26px,
        26px 26px,
        auto;

    pointer-events: none;
}

#cwp-gld-feature > * {
    position: relative;
    z-index: 1;
}

#cwp-gld-feature .cwp-gld-feature__content {
    min-width: 0;
}

#cwp-gld-feature .cwp-gld-feature__label {
    display: inline-flex;
    align-items: center;

    min-height: 35px;

    margin-bottom: 10px;
    padding: 8px 14px;

    color: #ffffff;

    background: rgba(255, 255, 255, .11);
    border: 1px solid rgba(255, 255, 255, .20);
    border-radius: 999px;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .10);

    font-size: 11px;
    line-height: 1.2;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

#cwp-gld-feature .cwp-gld-feature__label::before {
    content: "";

    width: 8px;
    height: 8px;

    flex: 0 0 8px;

    margin-right: 8px;

    background: var(--cwp-red);
    border-radius: 50%;

    box-shadow:
        0 0 0 4px rgba(226, 35, 26, .16);
}

#cwp-gld-feature .cwp-gld-feature__title {
    max-width: 680px;

    margin: 0 0 10px !important;
    padding: 0 !important;

    color: #ffffff !important;

    background: none !important;
    border: 0 !important;

    font-size: clamp(31px, 3.7vw, 44px) !important;
    line-height: 1.07 !important;
    font-weight: 880 !important;
    letter-spacing: -.038em !important;

    text-wrap: balance;

    text-shadow:
        0 5px 22px rgba(0, 29, 61, .28);
}

#cwp-gld-feature .cwp-gld-feature__title::before,
#cwp-gld-feature .cwp-gld-feature__title::after {
    display: none !important;
    content: none !important;
}

#cwp-gld-feature .cwp-gld-feature__title strong {
    display: block;

    margin-top: 5px;

    color: #ffffff;

    font: inherit;

    text-shadow:
        2px 2px 0 var(--cwp-red),
        4px 4px 0 rgba(0, 43, 87, .48);
}

#cwp-gld-feature .cwp-gld-feature__text {
    max-width: 640px;

    margin: 0 0 14px;

    color: rgba(255, 255, 255, .84);

    font-size: 14px;
    line-height: 1.64;
}

#cwp-gld-feature .cwp-gld-feature__points {
    display: grid;

    gap: 9px;
}

#cwp-gld-feature .cwp-gld-feature__points--short {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

#cwp-gld-feature .cwp-gld-feature__point {
    display: flex;
    align-items: flex-start;

    gap: 12px;

    min-width: 0;

    padding: 12px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .98),
            rgba(241, 247, 252, .98)
        );

    border: 1px solid rgba(255, 255, 255, .42);
    border-radius: 15px;

    box-shadow:
        0 11px 27px rgba(0, 34, 71, .14),
        inset 0 1px 0 #ffffff;

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}

#cwp-gld-feature .cwp-gld-feature__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 39px;
    height: 39px;

    flex: 0 0 39px;

    color: var(--cwp-blue);

    background:
        linear-gradient(
            145deg,
            var(--cwp-pale),
            #ffffff
        );

    border: 1px solid rgba(0, 83, 160, .17);
    border-radius: 12px;

    box-shadow:
        inset 0 1px 0 #ffffff;

    transition:
        color .25s ease,
        background .25s ease,
        border-color .25s ease,
        transform .25s ease;
}

#cwp-gld-feature .cwp-gld-feature__icon svg {
    width: 21px;
    height: 21px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#cwp-gld-feature .cwp-gld-feature__point h3 {
    margin: 1px 0 4px !important;

    color: var(--cwp-blue-deep) !important;

    font-size: 14px !important;
    line-height: 1.35 !important;
    font-weight: 820 !important;
}

#cwp-gld-feature .cwp-gld-feature__point p {
    margin: 0 !important;

    color: var(--cwp-muted) !important;

    font-size: 12.5px !important;
    line-height: 1.58 !important;
}

#cwp-gld-feature .cwp-gld-feature__actions {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 8px;

    margin-top: 13px;
}

#cwp-gld-feature .cwp-gld-feature__btn {
    position: relative;
    isolation: isolate;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    min-height: 45px;

    padding: 9px 13px;

    overflow: hidden;

    border-radius: 12px;

    font-size: 12px !important;
    line-height: 1.25 !important;
    font-weight: 840 !important;
    text-align: center;
    text-decoration: none !important;

    transition:
        color .25s ease,
        background .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}

#cwp-gld-feature .cwp-gld-feature__btn::before {
    content: "";

    position: absolute;
    top: 0;
    bottom: 0;
    left: -120%;
    z-index: -1;

    width: 62%;

    background:
        linear-gradient(
            115deg,
            transparent,
            rgba(255, 255, 255, .28),
            transparent
        );

    transform: skewX(-24deg);

    transition: left .72s ease;
}

#cwp-gld-feature .cwp-gld-feature__btn:hover::before {
    left: 145%;
}

#cwp-gld-feature .cwp-gld-feature__btn--primary {
    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            var(--cwp-red),
            var(--cwp-red-dark)
        );

    border: 1px solid var(--cwp-red);

    box-shadow:
        0 11px 24px rgba(226, 35, 26, .24),
        inset 0 1px 0 rgba(255, 255, 255, .16);
}

#cwp-gld-feature .cwp-gld-feature__btn--secondary {
    color: var(--cwp-blue-deep) !important;

    background: #ffffff;
    border: 1px solid rgba(255, 255, 255, .48);

    box-shadow:
        0 11px 24px rgba(0, 35, 73, .15),
        inset 0 1px 0 #ffffff;
}

#cwp-gld-feature .cwp-gld-feature__image-card {
    position: relative;

    display: block;

    min-width: 0;
    width: 100%;
    min-height: 330px;

    margin: 0;

    overflow: hidden;

    background: var(--cwp-blue-deep);
    border: 1px solid rgba(255, 255, 255, .20);
    border-radius: 25px;

    box-shadow:
        0 27px 60px rgba(0, 24, 52, .31),
        0 0 0 1px rgba(255, 255, 255, .05),
        inset 0 1px 0 rgba(255, 255, 255, .09);

    transition:
        border-color .30s ease,
        box-shadow .30s ease,
        transform .30s ease;
}

#cwp-gld-feature .cwp-gld-feature__image-card::before {
    content: "Gas Safety Certificates in London";

    position: absolute;
    z-index: 2;

    top: 18px;
    left: 18px;

    padding: 8px 12px;

    color: #ffffff;

    background: rgba(0, 43, 87, .78);
    border: 1px solid rgba(255, 255, 255, .20);
    border-radius: 999px;

    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);

    font-size: 10px;
    line-height: 1.2;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

#cwp-gld-feature .cwp-gld-feature__image-card::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    border-radius: inherit;

    background:
        linear-gradient(
            180deg,
            rgba(0, 43, 87, .08),
            rgba(0, 43, 87, .22)
        );

    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .06);
}

#cwp-gld-feature .cwp-gld-feature__image {
    display: block !important;

    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 330px !important;

    margin: 0 !important;

    object-fit: cover;
    object-position: center;

    aspect-ratio: 10 / 7;

    transition:
        transform .45s ease,
        filter .45s ease;
}


/* =========================================================
   HOVER & FOCUS
========================================================= */

@media (hover: hover) {

    #cwp-gld-feature .cwp-gld-feature__point:hover {
        border-color: rgba(0, 83, 160, .46);

        box-shadow:
            0 18px 36px rgba(0, 43, 87, .18),
            -7px 0 18px rgba(61, 106, 179, .06),
            7px 0 18px rgba(226, 35, 26, .04),
            inset 0 1px 0 #ffffff;

        transform: translateY(-4px);
    }

    #cwp-gld-feature .cwp-gld-feature__point:hover .cwp-gld-feature__icon {
        color: #ffffff;

        background:
            linear-gradient(
                135deg,
                var(--cwp-blue-soft),
                var(--cwp-blue)
            );

        border-color: var(--cwp-blue);

        transform: scale(1.05);
    }

    #cwp-gld-feature .cwp-gld-feature__btn--primary:hover {
        color: var(--cwp-blue-deep) !important;

        background: #ffffff;
        border-color: #ffffff;

        box-shadow:
            0 15px 30px rgba(0, 35, 73, .22);

        transform: translateY(-3px);
    }

    #cwp-gld-feature .cwp-gld-feature__btn--secondary:hover {
        color: #ffffff !important;

        background:
            linear-gradient(
                135deg,
                var(--cwp-blue-soft),
                var(--cwp-blue)
            );

        border-color: var(--cwp-blue-soft);

        box-shadow:
            0 15px 30px rgba(0, 83, 160, .24);

        transform: translateY(-3px);
    }

    #cwp-gld-feature .cwp-gld-feature__image-card:hover {
        border-color: rgba(255, 255, 255, .36);

        box-shadow:
            0 34px 72px rgba(0, 24, 52, .39),
            0 0 30px rgba(61, 106, 179, .18),
            inset 0 1px 0 rgba(255, 255, 255, .12);

        transform: translateY(-4px);
    }

    #cwp-gld-feature .cwp-gld-feature__image-card:hover .cwp-gld-feature__image {
        transform: scale(1.035);
        filter: brightness(1.04);
    }

}

#cwp-gld-feature a:focus-visible {
    outline: 3px solid rgba(255, 255, 255, .72);
    outline-offset: 3px;
}


/* =========================================================
   TABLET
========================================================= */

@media screen and (max-width: 1020px) {

    #cwp-gld-feature {
        grid-template-columns: 1fr;
    }

    #cwp-gld-feature::before {
        left: -16px;

        width: calc(100% + 32px);
        height: 48%;
    }

    #cwp-gld-feature .cwp-gld-feature__image-card {
        min-height: 0;

        aspect-ratio: 10 / 6.2;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media screen and (max-width: 767px) {

    .cwp-gld-feature-section .row {
        margin-right: -12px !important;
        margin-left: -12px !important;
    }

    .cwp-gld-feature-section .col-md-12 {
        padding-right: 12px !important;
        padding-left: 12px !important;
    }

    #cwp-gld-feature {
        padding: 26px 0 !important;
    }

    #cwp-gld-feature .cwp-gld-feature__points--short {
        grid-template-columns: 1fr;
    }

    #cwp-gld-feature .cwp-gld-feature__image-card {
        min-height: 0 !important;
        height: auto !important;

        aspect-ratio: 10 / 6.2;
    }

    #cwp-gld-feature .cwp-gld-feature__image {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;

        aspect-ratio: auto;
    }

}

@media screen and (max-width: 575px) {

    .cwp-gld-feature-section > .is-boxes > .is-container {
        padding-right: 12px !important;
        padding-left: 12px !important;
    }

    #cwp-gld-feature {
        gap: 19px;

        padding: 23px 0 !important;
    }

    #cwp-gld-feature::before {
        top: 12px;
        left: -8px;

        width: calc(100% + 16px);
        height: 56%;

        border-radius: 20px;
    }

    #cwp-gld-feature .cwp-gld-feature__label {
        font-size: 10px;
    }

    #cwp-gld-feature .cwp-gld-feature__title {
        font-size: 29px !important;
        line-height: 1.08 !important;
    }

    #cwp-gld-feature .cwp-gld-feature__text {
        font-size: 13px;
        line-height: 1.64;
    }

    #cwp-gld-feature .cwp-gld-feature__point {
        padding: 14px;
    }

    #cwp-gld-feature .cwp-gld-feature__actions--short {
        grid-template-columns: 1fr;
    }

    #cwp-gld-feature .cwp-gld-feature__btn {
        width: 100%;
    }

}

@media screen and (max-width: 390px) {

    #cwp-gld-feature .cwp-gld-feature__title {
        font-size: 28px !important;
    }

    #cwp-gld-feature .cwp-gld-feature__point {
        gap: 10px;
    }

    #cwp-gld-feature .cwp-gld-feature__icon {
        width: 40px;
        height: 40px;

        flex-basis: 40px;
    }

}


/* =========================================================
   CONTENTBUILDER EDIT MODE
========================================================= */

body.editmode .cwp-gld-feature-section,
body.dnnEditState .cwp-gld-feature-section,
body.dnnEditMode .cwp-gld-feature-section,
.dnnEditState .cwp-gld-feature-section,
.dnnEditMode .cwp-gld-feature-section {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    min-height: 360px !important;
    height: auto !important;

    overflow: visible !important;
}

body.editmode .cwp-gld-feature-editor,
body.dnnEditState .cwp-gld-feature-editor,
body.dnnEditMode .cwp-gld-feature-editor,
.dnnEditState .cwp-gld-feature-editor,
.dnnEditMode .cwp-gld-feature-editor {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    min-height: 360px !important;
    height: auto !important;

    overflow: visible !important;
}

body.editmode #cwp-gld-feature,
body.dnnEditState #cwp-gld-feature,
body.dnnEditMode #cwp-gld-feature,
.dnnEditState #cwp-gld-feature,
.dnnEditMode #cwp-gld-feature {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;

    min-height: 360px !important;
    height: auto !important;

    overflow: visible !important;
}

body.editmode .cwp-gld-feature-section :is(.is-ui, .is-tool, .is-pop),
body.dnnEditState .cwp-gld-feature-section :is(.is-ui, .is-tool, .is-pop),
body.dnnEditMode .cwp-gld-feature-section :is(.is-ui, .is-tool, .is-pop) {
    z-index: 9999 !important;
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

    #cwp-gld-feature * {
        transition: none !important;
    }

    #cwp-gld-feature .cwp-gld-feature__point:hover,
    #cwp-gld-feature .cwp-gld-feature__btn:hover,
    #cwp-gld-feature .cwp-gld-feature__image-card:hover {
        transform: none !important;
    }

}


/* ========================================================================
   COMPONENT: FAQ
======================================================================== */
/* =========================================================
   CITYWIDE PLUMBERS — GAS SAFETY CERTIFICATE FAQ

   Main background: white
   FAQ items: blue
========================================================= */

#faq,
#faq * {
    box-sizing: border-box;
}

#faq.cwp-faq-section {
    --cwp-blue: #0053a0;
    --cwp-blue-soft: #3d6ab3;
    --cwp-blue-mid: #0b65b3;
    --cwp-blue-deep: #002b57;
    --cwp-blue-dark: #003b75;
    --cwp-red: #e2231a;
    --cwp-white: #ffffff;
    --cwp-text: #1d2a37;
    --cwp-muted: #5b6d7d;
    --cwp-pale: #edf5fc;

    position: relative !important;
    isolation: isolate;

    display: block !important;

    width: 100% !important;
    min-height: 1px !important;
    height: auto !important;

    margin: 0 !important;
    padding: clamp(40px, 6vw, 76px) 0 !important;

    overflow: hidden !important;

    color: var(--cwp-text);

    background:
        radial-gradient(
            circle at 8% 5%,
            rgba(61, 106, 179, .07),
            transparent 27%
        ),
        radial-gradient(
            circle at 94% 90%,
            rgba(0, 83, 160, .055),
            transparent 28%
        ),
        #ffffff !important;
}

#faq.cwp-faq-section::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: .07;

    background-image:
        linear-gradient(
            rgba(0, 83, 160, .075) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(0, 83, 160, .075) 1px,
            transparent 1px
        );

    background-size: 46px 46px;

    -webkit-mask-image:
        linear-gradient(
            180deg,
            #000,
            transparent 76%
        );

    mask-image:
        linear-gradient(
            180deg,
            #000,
            transparent 76%
        );
}

#faq.cwp-faq-section > .is-boxes,
#faq.cwp-faq-section > .is-boxes > .is-container {
    position: relative !important;
    z-index: 2;

    inset: auto !important;

    display: block !important;

    width: 100% !important;
    min-height: 1px !important;
    height: auto !important;

    margin-right: auto !important;
    margin-left: auto !important;

    transform: none !important;
}

#faq.cwp-faq-section > .is-boxes {
    margin: 0 !important;
    padding: 0 !important;
}

#faq.cwp-faq-section > .is-boxes > .is-container {
    max-width: 1220px !important;

    padding-right: 22px !important;
    padding-left: 22px !important;
}

#faq .row {
    display: flex !important;
    flex-wrap: wrap !important;

    width: auto !important;
    min-height: 1px !important;
    height: auto !important;

    margin-right: -15px !important;
    margin-left: -15px !important;
}

#faq .col-md-12 {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    min-height: 1px !important;
    height: auto !important;

    padding-right: 15px !important;
    padding-left: 15px !important;
}

#faq .cwp-faq-editor {
    position: relative !important;
    z-index: 2;

    display: block !important;

    width: 100% !important;
    min-height: 1px !important;
    height: auto !important;
}

#faq .cwp-faq {
    width: 100%;
    max-width: 1120px;

    margin: 0 auto;

    font-family:
        Inter,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

#faq h2,
#faq h3,
#faq p {
    margin-top: 0;
}


/* =========================================================
   HEADER
========================================================= */

#faq .cwp-faq__head {
    max-width: 850px;

    margin: 0 auto 30px;

    text-align: center;
}

#faq .cwp-faq__label {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 35px;

    margin-bottom: 14px;
    padding: 8px 14px;

    color: var(--cwp-blue-deep);

    background: var(--cwp-pale);
    border: 1px solid rgba(0, 83, 160, .20);
    border-radius: 999px;

    box-shadow:
        0 9px 22px rgba(0, 59, 117, .07),
        inset 0 1px 0 #ffffff;

    font-size: 11px;
    line-height: 1.2;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

#faq .cwp-faq__label::before {
    content: "";

    width: 8px;
    height: 8px;

    margin-right: 8px;

    background: var(--cwp-blue);
    border-radius: 50%;

    box-shadow:
        0 0 0 5px rgba(0, 83, 160, .10);
}

#faq .cwp-faq__head h2 {
    margin-bottom: 14px;

    color: var(--cwp-blue-deep);

    font-size: clamp(33px, 4.2vw, 49px);
    line-height: 1.08;
    font-weight: 900;
    letter-spacing: -.04em;

    text-wrap: balance;
}

#faq .cwp-faq__head h2 strong {
    display: block;

    margin-top: 5px;

    color: var(--cwp-blue);

    font: inherit;
}

#faq .cwp-faq__head p {
    max-width: 760px;

    margin: 0 auto;

    color: var(--cwp-muted);

    font-size: 15px;
    line-height: 1.72;
}


/* =========================================================
   FAQ GRID & BLUE ITEMS
========================================================= */

#faq .cwp-faq__grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    align-items: start;

    gap: 13px;
}

#faq .cwp-faq__item {
    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(255, 255, 255, .12),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #116bb7 0%,
            var(--cwp-blue) 48%,
            var(--cwp-blue-deep) 100%
        );

    border: 1px solid rgba(0, 83, 160, .26);
    border-radius: 18px;

    box-shadow:
        0 15px 35px rgba(0, 59, 117, .17),
        inset 0 1px 0 rgba(255, 255, 255, .12);

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}

#faq .cwp-faq__item::before {
    content: "";

    position: absolute;
    top: 0;
    right: 17px;
    left: 17px;

    height: 3px;

    border-radius: 0 0 999px 999px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, .90),
            transparent
        );

    opacity: .55;
}

#faq .cwp-faq__item[open] {
    border-color: var(--cwp-blue-soft);

    box-shadow:
        0 22px 46px rgba(0, 59, 117, .24),
        -8px 0 22px rgba(61, 106, 179, .09),
        8px 0 22px rgba(0, 83, 160, .07),
        inset 0 1px 0 rgba(255, 255, 255, .15);
}

#faq .cwp-faq__question {
    position: relative;

    display: grid;

    grid-template-columns:
        38px
        minmax(0, 1fr);

    align-items: center;

    gap: 13px;

    min-height: 80px;

    padding: 17px 58px 17px 18px;

    color: #ffffff;

    font-size: 14.5px;
    line-height: 1.48;
    font-weight: 820;
    text-align: left;

    cursor: pointer;
    list-style: none;
}

#faq .cwp-faq__question::-webkit-details-marker {
    display: none;
}

#faq .cwp-faq__question::marker {
    display: none;
    content: "";
}

#faq .cwp-faq__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    color: var(--cwp-blue-deep);

    background: #ffffff;
    border-radius: 11px;

    box-shadow:
        0 8px 18px rgba(0, 30, 64, .17);

    font-size: 10.5px;
    font-weight: 900;
}

#faq .cwp-faq__question::after {
    content: "+";

    position: absolute;
    top: 50%;
    right: 16px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    color: #ffffff;

    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 10px;

    font-size: 21px;
    line-height: 1;

    transform: translateY(-50%);

    transition:
        color .22s ease,
        background .22s ease,
        border-color .22s ease,
        transform .22s ease;
}

#faq .cwp-faq__item[open] .cwp-faq__question::after {
    content: "−";

    color: var(--cwp-blue);

    background: #ffffff;
    border-color: #ffffff;

    box-shadow:
        0 8px 18px rgba(0, 30, 64, .17);
}

#faq .cwp-faq__answer {
    padding: 0 22px 21px 69px;
}

#faq .cwp-faq__answer p {
    margin: 0;

    color: rgba(255, 255, 255, .78);

    font-size: 13.25px;
    line-height: 1.72;
}


/* =========================================================
   SOURCE
========================================================= */

#faq .cwp-faq__source {
    margin: 19px auto 0;
    padding: 13px 16px;

    color: #5b6e7e;

    background:
        linear-gradient(
            145deg,
            #f4f8fb,
            #ffffff
        );

    border: 1px solid rgba(0, 83, 160, .15);
    border-radius: 13px;

    box-shadow:
        0 9px 23px rgba(0, 59, 117, .055),
        inset 0 1px 0 #ffffff;

    font-size: 11.5px;
    line-height: 1.65;
    text-align: center;
}


/* =========================================================
   CTA
========================================================= */

#faq .cwp-faq__cta {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap: 25px;

    align-items: center;

    margin-top: 21px;
    padding: 27px 29px;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(255, 255, 255, .15),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #116bb7 0%,
            var(--cwp-blue) 48%,
            var(--cwp-blue-deep) 100%
        );

    border: 1px solid rgba(0, 83, 160, .24);
    border-radius: 21px;

    box-shadow:
        0 21px 48px rgba(0, 59, 117, .22),
        inset 0 1px 0 rgba(255, 255, 255, .12);
}

#faq .cwp-faq__cta > div:first-child > span {
    display: block;

    margin-bottom: 5px;

    color: #ffffff;

    font-size: 10.5px;
    line-height: 1.3;
    font-weight: 900;
    letter-spacing: .09em;
    text-transform: uppercase;
}

#faq .cwp-faq__cta h3 {
    margin-bottom: 7px;

    color: #ffffff;

    font-size: clamp(23px, 2.7vw, 31px);
    line-height: 1.2;
    font-weight: 860;
}

#faq .cwp-faq__cta p {
    margin: 0;

    color: rgba(255, 255, 255, .72);

    font-size: 13px;
    line-height: 1.62;
}

#faq .cwp-faq__actions {
    display: flex;

    gap: 9px;
}

#faq .cwp-faq__btn {
    position: relative;
    isolation: isolate;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    min-width: 158px;
    min-height: 48px;

    padding: 11px 16px;

    overflow: hidden;

    border-radius: 11px;

    font-size: 12.5px !important;
    line-height: 1.2 !important;
    font-weight: 850 !important;
    white-space: nowrap;
    text-align: center;
    text-decoration: none !important;

    transition:
        color .23s ease,
        background .23s ease,
        border-color .23s ease,
        box-shadow .23s ease,
        transform .23s ease;
}

#faq .cwp-faq__btn--primary {
    color: var(--cwp-blue-deep) !important;

    background: #ffffff;
    border: 1px solid #ffffff;

    box-shadow:
        0 10px 22px rgba(0, 30, 64, .18);
}

#faq .cwp-faq__btn--secondary {
    color: #ffffff !important;

    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .28);
}


/* =========================================================
   HOVER & FOCUS
========================================================= */

@media (hover: hover) {

    #faq .cwp-faq__item:hover {
        border-color: #7fb0d5;

        box-shadow:
            0 22px 48px rgba(0, 59, 117, .25),
            -8px 0 21px rgba(61, 106, 179, .08),
            8px 0 21px rgba(0, 83, 160, .06),
            inset 0 1px 0 rgba(255, 255, 255, .15);

        transform: translateY(-4px);
    }

    #faq .cwp-faq__item:hover .cwp-faq__question::after {
        color: var(--cwp-blue);

        background: #ffffff;
        border-color: #ffffff;

        transform:
            translateY(-50%)
            scale(1.05);
    }

    #faq .cwp-faq__btn--primary:hover {
        color: #ffffff !important;

        background:
            linear-gradient(
                135deg,
                var(--cwp-blue-soft),
                var(--cwp-blue)
            );

        border-color: var(--cwp-blue-soft);

        box-shadow:
            0 14px 29px rgba(0, 43, 87, .25);

        transform: translateY(-3px);
    }

    #faq .cwp-faq__btn--secondary:hover {
        color: var(--cwp-blue-deep) !important;

        background: #ffffff;
        border-color: #ffffff;

        box-shadow:
            0 14px 29px rgba(0, 43, 87, .21);

        transform: translateY(-3px);
    }

}

#faq .cwp-faq__question:focus-visible,
#faq .cwp-faq__btn:focus-visible {
    outline: 3px solid rgba(0, 83, 160, .58);
    outline-offset: 3px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media only screen and (max-width: 900px) {

    #faq .cwp-faq__grid {
        grid-template-columns: 1fr;
    }

    #faq .cwp-faq__cta {
        grid-template-columns: 1fr;
    }

}

@media only screen and (max-width: 560px) {

    #faq.cwp-faq-section {
        padding: 36px 0 !important;
    }

    #faq.cwp-faq-section > .is-boxes > .is-container {
        padding-right: 12px !important;
        padding-left: 12px !important;
    }

    #faq .row {
        margin-right: -12px !important;
        margin-left: -12px !important;
    }

    #faq .col-md-12 {
        padding-right: 12px !important;
        padding-left: 12px !important;
    }

    #faq .cwp-faq__head {
        margin-bottom: 24px;

        text-align: left;
    }

    #faq .cwp-faq__head h2 {
        font-size: 31px;
    }

    #faq .cwp-faq__head p {
        font-size: 14px;
    }

    #faq .cwp-faq__question {
        grid-template-columns:
            34px
            minmax(0, 1fr);

        min-height: 74px;

        padding: 15px 51px 15px 15px;

        font-size: 13.75px;
    }

    #faq .cwp-faq__number {
        width: 34px;
        height: 34px;
    }

    #faq .cwp-faq__question::after {
        right: 13px;

        width: 31px;
        height: 31px;
    }

    #faq .cwp-faq__answer {
        padding: 0 16px 18px 61px;
    }

    #faq .cwp-faq__answer p {
        font-size: 13px;
    }

    #faq .cwp-faq__actions {
        display: grid;

        grid-template-columns: 1fr;
    }

    #faq .cwp-faq__btn {
        width: 100%;
        min-width: 0;
    }

    #faq .cwp-faq__source {
        text-align: left;
    }

}

@media only screen and (max-width: 390px) {

    #faq .cwp-faq__head h2 {
        font-size: 28px;
    }

    #faq .cwp-faq__question {
        grid-template-columns:
            31px
            minmax(0, 1fr);

        gap: 10px;

        padding-right: 47px;
        padding-left: 12px;

        font-size: 13.25px;
    }

    #faq .cwp-faq__number {
        width: 31px;
        height: 31px;
    }

    #faq .cwp-faq__answer {
        padding-right: 13px;
        padding-left: 53px;
    }

}


/* =========================================================
   CONTENTBUILDER EDIT MODE
========================================================= */

body.editmode #faq,
body.dnnEditState #faq,
body.dnnEditMode #faq,
.dnnEditState #faq,
.dnnEditMode #faq {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    min-height: 500px !important;
    height: auto !important;

    overflow: visible !important;
}

body.editmode #faq .cwp-faq-editor,
body.dnnEditState #faq .cwp-faq-editor,
body.dnnEditMode #faq .cwp-faq-editor,
.dnnEditState #faq .cwp-faq-editor,
.dnnEditMode #faq .cwp-faq-editor {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    min-height: 500px !important;
    height: auto !important;
}

@media (prefers-reduced-motion: reduce) {

    #faq * {
        transition: none !important;
    }

}


/* =========================================================
   CP12 / CP42 ROUTING & LINK UPDATES
========================================================= */

#faq .cwp-faq__route-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;

    margin: 0 0 23px;
}

#faq .cwp-faq__route-grid > a {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        34px;

    align-items: center;

    gap: 4px 12px;

    min-width: 0;
    min-height: 86px;

    padding: 16px 17px;

    color: var(--cwp-blue-deep) !important;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #edf5fc
        );

    border: 1px solid rgba(0, 83, 160, .18);
    border-radius: 16px;

    box-shadow:
        0 12px 28px rgba(0, 59, 117, .08),
        inset 0 1px 0 #ffffff;

    text-decoration: none !important;

    transition:
        border-color .24s ease,
        box-shadow .24s ease,
        transform .24s ease;
}

#faq .cwp-faq__route-grid strong,
#faq .cwp-faq__route-grid span {
    grid-column: 1;
}

#faq .cwp-faq__route-grid strong {
    font-size: 14px;
    line-height: 1.4;
    font-weight: 880;
}

#faq .cwp-faq__route-grid span {
    color: var(--cwp-muted);

    font-size: 11.5px;
    line-height: 1.5;
}

#faq .cwp-faq__route-grid b {
    grid-column: 2;
    grid-row: 1 / span 2;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--cwp-blue-soft),
            var(--cwp-blue)
        );

    border-radius: 50%;

    font-size: 17px;
    font-weight: 900;

    transition: transform .24s ease;
}

#faq .cwp-faq__answer a {
    color: #ffffff !important;

    font-weight: 850;
    text-decoration: underline !important;
    text-decoration-color: rgba(255, 255, 255, .58);
    text-underline-offset: 3px;
}

#faq .cwp-faq__source a {
    color: var(--cwp-blue) !important;

    font-weight: 820;
    text-decoration: underline !important;
}

#faq .cwp-faq__cta-phone {
    color: #ffffff !important;

    font-weight: 850;
    text-decoration: underline !important;
}

@media (hover: hover) {

    #faq .cwp-faq__route-grid > a:hover {
        border-color: rgba(0, 83, 160, .48);

        box-shadow:
            0 19px 39px rgba(0, 59, 117, .15),
            -7px 0 18px rgba(61, 106, 179, .055),
            7px 0 18px rgba(0, 83, 160, .04);

        transform: translateY(-4px);
    }

    #faq .cwp-faq__route-grid > a:hover b {
        transform: translateX(4px);
    }

    #faq .cwp-faq__answer a:hover {
        text-decoration-color: #ffffff;
    }

    #faq .cwp-faq__source a:hover {
        color: var(--cwp-blue-deep) !important;
    }

}

@media only screen and (max-width: 700px) {

    #faq .cwp-faq__route-grid {
        grid-template-columns: 1fr;
    }

}

@media only screen and (max-width: 560px) {

    #faq .cwp-faq__route-grid > a {
        min-height: 82px;

        padding: 14px;
    }

}

/* ========================================================================
   COMPONENT: RELATED SERVICES
   Safe redesign using the original HTML class names
======================================================================== */

#cwp-related-gas-services,
#cwp-related-gas-services * {
    box-sizing: border-box;
}

.cwp-related-section {
    position: relative !important;
    z-index: 2;
    isolation: isolate;

    display: block !important;
    width: 100% !important;

    margin: 0 0 -48px !important;
    padding: 0 0 48px !important;

    overflow: visible !important;

    background:
        radial-gradient(circle at 8% 8%, rgba(61, 106, 179, .30), transparent 30%),
        radial-gradient(circle at 92% 84%, rgba(0, 83, 160, .22), transparent 32%),
        linear-gradient(152deg, #123a66 0%, #08274f 48%, #07162f 100%) !important;

    border-top: 1px solid rgba(255, 255, 255, .10);
    border-bottom: 0 !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .07),
        0 -18px 44px rgba(0, 43, 87, .12);
}

.cwp-related-section::before {
    content: "";

    position: absolute;
    z-index: 0;
    inset: 0;

    pointer-events: none;
    opacity: .14;

    background-image:
        linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);

    background-size: 48px 48px;

    -webkit-mask-image:
        linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .52) 68%, transparent 100%);
    mask-image:
        linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .52) 68%, transparent 100%);
}

/* Covers a remaining one-pixel DNN seam above the footer. */
.cwp-related-section::after {
    content: "";

    position: absolute;
    z-index: 1;
    right: 0;
    bottom: -10px;
    left: 0;

    height: 12px;

    pointer-events: none;
    background: #07162f;
}

.cwp-related-section > .is-boxes,
.cwp-related-section > .is-boxes > .is-container,
.cwp-related-section .row,
.cwp-related-section .col-md-12 {
    position: relative !important;
    z-index: 2;

    display: block !important;
    float: none !important;

    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;

    margin: 0 auto !important;
    padding: 0 !important;

    transform: none !important;
}

.cwp-related-section .cwp-related-editor {
    position: relative !important;
    z-index: 2;

    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    width: 100% !important;
    min-height: 1px !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
}

#cwp-related-gas-services {
    --cwp-blue: #0053a0;
    --cwp-blue-soft: #3d6ab3;
    --cwp-blue-deep: #002b57;
    --cwp-red: #e2231a;
    --cwp-red-dark: #b91813;
    --cwp-white: #ffffff;
    --cwp-text: #1d2a37;
    --cwp-muted: #586d7e;
    --cwp-pale: #edf5fc;

    position: relative;
    z-index: 2;

    width: calc(100% - 40px);
    max-width: 1220px;

    margin: 0 auto !important;
    padding: clamp(54px, 6vw, 80px) 0 clamp(58px, 6vw, 80px) !important;

    color: #ffffff;

    font-family:
        Inter,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

#cwp-related-gas-services::before {
    content: "";

    position: absolute;
    top: 0;
    left: 50%;

    width: min(92%, 1040px);
    height: 1px;

    background:
        linear-gradient(90deg, transparent, rgba(255, 255, 255, .30), transparent);

    transform: translateX(-50%);
}


/* =========================================================
   HEADER
========================================================= */

#cwp-related-gas-services .cwp-related__header {
    max-width: 860px;

    margin: 0 auto 34px;

    text-align: center;
}

#cwp-related-gas-services .cwp-related__kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 36px;

    margin-bottom: 15px;
    padding: 8px 14px;

    color: #ffffff;

    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .20);
    border-radius: 999px;

    box-shadow:
        0 10px 24px rgba(0, 0, 0, .14),
        inset 0 1px 0 rgba(255, 255, 255, .11);

    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);

    font-size: 10.5px;
    line-height: 1.2;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

#cwp-related-gas-services .cwp-related__kicker::before {
    content: "";

    width: 8px;
    height: 8px;

    margin-right: 8px;

    background: #f0443b;
    border-radius: 50%;

    box-shadow:
        0 0 0 5px rgba(226, 35, 26, .17),
        0 0 16px rgba(226, 35, 26, .35);
}

#cwp-related-gas-services .cwp-related__header h2 {
    margin: 0 0 14px !important;
    padding: 0 !important;

    color: #ffffff !important;

    background: none !important;
    border: 0 !important;

    font-size: clamp(34px, 4vw, 48px) !important;
    line-height: 1.06 !important;
    font-weight: 880 !important;
    letter-spacing: -.04em !important;

    text-wrap: balance;

    text-shadow:
        0 8px 28px rgba(0, 0, 0, .20);
}

#cwp-related-gas-services .cwp-related__header h2::before,
#cwp-related-gas-services .cwp-related__header h2::after {
    display: none !important;
    content: none !important;
}

#cwp-related-gas-services .cwp-related__header h2 strong {
    display: block;

    margin-top: 5px;

    color: #8fc5f1 !important;

    font: inherit;
    text-shadow: none;
}

#cwp-related-gas-services .cwp-related__header p {
    max-width: 780px;

    margin: 0 auto !important;

    color: rgba(255, 255, 255, .76) !important;

    font-size: 15px;
    line-height: 1.7;
}


/* =========================================================
   SLIDER
========================================================= */

#cwp-related-gas-services .cwp-related-slider {
    display: grid;

    grid-template-columns:
        50px
        minmax(0, 1fr)
        50px;

    align-items: center;

    gap: 15px;
}

#cwp-related-gas-services .cwp-related-slider__viewport {
    min-width: 0;

    margin: -15px -5px -24px;
    padding: 15px 5px 24px;

    overflow: hidden;

    border-radius: 24px;
}

#cwp-related-gas-services .cwp-related__track {
    display: flex;

    gap: 15px;

    width: auto;
    margin: 0;

    will-change: transform;

    transition:
        transform .42s cubic-bezier(.22, .61, .36, 1);
}


/* =========================================================
   CARDS
========================================================= */

#cwp-related-gas-services .cwp-related-card {
    --card-accent: #0053a0;
    --card-accent-soft: #3d6ab3;
    --card-glow: rgba(0, 83, 160, .16);

    position: relative;

    display: flex !important;
    flex: 0 0 calc((100% - 45px) / 4);
    flex-direction: column;

    min-width: 0;
    min-height: 302px;

    padding: 24px 20px 20px;

    overflow: hidden;

    color: var(--cwp-text) !important;

    background:
        radial-gradient(circle at 100% 0%, var(--card-glow), transparent 38%),
        linear-gradient(150deg, #ffffff 0%, #eef5fa 100%);

    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 21px;

    box-shadow:
        0 21px 46px rgba(0, 0, 0, .22),
        0 0 0 1px rgba(0, 83, 160, .07),
        inset 0 1px 0 #ffffff;

    text-decoration: none !important;

    transform: translateY(0);

    transition:
        border-color .26s ease,
        box-shadow .26s ease,
        background .26s ease,
        transform .26s ease;
}

#cwp-related-gas-services .cwp-related-card--urgent {
    --card-accent: #e2231a;
    --card-accent-soft: #b91813;
    --card-glow: rgba(226, 35, 26, .14);
}

#cwp-related-gas-services .cwp-related-card::before {
    content: "";

    position: absolute;
    top: 0;
    right: 20px;
    left: 20px;

    height: 5px;

    border-radius: 0 0 999px 999px;

    background:
        linear-gradient(90deg, transparent, var(--card-accent), transparent);

    box-shadow:
        0 0 17px var(--card-glow);
}

#cwp-related-gas-services .cwp-related-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 54px;
    height: 54px;

    flex: 0 0 54px;

    margin-bottom: 18px;

    color: #ffffff;

    background:
        linear-gradient(135deg, var(--card-accent-soft), var(--card-accent));

    border-radius: 16px;

    box-shadow:
        0 12px 25px var(--card-glow),
        inset 0 1px 0 rgba(255, 255, 255, .20);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

#cwp-related-gas-services .cwp-related-card__icon svg {
    width: 25px;
    height: 25px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#cwp-related-gas-services .cwp-related-card__content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;

    min-width: 0;
}

#cwp-related-gas-services .cwp-related-card__label {
    display: block;

    min-height: 31px;

    margin-bottom: 7px;

    color: var(--card-accent);

    font-size: 10px;
    line-height: 1.45;
    font-weight: 850;
    letter-spacing: .07em;
    text-transform: uppercase;
}

#cwp-related-gas-services .cwp-related-card__content > h3 {
    display: block;

    margin: 0 0 9px !important;
    padding: 0 !important;

    color: var(--cwp-blue-deep) !important;

    background: transparent !important;
    border: 0 !important;

    font-size: 18px !important;
    line-height: 1.3 !important;
    font-weight: 850 !important;
    letter-spacing: -.02em !important;
}

#cwp-related-gas-services .cwp-related-card__content > h3::before,
#cwp-related-gas-services .cwp-related-card__content > h3::after {
    display: none !important;
    content: none !important;
}

#cwp-related-gas-services .cwp-related-card__description {
    display: block;

    margin-bottom: 18px;

    color: var(--cwp-muted);

    font-size: 13px;
    line-height: 1.64;
}

#cwp-related-gas-services .cwp-related-card__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 37px;
    height: 37px;

    margin-top: auto;

    color: #ffffff;

    background:
        linear-gradient(135deg, var(--card-accent-soft), var(--card-accent));

    border-radius: 50%;

    box-shadow:
        0 9px 19px var(--card-glow);

    font-size: 18px;
    font-weight: 900;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


/* =========================================================
   NAVIGATION
========================================================= */

#cwp-related-gas-services .cwp-related-slider__nav {
    appearance: none;
    -webkit-appearance: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 50px;
    height: 50px;

    padding: 0;

    color: #ffffff;

    background:
        linear-gradient(135deg, #1670c2, #0053a0, #002b57);

    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;

    box-shadow:
        0 14px 30px rgba(0, 0, 0, .24),
        inset 0 1px 0 rgba(255, 255, 255, .17);

    font-family: inherit;
    font-size: 19px;
    font-weight: 900;

    cursor: pointer;

    transition:
        color .23s ease,
        background .23s ease,
        border-color .23s ease,
        box-shadow .23s ease,
        opacity .23s ease,
        transform .23s ease;
}

#cwp-related-gas-services .cwp-related-slider__nav:disabled {
    color: rgba(255, 255, 255, .70);

    background: rgba(255, 255, 255, .09);
    border-color: rgba(255, 255, 255, .14);

    box-shadow: none;

    opacity: .46;
    cursor: default;
}

#cwp-related-gas-services .cwp-related-slider__footer {
    grid-column: 1 / -1;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 13px;

    margin-top: 18px;
}

#cwp-related-gas-services .cwp-related-slider__dots {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;
}

#cwp-related-gas-services .cwp-related-slider__dot {
    appearance: none;
    -webkit-appearance: none;

    width: 9px;
    height: 9px;

    padding: 0;

    background: rgba(255, 255, 255, .28);
    border: 0;
    border-radius: 999px;

    cursor: pointer;

    transition:
        width .23s ease,
        background .23s ease,
        box-shadow .23s ease;
}

#cwp-related-gas-services .cwp-related-slider__dot.is-active {
    width: 29px;

    background:
        linear-gradient(90deg, #72b4e9, #ffffff);

    box-shadow:
        0 0 15px rgba(114, 180, 233, .30);
}

#cwp-related-gas-services .cwp-related-slider__status {
    color: rgba(255, 255, 255, .68);

    font-size: 11px;
    font-weight: 760;
}


/* =========================================================
   HOVER & FOCUS
========================================================= */

@media (hover: hover) {

    #cwp-related-gas-services .cwp-related-card:hover {
        border-color: rgba(255, 255, 255, .94);

        background:
            radial-gradient(circle at 100% 0%, var(--card-glow), transparent 42%),
            linear-gradient(150deg, #ffffff, #e7f2fa);

        box-shadow:
            0 30px 64px rgba(0, 0, 0, .29),
            0 0 0 1px var(--card-glow),
            inset 0 1px 0 #ffffff;

        transform: translateY(-7px);
    }

    #cwp-related-gas-services
    .cwp-related-card:hover
    .cwp-related-card__icon {
        transform:
            translateY(-3px)
            rotate(-3deg)
            scale(1.035);
    }

    #cwp-related-gas-services
    .cwp-related-card:hover
    .cwp-related-card__arrow {
        transform: translateX(5px);
    }

    #cwp-related-gas-services
    .cwp-related-slider__nav:not(:disabled):hover {
        background:
            linear-gradient(135deg, #e83b32, var(--cwp-red), var(--cwp-red-dark));

        border-color: rgba(255, 255, 255, .30);

        box-shadow:
            0 18px 37px rgba(0, 0, 0, .29),
            0 0 22px rgba(226, 35, 26, .18);

        transform:
            translateY(-3px)
            scale(1.03);
    }

}

#cwp-related-gas-services .cwp-related-card:focus-visible,
#cwp-related-gas-services .cwp-related-slider__nav:focus-visible,
#cwp-related-gas-services .cwp-related-slider__dot:focus-visible {
    outline: 3px solid rgba(255, 255, 255, .82);
    outline-offset: 3px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media screen and (max-width: 1120px) {

    #cwp-related-gas-services .cwp-related-card {
        flex-basis: calc((100% - 30px) / 3);
    }

}

@media screen and (max-width: 760px) {

    .cwp-related-section {
        margin-bottom: -38px !important;
        padding-bottom: 38px !important;
    }

    .cwp-related-section::after {
        bottom: -8px;
        height: 10px;
    }

    #cwp-related-gas-services {
        width: calc(100% - 24px);

        padding-top: 46px !important;
        padding-bottom: 56px !important;
    }

    #cwp-related-gas-services .cwp-related__header {
        margin-bottom: 28px;

        text-align: left;
    }

    #cwp-related-gas-services .cwp-related__header h2 {
        font-size: clamp(30px, 8vw, 39px) !important;
    }

    #cwp-related-gas-services .cwp-related__header p {
        font-size: 14px;
    }

    #cwp-related-gas-services .cwp-related-slider {
        grid-template-columns:
            42px
            minmax(0, 1fr)
            42px;

        gap: 8px;
    }

    #cwp-related-gas-services .cwp-related-slider__nav {
        width: 42px;
        height: 42px;
    }

    #cwp-related-gas-services .cwp-related-card {
        flex-basis: calc((100% - 15px) / 2);

        min-height: 286px;

        padding: 20px 17px 18px;
    }

}

@media screen and (max-width: 520px) {

    #cwp-related-gas-services {
        width: calc(100% - 18px);

        padding-top: 40px !important;
        padding-bottom: 50px !important;
    }

    #cwp-related-gas-services .cwp-related__kicker {
        min-height: 33px;

        padding: 7px 11px;

        font-size: 9.25px;
    }

    #cwp-related-gas-services .cwp-related-slider {
        grid-template-columns:
            36px
            minmax(0, 1fr)
            36px;

        gap: 6px;
    }

    #cwp-related-gas-services .cwp-related-slider__nav {
        width: 36px;
        height: 36px;

        font-size: 16px;
    }

    #cwp-related-gas-services .cwp-related-card {
        flex-basis: 100%;

        min-height: 0;
    }

    #cwp-related-gas-services .cwp-related-card__label {
        min-height: 0;
    }

}

@media screen and (max-width: 390px) {

    #cwp-related-gas-services .cwp-related-slider {
        grid-template-columns:
            32px
            minmax(0, 1fr)
            32px;

        gap: 5px;
    }

    #cwp-related-gas-services .cwp-related-slider__nav {
        width: 32px;
        height: 32px;

        font-size: 14px;
    }

    #cwp-related-gas-services .cwp-related-card {
        padding: 18px 15px 16px;
    }

}


/* =========================================================
   CONTENTBUILDER EDIT MODE
========================================================= */

body.editmode .cwp-related-section,
body.dnnEditState .cwp-related-section,
body.dnnEditMode .cwp-related-section,
.dnnEditState .cwp-related-section,
.dnnEditMode .cwp-related-section,
body.editmode .cwp-related-editor,
body.dnnEditState .cwp-related-editor,
body.dnnEditMode .cwp-related-editor,
.dnnEditState .cwp-related-editor,
.dnnEditMode .cwp-related-editor {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    min-height: 360px !important;
    height: auto !important;

    margin-bottom: 0 !important;
    padding-bottom: 0 !important;

    overflow: visible !important;
}

body.editmode .cwp-related-section::after,
body.dnnEditState .cwp-related-section::after,
body.dnnEditMode .cwp-related-section::after,
.dnnEditState .cwp-related-section::after,
.dnnEditMode .cwp-related-section::after {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {

    #cwp-related-gas-services * {
        transition: none !important;
        animation: none !important;
    }

}

/* ========================================================================
   COMPONENT: PAGE INTEGRATION
======================================================================== */
/* =========================================================
   COMBINED PAGE INTEGRATION
========================================================= */
#cwp-cert-content .cwp-cert-nav__tabs {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

#cwp-cert-content .cwp-cert-external-panel[hidden],
#cwp-cert-content .cwp-cert-tab-panel[hidden] {
    display: none !important;
}

#cwp-cert-content .cwp-cert-external-panel {
    width: 100%;
    margin-top: 18px !important;
    border-radius: 24px;
}

#cwp-cert-content #matter.cwp-gsm-section,
#cwp-cert-content #faq.cwp-faq-section,
#cwp-cert-content #cwp-cert-panel-feature.cwp-gld-feature-section {
    padding-right: 20px !important;
    padding-left: 20px !important;
}

#cwp-cert-content #matter .cwp-gsm,
#cwp-cert-content #faq .cwp-faq,
#cwp-cert-content #cwp-gld-feature {
    max-width: 1120px;
    margin-right: auto !important;
    margin-left: auto !important;
}

#cwp-cert-content #cwp-cert-panel-feature {
    overflow: hidden !important;
}

#cwp-cert-content #cwp-gld-feature .cwp-gld-feature__text a {
    color: #ffffff !important;
    font-weight: 850;
    text-decoration: underline !important;
}

#cwp-cert-content #cwp-gld-feature .cwp-gld-feature__point a {
    color: #0053a0 !important;
    font-weight: 850;
    text-decoration: underline !important;
}

@media (max-width: 1180px) {
    #cwp-cert-content .cwp-cert-nav__tabs {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    #cwp-cert-content .cwp-cert-nav__tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #cwp-cert-content #matter.cwp-gsm-section,
    #cwp-cert-content #faq.cwp-faq-section,
    #cwp-cert-content #cwp-cert-panel-feature.cwp-gld-feature-section {
        padding-right: 12px !important;
        padding-left: 12px !important;
    }
}

@media (max-width: 460px) {
    #cwp-cert-content .cwp-cert-nav__tabs {
        grid-template-columns: 1fr;
    }
}