/* ============================================================
   LEAF TECHNOLABS — Brand stylesheet
   Aesthetic: organic precision. Deep forest green, warm paper,
   sharp lime accent. Fraunces (display) + Archivo (body).
   ============================================================ */

:root{
  --paper:        #F6F3EA;
  --paper-2:      #EFEBDD;
  --ink:          #10271C;
  --ink-soft:     #3C5247;
  --green:        #0D4A37;
  --green-deep:   #093226;
  --green-2:      #176850;
  --lime:         #C9F24B;
  --lime-soft:    #E4F8A6;
  --sage:         #DCE6D2;
  --line:         rgba(16,39,28,.16);
  --line-strong:  rgba(16,39,28,.32);
  --shadow:       0 18px 50px -18px rgba(9,50,38,.28);
  --radius:       18px;
  --radius-sm:    10px;
  --font-display: "Fraunces", Georgia, serif;
  --font-body:    "Archivo", "Helvetica Neue", sans-serif;
  --maxw:         1200px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  font-size:16.5px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* paper grain */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.025 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

h1,h2,h3,h4{font-family:var(--font-display);font-weight:560;line-height:1.12;letter-spacing:-.015em;}
h1{font-size:clamp(2.6rem,5.6vw,4.4rem);}
h2{font-size:clamp(2rem,3.8vw,3rem);}
h3{font-size:clamp(1.25rem,2vw,1.55rem);}
p{color:var(--ink-soft);}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
ul{list-style:none;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,4vw,48px);}
section{padding:clamp(64px,9vw,120px) 0;position:relative;}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--green);margin-bottom:18px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--lime);box-shadow:0 0 0 1px var(--green);}
.lede{font-size:clamp(1.02rem,1.5vw,1.18rem);max-width:62ch;}
.sec-head{margin-bottom:clamp(36px,5vw,60px);}
.sec-head.center{text-align:center;}
.sec-head.center .lede{margin:14px auto 0;}
.sec-head.center .eyebrow{justify-content:center;}

em.tilt{font-style:italic;font-weight:480;color:var(--green-2);}
.hl{background:linear-gradient(transparent 62%, var(--lime) 62%, var(--lime) 92%, transparent 92%);}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-body);font-weight:600;font-size:.95rem;
  padding:14px 26px;border-radius:999px;border:1.5px solid var(--ink);
  cursor:pointer;transition:.25s ease;white-space:nowrap;
}
.btn svg{transition:transform .25s ease;}
.btn:hover svg{transform:translateX(4px);}
.btn-solid{background:var(--green);border-color:var(--green);color:#fff;}
.btn-solid:hover{background:var(--green-deep);box-shadow:var(--shadow);transform:translateY(-2px);}
.btn-lime{background:var(--lime);border-color:var(--lime);color:var(--ink);}
.btn-lime:hover{box-shadow:0 14px 34px -10px rgba(201,242,75,.6);transform:translateY(-2px);}
.btn-ghost{background:transparent;color:var(--ink);}
.btn-ghost:hover{background:var(--ink);color:var(--paper);}
.btn-ghost.on-dark{border-color:rgba(255,255,255,.5);color:#fff;}
.btn-ghost.on-dark:hover{background:#fff;color:var(--ink);}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:200;
  background:rgba(246,243,234,.82);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:78px;}
.logo{display:flex;align-items:center;gap:11px;}
.logo svg{flex:none;}
.logo .wordmark{font-family:var(--font-display);font-weight:600;font-size:1.32rem;letter-spacing:-.01em;line-height:1;}
.logo .wordmark small{display:block;font-family:var(--font-body);font-weight:600;font-size:.6rem;letter-spacing:.34em;text-transform:uppercase;color:var(--green-2);margin-top:3px;}
.nav-links{display:flex;align-items:center;gap:6px;}
.nav-links a{
  font-size:.92rem;font-weight:540;padding:9px 14px;border-radius:999px;
  color:var(--ink-soft);transition:.2s;
}
.nav-links a:hover{color:var(--ink);background:rgba(16,39,28,.06);}
.nav-links a.active{color:var(--green);font-weight:650;background:var(--sage);}
.nav-cta{margin-left:10px;padding:11px 22px;font-size:.88rem;}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;transition:.3s;}

/* ---------- hero ---------- */
.hero{
  padding:clamp(64px,9vw,110px) 0 clamp(70px,9vw,110px);
  position:relative;overflow:hidden;
}
.hero-grid{display:grid;grid-template-columns:1fr;gap:clamp(36px,5vw,72px);max-width:820px;margin-inline:auto;}
.hero h1 .leafword{position:relative;white-space:nowrap;}
.hero h1 .leafword::after{
  content:"";position:absolute;left:0;right:0;bottom:.06em;height:.28em;
  background:var(--lime);z-index:-1;border-radius:3px;
}
.hero .lede{margin:24px 0 34px;}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;}
.hero-trust{margin-top:42px;display:flex;gap:30px;flex-wrap:wrap;}
.hero-trust .t{font-size:.85rem;color:var(--ink-soft);display:flex;gap:9px;align-items:center;}
.hero-trust .t svg{flex:none;}

