/**
 * Giltech Mizpah - Master Global Design System
 *
 * Architecture:
 *  1. Variables (Colors, Typography, Spacing, Shadows, Radius)
 *  2. Reset & Base (Elementor & WordPress Safe)
 *  3. Typography System
 *  4. Container System
 *  5. Grid System
 *  6. Spacing System
 *  7. Surface System
 *  8. Card System & Glassmorphism
 *  9. Button System
 * 10. Form System
 * 11. Badge System
 * 12. Link System
 * 13. Section System & Dark Sections
 * 14. Dividers, Images & Icon Utilities
 * 15. Accessibility & Focus System
 * 16. Responsive Behavior
 *
 * @package GiltechMizpah
 * @version 1.0.0
 */

/* ==========================================================================
   1. VARIABLES (GLOBAL DESIGN TOKENS)
   ========================================================================== */

:root {
	/* ------------------------------------------------------------------------
	   1.1 Fixed Brand Colours - DO NOT CHANGE
	   ------------------------------------------------------------------------ */
	--giltech-red: #E30613;
	--giltech-blue: #155FBA;
	--giltech-black: #090A0C;
	--giltech-dark: #15171A;
	--giltech-white: #FFFFFF;
	--giltech-bg: #F5F6F7;
	--giltech-border: #E5E7EA;
	--giltech-text: #17191D;
	--giltech-muted: #73777E;
	--giltech-success: #2D8B59;
	--giltech-dark-muted: #A9B0B8;

	/* ------------------------------------------------------------------------
	   1.2 Interactive & Derivative States
	   ------------------------------------------------------------------------ */
	--giltech-blue-hover: #114C95;
	--giltech-red-hover: #B8050F;
	--giltech-dark-hover: #000000;
	--giltech-white-hover: #F0F2F5;

	--giltech-blue-glow: 0 0 0 3px rgba(21, 95, 186, 0.20);
	--giltech-red-glow: 0 0 0 3px rgba(227, 6, 19, 0.20);
	--giltech-success-glow: 0 0 0 3px rgba(45, 139, 89, 0.20);

	--giltech-blue-subtle: rgba(21, 95, 186, 0.08);
	--giltech-red-subtle: rgba(227, 6, 19, 0.08);
	--giltech-success-subtle: rgba(45, 139, 89, 0.09);

	/* ------------------------------------------------------------------------
	   1.3 Typography Scale (Responsive with clamp)
	   ------------------------------------------------------------------------ */
	--giltech-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--giltech-font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	--giltech-size-xs: clamp(0.6875rem, 0.15vw + 0.65rem, 0.75rem);      /* 11px - 12px */
	--giltech-size-sm: clamp(0.8125rem, 0.2vw + 0.75rem, 0.875rem);       /* 13px - 14px */
	--giltech-size-md: clamp(0.9375rem, 0.25vw + 0.875rem, 1rem);        /* 15px - 16px */
	--giltech-size-lg: clamp(1.125rem, 0.35vw + 1rem, 1.25rem);          /* 18px - 20px */
	--giltech-size-xl: clamp(1.375rem, 0.5vw + 1.2rem, 1.625rem);        /* 22px - 26px */
	--giltech-size-2xl: clamp(1.75rem, 1vw + 1.4rem, 2.25rem);           /* 28px - 36px */
	--giltech-size-3xl: clamp(2.25rem, 2vw + 1.5rem, 3rem);              /* 36px - 48px */
	--giltech-size-display: clamp(2.5rem, 3.5vw + 1.5rem, 4.25rem);      /* 40px - 68px */

	--giltech-weight-regular: 400;
	--giltech-weight-medium: 500;
	--giltech-weight-semibold: 600;
	--giltech-weight-bold: 600;
	--giltech-weight-extrabold: 600;
	--giltech-weight-black: 600;

	--giltech-line-height-tight: 1.1;
	--giltech-line-height-heading: 1.2;
	--giltech-line-height-body: 1.6;

	--giltech-letter-spacing-tight: -0.035em;
	--giltech-letter-spacing-snug: -0.02em;
	--giltech-letter-spacing-normal: -0.01em;
	--giltech-letter-spacing-wide: 0.06em;
	--giltech-letter-spacing-wider: 0.12em;

	/* ------------------------------------------------------------------------
	   1.4 Spacing Scale (Exact tokens)
	   ------------------------------------------------------------------------ */
	--giltech-space-1: 4px;
	--giltech-space-2: 8px;
	--giltech-space-3: 12px;
	--giltech-space-4: 16px;
	--giltech-space-5: 20px;
	--giltech-space-6: 24px;
	--giltech-space-7: 32px;
	--giltech-space-8: 40px;
	--giltech-space-9: 48px;
	--giltech-space-10: 64px;
	--giltech-space-11: 80px;
	--giltech-space-12: 96px;

	/* ------------------------------------------------------------------------
	   1.5 Container Tokens
	   ------------------------------------------------------------------------ */
	--giltech-container: 1400px;
	--giltech-container-pad: 36px;

	/* ------------------------------------------------------------------------
	   1.6 Radius Scale (Exact tokens)
	   ------------------------------------------------------------------------ */
	--giltech-radius-sm: 8px;
	--giltech-radius-md: 12px;
	--giltech-radius-lg: 16px;
	--giltech-radius-xl: 20px;
	--giltech-radius-2xl: 28px;
	--giltech-radius-pill: 999px;

	/* ------------------------------------------------------------------------
	   1.7 Shadows (Soft, large, subtle, professional)
	   ------------------------------------------------------------------------ */
	--giltech-shadow-xs: 0 1px 2px rgba(9, 10, 12, 0.04);
	--giltech-shadow-sm: 0 2px 6px rgba(9, 10, 12, 0.05);
	--giltech-shadow-md: 0 6px 18px rgba(9, 10, 12, 0.07);
	--giltech-shadow-lg: 0 14px 34px rgba(9, 10, 12, 0.09);
	--giltech-shadow-xl: 0 24px 56px rgba(9, 10, 12, 0.11);

	/* ------------------------------------------------------------------------
	   1.8 Motion & Transitions (180ms - 250ms)
	   ------------------------------------------------------------------------ */
	--giltech-transition-fast: 180ms cubic-bezier(0.16, 1, 0.3, 1);
	--giltech-transition-base: 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   2. RESET & BASE (ELEMENTOR & WORDPRESS SAFE)
   Strictly scoped: never uses universal * or .elementor * overrides.
   ========================================================================== */

html {
	box-sizing: border-box;
	font-family: var(--giltech-font-body);
	font-size: 16px;
	line-height: var(--giltech-line-height-body);
	-webkit-text-size-adjust: 100%;
	color: var(--giltech-text);
	background-color: var(--giltech-bg);
	scroll-behavior: smooth;
}

body {
	margin: 0;
	padding: 0;
	font-family: var(--giltech-font-body);
	font-size: var(--giltech-size-md);
	line-height: var(--giltech-line-height-body);
	font-weight: var(--giltech-weight-regular);
	color: var(--giltech-text);
	background-color: var(--giltech-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Subtle Text Selection */
::selection {
	background-color: rgba(21, 95, 186, 0.22);
	color: var(--giltech-black);
}

/* Minimal Custom Scrollbar (Desktop) */
@media (min-width: 769px) {
	::-webkit-scrollbar {
		width: 8px;
		height: 8px;
	}
	::-webkit-scrollbar-track {
		background: transparent;
	}
	::-webkit-scrollbar-thumb {
		background: #C2C7CE;
		border-radius: var(--giltech-radius-pill);
	}
	::-webkit-scrollbar-thumb:hover {
		background: var(--giltech-muted);
	}
}

/* Scoped Image Safety */
.giltech-site img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* ==========================================================================
   3. TYPOGRAPHY SYSTEM
   Headings: 800-900 | Body: 400-500 | Navigation: 600-800 | Buttons: 800-900
   ========================================================================== */

.giltech-site h1,
.giltech-site h2,
.giltech-site h3,
.giltech-site h4,
.giltech-site h5,
.giltech-site h6,
.giltech-heading {
	font-family: var(--giltech-font-heading);
	color: var(--giltech-dark);
	margin-top: 0;
	margin-bottom: var(--giltech-space-4);
	line-height: var(--giltech-line-height-heading);
	letter-spacing: var(--giltech-letter-spacing-snug);
	text-wrap: balance;
}

/* H1 & Main Page Titles: Clean, normal 500 weight premium typography */
.giltech-site h1,
.giltech-h1,
.giltech-entry-title,
.giltech-page-title,
.page-title {
	font-size: clamp(22px, 2.6vw, 32px);
	font-weight: 500;
	letter-spacing: -0.015em;
	line-height: var(--giltech-line-height-tight);
}

/* H2: Desktop 26-30px, Tablet 24-26px, Mobile 20-22px */
.giltech-site h2:not(.giltech-footer-cta__title),
.giltech-h2 {
	font-size: var(--giltech-size-2xl);
	font-weight: 550;
	letter-spacing: var(--giltech-letter-spacing-tight);
}

/* H3: Desktop 24-30px, Mobile 20-25px */
.giltech-site h3,
.giltech-h3 {
	font-size: var(--giltech-size-xl);
	font-weight: 550;
	letter-spacing: var(--giltech-letter-spacing-snug);
}

/* H4 */
.giltech-site h4,
.giltech-h4 {
	font-size: var(--giltech-size-lg);
	font-weight: 500;
	letter-spacing: var(--giltech-letter-spacing-normal);
}

/* Paragraphs & Body: 14-16px */
.giltech-site p,
.giltech-body {
	font-size: var(--giltech-size-md);
	font-weight: var(--giltech-weight-regular);
	line-height: var(--giltech-line-height-body);
	color: var(--giltech-text);
	margin-top: 0;
	margin-bottom: var(--giltech-space-4);
}

/* Small Text: 11-13px */
.giltech-site small,
.giltech-text-small {
	font-size: var(--giltech-size-sm);
	font-weight: var(--giltech-weight-medium);
	color: var(--giltech-muted);
}

/* Labels: 9-11px (Uppercase, Professional Tracking) */
.giltech-label {
	font-size: var(--giltech-size-xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--giltech-letter-spacing-wider);
	color: var(--giltech-muted);
	display: inline-block;
}

/* Eyebrow Text (Red Accent Bar + Uppercase) */
.giltech-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--giltech-space-3);
	font-size: var(--giltech-size-xs);
	font-weight: 550;
	text-transform: uppercase;
	letter-spacing: var(--giltech-letter-spacing-wider);
	color: var(--giltech-red);
	margin-bottom: var(--giltech-space-3);
}

.giltech-eyebrow::before {
	content: '';
	display: inline-block;
	width: 24px;
	height: 2px;
	background-color: var(--giltech-red);
	border-radius: var(--giltech-radius-pill);
}

/* Captions */
.giltech-caption {
	font-size: var(--giltech-size-xs);
	color: var(--giltech-muted);
	line-height: 1.4;
}

/* Navigation Links: 500-600 */
.giltech-nav-link {
	font-size: var(--giltech-size-sm);
	font-weight: 500;
	letter-spacing: var(--giltech-letter-spacing-normal);
	text-decoration: none;
	color: var(--giltech-dark);
	transition: color var(--giltech-transition-fast);
}

.giltech-nav-link:hover,
.giltech-nav-link:focus-visible {
	color: var(--giltech-blue);
}

/* ==========================================================================
   4. CONTAINER SYSTEM
   Prevents content from becoming excessively wide; responsive padding.
   ========================================================================== */

.giltech-container {
	width: 100%;
	max-width: var(--giltech-container);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--giltech-container-pad);
	padding-right: var(--giltech-container-pad);
	box-sizing: border-box;
}

