
:root{--bg:#07101b;--bg2:#0c1726;--panel:rgba(255,255,255,.055);--line:rgba(255,255,255,.10);--text:#eef4fb;--muted:#b2c0d2;--blue:#2d72d8;--blue2:#6da8ff;--shadow:0 20px 55px rgba(0,0,0,.35);--radius:22px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Arial,sans-serif;background:linear-gradient(180deg,#07101b 0%,#0b1521 100%);color:var(--text);line-height:1.7}a{text-decoration:none;color:inherit}img{max-width:100%;display:block}.container{width:min(1260px,calc(100% - 32px));margin:0 auto}.topbar{background:#050d16;border-bottom:1px solid rgba(255,255,255,.07);font-size:.92rem}.topbar-inner{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:10px 0}.topbar a{color:#95bfff;font-weight:800}.site-header{position:sticky;top:0;z-index:1000;background:rgba(7,16,27,.96);border-bottom:1px solid rgba(255,255,255,.08);backdrop-filter:blur(12px)}.nav-wrap{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:4px 0 8px}.brand{display:inline-flex;align-items:center;max-width:min(96vw,1500px)}.brand img{height:120px;width:auto;object-fit:contain;filter:drop-shadow(0 6px 16px rgba(0,0,0,.35))}.main-nav{position:relative;width:100%}.main-nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.main-nav li{position:relative;padding-bottom:26px;margin-bottom:-26px}.main-nav>ul>li>a{display:inline-flex;align-items:center;padding:12px 14px;border-radius:14px;font-weight:800;color:#eef4fb}.main-nav>ul>li:hover>a,.main-nav>ul>li:focus-within>a{background:rgba(255,255,255,.06)}.main-nav li::after{content:'';position:absolute;left:0;right:0;top:100%;height:26px}.nav-cta{background:linear-gradient(135deg,var(--blue),var(--blue2));box-shadow:0 10px 26px rgba(45,114,216,.30)}.dropdown{position:absolute;top:calc(100% - 2px);left:0;min-width:310px;padding:10px;border:1px solid rgba(255,255,255,.10);border-radius:18px;background:rgba(9,18,29,.99);box-shadow:var(--shadow);backdrop-filter:blur(12px);opacity:0;visibility:hidden;transform:translateY(6px);pointer-events:none;transition:opacity .28s ease,transform .28s ease,visibility 0s linear .4s;z-index:1001}.has-dropdown:hover>.dropdown,.has-dropdown:focus-within>.dropdown{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;transition-delay:0s}.dropdown li{padding-bottom:0;margin-bottom:0}.dropdown li::after{display:none}.dropdown a{display:block;padding:12px 14px;border-radius:12px;color:var(--text)}.dropdown a:hover{background:rgba(255,255,255,.07)}.menu-toggle{display:none;background:transparent;color:white;border:1px solid rgba(255,255,255,.15);border-radius:14px;padding:10px 12px;font-size:1.15rem}.hero{min-height:760px;background-size:cover;background-position:center;display:grid;align-items:center}.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:34px;padding:70px 0}.eyebrow{margin:0 0 14px;letter-spacing:.18em;text-transform:uppercase;font-size:.83rem;color:#91bcff;font-weight:800}h1{font-size:clamp(2.8rem,4.3vw,5rem);line-height:1.02;margin:0 0 18px}h2{font-size:clamp(1.95rem,2.7vw,3rem);line-height:1.1}h2,h3,h4{margin:0 0 14px}p,li{color:var(--muted)}.hero-lead{font-size:1.11rem;max-width:780px}.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin:28px 0 20px}.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 22px;border-radius:14px;font-weight:800;transition:.25s ease}.btn:hover{transform:translateY(-1px)}.btn-primary{background:linear-gradient(135deg,var(--blue),var(--blue2));color:white;box-shadow:0 10px 26px rgba(45,114,216,.28)}.btn-secondary{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)}.mini-proof{display:flex;flex-wrap:wrap;gap:12px}.mini-proof span{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);border-radius:999px;padding:10px 14px;font-size:.95rem}.glass-card,.feature-card,.panel-card,.sector-card,.cta-box,.faq-card,.blog-card,.contact-banner,.sidebar-card,.tool-card,.map-card{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.10);border-radius:var(--radius);box-shadow:var(--shadow)}.glass-card,.panel-card,.cta-box,.sidebar-card,.tool-card,.map-card{padding:28px}.glass-card{align-self:end;backdrop-filter:blur(10px)}.section{padding:88px 0}.section-sm{padding:66px 0}.section-heading{margin-bottom:30px}.narrow{max-width:920px}.cards.three,.cards.four{display:grid;gap:24px}.cards.three{grid-template-columns:repeat(3,1fr)}.cards.four{grid-template-columns:repeat(4,1fr)}.feature-card,.sector-card,.faq-card,.blog-card{padding:28px}.feature-card a,.sector-card a,.faq-card a,.blog-card a,.text-link{color:#99c2ff;font-weight:800}.dark-section{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05)}.accent-section{background:linear-gradient(180deg,rgba(45,114,216,.10),rgba(45,114,216,.04));border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05)}.two-col{display:grid;grid-template-columns:1.08fr .92fr;gap:30px}.three-col{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.stats-strip{background:#07111d;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:26px 0}.stats-grid strong{display:block;font-size:1.85rem;color:white}.stats-grid span{color:var(--muted)}.check-list,.number-list,.basic-list{padding-left:20px}.check-list li,.number-list li,.basic-list li{margin:8px 0}.contact-banner{padding:32px;display:flex;justify-content:space-between;align-items:center;gap:24px}.page-hero{padding:84px 0 54px;border-bottom:1px solid rgba(255,255,255,.06);background:linear-gradient(180deg,rgba(4,11,22,.92),rgba(4,11,22,.74))}.page-hero.small{padding:66px 0 40px}.content-grid{display:grid;grid-template-columns:1fr 330px;gap:28px}.table-like{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}.table-like>div{padding:18px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.form-grid .full{grid-column:1/-1}label{display:block;font-weight:700;margin-bottom:8px}input,textarea,select{width:100%;padding:14px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:var(--text)}textarea{min-height:150px;resize:vertical}.calc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.calc-result{margin-top:18px;padding:18px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}.map-wrap{overflow:hidden;border-radius:18px;border:1px solid rgba(255,255,255,.1)}.map-wrap iframe{width:100%;height:420px;border:0}.site-footer{background:#050c15;border-top:1px solid rgba(255,255,255,.08);padding:54px 0 20px}.footer-grid{display:grid;grid-template-columns:1.2fr .7fr .7fr .8fr;gap:26px}.footer-grid ul{list-style:none;padding:0;margin:0}.footer-grid li{margin-bottom:10px}.footer-logo{height:120px;width:auto;object-fit:contain;margin-bottom:14px}.footer-bottom{padding-top:22px;color:var(--muted)}.note{font-size:.93rem;color:#b7c5d7}@media (max-width:1260px){.brand img{height:460px}}@media (max-width:1160px){.hero-grid,.cards.three,.cards.four,.two-col,.three-col,.footer-grid,.content-grid,.stats-grid,.form-grid,.table-like,.calc-grid{grid-template-columns:1fr}}@media (max-width:980px){.menu-toggle{display:inline-flex}.brand img{height:300px}.main-nav{display:none;position:absolute;top:calc(100% + 1px);left:0;right:0;background:rgba(7,16,27,.985);border-bottom:1px solid rgba(255,255,255,.08)}.main-nav.open{display:block}.main-nav ul{flex-direction:column;align-items:stretch;gap:0;padding:14px 16px 20px}.main-nav li{padding-bottom:0;margin-bottom:0}.main-nav li::after{display:none}.main-nav>ul>li>a{width:100%}.dropdown{position:static;min-width:100%;padding:6px 0 10px 14px;background:transparent;border:0;opacity:1;visibility:visible;transform:none;pointer-events:auto;box-shadow:none;display:none}.has-dropdown.open>.dropdown{display:block}}@media (max-width:640px){.container{width:min(100% - 24px,1260px)}.topbar-inner{flex-direction:column;align-items:flex-start}.hero{min-height:700px}.hero-grid{padding:56px 0;gap:24px}h1{font-size:2.35rem}.brand img{height:220px}.footer-logo{height:160px}}



/* v9 header and hero refinements */
.site-header{
  background:rgba(5,12,21,.68) !important;
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.topbar{display:none !important;}
.nav-wrap{
  flex-direction:row !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
  padding:8px 0 !important;
  min-height:64px;
}
.brand{
  max-width:none !important;
  align-items:center !important;
}
.brand img{
  display:none !important;
}
.brand::before{
  content:"UPSTREAM TUBULARS";
  display:block;
  font-weight:800;
  letter-spacing:.08em;
  font-size:1rem;
  color:rgba(255,255,255,.92);
  white-space:nowrap;
}
.main-nav{width:auto !important;}
.main-nav ul{
  gap:4px !important;
}
.main-nav li{
  padding-bottom:18px !important;
  margin-bottom:-18px !important;
}
.main-nav li::after{
  height:18px !important;
}
.main-nav > ul > li > a{
  padding:10px 12px !important;
  font-size:.94rem;
}
.nav-cta{
  padding:10px 14px !important;
}

.hero{
  min-height:760px !important;
  background-size:cover !important;
  background-position:center center !important;
}
.hero-grid{
  grid-template-columns:1.08fr .92fr !important;
  align-items:end !important;
  gap:34px !important;
  padding:110px 0 84px !important;
}
.hero-brand-panel{
  display:inline-block;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(255,255,255,.8);
  border-radius:24px;
  padding:16px 20px;
  box-shadow:0 22px 48px rgba(0,0,0,.28);
  margin:0 0 24px;
  max-width:min(760px,100%);
}
.hero-brand-panel img{
  width:100%;
  max-width:680px;
  height:auto;
  display:block;
}
.hero-copy-column h1,
.hero-copy-column .hero-lead{
  max-width:760px;
}
.hero-copy-column .eyebrow{
  color:#c7ddff !important;
}
.glass-card{
  background:rgba(7,16,27,.66) !important;
}
.site-footer .footer-logo{
  display:none !important;
}
.site-footer .footer-grid > div:first-child::before{
  content:"UPSTREAM TUBULARS";
  display:block;
  font-weight:800;
  letter-spacing:.08em;
  font-size:1.1rem;
  color:#fff;
  margin-bottom:14px;
}
@media (max-width:980px){
  .brand::before{
    font-size:.9rem;
  }
  .hero-grid{
    grid-template-columns:1fr !important;
    padding:92px 0 56px !important;
  }
  .hero-brand-panel{
    max-width:100%;
    padding:12px 14px;
    margin-bottom:18px;
  }
  .main-nav{
    width:100% !important;
  }
}


/* v11 overrides */
body{background:linear-gradient(180deg,#5f7d9d 0%, #4d6786 100%) !important;}
.site-header{background:rgba(46,66,92,.58) !important;}
.main-nav > ul > li > a{color:#f4f8fc !important;}
.hero{background-color:#5f7d9d !important;position:relative !important;}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg, rgba(57,80,107,.76), rgba(69,91,118,.50)) !important;pointer-events:none;z-index:0;}
.hero-grid{position:relative;z-index:2;}
.hero-copy-column{position:relative;z-index:3;}
.hero-brand-panel{position:relative !important;z-index:4 !important;background:transparent !important;border:none !important;box-shadow:none !important;padding:0 !important;max-width:min(860px,100%) !important;}
.hero-brand-panel img{position:relative !important;z-index:5 !important;display:block !important;max-width:760px !important;width:100% !important;height:auto !important;filter:drop-shadow(0 10px 18px rgba(0,0,0,.22));}
.hero-copy-column h1{font-size:clamp(1.7rem,2.2vw,2.65rem) !important;line-height:1.28 !important;font-weight:500 !important;letter-spacing:.01em !important;max-width:820px !important;}
.hero-copy-column .hero-lead{font-size:1.02rem !important;}
.hero-copy-column .eyebrow{font-size:.78rem !important;opacity:.95;}
.hero-copy-column .key-word{color:#6da8ff !important;font-weight:800 !important;}
.mini-proof a{display:inline-flex;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);border-radius:999px;padding:10px 14px;font-size:.95rem;color:#eef4fb;}
.mini-proof a:hover{background:rgba(255,255,255,.12);}
.glass-card{background:rgba(69,91,118,.40) !important;}
.dark-section{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03)) !important;}
.accent-section{background:linear-gradient(180deg,rgba(109,168,255,.18),rgba(109,168,255,.08)) !important;}
.feature-card,.sector-card,.faq-card,.blog-card,.panel-card,.sidebar-card,.tool-card,.map-card,.contact-banner{background:rgba(255,255,255,.085) !important;}
@media (max-width:980px){.hero-brand-panel img{max-width:100% !important;}.hero-copy-column h1{font-size:1.45rem !important;line-height:1.25 !important;}}


/* v12 hero redesign */
body{
  background:linear-gradient(180deg,#4c6f9f 0%, #3766ad 100%) !important;
}
.site-header{
  background:rgba(34,50,78,.58) !important;
}
.hero{
  background-color:#3766ad !important;
}
.hero::before{
  background:linear-gradient(90deg, rgba(31,50,83,.70), rgba(55,102,173,.42)) !important;
}
.hero-copy-column h1{
  font-size:clamp(1.2rem,1.55vw,1.7rem) !important;
  line-height:1.28 !important;
  font-weight:600 !important;
  max-width:880px !important;
  margin-bottom:10px !important;
}
.hero-subline{
  font-size:clamp(.82rem,1.0vw,1rem) !important;
  line-height:1.55 !important;
  color:#e7eef8 !important;
  max-width:860px !important;
  margin:0 0 18px 0 !important;
}
.hero-brand-panel{
  display:none !important;
}
.hero-wordmark{
  display:block !important;
  margin:0 0 18px 0;
  font-size:clamp(2rem,4.2vw,4.1rem);
  line-height:0.95;
  font-weight:800;
  letter-spacing:.03em;
  color:#dfe8f4;
  text-transform:uppercase;
  text-shadow:0 10px 24px rgba(0,0,0,.22);
}
.hero-wordmark .blue{
  color:#6fa0ea;
}
.hero-wordmark small{
  display:block;
  font-size:clamp(1rem,1.6vw,1.55rem);
  letter-spacing:.34em;
  margin-top:14px;
  color:#d2dbea;
}
.hero-copy-column .eyebrow{
  margin-bottom:8px !important;
}
.mini-proof{
  margin-top:8px !important;
}
.glass-card{
  background:rgba(55,102,173,.18) !important;
}


/* v13 richer blue header + slightly smaller hero */
.site-header{
  background:rgba(55,102,173,.82) !important;
  border-bottom:1px solid rgba(255,255,255,.14) !important;
}
.main-nav > ul > li > a{
  color:#ffffff !important;
}
.nav-cta{
  background:rgba(255,255,255,.14) !important;
  box-shadow:none !important;
}
.hero{
  min-height:620px !important;
}
.hero::before{
  background:
    linear-gradient(90deg, rgba(55,102,173,.82), rgba(55,102,173,.58)) !important;
}
.hero-grid{
  padding:78px 0 62px !important;
}
.hero-wordmark{
  font-size:clamp(1.75rem,3.6vw,3.45rem) !important;
}
.hero-wordmark small{
  font-size:clamp(.9rem,1.35vw,1.25rem) !important;
}


/* v14 hero image restored, less blue wash, actual logo visible */
.hero{
  min-height:470px !important;
  background-color:#3766ad !important;
  background-size:100% auto !important;
  background-repeat:no-repeat !important;
  background-position:center top !important;
}
.hero::before{
  background:linear-gradient(90deg, rgba(10,22,40,.34), rgba(10,22,40,.12)) !important;
}
.hero-grid{
  padding:44px 0 38px !important;
  align-items:end !important;
}
.hero-copy-column{
  max-width:920px !important;
}
.hero-brand-panel{
  display:block !important;
  position:relative !important;
  z-index:8 !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  max-width:760px !important;
  margin:0 0 10px 0 !important;
}
.hero-brand-panel img{
  display:block !important;
  position:relative !important;
  z-index:9 !important;
  width:100% !important;
  max-width:700px !important;
  height:auto !important;
  filter:none !important;
  opacity:1 !important;
}
.hero-wordmark{
  display:none !important;
}
.hero-copy-column h1{
  font-size:clamp(1rem,1.25vw,1.35rem) !important;
  line-height:1.32 !important;
  font-weight:600 !important;
  margin-bottom:8px !important;
  text-shadow:0 2px 10px rgba(0,0,0,.22);
}
.hero-subline{
  font-size:clamp(.76rem,.92vw,.92rem) !important;
  line-height:1.5 !important;
  margin:0 0 14px 0 !important;
  text-shadow:0 2px 8px rgba(0,0,0,.18);
}
.hero-copy-column .eyebrow{
  color:#eef4fb !important;
  margin-bottom:6px !important;
}
.site-header{
  background:rgba(55,102,173,.86) !important;
}
@media (max-width:980px){
  .hero{
    min-height:420px !important;
    background-size:cover !important;
    background-position:center center !important;
  }
  .hero-brand-panel{
    max-width:520px !important;
  }
  .hero-brand-panel img{
    max-width:100% !important;
  }
}


/* v15: slight grey cloudiness, clearer hero, explicit logo visibility */
.hero{
  min-height:460px !important;
  background-size:100% auto !important;
  background-repeat:no-repeat !important;
  background-position:center top !important;
}
.hero::before{
  background:linear-gradient(90deg, rgba(70,78,90,.32), rgba(70,78,90,.16)) !important;
}
.hero-grid{
  position:relative !important;
  z-index:2 !important;
}
.hero-copy-column{
  position:relative !important;
  z-index:4 !important;
}
.hero-brand-panel{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  position:relative !important;
  z-index:10 !important;
  margin:0 0 12px 0 !important;
  max-width:760px !important;
}
.hero-brand-panel img{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  position:relative !important;
  z-index:11 !important;
  max-width:720px !important;
  width:100% !important;
  height:auto !important;
}
.hero-copy-column h1{
  text-shadow:0 2px 8px rgba(0,0,0,.18) !important;
}
.hero-subline{
  text-shadow:0 2px 6px rgba(0,0,0,.14) !important;
}


/* v16: grey top area, logo above hero, larger hero text, stronger frosting */
body{
  background:linear-gradient(180deg,#6a7078 0%, #676d75 100%) !important;
}
.site-header{
  background:rgba(106,112,120,.92) !important;
  border-bottom:1px solid rgba(255,255,255,.14) !important;
}
.nav-wrap{
  min-height:64px !important;
}
.brand{
  max-width:none !important;
}
.brand img{
  display:none !important;
}
.brand::before{
  content:"";
  display:none !important;
}

.hero{
  min-height:560px !important;
  background-image:
    linear-gradient(90deg, rgba(150,155,162,.44), rgba(150,155,162,.28)),
    url('images/banner.jpg') !important;
  background-color:#6c7178 !important;
  background-size:100% auto !important;
  background-repeat:no-repeat !important;
  background-position:center top !important;
  position:relative !important;
}
.hero::before{
  background:linear-gradient(90deg, rgba(128,133,140,.34), rgba(128,133,140,.18)) !important;
}
.hero-grid{
  grid-template-columns:1fr .92fr !important;
  align-items:end !important;
  padding:34px 0 32px !important;
  position:relative !important;
  z-index:2 !important;
}
.hero-copy-column{
  position:relative !important;
  z-index:6 !important;
  max-width:900px !important;
}
.hero-top-logo{
  display:block !important;
  margin:0 0 18px 0 !important;
  max-width:760px !important;
}
.hero-top-logo img{
  display:block !important;
  width:100% !important;
  max-width:700px !important;
  height:auto !important;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.18));
}
.hero-brand-panel{
  display:none !important;
}
.hero-copy-column .eyebrow{
  color:#f1f4f8 !important;
  font-size:.82rem !important;
  margin-bottom:8px !important;
  text-shadow:0 1px 6px rgba(0,0,0,.14);
}
.hero-copy-column h1{
  font-size:clamp(1.8rem,2.4vw,3rem) !important;
  line-height:1.14 !important;
  font-weight:700 !important;
  max-width:980px !important;
  margin:0 0 12px 0 !important;
  color:#ffffff !important;
  text-shadow:0 2px 10px rgba(0,0,0,.18) !important;
}
.hero-copy-column .key-word{
  color:#8db7ff !important;
}
.hero-subline{
  font-size:clamp(.95rem,1.12vw,1.15rem) !important;
  line-height:1.5 !important;
  max-width:900px !important;
  color:#f6f8fb !important;
  margin:0 0 18px 0 !important;
  text-shadow:0 2px 8px rgba(0,0,0,.16) !important;
}
.hero-actions{
  margin-top:18px !important;
}
.glass-card{
  background:rgba(55,102,173,.40) !important;
  border:1px solid rgba(255,255,255,.14) !important;
}
.dark-section,
.accent-section,
.feature-card,.sector-card,.faq-card,.blog-card,.panel-card,.sidebar-card,.tool-card,.map-card,.contact-banner{
  /* preserve lower-section blue family */
}
@media (max-width:980px){
  .hero{
    min-height:520px !important;
    background-size:cover !important;
    background-position:center center !important;
  }
  .hero-top-logo{
    max-width:520px !important;
  }
  .hero-top-logo img{
    max-width:100% !important;
  }
  .hero-grid{
    grid-template-columns:1fr !important;
    padding:24px 0 26px !important;
  }
  .hero-copy-column h1{
    font-size:1.55rem !important;
    line-height:1.18 !important;
  }
  .hero-subline{
    font-size:.92rem !important;
  }
}


/* v17: whole-page grey gradient, restored hero, logo strip, card images */
body{
  background:linear-gradient(135deg,#54585f 0%, #7a7f87 100%) !important;
  background-attachment:fixed;
}
.site-header{
  background:rgba(88,93,101,.88) !important;
}
.brand, .brand img{
  display:none !important;
}
.hero-logo-strip{
  background:transparent;
  padding:18px 0 8px;
}
.hero-logo-strip img{
  width:min(760px,92%);
  max-width:760px;
  height:auto;
  display:block;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.12));
}
.hero{
  min-height:420px !important;
  background-image:
    linear-gradient(90deg, rgba(160,165,170,.26), rgba(160,165,170,.20)),
    url('images/banner.jpg') !important;
  background-color:transparent !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  position:relative !important;
}
.hero::before{
  background:linear-gradient(90deg, rgba(115,120,127,.28), rgba(115,120,127,.14)) !important;
}
.hero-grid{
  padding:34px 0 28px !important;
  align-items:end !important;
}
.hero-copy-column{
  max-width:920px !important;
}
.hero-top-logo,
.hero-brand-panel,
.hero-wordmark{
  display:none !important;
}
.hero-copy-column .eyebrow{
  color:#f5f7fa !important;
  text-shadow:0 2px 6px rgba(0,0,0,.18);
}
.hero-copy-column h1{
  font-size:clamp(1.95rem,3vw,3.85rem) !important;
  line-height:1.03 !important;
  font-weight:700 !important;
  color:#ffffff !important;
  text-shadow:0 3px 10px rgba(0,0,0,.22) !important;
  max-width:840px !important;
  margin-bottom:12px !important;
}
.hero-subline{
  font-size:clamp(.98rem,1.2vw,1.16rem) !important;
  line-height:1.5 !important;
  color:#ffffff !important;
  max-width:930px !important;
  text-shadow:0 2px 7px rgba(0,0,0,.18) !important;
}
.hero-copy-column .key-word{
  color:#98bdf7 !important;
}
.glass-card{
  background:rgba(55,102,173,.42) !important;
}
.card-image{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:14px;
  margin:0 0 16px 0;
  display:block;
}
@media (max-width:980px){
  .hero-logo-strip{
    padding:14px 0 6px;
  }
  .hero-logo-strip img{
    width:min(560px,96%);
  }
  .hero{
    min-height:360px !important;
  }
  .hero-copy-column h1{
    font-size:1.9rem !important;
    line-height:1.08 !important;
  }
  .hero-subline{
    font-size:.95rem !important;
  }
}


/* v18 */
body{
  background:linear-gradient(135deg,#50545b 0%, #767b83 100%) !important;
  background-attachment:fixed;
}
.site-header{
  background:rgba(86,92,100,.82) !important;
  backdrop-filter:blur(8px) !important;
}
.hero-logo-strip{display:none !important;}
.hero{
  min-height:520px !important;
  background-image:
    linear-gradient(90deg, rgba(18,20,24,.36), rgba(18,20,24,.16)),
    url('images/banner.jpg') !important;
  background-color:#111 !important;
  background-size:100% auto !important;
  background-repeat:no-repeat !important;
  background-position:center top !important;
  position:relative !important;
}
.hero::before{
  background:linear-gradient(90deg, rgba(120,125,132,.22), rgba(120,125,132,.10)) !important;
}
.hero-grid{
  grid-template-columns:1fr .92fr !important;
  align-items:end !important;
  padding:26px 0 28px !important;
}
.hero-copy-column{
  max-width:980px !important;
}
.hero-top-logo{
  display:block !important;
  margin:0 0 14px 0 !important;
  max-width:540px !important;
}
.hero-top-logo img{
  display:block !important;
  width:100% !important;
  max-width:520px !important;
  height:auto !important;
  filter:none !important;
}
.hero-copy-column .eyebrow{
  color:#eef3f9 !important;
  font-size:.82rem !important;
  margin-bottom:8px !important;
  text-shadow:0 2px 6px rgba(0,0,0,.2);
}
.hero-copy-column h1{
  font-size:clamp(2.1rem,3.7vw,4.5rem) !important;
  line-height:1.02 !important;
  font-weight:700 !important;
  max-width:900px !important;
  color:#fff !important;
  margin:0 0 12px !important;
  text-shadow:0 4px 12px rgba(0,0,0,.26) !important;
}
.hero-subline{
  font-size:clamp(.95rem,1.15vw,1.12rem) !important;
  line-height:1.48 !important;
  max-width:900px !important;
  color:#f8fbff !important;
  text-shadow:0 2px 8px rgba(0,0,0,.18) !important;
}
.hero-copy-column .key-word{
  color:#9fc1ff !important;
}
.hero-brand-panel,.hero-wordmark{display:none !important;}
@media (max-width:980px){
  .hero{
    min-height:420px !important;
    background-size:cover !important;
    background-position:center center !important;
  }
  .hero-top-logo{
    max-width:360px !important;
    margin-bottom:10px !important;
  }
  .hero-top-logo img{
    max-width:340px !important;
  }
  .hero-copy-column h1{
    font-size:1.85rem !important;
    line-height:1.06 !important;
  }
}


/* v19 */
.site-header{
  background:rgba(78,84,92,.90) !important;
  backdrop-filter:blur(8px) !important;
}
.nav-wrap{
  flex-direction:row !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
  padding:8px 0 !important;
  min-height:70px !important;
}
.brand{
  display:inline-flex !important;
  align-items:center !important;
  max-width:none !important;
  flex:0 0 auto !important;
}
.brand img{
  display:block !important;
  width:auto !important;
  height:54px !important;
  max-width:320px !important;
  object-fit:contain !important;
}
.brand::before{
  display:none !important;
  content:none !important;
}
.main-nav{
  width:auto !important;
  margin-left:auto !important;
}
.main-nav ul{
  flex-wrap:wrap !important;
}
.hero-logo-strip,
.hero-top-logo,
.hero-brand-panel,
.hero-wordmark{
  display:none !important;
}
.hero{
  min-height:520px !important;
  background-image:
    linear-gradient(90deg, rgba(20,22,26,.42), rgba(20,22,26,.24)),
    url('images/hero-stacked.jpg') !important;
  background-color:#222 !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  position:relative !important;
}
.hero::before{
  background:linear-gradient(90deg, rgba(90,94,100,.18), rgba(90,94,100,.08)) !important;
}
.hero-grid{
  grid-template-columns:1fr .9fr !important;
  align-items:end !important;
  padding:56px 0 34px !important;
}
.hero-copy-column{
  max-width:980px !important;
}
.hero-copy-column .eyebrow{
  color:#f3f6fa !important;
  margin-bottom:10px !important;
  text-shadow:0 2px 6px rgba(0,0,0,.22);
}
.hero-copy-column h1{
  font-size:clamp(2.2rem,3.7vw,4.5rem) !important;
  line-height:1.02 !important;
  font-weight:700 !important;
  color:#ffffff !important;
  max-width:920px !important;
  margin:0 0 14px 0 !important;
  text-shadow:0 4px 12px rgba(0,0,0,.28) !important;
}
.hero-subline{
  font-size:clamp(.98rem,1.15vw,1.12rem) !important;
  line-height:1.5 !important;
  color:#f8fbff !important;
  max-width:920px !important;
  text-shadow:0 2px 8px rgba(0,0,0,.2) !important;
}
@media (max-width:980px){
  .brand img{
    height:42px !important;
    max-width:220px !important;
  }
  .hero{
    min-height:420px !important;
  }
  .hero-grid{
    grid-template-columns:1fr !important;
    padding:42px 0 24px !important;
  }
  .hero-copy-column h1{
    font-size:1.95rem !important;
    line-height:1.05 !important;
  }
}


/* v20: black sticky bar, larger far-left logo, explicit hero banner */
.site-header{
  background:rgba(0,0,0,.88) !important;
  backdrop-filter:blur(8px) !important;
}
.nav-wrap{
  padding:6px 0 !important;
  min-height:82px !important;
}
.container.nav-wrap{
  width:min(100%, calc(100% - 20px)) !important;
  max-width:none !important;
  margin:0 0 0 10px !important;
}
.brand{
  margin-left:0 !important;
  padding-left:0 !important;
  flex:0 0 auto !important;
}
.brand img{
  height:86px !important;
  max-width:520px !important;
  margin-left:0 !important;
}
.main-nav{
  margin-left:auto !important;
  padding-right:16px !important;
}

.hero{
  background-image:
    linear-gradient(90deg, rgba(18,20,24,.42), rgba(18,20,24,.26)),
    url('images/hero-stacked.jpg') !important;
  background-color:#1e1e1e !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  min-height:540px !important;
}
.hero::before{
  background:linear-gradient(90deg, rgba(95,100,108,.18), rgba(95,100,108,.08)) !important;
}
.hero-grid{
  padding:70px 0 36px !important;
}
@media (max-width:980px){
  .nav-wrap{
    min-height:68px !important;
  }
  .container.nav-wrap{
    width:min(100%, calc(100% - 16px)) !important;
    margin:0 0 0 8px !important;
  }
  .brand img{
    height:56px !important;
    max-width:320px !important;
  }
  .main-nav{
    padding-right:8px !important;
  }
}


/* v21 rebuild homepage hero with explicit img background */
.site-header{
  background:rgba(0,0,0,.9) !important;
}
.container.nav-wrap{
  width:calc(100% - 20px) !important;
  max-width:none !important;
  margin:0 0 0 10px !important;
}
.brand img{
  height:86px !important;
  max-width:520px !important;
}
.home-hero{
  position:relative;
  min-height:520px;
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.home-hero .hero-media{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  display:block;
  z-index:0;
}
.home-hero .hero-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(30,32,36,.48), rgba(30,32,36,.24)),
    linear-gradient(180deg, rgba(140,145,152,.18), rgba(140,145,152,.08));
  z-index:1;
}
.home-hero .hero-content{
  position:relative;
  z-index:2;
  min-height:520px;
  display:grid;
  grid-template-columns:1fr .88fr;
  align-items:end;
  gap:34px;
  padding:52px 0 34px;
}
.home-hero .hero-copy-column{
  max-width:980px;
}
.home-hero .eyebrow{
  color:#f2f6fb !important;
  margin-bottom:10px !important;
  text-shadow:0 2px 6px rgba(0,0,0,.22);
}
.home-hero h1{
  font-size:clamp(2.2rem,3.8vw,4.6rem) !important;
  line-height:1.02 !important;
  font-weight:700 !important;
  color:#fff !important;
  max-width:900px !important;
  margin:0 0 14px 0 !important;
  text-shadow:0 4px 12px rgba(0,0,0,.3) !important;
}
.home-hero .hero-subline{
  font-size:clamp(.98rem,1.15vw,1.12rem) !important;
  line-height:1.5 !important;
  color:#f8fbff !important;
  max-width:920px !important;
  text-shadow:0 2px 8px rgba(0,0,0,.22) !important;
  margin:0 0 18px !important;
}
.home-hero .key-word{
  color:#9fc1ff !important;
}
.home-hero .glass-card{
  background:rgba(55,102,173,.42) !important;
}
@media (max-width:980px){
  .brand img{
    height:56px !important;
    max-width:320px !important;
  }
  .home-hero,
  .home-hero .hero-content{
    min-height:420px;
  }
  .home-hero .hero-content{
    grid-template-columns:1fr;
    padding:40px 0 24px;
  }
  .home-hero h1{
    font-size:1.95rem !important;
    line-height:1.05 !important;
  }
}


/* v22 bigger logo */
.brand img{
  height:140px !important;
  max-width:800px !important;
}
@media (max-width:980px){
  .brand img{
    height:80px !important;
    max-width:420px !important;
  }
}


/* v24 tweaks */
.brand{
  padding-left:18px !important;
}

.hero-subline{
  font-size:1.25rem !important;
  line-height:1.6 !important;
}


/* v25 layout polish */
.container.nav-wrap{
  margin-left:80px !important;
}

.hero-copy-column{
  max-width:820px !important;
}

.main-nav ul{
  gap:26px !important;
}


/* v26 hero image enhancement */
.hero { position: relative; }
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.65), rgba(0,0,0,0.25));
  pointer-events: none;
}
.hero img {
  filter: contrast(1.15) saturate(1.15);
}


/* v29 polish */
.page-hero.with-bg{
  background-size: cover !important;
  background-position: center center !important;
  position: relative;
  overflow: hidden;
}
.page-hero.with-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(18,20,24,.58), rgba(18,20,24,.26));
  z-index:0;
}
.page-hero.with-bg .container{
  position:relative;
  z-index:1;
}
.quick-enquiry-card{
  margin-top:28px;
  padding:24px;
  border-radius:22px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);
}
.quick-enquiry-card h3{margin-top:0}
.quick-enquiry-card .form-grid{margin-top:10px}
.toggle-tech{
  margin-top:26px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  border-radius:18px;
  padding:18px 20px;
}
.toggle-tech summary{
  cursor:pointer;
  font-weight:800;
  color:var(--text);
}
.toggle-tech .tech-body{
  padding-top:12px;
}
.hero img{filter:contrast(1.22) saturate(1.18);}
.main-nav ul{gap:18px !important;}
.brand{padding-left:42px !important;}
.brand img{height:106px !important;max-width:620px !important;}
@media (max-width:980px){
  .brand{padding-left:12px !important;}
  .brand img{height:62px !important;max-width:340px !important;}
}


