/*
Theme Name: Green Orchard Supplies
Theme URI: https://greensupplies.pt
Author: Green Orchard Supplies
Version: 4.0.0
Description: Refined — simplified color system, lighter darks, consistent layout
Text Domain: gos-theme
*/

/* ============================================================
   COLOR SYSTEM — 4 COLORS MAXIMUM
   ============================================================

   PRIMARY     --color-olive    #3F4F45   Forest green — brand base
   ACCENT      --color-copper   #7A4A24   Warm copper — CTAs, accents
   DARK (soft) --color-charcoal #2E3D38   Warm charcoal-green — NOT black
   NEUTRAL     --color-base     #F5F4F2   Warm off-white — sections

   WHY these choices:
   • Charcoal (#2E3D38) has green warmth — not harsh, on-brand
   • Olive anchors all green-toned elements
   • Copper gives warmth and CTA visibility
   • Base (#F5F4F2) is warm enough to feel considered

   USAGE RULES:
   • Dark sections    → --color-charcoal  (hero, page headers, footer)
   • Primary CTAs     → --color-copper fill
   • Secondary CTAs   → --color-olive outline
   • Accent text      → --color-copper
   • Body text        → --color-brown (#4A2F1E)
   • Muted text       → --color-text-muted (#5C4A3A)
   • Section alt bg   → --color-cream (#F6F1E8)
   • Borders          → rgba(63,79,69,.12) — olive at 12%

   NEVER USE:
   • Pure black (#000000 or #1A1714)
   • More than 4 brand colors in a single view
   ============================================================ */

:root {
  /* ── 4 core colors ── */
  --color-olive:        #3F4F45;
  --color-olive-hover:  #344238;
  --color-copper:       #7A4A24;
  --color-copper-hover: #6A3F20;
  --color-copper-light: #C5A882;
  --color-charcoal:     #2E3D38;   /* replaces all pure/near-black darks */
  --color-charcoal-2:   #374840;   /* slightly lighter — footer, overlays */

  /* ── Text ── */
  --color-brown:        #4A2F1E;   /* headings, primary text */
  --color-brown-soft:   #6B4A35;
  --color-text-muted:   #5C4A3A;
  --color-text-faint:   #8A7A6E;

  /* ── Backgrounds ── */
  --color-base:         #F5F4F2;
  --color-cream:        #F6F1E8;
  --color-warm-grey:    #E8E2D8;
  --color-white:        #FFFFFF;

  /* ── Legacy aliases (keep existing templates working) ── */
  --color-dark:         var(--color-charcoal);
  --color-dark-2:       var(--color-charcoal-2);

  /* ── Typography ── */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'Courier New', 'DM Mono', 'Menlo', monospace;

  /* ── Spacing ── */
  --space-xs:  1.5rem;
  --space-sm:  3rem;
  --space-md:  5rem;
  --space-lg:  7rem;

  /* ── Radius — technical, never playful ── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  var(--radius-lg);
  --radius-2xl: var(--radius-lg);
  --radius-3xl: var(--radius-lg);

  /* ── Misc ── */
  --transition: all 0.22s ease;
  --shadow-sm:  0 2px 8px rgba(46,61,56,.06);
  --shadow-md:  0 4px 20px rgba(46,61,56,.08);
  --shadow-lg:  0 8px 40px rgba(46,61,56,.12);
  --border-soft: 1px solid rgba(63,79,69,.12);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; max-width: 100vw; }

body {
  font-family: var(--font-sans);
  background: var(--color-white);
  color: var(--color-brown);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  max-width: 100vw;
  position: relative;
}

/* Prevent any direct child of body from exceeding viewport width */
body > * { max-width: 100vw; overflow-x: hidden; }

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-brown);
  letter-spacing: -0.02em;
}