.giltech-container--fluid {
	max-width: 100%;
}

.giltech-container--narrow {
	max-width: 960px;
}

.giltech-site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	position: relative;
	overflow-x: hidden;
}

/* Header & Main connection: eliminate white gap after red navigation bar */
.giltech-site-header,
#giltech-masthead,
.giltech-sticky-nav-wrapper,
.giltech-nav-bar {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
	border-bottom: none !important;
}

#giltech-sticky-nav-wrapper {
	background-color: var(--giltech-red);
}

.giltech-site-main {
	flex: 1 0 auto;
	margin-top: 0 !important;
	padding-top: 0 !important;
	padding-bottom: var(--giltech-space-11);
}

.giltech-content-area,
.giltech-entry-page {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

/* Elementor page wrapper: does not constrain full-width containers & zero top gap */
.giltech-entry-page .giltech-elementor-content,
.giltech-elementor-content {
	width: 100%;
	padding: 0 !important;
	margin: 0 !important;
}

/* Zero out top spacing for first Elementor container/section, inner flex containers, and hero widgets */
.giltech-elementor-content .elementor,
.giltech-elementor-content .elementor > .e-con:first-child,
.giltech-elementor-content .elementor > .e-con:first-child > .e-con-inner,
.giltech-elementor-content .elementor > .elementor-section:first-child,
.giltech-elementor-content .elementor > .elementor-section:first-child > .elementor-container,
.giltech-elementor-content .elementor-element.e-parent:first-child,
.giltech-elementor-content .elementor-element.e-parent:first-child > .e-con-inner,
.giltech-elementor-content .elementor > .e-con:first-child > .e-con-inner > .elementor-element:first-child,
.giltech-elementor-content .elementor > .e-con:first-child > .e-con-inner > .elementor-widget:first-child,
.giltech-elementor-content .elementor > .e-con:first-child > .e-con-inner > .elementor-widget:first-child .elementor-widget-container,
.giltech-elementor-content .elementor-widget-gwhr_premium_hero,
.giltech-elementor-content .elementor-widget-gwhr_premium_hero .elementor-widget-container,
.giltech-elementor-content .gwhr-hero {
	margin-top: 0 !important;
	margin-block-start: 0 !important;
	padding-top: 0 !important;
	padding-block-start: 0 !important;
	--padding-top: 0px !important;
	--padding-block-start: 0px !important;
	--container-default-padding-top: 0px !important;
}

/* Site-wide fallback for any Elementor page top container */
.elementor > .e-con:first-child,
.elementor > .e-con:first-child > .e-con-inner,
.elementor > .elementor-section:first-child,
.elementor > .elementor-section:first-child > .elementor-container {
	margin-top: 0 !important;
	margin-block-start: 0 !important;
	padding-top: 0 !important;
	padding-block-start: 0 !important;
	--padding-top: 0px !important;
	--padding-block-start: 0px !important;
	--container-default-padding-top: 0px !important;
}

/* Standard editorial/text pages: give title breathing room below header */
.giltech-entry-page--standard .giltech-entry-header,
.giltech-entry-page:not(.giltech-entry-page--builder) .giltech-entry-header {
	padding-top: var(--giltech-space-7, 32px);
}

/* ==========================================================================
   5. GRID SYSTEM
   Reusable CSS Grid layouts with responsive collapse.
   ========================================================================== */

.giltech-grid-2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--giltech-space-6);
}

