/*
Theme Name: GreenKing
Theme URI: https://greenkingindia.com/
Author: Shri KS Farm Implements Private Limited
Description: Marketing theme for GreenKing agricultural implements — Jaipur, Rajasthan.
Version: 2.2.7
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: greenking
*/

/* ---------- tokens ---------- */
:root {
  /* Tells the browser which palette to paint its own UI with: the scrollbar
     track, form controls and text-selection colours. Without it the page is
     treated as light whatever --gk-page says, so dark mode draws a light
     scrollbar - the thin white line down the right edge. */
  color-scheme: light;

  --gk-green: #40B554;
  --gk-green-dk: #349d46;
  /* Footer band only. #40B554 glares against the navy footer, and this is dark
     enough for white bar text (5.0:1). Not --gk-green: that is used ~40 times
     sitewide. The footer-grass SVG is filled with this value, so regenerate it
     if this changes. */
  --gk-green-footer: #2A7F3E;
  --gk-green-soft: #E4F2E5;
  --gk-blue: #2575FC;
  --gk-blue-dk: #1b5ed4;
  --gk-orange: #F97316;
  --gk-navy: #0F172A;
  --gk-ink: #0F172A;
  --gk-body: #475569;
  --gk-muted: #94A3B8;
  --gk-cream: #F4F0E5;
  --gk-surface: #fff;
  --gk-page: #FCFBF7;
  --gk-line: #DDE4D9;
  --gk-line-soft: #EDF1E9;
  --gk-shadow: 0 12px 30px rgba(24, 52, 32, .08);
  --gk-shadow-lg: 0 24px 60px rgba(24, 52, 32, .14);
  --gk-line-strong: #C8D4C6;
  --gk-radius: 4px;
  --gk-radius-sm: 3px;
  --gk-max: 1280px;
  --gk-sans: 'Plus Jakarta Sans', 'Segoe UI', Calibri, sans-serif;
  --gk-serif: Georgia, 'Times New Roman', serif;
}

[data-theme="dark"] {
  color-scheme: dark;

  --gk-ink: #EEF1F5;
  --gk-body: #A9B3C1;
  --gk-muted: #7B8595;
  --gk-cream: #151C2B;
  --gk-surface: #1A2233;
  --gk-page: #101725;
  --gk-line: #2A3447;
  --gk-line-soft: #212B3C;
  --gk-green-soft: #16301F;
  --gk-shadow: none;
  --gk-shadow-lg: none;
  --gk-line-strong: #3A4759;
}

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

html {
  scroll-behavior: smooth
}

body {
  margin: 0;
  background: var(--gk-page);
  color: var(--gk-ink);
  font-family: var(--gk-sans);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 450;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  max-width: 100%;
  height: auto;
  display: block
}

a {
  color: inherit;
  text-decoration: none
}

h1,
h2,
h3,
h4 {
  margin: 0;
  line-height: 1.15;
  letter-spacing: -.02em;
  font-weight: 800
}

p {
  margin: 0
}

button,
input,
textarea {
  font: inherit;
  color: inherit
}

.gk-container {
  max-width: var(--gk-max);
  margin: 0 auto;
  padding: 0 40px;
  width: 100%
}

.gk-eyebrow {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gk-green);
  margin: 0 0 10px
}

.gk-eyebrow--orange {
  color: var(--gk-orange)
}

.gk-section-head {
  text-align: center;
  margin-bottom: 38px
}

.gk-section-head h2 {
  font-size: clamp(27px, 3.2vw, 36px)
}

.gk-skip {
  position: absolute;
  left: -9999px
}

.gk-skip:focus {
  left: 16px;
  top: 16px;
  z-index: 100;
  background: #fff;
  color: #000;
  padding: 10px 16px;
  border-radius: 8px
}

/* ---------- buttons ---------- */
.gk-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  padding: 12px 22px;
  border-radius: 8px;
  border: 2px solid transparent;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}

.gk-btn svg {
  width: 14px;
  height: 14px;
  flex: none;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.gk-btn:hover svg {
  transform: translateX(5px)
}

.gk-btn--blue {
  background: var(--gk-blue);
  color: #fff
}

.gk-btn--blue:hover {
  background: var(--gk-blue-dk);
  box-shadow: 0 6px 20px rgba(37, 117, 252, .35);
  transform: translateY(-1px)
}

.gk-btn--green {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--gk-green);
  color: #fff;
  width: 100%;
  box-shadow: 0 4px 14px rgba(64, 181, 84, .22);
  transition: background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Shine sweep pseudo-element */
.gk-btn--green::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.28) 50%, transparent 100%);
  transform: skewX(-20deg);
  transition: none;
  pointer-events: none;
  z-index: 1;
}

.gk-btn--green:hover::before {
  animation: gk-btn-shine 0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes gk-btn-shine {
  0% {
    left: -75%;
  }

  100% {
    left: 130%;
  }
}

.gk-btn--green:hover {
  background-color: #2D8C3E;
  color: #fff;
  box-shadow: 0 6px 22px rgba(30, 100, 40, .38);
}

.gk-btn--green:active {
  background-color: #216A2F;
  box-shadow: 0 2px 8px rgba(30, 100, 40, .22);
}

.gk-btn--ghost {
  background: transparent;
  color: #fff;
  border-color: #fff
}

.gk-btn--ghost:hover {
  background: rgba(255, 255, 255, .24)
}

.gk-btn--sm {
  padding: 9px 18px;
  font-size: 14px
}

/* ---------- logo ---------- */
.gk-logo {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  text-decoration: none
}

.gk-logo img {
  height: 48px;
  max-height: 50px;
  width: auto;
  max-width: 280px;
  object-fit: contain;
  display: block;
  image-rendering: -webkit-optimize-contrast;
  transition: all 0.2s ease;
}

.gk-logo b {
  font-family: var(--gk-sans);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--gk-ink);
  display: block
}

.gk-logo i {
  display: block;
  height: 3px;
  background: var(--gk-green);
  margin-top: 5px
}

.gk-footer .gk-logo b {
  color: #fff
}

.gk-footer .gk-logo img {
  height: 48px;
  max-height: 50px;
  width: auto;
  max-width: 280px;
  filter: brightness(0) invert(1);
  opacity: 0.95;
  object-fit: contain;
  object-position: left center;
  display: block
}

/* ---------- header ---------- */
.gk-header {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: var(--gk-page);
  border-bottom: 1px solid var(--gk-line);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.admin-bar .gk-header {
  top: 32px
}

@media(max-width:782px) {
  .admin-bar .gk-header {
    top: 46px
  }
}

.gk-header__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 80px;
}

.gk-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 0 auto;
}

.gk-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

#gk-nav-products-item {
  margin-left: 8px;
  margin-right: -8px;
}

.gk-nav__chevron {
  width: 14px;
  height: 14px;
  transition: transform 0.2s ease, color 0.2s ease;
}

#gk-nav-products-item:hover .gk-nav__chevron,
.gk-nav__link:hover .gk-nav__chevron,
.has-megamenu-open .gk-nav__chevron {
  transform: rotate(180deg);
  color: var(--gk-green);
}

.gk-nav a {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--gk-ink);
  transition: color .18s ease
}

.gk-nav a:hover,
.gk-nav .current a,
.gk-nav a.is-active {
  color: var(--gk-green)
}

.gk-header__right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0
}

.gk-phone {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  color: var(--gk-ink);
  font-weight: 700;
  text-decoration: none
}

.gk-phone svg {
  width: 14px;
  height: 14px;
  color: var(--gk-green)
}

.gk-toggle {
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--gk-ink);
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  transition: background .15s ease, color .15s ease;
}

.gk-toggle:hover {
  background: var(--gk-line-soft);
  color: var(--gk-green)
}

.gk-toggle svg {
  width: 16px;
  height: 16px
}

.gk-burger {
  display: none;
  position: relative;
  background: none;
  border: 0;
  cursor: pointer;
  width: 32px;
  height: 32px;
  padding: 6px;
  transform: translateZ(0);
}

.gk-burger__bar {
  position: absolute;
  left: 6px;
  width: 20px;
  height: 2px;
  border-radius: 1px;
  background: var(--gk-ink);
  transform: translateZ(0);
  transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1), opacity .2s ease, top .3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Bars sit 8px apart (a multiple of 4) so each one lands on the same
   sub-pixel phase at fractional display scales (125%, 150%, 175%...);
   5px spacing previously left them inconsistently anti-aliased, making
   one bar visibly lighter/thinner than the others. */
.gk-burger__bar:nth-child(1) { top: 6px; }
.gk-burger__bar:nth-child(2) { top: 14px; }
.gk-burger__bar:nth-child(3) { top: 22px; }

.gk-burger[aria-expanded="true"] .gk-burger__bar:nth-child(1) {
  top: 14px;
  transform: translateZ(0) rotate(45deg);
}

.gk-burger[aria-expanded="true"] .gk-burger__bar:nth-child(2) {
  opacity: 0;
  transform: translateZ(0) scaleX(0);
}

.gk-burger[aria-expanded="true"] .gk-burger__bar:nth-child(3) {
  top: 14px;
  transform: translateZ(0) rotate(-45deg);
}

/* ---------- hero ---------- */
.gk-hero {
  position: relative;
  isolation: isolate;
  padding: 40px 0 130px;
  text-align: center;
  overflow: hidden
}

.gk-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2
}

.gk-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%
}

.gk-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(16, 22, 30, .34) 0%, rgba(16, 22, 30, .12) 34%, rgba(214, 214, 208, .55) 72%, var(--gk-page) 100%)
}

[data-theme="dark"] .gk-hero::after {
  background: linear-gradient(180deg, rgba(16, 22, 30, .65) 0%, rgba(16, 22, 30, .35) 34%, rgba(16, 23, 37, .85) 72%, var(--gk-page) 100%);
}

.gk-hero p.gk-badge,
.gk-badge {
  display: inline-block;
  background: #fff;
  color: #1B2430;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  line-height: 1.25;
  padding: 5px 14px;
  border-radius: 6px;
  margin: 0 0 10px;
  max-width: min(900px, 94vw)
}

.gk-hero h1 {
  font-size: clamp(30px, 4.8vw, 48px);
  color: #fff;
  letter-spacing: -.02em;
  line-height: 1.1;
  font-weight: 800;
  margin: 4px 0 8px;
}

.gk-hero h1 span {
  display: block;
  color: var(--gk-green)
}

.gk-hero p:not(.gk-badge) {
  max-width: 680px;
  margin: 8px auto 0;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5
}

.gk-hero__cta {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 18px;
  flex-wrap: wrap
}

/* ---------- feature cards ---------- */
.gk-features {
  margin-top: -60px;
  position: relative;
  z-index: 10;
  padding-bottom: 0
}

.gk-features__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px
}

.gk-feature {
  background: var(--gk-surface);
  border: 1px solid var(--gk-line);
  border-radius: 16px;
  padding: 28px 22px;
  box-shadow: var(--gk-shadow);
  transition: transform .2s, box-shadow .2s
}

.gk-feature:hover {
  border-color: var(--gk-green);
  transform: translateY(-4px)
}

.gk-feature__icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: var(--gk-green-soft);
  display: grid;
  place-items: center;
  color: var(--gk-green);
  margin-bottom: 18px
}

.gk-feature__icon svg {
  width: 24px;
  height: 24px
}

.gk-feature h3 {
  font-size: 17px;
  margin-bottom: 8px
}

.gk-feature p {
  font-size: 14px;
  color: var(--gk-body);
  line-height: 1.6
}

/* ---------- about ---------- */
.gk-about {
  background: linear-gradient(180deg, var(--gk-page) 0%, var(--gk-cream) 50%, var(--gk-page) 100%);
  padding: 54px 0 88px;
}

[data-theme="dark"] .gk-about {
  background: linear-gradient(180deg, var(--gk-page) 0%, #151D2C 50%, var(--gk-page) 100%);
}

.gk-about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center
}

.gk-about h2 {
  font-size: clamp(25px, 3.2vw, 33px);
  margin-bottom: 20px
}

.gk-about h2 span {
  display: block;
  color: var(--gk-green)
}

.gk-about p {
  font-size: 16px;
  color: var(--gk-body);
  margin-bottom: 15px;
  max-width: none;
  text-align: justify;
  text-justify: inter-word
}

.gk-stats {
  display: flex;
  gap: 32px;
  margin-top: 28px;
  flex-wrap: wrap
}

.gk-stat {
  border-left: 3px solid var(--gk-orange);
  padding: 2px 0 2px 18px;
  min-width: 110px;
}

.gk-stat b {
  display: block;
  color: var(--gk-green);
  font-size: 34px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.gk-stat span {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gk-ink);
  font-weight: 700;
  margin-top: 5px;
  display: block;
}

[data-theme="dark"] .gk-stat span {
  color: var(--gk-ink)
}

.gk-about__media {
  position: relative;
  background: var(--gk-surface);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, .12);
  border: none;
  height: 520px;
  width: 100%
}

.gk-about__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  display: block
}

.gk-about__cap {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(12px);
  padding: 18px 22px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
  border: 1px solid rgba(255, 255, 255, .6)
}

.gk-about__cap b {
  display: block;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gk-green);
  font-weight: 700;
  margin-bottom: 4px
}

.gk-about__cap p {
  font-size: 14px;
  color: var(--gk-navy);
  font-weight: 700;
  margin: 0;
  line-height: 1.4
}

[data-theme="dark"] .gk-about__cap {
  background: rgba(15, 23, 42, .85);
  border-color: rgba(255, 255, 255, .1)
}

[data-theme="dark"] .gk-about__cap p {
  color: #fff
}

/* ---------- products ---------- */
.gk-products {
  padding: 70px 0;
  background: var(--gk-page)
}

.gk-products__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px
}

.gk-product {
  background: var(--gk-surface);
  border: 1px solid var(--gk-line);
  border-radius: var(--gk-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform .2s, box-shadow .2s
}

.gk-product:hover {
  border-color: var(--gk-green);
  box-shadow: 0 5px 0 var(--gk-green)
}

.gk-product__img {
  background: var(--gk-line-soft);
  padding: 14px;
  overflow: hidden
}

.gk-product__img img {
  border-radius: 8px;
  aspect-ratio: 16/10;
  object-fit: cover;
  width: 100%;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.gk-product:hover .gk-product__img img {
  transform: scale(1.07)
}

.gk-product__body {
  padding: 0 16px 16px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto
}

.gk-product__cat {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gk-orange);
  margin-bottom: 6px;
  line-height: 1.2
}

.gk-product h3,
.gk-product__title {
  font-family: var(--gk-sans);
  color: var(--gk-green-dk);
  font-weight: 800;
  line-height: 1.26;
  margin: 0 0 12px 0;
  display: block;
  letter-spacing: -0.01em;
  transition: min-height 0.15s ease;
}

[data-theme="dark"] .gk-product h3,
[data-theme="dark"] .gk-product__title {
  color: var(--gk-green)
}

.gk-product__title--sm {
  font-size: 18px
}

.gk-product__title--md {
  font-size: 16.5px
}

.gk-product__title--lg {
  font-size: 15px
}

.gk-product__title--xl {
  font-size: 13.5px;
  line-height: 1.22
}

.gk-spec {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  padding: 5px 0;
  border-top: 1px solid var(--gk-line-soft)
}

.gk-spec dt {
  color: var(--gk-body);
  margin: 0
}

.gk-spec dd {
  margin: 0;
  font-weight: 600;
  color: var(--gk-ink)
}

.gk-product dl {
  margin: 0 0 16px 0
}

.gk-product .gk-btn {
  margin-top: auto;
  width: 100%
}

.gk-products__more {
  display: flex;
  justify-content: center;
  margin-top: 34px
}

/* ---------- dealer ---------- */
.gk-dealer {
  background: var(--gk-cream);
  padding: 70px 0
}

.gk-dealer__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: start
}

.gk-dealer h2 {
  font-size: clamp(23px, 3vw, 30px);
  margin-bottom: 26px
}

.gk-reason {
  display: flex;
  gap: 12px;
  margin-bottom: 20px
}

.gk-reason__tick {
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 50%;
  background: var(--gk-green-soft);
  color: var(--gk-green);
  display: grid;
  place-items: center;
  margin-top: 2px
}

.gk-reason__tick svg {
  width: 13px;
  height: 13px
}

.gk-reason h3 {
  font-size: 16px;
  margin-bottom: 5px
}

.gk-reason p {
  font-size: 14px;
  color: var(--gk-body);
  max-width: none
}

.gk-form {
  background: var(--gk-surface);
  border: 1px solid var(--gk-line);
  border-radius: var(--gk-radius);
  padding: 24px;
  box-shadow: var(--gk-shadow)
}

.gk-form h3 {
  font-size: 16px;
  margin-bottom: 18px
}

.gk-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px
}

.gk-form input,
.gk-form textarea {
  width: 100%;
  padding: 10px 13px;
  margin-bottom: 12px;
  border: 1px solid var(--gk-line);
  border-radius: 8px;
  background: var(--gk-page);
  font-size: 12.5px;
  transition: border-color .15s, box-shadow .15s
}

.gk-form input::placeholder,
.gk-form textarea::placeholder {
  color: var(--gk-muted)
}

.gk-form input:focus,
.gk-form textarea:focus {
  outline: 0;
  border-color: var(--gk-blue);
  box-shadow: 0 0 0 3px rgba(47, 123, 246, .14)
}

