/* ===========================================
   Greenest Choice Landing Page
   Page-specific styles only
   =========================================== */


/* -----------------------------------------
   Proportional scaling at mid-range viewports
   ----------------------------------------- */

@media (min-width: 1200px) and (max-width: 1699.98px) {
	.greenest-choice .display-3 {
		font-size: 2.5rem;
	}
	.greenest-choice .display-5 {
		font-size: 2rem;
	}
	.greenest-choice .gc-fact-card {
		padding: 2.25rem 1.75rem 1.75rem;
	}
	.greenest-choice .gc-fact-title {
		font-size: 1.5rem;
	}
	.greenest-choice .gc-fact-text {
		font-size: 1rem;
	}
	.greenest-choice .gc-fact-num {
		font-size: 20rem;
	}
	.greenest-choice .gc-testimonial-card blockquote {
		font-size: 1.6rem;
	}
	.greenest-choice .gc-testimonial-icon {
		width: 75px;
	}
	.greenest-choice .gc-illustrations img {
		height: 130px;
	}
	.greenest-choice .btn.btn-lg {
		font-size: 1.75rem;
		padding: 0.9rem 2.75rem;
	}
}


/* -----------------------------------------
   Page-level spacing override
   ----------------------------------------- */

.greenest-choice section {
	margin-bottom: 2.5rem;
}

@media (min-width: 992px) {
	.greenest-choice section {
		margin-bottom: 3.5rem;
	}
}


/* -----------------------------------------
   Colours
   ----------------------------------------- */

.greenest-choice .gc-green {
	color: #67C183;
}


/* -----------------------------------------
   Buttons
   ----------------------------------------- */

.greenest-choice .btn-gc-green {
	background-color: #67C183;
	color: #fff;
	border: 2px solid #67C183;
	border-radius: 10rem;
	padding: 0.6rem 2.5rem;
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: 0.06em;
	transition: all 0.3s;
}

.greenest-choice .btn-gc-green:hover {
	background-color: #52a96d;
	border-color: #52a96d;
	color: #fff;
}

.greenest-choice .btn-gc-green.btn-gc-lg {
	font-size: 1.05rem;
	letter-spacing: 0.2em;
	color: #F7F4EC;
	padding: 0.85rem 2.75rem;
}

.greenest-choice .btn.btn-lg {
	font-size: 1.65rem;
	padding: 0.95rem 2.75rem;
	letter-spacing: normal;
}

@media (min-width: 992px) {
	.greenest-choice .btn.btn-lg {
		font-size: 2rem;
		padding: 1.1rem 3.25rem;
	}
}

.greenest-choice .btn-gc-outline {
	background-color: transparent;
	color: #67C183;
	border: 2px solid #67C183;
	border-radius: 10rem;
	padding: 0.5rem 1.75rem;
	font-weight: 600;
	transition: all 0.3s;
}

.greenest-choice .btn-gc-outline:hover {
	background-color: #67C183;
	color: #fff;
}


/* -----------------------------------------
   Hero + Intro
   ----------------------------------------- */

.greenest-choice .gc-hero {
	overflow: hidden;
	margin-bottom: 0;
	padding-top: 6rem;
	padding-bottom: 2rem;
}

@media (min-width: 992px) {
	.greenest-choice .gc-hero {
		padding-top: 8rem;
		padding-bottom: 3rem;
	}
	.greenest-choice .gc-hero > .container {
		margin-left: calc(50vw - 360px);
		margin-right: 0;
	}
}

@media (min-width: 1200px) {
	.greenest-choice .gc-hero > .container {
		margin-left: calc(50vw - 427.5px);
	}
}

@media (min-width: 1400px) {
	.greenest-choice .gc-hero > .container {
		margin-left: calc(50vw - 495px);
	}
}

