/* ==========================================================================
   Smart Shield — page sections
   ========================================================================== */

/* ---------- Trust mosaic ---------- */
.ss-mosaic { gap: 20px !important; margin-top: 48px !important; align-items: stretch !important; }
.ss-mosaic > .wp-block-column { display: flex; flex-direction: column; gap: 20px; }
.ss-mosaic > .wp-block-column > * { margin: 0 !important; }

.ss-tile {
	position: relative;
	border-radius: var(--ss-radius-lg);
	overflow: hidden;
	flex: 1 1 auto;
}
.ss-tile figure { margin: 0 !important; }
.ss-tile img { display: block; width: 100%; object-fit: cover; }

.ss-tile-feature {
	background: var(--ss-mist);
	border: 1px solid var(--ss-line);
	padding: 18px;
	display: flex; flex-direction: column;
}
.ss-tile-feature img { height: clamp(240px, 26vw, 340px); border-radius: 22px; }
.ss-tile-feature .ss-tile-body {
	background: #fff;
	border-radius: 20px;
	padding: 22px 24px;
	margin-top: 16px !important;
	text-align: center;
	box-shadow: var(--ss-shadow);
}
.ss-tile-body h3 { margin: 0 0 .3em !important; }
.ss-tile-body p { margin: 0 !important; color: var(--ss-slate); font-size: 1rem; }

.ss-tile-photo img { height: 100%; min-height: 220px; }
.ss-tile-photo figure { height: 100%; }
.ss-tile-caption {
	position: absolute; left: 14px; right: 14px; bottom: 14px;
	margin: 0 !important;
	padding: 10px 14px;
	border-radius: 14px;
	background: rgba(7, 22, 41, .55);
	backdrop-filter: blur(10px);
	color: #fff;
	font-weight: 700;
	font-size: .92rem;
	text-align: center;
}

