/* ==========================================================================
   Active Pro – site styles
   Rebuilt 2026 from the 2012 table layout. Same artwork, same copy; modern
   CSS (custom properties, grid/flex, responsive below 960px), no jQuery.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Theme tokens (values lifted from the original style.css / artwork)
   -------------------------------------------------------------------------- */
:root {
  --frame: 940px;              /* fixed design width of the original site */

  --red: #ff0000;              /* active nav item, tab arrow, bullets */
  --blue: #76c3ec;             /* tab divider */
  --blue-btn: #0a5eb6;         /* fill colour of the old submit.png */
  --blue-btn-hover: #0b6bd0;
  --ink: #000;
  --ink-2: #2d2d2d;
  --ink-3: #292929;
  --ink-4: #202020;
  --grey-text: #ccc;
  --white: #fff;
  --panel: rgba(255, 255, 255, 0.96);

  --font-base: "Helvetica", "Helvetica Neue", Arial, sans-serif;
  --font-cond: "Helvetica-Condensed", "Arial Narrow", Arial, sans-serif;
  --font-ui: Arial, Helvetica, sans-serif;

  --fs-10: 10px; --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px;
  --fs-16: 16px; --fs-17: 17px; --fs-18: 18px; --fs-23: 23px; --fs-24: 24px;

  --lh-20: 20px; --lh-24: 24px; --lh-28: 28px;

  --focus: 2px solid #ffd200;  /* visible keyboard focus on dark/blue art */
  --gutter: 16px;
}

/* --------------------------------------------------------------------------
   2. Self-hosted fonts (WOFF2 + WOFF only; EOT/SVG/TTF dropped)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Helvetica-Condensed";
  src: url("../fonts/Helvetica-Condensed.woff2") format("woff2"),
       url("../fonts/Helvetica-Condensed.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica";
  src: url("../fonts/Helvetica.woff2") format("woff2"),
       url("../fonts/Helvetica.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-base);
  font-size: var(--fs-16);
  line-height: 1.3;
}

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

:focus-visible { outline: var(--focus); outline-offset: 2px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 8px; top: -48px;
  padding: 8px 12px; background: var(--white); color: var(--ink);
  font-size: var(--fs-14); z-index: 100;
}
.skip-link:focus { top: 8px; }

/* --------------------------------------------------------------------------
   4. Frame: decorative side strips + 940px centre column
   (replaces the 3-cell table of the original)
   -------------------------------------------------------------------------- */
.frame {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--frame)) minmax(0, 1fr);
  width: 100%;
  min-height: 100vh;
}

.site {
  grid-column: 2;
  width: 100%;
  max-width: var(--frame);
  margin: 0 auto;
  background: var(--white);
}

.side {
  display: none;              /* decorative, only shown on wide screens */
  background-repeat: repeat-x;
  background-position: center -36px;   /* the artwork's textured strip is cropped off */
}
.side::before {
  content: "";
  display: block;
  height: 729px;
  background-repeat: no-repeat;
}
.side-left::before  { background-position: right -36px; }
.side-right::before { background-position: left -36px; }

/* per-page side artwork (same images as before) */
.page-home .side-left    { background-image: url("../images/left.jpg"); }
.page-home .side-left::before  { background-image: url("../images/left_outer.jpg");
 background-image: image-set(url("../images/left_outer.webp") type("image/webp"), url("../images/left_outer.jpg") type("image/jpeg")); }
.page-home .side-right   { background-image: url("../images/right.jpg"); }
.page-home .side-right::before { background-image: url("../images/right_outer.jpg");
 background-image: image-set(url("../images/right_outer.webp") type("image/webp"), url("../images/right_outer.jpg") type("image/jpeg")); }

.page-products .side-left,
.page-business .side-left  { background-image: url("../images/leftpro.jpg"); }
.page-products .side-left::before,
.page-business .side-left::before  { background-image: url("../images/left_pro.jpg");
 background-image: image-set(url("../images/left_pro.webp") type("image/webp"), url("../images/left_pro.jpg") type("image/jpeg")); }
