/* ============================================================
   PLURION GmbH — Website Stylesheet
   Palette: Navy #0A1D37 / Blue #14375F / Green #39B54A / Teal #00A99D
   Type: Montserrat (display+body) / JetBrains Mono (utility/data)
   ============================================================ */

:root {
  --navy: #0A1D37;
  --navy-deep: #061220;
  --blue: #14375F;
  --green: #39B54A;
  --teal: #00A99D;
  --grey: #5A6472;
  --grey-light: #8A96A8;
  --paper: #F5F6F7;
  --white: #FFFFFF;
  --line: rgba(10,29,55,0.10);
  --line-dark: rgba(255,255,255,0.12);
  --maxw: 1180px;
  --radius: 6px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Montserrat', sans-serif;
  color: var(--navy);
  background: var(--paper);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width:100%; display:block; }
a { color: inherit; text-decoration:none; }
.mono { font-family: 'JetBrains Mono', monospace; letter-spacing: 0.05em; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration:0.01ms !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

/* Focus visibility for keyboard users */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--green); outline-offset: 3px;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
@media (min-width: 640px) { .wrap { padding: 0 32px; } }

/* ---------------- Header / Nav ---------------- */
header.site-header {
  position: sticky; top:0; z-index:50;
  background: var(--navy); border-bottom: 1px solid var(--line-dark);
}
.nav-row { display:flex; align-items:center; justify-content:space-between; height:72px; }
.nav-row .logo-link img { height: 30px; }
nav.main-nav { display:none; gap: 30px; align-items:center; }
nav.main-nav a {
  font-size: 13.5px; color: #E7ECF1; font-weight:500; letter-spacing:0.02em;
  padding: 8px 0; border-bottom: 2px solid transparent; transition: border-color 0.2s, color 0.2s;
}
nav.main-nav a:hover, nav.main-nav a.active { color: #fff; border-color: var(--green); }
.nav-cta {
  display:none; background: var(--green); color:#062012 !important; font-weight:700;
  padding: 10px 20px; border-radius: 4px; font-size:13px; letter-spacing:0.02em;
}
.nav-cta:hover { background:#4bc95c; }
.nav-right { display:flex; align-items:center; gap:18px; }

.lang-switch { display:none; gap:8px; font-family:'JetBrains Mono',monospace; font-size:12px; }
.lang-switch a { color: var(--grey-light); padding:4px 2px; }
.lang-switch a.active { color: var(--green); font-weight:700; }
.lang-switch a:hover { color:#fff; }
#mobileMenu .lang-switch { display:flex; gap:14px; margin-top:24px; font-size:14px; }

.hamburger {
  display:flex; flex-direction:column; gap:5px; width:30px; height:22px; justify-content:center;
  background:none; border:none; cursor:pointer; z-index:60;
}
.hamburger span { display:block; height:2px; background:#fff; border-radius:1px; transition: transform 0.25s, opacity 0.25s; }
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

#mobileMenu {
  position: fixed; inset: 72px 0 0 0; background: var(--navy-deep); z-index:45;
  transform: translateX(100%); transition: transform 0.3s ease; overflow-y:auto;
}
#mobileMenu.open { transform: translateX(0); }
#mobileMenu .wrap { padding-top: 28px; display:flex; flex-direction:column; gap: 4px; }
#mobileMenu a {
  font-size: 20px; font-weight:600; color:#fff; padding: 16px 0; border-bottom: 1px solid var(--line-dark);
}
#mobileMenu .mm-cta {
  margin-top: 24px; background: var(--green); color:#062012; text-align:center; padding:16px;
  border-radius: 4px; font-weight:700;
}
#mobileMenu .mm-contact { margin-top: 30px; font-size:13.5px; color: var(--grey-light); line-height:2; }
#mobileMenu .mm-contact a { color: var(--teal); }

@media (min-width: 900px) {
  nav.main-nav { display:flex; }
  .nav-cta { display:inline-block; }
  .nav-right .lang-switch { display:flex; }
  .hamburger { display:none; }
  #mobileMenu { display:none; }
}

/* ---------------- Buttons ---------------- */
.btn {
  display:inline-block; padding: 14px 28px; border-radius: 4px; font-weight:700; font-size:14px;
  letter-spacing:0.02em; transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.btn-primary { background: var(--green); color:#062012; }
.btn-primary:hover { background:#4bc95c; }
.btn-outline { border:1px solid var(--line-dark); color:#fff; }
.btn-outline:hover { border-color: var(--green); color: var(--green); }
.btn-outline-dark { border:1px solid rgba(10,29,55,0.25); color: var(--navy); }
.btn-outline-dark:hover { border-color: var(--navy); background: rgba(10,29,55,0.04); }

/* ---------------- Eyebrow / section heads ---------------- */
.eyebrow {
  font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:0.2em; text-transform:uppercase;
  color: var(--green); margin-bottom:14px; display:flex; align-items:center; gap:10px;
}
.eyebrow::before { content:''; width:20px; height:1px; background: var(--green); display:inline-block; }
.eyebrow.on-dark { color: var(--green); }

section { padding: 70px 0; }
@media (min-width:900px) { section { padding: 110px 0; } }

h1,h2,h3,h4 { font-weight:800; letter-spacing:-0.01em; line-height:1.1; }
h2 { font-size: clamp(28px, 4vw, 40px); margin-bottom: 18px; }
h3 { font-size: 19px; margin-bottom: 8px; }
p { color: var(--grey); }
.section-sub { max-width: 60ch; color: var(--grey); font-size:15.5px; line-height:1.7; margin-bottom: 40px; }

/* ---------------- Hero (dark) ---------------- */
.hero-dark {
  background:
    radial-gradient(ellipse 900px 600px at 85% -10%, rgba(0,169,157,0.14), transparent 60%),
    radial-gradient(ellipse 700px 500px at -10% 110%, rgba(57,181,74,0.10), transparent 60%),
    var(--navy-deep);
  color:#fff; padding: 70px 0 60px;
}
@media (min-width:900px) { .hero-dark { padding: 110px 0 90px; } }
.hero-dark h1 { font-size: clamp(34px, 5.6vw, 62px); max-width: 18ch; color:#fff; }
.hero-dark h1 em { color: var(--green); font-style:normal; }
.hero-dark .sub { color: var(--grey-light); font-size:16px; max-width: 48ch; margin-top:22px; line-height:1.7; }
.hero-dark .cta-row { display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; }
.breadcrumb { font-family:'JetBrains Mono',monospace; font-size:11.5px; color: var(--grey-light); margin-bottom:20px; letter-spacing:0.05em; }
.breadcrumb a { color: var(--teal); }

/* ---------------- Flow strip (home) ---------------- */
.flow-strip { display:flex; gap:24px; flex-wrap:wrap; margin-top:40px; font-family:'JetBrains Mono',monospace; font-size:12.5px; color:var(--grey-light); }
.flow-strip span.on { color: var(--teal); }

/* ---------------- Stat row ---------------- */
.stat-grid { display:grid; grid-template-columns: repeat(2,1fr); gap: 30px 24px; margin-top: 10px; }
@media (min-width:640px) { .stat-grid { grid-template-columns: repeat(4,1fr); } }
.stat-grid b { display:block; font-family:'JetBrains Mono',monospace; font-size: 30px; color: var(--green); font-weight:600; }
.stat-grid.on-light b { color: var(--navy); }
.stat-grid span { font-size:11.5px; color: var(--grey-light); text-transform:uppercase; letter-spacing:0.06em; }
.stat-grid.on-light span { color: var(--grey); }

/* ---------------- Cards / grids ---------------- */
.grid-2 { display:grid; grid-template-columns:1fr; gap: 24px; }
@media (min-width:760px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.grid-3 { display:grid; grid-template-columns:1fr; gap: 24px; }
@media (min-width:640px) { .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (min-width:1000px) { .grid-3 { grid-template-columns: 1fr 1fr 1fr; } }

.card {
  background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding: 30px;
}
.card .icon-badge {
  width:44px; height:44px; border-radius:50%; background: var(--navy); color: var(--green);
  display:flex; align-items:center; justify-content:center; font-family:'JetBrains Mono',monospace;
  font-size:12px; font-weight:700; margin-bottom:18px;
}
.card p { font-size:14px; }

.photo-card { border-radius: var(--radius); overflow:hidden; border:1px solid var(--line); background:#fff; }
.photo-card .ph { position:relative; aspect-ratio: 4/3; overflow:hidden; }
.photo-card .ph img { width:100%; height:100%; object-fit:cover; }
.photo-card .ph .tag {
  position:absolute; bottom:0; left:0; right:0; padding:10px 14px;
  background: linear-gradient(0deg, rgba(6,18,32,0.88), transparent);
  font-family:'JetBrains Mono',monospace; font-size:10.5px; color:#fff; letter-spacing:0.03em;
}
.photo-card .cap { padding: 14px 16px; }
.photo-card .cap b { font-size:14px; display:block; margin-bottom:2px; }
.photo-card .cap span { font-size:12px; color:var(--grey); font-style:italic; }

/* ---------------- Section variants ---------------- */
.section-dark { background: var(--navy); color:#fff; }
.section-dark p, .section-dark .section-sub { color: var(--grey-light); }
.section-navy-deep { background: var(--navy-deep); color:#fff; }
.section-alt { background: #EEF0F2; }

/* Pills (brand logos as text) */
.pill-wrap { display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }
.pill {
  border:1px solid var(--line-dark); border-radius:4px; padding:10px 18px; font-size:13px; font-weight:600;
  font-family:'JetBrains Mono',monospace; color:#fff; background: rgba(255,255,255,0.03);
}
.pill.on-light { border-color: var(--line); color: var(--navy); background:#fff; }

/* Leadership cards */
.leader-card {
  border:1px solid var(--line); border-radius: var(--radius); padding: 30px; background:#fff;
}
.leader-card .avatar {
  width:48px; height:48px; border-radius:50%; background: var(--navy); color: var(--green);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px;
  font-family:'JetBrains Mono',monospace; margin-bottom:16px;
}
.leader-card .role { font-size:12.5px; color: var(--teal); font-style:italic; margin-bottom:14px; }
.leader-card ul { list-style:none; display:flex; flex-direction:column; gap:9px; }
.leader-card li { font-size:13.5px; color: var(--grey); line-height:1.5; padding-left:15px; position:relative; }
.leader-card li::before { content:''; position:absolute; left:0; top:7px; width:5px; height:5px; background:var(--green); }

/* Quote / testimonial */
.quote-mark { font-size:70px; color: var(--green); font-weight:800; line-height:0.4; margin-bottom:8px; }
blockquote { font-size: clamp(18px,2vw,23px); line-height:1.5; font-style:italic; color:#fff; max-width:66ch; font-weight:400; }
.attribution { margin-top:26px; display:flex; align-items:center; gap:14px; }
.attribution .bar { width:30px; height:2px; background: var(--green); }
.attribution b { display:block; font-size:14px; color:#fff; }
.attribution span { font-size:12px; color: var(--grey-light); }

/* Reasons / why-us grid with dot */
.reason { display:flex; gap:16px; }
.reason .dot { width:12px; height:12px; border-radius:50%; background:var(--green); flex-shrink:0; margin-top:5px; }
.reason.teal .dot { background: var(--teal); }
.reason h4 { font-size:15.5px; margin-bottom:5px; }
.reason p { font-size:13.5px; }

/* ---------------- Forms ---------------- */
.form-field { margin-bottom: 20px; }
.form-field label { display:block; font-size:13px; font-weight:600; margin-bottom:7px; color: var(--navy); }
.form-field input, .form-field select, .form-field textarea {
  width:100%; padding: 13px 16px; border:1px solid var(--line); border-radius:4px; font-size:14.5px;
  font-family:'Montserrat',sans-serif; background:#fff; color: var(--navy);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline:none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(57,181,74,0.15);
}
.form-row { display:grid; grid-template-columns:1fr; gap:0 20px; }
@media (min-width:640px) { .form-row.two { grid-template-columns:1fr 1fr; } }
.form-note { font-size:12px; color:var(--grey); margin-top:8px; }

/* ---------------- Footer ---------------- */
footer.site-footer { background: var(--navy-deep); color: var(--grey-light); padding: 60px 0 30px; }
.footer-grid { display:grid; grid-template-columns:1fr; gap:36px; }
@media (min-width:760px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer-grid img.logo { height:28px; margin-bottom:16px; }
.footer-grid h5 { font-size:12.5px; letter-spacing:0.1em; text-transform:uppercase; color:#fff; margin-bottom:16px; }
.footer-grid ul { list-style:none; display:flex; flex-direction:column; gap:10px; }
.footer-grid a { font-size:13.5px; color: var(--grey-light); transition: color 0.2s; }
.footer-grid a:hover { color: var(--green); }
.footer-bottom {
  border-top:1px solid var(--line-dark); margin-top: 44px; padding-top:22px;
  display:flex; flex-direction:column; gap:10px; font-size:11.5px; font-family:'JetBrains Mono',monospace;
}
@media (min-width:760px) { .footer-bottom { flex-direction:row; justify-content:space-between; } }

/* ---------------- Reveal on scroll ---------------- */
.reveal { opacity:0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in { opacity:1; transform: translateY(0); }

/* ---------------- Misc ---------------- */
.divider { height:1px; background: var(--line); margin: 50px 0; }
.divider.dark { background: var(--line-dark); }
.center { text-align:center; }
.mx-auto { margin-left:auto; margin-right:auto; }