/* ==========================================================================
   Praivic and Netbrite Investment
   Palette: shades of green on white, per the approved home-page design.
   Motion: every animation collapses under prefers-reduced-motion — see the
   block near the end of this file.
   ========================================================================== */

:root {
  /* Greens — light to dark */
  --green-50:  #eff5f0;
  --green-100: #dceadf;
  --green-200: #b9d4c1;
  --green-300: #8fbb9d;
  --green-500: #3d8b5c;
  --green-600: #2c7047;
  --green-700: #1f5735;
  --green-800: #163f27;   /* dark bands, headings */
  --green-900: #0d2b1a;   /* footer, deepest */

  /* Warm accent, used sparingly — eyebrows, badge, one CTA */
  --gold:       #c98f2e;
  --gold-light: #e0ac4f;
  --gold-ink:   #8a6013;  /* 4.8:1 on white, safe for small text */

  /* Surfaces */
  --white: #ffffff;
  --paper: #fdfdfb;
  --cream: #f6f4ec;       /* hero ground */
  --mist:  #f4f8f5;       /* alternating sections */

  /* Text */
  --ink:   #14261c;
  --muted: #5b6f62;
  --on-dark:       rgba(255, 255, 255, .90);
  --on-dark-muted: rgba(255, 255, 255, .66);

  /* Lines, shadows */
  --border:      rgba(22, 63, 39, .14);
  --border-dark: rgba(255, 255, 255, .18);
  --shadow-sm:   0 4px 16px rgba(13, 43, 26, .06);
  --shadow-md:   0 16px 44px rgba(13, 43, 26, .10);
  --shadow-lg:   0 34px 90px rgba(13, 43, 26, .18);

  /* Type */
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  /* Layout */
  --container: min(1200px, calc(100% - 48px));
  --header-h:  88px;
  --radius:    20px;
  --radius-lg: 28px;

  /* Motion */
  --ease:      240ms cubic-bezier(.22, .61, .36, 1);
  --ease-slow: 720ms cubic-bezier(.22, .61, .36, 1);
  --ease-out:  900ms cubic-bezier(.16, .84, .28, 1);
}

/* --------------------------------------------------------------- base --- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a   { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3 {
  margin: 0;
  color: var(--green-800);
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.02em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); }
h3 { font-size: 1.22rem; letter-spacing: -.01em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.container { width: var(--container); margin-inline: auto; }
.section   { padding: clamp(76px, 10vw, 130px) 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  padding: 12px 20px; border-radius: 0 0 12px 12px;
  background: var(--green-800); color: #fff;
  font-weight: 600; text-decoration: none;
  transition: top var(--ease);
}
.skip-link:focus { top: 0; }

:where(a, button, summary, input, textarea):focus-visible {
  outline: 3px solid var(--green-500);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ------------------------------------------------------------ shared --- */

.eyebrow {
  margin: 0 0 18px;
  color: var(--gold-ink);
  font-size: .74rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
}
.eyebrow.light { color: var(--gold-light); }

.section-heading { max-width: 660px; margin-bottom: 56px; }
.section-heading p { color: var(--muted); font-size: 1.06rem; }

.section-copy > p { max-width: 56ch; color: var(--muted); font-size: 1.06rem; }
.section-copy h2  { margin-bottom: 22px; }

.lead-light { color: var(--on-dark-muted) !important; }

/* Buttons ---------------------------------------------------------------- */

.btn {
  --btn-bg: var(--green-700);
  --btn-fg: #fff;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 28px;
  border: 1px solid transparent; border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-fg);
  font: 600 .82rem/1 var(--sans);
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; overflow: hidden;
  transition: transform var(--ease), box-shadow var(--ease),
              background-color var(--ease), border-color var(--ease);
}
.btn:hover  { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }

/* Sheen that sweeps across on hover. */
.btn::after {
  content: '';
  position: absolute; inset: 0 auto 0 -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent);
  transform: skewX(-18deg);
  transition: left 620ms cubic-bezier(.22, .61, .36, 1);
}
.btn:hover::after { left: 120%; }

.btn-green:hover { background: var(--green-800); }

.btn-gold { --btn-bg: var(--gold); --btn-fg: #21160a; }
.btn-gold:hover { background: var(--gold-light); }

.btn-outline {
  --btn-bg: transparent; --btn-fg: var(--green-800);
  border-color: var(--green-300);
}
.btn-outline:hover { background: var(--green-50); border-color: var(--green-500); }

.btn-ghost-light {
  --btn-bg: transparent; --btn-fg: #fff;
  border-color: var(--border-dark);
}
.btn-ghost-light:hover { background: rgba(255, 255, 255, .12); }

.btn-block { width: 100%; }

.btn-arrow { transition: transform var(--ease); }
.btn:hover .btn-arrow,
.text-link:hover .btn-arrow { transform: translateX(5px); }

.text-link {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 8px; padding-bottom: 3px;
  border-bottom: 2px solid var(--green-200);
  color: var(--green-700);
  font-weight: 600; font-size: .95rem; text-decoration: none;
  transition: color var(--ease), border-color var(--ease);
}
.text-link:hover { color: var(--green-800); border-color: var(--green-500); }

.icon { flex: none; width: 24px; height: 24px; }

/* Images ---------------------------------------------------------------- */

.image-frame {
  position: relative;
  border-radius: var(--radius-lg);
  background: var(--green-50);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.image-frame img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--ease-slow);
}
.image-frame:hover img { transform: scale(1.045); }
.image-frame.dark { box-shadow: 0 30px 70px rgba(0, 0, 0, .32); }

.image-placeholder {
  display: grid; place-items: center;
  min-height: 260px; padding: 24px;
  border-radius: var(--radius-lg);
  background: repeating-linear-gradient(135deg,
    var(--green-50) 0 14px, var(--green-100) 14px 28px);
  color: var(--green-700);
  font-size: .8rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; text-align: center;
}

/* ------------------------------------------------------------- header --- */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--ease), border-color var(--ease);
}
.site-header.is-scrolled {
  border-bottom-color: var(--border);
  box-shadow: 0 6px 26px rgba(13, 43, 26, .07);
}

.header-inner {
  display: flex; align-items: center; gap: 28px;
  min-height: var(--header-h);
}

.brand { flex: none; display: block; text-decoration: none; }
.brand img { width: auto; height: 52px; transition: transform var(--ease); }
.brand:hover img { transform: scale(1.03); }

.site-nav { margin-left: auto; }
.site-nav > ul { display: flex; align-items: center; gap: clamp(16px, 2.1vw, 32px); }

/* Scoped to the list so these rules never reach the CTA button that also
   lives inside .site-nav. */
.site-nav > ul a {
  position: relative;
  display: block; padding: 8px 0;
  color: var(--green-800);
  font-size: .78rem; font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase; text-decoration: none;
  transition: color var(--ease);
}
.site-nav > ul a::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--ease);
}
.site-nav > ul a:hover { color: var(--green-600); }
.site-nav > ul a.is-active { color: var(--green-600); }
.site-nav > ul a:hover::after,
.site-nav > ul a.is-active::after,
.site-nav > ul a[aria-current="page"]::after { transform: scaleX(1); }

.header-cta { flex: none; padding: 13px 24px; }
.site-nav .nav-cta-mobile { display: none; }

/* Reading-progress line along the bottom edge of the header. */
.scroll-progress {
  position: absolute; left: 0; bottom: -1px;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--green-500), var(--gold));
  transform: scaleX(var(--progress, 0)); transform-origin: left;
}

