/* BUTTONS */

	button, .btn, .lnk {

  	font-family: var(--base-font-1-medium);

    --rise: calc(var(--max-font-size, 16) - var(--min-font-size, 16));
    --run: calc(var(--max-vw) - var(--min-vw));
    --slope: calc(var(--rise) / var(--run));

    --min-vw-px: calc(var(--min-vw) * 1px);
    --min-font-size-px: calc(var(--min-font-size) * 1px);

    --fluid-font-size-px:
      calc(
        var(--slope) * (100vw - var(--min-vw-px)) + var(--min-font-size-px)
      );

    --max-font-size-px: calc(var(--max-font-size) * 1px);

    font-size:
      clamp(
        var(--min-font-size-px),
        var(--fluid-font-size-px),
        var(--max-font-size-px)
      );
    
		margin: 0;
		border: 0;
		padding: 0;
		border-radius: 0;
		box-shadow: none;
		background: transparent;
		display: inline-block;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		cursor: pointer;
    
	}
	
  
  
  
  
  
  
  
	.btn-a {
		
    --min-font-size: 12;
    --max-font-size: 14;
    
    text-transform: uppercase;
    border-radius: 100px;
    padding: 1.07142857142857142857em 1.57142857142857142857em;
    
    color: var(--color, var(--base-color-white));
    background-color: var(--background-color, transparent);
    
	}
  
  .btn-a.pink {
    --background-color: var(--base-color-pink);
    --color: var(--base-color-white);
  }
  
  .btn-a.green {
    --background-color: var(--base-color-green);
    --color: var(--base-color-white);
  }
  
  .btn-a.white.ghost {
    --background-color: transparent;
    --color: var(--base-color-white);
    border: 1px solid currentColor;
  }
  
  .btn-a.black.ghost {
    --background-color: transparent;
    --color: var(--base-color-black);
    border: 1px solid currentColor;
  }
  
  .btn-a * {
    display: block;
  }
  
  .btn-a span.wrap {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 0px 2.11764705882352941176em;
  }
  
  .btn-a span.icon {
    /*margin-block: -1em;*/
  }

  .btn-a[data-icon="arrow--right"] svg {
    width: 1.71428571428571428571em;
    height: auto;
  }

  .btn-a[data-icon="download"] svg {
    width: 1em;
    height: auto;
  }








  .btn-more {
    --size: max(40px, calc(50 * var(--px)));
    width: var(--size);
    height: var(--size);
    display: block;
    border-radius: 50%;
    position: relative;
    background: var(--base-color-white);
    transition: 150ms;
    transition-property: background, color;
  }
  
  .btn-more span.label {
    position: absolute;
    top: 0;
    left: -100000em;
  }
  
  .btn-more svg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--size) * 0.36);
    height: auto;
    display: block;
    transform: translate(-50%, -50%);
  }
  
  .btn-more svg path {
    fill: currentColor;
    transition: fill 150ms;
  }
  
  
  @media (hover: hover) {
    
    .btn-more:is(:focus, :hover),
    a:is(:focus, :hover) .btn-more {
      background: var(--base-color-black);
      color: var(--base-color-white);
    }
    
  }
  
  
  
  
  
  
  
  
	.btn-circle-small {
    position: relative;
	  --size: 20px;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    border: 1px solid var(--base-color-white);
    background: transparent;
    color: var(--base-color-white);
    transition: 250ms var(--ttf-2);
    transition-property: color, background;
	}
  
  
  @media (hover: hover) {
    .btn-circle-small:hover {
      background: var(--base-color-white);
      color: var(--base-color-green);
    }
  }
  
  .btn-circle-small svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--icon-width-px);
  }
  
  .btn-circle-small svg path {
    fill: currentColor;
    transition: fill 250ms var(--ttf-2);
  }
  
  .btn-circle-small span.label {
    position: absolute;
    top: -10000px;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    display: block;
  }
  
  .btn-circle-small[disabled] {
    opacity: 0.25;
    pointer-events: none;
    cursor: default;
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  .btn-icon-only,
  .btn-circled {
    position: relative;
  }
  
  .btn-icon-only *,
  .btn-circled * {
    display: block;
  }
  
  .btn-icon-only span.label,
  .btn-circled span.label {
    position: absolute;
    top: 0;
    left: -100000em;
    width: 1px;
    height: 1px;
    overflow: hidden;
    display: block;
  }
  
  .btn-icon-only[data-icon="eye"] svg {
    width: 1.52941176470588235294em;
    height: auto;
  }
  
  .btn-icon-only[data-icon="email"] svg {
    width: 1.17647058823529411764em;
    height: auto;
  }
  
  
  
  
  
  
  
  .btn-circled {
    --size: max(40px, calc(50 * var(--px)));
    width: var(--size);
    height: var(--size);
    border: 1px solid currentColor;
    border-radius: 50%;
    position: relative;
    color: rgba(0,0,0,0.7);
  }

  .btn-circled svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  .btn-circled path {
    fill: currentColor;
  }