:root{--g:#0f4a2a;--g2:#1f6b3d;--gold:#b87a14;--bg:#fbfcf9;--sage:#e8f0e6;--ink:#1a2a20;--e:cubic-bezier(.7,0,.2,1)}
*{box-sizing:border-box;margin:0}html{scroll-behavior:smooth}
body{font:17px/1.65 'Inter',system-ui,sans-serif;color:var(--ink);background:var(--bg);overflow-x:hidden}
h1,h2,h3{font-family:'Fraunces',Georgia,serif;color:var(--g);line-height:1.12;font-weight:600}
h1{font-size:clamp(2.5rem,6.5vw,4.8rem)}h2{font-size:clamp(1.8rem,4vw,2.8rem);margin-bottom:.6em}h3{font-size:1.3rem;margin-bottom:.3em}
a{color:inherit}img{max-width:100%}
.wrap{max-width:1120px;margin:auto;padding:0 22px}.sec{padding:84px 0}.sage{background:var(--sage)}
.lead{font-size:1.15rem;max-width:60ch;color:#40554a}
.btn{display:inline-block;padding:14px 26px;border-radius:99px;background:var(--g);color:#fff;text-decoration:none;font-weight:600;border:2px solid var(--g);cursor:pointer;font-size:1rem;transition:transform .2s,background .2s}
.btn:hover{transform:translateY(-2px);background:var(--g2)}.btn:active{transform:scale(.97)}
.btn.gold{background:var(--gold);border-color:var(--gold)}.btn.ghost{background:none;color:var(--g)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
#bar{position:fixed;top:0;left:0;height:3px;background:var(--gold);width:0;z-index:60}
#ann{background:var(--g);color:#fff;text-align:center;padding:9px 14px;font-size:.95rem}#ann a{color:#f3d58f}
header{position:sticky;top:0;z-index:50;transition:.3s;background:rgba(251,252,249,.6)}
header.sc{background:rgba(251,252,249,.85);backdrop-filter:blur(14px);box-shadow:0 1px 18px rgba(15,74,42,.12)}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:76px}
header img{height:52px}nav{display:flex;gap:26px;align-items:center}
nav a{text-decoration:none;font-weight:500;position:relative}nav a.on,nav a:hover{color:var(--g)}
nav a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-4px;height:2px;width:100%;background:var(--gold);transform:scaleX(0);transition:.3s;transform-origin:left}
nav a.on::after,nav a:hover::after{transform:scaleX(1)}nav .btn{padding:10px 20px;color:#fff}
#mb{display:none;background:none;border:0;font-size:1.8rem;color:var(--g)}
.hero{padding:70px 0 90px;overflow:hidden}.hero .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
.w{display:inline-block;overflow:hidden;vertical-align:bottom;margin-right:.25em}
.w>span{display:inline-block;transform:translateY(110%);animation:up .9s var(--e) forwards;animation-delay:calc(.5s + var(--i)*.09s)}
@keyframes up{to{transform:none}}
.fi{opacity:0;animation:fi .9s ease forwards;animation-delay:1.3s}@keyframes fi{to{opacity:1}}
.hero .lead{margin:22px 0 30px}.hero .btns{display:flex;gap:14px;flex-wrap:wrap}
.hero .art{animation:fl 6s ease-in-out infinite}.hero .art img{width:100%;max-width:420px;margin:auto;display:block}
@keyframes fl{50%{transform:translateY(-14px)}}
.strip{background:var(--g);color:#fff}.strip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:26px 22px;text-align:center}
.strip b{font:600 1.5rem 'Fraunces',serif;color:#f3d58f;display:block}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));gap:22px;margin-top:30px}
.card{background:#fff;border-radius:20px;padding:28px;border:1px solid #dbe6d8;transition:transform .3s,box-shadow .3s}
.card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(15,74,42,.14)}
.card small{color:var(--gold);font-weight:600}.card ul{margin:12px 0 20px 18px}.card li{margin:3px 0}
.card .btn{padding:10px 20px;font-size:.95rem}
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));gap:22px;margin-top:30px;position:relative}
.steps div{counter-increment:s;padding-top:60px;position:relative}
.steps div::before{content:counter(s);position:absolute;top:0;left:0;width:46px;height:46px;border-radius:50%;background:var(--gold);color:#fff;display:grid;place-items:center;font:600 1.2rem 'Fraunces',serif}
.tabs{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0}.tabs button{padding:9px 20px;border-radius:99px;border:2px solid var(--g);background:none;color:var(--g);font:600 .95rem 'Inter';cursor:pointer;transition:.2s}
.tabs button.on{background:var(--g);color:#fff}
.empty{border:2px dashed #b9cfb5;border-radius:20px;padding:34px;text-align:center;color:#51685a;margin-top:24px}
.ph{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;margin-bottom:14px}
details{background:#fff;border:1px solid #dbe6d8;border-radius:16px;padding:18px 22px;margin-bottom:12px}
summary{cursor:pointer;font-weight:600;color:var(--g);list-style:none;display:flex;justify-content:space-between}
summary::after{content:"+";font-size:1.4rem;line-height:1;transition:transform .3s}details[open] summary::after{transform:rotate(45deg)}
details p{margin-top:10px;animation:fi .4s forwards;animation-delay:0s}
.two{display:grid;grid-template-columns:1fr 1fr;gap:40px}
form{display:grid;gap:14px}input,select,textarea{width:100%;padding:14px;border-radius:12px;border:1px solid #b9cfb5;font:inherit;background:#fff}
.cta{background:var(--g);color:#fff;text-align:center;border-radius:28px;padding:56px 22px}.cta h2{color:#fff}
footer{background:#0b3820;color:#cfe0d3;padding:50px 0 30px;font-size:.95rem}footer a{text-decoration:none}footer a:hover{color:#f3d58f}
footer .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px}footer img{height:70px;background:#fff;border-radius:12px;padding:6px;margin-bottom:12px}
footer p.c{grid-column:1/-1;text-align:center;opacity:.7;margin-top:20px}
#wa{position:fixed;right:18px;bottom:18px;z-index:55;width:60px;height:60px;border-radius:50%;background:#25d366;display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.25)}
#wa::before{content:"";position:absolute;inset:0;border-radius:50%;border:3px solid #25d366;animation:pr 2.2s infinite}
@keyframes pr{to{transform:scale(1.7);opacity:0}}#wa svg{width:32px;fill:#fff}
#cur{position:fixed;inset:0;background:var(--g);z-index:99;pointer-events:none;transform:translateY(-100%);animation:out .7s var(--e) forwards}
#cur.go{animation:in .45s var(--e) forwards}@keyframes out{from{transform:none}to{transform:translateY(-100%)}}
@keyframes in{from{transform:translateY(100%)}to{transform:none}}
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s,transform .8s}.rv.on{opacity:1;transform:none}
.sr{position:absolute;left:-999px}
@media(max-width:820px){.hero .wrap,.two,footer .wrap{grid-template-columns:1fr}.hero .art{order:-1;max-width:220px;margin:auto}
.strip .wrap{grid-template-columns:1fr 1fr}#mb{display:block}
nav{position:fixed;inset:76px 0 auto 0;background:#fff;flex-direction:column;padding:24px;gap:18px;transform:translateY(-130%);transition:transform .4s var(--e);box-shadow:0 20px 30px rgba(0,0,0,.1)}
nav.open{transform:none}.sec{padding:60px 0}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01s!important;animation-delay:0s!important;transition:none!important}.rv,.w>span,.fi{opacity:1;transform:none}}

/* v2: growth animation, responsive fixes */
:root{--e2:cubic-bezier(.22,1,.36,1)}
.hero h1{display:flex;flex-direction:column;gap:10px;font-size:1rem}
.brand{font:600 clamp(1.05rem,3vw,1.5rem) 'Inter',sans-serif;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);opacity:0;animation:bs 1s .1s var(--e2) forwards}
@keyframes bs{from{opacity:0;letter-spacing:.8em}to{opacity:1}}
.slg{display:flex;flex-wrap:wrap;gap:0 .3em;font-size:clamp(2.5rem,9vw,4.9rem);line-height:1.05}
.slg span{display:inline-block;opacity:0;transform:scale(.5) translateY(36px);filter:blur(12px);animation:gr 1s var(--e2) forwards}
.slg span:nth-child(1){color:#0f4a2a;animation-delay:.5s}.slg span:nth-child(2){color:#2f8a50;animation-delay:1s}.slg span:nth-child(3){color:#b87a14;animation-delay:1.5s}
@keyframes gr{to{opacity:1;transform:none;filter:none}}
.hero .fi{animation-delay:2s}.sub{font:600 1.3rem 'Fraunces',serif;color:var(--g2);margin-top:18px}.hero .lead{margin-top:8px}
.hero .art{animation:none}.hero .art img{clip-path:inset(100% 0 0 0);animation:gw 1.9s .3s var(--e2) forwards,fl 6s 2.3s ease-in-out infinite}
@keyframes gw{to{clip-path:inset(0)}}
.rv{transform:scale(.94) translateY(16px);transition:opacity .7s,transform .8s var(--e2)}.rv.on{transform:none}
#cur{transform:none;clip-path:circle(0% at 50% 50%);animation:co .9s var(--e2) forwards}
#cur.go{animation:ci .55s var(--e2) forwards}
@keyframes co{from{clip-path:circle(150% at 50% 50%)}to{clip-path:circle(0% at 50% 50%)}}
@keyframes ci{from{clip-path:circle(0% at 50% 50%)}to{clip-path:circle(150% at 50% 50%)}}
input,select,textarea{font-size:16px}.tabs{overflow-x:auto}
@media(max-width:820px){
header .wrap{height:64px}header img{height:42px}
nav{position:absolute;inset:100% 0 auto 0;transform:none;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
nav.open{opacity:1;visibility:visible}
.hero{padding:30px 0 56px}.hero .art{max-width:170px}.hero .btns .btn{width:100%;text-align:center}
.sec{padding:52px 0}.cta{padding:40px 18px;border-radius:22px}.card{padding:22px}
.strip .wrap{padding:20px 16px}footer .wrap{gap:22px}}
@media(prefers-reduced-motion:reduce){.slg span,.brand,.hero .art img{opacity:1;transform:none;filter:none;clip-path:none}#cur{display:none}}

/* v3: staggered panel transition */
#cur,#cur.go{clip-path:none;animation:none;transform:none;display:flex}
#cur i{flex:1;background:var(--g);box-shadow:0 0 0 1px var(--g);transform-origin:top;transform:scaleY(0);animation:so .8s var(--e2) forwards;animation-delay:calc(.15s + var(--n)*.07s)}
#cur.go i{transform-origin:bottom;animation:si .55s var(--e2) forwards;animation-delay:calc(var(--n)*.07s)}
#cur b{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font:600 clamp(1.5rem,6vw,3rem) 'Fraunces',serif;text-align:center;padding:0 20px;opacity:0;animation:bo .9s forwards}
#cur.go b{animation:bi .4s .3s forwards}
#cur b::after{content:"";position:absolute;margin-top:3.4rem;width:70px;height:3px;background:var(--gold);border-radius:3px}
@keyframes so{from{transform:scaleY(1)}to{transform:scaleY(0)}}
@keyframes si{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes bo{0%{opacity:1}55%{opacity:1}100%{opacity:0}}
@keyframes bi{to{opacity:1}}

/* v4: content is visible by default; animations only enhance */
.rv{opacity:1;transform:none;transition:none}
.js .rv{opacity:0;transform:scale(.94) translateY(16px);transition:opacity .7s,transform .8s var(--e2)}
.js .rv.on{opacity:1;transform:none}
.fi,.hero .fi{opacity:1;animation:fib .9s ease 2s backwards}
@keyframes fib{from{opacity:0}}
.brand{opacity:1;animation:bs 1s .1s var(--e2) backwards}
.slg span{opacity:1;transform:none;filter:none;animation:gr2 1s var(--e2) backwards}
@keyframes gr2{from{opacity:0;transform:scale(.5) translateY(36px);filter:blur(12px)}}
.hero .art img{clip-path:none;animation:gw2 1.9s .3s var(--e2) backwards,fl 6s 2.3s ease-in-out infinite}
@keyframes gw2{from{clip-path:inset(100% 0 0 0)}}

/* v5 fix: transition layer must be transparent */
#cur,#cur.go{background:none}
#cur i{box-shadow:none;margin-right:-1px}