/* ==========================================================================
   Granti Impex — component stylesheet
   --------------------------------------------------------------------------
   Every class here maps to one Elementor widget or one theme part. The design
   used inline styles; those have been lifted into classes so the same markup
   is reusable, themeable through the CSS variables below, and responsive.

   Breakpoints
     1100px  primary nav collapses into the drawer
     1024px  tablet: multi-column grids step down
      767px  mobile: everything stacks
      479px  small phones: tighter type and padding
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
	--gi-navy: #16233f;
	--gi-navy-2: #1d2f55;
	--gi-navy-deep: #101a30;
	--gi-red: #d71920;
	--gi-accent: #ff5b62;
	--gi-grey: #f5f6f9;

	--gi-text: #4a5570;
	--gi-muted: #6a7391;
	--gi-faint: #8b93a7;
	--gi-ghost: #9aa2b5;

	--gi-line: #e2e5ee;
	--gi-line-2: #e7e9ef;
	--gi-line-3: #d5d9e4;
	--gi-line-4: #d9dde8;
	--gi-tint: #eef0f5;
	--gi-tint-2: #e9ecf2;

	--gi-container: 1280px;
	--gi-gutter: 32px;

	--gi-head: "Barlow Condensed", "Arial Narrow", sans-serif;
	--gi-body: Archivo, Helvetica, Arial, sans-serif;

	--gi-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body.gi-body {
	margin: 0;
	font-family: var(--gi-body);
	background: #ffffff;
	color: var(--gi-navy);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

.gi-body a {
	color: var(--gi-red);
	text-decoration: none;
}

.gi-body a:hover {
	color: var(--gi-navy);
}

.gi-body h1,
.gi-body h2,
.gi-body h3,
.gi-body h4,
.gi-body h5,
.gi-body h6 {
	margin: 0;
	font-weight: 700;
}

.gi-body p {
	margin: 0;
}

.gi-body img {
	max-width: 100%;
	height: auto;
}

.gi-body ul,
.gi-body ol {
	margin: 0;
	padding: 0;
}

.gi-body :focus-visible {
	outline: 3px solid var(--gi-red);
	outline-offset: 2px;
}

.gi-container {
	max-width: var(--gi-container);
	margin: 0 auto;
	padding-left: var(--gi-gutter);
	padding-right: var(--gi-gutter);
	width: 100%;
}

.gi-main {
	display: block;
}

/* Elementor strips its own container padding on our full-bleed sections. */
.gi-body .elementor-section.elementor-section-boxed > .elementor-container {
	max-width: none;
}

/* --------------------------------------------------------------------------
   3. Type utilities
   -------------------------------------------------------------------------- */

.gi-eyebrow {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gi-red);
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

.gi-eyebrow--light {
	color: var(--gi-accent);
}

.gi-eyebrow__rule {
	width: 34px;
	height: 2px;
	background: currentColor;
	flex: none;
	display: inline-block;
}

.gi-h2 {
	font-family: var(--gi-head);
	font-style: italic;
	font-weight: 800;
	font-size: clamp(38px, 4.2vw, 54px);
	line-height: 1.02;
	text-transform: uppercase;
	text-wrap: balance;
}

.gi-lead {
	font-size: 17.5px;
	line-height: 1.75;
	color: var(--gi-text);
	text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */

.gi-btn {
	display: inline-block;
	padding: 17px 32px;
	font-family: var(--gi-body);
	font-weight: 700;
	font-size: 13.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-align: center;
	border: 0;
	cursor: pointer;
	transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.gi-btn--red {
	background: var(--gi-red);
	color: #ffffff;
}

.gi-btn--red:hover {
	background: var(--gi-navy);
	color: #ffffff;
	transform: translateY(-2px);
}

.gi-btn--red-invert:hover {
	background: #ffffff;
	color: var(--gi-navy);
	transform: translateY(-3px);
}

.gi-btn--navy {
	background: var(--gi-navy);
	color: #ffffff;
}

.gi-btn--navy:hover {
	background: var(--gi-red);
	color: #ffffff;
	transform: translateY(-2px);
}

.gi-btn--white {
	background: #ffffff;
	color: var(--gi-navy);
}

.gi-btn--white:hover {
	background: var(--gi-navy);
	color: #ffffff;
	transform: translateY(-3px);
}

.gi-btn--ghost-light {
	border: 1px solid rgba(255, 255, 255, 0.35);
	color: #ffffff;
}

.gi-btn--ghost-light:hover {
	background: rgba(255, 255, 255, 0.14);
	border-color: #ffffff;
	color: #ffffff;
}

.gi-btn--ghost-dark {
	border: 1px solid var(--gi-navy);
	color: var(--gi-navy);
}

.gi-btn--ghost-dark:hover {
	background: var(--gi-navy);
	color: #ffffff;
}

.gi-btn--underline {
	padding: 0 0 4px;
	border-bottom: 2px solid var(--gi-red);
	color: var(--gi-navy);
}

.gi-btn--underline:hover {
	color: var(--gi-red);
	background: none;
}

.gi-btn--underline-light {
	padding: 0 0 4px;
	border-bottom: 2px solid var(--gi-red);
	color: #ffffff;
}

.gi-btn--underline-light:hover {
	color: var(--gi-accent);
}

.gi-btn--sm {
	padding: 14px 26px;
	font-size: 13px;
}

.gi-btn--lg {
	padding: 18px 34px;
	font-size: 14px;
}

.gi-btn--block {
	display: block;
	width: 100%;
}

/* --------------------------------------------------------------------------
   5. Reveal animation
   -------------------------------------------------------------------------- */

@keyframes gi-fadeup {
	from {
		opacity: 0;
		transform: translateY(26px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes gi-marquee {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

@keyframes gi-slowzoom {
	from {
		transform: scale(1.04);
	}
	to {
		transform: scale(1.14);
	}
}

[data-gi-reveal] {
	animation: gi-fadeup 0.8s var(--gi-ease) both;
}

@supports (animation-timeline: view()) {
	[data-gi-reveal] {
		animation-timeline: view();
		animation-range: entry 0% entry 55%;
	}
}

/* Inside the Elementor editor the scroll-linked animation reads as blank
   content, so freeze everything visible. */
.elementor-editor-active [data-gi-reveal],
.elementor-editor-preview [data-gi-reveal] {
	animation: none;
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	[data-gi-reveal] {
		animation: none;
		opacity: 1;
		transform: none;
	}

	.gi-marquee__track,
	.gi-hero__img {
		animation: none !important;
	}
}

/* --------------------------------------------------------------------------
   6. Header — top bar
   -------------------------------------------------------------------------- */

.gi-topbar {
	background: var(--gi-navy);
	color: rgba(255, 255, 255, 0.82);
	font-size: 12.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.gi-topbar__inner {
	padding-top: 10px;
	padding-bottom: 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	align-items: center;
	justify-content: space-between;
}

.gi-topbar__left {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	align-items: center;
}

.gi-topbar a {
	color: rgba(255, 255, 255, 0.82);
}

.gi-topbar a:hover {
	color: #ffffff;
}

.gi-topbar__sep {
	opacity: 0.35;
}

.gi-topbar__right {
	display: flex;
	align-items: center;
	gap: 10px;
	color: #ffffff;
}

.gi-topbar__dot {
	width: 7px;
	height: 7px;
	background: var(--gi-red);
	border-radius: 50%;
	display: inline-block;
	flex: none;
}

/* --------------------------------------------------------------------------
   7. Header — bar, logo, nav
   -------------------------------------------------------------------------- */

.gi-header {
	background: #ffffff;
	border-bottom: 1px solid var(--gi-line-2);
	position: relative;
	z-index: 60;
}

.gi-header--sticky {
	position: sticky;
	top: 0;
}

/* Elementor / WP admin bar offset. */
.admin-bar .gi-header--sticky {
	top: 32px;
}

.gi-header__inner {
	padding-top: 14px;
	padding-bottom: 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
}

.gi-header__logo {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: none;
}

.gi-header__logo img {
	height: 54px;
	width: auto;
	display: block;
	mix-blend-mode: multiply;
}

.gi-logo-text {
	font-family: var(--gi-head);
	font-style: italic;
	font-weight: 800;
	font-size: 32px;
	line-height: 1;
	text-transform: uppercase;
	color: var(--gi-navy);
}

.gi-nav {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 18px 26px;
	min-width: 0;
}

.gi-nav__list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: 18px 26px;
	margin: 0;
	padding: 0;
}

.gi-nav__item {
	position: relative;
	list-style: none;
}

.gi-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gi-navy);
	padding: 6px 0;
	border-bottom: 2px solid transparent;
	transition: color 0.25s ease, border-color 0.25s ease;
}

.gi-nav__link:hover,
.gi-nav__item.is-current > .gi-nav__link,
.gi-nav__item.is-open > .gi-nav__link {
	color: var(--gi-red);
	border-bottom-color: var(--gi-red);
}

.gi-nav__caret {
	font-size: 9px;
	transition: transform 0.25s ease;
}

.gi-nav__item.is-open > .gi-nav__link .gi-nav__caret {
	transform: rotate(180deg);
}

.gi-nav__cta {
	flex: none;
}

.gi-nav__toggle {
	display: none;
}

/* Conventional dropdown for any non-mega parent. */
.gi-nav__sub {
	list-style: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 230px;
	background: #ffffff;
	border: 1px solid var(--gi-line-2);
	border-top: 3px solid var(--gi-red);
	box-shadow: 0 24px 40px -26px rgba(22, 35, 63, 0.5);
	padding: 8px 0;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
	z-index: 70;
}

.gi-nav__item--parent:hover > .gi-nav__sub,
.gi-nav__item--parent.is-open > .gi-nav__sub {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.gi-nav__sublink {
	display: block;
	padding: 11px 20px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--gi-navy);
	transition: background 0.2s ease, color 0.2s ease;
}

.gi-nav__sublink:hover {
	background: var(--gi-grey);
	color: var(--gi-red);
}

.gi-burger {
	display: none;
	background: none;
	border: 1px solid var(--gi-line-3);
	padding: 12px;
	cursor: pointer;
	line-height: 0;
}

.gi-burger__bars {
	display: inline-block;
	width: 22px;
}

.gi-burger__bars span {
	display: block;
	height: 2px;
	background: var(--gi-navy);
	transition: transform 0.25s ease, opacity 0.2s ease;
}

.gi-burger__bars span + span {
	margin-top: 5px;
}

.gi-burger[aria-expanded="true"] .gi-burger__bars span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.gi-burger[aria-expanded="true"] .gi-burger__bars span:nth-child(2) {
	opacity: 0;
}

.gi-burger[aria-expanded="true"] .gi-burger__bars span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

.gi-nav-scrim {
	position: fixed;
	inset: 0;
	background: rgba(22, 35, 63, 0.45);
	z-index: 55;
	opacity: 0;
	transition: opacity 0.28s ease;
	pointer-events: none;
}

.gi-nav-scrim.is-visible {
	opacity: 1;
	pointer-events: auto;
}

/* --------------------------------------------------------------------------
   8. Mega menu
   -------------------------------------------------------------------------- */

.gi-mega {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	background: #ffffff;
	border-bottom: 4px solid var(--gi-red);
	box-shadow: 0 28px 44px -26px rgba(22, 35, 63, 0.5);
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	pointer-events: none;
	transition: max-height 0.38s var(--gi-ease), opacity 0.28s ease;
	z-index: 65;
}

/* Break the panel out of the nav and span the header instead. */
.gi-header .gi-nav__item--mega {
	position: static;
}

.gi-nav__item--mega.is-open > .gi-mega {
	max-height: 680px;
	opacity: 1;
	pointer-events: auto;
}

.gi-mega__inner {
	max-width: var(--gi-container);
	margin: 0 auto;
	padding: 34px var(--gi-gutter) 30px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 26px 28px;
}

.gi-mega__card {
	display: flex;
	gap: 16px;
	align-items: center;
	padding: 12px;
	border: 1px solid var(--gi-line-2);
	transition: border-color 0.28s ease, transform 0.28s ease, background 0.28s ease;
}

.gi-mega__card:hover {
	border-color: var(--gi-red);
	background: #faf7f7;
	transform: translateY(-3px);
}

.gi-mega__thumb {
	width: 52px;
	height: 52px;
	flex: none;
	background: var(--gi-red);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.gi-mega__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: 0.92;
}

.gi-mega__text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.gi-mega__title {
	font-family: var(--gi-head);
	font-weight: 700;
	font-size: 20px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--gi-navy);
}

.gi-mega__sub {
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
	color: var(--gi-muted);
}

.gi-mega__promo {
	grid-column: span 2;
	background: var(--gi-navy);
	color: #ffffff;
	padding: 26px 28px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 18px;
}

.gi-mega__promo-heading {
	font-family: var(--gi-head);
	font-style: italic;
	font-weight: 800;
	font-size: 24px;
	line-height: 1.05;
	text-transform: uppercase;
}

.gi-mega__promo-btn {
	background: var(--gi-red);
	color: #ffffff;
	text-align: center;
	padding: 12px 16px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	transition: background 0.25s ease, color 0.25s ease;
}

.gi-mega__promo-btn:hover {
	background: #ffffff;
	color: var(--gi-navy);
}

/* --------------------------------------------------------------------------
   9. Hero (home)
   -------------------------------------------------------------------------- */

.gi-hero {
	position: relative;
	background: var(--gi-navy);
	color: #ffffff;
	overflow: hidden;
}

.gi-hero__media {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 52%;
	overflow: hidden;
	border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.gi-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	animation: gi-slowzoom 26s ease-in-out infinite alternate;
}

.gi-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, var(--gi-navy) 0%, rgba(22, 35, 63, 0.78) 26%, rgba(22, 35, 63, 0.22) 100%);
}

.gi-hero__inner {
	position: relative;
	padding-top: 80px;
	padding-bottom: 80px;
}

.gi-hero__copy {
	max-width: min(720px, calc(54% - 56px));
}

.gi-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: var(--gi-red);
	padding: 9px 18px;
	font-family: var(--gi-head);
	font-style: italic;
	font-weight: 800;
	font-size: 17px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.gi-hero__title {
	margin-top: 26px;
	font-family: var(--gi-head);
	font-style: italic;
	font-weight: 800;
	font-size: clamp(46px, 5.6vw, 84px);
	line-height: 0.94;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	text-wrap: balance;
}

.gi-hero__text {
	margin-top: 26px;
	font-size: 19px;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.78);
	max-width: 560px;
	text-wrap: pretty;
}

