:root{
  --blue:#0b5ea8;
  --blue-dark:#063c6d;
  --navy:#062a4b;
  --orange:#f25b24;
  --orange-soft:#fff1ea;
  --text:#172130;
  --muted:#667487;
  --line:#dbe3ec;
  --soft:#f5f8fb;
  --white:#fff;
  --shadow:0 20px 55px rgba(9,48,85,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Segoe UI",Arial,sans-serif;color:var(--text);background:#fff;line-height:1.65}
img{display:block;max-width:100%}
a{color:inherit}
.container{width:min(1180px,calc(100% - 40px));margin:0 auto}

.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(219,227,236,.9)
}
.nav-wrap{
  min-height:78px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:30px
}
.brand img{width:145px}
.mainnav{display:flex;justify-content:center;gap:28px}
.mainnav a,.footer-nav a{text-decoration:none;font-size:14px;font-weight:700}
.mainnav a{color:#35445a}
.mainnav a:hover{color:var(--blue)}
.header-hotline{
  display:flex;align-items:center;gap:8px;
  padding:9px 13px;border-radius:11px;
  text-decoration:none;background:var(--orange-soft);color:var(--orange)
}
.header-hotline span{font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.08em}
.header-hotline strong{font-size:17px}
.nav-toggle{display:none;border:1px solid var(--line);background:#fff;border-radius:10px;padding:9px 12px;font-weight:700}

.hero{position:relative;min-height:720px;overflow:hidden;background:var(--navy);color:#fff}
.hero-slide,.hero-shade{position:absolute;inset:0}
.hero-slide{
  opacity:0;background-size:cover;background-position:center;
  transform:scale(1.03);transition:opacity 1.1s ease,transform 7s linear
}
.hero-slide.active{opacity:1;transform:scale(1)}
.hero-shade{
  background:linear-gradient(90deg,rgba(3,31,55,.88) 0%,rgba(5,55,98,.68) 48%,rgba(5,55,98,.18) 100%), linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.20))
}
.hero-content{
  position:relative;z-index:2;min-height:720px;
  display:grid;grid-template-columns:1.2fr .8fr;gap:70px;
  align-items:end;padding:90px 0 72px
}
.eyebrow,.section-kicker{color:var(--orange);font-size:13px;font-weight:850;letter-spacing:.1em;text-transform:uppercase}
.section-kicker.light{color:#ffb493}
.hero h1{
  max-width:760px;margin:12px 0 20px;
  font-size:clamp(50px,7vw,82px);line-height:.98;letter-spacing:-.055em
}
.hero-copy>p{max-width:680px;margin:0;color:#e3edf5;font-size:20px;text-wrap:pretty}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 19px;border-radius:11px;text-decoration:none;font-weight:800}
.btn-primary{background:var(--orange);color:#fff}
.btn-light{background:#fff;color:var(--blue-dark)}
.hero-facts{display:grid;gap:12px;align-self:end}
.hero-facts div{
  padding:18px 20px;border-radius:17px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.08);backdrop-filter:blur(8px)
}
.hero-facts strong{display:block;font-size:25px}
.hero-facts span{display:block;margin-top:2px;color:#c8dae7;font-size:13px}

.section{padding:90px 0}
.about-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:60px;align-items:start}
.section h2,.oilfield h2,.certifications h2,.contact h2{
  margin:8px 0 18px;font-size:clamp(36px,4.5vw,54px);line-height:1.08;letter-spacing:-.04em
}
.lead{font-size:19px;color:#3c4960}
blockquote{
  margin:25px 0 0;padding:18px 20px;
  border-left:4px solid var(--orange);background:var(--orange-soft);
  color:var(--blue-dark);font-size:17px;font-weight:750
}
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.why-grid article{
  padding:19px;border:1px solid var(--line);border-radius:17px;background:var(--soft)
}
.why-grid article>span{display:block;color:var(--orange);font-size:11px;font-weight:900}
.why-grid strong{display:block;margin:4px 0 6px;color:var(--blue-dark);font-size:16px}
.why-grid p{margin:0;color:var(--muted);font-size:13px}

.services{background:var(--soft)}
.section-head{
  display:grid;grid-template-columns:1fr .85fr;gap:48px;
  align-items:end;margin-bottom:32px
}
.section-head h2{margin:7px 0 0;font-size:clamp(36px,4.5vw,52px);line-height:1.08;letter-spacing:-.04em}
.section-head>p{margin:0;color:var(--muted);font-size:17px}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.service-card{
  overflow:hidden;border:1px solid var(--line);border-radius:20px;background:#fff;
  box-shadow:0 10px 28px rgba(9,48,85,.06);
  transition:transform .2s ease,box-shadow .2s ease
}
.service-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.service-card img{width:100%;height:190px;object-fit:cover}
.service-body{padding:18px}
.service-card h3{margin:0 0 7px;color:var(--blue-dark);font-size:20px;line-height:1.2}
.service-card p{margin:0;color:var(--muted);font-size:14px}
.service-card details{margin-top:15px;border-top:1px solid var(--line);padding-top:12px}
.service-card summary{
  cursor:pointer;color:var(--blue);font-size:13px;font-weight:800;
  list-style:none
}
.service-card summary::-webkit-details-marker{display:none}
.service-card summary::after{content:"+";float:right;font-size:17px}
.service-card details[open] summary::after{content:"–"}
.service-card ul{margin:11px 0 0;padding-left:18px;color:#536175;font-size:13px}
.service-card li{margin:5px 0}

.oilfield{
  padding:90px 0;background:linear-gradient(135deg,var(--navy),var(--blue-dark));color:#fff
}
.oilfield-grid{display:grid;grid-template-columns:1fr 1fr;gap:58px;align-items:center}
.oilfield-image img{width:100%;height:510px;object-fit:cover;border-radius:25px;box-shadow:0 22px 58px rgba(0,0,0,.25)}
.oilfield-copy p{color:#d5e3ed}
.text-link{display:inline-block;margin-top:14px;color:#ffb493;text-decoration:none;font-weight:850}

.certifications{padding:88px 0;background:#071f36;color:#fff}
.cert-head{
  display:grid;grid-template-columns:1fr .85fr;gap:50px;align-items:end;margin-bottom:30px
}
.cert-head>p{margin:0;color:#c8d8e4;font-size:17px}
.cert-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cert-card{
  min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:22px;border-radius:19px;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07)
}
.cert-logo-box{
  width:145px;height:125px;display:flex;align-items:center;justify-content:center;
  margin-bottom:13px;padding:8px;border-radius:14px;background:#fff
}
.cert-logo-box img{max-width:100%;max-height:100%;object-fit:contain}
.cert-logo-box.api-box{width:205px}
.cert-card strong{font-size:18px}
.cert-card span{margin-top:4px;color:#b9ccda;font-size:13px}

.contact{padding:84px 0;background:linear-gradient(135deg,var(--blue),var(--blue-dark));color:#fff}
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:center}
.contact-copy p{color:#d9e7f1;font-size:18px}
.contact-card{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.contact-card>div{
  min-height:102px;padding:18px;border-radius:16px;
  border:1px solid rgba(255,255,255,.17);background:rgba(255,255,255,.08)
}
.contact-card span{display:block;color:#bcd4e6;font-size:11px;font-weight:850;letter-spacing:.08em;text-transform:uppercase;margin-bottom:5px}
.contact-card a,.contact-card strong{color:#fff;text-decoration:none;font-size:16px}
.contact-primary,.contact-address{grid-column:1/-1}
.contact-primary a{font-size:38px;font-weight:900}

.footer{padding:25px 0;background:#041a2e;color:#bccbd7}
.footer-row{display:grid;grid-template-columns:1.4fr 1fr auto;gap:30px;align-items:center}
.footer-brand{display:flex;align-items:center;gap:13px}
.footer-brand img{width:86px;background:#fff;padding:4px;border-radius:7px}
.footer-brand span{font-size:13px}
.footer-nav{display:flex;justify-content:center;gap:18px}
.footer-nav a{color:#bccbd7}
.footer-nav a:hover{color:#fff}
.copyright{font-size:12px;color:#8296a6}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.in-view{opacity:1;transform:none}

@media(max-width:1050px){
  .service-grid{grid-template-columns:1fr 1fr}
  .about-grid,.oilfield-grid,.contact-grid{grid-template-columns:1fr}
  .hero-content{grid-template-columns:1fr;align-items:end}
  .hero-facts{grid-template-columns:repeat(3,1fr)}
  .section-head,.cert-head{grid-template-columns:1fr}
  .cert-cards{grid-template-columns:1fr 1fr}
  .footer-row{grid-template-columns:1fr}
  .footer-nav{justify-content:flex-start}
}
@media(max-width:760px){
  .container{width:min(100% - 24px,1180px)}
  .nav-wrap{grid-template-columns:auto auto 1fr}
  .nav-toggle{display:block}
  .mainnav{display:none;grid-column:1/-1;flex-direction:column;align-items:flex-start;padding:0 0 14px;gap:4px}
  .mainnav.open{display:flex}
  .header-hotline{justify-self:end}
  .header-hotline span{display:none}
  .brand img{width:125px}
  .hero{min-height:auto}
  .hero-content{min-height:auto;padding:62px 0 50px}
  .hero h1{font-size:48px}
  .hero-copy>p{font-size:18px}
  .hero-facts{grid-template-columns:1fr}
  .section{padding:64px 0}
  .why-grid,.service-grid,.cert-cards,.contact-card{grid-template-columns:1fr}
  .oilfield,.certifications,.contact{padding:64px 0}
  .oilfield-image img{height:340px}
  .contact-primary,.contact-address{grid-column:auto}
  .footer-nav{flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-slide{transition:none;transform:none!important}
  .reveal{opacity:1;transform:none;transition:none}
}


.hero-copy, .hero-facts, .service-card, .cert-card, .contact-card>div{
  backface-visibility:hidden;
}
.service-card h3, .section h2, .oilfield h2, .certifications h2, .contact h2{
  text-wrap:balance;
}
.service-card p, .oilfield-copy p, .contact-copy p{
  text-wrap:pretty;
}
.service-card details{
  background:#fbfcfe;
  border-radius:12px;
  padding:12px 14px 0;
  margin-top:14px;
}
.service-card details[open]{
  padding-bottom:12px;
}
.service-card summary{
  user-select:none;
}
.hero-facts div{
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}
.cert-logo-box{
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.03);
}

.resource-box{
  margin:22px 0 4px;
  padding:16px 18px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:15px;
  background:rgba(255,255,255,.08);
}
.resource-box strong{
  display:block;
  margin-bottom:5px;
  color:#fff;
  font-size:14px;
}
.resource-box span{
  display:block;
  color:#cbdce8;
  font-size:13px;
  line-height:1.55;
}
.service-card img{
  background:#eaf0f5;
}

/* V7 final image and layout polish */
.service-card img{
  height:205px;
  object-fit:cover;
  object-position:center;
}
.service-card{
  min-width:0;
}
.service-body{
  min-width:0;
}
.service-card h3,
.service-card p,
.service-card li{
  overflow-wrap:anywhere;
}
.hero-slide{
  background-position:center;
}
.oilfield-image img{
  object-position:center;
}
@media(max-width:760px){
  .service-card img{height:220px}
  .hero-slide:first-of-type{background-position:58% center}
}


/* V10 brochure-highlight refinements */
.section-display{
  margin:0 0 12px;
  color:var(--blue);
  font-size:clamp(54px,7vw,94px);
  line-height:.86;
  font-weight:900;
  letter-spacing:-.055em;
  text-transform:uppercase;
}
.services .section-display{
  color:var(--orange);
}

.brand-promise{
  margin:30px 0 0;
  padding:24px 26px;
  border:0;
  border-left:6px solid var(--orange);
  border-radius:0 18px 18px 0;
  background:linear-gradient(135deg,var(--blue-dark),var(--navy));
  color:#fff;
  box-shadow:0 16px 40px rgba(6,42,75,.15);
}
.brand-promise span{
  display:block;
  margin-bottom:7px;
  color:#ffb493;
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.brand-promise strong{
  display:block;
  color:#fff;
  font-size:clamp(19px,2.1vw,28px);
  line-height:1.3;
  letter-spacing:-.015em;
}

.brochure-callout{
  margin-top:14px;
  padding:11px 13px;
  border-left:4px solid var(--orange);
  background:var(--orange-soft);
  color:var(--blue-dark);
  font-size:12px;
  line-height:1.45;
  font-weight:850;
  letter-spacing:.02em;
}

.service-link{
  display:inline-block;
  margin-top:16px;
  color:var(--blue);
  text-decoration:none;
  font-size:13px;
  font-weight:850;
}
.service-link:hover{text-decoration:underline}

.oilfield-task-box{
  margin:22px 0 0;
  padding:20px 22px;
  border-radius:17px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.08);
}
.oilfield-task-box strong{
  display:block;
  margin-bottom:10px;
  color:#fff;
  font-size:14px;
  line-height:1.4;
}
.oilfield-task-box ul{
  margin:0;
  padding-left:20px;
  color:#d5e3ed;
}
.oilfield-task-box li{margin:7px 0}

.oilfield-support-note{
  margin:16px 0 0;
  padding:14px 16px;
  border-radius:13px;
  background:var(--orange);
  color:#fff;
  font-weight:800;
  line-height:1.5;
}

.certifications h2{text-transform:uppercase}

@media(max-width:760px){
  .section-display{font-size:46px}
  .brand-promise{padding:20px}
  .brand-promise strong{font-size:19px}
}


/* =========================================================
   V12 FINAL RESPONSIVE / UI / UX POLISH
   Landing hero imagery intentionally unchanged from V10.
   ========================================================= */

html{
  scroll-padding-top:92px;
}

body{
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

.anchor-section{
  scroll-margin-top:92px;
}

.site-header{
  box-shadow:0 6px 24px rgba(4,26,46,.045);
}

.nav-wrap{
  min-height:80px;
}

.mainnav a{
  position:relative;
  transition:color .18s ease;
}

.mainnav a::after{
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:-7px;
  height:2px;
  border-radius:2px;
  background:var(--orange);
  transition:right .2s ease;
}

.mainnav a:hover::after{
  right:0;
}

.header-hotline{
  transition:transform .18s ease, box-shadow .18s ease;
}

.header-hotline:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(242,91,36,.12);
}

/* Hero typography/alignment only — background images are unchanged */
.hero-content{
  align-items:center;
  padding-top:100px;
  padding-bottom:82px;
}

.hero-copy{
  min-width:0;
  max-width:760px;
}

.hero h1{
  max-width:760px;
  text-wrap:balance;
}

.hero-copy > p{
  max-width:680px;
  text-wrap:pretty;
  line-height:1.65;
}

.hero-facts{
  gap:14px;
}

.hero-facts div{
  border-radius:18px;
  box-shadow:0 12px 30px rgba(0,0,0,.07);
}

/* Global section rhythm */
.section,
.oilfield,
.certifications,
.contact{
  padding-top:94px;
  padding-bottom:94px;
}

.section-display{
  margin-bottom:14px;
  font-size:clamp(52px,7vw,90px);
  line-height:.9;
  text-wrap:balance;
}

.section h2,
.services h2,
.oilfield h2,
.certifications h2,
.contact h2{
  text-wrap:balance;
}

.lead,
.section-head > p,
.cert-head > p,
.oilfield-copy p,
.contact-copy p{
  text-wrap:pretty;
}

.about-grid,
.oilfield-grid,
.contact-grid{
  align-items:center;
}

.about-copy,
.oilfield-copy,
.contact-copy{
  min-width:0;
}

.section-head,
.cert-head{
  margin-bottom:38px;
}

/* Brand statement */
.brand-promise{
  max-width:760px;
}

/* Service cards */
.service-grid{
  gap:22px;
}

.service-card{
  min-width:0;
  border-radius:22px;
  overflow:hidden;
}

.service-card img{
  height:205px;
  object-fit:cover;
  object-position:center;
}

.service-body{
  min-width:0;
  padding:20px;
}

.service-card h3{
  margin-bottom:9px;
  font-size:21px;
  line-height:1.22;
  overflow-wrap:anywhere;
}

.service-card p,
.service-card li{
  overflow-wrap:anywhere;
}

.service-card details{
  margin-top:16px;
}

.brochure-callout{
  border-radius:0 12px 12px 0;
}

/* Oilfield */
.oilfield-image img{
  width:100%;
  border-radius:26px;
  object-fit:cover;
}

.oilfield-task-box,
.oilfield-support-note{
  max-width:760px;
}

/* Certifications */
.cert-card{
  min-width:0;
  min-height:268px;
  border-radius:18px;
}

.cert-logo-box{
  flex-shrink:0;
}

/* Contact */
.contact-card{
  min-width:0;
}

.contact-card > div{
  border-radius:18px;
}

.contact-primary a{
  display:inline-block;
  line-height:1.05;
}

/* Footer */
.footer-row{
  align-items:center;
}

.footer-brand{
  min-width:0;
}

.footer-brand span{
  line-height:1.4;
}

/* ---------------------------------------------------------
   LAPTOP / SMALL DESKTOP
   --------------------------------------------------------- */
@media (min-width:1060px) and (max-width:1280px){
  .container{
    width:min(1120px,calc(100% - 42px));
  }

  .hero-content{
    gap:48px;
  }

  .hero h1{
    font-size:clamp(48px,6vw,72px);
  }

  .service-grid{
    gap:18px;
  }

  .service-card h3{
    font-size:20px;
  }
}

/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */
@media (max-width:1050px){
  html{
    scroll-padding-top:86px;
  }

  .anchor-section{
    scroll-margin-top:86px;
  }

  .hero{
    min-height:auto;
  }

  .hero-content{
    min-height:auto;
    grid-template-columns:1fr;
    gap:28px;
    padding:84px 0 62px;
  }

  .hero-copy{
    max-width:780px;
  }

  .hero-facts{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .about-grid,
  .oilfield-grid,
  .contact-grid{
    grid-template-columns:1fr;
    gap:42px;
  }

  .section-head,
  .cert-head{
    grid-template-columns:1fr;
    gap:16px;
  }

  .service-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .cert-cards{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .footer-row{
    grid-template-columns:1fr;
    gap:18px;
  }

  .footer-nav{
    justify-content:flex-start;
  }
}

/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */
@media (max-width:760px){
  html{
    scroll-padding-top:80px;
  }

  .anchor-section{
    scroll-margin-top:80px;
  }

  .container{
    width:min(100% - 24px,1180px);
  }

  .nav-wrap{
    min-height:72px;
    gap:12px;
  }

  .brand img{
    width:118px;
  }

  .header-hotline{
    padding:8px 11px;
  }

  .mainnav{
    padding-top:8px;
  }

  .mainnav a{
    width:100%;
    padding:10px 0;
    font-size:15px;
  }

  .mainnav a::after{
    display:none;
  }

  .hero-content{
    padding:66px 0 46px;
  }

  .hero h1{
    font-size:43px;
    line-height:.99;
  }

  .hero-copy > p{
    font-size:17px;
    line-height:1.6;
  }

  .hero-actions{
    gap:10px;
  }

  .btn{
    min-height:46px;
  }

  .hero-facts{
    grid-template-columns:1fr;
    gap:10px;
  }

  .section,
  .oilfield,
  .certifications,
  .contact{
    padding-top:70px;
    padding-bottom:70px;
  }

  .section-display{
    font-size:42px;
    line-height:.94;
    letter-spacing:-.045em;
    margin-bottom:10px;
  }

  .section h2,
  .services h2,
  .oilfield h2,
  .certifications h2,
  .contact h2{
    font-size:34px;
    line-height:1.1;
  }

  .lead{
    font-size:17px;
  }

  .why-grid,
  .service-grid,
  .cert-cards,
  .contact-card{
    grid-template-columns:1fr;
  }

  .service-card{
    border-radius:18px;
  }

  .service-card img{
    height:220px;
  }

  .service-body{
    padding:18px;
  }

  .service-card h3{
    font-size:20px;
  }

  .brand-promise{
    padding:20px;
  }

  .brand-promise strong{
    font-size:18px;
    line-height:1.38;
  }

  .oilfield-image img{
    height:340px;
  }

  .oilfield-task-box{
    padding:18px;
  }

  .contact-primary a{
    font-size:32px;
  }

  .footer-nav{
    flex-wrap:wrap;
    gap:12px 18px;
  }
}

/* ---------------------------------------------------------
   SMALL MOBILE
   --------------------------------------------------------- */
@media (max-width:430px){
  .header-hotline span{
    display:none;
  }

  .hero h1{
    font-size:37px;
  }

  .section-display{
    font-size:36px;
  }

  .section h2,
  .services h2,
  .oilfield h2,
  .certifications h2,
  .contact h2{
    font-size:30px;
  }

  .btn{
    width:100%;
  }

  .service-card img{
    height:200px;
  }
}


/* V13 oilfield image + contact availability refinement */
.theme-accent-heading{
  position:relative;
  display:inline-block;
  padding-bottom:10px;
}
.theme-accent-heading::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:78px;
  height:4px;
  border-radius:999px;
  background:var(--orange);
}

.oilfield-image img{
  object-fit:cover;
  object-position:center;
}

.service-card img[src*="oilfield-support-original-v13.png"]{
  object-fit:cover;
  object-position:center;
}


/* V14 dual oilfield image update */
.oilfield-gallery{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}
.oilfield-gallery-main img,
.oilfield-gallery-secondary img{
  width:100%;
  display:block;
  object-fit:cover;
  border-radius:26px;
  box-shadow:0 22px 58px rgba(0,0,0,.25);
}
.oilfield-gallery-main img{
  height:355px;
}
.oilfield-gallery-secondary img{
  height:220px;
}

@media (max-width:1050px){
  .oilfield-gallery-main img{
    height:340px;
  }
  .oilfield-gallery-secondary img{
    height:220px;
  }
}
@media (max-width:760px){
  .oilfield-gallery{
    gap:12px;
  }
  .oilfield-gallery-main img{
    height:280px;
    border-radius:20px;
  }
  .oilfield-gallery-secondary img{
    height:210px;
    border-radius:20px;
  }
}


/* =========================================================
   V15 Oilfield visual refinement
   Keeps brochure content intact; improves arrangement and UX only.
   ========================================================= */
.oilfield-grid{
  align-items:start;
}

.oilfield-gallery{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:18px;
}

.oilfield-card{
  position:relative;
  overflow:hidden;
  border-radius:26px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  box-shadow:0 22px 58px rgba(0,0,0,.24);
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.oilfield-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.00) 0%, rgba(255,255,255,.02) 100%);
  pointer-events:none;
}

.oilfield-card img{
  width:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  transform:scale(1);
  transition:transform .45s ease, filter .3s ease;
}

.oilfield-card-primary img{
  height:360px;
}

.oilfield-card-secondary img{
  height:235px;
}

.oilfield-card:hover{
  transform:translateY(-4px);
  border-color:rgba(242,91,36,.45);
  box-shadow:0 28px 64px rgba(0,0,0,.28);
}

.oilfield-card:hover img{
  transform:scale(1.03);
  filter:saturate(1.04) contrast(1.02);
}

/* Elegant highlight styling while preserving content exactly */
.elegant-highlight-box{
  border:1px solid rgba(255,255,255,.16);
  background:
    linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  box-shadow:0 14px 36px rgba(0,0,0,.14);
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.elegant-highlight-box:hover{
  transform:translateY(-2px);
  border-color:rgba(242,91,36,.42);
  box-shadow:0 18px 42px rgba(0,0,0,.18);
}

.elegant-highlight-box strong{
  color:#fff;
}

.elegant-highlight-box li{
  position:relative;
}

.elegant-highlight-note{
  background:linear-gradient(135deg, #f25b24, #ff7a2f);
  box-shadow:0 12px 28px rgba(242,91,36,.18);
  transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

.elegant-highlight-note:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 34px rgba(242,91,36,.24);
  filter:saturate(1.03);
}

.theme-accent-heading{
  color:#fff;
}

.theme-accent-heading::after{
  width:86px;
  background:linear-gradient(90deg, var(--orange), #ff9a62);
  box-shadow:0 4px 12px rgba(242,91,36,.18);
}

.theme-hover-link{
  position:relative;
  transition:color .2s ease, transform .2s ease;
}

.theme-hover-link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-4px;
  width:0;
  height:2px;
  border-radius:999px;
  background:#ffb493;
  transition:width .22s ease;
}

.theme-hover-link:hover{
  color:#fff;
  transform:translateX(2px);
}

.theme-hover-link:hover::after{
  width:100%;
}

/* Slightly cleaner paragraph rhythm in oilfield copy */
.oilfield-copy p{
  margin-bottom:15px;
}

.oilfield-copy .oilfield-task-box + .oilfield-support-note{
  margin-top:18px;
}

@media (max-width:1050px){
  .oilfield-gallery{
    gap:16px;
  }
  .oilfield-card-primary img{
    height:330px;
  }
  .oilfield-card-secondary img{
    height:220px;
  }
}

@media (max-width:760px){
  .oilfield-grid{
    gap:28px;
  }
  .oilfield-gallery{
    gap:12px;
  }
  .oilfield-card{
    border-radius:20px;
  }
  .oilfield-card-primary img{
    height:270px;
  }
  .oilfield-card-secondary img{
    height:190px;
  }
}


/* =========================================================
   V16 FINAL QA — Oilfield Support responsive image/layout polish
   Content wording is unchanged; these rules are presentation only.
   ========================================================= */

#oilfield .oilfield-grid{
  display:grid;
  grid-template-columns:minmax(0, .96fr) minmax(0, 1.04fr);
  gap:56px;
  align-items:start;
}

.oilfield-visual{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.72fr);
  grid-template-rows:330px 185px;
  gap:16px;
  min-width:0;
}

.oilfield-photo{
  position:relative;
  overflow:hidden;
  min-width:0;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.13);
  background:#0c2941;
  box-shadow:0 20px 50px rgba(0,0,0,.23);
  isolation:isolate;
  transition:
    transform .28s ease,
    box-shadow .28s ease,
    border-color .28s ease;
}

.oilfield-photo-primary{
  grid-column:1 / -1;
  grid-row:1;
}

.oilfield-photo-offshore{
  grid-column:1 / -1;
  grid-row:2;
  width:82%;
  justify-self:end;
}

.oilfield-photo img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  transform:scale(1.001);
  transition:
    transform .45s cubic-bezier(.2,.7,.2,1),
    filter .32s ease;
}

.oilfield-photo-primary img{
  object-position:center 46%;
}

.oilfield-photo-offshore img{
  object-position:center 45%;
}

.oilfield-photo-accent{
  position:absolute;
  inset:auto 0 0 0;
  height:4px;
  z-index:2;
  opacity:.78;
  background:linear-gradient(90deg,var(--orange),#ff9a62 58%,transparent);
  transform-origin:left center;
  transform:scaleX(.36);
  transition:transform .3s ease,opacity .3s ease;
}

.oilfield-photo::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(
    180deg,
    rgba(4,28,48,0) 55%,
    rgba(4,28,48,.10) 100%
  );
  transition:background .3s ease;
}

.oilfield-photo:hover{
  transform:translateY(-5px);
  border-color:rgba(242,91,36,.5);
  box-shadow:0 28px 62px rgba(0,0,0,.30);
}

.oilfield-photo:hover img{
  transform:scale(1.035);
  filter:saturate(1.055) contrast(1.025);
}

.oilfield-photo:hover .oilfield-photo-accent{
  transform:scaleX(1);
  opacity:1;
}

/* Text/box formatting */
#oilfield .oilfield-copy{
  min-width:0;
  padding-top:2px;
}

.oilfield-title{
  margin-bottom:20px !important;
  max-width:760px;
  overflow-wrap:anywhere;
}

.oilfield-paragraph{
  margin:0 0 15px;
  max-width:780px;
  color:#d5e3ed;
  line-height:1.7;
  overflow-wrap:anywhere;
}

.oilfield-content-card{
  min-width:0;
  overflow:hidden;
}

.oilfield-task-box{
  margin-top:24px;
  padding:21px 22px;
}

.oilfield-task-box strong{
  margin-bottom:12px;
  line-height:1.45;
  letter-spacing:.01em;
}

.oilfield-task-box ul{
  display:grid;
  gap:7px;
  margin:0;
  padding-left:20px;
}

.oilfield-task-box li{
  margin:0;
  line-height:1.55;
  overflow-wrap:anywhere;
}

.oilfield-support-note{
  margin-top:18px;
  padding:15px 18px;
  line-height:1.55;
}

#oilfield .theme-hover-link{
  display:inline-flex;
  align-items:center;
  margin-top:20px;
  min-height:40px;
}

/* Hover effect should never be required for usability */
@media (hover:none){
  .oilfield-photo:hover{
    transform:none;
  }
  .oilfield-photo:hover img{
    transform:none;
    filter:none;
  }
  .oilfield-photo-accent{
    transform:scaleX(.55);
  }
}

/* Small desktop / tablet */
@media(max-width:1050px){
  #oilfield .oilfield-grid{
    grid-template-columns:1fr;
    gap:38px;
  }

  .oilfield-visual{
    grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
    grid-template-rows:310px;
    gap:14px;
  }

  .oilfield-photo-primary{
    grid-column:1;
    grid-row:1;
  }

  .oilfield-photo-offshore{
    grid-column:2;
    grid-row:1;
    width:100%;
    justify-self:stretch;
  }

  .oilfield-photo-primary img,
  .oilfield-photo-offshore img{
    height:310px;
  }

  #oilfield .oilfield-copy{
    max-width:850px;
  }
}

/* Mobile */
@media(max-width:760px){
  #oilfield .oilfield-grid{
    gap:28px;
  }

  .oilfield-visual{
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:auto;
    gap:12px;
  }

  .oilfield-photo-primary,
  .oilfield-photo-offshore{
    grid-column:1;
    grid-row:auto;
    width:100%;
    justify-self:stretch;
    border-radius:19px;
  }

  .oilfield-photo-primary img{
    height:250px;
  }

  .oilfield-photo-offshore img{
    height:210px;
  }

  .oilfield-title{
    font-size:32px !important;
    line-height:1.08 !important;
    padding-bottom:11px;
    margin-bottom:18px !important;
  }

  .oilfield-paragraph{
    font-size:15px;
    line-height:1.68;
  }

  .oilfield-task-box{
    padding:18px;
    border-radius:15px;
  }

  .oilfield-task-box strong{
    font-size:13px;
  }

  .oilfield-task-box ul{
    padding-left:18px;
    font-size:14px;
  }

  .oilfield-support-note{
    padding:14px 16px;
    border-radius:13px;
    font-size:14px;
  }

  #oilfield .theme-hover-link{
    margin-top:16px;
  }
}

/* Very small phones */
@media(max-width:430px){
  .oilfield-photo-primary img{
    height:220px;
  }

  .oilfield-photo-offshore img{
    height:180px;
  }

  .oilfield-title{
    font-size:28px !important;
  }

  .oilfield-task-box{
    padding:16px;
  }

  .oilfield-paragraph,
  .oilfield-task-box li,
  .oilfield-support-note{
    font-size:13.5px;
  }
}

@media(prefers-reduced-motion:reduce){
  .oilfield-photo,
  .oilfield-photo img,
  .oilfield-photo-accent{
    transition:none !important;
  }
}


/* =========================================================
   V17 FINAL — one Oilfield image + global interaction polish
   ========================================================= */

/* ---------- Oilfield single-image layout ---------- */
#oilfield .oilfield-grid{
  display:grid;
  grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);
  gap:56px;
  align-items:center;
}

.oilfield-single-visual{
  min-width:0;
}

.oilfield-single-photo{
  position:relative;
  overflow:hidden;
  min-width:0;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.14);
  background:#0b2942;
  box-shadow:0 24px 64px rgba(0,0,0,.26);
  transition:
    transform .32s cubic-bezier(.2,.7,.2,1),
    box-shadow .32s ease,
    border-color .32s ease;
}

.oilfield-single-photo img{
  display:block;
  width:100%;
  height:565px;
  object-fit:cover;
  object-position:center;
  transform:scale(1.001);
  filter:saturate(1) contrast(1);
  transition:
    transform .7s cubic-bezier(.2,.7,.2,1),
    filter .45s ease;
}

.oilfield-single-photo::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,transparent 58%,rgba(4,30,52,.16) 100%);
  transition:background .4s ease;
}

.oilfield-image-glow{
  position:absolute;
  left:0;
  bottom:0;
  z-index:3;
  width:36%;
  height:5px;
  border-radius:0 999px 999px 0;
  background:linear-gradient(90deg,var(--orange),#ff9a62,transparent);
  opacity:.82;
  transition:width .38s ease,opacity .38s ease;
}

.oilfield-single-photo:hover{
  transform:translateY(-5px);
  border-color:rgba(242,91,36,.48);
  box-shadow:0 32px 72px rgba(0,0,0,.31);
}

.oilfield-single-photo:hover img{
  transform:scale(1.035);
  filter:saturate(1.055) contrast(1.025);
}

.oilfield-single-photo:hover .oilfield-image-glow{
  width:100%;
  opacity:1;
}

/* ---------- Shared smooth UI effect ---------- */
.ui-fade-hover{
  transition:
    transform .24s ease,
    box-shadow .28s ease,
    border-color .28s ease,
    background-color .34s ease,
    color .28s ease,
    filter .28s ease,
    opacity .28s ease;
}

/* ---------- Buttons ---------- */
.btn,
.header-hotline{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

.btn::before,
.header-hotline::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:0;
  background:linear-gradient(
    120deg,
    rgba(255,255,255,.05),
    rgba(255,255,255,.20),
    rgba(255,255,255,.04)
  );
  transform:translateX(-35%);
  transition:opacity .3s ease,transform .45s ease;
}

.btn:hover,
.header-hotline:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(4,31,54,.16);
}

.btn:hover::before,
.header-hotline:hover::before{
  opacity:1;
  transform:translateX(0);
}

.btn-primary:hover{
  background:#ff6a31;
}

.btn-light:hover{
  color:var(--blue-dark);
  background:#f6fbff;
}

.header-hotline:hover{
  background:#fff0e9;
  color:#d94c19;
}

/* ---------- Text links ---------- */
.service-link,
.theme-hover-link{
  position:relative;
  text-decoration:none;
}

.service-link::after,
.theme-hover-link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-4px;
  width:0;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--orange),#ff9a62);
  transition:width .28s ease;
}

.service-link:hover::after,
.theme-hover-link:hover::after{
  width:100%;
}

/* ---------- Service cards ---------- */
.service-card:hover{
  border-color:rgba(11,94,168,.25);
  box-shadow:0 22px 50px rgba(9,48,85,.13);
}

.service-card img{
  transition:transform .45s ease,filter .35s ease;
}

.service-card:hover img{
  transform:scale(1.025);
  filter:saturate(1.035);
}

.service-card:hover h3{
  color:var(--orange);
}

/* ---------- About / Why cards ---------- */
.why-grid article:hover{
  transform:translateY(-3px);
  border-color:rgba(11,94,168,.24);
  background:#fff;
  box-shadow:0 14px 30px rgba(9,48,85,.08);
}

.why-grid article:hover strong{
  color:var(--orange);
}

/* ---------- Certifications ---------- */
.cert-card:hover{
  transform:translateY(-4px);
  border-color:rgba(242,91,36,.42);
  background:rgba(255,255,255,.105);
  box-shadow:0 18px 40px rgba(0,0,0,.16);
}

.cert-card:hover .cert-logo-box{
  transform:scale(1.03);
}

.cert-logo-box{
  transition:transform .3s ease,box-shadow .3s ease;
}

/* ---------- Highlight panels ---------- */
.brand-promise:hover,
.brochure-callout:hover,
.oilfield-task-box:hover,
.oilfield-support-note:hover{
  transform:translateY(-2px);
}

.brand-promise:hover{
  box-shadow:0 22px 48px rgba(6,42,75,.22);
}

.brochure-callout:hover{
  background:#ffe8dd;
  border-left-color:#ff763e;
}

.oilfield-task-box:hover{
  border-color:rgba(242,91,36,.42);
  background:rgba(255,255,255,.105);
}

.oilfield-support-note{
  background-size:180% 180%;
  animation:subtleOrangeFade 7s ease-in-out infinite;
}

@keyframes subtleOrangeFade{
  0%,100%{
    background-color:#f25b24;
    filter:saturate(1);
  }
  50%{
    background-color:#ff7135;
    filter:saturate(1.04);
  }
}

/* ---------- Contact boxes ---------- */
.contact-card > div:hover{
  transform:translateY(-3px);
  border-color:rgba(255,255,255,.30);
  background:rgba(255,255,255,.125);
  box-shadow:0 14px 30px rgba(0,0,0,.10);
}

.contact-card > div:hover span{
  color:#ffd0bc;
}

/* ---------- Soft fade-in on scroll ---------- */
.reveal-soft{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .6s ease,transform .6s ease;
}

.reveal-soft.in-view{
  opacity:1;
  transform:none;
}

/* Existing JS observes .reveal, so also ensure components remain visible
   if reveal-soft isn't JS-observed in an older cached JS build. */
@supports not (animation-timeline:view()){
  .reveal-soft{
    opacity:1;
    transform:none;
  }
}

/* ---------- Tablet ---------- */
@media(max-width:1050px){
  #oilfield .oilfield-grid{
    grid-template-columns:1fr;
    gap:38px;
  }

  .oilfield-single-photo img{
    height:440px;
  }

  #oilfield .oilfield-copy{
    max-width:860px;
  }
}

/* ---------- Mobile ---------- */
@media(max-width:760px){
  #oilfield .oilfield-grid{
    gap:28px;
  }

  .oilfield-single-photo{
    border-radius:20px;
  }

  .oilfield-single-photo img{
    height:285px;
  }

  .oilfield-task-box,
  .oilfield-support-note{
    width:100%;
    max-width:100%;
  }

  .btn:hover,
  .header-hotline:hover,
  .service-card:hover,
  .cert-card:hover,
  .why-grid article:hover,
  .brand-promise:hover,
  .brochure-callout:hover,
  .oilfield-task-box:hover,
  .oilfield-support-note:hover,
  .contact-card > div:hover{
    transform:none;
  }
}

/* ---------- Very small screens ---------- */
@media(max-width:430px){
  .oilfield-single-photo img{
    height:235px;
  }

  .oilfield-task-box,
  .oilfield-support-note{
    padding-left:15px;
    padding-right:15px;
  }

  .contact-card > div{
    min-height:auto;
  }
}

/* ---------- Accessibility / reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}