/* CMS Colour Gradient of Tech Tag Pills — moved from the Webflow page <head> code. */
/* Pill base: no fill,*/
.pill{
  position: relative;
  border: none;            /* we simulate the border */
  border-radius: 0.5em;      /* exact radius */
  background: transparent; /* keep interior transparent */
}
/* Draw a 1px gradient ring only */
.pill::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 0.12em; /* exact "border" thickness */
  background: linear-gradient(to top right, var(--c1), var(--c2));
  /* punch out the center so only the ring remains */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
/* Map gradients by tag name (case-sensitive) */
.pill[data-tech-tag="Modelling"]              { --c1:#FFF34A; --c2:#D5C71A; }
.pill[data-tech-tag="Computation"]            { --c1:#83D337; --c2:#54D149; }
.pill[data-tech-tag="BIM"]                    { --c1:#7BD3E6; --c2:#44B4FF; }
.pill[data-tech-tag="Visualization"]          { --c1:#2091FF; --c2:#0041AC; }
.pill[data-tech-tag="Immersive"]              { --c1:#C100C2; --c2:#EA00A7; }
/* note the casing: Ai (not AI) */
.pill[data-tech-tag="Ai"]                     { --c1:#FF434C; --c2:#D4061B; }
.pill[data-tech-tag="Digital Fabrication"]    { --c1:#FE761D; --c2:#FF5531; }
.pill[data-tech-tag="Technology"]             { --c1:#B3B3B3; --c2:#6E6E6E; }