/* === Variables === */
:root {
	/* Brand Colours */
	--ccc3-primary: #038752;
	--ccc3-primary-dark: #074c30;
	--ccc3-accent: #B14D18;
	--ccc3-dark: #1f497d;
	--ccc3-green: #008752;
	--ccc3-green-dark: #094C31;

	/* svc design-system colours exposed globally so the shared .svc-btn system
	   works outside the .svc-final wrapper (June 2026 button consolidation). */
	--svc-green: #008752;
	--svc-green-dark: #074c30;
	--svc-orange: #B14D18;
	--svc-orange-dark: #9a4214;

	/* Typography Colours */
	--ccc3-text: #7a7a7a;
	--ccc3-heading: #676a6c;

	/* Typography Sizes */
	--ccc3-h1-size: 45px;
	--ccc3-h2-size: 30px;
	--ccc3-h3-size: 24px;
	--ccc3-h4-size: 20px;
	--ccc3-h5-size: 18px;
	--ccc3-h6-size: 16px;
	--ccc3-p-size: 14px;
	--ccc3-subheading-size: 12px;
	--ccc3-hero-h1-size: 44px;

	/* Typography Fonts */
	--ccc3-heading-font: 'Montserrat', sans-serif;
	--ccc3-body-font: 'Open Sans', helvetica, arial, sans-serif;

	/* Button Properties */
	--ccc3-btn-padding: 15px 40px;
	--ccc3-btn-font-size: 20px;
	--ccc3-btn-font-weight: 700;
	--ccc3-btn-border-width: 2px;
	--ccc3-btn-transition: .2s ease;
}

/* === Base Typography === */
/* All paragraphs default to 14px grey text */
p {
	font-size: var(--ccc3-p-size);
	color: var(--ccc3-text);
}

/* Lists match paragraph styling */
li {
	font-size: var(--ccc3-p-size);
	color: var(--ccc3-text);
}

/* === Fake Headings === */
/* Use these classes on p tags in WYSIWYG to create heading appearance */
/* These override the base p styling when applied */
/* Using !important on font-size to override .landing-page section p specificity */

.h1, h1 {
	font-size: var(--ccc3-h1-size) !important;
	font-family: var(--ccc3-heading-font);
	font-weight: 700;
	color: var(--ccc3-heading);
	text-transform: uppercase;
	line-height: 0.9;
	margin-bottom: 0.5rem;
}

.h2, h2 {
	font-size: var(--ccc3-h2-size) !important;
	font-family: var(--ccc3-heading-font);
	font-weight: 700;
	color: var(--ccc3-heading);
	line-height: 1.2;
	margin-bottom: 0.5rem;
}

.h3, h3 {
	font-size: var(--ccc3-h3-size) !important;
	font-family: var(--ccc3-heading-font);
	font-weight: 700;
	color: var(--ccc3-heading);
	line-height: 1.2;
	margin-bottom: 0.5rem;
}

.h4, h4 {
	font-size: var(--ccc3-h4-size) !important;
	font-weight: 700;
	color: var(--ccc3-heading);
	line-height: 1.2;
	margin-bottom: 0.5rem;
}

.h5, h5 {
	font-size: var(--ccc3-h5-size) !important;
	font-weight: 600;
	color: var(--ccc3-heading);
	line-height: 1.2;
	margin-bottom: 0.5rem;
}

.h6, h6 {
	font-size: var(--ccc3-h6-size) !important;
	font-weight: 600;
	color: var(--ccc3-heading);
	line-height: 1.2;
	margin-bottom: 0.5rem;
}

/* === Text Colour Utilities === */
/* Use these to override text colour */
.text-white,
.white {
	color: #fff !important;
}

/* Use .highlight or .green to make text green (fake link appearance) */
.highlight,
.green-highlight {
	color: var(--ccc3-green) !important;
	font-weight: 700;
}

/* === Font Size Utilities === */
.fs-14 {
	font-size: 14px !important;
}

.fs-16 {
	font-size: 16px !important;
}

.fs-18 {
	font-size: 18px !important;
}

.fs-24 {
	font-size: 24px !important;
}

/* === Font Family Utilities === */
.title-font {
	font-family: var(--ccc3-heading-font);
	line-height: 1;
}

/* === CCC3 Buttons === */
/* Base button - shared properties */
.ccc3-btn {
	padding: var(--ccc3-btn-padding);
	font-size: var(--ccc3-btn-font-size);
	font-weight: var(--ccc3-btn-font-weight);
	font-family: var(--ccc3-heading-font);
	border: var(--ccc3-btn-border-width) solid;
	display: inline-block;
	margin-top: 10px;
	transition: var(--ccc3-btn-transition);
	text-decoration: none;
	text-transform: uppercase;
	text-align: center;
	line-height: 1;
	cursor: pointer;
}

/* White/Outline button - for dark backgrounds */
.ccc3-btn-white {
	color: #fff;
	background: transparent;
	border-color: #fff;
}

.ccc3-btn-white:hover {
	color: var(--ccc3-accent);
	background: #fff;
	border-color: var(--ccc3-accent);
}

/* Rustic/Orange button */
.ccc3-btn-rustic {
	color: #fff;
	background: var(--ccc3-accent);
	border-color: var(--ccc3-accent);
}

.ccc3-btn-rustic:hover {
	color: var(--ccc3-accent);
	background: #fff;
	border-color: var(--ccc3-accent);
}

/* Green button */
.ccc3-btn-green {
	color: #fff;
	background: var(--ccc3-green-dark);
	border-color: var(--ccc3-green-dark);
}

.ccc3-btn-green:hover {
	color: var(--ccc3-green-dark);
	background: #fff;
	border-color: var(--ccc3-green-dark);
}

.lh-normal {
	line-height: 1 !important;
}

.choose-title {
	text-transform: uppercase!important;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700!important;
	font-size: 1.75rem!important;
}

.strapline {
	font-size: 16px!important;
	color: #C59C35;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 2px;
}

.custom-para {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	color: #fff;
	margin-top: 30px;
}

.content-list {
	font-size: 16px;
	padding-left: 22px;
}

/* === Topnav === */
.topnav {
	background-color: #b14d19 !important;
	color: #fff;
	height: 35px;
	position: fixed;
	top: 0;
	z-index: 999999;
}

.topnav a {
	color: #fff;
	margin-right: 10px;
	font-size: 12px;
	text-decoration: none;
	font-weight: 300!important;
}

.topnav a:hover,
.topnav a:hover span,
.topnav a:hover i {
	color: #000;
}

.topnav a:hover {
	color: #333 !important;
}

.topnav i {
	font-size: 14px;
}

.topnav span {
	color: inherit;
}

.topnav .topnav-divider {
	color: rgba(255, 255, 255, 0.3);
	font-size: 11px;
}

.topnav h1 {
	display: inline-block;
	color: #fff !important;
	font-size: 13px !important;
	text-transform: capitalize;
	margin: 0 10px !important;
}

.topnav span:nth-child(1) {
	display: inline-block;
	color: #fff !important;
	font-size: 12px !important;
}

.topnav .basket-icon-wrapper {
	position: relative;
	display: inline-block;
}

.topnav .basket-count {
	position: absolute;
	top: -6px;
	right: -8px;
	background-color: #074c30;
	color: #fff !important;
	font-size: 10px;
	font-weight: 600;
	min-width: 18px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	padding: 0 4px;
	box-sizing: border-box;
}

.topnav a:hover .basket-count {
	color: #fff !important;
	background-color: #074c30;
}

/* === Header / Branding / Logo === */
.clearHeader {
	background-color: transparent;
	transition: 1s ease;
}

.clearHeader.darkHeader {
	background-color: var(--ccc3-primary-dark);
	transition: background-color 0.4s ease;
}

.darkHeader {
	background-color: #074c30;
	transition: 1s ease;
}

.makeGreen {
	background-color: var(--ccc3-primary-dark);
	transition: 1s ease;
}

.pagefix {
	margin-top: 120px;
}

.pageContent {
	margin-top: 0;
}

.logo-top {
	position: absolute;
	top: -10px;
	left: 20px;
	transition: 1s ease;
}

.logo-top.shrinkLogo {
	height: 90px;
	transition: 1s ease;
	top: -10px!important;
	left: 20px;
}

/* Logo size by width (June 2026 client req): the larger 150px logo only appears
   at 1620px+, where there's room for it beside the nav. Below 1620px it is always
   the smaller 125px — including the 768–991px tablet/collapsed range, which used
   to fall back to the image's natural 150px (the "gets bigger again at ~990px"
   the client reported). Mobile (≤767px, 70px) and the scroll-shrink
   (.shrinkLogo, 90px) are handled separately. */
@media (min-width: 768px) and (max-width: 1619.98px) {
	.logo-top:not(.shrinkLogo) { height: 125px; }
}
@media (min-width: 1620px) {
	.logo-top:not(.shrinkLogo) { height: 150px; }
}

/* Shrink the (absolutely-positioned) logo while the mobile menu is open, so the
   tall logo doesn't cover the expanded menu items in the 768–991px hamburger
   range (June 2026 client req). */
@media (max-width: 991.98px) {
	.row:has(.navbar-collapse.show) .logo-top { height: 70px !important; }
}

header {
	max-height: 500px !important;
}

/* === Navbar & Mobile Nav === */
.navbar {
	color: #fff;
	z-index: 1;
}

.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover {
	text-decoration: none !important;
}

.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link {
	color: #fff !important;
}

.navbar-toggler-icon {
	-webkit-filter: invert(100%);
}

.navbar-light .navbar-toggler {
	color: #fff;
	border-color: #fff;
}

.dropdown-menu.bg-white.p-3.shadow.show {
	background: #074c30 !important;
}

/* === Links === */
a {
	color: var(--ccc3-green);
	text-decoration: none;
	font-weight: 700;
}

a:hover {
	color: #074c30;
}

/* === Buttons === */
.btn-primary {
	background-color: #b14d19 !important;
	border-color: #b14d19 !important;
	text-transform: uppercase;
	font-size: 14px;
	transition: .3s ease;
	line-height: 0;
	padding: 21px 20px !important;
	color: #fff;
}

.btn-primary a {
	color: #fff;
}

.btn-primary a {
	display: block;
	transition: .3s ease;
	padding: 0 10px;
}

.btn-primary:hover a {
	transform: scale(1.2);
	color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
	background-color: var(--ccc3-primary-dark) !important;
	border-color: var(--ccc3-primary-dark) !important;
	color: #fff;
}

.btn-primary.btn-primary-alt,
.btn-primary.btn-primary-alt:hover {
	background-color: #eb7518 !important;
}

.landing-page .btn-primary:not(.btn-primary-green, .btn-primary-rustic) {
	background-color: #b14d19 !important;
	border-color: #b14d19 !important;
}

.btn-primary-rustic {
	background-color: #b14d19 !important;
	border: 1px solid #b14d19 !important;
}

.btn-primary-rustic:hover {
	color: #B14D18 !important;
	background: #fff;
	background-color: white !important;
	border: 1px solid #b14d19 !important;
}

.btn-primary-green,
.landing-page .btn-primary.btn-primary-green {
	background-color: #008652 !important;
	border: 1px solid #008652 !important;
}

.btn-primary-green:hover,
.landing-page .btn-primary.btn-primary-green:hover {
	color: #008652 !important;
	background: #fff;
	background-color: white !important;
	border: 1px solid #008652 !important;
}

header .top-header .btn.btn-lg.btn-primary {
	line-height: 0;
	padding: 26px 52px !important;
}

header .top-header .btn.btn-lg.btn-primary a {
	display: block;
	transition: .3s ease;
}

header .top-header .btn.btn-lg.btn-primary:hover a {
	transform: scale(1.2);
	color: #fff;
}

.bg-dark-green {
	background: var(--ccc3-primary-dark) !important;
	border: 0 !important;
	box-shadow: none !important;
}

.btn-success.green {
	background-color: rgba(0, 149, 49, 0.71);
	border-color: #00380a;
	color: #fff;
	font-size: 16px;
	padding: 20px;
}

.btn-white {
	background-color: #fff;
	border-color: #fff;
	color: #000 !important;
	font-size: 14px;
	padding: 10px 20px;
	font-weight: 600;
	text-transform: uppercase;
}

.btn-white:hover {
	background: #d6d6d6;
	background-color: #d6d6d6 !important;
	border: 1px solid #d6d6d6;
}

.btn-white a {
	display: block;
	transition: .3s ease;
}

.btn-white:hover a {
	transform: scale(1.1);
}

.btn:focus {
	outline: 0;
	box-shadow: 0 0 0 0rem rgb(13 110 253 / 0%) !important;
}

.bg-secondary {
	background-color: #b14d19 !important;
}

.square-button {
	border-radius: 0px !important;
}

.border-none {
	border-radius: 0px !important;
}

/* === Sitewide Buttons === */
.sitewide-btn {
	color: #fff!important;
	background: #fff0;
	padding: 15px 40px;
	border: 2px solid #fff;
	font-size: 24px;
	font-weight: 700;
	display: inline-block;
	margin-top: 10px;
	transition: .2s ease;
}

.sitewide-btn:hover {
	background: #fff;
	color: #000!important;
}

.sitewide-btn.btn-small {
	color: #fff!important;
	background: #fff0;
	padding: 15px 20px;
	border: 2px solid #fff;
	font-size: 20px;
	font-weight: 700;
	display: inline-block;
	margin-top: 10px;
	transition: .2s ease;
}

.sitewide-btn.btn-small:hover {
	background: #fff;
	color: #000!important;
}

.sitewide-btn.dark-green {
	padding: 6px 25px;
	border: 2px solid #074D30;
	font-size: 16px;
	font-weight: 700;
	display: inline-block;
	margin-top: 10px;
	transition: .2s ease;
	color: #fff!important;
	background: #074D30;
}

.sitewide-btn.dark-green:hover {
	color: #074D30!important;
	background: #fff0;
}

.sitewide-btn.rustic {
	color: #fff!important;
	background: #B14D18;
	padding: 15px 20px;
	border: 2px solid #B14D18;
	font-size: 20px;
	font-weight: 700;
	display: inline-block;
	margin-top: 10px;
	transition: .2s ease;
}

.sitewide-btn.rustic:hover {
	color: #B14D18!important;
	background: #fff;
}

.sitewide-btn-alt {
	color: #B14D18!important;
	background: #fff0;
	padding: 15px 40px;
	border: 2px solid #B14D18;
	font-size: 24px;
	font-weight: 700;
	display: inline-block;
	margin-top: 10px;
	transition: .2s ease;
}

.sitewide-btn-alt:hover {
	background: #B14D18;
	color: #fff!important;
}

/* === Forms & Inputs === */
.form-control {
	font-size: 14px !important;
}