.page-products .side-right,
.page-business .side-right { background-image: url("../images/rightprocon.jpg"); }
.page-products .side-right::before,
.page-business .side-right::before { background-image: url("../images/rightpro.jpg");
 background-image: image-set(url("../images/rightpro.webp") type("image/webp"), url("../images/rightpro.jpg") type("image/jpeg")); }

.page-contact .side-left   { background-image: url("../images/left_con_repeat.jpg"); }
.page-contact .side-left::before   { background-image: url("../images/left_contact.jpg");
 background-image: image-set(url("../images/left_contact.webp") type("image/webp"), url("../images/left_contact.jpg") type("image/jpeg")); }
.page-contact .side-right  { background-image: url("../images/right_con_repeat.jpg"); }
.page-contact .side-right::before  { background-image: url("../images/right_contact.jpg");
 background-image: image-set(url("../images/right_contact.webp") type("image/webp"), url("../images/right_contact.jpg") type("image/jpeg")); }

.page-technology .side-left  { background-image: url("../images/leftt.jpg"); }
.page-technology .side-left::before  { background-image: url("../images/lefttec.jpg");
 background-image: image-set(url("../images/lefttec.webp") type("image/webp"), url("../images/lefttec.jpg") type("image/jpeg")); }
.page-technology .side-right { background-image: url("../images/rightec.jpg"); }
.page-technology .side-right::before { background-image: url("../images/rightouttec.jpg");
 background-image: image-set(url("../images/rightouttec.webp") type("image/webp"), url("../images/rightouttec.jpg") type("image/jpeg")); }

@media (min-width: 1000px) {
  .side { display: block; }
}

/* --------------------------------------------------------------------------
   5. Header + navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: relative;
  background: var(--ink);
  min-height: 69px;            /* was 105px with a 36px textured strip above the menu */
  padding: 24px 0 0;
  color: var(--white);
}
.site-header--home { min-height: 91px; }
.site-header--tech { min-height: 68px; }

.main-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 22px;
  font-family: var(--font-ui);
}
.main-nav li {
  width: 104px;
  border-left: 8px solid var(--white);
  padding-left: 8px;
  line-height: 1.1;
}
.main-nav a {
  display: block;
  color: var(--white);
  text-decoration: none;
  font-size: var(--fs-13);
}
.main-nav a small {
  display: block;
  font-size: var(--fs-11);
  font-weight: normal;
}
.main-nav a:hover,
.main-nav a:focus-visible { text-decoration: underline; }

.main-nav li.is-current { border-left-color: var(--red); }
.main-nav li.is-current a { color: var(--red); font-weight: bold; }

.quicklinks {
  position: absolute;
  right: 0; top: 10px;
  font-size: var(--fs-12);
  color: var(--white);
}
.quicklinks a { color: var(--white); text-decoration: none; }
.quicklinks a:hover,
.quicklinks a:focus-visible { color: var(--grey-text); }

/* --------------------------------------------------------------------------
   6. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--white);
  font-family: var(--font-ui);
  font-size: var(--fs-10);
  font-style: italic;
  color: var(--ink);
  padding: 2px 0;
  min-height: 18px;
}

/* --------------------------------------------------------------------------
   7. Page stages (the 940px artwork panels)
   -------------------------------------------------------------------------- */
.stage {
  position: relative;
  background-repeat: no-repeat;
  background-position: center top;
  background-color: var(--ink);
}

/* Home ------------------------------------------------------------------- */
.hero img { width: 100%; }

.home-strap {
  background-image: url("../images/bg_btm.jpg");
  background-image: image-set(url("../images/bg_btm.webp") type("image/webp"), url("../images/bg_btm.jpg") type("image/jpeg"));
  height: 266px;   /* = artwork height, so the black base matches the side strips */
}
.home-strap h1 {
  width: 500px;
  padding: 120px 0 0 15px;
  color: var(--white);
  font-size: var(--fs-17);
  line-height: var(--lh-28);
  font-weight: bold;
}

