/* Cute Fencing button system ("Bold actions. Clearer paths.")
   Variants: primary, secondary, outline, ghost, whatsapp, icon. Sizes: s 40px, m 48px, l 56px.
   Markup: <a class="btn btn-primary btn-m">Label<span class="btn-ar"><svg>→</svg></span></a>
   Being rolled out section by section; first used in the homepage blog section. */
.btn{--h:48px;--px:32px;--pl:20px;display:inline-flex;align-items:center;justify-content:space-between;gap:20px;box-sizing:border-box;min-height:var(--h);padding:0 6px 0 var(--px);border-radius:8px;border:2px solid transparent;font:700 18px/1 var(--font-display);letter-spacing:.04em;text-transform:uppercase;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .15s ease-out,color .15s ease-out,border-color .15s ease-out,transform .15s ease-out}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:3px solid var(--orange-500);outline-offset:2px}
.btn svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.btn-ar{display:grid;place-items:center;flex:none;width:calc(var(--h) - 12px);height:calc(var(--h) - 12px);border-radius:6px}
/* sizes */
.btn-s{--h:40px;--px:24px;font-size:16px;gap:16px}
.btn-m{--h:48px;--px:32px}
.btn-l{--h:56px;--px:40px;font-size:21px}
/* primary: orange bar, forest tile, orange arrow */
.btn-primary{background:var(--orange-500);color:var(--forest-900)}
.btn-primary .btn-ar{background:var(--forest-900);color:var(--orange-500)}
.btn-primary:hover{background:var(--orange-600);color:var(--forest-900)}
/* secondary: forest bar, arrow in a soft circle */
.btn-secondary{background:var(--forest-900);color:#fff}
.btn-secondary .btn-ar{border-radius:50%;background:rgba(255,255,255,.1);color:#fff}
.btn-secondary:hover{background:var(--forest-800);color:#fff}
/* outline / tertiary */
.btn-outline{background:transparent;color:var(--forest-900);border-color:var(--forest-900);padding-right:var(--px)}
.btn-outline .btn-ar{width:auto;height:auto;background:none}
.btn-outline:hover{background:var(--forest-900);color:#fff}
/* ghost / text link: dark label with a thin orange underline under the text only (default).
   Hover: the line extends past the arrow and fades out, the arrow turns orange and nudges right. */
.btn-ghost{--h:auto;--ag:12px;--aw:20px;position:relative;padding:0 0 8px;gap:var(--ag);border:0;border-radius:0;background:none;color:var(--forest-900);justify-content:flex-start}
.btn-ghost::after,.btn-ghost::before{content:"";position:absolute;bottom:0;height:2px;pointer-events:none}
.btn-ghost::after{left:0;width:calc(100% - var(--aw) - var(--ag));background:var(--orange-500)}
.btn-ghost::before{left:calc(100% - var(--aw) - var(--ag));width:calc(var(--aw) + var(--ag) + 24px);background:linear-gradient(90deg,var(--orange-500),rgba(255,122,0,.35) 55%,rgba(255,122,0,0));transform:scaleX(0);transform-origin:left center;transition:transform .25s ease-out}
.btn-ghost .btn-ar{width:var(--aw);height:auto;background:none;color:var(--forest-900);transition:transform .25s ease-out,color .2s ease-out}
.btn-ghost:hover,.btn-ghost:focus-visible{color:var(--forest-900)}
.btn-ghost:hover::before,.btn-ghost:focus-visible::before{transform:scaleX(1)}
.btn-ghost:hover .btn-ar,.btn-ghost:focus-visible .btn-ar{color:var(--orange-500);transform:translateX(5px)}
.btn-ghost:active{transform:none}
@media (prefers-reduced-motion:reduce){.btn,.btn-ghost::before,.btn-ghost .btn-ar,.chip{transition:none}.btn:active{transform:none}.btn-ghost:hover .btn-ar,.btn-ghost:focus-visible .btn-ar{transform:none}}
/* whatsapp */
.btn-whatsapp{background:#E4F1E1;color:var(--forest-900);padding-right:var(--px)}
.btn-whatsapp .btn-ar{width:auto;height:auto;background:none}
.btn-whatsapp:hover{background:#D3E8CE}
/* disabled */
.btn[aria-disabled=true],.btn:disabled{background:#FBE3D2;color:rgba(20,51,30,.35);border-color:transparent;pointer-events:none}
.btn[aria-disabled=true] .btn-ar,.btn:disabled .btn-ar{background:none;color:inherit}
/* icon-only square */
.btn-icon{padding:0;width:var(--h);justify-content:center}
/* filter chips that sit with the system */
.chip{display:inline-flex;align-items:center;min-height:40px;padding:0 18px;border:1.5px solid var(--stone-300);border-radius:8px;background:#fff;color:var(--forest-900);font:700 15px/1 var(--font-display);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:background-color .15s ease-out,border-color .15s ease-out,color .15s ease-out}
.chip:hover{border-color:var(--forest-900)}
.chip[aria-selected=true]{background:var(--forest-900);border-color:var(--forest-900);color:#fff}
.chip:focus-visible{outline:3px solid var(--orange-500);outline-offset:2px}