/* =========================================================
   MATPETROL, INC. — Design System
   Distinct from Petrotex: navy #151F26 + red #981315,
   Barlow Condensed display / Archivo body / IBM Plex Mono labels,
   gold hazard accent used sparingly. Clean industrial, not data-plate.
   ========================================================= */

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

:root{
  --ink:        #151F26;   /* Matpetrol navy (from logo) */
  --ink-soft:   #2A343C;
  --red:        #981315;   /* Matpetrol red (from logo) */
  --red-deep:   #7A0F10;
  --steel:      #727171;   /* logo gray */
  --steel-soft: #A7ABAE;
  --paper:      #FBFAF6;   /* warm off-white */
  --paper-dim:  #ECEAE3;
  --mark:       #FFE45C;   /* gold highlighter accent */
  --white:      #FFFFFF;

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

  --maxw: 1180px;
  --edge: clamp(20px, 5vw, 64px);
  --radius: 2px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0; background: var(--paper); color: var(--ink);
  font-family: var(--f-body); font-size:16px; line-height:1.55;
  -webkit-font-smoothing: antialiased;
}
img,svg{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family: var(--f-display); margin:0; font-weight:700; letter-spacing:.01em; }
p{ margin:0; }
:focus-visible{ outline: 2px solid var(--red); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
}

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

/* ---------- Eyebrow tag ---------- */
.tag{
  display:inline-flex; align-items:center; gap:.5em;
  font-family: var(--f-mono); font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; color: var(--steel);
}
.tag::before{ content:""; width:28px; height:2px; background: var(--red); }
.tag.on-dark{ color: var(--steel-soft); }

/* ---------- Topbar ---------- */
.topbar{
  background: var(--ink); color: var(--paper-dim);
  font-family: var(--f-mono); font-size:.74rem; letter-spacing:.03em;
}
.topbar .wrap{ display:flex; justify-content:space-between; align-items:center;
  padding:.5rem var(--edge); flex-wrap:wrap; gap:.4rem; }
.topbar a{ color: var(--paper-dim); border-bottom:1px solid rgba(255,255,255,.28); }
.topbar a:hover{ color: var(--mark); border-color: var(--mark); }
.topbar-contacts{ display:flex; gap:1.4rem; flex-wrap:wrap; }

/* ---------- Header ---------- */
header.site{
  background: var(--white); border-bottom: 2px solid var(--ink);
  position: sticky; top:0; z-index:50;
}
header.site .wrap{ display:flex; align-items:center; justify-content:space-between;
  padding:.85rem var(--edge); gap:1.5rem; }
.brand{ display:flex; align-items:center; gap:.7rem; }
.brand img{ height: 54px; width:auto; }
.brand .est{
  font-family: var(--f-mono); font-size:.62rem; color: var(--steel);
  letter-spacing:.08em; border-left:1px solid var(--paper-dim); padding-left:.7rem; line-height:1.3;
}
nav.main{ display:flex; align-items:center; gap:1.9rem; }
nav.main a{
  font-family: var(--f-mono); font-size:.78rem; letter-spacing:.06em;
  text-transform:uppercase; color: var(--ink-soft);
  padding:.3rem 0; border-bottom:2px solid transparent;
  transition: border-color .15s ease, color .15s ease;
}
nav.main a:hover, nav.main a.active{ color: var(--red); border-color: var(--red); }
.lang-toggle{ display:flex; border:1px solid var(--ink); font-family: var(--f-mono); font-size:.72rem; }
.lang-toggle button{ background:none; border:none; cursor:pointer; padding:.32rem .6rem; color: var(--steel); letter-spacing:.05em; }
.lang-toggle button.active{ background: var(--ink); color: var(--white); }
.nav-toggle{ display:none; background:none; border:1px solid var(--ink); padding:.4rem .6rem; cursor:pointer; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; display:block; width:20px; height:2px; background:var(--ink); position:relative; }
.nav-toggle span::before{ position:absolute; top:-6px; }
.nav-toggle span::after{ position:absolute; top:6px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-family: var(--f-mono); font-size:.8rem; letter-spacing:.05em; text-transform:uppercase;
  padding:.85rem 1.4rem; border:2px solid var(--ink); cursor:pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}
.btn-primary{ background: var(--red); border-color: var(--red); color: var(--white); }
.btn-primary:hover{ background: var(--red-deep); border-color: var(--red-deep); }
.btn-outline{ background:transparent; color: var(--ink); }
.btn-outline:hover{ background: var(--ink); color: var(--white); }
.btn:active{ transform: translateY(1px); }

/* ---------- Hero ---------- */
.hero{
  position:relative; background: var(--ink); color: var(--white); overflow:hidden;
  background-size: cover; background-position: center 55%;
}
/* PLACEHOLDER heroes — solid navy with a faint technical grid.
   Swap each rule's background-image for a real Matpetrol photo when available. */