/* decorative big leaf vein in hero bg */
.hero-bg{position:absolute;right:-140px;top:-120px;width:560px;opacity:.08;pointer-events:none;}

/* ---------- marquee ---------- */
.marquee{
  background:var(--ink);color:var(--paper);overflow:hidden;
  padding:15px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);
}
.marquee-track{display:flex;gap:48px;width:max-content;animation:scroll 34s linear infinite;}
.marquee-track span{font-family:var(--font-display);font-size:1rem;font-style:italic;display:flex;align-items:center;gap:48px;white-space:nowrap;}
.marquee-track span::after{content:"✺";color:var(--lime);font-style:normal;font-size:.85rem;}
@keyframes scroll{to{transform:translateX(-50%);}}

/* ---------- stats ---------- */
.stats{background:var(--green-deep);color:#fff;border-radius:0;}
.stats .eyebrow{color:var(--lime);}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:rgba(255,255,255,.14);border-radius:var(--radius);overflow:hidden;}
.stat{background:var(--green-deep);padding:38px 30px;}
.stat b{font-family:var(--font-display);font-size:clamp(2.2rem,4vw,3.2rem);font-weight:560;color:var(--lime);display:block;line-height:1;}
.stat span{font-size:.88rem;color:rgba(255,255,255,.78);display:block;margin-top:10px;}

/* ---------- cards ---------- */
.grid{display:grid;gap:22px;}
.grid.c2{grid-template-columns:repeat(2,1fr);}
.grid.c3{grid-template-columns:repeat(3,1fr);}
.grid.c4{grid-template-columns:repeat(4,1fr);}

.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:30px;transition:.3s ease;position:relative;overflow:hidden;
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--green);}
.card .ic{
  width:52px;height:52px;border-radius:14px;background:var(--sage);
  display:grid;place-items:center;margin-bottom:20px;transition:.3s;
}
.card:hover .ic{background:var(--lime);rotate:-6deg;}
.card h3{margin-bottom:10px;}
.card p{font-size:.94rem;}
.card .more{
  display:inline-flex;align-items:center;gap:7px;margin-top:16px;
  font-size:.86rem;font-weight:650;color:var(--green);
}
.card .more svg{transition:.25s;}
.card:hover .more svg{transform:translateX(4px);}
.card .num{
  position:absolute;top:18px;right:22px;font-family:var(--font-display);
  font-style:italic;font-size:1.05rem;color:var(--line-strong);
}