.form-control:focus,
.single-line:focus {
	border-color: var(--ccc3-green);
}

label {
	font-size: 14px;
	color: #555;
}

label.selected {
	background-color: rgba(244, 244, 244, 0.8) !important;
}

label.makeSelected {
	background: #f4f4f4!important;
	border-radius: 0px!important;
	border: 1px solid #ccc!important;
	transition: .2s ease;
	font-weight: 600;
}

label.makeSelected:hover {
	background: #f4f4f4!important;
	border: 1px solid #028652!important;
	color: #028652;
}

label.makeSelected.selected {
	background: #f4f4f4!important;
	border: 1px solid #028652!important;
	color: #028652;
}

label.makeSelected svg {
	color: #676a6c!important;
}

label.makeSelected:hover svg {
	color: #028652!important;
}

label.makeSelected.selected svg {
	color: #028652!important;
}

.hideRadios input {
	position: fixed;
	opacity: 0;
	pointer-events: none;
}

.hideRadios .showInputs input {
	opacity: 1;
	pointer-events: auto;
	position: initial;
}

input[type=checkbox],
input[type=radio] {
	accent-color: #028652;
}

.default-field {
	background: #f6f6f6;
	border-radius: 0px;
	border: 0px;
	color: #6c757d;
	padding: 10px;
}

.default-field:focus {
	box-shadow: 0 0 0 0.1rem rgb(215 82 32 / 50%);
}

.text-field {
	background: #f6f6f6;
	border-radius: 0px;
	border: 0px;
	color: #ccc;
	padding: 10px;
}

.text-field:focus {
	box-shadow: 0 0 0 0.1rem rgb(215 82 32 / 50%);
}

/* === Buy Flow / Wizard === */
.wizardBlock form {
	background: #fff !important;
	border: 1px solid #ccc !important;
}

.wizardBlock .btn-primary.nextStep {
	background-color: var(--ccc3-primary) !important;
	border-radius: 0px;
}

.wizardBlock .btn-primary.previousStep {
	background-color: var(--ccc3-accent) !important;
	border-radius: 0px;
}

.wizard-slide {
	display: none;
}

.wizard-slide.active {
	display: initial;
}

.wizard-step {
	display: inline-block;
	text-align: center;
	vertical-align: top;
}

.wizard-step span {
	border-radius: 0px!important;
	background: #f4f4f4!important;
	color: #676a6c!important;
	border: 1px solid #ccc !important;
	display: block;
	margin: 0 10px 10px;
	padding: 15px 20px;
	vertical-align: middle;
	font-size: 14px;
}

.wizard-step.active span {
	background: #f4f4f4 !important;
	color: #028652!important;
	border-radius: 0px!important;
	border: 1px solid #028652!important;
	transition: .2s ease;
}

.wizard-step.complete span {
	background-color: var(--ccc3-primary-dark);
	color: #fff;
	border: none;
}

.policy-extras-container {
	border: 2px solid rgb(7 76 48) !important;
	padding: 20px;
	border-radius: 10px;
	box-shadow: 0 5px 29px 0 rgb(68 88 144 / 20%);
}

.wizardBlock .policy-extras-container {
	border: 0px !important;
}

.policy-extras-container input.me-2 {
	min-width: 13px !important;
	min-height: 13px !important;
	margin: auto 0;
}

[data-extentions] {
	padding-left: 20px;
	padding-bottom: 20px;
}

.alreadyMember {
	border: 1px solid #ddd;
	margin-top: 20px;
}

.paymentContainer .btn-primary,
.landing-page .paymentBlockLeft .btn-primary {
	background-color: var(--ccc3-primary) !important;
	color: #fff;
}

.wizardBlock input.btn.btn-success.green {
	border-radius: 0px;
}

.cover-purchase-form .accordion-header {
	border-bottom: 1px solid #eee;
}

.cover-purchase-form .cover-purchase-heading {
	text-align: center;
	color: #676a6c;
	margin-top: 0; /* was 10px — the 72px cc-pagehead padding-top now sets the gap; 10px made it 82px */
	font-size: 30px;
	font-family: 'Montserrat', sans-serif;
	line-height: 1;
	text-transform: uppercase!important;
	font-weight: 700!important;
}

.cover-purchase-form .row div.col-md-6.pt50 {
	padding: 50px 0;
}

.cover-purchase-form .form-select {
	border-radius: 0px;
}

.cover-purchase-form .form-select:focus {
	box-shadow: none;
}

/* Restore dropdown arrow for form-select elements (overridden by form-control in style.css) */
.form-select.form-control {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 16px 12px;
	padding-right: 2.25rem;
}

.existing-member-box {
	padding: 30px 90px;
	border-right: 1px solid #028652;
}

.existing-member-box .bg-light {
	background: #fff !important;
	border: 0px solid !important;
}

.existing-member-box hr {
	border: none;
}

.existing-member-box strong {
	font-weight: 600;
}

.existing-member-box .h4.fw-bold {
	text-transform: uppercase;
	color: #028652;
}

.new-member-box {
	padding: 30px;
}

.new-member-box .h4.fw-bold {
	text-transform: uppercase;
	color: #028652;
}

.buy-page-hero-img {
	background-size: cover !important;
	background-repeat: no-repeat !important;
	background-position: center center !important;
}

/* === Cart / Basket === */
.basketPage {
	padding-top: 92px;
}
.onePageCheckout {
	padding-top: 240px;
}

.basketPage .column-labels {
	margin-bottom: 70px !important;
}

.cart .product {
	border: 1px solid #d1d1d1;
	padding: 20px;
}


.product .remove-product {
	letter-spacing: 0.1px;
}

.cart .product-title-cart {
	text-transform: uppercase !important;
	color: var(--ccc3-primary) !important;
	font-weight: 700 !important;
	font-size: 1.5rem !important;
}

.product-title-cart a {
	font-weight: bold;
	margin-bottom: 12px;
	display: inline-block;
}

.totals .totals-item-total {
	font-family: inherit;
}

[data-role="shipping-total"] {
	display: none;
}

/* === Accessories / Products === */
.accessoriesBlock {
	height: auto !important;
}

.accessoriesBlock.selected-box {
	border: 1px solid #3e8e42 !important;
	background-color: #d3eccb !important;
}

.wizardBlock .accessoriesBlock {
	border-radius: 0px !important;
	background: #fff !important;
	color: #676a6c !important;
	border: 1px solid #ccc !important;
	transition: .2s ease;
}

.wizardBlock .accessoriesBlock.selected-box {
	background: #f4f4f4 !important;
	color: #676a6c !important;
	border-radius: 0px !important;
	border: 1px solid #028652 !important;
}

.wizardBlock .accessoriesBlock.selected-box h3 {
	color: #028652!important;
}

.accessoriesBlock-image-wrap {
	min-width: 50%;
}

.accessoriesBlock-image {
	width: 100%;
}

/* === Extension Cards === */
.extension-card {
	background: #fff;
	position: relative;
	border: 1px solid #eee;
	padding: 20px 25px;
}

.extension-card.selected-box {
	background: #f4f4f4;
	position: relative;
	border: 1px solid #028652;
	padding: 20px 25px;
}

.extension-card .extension-title {
	font-size: 18px;
	font-weight: 300;
	text-align: center;
	color: #028652;
}

.extension-card.selected-box .extension-title {
	font-size: 18px;
	font-weight: 300;
	text-align: center;
}

.extension-card input,
.green-checkbox {
	accent-color: #028652;
}

/* === Fake Checkbox === */
.fake-checkbox {
	display: inline-block;
	border: 1px solid #eee;
	width: 18px;
	height: 18px;
	background: #fff;
	position: relative;
	margin: 0 8px 0 0;
}

.fake-checkbox-check {
	position: absolute;
	font-size: 16px;
	left: 1px;
	top: 0px;
	color: #fff;
	display: none;
}

.wizardBlock .accessoriesBlock.selected-box .fake-checkbox {
	background: #028652;
}

.wizardBlock .accessoriesBlock.selected-box .fake-checkbox-check {
	color: #fff;
	display: block;
}

.price-check-line {
	display: flex;
	align-items: center;
	justify-content: center;
}

.green-title {
	color: #028652;
}

/* === Benefits === */
.benefit-name-title {
	margin-bottom: 0;
}

.benefit-subtitle {
	color: #878787 !important;
	font-size: 15px !important;
}

.benefit-subtitle strong {
	color: var(--ccc3-accent) !important;
	font-size: 120%;
}

.smallerp li.active {
	background-color: #F8F8F8;
	border: thin solid var(--ccc3-primary) !important;
}

.benefit-grid-tl {
	border-right: 1px solid #008752;
	border-bottom: 1px solid #008752;
}

.benefit-grid-tr {
	border-bottom: 1px solid #008752;
}

.benefit-grid-ml {
	border-right: 1px solid #008752;
	border-bottom: 1px solid #008752;
}

.benefit-grid-mr {
	border-bottom: 1px solid #008752;
}

.benefit-grid-bl {
	border-right: 1px solid #008752;
}

.benefit-grid-tl-b {
	border-right: 1px solid #008752;
	border-bottom: 1px solid #008752;
}

.benefit-grid-tr-b {
	border-bottom: 1px solid #008752;
}

.benefit-grid-ml-b {
	border-right: 1px solid #008752;
	border-bottom: 1px solid #008752;
}

.benefit-grid-mr-b {
	border-bottom: 1px solid #008752;
}

.benefit-grid-bl-b {
	border-right: 1px solid #008752;
}

.benefit-img {
	height: 150px;
	max-height: 100%;
	max-width: 100%;
	object-fit: contain;
}

.benefit-image-div {
	height: 150px;
	max-height: 150px;
	max-height: 100%;
}

.benefit-image-div img {
	max-width: 100%;
	object-fit: contain;
	max-height: 100%;
}

.benefit-contact {
	font-size: 18px;
	text-decoration: none;
}

.benefit-contact:hover {
	text-decoration: none;
}

.benefit-minh {
	height: 90%;
}

.benefit-minh2 {
	height: 85%;
}

.benefit-minh3 {
	height: 90%;
}

.benefit-minh4 {
	height: 85%;
}

.benefit-icon {
	font-size: 80px !important;
}

/* === Pricing === */
.pricing-price-divider {
	border-top: 2px solid #008752;
	width: 20%;
	display: inline-block;
	padding: 0px;
	margin: 0px;
	transition: .2s ease;
}

.pricing-plan:hover .pricing-price-divider {
	width: 50%;
	border-top: 4px solid #008752;
	box-shadow: 2px 1px 14px 0px #008752!important;
}

.landing-page .pricing-plan {
	transition: .2s ease;
	margin: 20px 5px 0 5px !important;
	border: 1px solid #fff;
}

.landing-page .pricing-plan:hover {
	transform: translateY(-7px);
	border: 1px solid #084D31;
}

.landing-page .pricing-plan:hover ul {
	background: #ffffffa1;
	backdrop-filter: blur(5px);
}

.landing-page .pricing-plan ul {
	background: #ffffff9c;
	transition: .2s ease;
	margin: 0;
}

.landing-page .pricing-plan .pricing-price span {
	color: #084D31 !important;
}

.pricing-price span {
	font-size: 36px;
}

.landing-page li.pricing-title {
	background: #084D31 !important;
}

.landing-page .pricing-highlight li.pricing-title {
	background: #074c30 !important;
}

.pricing-highlight .pricing-plan {
	scale: 1.15;
}

.landing-page .pricing-highlight .pricing-plan:hover {
	transform: translateY(-7px);
	border: 1px solid #074c30;
}

.landing-page li.pricing-desc {
	font-size: 14px !important;
	font-weight: 400 !important;
	min-height: 187px;
	text-align: left!important;
}

.pricing-plan .btn-primary {
	background-color: #097e48 !important;
	border-color: #097e48 !important;
	font-family: 'Montserrat', sans-serif;
}

.pricing-plan .btn-primary:hover {
	background-color: #18a689;
	border-color: #18a689;
}

.price-block1 {
	background-size: cover !important;
	background-position: top !important;
}

.price-block2 {
	background-size: cover !important;
	background-position: top !important;
}

.price-block3 {
	background-size: cover !important;
	background-position: top !important;
}

.price-block4 {
	background-size: cover !important;
	background-position: top !important;
}

/* === Optional Insurance Cards === */
.optional-insurance .card-header {
	min-height: 89px;
}

.optional-insurance .overlay-div {
	height: 100%;
	width: 100%;
	position: absolute;
	background-color: #545454;
	opacity: .8;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

.optional-insurance .card-body {
	min-height: 224px;
}

.optional-card-wrap {
	background: #fff;
	box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15)!important;
	overflow: hidden;
	transition: .2s ease;
	margin: 15px;
	max-height: 616px;
}

.optional-card-wrap:hover {
	transform: translateY(-10px);
}

.optional-card-header {
	padding: 10px;
	background: #097e48;
	z-index: 4;
	position: relative;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	min-height: 116px;
}

.optional-card-title {
	font-size: 18px!important;
	color: #fff!important;
	font-weight: 700;
	margin: 0;
}

.optional-card-price {
	font-size: 28px!important;
	color: #fff!important;
	font-weight: 700;
	margin: 0;
}

.optional-card-price-plus {
	font-size: 16px!important;
	color: #fff!important;
	font-weight: 700;
}

.optional-card-description {
	padding: 15px;
	z-index: 3;
	position: relative;
	background: #fff;
	display: flex;
	flex-direction: column;
	min-height: 256px;
	justify-content: start;
}

.optional-card-button {
	margin-top: -10px;
	z-index: 2;
	position: relative;
}

.optional-card-i {
	color: #097e48;
	margin-right: 10px;
}

.optional-card-bg-divider {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 20px;
	overflow: hidden;
	line-height: 0;
	background: #fff;
}

.optional-card-wrap .btn-white {
	margin: 55px 0 40px 0;
}

.optional-card-wrap .optional-card-description p {
	font-size: 14px;
	margin-bottom: 5px;
}

.optional-card-wrap p.optional-card-description-highlight {
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 5px;
}

.optional-insurance-button {
	margin: 0;
}

.optional-insurance-button:hover {
	backdrop-filter: blur(5px);
	background: #ffffffaa !important;
}

.landing-page section .container.force-overflow-visible {
	overflow: visible !important;
}

/* === Insurance Icons === */
.insuranceicon {
	font-size: 35px;
	color: #fff;
}

.insuranceicon-plat {
	font-size: 35px;
	color: #E5E4E2;
}

.insuranceicon-gold {
	font-size: 35px;
	color: #FFD700;
}

.insuranceicon-silv {
	font-size: 35px;
	color: #C0C0C0;
}

.insuranceicon-bron {
	font-size: 35px;
	color: #cd7f32;
}

