:root {
   --g: #1f8a3b;
   --gd: #0f5a24;
   --y: #f5c400;
   --bg: #fffdf0;
   --t: #222
}

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

html {
   scroll-behavior: smooth
}

body {
   font-family: 'Poppins', sans-serif;
   color: var(--t);
   background: #fff;
   line-height: 1.6;
   overflow-x: hidden
}

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

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

ul {
   list-style: none
}

.wrap {
   width: min(1200px, 92%);
   margin: auto
}

section {
   padding: 70px 0
}

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

h1,
h2,
h3 {
   line-height: 1.25
}

h2.title {
   font-size: 2rem;
   text-align: center;
   color: var(--gd);
   margin-bottom: 8px
}

.sub {
   text-align: center;
   color: #666;
   margin-bottom: 38px
}

.btn {
   display: inline-flex;
   gap: 8px;
   align-items: center;
   background: var(--g);
   color: #fff;
   padding: 12px 24px;
   border: 0;
   border-radius: 40px;
   font: 600 .95rem Poppins;
   cursor: pointer;
   transition: .3s
}

.btn:hover {
   background: var(--gd);
   transform: translateY(-3px)
}

.btn.y {
   background: var(--y);
   color: #111
}

.btn.w {
   background: #25d366
}

/* preloader */
#pre {
   position: fixed;
   inset: 0;
   background: var(--bg);
   z-index: 9999;
   display: grid;
   place-items: center;
   transition: opacity .6s, visibility .6s
}

#pre.hide {
   opacity: 0;
   visibility: hidden
}

.gift {
   position: relative;
   width: 120px;
   height: 120px
}

.gbox,
.glid {
   position: absolute;
   left: 0;
   width: 120px;
   background: var(--g)
}

.gbox {
   bottom: 0;
   height: 80px;
   border-radius: 0 0 8px 8px
}

.glid {
   top: 10px;
   height: 34px;
   background: var(--gd);
   border-radius: 6px;
   transition: transform .8s;
   z-index: 2
}

.gbox:after,
.glid:after {
   content: "";
   position: absolute;
   left: 50px;
   top: 0;
   width: 20px;
   height: 100%;
   background: var(--y)
}

.gift.open .glid {
   transform: translateY(-60px) rotate(-18deg)
}

.gbow {
   position: absolute;
   top: -8px;
   left: 38px;
   width: 44px;
   height: 24px;
   z-index: 3;
   border: 6px solid var(--y);
   border-radius: 50% 50% 0 0;
   transition: .8s
}

.gift.open .gbow {
   transform: translateY(-62px) rotate(-18deg)
}

.gship {
   position: absolute;
   left: 50%;
   top: 20px;
   transform: translateX(-50%);
   font-size: 2.4rem;
   color: var(--y);
   z-index: 1;
   opacity: 0;
   transition: .8s .3s
}

.gift.open .gship {
   opacity: 1;
   top: -30px
}

.ptxt {
   margin-top: 26px;
   text-align: center;
   font-weight: 600;
   color: var(--gd)
}

/* ticker */
.ticker {
   background: var(--gd);
   color: #fff;
   font-size: .85rem;
   display: flex;
   overflow: hidden;
   white-space: nowrap
}

.ticker b {
   background: var(--y);
   color: #111;
   padding: 8px 16px;
   z-index: 2;
   flex: none
}

.tk {
   display: inline-block;
   padding: 8px 0;
   animation: mq 45s linear infinite
}

.tk span {
   margin: 0 26px
}

.tk i {
   color: var(--y);
   margin-right: 6px
}

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

/* header */
header {
   position: sticky;
   top: 0;
   background: #fff;
   box-shadow: 0 2px 12px #0002;
   z-index: 900
}

.nav {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 14px;
   padding: 8px 0
}

.nav img {
   height: 52px
}

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

.menu>li {
   position: relative
}

.menu>li>a {
   padding: 10px 11px;
   font-weight: 500;
   font-size: .9rem;
   display: block
}

.menu>li>a:hover {
   color: var(--g)
}

.dd {
   position: absolute;
   top: 100%;
   left: 0;
   background: #fff;
   min-width: 230px;
   box-shadow: 0 8px 24px #0003;
   border-top: 3px solid var(--g);
   opacity: 0;
   visibility: hidden;
   transform: translateY(10px);
   transition: .3s
}

.menu li:hover .dd {
   opacity: 1;
   visibility: visible;
   transform: none
}

.dd a {
   display: block;
   padding: 9px 16px;
   font-size: .88rem
}

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

.hc {
   display: flex;
   gap: 10px;
   align-items: center
}

.ph {
   font-weight: 600;
   color: var(--g)
}

.burger {
   display: none;
   font-size: 1.6rem;
   background: none;
   border: 0;
   color: var(--gd)
}

/* hero */
.hero {
   background: linear-gradient(120deg, var(--bg), #e8f6ea);
   padding: 50px 0
}

.hgrid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 40px;
   align-items: center
}

.hero h1 {
   font-size: 2.5rem;
   color: var(--gd)
}

.hero h1 em {
   color: var(--g);
   font-style: normal
}

.hero p {
   margin: 16px 0 24px;
   color: #444
}

.hero .b {
   display: flex;
   gap: 12px;
   flex-wrap: wrap
}

.chips {
   margin-top: 22px;
   display: flex;
   gap: 16px;
   flex-wrap: wrap;
   font-size: .85rem;
   font-weight: 500
}

.chips i {
   color: var(--g);
   margin-right: 5px
}

.slider {
   position: relative;
   border-radius: 20px;
   overflow: hidden;
   box-shadow: 0 12px 40px #0003;
   aspect-ratio: 1/1;
   background: #fff
}

.slider img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: contain;
   opacity: 0;
   transition: opacity .9s
}

.slider img.on {
   opacity: 1
}

.dots {
   position: absolute;
   bottom: 10px;
   left: 0;
   right: 0;
   display: flex;
   justify-content: center;
   gap: 7px
}

.dots i {
   width: 9px;
   height: 9px;
   border-radius: 50%;
   background: #0004;
   cursor: pointer
}

.dots i.on {
   background: var(--g)
}

/* cards */
.grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
   gap: 24px
}

.card {
   background: #fff;
   border-radius: 16px;
   padding: 28px 22px;
   box-shadow: 0 6px 24px #0001;
   transition: .3s;
   text-align: center;
   border-bottom: 4px solid transparent
}

.card:hover {
   transform: translateY(-8px);
   border-color: var(--y)
}

.card>i {
   font-size: 2.2rem;
   color: var(--g);
   margin-bottom: 14px
}

.card h3 {
   margin-bottom: 8px;
   color: var(--gd)
}

.card p {
   font-size: .92rem;
   color: #555
}

.two {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 40px;
   align-items: center
}

.two img {
   border-radius: 18px;
   box-shadow: 0 10px 30px #0002
}

.qa {
   background: #fff;
   border-left: 4px solid var(--y);
   padding: 14px 18px;
   margin-bottom: 14px;
   border-radius: 8px;
   box-shadow: 0 3px 12px #0001
}

.qa b {
   color: var(--gd)
}

.rent {
   background: linear-gradient(120deg, var(--gd), var(--g));
   color: #fff
}

