/*
 * components.css — every UI component: header, hero, buttons, cards, stats,
 * timeline, footer, forms, tables, investor/cert lists, chips, alerts.
 */

/* ======================================================================== *
 * Header & navigation
 * ======================================================================== */
.sk-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--sk-bg); /* fallback for browsers without color-mix() */
	background: color-mix(in srgb, var(--sk-bg) 86%, transparent);
	-webkit-backdrop-filter: blur(12px) saturate(120%);
	backdrop-filter: blur(12px) saturate(120%);
	border-bottom: 1px solid var(--sk-hairline);
	transition: background var(--sk-dur-fast) var(--sk-ease), transform var(--sk-dur) var(--sk-ease);
}
.sk-header[data-hidden="true"] { transform: translateY(-100%); }

/* Header layout: logo spans the full height on the left; the right side stacks
 * the information bar (top) over the menu (bottom). */
.sk-header__bar {
	display: grid;
	width: 100%;
	max-width: none;
	margin-inline: 0;
	padding-inline: clamp(0.85rem, 1.6vw, 1.75rem);
	grid-template-columns: clamp(220px, 16vw, 285px) minmax(0, 1fr);
	grid-template-rows: 42px minmax(68px, auto);
	grid-template-areas:
		"brand info"
		"brand nav";
	align-items: stretch;
	column-gap: clamp(1.25rem, 2.5vw, 2.5rem);
	min-height: 110px;
}
.sk-brand {
	grid-area: brand;
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin-left: 0;
	padding-right: clamp(1rem, 2vw, 1.6rem);
	padding-left: 0;
	border-right: 1px solid var(--sk-hairline);
	min-width: 0;
}

.sk-topbar {
	grid-area: info;
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--sk-hairline);
	font-size: var(--sk-step--1);
}
.sk-topbar__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	width: 100%;
	gap: clamp(1rem, 3vw, 2rem);
	align-items: center;
	min-height: 42px;
}
.sk-topbar__item {
	color: var(--sk-muted);
	white-space: nowrap;
	line-height: 1;
}
.sk-topbar__item:hover { color: var(--sk-brass-mid); }
.sk-topbar__item--muted {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	letter-spacing: 0.04em;
}

.sk-nav {
	grid-area: nav;
	display: flex;
	align-items: center;
	justify-content: stretch;
	gap: var(--sk-space-3);
	min-height: 68px;
	min-width: 0;
}

.sk-brand__logo,
.sk-brand .custom-logo-link {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	max-width: 245px;
}
.sk-brand__logo img,
.sk-header .custom-logo {
	height: auto;
	max-height: clamp(70px, 5.8vw, 96px);
	width: 100%;
	max-width: 245px;
	object-fit: contain;
	display: block;
}
.sk-brand__text { display: inline-flex; flex-direction: column; line-height: 1; }
.sk-brand__name {
	font-family: var(--sk-font-serif);
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	font-weight: 600;
	letter-spacing: 0.01em;
}
.sk-brand__tag {
	font-size: 0.62rem;
	letter-spacing: 0.36em;
	text-transform: uppercase;
	color: var(--sk-muted);
	margin-top: 0.35em;
}

.sk-nav__menu {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 100%;
	gap: clamp(0.75rem, 1.8vw, 1.75rem);
	flex-wrap: nowrap;
	min-width: 0;
}
.sk-menu {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: auto;
	gap: clamp(0.45rem, 1.1vw, 1.35rem);
	flex-wrap: nowrap;
	list-style: none;
	margin: 0; padding: 0;
}
.sk-menu a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	color: #08140E;
	font-size: clamp(0.8rem, 0.72rem + 0.28vw, 0.96rem);
	line-height: 1;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-weight: 700;
	position: relative;
	padding: 0.62rem clamp(0.68rem, 0.95vw, 1rem);
	border-radius: 999px;
	border: 1px solid transparent;
	overflow: hidden;
	isolation: isolate;
	white-space: nowrap;
	transition: color var(--sk-dur-fast) var(--sk-ease), background-color var(--sk-dur-fast) var(--sk-ease), border-color var(--sk-dur-fast) var(--sk-ease), transform var(--sk-dur-fast) var(--sk-ease);
}
/* Small centred indicator that grows under the active / hovered pill. */
.sk-menu a::after {
	content: "";
	position: absolute; left: 50%; bottom: 0.36rem;
	width: 0; height: 2px; border-radius: 2px;
	background: var(--sk-sheen);
	transform: translateX(-50%);
	transition: width var(--sk-dur) var(--sk-ease);
}
.sk-menu a:hover {
	color: var(--sk-brass-core);
	background-color: rgba(30, 138, 90, 0.08);
	transform: translateY(-1px);
}
.sk-menu .current-menu-item > a,
.sk-menu .current_page_item > a {
	color: #052514;
	background-color: rgba(30, 138, 90, 0.12);
	border-color: rgba(30, 138, 90, 0.32);
}
.sk-menu a:hover::after,
.sk-menu .current-menu-item > a::after,
.sk-menu .current_page_item > a::after { width: 45%; }

/* Sub-menus */
.sk-menu .sub-menu {
	position: absolute;
	list-style: none;
	margin: 0; padding: 0.5rem 0;
	min-width: 220px;
	background: var(--sk-panel);
	border: 1px solid var(--sk-hairline);
	border-radius: var(--sk-radius-sm);
	box-shadow: var(--sk-shadow-soft);
	opacity: 0; visibility: hidden;
	transform: translateY(8px);
	transition: all var(--sk-dur-fast) var(--sk-ease);
	z-index: 10;
}
.sk-menu .menu-item-has-children { position: relative; }
.sk-menu .menu-item-has-children:hover > .sub-menu,
.sk-menu .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1; visibility: visible; transform: translateY(0);
}
.sk-menu .sub-menu a { display: block; padding: 0.5rem 1.1rem; text-transform: none; letter-spacing: 0; }
.sk-menu .sub-menu a::after { display: none; }

/* Hamburger */
.sk-nav__toggle {
	display: none;
	width: 48px; height: 48px;
	background: none; border: 0; cursor: pointer;
	flex-direction: column; justify-content: center; gap: 6px;
	padding: 0;
}
.sk-nav__toggle-bar {
	display: block; height: 2px; width: 26px;
	background: var(--sk-brass-mid);
	transition: transform var(--sk-dur-fast) var(--sk-ease), opacity var(--sk-dur-fast) var(--sk-ease);
}
.sk-nav__toggle[aria-expanded="true"] .sk-nav__toggle-bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.sk-nav__toggle[aria-expanded="true"] .sk-nav__toggle-bar:nth-child(2) { opacity: 0; }
.sk-nav__toggle[aria-expanded="true"] .sk-nav__toggle-bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ======================================================================== *
 * Buttons
 * ======================================================================== */
.sk-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 48px;
	padding: 0.85rem 1.6rem;
	border-radius: 999px;
	font-family: var(--sk-font-sans);
	font-size: var(--sk-step--1);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	border: 1px solid transparent;
	overflow: hidden;
	box-shadow: var(--sk-shadow-inset);
	transform: perspective(600px) translateZ(0);
	transition: transform var(--sk-dur-fast) var(--sk-ease-spring), box-shadow var(--sk-dur-fast) var(--sk-ease), background-position var(--sk-dur) var(--sk-ease), color var(--sk-dur-fast) var(--sk-ease), border-color var(--sk-dur-fast) var(--sk-ease);
	will-change: transform;
}
.sk-btn::before {
	content: "";
	position: absolute;
	inset: 2px;
	border-radius: inherit;
	border: 1px solid rgba(255, 255, 255, 0.22);
	pointer-events: none;
}
.sk-btn::after {
	content: "";
	position: absolute;
	top: -35%;
	bottom: -35%;
	left: -45%;
	width: 38%;
	background: linear-gradient(110deg, transparent, rgba(255, 255, 255, 0.34), transparent);
	transform: translateX(-160%) rotate(12deg);
	transition: transform 700ms var(--sk-ease);
	pointer-events: none;
}
.sk-btn:hover::after { transform: translateX(420%) rotate(12deg); }
.sk-btn--lg { min-height: 56px; padding: 1.05rem 2.1rem; }
.sk-btn:active { transform: perspective(600px) translateY(1px) scale(0.98); }

