/*
Theme Name: Access and Safety
Theme URI: https://accessandsafety.com.au/
Description: Custom child theme of Storefront for Access and Safety.
Author: Access and Safety
Template: storefront
Version: 5.29
Text Domain: access-safety
*/

:root {
	--as-black: #0a0a0a;
	--as-black-soft: #141414;
	--as-white: #ffffff;
	--as-amber: #faaf40;
	--as-amber-dark: #e0972b;
	--as-grey: #cfcfcf;
}

/* ==========================================================================
   Global content width
   ========================================================================== */

.col-full {
	max-width: 1440px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 24px !important;
	padding-right: 24px !important;
	box-sizing: border-box;
}

@media (max-width: 600px) {
	.col-full {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
}

a:focus, button:focus, .button.alt:focus, input:focus, textarea:focus, input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus {
	outline: none !important;
}

/* ==========================================================================
   Header
   ========================================================================== */

.access-safety-header {
	background: var(--as-black) !important;
	border-bottom: 1px solid var(--as-amber) !important;
	padding: 0;
}

.access-safety-header .header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
	padding: 0 20px;
}

.access-safety-header .site-branding {
	flex: 0 0 auto;
	max-width: 180px;
	margin: 0;
	padding: 0;
	line-height: 0;
}

.access-safety-header .site-branding a {
	display: flex;
	margin: 0;
	padding: 0;
}

.access-safety-header .header-logo,
.access-safety-header .site-branding img {
	height: 96px !important;
	width: auto !important;
	max-width: 270px !important;
	max-height: 96px !important;
	display: block;
	margin: 0 !important;
}

.access-safety-header .main-navigation {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
}

.access-safety-header .main-navigation ul {
	list-style: none;
	display: flex;
	gap: 28px;
	margin: 0;
	padding: 0;
}

.access-safety-header .main-navigation li {
	position: relative;
}

.access-safety-header .main-navigation a {
	color: var(--as-white);
	text-decoration: none;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.02em;
	transition: color 0.15s ease;
}

.access-safety-header .main-navigation a:hover,
.access-safety-header .main-navigation a:focus {
	color: var(--as-amber);
}

.access-safety-header .main-navigation .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background: var(--as-black-soft) !important;
	min-width: 220px;
	padding: 10px 0;
	margin: 0;
	list-style: none;
	z-index: 9999;
	border-top: 2px solid var(--as-amber);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
}

.access-safety-header .main-navigation li:hover > .sub-menu,
.access-safety-header .main-navigation li.focus > .sub-menu,
.access-safety-header .main-navigation li:focus-within > .sub-menu {
	display: block;
}

.access-safety-header .main-navigation .sub-menu li {
	position: relative;
}

.access-safety-header .main-navigation .sub-menu a {
	display: block;
	padding: 8px 18px;
	font-weight: 400;
	color: var(--as-white) !important;
	white-space: nowrap;
}

.access-safety-header .main-navigation .sub-menu a:hover,
.access-safety-header .main-navigation .sub-menu a:focus {
	color: var(--as-amber) !important;
	background: rgba(255, 255, 255, 0.06);
}

.access-safety-header .header-actions {
	display: flex;
	align-items: center;
	gap: 18px;
}

.access-safety-header .header-search {
	position: relative;
	display: flex;
	align-items: center;
}

.access-safety-header .header-search-toggle {
	background: none;
	border: none;
	padding: 4px;
	color: var(--as-white);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.access-safety-header .header-search-toggle:hover,
.access-safety-header .header-search-toggle[aria-expanded="true"] {
	color: var(--as-amber);
}

.access-safety-header .search-icon {
	width: 22px;
	height: 22px;
}

.access-safety-header .header-search-form {
	display: none;
	position: absolute;
	top: calc(100% + 14px);
	right: 0;
	background: var(--as-white);
	border-radius: 6px;
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
	padding: 12px;
	z-index: 110;
	width: 280px;
}

.access-safety-header .header-search-form.is-open {
	display: block;
}

.access-safety-header .header-search-form form {
	display: flex;
	gap: 8px;
	margin: 0;
}

.access-safety-header .header-search-form input[type="search"],
.access-safety-header .header-search-form input[type="text"] {
	flex: 1 1 auto;
	min-width: 0;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 4px;
	padding: 8px 10px;
	font-size: 14px;
}

.access-safety-header .header-search-form button[type="submit"] {
	flex: 0 0 auto;
	background: var(--as-black);
	color: var(--as-white);
	border: none;
	border-radius: 4px;
	padding: 0 14px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
}

.access-safety-header .header-search-form button[type="submit"]:hover {
	background: var(--as-amber);
	color: var(--as-black);
}

.access-safety-header .header-search-form .woocommerce-product-search label,
.access-safety-header .header-search-form .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

@media (max-width: 480px) {
	.access-safety-header .header-search-form {
		width: 240px;
	}
}

.access-safety-header .header-cart {
	position: relative;
	color: var(--as-white);
	display: inline-flex;
	align-items: center;
}

.access-safety-header .cart-icon {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

.access-safety-header .header-cart:hover .cart-icon {
	fill: var(--as-amber);
}

.access-safety-header .cart-count {
	position: absolute;
	top: -8px;
	right: -10px;
	background: var(--as-amber);
	color: var(--as-black);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	padding: 3px 6px;
	border-radius: 999px;
}

.access-safety-header .menu-toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
}

.access-safety-header .menu-toggle-bar {
	display: block;
	width: 26px;
	height: 3px;
	background: var(--as-white);
	margin: 5px 0;
}

@media (max-width: 1220px) {
	.woocommerce-active .site-header .main-navigation {
		margin-right: 10px;;
	}

	.access-safety-header .main-navigation ul {
		gap: 0 !important;
	}
}

@media (max-width: 768px) {
	.access-safety-header .header-inner {
		flex-wrap: nowrap;
	}

	.access-safety-header .site-branding {
		margin-right: 20px;
	}

	.access-safety-header .main-navigation {
		display: none;
		flex-basis: 100%;
		order: 3;
	}

	.access-safety-header .main-navigation.is-open {
		display: block;
	}

	.access-safety-header .main-navigation ul {
		flex-direction: column;
		gap: 0;
		width: 100%;
	}

	.access-safety-header .main-navigation .sub-menu {
		position: static;
		border-top: none;
	}

	.access-safety-header .main-navigation a {
		display: block;
		padding: 12px 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	}

	.access-safety-header .menu-toggle {
		display: block;
	}
}

/* ==========================================================================
   Footer
   ========================================================================== */

.access-safety-footer {
	background: #000;
	color: var(--as-grey);
}

.access-safety-footer .as-footer-inner {
	padding: 50px 20px 0;
}

.access-safety-footer .as-footer-widgets {
	display: grid !important;
	grid-template-columns: 1.4fr 1fr 1fr 1fr !important;
	gap: 32px;
	padding-bottom: 40px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.access-safety-footer .as-footer-col {
	min-width: 0;
}

.access-safety-footer .as-footer-logo {
	height: 84px;
	width: auto;
	margin-bottom: 14px;
}

.access-safety-footer .as-footer-tagline {
	font-size: 13px;
	color: var(--as-grey);
	margin: 0;
}

.access-safety-footer .as-footer-heading {
	color: var(--as-amber);
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: 0 0 14px;
}

/* !important throughout this block because Storefront core ships its own
   ".menu a" / generic link-color rule that was winning over our plain
   ".access-safety-footer a" selector (equal-or-higher specificity, loaded
   after ours) and rendering footer links — especially the Quick Links menu
   items — in Storefront's default dark/black link color, which is
   invisible against this footer's black background. */
.access-safety-footer p,
.access-safety-footer a,
.access-safety-footer .as-footer-menu a,
.access-safety-footer .as-footer-policy-links a {
	color: var(--as-grey) !important;
	font-size: 14px;
	line-height: 1.7;
}

.access-safety-footer a {
	text-decoration: none;
}

.access-safety-footer a:hover,
.access-safety-footer .as-footer-menu a:hover,
.access-safety-footer .as-footer-policy-links a:hover {
	color: var(--as-amber) !important;
}

.access-safety-footer .as-footer-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.access-safety-footer .as-footer-menu li {
	margin-bottom: 8px;
}

.access-safety-footer .as-footer-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	padding: 20px 0;
	font-size: 13px;
}

.access-safety-footer .as-footer-copyright {
	margin: 0;
}

.access-safety-footer .as-footer-policy-links a {
	margin-left: 18px;
}

@media (max-width: 900px) {
	.access-safety-footer .as-footer-widgets {
		grid-template-columns: 1fr 1fr !important;
	}
}

@media (max-width: 500px) {
	.access-safety-footer .as-footer-widgets {
		grid-template-columns: 1fr !important;
	}

	.access-safety-footer .as-footer-policy-links a {
		margin-left: 0;
		margin-right: 14px;
		display: inline-block;
	}
}

/* ==========================================================================
   Body content rhythm
   ========================================================================== */

.site-main {
	padding-top: 48px;
	padding-bottom: 64px;
}

.storefront-product-section + .storefront-product-section {
	margin-top: 56px;
}

.storefront-product-section .section-title,
.site-main > .col-full > h2 {
	font-size: 1.5em;
	font-weight: 600;
	color: var(--as-black);
	margin-bottom: 28px;
}

/* ==========================================================================
   Product card polish
   ========================================================================== */

.woocommerce ul.products li.product,
ul.products li.product {
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	border-radius: 4px;
	overflow: visible;
	background: var(--as-white);
	box-shadow: none !important;
}

.woocommerce ul.products li.product:hover,
ul.products li.product:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08) !important;
}

.woocommerce ul.products li.product > a:not(.button),
ul.products li.product > a:not(.button) {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	position: relative;
}

.custom-overlay-text {
	margin-bottom: 20px !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .woocommerce-loop-product__title {
	padding: 0 16px;
	margin: 14px 0 4px;
}

.woocommerce ul.products li.product .price,
ul.products li.product .price {
	position: absolute !important;
	top: 10px;
	right: 10px;
	left: auto !important;
	display: inline-flex !important;
	align-items: center;
	width: auto !important;
	max-width: none !important;
	overflow: visible !important;
	white-space: nowrap !important;
	text-align: right !important;
	background: rgba(255, 255, 255, 0.95);
	border-radius: 4px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
	color: var(--as-black);
	font-weight: 700;
	font-size: 0.95em;
	margin: 0 !important;
	padding: 4px 10px !important;
	z-index: 2;
}

.woocommerce ul.products li.product .price:after,
ul.products li.product .price:after,
.woocommerce ul.products li.product .price:before,
ul.products li.product .price:before {
	content: none !important;
	display: none !important;
}

.woocommerce ul.products li.product .button,
ul.products li.product .button,
.woocommerce ul.products li.product a.add_to_cart_button {
	background: var(--as-black);
	color: var(--as-white);
	border-radius: 2px;
	transition: background 0.15s ease, color 0.15s ease;
}

.woocommerce ul.products,
ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 28px 24px !important;
	align-items: stretch;
}

.woocommerce ul.products::before,
ul.products::before,
.woocommerce ul.products::after,
ul.products::after {
	content: none !important;
	display: none !important;
}

.woocommerce ul.products li.product,
ul.products li.product {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	float: none !important;
	height: 100%;
}

@media (max-width: 900px) {
	.woocommerce ul.products,
	ul.products {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 560px) {
	.woocommerce ul.products,
	ul.products {
		grid-template-columns: 1fr !important;
	}
}

.woocommerce ul.products li.product .button,
ul.products li.product .button,
.woocommerce ul.products li.product a.add_to_cart_button {
	margin: auto 0 16px;
	align-self: center;
	width: auto;
	padding: 9px 22px;
}

.woocommerce ul.products li.product img,
ul.products li.product img {
	width: 70% !important;
	height: auto !important;
	max-width: 70% !important;
	margin: 16px auto 0 !important;
	display: block !important;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}

.woocommerce ul.products li.product .button:hover,
ul.products li.product .button:hover,
.woocommerce ul.products li.product a.add_to_cart_button:hover {
	background: var(--as-amber);
	color: var(--as-black);
}

/* ==========================================================================
   Homepage sections (front-page.php)
   ========================================================================== */

.as-section + .as-section {
	margin-top: 64px;
}

.home #content,
.home #primary.content-area,
.home .site-main,
.seenyor-landing-page,
.seenyor-landing-page .site-main {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

#content,
#primary.content-area,
.site-main {
	padding-bottom: 0 !important;
	margin-bottom: 0 !important;
}

body .access-safety-footer {
	margin-top: 0 !important;
}

.as-section-title {
	font-size: 1.6em;
	font-weight: 700;
	color: var(--as-black);
	margin: 0 0 6px;
	letter-spacing: -0.01em;
}

.as-section-title--center {
	text-align: center;
	margin-bottom: 32px;
}

.as-section-subtitle {
	margin: 0;
	color: #5b5b5b;
	font-size: 15px;
}

.as-section-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 28px;
}

.as-categories .as-section-header {
	margin-top: 30px;
}

.as-section-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
	color: var(--as-black);
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	white-space: nowrap;
}

.as-section-link:hover {
	color: var(--as-amber-dark);
}

.as-arrow-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--as-amber);
	color: var(--as-black);
	transition: background 0.15s ease, transform 0.15s ease;
}

.as-arrow-badge svg {
	width: 12px;
	height: 12px;
}

.as-section-link:hover .as-arrow-badge {
	background: var(--as-amber-dark);
	transform: translateX(3px);
}

.as-section-header--divider {
	align-items: baseline;
	padding-bottom: 20px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	margin-bottom: 36px;
}

/* ==========================================================================
   Button Hierarchy System (Prioritizing Shop/Primary over Request Quote)
   ========================================================================== */

.as-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 28px;
	font-weight: 600;
	font-size: 15px;
	border-radius: 4px;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Primary Button (Solid Amber Background - Conversion Priority) */
.as-btn--primary {
	background: var(--as-amber);
	color: var(--as-black);
	border: 1px solid var(--as-amber);
}

.as-cta .as-btn--primary {
	background: white;
    color: #000;
	border: 1px solid var(--as-amber);
}

.as-btn--primary:hover {
	background: var(--as-amber-dark);
	border-color: #fff;
	color: #fff;
}

/* Secondary Button (Outlined/Ghost style for secondary consideration actions) */
.as-btn--secondary {
	background: transparent;
	color: var(--as-white);
	border: 2px solid rgba(255, 255, 255, 0.4);
}

.as-btn--secondary:hover {
	border-color: var(--as-white);
	background: rgba(255, 255, 255, 0.08);
	color: var(--as-white);
}

/* Legacy helper reference */
.as-btn--ghost {
	background: transparent;
	color: var(--as-white);
	border: 1px solid rgba(255, 255, 255, 0.4);
}

.as-btn--ghost:hover {
	border-color: var(--as-white);
	background: rgba(255, 255, 255, 0.08);
}

/* Same "ghost" treatment as .as-btn--ghost, but for use on light/white
   section backgrounds instead of dark photo bands - e.g. the simplified
   page-nav CTA row on the Monitoring & Response template. */
.as-btn--ghost-dark {
	background: transparent;
	color: var(--as-black);
	border: 1px solid rgba(0, 0, 0, 0.25);
}

.as-btn--ghost-dark:hover {
	border-color: var(--as-black);
	background: rgba(0, 0, 0, 0.05);
}

/* ---- Simplified page-nav CTA row (Monitoring & Response) ----------------- */

.seenyor-page-nav-simple {
	background: #f7f5f2;
	padding-top: 12px;
	padding-bottom: 72px;
}

.seenyor-page-nav-simple .seenyor-cta-buttons {
	justify-content: center;
}

/* ---- Value props strip --------------------------------------------------*/

.as-value-props {
	background: var(--as-black-soft);
	margin-top: 0 !important;
}

.as-value-props-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px 32px;
	padding: 26px 24px;
}

.as-value-prop {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	color: var(--as-white);
	font-size: 14px;
	font-weight: 500;
	flex: 1 1 220px;
	max-width: 280px;
}

