/* =========================================================
   Great India Powder Coating - main stylesheet
   Palette lifted straight from the company logo: deep indigo,
   signal red and spray-gun gold, on a light, airy background.

   1. Tokens          7. Products
   2. Base            8. Forms
   3. Animation lib    9. Footer / floating bar
   4. Layout          10. Blog
   5. Buttons         11. Responsive
   6. Header/Banner   12. Motion & print safety
   ========================================================= */

/* 1. Tokens ---------------------------------------------- */
:root {
	--navy: #1b0c73;
	--navy-2: #241090;
	--navy-3: #5b21e0;
	--violet: #7b2ff7;
	--violet-2: #a855f7;
	--navy-tint: #eef0fb;
	--red: #f0262a;
	--red-d: #c8080c;
	--red-tint: #fdecec;
	--orange: #ff7a1a;
	--gold: #ffb400;
	--gold-d: #e0a400;
	--gold-tint: #fff6e0;
	--sky: #0297f5;
	--sky-tint: #e7f4ff;
	--pink: #ff2d78;
	--green: #17a566;
	--flx-yellow: #facc15;

	--grad-brand: linear-gradient(120deg, var(--violet) 0%, var(--red) 55%, var(--orange) 100%);
	--grad-hot: linear-gradient(120deg, var(--red) 0%, var(--orange) 55%, var(--gold) 100%);
	--grad-royal: linear-gradient(120deg, var(--navy) 0%, var(--navy-3) 45%, var(--violet-2) 75%, var(--red) 130%);
	--grad-text: linear-gradient(120deg, var(--red) 0%, var(--orange) 50%, var(--gold) 100%);

	--ink: #171933;
	--body: #57607a;
	--steel: #6b7488;
	--line: #e6e8f4;
	--bg: #ffffff;
	--bg-soft: #f7f8fd;
	--bg-soft-2: #f1f3fb;
	--white: #fff;

	--head-stack: 72px;
	--wrap: 1180px;
	--radius: 12px;
	--radius-lg: 20px;
	--shadow: 0 4px 14px rgba(27, 12, 115, .07);
	--shadow-md: 0 14px 34px rgba(27, 12, 115, .12);
	--shadow-lg: 0 24px 60px rgba(27, 12, 115, .18);
	--shadow-gold: 0 10px 26px rgba(255, 180, 0, .35);
	--shadow-red: 0 10px 26px rgba(240, 38, 42, .32);
	--shadow-violet: 0 10px 28px rgba(123, 47, 247, .3);
	--head: "Barlow Condensed", "Arial Narrow", sans-serif;
	--font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--t: .25s cubic-bezier(.4, 0, .2, 1);
	--t-slow: .6s cubic-bezier(.16, 1, .3, 1);
}

/* 2. Base ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--font);
	font-size: 14.5px;
	line-height: 1.62;
	color: var(--body);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
	/* Header is fixed, so the page needs to start below it. */
	padding-top: var(--head-stack);
}

h1, h2, h3, h4, h5 {
	font-family: var(--head);
	color: var(--ink);
	line-height: 1.12;
	margin: 0 0 .45em;
	font-weight: 700;
	letter-spacing: .2px;
}

h1 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); }
h2 { font-size: clamp(1.4rem, 2.5vw, 1.95rem); }
h3 { font-size: clamp(1.02rem, 1.5vw, 1.16rem); }