.sk-btn--brass {
	color: #07130C;
	background-image: linear-gradient(120deg, var(--sk-brass-deep), var(--sk-brass-mid) 35%, var(--sk-brass-sheen) 50%, var(--sk-brass-mid) 65%, var(--sk-brass-deep));
	background-size: 220% 100%;
	background-position: 0% 0;
	box-shadow: 0 6px 24px rgba(30, 138, 90, 0.30);
}
.sk-btn--brass:hover {
	color: #07130C;
	background-position: 100% 0;
	transform: perspective(600px) translateY(-3px) rotateX(8deg) scale(1.02);
	box-shadow: 0 14px 34px rgba(67, 201, 138, 0.42), var(--sk-glow);
}

.sk-btn--ghost {
	color: #08140E;
	border-color: var(--sk-brass-core);
	background:
		linear-gradient(var(--sk-bg), var(--sk-bg)) padding-box,
		linear-gradient(120deg, rgba(21, 107, 69, 0.35), rgba(67, 201, 138, 0.9), rgba(21, 107, 69, 0.35)) border-box;
	box-shadow: 0 8px 24px rgba(30, 138, 90, 0.10), var(--sk-shadow-inset);
}
.sk-btn--ghost:hover {
	color: #052514;
	border-color: var(--sk-brass-mid);
	background:
		linear-gradient(rgba(30, 138, 90, 0.08), rgba(30, 138, 90, 0.08)) padding-box,
		var(--sk-sheen) border-box;
	transform: perspective(600px) translateY(-3px) rotateX(8deg) scale(1.02);
	box-shadow: var(--sk-glow);
}
.sk-nav__cta { min-height: 44px; padding: 0.7rem 1.3rem; }

/* ======================================================================== *
 * Hero
 * ======================================================================== */
.sk-hero {
	position: relative;
	min-height: 100vh;
	display: grid;
	align-items: center;
	overflow: hidden;
	isolation: isolate;
	perspective: var(--sk-perspective);
}
.sk-hero__molten {
	position: absolute; inset: -20%;
	z-index: -2;
	background:
		radial-gradient(60% 50% at 30% 30%, rgba(30,138,90,0.12), transparent 66%),
		radial-gradient(50% 60% at 75% 70%, rgba(30,120,80,0.08), transparent 66%),
		conic-gradient(from 200deg at 50% 50%, #FFFFFF, #F7F5ED, #EEF2E8, #F7F5ED, #FFFFFF);
	background-size: 200% 200%, 200% 200%, 160% 160%;
	filter: blur(12px) saturate(102%);
	animation: sk-molten 22s ease-in-out infinite alternate;
}
/* Slow-drifting 3D grid floor for depth under the hero copy */
.sk-hero__grid {
	position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background-image:
		linear-gradient(rgba(21,95,64,0.07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(21,95,64,0.07) 1px, transparent 1px);
	background-size: 72px 72px;
	-webkit-mask-image: radial-gradient(120% 85% at 50% 120%, #000 6%, transparent 55%);
	mask-image: radial-gradient(120% 85% at 50% 120%, #000 6%, transparent 55%);
	transform: perspective(600px) rotateX(62deg) translateY(20%) scale(2);
	transform-origin: 50% 100%;
	animation: sk-grid-drift 22s linear infinite;
	opacity: 0.35;
}
.sk-hero__inner { transform-style: preserve-3d; }
.sk-hero__vignette {
	position: absolute; inset: 0; z-index: -1;
	background: radial-gradient(120% 90% at 50% 0%, transparent 40%, var(--sk-bg) 92%);
}
.sk-hero__inner { padding-block: clamp(6rem, 16vh, 11rem); max-width: 60rem; }
.sk-hero__eyebrow {
	text-transform: uppercase; letter-spacing: 0.34em;
	color: var(--sk-brass-mid); font-size: var(--sk-step--1);
	margin-bottom: 1.4rem;
}
.sk-hero__title {
	font-size: var(--sk-step-4);
	margin-bottom: 1.4rem;
	display: flex; flex-direction: column; gap: 0.3em;
}
.sk-hero__title-sub {
	font-family: var(--sk-font-sans);
	font-size: clamp(1.1rem, 0.9rem + 1vw, 1.7rem);
	font-weight: 400;
	letter-spacing: 0;
	color: var(--sk-text);
	max-width: 22ch;
}
.sk-hero__lede {
	font-size: var(--sk-step-1);
	color: var(--sk-muted);
	max-width: 54ch;
	margin-bottom: 2.4rem;
}
.sk-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; }

.sk-hero__scroll {
	position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
	width: 1px; height: 64px; display: block;
}
.sk-hero__scroll-line {
	position: absolute; inset: 0; width: 1px; height: 100%;
	background: linear-gradient(var(--sk-brass-mid), transparent);
	overflow: hidden;
}
.sk-hero__scroll-line::after {
	content: ""; position: absolute; top: -50%; left: 0;
	width: 1px; height: 50%;
	background: var(--sk-brass-sheen);
	animation: sk-scroll-drip 2.4s var(--sk-ease) infinite;
}

/* ======================================================================== *
 * Page hero (inner pages)
 * ======================================================================== */
.sk-page-hero {
	position: relative;
	padding-block: clamp(5rem, 13vw, 9rem) clamp(3rem, 7vw, 5rem);
	overflow: hidden;
	border-bottom: 1px solid var(--sk-hairline);
}
.sk-page-hero__molten {
	position: absolute; inset: 0; z-index: -1;
	background:
		radial-gradient(50% 80% at 80% 0%, rgba(30,138,90,0.10), transparent 60%),
		radial-gradient(40% 60% at 10% 100%, rgba(30,120,80,0.07), transparent 60%);
}
.sk-page-hero__title { font-size: var(--sk-step-3); margin-bottom: 0.5rem; }
.sk-page-hero__sub { font-size: var(--sk-step-1); color: var(--sk-muted); max-width: 56ch; }

/* ======================================================================== *
 * Trust strip
 * ======================================================================== */
.sk-trust { border-block: 1px solid var(--sk-hairline); background: var(--sk-panel); }
.sk-trust__list {
	display: flex; flex-wrap: wrap; justify-content: center;
	gap: clamp(1rem, 4vw, 3rem);
	list-style: none; margin: 0; padding: 1.4rem 0;
}
.sk-trust__item {
	font-size: var(--sk-step--1);
	letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--sk-muted);
	position: relative;
}
.sk-trust__item:not(:last-child)::after {
	content: ""; position: absolute; right: calc(-1 * clamp(0.5rem, 2vw, 1.5rem));
	top: 50%; width: 4px; height: 4px; border-radius: 50%;
	background: var(--sk-brass-core); transform: translateY(-50%);
}

/* ======================================================================== *
 * About teaser
 * ======================================================================== */
.sk-about-teaser__grid {
	display: grid; gap: clamp(2rem, 6vw, 5rem);
	grid-template-columns: 1.1fr 0.9fr; align-items: center;
}
.sk-object-frame {
	position: relative; border-radius: var(--sk-radius);
	overflow: hidden; background: var(--sk-panel-2);
	box-shadow: var(--sk-shadow-3d), var(--sk-shadow-inset);
	aspect-ratio: 4 / 3;
	transform: perspective(var(--sk-perspective)) rotateY(-6deg) rotateX(2deg);
	transition: transform var(--sk-dur) var(--sk-ease-spring), box-shadow var(--sk-dur) var(--sk-ease);
	animation: sk-float 7s var(--sk-ease) infinite;
	will-change: transform;
}
.sk-object-frame--lg { aspect-ratio: 1 / 1; }
.sk-object-frame:hover {
	animation: none; /* let the hover transform win over the float keyframes */
	transform: perspective(var(--sk-perspective)) rotateY(0deg) rotateX(0deg) translateY(-6px) scale(1.02);
	box-shadow: var(--sk-shadow-3d), var(--sk-glow);
}
.sk-object-frame::before {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: radial-gradient(60% 60% at 50% 30%, rgba(143,233,190,0.16), transparent 70%);
}
.sk-object-frame img { width: 100%; height: 100%; object-fit: cover; }
.sk-object-frame__placeholder, .sk-card__placeholder {
	position: absolute; inset: 0; display: grid; place-items: center;
	color: var(--sk-muted); font-size: var(--sk-step--1);
	letter-spacing: 0.18em; text-transform: uppercase;
	background:
		repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(67,201,138,0.05) 10px, rgba(67,201,138,0.05) 20px),
		var(--sk-panel-2);
}

/* ======================================================================== *
 * Stats / counters
 * ======================================================================== */
.sk-stats { background: var(--sk-panel); border-block: 1px solid var(--sk-hairline); }
.sk-stats.sk-section { padding-block: clamp(1.75rem, 3.5vw, 3rem); }
.sk-stats__grid {
	display: grid; gap: clamp(1.25rem, 3vw, 2.5rem);
	grid-template-columns: repeat(3, 1fr); text-align: center;
	perspective: 1000px;
}
.sk-stat {
	display: flex; flex-direction: column; gap: 0.3rem;
	transform-style: preserve-3d;
	transition: transform var(--sk-dur) var(--sk-ease-spring);
	will-change: transform;
}
.sk-stat:hover { transform: translateZ(30px) rotateX(6deg); }
.sk-stat__num {
	font-family: var(--sk-font-serif);
	font-size: var(--sk-step-3);
	font-weight: 600; line-height: 1;
	color: var(--sk-brass-mid);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.sk-stat__num { background: var(--sk-sheen); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
}
.sk-stat__label { color: var(--sk-muted); text-transform: uppercase; letter-spacing: 0.12em; font-size: var(--sk-step--1); }

/* ======================================================================== *
 * Homepage product slider
 * ======================================================================== */
.sk-products { overflow: hidden; }
.sk-products__head {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: var(--sk-space-3);
	margin-bottom: var(--sk-space-4);
}
.sk-products__heading { max-width: 680px; }
.sk-prodslider {
	position: relative;
	margin-inline: calc(var(--sk-gutter) * -1);
	padding-inline: var(--sk-gutter);
	perspective: 1400px;
}
.sk-prodslider::before,
.sk-prodslider::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 2;
	width: min(9vw, 110px);
	pointer-events: none;
}
.sk-prodslider::before {
	left: 0;
	background: linear-gradient(90deg, var(--sk-bg), transparent);
}
.sk-prodslider::after {
	right: 0;
	background: linear-gradient(270deg, var(--sk-bg), transparent);
}
.sk-prodslider__track {
	display: flex;
	gap: clamp(1rem, 2vw, 1.5rem);
	overflow-x: auto;
	overflow-y: visible;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--sk-gutter);
	padding: 0.25rem var(--sk-gutter) 1.15rem;
	margin-inline: calc(var(--sk-gutter) * -1);
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: none;
	-webkit-scrollbar-width: none;
	scrollbar-width: none;
}
.sk-prodslider__track::-webkit-scrollbar { display: none; }
.sk-prodslider__track:focus-visible {
	outline: 2px solid var(--sk-brass-mid);
	outline-offset: 6px;
	border-radius: var(--sk-radius);
}
.sk-prodslider__track.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
}
.sk-prodslider__track > .sk-card {
	flex: 0 0 clamp(245px, 25vw, 340px);
	min-height: 100%;
	scroll-snap-align: start;
}
.sk-prodslider__arrows {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	flex: 0 0 auto;
}
.sk-prodslider__arrow {
	position: relative;
	width: 48px;
	height: 48px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	color: var(--sk-brass-core);
	background:
		linear-gradient(var(--sk-bg), var(--sk-bg)) padding-box,
		var(--sk-sheen) border-box;
	border: 1px solid transparent;
	box-shadow: 0 12px 30px rgba(30, 138, 90, 0.14), var(--sk-shadow-inset);
	cursor: pointer;
	transition: transform var(--sk-dur-fast) var(--sk-ease-spring), color var(--sk-dur-fast) var(--sk-ease), box-shadow var(--sk-dur-fast) var(--sk-ease), opacity var(--sk-dur-fast) var(--sk-ease);
}
.sk-prodslider__arrow:hover {
	color: var(--sk-brass-high);
	transform: translateY(-2px) scale(1.04);
	box-shadow: 0 18px 36px rgba(30, 138, 90, 0.22), var(--sk-glow);
}
.sk-prodslider__arrow:disabled {
	opacity: 0.42;
	cursor: default;
	transform: none;
	box-shadow: var(--sk-shadow-inset);
}

