/* Green Horizon — global stylesheet entry point.
   Consumers link THIS file. It only @imports tokens + fonts. */
/* Green Horizon webfonts — Google Fonts
   Display/headings: Plus Jakarta Sans (geometric, premium)
   Body/UI: Manrope (humanist, highly legible) */
/* cyrillic-ext */

/* cyrillic */

/* greek */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* greek */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* greek */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* greek */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* greek */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* vietnamese */

/* latin-ext */

/* latin */



/* ===========================================================================
   Green Horizon — Color tokens
   Derived from the brand logo: leafy green, deep navy, hygiene cyan-blue.
   =========================================================================== */
:root {
  /* --- Brand green (primary) — the Green Horizon leaf ------------------- */
  --green-50:  #F1F8EC;
  --green-100: #DEEFCD;
  --green-200: #C2E0A4;
  --green-300: #A0CE76;
  --green-400: #82BC4F;
  --green-500: #6FB13E;   /* logo green */
  --green-600: #589A30;
  --green-700: #437A26;
  --green-800: #2F5C1D;   /* deep forest */
  --green-900: #1F3F15;

  /* --- Brand navy (depth, trust) --------------------------------------- */
  --navy-50:  #EEF3F9;
  --navy-100: #D3E0EF;
  --navy-300: #7E9FC6;
  --navy-500: #2F5E96;
  --navy-700: #1F3F70;   /* logo wordmark navy */
  --navy-800: #16294A;
  --navy-900: #0E1B33;

  /* --- Hygiene cyan-blue (water / disinfection accent) ------------------ */
  --cyan-50:  #E7F5FB;
  --cyan-100: #C2E7F4;
  --cyan-300: #6DC4E4;
  --cyan-500: #2090C0;   /* logo cyan accent */
  --cyan-600: #1A7AA5;
  --cyan-700: #155F81;

  /* --- Neutral slate ---------------------------------------------------- */
  --slate-0:   #FFFFFF;
  --slate-25:  #FAFBFC;
  --slate-50:  #F4F6F8;
  --slate-100: #E9EDF1;
  --slate-200: #D7DEE5;
  --slate-300: #BBC6D0;
  --slate-400: #93A2B0;
  --slate-500: #6C7C8B;
  --slate-600: #4E5C6A;
  --slate-700: #38434F;
  --slate-800: #232C36;
  --slate-900: #141A21;

  /* --- Status ----------------------------------------------------------- */
  --success: #589A30;
  --warning: #E0A400;
  --danger:  #D14343;
  --info:    var(--cyan-500);

  /* ===================================================================== */
  /* Semantic aliases                                                      */
  /* ===================================================================== */
  --brand-primary:   var(--green-500);
  --brand-primary-d: var(--green-600);
  --brand-deep:      var(--green-800);
  --brand-navy:      var(--navy-700);
  --brand-accent:    var(--cyan-500);

  --text-strong:   var(--navy-800);
  --text-body:     var(--slate-700);
  --text-muted:    var(--slate-500);
  --text-inverse:  #FFFFFF;
  --text-on-brand: #FFFFFF;
  --text-link:     var(--green-700);

  --surface-page:    var(--slate-25);
  --surface-card:    #FFFFFF;
  --surface-subtle:  var(--slate-50);
  --surface-inset:   var(--green-50);
  --surface-dark:    var(--navy-800);
  --surface-darker:  var(--navy-900);

  --border-subtle:  var(--slate-100);
  --border-default: var(--slate-200);
  --border-strong:  var(--slate-300);
  --border-brand:   var(--green-200);

  --ring-brand: 0 0 0 4px rgba(111,177,62,0.28);
  --ring-focus: 0 0 0 4px rgba(32,144,192,0.30);

  /* Signature brand gradients */
  --grad-brand:   linear-gradient(110deg, var(--green-600) 0%, var(--green-500) 55%, var(--cyan-500) 130%);
  --grad-navy:    linear-gradient(160deg, var(--navy-700) 0%, var(--navy-900) 100%);
  --grad-fresh:   linear-gradient(135deg, var(--green-50) 0%, var(--cyan-50) 100%);
  --grad-mark:    linear-gradient(135deg, var(--green-500) 0%, var(--green-700) 100%);
}

