.elementor-4112 .elementor-element.elementor-element-7fac8ea{--display:flex;--min-height:450px;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-end;--align-items:center;--overlay-opacity:0.15;--padding-top:0px;--padding-bottom:60px;--padding-left:0px;--padding-right:0px;}.elementor-4112 .elementor-element.elementor-element-7fac8ea:not(.elementor-motion-effects-element-type-background), .elementor-4112 .elementor-element.elementor-element-7fac8ea > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://amka.co.za/wp-content/uploads/2026/02/brands-made-for-diversity-scaled.jpg");background-position:-98px -185px;background-repeat:no-repeat;background-size:110% auto;}.elementor-4112 .elementor-element.elementor-element-7fac8ea::before, .elementor-4112 .elementor-element.elementor-element-7fac8ea > .elementor-background-video-container::before, .elementor-4112 .elementor-element.elementor-element-7fac8ea > .e-con-inner > .elementor-background-video-container::before, .elementor-4112 .elementor-element.elementor-element-7fac8ea > .elementor-background-slideshow::before, .elementor-4112 .elementor-element.elementor-element-7fac8ea > .e-con-inner > .elementor-background-slideshow::before, .elementor-4112 .elementor-element.elementor-element-7fac8ea > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#000000;--background-overlay:'';}.elementor-4112 .elementor-element.elementor-element-6af2ba2 .elementor-heading-title{color:#FFFFFF;}.elementor-4112 .elementor-element.elementor-element-e37e5d1{width:var( --container-widget-width, 75% );max-width:75%;--container-widget-width:75%;--container-widget-flex-grow:0;text-align:center;color:#FFFFFF;}.elementor-4112 .elementor-element.elementor-element-e37e5d1.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-4112 .elementor-element.elementor-element-05c9c4d{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:wrap;--padding-top:80px;--padding-bottom:80px;--padding-left:0px;--padding-right:0px;}.elementor-4112 .elementor-element.elementor-element-b014e1a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4112 .elementor-element.elementor-element-4caf3af8{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--overlay-opacity:0.4;--padding-top:100px;--padding-bottom:80px;--padding-left:0px;--padding-right:0px;}.elementor-4112 .elementor-element.elementor-element-4caf3af8:not(.elementor-motion-effects-element-type-background), .elementor-4112 .elementor-element.elementor-element-4caf3af8 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://amka.co.za/wp-content/uploads/2025/06/closeup-shot-business-handshake-cropped-shot-two-people-wearing-formal-suits-shaking-hands-business-handshake-concept-scaled.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-4112 .elementor-element.elementor-element-4caf3af8::before, .elementor-4112 .elementor-element.elementor-element-4caf3af8 > .elementor-background-video-container::before, .elementor-4112 .elementor-element.elementor-element-4caf3af8 > .e-con-inner > .elementor-background-video-container::before, .elementor-4112 .elementor-element.elementor-element-4caf3af8 > .elementor-background-slideshow::before, .elementor-4112 .elementor-element.elementor-element-4caf3af8 > .e-con-inner > .elementor-background-slideshow::before, .elementor-4112 .elementor-element.elementor-element-4caf3af8 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#000000;--background-overlay:'';}.elementor-4112 .elementor-element.elementor-element-27754742{text-align:center;}.elementor-4112 .elementor-element.elementor-element-27754742 .elementor-heading-title{font-size:46px;color:#FFFFFF;}.elementor-4112 .elementor-element.elementor-element-1c940e71 .elementor-button{background-color:#FFFFFF;fill:var( --e-global-color-primary );color:var( --e-global-color-primary );border-radius:0px 0px 0px 0px;padding:20px 0px 20px 0px;}.elementor-4112 .elementor-element.elementor-element-1c940e71 > .elementor-widget-container{margin:25px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-4112 .elementor-element.elementor-element-1c940e71 .elementor-button:hover, .elementor-4112 .elementor-element.elementor-element-1c940e71 .elementor-button:focus{color:#FFFFFF;}.elementor-4112 .elementor-element.elementor-element-1c940e71 .elementor-button:hover svg, .elementor-4112 .elementor-element.elementor-element-1c940e71 .elementor-button:focus svg{fill:#FFFFFF;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-4112 .elementor-element.elementor-element-05c9c4d{--content-width:1200px;}.elementor-4112 .elementor-element.elementor-element-b014e1a{--width:100%;}}@media(max-width:1024px){.elementor-4112 .elementor-element.elementor-element-7fac8ea:not(.elementor-motion-effects-element-type-background), .elementor-4112 .elementor-element.elementor-element-7fac8ea > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:0px 0px;}.elementor-4112 .elementor-element.elementor-element-05c9c4d{--padding-top:80px;--padding-bottom:80px;--padding-left:50px;--padding-right:50px;}}@media(max-width:767px){.elementor-4112 .elementor-element.elementor-element-7fac8ea:not(.elementor-motion-effects-element-type-background), .elementor-4112 .elementor-element.elementor-element-7fac8ea > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:center center;background-size:cover;}.elementor-4112 .elementor-element.elementor-element-05c9c4d{--padding-top:50px;--padding-bottom:50px;--padding-left:20px;--padding-right:20px;}.elementor-4112 .elementor-element.elementor-element-b014e1a{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4112 .elementor-element.elementor-element-1a67d90 > .elementor-widget-container{padding:0px 0px 0px 0px;}}/* Start custom CSS for container, class: .elementor-element-b014e1a *//* ---------- Card base ---------- */
.amka-brand-card{
  position:relative; display:block; text-decoration:none; color:inherit;
  width:100%; aspect-ratio:1/1; overflow:hidden; transition:transform .3s ease;
  --cut:54px;                    /* top-right notch size */
  --brand-color:#000;            /* overridden per card inline */
}
.amka-brand-card:hover{ transform: translateY(-10px); }

