/* Technip header — client-supplied design, integrated with WordPress's
   nav menu (Appearance > Menus > "Primary Menu") and Customizer logo. */
#tpxh, #tpxd {
  --blue:#EC2229; --blueLt:#FF5C00; --red:#EC2229; --redDk:#B81017;
  --ink:#0A1330; --text:#1F2937; --muted:#6B7280; --line:#E3E8F0;
}

#tpxh, #tpxh *, #tpxd, #tpxd * { box-sizing:border-box; }
#tpxh ul, #tpxd ul { list-style:none; margin:0; padding:0; }
#tpxh li, #tpxd li { margin:0; padding:0; }
#tpxh a, #tpxd a { text-decoration:none; color:inherit; }
#tpxh button, #tpxd button { font:inherit; color:inherit; background:none; border:0; margin:0; padding:0; cursor:pointer; }
#tpxh img, #tpxd img { display:block; max-width:100%; height:auto; }

#tpxh {
  font-family:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:16px; line-height:1.6; color:var(--text);
  position:relative; z-index:9000;
}
#tpxh.sticky { position:sticky; top:0; }

.tpxWrap { width:100%; max-width:1300px; margin:0 auto; padding:0 20px; }

/* ---------- top bar ---------- */
.tpxTop { background:linear-gradient(90deg,#0A1330,#EC2229 55%,#0A1330); color:#fff; font-size:13px; }
.tpxTop .tpxWrap { display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:42px; flex-wrap:wrap; }
.tpxTopL { display:flex; gap:22px; flex-wrap:wrap; }
.tpxTopL li { display:flex; align-items:center; gap:8px; }
.tpxTop a { color:rgba(255,255,255,.9); }
.tpxTop a:hover { color:#fff; }
.tpxTop svg { width:14px; height:14px; opacity:.75; flex:none; }
.tpxSoc { display:flex; gap:6px; }
.tpxSoc a { width:30px; height:30px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.22); border-radius:4px; background:rgba(255,255,255,.07); }
.tpxSoc a:hover { background:#EC2229; border-color:#EC2229; }
.tpxSoc svg { opacity:1; }
@media (max-width:991px){ .tpxTop { display:none; } }

/* ---------- main bar ---------- */
.tpxBar { background:#fff; border-bottom:1px solid #E3E8F0; }
#tpxh.stuck .tpxBar { box-shadow:0 8px 26px -18px rgba(10,19,48,.45); }
.tpxBar .tpxWrap { display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:84px; }
@media (max-width:991px){ .tpxBar .tpxWrap { min-height:66px; } }

.tpxLogo { flex:none; display:flex; align-items:center; }
.tpxLogo img { max-height:56px; width:auto; }
@media (max-width:991px){ .tpxLogo img { max-height:40px; } }

.tpxRight { flex:none; display:flex; align-items:center; gap:10px; }

/* ---------- desktop menu ---------- */
.tpxNav { display:none; }
@media (min-width:1200px){ .tpxNav { display:block; } }

.tpxMenu { display:flex; align-items:center; }
.tpxMenu > li { position:relative; }
.tpxMenu > li > a {
  display:flex; align-items:center; gap:6px; padding:12px 13px;
  font-size:15px; font-weight:500; color:#0A1330; white-space:nowrap;
  border-radius:4px; position:relative;
}
.tpxMenu > li > a:after {
  content:""; position:absolute; left:13px; right:13px; bottom:6px; height:2px;
  background:linear-gradient(90deg,#EC2229,#EC2229);
  transform:scaleX(0); transform-origin:left; transition:transform .3s ease;
}
.tpxMenu > li:hover > a { color:#EC2229; background:rgba(236,34,41,.05); }
.tpxMenu > li:hover > a:after, .tpxMenu > li.on > a:after { transform:scaleX(1); }
.tpxMenu > li.on > a { color:#EC2229; }

.tpxCar { width:9px; height:9px; flex:none; opacity:.55; transition:transform .3s ease; }
.tpxMenu > li:hover > a .tpxCar { transform:rotate(180deg); }

/* dropdowns — solid white, always readable */
.tpxMenu ul {
  position:absolute; top:100%; left:0; z-index:50;
  min-width:270px; max-width:340px; padding:6px;
  background:#fff; border:1px solid #E3E8F0; border-radius:10px;
  box-shadow:0 20px 50px -20px rgba(10,19,48,.3);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .2s ease, transform .24s ease, visibility .2s;
}
.tpxMenu li:hover > ul { opacity:1; visibility:visible; transform:translateY(0); }
.tpxMenu ul ul { top:-6px; left:100%; }
.tpxMenu ul li { position:relative; }
.tpxMenu ul li.flip > ul { left:auto; right:100%; }

/* A dropdown with a lot of items (Engineering, once every leaf page is
   listed) gets very tall as one long column, so it still reflows into 3
   columns - only this one menu ever has 9+ items, Services/Technology are
   untouched. */
.tpxMenu > li > ul:has(> li:nth-child(9)) {
  column-count:3; column-gap:6px; min-width:640px; max-width:760px;
}
.tpxMenu > li > ul:has(> li:nth-child(9)) > li { break-inside:avoid; }
@media (max-width:1400px){
  .tpxMenu > li > ul:has(> li:nth-child(9)) { column-count:2; min-width:480px; max-width:560px; }
}
.tpxMenu ul a {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 12px; font-size:14.5px; font-weight:500; line-height:1.45;
  color:#0A1330; border-radius:4px; min-height:20px;
}
.tpxMenu ul a:hover { background:rgba(236,34,41,.08); color:#EC2229; }

/* Popping a 3rd-level flyout sideways (Material of Constructions' 6 items)
   is what caused the overlap inside a 3-column dropdown - the trigger <li>
   sits mid-grid, so the flyout lands on the next column's items. Fix: don't
   pop it out as a hover flyout - list its children directly underneath it,
   always visible, in a clearly-grouped tinted panel. */
.tpxMenu > li > ul:has(> li:nth-child(9)) ul {
  position:static; top:auto; left:auto; right:auto; opacity:1; visibility:visible; transform:none;
  background:rgba(236,34,41,.045); border:0; border-left:2px solid rgba(236,34,41,.4);
  box-shadow:none; border-radius:0 6px 6px 0; padding:3px 0 3px 6px; margin:2px 0 4px 12px;
}
.tpxMenu > li > ul:has(> li:nth-child(9)) .tpxCar { display:none; }

/* Hierarchy is shown with indentation + colour only - never generated text
   inside the flex row (a "- " prefix pseudo-element there was competing with
   justify-content:space-between and throwing icon/text alignment off per
   item, which is what looked "merged"/misaligned in Drying System). */
.tpxMenu ul li:has(> ul) > a { color:#0A1330; font-weight:700; }
.tpxMenu ul ul a { color:#6B7280; font-size:13.5px; padding-left:22px; }
.tpxMenu ul ul a:hover { color:#EC2229; }
.tpxMenu ul .tpxCar { transform:rotate(-90deg); opacity:.45; }

/* ---------- button ---------- */
.tpxBtn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 22px; border-radius:4px;
  background:#EC2229 !important; border:1.5px solid #EC2229 !important;
  transition:background .25s ease, border-color .25s ease, transform .2s ease;
}
/* Isolated, high-specificity text styling so the generic "#tpxh a{color:inherit}"
   menu-link reset (which otherwise wins on specificity) never leaks into the
   button and turns its label the same colour as the nav text. */
#tpxh .tpxBtn, #tpxd .tpxBtn,
#tpxh .tpxBtn *, #tpxd .tpxBtn * {
  color:#fff !important;
  font-size:12.5px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; line-height:1;
}
.tpxBtn:hover { background:#B81017 !important; border-color:#B81017 !important; transform:translateY(-2px); }
.tpxBtn svg { width:14px; height:14px; }
.tpxCta { display:none; }
@media (min-width:600px){ .tpxCta { display:inline-flex; } }

/* ---------- burger ---------- */
.tpxBurger { width:46px; height:46px; flex:none; display:flex; align-items:center; justify-content:center; border:1px solid #E3E8F0; border-radius:4px; }
@media (min-width:1200px){ .tpxBurger { display:none; } }
.tpxBurger span { display:block; width:19px; height:2px; background:#EC2229; position:relative; }
.tpxBurger span:before, .tpxBurger span:after {
  content:""; position:absolute; left:0; width:19px; height:2px; background:#EC2229;
  transition:transform .3s ease, top .3s ease;
}
.tpxBurger span:before { top:-6px; }
.tpxBurger span:after { top:6px; }
.tpxBurger.x span { background:transparent; }
.tpxBurger.x span:before { top:0; transform:rotate(45deg); }
.tpxBurger.x span:after { top:0; transform:rotate(-45deg); }

/* ---------- mobile drawer ---------- */
#tpxd {
  position:fixed; top:0; left:0; right:0; bottom:0; z-index:99999;
  font-family:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:16px; color:#1F2937;
  visibility:hidden;
}
#tpxd.open { visibility:visible; }
.tpxVeil { position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(10,19,48,.6); opacity:0; transition:opacity .3s ease; }
#tpxd.open .tpxVeil { opacity:1; }
.tpxPanel {
  position:absolute; top:0; right:0; bottom:0; width:88%; max-width:400px;
  background:#fff; display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .35s ease;
  box-shadow:-18px 0 50px -30px rgba(10,19,48,.6);
}
#tpxd.open .tpxPanel { transform:translateX(0); }

.tpxPHead { flex:none; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; border-bottom:1px solid #E3E8F0; }
.tpxPHead img { max-height:38px; width:auto; }
.tpxClose { width:40px; height:40px; flex:none; display:flex; align-items:center; justify-content:center; font-size:26px; line-height:1; color:#EC2229; border:1px solid #E3E8F0; border-radius:4px; background:#F4F7FB; }
.tpxClose:hover { background:#EC2229; border-color:#EC2229; color:#fff; }

.tpxPBody { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:4px 0 20px; }

.tpxM li { border-bottom:1px solid #E3E8F0; position:relative; }
.tpxM a { display:block; padding:14px 60px 14px 18px; font-size:15px; font-weight:500; color:#0A1330; }
.tpxM ul { display:none; background:#F4F7FB; }
.tpxM ul.open { display:block; }
.tpxM ul a { padding-left:34px; font-weight:400; font-size:14.5px; color:#1F2937; }
.tpxM ul ul { background:#E9EEF6; }
.tpxM ul ul a { padding-left:50px; font-size:14px; }
.tpxM ul li:last-child { border-bottom:0; }

.tpxT { position:absolute; top:0; right:0; width:54px; height:51px; display:flex; align-items:center; justify-content:center; border-left:1px solid #E3E8F0; color:#6B7280; }
.tpxT svg { width:12px; height:12px; transition:transform .28s ease; }
.tpxT.open { color:#EC2229; }
.tpxT.open svg { transform:rotate(180deg); }

.tpxPFoot { flex:none; padding:16px 18px; border-top:1px solid #E3E8F0; background:#F4F7FB; }
.tpxPFoot .row { display:grid; gap:8px; margin-bottom:14px; font-size:14px; }
.tpxPFoot .row a { display:flex; align-items:center; gap:9px; color:#0A1330; }
.tpxPFoot .row svg { width:14px; height:14px; flex:none; color:#EC2229; }
.tpxPFoot .tpxBtn { display:flex; width:100%; }

body.tpxLock { overflow:hidden; }