/* ======================================================================== *
 * Cards (products / posts) — with lathe-hover
 * ======================================================================== */
/* Cards sit on a perspective stage so JS pointer-tilt reads as real depth. */
.sk-grid--cards, .sk-grid--3 { perspective: 1400px; }
.sk-card {
	position: relative; display: flex; flex-direction: column;
	background: var(--sk-panel); border: 1px solid var(--sk-hairline);
	border-radius: var(--sk-radius); overflow: hidden;
	color: var(--sk-text);
	transform-style: preserve-3d;
	transition: transform var(--sk-dur) var(--sk-ease), box-shadow var(--sk-dur) var(--sk-ease), border-color var(--sk-dur) var(--sk-ease);
}
.sk-card:hover {
	transform: translateY(-6px);
	border-color: var(--sk-brass-core);
	box-shadow: var(--sk-shadow-3d), var(--sk-glow);
}
/* JS pointer-driven 3D tilt (overrides the flat hover lift while active). */
.sk-card.is-tilting {
	transition: box-shadow var(--sk-dur-fast) var(--sk-ease), border-color var(--sk-dur-fast) var(--sk-ease);
	transform: rotateX(var(--sk-rx, 0deg)) rotateY(var(--sk-ry, 0deg)) translateY(-6px) scale(1.03);
	border-color: var(--sk-brass-mid);
	box-shadow: var(--sk-shadow-3d), var(--sk-glow);
}
.sk-card.is-tilting .sk-card__body,
.sk-card.is-tilting .sk-card__media { transform: translateZ(40px); }
.sk-card__media {
	position: relative; display: block;
	aspect-ratio: 4 / 3; overflow: hidden; background: var(--sk-panel-2);
	transition: transform var(--sk-dur) var(--sk-ease);
}
.sk-card__img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform 900ms var(--sk-ease), filter 900ms var(--sk-ease);
	transform: scale(1.02) rotate(0deg);
}
/* The controlled "turning" reveal: a slow precise rotation + subtle zoom. */
.sk-card:hover .sk-card__img { transform: scale(1.1) rotate(2.5deg); filter: brightness(1.06); }
.sk-card__placeholder-ring {
	width: 96px; height: 96px; border-radius: 50%;
	border: 2px dashed var(--sk-brass-core); opacity: 0.5;
	transition: transform 1.4s linear;
}
.sk-card:hover .sk-card__placeholder-ring { transform: rotate(180deg); }
.sk-card__sheen {
	position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(115deg, transparent 35%, rgba(150,235,195,0.24) 50%, transparent 65%);
	transform: translateX(-120%); transition: transform 900ms var(--sk-ease);
}
.sk-card:hover .sk-card__sheen { transform: translateX(120%); }
.sk-card__body { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; transition: transform var(--sk-dur) var(--sk-ease); }
.sk-card__eyebrow { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sk-brass-mid); }
.sk-card__title { font-family: var(--sk-font-serif); font-size: var(--sk-step-1); line-height: 1.2; }
.sk-card__title a { color: inherit; }
.sk-card__excerpt { color: var(--sk-muted); font-size: var(--sk-step--1); }
.sk-card__cue { margin-top: auto; color: var(--sk-brass-mid); font-size: var(--sk-step--1); letter-spacing: 0.06em; }
.sk-card--post:hover { transform: translateY(-6px); }

