/* var.18 grafo74 — unified green buttons and correct read-more states */
:root {
  --grafo-footer-green: #0d5c63;
  --grafo-footer-green-hover: #094950;
  --grafo-footer-green-active: #073c42;
  --grafo-footer-green-focus: rgba(13, 92, 99, .34);
  --grafo-paper-bg: #f4faff;
  --grafo-paper-edge: rgba(128, 174, 201, .34);
}

/* The footer green is the single interactive colour across the site. */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.main-block__button,
.item-service__button,
.io_button,
.btn_open,
.btn_close,
[role="button"].button,
[role="button"].btn {
  border-color: var(--grafo-footer-green) !important;
  background-color: var(--grafo-footer-green) !important;
  background-image: none !important;
  color: #fff !important;
}
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
.main-block__button:hover,
.item-service__button:hover,
.io_button:hover,
.btn_open:hover,
.btn_close:hover,
[role="button"].button:hover,
[role="button"].btn:hover {
  border-color: var(--grafo-footer-green-hover) !important;
  background-color: var(--grafo-footer-green-hover) !important;
  color: #fff !important;
}
button:active,
.main-block__button:active,
.item-service__button:active,
.io_button:active {
  background-color: var(--grafo-footer-green-active) !important;
}
button:focus-visible,
input:focus-visible,
.main-block__button:focus-visible,
.item-service__button:focus-visible,
.io_button:focus-visible {
  outline: 3px solid var(--grafo-footer-green-focus) !important;
  outline-offset: 3px !important;
}

/* Read-more controls: exactly one button is visible for each state. */
.io_button_wrap {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0 !important;
  margin-top: 14px !important;
}
.io_button,
.btn_open,
.btn_close {
  width: auto !important;
  min-width: 0 !important;
  max-width: max-content !important;
  padding: .72em 1.3em !important;
  white-space: nowrap !important;
}
.io_item:not(.open) > .io_button_wrap > .btn_close {
  display: none !important;
}
.io_item:not(.open) > .io_button_wrap > .btn_open {
  display: inline-flex !important;
}
.io_item.open > .io_button_wrap > .btn_close {
  display: inline-flex !important;
}
.io_item.open > .io_button_wrap > .btn_open {
  display: none !important;
}

/* Expanded text uses the same approved paper component. */
.article-paper-section .io_item > .io_item_wrap {
  width: 100% !important;
}
.article-paper-section .io_item.open > .io_item_wrap {
  max-height: none !important;
  overflow: visible !important;
}
.article-paper-section .io_item > .io_item_wrap > .item_text {
  position: relative !important;
  isolation: isolate !important;
  box-sizing: border-box !important;
  width: min(100%, 1120px) !important;
  margin: 24px auto !important;
  padding: clamp(34px, 7.1429cqw, 76px)
           clamp(24px, 7.1429cqw, 76px)
           clamp(34px, 7.1429cqw, 76px)
           clamp(86px, 14.2857cqw, 152px) !important;
  overflow: hidden !important;
  border: 1px solid var(--grafo-paper-edge) !important;
  border-radius: 0 !important;
  background: radial-gradient(ellipse at 52% 43%, #fff 0%, #f8fcff 56%, #e7f4fb 100%) !important;
  box-shadow:
    0 24px 44px -25px rgba(31, 57, 72, .24),
    0 8px 20px -15px rgba(31, 57, 72, .30),
    inset -18px -12px 34px rgba(115, 177, 214, .10) !important;
}
.article-paper-section .io_item > .io_item_wrap > .item_text::after {
  display: none !important;
  content: none !important;
}
.article-paper-section .io_item > .io_item_wrap > .item_text::before {
  content: "" !important;
  position: absolute !important;
  z-index: 7 !important;
  top: 34px !important;
  bottom: 34px !important;
  left: clamp(22px, 3.45cqw, 42px) !important;
  width: 20px !important;
  pointer-events: none !important;
  background-image: radial-gradient(circle 8px at 10px 10px,
    rgba(104, 113, 119, .78) 0 5px,
    rgba(190, 199, 205, .72) 5.5px 7px,
    rgba(255, 255, 255, .98) 7.5px 8.5px,
    transparent 9px) !important;
  background-size: 20px clamp(92px, 12.4cqw, 132px) !important;
  background-repeat: repeat-y !important;
  filter: drop-shadow(1px 2px 2px rgba(33, 47, 56, .20)) !important;
}
.article-paper-section .io_item > .io_item_wrap > .item_text > * {
  position: relative;
  z-index: 3;
}
.article-paper-section .io_item:not(.open) > .io_item_wrap > .item_text {
  margin-bottom: 0 !important;
}
.article-paper-section .io_item:not(.open) .io_trans {
  z-index: 8 !important;
}

@media (max-width: 720px) {
  .article-paper-section .io_item > .io_item_wrap > .item_text {
    padding: 30px 20px 30px 68px !important;
  }
  .article-paper-section .io_item > .io_item_wrap > .item_text::before {
    left: 18px !important;
    width: 18px !important;
    background-image: radial-gradient(circle 7px at 9px 9px,
      rgba(104, 113, 119, .78) 0 4.5px,
      rgba(190, 199, 205, .72) 5px 6px,
      #fff 6.5px 7.5px,
      transparent 8px) !important;
    background-size: 18px 96px !important;
  }
}

@media print {
  .io_button_wrap { display: none !important; }
  .article-paper-section .io_item > .io_item_wrap > .item_text {
    width: 210mm !important;
    min-height: 297mm !important;
    margin: 0 auto !important;
    padding: 15mm 15mm 15mm 30mm !important;
    border: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
  }
  .article-paper-section .io_item > .io_item_wrap > .item_text::before {
    display: none !important;
  }
}