.giltech-grid-3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--giltech-space-6);
}

.giltech-grid-4 {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--giltech-space-6);
}

/* Grid Gaps */
.giltech-gap-sm { gap: var(--giltech-space-4); }
.giltech-gap-md { gap: var(--giltech-space-6); }
.giltech-gap-lg { gap: var(--giltech-space-8); }
.giltech-gap-xl { gap: var(--giltech-space-10); }

/* Responsive Grid Collapsing */
@media (max-width: 1200px) {
	.giltech-grid-4 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 1024px) {
	.giltech-grid-4,
	.giltech-grid-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.giltech-grid-4,
	.giltech-grid-3,
	.giltech-grid-2 {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   6. SPACING SYSTEM (UTILITIES)
   ========================================================================== */

.giltech-m-0  { margin: 0 !important; }
.giltech-mt-2 { margin-top: var(--giltech-space-2) !important; }
.giltech-mt-4 { margin-top: var(--giltech-space-4) !important; }
.giltech-mt-6 { margin-top: var(--giltech-space-6) !important; }
.giltech-mt-8 { margin-top: var(--giltech-space-8) !important; }

.giltech-mb-2 { margin-bottom: var(--giltech-space-2) !important; }
.giltech-mb-4 { margin-bottom: var(--giltech-space-4) !important; }
.giltech-mb-6 { margin-bottom: var(--giltech-space-6) !important; }
.giltech-mb-8 { margin-bottom: var(--giltech-space-8) !important; }

.giltech-p-4  { padding: var(--giltech-space-4) !important; }
.giltech-p-6  { padding: var(--giltech-space-6) !important; }
.giltech-p-8  { padding: var(--giltech-space-8) !important; }

/* ==========================================================================
   7. SURFACE SYSTEM
   White, Soft Grey, Dark, Black, and Ambient Glow
   ========================================================================== */

.giltech-surface {
	background-color: var(--giltech-white);
	border: 1px solid var(--giltech-border);
	border-radius: var(--giltech-radius-lg);
	box-shadow: var(--giltech-shadow-sm);
}

.giltech-surface-soft {
	background-color: var(--giltech-bg);
	border: 1px solid var(--giltech-border);
	border-radius: var(--giltech-radius-lg);
}

.giltech-surface-dark {
	background-color: var(--giltech-dark);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--giltech-radius-lg);
	color: var(--giltech-white);
}

.giltech-surface-black {
	background-color: var(--giltech-black);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: var(--giltech-radius-lg);
	color: var(--giltech-white);
}

/* Subtle Ambient Glow for Luxury Hero & Key Sections */
.giltech-ambient-glow {
	position: relative;
	overflow: hidden;
}

.giltech-ambient-glow::before {
	content: '';
	position: absolute;
	top: -150px;
	right: -100px;
	width: 500px;
	height: 500px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(21, 95, 186, 0.04) 0%, rgba(21, 95, 186, 0) 70%);
	pointer-events: none;
	z-index: 0;
}