/* ======================================================================== *
 * Extrusion divider
 * ======================================================================== */
.sk-extrusion-divider {
	height: 2px; max-width: var(--sk-maxw); margin: 0 auto;
	padding-inline: var(--sk-gutter); position: relative;
}
.sk-extrusion-divider span {
	display: block; height: 2px; width: 0;
	background: var(--sk-sheen);
	box-shadow: 0 0 12px rgba(67,201,138,0.5);
	transition: width 1100ms var(--sk-ease);
}
.sk-extrusion-divider.is-visible span { width: 100%; }

/* ======================================================================== *
 * Timeline
 * ======================================================================== */
.sk-timeline__list { position: relative; list-style: none; margin: 0; padding: 0; max-width: 860px; margin-inline: auto; }
.sk-timeline__track {
	position: absolute; left: 50%; top: 0; bottom: 0; width: 2px;
	transform: translateX(-50%); background: var(--sk-hairline);
}
.sk-timeline__fill { display: block; width: 100%; height: 0; background: var(--sk-sheen); box-shadow: 0 0 12px rgba(67,201,138,0.5); }
.sk-timeline__item {
	position: relative; width: 50%; padding: 1.4rem 2.4rem; box-sizing: border-box;
}
.sk-timeline__item:nth-child(odd) { left: 0; text-align: right; }
.sk-timeline__item:nth-child(even) { left: 50%; text-align: left; }
.sk-timeline__year { font-family: var(--sk-font-serif); font-size: var(--sk-step-2); display: block; margin-bottom: 0.3rem; }
.sk-timeline__text { color: var(--sk-muted); font-size: var(--sk-step--1); margin: 0; }
.sk-timeline__dot {
	position: absolute; top: 1.9rem; width: 14px; height: 14px; border-radius: 50%;
	background: var(--sk-brass-mid); box-shadow: 0 0 0 4px var(--sk-bg), 0 0 14px rgba(67,201,138,0.6);
	animation: sk-pulse-dot 2.6s var(--sk-ease) infinite;
}
.sk-timeline__item:nth-child(odd) .sk-timeline__dot { right: -7px; }
.sk-timeline__item:nth-child(even) .sk-timeline__dot { left: -7px; }

/* ======================================================================== *
 * Marquee (global presence)
 * ======================================================================== */
.sk-presence__head { text-align: center; margin-bottom: var(--sk-space-5); }
.sk-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.sk-marquee__track {
	display: inline-flex; align-items: center; gap: 1.4rem;
	white-space: nowrap; animation: sk-marquee 38s linear infinite; will-change: transform;
}
.sk-marquee:hover .sk-marquee__track { animation-play-state: paused; }
.sk-marquee__item { font-family: var(--sk-font-serif); font-size: clamp(1.6rem, 1rem + 2vw, 2.6rem); color: var(--sk-text); }
.sk-marquee__sep { color: var(--sk-brass-core); }

/* ======================================================================== *
 * Quality pillars
 * ======================================================================== */
.sk-pillar {
	background: var(--sk-panel); border: 1px solid var(--sk-hairline);
	border-radius: var(--sk-radius); padding: 2rem 1.8rem;
	transition: transform var(--sk-dur) var(--sk-ease-spring), box-shadow var(--sk-dur) var(--sk-ease), border-color var(--sk-dur) var(--sk-ease);
	will-change: transform;
}
.sk-pillar:hover {
	transform: perspective(900px) translateY(-6px) rotateX(6deg);
	border-color: var(--sk-brass-core);
	box-shadow: var(--sk-shadow-3d), var(--sk-glow);
}
.sk-pillar__rule { display: block; width: 48px; height: 2px; background: var(--sk-sheen); margin-bottom: 1.4rem; }
.sk-pillar__title { font-size: var(--sk-step-1); }
.sk-pillar__text { color: var(--sk-muted); margin: 0; }

/* ======================================================================== *
 * CTA
 * ======================================================================== */
.sk-cta { background: var(--sk-panel); border-block: 1px solid var(--sk-hairline); }
.sk-cta__inner {
	display: flex; align-items: center; justify-content: space-between;
	gap: clamp(1.5rem, 4vw, 3rem); flex-wrap: wrap; position: relative;
}
.sk-cta__copy { max-width: 40ch; }
.sk-cta__copy p { color: var(--sk-muted); margin: 0; }

/* ======================================================================== *
 * Filter bar / chips
 * ======================================================================== */
.sk-filterbar { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: var(--sk-space-5); }
.sk-chip {
	display: inline-flex; align-items: center; min-height: 40px;
	padding: 0.4rem 1.1rem; border-radius: 999px; cursor: pointer;
	background: var(--sk-panel); border: 1px solid var(--sk-hairline);
	color: var(--sk-text); font-size: var(--sk-step--1); font-family: var(--sk-font-sans);
	transition: all var(--sk-dur-fast) var(--sk-ease);
}
.sk-chip:hover { border-color: var(--sk-brass-core); color: var(--sk-brass-high); }
.sk-chip.is-active { background: var(--sk-sheen); color: var(--sk-text-on-brass); border-color: transparent; font-weight: 600; }

/* ======================================================================== *
 * Product single
 * ======================================================================== */
.sk-product__back {
	display: inline-flex; align-items: center; gap: 0.5rem;
	margin-bottom: clamp(1rem, 2.5vw, 1.8rem);
	font-size: var(--sk-step--1); letter-spacing: 0.04em;
	color: var(--sk-muted);
	transition: color var(--sk-dur-fast) var(--sk-ease), gap var(--sk-dur-fast) var(--sk-ease);
}
.sk-product__back:hover { color: var(--sk-brass-mid); gap: 0.75rem; }
.sk-product__back-arrow { transition: transform var(--sk-dur-fast) var(--sk-ease); }
.sk-product__back:hover .sk-product__back-arrow { transform: translateX(-3px); }
.sk-product__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1fr 1fr; align-items: start; }
.sk-product__title { font-size: var(--sk-step-3); }
.sk-product__lede { font-size: var(--sk-step-1); color: var(--sk-muted); }
.sk-product__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.8rem; }

.sk-spec-table { width: 100%; border-collapse: collapse; margin-top: 1.6rem; }
.sk-spec-table th, .sk-spec-table td { text-align: left; padding: 0.85rem 0; border-bottom: 1px solid var(--sk-hairline); vertical-align: top; }
.sk-spec-table th { width: 38%; color: var(--sk-brass-mid); font-weight: 600; font-family: var(--sk-font-sans); font-size: var(--sk-step--1); text-transform: uppercase; letter-spacing: 0.08em; }
.sk-spec-table td { color: var(--sk-text); }

/* ======================================================================== *
 * Investor doclist
 * ======================================================================== */