p { margin: 0 0 .9em; }
a { color: var(--navy-3); text-decoration: none; transition: color var(--t), background var(--t), transform var(--t); }
a:hover { color: var(--red); }
img { max-width: 100%; height: auto; display: block; }
ul, ol { padding-left: 1.15em; }
table { border-collapse: collapse; width: 100%; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
::selection { background: var(--gold); color: var(--navy); }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 999;
	background: var(--red); color: #fff; padding: 10px 18px;
}
.skip-link:focus { left: 8px; top: 8px; color: #fff; }

/* 3. Animation library ------------------------------------ */
@keyframes fadeUp { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeDown { from { opacity: 0; transform: translateY(-24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeLeft { from { opacity: 0; transform: translateX(-38px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fadeRight { from { opacity: 0; transform: translateX(38px); } to { opacity: 1; transform: translateX(0); } }
@keyframes zoomIn { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes floatX { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(14px); } }
@keyframes spin360 { to { transform: rotate(360deg); } }
@keyframes pulseRing { 0% { box-shadow: 0 0 0 0 rgba(224, 4, 6, .45); } 70% { box-shadow: 0 0 0 16px rgba(224, 4, 6, 0); } 100% { box-shadow: 0 0 0 0 rgba(224, 4, 6, 0); } }
@keyframes shimmer { 0% { background-position: -300px 0; } 100% { background-position: 300px 0; } }
@keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes kenburns { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.14) translate(-1%, -1%); } }
@keyframes drift { 0% { transform: translate(0, 0); } 33% { transform: translate(18px, -22px); } 66% { transform: translate(-14px, 14px); } 100% { transform: translate(0, 0); } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes bounceDown { 0%, 100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(10px); opacity: 1; } }
@keyframes underline { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes popIn { 0% { opacity: 0; transform: scale(.6); } 70% { transform: scale(1.06); } 100% { opacity: 1; transform: scale(1); } }
@keyframes sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }

/* Scroll reveals are scoped to .js (set by an inline script in the head).
   Without that guard, a blocked or failed main.js would leave every
   revealed element - logo, product body, cards - stuck at opacity 0 and
   the page would look blank. No JS, no hiding. */
.js .reveal { opacity: 0; transform: translateY(34px); transition: opacity var(--t-slow), transform var(--t-slow); transition-delay: var(--d, 0ms); }
.js .reveal--left { transform: translateX(-42px); }
.js .reveal--right { transform: translateX(42px); }
.js .reveal--zoom { transform: scale(.88); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal--left.is-in { transform: none; }
.reveal--right.is-in { transform: none; }
.reveal--zoom.is-in { transform: scale(1); }

.js .reveal-group > * { opacity: 0; transform: translateY(30px); transition: opacity var(--t-slow), transform var(--t-slow); transition-delay: var(--d, 0ms); }
.reveal-group.is-in > * { opacity: 1; transform: none; }

.floaty { animation: floatY 5.5s ease-in-out infinite; }
.floaty--slow { animation: floatY 8s ease-in-out infinite; }
.floaty--x { animation: floatX 7s ease-in-out infinite; }

/* 4. Layout ---------------------------------------------- */
.wrap { width: min(100% - 32px, var(--wrap)); margin-inline: auto; }
.sec { padding: clamp(40px, 4.6vw, 64px) 0; position: relative; }
.sec--soft { background: var(--bg-soft); }
.sec--tint-gold { background: linear-gradient(180deg, var(--gold-tint), #fff 70%); }
.sec--tint-sky { background: linear-gradient(180deg, var(--sky-tint), #fff 70%); }

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font);
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--red);
	margin-bottom: .8rem;
}
.eyebrow::before {
	content: "";
	width: 26px; height: 2px; background: var(--gold); display: inline-block;
	border-radius: 2px;
}

.sec-head { max-width: 700px; margin: 0 auto clamp(22px, 2.6vw, 34px); }
.sec-head--center { text-align: center; }
.sec-head--center .eyebrow { justify-content: center; }
.sec-head--left { margin-left: 0; text-align: left; }
.sec-head__title { margin-bottom: .35em; }
.sec-head__text { margin: 0; font-size: 1.03rem; }

.grid { display: grid; gap: 16px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

/* decorative blurred blobs used behind sections for depth */
.blob-field { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.blob {
	position: absolute; border-radius: 50%; filter: blur(60px); opacity: .32;
	animation: drift 16s ease-in-out infinite;
}
.blob--navy { background: var(--navy-3); }
.blob--red { background: var(--red); }
.blob--gold { background: var(--gold); }
.blob--violet { background: var(--violet); }
.blob--pink { background: var(--pink); }
.blob--sky { background: var(--sky); }
.sec > .wrap, .sec > .blob-field + .wrap { position: relative; z-index: 1; }

/* 5. Buttons --------------------------------------------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 9px;
	font-family: var(--font); font-weight: 700; font-size: .85rem;
	padding: 10px 19px; border-radius: 7px; border: 2px solid transparent;
	cursor: pointer; transition: all var(--t); text-align: center;
	line-height: 1.2; position: relative; overflow: hidden; isolation: isolate;
}
.btn::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .35), transparent);
	transform: translateX(-120%) skewX(-18deg); transition: transform .6s ease;
}
.btn:hover::before { transform: translateX(120%) skewX(-18deg); }

.btn--primary { background: var(--grad-hot); background-size: 220% 100%; background-position: 0% 50%; color: #fff; box-shadow: var(--shadow-red); transition: background-position var(--t-slow), transform var(--t), box-shadow var(--t); }
.btn--primary:hover { background-position: 100% 50%; color: #fff; transform: translateY(-3px); box-shadow: 0 16px 34px rgba(240, 38, 42, .38); }
.btn--gold { background: linear-gradient(120deg, var(--gold), var(--orange)); color: var(--navy); box-shadow: var(--shadow-gold); }
.btn--gold:hover { background: linear-gradient(120deg, var(--gold-d), var(--red)); color: #fff; transform: translateY(-3px); }
.btn--ghost { border-color: rgba(27, 12, 115, .28); color: var(--navy); background: rgba(255, 255, 255, .68); backdrop-filter: blur(6px); }
.btn--ghost:hover { background: var(--grad-royal); color: #fff; border-color: transparent; transform: translateY(-3px); }
.btn--dark { background: linear-gradient(120deg, var(--navy), var(--navy-3)); color: #fff; }
.btn--dark:hover { background: var(--grad-royal); color: #fff; transform: translateY(-3px); }
.btn--line { border-color: var(--navy); color: var(--navy); background: #fff; }
.btn--line:hover { background: var(--grad-royal); color: #fff; border-color: transparent; transform: translateY(-3px); }
.btn--wa { background: linear-gradient(120deg, #25d366, #1eb457); color: #fff; }
.btn--wa:hover { background: linear-gradient(120deg, #1eb457, #17974a); color: #fff; transform: translateY(-3px); }
.btn--block { width: 100%; justify-content: center; }
.btn--lg { padding: 13px 25px; font-size: .92rem; }
.btn:active { transform: translateY(0) scale(.98) !important; }
.btn--glow { animation: glowPulse 2.4s ease-in-out infinite; }
.btn--glow:hover { animation-play-state: paused; }
@keyframes glowPulse {
	0%, 100% { box-shadow: var(--shadow-red), 0 0 0 0 rgba(240, 38, 42, .35); }
	50% { box-shadow: var(--shadow-red), 0 0 0 12px rgba(240, 38, 42, 0); }
}

.text-grad {
	background: var(--grad-text); -webkit-background-clip: text; background-clip: text;
	color: transparent; -webkit-text-fill-color: transparent;
}

/* 6. Header + Banner --------------------------------------- */
.site-header {
	background: rgba(255, 255, 255, .94);
	backdrop-filter: saturate(160%) blur(12px);
	box-shadow: var(--shadow);
	position: fixed; top: 0; left: 0; right: 0; z-index: 200;
	height: var(--head-stack);
	transition: box-shadow var(--t);
}
.site-header::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
	background: linear-gradient(90deg, var(--red), var(--gold), var(--orange), var(--red));
	background-size: 300% 100%; animation: gradientShift 9s linear infinite;
}
.site-header.is-stuck { box-shadow: var(--shadow-md); }
.header__in { display: flex; align-items: center; justify-content: space-between; gap: 18px; height: var(--head-stack); }

.brand-slot { display: flex; align-items: center; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand__mark {
	width: 48px; height: 48px; border-radius: 12px; flex: none;
	background: linear-gradient(140deg, var(--red), var(--gold));
	color: #fff; display: grid; place-items: center;
	font-family: var(--head); font-size: 1.4rem; font-weight: 700;
	box-shadow: var(--shadow-red);
}
.brand__text { display: flex; flex-direction: column; }
.brand__name {
	font-family: var(--head); font-size: 1.36rem; font-weight: 700;
	color: var(--navy); line-height: 1.05; letter-spacing: .3px;
}
.brand__tag { font-size: .7rem; color: var(--steel); letter-spacing: .06em; text-transform: uppercase; }
.brand img, .custom-logo { max-height: 58px; width: auto; transition: transform var(--t); }
.brand:hover img, .brand:hover .custom-logo { transform: scale(1.04); }

.nav__list { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav__list li { position: relative; }
.nav__list a {
	display: block; padding: 10px 15px; font-weight: 600; font-size: .93rem;
	color: var(--navy); border-radius: 7px; position: relative;
}
.nav__list a::after {
	content: ""; position: absolute; left: 15px; right: 15px; bottom: 5px; height: 2px;
	background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform var(--t);
}
.nav__list a:hover::after,
.nav__list .current-menu-item > a::after,
.nav__list .current_page_item > a::after { transform: scaleX(1); }
.nav__list a:hover,
.nav__list .current-menu-item > a,
.nav__list .current_page_item > a { color: var(--red); }

.nav__list .sub-menu {
	position: absolute; left: 0; top: 100%; min-width: 240px;
	background: #fff; border: 1px solid var(--line); border-radius: 10px;
	box-shadow: var(--shadow-md); padding: 8px; list-style: none; margin: 0;
	opacity: 0; visibility: hidden; transform: translateY(10px);
	transition: all var(--t); z-index: 70;
}
.nav__list li:hover > .sub-menu,
.nav__list li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__list .sub-menu a { font-size: .88rem; padding: 9px 12px; }
.nav__list .sub-menu a::after { display: none; }

.header__cta { display: flex; align-items: center; gap: 10px; }
.header__phone {
	display: flex; align-items: center; gap: 10px;
	font-weight: 700; color: var(--navy); font-size: 1.02rem;
}
.header__phone .ico { color: var(--red); animation: pulseRing 2.4s infinite; border-radius: 50%; }
.header__phone small { display: block; font-size: .68rem; font-weight: 500; color: var(--steel); text-transform: uppercase; letter-spacing: .08em; }

.burger {
	display: none; background: var(--navy); color: #fff; border: 0;
	width: 46px; height: 46px; border-radius: 10px; cursor: pointer;
	place-items: center; transition: background var(--t);
}
.burger:hover { background: var(--red); }

.mobile-nav {
	position: fixed; inset: 0 0 0 auto; width: min(86vw, 340px);
	background: #fff; z-index: 300; padding: 22px;
	transform: translateX(100%); transition: transform .35s cubic-bezier(.16, 1, .3, 1);
	overflow-y: auto; box-shadow: var(--shadow-lg);
}
.mobile-nav.is-open { transform: translateX(0); }
.mobile-nav__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav li { border-bottom: 1px solid var(--line); opacity: 0; transform: translateX(18px); transition: all .35s ease; }
.mobile-nav.is-open li { opacity: 1; transform: none; }
.mobile-nav.is-open li:nth-child(1) { transition-delay: .08s; }
.mobile-nav.is-open li:nth-child(2) { transition-delay: .13s; }
.mobile-nav.is-open li:nth-child(3) { transition-delay: .18s; }
.mobile-nav.is-open li:nth-child(4) { transition-delay: .23s; }
.mobile-nav.is-open li:nth-child(5) { transition-delay: .28s; }
.mobile-nav.is-open li:nth-child(6) { transition-delay: .33s; }
.mobile-nav a { display: block; padding: 13px 2px; font-weight: 600; color: var(--navy); }
.mobile-nav .sub-menu { padding-left: 14px; }
.mobile-nav__close { background: var(--bg-soft); border: 0; color: var(--navy); cursor: pointer; padding: 8px; border-radius: 8px; }
.mobile-nav__cta { margin-top: 20px; display: grid; gap: 10px; }
.backdrop {
	position: fixed; inset: 0; background: rgba(23, 25, 51, .5); backdrop-filter: blur(2px);
	z-index: 290; opacity: 0; visibility: hidden; transition: all var(--t);
}
.backdrop.is-open { opacity: 1; visibility: visible; }

/* --- Banner / hero slider (sits right below the header) --- */
.banner {
	position: relative;
	min-height: calc(100vh - var(--head-stack));
	min-height: calc(100svh - var(--head-stack));
	display: flex; align-items: center;
	overflow: hidden;
	background: linear-gradient(120deg, #fff5e9 0%, var(--sky-tint) 40%, #ffe4ea 70%, var(--gold-tint) 100%);
	background-size: 260% 260%;
	animation: gradientShift 14s ease infinite;
}
.banner__slides { position: absolute; inset: 0; }
.banner__slide {
	position: absolute; inset: 0; opacity: 0; transition: opacity 2.6s ease-in-out;
	background-size: cover; background-position: center; transform: scale(1);
}
.banner__slide.is-active { opacity: 1; animation: kenburns 14s ease-in-out infinite alternate; }
.banner__slide.is-active.no-motion { animation: none; }

/* When no banner photo is set the placeholder must still be dark, because
   the banner text is white either way - a light placeholder made the
   heading unreadable against the blue blobs. */
.banner__placeholder {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	background: linear-gradient(120deg, #0d0a1f 0%, #1b0c73 45%, #2a1160 75%, #3d1030 100%);
	background-size: 240% 240%; animation: gradientShift 18s ease infinite;
}
.banner__blob { position: absolute; border-radius: 50%; filter: blur(70px); animation: drift 18s ease-in-out infinite; }
.banner__blob--1 { width: 420px; height: 420px; background: var(--violet); opacity: .38; top: -8%; right: 8%; }
.banner__blob--2 { width: 340px; height: 340px; background: var(--red); opacity: .34; bottom: -6%; left: 6%; animation-duration: 22s; animation-delay: -4s; }
.banner__blob--3 { width: 260px; height: 260px; background: var(--gold); opacity: .3; top: 42%; left: 46%; animation-duration: 14s; animation-delay: -8s; }

.banner__mark {
	position: absolute; right: 4%; top: 50%; transform: translateY(-50%);
	width: min(46vw, 520px); opacity: .1; filter: grayscale(.2);
	animation: floatY 7s ease-in-out infinite;
}
.banner__mark img { width: 100%; }

.banner__particles { position: absolute; inset: 0; overflow: hidden; }
.banner__particles span {
	position: absolute; width: 8px; height: 8px; border-radius: 50%;
	background: var(--sky); opacity: .5; animation: floatY 6s ease-in-out infinite;
}
.banner__particles span:nth-child(2n) { background: var(--gold); width: 6px; height: 6px; }
.banner__particles span:nth-child(3n) { background: var(--red); width: 5px; height: 5px; }

.banner__overlay {
	position: absolute; inset: 0;
	background:
		linear-gradient(100deg, rgba(6, 5, 12, .74) 0%, rgba(6, 5, 12, .5) 42%, rgba(6, 5, 12, .12) 72%, transparent 100%),
		linear-gradient(180deg, transparent 55%, rgba(6, 5, 12, .5) 100%);
	opacity: 0; transition: opacity var(--t-slow);
}
.banner.has-image .banner__overlay { opacity: 1; }

.banner__content { position: relative; z-index: 3; padding: 24px 0; }
/* Text sits directly on the photo - no card, no box. */
.banner__panel { max-width: 620px; }
.banner__panel .eyebrow { color: var(--gold); text-shadow: 0 2px 12px rgba(0, 0, 0, .5); }
.banner__panel .eyebrow::before { background: var(--gold); }
.banner__title {
	color: #fff; margin-bottom: .3em;
	text-shadow: 0 3px 26px rgba(0, 0, 0, .6), 0 1px 3px rgba(0, 0, 0, .5);
}
.banner__title em { font-style: normal; color: var(--gold); }
.banner__text {
	font-size: clamp(.92rem, 1.1vw, 1.02rem); color: rgba(255, 255, 255, .9); max-width: 480px;
	text-shadow: 0 2px 16px rgba(0, 0, 0, .6);
}
.banner__btns { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 20px; }
.banner__badges { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 20px; font-size: .8rem; color: rgba(255, 255, 255, .88); font-weight: 600; text-shadow: 0 2px 12px rgba(0, 0, 0, .55); }
.banner__badges span { display: inline-flex; align-items: center; gap: 7px; }
.banner__badges .ico { color: var(--gold); }
/* The placeholder is dark too, so banner text stays white in both states -
   no separate light-background variant to fall out of sync. */

.banner__dots { position: absolute; left: 50%; bottom: 88px; transform: translateX(-50%); z-index: 4; display: flex; gap: 10px; }
.banner__dots button {
	width: 10px; height: 10px; border-radius: 50%; border: 2px solid rgba(27, 12, 115, .35);
	background: rgba(255, 255, 255, .6); cursor: pointer; padding: 0; transition: all var(--t);
}
.banner__dots button.is-active { background: var(--red); border-color: var(--red); width: 26px; border-radius: 6px; }

.banner__scroll {
	position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 4;
	display: flex; flex-direction: column; align-items: center; gap: 2px;
	color: rgba(255, 255, 255, .85); font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	text-shadow: 0 2px 10px rgba(0, 0, 0, .6);
}
.banner__scroll .ico { animation: bounceDown 1.8s ease-in-out infinite; }
.banner__scroll:hover { color: var(--gold); }

.stats {
	background: var(--grad-royal);
	background-size: 260% 260%;
	animation: gradientShift 12s ease infinite;
	color: #fff; position: relative; overflow: hidden;
}
.stats::before {
	content: ""; position: absolute; inset: 0;
	background-image: radial-gradient(circle at 15% 30%, rgba(255, 180, 0, .3), transparent 45%),
		radial-gradient(circle at 85% 70%, rgba(240, 38, 42, .3), transparent 45%);
}
.stats__in { display: grid; grid-template-columns: repeat(4, 1fr); position: relative; z-index: 1; }
.stat { padding: 18px 12px; text-align: center; border-right: 1px solid rgba(255, 255, 255, .16); }
.stat:last-child { border-right: 0; }
.stat__num { font-family: var(--head); font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 700; line-height: 1; color: var(--gold); }
.stat__label { font-size: .82rem; letter-spacing: .07em; text-transform: uppercase; opacity: .92; margin-top: 6px; }

.about { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(22px, 3vw, 40px); align-items: center; }
/* Height-capped but never cropped, so any photo the client swaps in later
   still shows in full instead of being cut to fit. */
.about__media img { width: 100%; max-height: 420px; object-fit: contain; }
.about__media .ph { aspect-ratio: 4 / 3; }
.about__media { position: relative; }
.about__media img, .about__media .ph { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); transition: transform var(--t-slow); }
.about__media:hover img { transform: scale(1.02) rotate(-.4deg); }
.about__badge {
	position: absolute; right: -14px; bottom: -18px;
	background: var(--navy); color: #fff; border-radius: var(--radius);
	padding: 16px 22px; box-shadow: var(--shadow-md); text-align: center;
	animation: floatY 5s ease-in-out infinite;
}
.about__badge strong { display: block; font-family: var(--head); font-size: 1.7rem; line-height: 1; color: var(--gold); }
.about__badge span { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: #cfc9f2; }

.ticks { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 13px; }
.ticks li { display: flex; gap: 11px; align-items: flex-start; }
.ticks .ico { color: var(--green); flex: none; margin-top: 4px; background: #e5f8ee; border-radius: 50%; padding: 3px; }

.feature {
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 16px;
	transition: all var(--t-slow); height: 100%; position: relative; overflow: hidden;
}
.feature::before {
	content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
	background: linear-gradient(180deg, var(--red), var(--gold)); transform: scaleY(0); transform-origin: top;
	transition: transform var(--t-slow);
}
.feature:hover::before { transform: scaleY(1); }
.feature:hover { border-color: transparent; box-shadow: var(--shadow-violet); transform: translateY(-6px); }
.feature__ico {
	width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
	background: var(--red-tint); color: var(--red); margin-bottom: 11px; transition: all var(--t);
}
.feature:hover .feature__ico { background: var(--red); color: #fff; transform: rotate(-6deg) scale(1.08); }
.feature h3 { margin-bottom: .3em; font-size: 1rem; }
.feature p { margin: 0; font-size: .81rem; line-height: 1.55; }

.steps { counter-reset: step; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.step {
	position: relative; padding: 20px 15px 17px; background: #fff; border-radius: var(--radius);
	border: 1px solid var(--line); transition: all var(--t-slow); overflow: hidden;
}
.step:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.step::before {
	counter-increment: step; content: counter(step, decimal-leading-zero);
	font-family: var(--head); font-size: 2rem; font-weight: 700;
	color: var(--navy-tint); position: absolute; top: 6px; right: 16px; line-height: 1; transition: color var(--t);
}
.step:hover::before { color: var(--gold-tint); }
.step h3 { font-size: .96rem; margin-bottom: .28em; color: var(--navy); }
.step p { margin: 0; font-size: .8rem; line-height: 1.55; }
.steps .step:nth-child(1) { border-top: 3px solid var(--navy); }
.steps .step:nth-child(2) { border-top: 3px solid var(--sky); }
.steps .step:nth-child(3) { border-top: 3px solid var(--gold); }
.steps .step:nth-child(4) { border-top: 3px solid var(--red); }

/* industries marquee */
.marquee { overflow: hidden; position: relative; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; gap: 14px; width: max-content; animation: marquee 34s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.chip {
	background: #fff; border: 1px solid var(--line); border-radius: 100px;
	padding: 11px 22px; font-size: .92rem; font-weight: 600; color: var(--navy);
	transition: all var(--t); white-space: nowrap; display: inline-flex; align-items: center; gap: 8px;
}
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.chip:hover { background: var(--navy); color: #fff; border-color: var(--navy); transform: translateY(-3px); }

.cta-band {
	background: var(--grad-royal);
	background-size: 220% 220%;
	animation: gradientShift 10s ease infinite;
	color: #e7e4fb; border-radius: var(--radius-lg); padding: clamp(22px, 2.6vw, 34px);
	display: grid; grid-template-columns: 1.4fr auto; gap: 26px; align-items: center;
	position: relative; overflow: hidden; box-shadow: var(--shadow-lg);
}
.cta-band::after {
	content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%;
	background: var(--gold); opacity: .22; filter: blur(50px); right: -60px; top: -60px;
	animation: drift 10s ease-in-out infinite;
}
.cta-band::before {
	content: ""; position: absolute; width: 220px; height: 220px; border-radius: 50%;
	background: var(--pink); opacity: .18; filter: blur(60px); left: -50px; bottom: -70px;
	animation: drift 13s ease-in-out infinite reverse;
}
.cta-band h2 { color: #fff; margin-bottom: .35em; }
.cta-band p { margin: 0; position: relative; z-index: 1; }
.cta-band__btns { display: flex; flex-wrap: wrap; gap: 12px; position: relative; z-index: 1; }

/* Testimonials: a real horizontal scroller, so all reviews stay reachable
   on phone, tablet and desktop by swipe, arrows or trackpad. */
.tslider { position: relative; }
.tslider__track {
	display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
	scroll-behavior: smooth; padding: 4px 2px 14px;
	scrollbar-width: thin; scrollbar-color: rgba(240, 38, 42, .5) transparent;
}
.tslider__track::-webkit-scrollbar { height: 6px; }
.tslider__track::-webkit-scrollbar-track { background: var(--bg-soft-2); border-radius: 100px; }
.tslider__track::-webkit-scrollbar-thumb { background: linear-gradient(90deg, var(--red), var(--orange)); border-radius: 100px; }
.tslider__nav {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
	width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line);
	background: #fff; color: var(--navy); cursor: pointer;
	display: grid; place-items: center; box-shadow: var(--shadow-md); transition: all var(--t);
}
.tslider__nav:hover { background: var(--red); color: #fff; border-color: transparent; transform: translateY(-50%) scale(1.08); }
.tslider__nav--prev { left: -14px; }
.tslider__nav--prev .ico { transform: rotate(180deg); }
.tslider__nav--next { right: -14px; }
@media (max-width: 1024px) { .tslider__nav { display: none; } }

.tcard {
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 18px;
	transition: all var(--t-slow); position: relative; overflow: hidden;
	flex: 0 0 clamp(250px, 30%, 330px); scroll-snap-align: start;
	display: flex; flex-direction: column;
}
.tcard::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
	background: linear-gradient(90deg, var(--red), var(--gold));
	transform: scaleX(0); transform-origin: left; transition: transform var(--t-slow);
}
.tcard:hover::after { transform: scaleX(1); }
.tcard:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: transparent; }
.tcard__quote { position: absolute; right: 12px; top: 10px; color: var(--red); opacity: .12; }
.tcard__stars { color: var(--gold); display: flex; gap: 2px; margin-bottom: 9px; }
.tcard__stars .ico { fill: currentColor; stroke: none; }
.tcard__text { font-size: .87rem; color: var(--ink); line-height: 1.6; flex: 1; }
.tcard__who { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.tcard__av {
	width: 38px; height: 38px; border-radius: 50%; flex: none;
	background: var(--grad-hot); color: #fff; display: grid; place-items: center;
	font-family: var(--head); font-size: 1.05rem; font-weight: 700;
}
.tcard__name { font-weight: 700; color: var(--navy); line-height: 1.2; font-size: .9rem; }
.tcard__role { font-size: .76rem; color: var(--steel); }
@media (max-width: 760px) { .tcard { flex: 0 0 80%; } }

/* Inner-page hero: deep brand gradient with white text, so the heading
   always reads clearly instead of dark-on-blue. */
.phero {
	background: var(--grad-royal);
	background-size: 240% 240%; animation: gradientShift 16s ease infinite;
	padding: clamp(34px, 4vw, 54px) 0; text-align: center; position: relative; overflow: hidden;
}
.phero::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background:
		radial-gradient(circle at 18% 20%, rgba(255, 180, 0, .22), transparent 45%),
		radial-gradient(circle at 84% 78%, rgba(240, 38, 42, .22), transparent 45%);
}
.phero > .wrap { position: relative; z-index: 1; }
.phero .blob { opacity: .3; }
.phero__title { color: #fff; margin-bottom: .25em; animation: fadeUp .7s ease both; text-shadow: 0 2px 20px rgba(0, 0, 0, .3); }
.phero__text { margin: 0 auto; max-width: 640px; color: rgba(255, 255, 255, .88); font-size: .92rem; animation: fadeUp .8s .1s ease both; }

.crumbs { background: #fff; border-bottom: 1px solid var(--line); font-size: .85rem; }
.crumbs .wrap { display: flex; gap: 8px; align-items: center; padding: 13px 0; flex-wrap: wrap; }
.crumbs span { color: var(--steel); }
.crumbs__now { color: var(--navy); font-weight: 600; }

/* 7. Products -------------------------------------------- */
.card {
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
	overflow: hidden; display: flex; flex-direction: column; height: 100%;
	transition: all var(--t-slow);
}
.card:hover { box-shadow: var(--shadow-lg); transform: translateY(-8px) rotate(-.6deg); border-color: transparent; }
/* Product photos are never cropped: `contain` fits the whole machine inside
   the frame whatever its shape (some photos are portrait, some landscape),
   and the soft tinted panel makes the letterboxing look deliberate. */
.card__media {
	display: block; aspect-ratio: 16 / 10; overflow: hidden; position: relative;
	background: linear-gradient(150deg, #fff 0%, var(--bg-soft) 55%, var(--bg-soft-2) 100%);
	padding: 8px;
}
.card__media img { width: 100%; height: 100%; object-fit: contain; transition: transform .5s ease; }
.card:hover .card__media img { transform: scale(1.05); }
.card__media::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, transparent 55%, rgba(240, 38, 42, .07));
	opacity: 0; transition: opacity var(--t);
}
.card:hover .card__media::after { opacity: 1; }
.card__body { padding: 9px 11px 9px; display: flex; flex-direction: column; flex: 1; }
.card__cat { font-size: .62rem; text-transform: uppercase; letter-spacing: .09em; color: var(--red); font-weight: 700; margin-bottom: 4px; }
.card__cat a { color: inherit; }
.card__title { font-size: .9rem; margin-bottom: .25em; line-height: 1.22; }
.card__title a { color: var(--navy); }
.card__title a:hover { color: var(--red); }
.card__text { font-size: .74rem; margin-bottom: 7px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 7px; border-top: 1px solid var(--line); }
.card__price { font-weight: 700; color: var(--navy); font-size: .84rem; }
.card__price--ask { color: var(--steel); font-weight: 600; font-size: .78rem; }
.card__link { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: .78rem; color: var(--red); }
.card__link .ico { transition: transform var(--t); }
.card:hover .card__link .ico { transform: translateX(5px); }

.ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--navy) 0%, var(--navy-3) 100%); position: relative; overflow: hidden; }
.ph::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .12), transparent); background-size: 300px 100%; animation: shimmer 2.6s linear infinite; }
.ph span { font-family: var(--head); font-size: 3.4rem; color: rgba(255, 255, 255, .32); position: relative; }

.pfilter { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 34px; }
.pfilter a {
	padding: 10px 20px; border-radius: 100px; border: 1px solid var(--line);
	font-size: .9rem; font-weight: 600; color: var(--navy); background: #fff; transition: all var(--t);
}
.pfilter a:hover, .pfilter a.is-active { background: var(--red); color: #fff; border-color: var(--red); transform: translateY(-2px); }

.single-product { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(20px, 2.6vw, 34px); align-items: start; }
.single-product__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); width: 100%; }
.single-product__media .ph { aspect-ratio: 4 / 3; border-radius: var(--radius-lg); }
.single-product h1 { margin-bottom: .3em; }
.pmeta { display: flex; flex-wrap: wrap; gap: 10px 20px; padding: 14px 0 18px; border-bottom: 1px solid var(--line); margin-bottom: 20px; font-size: .9rem; }
.pmeta strong { color: var(--navy); }
.pactions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0; }

.spec, .feat, .apps, .why { margin-top: 44px; }
.spec__title { font-size: 1.35rem; margin-bottom: .6em; color: var(--navy); }
.spec__table { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; font-size: .93rem; }
.spec__table th, .spec__table td { padding: 13px 17px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec__table th { background: var(--bg-soft); width: 42%; color: var(--navy); font-weight: 600; }
.spec__table tr:last-child th, .spec__table tr:last-child td { border-bottom: 0; }
.spec__table tr:hover td, .spec__table tr:hover th { background: var(--gold-tint); }

.why__box { background: linear-gradient(120deg, var(--navy-tint), #fff); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 26px; }

/* 8. Forms ----------------------------------------------- */
.enquiry { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.form-card { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: clamp(18px, 2vw, 26px); border: 1px solid var(--line); position: relative; }
.form-card::before {
	content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	background: linear-gradient(90deg, var(--red), var(--gold), var(--sky));
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: .85rem; font-weight: 600; color: var(--navy); }
.field .req { color: var(--red); }
.field input, .field select, .field textarea {
	width: 100%; padding: 13px 15px; border: 1px solid var(--line); border-radius: 8px;
	font-family: inherit; font-size: .95rem; color: var(--ink); background: #fbfbff;
	transition: border-color var(--t), box-shadow var(--t), background var(--t);
}
.field input:focus, .field select:focus, .field textarea:focus {
	outline: none; border-color: var(--red); box-shadow: 0 0 0 4px rgba(224, 4, 6, .12); background: #fff;
}
.field textarea { resize: vertical; min-height: 110px; }
.field.has-error input, .field.has-error textarea { border-color: #d93636; animation: sway .3s ease 2; }
.field__err { font-size: .78rem; color: #d93636; }
.hp { position: absolute; left: -9999px; opacity: 0; }
.form-note { font-size: .82rem; color: var(--steel); margin: 14px 0 0; }
.form-msg { padding: 14px 16px; border-radius: 10px; font-size: .92rem; margin-bottom: 16px; display: none; }
.form-msg.is-on { display: block; animation: fadeUp .4s ease both; }
.form-msg--ok { background: #e7f8ee; color: #14713f; border: 1px solid #b9e6cd; }
.form-msg--bad { background: #fdeaea; color: #a11b1b; border: 1px solid #f4c2c2; }

.cinfo { list-style: none; padding: 0; margin: 0; display: grid; gap: 17px; }
.cinfo li { display: flex; gap: 13px; align-items: flex-start; }
.cinfo__ico {
	width: 40px; height: 40px; border-radius: 10px; flex: none; display: grid; place-items: center;
	background: var(--red-tint); color: var(--red); transition: all var(--t);
}
.cinfo li:hover .cinfo__ico { background: var(--red); color: #fff; transform: rotate(-6deg); }
.site-footer .cinfo__ico { background: rgba(255, 255, 255, .1); color: var(--gold); }
.site-footer .cinfo li:hover .cinfo__ico { background: var(--gold); color: #2b1013; }
.map { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); line-height: 0; }
.map iframe { width: 100%; height: 380px; border: 0; filter: grayscale(.15) contrast(1.02); }

/* 9. Footer + floating ------------------------------------ */
.site-footer {
	background:
		radial-gradient(ellipse 900px 420px at 18% -12%, rgba(240, 38, 42, .16), transparent 60%),
		radial-gradient(ellipse 700px 380px at 88% -10%, rgba(255, 180, 0, .12), transparent 60%),
		linear-gradient(180deg, #111013 0%, #0a090b 55%, #060506 100%);
	color: #c7c2c4; font-size: .9rem; padding-top: clamp(34px, 4vw, 48px);
	position: relative; overflow: hidden;
}
.site-footer::before {
	content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
	background: linear-gradient(90deg, var(--red), var(--gold), var(--orange), var(--red));
	background-size: 300% 100%; animation: gradientShift 10s linear infinite;
	z-index: 2;
}
.site-footer .blob-field { z-index: 0; }
.site-footer .blob { opacity: .5; }
.site-footer > .wrap { position: relative; z-index: 1; }
.site-footer h3, .site-footer .widget-title { color: #fff; font-size: 1.05rem; margin-bottom: .6em; font-family: var(--head); letter-spacing: .4px; }
.site-footer p { margin: 0 0 .6em; }
.site-footer a { color: #cfc9cb; }
.site-footer a:hover { color: var(--gold); }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.4fr; gap: 28px; padding-bottom: 24px; }
.footer__brand .brand__name { color: #fff; }
.footer__brand .brand__tag { color: #c9a9a0; }
.footer__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.footer__list a { transition: transform var(--t) inline-block; display: inline-block; }
.footer__list a:hover { transform: translateX(4px); }
.footer__social { display: flex; gap: 9px; margin-top: 12px; }
.footer__social a {
	width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
	background: rgba(255, 255, 255, .07); color: #fff; transition: all var(--t);
	border: 1px solid rgba(255, 255, 255, .1);
}
.footer__social a:hover { transform: translateY(-3px) scale(1.06); border-color: transparent; color: #fff; }
.footer__social .is-wa:hover { background: #25d366; box-shadow: 0 6px 18px rgba(37, 211, 102, .4); }
.footer__social .is-ig:hover { background: linear-gradient(45deg, #f09433, #dc2743, #bc1888); box-shadow: 0 6px 18px rgba(220, 39, 67, .4); }
.footer__social .is-mail:hover { background: #ea4335; box-shadow: 0 6px 18px rgba(234, 67, 53, .4); }
.footer__bar {
	border-top: 1px solid rgba(255, 255, 255, .1); padding: 14px 0; font-size: .8rem;
	display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; position: relative; z-index: 1;
}
.footer__credit { display: inline-block; margin-left: 6px; padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, .18); }
.footer__credit a { color: var(--flx-yellow); font-weight: 700; transition: color var(--t), text-shadow var(--t); }
.footer__credit a:hover { color: var(--flx-yellow); text-decoration: underline; text-shadow: 0 0 14px rgba(250, 204, 21, .55); }
@media (max-width: 760px) {
	.footer__credit { display: block; margin-left: 0; padding-left: 0; border-left: 0; margin-top: 4px; }
}
.site-footer .widget { margin-bottom: 16px; }

.floaters { position: fixed; right: 18px; bottom: 22px; z-index: 190; display: grid; gap: 12px; }
.floaters a {
	width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
	color: #fff; box-shadow: var(--shadow-lg); transition: transform var(--t);
}
.floaters a:hover { transform: scale(1.1) rotate(-6deg); color: #fff; }
.floaters .f-wa { background: #25d366; animation: pulseRing 2.6s infinite; }
.floaters .f-call { background: var(--red); }

.mobile-bar { display: none; }

.pagination { margin-top: 44px; display: flex; justify-content: center; }
.pagination .nav-links { display: flex; gap: 8px; flex-wrap: wrap; }
.pagination .page-numbers {
	min-width: 44px; height: 44px; display: grid; place-items: center; padding: 0 12px;
	border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--navy); font-weight: 600; transition: all var(--t);
}
.pagination .page-numbers.current, .pagination .page-numbers:hover { background: var(--red); color: #fff; border-color: var(--red); }

/* Editor / blog content */
.entry { max-width: 820px; }
.entry img { border-radius: var(--radius); }
.entry blockquote { border-left: 4px solid var(--red); margin: 1.5em 0; padding: 6px 0 6px 20px; color: var(--ink); font-style: italic; background: var(--bg-soft); border-radius: 0 8px 8px 0; }
.entry h2, .entry h3 { margin-top: 1.6em; color: var(--navy); }
.widget { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; margin-bottom: 24px; }
.site-footer .widget { background: none; border: 0; padding: 0; }
.widget ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }

.layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 44px; align-items: start; }
body.no-sidebar .layout { grid-template-columns: minmax(0, 1fr); }

.post-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: all var(--t-slow); }
.post-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.post-card__body { padding: 22px; }
.post-card__meta { font-size: .8rem; color: var(--steel); margin-bottom: 8px; }

/* 10. Blog empty state ------------------------------------ */
/* An intentionally blank blog: no cards, no placeholder copy, just enough
   height that the footer does not sit against the page title. */
.blog-blank { min-height: 34vh; }

/* 11. Responsive ------------------------------------------ */
@media (max-width: 1080px) {
	.footer__grid { grid-template-columns: 1fr 1fr; }
	.steps { grid-template-columns: repeat(2, 1fr); }
}

/* Tablet + mobile: header shows only the logo and the menu button. */
@media (max-width: 1024px) {
	.nav, .header__phone, .header__quote { display: none; }
	.burger { display: grid; }
	.about, .enquiry, .single-product, .layout { grid-template-columns: 1fr; }
	.about__media { order: -1; }
	.grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
	.cta-band { grid-template-columns: 1fr; }
	.banner__panel { max-width: 100%; }
	.banner__mark { width: 60vw; opacity: .07; }
}

@media (max-width: 760px) {
	body { font-size: 14px; }
	.stats__in { grid-template-columns: repeat(2, 1fr); }
	.stat { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .18); }
	.stat:nth-child(odd) { border-right: 1px solid rgba(255, 255, 255, .18); }
	.grid--4, .grid--2, .steps { grid-template-columns: 1fr; }
	/* Two product cards still fit side by side on a phone. */
	.grid--3 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.footer__grid { grid-template-columns: 1fr; gap: 22px; }
	/* Compact side-by-side buttons on phones instead of two full-width bars. */
	.banner__btns { gap: 8px; margin-top: 16px; }
	.banner__btns .btn {
		flex: 0 1 auto; justify-content: center;
		padding: 9px 14px; font-size: .78rem; gap: 6px;
	}
	.banner__btns .btn .ico { width: 14px; height: 14px; }
	.form-grid { grid-template-columns: 1fr; }
	.banner__dots { bottom: 26px; }
	.banner__scroll { display: none; }
	.footer__bar { flex-direction: column; text-align: center; }
	.about__badge { position: static; display: inline-block; margin-top: 14px; animation: none; }
	.card__body { padding: 12px 12px 11px; }
	.card__title { font-size: .92rem; }
	.card__text { display: none; }
}

@media (max-width: 420px) {
	.grid--3 { grid-template-columns: 1fr; }
	.card__text { display: block; }
}

/* 12. Motion & print safety -------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
	.js .reveal, .js .reveal-group > * { opacity: 1; transform: none; }
}

@media print {
	.site-header, .floaters, .site-footer, .enquiry, .banner__dots, .banner__scroll { display: none !important; }
	body { padding-top: 0; }
}

/* 13. Single product extras -------------------------------- */
.pgallery { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.pgallery {
	background: linear-gradient(150deg, #fff 0%, var(--bg-soft) 55%, var(--bg-soft-2) 100%);
	padding: 12px;
}
.pgallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; transition: transform var(--t-slow); }
.pgallery:hover img { transform: scale(1.04); }
.pgallery__badge {
	position: absolute; left: 12px; bottom: 12px; z-index: 2;
	display: inline-flex; align-items: center; gap: 6px;
	background: rgba(10, 9, 11, .78); backdrop-filter: blur(6px);
	color: #fff; font-size: .7rem; font-weight: 600;
	padding: 6px 11px; border-radius: 100px;
}
.pgallery__badge .ico { color: var(--gold); }
.ptrust { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ptrust span {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: .74rem; font-weight: 600; color: var(--navy);
	background: var(--bg-soft); border: 1px solid var(--line);
	padding: 6px 11px; border-radius: 100px; transition: all var(--t);
}
.ptrust span:hover { background: var(--red-tint); border-color: transparent; transform: translateY(-2px); }
.ptrust .ico { color: var(--red); }
.plead { font-size: .95rem; color: var(--ink); font-weight: 500; margin-bottom: .7em; }
.pmeta { padding: 10px 0 12px; margin-bottom: 14px; font-size: .82rem; gap: 8px 16px; }
.pactions { gap: 9px; margin: 0 0 18px; }

/* 14. Mission / Vision / Values cards ---------------------- */
.mvv { align-items: stretch; }
.mvv__card {
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
	padding: 22px 20px 18px; display: flex; flex-direction: column; text-align: center;
	position: relative; overflow: hidden; transition: all var(--t-slow);
}
.mvv__card::before {
	content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); padding: 1px;
	background: var(--grad-hot); opacity: 0; transition: opacity var(--t-slow);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.mvv__card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; }
.mvv__card:hover::before { opacity: 1; }
.mvv__ico {
	width: 42px; height: 42px; border-radius: 12px; margin: 0 auto 10px;
	display: grid; place-items: center; background: var(--red-tint); color: var(--red);
	transition: all var(--t);
}
.mvv__card:hover .mvv__ico { background: var(--grad-hot); color: #fff; transform: rotate(-6deg) scale(1.08); }
.mvv__title { font-size: 1.15rem; color: var(--navy); margin-bottom: .4em; }
.mvv__text { font-size: .82rem; line-height: 1.6; margin: 0 0 16px; flex: 1; }
.mvv__link {
	display: inline-flex; align-items: center; gap: 10px;
	font-weight: 700; font-size: .82rem; color: var(--navy);
	padding-top: 12px; border-top: 1px solid var(--line); width: 100%;
}
.mvv__arrow {
	width: 32px; height: 32px; border-radius: 50%; flex: none;
	display: grid; place-items: center; background: var(--navy); color: #fff;
	transition: all var(--t);
}
.mvv__link:hover { color: var(--red); }
.mvv__link:hover .mvv__arrow { background: var(--red); transform: translateX(4px); }
@media (max-width: 760px) {
	.mvv__card { padding: 18px 16px 15px; }
	.mvv__text { font-size: .8rem; }
}

/* 15. Enquiry section background image --------------------- */
.sec--formbg { position: relative; overflow: hidden; isolation: isolate; }
/* The white veil is stacked *in the same background shorthand* as the photo.
   Layering it as a separate ::before at the same z-index would paint it
   behind the image (tree order wins on equal z-index) and the section would
   come out dark - so both layers live on one element, gradient on top. */
.sec--formbg .sec__bg {
	position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background-image:
		linear-gradient(105deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .88) 45%, rgba(255, 255, 255, .74) 100%),
		url("../img/form-bg.jpg");
	background-size: cover, cover;
	background-position: center, center;
	transform: scale(1.06);
	animation: kenburns 26s ease-in-out infinite alternate;
}
.sec--formbg .form-card { backdrop-filter: blur(4px); background: rgba(255, 255, 255, .97); }
@media (max-width: 760px) {
	.sec--formbg .sec__bg {
		background-image:
			linear-gradient(180deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .93) 100%),
			url("../img/form-bg.jpg");
	}
}

/* 16. Gaps found in the class audit ------------------------ */
/* Decorative glow inside the CTA band (markup existed, style did not). */
.cta-band__blob {
	position: absolute; right: -40px; bottom: -60px; z-index: 0;
	width: 220px; height: 220px; border-radius: 50%;
	background: var(--gold); opacity: .2; filter: blur(60px);
	animation: drift 14s ease-in-out infinite; pointer-events: none;
}
.cta-band > div { position: relative; z-index: 1; }

/* Blog / inner-page sidebar column. */
.sidebar { display: grid; gap: 0; align-content: start; }
.sidebar .widget:last-child { margin-bottom: 0; }
.sidebar .widget-title { font-size: 1.02rem; color: var(--navy); margin-bottom: .7em; }
.sidebar .widget li { font-size: .85rem; }

/* Left column of the about split - keeps text off the image edge. */
.about__body { min-width: 0; }
.single-product__body { min-width: 0; }

/* Search form (searchform.php). */
.searchform .search-field {
	font-family: inherit; font-size: .88rem; color: var(--ink); background: #fbfbff;
	transition: border-color var(--t), box-shadow var(--t);
}
.searchform .search-field:focus {
	outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(240, 38, 42, .12); background: #fff;
}

/* Header logo sizing (explicit, not only inherited from .brand img). */
.brand__logo { max-height: 46px; width: auto; }
@media (max-width: 760px) { .brand__logo { max-height: 38px; } }

/* 17. Dark photo backdrop for the enquiry band ------------- */
/* Same one-element trick as .sec--formbg, but the veil is dark because the
   photo is a night-time port shot - a white veil would erase it. The form
   card stays white on purpose, so the form itself reads exactly as before
   and only the copy beside it flips to light. */
.sec--enqbg { position: relative; overflow: hidden; isolation: isolate; }
.sec--enqbg .sec__bg {
	position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background-image:
		linear-gradient(100deg, rgba(10, 16, 42, .62) 0%, rgba(10, 16, 42, .3) 50%, rgba(10, 16, 42, .55) 100%),
		url("../img/enquiry-bg.jpg");
	background-size: cover, cover;
	background-position: center, center;
	transform: scale(1.06);
	animation: kenburns 26s ease-in-out infinite alternate;
}
.sec--enqbg h2 { color: #fff; }
.sec--enqbg > .wrap > div > p { color: rgba(255, 255, 255, .82); }
.sec--enqbg .eyebrow { color: var(--gold); }
.sec--enqbg .cinfo li,
.sec--enqbg .cinfo span { color: rgba(255, 255, 255, .9); }
.sec--enqbg .cinfo a { color: #fff; }
.sec--enqbg .cinfo a:hover { color: var(--gold); }
.sec--enqbg .cinfo__ico { background: rgba(255, 255, 255, .12); color: var(--gold); }
.sec--enqbg .cinfo li:hover .cinfo__ico { background: var(--gold); color: #2b1013; }
.sec--enqbg .form-card { backdrop-filter: blur(4px); background: rgba(255, 255, 255, .97); }
@media (max-width: 760px) {
	.sec--enqbg .sec__bg {
		background-image:
			linear-gradient(180deg, rgba(10, 16, 42, .72) 0%, rgba(10, 16, 42, .66) 100%),
			url("../img/enquiry-bg.jpg");
	}
}

/* 18. Mobile: nothing may stick out sideways ---------------- */
/* The reveal animations start elements 42px to the left or right of where
   they finish. On a desktop that space exists; on a 375px phone it pushed
   the About photo past the right edge and the whole page could be dragged
   sideways. On small screens the reveals move only vertically, which looks
   the same but cannot overflow. */
@media (max-width: 760px) {
	.js .reveal--left,
	.js .reveal--right { transform: translateY(30px); }
	.reveal--left.is-in,
	.reveal--right.is-in { transform: none; }
}

/* NOTE: do NOT add overflow-x:hidden on html here. It turns the root into
   its own scroll container, which stops window.scrollTo/scrollY working and
   breaks the sticky-header script and the smooth in-page links. body already
   carries overflow-x:hidden further up, and the sideways overflow is fixed at
   its source (the reveal transforms above). */

/* 19. Mobile readability & tap targets --------------------- */
/* The card type is sized for a three-across desktop grid. On a phone the
   card is full width, so the same rem values render at 10-12px - too small
   to read comfortably and below what Google's mobile report wants. These
   only lift the type on small screens; the desktop grid is untouched. */
@media (max-width: 760px) {
	.card__cat { font-size: .78rem; letter-spacing: .06em; }
	.card__text { font-size: .86rem; line-height: 1.5; -webkit-line-clamp: 3; }
	.card__title { font-size: 1.02rem; }
	.eyebrow { font-size: .8rem; }

	/* "Details" was a 20px-high target. A thumb needs roughly 44px. */
	.card__link {
		font-size: .85rem;
		min-height: 44px;
		align-items: center;
	}
	.card__foot { min-height: 44px; }

	/* Same for the category filter pills and pagination. */
	.pfilter a { min-height: 44px; display: inline-flex; align-items: center; }
	.pagination .page-numbers { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

	/* Spec table: long values used to squeeze the label column to nothing. */
	.spec__table th { width: 42%; }
	.spec__table th, .spec__table td { font-size: .85rem; padding: 10px 12px; }
}

/* iOS Safari zooms the whole page in whenever a focused field is under 16px.
   The form was at 15.2px, so tapping "Your Name" jerked the layout sideways
   on every iPhone. 16px is the threshold, not a design preference. */
@media (max-width: 760px) {
	.form input[type="text"],
	.form input[type="tel"],
	.form input[type="email"],
	.form input[type="url"],
	.form select,
	.form textarea,
	.form-card input,
	.form-card select,
	.form-card textarea,
	.searchform input[type="search"] { font-size: 16px; }
}