.giltech-ambient-glow::after {
	content: '';
	position: absolute;
	bottom: -150px;
	left: -100px;
	width: 450px;
	height: 450px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(227, 6, 19, 0.03) 0%, rgba(227, 6, 19, 0) 70%);
	pointer-events: none;
	z-index: 0;
}

/* ==========================================================================
   8. CARD SYSTEM & GLASSMORPHISM
   Base cards, dark cards, and subtle glass cards.
   ========================================================================== */

.giltech-card {
	background-color: var(--giltech-white);
	border: 1px solid var(--giltech-border);
	border-radius: var(--giltech-radius-lg);
	padding: var(--giltech-space-6);
	box-shadow: var(--giltech-shadow-sm);
	box-sizing: border-box;
	transition: transform var(--giltech-transition-fast),
	            box-shadow var(--giltech-transition-fast),
	            border-color var(--giltech-transition-fast);
}

.giltech-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--giltech-shadow-md);
	border-color: #D6D9DE;
}

/* Glass Card System (Subtle, Premium, 18px-24px blur) */
.giltech-glass,
.giltech-glass-light,
.giltech-card--glass {
	background: rgba(255, 255, 255, 0.75);
	border: 1px solid rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-radius: var(--giltech-radius-lg);
	box-shadow: var(--giltech-shadow-md);
	transition: transform var(--giltech-transition-fast),
	            box-shadow var(--giltech-transition-fast);
}

.giltech-glass:hover,
.giltech-glass-light:hover,
.giltech-card--glass:hover {
	transform: translateY(-2px);
	box-shadow: var(--giltech-shadow-lg);
}

/* Dark Glass Card */
.giltech-glass-dark {
	background: rgba(21, 23, 26, 0.78);
	border: 1px solid rgba(255, 255, 255, 0.10);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-radius: var(--giltech-radius-lg);
	color: var(--giltech-white);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.30);
	transition: transform var(--giltech-transition-fast),
	            border-color var(--giltech-transition-fast);
}

.giltech-glass-dark:hover {
	transform: translateY(-2px);
	border-color: rgba(255, 255, 255, 0.20);
}