/* v30 clean pass */
.brand{
  padding-left: 58px !important;
}
@media (max-width:980px){
  .brand{
    padding-left: 18px !important;
  }
}


/* v31 polish */
.brand{
  padding-left: 54px !important;
}
.brand img{
  content: none !important;
  height: 108px !important;
  width: auto !important;
  max-width: 640px !important;
  display: block !important;
  object-fit: contain !important;
}
.main-nav ul{
  gap: 20px !important;
}
.main-nav > ul > li > a{
  position: relative;
  transition: color .25s ease, opacity .25s ease, transform .25s ease;
}
.main-nav > ul > li > a::after{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  bottom:6px;
  height:2px;
  background:rgba(109,168,255,.88);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .25s ease;
  border-radius:999px;
}
.main-nav > ul > li > a:hover::after,
.main-nav > ul > li:focus-within > a::after{
  transform:scaleX(1);
}
.main-nav > ul > li > a:hover{
  color:#dbe9ff !important;
}
.nav-cta{
  background:linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.08)) !important;
  border:1px solid rgba(255,255,255,.08) !important;
}
.nav-cta:hover{
  background:linear-gradient(135deg, rgba(109,168,255,.26), rgba(109,168,255,.16)) !important;
}
.home-hero .glass-card,
.glass-card{
  background:rgba(55,102,173,.34) !important;
  backdrop-filter: blur(12px);
}
.quick-enquiry-card{
  background:rgba(255,255,255,.05) !important;
}
.contact-banner{
  background:rgba(255,255,255,.045) !important;
}
.hero-subline{
  font-size:1.16rem !important;
  line-height:1.58 !important;
}
.hero-copy-column{
  max-width: 790px !important;
}
.page-hero h1{
  max-width: 900px;
}
@media (max-width: 980px){
  .brand{
    padding-left: 14px !important;
  }
  .brand img{
    height: 66px !important;
    max-width: 360px !important;
  }
  .main-nav ul{
    gap: 6px !important;
  }
}