.gk-form textarea {
  min-height: 74px;
  resize: vertical
}

.gk-form .gk-btn {
  width: 100%;
  border-radius: 8px
}

.gk-form__note {
  font-size: 10.5px;
  color: var(--gk-muted);
  margin-top: 10px;
  text-align: center
}

/* ---------- testimonials ---------- */
.gk-testimonials {
  padding: 70px 0
}

.gk-testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px
}

.gk-quote {
  background: var(--gk-surface);
  border: 1px solid var(--gk-line);
  border-radius: var(--gk-radius);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px
}

.gk-quote blockquote {
  margin: 0;
  font-size: 15px;
  color: var(--gk-ink);
  line-height: 1.6;
  flex: 1;
  font-weight: 500
}

.gk-quote cite {
  font-style: normal
}

.gk-quote cite b {
  display: block;
  font-size: 15px;
  color: var(--gk-ink);
  font-weight: 700
}

.gk-quote cite span {
  font-size: 13px;
  color: var(--gk-green);
  font-weight: 600
}

/* ---------- map ---------- */
.gk-map {
  background: var(--gk-cream);
  padding: 75px 0 90px
}

.gk-world-map-wrap {
  max-width: 1160px;
  margin: 40px auto 0;
  position: relative;
}

/* Filter Chips */
.gk-map-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-bottom: 34px;
}

.gk-map-chip {
  background: var(--gk-surface);
  border: 1px solid var(--gk-line);
  padding: 11px 22px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--gk-ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  transition: all .2s ease;
  box-shadow: 0 2px 6px rgba(15, 37, 22, 0.03);
}

.gk-map-chip small {
  color: var(--gk-muted);
  font-size: 12px;
  font-weight: 500;
  transition: color .2s ease;
}

.gk-map-chip:hover {
  border-color: var(--gk-green);
  color: var(--gk-green);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(64, 181, 84, 0.15);
}

.gk-map-chip.is-active {
  background: var(--gk-green);
  border-color: var(--gk-green);
  color: #fff;
  box-shadow: 0 4px 16px rgba(64, 181, 84, 0.35);
}

.gk-map-chip.is-active small {
  color: rgba(255, 255, 255, 0.9);
}

[data-theme="dark"] .gk-map-chip {
  background: var(--gk-surface);
  border-color: var(--gk-line);
  color: var(--gk-ink);
}

[data-theme="dark"] .gk-map-chip.is-active {
  background: var(--gk-green);
  color: #fff;
}

/* Map Stage */
.gk-map-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1000 / 400;
  min-height: 360px;
  max-width: 1160px;
  margin: 0 auto;
  background: #FFFFFF;
  border-radius: 24px;
  border: 1px solid var(--gk-line);
  box-shadow: 0 12px 36px rgba(15, 37, 22, 0.06);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

[data-theme="dark"] .gk-map-stage {
  background: #0E1726;
  border-color: var(--gk-line);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

.gk-vector-world-map {
  width: 100%;
  height: 100%;
  display: block;
  shape-rendering: geometricPrecision;
}

/* Vector Country Shapes */
.gk-countries {
  pointer-events: none
}

.gk-c {
  fill: #EA9F4E;
  stroke: #FFFFFF;
  stroke-width: 0.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  opacity: 0.94;
  transition: fill .2s ease;
}

[data-theme="dark"] .gk-c {
  fill: #C47628;
  stroke: #0E1726;
  opacity: 0.85;
}

/* Static Flight & Shipping Arcs */
.gk-arc {
  opacity: 0.35;
  transition: opacity .3s ease, stroke-width .3s ease;
}

/* SVG Locked Pin Dots & Radar Pulses */
.gk-svg-pins {
  pointer-events: auto;
}

.gk-svg-pin {
  cursor: pointer;
  transition: opacity .3s ease, transform .2s ease;
}

.gk-svg-pin.is-dimmed {
  opacity: 0.15;
}

.gk-svg-pin-hover-zone {
  fill: transparent;
  cursor: pointer;
}

.gk-svg-dot {
  fill: #40B554;
  stroke: #FFFFFF;
  stroke-width: 1.5;
  transition: all .2s ease;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.gk-svg-pin:hover .gk-svg-dot,
.gk-svg-pin.is-highlighted .gk-svg-dot {
  fill: #F97316;
  r: 6;
  filter: drop-shadow(0 0 6px #F97316);
}

/* HQ Jaipur Pin Elements */
.gk-svg-dot-hq {
  fill: var(--gk-green);
  stroke: #FFFFFF;
  stroke-width: 2;
  filter: drop-shadow(0 0 8px rgba(64, 181, 84, 0.9));
}

@keyframes gk-svg-radar-pulse {
  0% {
    r: 6;
    opacity: 0.9
  }

  100% {
    r: 24;
    opacity: 0
  }
}

.gk-svg-radar {
  fill: none;
  stroke: var(--gk-green);
  stroke-width: 1.5;
  animation: gk-svg-radar-pulse 2.2s cubic-bezier(0.2, 0.6, 0.35, 1) infinite;
  transform-origin: center;
}

.gk-svg-radar--delayed {
  animation-delay: 1.1s;
}

.gk-svg-badge-bg {
  fill: #FFFFFF;
  stroke: rgba(22, 163, 74, 0.35);
  stroke-width: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.18));
}

.gk-svg-badge-text {
  fill: #FFFFFF;
  font-size: 7px;
  font-weight: 800;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  letter-spacing: 0.03em;
  user-select: none;
}

/* Bottom Metrics Strip */
.gk-map-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 20px;
}

.gk-metric-card {
  background: var(--gk-surface);
  border: 1px solid var(--gk-line);
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 4px 16px rgba(15, 37, 22, 0.03);
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: transform .2s ease, box-shadow .2s ease;
}

.gk-metric-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 37, 22, 0.06);
  border-color: var(--gk-green);
}

.gk-metric-val {
  font-size: 22px;
  font-weight: 800;
  color: var(--gk-green);
  line-height: 1.1;
  margin-bottom: 2px;
}

.gk-metric-label {
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gk-ink);
  margin-bottom: 4px;
}

.gk-metric-card p {
  font-size: 12px;
  color: var(--gk-body);
  line-height: 1.4;
  margin: 0;
}

.gk-metric-card--cta {
  background: linear-gradient(135deg, rgba(64, 181, 84, 0.1), rgba(37, 117, 252, 0.05));
  border-color: rgba(64, 181, 84, 0.3);
}

.gk-metric-card--cta .gk-btn {
  margin-top: 6px;
  padding: 6px 12px;
  font-size: 11.5px;
  align-self: flex-start;
}

/* ---------- footer ---------- */
.gk-footer {
  background: var(--gk-navy);
  color: #94A3B8;
  padding: 72px 0 0
}

.gk-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.4fr 1.3fr;
  gap: 48px
}

.gk-footer h4 {
  font-size: 16px;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 22px
}

.gk-footer p,
.gk-footer a,
.gk-footer li {
  font-size: 14.5px;
  line-height: 1.8;
  color: #94A3B8
}

.gk-footer a:hover {
  color: #FFFFFF
}

.gk-footer__about p {
  margin-top: 20px;
  max-width: 320px;
  font-size: 14.5px;
  line-height: 1.7;
  color: #94A3B8
}

.gk-footer__about .gk-logo {
  display: inline-block;
  margin-left: -26px;
  padding-left: 0
}

.gk-social {
  display: flex;
  gap: 10px;
  margin-top: 22px
}

.gk-social a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  display: grid;
  place-items: center;
  transition: all .2s ease;
  color: #fff;
}

.gk-social a:hover {
  background: var(--gk-green);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(64, 181, 84, 0.3)
}

.gk-social svg {
  width: 18px;
  height: 18px
}

.gk-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px
}

.gk-contact li {
  display: flex;
  gap: 12px;
  align-items: flex-start
}

.gk-contact svg {
  width: 18px;
  height: 18px;
  color: var(--gk-green);
  flex: none;
  margin-top: 4px
}

.gk-contact__phones {
  display: flex;
  flex-direction: column;
  gap: 6px
}

.gk-contact__phones a {
  color: inherit;
  text-decoration: none;
  transition: color .15s ease
}

.gk-contact__phones a:hover {
  color: var(--gk-green)
}

.gk-subscribe p {
  margin-bottom: 14px;
  font-size: 14px;
  line-height: 1.6
}

.gk-subscribe input {
  width: 100%;
  padding: 13px 16px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-size: 14px;
  margin-bottom: 12px;
  transition: border-color .2s ease, background .2s ease;
}

.gk-subscribe input::placeholder {
  color: #64748B
}

.gk-subscribe input:focus {
  outline: 0;
  border-color: var(--gk-blue);
  background: rgba(255, 255, 255, .12)
}

.gk-subscribe .gk-btn {
  width: 100%;
  border-radius: 10px;
  padding: 13px 20px;
  font-size: 15px;
  font-weight: 700
}

/* Tile is 1920x112 drawn 1:1, so the strands land on whole pixels, and it is
   cut to exactly the height of the drawing so the element carries no empty
   headroom. The SVG uses preserveAspectRatio="none", so height and
   background-size must keep the 1920:112 ratio or the field stretches. The ?v=
   is a cache-buster: the SVG is a separate request from style.css, so bumping
   GREENKING_VERSION alone will not refetch it. */
.gk-footer__grass {
  height: 112px;
  margin-top: 6px;
  background-image: url("assets/img/footer-grass.svg?v=21");
  background-repeat: repeat-x;
  background-position: bottom left;
  background-size: 1920px 112px
}

/* Same green the SVG is filled with, so the field and this bar read as one
   continuous shape rather than meeting at a seam. */
.gk-footer__base {
  background: var(--gk-green-footer)
}

.gk-footer__bar {
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap
}

.gk-footer__bar p,
.gk-footer__bar a {
  font-size: 13.5px;
  /* White reads 5.0:1 on --gk-green-footer. */
  color: #FFFFFF
}

.gk-footer__bar a:hover {
  color: #BEEBCB
}

.gk-footer__bar div {
  display: flex;
  gap: 24px
}

/* ---------- responsive ---------- */
@media(max-width:960px) {

  .gk-features__grid,
  .gk-products__grid,
  .gk-testimonials__grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .gk-about__grid,
  .gk-dealer__grid {
    grid-template-columns: 1fr;
    gap: 34px
  }

  .gk-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px
  }

  .gk-features {
    margin-top: -120px
  }
}

@media(max-width:760px) {
  .gk-nav {
    display: flex;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    background: var(--gk-page);
    flex-direction: column;
    gap: 0;
    padding: 8px 24px 16px;
    border-bottom: 1px solid var(--gk-line);
    box-shadow: var(--gk-shadow);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
  }

  .gk-nav.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  .gk-nav a {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .2s ease, transform .2s ease;
  }

  .gk-nav.is-open a {
    opacity: 1;
    transform: translateY(0);
  }

  .gk-nav.is-open a:nth-child(1) { transition-delay: .05s; }
  .gk-nav.is-open a:nth-child(2) { transition-delay: .1s; }
  .gk-nav.is-open a:nth-child(3) { transition-delay: .15s; }
  .gk-nav.is-open a:nth-child(4) { transition-delay: .2s; }

  .gk-nav a {
    padding: 10px 0;
    border-bottom: 1px solid var(--gk-line-soft)
  }

  #gk-nav-products-item {
    margin: 0;
  }

  .gk-burger {
    display: block;
    order: -1
  }

  .gk-phone {
    display: none
  }

  .gk-header__in {
    gap: 10px
  }

  .gk-logo {
    margin-right: auto
  }

  .gk-logo img {
    height: 36px
  }

  .gk-header__right {
    gap: 8px
  }
}

@media(max-width:480px) {
  .gk-logo img {
    height: 30px
  }

  .gk-header .gk-btn--sm {
    display: none
  }
}

@media(max-width:760px) {
  .gk-hero {
    padding: 64px 0 170px
  }

  .gk-features__grid,
  .gk-products__grid,
  .gk-testimonials__grid {
    grid-template-columns: 1fr
  }

  .gk-features {
    margin-top: -110px
  }

  .gk-footer__grid {
    grid-template-columns: 1fr
  }

  .gk-map__frame {
    padding: 16px
  }

  .gk-footer__bar {
    flex-direction: column
  }

  /* 0.75 of the tile. Scaling further drops the strands below a pixel and turns
     the fringe into mush. */
  .gk-footer__grass {
    height: 84px;
    background-size: 1440px 84px
  }
}

@media(prefers-reduced-motion:reduce) {
  * {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important
  }

  html {
    scroll-behavior: auto
  }
}

/* ================= inner pages ================= */
.gk-pagehead {
  background: var(--gk-cream);
  padding: 54px 0 46px;
  text-align: center;
  border-bottom: 1px solid var(--gk-line)
}

.gk-pagehead h1 {
  font-size: clamp(28px, 4.4vw, 42px);
  margin-bottom: 12px
}

.gk-pagehead__lead {
  max-width: none;
  margin: 0;
  color: var(--gk-body);
  font-size: 16px
}

.gk-section-head__sub {
  max-width: none;
  margin: 12px 0 0;
  color: var(--gk-body);
  font-size: 15px
}

.gk-btn--outline {
  background: transparent;
  border-color: var(--gk-line);
  color: var(--gk-ink)
}

.gk-btn--outline:hover {
  border-color: var(--gk-green);
  color: var(--gk-green)
}

/* catalogue */
.gk-catalogue {
  padding: 44px 0 70px
}

.gk-catalogue__grid {
  display: grid;
  grid-template-columns: 236px 1fr;
  gap: 34px;
  align-items: start
}

.gk-filters {
  position: sticky;
  top: 76px;
  background: var(--gk-surface);
  border: 1px solid var(--gk-line);
  border-radius: var(--gk-radius);
  padding: 16px
}

.gk-filters h2 {
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gk-muted);
  margin-bottom: 12px
}

.gk-filter {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  background: none;
  border: 0;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--gk-body);
  text-align: left;
  transition: .15s
}

.gk-filter span {
  font-size: 10.5px;
  color: var(--gk-muted);
  background: var(--gk-line-soft);
  padding: 1px 7px;
  border-radius: 999px
}

.gk-filter:hover {
  background: var(--gk-line-soft);
  color: var(--gk-ink)
}

.gk-filter.is-active {
  background: var(--gk-green);
  color: #fff;
  font-weight: 600
}

.gk-filter.is-active span {
  background: rgba(255, 255, 255, .24);
  color: #fff
}

.gk-catalogue__bar {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap
}

.gk-search {
  flex: 1;
  min-width: 200px
}

.gk-search input,
.gk-sort select {
  width: 100%;
  padding: 9px 13px;
  border: 1px solid var(--gk-line);
  border-radius: 9px;
  background: var(--gk-surface);
  font-size: 12.5px
}

.gk-search input:focus,
.gk-sort select:focus {
  outline: 0;
  border-color: var(--gk-blue);
  box-shadow: 0 0 0 3px rgba(47, 123, 246, .14)
}

.gk-empty {
  text-align: center;
  padding: 50px 0;
  color: var(--gk-body);
  font-size: 13px
}

.gk-empty b {
  display: block;
  font-size: 15px;
  color: var(--gk-ink);
  margin-bottom: 5px
}

.gk-product[hidden] {
  display: none
}

@media(min-width:1100px) {
  .gk-catalogue .gk-products__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px
  }
}

/* shared CTA band */
.gk-cta {
  background: var(--gk-cream);
  padding: 52px 0;
  text-align: center
}

.gk-cta h2 {
  font-size: clamp(21px, 2.6vw, 27px);
  margin-bottom: 9px
}

.gk-cta p {
  color: var(--gk-body);
  font-size: 13px;
  margin-bottom: 20px
}

.gk-cta__btns {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap
}

.gk-single__cta {
  justify-content: flex-start;
  flex-wrap: nowrap;
  margin-top: 22px
}

.gk-single__cta .gk-btn {
  padding: 12px 16px;
  font-size: 14px;
  flex: 0 1 auto;
  min-width: 0
}

@media(max-width:900px) {
  .gk-single__cta {
    flex-wrap: wrap
  }
}

/* ================= Products Page CTA Card Banner ================= */
/* Static placeholder removed – banner is now sticky floating bar */
.gk-products-cta-sec {
  display: none;
  /* hidden in document flow; shown as sticky bar via JS */
}

/* ---- Sticky floating pill banner (rounded card) ---- */
.gk-sticky-cta {
  position: fixed;
  bottom: 26px;
  left: 50%;
  transform: translate(-50%, 140%);
  width: calc(100% - 48px);
  max-width: 1120px;
  z-index: 9998;
  padding: 26px 38px;
  background: #0B1320;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  transition: transform 0.42s cubic-bezier(0.34, 1.2, 0.64, 1),
    opacity 0.35s ease;
  opacity: 0;
  pointer-events: none;
  box-sizing: border-box;
}

.gk-sticky-cta.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}

.gk-sticky-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  pointer-events: none;
  border-radius: 20px 20px 0 0;
}

.gk-sticky-cta .gk-container {
  max-width: 100%;
  padding: 0;
}

.gk-sticky-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.gk-sticky-cta__content h2 {
  font-family: var(--gk-sans);
  color: #FFFFFF;
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 800;
  letter-spacing: -0.015em;
  margin: 0 0 5px 0;
}

.gk-sticky-cta__content p {
  color: #94A3B8;
  font-size: 14px;
  margin: 0;
  line-height: 1.45;
}