.as-value-prop-icon {
	width: 26px;
	height: 26px;
	flex: 0 0 auto;
	fill: var(--as-amber);
}

@media (max-width: 900px) {
	.as-value-prop {
		flex: 1 1 45%;
	}
}

@media (max-width: 500px) {
	.as-value-prop {
		flex: 1 1 100%;
		max-width: none;
		justify-content: flex-start;
	}
}

/* ---- Shop by Category ----------------------------------------------------
   Desktop keeps the tile grid (image on top, label below, no shadow/border).
   On mobile only, the same markup switches to a row-list layout matching
   https://evaculife.com.au/'s "Shop by Category" section: small square
   thumbnail on the left, bold label, trailing arrow, divider between rows -
   easier to scan as a vertical list on a narrow screen than a cramped grid. */

.as-category-list {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 56px 32px;
}

.as-category-row {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	text-decoration: none;
}

.as-category-row-image {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 160px;
	margin-bottom: 22px;
}

.as-category-row-image img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	transition: transform 0.2s ease;
}

.as-category-row:hover .as-category-row-image img {
	transform: scale(1.04);
}

.as-category-row-label {
	color: #142a4c;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.4;
	transition: color 0.15s ease;
}

.as-category-row:hover .as-category-row-label {
	color: var(--as-amber-dark);
}

.as-category-row-arrow {
	display: none; /* desktop tiles don't show the trailing arrow - mobile only, below */
}

@media (min-width: 641px) {
	.as-category-row {
		padding: 12px;
		margin: -12px;
		border-radius: 6px;
		transition: box-shadow 0.2s ease, background 0.2s ease;
	}

	.as-category-row:hover {
		background: var(--as-white);
		box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
	}
}

@media (max-width: 1100px) {
	.as-category-list {
		grid-template-columns: repeat(3, 1fr);
		gap: 48px 28px;
	}
}

/* ---- Mobile only: switch to the row-list layout ---- */
@media (max-width: 640px) {
	.as-category-list {
		display: block;
	}

	.as-category-row {
		flex-direction: row;
		align-items: center;
		text-align: left;
		gap: 14px;
		padding: 16px 2px;
		border-bottom: 1px solid #e6e6e6;
		transition: background 0.15s ease;
	}

	.as-category-row:hover {
		background: #fafafa;
	}

	.as-category-row-image {
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
		margin-bottom: 0;
	}

	.as-category-row-label {
		flex: 1 1 auto;
		font-size: 14.5px;
	}

	.as-category-row-arrow {
		display: flex;
		flex: 0 0 auto;
		width: 20px;
		height: 20px;
		color: #142a4c;
		transition: transform 0.15s ease, color 0.15s ease;
	}

	.as-category-row-arrow svg {
		width: 100%;
		height: 100%;
	}

	.as-category-row:hover .as-category-row-arrow {
		color: var(--as-amber-dark);
		transform: translateX(4px);
	}
}

/* ---- Product sections (Featured / New In) ---------------------------- */

.as-products {
	padding-top: 8px;
	padding-bottom: 8px;
}

.as-section--band {
	background: #f7f5f2;
	padding-top: 56px;
	padding-bottom: 56px;
}

/* ---- From the Blog ---------------------------------------------------- */

.as-blog {
	padding-top: 8px;
	padding-bottom: 56px;
}

.as-blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.as-blog-card {
	display: flex;
	flex-direction: column;
	background: var(--as-white);
	border-radius: 4px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.as-blog-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

.as-blog-card-media {
	aspect-ratio: 16 / 10;
	background: #f0eee9;
}

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

.as-blog-card-body {
	padding: 16px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.as-blog-card-date {
	display: inline-block;
	align-self: flex-start;
	margin-top: auto;
	padding: 4px 10px;
	font-size: 13px;
	color: var(--as-amber-dark);
	background: #f7f2e6;
	border-radius: 2px;
}

.as-blog-card-title {
	margin: 0 0 8px;
	font-size: 18px;
	line-height: 1.35;
	color: var(--as-black);
}

.as-blog-card-excerpt {
	margin: 0 0 10px;
	color: #555;
	line-height: 1.6;
	font-size: 14.5px;
}

@media (max-width: 900px) {
	.as-blog-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.as-blog-grid {
		grid-template-columns: 1fr;
	}
}

/* ---- Shop by Brand (single row) ------------------------------------------ */

.as-brands {
	padding: 60px 24px;
}

.as-brand-strip {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: 20px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	padding: 6px 0 4px;
}

.as-brand-strip-item {
	flex: 1 1 0;
	min-width: 190px;
	max-width: 260px;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 150px;
	background: var(--as-white);
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 6px;
	padding: 10px;
	box-sizing: border-box;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.as-brand-strip-item:hover {
	border-color: var(--as-amber);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}

.as-brand-strip-item img {
	max-width: 92%;
	max-height: 92%;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: grayscale(100%);
	opacity: 0.85;
	transition: filter 0.15s ease, opacity 0.15s ease;
}

.as-brand-strip-item:hover img {
	filter: grayscale(0%);
	opacity: 1;
}

@media (max-width: 782px) {
	.as-brand-strip {
		justify-content: flex-start;
	}

	.as-brand-strip-item {
		flex: 0 0 auto;
		width: 160px;
		min-width: 160px;
	}
}

/* ---- Closing CTA banner ---------------------------------------------------*/

.as-cta {
	background: #e8891c;
}

.as-cta-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	padding: 48px 24px;
}

.as-cta-heading {
	color: var(--as-white);
	font-size: 1.5em;
	font-weight: 700;
	margin: 0 0 8px;
}

.as-cta-body {
	color: rgba(255, 255, 255, 0.72);
	margin: 0;
	max-width: 520px;
}

@media (max-width: 640px) {
	.as-cta-inner {
		text-align: center;
		justify-content: center;
	}

	.as-cta-body {
		max-width: none;
	}
}

/* ==========================================================================
   Seenyor landing page (page-templates/template-seenyor-landing.php)
   Mirrors seenyor.com.au's section structure in Access & Safety's own
   black/amber palette rather than Seenyor's own branding, since this page
   presents it as something sold BY Access and Safety.
   ========================================================================== */

.seenyor-landing-page .seenyor-hero {
	position: relative;
	color: var(--as-black);
	padding: 96px 24px 72px;
	text-align: left;
	background-color: var(--as-black);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center right;
	min-height: 680px;
	display: flex;
	align-items: center;
	overflow: hidden;
}

.seenyor-hero-overlay {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(
		90deg,
		rgba(4, 4, 4, 0.94) 0%,
		rgba(4, 4, 4, 0.86) 28%,
		rgba(4, 4, 4, 0.55) 52%,
		rgba(4, 4, 4, 0.15) 75%,
		rgba(4, 4, 4, 0) 100%
	);
}

.seenyor-hero-inner {
	position: relative;
	z-index: 1;
	width: 100%;
	display: flex;
	align-items: center;
}

.seenyor-hero-left {
	width: min(820px, 62%);
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.seenyor-hero-footnote {
	display: flex;
	align-items: center;
	gap: 6px;
	color: rgba(255, 255, 255, 0.6);
	font-size: 0.8em;
	margin: 4px 0 0;
}

.seenyor-hero-right-cards {
	position: absolute;
	right: 24px;
	bottom: 56px;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
}

.seenyor-notif-card,
.seenyor-stats-card {
	width: 272px;
	background: rgba(8, 14, 30, 0.68);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 18px;
	padding: 16px 20px;
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
	animation: seenyor-card-float 6s ease-in-out infinite;
}

.seenyor-stats-card {
	animation-delay: 1.5s;
	padding: 12px 16px;
}

.seenyor-notif-card-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}

.seenyor-notif-card-icon {
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: linear-gradient(135deg, var(--as-amber), #a86a0c);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.seenyor-notif-card-brand {
	flex: 1;
	font-size: 0.76em;
	color: rgba(255, 255, 255, 0.55);
}

.seenyor-notif-card-time {
	font-size: 0.68em;
	color: rgba(255, 255, 255, 0.32);
}

.seenyor-notif-card-status {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	font-size: 0.95em;
	color: var(--as-white);
	margin-bottom: 6px;
}

.seenyor-notif-card-check {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: rgba(74, 222, 128, 0.15);
	border: 1px solid rgba(74, 222, 128, 0.4);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.seenyor-notif-card-text {
	margin: 0;
	font-size: 0.82em;
	line-height: 1.55;
	color: rgba(200, 215, 235, 0.8);
}

.seenyor-stats-card {
	display: flex;
	gap: 0;
}

.seenyor-stats-card-item {
	flex: 1;
	text-align: center;
	padding: 0 6px;
	border-right: 1px solid rgba(255, 255, 255, 0.08);
	min-width: 0;
}

.seenyor-stats-card-item-top {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	margin-bottom: 4px;
	white-space: nowrap;
}

.seenyor-stats-card-item--last {
	border-right: none;
}

.seenyor-stats-card-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	display: inline-block;
	flex: 0 0 auto;
}

.seenyor-stats-card-label {
	font-size: 0.68em;
	color: rgba(200, 215, 235, 0.6);
	white-space: nowrap;
}

.seenyor-stats-card-value {
	display: block;
	margin-top: 3px;
	font-size: 0.82em;
	font-weight: 700;
	color: var(--as-white);
}

@keyframes seenyor-card-float {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-10px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.seenyor-notif-card,
	.seenyor-stats-card {
		animation: none;
	}
}

@media (max-width: 1100px) {
	.seenyor-hero-right-cards {
		display: none;
	}

	.seenyor-hero-left {
		width: 60%;
	}

	.seenyor-hero {
		background-size: contain;
		background-position: 46% center;
		background-repeat: no-repeat;
	}

	.seenyor-hero-heading {
        font-size: clamp(3em, 4vw, 3.1em) !important;
    }
}

@media (max-width: 768px) {
	.seenyor-hero-right-cards {
		display: none;
	}

	.seenyor-hero-left {
		width: 80%;
	}

	.seenyor-hero-heading {
		font-size: clamp(3em, 4vw, 3.1em) !important;
	}

	.seenyor-hero {
		background-position-x: 50px !important;
	}

	.seenyor-hero .seenyor-badge {
		margin: 0 !important;
	}

}

@media (max-width: 600px) {
	.seenyor-hero {
		background-position-x: -260px !important;
	}

	.seenyor-hero-left {
        width: 100% !important;
    }
}

.seenyor-badge {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 8px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 999px;
	padding: 7px 16px;
	font-size: 12.5px;
	color: rgba(255, 255, 255, 0.85);
	margin: 0 0 22px;
}

.seenyor-badge-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--as-amber);
	flex: 0 0 auto;
}

.seenyor-hero--compact .seenyor-badge {
	background: rgba(10, 10, 10, 0.05);
	border: 1px solid rgba(10, 10, 10, 0.18);
	color: rgba(10, 10, 10, 0.85);
}

.seenyor-eyebrow {
	color: var(--as-amber);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 13px;
	font-weight: 700;
	margin: 0 0 8px;
}

.seenyor-eyebrow + h2 {
	margin-top: 0;
}

.seenyor-hero-heading {
	font-size: clamp(2em, 4vw, 3.1em);
	line-height: 1.18;
	margin: 0 0 22px;
	color: var(--as-white);
	font-weight: 700;
}

.seenyor-hero-highlight {
	color: var(--as-amber-dark);
}

.seenyor-hero-subheading {
	font-size: 1em;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.7);
	margin: 0 0 10px;
}

.seenyor-hero-subtitle {
	color: rgba(255, 255, 255, 0.78);
	line-height: 1.7;
	margin: 0 0 32px;
	max-width: 560px;
}

/* Shorter hero for inner pages that only need a badge + h1 + subtitle
   (no stat row, CTA buttons or floating cards) - e.g. the How It Works
   and Monitoring & Response pages. Keeps the same photo/overlay
   treatment as the front page's hero at a less imposing height.

   Because this box is shorter than the front page's hero, the base
   hero's "background-position: center right" (vertically centered)
   crops more off the top of the photo than the full-height hero does -
   on the monitoring page's professional-agent photo that was cutting
   the person's head off. Anchoring to the top instead means any
   necessary cropping comes off the bottom of the photo, not the top. */
.seenyor-landing-page .seenyor-hero--compact {
	min-height: 420px;
	padding: 80px 24px;
	background-position: right top;
}

/* The compact hero (Installation / Monitoring / Better Than Wearables) keeps
   its original light gradient + dark text treatment - the darker gradient
   and min-height:680px above are specific to the flagship landing-page
   hero, which switched to white text on a photo. */
.seenyor-hero--compact .seenyor-hero-overlay {
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0.94) 0%,
		rgba(255, 255, 255, 0.86) 28%,
		rgba(255, 255, 255, 0.55) 52%,
		rgba(255, 255, 255, 0.15) 75%,
		rgba(255, 255, 255, 0) 100%
	);
}

.seenyor-hero--compact .seenyor-hero-left {
	gap: 14px;
}

.seenyor-hero--compact .seenyor-badge {
	margin-bottom: 0;
}

.seenyor-hero--compact .seenyor-hero-heading {
	margin-bottom: 0;
	color: var(--as-black);
}

.seenyor-hero--compact .seenyor-hero-subtitle {
	margin-bottom: 0;
	color: rgba(10, 10, 10, 0.75);
}

@media (max-width: 640px) {
	.seenyor-landing-page .seenyor-hero--compact {
		min-height: 0;
		padding: 64px 20px 48px;
		background-position: center top;
	}
}

.seenyor-stat-row {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
	margin-bottom: 32px;
	text-align: left;
	max-width: 560px;
}

.seenyor-stat {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: rgba(255, 255, 255, 0.06);
	border-radius: 8px;
	padding: 16px;
}

.seenyor-stat-icon {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(250, 175, 64, 0.15);
	color: var(--as-amber);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}



.seenyor-stat-icon svg {
	width: 18px;
	height: 18px;
}

.seenyor-stat-title {
	color: var(--as-white);
	font-weight: 700;
	margin: 0 0 2px;
	font-size: 14px;
}

.seenyor-stat-desc {
	color: rgba(255, 255, 255, 0.6);
	margin: 0;
	font-size: 13px;
}

.seenyor-cta-buttons {
	display: flex;
	gap: 16px;
	justify-content: flex-start;
	flex-wrap: wrap;
}

.seenyor-cta-buttons a.as-btn {
	padding: 10px 35px;
	border-radius: 40px;
}

/* ---- Generic section scaffolding ---------------------------------------- */

.seenyor-section {
	padding: 64px 24px;
}

.seenyor-section--band {
	background: #f7f5f2;
}

.seenyor-section--dark {
	background: var(--as-black);
	color: rgba(255, 255, 255, 0.85);
}

.seenyor-section--dark h2,
.seenyor-section--dark h3,
.seenyor-section--dark h4 {
	color: var(--as-white);
}

.seenyor-narrow {
	max-width: 760px;
	margin: 0 auto;
}

.seenyor-center {
	text-align: center;
}

.seenyor-two-col {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}

.seenyor-two-col--reverse {
	direction: rtl;
}

.seenyor-two-col--reverse > * {
	direction: ltr;
}

.seenyor-three-col {
	max-width: 1200px;
	margin: 32px auto 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

#seenyor-features > .seenyor-two-col h2 {
	width: 80%;
}

@media (max-width: 768px) {
    #seenyor-features > .seenyor-two-col h2 {
        width: 100%;
    }
}

.seenyor-feature-list {
	display: flex;
	flex-direction: column;
	gap: 22px;
	margin-top: 28px;
}

.seenyor-feature h4 {
	margin: 0 0 6px;
}

.seenyor-feature p {
	margin: 0;
	color: #555;
}

.seenyor-section--dark .seenyor-feature p {
	color: rgba(255, 255, 255, 0.68);
}

/* ---- Private by Design (full-bleed photo section) ------------------------ */

.seenyor-privacy {
	position: relative;
	overflow: hidden;
	color: var(--as-white);
	background-color: var(--as-black);
	background-size: cover;
	background-position: center;
	min-height: 600px;
	display: flex;
	padding: 0;
}

