/* ============================================================
   GRIDLOCKBOX — Custom Theme Override
   Direction: Industrial-Luxury Packaging Aesthetic
   Palette: Deep Forest Green + Warm Parchment + Brass Gold
   ============================================================ */

/* ─── CSS Custom Properties ─────────────────────────────────── */
:root {
  --glb-green:       #1e3a2f;
  --glb-green-mid:   #2c5f2e;
  --glb-green-light: #3a7d44;
  --glb-gold:        #b8976a;
  --glb-gold-light:  #d4af7a;
  --glb-parchment:   #f7f3ee;
  --glb-cream:       #fffdf9;
  --glb-ink:         #1a1917;
  --glb-ink-mid:     #3d3b37;
  --glb-ink-soft:    #6b6761;
  --glb-border:      #e2ddd6;
  --glb-white:       #ffffff;

  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-pill: 100px;

  --shadow-sm:  0 1px 3px rgba(30,58,47,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 16px rgba(30,58,47,0.12), 0 2px 6px rgba(0,0,0,0.06);
  --shadow-lg:  0 12px 40px rgba(30,58,47,0.18), 0 4px 12px rgba(0,0,0,0.08);
  --shadow-xl:  0 24px 64px rgba(30,58,47,0.22), 0 8px 24px rgba(0,0,0,0.10);

  --transition: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── Global Body & Base ─────────────────────────────────────── */
body {
  background-color: var(--glb-cream) !important;
  color: var(--glb-ink) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── HEADER ─────────────────────────────────────────────────── */
.theme-header-fixed .theme-header,
[data-headercontainer] {
  background: rgba(255, 253, 249, 0.96) !important;
  backdrop-filter: blur(12px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(150%) !important;
  border-bottom: 1px solid var(--glb-border) !important;
  box-shadow: 0 1px 0 rgba(30,58,47,0.04), 0 4px 20px rgba(30,58,47,0.06) !important;
  transition: box-shadow var(--transition) !important;
}

/* Top bar — hide it cleanly */
.theme-header-topbar {
  display: none !important;
}

/* Site name + caption */
.theme-site-name {
  font-family: 'Tenor Sans', serif !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--glb-green) !important;
  line-height: 1 !important;
}

.theme-site-caption {
  font-family: 'Manrope', sans-serif !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  color: var(--glb-gold) !important;
  margin-top: 3px !important;
}

/* Nav links */
.theme-menu [data-zs-menu-container] > li > a {
  font-family: 'Manrope', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--glb-ink-mid) !important;
  padding: 6px 14px !important;
  border-radius: var(--radius-sm) !important;
  transition: color var(--transition), background var(--transition) !important;
  text-decoration: none !important;
}

.theme-menu [data-zs-menu-container] > li > a:hover,
.theme-menu [data-zs-menu-container] > li.theme-menu-selected > a {
  color: var(--glb-green) !important;
  background: rgba(30,58,47,0.06) !important;
}

/* ─── HERO SECTION ───────────────────────────────────────────── */
.zphero-slide.zpcustom-gradient-bg,
.zphero-slide.zscustom-gradient-bg,
.zphero-slide.zpdark-section {
  background: linear-gradient(135deg, var(--glb-green) 0%, #0f2318 60%, #1a2e1f 100%) !important;
}

.zphero-slide.zpdark-section-bg,
.zphero-slide {
  background: var(--glb-green) !important;
}

/* Hero headings */
.zshero-banner-style-18 h1.zpheading,
.zshero-banner-style-18 .zpheading {
  font-family: 'Tenor Sans', serif !important;
  font-size: clamp(34px, 4.5vw, 62px) !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.15 !important;
  color: var(--glb-cream) !important;
}

/* Hero body text */
.zshero-banner-style-18 .zptext p,
.zshero-banner-style-18 .zptext {
  font-family: 'Manrope', sans-serif !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
  color: rgba(247,243,238,0.75) !important;
}

.zshero-banner-style-18 .zptext strong {
  color: var(--glb-gold-light) !important;
  font-weight: 600 !important;
}

/* ─── BUTTONS ────────────────────────────────────────────────── */
.zpbutton.zpbutton-type-primary {
  background: var(--glb-green-light) !important;
  border-color: var(--glb-green-light) !important;
  color: var(--glb-white) !important;
  border-radius: var(--radius-pill) !important;
  font-family: 'Manrope', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 12px 28px !important;
  box-shadow: 0 4px 14px rgba(44,95,46,0.35) !important;
  transition: background var(--transition), box-shadow var(--transition), transform var(--transition) !important;
}

.zpbutton.zpbutton-type-primary:hover {
  background: var(--glb-green) !important;
  border-color: var(--glb-green) !important;
  box-shadow: 0 6px 20px rgba(30,58,47,0.45) !important;
  transform: translateY(-1px) !important;
}

.zpbutton.zpbutton-type-secondary.zpbutton-outline {
  background: transparent !important;
  border: 1.5px solid var(--glb-gold) !important;
  color: var(--glb-gold) !important;
  border-radius: var(--radius-pill) !important;
  font-family: 'Manrope', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 10px 24px !important;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition) !important;
}

.zpbutton.zpbutton-type-secondary.zpbutton-outline:hover {
  background: var(--glb-gold) !important;
  color: var(--glb-green) !important;
  transform: translateY(-1px) !important;
}

/* ─── LIGHT SECTIONS (About, Services, etc.) ─────────────────── */
.zpsection.zplight-section,
.zpsection.zplight-section-bg,
.zpsection.zpdefault-section,
.zpsection.zpdefault-section-bg {
  background-color: var(--glb-cream) !important;
}

/* Section that uses parchment tint */
.zscustom-section-digitbeez-01 {
  background-color: var(--glb-parchment) !important;
}

.zscustom-section-59 {
  background-color: var(--glb-cream) !important;
}

/* ─── TYPOGRAPHY ─────────────────────────────────────────────── */
h1.zpheading, h2.zpheading, h3.zpheading,
h4.zpheading, h5.zpheading, h6.zpheading {
  font-family: 'Tenor Sans', serif !important;
  color: var(--glb-ink) !important;
  line-height: 1.2 !important;
}

h1.zpheading { font-size: clamp(32px, 4vw, 58px) !important; font-weight: 400 !important; }
h2.zpheading { font-size: clamp(26px, 3vw, 44px) !important; font-weight: 400 !important; }
h3.zpheading { font-size: clamp(20px, 2.2vw, 32px) !important; font-weight: 400 !important; }
h5.zpheading { font-size: 16px !important; font-weight: 400 !important; letter-spacing: 0.04em !important; }
h6.zpheading { font-size: 14px !important; font-weight: 400 !important; }

.zptext, .zptext p {
  font-family: 'Manrope', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
  color: var(--glb-ink-mid) !important;
}

/* Small caps sub-headings (used as section labels) */
.zscustom-small-heading .zptext,
.zscustom-small-heading .zptext p {
  font-family: 'Manrope', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--glb-gold) !important;
  line-height: 1.5 !important;
}

/* Hero heading override for dark sections */
.zpdark-section h1.zpheading,
.zpdark-section h2.zpheading {
  color: var(--glb-cream) !important;
}

/* ─── SERVICE / FEATURE ICON BOXES ──────────────────────────── */
.zscustom-hover-box {
  background: var(--glb-white) !important;
  border: 1px solid var(--glb-border) !important;
  border-radius: var(--radius-md) !important;
  padding: 28px 20px !important;
  text-align: center !important;
  box-shadow: var(--shadow-sm) !important;
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition) !important;
}

