/* ==========================================================================
   IMS Carbon Calculator
   --------------------------------------------------------------------------
   Every selector is scoped to .ims-cc and every class is prefixed "ims-cc-",
   so nothing here leaks into the theme. Colours, fonts, radius and width come
   from Carbon Calculator > Settings > Branding (printed as CSS variables after
   this file); the values below are only fallbacks.
   ========================================================================== */

.ims-cc {
	/* Branding (overridden by the settings) */
	--ims-cc-primary: #031064;
	--ims-cc-secondary: #00529b;
	--ims-cc-accent: #cf142c;
	--ims-cc-highlight: #fff;
	--ims-cc-text: #000;
	--ims-cc-text-on-dark: #d9d9d6;
	--ims-cc-surface: #d9d9d6;
	--ims-cc-button-text: #fff;
	--ims-cc-radius-lg: 15px;
	--ims-cc-content-width: 1200px;
	--ims-cc-font-size: 16px;
	--ims-cc-heading-weight: 600;

	/* Fixed */
	--ims-cc-gutter: 3.625rem;
	--ims-cc-white: #fff;
	--ims-cc-grey-100: #f7f7f7;
	--ims-cc-grey-300: #bbbcbc;
	--ims-cc-grey-400: #97999b;
	--ims-cc-grey-500: #63666a;
	--ims-cc-grey-600: #53565a;
	--ims-cc-radius-md: 10px;
	--ims-cc-radius-sm: 5px;
	--ims-cc-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15);
	--ims-cc-success: #1e7e34;
	--ims-cc-error: #b00020;

	/* Layout responds to the calculator's own width (not the screen), so it fits any theme column. */
	container: ims-cc / inline-size;
	box-sizing: border-box;
	color: var(--ims-cc-text);
	font-size: var(--ims-cc-font-size);
	line-height: 1.5;
}

.ims-cc .ims-cc-inner {
	padding: 0 var(--ims-cc-gutter) 80px;
}

/* Fonts from the settings ("Same as the theme" adds neither class, so the theme's fonts apply). */
.ims-cc.ims-cc--body-font {
	font-family: var(--ims-cc-font-body);
}

.ims-cc.ims-cc--heading-font :is(h2, h3, h4, h5) {
	font-family: var(--ims-cc-font-heading);
	font-weight: var(--ims-cc-heading-weight, 600);
}

/* Automatic colours: hidden until calculator.js has applied the theme's colours.
   The animation shows it after 1.5s anyway, in case scripts do not run. */
.ims-cc.ims-cc--auto:not(.ims-cc--ready) {
	opacity: 0;
	animation: ims-cc-reveal 0s linear 1.5s forwards;
}

.ims-cc.ims-cc--auto.ims-cc--ready {
	animation: ims-cc-fade-in 0.2s ease-out;
}

@keyframes ims-cc-reveal {
	to {
		opacity: 1;
	}
}

@keyframes ims-cc-fade-in {
	from {
		opacity: 0;
	}
}

/* --------------------------------------------------------------------------
   Base (self-contained resets so theme globals do not affect the calculator)
   -------------------------------------------------------------------------- */

.ims-cc *,
.ims-cc *::before,
.ims-cc *::after {
	box-sizing: border-box;
}

.ims-cc h2,
.ims-cc h3,
.ims-cc h4,
.ims-cc h5 {
	margin: 0 0 0.5rem;
	padding: 0;
	color: var(--ims-cc-primary);
	font-style: normal;
	line-height: 1.25;
	letter-spacing: normal;
	text-transform: none;
}

.ims-cc h2 { font-size: 2.25rem; }
.ims-cc h3 { font-size: 1.75rem; }
.ims-cc h4 { font-size: 1.5rem; }
.ims-cc h5 { font-size: 1.25rem; }

@container ims-cc (min-width: 48em) {
	.ims-cc h2 { font-size: 2.5rem; }
	.ims-cc h3 { font-size: 2rem; }
	.ims-cc h4 { font-size: 1.75rem; }
	.ims-cc h5 { font-size: 1.375rem; }
}

.ims-cc p {
	margin: 0 0 1.5rem;
	padding: 0;
	font-size: inherit;
	line-height: 1.5;
}

.ims-cc ul,
.ims-cc li {
	margin: 0;
	padding: 0;
}

.ims-cc table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	border-spacing: 0;
	background: none;
}

.ims-cc th,
.ims-cc td {
	margin: 0;
	border: 0;
	background: none;
	color: inherit;
	vertical-align: middle;
}

.ims-cc button {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
}

.ims-cc label {
	display: block;
	margin: 0;
}

