/*
Theme Name: Suryon
Theme URI: https://suryon.co.in
Author: Suryon Industries Pvt. Ltd.
Description: Custom block theme for Suryon Industries — solar mounting structures, ACDB/DCDB panels, Flarix enclosures and Envera components. Built on the Suryon brand system (teal / deep teal / amber).
Version: 4.11.0
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: suryon
*/

/* ---------- Base polish ---------- */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { height: auto; max-width: 100%; }

a, button, .wp-block-button__link, .wp-element-button { cursor: pointer; }

:focus-visible {
	outline: 3px solid #008088;
	outline-offset: 2px;
	border-radius: 4px;
}

::selection { background: #008088; color: #fff; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- Header ---------- */
.suryon-header {
	z-index: 100;
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: saturate(1.4) blur(10px);
	-webkit-backdrop-filter: saturate(1.4) blur(10px);
	border-bottom: 1px solid #dce7e8;
	box-shadow: 0 1px 12px rgba(15, 61, 68, 0.06);
}

/* backdrop-filter makes this element the containing block for its position:fixed
   descendants, which pins the full-screen mobile menu inside the 70px header.
   Drop it only while that menu is open. */
.suryon-header:has(.wp-block-navigation__responsive-container.is-menu-open) {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

.suryon-header .wp-block-navigation a {
	font-family: "Lexend", sans-serif;
	font-weight: 500;
	font-size: 0.98rem;
	color: #16282d;
	text-decoration: none;
	position: relative;
	padding: 0.35rem 0;
	transition: color 180ms ease;
}
.suryon-header .wp-block-navigation a:hover { color: #008088; }
.suryon-header .wp-block-navigation a::after {
	content: "";
	position: absolute;
	left: 0; right: 100%;
	bottom: -2px;
	height: 2px;
	background: #008088;
	transition: right 220ms ease-out;
}
.suryon-header .wp-block-navigation a:hover::after,
.suryon-header .wp-block-navigation .current-menu-item > a::after { right: 0; }
.suryon-header .wp-block-navigation .current-menu-item > a { color: #008088; }

.suryon-header .wp-block-buttons .wp-block-button__link {
	padding: 0.6rem 1.3rem;
	font-size: 0.95rem;
	box-shadow: 0 2px 10px rgba(216, 138, 45, 0.35);
}

@media (max-width: 480px) {
	.suryon-header .wp-block-buttons .wp-block-button__link {
		padding: 0.5rem 0.9rem;
		font-size: 0.88rem;
		white-space: nowrap;
	}
	.suryon-header .wp-block-site-logo img { width: 128px !important; }
}

/* Mobile nav overlay.
   Core ships `.wp-block-navigation:not(.has-background) …is-menu-open { background:#fff; color:#000 }`,
   which outranks a bare two-class selector — these must match its specificity or the
   overlay renders black-on-white with an invisible (white) close button. */
.suryon-header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container.is-menu-open {
	background: #0f3d44;
	color: #fff;
}
.suryon-header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open a,
.wp-block-navigation__responsive-container.is-menu-open a { color: #fff; font-size: 1.15rem; }
.suryon-header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open a:hover,
.wp-block-navigation__responsive-container.is-menu-open a:hover { color: #7fd4d9; }
.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg { width: 28px; height: 28px; }
.wp-block-navigation__responsive-container-close { color: #fff; }

/* ---------- Buttons ---------- */
.wp-block-button__link, .wp-element-button {
	transition: background-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
	box-shadow: 0 2px 8px rgba(216, 138, 45, 0.28);
}
.wp-block-button__link:hover, .wp-element-button:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(216, 138, 45, 0.38);
}
.wp-block-button__link:active, .wp-element-button:active { transform: translateY(0); }

/* Ghost (outline) button on dark */
.suryon-btn-ghost .wp-block-button__link {
	background: transparent;
	color: #fff;
	border: 2px solid rgba(255, 255, 255, 0.55);
	box-shadow: none;
}
.suryon-btn-ghost .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: #fff;
	box-shadow: none;
}

/* Teal solid button variant */
.suryon-btn-teal .wp-block-button__link {
	background: #008088;
	color: #fff;
	box-shadow: 0 2px 8px rgba(0, 128, 136, 0.3);
}
.suryon-btn-teal .wp-block-button__link:hover { background: #0f3d44; }

/* ---------- Hero ---------- */
.suryon-hero {
	position: relative;
	overflow: hidden;
}
.suryon-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("assets/img/hero-pattern.svg");
	background-size: 720px;
	background-repeat: repeat;
	opacity: 0.1;
	pointer-events: none;
}
.suryon-hero > * { position: relative; }

.suryon-eyebrow {
	font-family: "Lexend", sans-serif;
	font-weight: 600;
	font-size: 0.82rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* ---------- Cards ---------- */
.suryon-card {
	background: #fff;
	border: 1px solid #dce7e8;
	border-radius: 14px;
	overflow: hidden;
	transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
	height: 100%;
}
.suryon-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 34px rgba(15, 61, 68, 0.12);
	border-color: #9fc9cc;
}
.suryon-card .suryon-card-media {
	background: linear-gradient(180deg, #eef5f5 0%, #e2eeee 100%);
	padding: 2rem 2rem 1.5rem;
	margin: 0;
}
.suryon-card .suryon-card-media img { display: block; margin: 0 auto; }

.suryon-card-link { text-decoration: none; }
.suryon-card-link:hover { text-decoration: none; }

/* Feature tiles (icon + text) */
.suryon-tile {
	background: #fff;
	border: 1px solid #dce7e8;
	border-radius: 12px;
	transition: box-shadow 220ms ease, border-color 220ms ease;
	height: 100%;
}
.suryon-tile:hover { box-shadow: 0 8px 24px rgba(15, 61, 68, 0.1); border-color: #9fc9cc; }

/* ---------- Stats strip ---------- */
.suryon-stat-number {
	font-family: "Lexend", sans-serif;
	font-weight: 700;
	font-size: clamp(1.9rem, 3.5vw, 2.6rem);
	line-height: 1.1;
	color: #008088;
}
.suryon-stats-dark .suryon-stat-number { color: #ffb95e; }

/* ---------- Checklist ---------- */
.suryon-check li {
	list-style: none;
	padding-left: 2rem;
	position: relative;
	margin-bottom: 0.6rem;
}
.suryon-check { padding-left: 0; }
.suryon-check li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.32em;
	width: 1.15rem;
	height: 1.15rem;
	border-radius: 50%;
	background: #008088 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>') center / 62% no-repeat;
}

/* ---------- Tables (spec tables) ---------- */
.suryon-spec-table table {
	border-collapse: collapse;
	width: 100%;
	border: 1px solid #dce7e8;
	border-radius: 10px;
	overflow: hidden;
}
.suryon-spec-table th {
	background: #0f3d44;
	color: #fff;
	font-family: "Lexend", sans-serif;
	font-weight: 600;
	text-align: left;
}
.suryon-spec-table th, .suryon-spec-table td { padding: 0.75rem 1rem; border: 1px solid #dce7e8; }
.suryon-spec-table tr:nth-child(even) td { background: #f2f7f7; }

/* ---------- Footer ---------- */
.suryon-footer { background: #0f3d44; color: #cfe0e2; }
.suryon-footer a { color: #cfe0e2; text-decoration: none; transition: color 160ms ease; }
.suryon-footer a:hover { color: #ffb95e; }
.suryon-footer h4, .suryon-footer h3 {
	color: #fff;
	font-size: 1.02rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 600;
}
.suryon-footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	color: #9db9bd;
	font-size: 0.9rem;
}

/* ---------- Contact form (Contact Form 7) ---------- */
.suryon-form .wpcf7-form label {
	display: block;
	font-family: "Lexend", sans-serif;
	font-weight: 500;
	font-size: 0.95rem;
	color: #0f3d44;
	margin-bottom: 1rem;
}
.suryon-form .wpcf7-form-control:not(.wpcf7-submit) {
	display: block;
	width: 100%;
	margin-top: 0.35rem;
	padding: 0.75rem 0.9rem;
	border: 1.5px solid #c3d6d8;
	border-radius: 8px;
	background: #fff;
	font: inherit;
	color: #16282d;
	transition: border-color 160ms ease, box-shadow 160ms ease;
}
.suryon-form .wpcf7-form-control:not(.wpcf7-submit):focus {
	outline: none;
	border-color: #008088;
	box-shadow: 0 0 0 3px rgba(0, 128, 136, 0.15);
}
.suryon-form textarea.wpcf7-form-control { min-height: 140px; resize: vertical; }
.suryon-form .wpcf7-submit {
	background: #d88a2d;
	color: #1d1405;
	font-family: "Lexend", sans-serif;
	font-weight: 600;
	font-size: 1rem;
	border: none;
	border-radius: 8px;
	padding: 0.85rem 2.2rem;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(216, 138, 45, 0.28);
	transition: background-color 180ms ease, transform 180ms ease;
}
.suryon-form .wpcf7-submit:hover { background: #c1781f; transform: translateY(-1px); }
.suryon-form .wpcf7-not-valid-tip { color: #b3261e; font-size: 0.88rem; margin-top: 0.3rem; }
.suryon-form .wpcf7-response-output {
	border-radius: 8px;
	padding: 0.8rem 1rem !important;
	margin: 1.25rem 0 0 !important;
}
.suryon-form .wpcf7-spinner { display: block; margin: 0.5rem 0; }

/* ---------- Utility ---------- */
.suryon-divider-amber {
	width: 56px;
	height: 4px;
	background: #d88a2d;
	border-radius: 2px;
	border: none;
	margin-left: 0;
}
.has-text-align-center .suryon-divider-amber, .suryon-center .suryon-divider-amber { margin-left: auto; margin-right: auto; }

.suryon-badge {
	display: inline-block;
	background: #f9efe1;
	color: #8a5a1a;
	font-family: "Lexend", sans-serif;
	font-weight: 600;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.3rem 0.85rem;
	border-radius: 100px;
}
.suryon-badge-teal { background: rgba(0, 128, 136, 0.1); color: #00666d; }

/* Breadcrumb-ish page hero band */
.suryon-page-hero {
	background: linear-gradient(135deg, #0f3d44 0%, #0c5058 70%, #0a6a70 130%);
	position: relative;
	overflow: hidden;
}
.suryon-page-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("assets/img/hero-pattern.svg");
	background-size: 640px;
	opacity: 0.09;
	pointer-events: none;
}
.suryon-page-hero > * { position: relative; }

/* Logo strip on dark sections keeps white logos crisp */
.suryon-brand-strip img { opacity: 0.92; }

/* Anchor offset below sticky header */
:target { scroll-margin-top: 96px; }

/* ---------- Blog ---------- */
.suryon-post-cat a, .suryon-cat-pills a {
	display: inline-block;
	background: rgba(0, 128, 136, 0.1);
	color: #00666d;
	font-family: "Lexend", sans-serif;
	font-weight: 600;
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.22rem 0.75rem;
	border-radius: 100px;
	text-decoration: none;
	margin-right: 0.4rem;
	transition: background-color 160ms ease;
}
.suryon-post-cat a:hover, .suryon-cat-pills a:hover { background: rgba(0, 128, 136, 0.22); }
.suryon-cat-pills { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.suryon-cat-pills li { margin: 0; }
.suryon-post-cat-hero a {
	color: #ffb95e;
	font-family: "Lexend", sans-serif;
	font-weight: 600;
	font-size: 0.82rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
}
.wp-block-post-title a { text-decoration: none; color: inherit; transition: color 160ms ease; }
.wp-block-post-title a:hover { color: #008088; }
.wp-block-query-pagination a, .wp-block-query-pagination-numbers .page-numbers {
	font-family: "Lexend", sans-serif;
	font-weight: 500;
	text-decoration: none;
	padding: 0.3rem 0.7rem;
	border-radius: 6px;
}
.wp-block-query-pagination-numbers .current { background: #008088; color: #fff; }
.wp-block-search__button { background: #008088; border: none; border-radius: 6px; color: #fff; cursor: pointer; }
.wp-block-search__input { border: 1.5px solid #c3d6d8; border-radius: 8px; padding: 0.45rem 0.7rem; font: inherit; }
.wp-block-search__input:focus { outline: none; border-color: #008088; box-shadow: 0 0 0 3px rgba(0,128,136,0.15); }
.wp-block-post-navigation-link a { font-family: "Lexend", sans-serif; font-weight: 500; text-decoration: none; }

/* ================= v2 redesign layer ================= */

/* ---------- Scroll reveal ---------- */
.suryon-reveal { opacity: 0; transform: translateY(22px); transition: opacity 600ms cubic-bezier(0.16,1,0.3,1), transform 600ms cubic-bezier(0.16,1,0.3,1); }
.suryon-reveal.is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .suryon-reveal { opacity: 1; transform: none; } }

/* ---------- Photo hero ---------- */
.suryon-photo-hero {
	position: relative;
	min-height: 86dvh;
	display: flex;
	align-items: center;
	overflow: hidden;
	isolation: isolate;
}
.suryon-photo-hero img.suryon-hero-img {
	position: absolute; inset: 0; z-index: -2;
	width: 100%; height: 100%; object-fit: cover;
}
.suryon-photo-hero::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(78deg, rgba(10,36,41,0.92) 0%, rgba(12,58,66,0.78) 44%, rgba(15,61,68,0.25) 100%);
}
.suryon-photo-hero h1 { text-wrap: balance; }

/* ---------- Signature: the energy path ---------- */
.suryon-path { position: relative; }
.suryon-path-track {
	display: flex; align-items: stretch; gap: 0;
	overflow-x: auto; scroll-snap-type: x proximity;
	padding-bottom: 0.5rem;
}
.suryon-path-node {
	flex: 1 1 0; min-width: 150px; scroll-snap-align: start;
	position: relative; padding: 1.4rem 1.2rem 1.2rem;
	border-top: 3px solid #dce7e8;
}
.suryon-path-node::before {
	content: ""; position: absolute; top: -8px; left: 0;
	width: 13px; height: 13px; border-radius: 50%;
	background: #c3d6d8;
}
.suryon-path-node.is-suryon { border-top-color: #008088; }
.suryon-path-node.is-suryon::before { background: #d88a2d; box-shadow: 0 0 0 4px rgba(216,138,45,0.22); }
.suryon-path-node .suryon-path-step {
	font-family: "Lexend", sans-serif; font-size: 0.78rem; font-weight: 600;
	letter-spacing: 0.1em; text-transform: uppercase; color: #8fa6aa; margin: 0 0 0.35rem;
}
.suryon-path-node.is-suryon .suryon-path-step { color: #008088; }
.suryon-path-node h3 { margin: 0 0 0.3rem; font-size: 1.05rem; }
.suryon-path-node p { margin: 0; font-size: 0.88rem; color: #5c6470; line-height: 1.5; }
.suryon-path-node a { text-decoration: none; }
a.suryon-path-link { display: block; color: inherit; height: 100%; transition: background 180ms ease; border-radius: 0 0 10px 10px; margin: -1.4rem -1.2rem -1.2rem; padding: 1.4rem 1.2rem 1.2rem; }
a.suryon-path-link:hover { background: #eef5f5; }

/* ---------- Core product feature panels ---------- */
.suryon-feature {
	position: relative; border-radius: 18px; overflow: hidden; isolation: isolate;
	min-height: 460px; display: flex; align-items: flex-end;
}
.suryon-feature img.suryon-feature-img {
	position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%;
	object-fit: cover; transition: transform 700ms cubic-bezier(0.16,1,0.3,1);
}
.suryon-feature:hover img.suryon-feature-img { transform: scale(1.045); }
.suryon-feature::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(184deg, rgba(15,61,68,0) 30%, rgba(10,36,41,0.88) 82%);
}
.suryon-feature-body { padding: 2rem; width: 100%; }
.suryon-feature-body h3, .suryon-feature-body h2 { color: #fff; margin: 0 0 0.4rem; }
.suryon-feature-body p { color: #d7e6e8; margin: 0 0 1rem; max-width: 46ch; }
.suryon-feature--panel { background: #eef2f4; }
.suryon-feature--panel img.suryon-feature-img { object-fit: contain; padding: 2.5rem; }
.suryon-feature--panel::after { background: linear-gradient(184deg, rgba(15,61,68,0) 52%, rgba(10,36,41,0.85) 88%); }

/* ---------- Product cards ----------
   Overlaying text on the image only works for environmental photography. Product
   shots arrive as cutouts on a light studio background, so the image gets its own
   plate and the text sits below it — one treatment that holds for either kind. */
.suryon-pcard {
	display: flex; flex-direction: column; height: 100%;
	background: #fff; border: 1px solid #dce7e8; border-radius: 16px;
	overflow: hidden; text-decoration: none;
	transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.suryon-pcard:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 38px rgba(15, 61, 68, 0.13);
	border-color: #9fc9cc;
}
.suryon-pcard-media {
	aspect-ratio: 16 / 10;
	background: linear-gradient(180deg, #eef5f5 0%, #e2eeee 100%);
	overflow: hidden;
}
.suryon-pcard-media img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.suryon-pcard--contain .suryon-pcard-media img { object-fit: contain; padding: 1.75rem; }
.suryon-pcard:hover .suryon-pcard-media img { transform: scale(1.04); }
.suryon-pcard-body {
	display: flex; flex-direction: column; align-items: flex-start;
	gap: 0.55rem; padding: 1.5rem 1.5rem 1.7rem; flex: 1;
}
.suryon-pcard-body h3 { margin: 0; color: #0f3d44; }
.suryon-pcard-body p { margin: 0; color: #5c6470; }
.suryon-pcard-cta {
	margin-top: auto; padding-top: 0.9rem;
	font-family: "Lexend", sans-serif; font-weight: 600; font-size: 0.95rem; color: #008088;
}
.suryon-pcard:hover .suryon-pcard-cta { color: #0f3d44; }

/* ---------- Credentials panel ----------
   Sits where a photo used to; the proof points are the visual. */
.suryon-creds {
	background: linear-gradient(150deg, #0f3d44 0%, #0c5058 78%);
	border-radius: 18px; padding: 2rem 1.9rem;
	position: relative; overflow: hidden;
}
.suryon-creds::before {
	content: ""; position: absolute; inset: 0;
	background-image: url("assets/img/hero-pattern.svg");
	background-size: 520px; opacity: 0.09; pointer-events: none;
}
.suryon-creds > * { position: relative; }
.suryon-creds-eyebrow {
	font-family: "Lexend", sans-serif; font-weight: 600;
	font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
	color: #ffb95e; margin: 0 0 1.1rem;
}
.suryon-creds ul { list-style: none; margin: 0; padding: 0; }
.suryon-creds li { padding: 0.95rem 0 0.95rem 1.9rem; position: relative; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.suryon-creds li:first-child { border-top: none; padding-top: 0; }
.suryon-creds li::before {
	content: ""; position: absolute; left: 0; top: 1.25rem;
	width: 0.85rem; height: 0.85rem; border-radius: 50%;
	background: #ffb95e url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%230f3d44" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>') center / 60% no-repeat;
}
.suryon-creds li:first-child::before { top: 0.3rem; }
.suryon-creds strong {
	display: block; font-family: "Lexend", sans-serif; font-weight: 600;
	color: #fff; margin-bottom: 0.15rem;
}
.suryon-creds span { color: #cfe0e2; font-size: 0.97rem; }
.suryon-creds-cta {
	display: inline-block; margin-top: 1.4rem;
	font-family: "Lexend", sans-serif; font-weight: 600;
	color: #ffb95e; text-decoration: none;
}
.suryon-creds-cta:hover { color: #fff; }

@media (max-width: 781px) {
	.suryon-creds { padding: 1.6rem 1.4rem; }
}

/* ---------- Inline proof strip (replaces tile grid) ---------- */
.suryon-proof-strip {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem;
	border-top: 1px solid #dce7e8; border-bottom: 1px solid #dce7e8;
	padding: 1.6rem 0;
}
.suryon-proof-strip > div { display: flex; align-items: center; gap: 0.8rem; }
.suryon-proof-strip img { width: 40px; height: 40px; flex: none; }
.suryon-proof-strip strong { font-family: "Lexend", sans-serif; font-weight: 600; font-size: 0.98rem; color: #0f3d44; display: block; }
.suryon-proof-strip span { font-size: 0.85rem; color: #5c6470; }
@media (max-width: 900px) { .suryon-proof-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .suryon-proof-strip { grid-template-columns: 1fr; gap: 1.1rem; } }

/* ---------- Makes marquee (single use, home only) ---------- */
.suryon-makes { overflow: hidden; white-space: nowrap; position: relative; }
.suryon-makes-track { display: inline-flex; gap: 3.5rem; animation: suryon-marquee 30s linear infinite; padding-right: 3.5rem; }
.suryon-makes span {
	font-family: "Lexend", sans-serif; font-weight: 600; font-size: 1.15rem;
	color: #9db9bd; letter-spacing: 0.04em;
}
@keyframes suryon-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .suryon-makes-track { animation: none; flex-wrap: wrap; white-space: normal; } }

/* ---------- Product catalogue ---------- */
.suryon-product-card { text-decoration: none; color: inherit; display: block; }
.suryon-product-card .suryon-card-media { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; }
.suryon-product-card .suryon-card-media img { object-fit: contain; max-height: 100%; }
.suryon-download-row {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	border: 1.5px solid #dce7e8; border-radius: 10px; padding: 0.9rem 1.2rem; margin-bottom: 0.8rem;
	transition: border-color 180ms ease, box-shadow 180ms ease;
}
.suryon-download-row:hover { border-color: #008088; box-shadow: 0 4px 14px rgba(15,61,68,0.08); }
.wp-block-file.suryon-download-row a:first-child { font-family: "Lexend", sans-serif; font-weight: 500; color: #0f3d44; text-decoration: none; }
.wp-block-file.suryon-download-row .wp-block-file__button { background: #008088; border-radius: 7px; padding: 0.45rem 1rem; font-size: 0.88rem; }

/* pending-file placeholder */
.suryon-download-pending { opacity: 0.62; }
.suryon-download-pending em { font-size: 0.85rem; color: #8a5a1a; font-style: normal; background: #f9efe1; border-radius: 100px; padding: 0.2rem 0.7rem; }

/* Hero: cap height on tall viewports; guarantee text contrast over any photo */
.suryon-photo-hero-cover { min-height: min(88vh, 820px) !important; }
.suryon-photo-hero-cover .wp-block-cover__background {
	background: linear-gradient(78deg, rgba(9,33,38,0.95) 0%, rgba(12,58,66,0.82) 46%, rgba(15,61,68,0.3) 100%) !important;
}

/* ================= v3 motion layer ================= */
.suryon-path { position: relative; }
.suryon-path-progress {
	/* Must sit exactly on the nodes' 3px top border, which the track's 14px
	   headroom (added so the dots aren't clipped) pushes down by the same amount.
	   Keep this in step with `.suryon-path-track { padding-top }` or the progress
	   bar and the node line render as two parallel lines. */
	position: absolute; top: 14px; left: 0; right: 0; height: 3px;
	background: linear-gradient(90deg, #d88a2d, #008088);
	transform-origin: left center; pointer-events: none;
}
.suryon-header { transition: box-shadow 250ms ease; }
.suryon-header > .wp-block-group { transition: padding 250ms ease; }
.suryon-header.is-scrolled > .wp-block-group { padding-top: 0.45rem !important; padding-bottom: 0.45rem !important; }
.suryon-header.is-scrolled { box-shadow: 0 4px 24px rgba(15, 61, 68, 0.14); }
/* GSAP owns entrances in v3: neutralize the CSS-only reveal transition */
.suryon-reveal { transition: none; }

/* ================= v4: 3D hero ================= */
.suryon-hero-3d {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, #0a262c 0%, #0d3a42 52%, #0d3138 100%);
	opacity: 0; transition: opacity 900ms ease;
	pointer-events: none; /* text/CTAs stay clickable; parallax listens on the cover */
}
.suryon-hero-3d.is-live { opacity: 1; }
.suryon-hero-3d canvas { width: 100%; height: 100%; display: block; }
/* keep the gradient scrim above the canvas for text contrast */
.suryon-photo-hero-cover .wp-block-cover__background { z-index: 1; }
.suryon-photo-hero-cover .wp-block-cover__inner-container { z-index: 2; }

/* WP renders dimRatio-0 gradient scrims at opacity 0 — our gradient carries its own
   alpha stops, so force the span visible for guaranteed text contrast. */
.suryon-photo-hero-cover .wp-block-cover__background { opacity: 1 !important; }

/* ================= v4: scroll-driven assembly ================= */
.suryon-assembly {
	background: linear-gradient(180deg, #0a262c 0%, #0d3a42 60%, #0d3138 100%);
	color: #fff;
	min-height: 100vh;
	display: flex;
	align-items: center;
}
.suryon-assembly-inner {
	display: grid;
	grid-template-columns: minmax(280px, 4fr) 8fr;
	gap: 3rem;
	align-items: center;
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 3rem clamp(1.25rem, 4vw, 2.5rem);
	min-height: 100vh;
}
.suryon-assembly h2 { color: #fff; margin: 0 0 2rem; }
.suryon-assembly-captions { position: relative; min-height: 11rem; }
.suryon-assembly-caption {
	position: absolute; inset: 0;
	opacity: 0; transform: translateY(14px);
	transition: opacity 420ms ease, transform 420ms ease;
	pointer-events: none;
}
.suryon-assembly-caption.is-active { opacity: 1; transform: none; pointer-events: auto; }
.suryon-assembly-caption h3 { color: #ffb95e; margin: 0 0 0.5rem; }
.suryon-assembly-caption p { color: #d7e6e8; margin: 0; max-width: 40ch; }
.suryon-assembly-note a { color: #ffb95e; text-decoration: none; font-weight: 600; }
.suryon-assembly-stage { height: 84vh; }
.suryon-assembly-stage canvas { width: 100%; height: 100%; display: block; }

/* Static fallback (mobile / reduced motion / weak GPU): captions become a simple stack */
.suryon-assembly.is-static { min-height: 0; }
.suryon-assembly.is-static .suryon-assembly-inner { min-height: 0; grid-template-columns: 1fr; }
.suryon-assembly.is-static .suryon-assembly-captions { min-height: 0; }
.suryon-assembly.is-static .suryon-assembly-caption { position: static; opacity: 1; transform: none; margin-bottom: 1.4rem; }
.suryon-assembly.is-static .suryon-assembly-stage { height: 46vh; }
.suryon-assembly.is-static .suryon-assembly-stage:empty { display: none; }
@media (max-width: 900px) {
	.suryon-assembly-inner { grid-template-columns: 1fr; }
	.suryon-assembly-stage { height: 46vh; }
}

/* ---------- Dropdown submenus ---------- */
.suryon-header .wp-block-navigation__submenu-container {
	background: #ffffff !important;
	border: 1px solid #dce7e8;
	border-radius: 12px;
	box-shadow: 0 14px 36px rgba(15, 61, 68, 0.16);
	padding: 0.5rem !important;
	min-width: 250px !important;
	margin-top: 0.6rem;
}
/* The 0.6rem offset above is visual only; without this bridge the pointer crosses
   dead space on its way down and the hover-opened submenu closes before it lands. */
.suryon-header .wp-block-navigation__submenu-container::before {
	content: "";
	position: absolute;
	top: -0.7rem;
	left: 0;
	right: 0;
	height: 0.7rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container::before {
	display: none;
}
.suryon-header .wp-block-navigation__submenu-container a {
	padding: 0.55rem 0.8rem !important;
	border-radius: 8px;
	font-size: 0.92rem !important;
	color: #16282d !important;
}
.suryon-header .wp-block-navigation__submenu-container a:hover {
	background: #eef5f5;
	color: #008088 !important;
}
.suryon-header .wp-block-navigation__submenu-container a::after { display: none; } /* no underline effect inside panels */
.suryon-header .wp-block-navigation .wp-block-navigation__submenu-icon { color: #5c6470; }
/* mobile overlay: keep nested items readable */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background: transparent !important;
	border: none; box-shadow: none; padding-left: 1rem !important; min-width: 0 !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a { color: #cfe0e2 !important; font-size: 1rem !important; }

/* tablet: keep the nav on one line as long as possible */
@media (max-width: 1140px) {
	.suryon-header .wp-block-navigation { gap: 1rem; }
	.suryon-header .wp-block-navigation a { font-size: 0.92rem; }
	.suryon-header .wp-block-buttons .wp-block-button__link { padding: 0.5rem 1rem; font-size: 0.9rem; white-space: nowrap; }
}

/* ---------- Sticky header, fixed properly (wrapper-level) ---------- */
.wp-site-blocks > header.wp-block-template-part { position: sticky; top: 0; z-index: 120; }

/* ---------- Social icons ---------- */
.suryon-social { display: flex; gap: 0.7rem; align-items: center; }
.suryon-social a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; border-radius: 50%;
	border: 1.5px solid rgba(255,255,255,0.28); color: #cfe0e2;
	transition: all 180ms ease;
}
.suryon-social a:hover { background: #d88a2d; border-color: #d88a2d; color: #1d1405; transform: translateY(-2px); }

/* ---------- WhatsApp chat button ---------- */
.suryon-whatsapp {
	position: fixed; right: max(1.2rem, env(safe-area-inset-right)); bottom: max(1.2rem, env(safe-area-inset-bottom));
	z-index: 110; width: 56px; height: 56px; border-radius: 50%;
	background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center;
	box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45);
	transition: transform 180ms ease, box-shadow 180ms ease;
}
.suryon-whatsapp:hover { transform: scale(1.08); box-shadow: 0 10px 26px rgba(37, 211, 102, 0.55); color: #fff; }

/* ---------- Readable measure where full-width hurts (legal pages, blog posts) ---------- */
/* Blog posts + legal pages read as a clean centered article column */
/* One shared measure for the whole article column. Must NOT be `ch`: that unit is
   relative to each element's own font-size, so headings resolved far wider than the
   body text and the column edges never lined up. */
.single-post .wp-block-post-content > *,
.page-template-default .wp-block-post-content > * {
	max-width: 44rem;
	margin-left: auto !important;
	margin-right: auto !important;
}
/* Media and tables may use a little more room, still centred on the same axis. */
.single-post .wp-block-post-content > figure,
.single-post .wp-block-post-content > .wp-block-image,
.single-post .wp-block-post-content > .wp-block-table,
.page-template-default .wp-block-post-content > figure,
.page-template-default .wp-block-post-content > .wp-block-table { max-width: 52rem; }

/* founder monogram avatars (photos pending) */
.suryon-avatar {
	width: 72px; height: 72px; border-radius: 50%;
	background: linear-gradient(135deg, #008088, #0f3d44);
	color: #fff; font-family: "Lexend", sans-serif; font-weight: 600; font-size: 1.5rem;
	display: flex; align-items: center; justify-content: center;
	margin-bottom: 1rem;
}

/* ---------- Product key-facts strip ---------- */
.suryon-facts {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
	margin: 1.5rem 0;
}
.suryon-facts > div {
	background: #f2f7f7; border: 1px solid #dce7e8; border-radius: 10px;
	padding: 0.9rem 1.1rem;
}
.suryon-facts strong { display: block; font-family: "Lexend", sans-serif; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: #00666d; margin-bottom: 0.25rem; }
.suryon-facts span { font-size: 0.95rem; color: #16282d; }
@media (max-width: 700px) { .suryon-facts { grid-template-columns: 1fr; } }

/* ---------- FAQ details ---------- */
.wp-block-details {
	border: 1.5px solid #dce7e8; border-radius: 10px;
	padding: 0.9rem 1.2rem; margin-bottom: 0.8rem;
	transition: border-color 180ms ease;
}
.wp-block-details[open] { border-color: #008088; }
.wp-block-details summary {
	font-family: "Lexend", sans-serif; font-weight: 500; color: #0f3d44;
	cursor: pointer;
}
.wp-block-details summary:hover { color: #008088; }
.wp-block-details p { margin: 0.7rem 0 0; color: #5c6470; }

/* Entrance animations are masked inside their own section: an element mid-slide
   can never poke into, or get painted over by, a neighbouring band. Fixes CTA
   clipping everywhere (buttons in columns, page heroes, range links, forms). */
main .wp-block-group.alignfull { overflow: clip; }

/* ---------- Brand marquee (added 4.1.0) ---------- */
.suryon-marquee {
	overflow: hidden;
	position: relative;
	padding: 1.6rem 0;
	border-top: 1px solid #dce7e8;
	border-bottom: 1px solid #dce7e8;
	background: #fbfdfd;
}
.suryon-marquee::before, .suryon-marquee::after {
	content: "";
	position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none;
}
.suryon-marquee::before { left: 0; background: linear-gradient(90deg, #fbfdfd, rgba(251,253,253,0)); }
.suryon-marquee::after { right: 0; background: linear-gradient(270deg, #fbfdfd, rgba(251,253,253,0)); }
.suryon-marquee-track {
	display: flex;
	align-items: center;
	gap: 3.5rem;
	width: max-content;
	animation: suryon-marquee-scroll 30s linear infinite;
}
.suryon-marquee:hover .suryon-marquee-track { animation-play-state: paused; }
@keyframes suryon-marquee-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
.suryon-marquee-item { display: flex; align-items: center; gap: 3.5rem; }
.suryon-marquee-item img { height: 34px; width: auto; opacity: 0.85; }
.suryon-marquee-badge {
	font-family: "Lexend", sans-serif;
	font-weight: 600;
	font-size: 1.15rem;
	letter-spacing: 0.02em;
	color: #5c6470;
	white-space: nowrap;
}
.suryon-marquee-badge small { display: block; font-size: 0.62rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: #9aa4ad; }
@media (prefers-reduced-motion: reduce) {
	.suryon-marquee-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
	.suryon-marquee-item:last-child { display: none; } /* hide the duplicate loop copy */
}

/* ---------- Testimonials (added 4.1.0) ---------- */
.suryon-quote-card {
	background: #fff;
	border: 1px solid #dce7e8;
	border-radius: 14px;
	padding: 1.8rem 1.6rem 1.5rem;
	height: 100%;
	position: relative;
	transition: box-shadow 220ms ease, border-color 220ms ease;
}
.suryon-quote-card:hover { box-shadow: 0 10px 28px rgba(15, 61, 68, 0.1); border-color: #9fc9cc; }
.suryon-quote-card::before {
	content: "\201C";
	font-family: Georgia, serif;
	font-size: 3.4rem;
	line-height: 1;
	color: #d88a2d;
	display: block;
	margin-bottom: 0.4rem;
}
.suryon-quote-card p.suryon-quote-text { font-style: italic; color: #2c3b41; margin-top: 0; }
.suryon-quote-who { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid #eef3f4; }
.suryon-quote-who strong { font-family: "Lexend", sans-serif; font-weight: 600; color: #16282d; display: block; }
.suryon-quote-who span { font-size: 0.85rem; color: #5c6470; }

/* ---------- Archive/taxonomy hero refinements (added 4.1.0) ---------- */
.suryon-page-hero .wp-block-query-title { color: #fff; }
.suryon-archive-desc { color: #d7e6e8; max-width: 640px; }

/* ============================================================
   REDESIGN HANDOFF (19-07-2026) — approved mockups S1-B, S2-A,
   S3/S7, S8-A, S9, P-C + fixes 4/5/6. Appended per handoff.
   ============================================================ */

/* Fix 4 — energy path: give the scroll track headroom so the node
   dots (top:-8px) aren't clipped to half circles by overflow-x. */
.suryon-path-track { padding-top: 14px; }

/* Fix 5 — brands marquee: seamless loop (no blank gap before repeat).
   The inter-copy gap must live inside each copy so translateX(-50%) wraps cleanly. */
.suryon-marquee-track { gap: 0; }
.suryon-marquee-item  { padding-right: 3.5rem; }

/* Item 6 — bigger product titles (single product page + product cards) */
.single-suryon_product .wp-block-post-title {
	font-size: clamp(2rem, 4.2vw, 2.9rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.06;
}
.suryon-product-card .suryon-card-media + * h3,
.suryon-pcard-body h3 { font-size: 1.35rem; }

/* ---------- S1-B: numbered promise cards ---------- */
.suryon-narrative { border-left: 4px solid #d88a2d; padding-left: 1.4rem; }
.suryon-promise-grid {
	display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
.suryon-promise {
	background: #fff; border: 1px solid #dce7e8; border-radius: 14px;
	padding: 1.4rem 1.25rem;
	transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.suryon-promise:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 34px rgba(15, 61, 68, 0.12);
	border-color: #9fc9cc;
}
.suryon-promise-num {
	font-family: "Lexend", sans-serif; font-weight: 700; font-size: 1.65rem;
	color: #d88a2d; line-height: 1; margin: 0 0 0.75rem;
}
.suryon-promise h3 { font-size: 1.1rem; color: #0f3d44; margin: 0 0 0.45rem; }
.suryon-promise p { color: #5c6470; font-size: 0.9rem; line-height: 1.5; margin: 0; }
@media (max-width: 781px) {
	.suryon-promise-grid { grid-template-columns: 1fr; }
	.suryon-narrative { margin-bottom: 2rem; }
}

/* ---------- S2-A: spec chips + badge over the card image ---------- */
.suryon-chip {
	display: inline-block;
	background: #eef5f5; color: #00666d;
	font-family: "Lexend", sans-serif; font-weight: 600; font-size: 0.75rem;
	padding: 0.32rem 0.7rem; border-radius: 8px;
}
.suryon-chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.2rem 0 0.3rem; }
.suryon-pcard-media { position: relative; }
.suryon-pcard-media .suryon-badge {
	position: absolute; top: 0.875rem; left: 0.875rem; z-index: 1;
}

/* ---------- S3/S7: footer line-art + keyline ---------- */
.suryon-footer { position: relative; overflow: hidden; }
.suryon-footer::before {
	content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
	background: linear-gradient(90deg, #008088, #d88a2d); z-index: 2;
}
.suryon-footer-art {
	position: absolute; inset: 0; width: 100%; height: 100%;
	pointer-events: none; z-index: 0;
}
/* Lift the footer's real content above the art WITHOUT re-positioning the art itself —
   `.suryon-footer > *` ties on specificity and would drop the SVG back into flow,
   adding ~346px of dead height to the footer. */
.suryon-footer > *:not(.suryon-footer-art) { position: relative; z-index: 1; }

/* ---------- S8-A: "How we hire" progress timeline ---------- */
.suryon-hire { position: relative; margin-top: 2.5rem; }
.suryon-hire-track {
	position: absolute; left: 12.5%; right: 12.5%; top: 27px; height: 3px;
	background: #dce7e8; border-radius: 2px; z-index: 0;
}
.suryon-hire-fill {
	position: absolute; inset: 0; transform-origin: left;
	background: linear-gradient(90deg, #008088, #d88a2d); border-radius: 2px;
	transform: scaleX(0);
}
.suryon-hire-steps {
	position: relative; z-index: 1;
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem;
}
.suryon-hire-step { text-align: center; }
.suryon-hire-icon {
	width: 56px; height: 56px; border-radius: 50%;
	background: #d88a2d; color: #1d1405;
	display: flex; align-items: center; justify-content: center;
	margin: 0 auto 1rem; box-shadow: 0 8px 18px rgba(216, 138, 45, 0.4);
}
.suryon-hire-label {
	font-family: "Lexend", sans-serif; font-weight: 700; font-size: 0.75rem;
	letter-spacing: 0.08em; color: #008088; margin: 0 0 0.4rem;
}
.suryon-hire-step h3 { font-size: 1.1rem; color: #0f3d44; margin: 0 0 0.5rem; }
.suryon-hire-step p { font-size: 0.85rem; color: #5c6470; line-height: 1.5; margin: 0 0 0.6rem; }
.suryon-hire-step a {
	font-family: "Lexend", sans-serif; font-weight: 600; font-size: 0.85rem;
	color: #008088; text-decoration: none;
}
.suryon-hire-step a:hover { color: #0f3d44; }
/* Animate when the section is revealed (class added by animations.js). */
.suryon-hire.is-live .suryon-hire-fill {
	animation: suryonFillX 1.9s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}
.suryon-hire.is-live .suryon-hire-step {
	animation: suryonUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.suryon-hire.is-live .suryon-hire-step:nth-child(1) { animation-delay: 0.25s; }
.suryon-hire.is-live .suryon-hire-step:nth-child(2) { animation-delay: 0.45s; }
.suryon-hire.is-live .suryon-hire-step:nth-child(3) { animation-delay: 0.65s; }
.suryon-hire.is-live .suryon-hire-step:nth-child(4) { animation-delay: 0.85s; }
@keyframes suryonFillX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes suryonUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (max-width: 781px) {
	.suryon-hire-steps { grid-template-columns: 1fr; gap: 2rem; }
	.suryon-hire-track { display: none; }
}
/* Reduced motion: everything static and visible. */
@media (prefers-reduced-motion: reduce) {
	.suryon-hire.is-live .suryon-hire-fill { animation: none; transform: scaleX(1); }
	.suryon-hire.is-live .suryon-hire-step { animation: none; opacity: 1; transform: none; }
}

/* ---------- S9: blog cards with featured images ---------- */
.suryon-card .wp-block-post-featured-image { margin: 0; }
.suryon-card .wp-block-post-featured-image img {
	width: 100%; height: 100%; object-fit: cover; display: block;
}
.suryon-card .wp-block-post-title { font-size: 1.25rem; line-height: 1.25; }
.suryon-feat-post {
	background: #f2f7f7; border: 1px solid #dce7e8; border-radius: 16px;
	overflow: hidden; transition: box-shadow 220ms ease, border-color 220ms ease;
}
.suryon-feat-post:hover { box-shadow: 0 18px 40px rgba(15, 61, 68, 0.12); border-color: #9fc9cc; }

/* ---------- P-C: product page (datasheet layout) ---------- */
.suryon-pp-facts {
	display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; margin-top: 1.4rem;
}
.suryon-pp-fact {
	background: #f2f7f7; border: 1px solid #dce7e8; border-radius: 12px;
	padding: 0.85rem 1rem;
}
.suryon-pp-fact span {
	display: block; font-family: "Lexend", sans-serif; font-weight: 600;
	font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
	color: #5c6470; margin-bottom: 0.25rem;
}
.suryon-pp-fact strong { font-family: "Lexend", sans-serif; color: #0f3d44; font-size: 0.98rem; }
.suryon-pp-nav {
	display: flex; flex-wrap: wrap; gap: 0.5rem;
	border-top: 1px solid #dce7e8; border-bottom: 1px solid #dce7e8;
	padding: 0.75rem 0; margin: 2rem 0 0;
}
.suryon-pp-nav a {
	font-family: "Lexend", sans-serif; font-weight: 600; font-size: 0.9rem;
	color: #5c6470; text-decoration: none;
	padding: 0.4rem 0.9rem; border-radius: 8px;
}
.suryon-pp-nav a:hover { background: #eef5f5; color: #00666d; }
.suryon-std-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; }
@media (max-width: 781px) {
	.suryon-pp-facts { grid-template-columns: 1fr; }
}

/* P-C top row: a fixed image/CTA rail beside a flexible facts column.
   Set here rather than as a block width — the editor drops inline flex-basis. */
.suryon-pp-top { align-items: flex-start; }
@media (min-width: 782px) {
	.suryon-pp-top > .wp-block-column:first-child { flex: 0 0 320px; max-width: 320px; }
	.suryon-pp-top > .wp-block-column:last-child  { flex: 1 1 auto; }
}


/* Footer was consuming ~69% of a 800px-tall viewport. Tighten the vertical rhythm
   without touching content: less chrome padding, denser link lists. */
.suryon-footer { padding-top: 2.75rem !important; padding-bottom: 1.5rem !important; }
.suryon-footer .wp-block-list li { margin-bottom: 0.25rem !important; line-height: 1.45; }
.suryon-footer h4 { margin-bottom: 0.75rem; font-size: 0.92rem; }
.suryon-footer p { line-height: 1.55; }
.suryon-footer .suryon-footer-bottom { margin-top: 1.75rem !important; padding-top: 1.1rem !important; }
.suryon-footer .suryon-social { margin-top: 0.5rem; }
@media (max-width: 781px) {
	.suryon-footer { padding-top: 2.25rem !important; }
}

/* Mobile footer ran 1267px on an 812px screen (1.6 screens of scrolling) because the
   four columns stack and the link lists run full length. Pair the links into two
   columns and tighten the chrome; content is unchanged. */
@media (max-width: 781px) {
	.suryon-footer .wp-block-columns { gap: 1.5rem !important; }
	/* Company + Products are short link lists — sit them side by side rather than
	   stacking all four sections, which is what made the footer 1.5 screens tall. */
	.suryon-footer > .wp-block-columns {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 1.5rem 1rem !important;
	}
	.suryon-footer > .wp-block-columns > .wp-block-column:nth-child(1),
	.suryon-footer > .wp-block-columns > .wp-block-column:nth-child(4) { grid-column: 1 / -1; }
	.suryon-footer .wp-block-list { display: block; }
	.suryon-footer .wp-block-column { margin-bottom: 0 !important; }
	.suryon-footer h4 { margin-bottom: 0.5rem; }
	.suryon-footer p { margin-bottom: 0.6rem; }
	.suryon-footer .suryon-footer-bottom { margin-top: 1.25rem !important; }
}

/* ============================================================
   CAT-C — category / range page: technical index with a sticky
   product rail beside dense content. Chosen 19-07 because it is
   the least photo-dependent of the three directions and leans on
   the specs, which we actually have.
   ============================================================ */
.suryon-cat-hero {
	display: grid; grid-template-columns: 1.1fr 0.9fr;
	background: linear-gradient(135deg, #0f3d44, #0c5058);
	border-radius: 16px; overflow: hidden;
}
.suryon-cat-hero-copy { padding: 2.25rem 2.1rem; align-self: center; }
.suryon-cat-hero-copy .suryon-eyebrow { color: #ffb95e; margin: 0 0 0.6rem; }
.suryon-cat-hero-copy h1, .suryon-cat-hero-copy h2 {
	color: #fff; font-size: clamp(1.7rem, 3.2vw, 2.15rem); line-height: 1.05; margin: 0 0 0.6rem;
}
.suryon-cat-hero-copy p { color: #d7e6e8; font-size: 0.98rem; line-height: 1.5; margin: 0; }
.suryon-cat-hero-media { position: relative; min-height: 210px; }
.suryon-cat-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.suryon-cat-body { display: grid; grid-template-columns: 240px 1fr; margin-top: 1.5rem; }
.suryon-cat-rail {
	border-right: 1px solid #dce7e8; padding: 1.6rem 1.25rem; background: #fbfdfd;
	align-self: start; position: sticky; top: 90px;
}
.suryon-cat-rail-label {
	font-family: "Lexend", sans-serif; font-weight: 600; font-size: 0.7rem;
	letter-spacing: 0.1em; text-transform: uppercase; color: #00666d; margin: 0 0 0.9rem;
}
.suryon-cat-rail nav { display: flex; flex-direction: column; gap: 2px; margin-bottom: 1.5rem; }
.suryon-cat-rail nav a {
	display: flex; align-items: center; justify-content: space-between;
	padding: 0.62rem 0.75rem; border-radius: 8px; text-decoration: none;
	color: #5c6470; font-family: "Lexend", sans-serif; font-weight: 500; font-size: 0.85rem;
}
.suryon-cat-rail nav a:hover { background: #f2f7f7; color: #0f3d44; }
.suryon-cat-rail nav a.is-current { background: #eef5f5; color: #0f3d44; font-weight: 600; }
.suryon-cat-rail nav a span { color: #008088; }
.suryon-cat-quote { border: 1px solid #dce7e8; border-radius: 12px; padding: 1rem; background: #fff; }
.suryon-cat-quote h4 { font-size: 0.95rem; color: #0f3d44; margin: 0 0 0.35rem; }
.suryon-cat-quote p { color: #5c6470; font-size: 0.8rem; line-height: 1.5; margin: 0 0 0.75rem; }
.suryon-cat-quote a {
	display: block; text-align: center; background: #d88a2d; color: #1d1405;
	font-family: "Lexend", sans-serif; font-weight: 600; font-size: 0.85rem;
	padding: 0.62rem; border-radius: 8px; text-decoration: none;
}
.suryon-cat-quote a:hover { background: #c1781f; }

.suryon-cat-main { padding: 0 0 0 1.9rem; }
.suryon-cat-rows { display: flex; flex-direction: column; gap: 0.62rem; margin: 0 0 2rem; }
.suryon-cat-row {
	display: flex; gap: 0.9rem; align-items: center;
	border: 1px solid #dce7e8; border-radius: 11px; padding: 0.7rem 0.95rem;
	transition: border-color 180ms ease, background 180ms ease;
}
.suryon-cat-row:hover { border-color: #9fc9cc; background: #fbfdfd; }
.suryon-cat-row-icon {
	flex: none; width: 52px; height: 44px; border-radius: 8px;
	background: #eef5f5; color: #008088;
	display: flex; align-items: center; justify-content: center;
}
.suryon-cat-row-text { flex: 1; min-width: 0; }
.suryon-cat-row-text h4 { font-size: 0.92rem; color: #0f3d44; margin: 0 0 0.1rem; }
.suryon-cat-row-text p { color: #5c6470; font-size: 0.8rem; line-height: 1.4; margin: 0; }
.suryon-cat-tag {
	flex: none; background: #eef5f5; color: #00666d;
	font-family: "Lexend", sans-serif; font-weight: 600; font-size: 0.66rem;
	padding: 0.18rem 0.5rem; border-radius: 6px;
}
.suryon-cat-note { color: #8a97a0; font-size: 0.76rem; font-style: italic; margin-top: 0.75rem; }
.suryon-cat-cta {
	background: #f2f7f7; border: 1px solid #dce7e8; border-radius: 14px;
	padding: 1.6rem 1.9rem; margin-top: 1.75rem;
	display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.suryon-cat-cta h3 { color: #0f3d44; font-size: 1.2rem; margin: 0 0 0.2rem; }
.suryon-cat-cta p { color: #5c6470; font-size: 0.87rem; margin: 0; }

@media (max-width: 900px) {
	.suryon-cat-hero { grid-template-columns: 1fr; }
	.suryon-cat-hero-media { min-height: 190px; order: -1; }
	.suryon-cat-body { grid-template-columns: 1fr; }
	.suryon-cat-rail {
		position: static; border-right: none; border-bottom: 1px solid #dce7e8;
		border-radius: 12px 12px 0 0;
	}
	.suryon-cat-rail nav { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
	.suryon-cat-main { padding: 1.4rem 0 0; }
	.suryon-cat-tag { display: none; }
}
/* Own-brand range pages (Flarix / Envera) lead with their wordmark above the eyebrow. */
.suryon-cat-hero-logo { height: 30px; width: auto; display: block; margin-bottom: 0.9rem; }


/* ---------- Breadcrumbs (added 4.10.0) ----------
   One markup, two colour treatments: the base rules read on light backgrounds
   (product singles, range pages, page.html content); the .suryon-page-hero
   overrides read on the dark teal band. */
.suryon-crumbs {
	margin: 0 0 1rem;
	color: #5c6470;
}
.suryon-crumbs ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
	font-family: "Lexend", sans-serif;
	font-size: 0.8rem;
	font-weight: 500;
	line-height: 1.4;
}
.suryon-crumbs ol::-webkit-scrollbar { display: none; }
.suryon-crumbs li { display: flex; align-items: center; white-space: nowrap; }
.suryon-crumbs li + li::before {
	content: "\203A";
	margin: 0 0.5rem;
	opacity: 0.55;
	font-size: 0.95rem;
	line-height: 1;
}
.suryon-crumbs a {
	color: #00666d;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	padding-bottom: 1px;
}
.suryon-crumbs a:hover { color: #0f3d44; border-bottom-color: currentColor; }
.suryon-crumb-current span {
	color: #16282d;
	display: inline-block;
	max-width: 24ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: bottom;
}

/* Dark band: reuses the exact palette this band already uses elsewhere
   (#9db9bd meta, #d7e6e8 body copy, #ffb95e amber accent). */
.suryon-page-hero .suryon-crumbs { color: #9db9bd; }
.suryon-page-hero .suryon-crumbs a { color: #d7e6e8; }
.suryon-page-hero .suryon-crumbs a:hover { color: #ffb95e; }
.suryon-page-hero .suryon-crumb-current span { color: #ffb95e; }

/* Focus ring on dark bands. The global :focus-visible ring is teal #008088, which
   measures only 2.34:1 against this gradient — under the 3:1 WCAG 2.2 SC 1.4.11 needs
   for a focus indicator. Breadcrumb links made this the FIRST thing a keyboard user
   tabs into on nearly every page, so fix it for every dark band, not just crumbs. */
.suryon-page-hero a:focus-visible,
.suryon-cat-hero a:focus-visible,
.suryon-footer a:focus-visible,
.suryon-hero a:focus-visible { outline-color: #ffb95e; }

/* Space below the trail. blockGap on the following sibling swallows a plain
   margin-bottom here, so set it on the gap itself. */
.suryon-crumbs + * { margin-block-start: 1.1rem; }

/* Range pages open with the rounded .suryon-cat-hero card, so the trail sits on
   white just above it — tighten the gap. */
.suryon-crumbs + .wp-block-group { margin-top: 0.25rem; }

@media (max-width: 600px) {
	.suryon-crumbs ol { font-size: 0.78rem; }
	.suryon-crumb-current span { max-width: 16ch; }

	/* 3+ levels: collapse the trail to a single "back to the parent" link.
	   Dropping just the current crumb (the earlier approach) left the trail ENDING
	   on a link to a different page — which reads as "you are here" and sends people
	   somewhere they did not expect. One unambiguous up-link beats a partial trail.
	   2-level trails (Home › Contact) are already short and stay intact. */
	.suryon-crumbs ol:has(li:nth-child(3)) > li { display: none; }
	.suryon-crumbs ol:has(li:nth-child(3)) > li:nth-last-child(2) { display: flex; }
	.suryon-crumbs ol:has(li:nth-child(3)) > li:nth-last-child(2)::before {
		content: "\2039";
		margin: 0 0.35rem 0 0;
		font-size: 1.05rem;
		opacity: 0.75;
	}
}

/* ---------- Lateral nav: other product ranges (added 4.10.0) ----------
   Lives inside .suryon-cat-rail under "In this range", so it inherits that column's
   nav styling (see .suryon-cat-rail nav a). Only the separator and the muted
   "All products" tail are new. */
.suryon-range-switch-label {
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid #e6eef0;
}
.suryon-cat-rail .suryon-range-switch { display: flex; flex-direction: column; gap: 2px; margin-bottom: 1.5rem; }
.suryon-cat-rail .suryon-range-switch a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.5rem;
	font-family: "Lexend", sans-serif;
	font-size: 0.83rem;
	font-weight: 500;
	color: #5c6470;
	text-decoration: none;
	padding: 0.4rem 0.55rem;
	border-radius: 7px;
	transition: background 160ms ease, color 160ms ease;
}
.suryon-cat-rail .suryon-range-switch a:hover { background: #f2f7f7; color: #0f3d44; }
.suryon-cat-rail .suryon-range-switch a span { color: #008088; }
.suryon-cat-rail .suryon-range-switch .suryon-range-all {
	margin-top: 0.3rem;
	color: #0f3d44;
	font-weight: 600;
}

/* Rail stacks above the content on narrow screens — go two-up like the rail's own nav
   so the strip stays short instead of becoming a long list to scroll past. */
@media (max-width: 900px) {
	.suryon-cat-rail .suryon-range-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
	.suryon-cat-rail .suryon-range-switch .suryon-range-all { grid-column: 1 / -1; margin-top: 0; }
}

/* Fallback shape if a range page ever has no rail to slot into. */
.suryon-cat-body ~ .suryon-range-switch,
.entry-content > .suryon-range-switch { display: flex; flex-wrap: wrap; gap: 0.55rem; }


/* Leadership cards: keep the monogram on the SAME left axis as the copy.
   Cause: the tile is a constrained-layout group, so core applies
   `.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull))
    { margin-left: auto !important; margin-right: auto !important; }`
   to every direct child. The h3 / eyebrow / bio are auto-width so it is
   invisible on them, but .suryon-avatar is a fixed 72px box, so it alone
   was being centred. !important is required to beat core's !important;
   our (0,2,0) selector then wins on specificity.
   Matches the house style: careers icon tiles, manufacturing QA number
   tiles and the home quote cards all sit their marker on the left edge. */
.suryon-tile > .suryon-avatar {
	margin-left: 0 !important;
	margin-right: auto !important;
}


/* Optional polish: bind the name and the role together as one pair, and let
   the bio be the block that is actually separated. theme.json blockGap gives
   every child a flat 1.5rem (24px) top margin, which currently makes
   "Ankit Mangukiya" and "FOUNDER & DIRECTOR" read as two unrelated lines.
   Scoped by the avatar sibling so it can only ever hit Leadership cards
   (the vision/purpose/mission tiles put the eyebrow BEFORE the heading, so
   the `h3 + .suryon-eyebrow` adjacency does not exist there). */
.suryon-tile > .suryon-avatar + h3 { margin-top: 1.1rem; }
.suryon-tile > .suryon-avatar ~ h3 + .suryon-eyebrow { margin-top: 0.3rem; }
.suryon-tile > .suryon-avatar ~ .suryon-eyebrow + p { margin-top: 0.9rem; }


/* ---------- Testimonials carousel (added 4.10.0) ----------
   Renders from the [suryon_testimonials] shortcode. The card design itself is the
   existing .suryon-quote-card block above — nothing here restyles it, this is only
   the carousel scaffolding. Cards-per-view lives in --tst-per and is read by
   assets/js/testimonials.js, so the breakpoints are defined once, here. */
.suryon-tst-section {
	max-width: none;
	background: #f2f7f7;
	/* Use the site's own root gutter token, not a bespoke clamp — a hand-rolled one
	   drifted from the rest of the page by ~16px around 1024px. */
	padding: 4rem var(--wp--style--root--padding-right, clamp(1rem, 4vw, 1.5rem));
}
.suryon-tst-inner { max-width: 1200px; margin: 0 auto; }
.suryon-tst-inner > h2 { margin-top: 0; }

.suryon-tst {
	--tst-per: 3;
	--tst-gap: 1.5rem;
	position: relative;
	margin-top: 2.2rem;
}
@media (max-width: 1024px) { .suryon-tst { --tst-per: 2; } }
@media (max-width: 700px)  { .suryon-tst { --tst-per: 1; } }

.suryon-tst-viewport { position: relative; }
.suryon-tst.is-ready .suryon-tst-viewport { overflow: hidden; }

.suryon-tst-track {
	display: flex;
	gap: var(--tst-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	transition: transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
	will-change: transform;
}

/* Before the JS boots — and permanently if JS is off or blocked — every quote is
   visible as a wrapped grid rather than clipped to the first three. Fail-open. */
.suryon-tst:not(.is-ready) .suryon-tst-track { flex-wrap: wrap; transform: none !important; }
.suryon-tst:not(.is-ready) .suryon-tst-slide { flex: 1 1 280px; }
.suryon-tst:not(.is-ready) .suryon-tst-controls { display: none; }

.suryon-tst-slide {
	flex: 0 0 calc((100% - (var(--tst-per) - 1) * var(--tst-gap)) / var(--tst-per));
	min-width: 0;
	display: flex; /* card fills the slide WITHOUT height:100% (theme trap) */
}
.suryon-tst-slide > .suryon-quote-card {
	flex: 1 1 auto;
	height: auto;  /* overrides .suryon-quote-card{height:100%} above */
	margin: 0;     /* <figure> default margin */
}
.suryon-tst-slide blockquote { margin: 0; padding: 0; border: 0; }

/* One or two quotes on a three-up screen: centred static row, no controls. */
.suryon-tst.is-static .suryon-tst-track { flex-wrap: wrap; justify-content: center; transform: none !important; }
.suryon-tst.is-static .suryon-tst-controls { display: none; }

/* Optional rating — only rendered when the team sets one. */
.suryon-quote-stars { margin: 0.6rem 0 0; color: #d88a2d; font-size: 0.95rem; letter-spacing: 0.12em; }

.suryon-tst-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.9rem;
	margin-top: 1.6rem;
}
.suryon-tst-arrow {
	flex: none;
	width: 42px;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid #dce7e8;
	border-radius: 50%;
	background: #fff;
	color: #0f3d44;
	transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}
.suryon-tst-arrow:hover { background: #008088; border-color: #008088; color: #fff; }
.suryon-tst-arrow svg { width: 17px; height: 17px; display: block; }

.suryon-tst-dots { display: flex; align-items: center; gap: 0.45rem; }
.suryon-tst-dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	/* WCAG 1.4.11 non-text contrast: #c3d5d7 was 1.41:1 on the #f2f7f7 band. #748e90 = 3.23:1. */
	background: #748e90;
	transition: background 180ms ease, width 180ms ease;
}
/* Active pill: #d88a2d measured 2.56:1 on this band — darkened to #b8731f = 3.52:1. */
.suryon-tst-dot[aria-current="true"] { width: 24px; border-radius: 5px; background: #b8731f; }

.suryon-tst-arrow:focus-visible,
.suryon-tst-dot:focus-visible { outline: 2px solid #008088; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
	.suryon-tst-track { transition: none; }
}

/* The default page template constrains every direct child to 44rem
   (see `.page-template-default .wp-block-post-content > *` above), which would
   squash the full-bleed carousel if the team ever drops [suryon_testimonials]
   on a page that uses it. Opt this one section back out. */
.page-template-default .wp-block-post-content > .suryon-tst-section {
	max-width: none;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Pause / play (WCAG 2.2.2). Same 42px circle as the arrows so the control row
   stays one visual family; the icon swaps, the button never moves. */
.suryon-tst-play {
	flex: none;
	width: 42px; height: 42px;
	display: inline-flex; align-items: center; justify-content: center;
	padding: 0;
	border: 1px solid #dce7e8; border-radius: 50%;
	background: #fff; color: #0f3d44;
	transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}
.suryon-tst-play[hidden] { display: none; }
/* Set apart from prev/dots/next — it controls rotation, it is not another way to move. */
.suryon-tst-play { margin-left: 0.6rem; }
.suryon-tst-play:hover { background: #008088; border-color: #008088; color: #fff; }
.suryon-tst-play:focus-visible { outline: 2px solid #008088; outline-offset: 3px; }
.suryon-tst-play svg { width: 15px; height: 15px; display: block; }
.suryon-tst-play .suryon-tst-ico-play,
.suryon-tst-play.is-paused .suryon-tst-ico-pause { display: none; }
.suryon-tst-play.is-paused .suryon-tst-ico-play { display: block; }
/* Paused is a state the visitor chose — make it legible, not silent. */
.suryon-tst-play.is-paused { background: #0f3d44; border-color: #0f3d44; color: #fff; }

/* Footer column titles are top-level sections of the contentinfo landmark, so they are
   h2 for screen-reader outline purposes (they were h4 under an h1, skipping two levels).
   This keeps them looking exactly as before. */
.suryon-footer h2.suryon-footer-h {
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 600;
	margin: 0 0 1rem;
}