.insuranceicon-alt {
	font-size: 55px;
	color: #fff;
}

.insuranceiconbg {
	background: #008752;
	height: 100%;
	transition: transform 250ms;
}

.insuranceiconbg:hover {
	transform: translateY(-10px);
}

.insuranceiconbg2 {
	background: #0000001f;
	backdrop-filter: blur(7px);
	border: 1.5px solid #fff;
	transition: transform 250ms;
}

.insuranceiconbg3 {
	background: #0000001f;
	backdrop-filter: blur(7px);
	border: 1.5px solid #fff;
	transition: transform 250ms;
	display: flex;
	justify-content: center;
	align-items: center;
}

.insuranceiconbg3:hover {
	transform: translateY(-10px);
}

.insurancehighlight {
	font-weight: 600;
	font-size: 18px;
}

/* === Insured Activities === */
.insured-activity-header {
	color: #008752!important;
	font-size: 14px;
	margin-top: 5px;
	font-weight: 600!important;
}

.insured-activity-card {
	padding: 15px;
	border-right: 1px solid #008752;
	height: 100%;
}

#insured-sports-info .col-12:nth-child(4n) .insured-activity-card {
	border-right: 0px;
}

#insured-sports-info .col-12:last-child .insured-activity-card {
	border-right: 0px;
}

/* === Accordions === */
.accordion-body ul li {
	color: var(--ccc3-text) !important;
}

.accordion-flush .accordion-item:last-of-type .accordion-button,
.accordion-body {
	padding-left: 0;
	padding-right: 0;
}

.accordion-button:not(.collapsed) {
	color: rgb(33, 37, 41);
	background-color: transparent;
	border: none;
}

.accordion-collapse {
	border: none;
}

.accordion-flush li {
	color: #7a7a7a;
}

.accordion-flush p {
	color: #7a7a7a;
}

.accordion-flush button {
	color: #7a7a7a;
}

.custom-accordion {
	background-color: #eee;
}

.collapsed .info-text-chevron {
	transition: .2s ease;
	transform: rotate(0deg);
}

.info-text-chevron {
	transition: .2s ease;
	transform: rotate(180deg);
}

.info-accordion-btn {
	background: none;
	border: none;
	font-size: 14px;
	padding: 0;
	color: #7a7a7a;
}

/* === Tables === */
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
	padding: 10px!important;
	vertical-align: middle!important;
}

.table-hover>tbody>tr:hover>.grey-accent {
	color: #9C9C9E!important;
}

.table-tick-icon {
	font-size: 30px;
	color: #067E48;
}

.table-heading {
	font-size: 18px;
	text-transform: uppercase;
	font-weight: 600;
}

.table-heading span {
	color: #747474!important;
	font-size: 14px;
	text-transform: none!important;
}

.table-subheading {
	font-size: 18px;
	font-weight: 600;
}

.table-subheading span,
.grey-title-section {
	color: #747474!important;
	font-size: 14px;
	text-transform: none;
	font-weight: 600;
}

.table-box-bg {
	background-color: #f4f4f4!important;
}

.highlight-green {
	color: var(--ccc3-green) !important;
}

.grey-accent {
	color: #9C9C9E;
	font-weight: 600;
}

.c3-comparison-table {
	border-collapse: collapse;
	width: 100%;
	text-align: center;
}

.c3-comparison-table td,
.c3-comparison-table th {
	border: 0px solid #ddd;
	padding: 8px;
	font-size: 16px;
}

.c3-comparison-table tr:nth-child(2) td {
	font-size: 26px;
	font-weight: 700;
	color: #074c30;
}

.c3-comparison-table td:first-child {
	border-right: 1px solid #ccc;
}

.c3-comparison-table tr:hover {
	background-color: #eee;
}

.c3-comparison-table th {
	padding-top: 12px;
	padding-bottom: 12px;
	text-align: center;
	background-color: #074c30;
	color: white;
	font-size: 20px;
	width: 50%;
	font-weight: 600;
}

/* === Cards === */
.card-header:first-child {
	border-radius: 0!important;
}

.card-content-show {
	display: none;
	padding: 20px;
}

.color-white .card-header {
	background: #F3F3F4!important;
}

.color-white .card {
	background: #fff!important;
	border: 0;
	border-bottom: 1px solid lightgrey;
	border-radius: 0!important;
}

.color-white .sitewide-btn.rustic {
	padding: 10px 35px;
}

/* === Info / Notices === */
.info-box {
	background-color: rgb(2 134 82) !important;
	margin-top: 50px;
	padding: 30px;
	color: #fff;
	border-radius: 3px;
	line-height: 180%;
	font-size: 15px;
}

.cant-support {
	background-color: #d13939;
	color: #fff;
	padding: 10px 20px;
}

.cant-support div {
	padding-top: 10px;
	padding-bottom: 10px;
}

.cant-support div a {
	color: #fff;
	font-weight: bold;
}

/* === Hero Sections === */
#service-insurance-hero {
	min-height: 500px;
	height: auto;
}

#service-insurance-hero .container {
	min-height: 500px;
	height: auto;
}

#service-insurance-hero .row {
	min-height: 500px;
	height: auto;
}

.homepage-hero-img {
	object-fit: contain;
	overflow: hidden;
	position: relative;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.article-hero-img {
	object-fit: cover;
	overflow: hidden;
	position: relative;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.homepage-hero-overlay {
	background: rgba(0, 0, 0, .5);
	height: auto;
	min-height: 500px;
	position: relative;
	z-index: 2;
}

/* Video Background Hero */
.video-hero-section {
	position: relative;
	overflow: hidden;
}

.hero-video-bg {
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	transform: translate(-50%, -50%);
	z-index: 1;
	object-fit: cover;
}

@media (max-width: 767.98px) {
	.hero-video-bg {
		width: 100%;
		height: 100%;
	}
}

.homepage-hero-heading {
	font-size: 45px!important;
	line-height: 0.8;
}

.homepage-hero-btn {
	color: #fff!important;
	background: #fff0;
	padding: 15px 40px;
	border: 2px solid #fff;
	font-size: 20px;
	font-weight: 700;
	display: inline-block;
	margin-top: 10px;
	transition: .2s ease;
}

.homepage-hero-btn:hover {
	background: #fff;
	color: #B04D18!important;
}

.homepage-hero-btn.green-content-btn {
	color: #074D30!important;
	border: 2px solid #074D30;
}

.homepage-hero-btn.green-content-btn:hover {
	background: #074D30!important;
	color: #fff;
}

.overlay {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: rgb(0, 135, 82)!important;
	background: linear-gradient(180deg, rgb(0 0 0 / 70%) 0%, rgb(0 0 0 / 70%) 12%, rgb(0 0 0 / 19%) 100%)!important;
	z-index: 1;
}

.landing-page .top-header .hero-h1 {
	font-weight: 700 !important;
	font-size: 38px !important;
	text-transform: uppercase !important;
	text-shadow: none !important;
	letter-spacing: -1.5px !important;
	color: #fff !important;
	margin-top: 10px !important;
	margin-bottom: 8px;
	line-height: normal;
}

.landing-page .top-header p {
	font-weight: 200 !important;
	text-transform: inherit !important;
}

/* === Landing Page === */
.landing-page .features-icon {
	color: var(--ccc3-green) !important;
	font-size: 40px;
}

.landing-page .features h2,
.landing-page .features .h2 {
	font-size: 14px!important;
	margin-top: 5px;
	color: var(--ccc3-green) !important;
	font-weight: 600;
}

.landing-page .features small {
	color: var(--ccc3-green) !important;
}

.landing-page .features .big-icon {
	color: var(--ccc3-green) !important;
}

.landing-page .testimonials {
	background-color: var(--ccc3-green) !important;
}

.landing-page .navy-section {
	background: #007945 !important;
}

.landing-page .green-section {
	margin-top: 0px;
	background: #b14d19;
	color: #fff;
	padding: 20px 0;
}

.landing-page .social-icon a {
	background: #008752 !important;
}

.landing-page span.green {
	color: var(--ccc3-green) !important;
}

.landing-page .green-line {
	width: 60px;
	height: 1px;
	margin: 60px auto 0;
	border-bottom: 0px solid #008752 !important;
}

.landing-page .navy-line {
	border-bottom: 0px !important;
}

.landing-page .white-line {
	width: 60px;
	height: 1px;
	margin: 60px auto 0;
	border-bottom: 2px solid #FFF;
}

a.green-link {
	color: var(--ccc3-green) !important;
	text-decoration: none;
}

a.green-link:hover {
	color: #074c30 !important;
}

.landing-page .bubble {
	padding: 15px !important;
	height: unset!important;
	min-height: 142px;
}

.landing-page .gray-section {
	margin-top: 0px !important;
}

.landing-page .Absolute-Center {
	z-index: 1 !important;
}

.h2-white {
	font-size: 18px !important;
	margin-top: 5px !important;
	margin-bottom: 8px !important;
	color: #fff!important;
}

/* === Image Blocks === */
.leftRightTextBlock {
	width: 100%;
	max-width: 700px;
}

.leftRightImageBlock {
	max-width: 50%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	background: url(/client/uploads/1/shooting-insurance.jpg);
	height: 628px;
	width: 55%;
}

.black-section-bg .strapline::after {
	content: "";
	width: 120px;
	height: 1px;
	display: inline-block;
	background: #fff;
	margin: 6px 10px;
}

.imageblockimage {
	background-size: cover;
	background-image: url(/client/uploads/5/ccc/scotshighland.jpg);
}

.imageblockimage2 {
	background-size: cover;
	background-image: url(/client/uploads/5/ccc/pointing.jpg);
}

.imageblockimage-activities {
	background-size: cover;
	background-image: url(/client/uploads/5/ccc/montage.jpg);
}

.imageblockimage3 {
	background-size: cover;
	background-image: url(/client/uploads/5/ccc/pointing.jpg);
}

.imageblockimage4 {
	background-size: cover;
	background-image: url(/client/uploads/5/ccc/travel-banner.jpg);
}

.imageblockimage5 {
	background-size: cover;
	background-image: url(/client/uploads/5/ccc/hike.jpg);
}

.imageblockimage6 {
	background-size: cover;
	background-image: url(/client/uploads/5/ccc/lossincome-banner.jpg);
}

.imageblockimage7 {
	background-size: cover;
	background-image: url(/client/uploads/5/ccc/lossequipment-banner.jpg);
}

.imageblockimage8 {
	background-size: cover;
	background-image: url(/client/uploads/5/ccc/profex-banner.jpg);
}

.imageblockimage9 {
	background-size: cover;
	background-image: url(/client/uploads/5/ccc/oldershooter.jpg);
}

.imageblockimage10 {
	background-size: cover;
	background-image: url(/client/uploads/5/ccc/gunwalk.jpg);
}

.imageblockimage11 {
	background-size: cover;
	background-image: url(/client/uploads/5/ccc/gunstock.jpg);
}

.imageblockimage12 {
	background-size: cover;
	background-image: url(/client/uploads/5/ccc/girlwithgun.jpg);
}

.imageblockimage13 {
	background-size: cover;
	background-image: url(/client/uploads/5/ccc/arrow.jpg);
}

.imageblockimage14 {
	background-size: cover;
	background-image: url(/client/uploads/5/ccc/gundog.jpg);
}

.imageblockimage15 {
	background-size: cover;
	background-image: url(/client/uploads/5/ccc/pmi.jpg);
}

.imageblockimage16 {
	background-size: cover;
	background-image: url(/client/uploads/5/ccc/vehiclecrop.jpg);
}

.imageblockimage17 {
	background-size: cover;
	background-image: url(/client/uploads/5/ccc/gunrack.jpg);
}

.imageblockimage18 {
	background-size: cover;
	background-image: url(/client/uploads/5/ccc/deer-woodland.jpg);
}

.imageblockimage19 {
	background-size: cover;
	background-image: url(/client/uploads/5/ccc/friends-shooting.jpg);
}

.imageblockimage20 {
	background-size: cover;
	background-image: url(/client/uploads/5/ccc/archer.jpg);
}

.imageblockimage21 {
	background-size: cover;
	background-image: url(/client/uploads/5/ccc/group.jpg);
}

.imageblockimage22 {
	background-size: cover;
	background-image: url(/client/uploads/5/ccc/medievalcombat.jpg);
}

.imageblockimage23 {
	background-size: cover;
	background-image: url(/client/uploads/5/ccc/scottishmuskets.jpg);
}

.imageblocktextleft {
	background: #00000047;
	backdrop-filter: blur(7px);
	border: 1.5px solid #fff;
	font-weight: 400;
}

.imageblocktextright {
	background: #00000047;
	backdrop-filter: blur(7px);
	border: 1.5px solid #fff;
	font-weight: 400;
}

.content {
	height: 100%;
}

.content-offset-img-wrap-4 {
	background: #fff;
	position: relative;
	left: 0;
	top: 0px;
	display: inline-block;
}

.content-offset-img-wrap-5 {
	background: #fff;
	position: relative;
	left: 15px;
	top: 0px;
	display: inline-block;
}

.content-offset-img-alt {
	object-fit: cover;
	padding: 10px;
}

.image-position {
	background-position: top center!important;
}

.img-rounded {
	border-radius: 0!important;
}

.img-cover {
	object-fit: cover;
}

.img-contain {
	object-fit: contain;
}

.bg-cover {
	background-size: cover;
}

.bg-img-cover {
	background-size: cover !important;
}

.background-cover {
	background-size: cover;
}

/* === FAQ === */
.home-faq {
	height: 70px;
	overflow: hidden;
	transition: 0.4s ease;
	mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
	-webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

.home-faq-c:hover .home-faq {
	mask-image: none;
	-webkit-mask-image: none;
	height: 100%;
}

.home-faq-i {
	color: #676a6c;
	transition: 0.3s ease;
	font-size: 26px;
}

.home-faq-c:hover .home-faq-i {
	color: #fff0;
}

.home-faq a {
	color: var(--ccc3-green);
	text-decoration: none!important;
	font-weight: 700!important;
}

#faq {
	overflow: hidden;
}

#faq .faq-list {
	padding: 0;
	list-style: none;
}

#faq .faq-list li {
	border-bottom: 1px solid #edecf4;
	margin-bottom: 20px !important;
	padding-bottom: 20px;
}

#faq .faq-list .question {
	display: block;
	position: relative;
	font-size: 18px;
	line-height: 24px;
	font-weight: 400;
	padding-left: 25px;
	cursor: pointer;
	color: #5CA4DE;
	transition: 0.3s;
}

#faq .faq-list .faq-icon {
	font-size: 16px;
	position: absolute;
	left: 0;
	top: 2px;
}

#faq .faq-list p {
	margin-bottom: 0;
	padding: 10px 0 0 25px;
}