.ims-cc .ims-cc-container {
	width: var(--ims-cc-content-width);
	max-width: 100%;
	margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Intro (optional title + text)
   -------------------------------------------------------------------------- */

.ims-cc .ims-cc-intro {
	margin-bottom: 56px;
}

.ims-cc .ims-cc-intro__title {
	margin-bottom: 24px;
	color: var(--ims-cc-text);
}

.ims-cc .ims-cc-intro__text p {
	margin: 0;
}

/* --------------------------------------------------------------------------
   Tabs bar
   -------------------------------------------------------------------------- */

.ims-cc .ims-cc-tabs-bar {
	position: relative;
	margin-bottom: 56px;
}

.ims-cc .ims-cc-tabs-bar::before {
	content: "";
	position: absolute;
	top: 50%;
	left: calc(var(--ims-cc-gutter) * -1);
	width: calc(100% + var(--ims-cc-gutter) * 2);
	height: 3px;
	background-color: var(--ims-cc-accent);
	transform: translateY(-50%);
}

.ims-cc .ims-cc-tabs-card {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: space-between;
	column-gap: 32px;
	padding: 40px 65px;
	border-radius: var(--ims-cc-radius-lg);
	background-color: var(--ims-cc-white);
	box-shadow: var(--ims-cc-shadow);
}

.ims-cc .ims-cc-tabs-card__title {
	margin: 0;
	font-size: 20px;
	line-height: 1.25;
}

.ims-cc .ims-cc-tabs {
	display: flex;
	flex-shrink: 0;
	overflow: hidden;
	border: 1px solid var(--ims-cc-surface);
	border-radius: var(--ims-cc-radius-lg);
}

.ims-cc .ims-cc-tab {
	width: auto;
	min-width: 220px;
	padding: 16px 24px;
	color: var(--ims-cc-grey-500);
	font-family: var(--ims-cc-font-heading, inherit);
	font-size: 16px;
	line-height: 22px;
	letter-spacing: 0;
	text-align: center;
	white-space: nowrap;
}

.ims-cc .ims-cc-tab.is-active {
	background-color: var(--ims-cc-surface);
	color: var(--ims-cc-secondary);
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   Panels
   -------------------------------------------------------------------------- */

.ims-cc .ims-cc-panel {
	display: none;
}

.ims-cc .ims-cc-panel.is-active {
	display: block;
}

.ims-cc .ims-cc-card {
	overflow: hidden;
	border-radius: var(--ims-cc-radius-lg);
	background-color: var(--ims-cc-white);
	box-shadow: var(--ims-cc-shadow);
}

/* --------------------------------------------------------------------------
   Inputs
   -------------------------------------------------------------------------- */

.ims-cc .ims-cc-inputs {
	padding: 48px 64px;
}

.ims-cc .ims-cc-inputs__title {
	margin-bottom: 32px;
}

.ims-cc .ims-cc-inputs__grid {
	display: flex;
	flex-wrap: wrap;
	row-gap: 16px;
}

.ims-cc .ims-cc-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	row-gap: 16px;
	width: 100%;
}

.ims-cc .ims-cc-field {
	width: calc((100% - 16px) / 2);
}

.ims-cc .ims-cc-row--three .ims-cc-field {
	width: calc((100% - 32px) / 3);
}

.ims-cc .ims-cc-label {
	margin-bottom: 6px;
	color: var(--ims-cc-text);
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
}

.ims-cc .ims-cc-label__note {
	font-weight: 400;
}

.ims-cc .ims-cc-input {
	appearance: none;
	-webkit-appearance: none;
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 11px 16px;
	border: 1px solid var(--ims-cc-surface);
	border-radius: var(--ims-cc-radius-sm);
	background-color: var(--ims-cc-white);
	box-shadow: none;
	color: var(--ims-cc-text);
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
}

.ims-cc .ims-cc-input:focus {
	border-color: var(--ims-cc-primary);
	outline: none;
}

.ims-cc .ims-cc-input::placeholder {
	color: var(--ims-cc-grey-600);
	opacity: 1;
}

.ims-cc .ims-cc-input[readonly] {
	color: var(--ims-cc-grey-400);
	font-size: 24px;
	font-weight: 700;
	line-height: 24px;
}

/* --------------------------------------------------------------------------
   Results (dark box) and stat strip
   -------------------------------------------------------------------------- */

.ims-cc .ims-cc-results {
	padding: 0 64px 48px;
	background-color: var(--ims-cc-primary);
}

.ims-cc .ims-cc-results__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 48px 0;
}

.ims-cc .ims-cc-results--compact .ims-cc-results__head {
	padding-bottom: 0;
}

.ims-cc .ims-cc-results__label {
	margin: 0;
	color: var(--ims-cc-text-on-dark);
	font-size: 24px;
	font-weight: 700;
	line-height: 32px;
}

.ims-cc .ims-cc-results__hours {
	margin: 0;
	color: var(--ims-cc-text-on-dark);
	font-size: 18px;
	line-height: 27px;
	letter-spacing: 0;
	text-align: right;
}

.ims-cc .ims-cc-results__big {
	color: var(--ims-cc-highlight);
	font-size: 32px;
	font-weight: 700;
	line-height: 40px;
}

.ims-cc .ims-cc-stats {
	display: flex;
	justify-content: space-between;
	padding: 16px 48px;
	background: linear-gradient(90deg, var(--ims-cc-primary) 0%, var(--ims-cc-secondary) 100%);
}

.ims-cc .ims-cc-stats--savings {
	margin-bottom: 40px;
	background: linear-gradient(90deg, var(--ims-cc-primary) 0%, var(--ims-cc-secondary) 100%);
}

.ims-cc .ims-cc-stat {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 8px 16px;
}

.ims-cc .ims-cc-stat__label {
	margin: 0 0 12px;
	color: var(--ims-cc-text-on-dark);
	font-size: 18px;
	line-height: 27px;
	text-align: center;
}