/* product cards */
.pcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.3s;display:flex;flex-direction:column;}
.pcard:hover{transform:translateY(-6px);box-shadow:var(--shadow);}
.pcard-body{padding:26px;flex:1;display:flex;flex-direction:column;}
.pcard-body .tag{
  align-self:flex-start;font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  background:var(--sage);color:var(--green);padding:5px 11px;border-radius:999px;margin-bottom:13px;
}
.pcard-body h3{font-size:1.3rem;}
.pcard-body p{font-size:.92rem;margin-top:9px;flex:1;}
.pcard-body ul{margin-top:14px;display:flex;flex-wrap:wrap;gap:7px;}
.pcard-body ul li{font-size:.74rem;font-weight:600;border:1px solid var(--line);padding:4px 10px;border-radius:999px;color:var(--ink-soft);}

/* ---------- split sections ---------- */
.split{display:grid;grid-template-columns:1fr;gap:clamp(36px,6vw,80px);max-width:760px;margin-inline:auto;}
.split .lede{margin-top:18px;}
.checks{margin-top:26px;display:grid;gap:13px;}
.checks li{display:flex;gap:13px;align-items:flex-start;font-size:.97rem;color:var(--ink-soft);}
.checks li svg{flex:none;margin-top:3px;}
.checks li b{color:var(--ink);font-weight:640;}

/* ---------- process ---------- */
.process{counter-reset:step;}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.step{
  counter-increment:step;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:30px;position:relative;transition:.3s;
}
.step:hover{border-color:var(--green);transform:translateY(-5px);box-shadow:var(--shadow);}
.step::before{
  content:"0" counter(step);font-family:var(--font-display);font-style:italic;
  font-size:2.6rem;color:transparent;-webkit-text-stroke:1.3px var(--green);
  display:block;line-height:1;margin-bottom:18px;
}
.step h3{font-size:1.18rem;margin-bottom:8px;}
.step p{font-size:.92rem;}

/* ---------- industries strip ---------- */
.ind-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.ind{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 22px;text-align:center;transition:.3s;
}
.ind:hover{background:var(--green);color:#fff;transform:translateY(-5px);}
.ind:hover p{color:rgba(255,255,255,.8);}
.ind:hover .ic{background:var(--lime);}
.ind .ic{width:50px;height:50px;border-radius:50%;background:var(--sage);display:grid;place-items:center;margin:0 auto 16px;transition:.3s;}
.ind h3{font-size:1.06rem;font-family:var(--font-body);font-weight:650;letter-spacing:0;}
.ind p{font-size:.82rem;margin-top:7px;}

/* ---------- testimonials ---------- */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.testi{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:30px;display:flex;flex-direction:column;gap:20px;transition:.3s;
}
.testi:hover{transform:translateY(-5px);box-shadow:var(--shadow);}
.testi .stars{color:var(--green);letter-spacing:3px;font-size:.95rem;}
.testi blockquote{
  font-family:var(--font-display);font-style:italic;font-size:1.04rem;line-height:1.5;
  color:var(--ink);flex:1;border:none;
}
.testi .who{display:flex;gap:13px;align-items:center;}
.testi .who b{display:block;font-size:.92rem;}
.testi .who span{font-size:.8rem;color:var(--ink-soft);}
.testi.wide{grid-column:span 1;}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin:0 auto;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-item summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;
  align-items:center;padding:24px 4px;font-weight:640;font-size:1.04rem;transition:.2s;
}
.faq-item summary:hover{color:var(--green);}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary .pm{
  flex:none;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--line-strong);
  display:grid;place-items:center;font-weight:480;font-size:1.15rem;transition:.3s;color:var(--green);
}
.faq-item[open] summary .pm{background:var(--lime);border-color:var(--lime);rotate:45deg;color:var(--ink);}
.faq-item .faq-a{padding:0 44px 24px 4px;font-size:.95rem;color:var(--ink-soft);}

/* ---------- CTA band ---------- */
.cta-band{
  background:var(--green);color:#fff;border-radius:26px;
  padding:clamp(44px,6vw,76px);position:relative;overflow:hidden;
  display:grid;grid-template-columns:1.3fr .7fr;gap:40px;align-items:center;
}
.cta-band h2{color:#fff;}
.cta-band p{color:rgba(255,255,255,.82);margin-top:14px;max-width:54ch;}
.cta-band .actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:flex-end;}
.cta-band::after{
  content:"";position:absolute;right:-90px;bottom:-130px;width:380px;height:380px;
  background:radial-gradient(circle,var(--lime) 0%,transparent 65%);opacity:.3;
}
.cta-leaf{position:absolute;left:-60px;top:-60px;opacity:.1;width:260px;}

