/* ==========================================================================
   KrishiSetu Organics — front-end stylesheet
   Original design system. CSS3 only, no frameworks.
   1. tokens  2. base  3. layout  4. header/nav  5. hero  6. sections
   7. cards   8. gallery 9. slider 10. blog 11. accordion 12. forms
   13. footer 14. utilities 15. responsive 16. motion
   ========================================================================== */

/* ---------------------------------------------------------------- 1. tokens */
:root{
  --green-deep:#14432a;
  --green:#2f7a44;
  --green-soft:#4d9a63;
  --olive:#8a9b4e;
  --cream:#faf7ef;
  --cream-2:#f3eee1;
  --ink:#1b231c;
  --ink-soft:#4a574c;
  --line:#e2dccb;
  --white:#fff;

  /* warm accent pair — used on cards, numerals and dark feature sections
     so the palette reads as a considered brand, not a stock green template */
  --rust:#a8461f;
  --rust-deep:#7a3216;
  --gold:#e0a92b;
  --gold-soft:#f3cf7a;
  --dots: radial-gradient(rgba(20,67,42,.09) 1px, transparent 1.6px);

  --ff: "Inter", "Segoe UI", Roboto, "Noto Sans Devanagari", "Noto Sans Kannada", "Nirmala UI", system-ui, -apple-system, sans-serif;
  --ff-head: "Fraunces", "Iowan Old Style", Georgia, "Noto Serif Devanagari", "Noto Serif Kannada", serif;

  --r-sm:8px; --r:14px; --r-lg:22px; --r-xl:32px; --r-pill:999px;
  --sh-1:0 2px 8px rgba(20,67,42,.06);
  --sh-2:0 10px 30px rgba(20,67,42,.10);
  --sh-3:0 22px 55px rgba(20,67,42,.16);

  --shell:1200px;
  --gap:clamp(18px,3vw,34px);
  --sp-sec:clamp(58px,7vw,110px);
  --head-h:74px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ------------------------------------------------------------------ 2. base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; font-family:var(--ff); color:var(--ink); background:var(--cream);
  font-size:16px; line-height:1.68; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--green); text-decoration:none; transition:color .25s var(--ease)}
