:root {
      --navy: #0b3d2e;
      --teal: #0f857f;
      --aqua: #3ccf8e;
      --red: #b01f24;
      --green: #4e8a3b;
      --sky: #1fa463;
      --erp: #0f5c3f;
      --school: #c2600a;
      --books: #430a7c;
      --people: #35996a;
      --bg: #f4fbf7;
      --bg2: #e6f4eb;
      --ink: #17301f;
      --muted: #55705f;
      --line: #d9ece0;
      --white: #fff;
      --radius: 20px;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0
    }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: 84px
    }

    body {
      font-family: 'Poppins', system-ui, sans-serif;
      color: var(--ink);
      background: var(--bg);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden
    }

    img,
    svg {
      display: block;
      max-width: 100%
    }

    a {
      color: inherit
    }

    ul {
      list-style: none
    }

    .wrap {
      width: min(1180px, 100% - 40px);
      margin-inline: auto
    }

    :focus-visible {
      outline: 3px solid var(--sky);
      outline-offset: 3px;
      border-radius: 6px
    }

    /* ---------- buttons ---------- */
    .btn {
      position: relative;
      overflow: hidden;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: var(--red);
      color: #fff;
      font: inherit;
      font-weight: 600;
      font-size: .96rem;
      text-decoration: none;
      padding: 13px 28px;
      border-radius: 999px;
      border: 0;
      cursor: pointer;
      transition: background .2s, transform .2s, box-shadow .2s
    }

    .btn:hover {
      background: #951a1e;
      transform: translateY(-1px);
      box-shadow: 0 10px 22px rgba(176, 31, 36, .3)
    }

    .btn::before {
      content: "";
      position: absolute;
      top: 0;
      left: -80%;
      width: 50%;
      height: 100%;
      background: linear-gradient(110deg, transparent, rgba(255, 255, 255, .5), transparent);
      transform: skewX(-20deg);
      pointer-events: none
    }

    .btn.navy {
      background: var(--navy)
    }

    .btn.navy:hover {
      background: #072b20;
      box-shadow: 0 10px 22px rgba(11, 61, 46, .3)
    }

    .btn.outline {
      background: transparent;
      color: var(--navy);
      border: 1.5px solid var(--navy)
    }

    .btn.outline:hover {
      background: var(--navy);
      color: #fff
    }

    /* ---------- header ---------- */
    header.site {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(255, 255, 255, .94);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--line)
    }

    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      min-height: 70px
    }

    .logo img {
      height: 48px;
      width: auto
    }

    .panel {
      display: flex;
      align-items: center;
      gap: 20px
    }

    .menu {
      display: flex;
      align-items: center;
      gap: 2px
    }

    .menu>li {
      position: relative
    }

    .menu>li>a,
    .dd-btn {
      font: inherit;
      font-size: .92rem;
      font-weight: 500;
      color: var(--ink);
      background: none;
      border: 0;
      cursor: pointer;
      text-decoration: none;
      padding: 9px 14px;
      border-radius: 10px;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      transition: background .15s, color .15s
    }

    .menu>li>a:hover,
    .dd-btn:hover,
    .has-dd.open .dd-btn {
      background: var(--bg);
      color: var(--navy)
    }

    .dd-btn::after {
      content: "";
      width: 6px;
      height: 6px;
      border-right: 2px solid currentColor;
      border-bottom: 2px solid currentColor;
      transform: rotate(45deg) translateY(-2px);
      transition: transform .2s
    }

    .has-dd.open .dd-btn::after {
      transform: rotate(225deg) translateY(-2px)
    }

    .dd {
      position: absolute;
      top: 100%;
      left: 0;
      min-width: 296px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 16px;
      box-shadow: 0 20px 44px rgba(11, 61, 46, .16);
      padding: 8px;
      opacity: 0;
      visibility: hidden;
      transform: translateY(6px);
      transition: opacity .18s, transform .18s, visibility .18s
    }

    .dd a {
      display: block;
      padding: 10px 14px;
      border-radius: 10px;
      text-decoration: none
    }

    .dd a:hover {
      background: var(--bg)
    }

    .dd a strong {
      display: block;
      font-size: .92rem;
      color: var(--navy);
      font-weight: 600
    }

    .dd a span {
      display: block;
      font-size: .78rem;
      color: var(--muted)
    }

    .toggle {
      display: none;
      background: none;
      border: 1.5px solid var(--line);
      border-radius: 10px;
      width: 44px;
      height: 44px;
      cursor: pointer;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 5px
    }

    .toggle span {
      display: block;
      width: 18px;
      height: 2px;
      background: var(--navy);
      border-radius: 2px;
      transition: transform .2s, opacity .2s
    }

    header.open .toggle span:nth-child(1) {
      transform: translateY(7px) rotate(45deg)
    }

    header.open .toggle span:nth-child(2) {
      opacity: 0
    }

    header.open .toggle span:nth-child(3) {
      transform: translateY(-7px) rotate(-45deg)
    }

    @media (min-width:981px) {

      .has-dd:hover .dd,
      .has-dd:focus-within .dd,
      .has-dd.open .dd {
        opacity: 1;
        visibility: visible;
        transform: none
      }
    }

    /* ---------- hero ---------- */
    .hero {
      position: relative;
      overflow: hidden;
      background: linear-gradient(180deg, #f3fbf6 0%, #e3f4e9 100%);
      padding: 72px 0 64px
    }

    .orb {
      position: absolute;
      border-radius: 50%;
      pointer-events: none
    }

    .orb.a {
      width: 560px;
      height: 560px;
      right: -190px;
      top: -250px;
      background: #d2eddc;
      opacity: .8;
      animation: drift 14s ease-in-out infinite alternate
    }

    .orb.b {
      width: 380px;
      height: 380px;
      right: -60px;
      top: -170px;
      background: #c3e6d1;
      opacity: .8;
      animation: drift 18s ease-in-out infinite alternate-reverse
    }

    .orb.c {
      width: 300px;
      height: 300px;
      left: -110px;
      bottom: -130px;
      background: #cdeadb;
      opacity: .7
    }

    .orb.ring {
      width: 600px;
      height: 600px;
      right: -215px;
      top: -215px;
      border: 2px solid var(--aqua);
      background: none
    }

    @keyframes drift {
      to {
        transform: translate(-26px, 22px)
      }
    }

    .hero-grid {
      position: relative;
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 52px;
      align-items: center
    }

    .rule {
      width: 56px;
      height: 5px;
      background: var(--red);
      border-radius: 3px;
      margin-bottom: 20px
    }

    .cats {
      font-size: .82rem;
      font-weight: 600;
      color: var(--teal);
      letter-spacing: .1em;
      margin-bottom: 20px
    }

    .hero h1 {
      font-size: clamp(2.3rem, 4vw, 3rem);
      line-height: 1.08;
      font-weight: 700;
      letter-spacing: -1.6px;
      color: var(--navy);
      margin-bottom: 10px
    }

    .sub {
      font-size: clamp(1.15rem, 2.2vw, 1.55rem);
      font-weight: 300;
      color: #3d5a4b;
      margin-bottom: 5px
    }

    .rot {
      display: inline-grid;
      vertical-align: bottom;
      height: 1.6em;
      overflow: hidden;
      color: var(--sky);
      font-weight: 400
    }

    .rot b {
      grid-area: 1/1;
      font-weight: 400;
      white-space: nowrap
    }

    .lead {
      color: var(--muted);
      font-size: 1.02rem;
      max-width: 34em;
      margin-bottom: 30px
    }

    .stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      max-width: 560px
    }

    .stat {
      background: rgba(255, 255, 255, .7);
      border: 1px solid #c2e4d0;
      border-radius: 16px;
      padding: 16px 10px;
      text-align: center
    }

    .stat strong {
      display: block;
      font-size: 1.9rem;
      font-weight: 700;
      line-height: 1.15
    }

    .stat span {
      font-size: .7rem;
      font-weight: 500;
      color: var(--muted);
      letter-spacing: .1em
    }

    .stat:nth-child(1) strong {
      color: var(--teal)
    }

    .stat:nth-child(2) strong {
      color: #dd3f46
    }

    .stat:nth-child(3) strong {
      color: #2f9a64
    }

    .sol-list {
      display: grid;
      gap: 12px
    }

    .sol-list h2 {
      font-size: .82rem;
      font-weight: 700;
      color: var(--teal);
      letter-spacing: .14em;
      margin-bottom: 2px
    }

    .sol {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 16px 20px;
      border-radius: 18px;
      color: #fff;
      text-decoration: none;
      background: var(--c);
      transition: transform .3s cubic-bezier(.3, 1.4, .5, 1), box-shadow .3s
    }

    .sol {
      position: relative;
      border: 2px solid transparent;
      padding-right: 128px
    }

    .sol:hover,
    .sol:focus-visible {
      transform: translateX(-8px);
      box-shadow: 0 16px 30px rgba(11, 61, 46, .25);
      border-color: rgba(255, 255, 255, .8)
    }

    .sol svg {
      width: 34px;
      height: 34px;
      flex: none;
      stroke: #fff;
      fill: none;
      stroke-width: 1.6;
      stroke-linecap: round;
      stroke-linejoin: round
    }

    .sol strong {
      display: block;
      font-size: 1.05rem;
      line-height: 1.3
    }

    .sol span {
      font-size: .82rem;
      opacity: .88;
      line-height: 1.4;
      display: block
    }

    /* ---------- marquee ---------- */
    /* .marquee{background:var(--navy);color:#cfe9d8;overflow:hidden;padding:14px 0;font-size:.9rem}
.mq{display:flex;width:max-content;animation:mq 36s linear infinite}
.mq:hover{animation-play-state:paused}
.mq span{padding:0 22px;white-space:nowrap}
.mq span::after{content:"•";margin-left:44px;color:var(--aqua)}
@keyframes mq{to{transform:translateX(-50%)}} */

    /* ---------- generic sections ---------- */
    section {
      padding: 92px 0
    }

    .white {
      background: #fff
    }

    .head {
      max-width: 64rem;
      margin-bottom: 44px
    }

    .kicker {
      display: block;
      color: var(--red);
      font-weight: 600;
      font-size: .9rem;
      margin-bottom: 8px
    }

    .head h2 {
      font-size: clamp(1.9rem, 3.6vw, 2.7rem);
      line-height: 1.15;
      font-weight: 700;
      letter-spacing: -1px;
      color: var(--navy);
      margin-bottom: 12px
    }

    .head p {
      color: var(--muted);
      font-size: 1.04rem
    }

    .g2 {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px
    }

    .g3 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px
    }

    .g4 {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px
    }

    .g5 {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 14px
    }

    /* cards: shared hover / glow */
    .card {
      position: relative;
      overflow: hidden;
      transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .35s, border-color .35s
    }

    .card::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: 0;
      transition: opacity .3s;
      background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(31, 164, 99, .14), transparent 70%)
    }

    .js .reveal {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity .6s ease, transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .35s, border-color .35s;
      transition-delay: var(--d, 0s)
    }

    .js .reveal.in {
      opacity: 1;
      transform: none
    }

    @media (hover:hover) and (pointer:fine) {
      .card:hover::after {
        opacity: 1
      }

      .js .card.reveal.in:hover,
      .card:hover {
        transform: translateY(-7px);
        box-shadow: 0 22px 40px rgba(11, 61, 46, .14);
        transition-delay: 0s
      }

      .btn:hover::before {
        animation: shine .75s ease
      }

      .btn:active {
        transform: scale(.97)
      }
    }

    @keyframes shine {
      from {
        left: -80%
      }

      to {
        left: 130%
      }
    }

    /* about */
    .about {
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 52px;
      align-items: start
    }

    .about p {
      color: var(--ink);
      margin-bottom: 16px;
      font-size: 1.02rem
    }

    .about p.soft {
      color: var(--muted)
    }

    .vm {
      display: grid;
      gap: 16px
    }

    .vm .card {
      border-radius: var(--radius);
      padding: 28px 30px;
      color: #fff
    }

    .vm .card:nth-child(1) {
      background: var(--navy)
    }

    .vm .card:nth-child(2) {
      background: #0f857f
    }

    .vm h3 {
      font-size: .95rem;
      font-weight: 600;
      margin-bottom: 10px;
      padding-bottom: 10px;
      border-bottom: 3px solid rgba(255, 255, 255, .35);
      width: fit-content;
      padding-right: 36px;
      transition: padding-right .35s
    }

    .vm .card:hover h3 {
      padding-right: 90px
    }

    .vm p {
      color: #fff;
      font-weight: 300;
      font-size: 1.22rem;
      line-height: 1.5;
      margin: 0
    }

    .steps-title {
      margin: 56px 0 22px
    }

    .steps-title h3 {
      font-size: 1.6rem;
      color: var(--navy);
      font-weight: 700;
      letter-spacing: -.5px
    }

    .step {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 22px 18px
    }

    .step i {
      font-style: normal;
      display: grid;
      place-items: center;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: var(--c);
      color: #fff;
      font-weight: 600;
      font-size: .9rem;
      margin-bottom: 14px;
      transition: transform .35s cubic-bezier(.3, 1.6, .5, 1)
    }

    .step:hover i {
      transform: scale(1.18) rotate(-10deg)
    }

    .step h4 {
      font-size: .98rem;
      color: var(--navy);
      margin-bottom: 6px;
      line-height: 1.35
    }

    .step p {
      font-size: .86rem;
      color: var(--muted);
      line-height: 1.55
    }

    /* portfolio */
    .pf {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 0
    }

    .pf .top {
      background: var(--c);
      color: #fff;
      padding: 24px 26px
    }

    .pf .top h3 {
      font-size: 1.4rem;
      line-height: 1.2
    }

    .pf .top p {
      font-size: .9rem;
      opacity: .9;
      margin-top: 4px
    }

    .pf ul {
      padding: 22px 26px 26px;
      display: grid;
      gap: 11px
    }

    .pf li {
      position: relative;
      padding-left: 20px;
      color: var(--muted);
      font-size: .95rem
    }

    .pf li::before {
      content: "";
      position: absolute;
      left: 0;
      top: .6em;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--c)
    }

    .pf a.more {
      display: inline-block;
      margin: 0 26px 24px;
      color: var(--c);
      font-weight: 600;
      font-size: .92rem;
      text-decoration: none
    }

    .pf a.more:hover {
      text-decoration: underline
    }

    .fit {
      margin-top: 34px
    }

    .fit h3 {
      font-size: .9rem;
      color: var(--red);
      font-weight: 600;
      margin-bottom: 12px
    }

    .fit .tile {
      background: #fff;
      border-radius: 14px;
      padding: 14px 18px;
      border-left: 5px solid var(--c);
      border: 1px solid var(--line);
      border-left: 5px solid var(--c)
    }

    .fit small {
      display: block;
      color: var(--muted);
      font-size: .8rem
    }

    .fit strong {
      color: var(--navy)
    }

    .cbd {
      margin-top: 18px;
      background: var(--navy);
      color: #fff;
      border-radius: 18px;
      padding: 22px 28px;
      display: flex;
      align-items: center;
      gap: 18px
    }

    .cbd .dot {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: var(--aqua);
      flex: none;
      position: relative
    }

    .cbd .dot::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: var(--aqua);
      animation: ping 2s ease-out infinite
    }

    @keyframes ping {
      to {
        transform: scale(2.4);
        opacity: 0
      }
    }

    .cbd strong {
      display: block
    }

    .cbd span {
      color: #bfe3cd;
      font-size: .95rem
    }

    /* product bands */
    .pband {
      background: var(--c);
      color: #fff;
      border-radius: var(--radius);
      padding: 26px 30px;
      display: flex;
      align-items: center;
      gap: 30px;
      margin-bottom: 22px
    }

    .pband p {
      font-size: .98rem;
      max-width: 34em
    }

    .mark {
      background: #fff;
      color: #222;
      border-radius: 999px;
      padding: 12px 32px;
      font-size: 1.5rem;
      font-weight: 300;
      letter-spacing: -.4px;
      white-space: nowrap;
      flex: none
    }

    .mark b {
      font-weight: 700
    }

    .mark i {
      font-style: normal;
      color: #e62a2f
    }

    .mark.ink b {
      color: #1e1e2a
    }

    .ed {
      background: #fff;
      border-radius: 14px;
      padding: 16px 20px;
      border: 1px solid var(--line);
      border-left: 5px solid var(--c)
    }

    .ed h3 {
      font-size: 1.02rem;
      color: var(--navy)
    }

    .ed p {
      font-size: .88rem;
      color: var(--muted)
    }

    .sub-h {
      font-size: .85rem;
      font-weight: 700;
      color: var(--c);
      letter-spacing: .14em;
      margin: 36px 0 14px
    }

    .mod {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 22px 24px
    }

    .mod h3 {
      font-size: 1rem;
      color: var(--c);
      margin-bottom: 10px
    }

    .mod li {
      position: relative;
      padding-left: 18px;
      font-size: .9rem;
      color: var(--muted);
      transition: transform .25s, color .25s
    }

    .mod li::before {
      content: "";
      position: absolute;
      left: 0;
      top: .62em;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--navy);
      transition: transform .25s, background .25s
    }

    .mod li:hover {
      transform: translateX(6px);
      color: var(--navy)
    }

    .mod li:hover::before {
      transform: scale(1.6);
      background: var(--red)
    }

    .pill {
      margin-top: 20px;
      background: var(--navy);
      color: #fff;
      text-align: center;
      border-radius: 999px;
      padding: 14px 26px;
      font-size: .92rem
    }

    .chips {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px
    }

    .chip {
      background: #fff;
      color: #8a3f06;
      border-radius: 999px;
      padding: 10px 18px;
      font-size: .88rem;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 10px;
      transition: transform .25s cubic-bezier(.3, 1.5, .5, 1), background .25s, color .25s
    }

    .chip::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--school);
      flex: none
    }

    .chip:hover {
      transform: translateY(-3px) scale(1.04);
      background: var(--school);
      color: #fff
    }

    .chip:hover::before {
      background: #fff
    }

    .strip {
      margin-top: 14px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 16px 22px;
      display: flex;
      gap: 26px;
      flex-wrap: wrap;
      align-items: center;
      font-size: .92rem;
      color: var(--muted)
    }

    .strip strong {
      color: var(--c)
    }

    .built {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
      margin-top: 22px
    }

    .built strong {
      font-size: .8rem;
      color: var(--books);
      letter-spacing: .1em;
      margin-right: 6px
    }

    .tag {
      background: #e6dcf3;
      color: var(--books);
      font-weight: 500;
      font-size: .85rem;
      border-radius: 999px;
      padding: 6px 18px;
      transition: transform .25s cubic-bezier(.3, 1.5, .5, 1), background .25s, color .25s
    }

    .tag:hover {
      transform: translateY(-3px);
      background: var(--books);
      color: #fff
    }

    .assure {
      margin-top: 20px
    }

    .assure .card {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 16px 20px;
      display: flex;
      align-items: center;
      gap: 14px
    }

    .assure .card i {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: #ff7a1a;
      flex: none
    }

    .assure strong {
      display: block;
      font-size: .95rem;
      color: var(--navy)
    }

    .assure span {
      font-size: .84rem;
      color: var(--muted)
    }

    .bk-card {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 22px 22px 24px
    }

    .bk-card h3 {
      font-size: 1.1rem;
      color: var(--books);
      padding-bottom: 10px;
      margin-bottom: 12px;
      border-bottom: 3px solid #ff7a1a;
      width: fit-content;
      padding-right: 30px;
      transition: padding-right .35s
    }

    .bk-card:hover h3 {
      padding-right: 70px
    }

    .feat {
      background: #fff;
      border-radius: 14px;
      padding: 18px 22px;
      border: 1px solid var(--line);
      border-left: 5px solid var(--c)
    }

    .feat h3 {
      font-size: 1.02rem;
      color: var(--navy);
      margin-bottom: 3px
    }

    .feat p {
      font-size: .88rem;
      color: var(--muted)
    }

    .dep {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 22px 26px
    }

    .dep h3 {
      color: var(--people);
      font-size: 1.05rem;
      margin-bottom: 6px
    }

    .dep p {
      font-size: .92rem;
      color: var(--muted)
    }

    .bop {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 12px 18px;
      border-left: 4px solid var(--c)
    }

    .bop strong {
      display: block;
      color: var(--navy);
      font-size: .95rem
    }

    .bop span {
      font-size: .84rem;
      color: var(--muted)
    }

    .tool {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 22px;
      display: flex;
      gap: 16px;
      align-items: flex-start
    }

    .tool .ic {
      width: 46px;
      height: 46px;
      border-radius: 12px;
      background: #dff3ea;
      display: grid;
      place-items: center;
      flex: none;
      transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), background .25s
    }

    .tool .ic svg {
      width: 23px;
      height: 23px;
      stroke: var(--people);
      fill: none;
      stroke-width: 1.7;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: stroke .25s
    }

    .tool:hover .ic {
      transform: translateY(-3px) rotate(-8deg) scale(1.1);
      background: var(--people)
    }

    .tool:hover .ic svg {
      stroke: #fff
    }

    .tool h3 {
      font-size: 1.02rem;
      color: var(--navy)
    }

    .tool p {
      font-size: .88rem;
      color: var(--muted)
    }

    .cs {
      background: var(--navy);
      color: #fff;
      border-radius: var(--radius);
      padding: 34px 36px;
      margin-top: 22px;
      position: relative;
      overflow: hidden
    }

    .cs small {
      color: var(--aqua);
      font-weight: 600;
      font-size: .82rem;
      letter-spacing: .14em
    }

    .cs h3 {
      font-size: 1.5rem;
      margin: 6px 0 6px
    }

    .cs p {
      color: #c6e6d3;
      max-width: 44rem
    }

    .ein {
      border-radius: var(--radius);
      padding: 28px 30px;
      color: #fff;
      position: relative;
      overflow: hidden
    }

    .ein.sa {
      background: #0f857f
    }

    .ein.ae {
      background: #b01f24
    }

    .ein small {
      font-size: .78rem;
      letter-spacing: .14em;
      font-weight: 600;
      opacity: .9
    }

    .ein h3 {
      font-size: 1.4rem;
      line-height: 1.25;
      margin: 8px 0
    }

    .ein p {
      font-size: .95rem;
      opacity: .95
    }

    .ein::before {
      content: "";
      position: absolute;
      width: 170px;
      height: 170px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .12);
      right: -40px;
      top: -50px;
      transition: transform .6s cubic-bezier(.2, .7, .2, 1)
    }

    .ein:hover::before {
      transform: scale(1.5)
    }

    /* mobile apps */
    .app {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 26px;
      padding: 30px 30px 34px
    }

    .app .badge {
      display: inline-block;
      background: #dbf1ef;
      color: var(--teal);
      font-weight: 600;
      font-size: .72rem;
      letter-spacing: .08em;
      padding: 5px 14px;
      border-radius: 999px;
      margin-bottom: 16px
    }

    .app h3 {
      font-size: 1.7rem;
      line-height: 1.2;
      color: var(--navy);
      margin-bottom: 12px;
      letter-spacing: -.5px
    }

    .app h3 em {
      font-style: normal;
      color: var(--red)
    }

    .app>p {
      color: var(--muted);
      margin-bottom: 16px;
      font-size: .96rem
    }

    .app ul {
      display: grid;
      gap: 8px;
      margin-bottom: 24px
    }

    .app li {
      position: relative;
      padding-left: 30px;
      font-weight: 500;
      color: var(--navy);
      font-size: .94rem
    }

    .app li::before {
      content: "";
      position: absolute;
      left: 0;
      top: .18em;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat
    }

    .phone {
      width: 216px;
      margin: 0 auto 24px;
      aspect-ratio: 9/18.6;
      border: 7px solid #15151c;
      border-radius: 36px;
      background: #f8fdfa;
      overflow: hidden;
      position: relative;
      box-shadow: 0 24px 44px rgba(11, 61, 46, .28);
      transition: transform .5s cubic-bezier(.2, .7, .2, 1)
    }

    .app:hover .phone {
      transform: translateY(-8px) rotate(-1.5deg)
    }

    .phone::before {
      content: "";
      position: absolute;
      top: 7px;
      left: 50%;
      transform: translateX(-50%);
      width: 64px;
      height: 16px;
      background: #15151c;
      border-radius: 12px;
      z-index: 2
    }

    .ph {
      padding: 30px 12px 12px;
      font-size: .58rem;
      color: var(--ink);
      display: grid;
      gap: 8px
    }

    .ph .hd {
      font-weight: 700;
      font-size: .66rem;
      color: var(--navy)
    }

    .ph .big {
      background: linear-gradient(135deg, #1f9d55, #0f7a45);
      color: #fff;
      border-radius: 12px;
      padding: 10px
    }

    .ph .big small {
      display: block;
      opacity: .8;
      font-size: .52rem
    }

    .ph .big b {
      font-size: 1rem
    }

    .ph .row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px
    }

    .ph .box {
      background: #fff;
      border-radius: 10px;
      padding: 8px;
      box-shadow: 0 2px 8px rgba(11, 61, 46, .08)
    }

    .ph .box small {
      display: block;
      color: var(--muted);
      font-size: .5rem
    }

    .ph .box b {
      font-size: .9rem;
      color: var(--navy)
    }

    .ph svg {
      width: 100%;
      height: 60px
    }

    .ph .ok {
      background: linear-gradient(135deg, #d9f5e5, #bfeed4);
      border-radius: 12px;
      padding: 10px
    }

    .ph .ok b {
      font-size: .9rem;
      color: #17724a
    }

    .ph .bar {
      height: 5px;
      border-radius: 3px;
      background: #fff;
      margin-top: 6px;
      overflow: hidden
    }

    .ph .bar i {
      display: block;
      height: 100%;
      width: 94%;
      background: #2fb36b;
      border-radius: 3px
    }

    .ph .li {
      background: #fff;
      border-radius: 10px;
      padding: 8px 10px;
      display: flex;
      justify-content: space-between;
      box-shadow: 0 2px 8px rgba(11, 61, 46, .08);
      font-weight: 600
    }

    .ph .li span {
      color: var(--muted);
      font-weight: 400
    }

    .ph .qa {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 6px
    }

    .ph .qa i {
      aspect-ratio: 1;
      border-radius: 9px;
      background: var(--c)
    }

    .stores {
      display: flex;
      gap: 12px;
      justify-content: center;
      flex-wrap: wrap
    }

    .store {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: var(--navy);
      color: #fff;
      text-decoration: none;
      border-radius: 12px;
      padding: 9px 18px;
      font-size: .7rem;
      line-height: 1.2;
      transition: transform .25s, background .25s
    }

    .store:hover {
      transform: translateY(-3px);
      background: #072b20
    }

    .store b {
      display: block;
      font-size: 1rem
    }

    .store svg {
      width: 22px;
      height: 22px;
      fill: #fff
    }

    .note {
      font-size: .72rem;
      color: var(--muted);
      text-align: center;
      margin: -10px 0 18px
    }

    .ap {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 22px 20px;
      text-align: center;
      position: relative
    }

    .ap i {
      font-style: normal;
      display: grid;
      place-items: center;
      width: 46px;
      height: 46px;
      border-radius: 50%;
      background: var(--c);
      color: #fff;
      font-weight: 600;
      margin: 0 auto 14px;
      transition: transform .35s cubic-bezier(.3, 1.6, .5, 1)
    }

    .ap:hover i {
      transform: scale(1.15) rotate(-10deg)
    }

    .ap h4 {
      color: var(--navy);
      margin-bottom: 6px
    }

    .ap p {
      font-size: .88rem;
      color: var(--muted)
    }

    /* contact */
    .contact {
      position: relative;
      overflow: hidden;
      background: linear-gradient(180deg, #f3fbf6, #dcf0e4);
      padding: 110px 0
    }

    .contact h2 {
      font-size: clamp(2.2rem, 4.8vw, 3.6rem);
      line-height: 1.08;
      letter-spacing: -1.4px;
      color: var(--navy);
      margin-bottom: 18px;
      font-weight: 700
    }

    .contact .grad {
      color: var(--teal)
    }

    .contact p.lead {
      margin-bottom: 38px
    }

    .cgrid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px 32px;
      max-width: 900px;
      margin-bottom: 36px
    }

    .cgrid div {
      border-bottom: 1px solid #bfe0cc;
      padding-bottom: 10px
    }

    .cgrid small {
      display: block;
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .14em;
      color: var(--teal)
    }

    .cgrid div:nth-child(2) small {
      color: #b8822a
    }

    .cgrid a {
      font-size: 1.15rem;
      color: var(--navy);
      text-decoration: none;
      font-weight: 400
    }

    .cgrid a:hover {
      text-decoration: underline
    }

    .demo {
      display: inline-flex;
      flex-direction: column;
      align-items: flex-start;
      background: var(--red);
      color: #fff;
      text-decoration: none;
      border-radius: 999px;
      padding: 14px 32px;
      transition: transform .25s, box-shadow .25s;
      animation: ring 2.6s 1.5s infinite
    }

    .demo:hover {
      transform: translateY(-3px);
      box-shadow: 0 14px 28px rgba(176, 31, 36, .35);
      animation: none
    }

    .demo strong {
      font-size: 1rem
    }

    .demo span {
      font-size: .8rem;
      opacity: .85
    }

    @keyframes ring {
      0% {
        box-shadow: 0 0 0 0 rgba(176, 31, 36, .5)
      }

      70%,
      100% {
        box-shadow: 0 0 0 18px rgba(176, 31, 36, 0)
      }
    }

    .countries {
      margin-top: 34px;
      color: var(--muted);
      font-size: .92rem
    }

    footer {
      background: #fff;
      border-top: 1px solid var(--line);
      padding: 56px 0 26px
    }

    .fgrid {
      display: grid;
      grid-template-columns: 1.5fr repeat(3, 1fr);
      gap: 36px;
      margin-bottom: 36px
    }

    .fgrid img {
      height: 38px;
      margin-bottom: 14px
    }

    .fgrid p,
    .fgrid li,
    .fgrid a {
      font-size: .9rem;
      color: var(--muted);
      text-decoration: none
    }

    .fgrid a:hover {
      color: var(--navy);
      text-decoration: underline
    }

    .fgrid h4 {
      color: var(--navy);
      margin-bottom: 12px;
      font-size: .95rem
    }

    .fgrid li {
      margin-bottom: 8px
    }

    .fbot {
      border-top: 1px solid var(--line);
      padding-top: 20px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 10px;
      font-size: .82rem;
      color: var(--muted)
    }

    .fbot nav {
      display: flex;
      gap: 16px
    }

    .bars {
      display: flex;
      height: 6px
    }

    .bars i {
      flex: 1
    }

    .bars i:nth-child(1) {
      background: var(--red)
    }

    .bars i:nth-child(2) {
      background: var(--green)
    }

    .bars i:nth-child(3) {
      background: var(--aqua)
    }

    /* ---------- entrance & text animation ---------- */
    @keyframes rise {
      from {
        opacity: 0;
        transform: translateY(26px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    @keyframes lineUp {
      from {
        transform: translateY(110%)
      }

      to {
        transform: none
      }
    }

    @keyframes slideIn {
      from {
        opacity: 0;
        transform: translateX(40px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    @keyframes rot {
      0% {
        transform: translateY(100%);
        opacity: 0
      }

      4%,
      21% {
        transform: none;
        opacity: 1
      }

      25%,
      100% {
        transform: translateY(-100%);
        opacity: 0
      }
    }

    .hero-grid>div:first-child>* {
      animation: rise .85s cubic-bezier(.2, .7, .2, 1) both
    }

    .hero-grid>div:first-child>:nth-child(1) {
      animation-delay: .05s
    }

    .hero-grid>div:first-child>:nth-child(2) {
      animation-delay: .15s
    }

    .hero-grid>div:first-child>:nth-child(3) {
      animation: none
    }

    .hero-grid>div:first-child>:nth-child(4) {
      animation-delay: .75s
    }

    .hero-grid>div:first-child>:nth-child(5) {
      animation-delay: .9s
    }

    .hero-grid>div:first-child>:nth-child(6) {
      animation-delay: 1.05s
    }

    .line {
      display: block;
      overflow: hidden;
      padding-bottom: .12em;
      margin-bottom: -.12em
    }

    .line>span {
      display: block;
      animation: lineUp .95s cubic-bezier(.2, .75, .2, 1) both
    }

    .line:nth-child(1)>span {
      animation-delay: .25s
    }

    .line:nth-child(2)>span {
      animation-delay: .43s
    }

    .rot b {
      animation: rot 9.6s infinite both
    }

    .rot b:nth-child(1) {
      animation-delay: 1.3s
    }

    .rot b:nth-child(2) {
      animation-delay: 3.7s
    }

    .rot b:nth-child(3) {
      animation-delay: 6.1s
    }

    .rot b:nth-child(4) {
      animation-delay: 8.5s
    }

    .sol-list>* {
      animation: slideIn .8s cubic-bezier(.2, .7, .2, 1) both
    }

    .sol-list>:nth-child(1) {
      animation-delay: .5s
    }

    .sol-list>:nth-child(2) {
      animation-delay: .65s
    }

    .sol-list>:nth-child(3) {
      animation-delay: .8s
    }

    .sol-list>:nth-child(4) {
      animation-delay: .95s
    }

    .sol-list>:nth-child(5) {
      animation-delay: 1.1s
    }

    .js .split .w {
      display: inline-block;
      overflow: hidden;
      vertical-align: top;
      padding-bottom: .14em;
      margin-bottom: -.14em
    }

    .js .split .w>span {
      display: inline-block;
      transform: translateY(112%);
      transition: transform .75s cubic-bezier(.2, .75, .2, 1);
      transition-delay: calc(var(--i) * 70ms)
    }

    .js .split.in .w>span {
      transform: none
    }

    /* ---------- hover extras ---------- */
    @media (hover:hover) and (pointer:fine) {
      .stat {
        transition: transform .3s cubic-bezier(.3, 1.5, .5, 1), background .25s
      }

      .stat:hover {
        transform: translateY(-5px);
        background: #fff
      }

      .pf:hover .top {
        filter: brightness(1.08)
      }

      .tile:hover,
      .ed:hover,
      .feat:hover,
      .bop:hover {
        border-color: var(--c)
      }
    }

    /* ---------- responsive ---------- */
    @media (max-width:1060px) {
      .g4 {
        grid-template-columns: repeat(2, 1fr)
      }

      .g5 {
        grid-template-columns: repeat(3, 1fr)
      }

      .chips {
        grid-template-columns: repeat(3, 1fr)
      }
    }

    @media (max-width:980px) {
      html {
        scroll-padding-top: 76px
      }

      .hero {
        padding: 48px 0
      }

      .hero-grid,
      .about {
        grid-template-columns: 1fr
      }

      .toggle {
        display: flex
      }

      .panel {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        border-bottom: 1px solid var(--line);
        padding: 12px 20px 22px;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        box-shadow: 0 22px 30px rgba(11, 61, 46, .12);
        max-height: calc(100vh - 70px);
        overflow: auto
      }

      header.open .panel {
        display: flex
      }

      .menu {
        flex-direction: column;
        align-items: stretch
      }

      .menu>li>a,
      .dd-btn {
        width: 100%;
        justify-content: space-between;
        padding: 13px 8px
      }

      .dd {
        position: static;
        display: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: 0;
        border-left: 3px solid var(--bg2);
        border-radius: 0;
        margin: 0 0 6px 8px;
        padding: 2px 0;
        min-width: 0
      }

      .has-dd.open .dd {
        display: block
      }

      .panel .btn {
        text-align: center
      }

      .fgrid {
        grid-template-columns: 1fr 1fr
      }
    }

    @media (max-width:760px) {
      .orb.ring {
        display: none
      }

      .orb.a {
        width: 340px;
        height: 340px;
        right: -190px;
        top: -190px
      }

      .orb.b {
        width: 220px;
        height: 220px;
        right: -90px;
        top: -120px
      }

      section {
        padding: 64px 0
      }

      .g2,
      .g3,
      .g4 {
        grid-template-columns: 1fr
      }

      .g5 {
        grid-template-columns: 1fr 1fr
      }

      .chips {
        grid-template-columns: 1fr 1fr
      }

      .stats {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 8px
      }

      .stat strong {
        font-size: 1.5rem
      }

      .pband {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 24px
      }

      .mark {
        font-size: 1.25rem;
        padding: 10px 26px
      }

      .cgrid {
        grid-template-columns: 1fr
      }

      .cbd {
        align-items: flex-start
      }

      .cs {
        padding: 26px
      }

      .app {
        padding: 26px 22px
      }

      .vm p {
        font-size: 1.08rem
      }
    }

    @media (max-width:480px) {
      .g5 {
        grid-template-columns: 1fr
      }

      .chips {
        grid-template-columns: 1fr
      }

      .fgrid {
        grid-template-columns: 1fr
      }

      .stats {
        grid-template-columns: 1fr
      }
    }

    @media (prefers-reduced-motion:reduce) {
      html {
        scroll-behavior: auto
      }

      *,
      *::before,
      *::after {
        animation: none !important;
        transition: none !important
      }

      .js .reveal {
        opacity: 1;
        transform: none
      }

      .js .split .w>span {
        transform: none
      }

      .rot b:not(:first-child) {
        display: none
      }

      .mq {
        flex-wrap: wrap;
        width: auto
      }
    }


    /* clients (stand-in for the existing section) */
    .clients {
      background: var(--lilac);
      padding: 44px 0;
      text-align: center;
      border-bottom: 1px solid var(--line)
    }

    .clients h2 {
      font-size: 1.15rem;
      font-weight: 600;
      color: var(--p9);
      margin-bottom: 6px
    }

    .clients p {
      font-size: .85rem;
      color: var(--muted)
    }

    /* sliding clients carousel */
    .marquee {
      overflow: hidden;
      margin: 26px 0 18px;
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
      mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)
    }

    .track {
      display: flex;
      width: max-content;
      animation: slide 45s linear infinite
    }

    .marquee:hover .track,
    .marquee:focus-within .track {
      animation-play-state: paused
    }

    .track img {
      height: 64px;
      width: auto;
      margin-right: 16px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 8px 16px;
      flex: none
    }

    @keyframes slide {
      to {
        transform: translateX(-50%)
      }
    }

    @media (prefers-reduced-motion:reduce) {
      .marquee {
        overflow-x: auto;
        -webkit-mask-image: none;
        mask-image: none
      }

      .track {
        animation: none
      }
    }

    .marker {
      display: inline-block;
      margin-top: 14px;
      font-size: .74rem;
      color: var(--p6);
      border: 1px dashed var(--p6);
      border-radius: 999px;
      padding: 4px 14px
    }

    /* portfolio cards: light border + Click here on hover */
    .pf {
      position: relative;
      cursor: pointer;
      transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .35s, border-color .3s
    }

    .pf .top {
      position: relative
    }

    .pf:hover,
    .pf:focus-within {
      border-color: var(--c);
      box-shadow: 0 0 0 4px rgba(255, 255, 255, .9), 0 0 0 6px color-mix(in srgb, var(--c) 35%, #fff), 0 22px 40px rgba(11, 61, 46, .14)
    }

    .sol::after,
    .pf .top::after {
      display: none !important
    }

    .sol {
      padding-right: 20px
    }

    /* section heading banners (as in the PDF profile) */
    #erp .head,
    #school .head,
    #books .head,
    #people .head {
      max-width: none;
      background: var(--c);
      border-radius: 18px;
      padding: 22px 30px 20px;
      box-shadow: 0 14px 28px color-mix(in srgb, var(--c) 28%, transparent)
    }

    #erp .head .kicker,
    #school .head .kicker,
    #books .head .kicker,
    #people .head .kicker {
      color: #fff !important;
      font-size: .72rem;
      letter-spacing: .2em;
      text-transform: uppercase;
      font-weight: 700;
      margin-bottom: 6px;
      opacity: .92
    }

    #erp .head h2,
    #school .head h2,
    #books .head h2,
    #people .head h2 {
      color: #fff !important;
      margin-bottom: 0
    }

    @media (max-width:600px) {

      #erp .head,
      #school .head,
      #books .head,
      #people .head {
        padding: 18px 20px
      }
    }

    /* logo + intro row without background (as in the PDF) */
    .pband {
      background: none !important;
      color: var(--ink);
      padding: 6px 4px 0;
      margin-bottom: 24px;
      gap: 36px
    }

    .pband .mark {
      background: none;
      padding: 0;
      box-shadow: none;
      font-size: 1.9rem
    }

    .pband p {
      color: var(--muted);
      font-size: .96rem
    }

    .pband p strong {
      color: var(--ink)
    }

    @media (max-width:980px) {
      .pband {
        padding: 4px 0 0
      }
    }

    :root {
      --lilac: #f4fbf7;
      --p9: #0b3d2e;
      --p6: #55705f
    }

    .marquee .track {
      animation: none !important;
      will-change: transform;
      align-items: center
    }

    .fbchip {
      flex: none;
      margin-right: 16px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 14px 30px;
      font-weight: 600;
      color: var(--p9);
      white-space: nowrap
    }

    .marquee {
      overflow: hidden !important
    }

    .vm-wrap {
      text-align: center;
      margin-top: 24px
    }

    .vm-btn .a {
      display: inline-block
    }

    .more-ed[hidden] {
      display: none
    }

    .more-ed:not([hidden]) {
      animation: rise .5s both
    }

    .phone-img {
      width: min(260px, 72%);
      height: auto;
      margin: 6px auto 22px;
      filter: drop-shadow(0 22px 28px rgba(11, 61, 46, .28));
      transition: transform .5s cubic-bezier(.2, .7, .2, 1)
    }

    .app:hover .phone-img {
      transform: translateY(-8px) rotate(-1.5deg)
    }

    /* hero solutions: taller cards, aligned to the top, with a button */
    .hero-grid {
      align-items: start
    }

    .hero-grid>div:first-child {
      padding-top: 18px
    }

    .sol-list {
      gap: 16px
    }

    .sol {
      padding: 28px 26px !important;
      min-height: 112px;
      border-radius: 20px
    }

    .sol strong {
      font-size: 1.18rem
    }

    .sol span {
      font-size: .88rem
    }

    .sol svg {
      width: 40px;
      height: 40px
    }

    .sol-list .sol-btn {
      justify-self: center;
      margin-top: 6px;
      padding: 14px 34px
    }

    @media (max-width:980px) {
      .sol {
        padding: 22px 20px !important;
        min-height: 0
      }

      .hero-grid>div:first-child {
        padding-top: 0
      }
    }


    /* dropdown icons */
    .dd a {
      display: grid;
      grid-template-columns: 40px 1fr;
      column-gap: 12px;
      align-items: center;
      padding: 10px 14px
    }

    .dd a .dd-ic {
      grid-row: 1 / span 2;
      width: 40px;
      height: 40px;
      border-radius: 12px;
      background: color-mix(in srgb, var(--ic) 12%, #fff);
      display: grid;
      place-items: center;
      transition: transform .3s cubic-bezier(.3, 1.5, .5, 1), background .2s
    }

    .dd a .dd-ic svg {
      width: 21px;
      height: 21px;
      fill: none;
      stroke: var(--ic);
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: stroke .2s
    }

    .dd a:hover .dd-ic {
      transform: scale(1.1) rotate(-6deg);
      background: var(--ic)
    }

    .dd a:hover .dd-ic svg {
      stroke: #fff
    }

    .dd a strong {
      grid-column: 2;
      line-height: 1.25
    }

    .dd a span {
      grid-column: 2
    }

    .dd {
      min-width: 330px
    }

    @media (max-width:980px) {
      .dd {
        min-width: 0
      }

      .dd a {
        grid-template-columns: 36px 1fr
      }

      .dd a .dd-ic {
        width: 36px;
        height: 36px
      }
    }

    /* section buttons use the section colour */
    #erp .btn.navy,
    #school .btn.navy,
    #books .btn.navy,
    #people .btn.navy {
      background: var(--c);
      border-color: var(--c)
    }

    #erp .btn.navy:hover,
    #school .btn.navy:hover,
    #books .btn.navy:hover,
    #people .btn.navy:hover {
      background: color-mix(in srgb, var(--c) 82%, #000);
      box-shadow: 0 10px 22px color-mix(in srgb, var(--c) 35%, transparent)
    }

    /* section background tinted with the section colour */
    #erp,
    #school,
    #books,
    #people {
      background: color-mix(in srgb, var(--c) 6%, #fff)
    }

    #erp .sub-h,
    #school .sub-h,
    #books .sub-h,
    #people .sub-h {
      color: var(--c) !important
    }

    /* bottom info pills use the section colour */
    #erp .pill,
    #school .pill,
    #books .pill,
    #people .pill {
      background: var(--c);
      box-shadow: 0 10px 22px color-mix(in srgb, var(--c) 25%, transparent)
    }

    footer {
      background: #f3f5f9 !important
    }

    /* footer social icons */
    .socials {
      display: flex;
      gap: 12px;
      margin-right: 64px
    }

    @media (max-width:600px) {
      .socials {
        margin-right: 0;
        margin-bottom: 56px
      }
    }

    .fbot .soc {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: #fff;
      color: var(--navy);
      border: 1px solid var(--line);
      text-decoration: none;
      position: relative;
      overflow: hidden;
      transition: transform .3s cubic-bezier(.3, 1.6, .5, 1), background .25s, color .25s, box-shadow .3s, border-color .25s
    }

    .fbot .soc svg {
      width: 19px;
      height: 19px;
      position: relative;
      z-index: 1;
      transition: transform .35s cubic-bezier(.3, 1.6, .5, 1)
    }

    .fbot .soc:hover,
    .fbot .soc:focus-visible {
      background: var(--b);
      color: #fff;
      border-color: var(--b);
      transform: translateY(-5px);
      box-shadow: 0 12px 22px color-mix(in srgb, var(--b) 40%, transparent)
    }

    .fbot .soc:hover svg {
      transform: scale(1.15) rotate(-8deg)
    }

    .fbot .soc[aria-label="Instagram"]:hover {
      background: linear-gradient(45deg, #f9a03c, #e1306c 55%, #833ab4);
      border-color: transparent
    }

    /* footer contact highlight */
    .fcontact {
      margin-top: 18px;
      display: grid;
      gap: 10px
    }

    .fcontact li {
      margin: 0 !important
    }

    .fgrid a.fc,
    .fc.static {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 10px 16px 10px 10px;
      border-radius: 16px;
      background: #fff;
      border: 1px solid var(--line);
      text-decoration: none !important;
      color: var(--navy) !important;
      transition: transform .3s cubic-bezier(.3, 1.5, .5, 1), box-shadow .3s, border-color .25s, background .25s
    }

    .fc i {
      flex: none;
      width: 42px;
      height: 42px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      background: color-mix(in srgb, var(--b) 14%, #fff);
      color: var(--b);
      transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), background .25s, color .25s
    }

    .fc i svg {
      width: 20px;
      height: 20px
    }

    .fc span {
      display: flex;
      flex-direction: column;
      line-height: 1.25;
      min-width: 0
    }

    .fc small {
      font-size: .68rem;
      font-weight: 600;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--muted)
    }

    .fc b {
      font-size: .98rem;
      font-weight: 600;
      color: var(--navy);
      overflow-wrap: anywhere
    }

    .fgrid a.fc:hover,
    .fgrid a.fc:focus-visible {
      transform: translateX(6px);
      border-color: var(--b);
      box-shadow: 0 12px 24px color-mix(in srgb, var(--b) 22%, transparent)
    }

    .fgrid a.fc:hover i {
      background: var(--b);
      color: #fff;
      transform: rotate(-10deg) scale(1.1)
    }

    .fgrid a.fc:hover small {
      color: var(--b)
    }

    .fc.static:hover i {
      transform: translateY(-3px)
    }

    /* contact: icon only, no background */
    .fgrid a.fc,
    .fc.static {
      background: none !important;
      border: 0 !important;
      padding: 4px 0 !important;
      box-shadow: none !important;
      border-radius: 0
    }

    .fc i {
      background: none !important;
      width: 30px;
      height: 30px;
      border-radius: 0;
      color: var(--b)
    }

    .fc i svg {
      width: 24px;
      height: 24px
    }

    .fgrid a.fc:hover,
    .fgrid a.fc:focus-visible {
      transform: translateX(6px);
      box-shadow: none !important;
      border: 0 !important
    }

    .fgrid a.fc:hover i {
      background: none !important;
      color: var(--b);
      transform: rotate(-12deg) scale(1.25)
    }

    .fgrid a.fc:hover b {
      color: var(--b)
    }

    .fcontact {
      gap: 6px
    }

    /* hero solution cards with richer content */
    .sol.rich {
      align-items: flex-start;
      padding: 24px 26px !important
    }

    .sol.rich svg {
      margin-top: 4px
    }

    .sol.rich .tag {
      display: inline-block;
      font-style: normal;
      font-size: .7rem;
      font-weight: 600;
      letter-spacing: .06em;
      text-transform: uppercase;
      background: rgba(255, 255, 255, .18);
      border: 1px solid rgba(255, 255, 255, .4);
      border-radius: 999px;
      padding: 3px 12px;
      margin-bottom: 8px
    }

    .sol.rich strong {
      font-size: 1.3rem;
      margin-bottom: 4px
    }

    .sol.rich .hl {
      display: block;
      font-size: .98rem;
      font-weight: 600;
      line-height: 1.35;
      margin-bottom: 4px
    }

    .sol.rich span {
      font-size: .86rem;
      line-height: 1.5;
      opacity: .92
    }

    .sol.rich .tag {
      color: #fff !important;
      transform: none !important
    }

    .sol.rich .tag:hover {
      background: rgba(255, 255, 255, .18) !important
    }

    /* hero solution cards with richer content */
    .sol .for {
      display: inline-block;
      font-size: .66rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      background: rgba(255, 255, 255, .18);
      border: 1px solid rgba(255, 255, 255, .35);
      border-radius: 999px;
      padding: 3px 12px;
      margin-bottom: 8px
    }

    .sol strong {
      font-size: 1.25rem !important;
      margin-bottom: 2px
    }

    .sol .hl {
      display: block;
      font-size: .95rem;
      font-weight: 600;
      line-height: 1.35;
      margin-bottom: 4px
    }

    .sol span {
      font-size: .84rem !important;
      line-height: 1.5 !important
    }

    .sol {
      padding: 22px 24px !important;
      min-height: 0 !important;
      align-items: flex-start !important;
      gap: 18px !important
    }

    .sol svg {
      margin-top: 4px
    }

    .sol-list {
      gap: 14px
    }

    /* audience line under the product name, plain text (no pill) */
    .sol.rich .tag {
      display: block !important;
      background: none !important;
      border: 0 !important;
      border-radius: 0 !important;
      padding: 0 !important;
      margin: 0 0 8px !important;
      font-size: .82rem !important;
      font-weight: 500 !important;
      letter-spacing: .02em !important;
      text-transform: none !important;
      opacity: .9
    }

    .sol.rich strong {
      margin-bottom: 0 !important
    }

    /* compact banner cards */
    .sol-list {
      gap: 10px !important
    }

    .sol.rich {
      padding: 14px 22px !important;
      gap: 16px !important;
      min-height: 0 !important
    }

    .sol.rich svg {
      width: 34px;
      height: 34px;
      margin-top: 2px
    }

    .sol.rich strong {
      font-size: 1.1rem !important;
      line-height: 1.2
    }

    .sol.rich .tag {
      font-size: .76rem !important;
      margin: 0 0 5px !important
    }

    .sol.rich .hl {
      font-size: .88rem !important;
      line-height: 1.3;
      margin-bottom: 2px !important
    }

    .sol.rich span {
      font-size: .8rem !important;
      line-height: 1.4 !important
    }

    .sol-list .sol-btn {
      margin-top: 2px;
      padding: 12px 30px
    }

    /* banner cards: soft spotlight that follows the mouse */
    .sol-list>.sol {
      animation-fill-mode: backwards !important;
      overflow: hidden;
      transition: box-shadow .3s ease !important
    }

    .sol-list>.sol::after {
      display: none !important
    }

    .sol-list>.sol::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      opacity: 0;
      transition: opacity .3s;
      background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 70%);
      animation: none !important;
      left: 0;
      width: auto;
      transform: none
    }

    .sol>* {
      position: relative;
      z-index: 1
    }

    @media (hover:hover) and (pointer:fine) {

      .sol:hover,
      .sol:focus-visible {
        transform: none !important;
        box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55), 0 12px 26px color-mix(in srgb, var(--c) 30%, transparent) !important;
        border-color: transparent !important
      }

      .sol:hover::before {
        opacity: 1
      }
    }

    /* back to top */
    .to-top {
      position: fixed;
      right: 22px;
      bottom: 24px;
      z-index: 60;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      border: 2px solid rgba(255, 255, 255, .85);
      background: var(--navy);
      color: #fff;
      display: grid;
      place-items: center;
      cursor: pointer;
      box-shadow: 0 12px 26px rgba(11, 61, 46, .35);
      opacity: 0;
      visibility: hidden;
      transform: translateY(14px) scale(.9);
      transition: opacity .25s, transform .3s cubic-bezier(.3, 1.5, .5, 1), visibility .25s, background .2s
    }

    .to-top.show {
      opacity: 1;
      visibility: visible;
      transform: none
    }

    .to-top:hover {
      background: #1f9d55;
      transform: translateY(-4px)
    }

    .to-top svg {
      width: 20px;
      height: 20px;
      stroke: #fff;
      fill: none;
      stroke-width: 2.4;
      stroke-linecap: round;
      stroke-linejoin: round
    }

    @media (max-width:600px) {
      .to-top {
        right: 14px;
        bottom: 16px;
        width: 44px;
        height: 44px
      }
    }

    .cursor-tip {
      position: fixed;
      left: 0;
      top: 0;
      z-index: 999;
      pointer-events: none;
      padding: 7px 16px;
      border-radius: 999px;
      font-size: .8rem;
      font-weight: 600;
      font-family: inherit;
      color: #072b20;
      background: rgba(255, 255, 255, .38);
      -webkit-backdrop-filter: blur(8px) saturate(1.2);
      backdrop-filter: blur(8px) saturate(1.2);
      border: 1.5px solid rgba(255, 255, 255, .85);
      box-shadow: 0 6px 18px rgba(11, 61, 46, .18);
      opacity: 0;
      transform: scale(.6);
      transition: opacity .18s, transform .22s cubic-bezier(.3, 1.5, .5, 1);
      white-space: nowrap;
      will-change: left, top
    }

    .cursor-tip.on {
      opacity: 1;
      transform: scale(1)
    }

    @media (hover:none) {
      .cursor-tip {
        display: none
      }
    }

    .c-hero {
      background: linear-gradient(135deg, #f1fbf5 0%, #d6f1e2 55%, #b7e6cd 120%);
      color: var(--navy);
      padding: 72px 0 120px;
      position: relative;
      overflow: hidden
    }

    .c-hero::after {
      content: "";
      position: absolute;
      right: -120px;
      top: -120px;
      width: 420px;
      height: 420px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255, 255, 255, .7), transparent 70%)
    }

    .c-hero .eyebrow {
      display: inline-block;
      background: rgba(255, 255, 255, .7);
      color: #12674a;
      border: 1px solid rgba(31, 164, 99, .3);
      padding: 6px 16px;
      border-radius: 999px;
      font-size: .84rem;
      font-weight: 500;
      letter-spacing: .04em;
      margin-bottom: 18px
    }

    .c-hero h1 {
      font-size: clamp(2rem, 4.6vw, 3.3rem);
      line-height: 1.15;
      font-weight: 700;
      max-width: 20ch
    }

    .c-hero h1 em {
      font-style: normal;
      color: #1fa463
    }

    .c-hero p {
      margin-top: 18px;
      max-width: 58ch;
      color: var(--muted);
      font-size: 1.05rem
    }

    .c-hero .btn {
      margin-top: 28px
    }

    .c-cards {
      margin-top: -72px;
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px
    }

    .cc {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 28px;
      box-shadow: 0 14px 34px rgba(11, 61, 46, .08);
      transition: transform .25s, box-shadow .25s
    }

    .cc:hover {
      transform: translateY(-4px);
      box-shadow: 0 20px 40px color-mix(in srgb, var(--c) 22%, transparent)
    }

    .cc .ic {
      width: 52px;
      height: 52px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      background: color-mix(in srgb, var(--c) 14%, #fff);
      color: var(--c);
      margin-bottom: 16px
    }

    .cc .ic svg {
      width: 26px;
      height: 26px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round
    }

    .cc h3 {
      font-size: 1.1rem;
      color: var(--navy);
      margin-bottom: 6px
    }

    .cc a,
    .cc p {
      display: block;
      color: var(--ink);
      text-decoration: none;
      font-weight: 500;
      font-size: .98rem
    }

    .cc a:hover {
      color: var(--c)
    }

    .c-sec {
      padding: 84px 0
    }

    .c-sec .head {
      text-align: center;
      max-width: 640px;
      margin: 0 auto 44px
    }

    .c-sec .kicker {
      color: var(--red)
    }

    .c-sec h2 {
      font-size: clamp(1.6rem, 3.2vw, 2.3rem);
      color: var(--navy);
      line-height: 1.2
    }

    .c-sec .head p {
      margin-top: 10px;
      color: var(--muted)
    }

    .offices {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px
    }

    .of {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 24px;
      border-top: 4px solid var(--c);
      transition: transform .25s, box-shadow .25s
    }

    .of:hover {
      transform: translateY(-4px);
      box-shadow: 0 18px 36px color-mix(in srgb, var(--c) 20%, transparent)
    }

    .of h3 {
      font-size: 1.08rem;
      color: var(--navy);
      margin-bottom: 2px
    }

    .of .co {
      font-size: .82rem;
      color: var(--c);
      font-weight: 600;
      letter-spacing: .04em;
      text-transform: uppercase;
      margin-bottom: 12px
    }

    .of address {
      font-style: normal;
      color: var(--muted);
      font-size: .94rem;
      margin-bottom: 14px;
      min-height: 3em
    }

    .of .row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px
    }

    .of .row a {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-size: .86rem;
      font-weight: 500;
      text-decoration: none;
      color: var(--c);
      background: color-mix(in srgb, var(--c) 10%, #fff);
      padding: 7px 12px;
      border-radius: 999px;
      transition: background .2s, color .2s
    }

    .of .row a:hover {
      background: var(--c);
      color: #fff
    }

    .of .row svg {
      width: 15px;
      height: 15px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round
    }

    .c-cta {
      background: var(--bg);
      padding: 72px 0
    }

    .c-cta .box {
      background: linear-gradient(135deg, #f1fbf5, #cfeedd);
      border: 1px solid #bfe3cf;
      color: var(--navy);
      border-radius: 28px;
      padding: 48px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
      flex-wrap: wrap
    }

    .c-cta h2 {
      font-size: clamp(1.5rem, 3vw, 2.1rem);
      line-height: 1.2
    }

    .c-cta p {
      margin-top: 10px;
      color: var(--muted);
      max-width: 56ch
    }

    .menu>li>a[aria-current] {
      color: var(--navy);
      background: var(--bg)
    }

    @media(max-width:900px) {

      .c-cards,
      .offices {
        grid-template-columns: 1fr 1fr
      }
    }

    @media(max-width:600px) {

      .c-cards,
      .offices {
        grid-template-columns: 1fr
      }

      .c-hero {
        padding: 48px 0 110px
      }

      .c-cta .box {
        padding: 32px 24px
      }

      .c-sec {
        padding: 60px 0
      }
    }

    .a-stats {
      margin-top: -60px;
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px
    }

    .st {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 26px;
      text-align: center;
      box-shadow: 0 14px 34px rgba(11, 61, 46, .08);
      border-top: 4px solid var(--c)
    }

    .st strong {
      display: block;
      font-size: 2.3rem;
      line-height: 1.1;
      color: var(--c);
      font-weight: 700
    }

    .st span {
      display: block;
      margin-top: 6px;
      font-size: .84rem;
      font-weight: 500;
      color: var(--muted);
      letter-spacing: .04em;
      text-transform: uppercase
    }

    .story2 {
      display: grid;
      grid-template-columns: 1.1fr 1fr;
      gap: 48px;
      align-items: center;
      background: linear-gradient(135deg, #f1fbf5, #d6f1e2);
      border: 1px solid #bfe3cf;
      border-radius: 28px;
      padding: 48px
    }

    .s-left h2 {
      font-size: clamp(1.7rem, 3.2vw, 2.4rem);
      color: var(--navy);
      line-height: 1.2;
      margin-bottom: 16px
    }

    .s-left h2 em {
      font-style: normal;
      color: var(--sky)
    }

    .s-left .big {
      font-size: 1.15rem;
      font-weight: 500;
      color: var(--ink);
      border-left: 4px solid var(--sky);
      padding-left: 16px;
      margin-bottom: 14px
    }

    .s-left p {
      color: var(--muted)
    }

    .inds {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 22px
    }

    .inds span {
      background: #fff;
      border: 1px solid #bfe3cf;
      color: var(--navy);
      padding: 8px 16px;
      border-radius: 999px;
      font-size: .88rem;
      font-weight: 500;
      transition: background .2s, color .2s, transform .2s
    }

    .inds span:hover {
      background: var(--sky);
      color: #fff;
      transform: translateY(-2px)
    }

    .s-right {
      display: grid;
      gap: 18px
    }

    .mv {
      display: flex;
      gap: 18px;
      background: #fff;
      border-radius: 20px;
      padding: 24px;
      box-shadow: 0 12px 28px rgba(11, 61, 46, .08);
      transition: transform .25s, box-shadow .25s
    }

    .mv:hover {
      transform: translateY(-4px);
      box-shadow: 0 18px 34px color-mix(in srgb, var(--c) 25%, transparent)
    }

    .mv i {
      flex: none;
      width: 48px;
      height: 48px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      font-style: normal;
      font-weight: 700;
      color: #fff;
      background: var(--c)
    }

    .mv h3 {
      color: var(--navy);
      margin-bottom: 6px
    }

    .mv p {
      color: var(--muted);
      font-size: .95rem
    }

    @media(max-width:900px) {
      .story2 {
        grid-template-columns: 1fr;
        padding: 32px 24px;
        gap: 28px
      }
    }

    .story {
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      gap: 36px;
      align-items: start
    }

    .story p {
      color: var(--muted);
      font-size: 1.02rem;
      margin-bottom: 16px
    }

    .vm {
      display: grid;
      gap: 20px
    }

    .vmc {
      background: #fff;
      border: 1px solid var(--line);
      border-left: 5px solid var(--c);
      border-radius: var(--radius);
      padding: 26px
    }

    .vmc h3 {
      color: var(--navy);
      margin-bottom: 8px
    }

    .vmc p {
      color: var(--muted);
      margin: 0
    }

    .tl {
      position: relative;
      max-width: 760px;
      margin: 0 auto;
      padding-left: 34px
    }

    .tl::before {
      content: "";
      position: absolute;
      left: 9px;
      top: 6px;
      bottom: 6px;
      width: 3px;
      border-radius: 3px;
      background: linear-gradient(#1fa463, #b7e6cd)
    }

    .ti {
      position: relative;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 18px 22px;
      margin-bottom: 16px;
      transition: transform .25s, box-shadow .25s
    }

    .ti:hover {
      transform: translateX(4px);
      box-shadow: 0 12px 26px rgba(31, 164, 99, .18)
    }

    .ti::before {
      content: "";
      position: absolute;
      left: -33px;
      top: 22px;
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background: #fff;
      border: 4px solid var(--sky)
    }

    .ti b {
      color: var(--sky);
      font-size: 1.15rem
    }

    .ti p {
      color: var(--muted);
      margin-top: 2px
    }

    .vals {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px
    }

    .val {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 26px;
      transition: transform .25s, box-shadow .25s
    }

    .val:hover {
      transform: translateY(-4px);
      box-shadow: 0 18px 36px color-mix(in srgb, var(--c) 22%, transparent)
    }

    .val .ic {
      width: 50px;
      height: 50px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      background: color-mix(in srgb, var(--c) 14%, #fff);
      color: var(--c);
      margin-bottom: 14px
    }

    .val .ic svg {
      width: 25px;
      height: 25px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round
    }

    .val h3 {
      color: var(--navy);
      font-size: 1.05rem;
      margin-bottom: 6px
    }

    .val p {
      color: var(--muted);
      font-size: .93rem
    }

    .cert {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px
    }

    .cert div {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 14px 20px;
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 500;
      font-size: .92rem;
      color: var(--navy)
    }

    .cert div::before {
      content: "";
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--sky);
      flex: none
    }

    .alt {
      background: #fff
    }

    @media(max-width:900px) {

      .a-stats,
      .vals,
      .cert {
        grid-template-columns: 1fr 1fr
      }

      .story {
        grid-template-columns: 1fr
      }
    }

    @media(max-width:600px) {

      .a-stats,
      .vals,
      .cert {
        grid-template-columns: 1fr
      }
    }

    .vals.gc3 {
      grid-template-columns: repeat(3, 1fr)
    }

    .vals.gc4 {
      grid-template-columns: repeat(4, 1fr)
    }

    .dpl {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      margin-bottom: 28px
    }

    .dc {
      background: #fff;
      border: 1px solid var(--line);
      border-top: 5px solid var(--c);
      border-radius: 24px;
      padding: 30px;
      transition: transform .3s, box-shadow .3s
    }

    .dc:hover {
      transform: translateY(-5px);
      box-shadow: 0 20px 40px color-mix(in srgb, var(--c) 22%, transparent)
    }

    .dc small {
      color: var(--c);
      font-weight: 600;
      letter-spacing: .06em;
      text-transform: uppercase;
      font-size: .78rem
    }

    .dc h3 {
      color: var(--navy);
      margin: 6px 0 8px;
      font-size: 1.25rem
    }

    .dc p {
      color: var(--muted)
    }

    .pstrip {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: center;
      margin-top: 30px
    }

    .pstrip span {
      background: #fff;
      border: 1px solid #bfe3cf;
      color: var(--navy);
      padding: 9px 18px;
      border-radius: 999px;
      font-size: .9rem;
      font-weight: 500
    }

    .cap {
      text-align: center;
      margin-top: 34px
    }

    .menu>li>a[aria-current] {
      color: var(--navy);
      background: var(--bg)
    }

    .js .rv {
      opacity: 0;
      transform: translateY(26px);
      transition: opacity .7s ease, transform .8s cubic-bezier(.22, 1, .36, 1);
      transition-delay: var(--d, 0s)
    }

    .js .rv.in {
      opacity: 1;
      transform: none
    }

    @media(prefers-reduced-motion:reduce) {
      .js .rv {
        opacity: 1;
        transform: none;
        transition: none
      }
    }

    @media(max-width:1000px) {
      .vals.gc4 {
        grid-template-columns: 1fr 1fr
      }

      .vals.gc3 {
        grid-template-columns: 1fr 1fr
      }

      .dpl {
        grid-template-columns: 1fr
      }
    }

    @media(max-width:600px) {

      .vals.gc4,
      .vals.gc3 {
        grid-template-columns: 1fr
      }
    }

    .btn.pg {
      background: #12804d
    }

    .btn.pg:hover {
      background: #0b6a3e;
      box-shadow: 0 10px 22px rgba(18, 128, 77, .32)
    }

    /*om-css*/
    .om {
      position: fixed;
      inset: 0;
      z-index: 100;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background: rgba(8, 40, 28, .55);
      backdrop-filter: blur(4px);
      opacity: 0;
      transition: opacity .3s
    }

    .om.open {
      display: flex
    }

    .om.show {
      opacity: 1
    }

    .om-box {
      position: relative;
      width: min(560px, 100%);
      max-height: 92vh;
      overflow: auto;
      background: #fff;
      border-radius: 26px;
      padding: 34px;
      box-shadow: 0 30px 70px rgba(8, 40, 28, .35);
      transform: translateY(24px) scale(.97);
      transition: transform .4s cubic-bezier(.22, 1, .36, 1);
      border-top: 6px solid #1fa463;
      text-align: left
    }

    .om.show .om-box {
      transform: none
    }

    .om-x {
      position: absolute;
      right: 14px;
      top: 14px;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      border: 0;
      background: #eef7f1;
      color: #0b3d2e;
      font-size: 1.4rem;
      line-height: 1;
      cursor: pointer;
      transition: background .2s, transform .2s
    }

    .om-x:hover {
      background: #d6f1e2;
      transform: rotate(90deg)
    }

    .om h2 {
      font-size: 1.45rem;
      color: #0b3d2e;
      margin: 0 40px 4px 0;
      line-height: 1.25
    }

    .om .om-sub {
      color: #55705f;
      font-size: .94rem;
      margin-bottom: 20px
    }

    .om form {
      display: grid;
      gap: 14px
    }

    .om .om-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px
    }

    .om label {
      display: grid;
      gap: 6px;
      font-size: .84rem;
      font-weight: 600;
      color: #0b3d2e
    }

    .om input,
    .om textarea {
      font: inherit;
      font-weight: 400;
      font-size: .95rem;
      color: #17301f;
      background: #f4fbf7;
      border: 1.5px solid #cfe8da;
      border-radius: 12px;
      padding: 11px 14px;
      width: 100%;
      transition: border-color .2s, box-shadow .2s, background .2s
    }

    .om textarea {
      min-height: 92px;
      resize: vertical
    }

    .om input:focus,
    .om textarea:focus {
      outline: none;
      border-color: #1fa463;
      background: #fff;
      box-shadow: 0 0 0 4px rgba(31, 164, 99, .16)
    }

    .om input.bad {
      border-color: #b01f24;
      background: #fff6f6
    }

    .om .om-go {
      margin-top: 4px;
      justify-content: center;
      width: 100%
    }

    .om .om-note {
      font-size: .8rem;
      color: #55705f;
      text-align: center
    }

    .om .om-ok {
      display: none;
      text-align: center;
      padding: 14px 0 4px
    }

    .om .om-ok i {
      display: grid;
      place-items: center;
      width: 64px;
      height: 64px;
      margin: 0 auto 14px;
      border-radius: 50%;
      background: #e4f6ec;
      color: #12804d
    }

    .om .om-ok i svg {
      width: 32px;
      height: 32px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.6;
      stroke-linecap: round;
      stroke-linejoin: round
    }

    .om .om-ok p {
      color: #55705f;
      margin-top: 6px
    }

    .om .om-ok a {
      color: #0b3d2e;
      font-weight: 600
    }

    .om.done form,
    .om.done .om-sub,
    .om.done h2 {
      display: none
    }

    .om.done .om-ok {
      display: block
    }

    body.om-lock {
      overflow: hidden
    }

    @media(max-width:560px) {
      .om-box {
        padding: 26px 20px
      }

      .om .om-row {
        grid-template-columns: 1fr
      }
    }

    @media(prefers-reduced-motion:reduce) {

      .om,
      .om-box {
        transition: none
      }
    }

    /*/om-css*/
    .c-hero {
      background: linear-gradient(135deg, #f4fbf7 0%, #e6f4eb 100%) !important;
      color: var(--navy);
      padding: 56px 0 64px
    }

    .c-hero::after {
      background: radial-gradient(circle, rgba(31, 164, 99, .12), transparent 70%) !important
    }

    .c-hero .eyebrow {
      background: #fff;
      color: #12674a;
      border: 1px solid #bfe3cf
    }

    .c-hero h1 {
      color: var(--navy);
      max-width: none;
      font-size: clamp(2.4rem, 5.4vw, 3.8rem)
    }

    .c-hero .hsub {
      color: #0f857f;
      font-size: clamp(1.15rem, 2.4vw, 1.7rem);
      font-weight: 600;
      line-height: 1.3;
      margin-top: 8px;
      max-width: none
    }

    .c-hero p {
      color: var(--muted)
    }

    .c-hero .hrf a {
      background: var(--c);
      color: #fff;
      box-shadow: 0 8px 18px color-mix(in srgb, var(--c) 30%, transparent)
    }

    .c-hero .hrf a:hover {
      filter: brightness(.92);
      transform: translateY(-3px)
    }

    .hrf {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin: 26px 0 8px
    }

    .hrf a {
      background: #12804d;
      color: #fff;
      text-decoration: none;
      font-weight: 500;
      font-size: .92rem;
      padding: 9px 18px;
      border-radius: 8px;
      transition: transform .25s, background .25s
    }

    .hrf a:hover {
      background: #0b6a3e;
      transform: translateY(-3px)
    }

    .pm {
      display: grid;
      grid-template-columns: 300px 1fr;
      gap: 0;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 26px;
      overflow: hidden;
      box-shadow: 0 12px 30px color-mix(in srgb, var(--c) 10%, transparent);
      transition: box-shadow .3s
    }

    .pm:hover {
      box-shadow: 0 22px 46px color-mix(in srgb, var(--c) 22%, transparent)
    }

    .pm-side {
      background: linear-gradient(160deg, var(--c), color-mix(in srgb, var(--c) 65%, #000));
      color: #fff;
      padding: 34px 28px;
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 6px
    }

    .pm-side b {
      position: absolute;
      right: 22px;
      top: 18px;
      font-size: 2.6rem;
      font-weight: 700;
      opacity: .18;
      line-height: 1
    }

    .pm-ic {
      display: grid;
      place-items: center;
      width: 58px;
      height: 58px;
      border-radius: 18px;
      background: rgba(255, 255, 255, .2);
      margin-bottom: 12px
    }

    .pm-ic svg {
      width: 28px;
      height: 28px;
      fill: none;
      stroke: #fff;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round
    }

    .pm-side h3 {
      color: #fff !important;
      font-size: 1.5rem;
      line-height: 1.2
    }

    .pm-side p {
      color: rgba(255, 255, 255, .9);
      font-size: .95rem
    }

    .pm-n {
      margin-top: auto;
      padding-top: 16px;
      font-size: .78rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      font-weight: 600;
      opacity: .85
    }

    .pm-body {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px 28px;
      padding: 28px 32px;
      align-content: start
    }

    .pl {
      display: grid;
      gap: 4px;
      align-content: start
    }

    .pmlist {
      display: grid;
      gap: 20px
    }

    .pm-body {
      align-content: center !important
    }

    .pm-side {
      padding: 26px 26px
    }

    .pm-side h3 {
      font-size: 1.35rem
    }

    .pl li {
      position: relative;
      padding: 9px 10px 9px 30px;
      border-radius: 10px;
      font-size: .93rem;
      color: var(--ink);
      line-height: 1.45;
      transition: background .2s
    }

    .pl li::before {
      content: "";
      position: absolute;
      left: 8px;
      top: 14px;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: color-mix(in srgb, var(--c) 18%, #fff);
      border: 2px solid var(--c)
    }

    .pl li:hover {
      background: color-mix(in srgb, var(--c) 8%, #fff)
    }

    .kicker {
      color: #0f857f !important
    }

    @media(max-width:1000px) {
      .pm {
        grid-template-columns: 1fr
      }

      .pm-body {
        grid-template-columns: 1fr
      }

      .vals.gc5 {
        grid-template-columns: 1fr 1fr
      }

      .vals.gc5>.val,
      .vals.gc5>.val:nth-child(n+4) {
        grid-column: auto
      }
    }

    @media(max-width:600px) {
      .vals.gc5 {
        grid-template-columns: 1fr
      }

      .pm-body {
        padding: 20px 14px
      }
    }

    /*clipx*/
    .c-sec,
    .c-hero {
      overflow-x: clip
    }

    .head.hd1 {
      max-width: none
    }

    .hd1 h2 {
      white-space: nowrap;
      font-size: clamp(1rem, 4.7vw, 2.8rem)
    }

    .sizebadge {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 9px 22px 9px 14px;
      border-radius: 999px;
      background: linear-gradient(135deg, #0f5c3f, #0f857f);
      color: #fff;
      font-weight: 700;
      font-size: .92rem;
      letter-spacing: .2px;
      box-shadow: 0 10px 24px rgba(18, 88, 112, .25);
      margin-bottom: 16px;
      position: relative;
      border: 2px solid #fff;
      outline: 1px solid rgba(15, 133, 127, .35)
    }

    .sizebadge svg {
      background: rgba(255, 255, 255, .2);
      border-radius: 50%;
      padding: 6px;
      width: 30px;
      height: 30px;
      box-sizing: border-box
    }

    .stat3 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      margin-top: 26px;
      max-width: none
    }

    .stat3>div {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 16px 20px;
      box-shadow: 0 8px 20px rgba(15, 92, 63, .07)
    }

    .stat3 b {
      display: block;
      font-size: 1.9rem;
      color: #0f5c3f;
      line-height: 1.1
    }

    .stat3 span {
      font-size: .85rem;
      color: var(--muted)
    }

    .dgrid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px
    }

    .dgrid .dc {
      padding: 26px 26px 24px;
      border-radius: 22px;
      transition: transform .3s, box-shadow .3s, border-color .3s
    }

    .dgrid .dc:hover {
      transform: translateY(-6px);
      box-shadow: 0 18px 38px color-mix(in srgb, var(--c) 22%, transparent);
      border-color: color-mix(in srgb, var(--c) 45%, #fff)
    }

    .dc-top {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 14px
    }

    .dc-top h3 {
      margin: 0 !important
    }

    .dc-ic {
      flex: none;
      width: 52px;
      height: 52px;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 60%, #000));
      box-shadow: 0 8px 18px color-mix(in srgb, var(--c) 35%, transparent);
      transition: transform .35s cubic-bezier(.3, 1.6, .5, 1)
    }

    .dgrid .dc:hover .dc-ic {
      transform: rotate(-8deg) scale(1.1)
    }

    .dc-wm {
      position: absolute;
      right: -12px;
      bottom: -14px;
      width: 110px;
      height: 110px;
      color: var(--c);
      opacity: .07;
      pointer-events: none;
      transition: opacity .3s, transform .4s
    }

    .dgrid .dc:hover .dc-wm {
      opacity: .13;
      transform: scale(1.1) rotate(-6deg)
    }

    .dgrid .dc p {
      position: relative;
      z-index: 1;
      max-width: 90%
    }

    .dgrid .dc:last-child {
      grid-column: span 3
    }

    .dgrid .dc h3 {
      font-size: 1.1rem
    }

    .nn {
      font-style: normal;
      font-weight: 700;
      font-size: 1.15rem;
      color: var(--c)
    }

    .ctab {
      background: linear-gradient(120deg, #0f5c3f, #0f3f52);
      color: #fff;
      border-radius: 26px;
      padding: 44px 40px;
      text-align: center;
      box-shadow: 0 22px 44px rgba(15, 92, 63, .3)
    }

    .ctab h2 {
      color: #fff;
      font-size: clamp(1.6rem, 3vw, 2.2rem);
      line-height: 1.2
    }

    .ctab p {
      color: #cfe6ef;
      max-width: 46rem;
      margin: 12px auto 0
    }

    .ctab .btn {
      margin-top: 22px;
      background: #fff;
      color: #0f5c3f
    }

    .ctab .btn:hover {
      background: #eaf4f8
    }

    .ctab small {
      display: block;
      margin-top: 18px;
      color: #a9cddb;
      font-size: .9rem
    }

    .pillars {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 22px
    }

    .pillars span {
      background: #fff;
      border: 1px solid #bfe3cf;
      border-radius: 999px;
      padding: 8px 16px;
      font-size: .88rem;
      color: var(--navy);
      font-weight: 500
    }

    .vals.gc4w {
      grid-template-columns: repeat(4, 1fr)
    }

    @media(max-width:1000px) {
      .dgrid {
        grid-template-columns: 1fr 1fr
      }

      .dgrid .dc:last-child {
        grid-column: span 2
      }

      .stat3 {
        grid-template-columns: 1fr
      }

      .stat3>div {
        border-right: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, .16)
      }

      .stat3>div:last-child {
        border-bottom: 0
      }

      .vals.gc4w {
        grid-template-columns: 1fr 1fr
      }
    }

    @media(max-width:600px) {

      .dgrid,
      .vals.gc4w {
        grid-template-columns: 1fr
      }

      .dgrid .dc:last-child {
        grid-column: auto
      }

      .ctab {
        padding: 32px 22px
      }
    }

    /* ERP PDF theme: teal-blue cover, orange accent, lavender-white pages */
    body {
      background: #f0f8f3
    }

    .c-sec {
      background: #f0f8f3
    }

    .c-sec.alt {
      background: #fff
    }

    .c-hero {
      background: #0f5c3f !important;
      color: #fff;
      padding: 64px 0 72px
    }

    .c-hero::after {
      background: radial-gradient(circle, #2f8a64, #2f8a64 60%, transparent 61%) !important;
      right: -90px;
      top: -130px;
      width: 430px;
      height: 430px
    }

    .c-hero .eyebrow {
      background: #2e9e57;
      color: #fff;
      border: 0;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      font-size: .78rem;
      padding: 9px 22px;
      box-shadow: 0 8px 18px rgba(0, 0, 0, .25)
    }

    .c-hero h1 {
      color: #fff
    }

    .c-hero .hsub {
      color: #fff;
      font-weight: 600
    }

    .c-hero p {
      color: #d3ebdd
    }

    .c-hero .hrf a {
      box-shadow: 0 6px 14px rgba(0, 0, 0, .25)
    }

    .stat3 {
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
      border: 1px solid rgba(255, 255, 255, .2);
      border-radius: 20px;
      background: rgba(255, 255, 255, .07);
      margin: 34px 0 26px;
      overflow: hidden
    }

    .stat3>div {
      display: grid;
      grid-template-columns: 48px 1fr;
      column-gap: 14px;
      align-items: center;
      background: transparent;
      border: 0;
      border-right: 1px solid rgba(255, 255, 255, .16);
      border-radius: 0;
      box-shadow: none;
      padding: 20px 22px;
      transition: background .3s
    }

    .stat3>div:last-child {
      border-right: 0
    }

    .stat3>div:hover {
      background: rgba(255, 255, 255, .1)
    }

    .stat3 .si {
      grid-row: span 2;
      display: flex;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: linear-gradient(135deg, #8fe0aa, #2e9e57);
      color: #fff;
      align-items: center;
      justify-content: center;
      margin: 0
    }

    .stat3 b {
      color: #fff;
      font-size: 1.9rem;
      line-height: 1.05
    }

    .stat3 span {
      display: block;
      margin-top: 4px;
      line-height: 1.35;
      color: #d3ebdd;
      font-size: .84rem
    }

    .pillars span {
      background: rgba(255, 255, 255, .1);
      border: 0;
      border-top: 3px solid #2e9e57;
      border-radius: 10px;
      color: #fff;
      padding: 10px 16px
    }

    .ctab {
      background: #0f5c3f
    }

    .dgrid .dc,
    .val,
    .pm {
      background: #fff
    }

    .erpmark {
      display: inline-flex;
      flex-direction: column;
      align-items: flex-start;
      background: #fff;
      border-radius: 14px;
      padding: 10px 22px 9px;
      text-decoration: none;
      box-shadow: 0 8px 20px rgba(0, 0, 0, .18)
    }

    .erpmark span {
      font-size: 1.7rem;
      font-weight: 300;
      letter-spacing: -.5px;
      color: #222;
      line-height: 1.1
    }

    .erpmark b {
      font-weight: 700
    }

    .erpmark i {
      font-style: normal;
      color: #e62a2f
    }

    .erpmark small {
      font-size: .62rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: #0f5c3f;
      font-weight: 600;
      margin-top: 1px
    }

    .ctab .erpmark {
      margin-bottom: 18px
    }

    .ctab .erpmark small {
      display: block;
      margin-top: 1px;
      color: #0f5c3f;
      font-size: .62rem
    }

    .erpbar {
      background: #fff;
      /* border-bottom: 2px solid #0f5c3f */
    }

    .erplogo {
      display: inline-flex;
      flex-direction: column;
      text-decoration: none;
      padding: 8px 0 7px;
      line-height: 1
    }

    .erplogo span {
      font-size: 2.1rem;
      font-weight: 300;
      letter-spacing: -.8px;
      color: #1e1e2a;
      line-height: 1;display: flex;
    }

    .erplogo b {
      font-weight: 700
    }

    .erplogo i {
      font-style: normal;
      color: #e62a2f
    }

    .erplogo small {
      font-size: .66rem;
      letter-spacing: .1em;
      color: #55507a;
      margin-top: 3px;
      font-weight: 500
    }

    .pillars4 {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
      margin-top: 26px
    }

    .pc4 {
      background: rgba(255, 255, 255, .09);
      border: 1px solid rgba(255, 255, 255, .2);
      border-top: 3px solid #2e9e57;
      border-radius: 14px;
      padding: 16px 18px 18px;
      transition: transform .25s, background .25s
    }

    .pc4:hover {
      transform: translateY(-4px);
      background: rgba(255, 255, 255, .16)
    }

    .pc4 b {
      display: block;
      color: #fff;
      font-size: 1.05rem;
      margin-bottom: 4px
    }

    .pc4 span {
      display: block;
      color: #d3ebdd;
      font-size: .88rem;
      line-height: 1.45
    }

    @media(max-width:1000px) {
      .pillars4 {
        grid-template-columns: 1fr 1fr
      }
    }

    @media(max-width:520px) {
      .pillars4 {
        grid-template-columns: 1fr
      }
    }

    .msgline {
      margin-top: 26px;
      max-width: none !important;
      border-left: 5px solid #2e9e57;
      background: rgba(255, 255, 255, .08);
      border-radius: 0 14px 14px 0;
      padding: 16px 22px;
      color: #fff !important;
      font-size: 1.05rem;
      line-height: 1.5
    }

    .msgline b {
      color: #c9f2d8
    }

    .sec-erp .kicker {
      color: #0f857f !important
    }

    /* ERP page animations */
    .sprog {
      position: fixed;
      left: 0;
      top: 0;
      height: 4px;
      width: 0;
      background: linear-gradient(90deg, #2e9e57, #3ccf8e);
      z-index: 100;
      transition: width .1s linear
    }

    .erpbar {
      animation: fdown .8s ease both
    }

    @keyframes fdown {
      from {
        opacity: 0;
        transform: translateY(-14px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    .c-hero::after {
      animation: floaty 9s ease-in-out infinite
    }

    @keyframes floaty {

      0%,
      100% {
        transform: translate(0, 0)
      }

      50% {
        transform: translate(-26px, 24px)
      }
    }

    .c-hero::before {
      content: "";
      position: absolute;
      left: -80px;
      bottom: -120px;
      width: 300px;
      height: 300px;
      border-radius: 50%;
      background: rgba(191, 100, 15, .18);
      animation: floaty 11s ease-in-out infinite reverse;
      pointer-events: none
    }

    .c-hero .eyebrow {
      animation: popin .7s cubic-bezier(.3, 1.4, .5, 1) .1s both
    }

    @keyframes popin {
      from {
        opacity: 0;
        transform: scale(.6)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    .c-hero h1 .ch {
      display: inline-block;
      opacity: 0;
      transform: translateY(40px) rotate(6deg);
      animation: chup .7s cubic-bezier(.2, .8, .2, 1) forwards
    }

    @keyframes chup {
      to {
        opacity: 1;
        transform: none
      }
    }

    .c-hero .hsub {
      animation: fup .8s ease .75s both
    }

    .c-hero>.wrap>p {
      animation: fup .8s ease .95s both
    }

    @keyframes fup {
      from {
        opacity: 0;
        transform: translateY(22px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    .hrf a {
      animation: popin .6s cubic-bezier(.3, 1.4, .5, 1) both;
      animation-delay: calc(1.1s + var(--i, 0)*.09s)
    }

    .stat3>div {
      animation: fup .8s ease both;
      animation-delay: calc(1.5s + var(--i, 0)*.15s)
    }

    .pc4 {
      animation: fup .8s ease both;
      animation-delay: calc(1.9s + var(--i, 0)*.12s)
    }

    .stat3 b {
      background: linear-gradient(90deg, #fff 40%, #c9f2d8 50%, #fff 60%);
      background-size: 250% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: shine 4.5s linear 2.5s infinite
    }

    @keyframes shine {
      from {
        background-position: 120% 0
      }

      to {
        background-position: -120% 0
      }
    }

    .js .rv-l {
      transform: translateX(-60px)
    }

    .js .rv-r {
      transform: translateX(60px)
    }

    .js .rv-z {
      transform: scale(.88)
    }

    .js .rv-l.in,
    .js .rv-r.in,
    .js .rv-z.in {
      transform: none
    }

    .pm .pl li {
      opacity: 0;
      transform: translateX(18px);
      transition: opacity .5s ease, transform .5s ease, background .2s
    }

    .pm.in .pl li {
      opacity: 1;
      transform: none;
      transition-delay: calc(.25s + var(--k, 0)*.07s)
    }

    .pm.in .pm-ic {
      animation: icpop .8s cubic-bezier(.3, 1.5, .5, 1) .2s both
    }

    @keyframes icpop {
      from {
        transform: scale(0) rotate(-40deg)
      }

      to {
        transform: none
      }
    }

    .pm-side b {
      transition: transform .6s, opacity .6s
    }

    .pm:hover .pm-side b {
      transform: scale(1.25);
      opacity: .3
    }

    .val .ic,
    .dc small {
      transition: transform .35s cubic-bezier(.3, 1.6, .5, 1)
    }

    .val:hover .ic {
      transform: scale(1.18) rotate(-8deg)
    }

    .val {
      transition: transform .3s, box-shadow .3s
    }

    .val:hover {
      transform: translateY(-6px);
      box-shadow: 0 18px 36px color-mix(in srgb, var(--c, #0f5c3f) 22%, transparent)
    }

    .dgrid .dc::after {
      content: "";
      position: absolute;
      inset: auto 0 0 0;
      height: 0;
      background: linear-gradient(transparent, color-mix(in srgb, var(--c) 10%, transparent));
      transition: height .35s;
      pointer-events: none;
      border-radius: 0 0 24px 24px
    }

    .dgrid .dc {
      position: relative;
      overflow: hidden
    }

    .dgrid .dc:hover::after {
      height: 100%
    }

    .pstrip span {
      transition: transform .25s, background .25s, color .25s, border-color .25s
    }

    .pstrip span:hover {
      transform: translateY(-4px) scale(1.05);
      background: #0f5c3f;
      color: #fff;
      border-color: #0f5c3f
    }

    .pstrip.in span {
      animation: fup .6s ease both;
      animation-delay: calc(var(--i, 0)*.06s)
    }

    .ctab {
      position: relative;
      overflow: hidden;
      background: linear-gradient(120deg, #0f5c3f, #0b4630, #0f5c3f);
      background-size: 200% 100%;
      animation: bgmove 10s ease-in-out infinite
    }

    @keyframes bgmove {

      0%,
      100% {
        background-position: 0 0
      }

      50% {
        background-position: 100% 0
      }
    }

    .ctab::before {
      content: "";
      position: absolute;
      top: 0;
      left: -60%;
      width: 40%;
      height: 100%;
      background: linear-gradient(110deg, transparent, rgba(255, 255, 255, .12), transparent);
      transform: skewX(-20deg);
      animation: sweep 6s ease-in-out infinite
    }

    @keyframes sweep {

      0%,
      60% {
        left: -60%
      }

      100% {
        left: 130%
      }
    }

    .ctab .btn {
      animation: pulse 2.4s ease-in-out infinite
    }

    @keyframes pulse {

      0%,
      100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, .5)
      }

      60% {
        box-shadow: 0 0 0 16px rgba(255, 255, 255, 0)
      }
    }

    .nn {
      display: inline-block
    }

    .val.in .nn {
      animation: icpop .7s cubic-bezier(.3, 1.5, .5, 1) .3s both
    }

    @media(prefers-reduced-motion:reduce) {

      .c-hero::before,
      .c-hero::after,
      .ctab,
      .ctab::before,
      .ctab .btn,
      .stat3 b,
      .erpbar,
      .hrf a,
      .stat3>div,
      .pc4,
      .c-hero .eyebrow,
      .c-hero .hsub,
      .c-hero>.wrap>p {
        animation: none !important
      }

      .c-hero h1 .ch {
        opacity: 1;
        transform: none;
        animation: none
      }

      .pm .pl li {
        opacity: 1;
        transform: none
      }

      .js .rv-l,
      .js .rv-r,
      .js .rv-z {
        transform: none
      }
    }

    .tms {
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 48px;
      align-items: center
    }

    .tms-l,
    .tms-r {
      position: relative;
      z-index: 2
    }

    .tms-l .fac {
      margin: 22px 0 10px;
      font-weight: 600;
      color: #d3ebdd;
      font-size: .95rem
    }

    .tms-l .hrf {
      justify-content: flex-start
    }

    .kb {
      background: #fff;
      border-radius: 22px;
      padding: 16px 18px 18px;
      box-shadow: 0 30px 60px rgba(0, 0, 0, .35);
      color: #0b3d2e;
      transform: rotate(1.5deg);
      animation: kbfloat 6s ease-in-out infinite
    }

    @keyframes kbfloat {
      50% {
        transform: rotate(1.5deg) translateY(-10px)
      }
    }

    .kb-top {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 14px
    }

    .kb-top span {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #e8b4b4
    }

    .kb-top span:nth-child(2) {
      background: #f0d58a
    }

    .kb-top span:nth-child(3) {
      background: #9fd8b0
    }

    .kb-top em {
      font-style: normal;
      font-weight: 600;
      font-size: .85rem;
      margin-left: 8px;
      flex: 1
    }

    .kb-top u {
      text-decoration: none;
      font-size: .78rem;
      font-weight: 700;
      background: #e6f6ec;
      color: #0f5c3f;
      border-radius: 999px;
      padding: 4px 10px
    }

    .kb-cols {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px
    }

    .kb-cols>div {
      background: #f0f8f3;
      border-radius: 14px;
      padding: 10px;
      display: grid;
      gap: 8px;
      align-content: start
    }

    .kb-cols h4 {
      font-size: .72rem;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: #5a7a6c;
      margin: 0 0 2px
    }

    .kc {
      position: relative;
      background: #fff;
      border-radius: 10px;
      padding: 10px 10px 9px 14px;
      box-shadow: 0 2px 8px rgba(15, 92, 63, .1);
      display: grid;
      gap: 4px
    }

    .kc i {
      position: absolute;
      left: 0;
      top: 8px;
      bottom: 8px;
      width: 4px;
      border-radius: 4px
    }

    .kc b {
      font-size: .78rem;
      line-height: 1.25
    }

    .kc span {
      font-size: .68rem;
      color: #6b8478
    }

    .kb-bar {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 14px;
      font-size: .78rem;
      font-weight: 600
    }

    .kb-bar div {
      flex: 1;
      height: 8px;
      background: #e1efe7;
      border-radius: 8px;
      overflow: hidden
    }

    .kb-bar i {
      display: block;
      height: 100%;
      width: 68%;
      background: linear-gradient(90deg, #2e9e57, #8fe0aa);
      border-radius: 8px
    }

    .kb-bar b {
      color: #0f5c3f
    }

    .pl li b {
      color: #0f5c3f
    }

    .erpbar {
      border-bottom-color: #0f5c3f
    }

    .erplogo i {
      color: #e8710a
    }

    @media(max-width:900px) {
      .tms {
        grid-template-columns: 1fr;
        gap: 34px
      }

      .kb {
        transform: none;
        animation: none
      }
    }

    @media(prefers-reduced-motion:reduce) {
      .kb {
        animation: none
      }
    }

    /*lighthero*/
    .c-hero {
      background: linear-gradient(135deg, #f4fbf7 0%, #e6f4eb 100%) !important;
      color: var(--navy)
    }

    .c-hero h1 {
      color: var(--navy) !important
    }

    .c-hero .hsub {
      color: #0f857f !important
    }

    .c-hero p,
    .c-hero .tms-l p {
      color: var(--muted) !important
    }

    .tms-l .fac {
      color: var(--navy) !important
    }

    .c-hero::before,
    .c-hero::after {
      background: rgba(15, 133, 127, .08) !important;
      border-color: transparent !important
    }

    .kb {
      box-shadow: 0 24px 50px rgba(15, 92, 63, .18);
      border: 1px solid #d6ebdd
    }