.menu-toggle {
  display: none;
  width: 46px; height: 46px; padding: 0; margin-left: auto;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--white); cursor: pointer;
}
.menu-bars { display: grid; gap: 5px; place-items: center; }
.menu-bars span {
  display: block; width: 20px; height: 2px;
  background: var(--green-800); border-radius: 2px;
  transition: transform var(--ease), opacity var(--ease);
}
[aria-expanded="true"] .menu-bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
[aria-expanded="true"] .menu-bars span:nth-child(2) { opacity: 0; }
[aria-expanded="true"] .menu-bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------------- hero --- */

.hero {
  position: relative;
  padding: clamp(48px, 7vw, 88px) 0 clamp(60px, 8vw, 104px);
  background: linear-gradient(170deg, var(--cream) 0%, var(--paper) 72%);
  overflow: hidden;
}

.hero-blob {
  position: absolute; top: -18%; right: -12%;
  width: 60vw; height: 60vw; max-width: 780px; max-height: 780px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 32%,
    rgba(61, 139, 92, .16), rgba(61, 139, 92, 0) 68%);
  animation: blob-drift 18s ease-in-out infinite alternate;
}
@keyframes blob-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-3%, 3%, 0) scale(1.07); }
}

.hero-grid {
  position: relative;
  display: grid; grid-template-columns: 1.02fr .98fr;
  gap: clamp(32px, 5vw, 72px); align-items: center;
}

.hero-copy  { max-width: 34ch; }
.hero-title { margin-bottom: 26px; }
.hero-title .title-line { display: block; }
.hero-title .title-line:nth-child(2) { color: var(--green-700); }

/* Word-by-word rise: each .word is a mask, the inner span is what moves. */
.word { display: inline-block; overflow: hidden; vertical-align: bottom; }
.word > span {
  display: inline-block;
  transform: translateY(105%);
  animation: word-rise var(--ease-out) forwards;
  animation-delay: calc(120ms + var(--i) * 78ms);
}
@keyframes word-rise { to { transform: translateY(0); } }

.hero-lead { margin-bottom: 32px; color: var(--muted); font-size: 1.09rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

.hero-meta {
  display: flex; align-items: center; gap: 10px;
  margin-top: 30px;
  color: var(--muted); font-size: .9rem;
}
.hero-meta .icon { width: 18px; height: 18px; color: var(--green-500); }

/* Staggered fade for everything in the hero that is not the headline. */
.hero-fade {
  opacity: 0;
  animation: fade-up var(--ease-out) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* Hero imagery ---------------------------------------------------------- */

.hero-media {
  position: relative;
  aspect-ratio: 1 / 1;
  display: grid; place-items: center;
}

.hero-ring {
  position: absolute; inset: 4%;
  border: 1px dashed var(--green-200); border-radius: 50%;
  animation: spin 46s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.hero-circle {
  margin: 0;
  border-radius: 50%;
  background: var(--green-100);
  overflow: hidden;
}
.hero-circle img { width: 100%; height: 100%; object-fit: cover; }

.hero-circle-main {
  position: relative;
  width: 78%; aspect-ratio: 1;
  box-shadow: var(--shadow-lg);
  animation: float 7s ease-in-out infinite;
}
.hero-circle-small {
  position: absolute; left: 2%; bottom: 6%;
  width: 34%; aspect-ratio: 1;
  border: 6px solid var(--white);
  box-shadow: var(--shadow-md);
  animation: float 9s ease-in-out infinite reverse;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

/* Rotating "100% local" seal. */
.hero-badge {
  position: absolute; right: 1%; top: 8%;
  width: clamp(104px, 12vw, 138px); aspect-ratio: 1;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--green-800); color: #fff;
  box-shadow: var(--shadow-md);
}
.hero-badge svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  animation: spin 26s linear infinite;
}
.badge-text {
  fill: var(--gold-light);
  font: 700 8.4px var(--sans);
  letter-spacing: .09em; text-transform: uppercase;
}
.badge-core { display: grid; justify-items: center; line-height: 1.1; }
.badge-core strong { font: 700 1.42rem/1 var(--serif); }
.badge-core em {
  color: var(--on-dark-muted);
  font: 600 .6rem/1 var(--sans); font-style: normal;
  letter-spacing: .16em; text-transform: uppercase;
}

/* --------------------------------------------- interior page banner --- */

.page-hero {
  position: relative;
  padding: clamp(38px, 5vw, 62px) 0 clamp(44px, 6vw, 76px);
  background: linear-gradient(170deg, var(--cream) 0%, var(--paper) 78%);
  overflow: hidden;
}
.page-hero > .container { position: relative; }

.page-hero-title {
  max-width: 18ch;
  font-size: clamp(2.3rem, 5vw, 3.7rem);
}
.page-hero-lead {
  max-width: 58ch; margin-top: 22px;
  color: var(--muted); font-size: 1.09rem;
}

.breadcrumb { margin-bottom: 26px; }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.breadcrumb li {
  color: var(--muted);
  font-size: .74rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
}
.breadcrumb li + li::before {
  content: '/';
  margin-right: 10px;
  color: var(--green-300);
}
.breadcrumb a { color: var(--green-700); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--ink); }

.contact-aside {
  margin-top: 26px;
  color: var(--muted); font-size: .95rem;
}
.contact-aside a { color: var(--green-700); font-weight: 600; }

/* ------------------------------------------------------ feature band --- */

.features {
  padding: clamp(46px, 6vw, 74px) 0;
  background: var(--green-800);
  color: var(--on-dark);
}
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.feature {
  padding: 8px clamp(14px, 2.4vw, 34px);
  border-left: 1px solid var(--border-dark);
  text-align: center;
}
.feature:first-child { border-left: 0; }

.feature-icon {
  display: grid; place-items: center;
  width: 56px; height: 56px; margin: 0 auto 18px;
  border: 1px solid var(--border-dark); border-radius: 50%;
  color: var(--gold-light);
  transition: transform var(--ease), background-color var(--ease);
}
.feature:hover .feature-icon {
  transform: translateY(-4px) rotate(-6deg);
  background: rgba(255, 255, 255, .07);
}
.feature h3 { margin-bottom: 8px; color: #fff; font-size: 1.06rem; }
.feature p  { color: var(--on-dark-muted); font-size: .92rem; line-height: 1.6; }

/* ------------------------------------------------------------ marquee --- */

.marquee {
  padding: 16px 0;
  background: var(--green-900);
  border-top: 1px solid rgba(255, 255, 255, .07);
  overflow: hidden;
}
.marquee-track {
  display: flex; align-items: center; gap: 28px;
  width: max-content;
  animation: marquee 34s linear infinite;
}
.marquee-track span {
  color: var(--on-dark-muted);
  font-size: .76rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  white-space: nowrap;
}
.marquee-track .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold);
}
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee:hover .marquee-track { animation-play-state: paused; }

/* ------------------------------------------------------ scroll reveal --- */

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--ease-out), transform var(--ease-out);
  transition-delay: var(--delay, 0ms);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Headings whose words rise once the block scrolls into view. */
.reveal-words .word > span {
  animation: none;
  transform: translateY(105%);
  transition: transform var(--ease-out);
  transition-delay: calc(var(--i) * 62ms);
}
.reveal-words.is-visible .word > span,
.is-visible .reveal-words .word > span { transform: translateY(0); }

/* -------------------------------------------------------------- about --- */

.about { background: var(--white); }

.split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 80px); align-items: center;
}
.split.reverse .section-copy { order: 2; }