.rent h2 {
   color: #fff
}

.rent .card {
   color: var(--t)
}

table {
   width: 100%;
   border-collapse: collapse;
   background: #fff;
   border-radius: 12px;
   overflow: hidden;
   box-shadow: 0 4px 18px #0001
}

th {
   background: var(--g);
   color: #fff
}

th,
td {
   padding: 12px 14px;
   text-align: left;
   font-size: .92rem
}

tr:nth-child(even) {
   background: var(--bg)
}

.tw {
   overflow-x: auto
}

.tsl {
   overflow: hidden
}

.tt {
   display: flex;
   transition: transform .6s
}

.tc {
   flex: none;
   padding: 10px
}

.tc .card {
   text-align: left;
   height: 100%
}

.st {
   color: var(--y);
   margin-bottom: 8px
}

.faq {
   max-width: 850px;
   margin: auto
}

.fq {
   background: #fff;
   border-radius: 10px;
   margin-bottom: 12px;
   box-shadow: 0 3px 12px #0001;
   overflow: hidden
}

.fq button {
   width: 100%;
   text-align: left;
   padding: 16px 20px;
   border: 0;
   background: none;
   font: 600 1rem Poppins;
   display: flex;
   justify-content: space-between;
   cursor: pointer;
   color: var(--gd)
}

.fq div {
   max-height: 0;
   overflow: hidden;
   transition: .4s;
   padding: 0 20px;
   color: #555
}

.fq.o div {
   max-height: 300px;
   padding: 0 20px 16px
}

.fq.o i {
   transform: rotate(45deg)
}

.fq i {
   transition: .3s
}

.cg {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 30px
}

.cl li {
   display: flex;
   gap: 14px;
   margin-bottom: 18px
}

.cl i {
   background: var(--g);
   color: #fff;
   width: 42px;
   height: 42px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   flex: none
}

form input,
form select,
form textarea {
   width: 100%;
   padding: 12px 14px;
   margin-bottom: 12px;
   border: 1px solid #ccc;
   border-radius: 10px;
   font: inherit
}

.pbanner {
   background: linear-gradient(120deg, var(--gd), var(--g));
   color: #fff;
   padding: 50px 0;
   text-align: center
}

.pbanner p {
   opacity: .9
}

.prose h2 {
   color: var(--gd);
   margin: 24px 0 10px
}

.prose p,
.prose li {
   margin-bottom: 10px;
   color: #444
}

.prose li:before {
   content: "\f00c";
   font-family: "Font Awesome 6 Free";
   font-weight: 900;
   color: var(--g);
   margin-right: 8px
}

footer {
   background: #0b3d18;
   color: #dfe;
   padding: 50px 0 0
}

.fg {
   display: grid;
   grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
   gap: 30px
}

footer h4 {
   color: var(--y);
   margin-bottom: 14px
}

footer li {
   margin-bottom: 8px;
   font-size: .9rem
}

footer a:hover {
   color: var(--y)
}

.soc {
   display: flex;
   gap: 10px;
   margin-top: 14px
}

.soc a {
   width: 38px;
   height: 38px;
   border-radius: 50%;
   background: #ffffff22;
   display: grid;
   place-items: center;
   transition: .3s
}

.soc a:hover {
   background: var(--y);
   color: #111;
   transform: translateY(-4px)
}

.cp {
   text-align: center;
   padding: 16px;
   margin-top: 30px;
   background: #072b11;
   font-size: .85rem
}

/* modal & floats */
.modal {
   position: fixed;
   inset: 0;
   background: #0009;
   z-index: 9000;
   display: none;
   place-items: center;
   padding: 16px
}

.modal.on {
   display: grid
}

.mb {
   background: #fff;
   border-radius: 18px;
   padding: 28px;
   width: min(430px, 100%);
   position: relative;
   animation: pop .4s
}

.mb h3 {
   color: var(--gd);
   margin-bottom: 14px
}

.x {
   position: absolute;
   top: 10px;
   right: 14px;
   font-size: 1.3rem;
   background: none;
   border: 0;
   cursor: pointer
}

@keyframes pop {
   from {
      transform: scale(.7);
      opacity: 0
   }
}

.fl {
   position: fixed;
   right: 14px;
   bottom: 90px;
   display: flex;
   flex-direction: column;
   gap: 12px;
   z-index: 800
}

.fl a,
.fl button {
   width: 52px;
   height: 52px;
   border-radius: 50%;
   border: 0;
   color: #fff;
   font-size: 1.5rem;
   display: grid;
   place-items: center;
   cursor: pointer;
   box-shadow: 0 4px 14px #0004;
   animation: pulse 2s infinite
}

@keyframes pulse {
   0% {
      box-shadow: 0 0 0 0 #1f8a3b88
   }

   70% {
      box-shadow: 0 0 0 16px #0000
   }
}

.fc {
   background: #1a73e8
}

.fw {
   background: #25d366
}

.fb {
   background: var(--g)
}

.chat {
   position: fixed;
   right: 76px;
   bottom: 90px;
   width: min(320px, 86vw);
   background: #fff;
   border-radius: 16px;
   box-shadow: 0 10px 40px #0004;
   z-index: 850;
   display: none;
   overflow: hidden
}

.chat.on {
   display: block;
   animation: pop .3s
}

.ch {
   background: var(--g);
   color: #fff;
   padding: 14px 16px;
   display: flex;
   justify-content: space-between;
   align-items: center
}

.ch small {
   display: block;
   opacity: .85
}

.cb {
   padding: 14px;
   max-height: 300px;
   overflow: auto;
   background: #f3f7f3
}

.msg {
   background: #fff;
   padding: 9px 13px;
   border-radius: 12px 12px 12px 0;
   margin-bottom: 8px;
   font-size: .88rem;
   box-shadow: 0 2px 6px #0001;
   animation: pop .3s
}

.msg.me {
   background: #dcf8c6;
   border-radius: 12px 12px 0 12px;
   margin-left: 30px
}

.qb {
   padding: 10px;
   display: flex;
   flex-wrap: wrap;
   gap: 6px
}

.qb button {
   border: 1px solid var(--g);
   background: #fff;
   color: var(--g);
   padding: 6px 12px;
   border-radius: 20px;
   font: 500 .8rem Poppins;
   cursor: pointer
}

.qb button:hover {
   background: var(--g);
   color: #fff
}

.rv {
   opacity: 0;
   transform: translateY(40px);
   transition: 1s
}

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

@media(max-width:900px) {
   .menu {
      position: fixed;
      top: 0;
      left: -100%;
      width: 78%;
      height: 100%;
      background: #fff;
      flex-direction: column;
      align-items: flex-start;
      padding: 70px 14px;
      overflow: auto;
      transition: .4s;
      box-shadow: 5px 0 20px #0004
   }

   .menu.on {
      left: 0
   }

   .dd {
      position: static;
      opacity: 1;
      visibility: visible;
      transform: none;
      box-shadow: none;
      border: 0;
      padding-left: 12px
   }

   .burger {
      display: block
   }

   .ph {
      display: none
   }

   .hgrid,
   .two,
   .cg {
      grid-template-columns: 1fr
   }

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

   .hero h1 {
      font-size: 1.8rem
   }

   h2.title {
      font-size: 1.5rem
   }

   section {
      padding: 46px 0
   }
}

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

   .nav img {
      height: 42px
   }

   .hc .btn {
      padding: 9px 14px;
      font-size: .8rem
   }
}