.zscustom-hover-box:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-4px) !important;
  border-color: rgba(30,58,47,0.15) !important;
}

.zpicon-heading {
  font-family: 'Manrope', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  color: var(--glb-ink) !important;
  margin-top: 10px !important;
}

/* ─── TESTIMONIAL / CTA GRADIENT SECTION ────────────────────── */
.zpsection.zpdark-section[style*="linear-gradient"] {
  background: linear-gradient(145deg, var(--glb-green) 0%, #0d2b1e 50%, #162a20 100%) !important;
  background-image: linear-gradient(145deg, var(--glb-green) 0%, #0d2b1e 50%, #162a20 100%) !important;
}

/* Force override the inline style gradient */
[data-element-id="elm_i9s2gNU1SQuKEhqAHFhUfA"].zpsection {
  background: linear-gradient(145deg, #1e3a2f 0%, #0d2b1e 60%, #152620 100%) !important;
}

.zpdark-section h2.zpheading,
.zpdark-section h3.zpheading,
.zpdark-section h4.zpheading {
  color: var(--glb-cream) !important;
}

.zpdark-section .zptext,
.zpdark-section .zptext p {
  color: rgba(247,243,238,0.75) !important;
}

/* White box inside testimonial section */
.zpdark-section .zpelem-box[style*="background-color:#ffffff"] {
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-xl) !important;
}

/* ─── DIVIDERS ────────────────────────────────────────────────── */
.zpdivider-line .zpdivider-common {
  border-top: 1px solid var(--glb-border) !important;
  opacity: 0.7 !important;
}

/* ─── PORTFOLIO / PROJECT ROWS ───────────────────────────────── */
/* Subtle left accent on project listings */
.zprow.zpalign-items-center + .zprow.zpalign-items-center .zpelem-heading h3 {
  position: relative !important;
}

/* ─── NEWSLETTER INPUT ───────────────────────────────────────── */
.zpnewsletter-email-input-field {
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(247,243,238,0.25) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--glb-cream) !important;
  font-family: 'Manrope', sans-serif !important;
  font-size: 14px !important;
  padding: 10px 14px !important;
  transition: border-color var(--transition) !important;
}

.zpnewsletter-email-input-field::placeholder {
  color: rgba(247,243,238,0.45) !important;
}

.zpnewsletter-email-input-field:focus {
  outline: none !important;
  border-color: var(--glb-gold) !important;
}

.zpnewsletter-button {
  background: var(--glb-gold) !important;
  border-color: var(--glb-gold) !important;
  color: var(--glb-green) !important;
  font-family: 'Manrope', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border-radius: var(--radius-sm) !important;
  transition: background var(--transition), color var(--transition) !important;
}

.zpnewsletter-button:hover {
  background: var(--glb-gold-light) !important;
  border-color: var(--glb-gold-light) !important;
}

/* ─── FOOTER ─────────────────────────────────────────────────── */
.theme-footer,
[data-theme-footer],
[data-footer] {
  background: var(--glb-green) !important;
  border-top: 2px solid var(--glb-gold) !important;
}

.theme-footer .zpheading,
.theme-footer h5.zpheading {
  font-family: 'Manrope', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--glb-gold) !important;
}