.seenyor-privacy-overlay {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(180deg, rgba(4, 4, 4, 0.6) 0%, rgba(4, 4, 4, 0.35) 42%, rgba(4, 4, 4, 0.8) 100%);
}

.seenyor-privacy-inner {
	position: relative;
	z-index: 1;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding-top: 56px;
	padding-bottom: 30px;
}

.seenyor-privacy-heading {
	text-align: center;
	max-width: 640px;
	margin: 0 auto;
}

.seenyor-privacy-heading h2 {
	color: var(--as-white);
	margin: 0 0 12px;
	font-size: clamp(1.8em, 3.4vw, 2.3em);
}

.seenyor-privacy-heading p {
	color: rgba(255, 255, 255, 0.8);
	margin: 0;
	line-height: 1.65;
}

.seenyor-privacy-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	max-width: 1200px;
	margin: 0 auto;
}

.seenyor-privacy-card {
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 14px;
	padding: 26px 24px;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	cursor: default;
	transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.seenyor-privacy-card:hover,
.seenyor-privacy-card:focus-visible {
	background: rgba(255, 255, 255, 0.18);
	border-color: var(--as-amber);
	transform: translateY(-4px);
	box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35);
	outline: none;
}

.seenyor-privacy-card-icon {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: rgba(250, 175, 64, 0.12);
	border: 1px solid rgba(250, 175, 64, 0.3);
	color: var(--as-amber);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
	transition: background 0.3s ease, border-color 0.3s ease;
}

.seenyor-privacy-card-icon svg {
	width: 20px;
	height: 20px;
}

.seenyor-privacy-card:hover .seenyor-privacy-card-icon,
.seenyor-privacy-card:focus-visible .seenyor-privacy-card-icon {
	background: rgba(250, 175, 64, 0.24);
	border-color: var(--as-amber);
}

.seenyor-privacy-card h4 {
	color: var(--as-white);
	margin: 0 0 8px;
	font-size: 1.05em;
}

.seenyor-privacy-card p {
	color: rgba(255, 255, 255, 0.72);
	margin: 0;
	line-height: 1.6;
	font-size: 0.92em;
}

@media (max-width: 900px) {
	.seenyor-privacy {
		min-height: 640px;
	}

	.seenyor-privacy-grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.seenyor-privacy-card {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		column-gap: 12px;
		row-gap: 4px;
		padding: 12px 16px;
	}

	.seenyor-privacy-card-icon {
		width: 28px;
		height: 28px;
		margin-bottom: 0;
		flex-shrink: 0;
	}

	.seenyor-privacy-card-icon svg {
		width: 16px;
		height: 16px;
	}

	.seenyor-privacy-card h4 {
		margin: 0;
		font-size: 1em;
		flex: 1 1 auto;
	}

	.seenyor-privacy-card p {
		flex-basis: 100%;
		font-size: 0.86em;
		line-height: 1.5;
	}
}

@media (max-width: 560px) {
	.seenyor-privacy {
		min-height: 560px;
	}

	.seenyor-privacy-inner {
		padding-top: 40px;
		padding-bottom: 20px;
	}

	.seenyor-privacy-heading {
		margin: 0 auto;
	}

	.seenyor-privacy-grid {
		gap: 10px;
	}

	.seenyor-privacy-card {
		padding: 10px 14px;
	}
}

/* ---- Intro / risk section image ------------------------------------------ */

.seenyor-intro-row {
	align-items: center;
	/* Overrides the default 1fr/1fr split from .seenyor-two-col — the
	   copy needs more breathing room here than an even 50/50 split gives
	   it, and a narrower image column still looks intentional once the
	   photo itself is enlarged to fill more of it (see
	   .seenyor-intro-media-frame below). */
	grid-template-columns: 2fr 1fr;
	gap: 40px;
}

.seenyor-intro-copy {
	max-width: 100%;
	margin: 0;
}

.seenyor-intro-copy h2 {
	margin: 0 0 20px;
	font-size: clamp(1.6em, 3vw, 2.15em);
	line-height: 1.25;
	color: var(--as-black);
	/* Narrower than the copy column so this long heading breaks onto two
	   lines instead of stretching near-full-width on wide screens. */
	max-width: 30ch;
}

.seenyor-intro-copy p {
	line-height: 1.75;
}

.seenyor-intro-copy p + p {
	margin-top: 18px;
}

.seenyor-intro-media {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
}

.seenyor-intro-media-frame {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 480px;
	aspect-ratio: 1 / 1;
}

.seenyor-intro-media-frame::before {
	content: "";
	position: absolute;
	inset: 6%;
	border-radius: 50%;
	background: radial-gradient(circle at 32% 28%, rgba(47, 127, 240, 0.16), rgba(47, 127, 240, 0.03) 60%, transparent 72%);
	z-index: 0;
}

.seenyor-intro-media-frame::after {
	content: "";
	position: absolute;
	inset: 14%;
	border-radius: 50%;
	border: 1px dashed rgba(47, 127, 240, 0.22);
	z-index: 0;
}

.seenyor-intro-media img {
	position: relative;
	z-index: 1;
	width: 94%;
	height: auto;
	display: block;
	filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.14));
}

.seenyor-intro-media-caption {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 8px 16px;
	background: rgba(47, 127, 240, 0.08);
	border: 1px solid rgba(47, 127, 240, 0.18);
	border-radius: 999px;
	color: #2f5fa0;
	font-size: 13px;
	font-weight: 600;
	text-align: center;
}

/* ---- 24/7 Professional Support band --------------------------------------- */

.seenyor-band {
	position: relative;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: rgba(255, 255, 255, 0.9);
	padding: 0;
	overflow: hidden;
}

.seenyor-band-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(10, 10, 12, 0.92) 0%, rgba(10, 10, 12, 0.72) 42%, rgba(10, 10, 12, 0.35) 68%, rgba(10, 10, 12, 0.15) 100%);
}

.seenyor-band-inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
	gap: 40px;
	align-items: center;
	padding: 96px 24px;
	min-height: 640px;
}

.seenyor-band-copy {
	max-width: 620px;
}

.seenyor-band-copy .seenyor-badge {
	margin-bottom: 20px;
}

.seenyor-band-heading {
	font-size: clamp(1.9em, 3.4vw, 2.7em);
	line-height: 1.2;
	margin: 0 0 18px;
	color: var(--as-white);
	font-weight: 700;
}

.seenyor-band-subtitle {
	color: rgba(255, 255, 255, 0.72);
	line-height: 1.7;
	margin: 0 0 8px;
	max-width: 480px;
}

.seenyor-feature--band {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.seenyor-feature--band .seenyor-feature-icon {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.16);
	color: var(--as-amber);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.seenyor-feature--band .seenyor-feature-icon svg {
	width: 18px;
	height: 18px;
}

.seenyor-feature--band h4 {
	color: var(--as-white);
	margin: 0 0 4px;
}

.seenyor-feature--band p {
	color: rgba(255, 255, 255, 0.66);
	margin: 0;
}

.seenyor-band-cards {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.seenyor-band-cards-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.seenyor-glass-card {
	background: rgba(18, 18, 20, 0.72);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 12px;
	padding: 18px;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 16px 34px rgba(0, 0, 0, 0.3);
}

.seenyor-glass-card--wide {
	padding: 20px 22px;
}

.seenyor-glass-card-header {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 16px;
}

.seenyor-glass-card-header strong {
	display: block;
	color: var(--as-white);
	font-size: 14.5px;
}

.seenyor-glass-sub {
	display: block;
	font-size: 12.5px;
	color: rgba(255, 255, 255, 0.55);
	margin-top: 2px;
}

.seenyor-glass-title {
	display: block;
	color: var(--as-white);
	font-size: 14px;
	margin-bottom: 10px;
}

.seenyor-glass-text {
	color: rgba(255, 255, 255, 0.6);
	font-size: 13px;
	margin: 10px 0 0;
}

.seenyor-mock-timeline--light li {
	color: rgba(255, 255, 255, 0.45);
	position: relative;
	padding-left: 22px;
}

.seenyor-mock-timeline--light li span {
	color: rgba(255, 255, 255, 0.35);
}

.seenyor-mock-timeline--light li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 5px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.25);
}

.seenyor-mock-timeline--light li.is-done {
	color: rgba(255, 255, 255, 0.8);
}

.seenyor-mock-timeline--light li.is-done::before {
	background: #4caf50;
}

/* ---- Ambulance Dispatched card (horizontal connected timeline) ----------- */

.seenyor-ambulance-icon {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(66, 148, 245, 0.16);
	border: 1px solid rgba(66, 148, 245, 0.4);
	color: #5ba3f5;
}

.seenyor-ambulance-icon svg {
	width: 18px;
	height: 18px;
}

.seenyor-ambulance-title {
	display: flex;
	align-items: center;
	gap: 7px;
	color: #5ba3f5;
}

.seenyor-ambulance-title .seenyor-mock-dot {
	background: #5ba3f5;
	animation: seenyor-live-pulse-blue 1.6s ease-in-out infinite;
}

@keyframes seenyor-live-pulse-blue {
	0%, 100% {
		box-shadow: 0 0 0 0 rgba(91, 163, 245, 0.55);
	}
	50% {
		box-shadow: 0 0 0 4px rgba(91, 163, 245, 0);
	}
}

.seenyor-ambulance-card .seenyor-glass-card-header {
	margin-bottom: 0;
	padding-bottom: 18px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.seenyor-ambulance-timeline {
	position: relative;
	display: flex;
	justify-content: space-between;
	padding-top: 20px;
}

.seenyor-ambulance-timeline::before {
	content: "";
	position: absolute;
	top: 32px;
	left: 14px;
	right: 14px;
	height: 2px;
	background: rgba(91, 163, 245, 0.3);
}

.seenyor-ambulance-step {
	position: relative;
	z-index: 1;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8px;
}

.seenyor-ambulance-node {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.08);
	border: 2px solid rgba(255, 255, 255, 0.16);
	color: #fff;
}

.seenyor-ambulance-node svg {
	width: 13px;
	height: 13px;
}

.seenyor-ambulance-step.is-done .seenyor-ambulance-node {
	background: #2f7ff0;
	border-color: #2f7ff0;
}

.seenyor-ambulance-step.is-current .seenyor-ambulance-node {
	background: rgba(47, 127, 240, 0.12);
	border-color: #5ba3f5;
}

.seenyor-ambulance-node-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #5ba3f5;
}

.seenyor-ambulance-label {
	font-size: 12.5px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.85);
	line-height: 1.3;
}

.seenyor-ambulance-step.is-current .seenyor-ambulance-label {
	color: #5ba3f5;
}

.seenyor-ambulance-time {
	font-size: 11.5px;
	color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 480px) {
	.seenyor-ambulance-label {
		font-size: 11px;
	}
}

.seenyor-mock-timeline--light li.is-current {
	color: var(--as-white);
	font-weight: 600;
}

.seenyor-mock-timeline--light li.is-current::before {
	background: var(--as-amber);
	box-shadow: 0 0 0 4px rgba(250, 175, 64, 0.2);
}

.seenyor-audio-wave {
	display: flex;
	align-items: center;
	gap: 3px;
	height: 28px;
	margin: 14px 0;
}

.seenyor-audio-wave span {
	flex: 1;
	background: var(--as-amber);
	opacity: 0.85;
	border-radius: 2px;
	transform-origin: center;
	animation: seenyor-wave-bounce 1.1s ease-in-out infinite;
}

.seenyor-audio-wave span:nth-child(1) { --wave-h: 35%; animation-delay: -1.0s; }
.seenyor-audio-wave span:nth-child(2) { --wave-h: 70%; animation-delay: -0.8s; }
.seenyor-audio-wave span:nth-child(3) { --wave-h: 45%; animation-delay: -0.6s; }
.seenyor-audio-wave span:nth-child(4) { --wave-h: 100%; animation-delay: -0.4s; }
.seenyor-audio-wave span:nth-child(5) { --wave-h: 55%; animation-delay: -0.2s; }
.seenyor-audio-wave span:nth-child(6) { --wave-h: 80%; animation-delay: -0.9s; }
.seenyor-audio-wave span:nth-child(7) { --wave-h: 40%; animation-delay: -0.5s; }

@keyframes seenyor-wave-bounce {
	0%, 100% {
		height: 18%;
		opacity: 0.55;
	}
	50% {
		height: var(--wave-h, 60%);
		opacity: 1;
	}
}

.seenyor-talk-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--as-amber);
	color: var(--as-black);
	border: none;
	border-radius: 999px;
	padding: 9px 18px;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}

.seenyor-talk-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 999px;
	border: 1.5px solid var(--as-amber);
	animation: seenyor-talk-pulse 1.8s ease-out infinite;
	pointer-events: none;
}

@keyframes seenyor-talk-pulse {
	0% {
		opacity: 0.6;
		transform: scale(1);
	}
	100% {
		opacity: 0;
		transform: scale(1.35);
	}
}

.seenyor-talk-btn svg {
	width: 15px;
	height: 15px;
	position: relative;
}

.seenyor-talk-btn span {
	position: relative;
}

.seenyor-live-dot {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #2e7d32;
	margin-right: 5px;
	animation: seenyor-live-pulse 1.6s ease-in-out infinite;
}

@keyframes seenyor-live-pulse {
	0%, 100% {
		box-shadow: 0 0 0 0 rgba(46, 125, 50, 0.5);
	}
	50% {
		box-shadow: 0 0 0 4px rgba(46, 125, 50, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.seenyor-audio-wave span,
	.seenyor-talk-btn::before,
	.seenyor-live-dot {
		animation: none;
	}
}

@media (max-width: 900px) {
	.seenyor-band-inner {
		grid-template-columns: 1fr;
		padding: 56px 20px;
		min-height: 0;
	}

	.seenyor-band-copy .seenyor-badge {
		margin-bottom: 24px;
	}

	.seenyor-band-cards-row {
		grid-template-columns: 1fr;
	}

	/* Previously order: -1 put the image above the heading on mobile —
	   reading "photo, then headline, then body copy" felt backwards.
	   Removing it lets the image render in its natural place after the
	   text (same top-to-bottom order as the desktop reading order:
	   eyebrow → heading → body → image), which matches how every other
	   stacked section on this page already reads on mobile. */
	.seenyor-intro-media-frame {
		max-width: 260px;
	}
}

.seenyor-check-list {
	list-style: none;
	margin: 20px 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.seenyor-check-list li {
	padding-left: 28px;
	position: relative;
}

.seenyor-check-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--as-amber);
}

/* ---- Simple CSS "app/dashboard" mockup cards -----------------------------
   Stand-ins for seenyor.com.au's real product-UI screenshots, which
   aren't ours to reuse. Swap for real screenshots once Access and Safety
   has its own to show. */

.seenyor-mock-card,
.seenyor-mock-stat-card {
	background: var(--as-white);
	border-radius: 10px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
	padding: 20px;
}

.seenyor-mock-card-header {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
	margin-bottom: 16px;
	color: var(--as-black);
}

.seenyor-mock-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #e0532b;
	flex: 0 0 auto;
}