/* v32 */
.inline-image-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:22px 0}
.inline-image-grid.single{grid-template-columns:1fr;max-width:760px}
.inline-image-grid img{width:100%;display:block;border-radius:18px;box-shadow:var(--shadow)}
.tool-panel{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);border-radius:22px;padding:24px;box-shadow:var(--shadow)}
.tool-panel h2,.tool-panel h3{margin-top:0}
.tool-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:24px}
.tool-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.tool-form .full{grid-column:1/-1}
.tool-form input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#fff}
.tool-note{font-size:.96rem;color:var(--muted)}
.tool-result{margin-top:16px;font-size:1.2rem;font-weight:800;color:#dbe9ff}
.chart-wrap{overflow:auto;border-radius:18px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04)}
.chart-table{width:100%;border-collapse:collapse}
.chart-table th,.chart-table td{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.08);text-align:left}
.chart-table th{position:sticky;top:0;background:rgba(14,18,24,.92);z-index:1}
.logo-top{margin-bottom:22px}.logo-top img{max-width:420px;width:100%;height:auto;display:block}
@media (max-width:980px){.inline-image-grid,.tool-grid,.tool-form{grid-template-columns:1fr}}


/* v33 fixes */
.page-hero.with-bg{
  background-size: cover !important;
  background-position: center center !important;
  position: relative;
  overflow: hidden;
}
.page-hero.with-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(18,20,24,.56), rgba(18,20,24,.24));
  z-index:0;
}
.page-hero.with-bg .container{position:relative;z-index:1}
.inline-image-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
  margin:22px 0;
}
.inline-image-grid.single{
  grid-template-columns:1fr;
  max-width:760px;
}
.inline-image-grid img{
  width:100%;
  display:block;
  border-radius:18px;
  box-shadow:var(--shadow);
}
@media (max-width:980px){
  .inline-image-grid{grid-template-columns:1fr}
}


