/* ==========================================================================
   GREEN GUARDIAN — PREMIUM DESIGN SYSTEM
   A spec-sheet-meets-material design language for a compostable
   packaging manufacturer. Loaded after the legacy stylesheet; overrides
   it deliberately rather than fighting its specificity everywhere.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root{
  /* -- color: named, subject-grounded ------------------------------------ */
  --ink:        #14251C;   /* near-black, warmed toward green */
  --ink-soft:   #3E4F45;
  --paper:      #F3F1E7;   /* unbleached kraft paper */
  --paper-dim:  #EAE6D6;
  --leaf:       #0B6E3C;   /* primary brand green */
  --leaf-deep:  #084F2B;
  --kernel:     #C99A3E;   /* muted corn-starch gold, used sparingly */
  --line:       #D8D3C4;   /* hairline rule on paper */
  --line-dark:  rgba(243,241,231,0.16);
  --white:      #FFFFFF;

  /* -- type ---------------------------------------------------------------
     Display: Fraunces  — organic, material warmth
     Body/UI: Space Grotesk — technical, spec-sheet precision
     The pairing encodes the brand tension: natural material, engineered product. */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;

  --radius: 4px;
}

/* -- global resets that respect the rest of the template -------------- */
body{
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
}

h1,h2,h3,h4,h5,h6{
  font-family: var(--font-display);
  color: var(--ink);
  letter-spacing: -0.01em;
}

a{ color: var(--leaf); }

::selection{ background: var(--kernel); color: var(--ink); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

:focus-visible{
  outline: 2px solid var(--kernel);
  outline-offset: 3px;
}

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */
#sticky-header.tg-menu-area{
  background: var(--paper) !important;
  border-bottom: 1px solid var(--line);
}
.tg-menu-area::before{ display: none; }
.tg-menu-area .navbar-wrap ul li a{
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  color: var(--ink) !important;
  text-transform: none;
}
.tg-menu-area .navbar-wrap > ul > li.active > a,
.tg-menu-area .navbar-wrap > ul > li:hover > a{
  color: var(--leaf) !important;
}
.tg-menu-area .navbar-wrap ul li .sub-menu{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(20,37,28,0.10);
}
.tg-menu-area .navbar-wrap ul li .sub-menu li a{
  color: var(--ink-soft) !important;
}

/* logo: sized to sit comfortably now that its background is transparent */
.logo img,
.nav-logo img,
.footer-logo img{
  max-width: none;
  width: auto;
  height: 58px;
  object-fit: contain;
}
.footer-logo img{ height: 64px; }
@media (max-width: 575px){
  .logo img, .nav-logo img{ height: 46px; }
}

/* a quiet organic accent under the header, in place of a hard line */
#sticky-header.tg-menu-area{
  border-bottom: none;
  box-shadow: 0 1px 0 var(--line), 0 10px 24px -18px rgba(20,37,28,0.25);
  position: relative;
}
#sticky-header.tg-menu-area::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 3px;
  background: linear-gradient(90deg, var(--leaf) 0%, var(--kernel) 50%, var(--leaf) 100%);
  opacity: 0.85;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn, .tg-btn{
  font-family: var(--font-body);
  background: var(--leaf) !important;
  border-radius: var(--radius) !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  text-transform: none !important;
  padding: 16px 34px !important;
  transition: transform 0.25s ease, background 0.25s ease !important;
}
.btn::before{ display: none !important; }
.btn:hover, .tg-btn:hover{
  background: var(--leaf-deep) !important;
  transform: translateY(-2px);
}
.btn-two{ background: transparent !important; color: var(--ink) !important; border: 1.5px solid var(--ink) !important; }
.btn-two:hover{ background: var(--ink) !important; color: var(--paper) !important; }
.gg-pill{ border-radius: 999px !important; }

/* ==========================================================================
   HERO — replaces the empty/broken banner carousel
   ========================================================================== */
