/*!
Theme Name: Invictus Studio Child
Theme URI: http://invictusstudio.com/
Author: Invictus Studio
Author URI: http://invictusstudio.com/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: alpha
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

alpha is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/


body {
	overflow-x: hidden;
	line-height: 1.5;
	color: #000;
}

ul {
	padding: 0;
	margin: 0;
}

.section {
	padding: 50px 0;
}

a {
	text-decoration: none !important;
	transition: 0.5s ease !important;
}

a,
input,
button {
	outline: 0 !important;
}

.post,
.page {
	margin: 0;
}

body,
p {
	font-weight: 400;
	color: #000;
	font-family: 'Proxima Nova Rg';
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: bold;
	font-family: 'Proxima Nova Lt';
}

.home .entry-title {
	display: none;
}

ul li,
li {
	list-style: none;
}

.skip-link.screen-reader-text {
	display: none;
}

::-webkit-input-placeholder {
	/* Chrome/Opera/Safari */
	color: inherit;
	opacity: 1;
}

::-moz-placeholder {
	/* Firefox 19+ */
	color: inherit;
	opacity: 1;
}

:-ms-input-placeholder {
	/* IE 10+ */
	color: inherit;
	opacity: 1;
}

:-moz-placeholder {
	/* Firefox 18- */
	color: inherit;
	opacity: 1;
}

#sidebar {
	display: none;
}

.entry-footer {
	clear: both;
}

#colophon {
	clear: both;
}

/* 404 - NOT FOUND PAGE */

.error-404.not-found {
	text-align: center;
	height: 100vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100vw;
	left: 50%;
	margin-left: -50vw;
	position: relative;
	background-image: url(/wp-content/uploads/2020/10/404.jpg);
	background-size: cover;
}

.not_found_inner {
	max-width: 69.5%;
}

.error404 #masthead,
.error404 #colophon {
	display: none;
}

.logo a {
	outline: 0 !important;
}

.error-404.not-found .logo {
	padding: 0;
	background-color: transparent;
}

.error-404.not-found h1 {
	font-size: 200px;
	line-height: 1;
	color: #404040;
	margin: 30px 0;
	;
	font-weight: 800;

}

.error-404.not-found h1 span {
	color: #e01e26;
}

.page-header h3 {
	color: #000;
	font-weight: 700;
	margin-bottom: 10px;
	font-size: 40px;
}

.page-header p {
	font-size: 22px !important;
	color: #000;
	margin-bottom: 20px;
}

.page-content .return_home {
	background-color: #e01e26;
	color: #fff;
	padding: 20px 50px;
	display: inline-block;
	font-size: 20px;
	box-shadow: 0 2px 10px 0px rgba(0, 0, 0, 0.5);
	text-decoration: none;
	transition: all 0.5s ease-in-out;
	border: 2px solid #e01e26;
}

.page-content .return_home:hover {
	transform: translateY(-3px);
	background-color: transparent;
	color: #000;
	transform: scale(1.1);
}


/* 404 - NOT FOUND PAGE ENDS */

/*SEARCH RESULTS - NO RESULTS CSS */


.search-results article.product,
.search-results article.page {
	display: none;
}

.search-results .page-title span::before,
.search-results .page-title span::after {
	content: '"';
}

.search-results .page-title {
	font-weight: bold;
	font-size: 28px;
	text-align: center;
	margin-bottom: 30px;
}

.search-results .page-header {
	width: 100%;
}

.search-results #primary {
	display: flex;
	flex-wrap: wrap;
}

.search-results #primary article {
	width: 30%;
	margin: 0 1.5%;
	box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.1);
	padding: 20px;
	padding-top: 0;
	margin-bottom: 35px;
	border-radius: 6px;
}

.search-results #primary article a.post-thumbnail {
	display: block;
	margin-left: -20px;
	margin-right: -20px;
}

.search-results #primary article a.post-thumbnail img {
	width: 100%;
	height: 220px;
	object-fit: cover;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
}

.search-results #primary article .entry-title a {
	display: block;
	color: #000;
	font-size: 24px;
	font-weight: 600;
	margin-top: 20px;
	margin-bottom: 20px;
}

.no-results.not-found {
	text-align: center;
	margin-bottom: 50px;
}

.no-results.not-found .search-form input.search-field {
	height: 45px;
	padding-left: 10px;
	border: 1px solid #eee;
	background-color: #eee;
	color: #333;
	font-size: 14px;
	width: 250px;
}

.no-results.not-found .search-form .search-submit {
	height: 45px;
	padding: 0 30px;
	border: 0;
	background-color: #0b204d;
	color: #fff;
	cursor: pointer;
}

.no-results.not-found .search-form .search-submit:hover {
	background-color: #252525;
}

.no-results.not-found .search-form label span {
	display: none;
	width: 0;
}


/*SEARCH RESULTS - NO RESULTS CSS ENDS*/


/* Modal box CSS*/

.modal {
	background-color: rgba(0, 0, 0, 0.6);
}

.modal-content {
	background-color: transparent !important;
	border: 0px solid rgba(0, 0, 0, .2) !important;
}

.modal-footer {
	display: none !important;
}

.modal-header {
	border-bottom: 0px !important;
}

.close {
	color: #000 !important;
	opacity: 1 !important;
	border: 1px solid #fff !important;
	border-radius: 50%;
	width: 30px;
	height: 30px;
	background-color: #fff !important;
	padding: 0 !important;
	float: left !important;
	margin: 0 !important;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.modal-dialog {
	max-width: 650px !important;
	margin: 50px auto !important;
}

.close span {
	display: block;
	color: #fff;
	position: absolute;
	left: 120%;
	top: 0;
}

.dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input {
	height: 50px !important;
}

.dgwt-wcas-no-submit .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input {
	padding: 15px 15px 15px 40px !important;
}

.dgwt-wcas-details-main-image img {
	max-height: 200px !important;
}

.dgwt-wcas-suggestion-selected {
	background-color: #0b204d;
}

.dgwt-wcas-suggestion-selected .dgwt-wcas-st {
	color: #fff;
}

.dgwt-wcas-suggestion-selected .dgwt-wcas-sp {
	color: #fff;
}

.dgwt-wcas-pd-addtc .add_to_cart_inline {
	margin-left: 20px;
}

.asl_nores {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
}

.results .asl_nores .asl_keyword {
	padding: 5px 0px !important;
	cursor: pointer;
	font-weight: bold;
	font-family: inherit;
	border-top: 1px solid #eee;
}

.asl_nores_header {
	margin-bottom: 10px !important;
}

/*  Modal CSS ENDS */


/*  Drop down menu CSS*/
#primary-menu {
	text-align: center;
}

#primary-menu li {
	display: inline-block;
	padding: 0 10px;
}

#primary-menu li a {
	padding: 10px 0;
	color: #000;
}

.menu-item-has-children {
	position: relative;
}

.menu-item-has-children::after {
	content: '\f107';
	font-family: 'Font Awesome 5 Free';
	font-weight: bold;
	position: absolute;
	right: -5px;
	top: 2px;
	display: block;
}

.menu-item-has-children .sub-menu {
	position: absolute;
	z-index: 99;
	background-color: #fff;
	box-shadow: 0 2px 10px 0px rgba(0, 0, 0, 0.15);
	top: calc(100% + 10px);
	left: 10px;
	width: 220px;
	border-radius: 5px;
	transform: translateY(20px);
	opacity: 0;
	transition: all 0.5s ease-in-out;
	visibility: hidden;
	overflow: hidden;
}

.menu-item-has-children:hover .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

#primary-menu .sub-menu li {
	display: block;
	padding: 0;
}

#primary-menu .sub-menu li a:hover {
	color: #fff;
	border-color: transparent;
}

#primary-menu .sub-menu li a {
	display: block;
	text-align: left;
	padding: 17px 10px;
	border-bottom: 1px solid #eee;
	position: relative;
	z-index: 9;
	transition: all 0.5s ease-in-out;
}

#primary-menu .sub-menu li:last-child a {
	border-bottom: 0;
}

#primary-menu .sub-menu li a:hover::before {
	width: 100%;
	background-color: #0b204d;
	border-color: #0b204d;
}

#primary-menu .sub-menu li a::before {
	content: '';
	background-color: transparent;
	width: 3px;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	transition: all 0.5s ease-in-out;
	z-index: -1;
	border-bottom: 1px solid transparent;
}

.menu-toggle {
	display: none;
}

/*  Drop down menu CSS ENDS */

/*
Nav bar
*/
#mm #primary-menu ul.sub-menu li a {
	padding-left: 35px;
}

#mm #primary-menu .sub-menu li a::before {
	content: unset;
}

#mm ul.sub-menu {
	position: relative;
	visibility: visible;
	opacity: 1;
	transform: translate(0);
	display: block !important;
	height: auto !important;
}

#mml {
	padding: 0 15px;
	color: #ffffff;
}

#mml h4 {
	display: inline-block;
	margin-bottom: 0;
	margin-top: 12px;
}

.mm {
	position: relative;
	background-color: #000;
	min-height: 49px;
}

#mmb {
	position: absolute;
	width: 40px;
	height: 50px;
	margin-right: 15px;
	top: 0;
	right: 0;
	cursor: pointer;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out;
	-o-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
}

#mmb span {
	display: block;
	position: absolute;
	height: 1.5px;
	width: 100%;
	background: #ffffff;
	border-radius: 9px;
	opacity: 1;
	left: 0;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .25s ease-in-out;
	-moz-transition: .25s ease-in-out;
	-o-transition: .25s ease-in-out;
	transition: .25s ease-in-out;
}

#mmb span:nth-child(1) {
	top: 16px;
	-webkit-transform-origin: left center;
	-moz-transform-origin: left center;
	-o-transform-origin: left center;
	transform-origin: left center;
}

#mmb span:nth-child(2) {
	top: 26px;
	-webkit-transform-origin: left center;
	-moz-transform-origin: left center;
	-o-transform-origin: left center;
	transform-origin: left center;
}