/* v34 expanded line pipe tools */
.tool-sections{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:24px}
.tool-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);border-radius:22px;padding:22px;box-shadow:var(--shadow)}
.tool-card h3{margin-top:0}
.tool-card label{display:block;margin:10px 0 6px}
.tool-card input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#fff}
.tool-card .tool-note{margin-top:10px}
.tool-card .tool-result{margin-top:14px}
@media (max-width:980px){.tool-sections{grid-template-columns:1fr}}


/* v36 nav and mining fixes */
.site-header{
  overflow:hidden !important;
}
.container.nav-wrap{
  width:calc(100% - 28px) !important;
  max-width:none !important;
  margin:0 14px !important;
  padding-right:8px !important;
  gap:12px !important;
}
.main-nav{
  flex:1 1 auto !important;
  min-width:0 !important;
  overflow:hidden !important;
}
.main-nav ul{
  flex-wrap:nowrap !important;
  justify-content:flex-end !important;
  gap:12px !important;
  overflow:hidden !important;
}
.main-nav > ul > li > a{
  padding-left:10px !important;
  padding-right:10px !important;
  font-size:0.98rem !important;
  white-space:nowrap !important;
}
.nav-cta{
  flex:0 0 auto !important;
  padding:12px 16px !important;
  white-space:nowrap !important;
}
@media (max-width:1180px){
  .brand img{height:84px !important; max-width:460px !important;}
  .main-nav ul{gap:8px !important;}
  .main-nav > ul > li > a{font-size:.92rem !important; padding-left:8px !important; padding-right:8px !important;}
  .nav-cta{padding:11px 14px !important;}
}
@media (max-width:980px){
  .container.nav-wrap{width:calc(100% - 16px) !important; margin:0 8px !important;}
  .brand img{height:56px !important; max-width:300px !important;}
  .main-nav ul{gap:4px !important;}
  .main-nav > ul > li > a{font-size:.84rem !important; padding-left:6px !important; padding-right:6px !important;}
  .nav-cta{padding:10px 12px !important; font-size:.88rem !important;}
}
@media (max-width:820px){
  .main-nav > ul > li > a{font-size:.78rem !important; padding-left:4px !important; padding-right:4px !important;}
  .nav-cta{padding:9px 10px !important; font-size:.82rem !important;}
}
.diagram-card{
  background:#ffffff !important;
  border-radius:20px !important;
  padding:18px !important;
  box-shadow:var(--shadow) !important;
}
.section-full{
  width:100% !important;
  max-width:none !important;
}
.section-full h2, .section-full p, .section-full ul{
  max-width:100% !important;
}
.contact-banner.tools-top{
  margin:0 0 24px 0 !important;
}
.contact-banner.tools-bottom{
  margin-top:24px !important;
  max-width:760px !important;
}