/* Products --------------------------------------------------------------- */
.products-stage {
  background-image: url("../images/product-bg.jpg");
  background-image: image-set(url("../images/product-bg.webp") type("image/webp"), url("../images/product-bg.jpg") type("image/jpeg"));
  background-position: center top;
  height: 571px;   /* = artwork height, so the black base matches the side strips */
}
.products-logo { display: none; }     /* the logo is painted into the desktop artwork */
.products-copy {
  position: absolute;
  left: 250px; top: 70px;
  width: 420px;
  z-index: 2;
  font-family: var(--font-cond);
}
.flavours {
  display: flex; flex-wrap: wrap;
  gap: 0 25px;
  font-size: var(--fs-14);
  font-weight: 600;
}
.products-copy p {
  margin-top: 50px;
  font-size: var(--fs-16);
  max-width: 400px;
}
.ingredients-link {
  display: inline-block;
  margin: 20px 0 0 10px;
}

.cans { position: absolute; inset: 0; pointer-events: none; }
.can-set[hidden] { display: none; }
.can--large { position: absolute; left: 550px; top: 30px; }
.can--small {
  position: absolute; left: 380px; top: 188px;
  pointer-events: auto;
  transition: transform .2s ease;
}
.can--small:hover { transform: translateY(-4px); }

/* Business + Technology share the "top-menu" bar and tab panel ---------- */
.business-stage {
  background-image: url("../images/business-bg.jpg");
  background-image: image-set(url("../images/business-bg.webp") type("image/webp"), url("../images/business-bg.jpg") type("image/jpeg"));
  background-position: center top;
  height: 571px;
}
.top-head {
  width: 80%;
  margin: 0 auto;
  padding-top: 20px;
  color: var(--white);
}
.top-head h1 { font-size: var(--fs-24); font-weight: bold; }
.top-head h2 {
  font-family: var(--font-cond);
  font-weight: normal;
  font-size: var(--fs-23);
}

.top-menu {
  display: flex;
  height: 30px;
  margin-top: 13px;
  background: url("../images/1.png") no-repeat left top;
  background: image-set(url("../images/1.webp") type("image/webp"), url("../images/1.png") type("image/png")) no-repeat left top;
  font-family: var(--font-cond);
  font-weight: bold;
  color: var(--ink-3);
}
.top-menu [role="tab"] {
  height: 30px;
  line-height: 30px;
  padding: 0 20px;
  color: var(--ink-3);
  white-space: nowrap;
}
.top-menu [role="tab"]:first-child { width: 170px; text-align: center; padding: 0; }
.top-menu [role="tab"] + [role="tab"] { border-left: 1px solid var(--ink); }
.top-menu [role="tab"]:hover,
.top-menu [role="tab"][aria-selected="true"] { color: var(--ink); text-decoration: underline; }

.panel {
  position: relative;
  width: 754px;
  min-height: 366px;
  margin: 0 auto;
  background: url("../images/wh-bg.png") no-repeat left top / 100% 100%;
  background: image-set(url("../images/wh-bg.webp") type("image/webp"), url("../images/wh-bg.png") type("image/png")) no-repeat left top / 100% 100%;
  font-size: var(--fs-13);
}
.panel[hidden] { display: none; }