/* Short red underline below each stat label. */
.ims-cc .ims-cc-stat__label::after {
	content: "";
	display: block;
	width: 50px;
	height: 3px;
	margin: 6px auto 0;
	background-color: var(--ims-cc-accent);
}

.ims-cc .ims-cc-stat__value {
	display: block;
	margin: 0;
	color: var(--ims-cc-highlight);
	font-size: 40px;
	font-weight: 700;
	line-height: 40px;
	text-align: center;
}

/* --------------------------------------------------------------------------
   Emission factors (grey box)
   -------------------------------------------------------------------------- */

.ims-cc .ims-cc-factors {
	padding: 48px 64px;
	background-color: var(--ims-cc-surface);
}

.ims-cc .ims-cc-factors__table {
	margin-bottom: 24px;
}

@container ims-cc (min-width: 991.98px) {
	.ims-cc .ims-cc-factors__table {
		table-layout: fixed;
	}
}

.ims-cc .ims-cc-factors__table thead tr {
	border-bottom: 5px solid var(--ims-cc-grey-300);
}

.ims-cc .ims-cc-factors__table thead th {
	padding: 16px;
	color: var(--ims-cc-primary);
	font-family: var(--ims-cc-font-heading, inherit);
	font-size: 28px;
	font-weight: 600;
	line-height: 32px;
	text-align: left;
}

.ims-cc .ims-cc-factors__table tbody td {
	padding: 8px 16px;
	border-bottom: 1px solid var(--ims-cc-grey-300);
	border-left: 1px solid var(--ims-cc-grey-300);
}

.ims-cc .ims-cc-factors__table tbody td:nth-child(2) {
	border-right: 1px solid var(--ims-cc-grey-300);
}

.ims-cc .ims-cc-factors__foot-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.ims-cc .ims-cc-factors__foot-inner > span {
	font-size: 18px;
	font-weight: 700;
	line-height: 27px;
}

.ims-cc .ims-cc-factors__foot--grey {
	padding: 24px 16px;
	background-color: var(--ims-cc-grey-300);
}

.ims-cc .ims-cc-factors__foot--grey .ims-cc-factors__foot-inner > span:last-child {
	font-size: 24px;
	line-height: 32px;
}

.ims-cc .ims-cc-factors__foot--dark {
	padding: 20px 16px;
	background-color: var(--ims-cc-primary);
}

.ims-cc .ims-cc-factors__foot--dark .ims-cc-factors__foot-inner > span {
	color: var(--ims-cc-white);
}

.ims-cc .ims-cc-factors__foot--dark .ims-cc-factors__foot-inner > span:last-child {
	color: var(--ims-cc-highlight);
	font-size: 32px;
	line-height: 40px;
}

.ims-cc .ims-cc-factors__note {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Carbon credits (dark box) - table also used on the Estimated tab
   -------------------------------------------------------------------------- */

.ims-cc .ims-cc-credits {
	padding: 48px 64px;
	background-color: var(--ims-cc-primary);
}

.ims-cc .ims-cc-credits__title {
	margin-bottom: 24px;
	color: var(--ims-cc-white);
	font-family: var(--ims-cc-font-body, inherit);
	font-size: 24px;
	font-weight: 700;
	line-height: 32px;
}

.ims-cc .ims-cc-credits__table {
	table-layout: fixed;
}

.ims-cc .ims-cc-credits__table tr {
	border: 1px solid var(--ims-cc-grey-400);
}

.ims-cc .ims-cc-credits__table td {
	padding: 7.5px 16px;
	color: var(--ims-cc-text-on-dark);
	font-size: 18px;
	line-height: 27px;
}

.ims-cc .ims-cc-credits__table td:first-child {
	border-right: 1px solid var(--ims-cc-grey-400);
}

.ims-cc .ims-cc-credits__table td:last-child {
	color: var(--ims-cc-highlight);
	font-size: 32px;
	font-weight: 700;
	line-height: 40px;
	text-align: right;
}

/* --------------------------------------------------------------------------
   Estimated tab: savings box and % selector
   -------------------------------------------------------------------------- */

.ims-cc .ims-cc-savings {
	padding: 48px 64px;
	background-color: var(--ims-cc-primary);
}

.ims-cc .ims-cc-savings__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 48px;
}

.ims-cc .ims-cc-savings__table-wrap {
	padding: 0 48px 24px;
}

.ims-cc .ims-cc-pct-bar {
	display: flex;
	align-items: center;
	margin-bottom: 40px;
	padding: 0 24px;
	border-bottom: 5px solid var(--ims-cc-secondary);
	border-top-right-radius: var(--ims-cc-radius-lg);
	background: linear-gradient(90deg, var(--ims-cc-primary) 0%, var(--ims-cc-secondary) 100%);
}

.ims-cc .ims-cc-pct-bar__label {
	margin: 0;
	padding: 29px 24px 29px 0;
	color: var(--ims-cc-white);
	font-size: 24px;
	font-weight: 700;
	line-height: 32px;
}

.ims-cc .ims-cc-pcts {
	display: flex;
	flex-grow: 1;
	align-items: center;
	gap: 20px;
}

.ims-cc .ims-cc-pct {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	padding: 0;
	color: var(--ims-cc-text-on-dark);
	font-size: 24px;
	font-weight: 700;
	line-height: 32px;
	text-align: center;
	transition: all 0.35s;
}

