/*
Theme Name:   GeneratePress Kiwi
Template:     generatepress
Description:  KIWI Group child theme
Version:      1.5.0
*/

/* ══════════════════════════════════════════════════════════════
   KIWI Group — v5 (warm, confident, Lovable-inspired)
   ══════════════════════════════════════════════════════════════ */

/* ── 0. DESIGN TOKENS ──────────────────────────────────────── */
:root {
  --cream:        #F4EFE4;
  --text:         #211D17;
  --muted:        #5E5E55;
  --white:        #FFFFFF;
  --border:       #E4DCC8;

  /* Green system:
     --green      = graphic accents only (glow, blobs, borders, hover
                    fills behind white icons) — never as text-on-cream
                    or as a white-text button background (fails AA).
     --green-deep = all green TEXT uses (labels, links, CTA button
                    bg with white text, quote block) — verified AA. */
  --green:        #5F9E3F;
  --green-deep:   #3E6B2A;
  --green-lime:   #9CCC65;
  --green-tint:   #E7F0D8;

  --font-display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-quote:   'Fraunces', Georgia, serif;

  --max-w:        1080px;
  --pad-h:        clamp(20px, 5vw, 60px);
  --pad-v:        clamp(72px, 9vw, 120px);
  --r-card:       22px;
  --r-pill:       100px;
  --shadow-card:  0 4px 28px rgba(33,29,23,0.07), 0 1px 4px rgba(33,29,23,0.04);
  --shadow-up:    0 16px 48px rgba(33,29,23,0.12), 0 4px 14px rgba(33,29,23,0.06);
}

/* ── 1. NOISE GRAIN OVERLAY ────────────────────────────────── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.032'/%3E%3C/svg%3E");
  background-size: 300px 300px;
}

/* ── 2. WORDPRESS / GENERATEPRESS OVERRIDES ────────────────── */
.site-description,
.site-branding .main-title { display: none !important; }
.site-logo .header-image   { height: 44px !important; width: auto !important; }

.site-header {
  border-bottom: 1px solid var(--border) !important;
  background: rgba(244,239,228,0.92) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.main-navigation a {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text) !important;
}
.main-navigation a:hover { color: var(--green-deep) !important; }

/* ── 3. BASE ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

.kiwi-container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-h);
  position: relative;
  z-index: 1;
}

.kiwi-section {
  padding: var(--pad-v) 0;
  position: relative;
  overflow: hidden;
}
.kiwi-section--alt { background: var(--white); }
.kiwi-section--bg  { background: var(--green-tint); }

/* ── 4. BLOB SHAPES ─────────────────────────────────────────── */
.blob {
  position: absolute;
  pointer-events: none;
  will-change: transform;
  z-index: 0;
}

.blob-h1 {
  width: 560px; height: 560px;
  background: radial-gradient(ellipse at 40% 40%, rgba(95,158,63,0.24) 0%, transparent 68%);
  border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
  top: -140px; right: -80px;
  filter: blur(70px);
}
.blob-h2 {
  width: 380px; height: 380px;
  background: radial-gradient(ellipse at 60% 60%, rgba(231,240,216,0.95) 0%, transparent 68%);
  border-radius: 62% 38% 46% 54% / 60% 44% 56% 40%;
  bottom: -90px; left: 22%;
  filter: blur(90px);
}
.blob-o1 {
  width: 500px; height: 500px;
  background: radial-gradient(ellipse at 35% 45%, rgba(62,107,42,0.12) 0%, transparent 68%);
  border-radius: 70% 30% 55% 45% / 30% 70% 45% 55%;
  top: -80px; left: -130px;
  filter: blur(90px);
}
.blob-o2 {
  width: 340px; height: 340px;
  background: radial-gradient(ellipse at 55% 55%, rgba(231,240,216,0.98) 0%, transparent 68%);
  border-radius: 38% 62% 40% 60% / 55% 45% 60% 40%;
  bottom: -60px; right: 5%;
  filter: blur(80px);
}
.blob-k1 {
  width: 460px; height: 460px;
  background: radial-gradient(ellipse at 50% 40%, rgba(62,107,42,0.10) 0%, transparent 68%);
  border-radius: 55% 45% 65% 35% / 45% 55% 38% 62%;
  top: -60px; right: -100px;
  filter: blur(85px);
}

/* ── 5. SECTION META ────────────────────────────────────────── */
.section-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.section-num {
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--border);
  letter-spacing: 0.18em;
}
.kiwi-label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--green-deep);
  background: var(--green-tint);
  border-radius: 4px;
  padding: 3px 9px;
}

/* ── 6. TYPOGRAPHY UTILITIES ────────────────────────────────── */
.kiwi-heading {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 36px;
}
.kiwi-body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.72;
  color: var(--muted);
  max-width: 600px;
  margin: 0;
}

/* ── 7. HERO ────────────────────────────────────────────────── */
.kiwi-hero {
  min-height: 80vh;
  padding: clamp(90px, 12vw, 140px) 0 clamp(72px, 9vw, 108px);
  position: relative;
  overflow: hidden;
  background: var(--cream);
  display: flex;
  align-items: center;
}