/* ---------- Inner shape (square with top-right cut) ---------- */
.amka-card-shape{
  position:relative; width:100%; height:100%; display:grid; place-items:center; background:white;
  clip-path: polygon(0% 0%,
                     calc(100% - var(--cut)) 0%,
                     100% var(--cut),
                     100% 100%,
                     0% 100%);
}

/* ---------- Logo ---------- */
.brand-logo{
  width:auto !important; height:auto !important; max-width:40%; max-height:50%;
  object-fit:contain; display:block;
}
.brand-icon-placeholder{ font-size:1.5rem; font-weight:700; color:#000; text-align:center; }

/* ---------- Pure-CSS edge draw ---------- */
.amka-card-shape .edge{
  position:absolute; background:#bdbdbd; pointer-events:none;
  will-change: transform; backface-visibility:hidden;
}

/* Thicknesses */
:root{
  --edge-grey: 2px;   /* base outline thickness */
  --edge-col:  3px;   /* animated outline thickness */
}

/* GREY base (always visible) */
.amka-card-shape .edge.base{ background:#bdbdbd; }

/* Top (left→right until the notch) */
.amka-card-shape .edge.base.e1{
  top:0; left:0; height:var(--edge-grey);
  width: calc(100% - var(--cut));
}

/* Diagonal notch: start at (100%-cut,0) and go to (100%,cut) */
.amka-card-shape .edge.base.e2{
  position:absolute;
  height:var(--edge-grey);
  width: calc(var(--cut) * 1.41421356237); /* cut * sqrt(2) */
  top:28px; right:-50px;
  transform:
    translate(calc(var(--cut)*-0.5), calc(var(--cut)*-0.5))
    rotate(45deg);
  transform-origin: left top;
}

/* Right side */
.amka-card-shape .edge.base.e3{
  top: var(--cut); right:0; width:var(--edge-grey);
  height: calc(100% - var(--cut));
}

/* Bottom side */
.amka-card-shape .edge.base.e4{
  bottom:0; left:0; height:var(--edge-grey); width:100%;
}

/* Left side */
.amka-card-shape .edge.base.e5{
  top:0; left:0; width:var(--edge-grey); height:100%;
}

/* ---------- Animated colour stroke ---------- */
.amka-card-shape .edge.anim{ background:var(--brand-color); }

/* Top */
.amka-card-shape .edge.anim.e1{
  top: calc(-0.5 * (var(--edge-col) - var(--edge-grey)));
  left:0; height:var(--edge-col); width: calc(100% - var(--cut));
  transform-origin:left center; transform: scaleX(0);
}

/* Diagonal */
.amka-card-shape .edge.anim.e2{
  height:var(--edge-col);
  width: calc(var(--cut) * 1.41421356237);
  top:0; right:0;
  transform-origin:left center;
  transform:
    translate(calc(var(--cut)*-0.5), calc(var(--cut)*-0.5))
    rotate(45deg) scaleX(0);
}

/* Right */
.amka-card-shape .edge.anim.e3{
  top: var(--cut);
  right: calc(-0.5 * (var(--edge-col) - var(--edge-grey)));
  width:var(--edge-col); height: calc(100% - var(--cut));
  transform-origin:center top; transform: scaleY(0);
}

/* Bottom */
.amka-card-shape .edge.anim.e4{
  bottom: calc(-0.5 * (var(--edge-col) - var(--edge-grey)));
  left:0; height:var(--edge-col); width:100%;
  transform-origin:right center; transform: scaleX(0);
}

/* Left */
.amka-card-shape .edge.anim.e5{
  top:0;
  left: calc(-0.5 * (var(--edge-col) - var(--edge-grey)));
  width:var(--edge-col); height:100%;
  transform-origin:center bottom; transform: scaleY(0);
}

/* Draw sequence (top → diag → right → bottom → left) */
.amka-card-shape .edge.anim{ transition-timing-function:ease; }
.amka-brand-card:hover .amka-card-shape .edge.anim.e1{ transition: transform .13s;            transform: scaleX(1); }
.amka-brand-card:hover .amka-card-shape .edge.anim.e2{ transition: transform .09s .13s;       top: 26px; right: -49px; transform: translate(calc(var(--cut)*-0.5), calc(var(--cut)*-0.5)) rotate(45deg) scaleX(1); }
.amka-brand-card:hover .amka-card-shape .edge.anim.e3{ transition: transform .18s .22s;       transform: scaleY(1); }
.amka-brand-card:hover .amka-card-shape .edge.anim.e4{ transition: transform .21s .40s;       transform: scaleX(1); }
.amka-brand-card:hover .amka-card-shape .edge.anim.e5{ transition: transform .21s .63s;       transform: scaleY(1); }

/* ---------- Filter & Layout ---------- */

/* make room only while stuck */
.amka-brand-filters { position: sticky; top: 2rem; }
.amka-brand-filters.is-stuck { top: var(--sticky-top, 2rem); }

/* when filter="none" was used on the shortcode */
.amka-brand-browser.no-filters { grid-template-columns: 1fr; }
.amka-brand-browser.no-filters .amka-brand-filters { display: none; }

/* ===== Improved Layout: flex instead of grid ===== */
:root{
  --header-offset: 96px;   /* approximate height of the fixed header */
  --sticky-gap: 16px;
}

/* Wrapper: sidebar + brand grid */
.amka-brand-browser{
  display:flex !important;
  gap:3rem;
  align-items:flex-start;
  flex-wrap:nowrap;
}

/* Sidebar (sticky) */
.amka-brand-filters{
  flex:0 0 340px;
  max-width:340px;
  position:sticky;
  top:calc(var(--header-offset) + var(--sticky-gap));
  align-self:flex-start;
}

/* Brand grid (cards) */
#amka-brand-grid{
  flex:1 1 auto;
}

/* Responsive stack */
@media (max-width:1024px){
  .amka-brand-browser{ display:block !important; }
  .amka-brand-filters{
    position:static;
    margin-bottom:2rem;
  }
}

/* Elementor shortcode fix */
.elementor-shortcode > .amka-brand-browser{
  display:flex !important;
}


/* Dynamic columns via shortcode attribute */
.amka-brand-grid-wrapper {
  --cols: 3;
}
.amka-brand-grid-wrapper .amka-brand-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(220px, 1fr));
  gap: 2rem;
}