/* The white marker (tab with rounded top and a pointed bottom) behind the selected percentage. */
.ims-cc .ims-cc-pct::before {
	content: "";
	position: absolute;
	top: -34px;
	left: 50%;
	z-index: 2;
	width: 62px;
	height: 102px;
	border-radius: 5px 5px 0 0;
	background-color: var(--ims-cc-white);
	clip-path: polygon(0 0, 100% 0, 100% 87%, 50% 100%, 0 87%);
	opacity: 0;
	transform: translateX(-50%);
	transition: all 0.35s;
}

.ims-cc .ims-cc-pct span {
	position: relative;
	z-index: 3;
	display: block;
	text-align: center;
}

.ims-cc .ims-cc-pct.is-active {
	color: var(--ims-cc-secondary);
}

.ims-cc .ims-cc-pct.is-active::before {
	opacity: 1;
}

@media (hover: hover) {
	.ims-cc .ims-cc-pct:hover {
		color: var(--ims-cc-secondary);
	}

	.ims-cc .ims-cc-pct:hover::before {
		opacity: 1;
	}
}

/* --------------------------------------------------------------------------
   Summary (blue box)
   -------------------------------------------------------------------------- */

.ims-cc .ims-cc-summary {
	margin-top: 56px;
	padding: 48px 64px;
	border-radius: var(--ims-cc-radius-lg);
	background-color: var(--ims-cc-secondary);
}

.ims-cc .ims-cc-summary__top {
	margin-bottom: 40px;
	padding-bottom: 40px;
	border-bottom: 2px solid var(--ims-cc-primary);
}

.ims-cc .ims-cc-summary__title {
	margin: 0 0 32px;
	color: var(--ims-cc-white);
	font-weight: 500;
	font-size: 32px;
	line-height: 40px;
	text-align: center;
}

.ims-cc .ims-cc-summary__text p {
	margin-bottom: 24px;
	color: var(--ims-cc-text-on-dark);
	font-size: 18px;
	line-height: 27px;
}

.ims-cc .ims-cc-hl {
	color: var(--ims-cc-highlight);
	font-weight: 700;
}

/* Lists in the summary text (the HTML comes from Settings > Content & Labels > Summary). */
.ims-cc .ims-cc-summary__text :is(ul, ol) {
	margin: -12px 0 24px;
	padding: 0;
	list-style: none;
}

.ims-cc .ims-cc-summary__text li {
	position: static;
	margin: 0;
	padding: 0;
	color: var(--ims-cc-highlight);
	font-size: 18px;
	font-weight: 700;
	line-height: 27px;
	list-style: none;
}

.ims-cc .ims-cc-summary__text li::marker {
	content: none;
}

.ims-cc .ims-cc-summary__text ul > li::before {
	content: "\2022";
	margin-right: 6px;
}

.ims-cc .ims-cc-summary__text ol {
	counter-reset: ims-cc-item;
}

.ims-cc .ims-cc-summary__text ol > li::before {
	content: counter(ims-cc-item) ".";
	counter-increment: ims-cc-item;
	margin-right: 6px;
}

.ims-cc .ims-cc-summary__text a {
	color: var(--ims-cc-highlight);
	text-decoration: underline;
}

/* Estimated tab: 1%-10% breakdown table */

.ims-cc .ims-cc-breakdown {
	table-layout: fixed;
}

.ims-cc .ims-cc-breakdown thead th {
	font-weight: 700;
	text-align: center;
}

.ims-cc .ims-cc-breakdown thead tr:first-child th {
	padding: 16px 8px;
}

.ims-cc .ims-cc-breakdown thead tr:first-child th:nth-child(2) {
	border: 1px solid var(--ims-cc-grey-600);
	border-bottom: 0;
	border-left: 0;
	background-color: var(--ims-cc-grey-600);
	color: var(--ims-cc-white);
	font-size: 18px;
	line-height: 27px;
}

.ims-cc .ims-cc-breakdown thead tr:first-child th:nth-child(3) {
	border: 1px solid var(--ims-cc-grey-500);
	border-right: 0;
	border-bottom: 0;
	background-color: var(--ims-cc-grey-500);
	color: var(--ims-cc-white);
	font-size: 18px;
	line-height: 27px;
}

.ims-cc .ims-cc-breakdown thead tr:last-child th {
	padding: 16px 8px 8px;
	border: 1px solid var(--ims-cc-white);
	border-bottom: 0;
	background-color: var(--ims-cc-surface);
	color: var(--ims-cc-text);
	font-size: 16px;
	line-height: 20px;
	vertical-align: bottom;
}

.ims-cc .ims-cc-breakdown thead tr:last-child th:nth-child(4) {
	border-right: 2px solid var(--ims-cc-white);
}

.ims-cc .ims-cc-breakdown tbody td {
	padding: 18px 8px;
	border: 1px solid var(--ims-cc-surface);
	background-color: var(--ims-cc-white);
	color: var(--ims-cc-text);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	text-align: center;
}

.ims-cc .ims-cc-breakdown tbody tr:nth-child(even) td {
	background-color: var(--ims-cc-grey-100);
}

.ims-cc .ims-cc-breakdown tbody tr td:first-child {
	border: 1px solid var(--ims-cc-white);
	background-color: var(--ims-cc-surface);
	font-weight: 700;
	line-height: 20px;
}

