/* ============================================================
   FREITAS EPI's — Design tokens
   Palette: white / industrial red / gray (signage-inspired)
   Display: Barlow Condensed  |  Body: IBM Plex Sans  |  Data: IBM Plex Mono
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --white:      #ffffff;
  --ink:        #1c1c1e;
  --ink-70:     #4a4a4e;
  --gray-500:   #8c8c90;
  --gray-200:   #e4e4e6;
  --gray-100:   #f4f4f5;
  --red:        #d62828;
  --red-dark:   #a81f1f;
  --red-tint:   #fdeceb;

  --display: 'Barlow Condensed', sans-serif;
  --body:    'IBM Plex Sans', sans-serif;
  --mono:    'IBM Plex Mono', monospace;

  --maxw: 1120px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--body);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
h1,h2,h3,h4{
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.05;
  margin: 0 0 0.4em 0;
  text-transform: uppercase;
}
p{ margin: 0 0 1em 0; color: var(--ink-70); }
.container{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;
}

/* Focus visibility */
a:focus-visible, button:focus-visible{
  outline: 3px solid var(--red);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Gauge-tick divider (signature motif) ---------- */
.gauge-rule{
  height: 14px;
  width: 100%;
  background-image: repeating-linear-gradient(
    to right,
    var(--gray-200) 0, var(--gray-200) 1px,
    transparent 1px, transparent 24px
  );
  background-position: center;
  background-repeat: repeat-x;
  background-size: 100% 1px;
  position: relative;
  margin: 0;
}
.gauge-rule::before{
  content:"";
  position:absolute; left:0; top:0;
  height: 100%; width: 64px;
  background: var(--red);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  opacity: .9;
}

/* ---------- Header / Nav ---------- */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 0;
}
.logo{
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  display:flex; align-items:center; gap:8px;
}
.logo-img{
  height: 68px;
  width: auto;
  display:block;
}
body.home-page .logo-img{
  height: 92px;
}
@media (max-width: 480px){
  .logo-img{ height: 52px; }
  body.home-page .logo-img{ height: 64px; }
}
.logo .mark{ color: var(--red); }
.logo .sub{
  font-family: var(--mono);
  font-size: 0.62rem;
  color: var(--gray-500);
  text-transform: none;
  letter-spacing: 0.04em;
}
.nav-links{
  display:flex; gap: 28px; list-style:none; margin:0; padding:0;
}
.nav-links a{
  font-family: var(--display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-70);
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: border-color .15s ease, color .15s ease;
}
.nav-links a:hover, .nav-links a[aria-current="page"]{
  color: var(--ink);
  border-color: var(--red);
}
.nav-toggle{
  display:none;
  background:none; border:none; cursor:pointer;
  width: 40px; height: 40px;
  position: relative;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; position:absolute; left:8px; right:8px; height:2px; background: var(--ink);
}
.nav-toggle span{ top:19px; }
.nav-toggle span::before{ top:-7px; }
.nav-toggle span::after{ top:7px; }

@media (max-width: 900px){
  .nav-links{
    position: fixed; inset: 65px 0 0 0;
    background: var(--white);
    flex-direction: column; gap:0;
    padding: 8px 28px 24px;
    transform: translateY(-110%);
    transition: transform .25s ease;
    border-bottom: 1px solid var(--gray-200);
    max-height: calc(100vh - 65px);
    overflow-y: auto;
  }
  .nav-links.open{ transform: translateY(0); }
  .nav-links a{ padding: 14px 0; border-bottom: 1px solid var(--gray-100); width:100%; }
  .nav-toggle{ display:block; }
}

/* ---------- Table horizontal scroll (mobile-safe) ---------- */
.table-scroll{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -4px;
  padding: 0 4px;
}
.table-scroll table{ min-width: 520px; }