.gi-hero__actions {
	margin-top: 40px;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.gi-hero__stats {
	position: relative;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(0, 0, 0, 0.18);
}

.gi-hero__stats-inner {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	padding-top: 0;
	padding-bottom: 0;
}

.gi-hero__stat {
	padding: 30px 28px;
	border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.gi-hero__stat:first-child {
	padding-left: 0;
}

.gi-hero__stat:last-child {
	padding-right: 0;
	border-right: 0;
}

.gi-hero__stat-value {
	font-family: var(--gi-head);
	font-style: italic;
	font-weight: 800;
	font-size: 40px;
	line-height: 1.1;
	color: #ffffff;
}

.gi-hero__stat-label {
	font-size: 12.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
	margin-top: 4px;
}

/* --------------------------------------------------------------------------
   10. Marquee
   -------------------------------------------------------------------------- */

.gi-marquee {
	background: var(--gi-red);
	color: #ffffff;
	overflow: hidden;
	padding: 15px 0;
}

.gi-marquee__track {
	display: flex;
	width: max-content;
	animation: gi-marquee var(--gi-marquee-speed, 32s) linear infinite;
	font-family: var(--gi-head);
	font-style: italic;
	font-weight: 800;
	font-size: 22px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.gi-marquee__group {
	display: flex;
	gap: 42px;
	padding-right: 42px;
	align-items: center;
}

.gi-marquee__sep {
	opacity: 0.5;
}

/* --------------------------------------------------------------------------
   11. Inner page hero
   -------------------------------------------------------------------------- */

.gi-pagehero {
	position: relative;
	background: var(--gi-navy);
	color: #ffffff;
	overflow: hidden;
}

.gi-pagehero__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.gi-pagehero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	animation: gi-slowzoom 30s ease-in-out infinite alternate;
}

.gi-pagehero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, var(--gi-navy) 0%, rgba(22, 35, 63, 0.9) 45%, rgba(22, 35, 63, 0.55) 100%);
}

.gi-pagehero__ring {
	position: absolute;
	top: -90px;
	right: -70px;
	width: 420px;
	height: 420px;
	border: 60px solid rgba(215, 25, 32, 0.16);
	border-radius: 50%;
	pointer-events: none;
}

.gi-pagehero > .gi-container {
	position: relative;
	padding-top: 92px;
	padding-bottom: 96px;
}

.gi-pagehero--plain {
	padding: 0;
}

.gi-pagehero__crumbs {
	font-size: 12.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}

.gi-pagehero__crumbs a {
	color: rgba(255, 255, 255, 0.6);
}

.gi-pagehero__crumbs a:hover {
	color: #ffffff;
}

.gi-pagehero__crumb-sep {
	padding: 0 8px;
	opacity: 0.6;
}

.gi-pagehero__badge {
	margin-top: 22px;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: var(--gi-red);
	padding: 8px 16px;
	font-family: var(--gi-head);
	font-style: italic;
	font-weight: 800;
	font-size: 15px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.gi-pagehero__title {
	margin-top: 18px;
	font-family: var(--gi-head);
	font-style: italic;
	font-weight: 800;
	font-size: clamp(44px, 5.4vw, 78px);
	line-height: 0.95;
	text-transform: uppercase;
	max-width: 820px;
	text-wrap: balance;
}

.gi-pagehero__text {
	margin-top: 22px;
	font-size: 18.5px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.8);
	max-width: 620px;
	text-wrap: pretty;
}