/* Dark Card */
.giltech-card--dark {
	background-color: var(--giltech-dark);
	border: 1px solid rgba(255, 255, 255, 0.08);
	color: var(--giltech-white);
	border-radius: var(--giltech-radius-lg);
	box-shadow: var(--giltech-shadow-md);
}

.giltech-card--dark:hover {
	transform: translateY(-2px);
	border-color: rgba(255, 255, 255, 0.16);
}

/* ==========================================================================
   9. BUTTON SYSTEM
   Consistent heights (48-52px desktop, 44-46px mobile), line-height 1,
   strong weights 800-900, accessible focus states.
   ========================================================================== */

.giltech-btn,
button.giltech-btn,
input[type="submit"].giltech-btn,
.woocommerce a.button.giltech-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--giltech-space-2);
	height: 50px;
	padding: 0 var(--giltech-space-6);
	box-sizing: border-box;
	font-family: var(--giltech-font-body);
	font-size: var(--giltech-size-xs);
	font-weight: 550;
	text-transform: uppercase;
	letter-spacing: var(--giltech-letter-spacing-wide);
	line-height: 1;
	text-align: center;
	text-decoration: none;
	border-radius: var(--giltech-radius-md);
	border: 1px solid transparent;
	cursor: pointer;
	box-shadow: var(--giltech-shadow-xs);
	transition: background-color var(--giltech-transition-fast),
	            border-color var(--giltech-transition-fast),
	            transform var(--giltech-transition-fast),
	            box-shadow var(--giltech-transition-fast),
	            color var(--giltech-transition-fast);
	user-select: none;
	-webkit-appearance: none;
	white-space: nowrap;
}

/* Primary Button: Blue #155FBA */
.giltech-btn--primary {
	background-color: var(--giltech-blue);
	border-color: var(--giltech-blue);
	color: var(--giltech-white) !important;
}

.giltech-btn--primary:hover {
	background-color: var(--giltech-blue-hover);
	border-color: var(--giltech-blue-hover);
	color: var(--giltech-white) !important;
	transform: translateY(-2px);
	box-shadow: var(--giltech-shadow-md);
}

/* Secondary Button: Red #E30613 */
.giltech-btn--secondary {
	background-color: var(--giltech-red);
	border-color: var(--giltech-red);
	color: var(--giltech-white) !important;
}

.giltech-btn--secondary:hover {
	background-color: var(--giltech-red-hover);
	border-color: var(--giltech-red-hover);
	color: var(--giltech-white) !important;
	transform: translateY(-2px);
	box-shadow: var(--giltech-shadow-md);
}

/* Dark Button: #090A0C */
.giltech-btn--dark {
	background-color: var(--giltech-black);
	border-color: var(--giltech-black);
	color: var(--giltech-white) !important;
}

.giltech-btn--dark:hover {
	background-color: var(--giltech-dark-hover);
	border-color: var(--giltech-dark-hover);
	color: var(--giltech-white) !important;
	transform: translateY(-2px);
	box-shadow: var(--giltech-shadow-md);
}

/* White Button: #FFFFFF */
.giltech-btn--white {
	background-color: var(--giltech-white);
	border-color: var(--giltech-border);
	color: var(--giltech-dark) !important;
}

.giltech-btn--white:hover {
	background-color: var(--giltech-white-hover);
	border-color: #D6D9DE;
	color: var(--giltech-black) !important;
	transform: translateY(-2px);
	box-shadow: var(--giltech-shadow-md);
}

/* Outline Variants */
.giltech-btn--outline-blue {
	background-color: transparent;
	border: 2px solid var(--giltech-blue);
	color: var(--giltech-blue) !important;
}

.giltech-btn--outline-blue:hover {
	background-color: var(--giltech-blue);
	color: var(--giltech-white) !important;
	transform: translateY(-2px);
	box-shadow: var(--giltech-shadow-md);
}

.giltech-btn--outline-red {
	background-color: transparent;
	border: 2px solid var(--giltech-red);
	color: var(--giltech-red) !important;
}

.giltech-btn--outline-red:hover {
	background-color: var(--giltech-red);
	color: var(--giltech-white) !important;
	transform: translateY(-2px);
	box-shadow: var(--giltech-shadow-md);
}

.giltech-btn--outline-white {
	background-color: transparent;
	border: 2px solid var(--giltech-white);
	color: var(--giltech-white) !important;
}

.giltech-btn--outline-white:hover {
	background-color: var(--giltech-white);
	color: var(--giltech-black) !important;
	transform: translateY(-2px);
	box-shadow: var(--giltech-shadow-md);
}

/* Sizes */
.giltech-btn--sm {
	height: 38px;
	padding: 0 var(--giltech-space-4);
	font-size: 10px;
	border-radius: var(--giltech-radius-sm);
}

.giltech-btn--lg {
	height: 56px;
	padding: 0 var(--giltech-space-8);
	font-size: var(--giltech-size-sm);
	border-radius: var(--giltech-radius-md);
}

/* Active & Disabled */
.giltech-btn:active,
button.giltech-btn:active,
input[type="submit"].giltech-btn:active {
	transform: translateY(0);
	box-shadow: var(--giltech-shadow-xs);
}

