:root{
  --ceramic:#F5F3EE;
  --ceramic-2:#EAE6DC;
  --ink:#1B1815;
  --grout:#3C3833;
  --black:#0a0a0d;

  /* Brand palette — primary cyan carries the brand and drives every main
     accent role (CTAs, active states, highlights); secondary coral is the
     one supporting accent used deliberately for contrast and hierarchy. */
  --primary:#18dee5;
  --primary-deep:#086669;   /* legible cyan for text/icons/fills on light backgrounds */
  --primary-ink:#052e30;    /* near-black cyan for gradients + high-emphasis dark fills */
  --secondary:#ea556f;
  --secondary-deep:#d11536; /* hover/active depth for secondary */

  /* Aliases kept for the rest of the stylesheet: ochre is the primary pop
     accent, teal/teal-dark are the legible + deep cyan variants. */
  --teal:var(--primary-deep);
  --teal-dark:var(--primary-ink);
  --ochre:var(--primary);

  --line: rgba(27,24,21,.12);
  --radius: 2px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter',sans-serif;
  color:var(--ink);
  background:var(--ceramic);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.display-font{
  font-family:'Space Grotesk',sans-serif;
  letter-spacing:-0.01em;
}
.mono{font-family:'IBM Plex Mono',monospace; letter-spacing:.03em;}
a{text-decoration:none;}

/* ---------- Grout-line motif ---------- */
.grout-rule{
  display:flex; align-items:center; gap:10px;
  margin: 0 0 1.5rem;
}
.grout-rule::before, .grout-rule::after{
  content:""; flex:1; height:1px; background:var(--line);
}
.grout-rule .spacer{
  width:10px;height:10px;position:relative;flex:0 0 auto;
}
.grout-rule .spacer::before,.grout-rule .spacer::after{
  content:"";position:absolute;background:var(--ochre);
}
.grout-rule .spacer::before{width:10px;height:2px;top:4px;left:0;}
.grout-rule .spacer::after{width:2px;height:10px;left:4px;top:0;}

.eyebrow{
  font-family:'IBM Plex Mono',monospace;
  text-transform:uppercase; font-size:.72rem; letter-spacing:.18em;
  color:var(--teal); font-weight:500;
}

/* ---------- Top bar ---------- */
.topbar{
  background:var(--grout); color:#D8D3C8; font-size:.78rem;
  padding:.4rem 0;
}
.topbar a{color:#D8D3C8; opacity:.85;}
.topbar a:hover{opacity:1; color:#fff;}

/* ---------- Navbar ---------- */
.navbar-custom{
  background:var(--ceramic);
  border-bottom:1px solid var(--line);
  padding:.9rem 0;
}
.brand-mark{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700; font-size:1.5rem; color:var(--ink);
  display:flex; align-items:center; gap:8px;
}
.brand-mark .dot{width:9px;height:9px;background:var(--ochre);display:inline-block;border-radius:1px;transform:rotate(45deg);}
.navbar-custom .nav-link{
  color:var(--ink); font-weight:500; font-size:.92rem;
  padding:.5rem 1rem !important; position:relative; transition:color .2s, background .2s;
  border-radius:999px;
}
.navbar-custom .nav-link:hover{color:var(--secondary-deep);}

.navbar-custom .nav-link:hover::after{transform:scaleX(.4);}
.navbar-custom .nav-link.active{
  color:#fff; font-weight:600; background:var(--primary);
}
.navbar-custom .nav-link.active:hover{color:#fff;}
.navbar-custom .nav-link.active::after{content:none;}
.mega-item.mega-open > .nav-link{color:var(--teal-dark);}
.mega-item.mega-open > .nav-link.active{color:#fff;}
/* Shared button shape: thicker, bolder, filled — hover is a sweeping fill
   that slides in from the left rather than a flat colour swap. */
.btn-ochre, .btn-secondary{
  border:none; color:var(--ink);
  font-family:'IBM Plex Mono',monospace; font-size:.82rem; font-weight:600; letter-spacing:.05em;
  padding:.9rem 1.8rem; border-radius:2px;
  text-transform:uppercase;
  display:inline-flex; align-items:center; gap:.6rem;
  position:relative; overflow:hidden; isolation:isolate;
  transition:color .3s ease, transform .25s ease, box-shadow .35s ease;
}
.btn-ochre::before, .btn-secondary::before{
  content:""; position:absolute; inset:0; z-index:-1;
  transform:translateX(-102%) skewX(-8deg); transform-origin:left center;
  transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.btn-ochre:hover::before, .btn-secondary:hover::before{transform:translateX(0) skewX(-8deg);}
.btn-ochre i, .btn-secondary i{transition:transform .25s ease;}
.btn-ochre:hover i, .btn-secondary:hover i{transform:translate(3px,-3px);}
.btn-ochre:active, .btn-secondary:active{transform:translateY(0) scale(.98);}

.btn-ochre{background:var(--primary);}
.btn-ochre::before{background:var(--primary-deep);}
.btn-ochre:hover{color:#fff; transform:translateY(-3px); box-shadow:0 14px 28px -8px rgba(8,102,105,.55);}

.btn-secondary{background:var(--primary);}
.btn-secondary::before{background:var(--secondary-deep);}
.btn-secondary:hover{color:#fff; transform:translateY(-3px); box-shadow:0 14px 28px -8px rgba(209,21,54,.45);}

.btn-ochre:focus-visible, .btn-secondary:focus-visible{outline:2px solid var(--ink); outline-offset:2px;}

/* ---------- Drawer trigger (replaces Get In Touch) ---------- */
.drawer-trigger{
  width:46px; height:46px; border:1px solid var(--ink); background:transparent;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  border-radius:var(--radius); flex:0 0 auto; transition:.25s;
}
.drawer-trigger span{width:20px; height:1.5px; background:var(--ink); transition:.25s;}
.drawer-trigger:hover{background:var(--ink);}
.drawer-trigger:hover span{background:var(--ceramic);}
.drawer-trigger:hover span:nth-child(1){transform:translateY(1px) rotate(0deg); width:14px;}
.drawer-trigger:hover span:nth-child(3){width:14px; align-self:flex-end;}

.mobile-toggle{
  width:44px; height:44px; border:1px solid var(--ink); background:transparent;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  border-radius:var(--radius); order:2; flex:0 0 auto; transition:background .25s;
}
.mobile-toggle span{
  width:20px; height:1.5px; background:var(--ink); display:block;
  transition:transform .3s ease, opacity .2s ease, background .25s;
}
.mobile-toggle:active{background:var(--ink);}
.mobile-toggle:active span{background:var(--ceramic);}
.mobile-toggle span:nth-child(1){width:14px; align-self:flex-start; margin-left:3px;}
.mobile-toggle span:nth-child(3){width:14px; align-self:flex-end; margin-right:3px;}
.mobile-toggle.is-open{background:var(--ink);}
.mobile-toggle.is-open span{background:var(--ceramic);}
.mobile-toggle.is-open span:nth-child(1){width:20px; margin:0; transform:translateY(6.5px) rotate(45deg);}
.mobile-toggle.is-open span:nth-child(2){opacity:0;}
.mobile-toggle.is-open span:nth-child(3){width:20px; margin:0; transform:translateY(-6.5px) rotate(-45deg);}

/* ---------- Showcase offcanvas drawer ---------- */
.showcase-drawer{
  width:380px; background:var(--ceramic); border-left:1px solid var(--line);
}
.showcase-drawer .offcanvas-header{border-bottom:1px solid var(--line); padding:1.3rem 1.6rem;}
.showcase-drawer .offcanvas-body{padding:1.8rem 1.6rem 2.5rem;}
.showcase-heading{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.15rem; text-align:center; color:var(--grout); margin:.6rem 0 1.6rem; line-height:1.35;}
.showcase-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:2.2rem;}
.showcase-grid .p-swatch{
  /* aspect-ratio:1/1; */
   position:relative; overflow:hidden; border-radius:2px;
  background:#fff; border:1px solid var(--line);padding: 7px;
}
.showcase-grid .p-swatch img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .4s ease;
}
.showcase-grid .p-swatch:hover img{transform:scale(1.08);}
.showcase-address h6{text-align:center; letter-spacing:.14em;}
.showcase-address p{text-align:center; color:#5c574e; font-size:.9rem; line-height:1.6; max-width:260px; margin:0 auto;}
.showcase-social{display:flex; justify-content:center; gap:.7rem; margin-top:1.4rem;}
.showcase-social a{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--ink);
}
.showcase-social a:hover{border-color:var(--teal); color:var(--teal);}

/* ---------- Mobile nav offcanvas ---------- */
.mobilenav-drawer{width:310px; background:var(--grout); color:var(--ceramic);}
.mobilenav-drawer .offcanvas-header{
  border-bottom:1px solid rgba(245,243,238,.12); position:relative;
}
.mobilenav-drawer .offcanvas-header::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:var(--primary);
}
.mobilenav-drawer .btn-close{filter:invert(1);}
.mobilenav-list{list-style:none; padding:0; margin:0;}
.mobilenav-drawer .nav-link{
  display:flex; align-items:center; gap:.7rem;
  color:var(--ceramic) !important; font-size:1.02rem; font-weight:500;
  padding:.85rem .1rem !important; border-bottom:1px solid rgba(245,243,238,.08);
  position:relative; transition:padding-left .25s ease, color .25s ease;
}
.mobilenav-drawer .nav-link::before{
  content:""; position:absolute; left:-16px; top:0; bottom:0; width:3px;
  background:var(--primary); transform:scaleY(0); transition:transform .25s ease;
}
.mobilenav-drawer .nav-link:hover, .mobilenav-drawer .nav-link:focus-visible{color:var(--primary) !important; padding-left:.55rem !important;}
.mobilenav-drawer .nav-link:hover::before{transform:scaleY(1);}
.mobilenav-num{font-family:'IBM Plex Mono',monospace; font-size:.68rem; color:#8f897c; flex:0 0 auto; width:18px;}
.mobilenav-drawer .nav-link > i:not(.mobilenav-go){font-size:.95rem; color:#9c968a; flex:0 0 auto; width:18px; text-align:center; transition:color .25s;}
.mobilenav-drawer .nav-link:hover > i:not(.mobilenav-go){color:var(--primary);}
.mobilenav-label{flex:1;}
.mobilenav-go{font-size:.8rem; opacity:0; transform:translateX(-6px); transition:.25s; flex:0 0 auto;}
.mobilenav-drawer .nav-link:hover .mobilenav-go{opacity:1; transform:translateX(0);}
.mobilenav-footer{margin-top:1.7rem; padding-top:1.5rem; border-top:1px solid rgba(245,243,238,.12);}
.mobilenav-contact{display:flex; flex-direction:column; gap:.65rem; margin-top:1.3rem;}
.mobilenav-contact a{display:flex; align-items:center; gap:.6rem; color:#C9C3B6; font-size:.86rem; transition:color .2s;}
.mobilenav-contact a i{color:var(--primary); font-size:.9rem;}
.mobilenav-contact a:hover{color:var(--primary);}
.mobilenav-social{display:flex; gap:.6rem; margin-top:1.2rem;}
.mobilenav-social a{width:34px; height:34px; border-radius:50%; border:1px solid rgba(245,243,238,.22); display:flex; align-items:center; justify-content:center; color:#C9C3B6; transition:.2s; font-size:.9rem;}
.mobilenav-social a:hover{border-color:var(--primary); color:var(--primary); transform:translateY(-2px);}

/* ---------- Mega menu (Products) ---------- */
.mega-item{position:relative;}
.mega-arrow{font-size:.65rem; margin-left:5px; transition:.25s;}
.mega-panel{
  position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(14px) scale(.98);
  width:640px;
  display:block; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .25s ease, transform .25s cubic-bezier(.22,1,.36,1);
  z-index:50; margin-top:16px;
}
.mega-panel::before{
  content:""; position:absolute; top:-8px; left:50%; transform:translateX(-50%) rotate(45deg);
  width:16px; height:16px; background:var(--ceramic);
  border-left:1px solid var(--line); border-top:1px solid var(--line);
  border-radius:3px 0 0 0; z-index:1;
}
.mega-panel-inner{
  position:relative; z-index:2; display:flex;
  background:#fff; 
  /* border:1px solid var(--line); */
  border-radius:2px; overflow:hidden;
  box-shadow:0 34px 70px rgba(5,46,48,.28);
}
.mega-panel-inner::after{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--secondary-deep);z-index:3;
}
.mega-item:hover .mega-panel, .mega-item.mega-open .mega-panel{opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0) scale(1);}
.mega-item:hover .mega-arrow, .mega-item.mega-open .mega-arrow{transform:rotate(180deg); color:var(--teal);}
.navbar-custom .nav-link.active .mega-arrow{color:#fff;}

.mega-list{flex:0 0 58%; padding:1.1rem .9rem; border-right:1px solid var(--line); position:relative; z-index:1;}
.mega-list-label{
  display:flex; align-items:center; justify-content:space-between;
  font-family:'IBM Plex Mono',monospace; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  color:#9c9688; padding:.2rem .5rem .7rem;
}
.mega-count{
  background:rgba(8,102,105,.1); color:var(--teal); border-radius:20px;
  padding:.2rem .6rem; font-size:.6rem; letter-spacing:.08em;
}
.mega-link{
  display:flex; align-items:center; gap:.7rem;
  padding:.5rem .5rem; font-size:.92rem; color:#000;
  border-left:2px solid transparent; border-radius:2px; transition:.18s; margin-bottom:2px;
}
.mega-link-thumb{
  width:40px; height:40px; flex:0 0 auto; border-radius:9px; overflow:hidden;
  border:1px solid var(--line); background:var(--ceramic-2);
}
.mega-link-thumb img{width:100%; height:100%; object-fit:cover; object-position:top center; transition:transform .3s ease;}
.mega-link-text{flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.3;}
.mega-link-name{font-weight:700; font-size:.9rem;}
.mega-link-desc{font-size:.74rem; color:#8a8478;}
.mega-link > i{opacity:0; transform:translateX(-4px); transition:.18s; font-size:.75rem; color:var(--secondary-deep); flex:0 0 auto;}
.mega-link:hover, .mega-link.is-active{
  background:#ece9e2; border-left-color:var(--secondary-deep); color:#000;
  padding-left:.7rem;
}
.mega-link:hover .mega-link-name, .mega-link.is-active .mega-link-name{color:var(--teal-dark);}
.mega-link:hover i, .mega-link.is-active i{opacity:1; transform:translateX(0);}
.mega-link:hover .mega-link-thumb img{transform:scale(1.12);}
.mega-viewall{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  margin:.5rem .5rem 0; padding:.7rem .6rem 0; border-top:1px solid var(--line);
  font-family:'IBM Plex Mono',monospace; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase;
  font-weight:600; color:var(--secondary-deep); transition:.2s;
}
.mega-viewall i{transition:transform .2s;}
.mega-viewall:hover{color:var(--secondary-deep);}
.mega-viewall:hover i{transform:translate(3px,-3px);}

.mega-preview{
  flex:0 0 42%; position:relative; overflow:hidden;
  display:flex; align-items:flex-end; justify-content:center;
  background:var(--ceramic-2);
}
.mega-preview img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:opacity .35s ease, transform .5s ease; opacity:0;
}
.mega-preview img.is-loaded{opacity:1;}
.mega-preview:hover img.is-loaded{transform:scale(1.06);}
.mega-preview::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(5,46,48,.88) 0%, rgba(5,46,48,0) 55%);
  z-index:1;
}
.mega-preview-tag{
  position:absolute; top:12px; left:12px; z-index:2;
  background:rgba(245,243,238,.92); color:var(--ink); backdrop-filter:blur(3px);
  font-family:'IBM Plex Mono',monospace; font-size:.62rem; letter-spacing:.08em; text-transform:uppercase;
  padding:.3rem .65rem; border-radius:20px; font-weight:600;
}
.mega-preview-label{
  position:relative; z-index:2; color:#fff; font-family:'IBM Plex Mono',monospace;
  font-size:.68rem; letter-spacing:.05em; text-transform:uppercase; text-align:center;
  max-width:210px; line-height:1.5; padding:1rem 1rem 1.2rem;
}

/* ---------- Hero arrows (replace bullets) ---------- */
.hero-arrows{position:absolute; z-index:3; bottom:2.2rem; left:0; right:0; display:flex; justify-content:center; gap:.8rem;}
.hero-arrow{
  width:48px; height:48px; border:1px solid rgba(245,243,238,.4); background:rgba(245,243,238,.06);
  color:var(--ceramic); display:flex; align-items:center; justify-content:center;
  border-radius:50%; transition:.25s; font-size:1.1rem;
}
.hero-arrow:hover{background:var(--primary); border-color:var(--primary); color:var(--ink); transform:scale(1.06);}

/* ---------- Hero / carousel ---------- */
.hero{position:relative; height:88vh; min-height:560px; overflow:hidden; background:var(--grout);}
.hero-slide{
  position:relative; height:88vh; min-height:560px;
  display:flex; align-items:center;
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
.tile-field{
  position:absolute; inset:0;
  display:grid; grid-template-columns:repeat(12,1fr); grid-template-rows:repeat(6,1fr);
}
.tile-field span{border:1px solid rgba(245,243,238,.06);}
.hero-overlay{
  position:absolute; inset:0;
  /* darker + a solid bottom-left wash so slide text stays readable over any photo */
      background-image: radial-gradient(at center right, #00000048 50%, #000000a8 100%);

}
.hero-content{position:relative; z-index:2; color:var(--ceramic); padding:0 1rem;}
.hero-index{font-family:'IBM Plex Mono',monospace; color:var(--ochre); font-size:.85rem; letter-spacing:.15em; text-shadow:0 1px 6px rgba(0,0,0,.5);}
.hero-title{font-size:clamp(2.6rem,6vw,5.2rem); font-weight:700; line-height:.98; margin:.6rem 0 1rem; text-shadow:0 2px 14px rgba(0,0,0,.55);}
.hero-title small{display:block; font-weight:400; font-size:.4em; color:#C9C3B6; letter-spacing:.05em; text-transform:uppercase;}
.hero-desc{max-width:520px; color:#D8D3C8; font-size:1.02rem; line-height:1.6; text-shadow:0 1px 8px rgba(0,0,0,.5);}
.carousel-indicators-custom{
  position:absolute; z-index:3; bottom:2.2rem; left:0; right:0;
  display:flex; justify-content:center; gap:.6rem;
}
.carousel-indicators-custom button{
  width:34px; height:2px; background:rgba(245,243,238,.35); border:none;
}
.carousel-indicators-custom button.active{background:var(--ochre);}
.hero-scroll{
  position:absolute; right:2rem; bottom:2.2rem; z-index:3; color:#D8D3C8;
  writing-mode:vertical-rl; font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.15em;
  display:flex; align-items:center; gap:.6rem;
}
.hero-scroll::after{content:"";width:1px;height:40px;background:rgba(245,243,238,.4);}

/* ---------- Section spacing ---------- */
.section{padding:6rem 0;}
.section-tight{padding:4.5rem 0;}
.section-alt{background:var(--ceramic-2);}
.section-dark{background:var(--grout); color:var(--ceramic);}
.section-dark .eyebrow{color:var(--ochre);}

/* ---------- About / mosaic ---------- */
.mosaic{
  display:grid; grid-template-columns:repeat(6,1fr); grid-template-rows:repeat(6,1fr);
  gap:6px; aspect-ratio:1/1; max-width:420px;
}
.mosaic div{background:var(--teal); border-radius:1px;}
.mosaic div:nth-child(3n){background:var(--ochre);}
.mosaic div:nth-child(5n){background:var(--secondary);}
.mosaic div:nth-child(7n){background:var(--ceramic-2); border:1px solid var(--line);}
.stat-row{display:flex; gap:2.5rem; flex-wrap:wrap; margin-top:2rem;}
.stat{border-left:2px solid var(--secondary); padding-left:.9rem;}
.stat:nth-child(1){border-left-color:var(--primary);}
.stat:nth-child(2){border-left-color:var(--secondary);}
.stat:nth-child(3){border-left-color:var(--secondary-deep);}
.stat .num{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:2.1rem; line-height:1;}
.stat .lbl{font-family:'IBM Plex Mono',monospace; font-size:.72rem; color:#6b665e; text-transform:uppercase; letter-spacing:.08em;}

/* ---------- Feature cards ---------- */
.feature-card{
  background:var(--ceramic); border:1px solid var(--line); padding:2rem 1.6rem;
  height:100%; transition:.25s;
}
.feature-card:hover{border-color:var(--primary); transform:translateY(-4px);}
.feature-icon{
  width:50px; height:50px; display:flex; align-items:center; justify-content:center;
  background:var(--teal); color:#fff; font-size:1.35rem; margin-bottom:1.2rem; border-radius:1px;
}
.col-sm-6:nth-of-type(1) .feature-icon{background:var(--primary-deep);}
.col-sm-6:nth-of-type(2) .feature-icon{background:var(--secondary);}
.col-sm-6:nth-of-type(3) .feature-icon{background:var(--secondary-deep);}
.col-sm-6:nth-of-type(4) .feature-icon{background:var(--primary-deep);}
.video-panel{
  position:relative; border-radius:2px; overflow:hidden; min-height:640px;
  background: repeating-linear-gradient(135deg, #0d3436, #0d3436 18px, #092527 18px, #092527 36px);
  display:flex; align-items:center; justify-content:center;
}
.play-btn{
  width:72px; height:72px; border-radius:50%; background:rgba(245,243,238,.92);
  display:flex; align-items:center; justify-content:center; font-size:1.6rem; color:var(--teal-dark);
  cursor:pointer; transition:.2s;
}
.play-btn:hover{transform:scale(1.08);}

/* ---------- Products ---------- */
.product-card{
  position:relative; overflow:hidden; border:1px solid var(--line);
  background:var(--ceramic); transition:.3s; border-radius:4px;
}
.product-card:hover{box-shadow:0 20px 44px rgba(5,46,48,.16); transform:translateY(-6px); border-color:transparent;}
.product-media{
  aspect-ratio:4/5; position:relative; overflow:hidden; background:var(--ceramic-2);
}
.product-media img{
  width:100%; height:100%; object-fit:cover; object-position:top center;
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.product-card:hover .product-media img{transform:scale(1.08);}
.product-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(5,46,48,.5) 0%, rgba(5,46,48,0) 32%);
  pointer-events:none;
}
.product-tag{
  position:absolute; top:12px; left:12px; z-index:2;
  background:rgba(245,243,238,.92); color:var(--ink);
  font-family:'IBM Plex Mono',monospace; font-size:.65rem; letter-spacing:.08em; text-transform:uppercase;
  padding:.32rem .7rem; border-radius:20px; font-weight:600;
}
.product-body{padding:1.2rem 1.3rem 1.5rem;}
.product-body h5{margin:0 0 .2rem; font-size:1.12rem;}
.product-desc{font-size:.85rem; color:#786f5b; margin:0 0 .8rem;}
.product-link{font-size:.85rem; font-weight:600; color:var(--secondary-deep);}
.product-link i{transition:.2s;}
.product-card:hover .product-link i{transform:translateX(4px);}

/* ---------- Solutions band (Tube Epoxy) ---------- */
.epoxy-visual{
  position:relative; height:280px; border-radius:14px; overflow:hidden;
  background:linear-gradient(160deg, var(--primary-deep), var(--teal-dark));
  display:flex; align-items:center; justify-content:center;
}
.epoxy-visual .grid-tex{
  position:absolute; inset:0;
  background-image: linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px);
  background-size:24px 24px;
}
.epoxy-visual .drop{
  position:absolute; border-radius:50%; background:rgba(245,243,238,.14);
  animation:epoxyFloat 6s ease-in-out infinite;
}
.epoxy-visual .drop:nth-child(2){width:120px;height:120px; top:-30px; left:-30px; animation-delay:0s;}
.epoxy-visual .drop:nth-child(3){width:70px;height:70px; bottom:-20px; right:20px; animation-delay:1.4s;}
.epoxy-visual .drop:nth-child(4){width:40px;height:40px; top:40%; right:60px; animation-delay:.7s;}
@keyframes epoxyFloat{0%,100%{transform:translateY(0);} 50%{transform:translateY(-14px);}}
.epoxy-visual i{font-size:3.4rem; color:#fff; position:relative; z-index:1;}
.epoxy-badge{
  position:absolute; bottom:14px; left:14px; z-index:2;
  background:rgba(20,17,15,.55); backdrop-filter:blur(3px);
  color:#fff; font-family:'IBM Plex Mono',monospace; font-size:.7rem; letter-spacing:.08em;
  padding:.4rem .8rem; border-radius:20px; text-transform:uppercase;
}
.solution-accordion{border-top:1px solid rgba(245,243,238,.14);}
.solution-item{border-bottom:1px solid rgba(245,243,238,.14); cursor:pointer; padding:1.3rem .2rem; transition:.2s;}
.solution-item-head{display:flex; align-items:center; gap:1rem;}
.solution-item-icon{
  width:42px; height:42px; flex:0 0 auto; border-radius:50%; border:1px solid rgba(245,243,238,.3);
  display:flex; align-items:center; justify-content:center; color:var(--ochre); transition:.2s;
}
.solution-item-num{font-family:'IBM Plex Mono',monospace; font-size:.72rem; color:#8f897c;}
.solution-item-title{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1.08rem; flex:1;}
.solution-item-plus{font-size:1.1rem; color:#8f897c; transition:.25s;}
.solution-item-body{max-height:0; overflow:hidden; transition:max-height .3s ease; padding-left:58px;}
.solution-item-body p{padding-top:.6rem; color:#a9a396; font-size:.9rem; max-width:440px;}
.solution-item.is-open .solution-item-plus{transform:rotate(135deg); color:var(--ochre);}
.solution-item.is-open .solution-item-icon{background:var(--ochre); color:var(--ink); border-color:var(--ochre);}
.solution-item.is-open .solution-item-title{color:var(--ochre);}
.solution-item.is-open .solution-item-body{max-height:120px;}

/* ---------- Blog ---------- */
.blog-card{border:1px solid var(--line); background:var(--ceramic); height:100%;}
.blog-thumb{
  height:190px;
  background: linear-gradient(135deg, var(--teal), var(--teal-dark));
  position:relative; overflow:hidden;
}
.blog-thumb .grid-tex{
  position:absolute; inset:0;
  background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px),
                     linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
  background-size:26px 26px;
}
.blog-body{padding:1.5rem;}
.blog-date{font-family:'IBM Plex Mono',monospace; font-size:.72rem; color:var(--teal); letter-spacing:.06em;}

/* ---------- Footer ---------- */
footer{background:var(--black); color:#C9C3B6; padding-top:0; position:relative; overflow:hidden;}
footer::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:38px 38px;
}
footer::after{
  content:""; position:absolute; top:-160px; right:-140px; width:440px; height:440px;
  border:1px solid rgba(24,222,229,.16); border-radius:50%; pointer-events:none; z-index:0;
}
footer .footer-ring-2{
  content:""; position:absolute; left:-120px; bottom:60px; width:300px; height:300px;
  border:1px solid rgba(234,85,111,.14); border-radius:50%; pointer-events:none; z-index:0;
}
footer > .container{position:relative; z-index:1;}
footer h6{color:var(--ceramic); font-family:'IBM Plex Mono',monospace; font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:1.1rem;}
footer a{color:#C9C3B6;}
footer a:hover{color:var(--ochre);}
footer ul{list-style:none; padding:0; margin:0;}
footer li{margin-bottom:.55rem; font-size:.92rem;}
.social-dot{
  width:38px; height:38px; border:1px solid rgba(245,243,238,.25); border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; color:#C9C3B6; transition:.2s;
}
.social-dot:hover{border-color:var(--ochre); color:var(--ochre); transform:translateY(-3px);}
.footer-bottom{
  /* border-top:1px solid rgba(245,243,238,.12); */
  margin-top:3rem; padding:1.4rem 0; font-size:.8rem; gap:1rem;}

/* Newsletter / CTA band */
.footer-cta{
  background:var(--teal-dark); padding:3.2rem 0; margin-bottom:4rem;
  border-bottom:1px solid rgba(245,243,238,.1);
  position:relative; overflow:hidden; z-index:1;
}
.footer-cta::before{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:28px 28px;
}
.footer-cta::after{
  content:""; position:absolute; top:-70px; right:8%; width:280px; height:280px;
  background:radial-gradient(circle, rgba(24,222,229,.28), transparent 70%);
  filter:blur(10px); pointer-events:none;
}
.footer-cta .container{position:relative; z-index:1;}
.footer-cta-icon{
  width:52px; height:52px; border-radius:50%; margin-bottom:1rem;
  background:rgba(24,222,229,.14); border:1px solid rgba(24,222,229,.35);
  display:flex; align-items:center; justify-content:center; color:var(--primary); font-size:1.25rem;
}
.footer-cta-sub{color:#AFDEDF; max-width:480px; margin:.6rem 0 0; font-size:.95rem; line-height:1.6;}
.footer-cta .eyebrow{color:var(--primary);}
.footer-subscribe{
  display:flex; align-items:center; gap:.4rem; max-width:440px; margin-left:auto;
  background:rgba(245,243,238,.07); border:1px solid rgba(245,243,238,.22);
  border-radius:12px; padding:.4rem; transition:border-color .25s, background .25s;
}
.footer-subscribe:focus-within{border-color:var(--primary); background:rgba(245,243,238,.1);}
.footer-subscribe > i{color:#9c968a; padding-left:.55rem; font-size:1rem;}
.footer-subscribe input{
  flex:1; min-width:0; background:transparent; border:none;
  color:var(--ceramic); padding:.65rem .4rem; font-size:.9rem;
}
.footer-subscribe input::placeholder{color:#9c968a;}
.footer-subscribe input:focus{outline:none;}
.footer-subscribe .btn{white-space:nowrap; flex:0 0 auto; padding:.7rem 1.4rem;}
@media (max-width:991.98px){ .footer-subscribe{margin-left:0;} }

/* Contact list with icon badges */
.footer-contact-list li{margin-bottom:.8rem;}
.footer-contact-list a{
  display:flex; align-items:flex-start; gap:.8rem; color:#C9C3B6; font-size:.92rem; line-height:1.5;
}
.footer-contact-list a:hover{color:var(--ceramic);}
.footer-contact-icon{
  width:34px; height:34px; flex:0 0 auto; border-radius:50%; border:1px solid rgba(245,243,238,.25);
  display:flex; align-items:center; justify-content:center; color:var(--ochre); transition:.2s; margin-top:.05rem;
}
.footer-contact-list a:hover .footer-contact-icon{background:var(--teal); border-color:var(--teal); color:#fff;}

/* Back to top */
.back-to-top{
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(245,243,238,.25);
  display:flex; align-items:center; justify-content:center; color:#C9C3B6; transition:.2s; flex:0 0 auto;
}
.back-to-top:hover{background:var(--teal); border-color:var(--teal); color:#fff; transform:translateY(-3px);}
.footer-seam{display:flex; align-items:center; gap:4px; padding-top:2.6rem; opacity:.5;}
.footer-seam span{flex:1; height:1px; background:rgba(245,243,238,.18);}
.footer-seam i{color:var(--ochre); font-size:.55rem;}
.footer-col{position:relative; padding-left:1.6rem;}
.footer-col::before{content:""; position:absolute; left:0; top:.2rem; bottom:.2rem; width:1px; background:linear-gradient(180deg, var(--ochre), transparent);}
.footer-col-first{padding-left:0;}
.footer-col-first::before{display:none;}
footer h6{position:relative; padding-bottom:.7rem;}
footer h6::after{content:""; position:absolute; left:0; bottom:0; width:22px; height:2px; background:var(--ochre);}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
}

@media (max-width:767px){
  .hero, .hero-slide{height:auto; min-height:640px; padding:0px}
  .stat-row{gap:1.5rem;}
}