.tabs-vertical {
  display: flex;
  align-items: flex-start;
}
.tabs-vertical .tablist {
  flex: 0 0 170px;
  border-right: 1px solid var(--blue);
  font-family: var(--font-cond);
}
.tabs-vertical [role="tab"] {
  display: block;
  width: 100%;
  height: 30px;
  padding: 0 13px;
  line-height: 30px;
  text-align: left;
  font-weight: bold;
  color: var(--ink-2);
  white-space: nowrap;
}
.tabs-vertical [role="tab"]:hover { color: #242424; }
.tabs-vertical [role="tab"][aria-selected="true"] { color: var(--ink); }
.tabs-vertical [role="tab"][aria-selected="true"]::after {
  content: "";
  display: inline-block;
  width: 11px; height: 13px;
  margin-left: 6px;
  vertical-align: middle;
  background: url("../images/left-arow.png") no-repeat;
}

.tabpanel {
  flex: 0 0 572px;
  padding: 12px;
  font-family: var(--font-ui);
  font-size: var(--fs-13);
  line-height: var(--lh-24);
  color: var(--ink-2);
}
.tabpanel[hidden] { display: none; }
.tabpanel h3 {
  font-family: var(--font-base);
  font-weight: normal;
  font-size: var(--fs-18);
  margin-bottom: 4px;
}
.tabpanel--illustrated p { max-width: 330px; }
.tabpanel .figure { position: absolute; }
.figure--print  { top: 80px; right: 10px; }
.figure--tv     { top: 60px; right: 50px; }
.figure--design { top: 60px; right: 20px; }

.link a,
.tabpanel a {
  color: var(--ink-4);
  font-weight: bold;
  font-size: var(--fs-12);
  text-decoration: none;
}
.link a:hover,
.tabpanel a:hover { color: var(--ink); text-decoration: underline; }

/* Technology ------------------------------------------------------------- */
.tech-stage {
  background-image:
    url("../images/technology-banner.jpg"),
    url("../images/bg_middletec.jpg"),
    url("../images/bg-btmtec.jpg");
  background-image: image-set(url("../images/technology-banner.webp") type("image/webp"), url("../images/technology-banner.jpg") type("image/jpeg")),
    image-set(url("../images/bg_middletec.webp") type("image/webp"), url("../images/bg_middletec.jpg") type("image/jpeg")),
    image-set(url("../images/bg-btmtec.webp") type("image/webp"), url("../images/bg-btmtec.jpg") type("image/jpeg"));
  background-position: center top, center top, center 393px;
  background-color: #0a0a0a;
  height: 662px;
  padding-top: 30px;
}
.tech-stage .top-head { padding-top: 0; }
.tech-stage .top-menu [role="tab"]:first-child { width: 150px; }
.tech-content {
  position: relative;
  width: 80%;
  margin: 24px auto 0;
  min-height: 457px;
}
.tech-text {
  width: 520px;
  margin-left: 20px;
  font-family: var(--font-ui);
  font-size: var(--fs-14);
  line-height: var(--lh-24);
  color: var(--ink);
}
.tech-text[hidden] { display: none; }
.tech-text h2 {
  font-family: var(--font-base);
  font-weight: normal;
  font-size: var(--fs-24);
  margin-bottom: 10px;
}
.tech-text p + p { margin-top: 8px; }
.tech-text .source {
  margin-top: 12px;
  font-size: var(--fs-12);
}
.tech-text .source a { color: var(--ink-4); font-weight: bold; text-decoration: none; }
.tech-text .source a:hover { text-decoration: underline; }
.tech-can {
  position: absolute;
  right: -20px; top: 0;
  animation: can-in .9s cubic-bezier(.2,.8,.2,1) both, can-float 5s ease-in-out 1s infinite;
  transform-origin: 50% 90%;
  will-change: transform;
}
@keyframes can-in {
  from { opacity: 0; transform: translateY(40px) rotate(-6deg); }
  to   { opacity: 1; transform: none; }
}
@keyframes can-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-10px) rotate(1.5deg); }
}
.tech-text:not([hidden]) { animation: panel-in .45s ease both; }
@keyframes panel-in {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: none; }
}

