/* ==========================================================================
   SMARTFIX — Sealants, PU Foams & Adhesives
   Design tokens
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  --ink:        #14181F;   /* near-black graphite */
  --ink-soft:   #3A414D;   /* secondary text */
  --paper:      #EEF0EC;   /* cool stone-white */
  --paper-dim:  #E2E5DE;   /* panel fill */
  --line:       #C9CDC4;   /* hairline rule */
  --amber:      #E1631E;   /* cartridge-cap amber — primary accent */
  --amber-dark: #B94F17;

  --cat-foam:     #E1631E; /* PU FOAMS */
  --cat-sealant:  #2F6E8C; /* SEALANTS */
  --cat-adhesive: #3A414D; /* ADHESIVES */
  --cat-aerosol:  #4E7A63; /* AEROSOLS */

  --display: 'Space Grotesk', sans-serif;
  --body: 'Inter', sans-serif;
  --mono: 'JetBrains Mono', monospace;

  --max: 1180px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--display); margin:0; letter-spacing:-0.01em; }
p{ margin:0 0 1em; color:var(--ink-soft); }

.wrap{ max-width:var(--max); margin:0 auto; padding:0 32px; }

/* ---------- utility label / batch-code motif (signature element) ---------- */
.tag{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--amber-dark);
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.tag::before{
  content:"";
  width:14px; height:2px;
  background:var(--amber);
  display:inline-block;
}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(238,240,236,.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:92px;
}
.logo{
  font-family:var(--display); font-weight:700; font-size:22px;
  letter-spacing:-0.02em;
  display:flex; align-items:baseline; gap:2px;
}
.logo span{ color:var(--amber); }
.logo small{
  font-family:var(--mono); font-weight:500; font-size:10px;
  color:var(--ink-soft); letter-spacing:.15em; margin-left:8px;
  text-transform:uppercase;
}
nav.mainnav ul{
  list-style:none; display:flex; gap:36px; margin:0; padding:0;
}
nav.mainnav a{
  font-family:var(--mono); font-size:13px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-soft);
  padding:6px 0; border-bottom:2px solid transparent;
  transition:color .15s, border-color .15s;
}
nav.mainnav a:hover, nav.mainnav a.active{
  color:var(--ink); border-color:var(--amber);
}
.navtoggle{ display:none; }

/* ---------- hero ---------- */
.hero{
  border-bottom:1px solid var(--line);
  position:relative;
  overflow:hidden;
}
.hero .wrap{
  padding:96px 32px 72px;
  display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;
}
.hero h1{
  font-size:clamp(40px,6vw,72px);
  line-height:.98;
  font-weight:700;
}
.hero h1 em{
  font-style:normal; color:var(--amber);
}
.hero .lede{
  font-size:18px; max-width:46ch; margin-top:22px;
}
.hero-meta{
  font-family:var(--mono); font-size:12px; color:var(--ink-soft);
  border-left:2px solid var(--amber); padding-left:16px;
  display:flex; flex-direction:column; gap:10px;
  text-transform:uppercase; letter-spacing:.05em;
}
.hero-meta b{ color:var(--ink); font-family:var(--body); font-weight:600; font-size:14px; text-transform:none; letter-spacing:0; }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:13px; text-transform:uppercase; letter-spacing:.06em;
  padding:14px 22px;
  background:var(--ink); color:var(--paper);
  border:1px solid var(--ink);
  margin-top:32px;
  transition:background .15s,color .15s;
}
.btn:hover{ background:transparent; color:var(--ink); }
.btn.alt{ background:transparent; color:var(--ink); }
.btn.alt:hover{ background:var(--ink); color:var(--paper); }

/* ---------- category strip ---------- */
.catstrip{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-bottom:1px solid var(--line);
}
.catstrip a{
  padding:22px 32px;
  border-right:1px solid var(--line);
  font-family:var(--mono); font-size:13px; text-transform:uppercase; letter-spacing:.06em;
  display:flex; align-items:center; justify-content:space-between;
  color:var(--ink-soft);
  transition:background .15s,color .15s;
}
.catstrip a:last-child{ border-right:none; }
.catstrip a:hover{ background:var(--ink); color:var(--paper); }
.catstrip a::after{ content:"→"; }

