/* SAFCO native build. Layout, colour, type and spacing live in the Elementor
   widgets themselves. This file holds only what Elementor has no control for:
   hover/open states, the header's scrolled state, and enhancement hooks for
   native.js. Everything is scoped to the sxn- classes set on those widgets. */

:root { --sxn-ease: cubic-bezier(.22, .61, .24, 1); --sxn-cyan: #56b4db; --sxn-gutter: clamp(20px, 6.6vw, 128px); }

/* ---------------------------------------------------------------- header */
.elementor-location-header { position: relative; z-index: 1000; }
.sxn-header { transition: background-color .35s var(--sxn-ease), padding .35s var(--sxn-ease); }
.sxn-header.is-scrolled {
	background-color: rgba(13, 14, 19, .86) !important;
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	--padding-top: 10px !important; --padding-bottom: 10px !important;
}
body.admin-bar .sxn-header { top: 32px !important; }
@media (max-width: 782px) { body.admin-bar .sxn-header { top: 46px !important; } }
.sxn-header .sxn-icon-btn .elementor-icon { display: inline-flex; min-width: 44px; height: 44px; align-items: center; justify-content: center; }
.sxn-header .elementor-nav-menu--main .elementor-item { transition: background-color .2s; }

/* ------------------------------------------------------------- hero */
.sxn-hero-canvas {
	position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%;
	pointer-events: none; opacity: 0; transition: opacity .6s var(--sxn-ease);
}
.sxn-hero.is-ready .sxn-hero-canvas { opacity: 1; }

.sxn-dcard {
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	transition: width .6s var(--sxn-ease), border-color .3s, box-shadow .3s !important;
}
.sxn-dcard.is-open {
	width: clamp(390px, 27.8vw, 534px) !important; border-color: rgba(255, 255, 255, .58) !important;
	box-shadow: 0 22px 50px -22px rgba(0, 0, 0, .7);
}
.sxn-dcard-body { opacity: 0; transform: translateX(14px); transition: opacity .35s var(--sxn-ease), transform .5s var(--sxn-ease); }
.sxn-dcard.is-open .sxn-dcard-body { opacity: 1; transform: none; transition-delay: .12s; }
.sxn-dcard-arrow { opacity: 0; transition: opacity .3s; }
.sxn-dcard.is-open .sxn-dcard-arrow { opacity: 1; transition-delay: .2s; }

.sxn-dot { transition: background-color .35s !important; }
.sxn-hero:not([data-active='water']) .sxn-hero-dots .sxn-dot:first-child,
.sxn-hero[data-active='water'] .sxn-hero-dots .sxn-dot:last-child { background-color: rgba(255, 255, 255, .8) !important; }

@media (max-width: 1024px) {
	.sxn-hero-cards { position: relative !important; right: auto !important; top: auto !important; align-items: stretch !important; padding: 0 var(--sxn-gutter, 20px); }
	.sxn-dcard, .sxn-dcard.is-open { width: 100% !important; }
	.sxn-dcard-body { flex: 1 1 auto; width: auto !important; opacity: 1; transform: none; padding-right: 40px; }
	.sxn-dcard-arrow { opacity: 1; }
	.sxn-hero-dots { display: none !important; }
}

/* ------------------------------------------------------ warehouse video */
.sxn-spots-media { container-type: size; }
.sxn-spot { opacity: 0; transition: opacity .6s var(--sxn-ease); }
.sxn-spots.is-ready .sxn-spot { opacity: 1; }
.sxn-spots.is-ready .sxn-spot:nth-child(2) { transition-delay: .08s; }
.sxn-spots.is-ready .sxn-spot:nth-child(3) { transition-delay: .16s; }
.sxn-spots.is-ready .sxn-spot:nth-child(4) { transition-delay: .24s; }
.sxn-spots.is-ready .sxn-spot:nth-child(5) { transition-delay: .32s; }
.sxn-spot-dot { animation: sxn-pulse 2.4s infinite; }
@keyframes sxn-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .55); } 70%, 100% { box-shadow: 0 0 0 12px rgba(255, 255, 255, 0); } }
.sxn-spot:hover .sxn-spot-label .elementor-widget-heading:last-child .elementor-heading-title { background: rgba(255, 255, 255, .22); }
.sxn-spots-replay { opacity: 0; visibility: hidden; transition: opacity .4s; }
.sxn-spots.is-ready .sxn-spots-replay { opacity: 1; visibility: visible; }
.sxn-spots.is-fallback .elementor-background-video-hosted { visibility: hidden; }
@media (max-width: 1024px) {
	.sxn-spot-line, .sxn-spot-label { display: none !important; }
}