#mmb span:nth-child(3) {
	top: 36px;
	-webkit-transform-origin: left center;
	-moz-transform-origin: left center;
	-o-transform-origin: left center;
	transform-origin: left center;
}

#mmb.on span {
	height: 2px;
}

#mmb.on span:nth-child(1) {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 11px;
	left: 8px;
}

#mmb.on span:nth-child(2) {
	width: 0%;
	opacity: 0;
}

#mmb.on span:nth-child(3) {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
	top: 39px;
	left: 8px;
}

#mm ul {
	padding-left: 0;
	margin-bottom: 0;
	position: absolute;
	left: 0;
	top: 100%;
	width: 100%;
	z-index: 1000;
	display: none;
}

#mm li {
	display: block;
	position: relative;
	padding: 0;
}

#mm #primary-menu a {
	display: block;
	padding: 16px 26px 15px 17px;
	border-bottom: #dedede 1px solid;
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 16px;
	line-height: 25px;
	background-color: #000;
	word-wrap: break-word;
	text-align: left;
}

#mm #primary-menu a:hover {
	background-color: #0b204d;
}

.mm,
#mm {
	display: none;
}

/* 
 * NAVBAR CSS ENDS
 */

/* WOOCOMMERCE CSS START */

.woocommerce td.product-name a {
	color: #000;
	font-weight: 600;
}

.woocommerce td.product-name a:hover {
	color: #0b204d;
}

input#coupon_code {
	width: 200px !important;
	padding-left: 10px;
	margin-right: 10px;
	height: 45px;
	background-color: #eee;
	border: 0;
	border-radius: 3px;
	font-size: 14px;
}

.coupon .button {
	height: 45px;
}

.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled] {
	color: #fff;
	height: 45px;
}

.actions button {
	height: 45px;
}

.woocommerce a.added_to_cart {
	padding: 10px 20px;
	border-radius: 3px;
}

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.added_to_cart,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	color: #fff;
	background-color: #0b204d;
	padding: 10px 20px;
	line-height: 1.5;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.added_to_cart:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	color: #fff;
	background-color: #333;
}

.post-type-archive li .added_to_cart {
	background-color: #0b204d !important;
	color: #fff !important;
	font-size: 16px !important;
	letter-spacing: 1px !important;
}

.wc-proceed-to-checkout a,
#place_order {
	background-color: #0b204d !important;
	color: #fff !important;
	font-size: 16px !important;
	text-transform: uppercase;
	letter-spacing: 1px !important;
	margin-top: 8px !important;
	font-weight: 600 !important;
}

.wc-proceed-to-checkout a:hover,
#place_order:hover {
	background-color: #252525 !important;
	color: #fff !important;
}

.woocommerce #payment #place_order,
.woocommerce-page #payment #place_order {
	float: unset;
	display: block;
	width: 100%;
	height: 45px;
}

a.shipping-calculator-button {
	color: #0b204d;
	text-transform: uppercase;
	font-weight: 600;
}

.woocommerce a.remove,
td.product-remove button {
	background: #0b204d !important;
	color: #fff !important;
	line-height: 17px;
}

#add_payment_method table.cart img,
.woocommerce-cart table.cart img,
.woocommerce-checkout table.cart img {
	width: 100px;
}

.woocommerce-cart-form {
	width: 62%;
	float: left;
}

.woocommerce .cart-collaterals {
	width: 35%;
	float: right;
}

.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals {
	float: unset;
	width: 100%;
	background: rgba(84, 84, 84, 0.05);
	padding: 40px 40px 30px;
}

.woocommerce table.shop_table {
	border: 0;
}

#add_payment_method table.cart .product-thumbnail,
.woocommerce-cart table.cart .product-thumbnail,
.woocommerce-checkout table.cart .product-thumbnail {
	text-align: center;
}

.woocommerce table.shop_table th {
	color: #000 !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	font-size: 13px !important;
}

.woocommerce table.shop_table .actions {
	padding-top: 40px !important;
}

.woocommerce-cart .cart-collaterals .cart_totals h2 {
	position: relative;
	margin-bottom: 30px;
	border-bottom: 1px solid #ebe9eb;
	padding-bottom: 20px;
	font-size: 16px;
	text-transform: uppercase;
	font-weight: 700;
}

.woocommerce-cart .cart-collaterals .cart_totals tr th,
.woocommerce-checkout .cart-collaterals .cart_totals tr td,
.woocommerce-checkout .cart-collaterals .cart_totals tr th {
	font-size: 16px;
	padding-left: 0;
	padding-right: 0;
}

.woocommerce .cart-collaterals table.shop_table td {
	padding-left: 0;
	padding-right: 0;
}

.cart_totals tr:not(:last-child) td {
	padding-bottom: 30px !important;
}

.qib-container button {
	cursor: pointer;
}

.woocommerce-shipping-destination {
	font-size: 14px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	font-size: 14px;
	color: #000;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
	padding: 10px;
	font-size: 14px;
}

input[type="checkbox"],
input[type="radio"],
.input-radio,
.input-checkbox {
	width: 17px;
	-moz-appearance: none;
	appearance: none;
	-webkit-appearance: none;
	outline: none;
	outline-width: medium;
	position: relative;
	border: none;
	cursor: pointer;
	outline-width: 0;
	border-radius: 50%;
	top: 3px;
}

input[type="radio"]::before {
	background: #0b204d;
}

.input-radio::before,
input[type="radio"]::before,
.input-radio::before,
input[type="checkbox"]::before {
	position: absolute;
	left: 0;
	top: 0;
	background: #ccc;
	width: 17px;
	height: 17px;
	display: block;
	border-radius: 50%;
	-webkit-transition: 240ms;
	-o-transition: 240ms;
	transition: 240ms;
	-webkit-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0);
}

.input-radio::before,
input[type="checkbox"]::before {
	border-radius: 0%;
}

input[type="checkbox"]::before,
input[type="checkbox"]::after,
input[type="radio"]::before,
input[type="radio"]::after,
.input-radio::before,
.input-radio::after,
.input-checkbox::before,
.input-checkbox::after {
	content: "";
}

input[type="radio"]::after,
.input-radio::after,
input[type="checkbox"]::after,
.input-checkbox::after,
.widget_product_categories ul li a::before,
.widget_layered_nav ul li a::before,
.post_tags a,
.wpb_widgetised_column .tagcloud a,
.select2-container--default .select2-selection--multiple .select2-selection__choice {

	border-color: rgba(84, 84, 84, 0.8);

}

.input-radio::after,
input[type="radio"]::after {

	border-radius: 50%;

}

input[type="checkbox"]::after,
input[type="radio"]::after,
.input-radio::after,
.input-checkbox::after {
	display: block;
	width: 17px;
	height: 17px;
	border: 2px solid #a5a5a5;
	-webkit-transition: 240ms;
	-o-transition: 240ms;
	transition: 240ms;
}

.input-radio:checked::before,
input[type="radio"]:checked::before,
.input-radio:checked::before,
input[type="checkbox"]:checked::before {
	-webkit-transform: scale(0.5);
	-ms-transform: scale(0.5);
	transform: scale(0.5);
	background: #0b204d;
}

input[type="radio"]:checked::after,
.input-radio:checked::after,
input[type="checkbox"]:checked::after,
.input-checkbox:checked::after,
.return-to-shop .button.wc-backward {
	border-color: #0b204d;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
	padding: 10px;
	border-radius: 3px;
	border: 1px solid #ddd;
	color: #000;
	font-weight: 400;
	height: 45px;
}

.woocommerce form .form-row {
	padding: 3px 0;
	margin: 0 0 06px;
	display: block;
}

#calc_shipping_city_field {
	margin-bottom: 2px;
}

.order-total .woocommerce-Price-amount {
	font-weight: 600 !important;
	font-size: 25px;
}

.woocommerce-checkout .checkout_coupon input#coupon_code {
	width: 100% !important;
	padding-left: 15px !important;
	display: inline-block;
	padding: 6px 10px;
}

.checkout.woocommerce-checkout {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.woocommerce .col2-set,
.woocommerce-page .col2-set {
	width: 60%;
}

#order_review {
	width: 38%;
	background: rgba(84, 84, 84, 0.05);
	padding: 20px 40px 40px;
	position: relative;
}

#order_review_heading {
	display: none;
}

.woocommerce .col2-set .col-1,
.woocommerce-page .col2-set .col-1 {
	float: unset;
	width: 100%;
	max-width: 100%;
}

.woocommerce .col2-set .col-2,
.woocommerce-page .col2-set .col-2 {
	float: unset;
	width: 100%;
	max-width: 100%;
}

.checkout_coupon.woocommerce-form-coupon .button {
	height: 45px;
}

.checkout_coupon.woocommerce-form-coupon .form-row-first {
	width: 50%;
}

.woocommerce-checkout form.checkout .woocommerce-checkout-review-order table.woocommerce-checkout-review-order-table .product-total {
	text-align: right;
}

.woocommerce-checkout form.checkout .woocommerce-checkout-review-order table.woocommerce-checkout-review-order-table thead td,
.woocommerce-checkout form.checkout .woocommerce-checkout-review-order table.woocommerce-checkout-review-order-table thead th,
.woocommerce-checkout form.checkout .woocommerce-checkout-review-order table.woocommerce-checkout-review-order-table tfoot td,
.woocommerce-checkout form.checkout .woocommerce-checkout-review-order table.woocommerce-checkout-review-order-table tfoot th {
	border: none;
	vertical-align: top;
}

.woocommerce .shop_table.woocommerce-checkout-review-order-table td {
	padding: 16px 0px;
}

.shop_table.woocommerce-checkout-review-order-table tfoot tr.cart-subtotal th,
.shop_table.woocommerce-checkout-review-order-table tfoot tr.cart-subtotal td {
	border-top: 1px solid rgba(0, 0, 0, .1) !important;
	padding-top: 40px;
}

#add_payment_method #payment,
.woocommerce-cart #payment,
.woocommerce-checkout #payment {
	background: transparent;
	border-radius: 0;
}

#add_payment_method #payment ul.payment_methods,
.woocommerce-cart #payment ul.payment_methods,
.woocommerce-checkout #payment ul.payment_methods {
	padding: 0;
	border-bottom: 0;
}

