: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 !important;
           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
       }
       
       .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)
       }
       
       .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 HEADER */
       
       .page-breadcrumb {
           background: var(--g-xlt);
           border-bottom: 1px solid var(--g-lt);
           padding: .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)
       }
       
       .page-product-img {
           width: 100%;
           height: 430px;
           object-fit: cover;
           border-radius: 6px
       }
       
       @media(max-width:767px) {
           .page-product-img {
               height: 250px
           }
       }
       /* 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: 44%;
           background: rgba(150, 90, 62, .09)
       }
       
       .spec-t td:last-child {
           color: var(--ink-m)
       }
       /* 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: 260px;
           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: .7rem;
           letter-spacing: .18em;
           text-transform: uppercase;
           padding: .3rem .8rem;
           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: .88rem;
           color: var(--ink-s);
           line-height: 1.72;
           margin-bottom: 1.25rem
       }
       
       .vc-ul {
           list-style: none;
           padding: 0
       }
       
       .vc-ul li {
           font-size: .83rem;
           color: var(--ink-m);
           padding: .35rem 0;
           border-bottom: 1px solid var(--g-xlt);
           display: flex;
           align-items: center;
           gap: .55rem
       }
       
       .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;
           height: 100%;
           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
       }
       /* COMPARISON TABLE */
       
       .cmp-table {
           width: 100%;
           border-collapse: collapse;
           border-radius: 6px;
           overflow: hidden
       }
       
       .cmp-table th {
           background: var(--g);
           color: var(--white);
           font-family: var(--ff-h);
           font-weight: 600;
           font-size: .82rem;
           letter-spacing: .05em;
           padding: 1rem 1.25rem;
           text-align: left
       }
       
       .cmp-table th:first-child {
           background: var(--g-d);
           width: 30%
       }
       
       .cmp-table td {
           padding: .85rem 1.25rem;
           font-size: .85rem;
           vertical-align: middle;
           border-bottom: 1px solid var(--g-lt)
       }
       
       .cmp-table td:first-child {
           font-family: var(--ff-h);
           font-weight: 600;
           color: var(--ink);
           background: var(--g-xlt)
       }
       
       .cmp-table td:not(:first-child) {
           color: var(--ink-m)
       }
       
       .cmp-table tr:last-child td {
           border-bottom: none
       }
       /* CTA */
       
       #cta-s {
           background: var(--g);
           position: relative;
           overflow: hidden
       }
       
       #cta-s::before {
           content: 'SLAB';
           position: absolute;
           right: -.05em;
           top: 50%;
           transform: translateY(-50%);
           font-family: var(--ff-d);
           font-weight: 800;
           font-size: clamp(5rem, 13vw, 12rem);
           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)
       }
       /* SUIT */
       
       .suit-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: .8rem;
           font-weight: 500;
           padding: .45rem 1.1rem;
           border-radius: 20px;
           margin: .3rem;
           transition: all var(--t)
       }
       
       .suit-tag:hover {
           background: var(--g);
           border-color: var(--g);
           color: var(--white)
       }
       /* MORE 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
           }
           .vc-img {
               height: 210px
           }
       }