.gi-pagehero__actions {
	margin-top: 34px;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.gi-pagehero__chips {
	margin-top: 36px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.gi-pagehero__chip {
	border: 1px solid rgba(255, 255, 255, 0.32);
	color: #ffffff;
	padding: 11px 20px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	transition: background 0.25s ease, border-color 0.25s ease;
}

.gi-pagehero__chip:hover {
	background: var(--gi-red);
	border-color: var(--gi-red);
	color: #ffffff;
}

/* --------------------------------------------------------------------------
   12. Generic section shell (used by every widget)
   -------------------------------------------------------------------------- */

.gi-section {
	padding-top: 112px;
	padding-bottom: 118px;
	position: relative;
}

.gi-section--white {
	background: #ffffff;
}

.gi-section--grey {
	background: var(--gi-grey);
}

.gi-section--navy {
	background: var(--gi-navy);
	color: #ffffff;
	overflow: hidden;
}

.gi-section--tight {
	padding-top: 76px;
	padding-bottom: 80px;
}

.gi-section--flush-top {
	padding-top: 0;
}

.gi-section--flush-bottom {
	padding-bottom: 0;
}

.gi-section__rule {
	position: absolute;
	top: 0;
	left: 0;
	width: 42%;
	height: 6px;
	background: var(--gi-red);
}

/* --------------------------------------------------------------------------
   13. Section heading widget
   -------------------------------------------------------------------------- */

.gi-heading {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
	flex-wrap: wrap;
}

.gi-heading--stacked {
	display: block;
}

.gi-heading__main {
	max-width: 640px;
}

.gi-heading__title {
	margin-top: 18px;
	font-family: var(--gi-head);
	font-style: italic;
	font-weight: 800;
	font-size: clamp(38px, 4.2vw, 54px);
	line-height: 1.02;
	text-transform: uppercase;
	color: inherit;
	text-wrap: balance;
}

.gi-section--navy .gi-heading__title,
.gi-section--navy .gi-h2 {
	color: #ffffff;
}

.gi-heading__side {
	max-width: 420px;
	font-size: 16.5px;
	line-height: 1.7;
	color: var(--gi-text);
	text-wrap: pretty;
}

.gi-section--navy .gi-heading__side {
	color: rgba(255, 255, 255, 0.75);
}

/* --------------------------------------------------------------------------
   14. Split content (About / overview blocks)
   -------------------------------------------------------------------------- */

.gi-split {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: 88px;
	align-items: center;
}

.gi-split--align-start {
	align-items: start;
}

.gi-split--stretch {
	align-items: stretch;
}

.gi-split--media-right .gi-split__media {
	order: 2;
}

.gi-split--media-left .gi-split__media {
	order: 0;
}

.gi-split--media-left .gi-split__body {
	order: 1;
}

.gi-split--narrow-media {
	grid-template-columns: 1fr 1.05fr;
	gap: 72px;
}

.gi-split--wide-body {
	grid-template-columns: 0.85fr 1.15fr;
	gap: 70px;
}

.gi-split--faq {
	grid-template-columns: 0.8fr 1.2fr;
	gap: 80px;
	align-items: start;
}

.gi-split__title {
	margin-top: 20px;
	font-family: var(--gi-head);
	font-style: italic;
	font-weight: 800;
	font-size: clamp(40px, 4.6vw, 68px);
	line-height: 0.98;
	text-transform: uppercase;
	text-wrap: balance;
}

.gi-split__para {
	margin-top: 22px;
	font-size: 17.5px;
	line-height: 1.75;
	color: var(--gi-text);
	text-wrap: pretty;
}

.gi-split__para + .gi-split__para {
	margin-top: 18px;
}

.gi-section--navy .gi-split__para,
.gi-section--navy .gi-split__text {
	color: rgba(255, 255, 255, 0.75);
}

.gi-split__actions {
	margin-top: 38px;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
}

/* Hairline checklist */
.gi-checklist {
	margin-top: 38px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: var(--gi-line);
	border: 1px solid var(--gi-line);
}

.gi-checklist__item {
	background: #ffffff;
	padding: 20px 22px;
	display: flex;
	gap: 12px;
	align-items: flex-start;
	transition: background 0.3s ease;
}

.gi-checklist__item:hover {
	background: var(--gi-grey);
}

.gi-checklist__dot {
	width: 9px;
	height: 9px;
	background: var(--gi-red);
	margin-top: 7px;
	flex: none;
}

.gi-checklist__label {
	font-weight: 600;
	color: var(--gi-navy);
	font-size: 15.5px;
	line-height: 1.5;
}

/* Fact tiles (About page) */
.gi-facts {
	margin-top: 36px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: var(--gi-line);
	border: 1px solid var(--gi-line);
}

.gi-facts__item {
	background: #ffffff;
	padding: 24px;
}

.gi-facts__value {
	font-family: var(--gi-head);
	font-style: italic;
	font-weight: 800;
	font-size: 34px;
	line-height: 1;
	color: var(--gi-navy);
}

.gi-facts__label {
	margin-top: 6px;
	font-size: 12.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gi-faint);
}

/* Layered media stack */
.gi-stack {
	position: relative;
}

.gi-stack__corner {
	position: absolute;
	width: 120px;
	height: 120px;
	pointer-events: none;
}

.gi-stack__corner--tl {
	top: -22px;
	left: -22px;
	border-top: 6px solid var(--gi-red);
	border-left: 6px solid var(--gi-red);
}

.gi-stack__corner--tr {
	top: -22px;
	right: -22px;
	border-top: 6px solid var(--gi-red);
	border-right: 6px solid var(--gi-red);
}

.gi-stack__main {
	position: relative;
	aspect-ratio: 4 / 5;
	background: var(--gi-tint);
	overflow: hidden;
}

.gi-stack__main img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.gi-stack__inset {
	position: absolute;
	width: 210px;
	aspect-ratio: 4 / 3;
	border: 8px solid #ffffff;
	background: var(--gi-tint);
	overflow: hidden;
	box-shadow: 0 24px 44px -24px rgba(22, 35, 63, 0.5);
}

.gi-stack__inset img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.gi-stack__inset--bl {
	left: -46px;
	bottom: -46px;
}

.gi-stack__inset--bl-far {
	left: -62px;
	bottom: -58px;
	width: 200px;
}

.gi-stack__inset--br {
	right: -46px;
	bottom: -46px;
}

.gi-stack__note {
	position: absolute;
	top: -38px;
	right: -30px;
	background: var(--gi-navy);
	color: #ffffff;
	padding: 26px 30px;
	max-width: 250px;
}

.gi-stack__note-value {
	font-family: var(--gi-head);
	font-style: italic;
	font-weight: 800;
	font-size: 34px;
	line-height: 1;
}

.gi-stack__note-text {
	font-size: 13px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.7);
	margin-top: 6px;
}

/* --------------------------------------------------------------------------
   15. Category cards (home)
   -------------------------------------------------------------------------- */

.gi-cats {
	margin-top: 56px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
}

.gi-cats__card {
	display: block;
	background: var(--gi-red);
	padding: 26px;
	position: relative;
	overflow: hidden;
	transition: transform 0.4s var(--gi-ease), box-shadow 0.4s ease;
}

.gi-cats__card:hover {
	transform: translateY(-8px);
	box-shadow: 0 26px 50px -22px rgba(22, 35, 63, 0.55);
}

.gi-cats__corner {
	position: absolute;
	top: 18px;
	left: 18px;
	width: 44px;
	height: 44px;
	border-top: 3px solid rgba(255, 255, 255, 0.85);
	border-left: 3px solid rgba(255, 255, 255, 0.85);
	pointer-events: none;
}

.gi-cats__row {
	display: flex;
	gap: 18px;
	align-items: stretch;
}

.gi-cats__rail {
	width: 46px;
	flex: none;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-bottom: 6px;
}

.gi-cats__rail-text {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-family: var(--gi-head);
	font-weight: 700;
	font-size: 26px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #ffffff;
}

.gi-cats__media {
	flex: 1;
	aspect-ratio: 3 / 4;
	background: var(--gi-navy);
	position: relative;
	overflow: hidden;
}

.gi-cats__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.8s var(--gi-ease);
}

.gi-cats__card:hover .gi-cats__media img {
	transform: scale(1.07);
}

.gi-cats__foot {
	margin-top: 20px;
	padding-left: 64px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
}

.gi-cats__items {
	font-size: 13.5px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.9);
}

.gi-cats__arrow {
	font-family: var(--gi-head);
	font-weight: 700;
	font-size: 20px;
	color: #ffffff;
	flex: none;
}

/* --------------------------------------------------------------------------
   16. Numbered grid (advantages / values / QC / construction)
   -------------------------------------------------------------------------- */

.gi-numgrid {
	margin-top: 60px;
	display: grid;
	gap: 1px;
	background: rgba(255, 255, 255, 0.14);
}

.gi-numgrid--cols-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gi-numgrid--cols-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gi-numgrid--cols-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gi-numgrid__item {
	background: var(--gi-navy);
	padding: 42px 34px;
	transition: background 0.35s ease;
}

.gi-numgrid__item:hover {
	background: var(--gi-navy-2);
}

.gi-numgrid__no {
	font-family: var(--gi-head);
	font-style: italic;
	font-weight: 800;
	font-size: 15px;
	letter-spacing: 0.16em;
	color: var(--gi-accent);
}

.gi-numgrid__no--lg {
	font-size: 40px;
	line-height: 1;
	letter-spacing: 0;
}