.ims-cc .ims-cc-breakdown tbody tr td:nth-child(4) {
	border-right: 2px solid var(--ims-cc-surface);
}

/* Email form */

.ims-cc .ims-cc-summary__form-title {
	margin: 0 0 32px;
	color: var(--ims-cc-white);
	font-weight: 500;
	font-size: 28px;
	line-height: 32px;
	text-align: center;
}

.ims-cc .ims-cc-email-form__fields {
	display: flex;
	column-gap: 16px;
}

.ims-cc .ims-cc-email-form__field {
	width: calc((100% - 32px) / 3);
}

.ims-cc .ims-cc-email-form__label {
	color: var(--ims-cc-white);
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
}

.ims-cc .ims-cc-email-form__input {
	appearance: none;
	-webkit-appearance: none;
	display: block;
	width: 100%;
	height: 2.875rem;
	margin: 0;
	padding: 0.5rem 1rem;
	border: 1px solid var(--ims-cc-surface);
	border-radius: var(--ims-cc-radius-sm);
	background-color: var(--ims-cc-white);
	box-shadow: none;
	color: var(--ims-cc-primary);
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5;
}

.ims-cc .ims-cc-email-form__input:focus {
	border-color: var(--ims-cc-primary);
	outline: none;
}

.ims-cc .ims-cc-email-form__submit {
	margin-top: 32px;
	text-align: center;
}

/* Matches the theme's main header call-to-action button. */
.ims-cc .ims-cc-btn {
	display: inline-block;
	padding: 0.5rem 1.25rem 0.5625rem;
	border: 2px solid var(--ims-cc-accent);
	border-radius: var(--ims-cc-radius-md);
	background-color: var(--ims-cc-accent);
	color: var(--ims-cc-button-text);
	font-family: var(--ims-cc-font-heading, inherit);
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: 20px;
	text-rendering: optimizeLegibility;
	transition: all 0.3s ease-in-out;
}

.ims-cc .ims-cc-btn:hover,
.ims-cc .ims-cc-btn:focus-visible {
	border-color: var(--ims-cc-white);
	background-color: transparent;
	color: var(--ims-cc-white);
}

.ims-cc .ims-cc-btn:disabled {
	cursor: wait;
	opacity: 0.8;
}

/* Hidden Gravity Form used only for lead capture. */
.ims-cc .ims-cc-gform-wrap {
	display: none !important;
}


/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@container ims-cc (max-width: 1199px) {
	.ims-cc .ims-cc-inner {
		--ims-cc-gutter: 2.8125rem;
	}

	.ims-cc .ims-cc-stats {
		padding: 16px 24px;
	}

	.ims-cc .ims-cc-stat__value {
		font-size: 32px;
	}

	.ims-cc .ims-cc-pcts {
		gap: 6px;
	}

	.ims-cc .ims-cc-pct::before {
		width: 52px;
		height: 92px;
	}
}

/* Tablet */
@container ims-cc (max-width: 991.98px) {
	.ims-cc .ims-cc-tabs-card {
		flex-wrap: wrap;
		row-gap: 24px;
		padding: 32px 40px;
	}

	.ims-cc .ims-cc-row {
		align-items: flex-end;
	}

	.ims-cc .ims-cc-label {
		font-size: 14px;
		line-height: 1.3;
	}

	.ims-cc .ims-cc-inputs,
	.ims-cc .ims-cc-factors,
	.ims-cc .ims-cc-credits,
	.ims-cc .ims-cc-savings,
	.ims-cc .ims-cc-summary {
		padding: 40px 32px;
	}

	.ims-cc .ims-cc-results {
		padding: 0 32px 40px;
	}

	.ims-cc .ims-cc-results__head {
		padding: 40px 0;
	}

	/* Result stats: 3 per row, remaining ones centred. */
	.ims-cc .ims-cc-stats {
		flex-wrap: wrap;
		justify-content: center;
		row-gap: 16px;
		padding: 16px 8px;
	}

	.ims-cc .ims-cc-stat {
		width: 33.333%;
		padding: 8px;
	}

	.ims-cc .ims-cc-stat__label {
		font-size: 14px;
		line-height: 1.3;
	}

	.ims-cc .ims-cc-stat__value {
		font-size: 28px;
		line-height: 1.2;
		overflow-wrap: normal;
	}

	.ims-cc .ims-cc-factors__table thead th {
		font-size: 24px;
	}

	.ims-cc .ims-cc-credits__table td:last-child,
	.ims-cc .ims-cc-factors__foot--dark .ims-cc-factors__foot-inner > span:last-child {
		font-size: 28px;
		line-height: 36px;
	}

	.ims-cc .ims-cc-savings__head {
		margin-bottom: 32px;
	}

	.ims-cc .ims-cc-savings__table-wrap {
		padding: 0;
	}

	/* Label on its own line, the 10 options use the full width below it. */
	.ims-cc .ims-cc-pct-bar {
		flex-wrap: wrap;
		padding: 0 24px 32px;
	}

	.ims-cc .ims-cc-pct-bar__label {
		width: 100%;
		padding: 24px 0 44px;
	}

	.ims-cc .ims-cc-pcts {
		width: 100%;
		gap: 4px;
	}

	.ims-cc .ims-cc-pct {
		flex: 1 1 0;
		width: auto;
		font-size: 20px;
	}

	.ims-cc .ims-cc-pct::before {
		width: 52px;
		height: 92px;
	}

	.ims-cc .ims-cc-breakdown-wrap {
		overflow-x: auto;
	}

	.ims-cc .ims-cc-breakdown {
		min-width: 600px;
		table-layout: auto;
	}

	.ims-cc .ims-cc-breakdown thead tr:first-child th:nth-child(2),
	.ims-cc .ims-cc-breakdown thead tr:first-child th:nth-child(3) {
		font-size: 16px;
		line-height: 22px;
	}

	.ims-cc .ims-cc-breakdown thead tr:last-child th {
		padding: 12px 4px 8px;
		font-size: 13px;
		line-height: 17px;
	}

	.ims-cc .ims-cc-breakdown tbody td {
		padding: 12px 4px;
		font-size: 14px;
		line-height: 20px;
	}
}