/* ---------- page hero (inner pages) ---------- */
.page-hero{
  background:var(--green-deep);color:#fff;
  padding:clamp(60px,8vw,96px) 0;position:relative;overflow:hidden;
}
.page-hero .eyebrow{color:var(--lime);}
.page-hero .eyebrow::before{box-shadow:0 0 0 1px var(--lime);}
.page-hero h1{max-width:18ch;}
.page-hero .lede{color:rgba(255,255,255,.82);margin-top:20px;}
.page-hero .crumb{font-size:.82rem;color:rgba(255,255,255,.6);margin-bottom:26px;display:block;}
.page-hero .crumb a:hover{color:var(--lime);}
.page-hero .crumb b{color:#fff;font-weight:560;}
.page-hero-leaf{position:absolute;right:-80px;bottom:-130px;width:430px;opacity:.1;pointer-events:none;}

/* ---------- service detail rows ---------- */
.srv-row{
  display:grid;grid-template-columns:1fr;gap:clamp(34px,5vw,70px);max-width:780px;margin-inline:auto;
  padding:clamp(44px,6vw,70px) 0;border-bottom:1px solid var(--line);
}
.srv-row:last-child{border-bottom:none;}
.srv-row .kicker{
  font-family:var(--font-display);font-style:italic;font-size:1rem;color:var(--green-2);
  display:block;margin-bottom:10px;
}
.srv-row h2{font-size:clamp(1.6rem,2.6vw,2.2rem);}
.srv-row p.body{margin-top:14px;font-size:.99rem;}
.srv-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;}
.srv-tags span{font-size:.76rem;font-weight:650;background:var(--sage);color:var(--green);padding:6px 13px;border-radius:999px;}

/* ---------- values / about ---------- */
.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.value{
  border:1px solid var(--line);border-radius:var(--radius);padding:30px;
  background:#fff;transition:.3s;
}
.value:hover{border-color:var(--green);transform:translateY(-4px);}
.value .glyph{font-family:var(--font-display);font-style:italic;font-size:1.7rem;color:var(--lime);-webkit-text-stroke:1px var(--green);margin-bottom:14px;display:block;}
.value h3{font-size:1.15rem;margin-bottom:8px;}
.value p{font-size:.92rem;}

.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.member{text-align:center;}
.member b{font-size:1rem;}
.member span{display:block;font-size:.82rem;color:var(--ink-soft);margin-top:3px;}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(34px,5vw,64px);align-items:start;}
.c-info{display:grid;gap:16px;}
.c-tile{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;display:flex;gap:17px;align-items:flex-start;transition:.3s;
}
.c-tile:hover{border-color:var(--green);transform:translateX(5px);}
.c-tile .ic{width:46px;height:46px;border-radius:12px;background:var(--sage);display:grid;place-items:center;flex:none;}
.c-tile b{display:block;font-size:.95rem;margin-bottom:3px;}
.c-tile span{font-size:.9rem;color:var(--ink-soft);}
.c-tile span u{text-decoration:none;background:var(--lime-soft);padding:1px 7px;border-radius:5px;font-weight:600;}