.gi-numgrid__title {
	margin-top: 16px;
	font-family: var(--gi-head);
	font-weight: 700;
	font-size: 27px;
	line-height: 1.1;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	color: #ffffff;
}

.gi-numgrid__body {
	margin-top: 12px;
	font-size: 15.5px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.72);
	text-wrap: pretty;
}

/* Light card variant (About "four commitments", category "range") */
.gi-numgrid--cards {
	background: transparent;
	gap: 24px;
}

.gi-numgrid--cards .gi-numgrid__item {
	background: #ffffff;
	border: 1px solid var(--gi-line);
	padding: 34px 28px;
	transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.gi-numgrid--cards .gi-numgrid__item:hover {
	background: #ffffff;
	transform: translateY(-6px);
	border-color: var(--gi-navy);
	box-shadow: 0 24px 44px -28px rgba(22, 35, 63, 0.45);
}

.gi-numgrid--cards .gi-numgrid__no {
	color: var(--gi-red);
}

.gi-numgrid--cards .gi-numgrid__title {
	color: var(--gi-navy);
	font-size: 25px;
	margin-top: 14px;
}

.gi-numgrid--cards .gi-numgrid__body {
	color: var(--gi-text);
}

/* No-number variant (category construction grid) */
.gi-numgrid--plain .gi-numgrid__title {
	margin-top: 0;
	font-size: 25px;
}

/* --------------------------------------------------------------------------
   17. Process steps
   -------------------------------------------------------------------------- */

.gi-process {
	margin-top: 60px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px 26px;
}

.gi-process__step {
	border-top: 3px solid var(--gi-line-2);
	padding-top: 22px;
	transition: border-color 0.35s ease;
}

.gi-process__step:hover {
	border-top-color: var(--gi-red);
}

.gi-process__head {
	display: flex;
	align-items: baseline;
	gap: 12px;
}

.gi-process__no {
	font-family: var(--gi-head);
	font-style: italic;
	font-weight: 800;
	font-size: 46px;
	line-height: 1;
	color: var(--gi-red);
	flex: none;
}

.gi-process__title {
	font-family: var(--gi-head);
	font-weight: 700;
	font-size: 23px;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--gi-navy);
}

.gi-process__body {
	margin-top: 12px;
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--gi-text);
	text-wrap: pretty;
}

.gi-process__cta {
	background: var(--gi-grey);
	border-top: 3px solid var(--gi-navy);
	padding: 22px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.gi-process__cta-text {
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--gi-navy);
	font-weight: 600;
}

.gi-process__cta-btn {
	margin-top: 20px;
	background: var(--gi-red);
	color: #ffffff;
	text-align: center;
	padding: 14px 20px;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	transition: background 0.25s ease;
}

.gi-process__cta-btn:hover {
	background: var(--gi-navy);
	color: #ffffff;
}

/* --------------------------------------------------------------------------
   18. Hairline feature grid (customisation options)
   -------------------------------------------------------------------------- */

.gi-featgrid {
	margin-top: 34px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: var(--gi-line);
	border: 1px solid var(--gi-line);
}

.gi-featgrid--cols-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gi-featgrid__item {
	background: #ffffff;
	padding: 22px;
	transition: background 0.3s ease;
}

.gi-featgrid__item:hover {
	background: var(--gi-grey);
}

.gi-featgrid__title {
	font-family: var(--gi-head);
	font-weight: 700;
	font-size: 21px;
	line-height: 1.15;
	text-transform: uppercase;
	color: var(--gi-navy);
}

.gi-featgrid__body {
	margin-top: 8px;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--gi-muted);
}

/* --------------------------------------------------------------------------
   19. Image panel with red caption
   -------------------------------------------------------------------------- */

.gi-imagepanel {
	position: relative;
	display: flex;
}

.gi-imagepanel__frame {
	flex: 1;
	min-height: 620px;
	background: var(--gi-tint-2);
	position: relative;
	overflow: hidden;
}

.gi-imagepanel__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.gi-imagepanel__inset {
	position: absolute;
	inset: 20px;
	border: 3px solid rgba(255, 255, 255, 0.55);
	pointer-events: none;
}

.gi-imagepanel__caption {
	position: absolute;
	bottom: 34px;
	left: -28px;
	right: 34px;
	background: var(--gi-red);
	color: #ffffff;
	padding: 22px 26px;
	font-family: var(--gi-head);
	font-style: italic;
	font-weight: 800;
	font-size: 24px;
	line-height: 1.1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Clothing-page media with the small red name tag */
.gi-mediatag {
	position: relative;
}

.gi-mediatag__frame {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--gi-tint-2);
	overflow: hidden;
}

.gi-mediatag__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.9s var(--gi-ease);
}

.gi-mediatag:hover .gi-mediatag__frame img {
	transform: scale(1.05);
}