.hero-home, .hero-about, .hero-products, .hero-contact{ background-color: var(--ink); }
.hero::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(var(--ink-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--ink-soft) 1px, transparent 1px);
  background-size: 42px 42px; background-position:center; opacity:.5; mix-blend-mode: overlay;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(21,31,38,.96) 0%, rgba(21,31,38,.82) 34%, rgba(21,31,38,.45) 62%, rgba(21,31,38,.2) 88%, rgba(21,31,38,.15) 100%),
    linear-gradient(180deg, transparent 62%, var(--ink) 100%);
}
.hero .wrap{ position:relative; z-index:1; padding-top:5.5rem; padding-bottom:4.6rem; }
.hero .tag{ color: var(--steel-soft); margin-bottom:1.4rem; }
.hero h1{ font-size: clamp(2.3rem, 5.4vw, 4rem); line-height:1.02; max-width:15ch; text-transform:uppercase; }
.hero h1 em{ font-style:normal; background:linear-gradient(transparent 60%, var(--mark) 60%); color:var(--ink); padding:0 .06em; }
.hero .lede{ font-family: var(--f-body); font-size:1.08rem; color:#D9DCDF; max-width:54ch; margin-top:1.3rem; }
.hero .cta-row{ display:flex; gap:1rem; margin-top:2.2rem; flex-wrap:wrap; }
.hero .btn-primary{ background: var(--red); border-color: var(--red); }
.hero .btn-outline{ border-color: var(--steel-soft); color: var(--white); }
.hero .btn-outline:hover{ background: var(--white); color: var(--ink); }

/* ---------- Stat strip ---------- */
.stat-strip{ background: var(--white); border-top:1px solid var(--paper-dim); border-bottom:2px solid var(--ink); }
.stat-strip ul{ display:grid; grid-template-columns: repeat(4,1fr); }
.stat-strip li{ padding:1.2rem var(--edge); border-left:1px solid var(--paper-dim); font-family: var(--f-mono); }
.stat-strip li:first-child{ border-left:none; }
.stat-strip .num{ font-family: var(--f-display); font-size:1.9rem; color: var(--red); display:block; font-weight:700; line-height:1; }
.stat-strip .lbl{ font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color: var(--steel); }

/* ---------- Sections ---------- */
section{ padding:4.6rem 0; }
.section-head{ max-width:62ch; margin-bottom:2.6rem; }
.section-head .tag{ margin-bottom:.9rem; }
.section-head h2{ font-size: clamp(1.8rem, 3.4vw, 2.6rem); text-transform:uppercase; }
.section-head .sub{ font-family: var(--f-body); color: var(--steel); margin-top:.8rem; font-size:1.02rem; }
.section-alt{ background: var(--white); border-top:1px solid var(--paper-dim); border-bottom:1px solid var(--paper-dim); }
.section-dark{ background: var(--ink); color: var(--white); }
.section-dark .section-head .sub{ color: var(--steel-soft); }

/* ---------- Category grid (home preview) ---------- */
.cat-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:1.1rem; }
.cat-card{
  display:block; padding:1.6rem 1.5rem 1.8rem; border:1.5px solid var(--ink); background:var(--white);
  transition: transform .15s ease, box-shadow .15s ease;
}
.cat-card:hover{ transform: translateY(-3px); box-shadow: 0 10px 24px rgba(21,31,38,.12); }
.cat-card .tag{ margin-bottom:.5rem; }
.cat-card h3{ font-size:1.35rem; margin-top:.5rem; text-transform:uppercase; }
.cat-card p{ font-family: var(--f-body); font-size:.9rem; color: var(--steel); margin-top:.5rem; }
.cat-card .go{ font-family: var(--f-mono); font-size:.72rem; color: var(--red); margin-top:.9rem; display:block; letter-spacing:.05em; }

/* ---------- Two-col split ---------- */
.split{ display:grid; grid-template-columns: 1fr 1fr; gap:3rem; align-items:start; }
.split h2{ text-transform:uppercase; font-size: clamp(1.7rem, 3vw, 2.4rem); }
.split .body{ font-family: var(--f-body); color: var(--ink-soft); }
.split .body p + p{ margin-top:1rem; }

/* ---------- Product category block (with brands) ---------- */
.prod-cat{ padding:2.6rem 0; border-top:1px solid var(--paper-dim); }
.prod-cat:first-of-type{ border-top:none; }
.prod-cat-head{ display:flex; align-items:baseline; gap:1rem; margin-bottom:1.4rem; flex-wrap:wrap; }
.prod-cat-head h3{ font-size:1.6rem; text-transform:uppercase; }
.prod-list{ display:grid; grid-template-columns: 1fr 1fr; gap:.9rem 2.2rem; }
.prod-item{ display:flex; gap:.9rem; padding:.95rem 0; border-bottom:1px solid var(--paper-dim); }
.prod-item .mk{ width:7px; height:7px; background: var(--red); flex:none; margin-top:.4rem; }
.prod-item .txt b{ display:block; font-family: var(--f-body); font-weight:600; font-size:.98rem; }
.prod-item .txt .brands{ font-family: var(--f-mono); font-size:.74rem; color: var(--steel); letter-spacing:.02em; margin-top:.2rem; display:block; }
.prod-item .txt .brands strong{ color: var(--red); font-weight:500; }