/* ---------- Hero ---------- */
.hero{
  padding: 72px 0 56px;
  background: var(--white);
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items:center;
}
.hero-single{
  max-width: 700px;
}
.eyebrow{
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--red-dark);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display:flex; align-items:center; gap:10px;
  margin-bottom: 14px;
}
.eyebrow::before{
  content:""; width: 24px; height:2px; background: var(--red);
}
.hero h1{
  font-size: clamp(2.6rem, 5vw, 4rem);
}
.hero .lead{
  font-size: 1.15rem;
  max-width: 46ch;
  color: var(--ink-70);
}
.hero-actions{ display:flex; gap:14px; margin-top: 28px; flex-wrap:wrap; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 13px 26px;
  border-radius: 2px;
  border: 2px solid transparent;
  cursor:pointer;
}
.btn-primary{ background: var(--red); color: var(--white); }
.btn-primary:hover{ background: var(--red-dark); }
.btn-outline{ background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover{ border-color: var(--red); color: var(--red-dark); }

/* ---------- Attenuation gauge (SVG signature) ---------- */
.gauge-card{
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  padding: 24px;
}
.gauge-card .cap{
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display:flex; justify-content:space-between;
  margin-top: 10px;
}

/* ---------- CA badge (stamped certification look) ---------- */
.product-photo{
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--white);
  border: 1px solid var(--gray-200);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  margin-bottom: 4px;
}
.product-photo img{
  width:100%; height:100%;
  object-fit: contain;
  padding: 14px;
}
.ca-badge{
  display:inline-flex; flex-direction:column; align-items:flex-start;
  border: 2px solid var(--ink);
  padding: 10px 16px;
  position: relative;
  font-family: var(--mono);
}
.ca-badge::before, .ca-badge::after{
  content:""; position:absolute; width:8px; height:8px;
  border-top: 2px solid var(--red); border-left: 2px solid var(--red);
  top:-2px; left:-2px;
}
.ca-badge::after{
  top:auto; left:auto; bottom:-2px; right:-2px;
  border-top:none; border-left:none;
  border-bottom: 2px solid var(--red); border-right: 2px solid var(--red);
}
.ca-badge .num{ font-size: 1.1rem; font-weight: 600; color: var(--ink); }
.ca-badge .lbl{ font-size: 0.65rem; color: var(--gray-500); text-transform: uppercase; letter-spacing: .05em; }

/* ---------- Section shell ---------- */
section{ padding: 64px 0; }
.section-alt{ background: var(--gray-100); }
.section-head{ max-width: 62ch; margin-bottom: 40px; }
.section-head h2{ font-size: clamp(1.9rem, 3.2vw, 2.6rem); }