.giltech-btn:disabled,
.giltech-btn[aria-disabled="true"],
button.giltech-btn:disabled,
input[type="submit"].giltech-btn:disabled {
	opacity: 0.55;
	cursor: not-allowed;
	pointer-events: none;
	transform: none;
	box-shadow: none;
}

/* Accessible Focus State */
.giltech-btn:focus-visible,
button.giltech-btn:focus-visible,
input[type="submit"].giltech-btn:focus-visible {
	outline: 2px solid var(--giltech-blue);
	outline-offset: 3px;
	box-shadow: var(--giltech-blue-glow);
}

/* ==========================================================================
   10. FORM SYSTEM
   Standardized inputs (46-50px), focus glows, error/success states, dark form.
   ========================================================================== */

.giltech-form-group {
	margin-bottom: var(--giltech-space-5);
	position: relative;
}

.giltech-form-label {
	display: block;
	font-size: var(--giltech-size-xs);
	font-weight: 500;
	color: var(--giltech-dark);
	margin-bottom: var(--giltech-space-2);
	letter-spacing: var(--giltech-letter-spacing-normal);
}

.giltech-input,
.giltech-select,
.giltech-textarea,
.giltech-site input[type="text"],
.giltech-site input[type="email"],
.giltech-site input[type="tel"],
.giltech-site input[type="password"],
.giltech-site input[type="search"],
.giltech-site input[type="number"],
.giltech-site select,
.giltech-site textarea {
	width: 100%;
	height: 48px;
	padding: 0 var(--giltech-space-4);
	box-sizing: border-box;
	font-family: var(--giltech-font-body);
	font-size: var(--giltech-size-md);
	color: var(--giltech-text);
	background-color: var(--giltech-white);
	border: 1px solid var(--giltech-border);
	border-radius: var(--giltech-radius-md);
	outline: none;
	transition: border-color var(--giltech-transition-fast),
	            box-shadow var(--giltech-transition-fast),
	            background-color var(--giltech-transition-fast);
}

.giltech-textarea,
.giltech-site textarea {
	height: auto;
	min-height: 120px;
	padding: var(--giltech-space-3) var(--giltech-space-4);
	line-height: 1.5;
	resize: vertical;
}

/* Input Focus State: Blue #155FBA + subtle glow */
.giltech-input:focus,
.giltech-select:focus,
.giltech-textarea:focus,
.giltech-site input[type="text"]:focus,
.giltech-site input[type="email"]:focus,
.giltech-site input[type="tel"]:focus,
.giltech-site input[type="password"]:focus,
.giltech-site input[type="search"]:focus,
.giltech-site input[type="number"]:focus,
.giltech-site select:focus,
.giltech-site textarea:focus {
	border-color: var(--giltech-blue);
	box-shadow: var(--giltech-blue-glow);
}

/* Input Error State: Red #E30613 */
.giltech-input--error,
.giltech-site input.error {
	border-color: var(--giltech-red) !important;
	box-shadow: var(--giltech-red-glow) !important;
}

/* Input Success State: #2D8B59 */
.giltech-input--success {
	border-color: var(--giltech-success) !important;
	box-shadow: var(--giltech-success-glow) !important;
}

/* Helper, Error, and Success Messages */
.giltech-form-helper {
	display: block;
	font-size: var(--giltech-size-xs);
	color: var(--giltech-muted);
	margin-top: var(--giltech-space-1);
}

.giltech-form-error {
	display: block;
	font-size: var(--giltech-size-xs);
	font-weight: var(--giltech-weight-semibold);
	color: var(--giltech-red);
	margin-top: var(--giltech-space-1);
}

.giltech-form-success {
	display: block;
	font-size: var(--giltech-size-xs);
	font-weight: var(--giltech-weight-semibold);
	color: var(--giltech-success);
	margin-top: var(--giltech-space-1);
}

/* Custom Checkbox & Radio */
.giltech-checkbox,
.giltech-radio {
	display: inline-flex;
	align-items: center;
	gap: var(--giltech-space-3);
	cursor: pointer;
	font-size: var(--giltech-size-sm);
	user-select: none;
}

.giltech-checkbox input,
.giltech-radio input {
	appearance: none;
	width: 20px;
	height: 20px;
	margin: 0;
	border: 1px solid var(--giltech-border);
	border-radius: var(--giltech-radius-sm);
	background: var(--giltech-white);
	cursor: pointer;
	display: inline-grid;
	place-content: center;
	transition: all var(--giltech-transition-fast);
}

.giltech-radio input {
	border-radius: 50%;
}

.giltech-checkbox input:checked,
.giltech-radio input:checked {
	background-color: var(--giltech-blue);
	border-color: var(--giltech-blue);
}

.giltech-checkbox input:checked::before {
	content: '';
	width: 10px;
	height: 6px;
	border-left: 2px solid #FFFFFF;
	border-bottom: 2px solid #FFFFFF;
	transform: rotate(-45deg) translate(1px, -1px);
}

.giltech-radio input:checked::before {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #FFFFFF;
}