a:hover{color:var(--green-deep)}
h1,h2,h3,h4{font-family:var(--ff-head); color:var(--green-deep); line-height:1.2; margin:0 0 .5em; font-weight:700; letter-spacing:-.015em}
h1{font-size:clamp(30px,5.2vw,60px)}
h2{font-size:clamp(24px,3.4vw,40px)}
h3{font-size:clamp(18px,2vw,22px)}
p{margin:0 0 1em}
ul{margin:0; padding:0; list-style:none}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer; background:none; border:0}
:focus-visible{outline:3px solid var(--olive); outline-offset:3px; border-radius:4px}
.skip-link{position:absolute; left:-9999px; top:0; background:var(--green-deep); color:#fff; padding:12px 18px; z-index:999}
.skip-link:focus{left:12px; top:12px}
.shell{width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:clamp(16px,4vw,28px)}
.ico{width:24px; height:24px; flex:none}
.ico-sm{width:18px; height:18px}
.ico-xs{width:14px; height:14px; stroke-width:2}
.tc{text-align:center}
.lead{font-size:1.08rem; color:var(--ink-soft)}

/* ---------------------------------------------------------------- 3. layout */
.sec{padding:var(--sp-sec) 0; position:relative}
.bg-soft{background:var(--dots) 0 0/17px 17px, linear-gradient(180deg,var(--cream-2),var(--cream))}
.sec__head{max-width:720px; margin:0 auto clamp(30px,4vw,54px); text-align:center}
.sec__head--left{margin-inline:0; text-align:left}
.sec__head p{color:var(--ink-soft); margin:0}
.sec__foot{margin-top:clamp(26px,3vw,40px); text-align:center}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:14px;
  font-size:.74rem; font-weight:700; letter-spacing:.19em; text-transform:uppercase;
  color:var(--olive);
}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--olive); border-radius:2px}
.eyebrow--light{color:#dfe9c8}
.eyebrow--light::before{background:#dfe9c8}

.grid{display:grid; gap:var(--gap)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}

/* ------------------------------------------------------------------ buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 26px; border-radius:var(--r-pill); border:1.6px solid transparent;
  font-weight:600; font-size:.94rem; line-height:1; white-space:nowrap;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn--sm{padding:11px 19px; font-size:.86rem}
.btn--lg{padding:17px 32px; font-size:1rem}
.btn--wide{width:100%}
.btn--primary{background:var(--green-deep); color:#fff; box-shadow:var(--sh-1)}
.btn--primary:hover{background:var(--green); color:#fff; box-shadow:var(--sh-2)}
.btn--outline{border-color:var(--green); color:var(--green-deep); background:transparent}
.btn--outline:hover{background:var(--green-deep); border-color:var(--green-deep); color:#fff}
.btn--light{background:var(--white); color:var(--green-deep)}
.btn--light:hover{background:var(--cream-2); color:var(--green-deep)}
.btn--ghost-light{border-color:rgba(255,255,255,.6); color:#fff; background:rgba(255,255,255,.08); backdrop-filter:blur(6px)}
.btn--ghost-light:hover{background:#fff; color:var(--green-deep); border-color:#fff}
.btn--wa{background:#25d366; color:#08321b}
.btn--wa:hover{background:#1fbe5b; color:#04240f}

/* --------------------------------------------------------- 4. header / nav */
.topbar{background:var(--green-deep); color:#cfe0d4; font-size:.8rem}
.topbar__in{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:42px; flex-wrap:wrap}
.topbar__list{display:flex; align-items:center; gap:20px; flex-wrap:wrap}
.topbar__list li{display:flex; align-items:center; gap:7px}
.topbar a{color:#cfe0d4}
.topbar a:hover{color:#fff}
.topbar__right{display:flex; align-items:center; gap:12px}
.topbar__soc{display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.09)}
.topbar__soc:hover{background:var(--olive); color:#fff}
.lang{position:relative}
.lang__btn{display:flex; align-items:center; gap:7px; color:#cfe0d4; padding:5px 11px; border:1px solid rgba(255,255,255,.25); border-radius:var(--r-pill)}
.lang__btn:hover{background:rgba(255,255,255,.1)}
.lang__list{
  position:absolute; right:0; top:calc(100% + 8px); min-width:170px; background:#fff; color:var(--ink);
  border-radius:var(--r); box-shadow:var(--sh-3); padding:7px; opacity:0; visibility:hidden;
  transform:translateY(-6px); transition:.22s var(--ease); z-index:60;
}
.lang.is-open .lang__list{opacity:1; visibility:visible; transform:none}
.lang__list a{display:block; padding:9px 12px; border-radius:9px; color:var(--ink)}
.lang__list a:hover{background:var(--cream-2)}
.lang__list a.is-current{background:var(--green-deep); color:#fff}

.site-head{position:sticky; top:0; z-index:80; background:rgba(250,247,239,.9); backdrop-filter:blur(12px); border-bottom:1px solid transparent; transition:.3s var(--ease)}
.site-head.is-stuck{background:rgba(255,255,255,.96); border-color:var(--line); box-shadow:0 6px 24px rgba(20,67,42,.07)}
.site-head__in{display:flex; align-items:center; gap:clamp(14px,3vw,34px); min-height:var(--head-h)}
.brand{display:flex; align-items:center; gap:12px; flex:none}
.brand img{width:auto; height:44px}
.brand__txt{display:flex; flex-direction:column; line-height:1.2}
.brand__txt strong{font-family:var(--ff-head); font-size:1.06rem; color:var(--green-deep)}
.brand__txt small{font-size:.7rem; color:var(--ink-soft); max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.nav{margin-inline:auto}
.nav__list{display:flex; align-items:center; gap:clamp(6px,1.4vw,20px)}
.nav__link{position:relative; display:block; padding:10px 4px; font-size:.92rem; font-weight:600; color:var(--ink)}
.nav__link::after{content:""; position:absolute; left:0; right:100%; bottom:4px; height:2px; background:var(--olive); transition:right .3s var(--ease)}
.nav__link:hover{color:var(--green)}
.nav__link:hover::after,.nav__link.is-active::after{right:0}
.nav__link.is-active{color:var(--green-deep)}
.site-head__cta{flex:none}
.burger{display:none; width:44px; height:44px; border-radius:12px; border:1px solid var(--line); background:#fff; padding:0; place-items:center; gap:5px}
.burger span{display:block; width:20px; height:2px; background:var(--green-deep); border-radius:2px; transition:.3s var(--ease); margin:2px auto}
.burger.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.drawer{position:fixed; inset:0; z-index:120; visibility:hidden}
.drawer__panel{
  position:absolute; top:0; right:0; width:min(92vw,380px); height:100%; background:var(--cream);
  padding:20px; overflow-y:auto; transform:translateX(102%); transition:transform .38s var(--ease);
  display:flex; flex-direction:column; gap:18px;
}
.drawer.is-open{visibility:visible}
.drawer.is-open .drawer__panel{transform:none}
.drawer-veil{position:fixed; inset:0; background:rgba(11,32,20,.5); opacity:0; visibility:hidden; transition:.3s; z-index:110; backdrop-filter:blur(2px)}
.drawer-veil.is-open{opacity:1; visibility:visible}
.drawer__head{display:flex; align-items:center; justify-content:space-between; padding-bottom:14px; border-bottom:1px solid var(--line)}
.drawer__close{font-size:2rem; line-height:1; color:var(--green-deep); padding:0 8px}
.drawer__list{display:flex; flex-direction:column}
.drawer__list a{display:flex; align-items:center; justify-content:space-between; padding:15px 4px; font-size:1.06rem; font-weight:600; color:var(--ink); border-bottom:1px solid var(--line)}
.drawer__list a.is-active{color:var(--green)}
.drawer__lang{display:flex; gap:8px; flex-wrap:wrap}
.drawer__lang a{padding:9px 15px; border:1px solid var(--line); border-radius:var(--r-pill); font-size:.86rem; color:var(--ink)}
.drawer__lang a.is-current{background:var(--green-deep); color:#fff; border-color:var(--green-deep)}
.drawer__foot{margin-top:auto; display:flex; flex-direction:column; gap:10px; padding-top:16px; border-top:1px solid var(--line)}
.drawer__foot a{display:flex; align-items:center; gap:9px; font-weight:600}

/* ------------------------------------------------------------------- 5. hero */
.hero{position:relative; min-height:clamp(560px,92vh,940px); display:grid; align-items:center; overflow:hidden; background:var(--green-deep)}
.hero__media{position:absolute; inset:0}
.hero__media img{width:100%; height:100%; object-fit:cover; animation:heroZoom 22s ease-out both}
.hero__veil{
  position:absolute; inset:0;
  background:linear-gradient(105deg,rgba(9,32,19,.9) 0%,rgba(9,32,19,.72) 42%,rgba(9,32,19,.28) 75%,rgba(9,32,19,.5) 100%);
}
.hero__in{position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.8fr); gap:clamp(24px,4vw,60px); align-items:center; padding-block:clamp(48px,8vh,110px)}
.hero__copy{color:#fff}
.hero__copy h1{color:#fff; margin-bottom:18px; text-wrap:balance; max-width:15ch}
.hero__lead{font-size:clamp(1rem,1.35vw,1.2rem); color:#e4ecdd; max-width:58ch}
.hero__btns{display:flex; gap:14px; flex-wrap:wrap; margin-top:30px}
.hero__badge{display:inline-flex; align-items:center; gap:10px; margin-top:28px; padding:11px 18px; border-radius:var(--r-pill); background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); color:#e9f0e2; font-size:.85rem; backdrop-filter:blur(6px)}
.hero__panel{
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); border-radius:var(--r-xl);
  padding:clamp(20px,2.4vw,34px); backdrop-filter:blur(10px); display:grid; gap:16px;
}
.hero__stat{display:flex; align-items:baseline; gap:14px; padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,.16)}
.hero__stat strong{font-family:var(--ff-head); font-size:clamp(24px,2.6vw,34px); color:#fff; min-width:5.2ch}
.hero__stat span{color:#dbe6d3; font-size:.9rem}
.hero__panel-cta{display:inline-flex; align-items:center; gap:9px; color:#fff; font-weight:600; font-size:.9rem}
.hero__panel-cta:hover{color:#a9e3bf}
.hero__scroll{position:absolute; left:50%; bottom:26px; transform:translateX(-50%); width:26px; height:44px; border:2px solid rgba(255,255,255,.5); border-radius:14px; z-index:3}
.hero__scroll span{position:absolute; left:50%; top:9px; width:4px; height:8px; margin-left:-2px; background:#fff; border-radius:2px; animation:scrollDot 1.9s infinite}
@keyframes heroZoom{from{transform:scale(1.09)}to{transform:scale(1)}}
@keyframes scrollDot{0%{opacity:0;transform:translateY(0)}40%{opacity:1}100%{opacity:0;transform:translateY(14px)}}

/* -------------------------------------------------------------- page hero */
.page-hero{position:relative; min-height:clamp(280px,36vh,430px); display:grid; align-items:end; overflow:hidden; background:var(--green-deep)}
.page-hero__media{position:absolute; inset:0}
.page-hero__media img{width:100%; height:100%; object-fit:cover}
.page-hero__veil{position:absolute; inset:0; background:linear-gradient(180deg,rgba(9,32,19,.62),rgba(9,32,19,.86))}
.page-hero__in{position:relative; z-index:2; color:#fff; padding-block:clamp(30px,5vw,60px)}
.page-hero__in h1{color:#fff; margin:10px 0 8px; max-width:22ch}
.page-hero__in p{color:#dde7d5; max-width:70ch; margin:0}
.crumbs{display:flex; align-items:center; gap:9px; flex-wrap:wrap; font-size:.82rem; color:#c3d3c0}
.crumbs a{color:#dfe9d4}
.crumbs span{opacity:.65}

/* ------------------------------------------------------------------ 6. stats */
.stats{background:var(--green-deep); color:#fff; padding:clamp(34px,4vw,54px) 0}
.stats--inline{background:var(--green-deep)}
.stats__grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:clamp(18px,3vw,34px)}
.stats__item{text-align:center; padding:14px; border-right:1px solid rgba(255,255,255,.13)}
.stats__item:last-child{border-right:0}
.stats__item strong{display:block; font-family:var(--ff-head); font-size:clamp(28px,3.6vw,46px); color:#fff; line-height:1}
.stats__item i{font-style:normal; color:var(--olive)}
.stats__item span{display:block; margin-top:8px; font-size:.88rem; color:#cfe0d4}

/* ------------------------------------------------------------------- about */
.about{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(26px,4vw,64px); align-items:center}
.about__media{position:relative; padding-bottom:44px}
.about__img{width:100%; border-radius:var(--r-lg); box-shadow:var(--sh-3); aspect-ratio:4/3.1; object-fit:cover}
.about__img2{position:absolute; right:-6px; bottom:0; width:44%; border-radius:var(--r); border:6px solid var(--cream); box-shadow:var(--sh-2); aspect-ratio:4/3; object-fit:cover}
.about__badge{
  position:absolute; left:-8px; top:24px; background:var(--olive); color:#fff; border-radius:var(--r);
  padding:14px 18px; text-align:center; box-shadow:var(--sh-2);
}
.about__badge strong{display:block; font-family:var(--ff-head); font-size:1.8rem; line-height:1}
.about__badge span{font-size:.72rem; letter-spacing:.06em}
.about__copy h2{margin-bottom:14px}
.about__copy p{color:var(--ink-soft)}
.ticks{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin:22px 0 26px}
.ticks--2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.ticks li{display:flex; align-items:flex-start; gap:10px; font-size:.94rem; color:var(--ink)}
.ticks svg{color:var(--green); margin-top:3px}
.ticks span{display:block}

/* ----------------------------------------------------------------- cards */
.card{background:#fff; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-1); display:flex; flex-direction:column; transition:transform .35s var(--ease), box-shadow .35s var(--ease)}
.card:hover{transform:translateY(-6px); box-shadow:var(--sh-3)}
.card__media{position:relative; display:block; overflow:hidden; aspect-ratio:16/11}
.card__media img{width:100%; height:100%; object-fit:cover; transition:transform .55s var(--ease)}
.card:hover .card__media img{transform:scale(1.06)}
.card__body{padding:clamp(18px,2vw,26px); display:flex; flex-direction:column; flex:1}
.card__body h3{margin-bottom:9px; font-size:1.12rem}
.card__body h3 a{color:inherit}
.card__body p{color:var(--ink-soft); font-size:.93rem; margin-bottom:16px}
.card__ico{display:grid; place-items:center; width:50px; height:50px; border-radius:14px; background:var(--cream-2); color:var(--green-deep); margin:-42px 0 14px; position:relative; box-shadow:var(--sh-1)}
.card__link{margin-top:auto; display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:.88rem}
.card__link:hover{gap:12px}
.card__tag{position:absolute; left:14px; top:14px; background:rgba(9,32,19,.82); color:#fff; padding:6px 13px; border-radius:var(--r-pill); font-size:.72rem; letter-spacing:.04em; backdrop-filter:blur(4px)}
.card__meta{display:flex; align-items:center; gap:7px; font-size:.8rem; color:var(--ink-soft); margin-bottom:7px}

/* ------------------------------------------------------------------- why */
.why{background:#fff; border-radius:var(--r-lg); padding:clamp(22px,2.4vw,32px); box-shadow:var(--sh-1); border:1px solid var(--line); transition:.35s var(--ease)}
.why:hover{transform:translateY(-5px); box-shadow:var(--sh-2); border-color:var(--green-soft)}
.why__ico{display:grid; place-items:center; width:56px; height:56px; border-radius:18px; background:linear-gradient(140deg,var(--green-deep),var(--green)); color:#fff; margin-bottom:16px}
.why h3{font-size:1.06rem; margin-bottom:8px}
.why p{font-size:.92rem; color:var(--ink-soft); margin:0}

/* --------------------------------------------------------------- timeline */
.timeline{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(18px,2.4vw,28px); counter-reset:t}
.timeline--tight{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.timeline__item{position:relative; background:#fff; border-radius:var(--r-lg); padding:clamp(22px,2.4vw,30px); box-shadow:var(--sh-1); border-left:4px solid var(--olive)}
.timeline__num{display:inline-block; font-family:var(--ff-head); font-size:2.1rem; color:var(--cream-2); -webkit-text-stroke:1.4px var(--olive); margin-bottom:8px; line-height:1}
.timeline__item h3{font-size:1.05rem; margin-bottom:7px}
.timeline__item p{font-size:.9rem; color:var(--ink-soft); margin:0}

/* -------------------------------------------------------------- solutions */
.sol-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:var(--gap)}
.sol-grid--wide{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.sol{position:relative; display:block; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:4/4.6; box-shadow:var(--sh-2)}
.sol img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease)}
.sol:hover img{transform:scale(1.07)}
.sol__veil{position:absolute; inset:0; background:linear-gradient(180deg,rgba(9,32,19,.05) 30%,rgba(9,32,19,.9))}
.sol__body{position:absolute; inset:auto 0 0 0; padding:clamp(18px,2vw,26px); color:#fff; display:flex; flex-direction:column; gap:8px}
.sol__body strong{font-family:var(--ff-head); font-size:1.22rem}
.sol__body em{font-style:normal; font-size:.87rem; color:#dbe6d3; opacity:.92}
.sol__arrow{align-self:flex-start; display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--olive); color:#fff; margin-top:6px; transition:.3s var(--ease)}
.sol:hover .sol__arrow{background:#fff; color:var(--green-deep); transform:translateX(4px)}

/* ---------------------------------------------------------------- gallery */
.filters{display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin-bottom:clamp(22px,3vw,36px)}
.filters__btn{display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:var(--r-pill); border:1px solid var(--line); background:#fff; font-size:.86rem; font-weight:600; color:var(--ink-soft); transition:.25s var(--ease)}
.filters__btn:hover{border-color:var(--green-soft); color:var(--green-deep)}
.filters__btn.is-active{background:var(--green-deep); border-color:var(--green-deep); color:#fff}
.filters__btn i{font-style:normal; font-size:.72rem; opacity:.75}
.gal{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px}
.gal--masonry{grid-auto-rows:12px}
.gal--masonry .gal__item:nth-child(6n+1){grid-row:span 26}
.gal--masonry .gal__item:nth-child(6n+2){grid-row:span 20}
.gal--masonry .gal__item:nth-child(6n+3){grid-row:span 23}
.gal--masonry .gal__item:nth-child(6n+4){grid-row:span 21}
.gal--masonry .gal__item:nth-child(6n+5){grid-row:span 25}
.gal--masonry .gal__item:nth-child(6n+6){grid-row:span 19}
.gal__item{position:relative; margin:0; border-radius:var(--r); overflow:hidden; background:var(--cream-2); box-shadow:var(--sh-1); transition:opacity .3s var(--ease), transform .3s var(--ease)}
.gal__item.is-hidden{display:none}
.gal__btn{display:block; width:100%; height:100%; padding:0; position:relative; overflow:hidden}
.gal__btn img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease)}
.gal__item:hover .gal__btn img{transform:scale(1.06)}
.gal__zoom{position:absolute; inset:0; display:grid; place-items:center; background:rgba(9,32,19,.42); color:#fff; opacity:0; transition:.3s var(--ease)}
.gal__item:hover .gal__zoom{opacity:1}
.gal__item figcaption{position:absolute; inset:auto 0 0 0; padding:14px 16px; background:linear-gradient(180deg,transparent,rgba(9,32,19,.88)); color:#fff; display:flex; flex-direction:column; gap:2px; opacity:0; transform:translateY(8px); transition:.32s var(--ease)}
.gal__item:hover figcaption{opacity:1; transform:none}
.gal__item figcaption span{font-weight:600; font-size:.92rem}
.gal__item figcaption small{font-size:.72rem; color:#c9dcc5; letter-spacing:.06em; text-transform:uppercase}
.gal__empty{text-align:center; color:var(--ink-soft); margin-top:24px}

.lightbox{position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:clamp(12px,4vw,48px); background:rgba(6,20,12,.94); opacity:0; visibility:hidden; transition:.3s var(--ease)}
.lightbox.is-open{opacity:1; visibility:visible}
.lightbox img{max-width:min(1100px,94vw); max-height:80vh; width:auto; border-radius:var(--r); box-shadow:var(--sh-3)}
.lightbox__cap{color:#e6efe0; margin-top:14px; text-align:center; font-size:.92rem}
.lightbox__close{position:absolute; top:18px; right:22px; color:#fff; font-size:2.4rem; line-height:1; padding:6px 14px; border-radius:50%}
.lightbox__nav{position:absolute; top:50%; transform:translateY(-50%); color:#fff; width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.12); display:grid; place-items:center}
.lightbox__nav:hover{background:rgba(255,255,255,.25)}
.lightbox__nav--prev{left:clamp(8px,2vw,26px)}
.lightbox__nav--next{right:clamp(8px,2vw,26px); transform:translateY(-50%) rotate(180deg)}

/* ----------------------------------------------------------------- slider */
.slider{position:relative; max-width:960px; margin-inline:auto}
.slider__track{display:flex; gap:var(--gap); overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding:6px 2px 22px}
.slider__track::-webkit-scrollbar{display:none}
.tst{flex:0 0 100%; scroll-snap-align:center; background:#fff; border-radius:var(--r-lg); padding:clamp(24px,3vw,42px); box-shadow:var(--sh-2); margin:0; border-top:4px solid var(--olive)}
.tst__card{flex:0 0 100%; scroll-snap-align:center; background:#fff; border-radius:var(--r-lg); padding:clamp(24px,3vw,42px); box-shadow:var(--sh-2); margin:0; border-top:4px solid var(--olive)}
.slider__track .tst,.slider__track .tst__card{flex:0 0 min(100%,820px)}
.tst blockquote,.tst__card blockquote{margin:0 0 22px; position:relative}
.tst blockquote svg,.tst__card blockquote svg{color:var(--olive); margin-bottom:12px}
.tst blockquote p,.tst__card blockquote p{font-size:clamp(1rem,1.5vw,1.18rem); color:var(--ink); font-family:var(--ff-head); line-height:1.55; margin:0}
.tst figcaption,.tst__card figcaption{display:flex; align-items:center; gap:14px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:18px}
.tst figcaption img,.tst__card figcaption img{width:56px; height:56px; border-radius:50%; object-fit:cover}
.tst figcaption span,.tst__card figcaption span{display:flex; flex-direction:column; line-height:1.35}
.tst figcaption strong,.tst__card figcaption strong{font-size:.98rem}
.tst figcaption small,.tst__card figcaption small{font-size:.8rem; color:var(--ink-soft)}
.tst figcaption em,.tst__card figcaption em{font-style:normal; font-size:.74rem; color:var(--olive); letter-spacing:.05em; text-transform:uppercase}
.tst__stars{margin-left:auto; display:flex; gap:2px; color:#e0a92b}
.slider__ctrls{display:flex; align-items:center; justify-content:center; gap:16px}
.slider__btn{width:46px; height:46px; border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--green-deep); display:grid; place-items:center; transition:.25s var(--ease)}
.slider__btn:hover{background:var(--green-deep); color:#fff; border-color:var(--green-deep)}
.slider__btn--next svg{transform:rotate(-90deg)}
.slider__btn svg{transform:rotate(90deg)}
.slider__dots{display:flex; gap:8px}
.slider__dots button{width:9px; height:9px; border-radius:50%; background:var(--line); transition:.25s}
.slider__dots button.is-active{background:var(--olive); width:26px; border-radius:var(--r-pill)}

/* ------------------------------------------------------------------- blog */
.bloggrid{display:grid; grid-template-columns:minmax(0,2.1fr) minmax(0,1fr); gap:clamp(26px,4vw,46px); align-items:start}
.bloggrid__note{display:inline-flex; align-items:center; gap:9px; background:var(--cream-2); padding:10px 16px; border-radius:var(--r-pill); font-size:.86rem; color:var(--ink-soft); margin-bottom:22px}
.bloggrid__side{display:grid; gap:22px; position:sticky; top:calc(var(--head-h) + 18px)}
.side-box{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(18px,2vw,26px); box-shadow:var(--sh-1)}
.side-box h3{font-size:1.02rem; margin-bottom:14px; padding-bottom:11px; border-bottom:1px solid var(--line)}
.side-box--green{background:linear-gradient(150deg,var(--green-deep),var(--green)); color:#e6efe0; border:0}
.side-box--green h3{color:#fff; border-color:rgba(255,255,255,.2)}
.side-box--green p{color:#cfe0d4; font-size:.88rem}
.side-box__ico{display:grid; place-items:center; width:50px; height:50px; border-radius:14px; background:rgba(255,255,255,.14); color:#fff; margin-bottom:14px}
.side-box__phone{display:block; font-family:var(--ff-head); font-size:1.24rem; color:#fff; margin-bottom:6px}
.side-list li+li{margin-top:4px}
.side-list a{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; font-size:.92rem; font-weight:600; color:var(--ink)}
.side-list a span{display:grid; place-items:center; width:30px; height:30px; border-radius:9px; background:var(--cream-2); color:var(--green-deep); flex:none}
.side-list a svg:last-child{margin-left:auto; opacity:.45}
.side-list a:hover{background:var(--cream-2); color:var(--green-deep)}
.side-list--plain a{justify-content:space-between}
.side-list--plain a i{font-style:normal; font-size:.76rem; background:var(--cream-2); padding:2px 9px; border-radius:var(--r-pill); color:var(--ink-soft)}
.side-list--plain a.is-current{background:var(--green-deep); color:#fff}
.side-list--plain a.is-current i{background:rgba(255,255,255,.2); color:#fff}
.searchbox{display:flex; gap:8px}
.searchbox input{flex:1; min-width:0; padding:12px 15px; border:1px solid var(--line); border-radius:var(--r-pill); background:var(--cream)}
.searchbox button{width:46px; height:46px; border-radius:50%; background:var(--green-deep); color:#fff; display:grid; place-items:center}
.mini-list li+li{margin-top:14px; padding-top:14px; border-top:1px solid var(--line)}
.mini-list a{display:flex; gap:12px; align-items:center; color:var(--ink)}
.mini-list img{width:72px; height:58px; object-fit:cover; border-radius:9px; flex:none}
.mini-list span{display:flex; flex-direction:column; gap:4px}
.mini-list strong{font-size:.88rem; line-height:1.35; font-weight:600}
.mini-list small{font-size:.76rem; color:var(--ink-soft)}
.mini-list a:hover strong{color:var(--green)}
.pager{display:flex; gap:8px; justify-content:center; margin-top:34px}
.pager__i{display:grid; place-items:center; min-width:42px; height:42px; border-radius:12px; border:1px solid var(--line); background:#fff; font-weight:600; font-size:.9rem}
.pager__i.is-active{background:var(--green-deep); color:#fff; border-color:var(--green-deep)}

.article{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(20px,3vw,44px); box-shadow:var(--sh-1)}
.article__meta{display:flex; flex-wrap:wrap; gap:18px; font-size:.82rem; color:var(--ink-soft); margin-bottom:20px; padding-bottom:18px; border-bottom:1px solid var(--line)}
.article__meta li{display:flex; align-items:center; gap:7px}
.prose{color:var(--ink-soft); font-size:1.02rem}
.prose h2,.prose h3{color:var(--green-deep); margin:1.5em 0 .6em}
.prose h2{font-size:clamp(1.2rem,2vw,1.55rem)}
.prose ul{margin:0 0 1.2em}
.prose ul li{position:relative; padding-left:22px; margin-bottom:8px}
.prose ul li::before{content:""; position:absolute; left:2px; top:11px; width:8px; height:8px; border-radius:2px; background:var(--olive); transform:rotate(45deg)}
.prose--article p:first-child{font-size:1.08rem; color:var(--ink)}
.prose strong{color:var(--ink)}
.tags{display:flex; flex-wrap:wrap; gap:8px; margin:26px 0}
.tags li{background:var(--cream-2); color:var(--ink-soft); padding:6px 13px; border-radius:var(--r-pill); font-size:.78rem}
.share{display:flex; align-items:center; gap:10px; margin:26px 0; padding:16px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); flex-wrap:wrap}
.share strong{font-size:.88rem}
.share a{display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--cream-2); color:var(--green-deep)}
.share a:hover{background:var(--green-deep); color:#fff}

/* --------------------------------------------------------------- accordion */
.faq-wrap{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr); gap:clamp(26px,4vw,58px); align-items:start}
.faq-help{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}
.acc{display:grid; gap:12px}
.acc__item{background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; transition:.3s var(--ease)}
.acc__item.is-open{border-color:var(--green-soft); box-shadow:var(--sh-2)}
.acc__h{margin:0}
.acc__btn{width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; text-align:left; padding:clamp(16px,2vw,22px); font-size:1rem; font-weight:600; color:var(--green-deep); font-family:var(--ff-head)}
.acc__btn svg{transition:transform .3s var(--ease); color:var(--olive)}
.acc__item.is-open .acc__btn svg{transform:rotate(180deg)}
.acc__panel{max-height:0; overflow:hidden; transition:max-height .35s var(--ease)}
.acc__inner{padding:0 clamp(16px,2vw,22px) clamp(18px,2vw,24px); color:var(--ink-soft); font-size:.96rem}

/* ------------------------------------------------------------------ forms */
.contact{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:clamp(26px,4vw,50px); align-items:start}
.contact__form{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(20px,3vw,40px); box-shadow:var(--sh-1)}
.contact__h{font-size:clamp(1.2rem,2vw,1.6rem)}
.contact__side{display:grid; gap:22px}
.form{display:grid; gap:18px}
.form__row{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.field{display:flex; flex-direction:column; gap:7px}
.field>span{font-size:.86rem; font-weight:600; color:var(--ink)}
.field>span i{color:#c0472b; font-style:normal}
.field input,.field select,.field textarea{
  padding:13px 16px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--cream); transition:.25s var(--ease); width:100%;
}
.field textarea{resize:vertical; min-height:120px}
.field input:focus,.field select:focus,.field textarea:focus{outline:0; border-color:var(--green-soft); background:#fff; box-shadow:0 0 0 4px rgba(47,122,68,.1)}
.field em{font-size:.78rem; color:#c0472b; font-style:normal}
.field [aria-invalid="true"]{border-color:#c0472b; background:#fdf3f1}
.form__foot{display:flex; gap:12px; flex-wrap:wrap}
.form__privacy{display:flex; align-items:center; gap:8px; font-size:.78rem; color:var(--ink-soft); margin:0}
.alert{display:flex; gap:14px; padding:18px 20px; border-radius:var(--r); margin-bottom:22px; align-items:flex-start}
.alert h3{margin-bottom:6px; font-size:1.05rem}
.alert p{margin:0 0 10px; font-size:.9rem}
.alert--ok{background:#eaf5ec; border:1px solid #bfe0c6; color:#14532d}
.alert--bad{background:#fdf1ee; border:1px solid #f0c7bc; color:#8a2c15; align-items:center}
.alert--bad p{margin:0}
.alert__ico{display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:#fff; flex:none}
.alert__note{font-size:.86rem; color:#3f5744}
.map-preview{position:relative; display:block; border-radius:var(--r); overflow:hidden}
.map-preview img{aspect-ratio:16/9; object-fit:cover}
.map-preview span{position:absolute; inset:auto 12px 12px 12px; display:inline-flex; align-items:center; gap:8px; background:rgba(9,32,19,.85); color:#fff; padding:9px 15px; border-radius:var(--r-pill); font-size:.84rem; backdrop-filter:blur(4px)}

/* ----------------------------------------------------------------- detail */
.detail{display:grid; grid-template-columns:minmax(0,2.2fr) minmax(0,1fr); gap:clamp(26px,4vw,48px); align-items:start}
.detail__main{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(18px,2.6vw,34px); box-shadow:var(--sh-1)}
.detail__img{width:100%; border-radius:var(--r); aspect-ratio:16/10; object-fit:cover; margin-bottom:24px}
.detail__h{font-size:1.16rem; margin:30px 0 18px; padding-top:22px; border-top:1px solid var(--line)}
.detail__cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:30px}
.detail__side{display:grid; gap:22px; position:sticky; top:calc(var(--head-h) + 18px)}

/* ----------------------------------------------------------------- footer */
.foot{background:var(--green-deep); color:#c9dcc6; padding-top:clamp(44px,6vw,74px)}
.foot__grid{display:grid; grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr)) minmax(0,1.3fr); gap:clamp(24px,3vw,44px)}
.foot__logo{background:#fff; padding:10px 14px; border-radius:var(--r); height:auto; width:190px; margin-bottom:16px}
.foot__col p{font-size:.88rem; line-height:1.7}
.foot h3{color:#fff; font-size:1rem; margin-bottom:16px}
.foot__col ul li+li{margin-top:9px}
.foot__col ul a{display:inline-flex; align-items:center; gap:8px; color:#c9dcc6; font-size:.88rem}
.foot__col ul a:hover{color:#fff; gap:12px}
.foot__contact li{display:flex; gap:10px; align-items:flex-start; font-size:.88rem}
.foot__contact svg{margin-top:3px; color:var(--olive); flex:none}
.foot__soc{display:flex; gap:9px; margin-top:18px}
.foot__soc a{display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.1); color:#fff}
.foot__soc a:hover{background:var(--olive)}
.foot__soc a.is-wa{background:#25d366; color:#08321b}
.foot__col .btn{margin-top:18px}
.foot__bottom{display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-top:clamp(30px,4vw,50px); padding:20px 0; border-top:1px solid rgba(255,255,255,.13); font-size:.82rem}
.foot__bottom p{margin:0}
.foot__meta{opacity:.7}

.wa-float{
  position:fixed; right:clamp(14px,2vw,24px); bottom:clamp(14px,2vw,24px); z-index:90;
  display:inline-flex; align-items:center; gap:10px; background:#25d366; color:#fff;
  padding:14px; border-radius:var(--r-pill); box-shadow:0 12px 30px rgba(37,211,102,.36);
  font-weight:600; font-size:.88rem; transition:.3s var(--ease);
}
.wa-float:hover{color:#fff; transform:translateY(-3px)}
.wa-float__txt{display:none; padding-right:6px}
.wa-float:hover .wa-float__txt{display:inline}
.to-top{
  position:fixed; right:clamp(14px,2vw,24px); bottom:88px; z-index:89; width:44px; height:44px;
  border-radius:50%; background:var(--green-deep); color:#fff; display:grid; place-items:center;
  opacity:0; visibility:hidden; transition:.3s var(--ease); box-shadow:var(--sh-2);
}
.to-top svg{transform:rotate(180deg)}
.to-top.is-on{opacity:1; visibility:visible}

/* -------------------------------------------------------------------- cta */
.cta{position:relative; padding:clamp(46px,7vw,96px) 0; background-image:linear-gradient(105deg,rgba(9,32,19,.94),rgba(9,32,19,.7)),var(--cta-img); background-size:cover; background-position:center; color:#fff}
.cta__in{display:flex; align-items:center; justify-content:space-between; gap:clamp(22px,3vw,44px); flex-wrap:wrap}
.cta h2{color:#fff; margin-bottom:8px; max-width:24ch}
.cta p{color:#d9e5d2; margin:0; max-width:60ch}
.cta__btns{display:flex; gap:12px; flex-wrap:wrap}

/* ----------------------------------------------------------- 14. utilities */
[data-anim]{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
[data-anim].is-in{opacity:1; transform:none}
.ratio{position:relative; overflow:hidden}
.mt-0{margin-top:0}
.hidden{display:none !important}

/* ----------------------------------------------------------- 15. responsive */
@media (max-width:1180px){
  .nav__list{gap:12px}
  .brand__txt small{display:none}
}
@media (max-width:1024px){
  .nav,.site-head__cta{display:none}
  .burger{display:grid}
  .hero__in{grid-template-columns:1fr; gap:34px}
  .hero__panel{grid-template-columns:1fr 1fr; gap:14px}
  .hero__stat{flex-direction:column; gap:2px; align-items:flex-start; border-bottom:0; padding-bottom:0}
  .about,.faq-wrap,.contact,.detail,.bloggrid{grid-template-columns:1fr}
  .bloggrid__side,.detail__side{position:static}
  .about__media{padding-bottom:34px}
  .foot__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  :root{--sp-sec:52px}
  .topbar__list li.topbar__hide{display:none}
  .topbar{font-size:.76rem}
  .gal--masonry{grid-auto-rows:auto}
  .gal--masonry .gal__item{grid-row:auto !important}
  .gal{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
  .sol{aspect-ratio:4/4.2}
  .stats__item{border-right:0; border-bottom:1px solid rgba(255,255,255,.13); padding-bottom:20px}
  .stats__item:last-child{border-bottom:0}
  .foot__grid{grid-template-columns:1fr}
  .cta__in{flex-direction:column; align-items:flex-start}
}
@media (max-width:560px){
  body{font-size:15.4px}
  .form__row{grid-template-columns:1fr}
  .hero{min-height:auto; padding-bottom:34px}
  .hero__panel{grid-template-columns:1fr}
  .hero__btns .btn{width:100%}
  .about__img2{position:static; width:100%; margin-top:12px; border-width:0; border-radius:var(--r)}
  .about__media{padding-bottom:0}
  .about__badge{left:10px; top:14px; padding:10px 14px}
  .about__badge strong{font-size:1.4rem}
  .ticks{grid-template-columns:1fr}
  .filters{gap:7px}
  .filters__btn{padding:9px 14px; font-size:.8rem}
  .brand img{height:38px}
  .brand__txt strong{font-size:.96rem}
  .slider__track .tst,.slider__track .tst__card{flex:0 0 92%}
  .foot__bottom{flex-direction:column; gap:6px}
  .article{padding:18px 16px}
  .contact__form{padding:18px 16px}
}

/* --------------------------------------------------------------- 16. 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}
  [data-anim]{opacity:1 !important; transform:none !important}
  .hero__media img{animation:none}
}
@media print{
  .site-head,.topbar,.drawer,.drawer-veil,.wa-float,.to-top,.foot,.cta{display:none !important}
  body{background:#fff}
}

/* ===========================================================================
   17. CLASSIC REDESIGN LAYER
   Adds a warm rust/gold accent, numbered "ticket" cards, hexagon icon badges
   and a dark feature band — so sections read as a designed identity rather
   than a generic green agri-template. Pure CSS, no markup changes needed.
   =========================================================================== */

/* corner accents on section shells */
.sec--about,.sec--sol{overflow:hidden}
.sec--about::before,.sec--sol::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  width:240px; height:240px; top:-60px; right:-60px; opacity:.07;
  background:var(--olive); border-radius:0% 100% 0% 100%/0% 100% 0% 100%;
}

/* ---- numbered "ticket" cards (services + blog use .card) ------------- */
.grid--3,.grid--4{counter-reset:cardnum whynum solnum}
.card{counter-increment:cardnum; position:relative; border-bottom:3px solid transparent; transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease)}
.card:hover{border-bottom-color:var(--rust)}
.card--post:hover{border-bottom-color:var(--green)}
.card__media{position:relative}
.card__media::after{
  content:counter(cardnum,decimal-leading-zero); position:absolute; top:14px; right:14px; z-index:3;
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--ff-head); font-weight:700; font-size:.78rem; color:#fff;
  background:var(--rust); border:2px solid rgba(255,255,255,.75); box-shadow:0 8px 18px rgba(122,47,20,.35);
}
.card--post .card__media::after{background:var(--green-deep)}
.card__ico{background:linear-gradient(135deg,var(--green-deep),var(--green)); color:#fff; box-shadow:0 10px 22px rgba(20,67,42,.28); transition:transform .35s var(--ease)}
.card:hover .card__ico{transform:rotate(-8deg) scale(1.07)}

/* ---- hexagon icon badges for "why" / value cards ---------------------- */
.why{position:relative}
.why::before{
  content:counter(whynum,decimal-leading-zero); counter-increment:whynum;
  position:absolute; top:18px; right:20px; font-family:var(--ff-head); font-weight:700;
  font-size:.78rem; letter-spacing:.05em; color:var(--rust); opacity:.55;
}
.why__ico{
  width:62px; height:62px; border-radius:0;
  clip-path:polygon(25% 4%,75% 4%,100% 50%,75% 96%,25% 96%,0% 50%);
  background:linear-gradient(135deg,var(--rust),var(--gold)); color:#fff;
  box-shadow:0 10px 24px rgba(122,47,20,.3); transition:transform .35s var(--ease);
}
.why:hover .why__ico{transform:rotate(8deg) scale(1.06)}

/* dark, textured feature band for the homepage "why" section — mirrors a
   classic organic-brand feature block instead of a plain light strip */
.sec--why{
  background:
    linear-gradient(160deg,rgba(9,20,13,.94),rgba(35,20,10,.95)),
    var(--dots) 0 0/18px 18px;
  background-color:var(--ink);
}
.sec--why .eyebrow{color:var(--gold)}
.sec--why .eyebrow::before{background:var(--gold)}
.sec--why h2{color:#fff}
.sec--why .sec__head p{color:#cfd9ca}
.sec--why .why{background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(6px); box-shadow:none}
.sec--why .why:hover{border-color:var(--gold); box-shadow:0 22px 48px rgba(0,0,0,.35); transform:translateY(-5px)}
.sec--why .why h3{color:#fff}
.sec--why .why p{color:#d7e1d1}
.sec--why .why::before{color:var(--gold); opacity:.75}

/* ---- process timeline — filled numeral instead of outline stroke ------ */
.timeline__item{border-left:4px solid var(--gold)}
.timeline__num{
  display:inline-flex; align-items:center; justify-content:center;
  width:50px; height:50px; margin-bottom:10px; border-radius:50%;
  background:linear-gradient(135deg,var(--rust),var(--rust-deep)); color:#fff;
  -webkit-text-stroke:0; font-size:1.22rem; box-shadow:0 10px 22px rgba(122,47,20,.3);
}

/* ---- solution overlay cards — corner numeral + gold title rule -------- */
.sol-grid{counter-reset:solnum}
.sol{counter-increment:solnum}
.sol::before{
  content:counter(solnum,decimal-leading-zero); position:absolute; top:14px; right:14px; z-index:2;
  width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.4); backdrop-filter:blur(6px);
  color:#fff; font-family:var(--ff-head); font-weight:700; font-size:.76rem;
}
.sol__body strong{position:relative; padding-bottom:10px; display:inline-block}
.sol__body strong::after{content:""; position:absolute; left:0; bottom:0; width:32px; height:3px; border-radius:2px; background:var(--gold)}
.sol__arrow{background:var(--rust)}
.sol:hover .sol__arrow{background:var(--gold); color:var(--ink)}

/* ---- testimonials — large classic quote mark + gold top rule ---------- */
.tst,.tst__card{border-top-color:var(--gold); overflow:hidden}
.tst::after,.tst__card::after{
  content:"\201C"; position:absolute; top:-26px; right:22px; z-index:0; pointer-events:none;
  font-family:var(--ff-head); font-size:8.6rem; line-height:1; color:var(--cream-2);
}
.tst blockquote,.tst__card blockquote,.tst figcaption,.tst__card figcaption{position:relative; z-index:1}
.tst blockquote svg,.tst__card blockquote svg{color:var(--gold)}

@media (max-width:560px){
  .card__media::after,.sol::before{width:28px; height:28px; font-size:.68rem}
  .why__ico{width:52px; height:52px}
  .tst::after,.tst__card::after{font-size:6rem; top:-14px; right:12px}
}