.seenyor-mock-timeline {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.seenyor-mock-timeline li {
	font-size: 14px;
	color: #444;
}

.seenyor-mock-timeline li span {
	display: inline-block;
	width: 70px;
	color: #999;
	font-variant-numeric: tabular-nums;
}

.seenyor-mock-audio {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	padding-top: 14px;
}

.seenyor-mock-badge {
	background: rgba(76, 175, 80, 0.15);
	color: #2e7d32;
	font-size: 12px;
	font-weight: 700;
	padding: 3px 10px;
	border-radius: 999px;
}

.seenyor-mock-badge--live {
	background: rgba(224, 83, 43, 0.12);
	color: #2e7d32;
	margin-left: 8px;
}

/* ---- Daily wellness dashboard mockup -------------------------------------
   Stand-in for seenyor.com.au's real product-UI screenshots, which
   aren't ours to reuse. Swap for real screenshots once Access and Safety
   has its own to show. */

.seenyor-wellness-dashboard {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.seenyor-wellness-card {
	background: var(--as-white);
	border-radius: 16px;
	box-shadow: 0 16px 40px rgba(20, 25, 40, 0.08);
	padding: 24px;
}

.seenyor-wellness-card--split {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 24px;
}

.seenyor-wellness-divider {
	width: 1px;
	background: rgba(20, 25, 40, 0.08);
}

.seenyor-wellness-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.seenyor-wellness-label {
	text-transform: uppercase;
	letter-spacing: 0.09em;
	font-size: 11.5px;
	font-weight: 700;
	color: rgba(30, 35, 50, 0.45);
	margin: 0 0 16px;
}

.seenyor-wellness-value {
	font-size: 2em;
	font-weight: 700;
	color: var(--as-black);
	margin: 12px 0 0;
	line-height: 1;
}

.seenyor-wellness-value span {
	font-size: 13px;
	font-weight: 400;
	color: rgba(30, 35, 50, 0.45);
	margin-left: 6px;
}

.seenyor-wellness-card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0;
}

.seenyor-wellness-card-top .seenyor-wellness-label {
	margin-bottom: 0;
}

.seenyor-wellness-tag {
	font-size: 11.5px;
	font-weight: 700;
	color: #2f7ff0;
	letter-spacing: 0.03em;
}

.seenyor-wellness-tag--live {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: #e0532b;
}

.seenyor-wellness-tag--live .seenyor-live-dot {
	background: #e0532b;
}

.seenyor-wellness-tag,
.seenyor-wellness-value,
.seenyor-wellness-progress-value {
	transition: opacity 0.25s ease;
}

.seenyor-wellness-tag.is-updating,
.seenyor-wellness-value.is-updating,
.seenyor-wellness-progress-value.is-updating {
	opacity: 0;
}

/* -- Sleep quality bars -- */

.seenyor-sleep-bars {
	display: flex;
	align-items: flex-end;
	gap: 4px;
	height: 64px;
}

.seenyor-sleep-bars span {
	flex: 1;
	background: #2f7ff0;
	border-radius: 3px;
	min-height: 6px;
	height: var(--peak);
	animation: seenyor-sleep-wave 2.6s ease-in-out infinite;
}

@keyframes seenyor-sleep-wave {
	0%,
	100% {
		height: calc(var(--peak) * 0.45);
		opacity: 0.75;
	}
	50% {
		height: var(--peak);
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.seenyor-sleep-bars span {
		animation: none;
		height: var(--peak);
	}
}

/* -- Sleep stages segmented bar -- */

.seenyor-sleep-stage-bar {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 8px;
	margin-bottom: 18px;
}

.seenyor-sleep-marker {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #e0532b;
	flex: 0 0 auto;
}

.seenyor-stage-seg {
	display: block;
	height: 8px;
	border-radius: 999px;
}

.seenyor-stage-seg--deep {
	background: #2f7ff0;
}

.seenyor-stage-seg--rem {
	background: #3fd6d6;
}

.seenyor-stage-seg--light {
	background: #bcd6fb;
}

.seenyor-sleep-stage-list {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.seenyor-sleep-stage-list li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	color: rgba(30, 35, 50, 0.65);
}

.seenyor-sleep-stage-list li strong {
	margin-left: auto;
	color: var(--as-black);
	font-weight: 700;
}

.seenyor-stage-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex: 0 0 auto;
}

.seenyor-stage-dot--deep {
	background: #2f7ff0;
}

.seenyor-stage-dot--rem {
	background: #3fd6d6;
}

.seenyor-stage-dot--light {
	background: #bcd6fb;
}

.seenyor-stage-dot--good {
	background: #43a047;
}

.seenyor-wellness-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(67, 160, 71, 0.1);
	border: 1px solid rgba(67, 160, 71, 0.25);
	color: #2e7d32;
	font-size: 12.5px;
	font-weight: 600;
	padding: 8px 14px;
	border-radius: 999px;
	margin: 0;
}

.seenyor-wellness-pill-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #43a047;
	flex: 0 0 auto;
}

/* -- Heart rate ECG line -- */

.seenyor-ecg {
	width: 100%;
	height: 56px;
	margin: 14px 0 12px;
	overflow: hidden;
}

.seenyor-ecg polyline {
	stroke: #2f7ff0;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.seenyor-ecg-track {
	animation: seenyor-ecg-scroll 5s linear infinite;
}

@keyframes seenyor-ecg-scroll {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-300px);
	}
}

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

.seenyor-wellness-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 12.5px;
	color: rgba(30, 35, 50, 0.5);
	border-top: 1px solid rgba(20, 25, 40, 0.08);
	padding-top: 14px;
}

.seenyor-wellness-foot-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #43a047;
	font-weight: 600;
}

/* -- Activity bars -- */

.seenyor-activity-bars {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	height: 70px;
	margin: 16px 0 18px;
}

.seenyor-activity-bar {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	height: 100%;
	gap: 8px;
}

.seenyor-activity-bar span {
	width: 100%;
	background: #d7e6fc;
	border-radius: 5px;
	min-height: 6px;
	transition: background 0.5s ease, box-shadow 0.5s ease;
}

.seenyor-activity-bar em {
	font-style: normal;
	font-size: 11px;
	color: rgba(30, 35, 50, 0.45);
	transition: color 0.5s ease, font-weight 0.5s ease;
}

.seenyor-activity-bar.is-today span {
	background: #2f9bf0;
	box-shadow: 0 0 16px rgba(47, 155, 240, 0.55);
}

.seenyor-activity-bar.is-today em {
	color: #2f7ff0;
	font-weight: 700;
}

.seenyor-wellness-progress {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 12.5px;
	color: rgba(30, 35, 50, 0.55);
}

.seenyor-wellness-progress-label {
	flex: 0 0 auto;
}

.seenyor-wellness-progress-bar {
	flex: 1;
	height: 6px;
	border-radius: 999px;
	background: rgba(20, 25, 40, 0.08);
	overflow: hidden;
}

.seenyor-wellness-progress-bar span {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, #2f7ff0, #3fd6d6);
	border-radius: 999px;
	transition: width 0.6s ease;
}

.seenyor-wellness-progress-value {
	flex: 0 0 auto;
	font-weight: 700;
	color: var(--as-black);
}

@media (max-width: 640px) {
	.seenyor-wellness-card--split {
		grid-template-columns: 1fr;
	}

	.seenyor-wellness-divider {
		width: auto;
		height: 1px;
	}

	.seenyor-wellness-row {
		grid-template-columns: 1fr;
	}
}

/* ---- Wellness dashboard showcase (5-card grid) ---------------------------
   A second, more detailed dashboard showcase further down the page. Same
   "illustrative mockup, not live data" approach as the wellness cards
   above — every number here is a fixed sample value for demonstrating the
   feature, not a real reading. */

.seenyor-dash-section {
	background: #f7f7f5;
}