.gi-mediatag__label {
	position: absolute;
	bottom: -22px;
	left: -22px;
	background: var(--gi-red);
	color: #ffffff;
	padding: 16px 22px;
	font-family: var(--gi-head);
	font-style: italic;
	font-weight: 800;
	font-size: 22px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   20. Gallery scroller (home)
   -------------------------------------------------------------------------- */

.gi-scroller {
	margin-top: 50px;
	display: flex;
	gap: 18px;
	padding-left: var(--gi-gutter);
	padding-right: var(--gi-gutter);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.gi-scroller__item {
	flex: none;
	width: 320px;
	position: relative;
	overflow: hidden;
	background: var(--gi-tint);
	scroll-snap-align: start;
	transition: transform 0.4s var(--gi-ease);
}

.gi-scroller__item:hover {
	transform: translateY(-6px);
}

.gi-scroller__media {
	aspect-ratio: 3 / 4;
	position: relative;
	overflow: hidden;
}

.gi-scroller__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.8s var(--gi-ease);
}

.gi-scroller__item:hover .gi-scroller__media img {
	transform: scale(1.06);
}

.gi-scroller__label {
	position: absolute;
	left: 0;
	bottom: 0;
	background: var(--gi-red);
	color: #ffffff;
	padding: 10px 16px;
	font-family: var(--gi-head);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   21. Filterable gallery (Gallery page)
   -------------------------------------------------------------------------- */

.gi-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding-bottom: 34px;
	border-bottom: 1px solid var(--gi-line-2);
}

.gi-filters__btn {
	border: 1px solid var(--gi-line-3);
	background: #ffffff;
	color: var(--gi-navy);
	padding: 12px 22px;
	font-family: var(--gi-body);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.gi-filters__btn:hover {
	border-color: var(--gi-navy);
}

.gi-filters__btn.is-active {
	background: var(--gi-red);
	border-color: var(--gi-red);
	color: #ffffff;
}

.gi-filtergrid {
	margin-top: 40px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.gi-filtergrid__item {
	position: relative;
	overflow: hidden;
	background: var(--gi-tint);
	transition: transform 0.4s var(--gi-ease), opacity 0.3s ease;
}

.gi-filtergrid__item:hover {
	transform: translateY(-6px);
}

.gi-filtergrid__item[hidden] {
	display: none;
}

.gi-filtergrid__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 3 / 4;
}

.gi-filtergrid__media--45 {
	aspect-ratio: 4 / 5;
}

.gi-filtergrid__media--11 {
	aspect-ratio: 1 / 1;
}

.gi-filtergrid__media--43 {
	aspect-ratio: 4 / 3;
}

.gi-filtergrid__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.9s var(--gi-ease);
}

.gi-filtergrid__item:hover img {
	transform: scale(1.07);
}

.gi-filtergrid__label {
	position: absolute;
	left: 0;
	bottom: 0;
	background: var(--gi-red);
	color: #ffffff;
	padding: 9px 15px;
	font-family: var(--gi-head);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.gi-note {
	margin-top: 34px;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 11.5px;
	letter-spacing: 0.1em;
	color: var(--gi-ghost);
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   22. Trust bar
   -------------------------------------------------------------------------- */

.gi-trustbar {
	display: flex;
	flex-wrap: wrap;
	gap: 26px;
	align-items: center;
	justify-content: space-between;
	background: #ffffff;
	border: 1px solid var(--gi-line);
	padding: 26px 32px;
}

.gi-trustbar__left {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}

.gi-trustbar__badge {
	background: var(--gi-navy);
	color: #ffffff;
	font-family: var(--gi-head);
	font-style: italic;
	font-weight: 800;
	font-size: 19px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 12px 18px;
	flex: none;
}

.gi-trustbar__text {
	font-size: 15px;
	line-height: 1.6;
	color: var(--gi-text);
	max-width: 420px;
}

/* --------------------------------------------------------------------------
   23. Testimonials
   -------------------------------------------------------------------------- */

.gi-quotes {
	margin-top: 54px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.gi-quotes__card {
	background: #ffffff;
	border: 1px solid var(--gi-line);
	padding: 34px 30px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	transition: transform 0.35s ease, border-color 0.35s ease;
}

.gi-quotes__card:hover {
	transform: translateY(-6px);
	border-color: var(--gi-navy);
}

.gi-quotes__mark {
	font-family: var(--gi-head);
	font-style: italic;
	font-weight: 800;
	font-size: 44px;
	line-height: 0.6;
	color: var(--gi-red);
}

.gi-quotes__text {
	font-size: 16.5px;
	line-height: 1.7;
	color: #2b3550;
	text-wrap: pretty;
}

.gi-quotes__foot {
	margin-top: auto;
	border-top: 1px solid var(--gi-line-2);
	padding-top: 16px;
}

.gi-quotes__name {
	font-weight: 700;
	font-size: 14.5px;
	color: var(--gi-navy);
}

.gi-quotes__role {
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gi-faint);
	margin-top: 3px;
}

/* --------------------------------------------------------------------------
   24. FAQ accordion
   -------------------------------------------------------------------------- */

.gi-faq__item {
	border-bottom: 1px solid var(--gi-line);
}

.gi-faq__q {
	width: 100%;
	background: none;
	border: 0;
	padding: 26px 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	cursor: pointer;
	text-align: left;
	font-family: var(--gi-head);
	font-weight: 700;
	font-size: 25px;
	line-height: 1.15;
	text-transform: uppercase;
	color: var(--gi-navy);
	transition: color 0.25s ease;
}

.gi-faq__q:hover {
	color: var(--gi-red);
}

.gi-faq__icon {
	flex: none;
	width: 34px;
	height: 34px;
	border: 1px solid #d0d5e2;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--gi-red);
	font-size: 20px;
	line-height: 1;
	transition: transform 0.3s ease;
}

.gi-faq__q[aria-expanded="true"] .gi-faq__icon {
	transform: rotate(45deg);
}

.gi-faq__a {
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	transition: max-height 0.45s var(--gi-ease), opacity 0.35s ease;
}

.gi-faq__item.is-open .gi-faq__a {
	max-height: 620px;
	opacity: 1;
}

.gi-faq__text {
	padding: 0 60px 28px 0;
	font-size: 16.5px;
	line-height: 1.75;
	color: var(--gi-text);
	text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   25. Contact details list
   -------------------------------------------------------------------------- */

.gi-contact {
	margin-top: 44px;
	display: flex;
	flex-direction: column;
	gap: 26px;
}

.gi-contact--boxed {
	margin-top: 0;
	gap: 1px;
	background: var(--gi-line);
	border: 1px solid var(--gi-line);
}

.gi-contact__row {
	display: flex;
	gap: 18px;
	align-items: flex-start;
}

.gi-contact--boxed .gi-contact__row {
	background: #ffffff;
	padding: 26px;
	transition: background 0.3s ease;
}

.gi-contact--boxed .gi-contact__row:hover {
	background: var(--gi-grey);
}

.gi-contact__icon {
	width: 44px;
	height: 44px;
	flex: none;
	background: var(--gi-red);
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	line-height: 1;
}

.gi-contact__label {
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
}

.gi-contact--boxed .gi-contact__label {
	color: var(--gi-faint);
}

.gi-contact__value {
	margin-top: 4px;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.5;
	max-width: 420px;
}

.gi-contact--boxed .gi-contact__value {
	margin-top: 6px;
	font-size: 16.5px;
	line-height: 1.55;
	color: var(--gi-navy);
}

.gi-contact__value a {
	color: #ffffff;
}

.gi-contact__value a:hover {
	color: var(--gi-accent);
}

.gi-contact--boxed .gi-contact__value a {
	color: var(--gi-navy);
}

.gi-contact--boxed .gi-contact__value a:hover {
	color: var(--gi-red);
}

/* --------------------------------------------------------------------------
   26. Quote form
   -------------------------------------------------------------------------- */

.gi-form {
	background: #ffffff;
	color: var(--gi-navy);
	padding: 42px 40px;
}

.gi-form--outline {
	background: transparent;
	border: 1px solid var(--gi-line);
	padding: 44px 42px;
}

.gi-form__title {
	font-family: var(--gi-head);
	font-style: italic;
	font-weight: 800;
	font-size: 30px;
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--gi-navy);
}

.gi-form__title--lg {
	font-size: 34px;
}

.gi-form__intro {
	margin-top: 10px;
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--gi-muted);
}

.gi-form__grid {
	margin-top: 26px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.gi-form__field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gi-muted);
	font-weight: 700;
}

.gi-form__field--full {
	grid-column: 1 / -1;
}

.gi-form__field--wide {
	margin-top: 18px;
}

.gi-form__input,
.gi-form__select,
.gi-form__textarea {
	border: 1px solid var(--gi-line-4);
	padding: 14px;
	font-family: var(--gi-body);
	font-size: 15px;
	color: var(--gi-navy);
	letter-spacing: 0;
	text-transform: none;
	font-weight: 400;
	outline: none;
	background: #ffffff;
	width: 100%;
	transition: border-color 0.25s ease;
}

.gi-form__input:focus,
.gi-form__select:focus,
.gi-form__textarea:focus {
	border-color: var(--gi-red);
	outline: none;
}

.gi-form__textarea {
	resize: vertical;
	min-height: 112px;
}

.gi-form__submit {
	margin-top: 24px;
	width: 100%;
	background: var(--gi-red);
	color: #ffffff;
	border: 0;
	padding: 18px;
	font-family: var(--gi-body);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.25s ease;
}

.gi-form__submit:hover {
	background: var(--gi-navy);
}

.gi-form__submit[disabled] {
	opacity: 0.7;
	cursor: default;
}

.gi-form__note {
	margin-top: 14px;
	font-size: 13px;
	color: var(--gi-faint);
	line-height: 1.6;
}

.gi-form__msg {
	margin-top: 14px;
	font-size: 14.5px;
	line-height: 1.6;
	font-weight: 600;
	display: none;
}

.gi-form__msg.is-visible {
	display: block;
}

.gi-form__msg.is-ok {
	color: #1a7f43;
}

.gi-form__msg.is-error {
	color: var(--gi-red);
}

.gi-form__hp {
	position: absolute;
	left: -9999px;
}

/* --------------------------------------------------------------------------
   27. Clothing lines (alternating sections)
   -------------------------------------------------------------------------- */

.gi-line-block {
	padding-top: 104px;
	padding-bottom: 104px;
	scroll-margin-top: 90px;
}

.gi-line-block--white {
	background: #ffffff;
}

.gi-line-block--grey {
	background: var(--gi-grey);
}

.gi-line-block__grid {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: 70px;
	align-items: center;
}

.gi-line-block--flip .gi-line-block__grid {
	grid-template-columns: 1fr 1.05fr;
}

.gi-line-block--flip .gi-line-block__media {
	order: 2;
}

.gi-line-block__title {
	margin-top: 18px;
	font-family: var(--gi-head);
	font-style: italic;
	font-weight: 800;
	font-size: clamp(38px, 3.8vw, 54px);
	line-height: 1;
	text-transform: uppercase;
	color: var(--gi-navy);
}

.gi-line-block__text {
	margin-top: 20px;
	font-size: 17px;
	line-height: 1.75;
	color: var(--gi-text);
	text-wrap: pretty;
}

.gi-bullets {
	margin-top: 26px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 26px;
	list-style: none;
}

.gi-bullets__item {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	list-style: none;
}

.gi-bullets__dot {
	width: 8px;
	height: 8px;
	background: var(--gi-red);
	margin-top: 7px;
	flex: none;
}

.gi-bullets__label {
	font-size: 15px;
	font-weight: 600;
	color: var(--gi-navy);
	line-height: 1.5;
}

/* --------------------------------------------------------------------------
   28. Tag list / chips
   -------------------------------------------------------------------------- */

.gi-taglist {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
}

.gi-taglist--lg {
	gap: 10px;
}

.gi-taglist__tag {
	border: 1px solid var(--gi-line-3);
	padding: 8px 14px;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gi-muted);
	list-style: none;
}

.gi-taglist--lg .gi-taglist__tag {
	padding: 12px 20px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--gi-navy);
	background: #ffffff;
}

/* --------------------------------------------------------------------------
   29. Spec rows
   -------------------------------------------------------------------------- */

.gi-spec {
	margin-top: 34px;
}

.gi-spec__row {
	display: grid;
	grid-template-columns: 150px 1fr;
	gap: 20px;
	padding: 18px 0;
	border-top: 1px solid var(--gi-line);
}

.gi-spec__label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gi-red);
}

.gi-spec__value {
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--gi-text);
}

/* --------------------------------------------------------------------------
   30. Image tiles (other lines)
   -------------------------------------------------------------------------- */

.gi-tiles {
	margin-top: 40px;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 16px;
}

.gi-tiles--cols-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gi-tiles--cols-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gi-tiles--cols-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gi-tiles__tile {
	display: block;
	position: relative;
	overflow: hidden;
	background: var(--gi-navy);
	aspect-ratio: 4 / 5;
}

.gi-tiles__tile:hover {
	opacity: 0.94;
}

.gi-tiles__tile img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.55;
	transition: transform 0.8s var(--gi-ease);
}

.gi-tiles__tile:hover img {
	transform: scale(1.07);
}

.gi-tiles__label {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 20px;
	background: linear-gradient(0deg, rgba(22, 35, 63, 0.92), rgba(22, 35, 63, 0));
	color: #ffffff;
	font-family: var(--gi-head);
	font-weight: 700;
	font-size: 21px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   31. Info cards (Contact page)
   -------------------------------------------------------------------------- */

.gi-infocard {
	border: 1px solid var(--gi-line);
	padding: 26px;
}

.gi-infocard--navy {
	background: var(--gi-navy);
	color: #ffffff;
	border: 0;
	padding: 30px;
}

.gi-infocard__title {
	font-family: var(--gi-head);
	font-weight: 700;
	font-size: 21px;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--gi-navy);
}

