:root {
      --g900: #0b2e1c;
      --g800: #134d2e;
      --g700: #1a6b41;
      --g600: #1e8049;
      --g500: #25a05f;
      --g200: #a3e4c0;
      --g100: #d1f5e4;
      --g50: #edfaf4;
      --ochre: #d4892a;
      --ochre-lt: #f0b860;
      --white: #fff;
      --bg: #f5f8f6;
      --gray100: #e5eeea;
      --gray300: #a8bdb4;
      --txt: #142218;
      --txt2: #4a6659;
      --ff: 'Plus Jakarta Sans', sans-serif;
      --fd: 'Fraunces', Georgia, serif;
      --fm: 'DM Mono', monospace;
      --r: 14px;
      --rl: 22px;
      --sh0: 0 2px 12px rgba(26, 107, 65, .07);
      --sh1: 0 8px 40px rgba(26, 107, 65, .11);
      --sh2: 0 24px 80px rgba(26, 107, 65, .16);
      --ease: cubic-bezier(.4, 0, .2, 1);
    }

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

    html {
      scroll-behavior: smooth
    }

    body {
      font-family: var(--ff);
      background: var(--white);
      color: var(--txt);
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased
    }

    h1,
    h2,
    h3,
    h4,
    h5 {
      font-family: var(--fd);
      line-height: 1.12
    }

    p {
      line-height: 1.75
    }

    a {
      text-decoration: none;
      color: inherit
    }

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

    /* canvas */
    #dotCanvas {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0
    }

    /* layout z-index */
    #mainNav {
      z-index: 1000
    }

    .above-canvas {
      position: relative;
      z-index: 1
    }

    /* eyebrow */
    .eyebrow {
      font-family: var(--fm);
      font-size: .72rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--g600);
      display: block;
      margin-bottom: .6rem
    }

    .section-title {
      font-family: var(--fd);
      font-size: clamp(1.9rem, 4vw, 3rem);
      font-weight: 700;
      color: var(--txt);
      line-height: 1.1
    }

    .section-title em {
      color: var(--g600);
      font-style: italic
    }

    .txt2 {
      color: var(--txt2)
    }

    /* ── buttons ── */
    .btn-g {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      background: var(--g700);
      color: #fff;
      font-family: var(--ff);
      font-weight: 600;
      font-size: .95rem;
      padding: .8rem 2rem;
      border-radius: 50px;
      border: none;
      cursor: pointer;
      transition: all .3s var(--ease);
      box-shadow: 0 4px 20px rgba(26, 107, 65, .3)
    }

    .btn-g:hover {
      background: var(--g800);
      color: #fff;
      transform: translateY(-2px);
      box-shadow: 0 8px 32px rgba(26, 107, 65, .4)
    }

    .btn-og {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      background: transparent;
      color: var(--g700);
      font-weight: 600;
      font-size: .95rem;
      padding: .8rem 2rem;
      border-radius: 50px;
      border: 2px solid var(--g500);
      cursor: pointer;
      transition: all .3s var(--ease)
    }

    .btn-og:hover {
      background: var(--g700);
      color: #fff;
      border-color: var(--g700);
      transform: translateY(-2px);
      box-shadow: 0 8px 32px rgba(26, 107, 65, .25)
    }

    .btn-w {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      background: #fff;
      color: var(--g800);
      font-weight: 700;
      font-size: .95rem;
      padding: .8rem 2rem;
      border-radius: 50px;
      border: none;
      cursor: pointer;
      transition: all .3s var(--ease);
      box-shadow: 0 4px 20px rgba(0, 0, 0, .15)
    }

    .btn-w:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 35px rgba(0, 0, 0, .2);
      color: var(--g800)
    }

    .btn-ow {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      background: transparent;
      color: #fff;
      font-weight: 600;
      font-size: .95rem;
      padding: .8rem 2rem;
      border-radius: 50px;
      border: 2px solid rgba(255, 255, 255, .6);
      cursor: pointer;
      transition: all .3s var(--ease)
    }

    .btn-ow:hover {
      background: rgba(255, 255, 255, .15);
      border-color: #fff;
      color: #fff;
      transform: translateY(-2px)
    }

    .btn-sm {
      font-size: .85rem;
      padding: .6rem 1.4rem
    }

    /* reveal */
    .rv {
      opacity: 0;
      transform: translateY(30px)
    }

    /* ── NAVBAR ── */
    #mainNav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      padding: 1rem 0;
      transition: background .35s, padding .35s, box-shadow .35s
    }

    #mainNav.scrolled {
      background: rgba(255, 255, 255, .97);
      padding: .6rem 0;
      box-shadow: 0 2px 30px rgba(26, 107, 65, .12);
      backdrop-filter: blur(16px)
    }

    .nb {
      font-family: var(--fd);
      font-size: 1.35rem;
      font-weight: 900;
      color: #fff !important;
      display: flex;
      align-items: center;
      gap: .6rem;
      transition: color .35s
    }

    #mainNav.scrolled .nb {
      color: var(--g800) !important
    }

    .nb-icon {
      width: 38px;
      height: 38px;
      background: var(--g600);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1rem;
      flex-shrink: 0;
      box-shadow: 0 4px 12px rgba(26, 107, 65, .35)
    }

    .nb em {
      color: var(--ochre);
      font-style: italic
    }

    .navbar-nav .nav-link {
      color: rgba(255, 255, 255, .88) !important;
      font-size: .875rem;
      font-weight: 500;
      padding: .5rem .9rem !important;
      transition: color .25s
    }

    #mainNav.scrolled .navbar-nav .nav-link {
      color: var(--txt2) !important
    }

    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link.active {
      color: #fff !important
    }

    #mainNav.scrolled .navbar-nav .nav-link:hover,
    #mainNav.scrolled .navbar-nav .nav-link.active {
      color: var(--g700) !important
    }

    .dropdown-menu {
      background: #fff;
      border: 1px solid var(--gray100);
      border-radius: var(--r);
      padding: .5rem;
      box-shadow: var(--sh1);
      min-width: 190px;
      margin-top: .4rem !important
    }

    .dropdown-item {
      color: var(--txt2) !important;
      font-size: .875rem;
      padding: .6rem 1rem;
      border-radius: 8px;
      transition: all .2s
    }

    .dropdown-item:hover {
      background: var(--g50) !important;
      color: var(--g700) !important
    }

    .navbar-toggler {
      border: 2px solid rgba(255, 255, 255, .5);
      padding: .4rem .6rem
    }

    #mainNav.scrolled .navbar-toggler {
      border-color: var(--g400)
    }

    .navbar-toggler-icon {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")
    }

    #mainNav.scrolled .navbar-toggler-icon {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%231a6b41' stroke-linecap='round' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")
    }

    .navbar-toggler:focus {
      box-shadow: 0 0 0 3px rgba(37, 160, 96, .3);
      outline: none
    }

    .btn-join {
      background: var(--ochre);
      color: #fff !important;
      font-weight: 700;
      font-size: .85rem;
      padding: .5rem 1.3rem;
      border-radius: 50px;
      border: none;
      cursor: pointer;
      transition: all .3s;
      box-shadow: 0 4px 16px rgba(212, 137, 42, .4)
    }

    .btn-join:hover {
      background: #b8721f;
      transform: translateY(-1px);
      box-shadow: 0 6px 22px rgba(212, 137, 42, .5)
    }

    @media(max-width:991.98px) {
      .navbar-collapse {
        background: #fff;
        border-radius: var(--r);
        margin-top: .75rem;
        padding: 1rem;
        box-shadow: var(--sh1);
        border: 1px solid var(--gray100)
      }

      .navbar-nav .nav-link {
        color: var(--txt2) !important
      }

      .navbar-nav .nav-link:hover {
        color: var(--g700) !important
      }

      .dropdown-menu {
        box-shadow: none;
        background: var(--g50)
      }
    }

    /* ── HERO ── */
    #hero {
      min-height: 100vh;
      position: relative;
      display: flex;
      align-items: center;
      padding: 90px 0 60px;
      overflow: hidden
    }

    .hero-bg {
      position: absolute;
      inset: 0;
      background: url('https://tda.net.au/lake-with-city.jpg') center/cover;
      will-change: transform
    }

    .hero-ov {
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(11, 46, 28, .93) 0%, rgba(26, 107, 65, .87) 55%, rgba(11, 46, 28, .78) 100%)
    }

    .hero-circle {
      position: absolute;
      right: -60px;
      top: 50%;
      transform: translateY(-50%);
      width: 560px;
      height: 560px;
      pointer-events: none;
      opacity: .13
    }

    .hero-ct {
      position: relative;
      z-index: 2
    }

    .hero-tag {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      background: rgba(192, 73, 30, .18);
      border: 1px solid rgba(192, 73, 30, .5);
      color: #ff9f80;
      font-family: var(--fm);
      font-size: .7rem;
      letter-spacing: .12em;
      padding: .4rem 1.1rem;
      border-radius: 50px;
      margin-bottom: 1.5rem
    }

    .pdot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #ef4444;
      flex-shrink: 0;
      animation: pblink 1.5s ease-in-out infinite
    }

    @keyframes pblink {

      0%,
      100% {
        opacity: 1;
        transform: scale(1)
      }

      50% {
        opacity: .3;
        transform: scale(.8)
      }
    }

    .hero-title {
      font-size: clamp(3rem, 7.5vw, 5.8rem);
      font-weight: 900;
      color: #fff;
      line-height: 1;
      margin-bottom: 1.4rem;
      letter-spacing: -.02em
    }

    .hero-title em {
      color: var(--ochre-lt);
      font-style: italic
    }

    .htg {
      color: #6edba0
    }

    .hero-sub {
      font-size: clamp(1rem, 1.8vw, 1.15rem);
      color: rgba(255, 255, 255, .78);
      line-height: 1.8;
      max-width: 520px;
      margin-bottom: 2.5rem
    }

    .hero-acts {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      margin-bottom: 3rem
    }

    .hero-stats-row {
      display: flex;
      flex-wrap: wrap;
      gap: 0;
      border-top: 1px solid rgba(255, 255, 255, .15);
      padding-top: 2rem
    }

    .hstat {
      padding: 0 2rem 0 0;
      margin-right: 2rem;
      border-right: 1px solid rgba(255, 255, 255, .15)
    }

    .hstat:last-child {
      border-right: none;
      margin-right: 0;
      padding-right: 0
    }

    .hstat .v {
      font-family: var(--fd);
      font-size: 1.8rem;
      font-weight: 700;
      color: var(--ochre-lt);
      line-height: 1
    }

    .hstat .l {
      font-size: .72rem;
      color: rgba(255, 255, 255, .55);
      font-family: var(--fm);
      letter-spacing: .06em;
      margin-top: .25rem
    }

    .hero-panel {
      background: rgba(255, 255, 255, .07);
      border: 1px solid rgba(255, 255, 255, .18);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-radius: var(--rl);
      padding: 2rem;
      color: #fff;
      position: relative;
      overflow: hidden
    }

    .hero-panel::before {
      content: '';
      position: absolute;
      top: -40px;
      right: -40px;
      width: 140px;
      height: 140px;
      background: radial-gradient(circle, rgba(212, 137, 42, .25), transparent 70%);
      border-radius: 50%;
      pointer-events: none
    }

    .ph {
      font-family: var(--fm);
      font-size: .68rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--ochre-lt);
      margin-bottom: 1.2rem;
      display: flex;
      align-items: center;
      gap: .5rem
    }

    .ph::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--ochre-lt);
      animation: pblink 2s infinite
    }

    .dr {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: .75rem 0;
      border-bottom: 1px solid rgba(255, 255, 255, .08)
    }

    .dr:last-of-type {
      border-bottom: none
    }

    .dr .dl {
      font-size: .83rem;
      color: rgba(255, 255, 255, .65)
    }

    .dr .dv {
      font-family: var(--fm);
      font-size: .88rem;
      font-weight: 500
    }

    .dv.rd {
      color: #f87171
    }

    .dv.am {
      color: #fbbf24
    }

    .dv.lm {
      color: #86efac
    }

    .dv.go {
      color: var(--ochre-lt)
    }

    /* ── TICKER ── */
    #ticker {
      background: var(--g800);
      padding: .75rem 0;
      overflow: hidden;
      border-bottom: 1px solid rgba(255, 255, 255, .1);
      position: relative;
      z-index: 1
    }

    .tick-in {
      display: flex;
      align-items: center;
      overflow: hidden
    }

    .tick-badge {
      flex-shrink: 0;
      background: var(--ochre);
      color: #fff;
      font-family: var(--fm);
      font-size: .68rem;
      letter-spacing: .12em;
      font-weight: 500;
      padding: .28rem .9rem;
      border-radius: 4px;
      margin-right: 1.5rem;
      white-space: nowrap
    }

    .tick-scroll {
      display: flex;
      gap: 4rem;
      white-space: nowrap;
      animation: tick 30s linear infinite
    }

    .tick-scroll span {
      font-size: .82rem;
      color: rgba(255, 255, 255, .7)
    }

    .tick-scroll strong {
      color: #fff
    }

    @keyframes tick {
      from {
        transform: translateX(0)
      }

      to {
        transform: translateX(-50%)
      }
    }

    /* ── STATS BAR ── */
    #statsBar {
      background: var(--bg);
      border-bottom: 1px solid var(--gray100);
      position: relative;
      z-index: 1
    }

    .sc {
      padding: 2.5rem 1.5rem;
      text-align: center;
      border-right: 1px solid var(--gray100);
      position: relative;
      overflow: hidden;
      transition: background .3s
    }

    .sc:last-child {
      border-right: none
    }

    .sc:hover {
      background: var(--g50)
    }

    .sc::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 3px;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .5s var(--ease)
    }

    .sc:hover::after {
      transform: scaleX(1)
    }

    .sc.cg::after {
      background: var(--g500)
    }

    .sc.cr::after {
      background: #ef4444
    }

    .sc.co::after {
      background: var(--ochre)
    }

    .sc.ct::after {
      background: #14b8a6
    }

    .sn {
      font-family: var(--fd);
      font-size: clamp(2rem, 4vw, 2.8rem);
      font-weight: 900;
      line-height: 1;
      display: block
    }

    .sn.gr {
      color: var(--g600)
    }

    .sn.rd {
      color: #dc2626
    }

    .sn.oc {
      color: var(--ochre)
    }

    .sn.tl {
      color: #0d9488
    }

    .sl {
      font-family: var(--fm);
      font-size: .68rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--txt2);
      display: block;
      margin-top: .4rem
    }

    /* ── QUOTE BANNER ── */
    #qb {
      background: linear-gradient(135deg, var(--g800) 0%, var(--g700) 100%);
      padding: 4rem 0;
      position: relative;
      overflow: hidden;
      z-index: 1
    }

    #qb::before {
      content: '"';
      position: absolute;
      left: 3%;
      top: -20px;
      font-family: var(--fd);
      font-size: 18rem;
      color: rgba(255, 255, 255, .04);
      line-height: 1;
      pointer-events: none;
      font-weight: 900
    }

    .qt {
      font-family: var(--fd);
      font-style: italic;
      font-size: clamp(1.15rem, 2.5vw, 1.55rem);
      color: #fff;
      line-height: 1.65;
      border-left: 4px solid var(--ochre);
      padding-left: 1.8rem
    }

    .qa {
      font-family: var(--fm);
      font-size: .72rem;
      letter-spacing: .1em;
      color: var(--ochre-lt);
      margin-top: 1rem;
      display: flex;
      align-items: center;
      gap: .5rem
    }

    /* ── CARD STYLES ── */
    .card-base {
      background: var(--white);
      border: 1px solid var(--gray100);
      border-radius: var(--rl);
      transition: all .35s var(--ease);
      box-shadow: var(--sh0)
    }

    .card-base:hover {
      transform: translateY(-6px);
      box-shadow: var(--sh2);
      border-color: var(--g100)
    }

    .card-base::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: var(--g500);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .4s var(--ease);
      border-radius: 0 0 4px 4px
    }

    .card-base:hover::before {
      transform: scaleX(1)
    }

    /* feature cards */
    .fc {
      background: var(--white);
      border: 1px solid var(--gray100);
      border-radius: var(--rl);
      padding: 2rem;
      height: 100%;
      transition: all .35s var(--ease);
      box-shadow: var(--sh0);
      position: relative;
      overflow: hidden
    }

    .fc::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: var(--g500);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .4s var(--ease)
    }

    .fc:hover {
      transform: translateY(-7px);
      border-color: var(--g100);
      box-shadow: var(--sh2)
    }

    .fc:hover::before {
      transform: scaleX(1)
    }

    .fi {
      width: 54px;
      height: 54px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.4rem;
      margin-bottom: 1.3rem
    }

    .fi-g {
      background: var(--g50);
      color: var(--g600)
    }

    .fi-o {
      background: #fff8ec;
      color: var(--ochre)
    }

    .fi-r {
      background: #fff1ee;
      color: #dc2626
    }

    .fi-b {
      background: #eff6ff;
      color: #2563eb
    }

    .fi-t {
      background: #f0fdfa;
      color: #0d9488
    }

    .fi-p {
      background: #fdf4ff;
      color: #9333ea
    }

    .fc h4 {
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--txt);
      margin-bottom: .6rem
    }

    .fc p {
      font-size: .875rem;
      color: var(--txt2);
      line-height: 1.75;
      margin: 0
    }

    .flink {
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      color: var(--g600);
      font-size: .8rem;
      font-weight: 600;
      font-family: var(--fm);
      margin-top: 1rem;
      transition: gap .25s
    }

    .flink:hover {
      gap: .6rem;
      color: var(--g700)
    }

    /* news cards */
    .nc {
      background: var(--white);
      border-radius: var(--rl);
      border: 1px solid var(--gray100);
      overflow: hidden;
      height: 100%;
      display: flex;
      flex-direction: column;
      transition: all .35s var(--ease);
      box-shadow: var(--sh0)
    }

    .nc:hover {
      transform: translateY(-6px);
      box-shadow: var(--sh2);
      border-color: var(--g100)
    }

    .nc-thumb {
      height: 195px;
      overflow: hidden
    }

    .nc-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .6s var(--ease)
    }

    .nc:hover .nc-thumb img {
      transform: scale(1.07)
    }

    .nc-body {
      padding: 1.5rem;
      flex: 1;
      display: flex;
      flex-direction: column
    }

    .nm {
      display: flex;
      align-items: center;
      gap: .6rem;
      margin-bottom: .75rem;
      flex-wrap: wrap
    }

    .nt {
      font-family: var(--fm);
      font-size: .68rem;
      letter-spacing: .06em;
      padding: .2rem .65rem;
      border-radius: 50px
    }

    .nt-u {
      background: #fef2f2;
      color: #dc2626
    }

    .nt-a {
      background: var(--g50);
      color: var(--g700)
    }

    .nt-t {
      background: #eff6ff;
      color: #2563eb
    }

    .nt-e {
      background: #f0fdfa;
      color: #0d9488
    }

    .nd {
      font-family: var(--fm);
      font-size: .7rem;
      color: var(--gray300)
    }

    .nc-body h4 {
      font-size: .95rem;
      color: var(--txt);
      margin-bottom: .5rem;
      line-height: 1.4;
      font-weight: 600
    }

    .nc-body p {
      font-size: .83rem;
      color: var(--txt2);
      line-height: 1.65;
      flex: 1;
      margin: 0
    }

    .nm-more {
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      color: var(--g600);
      font-size: .78rem;
      font-weight: 600;
      margin-top: 1rem;
      transition: gap .25s
    }

    .nm-more:hover {
      gap: .6rem;
      color: var(--g700)
    }

    /* issue cards */
    .ic {
      background: var(--white);
      border: 2px solid var(--gray100);
      border-radius: var(--rl);
      padding: 2rem;
      height: 100%;
      transition: all .35s var(--ease);
      position: relative;
      overflow: hidden
    }

    .ic:hover {
      border-color: var(--g400);
      box-shadow: var(--sh1);
      transform: translateY(-5px)
    }

    .ic-num {
      font-family: var(--fd);
      font-size: 4rem;
      font-weight: 900;
      color: var(--gray100);
      line-height: 1;
      position: absolute;
      top: 1rem;
      right: 1.5rem
    }

    .itag {
      display: inline-block;
      font-family: var(--fm);
      font-size: .68rem;
      letter-spacing: .1em;
      font-weight: 500;
      padding: .25rem .75rem;
      border-radius: 50px;
      margin-bottom: 1rem
    }

    .itag-u {
      background: #fef2f2;
      color: #dc2626;
      border: 1px solid #fecaca
    }

    .itag-a {
      background: var(--g50);
      color: var(--g700);
      border: 1px solid var(--g100)
    }

    .itag-p {
      background: #eff6ff;
      color: #2563eb;
      border: 1px solid #bfdbfe
    }

    .ic h4 {
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--txt);
      margin-bottom: .6rem
    }

    .ic p {
      font-size: .875rem;
      color: var(--txt2);
      line-height: 1.75;
      margin: 0
    }

    .ic-big {
      font-family: var(--fd);
      font-size: 2.2rem;
      font-weight: 900;
      color: var(--g600);
      margin: .75rem 0 .2rem
    }

    /* membership cards */
    .mc {
      border-radius: var(--rl);
      padding: 2.5rem;
      height: 100%;
      position: relative;
      overflow: hidden;
      transition: transform .35s, box-shadow .35s
    }

    .mc:hover {
      transform: translateY(-6px);
      box-shadow: var(--sh2)
    }

    .mc-std {
      background: var(--bg);
      border: 2px solid var(--gray100)
    }

    .mc-ft {
      background: linear-gradient(145deg, var(--g800) 0%, var(--g700) 100%);
      border: 2px solid transparent;
      color: #fff;
      box-shadow: var(--sh1)
    }

    .mc-badge {
      position: absolute;
      top: 1.5rem;
      right: 1.5rem;
      background: var(--ochre);
      color: #fff;
      font-family: var(--fm);
      font-size: .68rem;
      font-weight: 600;
      letter-spacing: .06em;
      padding: .25rem .75rem;
      border-radius: 4px
    }

    .mc-price {
      font-family: var(--fd);
      font-size: 3.5rem;
      font-weight: 900;
      line-height: 1;
      margin-bottom: .2rem
    }

    .mc-std .mc-price {
      color: var(--g700)
    }

    .mc-ft .mc-price {
      color: #fff
    }

    .mc-period {
      font-family: var(--fm);
      font-size: .75rem;
      margin-bottom: 1.5rem
    }

    .mc-std .mc-period {
      color: var(--txt2)
    }

    .mc-ft .mc-period {
      color: rgba(255, 255, 255, .65)
    }

    .mc-feats {
      list-style: none;
      padding: 0;
      margin: 0 0 2rem;
      display: flex;
      flex-direction: column;
      gap: .65rem
    }

    .mc-feats li {
      display: flex;
      align-items: flex-start;
      gap: .65rem;
      font-size: .875rem;
      line-height: 1.5
    }

    .mc-std .mc-feats li {
      color: var(--txt2)
    }

    .mc-ft .mc-feats li {
      color: rgba(255, 255, 255, .82)
    }

    .mc-std .mc-feats li i {
      color: var(--g500);
      flex-shrink: 0;
      margin-top: .15rem
    }

    .mc-ft .mc-feats li i {
      color: var(--ochre-lt);
      flex-shrink: 0;
      margin-top: .15rem
    }

    /* about section */
    .aimg {
      position: relative;
      border-radius: var(--rl);
      overflow: hidden
    }

    .aimg img {
      width: 100%;
      height: 520px;
      object-fit: cover
    }

    .abadge {
      position: absolute;
      bottom: 1.5rem;
      left: 1.5rem;
      background: var(--g700);
      color: #fff;
      font-family: var(--fd);
      font-weight: 700;
      font-size: 1rem;
      padding: .8rem 1.5rem;
      border-radius: var(--r);
      box-shadow: var(--sh1)
    }

    .adeco {
      position: absolute;
      top: -30px;
      right: -30px;
      width: 180px;
      height: 180px;
      pointer-events: none;
      opacity: .6;
      z-index: 2
    }

    .ck-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: .8rem
    }

    .ck-list li {
      display: flex;
      align-items: flex-start;
      gap: .8rem;
      font-size: .9rem;
      color: var(--txt2);
      line-height: 1.6
    }

    .ck-list li i {
      color: var(--g500);
      font-size: 1.05rem;
      margin-top: .1rem;
      flex-shrink: 0
    }

    /* contact bar */
    #cbar {
      background: var(--g800);
      padding: 2.5rem 0;
      position: relative;
      z-index: 1
    }

    .cbox {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: .75rem
    }

    .ci {
      width: 46px;
      height: 46px;
      background: rgba(255, 255, 255, .1);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--ochre-lt);
      font-size: 1.1rem;
      flex-shrink: 0
    }

    .cl {
      font-family: var(--fm);
      font-size: .65rem;
      letter-spacing: .08em;
      color: rgba(255, 255, 255, .5);
      margin-bottom: .15rem
    }

    .cv {
      font-size: .9rem;
      font-weight: 600;
      color: #fff
    }

    /* footer */
    #foot {
      background: var(--g900);
      padding: 5rem 0 2rem;
      position: relative;
      z-index: 1
    }

    .fb {
      font-family: var(--fd);
      font-size: 1.5rem;
      font-weight: 900;
      color: #fff;
      margin-bottom: 1rem
    }

    .fb em {
      color: var(--ochre-lt);
      font-style: italic
    }

    .fd2 {
      font-size: .875rem;
      color: rgba(255, 255, 255, .55);
      line-height: 1.8;
      max-width: 300px
    }

    .fh {
      font-family: var(--fm);
      font-size: .68rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--ochre-lt);
      margin-bottom: 1.1rem;
      display: block
    }

    .flinks {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: .55rem
    }

    .flinks a {
      font-size: .875rem;
      color: rgba(255, 255, 255, .55);
      transition: color .25s
    }

    .flinks a:hover {
      color: var(--ochre-lt)
    }

    .fsep {
      border-top: 1px solid rgba(255, 255, 255, .08);
      margin-top: 3.5rem;
      padding-top: 1.5rem
    }

    /* back to top */
    #btt {
      position: fixed;
      bottom: 2rem;
      right: 2rem;
      z-index: 999;
      width: 46px;
      height: 46px;
      background: var(--g600);
      color: #fff;
      border: none;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1rem;
      cursor: pointer;
      opacity: 0;
      transform: translateY(20px);
      transition: all .3s var(--ease);
      box-shadow: 0 4px 20px rgba(26, 107, 65, .4)
    }

    #btt.show {
      opacity: 1;
      transform: translateY(0)
    }

    #btt:hover {
      background: var(--g700);
      transform: translateY(-3px)
    }

    /* page hero (inner pages) */
    .ph-wrap {
      min-height: 55vh;
      display: flex;
      align-items: center;
      position: relative;
      overflow: hidden;
      padding: 120px 0 80px
    }

    .ph-wrap .bg {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center
    }

    .ph-wrap .ov {
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(11, 46, 28, .92), rgba(26, 107, 65, .85), rgba(11, 46, 28, .78))
    }

    .ph-wrap .ct {
      position: relative;
      z-index: 2
    }

    /* section spacings */
    .sec {
      padding: 5rem 0
    }

    .sec-bg {
      background: var(--bg)
    }

    .sec-dk {
      background: linear-gradient(135deg, var(--g800), var(--g700));
      color: #fff
    }

    .sec-dk .section-title {
      color: #fff
    }

    .sec-dk .section-title em {
      color: var(--ochre-lt)
    }

    .sec-dk .eyebrow {
      color: var(--ochre-lt)
    }

    /* generic content styles */
    .divider {
      width: 48px;
      height: 3px;
      background: var(--g500);
      border-radius: 2px;
      margin-bottom: 1.25rem
    }

    /* timeline */
    .tl-item {
      display: grid;
      grid-template-columns: 100px 1fr;
      gap: 2rem;
      padding: 2rem 0;
      border-bottom: 1px solid rgba(255, 255, 255, .08)
    }

    .tl-item:last-child {
      border-bottom: none
    }

    .tl-year {
      font-family: var(--fd);
      font-size: 1.4rem;
      font-weight: 700;
      color: var(--ochre-lt)
    }

    /* accordion */
    .accordion-item {
      background: transparent;
      border: 1px solid var(--gray100);
      border-radius: var(--r) !important;
      margin-bottom: .75rem;
      overflow: hidden
    }

    .accordion-button {
      font-family: var(--ff);
      font-weight: 600;
      color: var(--txt);
      background: var(--white)
    }

    .accordion-button:not(.collapsed) {
      color: var(--g700);
      background: var(--g50);
      box-shadow: none
    }

    .accordion-button::after {
      filter: invert(35%) sepia(70%) saturate(500%) hue-rotate(100deg)
    }

    .accordion-body {
      color: var(--txt2);
      font-size: .9rem;
      line-height: 1.75
    }

    /* form */
    .form-control,
    .form-select {
      border: 1px solid var(--gray100);
      border-radius: var(--r);
      padding: .85rem 1.1rem;
      font-family: var(--ff);
      color: var(--txt);
      background: var(--white);
      transition: border-color .25s, box-shadow .25s
    }

    .form-control:focus,
    .form-select:focus {
      border-color: var(--g500);
      box-shadow: 0 0 0 3px rgba(37, 160, 96, .15);
      outline: none
    }

    .form-label {
      font-weight: 600;
      font-size: .875rem;
      color: var(--txt);
      margin-bottom: .4rem
    }

    textarea.form-control {
      min-height: 130px;
      resize: vertical
    }

    /* report card */
    .rc {
      background: var(--white);
      border: 1px solid var(--gray100);
      border-radius: var(--rl);
      padding: 1.8rem;
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 1.5rem;
      align-items: flex-start;
      transition: all .35s var(--ease)
    }

    .rc:hover {
      transform: translateY(-3px);
      border-color: var(--g200);
      box-shadow: var(--sh1)
    }

    .rc-icon {
      width: 52px;
      height: 64px;
      background: var(--g50);
      border: 1px solid var(--g100);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.4rem;
      flex-shrink: 0
    }

    .rtag {
      display: inline-block;
      font-family: var(--fm);
      font-size: .7rem;
      letter-spacing: .06em;
      padding: .2rem .65rem;
      border-radius: 4px
    }

    /* resource card */
    .rsc {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 1.2rem 1.5rem;
      background: var(--white);
      border: 1px solid var(--gray100);
      border-radius: var(--r);
      transition: all .3s var(--ease)
    }

    .rsc:hover {
      border-color: var(--g500);
      background: var(--g50);
      transform: translateX(5px)
    }

    .rsc-arrow {
      margin-left: auto;
      color: var(--g500);
      transition: margin .25s
    }

    .rsc:hover .rsc-arrow {
      margin-left: 1.2rem
    }

    /* responsive */
    @media(max-width:767.98px) {
      #hero {
        text-align: center;
        padding-top: 90px
      }

      .hero-acts {
        justify-content: center
      }

      .hero-stats-row {
        justify-content: center
      }

      .hstat {
        border-right: none;
        margin-right: 0;
        padding-right: 0
      }

      .hero-panel {
        margin-top: 2.5rem
      }

      .hero-circle {
        width: 260px;
        height: 260px;
        opacity: .07
      }

      .sc {
        border-right: none;
        border-bottom: 1px solid var(--gray100)
      }

      .sc:last-child {
        border-bottom: none
      }

      .aimg img {
        height: 280px
      }

      .cbox {
        flex-direction: column;
        text-align: center
      }

      .tl-item {
        grid-template-columns: 1fr
      }

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

      .rc-icon {
        display: none
      }
    }

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

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

      * {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important
      }

      #dotCanvas {
        display: none
      }
    }