.theme-footer .zptext,
.theme-footer .zptext p {
  font-family: 'Manrope', sans-serif !important;
  font-size: 14px !important;
  color: rgba(247,243,238,0.65) !important;
  line-height: 2 !important;
}

/* Footer section background */
.theme-footer .zpdark-section,
.theme-footer .zpdark-section-bg {
  background: var(--glb-green) !important;
}

.theme-footer .zpdefault-section,
.theme-footer .zpdefault-section-bg {
  background: transparent !important;
}

/* Footer branding */
.theme-footer .theme-site-name {
  color: var(--glb-cream) !important;
  font-size: 18px !important;
}

.theme-footer .theme-site-caption {
  color: var(--glb-gold) !important;
}

/* Copyright bar */
.theme-footer-bottom,
[data-theme-footer-bottom] {
  background: #0f2318 !important;
  border-top: 1px solid rgba(184,151,106,0.2) !important;
}

.theme-footer-bottom .zptext,
.theme-footer-bottom .zptext p {
  font-size: 12px !important;
  color: rgba(247,243,238,0.4) !important;
}

/* ─── BANNER SLIDER CONTROLS ─────────────────────────────────── */
.zsslider-arrow-left,
.zsslider-arrow-right {
  background: rgba(30,58,47,0.7) !important;
  border: 1px solid rgba(184,151,106,0.4) !important;
  border-radius: 50% !important;
  width: 44px !important;
  height: 44px !important;
  transition: background var(--transition), border-color var(--transition) !important;
}

.zsslider-arrow-left:hover,
.zsslider-arrow-right:hover {
  background: var(--glb-gold) !important;
  border-color: var(--glb-gold) !important;
}

/* ─── SCROLL ANIMATIONS ──────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.zptext, .zpheading, .zpelem-button, .zpelem-image {
  animation: fadeInUp 0.55s ease both;
}

/* ─── RESPONSIVE BURGER MENU ─────────────────────────────────── */
.theme-burger-icon span,
.theme-burger-icon::before,
.theme-burger-icon::after {
  background: var(--glb-green) !important;
}

/* ─── MISC POLISH ────────────────────────────────────────────── */
/* Image containers */
.zpimage {
  border-radius: var(--radius-md) !important;
}

/* Remove harsh 1px border-radius overrides on sections */
.zpsection {
  border-radius: 0 !important;
}

/* Containers get proper breathing room */
.zpcontainer {
  padding-inline: clamp(16px, 4vw, 48px) !important;
}