.gi-infocard--navy .gi-infocard__title {
	font-style: italic;
	font-weight: 800;
	font-size: 26px;
	color: #ffffff;
}

.gi-infocard__text {
	margin-top: 10px;
	font-size: 15px;
	line-height: 1.7;
	color: var(--gi-text);
}

.gi-infocard--navy .gi-infocard__text {
	color: rgba(255, 255, 255, 0.75);
}

.gi-infocard__lines {
	margin-top: 14px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 15px;
	color: var(--gi-text);
}

.gi-infocard__btn {
	margin-top: 18px;
	display: inline-block;
	background: var(--gi-red);
	color: #ffffff;
	padding: 13px 22px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	transition: background 0.25s ease, color 0.25s ease;
}

.gi-infocard__btn:hover {
	background: #ffffff;
	color: var(--gi-navy);
}

/* --------------------------------------------------------------------------
   32. Address band (Contact page)
   -------------------------------------------------------------------------- */

.gi-addressband {
	background: var(--gi-navy);
	color: #ffffff;
	padding: 46px 44px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 44px;
	align-items: center;
}

.gi-addressband__address {
	margin-top: 16px;
	font-family: var(--gi-head);
	font-style: italic;
	font-weight: 800;
	font-size: 30px;
	line-height: 1.1;
	text-transform: uppercase;
}

.gi-addressband__text {
	margin-top: 14px;
	font-size: 15.5px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.72);
}

.gi-addressband__links {
	display: flex;
	flex-direction: column;
	gap: 14px;
	font-size: 16px;
}

.gi-addressband__links a {
	color: #ffffff;
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	padding-bottom: 12px;
}

.gi-addressband__links a:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.gi-addressband__links a:hover {
	color: var(--gi-accent);
}

/* --------------------------------------------------------------------------
   33. CTA band
   -------------------------------------------------------------------------- */

.gi-ctaband {
	background: var(--gi-red);
	color: #ffffff;
}

.gi-ctaband__inner {
	padding-top: 54px;
	padding-bottom: 54px;
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	align-items: center;
	justify-content: space-between;
}

.gi-ctaband__heading {
	font-family: var(--gi-head);
	font-style: italic;
	font-weight: 800;
	font-size: 38px;
	line-height: 1;
	text-transform: uppercase;
}

.gi-ctaband__text {
	margin-top: 10px;
	font-size: 16px;
	color: rgba(255, 255, 255, 0.88);
	max-width: 620px;
}

.gi-ctaband__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.gi-ctaband .gi-btn--ghost-light {
	border-color: rgba(255, 255, 255, 0.6);
}

.gi-ctaband .gi-btn--ghost-light:hover {
	background: rgba(255, 255, 255, 0.15);
}

/* --------------------------------------------------------------------------
   34. Footer
   -------------------------------------------------------------------------- */

.gi-footer {
	background: var(--gi-navy-deep);
	color: rgba(255, 255, 255, 0.7);
	padding: 74px 0 34px;
}

.gi-footer__grid {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr 1fr;
	gap: 54px;
}

.gi-footer__grid:has(.gi-footer__col--extra) {
	grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr;
}

.gi-footer__logo {
	display: inline-block;
}

.gi-footer__logo img {
	height: 62px;
	width: auto;
	display: block;
	background: #ffffff;
	padding: 6px 10px;
}

.gi-footer__logo .gi-logo-text {
	color: #ffffff;
}

.gi-footer__about {
	margin-top: 20px;
	font-size: 15px;
	line-height: 1.75;
	max-width: 320px;
	text-wrap: pretty;
}

.gi-footer__badge {
	margin-top: 22px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	padding: 9px 14px;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.8);
}

.gi-footer__heading {
	font-family: var(--gi-head);
	font-weight: 700;
	font-size: 19px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #ffffff;
}

.gi-footer__links {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-size: 15px;
}

.gi-footer__links li {
	list-style: none;
}

.gi-footer__links a,
.gi-footer__contact a {
	color: rgba(255, 255, 255, 0.7);
}

.gi-footer__links a:hover,
.gi-footer__contact a:hover {
	color: #ffffff;
}

.gi-footer__contact {
	margin-top: 18px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-size: 15px;
	line-height: 1.6;
}

.gi-footer__alibaba {
	color: var(--gi-accent) !important;
}

.gi-footer__alibaba:hover {
	color: #ffffff !important;
}

.gi-footer__legal {
	margin-top: 54px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding-top: 24px;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: space-between;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.5);
}

.gi-whatsapp {
	position: fixed;
	right: 26px;
	bottom: 26px;
	z-index: 90;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: #25d366;
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.4);
	transition: transform 0.25s ease;
}

.gi-whatsapp:hover {
	transform: scale(1.08);
}

/* --------------------------------------------------------------------------
   35. Classic article / blog shell
   -------------------------------------------------------------------------- */

.gi-article__head {
	background: var(--gi-navy);
	color: #ffffff;
	padding: 76px 0 80px;
}

.gi-article__title {
	font-family: var(--gi-head);
	font-style: italic;
	font-weight: 800;
	font-size: clamp(38px, 4.6vw, 66px);
	line-height: 0.98;
	text-transform: uppercase;
}

.gi-article__meta {
	margin-top: 14px;
	font-size: 12.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}

.gi-article__body {
	padding-top: 64px;
	padding-bottom: 96px;
	font-size: 17px;
	line-height: 1.75;
	color: var(--gi-text);
	max-width: 860px;
}

.gi-article__body h2,
.gi-article__body h3 {
	font-family: var(--gi-head);
	text-transform: uppercase;
	color: var(--gi-navy);
	margin-top: 40px;
}

.gi-article__body p {
	margin-bottom: 20px;
}

.gi-postlist {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
}

.gi-postcard {
	border: 1px solid var(--gi-line);
	background: #ffffff;
}

.gi-postcard__media img {
	display: block;
	width: 100%;
	height: auto;
}

.gi-postcard__body {
	padding: 26px;
}

.gi-postcard__title {
	font-family: var(--gi-head);
	font-size: 25px;
	line-height: 1.1;
	text-transform: uppercase;
}

.gi-postcard__title a {
	color: var(--gi-navy);
}

.gi-postcard__meta {
	margin-top: 8px;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gi-faint);
}

.gi-postcard__excerpt {
	margin-top: 12px;
	font-size: 15.5px;
	line-height: 1.7;
}

.gi-search {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.gi-search__input {
	border: 1px solid var(--gi-line-4);
	padding: 14px;
	font-family: var(--gi-body);
	font-size: 15px;
	flex: 1;
	min-width: 220px;
}

/* ==========================================================================
   36. Responsive
   ========================================================================== */

/* ---- Large desktop down: narrow the gutters slightly ---- */
@media (max-width: 1320px) {
	:root {
		--gi-gutter: 26px;
	}

	.gi-nav__list {
		gap: 14px 20px;
	}

	.gi-nav__link {
		font-size: 13px;
		letter-spacing: 0.08em;
	}
}

/* ---- Nav collapses into the drawer ---- */
@media (max-width: 1100px) {
	.gi-burger {
		display: inline-flex;
		align-items: center;
		order: 3;
	}

	.gi-header__inner {
		gap: 16px;
	}

	.gi-nav {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: min(400px, 88vw);
		background: #ffffff;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 0;
		padding: 24px 24px 40px;
		overflow-y: auto;
		z-index: 80;
		transform: translateX(100%);
		transition: transform 0.32s var(--gi-ease);
		box-shadow: -20px 0 48px -30px rgba(22, 35, 63, 0.6);
	}

	.gi-nav.is-open {
		transform: none;
	}

	.gi-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: 100%;
	}

	.gi-nav__item--top {
		border-bottom: 1px solid var(--gi-line-2);
	}

	.gi-nav__link {
		padding: 18px 0;
		border-bottom: 0;
		font-size: 15px;
		width: 100%;
	}

	.gi-nav__link:hover,
	.gi-nav__item.is-current > .gi-nav__link {
		border-bottom-color: transparent;
	}

	.gi-nav__caret {
		display: none;
	}

	.gi-nav__item--mega,
	.gi-nav__item--parent {
		position: relative;
	}

	.gi-nav__toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 10px;
		right: 0;
		width: 38px;
		height: 38px;
		background: none;
		border: 1px solid var(--gi-line-3);
		color: var(--gi-red);
		font-size: 20px;
		line-height: 1;
		cursor: pointer;
		transition: transform 0.25s ease;
	}

	.gi-nav__toggle[aria-expanded="true"] {
		transform: rotate(45deg);
	}

	/* Mega + dropdown both become inline accordions. */
	.gi-mega,
	.gi-nav__sub {
		position: static;
		max-height: 0;
		opacity: 1;
		visibility: visible;
		transform: none;
		border: 0;
		box-shadow: none;
		padding: 0;
		min-width: 0;
		overflow: hidden;
		transition: max-height 0.35s var(--gi-ease);
		pointer-events: auto;
	}

	.gi-nav__item.is-open > .gi-mega,
	.gi-nav__item.is-open > .gi-nav__sub {
		max-height: 1400px;
	}

	.gi-mega__inner {
		grid-template-columns: 1fr;
		gap: 10px;
		padding: 8px 0 20px;
		max-width: none;
	}

	.gi-mega__promo {
		grid-column: span 1;
		padding: 22px;
	}

	.gi-nav__sub {
		padding-bottom: 12px;
	}

	.gi-nav__sublink {
		padding: 12px 0 12px 16px;
		border-left: 2px solid var(--gi-line-2);
	}

	.gi-nav__cta {
		margin-top: 24px;
		width: 100%;
	}

	/* Hero image sits behind the copy from here down. */
	.gi-hero__media {
		width: 100%;
		border-left: 0;
	}

	.gi-hero__scrim {
		background: linear-gradient(90deg, var(--gi-navy) 0%, rgba(22, 35, 63, 0.88) 55%, rgba(22, 35, 63, 0.6) 100%);
	}

	.gi-hero__copy {
		max-width: 640px;
	}
}