/* Phone */
@container ims-cc (max-width: 767.98px) {
	.ims-cc .ims-cc-inner {
		--ims-cc-gutter: 1rem;
		padding-bottom: 48px;
	}

	.ims-cc h2 { font-size: 1.875rem; }

	.ims-cc .ims-cc-intro,
	.ims-cc .ims-cc-tabs-bar {
		margin-bottom: 32px;
	}

	.ims-cc .ims-cc-tabs-card {
		padding: 20px;
		row-gap: 16px;
	}

	.ims-cc .ims-cc-tabs-card__title {
		font-size: 18px;
	}

	.ims-cc .ims-cc-tabs {
		width: 100%;
	}

	.ims-cc .ims-cc-tab {
		width: 50%;
		min-width: 0;
		min-height: 48px;
		padding: 12px 8px;
		white-space: normal;
	}

	.ims-cc .ims-cc-inputs,
	.ims-cc .ims-cc-factors,
	.ims-cc .ims-cc-credits,
	.ims-cc .ims-cc-savings,
	.ims-cc .ims-cc-summary {
		padding: 24px 20px;
	}

	.ims-cc .ims-cc-inputs__title {
		margin-bottom: 24px;
		font-size: 24px;
	}

	/* Inputs: one per row. */
	.ims-cc .ims-cc-field,
	.ims-cc .ims-cc-row--three .ims-cc-field {
		width: 100%;
	}

	.ims-cc .ims-cc-input[readonly] {
		font-size: 20px;
	}

	.ims-cc .ims-cc-results {
		padding: 0 20px 24px;
	}

	.ims-cc .ims-cc-results__head {
		padding: 24px 0;
	}

	.ims-cc .ims-cc-results__label,
	.ims-cc .ims-cc-pct-bar__label {
		font-size: 20px;
		line-height: 28px;
	}

	.ims-cc .ims-cc-results__hours {
		font-size: 16px;
		line-height: 24px;
	}

	.ims-cc .ims-cc-results__big {
		font-size: 26px;
		line-height: 32px;
	}

	/* Result stats: dollars on its own row, then 2 per row. */
	.ims-cc .ims-cc-stats,
	.ims-cc .ims-cc-stats--savings {
		padding: 12px 0;
	}

	.ims-cc .ims-cc-stat {
		width: 50%;
	}

	.ims-cc .ims-cc-stat:first-child {
		width: 100%;
	}

	.ims-cc .ims-cc-stat__value {
		font-size: clamp(18px, 6vw, 26px);
		white-space: nowrap;
	}

	/* Emission factor and carbon credit tables fit the screen (no sideways scroll). */
	.ims-cc .ims-cc-factors__table,
	.ims-cc .ims-cc-factors__table thead,
	.ims-cc .ims-cc-factors__table tbody,
	.ims-cc .ims-cc-factors__table tfoot,
	.ims-cc .ims-cc-credits__table,
	.ims-cc .ims-cc-credits__table tbody {
		display: block;
		width: 100%;
	}

	.ims-cc .ims-cc-factors__table tr,
	.ims-cc .ims-cc-credits__table tr {
		display: flex;
		align-items: stretch;
	}

	.ims-cc .ims-cc-factors__table th,
	.ims-cc .ims-cc-factors__table td {
		display: flex;
		align-items: center;
	}

	.ims-cc .ims-cc-factors__table th:first-child,
	.ims-cc .ims-cc-factors__table tbody td:first-child {
		flex: 1 1 auto;
	}

	.ims-cc .ims-cc-factors__table th:last-child,
	.ims-cc .ims-cc-factors__table tbody td:last-child {
		flex: 0 0 38%;
	}

	.ims-cc .ims-cc-factors__table thead th {
		padding: 12px 10px;
		font-size: 18px;
		line-height: 24px;
	}

	.ims-cc .ims-cc-factors__table tbody td {
		padding: 8px 10px;
		font-size: 15px;
		line-height: 22px;
	}

	.ims-cc .ims-cc-factors__table tfoot tr {
		flex-direction: column;
	}

	.ims-cc .ims-cc-factors__foot {
		width: 100%;
	}

	.ims-cc .ims-cc-factors__foot-inner {
		width: 100%;
		column-gap: 12px;
	}

	.ims-cc .ims-cc-factors__foot-inner > span {
		font-size: 16px;
		line-height: 24px;
	}

	.ims-cc .ims-cc-factors__foot--grey {
		padding: 16px 10px;
	}

	.ims-cc .ims-cc-factors__foot--dark {
		padding: 14px 10px;
	}

	.ims-cc .ims-cc-factors__note {
		margin-top: 16px;
		font-size: 14px;
	}

	.ims-cc .ims-cc-credits__title {
		margin-bottom: 16px;
		font-size: 20px;
	}

	.ims-cc .ims-cc-credits__table tr + tr {
		border-top: 0;
	}

	.ims-cc .ims-cc-credits__table td {
		display: flex;
		align-items: center;
		padding: 8px 12px;
		font-size: 15px;
		line-height: 22px;
	}

	.ims-cc .ims-cc-credits__table td:first-child {
		flex: 1 1 auto;
	}

	.ims-cc .ims-cc-credits__table td:last-child {
		flex: 0 0 auto;
		justify-content: flex-end;
		min-width: 96px;
		font-size: 22px;
		line-height: 30px;
	}

	.ims-cc .ims-cc-credits__table td:last-child,
	.ims-cc .ims-cc-factors__foot--dark .ims-cc-factors__foot-inner > span:last-child {
		font-size: 22px;
		line-height: 30px;
	}

	/* Estimated tab: % selector as a 5-column grid of tap targets. */
	.ims-cc .ims-cc-savings__head {
		margin-bottom: 24px;
	}

	.ims-cc .ims-cc-pct-bar {
		margin-bottom: 24px;
		padding: 0 12px 16px;
		row-gap: 4px;
	}

	.ims-cc .ims-cc-pct-bar__label {
		padding: 16px 0 8px;
	}

	.ims-cc .ims-cc-pcts {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		gap: 8px;
		width: 100%;
	}

	.ims-cc .ims-cc-pct {
		width: auto;
		min-height: 44px;
		font-size: 18px;
		line-height: 44px;
	}

	.ims-cc .ims-cc-pct::before,
	.ims-cc .ims-cc-pct.is-active::before {
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: var(--ims-cc-radius-sm);
		clip-path: none;
		transform: none;
	}

	.ims-cc .ims-cc-stats--savings {
		margin-bottom: 24px;
	}

	/* Summary */
	.ims-cc .ims-cc-summary {
		margin-top: 32px;
	}

	.ims-cc .ims-cc-summary__top {
		margin-bottom: 24px;
		padding-bottom: 24px;
	}

	.ims-cc .ims-cc-summary__title {
		margin-bottom: 20px;
		font-size: 26px;
		line-height: 32px;
	}

	.ims-cc .ims-cc-summary__text p,
	.ims-cc .ims-cc-summary__text li {
		font-size: 16px;
		line-height: 24px;
	}

	/* Estimated breakdown: one card per percentage (labels come from data-label). */
	.ims-cc .ims-cc-breakdown-wrap {
		overflow: visible;
	}

	.ims-cc .ims-cc-breakdown,
	.ims-cc .ims-cc-breakdown tbody,
	.ims-cc .ims-cc-breakdown tr {
		display: block;
		width: 100%;
		min-width: 0;
	}

	.ims-cc .ims-cc-breakdown thead {
		display: none;
	}

	.ims-cc .ims-cc-breakdown tbody tr {
		overflow: hidden;
		margin-bottom: 12px;
		border-radius: var(--ims-cc-radius-md);
		background-color: var(--ims-cc-white);
	}

	.ims-cc .ims-cc-breakdown tbody td,
	.ims-cc .ims-cc-breakdown tbody tr:nth-child(even) td,
	.ims-cc .ims-cc-breakdown tbody tr td:first-child,
	.ims-cc .ims-cc-breakdown tbody tr td:nth-child(4) {
		display: flex;
		justify-content: space-between;
		column-gap: 12px;
		padding: 8px 14px;
		border: 0;
		border-bottom: 1px solid var(--ims-cc-surface);
		background-color: var(--ims-cc-white);
		font-size: 15px;
		line-height: 22px;
		text-align: right;
	}

	.ims-cc .ims-cc-breakdown tbody tr td:first-child {
		background-color: var(--ims-cc-surface);
		font-size: 18px;
		line-height: 26px;
	}

	.ims-cc .ims-cc-breakdown tbody td:last-child {
		border-bottom: 0;
	}

	.ims-cc .ims-cc-breakdown tbody td::before {
		content: attr(data-label);
		color: var(--ims-cc-grey-600);
		font-weight: 400;
		text-align: left;
	}

	.ims-cc .ims-cc-breakdown tbody tr td:first-child::before {
		color: var(--ims-cc-text);
		font-weight: 700;
	}

	/* Email form */
	.ims-cc .ims-cc-summary__form-title {
		margin-bottom: 20px;
		font-size: 22px;
		line-height: 28px;
	}

	.ims-cc .ims-cc-email-form__fields {
		flex-wrap: wrap;
		row-gap: 16px;
	}

	.ims-cc .ims-cc-email-form__field {
		width: 100%;
	}

	.ims-cc .ims-cc-email-form__submit {
		margin-top: 24px;
	}

	.ims-cc .ims-cc-btn {
		width: 100%;
		min-height: 48px;
	}
}

