/*!
Theme Name: Obitski Child
Theme URI: http://underscores.me/
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: #141414;
}

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: #141414;
}

.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 */

.ob-figure__still__mob {
	/*     display: none; */
}

span.copy-right-section {
	font-size: 16px
}

a.copy-right-section__email:hover {
    font-weight: 600;
}








@media (min-width: 1200px) {
	.container {
		max-width: 1170px !important;
	}
}


@media (min-width: 1250px) {
	.container {
		max-width: 1240px !important;
	}
}



@media (max-width: 767px) {

	.mm,
	#mm {
		display: block;
	}

	#primary-menu {
		display: none;
	}
}

/* =========================================================================
   OBITSKI FRONT PAGE (typewriter prototype)
   Scoped to body.obitski-front / .ob-app so the rest of the site is untouched.
   ========================================================================= */

/* Front page shell
   ------------------------------------------------------------------ */
/* The shell is exactly one viewport tall, and the footer is the last thing in
   it — so the unit has to be the height actually on screen. 100vh on iOS and
   iPadOS means the viewport with the browser bars retracted, which puts the
   footer underneath the address bar and the tab strip.

   Three declarations, weakest first, because a browser drops the ones it
   cannot parse and keeps the last it can:

     100vh                      last resort
     calc(var(--ob-vh) * 100)   measured by js/custom.js — covers Safari
                                before 16.4, which has no dvh
     100dvh                     preferred wherever it is understood

   Every rule that sizes the shell repeats all three. */
body.obitski-front {
	margin: 0;
	padding: 0;
	background: #F7F5EF;
	overflow: hidden;
	height: 100vh;
	height: calc(var(--ob-vh, 1vh) * 100);
	height: 100dvh;
}

body.obitski-front .mm,
body.obitski-front #masthead,
body.obitski-front #colophon,
body.obitski-front .skip-link,
body.obitski-front>.modal,
body.obitski-front #page>.modal {
	display: none !important;
}

body.obitski-front #page {
	height: 100vh;
	height: calc(var(--ob-vh, 1vh) * 100);
	height: 100dvh;
	overflow: hidden;
}

body.obitski-front.admin-bar,
body.obitski-front.admin-bar #page {
	height: calc(100vh - 32px);
	height: calc(var(--ob-vh, 1vh) * 100 - 32px);
	height: calc(100dvh - 32px);
}

@media screen and (max-width: 782px) {

	body.obitski-front.admin-bar,
	body.obitski-front.admin-bar #page {
		height: calc(100vh - 46px);
		height: calc(var(--ob-vh, 1vh) * 100 - 46px);
		height: calc(100dvh - 46px);
	}
}

.ob-app,
.ob-app *,
.ob-app *::before,
.ob-app *::after {
	box-sizing: border-box;
}

/* --ob-char is the height every slide's character is drawn at. One value per
   breakpoint, declared here and nowhere else, so Home, Who I Am, Who I Help,
   the form and the confirmation all render the mark at the same size — and
   only the height is ever set, so each image keeps its own aspect ratio.
   The mobile value is the base; the tablet/desktop one is in the >=768px
   block. --ob-char-desktop and --ob-char-form are kept as aliases because
   the breakpoint blocks below refer to them by name. */
.ob-app {
	--ob-char: 175px;
	--ob-char-desktop: var(--ob-char);
	--ob-char-form: var(--ob-char);
	height: 100%;
	max-height: 100%;
	display: flex;
	flex-direction: column;
	background: #F7F5EF url('images/cemetery-bg.png') no-repeat bottom center / cover;
	color: #141414;
	overflow: hidden;
	-webkit-font-smoothing: antialiased;
	/* The prototype inherits the browser default; the theme/Bootstrap reset would force 1.5. */
	line-height: normal;
}

.ob-app [hidden] {
	display: none !important;
}

.ob-app a {
	color: #141414;
	text-decoration: none;
	/* border-bottom: 1px solid #D8D5CC; */
}

.ob-app a:hover {
	color: #4A4A4A;
	border-bottom-color: #4A4A4A;
}

.ob-app ::placeholder {
	color: #9A968C;
}

/* Keyframes
   ------------------------------------------------------------------ */
@keyframes obFadeUp {
	from {
		opacity: 0;
		transform: translateY(14px)
	}

	to {
		opacity: 1;
		transform: none
	}
}

@keyframes obFade {
	from {
		opacity: 0
	}

	to {
		opacity: 1
	}
}

@keyframes obFloat {
	from {
		transform: translateY(-9px)
	}

	to {
		transform: translateY(9px)
	}
}

@keyframes obInR {
	from {
		transform: translateX(102%);
		opacity: .25
	}

	to {
		transform: none;
		opacity: 1
	}
}

@keyframes obInL {
	from {
		transform: translateX(-102%);
		opacity: .25
	}

	to {
		transform: none;
		opacity: 1
	}
}

@keyframes obOutL {
	from {
		transform: none;
		opacity: 1
	}

	to {
		transform: translateX(-102%);
		opacity: .15
	}
}

@keyframes obOutR {
	from {
		transform: none;
		opacity: 1
	}

	to {
		transform: translateX(102%);
		opacity: .15
	}
}

@keyframes obCardInL {
	from {
		opacity: 0;
		transform: translateX(-64px) rotate(-1.8deg)
	}

	to {
		opacity: 1;
		transform: none
	}
}

@keyframes obCardInR {
	from {
		opacity: 0;
		transform: translateX(64px) rotate(1.8deg)
	}

	to {
		opacity: 1;
		transform: none
	}
}

@keyframes obCardInBack {
	from {
		opacity: 0;
		transform: scale(.72) translateY(14px)
	}

	to {
		opacity: 1;
		transform: none
	}
}

@keyframes obSkellyIn {
	0% {
		opacity: 0;
		transform: translateY(26px) scale(.94)
	}

	60% {
		opacity: 1
	}

	100% {
		opacity: 1;
		transform: none
	}
}

@keyframes obWalkX {
	0% {
		opacity: 0;
		transform: translateX(210px)
	}

	12% {
		opacity: 1
	}

	100% {
		opacity: 1;
		transform: translateX(0)
	}
}

/* Header
   ------------------------------------------------------------------ */
.ob-header {
	position: relative;
	z-index: 40;
	background: #F7F5EF;
	border-bottom: 1px solid #D8D5CC;
	flex: 0 0 auto;
}