/* Focus states */
*:focus-visible {
  outline: 2px solid var(--glb-gold) !important;
  outline-offset: 3px !important;
}

/* Selection */
::selection {
  background: var(--glb-green) !important;
  color: var(--glb-cream) !important;
}

/* Scrollbar (Chrome/Edge) */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--glb-parchment); }
::-webkit-scrollbar-thumb { background: var(--glb-gold); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--glb-green-light); }

/* ─── HERO EYEBROW LABEL ──────────────────────────────────────
   Add a Text element above the H1 in Zoho and give it
   the custom class: glb-eyebrow
   ─────────────────────────────────────────────────────────── */
.glb-eyebrow .zptext,
.glb-eyebrow .zptext p {
  font-family: 'Manrope', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: var(--glb-gold) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 4px !important;
}
.glb-eyebrow .zptext p::before {
  content: '' !important;
  display: inline-block !important;
  width: 28px !important; height: 1px !important;
  background: var(--glb-gold) !important;
  opacity: 0.7 !important;
  flex-shrink: 0 !important;
}

/* ─── FEATURE STAT PILLS ──────────────────────────────────────
   In Zoho: add 3 × Box elements inside the hero column.
   Give each Box the custom class: glb-stat-pill
   Inside each box add:
     - Icon element
     - Heading (the big value like "Lower")
     - Text (the label like "Breakage rate")
   ─────────────────────────────────────────────────────────── */

/* Wrapper row holding all three pills */
.glb-stats-row .zprow,
.glb-stats-row {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  padding-top: 20px !important;
  border-top: 1px solid rgba(184,151,106,0.2) !important;
  margin-top: 8px !important;
}

/* Each pill */
.glb-stat-pill {
  flex: 1 1 130px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(184,151,106,0.22) !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  transition: background var(--transition), border-color var(--transition) !important;
}

.glb-stat-pill:hover {
  background: rgba(184,151,106,0.1) !important;
  border-color: rgba(184,151,106,0.45) !important;
}

/* Value number/word inside pill (H4 or H5) */
.glb-stat-pill h4.zpheading,
.glb-stat-pill h5.zpheading,
.glb-stat-pill h6.zpheading {
  font-family: 'Tenor Sans', serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  color: var(--glb-cream) !important;
  line-height: 1.1 !important;
  margin-bottom: 2px !important;
}

/* Sub-label inside pill */
.glb-stat-pill .zptext,
.glb-stat-pill .zptext p {
  font-family: 'Manrope', sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: rgba(247,243,238,0.5) !important;
  line-height: 1.4 !important;
}

/* ─── FEATURE CARDS (below-fold section) ────────────────────
   Add a new Section with 3 columns.
   Give the section the custom class: glb-features-section
   Give each column box: glb-feature-card
   ─────────────────────────────────────────────────────────── */
.glb-features-section.zpsection {
  background: var(--glb-parchment) !important;
  padding-block: 64px !important;
}

.glb-feature-card {
  background: var(--glb-white) !important;
  border: 1px solid var(--glb-border) !important;
  border-radius: 14px !important;
  padding: 32px 24px !important;
  height: 100% !important;
  transition: box-shadow var(--transition), transform var(--transition) !important;
}

.glb-feature-card:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-5px) !important;
}

/* Large ordinal number at top of card */
.glb-feature-card .glb-card-num .zptext,
.glb-feature-card .glb-card-num .zptext p {
  font-family: 'Tenor Sans', serif !important;
  font-size: 42px !important;
  color: var(--glb-border) !important;
  line-height: 1 !important;
  margin-bottom: 12px !important;
  font-weight: 400 !important;
}

/* Card title */
.glb-feature-card h3.zpheading,
.glb-feature-card h4.zpheading {
  font-family: 'Tenor Sans', serif !important;
  font-size: 22px !important;
  color: var(--glb-ink) !important;
  margin-bottom: 10px !important;
}

/* Card body */
.glb-feature-card .zptext,
.glb-feature-card .zptext p {
  font-size: 14px !important;
  line-height: 1.75 !important;
  color: var(--glb-ink-mid) !important;
}

/* Green tag at bottom of card */
.glb-card-tag .zptext,
.glb-card-tag .zptext p {
  display: inline-block !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--glb-green-light) !important;
  background: rgba(58,125,68,0.1) !important;
  padding: 4px 12px !important;
  border-radius: 100px !important;
  margin-top: 16px !important;
}