@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700&display=swap');

:root{
  --red: #A51C30;
  --red-dark: #8B1728;
  --red-dim: rgba(165,28,48,0.08);
  --grey-bg: #E8E8E8;
  --grey-light: #F4F4F4;
  --grey-mid: #C7C7C7;
  --grey-text: #666;
  --dark: #232323;
  --white: #FFFFFF;
  --font: 'Montserrat', sans-serif;
  --container: 1180px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--white);
  color: var(--dark);
  font-family: var(--font);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img{ display:block; max-width:100%; }
a{ color: inherit; text-decoration: none; }

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

h1,h2,h3,h4{
  font-family: var(--font);
  font-weight: 800;
  line-height: 1.15;
  margin: 0;
  letter-spacing: -0.01em;
}
p{ margin: 0 0 1em 0; color: var(--grey-text); }
p:last-child{ margin-bottom: 0; }

.eyebrow{
  font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--red); display:flex; align-items:center; gap: 12px; margin-bottom: 22px;
}
.eyebrow::before{ content:""; width: 30px; height: 3px; background: var(--red); display:inline-block; }

::selection{ background: var(--red); color: var(--white); }

/* ---------- header ---------- */
header.site{
  position: sticky; top:0; z-index: 50;
  background: var(--white);
  border-bottom: 1px solid rgba(0,0,0,0.07);
}
header.site .bar{
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px 32px; max-width: var(--container); margin: 0 auto;
}
.logo{ display:flex; align-items:center; gap: 12px; }
.logo-img{ height: 34px; width: auto; display:block; }
.logo-text{ font-size: 22px; font-weight: 900; letter-spacing: 0.06em; }
.logo-text .ev{ color: var(--dark); }
.logo-text .a{ color: var(--red); }
.logo-text .dia{ color: var(--dark); }
.logo .baseline{ display:block; font-size: 9px; font-weight: 500; letter-spacing: 0.16em; color: var(--grey-text); text-transform: uppercase; }

.lang-switch{ display:flex; align-items:center; gap: 4px; margin-left: 6px; padding-left: 18px; border-left: 1px solid var(--grey-mid); }
.lang-switch a{
  font-size: 11px; font-weight: 800; letter-spacing: 0.04em; color: var(--grey-text);
  padding: 3px 7px; border: 1px solid transparent;
}
.lang-switch a:hover{ color: var(--red); }
.lang-switch a.active{ color: var(--white); background: var(--red); }
nav.main .lang-switch a::after{ display:none; content:none; }
@media (max-width: 1040px){
  .lang-switch{ border-left:none; padding-left:0; margin-left:0; margin-top: 14px; }
}

nav.main{ display:flex; align-items:center; gap: 22px; }
nav.main a{
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--dark); position: relative; padding: 4px 0; transition: color .25s;
  white-space: nowrap;
}
nav.main a::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:3px;
  background: var(--red); width:0; transition: width .25s;
}
nav.main a:hover{ color: var(--red); }
nav.main a:hover::after, nav.main a.active::after{ width:100%; }
nav.main a.active{ color: var(--red); }

.header-cta{
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--white); background: var(--red); padding: 13px 24px; white-space: nowrap;
  transition: background .25s;
}
.header-cta:hover{ background: var(--red-dark); }

.nav-toggle{ display:none; }
@media (max-width: 1040px){
  nav.main{
    position: fixed; inset: 68px 0 0 0; background: var(--white);
    flex-direction: column; align-items: flex-start; padding: 30px 32px; gap: 22px;
    transform: translateX(100%); transition: transform .3s ease; border-top: 1px solid var(--grey-bg);
  }
  nav.main.open{ transform: translateX(0); }
  nav.main a{ font-size: 16px; }
  .header-cta{ display:none; }
  .nav-toggle{
    display:block; background:none; border:none; width:26px; height:18px; position:relative; cursor:pointer;
  }
  .nav-toggle span{ position:absolute; left:0; right:0; height:2px; background:var(--dark); transition: all .25s ease; }
  .nav-toggle span:nth-child(1){ top:0; } .nav-toggle span:nth-child(2){ top:8px; } .nav-toggle span:nth-child(3){ top:16px; }
  .nav-toggle.open span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2){ opacity:0; }
  .nav-toggle.open span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }
}

/* breadcrumb */
.breadcrumb{ background: var(--grey-light); border-bottom: 1px solid var(--grey-bg); }
.breadcrumb .wrap{ display:flex; align-items:center; gap:10px; padding: 13px 32px; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; }
.breadcrumb a{ color: var(--grey-text); } .breadcrumb a:hover{ color: var(--red); }
.breadcrumb .sep{ color: var(--grey-mid); } .breadcrumb .current{ color: var(--red); font-weight:700; }

