/* ============================================
   Components — Petrel
   Nav, hero, buttons, cards, form, footer
   ============================================ */

/* ── NAV ─────────────────────────────── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:var(--white);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease;
}
nav.scrolled{border-bottom-color:var(--rule)}
.nav-inner{
  max-width:var(--max);margin:0 auto;padding:0 var(--px);
  height:68px;display:flex;align-items:center;justify-content:space-between;
}
.logo-mark{display:flex;align-items:center;gap:10px}
.logo-text{
  font-family:'Manrope',sans-serif;font-weight:700;font-size:15px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--navy);
}
.nav-links{display:flex;gap:40px;list-style:none}
.nav-links a{
  font-size:13px;font-weight:500;letter-spacing:.03em;color:var(--navy);
  opacity:.7;transition:opacity .2s;
}
.nav-links a:hover{opacity:1}
.nav-cta{
  font-size:13px;font-weight:600;letter-spacing:.04em;
  color:var(--blue);padding:8px 20px;border:1px solid var(--blue);
  transition:background .2s,color .2s;
}
.nav-cta:hover{background:var(--blue);color:var(--white)}

/* ── HAMBURGER + MOBILE MENU ─────────── */
.hamburger{
  display:none;background:none;border:none;cursor:pointer;
  padding:4px;gap:5px;flex-direction:column;
}
@media(max-width:767px){
  .hamburger{display:flex}
  .nav-links,.nav-cta{display:none}
  .nav-links.open{
    display:flex;flex-direction:column;gap:0;
    position:fixed;top:68px;left:0;right:0;bottom:0;
    background:var(--white);padding:32px var(--px);
    border-top:1px solid var(--rule);
    z-index:99;
  }
  .nav-links.open li a{
    display:block;padding:18px 0;font-size:20px;font-weight:600;
    border-bottom:1px solid var(--rule);opacity:1;
  }
}
.hamburger span{
  display:block;width:22px;height:1.5px;background:var(--navy);
  transition:transform .3s,opacity .3s;transform-origin:center;
}
.hamburger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ── HERO COMPONENTS ─────────────────── */
.hero-tagline{
  font-family:'Manrope',sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--blue);
  margin-bottom:28px;display:flex;align-items:center;gap:12px;
}
.hero-tagline::before{
  content:'';display:block;width:32px;height:1px;background:var(--blue);
}
.hero-h1{
  font-family:'Manrope',sans-serif;
  font-size:clamp(44px,7vw,84px);
  font-weight:800;line-height:1.04;letter-spacing:-.025em;
  color:var(--navy);max-width:780px;margin-bottom:30px;
}
.hero-body{
  font-size:clamp(16px,1.8vw,19px);line-height:1.6;
  color:var(--slate);max-width:540px;margin-bottom:48px;
}
.hero-actions{display:flex;align-items:center;gap:32px;flex-wrap:wrap}
.hero-stat span{
  display:block;font-family:'Manrope',sans-serif;
  font-size:10px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--slate);margin-bottom:4px;
}
.hero-stat strong{
  font-family:'Manrope',sans-serif;font-size:20px;font-weight:700;color:var(--navy);
}

/* Hero capability card */
.hero-card{
  background:var(--bg);
  border:1px solid var(--rule);
  border-top:3px solid var(--blue);
  padding:36px;
  position:relative;
}
.hero-card-label{
  font-family:'Manrope',sans-serif;
  font-size:10px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--blue);margin-bottom:28px;
  display:flex;align-items:center;gap:10px;
}
.hero-card-label::after{
  content:'';flex:1;height:1px;background:var(--rule);
}
.hero-card-row{
  display:flex;justify-content:space-between;align-items:flex-start;
  padding:18px 0;border-bottom:1px solid var(--rule);
}
.hero-card-row:last-child{border-bottom:none;padding-bottom:0}
.hero-card-row:first-of-type{padding-top:0}
.hcr-label{
  font-size:12px;font-weight:500;letter-spacing:.04em;
  color:var(--slate);text-transform:uppercase;
  margin-bottom:4px;
}
.hcr-value{
  font-family:'Manrope',sans-serif;
  font-size:15px;font-weight:700;color:var(--navy);
}
.hcr-tag{
  font-size:11px;font-weight:600;letter-spacing:.06em;
  padding:4px 10px;
  background:var(--white);border:1px solid var(--rule);
  color:var(--slate);
}
.hcr-tag.active{
  background:var(--blue);border-color:var(--blue);
  color:var(--white);
}
.hero-card-arc{
  position:absolute;bottom:-1px;right:-1px;
  opacity:.18;pointer-events:none;
}

/* Hero secondary link */
.hero-link{
  font-size:14px;font-weight:500;color:var(--slate);
  display:flex;align-items:center;gap:8px;
  transition:color .2s;
}
.hero-link:hover{color:var(--navy)}
.hero-link svg{transition:transform .2s}
.hero-link:hover svg{transform:translateX(4px)}

/* ── BUTTONS ─────────────────────────── */
.btn-primary{
  display:inline-block;
  padding:15px 36px;
  background:var(--navy);color:var(--white);
  font-family:'Manrope',sans-serif;font-weight:600;
  font-size:13px;letter-spacing:.07em;text-transform:uppercase;
  transition:background .2s;
}
.btn-primary:hover{background:var(--blue)}

.link-arrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:14px;font-weight:600;color:var(--blue);
  letter-spacing:.02em;transition:gap .2s;
}
.link-arrow:hover{gap:14px}
.link-arrow svg{transition:transform .2s}