.gk-sticky-cta__close {
  display: none;
}

[data-theme="dark"] .gk-sticky-cta {
  background: #0F172A;
  border-color: rgba(255, 255, 255, 0.14);
}

.gk-cta-banner {
  background: #0B1320;
  border-radius: 18px;
  padding: 32px 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  box-shadow: 0 16px 40px rgba(11, 19, 32, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
}

.gk-cta-banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
}

.gk-cta-banner__content h2 {
  font-family: var(--gk-sans);
  color: #FFFFFF;
  font-size: clamp(20px, 2.5vw, 24px);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}

.gk-cta-banner__content p {
  color: #94A3B8;
  font-size: 14.5px;
  line-height: 1.5;
  margin: 0;
}

.gk-btn--whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #16A34A;
  color: #FFFFFF !important;
  font-size: 14.5px;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.28);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  flex-shrink: 0;
}

.gk-btn--whatsapp svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.gk-btn--whatsapp:hover {
  background: #15803D;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(22, 163, 74, 0.42);
  color: #FFFFFF !important;
}

/* .gk-btn:hover svg nudges the icon 5px right - that is the trailing-arrow
   affordance, and every other .gk-btn puts its arrow after the label. This is
   the one button whose glyph LEADS the text, so the nudge just shoved the
   WhatsApp mark into "Contact". */
.gk-btn--whatsapp:hover svg {
  transform: none;
}

.gk-btn--whatsapp:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(22, 163, 74, 0.25);
}

[data-theme="dark"] .gk-cta-banner {
  background: #0F172A;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

@media(max-width:768px) {
  .gk-sticky-cta {
    bottom: 16px;
    width: calc(100% - 28px);
    padding: 14px;
    border-radius: 16px;
  }

  .gk-sticky-cta__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  /* On a phone the bar is just the WhatsApp button on its dark card - the
     heading and blurb eat a third of the screen for copy the visitor has
     already read further up. The wording still ships in .gk-cta-banner
     above, so nothing is lost to search engines or a screen reader. */
  .gk-sticky-cta__content {
    display: none;
  }

  .gk-sticky-cta__inner .gk-btn--whatsapp {
    width: 100%;
    justify-content: center;
  }

  .gk-cta-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 26px 22px;
    gap: 20px;
  }

  .gk-btn--whatsapp {
    width: 100%;
    justify-content: center;
  }
}


/* about extras */
/* ================= REDESIGNED ABOUT US PAGE ================= */
.gk-about-hero {
  position: relative;
  min-height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: 80px 0 90px;
  background: #0B1320;
}

.gk-about-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 1;
}

.gk-about-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(15, 23, 42, 0.2), rgba(15, 23, 42, 0.42));
}

.gk-about-hero__content {
  position: relative;
  z-index: 2;
  max-width: 820px;
  margin: 0 auto;
}

.gk-about-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin-bottom: 24px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

.gk-about-hero__badge::before,
.gk-about-hero__badge::after {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: rgba(134, 239, 172, 0.55);
  flex-shrink: 0;
}




.gk-about-hero h1 {
  font-family: var(--gk-sans);
  font-size: clamp(36px, 5.5vw, 62px);
  font-weight: 800;
  color: #fff;
  line-height: 1.08;
  margin-bottom: 18px;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6);
}

.gk-about-hero h1 span {
  color: var(--gk-green);
}

.gk-about-hero p {
  font-size: 18px;
  line-height: 1.65;
  color: #CBD5E1;
  max-width: 680px;
  margin: 0 auto;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.65);
}

/* 2. Standards & Certifications */
.gk-certs-sec,
.gk-certs {
  padding: 85px 0;
  background: var(--gk-page);
}

.gk-certs-grid,
.gk-certs__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.gk-cert-card,
.gk-cert {
  background: var(--gk-surface);
  border: 1px solid var(--gk-line);
  border-radius: 18px;
  padding: 34px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 8px 24px rgba(15, 37, 22, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.gk-cert-card:hover,
.gk-cert:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 36px rgba(15, 37, 22, 0.09);
  border-color: var(--gk-green);
}

.gk-cert-card__icon,
.gk-cert__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--gk-green-soft);
  color: var(--gk-green);
  display: grid;
  place-items: center;
  margin: 0 auto 20px;
  box-shadow: 0 4px 12px rgba(64, 181, 84, 0.12);
  flex-shrink: 0;
}

.gk-cert-card__icon svg,
.gk-cert__icon svg {
  width: 28px !important;
  height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
}

.gk-cert-card h3,
.gk-cert h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--gk-navy);
  margin-bottom: 4px;
}

[data-theme="dark"] .gk-cert-card h3 {
  color: #fff;
}

.gk-cert-card__label {
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gk-green);
  margin-bottom: 12px;
}

.gk-cert-card__desc {
  font-size: 13.5px;
  color: var(--gk-body);
  line-height: 1.6;
  margin: 0;
}

/* 3. Vision, Mission & Core Values */
.gk-mv-sec {
  padding: 90px 0;
  background: var(--gk-cream);
}

.gk-mv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-bottom: 36px;
}

.gk-mv-feature {
  background: var(--gk-surface);
  border: 1px solid var(--gk-line);
  border-radius: 20px;
  padding: 38px 34px;
  display: flex;
  gap: 24px;
  align-items: flex-start;
  box-shadow: 0 10px 30px rgba(15, 37, 22, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.gk-mv-feature:hover {
  box-shadow: 0 18px 40px rgba(15, 37, 22, 0.08);
}

.gk-mv-feature__icon {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  flex: none;
}

.gk-mv-feature__icon svg {
  width: 28px;
  height: 28px;
}

.gk-mv-feature--vision .gk-mv-feature__icon {
  background: rgba(64, 181, 84, 0.15);
  color: var(--gk-green);
}

.gk-mv-feature--mission .gk-mv-feature__icon {
  background: rgba(249, 115, 22, 0.15);
  color: var(--gk-orange);
}

.gk-mv-feature h2 {
  font-size: 23px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--gk-navy);
}

[data-theme="dark"] .gk-mv-feature h2 {
  color: #fff;
}

.gk-mv-feature p {
  font-size: 14.5px;
  color: var(--gk-body);
  line-height: 1.65;
  margin: 0;
  text-align: justify;
  text-justify: inter-word;
}

.gk-values-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.gk-value-pill {
  display: inline-block;
  padding: 8px 22px;
  border-radius: 999px;
  border: 1.5px solid var(--gk-line);
  background: var(--gk-surface);
  font-size: 13px;
  font-weight: 600;
  color: var(--gk-ink);
  white-space: nowrap;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.gk-value-pill:hover {
  border-color: var(--gk-green);
  color: var(--gk-green);
  background: rgba(64, 181, 84, 0.07);
}

/* 4. Leadership Pyramid (Tier 1 -> Tier 2 -> Tier 3) */
.gk-team-sec {
  padding: 85px 0;
  background: var(--gk-page);
}

.gk-team-tier1 {
  max-width: 920px;
  margin: 0 auto 54px;
}

.gk-team-tier1 .gk-leader-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  padding: 48px 40px 52px;
  background: var(--gk-surface);
  border: 1px solid rgba(22, 163, 74, 0.35);
  border-radius: 28px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.08);
  position: relative;
}

.gk-team-tier1 .gk-leader-card__media {
  width: 480px;
  max-width: 95%;
  aspect-ratio: 3 / 3.6;
  border-radius: 24px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
  border: 5px solid #FFFFFF;
  overflow: hidden;
  margin-bottom: 14px;
}

.gk-team-tier1 .gk-leader-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.gk-team-tier1 .gk-leader-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 720px;
}

.gk-team-tier1 .gk-leader-card__body h3 {
  font-size: 32px;
  font-weight: 800;
  color: var(--gk-navy);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}

.gk-team-tier1 .gk-leader-card__role {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gk-green);
  margin-bottom: 18px;
}

.gk-team-tier1 .gk-leader-card__quote {
  font-size: 17px;
  line-height: 1.65;
  font-style: italic;
  color: var(--gk-body);
  border-left: none;
  padding: 0;
  max-width: 660px;
  margin: 0 auto;
}

.gk-team-tier2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  max-width: 960px;
  margin: 0 auto 36px;
}

.gk-team-tier3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1140px;
  margin: 0 auto;
}

@media(max-width:840px) {
  .gk-team-tier2 {
    grid-template-columns: 1fr;
  }

  .gk-team-tier3 {
    grid-template-columns: 1fr;
  }
}

.gk-leader-card {
  background: var(--gk-surface);
  border: 1px solid var(--gk-line);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  gap: 26px;
  padding: 26px;
  box-shadow: 0 10px 30px rgba(15, 37, 22, 0.05);
  align-items: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.gk-leader-card:hover {
  border-color: rgba(22, 163, 74, 0.4);
}

.gk-leader-card__media {
  width: 160px;
  aspect-ratio: 3/4;
  border-radius: 14px;
  overflow: hidden;
  flex: none;
  background: var(--gk-line-soft);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.gk-leader-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.gk-leader-card__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
}

.gk-leader-card__body h3 {
  font-size: 22px;
  font-weight: 800;
  color: var(--gk-navy);
  margin-bottom: 4px;
}

[data-theme="dark"] .gk-leader-card__body h3 {
  color: #fff;
}

.gk-leader-card__role {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gk-green);
  margin-bottom: 12px;
}

.gk-leader-card__quote {
  font-size: 14px;
  line-height: 1.6;
  color: var(--gk-body);
  font-style: italic;
  margin: 0;
  border-left: 2px solid var(--gk-green);
  padding-left: 12px;
}

.gk-person-card {
  background: var(--gk-surface);
  border: 1px solid var(--gk-line);
  border-radius: 20px;
  padding: 32px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.04);
  transition: border-color 0.3s ease;
}

.gk-person-card:hover {
  border-color: rgba(22, 163, 74, 0.4);
}

.gk-person-card__avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 20px;
  border: 3px solid var(--gk-green);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  background: var(--gk-line-soft);
  cursor: pointer;
  transition: border-color 0.3s ease;
}

.gk-person-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: grayscale(100%) contrast(106%) brightness(98%);
  transition: filter 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.gk-person-card__avatar:hover {
  border-color: var(--gk-green);
}

.gk-person-card__avatar:hover img {
  filter: grayscale(0%) contrast(100%) brightness(100%);
}

.gk-team-tier1 .gk-leader-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.gk-person-card h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--gk-navy);
  margin-bottom: 4px;
}

[data-theme="dark"] .gk-person-card h3 {
  color: #fff;
}

.gk-person-card__role {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--gk-green);
  margin-bottom: 10px;
}

.gk-person-card__desc {
  font-size: 12.5px;
  color: var(--gk-body);
  line-height: 1.5;
  margin: 0;
}

/* 5. Growth Timeline */
.gk-timeline-sec {
  padding: 90px 0 56px;
  background: var(--gk-cream);
}

.gk-timeline-wrap {
  max-width: 760px;
  margin: 0 auto;
}

.gk-timeline-list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 44px;
  position: relative;
  isolation: isolate;
}

/* Static background track line (Behind dots) */
.gk-timeline-list::after {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 36px;
  width: 3px;
  background: rgba(64, 181, 84, 0.2);
  border-radius: 2px;
  z-index: 1;
}

/* Animated growing line going downwards (Behind dots) */
.gk-timeline-list::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 36px;
  width: 3px;
  background: linear-gradient(180deg, #40B554 0%, #2FB24C 75%, #F97316 100%);
  box-shadow: 0 0 10px rgba(64, 181, 84, 0.7);
  border-radius: 2px;
  transform-origin: top center;
  transform: scaleY(0);
  transition: transform 1.8s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 2;
  will-change: transform;
}

.gk-timeline-wrap.is-animated .gk-timeline-list::before,
.gk-timeline-sec.is-animated .gk-timeline-list::before {
  transform: scaleY(1);
}

.gk-timeline-item {
  position: relative;
  margin-bottom: 44px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1), transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: opacity, transform;
  z-index: 5;
}

.gk-timeline-item:last-child {
  margin-bottom: 0;
}

/* Staggered sequential appearance as line travels down */
.gk-timeline-wrap.is-animated .gk-timeline-item:nth-child(1),
.gk-timeline-sec.is-animated .gk-timeline-item:nth-child(1) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.15s;
}

.gk-timeline-wrap.is-animated .gk-timeline-item:nth-child(2),
.gk-timeline-sec.is-animated .gk-timeline-item:nth-child(2) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.55s;
}

.gk-timeline-wrap.is-animated .gk-timeline-item:nth-child(3),
.gk-timeline-sec.is-animated .gk-timeline-item:nth-child(3) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.95s;
}

.gk-timeline-wrap.is-animated .gk-timeline-item:nth-child(4),
.gk-timeline-sec.is-animated .gk-timeline-item:nth-child(4) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 1.35s;
}

.gk-timeline-dot {
  position: absolute;
  left: calc(-44px + 1.5px);
  top: 5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--gk-green);
  border: 4px solid var(--gk-cream);
  box-shadow: 0 0 12px rgba(64, 181, 84, 0.7);
  z-index: 10;
  transform: translateX(-50%) scale(0);
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
}

[data-theme="dark"] .gk-timeline-dot {
  border-color: #151C2B;
}

.gk-timeline-wrap.is-animated .gk-timeline-item:nth-child(1) .gk-timeline-dot,
.gk-timeline-sec.is-animated .gk-timeline-item:nth-child(1) .gk-timeline-dot {
  transform: translateX(-50%) scale(1);
  transition-delay: 0.25s;
}

.gk-timeline-wrap.is-animated .gk-timeline-item:nth-child(2) .gk-timeline-dot,
.gk-timeline-sec.is-animated .gk-timeline-item:nth-child(2) .gk-timeline-dot {
  transform: translateX(-50%) scale(1);
  transition-delay: 0.65s;
}

.gk-timeline-wrap.is-animated .gk-timeline-item:nth-child(3) .gk-timeline-dot,
.gk-timeline-sec.is-animated .gk-timeline-item:nth-child(3) .gk-timeline-dot {
  transform: translateX(-50%) scale(1);
  transition-delay: 1.05s;
}

.gk-timeline-wrap.is-animated .gk-timeline-item:nth-child(4) .gk-timeline-dot,
.gk-timeline-sec.is-animated .gk-timeline-item:nth-child(4) .gk-timeline-dot {
  transform: translateX(-50%) scale(1);
  transition-delay: 1.45s;
}

.gk-timeline-year {
  font-size: 26px;
  font-weight: 800;
  color: var(--gk-green);
  margin-bottom: 6px;
  font-family: var(--gk-sans);
}

.gk-timeline-text {
  font-size: 15px;
  color: var(--gk-body);
  line-height: 1.6;
  margin: 0;
}

/* Responsive adjustments for About Page */
@media(max-width:992px) {
  .gk-certs-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .gk-values-grid {
    grid-template-columns: repeat(3, 1fr)
  }

  .gk-team-tier1 {
    grid-template-columns: 1fr
  }

  .gk-team-tier1 .gk-leader-card {
    gap: 22px;
    padding: 24px
  }

  .gk-team-tier1 .gk-leader-card__media {
    width: 200px
  }

  .gk-team-tier1 .gk-leader-card__body h3 {
    font-size: 24px
  }

  .gk-team-tier2 {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:768px) {
  .gk-about-hero {
    min-height: 380px;
    padding: 60px 0
  }

  .gk-mv-sec {
    padding: 44px 0
  }

  .gk-mv-grid {
    grid-template-columns: 1fr;
    margin-bottom: 0;
  }

  .gk-mv-feature {
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 18px
  }

  .gk-mv-feature__icon {
    width: 40px;
    height: 40px;
    flex: none;
  }

  .gk-mv-feature__icon svg {
    width: 20px;
    height: 20px;
  }

  .gk-mv-feature h2 {
    font-size: 18px;
    margin-bottom: 6px;
  }

  .gk-mv-feature p {
    font-size: 13px;
    line-height: 1.5;
  }

  .gk-values-pills {
    display: none
  }

  .gk-team-sec {
    padding: 44px 0 85px
  }

  .gk-leader-card {
    flex-direction: column;
    text-align: center;
    padding: 24px
  }

  .gk-leader-card__media {
    width: 140px
  }

  .gk-team-tier1 .gk-leader-card__media {
    width: 100%;
    max-width: 260px;
    margin: 0 auto
  }

  .gk-team-tier1 .gk-leader-card__body h3 {
    font-size: 18px;
  }

  .gk-leader-card__quote {
    border-left: 0;
    border-top: 2px solid var(--gk-green);
    padding-top: 12px;
    padding-left: 0
  }

  .gk-values-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .gk-certs-grid,
  .gk-team-tier2 {
    grid-template-columns: 1fr
  }
}

/* contact */
.gk-contact-sec {
  padding: 56px 0 70px
}

.gk-contact__grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 34px;
  align-items: start
}

.gk-contact__cards {
  display: grid;
  gap: 16px
}

.gk-card {
  background: var(--gk-surface);
  border: 1px solid var(--gk-line);
  border-radius: var(--gk-radius);
  padding: 20px;
  box-shadow: var(--gk-shadow)
}

.gk-card__icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--gk-green-soft);
  color: var(--gk-green);
  display: grid;
  place-items: center;
  margin-bottom: 13px
}

.gk-card__icon svg {
  width: 17px;
  height: 17px
}