#faq .faq-list .icon-show {
	display: none;
}

#faq .faq-list .collapsed {
	color: black;
}

#faq .faq-list .collapsed:hover {
	color: #5CA4DE;
}

#faq .faq-list .collapsed .icon-show {
	display: inline-block;
	transition: 0.6s;
}

#faq .faq-list .collapsed .icon-close {
	display: none;
	transition: 0.6s;
}

/* === Blog / Articles === */
.container.article {
	max-width: 100%;
	margin: 0;
	padding: 0;
}

.article-icon {
	color: #074D30;
}

.featured-article-title {
	font-size: 16px !important;
	font-weight: 700;
	margin: 5px 0 5px 0;
}

.article-single-col-wrap {
	padding: 5px;
	border: 2px solid #eee;
	position: relative;
	background: #fff;
	transition: .2s ease;
}

.article-single-col-wrap:hover {
	border: 2px solid #074c30;
}

.article-date-line {
	position: absolute;
	top: 20px;
	left: -15px;
	background: #008751;
	padding: 10px 15px;
	color: #FFF;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	border: 2px solid #008751;
}

.article-featured-image {
	width: 100% !important;
	height: 100%;
	object-fit: cover;
}

.article-description {
	max-height: 110px;
	margin: 0;
	overflow: hidden;
	position: relative;
}

.article-description:after {
	content: "";
	background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
	position: absolute;
	z-index: 8;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	opacity: 1;
	transition: .2s ease;
}

.article-single-col-wrap:hover .article-description:after {
	opacity: 0;
}

.main-article-date-wrap {
	position: absolute;
	top: 220px;
	left: -15px;
	background: #008751;
	padding: 10px 15px;
	color: #FFF;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	border: 2px solid #008751;
}

.main-article-wrap {
	height: 100%;
	padding: 5px;
	border: 1px solid #e4e4df; /* site box hairline (--svc-line) — #eee was invisible on the grey section */
	position: relative;
	background: #fff;
	transition: .2s ease;
}

.main-article-image {
	object-fit: cover;
}

.main-article-content {
	padding: 20px;
	margin: 50px 0 15px 0;
	overflow: hidden;
	position: relative;
	max-height: 175px;
	min-height: 175px;
}

.main-article-description {
	margin: 0;
	font-weight: 400;
}

.main-article-wrap:hover {
	border: 1px solid #008752;
	background: #f1f1f1;
}

.main-article-pagination .pagination .page-link {
	border-radius: 0px;
}

/* --- Member Benefits Cards --- */
#member-benefits ul {
	padding: 0;
	margin: 0;
	list-style: none;
	height: 100%;
}

#member-benefits ul li {
	height: 100%;
}

#member-benefits article {
	height: 100%;
}

#member-benefits .main-article-wrap {
	display: flex;
	flex-direction: column;
	border-radius: 8px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
	border: 1px solid #e8e8e8;
	overflow: hidden;
	transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

#member-benefits .main-article-wrap:hover {
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
	border-color: var(--ccc3-green);
	background: #fff;
}

#member-benefits .main-article-thumbnail {
	height: 200px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
}

#member-benefits .main-article-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

#member-benefits .main-article-content {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	padding: 20px;
	margin: 40px 0 0 0;
	max-height: unset;
	min-height: unset;
	overflow: visible;
}

#member-benefits .main-article-description {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	height: 4.5em;
	flex-shrink: 0;
	margin-bottom: 10px;
}

#member-benefits .main-article-wrap.expanded .main-article-description {
	display: block;
	-webkit-line-clamp: unset;
	overflow-y: auto;
}

#member-benefits .featured-article-title {
	min-height: 64px;
}

#member-benefits .benefit-actions {
	margin-top: auto;
	padding-top: 10px;
	/* Website + Claim Now sit side by side (wrap on very narrow cards).
	   The logged-out single "Claim Benefit" button keeps its w-100 and so
	   spans the full row on its own. */
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
#member-benefits .benefit-actions .svc-btn {
	flex: 1 1 0;
	margin-top: 0 !important;
	text-align: center;
}

#member-benefits .main-article-date-wrap {
	border-radius: 0 4px 4px 0;
}

#member-benefits .sitewide-btn.rustic {
	padding: 8px 20px;
	font-size: 14px;
}

#member-benefits .how-to-claim-box {
	text-align: left;
	font-size: 14px;
	color: white;
	background-color: rgb(34, 79, 34);
	padding: 15px;
	border-radius: 4px;
}

#member-benefits .how-to-claim-box .benefit-contact {
	color: white;
	font-size: 14px;
}

.blog-mini-content .news {
	padding: 25px;
}

.news .item {
	background-color: #fff !important;
	border: 2px solid #eee !important;
	border-radius: 0px;
	margin: 0px;
	height: 100%;
	display: flex;
	flex-direction: row;
}

.news img.article-image-cover {
	border: 0px;
	height: 200px;
	object-fit: cover;
	border-radius: 0px;
}

.item .item-content .title-left a strong {
	color: var(--ccc3-green) !important;
	font-weight: 700;
	font-family: 'Montserrat', sans-serif;
	line-height: 1;
	font-size: 20px;
}

.item .item-content p a {
	color: #000 !important;
	font-size: 14px;
}

.item-content {
	display: flex;
	flex-direction: column;
}

.item .item-content a.btn {
	color: #fff;
	background: #B14D18;
	padding: 6px 25px;
	border: 2px solid #B14D18;
	font-size: 16px;
	font-weight: 700;
	display: inline-block;
	margin-top: 10px;
	transition: .2s ease;
	font-family: 'Montserrat', sans-serif;
	line-height: 1;
	text-transform: uppercase;
	border-radius: 0px;
	align-self: end;
	margin-top: auto;
}

.item .item-content a.btn:hover {
	color: #B14D18;
	background: #fff;
}

.footer-blog-section {
	padding: 48px;
	background: #f4f4f4;
}

/* === Footer === */
footer ul {
	list-style: none;
	padding: 0;
}

footer a {
	text-decoration: none;
	display: block;
	color: #fff !important;
}

footer .footer-title {
	display: block;
	text-transform: uppercase;
	width: 50%;
}

.footer-section::before {
	content: "";
	background-image: url(/client/uploads/5/ccc/grass-1.png);
	position: absolute;
	margin-top: -32px;
	left: 0px;
	width: 100%;
	height: 39px;
}

.footer-img {
	position: absolute;
	margin-top: -148px;
	right: 20px;
}

.footer-img::before {
	content: "";
	background-image: url(/client/uploads/5/ccc/tree-dog.png);
	position: absolute;
	margin-top: 0px;
	right: 0px;
	width: 264px;
	height: 151px;
}

.darkblue-section {
	background: #074c30;
	color: #fff;
}

.text-muted.fw-bold {
	color: #fff!important;
}

.text-muted {
	color: #fff!important;
}

/* === Legal / Policy Pages === */
.legal-icon {
	font-size: 30px;
	color: #676a6c;
	transition: .2s ease;
}

.legal-card {
	background: #fff;
	padding: 30px 20px;
	border: 2px solid #ccc;
	text-align: center;
	transition: .2s ease;
	position: relative;
}

.legal-card a {
	color: #676a6c;
	transition: .2s ease;
}

.legal-card:hover .legal-icon {
	color: var(--ccc3-green);
}

.legal-card:hover a {
	color: var(--ccc3-green);
}

.legal-card:hover {
	background: #f4f4f4;
	border: 2px solid #008752;
}

.policy-download-icon {
	font-size: 30px;
	color: #676a6c;
	transition: .2s ease;
	position: absolute;
	right: 25px;
	bottom: 25px;
}

.policy-download-card {
	background: #f4f4f4;
	padding: 30px 30px;
	border: 1px solid #ccc;
	text-align: start;
	transition: .2s ease;
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.policy-download-card a {
	color: #676a6c;
	transition: .2s ease;
	margin-bottom: 10px;
}

.policy-download-card:hover .policy-download-icon {
	color: var(--ccc3-green);
}

.policy-download-card:hover a {
	color: var(--ccc3-green);
}

.policy-download-card:hover {
	background: #fff;
	border: 1px solid #008752;
}

/* === Login === */
.login-area label {
	color: #676a6c;
}

#login label {
	color: #676a6c;
}

.login-area .alertsection .alert.alert-danger {
	background: #fff;
	border: 0px;
	color: #000 !important;
	padding: 0 15px;
}

.login-area .alertsection .alert.alert-danger .alert {
	color: red !important;
}

.login-area .alertsection .alert.alert-danger svg {
	color: red !important;
}

.login-area .alertsection .alert.alert-danger .close {
	background: #fff;
	border: none;
}

.login-area .alertsection .row.p-5 {
	padding: 0 22px !important;
}

/* === Slick Slider === */
.slick-dots {
	display: flex;
	justify-content: center;
	margin: 0;
	padding: 1rem 0;
	list-style-type: none;
}

.slick-dots li {
	margin: 0 0.25rem;
}

.slick-dots button {
	display: block;
	width: 1rem;
	height: 1rem;
	padding: 0;
	border: none;
	border-radius: 100%;
	background-color: #000;
	text-indent: -9999px;
}

.slick-dots li.slick-active button {
	background-color: #B14D18;
}

button.slick-prev.slick-arrow {
	position: absolute;
	top: calc(50% - 23px);
	left: -48px;
	width: 45px;
	background: #b14d19;
	border-radius: 50%;
	z-index: 1;
	border: none;
	text-align: center;
	padding: 11px 18px;
	color: #fff;
	font-size: 16px;
	height: 45px;
	box-shadow: 0 5px 25px 0 rgb(68 68 68 / 45%);
}

button.slick-next.slick-arrow {
	position: absolute;
	top: calc(50% - 23px);
	right: -48px;
	width: 45px;
	background: #b14d19;
	border-radius: 50%;
	z-index: 1;
	border: none;
	text-align: center;
	padding: 11px 18px;
	color: #fff;
	font-size: 16px;
	height: 45px;
	box-shadow: 0 5px 25px 0 rgb(68 68 68 / 45%);
}

/* === Search === */
.searchBox {
	position: absolute;
	top: 35px;
	left: -280px;
	width: 100%;
	max-width: 300px;
}

.searchBox input.search-input.p-1.rounded.border-0.me-2 {
	border-radius: 0px !important;
	border: 1px solid #ccc !important;
	line-height: 2 !important;
	padding: 8px 15px !important;
}

.searchBox input.search-input.p-1.rounded.border-0.me-2:focus {
	outline: 0;
}

.searchBox input.btn.btn-primary.py-1.header-btn {
	border-radius: 0px !important;
	font-family: 'Montserrat', sans-serif !important;
}

/* === Utilities === */
.pt5 { padding-top: 5px; }
.pt10 { padding-top: 10px; }
.pt20 { padding-top: 20px; }
.pt30 { padding-top: 30px; }
.pt40 { padding-top: 50px; }
.pt50 { padding-top: 50px; }

.pull-right {
	float: right !important;
}

.big-icon.pull-right {
	margin-left: .3em !important;
}

.list-inline > li {
	display: inline-block;
	padding-right: 5px;
	padding-left: 5px;
}

.carousel-inner > .item > a > img,
.carousel-inner > .item > img,
.img-responsive,
.thumbnail a > img,
.thumbnail > img {
	display: block;
	max-width: 100%;
	height: auto;
}

.strip-border-every-second:nth-child(even) {
	border-right: 0;
}

.whiteBg {
	background-color: #fff;
}

.green {
	color: var(--ccc3-green) !important;
}

.big-green-icon {
	font-size: 56px !important;
	color: var(--ccc3-green) !important;
}

.img-rounded {
	border-radius: 4px;
}

.z-index-0 {
	z-index: 0;
}

.shadowed {
	box-shadow: 0 10px 29px 0 rgb(68 68 68 / 16%);
}

.contact-social-icon {
	font-size: 48px;
	line-height: 1.18;
}

button.btn.zff-primary-button-service-contact-form.my-3.sitewide-btn.rustic.text-uppercase.title-font {
	border-radius: 0px;
}

.scroll-offset-fix {
	position: relative;
	margin-top: -50px;
	padding-top: 115px !important;
}

.trade-associate-display {
	display: inline-block;
}

.zoom-anim-dialog {
	margin: 75px 0 0 0;
}

.pagination {
	justify-content: end!important;
}

.breadcrumbSection {
	display: none;
}

.grid-heading {
	margin-top: 10px;
	font-size: 24px!important;
	font-weight: 200;
	color: #676a6c;
}

.c3-home-accent-info {
	font-size: 22px!important;
}

.c3-home-accent-title {
	font-size: 20px!important;
	color: #adadad!important;
	font-weight: 400!important;
}

.tp-widget-wrapper {
	text-align: start !important;
	margin: 0 !important;
	max-width: 100%!important;
}

.banner {
	text-align: center;
	margin: auto;
	background: linear-gradient(60deg, rgba(177, 77, 24, .8) 0%, rgba(177, 77, 24, .8) 100%), url(/client/uploads/1/adobestock-211363160.jpeg);
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}

.banner-text {
	font-size: 16px;
	color: #fff;
	padding: 20px;
}

.banner .section-title-1 {
	font-size: 1.75rem;
	padding: 20px;
}

.banner .button-1 {
	margin-top: 0px;
}

.grey-section-bg {
	background-color: #e3e3e3;
}

.bg-grey {
	background-color: #f6f3ee;
}

/* === Gradient Backgrounds === */
.gradBgHalf {
	background: rgb(255, 255, 255);
	background: linear-gradient(90deg, rgba(255, 255, 255, 1) 50%, rgba(31, 73, 125, 1) 50%);
}

.gradBg {
	background: rgb(255, 255, 255);
	background: linear-gradient(135deg, rgba(255, 255, 255, 1) 30%, rgba(31, 73, 125, 1) 30%);
}

/* === Datepicker === */
.datepicker-dropdown {
	background-color: #fff !important;
}

.datepicker-dropdown .year {
	padding-left: 5px;
	padding-right: 5px;
}

.datepicker-dropdown td,
.datepicker-dropdown * {
	box-sizing: initial;
}

/* === Show/Hide Info Blocks === */
.showInfoBlockMobile {
	height: 0 !important;
	overflow: hidden !important;
}

.sib {
	position: absolute;
	right: 10px;
	top: 0;
	padding-left: 20px;
	border: none;
	z-index: 99;
	width: 50%;
	height: 100%;
	border-left: 1px solid rgb(207, 207, 207);
}

/* === GDPR === */
.gdpr.gdpr-privacy-bar:active {
	background: #d17227 !important;
}