.sk-investor__year { margin-bottom: var(--sk-space-6); }
.sk-investor__year-head { font-size: var(--sk-step-2); margin-bottom: 1.2rem; }
.sk-doclist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.sk-doclist__item {
	display: flex; align-items: center; gap: 1.2rem;
	padding: 1.1rem 1.3rem; background: var(--sk-panel);
	border: 1px solid var(--sk-hairline); border-radius: var(--sk-radius-sm);
	transition: border-color var(--sk-dur-fast) var(--sk-ease), transform var(--sk-dur-fast) var(--sk-ease);
}
.sk-doclist__item:hover { border-color: var(--sk-brass-core); transform: translateX(4px); }
.sk-doclist__item.is-hidden { display: none; }
.sk-doclist__icon {
	flex-shrink: 0; display: grid; place-items: center;
	width: 44px; height: 44px; border-radius: 8px;
	background: rgba(67,201,138,0.14); color: var(--sk-brass-mid);
	font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em;
}
.sk-doclist__meta { display: flex; flex-direction: column; gap: 0.15rem; margin-right: auto; }
.sk-doclist__title { font-weight: 600; }
.sk-doclist__type { font-size: var(--sk-step--1); color: var(--sk-muted); }
.sk-doclist__btn {
	flex-shrink: 0; padding: 0.55rem 1.2rem; border-radius: 999px;
	border: 1px solid var(--sk-brass-core); color: var(--sk-brass-high);
	font-size: var(--sk-step--1); text-transform: uppercase; letter-spacing: 0.06em;
}
.sk-doclist__btn:hover { background: var(--sk-brass-mid); color: var(--sk-text-on-brass); }
.sk-doclist__btn.is-disabled { opacity: 0.5; pointer-events: none; }
.sk-doclist__btn--danger { border-color: rgba(180,40,40,0.55); color: #b42828; }
.sk-doclist__btn--danger:hover { background: #b42828; color: #fff; }
.sk-investor__note { margin-top: var(--sk-space-5); }

/* ---- Front-end investor admin panel ---------------------------------- */
.sk-invadmin__bar { display: flex; justify-content: flex-end; padding-top: 1.4rem; }
.sk-invadmin { padding-top: clamp(1.6rem, 3vw, 2.6rem); }
.sk-invadmin__head { margin-bottom: var(--sk-space-5); }
.sk-invadmin__title { font-size: var(--sk-step-3); margin: 0.3rem 0 0.6rem; }
.sk-invadmin__form {
	display: grid; gap: 1.1rem; max-width: 560px;
	padding: 1.6rem; margin-bottom: var(--sk-space-6);
	background: var(--sk-panel); border: 1px solid var(--sk-hairline);
	border-radius: var(--sk-radius-sm);
}
.sk-field { display: flex; flex-direction: column; gap: 0.4rem; }
.sk-field label { font-weight: 600; font-size: var(--sk-step--1); }
.sk-field select,
.sk-field input[type="text"],
.sk-field input[type="file"] {
	width: 100%; padding: 0.7rem 0.9rem;
	background: var(--sk-bg); color: var(--sk-text);
	border: 1px solid var(--sk-hairline); border-radius: var(--sk-radius-sm);
	font: inherit;
}
.sk-field input[type="file"] { padding: 0.55rem 0.6rem; }
.sk-field select:focus,
.sk-field input:focus { outline: 2px solid var(--sk-brass-core); outline-offset: 1px; border-color: transparent; }
.sk-invadmin__form .sk-btn { justify-self: start; }
.sk-invadmin__group { margin-bottom: var(--sk-space-5); }
.sk-invadmin__group-head { font-size: var(--sk-step-1); margin-bottom: 0.9rem; }
.sk-invadmin__back { margin-top: var(--sk-space-5); }

.sk-adminnote {
	padding: 0.85rem 1.1rem; margin-bottom: 1.4rem;
	border-radius: var(--sk-radius-sm); border: 1px solid transparent;
	font-size: var(--sk-step--1);
}
.sk-adminnote--success { background: rgba(67,201,138,0.12); border-color: var(--sk-brass-core); color: #156b45; }
.sk-adminnote--error { background: rgba(180,40,40,0.10); border-color: rgba(180,40,40,0.45); color: #b42828; }

/* Certificate manager rows: thumbnail + inline (collapsible) edit form */
.sk-certadmin__item { flex-wrap: wrap; }
.sk-certadmin__thumb { flex-shrink: 0; width: 44px; height: 44px; display: grid; place-items: center; }
.sk-certadmin__thumb img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; border: 1px solid var(--sk-hairline); }
.sk-certadmin__edit { width: 100%; }
.sk-certadmin__edit > summary { display: inline-flex; cursor: pointer; list-style: none; margin-top: 0.2rem; }
.sk-certadmin__edit > summary::-webkit-details-marker { display: none; }
.sk-certadmin__edit[open] > summary { background: var(--sk-brass-mid); color: var(--sk-text-on-brass); }
.sk-certadmin__edit .sk-invadmin__form { margin-top: 1rem; margin-bottom: 0.4rem; max-width: none; }

/* ======================================================================== *
 * Certificates grid
 * ======================================================================== */
.sk-cert { margin: 0; }
.sk-cert__link { display: block; color: var(--sk-text); }
.sk-cert__thumb {
	position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden;
	border-radius: var(--sk-radius-sm); background: var(--sk-panel-2);
	border: 1px solid var(--sk-hairline);
}
.sk-cert__img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--sk-dur) var(--sk-ease); }
.sk-cert:hover .sk-cert__img { transform: scale(1.05); }
.sk-cert__placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: var(--sk-muted); text-transform: uppercase; letter-spacing: 0.15em; font-size: var(--sk-step--1); }
.sk-cert__view {
	position: absolute; inset: 0; display: grid; place-items: center;
	background: rgba(14,15,16,0.6); color: var(--sk-brass-high);
	text-transform: uppercase; letter-spacing: 0.2em; font-size: var(--sk-step--1);
	opacity: 0; transition: opacity var(--sk-dur-fast) var(--sk-ease);
}
.sk-cert:hover .sk-cert__view { opacity: 1; }
.sk-cert__cap { padding-top: 0.8rem; display: flex; flex-direction: column; gap: 0.2rem; }
.sk-cert__title { font-family: var(--sk-font-serif); font-size: var(--sk-step-0); }
.sk-cert__body { font-size: var(--sk-step--1); color: var(--sk-muted); }

/* ======================================================================== *
 * Contact + forms
 * ======================================================================== */
.sk-contact__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1.1fr 0.9fr; align-items: start; }
.sk-form__row { display: grid; gap: 1.2rem; grid-template-columns: 1fr 1fr; }
.sk-field { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 1.2rem; }
.sk-field label { font-size: var(--sk-step--1); letter-spacing: 0.04em; color: var(--sk-text); }
.sk-req { color: var(--sk-brass-mid); }
.sk-field input, .sk-field textarea, .sk-searchform input {
	width: 100%; padding: 0.85rem 1rem; min-height: 48px;
	background: var(--sk-panel); color: var(--sk-text);
	border: 1px solid var(--sk-hairline); border-radius: var(--sk-radius-sm);
	font-family: var(--sk-font-sans); font-size: var(--sk-step-0);
	transition: border-color var(--sk-dur-fast) var(--sk-ease), box-shadow var(--sk-dur-fast) var(--sk-ease);
}
.sk-field textarea { resize: vertical; min-height: 140px; }
.sk-field input:focus, .sk-field textarea:focus { outline: none; border-color: var(--sk-brass-mid); box-shadow: 0 0 0 3px rgba(67,201,138,0.22); }
.sk-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sk-form__privacy { margin-top: 1rem; font-size: var(--sk-step--1); }