/* Warm green radial/mesh glow — replaces the old pale radar SVG */
.kiwi-hero::before {
  content: '';
  position: absolute;
  top: -18%;
  right: -12%;
  width: min(920px, 72vw);
  height: min(920px, 72vw);
  background:
    radial-gradient(circle at 45% 45%, rgba(95,158,63,0.38) 0%, rgba(156,204,101,0.20) 38%, rgba(156,204,101,0) 70%);
  filter: blur(64px);
  pointer-events: none;
  z-index: 0;
}
.kiwi-hero::after {
  content: '';
  position: absolute;
  bottom: -22%;
  left: -8%;
  width: min(620px, 50vw);
  height: min(620px, 50vw);
  background: radial-gradient(circle, rgba(62,107,42,0.20) 0%, transparent 70%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}

/* Old radar SVG retired in favour of the CSS glow above */
.hero-geom { display: none; }

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 62%;
}

.hero-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--green-deep);
  margin-bottom: 22px;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(4.2rem, 10vw, 8.2rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--text);
  margin: 0 0 28px;
}
.hero-title em {
  font-style: normal;
  color: var(--green-deep);
}

.hero-subtitle {
  font-family: var(--font-body);
  font-size: clamp(1.0625rem, 1.9vw, 1.25rem);
  line-height: 1.65;
  color: var(--muted);
  max-width: 460px;
  margin: 0 0 40px;
}

.hero-cta-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--green-deep);
  color: #fff !important;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: var(--r-pill);
  text-decoration: none !important;
  letter-spacing: 0.01em;
  border: 1.5px solid transparent;
  transition: background 0.25s, box-shadow 0.25s, filter 0.25s, transform 0.2s ease-out;
}
.hero-cta:hover {
  filter: brightness(0.92);
  box-shadow: 0 8px 28px rgba(62,107,42,0.38);
  color: #fff !important;
  text-decoration: none !important;
  transform: translateY(-2px);
}
.hero-cta svg {
  width: 17px; height: 17px;
  stroke: currentColor; stroke-width: 2.5; fill: none;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.hero-cta:hover svg { transform: translateX(3px); }

.hero-cta--outline {
  background: transparent;
  color: var(--text) !important;
  border-color: rgba(33,29,23,0.22);
}
.hero-cta--outline:hover {
  background: var(--text);
  border-color: var(--text);
  color: var(--cream) !important;
  box-shadow: none;
}

/* ── 8. SERVICE CARDS ───────────────────────────────────────── */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 44px;
  align-items: start;
}

.service-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 32px 26px 28px;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.24s ease, transform 0.2s ease;
  position: relative;
  overflow: hidden;
}

.service-card:hover {
  box-shadow: var(--shadow-up);
  transform: translateY(-5px);
}

.service-icon {
  width: 52px; height: 52px;
  background: var(--green-tint);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: var(--green-deep);
  transition: background 0.22s, color 0.22s, transform 0.22s;
}
.service-icon svg {
  width: 22px; height: 22px;
  stroke: currentColor; stroke-width: 1.75; fill: none;
}
.service-card:hover .service-icon {
  background: var(--green-deep);
  color: #fff;
  transform: scale(1.08);
}

.service-card h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.2;
  margin: 0 0 10px;
}
.service-card p {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.68;
  color: var(--muted);
  margin: 0;
}

/* ── 9. QUOTE ───────────────────────────────────────────────── */
.kiwi-quote-wrap {
  background: var(--green-deep);
  padding: clamp(52px, 7vw, 80px) 0;
  position: relative;
  overflow: hidden;
}
.kiwi-quote-wrap::before {
  content: '\201C';
  position: absolute;
  top: -30px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-quote);
  font-size: 16rem;
  line-height: 1;
  color: rgba(255,255,255,0.08);
  pointer-events: none;
  user-select: none;
}
.kiwi-quote-wrap blockquote {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
  border: none;
  padding: 0;
  position: relative;
  z-index: 1;
}
.kiwi-quote-wrap blockquote p {
  font-family: var(--font-quote);
  font-size: clamp(1.35rem, 2.8vw, 2rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.48;
  color: rgba(255,255,255,0.96);
  margin: 0 0 18px;
}
.kiwi-quote-wrap cite {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  font-style: normal;
}

/* ── 10. PARTNER LOGOS ──────────────────────────────────────── */
.partners-compact { margin-top: 44px; }
.pg-group         { margin-bottom: 40px; }
.pg-group:last-child { margin-bottom: 0; }

.pg-wave {
  display: block;
  width: 100%;
  height: 28px;
  margin: 0 0 36px;
  overflow: visible;
}

.pg-label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--green-deep);
  background: var(--white);
  border-radius: 4px;
  padding: 3px 9px;
  margin-bottom: 14px;
}

.pg-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* Pill logos — 3 size variants */
.pg-logo {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}
.pg-logo:nth-child(3n+1) { width: 104px; height: 60px; }
.pg-logo:nth-child(3n+2) { width: 118px; height: 66px; }
.pg-logo:nth-child(3n+3) { width: 112px; height: 63px; }