.image-stack { position: relative; padding-bottom: 54px; }
.image-stack > .image-frame:first-child { aspect-ratio: 16 / 11; }

.image-frame-inset {
  position: absolute; right: -6%; bottom: 0;
  width: 46%; aspect-ratio: 4 / 3;
  border: 8px solid var(--white); border-radius: var(--radius);
}

.image-tag {
  position: absolute; left: -4%; bottom: 14%;
  display: grid; gap: 2px;
  margin: 0; padding: 16px 22px;
  border-radius: 16px;
  background: var(--green-800); color: #fff;
  box-shadow: var(--shadow-md);
}
.image-tag strong { font: 600 1.3rem/1 var(--serif); }
.image-tag span {
  color: var(--on-dark-muted);
  font-size: .72rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
}

.stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  margin-top: clamp(56px, 7vw, 90px);
  padding-top: 44px;
  border-top: 1px solid var(--border);
}
.stats li { text-align: center; }
.stat-value {
  display: block;
  color: var(--green-700);
  font: 600 clamp(2.2rem, 4vw, 3rem)/1 var(--serif);
  font-variant-numeric: tabular-nums;
}
.stat-label {
  display: block; margin-top: 8px;
  color: var(--muted); font-size: .84rem; line-height: 1.5;
}

/* ----------------------------------------------------------- products --- */

.products { background: var(--mist); }

.product-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(22px, 3vw, 34px);
}
.product-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--white);
  overflow: hidden;
  transition: transform var(--ease), box-shadow var(--ease),
              opacity var(--ease-out);
}
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

.product-image { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.product-image img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--ease-slow);
}
.product-card:hover .product-image img { transform: scale(1.06); }

.product-number {
  position: absolute; left: 20px; top: 20px;
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(22, 63, 39, .88);
  color: var(--gold-light);
  font: 600 .88rem/1 var(--serif);
  backdrop-filter: blur(4px);
}

.product-body { padding: clamp(24px, 3vw, 34px); }
.product-body h3 { margin-bottom: 12px; }
.product-body p  { color: var(--muted); }

.products-note {
  margin-top: 40px; padding: 22px 28px;
  border-left: 3px solid var(--green-500);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--white);
  color: var(--muted);
}

/* ------------------------------------------------------------ quality --- */

.quality { background: var(--green-800); color: var(--on-dark); }
.quality h2 { color: #fff; }
.quality .section-copy > p { color: var(--on-dark-muted); }

.check-list { display: grid; gap: 16px; margin-top: 28px; }
.check-list li {
  display: flex; align-items: flex-start; gap: 14px;
  color: var(--on-dark); line-height: 1.6;
}
.check-list .check {
  flex: none; display: grid; place-items: center;
  width: 28px; height: 28px; margin-top: 2px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: var(--gold-light);
}
.check-list .check .icon { width: 15px; height: 15px; }

/* ----------------------------------------------------------- partners --- */

.partners { background: var(--white); }

.partner-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.4vw, 28px);
}
.partner-card {
  position: relative;
  padding: clamp(26px, 3vw, 36px);
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
  transition: transform var(--ease), border-color var(--ease),
              box-shadow var(--ease), opacity var(--ease-out);
}
/* Green wash wipes up from the bottom edge on hover. */
.partner-card::before {
  content: '';
  position: absolute; inset: auto 0 0 0; height: 0; z-index: 0;
  background: linear-gradient(180deg, var(--green-50), var(--white));
  transition: height var(--ease);
}
.partner-card:hover::before { height: 100%; }
.partner-card:hover {
  transform: translateY(-5px);
  border-color: var(--green-300);
  box-shadow: var(--shadow-md);
}
.partner-card > * { position: relative; z-index: 1; }

.partner-index {
  display: block; margin-bottom: 14px;
  color: var(--gold-ink);
  font: 600 .8rem/1 var(--sans); letter-spacing: .14em;
}
.partner-card h3 { margin-bottom: 10px; }
.partner-card p  { color: var(--muted); font-size: .96rem; }

.partners-cta { margin: 46px 0 0; text-align: center; }

/* ----------------------------------------------------------- ordering --- */

.ordering { background: var(--mist); }

.steps {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(22px, 3vw, 40px);
}
.steps li {
  padding-top: 28px;
  border-top: 2px solid var(--green-200);
  transition: border-color var(--ease), opacity var(--ease-out),
              transform var(--ease-out);
}
.steps li:hover { border-color: var(--green-500); }
.step-number {
  display: block; margin-bottom: 14px;
  color: var(--green-200);
  font: 600 2.4rem/1 var(--serif);
  transition: color var(--ease);
}
.steps li:hover .step-number { color: var(--green-500); }
.steps h3 { margin-bottom: 10px; }
.steps p  { color: var(--muted); }

/* ------------------------------------------------------- testimonials --- */

.testimonials { background: var(--white); }

.quote-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(20px, 2.6vw, 30px);
}
.quote-card {
  margin: 0; padding: clamp(26px, 3vw, 36px);
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--paper);
}
.quote-card blockquote { margin: 0 0 20px; }
.quote-card blockquote p {
  color: var(--green-800);
  font: 500 1.12rem/1.55 var(--serif);
}
.quote-card blockquote p::before { content: '\201C'; }
.quote-card blockquote p::after  { content: '\201D'; }
.quote-card figcaption { display: grid; gap: 2px; }
.quote-card figcaption strong { color: var(--green-700); }
.quote-card figcaption span   { color: var(--muted); font-size: .84rem; }

.quote-empty {
  max-width: 620px;
  padding: clamp(30px, 4vw, 48px);
  border: 1px dashed var(--green-200); border-radius: var(--radius-lg);
  background: var(--mist);
}
.quote-empty-lead {
  color: var(--green-800);
  font: 500 1.24rem/1.45 var(--serif);
}
.quote-empty p:not(.quote-empty-lead) { color: var(--muted); }

/* ---------------------------------------------------------------- FAQ --- */

.faq { background: var(--mist); }

.faq-grid {
  display: grid; grid-template-columns: .8fr 1.2fr;
  gap: clamp(32px, 5vw, 76px); align-items: start;
}