/* ---------- hero ---------- */
.hero{ padding: 64px 0 76px; background: var(--white); }
.hero-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items:center; }
.hero h1{ font-size: clamp(32px,4.4vw,52px); color: var(--dark); }
.hero h1 em{ font-style: normal; color: var(--red); }
.hero .lede{ margin-top: 22px; font-size: 16.5px; max-width: 48ch; }
.hero-ctas{ display:flex; gap:16px; margin-top: 34px; flex-wrap:wrap; }
.hero-media{ position:relative; }
.hero-media img{ width:100%; height: 380px; object-fit: cover; }
.hero-media::before{ content:""; position:absolute; top:14px; left:14px; right:-14px; bottom:-14px; background: var(--red); z-index:-1; }
@media (max-width: 860px){ .hero-grid{ grid-template-columns: 1fr; } .hero-media{ order:-1; } .hero-media img{ height:260px; } }

.btn{
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 15px 26px; display:inline-block; transition: all .25s; border: 2px solid transparent;
}
.btn-primary{ background: var(--red); color: var(--white); }
.btn-primary:hover{ background: var(--red-dark); }
.btn-ghost{ color: var(--dark); border-color: var(--dark); }
.btn-ghost:hover{ border-color: var(--red); color: var(--red); }

/* ---------- stats band ---------- */
.stats{ background: var(--dark); }
.stats .wrap{ padding:0; display:grid; grid-template-columns: repeat(4,1fr); }
.stat{ padding: 36px 24px; border-left: 1px solid rgba(255,255,255,0.12); text-align:center; }
.stat:first-child{ border-left:none; }
.stat .num{ font-size: 34px; font-weight: 900; color: var(--red); }
.stat .label{ font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.75); margin-top: 8px; }
@media (max-width: 760px){ .stats .wrap{ grid-template-columns: repeat(2,1fr); } .stat{ padding:24px 16px; } .stat:nth-child(2n+1){ border-left:none; } }

/* ---------- section header banner (brand block) ---------- */
.band-title{ background: var(--red); padding: 18px 0; }
.band-title .wrap{ display:flex; align-items:center; justify-content:space-between; }
.band-title .tag{ color: var(--white); font-weight: 800; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; }
.band-title .tag em{ font-style: italic; opacity: .85; }
.band-title .logo-text .ev, .band-title .logo-text .dia{ color: var(--white); }
.band-sub{ background: var(--grey-bg); padding: 12px 0; }
.band-sub .wrap{ font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dark); }

/* generic section */
section{ padding: 88px 0; }
.section-alt{ background: var(--grey-light); }
.section-head{ margin-bottom: 50px; }
.section-head h2{ font-size: clamp(26px,3vw,36px); color: var(--dark); max-width: 22ch; }
.section-head .desc{ margin-top: 12px; max-width: 60ch; }

/* volet cards (3 category panels) */
.volet-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 2px; background: var(--grey-bg); border: 1px solid var(--grey-bg); }
.volet-card{ background: var(--white); padding: 0; position:relative; overflow:hidden; transition: transform .25s; }
.volet-card:hover{ transform: translateY(-3px); }
.volet-card img{ width:100%; height: 190px; object-fit: cover; filter: grayscale(20%) contrast(1.05); }
.volet-card .body{ padding: 28px 26px 32px; }
.volet-card .n{ font-size: 11px; font-weight: 800; color: var(--red); letter-spacing: 0.14em; text-transform: uppercase; }
.volet-card h3{ font-size: 20px; margin-top: 10px; color: var(--dark); }
.volet-card p{ font-size: 14px; margin-top: 10px; }
.volet-card .go{ display:inline-block; margin-top: 16px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); }
.volet-card .go::after{ content:" →"; }
@media (max-width: 860px){ .volet-grid{ grid-template-columns: 1fr; } }

/* card grid (atouts / features) */
.card-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--grey-bg); border: 1px solid var(--grey-bg); }
.card{ background: var(--white); padding: 32px 30px; }
.card .tag{ font-size: 10.5px; font-weight: 800; color: var(--red); text-transform: uppercase; letter-spacing: 0.14em; }
.card h3{ font-size: 19px; margin-top: 8px; color: var(--dark); }
.card p{ font-size: 14px; margin-top: 10px; }
@media (max-width: 760px){ .card-grid{ grid-template-columns: 1fr; } }