/* v37 tighter nav spacing */
.main-nav ul{
  gap:6px !important;
}

.main-nav > ul > li > a{
  padding-left:6px !important;
  padding-right:6px !important;
  font-size:0.90rem !important;
}

.nav-cta{
  padding:10px 12px !important;
  font-size:0.90rem !important;
}

@media (max-width:1200px){
  .main-nav ul{gap:4px !important;}
  .main-nav > ul > li > a{
    font-size:0.85rem !important;
    padding-left:5px !important;
    padding-right:5px !important;
  }
}

@media (max-width:1000px){
  .main-nav ul{gap:2px !important;}
  .main-nav > ul > li > a{
    font-size:0.80rem !important;
    padding-left:4px !important;
    padding-right:4px !important;
  }
}


/* v37a restore dropdown hover behaviour */
.site-header, .main-nav, .main-nav ul, .main-nav li {
  overflow: visible !important;
}
.main-nav ul {
  position: relative;
}
.main-nav li {
  position: relative;
}
.main-nav li > ul,
.main-nav .submenu,
.main-nav .dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 240px;
  background: rgba(8,10,14,.96);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 10px 0;
  box-shadow: 0 18px 34px rgba(0,0,0,.34);
  z-index: 9999;
}
.main-nav li:hover > ul,
.main-nav li:focus-within > ul,
.main-nav li:hover > .submenu,
.main-nav li:focus-within > .submenu,
.main-nav li:hover > .dropdown-menu,
.main-nav li:focus-within > .dropdown-menu {
  display: block;
}
.main-nav li > ul li,
.main-nav .submenu li,
.main-nav .dropdown-menu li {
  display: block;
  width: 100%;
}
.main-nav li > ul a,
.main-nav .submenu a,
.main-nav .dropdown-menu a {
  display: block;
  padding: 10px 16px !important;
  white-space: nowrap;
  font-size: .92rem !important;
}
.main-nav li > ul a:hover,
.main-nav .submenu a:hover,
.main-nav .dropdown-menu a:hover {
  background: rgba(109,168,255,.12);
}

.feature-card .card-image{
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
}
