.elementor-kit-6{--e-global-color-primary:#A59590;--e-global-color-secondary:#EEEBE5;--e-global-color-text:#404040;--e-global-color-accent:#FFFFFF;--e-global-color-0edfd5c:#BDB2A7;--e-global-color-e06a53b:#595552;--e-global-color-ad7e4d2:#FAF6EF;--e-global-color-343404e:#E5E7EB;--e-global-color-14b61f8:#FAF6EF;--e-global-color-943bf30:#EEEBE5;--e-global-color-c425585:#E5E7EB;--e-global-color-b206425:#999999;--e-global-color-57cc3fa:#6B5D54;--e-global-color-ce5cb85:#3D3D3D;--e-global-color-285a7be:#2D2520;--e-global-color-92e0243:#000000;--e-global-typography-primary-font-family:"Playfair Display SC";--e-global-typography-primary-font-size:50px;--e-global-typography-primary-font-weight:400;--e-global-typography-primary-line-height:47.39px;--e-global-typography-secondary-font-family:"Playfair Display SC";--e-global-typography-secondary-font-size:30px;--e-global-typography-secondary-font-weight:400;--e-global-typography-secondary-line-height:29px;--e-global-typography-text-font-family:"Open Sans";--e-global-typography-text-font-size:21px;--e-global-typography-text-font-weight:300;--e-global-typography-text-line-height:36px;--e-global-typography-accent-font-family:"Open Sans";--e-global-typography-accent-font-size:20px;--e-global-typography-accent-font-weight:700;--e-global-typography-accent-line-height:23px;--e-global-typography-3c88b22-font-family:"Playfair Display SC";--e-global-typography-3c88b22-font-size:25px;--e-global-typography-3c88b22-font-weight:400;--e-global-typography-3c88b22-line-height:37.6px;--e-global-typography-8eeb668-font-family:"Playfair Display SC";--e-global-typography-8eeb668-font-weight:400;--e-global-typography-1f7eb07-font-family:"Playfair Display SC";--e-global-typography-1f7eb07-font-weight:400;--e-global-typography-93e4d00-font-family:"Open Sans";--e-global-typography-93e4d00-font-size:17.195px;--e-global-typography-93e4d00-font-weight:300;--e-global-typography-93e4d00-line-height:22.927px;--e-global-typography-7080de5-font-family:"Open Sans";--e-global-typography-7080de5-font-size:14px;--e-global-typography-7080de5-font-weight:300;--e-global-typography-7080de5-line-height:40px;--e-global-typography-ff29db3-font-family:"Open Sans";--e-global-typography-ff29db3-font-size:17.195px;--e-global-typography-ff29db3-font-weight:400;--e-global-typography-ff29db3-text-transform:uppercase;--e-global-typography-ff29db3-line-height:22.927px;--e-global-typography-ff29db3-letter-spacing:2.58px;--e-global-typography-5e52458-font-family:"Open Sans";--e-global-typography-5e52458-font-size:250px;--e-global-typography-5e52458-font-weight:700;--e-global-typography-5e52458-line-height:0.8em;--e-global-typography-5e52458-letter-spacing:-5px;--e-global-typography-79668e7-font-family:"Open Sans";--e-global-typography-79668e7-font-size:12px;--e-global-typography-79668e7-font-weight:400;--e-global-typography-79668e7-line-height:18px;--e-global-typography-79668e7-letter-spacing:2px;--e-global-typography-c3d6138-font-family:"Open Sans";--e-global-typography-c3d6138-font-size:14px;--e-global-typography-c3d6138-font-weight:400;--e-global-typography-c3d6138-line-height:21px;--e-global-typography-c3d6138-letter-spacing:2px;color:#000000;--e-page-transition-entrance-animation:e-page-transition-fade-out;--e-page-transition-animation-duration:500ms;}.elementor-kit-6 e-page-transition{background-color:#FFFFFF;}.elementor-kit-6 p{margin-block-end:0px;}.elementor-kit-6 h1{font-family:"Playfair Display SC", Sans-serif;font-size:50px;font-weight:400;line-height:47.39px;}.elementor-kit-6 h2{font-family:"Playfair Display SC", Sans-serif;font-size:30px;font-weight:400;line-height:29.96px;}.elementor-kit-6 h3{font-family:"Playfair Display SC", Sans-serif;font-size:25px;font-weight:400;line-height:37px;}.elementor-kit-6 h4{font-family:"Open Sans", Sans-serif;font-size:20px;font-weight:700;line-height:23px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1280px;}.e-con{--container-max-width:1280px;--container-default-padding-top:0px;--container-default-padding-right:20px;--container-default-padding-bottom:0px;--container-default-padding-left:20px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1440px){.elementor-kit-6{--e-global-typography-primary-font-size:40px;--e-global-typography-secondary-font-size:20px;--e-global-typography-text-font-size:16px;--e-global-typography-text-line-height:25px;font-size:18px;}}@media(max-width:1024px){.elementor-kit-6{--e-global-typography-primary-font-size:41px;--e-global-typography-primary-line-height:1.2em;--e-global-typography-secondary-font-size:29px;--e-global-typography-secondary-line-height:1em;--e-global-typography-text-font-size:20px;--e-global-typography-text-line-height:1.2em;--e-global-typography-accent-font-size:18px;--e-global-typography-accent-line-height:1.2em;--e-global-typography-3c88b22-font-size:24px;--e-global-typography-3c88b22-line-height:1.5em;--e-global-typography-8eeb668-font-size:20px;--e-global-typography-8eeb668-line-height:1.5em;--e-global-typography-1f7eb07-font-size:16px;--e-global-typography-1f7eb07-line-height:1.6em;--e-global-typography-93e4d00-font-size:14px;--e-global-typography-93e4d00-line-height:1.8em;--e-global-typography-ff29db3-font-size:12px;--e-global-typography-ff29db3-line-height:1.5em;--e-global-typography-5e52458-font-size:120px;--e-global-typography-5e52458-line-height:0.9em;font-size:16px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-6{--e-global-typography-primary-font-size:32px;--e-global-typography-primary-line-height:1.5em;--e-global-typography-secondary-font-size:24px;--e-global-typography-secondary-line-height:1.5em;--e-global-typography-text-font-size:14px;--e-global-typography-text-line-height:1.8em;--e-global-typography-accent-font-size:14px;--e-global-typography-accent-line-height:1.5em;--e-global-typography-accent-letter-spacing:1.5px;--e-global-typography-3c88b22-font-size:24px;--e-global-typography-5e52458-font-size:80px;--e-global-typography-5e52458-line-height:0.9em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;--container-default-padding-top:0px;--container-default-padding-right:16px;--container-default-padding-bottom:0px;--container-default-padding-left:16px;}}
/* Start custom CSS *//* =================================================================
     BASE BUTTON — shared by every variant
     ================================================================= */
 
  .aa-btn {
    --line-rgb: 0, 0, 0;
    --overshoot-rgb: 0, 0, 0;
    --text-color: #000;
    --button-bg: #fff;
 
    --top-left: 13px;
    --top-right: 6px;
    --right-top: 6px;
    --right-bottom: 10px;
    --bottom-left: 5px;
    --bottom-right: 15px;
    --left-top: 11px;
    --left-bottom: 6px;
    --line-thickness: 1px;
 
    /* Must be >= largest overshoot value */
    --_pad: 40px;
 
    /* ── Computed sizes & positions (used by variants) ── */
 
    /* Rest = flush with button edges */
    --_sz-top:    calc(100% - var(--_pad) * 2);
    --_sz-right:  calc(100% - var(--_pad) * 2);
    --_sz-bottom: calc(100% - var(--_pad) * 2);
    --_sz-left:   calc(100% - var(--_pad) * 2);
    --_pos-top-x:    var(--_pad);
    --_pos-right-y:  var(--_pad);
    --_pos-bottom-x: var(--_pad);
    --_pos-left-y:   var(--_pad);
 
    /* Hover = extended by overshoots */
    --_sz-top-h:    calc(100% - var(--_pad) * 2 + var(--top-left) + var(--top-right));
    --_sz-right-h:  calc(100% - var(--_pad) * 2 + var(--right-top) + var(--right-bottom));
    --_sz-bottom-h: calc(100% - var(--_pad) * 2 + var(--bottom-left) + var(--bottom-right));
    --_sz-left-h:   calc(100% - var(--_pad) * 2 + var(--left-top) + var(--left-bottom));
    --_pos-top-x-h:    calc(var(--_pad) - var(--top-left));
    --_pos-right-y-h:  calc(var(--_pad) - var(--right-top));
    --_pos-bottom-x-h: calc(var(--_pad) - var(--bottom-left));
    --_pos-left-y-h:   calc(var(--_pad) - var(--left-top));
 
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 34px;
    background: var(--button-bg);
    color: var(--text-color);
    border: 0;
    cursor: pointer;
    overflow: visible;
    font: 600 14px/1 sans-serif;
    letter-spacing: .08em;
    appearance: none;
    -webkit-appearance: none;
  }
 
  /* Inner border (::after) */
  .aa-btn::after {
    content: "";
    position: absolute;
    inset: 4px;
    border: 1px solid color-mix(in srgb, var(--text-color) 25%, transparent);
    opacity: 0;
    transition: opacity .6s cubic-bezier(.22,.61,.36,1) .1s;
    pointer-events: none;
  }
 
  .aa-btn:hover::after { opacity: 1; }
 
  /* Lines canvas (::before) */
  .aa-btn::before {
    content: "";
    position: absolute;
    inset: calc(var(--_pad) * -1);
    pointer-events: none;
    background-repeat: no-repeat;
    transition:
      background-size .38s cubic-bezier(.22,.61,.36,1),
      background-position .38s cubic-bezier(.22,.61,.36,1);
  }
 
  /* ── Default rest state ── */
  .aa-btn::before {
    background-size:
      var(--_sz-top)     var(--line-thickness),
      var(--line-thickness) var(--_sz-right),
      var(--_sz-bottom)  var(--line-thickness),
      var(--line-thickness) var(--_sz-left);
    background-position:
      var(--_pos-top-x)    var(--_pad),
      calc(100% - var(--_pad)) var(--_pos-right-y),
      var(--_pos-bottom-x) calc(100% - var(--_pad)),
      var(--_pad)          var(--_pos-left-y);
  }
 
  /* ── Default hover state ── */
  .aa-btn:hover::before {
    background-size:
      var(--_sz-top-h)     var(--line-thickness),
      var(--line-thickness) var(--_sz-right-h),
      var(--_sz-bottom-h)  var(--line-thickness),
      var(--line-thickness) var(--_sz-left-h);
    background-position:
      var(--_pos-top-x-h)    var(--_pad),
      calc(100% - var(--_pad)) var(--_pos-right-y-h),
      var(--_pos-bottom-x-h) calc(100% - var(--_pad)),
      var(--_pad)             var(--_pos-left-y-h);
  }
 
 
  /* =================================================================
     GRADIENT used by gradient-border
 
     Percentage-based stops with a tight ~12% fade zone on each end.
     At rest (~120px) the fade is only ~14px → border looks nearly
     solid. On hover the line grows, fade stays proportional.
     Reaches true transparent (0) at the tips.
     ================================================================= */
 
  .aa-gradient-border::before {
    background-image:
      linear-gradient(to right,
        rgba(var(--overshoot-rgb), 0),
        rgba(var(--line-rgb), .15)  4%,
        rgba(var(--line-rgb), .55)  8%,
        rgba(var(--line-rgb), 1)   14%,
        rgba(var(--line-rgb), 1)   86%,
        rgba(var(--line-rgb), .55) 92%,
        rgba(var(--line-rgb), .15) 96%,
        rgba(var(--overshoot-rgb), 0)),
      linear-gradient(to bottom,
        rgba(var(--overshoot-rgb), 0),
        rgba(var(--line-rgb), .15)  4%,
        rgba(var(--line-rgb), .55)  8%,
        rgba(var(--line-rgb), 1)   14%,
        rgba(var(--line-rgb), 1)   86%,
        rgba(var(--line-rgb), .55) 92%,
        rgba(var(--line-rgb), .15) 96%,
        rgba(var(--overshoot-rgb), 0)),
      linear-gradient(to right,
        rgba(var(--overshoot-rgb), 0),
        rgba(var(--line-rgb), .15)  4%,
        rgba(var(--line-rgb), .55)  8%,
        rgba(var(--line-rgb), 1)   14%,
        rgba(var(--line-rgb), 1)   86%,
        rgba(var(--line-rgb), .55) 92%,
        rgba(var(--line-rgb), .15) 96%,
        rgba(var(--overshoot-rgb), 0)),
      linear-gradient(to bottom,
        rgba(var(--overshoot-rgb), 0),
        rgba(var(--line-rgb), .15)  4%,
        rgba(var(--line-rgb), .55)  8%,
        rgba(var(--line-rgb), 1)   14%,
        rgba(var(--line-rgb), 1)   86%,
        rgba(var(--line-rgb), .55) 92%,
        rgba(var(--line-rgb), .15) 96%,
        rgba(var(--overshoot-rgb), 0));
  }
 
 
  /* =================================================================
     PLAIN BORDER + PLAIN (filled)
     Pixel stops keyed to each side's overshoot distance.
     For plain-border: box-shadow masks the inner gradient → solid.
     For plain: button background masks the inner gradient → invisible.
     Beyond the button edge, no mask → smooth taper appears.
     ================================================================= */
 
  .aa-plain-border {
    box-shadow:
      inset 0 var(--line-thickness) 0 0 rgb(var(--line-rgb)),
      inset 0 calc(var(--line-thickness) * -1) 0 0 rgb(var(--line-rgb)),
      inset var(--line-thickness) 0 0 0 rgb(var(--line-rgb)),
      inset calc(var(--line-thickness) * -1) 0 0 0 rgb(var(--line-rgb));
  }
 
  .aa-plain-border::before,
  .aa-plain::before {
    background-image:
      linear-gradient(to right,
        rgba(var(--overshoot-rgb), 0),
        rgba(var(--line-rgb), .15) calc(var(--top-left) * .3),
        rgba(var(--line-rgb), .55) calc(var(--top-left) * .6),
        rgba(var(--line-rgb), 1)   var(--top-left),
        rgba(var(--line-rgb), 1)   calc(100% - var(--top-right)),
        rgba(var(--line-rgb), .55) calc(100% - var(--top-right) * .6),
        rgba(var(--line-rgb), .15) calc(100% - var(--top-right) * .3),
        rgba(var(--overshoot-rgb), 0)),
      linear-gradient(to bottom,
        rgba(var(--overshoot-rgb), 0),
        rgba(var(--line-rgb), .15) calc(var(--right-top) * .3),
        rgba(var(--line-rgb), .55) calc(var(--right-top) * .6),
        rgba(var(--line-rgb), 1)   var(--right-top),
        rgba(var(--line-rgb), 1)   calc(100% - var(--right-bottom)),
        rgba(var(--line-rgb), .55) calc(100% - var(--right-bottom) * .6),
        rgba(var(--line-rgb), .15) calc(100% - var(--right-bottom) * .3),
        rgba(var(--overshoot-rgb), 0)),
      linear-gradient(to right,
        rgba(var(--overshoot-rgb), 0),
        rgba(var(--line-rgb), .15) calc(var(--bottom-left) * .3),
        rgba(var(--line-rgb), .55) calc(var(--bottom-left) * .6),
        rgba(var(--line-rgb), 1)   var(--bottom-left),
        rgba(var(--line-rgb), 1)   calc(100% - var(--bottom-right)),
        rgba(var(--line-rgb), .55) calc(100% - var(--bottom-right) * .6),
        rgba(var(--line-rgb), .15) calc(100% - var(--bottom-right) * .3),
        rgba(var(--overshoot-rgb), 0)),
      linear-gradient(to bottom,
        rgba(var(--overshoot-rgb), 0),
        rgba(var(--line-rgb), .15) calc(var(--left-top) * .3),
        rgba(var(--line-rgb), .55) calc(var(--left-top) * .6),
        rgba(var(--line-rgb), 1)   var(--left-top),
        rgba(var(--line-rgb), 1)   calc(100% - var(--left-bottom)),
        rgba(var(--line-rgb), .55) calc(100% - var(--left-bottom) * .6),
        rgba(var(--line-rgb), .15) calc(100% - var(--left-bottom) * .3),
        rgba(var(--overshoot-rgb), 0));
  }
 
 
  /* =================================================================
     BORDER INVERTED — INK FLOOD
     Starts expanded with solid border + plain-border gradient.
     On hover → borders contract + ink sweeps left-to-right.
     Text inverts. Press on :active. Zero extra elements.
     ================================================================= */
 
  .aa-border-inverted {
    /* Ink defaults: white bg, black flood, white text on hover.
       Use .aa-ink-light for the reverse. */
    --ink-bg: #fff;
    --ink-fill: #000;
    --ink-text: #fff;
 
    box-shadow:
      inset 0 var(--line-thickness) 0 0 rgb(var(--line-rgb)),
      inset 0 calc(var(--line-thickness) * -1) 0 0 rgb(var(--line-rgb)),
      inset var(--line-thickness) 0 0 0 rgb(var(--line-rgb)),
      inset calc(var(--line-thickness) * -1) 0 0 0 rgb(var(--line-rgb));
 
    /* Ink sweep layer (off-screen right) over solid bg */
    background:
      linear-gradient(
        105deg,
        var(--ink-fill) 40%,
        color-mix(in srgb, var(--ink-fill) 60%, transparent) 47%,
        transparent 53%
      )
        no-repeat 100% 0 / 250% 100%,
      var(--ink-bg);
 
    transition:
      color .28s cubic-bezier(.22,.61,.36,1) .12s,
      background-position .45s cubic-bezier(.4, 0, .2, 1),
      transform .15s cubic-bezier(.22,.61,.36,1);
  }
 
  .aa-border-inverted:hover {
    --text-color: var(--ink-text);
    color: var(--ink-text);
    background-position: 0% 0, 0 0;
  }
 
  .aa-border-inverted:active {
    transform: scale(.97);
    transition:
      color .28s cubic-bezier(.22,.61,.36,1) .12s,
      background-position .45s cubic-bezier(.4, 0, .2, 1),
      transform .06s cubic-bezier(.22,.61,.36,1);
  }
 
  /* Plain-border gradient for overshoot lines */
  .aa-border-inverted::before {
    background-image:
      linear-gradient(to right,
        rgba(var(--overshoot-rgb), 0),
        rgba(var(--line-rgb), .15) calc(var(--top-left) * .3),
        rgba(var(--line-rgb), .55) calc(var(--top-left) * .6),
        rgba(var(--line-rgb), 1)   var(--top-left),
        rgba(var(--line-rgb), 1)   calc(100% - var(--top-right)),
        rgba(var(--line-rgb), .55) calc(100% - var(--top-right) * .6),
        rgba(var(--line-rgb), .15) calc(100% - var(--top-right) * .3),
        rgba(var(--overshoot-rgb), 0)),
      linear-gradient(to bottom,
        rgba(var(--overshoot-rgb), 0),
        rgba(var(--line-rgb), .15) calc(var(--right-top) * .3),
        rgba(var(--line-rgb), .55) calc(var(--right-top) * .6),
        rgba(var(--line-rgb), 1)   var(--right-top),
        rgba(var(--line-rgb), 1)   calc(100% - var(--right-bottom)),
        rgba(var(--line-rgb), .55) calc(100% - var(--right-bottom) * .6),
        rgba(var(--line-rgb), .15) calc(100% - var(--right-bottom) * .3),
        rgba(var(--overshoot-rgb), 0)),
      linear-gradient(to right,
        rgba(var(--overshoot-rgb), 0),
        rgba(var(--line-rgb), .15) calc(var(--bottom-left) * .3),
        rgba(var(--line-rgb), .55) calc(var(--bottom-left) * .6),
        rgba(var(--line-rgb), 1)   var(--bottom-left),
        rgba(var(--line-rgb), 1)   calc(100% - var(--bottom-right)),
        rgba(var(--line-rgb), .55) calc(100% - var(--bottom-right) * .6),
        rgba(var(--line-rgb), .15) calc(100% - var(--bottom-right) * .3),
        rgba(var(--overshoot-rgb), 0)),
      linear-gradient(to bottom,
        rgba(var(--overshoot-rgb), 0),
        rgba(var(--line-rgb), .15) calc(var(--left-top) * .3),
        rgba(var(--line-rgb), .55) calc(var(--left-top) * .6),
        rgba(var(--line-rgb), 1)   var(--left-top),
        rgba(var(--line-rgb), 1)   calc(100% - var(--left-bottom)),
        rgba(var(--line-rgb), .55) calc(100% - var(--left-bottom) * .6),
        rgba(var(--line-rgb), .15) calc(100% - var(--left-bottom) * .3),
        rgba(var(--overshoot-rgb), 0));
  }
 
  /* Rest = expanded */
  .aa-border-inverted::before {
    background-size:
      var(--_sz-top-h)     var(--line-thickness),
      var(--line-thickness) var(--_sz-right-h),
      var(--_sz-bottom-h)  var(--line-thickness),
      var(--line-thickness) var(--_sz-left-h);
    background-position:
      var(--_pos-top-x-h)    var(--_pad),
      calc(100% - var(--_pad)) var(--_pos-right-y-h),
      var(--_pos-bottom-x-h) calc(100% - var(--_pad)),
      var(--_pad)             var(--_pos-left-y-h);
  }
 
  /* Hover = contracted */
  .aa-border-inverted:hover::before {
    background-size:
      var(--_sz-top)     var(--line-thickness),
      var(--line-thickness) var(--_sz-right),
      var(--_sz-bottom)  var(--line-thickness),
      var(--line-thickness) var(--_sz-left);
    background-position:
      var(--_pos-top-x)    var(--_pad),
      calc(100% - var(--_pad)) var(--_pos-right-y),
      var(--_pos-bottom-x) calc(100% - var(--_pad)),
      var(--_pad)          var(--_pos-left-y);
  }
 
  /* Inner border: visible at rest, color inverts on hover */
  .aa-border-inverted::after {
    opacity: 1;
    transition:
      border-color .28s cubic-bezier(.22,.61,.36,1) .12s;
  }
  .aa-border-inverted:hover::after {
    border-color: color-mix(in srgb, var(--ink-text) 20%, transparent);
  }
 
 
  /* =================================================================
     PLAIN BORDER INVERTED
     Starts expanded with solid border + gradient overshoots.
     On hover → contracts to flush solid border.
     Same gradient as plain-border, same box-shadow.
     ================================================================= */
 
  .aa-plain-border-inverted {
    box-shadow:
      inset 0 var(--line-thickness) 0 0 rgb(var(--line-rgb)),
      inset 0 calc(var(--line-thickness) * -1) 0 0 rgb(var(--line-rgb)),
      inset var(--line-thickness) 0 0 0 rgb(var(--line-rgb)),
      inset calc(var(--line-thickness) * -1) 0 0 0 rgb(var(--line-rgb));
  }
 
  .aa-plain-border-inverted::before {
    background-image:
      linear-gradient(to right,
        rgba(var(--overshoot-rgb), 0),
        rgba(var(--line-rgb), .15) calc(var(--top-left) * .3),
        rgba(var(--line-rgb), .55) calc(var(--top-left) * .6),
        rgba(var(--line-rgb), 1)   var(--top-left),
        rgba(var(--line-rgb), 1)   calc(100% - var(--top-right)),
        rgba(var(--line-rgb), .55) calc(100% - var(--top-right) * .6),
        rgba(var(--line-rgb), .15) calc(100% - var(--top-right) * .3),
        rgba(var(--overshoot-rgb), 0)),
      linear-gradient(to bottom,
        rgba(var(--overshoot-rgb), 0),
        rgba(var(--line-rgb), .15) calc(var(--right-top) * .3),
        rgba(var(--line-rgb), .55) calc(var(--right-top) * .6),
        rgba(var(--line-rgb), 1)   var(--right-top),
        rgba(var(--line-rgb), 1)   calc(100% - var(--right-bottom)),
        rgba(var(--line-rgb), .55) calc(100% - var(--right-bottom) * .6),
        rgba(var(--line-rgb), .15) calc(100% - var(--right-bottom) * .3),
        rgba(var(--overshoot-rgb), 0)),
      linear-gradient(to right,
        rgba(var(--overshoot-rgb), 0),
        rgba(var(--line-rgb), .15) calc(var(--bottom-left) * .3),
        rgba(var(--line-rgb), .55) calc(var(--bottom-left) * .6),
        rgba(var(--line-rgb), 1)   var(--bottom-left),
        rgba(var(--line-rgb), 1)   calc(100% - var(--bottom-right)),
        rgba(var(--line-rgb), .55) calc(100% - var(--bottom-right) * .6),
        rgba(var(--line-rgb), .15) calc(100% - var(--bottom-right) * .3),
        rgba(var(--overshoot-rgb), 0)),
      linear-gradient(to bottom,
        rgba(var(--overshoot-rgb), 0),
        rgba(var(--line-rgb), .15) calc(var(--left-top) * .3),
        rgba(var(--line-rgb), .55) calc(var(--left-top) * .6),
        rgba(var(--line-rgb), 1)   var(--left-top),
        rgba(var(--line-rgb), 1)   calc(100% - var(--left-bottom)),
        rgba(var(--line-rgb), .55) calc(100% - var(--left-bottom) * .6),
        rgba(var(--line-rgb), .15) calc(100% - var(--left-bottom) * .3),
        rgba(var(--overshoot-rgb), 0));
  }
 
  /* Rest = expanded */
  .aa-plain-border-inverted::before {
    background-size:
      var(--_sz-top-h)     var(--line-thickness),
      var(--line-thickness) var(--_sz-right-h),
      var(--_sz-bottom-h)  var(--line-thickness),
      var(--line-thickness) var(--_sz-left-h);
    background-position:
      var(--_pos-top-x-h)    var(--_pad),
      calc(100% - var(--_pad)) var(--_pos-right-y-h),
      var(--_pos-bottom-x-h) calc(100% - var(--_pad)),
      var(--_pad)             var(--_pos-left-y-h);
  }
 
  /* Hover = contracted */
  .aa-plain-border-inverted:hover::before {
    background-size:
      var(--_sz-top)     var(--line-thickness),
      var(--line-thickness) var(--_sz-right),
      var(--_sz-bottom)  var(--line-thickness),
      var(--line-thickness) var(--_sz-left);
    background-position:
      var(--_pos-top-x)    var(--_pad),
      calc(100% - var(--_pad)) var(--_pos-right-y),
      var(--_pos-bottom-x) calc(100% - var(--_pad)),
      var(--_pad)          var(--_pos-left-y);
  }
 
  .aa-plain-border-inverted::after { opacity: 1; }
  .aa-plain-border-inverted:hover::after { opacity: 0; }
 
 
  /* =================================================================
     PLAIN INVERTED — INK DRAIN
     Filled button that starts expanded. On hover → borders contract
     + fill sweeps away left-to-right, revealing transparent beneath.
     Text inverts. Press on :active. Mirror of border-inverted flood.
     ================================================================= */
 
  .aa-plain-inverted {
    /* Gradient flipped vs flood: transparent left, solid right.
       Rest at 100% = solid covers. Hover at 0% = solid slides off
       to the right. Soft diagonal edge sweeps left-to-right — 
       same direction and feel as the flood. */
    background:
      linear-gradient(
        105deg,
        transparent 47%,
        color-mix(in srgb, var(--button-bg) 60%, transparent) 53%,
        var(--button-bg) 60%
      )
        no-repeat 100% 0 / 250% 100%,
      transparent;
 
    box-shadow:
      inset 0 var(--line-thickness) 0 0 rgb(var(--line-rgb)),
      inset 0 calc(var(--line-thickness) * -1) 0 0 rgb(var(--line-rgb)),
      inset var(--line-thickness) 0 0 0 rgb(var(--line-rgb)),
      inset calc(var(--line-thickness) * -1) 0 0 0 rgb(var(--line-rgb));
 
    transition:
      color .28s cubic-bezier(.22,.61,.36,1) .12s,
      background-position .45s cubic-bezier(.4, 0, .2, 1),
      transform .15s cubic-bezier(.22,.61,.36,1);
  }
 
  .aa-plain-inverted:hover {
    --text-color: var(--drain-text);
    color: var(--drain-text);
    background-position: 0% 0, 0 0;
  }
 
  .aa-plain-inverted:active {
    transform: scale(.97);
    transition:
      color .28s cubic-bezier(.22,.61,.36,1) .12s,
      background-position .45s cubic-bezier(.4, 0, .2, 1),
      transform .06s cubic-bezier(.22,.61,.36,1);
  }
 
  /* Plain-border gradient for overshoot lines */
  .aa-plain-inverted::before {
    background-image:
      linear-gradient(to right,
        rgba(var(--overshoot-rgb), 0),
        rgba(var(--line-rgb), .15) calc(var(--top-left) * .3),
        rgba(var(--line-rgb), .55) calc(var(--top-left) * .6),
        rgba(var(--line-rgb), 1)   var(--top-left),
        rgba(var(--line-rgb), 1)   calc(100% - var(--top-right)),
        rgba(var(--line-rgb), .55) calc(100% - var(--top-right) * .6),
        rgba(var(--line-rgb), .15) calc(100% - var(--top-right) * .3),
        rgba(var(--overshoot-rgb), 0)),
      linear-gradient(to bottom,
        rgba(var(--overshoot-rgb), 0),
        rgba(var(--line-rgb), .15) calc(var(--right-top) * .3),
        rgba(var(--line-rgb), .55) calc(var(--right-top) * .6),
        rgba(var(--line-rgb), 1)   var(--right-top),
        rgba(var(--line-rgb), 1)   calc(100% - var(--right-bottom)),
        rgba(var(--line-rgb), .55) calc(100% - var(--right-bottom) * .6),
        rgba(var(--line-rgb), .15) calc(100% - var(--right-bottom) * .3),
        rgba(var(--overshoot-rgb), 0)),
      linear-gradient(to right,
        rgba(var(--overshoot-rgb), 0),
        rgba(var(--line-rgb), .15) calc(var(--bottom-left) * .3),
        rgba(var(--line-rgb), .55) calc(var(--bottom-left) * .6),
        rgba(var(--line-rgb), 1)   var(--bottom-left),
        rgba(var(--line-rgb), 1)   calc(100% - var(--bottom-right)),
        rgba(var(--line-rgb), .55) calc(100% - var(--bottom-right) * .6),
        rgba(var(--line-rgb), .15) calc(100% - var(--bottom-right) * .3),
        rgba(var(--overshoot-rgb), 0)),
      linear-gradient(to bottom,
        rgba(var(--overshoot-rgb), 0),
        rgba(var(--line-rgb), .15) calc(var(--left-top) * .3),
        rgba(var(--line-rgb), .55) calc(var(--left-top) * .6),
        rgba(var(--line-rgb), 1)   var(--left-top),
        rgba(var(--line-rgb), 1)   calc(100% - var(--left-bottom)),
        rgba(var(--line-rgb), .55) calc(100% - var(--left-bottom) * .6),
        rgba(var(--line-rgb), .15) calc(100% - var(--left-bottom) * .3),
        rgba(var(--overshoot-rgb), 0));
  }
 
  /* Rest = expanded */
  .aa-plain-inverted::before {
    background-size:
      var(--_sz-top-h)     var(--line-thickness),
      var(--line-thickness) var(--_sz-right-h),
      var(--_sz-bottom-h)  var(--line-thickness),
      var(--line-thickness) var(--_sz-left-h);
    background-position:
      var(--_pos-top-x-h)    var(--_pad),
      calc(100% - var(--_pad)) var(--_pos-right-y-h),
      var(--_pos-bottom-x-h) calc(100% - var(--_pad)),
      var(--_pad)             var(--_pos-left-y-h);
  }
 
  /* Hover = contracted */
  .aa-plain-inverted:hover::before {
    background-size:
      var(--_sz-top)     var(--line-thickness),
      var(--line-thickness) var(--_sz-right),
      var(--_sz-bottom)  var(--line-thickness),
      var(--line-thickness) var(--_sz-left);
    background-position:
      var(--_pos-top-x)    var(--_pad),
      calc(100% - var(--_pad)) var(--_pos-right-y),
      var(--_pos-bottom-x) calc(100% - var(--_pad)),
      var(--_pad)          var(--_pos-left-y);
  }
 
  /* Inner border: visible at rest, color inverts on hover */
  .aa-plain-inverted::after {
    opacity: 1;
    transition:
      border-color .28s cubic-bezier(.22,.61,.36,1) .12s;
  }
  .aa-plain-inverted:hover::after {
    border-color: color-mix(in srgb, var(--drain-text) 25%, transparent);
  }
 
 
  /* =================================================================
     COLOR VARIANTS
     ================================================================= */
 
  .aa-black {
    --line-rgb: 0, 0, 0;
    --overshoot-rgb: 0, 0, 0;
    --text-color: #000;
    --button-bg: #fff;
  }
 
  .aa-primary {
    --line-rgb: 165, 149, 144;
    --overshoot-rgb: 165, 149, 144;
    --text-color: #A59590;
    --button-bg: #fff;
  }
 
  .aa-white {
    --line-rgb: 255, 255, 255;
    --overshoot-rgb: 255, 255, 255;
    --text-color: #fff;
    --button-bg: transparent;
  }
 
  .aa-fill-black {
    --line-rgb: 0, 0, 0;
    --overshoot-rgb: 0, 0, 0;
    --text-color: #fff;
    --button-bg: #000;
    --drain-text: #000;
  }
 
  .aa-fill-primary {
    --line-rgb: 165, 149, 144;
    --overshoot-rgb: 165, 149, 144;
    --text-color: #fff;
    --button-bg: #A59590;
    --drain-text: #A59590;
  }
 
  .aa-fill-white {
    --line-rgb: 255, 255, 255;
    --overshoot-rgb: 255, 255, 255;
    --text-color: #111;
    --button-bg: #fff;
    --drain-text: #fff;
  }
 
 
  /* =================================================================
     THICKNESS MODIFIER
     ================================================================= */
 
  .aa-thick {
    --line-thickness: 2px;
  }
 
  /* Dark base modifier — adds white ink flood to ALL inverted variants.
     border-inverted: already has flood, ink-light flips colors
     plain-inverted:  flips drain → flood (white over fill color)
     plain-border-inverted: adds flood (white over transparent) */
  .aa-ink-light {
    --text-color: #fff;
    --ink-bg: #000;
    --ink-fill: #fff;
    --ink-text: #000;
    --drain-text: #fff;
  }
 
  /* plain-inverted + ink-light & plain-border-inverted + ink-light:
     Add white ink flood. Same gradient, timing, press. */
  .aa-plain-inverted.aa-ink-light,
  .aa-plain-border-inverted.aa-ink-light {
    background:
      linear-gradient(
        105deg,
        var(--ink-fill) 40%,
        color-mix(in srgb, var(--ink-fill) 60%, transparent) 47%,
        transparent 53%
      )
        no-repeat 100% 0 / 250% 100%,
      var(--button-bg);
 
    transition:
      color .28s cubic-bezier(.22,.61,.36,1) .12s,
      background-position .45s cubic-bezier(.4, 0, .2, 1),
      transform .15s cubic-bezier(.22,.61,.36,1);
  }
 
  .aa-plain-inverted.aa-ink-light:hover,
  .aa-plain-border-inverted.aa-ink-light:hover {
    --text-color: var(--ink-text);
    color: var(--ink-text);
    background-position: 0% 0, 0 0;
  }
 
  .aa-plain-inverted.aa-ink-light:hover::after,
  .aa-plain-border-inverted.aa-ink-light:hover::after {
    opacity: 1;
    border-color: color-mix(in srgb, var(--ink-text) 20%, transparent);
  }
 
  .aa-plain-inverted.aa-ink-light:active,
  .aa-plain-border-inverted.aa-ink-light:active {
    transform: scale(.97);
    transition:
      color .28s cubic-bezier(.22,.61,.36,1) .12s,
      background-position .45s cubic-bezier(.4, 0, .2, 1),
      transform .06s cubic-bezier(.22,.61,.36,1);
  }

  
  /* =================================================================
     OVERRIDES
     ================================================================ */
  
  .aa-btn.aa-gradient-border.aa-white:hover::after,
  .aa-btn.aa-plain-border.aa-white:hover::after {
    background: #ffffff0d;
  }
  
  .aa-btn.aa-plain.aa-fill-taupe:hover::after {
    background: #ffffff1a;
  }
  
  
 .aa-btn * {
    color: inherit !important;
    fill: inherit !important;
}
  
  .aa-btn a {
    padding: 0;
  }
  
  .aa-btn span {
    font-weight: 600;
    font-size: 18px;
          
  }
  
      /* =================================================================
     Responsive
     ================================================================ */
  
  @media (max-width: 1440px) {
      
      .aa-btn {
        padding: 10px 24px;
      }
      
      .aa-btn span {
        font-size: 16px;
      }
  }
  
  @media (max-width: 1024px) {
      
      .aa-btn {
        padding: 8px 20px;
      }
      
      .aa-btn span {
        font-size: 14px;
      }
      
  }/* End custom CSS */