#add_payment_method #payment .payment_method_paypal .about_paypal,
.woocommerce-cart #payment .payment_method_paypal .about_paypal,
.woocommerce-checkout #payment .payment_method_paypal .about_paypal {
	float: right;
	line-height: 20px;
	margin-left: 10px;
	color: #000;
	font-weight: 300;
	font-size: 12px;
	border-bottom: 1px dashed;
}

#add_payment_method #payment ul.payment_methods li img,
.woocommerce-cart #payment ul.payment_methods li img,
.woocommerce-checkout #payment ul.payment_methods li img {
	width: 80px;
}

.woocommerce-billing-fields h3,
.woocommerce-additional-fields h3,
h3#order_review_heading,
#post-79 .entry-title,
.woocommerce-order-received .woocommerce-order-details__title,
.woocommerce-order-received .woocommerce-column__title,
.woocommerce-column__title,
.woocommerce-order-details__title,
.woocommerce-Address-title.title h3,
div#customer_login h2 {
	text-transform: uppercase;
	color: #252525;
	font-size: 24px !important;
	font-weight: 700;
	padding-bottom: 20px;
	margin-bottom: 0;
	position: relative;
}

span.select2-selection.select2-selection--single {
	height: 45px !important;
	padding: 9px 0;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 45px;
	right: 10px;
}

form.checkout.woocommerce-checkout label {
	font-size: 14px;
	margin-bottom: 0px;
	font-weight: 500;
	text-transform: uppercase;
}

#order_comments {
	height: 100px;
}

#add_payment_method #payment ul.payment_methods li,
.woocommerce #payment ul.payment_methods li {
	border-bottom: 1px solid rgba(84, 84, 84, 0.15);
	line-height: 16px;
	padding: 17px 0 14px;
}

#add_payment_method #payment ul.payment_methods li div.payment_box,
.woocommerce #payment ul.payment_methods li div.payment_box {
	background-color: transparent;
	line-height: 1.538em;
	padding: 0 35px;
	margin: 0;
	width: 100%;
	font-size: 1rem;
	margin-top: 20px !important;
	border: none;
	-webkit-box-shadow: none;
	box-shadow: none;
}

.woocommerce #payment div.payment_box p {
	font-size: 13px;
	line-height: 1.4285em;
	margin: -2px 0 0;
	margin-bottom: 0px;
	text-shadow: none;
	font-weight: 400;
	color: #333;
}

#add_payment_method #payment div.payment_box::before,
.woocommerce-cart #payment div.payment_box::before,
.woocommerce-checkout #payment div.payment_box::before {
	content: unset;
}

.woocommerce-privacy-policy-text p {
	font-size: 14px;
	color: #333;
}

.shop_table.woocommerce-checkout-review-order-table thead th,
.shop_table.woocommerce-checkout-review-order-table tfoot th,
.shop_table.woocommerce-checkout-review-order-table tfoot td {
	padding: 10px 0;
}

.woocommerce ul#shipping_method li label {
	text-transform: uppercase;
	font-weight: 700;
	font-size: 13px;
}

form.checkout.woocommerce-checkout ul.payment_methods li label {
	font-size: 16px;
	margin-top: 0;
	margin-bottom: 14px;
	text-transform: capitalize;
	line-height: 1.3em;
	font-weight: 700;
	color: #000;
	margin-top: 12px;
}

.woocommerce-error {
	border-color: #0b204d !important;
}

.woocommerce-message::before,
.woocommerce-error::before {
	color: #c12a30 !important;
}

.woocommerce-NoticeGroup.woocommerce-NoticeGroup-checkout {
	width: 100%;
}

.woocommerce-message a,
a.woocommerce-Button.button,
p.return-to-shop a,
.added_to_cart {
	background-color: #0b204d !important;
	color: #fff !important;
	padding: 10px 22px !important;
	font-size: 16px !important;
	margin-top: 8px !important;
	font-weight: bold;
}

.woocommerce-message a:hover,
a.woocommerce-Button.button:hover,
p.return-to-shop a:hover,
.added_to_cart:hover {
	background-color: #252525 !important;
	color: #fff !important;
}

.woocommerce-message a {
	margin-top: 0 !important;
}

.woocommerce-message,
.woocommerce-notices-wrapper a,
.woocommerce-message::before {
	border-top-color: #0b204d !important;
}

.woocommerce-order-received .woocommerce-customer-details {
	display: none;
}

.woocommerce-order-received p.woocommerce-notice.woocommerce-notice--success.woocommerce-thankyou-order-received {
	color: #0b204d;
}

.woocommerce-order-received .woocommerce table.shop_table tfoot td,
.woocommerce-order-received .woocommerce table.shop_table tfoot th {
	border: 0;
	padding-top: 15px;
}

.woocommerce-order-received .woocommerce table.shop_table tbody td,
.woocommerce-order-received .woocommerce table.shop_table tbody th {
	border-bottom: 3px solid rgba(0, 0, 0, .9);
	margin-bottom: 40px;
	padding: 15px 0;
}

.woocommerce-order-received .woocommerce table.shop_table td,
.woocommerce-order-received .woocommerce table.shop_table th {
	padding: 15px 0;
}

.woocommerce-order-received .woocommerce-table.woocommerce-table--order-details.shop_table.order_details {
	border-collapse: collapse;
}

.woocommerce-order-received .woocommerce td.product-name a {
	color: #0b204d;
	font-weight: 600;
	font-size: 20px;
}

.woocommerce-order-received .woocommerce td.product-name a:hover {
	color: #252525;
}

.woocommerce .woocommerce-form-login .woocommerce-form-login__rememberme {
	vertical-align: middle;
	margin-bottom: 0;
	margin-top: 7px;
}

.woocommerce form .form-row.create-account .input-checkbox {
	display: inline-block;
	margin: -2px 8px 0 0;
	text-align: center;
	vertical-align: unset;
}

#ship-to-different-address label span {
	margin-left: 8px;
	font-weight: bold;
	color: #000;
}

.tinv-wishlist .product-action {
	width: 165px;
}

#tinvwl_product_actions {
	height: 45px;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

.tinvwl-table-manage-list tr td {
	border-top: 1px solid #ccc;
}

.tinvwl-to-left.look_in {
	display: flex;
	flex-wrap: wrap;
}

.select-wrapper {
	flex: 1;
	margin-right: 5px;
	position: relative;
}

.select-wrapper::after {
	content: '\f0d7';
	font-family: 'Font Awesome 5 Free';
	font-weight: bold;
	position: absolute;
	right: 10px;
	top: 50%;
	z-index: 1;
	pointer-events: none;
	transform: translateY(-50%);
	line-height: 0;
	color: #666;
}

.tinvwl-to-left.look_in .tinvwl-input-group {
	width: 100%;
	border-collapse: collapse;
}

.wishlist_item .product-thumbnail img {
	width: 100px;
	height: auto;
	max-width: unset;
}

.woocommerce-Message.woocommerce-Message--info.woocommerce-info .button {
	margin-top: 0 !important;
}