/* product grid (used on volet pages) */
.profile-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--grey-bg); border: 1px solid var(--grey-bg); }
.profile-card{ background: var(--white); padding: 30px 26px; }
.profile-card .n{ font-size: 10.5px; font-weight: 800; color: var(--red); text-transform: uppercase; letter-spacing: 0.12em; }
.profile-card h3{ font-size: 18px; margin-top: 10px; color: var(--dark); }
.profile-card p{ font-size: 14px; margin-top: 10px; }
.profile-card ul{ margin: 16px 0 0; padding:0; list-style:none; font-size: 12.5px; color: var(--grey-text); }
.profile-card ul li{ padding: 6px 0; border-top: 1px solid var(--grey-bg); }
.profile-card ul li:first-child{ border-top:none; }
@media (max-width: 860px){ .profile-grid{ grid-template-columns: 1fr; } }

/* specialization list */
.spec-list{ list-style:none; margin:0; padding:0; }
.spec-list li{
  font-size: 15px; color: var(--dark); padding: 16px 0; border-bottom: 1px solid var(--grey-bg);
  display:flex; justify-content:space-between; align-items:center;
}
.spec-list li:first-child{ border-top: 1px solid var(--grey-bg); }
.spec-list li .n{ font-size: 11.5px; color: var(--red); font-weight: 800; letter-spacing:.1em; }

/* media band */
.media-band{ position:relative; height: 380px; overflow:hidden; }
.media-band img{ width:100%; height:100%; object-fit:cover; filter: grayscale(20%) contrast(1.05); }
.media-band::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(35,35,35,0) 40%, rgba(35,35,35,0.65) 100%); }
.media-caption{ position:absolute; left:32px; right:32px; bottom:26px; max-width: var(--container); margin:0 auto; color:#fff; }
.media-caption .eyebrow{ color: #E8899A; margin-bottom: 8px; }
.media-caption .eyebrow::before{ background:#E8899A; }
.media-caption p{ color:#E4E0DC; max-width: 50ch; }
@media (max-width: 760px){ .media-band{ height: 260px; } }

/* cta band */
.band{ text-align:center; background: var(--dark); }
.band .wrap{ padding: 80px 32px; display:flex; flex-direction:column; align-items:center; gap: 28px; }
.band h2{ color: var(--white); font-size: clamp(26px,3.4vw,38px); max-width: 22ch; }

/* footer */
footer.site{ background: var(--dark); padding: 56px 0 30px; color: #C9C9C9; }
footer.site .wrap{ display:flex; justify-content:space-between; gap: 40px; flex-wrap:wrap; }
footer.site .col h4{ font-size: 10.5px; text-transform:uppercase; letter-spacing:0.14em; color:#8C8C8C; margin-bottom:16px; font-weight:700; }
footer.site .col a, footer.site .col p{ font-size: 14px; margin:0 0 9px 0; color:#C9C9C9; }
footer.site .col a:hover{ color: var(--red); }
footer.site .bottom{ margin-top: 44px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.12); font-size: 11px; letter-spacing:0.05em; color:#8C8C8C; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

/* page hero (inner pages) */
.page-hero{ padding: 60px 0 40px; background: var(--grey-light); border-bottom: 3px solid var(--red); }
.page-hero h1{ font-size: clamp(28px,3.6vw,42px); max-width: 22ch; color: var(--dark); }
.page-hero .lede{ margin-top: 18px; max-width: 56ch; font-size: 16px; }

/* contact */
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.field{ margin-bottom: 20px; }
.field label{ display:block; font-size: 11px; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color: var(--grey-text); margin-bottom: 8px; }
.field input, .field textarea, .field select{
  width:100%; background: var(--grey-light); border: 1px solid var(--grey-mid); padding: 13px 15px;
  font-family: var(--font); font-size: 15px; color: var(--dark);
}
.field textarea{ resize:vertical; min-height: 120px; }
.field input:focus, .field textarea:focus{ border-color: var(--red); outline:none; }
.contact-info dt{ font-size: 10.5px; font-weight:700; text-transform:uppercase; color: var(--grey-text); margin-top: 22px; letter-spacing:.1em; }
.contact-info dt:first-child{ margin-top:0; }
.contact-info dd{ margin: 8px 0 0 0; font-size: 17px; color: var(--dark); }
@media (max-width: 860px){ .contact-grid{ grid-template-columns: 1fr; } }

.notice{ border: 1px solid var(--grey-mid); background: var(--grey-light); padding: 18px 22px; font-size: 14.5px; color: var(--grey-text); }
.notice.success{ border-color: var(--red); color: var(--dark); }
.notice.success::before{ content: "✓ "; color: var(--red); font-weight:700; }