/* ---------- Brand strip (alliances, merged into products) ---------- */
.brand-strip{ display:flex; flex-wrap:wrap; gap:.6rem; }
.brand-chip{
  font-family: var(--f-mono); font-size:.74rem; letter-spacing:.03em;
  border:1px solid var(--paper-dim); padding:.5rem .85rem; color: var(--ink-soft); background: var(--white);
}
.brand-group-label{
  font-family: var(--f-mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.08em;
  color: var(--steel); margin-bottom:.9rem;
}

/* ---------- Mission / vision cards ---------- */
.mv-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:1.2rem; }
.mv-card{ border:1.5px solid var(--ink); background:var(--white); padding:1.6rem 1.5rem; }
.mv-card h3{ font-size:1.25rem; text-transform:uppercase; margin-bottom:.7rem; color: var(--red); }
.mv-card p{ font-family: var(--f-body); font-size:.92rem; color: var(--ink-soft); }

/* ---------- Locations ---------- */
.loc-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:1.4rem; }
.loc-card{ border:1.5px solid var(--ink); background:var(--white); padding:1.8rem; }
.loc-card h3{ font-size:1.3rem; text-transform:uppercase; margin-top:.6rem; }
.loc-card .addr{ font-family: var(--f-body); color: var(--ink-soft); margin-top:.7rem; font-size:.95rem; }
.loc-card .phones{ font-family: var(--f-mono); font-size:.82rem; color: var(--steel); margin-top:.9rem; display:block; }
.loc-card iframe{ width:100%; height:200px; border:1px solid var(--paper-dim); margin-top:1rem; filter: grayscale(.15); }

/* ---------- Form ---------- */
form.rfq{ display:grid; gap:1rem; max-width:640px; }
form.rfq .row2{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
form.rfq label{ font-family: var(--f-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color: var(--steel); display:block; margin-bottom:.4rem; }
form.rfq input, form.rfq select, form.rfq textarea{
  width:100%; border:1px solid var(--ink); background: var(--white); padding:.75rem .8rem;
  font-family: var(--f-body); font-size:.95rem; color: var(--ink);
}
form.rfq textarea{ min-height:120px; resize:vertical; }
form.rfq input:focus, form.rfq select:focus, form.rfq textarea:focus{ outline:2px solid var(--red); outline-offset:1px; }
.hp{ position:absolute; left:-9999px; }

/* ---------- Sister-company strip ---------- */
.sister{ border-top:1px solid var(--paper-dim); background: var(--white); }
.sister .wrap{ display:flex; align-items:center; justify-content:space-between; padding:2.2rem var(--edge); gap:2rem; flex-wrap:wrap; }
.sister .txt{ font-family: var(--f-body); color: var(--ink-soft); max-width:52ch; }
.sister .txt b{ color: var(--ink); }

/* ---------- Footer ---------- */
footer.site{ background: var(--ink); color: var(--steel-soft); }
footer.site .wrap{ padding:3.2rem var(--edge) 2.2rem; }
.foot-grid{ display:grid; grid-template-columns: 1.5fr 1fr 1.2fr; gap:2rem; padding-bottom:2.4rem; }
.foot-grid img{ height:40px; margin-bottom:1rem; }
.foot-grid p{ font-family: var(--f-body); font-size:.87rem; line-height:1.6; max-width:36ch; }
.foot-grid h4{ font-family: var(--f-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color: var(--paper-dim); margin-bottom:1rem; }
.foot-grid li{ margin-bottom:.55rem; font-size:.87rem; }
.foot-grid a{ border-bottom:1px solid transparent; }
.foot-grid a:hover{ color: var(--white); border-color: var(--steel); }
.foot-bottom{
  border-top:1px solid var(--ink-soft); padding-top:1.4rem;
  display:flex; justify-content:space-between; font-family: var(--f-mono); font-size:.7rem; color: var(--steel);
  flex-wrap:wrap; gap:.6rem;
}

/* ---------- Reveal ---------- */
.reveal.pre{ opacity:0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.reveal.pre.is-visible{ opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media (max-width: 880px){
  nav.main{
    position:fixed; inset:64px 0 0 0; background: var(--white);
    flex-direction:column; align-items:flex-start; padding:1.6rem var(--edge);
    gap:1.3rem; transform: translateX(100%); transition: transform .2s ease; overflow-y:auto;
  }
  nav.main.open{ transform: translateX(0); }
  .nav-toggle{ display:block; }
  .topbar-contacts{ display:none; }
  .stat-strip ul{ grid-template-columns: 1fr 1fr; }
  .stat-strip li{ border-left:none; border-top:1px solid var(--paper-dim); }
  .cat-grid{ grid-template-columns: 1fr; }
  .split{ grid-template-columns: 1fr; gap:1.8rem; }
  .mv-grid{ grid-template-columns: 1fr; }
  .prod-list{ grid-template-columns: 1fr; }
  .loc-grid{ grid-template-columns: 1fr; }
  .foot-grid{ grid-template-columns: 1fr 1fr; }
  form.rfq .row2{ grid-template-columns: 1fr; }
}