.woocommerce-account .woocommerce-columns--addresses.col2-set.addresses,
.u-columns.woocommerce-Addresses.col2-set.addresses {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.woocommerce-account .woocommerce-column--shipping-address.col-2,
.woocommerce-account .woocommerce-column--billing-address.col-1,
.u-column1.col-1.woocommerce-Address,
.u-column2.col-2.woocommerce-Address {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 48%;
	flex: 0 0 48%;
	max-width: 48%;
	box-shadow: 0 0px 10px 0 rgba(0, 0, 0, 0.1);
	padding: 10px 20px;
}

.woocommerce-account .col2-set::after,
.woocommerce-account .col2-set::before {
	content: unset;
}

.woocommerce-account .woocommerce .woocommerce-customer-details address {
	border: 0;
	padding: 0 0 10px;
	line-height: 1.8;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-table tfoot th {
	text-align: right;
	border-top: 0 !important;
	border-right: 1px solid rgba(0, 0, 0, .1);
}

.woocommerce-account .woocommerce table.shop_table {
	border-collapse: collapse;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-table tbody tr {
	border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.woocommerce-account .woocommerce table.shop_table td,
.woocommerce-account .woocommerce table.shop_table th {
	padding: 20px 10px;
}

.woocommerce-account .woocommerce .account-orders-table {
	text-align: center;
}

.woocommerce-account.woocommerce .col2-set,
.woocommerce-account.woocommerce-page .col2-set {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.woocommerce-account #customer_login .col-1,
#customer_login .col-2 {
	flex: 49%;
}

.woocommerce-account .woocommerce form.login,
.woocommerce-account .woocommerce form.register {
	height: 400px;
}

/*Dashboad*/
nav.woocommerce-MyAccount-navigation ul {
	padding: 0;
	list-style: none;
	margin: 0 !important;
}

nav.woocommerce-MyAccount-navigation ul li a {
	padding: 9px 10px;
	display: block;
	border: 1px solid #0b204d;
	margin-bottom: 9px;
	color: white;
	text-decoration: none;
	position: relative;
	transition: all 0.3s ease-in;
	background-color: #0b204d;
}

nav.woocommerce-MyAccount-navigation ul li.is-active a {
	background-color: #252525;
	color: white;
	border: 1px solid #252525;
}

nav.woocommerce-MyAccount-navigation ul li a:hover {
	color: white !important;
	border: 1px solid #252525;
	background-color: #252525;
}

.woocommerce-account .woocommerce-MyAccount-content a {
	color: #0b204d;
}

.woocommerce-account .woocommerce-MyAccount-content a:hover {
	color: #252525;
}

form.woocommerce-EditAccountForm fieldset {
	padding-left: 0;
	padding-right: 0;
}

/**DASHBOARD END**/
.woocommerce table.my_account_orders .button {
	background-color: #0b204d;
	color: #fff;
	padding: 8px 25px;
	font-size: 14px;
	border-radius: 25px;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-top: 8px;
	display: inline-block;
	font-weight: 300;
}

.woocommerce table.my_account_orders .button:hover {
	background-color: #252525;
	color: #fff;
}

.woocommerce-account .addresses .title h3 {
	position: relative;
}


.woocommerce-privacy-policy-text a {
	color: #252525;
}

.woocommerce-privacy-policy-text a:hover {
	color: #0b204d;
}

.woocommerce-info {
	border-top-color: #0b204d;
	margin-bottom: 10px !important;
}

.lost_password a {
	color: #252525 !important;
}

.lost_password a:hover {
	color: #0b204d !important;
}

.woocommerce-info::before {
	color: #0b204d;
}

.woocommerce-form-login-toggle a,
.woocommerce-form-coupon-toggle a,
p.woocommerce-LostPassword.lost_password a {
	color: #252525 !important;
}

.woocommerce-form-login-toggle a:hover,
.woocommerce-form-coupon-toggle a:hover,
.woocommerce-privacy-policy-text a:hover,
p.woocommerce-LostPassword.lost_password a:hover {
	color: #0b204d !important;
}

.woocommerce-privacy-policy-text {
	padding-bottom: 20px;
}

.woocommerce form .form-row .required {
	color: #0b204d;
}

a.showcoupon {
	font-size: 16px;
	font-weight: 500;
}


h3#order_review_heading {
	margin-top: 40px;
}

form.woocommerce-cart-form .product-thumbnail {
	height: auto;
	border: none;
}

.woocommerce-cart-form .woocommerce-Price-amount.amount {
	font-size: 16px;
}

.woocommerce-form-coupon-toggle {
	margin-bottom: 40px;
}


ul.woocommerce-error {
	margin-bottom: 50px !important;
}

.tinv-header {
	display: none;
}

.tinv-wishlist.woocommerce.tinv-wishlist-clear {
	margin-top: 30px;
}


.post-type-archive .products li {
	text-align: center;
}

.tax-product_cat .products li {
	text-align: center;
}

.tax-product_cat li .added_to_cart {
	background-color: #c12a30 !important;
	color: #fff !important;
	padding: 12px 22px !important;
	font-size: 14px !important;
	border-radius: 25px !important;
	text-transform: uppercase;
	letter-spacing: 1px !important;
	margin-top: 8px !important;
	/*    display: inline-block !important; */
	font-weight: 300 !important;
}

.tax-product_cat li .added_to_cart:hover {
	background-color: #252525 !important;
	color: #fff !important;
}

.quantity {
	position: relative;
	width: fit-content;
}

.woocommerce-cart .quantity .minus {
	background: transparent;
	position: absolute;
	right: 0;
	bottom: 0;
	padding: 8px 5px 14px 7px !important;
	border-color: #252525;
	font-size: 24px;
	line-height: 0;
}

.woocommerce-cart .quantity .plus {
	background: transparent;
	position: absolute;
	right: 0;
	top: 0px;
	padding: 12px 4px 11px 4px !important;
	border-color: #252525;
	font-size: 24px;
	line-height: 0;
}


a.restore-item {
	margin-left: 10px;
	margin-top: -10px !important;
}

.page-id-317 .woocommerce-form-login {
	height: 492px;
}

.woocommerce-order-received .woocommerce-order-details__title {
	position: relative;
}

.woocommerce-order-received .woocommerce-column__title {
	position: relative;
}


.page-id-316 .wc-backward {
	margin-left: 20px !important;
	color: #252525 !important;
}

.page-id-316 .wc-backward:hover {
	color: #c12a30 !important;
}


.page-id-317 .woocommerce-MyAccount-content .woocommerce-Button {
	position: relative;
	top: -10px !important;
}

/* Woo Commerce End Here */


/* ============================================================================
 * ============================================================================
 *
 *  INVICTUS STUDIO — HOME PAGE, HEADER & FOOTER
 *
 *  Built from Figma "Invictus Studio (H.A)" → page "Design" → frame "Home"
 *  (node 2:26, 1920 x 6952). Every measurement below is taken from that frame.
 *
 *  Vertical rhythm of the Figma frame (y / height):
 *     Hero + strip ...........    0 /  933
 *     Trusted By .............  933 /  452   (title starts 1053)
 *     Where are you stuck .... 1385 / 1263
 *     The Reframe ............ 2450 /  376   (overlaps the section above)
 *     The Fundamentals ....... 2946 / 1196
 *     The System ............. 4262 /  953
 *     See it Work ............ 5215 /  999
 *     Footer ................. 6152 /  800   (overlaps the section above by 62)
 *
 *  Contents
 *  --------
 *   01. Design tokens
 *   02. Framework resets & overrides
 *   03. Site header
 *   04. Hero
 *   05. Hero strip
 *   06. Trusted by (logo marquee)
 *   07. Shared utilities
 *   08. Where are you stuck
 *   09. The reframe
 *   10. The fundamentals
 *   11. The system
 *   12. See it work
 *   13. Site footer
 *   14. Motion (arrows, hovers, scroll reveals)
 *   15. Reduced motion
 *
 * ============================================================================
 * ========================================================================== */


/* ============================================================
   01. DESIGN TOKENS  (Figma local variables)
   ============================================================ */
:root {
	--color-dark-primary: #4c1d24;
	/* "dark primary"     */
	--color-primary: #ee7e38;
	/* "Primary"          */
	--color-heading: #35141a;
	/* "Heading"          */
	--color-body-text: #6b4c52;
	/* "Body Text"        */
	--color-cream: #fbf1ee;
	/* "light background" */
	--color-secondary: #deba7c;
	/* "Secondary"        */
	--color-dark: #252525;
	/* "Dark"             */
	--color-white: #ffffff;

	/* Hero split panel */
	--color-orange-bg: #ea874a;
	--color-eyebrow: #ee7e38;
	--color-orange: #e97f3d;
	/* arrow / icon circles */

	/* Header (node 170:1945) */
	--header-bg: rgba(255, 255, 255, 0.12);
	--header-blur: blur(7px);
	/* Collapsed menu overlays page content, so it blurs harder. */
	--header-blur-mobile: blur(50px);
	--header-shadow: 0px 8px 30px 0px rgba(0, 0, 0, 0.08);
	--header-radius: 84px;
	--header-height: 92px;

	--color-card-border: rgba(76, 29, 36, 0.23);
	--color-reframe-orange: #d96527;

	/* Social plate — Figma "Ellipse 11": white at 10% */
	--color-social-bg: rgba(255, 255, 255, 0.1);

	/* 140 / 1920 — the page gutter used by most sections */
	--page-gutter: 140px;
	--gutter-pct: 7.2917%;

	/* Space between stacked sections in the Figma frame */
	--section-gap: 120px;
}


/* ============================================================
   02. FRAMEWORK RESETS & OVERRIDES

   main.css ships Bootstrap 4 plus a global `a { transition: .5s }`.
   These overrides restore the design's own timings and metrics.
   ============================================================ */
.invictus-home,
.site-header,
.site-footer {
	font-family: 'Inter', sans-serif;
}

.site-header a,
.site-footer a,
.invictus-home a {
	transition-duration: 0.2s !important;
	transition-timing-function: ease !important;
}

.invictus-home,
.site-footer {
	-webkit-font-smoothing: antialiased;
}

/* The Figma frame sits on white; only the hero strip and
   "See it work" carry the cream background. */
body.home {
	background-color: var(--color-white);
}

main.invictus-home {
	display: block;
	width: 100%;
	overflow-x: clip;
}

.invictus-home ul,
.site-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.invictus-home img,
.site-header img,
.site-footer img {
	max-width: 100%;
}

.btn-cta {
	border: 0;
}


/* ============================================================
   03. SITE HEADER  (node 170:1945 — 1640 x 92 at x140 / y28)
   ============================================================ */
.site-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	padding: 28px;
}

/* Solid bar on inner pages — there is no dark hero to sit over. */
body:not(.home) .site-header {
	position: relative;
	background-color: var(--color-dark-primary);
}

.header-inner {
	max-width: 1640px;
	margin: 0 auto;
}

.site-header .navbar {
	background: var(--header-bg);
	backdrop-filter: var(--header-blur);
	-webkit-backdrop-filter: var(--header-blur);
	border-radius: var(--header-radius);
	box-shadow: var(--header-shadow);
	height: var(--header-height);
	min-height: var(--header-height);
	padding: 10px 28px;
	flex-wrap: nowrap;
}

/* ---------- Logo (184.652 x 48) ---------- */
.site-header .navbar-brand {
	flex-shrink: 0;
	padding: 0;
	margin-right: 0;
	line-height: 0;
}

.site-header .navbar-brand img {
	display: block;
	width: 184.652px;
	height: 48px;
	object-fit: contain;
}

.site-header .navbar-brand-text {
	font-weight: 800;
	font-size: 24px;
	line-height: 48px;
	letter-spacing: -0.02em;
	color: var(--color-white);
	text-transform: uppercase;
}

/* ---------- Nav links (Inter Regular 18, gap 40) ---------- */
.site-header .navbar-nav {
	gap: 40px;
	align-items: center;
	list-style: none;
	margin-bottom: 0;
	padding-left: 0;
}

.site-header .navbar-nav .nav-item {
	position: relative;
}

.site-header .nav-link {
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 18px;
	color: var(--color-white) !important;
	text-transform: capitalize;
	white-space: nowrap;
	padding: 0 !important;
	line-height: normal;
	transition: opacity 0.2s ease;
}

.site-header .nav-link:hover,
.site-header .nav-link:focus-visible {
	opacity: 0.75;
	outline: none;
}

/* The theme's legacy drop-down styles are not scoped to the header, so the
   caret glyph and the light dropdown shell are switched off here. */
.site-header .menu-item-has-children::after {
	content: none;
	display: none;
}

.site-header .navbar-nav .sub-menu {
	list-style: none;
	margin: 0;
	padding: 12px 0;
	width: auto;
	min-width: 220px;
	position: static;
	background-color: transparent;
	box-shadow: none;
	border-radius: 0;
	overflow: visible;
	opacity: 1;
	visibility: visible;
	transform: none;
}

.site-header .navbar-nav .sub-menu li {
	display: block;
	padding: 0;
}


/* ---------- Header CTA (h 60, pl 28 / pr 8, radius 100) ---------- */
.btn-cta {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	background-color: var(--color-dark-primary);
	color: var(--color-white);
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	font-size: 18px;
	text-transform: capitalize;
	white-space: nowrap;
	text-decoration: none;
	border-radius: 100px;
	padding: 12px 8px 12px 28px;
	height: 60px;
	line-height: normal;
	flex-shrink: 0;
	transition: background-color 0.2s ease;
}

.btn-cta:hover,
.btn-cta:focus-visible {
	color: var(--color-white);
	background-color: #3a1519;
	outline: none;
}

/* Arrow plate: 20px glyph + 12.222 padding = 44.444 */
.cta-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-orange);
	border-radius: 50%;
	padding: 12.222px;
	flex-shrink: 0;
}