/* ===========================================================================
   Green Horizon — Typography tokens
   Display: Plus Jakarta Sans  ·  Body/UI: Manrope
   =========================================================================== */
:root {
  --font-display: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Manrope', 'Segoe UI', system-ui, sans-serif;

  /* Type scale (fluid-friendly base, rem) */
  --fs-display-xl: clamp(2.75rem, 1.6rem + 4.6vw, 4.75rem); /* @kind other */ /* hero */
  --fs-display-l:  clamp(2.25rem, 1.5rem + 3vw, 3.5rem); /* @kind other */
  --fs-h1:         clamp(2rem, 1.5rem + 2vw, 2.75rem); /* @kind other */
  --fs-h2:         clamp(1.6rem, 1.3rem + 1.3vw, 2.1rem); /* @kind other */
  --fs-h3:         1.5rem; /* @kind other */
  --fs-h4:         1.25rem; /* @kind other */
  --fs-lead:       1.1875rem; /* @kind other */ /* 19px lead paragraph */
  --fs-body:       1rem; /* @kind other */ /* 16px */
  --fs-sm:         0.875rem; /* @kind other */ /* 14px */
  --fs-xs:         0.75rem; /* @kind other */ /* 12px */
  --fs-eyebrow:    0.8125rem; /* @kind other */ /* 13px label */

  /* Weights */
  --fw-regular: 400; /* @kind other */
  --fw-medium:  500; /* @kind other */
  --fw-semibold:600; /* @kind other */
  --fw-bold:    700; /* @kind other */
  --fw-extra:   800; /* @kind other */

  /* Line heights */
  --lh-tight:   1.08; /* @kind other */
  --lh-snug:    1.22; /* @kind other */
  --lh-normal:  1.5; /* @kind other */
  --lh-relaxed: 1.7; /* @kind other */

  /* Letter spacing */
  --ls-tight:   -0.02em; /* @kind other */
  --ls-snug:    -0.01em; /* @kind other */
  --ls-normal:  0; /* @kind other */
  --ls-wide:    0.04em; /* @kind other */
  --ls-eyebrow: 0.14em; /* @kind other */ /* uppercase eyebrows / tagline */
}

/* ===========================================================================
   Green Horizon — Spacing, radius, shadow, motion tokens
   =========================================================================== */