/* --------------------------------------------------------------------------
   Input validation, email status, honeypot, focus
   -------------------------------------------------------------------------- */

.ims-cc .ims-cc-input.is-invalid {
	border-color: var(--ims-cc-error);
}

.ims-cc .ims-cc-field__error {
	margin: 6px 0 0;
	color: var(--ims-cc-error);
	font-size: 14px;
	line-height: 1.3;
}

.ims-cc .ims-cc-field__error[hidden],
.ims-cc .ims-cc-email-form__status[hidden],
.ims-cc .ims-cc-panel[hidden] {
	display: none;
}

.ims-cc .ims-cc-email-form__status {
	margin: 24px 0 0;
	padding: 12px 16px;
	border-radius: var(--ims-cc-radius-sm);
	background-color: var(--ims-cc-white);
	font-weight: 600;
	text-align: center;
}

.ims-cc .ims-cc-email-form__status.is-success {
	color: var(--ims-cc-success);
}

.ims-cc .ims-cc-email-form__status.is-error {
	color: var(--ims-cc-error);
}

/* Spam trap: hidden from people, visible to simple bots. */
.ims-cc .ims-cc-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ims-cc .ims-cc-tab:focus-visible,
.ims-cc .ims-cc-pct:focus-visible,
.ims-cc .ims-cc-btn:focus-visible {
	outline: 3px solid var(--ims-cc-accent);
	outline-offset: 2px;
}