.cta-arrow img {
	display: block;
	width: 20px;
	height: 20px;
}

/* ---------- Toggler ---------- */
.site-header .navbar-toggler {
	border-color: rgba(255, 255, 255, 0.5);
	padding: 6px 10px;
	min-width: 44px;
	min-height: 44px;
}

.site-header .navbar-toggler-icon {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255%2C255%2C255%2C0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.site-header .navbar-toggler:focus-visible {
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4);
	outline: none;
}


/* ============================================================
   04. HERO  (node 335:900 / 19:2659 — 1920 x 880)

   Split at 1235/1920. Heading block 1040 wide at x140 / y239,
   content card 483 wide at x1297 / y281.
   ============================================================ */
.hero-section {
	position: relative;
	height: 880px;
	overflow: hidden;
	background: linear-gradient(to right,
			var(--color-dark-primary) 64.3229%,
			var(--color-orange-bg) 64.3229%);
}

.hero-bg-overlay {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	mix-blend-mode: soft-light;
	opacity: 0.6;
	filter: brightness(0.88) contrast(1.44);
	pointer-events: none;
	z-index: 0;
}

/* INVICTUS watermark — 420.037/0.8, clipped by the hero at y880 */
.hero-watermark {
	position: absolute;
	top: 670px;
	left: 50%;
	transform: translateX(-50%);
	font-family: 'Inter', sans-serif;
	font-weight: 700;
/* 	font-size: 420.037px; */
	font-size: 23vw;
	letter-spacing: -25.2022px;
	line-height: 0.8;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 66.058%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
	z-index: 1;
}

.hero-content-wrapper {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	height: 880px;
	padding: 239px var(--gutter-pct) 0;
}

/* ---------- Heading block (1040 x 394) ---------- */
/* 1040/1640 — a share of the wrapper's content box, not a fixed pixel width.
   The gutter is itself 7.2917% per side, so this resolves to 54.17% of the
   viewport and the column always ends at 61.46%, left of the 64.32% panel
   split. A fixed width let the headline cross onto the orange panel as the
   window narrowed. */
.hero-left {
	width: 63.4146%;
	max-width: 1040px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.hero-eyebrow {
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	font-size: 18px;
	color: var(--color-eyebrow);
	letter-spacing: 1.5px;
	line-height: normal;
	text-transform: uppercase;
	margin: 0;
}

.hero-headline {
	font-family: 'Inter', sans-serif;
	font-weight: 800;
	font-size: 98px;
	color: var(--color-cream);
	letter-spacing: -3.92px;
	line-height: 0.9;
	text-transform: uppercase;
	margin: 0;
}

.hero-headline .hero-highlight {
	color: var(--color-eyebrow);
}

/* ---------- Content card (483 x 351, 42px lower than the heading) ---------- */
/* 483/1640 — 25.16% of the viewport, so the card's left edge sits at
   92.7083% - 25.1563% = 67.55%, always right of the 64.32% split. Held at a
   fixed 483px it converged on the split and crossed it at ~1702px, putting the
   card on the dark panel. min-width: 0 lets the share win over min-content. */
.hero-right {
	width: 29.4512%;
	max-width: 483px;
	min-width: 0;
	flex-shrink: 0;
	margin-top: 42px;
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.hero-card-header {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.hero-card-title {
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	font-size: 44px;
	color: var(--color-dark-primary);
	letter-spacing: -2.2px;
	line-height: 1;
	margin: 0;
}

.hero-card-title .title-white {
	color: var(--color-white);
}

.hero-card-body {
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	font-size: 20px;
	line-height: 28px;
	color: rgba(53, 20, 26, 0.78);
	margin: 0;
}

/* Divider row — 1px rules top and bottom, 83px tall */
.hero-card-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 0 17px;
	border-top: 1px solid var(--color-dark-primary);
	border-bottom: 1px solid var(--color-dark-primary);
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.hero-card-cta:hover,
.hero-card-cta:focus-visible {
	opacity: 0.8;
	outline: none;
}

.hero-card-cta-text {
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 22px;
	line-height: 24px;
	color: var(--color-dark-primary);
	text-transform: uppercase;
	max-width: 180px;
}

.hero-card-cta-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-dark-primary);
	border-radius: 50%;
	width: 44px;
	height: 44px;
	min-width: 44px;
	flex-shrink: 0;
}

.hero-card-cta-arrow img {
	display: block;
	width: 24px;
	height: 24px;
}

/* Includes — label column 122 wide (82 + 40 gap) */
.hero-card-includes {
	display: flex;
	gap: 40px;
	align-items: flex-start;
}

.hero-includes-label {
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 16px;
	letter-spacing: 0.45px;
	color: rgba(53, 20, 26, 0.73);
	text-transform: uppercase;
	white-space: nowrap;
	padding-top: 2px;
}

.hero-includes-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.hero-includes-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	font-size: 18px;
	line-height: 22px;
	letter-spacing: 0.36px;
	color: rgba(53, 20, 26, 0.73);
	white-space: nowrap;
	list-style: none;
}

.hero-includes-list li img {
	flex-shrink: 0;
	width: 18.467px;
	height: 20px;
}

/* ---------- Hero responsive ---------- */


/* ============================================================
   05. HERO STRIP  (node 19:2691 — 1920 x 53)
   ============================================================ */
.hero-footer-bar {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 53px;
	padding: 0 var(--page-gutter);
	background-color: var(--color-cream);
}

.hero-footer-bar p {
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	font-size: 14px;
	line-height: normal;
	color: rgba(76, 29, 36, 0.68);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	margin: 0;
	white-space: nowrap;
}

.hfb-center {
	display: flex;
	align-items: center;
	gap: 8px;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	-webkit-appearance: none;
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	font-size: 14px;
	color: rgba(76, 29, 36, 0.68);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	white-space: nowrap;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.hfb-center:hover {
	opacity: 0.75;
}

.hfb-center:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 4px;
}

.hfb-center img {
	display: block;
	width: 20px;
	height: 20px;
}


/* ============================================================
   06. TRUSTED BY  (node 165:448 — 1920 x 212, title at y1053)

   Section box: 120 + title + 28 gap + 140 band + 120 = 452.
   ============================================================ */
.trusted-section {
	display: flex;
	flex-direction: column;
	gap: 28px;
	background-color: var(--color-white);
	padding: 120px 0;
	width: 100%;
	position: relative;
	overflow: hidden;
}

.trusted-title {
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 36px;
	color: var(--color-heading);
	letter-spacing: -0.72px;
	text-transform: uppercase;
	text-align: center;
	margin: 0;
	line-height: normal;
	width: 100%;
}

/* Band is 140 tall; the 94px logo row sits 23px from its top. */
.trusted-marquee-wrapper {
	position: relative;
	width: 100vw;
	left: 50%;
	transform: translateX(-50%);
	height: 140px;
	overflow: hidden;
}

/* Edge fades — 260 x 140 */
.trusted-marquee-wrapper::before,
.trusted-marquee-wrapper::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 260px;
	z-index: 2;
	pointer-events: none;
}

.trusted-marquee-wrapper::before {
	left: 0;
	background: linear-gradient(to right, var(--color-white), rgba(255, 255, 255, 0));
}

.trusted-marquee-wrapper::after {
	right: 0;
	background: linear-gradient(to left, var(--color-white), rgba(255, 255, 255, 0));
}

.trusted-track {
	display: flex;
	align-items: flex-start;
	width: max-content;
	height: 100%;
	background-color: var(--color-white);
	animation: trusted-marquee 35s linear infinite;
	will-change: transform;
	gap: 112px;
}

.trusted-track:hover,
.trusted-track.is-paused {
	animation-play-state: paused;
}

@keyframes trusted-marquee {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

.trusted-logo-set {
	display: flex;
	align-items: center;
	gap: 112px;
	padding: 23px 0 0;
	flex-shrink: 0;
}

/* Figma applies luminosity + 80% opacity to the whole logo row. */
.tl-item {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	mix-blend-mode: luminosity;
	opacity: 0.8;
	transition: opacity 0.35s ease, filter 0.35s ease;
	cursor: default;
}

.tl-item:hover {
	mix-blend-mode: normal;
	opacity: 1;
}

.tl-item img {
	display: block;
	width: auto;
	height: auto;
	max-width: none;
	max-height: 94px;
}

/* Icon + wordmark beside it — Roovio (icon 39.835 x 53.154, gap 10.516) */
.tl-inline {
	display: flex;
	align-items: center;
	gap: 10.516px;
}

.tl-inline img {
	max-height: 53.154px;
}

.tl-inline-label {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 35.053px;
	line-height: 38.047px;
	color: var(--color-dark);
	white-space: nowrap;
	text-align: center;
}

/* Icon + wordmark underneath — ROOF360 (lockup 108.454 x 94) */
.tl-stacked {
	position: relative;
	width: 108.454px;
	height: 94px;
	flex-shrink: 0;
}

.tl-stacked img {
	position: absolute;
	left: 15.21px;
	top: 0;
	max-height: 63.967px;
}

.tl-stacked-label {
	position: absolute;
	left: 0;
	top: 68px;
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: 23.359px;
	line-height: normal;
	color: #2e2e2e;
	white-space: nowrap;
}


/* ============================================================
   07. SHARED UTILITIES
   ============================================================ */

/* Section eyebrow — Inter SemiBold 20 / +1.5 tracking / uppercase */
.section-eyebrow {
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 20px;
	color: var(--color-primary);
	letter-spacing: 1.5px;
	text-transform: uppercase;
	margin: 0;
	line-height: normal;
}

/* Orange arrow link — Inter SemiBold 18 / uppercase / 8px gap / 26px icon */
.arrow-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 18px;
	line-height: normal;
	color: var(--color-primary);
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: opacity 0.2s ease;
}