.ob-header__inner {
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 24px;
	height: 120px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.ob-app .ob-logo {
	display: flex;
	align-items: center;
	border: 0;
}

.ob-logo img {
	display: block;
	height: 105px;
	width: auto;
}

.ob-nav {
	display: flex;
	align-items: center;
	gap: 34px;
}

.ob-app .ob-nav__link {
	position: relative;
	font-family: 'EB Garamond', Georgia, serif;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: .01em;
	color: #2B2B2B;
	border: 0;
	padding: 8px 0;
	transition: color .18s ease, transform .18s ease, text-shadow .18s ease;
}

.ob-app .ob-nav__link:hover {
	color: #141414;
	text-shadow: .4px 0 0 currentColor, -.4px 0 0 currentColor;
	transform: translateY(-1px);
}

.ob-nav__link.is-active .ob-nav__label {
	color: #141414;
	text-shadow: .4px 0 0 currentColor, -.4px 0 0 currentColor;
}

.ob-nav__rule {
	display: none;
}

.ob-nav__link.is-active .ob-nav__rule {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: #141414;
	animation: obFade .3s ease both;
}

.ob-burger {
	display: none;
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 5px;
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: 0;
}

.ob-burger span {
	display: block;
	width: 22px;
	height: 1px;
	background: #141414;
}

.ob-menu {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	background: #F7F5EF;
	border-bottom: 1px solid #D8D5CC;
	animation: obFade .25s ease both;
}

.ob-menu__inner {
	max-width: 1120px;
	margin: 0 auto;
	padding: 12px 24px 28px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.ob-app .ob-menu__link {
	font-family: 'EB Garamond', Georgia, serif;
	font-size: 16px;
	color: #141414;
	border: 0;
	padding: 14px 0;
}

/* Buttons
   ------------------------------------------------------------------ */
.ob-app .ob-btn {
	font-family: 'EB Garamond', Georgia, serif;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: .03em;
	border-radius: 2px;
	padding: 16px 30px;
	cursor: pointer;
	text-transform: none;
	line-height: normal;
	width: auto;
	margin: 0;
	box-shadow: none;
}

.ob-app .ob-btn--solid {
	color: #F7F5EF;
	background: #141414;
	border: 1px solid #141414;
	transition: background .2s ease;
}

.ob-app .ob-btn--solid:hover {
	background: #2B2B2B;
	color: #F7F5EF;
}

.ob-app .ob-btn--ghost {
	color: #141414;
	background: transparent;
	border: 1px solid #141414;
	transition: background .2s ease, color .2s ease;
}

.ob-app .ob-btn--ghost:hover {
	background: #141414;
	color: #F7F5EF;
}

.ob-app .ob-btn--sm {
	padding: 15px 28px;
}

.ob-app .ob-btn--md {
	font-size: 17px;
}

.ob-app .ob-btn--lg {
	font-size: 18px;
	padding: 19px 38px;
	border: 0;
}

.ob-app .ob-nav__cta {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .02em;
	padding: 13px 24px;
	transition: background .18s ease, transform .18s ease;
}

.ob-app .ob-nav__cta:hover {
	background: #2B2B2B;
	transform: translateY(-1px);
}

.ob-app .ob-menu__cta {
	margin-top: 10px;
	align-self: flex-start;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: .02em;
	padding: 15px 26px;
}

/* Stage
   ------------------------------------------------------------------ */
.ob-stage-wrap {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
}

.ob-stage {
	position: absolute;
	inset: 0;
	overflow-y: auto;
	overflow-x: hidden;
	will-change: transform;
}

.ob-screen {
	display: none;
}

.ob-screen.is-active {
	display: flex;
}

/* Typewriter
   Caret geometry and blink come from inc/ai_typing_effect_demo.html
   (Variant B): a 2px bar, 1.1em tall, blinked by toggling opacity every
   500ms from custom.js rather than by a CSS keyframe.
   ------------------------------------------------------------------ */
.ob-caret {
	display: inline-block;
	width: 2px;
	height: 1.1em;
	margin-left: 2px;
	background: #141414;
	vertical-align: -3px;
}

.ob-app.is-caret-off .ob-caret {
	opacity: 0;
}

.ob-caret--soft {
	background: #3A3A3A;
}

.ob-caret--note,
.ob-caret--muted {
	background: #4A4A4A;
}

/* Staged reveals
   ------------------------------------------------------------------ */
.ob-reveal {
	display: none;
}

/* Figures (animated GIF swapped with a still frame while not talking)
   ------------------------------------------------------------------ */
.ob-figure {
	position: relative;
	display: inline-block;
	vertical-align: top;
	height: 100%;
}

.ob-figure__gif {
	display: block;
	height: 100%;
	width: auto;
	opacity: 0;
	object-fit: contain;
}

.ob-figure__still {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: auto;
	opacity: 1;
	object-fit: contain;
}

/* The figure is intentionally static — no keyframes, no transitions and no
   hover movement on it or anything inside it. */
.ob-figure,
.ob-figure *,
.ob-figure:hover,
.ob-figure *:hover {
	animation: none !important;
	transition: none !important;
}

/* Hero
   ------------------------------------------------------------------ */
.ob-screen--hero {
	max-width: 1120px;
	margin: 0 auto;
	padding: clamp(32px, 5vh, 64px) 24px clamp(48px, 8vh, 88px);
	min-height: 100%;
	width: 100%;
	flex-direction: row-reverse;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(32px, 6vw, 88px);
}

.ob-hero__art {
	flex: 1 1 300px;
	max-width: 400px;
	display: flex;
	align-items: center;
}

.ob-hero__float {
	width: 100%;
}

.ob-hero__figure {
	position: relative;
	width: 100%;
	height: var(--ob-char);
	cursor: pointer;
}

.ob-hero__shadow {
	position: absolute;
	left: 10%;
	bottom: -13px;
	width: 34%;
	height: 16px;
	border-radius: 50%;
	background: radial-gradient(50% 50% at 50% 50%, rgba(20, 20, 20, .2) 0%, rgba(20, 20, 20, 0) 72%);
}

.ob-hero__walk {
	position: absolute;
	left: -4%;
	bottom: -48px;
	height: 105%;
	transform-origin: 62% 100%;
}

.ob-hero__copy {
	flex: 1 1 480px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
}

.ob-app .ob-hero__title {
	margin: 0;
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 400;
	font-size: clamp(2.1rem, 5vw, 3.6rem);
	line-height: 1.22;
	color: #141414;
	text-wrap: pretty;
	text-transform: none;
	letter-spacing: normal;
}

.ob-hero__line {
	display: block;
	min-height: 1.22em;
	white-space: nowrap;
}

.ob-app .ob-hero__sub {
	margin: clamp(24px, 3.5vh, 40px) 0 0;
	max-width: 26em;
	min-height: 3.1em;
	font-family: 'EB Garamond', Georgia, serif;
	font-size: clamp(20px, 2.1vw, 27px);
	font-weight: 400;
	line-height: 1.55;
	color: #141414;
	text-wrap: pretty;
}

.ob-hero__ctaslot {
	min-height: 92px;
	width: 100%;
}

.ob-hero__cta.is-shown {
	margin-top: clamp(32px, 5vh, 56px);
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 14px;
	animation: obFadeUp .8s ease both;
}

/* Who I Am
   ------------------------------------------------------------------ */
.ob-screen--who {
	max-width: 1120px;
	margin: 0 auto;
	padding: clamp(32px, 5vh, 64px) 24px clamp(48px, 8vh, 88px);
	min-height: 100%;
	width: 100%;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(32px, 6vw, 88px);
}

.ob-who__art {
	flex: 1 1 300px;
	min-width: 0;
	max-width: 420px;
	display: flex;
	align-items: center;
}

.ob-who__artinner {
	width: 100%;
}

.ob-who__figure {
	position: relative;
	width: 100%;
	height: var(--ob-char);
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-bottom: 10px;
}

.ob-who__rise {
	position: relative;
	height: 108%;
}

.ob-who__copy {
	flex: 1 1 420px;
	display: flex;
	flex-direction: column;
	gap: clamp(14px, 2.4vh, 24px);
}

.ob-app .ob-who__title {
	margin: 0;
	min-height: 1.25em;
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 400;
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	line-height: 1.25;
	color: #141414;
	text-transform: none;
	letter-spacing: normal;
}

.ob-app .ob-who__sub {
	margin: 0;
	min-height: 1.5em;
	max-width: 24em;
	font-family: 'EB Garamond', Georgia, serif;
	font-size: clamp(19px, 2vw, 25px);
	line-height: 1.55;
	color: #141414;
	text-wrap: pretty;
}

.ob-who__list {
	display: flex;
	flex-direction: column;
	gap: clamp(10px, 1.6vh, 18px);
	margin-top: 8px;
}

.ob-app .ob-who__item {
	margin: 0;
	min-height: 1.45em;
	font-family: 'EB Garamond', Georgia, serif;
	font-size: clamp(1.15rem, 2.2vw, 1.6rem);
	line-height: 1.45;
	color: #141414;
}

.ob-who__cta.is-shown {
	margin-top: clamp(20px, 3vh, 36px);
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	animation: obFadeUp .8s ease both;
}

/* Who I Help
   ------------------------------------------------------------------ */
.ob-screen--help {
	max-width: 1040px;
	margin: 0 auto;
	padding: clamp(6px, 1.6vh, 40px) 24px;
	min-height: 100%;
	width: 100%;
	flex-direction: column;
	justify-content: center;
}

.ob-help__art {
	display: flex;
	justify-content: center;
	margin-bottom: clamp(4px, 1vh, 14px);
}

.ob-help__figure {
	position: relative;
	transform: translateX(9px);
}

.ob-figure--help,
.ob-figure--confirm {
	height: auto;
}

/* Was a vh clamp, which made this the one mark that changed size with the
   window — smaller than Home and Who I Am on most screens. It takes the same
   constant as every other slide now. */
.ob-help__char {
	height: var(--ob-char);
}

.ob-app .ob-help__title {
	margin: 0;
	text-align: center;
	min-height: 1.25em;
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 400;
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	line-height: 1.25;
	color: #141414;
	text-transform: none;
	letter-spacing: normal;
}

.ob-app .ob-help__sub {
	margin: clamp(10px, 2.2vh, 26px) auto 0;
	max-width: 34em;
	text-align: center;
	min-height: 1.55em;
	font-family: 'EB Garamond', Georgia, serif;
	font-size: clamp(19px, 2vw, 25px);
	line-height: 1.5;
	color: #141414;
	text-wrap: pretty;
}

/* The cards are revealed one by one, so the row is empty while the heading
   types. Reserving their height keeps the screen's vertical centring honest:
   the mark and the title sit where they will stay, instead of starting low and
   being shoved up when the cards arrive. */
.ob-help__row {
	margin-top: clamp(10px, 2.4vh, 52px);
	min-height: clamp(92px, 13vh, 128px);
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: stretch;
	gap: clamp(16px, 3vw, 36px);
}

.ob-help__cell {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
}

.ob-card.is-shown {
	flex: 1 1 auto;
	width: 100%;
	display: grid;
	grid-template-rows: 24px 2.3em;
	justify-items: center;
	align-content: center;
	text-align: center;
	gap: clamp(6px, 1.2vh, 14px);
	padding: clamp(8px, 1.7vh, 22px) 14px;
	background: #FFFFFF;
	border: 1px solid #E4E1D8;
	border-radius: 3px;
}

.ob-card--left.is-shown {
	animation: obCardInL 1.02s cubic-bezier(.22, .68, .28, 1) both;
}

.ob-card--back.is-shown {
	animation: obCardInBack 1.02s cubic-bezier(.22, .68, .28, 1) both;
}

.ob-card--right.is-shown {
	animation: obCardInR 1.02s cubic-bezier(.22, .68, .28, 1) both;
}

.ob-card__label {
	font-family: 'EB Garamond', Georgia, serif;
	font-size: 16px;
	line-height: 1.35;
	color: #141414;
}

/* Card hover
   ------------------------------------------------------------------
   The lift lives on .ob-help__cell rather than on the card itself: the
   card's entrance keyframes are filled "both", so their final
   transform: none would win over any transform declared here. The cell
   is not animated, so it is free to move, and the card keeps its own
   surface changes.

   Scoped to real pointers — on a touch screen :hover sticks after a tap
   and the card would stay lifted for no reason. */
@media (hover: hover) and (pointer: fine) {

	.ob-help__cell {
		transition: transform .3s cubic-bezier(.2, .7, .25, 1);
	}

	.ob-card.is-shown {
		transition: border-color .3s ease, box-shadow .3s ease, background-color .3s ease;
	}

	.ob-card.is-shown svg {
		transition: transform .3s cubic-bezier(.2, .7, .25, 1);
	}

	.ob-help__cell:hover {
		transform: translateY(-5px);
	}

	.ob-help__cell:hover .ob-card.is-shown {
		border-color: #C9C4B6;
		box-shadow: 0 10px 26px rgba(20, 20, 20, .10);
	}

	.ob-help__cell:hover .ob-card.is-shown svg {
		transform: scale(1.08);
	}
}

/* Reduced motion: the card still answers, it just does not move. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {

	.ob-help__cell,
	.ob-card.is-shown svg {
		transition: none;
	}

	.ob-help__cell:hover,
	.ob-help__cell:hover .ob-card.is-shown svg {
		transform: none;
	}
}

/* Touch: the same acknowledgement, driven by the press instead of the
   pointer. :hover is deliberately not used here — a tap leaves it stuck on
   the card until something else is tapped, so the whole row would sit lifted
   after one touch. :active lasts exactly as long as the finger is down.

   Quicker and shallower than the desktop version, because a press reads as a
   press only if it answers immediately. iOS needs a touch listener on the
   document before it will apply :active to a plain element at all; js/custom.js
   registers one. */
@media (hover: none), (pointer: coarse) {

	.ob-help__cell {
		transition: transform .18s ease;
	}

	.ob-card.is-shown {
		transition: border-color .18s ease, box-shadow .18s ease;
	}

	.ob-help__cell:active {
		transform: translateY(-3px);
	}

	.ob-help__cell:active .ob-card.is-shown {
		border-color: #C9C4B6;
		box-shadow: 0 6px 18px rgba(20, 20, 20, .12);
	}
}

/* Written as two comma-separated queries rather than one "or" group, which
   Safari only understood from 16.4 — the older iPads would drop the whole
   block and keep animating for someone who asked it not to. */
@media (hover: none) and (prefers-reduced-motion: reduce),
(pointer: coarse) and (prefers-reduced-motion: reduce) {

	.ob-help__cell {
		transition: none;
	}

	.ob-help__cell:active {
		transform: none;
	}
}

.ob-help__cta.is-shown {
	margin-top: clamp(10px, 2.4vh, 52px);
	display: flex;
	justify-content: center;
	gap: 14px;
	flex-wrap: wrap;
	animation: obFadeUp .8s ease both;
}

/* Tablets are tall enough that centring the screen in the stage leaves a band
   of empty page under the header before anything starts. The column is
   anchored to the top there instead; phones and desktops keep the centring,
   where the content fills the height. */
@media (min-width: 768px) and (max-width: 1199px) {

	.ob-screen--help {
		justify-content: flex-start;
		padding-top: clamp(16px, 3vh, 40px);
	}
}

/* Tell Me About Yourself (form)
   ------------------------------------------------------------------ */
.ob-screen--form {
	max-width: 1120px;
	margin: 0 auto;
	padding: clamp(40px, 6vh, 72px) 24px clamp(64px, 10vh, 120px);
	width: 100%;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: clamp(24px, 4vw, 72px);
}

.ob-form__art {
	flex: 0 1 300px;
	min-width: 0;
	position: sticky;
	top: 0;
}

.ob-form__artinner {
	width: 100%;
}

.ob-form__figure {
	position: relative;
	width: 100%;
	height: var(--ob-char);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	padding-bottom: 10px;
}

.ob-form__rise {
	position: relative;
	height: 108%;
}

/* .ob-form__rise .ob-figure__gif {
	max-width: 100%;
} */

.ob-form__copy {
	flex: 1 1 380px;
	max-width: 780px;
}

.ob-app .ob-form__title {
	margin: 0;
	min-height: 1.25em;
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 400;
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	line-height: 1.25;
	color: #141414;
	text-transform: none;
	letter-spacing: normal;
}

.ob-app .ob-form__sub {
	margin: 22px 0 0;
	min-height: 1.55em;
	max-width: 24em;
	font-family: 'EB Garamond', Georgia, serif;
	font-size: clamp(19px, 2vw, 25px);
	line-height: 1.55;
	color: #141414;
	text-wrap: pretty;
}

.ob-app .ob-form__note {
	margin: 14px 0 0;
	min-height: 1.7em;
	font-family: 'EB Garamond', Georgia, serif;
	font-size: clamp(15px, 1.6vw, 22px);
	line-height: 1.6;
	color: #141414;
}

.ob-form.is-shown {
	margin-top: clamp(36px, 5vh, 56px);
	display: flex;
	flex-direction: column;
	gap: 40px;
	animation: obFadeUp .8s ease both;
}

.ob-field {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ob-app .ob-field--radios {
	display: block;
	border: 0;
	padding: 0;
	margin: 0;
	min-width: 0;
}

.ob-app .ob-label {
	display: block;
	width: auto;
	max-width: 100%;
	margin: 0;
	padding: 0;
	font-family: 'EB Garamond', Georgia, serif;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .06em;
	line-height: inherit;
	text-transform: uppercase;
	color: #141414;
}

/* Required marker. Sits inside the label, in the same red as the field errors
   so "must be filled in" and "was not filled in" read as one idea. */
.ob-app .ob-required {
	color: #B3261E;
	font-weight: 600;
	margin-left: 1px;
}

.ob-radios {
	margin-top: 18px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ob-app .ob-radio {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-family: 'EB Garamond', Georgia, serif;
	font-size: 19px;
	font-weight: 400;
	color: #141414;
	cursor: pointer;
	text-transform: none;
	letter-spacing: normal;
}

.ob-app .ob-radio input {
	width: 20px;
	height: 20px;
	accent-color: #141414;
	margin: 0;
	cursor: pointer;
}

.ob-app .ob-input {
	width: 100%;
	font-family: 'EB Garamond', Georgia, serif;
	font-size: 19px;
	color: #141414;
	background: #FFFFFF;
	border: 1px solid #B9B5AA;
	border-radius: 2px;
	padding: 16px 16px;
	outline: none;
	box-shadow: none;
	margin: 0;
}

.ob-app .ob-input:focus {
	border-color: #141414;
	outline: none;
	box-shadow: none;
}

.ob-app .ob-textarea {
	line-height: 1.6;
	resize: vertical;
}

.ob-app .ob-hint {
	margin: 2px 0 0;
	font-family: 'EB Garamond', Georgia, serif;
	font-size: 16px;
	color: #141414;
}

.ob-app .ob-error {
	margin: 2px 0 0;
	font-family: 'EB Garamond', Georgia, serif;
	font-size: 16px;
	color: #B3261E;
}

.ob-app .ob-error--tight {
	margin: 0;
}

.ob-app .ob-field--radios .ob-error {
	margin: 14px 0 0;
}

/* The summary message sits on its own line under the button rather than
   beside it: it belongs to the whole form, and next to the button it reads as
   a label for it. flex-basis forces the wrap, so the container's gap supplies
   the spacing and the centred variant below still centres both. */
.ob-app .ob-error--inline {
	display: block;
	flex: 0 0 100%;
	width: 100%;
	margin: 0;
}

.ob-form__actions {
	display: flex;
	align-items: center;
	/* Row gap is the space under the button; the column gap is unused now that
	   the message wraps, but stays for anything else placed on that line. */
	gap: 10px 20px;
	flex-wrap: wrap;
}

/* Confirmation
   ------------------------------------------------------------------ */
.ob-screen--confirm {
	max-width: 1120px;
	margin: 0 auto;
	min-height: 100%;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(20px, 3vw, 52px);
	padding: clamp(20px, 3.5vh, 64px) 24px;
}

.ob-confirm__art {
	flex: 0 1 300px;
	display: flex;
	justify-content: center;
}

.ob-confirm__float {
	position: relative;
}

.ob-confirm__char {
	height: var(--ob-char);
}

.ob-confirm__copy {
	flex: 1 1 380px;
	max-width: 620px;
}

.ob-app .ob-confirm__title {
	margin: 0;
	min-height: 1.25em;
	font-family: 'EB Garamond', Georgia, serif;
	font-size: clamp(2rem, 5vw, 3.2rem);
	line-height: 1.25;
	color: #141414;
}

.ob-app .ob-confirm__sub {
	margin: 26px 0 0;
	min-height: 1.6em;
	max-width: 26em;
	font-family: 'EB Garamond', Georgia, serif;
	font-size: clamp(19px, 2vw, 25px);
	line-height: 1.6;
	color: #141414;
	text-wrap: pretty;
}

.ob-confirm__actions {
	margin-top: 30px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 26px;
}

.ob-reveal--fade.is-shown {
	display: block;
	animation: obFade .8s ease both;
}

/* 404 screen
   ------------------------------------------------------------------ */
.ob-screen--404 {
	min-height: 100%;
	align-items: center;
	justify-content: center;
	padding: clamp(48px, 10vh, 140px) 24px;
}

.ob-404__inner {
	max-width: 720px;
	width: 100%;
}

.ob-app .ob-404__line {
	margin: 0;
	min-height: 1.3em;
	font-family: 'EB Garamond', Georgia, serif;
	font-size: clamp(1.9rem, 4.6vw, 3rem);
	line-height: 1.3;
	color: #141414;
}

.ob-app .ob-404__line--second {
	margin: 16px 0 0;
}

.ob-404__actions {
	margin-top: clamp(40px, 7vh, 72px);
}

/* 404 artwork — the figure above the copy on the 404 screen and template.
   The block is centred like the Hero and Confirmation screens so the figure,
   the lines and the button all sit on one axis.
   ------------------------------------------------------------------ */
.ob-404__inner {
	text-align: center;
}

.ob-404__art {
	display: flex;
	justify-content: center;
	margin-bottom: clamp(18px, 3vh, 34px);
}

.ob-404__art img {
	display: block;
	height: clamp(120px, 22vh, 260px);
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

/* reCAPTCHA — sits above the Send button when enabled in Submissions >
   Settings. Only spacing; the widget itself is Google's iframe.
   ------------------------------------------------------------------ */
.ob-field--captcha .g-recaptcha {
	display: inline-block;
	max-width: 100%;
	overflow: hidden;
}

/* Footer
   ------------------------------------------------------------------ */
.ob-footer {
	flex: 0 0 auto;
	border-top: 1px solid #D8D5CC;
	background: #F7F5EF;
}

/* Compact: the two stacked rows supply their own height, so the padding only
   has to keep them off the border and the screen edge. The bottom value still
   clears the home indicator / browser bar on phones, where env() resolves to
   a real number. */
.ob-footer__inner {
	max-width: 720px;
	margin: 0 auto;
	padding: clamp(10px, 1.4vh, 14px) 24px;
	padding-bottom: calc(clamp(10px, 1.4vh, 14px) + env(safe-area-inset-bottom, 0px));
	font-family: 'EB Garamond', Georgia, serif;
	font-size: 14px;
	line-height: 1.6;
	color: #4A4A4A;
	display: flex;
	justify-content: center;
	text-align: center;
}

/* The name in the copyright line: a link home, weighted so it reads as the one
   thing here worth clicking. The underline is a transparent border that gains
   its colour on hover, so nothing shifts when it appears. */
.ob-app .ob-footer__brand {
	font-weight: 700;
	color: #141414;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color .25s ease, border-color .25s ease;
}

.ob-app .ob-footer__brand:hover,
.ob-app .ob-footer__brand:focus-visible {
	color: #000000;
	border-bottom-color: #141414;
}

/* Widgetised footer (Appearance > Widgets > Obitski Footer). Only applies when
   the area holds widgets; the default copyright line is untouched. Widgets
   inherit the footer type so a Text/HTML widget matches it exactly. */
.ob-footer__inner--widgets {
	/* Back to the default width: the wide container was there to separate a
	   centred copyright from a right-hand email, and the two are stacked now. */
	flex-wrap: wrap;
	gap: 4px 14px;
	text-align: center;
}

.ob-footer__inner--widgets .ob-footer__widget {
	flex: 1 1 100%;
}

.ob-footer__widget,
.ob-footer__widget p,
.ob-footer__widget ul,
.ob-footer__widget ol,
.ob-footer__widget li {
	margin: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	list-style: none;
}

.ob-footer__widget ul,
.ob-footer__widget ol {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	justify-content: center;
}

.ob-footer__widget-title {
	margin: 0 0 4px;
	font: inherit;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

/* Footer copyright line (Appearance > Widgets > Obitski Footer)
   ------------------------------------------------------------------
   Two stacked rows, centred: the copyright above, the email below. One
   column at every width, so desktop, tablet and mobile all read the same
   and there is no breakpoint where the two can collide. */
.copy-right-section {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr;
	justify-items: center;
	align-items: center;
	/* gap: 4px; */
	gap: 0;
	text-align: center;
}

.copy-right-section__legal {
	grid-row: 1;
}

.copy-right-section__email {
	grid-row: 2;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	white-space: nowrap;
	transition: 0.1s !important;
}

/* Envelope drawn from a masked SVG rather than an <img> or inline markup:
   it takes currentColor, so it follows the link's own hover state, and the
   widget stays plain HTML that no sanitiser will strip. */
@supports ((-webkit-mask-image: none) or (mask-image: none)) {

	.copy-right-section__email::before {
		content: '';
		flex: 0 0 auto;
		width: 1.05em;
		height: 1.05em;
		background-color: currentColor;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4.5' width='19' height='15' rx='2.5'/%3E%3Cpath d='m3.2 6.4 8.8 6 8.8-6'/%3E%3C/svg%3E") no-repeat center / contain;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4.5' width='19' height='15' rx='2.5'/%3E%3Cpath d='m3.2 6.4 8.8 6 8.8-6'/%3E%3C/svg%3E") no-repeat center / contain;
	}
}

/* No phone-specific rule any more: the stack above is already the layout at
   every width, so there is nothing left for a breakpoint to change. */

/* Confirm dialog
   ------------------------------------------------------------------ */
.ob-modal {
	position: fixed;
	inset: 0;
	z-index: 80;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(20, 20, 20, .55);
	animation: obFade .22s ease both;
}

.ob-modal__panel {
	width: 100%;
	max-width: 520px;
	text-align: center;
	background: #F7F5EF;
	border: 1px solid #D8D5CC;
	border-radius: 3px;
	padding: clamp(28px, 4vw, 40px);
	box-shadow: 0 26px 60px rgba(20, 20, 20, .24);
	animation: obFadeUp .3s cubic-bezier(.22, .68, .28, 1) both;
}

.ob-app .ob-modal__title {
	margin: 0;
	font-family: 'EB Garamond', Georgia, serif;
	font-size: clamp(1.4rem, 3vw, 1.9rem);
	line-height: 1.3;
	color: #141414;
}

.ob-app .ob-modal__text {
	margin: 16px auto 0;
	max-width: 26em;
	font-family: 'EB Garamond', Georgia, serif;
	font-size: 18px;
	line-height: 1.6;
	color: #141414;
	text-wrap: pretty;
}

.ob-modal__actions {
	margin-top: 32px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
}

/* The confirmation mark. It was pinned to 270px and stretched to the column's
   full width, so it was both a different size from every other slide and the
   only one not drawn at its own proportions. Height comes from --ob-char like
   the rest; width follows it. */
.ob-figure__still_new {
	height: var(--ob-char) !important;
	width: auto !important;
	max-width: 100%;
	object-fit: contain;
}

/* Responsive
   ------------------------------------------------------------------ */
@media (min-height: 820px) {

	/* The character's height used to be re-stated here as 26vh, which put
	   Who I Help out of step with every other slide on a tall window. Only
	   the spacing around it is tuned now; the size stays --ob-char. */
	.ob-app [data-help-sub] {
		margin-top: 26px !important;
	}

	.ob-app [data-help-row] {
		margin-top: 38px !important;
	}

	.ob-app [data-help-cta].is-shown {
		margin-top: 38px !important;
	}

	.ob-app [data-help-card].is-shown {
		padding: 22px 16px !important;
		gap: 14px !important;
	}
}

@media (max-width: 760px) {
	.ob-app [data-help-row] {
		flex-wrap: wrap !important;
	}

	.ob-app [data-help-row]>* {
		flex: 0 1 100% !important;
	}
}

@media (max-width: 900px) {
	.ob-app .ob-nav {
		display: none !important;
	}

	.ob-app .ob-burger {
		display: flex !important;
	}
}

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

	.ob-app *,
	.ob-app *::before,
	.ob-app *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}
}


/* =========================================================================
   SITE TYPOGRAPHY — EB Garamond
   Family only. Sizes, weights, letter-spacing, colours and layout are left
   to the rules that already declare them.

   Selectors are prefixed with `html` because css/main.css (Bootstrap 4) is
   enqueued after this stylesheet and sets font-family on `body` and the
   form controls with a plain element selector. The extra `html` raises
   specificity just enough to win without reordering any enqueue.
   ========================================================================= */
html body,
html p,
html a,
html button,
html input,
html select,
html optgroup,
html textarea {
	font-family: 'EB Garamond', Georgia, serif;
}

/* Headings — Playfair Display.
   Family only: every size, weight, colour and spacing stays with the rule
   that already declares it. */
html h1,
html h2,
html h3,
html h4,
html h5,
html h6,
html .entry-title,
html .widget-title,
html .page-title,
html .section-title,
html .card-title,
.ob-app .ob-modal__title {
	font-family: 'Playfair Display', Georgia, serif;
}

/* The hero typing animation keeps the face it already had. Its text lives in
   .ob-type spans inside the heading elements above, so it has to opt back
   out of the heading family. */
.ob-app .ob-type {
	font-family: 'EB Garamond', Georgia, serif;
}



/* =========================================================================
   MOBILE (<=767px) — Hero and Who I Am behave as fixed full-screen slides.

   The shell stays locked (body / #page / .ob-app are 100dvh with
   overflow:hidden), the inner stage scroller is switched off, and each of
   these two screens is laid out as a column that fits the stage exactly:

     .ob-*__copy  flex: 0 0 auto   keeps its natural height, fonts untouched
     .ob-*__art   flex: 1 1 0      absorbs whatever height is left over

   So the figure — the only freely scalable element — soaks up the
   difference on every viewport instead of pushing content out of view.
   Spacing, margins and gaps are compressed with vh-based clamps; type
   sizes are left alone. Scoped by body[data-ob-active-screen] so the other
   screens keep their existing behaviour, and by max-width so tablet and
   desktop are untouched.
   ========================================================================= */
@media (max-width: 767px) {

	/* Nothing scrolls: not the document, not the stage. */
	body.obitski-front[data-ob-active-screen="home"],
	body.obitski-front[data-ob-active-screen="who-i-am"] {
		overscroll-behavior: none;
	}

	body[data-ob-active-screen="home"] .ob-stage,
	body[data-ob-active-screen="who-i-am"] .ob-stage {
		overflow: hidden;
	}

	/* The screen fills the stage exactly — no more, no less. */
	.ob-screen--hero,
	.ob-screen--who {
		height: 100%;
		min-height: 0;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		justify-content: center;
		gap: clamp(4px, 1vh, 16px);
		padding: clamp(6px, 1.4vh, 22px) 20px;
	}

	/* Art absorbs the leftover height. */
	.ob-hero__art,
	.ob-who__art {
		flex: 1 1 0;
		min-height: 0;
		width: 100%;
		max-width: none;
	}

	.ob-hero__copy,
	.ob-who__copy {
		flex: 0 0 auto;
		width: 100%;
		text-align: center;
	}

	.ob-hero__float,
	.ob-who__artinner {
		height: 100%;
	}

	.ob-hero__figure,
	.ob-who__figure {
		height: 100%;
		min-height: 0;
	}

	/* Keep the character inside its box instead of hanging below it. */
	.ob-hero__walk {
		bottom: 0;
		height: 100%;
	}

	.ob-hero__shadow {
		bottom: 0;
	}

	.ob-who__rise {
		height: 100%;
	}

	.ob-who__figure {
		padding-bottom: 0;
	}

	/* Spacing only — no type scaling. min-heights are kept so the typing
	   animation and the CTA reveal cannot shift the layout. */
	.ob-app .ob-hero__sub {
		margin-top: 20px;
		font-size: 24px;
	}

	.ob-hero__ctaslot {
		min-height: 0;
	}

	.ob-hero__cta.is-shown {
		margin-top: clamp(10px, 1.6vh, 28px);
		justify-content: center;
	}

	.ob-who__copy {
		gap: clamp(4px, 0.9vh, 16px);
	}

	.ob-who__list {
		gap: clamp(3px, 0.7vh, 12px);
		margin-top: 0;
	}

	.ob-who__cta.is-shown {
		margin-top: clamp(8px, 1.4vh, 24px);
		justify-content: center;
	}
}


/* -------------------------------------------------------------------------
   Short phones (<=700px tall) — last-resort type reduction.

   With spacing already at its minimum, the copy alone leaves the figure
   only ~38px on a 320x568 screen. Trimming the display sizes is the only
   remaining way to keep the character legible without clipping anything or
   introducing a scrollbar, so it is applied here and nowhere else.
   ------------------------------------------------------------------------- */
@media (max-width: 767px) and (max-height: 700px) {

	.ob-app .ob-hero__title {
		font-size: clamp(1.5rem, 7.2vw, 2.1rem);
		width: 100%;
	}

	.ob-app .ob-hero__sub {
		font-size: clamp(15px, 4.3vw, 20px);
	}

	.ob-app .ob-who__title {
		font-size: clamp(1.35rem, 6.4vw, 1.8rem);
	}

	.ob-app .ob-who__sub {
		font-size: clamp(15px, 4.2vw, 19px);
	}

	.ob-app .ob-who__item {
		font-size: clamp(0.95rem, 4vw, 1.15rem);
	}

	/* Tightened so the two Hero CTAs share one row at 320px instead of
	   stacking. That reclaims 65px of vertical space, which is what lets
	   the character go from 150px to 175px on the shortest phone. */
	.ob-app .ob-btn {
		padding: 10px 13px;
		font-size: 13px;
		letter-spacing: .01em;
	}

	.ob-hero__cta.is-shown {
		gap: 8px;
	}
}


/* -------------------------------------------------------------------------
   Mobile — the character renders at one constant size on every phone.

   Previously the artwork column was flex:1 1 0 and the figure filled it, so
   the character tracked the leftover height and ranged from 138px on a
   320x568 screen to 476px on a 430x932 one. Here the figure is given a
   fixed pixel height instead, the artwork column stops absorbing space, and
   the screen's justify-content:center distributes the slack. No vh, no vw,
   so the character is identical on every device.

   150px is the ceiling: it is the largest constant that still lets the
   shortest supported phone (320x568) fit its full Hero without scrolling.
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {

	/* The artwork column no longer stretches. */
	.ob-hero__art,
	.ob-who__art {
		flex: 0 0 auto;
		height: var(--ob-char);
	}

	.ob-hero__float,
	.ob-who__artinner {
		height: var(--ob-char);
	}

	/* One centring box per screen; the image keeps its own aspect ratio
	   because only height is constrained and width stays auto. */
	.ob-hero__figure,
	.ob-who__figure {
		height: var(--ob-char);
		min-height: var(--ob-char);
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
	}

	/* Was absolutely positioned at left:-4% for the walk-in, which threw the
	   character off-centre once that animation was removed. */
	.ob-hero__walk,
	.ob-who__rise {
		position: static;
		height: 100%;
		width: auto;
		transform: none;
	}

	.ob-hero__figure .ob-figure,
	.ob-who__figure .ob-figure {
		height: 100%;
	}

	.ob-hero__figure .ob-figure__gif,
	.ob-hero__figure .ob-figure__still,
	.ob-who__figure .ob-figure__gif,
	.ob-who__figure .ob-figure__still {
		height: 100%;
		width: auto;
		max-width: 100%;
		object-fit: contain;
	}

	/* Contact shadow follows the character instead of the old left:10%. */
	.ob-hero__shadow {
		left: 50%;
		right: auto;
		bottom: 0;
		width: calc(var(--ob-char) * 0.62);
		transform: translateX(-50%);
	}
}


/* =========================================================================
   TABLET AND MOBILE (<=991px) — Tell Me About Yourself.

   The desktop layout puts a 560px-tall character in a sticky column beside
   the form. Below 991px that column collapses under the form and the
   character dominates the screen. Here the screen becomes a single centred
   column with a small fixed-height character on top, tighter field rhythm
   and inputs sized for touch.

   This screen deliberately keeps its scrolling — only Hero and Who I Am are
   fixed slides — so nothing here touches .ob-stage's overflow.
   ========================================================================= */
@media (max-width: 991px) {

	.ob-screen--form {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: center;
		max-width: 620px;
		gap: clamp(10px, 2vw, 20px);
		padding: clamp(20px, 3.5vw, 36px) 20px clamp(32px, 5vw, 56px);
	}

	/* Sticky is pointless once the character sits above the form, and it
	   would pin the artwork over the fields while scrolling. */
	.ob-form__art {
		flex: 0 0 auto;
		position: static;
		width: 100%;
	}

	.ob-form__figure {
		height: var(--ob-char-form);
		min-height: var(--ob-char-form);
		justify-content: center;
		padding-bottom: 0;
	}

	.ob-form__rise {
		position: static;
		height: 100%;
	}

	.ob-form__figure .ob-figure {
		height: 100%;
	}

	.ob-form__figure .ob-figure__gif,
	.ob-form__figure .ob-figure__still {
		height: 100%;
		width: auto;
		max-width: 100%;
		object-fit: contain;
	}

	.ob-form__copy {
		flex: 0 0 auto;
		width: 100%;
		max-width: none;
	}

	/* Heading block reads as the section header above the form. */
	.ob-app .ob-form__title,
	.ob-app .ob-form__sub,
	.ob-app .ob-form__note {
		text-align: center;
		max-width: 34em;
		margin-left: auto;
		margin-right: auto;
	}

	.ob-app .ob-form__sub {
		margin-top: 10px;
	}

	.ob-app .ob-form__note {
		margin-top: 8px;
	}

	/* 40px between fields is too airy once the column is narrow. */
	.ob-form.is-shown {
		margin-top: clamp(20px, 3.5vw, 34px);
		gap: clamp(20px, 3.2vw, 28px);
	}

	.ob-radios {
		margin-top: 12px;
		gap: 10px;
	}

	.ob-app .ob-input {
		padding: 13px 14px;
		font-size: 17px;
	}

	.ob-app .ob-radio {
		font-size: 17px;
	}

	.ob-app .ob-label {
		font-size: 14px;
	}

	.ob-app .ob-hint,
	.ob-app .ob-error {
		font-size: 15px;
	}

	.ob-form__actions {
		gap: 10px 14px;
	}

	.ob-app .ob-btn--lg {
		width: 100%;
		font-size: 17px;
		padding: 16px 24px;
	}
}

@media (max-width: 767px) {

	/* The form's character had its own phone size here (165px). It takes
	   --ob-char with everything else now. */

	/* 	.home_page_img>img.ob-figure__still {
		display: none;
	} */

	/* 	.home_page_img>img.ob-figure__still__mob {
		display: block;
	} */

	.home_hero_copy>.ob-hero__title {
		width: 100%;
		margin-top: 10px;
	}
}


/* =========================================================================
   TABLET AND DESKTOP (>=768px) — same stacked, centred layout as mobile.

   Hero, Who I Am and Confirmation were flex rows (Hero row-reverse), so the
   character sat beside the copy. Here they keep the mobile shape at every
   width: one centred column, character on top, copy below, everything
   centre-aligned. Type sizes stay on their existing desktop clamps; only the
   figure is capped so character + copy still fit one screen without the
   stage having to scroll.

   Tell Me About Yourself is handled in the >=992px block below, because the
   <=991px rules already stack it.
   ========================================================================= */
@media (min-width: 768px) {

	/* Constant, like the mobile value: the mark reads at one size on every
	   tablet and desktop viewport instead of tracking vh. Setting --ob-char
	   moves every slide at once, because --ob-char-desktop and
	   --ob-char-form both resolve through it. */
	.ob-app {
		--ob-char: 210px;
	}

	.ob-screen--hero,
	.ob-screen--who,
	.ob-screen--confirm {
		max-width: 700px;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: center;
		gap: clamp(20px, 3vh, 40px);
	}

	/* Art no longer shares a row: natural height, full width, centred. */
	.ob-hero__art,
	.ob-who__art,
	.ob-confirm__art {
		flex: 0 0 auto;
		width: 100%;
		max-width: none;
		justify-content: center;
	}

	/* flex-basis would size height in a column, so the copy opts out too. */
	.ob-hero__copy,
	.ob-who__copy,
	.ob-confirm__copy {
		flex: 0 0 auto;
		width: 100%;
		max-width: none;
		align-items: center;
		text-align: center;
	}

	/* One centring box per screen; width stays auto so the character keeps
	   its aspect ratio. */
	.ob-hero__figure,
	.ob-who__figure {
		height: var(--ob-char-desktop);
		min-height: var(--ob-char-desktop);
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
	}

	.ob-hero__float,
	.ob-who__artinner {
		height: var(--ob-char-desktop);
	}

	.ob-confirm__char {
		height: var(--ob-char-desktop);
	}

	/* Were absolutely positioned for the old walk-in / rise, which throws the
	   character off-centre in a column. */
	.ob-hero__walk,
	.ob-who__rise {
		position: static;
		height: 100%;
		width: auto;
		transform: none;
	}

	.ob-hero__figure .ob-figure,
	.ob-who__figure .ob-figure {
		height: 100%;
	}


	.ob-hero__figure .ob-figure__gif,
	.ob-hero__figure .ob-figure__still,
	.ob-who__figure .ob-figure__gif,
	.ob-who__figure .ob-figure__still {
		height: 100%;
		width: auto;
		max-width: 100%;
		object-fit: contain;
	}

	/* Contact shadow follows the character instead of the old left:10%. */
	.ob-hero__shadow {
		left: 50%;
		right: auto;
		bottom: 0;
		width: calc(var(--ob-char-desktop) * 0.62);
		transform: translateX(-50%);
	}

	/* Paragraphs carry their own max-width, so they need auto side margins to
	   stay centred once the column is wider than they are. */
	.ob-app .ob-hero__sub,
	.ob-app .ob-who__sub,
	.ob-app .ob-confirm__sub {
		margin-left: auto;
		margin-right: auto;
	}

	.ob-hero__cta.is-shown,
	.ob-who__cta.is-shown {
		justify-content: center;
	}

	.ob-confirm__actions {
		align-items: center;
	}

	/* Display type is capped near its mobile size. The desktop clamps were
	   written for a half-width column; in a 700px centred one a 57px title and
	   a 27px sub push the CTA past the fold. */
	.ob-app .ob-hero__title {
		font-size: clamp(2.1rem, 5vw, 2.5rem);
	}

	.ob-app .ob-hero__sub {
		margin-top: 22px;
		max-width: 28em;
		font-size: 26px;
	}

	.ob-app .ob-who__title,
	.ob-app .ob-confirm__title {
		font-size: clamp(1.8rem, 4vw, 2.2rem);
	}

	.ob-app .ob-who__sub,
	.ob-app .ob-confirm__sub,
	.ob-app .ob-help__sub {
		font-size: 25px;
	}

	.ob-app .ob-who__item {
		font-size: clamp(1.15rem, 2.2vw, 1.6rem);
	}
}


/* -------------------------------------------------------------------------
   DESKTOP (>=992px) — Tell Me About Yourself joins the stacked column.

   Below 992px the existing block already does this. The heading block is
   centred; the form itself stays left-aligned, because centred labels and
   inputs are hard to scan.
   ------------------------------------------------------------------------- */
@media (min-width: 992px) {

	.ob-screen--form {
		max-width: 760px;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: center;
		gap: clamp(20px, 3vh, 40px);
	}

	/* Sticky is pointless once the character sits above the form. */
	.ob-form__art {
		flex: 0 0 auto;
		position: static;
		width: 100%;
		max-width: none;
	}

	.ob-form__copy {
		flex: 0 0 auto;
		width: 100%;
		max-width: none;
		text-align: center;
	}

	.ob-form__figure {
		height: var(--ob-char-desktop);
		min-height: var(--ob-char-desktop);
		justify-content: center;
		padding-bottom: 0;
	}

	.ob-form__artinner {
		height: var(--ob-char-desktop);
	}

	.ob-form__rise {
		position: static;
		height: 100%;
	}

	.ob-form__figure .ob-figure {
		height: 100%;
	}

	.ob-form__figure .ob-figure__gif,
	.ob-form__figure .ob-figure__still {
		height: 100%;
		width: auto;
		max-width: 100%;
		object-fit: contain;
	}

	.ob-app .ob-form__sub,
	.ob-app .ob-form__note {
		margin-left: auto;
		margin-right: auto;
	}

	.ob-app .ob-form__title {
		font-size: clamp(1.8rem, 4vw, 2.2rem);
	}

	.ob-app .ob-form__sub {
		font-size: 25px;
		max-width: 34em;
	}

	/* Fields keep their left-aligned rhythm inside the centred column. */
	.ob-app .ob-form {
		text-align: left;
	}

	.ob-form__actions {
		justify-content: center;
	}
}

/* Disabled buttons — while a submission is in flight the dialog's Keep Editing
   button is inert, so it has to read that way. The sending button is excluded:
   it carries the loader below and must keep its full contrast.
   ------------------------------------------------------------------ */
.ob-btn[disabled]:not(.is-loading),
.ob-btn:disabled:not(.is-loading) {
	opacity: .4;
	cursor: not-allowed;
	pointer-events: none;
}

/* Button loader — shown while a submission is in flight. The label is held in
   place (transparent) so the button keeps its width and nothing shifts.
   ------------------------------------------------------------------ */
.ob-btn.is-loading {
	position: relative;
	color: transparent !important;
	pointer-events: none;
}

.ob-btn.is-loading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	border: 2px solid rgba(20, 20, 20, .25);
	border-top-color: #141414;
	border-radius: 50%;
	animation: obSpin .7s linear infinite;
}

/* On the dark solid button the spinner has to be light. */
.ob-btn--solid.is-loading::after {
	border-color: rgba(247, 245, 239, .35);
	border-top-color: #F7F5EF;
}

.footer-home-link {
	text-decoration: none;
	font-weight: 600;
	border-bottom: unset !important;
}

.footer-home-link:hover {
	font-weight: 600;
	color: #141414 !important;
	text-decoration: underline !important;
}

@keyframes obSpin {
	to {
		transform: rotate(360deg);
	}
}

/* Send failure inside the confirm dialog — the dialog stays open on a failure
   the visitor can only retry, so the message belongs here. */
.ob-app .ob-modal__error {
	margin: 18px auto 0;
	max-width: 26em;
	text-align: center;
}

/* Desktop / mobile artwork swap
   ------------------------------------------------------------------
   Each screen can carry two figures (ACF: Figure Image Desktop /
   Mobile). Only display is toggled here — every size, position and
   object-fit rule above still applies to whichever one is showing.
   The breakpoint matches MOBILE_QUERY in js/custom.js. A screen with
   only one image gets no modifier class and shows at every width. */
@media (min-width: 768px) {

	.ob-figure>.ob-figure--mob,
	.ob-404__art>.ob-figure--mob {
		display: none;
	}
}

/* The 404 lines never had a small-screen size of their own; at the desktop
   minimum a single line runs past a phone's width. */
@media (max-width: 767px) {
	.ob-app .ob-404__line {
		font-size: clamp(1.35rem, 6.2vw, 1.9rem);
	}

	.ob-404__art img {
		height: clamp(96px, 16vh, 170px);
	}
}

@media (max-width: 767px) {

	.ob-figure>.ob-figure--desk,
	.ob-404__art>.ob-figure--desk {
		display: none;
	}
}