/* ==========================================================================
   TuinToppersPro — Motion
   One animation per section, each one about the work that section describes:
   the garden edge in the hero, the weeds coming out of the joints, the jet
   sweeping a driveway clean, the shrub taken back into shape, the pane wiped
   streak-free, the path through the werkwijze, the plants on the packages
   and the hedge closing the page.

   Loaded on every page. Progressive enhancement only — if this file never
   arrives the site looks and works exactly as it did before.
   ========================================================================== */

:root{
    --tt-ease:cubic-bezier(.22,1,.36,1);
    --tt-leaf:#3e9a4f;
    --tt-leaf-dark:#1c5a2a;
    --tt-water:#7fb6d6;
}

/* ==========================================================================
   1. THE GARDEN EDGE — hero and page heroes
   Grass along the bottom that sways, and leaves drifting through.
   ========================================================================== */

.hero, .pagehero, .cta{position:relative;}
.hero > *, .pagehero > *, .cta > *{position:relative;z-index:1;}

.tt-edge{
    position:absolute;left:0;right:0;bottom:0;height:100%;
    overflow:hidden;pointer-events:none;z-index:0;
}
.tt-grass{
    position:absolute;left:0;right:0;bottom:0;height:74px;
    display:flex;align-items:flex-end;gap:5px;padding:0 6px;
}
.tt-grass i{
    flex:1;display:block;min-width:2px;border-radius:60% 60% 0 0 / 22% 22% 0 0;
    height:var(--h);
    background:linear-gradient(180deg,rgba(62,154,79,.32),rgba(28,90,42,.16));
    transform-origin:50% 100%;transform:scaleY(.4);
    transition:transform 1.1s var(--tt-ease);
    transition-delay:calc(var(--i) * 26ms);
}
.tt-edge.is-in .tt-grass i{transform:scaleY(1);}
.tt-edge.is-live .tt-grass i{
    animation:tt-sway 4.6s ease-in-out infinite;
    animation-delay:calc(var(--i) * 90ms);
}
@keyframes tt-sway{
    0%,100%{transform:scaleY(1) skewX(-3.5deg);}
    50%    {transform:scaleY(1.04) skewX(3.5deg);}
}
.tt-grass i:nth-child(5n+1){
    background:linear-gradient(180deg,rgba(42,122,58,.36),rgba(28,90,42,.18));
}
.tt-grass i:nth-child(7n+3){
    background:linear-gradient(180deg,rgba(217,168,42,.26),rgba(217,168,42,.08));
}

/* leaves drifting through the section */
.tt-leaf{
    position:absolute;display:block;width:var(--s);height:auto;opacity:0;
}
.tt-leaf svg{display:block;width:100%;height:auto;}
.tt-leaf path{fill:rgba(62,154,79,.3);}
.tt-leaf:nth-of-type(3n) path{fill:rgba(217,168,42,.3);}
.tt-leaf:nth-of-type(4n) path{fill:rgba(28,90,42,.24);}
.tt-edge.is-live .tt-leaf{animation:tt-drift var(--d) linear infinite;animation-delay:var(--o);}
@keyframes tt-drift{
    0%  {transform:translate(-8vw,-30px) rotate(0deg);   opacity:0;}
    10% {opacity:1;}
    88% {opacity:1;}
    100%{transform:translate(108vw,120px) rotate(420deg);opacity:0;}
}

/* ==========================================================================
   2. THE SERVICE CARDS — every icon does its own job
   ========================================================================== */

.bubble__icon{position:relative;overflow:visible;}
.bubble:hover .bubble__icon,
.tt-live .bubble__icon{animation-play-state:running;}

/* a leaf that sways */
.tt-live .ic-leaf{animation:tt-ic-sway 3.6s ease-in-out infinite;transform-origin:20% 80%;}
@keyframes tt-ic-sway{0%,100%{transform:rotate(-5deg);}50%{transform:rotate(5deg);}}

/* the jet pulses and throws a fan of spray */
.tt-live .ic-spray{animation:tt-ic-push 2.4s var(--tt-ease) infinite;}
@keyframes tt-ic-push{0%,100%{transform:translateX(0);}42%{transform:translateX(-2.5px);}}
.ic-spray::after{
    content:'';position:absolute;right:-4px;top:52%;width:16px;height:2px;
    border-radius:2px;background:linear-gradient(90deg,var(--tt-water),transparent);
    opacity:0;transform:scaleX(.3);transform-origin:left;
}
.tt-live .ic-spray::after{animation:tt-ic-jet 2.4s var(--tt-ease) infinite;}
@keyframes tt-ic-jet{
    0%,20% {opacity:0;transform:scaleX(.3);}
    45%    {opacity:.9;transform:scaleX(1);}
    75%,100%{opacity:0;transform:scaleX(1.2);}
}

/* droplets falling */
.ic-droplets::after{
    content:'';position:absolute;left:52%;bottom:-3px;width:4px;height:4px;
    border-radius:50% 50% 50% 0;background:var(--tt-water);
    transform:rotate(45deg);opacity:0;
}
.tt-live .ic-droplets::after{animation:tt-ic-drop 1.9s ease-in infinite;}
@keyframes tt-ic-drop{
    0%  {opacity:0;transform:rotate(45deg) translateY(-8px) scale(.6);}
    30% {opacity:1;}
    100%{opacity:0;transform:rotate(45deg) translateY(9px) scale(1);}
}