.sk-alert { padding: 1rem 1.2rem; border-radius: var(--sk-radius-sm); margin-bottom: 1.4rem; font-size: var(--sk-step-0); }
.sk-alert--success { background: rgba(46,160,100,0.12); border: 1px solid rgba(46,160,100,0.5); color: #1c6b45; }
.sk-alert--error { background: rgba(200,70,50,0.10); border: 1px solid rgba(200,70,50,0.5); color: #9a2c1a; }

.sk-contact__card, .sk-contact__map { background: var(--sk-panel); border: 1px solid var(--sk-hairline); border-radius: var(--sk-radius); padding: 1.8rem; margin-bottom: 1.4rem; }
.sk-contact__map { padding: 0; overflow: hidden; }
.sk-contact__address { font-style: normal; line-height: 1.7; margin-bottom: 1.2rem; }
.sk-contact__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.sk-contact__list li { display: flex; flex-direction: column; }
.sk-contact__list span { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--sk-brass-mid); }

/* ======================================================================== *
 * Misc: pagination, search results, empty states, footer, 404
 * ======================================================================== */
.sk-pagination { margin-top: var(--sk-space-5); display: flex; justify-content: center; }
.sk-pagination .page-numbers {
	display: inline-grid; place-items: center; min-width: 44px; min-height: 44px;
	padding: 0 0.5rem; margin: 0 0.2rem; border-radius: 8px;
	border: 1px solid var(--sk-hairline); color: var(--sk-text);
}
.sk-pagination .page-numbers.current { background: var(--sk-sheen); color: var(--sk-text-on-brass); border-color: transparent; }
.sk-pagination a.page-numbers:hover { border-color: var(--sk-brass-core); }

.sk-searchform { display: flex; gap: 0.6rem; margin-bottom: var(--sk-space-5); }
.sk-search-results { list-style: none; margin: 0; padding: 0; }
.sk-search-result { padding: 1.4rem 0; border-bottom: 1px solid var(--sk-hairline); }
.sk-search-result__type { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--sk-brass-mid); display: block; }
.sk-search-result__title { font-family: var(--sk-font-serif); font-size: var(--sk-step-1); }

.sk-empty { text-align: center; padding: var(--sk-space-6) 0; display: flex; flex-direction: column; gap: 1.2rem; align-items: center; color: var(--sk-muted); }

.sk-postnav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid var(--sk-hairline); }

.sk-404__inner { text-align: center; padding-block: clamp(3rem, 10vw, 7rem); }
.sk-404 .sk-hero__actions { justify-content: center; }
.sk-404__search { margin-top: 2.4rem; max-width: 460px; margin-inline: auto; }

/* Footer */
.sk-footer { background: var(--sk-panel); border-top: 1px solid var(--sk-hairline); margin-top: var(--sk-section); }
.sk-footer__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1.6fr 1fr 1.2fr; padding-block: clamp(3rem, 8vw, 5rem); }
.sk-footer__about { color: var(--sk-muted); max-width: 42ch; margin-top: 1rem; }
.sk-footer__badges { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.4rem; }
.sk-badge { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; padding: 0.4rem 0.8rem; border: 1px solid var(--sk-hairline); border-radius: 999px; color: var(--sk-brass-mid); }
.sk-footer__title { font-family: var(--sk-font-sans); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--sk-brass-mid); margin-bottom: 1.2rem; }
.sk-footer__menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.sk-footer__menu a { color: var(--sk-text); }
.sk-footer__menu a:hover { color: var(--sk-brass-high); }
.sk-footer__address { font-style: normal; color: var(--sk-muted); line-height: 1.7; margin-bottom: 1rem; }
.sk-footer__contact a { color: var(--sk-text); }
.sk-footer__legal { border-top: 1px solid var(--sk-hairline); }
.sk-footer__legal-inner { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-block: 1.4rem; font-size: var(--sk-step--1); color: var(--sk-muted); }

/* ======================================================================== *
 * Advanced page sections (About / Quality)
 * ======================================================================== */

/* Feature prose: section headings get a gold accent rule. */
.sk-prose--feature h2 {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.7rem;
	font-size: var(--sk-step-1);
	margin-top: 1.9rem;
}
.sk-prose--feature h2::before {
	content: "";
	flex: none;
	width: 30px; height: 2px;
	background: var(--sk-sheen);
	border-radius: 2px;
}
.sk-prose--feature > :first-child { margin-top: 0; }

/* About: story split (reuses .sk-about-teaser__grid) */
.sk-about-story__media { position: relative; }
.sk-about-story__badges {
	list-style: none; margin: 1.2rem 0 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center;
}

/* About: core values grid */
.sk-values {
	display: grid;
	gap: clamp(1rem, 2.5vw, 1.5rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	perspective: 1400px;
}
.sk-value {
	position: relative;
	display: block;
	background: var(--sk-panel);
	border: 1px solid var(--sk-hairline);
	border-radius: var(--sk-radius);
	padding: 1.9rem 1.6rem;
	overflow: hidden;
	color: var(--sk-text);          /* keep text colour when the card is a link */
	text-decoration: none;
	transform-style: preserve-3d;
	transition: transform var(--sk-dur) var(--sk-ease-spring), box-shadow var(--sk-dur) var(--sk-ease), border-color var(--sk-dur) var(--sk-ease);
	will-change: transform;
}
a.sk-value:hover .sk-value__title { color: var(--sk-brass-mid); }
.sk-value::before {
	content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
	background: var(--sk-sheen);
	transform: scaleX(0); transform-origin: left;
	transition: transform var(--sk-dur) var(--sk-ease);
}
.sk-value:hover {
	transform: translateY(-6px) rotateX(5deg);
	border-color: var(--sk-brass-core);
	box-shadow: var(--sk-shadow-3d), var(--sk-glow);
}
.sk-value:hover::before { transform: scaleX(1); }
.sk-value__icon {
	display: grid; place-items: center;
	width: 52px; height: 52px; border-radius: 14px;
	margin-bottom: 1.1rem;
	color: var(--sk-brass-mid);
	background: rgba(30, 138, 90, 0.12); /* fallback for no color-mix() */
	background: color-mix(in srgb, var(--sk-brass-core) 14%, transparent);
}
.sk-value__title { font-size: var(--sk-step-1); margin-bottom: 0.4rem; }
.sk-value__text { color: var(--sk-muted); margin: 0; font-size: var(--sk-step--1); }

/* Quality: certification banner */
.sk-certbar {
	position: relative; overflow: hidden;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: clamp(1.2rem, 3vw, 2.4rem);
	background: var(--sk-panel);
	border: 1px solid var(--sk-hairline);
	border-radius: var(--sk-radius);
	padding: clamp(1.4rem, 3vw, 2.2rem) clamp(1.6rem, 4vw, 2.6rem);
	box-shadow: var(--sk-shadow-soft);
}
.sk-certbar::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(60% 130% at 100% 0%, rgba(30, 138, 90, 0.14), transparent 60%); /* fallback */
	background: radial-gradient(60% 130% at 100% 0%, color-mix(in srgb, var(--sk-brass-core) 14%, transparent), transparent 60%);
}
.sk-certbar__badge {
	position: relative; z-index: 1;
	display: grid; place-items: center;
	width: clamp(64px, 8vw, 90px); height: clamp(64px, 8vw, 90px);
	border-radius: 50%;
	color: var(--sk-text-on-brass);
	background: var(--sk-sheen);
	box-shadow: var(--sk-glow);
}
.sk-certbar__body { position: relative; z-index: 1; }
.sk-certbar__meta { text-transform: uppercase; letter-spacing: 0.18em; font-size: var(--sk-step--1); color: var(--sk-brass-mid); margin: 0 0 0.3rem; }
.sk-certbar__title { font-size: var(--sk-step-2); margin: 0 0 0.4rem; }
.sk-certbar__text { color: var(--sk-muted); margin: 0; max-width: 52ch; }
.sk-certbar__seal {
	position: relative; z-index: 1; flex: none;
	font-family: var(--sk-font-serif); font-size: var(--sk-step-1); letter-spacing: 0.04em;
	color: var(--sk-brass-mid);
	border: 1px solid var(--sk-hairline); border-radius: 999px;
	padding: 0.55rem 1.2rem; white-space: nowrap;
}