@media (min-width: 992px) and (max-width: 1699.98px) {
	.greenest-choice .gc-hero > .container {
		margin-left: auto;
		margin-right: auto;
	}
	.greenest-choice .gc-hero .row {
		position: relative;
	}
	.greenest-choice .gc-hero .col-lg-9 {
		flex: 0 0 100%;
		max-width: 100%;
	}
	.greenest-choice .gc-hero .col-lg-3 {
		position: absolute;
		top: 0;
		right: 0;
		width: 25%;
	}
	.greenest-choice .gc-hero .gc-hero-h1 {
		padding-left: 2.5rem;
		padding-right: 25%;
		font-size: clamp(3.5rem, calc(3.5rem + 2.25rem * ((100vw - 992px) / 707px)), 5.75rem);
	}
}

.greenest-choice .gc-hero-illustration {
	width: 100%;
	max-width: 200px;
	height: auto;
}

@media (min-width: 1400px) {
	.greenest-choice .gc-hero-illustration {
		max-width: 260px;
	}
}

.greenest-choice .gc-hero-h1 {
	font-size: 3rem;
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.03em;
}

@media (min-width: 1200px) {
	.greenest-choice .gc-hero-h1 {
		font-size: 4.25rem;
	}
}

@media (min-width: 1400px) {
	.greenest-choice .gc-hero-h1 {
		font-size: 5rem;
	}
}

@media (max-width: 767.98px) {
	.greenest-choice .gc-hero-h1 {
		font-size: 2.25rem;
	}
	.greenest-choice .gc-hero-h1 br {
		display: none;
	}
}

.greenest-choice .gc-hero-h2 {
	font-size: 2.25rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
	padding-left: 2.5rem;
	padding-right: 2.5rem;
}

@media (min-width: 1200px) {
	.greenest-choice .gc-hero-h2 {
		font-size: 3rem;
	}
}

.greenest-choice .gc-logo {
	display: block;
	width: 100%;
	height: auto;
	padding-left: 2.5rem;
	padding-right: 2.5rem;
	box-sizing: border-box;
}

@media (max-width: 991.98px) {
	.greenest-choice .gc-logo {
		max-width: 360px;
		margin-left: auto;
		margin-right: auto;
		padding-left: 1rem;
		padding-right: 1rem;
	}
}

.greenest-choice .gc-hero-lede {
	font-size: 1rem;
	line-height: 1.55;
	color: rgba(0, 51, 73, 1);
	padding-left: 2.5rem;
	padding-right: 2.5rem;
}


/* -----------------------------------------
   Checkout mockup card
   ----------------------------------------- */

.greenest-choice .gc-checkout-wrap {
	position: relative;
	max-width: 92%;
	margin-left: auto;
	margin-right: auto;
}

@media (min-width: 1200px) {
	.greenest-choice .gc-checkout-wrap {
		max-width: 88%;
	}
}

.greenest-choice .gc-checkout-mockup-shadow {
	position: relative;
	z-index: 2;
	filter: drop-shadow(0 18px 24px rgba(0, 51, 73, 0.25)) drop-shadow(0 6px 8px rgba(0, 51, 73, 0.12));
}

