:root{
  --stone:#E6E2D9;
  --paper:#F7F5F0;
  --ink:#201D19;
  --concrete:#B7B0A4;
  --petroleum:#233F42;
  --petroleum-light:#375B5F;
  --clay:#A5502F;
  --clay-dark:#833E24;
  --line: rgba(32,29,25,0.12);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--stone);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{display:block; width:100%; height:100%; object-fit:cover;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1180px; margin:0 auto; padding:0 28px;}
h1,h2,h3{font-family:'Archivo',sans-serif; text-transform:uppercase; letter-spacing:0.01em; line-height:1.02;}
.eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--clay-dark); font-weight:500;
}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'IBM Plex Mono',monospace; font-size:13px; letter-spacing:0.06em; text-transform:uppercase;
  padding:15px 26px; border-radius:2px; font-weight:500; cursor:pointer; border:1px solid transparent;
  transition:transform .15s ease, background .15s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--clay); color:var(--paper);}
.btn-primary:hover{background:var(--clay-dark);}
.btn-outline{border-color:rgba(247,245,240,0.5); color:var(--paper);}
.btn-outline:hover{background:rgba(247,245,240,0.12);}
.btn-outline.dark{border-color:var(--ink); color:var(--ink);}
.btn-outline.dark:hover{background:rgba(32,29,25,0.06);}

/* NAV */
header{
  position:sticky; top:0; z-index:50;
  background:var(--stone); border-bottom:1px solid var(--line);
}
nav.wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:78px;
}
.logo{
  font-family:'Archivo',sans-serif; font-weight:900; font-size:20px; letter-spacing:0.02em;
  display:flex; align-items:center; gap:10px;
}
.logo .mark{
  width:14px; height:14px; background:var(--clay); display:inline-block;
  box-shadow:16px 0 0 var(--petroleum), 32px 0 0 var(--ink);
  margin-right:26px;
}
.navlinks{display:flex; gap:34px; font-size:13px; font-weight:600; letter-spacing:0.03em; text-transform:uppercase;}
.navlinks a{position:relative; padding:4px 0;}
.navlinks a:after{content:'';position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--clay); transition:width .2s;}
.navlinks a:hover:after, .navlinks a.active:after{width:100%;}
.navcta .btn{padding:11px 18px; background:var(--petroleum); color:var(--paper);}
.navcta .btn:hover{background:var(--petroleum-light);}