.arrow-link:hover,
.arrow-link:focus-visible {
	opacity: 0.75;
	color: var(--color-primary);
	outline: none;
}

.arrow-link img {
	display: block;
	flex-shrink: 0;
	width: 26px;
	height: 26px;
}

.color-orange {
	color: var(--color-primary);
}


/* ============================================================
   08. WHERE ARE YOU STUCK  (node 335:904 — 1920 x 1263)

   100 pad-top / heading 188 / 48 gap / cards 586 / 341 pad-bottom.
   The reframe banner overlaps the last 198px of this section.
   ============================================================ */
.stuck-section {
	position: relative;
	background-color: var(--color-cream);
	padding: 100px 0 341px;
	overflow: hidden;
}

/* Line-art texture across the top of the section (node 193:7791) */
.stuck-texture {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 702px;
	pointer-events: none;
	z-index: 0;
}

.stuck-texture img {
	display: block;
	width: 100%;
	height: 100%;
	/* The line texture is authored at the 1920 frame width. Stretching it to
	   fit squashed the lines by up to 80% on a phone; cover keeps their
	   spacing and crops instead. No effect at 1920, where box == natural. */
	object-fit: cover;
	object-position: center top;
}

.stuck-header,
.stuck-cards {
	position: relative;
	z-index: 1;
}

.stuck-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	text-align: center;
	max-width: 1640px;
	margin: 0 auto;
	padding: 0 var(--page-gutter);
}

.stuck-title {
	font-family: 'Inter', sans-serif;
	font-weight: 800;
	font-size: 72px;
	color: var(--color-heading);
	letter-spacing: -2.88px;
	line-height: 1;
	text-transform: uppercase;
	max-width: 709px;
	margin: 0;
}

/* Card row lives inside the 1640 container (not full bleed). */
.stuck-cards {
	display: flex;
	align-items: stretch;
	max-width: 1640px;
	margin: 48px auto 0;
	border-top: 1px solid var(--color-card-border);
	border-bottom: 1px solid var(--color-card-border);
}

.stuck-card {
	flex: 1 0 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 28px;
	padding: 28px 36px;
	border-left: 1px solid var(--color-card-border);
	min-width: 0;
}

.stuck-card:last-child {
	border-right: 1px solid var(--color-card-border);
}

/* Image frame 468 x 342; the artwork is scaled to 103.2% / 94.13% inside it. */
.stuck-card-img {
	position: relative;
	width: 468px;
	max-width: 100%;
	aspect-ratio: 468 / 342;
	overflow: hidden;
	flex-shrink: 0;
}

.stuck-card-img img {
	position: absolute;
	left: -1.42%;
	top: 2.93%;
	width: 103.2%;
	height: 94.13%;
	max-width: none;
	object-fit: cover;
}

.stuck-card-body {
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: flex-start;
	width: 100%;
	flex: 1;
}

.stuck-card-text {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
}

.stuck-card-title {
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 36px;
	color: var(--color-heading);
	letter-spacing: -1.44px;
	line-height: normal;
	margin: 0;
}

/* Figma reserves two lines of description on every card. */
.stuck-card-desc {
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 18px;
	color: var(--color-body-text);
	line-height: 26px;
	min-height: 52px;
	margin: 0;
}

.stuck-card-body .arrow-link {
	margin-top: auto;
}


/* ============================================================
   09. THE REFRAME  (node 45:5397 — 1640 x 376 at x140 / y2450)

   Pulled up 198px so it straddles the section above. The side
   image is 546 x 503 and deliberately overflows top and bottom.
   ============================================================ */
.reframe-section {
	position: relative;
	z-index: 2;
	max-width: 1640px;
	height: 376px;
	margin: -198px auto 0;
	background-color: var(--color-dark-primary);
}

.reframe-bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}

.reframe-bg img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: fill;
	opacity: 0.5;
}

/* Text block — 60px in from the card edge, vertically centred */
.reframe-content {
	position: absolute;
	left: 60px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 705px;
}

.reframe-section .section-eyebrow {
	font-weight: 500;
	font-size: 18px;
}

.reframe-title {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 54px;
	letter-spacing: -2.16px;
	line-height: 52.992px;
	text-transform: uppercase;
	margin: 0;
	width: 705px;
	max-width: 100%;
}

.reframe-title-cream {
	color: var(--color-cream);
	display: block;
}

.reframe-title-orange {
	color: var(--color-reframe-orange);
	display: block;
}

/* 546 x 503, centred on the band, overflowing it */
.reframe-image {
	position: absolute;
	left: 62.36%;
	right: 4.38%;
	top: calc(50% + 0.5px);
	transform: translateY(-50%);
	aspect-ratio: 546 / 503;
	z-index: 1;
	pointer-events: none;
}

.reframe-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: fill;
}


/* ============================================================
   10. THE FUNDAMENTALS  (node 335:905 — 1520 x 1196 at x200 / y2946)

   heading 188 / 196 gap / feature row 415 / 151 gap / closing 246.
   The phone is 501.632 wide, clipped to 762.558 and faded out at
   the bottom so the closing statement can sit over it.
   ============================================================ */
.anatomy-section {
	position: relative;
	width: 100%;
	background-color: var(--color-white);
	margin-top: var(--section-gap);
	padding: 0 200px;
	overflow: hidden;
}

.anatomy-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	text-align: center;
}

.anatomy-title {
	font-family: 'Inter', sans-serif;
	font-weight: 800;
	font-size: 72px;
	color: var(--color-heading);
	letter-spacing: -2.88px;
	line-height: 1;
	text-transform: uppercase;
	margin: 0;
	width: 824px;
	max-width: 100%;
}

/* Feature row: two 408/421 columns either side of the phone */
.anatomy-grid {
	position: relative;
	margin-top: 196px;
	height: 415px;
}

.anatomy-col {
	position: absolute;
	top: 0;
	display: flex;
	flex-direction: column;
	gap: 67px;
}

.anatomy-col--left {
	left: 0;
	width: 408px;
}

.anatomy-col--right {
	right: 0;
	width: 421px;
}

.anatomy-feature {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.anatomy-feature--r {
	align-items: flex-end;
	text-align: right;
}

/* Icon lockup: 56px plate with a 51.692px glyph offset 13.13px right */
.anatomy-icon {
	position: relative;
	width: 64.821px;
	height: 56px;
	flex-shrink: 0;
}

.anatomy-icon--plain {
	width: max-content;
}

.anatomy-icon--plain img {
	display: block;
	width: auto;
	height: 56px;
}

.anatomy-icon-bg {
	position: absolute;
	left: 0;
	top: 0;
	width: 56px;
	height: 56px;
	display: block;
}

.anatomy-icon-symbol {
	position: absolute;
	left: 13.13px;
	top: 1.08px;
	width: 51.692px;
	height: 51.692px;
	display: block;
	object-fit: contain;
}

.anatomy-feature--r .anatomy-icon {
	align-self: flex-end;
	width: 64.462px;
}

.anatomy-feature--r .anatomy-icon--plain {
	width: max-content;
	justify-content: flex-end;
}

.anatomy-feature--r .anatomy-icon-bg {
	left: auto;
	right: 0;
}

.anatomy-feature--r .anatomy-icon-symbol {
	left: 12.77px;
}

.anatomy-feat-text {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
}

.anatomy-feat-title {
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 28px;
	color: var(--color-heading);
	letter-spacing: -1.12px;
	line-height: normal;
	margin: 0;
}

.anatomy-feat-body {
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 18px;
	color: var(--color-body-text);
	line-height: 26px;
	margin: 0;
}

/* Phone: a single transparent mockup (1693 x 2560) with a white fade over its
   lower half. It replaces the earlier pair of stacked layers, so there is no
   back plate and nothing to crop — the box takes the image's own ratio, which
   puts its height at 758.6px against the 762.558px the two layers occupied. */
.anatomy-phone {
	position: absolute;
	left: 33.5316%;
	top: -96.3px;
	width: 501.632px;
	aspect-ratio: 1693 / 2560;
	pointer-events: none;
}

.anatomy-phone-img {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
}

/* White fade over the lower half of the phone stack (node 90:1039) */
.anatomy-phone-fade {
	position: absolute;
	left: 32.9046%;
	top: 247.43px;
	width: 520.888px;
	height: 425.569px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, var(--color-white) 80%);
	pointer-events: none;
}

/* Closing statement — 1087 wide, centred, sits above the phone fade */
.anatomy-cta {
	position: relative;
	z-index: 1;
	margin: 151px auto 0;
	width: 1087px;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 48px;
	padding-bottom: 0;
}

.anatomy-cta-text {
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 56px;
	color: var(--color-heading);
	letter-spacing: -2.24px;
	line-height: 1.2;
	text-align: center;
	margin: 0;
	width: 100%;
}

.anatomy-cta-text .anatomy-cta-accent {
	color: var(--color-primary);
	font-style: italic;
}

.btn-anatomy {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	background-color: var(--color-dark-primary);
	color: var(--color-white);
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	font-size: 18px;
	line-height: normal;
	text-transform: capitalize;
	padding: 12px 8px 12px 28px;
	height: 64px;
	border-radius: 100px;
	border: 0;
	text-decoration: none;
	white-space: nowrap;
	transition: opacity 0.2s ease;
	flex-shrink: 0;
}

.btn-anatomy:hover,
.btn-anatomy:focus-visible {
	opacity: 0.85;
	color: var(--color-white);
	outline: none;
}

.btn-anatomy .cta-arrow {
	background-color: var(--color-orange);
	padding: 13.333px;
}