/* ── SERVICES ────────────────────────── */
.service-col h3{
  font-family:'Manrope',sans-serif;font-size:18px;font-weight:700;
  color:var(--navy);margin-bottom:24px;padding-bottom:18px;
  border-bottom:2px solid var(--navy);
}
.service-col ul{list-style:none}
.service-col li{
  font-size:15px;color:var(--slate);
  padding:10px 0;border-bottom:1px solid var(--rule);line-height:1.4;
}
.service-col li:last-child{border-bottom:none}

/* ── APPROACH ────────────────────────── */
.approach-statement{
  font-family:'Manrope',sans-serif;
  font-size:clamp(30px,4.5vw,54px);
  font-weight:800;line-height:1.1;letter-spacing:-.02em;
  color:var(--white);
}
.approach-statement em{
  font-style:normal;color:var(--blue);
}
.approach-body p{
  font-size:clamp(15px,1.5vw,17px);
  color:rgba(255,255,255,.65);line-height:1.7;
  margin-bottom:20px;
}
.approach-body p:last-child{margin-bottom:0}
.approach-divider{
  width:40px;height:2px;background:var(--blue);margin:28px 0;
}

/* ── PRODUCT CARDS ───────────────────── */
.product-card{
  background:var(--bg);padding:clamp(28px,4vw,48px);
  border-top:3px solid var(--blue);
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
}
.product-card.prokonnekt{border-top-color:#064F1E}
.product-card-label{
  font-family:'Manrope',sans-serif;font-size:10px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--blue);
  margin-bottom:18px;
}
.product-card.prokonnekt .product-card-label{color:#064F1E}
.product-card-body{
  font-size:15px;color:var(--slate);line-height:1.7;
  margin-bottom:20px;flex:1;
}
.product-features{
  display:flex;flex-wrap:wrap;gap:6px;margin:0 0 28px;
}
.product-tag{
  font-size:11px;font-weight:500;letter-spacing:.04em;
  padding:4px 10px;
  background:var(--white);border:1px solid var(--rule);color:var(--slate);
}
.product-card-arc{
  position:absolute;bottom:0;right:0;opacity:.1;pointer-events:none;
}

/* ── NOVUS BLOCK (legacy) ────────────── */
.novus-label{
  display:block;
  font-family:'Manrope',sans-serif;font-size:10px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--blue);
  margin-bottom:12px;
}
.novus-wordmark{
  font-family:'Manrope',sans-serif;font-size:clamp(22px,3vw,30px);
  font-weight:800;letter-spacing:.06em;color:var(--navy);
  margin-bottom:8px;
}
.novus-sub{
  font-size:13px;color:var(--slate);
}
.novus-body p{
  font-size:16px;color:var(--slate);line-height:1.7;margin-bottom:16px;
}
.novus-body p:last-child{margin-bottom:0}
.novus-features{
  display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 32px;
}
.novus-tag{
  font-size:12px;font-weight:500;letter-spacing:.04em;
  padding:5px 12px;
  background:var(--white);border:1px solid var(--rule);
  color:var(--slate);
}

/* ── EXPERIENCE ──────────────────────── */
.exp-h2{
  font-family:'Manrope',sans-serif;
  font-size:clamp(26px,3.5vw,42px);
  font-weight:700;line-height:1.15;letter-spacing:-.015em;color:var(--navy);
}
.exp-note{font-size:15px;color:var(--slate);max-width:340px}
.exp-item{
  padding:22px 0;border-top:1px solid var(--rule);
  font-size:15px;color:var(--navy);font-weight:500;
  position:relative;padding-right:16px;
}
.exp-item::before{
  content:'';display:block;
  width:18px;height:1px;background:var(--blue);
  margin-bottom:10px;
}

/* ── CONTACT ─────────────────────────── */
.contact-h2{
  font-family:'Manrope',sans-serif;
  font-size:clamp(30px,4vw,52px);
  font-weight:800;letter-spacing:-.02em;line-height:1.1;
  color:var(--navy);margin-bottom:32px;
}
.contact-detail{margin-bottom:12px}
.contact-detail span{
  display:block;font-size:11px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--slate);margin-bottom:4px;
}
.contact-detail a,.contact-detail p{
  font-size:17px;font-weight:500;color:var(--navy);
}
.contact-detail a:hover{color:var(--blue)}
.contact-form-note{
  font-size:14px;color:var(--slate);margin-top:32px;
  padding-top:24px;border-top:1px solid var(--rule);
}

/* Form */
.form-group{margin-bottom:20px}
label{
  display:block;font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--slate);margin-bottom:8px;
}
input,textarea{
  width:100%;padding:14px 16px;
  font-family:'Inter',sans-serif;font-size:16px;
  color:var(--navy);background:var(--white);
  border:1px solid var(--rule);border-radius:0;outline:none;
  transition:border-color .2s;
  -webkit-appearance:none;
}
input::placeholder,textarea::placeholder{color:var(--rule);font-weight:400}
input:focus,textarea:focus{border-color:var(--blue)}
textarea{resize:vertical;min-height:130px}
.btn-form{
  width:100%;padding:15px;
  background:var(--navy);color:var(--white);border:none;cursor:pointer;
  font-family:'Manrope',sans-serif;font-weight:700;font-size:13px;
  letter-spacing:.1em;text-transform:uppercase;
  transition:background .2s;
}
.btn-form:hover{background:var(--blue)}

/* ── FOOTER ──────────────────────────── */
footer{
  border-top:1px solid var(--rule);
  padding:40px 0;
}
.footer-brand p{
  font-size:11px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--navy);margin-bottom:4px;
}
.footer-brand span{font-size:12px;color:var(--slate)}
.footer-right{font-size:13px;color:var(--slate)}
.footer-right a{color:var(--slate);transition:color .2s}
.footer-right a:hover{color:var(--navy)}