.gk-card h2 {
  font-size: 15px;
  margin-bottom: 7px
}

.gk-card p {
  font-size: 12px;
  color: var(--gk-body)
}

.gk-card__link {
  display: block;
  margin-top: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gk-ink)
}

.gk-card__link:hover {
  color: var(--gk-green)
}

.gk-card__meta {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--gk-line-soft);
  font-size: 11.5px;
  color: var(--gk-muted)
}

.gk-form__lead {
  font-size: 12.5px;
  color: var(--gk-body);
  margin-bottom: 18px
}

.gk-form select {
  width: 100%;
  padding: 10px 13px;
  margin-bottom: 12px;
  border: 1px solid var(--gk-line);
  border-radius: 8px;
  background: var(--gk-page);
  font-size: 12.5px
}

.gk-form select:focus {
  outline: 0;
  border-color: var(--gk-blue);
  box-shadow: 0 0 0 3px rgba(47, 123, 246, .14)
}

@media(max-width:960px) {

  .gk-catalogue__grid,
  .gk-contact__grid {
    grid-template-columns: 1fr
  }

  .gk-filters {
    position: static
  }

  .gk-values__grid,
  .gk-team__grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .gk-certs__grid {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:760px) {

  .gk-values__grid,
  .gk-team__grid,
  .gk-certs__grid {
    grid-template-columns: 1fr
  }

  .gk-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px
  }

  .gk-filters h2 {
    width: 100%
  }

  .gk-filter {
    width: auto
  }
}

/* ================= forms, embeds, single product ================= */
.gk-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden
}

.gk-notice {
  padding: 10px 13px;
  border-radius: 8px;
  font-size: 12.5px;
  margin-bottom: 14px
}

.gk-notice--ok {
  background: var(--gk-green-soft);
  color: var(--gk-green-dk);
  border: 1px solid rgba(47, 178, 76, .35)
}

.gk-notice--err {
  background: #FDECEC;
  color: #B32D2E;
  border: 1px solid rgba(179, 45, 46, .3)
}

[data-theme="dark"] .gk-notice--err {
  background: #3A1D1E;
  color: #F3A6A7
}

.gk-embed {
  margin-top: 14px;
  border: 1px solid var(--gk-line);
  border-radius: 11px;
  overflow: hidden
}

.gk-embed iframe {
  width: 100%;
  height: 190px;
  border: 0;
  display: block
}

.gk-person__photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 14px
}

.gk-single {
  padding: 48px 0 56px
}

.gk-single__grid {
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  gap: 48px;
  align-items: start
}

.gk-single__media {
  background: var(--gk-surface);
  border-radius: 18px;
  padding: 14px;
  border: 1px solid var(--gk-line);
  box-shadow: 0 8px 30px rgba(15, 37, 22, 0.05);
}

[data-theme="dark"] .gk-single__media {
  background: var(--gk-surface);
  border-color: var(--gk-line);
  box-shadow: none;
}

/* Gallery Component */
.gk-product-gallery {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  outline: none;
}

.gk-gallery__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  background: var(--gk-line-soft);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gk-gallery__slides {
  position: relative;
  width: 100%;
  height: 100%;
}

.gk-gallery__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s ease;
  transform: scale(0.985);
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}

.gk-gallery__slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  z-index: 2;
}

.gk-gallery__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

.gk-gallery__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: var(--gk-ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0;
}

[data-theme="dark"] .gk-gallery__arrow {
  background: rgba(26, 34, 51, 0.9);
  border-color: rgba(255, 255, 255, 0.15);
  color: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.gk-gallery__arrow:hover {
  background: var(--gk-green);
  color: #fff;
  border-color: var(--gk-green);
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 6px 20px rgba(64, 181, 84, 0.45);
}

.gk-gallery__arrow--prev {
  left: 14px
}

.gk-gallery__arrow--next {
  right: 14px
}

.gk-gallery__counter {
  position: absolute;
  bottom: 14px;
  right: 14px;
  z-index: 10;
  background: rgba(15, 23, 42, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  pointer-events: none;
}

.gk-gallery__thumbs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 2px 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--gk-line) transparent;
}

.gk-gallery__thumbs::-webkit-scrollbar {
  height: 4px
}

.gk-gallery__thumbs::-webkit-scrollbar-thumb {
  background: var(--gk-line);
  border-radius: 4px
}

.gk-gallery__thumb {
  flex: 0 0 78px;
  width: 78px;
  height: 54px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid var(--gk-line);
  background: var(--gk-line-soft);
  padding: 0;
  cursor: pointer;
  opacity: 0.65;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.gk-gallery__thumb:hover {
  opacity: 0.95;
  border-color: var(--gk-green-dk);
}

.gk-gallery__thumb.is-active {
  opacity: 1;
  border-color: var(--gk-green);
  box-shadow: 0 0 0 2px rgba(64, 181, 84, 0.3);
  transform: translateY(-2px);
}

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

@media(max-width:520px) {
  .gk-gallery__arrow {
    width: 36px;
    height: 36px
  }

  .gk-gallery__arrow--prev {
    left: 8px
  }

  .gk-gallery__arrow--next {
    right: 8px
  }

  .gk-gallery__thumb {
    flex: 0 0 64px;
    width: 64px;
    height: 46px
  }
}

.gk-single h1 {
  font-size: clamp(24px, 3.4vw, 34px);
  margin-bottom: 12px
}

.gk-single__lead {
  font-size: 13.5px;
  color: var(--gk-body);
  margin-bottom: 14px
}

/* Product Variant Selector */
.gk-variant-selector {
  margin: 16px 0 22px;
  background: var(--gk-surface);
  border: 1px solid var(--gk-line);
  border-radius: 12px;
  padding: 13px 15px;
  box-shadow: 0 4px 14px rgba(15, 37, 22, 0.04);
  transition: border-color .2s ease;
}

.gk-variant-selector:hover {
  border-color: var(--gk-green);
}

.gk-variant-selector__label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--gk-body);
}

.gk-variant-selector__icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--gk-green-soft);
  color: var(--gk-green);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.gk-variant-selector__text {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.gk-variant-selector__text strong {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--gk-ink);
  letter-spacing: 0.02em;
}

.gk-variant-selector__text small {
  font-size: 11px;
  color: var(--gk-muted);
  font-weight: 500;
}

.gk-variant-selector__wrap {
  position: relative;
  width: 100%;
}

.gk-variant-selector__select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: var(--gk-page);
  border: 1.5px solid var(--gk-line);
  border-radius: 8px;
  padding: 10px 38px 10px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--gk-ink);
  cursor: pointer;
  outline: none;
  transition: all 0.2s ease;
}

.gk-variant-selector__select:hover {
  border-color: var(--gk-green);
}

.gk-variant-selector__select:focus {
  border-color: var(--gk-green);
  box-shadow: 0 0 0 3px rgba(64, 181, 84, 0.18);
  background: var(--gk-surface);
}

.gk-variant-selector__arrow {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gk-green);
  pointer-events: none;
  display: grid;
  place-items: center;
}

[data-theme="dark"] .gk-variant-selector {
  background: var(--gk-surface);
  border-color: var(--gk-line);
  box-shadow: none;
}

[data-theme="dark"] .gk-variant-selector__select {
  background: var(--gk-page);
  border-color: var(--gk-line);
  color: var(--gk-ink);
}

[data-theme="dark"] .gk-variant-selector__select:focus {
  background: var(--gk-surface);
  border-color: var(--gk-green);
}

.gk-single__h2 {
  font-size: 14px;
  margin-bottom: 10px
}

.gk-single__specs {
  margin: 0 0 20px
}

.gk-single__body {
  font-size: 13.5px;
  color: var(--gk-body)
}

.gk-single__body p {
  margin-bottom: 12px
}

@media(max-width:960px) {
  .gk-single__grid {
    grid-template-columns: 1fr;
    gap: 32px
  }
}

/* ================= chat widget ================= */
/* An explicit display value beats the UA [hidden] rule, so restore it. */
[hidden] {
  display: none !important
}

.gk-chat {
  position: fixed;
  right: 20px;
  bottom: 20px;
  /* Above Leaflet, whose control layer sits at 1000 and would otherwise paint
     over the launcher on the contact page. Still below the header (9999), the
     mobile nav and the sticky CTA bar (9998), which should cover it. */
  z-index: 1100;
  font-family: var(--gk-sans)
}

.gk-chat__launcher {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--gk-green);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 10px 28px -8px rgba(19, 28, 51, .45);
  transition: transform .18s, background .18s
}

.gk-chat__launcher:hover {
  background: var(--gk-green-dk);
  transform: translateY(-2px)
}

.gk-chat__launcher-icon svg {
  width: 18px;
  height: 18px;
  display: block
}

.gk-chat.is-open .gk-chat__launcher {
  display: none
}

.gk-chat__panel {
  width: min(360px, calc(100vw - 32px));
  height: min(520px, calc(100vh - 100px));
  background: var(--gk-navy);
  border: none;
  border-radius: 18px;
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.gk-chat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--gk-navy);
  color: #fff;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}

.gk-chat__head b {
  display: block;
  font-size: 14px
}

.gk-chat__head span {
  font-size: 10.5px;
  color: #9AA6B8
}

.gk-chat__close {
  background: none;
  border: 0;
  color: #9AA6B8;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px
}

.gk-chat__close:hover {
  color: #fff;
  background: rgba(255, 255, 255, .1)
}

.gk-chat__close svg {
  width: 17px;
  height: 17px;
  display: block
}

.gk-chat__log {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--gk-surface);
}

.gk-chat__msg p {
  margin: 0;
  padding: 9px 13px;
  border-radius: 13px;
  font-size: 12.5px;
  line-height: 1.55;
  max-width: 85%;
  width: fit-content
}

.gk-chat__msg--bot p {
  background: var(--gk-line-soft);
  color: var(--gk-ink);
  border-bottom-left-radius: 4px
}

.gk-chat__msg--user {
  display: flex;
  justify-content: flex-end
}

.gk-chat__msg--user p {
  background: var(--gk-green);
  color: #fff;
  border-bottom-right-radius: 4px
}

.gk-chat__choices {
  display: flex;
  flex-wrap: wrap;
  gap: 7px
}

.gk-chat__chip {
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--gk-green);
  background: transparent;
  color: var(--gk-green);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: .15s
}

.gk-chat__chip:hover {
  background: var(--gk-green);
  color: #fff
}

.gk-chat__form {
  display: grid;
  gap: 8px
}

.gk-chat__form input,
.gk-chat__form textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--gk-line);
  border-radius: 9px;
  background: var(--gk-page);
  font-size: 12.5px;
  color: var(--gk-ink)
}

.gk-chat__form input:focus,
.gk-chat__form textarea:focus {
  outline: 0;
  border-color: var(--gk-green);
  box-shadow: 0 0 0 3px rgba(47, 178, 76, .15)
}

.gk-chat__form textarea {
  resize: vertical
}

.gk-chat__hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important
}

.gk-chat__send {
  padding: 10px 16px;
  border: 0;
  border-radius: 9px;
  background: var(--gk-blue);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer
}

.gk-chat__send:hover:not(:disabled) {
  background: var(--gk-blue-dk)
}

.gk-chat__send:disabled {
  opacity: .6;
  cursor: default
}

.gk-chat__error {
  margin: 0;
  font-size: 11.5px;
  color: #B32D2E
}

[data-theme="dark"] .gk-chat__error {
  color: #F3A6A7
}

.gk-chat__foot {
  padding: 9px 16px;
  border-top: 1px solid var(--gk-line-soft);
  background: var(--gk-surface);
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
}

.gk-chat__privacy {
  margin: 0;
  font-size: 10px;
  color: var(--gk-muted);
  text-align: center
}

@media(max-width:520px) {
  .gk-chat {
    right: 12px;
    bottom: 12px;
    left: 12px
  }

  .gk-chat__panel {
    width: 100%;
    height: min(70vh, 480px)
  }

  .gk-chat__launcher {
    margin-left: auto
  }
}

/* The launcher floats with the page but has to stop above the footer, or it
   covers the footer links. Driving a fixed element from a scroll listener
   wobbles on touch: the scroll is composited off the main thread, so a
   JS-computed offset is always a frame or two stale and the error grows with
   swipe speed. `position: sticky` is resolved by the compositor instead, so it
   stays glued at any speed.

   The dock is the sticky range. main.js creates it and sizes it to end just
   above the footer - on load and resize only, never on scroll. Without JS
   there is no dock and .gk-chat keeps its plain fixed positioning above. */
.gk-chat-dock {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  z-index: 1100;
  pointer-events: none
}

/* A bottom inset only ever pushes a sticky box up, never pulls it down, so the
   launcher has to sit at the END of the dock in normal flow - hence the flex
   column above. From there it is lifted to 20px off the viewport bottom until
   the dock runs out, which is where it parks. */
.gk-chat-dock .gk-chat {
  position: sticky;
  top: auto;
  left: auto;
  right: auto;
  bottom: 20px;
  margin-right: 20px;
  max-width: 100%;
  /* Stretched full-width on phones, so the wrapper itself must not swallow
     taps meant for the page behind it - only the launcher and panel do. */
  pointer-events: none
}

.gk-chat-dock .gk-chat > * {
  pointer-events: auto
}

@media(max-width:520px) {
  .gk-chat-dock {
    align-items: stretch
  }

  .gk-chat-dock .gk-chat {
    bottom: 12px;
    margin-left: 12px;
    margin-right: 12px
  }
}

/* ================= v1.2 layout ================= */
.gk-header__contact {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 15px;
  font-weight: 600;
  color: var(--gk-ink)
}

.gk-header__contact svg {
  width: 15px;
  height: 15px;
  color: var(--gk-green)
}

.gk-header__contact:hover {
  color: var(--gk-green)
}

/* catalogue: full width, dropdown + chips */
.gk-catalogue__grid {
  display: block
}

.gk-catalogue__bar {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 18px
}

.gk-select {
  display: grid;
  gap: 5px;
  min-width: 210px
}

.gk-select__label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--gk-body)
}

.gk-select select,
.gk-search input {
  padding: 12px 14px;
  border: 2px solid var(--gk-line);
  border-radius: 8px;
  background: var(--gk-surface);
  font-size: 15px;
  font-weight: 600;
  color: var(--gk-ink);
  width: 100%
}

.gk-select select:focus,
.gk-search input:focus {
  outline: 0;
  border-color: var(--gk-green)
}

.gk-chips {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px
}

.gk-chip-indicator {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gk-green), var(--gk-green-dk));
  box-shadow: 0 6px 16px rgba(64, 181, 84, .32);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition: transform .45s cubic-bezier(.34, 1.4, .64, 1), width .45s cubic-bezier(.34, 1.4, .64, 1), height .45s cubic-bezier(.34, 1.4, .64, 1), opacity .2s ease
}

.gk-chip-indicator.is-ready {
  opacity: 1
}

.gk-chip {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--gk-line);
  background: var(--gk-surface);
  color: var(--gk-body);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, transform .2s ease
}

.gk-chip__icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  flex: none;
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1)
}

.gk-chip__icon svg {
  width: 100%;
  height: 100%
}

.gk-chip:hover {
  border-color: var(--gk-green);
  color: var(--gk-ink);
  transform: translateY(-1px)
}

.gk-chip.is-active {
  background: transparent;
  border-color: transparent;
  color: #fff
}

.gk-chip.is-active:hover {
  background: transparent;
  color: #fff;
  transform: translateY(-1px)
}

.gk-chip.is-active .gk-chip__icon {
  transform: scale(1.15) rotate(-6deg)
}

.gk-chips-hint {
  display: none;
}

@media(max-width:640px) {
  .gk-chips-hint {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--gk-muted);
    margin: 0 0 8px;
  }

  .gk-chips-hint svg {
    width: 13px;
    height: 13px;
  }

  .gk-chips-wrap {
    position: relative;
    margin-left: -16px;
  }

  .gk-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
    padding-left: 16px;
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 16px, black calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, black 16px, black calc(100% - 28px), transparent 100%);
  }

  .gk-chips::-webkit-scrollbar {
    display: none;
  }

  .gk-chip {
    flex: none;
    white-space: nowrap;
  }
}

.gk-catalogue__count {
  display: none
}

.gk-products__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px
}

.gk-product__cat {
  font-size: 11px;
  letter-spacing: .09em;
  font-weight: 800
}

.gk-product h3 {
  font-size: 18px;
  margin-bottom: 12px;
  min-height: auto
}

.gk-spec {
  font-size: 14px;
  padding: 7px 0
}

.gk-spec dt {
  font-weight: 500
}

.gk-spec dd {
  font-weight: 700
}

/* team pyramid */
.gk-team__tier {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px
}

.gk-team__tier:last-child {
  margin-bottom: 0
}

.gk-team__tier--1 {
  margin-bottom: 26px
}

.gk-person {
  background: var(--gk-surface);
  border: 2px solid var(--gk-line);
  border-radius: var(--gk-radius);
  padding: 24px;
  text-align: center;
  flex: 0 1 300px
}

.gk-person--l1 {
  flex: 0 1 460px;
  padding: 32px;
  border-color: var(--gk-green)
}

.gk-person--l2 {
  flex: 0 1 340px
}

.gk-person__photo,
.gk-person__avatar {
  margin: 0 auto 16px
}

.gk-person__photo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--gk-green)
}