/* Dark Form Variant */
.giltech-form--dark,
.giltech-surface-dark form,
.giltech-section-dark form {
	color: var(--giltech-white);
}

.giltech-form--dark .giltech-form-label,
.giltech-surface-dark form .giltech-form-label,
.giltech-section-dark form .giltech-form-label {
	color: var(--giltech-white);
}

.giltech-form--dark input,
.giltech-form--dark textarea,
.giltech-form--dark select,
.giltech-surface-dark form input,
.giltech-surface-dark form textarea,
.giltech-section-dark form input,
.giltech-section-dark form textarea {
	background-color: var(--giltech-dark);
	border-color: rgba(255, 255, 255, 0.15);
	color: var(--giltech-white);
}

.giltech-form--dark input:focus,
.giltech-form--dark textarea:focus,
.giltech-surface-dark form input:focus,
.giltech-section-dark form input:focus {
	border-color: var(--giltech-blue);
	box-shadow: var(--giltech-blue-glow);
}

/* ==========================================================================
   11. BADGE SYSTEM
   Small, elegant, professional industrial badges.
   ========================================================================== */

.giltech-badge,
.giltech-badge-neutral,
.giltech-badge-red,
.giltech-badge-blue,
.giltech-badge-success {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 26px;
	padding: 0 var(--giltech-space-3);
	font-family: var(--giltech-font-body);
	font-size: 10px;
	font-weight: 550;
	text-transform: uppercase;
	letter-spacing: var(--giltech-letter-spacing-wide);
	border-radius: var(--giltech-radius-sm);
	border: 1px solid transparent;
	line-height: 1;
	white-space: nowrap;
}

/* Neutral */
.giltech-badge-neutral {
	background-color: var(--giltech-bg);
	border-color: var(--giltech-border);
	color: var(--giltech-dark);
}

/* Red (Accent / High Priority / Alert) */
.giltech-badge-red {
	background-color: var(--giltech-red-subtle);
	border-color: rgba(227, 6, 19, 0.20);
	color: var(--giltech-red);
}

.giltech-badge-red--solid {
	background-color: var(--giltech-red);
	border-color: var(--giltech-red);
	color: var(--giltech-white);
}

/* Blue (Active / Featured) */
.giltech-badge-blue {
	background-color: var(--giltech-blue-subtle);
	border-color: rgba(21, 95, 186, 0.20);
	color: var(--giltech-blue);
}

.giltech-badge-blue--solid {
	background-color: var(--giltech-blue);
	border-color: var(--giltech-blue);
	color: var(--giltech-white);
}

/* Success (Verified / In Stock) */
.giltech-badge-success {
	background-color: var(--giltech-success-subtle);
	border-color: rgba(45, 139, 89, 0.22);
	color: var(--giltech-success);
}

/* ==========================================================================
   12. LINK SYSTEM
   ========================================================================== */

.giltech-site a {
	color: var(--giltech-blue);
	text-decoration: none;
	transition: color var(--giltech-transition-fast),
	            opacity var(--giltech-transition-fast);
}

.giltech-site a:hover {
	color: var(--giltech-blue-hover);
}

/* Dedicated Class for Explicit Interactive Links */
.giltech-link {
	color: var(--giltech-blue);
	font-weight: var(--giltech-weight-semibold);
	display: inline-flex;
	align-items: center;
	gap: var(--giltech-space-2);
}

.giltech-link:hover {
	color: var(--giltech-blue-hover);
}

/* Important Brand Links: Red #E30613 */
.giltech-link-red {
	color: var(--giltech-red);
	font-weight: 550;
}

.giltech-link-red:hover {
	color: var(--giltech-red-hover);
}

/* ==========================================================================
   13. SECTION SYSTEM & DARK SECTIONS
   Balanced Black + White + Red + Blue surfaces.
   ========================================================================== */

.giltech-section {
	padding-top: var(--giltech-space-10);
	padding-bottom: var(--giltech-space-10);
	position: relative;
}

.giltech-section--lg {
	padding-top: var(--giltech-space-12);
	padding-bottom: var(--giltech-space-12);
}

.giltech-section-header {
	margin-bottom: var(--giltech-space-8);
}

.giltech-section-header--center {
	text-align: center;
}

.giltech-section-header--center .giltech-eyebrow {
	justify-content: center;
}

.giltech-section-title {
	font-size: clamp(20px, 2.2vw, 28px);
	font-weight: 600;
	margin-bottom: var(--giltech-space-3);
}

.giltech-section-description {
	max-width: 680px;
	font-size: var(--giltech-size-md);
	line-height: var(--giltech-line-height-body);
	color: var(--giltech-muted);
	margin-bottom: 0;
}

.giltech-section-header--center .giltech-section-description {
	margin-left: auto;
	margin-right: auto;
}

/* Dark Section System (Footer, CTA, Enquiry Panels) */
.giltech-section-dark {
	background-color: var(--giltech-black);
	color: var(--giltech-white);
}

.giltech-section-dark h1,
.giltech-section-dark h2,
.giltech-section-dark h3,
.giltech-section-dark h4 {
	color: var(--giltech-white);
}