.form-card{
  background:#fff;border:1px solid var(--line);border-radius:22px;
  padding:clamp(28px,4vw,44px);box-shadow:var(--shadow);
}
.form-card h3{margin-bottom:6px;}
.form-card .sub{font-size:.9rem;margin-bottom:26px;}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.f-field{display:flex;flex-direction:column;gap:7px;}
.f-field.full{grid-column:1/-1;}
.f-field label{font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);}
.f-field input,.f-field select,.f-field textarea{
  font-family:var(--font-body);font-size:.95rem;color:var(--ink);
  background:var(--paper);border:1.5px solid var(--line);border-radius:var(--radius-sm);
  padding:13px 15px;transition:.2s;outline:none;width:100%;
}
.f-field input:focus,.f-field select:focus,.f-field textarea:focus{
  border-color:var(--green);box-shadow:0 0 0 3px var(--lime-soft);background:#fff;
}
.f-field textarea{resize:vertical;min-height:120px;}
.form-note{font-size:.78rem;color:var(--ink-soft);margin-top:14px;}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:rgba(255,255,255,.78);margin-top:0;}
.footer-cta-wrap{padding:clamp(56px,8vw,90px) 0 0;}
.footer-main{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;
  padding:clamp(50px,7vw,80px) 0 50px;
}
.footer-main .logo .wordmark{color:#fff;}
.footer-main .logo .wordmark small{color:var(--lime);}
.footer-main .about-blurb{font-size:.9rem;margin-top:18px;max-width:34ch;color:rgba(255,255,255,.65);}
.f-col h4{font-family:var(--font-body);font-size:.8rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--lime);margin-bottom:20px;}
.f-col ul{display:grid;gap:11px;}
.f-col a{font-size:.92rem;color:rgba(255,255,255,.72);transition:.2s;}
.f-col a:hover{color:var(--lime);padding-left:4px;}
.f-col .ph-line{font-size:.88rem;color:rgba(255,255,255,.72);}
.f-col .ph-line u{text-decoration:none;background:rgba(201,242,75,.18);color:var(--lime);padding:1px 7px;border-radius:5px;font-weight:600;}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12);padding:24px 0;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:.8rem;color:rgba(255,255,255,.5);
}
.footer-bottom .socials{display:flex;gap:10px;}
.footer-bottom .socials a{
  width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.25);
  display:grid;place-items:center;transition:.25s;
}
.footer-bottom .socials a:hover{background:var(--lime);border-color:var(--lime);color:var(--ink);}

/* ---------- reveal animations ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease;}
.reveal.in{opacity:1;transform:none;}
.reveal.d1{transition-delay:.08s;}.reveal.d2{transition-delay:.16s;}
.reveal.d3{transition-delay:.24s;}.reveal.d4{transition-delay:.32s;}

/* ---------- misc ---------- */
.band-alt{background:var(--paper-2);}
.divider-leaf{display:flex;justify-content:center;padding:0;color:var(--green);opacity:.5;}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .grid.c4,.ind-grid,.team-grid{grid-template-columns:repeat(2,1fr);}
  .grid.c3,.steps,.testi-grid,.value-grid{grid-template-columns:repeat(2,1fr);}
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .footer-main{grid-template-columns:1fr 1fr;}
}
@media (max-width:860px){
  .hero-grid,.split,.srv-row,.contact-grid,.cta-band{grid-template-columns:1fr;}
  .cta-band .actions{justify-content:flex-start;}
  .hero-visual{max-width:520px;}
  .nav-links{
    position:fixed;inset:78px 0 auto 0;background:var(--paper);
    flex-direction:column;align-items:stretch;padding:22px;gap:8px;
    border-bottom:1px solid var(--line);box-shadow:var(--shadow);
    transform:translateY(-130%);transition:.35s ease;z-index:150;
  }
  .nav-links.open{transform:none;}
  .nav-links a{padding:13px 16px;font-size:1rem;}
  .nav-cta{margin:8px 0 0;}
  .nav-toggle{display:block;}
  .nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav-toggle.open span:nth-child(2){opacity:0;}
  .nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
}
@media (max-width:580px){
  .grid.c2,.grid.c3,.grid.c4,.steps,.testi-grid,.value-grid,.ind-grid,.team-grid,.f-grid{grid-template-columns:1fr;}
  .stats-grid{grid-template-columns:1fr 1fr;}
  .footer-main{grid-template-columns:1fr;}
  .hero-chip.c1{left:-6px;}
  .hero-chip.c2{right:-6px;}
}