.accordion { display: grid; gap: 12px; }
.accordion details {
  border: 1px solid var(--border); border-radius: 16px;
  background: var(--white);
  overflow: hidden;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.accordion details[open] {
  border-color: var(--green-300);
  box-shadow: var(--shadow-sm);
}
.accordion summary {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 20px 24px;
  color: var(--green-800);
  font: 600 1.06rem/1.4 var(--serif);
  list-style: none; cursor: pointer;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary:hover { color: var(--green-600); }

.acc-icon {
  position: relative; flex: none;
  width: 22px; height: 22px;
  border-radius: 50%; background: var(--green-50);
  transition: background-color var(--ease), transform var(--ease);
}
.acc-icon::before, .acc-icon::after {
  content: '';
  position: absolute; left: 50%; top: 50%;
  background: var(--green-700);
  transform: translate(-50%, -50%);
  transition: opacity var(--ease), background-color var(--ease);
}
.acc-icon::before { width: 10px; height: 2px; }
.acc-icon::after  { width: 2px;  height: 10px; }
details[open] .acc-icon { background: var(--green-500); transform: rotate(90deg); }
details[open] .acc-icon::before,
details[open] .acc-icon::after { background: #fff; }
details[open] .acc-icon::after { opacity: 0; }

.acc-panel { padding: 0 24px 22px; }
.acc-panel p { color: var(--muted); }
details[open] .acc-panel { animation: panel-in 340ms cubic-bezier(.22, .61, .36, 1); }
@keyframes panel-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- CTA --- */

.cta-section { padding: 0 0 clamp(76px, 10vw, 130px); background: var(--mist); }

.cta-card {
  display: grid; grid-template-columns: 1.1fr .9fr;
  gap: clamp(28px, 4vw, 56px); align-items: center;
  padding: clamp(34px, 4.6vw, 64px);
  border-radius: var(--radius-lg);
  background: radial-gradient(120% 140% at 8% 0%, var(--green-700), var(--green-900) 68%);
  color: var(--on-dark);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.cta-card h2 { margin-bottom: 16px; color: #fff; }
.cta-card p  { margin-bottom: 28px; color: var(--on-dark-muted); }
.cta-media {
  aspect-ratio: 6 / 5;
  border-radius: var(--radius); overflow: hidden;
}
.cta-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--ease-slow);
}
.cta-card:hover .cta-media img { transform: scale(1.05); }

/* ------------------------------------------------------------ contact --- */

.contact { background: var(--white); }

.contact-grid {
  display: grid; grid-template-columns: .95fr 1.05fr;
  gap: clamp(32px, 5vw, 72px); align-items: start;
}

.contact-list { display: grid; gap: 4px; margin-top: 30px; }
.contact-list li { border-bottom: 1px solid var(--border); }
.contact-list a,
.contact-list .contact-static {
  display: grid; grid-template-columns: 26px 116px 1fr;
  align-items: center; gap: 14px;
  padding: 16px 6px;
  text-decoration: none;
  transition: background-color var(--ease), padding-left var(--ease);
}
.contact-list a:hover { background: var(--green-50); padding-left: 14px; }
.contact-list .icon { width: 19px; height: 19px; color: var(--green-500); }
.contact-list span {
  color: var(--muted);
  font-size: .74rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
}
.contact-list strong { color: var(--green-800); font-weight: 600; }

.contact-form {
  padding: clamp(26px, 3.4vw, 44px);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}
.contact-form h3 { margin-bottom: 22px; }

.contact-form label {
  display: block; margin-bottom: 18px;
  color: var(--green-800);
  font-size: .88rem; font-weight: 600;
}
.contact-form label span { color: var(--muted); font-weight: 400; }

.contact-form input,
.contact-form textarea {
  width: 100%; margin-top: 8px; padding: 14px 16px;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--white); color: var(--ink);
  font: 400 1rem/1.6 var(--sans);
  transition: border-color var(--ease), box-shadow var(--ease);
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--green-500);
  box-shadow: 0 0 0 4px rgba(61, 139, 92, .14);
}
.contact-form textarea { min-height: 130px; resize: vertical; }

.honeypot { position: absolute; left: -9999px; }

.field-error { margin: -12px 0 16px; color: #a3231b; font-size: .85rem; }

.form-status { margin-bottom: 22px; padding: 16px 18px; border-radius: 12px; font-size: .94rem; }
.form-status.success {
  border: 1px solid var(--green-200);
  background: var(--green-50); color: var(--green-800);
}
.form-status.error {
  border: 1px solid #f0c7c1;
  background: #fdf1ef; color: #8f1f18;
}
.form-status ul { display: grid; gap: 4px; margin-top: 8px; }
.form-status li::before { content: '— '; }

.form-note { margin-top: 14px; color: var(--muted); font-size: .82rem; text-align: center; }

/* ------------------------------------------------- floating WhatsApp --- */

.wa-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  display: grid; place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--green-600); color: #fff;
  box-shadow: 0 12px 30px rgba(13, 43, 26, .3);
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.9);
  transition: opacity var(--ease), transform var(--ease),
              visibility var(--ease), background-color var(--ease);
}
.wa-float.is-shown { opacity: 1; visibility: visible; transform: none; }
.wa-float:hover { background: var(--green-500); transform: scale(1.06); }

/* Pulse ring, so it reads as a live action rather than a static badge. */
.wa-float::after {
  content: '';
  position: absolute; inset: 0;
  border: 2px solid var(--green-500); border-radius: 50%;
  animation: pulse 2.6s ease-out infinite;
}
@keyframes pulse {
  0%   { transform: scale(1);   opacity: .7; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* ------------------------------------------------------------- footer --- */

.site-footer {
  padding: clamp(56px, 7vw, 84px) 0 28px;
  background: var(--green-900);
  color: var(--on-dark-muted);
}
.footer-grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.1fr;
  gap: clamp(30px, 4vw, 56px);
}
/* The supplied logo is dark artwork, so on the dark footer it sits on a plate.
   Drop the background/padding here if a reversed logo is ever supplied. */
.footer-logo {
  width: auto; height: 54px; margin-bottom: 20px;
  padding: 10px 14px;
  border-radius: 12px; background: var(--cream);
}
.footer-brand p { max-width: 40ch; font-size: .95rem; }

.site-footer h2 {
  margin-bottom: 18px;
  color: #fff;
  font: 700 .78rem/1.4 var(--sans);
  letter-spacing: .14em; text-transform: uppercase;
}
.site-footer nav ul,
.footer-contact { display: grid; gap: 11px; }
.footer-socials { display: flex; gap: 16px; margin-top: 20px; }

.site-footer a {
  display: inline-block;
  color: var(--on-dark-muted);
  font-size: .95rem; text-decoration: none;
  transition: color var(--ease), transform var(--ease);
}
.site-footer a:hover { color: #fff; transform: translateX(3px); }

.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 14px;
  align-items: center; justify-content: space-between;
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: .86rem;
}
.footer-bottom p { margin: 0; }
.back-to-top { font-weight: 600; }

/* --------------------------------------------------------- responsive --- */

@media (max-width: 1080px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); row-gap: 34px; }
  .feature:nth-child(odd) { border-left: 0; }
  .partner-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 980px) {
  :root { --header-h: 76px; }

  .menu-toggle { display: grid; place-items: center; }
  .header-cta  { display: none; }
  .site-nav .nav-cta-mobile { display: inline-flex; margin-top: 8px; }

  .site-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    display: grid; gap: 8px;
    max-height: 0; margin: 0; padding: 0 24px;
    background: var(--white);
    border-bottom: 1px solid transparent;
    overflow: hidden;
    transition: max-height 380ms cubic-bezier(.22, .61, .36, 1),
                padding var(--ease), border-color var(--ease);
  }
  .site-nav.is-open {
    max-height: 74vh;
    padding: 18px 24px 26px;
    border-bottom-color: var(--border);
    box-shadow: var(--shadow-md);
    overflow-y: auto;
  }
  .site-nav > ul { display: grid; gap: 2px; }
  .site-nav > ul a { padding: 12px 0; font-size: .86rem; }

  .hero-grid,
  .split,
  .faq-grid,
  .contact-grid,
  .cta-card { grid-template-columns: 1fr; }

  .split.reverse .section-copy { order: 0; }
  .hero-copy  { max-width: 100%; }
  .hero-media { max-width: 460px; margin-inline: auto; }
  .cta-media  { order: -1; }

  .steps,
  .product-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); row-gap: 34px; }

  .image-stack { padding-bottom: 0; }
  .image-frame-inset { display: none; }
  .image-tag { left: auto; right: 16px; bottom: 16px; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .page-hero-title { max-width: none; }
}