/* === Admin Logged In === */
/* Reset admin bar positioning - using floating button instead of top bar */
.landing-page.adminLoggedIn .pageContent {
	margin-top: 35px !important;
}
/* Basket already clears the fixed nav via body.basketPage padding + the 72px
   cc-pagehead, so the admin-bar 35px would stack on top (72 + 35). Zero it here
   for the basket page only. — July 2026 (client req) */
.basketPage.landing-page.adminLoggedIn .pageContent {
	margin-top: 0 !important;
}

.adminLoggedIn section.w-100.clearHeader {
	top: 35px !important;
}

.adminLoggedIn .topnav {
	top: 0 !important;
}

.adminLoggedIn .adminbarfix {
	top: 35px !important;
}

/* === Responsive === */

@media (max-width: 450px) {
	.table-x-icon {
		color: #FE0001;
		font-size: 30px;
	}

	.fs-12 {
		font-size: 14px!important;
	}

	.fs-24 {
		font-size: 24px!important;
	}
}

@media (max-width: 600px) {
	.showInfoBlockMobile {
		height: auto !important;
	}

	.showInfoBlockDesktop {
		height: 0 !important;
		overflow: hidden !important;
	}

	.sib {
		position: relative;
		padding-left: 30px;
		border: none;
		z-index: 99;
		width: 100%;
		height: 100%;
		border-left: 1px solid rgb(207, 207, 207);
	}

	.sib span p strong {
		display: none;
	}

	.sib hr {
		display: none;
	}

	.wizard-step span {
		padding: 10px;
	}

	.gradBg {
		background: linear-gradient(135deg, rgba(255, 255, 255, 1) 22%, rgba(31, 73, 125, 1) 22%);
	}

	.homepage-hero-heading {
		font-size: 28px !important;
		line-height: 1.15 !important;
	}

	.homepage-hero-overlay {
		min-height: 350px !important;
	}

	.homepage-hero-btn {
		padding: 10px 24px !important;
		font-size: 14px !important;
	}

	.sitewide-btn,
	.sitewide-btn.rustic {
		padding: 10px 20px !important;
		font-size: 14px !important;
	}

	#features .h1 {
		font-size: 1.6rem !important;
	}
}

@media (max-width: 640px) {
	button.slick-prev.slick-arrow {
		display: none!important;
	}

	button.slick-next.slick-arrow {
		display: none!important;
	}
}

@media (max-width: 767px) {
	.logo-top {
		position: absolute;
		height: 95px;
	}

	.logo-top.shrinkLogo {
		height: 75px;
	}

	.benefit-grid-tl {
		border-right: 0px solid #e0e0e0;
		border-bottom: 0px solid #e0e0e0;
	}

	.benefit-grid-tr {
		border-bottom: 0px solid #e0e0e0;
	}

	.benefit-grid-ml {
		border-right: 0px solid #e0e0e0;
		border-bottom: 0px solid #e0e0e0;
	}

	.benefit-grid-mr {
		border-bottom: 0px solid #e0e0e0;
	}

	.benefit-grid-bl {
		border-right: 0px solid #e0e0e0;
	}

	.benefit-grid-tl-b {
		border-right: 0px solid #e0e0e0;
		border-bottom: 0px solid #e0e0e0;
	}

	.benefit-grid-tr-b {
		border-bottom: 0px solid #e0e0e0;
	}

	.benefit-grid-ml-b {
		border-right: 0px solid #e0e0e0;
		border-bottom: 0px solid #e0e0e0;
	}

	.benefit-grid-mr-b {
		border-bottom: 0px solid #e0e0e0;
	}

	.benefit-grid-bl-b {
		border-right: 0px solid #e0e0e0;
	}

	.benefit-grid-tl-b,
	.benefit-grid-tr-b,
	.benefit-grid-bl-b {
		margin-bottom: 10px;
		border-bottom: 1px solid rgba(9, 76, 49, .7)!important;
	}
}

@media only screen and (max-width: 767px) and (min-width: 100px) {
	.insured-activity-card {
		border-right: 0px solid #008752;
		border-bottom: 1px solid #008752;
	}

	.mobile-h-fix {
		padding-top: 101px;
	}
}

@media only screen and (max-width: 767px) {
	.topnav h1 {
		display: none;
	}
}

@media (max-width: 768px) {
	.leftRightImageBlock {
		width: 100%;
		max-width: 100%;
		background-size: contain;
		background-position: center top;
		height: 340px;
	}
}

@media (min-width: 768px) {
	.searchBox {
		left: -220px;
	}
}

@media only screen and (max-width: 768px) and (min-width: 150px) {
	.benefit-minh {
		height: auto;
	}

	.benefit-minh2 {
		height: auto;
	}

	.benefit-minh3 {
		height: auto;
	}

	.benefit-minh4 {
		height: auto;
	}
}

@media (max-width: 991px) {
	.collapse:not(.show) {
		visibility: hidden;
	}

	.navbar-collapse {
		transition: .2s ease;
	}

	.navbar-collapse.collapse.show.in {
		position: absolute;
		top: 0;
		left: -12px;
		background: #074c30;
		width: calc(100% + 24px);
		height: 522px;
		padding-top: 100px;
		z-index: 5;
		visibility: visible;
	}

	.navbar-collapse.collapsing {
		position: absolute;
		top: 0;
		left: -12px;
		background: #074c30;
		width: calc(100% + 24px);
		height: 522px;
		padding: 92px 0 15px 25px;
		z-index: 5;
		visibility: visible;
	}

	.navbar-collapse.show {
		position: absolute;
		top: 0;
		left: -12px;
		background: #074c30;
		width: calc(100% + 24px);
		height: auto;
		padding: 92px 0 15px 25px;
		z-index: 5;
	}

	button.navbar-toggler {
		position: absolute;
		top: 10px;
		right: 10px;
		z-index: 6;
	}

	.logo-top {
		z-index: 9;
	}

	.darkHeader,
	.makeGreen {
		height: 60px;
		min-height: 60px;
	}

	.basketPage, .onePageCheckout {
		padding-top: 70px;
	}

	/* Basket page mobile layout */
	.basketPage .product.row {
		display: flex;
		flex-wrap: wrap;
	}

	/* Title - full width at top */
	.basketPage .product.row .product-details-cart[style] {
		width: 100% !important;
		flex: 0 0 100% !important;
		max-width: 100% !important;
		order: 1;
		padding-right: 15px;
	}

	/* Two columns for included/extras - keep as is */
	.basketPage .col-10 {
		width: 100% !important;
		flex: 0 0 100% !important;
		max-width: 100% !important;
		order: 2;
	}

	/* Price - centered above buttons */
	.basketPage .col-2 {
		width: 100% !important;
		flex: 0 0 100% !important;
		max-width: 100% !important;
		order: 3;
	}

	.basketPage .col-2 > div {
		position: relative !important;
		bottom: auto !important;
		right: auto !important;
		text-align: center !important;
		margin-top: 15px;
		margin-bottom: 3px;
	}

	/* Edit/Remove buttons - bottom of card, centered */
	.basketPage .product.row .product-quantity[style] {
		width: 100% !important;
		flex: 0 0 100% !important;
		max-width: 100% !important;
		order: 4;
		margin-top: 10px;
		padding-top: 15px;
		border-top: 1px solid #eee;
	}

	.basketPage .product-quantity > div {
		text-align: center !important;
		display: flex;
		justify-content: center;
		gap: 30px;
	}

	.basketPage .product-quantity .product-removal {
		margin-left: 0 !important;
	}

	.basketPage h1 {
		margin-top: 0 !important;
		padding-top: 10px;
	}

	.basketPage .cart .product-title-cart {
		font-size: 1.3rem !important;
	}
}

@media only screen and (max-width: 991px) and (min-width: 100px) {
	.optional-card-description {
		display: flex;
		flex-direction: column;
		min-height: none !important;
		justify-content: start;
	}

	.existing-member-box {
		border-right: 0px solid #028652;
	}

	.existing-member-box {
		padding: 20px 25px;
	}

	label.makeSelected {
		min-width: 100% !important;
	}

	.news .item {
		flex-direction: column;
	}

	.item-content {
		padding: 15px 0;
	}

	.news img.article-image-cover {
		margin: 0;
		padding: 0;
		max-width: 100%;
	}
}

@media only screen and (max-width: 991px) and (min-width: 768px) {
	.benefit-minh {
		height: 92%;
	}

	.benefit-minh2 {
		height: 87%;
	}

	.benefit-minh3 {
		height: 92%;
	}

	.benefit-minh4 {
		height: 90%;
	}

	.hide-text {
		display: none;
	}
}

@media (max-width: 992px) {
	.logo-top {
		max-width: 100% !important;
	}

	.homepage-hero-heading {
		font-size: 34px !important;
		line-height: 1.2 !important;
	}

	.homepage-hero-overlay {
		min-height: 400px !important;
	}
}

@media (max-width: 1199px) and (min-width: 768px) {
	.hide-text {
		display: none;
	}
}

@media (max-width: 1200px) {
	.pricing-highlight .pricing-plan {
		scale: 1.05;
		transform: translateY(-8px);
	}

	.landing-page .pricing-highlight .pricing-plan:hover {
		transform: translateY(-17px);
	}

	.landing-page li.pricing-desc {
		min-height: 187px;
	}
}

@media only screen and (max-width: 1230px) {
	.footer-section {
		margin-top: 0px;
	}

	.footer-blog-section {
		padding: 32px 24px 120px 24px;
	}
}

@media (min-width: 1400px) and (max-width: 1620px) {
	li {
		font-size: 14px;
	}
}

@media only screen and (max-width: 1300px) {
	.landing-page .pricing-plan {
		margin: 10px 0px 0 0px !important;
		border-radius: 4px;
	}
}

@media only screen and (max-width: 1300px) and (min-width: 991px) {
	.container-fluid.mt-topbar {
		padding-left: 140px;
	}
}

@media (max-width: 1399px) {
	.main-article-wrap {
		max-width: 416px;
		margin: auto;
	}
}

@media only screen and (max-width: 1399px) and (min-width: 1200px) {
	.custom-hide {
		display: none;
	}
}

@media only screen and (max-width: 1399px) and (min-width: 992px) {
	.trade-associate-display {
		display: none;
	}
}

@media only screen and (max-width: 1400px) and (min-width: 992px) {
	.navbar-light .navbar-nav .nav-link:focus,
	.navbar-light .navbar-nav .nav-link:hover,
	.navbar-light .navbar-nav .nav-link {
		font-size: 1vw;
	}
}

@media only screen and (min-width: 1450px) {
	.logo-top {
		z-index: 9;
	}
}

/* === Recent Blog Section (Above Footer) - Responsive Styles === */
.footer-blog-section .latestNews .title-font {
	color: #094C31;
	margin-bottom: 20px;
	font-size: 1.25rem;
}

.footer-blog-section .latestNews .news img.img-thumbnail {
	border-radius: 6px;
	border: none;
	width: 320px;
	height: 200px;
	object-fit: cover;
}

.footer-blog-section .latestNews .news p {
	color: #333;
	line-height: 1.5;
}

.footer-blog-section .latestNews .news .sitewide-btn {
	display: inline-block;
	margin-top: 12px;
}

/* Mobile styles (up to 767px) */
@media only screen and (max-width: 767.98px) {
	.footer-blog-section {
		padding: 32px 16px 155px 16px !important;
	}

	.footer-blog-section .latestNews .news img.img-thumbnail {
		width: 100%;
		max-width: 320px;
		height: 200px;
		margin: 0 auto 16px;
		display: block;
	}

	.footer-blog-section .latestNews .news {
		text-align: center;
	}

	.footer-blog-section .latestNews .news p {
		text-align: left;
	}

	.footer-blog-section .latestNews .title-font {
		text-align: center;
	}
}

/* Tablet styles (768px to 991px) */
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
	.footer-blog-section .latestNews .news img.img-thumbnail {
		width: 200px;
		height: 140px;
	}
}

/* =======================================================================
   SERVICE TEMPLATE (.svc-final)
   =======================================================================
   Styles for cms-pages/updated-service-template.blade.php and the
   prototype final-service-page.blade.php. Scoped under `.svc-final` so
   the namespace cannot leak. Custom CSS tokens (--svc-*) match the
   ccc3 brand palette; everything else inherits from this file.
   ===================================================================== */

/* ===== Tokens + base =================================================== */
.svc-final {
  --svc-green: #008752;
  --svc-green-dark: #074c30;
  --svc-green-darker: #074c30;
  --svc-orange: #B14D18;
  --svc-orange-dark: #9a4214;
  --svc-cream: #f4f4f4;
  --svc-ink: #1f2a24;
  --svc-body: #5a5a5a;
  --svc-line: #e4e4df;
  font-family: 'Open Sans', helvetica, arial, sans-serif;
  background: #fff;
}
/* svc-container mirrors Bootstrap 5's .container exactly — responsive max-widths
   + gutter-based padding — so the redesign pages use Bootstrap's grid, not a custom one. */
.svc-final .svc-container {
  width: 100%;
  padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5);
  padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5);
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 576px)  { .svc-final .svc-container { max-width: 540px; } }
@media (min-width: 768px)  { .svc-final .svc-container { max-width: 720px; } }
@media (min-width: 992px)  { .svc-final .svc-container { max-width: 960px; } }
@media (min-width: 1200px) { .svc-final .svc-container { max-width: 1140px; } }
@media (min-width: 1400px) { .svc-final .svc-container { max-width: 1320px; } }

/* Body + headings inherit from ccc3.css — `p` is 14px / #7a7a7a globally,
   `.h1`–`.h6` give heading appearance when applied to <p>. Custom rules
   below only exist where a section needs a non-standard size (hero h1,
   stat strip numbers, plan-picker fonts, etc). */

/* ===== Eyebrow labels =================================================== */
/* Small uppercase labels above section titles. Default = grey on light
   backgrounds. `--on-dark` lightens for dark-green sections. */