/* =====================================================================
   V2 UPGRADE : rich hero, ribbon preloader (hand pulls ribbon), enquiry corner ribbon, sections
   ===================================================================== */
:root {
   --g2: #34c759;
   --ink: #10251a;
   --mut: #5b6b60;
   --bd: #e6ece6;
   --y2: #ffd84d
}

body {
   font-family: 'Poppins', sans-serif
}

.ticker {
   background: linear-gradient(90deg, #0f5a24, #1f8a3b, #0f5a24);
   background-size: 200% 100%;
   animation: kwGrad 8s linear infinite;
   position: relative;
   z-index: 901
}

@keyframes kwGrad {
   to {
      background-position: 200% 0
   }
}

.ticker b {
   border-radius: 0 30px 30px 0;
   letter-spacing: .3px
}

header {
   backdrop-filter: blur(10px);
   background: #fffffff2;
   border-bottom: 1px solid var(--bd);
   box-shadow: none;
   transition: box-shadow .3s
}

header.sc {
   box-shadow: 0 10px 28px #0f5a2418
}

.menu>li>a {
   position: relative;
   border-radius: 8px
}

.menu>li>a:after {
   content: "";
   position: absolute;
   left: 11px;
   right: 11px;
   bottom: 2px;
   height: 2px;
   background: var(--g);
   transform: scaleX(0);
   transform-origin: left;
   transition: .3s
}

.menu>li:hover>a:after {
   transform: scaleX(1)
}

.btn {
   box-shadow: 0 8px 20px #1f8a3b40;
   position: relative;
   overflow: hidden;
   letter-spacing: .2px
}

.btn:after {
   content: "";
   position: absolute;
   top: 0;
   left: -120%;
   width: 55%;
   height: 100%;
   background: linear-gradient(120deg, transparent, #ffffff70, transparent);
   transform: skewX(-20deg);
   animation: kwShine 3.4s infinite
}

@keyframes kwShine {
   0% {
      left: -120%
   }

   60%,
   100% {
      left: 140%
   }
}

.btn.y {
   box-shadow: 0 8px 20px #f5c40055
}

.btn.ghost {
   background: #fff;
   color: var(--gd);
   border: 1.5px solid var(--g);
   box-shadow: none
}

.btn.ghost:hover {
   background: #eaf7ee;
   color: var(--gd)
}

.btn.ghost:after {
   display: none
}

/* section heading */
.tag {
   display: block;
   text-align: center;
   color: var(--g);
   font-weight: 700;
   font-size: .78rem;
   letter-spacing: 2px;
   text-transform: uppercase;
   margin-bottom: 8px
}

.tag i {
   margin-right: 6px
}

h2.title {
   font-weight: 800;
   color: var(--ink)
}

h2.title:after {
   content: "";
   display: block;
   width: 60px;
   height: 4px;
   border-radius: 4px;
   background: linear-gradient(90deg, var(--g), var(--y));
   margin: 12px auto 0
}

.two h2.title:after {
   margin-left: 0
}

.alt {
   background: linear-gradient(180deg, #f6fbf6, #fffdf0)
}

.rent .tag {
   color: var(--y2)
}

.rent h2.title {
   color: #fff
}

/* cards */
.card {
   border: 1px solid var(--bd);
   border-bottom: 4px solid transparent;
   position: relative;
   overflow: hidden
}

.card>i {
   display: inline-grid;
   place-items: center;
   width: 62px;
   height: 62px;
   border-radius: 18px;
   background: linear-gradient(135deg, #e7f7ec, #fff6cc);
   color: var(--g);
   font-size: 1.6rem;
   transition: .35s
}

.card:hover>i {
   background: linear-gradient(135deg, var(--g), var(--g2));
   color: #fff;
   transform: rotate(-8deg) scale(1.08)
}

.card:hover {
   box-shadow: 0 20px 40px #1f8a3b22;
   border-color: #cfe9d6;
   border-bottom-color: var(--y)
}

.card .more {
   display: inline-flex;
   gap: 6px;
   align-items: center;
   margin-top: 12px;
   color: var(--g);
   font-weight: 600;
   font-size: .88rem
}

.card .more i {
   transition: transform .25s
}

.card:hover .more i {
   transform: translateX(5px)
}

.rent .card {
   border: 0
}

.steps {
   position: relative
}

@media(min-width:900px) {
   .steps:before {
      content: "";
      position: absolute;
      top: 58px;
      left: 12%;
      right: 12%;
      border-top: 2px dashed #b9dcc3
   }
}

.steps .card {
   background: #fff;
   z-index: 1
}

.t-user {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-top: 14px;
   padding-top: 14px;
   border-top: 1px dashed var(--bd)
}

.t-user b {
   display: block;
   font-size: .95rem;
   color: var(--ink)
}

.t-user small {
   color: var(--mut)
}

.t-av {
   width: 44px;
   height: 44px;
   border-radius: 50%;
   background: linear-gradient(135deg, var(--g), var(--y));
   color: #fff;
   font-weight: 700;
   display: grid;
   place-items: center;
   flex: none
}

.tc .card {
   border-radius: 18px
}

.tc .card:before {
   content: "\f10e";
   font-family: "Font Awesome 6 Free";
   font-weight: 900;
   position: absolute;
   right: 20px;
   top: 14px;
   font-size: 1.8rem;
   color: #e7f3ea
}

table {
   border: 1px solid var(--bd)
}

th {
   background: linear-gradient(90deg, var(--gd), var(--g))
}

tbody tr {
   transition: background .2s
}

tbody tr:hover {
   background: #eaf7ee
}

.fq {
   border: 1px solid var(--bd)
}

.fq.o {
   border-color: var(--g)
}

.fq button {
   padding: 18px 20px
}

/* ===== HERO ===== */
.hero {
   position: relative;
   overflow: hidden;
   padding: 64px 0 50px;
   background: linear-gradient(135deg, #f1faf2 0%, #fff 48%, #fff8d6 100%);
   background-size: 200% 200%;
   animation: kwBg 14s ease infinite
}

@keyframes kwBg {

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

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

.blob {
   position: absolute;
   border-radius: 50%;
   filter: blur(60px);
   opacity: .42;
   z-index: 0;
   animation: kwBlob 16s ease-in-out infinite
}

.blob.b1 {
   width: 340px;
   height: 340px;
   background: var(--y);
   top: -90px;
   left: -80px
}

.blob.b2 {
   width: 300px;
   height: 300px;
   background: var(--g);
   bottom: -120px;
   right: 8%;
   opacity: .25;
   animation-delay: -6s
}

@keyframes kwBlob {

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

   50% {
      transform: translate(40px, 30px) scale(1.15)
   }
}

.float-ic {
   position: absolute;
   z-index: 0;
   color: var(--g);
   opacity: .16;
   animation: kwFloat 7s ease-in-out infinite
}

.float-ic.f1 {
   top: 12%;
   left: 46%;
   font-size: 34px
}

.float-ic.f2 {
   top: 72%;
   left: 3%;
   font-size: 44px;
   animation-delay: -2s
}

.float-ic.f3 {
   top: 8%;
   right: 4%;
   font-size: 40px;
   animation-delay: -4s
}

.float-ic.f4 {
   bottom: 26%;
   left: 44%;
   font-size: 30px;
   animation-delay: -1s
}

@keyframes kwFloat {

   0%,
   100% {
      transform: translateY(0) rotate(0)
   }

   50% {
      transform: translateY(-22px) rotate(12deg)
   }
}

.hgrid {
   position: relative;
   z-index: 1;
   grid-template-columns: 1.05fr 1fr;
   gap: 48px
}

.hero-pill {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: #fff;
   border: 1px solid var(--bd);
   padding: 6px 14px;
   border-radius: 30px;
   font-size: .8rem;
   font-weight: 600;
   box-shadow: 0 6px 16px #0001;
   margin-bottom: 16px
}

.hero-pill .dot {
   width: 9px;
   height: 9px;
   border-radius: 50%;
   background: #22c55e;
   animation: kwDot 1.6s infinite
}

@keyframes kwDot {
   0% {
      box-shadow: 0 0 0 0 #22c55e99
   }

   70% {
      box-shadow: 0 0 0 10px #22c55e00
   }

   100% {
      box-shadow: 0 0 0 0 #22c55e00
   }
}

.hero h1 {
   font-size: 2.9rem;
   font-weight: 800;
   color: var(--ink);
   letter-spacing: -.5px
}

.hero h1 em {
   background: linear-gradient(90deg, #1f8a3b, #f5c400, #1f8a3b);
   background-size: 200% auto;
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
   animation: kwText 4s linear infinite
}

@keyframes kwText {
   to {
      background-position: 200% center
   }
}

.hero p {
   color: var(--mut)
}

.chips span {
   background: #fff;
   border: 1px solid var(--bd);
   padding: 5px 12px;
   border-radius: 20px;
   font-size: .8rem;
   font-weight: 600;
   box-shadow: 0 3px 10px #0000000a
}

.hs-wrap {
   position: relative;
   padding: 0 0 22px 22px
}

.hs-wrap:before {
   content: "";
   position: absolute;
   left: 0;
   bottom: 0;
   right: 22px;
   top: 22px;
   border-radius: 26px;
   background: linear-gradient(135deg, var(--g), var(--y));
   opacity: .92
}

.hs-wrap .slider {
   border-radius: 22px;
   box-shadow: 0 26px 50px #10251a38;
   background: #fff
}

.hs-wrap .slider img.on {
   animation: kwKen 6s ease-out both
}

@keyframes kwKen {
   from {
      transform: scale(1.06)
   }

   to {
      transform: scale(1)
   }
}

.dots i.on {
   width: 26px;
   border-radius: 6px
}

.dots i {
   transition: .3s;
   background: #fff;
   box-shadow: 0 1px 4px #0004
}

.hs-badge {
   position: absolute;
   z-index: 3;
   background: #fffffff2;
   border-radius: 14px;
   padding: 10px 14px;
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: .8rem;
   font-weight: 600;
   box-shadow: 0 12px 26px #0000002a;
   animation: kwFloat 6s ease-in-out infinite;
   line-height: 1.25
}

.hs-badge i {
   width: 34px;
   height: 34px;
   border-radius: 50%;
   background: #e7f7ec;
   color: var(--g);
   display: grid;
   place-items: center
}

.hs-badge small {
   display: block;
   font-weight: 400;
   color: var(--mut);
   font-size: .7rem
}

.hs-badge.hb1 {
   top: 8%;
   left: -6px
}

.hs-badge.hb2 {
   bottom: 16%;
   right: -8px;
   animation-delay: -3s
}

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

.sb {
   background: #fff;
   border: 1px solid var(--bd);
   border-radius: 16px;
   padding: 20px 14px;
   text-align: center;
   transition: .3s
}

.sb:hover {
   transform: translateY(-6px);
   box-shadow: 0 18px 34px #1f8a3b22
}

.sb i {
   width: 46px;
   height: 46px;
   border-radius: 14px;
   background: #e7f7ec;
   color: var(--g);
   display: grid;
   place-items: center;
   margin: 0 auto 8px;
   font-size: 1.15rem
}

.sb b {
   display: block;
   font-size: 1.5rem;
   font-weight: 800;
   color: var(--g);
   line-height: 1.2
}

.sb span {
   font-size: .8rem;
   color: var(--mut)
}

/* areas + cta */
.areas {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   justify-content: center
}

.areas span {
   background: #fff;
   border: 1px solid var(--bd);
   padding: 9px 18px;
   border-radius: 30px;
   font-weight: 500;
   font-size: .9rem;
   box-shadow: 0 3px 10px #0000000a;
   transition: .25s
}

.areas span i {
   color: var(--g);
   margin-right: 6px
}

.areas span:hover {
   background: var(--g);
   color: #fff;
   transform: translateY(-3px)
}

.areas span:hover i {
   color: var(--y)
}

.cta {
   background: linear-gradient(120deg, #0f5a24, #1f8a3b, #0f5a24);
   background-size: 200% 100%;
   animation: kwGrad 8s linear infinite;
   border-radius: 24px;
   padding: 54px 28px;
   text-align: center;
   position: relative;
   overflow: hidden;
   color: #fff
}

.cta:before,
.cta:after {
   content: "";
   position: absolute;
   width: 220px;
   height: 220px;
   border-radius: 50%;
   background: #ffffff14
}

.cta:before {
   left: -70px;
   top: -90px
}

.cta:after {
   right: -60px;
   bottom: -100px
}

.cta h2,
.cta p,
.cta .b {
   position: relative;
   z-index: 1
}

.cta h2 {
   font-size: 2rem;
   font-weight: 800;
   margin-bottom: 8px
}

.cta p {
   color: #d9f3df;
   margin-bottom: 22px
}

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

footer {
   position: relative;
   background: linear-gradient(180deg, #0b3d18, #08300f)
}

footer:before {
   content: "";
   display: block;
   height: 40px;
   margin-top: -90px;
   background: #fff;
   clip-path: ellipse(75% 100% at 50% 0)
}

footer h4 {
   position: relative;
   padding-bottom: 10px
}

footer h4:after {
   content: "";
   position: absolute;
   left: 0;
   bottom: 0;
   width: 34px;
   height: 3px;
   border-radius: 3px;
   background: var(--y)
}

footer li a {
   transition: .2s
}

footer li a:hover {
   padding-left: 5px
}

/* ===== ENQUIRY CORNER RIBBON (desktop / tablet-landscape only) ===== */
.enq-ribbon {
   position: fixed;
   top: 0;
   right: 0;
   width: 140px;
   height: 140px;
   overflow: hidden;
   z-index: 1000000;
   pointer-events: none;
   animation: kwEnqIn .9s cubic-bezier(.2, .8, .2, 1) 4.1s both
}

html.pl-seen .enq-ribbon {
   animation-delay: .1s
}

@keyframes kwEnqIn {
   from {
      opacity: 0;
      transform: translate(80px, -80px)
   }

   to {
      opacity: 1;
      transform: none
   }
}

.enq-ribbon:before {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(135deg, #0a4119, #062a10);
   clip-path: polygon(40px 0, 100% 0, 100% 100px);
   filter: drop-shadow(0 4px 6px #0004)
}

.enq-ribbon a {
   pointer-events: auto;
   position: absolute;
   top: 30px;
   right: -52px;
   width: 210px;
   transform: rotate(45deg);
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   padding: 10px 0;
   background: linear-gradient(90deg, #1f8a3b, #34c759 50%, #1f8a3b);
   background-size: 200% 100%;
   animation: kwGrad 6s linear infinite;
   color: #fff;
   font-weight: 700;
   font-size: 14px;
   letter-spacing: 2px;
   text-transform: uppercase;
   text-shadow: 0 1px 2px #0004;
   box-shadow: 0 8px 18px #0f5a2480;
   overflow: hidden;
   cursor: pointer
}

.enq-ribbon a:before {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   top: 3px;
   bottom: 3px;
   border-top: 1.5px dashed #ffffffb3;
   border-bottom: 1.5px dashed #ffffffb3;
   pointer-events: none
}

.enq-ribbon a:after {
   content: "";
   position: absolute;
   top: 0;
   left: -60%;
   width: 40%;
   height: 100%;
   background: linear-gradient(120deg, transparent, #ffffff8c, transparent);
   transform: skewX(-20deg);
   animation: kwShine 3s infinite;
   pointer-events: none
}

.enq-ribbon a i {
   font-size: 14px;
   animation: kwRing 2.2s ease-in-out infinite
}

@keyframes kwRing {

   0%,
   60%,
   100% {
      transform: rotate(0)
   }

   10% {
      transform: rotate(16deg)
   }

   20% {
      transform: rotate(-14deg)
   }

   30% {
      transform: rotate(10deg)
   }

   40% {
      transform: rotate(-8deg)
   }
}

.enq-ribbon a:hover {
   background: linear-gradient(90deg, #10251a, #0f5a24);
   animation-play-state: paused
}

.enq-ribbon a:hover i {
   color: var(--y2)
}

@media(min-width:992px) {
   .hc {
      margin-right: 70px
   }

   .hc .btn.y {
      display: none
   }

   .ticker {
      padding-right: 90px
   }
}

@media(max-width:991px) {
   .enq-ribbon {
      display: none !important
   }
}

/* ===== PRELOADER : hand pulls ribbon, doors open, website appears ===== */
html.pl-lock,
html.pl-lock body {
   overflow: hidden
}

html.pl-seen #pre {
   display: none !important
}

#pre {
   display: block;
   background: transparent;
   place-items: unset;
   overflow: hidden;
   z-index: 9999;
   animation: kwGone .01s linear 4.05s forwards;
   transition: none
}

#pre.hide {
   display: none
}

@keyframes kwGone {
   to {
      visibility: hidden;
      pointer-events: none
   }
}

.pl-panel {
   position: absolute;
   top: 0;
   bottom: 0;
   width: 50.2%;
   background: radial-gradient(circle at 50% 50%, #34c75929, transparent 60%), linear-gradient(135deg, #0b3d18, #0f5a24);
   overflow: hidden
}

.pl-panel:before {
   content: "";
   position: absolute;
   inset: 0;
   background-image: radial-gradient(#ffffff12 1.5px, transparent 1.5px);
   background-size: 26px 26px
}

.pl-l {
   left: 0;
   animation: kwOpenL .95s cubic-bezier(.77, 0, .18, 1) 3.05s forwards;
   box-shadow: 6px 0 30px #0006
}

.pl-r {
   right: 0;
   animation: kwOpenR .95s cubic-bezier(.77, 0, .18, 1) 3.05s forwards;
   box-shadow: -6px 0 30px #0006
}

@keyframes kwOpenL {
   to {
      transform: translateX(-102%)
   }
}

@keyframes kwOpenR {
   to {
      transform: translateX(102%)
   }
}

.pl-brand {
   position: absolute;
   left: 0;
   right: 0;
   top: calc(50% - 190px);
   text-align: center;
   z-index: 3;
   animation: kwBrandIn .7s ease .1s both, kwFade .35s ease 2.95s forwards
}

@keyframes kwBrandIn {
   from {
      opacity: 0;
      transform: translateY(-16px) scale(.94)
   }

   to {
      opacity: 1;
      transform: none
   }
}

@keyframes kwFade {
   to {
      opacity: 0
   }
}

.pl-logo {
   display: inline-flex;
   background: #fff;
   border-radius: 16px;
   padding: 8px 18px;
   box-shadow: 0 14px 34px #0006
}

.pl-logo img {
   height: 56px;
   width: auto
}

.pl-brand h2 {
   color: #fff;
   font-size: 22px;
   margin: 14px 0 0
}

.pl-brand h2 em {
   color: var(--y);
   font-style: normal
}

.pl-note {
   position: absolute;
   left: 0;
   right: 0;
   top: calc(50% + 74px);
   text-align: center;
   z-index: 3;
   color: #d3e8d8;
   font-size: 14px;
   animation: kwBrandIn .6s ease .4s both, kwFade .35s ease 2.95s forwards
}

.pl-bar {
   width: 220px;
   max-width: 70vw;
   height: 5px;
   background: #ffffff26;
   border-radius: 5px;
   margin: 12px auto 0;
   overflow: hidden
}

.pl-bar i {
   display: block;
   height: 100%;
   border-radius: 5px;
   background: linear-gradient(90deg, var(--y), var(--g2));
   transform-origin: left;
   transform: scaleX(0);
   animation: kwBar 1.9s ease-in-out .3s forwards
}

@keyframes kwBar {
   to {
      transform: scaleX(1)
   }
}

.pl-rib-wrap {
   position: absolute;
   left: 0;
   right: 0;
   top: calc(50% - 26px);
   height: 52px;
   z-index: 4;
   animation: kwPull 1.05s cubic-bezier(.55, .05, .85, .4) 2s forwards
}

@keyframes kwPull {
   0% {
      transform: translateX(0)
   }

   12% {
      transform: translateX(-14px)
   }

   100% {
      transform: translateX(118vw)
   }
}

.pl-ribbon {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: space-around;
   padding: 0 90px;
   background: linear-gradient(180deg, #34c759, #1f8a3b 45%, #0f5a24);
   box-shadow: 0 10px 26px #0006;
   animation: kwRibIn .6s cubic-bezier(.2, .9, .3, 1) .05s both
}

@keyframes kwRibIn {
   from {
      transform: scaleY(0);
      opacity: 0
   }

   to {
      transform: scaleY(1);
      opacity: 1
   }
}

.pl-ribbon:before,
.pl-ribbon:after {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   border-top: 1.5px dashed #ffffffb3
}

.pl-ribbon:before {
   top: 5px
}

.pl-ribbon:after {
   bottom: 5px
}

.pl-rtxt {
   color: #fff;
   font-weight: 700;
   font-size: 13px;
   letter-spacing: 3px;
   text-transform: uppercase;
   white-space: nowrap;
   text-shadow: 0 1px 2px #0004
}

.pl-rtxt i {
   margin: 0 8px;
   color: var(--y2);
   font-size: 11px
}

.pl-knot {
   position: absolute;
   left: 50%;
   top: 50%;
   width: 76px;
   height: 76px;
   margin: -38px 0 0 -38px;
   border-radius: 50%;
   z-index: 2;
   background: radial-gradient(circle at 35% 30%, #ffe680, #f5c400 55%, #b38f00);
   border: 4px solid #fff;
   box-shadow: 0 8px 20px #0007;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #0f5a24;
   font-size: 26px;
   animation: kwKnot 1.05s linear 2s forwards
}

.pl-knot:before,
.pl-knot:after {
   content: "";
   position: absolute;
   top: 58px;
   width: 28px;
   height: 64px;
   background: linear-gradient(180deg, #d9a800, #9c7a00);
   z-index: -1;
   clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%)
}

.pl-knot:before {
   left: 6px;
   transform: rotate(14deg);
   transform-origin: top center
}

.pl-knot:after {
   right: 6px;
   transform: rotate(-14deg);
   transform-origin: top center
}

@keyframes kwKnot {
   to {
      transform: rotate(540deg)
   }
}

.pl-hand-wrap {
   position: absolute;
   top: calc(50% - 40px);
   left: 70%;
   height: 80px;
   z-index: 6;
   animation: kwPull 1.05s cubic-bezier(.55, .05, .85, .4) 2s forwards
}

.pl-hand {
   display: flex;
   align-items: center;
   animation: kwHandIn .9s cubic-bezier(.2, .8, .25, 1) .95s both
}

@keyframes kwHandIn {
   from {
      transform: translateX(75vw);
      opacity: 0
   }

   15% {
      opacity: 1
   }

   to {
      transform: none;
      opacity: 1
   }
}

.pl-fist {
   font-size: 78px;
   line-height: 1;
   color: #ffc9a0;
   transform: rotate(-90deg);
   margin-right: -14px;
   filter: drop-shadow(0 6px 8px #0006);
   animation: kwGrip .35s ease 1.85s both
}

@keyframes kwGrip {
   0% {
      transform: rotate(-90deg) scale(1)
   }

   50% {
      transform: rotate(-90deg) scale(.86)
   }

   100% {
      transform: rotate(-90deg) scale(.94)
   }
}

.pl-arm {
   width: 110vw;
   height: 56px;
   background: linear-gradient(180deg, #2c4a37, #16291e);
   border-radius: 8px 0 0 8px;
   position: relative;
   box-shadow: 0 8px 18px #0006
}

.pl-arm:before {
   content: "";
   position: absolute;
   left: 0;
   top: -4px;
   bottom: -4px;
   width: 22px;
   border-radius: 6px;
   background: linear-gradient(180deg, #ffe680, #f5c400)
}

.pl-skip {
   position: absolute;
   right: 20px;
   bottom: 20px;
   z-index: 8;
   background: #ffffff1f;
   color: #fff;
   border: 1px solid #ffffff4d;
   border-radius: 20px;
   padding: 6px 16px;
   font: 500 13px Poppins;
   cursor: pointer;
   animation: kwFade .3s ease 2.9s forwards
}

.pl-skip:hover {
   background: var(--g);
   border-color: var(--g)
}

/* ===== responsive ===== */
@media(max-width:900px) {
   .hero {
      padding: 40px 0 36px
   }

   .hero h1 {
      font-size: 2rem
   }

   .stats {
      grid-template-columns: repeat(2, 1fr);
      margin-top: 34px
   }

   .hs-badge.hb1 {
      left: 0
   }

   .hs-badge.hb2 {
      right: 0
   }

   .cta h2 {
      font-size: 1.5rem
   }
}

@media(max-width:640px) {
   .pl-brand {
      top: calc(50% - 170px)
   }

   .pl-logo img {
      height: 44px
   }

   .pl-brand h2 {
      font-size: 18px
   }

   .pl-rtxt {
      font-size: 10px;
      letter-spacing: 1.5px
   }

   .pl-ribbon {
      padding: 0 60px
   }

   .pl-knot {
      width: 62px;
      height: 62px;
      margin: -31px 0 0 -31px;
      font-size: 22px
   }

   .pl-knot:before,
   .pl-knot:after {
      top: 46px
   }

   .pl-fist {
      font-size: 62px
   }

   .pl-hand-wrap {
      height: 62px;
      top: calc(50% - 31px);
      left: 66%
   }

   .pl-arm {
      height: 44px
   }
}

@media(max-width:520px) {
   .hero h1 {
      font-size: 1.65rem
   }

   .hs-badge {
      display: none
   }

   .hero .b .btn {
      flex: 1 1 0;
      justify-content: center;
      padding: 12px 8px;
      font-size: .82rem
   }

   .hs-wrap {
      padding: 0 0 14px 14px
   }

   .sb b {
      font-size: 1.2rem
   }

   .tag {
      font-size: .7rem
   }
}

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

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

   #pre {
      display: none !important
   }
}

/* =====================================================================
   V3 : header (animated call button), footer redesign, full mobile responsive
   ===================================================================== */
html,
body {
   overflow-x: clip;
   max-width: 100%
}

.hgrid>*,
.two>*,
.cg>*,
.grid>*,
.fg>* {
   min-width: 0
}

h1,
h2,
h3,
p,
li,
td,
a {
   overflow-wrap: break-word
}

img,
video,
iframe,
svg {
   max-width: 100%
}

/* ---------- header ---------- */
header {
   background: #fff;
   backdrop-filter: none;
   -webkit-backdrop-filter: none
}

@supports((backdrop-filter:blur(1px))) {
   header {
      background: #fffffff5
   }
}

.nav {
   flex-wrap: nowrap
}

.logo {
   flex: none;
   display: block
}

.nav .logo img {
   height: 50px;
   width: auto
}

.menu>li>a {
   white-space: nowrap
}

.hc {
   display: flex;
   align-items: center;
   gap: 10px;
   flex: none
}

.dd-t i {
   font-size: .7rem;
   margin-left: 3px;
   transition: transform .3s
}

.has-dd:hover .dd-t i {
   transform: rotate(180deg)
}

.m-head,
.m-cta {
   display: none
}

/* animated call button */
.ph {
   position: relative;
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 5px 18px 5px 5px;
   border-radius: 40px;
   color: #fff;
   background: linear-gradient(110deg, #0f5a24, #1f8a3b 45%, #34c759 60%, #1f8a3b);
   background-size: 220% 100%;
   animation: kwGrad 5s linear infinite;
   box-shadow: 0 8px 20px #1f8a3b55;
   overflow: hidden;
   transition: transform .3s, box-shadow .3s
}

.ph:hover {
   transform: translateY(-2px);
   box-shadow: 0 12px 26px #1f8a3b77;
   color: #fff
}

.ph:after {
   content: "";
   position: absolute;
   top: 0;
   left: -70%;
   width: 40%;
   height: 100%;
   background: linear-gradient(120deg, transparent, #ffffff80, transparent);
   transform: skewX(-20deg);
   animation: kwShine 3.2s infinite;
   pointer-events: none
}

.ph-ic {
   position: relative;
   flex: none;
   width: 38px;
   height: 38px;
   border-radius: 50%;
   background: #fff;
   color: var(--g);
   display: grid;
   place-items: center;
   font-size: 1rem
}

.ph-ic:before,
.ph-ic:after {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: 50%;
   border: 2px solid #fff;
   opacity: 0;
   animation: kwRipple 2s ease-out infinite
}

.ph-ic:after {
   animation-delay: 1s
}

.ph-ic i {
   animation: kwRing 2s ease-in-out infinite;
   transform-origin: 50% 50%
}

@keyframes kwRipple {
   0% {
      transform: scale(1);
      opacity: .75
   }

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

.ph-tx {
   display: flex;
   flex-direction: column;
   line-height: 1.15;
   text-align: left
}

.ph-tx small {
   font-size: .66rem;
   font-weight: 500;
   letter-spacing: .6px;
   text-transform: uppercase;
   color: #d9f7e0
}

.ph-tx b {
   font-size: .98rem;
   font-weight: 700;
   letter-spacing: .4px;
   white-space: nowrap;
   color: #fff
}

.hc .btn.y {
   padding: 11px 20px;
   font-size: .9rem;
   white-space: nowrap
}

.burger {
   width: 44px;
   height: 44px;
   border-radius: 12px;
   background: #eaf7ee;
   color: var(--gd);
   align-items: center;
   justify-content: center;
   font-size: 1.3rem;
   cursor: pointer;
   transition: .3s;
   flex: none
}

.burger:active {
   transform: scale(.93)
}

/* enquiry ribbon / desktop tweaks (menu collapses below 1025px) */
@media(min-width:1025px) {
   .hc {
      margin-right: 70px
   }

   .hc .btn.y {
      display: none
   }

   .ticker {
      padding-right: 90px
   }
}

@media(min-width:992px) and (max-width:1024px) {
   .hc {
      margin-right: 0
   }

   .hc .btn.y {
      display: inline-flex
   }

   .ticker {
      padding-right: 0
   }
}

@media(max-width:1024px) {
   .enq-ribbon {
      display: none !important
   }
}

@media(min-width:1025px) and (max-width:1180px) {
   .menu>li>a {
      padding: 10px 8px;
      font-size: .85rem
   }

   .ph-tx small {
      display: none
   }

   .ph {
      padding-right: 14px
   }
}

/* ---------- mobile / tablet drawer menu ---------- */
.ov {
   position: fixed;
   inset: 0;
   background: #0a1f12b3;
   opacity: 0;
   visibility: hidden;
   transition: opacity .3s, visibility .3s;
   z-index: 899
}

.ov.on {
   opacity: 1;
   visibility: visible
}

html.nav-open,
html.nav-open body {
   overflow: hidden
}

@media(max-width:1024px) {
   .burger {
      display: inline-flex
   }

   .menu {
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      height: 100vh;
      height: 100dvh;
      width: min(86vw, 340px);
      margin: 0;
      padding: 0 0 24px;
      background: #fff;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      overflow-y: auto;
      overscroll-behavior: contain;
      transform: translateX(-105%);
      visibility: hidden;
      transition: transform .35s cubic-bezier(.3, .8, .3, 1), visibility .35s;
      box-shadow: 8px 0 30px #0005;
      z-index: 1000;
      -webkit-overflow-scrolling: touch
   }

   .menu.on {
      transform: none;
      visibility: visible
   }

   .menu>li {
      position: static;
      width: 100%
   }

   .m-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 16px;
      background: linear-gradient(120deg, #f1faf2, #fff8d6);
      border-bottom: 1px solid var(--bd);
      position: sticky;
      top: 0;
      z-index: 2
   }

   .m-head img {
      height: 40px;
      width: auto
   }

   .mx {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 0;
      background: #fff;
      color: var(--gd);
      font-size: 1.15rem;
      box-shadow: 0 3px 10px #0002;
      cursor: pointer
   }

   .menu>li>a {
      padding: 15px 20px;
      font-size: 1rem;
      border-bottom: 1px solid #f0f4f0;
      display: flex;
      justify-content: space-between;
      align-items: center
   }

   .menu>li>a:after {
      display: none
   }

   .dd-t i {
      font-size: .8rem
   }

   .has-dd.open .dd-t i {
      transform: rotate(180deg)
   }

   .has-dd.open>a {
      color: var(--g);
      background: #f3faf4
   }

   .dd {
      position: static;
      min-width: 0;
      width: 100%;
      max-height: 0;
      overflow: hidden;
      opacity: 1;
      visibility: visible;
      transform: none;
      box-shadow: none;
      border: 0;
      background: #f8fbf8;
      transition: max-height .4s ease;
      padding: 0
   }

   .has-dd.open .dd {
      max-height: 520px
   }

   .menu li:hover .dd {
      transform: none
   }

   .dd a {
      padding: 12px 20px 12px 34px;
      font-size: .92rem;
      border-bottom: 1px solid #eef3ee;
      position: relative
   }

   .dd a:before {
      content: "";
      position: absolute;
      left: 20px;
      top: 50%;
      width: 6px;
      height: 6px;
      margin-top: -3px;
      border-radius: 50%;
      background: var(--y)
   }

   .m-cta {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 18px 20px 0
   }

   .m-cta .btn {
      justify-content: center;
      width: 100%
   }
}

@media(max-width:600px) {
   .hc .btn.y {
      display: none
   }

   .nav {
      padding: 7px 0;
      gap: 8px
   }

   .nav .logo img {
      height: 38px
   }

   .hc {
      gap: 8px
   }
}

@media(max-width:420px) {
   .ph {
      padding: 4px 12px 4px 4px;
      gap: 7px
   }

   .ph-ic {
      width: 32px;
      height: 32px;
      font-size: .85rem
   }

   .ph-tx small {
      display: none
   }

   .ph-tx b {
      font-size: .84rem;
      letter-spacing: .2px
   }

   .nav .logo img {
      height: 34px
   }

   .burger {
      width: 40px;
      height: 40px
   }
}

@media(max-width:350px) {
   .ph-tx b {
      font-size: .76rem
   }

   .nav .logo img {
      height: 30px
   }
}

/* ---------- ticker ---------- */
@media(max-width:600px) {
   .ticker {
      font-size: .76rem
   }

   .ticker b {
      padding: 7px 10px
   }

   .ticker b i {
      display: none
   }
}

/* ---------- footer ---------- */
footer {
   background: linear-gradient(180deg, #0b3d18, #072b11);
   color: #d6eadb;
   padding: 0;
   margin-top: 0;
   position: relative;
   overflow: hidden
}

footer:before {
   display: none
}

footer:after {
   content: "";
   position: absolute;
   right: -120px;
   top: -120px;
   width: 340px;
   height: 340px;
   border-radius: 50%;
   background: radial-gradient(circle, #34c75922, transparent 70%);
   pointer-events: none
}

footer .wrap {
   position: relative;
   z-index: 1
}

.fg {
   display: grid;
   grid-template-columns: 1.5fr .9fr 1.25fr 1.45fr;
   gap: 36px 40px;
   padding: 56px 0 38px;
   align-items: start
}

.fcol h4 {
   color: var(--y);
   font-size: 1.05rem;
   font-weight: 700;
   margin: 0 0 18px;
   padding-bottom: 10px;
   position: relative;
   letter-spacing: .3px
}

footer h4:after {
   left: 0
}

.fbrand p {
   margin: 16px 0 18px;
   font-size: .92rem;
   line-height: 1.7;
   color: #c4dccb;
   max-width: 380px
}

.flogo {
   display: inline-block;
   background: #fff;
   border-radius: 12px;
   padding: 7px 14px;
   box-shadow: 0 8px 20px #0004
}

.flogo img {
   height: 46px;
   width: auto
}

.fcol ul {
   margin: 0;
   padding: 0
}

.fcol li {
   margin: 0 0 11px;
   font-size: .92rem;
   line-height: 1.5
}

.fcol li a {
   transition: .25s
}

.fcol:not(.fcon) li a {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   color: #d6eadb
}

.fcol:not(.fcon) li a:before {
   content: "\f105";
   font-family: "Font Awesome 6 Free";
   font-weight: 900;
   color: var(--y);
   font-size: .8rem;
   transition: transform .25s
}

.fcol:not(.fcon) li a:hover {
   color: var(--y);
   padding-left: 0
}

.fcol:not(.fcon) li a:hover:before {
   transform: translateX(4px)
}

.fcon li {
   display: flex;
   align-items: flex-start;
   gap: 12px;
   margin-bottom: 14px
}

.fcon li span:last-child {
   padding-top: 5px;
   min-width: 0;
   overflow-wrap: anywhere
}

.fcon li a:hover {
   color: var(--y)
}

.ci {
   flex: none;
   width: 36px;
   height: 36px;
   border-radius: 50%;
   background: #ffffff1c;
   color: var(--y);
   display: grid;
   place-items: center;
   font-size: .9rem;
   transition: .3s
}

.fcon li:hover .ci {
   background: var(--y);
   color: #10251a
}

.fwa {
   margin-top: 6px;
   padding: 11px 20px;
   font-size: .88rem
}

.soc {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   margin-top: 0
}

.soc a {
   width: 40px;
   height: 40px;
   background: #ffffff1c;
   color: #fff;
   font-size: .95rem
}

.soc a:hover {
   background: var(--y);
   color: #10251a;
   transform: translateY(-4px)
}

.cp {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 10px 20px;
   flex-wrap: wrap;
   background: none;
   margin: 0;
   padding: 18px 0;
   border-top: 1px solid #ffffff1f;
   font-size: .85rem;
   color: #a9c6b1;
   text-align: left
}

.cpl {
   display: flex;
   gap: 18px
}

.cpl a:hover {
   color: var(--y)
}

@media(max-width:1024px) {
   .fg {
      grid-template-columns: 1fr 1fr;
      gap: 34px 30px;
      padding: 46px 0 30px
   }

   .fbrand {
      grid-column: 1/-1
   }

   .fbrand p {
      max-width: 560px
   }
}

@media(max-width:600px) {
   .fg {
      grid-template-columns: 1fr;
      gap: 28px;
      padding: 40px 0 22px
   }

   .fcol h4 {
      margin-bottom: 14px
   }

   .cp {
      flex-direction: column;
      justify-content: center;
      text-align: center;
      padding: 16px 0 20px
   }

   .cpl {
      justify-content: center
   }
}

/* ---------- floating buttons + chat ---------- */
@media(max-width:600px) {
   .fl {
      right: 12px;
      bottom: calc(16px + env(safe-area-inset-bottom, 0px));
      gap: 10px
   }

   .fl a,
   .fl button {
      width: 46px;
      height: 46px;
      font-size: 1.3rem
   }

   .chat {
      left: 12px;
      right: 12px;
      width: auto;
      bottom: calc(16px + env(safe-area-inset-bottom, 0px));
      max-height: 80vh;
      max-height: 80dvh;
      z-index: 1100
   }

   .cb {
      max-height: 38vh
   }

   footer .cp {
      padding-bottom: 22px
   }
}

.mb {
   max-height: 92vh;
   max-height: 92dvh;
   overflow-y: auto
}

/* ---------- general mobile responsive ---------- */
@media(max-width:900px) {
   .hgrid {
      grid-template-columns: 1fr;
      gap: 32px
   }

   .hero {
      padding: 32px 0 34px
   }

   .hero h1 {
      font-size: 2.1rem
   }

   .hs-wrap {
      max-width: 520px;
      width: 100%;
      margin: 0 auto
   }

   .two,
   .cg {
      grid-template-columns: 1fr;
      gap: 28px
   }

   .stats {
      grid-template-columns: repeat(2, 1fr);
      gap: 14px;
      margin-top: 30px
   }
}

@media(max-width:640px) {
   section {
      padding: 40px 0
   }

   .wrap {
      width: min(1200px, 100% - 32px)
   }

   .hero h1 {
      font-size: 1.75rem;
      letter-spacing: -.2px
   }

   .hero p {
      font-size: .95rem;
      margin: 14px 0 20px
   }

   .hero .b {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px
   }

   .hero .b .btn {
      width: 100%;
      justify-content: center;
      padding: 12px 10px;
      font-size: .88rem;
      white-space: nowrap
   }

   .hero .b .btn.ghost {
      grid-column: 1/-1
   }

   .chips {
      gap: 8px;
      margin-top: 18px
   }

   .chips span {
      padding: 5px 11px;
      font-size: .78rem
   }

   .hs-wrap {
      padding: 0 0 12px 12px
   }

   .hs-wrap:before {
      right: 12px;
      top: 12px;
      border-radius: 20px
   }

   .slider {
      border-radius: 16px
   }

   .hs-badge {
      display: none
   }

   .float-ic {
      display: none
   }

   .blob.b1 {
      width: 220px;
      height: 220px
   }

   .blob.b2 {
      width: 200px;
      height: 200px
   }

   .stats {
      gap: 12px
   }

   .sb {
      padding: 16px 10px
   }

   .sb b {
      font-size: 1.15rem
   }

   .sb span {
      font-size: .75rem;
      line-height: 1.35;
      display: block
   }

   .sb i {
      width: 40px;
      height: 40px
   }

   h2.title {
      font-size: 1.45rem
   }

   .sub {
      margin-bottom: 26px;
      font-size: .92rem
   }

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

   .card {
      padding: 22px 18px
   }

   .cta {
      padding: 38px 18px;
      border-radius: 18px
   }

   .cta h2 {
      font-size: 1.35rem
   }

   .cta .b .btn {
      flex: 1 1 100%;
      justify-content: center
   }

   .pbanner {
      padding: 34px 0
   }

   .pbanner h1 {
      font-size: 1.5rem
   }

   th,
   td {
      padding: 10px;
      font-size: .85rem
   }

   .areas span {
      padding: 7px 14px;
      font-size: .84rem
   }

   .mb {
      padding: 22px 18px
   }
}

@media(max-width:380px) {
   .hero h1 {
      font-size: 1.55rem
   }

   .hero .b .btn {
      font-size: .82rem;
      padding: 11px 6px
   }

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

/* layering fix: drawer/header must sit above ticker */
.ticker {
   z-index: 5
}

header {
   z-index: 1000
}

.ov {
   z-index: 999
}

.menu {
   z-index: 1001
}

.modal {
   z-index: 2000
}

@media(max-width:600px) {
   .cp {
      align-items: flex-start;
      text-align: left;
      padding-right: 64px
   }

   .cpl {
      justify-content: flex-start
   }
}

.cl li>div {
   min-width: 0;
   overflow-wrap: anywhere
}