/* ---------------------------------------------------------------- trust */
.sxn-trust-globe img {
	filter: grayscale(1) brightness(1.5) contrast(.85);
	-webkit-mask-image: radial-gradient(50% 55% at 55% 45%, #000 45%, transparent 100%);
	mask-image: radial-gradient(50% 55% at 55% 45%, #000 45%, transparent 100%);
}

/* -------------------------------------------- carousels with a seeker line */
.sxn-rail .swiper-pagination-progressbar,
.sxn-logos .swiper-pagination-progressbar { display: none; }
.sxn-seeker { display: flex; align-items: center; gap: 8px; margin-top: clamp(16px, 1.2vw, 24px); font: 400 12px/1 'Montserrat', sans-serif; color: #333; }
.sxn-rail .sxn-seeker { color: #fff; }
.sxn-seeker-bar { position: relative; flex: 1; height: 28px; border-radius: 999px; cursor: pointer; touch-action: none; outline-offset: 2px; }
.sxn-seeker-bar::before { content: ''; position: absolute; left: 0; right: 0; top: 10px; height: 8px; border-radius: 999px; background: #e8e8e8; }
.sxn-rail .sxn-seeker-bar::before { background: #efefef; }
.sxn-seeker-bar i { position: absolute; left: 0; top: 10px; height: 8px; width: 20%; border-radius: 999px; background: #b9b9b9; cursor: grab; transition: width .2s, background-color .2s; }
.sxn-rail .sxn-seeker-bar i { background: #9d9d9d; }
.sxn-seeker-bar:hover i, .sxn-seeker.is-seeking .sxn-seeker-bar i { background: #8c8c8c; }
.sxn-rail .sxn-seeker-bar:hover i, .sxn-rail .sxn-seeker.is-seeking .sxn-seeker-bar i { background: #6e6e6e; }
.sxn-seeker.is-seeking .sxn-seeker-bar i { cursor: grabbing; }
.sxn-seeker.is-static { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
	.sxn-dcard, .sxn-dcard-body, .sxn-dcard-arrow, .sxn-spot, .sxn-spot-dot, .sxn-header, .sxn-hero-canvas { transition: none !important; animation: none !important; }
	.sxn-spot { opacity: 1; }
}

/* Programmatic focus/scroll must not shift clipped containers sideways. */
.sxn-hero, .sxn-spots, .sxn-spots-media, .sxn-trust, .sxn-why-panel, .sxn-dcard { overflow: clip !important; }

.sxn-rail .sxn-seeker { margin-right: clamp(20px, 2.1vw, 40px); }

.elementor-widget-button .elementor-button { white-space: nowrap; }

/* Elementor sets flex sizing through variables; on small screens the hero card body must fill the row. */
@media (max-width: 1024px) {
	.sxn-dcard-body { flex: 1 1 0 !important; min-width: 0; width: auto !important; }
}
@media (max-width: 767px) {
	.sxn-dcard-thumb { width: 86px !important; }
	.sxn-dcard-thumb img { height: 86px !important; }
}

/* The contact page ends on a dark strip, so the white footer curve would read as a stray shape. */
.page-id-39 .sxn-footer > .elementor-shape-top { display: none; }
.page-id-39 .sxn-footer { --padding-top: clamp(60px, 5vw, 96px); }

/* ======================================================= responsive guards
   Fixed widths set in the widgets (paragraph measures, lead text) must never
   exceed the screen, and the headline block's text column has to be allowed to
   shrink beside its accent bar. */
.elementor-widget { max-width: 100%; }
.sxn-hb-text { flex: 1 1 0% !important; min-width: 0 !important; }
.sxn-table-wrap { -webkit-overflow-scrolling: touch; }
img { height: auto; }

/* Phones and tablets (also iPad portrait/landscape up to 1024) */
@media (max-width: 1024px) {
	/* Hero: the image sits behind the whole text stack, so darken it evenly instead of only from the left. */
	.sxn-hero-scrim-l { background-image: linear-gradient(180deg, rgba(16, 17, 22, .68) 0%, rgba(16, 17, 22, .5) 45%, rgba(16, 17, 22, .8) 100%) !important; }

	/* Hotspot dots are tap targets on touch screens: give them a 44px hit area. */
	.sxn-spot-dot { position: relative; }
	.sxn-spot-dot::after { content: ''; position: absolute; inset: -16px; }

	/* Footer links: comfortable to tap. */
	.sxn-footer .elementor-icon-list-item > a, .sxn-footer .elementor-icon-list-item > .elementor-icon-list-text { display: inline-block; padding: 6px 0; }
	.sxn-footer .elementor-icon-list-items { --e-icon-list-icon-gap: 0; }

	/* The technical specification table scrolls sideways inside its frame. */
	.sxn-table-wrap { position: relative; }
}

@media (max-width: 767px) {
	/* Why-choose-us matrix: a single tidy column with hairline separators. */
	.sxn-mcell { border: 0 !important; border-bottom: 1px solid rgba(255, 255, 255, .3) !important; padding-left: 0 !important; padding-right: 0 !important; min-height: 0 !important; }
	.sxn-mcell:last-child { border-bottom: 0 !important; }

	/* "Play again" sits above the curved lower edge of the video. */
	.sxn-spots-replay { bottom: 56px !important; right: 14px !important; }

	/* Small caps labels stay legible. */
	.sxn-dcard-thumb .elementor-heading-title { font-size: 10px !important; }
	.sxn-footer .elementor-heading-title { word-break: normal; }
	.sxn-seeker { margin-right: 0 !important; }
}

/* Header: slides out of view while scrolling down, drops back in on the first scroll up. */
.sxn-header { transition: transform .4s var(--sxn-ease), background-color .35s var(--sxn-ease), padding .35s var(--sxn-ease); will-change: transform; }
.sxn-header.is-hidden { transform: translateY(-105%); }
.sxn-header:has(:focus-visible) { transform: none !important; }
@media (prefers-reduced-motion: reduce) { .sxn-header { transition: none; } }

/* ================================================================== blog */
.sxn-blog-hero .elementor-widget { max-width: 100%; }
.sxn-blog-hero .elementor-widget-button .elementor-button { border: 1px solid rgba(255, 255, 255, .25); }
.sxn-blog-grid .elementor-post { border-radius: 18px; overflow: hidden; border: 1px solid #e4e4e8; background: #fff; box-shadow: 0 18px 36px -28px rgba(0, 0, 0, .45); transition: transform .3s var(--sxn-ease), box-shadow .3s; }
.sxn-blog-grid .elementor-post:hover { transform: translateY(-4px); box-shadow: 0 26px 44px -26px rgba(0, 0, 0, .5); }
.sxn-blog-grid .elementor-post__title, .sxn-blog-grid .elementor-post__title a { color: #111 !important; font: 700 clamp(17px, 1.3vw, 22px)/1.25 'Montserrat', sans-serif !important; text-transform: none; }
.sxn-blog-grid .elementor-post__title a:hover { color: #0d6a9c !important; }
.sxn-blog-grid .elementor-post__excerpt p { color: #333; font: 400 clamp(14px, .95vw, 16px)/1.65 'Montserrat', sans-serif; }
.sxn-blog-grid .elementor-post__meta-data { color: #666; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.sxn-blog-grid .elementor-post__read-more { color: #0d6a9c !important; font: 700 13px/1 'Montserrat', sans-serif; text-transform: uppercase; letter-spacing: .05em; }
.sxn-blog-grid .elementor-post__badge { background: #0a6aa1 !important; border-radius: 999px; font: 500 11px/1 'Montserrat', sans-serif; text-transform: uppercase; }
.sxn-blog-grid .elementor-pagination { margin-top: 36px; text-align: center; }
.sxn-blog-grid .elementor-pagination .page-numbers { display: inline-block; min-width: 40px; padding: 10px 12px; border-radius: 999px; color: #111; }
.sxn-blog-grid .elementor-pagination .page-numbers.current { background: #0a6aa1; color: #fff; }

/* single post */
.sxn-post-cats .elementor-icon-list-text, .sxn-post-cats a { color: #56b4db !important; font: 700 12px/1.3 'Montserrat', sans-serif; text-transform: uppercase; letter-spacing: .06em; }
.sxn-post-meta .elementor-icon-list-text { color: rgba(255, 255, 255, .85) !important; font: 400 14px/1.4 'Montserrat', sans-serif; }
.sxn-post-image img { width: 100%; height: auto; max-height: 560px; object-fit: cover; border-radius: 20px; }
.sxn-post-content { width: min(100%, 780px); margin-top: clamp(24px, 3vw, 48px); font: 400 clamp(16px, 1.1vw, 18px)/1.8 'Montserrat', sans-serif; color: #222; }
.sxn-post-content h2 { font: 700 clamp(22px, 1.9vw, 32px)/1.2 'Montserrat', sans-serif; color: #111; margin: 1.8em 0 .6em; }
.sxn-post-content h3 { font: 700 clamp(18px, 1.4vw, 22px)/1.3 'Montserrat', sans-serif; color: #0d6a9c; margin: 1.5em 0 .4em; }
.sxn-post-content p { margin: 0 0 1.1em; }
.sxn-post-content a { color: #0d6a9c; text-decoration: underline; text-underline-offset: 3px; }
.sxn-post-content ol, .sxn-post-content ul { margin: 0 0 1.3em; padding-left: 1.4em; }
.sxn-post-content li { margin-bottom: .5em; }
.sxn-post-content figure.wp-block-table { margin: 1.4em 0; overflow-x: auto; }
.sxn-post-content table { width: 100%; border-collapse: collapse; font-size: .92em; min-width: 520px; }
.sxn-post-content th { background: #0d2a44; color: #fff; text-align: left; padding: 12px 14px; font-weight: 600; }
.sxn-post-content td { padding: 12px 14px; border-bottom: 1px solid #e2e2e6; vertical-align: top; }
.sxn-post-content tr:nth-child(even) td { background: #f6f6f8; }
.sxn-post-body { align-items: center; }
.sxn-blog-grid .elementor-post__avatar { display: none; }
.sxn-post-meta .elementor-icon-list-icon, .sxn-post-cats .elementor-icon-list-icon { display: none; }
.sxn-post-meta .elementor-icon-list-items, .sxn-post-cats .elementor-icon-list-items { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.sxn-related:not(:has(.elementor-post)) { display: none; }

/* "Where these go" panel: the right padding is 0 on desktop so the slider bleeds off-screen; restore it on smaller screens. */
@media (max-width: 1024px) {
	.sxn-where-grid { padding-right: var(--sxn-gutter, 20px) !important; }
	.sxn-rail .sxn-seeker { margin-right: 0 !important; }
}

/* Contact page (classic sections): the columns carry wide side padding that squeezes the form on phones. */
@media (max-width: 1024px) { .page-id-39 .elementor-column > .elementor-widget-wrap { padding-left: 0 !important; padding-right: 0 !important; } }
@media (max-width: 767px) { .page-id-39 .elementor-section .elementor-container { flex-wrap: wrap; } .page-id-39 .elementor-column { width: 100% !important; } }

/* Trust section on phones and tablets: headline, paragraph, stat cards and logo grid share the same left and right margins. */
@media (max-width: 1024px) {
	.sxn-trust-copy { padding-left: 0 !important; }
	.sxn-stats { margin-left: 0 !important; }
}
@media (max-width: 767px) {
	.sxn-stats { flex-wrap: nowrap !important; }
	.sxn-stats > .e-con { width: calc(50% - 7px) !important; min-width: 0; }
}