a   { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
ul  { list-style: none; }

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.section-spacing { padding: var(--space-md) 0; }
@media (min-width: 768px) { .section-spacing { padding: var(--space-lg) 0; } }

/* ============================================================
   SECTION SYSTEM — 4 types, used consistently
   Rule: avoid two identical section types in a row
   ============================================================ */

.section-light  { background: var(--color-white);  padding: var(--space-md) 0; }
.section-soft   { background: var(--color-cream);  padding: var(--space-md) 0; }
.section-base   { background: var(--color-base);   padding: var(--space-md) 0; }

/* Dark — warm charcoal, not black */
.section-dark {
  background: var(--color-charcoal);
  padding: var(--space-lg) 0;
  color: rgba(255,255,255,.82);
}
.section-dark .section-title   { color: #fff; }
.section-dark .section-eyebrow { color: var(--color-copper-light); }
.section-dark p                { color: rgba(255,255,255,.5); }

/* Olive — process, sustainability accents */
.section-olive {
  background: var(--color-olive);
  padding: var(--space-md) 0;
  color: rgba(255,255,255,.85);
}
.section-olive .section-title   { color: #fff; }
.section-olive .section-eyebrow { color: rgba(255,255,255,.5); }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.section-eyebrow {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .28em;
  color: var(--color-olive);
  margin-bottom: .85rem;
  font-family: var(--font-mono);
}

.section-title {
  font-size: clamp(1.85rem, 4vw, 3rem);
  font-weight: 800;
  color: var(--color-brown);
  line-height: 1.1;
  letter-spacing: -.03em;
}
.section-title-copper { color: var(--color-copper); }

.section-divider      { width: 3rem; height: 2px; background: var(--color-copper); border-radius: 0; margin: 1.25rem auto; }
.section-divider-left { width: 3rem; height: 2px; background: var(--color-copper); border-radius: 0; margin: 1.25rem 0; }

.page-subtitle {
  font-size: 1.05rem;
  color: var(--color-text-muted);
  line-height: 1.7;
  font-weight: 300;
}

/* ============================================================
   BUTTONS — 3 styles only. radius-sm = technical feel.
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .82rem 1.85rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: .88rem;
  cursor: pointer;
  transition: var(--transition);
  border: 1.5px solid transparent;
  text-decoration: none;
  font-family: var(--font-sans);
}

.btn-primary       { background: var(--color-copper); color: #fff; border-color: var(--color-copper); }
.btn-primary:hover { background: var(--color-copper-hover); border-color: var(--color-copper-hover); color: #fff; }

.btn-outline-olive       { background: transparent; color: var(--color-olive); border-color: var(--color-olive); }
.btn-outline-olive:hover { background: var(--color-olive); color: #fff; }

.btn-outline-white       { background: transparent; color: rgba(255,255,255,.88); border-color: rgba(255,255,255,.32); }
.btn-outline-white:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.6); color: #fff; }

/* Legacy aliases */
.btn-olive             { background: var(--color-olive); color: #fff; border-color: var(--color-olive); border-radius: var(--radius-sm); }
.btn-olive:hover       { background: var(--color-olive-hover); }
.btn-outline-brown     { background: transparent; color: var(--color-brown); border-color: var(--color-brown); border-radius: var(--radius-sm); }
.btn-outline-brown:hover { background: var(--color-brown); color: #fff; }
.btn-dark              { background: var(--color-charcoal); color: #fff; border-color: var(--color-charcoal); border-radius: var(--radius-sm); }
.btn-dark:hover        { background: var(--color-charcoal-2); }

.btn-sm { padding: .55rem 1.15rem; font-size: .8rem; }

/* Tags — pill shape retained only for tags */
.tag {
  display: inline-block;
  font-size: .68rem;
  padding: .2rem .65rem;
  border-radius: 9999px;
  border: 1px solid rgba(63,79,69,.2);
  color: var(--color-olive);
  font-weight: 600;
}
.tag-olive { background: rgba(63,79,69,.06); }

/* Filter pills */
.filter-pill {
  padding: .38rem 1rem;
  border-radius: 9999px;
  border: 1px solid rgba(63,79,69,.22);
  color: var(--color-olive);
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  background: transparent;
  font-family: var(--font-sans);
}
.filter-pill:hover, .filter-pill.active { background: var(--color-olive); color: #fff; border-color: var(--color-olive); }

/* ============================================================
   HEADER / NAVIGATION
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(63,79,69,.08);
  transition: box-shadow .3s;
}
.site-header.scrolled { box-shadow: 0 1px 24px rgba(46,61,56,.08); }

.site-header nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .9rem 0;
  position: relative;
}

.site-logo img { height: 44px; width: auto; }

.main-nav {
  display: none;
  gap: 2rem;
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%,-50%);
}
@media (min-width: 1024px) { .main-nav { display: flex; } }

.main-nav a {
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--color-brown);
  transition: color .2s;
  padding-bottom: 2px;
  border-bottom: 1.5px solid transparent;
}
.main-nav a:hover, .main-nav a.current { color: var(--color-olive); border-bottom-color: var(--color-olive); }

.header-actions { display: flex; align-items: center; gap: 1rem; }

.btn-client-login {
  background: var(--color-copper);
  color: #fff;
  padding: .42rem 1.1rem;
  border-radius: var(--radius-sm);
  font-size: .8rem;
  font-weight: 600;
  transition: var(--transition);
  display: none;
}
@media (min-width: 1024px) { .btn-client-login { display: inline-block; } }
.btn-client-login:hover { background: var(--color-copper-hover); color: #fff; }

.mobile-menu-toggle {
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  padding: 10px 6px;
  background: none;
  border: none;
}
@media (min-width: 1024px) { .mobile-menu-toggle { display: none; } }

.mobile-menu-toggle span { display: block; width: 26px; height: 2.5px; background: var(--color-brown); border-radius: 2px; transition: var(--transition); }

.mobile-menu { display: none; flex-direction: column; border-top: 1px solid rgba(63,79,69,.08); }
.mobile-menu.open { display: flex; }
.mobile-menu a {
  font-size: .88rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--color-brown);
  padding: .85rem 0;
  border-bottom: 1px solid rgba(63,79,69,.06);
}
.mobile-menu a:hover { color: var(--color-olive); }
.mobile-menu .btn-client-login { display: inline-block; width: fit-content; margin: .85rem 0; }

/* ============================================================
   HERO — REVERTED: centered, background image, lighter overlay
   ============================================================ */
.hero-section {
  position: relative;
  height: 100vh;
  min-height: 580px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Lighter overlay — was rgba(0,0,0,0.35), now 0.22 */
.hero-overlay-dark {
  position: absolute;
  inset: 0;
  background: rgba(30,42,38,.22);   /* warm charcoal, not pure black */
}

/* Subtle warm tint to preserve brand tone */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(246,241,232,.08);
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 1.5rem;
  max-width: 860px;
  width: 100%;
}

/* GOS — Green Orchard Supplies: primary visual element (now h1) */
.hero-brand-line {
  display: block;
  font-size: clamp(1.6rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -.03em;
  color: #fff;
  margin-bottom: 1rem;
  line-height: 1.1;
  font-family: var(--font-sans);
  text-transform: none;
}
.hero-brand-line strong {
  color: var(--color-copper-light);
  font-weight: 800;
}

/* Tagline (Polymer Injection Specialists) — now h2, secondary */
.hero-tagline,
.hero-content h2 {
  font-size: clamp(1rem, 2.2vw, 1.35rem);
  font-weight: 500;
  color: rgba(255,255,255,.6);
  margin-bottom: 1.25rem;
  letter-spacing: .06em;
  line-height: 1.4;
  text-transform: uppercase;
}

.hero-content p {
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  color: rgba(255,255,255,.82);
  margin-bottom: 2.5rem;
  font-weight: 300;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
}

/* PAGE HERO — inner pages — lighter olive-dark, not full charcoal */
.page-hero {
  background: var(--color-olive);
  padding: 4.5rem 0 3rem;
  position: relative;
  overflow: hidden;
}
.page-hero::after {
  content: '';
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--color-copper-light);
  opacity: .5;
}
.page-hero .section-eyebrow { color: rgba(255,255,255,.55); }
.page-hero h1 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  color: #fff;
  margin-bottom: .85rem;
  letter-spacing: -.04em;
}
.page-hero p { color: rgba(255,255,255,.6); font-weight: 300; max-width: 540px; line-height: 1.7; }
.page-hero-bordered { border-left: 3px solid var(--color-copper-light); padding-left: 2rem; }

.nav-pills { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.75rem; }
.nav-pill {
  padding: .38rem .95rem; border-radius: 9999px;
  border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.55);
  font-size: .78rem; font-weight: 600; transition: var(--transition);
}
.nav-pill:hover { background: rgba(255,255,255,.1); color: rgba(255,255,255,.85); }

/* ============================================================
   CARD SYSTEM — 3 variants only
   ============================================================ */

/* 1. ACCENT BAR — services, features */
.card-accent {
  background: var(--color-white);
  border: var(--border-soft);
  border-left: 3px solid var(--color-copper);
  border-radius: var(--radius-sm);
  padding: 2rem 2rem 2rem 1.75rem;
  transition: background .2s;
}
.card-accent:hover { background: rgba(246,241,232,.5); }
.card-accent.accent-olive { border-left-color: var(--color-olive); }
.card-accent.accent-brown { border-left-color: var(--color-brown); }

/* 2. SURFACE — neutral info card */
.card-surface {
  background: var(--color-base);
  border: var(--border-soft);
  border-radius: var(--radius-md);
  padding: 1.75rem;
}

/* 3. SPEC / DARK — on dark backgrounds */
.card-spec {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-md);
  padding: 1.5rem;
}

/* ============================================================
   SERVICE BOXES (homepage — accent bar, no shadow)
   ============================================================ */
.services-grid { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .services-grid { grid-template-columns: repeat(3,1fr); } }
.services-grid-4 { }
@media (min-width: 768px) { .services-grid-4 { grid-template-columns: repeat(3,1fr); } }

.service-box {
  background: var(--color-white);
  border: var(--border-soft);
  border-left: 3px solid var(--color-copper);
  border-radius: var(--radius-sm);
  padding: 2rem 2rem 2rem 1.75rem;
  box-shadow: none;
  transition: background .2s;
}
.service-box:hover  { background: rgba(246,241,232,.4); transform: none; box-shadow: none; }
.service-box:nth-child(2) { border-left-color: var(--color-olive); }
.service-box:nth-child(3) { border-left-color: var(--color-brown-soft, #6B4A35); }

.service-num { font-family: var(--font-mono); font-size: .65rem; font-weight: 700; letter-spacing: .12em; color: var(--color-text-faint, #8A7A6E); margin-bottom: .75rem; display: block; }
.service-box-icon { color: var(--color-olive); margin-bottom: 1.25rem; }
.service-box h2   { font-size: 1.2rem; color: var(--color-brown); margin-bottom: .85rem; }
.service-box p    { color: var(--color-text-muted); line-height: 1.7; margin-bottom: 1.25rem; font-size: .92rem; }

.feature-list { display: flex; flex-direction: column; gap: .55rem; }
.feature-item { display: flex; gap: .55rem; align-items: flex-start; color: var(--color-text-muted); font-size: .88rem; }
.feature-item svg { color: var(--color-copper); flex-shrink: 0; margin-top: 3px; }

/* ============================================================
   APPLICATIONS INTERACTIVE
   ============================================================ */
.applications-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; }
@media (min-width: 1024px) { .applications-grid { grid-template-columns: 7fr 5fr; } }

.featured-image-wrap {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: var(--border-soft);
  background: var(--color-cream);
  position: relative;
}
.featured-image-wrap img { width: 100% !important; height: 460px !important; object-fit: cover !important; display: block !important; transition: opacity .3s ease; }

.featured-image-caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 2rem;
  background: linear-gradient(to top, rgba(46,61,56,.72) 0%, rgba(46,61,56,.18) 55%, transparent 100%);
}
.featured-tag { font-size: .62rem; text-transform: uppercase; letter-spacing: .25em; color: rgba(255,255,255,.55); margin-bottom: .5rem; font-family: var(--font-mono); }
.featured-image-caption h3 { font-size: 1.6rem; font-weight: 800; color: #fff; letter-spacing: -.03em; }
.featured-image-caption p  { color: rgba(255,255,255,.75); font-size: .92rem; margin-top: .45rem; }
.featured-cta-row { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.15rem; }

.service-cards { display: flex; flex-direction: column; gap: .65rem; }

.service-card {
  width: 100%; text-align: left;
  border-radius: var(--radius-sm);
  border: var(--border-soft);
  border-left: 3px solid rgba(63,79,69,.15);
  background: var(--color-white);
  padding: 1.15rem 1.4rem;
  cursor: pointer;
  transition: var(--transition);
}
.service-card:hover, .service-card.active { border-left-color: var(--color-olive); background: rgba(246,241,232,.5); }
.service-card-inner { display: flex; gap: 1rem; align-items: flex-start; }
.service-card-bar   { margin-top: .2rem; height: 2rem; width: 3px; border-radius: 0; background: rgba(63,79,69,.2); flex-shrink: 0; transition: background .2s; }
.service-card.active .service-card-bar, .service-card:hover .service-card-bar { background: var(--color-olive); }
.service-card-title { font-size: 1rem; font-weight: 700; color: var(--color-brown); }
.service-card-desc  { color: var(--color-text-muted); font-size: .88rem; margin-top: .25rem; line-height: 1.6; }
.service-card-num   { font-size: .62rem; text-transform: uppercase; letter-spacing: .2em; color: var(--color-text-faint, #8A7A6E); font-family: var(--font-mono); }
.service-card-footer { display: flex; align-items: center; gap: .75rem; margin-top: .65rem; }
.service-card-footer span { font-size: .82rem; color: var(--color-olive); font-weight: 600; }
.service-card-line  { flex: 1; height: 1px; background: rgba(63,79,69,.12); }

/* ============================================================
   PRODUCT GRID
   ============================================================ */
.product-filter-bar { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 2.25rem; }

.product-grid {
  display: grid;
  gap: 1.15rem;
  grid-template-columns: repeat(2,1fr);
}
@media (min-width: 640px)  { .product-grid { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 1024px) { .product-grid { grid-template-columns: repeat(4,1fr); } }

.product-card {
  background: var(--color-white);
  border-radius: var(--radius-sm);
  border: var(--border-soft);
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
  display: flex;
  flex-direction: column;
}
.product-card:hover { border-color: rgba(122,74,36,.28); box-shadow: var(--shadow-sm); }

.product-card-img-wrap {
  position: relative;
  height: 175px;
  background: var(--color-base);
  overflow: hidden;
}
@media (max-width: 639px) { .product-card-img-wrap { height: 130px; } }

.product-card-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  position: absolute; inset: 0;
  transition: opacity .3s ease;
}
.product-card-img-wrap .img-back { opacity: 0; }
.product-card:hover .img-front   { opacity: 0; }
.product-card:hover .img-back    { opacity: 1; }

/* Legacy */
.product-card-img { width: 100%; height: 200px; object-fit: cover; display: block; background: var(--color-base); }

.product-ref {
  position: absolute; top: .45rem; left: .6rem;
  font-family: var(--font-mono); font-size: .63rem;
  color: rgba(0,0,0,.28); background: rgba(255,255,255,.72);
  padding: 1px 5px; border-radius: 2px; letter-spacing: .05em;
}
.product-flip-hint {
  position: absolute; bottom: .45rem; right: .6rem;
  font-size: .6rem; color: rgba(0,0,0,.2);
  font-family: var(--font-mono); opacity: 0; transition: opacity .2s;
}
.product-card:hover .product-flip-hint { opacity: 1; }

.product-card-body { padding: .85rem 1rem 1rem; flex: 1; display: flex; flex-direction: column; }
.product-card h3   { font-size: .92rem; color: var(--color-brown); margin-bottom: .2rem; }
.product-card-category { font-size: .7rem; color: var(--color-olive); font-weight: 600; margin-bottom: .65rem; text-transform: uppercase; letter-spacing: .08em; }
.product-card p    { color: var(--color-text-muted); font-size: .9rem; line-height: 1.6; margin-bottom: 1.25rem; }
.tag-list { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .65rem; }

.product-card-action {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto; padding-top: .65rem;
  border-top: 1px solid rgba(63,79,69,.07);
}
.product-card-action a, .product-card-action span { font-size: .78rem; font-weight: 600; color: var(--color-copper); }
.price-gate  { font-size: .7rem; color: rgba(63,79,69,.65); font-weight: 600; font-family: var(--font-mono); }
.price-value { font-size: .82rem; font-weight: 700; color: var(--color-brown); font-family: var(--font-mono); }

/* ============================================================
   PRODUCT DETAIL
   ============================================================ */
.product-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; margin-top: 2rem; }
@media (max-width: 767px) { .product-detail-grid { grid-template-columns: 1fr; gap: 2rem; } }

.product-detail-main-img { border-radius: var(--radius-md); overflow: hidden; background: var(--color-base); border: var(--border-soft); position: relative; }
.product-detail-main-img img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: opacity .3s; }
.product-detail-ref { position: absolute; top: .75rem; left: .85rem; font-family: var(--font-mono); font-size: .72rem; color: rgba(0,0,0,.32); background: rgba(255,255,255,.8); padding: 2px 8px; border-radius: 2px; }
.product-detail-flip-btn { width: 100%; padding: .58rem; margin-top: .7rem; border: var(--border-soft); border-radius: var(--radius-sm); background: transparent; color: var(--color-text-muted); font-size: .78rem; font-weight: 600; cursor: pointer; transition: var(--transition); font-family: var(--font-sans); text-transform: uppercase; letter-spacing: .08em; }
.product-detail-flip-btn:hover { background: var(--color-base); }

.spec-sheet { border-collapse: collapse; width: 100%; margin-top: .5rem; }
.spec-sheet tr { border-bottom: 1px solid rgba(63,79,69,.07); }
.spec-sheet td { padding: .58rem 0; vertical-align: top; }
.spec-sheet td:first-child { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--color-text-faint, #8A7A6E); width: 42%; }
.spec-sheet td:last-child   { font-family: var(--font-mono); font-size: .85rem; font-weight: 600; color: var(--color-brown); }

.detail-tabs { display: flex; border-bottom: 2px solid rgba(63,79,69,.08); margin: 2rem 0 1.5rem; }
.detail-tab  { padding: .62rem 1.2rem; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-faint, #8A7A6E); border: none; background: none; border-bottom: 2px solid transparent; margin-bottom: -2px; cursor: pointer; }
.detail-tab.active { color: var(--color-copper); border-bottom-color: var(--color-copper); }
.detail-tab-pane { display: none; }
.detail-tab-pane.active { display: block; }

/* ============================================================
   CTA SECTION — LIGHTENED (was too dark)
   Use olive-tinted light bg instead of dark charcoal
   ============================================================ */
.cta-section-dark {
  background: var(--color-charcoal);
  padding: var(--space-md) 0;     /* reduced from --space-lg */
  text-align: center;
}
.cta-section-dark .section-eyebrow { color: var(--color-copper-light); }
.cta-section-dark h2 { font-size: clamp(1.6rem, 3.5vw, 2.6rem); font-weight: 800; color: #fff; letter-spacing: -.03em; margin-bottom: .85rem; }
.cta-section-dark p  { font-size: .98rem; color: rgba(255,255,255,.42); line-height: 1.7; margin-bottom: 2rem; max-width: 540px; margin-left: auto; margin-right: auto; font-weight: 300; }
.cta-btns { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }

/* Light CTA variant — for pages where dark feels heavy */
.cta-section-light {
  background: var(--color-cream);
  padding: var(--space-md) 0;
  text-align: center;
}
.cta-section-light .section-eyebrow { color: var(--color-olive); }
.cta-section-light h2 { font-size: clamp(1.6rem, 3.5vw, 2.6rem); font-weight: 800; color: var(--color-brown); letter-spacing: -.03em; margin-bottom: .85rem; }
.cta-section-light p  { font-size: .98rem; color: var(--color-text-muted); line-height: 1.7; margin-bottom: 2rem; max-width: 540px; margin-left: auto; margin-right: auto; }

/* Legacy */
.cta-section { background: var(--color-white); padding: var(--space-md) 0; }
.cta-box { background: rgba(63,79,69,.06); border: var(--border-soft); border-radius: var(--radius-md); padding: 4rem 2rem; text-align: center; }
.cta-box h2 { font-size: 2rem; color: var(--color-brown); margin-bottom: 1rem; }
.cta-box p  { color: var(--color-text-muted); font-size: 1rem; margin-bottom: 2rem; max-width: 580px; margin-left: auto; margin-right: auto; }

/* ============================================================
   STATS SECTION (Technology page)
   ============================================================ */
.stats-section { background: var(--color-charcoal); padding: 4rem 0; color: #fff; }
.stats-grid    { display: grid; gap: 3rem; text-align: center; }
@media (min-width: 768px) { .stats-grid { grid-template-columns: repeat(3,1fr); } }
.stat-number { font-size: 3rem; font-weight: 800; margin-bottom: .75rem; letter-spacing: -.04em; font-family: var(--font-mono); color: #fff; }
.stat-label  { font-size: .78rem; color: rgba(255,255,255,.42); font-weight: 600; text-transform: uppercase; letter-spacing: .18em; }

/* ============================================================
   FOOTER — lighter olive tone, no brand section, centered
   ============================================================ */
.site-footer,
.site-footer > *,
.footer-top { background: var(--color-olive) !important; }

/* 3-col centered (brand column removed) */
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  margin-bottom: 2rem;
  justify-items: center;
  text-align: center;
}
@media (min-width: 640px)  { .footer-grid { grid-template-columns: repeat(3,1fr); } }

.footer-brand img { height: 36px; margin-bottom: 1.15rem; }
.footer-brand p   { font-size: .82rem; line-height: 1.7; color: rgba(255,255,255,.4); max-width: 300px; }

.footer-col h4 {
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .18em; color: rgba(255,255,255,.5);
  margin-bottom: 1rem; font-family: var(--font-mono);
}
.footer-col ul { display: flex; flex-direction: column; gap: .75rem; align-items: center; }
.footer-col li a, .footer-col li { font-size: .88rem; color: rgba(255,255,255,.65); transition: color .2s; }
.footer-col li a:hover { color: #fff; }
.footer-contact-item { display: flex; align-items: flex-start; gap: .65rem; justify-content: center; }
.footer-contact-item svg { color: rgba(255,255,255,.45); flex-shrink: 0; margin-top: 2px; }

.footer-bottom { background: rgba(0,0,0,.15); padding: 1.15rem 0; }
.footer-bottom .container {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .75rem;
}
.footer-bottom p { font-size: .75rem; color: rgba(255,255,255,.35); font-family: var(--font-mono); }
.footer-links { display: flex; gap: 1.5rem; }
.footer-links a { font-size: .75rem; color: rgba(255,255,255,.35); font-family: var(--font-mono); transition: color .2s; }
.footer-links a:hover { color: rgba(255,255,255,.7); }

/* ============================================================
   TECHNOLOGY PAGE
   ============================================================ */
.tech-material-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.25rem; }
@media (max-width: 640px) { .tech-material-grid { grid-template-columns: 1fr; } }

.tech-material-card { background: var(--color-white); border: var(--border-soft); border-left: 3px solid var(--color-olive); border-radius: var(--radius-sm); padding: 1.75rem; }
.tech-material-card.accent-copper { border-left-color: var(--color-copper); }

.tech-process-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.15rem; }
@media (max-width: 640px) { .tech-process-grid { grid-template-columns: 1fr; } }

.tech-process-item { display: flex; gap: 1rem; align-items: flex-start; padding: 1.5rem; background: var(--color-base); border-radius: var(--radius-md); }
.tech-icon-wrap { width: 42px; height: 42px; background: var(--color-olive); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; }
.tech-process-item h3 { font-size: 1rem; font-weight: 700; color: var(--color-brown); margin-bottom: .35rem; }
.tech-process-item p  { color: var(--color-text-muted); font-size: .85rem; line-height: 1.6; margin: 0; }
.tech-compat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
@media (max-width: 640px) { .tech-compat-grid { grid-template-columns: 1fr; } }

/* ============================================================
   SUSTAINABILITY PAGE
   ============================================================ */
.sust-props { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; margin-top: 2.5rem; }
@media (max-width: 767px) { .sust-props { grid-template-columns: 1fr; } }

.sust-prop { background: var(--color-white); border: var(--border-soft); border-top: 3px solid var(--color-olive); border-radius: var(--radius-sm); padding: 1.5rem; }
.sust-prop h4 { font-size: .92rem; font-weight: 700; color: var(--color-brown); margin-bottom: .45rem; }
.sust-prop p  { font-size: .82rem; color: var(--color-text-muted); line-height: 1.6; margin: 0; }

.sust-conditions { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; margin-top: 2.5rem; }
@media (max-width: 767px) { .sust-conditions { grid-template-columns: 1fr; } }

.sust-condition-card { border-radius: var(--radius-sm); padding: 1.75rem; border: var(--border-soft); border-top: 3px solid var(--color-olive); }
.sust-condition-card.cond-landfill { background: #f2f5f8; border-top-color: var(--color-charcoal); }
.sust-condition-card.cond-soil     { background: rgba(63,79,69,.04); border-top-color: var(--color-olive); }

.sust-condition-label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; color: var(--color-olive); margin-bottom: .75rem; font-family: var(--font-mono); display: block; }
.cond-landfill .sust-condition-label { color: var(--color-charcoal); }

.sust-facts-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem; max-width: 860px; margin: 0 auto; }
@media (max-width: 767px) { .sust-facts-grid { grid-template-columns: 1fr; gap: 1rem; } }

.sust-fact { text-align: center; padding: 1.5rem; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-md); }
.sust-fact-num   { font-size: 2.4rem; font-weight: 900; color: #fff; line-height: 1; margin-bottom: .3rem; font-family: var(--font-mono); }
.sust-fact-label { font-size: .8rem; color: rgba(255,255,255,.55); line-height: 1.5; }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-grid { display: grid; gap: 4rem; max-width: 1000px; margin: 0 auto; }
@media (min-width: 768px) { .contact-grid { grid-template-columns: 1fr 1fr; } }

.contact-info { display: flex; flex-direction: column; gap: 2.25rem; }
.contact-info-item { display: flex; gap: 1rem; align-items: flex-start; }
.contact-info-item svg { color: var(--color-olive); flex-shrink: 0; margin-top: 4px; }
.contact-info-item h3  { font-size: .95rem; font-weight: 700; color: var(--color-brown); margin-bottom: .35rem; }
.contact-info-item p   { color: var(--color-text-muted); font-size: .92rem; line-height: 1.6; }
.contact-info-item a   { color: var(--color-copper); }

.contact-form { background: var(--color-white); padding: 2.25rem; border-radius: var(--radius-md); border: var(--border-soft); }
.form-group { display: flex; flex-direction: column; gap: .38rem; margin-bottom: 1.15rem; }
.form-group label { font-size: .72rem; font-weight: 700; color: var(--color-brown); text-transform: uppercase; letter-spacing: .08em; }
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%; padding: .72rem 1rem;
  border: 1px solid var(--color-warm-grey);
  border-radius: var(--radius-sm);
  font-size: .92rem; color: var(--color-brown);
  background: var(--color-white);
  transition: border-color .2s; outline: none;
  font-family: var(--font-sans);
}
.form-group input:focus, .form-group textarea:focus { border-color: var(--color-olive); }
.form-group textarea { resize: vertical; min-height: 125px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
@media (max-width: 767px) { .form-row { grid-template-columns: 1fr; } }

.form-submit { width: 100%; padding: .85rem; border-radius: var(--radius-sm); font-size: .88rem; font-weight: 600; background: var(--color-copper); color: #fff; border: none; cursor: pointer; transition: var(--transition); text-transform: uppercase; letter-spacing: .06em; font-family: var(--font-sans); }
.form-submit:hover { background: var(--color-copper-hover); }

/* ============================================================
   CLIENT AREA
   ============================================================ */
.client-area-wrapper { max-width: 860px; margin: 0 auto; }
.client-status-bar { display: flex; align-items: center; gap: 1rem; padding: .85rem 1.25rem; border-radius: var(--radius-sm); margin-bottom: 2rem; font-size: .88rem; font-weight: 600; }
.client-status-bar.logged-in  { background: rgba(63,79,69,.07); border: 1px solid rgba(63,79,69,.15); color: var(--color-olive); }
.client-status-bar.logged-out { background: rgba(122,74,36,.06); border: 1px solid rgba(122,74,36,.15); color: var(--color-copper); }
.client-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-olive); flex-shrink: 0; }
.client-status-bar.logged-out .client-status-dot { background: var(--color-copper); }

/* ============================================================
   PROJECTS PAGE
   ============================================================ */
.project-card { background: var(--color-white); border: var(--border-soft); border-left: 3px solid rgba(63,79,69,.12); border-radius: var(--radius-sm); transition: border-left-color .3s; margin-bottom: 1.5rem; }
.project-card:hover { border-left-color: var(--color-copper); }
.project-card-body { padding: 2.5rem; }
.project-header { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.15rem; }
@media (min-width: 768px) { .project-header { flex-direction: row; justify-content: space-between; align-items: flex-start; } }
.project-industry { font-size: .62rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--color-copper); display: block; margin-bottom: .35rem; font-family: var(--font-mono); }
.project-title { font-size: 1.3rem; color: var(--color-brown); }
.project-desc  { color: var(--color-text-muted); line-height: 1.7; font-size: .9rem; margin-bottom: 1.15rem; }
.btn-details { border: 1px solid rgba(74,47,30,.18); color: var(--color-brown); padding: .42rem .95rem; border-radius: var(--radius-sm); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; cursor: pointer; background: none; transition: var(--transition); white-space: nowrap; font-family: var(--font-sans); }
.btn-details:hover { background: var(--color-brown); color: #fff; }
.project-details { border-top: 1px solid rgba(63,79,69,.07); padding: 2rem 2.5rem; display: none; }
.project-details.open { display: block; }
.project-details h3 { font-size: 1rem; color: var(--color-brown); margin-bottom: .75rem; }
.project-details p  { color: var(--color-text-muted); font-size: .88rem; line-height: 1.7; margin-bottom: 1.15rem; }
.private-notice { background: var(--color-base); border: var(--border-soft); border-radius: var(--radius-sm); padding: 1.15rem; display: flex; gap: 1rem; }
.private-notice p { color: var(--color-text-muted); font-size: .82rem; line-height: 1.6; margin: 0; }

/* ============================================================
   CUSTOM PROJECT BOXES
   ============================================================ */
.custom-project-grid { display: grid; gap: 1.5rem; }
@media (min-width: 1024px) { .custom-project-grid { grid-template-columns: repeat(3,1fr); } }

.custom-box { background: var(--color-white); border: var(--border-soft); border-left: 3px solid rgba(63,79,69,.22); border-radius: var(--radius-sm); padding: 2rem; }
.custom-box h3 { font-size: 1.05rem; color: var(--color-brown); margin-bottom: .85rem; }
.custom-box ul { display: flex; flex-direction: column; gap: .55rem; }
.custom-box li { color: var(--color-brown-soft); font-size: .88rem; }
.custom-box p  { color: var(--color-brown-soft); font-size: .88rem; line-height: 1.6; margin-bottom: 1.15rem; }

/* ============================================================
   ENGINEERING STEPS
   ============================================================ */
.engineering-steps { max-width: 860px; margin: 0 auto; }
.step-item { position: relative; padding-left: 2.5rem; margin-bottom: 3.5rem; }
.step-bar  { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 0; }
.step-bar-olive  { background: var(--color-olive); }
.step-bar-copper { background: var(--color-copper); }
.step-ghost-number { position: absolute; left: -.5rem; top: -1.5rem; font-size: 7rem; font-weight: 800; color: rgba(0,0,0,.03); line-height: 1; user-select: none; pointer-events: none; font-family: var(--font-mono); }
.step-title-olive  { font-size: 1.8rem; font-weight: 800; color: var(--color-olive); letter-spacing: -.03em; }
.step-title-copper { font-size: 1.8rem; font-weight: 800; color: var(--color-copper); letter-spacing: -.03em; }
.step-desc { color: var(--color-text-muted); font-size: 1rem; line-height: 1.7; margin-top: .85rem; }

/* ============================================================
   GTRANSLATE
   ============================================================ */
.gtranslate-wrap { display: none; }
@media (min-width: 1024px) { .gtranslate-wrap { display: flex; align-items: center; } }
.gtranslate-wrap .gt-current-lang, .gtranslate-wrap a.glink, .gtranslate-wrap select {
  font-family: var(--font-sans) !important; font-size: .78rem !important; font-weight: 600 !important;
  color: var(--color-brown) !important; text-transform: uppercase !important; letter-spacing: .05em !important;
  background: transparent !important; border: 1px solid rgba(74,47,30,.18) !important;
  border-radius: var(--radius-sm) !important; padding: .3rem .65rem !important;
  cursor: pointer !important; transition: border-color .2s, color .2s !important;
}
.gtranslate-wrap a.glink:hover, .gtranslate-wrap select:hover { border-color: var(--color-copper) !important; color: var(--color-copper) !important; }
.gtranslate-wrap img { width: 16px !important; height: auto !important; border-radius: 1px !important; margin-right: 4px !important; vertical-align: middle !important; }

/* ============================================================
   UTILITIES
   ============================================================ */
.text-center { text-align: center; }
.text-olive  { color: var(--color-olive); }
.text-copper { color: var(--color-copper); }
.text-brown  { color: var(--color-brown); }
.text-muted  { color: var(--color-text-muted); }
.text-white  { color: #fff; }
.text-mono   { font-family: var(--font-mono); }
.bg-cream    { background: var(--color-cream); }
.bg-base     { background: var(--color-base); }
.bg-white    { background: var(--color-white); }
.bg-dark     { background: var(--color-charcoal); }
.mt-4 { margin-top: 1rem; }  .mt-6 { margin-top: 1.5rem; } .mt-8 { margin-top: 2rem; } .mt-10 { margin-top: 2.5rem; }
.mb-2 { margin-bottom: .5rem; } .mb-4 { margin-bottom: 1rem; } .mb-6 { margin-bottom: 1.5rem; } .mb-8 { margin-bottom: 2rem; } .mb-10 { margin-bottom: 2.5rem; } .mb-14 { margin-bottom: 3.5rem; }
.flex { display: flex; } .flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; } .items-start { align-items: flex-start; }
.gap-3 { gap: .75rem; } .gap-4 { gap: 1rem; }
.max-w-2xl { max-width: 42rem; } .max-w-3xl { max-width: 48rem; }
.mx-auto { margin-left: auto; margin-right: auto; } .relative { position: relative; }

.wp-block-image img { max-width: 100%; height: auto; }
.aligncenter { display: block; margin: 0 auto; }

/* ============================================================
   RESPONSIVE — mobile-first
   ============================================================ */
@media (max-width: 767px) {
  /* More breathing room between sections */
  .section-light, .section-soft, .section-base, .section-olive { padding: 3.5rem 0; }
  .section-dark, .cta-section-dark, .cta-section-light { padding: 3.5rem 0; }

  /* Hero */
  .hero-section { min-height: 480px; }
  .hero-content { padding: 0 1.25rem; }
  .hero-brand-line { font-size: clamp(1.6rem, 8vw, 2.4rem); }
  .hero-content h2,
  .hero-tagline    { font-size: clamp(.8rem, 3.5vw, 1rem); }
  .hero-content p  { font-size: .92rem; max-width: 100%; }

  /* Full-width CTAs on mobile */
  .hero-content .btn { display: block; width: 100%; text-align: center; }
  .cta-btns { flex-direction: column; align-items: center; }
  .cta-btns .btn { width: 100%; max-width: 340px; justify-content: center; }

  /* Typography */
  .section-title { font-size: 1.75rem; }
  /* Page hero — smaller heading on mobile to prevent overflow */
  .page-hero h1  { font-size: clamp(1.4rem, 6vw, 2rem); }
  .page-hero { padding: 3rem 0 2rem; }
  .page-hero-bordered { padding-left: 1.25rem; }

  /* Products — 2 col kept, smaller images */
  .product-grid { grid-template-columns: repeat(2,1fr); gap: .85rem; }
  .product-card-img-wrap { height: 128px; }

  /* Applications */
  .applications-grid { grid-template-columns: 1fr; }
  .featured-image-wrap img { height: 280px !important; }

  /* Contact form */
  .contact-form { padding: 1.5rem; }
}

@media (max-width: 420px) {
  .product-grid { grid-template-columns: 1fr; }
  .sust-facts-grid { grid-template-columns: 1fr; }
}

/* Tech page responsive */
@media (max-width: 640px) {
  .gos-tech-grid, .gos-tech-grid-3 { grid-template-columns: 1fr !important; }
}

/* ============================================================
   MOBILE — Logo centered, GTranslate left, Hamburger right
   ============================================================ */
@media (max-width: 1023px) {
  .site-header nav {
    justify-content: space-between !important;
    position: relative;
    flex-wrap: nowrap;
  }
  .site-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    padding-left: 0;
    z-index: 1;
    pointer-events: auto;
  }
  /* Pull the GTranslate wrapper out of header-actions visually, by giving it order -1
     and the header-actions stays right via margin-left:auto on the hamburger */
  .header-actions {
    display: contents !important;
  }
  /* GTranslate globe — first item, on the LEFT */
  .gtranslate-wrap,
  #headerGtranslate {
    display: flex !important;
    align-items: center !important;
    order: -1 !important;
    margin: 0 !important;
    z-index: 2;
    flex-shrink: 0;
  }
  /* Hamburger — right side, with breathing room */
  .mobile-menu-toggle {
    order: 99 !important;
    padding: 10px 4px 10px 10px !important;
    margin-left: auto !important;
    z-index: 2;
  }
  .mobile-menu-toggle span {
    width: 26px !important;
    height: 2.5px !important;
  }
  /* Hide desktop client-login on mobile (it's already in the mobile menu) */
  .header-actions > .btn-client-login,
  .site-header nav > .header-actions > .btn-client-login {
    display: none !important;
  }
  /* Mobile menu client-login styling */
  .mobile-menu .btn-client-login {
    font-size: .78rem;
    padding: .4rem 1rem;
    color: #fff;
    background: var(--color-copper);
    border-radius: var(--radius-sm);
    text-transform: none;
    letter-spacing: 0;
  }
}

/* ============================================================
   LARGE SCREENS (>1440px) — wider container
   ============================================================ */
@media (min-width: 1441px) {
  .container { max-width: 1320px; }
}

/* ============================================================
   TABLET LANDSCAPE (1024-1199px) — tighter card grids
   ============================================================ */
@media (min-width: 1024px) and (max-width: 1199px) {
  /* Sustainability: 5 cards become 2 cols (instead of 3+2) for breathing room */
  .sust-cards-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ============================================================
   STICKY FIX — only enable on true desktop (≥1024px portrait+)
   Disable sticky on tablet portrait to avoid header overlap
   ============================================================ */
@media (max-width: 1023px) {
  .detail-images { position: relative !important; top: auto !important; }
}

/* ============================================================
   LOGO — reserve height to avoid layout shift
   ============================================================ */
.site-logo-img { height: 44px; width: auto; }
.site-logo img { height: 44px; width: auto; }
@media (max-width: 1023px) {
  .site-logo-img { height: 36px; }
  .site-logo img { height: 36px; }
}
@media (max-width: 380px) {
  .site-logo-img { height: 30px; }
  .site-logo img { height: 30px; }
}