/* ---- Tablet ---- */
@media (max-width: 1024px) {
	.gi-section {
		padding-top: 84px;
		padding-bottom: 88px;
	}

	.gi-section--tight {
		padding-top: 60px;
		padding-bottom: 64px;
	}

	.gi-hero__inner {
		padding-top: 64px;
		padding-bottom: 64px;
	}

	.gi-hero__stats-inner {
		grid-template-columns: repeat(2, 1fr);
	}

	.gi-hero__stat {
		padding: 24px;
		border-right: 1px solid rgba(255, 255, 255, 0.12);
		border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	}

	.gi-hero__stat:nth-child(2n) {
		border-right: 0;
	}

	.gi-hero__stat:nth-last-child(-n + 2) {
		border-bottom: 0;
	}

	.gi-hero__stat:first-child,
	.gi-hero__stat:nth-child(3) {
		padding-left: 0;
	}

	.gi-hero__stat-value {
		font-size: 34px;
	}

	.gi-pagehero > .gi-container {
		padding-top: 68px;
		padding-bottom: 72px;
	}

	.gi-split,
	.gi-split--narrow-media,
	.gi-split--wide-body,
	.gi-split--faq,
	.gi-line-block__grid,
	.gi-line-block--flip .gi-line-block__grid {
		grid-template-columns: 1fr;
		gap: 56px;
	}

	/* When stacked, media always follows the copy. */
	.gi-split--media-right .gi-split__media,
	.gi-split--media-left .gi-split__media,
	.gi-line-block--flip .gi-line-block__media {
		order: 0;
	}

	.gi-split--media-left .gi-split__body {
		order: 0;
	}

	.gi-stack {
		max-width: 560px;
	}

	.gi-stack__note {
		position: static;
		max-width: none;
		margin-top: 18px;
	}

	.gi-stack__inset,
	.gi-stack__inset--bl,
	.gi-stack__inset--bl-far,
	.gi-stack__inset--br {
		left: auto;
		right: 16px;
		bottom: -34px;
		width: 170px;
	}

	.gi-cats {
		grid-template-columns: repeat(2, 1fr);
	}

	.gi-numgrid--cols-3,
	.gi-numgrid--cols-4 {
		grid-template-columns: repeat(2, 1fr);
	}

	.gi-process {
		grid-template-columns: repeat(2, 1fr);
	}

	.gi-featgrid--cols-3 {
		grid-template-columns: repeat(2, 1fr);
	}

	.gi-imagepanel__frame {
		min-height: 420px;
	}

	.gi-filtergrid {
		grid-template-columns: repeat(3, 1fr);
	}

	.gi-quotes {
		grid-template-columns: repeat(2, 1fr);
	}

	.gi-tiles,
	.gi-tiles--cols-6 {
		grid-template-columns: repeat(3, 1fr);
	}

	.gi-tiles--cols-4 {
		grid-template-columns: repeat(2, 1fr);
	}

	.gi-addressband {
		grid-template-columns: 1fr;
		gap: 30px;
		padding: 36px 32px;
	}

	.gi-footer__grid,
	.gi-footer__grid:has(.gi-footer__col--extra) {
		grid-template-columns: 1fr 1fr;
		gap: 44px 40px;
	}

	.gi-footer__brand {
		grid-column: 1 / -1;
	}

	.gi-form,
	.gi-form--outline {
		padding: 34px 30px;
	}

	.gi-postlist {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ---- Mobile ---- */
@media (max-width: 767px) {
	:root {
		--gi-gutter: 20px;
	}

	.gi-section {
		padding-top: 64px;
		padding-bottom: 68px;
	}

	.gi-section--tight {
		padding-top: 48px;
		padding-bottom: 52px;
	}

	.gi-section__rule {
		width: 60%;
		height: 5px;
	}

	.gi-topbar {
		font-size: 11.5px;
	}

	.gi-topbar__inner {
		justify-content: flex-start;
	}

	.gi-topbar__right {
		width: 100%;
	}

	.gi-header__logo img {
		height: 42px;
	}

	.gi-logo-text {
		font-size: 26px;
	}

	/* Hero */
	.gi-hero__inner {
		padding-top: 52px;
		padding-bottom: 56px;
	}

	.gi-hero__badge {
		font-size: 14px;
		padding: 8px 14px;
	}

	.gi-hero__title {
		margin-top: 20px;
		font-size: clamp(34px, 10vw, 48px);
	}

	.gi-hero__text {
		margin-top: 18px;
		font-size: 16.5px;
	}

	.gi-hero__actions {
		margin-top: 28px;
		gap: 10px;
	}

	.gi-hero__actions .gi-btn,
	.gi-pagehero__actions .gi-btn,
	.gi-ctaband__actions .gi-btn,
	.gi-split__actions .gi-btn:not(.gi-btn--underline):not(.gi-btn--underline-light) {
		width: 100%;
	}

	.gi-hero__stats-inner {
		grid-template-columns: 1fr;
	}

	.gi-hero__stat,
	.gi-hero__stat:first-child,
	.gi-hero__stat:nth-child(3) {
		padding: 20px 0;
		border-right: 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	}

	.gi-hero__stat:last-child {
		border-bottom: 0;
	}

	.gi-hero__stat-value {
		font-size: 30px;
	}

	/* Marquee */
	.gi-marquee {
		padding: 12px 0;
	}

	.gi-marquee__track {
		font-size: 17px;
	}

	.gi-marquee__group {
		gap: 26px;
		padding-right: 26px;
	}

	/* Page hero */
	.gi-pagehero > .gi-container {
		padding-top: 52px;
		padding-bottom: 56px;
	}

	.gi-pagehero__title {
		font-size: clamp(32px, 9.5vw, 46px);
	}

	.gi-pagehero__text {
		font-size: 16.5px;
	}

	.gi-pagehero__ring {
		width: 260px;
		height: 260px;
		border-width: 40px;
		top: -60px;
		right: -60px;
	}

	/* Headings */
	.gi-heading {
		display: block;
	}

	.gi-heading__side {
		margin-top: 20px;
		max-width: none;
		font-size: 15.5px;
	}

	.gi-heading__title,
	.gi-h2 {
		font-size: clamp(30px, 8.6vw, 40px);
	}

	.gi-split__title {
		font-size: clamp(32px, 9vw, 42px);
	}

	.gi-split__para,
	.gi-lead {
		font-size: 16.5px;
	}

	/* Grids all stack */
	.gi-checklist,
	.gi-facts,
	.gi-featgrid,
	.gi-featgrid--cols-3,
	.gi-bullets,
	.gi-cats,
	.gi-numgrid--cols-2,
	.gi-numgrid--cols-3,
	.gi-numgrid--cols-4,
	.gi-process,
	.gi-quotes,
	.gi-form__grid,
	.gi-postlist {
		grid-template-columns: 1fr;
	}

	.gi-filtergrid {
		grid-template-columns: repeat(2, 1fr);
		gap: 14px;
	}

	.gi-tiles,
	.gi-tiles--cols-3,
	.gi-tiles--cols-4,
	.gi-tiles--cols-6 {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	.gi-cats {
		margin-top: 36px;
		gap: 18px;
	}

	.gi-cats__foot {
		padding-left: 0;
	}

	.gi-numgrid,
	.gi-process,
	.gi-quotes {
		margin-top: 36px;
	}

	.gi-numgrid__item {
		padding: 30px 24px;
	}

	.gi-numgrid__title {
		font-size: 24px;
	}

	.gi-process__no {
		font-size: 38px;
	}

	/* Layered media simplifies to a single image */
	.gi-stack {
		max-width: none;
	}

	.gi-stack__corner {
		width: 76px;
		height: 76px;
		border-width: 4px;
	}

	.gi-stack__corner--tl {
		top: -12px;
		left: -8px;
	}

	.gi-stack__corner--tr {
		top: -12px;
		right: -8px;
	}

	.gi-stack__inset,
	.gi-stack__inset--bl,
	.gi-stack__inset--bl-far,
	.gi-stack__inset--br {
		position: static;
		width: 100%;
		margin-top: 14px;
		border-width: 0;
		box-shadow: none;
		aspect-ratio: 16 / 9;
	}

	.gi-imagepanel__frame {
		min-height: 320px;
	}

	.gi-imagepanel__caption {
		position: static;
		margin-top: 0;
		font-size: 20px;
		padding: 18px 20px;
	}

	.gi-imagepanel {
		flex-direction: column;
	}

	.gi-mediatag__label {
		left: 0;
		bottom: -16px;
		font-size: 18px;
		padding: 12px 16px;
	}

	.gi-scroller {
		margin-top: 34px;
		gap: 14px;
	}

	.gi-scroller__item {
		width: 240px;
	}

	/* FAQ */
	.gi-faq__q {
		font-size: 21px;
		padding: 20px 0;
		gap: 14px;
	}

	.gi-faq__icon {
		width: 30px;
		height: 30px;
		font-size: 18px;
	}

	.gi-faq__text {
		padding-right: 0;
		padding-bottom: 22px;
		font-size: 15.5px;
	}

	/* Trust bar */
	.gi-trustbar {
		padding: 22px;
	}

	.gi-trustbar__left {
		gap: 14px;
	}

	.gi-trustbar__badge {
		font-size: 16px;
		padding: 10px 14px;
	}

	/* Forms */
	.gi-form,
	.gi-form--outline {
		padding: 26px 20px;
	}

	.gi-form__title {
		font-size: 26px;
	}

	.gi-form__title--lg {
		font-size: 28px;
	}

	/* Spec rows */
	.gi-spec__row {
		grid-template-columns: 1fr;
		gap: 6px;
	}

	/* Clothing line blocks */
	.gi-line-block {
		padding-top: 64px;
		padding-bottom: 64px;
	}

	.gi-line-block__grid {
		gap: 44px;
	}

	.gi-line-block__title {
		font-size: clamp(30px, 8.6vw, 40px);
	}

	/* CTA band + footer */
	.gi-ctaband__inner {
		padding-top: 40px;
		padding-bottom: 40px;
		gap: 22px;
	}

	.gi-ctaband__heading {
		font-size: 29px;
	}

	.gi-ctaband__actions {
		width: 100%;
	}

	.gi-footer {
		padding-top: 54px;
	}

	.gi-footer__grid,
	.gi-footer__grid:has(.gi-footer__col--extra) {
		grid-template-columns: 1fr;
		gap: 36px;
	}

	.gi-footer__about {
		max-width: none;
	}

	.gi-footer__legal {
		margin-top: 36px;
		flex-direction: column;
		gap: 8px;
	}

	.gi-whatsapp {
		right: 16px;
		bottom: 16px;
		width: 52px;
		height: 52px;
	}

	.gi-whatsapp svg {
		width: 26px;
		height: 26px;
	}

	.gi-article__head {
		padding: 52px 0 56px;
	}

	.gi-article__body {
		padding-top: 44px;
		padding-bottom: 64px;
		font-size: 16.5px;
	}

	.gi-addressband__address {
		font-size: 24px;
	}
}

/* ---- Small phones ---- */
@media (max-width: 479px) {
	.gi-filtergrid,
	.gi-tiles,
	.gi-tiles--cols-3,
	.gi-tiles--cols-4,
	.gi-tiles--cols-6 {
		grid-template-columns: 1fr;
	}

	.gi-topbar__left {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}

	.gi-topbar__sep {
		display: none;
	}

	.gi-cats__rail-text {
		font-size: 21px;
	}

	.gi-filters__btn {
		padding: 10px 16px;
		font-size: 11.5px;
	}

	.gi-scroller__item {
		width: 78vw;
	}
}

/* ---- Print ---- */
@media print {
	.gi-topbar,
	.gi-header,
	.gi-nav,
	.gi-burger,
	.gi-whatsapp,
	.gi-ctaband,
	.gi-footer {
		display: none !important;
	}
}

/* ==========================================================================
   37. Widget-specific components added by the Elementor widgets
   ========================================================================== */

/* Split with no image column -------------------------------------------- */

.gi-split-single {
	display: block;
}

/* Media cards (Customisation methods) ----------------------------------- */

.gi-mediacards {
	margin-top: 52px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.gi-mediacards__card {
	display: block;
	border: 1px solid var(--gi-line);
	background: #ffffff;
	overflow: hidden;
	transition: transform 0.35s ease, border-color 0.35s ease;
}

.gi-mediacards__card:hover {
	transform: translateY(-6px);
	border-color: var(--gi-navy);
}

.gi-mediacards__media {
	display: block;
	aspect-ratio: 16 / 10;
	background: var(--gi-tint);
	overflow: hidden;
}

.gi-mediacards__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.9s var(--gi-ease);
}

.gi-mediacards__card:hover .gi-mediacards__media img {
	transform: scale(1.06);
}

.gi-mediacards__body {
	display: block;
	padding: 26px 26px 30px;
}

.gi-mediacards__title {
	font-family: var(--gi-head);
	font-weight: 700;
	font-size: 25px;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--gi-navy);
}

.gi-mediacards__text {
	margin-top: 10px;
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--gi-text);
	text-wrap: pretty;
}

.gi-mediacards__note {
	margin-top: 16px;
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gi-red);
}