/* ---------- Cards / grid ---------- */
.grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-2{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.card{
  background: var(--white);
  border: 1px solid var(--gray-200);
  padding: 26px;
  display:flex; flex-direction:column; gap:12px;
}
.card .tag{
  font-family: var(--mono); font-size: 0.68rem; color: var(--red-dark);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.card h3{ font-size: 1.35rem; margin-bottom: 2px; }
.spec-row{
  display:flex; justify-content:space-between;
  font-family: var(--mono); font-size: 0.82rem;
  padding: 6px 0; border-top: 1px dashed var(--gray-200);
  color: var(--ink-70);
}
.card-actions{ margin-top: auto; padding-top: 8px; }
.card-actions a{
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: 0.92rem; color: var(--red-dark); border-bottom: 2px solid var(--red);
}

/* ---------- Stats strip ---------- */
.stats{
  display:grid; grid-template-columns: repeat(4,1fr);
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
}
.stat{
  padding: 28px 20px;
  border-left: 1px solid var(--gray-200);
}
.stat:first-child{ border-left:none; }
.stat .n{
  font-family: var(--display); font-weight: 800; font-size: 2.4rem; color: var(--ink);
  display:flex; align-items:baseline; gap:4px;
}
.stat .n small{ font-family: var(--mono); font-size: 1rem; color: var(--red); }
.stat .l{ font-size: 0.85rem; color: var(--gray-500); }

/* ---------- Table (specs / documents) ---------- */
table{ width:100%; border-collapse: collapse; }
th, td{
  text-align:left; padding: 14px 12px; border-bottom: 1px solid var(--gray-200);
  font-size: 0.95rem;
}
th{
  font-family: var(--display); text-transform: uppercase; letter-spacing:.03em;
  font-size: 0.85rem; color: var(--ink-70);
}
td.mono, th.mono{ font-family: var(--mono); font-size: 0.82rem; }
tr:hover td{ background: var(--gray-100); }

.doc-row{ display:flex; align-items:center; justify-content:space-between; gap: 16px; }
.doc-icon{
  width: 38px; height:38px; flex:none;
  border: 2px solid var(--ink); position:relative;
}
.doc-icon::before{
  content:""; position:absolute; inset: 8px 6px;
  border-top: 2px solid var(--red);
}
.doc-icon::after{
  content:""; position:absolute; left:6px; right:6px; top:16px;
  border-top: 2px solid var(--gray-500);
}

/* ---------- CTA band ---------- */
.cta-band{
  background: var(--ink);
  color: var(--white);
  text-align:left;
}
.cta-band h2{ color: var(--white); }
.cta-band p{ color: var(--gray-200); }
.cta-band .container{
  display:flex; align-items:center; justify-content:space-between; gap: 24px; flex-wrap:wrap;
}

/* ---------- Footer ---------- */
footer{
  background: var(--white);
  border-top: 1px solid var(--gray-200);
  padding: 40px 0 28px;
}
.foot-grid{
  display:grid; grid-template-columns: 1.3fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 24px;
}
.foot-grid h4{ font-size: 0.95rem; margin-bottom: 12px; }
.foot-grid ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.foot-grid a{ color: var(--ink-70); font-size: 0.92rem; }
.foot-grid a:hover{ color: var(--red-dark); }
.foot-bottom{
  border-top: 1px solid var(--gray-200);
  padding-top: 18px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-family: var(--mono); font-size: 0.72rem; color: var(--gray-500);
}

/* ---------- Page header (interior pages) ---------- */
.page-head{
  padding: 48px 0 36px;
  border-bottom: 1px solid var(--gray-200);
}
.page-head h1{ font-size: clamp(2.2rem, 4vw, 3rem); }
.breadcrumb{
  font-family: var(--mono); font-size: 0.75rem; color: var(--gray-500);
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: 14px;
}
.breadcrumb .red{ color: var(--red-dark); }

/* ---------- Contact form (no e-commerce — inquiry only) ---------- */
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-grid .full{ grid-column: 1 / -1; }
label{
  display:block; font-family: var(--mono); font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-70);
  margin-bottom: 6px;
}
input, textarea, select{
  width:100%; padding: 12px 14px;
  border: 1px solid var(--gray-200); background: var(--white);
  font-family: var(--body); font-size: 0.95rem; color: var(--ink);
}
input:focus, textarea:focus, select:focus{ border-color: var(--red); outline:none; }
textarea{ resize: vertical; min-height: 120px; }

@media (max-width: 900px){
  .hero-grid{ grid-template-columns: 1fr; }
  .grid-3{ grid-template-columns: 1fr; }
  .grid-2{ grid-template-columns: 1fr; }
  .stats{ grid-template-columns: repeat(2,1fr); }
  .stat:nth-child(3){ border-left:none; }
  .foot-grid{ grid-template-columns: 1fr; }
  .form-grid{ grid-template-columns: 1fr; }
  .cta-band .container{ flex-direction:column; align-items:flex-start; }
}

@media (max-width: 640px){
  .container{ padding: 0 20px; }
  .hero{ padding: 48px 0 40px; }
  section{ padding: 44px 0; }
  .nav{ padding: 12px 0; }
  .hero-actions, .card-actions{ width:100%; }
  .hero-actions .btn{ width:100%; justify-content:center; }
  .cta-band .btn{ width:100%; justify-content:center; }
  .stats{ grid-template-columns: 1fr 1fr; }
  .stat{ padding: 20px 14px; }
  .stat .n{ font-size: 1.9rem; }
  th, td{ padding: 10px 8px; font-size: 0.85rem; }
  .doc-row{ flex-wrap: wrap; }
  .foot-bottom{ flex-direction:column; align-items:flex-start; gap:6px; }
}

html, body{ overflow-x: hidden; }

/* ---------- Floating WhatsApp button ---------- */
.whatsapp-float{
  position: fixed;
  right: calc(22px + env(safe-area-inset-right));
  bottom: calc(22px + env(safe-area-inset-bottom));
  width: 58px;
  height: 58px;
  background: #25D366;
  border-radius: 50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  z-index: 60;
  transition: transform .15s ease, box-shadow .15s ease;
}
.whatsapp-float:hover{
  transform: scale(1.07);
  box-shadow: 0 6px 18px rgba(0,0,0,0.3);
}
.whatsapp-float svg{ width: 30px; height: 30px; display:block; }
@media (max-width: 640px){
  .whatsapp-float{ right: calc(16px + env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); width: 52px; height: 52px; }
  .whatsapp-float svg{ width: 26px; height: 26px; }
}

.reveal{ opacity:0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.reveal.in{ opacity:1; transform:none; }