/* ---------- section headers ---------- */
.section{ padding:80px 0; border-bottom:1px solid var(--line); }
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:44px; gap:24px; flex-wrap:wrap;
}
.section-head h2{ font-size:clamp(28px,4vw,40px); }
.section-head p{ max-width:40ch; margin:0; }

/* ---------- product grid ---------- */
.grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.pcard{
  background:var(--paper);
  padding:0 0 20px;
  display:flex; flex-direction:column; gap:12px; min-height:190px;
  position:relative;
}
.pcard .thumb{
  width:100%; aspect-ratio:4/3; min-height:160px; overflow:hidden;
  background:#fff;
  display:flex; align-items:center; justify-content:center;
}
.pcard .thumb img{ width:100%; height:100%; object-fit:contain; padding:14px; display:block; }
.pcard .body{ padding:0 20px; display:flex; flex-direction:column; gap:10px; flex:1; }
.pcard .bar{ width:28px; height:4px; }
.pcard h4{ font-size:16px; line-height:1.25; font-weight:600; }
.pcard .code{
  font-family:var(--mono); font-size:11px; color:var(--ink-soft);
  letter-spacing:.05em; margin-top:auto; text-transform:uppercase;
}
.bar.foam{ background:var(--cat-foam); }
.bar.sealant{ background:var(--cat-sealant); }
.bar.adhesive{ background:var(--cat-adhesive); }
.bar.aerosol{ background:var(--cat-aerosol); }

/* ---------- filter tabs (products page) ---------- */
.filters{
  display:flex; gap:0; flex-wrap:wrap; margin-bottom:0; border:1px solid var(--line); border-bottom:none;
}
.filters label{
  font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.06em;
  padding:14px 20px; cursor:pointer; color:var(--ink-soft);
  border-right:1px solid var(--line);
  user-select:none;
}
.filters label:last-child{ border-right:none; }
.filters input{ display:none; }
.filters input:checked + label{ background:var(--ink); color:var(--paper); }

.fgrid .pcard{ display:none; }
.filters:has(#f-all:checked) ~ .fgrid .pcard{ display:flex; }
.filters:has(#f-foam:checked) ~ .fgrid .pcard.foam-cat{ display:flex; }
.filters:has(#f-sealant:checked) ~ .fgrid .pcard.sealant-cat{ display:flex; }
.filters:has(#f-adhesive:checked) ~ .fgrid .pcard.adhesive-cat{ display:flex; }
.filters:has(#f-aerosol:checked) ~ .fgrid .pcard.aerosol-cat{ display:flex; }

/* ---------- header (scrolled state) ---------- */
.site-header.scrolled{
  background:rgba(238,240,236,.97);
  box-shadow:0 1px 0 var(--line), 0 8px 24px -12px rgba(20,24,31,.15);
}
.site-header.scrolled .wrap{ height:72px; transition:height .2s ease; }
.site-header .wrap{ transition:height .2s ease; }

/* ---------- scroll reveal (JS opts elements in; safe if JS fails) ---------- */
.reveal.reveal-init{
  opacity:0; transform:translateY(22px);
  transition:opacity .6s ease, transform .6s ease;
}
.reveal.reveal-init.in-view{ opacity:1; transform:translateY(0); }

/* ---------- product card polish ---------- */
.pcard{
  border-radius:10px; overflow:hidden;
  border:1px solid var(--line);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.pcard:hover{
  transform:translateY(-5px);
  box-shadow:0 16px 32px -18px rgba(20,24,31,.35);
  border-color:var(--ink-soft);
}
.pcard .thumb img{ transition:transform .35s ease; }
.pcard:hover .thumb img{ transform:scale(1.06); }

/* ---------- back to top ---------- */
.back-to-top{
  position:fixed; right:20px; bottom:20px; z-index:60;
  width:44px; height:44px; border-radius:50%;
  background:var(--ink); color:var(--paper);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; border:none; cursor:pointer;
  opacity:0; pointer-events:none; transform:translateY(10px);
  transition:opacity .2s ease, transform .2s ease, background .15s ease;
  box-shadow:0 10px 24px -10px rgba(20,24,31,.4);
}
.back-to-top.visible{ opacity:1; pointer-events:auto; transform:translateY(0); }
.back-to-top:hover{ background:var(--amber-dark); }

/* ---------- floating hero visual ---------- */
@keyframes floatY{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-10px); }
}
.float-anim{ animation:floatY 4s ease-in-out infinite; }

/* ---------- floating label form fields ---------- */
.field{ position:relative; margin-bottom:6px; }
.field label{
  position:absolute; left:14px; top:14px;
  font-family:var(--body); font-size:15px; color:var(--ink-soft);
  pointer-events:none; transition:top .15s ease, font-size .15s ease, color .15s ease;
  background:var(--paper); padding:0 4px;
}
.field input, .field textarea{
  width:100%; padding:14px; font-family:var(--body); font-size:15px;
  border:1px solid var(--line); border-radius:6px; background:var(--paper);
  color:var(--ink); transition:border-color .15s ease;
}
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--amber); }
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label{
  top:-9px; font-size:11px; color:var(--amber-dark);
  text-transform:uppercase; letter-spacing:.05em;
}

/* ---------- two column text block ---------- */
.split{
  display:grid; grid-template-columns:.9fr 1.4fr; gap:56px;
}
.split h3{ font-size:26px; margin-bottom:18px; }

/* ---------- stat row ---------- */
.stats{
  display:grid; grid-template-columns:repeat(3,1fr);
  border:1px solid var(--line);
}
.stats div{
  padding:32px 28px; border-right:1px solid var(--line);
}
.stats div:last-child{ border-right:none; }
.stats b{
  font-family:var(--display); font-size:34px; display:block; margin-bottom:6px;
}
.stats b.list{
  font-size:17px; font-weight:600; line-height:1.4;
}
.stats span{
  font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft);
}

/* ---------- contact ---------- */
.contact-grid{
  display:grid; grid-template-columns:1fr 1.2fr; gap:56px;
}
.info-block{ margin-bottom:28px; }
.info-block .tag{ margin-bottom:10px; }
.info-block p{ font-size:17px; color:var(--ink); }
.info-block a{ color:var(--amber-dark); }

form.contact-form{ display:flex; flex-direction:column; gap:20px; }
.contact-form .field textarea{ min-height:140px; resize:vertical; }
.contact-form button{
  align-self:flex-start;
}
.map-embed{ border:1px solid var(--line); height:320px; margin-bottom:48px; }
.map-embed iframe{ width:100%; height:100%; border:0; }

/* ---------- page banner image ---------- */
.page-banner{ width:100%; height:280px; overflow:hidden; border-bottom:1px solid var(--line); background:var(--ink); }
.page-banner img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }

/* ---------- header logo image ---------- */
.logo{ display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; gap:4px; }
.logo img{ height:40px; width:auto; display:block; }
.logo .tagline{
  font-family:var(--display); font-style:italic; font-weight:500;
  font-size:15px; letter-spacing:.03em; color:var(--amber-dark);
  text-align:center; width:100%;
}

/* ---------- hero banner slider (full-bleed) ---------- */
.hero-banner{
  position:relative; overflow:hidden;
  border-bottom:1px solid var(--line);
  background:var(--ink);
}
.hero-banner .slide{
  display:none;
  position:relative;
  aspect-ratio:1600/567;
  background-size:cover; background-position:center;
}
.hero-banner .slide.active{ display:block; animation:heroFade .5s ease; }
@keyframes heroFade{
  from{ opacity:0; }
  to{ opacity:1; }
}
.foam-slide{ background:linear-gradient(120deg,#1B2029 0%,#2A3140 55%,#3A414D 100%); }

.slide-overlay{ position:absolute; inset:0; display:flex; align-items:center; }
.slide-overlay.branded{ justify-content:flex-end; padding:0 6%; }
.slide-overlay.branded::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(100deg, rgba(20,24,31,0) 30%, rgba(20,24,31,.55) 52%, rgba(20,24,31,.92) 74%);
}
.foam-slide .slide-overlay.branded::before{ display:none; }
.slide-overlay.split{ justify-content:space-between; padding:0 8%; }
.slide-overlay.minimal{ justify-content:flex-start; align-items:flex-end; padding:0 0 8% 6%; }

.slide-text{ position:relative; z-index:1; max-width:460px; }
.slide-text .tag{ color:var(--amber); }
.slide-text .tag::before{ background:var(--amber); }
.slide-text h1{ color:#fff; font-size:clamp(28px,4vw,52px); line-height:1.03; }
.slide-text h1 em{ color:var(--amber); font-style:normal; }
.slide-text .lede{ color:#DEE1DA; font-size:15px; max-width:38ch; margin-top:14px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.slide-text .btn{ margin-top:22px; }

.foam-product{ position:relative; z-index:1; max-height:78%; align-self:center; filter:drop-shadow(0 18px 26px rgba(0,0,0,.4)); }

.hero-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(238,240,236,.9); border:1px solid var(--line);
  color:var(--ink); font-size:22px; line-height:1;
  cursor:pointer; transition:background .15s,color .15s;
  z-index:5;
}
.hero-arrow:hover{ background:var(--ink); color:var(--paper); }
.hero-arrow.prev{ left:16px; }
.hero-arrow.next{ right:16px; }
.hero-dots{
  position:absolute; left:0; right:0; bottom:16px;
  display:flex; gap:10px; justify-content:center;
  z-index:5;
}
.hero-dots button{
  width:26px; height:3px; padding:0; border:none;
  background:rgba(255,255,255,.4); cursor:pointer;
  transition:background .15s;
}
.hero-dots button.active{ background:var(--amber); }

.hero-meta-strip{ border-bottom:1px solid var(--line); background:var(--paper-dim); }
.hero-meta-strip .hero-meta{
  display:flex; gap:48px; padding:16px 32px;
  font-family:var(--mono); font-size:12px; color:var(--ink-soft);
  text-transform:uppercase; letter-spacing:.05em;
}
.hero-meta-strip .hero-meta b{ color:var(--ink); font-family:var(--body); font-weight:600; font-size:13px; text-transform:none; letter-spacing:0; display:block; margin-bottom:2px; }

@media (max-width:900px){
  .hero-banner .slide{ aspect-ratio:auto; min-height:420px; }
  .slide-overlay.branded{ padding:0 6%; }
  .slide-text{ max-width:100%; }
  .slide-overlay.split{ flex-direction:column-reverse; justify-content:center; align-items:center; text-align:center; gap:16px; padding:24px 6%; }
  .foam-product{ max-height:34%; }
  .hero-meta-strip .hero-meta{ flex-direction:column; gap:12px; }
}

/* ---------- hero product image ---------- */
.hero-img{ border:1px solid var(--line); overflow:hidden; }
.hero-img img{ width:100%; display:block; }

/* ---------- gallery strip ---------- */
.gallery-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.gallery-strip a{ display:block; aspect-ratio:1/1; overflow:hidden; background:var(--ink); position:relative; }
.gallery-strip img{ width:100%; height:100%; object-fit:contain; transition:transform .3s; }
.gallery-strip a:hover img{ transform:scale(1.05); }
.gallery-strip .label{
  position:absolute; left:0; bottom:0; right:0;
  background:linear-gradient(transparent,rgba(20,24,31,.85));
  color:#fff; font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.05em;
  padding:24px 14px 10px;
}

/* ---------- downloads row ---------- */
.downloads{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.downloads a{ background:var(--paper); padding:28px; display:flex; align-items:center; gap:16px; }
.downloads img{ width:56px; height:56px; object-fit:contain; }
.downloads span{ font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); }

/* ---------- footer ---------- */
footer.site-footer{
  background:var(--ink); color:var(--paper);
  padding:64px 0 28px;
}
footer .wrap{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px;
}
footer h5{
  font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--amber); margin-bottom:18px;
}
footer p, footer a{ color:#B7BCC6; font-size:14px; }
footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
footer a:hover{ color:var(--paper); }
.foot-bottom{
  max-width:var(--max); margin:48px auto 0; padding:24px 32px 0;
  border-top:1px solid #2A303B;
  font-family:var(--mono); font-size:11px; color:#7A8090; letter-spacing:.04em;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
}

/* ---------- responsive ---------- */
@media (max-width: 900px){
  .hero .wrap{ grid-template-columns:1fr; }
  .catstrip{ grid-template-columns:repeat(2,1fr); }
  .grid{ grid-template-columns:repeat(2,1fr); }
  .split, .contact-grid{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr; }
  .stats div{ border-right:none; border-bottom:1px solid var(--line); }
  footer .wrap{ grid-template-columns:1fr; }
  nav.mainnav ul{ gap:20px; flex-wrap:wrap; }
}
@media (max-width: 560px){
  .grid{ grid-template-columns:1fr; }
  .catstrip{ grid-template-columns:1fr; }
  .site-header .wrap{ flex-wrap:wrap; height:auto; padding:16px 20px; gap:12px;}
}