.btn-anatomy .cta-arrow img {
	width: 20px;
	height: 20px;
}

/* ---------- Fundamentals responsive ---------- */


/* ============================================================
   11. THE SYSTEM  (node 129:419 — 1920 x 953 at y4262)

   Intro top-left, pull quote BOTTOM-right (x1168 / y709).
   The curve, dots, step numbers and step text all live in one
   aspect-locked box so the dots stay on the curve at any width.
   ============================================================ */
.plan-section {
	position: relative;
	width: 100%;
	height: 953px;
	margin-top: var(--section-gap);
	background-color: var(--color-dark-primary);
	overflow: hidden;
}

/* The colour has to live on this layer, not the section, so the soft-light
   child has a backdrop to blend against inside the same stacking context. */
.plan-bg-overlay {
	position: absolute;
	inset: 0;
	background-color: var(--color-dark-primary);
	pointer-events: none;
	z-index: 0;
}

/* The licensed Shutterstock texture Figma composites cannot be exported (the
   API returns a placeholder), so the design-folder copy stands in for it. CSS
   soft-light also differs from Figma's, which left the shadows too light. The
   filter below corrects the stand-in so the composite matches the Figma render;
   blend mode and 60% opacity are Figma's own values. */
.plan-bg-overlay img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	mix-blend-mode: soft-light;
	opacity: 0.6;
	filter: brightness(0.88) contrast(1.44);
}

/* Intro — x140 / y100, 709 wide */
.plan-intro {
	position: absolute;
	left: var(--gutter-pct);
	top: 10.4932%;
	width: 709px;
	max-width: 42%;
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.plan-eyebrow {
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	font-size: 20px;
	color: #f0b49a;
	letter-spacing: 1.5px;
	line-height: normal;
	text-transform: uppercase;
	margin: 0;
}

.plan-title {
	font-family: 'Inter', sans-serif;
	font-weight: 800;
	font-size: 76px;
	color: var(--color-cream);
	letter-spacing: -3.04px;
	line-height: 1;
	text-transform: uppercase;
	margin: 0;
}

.plan-subtitle {
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 24px;
	color: rgba(255, 255, 255, 0.8);
	line-height: normal;
	margin: 0;
}

/* Pull quote — bottom right, 612 wide, 40px Inter Bold */
.plan-quote {
	position: absolute;
	left: 60.8333%;
	top: 74.3967%;
	width: 612px;
	max-width: 34%;
	z-index: 3;
	margin: 0;
	padding: 0;
	border: none;
}

.plan-quote p {
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 40px;
	color: var(--color-primary);
	letter-spacing: -1.6px;
	line-height: 1.2;
	margin: 0;
}

.plan-quote p em {
	color: var(--color-white);
	font-style: italic;
}

/* Aspect-locked timeline box: matches the curve's 1645.345 x 459.273 */
.plan-timeline {
	position: absolute;
	left: 7.2516%;
	top: 13.7881%;
	width: 85.6951%;
	aspect-ratio: 1645.345 / 459.273;
	pointer-events: none;
	z-index: 1;
}

.plan-curve-wrap {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.plan-curve-inner {
	position: relative;
	width: 99.3837%;
	aspect-ratio: 1635.205 / 417.611;
	transform: rotate(1.46deg);
}

.plan-curve-inner .plan-curve {
	position: absolute;
	left: -1.59%;
	top: -0.67%;
	width: 103.18%;
	height: 112.43%;
	max-width: none;
	display: block;
}

/* Dots — 48px plate, 20.571px core */
.plan-dot {
	position: absolute;
	width: 48px;
	height: 48px;
	background: var(--color-white);
	border-radius: 50%;
	box-shadow: 0px 3.652px 32.865px 0px rgba(0, 0, 0, 0.15);
	display: flex;
	align-items: center;
	justify-content: center;
	transform: translate(-50%, -50%);
	pointer-events: all;
	z-index: 2;
}

.plan-dot::after {
	content: '';
	width: 20.571px;
	height: 20.571px;
	background: var(--color-primary);
	border-radius: 50%;
	display: block;
}

/* Dot centres as a share of the timeline box */
.plan-step-1 .plan-dot {
	left: 1.749%;
	top: 89.40%;
}

.plan-step-2 .plan-dot {
	left: 21.50%;
	top: 83.31%;
}

.plan-step-3 .plan-dot {
	left: 42.77%;
	top: 61.97%;
}

.plan-step-4 .plan-dot {
	left: 64.96%;
	top: 53.26%;
}

.plan-step-5 .plan-dot {
	left: 81.73%;
	top: 19.73%;
}

/* A grouping element only — the dot, numeral and copy are each placed
   against .plan-timeline, so the step itself adds no box on desktop. */
.plan-step {
	display: contents;
}

/* Step copy — 221 wide (228 on the last step) */
.plan-step-text {
	position: absolute;
	width: 221px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	pointer-events: all;
	z-index: 3;
}

.plan-step-1 .plan-step-text {
	left: 4.598%;
	top: 114.86%;
}

.plan-step-2 .plan-step-text {
	left: 25.62%;
	top: 96.15%;
}

.plan-step-3 .plan-step-text {
	left: 46.89%;
	top: 76.77%;
}

.plan-step-4 .plan-step-text {
	left: 68.83%;
	top: 61.31%;
}

.plan-step-5 .plan-step-text {
	left: 85.86%;
	top: 32.53%;
	width: 228px;
}

.plan-step-title {
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 28px;
	color: var(--color-cream);
	letter-spacing: -1.12px;
	line-height: normal;
	margin: 0;
}

.plan-step-desc {
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 16px;
	color: rgba(255, 255, 255, 0.8);
	line-height: 24px;
	margin: 0;
}

/* Step numerals — 170.956px, gradient, 30% opacity, cap-height box.
   line-height 124px trims the box to the cap height, matching Figma. */
.plan-num {
	/* line-height is the cap height, which trims the box to match Figma's
	   text-box-trim. Round digits (2, 3, 5) overshoot the cap line, and
	   background-clip: text is clipped to the border box, so that overshoot
	   was left unpainted. The box is extended upward by --num-overshoot and
	   the gradient's ramp is pinned to the cap line, so the glyphs are fully
	   painted while the fade stays exactly as designed. */
	--num-overshoot: 0.04em;
	--num-cap: 0.7254em;

	position: absolute;
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 170.956px;
	line-height: 124px;
	letter-spacing: -3.4191px;
	padding-top: var(--num-overshoot);
	margin-top: calc(-1 * var(--num-overshoot));
	background-image: linear-gradient(to bottom,
			var(--color-primary) 0,
			var(--color-primary) var(--num-overshoot),
			rgba(238, 126, 56, 0) calc(var(--num-overshoot) + var(--num-cap)));
	background-repeat: no-repeat;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	opacity: 0.3;
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
	z-index: 2;
}

.plan-num-1 {
	left: -0.32%;
	top: 115.75%;
}

.plan-num-2 {
	left: 20.04%;
	top: 97.04%;
}

.plan-num-3 {
	left: 41.31%;
	top: 77.67%;
}

.plan-num-4 {
	left: 63.25%;
	top: 62.20%;
}

.plan-num-5 {
	left: 80.27%;
	top: 33.42%;
}

/* ---------- System responsive ---------- */

/* Below the timeline breakpoint the same markup becomes a plain list:
   the curve and dots drop out and each step stacks as numeral + copy. */


/* ============================================================
   12. SEE IT WORK  (node 193:7297 — 1920 x 999 at y5215)
   ============================================================ */
.case-section {
	width: 100%;
	background-color: var(--color-cream);
	padding: 100px var(--page-gutter) 172px;
}

.case-inner {
	max-width: 1640px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 68px;
}

/* A flex item sizes to its content, so without this cap the 1070px title
   below would size the header and its own max-width: 100% would resolve
   against itself — leaving the heading wider than the viewport. */
.case-header {
	display: flex;
	flex-direction: column;
	gap: 20px;
	text-align: center;
	max-width: 100%;
}

.case-title {
	font-family: 'Inter', sans-serif;
	font-weight: 800;
	font-size: 72px;
	color: var(--color-heading);
	letter-spacing: -2.88px;
	line-height: 1;
	text-transform: uppercase;
	margin: 0;
	width: 1070px;
	max-width: 100%;
}

/* Feature card — 24px padding, 40px gap, media 528 x 423 */
.case-card {
	position: relative;
	background: var(--color-white);
	display: flex;
	align-items: center;
	gap: 40px;
	padding: 24px;
	overflow: hidden;
	width: 100%;
}

.case-card-media {
	flex-shrink: 0;
	width: 528px;
	aspect-ratio: 528 / 423;
	overflow: hidden;
}

.case-card-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.case-card-content {
	flex: 1 0 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 30px;
}

.case-card-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	width: 100%;
}

.case-card-title {
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 40px;
	color: var(--color-dark-primary);
	letter-spacing: -1.6px;
	line-height: normal;
	margin: 0;
}

.case-card-body {
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 20px;
	color: #76545a;
	line-height: 1.4;
	margin: 0;
}

/* Stats — 220 / 170 / 170 with a 32px gap and 1.066px dividers */
.case-stats {
	display: flex;
	align-items: center;
	gap: 32px;
	height: 105px;
}

.case-stat {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	height: 100%;
	width: 170px;
	flex-shrink: 0;
}

.case-stat:first-child {
	width: 220px;
}

.case-stat--divider {
	border-right: 1.066px solid rgba(76, 29, 36, 0.3);
	padding-right: 1.066px;
}

.case-stat-num {
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 32px;
	color: var(--color-dark-primary);
	letter-spacing: -1.28px;
	line-height: normal;
	white-space: nowrap;
}

.case-stat-label {
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	font-size: 18px;
	color: var(--color-body-text);
	line-height: 28px;
	white-space: nowrap;
}

/* Client logo — 199.591 wide at 28.41 / 28.84 from the card corner */
.case-logo-overlay {
	position: absolute;
	top: 28.84px;
	right: 28.41px;
	pointer-events: none;
}

.case-logo-overlay img {
	display: block;
	width: 199.591px;
	height: auto;
}

/* ---------- See it work responsive ---------- */


/* ============================================================
   13. SITE FOOTER  (node 193:7428 — 1920 x 800 at y6152)

   The dark plate starts 62px down (7.75%); the orange call-to-action
   card is 948 x 438 pinned to the top right, so it overlaps the
   cream section above. Pulled up 62px to sit at y6152.
   ============================================================ */
.site-footer {
	position: relative;
	width: 100%;
	height: 800px;
	margin-top: -62px;
	overflow: hidden;
	background-color: transparent;
	clear: both;
}

.footer-dark-bg {
	position: absolute;
	inset: 7.75% 0 0 0;
	background-color: var(--color-dark-primary);
	pointer-events: none;
	z-index: 0;
}

.footer-dark-bg img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	mix-blend-mode: soft-light;
	opacity: 0.6;
	filter: brightness(0.88) contrast(1.44);
}