.gg-hero{
  position: relative;
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
  padding: 150px 0 90px;
}
.gg-hero::before{
  /* granule texture: a scatter of small dots referencing corn-starch pellets */
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--line-dark) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  opacity: 0.5;
  pointer-events: none;
}
.gg-hero .container{ position: relative; z-index: 1; }
.gg-hero-grid{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 60px;
  align-items: center;
}

/* real product photography in the hero, in the spirit of every reference site
   that leads with a photo rather than an illustration */
.gg-hero-photo{
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: 0 30px 70px rgba(0,0,0,0.4);
}
.gg-hero-photo img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.gg-hero-photo::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,37,28,0) 45%, rgba(20,37,28,0.65) 100%);
}
.gg-plate-float{
  position: absolute;
  left: 18px; right: 18px; bottom: 18px;
  z-index: 2;
  background: var(--paper);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.35);
}
.gg-plate-float .gg-plate-head{ padding-bottom: 10px; margin-bottom: 10px; }
.gg-plate-float .gg-plate-row{ padding: 8px 0; font-size: 13px; }
.gg-hero-eyebrow{
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--kernel);
  margin: 0 0 22px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.gg-hero-eyebrow::before{
  content: "";
  width: 16px; height: 16px;
  background-color: var(--kernel);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 8C8 10 5.9 16.17 3.82 21.34l1.89.66.95-2.3c.48.17.98.3 1.34.3C19 20 22 3 22 3c-1 2-8 2.25-13 3.25S2 11.5 2 13.5s1.75 4.75 1.75 4.75C7.5 8 17 8 17 8z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 8C8 10 5.9 16.17 3.82 21.34l1.89.66.95-2.3c.48.17.98.3 1.34.3C19 20 22 3 22 3c-1 2-8 2.25-13 3.25S2 11.5 2 13.5s1.75 4.75 1.75 4.75C7.5 8 17 8 17 8z'/%3E%3C/svg%3E") center/contain no-repeat;
  display: inline-block;
}
.gg-hero h1{
  font-family: var(--font-display);
  color: var(--white);
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1.08;
  font-weight: 500;
  margin: 0 0 26px;
  max-width: 13ch;
}
.gg-hero p.lead{
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  color: rgba(243,241,231,0.78);
  max-width: 46ch;
  margin: 0 0 36px;
}
.gg-hero-actions{ display: flex; gap: 16px; flex-wrap: wrap; }
.gg-hero-actions .btn-two{ border-color: rgba(243,241,231,0.5) !important; color: var(--paper) !important; }
.gg-hero-actions .btn-two:hover{ background: var(--paper) !important; color: var(--ink) !important; }

/* the "spec plate" — an industrial nameplate standing in for a stock hero image */
.gg-plate{
  position: relative;
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--radius);
  padding: 32px 30px;
  box-shadow: 0 30px 70px rgba(0,0,0,0.35);
}
.gg-plate::before{
  content: "";
  position: absolute;
  inset: -26px;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(201,154,62,0.25), rgba(11,110,60,0.18) 60%, transparent 80%);
  filter: blur(6px);
}
.gg-plate-head{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
  margin-bottom: 18px;
}
.gg-plate-head span{ font-size: 12px; color: var(--ink-soft); }
.gg-plate-row{
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 14px;
}
.gg-plate-row:last-child{ border-bottom: none; }
.gg-plate-row dt{ color: var(--ink-soft); }
.gg-plate-row dd{ margin: 0; font-weight: 600; text-align: right; }

