:root {
       --g: #965A3E;
       --g-d: #7A4731;
       --g-m: #AE6E4F;
       --g-lt: #E2C9BC;
       --g-xlt: #F8F1EE;
       --ink: #1F0E07;
       --ink-m: #4A2E20;
       --ink-s: #8C6B5A;
       --white: #FFFFFF;
       --ff-d: 'Barlow Condensed', sans-serif;
       --ff-h: 'Barlow', sans-serif;
       --ff-b: 'Inter', sans-serif;
       --r: 4px;
       --ease: cubic-bezier(.25, .46, .45, .94);
       --t: .32s
   }
   
   *,
   *::before,
   *::after {
       box-sizing: border-box;
       margin: 0;
       padding: 0
   }
   
   html {
       scroll-behavior: smooth
   }
   
   body {
       font-family: var(--ff-b);
       color: var(--ink);
       background: var(--white);
       -webkit-font-smoothing: antialiased;
       overflow-x: hidden
   }
   
   img {
       display: block;
       max-width: 100%;
       height: auto
   }
   
   a {
       color: inherit;
       text-decoration: none
   }
   
   .swiper-button-next:after,
   .swiper-button-prev:after {
       background: #fff;
       color: #1c3e0c;
       font-size: 16px;
       padding: 10px;
   }
   
   .prod-img-tag {
       font-family: var(--ff-h);
       font-weight: 600;
       font-size: 1.05rem;
       color: var(--ink);
       margin: .55rem 0 0;
   }
   
   .section {
       padding: 3.5rem 0
   }
   
   .section-sm {
       padding: 2.5rem 0
   }
   
   .label {
       font-family: var(--ff-h);
       font-size: .7rem;
       font-weight: 600;
       letter-spacing: .22em;
       text-transform: uppercase;
       color: var(--g)
   }
   
   .label-w {
       color: rgba(255, 255, 255, .55)
   }
   
   .divider {
       display: block;
       width: 40px;
       height: 2px;
       background: var(--g);
       margin-top: .9rem
   }
   
   .divider-w {
       background: rgba(255, 255, 255, .3)
   }
   
   .body-copy {
       font-size: .93rem;
       line-height: 1.82;
       color: var(--ink-m)
   }
   
   .btn-g,
   .btn-go,
   .btn-w,
   .btn-wo {
       display: inline-block;
       font-family: var(--ff-h);
       font-size: .76rem;
       font-weight: 600;
       letter-spacing: .14em;
       text-transform: uppercase;
       padding: .82rem 2.1rem;
       border-radius: var(--r);
       border: 1.5px solid transparent;
       transition: all var(--t) var(--ease);
       cursor: pointer;
       white-space: nowrap
   }
   
   .btn-g {
       background: var(--g);
       border-color: var(--g);
       color: var(--white)
   }
   
   .btn-g:hover {
       background: var(--g-d);
       border-color: var(--g-d);
       color: var(--white);
       transform: translateY(-1px)
   }
   
   .btn-go {
       background: transparent;
       border-color: var(--g);
       color: var(--g)
   }
   
   .btn-go:hover {
       background: var(--g);
       color: var(--white);
       transform: translateY(-1px)
   }
   
   .btn-w {
       background: var(--white);
       border-color: var(--white);
       color: var(--g)
   }
   
   .btn-w:hover {
       background: transparent;
       color: var(--white)
   }
   
   .btn-wo {
       background: transparent;
       border-color: rgba(255, 255, 255, .45);
       color: rgba(255, 255, 255, .88)
   }
   
   .btn-wo:hover {
       border-color: var(--white);
       color: var(--white)
   }
   /* NAV */
   
   #nav {
       position: fixed;
       top: 0;
       left: 0;
       right: 0;
       z-index: 900;
       background: rgba(255, 255, 255, .97);
       backdrop-filter: blur(10px);
       padding: .9rem 0;
       box-shadow: 0 1px 0 var(--g-lt)
   }
   
   .nav-inner {
       display: flex;
       align-items: center;
       justify-content: space-between
   }
   
   .nav-brand {
       font-family: var(--ff-d);
       font-weight: 800;
       font-size: 1.45rem;
       letter-spacing: .12em;
       text-transform: uppercase;
       color: var(--g)
   }
   
   .nav-brand .slash {
       color: var(--g-m);
       margin: 0 1px
   }
   
   .nav-back {
       font-family: var(--ff-h);
       font-size: .78rem;
       font-weight: 500;
       color: var(--ink-m);
       display: flex;
       align-items: center;
       gap: .4rem;
       transition: color var(--t)
   }
   
   .nav-back:hover {
       color: var(--g)
   }
   
   .nav-back svg {
       width: 14px;
       height: 14px;
       stroke: currentColor;
       fill: none;
       stroke-width: 2;
       stroke-linecap: round
   }
   
   .nav-enq {
       font-family: var(--ff-h);
       font-size: .75rem;
       font-weight: 600;
       letter-spacing: .1em;
       text-transform: uppercase;
       color: var(--white);
       background: var(--g);
       border: 1.5px solid var(--g);
       padding: .5rem 1.4rem;
       border-radius: var(--r);
       transition: background var(--t)
   }
   
   .nav-enq:hover {
       background: var(--g-d);
       color: var(--white)
   }
   
   .page-top {
       padding-top: 120px;
   }
   
   .page-breadcrumb {
       background: var(--g-xlt);
       border-bottom: 1px solid var(--g-lt);
       padding: 0.85rem 0;
   }
   
   .page-breadcrumb-nav {
       font-family: var(--ff-h);
       font-size: .7rem;
       letter-spacing: .1em;
       color: var(--ink-s);
       display: flex;
       align-items: center;
       gap: .5rem;
   }
   
   .page-breadcrumb-nav a {
       color: var(--ink-s);
       transition: color var(--t)
   }
   
   .page-breadcrumb-nav a:hover {
       color: var(--g)
   }
   /* GALLERY */
   
   #gallery {
       background: var(--g-xlt);
       padding: 5rem 0
   }
   
   .gl-main img {
       width: 100%;
       height: 480px;
       object-fit: cover;
       border-radius: 6px
   }
   
   .gl-thumb {
       cursor: pointer;
       border-radius: 4px;
       overflow: hidden;
       height: 78px;
       border: 2px solid transparent;
       transition: border-color var(--t), opacity var(--t);
       opacity: .55
   }
   
   .gl-thumb img {
       width: 100%;
       height: 100%;
       object-fit: cover
   }
   
   .gl-thumb.active,
   .gl-thumb:hover {
       border-color: var(--g);
       opacity: 1
   }
   
   @media(max-width:767px) {
       .gl-main img {
           height: 260px
       }
       .gl-thumb {
           height: 58px
       }
   }
   /* OVERVIEW */
   
   .ov-stat {
       padding: 1.75rem;
       border-radius: 6px;
       text-align: center
   }
   
   .ov-n {
       font-family: var(--ff-d);
       font-weight: 700;
       font-size: 2.2rem;
       line-height: 1;
       margin-bottom: .4rem
   }
   /* VARIANTS */
   
   .vc {
       border-radius: 6px;
       overflow: hidden;
       height: 100%;
       border: 1.5px solid var(--g-lt);
       background: var(--white);
       transition: border-color var(--t), transform var(--t), box-shadow var(--t)
   }
   
   .vc:hover {
       border-color: var(--g);
       transform: translateY(-4px);
       box-shadow: 0 16px 40px rgba(150, 90, 62, .1)
   }
   
   .vc-img {
       height: 240px;
       overflow: hidden;
       position: relative
   }
   
   .vc-img img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       transition: transform .55s var(--ease)
   }
   
   .vc:hover .vc-img img {
       transform: scale(1.04)
   }
   
   .vc-badge {
       position: absolute;
       top: 1rem;
       left: 1rem;
       background: var(--g);
       color: var(--white);
       font-family: var(--ff-d);
       font-weight: 700;
       font-size: .68rem;
       letter-spacing: .18em;
       text-transform: uppercase;
       padding: .28rem .75rem;
       border-radius: 2px
   }
   
   .vc-body {
       padding: 2rem
   }
   
   .vc-name {
       font-family: var(--ff-h);
       font-weight: 600;
       font-size: 1.15rem;
       color: var(--ink);
       margin-bottom: .65rem
   }
   
   .vc-desc {
       font-size: .87rem;
       color: var(--ink-s);
       line-height: 1.72;
       margin-bottom: 1.25rem
   }
   
   .vc-ul {
       list-style: none;
       padding: 0
   }
   
   .vc-ul li {
       font-size: .82rem;
       color: var(--ink-m);
       padding: .32rem 0;
       border-bottom: 1px solid var(--g-xlt);
       display: flex;
       align-items: center;
       gap: .5rem
   }
   
   .vc-ul li::before {
       content: '';
       flex-shrink: 0;
       width: 5px;
       height: 5px;
       border-radius: 50%;
       background: var(--g)
   }
   
   .crop-tag {
       display: inline-block;
       background: var(--g-xlt);
       border: 1.5px solid var(--g-lt);
       color: var(--ink-m);
       font-family: var(--ff-h);
       font-size: .79rem;
       font-weight: 500;
       padding: .42rem 1.05rem;
       border-radius: 20px;
       margin: .28rem;
       transition: all var(--t)
   }
   
   .crop-tag:hover {
       background: var(--g);
       border-color: var(--g);
       color: var(--white)
   }
   /* BENEFITS */
   
   #benefits {
       background: var(--ink)
   }
   
   .bn {
       padding: 1.85rem;
       border: 1px solid rgba(255, 255, 255, .07);
       border-radius: 6px;
       transition: border-color var(--t), background var(--t)
   }
   
   .bn:hover {
       border-color: rgba(150, 90, 62, .4);
       background: rgba(150, 90, 62, .06)
   }
   
   .bn-ico {
       width: 42px;
       height: 42px;
       background: rgba(150, 90, 62, .15);
       border-radius: 4px;
       display: flex;
       align-items: center;
       justify-content: center;
       margin-bottom: 1rem
   }
   
   .bn-ico svg {
       width: 21px;
       height: 21px;
       stroke: var(--g-m);
       fill: none;
       stroke-width: 1.6;
       stroke-linecap: round;
       stroke-linejoin: round
   }
   
   .bn-t {
       font-family: var(--ff-h);
       font-weight: 600;
       font-size: .93rem;
       color: var(--white);
       margin-bottom: .38rem
   }
   
   .bn-p {
       font-size: .81rem;
       color: rgba(255, 255, 255, .46);
       line-height: 1.65
   }
   /* SPEC TABLE */
   
   .spec-t {
       width: 100%;
       border-collapse: collapse
   }
   
   .spec-t tr {
       border-bottom: 1px solid var(--g-lt)
   }
   
   .spec-t tr:last-child {
       border-bottom: none
   }
   
   .spec-t td {
       padding: .8rem 1rem;
       font-size: .87rem;
       vertical-align: top
   }
   
   .spec-t td:first-child {
       font-family: var(--ff-h);
       font-weight: 600;
       color: var(--ink);
       width: 42%;
       background: var(--g-xlt)
   }
   
   .spec-t td:last-child {
       color: var(--ink-m)
   }
   /* CTA */
   
   #cta-s {
       background: var(--g);
       position: relative;
       overflow: hidden
   }
   
   #cta-s::before {
       content: 'GROW';
       position: absolute;
       right: -.05em;
       top: 50%;
       transform: translateY(-50%);
       font-family: var(--ff-d);
       font-weight: 800;
       font-size: clamp(6rem, 15vw, 14rem);
       color: rgba(255, 255, 255, .055);
       letter-spacing: -.04em;
       pointer-events: none
   }
   
   .cta-h {
       font-family: var(--ff-d);
       font-weight: 800;
       font-size: clamp(2rem, 5vw, 4.5rem);
       text-transform: uppercase;
       letter-spacing: -.025em;
       line-height: .93;
       color: var(--white)
   }
   /* MINI PRODUCTS */
   
   .mp {
       border: 1.5px solid var(--g-lt);
       border-radius: 6px;
       overflow: hidden;
       transition: border-color var(--t), transform var(--t), box-shadow var(--t)
   }
   
   .mp:hover {
       border-color: var(--g);
       transform: translateY(-4px);
       box-shadow: 0 12px 32px rgba(150, 90, 62, .1)
   }
   
   .mp-img {
       height: 155px;
       overflow: hidden
   }
   
   .mp-img img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       transition: transform .5s var(--ease)
   }
   
   .mp:hover .mp-img img {
       transform: scale(1.05)
   }
   
   .mp-body {
       padding: 1.2rem
   }
   
   .mp-name {
       font-family: var(--ff-h);
       font-weight: 600;
       font-size: .92rem;
       color: var(--ink);
       margin-bottom: .35rem
   }
   
   .mp-sub {
       font-size: .74rem;
       color: var(--ink-s)
   }
   /* FOOTER */
   
   #footer {
       background: var(--ink);
       padding: 3.5rem 0 2rem
   }
   
   .ft-brand {
       font-family: var(--ff-d);
       font-weight: 800;
       font-size: 1.6rem;
       letter-spacing: .1em;
       text-transform: uppercase;
       color: var(--white)
   }
   
   .ft-tl {
       font-size: .76rem;
       color: rgba(255, 255, 255, .3);
       margin-top: .4rem;
       line-height: 1.6
   }
   
   .ft-h {
       font-family: var(--ff-h);
       font-size: .65rem;
       font-weight: 600;
       letter-spacing: .2em;
       text-transform: uppercase;
       color: rgba(255, 255, 255, .3);
       margin-bottom: .85rem
   }
   
   .ft-a {
       display: block;
       font-size: .83rem;
       color: rgba(255, 255, 255, .5);
       padding: .22rem 0;
       transition: color var(--t)
   }
   
   .ft-a:hover {
       color: var(--white)
   }
   
   .ft-base {
       margin-top: 3rem;
       padding-top: 1.25rem;
       border-top: 1px solid rgba(255, 255, 255, .06);
       font-size: .74rem;
       color: rgba(255, 255, 255, .22);
       display: flex;
       flex-wrap: wrap;
       justify-content: space-between;
       gap: .5rem
   }
   /* REVEAL */
   
   .r-up {
       opacity: 0;
       transform: translateY(28px)
   }
   
   .r-fade {
       opacity: 0
   }
   
   .r-left {
       opacity: 0;
       transform: translateX(-28px)
   }
   
   .r-right {
       opacity: 0;
       transform: translateX(28px)
   }
   
    :focus-visible {
       outline: 2px solid var(--g);
       outline-offset: 3px;
       border-radius: 2px
   }
   
   @media(prefers-reduced-motion:reduce) {
       .r-up,
       .r-fade,
       .r-left,
       .r-right {
           opacity: 1 !important;
           transform: none !important
       }
       * {
           transition-duration: .01ms !important;
           animation-duration: .01ms !important
       }
   }
   
   @media(max-width:767px) {
       .section {
           padding: 4rem 0
       }
       #ph {
           min-height: 75vh;
           padding: 6rem 0 3.5rem
       }
   }