/* Responsive fallbacks */
@media (max-width: 1024px) {
  .amka-brand-grid-wrapper .amka-brand-grid {
    grid-template-columns: repeat(2, minmax(200px, 1fr));
  }
}
@media (max-width: 768px) {
  .amka-brand-grid-wrapper .amka-brand-grid {
    grid-template-columns: 1fr 1fr;
  }
}


/* ---------- Brand grid ---------- */
#amka-brand-grid.is-loading{ opacity:.5; pointer-events:none; }
.amka-brand-grid{ display:grid; grid-template-columns:repeat(3, minmax(220px,1fr)); gap:2rem; }
@media (max-width:1024px){ .amka-brand-grid{ grid-template-columns:repeat(2, minmax(200px,1fr)); } }
@media (max-width:768px){ .amka-brand-grid{ grid-template-columns:1fr 1fr; } }

/* ---------- Filter styling ---------- */
.amka-search-label{ display:block; font-weight:600; margin-bottom:.25rem; }
.amka-search-wrap{ margin-bottom:1rem; }
.amka-filter-heading{ font-weight:700; margin:1rem 0 .5rem; }
.amka-filter-level{ list-style:none; padding-left:0; margin:.25rem 0; }
.amka-filter-level-1{ margin-left:1rem; }
.amka-filter-level-2{ margin-left:2rem; }
.amka-filter-check{ display:flex; align-items:center; gap:.5rem; cursor:pointer; }
.amka-filter-count{ opacity:.65; font-size:.9em; }

/* ---------- Search input ---------- */
#amka-brand-search{ border:none; border-bottom:1px solid gray; padding:5px; width:100%; }
#amka-brand-search:focus{ outline:none; }/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-27754742 */.elementor-4112 .elementor-element.elementor-element-27754742 span{
    font-size: 30px;
    padding-bottom: 20px !important;
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-1c940e71 */.elementor-4112 .elementor-element.elementor-element-1c940e71 {
    width: 230px;
  height:50px;
  transition: background 200ms ease;
}


.elementor-4112 .elementor-element.elementor-element-1c940e71 .elementor-button-link{
    width: 230px;
  height:50px;
  background: white;
    clip-path: polygon(
    0 0,
    calc(100% - 20px) 0,
    100% 20px,
    100% 100%,
    0 100%
  );
  transition: background 200ms ease;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.elementor-4112 .elementor-element.elementor-element-1c940e71 .elementor-button-link a{
    color: black !important;
}
.elementor-4112 .elementor-element.elementor-element-1c940e71 .elementor-button-link:hover {
    cursor: pointer;
  background: black;
}


.elementor-4112 .elementor-element.elementor-element-1c940e71 .elementor-button-linkr:hover a{
    color: white !important;
}/* End custom CSS */