/* stat rail under hero */
.gg-stat-rail{
  border-top: 1px solid var(--line-dark);
  margin-top: 60px;
  padding-top: 32px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.gg-stat-rail .num{
  font-family: var(--font-display);
  font-size: 34px;
  color: var(--kernel);
  display: block;
  margin-bottom: 4px;
}
.gg-stat-rail .label{
  font-size: 13px;
  color: rgba(243,241,231,0.65);
}

@media (max-width: 991px){
  .gg-hero-grid{ grid-template-columns: 1fr; }
  .gg-stat-rail{ grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   SECTION RHYTHM & HEADINGS
   ========================================================================== */
.gg-section{ padding: 90px 0; }
.gg-section-head{
  max-width: 640px;
  margin: 0 0 50px;
}
.gg-section-head .kicker{
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--leaf);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.gg-section-head .kicker::before{
  content: "";
  width: 15px; height: 15px;
  background-color: var(--leaf);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 8C8 10 5.9 16.17 3.82 21.34l1.89.66.95-2.3c.48.17.98.3 1.34.3C19 20 22 3 22 3c-1 2-8 2.25-13 3.25S2 11.5 2 13.5s1.75 4.75 1.75 4.75C7.5 8 17 8 17 8z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 8C8 10 5.9 16.17 3.82 21.34l1.89.66.95-2.3c.48.17.98.3 1.34.3C19 20 22 3 22 3c-1 2-8 2.25-13 3.25S2 11.5 2 13.5s1.75 4.75 1.75 4.75C7.5 8 17 8 17 8z'/%3E%3C/svg%3E") center/contain no-repeat;
  display: inline-block;
}
.gg-section-head h2{
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 500;
  margin: 0 0 14px;
}
.gg-section-head p{
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.65;
  margin: 0;
}

/* ==========================================================================
   PROCESS — genuine sequence, numbering justified
   ========================================================================== */
.gg-process{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.gg-process-step{ background: var(--paper); padding: 36px 30px; }
.gg-process-step .idx{
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--kernel);
  display: block;
  margin-bottom: 18px;
}
.gg-process-step h3{ font-size: 20px; font-weight: 500; margin: 0 0 10px; }
.gg-process-step p{ font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; margin: 0; }
@media (max-width: 767px){ .gg-process{ grid-template-columns: 1fr; } }

/* ==========================================================================
   PRODUCT / FEATURE CARDS — spec-sheet grid, not SaaS cards
   ========================================================================== */
.tg-features-item{
  background: var(--white) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
  padding: 34px 24px !important;
  transition: border-color 0.25s ease, transform 0.25s ease !important;
}
.tg-features-item:hover{
  border-color: var(--leaf) !important;
  transform: translateY(-4px);
}
.tg-features-item .title{
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
}

/* ==========================================================================
   CONTACT — info cards + form
   ========================================================================== */
.contact-box{
  background: var(--white) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
  transition: border-color 0.25s ease !important;
}
.contact-box:hover{ border-color: var(--leaf) !important; }
.contact-box .contact-icon i{ color: var(--leaf) !important; }
.contact-box .contact-icon .overlay-icon{ background: var(--kernel) !important; }
.contact-box .title{ font-family: var(--font-body) !important; }

.contact-wrapper{
  background: var(--white) !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
  border-radius: var(--radius) !important;
}
.contact-wrapper h2{
  font-family: var(--font-display) !important;
  color: var(--ink) !important;
  font-weight: 500 !important;
  text-align: left !important;
}
.contact-wrapper .form-label{
  font-family: var(--font-body);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.contact-wrapper .form-control,
.contact-wrapper .form-select{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 11px 14px;
  font-family: var(--font-body);
}
.contact-wrapper .form-control:focus,
.contact-wrapper .form-select:focus{
  border-color: var(--leaf);
  box-shadow: 0 0 0 3px rgba(11,110,60,0.12);
}
.contact-wrapper .btn-primary{
  background: var(--leaf) !important;
  border-radius: var(--radius) !important;
  font-family: var(--font-body);
  font-weight: 600;
  padding: 12px 36px !important;
}
.contact-wrapper .btn-primary:hover{ background: var(--leaf-deep) !important; }

#contact-map iframe{ border-radius: var(--radius); border: 1px solid var(--line); min-height: 420px; width: 100%; }

/* ==========================================================================
   PAGE HEADER (about / contact / inner pages) — replaces plain breadcrumb
   ========================================================================== */
.gg-page-header{
  background: var(--ink);
  color: var(--paper);
  padding: 120px 0 60px;
  position: relative;
  overflow: hidden;
}
.gg-page-header::before{
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(var(--line-dark) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  opacity: 0.5;
}
.gg-page-header .container{ position: relative; z-index: 1; }
.gg-page-header .kicker{
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--kernel);
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px;
}
.gg-page-header .kicker::before{
  content: "";
  width: 15px; height: 15px;
  background-color: var(--kernel);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 8C8 10 5.9 16.17 3.82 21.34l1.89.66.95-2.3c.48.17.98.3 1.34.3C19 20 22 3 22 3c-1 2-8 2.25-13 3.25S2 11.5 2 13.5s1.75 4.75 1.75 4.75C7.5 8 17 8 17 8z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 8C8 10 5.9 16.17 3.82 21.34l1.89.66.95-2.3c.48.17.98.3 1.34.3C19 20 22 3 22 3c-1 2-8 2.25-13 3.25S2 11.5 2 13.5s1.75 4.75 1.75 4.75C7.5 8 17 8 17 8z'/%3E%3C/svg%3E") center/contain no-repeat;
  display: inline-block;
}
.gg-page-header h1{
  font-family: var(--font-display);
  color: var(--white);
  font-size: clamp(32px, 4.5vw, 52px);
  font-weight: 500;
  margin: 0 0 14px;
  max-width: 16ch;
}
.gg-page-header p{
  font-family: var(--font-body);
  color: rgba(243,241,231,0.75);
  font-size: 16px;
  max-width: 52ch;
  margin: 0 0 24px;
}
.gg-page-header .crumbs{
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(243,241,231,0.55);
}
.gg-page-header .crumbs a{ color: rgba(243,241,231,0.8); }

/* ==========================================================================
   ABOUT — value grid + journey timeline
   ========================================================================== */
.gg-values{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 40px 0; }
.gg-value{ background: var(--white); padding: 28px 22px; }
.gg-value h4{ font-size: 16px; font-weight: 600; font-family: var(--font-body); margin: 0 0 8px; color: var(--leaf); }
.gg-value p{ font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; margin: 0; }
@media (max-width: 767px){ .gg-values{ grid-template-columns: 1fr 1fr; } }

.gg-journey{ list-style: none; margin: 0; padding: 0; counter-reset: step; }
.gg-journey li{
  counter-increment: step;
  position: relative;
  padding: 18px 0 18px 50px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.6;
}
.gg-journey li:last-child{ border-bottom: none; }
.gg-journey li::before{
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 18px;
  font-family: var(--font-display);
  color: var(--kernel);
  font-size: 14px;
}

/* ==========================================================================
   SCROLL REVEAL — one technique, applied deliberately
   ========================================================================== */
.gg-reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.gg-reveal.is-visible{ opacity: 1; transform: translateY(0); }

/* ==========================================================================
   EXPERTISE CHIPS — mirrors a "practice areas" row
   ========================================================================== */
.gg-chip-row{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 0;
}
.gg-chip{
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 18px 9px 10px;
  font-size: 13.5px;
  color: var(--ink-soft);
  background: var(--white);
}
.gg-chip .mark{
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--leaf);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* ==========================================================================
   SERVICES / PRODUCT GRID — service-card pattern with two-letter badge
   ========================================================================== */
.gg-service-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.gg-service-card{
  background: var(--white);
  padding: 34px 28px;
  display: flex;
  flex-direction: column;
  transition: background 0.25s ease;
}
.gg-service-card:hover{ background: var(--paper); }
.gg-service-card .badge{
  width: 44px; height: 44px;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--kernel);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.gg-service-card h3{
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 10px;
}
.gg-service-card p{
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0 0 18px;
  flex-grow: 1;
}
.gg-service-card a{
  font-size: 13.5px;
  font-weight: 600;
  color: var(--leaf);
}
.gg-service-card a:hover{ color: var(--leaf-deep); }
@media (max-width: 991px){ .gg-service-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px){ .gg-service-grid{ grid-template-columns: 1fr; } }

.gg-cta-band{
  border: 1px solid var(--line);
  border-top: none;
  background: var(--paper-dim);
  padding: 30px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.gg-cta-band p{ margin: 0; font-size: 15px; color: var(--ink-soft); max-width: 44ch; }

/* ==========================================================================
   WHY-CHOOSE GRID
   ========================================================================== */
.gg-why-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.gg-why-card .tag{
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--kernel);
  display: block;
  margin-bottom: 14px;
}
.gg-why-card h3{ font-size: 19px; font-weight: 500; margin: 0 0 10px; }
.gg-why-card p{ font-size: 14.5px; color: var(--ink-soft); line-height: 1.65; margin: 0; }
@media (max-width: 767px){ .gg-why-grid{ grid-template-columns: 1fr; } }

/* ==========================================================================
   REACH BAND — dark stat band with CTA, mirrors "Our Reach"
   ========================================================================== */
.gg-reach{
  background: var(--ink);
  color: var(--paper);
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}
.gg-reach::before{
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(var(--line-dark) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  opacity: 0.5;
}
.gg-reach .container{ position: relative; z-index: 1; }
.gg-reach-grid{ display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 50px; align-items: center; }
.gg-reach h2{ color: var(--white); font-size: clamp(26px, 3vw, 36px); font-weight: 500; margin: 0 0 14px; max-width: 16ch; }
.gg-reach p{ color: rgba(243,241,231,0.75); font-size: 15.5px; line-height: 1.65; margin: 0 0 26px; max-width: 48ch; }
.gg-reach-stats{ display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; border-top: 1px solid var(--line-dark); padding-top: 26px; }
.gg-reach-stats .num{ font-family: var(--font-display); font-size: 28px; color: var(--kernel); display: block; }
.gg-reach-stats .label{ font-size: 12.5px; color: rgba(243,241,231,0.6); }
@media (max-width: 850px){ .gg-reach-grid{ grid-template-columns: 1fr; } }

/* ==========================================================================
   LOGO / MARKETPLACE STRIPS — fix legacy inline sizing bugs, unify look
   ========================================================================== */
.brand-area{ padding: 70px 0; }
.brand-area .brand-title .title{
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em;
  color: var(--ink-soft) !important;
  text-transform: none !important;
}
.brand-item{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  height: 100px;
}
.brand-item img{
  max-width: 100%;
  max-height: 56px;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.75;
  transition: filter 0.25s ease, opacity 0.25s ease;
}
.brand-item:hover img{ filter: grayscale(0); opacity: 1; }
.eco-clints img{ width: auto !important; height: auto !important; }

/* ==========================================================================
   TRUST STRIP — icon+label row, seen across every reference site
   ========================================================================== */
.gg-trust-strip{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 44px;
  padding: 44px 0;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.gg-trust-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 128px;
  text-align: center;
}
.gg-trust-item .ic{
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
}
.gg-trust-item .ic svg{ width: 19px; height: 19px; fill: var(--leaf); }
.gg-trust-item span{
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.4;
}
@media (max-width: 599px){ .gg-trust-strip{ gap: 26px; } .gg-trust-item{ width: 90px; } }

/* ==========================================================================
   COMPOSTABILITY CALLOUT — photo-backed proof section
   ========================================================================== */
.gg-compost{
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 50px;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.gg-compost-photo{ height: 100%; min-height: 280px; }
.gg-compost-photo img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.gg-compost-text{ padding: 34px 38px 34px 0; }
.gg-compost-text h3{ font-size: 22px; font-weight: 500; margin: 0 0 12px; }
.gg-compost-text p{ font-size: 15px; color: var(--ink-soft); line-height: 1.65; margin: 0; }
@media (max-width: 767px){
  .gg-compost{ grid-template-columns: 1fr; }
  .gg-compost-text{ padding: 0 24px 28px; }
  .gg-compost-photo{ min-height: 220px; }
}

.footer-area{ background: var(--ink) !important; }
.footer-area .fw-title{ font-family: var(--font-body) !important; color: var(--kernel) !important; }
.footer-area a{ color: rgba(243,241,231,0.75); }
.footer-area a:hover{ color: var(--kernel); }