/* Quality: manufacturing process */
.sk-process {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: clamp(1rem, 2.5vw, 1.5rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.sk-step {
	position: relative;
	background: var(--sk-panel);
	border: 1px solid var(--sk-hairline);
	border-radius: var(--sk-radius);
	padding: 1.6rem 1.5rem 1.7rem;
	transition: transform var(--sk-dur) var(--sk-ease-spring), box-shadow var(--sk-dur) var(--sk-ease), border-color var(--sk-dur) var(--sk-ease);
	will-change: transform;
}
.sk-step:hover { transform: translateY(-6px); border-color: var(--sk-brass-core); box-shadow: var(--sk-shadow-3d); }
.sk-step__num {
	display: block; font-family: var(--sk-font-serif); font-size: var(--sk-step-3); line-height: 1;
	margin-bottom: 0.5rem;
	color: var(--sk-brass-high); /* fallback: solid gold numeral */
}
@supports (-webkit-text-stroke: 1px black) {
	.sk-step__num { color: transparent; -webkit-text-stroke: 1px var(--sk-brass-core); }
}
.sk-step__icon { display: block; color: var(--sk-brass-mid); margin-bottom: 0.5rem; }
.sk-step__title { font-size: var(--sk-step-1); margin-bottom: 0.35rem; }
.sk-step__text { color: var(--sk-muted); font-size: var(--sk-step--1); margin: 0; }

/* Quality: material grades + inspection checklist */
.sk-inspect__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 0.95fr 1.05fr; align-items: start; }
.sk-alloys {
	display: grid; gap: 0.8rem; margin-top: 1.6rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
}
.sk-alloy {
	display: flex; flex-direction: column; gap: 0.15rem;
	padding: 1rem 1.2rem;
	background: var(--sk-panel);
	border: 1px solid var(--sk-hairline);
	border-left: 3px solid var(--sk-brass-core);
	border-radius: var(--sk-radius-sm);
	transition: transform var(--sk-dur-fast) var(--sk-ease), border-left-color var(--sk-dur-fast) var(--sk-ease);
}
.sk-alloy:hover { transform: translateX(4px); border-left-color: var(--sk-brass-mid); }
.sk-alloy__code { font-family: var(--sk-font-serif); font-size: var(--sk-step-1); color: var(--sk-text); line-height: 1.1; }
.sk-alloy__name { font-size: 0.72rem; color: var(--sk-muted); text-transform: uppercase; letter-spacing: 0.08em; }

.sk-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.sk-checklist__item { display: flex; gap: 0.9rem; align-items: flex-start; }
.sk-checklist__check {
	flex: none; display: grid; place-items: center;
	width: 28px; height: 28px; border-radius: 50%; margin-top: 0.1rem;
	color: var(--sk-brass-mid);
	background: rgba(30, 138, 90, 0.16); /* fallback for no color-mix() */
	background: color-mix(in srgb, var(--sk-brass-core) 16%, transparent);
}
.sk-checklist__item p { margin: 0; color: var(--sk-muted); font-size: var(--sk-step--1); }
.sk-checklist__item strong { display: block; color: var(--sk-text); font-size: var(--sk-step-0); margin-bottom: 0.1rem; }

/* Sections placed directly under a page hero — tighten the top gap. */
.sk-contact-methods-sec,
.sk-certs-highlights,
.sk-investor-highlights { padding-top: clamp(2.2rem, 4vw, 3.2rem); }

/* Contact: form presented as a raised panel */
.sk-contact__panel {
	background: var(--sk-panel);
	border: 1px solid var(--sk-hairline);
	border-radius: var(--sk-radius);
	padding: clamp(1.5rem, 4vw, 2.4rem);
	box-shadow: var(--sk-shadow-soft);
}
.sk-contact__panel .sk-h3 { margin-top: 0; }

/* ======================================================================== *
 * Homepage hero carousel
 * ======================================================================== */
.sk-herocar {
	--sk-herocar-offset: 110px;
	position: relative;
	overflow: hidden;
	background: #0a1424;
	isolation: isolate;
	/* The banner is always full-bleed wide: height tracks the image's own
	 * 1920:800 ratio (100/2.4 = 41.6667vw), so the image fills the full width
	 * edge-to-edge at every size and the height simply adjusts to match — no
	 * cropping, no letterbox bands. Capped to the viewport on big/short desktops.
	 * vw (not aspect-ratio) keeps it consistent on every browser. */
	height: 41.6667vw;
	max-height: clamp(360px, calc(100vh - var(--sk-herocar-offset)), 820px);
}
@supports (height: 100svh) {
	.sk-herocar { max-height: clamp(360px, calc(100svh - var(--sk-herocar-offset)), 820px); }
}
@supports (height: 100dvh) {
	.sk-herocar { max-height: clamp(360px, calc(100dvh - var(--sk-herocar-offset)), 820px); }
}
body.admin-bar .sk-herocar { --sk-herocar-offset: 142px; }
.sk-herocar__viewport { height: 100%; overflow: hidden; }
.sk-herocar__track {
	display: flex;
	height: 100%;
	transition: transform 700ms var(--sk-ease);
	will-change: transform;
}
.sk-herocar__slide {
	position: relative;
	flex: 0 0 100%;
	display: block;
	height: 100%;
	line-height: 0;
	overflow: hidden;
	background: #0a1424;
}
.sk-herocar__slide::before {
	content: "";
	position: absolute;
	inset: -2%;
	z-index: 0;
	background-image: var(--sk-slide-img);
	background-size: cover;
	background-position: center;
	filter: blur(28px) saturate(0.9) brightness(0.72);
	opacity: 0.55;
	transform: scale(1.08);
}
.sk-herocar__slide::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(90deg, rgba(5, 12, 20, 0.14), transparent 28%, transparent 72%, rgba(5, 12, 20, 0.14)),
		linear-gradient(180deg, rgba(5, 12, 20, 0.10), transparent 22%, rgba(5, 12, 20, 0.12));
}
.sk-herocar__slide img {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	display: block;
	aspect-ratio: auto;
	/* The carousel box is sized to the banner's own 2.4 ratio, so cover fills it
	 * full-bleed edge-to-edge while showing the whole banner (no real crop). */
	object-fit: cover;
	object-position: center;
}

.sk-herocar__arrow {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
	width: 48px; height: 48px; border-radius: 50%;
	display: grid; place-items: center; cursor: pointer;
	color: var(--sk-brass-mid);
	background: rgba(10, 20, 36, 0.5);
	border: 1px solid rgba(67, 201, 138, 0.5);
	-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
	transition: background var(--sk-dur-fast) var(--sk-ease), color var(--sk-dur-fast) var(--sk-ease), transform var(--sk-dur-fast) var(--sk-ease);
}
.sk-herocar__arrow:hover { background: rgba(10, 20, 36, 0.82); color: var(--sk-brass-high); transform: translateY(-50%) scale(1.06); }
.sk-herocar__arrow--prev { left: clamp(0.5rem, 2vw, 1.5rem); }
.sk-herocar__arrow--next { right: clamp(0.5rem, 2vw, 1.5rem); }