.gk-person--l1 .gk-person__photo {
  width: 150px;
  height: 150px
}

.gk-person--l2 .gk-person__photo {
  width: 112px;
  height: 112px
}

.gk-person__avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--gk-green);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 38px;
  font-weight: 800
}

.gk-person--l1 .gk-person__avatar {
  width: 150px;
  height: 150px;
  font-size: 58px
}

.gk-person--l2 .gk-person__avatar {
  width: 112px;
  height: 112px;
  font-size: 44px
}

.gk-person h3 {
  font-size: 18px;
  margin-bottom: 4px
}

.gk-person--l1 h3 {
  font-size: 25px
}

.gk-person__role {
  font-size: 14px;
  color: var(--gk-green);
  font-weight: 700;
  margin-bottom: 10px
}

.gk-person--l1 .gk-person__role {
  font-size: 16px
}

.gk-person p {
  font-size: 14px;
  color: var(--gk-body)
}

.gk-certs--home {
  background: var(--gk-page);
  border-top: 2px solid var(--gk-line)
}

.gk-cert h3 {
  font-size: 17px
}

.gk-cert p {
  font-size: 14px
}

.gk-cert__label {
  font-size: 11px
}

.gk-contact__phones {
  display: grid;
  gap: 3px
}

@media(max-width:960px) {
  .gk-catalogue__bar {
    grid-template-columns: 1fr
  }

  .gk-products__grid {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:760px) {

  .gk-header__contact span,
  .gk-header__contact {
    font-size: 0
  }

  .gk-header__contact svg {
    width: 19px;
    height: 19px
  }

  .gk-products__grid {
    grid-template-columns: 1fr
  }

  .gk-person,
  .gk-person--l1,
  .gk-person--l2 {
    flex: 1 1 100%
  }
}

/* content protection */
.gk-protect-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 200;
  background: var(--gk-navy);
  color: #fff;
  padding: 11px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  opacity: 1;
  transition: opacity .35s
}

.gk-protect-toast.is-out {
  opacity: 0
}

.gk-noselect body {
  user-select: none;
  -webkit-user-select: none
}

.gk-noselect input,
.gk-noselect textarea {
  user-select: text;
  -webkit-user-select: text
}

.gk-person__photo--placeholder {
  background: var(--gk-green-soft);
  border-color: var(--gk-line)
}

/* ================= wide screens ================= */
@media(min-width:1500px) {
  .gk-products__grid {
    grid-template-columns: repeat(4, 1fr)
  }

  .gk-testimonials__grid {
    grid-template-columns: repeat(3, 1fr)
  }

  .gk-hero {
    padding: 72px 0 190px
  }
}

@media(min-width:1900px) {
  .gk-container {
    padding: 0 56px
  }

  .gk-features__grid {
    gap: 24px
  }
}

@media(max-width:1100px) {
  .gk-container {
    padding: 0 28px
  }
}

@media(max-width:760px) {
  .gk-container {
    padding: 0 20px
  }
}

/* ================= homepage direction ================= */
.gk-header {
  background: rgba(252, 251, 247, .94);
  border-bottom: 1px solid var(--gk-line);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background .25s ease, border-color .25s ease;
}

[data-theme="dark"] .gk-header {
  background: rgba(16, 23, 37, .94);
  border-bottom-color: var(--gk-line);
}

[data-theme="dark"] .gk-header .gk-logo img {
  filter: brightness(1.15) drop-shadow(0 0 1px rgba(255, 255, 255, 0.4));
}

.gk-header__in {
  height: 82px
}

.gk-logo b {
  font-family: var(--gk-sans);
  font-size: 24px;
  letter-spacing: .18em;
  color: var(--gk-green)
}

.gk-logo img {
  height: 48px;
  max-height: 50px;
  width: auto;
  max-width: 280px;
  object-fit: contain;
  display: block
}

.gk-footer .gk-logo img {
  filter: brightness(0) invert(1);
  height: 48px;
  max-height: 50px;
  max-width: 280px;
  width: auto;
  object-fit: contain;
  object-position: left center;
  display: block
}

.gk-logo i {
  height: 4px;
  background: var(--gk-orange);
  margin-top: 4px
}

.gk-header__contact {
  font-size: 14px;
  font-weight: 700;
  color: var(--gk-ink)
}

.gk-btn--blue {
  background: var(--gk-blue);
  color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(37, 117, 252, .25)
}

.gk-btn--blue:hover {
  background: var(--gk-blue-dk);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(37, 117, 252, .35)
}

.gk-btn--ghost {
  border-color: rgba(255, 255, 255, .7);
  background: rgba(15, 48, 28, .12)
}

.gk-hero {
  min-height: 480px;
  padding: 65px 0 120px;
  text-align: left;
  display: flex;
  align-items: center
}

.gk-hero__bg img {
  filter: saturate(.9);
  object-position: center 45%
}

.gk-hero::after {
  background: linear-gradient(90deg, rgba(8, 39, 20, .88) 0%, rgba(8, 39, 20, .62) 44%, rgba(8, 39, 20, .1) 82%), linear-gradient(0deg, rgba(8, 39, 20, .64), transparent 45%)
}

.gk-hero .gk-container {
  max-width: 1280px
}

.gk-hero p.gk-badge {
  background: var(--gk-orange);
  color: #fff;
  border-radius: 2px;
  padding: 8px 12px;
  font-size: 10px;
  letter-spacing: .13em
}

.gk-hero h1 {
  max-width: 650px;
  font-family: var(--gk-serif);
  font-size: clamp(44px, 6vw, 76px);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.04em
}

.gk-hero h1 span {
  color: #F7A45F
}

.gk-hero p:not(.gk-badge) {
  max-width: 520px;
  margin: 18px 0 0;
  color: #F5F4EA;
  font-size: 17px;
  line-height: 1.55
}

.gk-hero__cta {
  justify-content: flex-start;
  margin-top: 26px
}

.gk-features {
  margin-top: -60px;
  position: relative;
  z-index: 10;
  padding-bottom: 0
}

.gk-features__grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  background: transparent;
  box-shadow: none
}

.gk-feature {
  background: var(--gk-surface);
  border: 1px solid rgba(221, 228, 217, 0.7);
  border-radius: 16px;
  padding: 30px 24px;
  box-shadow: 0 12px 32px rgba(15, 37, 22, 0.06);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease
}

.gk-feature:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(15, 37, 22, 0.12);
  border-color: rgba(64, 181, 84, 0.4)
}

.gk-feature__icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  margin-bottom: 20px;
  background: linear-gradient(135deg, rgba(64, 181, 84, 0.14), rgba(64, 181, 84, 0.04));
  color: var(--gk-green);
  display: grid;
  place-items: center;
  border: 1px solid rgba(64, 181, 84, 0.2);
  box-shadow: 0 4px 12px rgba(64, 181, 84, 0.08);
  transition: transform .2s ease, background .2s ease, color .2s ease
}

.gk-feature:hover .gk-feature__icon {
  transform: scale(1.06);
  background: var(--gk-green);
  color: #fff;
  border-color: var(--gk-green)
}

.gk-feature__icon svg {
  width: 26px;
  height: 26px
}

.gk-feature h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--gk-navy);
  margin-bottom: 10px;
  line-height: 1.3
}

.gk-feature p {
  font-size: 14px;
  color: var(--gk-body);
  line-height: 1.6;
  margin: 0
}

[data-theme="dark"] .gk-feature {
  background: var(--gk-surface);
  border-color: var(--gk-line);
  box-shadow: none
}

[data-theme="dark"] .gk-feature h3 {
  color: #fff
}

[data-theme="dark"] .gk-feature__icon {
  background: rgba(64, 181, 84, 0.2);
  border-color: rgba(64, 181, 84, 0.3)
}

.gk-about {
  padding: 54px 0 50px;
  background: linear-gradient(180deg, var(--gk-page) 0%, var(--gk-cream) 50%, var(--gk-page) 100%)
}

[data-theme="dark"] .gk-about {
  background: linear-gradient(180deg, var(--gk-page) 0%, #151D2C 50%, var(--gk-page) 100%)
}

.gk-about__grid {
  gap: 90px
}

.gk-eyebrow {
  color: var(--gk-orange)
}

/* Named --orange but painted green here, and the contact page relies on that,
   so it is left alone: the About eyebrow is fixed by a scoped rule at the end
   of this file instead. */
.gk-eyebrow--orange {
  color: var(--gk-green)
}

.gk-about h2 {
  font-family: var(--gk-sans);
  font-size: clamp(34px, 3.8vw, 52px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em
}

.gk-about h2 span {
  color: var(--gk-green)
}

.gk-about p {
  max-width: 530px;
  text-align: justify;
  text-justify: inter-word
}

.gk-stats {
  gap: 0;
  margin-top: 34px
}

.gk-stat {
  border: 0;
  border-left: 3px solid var(--gk-orange);
  border-radius: 0;
  background: transparent;
  text-align: left;
  padding: 5px 22px 5px 14px
}

.gk-stat b {
  font-family: var(--gk-sans);
  font-size: 31px;
  font-weight: 800;
  color: var(--gk-green)
}

.gk-products {
  padding: 50px 0 50px;
  background: var(--gk-page)
}

.gk-section-head {
  text-align: left;
  margin-bottom: 44px
}

.gk-section-head h2 {
  font-family: var(--gk-sans);
  font-size: clamp(32px, 3.5vw, 48px);
  font-weight: 800;
  letter-spacing: -0.02em
}

.gk-products__grid {
  gap: 24px
}

.gk-product {
  border: 1px solid var(--gk-line);
  border-radius: 0;
  box-shadow: 0 5px 0 var(--gk-line);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform .2s, box-shadow .2s
}

.gk-product:hover {
  border-color: var(--gk-green);
  box-shadow: 0 8px 0 var(--gk-green)
}

.gk-product__img {
  background: #E8EBDD;
  padding: 0;
  overflow: hidden
}

[data-theme="dark"] .gk-product__img {
  background: #1A2333
}

.gk-product__img img {
  border-radius: 0;
  aspect-ratio: 4/3;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.gk-product:hover .gk-product__img img {
  transform: scale(1.07)
}

.gk-product__body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto
}

.gk-product h3,
.gk-product__title {
  color: var(--gk-green-dk);
  font-family: var(--gk-sans);
  font-weight: 800;
  line-height: 1.26;
  margin: 0 0 12px 0;
  display: block;
  letter-spacing: -0.015em;
  transition: min-height 0.15s ease;
}

[data-theme="dark"] .gk-product h3,
[data-theme="dark"] .gk-product__title {
  color: var(--gk-green)
}

.gk-product__title--sm {
  font-size: 18px
}

.gk-product__title--md {
  font-size: 16.5px
}

.gk-product__title--lg {
  font-size: 15px
}

.gk-product__title--xl {
  font-size: 13.5px;
  line-height: 1.22
}

.gk-product dl {
  margin: 0 0 16px 0
}

.gk-product .gk-btn {
  margin-top: auto;
  width: 100%
}

/* ---------- dealer network section (ditto design) ---------- */
.gk-dealer {
  padding: 50px 0;
  background: #F6F5EE;
  color: var(--gk-ink);
}

[data-theme="dark"] .gk-dealer {
  background: #0E1524;
}

.gk-dealer__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 64px;
  align-items: center;
}

@media(max-width:960px) {
  .gk-dealer__grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }
}

.gk-dealer .gk-eyebrow {
  font-family: var(--gk-sans);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #16A34A;
  margin-bottom: 12px;
}

.gk-dealer h2 {
  font-family: var(--gk-sans);
  font-size: clamp(32px, 3.6vw, 44px);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--gk-ink);
  line-height: 1.15;
  margin-bottom: 34px;
}

[data-theme="dark"] .gk-dealer h2 {
  color: #FFFFFF;
}

.gk-dealer .gk-reason {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 24px;
}

.gk-dealer .gk-reason:last-child {
  margin-bottom: 0;
}

.gk-dealer .gk-reason__tick {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  background: #D7F0D5;
  color: #16A34A;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

[data-theme="dark"] .gk-dealer .gk-reason__tick {
  background: rgba(22, 163, 74, 0.22);
  color: #4ADE80;
}

.gk-dealer .gk-reason__tick svg {
  width: 17px;
  height: 17px;
  stroke-width: 2.6;
}

.gk-dealer .gk-reason h3 {
  font-family: var(--gk-sans);
  font-size: 16px;
  font-weight: 700;
  color: var(--gk-ink);
  margin: 0 0 4px 0;
  line-height: 1.3;
}

[data-theme="dark"] .gk-dealer .gk-reason h3 {
  color: #FFFFFF;
}

.gk-dealer .gk-reason p {
  font-size: 13.5px;
  line-height: 1.55;
  color: #64748B;
  margin: 0;
  max-width: 440px;
}

[data-theme="dark"] .gk-dealer .gk-reason p {
  color: #94A3B8;
}

/* White form card */
.gk-dealer .gk-form {
  background: #FFFFFF;
  border-radius: 20px;
  padding: 38px 36px 42px 36px;
  box-shadow: 0 12px 35px rgba(15, 23, 42, 0.05);
  border: 1px solid rgba(226, 232, 240, 0.7);
}

[data-theme="dark"] .gk-dealer .gk-form {
  background: #1A2333;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3);
}

.gk-dealer .gk-form h3 {
  font-family: var(--gk-sans);
  font-size: 24px;
  font-weight: 800;
  color: var(--gk-ink);
  letter-spacing: -0.015em;
  margin: 0 0 24px 0;
}

[data-theme="dark"] .gk-dealer .gk-form h3 {
  color: #FFFFFF;
}

.gk-form__fields--compact .gk-field-label {
  display: none;
}

.gk-form__fields--compact .gk-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

.gk-form__fields--compact .gk-field-wrap {
  margin-bottom: 14px;
}

.gk-form__fields--compact input,
.gk-form__fields--compact textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  background: #FFFFFF;
  font-size: 14px;
  color: var(--gk-ink);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  font-family: var(--gk-sans);
  box-sizing: border-box;
}

[data-theme="dark"] .gk-form__fields--compact input,
[data-theme="dark"] .gk-form__fields--compact textarea {
  background: #0F172A;
  border-color: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
}

.gk-form__fields--compact input::placeholder,
.gk-form__fields--compact textarea::placeholder {
  color: #94A3B8;
}

[data-theme="dark"] .gk-form__fields--compact input::placeholder,
[data-theme="dark"] .gk-form__fields--compact textarea::placeholder {
  color: #64748B;
}