/* Watermark — 420.037/0.8, gradient stops at 78.75% */
.footer-watermark {
	position: absolute;
	top: 66.5%;
	left: 50%;
	transform: translateX(-50%);
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 420.037px;
	line-height: 0.8;
	letter-spacing: -25.2022px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 78.75%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
	z-index: 1;
}

/* Info column — x140 / y134, 553 wide */
.footer-info-col {
	position: absolute;
	left: var(--gutter-pct);
	top: 16.75%;
	width: 553px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.footer-info-top {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.footer-logo-link {
	display: inline-block;
	line-height: 0;
	align-self: flex-start;
}

.footer-logo {
	display: block;
	width: 226.969px;
	max-width: 100%;
	height: auto;
}

.footer-tagline {
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 20px;
	color: rgba(255, 255, 255, 0.8);
	line-height: 28px;
	margin: 0;
}

.footer-social {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 12px;
}

.footer-social-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background-color: var(--color-social-bg);
	text-decoration: none;
	flex-shrink: 0;
	transition: background-color 0.2s ease;
}

/* Hover changes the plate only — the glyph keeps its own colour. */
.footer-social-btn:hover,
.footer-social-btn:focus-visible {
	background-color: var(--color-primary);
	outline: none;
}

/* Glyph sits 13px in on all sides of the 48px plate (Figma: 22 x 22). */
.footer-social-btn .social-icon {
	display: block;
	width: 22px;
	height: 22px;
	object-fit: contain;
}

/* Call-to-action card — 948 x 438 pinned top right, 48px padding */
.footer-cta-panel {
	position: absolute;
	top: 0;
	left: 43.3125%;
	right: 7.3438%;
	height: 438px;
	background-color: var(--color-primary);
	padding: 48px;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 44px;
}

.footer-cta-text {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
	color: var(--color-dark-primary);
}

.footer-cta-eyebrow {
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 20px;
	color: var(--color-dark-primary);
	letter-spacing: 1.5px;
	line-height: normal;
	text-transform: uppercase;
	margin: 0;
}

.footer-cta-title {
	font-family: 'Inter', sans-serif;
	font-weight: 800;
	font-size: 72px;
	color: var(--color-dark-primary);
	letter-spacing: -2.88px;
	line-height: 1;
	text-transform: uppercase;
	margin: 0;
}

.footer-cta-white {
	color: var(--color-white);
}

.footer-cta-body {
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 20px;
	color: var(--color-dark-primary);
	line-height: 26px;
	margin: 0;
}

.btn-footer-cta {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	background-color: #390203;
	color: var(--color-white);
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	font-size: 18px;
	line-height: normal;
	text-transform: capitalize;
	padding: 12px 8px 12px 28px;
	height: 64px;
	border-radius: 100px;
	border: 0;
	text-decoration: none;
	white-space: nowrap;
	transition: opacity 0.2s ease;
	align-self: flex-start;
	flex-shrink: 0;
}

.btn-footer-cta:hover,
.btn-footer-cta:focus-visible {
	opacity: 0.85;
	color: var(--color-white);
	outline: none;
}

.footer-cta-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-orange);
	border-radius: 50%;
	padding: 13.333px;
	flex-shrink: 0;
}

.footer-cta-icon img {
	display: block;
	width: 21.333px;
	height: 21.333px;
}

/* Bottom row — x140 / y478, no divider rule */
.footer-bottom-bar {
	position: absolute;
	left: var(--gutter-pct);
	right: 7.3438%;
	top: 59.75%;
	z-index: 2;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

.footer-copyright {
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.7);
	margin: 0;
	white-space: nowrap;
}

/* Sits inside the copyright sentence, so it inherits its colour and only
   brightens on hover — the resting appearance is unchanged. */
.footer-copyright-link {
	color: var(--color-orange);
	text-decoration: none;
	transition: color 0.2s ease;
	font-weight: bold;
}

.footer-copyright-link:hover,
.footer-copyright-link:focus-visible {
	color: var(--color-orange);
	outline: none;
}

.footer-legal-list {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-legal-list li {
	list-style: none;
}

.footer-legal-list a {
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	font-size: 18px;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.footer-legal-list a:hover,
.footer-legal-list a:focus-visible {
	color: var(--color-white);
	outline: none;
}

/* ---------- Footer responsive ---------- */


/* Below the desktop composition the footer becomes a simple stack. */


/* ============================================================
   14. MOTION

   Layout-neutral only: every rule here animates `opacity` and
   `transform`, so nothing reflows and the Figma geometry is
   untouched. Scroll reveals are gated on the `invictus-anim`
   class, which JS adds to <html> only when IntersectionObserver
   is available and the visitor has not asked for reduced motion —
   without JS the page renders fully visible.
   ============================================================ */

:root {
	--ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
	--reveal-duration: 0.7s;
	--reveal-shift: 24px;
}

/* ---------- Smooth scrolling between sections/anchors ---------- */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* ---------- Arrow plates ----------
   The glyph is drawn on the 45° axis inside the SVG, so it travels
   along that same axis: out through the top-right, then back in from
   the bottom-left. The round plate clips it, so the return reads as a
   continuous loop rather than a jump. */
.cta-arrow,
.hero-card-cta-arrow {
	overflow: hidden;
}

.cta-arrow img,
.hero-card-cta-arrow img {
	transition: transform 0.35s var(--ease-out-quint);
	will-change: transform;
}

.btn-cta:hover .cta-arrow img,
.btn-cta:focus-visible .cta-arrow img,
.btn-anatomy:hover .cta-arrow img,
.btn-anatomy:focus-visible .cta-arrow img,
.hero-card-cta:hover .hero-card-cta-arrow img,
.hero-card-cta:focus-visible .hero-card-cta-arrow img {
	animation: invictus-arrow-travel 0.55s var(--ease-out-quint);
}

@keyframes invictus-arrow-travel {
	0% {
		transform: translate3d(0, 0, 0);
	}

	45% {
		transform: translate3d(160%, -160%, 0);
	}

	46% {
		transform: translate3d(-160%, 160%, 0);
	}

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

/* Text arrow links have no plate to clip against, so they get a nudge
   along the same axis instead of the full loop. */
.arrow-link img {
	transition: transform 0.3s var(--ease-out-quint);
}

.arrow-link:hover img,
.arrow-link:focus-visible img {
	transform: translate3d(3px, -3px, 0);
}

/* ---------- Tasteful hover accents ---------- */
.stuck-card-img img {
	transition: transform 0.6s var(--ease-out-quint);
}

.stuck-card:hover .stuck-card-img img {
	transform: scale(1.025);
}

.footer-cta-icon,
.footer-social-btn .social-icon {
	transition: transform 0.3s var(--ease-out-quint);
}

.btn-footer-cta:hover .footer-cta-icon {
	transform: scale(1.06);
}

.footer-social-btn:hover .social-icon {
	transform: translate3d(0, -2px, 0);
}

.footer-logo-link,
.site-header .navbar-brand {
	transition: opacity 0.25s var(--ease-out-quint);
}

.footer-logo-link:hover,
.site-header .navbar-brand:hover {
	opacity: 0.85;
}

/* ---------- Scroll reveals ----------
   Two flavours: `invictus-reveal` shifts and fades in-flow blocks;
   `invictus-fade` only fades, for anything that already relies on a
   transform (centred blocks) so its positioning is never overwritten. */
.invictus-anim .invictus-reveal {
	opacity: 0;
	transform: translate3d(0, var(--reveal-shift), 0);
	transition:
		opacity var(--reveal-duration) var(--ease-out-quint),
		transform var(--reveal-duration) var(--ease-out-quint);
	transition-delay: var(--reveal-delay, 0ms);
}

.invictus-anim .invictus-reveal.is-revealed {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

.invictus-anim .invictus-fade {
	opacity: 0;
	transition: opacity var(--reveal-duration) var(--ease-out-quint);
	transition-delay: var(--reveal-delay, 0ms);
}

.invictus-anim .invictus-fade.is-revealed {
	opacity: 1;
}

/* Shorter travel on small screens so nothing feels sluggish. */


/* ============================================================
   15. REDUCED MOTION
   ============================================================ */
/* Printing never scrolls, so the reveal state must not hide anything.
   Paired with the beforeprint handler for browsers that fire it. */
@media print {

	.invictus-reveal,
	.invictus-fade {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.trusted-track {
		animation: none;
	}

	.cta-arrow img,
	.hero-card-cta-arrow img,
	.arrow-link img,
	.stuck-card-img img,
	.footer-cta-icon,
	.footer-social-btn .social-icon {
		transition: none;
		animation: none;
	}

	.btn-cta:hover .cta-arrow img,
	.btn-anatomy:hover .cta-arrow img,
	.hero-card-cta:hover .hero-card-cta-arrow img,
	.arrow-link:hover img,
	.stuck-card:hover .stuck-card-img img,
	.btn-footer-cta:hover .footer-cta-icon,
	.footer-social-btn:hover .social-icon {
		transform: none;
		animation: none;
	}

	/* The reveal classes are never applied under reduced motion, but
	   guard anyway so content can never be left hidden. */
	.invictus-reveal,
	.invictus-fade {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}