.ims-cc .ims-cc-input:focus-visible,
.ims-cc .ims-cc-email-form__input:focus-visible {
	box-shadow: 0 0 0 2px var(--ims-cc-secondary);
}

/* --------------------------------------------------------------------------
   "Protect from theme styles" (Settings > Branding)
   Wins over theme rules such as .entry-content p or input[type="text"].
   -------------------------------------------------------------------------- */

html body .ims-cc.ims-cc--isolated,
html body .ims-cc.ims-cc--isolated :is(div, p, span, strong, em, a, label, ul, li, table, th, td, input, button) {
	font-family: var(--ims-cc-font-body, inherit);
	letter-spacing: normal;
	text-transform: none;
}

html body .ims-cc.ims-cc--isolated :is(h2, h3, h4, h5, .ims-cc-tab, .ims-cc-btn, .ims-cc-factors__table thead th) {
	font-family: var(--ims-cc-font-heading, inherit);
}

html body .ims-cc.ims-cc--isolated :is(h2, h3, h4, h5) {
	font-weight: var(--ims-cc-heading-weight, 600);
}

html body .ims-cc.ims-cc--isolated .ims-cc-input,
html body .ims-cc.ims-cc--isolated .ims-cc-email-form__input {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	margin: 0;
	border: 1px solid var(--ims-cc-surface);
	border-radius: var(--ims-cc-radius-sm);
	background-color: var(--ims-cc-white);
	box-shadow: none;
	font-size: 16px;
}

html body .ims-cc.ims-cc--isolated .ims-cc-input {
	height: auto;
	padding: 11px 16px;
	color: var(--ims-cc-text);
	font-weight: 400;
	line-height: 24px;
}

html body .ims-cc.ims-cc--isolated .ims-cc-input[readonly] {
	color: var(--ims-cc-grey-400);
	font-size: 24px;
	font-weight: 700;
}

html body .ims-cc.ims-cc--isolated .ims-cc-input.is-invalid {
	border-color: var(--ims-cc-error);
}

html body .ims-cc.ims-cc--isolated .ims-cc-email-form__input {
	height: 2.875rem;
	padding: 0.5rem 1rem;
	color: var(--ims-cc-primary);
	font-weight: 600;
	line-height: 1.5;
}

html body .ims-cc.ims-cc--isolated .ims-cc-label {
	margin: 0 0 6px;
	padding: 0;
}

html body .ims-cc.ims-cc--isolated .ims-cc-email-form__label {
	margin: 0;
	padding: 0;
}

html body .ims-cc.ims-cc--isolated .ims-cc-btn {
	box-shadow: none;
	text-decoration: none;
}

@container ims-cc (max-width: 767.98px) {
	html body .ims-cc.ims-cc--isolated .ims-cc-input[readonly] {
		font-size: 20px;
	}
}

/* Very narrow (small phones, sidebars) */
@container ims-cc (max-width: 400px) {
	.ims-cc .ims-cc-inputs,
	.ims-cc .ims-cc-factors,
	.ims-cc .ims-cc-credits,
	.ims-cc .ims-cc-savings,
	.ims-cc .ims-cc-summary {
		padding: 20px 14px;
	}

	.ims-cc .ims-cc-results {
		padding: 0 14px 20px;
	}

	.ims-cc .ims-cc-credits__table td {
		padding: 8px 10px;
		font-size: 14px;
	}

	.ims-cc .ims-cc-credits__table td:last-child,
	.ims-cc .ims-cc-factors__foot--dark .ims-cc-factors__foot-inner > span:last-child {
		min-width: 72px;
		font-size: 18px;
		line-height: 26px;
	}

	.ims-cc .ims-cc-factors__foot-inner > span {
		font-size: 15px;
	}

	.ims-cc .ims-cc-pcts {
		gap: 4px;
	}

	.ims-cc .ims-cc-pct {
		font-size: 15px;
	}
}