.svc-final .svc-eyebrow {
  font-family: 'Montserrat', sans-serif; font-weight: 700;
  /* !important so the eyebrow keeps its small size even when it's an <h2>/<h3>
     tag — the global .h1–.h6 heading rules are !important and would otherwise
     blow it up to heading size. */
  font-size: 12px !important; letter-spacing: 2px; text-transform: uppercase;
  color: #8a8a83; margin-bottom: 8px;
}
.svc-final .svc-eyebrow--on-dark { color: #cfd6d2; }

/* ===== Buttons — GLOBAL (one button system across the whole site) ========
   De-scoped from .svc-final (June 2026) so the same svc-btn classes can be used
   everywhere — redesign pages, the comparison/syndicate blocks, old pages, etc.
   Orange = primary, white-outline = secondary on dark, green-outline = secondary
   on light. Colours come from the :root --svc-* vars above. */
.svc-btn {
  font-family: 'Montserrat', sans-serif; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; padding: 12px 28px; font-size: 12px;
  border: 2px solid transparent; display: inline-block; cursor: pointer;
  text-decoration: none; line-height: 1.2; white-space: nowrap;
}
.svc-btn-lg { padding: 16px 36px; font-size: 13px; }
.svc-btn-orange { background: var(--svc-orange); color: #fff; border-color: var(--svc-orange); }
.svc-btn-orange:hover { background: var(--svc-orange-dark); border-color: var(--svc-orange-dark); color: #fff; }
.svc-btn-white-outline { background: transparent; color: #fff; border-color: #fff; }
.svc-btn-white-outline:hover { background: #fff; color: #5a5a5a; }
.svc-btn-green-outline { background: transparent; color: var(--svc-green); border-color: var(--svc-green); }
.svc-btn-green-outline:hover { background: var(--svc-green); color: #fff; }
.svc-btn-green { background: var(--svc-green); color: #fff; border-color: var(--svc-green); }
.svc-btn-green:hover { background: var(--svc-green-dark); color: #fff; border-color: var(--svc-green-dark); }
.svc-btn-block { display: block; width: 100%; text-align: center; }

/* ===== HERO ============================================================ */
.svc-final .svc-hero {
  position: relative; min-height: 520px; overflow: hidden;
  margin-top: 35px;
  background-color: #2f3a2a;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  background-image: repeating-linear-gradient(135deg, #3b4a3c 0 18px, #314033 18px 36px);
}
.svc-final .svc-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.35) 100%);
}
/* Top padding clears the transparent landing-page nav that overlays the hero.
   Fixed at 151px (the small-logo value) so the hero height stays constant — the
   larger 1620px+ logo is absolutely positioned and gains room horizontally, so it
   must not push the hero taller (June 2026 client req). */
.svc-final .svc-hero__inner { position: relative; z-index: 2; padding-top: 151px; padding-bottom: 116px; }
@media (max-width: 767.98px) {
  /* On mobile the overlaid stat bar is hidden, so the hero hugs its content
     (no 520px min-height) and the bottom padding shrinks (June 2026 client req,
     rolled out site-wide from the country-sports trial). */
  .svc-final .svc-hero__inner { padding-top: 120px; padding-bottom: 36px; }
  .svc-final .svc-hero { min-height: 0; }
  .svc-final .svc-hero-stats { display: none; }
}
/* Hero h1 size is driven by the --ccc3-hero-h1-size variable (44px). Override
   just the size + line-height; everything else (Montserrat, 700, uppercase,
   white via .white) comes from ccc3.css. */
.svc-final .svc-hero p.h1 {
  font-size: var(--ccc3-hero-h1-size) !important; line-height: 1.05;
  text-shadow: 0 2px 14px rgba(0,0,0,0.35);
}
/* Homepage hero title stays larger than the rest (June 2026 client req 57):
   every other hero uses the standard 44px (the shooting-insurance size); the
   homepage bumps the variable up. The ≤575px rule below still drops all heroes
   to 32px on phones. */
.svc-final.hp-home { --ccc3-hero-h1-size: 56px; }
/* Hero lede capped at 2 lines (June 2026 client req) so it can't run long. */
.svc-final .svc-hero__lede-max { max-width: 560px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Blog-template heroes put the date/lede in a <p> INSIDE the .white lede div
   (DB tag content) — the global `p` colour rule overrides the inherited white
   and it renders grey on the image. Force hero lede paragraphs white. */
.svc-final .svc-hero__lede-max p { color: #fff; }
/* Hero content column full width so the title sits on one line. Scoped to the
   hero so other col-lg-8 usage is unaffected (June 2026 client req). */
@media (min-width: 992px) {
  .svc-final .svc-hero__inner .col-lg-8 { flex: 0 0 100%; max-width: 100%; }
}

/* ===== HERO STAT BAR (overlaid) =========================================
   Promoted site-wide from the country-sports trial (June 2026 client req): a
   green gradient bar fixed across the bottom of every hero, fading up into the
   photo. The hero __inner reserves bottom padding (116px) to clear it; it is
   hidden on mobile via the hero mobile rule above. */
.svc-final .svc-hero-stats { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; background: linear-gradient(180deg, rgba(0, 135, 82, 0) 0%, rgba(0, 135, 82, 0.82) 45%); padding: 32px 0 16px; }
.svc-final .svc-hero-stats__num { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 22px; letter-spacing: 0.5px; color: #fff; line-height: 1.1; }
.svc-final .svc-hero-stats__label { font-size: 12.5px; color: rgba(255, 255, 255, 0.9); margin-top: 2px; letter-spacing: 0.5px; }

/* ===== STAT STRIP (deprecated) ==========================================
   Superseded by the overlaid .svc-hero-stats bar above; rules kept only as a
   harmless fallback for any not-yet-converted markup. */
.svc-final .svc-stat-strip { background: var(--svc-green); padding: 22px 0; color: #fff; }
.svc-final .svc-stat-strip__num { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 22px; letter-spacing: 0.5px; }
.svc-final .svc-stat-strip__label { font-size: 12.5px; opacity: 0.9; margin-top: 2px; letter-spacing: 0.5px; }
/* Hidden on mobile (June 2026 client req) — the green stat strip only shows
   from tablet up. */
@media (max-width: 767.98px) {
  .svc-final .svc-stat-strip { display: none; }
}

/* ===== INTRO — coverage tiles + expandable panels ====================== */
/* Stat tiles are clickable <button>s — click to expand the matching panel
   below the grid. Button-element resets are applied here so the visual
   stays identical to the original card while the element is interactive. */
.svc-final .svc-stat-tile {
  display: block; width: 100%; text-align: left;
  border: 0; border-left: 3px solid var(--svc-green);
  padding: 10px 14px;
  background: var(--svc-cream); cursor: pointer;
  font: inherit; color: inherit;
  transition: background 0.15s ease, border-color 0.15s ease;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.svc-final .svc-stat-tile:hover { background: #f0f8f4; }
.svc-final .svc-stat-tile:focus-visible { outline: 2px solid var(--svc-green); outline-offset: 2px; }
.svc-final .svc-stat-tile.is-active {
  background: var(--svc-green); border-left-color: var(--svc-green-darker);
}
.svc-final .svc-stat-tile__num { font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--svc-green); font-size: 20px; line-height: 1.1; }
.svc-final .svc-stat-tile__label { font-size: 12.5px; color: var(--svc-green-dark); font-weight: 600; }
.svc-final .svc-stat-tile.is-active .svc-stat-tile__num,
.svc-final .svc-stat-tile.is-active .svc-stat-tile__label { color: #fff; }
/* Coverage-tile sub-line (the "1st line before opening") — matched to the CSI
   intro accordions (cs-cover__sub). June 2026. */
.svc-final .svc-stat-tile__sub { display: block; font-size: 11px; color: var(--svc-body); font-weight: 400; line-height: 1.4; margin-top: 4px; }
.svc-final .svc-stat-tile.is-active .svc-stat-tile__sub { color: #fff; }
.svc-final .svc-stat-tile__chev {
  font-size: 14px; color: var(--svc-green); transition: transform 0.2s ease, color 0.15s ease;
  flex-shrink: 0;
}
.svc-final .svc-stat-tile.is-active .svc-stat-tile__chev { color: #fff; transform: rotate(180deg); }

/* Coverage panel — sits beneath the 2×2 stat-tile grid and swaps content
   based on which tile is active. */
.svc-final .svc-coverage__panels { margin-top: 12px; }
.svc-final .svc-coverage__panel {
  display: none;
  background: var(--svc-cream); border-left: 3px solid var(--svc-green);
  padding: 18px 20px;
  font-size: 13.5px; line-height: 1.7;
}
.svc-final .svc-coverage__panel.is-active { display: block; }
.svc-final .svc-coverage__panel h4 {
  font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 14px;
  color: var(--svc-green-dark); letter-spacing: 0.3px;
  margin: 0 0 10px; text-transform: none;
}
.svc-final .svc-coverage__panel p { color: var(--svc-body); margin: 0 0 10px; }
/* Cover-wording bullet lists (Rebecca 12 Jul): proper dots, matching the
   Legal Expenses panels' style. */
.svc-final .svc-coverage__panel ul { margin: 0 0 10px; padding-left: 22px; list-style: disc; }
.svc-final .svc-coverage__panel ul li { color: var(--svc-body); margin: 0 0 6px; }
.svc-final .svc-coverage__panel ul li::marker { color: var(--svc-orange); }
.svc-final .svc-coverage__panel p:last-child { margin-bottom: 0; }

/* Intro right-column image tiles — adapts 1 / 4 / 9 layouts in template */
.svc-final .svc-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  background-color: #1a1a1a;
  padding: 14px;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
}
.svc-final .svc-tile__img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}
.svc-final .svc-tile::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  /* Light overlay for the intro activity images (June 2026 client req). */
  background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.15) 100%);
}
.svc-final .svc-tile__label {
  position: relative; z-index: 2;
  font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 12px;
  color: #fff; letter-spacing: 0.5px; text-transform: uppercase;
  /* Matched to the hero title text-shadow (.svc-hero p.h1). */
  text-shadow: 0 2px 14px rgba(0,0,0,0.35);
}
.svc-final .svc-tile--solo .svc-tile__label { font-size: 16px; }

/* T&Cs block (oi-tc) — promoted from the optional-insurances page's inline CSS so the
   same block can be reused on the service template's disciplines section (June 2026). */
.svc-final .oi-tc { border-top: 1px solid var(--svc-line); padding-top: 28px; }
.svc-final .oi-tc__title { font-family: 'Montserrat', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #666; font-size: 14px; margin: 0 0 10px; }
.svc-final .oi-tc__body { font-size: var(--ccc3-p-size); line-height: 1.7; color: var(--svc-body); margin: 0 0 14px; }

/* Why-Choose cards as whole-card links — moved here from the homepage's inline
   <style> so the service template's Why-C³ cards are clickable too (June 2026).
   Keep the card typography (the <a> must not green/underline the text). */
.svc-final a.svc-why__card { text-decoration: none; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.svc-final a.svc-why__card .svc-why__title { color: #000; }
.svc-final a.svc-why__card .svc-why__body { color: var(--svc-body); font-weight: 400; }
.svc-final a.svc-why__card:hover { border-color: var(--svc-green); box-shadow: 0 14px 32px rgba(0,0,0,0.10); transform: translateY(-3px); }

/* ===== LEGAL EXPENSES section (optional, firearm-licence pages) =========
   Standalone band on white with a hairline top divider, sitting between the
   white Intro and the cream Why C³ sections — keeps the page rhythm of
   alternating bg colours instead of doubling up on cream. Centred eyebrow
   + h2 rhythm matches Why C³ / Disciplines. Solid-green circular icon
   badge anchors the section on white. Body is a single max-width column:
   two-row accordion + footer with eligibility + document-link paragraph. */
.svc-final .svc-legal-section {
  background: #fff;
  padding: 80px 0;
  border-top: 1px solid var(--svc-line);
}
.svc-final .svc-legal-section__badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  background: var(--svc-green);
  color: #fff;
  font-size: 20px;
  margin-bottom: 16px;
}
.svc-final .svc-legal-section__lede {
  max-width: 680px;
  font-size: var(--ccc3-p-size);
  line-height: 1.7;
  color: var(--svc-body);
  margin-bottom: 0;
}
.svc-final .svc-legal-section__body { max-width: 920px; }

.svc-final .svc-legal { display: flex; flex-direction: column; gap: 12px; }
.svc-final .svc-legal__row {
  border: 2px solid var(--svc-green);
  background: #fff;
  overflow: hidden;
}
.svc-final .svc-legal__head {
  display: flex; align-items: center;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 18px 24px;
  color: var(--svc-green-dark);
  font-family: 'Montserrat', sans-serif;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
  gap: 18px;
}
.svc-final .svc-legal__head:focus-visible {
  outline: 2px solid var(--svc-green);
  outline-offset: 2px;
}
.svc-final .svc-legal__head-amount {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.3px;
  white-space: nowrap;
  flex: 0 0 auto;
}
.svc-final .svc-legal__head-label {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  flex: 1 1 auto;
  line-height: 1.3;
}
.svc-final .svc-legal__head-chev {
  font-size: 14px;
  transition: transform .2s ease;
  flex: 0 0 auto;
}
.svc-final .svc-legal__head[aria-expanded="true"] {
  background: var(--svc-green);
  color: #fff;
}
.svc-final .svc-legal__head[aria-expanded="true"] .svc-legal__head-chev {
  transform: rotate(180deg);
}
.svc-final .svc-legal__panel {
  padding: 20px 24px 24px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--svc-body);
  border-top: 1px solid var(--svc-line);
}
.svc-final .svc-legal__claim-limit {
  background: var(--svc-cream);
  padding: 12px 16px;
  border-left: 3px solid var(--svc-green);
  margin: 0 0 16px;
  font-size: 13.5px;
  color: var(--svc-green-dark);
}
.svc-final .svc-legal__claim-limit strong { color: var(--svc-green-dark); }
.svc-final .svc-legal__panel p { margin: 0 0 12px; }
.svc-final .svc-legal__panel p:last-child { margin-bottom: 0; }
.svc-final .svc-legal__panel ul { margin: 0; padding-left: 22px; }
.svc-final .svc-legal__panel ul li {
  margin-bottom: 8px;
  color: var(--svc-body);
}
.svc-final .svc-legal__panel ul li::marker { color: var(--svc-orange); }
.svc-final .svc-legal__panel ul li:last-child { margin-bottom: 0; }

.svc-final .svc-legal-section__footer {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--svc-line);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--svc-body);
}
.svc-final .svc-legal-section__footer p { margin-bottom: 12px; }
.svc-final .svc-legal-section__footer p:last-child { margin-bottom: 0; }
.svc-final .svc-legal-section__footer a:hover { color: var(--svc-green-dark); }

@media (max-width: 575px) {
  .svc-final .svc-legal-section { padding: 60px 0; }
  .svc-final .svc-legal__head { padding: 14px 18px; gap: 12px; flex-wrap: wrap; }
  .svc-final .svc-legal__head-amount { font-size: 18px; }
  .svc-final .svc-legal__head-label { font-size: 12.5px; flex: 1 1 100%; }
  .svc-final .svc-legal__panel { padding: 16px 18px 18px; }
}

/* ===== WHY C³ ========================================================== */
.svc-final .svc-why { background: var(--svc-cream); padding: 80px 0; }
.svc-final .svc-why__card {
  background: #fff; padding: 22px;
  display: flex; gap: 16px; align-items: flex-start;
  border: 1px solid var(--svc-line); height: 100%;
}
.svc-final .svc-why__icon {
  width: 42px; height: 42px; flex-shrink: 0;
  background: #f0f8f4; color: var(--svc-green);
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.svc-final .svc-why__title { font-family: 'Montserrat', sans-serif; font-weight: 700; color: #000; font-size: 14px; letter-spacing: 0.5px; margin-bottom: 4px; text-transform: uppercase; }
.svc-final .svc-why__body { font-size: var(--ccc3-p-size); line-height: 1.55; }
/* Legal-page intro cards reuse .svc-why__card but are icon + title only (no body),
   so centre the two vertically instead of top-aligning. Resting shadow matches
   the homepage Why-C³ cards these were copied from (the homepage rule is scoped
   .hp-home so it doesn't reach here). — July 2026 (client req) */
.svc-final .svc-why__card--legal { align-items: center; box-shadow: 0 6px 20px rgba(0,0,0,0.05); }
/* Titles in the client's charcoal (#666, not black) — 2 Jul 2026 client req.
   The a. prefix matches the specificity of the #000 rule above so this wins. */
.svc-final a.svc-why__card--legal .svc-why__title { color: #666; }

/* ===== TESTIMONIALS ==================================================== */
.svc-final .svc-testimonials { background: var(--svc-green-dark); padding: 70px 0; color: #fff; }
.svc-final .svc-review { background: #fff; color: var(--svc-body); padding: 22px 22px 20px; position: relative; height: 100%; }
.svc-final .svc-review::after {
  content: ''; position: absolute; bottom: -10px; left: 30px; width: 0; height: 0;
  border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 12px solid #fff;
}
.svc-final .svc-review__name { font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--svc-green-dark); font-size: 13px; }
.svc-final .svc-review__body { font-size: 13.5px; line-height: 1.55; margin: 10px 0 14px; }
.svc-final .svc-review__source { font-size: 12px; color: var(--svc-green); font-weight: 600; }
.svc-final a.svc-review__source { text-decoration: none; }
.svc-final a.svc-review__source:hover { text-decoration: underline; color: var(--svc-green); }
/* Slick carousel compatibility (used by the testimonial-block-ccc-7 snippet
   which hooks Slick to .autoplayreviews via head.blade.php). Slick adds
   .slick-slide directly to our .col-12 element (not as a wrapper), so the
   selectors below target the slide itself for the gutter padding. */
.svc-final .autoplayreviews .slick-list { padding-bottom: 15px; }
.svc-final .autoplayreviews .slick-track { display: flex; align-items: stretch; }
.svc-final .autoplayreviews .slick-slide {
  height: auto;
  padding: 0 12px;
  box-sizing: border-box;
}
.svc-final .autoplayreviews .slick-slide > .svc-review { height: 100%; }
.svc-final .svc-stars { color: #f5a623; font-size: 12px; letter-spacing: 1px; }
/* Mobile-only horizontal scroller for review cards. Below md the row
   becomes a snap-scrolling carousel with the next card peeking so users
   know there's more to see. The hint line below shows arrows + label. */
.svc-final .svc-testimonials__hint { display: none; }
@media (max-width: 767.98px) {
  .svc-final .svc-testimonials__scroller {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin: 0 -24px;
    padding: 0 24px 4px;
    scrollbar-width: none;
  }
  .svc-final .svc-testimonials__scroller::-webkit-scrollbar { display: none; }
  .svc-final .svc-testimonials__item {
    flex: 0 0 82%;
    max-width: 82%;
    scroll-snap-align: start;
  }
  .svc-final .svc-testimonials__hint {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    margin-top: 22px;
    font-family: 'Montserrat', sans-serif; font-weight: 600;
    font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
    color: rgba(255,255,255,0.75);
  }
  .svc-final .svc-testimonials__hint::before,
  .svc-final .svc-testimonials__hint::after {
    content: ''; width: 28px; height: 1px;
    background: rgba(255,255,255,0.35);
  }
}

/* ===== DISCIPLINES — image cards, title top-left, body on hover ======== */
.svc-final .svc-discipline {
  position: relative; aspect-ratio: 4 / 3;
  background-color: #1a1a1a;
  overflow: hidden;
  border-top: 3px solid var(--svc-green);
}
.svc-final .svc-discipline__img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}
/* Default-state gradient at the top so the title reads on bright photos */
.svc-final .svc-discipline::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 55%);
  transition: opacity .25s ease;
}
/* Hover overlay — solid green-darker tint with the body text on top */
.svc-final .svc-discipline::after {
  content: ''; position: absolute; inset: 0; z-index: 2;
  background: rgba(6, 50, 32, 0.88);
  opacity: 0; transition: opacity .25s ease;
}
.svc-final .svc-discipline:hover::after,
.svc-final .svc-discipline:focus-within::after { opacity: 1; }

.svc-final .svc-discipline__title {
  position: absolute; top: 22px; left: 22px; right: 22px; z-index: 4;
  font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 16px;
  letter-spacing: 0.8px; color: #fff;
  text-transform: uppercase; line-height: 1.2; margin: 0;
  text-shadow: 0 2px 6px rgba(0,0,0,0.5);
  transition: opacity .25s ease;
}

.svc-final .svc-discipline__body {
  position: absolute; inset: 0; z-index: 3;
  padding: 64px 22px 22px;
  font-size: 13.5px; line-height: 1.6; color: #fff;
  display: flex; flex-direction: column; justify-content: flex-end;
  opacity: 0; transition: opacity .25s ease;
  pointer-events: none;
}
.svc-final .svc-discipline:hover .svc-discipline__body,
.svc-final .svc-discipline:focus-within .svc-discipline__body {
  opacity: 1; pointer-events: auto;
}
/* On hover/focus, fade the title out and drop the body's reserved top padding
   so longer descriptions use the full card height instead of overflowing onto
   the title at narrower widths (~≤1350px). June 2026 client req. */
.svc-final .svc-discipline:hover .svc-discipline__title,
.svc-final .svc-discipline:focus-within .svc-discipline__title { opacity: 0; }
.svc-final .svc-discipline:hover .svc-discipline__body,
.svc-final .svc-discipline:focus-within .svc-discipline__body { padding-top: 22px; }
.svc-final .svc-discipline__body p { color: #fff; margin-bottom: 8px; }
.svc-final .svc-discipline__body p:last-child { margin-bottom: 0; }
.svc-final .svc-discipline__body a { color: #fff; text-decoration: underline; font-weight: 700; }
.svc-final .svc-discipline__body a:hover { color: var(--svc-cream); }

/* Touch devices have no hover — show body permanently with a soft dark scrim */
@media (hover: none) {
  .svc-final .svc-discipline::after { opacity: 1; background: rgba(6, 50, 32, 0.75); }
  .svc-final .svc-discipline__body  { opacity: 1; pointer-events: auto; }
}

/* Placeholder CTA cards — fill leftover slots in the disciplines grid
   so the last row stays balanced. Same 4:3 shape as the real discipline
   cards but a flat dark-green background, no photo, and a hover lift
   that nudges the arrow forward. */
.svc-final .svc-discipline-cta {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px;
  aspect-ratio: 4 / 3;
  padding: 22px;
  background: var(--svc-green-dark);
  border-top: 3px solid var(--svc-green);
  color: #fff;
  text-align: center;
  text-decoration: none;
  transition: background .25s ease;
}
.svc-final .svc-discipline-cta:hover,
.svc-final .svc-discipline-cta:focus-visible {
  background: var(--svc-green); color: #fff;
}
.svc-final .svc-discipline-cta__title {
  font-family: 'Montserrat', sans-serif; font-weight: 700;
  font-size: 18px; letter-spacing: 0.8px; line-height: 1.2;
  text-transform: uppercase;
}
.svc-final .svc-discipline-cta__arrow {
  font-size: 20px; line-height: 1;
  transition: transform .25s ease;
}
.svc-final .svc-discipline-cta:hover .svc-discipline-cta__arrow,
.svc-final .svc-discipline-cta:focus-visible .svc-discipline-cta__arrow {
  transform: translateX(6px);
}

/* ===== CTA FORM (dark green block + plan picker) ======================= */
.svc-final .svc-cta { background: var(--svc-green-darker); padding: 80px 0; }
.svc-final .svc-cta__body-max { max-width: 460px; }
.svc-final .svc-cta__checklist { list-style: none; padding: 0; margin: 0; }
.svc-final .svc-cta__checklist li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 6px 0; color: #fff;
}
.svc-final .svc-cta__checklist .svc-checklist__check { color: var(--svc-green); font-weight: 700; font-size: 16px; line-height: 1.4; }

/* ===== PLAN PICKER ===================================================== */
.svc-final .svc-plan { background: #fff; box-shadow: 0 24px 60px rgba(0,0,0,0.28); }
.svc-final .svc-plan__head {
  background: var(--svc-green); color: #fff; padding: 16px 24px;
  display: flex; justify-content: space-between; align-items: center;
}
.svc-final .svc-plan__head-title { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: 1px; text-transform: uppercase; }
.svc-final .svc-plan__body { padding: 22px 24px 24px; }
.svc-final .svc-plan__label { font-family: 'Montserrat', sans-serif; font-size: 11px; letter-spacing: 1.5px; color: #8a8a83; text-transform: uppercase; margin-bottom: 10px; }
.svc-final .svc-plan__row {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
  padding: 12px 14px; margin-bottom: 8px; cursor: pointer;
  border: 2px solid var(--svc-line); background: #fff;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.svc-final .svc-plan__row:hover { border-color: var(--svc-green); }
.svc-final .svc-plan__row--highlight { border-color: var(--svc-green); background: #f0f8f4; }
.svc-final .svc-plan__radio {
  width: 18px; height: 18px;
  border: 2px solid #c9c9c4; background: #fff;
}
.svc-final .svc-plan__row--highlight .svc-plan__radio { border-color: var(--svc-green); background: var(--svc-green); box-shadow: inset 0 0 0 3px #fff; }
.svc-final .svc-plan__row-name  { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 14px; color: var(--svc-green-dark); }
.svc-final .svc-plan__row-term  { font-size: 11px; color: #9a9a93; text-transform: uppercase; letter-spacing: 1px; margin-left: 8px; }
.svc-final .svc-plan__row-desc  { font-size: 12px; color: var(--svc-body); margin-top: 2px; }
.svc-final .svc-plan__row-price { font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--svc-green); font-size: 18px; }
.svc-final .svc-plan__foot { text-align: center; margin-top: 12px; font-size: 11px; color: var(--svc-body); }

/* ===== FAQ ============================================================= */
/* Restyle the Zeus [faqs page_id=…] shortcode output (Bootstrap accordion
   via partials/faq.blade.php) to match the green-chevron design used in
   the rest of the service template. Markup we're targeting:
     #faqs.accordion
       > .accordion-item
           > .accordion-header > div > button.accordion-button.custom-accordion
               > p.text-uppercase > span (question)
           > .collapse > .accordion-body > .p-md-3 > span (answer)
*/
.svc-final #faqs.accordion {
  --bs-accordion-bg: transparent;
  --bs-accordion-border-color: var(--svc-line);
  --bs-accordion-border-width: 0;
  --bs-accordion-active-bg: transparent;
  --bs-accordion-active-color: var(--svc-green);
  --bs-accordion-btn-focus-box-shadow: none;
}
.svc-final .accordion-item {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--svc-line);
  border-radius: 0 !important;
}
.svc-final .accordion-header > div { width: 100%; }
/* Override the global .custom-accordion { background:#eee } so the button
   stays transparent inside our scope. */
.svc-final .accordion-button,
.svc-final .accordion-button.custom-accordion {
  width: 100%;
  padding: 16px 4px;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.svc-final .accordion-button p {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.3px;
  color: var(--svc-green-dark);
  text-transform: uppercase;
  margin: 0;
}
.svc-final .accordion-button:not(.collapsed) p { color: var(--svc-green); }
/* Swap Bootstrap's default chevron-down SVG for a + / − text marker. */
.svc-final .accordion-button::after {
  content: '+';
  background-image: none !important;
  width: auto; height: auto;
  font-size: 18px; font-weight: 700;
  color: var(--svc-green);
  line-height: 1;
  transform: none;
  transition: none;
  flex: 0 0 auto;
}
/* overrides.css re-applies its chevron SVG with !important at equal
   specificity for the OPEN state only (.accordion-button:not(.collapsed)
   ::after) and loads after this file, so it was rendering a squashed
   chevron behind the − marker. Re-kill it at higher specificity. */
.svc-final .accordion-button:not(.collapsed)::after { content: '−'; transform: none; background-image: none !important; }
/* Body — strip the partial's inner .p-md-3 padding wrapper so our own
   tight padding controls the spacing. */
.svc-final .accordion-body {
  padding: 0 4px 18px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--svc-body);
}
.svc-final .accordion-body > div.p-md-3,
.svc-final .accordion-body > div.p-2 { padding: 0 !important; }
.svc-final .accordion-body p:last-child { margin-bottom: 0; }

/* ===== Responsive (service template) =================================== */
/* Hero h1 base is now 44px via --ccc3-hero-h1-size (no separate tablet step
   needed); only the phone size steps down. Every other heading scales via the
   ccc3 .h{N} classes which are already responsive. */
@media (max-width: 575.98px) {
  .svc-final .svc-hero p.h1 { font-size: 32px !important; }
}

/* ===== Footer blog band — June 2026 client feedback ====================
   Title smaller + grey (more clearly distinct from section titles), article
   text grey (was near-black #333 via .news p), and the CTA on the new svc
   orange design tokens. Selectors carry .news to outrank the existing
   `.footer-blog-section .latestNews .news p` colour rule. */
.footer-blog-section .latestNews .footer-blog__title {
  font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 700;
  letter-spacing: 1px; color: #9a9a93; margin-bottom: 20px;
}
.footer-blog-section .latestNews .news p.footer-blog__article-title { color: #5a5a5a; font-size: 16px; }
.footer-blog-section .latestNews .news p.footer-blog__article-text { color: #5a5a5a; font-weight: 400; }
.footer-blog-section .latestNews .news a.footer-blog__btn {
  display: inline-block; margin-top: 12px;
  font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 12px;
  letter-spacing: .8px; text-transform: uppercase; padding: 11px 22px;
  border-radius: 0; background: #B14D18; color: #fff; border: 2px solid #B14D18;
  transition: background .15s ease, border-color .15s ease;
}
.footer-blog-section .latestNews .news a.footer-blog__btn:hover { background: #9a4214; border-color: #9a4214; color: #fff; }

/* ===== Cookie notification (gdpr-pill) — CCC3 brand =====================
   The cookie banner markup lives in shared Zeus core (gdpr/banner) and is used
   by every region (DCC is blue), so it is branded HERE in the CCC3-only theme
   stylesheet rather than in core. The banner sits outside .svc-final, so literal
   brand hex is used; .gdpr-flash .gdpr-pill specificity beats the banner's inline
   <style>, and !important overrides the inline button colours. Sharp 90° corners
   per the CCC3 brand. */
.gdpr-flash .gdpr-pill { border-radius: 0 !important; }
.gdpr-flash .gdpr-pill .gdpr-title { font-family: 'Montserrat', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #074c30; }
.gdpr-flash .gdpr-pill a:not(.button) { color: #008752; }
.gdpr-flash .gdpr-pill .button {
  border-radius: 0 !important; font-family: 'Montserrat', sans-serif; font-weight: 700;
  font-size: 12px; letter-spacing: .6px; text-transform: uppercase;
  background-color: #fff !important; color: #008752 !important; border: 2px solid #008752 !important;
}
/* Accept All (inline green in core) → solid brand green; Decline (inline red) → muted outline. */
.gdpr-flash .gdpr-pill .button[style*="green"] { background-color: #008752 !important; color: #fff !important; border-color: #008752 !important; }
.gdpr-flash .gdpr-pill .button[style*="#f00"] { background-color: #fff !important; color: #9a4214 !important; border-color: #9a4214 !important; }

/* ----- Cookie preferences modal (gdpr-modal) — CCC3 brand (same approach as
   the pill: shared core markup, branded for CCC3 only here). Sharp corners,
   brand green accents, orange primary CTA. ----- */
.gdpr-modal-background .gdpr-modal { border-radius: 0; border-top: 4px solid #008752; }
.gdpr-modal-background .gdpr-modal .overview .title { font-family: 'Montserrat', sans-serif; text-transform: uppercase; letter-spacing: .5px; color: #074c30; }
/* Left tabs — sharp corners, active tab in brand green (was Bootstrap blue) */
.gdpr-modal-background .nav-pills .nav-link { border-radius: 0 !important; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px; color: #074c30; }
.gdpr-modal-background .nav-pills .nav-link.active { background-color: #008752 !important; color: #fff !important; }
/* Toggle switch — ON state brand green (was blue #03a9f4); OFF stays red */
.gdpr-modal-background .gdpr-modal .toggleButton .knobs:before { background-color: #008752; }
.gdpr-modal-background .gdpr-modal .toggleButton .layer { background-color: #eef6f1; }
/* Save Preferences — primary brand CTA (orange), sharp corners */
.gdpr-modal-background .btn-primary { background-color: #B14D18 !important; border-color: #B14D18 !important; color: #fff !important; border-radius: 0 !important; font-family: 'Montserrat', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; font-size: 12px; padding: 11px 26px; }
.gdpr-modal-background .btn-primary:hover { background-color: #9a4214 !important; border-color: #9a4214 !important; color: #fff !important; }

/* =====================================================================
   LEGAL PAGE (/legal/) — svc-final overhaul
   Brings the legal index nav cards, policy text, cookie table and
   download cards onto the svc-* design tokens (green/cream, Montserrat,
   sharp 90° corners). Scoped under .svc-final so they override the older
   global .legal-card / .policy-download-card rules above.
   ===================================================================== */
/* Intro index nav boxes — matched to the redesigned .lgl-card look below:
   white card, hairline border, hover lift (shadow + raise). Body text is the
   site grey (--svc-body), not dark green, per client (matches every other card). */
.svc-final .legal-card { background: #fff; padding: 28px 18px; border: 1px solid var(--svc-line); text-align: center; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; position: relative; height: 100%; }
.svc-final .legal-card .legal-icon { font-size: 28px; color: var(--svc-green); transition: color .15s ease; }
.svc-final .legal-card a { color: var(--svc-body); text-decoration: none; font-size: 15px; letter-spacing: .4px; font-family: 'Montserrat', sans-serif; }
.svc-final .legal-card:hover { background: #fff; border-color: var(--svc-green); box-shadow: 0 12px 28px rgba(0,0,0,0.08); transform: translateY(-3px); }
.svc-final .legal-card:hover .legal-icon,
.svc-final .legal-card:hover a { color: var(--svc-green); }

.svc-final .legal-doc-group { font-family: 'Montserrat', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--svc-green); font-size: 16px; }

.svc-final .policy-download-card { background: var(--svc-cream); padding: 26px 28px; border: 1px solid var(--svc-line); transition: border-color .15s ease, background .15s ease; position: relative; height: 100%; display: flex; flex-direction: column; }
.svc-final .policy-download-card a { color: var(--svc-green-dark); text-decoration: none; margin-bottom: 10px; padding-right: 34px; font-family: 'Montserrat', sans-serif; font-size: 16px; line-height: 1.35; }
.svc-final .policy-download-card p { color: var(--svc-body); font-size: 13.5px; line-height: 1.6; margin: 0; }
.svc-final .policy-download-icon { position: absolute; right: 24px; bottom: 24px; font-size: 22px; color: var(--svc-green); }
.svc-final .policy-download-card:hover { background: #fff; border-color: var(--svc-green); }
.svc-final .policy-download-card:hover .policy-download-icon,
.svc-final .policy-download-card:hover a { color: var(--svc-green); }

/* =====================================================================
   LEGAL PAGE — PROSE RESTYLE ("Cards + Rails")
   Replaces the old eight-identical-full-width-text-bands layout. Short
   one-liner sections become compact icon cards; the long Insurance &
   Privacy sections use a heading rail + a constrained reading column;
   Company Information becomes a contact block. Alternating bands +
   hairline borders + green icon badges differentiate each band (the
   --svc-cream is near-white, so colour alone is too subtle). All scoped
   under .svc-final, all 90° corners, real <h2>/<h3> headings in the HTML.
   ===================================================================== */

/* Anchor targets clear the fixed site header on #jump */
.svc-final .lgl-anchor { scroll-margin-top: 110px; }

/* Section shell: alternating bands + intro head */
.svc-final .lgl-band            { padding: 72px 0; border-top: 1px solid var(--svc-line); }
.svc-final .lgl-band--cream     { background: var(--svc-cream); }
.svc-final .lgl-band--white     { background: #fff; }
.svc-final .lgl-band__head      { max-width: 760px; }
.svc-final .lgl-band__head--center { margin-left: auto; margin-right: auto; text-align: center; }
.svc-final .lgl-band .h2        { font-size: 26px !important; margin-bottom: 6px; }
.svc-final .lgl-band__lede      { max-width: 640px; font-size: var(--ccc3-p-size); line-height: 1.7; color: var(--svc-body); margin: 8px 0 0; }
.svc-final .lgl-band__head--center .lgl-band__lede { margin-left: auto; margin-right: auto; }
@media (max-width: 575px) { .svc-final .lgl-band { padding: 52px 0; } }

/* Green icon badge */
.svc-final .lgl-badge { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; flex: 0 0 46px; background: var(--svc-green); color: #fff; font-size: 18px; }
.svc-final .lgl-badge--soft { background: #f0f8f4; color: var(--svc-green); }

/* Short-section cards (Membership / Payment / Reseller) */
.svc-final .lgl-card { background: #fff; border: 1px solid var(--svc-line); padding: 26px 26px 24px; height: 100%; display: flex; flex-direction: column; gap: 14px; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.svc-final .lgl-card:hover { border-color: var(--svc-green); box-shadow: 0 12px 28px rgba(0,0,0,0.08); transform: translateY(-3px); }
.svc-final .lgl-card__title { font-family: 'Montserrat', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--svc-green-dark); font-size: 14px; line-height: 1.3; margin: 0; }
.svc-final .lgl-card__body { font-size: var(--ccc3-p-size); line-height: 1.65; color: var(--svc-body); margin: 0; }
.svc-final .lgl-card__body a { color: var(--svc-green); font-weight: 700; }
.svc-final .lgl-card__body a:hover { color: var(--svc-green-dark); }
.svc-final .lgl-card__link { margin-top: auto; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: .6px; text-transform: uppercase; color: var(--svc-green); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.svc-final .lgl-card__link:hover { color: var(--svc-green-dark); }
.svc-final .lgl-card__link i { font-size: 13px; }

/* Contact block (Company Information) */
.svc-final .lgl-contact { background: #fff; border: 1px solid var(--svc-line); height: 100%; padding: 28px 30px; }
.svc-final .lgl-contact__title { font-family: 'Montserrat', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--svc-green-dark); font-size: 13px; margin: 14px 0 16px; }
.svc-final .lgl-contact__list { list-style: none; margin: 0; padding: 0; }
.svc-final .lgl-contact__list li { display: flex; align-items: flex-start; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--svc-line); font-size: var(--ccc3-p-size); line-height: 1.6; color: var(--svc-body); }
.svc-final .lgl-contact__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.svc-final .lgl-contact__list i { color: var(--svc-green); font-size: 15px; width: 18px; text-align: center; margin-top: 2px; flex: 0 0 18px; }
.svc-final .lgl-contact__k { display: block; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .8px; text-transform: uppercase; color: var(--svc-green-dark); margin-bottom: 2px; }
.svc-final .lgl-contact__list a { color: var(--svc-green); font-weight: 700; }
.svc-final .lgl-contact__list a:hover { color: var(--svc-green-dark); }

/* Long-form: heading rail + constrained reading body (Insurance / Privacy) */
.svc-final .lgl-rail { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 56px; align-items: start; }
.svc-final .lgl-rail__aside { position: sticky; top: 130px; }
.svc-final .lgl-rail__aside .h2 { font-size: 24px !important; margin: 14px 0 10px; }
.svc-final .lgl-rail__aside .svc-eyebrow { margin-bottom: 6px; }
.svc-final .lgl-rail__body { max-width: 680px; }
.svc-final .lgl-rail__body p { color: var(--svc-body); line-height: 1.8; margin: 0 0 16px; font-size: var(--ccc3-p-size); }
.svc-final .lgl-rail__body p:last-child { margin-bottom: 0; }
.svc-final .lgl-rail__body ul { color: var(--svc-body); line-height: 1.75; margin: 0 0 18px; padding-left: 20px; }
.svc-final .lgl-rail__body li { margin-bottom: 8px; }
.svc-final .lgl-rail__body li::marker { color: var(--svc-orange); }
.svc-final .lgl-rail__body a { color: var(--svc-green); font-weight: 700; }
.svc-final .lgl-rail__body a:hover { color: var(--svc-green-dark); }

/* Sub-headed blocks inside the long body (Privacy) */
.svc-final .lgl-sub { padding-top: 26px; margin-top: 26px; border-top: 1px solid var(--svc-line); scroll-margin-top: 120px; }
.svc-final .lgl-sub:first-of-type { padding-top: 0; margin-top: 22px; border-top: 0; }
.svc-final .lgl-sub__h { font-family: 'Montserrat', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--svc-green-dark); font-size: 15px; margin: 0 0 12px; }

/* In-rail jump nav (Privacy) */
.svc-final .lgl-railnav { list-style: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--svc-line); }
.svc-final .lgl-railnav li { margin-bottom: 10px; }
.svc-final .lgl-railnav a { font-size: 12.5px; font-weight: 600; color: var(--svc-body); text-decoration: none; display: inline-flex; gap: 8px; align-items: baseline; }
.svc-final .lgl-railnav a::before { content: '\2014'; color: var(--svc-green); }
.svc-final .lgl-railnav a:hover { color: var(--svc-green-dark); }

/* Inset callout for the Insurance downloads paragraph */
.svc-final .lgl-callout { border-left: 3px solid var(--svc-green); padding: 14px 18px; margin: 0 0 16px; font-size: 13.5px; line-height: 1.75; color: var(--svc-green-dark); background: #fff; }
.svc-final .lgl-band--white .lgl-callout { background: var(--svc-cream); }
.svc-final .lgl-callout a { color: var(--svc-green); font-weight: 700; }

/* Cookie table header cells */
.svc-final .lgl-th { font-family: 'Montserrat', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--svc-green-dark); font-size: 13px; }

/* Keyboard focus affordance for the in-page nav links */
.svc-final .lgl-railnav a:focus-visible,
.svc-final .lgl-card__link:focus-visible { outline: 2px solid var(--svc-green); outline-offset: 2px; }

@media (max-width: 991.98px) {
  .svc-final .lgl-rail { grid-template-columns: 1fr; gap: 24px; }
  .svc-final .lgl-rail__aside { position: static; }
  .svc-final .lgl-rail__body { max-width: 680px; }
  .svc-final .lgl-railnav { display: none; }
}

/* =====================================================================
   CONSISTENT SECTION SPACING + NO-HERO PAGE HEADERS — June 2026 (client req)
   - Every non-hero section sits 72px from the bottom edge of the section
     above (padding, never margin). The utility pattern is `section.py-5`
     (48px) + `.svc-container.py-md-4` (24px) = 72px; the named feature
     bands below are normalised to the same 72px top so all sections match.
   - No-hero pages (basket, checkout, add member details) use .cc-pagehead:
     brand eyebrow + green heading, 72px below the fixed navbar.
   ===================================================================== */
.svc-final .svc-why          { padding-top: 72px; padding-bottom: 72px; }
.svc-final .svc-cta          { padding-top: 72px; padding-bottom: 72px; }
.svc-final .svc-testimonials { padding-top: 72px; padding-bottom: 72px; }
.svc-final .svc-legal-section { padding-top: 72px; padding-bottom: 72px; }

/* Shared DB-static-block bands ship their own vertical padding from an inline
   <style> in the page body (`.svc-final .X { padding: … }`, specificity 0,2,0)
   that loads AFTER ccc3.css, so normalise them to the same 72px rhythm with a
   higher-specificity `.svc-final section.X` (0,2,1) selector. — July 2026 (client req) */
.svc-final section.svc-promo-section { padding-top: 72px; padding-bottom: 72px; } /* instant-cover / groups-syndicates / trade-login (was 52px) */
.svc-final section.hp-price          { padding-top: 72px; padding-bottom: 72px; } /* membership-price-cards (was 80/60px) */
.svc-final section.raf17             { padding-top: 72px; padding-bottom: 72px; } /* recommend-a-friend (was 52px) */
/* Legacy testimonial band gets its 48px from Bootstrap .py-5 (declared !important),
   so its override also needs !important. .navy-section keeps it off blog .comments. */
section.comments.navy-section { padding-top: 72px !important; padding-bottom: 72px !important; } /* testimonial-block-ccc-7 (was 48px) */

/* No-hero page header (basket / checkout / add member details) */
.cc-pagehead { text-align: center; padding-top: 72px; }
.cc-pagehead__eyebrow { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: #8a8a83; margin: 0 0 8px; }
.cc-pagehead__title { color: var(--svc-green) !important; margin: 0 0 1.5rem; }
/* Checkout step titles (Your Details / Contact / Delivery / Payment …) in brand green */
.checkout-block .title { color: var(--svc-green); }