/* the shears snip */
.tt-live .ic-scissors{animation:tt-ic-snip 2.8s var(--tt-ease) infinite;transform-origin:80% 50%;}
@keyframes tt-ic-snip{
    0%,60%,100%{transform:rotate(0deg);}
    70%        {transform:rotate(-13deg);}
    80%        {transform:rotate(0deg);}
    88%        {transform:rotate(-9deg);}
}

/* the pane gets wiped */
.ic-window::after{
    content:'';position:absolute;inset:-2px;border-radius:8px;
    background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.85) 50%,transparent 66%);
    transform:translateX(-130%);
}
.tt-live .ic-window::after{animation:tt-ic-wipe 3.4s var(--tt-ease) infinite;}
@keyframes tt-ic-wipe{0%,55%{transform:translateX(-130%);}82%,100%{transform:translateX(130%);}}

/* a slat slides into the fence */
.tt-live .ic-fence{animation:tt-ic-slat 3.2s var(--tt-ease) infinite;}
@keyframes tt-ic-slat{0%,70%,100%{transform:translateY(0);}80%{transform:translateY(-3px);}}

/* the house lights up */
.ic-house::after{
    content:'';position:absolute;inset:-6px;border-radius:50%;
    background:radial-gradient(circle,rgba(217,168,42,.35),transparent 65%);
    opacity:0;
}
.tt-live .ic-house::after{animation:tt-ic-glow 3.6s ease-in-out infinite;}
@keyframes tt-ic-glow{0%,100%{opacity:0;}50%{opacity:1;}}

/* a line that grows under the card on hover, like a fresh edge cut.
   No overflow:hidden on the card itself — that would clip the price badge. */
.bubble{position:relative;}
.bubble::after{
    content:'';position:absolute;left:14px;right:14px;bottom:0;height:3px;
    border-radius:3px 3px 0 0;
    background:linear-gradient(90deg,var(--green-600,#2a7a3a),var(--accent,#d9a82a));
    transform:scaleX(0);transform-origin:left;
    transition:transform .6s var(--tt-ease);
}
.bubble:hover::after{transform:scaleX(1);}

/* ==========================================================================
   3. THE FOUR SERVICES — a scene of the work on each detail block
   ========================================================================== */

.svcdetail__media{position:relative;}
.tt-scene{
    position:absolute;left:16px;right:16px;bottom:16px;z-index:3;
    height:132px;padding:12px 14px;border-radius:14px;
    background:linear-gradient(180deg,rgba(10,20,8,.86),rgba(10,20,8,.74));
    -webkit-backdrop-filter:blur(18px) saturate(1.3);
    backdrop-filter:blur(18px) saturate(1.3);
    border:1px solid rgba(255,255,255,.14);
    box-shadow:0 22px 44px -26px rgba(0,0,0,.9);
    color:#fff;overflow:hidden;
    opacity:0;transform:translateY(16px);
    transition:opacity .7s ease,transform .8s var(--tt-ease);
}
.tt-scene.is-in{opacity:1;transform:none;}
.tt-scene__head{
    display:flex;align-items:center;gap:8px;margin-bottom:10px;
    font-family:'Manrope',sans-serif;font-size:10px;font-weight:800;
    letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.78);
}
.tt-scene__head i{
    width:5px;height:5px;border-radius:50%;background:var(--accent,#d9a82a);
    display:block;flex:none;
}
.tt-scene.is-live .tt-scene__head i{animation:tt-pulse 2.1s ease-in-out infinite;}
@keyframes tt-pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.35;transform:scale(.7);}}
.tt-scene__stage{position:relative;height:88px;}