/* Range cards ----------------------------------------------------------- */

.gi-range {
	margin-top: 52px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.gi-range__card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: #ffffff;
	border: 1px solid var(--gi-line);
	padding: 30px 28px;
	transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.gi-range__card:hover {
	transform: translateY(-6px);
	border-color: var(--gi-navy);
	box-shadow: 0 24px 44px -28px rgba(22, 35, 63, 0.45);
}

.gi-range__media {
	display: block;
	margin: -30px -28px 8px;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--gi-tint);
}

.gi-range__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.gi-range__no {
	font-family: var(--gi-head);
	font-style: italic;
	font-weight: 800;
	font-size: 14px;
	letter-spacing: 0.16em;
	color: var(--gi-red);
}

.gi-range__title {
	font-family: var(--gi-head);
	font-weight: 700;
	font-size: 26px;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--gi-navy);
}

.gi-range__body {
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--gi-text);
	text-wrap: pretty;
}

/* Gallery filter — explicit 3:4 modifier so all four are symmetrical ---- */

.gi-filtergrid__media--34 {
	aspect-ratio: 3 / 4;
}

/* Testimonial avatar ---------------------------------------------------- */

.gi-quotes__avatar {
	width: 46px;
	height: 46px;
	overflow: hidden;
	border-radius: 50%;
	margin-bottom: 10px;
}

.gi-quotes__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Clothing line blocks -------------------------------------------------- */

.gi-line-block__body .gi-eyebrow {
	margin-bottom: 0;
}

/* Elementor wrappers must not clip the offset decorations --------------- */

.gi-body .elementor-widget-granti-split .elementor-widget-container,
.gi-body .elementor-widget-granti-clothing-lines .elementor-widget-container,
.gi-body .elementor-widget-granti-feature-grid .elementor-widget-container {
	overflow: visible;
}

/* The scroller must be able to bleed past the container ----------------- */

.gi-body .elementor-widget-granti-gallery-scroller .elementor-widget-container {
	overflow: hidden;
}

/* ---- Responsive for the widget-specific components ---- */

@media (max-width: 1024px) {
	.gi-mediacards,
	.gi-range {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.gi-mediacards,
	.gi-range {
		grid-template-columns: 1fr;
		margin-top: 34px;
		gap: 18px;
	}

	.gi-mediacards__body {
		padding: 22px 20px 24px;
	}

	.gi-mediacards__title,
	.gi-range__title {
		font-size: 23px;
	}

	.gi-range__card {
		padding: 24px 22px;
	}

	.gi-range__media {
		margin: -24px -22px 8px;
	}

	/* Stacked splits keep the copy first, so reset the explicit orders. */
	.gi-split__media,
	.gi-split__body,
	.gi-line-block__media,
	.gi-line-block__body {
		order: 0 !important;
	}
}

/* --------------------------------------------------------------------------
   38. Split numbered grid + outlined pill + ring decoration
   -------------------------------------------------------------------------- */

.gi-numgrid--incolumn {
	margin-top: 0;
}

.gi-pill {
	margin-top: 28px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	padding: 11px 16px;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
}

.gi-section--white .gi-pill,
.gi-section--grey .gi-pill {
	border-color: var(--gi-line-3);
	color: var(--gi-muted);
}

/* Red ring decoration for Elementor sections that need it. Add the CSS class
   gi-ring-deco to any Elementor section to get the motif from the design. */

.gi-ring-deco {
	position: relative;
	overflow: hidden;
}

.gi-ring-deco::before {
	content: "";
	position: absolute;
	top: -80px;
	right: -60px;
	width: 420px;
	height: 420px;
	border: 60px solid rgba(215, 25, 32, 0.16);
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
}

.gi-ring-deco > * {
	position: relative;
	z-index: 1;
}

@media (max-width: 767px) {
	.gi-ring-deco::before {
		width: 260px;
		height: 260px;
		border-width: 40px;
		top: -60px;
		right: -60px;
	}

	.gi-pill {
		margin-top: 22px;
		font-size: 11px;
	}
}