@media (max-width: 560px) {
  :root { --container: min(1200px, calc(100% - 32px)); }

  .feature-grid { grid-template-columns: 1fr; }
  .feature { border-left: 0; }
  .partner-grid { grid-template-columns: 1fr; }
  .hero-actions { gap: 10px; }
  .hero-actions .btn { width: 100%; }
  .contact-list a,
  .contact-list .contact-static { grid-template-columns: 22px 1fr; }
  .contact-list strong { grid-column: 2; }
  .wa-float { right: 14px; bottom: 14px; }
  .footer-grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------ reduced motion --- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  /* Anything that starts hidden or offset must end up visible and in place. */
  .word > span,
  .reveal-words .word > span { transform: none !important; }
  .hero-fade,
  .reveal { opacity: 1 !important; transform: none !important; }
  .wa-float { opacity: 1; visibility: visible; transform: none; }
  .wa-float::after { display: none; }
  .marquee-track { animation: none; transform: none; }
}

/* Printing: drop the furniture, keep the facts. */
@media print {
  .site-header, .wa-float, .marquee, .hero-media,
  .cta-section, .contact-form { display: none; }
  body { background: #fff; color: #000; }
  .reveal, .hero-fade { opacity: 1 !important; transform: none !important; }
  .word > span { transform: none !important; }
}

/* ========================================================================
   Home page refresh — editorial, farm-led layout from the approved visual.
   Kept at the end so interior pages retain their existing styling.
   ======================================================================== */
.site-header-home {
  position: absolute; width: 100%; background: transparent; border-color: transparent;
  box-shadow: none; backdrop-filter: none;
}
.site-header-home.is-scrolled { position: fixed; background: rgba(7, 39, 24, .94); }
.site-header-home .site-nav > ul a { color: rgba(255,255,255,.9); font-size: .7rem; }
.site-header-home .site-nav > ul a:hover, .site-header-home .site-nav > ul a.is-active { color: #e6d78c; }
.site-header-home .brand img { opacity: .96; }
.site-header-home .header-cta { padding: 13px 20px; font-size: .67rem; }

.home-refresh { background: #fcfbf7; }
.fresh-hero { position: relative; min-height: 730px; padding: 170px 0 128px; overflow: hidden; color: #fff; background: #092819; }
.fresh-hero-image { position: absolute; inset: 0; background: url('../img/hero.jpg') 72% center / cover no-repeat; transform: scale(1.01); }
.fresh-hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3,31,19,.98) 0%, rgba(4,35,21,.93) 26%, rgba(4,32,19,.51) 55%, rgba(2,23,14,.12) 100%); }
.fresh-hero-inner { position: relative; min-height: 430px; }
.fresh-hero-copy { width: min(515px, 57%); }
.home-refresh .eyebrow { color: #d6ca7b; font-size: .7rem; letter-spacing: .17em; }
.fresh-hero .hero-title { margin: 0 0 24px; color: #fff; font-size: clamp(3.6rem, 5.55vw, 5.25rem); line-height: .95; letter-spacing: -.045em; }
.fresh-hero .title-line { display: block; }
.fresh-hero .word > span { transform: translateY(115%); animation: none; }
.fresh-hero .accent-line { color: #89a455; }
.fresh-hero-lead { max-width: 470px; margin: 0 0 29px; color: rgba(255,255,255,.84); font-size: .94rem; line-height: 1.72; }
.home-refresh .hero-anime { opacity: 1; }
.fresh-hero-location { display: flex; align-items: center; gap: 8px; margin: 24px 0 0; color: rgba(255,255,255,.82); font-size: .76rem; }
.fresh-hero-location .icon { width: 17px; color: #d6ca7b; }.fresh-hero-location b { margin: 0 8px; color: #d6ca7b; }
.btn-lime { --btn-bg: #769b49; --btn-fg: #fff; border-color: #769b49; }.btn-lime:hover { background: #88aa5d; }
.btn-hero-outline { --btn-bg: transparent; --btn-fg: #fff; border-color: rgba(255,255,255,.74); }.btn-hero-outline:hover { background: rgba(255,255,255,.11); border-color: #fff; }
.fresh-hero .btn { padding: 14px 20px; border-radius: 5px; font-size: .67rem; }
.hero-trust { position: absolute; top: 50px; right: 2.5%; z-index: 1; display: grid; place-items: center; align-content: center; width: 130px; height: 130px; padding: 16px; border: 1px solid rgba(210,198,113,.62); border-radius: 50%; background: rgba(5,52,33,.91); text-align: center; }
.hero-trust::before { content: ''; position: absolute; inset: 10px; border: 1px dashed rgba(223,209,118,.5); border-radius: inherit; }
.hero-trust span { position: relative; color: #d7c86e; font-size: .5rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: 1.5; }.hero-trust strong { position: relative; margin-top: 4px; font: 600 1.8rem/1 var(--serif); }.hero-trust em { position: relative; color: #fff; font: 600 .49rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; font-style: normal; }
.feature-wrap { position: relative; z-index: 2; margin-top: -64px; padding-bottom: 30px; }.feature-panel { display: grid; grid-template-columns: repeat(4,1fr); padding: 35px 26px 30px; border-radius: 19px; background: linear-gradient(125deg,#0d4a31,#073a28); box-shadow: 0 13px 30px rgba(4,35,21,.22); color: #fff; }.feature-panel-item { padding: 0 28px; border-left: 1px solid rgba(255,255,255,.11); text-align: center; }.feature-panel-item:first-child { border: 0; }.feature-panel-icon { display: grid; place-items: center; width: 53px; height: 53px; margin: 0 auto 13px; border: 1px solid rgba(215,202,123,.48); border-radius: 50%; color: #d9cc7f; }.feature-panel-icon .icon { width: 24px; }.feature-panel h3 { color: #fff; font-size: 1rem; }.feature-panel p { margin: 6px 0 0; color: rgba(255,255,255,.73); font-size: .78rem; line-height: 1.55; }

.fresh-about { padding: 36px 0 42px; }.fresh-about-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(44px,7vw,100px); align-items: center; }.fresh-image-stack { position: relative; padding: 10px 0 50px 25px; }.fresh-image-main,.fresh-image-inset { margin: 0; overflow: hidden; border-radius: 12px; box-shadow: 0 13px 28px rgba(17,44,30,.12); }.fresh-image-main { width: 88%; aspect-ratio: 1.43; }.fresh-image-main img,.fresh-image-inset img { width: 100%; height: 100%; object-fit: cover; }.fresh-image-inset { position: absolute; width: 43%; aspect-ratio: 1.12; right: 0; bottom: 0; border: 5px solid #fcfbf7; }.fresh-years { position: absolute; top: 28px; left: 0; display: grid; padding: 16px; border-radius: 9px; background: #0d4a31; color: #fff; box-shadow: 0 8px 20px rgba(13,74,49,.18); }.fresh-years strong { color: #d8cb7b; font: 600 1.7rem/1 var(--serif); }.fresh-years span { margin-top: 7px; font-size: .5rem; font-weight: 700; letter-spacing: .08em; line-height: 1.5; text-transform: uppercase; }.fresh-about-copy h2 { margin-bottom: 20px; color: #103a29; font-size: clamp(2.2rem,3.65vw,3.5rem); }.fresh-about-copy h2 span { color: #638246; }.fresh-about-copy > p:not(.eyebrow) { max-width: 50ch; color: #526259; font-size: .89rem; line-height: 1.7; }.fresh-about-copy .text-link { font-size: .83rem; }
.fresh-stats { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 35px; border: 1px solid rgba(19,60,41,.15); border-radius: 17px; background: #fff; overflow: hidden; }.fresh-stats li { display: grid; grid-template-columns: 36px auto; column-gap: 10px; align-items: center; min-height: 80px; padding: 14px 26px; border-left: 1px solid rgba(19,60,41,.1); }.fresh-stats li:first-child { border: 0; }.stat-mini-icon { grid-row: 1 / span 2; display: grid; place-items:center; color: #103a29; }.stat-mini-icon .icon { width: 26px; }.fresh-stats strong { color:#103a29; font: 600 1.8rem/1 var(--serif); }.fresh-stats li > span:last-child { color: #53655b; font-size: .64rem; line-height: 1.35; }

.fresh-products { padding: 20px 0 20px; }.products-shell { display: grid; grid-template-columns: 1fr 1fr; gap: 25px 48px; padding: clamp(28px,4vw,50px); border-radius: 22px; background: #f1f2ec; }.fresh-products-heading h2 { font-size: clamp(2rem,3.2vw,3.1rem); color: #103a29; }.fresh-products-intro { align-self: end; max-width: 42ch; color: #485950; font-size: .86rem; }.fresh-product-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; }.fresh-product-card { overflow: hidden; border: 1px solid rgba(19,60,41,.15); border-radius: 10px; background: #fff; transition: transform var(--ease), box-shadow var(--ease); }.fresh-product-card:hover { transform: translateY(-5px); box-shadow: 0 12px 24px rgba(16,58,41,.12); }.fresh-product-image { position:relative; aspect-ratio: 1.63; overflow:hidden; }.fresh-product-image img { width:100%;height:100%;object-fit:cover; transition:transform var(--ease-slow); }.fresh-product-card:hover .fresh-product-image img { transform:scale(1.05); }.fresh-product-image span { position:absolute;top:16px;left:16px;padding:7px 10px;border-radius:5px;background:#0c4a30;color:#fff;font-size:.57rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase; }.fresh-product-body { padding: 17px 21px 18px; }.fresh-product-body h3 { font-size: 1.05rem; }.fresh-product-body p { margin: 7px 0 8px; color:#516158; font-size:.75rem;line-height:1.58; }.fresh-product-body .text-link { margin:0;font-size:.72rem; }.fresh-products-note { grid-column:1/-1; display:flex;align-items:flex-start;gap:12px;margin:0;padding:13px 16px;border:1px solid rgba(19,60,41,.14);border-radius:8px;background:#fff;color:#4f5e55;font-size:.7rem;line-height:1.45; }.fresh-products-note .icon{width:21px;color:#103a29;}.fresh-products-note a{color:#103a29;font-weight:700;}

.fresh-partners { padding: 16px 0 12px; }.fresh-partners-grid { display:grid;grid-template-columns: .78fr 1.5fr;gap:33px;padding:34px;border-radius:20px;background:linear-gradient(115deg,#0e4e34,#063a27);color:#fff; }.fresh-partners-copy h2{color:#fff;font-size:clamp(2.1rem,3vw,3rem);}.fresh-partners-copy > p:not(.eyebrow){max-width:31ch;color:rgba(255,255,255,.74);font-size:.78rem;line-height:1.6;}.fresh-partners-copy .btn{margin-top:12px;padding:13px 16px;border-radius:5px;font-size:.63rem;}.fresh-partner-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}.fresh-partner-card{display:flex;gap:10px;padding:14px 11px;border:1px solid rgba(255,255,255,.23);border-radius:8px;transition:background var(--ease),transform var(--ease);}.fresh-partner-card:hover{background:rgba(255,255,255,.07);transform:translateY(-3px);}.fresh-partner-card>span{color:#d8cb7b;}.fresh-partner-card .icon{width:21px;}.fresh-partner-card h3{color:#fff;font:700 .56rem/1.35 var(--sans);letter-spacing:.025em;text-transform:uppercase;}.fresh-partner-card p{margin:5px 0 0;color:rgba(255,255,255,.67);font-size:.61rem;line-height:1.45;}

.fresh-cta { padding: 12px 0 74px; }.fresh-cta-card { position:relative;min-height:265px;padding:39px clamp(28px,4vw,55px);overflow:hidden;border-radius:18px;background:linear-gradient(90deg,rgba(5,51,32,.96) 0%,rgba(6,54,34,.86) 44%,rgba(6,54,34,.22)),url('../img/cta.jpg') right center/cover;color:#fff;}.fresh-cta-card h2{color:#fff;font-size:clamp(2.2rem,3.6vw,3.4rem);}.fresh-cta-card p:not(.eyebrow){max-width:40ch;margin-top:11px;color:rgba(255,255,255,.76);font-size:.82rem;}.fresh-cta-card .btn{padding:13px 16px;border-radius:5px;font-size:.63rem;}.fresh-cta-card aside{position:absolute;right:34px;bottom:24px;display:flex;align-items:center;gap:13px;padding:15px 24px;border-radius:8px;background:rgba(251,250,244,.88);color:#1a3f2d;font-size:.75rem;line-height:1.35;}.fresh-cta-card aside .icon{color:#4b8659;}

@media (max-width: 980px) { .site-header-home { position:absolute; }.site-header-home .site-nav { background:#0a3826; }.site-header-home .menu-toggle { background:rgba(255,255,255,.95); }.fresh-hero{min-height:700px;padding-top:140px;}.feature-panel{grid-template-columns:repeat(2,1fr);gap:22px;}.feature-panel-item:nth-child(odd){border-left:0;}.fresh-about-grid,.fresh-partners-grid{grid-template-columns:1fr;}.fresh-about-copy{max-width:650px;}.fresh-stats li{padding-inline:16px;}.fresh-partners-copy > p:not(.eyebrow){max-width:60ch;}.fresh-partner-grid{grid-template-columns:repeat(2,1fr);}.hero-trust{right:3%;}.fresh-cta-card aside{right:20px;} }
@media (max-width: 680px) { .fresh-hero{min-height:660px;padding:122px 0 90px;}.fresh-hero-image{background-position:62% center;opacity:.7;}.fresh-hero-shade{background:linear-gradient(90deg,rgba(3,31,19,.98),rgba(4,35,21,.77));}.fresh-hero-copy{width:100%;}.fresh-hero .hero-title{font-size:clamp(3.2rem,14.5vw,4.55rem);}.fresh-hero-lead{max-width:40ch;font-size:.86rem;}.fresh-hero .hero-actions .btn{width:auto;}.hero-trust{top:auto;bottom:0;right:0;width:105px;height:105px;}.hero-trust strong{font-size:1.45rem;}.feature-wrap{margin-top:-25px;}.feature-panel{padding:25px 11px;gap:18px;}.feature-panel-item{padding:0 10px;}.feature-panel p{font-size:.68rem;}.fresh-image-stack{padding-left:10px;}.fresh-image-main{width:94%;}.fresh-stats{grid-template-columns:repeat(2,1fr);}.fresh-stats li:nth-child(odd){border-left:0;}.fresh-stats li:nth-child(-n+2){border-bottom:1px solid rgba(19,60,41,.1);}.products-shell{grid-template-columns:1fr;padding:23px 16px;gap:16px;}.fresh-products-intro{margin:0;}.fresh-product-grid{grid-template-columns:1fr;}.fresh-partners-grid{padding:26px 16px;}.fresh-partner-grid{grid-template-columns:1fr;}.fresh-partner-card{padding:13px;}.fresh-cta{padding-bottom:44px;}.fresh-cta-card{padding:30px 20px 118px;background:linear-gradient(90deg,rgba(5,51,32,.97),rgba(6,54,34,.73)),url('../img/cta.jpg') right center/cover;}.fresh-cta-card aside{right:16px;bottom:16px;}.site-header-home .brand img{height:40px;} }


/* ==========================================================================
   01 Aug 2026 — client review changes (Carlos Mendez, 30 Jul) + new brand.
   Layered at the end so the home-refresh build above stays intact; remove
   this block to revert to the previous look.
   ========================================================================== */

:root {
  --header-h: 96px;
  /* Heading colour: the soft yellow of the active nav underline. */
  --heading: var(--gold-ink);
}

/* Dark grounds take the lighter gold so contrast holds. */
.quality, .features, .site-footer,
.fresh-partners, .fresh-cta-card, .fresh-hero { --heading: var(--gold-light); }

/* --- Headings: soft yellow, looser leading, slightly smaller ------------ */

h1, h2, h3 { color: var(--heading); line-height: 1.2; }
h1 { font-size: clamp(2.3rem, 5.2vw, 3.9rem); }
h2 { font-size: clamp(1.8rem, 3.7vw, 2.75rem); }
h3 { font-size: 1.18rem; line-height: 1.35; }

.fresh-partners-copy h2,
.fresh-cta-card h2 { color: var(--gold-light); }

/* Descenders (g, y, p) were being sheared off by the word masks. */
.word { padding-bottom: .18em; margin-bottom: -.18em; }

/* Hero headline: smaller with more leading, per the review. */
.fresh-hero .hero-title {
  font-size: clamp(2.9rem, 4.5vw, 4.2rem);
  line-height: 1.12;
  color: #fff;
}
.fresh-hero .accent-line,
.accent-line { color: var(--gold-light); }

/* --- Brand logo --------------------------------------------------------- */

/* New logo is a square lockup on white, so it sits on a plate to stay
   visible over the dark home header as well as the white interior one. */
.brand img { height: 74px; width: auto; }
.brand {
  display: block; padding: 6px 10px;
  border-radius: 12px; background: #fff;
}
.site-header-home .brand img { opacity: 1; }
.footer-logo { height: 96px; background: #fff; }

/* --- Interior page banners: photo on the right -------------------------- */

.page-hero-grid { display: grid; grid-template-columns: 1fr; align-items: center; }
.page-hero.has-media .page-hero-grid {
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 4.5vw, 64px);
}
.page-hero-title { font-size: clamp(2.2rem, 4.6vw, 3.4rem); }
.page-hero-media {
  border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 4 / 3; box-shadow: var(--shadow-md);
}
.page-hero-media img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center 35%;
  transition: transform var(--ease-slow);
}
.page-hero-media:hover img { transform: scale(1.04); }

/* --- Founder section (about page) --------------------------------------- */

.founder { background: var(--mist); }
.founder-portrait {
  position: relative; max-width: 460px; aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-md);
}
.founder-portrait img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center 18%;
  transition: transform var(--ease-slow);
}
.founder-portrait:hover img { transform: scale(1.04); }
.founder-plate {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: grid; gap: 2px; margin: 0; padding: 44px 24px 20px;
  background: linear-gradient(to top, rgba(13, 43, 26, .92), rgba(13, 43, 26, 0));
  color: #fff;
}
.founder-plate strong { font: 600 1.24rem/1.3 var(--serif); color: var(--gold-light); }
.founder-plate span {
  color: var(--on-dark-muted); font-size: .74rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
}

/* --- Image framing: keep the bird's head in shot ------------------------ */

.cta-media img,
.fresh-cta-card { --img-pos: center 22%; }
.cta-media img { object-position: center 22%; }
.hero-circle img { object-position: center 30%; }

/* --- Footer: partner logo bottom-left, yellow "Top" button -------------- */

.footer-bottom-left { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.partner-logo {
  display: block; padding: 8px 12px;
  border-radius: 10px; background: rgba(255, 255, 255, .94);
}
.partner-logo img { width: auto; height: 34px; }
.site-footer a.partner-logo:hover { transform: none; }

.back-to-top { padding: 11px 22px; font-size: .74rem; font-weight: 600; }
.site-footer a.back-to-top,
.site-footer a.back-to-top:hover { color: #21160a; }
.site-footer a.back-to-top:hover { transform: translateY(-2px); }

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 980px) {
  .page-hero.has-media .page-hero-grid { grid-template-columns: 1fr; }
  .page-hero-media { margin-top: 32px; aspect-ratio: 16 / 10; }
  .founder-portrait { max-width: none; aspect-ratio: 4 / 3; }
  .brand img { height: 56px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
  .site-header-home .brand img,
  .brand img { height: 46px; }
  .fresh-hero .hero-title { font-size: clamp(2.4rem, 10.5vw, 3.4rem); line-height: 1.14; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .page-hero-media img, .founder-portrait img { transition: none; }
}


/* ==========================================================================
   01 Aug 2026 — second review pass.
   Brand-green navbar, transparent agency logo, darker hero accent line.
   ========================================================================== */

:root { --brand-green: #008d5c; }

/* --- Navbar: solid brand green on every page ---------------------------- */

.site-header,
.site-header.is-scrolled,
.site-header-home,
.site-header-home.is-scrolled {
  position: sticky; top: 0;
  background: var(--brand-green);
  border-bottom-color: rgba(0, 0, 0, .12);
  backdrop-filter: none;
}
.site-header.is-scrolled { box-shadow: 0 6px 26px rgba(0, 60, 38, .22); }

/* Nav sits on green now, so links and the toggle go light everywhere. */
.site-nav > ul a,
.site-header-home .site-nav > ul a { color: rgba(255, 255, 255, .92); }
.site-nav > ul a:hover,
.site-nav > ul a.is-active,
.site-header-home .site-nav > ul a:hover,
.site-header-home .site-nav > ul a.is-active { color: #ffe27a; }
.site-nav > ul a::after { background: #ffe27a; }

.menu-toggle,
.site-header-home .menu-toggle {
  background: rgba(255, 255, 255, .96);
  border-color: rgba(0, 0, 0, .12);
}

/* Logo is a transparent PNG, so it needs no plate. */
.brand { padding: 0; background: none; border-radius: 0; }
.brand img,
.site-header-home .brand img { height: 62px; width: auto; }

/* The home hero no longer sits under an overlapping header. */
.fresh-hero { padding-top: clamp(56px, 7vw, 96px); }

/* --- Hero accent line: darker ------------------------------------------- */

.fresh-hero .accent-line,
.accent-line { color: #a97a1a; }

/* --- Footer: agency credit, no plate behind the logo -------------------- */

.footer-credit {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0;
}
.footer-credit > span {
  color: var(--on-dark-muted);
  font-size: .78rem; font-weight: 600;
  letter-spacing: .04em;
}
.partner-logo {
  display: inline-block; padding: 0;
  background: none; border-radius: 0;
  transition: opacity var(--ease);
}
.partner-logo img { width: auto; height: 30px; }
.site-footer a.partner-logo:hover { transform: none; opacity: .8; }

@media (max-width: 980px) {
  .brand img,
  .site-header-home .brand img { height: 52px; }
}
@media (max-width: 680px) {
  .brand img,
  .site-header-home .brand img { height: 44px; }
  .footer-credit { flex-wrap: wrap; }
}


/* ==========================================================================
   01 Aug 2026 — third review pass.
   White navbar text, agency logo fully unplated, Praivic logo out of footer.
   ========================================================================== */

/* --- Navbar text: white in every state ---------------------------------- */

.site-nav > ul a,
.site-nav > ul a:hover,
.site-nav > ul a.is-active,
.site-nav > ul a[aria-current="page"],
.site-header-home .site-nav > ul a,
.site-header-home .site-nav > ul a:hover,
.site-header-home .site-nav > ul a.is-active { color: #fff; }

/* Underline stays the active indicator now that the text no longer shifts. */
.site-nav > ul a::after { background: #fff; }

/* --- Agency logo: nothing behind it ------------------------------------- */

.partner-logo,
.site-footer .partner-logo,
span.partner-logo,
a.partner-logo {
  background: none !important;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

/* --- Footer brand: wordmark instead of the logo image ------------------- */

.footer-brand-name {
  margin: 0 0 14px;
  color: #fff;
  font: 600 1.24rem/1.3 var(--serif);
  letter-spacing: -.01em;
}


/* ==========================================================================
   01 Aug 2026 — site name beside the header logo.
   The new mark is icon-only, so the business name is set in type next to it.
   ========================================================================== */

.brand {
  display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none;
}
.brand img { flex: none; }

.brand-name {
  display: grid; gap: 1px;
  line-height: 1.05;
}
.brand-name strong {
  color: #fff;
  font: 600 1.16rem/1.15 var(--serif);
  letter-spacing: -.01em;
  white-space: nowrap;
}
.brand-name em {
  color: rgba(255, 255, 255, .78);
  font: 600 .58rem/1 var(--sans); font-style: normal;
  letter-spacing: .22em; text-transform: uppercase;
}

@media (max-width: 980px) {
  .brand { gap: 10px; }
  .brand-name strong { font-size: 1.02rem; }
  .brand-name em { font-size: .54rem; letter-spacing: .18em; }
}

@media (max-width: 680px) {
  .brand { gap: 8px; }
  .brand-name strong { font-size: .92rem; }
}

/* Below this the nav toggle needs the room more than the sub-line does. */
@media (max-width: 420px) {
  .brand-name em { display: none; }
  .brand-name strong { font-size: .86rem; }
}


/* ==========================================================================
   01 Aug 2026 — agency credit sized up so the wordmark is readable.
   Source PNG is 300x109, so 52px tall is still well inside native size.
   ========================================================================== */

.footer-credit { gap: 14px; }
.footer-credit > span { font-size: .82rem; }
.partner-logo img { height: 52px; }

@media (max-width: 680px) {
  .partner-logo img { height: 44px; }
}


/* ==========================================================================
   01 Aug 2026 — footer moved to a true dark green.
   Previously --green-900 (#0d2b1a), which read almost black. This is the
   brand green darkened, so the footer is recognisably green.
   ========================================================================== */

:root { --footer-green: #054d34; }

.site-footer { background: var(--footer-green); }
.site-footer .footer-bottom { border-top-color: rgba(255, 255, 255, .16); }
.marquee { background: #043b28; }


/* ========================================================================== 
   17 Aug 2026 — launch polish.
   Brighter hero accent, responsive chicken crop, and modern image sources.
   ========================================================================== */

picture { display: block; }
.image-frame > picture,
.hero-circle > picture,
.product-image > picture,
.cta-media > picture,
.fresh-image-main > picture,
.fresh-image-inset > picture,
.fresh-product-image > picture,
.page-hero-media > picture,
.founder-portrait > picture { height: 100%; }

/* Content remains fully available if either JavaScript CDN is unavailable. */
.no-js .reveal,
.no-js .hero-fade { opacity: 1; transform: none; }
.no-js .word > span,
.no-js .reveal-words .word > span,
.no-js .fresh-hero .word > span { transform: none; animation: none; }

/* The reviewed phrase needs a bright, readable brand accent on the dark hero.
   Matched to the specificity of .hero-title .title-line:nth-child(2) above,
   which would otherwise paint this line dark green whatever the source order. */
.fresh-hero .hero-title .accent-line,
.fresh-hero .accent-line,
.accent-line { color: #ffe27a; }

/* Keep the JPEG declarations above as fallbacks for older browsers. */
@supports (background-image: image-set(url("../img/hero.webp") type("image/webp"))) {
  .fresh-hero-image {
    background-image: image-set(
      url("../img/hero.webp") type("image/webp"),
      url("../img/hero.jpg") type("image/jpeg")
    );
  }

  .fresh-cta-card {
    background-image:
      linear-gradient(90deg, rgba(5,51,32,.96) 0%, rgba(6,54,34,.86) 44%, rgba(6,54,34,.22)),
      image-set(
        url("../img/cta.webp") type("image/webp"),
        url("../img/cta.jpg") type("image/jpeg")
      );
    background-position: left top, right center;
    background-repeat: no-repeat;
    background-size: auto, cover;
  }
}

@media (max-width: 680px) {
  .fresh-hero {
    min-height: 740px;
    padding: 54px 0 330px;
  }

  .fresh-hero-inner {
    z-index: 2;
    min-height: 0;
  }

  /* Give the chicken its own lower panel instead of cropping it behind text. */
  .fresh-hero-image {
    inset: auto 0 0;
    height: 53%;
    background-position: 38% center;
    background-size: cover;
    opacity: 1;
    transform: none;
  }

  .fresh-hero-shade {
    z-index: 1;
    background: linear-gradient(
      180deg,
      #062a1b 0%,
      rgba(6,42,27,.98) 46%,
      rgba(6,42,27,.62) 70%,
      rgba(6,42,27,.08) 100%
    );
  }

  .hero-trust {
    z-index: 3;
    right: 16px;
    bottom: 22px;
  }

  @supports (background-image: image-set(url("../img/cta.webp") type("image/webp"))) {
    .fresh-cta-card {
      background-image:
        linear-gradient(90deg, rgba(5,51,32,.97), rgba(6,54,34,.73)),
        image-set(
          url("../img/cta.webp") type("image/webp"),
          url("../img/cta.jpg") type("image/jpeg")
        );
    }
  }
}

@media (max-width: 390px) {
  .fresh-hero {
    min-height: 760px;
    padding-bottom: 342px;
  }

  .fresh-hero-image { background-position: 35% center; }
}

/* ---------------------------------------------------------------------------
 * Small-screen legibility.
 *
 * Several labels are deliberately tiny on desktop, where they sit in narrow
 * three-across cards and read as captions. Below 680px those same cards go
 * full width, so the type was landing at 9-11px — under the 12px floor that
 * mobile usability testing flags, and hard to read on a phone in daylight.
 *
 * These rules only raise the floor at phone widths; the desktop composition is
 * untouched. Tap targets are lifted to the 44px recommended minimum at the
 * same time, so buttons are comfortable to hit with a thumb.
 * ------------------------------------------------------------------------ */

@media (max-width: 680px) {
  .feature-panel p,
  .fresh-partner-card p        { font-size: .8rem; line-height: 1.5; }
  .fresh-partner-card h3       { font-size: .72rem; }
  .fresh-stats li > span:last-child { font-size: .74rem; }
  .fresh-product-image span    { font-size: .68rem; }
  .hero-trust span             { font-size: .6rem; }
  .home-refresh .eyebrow,
  .eyebrow                     { font-size: .76rem; }
  .fresh-partners-copy > p:not(.eyebrow) { font-size: .85rem; }
  .fresh-partners-copy .btn    { font-size: .78rem; }

  /* Comfortable thumb targets. inline-flex keeps the arrow centred. */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
  }

  .site-nav > ul a,
  .site-header-home .site-nav > ul a { font-size: .95rem; }

  .footer-links a,
  .site-footer a { display: inline-block; padding-block: 4px; }
}