.gk-form__fields--compact input:focus,
.gk-form__fields--compact textarea:focus {
  outline: none;
  border-color: #2563EB;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

.gk-form__fields--compact textarea {
  min-height: 105px;
  resize: none;
  margin-bottom: 6px;
}

.gk-form__fields--compact .gk-form__submit {
  width: 100%;
  height: 48px;
  border-radius: 10px;
  background: #1D68FE;
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(29, 104, 254, 0.28);
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.gk-form__fields--compact .gk-form__submit:hover {
  background: #1557E0;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(29, 104, 254, 0.38);
}

.gk-form__fields--compact .gk-form__submit svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.5;
  color: #FFFFFF;
  transition: transform 0.2s ease;
}

.gk-form__fields--compact .gk-form__submit:hover svg {
  transform: translateX(4px);
}

.gk-testimonials {
  padding: 50px 0 90px;
  background: linear-gradient(180deg, var(--gk-page) 0%, var(--gk-cream) 50%, var(--gk-page) 100%)
}

[data-theme="dark"] .gk-testimonials {
  background: linear-gradient(180deg, var(--gk-page) 0%, #151D2C 50%, var(--gk-page) 100%)
}

.gk-quote {
  border: 0;
  border-top: 4px solid var(--gk-orange);
  border-radius: 0;
  box-shadow: var(--gk-shadow);
  padding: 28px
}

.gk-quote blockquote {
  font-family: var(--gk-sans);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.55
}

/* ================= INTERACTIVE WORLD PRESENCE MAP ================= */
.gk-map {
  padding: 48px 0 54px;
  background: linear-gradient(180deg, var(--gk-page) 0%, #F5F7F4 45%, #F0F4EF 75%, var(--gk-page) 100%);
  position: relative;
  overflow: hidden;
}

[data-theme="dark"] .gk-map {
  background: linear-gradient(180deg, var(--gk-page) 0%, #0D1524 50%, var(--gk-page) 100%);
}

.gk-section-head--center {
  text-align: center;
  margin-bottom: 20px;
}

.gk-section-head--center .gk-section-head__sub {
  max-width: 680px;
  margin: 6px auto 0;
  font-size: 14px;
  color: var(--gk-body);
}

.gk-world-map-wrap {
  max-width: 1200px;
  margin: 20px auto 0;
  position: relative;
}

/* Filter Chips */
.gk-map-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-bottom: 34px;
}

.gk-map-chip {
  background: var(--gk-surface);
  border: 1px solid var(--gk-line);
  padding: 11px 22px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--gk-ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  transition: all .2s ease;
  box-shadow: 0 2px 6px rgba(15, 37, 22, 0.03);
}

.gk-map-chip small {
  color: var(--gk-muted);
  font-size: 12px;
  font-weight: 500;
  transition: color .2s ease;
}

.gk-map-chip:hover {
  border-color: var(--gk-green);
  color: var(--gk-green);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(64, 181, 84, 0.15);
}

.gk-map-chip.is-active {
  background: var(--gk-green);
  border-color: var(--gk-green);
  color: #fff;
  box-shadow: 0 4px 16px rgba(64, 181, 84, 0.35);
}

.gk-map-chip.is-active small {
  color: rgba(255, 255, 255, 0.85);
}

[data-theme="dark"] .gk-map-chip {
  background: var(--gk-surface);
  border-color: var(--gk-line);
  color: var(--gk-ink);
}

[data-theme="dark"] .gk-map-chip.is-active {
  background: var(--gk-green);
  color: #fff;
}

/* Map Stage */
.gk-map-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1000 / 400;
  min-height: 380px;
  background: radial-gradient(ellipse at 65% 45%, #FFFFFF 0%, #FAF8F2 70%, #F3EFE4 100%);
  border-radius: 20px;
  border: 1px solid rgba(221, 228, 217, 0.9);
  box-shadow: 0 12px 32px rgba(15, 37, 22, 0.06);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  contain: layout style paint;
  transform: translateZ(0);
  will-change: transform;
}

[data-theme="dark"] .gk-map-stage {
  background: radial-gradient(ellipse at 65% 45%, #131C2D 0%, #0C1220 70%, #080C16 100%);
  border-color: rgba(64, 181, 84, 0.25);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}

.gk-vector-world-map {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  transform: translateZ(0);
  shape-rendering: geometricPrecision;
}

/* Crisp Vector Country Styling (Zero Noise) */
.gk-countries {
  pointer-events: none
}

.gk-c {
  fill: #EA9F4E;
  stroke: #FFFFFF;
  stroke-width: 0.6;
  stroke-linejoin: round;
  stroke-linecap: round;
  opacity: 0.88;
}

.gk-c--export {
  fill: #DF8730;
  opacity: 0.96;
}

.gk-c--hq {
  fill: #40B554;
  stroke: #FFFFFF;
  stroke-width: 0.8;
  opacity: 1;
}

[data-theme="dark"] .gk-c {
  fill: #B66C24;
  stroke: #131C2D;
  stroke-width: 0.6;
  opacity: 0.75;
}

[data-theme="dark"] .gk-c--export {
  fill: #D87E24;
  opacity: 0.95;
}

[data-theme="dark"] .gk-c--hq {
  fill: #40B554;
  stroke: #FFFFFF;
  opacity: 1;
}

/* Static Trade Arcs */
.gk-arc {
  transition: opacity .3s ease, stroke-width .3s ease;
}

/* Location Pins */
.gk-map-pins {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform: translateZ(0);
}

.gk-map-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  pointer-events: auto;
  transition: transform .2s ease, opacity .3s ease;
  outline: none;
  z-index: 20;
}

.gk-map-pin.is-dimmed {
  opacity: 0.2;
  transform: translate(-50%, -50%) scale(0.7);
}

.gk-map-pin:hover,
.gk-map-pin:focus {
  z-index: 50;
  transform: translate(-50%, -50%) scale(1.2);
}

/* Sleek Radar Wave Animation */
@keyframes gk-radar {
  0% {
    transform: scale(0.6) translateZ(0);
    opacity: 0.85
  }

  50% {
    opacity: 0.3
  }

  100% {
    transform: scale(2.0) translateZ(0);
    opacity: 0
  }
}

.gk-pin-radar {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(64, 181, 84, 0.3);
  border: 1px solid #40B554;
  animation: gk-radar 2.4s cubic-bezier(0.2, 0.6, 0.35, 1) infinite;
  pointer-events: none;
  transform: translateZ(0);
  will-change: transform, opacity;
}

.gk-pin-radar--delayed {
  animation-delay: 1.2s;
}

/* Core Dot Indicator */
.gk-pin-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #40B554;
  border: 1.5px solid #fff;
  box-shadow: 0 0 6px rgba(64, 181, 84, 0.9), 0 1px 3px rgba(0, 0, 0, 0.25);
  position: relative;
  z-index: 2;
  transition: all .2s ease;
}

.gk-map-pin:hover .gk-pin-dot {
  background: #F97316;
  box-shadow: 0 0 8px rgba(249, 115, 22, 1);
}

/* Special Jaipur HQ Pin */
.gk-map-pin--hq {
  z-index: 30;
}

.gk-map-pin--hq .gk-pin-radar {
  width: 16px;
  height: 16px;
  background: rgba(249, 115, 22, 0.35);
  border-color: #F97316;
  animation-duration: 1.8s;
}

.gk-map-pin--hq .gk-pin-dot {
  width: 12px;
  height: 12px;
  background: linear-gradient(135deg, #F97316, #E87524);
  border: 2px solid #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 0 12px rgba(249, 115, 22, 1), 0 2px 6px rgba(0, 0, 0, 0.3);
}

.gk-pin-hq-star {
  font-size: 7.5px;
  color: #fff;
  line-height: 1;
}

.gk-pin-hq-badge {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #F97316, #C75A12);
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 3px 8px rgba(249, 115, 22, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.7);
  pointer-events: none;
}





/* Bottom Metrics Strip */
.gk-map-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 14px;
}

.gk-metric-card {
  background: var(--gk-surface);
  border: 1px solid rgba(221, 228, 217, 0.8);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 4px 16px rgba(15, 37, 22, 0.03);
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: transform .2s ease, box-shadow .2s ease;
}

.gk-metric-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 37, 22, 0.06);
  border-color: rgba(64, 181, 84, 0.3);
}

.gk-metric-val {
  font-family: var(--gk-sans);
  font-size: 22px;
  font-weight: 800;
  color: var(--gk-green);
  line-height: 1.1;
  margin-bottom: 2px;
}

.gk-metric-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gk-navy);
  margin-bottom: 4px;
}

.gk-metric-card p {
  font-size: 11.5px;
  color: var(--gk-body);
  line-height: 1.4;
  margin: 0;
}

.gk-metric-card--cta {
  background: linear-gradient(135deg, rgba(64, 181, 84, 0.1), rgba(37, 117, 252, 0.05));
  border-color: rgba(64, 181, 84, 0.3);
}

.gk-metric-card--cta .gk-btn {
  margin-top: 6px;
  padding: 6px 12px;
  font-size: 11.5px;
  align-self: flex-start;
}

[data-theme="dark"] .gk-metric-card {
  background: var(--gk-surface);
  border-color: var(--gk-line);
}

[data-theme="dark"] .gk-metric-label {
  color: #fff;
}

[data-theme="dark"] .gk-metric-card--cta {
  background: linear-gradient(135deg, rgba(64, 181, 84, 0.15), rgba(37, 117, 252, 0.1));
}

@media(max-width:960px) {
  .gk-map-metrics {
    grid-template-columns: repeat(2, 1fr);
  }

  .gk-map-stage {
    min-height: 380px;
  }
}

@media(max-width:640px) {
  .gk-map-stage {
    aspect-ratio: 1000 / 400;
    height: auto;
    min-height: 0;
    overflow: hidden;
    width: calc(100% + 40px);
    margin-left: -20px;
    margin-right: -20px;
    border-radius: 0;
  }

  .gk-vector-world-map {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    touch-action: pan-y;
  }

  .gk-map-metrics {
    grid-template-columns: 1fr;
  }

  .gk-map-filters {
    gap: 10px;
    margin-bottom: 24px;
  }

  .gk-map-chip {
    font-size: 12.5px;
    padding: 9px 16px;
  }
}

.gk-footer {
  background: var(--gk-navy);
  padding-top: 70px
}

@media(max-width:960px) {
  .gk-hero {
    min-height: 440px
  }

  .gk-features__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px
  }
}

@media(max-width:760px) {
  .gk-header__in {
    height: 68px
  }

  .gk-hero {
    min-height: 420px;
    padding: 60px 0 100px
  }

  .gk-hero__bg img {
    object-position: 78% 45%
  }

  .gk-hero h1 {
    font-size: 44px
  }

  .gk-features {
    margin-top: -40px
  }

  .gk-features__grid {
    grid-template-columns: 1fr;
    gap: 14px
  }

  .gk-about,
  .gk-products,
  .gk-dealer,
  .gk-testimonials,
  .gk-map {
    padding: 60px 0
  }

  .gk-section-head {
    margin-bottom: 28px
  }

  .gk-section-head h2 {
    font-size: 36px
  }

  .gk-logo img {
    height: 36px
  }
}

@media(max-width:480px) {
  .gk-logo img {
    height: 30px
  }

  .gk-header .gk-btn--sm {
    display: none
  }
}

@media(max-width:600px) {
  .gk-stats {
    flex-wrap: nowrap;
    gap: 0;
  }

  .gk-stat {
    min-width: 0;
    flex: 1 1 0;
    padding: 5px 10px 5px 12px;
  }

  .gk-stat b {
    font-size: 24px;
  }

  .gk-stat span {
    font-size: 10.5px;
  }
}

@media(max-width:760px) {

  /* Homepage highlights and testimonials become horizontal snapping strips:
     one card fills the screen and the rest are swiped in, so four products or
     three quotes cost the height of one. This is why the fourth product card no
     longer needs hiding on mobile.

     Scoped to the section deliberately - the catalogue page wraps the same
     .gk-products__grid in .gk-catalogue, and turning 30+ products into a
     one-at-a-time swipe would bury the whole range. */
  .gk-products .gk-products__grid,
  .gk-testimonials .gk-testimonials__grid,
  .gk-certs-sec .gk-certs-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 88%;
    grid-template-columns: none;
    gap: 14px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* Bleed out to the screen edges and pad back in, so a sliver of the next
       card shows past the container gutter. That peek is the only affordance
       that there is anything to swipe. */
    margin-left: -20px;
    margin-right: -20px;
    padding: 4px 20px 6px;
    scroll-padding-left: 20px;
    scrollbar-width: none;
  }

  /* The scrollbar would sit across the card bottoms on desktop-class mobile
     browsers; the peek carries the affordance instead. */
  .gk-products .gk-products__grid::-webkit-scrollbar,
  .gk-testimonials .gk-testimonials__grid::-webkit-scrollbar,
  .gk-certs-sec .gk-certs-grid::-webkit-scrollbar {
    display: none;
  }

  .gk-products .gk-product,
  .gk-testimonials .gk-quote,
  .gk-certs-sec .gk-cert-card {
    scroll-snap-align: start;
  }
}

/* ================================================================
   REDESIGNED CONTACT US PAGE (WORLD-CLASS COMMUNICATIONS HUB)
   ================================================================ */

/* 1. Atmospheric Hero Section */
.gk-contact-hero {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: 75px 0 95px;
  background: #0B1320;
}

.gk-contact-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 38%;
  opacity: 1;
}

.gk-contact-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 19, 32, 0.18) 0%, rgba(11, 19, 32, 0.4) 100%);
}

.gk-contact-hero__content {
  position: relative;
  z-index: 2;
  max-width: 840px;
  margin: 0 auto;
}

.gk-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 22px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

.gk-badge-pill::before,
.gk-badge-pill::after {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: rgba(134, 239, 172, 0.5);
  flex-shrink: 0;
}

.gk-badge-dot {
  display: none;
}

.gk-contact-hero h1 {
  font-size: clamp(34px, 5.2vw, 54px);
  font-weight: 800;
  color: #fff;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6);
}

.gk-contact-hero h1 span {
  color: var(--gk-green);
}

.gk-contact-hero__lead {
  font-size: 16.5px;
  line-height: 1.6;
  color: #CBD5E1;
  max-width: 760px;
  margin: 0 auto;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.65);
}

.gk-hero-pills {
  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: center;
  margin-top: 26px;
  flex-wrap: wrap;
}

.gk-hero-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(11, 19, 32, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 700;
  color: #F1F5F9;
  line-height: 1;
  box-sizing: border-box;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

.gk-hero-pill svg {
  width: 15px;
  height: 15px;
  color: var(--gk-green);
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}

.gk-hero-pill span {
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
}

@media(max-width:600px) {
  .gk-contact-hero {
    padding: 56px 0 64px;
  }

  .gk-contact-hero__lead {
    display: none;
  }

  .gk-hero-pills {
    margin-top: 18px;
  }
}

/* 2. 4-Pillar Fast-Reach Department Cards */
.gk-pillars-sec {
  margin-top: -50px;
  position: relative;
  z-index: 10;
  padding-bottom: 20px;
}

.gk-pillars-sec .gk-container {
  max-width: 1440px;
  padding: 0 24px;
}

.gk-pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.gk-pillar-card {
  background: var(--gk-surface);
  border: 1px solid var(--gk-line);
  border-radius: 20px;
  padding: 32px 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.gk-pillar-card:hover {
  transform: translateY(-5px);
  border-color: var(--gk-green);
  box-shadow: 0 18px 40px rgba(64, 181, 84, 0.14);
}

.gk-pillar-card__icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  margin-bottom: 22px;
}

.gk-pillar-card__icon svg {
  width: 24px;
  height: 24px;
}

.gk-pillar-card__icon--green {
  background: var(--gk-green-soft);
  color: var(--gk-green);
}

.gk-pillar-card__icon--blue {
  background: rgba(37, 117, 252, 0.12);
  color: var(--gk-blue);
}

.gk-pillar-card__icon--orange {
  background: rgba(249, 115, 22, 0.12);
  color: var(--gk-orange);
}

.gk-pillar-card__icon--whatsapp {
  background: #25D366 !important;
  color: #FFFFFF !important;
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.gk-pillar-card:hover .gk-pillar-card__icon--whatsapp {
  transform: scale(1.06);
  box-shadow: 0 10px 24px rgba(37, 211, 102, 0.45);
}

.gk-pillar-card__icon--whatsapp svg {
  width: 26px;
  height: 26px;
  fill: #FFFFFF !important;
}

.gk-pillar-card__tag {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--gk-muted);
  margin-bottom: 8px;
}

.gk-pillar-card h3 {
  font-size: 18px;
  font-weight: 800;
  color: var(--gk-ink);
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}

.gk-pillar-card__desc {
  font-size: 13.5px;
  color: var(--gk-body);
  line-height: 1.68;
  margin-bottom: 26px;
  flex: 1;
}

.gk-pillar-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 16px;
  border-radius: 12px;
  background: var(--gk-line-soft);
  color: var(--gk-green);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
}

.gk-pillar-card__btn svg {
  width: 14px;
  height: 14px;
  transition: transform 0.2s ease;
}

.gk-pillar-card__btn:hover {
  background: var(--gk-green);
  color: #fff;
}

.gk-pillar-card__btn:hover svg {
  transform: translateX(4px);
}

.gk-pillar-card__btn--blue {
  color: var(--gk-blue);
}

.gk-pillar-card__btn--blue:hover {
  background: var(--gk-blue);
  color: #fff;
}

.gk-pillar-card__btn--orange {
  color: var(--gk-orange);
}

.gk-pillar-card__btn--orange:hover {
  background: var(--gk-orange);
  color: #fff;
}

.gk-pillar-card__btn--whatsapp {
  color: #128C7E;
}

.gk-pillar-card__btn--whatsapp:hover {
  background: #25D366;
  color: #fff;
}

/* 3. Dual-Column Manufacturing Hub & Quotation Form */
.gk-contact-main-sec {
  padding: 50px 0 80px;
  background: var(--gk-page);
}

.gk-contact-main-sec .gk-container,
.gk-map .gk-container {
  max-width: 1440px;
  padding: 0 24px;
}

.gk-contact-main-grid {
  display: grid;
  grid-template-columns: 1fr 1.22fr;
  gap: 40px;
  align-items: stretch;
}

.gk-plant-col,
.gk-form-col {
  display: flex;
  flex-direction: column;
}

/* Plant Column */
.gk-plant-card {
  background: var(--gk-surface);
  border: 1px solid var(--gk-line);
  border-radius: 22px;
  padding: 44px 40px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.04);
}

.gk-plant-card__badge {
  display: inline-block;
  background: var(--gk-green-soft);
  color: var(--gk-green);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 6px;
  margin-bottom: 10px;
}

.gk-plant-card h2 {
  font-size: 24px;
  font-weight: 800;
  color: var(--gk-ink);
  margin-bottom: 6px;
  line-height: 1.25;
}

.gk-plant-card__sub {
  font-size: 14px;
  color: var(--gk-body);
  margin-bottom: 28px;
  line-height: 1.5;
}

.gk-plant-details {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.gk-plant-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.gk-plant-row__icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--gk-line-soft);
  display: grid;
  place-items: center;
  color: var(--gk-green);
  flex-shrink: 0;
  margin-top: 2px;
}

.gk-plant-row__icon svg {
  width: 18px;
  height: 18px;
}

.gk-plant-row__icon .dashicons {
  font-size: 18px;
  width: 18px;
  height: 18px;
}

.gk-plant-row b {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--gk-ink);
  margin-bottom: 3px;
}

.gk-plant-row p {
  font-size: 13.5px;
  color: var(--gk-body);
  line-height: 1.5;
  margin: 0;
}

.gk-plant-phones a,
.gk-plant-emails a {
  display: block;
  color: var(--gk-ink);
  font-weight: 600;
  text-decoration: none;
  margin-bottom: 2px;
  transition: color 0.15s ease;
}

.gk-plant-phones a:hover,
.gk-plant-emails a:hover {
  color: var(--gk-green);
}

.gk-plant-dir-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--gk-blue);
  text-decoration: none;
  transition: color 0.15s ease;
}

.gk-plant-dir-link:hover {
  color: var(--gk-blue-dk);
  text-decoration: underline;
}