.greenest-choice .gc-checkout-mockup {
	--gc-card-r: calc(5.5rem - 6px);
	--gc-image-inset: calc(3rem - 6px);
	--gc-curve-cx: calc(var(--gc-card-r) - var(--gc-image-inset));

	display: block;
	width: calc(100% - 6rem);
	height: auto;
	margin: 0 auto;

	-webkit-mask:
		linear-gradient(#000, #000) top center / 100% calc(100% - var(--gc-card-r)) no-repeat,
		linear-gradient(#000, #000) bottom center / calc(100% - 2 * var(--gc-curve-cx)) var(--gc-card-r) no-repeat,
		radial-gradient(circle var(--gc-card-r) at 100% 0, #000 calc(var(--gc-card-r) - 0.5px), transparent var(--gc-card-r)) bottom left / var(--gc-curve-cx) var(--gc-card-r) no-repeat,
		radial-gradient(circle var(--gc-card-r) at 0 0, #000 calc(var(--gc-card-r) - 0.5px), transparent var(--gc-card-r)) bottom right / var(--gc-curve-cx) var(--gc-card-r) no-repeat;
	mask:
		linear-gradient(#000, #000) top center / 100% calc(100% - var(--gc-card-r)) no-repeat,
		linear-gradient(#000, #000) bottom center / calc(100% - 2 * var(--gc-curve-cx)) var(--gc-card-r) no-repeat,
		radial-gradient(circle var(--gc-card-r) at 100% 0, #000 calc(var(--gc-card-r) - 0.5px), transparent var(--gc-card-r)) bottom left / var(--gc-curve-cx) var(--gc-card-r) no-repeat,
		radial-gradient(circle var(--gc-card-r) at 0 0, #000 calc(var(--gc-card-r) - 0.5px), transparent var(--gc-card-r)) bottom right / var(--gc-curve-cx) var(--gc-card-r) no-repeat;
}

.greenest-choice .gc-checkout-card {
	background: transparent;
	border-radius: 5.5rem;
	border: 6px solid #003349;
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	top: 18%;
	z-index: 1;
	pointer-events: none;
}

.greenest-choice .gc-checkout-header {
	padding: 1rem 1.25rem 0.75rem;
	font-weight: 700;
	font-size: 0.9rem;
	color: rgba(0, 51, 73, 1);
}

.greenest-choice .gc-checkout-option {
	padding: 0.85rem 1.25rem;
	border-top: 1px solid #eee;
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
}

.greenest-choice .gc-checkout-radio {
	width: 16px;
	height: 16px;
	min-width: 16px;
	border-radius: 50%;
	border: 2px solid #ccc;
	margin-top: 3px;
	flex-shrink: 0;
}

.greenest-choice .gc-checkout-radio.active {
	border-color: rgba(255, 209, 0, 1);
	background: rgba(255, 209, 0, 1);
	box-shadow: inset 0 0 0 2.5px #fff;
}

.greenest-choice .gc-checkout-option-body {
	flex: 1;
	min-width: 0;
}

.greenest-choice .gc-checkout-option-title {
	font-weight: 700;
	font-size: 0.85rem;
	color: rgba(0, 51, 73, 1);
	display: flex;
	align-items: center;
	gap: 0.3rem;
}

.greenest-choice .gc-checkout-option-desc {
	font-size: 0.75rem;
	color: #777;
	margin-top: 0.1rem;
	line-height: 1.4;
}

.greenest-choice .gc-checkout-option-price {
	font-weight: 700;
	font-size: 0.85rem;
	color: rgba(0, 51, 73, 1);
	white-space: nowrap;
	flex-shrink: 0;
}

.greenest-choice .gc-checkout-illustration {
	max-width: 220px;
	width: 100%;
}

@media (min-width: 992px) {
	.greenest-choice .gc-checkout-illustration {
		margin-right: 2rem;
	}
}

@media (max-width: 991.98px) {
	.greenest-choice .gc-checkout-illustration {
		max-width: 180px;
	}
}

.greenest-choice .gc-checkout-section,
.greenest-choice .gc-faq-section,
.greenest-choice .gc-demo-section,
.greenest-choice .gc-testimonials-section {
	margin-top: 4rem;
}

@media (min-width: 992px) {
	.greenest-choice .gc-checkout-section,
	.greenest-choice .gc-faq-section,
	.greenest-choice .gc-demo-section,
	.greenest-choice .gc-testimonials-section {
		margin-top: 6rem;
	}
}

.greenest-choice .gc-testimonials-section {
	margin-bottom: 5rem;
}

@media (min-width: 992px) {
	.greenest-choice .gc-testimonials-section {
		margin-bottom: 8rem;
	}
}

.greenest-choice .gc-checkout-section .gc-checkout-card {
	max-width: none;
}

@media (min-width: 1200px) {
	.greenest-choice .gc-checkout-container {
		max-width: 1560px;
	}
}

@media (min-width: 992px) and (max-width: 1699.98px) {
	.greenest-choice .gc-checkout-section .gc-checkout-illustration {
		display: none;
	}
	.greenest-choice .gc-checkout-section .text-lg-end {
		text-align: center !important;
	}
	.greenest-choice .gc-checkout-section .col-lg-6,
	.greenest-choice .gc-checkout-section .col-xl-5,
	.greenest-choice .gc-checkout-section .col-xl-7 {
		flex: 0 0 100%;
		max-width: 100%;
	}
	.greenest-choice .gc-checkout-wrap {
		max-width: 70%;
	}
	.greenest-choice .gc-checkout-section h3.h2 {
		max-width: 70%;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 3rem !important;
	}
	.greenest-choice .gc-cta-section .gc-cta-buttons {
		display: flex;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
	}
	.greenest-choice .gc-cta-section .gc-cta-buttons .btn {
		flex: 0 0 auto;
		white-space: nowrap;
	}
}


/* -----------------------------------------
   Did You Know Accordion
   ----------------------------------------- */

.greenest-choice .gc-accordion .accordion-item {
	background: transparent;
	border: none;
	border-bottom: 2px solid #d5d3cb;
	border-radius: 0;
}

.greenest-choice .gc-accordion .accordion-item:first-child {
	border-top: 2px solid #d5d3cb;
}

.greenest-choice .gc-accordion .accordion-button {
	background: transparent;
	box-shadow: none;
	padding: 2rem 0;
	gap: 1.75rem;
	align-items: center;
	border-radius: 0;
}

.greenest-choice .gc-accordion .accordion-button:not(.collapsed) {
	background: transparent;
	color: inherit;
	box-shadow: none;
}

.greenest-choice .gc-accordion .accordion-button:focus {
	box-shadow: none;
}

.greenest-choice .gc-accordion .accordion-button::after {
	display: none;
}

.greenest-choice .gc-accordion .gc-accordion-number {
	font-size: 8rem;
	font-weight: 900;
	line-height: 1;
	min-width: 120px;
	color: #67C183;
	letter-spacing: -0.04em;
	flex-shrink: 0;
}

@media (max-width: 575.98px) {
	.greenest-choice .gc-accordion .gc-accordion-number {
		font-size: 5rem;
		min-width: 75px;
	}
}

.greenest-choice .gc-accordion .gc-accordion-text {
	flex: 1;
	font-size: 2.25rem;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: #000;
	padding-top: 0;
}

@media (max-width: 575.98px) {
	.greenest-choice .gc-accordion .gc-accordion-text {
		font-size: 1.4rem;
	}
}

.greenest-choice .gc-accordion .gc-accordion-toggle {
	font-size: 5rem;
	font-weight: 300;
	line-height: 0.7;
	min-width: 50px;
	text-align: right;
	color: rgba(0, 51, 73, 1);
	padding-top: 0;
	flex-shrink: 0;
}

@media (max-width: 575.98px) {
	.greenest-choice .gc-accordion .gc-accordion-toggle {
		font-size: 3.25rem;
		min-width: 32px;
	}
}

.greenest-choice .gc-accordion .accordion-button.collapsed .gc-icon-minus {
	display: none;
}

.greenest-choice .gc-accordion .accordion-button:not(.collapsed) .gc-icon-plus {
	display: none;
}

.greenest-choice .gc-accordion .accordion-body {
	padding: 0 0 1.75rem 0;
	margin-left: calc(120px + 1.75rem);
	margin-right: calc(50px + 1.75rem);
	font-size: 1.4rem;
	line-height: 1.5;
}

@media (max-width: 575.98px) {
	.greenest-choice .gc-accordion .accordion-body {
		margin-left: calc(75px + 1.75rem);
		margin-right: calc(32px + 1.75rem);
		font-size: 1.15rem;
	}
}


/* -----------------------------------------
   Did You Know - Fact Cards (Alt)
   ----------------------------------------- */

.greenest-choice .gc-fact-card {
	position: relative;
	height: 100%;
	background: #FFFDF7;
	border: 3px solid #003349;
	border-radius: 2rem;
	padding: 2.75rem 2.25rem 2.25rem;
	overflow: hidden;
	transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1),
	            box-shadow 0.45s ease,
	            border-color 0.3s ease;
}

@media (max-width: 575.98px) {
	.greenest-choice .gc-fact-card {
		max-width: 88%;
		margin-left: auto;
		margin-right: auto;
	}
}

.greenest-choice .gc-fact-card::before {
	content: "";
	position: absolute;
	top: -30%;
	right: -20%;
	width: 60%;
	height: 160%;
	background: radial-gradient(circle at center, rgba(103, 193, 131, 0.18), transparent 65%);
	opacity: 0;
	transition: opacity 0.5s ease;
	pointer-events: none;
}

.greenest-choice .gc-fact-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 24px 40px -16px rgba(0, 51, 73, 0.25);
	border-color: #67C183;
}

@media (hover: hover) {
	.greenest-choice .gc-fact-card:hover::before {
		opacity: 1;
	}
}

@media (hover: none) {
	.greenest-choice .gc-fact-card::before {
		display: none;
	}
	.greenest-choice .gc-fact-card:hover {
		transform: none;
		box-shadow: none;
		border-color: #003349;
	}
}

.greenest-choice .gc-fact-num {
	position: absolute;
	top: -2.5rem;
	right: -1rem;
	font-size: 18rem;
	font-weight: 900;
	line-height: 0.85;
	letter-spacing: -0.08em;
	color: #67C183;
	opacity: 0.18;
	pointer-events: none;
	transform-origin: 70% 40%;
	animation: gc-fact-pop 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both;
	transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
	z-index: 0;
}

.greenest-choice .gc-fact-card:hover .gc-fact-num {
	opacity: 0.9;
	transform: scale(1.06) rotate(-4deg);
}

@keyframes gc-fact-pop {
	0% {
		opacity: 0;
		transform: scale(0.2) rotate(-18deg);
	}
	60% {
		opacity: 0.22;
		transform: scale(1.08) rotate(3deg);
	}
	100% {
		opacity: 0.18;
		transform: scale(1) rotate(0);
	}
}

.greenest-choice .gc-fact-body {
	position: relative;
	z-index: 1;
	max-width: 85%;
}

.greenest-choice .gc-fact-title {
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: #003349;
	margin-bottom: 1rem;
}

.greenest-choice .gc-fact-text {
	font-size: 1.05rem;
	line-height: 1.55;
	color: #003349;
	margin-bottom: 0;
	opacity: 0.85;
}

@media (min-width: 992px) {
	.greenest-choice .gc-fact-card {
		padding: 3.5rem 3rem 3rem;
		min-height: 320px;
	}
	.greenest-choice .gc-fact-num {
		font-size: 24rem;
		top: -3.5rem;
		right: -1.5rem;
	}
	.greenest-choice .gc-fact-title {
		font-size: 1.8rem;
	}
	.greenest-choice .gc-fact-text {
		font-size: 1.15rem;
	}
	.greenest-choice .gc-fact-body {
		max-width: 75%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.greenest-choice .gc-fact-num {
		animation: none;
	}
	.greenest-choice .gc-fact-card,
	.greenest-choice .gc-fact-card::before,
	.greenest-choice .gc-fact-num {
		transition: none;
	}
}


/* -----------------------------------------
   Illustration row
   ----------------------------------------- */

.greenest-choice .gc-illustrations {
	padding: 0.5rem 0;
}

.greenest-choice .gc-illustrations img {
	height: 70px;
	width: auto;
}

@media (min-width: 576px) {
	.greenest-choice .gc-illustrations img {
		height: 110px;
	}
}

@media (min-width: 992px) {
	.greenest-choice .gc-illustrations img {
		height: 150px;
	}
}


/* -----------------------------------------
   Demo form card
   ----------------------------------------- */

.greenest-choice .gc-form-card {
	background: transparent;
	border-radius: 0;
	border: none;
	box-shadow: none;
	padding: 0 !important;
}

.greenest-choice .gc-form-card .form-control {
	border: none;
	border-radius: 10rem;
	padding: 0.85rem 1.25rem;
	font-size: 1rem;
	background: #FBE8C7;
	color: rgba(0, 51, 73, 1);
	height: auto;
}

.greenest-choice .gc-form-card .form-control:focus {
	box-shadow: 0 0 0 2px rgba(0, 51, 73, 0.2);
	background: #FBE8C7;
}

.greenest-choice .gc-form-card .form-control::placeholder {
	color: transparent;
}

.greenest-choice .gc-form-card label {
	font-size: 1.15rem;
	font-weight: 500;
	color: rgba(0, 51, 73, 1);
	margin-bottom: 0.3rem;
	padding-left: 0.25rem;
}

.greenest-choice .gc-form-card textarea.form-control {
	resize: none;
	border-radius: 10rem;
}

.greenest-choice .gc-form-brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	height: 100%;
	padding: 0.5rem 0;
}

.greenest-choice .gc-form-brand img {
	max-width: 140px;
	margin-bottom: 1rem;
}

.greenest-choice .gc-form-brand .gc-brand-label {
	font-weight: 600;
	font-size: 1.05rem;
	color: rgba(0, 51, 73, 1);
	margin-bottom: 1.5rem;
}

.greenest-choice .gc-form-card .btn-gc-green {
	border-radius: 10rem;
	padding: 0.85rem 3rem;
	font-size: 1rem;
	letter-spacing: 0.2em;
	font-weight: 600;
	color: #ffffff;
}


/* -----------------------------------------
   Testimonials
   ----------------------------------------- */

.greenest-choice .gc-testimonial-card {
	border: 3px solid #67C183;
	border-radius: 1.25rem;
	padding: 1.25rem;
	height: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 1rem;
	background: transparent;
}

@media (max-width: 575.98px) {
	.greenest-choice .gc-testimonial-card {
		max-width: 88%;
		margin-left: auto;
		margin-right: auto;
	}
}

@media (min-width: 576px) {
	.greenest-choice .gc-testimonial-card {
		padding: 2rem;
		gap: 1.25rem;
	}
}

.greenest-choice .gc-testimonial-icon {
	width: 60px;
	height: auto;
	flex-shrink: 0;
	transform-origin: 50% 60%;
	animation: gc-heart-beat 1.8s ease-in-out infinite;
	transition: transform 0.3s ease;
}


.greenest-choice .gc-testimonial-card:hover .gc-testimonial-icon {
	animation: gc-heart-jiggle 0.6s ease-in-out;
}

@keyframes gc-heart-beat {
	0%, 100%   { transform: scale(1); }
	12%        { transform: scale(1.12); }
	24%        { transform: scale(1); }
	36%        { transform: scale(1.08); }
	48%, 100%  { transform: scale(1); }
}

@keyframes gc-heart-jiggle {
	0%   { transform: rotate(0) scale(1); }
	15%  { transform: rotate(-12deg) scale(1.15); }
	30%  { transform: rotate(10deg)  scale(1.15); }
	45%  { transform: rotate(-8deg)  scale(1.15); }
	60%  { transform: rotate(6deg)   scale(1.15); }
	75%  { transform: rotate(-4deg)  scale(1.1); }
	100% { transform: rotate(0)      scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.greenest-choice .gc-testimonial-icon,
	.greenest-choice .gc-testimonial-card:hover .gc-testimonial-icon {
		animation: none;
	}
}

.greenest-choice .gc-testimonial-body {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.greenest-choice .gc-testimonial-card blockquote {
	font-size: 1.35rem;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: #6C757D;
	flex: 1;
	margin-bottom: 1.25rem;
}

@media (min-width: 576px) {
	.greenest-choice .gc-testimonial-card blockquote {
		font-size: 1.9rem;
	}
	.greenest-choice .gc-testimonial-icon {
		width: 90px;
	}
}

.greenest-choice .gc-testimonial-card cite {
	font-style: normal;
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #aaa;
}