/* HERO (home) */
.hero{position:relative; min-height:88vh; display:flex; align-items:flex-end; overflow:hidden;}
.hero-bg{position:absolute; inset:0; z-index:0;}
.hero-bg img{filter:saturate(0.9) brightness(0.55);}
.hero-bg:after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(35,63,66,0.35) 0%, rgba(20,18,16,0.55) 65%, rgba(20,18,16,0.85) 100%);}
.hero-content{position:relative; z-index:1; color:var(--paper); padding-bottom:64px; width:100%;}
.hero-content .eyebrow{color:#D8AE95; margin-bottom:22px; display:block;}
.hero-content h1{font-size:clamp(38px, 6vw, 76px); font-weight:900; max-width:820px; color:var(--paper);}
.hero-content p{font-size:17px; max-width:520px; margin:26px 0 36px; color:rgba(247,245,240,0.82); line-height:1.6;}
.hero-actions{display:flex; gap:16px; flex-wrap:wrap;}

/* PAGE HERO (subpages) */
.page-hero{background:var(--petroleum); color:var(--paper); padding:90px 0 60px;}
.page-hero h1{font-size:clamp(32px,4.5vw,52px); font-weight:900; color:var(--paper); margin-top:14px;}
.page-hero p{max-width:560px; margin-top:18px; color:rgba(247,245,240,0.78); font-size:15px; line-height:1.6;}
.page-hero .eyebrow{color:#D8AE95;}

.section{padding:100px 0;}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:52px; gap:24px; flex-wrap:wrap;}
.section-head h2{font-size:clamp(28px,3.6vw,42px); font-weight:900;}
.section-head .desc{max-width:380px; font-size:15px; color:#54504A; line-height:1.6;}

/* CATEGORY TILE GRID (home) */
.tile-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:3px; background:var(--ink); border:3px solid var(--ink);}
.tile-card{position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--petroleum); display:flex; flex-direction:column; justify-content:flex-end; padding:26px; color:var(--paper);}
.tile-card img{position:absolute; inset:0; z-index:0; transition:transform .5s ease; opacity:0.55;}
.tile-card:hover img{transform:scale(1.06);}
.tile-card:after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,18,16,0.05), rgba(20,18,16,0.85)); z-index:0;}
.tile-card .tc-inner{position:relative; z-index:1;}
.tile-card .code{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.12em; color:#D8AE95; margin-bottom:10px; display:block;}
.tile-card h3{font-size:24px; font-weight:700; margin-bottom:6px;}
.tile-card .arrow{font-family:'IBM Plex Mono',monospace; font-size:13px; opacity:0.75; margin-top:14px; display:inline-block; transition:transform .2s;}
.tile-card:hover .arrow{transform:translateX(6px);}

/* STATS STRIP */
.stats{background:var(--petroleum); color:var(--paper); padding:70px 0;}
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:left;}
.stat-num{font-family:'Archivo',sans-serif; font-weight:900; font-size:clamp(30px,4vw,48px); color:#EBC8B2;}
.stat-label{font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; margin-top:8px; color:rgba(247,245,240,0.7);}
.stats-grid > div{border-left:1px solid rgba(247,245,240,0.2); padding-left:20px;}
.stats-grid > div:first-child{border-left:none; padding-left:0;}

/* FILTER BAR (category pages) */
.filter-bar{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:44px;}
.filter-chip{
  font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.05em; text-transform:uppercase;
  padding:9px 16px; border:1px solid var(--line); background:var(--paper); cursor:pointer; color:var(--ink);
  transition:all .15s ease;
}
.filter-chip:hover{border-color:var(--clay);}
.filter-chip.active{background:var(--ink); color:var(--paper); border-color:var(--ink);}

/* CATALOG */
.catalog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.prod-card{background:var(--paper); border:1px solid var(--line); transition:opacity .2s ease;}
.prod-card.hidden{display:none;}
.prod-photo{aspect-ratio:1/1; position:relative; overflow:hidden;}
.prod-photo img{transition:transform .5s ease;}
.prod-card:hover .prod-photo img{transform:scale(1.05);}
.prod-info{padding:20px 20px 24px;}
.prod-info h3{font-size:16px; font-weight:700; text-transform:none; letter-spacing:0; margin-bottom:10px; font-family:'Inter',sans-serif;}
.spec-plate{display:flex; gap:10px; flex-wrap:wrap; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.04em; color:#54504A;}
.spec-plate span{border:1px solid var(--line); padding:4px 8px; background:var(--stone);}
.prod-cta{display:block; margin-top:14px; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.05em; text-transform:uppercase; color:var(--clay-dark); font-weight:600;}
.catalog-foot{margin-top:48px; text-align:center;}
.catalog-empty{display:none; text-align:center; padding:60px 0; color:#8A8478; font-family:'IBM Plex Mono',monospace; font-size:13px;}

/* GALLERY */
.gallery{display:grid; grid-template-columns:1.4fr 1fr 1fr; grid-template-rows:280px 280px; gap:12px;}
.gallery a{position:relative; overflow:hidden; display:block;}
.gallery a:nth-child(1){grid-row:span 2;}
.gallery a img{transition:transform .5s ease;}
.gallery a:hover img{transform:scale(1.06);}
.g-cap{position:absolute; left:0; bottom:0; right:0; padding:16px 18px; background:linear-gradient(0deg, rgba(20,18,16,0.85), transparent); color:var(--paper); font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.05em;}

/* TESTIMONIALS */
.testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.testi-card{background:var(--paper); border-top:3px solid var(--clay); padding:32px 26px;}
.testi-card p{font-size:15px; line-height:1.7; color:#3A3733; margin-bottom:20px;}
.testi-who{font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.04em; color:var(--petroleum);}

/* CONTACT */
.contact{background:var(--ink); color:var(--paper);}
.contact .wrap{display:grid; grid-template-columns:1fr 1fr; gap:70px;}
.contact h2{color:var(--paper); font-size:clamp(28px,3.6vw,42px); margin-bottom:20px;}
.contact .desc{color:rgba(247,245,240,0.65); font-size:15px; line-height:1.7; margin-bottom:40px; max-width:420px;}
.field{margin-bottom:20px;}
.field label{display:block; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:8px; color:rgba(247,245,240,0.6);}
.field input, .field textarea, .field select{
  width:100%; background:transparent; border:none; border-bottom:1px solid rgba(247,245,240,0.3);
  padding:10px 2px; color:var(--paper); font-family:'Inter',sans-serif; font-size:15px; outline:none;
}
.field select option{color:var(--ink);}
.field input:focus, .field textarea:focus, .field select:focus{border-color:var(--clay);}
.field textarea{resize:vertical; min-height:80px;}
.contact-info{display:flex; flex-direction:column; justify-content:space-between;}
.info-block{margin-bottom:28px;}
.info-block .eyebrow{color:#D8AE95; margin-bottom:8px; display:block;}
.info-block div, .info-block a{font-size:16px; line-height:1.6;}
.info-block a{border-bottom:1px solid rgba(247,245,240,0.25);}
.info-block a:hover{border-color:var(--clay);}
.map-box{aspect-ratio:16/8; background:var(--petroleum); border:1px solid rgba(247,245,240,0.15); display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono',monospace; font-size:12px; color:rgba(247,245,240,0.5); text-align:center; padding:20px;}

footer{background:var(--petroleum); border-top:1px solid rgba(247,245,240,0.1); padding:26px 0; color:rgba(247,245,240,0.55);}
footer .wrap{display:flex; justify-content:space-between; align-items:center; font-size:12px; font-family:'IBM Plex Mono',monospace; flex-wrap:wrap; gap:10px;}

/* WHATSAPP FLOATING BUTTON */
.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:60;
  width:56px; height:56px; border-radius:50%; background:var(--clay);
  display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(0,0,0,0.25);
  transition:transform .15s ease;
}
.wa-float:hover{transform:scale(1.08); background:var(--clay-dark);}
.wa-float svg{width:26px; height:26px; fill:var(--paper);}

@media (max-width:860px){
  .navlinks{display:none;}
  .stats-grid{grid-template-columns:repeat(2,1fr); row-gap:32px;}
  .stats-grid > div:nth-child(3){border-left:none; padding-left:0;}
  .tile-grid, .catalog-grid, .testi-grid{grid-template-columns:1fr;}
  .gallery{grid-template-columns:1fr 1fr; grid-template-rows:200px 200px 200px;}
  .gallery a:nth-child(1){grid-column:span 2; grid-row:span 1;}
  .contact .wrap{grid-template-columns:1fr;}
}