.gk-plant-dir-link svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.gk-plant-map-wrap {
  margin-top: 24px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--gk-line);
  height: 240px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04);
}

.gk-plant-map-wrap iframe,
.gk-plant-map-wrap #gk-plant-map {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Form Column */
.gk-form-card {
  background: var(--gk-surface);
  border: 1px solid var(--gk-line);
  border-radius: 22px;
  padding: 48px 46px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.05);
}

.gk-form-card__header {
  margin-bottom: 32px;
}

.gk-form-card__header h2 {
  font-size: 25px;
  font-weight: 800;
  color: var(--gk-ink);
  margin-bottom: 7px;
}

.gk-form-card__lead {
  font-size: 14px;
  color: var(--gk-body);
  line-height: 1.5;
}

.gk-contact-tractor-img {
  margin-top: 24px;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.05);
  background: var(--gk-surface);
  flex-grow: 1;
  min-height: 240px;
}

.gk-contact-tractor-img img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* The green/orange gradient rule under the header was asked to come off the
   site everywhere. Kept as display:none rather than deleted, so any stray
   markup that still carries the class renders nothing. */
.gk-beautiful-divider {
  display: none;
}

.gk-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

.gk-field-wrap {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 24px;
}

.gk-form__row .gk-field-wrap {
  margin-bottom: 0;
}

.gk-field-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--gk-ink);
}

.gk-required {
  color: #EF4444;
  font-weight: 700;
}

.gk-field-wrap input,
.gk-field-wrap select,
.gk-field-wrap textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--gk-line);
  background: var(--gk-page);
  font-size: 14px;
  line-height: 1.5;
  color: var(--gk-ink);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  font-family: inherit;
}

.gk-field-wrap input:focus,
.gk-field-wrap select:focus,
.gk-field-wrap textarea:focus {
  outline: none;
  border-color: var(--gk-green);
  box-shadow: 0 0 0 3px rgba(64, 181, 84, 0.16);
  background: var(--gk-surface);
}

.gk-field-wrap textarea {
  resize: vertical;
  min-height: 130px;
}

.gk-form-card .gk-form__fields>.gk-btn {
  width: 100%;
  margin-top: 10px;
  padding: 15px 22px;
}

.gk-form-security {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  font-size: 12px;
  color: var(--gk-muted);
  margin-top: 20px;
  text-align: center;
  line-height: 1.4;
}

.gk-form-security .dashicons {
  font-size: 15px;
  width: 15px;
  height: 15px;
  color: var(--gk-green);
  flex-shrink: 0;
}

/* Responsive Overrides */
@media(max-width:1024px) {
  .gk-pillars-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .gk-contact-main-grid {
    grid-template-columns: 1fr;
  }
}

@media(max-width:640px) {
  .gk-contact-main-sec {
    padding: 44px 0 30px;
  }

  #export-presence {
    padding-top: 24px;
  }

  .gk-beautiful-divider {
    margin: 0 auto 40px auto;
  }

  .gk-pillars-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .gk-pillar-card {
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 18px;
  }

  .gk-pillar-card__icon {
    width: 40px;
    height: 40px;
    margin-bottom: 0;
    flex: none;
  }

  .gk-pillar-card__icon svg {
    width: 20px;
    height: 20px;
  }

  .gk-pillar-card__body {
    flex: 1;
    min-width: 0;
  }

  .gk-pillar-card h3 {
    font-size: 16px;
    margin-bottom: 6px;
  }

  .gk-pillar-card__desc {
    margin-bottom: 14px;
    font-size: 13px;
    line-height: 1.5;
  }

  .gk-pillar-card__btn {
    padding: 9px 14px;
    font-size: 12.5px;
  }

  .gk-form__row {
    grid-template-columns: 1fr;
  }

  .gk-form__fields--compact .gk-form__row:nth-of-type(3) {
    grid-template-columns: 1fr;
  }

  .gk-plant-card,
  .gk-form-card {
    padding: 24px 18px;
  }
}


/* ---- Single product: detail tabs ---- */
.gk-tabs {
  margin-top: 72px
}

.gk-tabs__nav {
  display: flex;
  gap: 32px;
  overflow-x: auto;
  border-bottom: 1px solid var(--gk-line);
  padding-bottom: 1px;
}

.gk-tabs__tab {
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 2px 14px;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--gk-muted);
  border-bottom: 2px solid transparent;
  transition: color .25s ease, border-color .25s ease;
}

.gk-tabs__tab:hover {
  color: var(--gk-ink)
}

.gk-tabs__tab.is-active {
  color: var(--gk-green);
  border-bottom-color: var(--gk-green);
  font-weight: 700
}

.gk-tabs__panel {
  padding: 40px 0 0
}

.gk-tabs__panel[hidden] {
  display: none
}

.gk-tabs__empty {
  color: var(--gk-muted);
  font-size: 15px;
  margin: 0
}

.gk-tabs__card {
  background: var(--gk-page);
  border: 1px solid var(--gk-line);
  border-radius: 16px;
  padding: 24px;
}

.gk-specs-table__wrap {
  overflow-x: auto;
  border: 1px solid var(--gk-line);
  border-radius: 10px;
  background: var(--gk-surface)
}

.gk-specs-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  min-width: 520px
}

.gk-specs-table th,
.gk-specs-table td {
  padding: 16px 24px;
  font-size: 14px
}

.gk-specs-table thead th {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gk-ink);
  border-bottom: 1px solid var(--gk-line);
}

.gk-specs-table tbody tr {
  border-top: 1px solid var(--gk-line)
}

.gk-specs-table tbody tr:first-child {
  border-top: none
}

.gk-specs-table tbody th {
  font-weight: 600;
  color: var(--gk-ink)
}

.gk-specs-table tbody td {
  color: var(--gk-body)
}

.gk-tabs__features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px
}

.gk-feature-card {
  background: var(--gk-surface);
  border: 1px solid var(--gk-line);
  border-radius: 14px;
  padding: 24px;
}

.gk-feature-card__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  border-radius: 10px;
  background: var(--gk-green-soft);
  color: var(--gk-green);
}

.gk-feature-card__icon svg {
  width: 24px;
  height: 24px
}

.gk-feature-card h4 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  color: var(--gk-ink)
}

.gk-feature-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--gk-body)
}

.gk-product-video-sec {
  margin-top: 48px;
  margin-bottom: 60px;
}

.gk-product-video-head {
  margin-bottom: 20px;
}

.gk-product-video-head h3 {
  font-size: 22px;
  font-weight: 700;
  color: var(--gk-navy);
  margin: 0;
  letter-spacing: -0.01em;
}

.gk-product-video-frame {
  position: relative;
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: #000000;
  box-shadow: 0 16px 36px -12px rgba(0, 0, 0, 0.18);
  border: 1px solid var(--gk-line);
}

.gk-product-video-frame iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}

.gk-tabs__reviews {
  display: grid;
  gap: 20px
}

.gk-review-card {
  background: var(--gk-surface);
  border: 1px solid var(--gk-line);
  border-radius: 14px;
  padding: 28px;
}

.gk-review-card__stars {
  color: #f59e0b;
  font-size: 18px;
  letter-spacing: 2px;
  margin-bottom: 10px
}

.gk-review-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--gk-body)
}

.gk-review-card cite {
  display: block;
  margin-top: 12px;
  font-style: normal;
  font-weight: 700;
  font-size: 14px;
  color: var(--gk-ink)
}

@media(max-width:900px) {
  .gk-tabs {
    margin-top: 48px
  }

  .gk-tabs__nav {
    gap: 22px
  }

  .gk-tabs__tab {
    font-size: 14px
  }

  .gk-tabs__features {
    grid-template-columns: 1fr
  }
}

/* ==========================================================================
   MEGA-MENU NAVIGATION (Products 3-Column Dropdown)
   ========================================================================== */

.gk-nav__item--has-mega {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.gk-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
}

.gk-nav__chevron {
  width: 13px;
  height: 13px;
  color: var(--gk-muted);
  transition: transform 0.22s ease, color 0.22s ease;
  flex-shrink: 0;
}

.gk-nav__item--has-mega:hover .gk-nav__chevron,
.has-megamenu-open .gk-nav__chevron {
  transform: rotate(180deg);
  color: var(--gk-green);
}

/* Dimming Backdrop Overlay (Protects Hero Text & Elements from Appearing Cut) */
.gk-megamenu-backdrop {
  position: fixed;
  top: 80px;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.48);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 9990;
  transition: opacity 0.24s ease, visibility 0.24s;
}

.admin-bar .gk-megamenu-backdrop {
  top: 112px;
}

@media(max-width:782px) {
  .admin-bar .gk-megamenu-backdrop {
    top: 126px;
  }
}

.has-megamenu-open ~ .gk-megamenu-backdrop,
.gk-megamenu-backdrop.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Mega-Menu Panel: Seamlessly Attached Flush to Bottom of Header (No Gap) */
.gk-megamenu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: 100%;
  margin-top: 0;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s;
  z-index: 9999;
}

.has-megamenu-open .gk-megamenu,
.gk-megamenu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.gk-megamenu__container {
  max-width: 1300px;
  padding: 0 24px;
  margin: 0 auto;
}

.gk-megamenu__card {
  background: #FFFFFF;
  border: 1px solid var(--gk-line);
  /* Very subtle industrial corner rounding on all corners per user spec */
  border-radius: 6px;
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.14), 0 6px 16px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

.gk-megamenu__body {
  display: grid;
  grid-template-columns: 290px 310px 1fr;
  min-height: 440px;
  max-height: 570px;
  overflow: hidden;
}

/* Column General Styling */
.gk-mega-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.gk-mega-col__head {
  margin-bottom: 16px;
}

.gk-mega-col__head--flex {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--gk-line-soft);
  padding-bottom: 14px;
}

.gk-mega-eyebrow {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gk-muted);
  margin-bottom: 4px;
}

.gk-mega-col__title {
  font-size: 18px;
  font-weight: 800;
  color: var(--gk-ink);
  margin: 0;
  letter-spacing: -0.01em;
}

.gk-mega-browse-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--gk-green);
  text-decoration: none;
  transition: color 0.15s ease, transform 0.15s ease;
}

.gk-mega-browse-link:hover {
  color: var(--gk-green-dk);
  text-decoration: underline;
}

.gk-mega-browse-link:hover span[aria-hidden="true"] {
  transform: translateX(3px);
}

/* COLUMN 1: Solutions Navigation */
.gk-mega-col--solutions {
  padding: 24px 20px;
  background: #F9FAF8;
  border-right: 1px solid var(--gk-line-soft);
}

.gk-mega-nav-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gk-mega-sol-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 13px 15px;
  border-radius: 6px;
  border: 1px solid var(--gk-line-soft);
  background: #FFFFFF;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
}

.gk-mega-sol-btn:hover {
  border-color: #F8B381;
  background: #FFF9F4;
  transform: translateX(2px);
}

.gk-mega-sol-btn.is-active {
  background: linear-gradient(135deg, #EB701B 0%, #D85D08 100%);
  border-color: #D85D08;
  box-shadow: 0 6px 18px rgba(235, 112, 27, 0.28);
  transform: translateX(2px);
}

.gk-mega-sol-btn__icon {
  width: 38px;
  height: 38px;
  border-radius: 6px;
  background: #F1F5F0;
  color: var(--gk-green);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.gk-mega-sol-btn__icon svg {
  width: 20px;
  height: 20px;
}

.gk-mega-sol-btn.is-active .gk-mega-sol-btn__icon {
  background: rgba(255, 255, 255, 0.22);
  color: #FFFFFF;
}

.gk-mega-sol-btn__info {
  flex: 1;
  min-width: 0;
}

.gk-mega-sol-btn__top {
  margin-bottom: 2px;
}

.gk-mega-badge {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gk-muted);
}

.gk-mega-sol-btn.is-active .gk-mega-badge {
  color: rgba(255, 255, 255, 0.85);
}

.gk-mega-sol-btn__title {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--gk-ink);
  line-height: 1.25;
}

.gk-mega-sol-btn.is-active .gk-mega-sol-btn__title {
  color: #FFFFFF;
}

.gk-mega-sol-btn__arrow {
  font-size: 16px;
  color: var(--gk-muted);
  opacity: 0.6;
  transition: transform 0.2s ease, opacity 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
}

.gk-mega-sol-btn.is-active .gk-mega-sol-btn__arrow {
  color: #FFFFFF;
  opacity: 1;
  transform: translateX(3px);
}

/* COLUMN 2: Subcategories / Equipment Families */
.gk-mega-col--categories {
  padding: 24px 22px;
  background: #FFFFFF;
  border-right: 1px solid var(--gk-line-soft);
  overflow-y: auto;
  min-height: 0;
}

.gk-mega-cat-pane {
  display: none;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.gk-mega-cat-pane.is-active {
  display: flex;
}

.gk-mega-cat-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gk-mega-cat-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 11px 14px;
  border-radius: 6px;
  background: #F8FAF7;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: left;
  transition: all 0.18s ease;
  outline: none;
}

.gk-mega-cat-btn:hover {
  background: var(--gk-green-soft);
  color: var(--gk-green);
  border-color: rgba(64, 181, 84, 0.2);
}

.gk-mega-cat-btn.is-active {
  background: #FFF5EC;
  border-color: #FED7AA;
  color: #C2410C;
  box-shadow: 0 2px 6px rgba(235, 112, 27, 0.08);
}

.gk-mega-cat-btn__name {
  font-size: 13.5px;
  font-weight: 700;
  color: inherit;
}

.gk-mega-cat-btn__meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.gk-mega-cat-btn__count {
  font-size: 11px;
  font-weight: 700;
  color: var(--gk-muted);
}

.gk-mega-cat-btn.is-active .gk-mega-cat-btn__count {
  color: #EA580C;
}

.gk-mega-cat-btn__chevron {
  width: 13px;
  height: 13px;
  color: var(--gk-muted);
  transition: transform 0.18s ease, color 0.18s ease;
}

.gk-mega-cat-btn.is-active .gk-mega-cat-btn__chevron {
  color: #EA580C;
  transform: translateX(3px);
}

/* COLUMN 3: Products Grid with Circular Machine Cards */
.gk-mega-col--products {
  padding: 24px 28px;
  background: #FFFFFF;
  overflow-y: auto;
  min-height: 0;
}

.gk-mega-prod-pane {
  display: none;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.gk-mega-prod-pane.is-active {
  display: flex;
}

.gk-mega-prod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 18px 16px;
  padding-top: 14px;
}

.gk-mega-prod-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  padding: 8px 6px 12px;
  border-radius: 6px;
  transition: transform 0.2s ease, background 0.2s ease;
}

.gk-mega-prod-card:hover {
  background: #FAFBF9;
  transform: translateY(-2px);
}

.gk-mega-prod-card__circle {
  width: 102px;
  height: 102px;
  border-radius: 50%;
  background: #F4F6F3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 10px;
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.02);
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.24s ease, box-shadow 0.24s ease;
}

.gk-mega-prod-card:hover .gk-mega-prod-card__circle {
  transform: scale(1.06);
  background-color: #EBF4E9;
  border-color: rgba(64, 181, 84, 0.25);
  box-shadow: 0 10px 22px rgba(64, 181, 84, 0.16);
}

.gk-mega-prod-card__circle img {
  width: 82%;
  height: 82%;
  object-fit: contain;
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

.gk-mega-prod-card:hover .gk-mega-prod-card__circle img {
  transform: scale(1.1);
}

.gk-mega-prod-card__name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--gk-ink);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.18s ease;
}

.gk-mega-prod-card:hover .gk-mega-prod-card__name {
  color: var(--gk-green);
}

.gk-mega-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--gk-body);
}

/* Mega-Menu Footer Strip */
.gk-megamenu__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 24px;
  background: #F8FAF7;
  border-top: 1px solid var(--gk-line);
  font-size: 12.5px;
  color: var(--gk-body);
}

.gk-megamenu__foot-left {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

.gk-megamenu__foot-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--gk-green);
  font-weight: 700;
}

.gk-megamenu__foot-pill svg {
  width: 15px;
  height: 15px;
}

.gk-megamenu__foot-sep {
  color: var(--gk-muted);
}

.gk-megamenu__foot-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 800;
  color: var(--gk-blue);
  text-decoration: none;
  transition: color 0.15s ease, transform 0.15s ease;
}

.gk-megamenu__foot-cta:hover {
  color: var(--gk-blue-dk);
}

.gk-megamenu__foot-cta:hover span[aria-hidden="true"] {
  transform: translateX(4px);
}

/* Mobile & Tablet Responsiveness */
@media (max-width: 1024px) {
  .gk-megamenu,
  .gk-megamenu-backdrop,
  .gk-nav__chevron {
    display: none !important;
  }
}