.pg-logo img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  filter: grayscale(30%) opacity(0.82);
  transition: filter 0.3s ease;
}
.pg-logo:hover {
  box-shadow: 0 4px 22px rgba(33,29,23,0.11);
  transform: scale(1.06);
  border-color: rgba(62,107,42,0.28);
}
.pg-logo:hover img { filter: grayscale(0%) opacity(1); }

/* ── 11. CONTACT ────────────────────────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  margin-top: 44px;
  align-items: start;
}
.contact-name {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 16px 0 2px;
}
.contact-role {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
  margin: 0 0 22px;
}
.contact-links { display: flex; flex-direction: column; gap: 12px; }
.contact-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 0.975rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  transition: color 0.2s;
}
.contact-link:hover { color: var(--green-deep); text-decoration: none; }
.contact-icon { font-size: 1.1em; line-height: 1; }

/* WPForms contact form — themed to match the pill/card system */
.contact-grid .wpforms-container { margin: 0; }
.contact-grid .wpforms-field-label {
  font-family: var(--font-body) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: var(--text) !important;
}
.contact-grid .wpforms-field input[type="text"],
.contact-grid .wpforms-field input[type="email"],
.contact-grid .wpforms-field input[type="tel"],
.contact-grid .wpforms-field textarea {
  font-family: var(--font-body) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  background: var(--cream) !important;
  color: var(--text) !important;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.contact-grid .wpforms-field input:focus,
.contact-grid .wpforms-field textarea:focus {
  border-color: var(--green) !important;
  box-shadow: 0 0 0 3px rgba(95,158,63,0.18) !important;
  outline: none !important;
}
.contact-grid .wpforms-submit-container button.wpforms-submit {
  background: var(--green-deep) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--r-pill) !important;
  padding: 14px 30px !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 0.9375rem !important;
  transition: filter 0.25s, box-shadow 0.25s, transform 0.2s ease-out !important;
}
.contact-grid .wpforms-submit-container button.wpforms-submit:hover {
  filter: brightness(0.92);
  box-shadow: 0 8px 28px rgba(62,107,42,0.35);
  transform: translateY(-2px);
}

/* ── 12. BILLING ────────────────────────────────────────────── */
.billing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 36px 0 28px;
}
.billing-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 22px 20px;
}
.billing-card h3 {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--green-deep);
  margin: 0 0 10px;
}
.billing-card p {
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.68;
  color: var(--text);
  margin: 0;
}
.billing-pdf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--green-deep);
  text-decoration: none;
  border-bottom: 1px solid rgba(62,107,42,0.32);
  padding-bottom: 1px;
  transition: color 0.2s, border-color 0.2s;
}
.billing-pdf:hover {
  color: var(--text);
  border-color: var(--text);
  text-decoration: none;
}

/* ── 13. SCROLL ANIMATIONS (progressive enhancement, fail-safe) ─
   Content is visible by DEFAULT — the hidden pre-reveal state only
   applies once JS confirms it's running (`.js` on <html>) AND only
   until `.is-visible` is added (by IntersectionObserver, or by the
   inline ~1s safety timeout in wp_head if the observer/script never
   fires). If JS is disabled entirely, nothing is ever hidden.      */
.js .anim:not(.is-visible),
.js .stagger-item:not(.is-visible) {
  opacity: 0;
  transform: translateY(10px);
}
.js .anim--scale:not(.is-visible) {
  opacity: 0;
  transform: scale(0.97);
}
.js .anim,
.js .stagger-item,
.js .anim--scale {
  transition: opacity 200ms ease-out, transform 200ms ease-out;
}
.anim.is-visible,
.stagger-item.is-visible,
.anim--scale.is-visible {
  opacity: 1;
  transform: none;
}

.delay-1 { transition-delay: 0.06s; }
.delay-2 { transition-delay: 0.12s; }
.delay-3 { transition-delay: 0.18s; }
.delay-4 { transition-delay: 0.24s; }

/* ── 14. REDUCED MOTION ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .js .anim:not(.is-visible),
  .js .stagger-item:not(.is-visible),
  .js .anim--scale:not(.is-visible) {
    opacity: 1 !important;
    transform: none !important;
  }
  .anim, .stagger-item, .anim--scale {
    transition: none !important;
  }
}

/* ── 15. RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero-inner { max-width: 74%; }
}
@media (max-width: 860px) {
  .hero-inner { max-width: 100%; }
  .services-grid    { grid-template-columns: 1fr 1fr; }
  .billing-grid     { grid-template-columns: 1fr 1fr; }
  .contact-grid     { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 600px) {
  .blob-h1, .blob-h2,
  .blob-o1, .blob-o2,
  .blob-k1          { display: none; }
  .kiwi-hero::before,
  .kiwi-hero::after { opacity: 0.7; }
  .services-grid    { grid-template-columns: 1fr; }
  .billing-grid     { grid-template-columns: 1fr; }
  .pg-logo:nth-child(3n+1),
  .pg-logo:nth-child(3n+2),
  .pg-logo:nth-child(3n+3) { width: 96px; height: 56px; }
}