.sk-herocar__dots {
	position: absolute; left: 0; right: 0; bottom: clamp(0.6rem, 2vw, 1.4rem); z-index: 3;
	display: flex; gap: 0.6rem; justify-content: center;
}
.sk-herocar__dot {
	width: 11px; height: 11px; border-radius: 50%; padding: 0; cursor: pointer;
	background: rgba(255, 255, 255, 0.25);
	border: 1px solid rgba(67, 201, 138, 0.8);
	transition: background var(--sk-dur-fast) var(--sk-ease), transform var(--sk-dur-fast) var(--sk-ease);
}
.sk-herocar__dot.is-active { background: var(--sk-brass-mid); border-color: var(--sk-brass-mid); transform: scale(1.2); }

/* No-JS: hide controls and just show the first banner. */
html:not(.js) .sk-herocar__arrow,
html:not(.js) .sk-herocar__dots { display: none; }

@media (prefers-reduced-motion: reduce) { .sk-herocar__track { transition: none; } }
@media (max-width: 860px) {
	.sk-herocar__slide::after {
		background:
			linear-gradient(90deg, rgba(5, 12, 20, 0.04), transparent 46%, rgba(5, 12, 20, 0.20)),
			linear-gradient(180deg, rgba(5, 12, 20, 0.08), transparent 68%, rgba(5, 12, 20, 0.18));
	}
}
@media (max-width: 600px) {
	.sk-herocar__arrow { width: 38px; height: 38px; }
	.sk-herocar__arrow svg { width: 20px; height: 20px; }
	.sk-herocar__dots { bottom: 0.85rem; }
	.sk-herocar__dot { width: 9px; height: 9px; }
}

@media (max-width: 1180px) {
	.sk-header__bar {
		grid-template-columns: clamp(190px, 18vw, 235px) minmax(0, 1fr);
		column-gap: clamp(0.8rem, 1.6vw, 1.25rem);
	}
	.sk-brand__logo,
	.sk-brand .custom-logo-link,
	.sk-brand__logo img,
	.sk-header .custom-logo {
		max-width: 205px;
		max-height: 82px;
	}
	.sk-topbar__inner { gap: clamp(0.75rem, 2vw, 1.25rem); }
	.sk-menu { gap: clamp(0.25rem, 0.65vw, 0.55rem); }
	.sk-menu a {
		font-size: 0.78rem;
		padding-inline: 0.5rem;
	}
}

@media (max-width: 860px) {
	.sk-inspect__grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.sk-certbar { grid-template-columns: 1fr; text-align: center; justify-items: center; }
	.sk-certbar__text { margin-inline: auto; }
}

/* ======================================================================== *
 * Responsive
 * ======================================================================== */
@media (max-width: 1024px) {
	.sk-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
	/* Header reflows: info bar full-width on top, logo + hamburger below. */
	.sk-header__bar {
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-rows: auto auto;
		grid-template-areas:
			"info  info"
			"brand nav";
		column-gap: 1rem;
		min-height: 0;
	}
	.sk-brand {
		border-right: 0;
		padding-inline: 0;
		margin-left: 0;
		justify-content: flex-start;
		min-height: 64px;
	}
	.sk-brand__logo,
	.sk-brand .custom-logo-link,
	.sk-brand__logo img,
	.sk-header .custom-logo {
		max-width: 220px;
		max-height: 68px;
	}
	.sk-topbar__inner {
		display: flex;
		justify-content: center;
		min-height: 38px;
		flex-wrap: wrap;
	}
	.sk-nav { min-height: 64px; justify-content: flex-end; }

	/* The header's backdrop-filter blur creates a containing block that would
	 * trap the fixed drawer inside the header's height — drop it on mobile so the
	 * drawer fills the viewport. Use a solid background since the blur is gone. */
	.sk-header { background: var(--sk-bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
	/* While the drawer is open, lift the header (which contains the drawer) above
	 * the backdrop so menu links receive taps instead of the backdrop closing it. */
	body.sk-nav-open .sk-header { z-index: 200; }

	/* Mobile nav drawer */
	.sk-nav__toggle { display: flex; }
	.sk-nav__menu {
		position: fixed; inset: 0 0 0 auto; z-index: 200;
		width: min(86vw, 360px); flex-direction: column; align-items: stretch;
		justify-content: flex-start; gap: 0;
		padding: calc(env(safe-area-inset-top) + 5rem) 1.6rem 2rem;
		background: var(--sk-panel); border-left: 1px solid var(--sk-hairline);
		box-shadow: var(--sk-shadow-soft);
		transform: translateX(100%); visibility: hidden;
		transition: transform var(--sk-dur) var(--sk-ease), visibility var(--sk-dur);
		overflow-y: auto;
	}
	.sk-nav__menu.is-open { transform: translateX(0); visibility: visible; }
	.sk-menu { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
	.sk-menu li { border-bottom: 1px solid var(--sk-hairline); }
	.sk-menu a { display: block; min-height: 0; padding: 1rem 0; font-size: var(--sk-step-0); line-height: 1.35; overflow: visible; border-radius: 0; }
	.sk-menu a::after { display: none; }
	.sk-menu .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; background: transparent; padding-left: 1rem; }
	.sk-nav__cta { margin-top: 1.4rem; }

	.sk-about-teaser__grid,
	.sk-product__grid,
	.sk-contact__grid { grid-template-columns: 1fr; }
	.sk-about-teaser__media { order: -1; }

	.sk-stats__grid { grid-template-columns: 1fr; gap: 2.2rem; }

	/* Timeline collapses to a single left rail on mobile */
	.sk-timeline__track { left: 7px; }
	.sk-timeline__item,
	.sk-timeline__item:nth-child(odd),
	.sk-timeline__item:nth-child(even) { width: 100%; left: 0; text-align: left; padding-left: 2.4rem; padding-right: 0; }
	.sk-timeline__item:nth-child(odd) .sk-timeline__dot,
	.sk-timeline__item:nth-child(even) .sk-timeline__dot { left: 1px; right: auto; }

	.sk-form__row { grid-template-columns: 1fr; }
	.sk-footer__grid { grid-template-columns: 1fr; }
	.sk-trust__item:not(:last-child)::after { display: none; }
	.sk-topbar__item--muted { display: none; }
}
@media (max-width: 480px) {
	.sk-products__head {
		align-items: start;
		flex-direction: column;
	}
	.sk-prodslider__arrows { align-self: stretch; justify-content: flex-end; }
	.sk-prodslider__track > .sk-card { flex-basis: min(82vw, 310px); }
	.sk-hero__actions .sk-btn,
	.sk-product__actions .sk-btn { width: 100%; }
}

/* Body scroll-lock helper toggled by JS when the mobile drawer is open */
body.sk-nav-open { overflow: hidden; }

/* Backdrop behind the mobile drawer */
.sk-nav-backdrop {
	position: fixed; inset: 0; z-index: 150;
	background: rgba(0,0,0,0.5); opacity: 0; visibility: hidden;
	transition: opacity var(--sk-dur) var(--sk-ease), visibility var(--sk-dur);
}
.sk-nav-backdrop.is-open { opacity: 1; visibility: visible; }

/* ======================================================================== *
 * Homepage: compact vertical rhythm (scoped to the front page only)
 * Overriding the spacing tokens on body.home cascades to every section,
 * section head, divider and the footer gap without touching inner pages.
 * ======================================================================== */
body.home {
	--sk-section: clamp(2.25rem, 5vw, 4.5rem); /* was clamp(4rem, 10vw, 9rem) */
	--sk-space-5: 1.75rem;                     /* section-head gap (was 3rem) */
}
body.home .sk-hero__inner { padding-block: clamp(3.5rem, 9vh, 6.5rem); } /* was clamp(6rem, 16vh, 11rem) */
body.home .sk-trust__list { padding-block: 1rem; }                       /* was 1.4rem */
body.home .sk-footer { margin-top: 0; }                                  /* CTA already provides the gap */