/* ---------- 01 onkruid: weeds pulled out of the joints ---------- */
.tt-scene[data-tt="weeds"] .tiles{
    position:absolute;left:0;right:0;bottom:0;height:52px;
    display:flex;gap:3px;
}
.tt-scene[data-tt="weeds"] .tiles b{
    flex:1;display:block;border-radius:3px;
    background:rgba(255,255,255,.13);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.tt-scene[data-tt="weeds"] .weed{
    position:absolute;bottom:50px;width:2px;height:26px;left:var(--x);
    transform-origin:50% 100%;transform:scaleY(0) rotate(var(--r));
    background:linear-gradient(180deg,rgba(120,190,120,.95),rgba(62,154,79,.5));
    border-radius:2px 2px 0 0;
}
.tt-scene[data-tt="weeds"] .weed::after{
    content:'';position:absolute;left:-4px;top:2px;width:9px;height:6px;
    border-radius:60% 10% 60% 10%;background:rgba(120,190,120,.85);
}
.tt-scene[data-tt="weeds"].is-live .weed{
    animation:tt-weed 7s var(--tt-ease) infinite;animation-delay:var(--d);
}
@keyframes tt-weed{
    0%     {transform:scaleY(0) rotate(var(--r));}
    22%,52%{transform:scaleY(1) rotate(var(--r));}
    /* the tool comes through and they are gone */
    62%    {transform:scaleY(0) rotate(var(--r)) translateY(4px);}
    100%   {transform:scaleY(0) rotate(var(--r));}
}
/* the tool sweeping the joints */
.tt-scene[data-tt="weeds"] .tool{
    position:absolute;bottom:44px;left:-14%;width:34px;height:36px;
}
.tt-scene[data-tt="weeds"] .tool::before{
    content:'';position:absolute;left:14px;top:0;width:4px;height:26px;border-radius:2px;
    background:rgba(255,255,255,.6);transform:rotate(14deg);
}
.tt-scene[data-tt="weeds"] .tool::after{
    content:'';position:absolute;left:2px;bottom:0;width:28px;height:8px;border-radius:3px;
    background:var(--accent,#d9a82a);
}
.tt-scene[data-tt="weeds"].is-live .tool{animation:tt-tool 7s var(--tt-ease) infinite;}
@keyframes tt-tool{
    0%,50%  {left:-14%;opacity:0;}
    54%     {opacity:1;}
    68%     {left:104%;opacity:1;}
    70%,100%{opacity:0;}
}
/* the clean joints left behind */
.tt-scene[data-tt="weeds"] .clean{
    position:absolute;left:0;bottom:44px;height:3px;width:0;border-radius:2px;
    background:linear-gradient(90deg,rgba(217,168,42,.9),rgba(217,168,42,0));
}
.tt-scene[data-tt="weeds"].is-live .clean{animation:tt-clean 7s var(--tt-ease) infinite;}
@keyframes tt-clean{
    0%,54%  {width:0;opacity:0;}
    58%     {opacity:1;}
    70%,88% {width:100%;opacity:1;}
    100%    {width:100%;opacity:0;}
}

/* ---------- 02 hogedruk: the jet sweeping a driveway clean ---------- */
.tt-scene[data-tt="jet"] .surface{
    position:absolute;inset:0 0 6px;border-radius:8px;overflow:hidden;
    background:
        repeating-linear-gradient(90deg, rgba(255,255,255,.1) 0 30px, transparent 30px 33px),
        repeating-linear-gradient(0deg, rgba(255,255,255,.1) 0 22px, transparent 22px 25px),
        rgba(90,86,70,.55);
}
/* the clean band the jet leaves behind */
.tt-scene[data-tt="jet"] .washed{
    position:absolute;inset:0;width:0;
    background:
        repeating-linear-gradient(90deg, rgba(255,255,255,.2) 0 30px, transparent 30px 33px),
        repeating-linear-gradient(0deg, rgba(255,255,255,.2) 0 22px, transparent 22px 25px),
        rgba(206,214,196,.85);
}
.tt-scene[data-tt="jet"].is-live .washed{animation:tt-wash 6.5s var(--tt-ease) infinite;}
@keyframes tt-wash{
    0%      {width:0;}
    58%,84% {width:100%;}
    100%    {width:0;}
}
/* the lance and its fan of water */
.tt-scene[data-tt="jet"] .lance{
    position:absolute;top:-4px;left:0;width:46px;height:52px;
}
.tt-scene[data-tt="jet"] .lance::before{
    content:'';position:absolute;right:10px;top:0;width:5px;height:22px;border-radius:3px;
    background:rgba(255,255,255,.75);transform:rotate(18deg);
}
.tt-scene[data-tt="jet"] .fan{
    position:absolute;right:6px;top:20px;width:26px;height:34px;
    background:linear-gradient(190deg,rgba(180,225,245,.95),rgba(180,225,245,0));
    clip-path:polygon(46% 0, 58% 0, 100% 100%, 0 100%);
    opacity:.9;
}
.tt-scene[data-tt="jet"].is-live .fan{animation:tt-fan .5s ease-in-out infinite alternate;}
@keyframes tt-fan{from{transform:scaleX(.88);}to{transform:scaleX(1.12);}}
.tt-scene[data-tt="jet"].is-live .lance{animation:tt-lance 6.5s var(--tt-ease) infinite;}
@keyframes tt-lance{
    0%      {left:-10%;opacity:0;}
    6%      {opacity:1;}
    58%     {left:96%;opacity:1;}
    66%,100%{left:96%;opacity:0;}
}
/* spray kicking up off the surface */
.tt-scene[data-tt="jet"] .mist{
    position:absolute;bottom:8px;width:8px;height:8px;border-radius:50%;
    background:rgba(255,255,255,.5);opacity:0;
}
.tt-scene[data-tt="jet"].is-live .mist{animation:tt-mist 6.5s linear infinite;}
@keyframes tt-mist{
    0%,4%   {opacity:0;left:0;transform:translateY(0) scale(.5);}
    10%     {opacity:.7;}
    58%     {opacity:.5;left:92%;transform:translateY(-16px) scale(1.4);}
    64%,100%{opacity:0;}
}

/* ---------- 03 snoeien: the shrub taken back into shape ---------- */
.tt-scene[data-tt="prune"] .shrub{
    position:absolute;left:50%;bottom:6px;width:120px;height:64px;margin-left:-60px;
    border-radius:60px 60px 10px 10px;
    background:linear-gradient(180deg,rgba(62,154,79,.6),rgba(28,90,42,.45));
    transition:none;
}
/* the shoots and clippings live inside the bush, so their positions are
   relative to the foliage rather than to the whole panel */
.tt-scene[data-tt="prune"] .shrub{overflow:visible;}
.tt-scene[data-tt="prune"] .sprout{
    position:absolute;width:3px;height:var(--h);margin-left:-1.5px;
    border-radius:2px;transform-origin:50% 100%;transform:scaleY(0) rotate(var(--r));
    background:linear-gradient(180deg,rgba(140,205,140,.95),rgba(62,154,79,.5));
}
/* a small leaf on the tip so a shoot reads as growth, not as a stick */
.tt-scene[data-tt="prune"] .sprout::after{
    content:'';position:absolute;top:-2px;left:1px;width:7px;height:5px;
    border-radius:60% 10% 60% 10%;background:rgba(150,212,150,.9);
}
.tt-scene[data-tt="prune"].is-live .sprout{
    animation:tt-sprout 8s var(--tt-ease) infinite;animation-delay:var(--d);
}
@keyframes tt-sprout{
    0%     {transform:scaleY(0) rotate(var(--r));}
    30%,48%{transform:scaleY(1) rotate(var(--r));}
    56%    {transform:scaleY(0) rotate(var(--r));}
    100%   {transform:scaleY(0) rotate(var(--r));}
}
/* the cut line passing just over the crown of the bush */
.tt-scene[data-tt="prune"] .cut{
    position:absolute;left:-10%;bottom:66px;width:120%;height:2px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);
    opacity:0;
}
.tt-scene[data-tt="prune"].is-live .cut{animation:tt-cut 8s var(--tt-ease) infinite;}
@keyframes tt-cut{
    0%,46%  {opacity:0;transform:translateX(-30%);}
    50%     {opacity:1;transform:translateX(-10%);}
    58%     {opacity:1;transform:translateX(10%);}
    62%,100%{opacity:0;transform:translateX(30%);}
}
/* clippings falling away */
.tt-scene[data-tt="prune"] .clip{
    position:absolute;width:6px;height:4px;margin-left:-3px;
    border-radius:60% 10% 60% 10%;background:rgba(140,205,140,.85);opacity:0;
}
.tt-scene[data-tt="prune"].is-live .clip{
    animation:tt-clip 8s var(--tt-ease) infinite;animation-delay:var(--d);
}
@keyframes tt-clip{
    0%,52%  {opacity:0;transform:translate(0,0) rotate(0);}
    56%     {opacity:1;}
    72%,100%{opacity:0;transform:translate(var(--dx),46px) rotate(220deg);}
}
/* the neat outline it ends up with */
.tt-scene[data-tt="prune"] .shape{
    position:absolute;left:50%;bottom:6px;width:124px;height:66px;margin-left:-62px;
    border:1.5px dashed rgba(217,168,42,.85);border-radius:60px 60px 10px 10px;
    opacity:0;
}
.tt-scene[data-tt="prune"].is-live .shape{animation:tt-shape 8s var(--tt-ease) infinite;}
@keyframes tt-shape{
    0%,58%  {opacity:0;transform:scale(1.04);}
    64%,86% {opacity:1;transform:scale(1);}
    100%    {opacity:0;transform:scale(1);}
}

/* ---------- 04 glazenwasserij: the pane wiped streak-free ---------- */
.tt-scene[data-tt="glass"] .pane{
    position:absolute;inset:0 0 6px;border-radius:8px;overflow:hidden;
    background:rgba(150,170,180,.4);
    box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28);
}
.tt-scene[data-tt="glass"] .pane::after{
    content:'';position:absolute;inset:0;
    background:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,.3) 0 5px, transparent 6px),
        radial-gradient(circle at 62% 60%, rgba(255,255,255,.26) 0 7px, transparent 8px),
        radial-gradient(circle at 82% 26%, rgba(255,255,255,.3) 0 4px, transparent 5px),
        radial-gradient(circle at 40% 76%, rgba(255,255,255,.24) 0 6px, transparent 7px);
}
.tt-scene[data-tt="glass"] .clear{
    position:absolute;left:0;right:0;top:0;height:0;
    background:linear-gradient(180deg,rgba(214,235,245,.9),rgba(190,220,235,.75));
    box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35);
    border-radius:8px 8px 0 0;
}
.tt-scene[data-tt="glass"].is-live .clear{animation:tt-clear 6s var(--tt-ease) infinite;}
@keyframes tt-clear{
    0%      {height:0;}
    55%,82% {height:calc(100% - 6px);}
    100%    {height:0;}
}
/* the squeegee coming down the pane */
.tt-scene[data-tt="glass"] .squeegee{
    position:absolute;left:4px;right:4px;top:0;height:9px;border-radius:4px;
    background:linear-gradient(180deg,var(--accent,#d9a82a),rgba(217,168,42,.6));
    box-shadow:0 4px 12px -4px rgba(0,0,0,.7);
    opacity:0;
}
.tt-scene[data-tt="glass"].is-live .squeegee{animation:tt-squeegee 6s var(--tt-ease) infinite;}
@keyframes tt-squeegee{
    0%      {top:-10px;opacity:0;}
    6%      {opacity:1;}
    55%     {top:calc(100% - 15px);opacity:1;}
    64%,100%{top:calc(100% - 15px);opacity:0;}
}
/* the shine when it is done */
.tt-scene[data-tt="glass"] .shine{
    position:absolute;right:14px;top:14px;width:16px;height:16px;opacity:0;
}
.tt-scene[data-tt="glass"] .shine::before,
.tt-scene[data-tt="glass"] .shine::after{
    content:'';position:absolute;left:50%;top:50%;background:#fff;border-radius:2px;
}
.tt-scene[data-tt="glass"] .shine::before{width:2px;height:16px;margin:-8px 0 0 -1px;}
.tt-scene[data-tt="glass"] .shine::after{width:16px;height:2px;margin:-1px 0 0 -8px;}
.tt-scene[data-tt="glass"].is-live .shine{animation:tt-shine 6s var(--tt-ease) infinite;}
@keyframes tt-shine{
    0%,58%  {opacity:0;transform:scale(.4) rotate(0);}
    66%     {opacity:1;transform:scale(1) rotate(90deg);}
    84%,100%{opacity:0;transform:scale(.7) rotate(140deg);}
}

/* ==========================================================================
   4. WERKWIJZE — a vine growing along the path from step to step
   ========================================================================== */

.how__steps{position:relative;}
.tt-vine{
    position:absolute;left:8%;right:8%;top:0;height:3px;z-index:0;pointer-events:none;
}
.tt-vine i{
    display:block;height:100%;width:0;border-radius:3px;
    background:linear-gradient(90deg,var(--green-600,#2a7a3a),var(--green-500,#3e9a4f),var(--accent,#d9a82a));
    transition:width 2.2s var(--tt-ease);
}
.tt-vine.is-in i{width:100%;}
.tt-vine b{
    position:absolute;top:-5px;left:var(--x);width:13px;height:13px;margin-left:-6.5px;
    border-radius:60% 10% 60% 10%;background:var(--green-500,#3e9a4f);
    transform:scale(0) rotate(-30deg);
    transition:transform .6s var(--tt-ease);transition-delay:var(--d);
}
.tt-vine.is-in b{transform:scale(1) rotate(0);}
.how__step{position:relative;z-index:1;}
.how__num{transition:background .5s ease,color .5s ease,transform .5s var(--tt-ease);}
.how__step:hover .how__num{transform:translateY(-3px) scale(1.06);}

/* the vine rides the rule the page already draws between the steps */
.tt-vine{top:60px;}

/* ==========================================================================
   4b. THE FAQ — a stem that grows down each question as it opens
   ========================================================================== */

/* the page's own timeline fades each question in — only the stem is ours */
.faq__item{position:relative;}
.tt-stem{
    position:absolute;left:0;top:14px;bottom:14px;width:3px;
    pointer-events:none;z-index:1;
}
.tt-stem i{
    position:absolute;left:0;top:0;width:3px;height:0;border-radius:3px;
    background:linear-gradient(180deg,var(--green-500,#3e9a4f),var(--green-700,#1c5a2a));
    transition:height .7s var(--tt-ease);
}
.faq__item.is-in .tt-stem i{height:26px;}
.faq__item[data-open="true"] .tt-stem i{height:100%;}
/* a leaf unfurls at the top of the stem once the answer is open */
.tt-stem b{
    position:absolute;left:1px;top:20px;width:12px;height:12px;
    border-radius:60% 10% 60% 10%;background:var(--green-500,#3e9a4f);
    transform:scale(0) rotate(-40deg);transform-origin:0 100%;
    transition:transform .55s var(--tt-ease) .25s;
}
.faq__item[data-open="true"] .tt-stem b{transform:scale(1) rotate(0);}
/* the page already turns the plus into a cross and recolours it when open —
   overriding that here made the icon green on green and invisible */
/* the question text steps aside so the stem never sits under it */
.faq__item.tt-faq .faq__q{padding-left:18px;}
.faq__item.tt-faq .faq__a p{padding-left:18px;}

/* ==========================================================================
   5. PAKKETTEN — a plant that grows with the tier
   ========================================================================== */

/* No overflow:hidden here — the "Meest gekozen" and "Volledige ontzorging"
   ribbons deliberately hang above the card and would be cut in half. */
.pkg,.tt-has-plant{position:relative;}
/* the plant is decoration behind the card's own content, so it can never sit
   on the price column of the wider subscription rows */
.pkg > *:not(.tt-plant),
.tt-has-plant > *:not(.tt-plant){position:relative;z-index:1;}
.tt-plant{
    position:absolute;right:16px;top:14px;width:42px;height:52px;
    pointer-events:none;opacity:.4;z-index:0;
}
.subpkg__card .tt-plant{right:auto;left:50%;top:auto;bottom:8px;opacity:.22;}
.tt-plant svg{display:block;width:100%;height:100%;overflow:visible;}
.tt-plant .stem{
    fill:none;stroke:var(--green-600,#2a7a3a);stroke-width:2.4;stroke-linecap:round;
    stroke-dasharray:70;stroke-dashoffset:70;
    transition:stroke-dashoffset 1.5s var(--tt-ease);
}
.tt-plant .lf{
    fill:var(--green-500,#3e9a4f);
    transform:scale(0);transform-origin:var(--ox) var(--oy);
    transition:transform .6s var(--tt-ease);transition-delay:var(--d);
}
.pkg.is-in .tt-plant .stem,
.tt-has-plant.is-in .tt-plant .stem{stroke-dashoffset:0;}
.pkg.is-in .tt-plant .lf,
.tt-has-plant.is-in .tt-plant .lf{transform:scale(1);}
.pkg:hover .tt-plant,
.tt-has-plant:hover .tt-plant{opacity:.85;}
/* on the dark comparison card the plant needs to be light */
.cf__card--dark .tt-plant .stem,.subpkg__card--alt .tt-plant .stem{stroke:rgba(255,255,255,.6);}
.cf__card--dark .tt-plant .lf,.subpkg__card--alt .tt-plant .lf{fill:rgba(255,255,255,.5);}

/* ==========================================================================
   5b. PRIJZEN — the table settles row by row, the cards follow
   ========================================================================== */

.tt-row{
    opacity:0;transform:translateY(10px);
    transition:opacity .5s ease,transform .5s var(--tt-ease);
    transition-delay:var(--d,0s);
}
.pricetable.is-in .tt-row{opacity:1;transform:none;}
.pricetable tr{transition:background .3s ease;}
.pricetable tbody tr:hover{background:var(--green-50,#f3f9f4);}

/* ==========================================================================
   5c. VERGELIJKER — each column builds its own list
   ========================================================================== */

.tt-cf-li{
    opacity:0;transform:translateX(-10px);
    transition:opacity .5s ease,transform .5s var(--tt-ease);
    transition-delay:var(--d,0s);
}
.tt-cf.is-in .tt-cf-li{opacity:1;transform:none;}
/* same properties the page already eases, just with a softer curve */
.cf__card{transition:transform .45s var(--tt-ease),box-shadow .45s var(--tt-ease);}
.cf__card:hover{transform:translateY(-5px);}
/* .cf__card has overflow:hidden of its own, so the plant would be clipped
   against its ribbon — it does not get one */

/* ==========================================================================
   6. PROJECTEN — mower stripes passing over the before/after
   ========================================================================== */

.compare{position:relative;overflow:hidden;}
.tt-mow{
    position:absolute;inset:0;z-index:4;pointer-events:none;
    background:repeating-linear-gradient(100deg,
        rgba(255,255,255,.16) 0 26px, rgba(0,0,0,.05) 26px 52px);
    transform:translateX(-105%);
}
.tt-mow.is-in{animation:tt-mow 1.9s var(--tt-ease) forwards;}
@keyframes tt-mow{to{transform:translateX(105%);}}
/* a nudge on the handle so the slider invites a drag */
.compare__handle{transition:transform .3s var(--tt-ease);}
.compare.tt-hint .compare__handle{animation:tt-nudge 2.6s var(--tt-ease) 2;}
/* the handle carries translateX(-50%) of its own, so the nudge keeps it */
@keyframes tt-nudge{
    0%,100%{transform:translateX(-50%);}
    30%    {transform:translateX(calc(-50% + 11px));}
    60%    {transform:translateX(calc(-50% - 7px));}
}

/* the seam that travels with the reveal, and what it lifts off the ground */
.tt-seam{
    position:absolute;top:0;bottom:0;left:50%;width:0;z-index:5;
    pointer-events:none;opacity:0;transition:opacity .4s ease;
}
.compare.tt-sweeping .tt-seam{opacity:1;}
.tt-seam::before{
    content:'';position:absolute;top:0;bottom:0;left:-9px;width:18px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);
}
.tt-seam i{
    position:absolute;left:-3px;width:7px;height:5px;
    border-radius:60% 10% 60% 10%;background:rgba(255,255,255,.9);
    opacity:0;
}
.compare.tt-sweeping .tt-seam i{
    animation:tt-debris 1.5s var(--tt-ease) infinite;animation-delay:var(--d);
}
@keyframes tt-debris{
    0%  {opacity:0;transform:translate(0,0) rotate(0);}
    18% {opacity:.95;}
    100%{opacity:0;transform:translate(var(--dx),-26px) rotate(260deg);}
}
/* the tags react to which side is winning */
.compare__tag{transition:opacity .5s ease,transform .5s var(--tt-ease);}
.compare.tt-sweeping .compare__tag--before{opacity:.35;transform:scale(.92);}
.compare.tt-sweeping .compare__tag--after{transform:scale(1.06);}

/* ==========================================================================
   6b. WERKWIJZE — the timeline grows down like a vine
   ========================================================================== */

.tt-tl{position:relative;}
/* the page's straight rule is replaced by the plant, otherwise there would be
   two lines running down the section */
.tt-tl::before{display:none;}

.tt-stem-wrap{
    position:absolute;left:0;top:0;bottom:0;width:60px;
    z-index:0;pointer-events:none;
}
.tt-stem-wrap svg{position:absolute;inset:0;width:60px;height:100%;overflow:visible;}
.tt-stem-ghost{
    fill:none;stroke:var(--line-strong,#d6ddd2);stroke-width:2;
    stroke-linecap:round;stroke-linejoin:round;
}
.tt-stem-live{
    fill:none;stroke:var(--green-600,#2a7a3a);stroke-width:3.5;
    stroke-linecap:round;stroke-linejoin:round;
}
/* the shoot at the very top of the plant */
.tt-stem-tip{
    position:absolute;top:-9px;width:11px;height:11px;margin-left:-5.5px;
    border-radius:60% 10% 60% 10%;background:var(--green-500,#3e9a4f);
    transform:scale(0) rotate(-40deg);transform-origin:50% 100%;
    transition:transform .6s var(--tt-ease) .2s;
}
.tt-stem-tip.is-open{transform:scale(1) rotate(0);}

/* leaves along the stem, opening as the growth passes them */
.tt-leafnode{
    position:absolute;width:15px;height:15px;margin-left:-1px;
    border-radius:60% 10% 60% 10%;background:var(--green-500,#3e9a4f);
    transform:scale(0) rotate(-45deg);transform-origin:0 100%;
    transition:transform .5s var(--tt-ease);
}
.tt-leafnode.alt{
    border-radius:10% 60% 10% 60%;transform-origin:100% 100%;
    margin-left:-14px;transform:scale(0) rotate(45deg);
    background:var(--green-600,#2a7a3a);
}
.tt-leafnode.big{width:20px;height:20px;}
.tt-leafnode.alt.big{margin-left:-19px;}
.tt-leafnode.is-open{transform:scale(1) rotate(0);}
.tt-leafnode.alt.is-open{transform:scale(1) rotate(0);}
.tt-stem-wrap.tt-grown .tt-leafnode,
.tt-stem-wrap.tt-grown .tt-stem-tip{transform:scale(1) rotate(0);}
.tt-stem-wrap.tt-grown .tt-stem-live{stroke-dashoffset:0 !important;}
.tt-tl-item{position:relative;}
.tt-tl-item .timeline__num{
    transition:background .5s var(--tt-ease),color .5s ease,
               border-color .5s ease,transform .6s var(--tt-ease),box-shadow .5s ease;
}
.tt-tl-item .timeline__num.is-node{
    background:var(--green-600,#2a7a3a);border-color:var(--green-600,#2a7a3a);color:#fff;
    box-shadow:0 8px 20px -8px rgba(42,122,58,.6);
}
.tt-tl-item:hover .timeline__num{transform:scale(1.07);}
/* the numbered circles are the nodes of the plant: opaque, above the stem,
   and filling green as the growth reaches them */
.tt-tl-item .timeline__num{background:#fff;z-index:2;}
.tt-tl-item .timeline__num.is-node::after{
    content:'';position:absolute;inset:-6px;border-radius:50%;
    border:1.5px solid rgba(62,154,79,.35);
    animation:tt-node 1.2s var(--tt-ease);
}
@keyframes tt-node{0%{opacity:.9;transform:scale(.8);}100%{opacity:0;transform:scale(1.25);}}

/* ==========================================================================
   6c. ONZE BELOFTE — the promise icons keep working
   ========================================================================== */

/* the page fades the promise cards in itself; only their icons are ours */
.iconcard__icon{position:relative;}
.tt-live .ic-gear{animation:tt-gear 9s linear infinite;}
@keyframes tt-gear{to{transform:rotate(360deg);}}
.tt-live .ic-broom{animation:tt-broom 3.4s var(--tt-ease) infinite;transform-origin:70% 20%;}
@keyframes tt-broom{0%,100%{transform:rotate(-9deg);}50%{transform:rotate(9deg);}}
.tt-live .ic-recycle{animation:tt-gear 7s linear infinite;}
.tt-live .ic-mail{animation:tt-mail 3.2s var(--tt-ease) infinite;}
@keyframes tt-mail{0%,72%,100%{transform:translateY(0);}82%{transform:translateY(-4px);}}
.tt-live .ic-team{animation:tt-team 3.6s ease-in-out infinite;}
@keyframes tt-team{0%,100%{transform:scale(1);}50%{transform:scale(1.08);}}

/* ==========================================================================
   6d. HOME — the rest of the landing page
   Every hidden start state below is scoped to a class the script adds, so a
   page that never runs tt-motion.js still shows all of its content.
   ========================================================================== */

/* a call running down the contact strip */
.tt-strip{position:relative;overflow:hidden;}
/* the strip's own grid has no stacking context of its own, so it is lifted
   above the bars — otherwise they would sit on top of the button */
.tt-strip .contactstrip__inner{position:relative;z-index:1;}
.tt-signal{
    position:absolute;right:3%;top:50%;display:flex;gap:5px;align-items:flex-end;
    transform:translateY(-50%);pointer-events:none;z-index:0;opacity:.22;
    color:var(--green-600,#2a7a3a);
}
.tt-signal i{display:block;width:5px;border-radius:3px;background:currentColor;}
.tt-signal i:nth-child(1){height:12px;}
.tt-signal i:nth-child(2){height:20px;}
.tt-signal i:nth-child(3){height:28px;}
.tt-strip.is-live .tt-signal i{animation:tt-bars 1.5s ease-in-out infinite;}
.tt-strip.is-live .tt-signal i:nth-child(2){animation-delay:.18s;}
.tt-strip.is-live .tt-signal i:nth-child(3){animation-delay:.36s;}
@keyframes tt-bars{0%,100%{transform:scaleY(.45);opacity:.5;}50%{transform:scaleY(1);opacity:1;}}
.contactstrip__phone{transition:transform .4s var(--tt-ease);}
.contactstrip__phone:hover{transform:translateX(3px);}

/* ==========================================================================
   7. TRUSTBAR — the marks tick in
   ========================================================================== */

.trust__icon{position:relative;}
.tt-tick{
    position:absolute;right:-4px;bottom:-4px;width:15px;height:15px;border-radius:50%;
    background:var(--green-600,#2a7a3a);display:flex;align-items:center;justify-content:center;
    transform:scale(0);transition:transform .55s var(--tt-ease);transition-delay:var(--d);
}
.tt-tick svg{width:9px;height:9px;}
.tt-tick path{
    fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
    stroke-dasharray:14;stroke-dashoffset:14;
    transition:stroke-dashoffset .45s var(--tt-ease);transition-delay:calc(var(--d) + .2s);
}
.tt-in .tt-tick{transform:scale(1);}
.tt-in .tt-tick path{stroke-dashoffset:0;}

/* ==========================================================================
   8. THE CLOSING BAND — a hedge growing across it
   ========================================================================== */

.tt-hedge{
    position:absolute;left:0;right:0;bottom:0;height:56px;z-index:0;
    pointer-events:none;overflow:hidden;
}
.tt-hedge i{
    position:absolute;bottom:-14px;width:var(--w);height:var(--w);
    left:var(--x);margin-left:calc(var(--w) / -2);
    border-radius:50%;
    background:rgba(28,90,42,.28);
    transform:scale(0);transform-origin:50% 100%;
    transition:transform .9s var(--tt-ease);transition-delay:calc(var(--i) * 55ms);
}
.tt-hedge.is-in i{transform:scale(1);}
.tt-hedge i:nth-child(3n){background:rgba(62,154,79,.24);}
.tt-hedge i:nth-child(5n){background:rgba(217,168,42,.16);}
.cta .tt-hedge i{background:rgba(255,255,255,.1);}
.cta .tt-hedge i:nth-child(3n){background:rgba(255,255,255,.07);}
.cta .tt-hedge i:nth-child(5n){background:rgba(217,168,42,.16);}

/* ==========================================================================
   9. QUIET REVEALS for anything the page does not already animate
   ========================================================================== */

.tt-r{opacity:0;transform:translateY(22px);
      transition:opacity .8s var(--tt-ease),transform .8s var(--tt-ease);}
.tt-r.is-in{opacity:1;transform:none;}

/* ==========================================================================
   10. RESPONSIVE
   ========================================================================== */

@media (max-width:980px){
    /* the site stacks the three steps into one column here and hides its own
       connecting rule — the horizontal vine has to go with it, otherwise it
       hangs over the first card as a loose green bar */
    .tt-vine{display:none;}
    .tt-grass{height:56px;}
    .tt-scene{height:118px;left:12px;right:12px;bottom:12px;padding:10px 12px;}
    .tt-scene__stage{height:74px;}
    .tt-scene[data-tt="prune"] .shrub{width:96px;margin-left:-48px;height:52px;}
    .tt-scene[data-tt="prune"] .shape{width:100px;margin-left:-50px;height:54px;}
    .tt-plant{width:34px;height:42px;right:12px;}
    .tt-hedge{height:44px;}
}
@media (max-width:640px){
    .tt-grass{height:44px;gap:4px;}
    .tt-scene{height:104px;left:10px;right:10px;bottom:10px;border-radius:12px;}
    .tt-scene__head{font-size:9px;margin-bottom:8px;letter-spacing:.1em;}
    .tt-scene__stage{height:62px;}
    .tt-scene[data-tt="prune"] .shrub{width:78px;margin-left:-39px;height:42px;}
    .tt-scene[data-tt="prune"] .shape{width:82px;margin-left:-41px;height:44px;}
    .tt-scene[data-tt="weeds"] .tiles{height:38px;}
    .tt-scene[data-tt="weeds"] .weed{bottom:36px;height:19px;}
    .tt-scene[data-tt="weeds"] .tool,
    .tt-scene[data-tt="weeds"] .clean{bottom:32px;}
    .tt-plant{width:28px;height:34px;right:10px;top:10px;}
    .tt-hedge{height:34px;}
    .tt-leaf{display:none;}
}

/* below 640px the site narrows the number to 44px, so the stem shifts left
   by 6px to stay centred on it */
@media (max-width:640px){
    .tt-stem-wrap{left:-6px;}
    .tt-tl-item{transform:translateX(-10px);}
    .tt-seam i{display:none;}
}

@media (prefers-reduced-motion:reduce){
    .tt-edge,.tt-leaf,.tt-mow,.tt-seam{display:none;}
    .tt-scene *,.bubble__icon,.bubble__icon::after,
    .iconcard__icon{animation:none !important;}
    .tt-scene{opacity:1;transform:none;}
    .tt-r{opacity:1;transform:none;}
    .tt-stem-live{stroke-dashoffset:0 !important;}
    .tt-leafnode,.tt-stem-tip{transform:scale(1) rotate(0);}
}