/* Contact ---------------------------------------------------------------- */
.contact-stage {
  background-image: url("../images/contact_mid.jpg");
  background-image: image-set(url("../images/contact_mid.webp") type("image/webp"), url("../images/contact_mid.jpg") type("image/jpeg"));
  height: 393px;
  padding-top: 26px;
}
.contact-form {
  width: 533px;
  margin: 0 0 0 36px;
  display: grid;
  grid-template-columns: 91px 1fr;
  column-gap: 6px;
  row-gap: 6px;
  align-items: start;
}
.contact-form label {
  padding-top: 7px;
  text-align: center;
  font-size: var(--fs-14);
  color: var(--ink);
}
.contact-form input,
.contact-form textarea {
  width: 436px;
  max-width: 100%;
  height: 35px;
  padding: 6px 10px;
  border: 0;
  border-radius: 2px;
  background: var(--white);
  font: inherit;
  font-size: var(--fs-14);
  color: var(--ink);
}
.contact-form textarea {
  width: 437px;
  height: 125px;
  resize: vertical;
}
.contact-form input:focus,
.contact-form textarea:focus { outline: var(--focus); outline-offset: 0; }
.contact-form input:user-invalid,
.contact-form textarea:user-invalid { box-shadow: inset 0 0 0 2px var(--red); }
.contact-form .actions { grid-column: 2; }
.btn-submit {
  width: 75px;
  height: 26px;
  padding-left: 10px;
  text-align: left;
  background: var(--blue-btn);
  color: var(--white);
  font-family: var(--font-ui);
  font-size: var(--fs-12);
  border-radius: 2px;
}
.btn-submit:hover { background: var(--blue-btn-hover); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-status {
  margin: 10px 0 0 36px;
  padding: 6px 10px;
  width: 533px;
  max-width: calc(100% - 36px);
  background: var(--white);
  color: var(--ink);
  font-size: var(--fs-13);
}
.form-status[hidden] { display: none; }

.contact-info {
  background-image: url("../images/bottom_con.jpg");
  background-image: image-set(url("../images/bottom_con.webp") type("image/webp"), url("../images/bottom_con.jpg") type("image/jpeg"));
  height: 221px;
  display: flex;
  color: var(--white);
}
.address {
  flex: none;
  margin: 21px 0 0 59px;
  white-space: nowrap;
  font-style: normal;
  font-size: var(--fs-13);
  line-height: var(--lh-20);
}
.address h2 {
  font-size: var(--fs-14);
  font-weight: bold;
  text-decoration: underline;
  height: 20px;
}
.address a { color: var(--white); text-decoration: none; }
.address a:hover { text-decoration: underline; }
.address + .address { margin-left: 32px; }
.social {
  flex: 1 1 auto;
  min-width: 0;
  margin: 21px 16px 0 32px;
}
.social h2 {
  margin-top: 82px;
  font-size: var(--fs-14);
  font-weight: normal;
}
.social ul {
  display: flex;
  gap: 5px;
  margin: 10px 0 0 19px;
}
.social li { flex: none; }

/* Thanks ----------------------------------------------------------------- */
.thanks-stage {
  background-image: url("../images/contact_mid.jpg");
  background-image: image-set(url("../images/contact_mid.webp") type("image/webp"), url("../images/contact_mid.jpg") type("image/jpeg"));
  min-height: 393px;
  padding: 60px 0;
}
.thank-msg {
  width: 584px;
  max-width: 100%;
  min-height: 268px;
  margin: 0 auto;
  padding: 100px 40px 30px 80px;
  background: url("../images/thanks1_bg.png") no-repeat left top;
  background: image-set(url("../images/thanks1_bg.webp") type("image/webp"), url("../images/thanks1_bg.png") type("image/png")) no-repeat left top;
  font-size: var(--fs-16);
  font-weight: bold;
  color: var(--ink);
}
.thank-msg h1 { font-size: var(--fs-16); font-weight: bold; }
.thank-msg p { margin-top: 10px; font-weight: normal; font-size: var(--fs-14); }
.thank-msg a { color: var(--blue-btn); }

/* --------------------------------------------------------------------------
   8. Responsive: below the 940px design the panels become fluid
   -------------------------------------------------------------------------- */
@media (max-width: 959px) {
  .site-header { padding: 20px var(--gutter) 12px; min-height: 0; }
  .site-header--home, .site-header--tech { min-height: 0; }
  .main-nav ul { gap: 8px 16px; }
  .main-nav li { width: auto; min-width: 104px; }
  .quicklinks { position: static; margin-top: 10px; }

  .stage { height: auto; background-size: cover; }

  .home-strap { height: auto; padding: 28% var(--gutter) 24px; }
  .home-strap h1 { width: auto; max-width: 500px; padding: 0; }

  .products-stage {
    padding: 24px var(--gutter);
    background-image: linear-gradient(180deg, #1287ee 0%, #6cc3f7 40%, #d6f1fd 70%, #ffffff 100%);
    border-bottom: 9px solid var(--ink);   /* same black base line as the other pages */
  }
  .products-logo { display: block; width: 180px; margin: 0 0 16px; }
  .products-copy { position: static; width: auto; padding: 16px; background: var(--panel); }
  .products-copy p { margin-top: 16px; max-width: none; }
  .ingredients-link { margin: 16px 0 0; }
  .cans { position: static; margin-top: 24px; pointer-events: auto; }
  .can-set { display: flex; align-items: flex-end; justify-content: center; gap: 6%; }
  .can-set > picture { flex: 0 1 52%; min-width: 0; }
  .can-set > .can--small { flex: 0 1 36%; min-width: 0; }
  .can--large, .can--small { position: static; width: 100%; max-width: 300px; }
  .can--large { margin: 0 auto; }
  .can--small { transition: none; }
  .can--small img { width: 100%; }

  .business-stage, .tech-stage { padding: 20px var(--gutter) 24px; }
  .top-head { width: 100%; padding-top: 0; }
  .top-menu { height: auto; flex-wrap: wrap; background-size: 100% 100%; }
  .top-menu [role="tab"]:first-child,
  .tech-stage .top-menu [role="tab"]:first-child { width: auto; padding: 0 16px; }
  .tech-stage .top-menu [role="tab"],
  .tech-stage .top-menu [role="tab"]:first-child { padding: 0 10px; }

  .panel { width: 100%; min-height: 0; background-size: 100% 100%; }
  .tabs-vertical { flex-direction: column; }
  .tabs-vertical .tablist {
    flex: none; width: 100%;
    display: flex; flex-wrap: wrap;
    border-right: 0; border-bottom: 1px solid var(--blue);
  }
  .tabs-vertical [role="tab"] { width: auto; }
  .tabpanel { flex: none; width: 100%; }
  .tabpanel--illustrated p { max-width: none; }
  .tabpanel .figure { position: static; margin: 12px auto 0; }

  .tech-content { width: 100%; margin-top: 16px; min-height: 0; }
  .tech-text { width: auto; margin: 0; padding: 16px; background: var(--panel); }
  .tech-can { position: static; margin: 16px auto 0; }

  .contact-stage { padding: 20px var(--gutter) 24px; }
  .form-status { margin-left: var(--gutter); margin-right: var(--gutter); }
  .contact-form { width: 100%; margin: 0; grid-template-columns: 1fr; row-gap: 4px; }
  .contact-form label { text-align: left; padding: 8px 0 0; color: var(--white); }
  .contact-form input, .contact-form textarea { width: 100%; }
  .contact-form .actions { grid-column: 1; margin-top: 8px; }
  .form-status { width: auto; max-width: none; margin: 12px 0 0; }

  .contact-info { height: auto; flex-direction: column; padding: 0 var(--gutter) 24px; }
  .address, .social, .address + .address { width: auto; margin: 21px 0 0; white-space: normal; }
  .social h2 { margin-top: 24px; }
  .social ul { margin-left: 0; }

  .thanks-stage { min-height: 0; padding: 24px var(--gutter); }
  .thank-msg { padding: 60px 24px 24px; background-size: 100% 100%; }
}

@media (max-width: 480px) {
  .main-nav li { min-width: 45%; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

@media print {
  .side, .skip-link, .quicklinks { display: none !important; }
  .stage { background: none !important; color: var(--ink); }
}