.ss-tile-blue {
	background: var(--ss-grad);
	color: #fff;
	padding: 92px 24px 26px;
	text-align: center;
	min-height: 220px;
	display: flex; flex-direction: column; justify-content: flex-end;
}
.ss-tile-blue h3 { color: #fff; margin: 0 0 .3em !important; }
.ss-tile-blue p { margin: 0 !important; color: #e3f4ff; }
.ss-tile-blue::before {
	content: "";
	position: absolute; left: 50%; top: 24px; translate: -50% 0;
	width: 54px; height: 54px; border-radius: 50%;
	background: rgba(255, 255, 255, .2);
}
.ss-tile-blue::after {
	content: "";
	position: absolute; left: 50%; top: 38px; translate: -50% 0;
	width: 26px; height: 26px;
	background: #fff;
	-webkit-mask: var(--ss-ico) center / contain no-repeat;
	mask: var(--ss-ico) center / contain no-repeat;
}

.ss-tile-tall { min-height: 460px; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; }
.ss-tile-tall figure { position: absolute; inset: 0; }
.ss-tile-tall img { height: 100%; }
.ss-tile-tall::before {
	content: "";
	position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(180deg, rgba(7, 22, 41, .05) 30%, rgba(7, 22, 41, .9) 100%);
}
.ss-tile-tall .ss-tile-body { position: relative; z-index: 2; padding: 26px; }
.ss-tile-tall h3 { color: #fff; }
.ss-tile-tall .ss-tile-body p { color: #d6e2f2; }
/* Icon: gradient circle (tile::after) + white glyph (figure::after) */
.ss-tile-tall::after {
	content: "";
	position: absolute; z-index: 2; left: 50%; top: 26px; translate: -50% 0;
	width: 56px; height: 56px; border-radius: 50%;
	background: var(--ss-grad);
	box-shadow: 0 10px 30px rgba(18, 194, 233, .4);
}
.ss-tile-tall figure::after {
	content: "";
	position: absolute; z-index: 3; left: 50%; top: 41px; translate: -50% 0;
	width: 26px; height: 26px;
	background: #fff;
	-webkit-mask: var(--ss-ico) center / contain no-repeat;
	mask: var(--ss-ico) center / contain no-repeat;
}

/* ---------- Ticker band ---------- */
.ss-ticker {
	background: var(--ss-grad);
	color: #fff;
	display: flex;
	overflow: hidden;
	padding-block: 24px;
	margin-block: 0 !important;
}
.ss-ticker > p {
	flex: none;
	margin: 0 !important;
	padding-right: 2.5rem;
	white-space: nowrap;
	font-size: clamp(1.3rem, 2.4vw, 2rem);
	font-weight: 800;
	letter-spacing: -.01em;
	animation: ss-marquee 48s linear infinite;
}
@keyframes ss-marquee { to { transform: translateX(-100%); } }

/* ---------- Split (image + text) sections ---------- */
.ss-split { gap: clamp(32px, 6vw, 88px) !important; }

.ss-media { position: relative; }
.ss-media figure { margin: 0 !important; }
.ss-media-main img,
.ss-photo img {
	width: 100%;
	height: clamp(320px, 40vw, 520px);
	object-fit: cover;
	border-radius: var(--ss-radius-lg);
	box-shadow: var(--ss-shadow-lg);
	display: block;
}
.ss-photo { margin: 0 !important; }
.ss-photo-tall img { height: clamp(360px, 44vw, 560px); }

.ss-badge {
	position: absolute;
	left: clamp(16px, 3vw, 28px); bottom: clamp(16px, 3vw, 28px);
	margin: 0 !important;
	display: inline-flex; align-items: center; gap: 12px;
	padding: 12px 18px 12px 12px;
	background: #fff;
	border-radius: 18px;
	box-shadow: var(--ss-shadow-lg);
	font-weight: 700;
	color: var(--ss-navy);
}
.ss-badge::before {
	content: "";
	width: 40px; height: 40px; border-radius: 12px; flex: none;
	background: var(--ss-grad);
}
.ss-badge::after {
	content: "";
	position: absolute; left: 21px; top: 50%; translate: 0 -50%;
	width: 22px; height: 22px;
	background: #fff;
	-webkit-mask: var(--ss-ico) center / contain no-repeat;
	mask: var(--ss-ico) center / contain no-repeat;
}

/* ---------- Remote access (dark panel + phone mockup) ---------- */
.ss-dark {
	background: var(--ss-grad-night);
	color: #c8d6ea;
	border-radius: 40px;
	padding: clamp(32px, 5.5vw, 80px) !important;
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.ss-dark::before {
	content: "";
	position: absolute; z-index: -1;
	right: -10%; top: -30%;
	width: 70%; height: 140%;
	background: radial-gradient(closest-side, rgba(18, 194, 233, .22), transparent);
}
.ss-dark h2, .ss-dark h3 { color: #fff; }
.ss-dark .ss-kicker { color: var(--ss-cyan); }
.ss-minis { margin-block: 28px 32px !important; gap: 14px !important; }

.ss-phone {
	position: relative;
	width: min(300px, 80%);
	aspect-ratio: 9 / 18.5;
	margin: 0 auto !important;
	border-radius: 46px;
	padding: 12px;
	background: linear-gradient(145deg, #1d2c44, #070f1c);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 40px 90px rgba(0, 0, 0, .55), 0 0 80px rgba(18, 194, 233, .25);
}
.ss-phone figure { margin: 0 !important; height: 100%; }
.ss-phone img {
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: 62% 50%;
	border-radius: 36px;
	display: block;
}
.ss-phone::before { /* camera notch */
	content: "";
	position: absolute; left: 50%; top: 20px; translate: -50% 0;
	width: 90px; height: 24px; border-radius: 20px;
	background: #070f1c;
	z-index: 2;
}
.ss-phone::after { /* "REC" frame lines */
	content: "";
	position: absolute; inset: 12px;
	border-radius: 36px;
	background: linear-gradient(180deg, rgba(7, 22, 41, .55), transparent 25%, transparent 75%, rgba(7, 22, 41, .6));
	pointer-events: none;
}
.ss-phone-label {
	position: absolute; z-index: 3;
	left: 26px; right: 26px; bottom: 30px;
	margin: 0 !important;
	padding: 10px 14px;
	border-radius: 14px;
	background: rgba(255, 255, 255, .14);
	backdrop-filter: blur(10px);
	color: #fff;
	font-size: .85rem;
	font-weight: 700;
	display: flex; align-items: center; gap: 8px;
}
.ss-phone-label::before {
	content: "";
	width: 9px; height: 9px; border-radius: 50%;
	background: #ff4d4f;
	box-shadow: 0 0 0 4px rgba(255, 77, 79, .25);
	animation: ss-pulse-red 1.6s infinite;
}
@keyframes ss-pulse-red { 50% { opacity: .35; } }

/* ---------- Electrical collage ---------- */
.ss-collage { position: relative; padding-bottom: 48px; }
.ss-collage figure { margin: 0 !important; }
.ss-collage-main img {
	width: 86%;
	height: clamp(320px, 38vw, 480px);
	object-fit: cover;
	border-radius: var(--ss-radius-lg);
	box-shadow: var(--ss-shadow-lg);
	display: block;
}
.ss-collage-inset {
	position: absolute !important;
	right: 0; bottom: 0;
	width: 46%;
}
.ss-collage-inset img {
	width: 100%;
	height: clamp(150px, 17vw, 230px);
	object-fit: cover;
	border-radius: 24px;
	border: 8px solid #fff;
	box-shadow: var(--ss-shadow-lg);
	display: block;
}

/* ---------- Alarm overlay cards ---------- */
.ss-alarm-cols { gap: 24px !important; margin-top: 48px !important; }
.ss-overlay-card {
	position: relative;
	min-height: clamp(380px, 38vw, 480px);
	border-radius: var(--ss-radius-lg);
	overflow: hidden;
	display: flex; flex-direction: column; justify-content: flex-end;
	color: #fff;
	isolation: isolate;
}
.ss-overlay-card figure { position: absolute; inset: 0; margin: 0 !important; z-index: -2; }
.ss-overlay-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ss-ease); }
.ss-overlay-card:hover img { transform: scale(1.05); }
.ss-overlay-card::before {
	content: "";
	position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(180deg, rgba(7, 22, 41, .0) 25%, rgba(7, 22, 41, .92) 100%);
}
.ss-overlay-body { padding: clamp(24px, 3vw, 36px); }
.ss-overlay-body h3 { color: #fff; font-size: 1.6rem !important; margin: 0 0 .3em !important; }
.ss-overlay-body p { color: #d6e2f2; max-width: 440px; }
.ss-overlay-card::after {
	content: "";
	position: absolute; left: clamp(24px, 3vw, 36px); top: clamp(24px, 3vw, 36px);
	width: 56px; height: 56px; border-radius: 18px;
	background: rgba(255, 255, 255, .16);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, .3);
}
.ss-overlay-body::before {
	content: "";
	position: absolute; left: calc(clamp(24px, 3vw, 36px) + 15px); top: calc(clamp(24px, 3vw, 36px) + 15px);
	width: 26px; height: 26px;
	background: #fff;
	-webkit-mask: var(--ss-ico) center / contain no-repeat;
	mask: var(--ss-ico) center / contain no-repeat;
	z-index: 1;
}

/* ---------- AI assistant band ---------- */
.ss-assistant-wrap { padding-block: clamp(32px, 5vw, 64px) 0; }
.ss-assistant {
	display: flex; align-items: center; justify-content: space-between;
	gap: 28px 48px; flex-wrap: wrap;
	padding: clamp(28px, 4vw, 48px) clamp(28px, 4vw, 56px) clamp(28px, 4vw, 48px) clamp(110px, 10vw, 150px);
	border-radius: var(--ss-radius-lg);
	background: linear-gradient(120deg, #eef4ff 0%, #e6f8fd 100%);
	border: 1px solid var(--ss-line);
	position: relative;
}
.ss-assistant::before {
	content: "";
	position: absolute; left: clamp(28px, 3vw, 48px); top: 50%; translate: 0 -50%;
	width: 64px; height: 64px; border-radius: 50%;
	background: var(--ss-grad);
	animation: ss-ring 2.4s infinite;
}
.ss-assistant::after {
	content: "";
	position: absolute; left: calc(clamp(28px, 3vw, 48px) + 19px); top: 50%; translate: 0 -50%;
	width: 26px; height: 26px;
	background: #fff;
	-webkit-mask: var(--ss-i-mic) center / contain no-repeat;
	mask: var(--ss-i-mic) center / contain no-repeat;
}
.ss-assistant-text { flex: 1 1 420px; }
.ss-assistant-text h2 { font-size: clamp(1.7rem, 2.8vw, 2.3rem) !important; margin: .25em 0 .3em !important; }
.ss-assistant-text p:last-child { margin: 0; color: var(--ss-slate); max-width: 620px; }
.ss-assistant-actions { gap: 10px !important; }
.ss-assistant .ss-btn-talk .wp-block-button__link { background: var(--ss-navy); color: #fff; }

/* ---------- Quote / call-to-action ---------- */
.ss-cta-wrap { padding-top: clamp(32px, 5vw, 64px); }
.ss-cta {
	background: var(--ss-grad);
	color: #fff;
	border-radius: 40px;
	padding: clamp(28px, 5vw, 72px) !important;
	gap: clamp(28px, 5vw, 64px) !important;
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.ss-cta::before {
	content: "";
	position: absolute; z-index: -1;
	left: -15%; bottom: -60%;
	width: 70%; height: 140%;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(255, 255, 255, .18), transparent);
}
.ss-cta h2 { color: #fff; }
.ss-cta .ss-kicker { color: #e3f6ff; }
.ss-cta .ss-kicker::before { background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .25); }
.ss-cta p { color: #eaf6ff; }

.ss-actions { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 28px !important; }
.ss-actions > * { margin: 0 !important; }
.ss-action a {
	display: flex; flex-direction: column;
	min-height: 64px;
	padding: 12px 16px 12px 66px;
	justify-content: center;
	border-radius: 18px;
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .25);
	color: #fff !important;
	text-decoration: none;
	font-size: .88rem;
	line-height: 1.35;
	word-break: break-word;
	position: relative;
	transition: background .2s, transform .2s var(--ss-ease);
}
.ss-action a:hover { background: rgba(255, 255, 255, .24); transform: translateY(-2px); }
.ss-action strong { font-size: 1.02rem; }
.ss-action a::before {
	content: "";
	position: absolute; left: 14px; top: 50%; translate: 0 -50%;
	width: 38px; height: 38px; border-radius: 12px;
	background: #fff;
}
.ss-action a::after {
	content: "";
	position: absolute; left: 23px; top: 50%; translate: 0 -50%;
	width: 20px; height: 20px;
	background: var(--ss-blue);
	-webkit-mask: var(--ss-ico) center / contain no-repeat;
	mask: var(--ss-ico) center / contain no-repeat;
}

/* Form text stays dark inside the white card (the blue panel sets light text) */
.ss-cta .ss-form-card p, .ss-cta .ss-form-card .ss-quote-title { color: var(--ss-navy); }
.ss-cta .ss-form-card .ss-quote-small { color: var(--ss-slate); }
.ss-cta .ss-form-card .ss-quote-notice.is-success { color: #0d5132; }
.ss-cta .ss-form-card .ss-quote-notice.is-error { color: #8a1f17; }

.ss-form-card {
	background: #fff;
	color: var(--ss-navy);
	border-radius: 28px;
	padding: clamp(22px, 3vw, 36px);
	box-shadow: 0 30px 70px rgba(7, 22, 41, .25);
}

/* ---------- Tablet: stack two-column sections (WordPress only stacks below 782px) ---------- */
@media (max-width: 1024px) {
	.ss-split, .ss-cta { flex-wrap: wrap !important; }
	.ss-split > .wp-block-column, .ss-cta > .wp-block-column { flex-basis: 100% !important; }
	.ss-split-reverse > .wp-block-column:last-child { order: -1; } /* photo first when stacked */
	.ss-mosaic { flex-wrap: wrap !important; }
	.ss-mosaic > .wp-block-column:first-child { flex-basis: 100% !important; }
	.ss-mosaic > .wp-block-column:not(:first-child) { flex-basis: calc(50% - 10px) !important; flex-grow: 0 !important; }
	.ss-phone { width: min(280px, 70%); }
}

/* ---------- Contact ---------- */
.ss-contact-section .ss-grid { margin-top: 44px !important; }
@media (min-width: 901px) {
	.ss-contact-section .ss-grid-3 { grid-template-columns: 1fr 1.35fr 1fr; } /* room for the long email address */
}

@media (max-width: 781px) {
	.ss-mosaic > .wp-block-column, .ss-mosaic > .wp-block-column:not(:first-child) { flex-basis: 100% !important; }
	.ss-tile-tall { min-height: 380px; }
	.ss-dark, .ss-cta { border-radius: 28px; }
	.ss-phone { width: min(260px, 78%); margin-top: 12px !important; }
	.ss-assistant { padding: 104px 22px 26px; text-align: left; }
	.ss-assistant::before { left: 22px; top: 26px; translate: none; }
	.ss-assistant::after { left: 41px; top: 45px; translate: none; }
	.ss-assistant-actions, .ss-assistant-actions .wp-block-button, .ss-assistant-actions .wp-block-button__link { width: 100%; justify-content: center; }
	.ss-collage-main img { width: 100%; }
	.ss-collage-inset { width: 52%; right: -6px; bottom: 0; }
}