: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
      }
      
      .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)
      }
      /* BUTTONS */
      
      .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)
      }
      /* HERO */
      
      #ph {
          position: relative;
          min-height: 92vh;
          background: var(--ink);
          display: flex;
          align-items: flex-end;
          overflow: hidden;
          padding: 8rem 0 5rem
      }
      
      .ph-bg {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
          opacity: .5
      }
      
      .ph-ov {
          position: absolute;
          inset: 0;
          background: linear-gradient(135deg, rgba(20, 8, 2, .93) 0%, rgba(100, 48, 20, .55) 60%, rgba(20, 8, 2, .45) 100%)
      }
      
      .ph-ov::after {
          content: '';
          position: absolute;
          inset: 0;
          background-image: linear-gradient(rgba(255, 255, 255, .02) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .02) 1px, transparent 1px);
          background-size: 80px 80px
      }
      
      .ph-ct {
          position: relative;
          z-index: 2
      }
      
      .ph-bc {
          font-family: var(--ff-h);
          font-size: .7rem;
          letter-spacing: .18em;
          text-transform: uppercase;
          color: rgba(255, 255, 255, .42);
          margin-bottom: 1.4rem;
          display: flex;
          align-items: center;
          gap: .6rem
      }
      
      .ph-bc a {
          color: rgba(255, 255, 255, .42);
          transition: color var(--t)
      }
      
      .ph-bc a:hover {
          color: rgba(255, 255, 255, .78)
      }
      
      .ph-tag {
          display: inline-block;
          background: var(--g);
          color: var(--white);
          font-family: var(--ff-h);
          font-size: .67rem;
          font-weight: 600;
          letter-spacing: .14em;
          text-transform: uppercase;
          padding: .32rem .85rem;
          border-radius: 2px;
          margin-bottom: 1.2rem
      }
      
      .ph-h1 {
          font-family: var(--ff-d);
          font-weight: 800;
          font-size: clamp(3rem, 7vw, 6.5rem);
          letter-spacing: -.025em;
          text-transform: uppercase;
          line-height: .9;
          color: var(--white);
          margin-bottom: 1.75rem
      }
      
      .ph-h1 .dim {
          color: rgba(255, 255, 255, .32)
      }
      
      .ph-h1 .slash {
          color: var(--g-m);
          font-weight: 400
      }
      
      .ph-sub {
          font-size: clamp(.9rem, 1.6vw, 1.05rem);
          font-weight: 300;
          line-height: 1.75;
          color: rgba(255, 255, 255, .65);
          max-width: 560px;
          margin-bottom: 2.5rem
      }
      
      .ph-cta {
          display: flex;
          flex-wrap: wrap;
          gap: .85rem
      }
      
      .ph-stats {
          display: flex;
          flex-wrap: wrap;
          gap: 2.5rem;
          margin-top: 4rem;
          padding-top: 2.5rem;
          border-top: 1px solid rgba(255, 255, 255, .1)
      }
      
      .ph-sn {
          font-family: var(--ff-d);
          font-weight: 700;
          font-size: 2.2rem;
          color: var(--white);
          line-height: 1
      }
      
      .ph-sl {
          font-size: .7rem;
          color: rgba(255, 255, 255, .4);
          letter-spacing: .06em;
          margin-top: .3rem
      }
      
      .ph-deco {
          position: absolute;
          bottom: -.1em;
          right: -.04em;
          font-family: var(--ff-d);
          font-weight: 800;
          font-size: clamp(10rem, 22vw, 20rem);
          letter-spacing: -.04em;
          text-transform: uppercase;
          color: rgba(255, 255, 255, .034);
          line-height: 1;
          pointer-events: none;
          user-select: none
      }
      /* GALLERY */
      
      #gallery {
          background: var(--g-xlt);
          padding: 5rem 0
      }
      
      .gl-main img {
          width: 100%;
          height: 480px;
          object-fit: cover;
          border-radius: 6px;
          transition: opacity .3s
      }
      
      .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
          }
      }
      
      .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)
      }
      /* 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: var(--g-xlt)
      }
      
      .spec-t td:last-child {
          color: var(--ink-m)
      }
      /* PRODUCT OPTIONS */
      
      .opt-card {
          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)
      }
      
      .opt-card:hover {
          border-color: var(--g);
          transform: translateY(-4px);
          box-shadow: 0 16px 40px rgba(150, 90, 62, .1)
      }
      
      .opt-img {
          height: 200px;
          overflow: hidden;
          position: relative
      }
      
      .opt-img img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform .55s var(--ease)
      }
      
      .opt-card:hover .opt-img img {
          transform: scale(1.05)
      }
      
      .opt-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
      }
      
      .opt-body {
          padding: 1.75rem
      }
      
      .opt-name {
          font-family: var(--ff-h);
          font-weight: 600;
          font-size: 1.05rem;
          color: var(--ink);
          margin-bottom: .55rem
      }
      
      .opt-desc {
          font-size: .85rem;
          color: var(--ink-s);
          line-height: 1.72;
          margin-bottom: 1.1rem
      }
      
      .opt-ul {
          list-style: none;
          padding: 0
      }
      
      .opt-ul li {
          font-size: .81rem;
          color: var(--ink-m);
          padding: .3rem 0;
          border-bottom: 1px solid var(--g-xlt);
          display: flex;
          align-items: center;
          gap: .5rem
      }
      
      .opt-ul li::before {
          content: '';
          flex-shrink: 0;
          width: 5px;
          height: 5px;
          border-radius: 50%;
          background: var(--g)
      }
      /* 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
      }
      /* SUITABLE FOR */
      
      .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)
      }
      /* WHY CHOOSE */
      
      #why {
          background: var(--g);
          position: relative;
          overflow: hidden
      }
      
      #why::before {
          content: 'COIR';
          position: absolute;
          right: -.04em;
          bottom: -.1em;
          font-family: var(--ff-d);
          font-weight: 800;
          font-size: clamp(8rem, 18vw, 18rem);
          color: rgba(255, 255, 255, .048);
          letter-spacing: -.04em;
          line-height: 1;
          pointer-events: none
      }
      
      .why-h {
          font-family: var(--ff-d);
          font-weight: 800;
          font-size: clamp(2.5rem, 5.5vw, 5rem);
          text-transform: uppercase;
          letter-spacing: -.025em;
          line-height: .92;
          color: var(--white)
      }
      
      .why-tag {
          display: inline-block;
          background: rgba(255, 255, 255, .12);
          color: rgba(255, 255, 255, .88);
          font-family: var(--ff-h);
          font-size: .8rem;
          font-weight: 500;
          padding: .45rem 1.1rem;
          border-radius: 20px;
          margin: .3rem;
          border: 1px solid rgba(255, 255, 255, .2)
      }
      /* CTA */
      
      #cta-s {
          background: var(--ink);
          position: relative;
          overflow: hidden
      }
      
      #cta-s::before {
          content: 'PEAT';
          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, .04);
          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
          }
          .opt-img {
              height: 170px
          }
      }