.seenyor-dash-grid {
	max-width: 1200px;
	margin: 40px auto 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.seenyor-dash-card {
	background: var(--as-white);
	border-radius: 14px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
	padding: 24px;
}

/* Sleep Insights spans 2 of the 3 base columns (≈66%), Routine Changes
   takes the remaining 1 (≈33%) to complete row one; Daily Movement,
   Nighttime Activity, and Live Room Awareness each take a single column,
   so three of them naturally fill row two exactly. */
.seenyor-dash-card--wide {
	grid-column: span 2;
}

.seenyor-dash-card-head {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

.seenyor-dash-icon {
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.seenyor-dash-icon svg {
	width: 18px;
	height: 18px;
}

.seenyor-dash-icon--purple {
	background: rgba(155, 92, 246, 0.12);
	color: #9b5cf6;
}

.seenyor-dash-icon--blue {
	background: rgba(47, 127, 240, 0.12);
	color: #2f7ff0;
}

.seenyor-dash-icon--teal {
	background: rgba(63, 214, 214, 0.15);
	color: #21a3a3;
}

.seenyor-dash-card-title {
	flex: 1 1 auto;
	min-width: 140px;
}

.seenyor-dash-card-title h4 {
	margin: 0 0 2px;
	font-size: 1.05em;
	color: var(--as-black);
}

.seenyor-dash-card-title p {
	margin: 0;
	font-size: 13px;
	color: #888;
}

.seenyor-dash-sleep-stats {
	display: flex;
	gap: 22px;
	flex-wrap: wrap;
}

.seenyor-dash-sleep-stats > div {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.seenyor-dash-sleep-stats span {
	font-size: 10px;
	letter-spacing: 0.05em;
	color: #999;
	text-transform: uppercase;
}

.seenyor-dash-sleep-stats strong {
	font-size: 15px;
	color: var(--as-black);
}

.seenyor-dash-text-purple {
	color: #9b5cf6 !important;
}

.seenyor-dash-text-good {
	color: #2e7d32 !important;
}

.seenyor-dash-segmented {
	display: inline-flex;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 999px;
	overflow: hidden;
	margin-left: auto;
}

.seenyor-dash-segmented span {
	padding: 5px 10px;
	font-size: 11px;
	color: #888;
}

.seenyor-dash-segmented span:first-child {
	background: #f1f1f1;
	color: var(--as-black);
	font-weight: 700;
}

.seenyor-dash-legend {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 0 0 18px;
	padding: 0;
	font-size: 13px;
	color: #666;
}

.seenyor-dash-legend li {
	display: flex;
	align-items: center;
	gap: 6px;
}

.seenyor-dash-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	display: inline-block;
}

.seenyor-dash-dot--awake { background: #f5a623; }
.seenyor-dash-dot--rem { background: #c86bf0; }
.seenyor-dash-dot--light { background: #56c7f0; }
.seenyor-dash-dot--deep { background: #6d3fd6; }
.seenyor-dash-dot--inbed { background: #2f7ff0; }
.seenyor-dash-dot--outbed { background: #f5a623; }
.seenyor-dash-dot--restless { background: #c86bf0; }
.seenyor-dash-dot--active { background: #1a1a2e; }

.seenyor-dash-sleep-chart {
	display: flex;
	flex-direction: column;
	gap: 10px;
	position: relative;
}

.seenyor-dash-sleep-row {
	display: flex;
	align-items: center;
	gap: 14px;
}

.seenyor-dash-sleep-label {
	flex: 0 0 52px;
	font-size: 13px;
	color: #888;
}

.seenyor-dash-sleep-track {
	position: relative;
	flex: 1 1 auto;
	height: 22px;
	background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.04) 0, rgba(0, 0, 0, 0.04) 1px, transparent 1px, transparent calc(100% / 6));
	border-radius: 6px;
}

.seenyor-dash-sleep-bar {
	position: absolute;
	top: 0;
	height: 100%;
	border-radius: 6px;
	/* Reset <button> defaults — these render as plain colored bars, not
	   button-looking chrome. */
	appearance: none;
	-webkit-appearance: none;
	border: none;
	padding: 0;
	margin: 0;
	font: inherit;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.seenyor-dash-sleep-bar:hover,
.seenyor-dash-sleep-bar:focus-visible,
.seenyor-dash-sleep-bar.is-active {
	transform: scaleY(1.25);
	filter: brightness(1.08);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
	z-index: 2;
}

.seenyor-dash-sleep-bar:focus-visible {
	outline: 2px solid #2f7ff0;
	outline-offset: 2px;
}

.seenyor-dash-sleep-bar--awake { background: #f5a623 !important; }
.seenyor-dash-sleep-bar--rem { background: #c86bf0 !important; }
.seenyor-dash-sleep-bar--light { background: #56c7f0 !important; }
.seenyor-dash-sleep-bar--deep { background: #6d3fd6 !important; }

.seenyor-dash-sleep-axis {
	display: flex;
	justify-content: space-between;
	margin-top: 4px;
	padding-left: 66px;
	font-size: 11px;
	color: #aaa;
}

/* Hover/tap tooltip for the Sleep Insights chart. Positioned by JS
   (assets/js/seenyor-interactive-dashboard.js) directly above whichever
   stage bar is active, using inline left/top styles; everything else
   here is static chrome. */
.seenyor-dash-sleep-tooltip {
	position: absolute;
	transform: translate(-50%, -100%);
	margin-top: -10px;
	background: var(--as-black);
	color: var(--as-white);
	border-radius: 8px;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
	padding: 12px 14px;
	font-size: 12px;
	width: 200px;
	z-index: 5;
	pointer-events: none;
}

.seenyor-dash-sleep-tooltip[hidden] {
	display: none;
}

.seenyor-dash-sleep-tooltip-range {
	margin: 0 0 2px;
	color: rgba(255, 255, 255, 0.55);
	font-size: 11px;
}

.seenyor-dash-sleep-tooltip-stage {
	margin: 0 0 4px;
	font-weight: 700;
}

.seenyor-dash-sleep-tooltip-desc {
	margin: 0 0 10px;
	color: rgba(255, 255, 255, 0.8);
	line-height: 1.4;
}

.seenyor-dash-sleep-tooltip-vitals {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	padding-top: 8px;
}

.seenyor-dash-sleep-tooltip-vitals div {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.seenyor-dash-sleep-tooltip-vitals span {
	font-size: 10px;
	color: rgba(255, 255, 255, 0.5);
}

.seenyor-dash-sleep-tooltip-vitals strong {
	font-size: 12px;
}

.seenyor-dash-hint {
	margin: 14px 0 0;
	font-size: 12px;
	color: #aaa;
	text-align: center;
}

.seenyor-dash-week-chart {
	position: relative;
	margin-bottom: 18px;
}

.seenyor-dash-week-tooltip {
	position: absolute;
	top: -8px;
	left: 50%;
	transform: translate(-50%, -100%);
	background: var(--as-white);
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 6px;
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
	padding: 6px 12px;
	font-size: 12px;
	white-space: nowrap;
	display: flex;
	flex-direction: column;
	pointer-events: none;
	transition: left 0.2s ease;
}

.seenyor-dash-week-tooltip[hidden] {
	display: none;
}

.seenyor-dash-week-tooltip span {
	color: #999;
}

.seenyor-dash-week-bars {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	height: 110px;
}

.seenyor-dash-week-bar {
	flex: 1 1 0;
	background: rgba(47, 127, 240, 0.18) !important;
	border-radius: 6px;
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	/* Reset <button> defaults. */
	appearance: none;
	-webkit-appearance: none;
	border: none;
	padding: 0;
	margin: 0;
	font: inherit;
	cursor: pointer;
	transition: background 0.15s ease;
}

.seenyor-dash-week-bar:hover,
.seenyor-dash-week-bar:focus-visible,
.seenyor-dash-week-bar.is-active {
	background: #2f7ff0 !important;
}

.seenyor-dash-week-bar:focus-visible {
	outline: 2px solid #2f7ff0 !important;
	outline-offset: 2px;
}

.seenyor-dash-week-bar em {
	position: absolute;
	bottom: -20px;
	font-style: normal;
	font-size: 11px;
	color: #999;
}

.seenyor-dash-week-bar:hover em,
.seenyor-dash-week-bar:focus-visible em,
.seenyor-dash-week-bar.is-active em {
	color: var(--as-black);
	font-weight: 700;
}

.seenyor-dash-mini-stat-value.is-updating {
	opacity: 0.3;
}

.seenyor-dash-mini-stat {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 26px;
	background: #f5f5f5;
	border-radius: 999px;
	padding: 8px 14px;
	width: fit-content;
	font-size: 13px;
}

.seenyor-dash-mini-stat-icon {
	color: #2f7ff0;
	display: inline-flex;
}

.seenyor-dash-mini-stat-icon svg {
	width: 14px;
	height: 14px;
}

.seenyor-dash-mini-stat-value {
	font-weight: 700;
	color: var(--as-black);
}

.seenyor-dash-mini-stat-label {
	color: #888;
}

.seenyor-dash-hour-bars {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	height: 90px;
	margin-bottom: 8px;
}

.seenyor-dash-hour-bar {
	flex: 1 1 0;
	height: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	position: relative;
}

.seenyor-dash-hour-bar span {
	display: block;
	width: 60%;
	background: rgba(47, 127, 240, 0.18);
	border-radius: 4px;
}

.seenyor-dash-hour-bar.is-active span {
	background: #2f7ff0;
}

.seenyor-dash-hour-bar em {
	position: absolute;
	bottom: -18px;
	font-style: normal;
	font-size: 10px;
	color: #999;
}

.seenyor-dash-trend {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 26px 0 2px;
	font-size: 1.2em;
	font-weight: 700;
	color: #2f7ff0;
}

.seenyor-dash-trend-arrow {
	font-weight: 700;
}

.seenyor-dash-trend-sub {
	margin: 0;
	font-size: 12px;
	color: #999;
}

.seenyor-dash-night-stats {
	display: flex;
	gap: 18px;
	margin-bottom: 20px;
	flex-wrap: wrap;
}

.seenyor-dash-night-stats > div {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
}

.seenyor-dash-night-icon {
	color: #2f7ff0;
	margin-bottom: 4px;
}

.seenyor-dash-night-icon svg {
	width: 18px;
	height: 18px;
}

.seenyor-dash-night-stats strong {
	font-size: 1.1em;
	color: var(--as-black);
}

.seenyor-dash-night-stats em {
	font-style: normal;
	font-size: 12px;
	color: #999;
}

.seenyor-dash-night-timeline {
	display: flex;
	height: 12px;
	border-radius: 999px;
	overflow: hidden;
	margin-bottom: 6px;
}

.seenyor-dash-night-seg--inbed { background: #2f7ff0; }
.seenyor-dash-night-seg--outbed { background: #f5a623; }
.seenyor-dash-night-seg--restless { background: #c86bf0; }
.seenyor-dash-night-seg--active { background: #1a1a2e; }

.seenyor-dash-night-axis {
	display: flex;
	justify-content: space-between;
	font-size: 10px;
	color: #aaa;
	margin-bottom: 14px;
}

.seenyor-dash-legend--night {
	margin-bottom: 0;
	font-size: 12px;
	gap: 12px;
}

.seenyor-dash-room {
	position: relative;
	height: 220px;
	background: linear-gradient(180deg, #fbeee3 0%, #fdf6ef 100%);
	border: 2px solid #e0a06a;
	border-radius: 10px;
	margin-top: 4px;
}

.seenyor-dash-room-sensor {
	position: absolute;
	top: -8px;
	left: 50%;
	transform: translateX(-50%);
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--as-white);
	border: 2px solid #999;
}

.seenyor-dash-room-door {
	position: absolute;
	background: #444;
	border-radius: 2px;
}

.seenyor-dash-room-door em {
	position: absolute;
	font-style: normal;
	font-size: 10px;
	color: #999;
}

.seenyor-dash-room-door--top {
	top: -3px;
	right: 30px;
	width: 34px;
	height: 6px;
}

.seenyor-dash-room-door--top em {
	top: -16px;
	right: 0;
}

.seenyor-dash-room-door--left {
	left: -3px;
	top: 30px;
	width: 6px;
	height: 34px;
}

.seenyor-dash-room-door--left em {
	left: -22px;
	top: 10px;
	writing-mode: vertical-rl;
}

.seenyor-dash-room-person {
	position: absolute;
	top: 50%;
	left: 55%;
	width: 20px;
	height: 20px;
}

.seenyor-dash-room-dot {
	position: absolute;
	inset: 6px;
	border-radius: 50%;
	background: #2f7ff0;
	border: 2px solid var(--as-white);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.seenyor-dash-room-pulse {
	position: absolute;
	inset: -14px;
	border-radius: 50%;
	background: rgba(63, 214, 214, 0.35);
	animation: seenyor-dash-room-pulse 2.4s ease-out infinite;
}

@keyframes seenyor-dash-room-pulse {
	0% { transform: scale(0.4); opacity: 0.7; }
	100% { transform: scale(1.8); opacity: 0; }
}

.seenyor-dash-room-status {
	position: absolute;
	left: 12px;
	bottom: 12px;
	display: flex;
	align-items: center;
	gap: 8px;
	background: rgba(20, 20, 20, 0.85);
	color: var(--as-white);
	border-radius: 8px;
	padding: 8px 12px;
}

.seenyor-dash-room-status-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #4ade80;
	flex: 0 0 auto;
}

.seenyor-dash-room-status strong {
	display: block;
	font-size: 13px;
}

.seenyor-dash-room-status span {
	display: block;
	font-size: 11px;
	color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 900px) {
	.seenyor-dash-grid {
		grid-template-columns: 1fr;
	}

	.seenyor-dash-card--wide {
		grid-column: span 1;
	}

	.seenyor-dash-sleep-stats {
		gap: 16px;
	}
}

/* ---- Real story steps ---------------------------------------------------- */

.seenyor-story-steps {
	max-width: 1200px;
	margin: 40px auto 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
}

.seenyor-img-placeholder {
	aspect-ratio: 4 / 3;
	border-radius: 8px;
	background: repeating-linear-gradient(135deg, #ececec, #ececec 10px, #e2e2e2 10px, #e2e2e2 20px);
	display: flex;
	align-items: flex-end;
	padding: 10px;
	margin-bottom: 16px;
	color: #888;
	font-size: 12px;
	font-weight: 700;
	box-sizing: border-box;
}

.seenyor-story-step-no {
	color: var(--as-amber-dark);
	font-weight: 700;
	font-size: 13px;
	margin: 0 0 8px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.seenyor-story-step h4 {
	margin: 0 0 8px;
}

.seenyor-story-step p {
	color: #555;
	font-size: 14px;
	line-height: 1.6;
}

.seenyor-story-quote {
	font-style: italic;
	color: var(--as-black) !important;
	font-weight: 600;
}

/* ---- Final CTA form panel -------------------------------------------------
   Reuses the same generic form styling as the Contact Us page
   (.as-contact-form-panel input/textarea/button rules) by sharing class
   names on the form itself; this wrapper just adds the card chrome. */

.seenyor-form-panel {
	background: var(--as-white);
	color: var(--as-black);
	border-radius: 10px;
	padding: 36px;
	margin-top: 32px;
}

.seenyor-form-panel h3 {
	margin: 0 0 6px;
}

.seenyor-form-panel .as-contact-fallback-form {
	margin-top: 20px;
}

@media (max-width: 900px) {
	.seenyor-stat-row {
		grid-template-columns: repeat(2, 1fr);
	}

	.seenyor-two-col,
	.seenyor-two-col--reverse {
		grid-template-columns: 1fr;
		direction: ltr;
		gap: 32px;
	}

	.seenyor-three-col {
		grid-template-columns: 1fr;
	}

	.seenyor-story-steps {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {

	.seenyor-story-steps {
		grid-template-columns: 1fr;
	}

	.seenyor-hero-heading {
		font-size: 1.8em;
	}

	.seenyor-landing-page .seenyor-hero {
		min-height: 0;
		padding: 64px 20px 48px;
		background-position: center 25%;
	}

	.seenyor-hero-inner {
		max-width: none;
	}

	.seenyor-stat-desc {
		line-height: 15px;
	}
}

/** Woocommerce **/

.storefront-sorting {
	margin-top: 2rem;
}

.single-product .up-sells,
.single-product .cross-sells,
.single-product .related.products {
    clear: both;
    margin-top: 60px;
    padding-top: 40px;
	margin-bottom: 20px;
	border-top: 1px solid #eaeaea;
}

.single-product .up-sells > h2,
.single-product .cross-sells > h2,
.single-product .related.products > h2 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 24px;
    color: #111;
	text-align: left !important;
}

.single-product .up-sells ul.products,
.single-product .cross-sells ul.products,
.single-product .related.products ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
    list-style: none outside !important;
    margin: 0 !important;
    padding: 0 !important;
}

.single-product .up-sells ul.products li.product,
.single-product .cross-sells ul.products li.product,
.single-product .related.products ul.products li.product {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
    display: flex;
    flex-direction: column;
    background: #fff;
    padding: 16px;
    box-sizing: border-box;
    transition: box-shadow 0.2s ease;
}

.single-product .up-sells ul.products li.product:hover,
.single-product .cross-sells ul.products li.product:hover,
.single-product .related.products ul.products li.product:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
	border: 1px solid #eee !important;
    border-radius: 8px !important;
}

.single-product .up-sells ul.products li.product .woocommerce-loop-product__title,
.single-product .related.products ul.products li.product .woocommerce-loop-product__title {
    font-size: 15px;
    font-weight: 600;
    color: #222;
    margin-bottom: 8px;
}

.single-product .up-sells ul.products li.product .price,
.single-product .related.products ul.products li.product .price {
    margin-top: auto;
    margin-bottom: 12px;
    font-weight: 600;
    color: #b8860b;
}

.single-product .up-sells ul.products li.product .button,
.single-product .related.products ul.products li.product .button {
    margin-top: auto;
    text-align: center;
    background-color: #111;
    color: #fff;
    border-radius: 4px;
    padding: 10px 16px;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
}

.single-product .up-sells ul.products li.product .button:hover {
    background-color: #b8860b;
}

.storefront-wc-brands-single-product img {
    max-height: 5em !important;
}

.storefront-full-width-content.single-product div.product .summary {
	padding-top: 50px;
}

@media screen and (max-width: 900px) {
    .single-product .up-sells ul.products,
    .single-product .related.products ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media screen and (max-width: 768px) {
    .storefront-full-width-content.single-product div.product .summary {
		padding-top: 20px;
	}
}

@media screen and (max-width: 600px) {
    .single-product .up-sells ul.products,
    .single-product .related.products ul.products {
        grid-template-columns: 1fr !important;
    }
}

/** Blog **/

@media screen and (max-width: 900px) {
    .as-blog-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media screen and (max-width: 600px) {
    .as-blog-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   Homepage Hero Slider Layout, Animations & Responsiveness
   ========================================================================== */

/* Animation Keyframes.
   Plain two-point (from/to) keyframes — the "fast at first, then slow
   motion" shape comes entirely from the cubic-bezier(0.22, 1, 0.36, 1)
   timing function applied where each animation is used below, not from
   extra keyframe stops. A middle stop (e.g. 55%) forces the browser to
   interpolate that segment on its own and re-apply the easing curve from
   scratch at each stop, which is what caused the visible stutter/restart.
   A single continuous curve across one from/to span animates smoothly the
   whole way through. The starting point is still pulled well below and
   scaled up, so it reads as travelling up into place (as if rising from
   the Shop by Category section below) rather than a small local nudge. */
@keyframes asFadeInBottom {
    from { opacity: 0; transform: translateY(220px) scale(1.14); }
    to   { opacity: 1; transform: translateY(0)      scale(1); }
}
@keyframes asFadeIn {
    from { opacity: 0; transform: scale(1.08); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes asZoomIn {
    from { opacity: 0; transform: scale(0.82); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes asSlideInRight {
    from { opacity: 0; transform: translateX(120px) scale(1.08); }
    to   { opacity: 1; transform: translateX(0)      scale(1); }
}

/* Resting (pre-animation) state for each animated image variant, matching
   its keyframes' `from` step exactly. Without this, the image has no
   "hidden" styling until its own @keyframes animation actually starts —
   but animation-delay doesn't hide anything by itself, it just postpones
   the start. So for that 0.35s delay window, after the slide itself is
   already visible (.as-hero-slide.active flips opacity/visibility
   immediately, with no delay), the image would render in its normal,
   fully-visible, at-rest position, THEN jump back to the `from` state the
   instant the delayed animation kicks in. Applying the same `from` values
   here as plain (non-animated) CSS means the image is already sitting in
   that hidden/offset position throughout the delay, so the animation
   simply continues smoothly from where it visually already was. */
/* These selectors also match .as-360-viewer (the 360° product viewer
   wrapper) alongside plain <img>, so a slide's entrance animation choice
   applies the same way whether its right-hand column is showing the
   single feature image or the interactive viewer. */
.as-hero-image-col img.anim-fade-in-bottom,
.as-hero-image-col img.anim-fade-in,
.as-hero-image-col img.anim-zoom-in,
.as-hero-image-col img.anim-slide-in-right,
.as-hero-image-col .as-360-viewer.anim-fade-in-bottom,
.as-hero-image-col .as-360-viewer.anim-fade-in,
.as-hero-image-col .as-360-viewer.anim-zoom-in,
.as-hero-image-col .as-360-viewer.anim-slide-in-right {
    opacity: 0;
}
.as-hero-image-col img.anim-fade-in-bottom,
.as-hero-image-col .as-360-viewer.anim-fade-in-bottom { transform: translateY(220px) scale(1.14); }
.as-hero-image-col img.anim-fade-in,
.as-hero-image-col .as-360-viewer.anim-fade-in        { transform: scale(1.08); }
.as-hero-image-col img.anim-zoom-in,
.as-hero-image-col .as-360-viewer.anim-zoom-in        { transform: scale(0.82); }
.as-hero-image-col img.anim-slide-in-right,
.as-hero-image-col .as-360-viewer.anim-slide-in-right { transform: translateX(120px) scale(1.08); }

.as-hero-slide.active .as-hero-image-col img.anim-fade-in-bottom,
.as-hero-slide.active .as-hero-image-col .as-360-viewer.anim-fade-in-bottom {
    animation: asFadeInBottom 1.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0.35s;
}
.as-hero-slide.active .as-hero-image-col img.anim-fade-in,
.as-hero-slide.active .as-hero-image-col .as-360-viewer.anim-fade-in {
    animation: asFadeIn 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0.35s;
}
.as-hero-slide.active .as-hero-image-col img.anim-zoom-in,
.as-hero-slide.active .as-hero-image-col .as-360-viewer.anim-zoom-in {
    animation: asZoomIn 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0.35s;
}
.as-hero-slide.active .as-hero-image-col img.anim-slide-in-right,
.as-hero-slide.active .as-hero-image-col .as-360-viewer.anim-slide-in-right {
    animation: asSlideInRight 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0.35s;
}

/* ---- Content-column entrance (previously unanimated) --------------------
   Same "big rise" treatment as the image above — starts well below and
   slightly oversized, then eases smoothly (via the same single
   cubic-bezier curve, not extra keyframe stops) into its final spot — but
   on its own timing so it visibly leads the image (0.1s delay vs. the
   image's 0.35s) rather than both landing at once. Reset to the
   hidden/offset state on every slide (not just the first) so the
   animation replays each time a slide becomes active again, matching how
   the image animations already behave via the same .active toggle. */
.as-hero-text-col {
    opacity: 0;
    transform: translateY(220px) scale(1.06);
}

.as-hero-slide.active .as-hero-text-col {
    animation: asHeroContentFade 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0.1s;
}

@keyframes asHeroContentFade {
    from { opacity: 0; transform: translateY(220px) scale(1.06); }
    to   { opacity: 1; transform: translateY(0)      scale(1); }
}

.as-hero-slider-wrapper {
	position: relative;
	overflow: hidden;
	background-color: #1a1a1a;
	height: 480px; /* Adjust this height to match your desired hero banner size */
}

.as-hero-slider {
	position: relative;
	height: 100%;
	width: 100%;
}

.as-hero-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 1s ease-in-out, visibility 1s ease-in-out;
	display: flex;
	align-items: center;
	background-size: cover;
	background-position: center;
}

.as-hero-slide.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Base Desktop Grid Setup (Left text, Right image inline) */
.as-hero-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0px;
	padding: 0 40px !important;
	position: relative;
	z-index: 2;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
}

.as-hero-inner.col-full:before,
.as-hero-inner.col-full:after {
	display: none !important;
}

.as-hero-text-col {
	flex: 1;
	order: 1;
	color: var(--as-white);
	text-align: left;
	min-width: 0;
}

.as-hero-image-col {
	flex: 1;
	order: 2;
	display: flex;
	justify-content: center;
	align-items: center;
	min-width: 0;
}

.as-hero-image-col img {
	max-width: 100%;
	height: auto;
	max-height: 380px;
	object-fit: contain;
}

/* ---- 360° Product Viewer (hero right-hand column) ------------------------
   Additive alternative to the plain feature image above — a slide shows
   one or the other (see access_safety_homepage_hero() in functions.php),
   never both. Drag/rotate behaviour lives in
   assets/js/hero-360-viewer.js; this block is purely presentational. */
.as-360-viewer {
	position: relative;
	width: 100%;
	max-width: 380px;
	aspect-ratio: 1 / 1;
	cursor: grab;
	touch-action: pan-y;
	-webkit-user-select: none;
	user-select: none;
}

.as-360-viewer.is-dragging {
	cursor: grabbing;
}

.as-360-viewer:focus {
	outline: none;
}

.as-360-stage {
	position: relative;
	width: 100%;
	height: 100%;
}

.as-360-frame {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	/* !important throughout: the generic ".as-hero-image-col img" rule
	   above (max-width/height:auto/object-fit) is a class+tag selector,
	   which is MORE specific than this single class alone, so it was
	   silently winning on "height" (forcing it to "auto", i.e. the image's
	   own intrinsic aspect ratio, instead of stretching to fill the
	   square stage) even though "max-height: none" here already had
	   !important. A wrongly-sized frame doesn't explain frames staying
	   visible by itself (opacity still hides them) — but combined with
	   WP Rocket's LazyLoad reveal (which is also active on this site and
	   can flip an image's opacity via its own "loaded" class once it
	   decides to reveal it, independently of our .active toggle) the two
	   bugs together are what let more than one frame end up visible.
	   Hardening every layout property AND opacity here with !important
	   closes both paths regardless of which one mobile was hitting. */
	max-height: none !important;
	object-fit: contain;
	opacity: 0 !important;
	pointer-events: none;
}

.as-360-frame.active {
	opacity: 1 !important;
}

.as-360-hint {
	position: absolute;
	left: 50%;
	bottom: 6px;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.55);
	color: var(--as-white);
	font-size: 12px;
	white-space: nowrap;
	pointer-events: none;
	transition: opacity 0.4s ease;
}

.as-360-hint svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

.as-360-hint--hidden {
	opacity: 0;
}

/* Left/right rotate-affordance icons — sit at the vertical middle of each
   edge so they read as "this can spin" at a glance, independent of the
   text hint above (which some people miss if they're scanning the
   product rather than reading). Both fade out together on first drag,
   same as the text hint, via .as-360-hint--hidden (shared JS toggle). */
.as-360-edge-hint {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.45);
	color: var(--as-white);
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	transition: opacity 0.4s ease;
	animation: asEdgeHintPulse 1.8s ease-in-out infinite;
}

.as-360-edge-hint svg {
	width: 16px;
	height: 16px;
}

.as-360-edge-hint--left {
	left: 6px;
}

.as-360-edge-hint--right {
	right: 6px;
}

@keyframes asEdgeHintPulse {
	0%, 100% { transform: translateY(-50%) translateX(0); }
	50%      { transform: translateY(-50%) translateX(-3px); }
}

.as-360-edge-hint--right {
	animation-name: asEdgeHintPulseRight;
}

@keyframes asEdgeHintPulseRight {
	0%, 100% { transform: translateY(-50%) translateX(0); }
	50%      { transform: translateY(-50%) translateX(3px); }
}

.as-hero-slide--light .as-360-edge-hint {
	background: rgba(255, 255, 255, 0.85);
	color: var(--as-black);
}

.as-360-dots {
	position: absolute;
	top: 8px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 6px;
}

.as-360-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	transition: background 0.2s, transform 0.2s;
}

.as-360-dot.active {
	background: var(--as-white);
	transform: scale(1.3);
}

.as-hero-slide--light .as-360-hint {
	background: rgba(255, 255, 255, 0.85);
	color: var(--as-black);
}

.as-hero-slide--light .as-360-dot {
	background: rgba(0, 0, 0, 0.25);
}

.as-hero-slide--light .as-360-dot.active {
	background: var(--as-black);
}

.as-hero-content {
	font-size: 16px;
	opacity: 0.9;
	line-height: 1.6;
	margin-bottom: 30px;
}

.as-hero-content h2,
.as-hero-content h1 {
	margin-top: 0 !important;
	color: var(--as-white);
	font-size: 38px;
    line-height: 1.2;
    font-weight: bold;
    margin-bottom: 15px;
}

.as-hero-buttons {
	display: flex;
	gap: 15px;
	justify-content: flex-start;
	flex-wrap: wrap;
}

.as-slider-dots {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 10px;
	z-index: 10;
}

.as-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 2px solid var(--as-white);
	background: transparent;
	cursor: pointer;
	padding: 0;
}

.as-dot.active {
	background: var(--as-white);
}

/* ---- Light-background slide variant --------------------------------------
   Set from the slide's "Slide Background Colour" field in wp-admin
   (Hero Slides -> edit slide). When that colour is light enough that
   white text/buttons would be unreadable on it, access_safety_is_light_color()
   in functions.php adds this class instead. */
.as-hero-slide--light .as-hero-text-col,
.as-hero-slide--light .as-hero-content,
.as-hero-slide--light .as-hero-content h1,
.as-hero-slide--light .as-hero-content h2 {
	color: var(--as-black) !important;
}

.as-hero-slide--light .as-btn--secondary,
.as-hero-slide--light .as-btn--ghost {
	color: var(--as-black);
	border-color: rgba(0, 0, 0, 0.35);
}

.as-hero-slide--light .as-btn--secondary:hover,
.as-hero-slide--light .as-btn--ghost:hover {
	border-color: var(--as-black);
	background: rgba(0, 0, 0, 0.06);
	color: var(--as-black);
}

/* Nav dots sit outside the per-slide markup (they represent all slides at
   once), so they can't pick up .as-hero-slide--light directly - JS toggles
   this wrapper-level class instead, matched to whichever slide is active. */
.as-hero-slider-wrapper--light-active .as-dot {
	border-color: var(--as-black);
}

.as-hero-slider-wrapper--light-active .as-dot.active {
	background: var(--as-black);
}

/* If a hero slide does not contain an image column (or it's empty), center the text and make it full-width */
.as-hero-slide:not(:has(.as-hero-image-col img)),
.as-hero-slide:has(.as-hero-image-col:empty) {
    text-align: center;
}

.as-hero-slide:not(:has(.as-hero-image-col img)) .as-hero-inner,
.as-hero-slide:has(.as-hero-image-col:empty) .as-hero-inner {
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.as-hero-slide:not(:has(.as-hero-image-col img)) .as-hero-text-col,
.as-hero-slide:has(.as-hero-image-col:empty) .as-hero-text-col {
    text-align: center;
    max-width: 800px; /* Keeps line length comfortable for reading */
    margin: 0 auto;
	display: flex;
    flex-direction: column;
    justify-content: center;
}

.as-hero-slide:not(:has(.as-hero-image-col img)) .as-hero-buttons,
.as-hero-slide:has(.as-hero-image-col:empty) .as-hero-buttons {
    justify-content: center;
}

.as-hero-slide:not(:has(.as-hero-image-col img)) .as-hero-image-col,
.as-hero-slide:has(.as-hero-image-col:empty) .as-hero-image-col {
    display: none; /* Hides the image container entirely if no image is present */
}

/* ==========================================================================
   Responsive Breakpoint for Tablets and Mobile (1024px and below)
   ========================================================================== */
@media screen and (max-width: 1024px) {
	.as-hero-slide {
		position: absolute;
		height: auto;
	}

	.as-hero-slide.active {
		position: relative; /* Allows mobile view to flow naturally based on stacked text/image */
	}

	.as-hero-slider-wrapper {
		height: auto;
		min-height: 420px;
	}
	.as-hero-inner {
		flex-direction: column;
		justify-content: center;
		text-align: center;
		padding-top: 20px !important;
		padding-bottom: 60px !important;
		height: auto !important;
	}
	.as-hero-text-col {
		width: 100%;
		text-align: center;
	}
	.as-hero-buttons {
		justify-content: center;
	}
	.as-hero-image-col {
		width: 100%;
		margin-top: 25px;
	}
	.as-hero-image-col img {
		max-height: 260px;
	}
	.as-360-viewer {
		max-width: 260px;
		margin: 0 auto;
	}
}

@media (max-width: 768px) {
	.access-safety-header .header-inner {
		flex-wrap: wrap;
		position: relative;
		padding-bottom: 12px;
	}

	.access-safety-header .main-navigation {
		display: none;
		flex-basis: 100% !important;
		width: 100% !important;
		order: 3;
		background: var(--as-black-soft);
		margin-top: 12px;
		padding: 10px 15px;
		border-top: 1px solid rgba(255, 255, 255, 0.1);
		box-sizing: border-box;
	}

	.access-safety-header .main-navigation.is-open {
		display: block !important;
	}

	.access-safety-header .main-navigation ul {
		flex-direction: column;
		gap: 0;
		width: 100%;
	}

	.access-safety-header .main-navigation .sub-menu {
		position: static;
		border-top: none;
		box-shadow: none;
		background: rgba(0, 0, 0, 0.2) !important;
		padding-left: 15px;
	}

	.access-safety-header .main-navigation a {
		display: block;
		padding: 10px 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	}

	.access-safety-header .header-actions {
		margin-left: auto;
		margin-right: 15px;
	}

	.access-safety-header .menu-toggle {
		display: block;
		order: 4;
	}

	.as-hero-content h2 {
    	line-height: 2.3rem !important;
	}

	.as-hero-content p {
    	margin: 0 0em !important;
	}
}

@media (max-width: 768px) {
    /* Replace '.your-trust-badges-class' with the actual class or ID of your container wrapper */
    .as-value-props-grid {
        display: none !important;
    }

	.as-section.as-categories{
		margin-top: 20px !important;
	}

	.as-section.as-categories .as-section-header {
		padding-bottom: 16px;
		margin-bottom: 28px;
	}
}

@media (max-width: 600px) {
	.access-safety-header .header-logo, .access-safety-header .site-branding img {
		height: 60px !important;
	}

	.access-safety-header .header-inner {
		padding-bottom: 0 !important;
	}

	.as-hero-buttons {
		flex-wrap: nowrap;
	}
}

/* Switch from desktop menu to mobile toggle earlier to prevent cramping on smaller laptops/tablets */
@media screen and (max-width: 1024px) {
    /* Hide the full horizontal desktop navigation */
    .access-safety-header .main-navigation {
        display: none !important;
        width: 100%;
        flex-basis: 100%;
        order: 3;
        background: var(--as-black-soft, #1a1a1a);
        margin-top: 15px;
        padding: 15px;
        box-sizing: border-box;
    }

    /* Show the hamburger menu toggle button */
    .access-safety-header .menu-toggle {
        display: block !important;
        order: 4;
        background: transparent;
        border: none;
        color: #fff;
        font-size: 24px;
        cursor: pointer;
        padding: 5px;
        margin-left: 10px;
    }

    /* When toggled open, make it drop down cleanly */
    .access-safety-header .main-navigation.is-open {
        display: block !important;
    }

    .access-safety-header .header-inner {
        flex-wrap: wrap;
    }

    /* Clean up spacing for action icons on mid-size screens */
    .access-safety-header .header-actions {
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 12px;
    }
}

/* Disable and hide Storefront's default menu toggle button */
button.menu-toggle:before,
button.menu-toggle:after,
button.menu-toggle .menu-toggle-bar:before {
    display: none !important;
}

/* ==========================================================================
   Contact page (page-templates/template-contact.php)
   ========================================================================== */

.entry-header {
	padding: 32px 0 8px;
}

.as-contact-page .entry-title {
	margin: 0 0 6px;
}

.as-contact-page-subtitle {
	color: #5b5b5b;
	max-width: 640px;
	margin: 0;
	line-height: 1.6;
}

.as-contact-intro {
	max-width: 800px;
	margin: 0;
	color: #333;
	line-height: 1.7;
}

.as-contact-grid {
	display: grid !important;
	grid-template-columns: minmax(280px, 380px) 1fr !important;
	gap: 48px !important;
	align-items: start !important;
	width: 100%;
}

.as-contact-grid > .as-contact-info,
.as-contact-grid > .as-contact-form-panel {
	min-width: 0; /* let grid items shrink below their content's intrinsic width instead of overflowing the track */
}

.as-contact-card {
	background: var(--as-white);
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 6px;
	padding: 28px;
}

.as-contact-card-name {
	font-size: 1.1em;
	font-weight: 700;
	color: var(--as-black);
	margin: 0 0 18px;
}

.as-contact-item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin-bottom: 18px;
}

.as-contact-item p {
	margin: 0;
	color: #333;
	line-height: 1.6;
}

.as-contact-item a {
	color: var(--as-black);
	font-weight: 600;
	text-decoration: none;
}

.as-contact-item a:hover {
	color: var(--as-amber-dark);
}

.as-contact-sub {
	color: #6b6b6b;
	font-weight: 400;
}

.as-contact-w3w {
	font-family: monospace;
	font-weight: 600;
}

.as-contact-icon {
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
	fill: var(--as-amber-dark);
	margin-top: 2px;
}

.as-contact-footnote {
	margin: 18px 0 0;
	padding-top: 18px;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	color: #6b6b6b;
	font-size: 0.9em;
}

.as-contact-form-panel {
	background: var(--as-white);
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 6px;
	padding: 28px;
}

/* Loosen Gravity Forms' own layout just enough to sit flush inside our card
   without fighting its default spacing/width assumptions. */
.as-contact-form .gform_wrapper {
	max-width: none !important;
}

.as-contact-form .gform_footer {
	margin-top: 8px !important;
	padding: 0 !important;
}

.as-contact-form .gform_footer input[type="submit"] {
	background: var(--as-amber) !important;
	color: var(--as-black) !important;
	border: 1px solid var(--as-amber) !important;
	border-radius: 2px !important;
	font-weight: 600 !important;
	padding: 12px 28px !important;
}

.as-contact-form .gform_footer input[type="submit"]:hover {
	background: var(--as-amber-dark) !important;
	border-color: var(--as-amber-dark) !important;
}

.as-contact-map-section {
	margin-top: 0 !important; /* the map sits flush under the info/form band rather than adding another full gap */
}

.as-contact-map {
	position: relative;
	width: 100%;
	padding-bottom: 42%;
	border-radius: 6px;
	overflow: hidden;
	border: 1px solid rgba(0, 0, 0, 0.08);
}

.as-contact-map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (max-width: 900px) {
	.as-contact-grid {
		grid-template-columns: 1fr !important;
		gap: 32px !important;
	}

	.as-contact-map {
		padding-bottom: 70%;
	}
}

/* ==========================================================================
   Homepage enquiry form ("Find the right solution for your site")
   ========================================================================== */

.as-enquire {
	position: relative;
	border-top: 3px solid var(--as-amber);
	background-color: var(--as-black);
	background-image:
		linear-gradient(180deg, rgba(10, 20, 35, 0.78), rgba(10, 20, 35, 0.82)),
		url('assets/images/accessibility-safety-equipment-enquiry-background.webp');
	background-size: cover;
	background-position: center;
	padding: 64px 24px;
}

.as-enquire-inner {
	max-width: 760px !important;
	margin: 0 auto;
	text-align: center;
}

.as-enquire-heading {
	color: var(--as-white);
	font-size: 1.9em;
	font-weight: 700;
	margin: 0 0 10px;
}

.as-enquire-subtitle {
	color: rgba(255, 255, 255, 0.82);
	margin: 0 0 36px;
	font-size: 15.5px;
}

/* Gravity Forms overrides - transparent underline fields to match the dark
   background, mirroring .as-contact-form's overrides on the Contact page
   but styled for a dark section instead of the white contact card. */
.as-enquire-form .gform_wrapper {
	max-width: none !important;
}

.as-enquire-form {
	max-width: 600px;
	margin: 0 auto;
}

.as-enquire-form .gform_wrapper form {
	text-align: left;
}

.as-enquire-form .gfield {
	margin-bottom: 14px !important;
}

.as-enquire-form .gfield label,
.as-enquire-form .gfield_label {
	color: rgba(255, 255, 255, 0.75) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	margin-bottom: 4px !important;
}

.as-enquire-form input[type="text"],
.as-enquire-form input[type="email"],
.as-enquire-form input[type="tel"],
.as-enquire-form input[type="url"],
.as-enquire-form select,
.as-enquire-form textarea {
	background: transparent !important;
	border: none !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.35) !important;
	border-radius: 0 !important;
	color: var(--as-white) !important;
	font-size: 14px !important;
	padding: 6px 2px !important;
	width: 100% !important;
	transition: border-color 0.15s ease;
}

.as-enquire-form textarea {
	min-height: 90px;
	resize: vertical;
}

.as-enquire-form select option {
	color: var(--as-black);
}

.as-enquire-form input::placeholder,
.as-enquire-form textarea::placeholder {
	color: rgba(255, 255, 255, 0.55) !important;
}

.as-enquire-form input:focus,
.as-enquire-form select:focus,
.as-enquire-form textarea:focus {
	border-bottom-color: var(--as-amber) !important;
}

/* Field layout, keyed to each field's own stable ID (visible in the
   rendered HTML as #field_1_<n>) rather than sibling position.
   nth-of-type broke because Gravity Forms inserts a hidden honeypot
   anti-spam field ("Company", #field_1_6) as a real sibling in the DOM,
   which shifts every position-based count by one - that's what was
   squeezing Name into a half-width column paired with Phone. IDs aren't
   affected by the honeypot's position and won't break if fields are
   reordered later, but if a field is deleted and recreated in
   Forms > Edit Form it gets a new ID, so these selectors would need
   updating to match (current IDs: Name=field_1_2, Phone=field_1_4,
   Email=field_1_3, Message=field_1_5). */
.as-enquire-form .gform_wrapper .gfield {
	display: inline-block;
	vertical-align: top;
	box-sizing: border-box;
	width: 100% !important;
	margin-right: 0 !important;
}

/* GF's "Name" field type shows its own sub-labels ("First"/"Last") below
   each sub-input - removed entirely per request rather than restyled. */
.as-enquire-form .gform_wrapper .name_first label,
.as-enquire-form .gform_wrapper .name_last label,
.as-enquire-form .gform_wrapper .ginput_complex label {
	display: none !important;
}

.as-enquire-form .gform_wrapper .name_first,
.as-enquire-form .gform_wrapper .name_last,
.as-enquire-form .gform_wrapper .ginput_complex span {
	margin-bottom: 0 !important;
}

/* "*" indicates required fields" legend - hidden on this section only.
   Gravity Forms has no per-form toggle to remove this line entirely (only
   asterisk-vs-"(Required)" wording), so hiding it here is the standard
   approach; the Contact page's own copy of this form is untouched since
   this selector is scoped to .as-enquire-form. */
.as-enquire-form .gform_required_legend {
	display: none !important;
}

.as-enquire-form .gform_footer {
	margin-top: 8px !important;
	padding: 0 !important;
	text-align: center;
	justify-content: center;
}

/* Targets both possible submit markups - Gravity Forms renders this as a
   <button> in its current default theme (which is what this form is
   actually using - the plain input[type="submit"] selector alone never
   matched it, hence the unstyled grey button in the last screenshot) and
   as <input type="submit"> under "Legacy Markup". Covering both means this
   doesn't break again if that setting changes. */
.as-enquire-form .gform_footer input[type="submit"],
.as-enquire-form .gform_footer button.gform_button {
	background: #2f5f96 !important;
	color: var(--as-white) !important;
	border: 1px solid #2f5f96 !important;
	border-radius: 2px !important;
	font-weight: 700 !important;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 13px 36px !important;
	cursor: pointer;
}

.as-enquire-form .gform_footer input[type="submit"]:hover,
.as-enquire-form .gform_footer button.gform_button:hover {
	background: #24486f !important;
	border-color: #24486f !important;
}

.as-enquire-form .validation_error,
.as-enquire-form .gfield_description.validation_message {
	color: #ffb3b3 !important;
}

@media (max-width: 640px) {
	.as-enquire {
		padding: 48px 20px;
	}

	.as-enquire-form .gform_wrapper .gfield.gfield--width-half {
		width: 100% !important;
		margin-right: 0 !important;
	}
}

.gform_wrapper.gravity-theme .field_sublabel_above .ginput_complex {
	gap: 20px;
}

.seenyor-section .col-full::before, 
.seenyor-section .col-full::after {
	content: "";
	display: none !important;
}
/* ---- Seenyor "How It Works" page: grouped technical spec cards --------- */

.seenyor-spec-cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-top: 32px;
}

.seenyor-spec-card {
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 14px;
	padding: 24px 22px;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.seenyor-spec-card:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: var(--as-amber);
	transform: translateY(-4px);
}

.seenyor-spec-card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: rgba(250, 175, 64, 0.14);
	color: var(--as-amber);
	margin-bottom: 14px;
}

.seenyor-spec-card-icon svg {
	width: 22px;
	height: 22px;
}

.seenyor-spec-card-title {
	color: var(--as-white);
	font-size: 1rem;
	margin: 0 0 14px;
}

.seenyor-spec-card-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.seenyor-spec-card-list li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	padding-top: 10px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.seenyor-spec-card-list li:first-child {
	padding-top: 0;
	border-top: none;
}

.seenyor-spec-card-list li span {
	color: var(--as-grey);
	font-size: 0.85rem;
}

.seenyor-spec-card-list li strong {
	color: var(--as-white);
	font-size: 0.85rem;
	text-align: right;
	font-weight: 600;
}

@media (max-width: 980px) {
	.seenyor-spec-cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.seenyor-spec-cards {
		grid-template-columns: 1fr;
	}
}

/* Sub-blocks stacked within the same dark section (Private by Design / How
   It Compares / Technical Specifications all now share one section so the
   page doesn't grow more sections than before). */
.seenyor-subblock {
	margin-top: 32px;
}

.seenyor-subblock + .seenyor-narrow {
	margin-top: 64px;
}

.seenyor-compliance-note {
	color: rgba(255, 255, 255, 0.55);
	font-size: 0.85rem;
	margin: 20px 0 0;
}

.seenyor-compare-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.seenyor-compare-card {
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 14px;
	padding: 24px 22px;
}

.seenyor-compare-card--featured {
	border-color: var(--as-amber);
	background: rgba(250, 175, 64, 0.08);
}

.seenyor-compare-card h4 {
	color: var(--as-white);
	font-size: 1rem;
	margin: 0 0 16px;
	text-align: center;
}

.seenyor-compare-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.seenyor-compare-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.75);
	padding-top: 12px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.seenyor-compare-list li:first-child {
	padding-top: 0;
	border-top: none;
}

.seenyor-compare-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	flex: 0 0 auto;
}

.seenyor-compare-mark svg {
	width: 11px;
	height: 11px;
}

.seenyor-compare-list li.is-yes .seenyor-compare-mark {
	background: rgba(74, 222, 128, 0.15);
	color: #4ade80;
}

.seenyor-compare-list li.is-no .seenyor-compare-mark {
	background: rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.4);
}

.seenyor-coverage-panel {
	margin-top: 40px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 14px;
	padding: 24px;
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
}

.seenyor-coverage-panel svg {
	width: 200px;
	height: auto;
	flex: 0 0 auto;
}

.seenyor-coverage-copy {
	flex: 1;
	min-width: 200px;
}

.seenyor-coverage-copy h4 {
	color: var(--as-white);
	font-size: 1rem;
	margin: 0 0 8px;
}

.seenyor-coverage-copy p {
	color: rgba(255, 255, 255, 0.65);
	font-size: 0.88rem;
	line-height: 1.6;
	margin: 0;
}

@media (max-width: 780px) {
	.seenyor-compare-grid {
		grid-template-columns: 1fr;
	}
}

/* Two-column variant of the compare grid above (same cards/list/marks) -
   used on the Better Than Wearables page for "Self-Install vs Professional
   Install" style pairings where a third column would just be empty space. */
.seenyor-compare-grid--pair {
	grid-template-columns: repeat(2, 1fr);
	max-width: 820px;
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 780px) {
	.seenyor-compare-grid--pair {
		grid-template-columns: 1fr;
	}
}

/* ---- Seenyor Page 6: big photo "option" cards -----------------------------
   Mimics the two-option layout on seenyor.com.au/installation ("Set it up
   Yourself" / "Professional Installation"): a full-width photo, a circular
   icon badge overlapping the photo's bottom edge, a heading + short tagline,
   a paragraph, and a row of icon+label feature badges. Used in place of the
   checklist-style .seenyor-compare-grid for the Installation page's
   "Self-Install or Let Us Handle It" section. */
.seenyor-option-grid {
	max-width: 980px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px;
}

.seenyor-option-card {
	display: flex;
	flex-direction: column;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 16px;
	overflow: hidden;
}

.seenyor-option-card--featured {
	border-color: var(--as-amber);
	background: rgba(250, 175, 64, 0.07);
}

.seenyor-option-photo {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.seenyor-option-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.seenyor-option-icon-badge {
	position: absolute;
	left: 22px;
	bottom: -24px;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--as-amber);
	color: var(--as-black);
	display: flex;
	align-items: center;
	justify-content: center;
	border: 4px solid var(--as-black);
}

.seenyor-option-icon-badge svg {
	width: 24px;
	height: 24px;
}

.seenyor-option-body {
	padding: 36px 26px 28px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.seenyor-option-card h3 {
	color: var(--as-white);
	font-size: 1.3rem;
	margin: 0 0 6px;
}

.seenyor-option-tagline {
	color: var(--as-amber);
	font-size: 0.82rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 0 0 16px;
}

.seenyor-option-desc {
	color: rgba(255, 255, 255, 0.68);
	font-size: 0.9rem;
	line-height: 1.65;
	margin: 0 0 24px;
}

.seenyor-option-badges {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.seenyor-option-badge {
	display: flex;
	align-items: center;
	gap: 12px;
}

.seenyor-option-badge-icon {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	color: var(--as-amber);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.seenyor-option-card--featured .seenyor-option-badge-icon {
	background: rgba(250, 175, 64, 0.16);
}

.seenyor-option-badge-icon svg {
	width: 16px;
	height: 16px;
}

.seenyor-option-badge-label {
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.85rem;
	line-height: 1.4;
}

@media (max-width: 780px) {
	.seenyor-option-grid {
		grid-template-columns: 1fr;
		max-width: 460px;
	}
}

/* ---- Seenyor Page 5/6: light-background numbered step cards -------------
   Used for the Installation page's "How Installation Works" walkthrough -
   same numbered-badge idea as .seenyor-numbered-card (Detect/Verify/Respond
   on Page 3), but icon-in-a-circle instead of a full photo, since there's
   no dedicated installation photography yet. Sits on a plain white/band
   section rather than the dark sections most icon cards here are built for. */
.seenyor-step-grid {
	max-width: 1200px;
	margin: 32px auto 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
}

.seenyor-step-card {
	position: relative;
	text-align: center;
	padding: 8px 10px;
}

.seenyor-step-number {
	position: absolute;
	top: 0;
	right: 50%;
	margin-right: -54px;
	font-size: 13px;
	font-weight: 700;
	color: rgba(0, 0, 0, 0.25);
}

.seenyor-step-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(250, 175, 64, 0.12);
	color: var(--as-amber-dark);
	margin-bottom: 18px;
}

.seenyor-step-icon svg {
	width: 26px;
	height: 26px;
}

.seenyor-step-card h4 {
	margin: 0 0 8px;
	font-size: 1.05em;
}

.seenyor-step-card p {
	margin: 0;
	color: #555;
	font-size: 14px;
	line-height: 1.6;
}

@media (max-width: 980px) {
	.seenyor-step-grid {
		grid-template-columns: repeat(2, 1fr);
		row-gap: 40px;
	}

	.seenyor-step-number {
		margin-right: -44px;
	}
}

@media (max-width: 560px) {
	.seenyor-step-grid {
		grid-template-columns: 1fr;
	}

	.seenyor-step-number {
		right: auto;
		left: 50%;
		margin-left: 46px;
		margin-right: 0;
	}
}

/* ---- Seenyor Page 6: "How It Works?" 3-box explainer ---------------------
   Build your System / Download the App / Enjoy Peace of Mind - white raised
   cards on the theme's light band background, using the site's own amber
   icon-circle treatment (not the purple background from the client's
   reference screenshot). Sits where the old 4-step .seenyor-step-grid
   walkthrough used to be on the Installation page. */
.seenyor-hiw-grid {
	max-width: 1000px;
	margin: 36px auto 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.seenyor-hiw-card {
	background: var(--as-white);
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
	padding: 40px 28px;
	text-align: center;
}

.seenyor-hiw-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: rgba(250, 175, 64, 0.12);
	color: var(--as-amber-dark);
	margin: 0 auto 20px;
	overflow: hidden;
}

.seenyor-hiw-icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

/* QR code needs to stay square and uncropped to remain scannable, so it
   gets its own square white tile instead of the circular photo/icon mask. */
.seenyor-hiw-icon--qr {
	border-radius: 8px;
	background: var(--as-white);
	border: 1px solid rgba(0, 0, 0, 0.08);
}

.seenyor-hiw-icon--qr img {
	width: 84%;
	height: 84%;
	object-fit: contain;
	border-radius: 0;
}

.seenyor-hiw-icon svg {
	width: 30px;
	height: 30px;
}

.seenyor-hiw-card h3 {
	margin: 0 0 10px;
	font-size: 1.15em;
}

.seenyor-hiw-card p {
	margin: 0;
	color: #555;
	font-size: 14px;
	line-height: 1.6;
}

@media (max-width: 780px) {
	.seenyor-hiw-grid {
		grid-template-columns: 1fr;
		max-width: 420px;
	}
}

/* ---- Seenyor Page 6: "What's in the Box" panel ---------------------------
   Simple two-column list panel (icon + label) on a light band, distinct
   from .seenyor-spec-card-list which is styled for dark sections. */
.seenyor-box-contents {
	max-width: 900px;
	margin: 32px auto 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px 40px;
}

.seenyor-box-item {
	display: flex;
	align-items: center;
	gap: 14px;
}

.seenyor-box-item-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(250, 175, 64, 0.12);
	color: var(--as-amber-dark);
}

.seenyor-box-item-icon svg {
	width: 18px;
	height: 18px;
}

.seenyor-box-item span {
	font-size: 14.5px;
	color: #333;
	font-weight: 500;
}

@media (max-width: 640px) {
	.seenyor-box-contents {
		grid-template-columns: 1fr;
	}
}

/* ---- Seenyor Page 6: requirements checklist row --------------------------
   Reuses the same visual language as .seenyor-box-item (icon + label) but
   laid out as a centered wrapping row rather than a two-column list, for
   the short "what you'll need" checklist. */
.seenyor-requirements-row {
	max-width: 1000px;
	margin: 28px auto 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px 36px;
}

.seenyor-requirements-row .seenyor-box-item span {
	color: rgba(255, 255, 255, 0.8);
}

/* ---- Seenyor multi-page series: bottom prev/next navigation ------------ */

.seenyor-page-nav .seenyor-cta-buttons {
	justify-content: center;
}

/* ---- Seenyor Page 3: Response Pathway (4-step strip) -------------------- */

/* Section holding just the heading/subtitle stays plain white (the
   default .seenyor-section background) — matches the reference page,
   where the title sits in its own white block above the image, not
   inside the same colored area as the icons. */

/* The heading above the band runs tighter than the default section
   padding, so there isn't an oversized gap before the step cards start. */
.seenyor-pathway-heading {
	padding-bottom: 16px;
}

/* Background re-sampled from the cropped image's own top-edge pixels
   (after removing its excess blank margin below) so there's no visible
   seam between the section color and the image. */
.seenyor-pathway-band {
	background: #e2eeec;
}

.seenyor-pathway-grid {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: stretch;
}

.seenyor-pathway {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.seenyor-pathway-step {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 16px;
	background: rgba(18, 18, 20, 0.72);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 12px;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18);
	padding: 22px 22px 20px;
	text-align: left;
}

.seenyor-pathway-step-no {
	position: absolute;
	top: 14px;
	right: 16px;
	font-size: 12px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.35);
}

.seenyor-pathway-icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--as-amber);
	color: var(--as-black);
}

.seenyor-pathway-icon svg {
	width: 24px;
	height: 24px;
}

.seenyor-pathway-step-copy {
	min-width: 0;
}

.seenyor-pathway-step h4 {
	margin: 0 0 6px;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--as-white);
	line-height: 1.3;
}

.seenyor-pathway-step p {
	margin: 0;
	font-size: 13.5px;
	color: rgba(255, 255, 255, 0.68);
	line-height: 1.55;
}

/* Now a transparent PNG (monitor + stand only, no baked-in background),
   so it's sized to fill the height of the card stack on the left
   (object-fit: contain keeps its own proportions rather than stretching
   it) instead of the old fixed-aspect photo treatment. */
.seenyor-pathway-dashboard {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.seenyor-pathway-dashboard img {
	width: auto;
	height: 100%;
	max-width: 100%;
	max-height: 440px;
	object-fit: contain;
	display: block;
}

.seenyor-pathway-team {
	max-width: 700px;
	margin: 40px auto 0;
	text-align: center;
}

.seenyor-pathway-team img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 12px;
}

@media (max-width: 1024px) {
	.seenyor-pathway-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	/* The 4 cards were a vertical list designed to pair with the monitor
	   sitting beside them — now that they're stacked above it instead,
	   lay them out in a single row that never wraps, shrinking padding,
	   icon size, and type via clamp() so all 4 stay inline down to phone
	   widths instead of falling back to multiple rows. */
	.seenyor-pathway {
		flex-direction: row;
		flex-wrap: nowrap;
		gap: clamp(6px, 1.5vw, 16px);
	}

	.seenyor-pathway-step {
		flex: 1 1 0;
		min-width: 0;
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: clamp(12px, 2.5vw, 22px) clamp(8px, 1.5vw, 14px) clamp(10px, 2vw, 20px);
	}

	.seenyor-pathway-icon {
		width: clamp(28px, 7vw, 44px);
		height: clamp(28px, 7vw, 44px);
		margin-bottom: clamp(6px, 1.5vw, 12px);
	}

	.seenyor-pathway-icon svg {
		width: 50%;
		height: 50%;
	}

	.seenyor-pathway-step-no {
		top: clamp(6px, 1.5vw, 12px);
		right: clamp(6px, 1.5vw, 12px);
		font-size: clamp(9px, 1.6vw, 12px);
	}

	.seenyor-pathway-step h4 {
		font-size: clamp(10px, 2.4vw, 15px);
		margin: 0 0 4px;
	}

	.seenyor-pathway-step p {
		font-size: clamp(8px, 1.8vw, 12px);
		line-height: 1.4;
	}

	/* Stacked order: the 4 step cards first, then the monitor, then the
	   team photo below the grid — no "order" override needed since that's
	   already the natural document order (.seenyor-pathway comes before
	   .seenyor-pathway-dashboard in the markup, and .seenyor-pathway-team
	   is its own section straight after this grid). Previously the
	   monitor was pushed above the cards with order: -1; removed so it
	   reads top-to-bottom as boxes -> monitor -> team, matching the
	   reading order of the rest of the page. */
	.seenyor-pathway-dashboard {
		height: auto;
	}

	.seenyor-pathway-dashboard img {
		width: 100%;
		height: auto;
		max-width: 340px;
		max-height: none;
		margin: 0 auto;
	}
}

/* ---- Seenyor Page 3: falls-statistics fact cards ------------------------ */

.seenyor-fact-grid {
	max-width: 1000px;
	margin: 36px auto 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.seenyor-fact-card {
	text-align: center;
	padding: 8px 12px;
}

.seenyor-fact-number {
	display: block;
	font-size: 2.6em;
	font-weight: 800;
	color: var(--as-amber-dark);
	line-height: 1;
	margin-bottom: 12px;
}

.seenyor-fact-card p {
	margin: 0;
	color: #444;
	font-size: 14px;
	line-height: 1.6;
}

.seenyor-fact-source {
	max-width: 1000px;
	margin: 24px auto 0;
	text-align: center;
	font-size: 12.5px;
	color: #888;
}

.seenyor-fact-source a {
	color: #888;
	text-decoration: underline;
}

.seenyor-fact-source a:hover {
	color: var(--as-amber-dark);
}

@media (max-width: 700px) {
	.seenyor-fact-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

/* ---- Numbered photo cards (Detect / Verify / Respond) --------------------- */

.seenyor-numbered-grid {
	max-width: 1200px;
	margin: 32px auto 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

.seenyor-numbered-card {
	text-align: center;
}

.seenyor-numbered-photo {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 8px;
	overflow: hidden;
	margin-bottom: 18px;
}

.seenyor-numbered-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.seenyor-numbered-badge {
	position: absolute;
	bottom: 10px;
	right: 10px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--as-amber);
	color: var(--as-black);
	font-weight: 700;
	font-size: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.seenyor-numbered-card h4 {
	color: var(--as-white);
	margin: 0 0 6px;
}

.seenyor-numbered-card p {
	color: rgba(255, 255, 255, 0.68);
	margin: 0;
}

@media (max-width: 720px) {
	.seenyor-numbered-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}

/* ---- Advanced Detection Features tabs -------------------------------------*/

.seenyor-tabs {
	max-width: 1100px;
	margin: 40px auto 0;
}

.seenyor-tabs-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-bottom: 40px;
}

.seenyor-tab-btn {
	background: var(--as-white);
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 40px;
	padding: 10px 22px;
	font-size: 14px;
	font-weight: 600;
	color: #333;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.seenyor-tab-btn.is-active,
.seenyor-tab-btn:hover {
	background: var(--as-black);
	border-color: var(--as-black);
	color: var(--as-white);
}

.seenyor-tabs-panels {
	display: grid;
}

/* All four panels share the exact same grid cell (stacked on top of one
   another) rather than only the active one being in the layout. Grid track
   sizing accounts for every item placed in a cell regardless of its
   opacity/visibility, so the container's height always equals the tallest
   panel - it can never change when switching tabs, which is what was
   causing the remaining jump (each tab's text is a different length, so
   each panel naturally has a different height on its own). */
.seenyor-tab-panel {
	display: grid;
	grid-area: 1 / 1 / 2 / 2;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 48px;
	align-items: center;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.25s ease;
}

.seenyor-tab-panel.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.seenyor-tab-copy h3 {
	margin: 0 0 12px;
}

.seenyor-tab-copy p {
	color: #555;
	line-height: 1.7;
	margin: 0 0 20px;
}

.seenyor-tab-points {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.seenyor-tab-points li {
	position: relative;
	padding-left: 26px;
	color: #333;
}

.seenyor-tab-points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 7px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--as-amber);
}

.seenyor-tab-media {
	display: flex;
	justify-content: center;
}

.seenyor-tab-media img {
	width: 100%;
	max-width: 300px;
	aspect-ratio: 384 / 655;
	height: auto;
	object-fit: contain;
	display: block;
	margin: 0 auto;
	border-radius: 12px;
}

@media (max-width: 780px) {
	.seenyor-tab-panel {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.seenyor-tab-points {
		text-align: left;
	}

	.seenyor-tab-media {
		order: -1;
	}
}

/* ---- App page hero (badge + heading + store buttons + phone mockup) ----- */

.seenyor-app-hero {
	background: var(--as-white);
	padding: 56px 24px;
}

.seenyor-app-hero-inner {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	align-items: center;
	gap: 40px;
}

.seenyor-app-hero-badge {
	display: inline-flex;
	align-items: center;
	background: #2f7ff0;
	color: var(--as-white);
	font-size: 13px;
	font-weight: 600;
	padding: 6px 16px;
	border-radius: 999px;
	margin-bottom: 20px;
}

.seenyor-app-hero-copy h1 {
	font-size: clamp(1.8em, 3vw, 2.5em);
	line-height: 1.2;
	margin: 0 0 18px;
	color: var(--as-black);
}

.seenyor-app-hero-copy > p {
	color: #555;
	line-height: 1.7;
	max-width: 480px;
	margin: 0 0 28px;
}

.seenyor-app-hero-cta-label {
	font-weight: 700;
	color: var(--as-black);
	margin: 0 0 12px !important;
	max-width: none !important;
}

.seenyor-app-store-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.seenyor-store-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--as-black);
	color: var(--as-white);
	border-radius: 10px;
	padding: 9px 18px;
	text-decoration: none;
	transition: background 0.15s ease;
}

.seenyor-store-btn:hover {
	background: #222;
}

.seenyor-store-btn svg {
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
}

.seenyor-store-btn span {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

.seenyor-store-btn em {
	font-style: normal;
	font-size: 10px;
	color: rgba(255, 255, 255, 0.75);
}

.seenyor-store-btn strong {
	font-size: 15px;
	font-weight: 700;
}

.seenyor-app-hero-media {
	display: flex;
	align-items: center;
	justify-content: center;
}

.seenyor-app-hero-media img {
	width: 100%;
	max-width: 480px;
	height: auto;
	display: block;
}

@media (max-width: 860px) {
	.seenyor-app-hero-inner {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.seenyor-app-hero-copy > p {
		margin-left: auto;
		margin-right: auto;
	}

	.seenyor-app-store-buttons {
		justify-content: center;
	}

	.seenyor-app-hero-media {
		order: -1;
	}

	.seenyor-app-hero-media img {
		max-width: 320px;
	}
}

/* ---- Split hero (Monitoring & Response page) ------------------------------
   Light panel + photo, photo's left edge fading into the panel's background
   color via a CSS mask - matches the reference layout rather than a
   full-bleed dark-overlay photo with centered white text. */

.seenyor-hero-split {
	background: #f7f7f7;
	padding: 0;
	overflow: hidden;
}

.seenyor-hero-split-inner {
	display: flex;
	align-items: center;
	min-height: 480px;
	/* Matches .col-full's constraint (max-width 1440px, same side padding)
	   so the hero's content lines up with every section below it instead
	   of running edge-to-edge full-bleed. */
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 24px;
	box-sizing: border-box;
	/* Replaces the gap that .seenyor-hero-split-copy's own left/right
	   padding used to provide between the text and the photo, now that
	   the copy block itself has no padding. */
	gap: clamp(24px, 4vw, 48px);
}

.seenyor-hero-split-copy {
	flex: 0 0 42%;
	padding: 0;
}

.seenyor-hero-split-copy .seenyor-eyebrow {
	color: var(--as-amber-dark);
}

.seenyor-hero-split-copy h1 {
	font-size: clamp(1.7em, 2.6vw, 2.3em);
	color: var(--as-black);
	margin: 6px 0 12px;
	line-height: 1.3;
	font-weight: 600;
}

.seenyor-hero-split-copy p {
	color: #555;
	margin: 0;
	max-width: 420px;
}

.seenyor-hero-split-media {
	flex: 1 1 58%;
	align-self: stretch;
	position: relative;
	min-height: 480px;
}

.seenyor-hero-split-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center right;
	display: block;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 26%);
	mask-image: linear-gradient(to right, transparent, #000 26%);
}

/* Subtle tint over the photo so it never fights with the copy for
   legibility if the photo's own colours run light, without darkening it
   into a heavy full-bleed overlay look. */
.seenyor-hero-split-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(10, 10, 10, 0.14), rgba(10, 10, 10, 0.03) 40%, transparent 70%);
	pointer-events: none;
}

@media (max-width: 860px) {
	/* Stays a side-by-side row (content left, photo right) instead of
	   stacking — just tighter proportions/sizing than desktop. */
	.seenyor-hero-split-inner {
		padding: 0 16px;
		gap: 16px;
	}

	.seenyor-hero-split-copy {
		flex: 0 0 52%;
		text-align: left;
	}

	.seenyor-hero-split-copy p {
		margin: 0;
	}

	.seenyor-hero-split-media {
		flex: 1 1 48%;
		width: auto;
		min-height: 260px;
	}
}

@media (max-width: 560px) {
	/* Below this, even a tight 52/48 split leaves little room for the
	   copy — widen its share of the row slightly rather than shrinking
	   the text down further; the h1's own clamp() already has a sensible
	   1.7em floor that shouldn't be overridden smaller than that. */
	.seenyor-hero-split-copy {
		flex-basis: 58%;
	}

	.seenyor-hero-split-media {
		flex-basis: 42%;
		min-height: 200px;
	}
}

/* Dark backdrop for the Ambulance/Two-Way Audio/Monitoring Station card
   mockup when it sits inside the (light) intro section rather than over
   its own photo band - the cards themselves assume a dark surface behind
   them (see .seenyor-glass-card's frosted-glass treatment). */
.seenyor-intro-media--mockup {
	display: flex;
	flex-direction: column;
	align-items: stretch; /* .seenyor-intro-media (base) sets align-items:center,
	                          which let the wide card and the two-card row below
	                          it size independently and drift out of alignment -
	                          this overrides that so both stretch to the same
	                          width and their edges line up. */
	gap: 16px;
}

/* ---- Page-nav CTA with photo background ------------------------------------ */

.seenyor-page-nav--photo {
	background-size: cover;
	background-position: center;
	padding: 84px 24px;
}

.seenyor-page-nav--photo h2 {
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}

.seenyor-page-nav--photo .seenyor-cta-buttons {
	justify-content: center;
	margin-top: 8px;
}

/* ==========================================================================
   404 page
   ========================================================================== */

.as-404 {
	max-width: 640px;
	margin: 0 auto;
	padding: 90px 24px 110px;
	text-align: center;
}

.as-404-code {
	margin: 0;
	font-size: 96px;
	font-weight: 800;
	line-height: 1;
	color: var(--as-amber);
	letter-spacing: -0.02em;
}

.as-404-title {
	margin: 8px 0 14px;
	font-size: 1.7em;
	color: var(--as-black);
}

.as-404-subtitle {
	margin: 0 0 32px;
	color: #555;
	line-height: 1.7;
}

.as-404-search {
	margin-bottom: 32px;
}

.as-404-search form {
	display: flex;
	max-width: 420px;
	margin: 0 auto;
	gap: 8px;
}

.as-404-search input[type="search"],
.as-404-search input[type="text"] {
	flex: 1 1 auto;
	min-width: 0;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 4px;
	padding: 11px 14px;
	font-size: 15px;
}

.as-404-search button[type="submit"],
.as-404-search input[type="submit"] {
	flex: 0 0 auto;
	background: var(--as-black);
	color: var(--as-white);
	border: none;
	border-radius: 4px;
	padding: 0 20px;
	font-weight: 600;
	cursor: pointer;
}

.as-404-search button[type="submit"]:hover,
.as-404-search input[type="submit"]:hover {
	background: var(--as-amber);
	color: var(--as-black);
}

.as-404-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
}

/* .as-btn--secondary is styled for dark backgrounds elsewhere on the site
   (white text/border) - this page sits on the plain white content area, so
   it needs its own light-background treatment rather than inheriting that. */
.as-404-links .as-btn--secondary {
	color: var(--as-black);
	border-color: rgba(0, 0, 0, 0.25);
}

.as-404-links .as-btn--secondary:hover {
	border-color: var(--as-black);
	background: rgba(0, 0, 0, 0.05);
	color: var(--as-black);
}

@media (max-width: 480px) {
	.as-404-code {
		font-size: 72px;
	}

	.as-404-search form {
		flex-direction: column;
	}
}


.page-template-template-seenyor-installation .seenyor-hero{
	background-size: contain;
	min-height: 500px;
	background-color: #fff;
}

@media (max-width: 1299px) {
	.page-template-template-seenyor-installation .seenyor-hero{
		background-size: cover;
	}
}

@media (max-width: 768px) {
	.page-template-template-seenyor-installation .seenyor-hero{
		background-position-x: 75% !important;
	}

	.page-template-template-seenyor-installation .seenyor-hero-overlay {
    	background: linear-gradient(90deg, rgba(255, 255, 255, 0.94) 0%, rgb(255 255 255 / 0%) 28%, rgba(255, 255, 255, 0.55) 52%, rgba(255, 255, 255, 0.15) 75%, rgba(255, 255, 255, 0) 100%);
	}

	.seenyor-hero-left {
        width: 80%;
    }
}