:root {
  /* Spacing scale (4px base) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Section rhythm */
  --section-y: clamp(64px, 7vw, 120px); /* @kind spacing */
  --container:  1200px;
  --container-wide: 1320px;
  --gutter: clamp(20px, 4vw, 48px); /* @kind spacing */

  /* Radii */
  --radius-xs:  6px;
  --radius-sm:  10px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-2xl: 36px;
  --radius-pill: 999px;

  /* Shadows — soft, premium, cool-tinted */
  --shadow-xs:  0 1px 2px rgba(20,40,60,0.06);
  --shadow-sm:  0 2px 8px rgba(20,40,60,0.07);
  --shadow-md:  0 8px 24px rgba(20,40,60,0.09);
  --shadow-lg:  0 18px 48px rgba(20,40,60,0.13);
  --shadow-xl:  0 32px 70px rgba(15,40,60,0.18);
  --shadow-brand: 0 16px 36px rgba(89,154,48,0.28);
  --shadow-navy:  0 18px 44px rgba(22,41,74,0.30);

  /* Motion */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --dur-fast:   140ms; /* @kind other */
  --dur-base:   240ms; /* @kind other */
  --dur-slow:   460ms; /* @kind other */
}



  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{margin:0;font-family:var(--font-body);background:var(--surface-page);color:var(--text-body);-webkit-font-smoothing:antialiased;}
  a{color:inherit;}
  .gh-container{width:100%;max-width:var(--container);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter);}

  /* hero decoration */
  .gh-hero-glow{position:absolute;top:-160px;right:-120px;width:560px;height:560px;border-radius:50%;
    background:radial-gradient(circle,rgba(111,177,62,0.22),transparent 62%);filter:blur(10px);pointer-events:none;}
  .gh-cta-glow{position:absolute;bottom:-180px;left:-120px;width:520px;height:520px;border-radius:50%;
    background:radial-gradient(circle,rgba(32,144,192,0.28),transparent 62%);pointer-events:none;}

  /* service tile */
  .gh-svc{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border-subtle);border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);padding:28px;text-decoration:none;color:inherit;
    transition:transform .24s var(--ease-out),box-shadow .24s var(--ease-out),border-color .24s;}
  .gh-svc:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--green-200);}
  .gh-svc:hover .gh-svc-link{gap:10px;}
  .gh-svc-link{transition:gap .2s var(--ease-out);}

  /* CTA form inputs */
  .gh-cta-input{width:100%;box-sizing:border-box;padding:12px 14px;font-family:var(--font-body);font-size:15px;color:#fff;
    background:rgba(255,255,255,0.07);border:1.5px solid rgba(255,255,255,0.16);border-radius:var(--radius-sm);outline:none;
    transition:border-color .2s,box-shadow .2s;}
  .gh-cta-input::placeholder{color:rgba(255,255,255,0.45);}
  .gh-cta-input:focus{border-color:var(--green-400);box-shadow:0 0 0 4px rgba(111,177,62,0.22);}
  .gh-cta-input option{color:#111;}

  /* grids */
  .gh-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
  .gh-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
  .gh-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}

  /* logo animation */
  .gh-mark{filter:drop-shadow(0 6px 16px rgba(89,154,48,0.30));}
  .gh-mark svg{display:block;}
  .gh-shine{display:none;}
  @media (prefers-reduced-motion: no-preference){
    .gh-mark.gh-anim{animation:ghPop 620ms var(--ease-spring) 80ms forwards;}
    .gh-mark.gh-anim .gh-horizon{stroke-dasharray:70;stroke-dashoffset:70;animation:ghDraw 700ms var(--ease-out) 340ms forwards;}
    .gh-mark.gh-anim .gh-shine{display:block;animation:ghShine 900ms var(--ease-out) 600ms 1;}
    .gh-word.gh-anim .gh-word-main{animation:ghUp 560ms var(--ease-out) 200ms forwards;}
    .gh-word.gh-anim .gh-word-sub{animation:ghUp 560ms var(--ease-out) 320ms forwards;}
    .gh-word.gh-anim .gh-word-tag{animation:ghUp 560ms var(--ease-out) 400ms forwards;}
    .gh-reveal.in{animation:ghReveal .7s var(--ease-out) 60ms forwards;}
  }
  @keyframes ghReveal{0%{opacity:0;transform:translateY(26px)}100%{opacity:1;transform:none}}
  @keyframes ghPop{0%{opacity:0;transform:scale(.6) rotate(-8deg)}100%{opacity:1;transform:scale(1)}}
  @keyframes ghDraw{to{stroke-dashoffset:0}}
  @keyframes ghShine{0%{transform:translateX(0) rotate(18deg);opacity:0}25%{opacity:1}100%{transform:translateX(120px) rotate(18deg);opacity:0}}
  @keyframes ghUp{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:translateY(0)}}

  .gh-hide-sm{display:inline-flex;}
  @media (max-width:980px){
    .gh-hero,.gh-why,.gh-cta{grid-template-columns:1fr !important;}
    .gh-grid-4{grid-template-columns:repeat(2,1fr);}
    .gh-hide-md{display:none !important;}
    .gh-foot{grid-template-columns:1fr 1fr !important;}
  }
  @media (max-width:640px){
    .gh-grid-4,.gh-grid-3,.gh-grid-2{grid-template-columns:1fr;}
    .gh-hide-sm{display:none !important;}
    .gh-foot{grid-template-columns:1fr !important;}
  }