/* Dark Mode Theme Support */
[data-theme="dark"] .gk-megamenu__card {
  background: #111827;
  border-color: #374151;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

[data-theme="dark"] .gk-mega-col--solutions {
  background: #0F172A;
  border-color: #1F2937;
}

[data-theme="dark"] .gk-mega-col--categories,
[data-theme="dark"] .gk-mega-col--products {
  background: #111827;
  border-color: #1F2937;
}

[data-theme="dark"] .gk-mega-sol-btn {
  background: #1F2937;
  border-color: #374151;
}

[data-theme="dark"] .gk-mega-sol-btn:hover {
  background: #374151;
}

[data-theme="dark"] .gk-mega-sol-btn__icon {
  background: #111827;
  color: #86EFAC;
}

[data-theme="dark"] .gk-mega-sol-btn__title {
  color: #F1F5F9;
}

[data-theme="dark"] .gk-mega-cat-btn {
  background: #1F2937;
  color: #E2E8F0;
}

[data-theme="dark"] .gk-mega-cat-btn:hover {
  background: #374151;
  color: #86EFAC;
}

[data-theme="dark"] .gk-mega-cat-btn.is-active {
  background: rgba(235, 112, 27, 0.18);
  border-color: #EA580C;
  color: #FB923C;
}

[data-theme="dark"] .gk-mega-col__title {
  color: #F8FAFC;
}

[data-theme="dark"] .gk-mega-prod-card__circle {
  background: #1F2937;
  border-color: #374151;
}

[data-theme="dark"] .gk-mega-prod-card:hover .gk-mega-prod-card__circle {
  background: #2D3748;
}

[data-theme="dark"] .gk-mega-prod-card__name {
  color: #E2E8F0;
}

[data-theme="dark"] .gk-megamenu__foot {
  background: #0F172A;
  border-color: #1F2937;
  color: #94A3B8;
}
/* ---------- mobile vertical rhythm ---------- */
/* Every boundary below is two section paddings stacking: measured on a phone,
   60px under the catalogue button plus 60px over the "Dealer network" eyebrow
   put 120px of dead space between two sections that read as one step, and the
   testimonials -> certifications seam was 175px. Halving each side keeps the
   sections distinct without a screen of nothing between them.

   This sits at the end of the file on purpose - most of these sections are
   declared more than once above, and last-one-wins is what makes them stick
   without inflating specificity. */
@media(max-width:760px) {
  .gk-about {
    padding-bottom: 26px;
  }

  .gk-products {
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .gk-dealer {
    padding-top: 36px;
    padding-bottom: 26px;
  }

  .gk-testimonials {
    padding-top: 32px;
    padding-bottom: 28px;
  }

  /* Same job between the certification strip and the export map: 85px + 48px
     of stacked section padding reads as a dead screen on a phone. */
  .gk-certs-sec {
    padding-top: 32px;
    padding-bottom: 34px;
  }

  .gk-map {
    padding-top: 36px;
    padding-bottom: 30px;
  }

  /* About page: leadership -> timeline -> closing CTA stack the same way. */
  .gk-team-sec {
    padding-bottom: 28px;
  }

  .gk-timeline-sec {
    padding-top: 32px;
    padding-bottom: 28px;
  }

  .gk-cta {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  /* Last boundary on every page: whatever the page ends with, then the
     footer's own 70px of lead-in above the logo. */
  .gk-footer {
    padding-top: 42px;
  }
}

/* ---------- header fit: tablet / small-laptop band ---------- */
/* The hamburger only takes over at 760px, so between 761px and ~1080px the
   full nav, the phone number, the theme toggle and the CTA all have to share
   one row. .gk-header__right is flex-shrink:0, so instead of compressing they
   pushed the page wider than the viewport - up to 195px of sideways scroll,
   measured at 805px. Shedding the CTA first, then the phone label, keeps the
   row inside the viewport without touching the desktop layout. */
/* Two bands cannot fit the CTA: just above the 480px rule that already hides
   it (the row still overflows at ~500px), and the tablet band above. */
@media(max-width:540px), (min-width:761px) and (max-width:1080px) {
  .gk-header .gk-btn--sm {
    display: none;
  }
}

@media(min-width:761px) and (max-width:920px) {
  /* Icon-only phone: the tel: link still works, the number just stops
     printing next to it. */
  .gk-header__contact span {
    display: none;
  }

  .gk-nav {
    gap: 18px;
  }
}

/* ---------- generic page + legal prose ---------- */
/* Used by page.php for the legal pages. Narrow measure, generous leading -
   these are read, not scanned. */
.gk-page__head {
  background: linear-gradient(180deg, var(--gk-cream) 0%, var(--gk-page) 100%);
  border-bottom: 1px solid var(--gk-line);
  padding: 54px 0 38px;
  text-align: center
}

.gk-page__head h1 {
  font-size: clamp(30px, 4vw, 44px);
  letter-spacing: -0.02em;
  margin: 6px 0 0
}

.gk-page__meta {
  color: var(--gk-muted);
  font-size: 14px;
  margin: 12px 0 0
}

.gk-page__body {
  padding: 48px 0 76px
}

.gk-prose {
  max-width: 760px;
  margin: 0 auto;
  color: var(--gk-body);
  font-size: 16.5px;
  line-height: 1.75
}

.gk-prose h2 {
  font-size: 23px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--gk-ink);
  margin: 40px 0 12px
}

.gk-prose h2:first-child {
  margin-top: 0
}

.gk-prose h3 {
  font-size: 18px;
  color: var(--gk-ink);
  margin: 26px 0 8px
}

.gk-prose p {
  margin: 0 0 16px
}

.gk-prose ul,
.gk-prose ol {
  margin: 0 0 18px;
  padding-left: 22px
}

.gk-prose li {
  margin-bottom: 8px
}

.gk-prose a {
  color: var(--gk-green-dk);
  text-decoration: underline;
  text-underline-offset: 2px
}

.gk-prose strong {
  color: var(--gk-ink)
}

.gk-prose hr {
  border: 0;
  border-top: 1px solid var(--gk-line);
  margin: 34px 0
}

@media(max-width:760px) {
  .gk-page__head {
    padding: 34px 0 26px
  }

  .gk-page__body {
    padding: 32px 0 48px
  }

  .gk-prose {
    font-size: 15.5px
  }

  .gk-prose h2 {
    font-size: 20px;
    margin-top: 30px
  }
}

/* ---------- product card: room around the CTA ---------- */
/* The "View Details" button sat hard against the last spec row above it and
   against the card edge below. .gk-product__body and .gk-product dl are each
   declared twice earlier, so this goes late rather than fighting specificity. */
.gk-product__body {
  padding: 20px 20px 24px
}

/* The template used to carry style="margin:0" inline, which beat every rule
   here and left the CTA sitting on the last spec row. */
.gk-product dl {
  margin: 0 0 22px 0
}

.gk-product .gk-btn {
  margin-top: auto;
  padding-top: 13px;
  padding-bottom: 13px
}

/* More air between card rows, and before the catalogue button that follows. */
.gk-products__grid {
  gap: 34px 24px
}

.gk-products__more {
  margin-top: 40px
}

/* ---------- dealer form: match the old project's proportions ---------- */
/* Reference markup supplied 2026.10.03. The old form reads calmer because the
   fields are taller, the rhythm is looser, and the Message box sits in the
   left column rather than spanning the card. */
/* Reference has the two columns near even with a tighter gutter, which makes
   the card noticeably wider than the 1.15fr/64px split it had. Scoped to
   min-width:761px: unscoped it outranks the mobile single-column rule further
   up the file and crushes the card to a third of the screen. */
@media(min-width:761px) {
  /* 24px rather than 44: the columns gain 10px each, which is what the copy
     needs to break after "real field" like the client's layout, and it brings
     the card from 562px to 572px against their 580px. */
  .gk-dealer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px
  }
}

.gk-dealer .gk-form {
  padding: 36px 34px 38px
}

.gk-dealer .gk-form h3 {
  font-size: 26px;
  margin-bottom: 26px
}

/* Measured against the client's screenshot, normalised to card width:
   their fields are ~14% shorter, their row gaps ~38% tighter, and the Message
   box is 72% of a field's width rather than filling the half column. */
.gk-form__fields--compact .gk-form__row {
  gap: 16px;
  margin-bottom: 6px
}

/* Each .gk-field-wrap inside a row also carries 14px of its own, which stacked
   on top of the row margin and made the rows sit ~29px apart instead of 21. */
.gk-form__fields--compact .gk-form__row .gk-field-wrap {
  margin-bottom: 0
}

/* .gk-field-wrap input further down sets the cream page colour and, at equal
   specificity, wins on source order - so the white has to be restated here. */
.gk-form__fields--compact input,
.gk-form__fields--compact textarea {
  padding: 9px 16px;
  font-size: 15px;
  border-radius: 8px;
  background: var(--gk-surface)
}

/* The message field is the only .gk-field-wrap that is a direct child of the
   form - the rest live inside .gk-form__row - so this sizes just that one.
   Full width squares its right edge with the Last Name / Phone rows above. */
.gk-form__fields--compact > .gk-field-wrap {
  width: 100%;
  margin-bottom: 21px
}

.gk-form__fields--compact textarea {
  min-height: 127px;
  margin-bottom: 0
}

.gk-form__fields--compact .gk-form__submit {
  height: 59px;
  font-size: 16px
}

@media(max-width:760px) {
  .gk-dealer .gk-form {
    padding: 26px 20px 28px
  }
}

/* ---------- dealer bullets: rounded square + ringed tick ---------- */
/* The reference marker is a soft mint rounded square with a circled check
   inside, not a filled circle with a bare tick. */
.gk-dealer .gk-reason__tick {
  border-radius: 10px;
  background: #E4F1E4;
  color: #16A34A
}

.gk-dealer .gk-reason__tick svg {
  width: 20px;
  height: 20px;
  stroke-width: 2
}

[data-theme="dark"] .gk-dealer .gk-reason__tick {
  background: rgba(22, 163, 74, 0.18);
  color: #4ADE80
}

/* ---------- export metrics: align with the map above ---------- */
/* .gk-map-stage is capped at 1160px and centred, while this row filled the
   full container - so the cards overhung the map on both sides. Keep the two
   max-widths in step if the stage ever changes. */
.gk-map-metrics {
  grid-template-columns: repeat(3, 1fr);
  max-width: 1160px;
  margin-left: auto;
  margin-right: auto
}

@media(max-width:900px) {
  .gk-map-metrics {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:600px) {
  .gk-map-metrics {
    grid-template-columns: 1fr
  }
}

/* ---------- mega-menu: six categories instead of three ---------- */
/* The panel is tall enough to show all six categories outright - no scrollbar
   in the first column. Six entries need 69px more than the old 570px cap, so
   648px clears them with a little slack. Columns 2 and 3 keep their own
   overflow, which is what absorbs a long implement lineup. */
.gk-megamenu__body {
  /* Height follows the content, so a short column list leaves no dead band at
     the bottom - a fixed height padded every category out to the tallest case.
     max-height is declared 570px further up and caps anything set here, so it
     has to move too; the 100vh term keeps the panel off the bottom of a short
     laptop screen. */
  height: auto;
  max-height: min(648px, calc(100vh - 150px))
}

/* No scrollbar at normal window heights - it only appears if the viewport is
   too short for all six categories. */
.gk-mega-col--solutions {
  overflow-y: auto;
  scrollbar-width: thin;
  min-height: 0
}

/* The empty-state panel was dropping into a single 132px track of
   repeat(auto-fill, minmax(132px, 1fr)), which broke its text to one word per
   line and clipped the button. It needs the whole row. */
.gk-mega-empty {
  grid-column: 1 / -1;
  max-width: 420px;
  margin: 0 auto
}

/* Family names are now phrases like "Disc Ridgers | Tyne Ridgers", which ran
   straight into the model count. Let the name wrap and keep the count whole. */
.gk-mega-cat-btn {
  gap: 12px;
  align-items: flex-start
}

.gk-mega-cat-btn__name {
  flex: 1 1 auto;
  line-height: 1.35
}

.gk-mega-cat-btn__meta {
  flex: 0 0 auto;
  margin-top: 1px
}

.gk-mega-cat-btn__count {
  white-space: nowrap
}

/* ---------- about page: mission/vision -> timeline ---------- */
/* The leadership section used to sit between these two, so their 90px + 90px
   met nothing and left 180px of dead band once it was held back. */
@media(min-width:761px) {
  .gk-mv-sec {
    padding-bottom: 44px
  }

  .gk-timeline-sec {
    padding-top: 48px
  }
}

@media(max-width:760px) {
  .gk-mv-sec {
    padding-bottom: 26px
  }
}

/* ---------- footer: keep the legal name on one line ---------- */
/* "Shri KS Farm Implements Private Limited," needs ~280px of text column; at
   1.4fr the contact cell gave it ~246px once the pin icon was deducted, so it
   broke after "Private". Widening that column also pushes the newsletter
   column right, which is the other half of the request. */
@media(min-width:993px) {
  .gk-footer__grid {
    grid-template-columns: 1.25fr 0.95fr 1.72fr 1.28fr
  }
}

/* ---------- footer: logo flush with its column ---------- */
/* .gk-footer__about .gk-logo carries margin-left:-26px, which pushed the mark
   out past the paragraph and the social row beneath it. Flush instead, and
   capped to the column so the 280px artwork cannot overhang the other way. */
/* company-logo.png carries 25 transparent columns down its left edge, so the
   element box starting at the column edge still left the wordmark 23px inside
   it - which read as the logo being centred over the text. Pull the box left
   by that measured amount so the glyphs line up with the paragraph and the
   social row. */
.gk-footer__about .gk-logo {
  margin-left: -25px;
  max-width: calc(100% + 25px)
}

/* Put the wordmark on the same line as EXPLORE / CONTACT US / NEWSLETTER.
   Their text centres sat 18px apart: the headings are a single line of 21px
   text, while the logo is a 48px block whose glyphs (rows 6-40 of a 42px PNG)
   centre lower. Measured, not guessed. */
@media(min-width:993px) {
  .gk-footer__about .gk-logo {
    margin-top: -18px
  }
}

.gk-footer .gk-logo img {
  max-width: 100%
}

/* ---------- mega-menu: wider lineup column ---------- */
/* Plough carries 10 models. At 1300px the lineup column fits 4 per row, so the
   third row's two names fell past the panel. 1420px fits 5 per row, which puts
   10 models in two complete rows. The viewport term keeps it from touching the
   window edge on a 1366px laptop. */
.gk-megamenu__container {
  max-width: min(1420px, calc(100vw - 32px))
}

/* 128px tracks fit five across the widened column, so the 10-model Plough
   family lands in two complete rows instead of 4 + 4 + 2. */
.gk-mega-prod-grid {
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr))
}

/* ---------- about eyebrow: orange ---------- */
/* The eyebrow is a <p> inside .gk-about, and .gk-about p sets the body colour
   at specificity (0,1,1) - which beat .gk-eyebrow--orange at (0,1,0). Scoping
   the modifier to the section outranks it. */
.gk-about .gk-eyebrow--orange {
  color: var(--gk-orange);
  /* .gk-about p also sets font-size:16px, so the eyebrow was rendering 16px
     against the 12px used by Product Highlights and every other eyebrow.
     letter-spacing is .14em on .gk-eyebrow, so it follows to 1.68px. */
  font-size: 12px
}

/* ---------- dealer list: let the copy fill its column ---------- */
/* .gk-dealer .gk-reason p carries max-width:440px, which broke the line after
   "built" instead of after "real field" as in the client's layout. Their copy
   runs to the column edge, so the cap comes off. */
.gk-dealer .gk-reason p {
  max-width: none
}

/* ---------- spec comparison matrix (product detail) ---------- */
/* The client's own sheets compare models side by side, so the Specs tab is
   laid out the same way: measures down the left, one column per model.
   Per their markup of 2026-10-10 - measures left-aligned, every value
   centred, generous row and column spacing, and values carrying their own
   colour rather than sitting at default black. */

.gk-specs-table--matrix {
  min-width: 680px;
  table-layout: auto
}

.gk-specs-table--matrix th,
.gk-specs-table--matrix td {
  padding: 18px 22px;
  text-align: center;
  vertical-align: middle;
  border-left: 1px solid var(--gk-line)
}

/* Measure column: left aligned, with the breathing room the markup asks for. */
.gk-specs-table--matrix th:first-child,
.gk-specs-table--matrix td:first-child {
  text-align: left;
  padding-left: 28px;
  border-left: none
}

.gk-specs-table--matrix thead th {
  background: rgba(64, 181, 84, .08);
  color: var(--gk-green);
  white-space: nowrap
}

.gk-specs-table--matrix thead th:first-child {
  color: var(--gk-ink)
}

.gk-specs-table--matrix tbody th {
  font-weight: 600;
  color: var(--gk-ink);
  white-space: nowrap
}

/* Values read as data, not body copy - a slate that is clearly not black. */
.gk-specs-table--matrix tbody td {
  color: #334155;
  font-weight: 500
}

.gk-specs-table--matrix tbody tr:nth-child(even) {
  background: rgba(15, 23, 42, .022)
}

/* A measurement that does not vary by model runs the full width, the way the
   sheet merges those cells. */
.gk-specs-table--matrix tbody tr.is-common td {
  background: rgba(64, 181, 84, .05);
  font-weight: 600
}

[data-theme="dark"] .gk-specs-table--matrix thead th {
  background: rgba(64, 181, 84, .14)
}

[data-theme="dark"] .gk-specs-table--matrix tbody td {
  color: #CBD5E1
}

[data-theme="dark"] .gk-specs-table--matrix tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, .03)
}

[data-theme="dark"] .gk-specs-table--matrix tbody tr.is-common td {
  background: rgba(64, 181, 84, .10)
}

@media(max-width:760px) {
  .gk-specs-table--matrix th,
  .gk-specs-table--matrix td {
    padding: 14px 16px;
    font-size: 13px
  }

  .gk-specs-table--matrix th:first-child,
  .gk-specs-table--matrix td:first-child {
    padding-left: 18px
  }
}