.giltech-section-dark p {
	color: var(--giltech-white);
}

.giltech-section-dark .giltech-section-description,
.giltech-section-dark .giltech-muted-text {
	color: var(--giltech-dark-muted);
}

.giltech-section-dark .giltech-card {
	background-color: var(--giltech-dark);
	border-color: rgba(255, 255, 255, 0.08);
	color: var(--giltech-white);
}

/* ==========================================================================
   14. DIVIDERS, IMAGES & ICON UTILITIES
   ========================================================================== */

/* Dividers */
.giltech-divider {
	border: 0;
	height: 1px;
	background-color: var(--giltech-border);
	margin: var(--giltech-space-8) 0;
}

.giltech-divider--strong {
	background-color: #CCD0D5;
}

/* Accent Divider: Gradient RED #E30613 -> BLUE #155FBA */
.giltech-divider--accent {
	border: 0;
	height: 3px;
	width: 72px;
	background: linear-gradient(90deg, var(--giltech-red) 0%, var(--giltech-blue) 100%);
	border-radius: var(--giltech-radius-pill);
	margin: var(--giltech-space-4) 0;
}

/* Image Utilities */
.giltech-img-contain {
	object-fit: contain;
}

.giltech-img-cover {
	object-fit: cover;
}

.giltech-img-rounded {
	border-radius: var(--giltech-radius-md);
}

.giltech-img-hover {
	transition: transform var(--giltech-transition-base);
}

.giltech-img-hover:hover {
	transform: scale(1.02);
}

/* Line Icon System */
.giltech-icon {
	display: inline-block;
	vertical-align: middle;
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex-shrink: 0;
	transition: transform var(--giltech-transition-fast),
	            color var(--giltech-transition-fast);
}

.giltech-icon--sm { width: 16px; height: 16px; }
.giltech-icon--md { width: 20px; height: 20px; }
.giltech-icon--lg { width: 24px; height: 24px; }
.giltech-icon--xl { width: 32px; height: 32px; }

.giltech-icon--red   { color: var(--giltech-red); }
.giltech-icon--blue  { color: var(--giltech-blue); }
.giltech-icon--dark  { color: var(--giltech-dark); }
.giltech-icon--white { color: var(--giltech-white); }

/* ==========================================================================
   15. ACCESSIBILITY & FOCUS SYSTEM
   ========================================================================== */

/* Skip Link */
.giltech-skip-link {
	position: absolute;
	top: -9999px;
	left: var(--giltech-space-4);
	background: var(--giltech-black);
	color: var(--giltech-white);
	padding: var(--giltech-space-3) var(--giltech-space-6);
	font-weight: 500;
	font-size: var(--giltech-size-sm);
	z-index: 100000;
	border-radius: var(--giltech-radius-sm);
	box-shadow: var(--giltech-shadow-xl);
	text-decoration: none;
	transition: top var(--giltech-transition-fast);
}

.giltech-skip-link:focus {
	top: var(--giltech-space-4);
	color: var(--giltech-white);
	outline: 2px solid var(--giltech-red);
	outline-offset: 3px;
}

/* Screen reader text */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--giltech-white);
	border-radius: var(--giltech-radius-sm);
	box-shadow: var(--giltech-shadow-md);
	clip: auto !important;
	clip-path: none;
	color: var(--giltech-dark);
	display: block;
	font-size: var(--giltech-size-sm);
	font-weight: 500;
	height: auto;
	left: var(--giltech-space-4);
	line-height: normal;
	padding: var(--giltech-space-4) var(--giltech-space-6);
	text-decoration: none;
	top: var(--giltech-space-4);
	width: auto;
	z-index: 100000;
}

/* Global Focus-Visible Styling: BLUE #155FBA with accessible outline */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--giltech-blue);
	outline-offset: 2px;
}

/* Reduced Motion Safety */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.giltech-card:hover,
	.giltech-btn:hover,
	.giltech-glass:hover {
		transform: none !important;
	}
}

/* ==========================================================================
   16. RESPONSIVE BEHAVIOR
   Breakpoints: 320px, 360px, 480px, 640px, 768px, 1024px, 1280px, 1400px
   Zero horizontal overflow; adaptive button padding & container paddings.
   ========================================================================== */

@media (max-width: 1024px) {
	:root {
		--giltech-container-pad: 24px;
	}
	.giltech-section {
		padding-top: var(--giltech-space-8);
		padding-bottom: var(--giltech-space-8);
	}
}

@media (max-width: 768px) {
	:root {
		--giltech-container-pad: 16px;
	}
	.giltech-btn,
	button.giltech-btn,
	input[type="submit"].giltech-btn {
		height: 46px;
		padding: 0 var(--giltech-space-5);
	}
	.giltech-section {
		padding-top: var(--giltech-space-7);
		padding-bottom: var(--giltech-space-7);
	}
}

@media (max-width: 480px) {
	:root {
		--giltech-container-pad: 14px;
	}
	.giltech-btn,
	button.giltech-btn,
	input[type="submit"].giltech-btn {
		height: 44px;
		padding: 0 var(--giltech-space-4);
		font-size: 10px;
	}
}