:root{--blue950:#03244a;--blue900:#073b74;--blue800:#0a4b8f;--blue700:#0f62a9;--blue100:#e7f1fa;--blue050:#f4f8fc;--red600:#d72638;--red500:#e33a49;--ink:#15202b;--muted:#617080;--line:#d9e2ea;--white:#fff;--shadow:0 20px 60px rgba(3,36,74,.12);--radius:20px;--container:1180px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:"Source Sans 3",Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.65;-webkit-font-smoothing:antialiased}img{max-width:100%;display:block}a{color:inherit;text-decoration:none}.container{width:min(calc(100% - 40px),var(--container));margin:auto}.section{padding:108px 0}.section-tint{background:var(--blue050)}.section-dark{background:var(--blue950);color:#fff}.skip-link{position:fixed;left:16px;top:-80px;z-index:9999;background:#fff;padding:12px 18px;border-radius:8px}.skip-link:focus{top:16px}h1,h2,h3{font-family:Manrope,Arial,sans-serif;margin:0;line-height:1.12;letter-spacing:-.035em}h1{font-size:clamp(3rem,6vw,6.2rem)}h2{font-size:clamp(2.2rem,4vw,3.9rem)}h3{font-size:1.35rem}p{margin:0}.lead{font-size:1.35rem}.eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:18px;color:var(--blue800);font-family:Manrope;font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.18em}.eyebrow:before{content:"";width:28px;height:3px;background:var(--red600)}.eyebrow.light{color:#d8e9f7}.small-label{font-family:Manrope;text-transform:uppercase;letter-spacing:.14em;font-size:.68rem;font-weight:800;color:var(--blue700)}.section-heading{max-width:740px}.section-heading h2{margin-bottom:22px}.section-heading>p:last-child{color:var(--muted);font-size:1.1rem}.centered{text-align:center;margin:0 auto 54px}.centered .eyebrow{justify-content:center}.split-heading{max-width:none;display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:48px}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;border-radius:8px;font-family:Manrope;font-size:.86rem;font-weight:800;transition:.25s}.btn:hover{transform:translateY(-2px)}.btn-primary{background:var(--blue900);color:#fff}.btn-accent{background:var(--red600);color:#fff}.btn-outline-light{border:1px solid rgba(255,255,255,.6);color:#fff}.btn-outline-light:hover{background:#fff;color:var(--blue950)}.btn-outline-dark{border:1px solid var(--blue900);color:var(--blue900)}.btn-outline-dark:hover{background:var(--blue900);color:#fff}.text-link{display:inline-flex;gap:8px;align-items:center;margin-top:26px;color:var(--blue900);font-family:Manrope;font-weight:800}.site-header{position:absolute;top:0;left:0;right:0;z-index:1000}.topbar{color:rgba(255,255,255,.82);background:rgba(3,36,74,.42);border-bottom:1px solid rgba(255,255,255,.12);font-size:.8rem}.topbar-inner{min-height:38px;display:flex;align-items:center;justify-content:space-between}.topbar p{font-family:Manrope;font-weight:700;letter-spacing:.05em}.topbar p span{color:var(--red500);margin:0 6px}.topbar-contact{display:flex;gap:22px}.navbar{transition:.3s;border-bottom:1px solid rgba(255,255,255,.13)}.site-header.scrolled{position:fixed}.site-header.scrolled .topbar{display:none}.site-header.scrolled .navbar{background:rgba(255,255,255,.98);box-shadow:0 8px 30px rgba(3,36,74,.11);border-color:transparent}.nav-inner{min-height:88px;display:flex;align-items:center;justify-content:space-between}.brand img{width:215px}.site-header:not(.scrolled) .brand img{filter:brightness(0) invert(1)}.nav-panel{display:flex;align-items:center;gap:30px}.nav-links{display:flex;list-style:none;margin:0;padding:0;gap:24px}.nav-links a{position:relative;font-family:Manrope;font-size:.81rem;font-weight:700}.site-header:not(.scrolled) .nav-links a{color:#fff}.nav-links a:after{content:"";position:absolute;left:0;right:100%;bottom:-9px;height:2px;background:var(--red600);transition:.25s}.nav-links a:hover:after,.nav-links a.active:after{right:0}.menu-toggle{display:none;border:0;background:transparent}.menu-toggle span{display:block;width:26px;height:2px;background:currentColor;margin:5px}.hero{min-height:860px;position:relative;display:flex;align-items:center;overflow:hidden;color:#fff;background:var(--blue950)}.hero-art{position:absolute;inset:0;background:url("../images/hero-engineering.svg") center/cover;transform:scale(1.02)}.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,36,74,.97) 0%,rgba(3,36,74,.85) 50%,rgba(3,36,74,.3) 100%),linear-gradient(0deg,rgba(3,36,74,.45),transparent 48%)}.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) 330px;align-items:end;gap:80px;padding-top:150px}.hero-content{max-width:820px}.hero h1 span{color:#79c6f4}.hero-copy{max-width:720px;margin-top:28px;font-size:1.25rem;color:rgba(255,255,255,.86)}.hero-actions{display:flex;gap:14px;margin-top:38px}.hero-proof{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:38px;color:rgba(255,255,255,.72);font-weight:600}.hero-proof span:before{content:"";display:inline-block;width:6px;height:6px;margin-right:8px;border-radius:50%;background:var(--red500)}.hero-card{padding:30px;border:1px solid rgba(255,255,255,.2);border-radius:var(--radius);background:rgba(255,255,255,.09);backdrop-filter:blur(14px)}.hero-card-icon{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;margin-bottom:24px;background:var(--red600);font-family:Manrope;font-weight:800}.hero-card .small-label{color:#8ed0f3;margin-bottom:12px}.hero-card h2{font-size:1.45rem;line-height:1.35}.hero-card a{display:inline-flex;gap:10px;margin-top:24px;font-weight:700;color:#9ddafb}.scroll-cue{position:absolute;z-index:3;bottom:28px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;color:rgba(255,255,255,.65);font-size:.72rem;text-transform:uppercase;letter-spacing:.18em}.scroll-cue i{width:1px;height:36px;background:linear-gradient(#fff,transparent)}.intro-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:100px}.intro-copy>p+p{margin-top:20px;color:var(--muted);font-size:1.08rem}.outcomes-grid{margin-top:75px;display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid var(--line)}.outcome-card{padding:38px 28px;border-right:1px solid var(--line)}.outcome-card:last-child{border-right:0}.outcome-card>span{display:block;margin-bottom:32px;color:var(--red600);font-family:Manrope;font-weight:800}.outcome-card h3{margin-bottom:12px}.outcome-card p{color:var(--muted)}.solutions-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.solution-card{min-height:350px;padding:34px;background:#fff;border:1px solid #e0e7ed;border-radius:var(--radius);display:flex;flex-direction:column;transition:.3s}.solution-card:hover{transform:translateY(-7px);box-shadow:var(--shadow);border-color:transparent}.solution-card.featured{background:var(--blue900);color:#fff;border-color:var(--blue900)}.solution-icon{width:56px;height:56px;display:grid;place-items:center;margin-bottom:36px;border-radius:14px;background:var(--blue100);color:var(--blue900);font-size:1.8rem;font-weight:800}.featured .solution-icon{background:rgba(255,255,255,.14);color:#fff}.featured .small-label{color:#8ed0f3}.solution-card h3{font-size:1.55rem;margin:10px 0 15px}.solution-card p:not(.small-label){color:var(--muted)}.featured p:not(.small-label){color:rgba(255,255,255,.75)}.solution-card a{display:inline-flex;gap:9px;margin-top:auto;padding-top:28px;color:var(--blue900);font-weight:800}.featured a{color:#fff}.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}.why-visual{min-height:600px;position:relative;overflow:hidden;border-radius:26px;background:linear-gradient(145deg,rgba(7,59,116,.15),rgba(7,59,116,.9)),url("../images/hero-engineering.svg") center/cover}.visual-panel{position:absolute;left:36px;right:36px;bottom:36px;padding:30px;color:#fff;background:rgba(3,36,74,.8);backdrop-filter:blur(10px);border-radius:var(--radius)}.visual-panel span{display:block;margin-bottom:18px;color:#a7ddf8;text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;font-weight:800}.visual-panel strong{display:block;font-family:Manrope;font-size:2rem;line-height:1.15}.why-content>p:not(.eyebrow){margin:24px 0 30px;color:var(--muted);font-size:1.08rem}.check-list{list-style:none;margin:0;padding:0;display:grid;gap:20px}.check-list li{display:grid;grid-template-columns:38px 1fr;gap:14px}.check-list li>span{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:var(--blue100);color:var(--blue900);font-weight:900}.check-list strong{display:block;font-family:Manrope}.check-list small{display:block;margin-top:4px;color:var(--muted);font-size:.95rem}.projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.project-card{overflow:hidden;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius)}.project-image{height:280px;overflow:hidden}.project-image img{width:100%;height:100%;object-fit:cover;transition:.55s}.project-card:hover img{transform:scale(1.045)}.project-info{padding:28px}.project-info p{color:#8ed0f3;text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;font-weight:800}.project-info h3{margin:11px 0 14px}.project-info span{color:rgba(255,255,255,.58);font-size:.88rem}.lab-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:90px;align-items:center}.lab-brand img{width:150px;margin-bottom:35px}.lab-content>p{color:var(--muted);font-size:1.12rem}.lab-services{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:30px 0}.lab-services span{padding:13px 15px;background:var(--blue050);border-left:3px solid var(--blue700);font-weight:700}.lab-actions{display:flex;gap:12px}.insights-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.insight-card{overflow:hidden;background:#fff;border-radius:var(--radius);box-shadow:0 10px 34px rgba(3,36,74,.07)}.insight-top{height:190px;padding:24px;display:flex;justify-content:space-between;align-items:flex-start;color:#fff;position:relative;overflow:hidden}.insight-top:before{content:"";position:absolute;width:180px;height:180px;right:-40px;bottom:-80px;border:34px solid rgba(255,255,255,.14);border-radius:50%}.testing{background:linear-gradient(135deg,#0b5fa8,#032f61)}.borehole{background:linear-gradient(135deg,#137c91,#07445d)}.pump{background:linear-gradient(135deg,#4e6377,#152c42)}.insight-top span{padding:7px 11px;border:1px solid rgba(255,255,255,.4);border-radius:100px;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em}.insight-top b{font-family:Manrope;font-size:2.6rem;opacity:.22}.insight-body{padding:28px}.insight-body>p{color:var(--red600);text-transform:uppercase;letter-spacing:.1em;font-size:.7rem;font-weight:800}.insight-body h3{min-height:96px;margin:12px 0 22px}.insight-body a{color:var(--blue900);font-weight:800}.cta{background:linear-gradient(120deg,var(--blue900),var(--blue950));color:#fff}.cta-inner{display:flex;justify-content:space-between;align-items:center;gap:40px}.cta p:not(.eyebrow){margin-top:18px;color:rgba(255,255,255,.72);font-size:1.12rem}.cta-actions{display:flex;flex-direction:column;gap:12px;min-width:230px}.site-footer{padding:75px 0 24px;background:#021a35;color:rgba(255,255,255,.72)}.footer-grid{display:grid;grid-template-columns:1.5fr .7fr 1fr .8fr;gap:60px}.footer-brand img{width:225px;margin-bottom:24px}.footer-brand .tagline{margin-top:18px;color:#8ed0f3;font-weight:700}.site-footer h3{margin-bottom:20px;color:#fff;font-size:1rem}.site-footer a{display:block;margin:9px 0}.footer-bottom{display:flex;justify-content:space-between;gap:30px;margin-top:55px;padding-top:23px;border-top:1px solid rgba(255,255,255,.12);font-size:.84rem}.floating-contact{position:fixed;right:24px;bottom:24px;z-index:500;width:54px;height:54px;display:grid;place-items:center;border-radius:50%;background:#1da851;color:#fff;font-family:Manrope;font-size:.75rem;font-weight:900;box-shadow:0 12px 30px rgba(0,0,0,.2)}.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s}.reveal.visible{opacity:1;transform:none}.delay-1{transition-delay:.1s}.delay-2{transition-delay:.2s}.delay-3{transition-delay:.3s}@media(max-width:1050px){.nav-links{gap:15px}.nav-links a{font-size:.75rem}.nav-cta{display:none}.hero-grid{grid-template-columns:1fr}.hero-card{display:none}.outcomes-grid{grid-template-columns:1fr 1fr}.solutions-grid,.projects-grid,.insights-grid{grid-template-columns:1fr 1fr}.footer-grid{grid-template-columns:1.5fr 1fr 1fr}}@media(max-width:820px){.section{padding:80px 0}.topbar{display:none}.nav-inner{min-height:76px}.brand img{width:185px}.menu-toggle{display:block;z-index:5;color:#fff}.site-header.scrolled .menu-toggle{color:var(--ink)}.nav-panel{position:fixed;inset:0 0 auto 0;min-height:100vh;padding:110px 28px 35px;flex-direction:column;align-items:stretch;background:#fff;transform:translateY(-105%);transition:.35s}.nav-panel.open{transform:none}.nav-links{flex-direction:column}.nav-links a,.site-header:not(.scrolled) .nav-links a{display:block;padding:16px 0;color:var(--ink);font-size:1rem}.nav-cta{display:inline-flex}.hero{min-height:790px}.hero-grid{padding-top:120px}.hero-proof{display:none}.intro-grid,.why-grid,.lab-grid{grid-template-columns:1fr;gap:48px}.outcomes-grid,.solutions-grid{grid-template-columns:1fr}.outcome-card{border-right:0;border-bottom:1px solid var(--line)}.split-heading,.cta-inner{align-items:flex-start;flex-direction:column}.cta-actions{flex-direction:row}.footer-grid{grid-template-columns:1fr 1fr}}@media(max-width:600px){.container{width:min(calc(100% - 28px),var(--container))}h1{font-size:clamp(2.65rem,13vw,4rem)}h2{font-size:2.25rem}.hero-actions,.lab-actions,.cta-actions{flex-direction:column}.hero-actions .btn,.lab-actions .btn,.cta-actions .btn{width:100%}.projects-grid,.insights-grid{grid-template-columns:1fr}.lab-services{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}.footer-bottom{flex-direction:column}}


/* ==========================================================
   BECOM HOMEPAGE VERSION 2 — AUTHENTIC BRANDING & PHOTOGRAPHY
   ========================================================== */

.brand {
  display: flex;
  align-items: center;
  width: 230px;
  height: 72px;
  overflow: hidden;
  border-radius: 5px;
}

.brand .approved-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
  padding: 3px 5px;
}

.site-header:not(.scrolled) .brand .approved-logo {
  filter: none;
  box-shadow: 0 4px 18px rgba(0,0,0,.10);
}

.footer-brand .footer-approved-logo {
  width: 245px;
  max-height: 105px;
  object-fit: contain;
  background: #fff;
  padding: 7px;
  border-radius: 5px;
}

.lab-brand .approved-lab-logo {
  width: 180px;
  max-height: 180px;
  object-fit: contain;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 14px 38px rgba(3,36,74,.12);
}

.hero-art {
  background-position: center 58%;
  filter: saturate(.9) contrast(1.03);
}

.hero-overlay {
  background:
    linear-gradient(90deg, rgba(3,36,74,.98) 0%, rgba(3,36,74,.88) 48%, rgba(3,36,74,.46) 100%),
    linear-gradient(0deg, rgba(3,36,74,.58), transparent 52%);
}

.project-image img {
  filter: saturate(.92) contrast(1.04);
}

.gallery-intro {
  max-width: 430px;
  color: var(--muted);
  font-size: 1.04rem;
}

.field-gallery {
  background: #fff;
}

.field-gallery-grid {
  display: grid;
  grid-template-columns: 1.25fr .75fr .75fr;
  grid-template-rows: 250px 250px;
  gap: 18px;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  margin: 0;
  border-radius: var(--radius-md);
  background: var(--blue-050);
  min-height: 0;
}

.gallery-large {
  grid-row: 1 / 3;
}

.gallery-item:nth-child(4) {
  grid-column: 2 / 4;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s ease, filter .55s ease;
}

.gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(3,36,74,.82), transparent 52%);
}

.gallery-item figcaption {
  position: absolute;
  z-index: 2;
  left: 22px;
  right: 22px;
  bottom: 18px;
  color: #fff;
  font-family: "Manrope";
  font-weight: 800;
  letter-spacing: -.01em;
}

.gallery-item:hover img {
  transform: scale(1.045);
  filter: saturate(1.05);
}

@media (max-width: 820px) {
  .brand {
    width: 190px;
    height: 62px;
  }

  .field-gallery-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 300px 220px 220px;
  }

  .gallery-large {
    grid-column: 1 / 3;
    grid-row: auto;
  }

  .gallery-item:nth-child(4) {
    grid-column: 1 / 3;
  }
}

@media (max-width: 600px) {
  .brand {
    width: 165px;
    height: 56px;
  }

  .field-gallery-grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 245px);
  }

  .gallery-large,
  .gallery-item:nth-child(4) {
    grid-column: auto;
  }
}


/* ==========================================================
   BECOM HOMEPAGE VERSION 3 — CORRECTED IMAGE PLACEMENT
   ========================================================== */

.lab-v3-grid {
  display: grid;
  grid-template-columns: minmax(310px, .82fr) 1.18fr;
  gap: clamp(36px, 6vw, 80px);
  align-items: center;
}

.lab-v3-visual {
  display: grid;
  grid-template-columns: 42% 58%;
  min-height: 430px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: #fff;
}

.lab-logo-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 18px;
  background: #fff;
}

.lab-logo-panel img {
  width: 100%;
  max-width: 210px;
  height: auto;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
}

.lab-photo {
  width: 100%;
  height: 100%;
  min-height: 430px;
  object-fit: cover;
  object-position: center;
}

.field-evidence {
  background: var(--blue-050);
}

.evidence-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.evidence-card {
  margin: 0;
  background: #fff;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.evidence-card img {
  width: 100%;
  height: 260px;
  object-fit: cover;
}

.evidence-card figcaption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 22px 24px;
}

.evidence-card strong {
  color: var(--blue-950);
  font-family: "Manrope";
  font-size: 1.05rem;
}

.evidence-card span {
  color: var(--muted);
}

@media (max-width: 900px) {
  .lab-v3-grid {
    grid-template-columns: 1fr;
  }

  .lab-v3-visual {
    max-width: 720px;
  }

  .evidence-grid {
    grid-template-columns: 1fr;
  }

  .evidence-card img {
    height: 300px;
  }
}

@media (max-width: 600px) {
  .lab-v3-visual {
    grid-template-columns: 1fr;
  }

  .lab-logo-panel {
    min-height: 230px;
  }

  .lab-photo {
    min-height: 300px;
  }
}


/* ==========================================================
   BECOM PREMIUM HOMEPAGE EDITION
   ========================================================== */
:root {
  --premium-gold: #c9a24c;
  --premium-ink: #071d35;
}

.premium-homepage {
  background: #fbfcfe;
}

.premium-homepage .site-header {
  backdrop-filter: blur(16px);
}

.premium-homepage .navbar {
  box-shadow: 0 12px 34px rgba(3,36,74,.08);
}

.premium-homepage .hero {
  min-height: 820px;
}

.premium-homepage .hero-art {
  transform: scale(1.015);
  filter: saturate(.92) contrast(1.08);
}

.premium-homepage .hero-overlay {
  background:
    linear-gradient(90deg, rgba(3,25,52,.98) 0%, rgba(3,36,74,.91) 45%, rgba(3,36,74,.38) 100%),
    linear-gradient(0deg, rgba(1,18,38,.76), transparent 58%);
}

.hero-kicker {
  margin: -6px 0 22px;
  color: rgba(255,255,255,.72);
  font-family: "Manrope";
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.premium-homepage .hero h1 {
  max-width: 820px;
  letter-spacing: -.045em;
  text-shadow: 0 8px 35px rgba(0,0,0,.22);
}

.premium-homepage .hero h1 span {
  color: #fff;
  position: relative;
}

.premium-homepage .hero h1 span::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -.08em;
  width: 58%;
  height: 4px;
  background: linear-gradient(90deg, var(--premium-gold), transparent);
  border-radius: 50px;
}

.premium-homepage .hero-card {
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(255,255,255,.5);
  box-shadow: 0 30px 80px rgba(1,18,38,.32);
  backdrop-filter: blur(18px);
}

.premium-homepage .section-heading h2,
.premium-homepage .lab-content h2,
.premium-homepage .why-content h2 {
  letter-spacing: -.035em;
}

.premium-homepage .solution-card,
.premium-homepage .outcome-card,
.premium-homepage .insight-card,
.premium-homepage .evidence-card {
  border: 1px solid rgba(7,59,116,.08);
  box-shadow: 0 18px 50px rgba(3,36,74,.07);
}

.premium-homepage .solution-card:hover,
.premium-homepage .outcome-card:hover,
.premium-homepage .evidence-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 70px rgba(3,36,74,.13);
}

.premium-homepage .projects-grid {
  gap: 26px;
}

.premium-homepage .project-card {
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
}

.premium-homepage .project-image {
  height: 320px;
}

.premium-homepage .lab {
  background:
    radial-gradient(circle at 8% 15%, rgba(8,112,185,.10), transparent 31%),
    linear-gradient(135deg, #f8fbff 0%, #ffffff 58%, #f4f8fc 100%);
}

.premium-homepage .lab-v3-grid {
  grid-template-columns: minmax(420px,.95fr) 1.05fr;
}

.premium-homepage .lab-v3-visual {
  min-height: 500px;
  grid-template-columns: 48% 52%;
  border-radius: 22px;
  background: #eef5fa;
  box-shadow: 0 35px 90px rgba(3,36,74,.18);
}

.paper-presentation {
  position: relative;
  padding: 34px;
  background:
    linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.55)),
    repeating-linear-gradient(0deg, #f7f3e9 0, #f7f3e9 2px, #f2ede1 3px, #f2ede1 4px);
}

.paper-presentation::before {
  content: "";
  position: absolute;
  inset: 22px;
  background: #fffefa;
  border: 1px solid #e7dfcf;
  box-shadow: 0 18px 45px rgba(36,31,20,.18);
  transform: rotate(-1.3deg);
}

.paper-presentation img {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 255px;
  border-radius: 0;
  box-shadow: none;
  mix-blend-mode: normal;
}

.paper-pin {
  position: absolute;
  z-index: 3;
  top: 38px;
  left: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #b53a3a;
  box-shadow: 0 3px 7px rgba(0,0,0,.28);
}

.premium-homepage .lab-photo {
  min-height: 500px;
  filter: saturate(.88) contrast(1.04);
}

.premium-homepage .lab-services span {
  background: #fff;
  border: 1px solid rgba(7,59,116,.12);
  box-shadow: 0 9px 22px rgba(3,36,74,.06);
}

.premium-homepage .cta-inner {
  border-radius: 24px;
  background:
    linear-gradient(105deg, rgba(3,36,74,.98), rgba(7,82,145,.93)),
    url("../images/becom-survey-team.jpg") center/cover;
  box-shadow: 0 35px 80px rgba(3,36,74,.20);
}

@media (max-width: 900px) {
  .premium-homepage .hero { min-height: 760px; }
  .premium-homepage .lab-v3-grid { grid-template-columns: 1fr; }
  .premium-homepage .lab-v3-visual { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .premium-homepage .hero { min-height: 720px; }
  .premium-homepage .lab-v3-visual { grid-template-columns: 1fr; }
  .paper-presentation { min-height: 330px; }
}


/* ==========================================================
   ABOUT BECOM PAGE
   ========================================================== */

.about-page {
  background: #fff;
}

.about-page .site-header {
  position: relative;
}

.page-hero {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: end;
  overflow: hidden;
  background: var(--blue-950);
}

.page-hero-image,
.page-hero-overlay {
  position: absolute;
  inset: 0;
}

.about-hero .page-hero-image {
  background: url("../images/becom-survey-team.jpg") center 42% / cover no-repeat;
  transform: scale(1.02);
}

.page-hero-overlay {
  background:
    linear-gradient(90deg, rgba(3,36,74,.97) 0%, rgba(3,36,74,.82) 50%, rgba(3,36,74,.42) 100%),
    linear-gradient(0deg, rgba(3,36,74,.85), transparent 52%);
}

.page-hero-content {
  position: relative;
  z-index: 2;
  max-width: 850px;
  padding-top: 140px;
  padding-bottom: 72px;
  color: #fff;
}

.page-hero h1 {
  max-width: 820px;
  margin: 14px 0 22px;
  font-size: clamp(2.6rem, 6vw, 5.1rem);
  line-height: .98;
  letter-spacing: -.055em;
}

.page-hero-content > p:not(.eyebrow) {
  max-width: 700px;
  font-size: 1.18rem;
  line-height: 1.7;
  color: rgba(255,255,255,.84);
}

.breadcrumb {
  display: flex;
  gap: 11px;
  align-items: center;
  margin-top: 34px;
  font-size: .9rem;
  color: rgba(255,255,255,.72);
}

.breadcrumb a {
  color: #fff;
}

.about-overview-grid,
.credentials-grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(40px, 7vw, 96px);
  align-items: start;
}

.about-overview-copy p {
  color: var(--muted);
}

.about-overview-copy .lead {
  color: var(--blue-950);
}

.company-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 66px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.company-facts article {
  padding: 34px 26px;
  border-right: 1px solid var(--line);
}

.company-facts article:last-child {
  border-right: 0;
}

.company-facts strong,
.company-facts span {
  display: block;
}

.company-facts strong {
  color: var(--blue-950);
  font-family: "Manrope";
  font-size: clamp(1.55rem, 3vw, 2.5rem);
  line-height: 1;
}

.company-facts span {
  margin-top: 10px;
  color: var(--muted);
}

.purpose-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.purpose-card {
  min-height: 330px;
  padding: 36px;
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.purpose-card span,
.process-step span {
  color: var(--red);
  font-family: "Manrope";
  font-weight: 800;
  letter-spacing: .08em;
}

.purpose-card h3 {
  margin: 65px 0 16px;
  color: var(--blue-950);
  font-size: 1.55rem;
}

.purpose-card p {
  color: var(--muted);
}

.values-layout {
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: clamp(42px, 7vw, 92px);
}

.values-intro {
  position: sticky;
  top: 130px;
  align-self: start;
}

.values-intro p:last-child {
  color: var(--muted);
}

.values-grid {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.value-item {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 22px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}

.value-item b {
  color: var(--red);
  font-family: "Manrope";
}

.value-item h3 {
  margin: 0 0 8px;
  color: var(--blue-950);
}

.value-item p {
  margin: 0;
  color: var(--muted);
}

.journey-grid,
.quality-grid,
.team-preview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(46px, 8vw, 110px);
  align-items: center;
}

.journey-copy p,
.team-preview-content p {
  color: rgba(255,255,255,.75);
}

.timeline {
  border-left: 1px solid rgba(255,255,255,.25);
}

.timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 105px 1fr;
  gap: 22px;
  padding: 0 0 36px 34px;
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 7px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 7px rgba(229,57,53,.13);
}

.timeline-item span {
  color: var(--accent);
  font-family: "Manrope";
  font-weight: 800;
}

.timeline-item h3 {
  margin: 0 0 8px;
  color: #fff;
}

.timeline-item p {
  margin: 0;
  color: rgba(255,255,255,.68);
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.process-step {
  min-height: 245px;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
}

.process-step h3 {
  margin: 44px 0 12px;
  color: var(--blue-950);
}

.process-step p {
  color: var(--muted);
}

.quality-image {
  min-height: 590px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.quality-image img {
  width: 100%;
  height: 590px;
  object-fit: cover;
}

.quality-content > p {
  color: var(--muted);
}

.quality-points {
  display: grid;
  margin-top: 34px;
  border-top: 1px solid var(--line);
}

.quality-points div {
  display: grid;
  gap: 6px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.quality-points strong {
  color: var(--blue-950);
}

.quality-points span {
  color: var(--muted);
}

.credentials-card {
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--blue-950);
  box-shadow: var(--shadow-lg);
}

.credentials-card dl {
  margin: 0;
}

.credentials-card dl div {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 22px;
  padding: 20px 26px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.credentials-card dl div:last-child {
  border-bottom: 0;
}

.credentials-card dt {
  color: rgba(255,255,255,.58);
}

.credentials-card dd {
  margin: 0;
  color: #fff;
  font-weight: 600;
}

.discipline-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.discipline-cloud span {
  padding: 14px 18px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  color: #fff;
  background: rgba(255,255,255,.05);
}

@media (max-width: 950px) {
  .about-overview-grid,
  .credentials-grid,
  .values-layout,
  .journey-grid,
  .quality-grid,
  .team-preview-grid {
    grid-template-columns: 1fr;
  }

  .company-facts,
  .purpose-grid,
  .process-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .values-intro {
    position: static;
  }

  .quality-image,
  .quality-image img {
    min-height: 420px;
    height: 420px;
  }
}

@media (max-width: 620px) {
  .page-hero {
    min-height: 510px;
  }

  .page-hero-content {
    padding-top: 90px;
    padding-bottom: 52px;
  }

  .company-facts,
  .purpose-grid,
  .process-grid {
    grid-template-columns: 1fr;
  }

  .company-facts article {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .company-facts article:last-child {
    border-bottom: 0;
  }

  .timeline-item {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .credentials-card dl div {
    grid-template-columns: 1fr;
    gap: 5px;
  }
}


.director-caption{
background:#073b74;
color:#fff;
padding:18px 22px;
}
.director-caption h3{margin:0 0 6px 0;color:#fff;}
.director-caption p{margin:0;color:rgba(255,255,255,.82);}
.quality-image img{
object-position:center top;
}

/* ==========================================================
   BECOM LAUNCH V1 — MULTIPAGE WEBSITE
   ========================================================== */
.page-hero.compact{min-height:540px;background:linear-gradient(115deg,rgba(3,36,74,.98),rgba(7,59,116,.88)),url('../images/Pipeline Survey.jpg') center/cover;color:#fff;display:flex;align-items:end;position:relative}
.page-hero.compact .page-hero-content{padding:180px 0 72px;max-width:860px}
.page-hero.compact h1{font-size:clamp(2.8rem,5vw,5.1rem);margin-bottom:20px}
.page-hero.compact p{max-width:760px;color:rgba(255,255,255,.82);font-size:1.18rem}
.page-hero.compact .eyebrow{color:#bfe4fa}.page-hero.compact .eyebrow:before{background:var(--red600)}
.content-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:start}
.content-copy p{margin-bottom:18px;color:var(--muted);font-size:1.08rem}
.content-copy .lead{color:var(--ink);font-size:1.32rem}
.image-frame{overflow:hidden;border-radius:var(--radius);box-shadow:var(--shadow);background:var(--blue050)}
.image-frame img{width:100%;height:100%;object-fit:cover}
.service-detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:46px}
.service-detail{padding:34px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.service-detail h3{font-size:1.55rem;margin:14px 0}.service-detail p{color:var(--muted);margin-bottom:18px}.service-detail ul{margin:0;padding-left:20px;color:var(--muted)}
.service-tag{display:inline-block;color:var(--blue800);font:800 .72rem Manrope;text-transform:uppercase;letter-spacing:.12em}
.project-feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.project-feature{overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:0 12px 35px rgba(3,36,74,.06)}
.project-feature img{width:100%;height:285px;object-fit:cover}.project-feature-body{padding:28px}.project-feature-body h3{font-size:1.55rem;margin:10px 0 12px}.project-feature-body p{color:var(--muted)}
.project-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.project-meta span{padding:6px 10px;border-radius:999px;background:var(--blue050);color:var(--blue800);font-size:.76rem;font-weight:800}
.quote-panel{padding:38px;border-left:5px solid var(--red600);background:var(--blue050);border-radius:0 var(--radius) var(--radius) 0}.quote-panel blockquote{margin:0;color:var(--blue950);font:700 1.45rem/1.45 Manrope}.quote-panel cite{display:block;margin-top:18px;color:var(--muted);font-style:normal}
.profile-grid{display:grid;grid-template-columns:360px 1fr;gap:68px;align-items:start}.portrait-card img{width:100%;height:470px;object-fit:cover;object-position:center top;border-radius:var(--radius);box-shadow:var(--shadow)}.portrait-card .caption{padding:18px 4px}.portrait-card .caption strong{display:block;font:800 1.1rem Manrope;color:var(--blue950)}.portrait-card .caption span{color:var(--muted)}
.principles-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.principle{padding:28px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}.principle b{color:var(--red600);font:800 .8rem Manrope}.principle h3{margin:14px 0 10px}.principle p{color:var(--muted)}
.network-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.network-card{padding:30px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}.network-card h3{margin:12px 0}.network-card p{color:var(--muted)}
.lab-process{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:38px}.lab-step{padding:22px 14px;text-align:center;border-radius:var(--radius);background:var(--blue050);font-weight:800;color:var(--blue950)}.lab-step b{display:block;color:var(--red600);font-size:.75rem;margin-bottom:8px}
.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px}.contact-card{padding:34px;border-radius:var(--radius);background:var(--blue950);color:#fff}.contact-card h3{margin-bottom:18px}.contact-card p,.contact-card a{color:rgba(255,255,255,.78)}.contact-card a{display:block;margin:10px 0}.rfq-form{display:grid;grid-template-columns:1fr 1fr;gap:18px}.rfq-form .full{grid-column:1/-1}.rfq-form label{display:block;margin-bottom:6px;font-weight:700;color:var(--blue950)}.rfq-form input,.rfq-form select,.rfq-form textarea{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:8px;font:inherit;background:#fff}.rfq-form textarea{min-height:150px;resize:vertical}.form-note{grid-column:1/-1;color:var(--muted);font-size:.9rem}
.site-header.inner{position:absolute}.site-header.inner .topbar{background:rgba(3,36,74,.7)}
.site-header.inner:not(.scrolled) .brand img{filter:none}
.page-intro{max-width:760px;margin-bottom:46px}.page-intro p{color:var(--muted);font-size:1.08rem}
.feature-list{display:grid;gap:14px;margin-top:26px}.feature-list div{display:grid;grid-template-columns:32px 1fr;gap:12px}.feature-list b{width:28px;height:28px;display:grid;place-items:center;background:var(--blue100);border-radius:50%;color:var(--blue900)}.feature-list p{color:var(--muted)}
@media(max-width:950px){.content-grid,.profile-grid,.contact-grid{grid-template-columns:1fr}.principles-grid{grid-template-columns:1fr 1fr}.network-grid{grid-template-columns:1fr 1fr}.lab-process{grid-template-columns:1fr 1fr}.project-feature-grid,.service-detail-grid{grid-template-columns:1fr}.portrait-card{max-width:420px}}
@media(max-width:620px){.principles-grid,.network-grid,.lab-process,.rfq-form{grid-template-columns:1fr}.rfq-form .full{grid-column:auto}.page-hero.compact .page-hero-content{padding-top:145px}.project-feature img{height:230px}}

/* Launch v2 review corrections — 7 September 2026 */
.hero-art{background-image:url("../images/becom-survey-team.jpg")!important;background-size:cover;background-position:center 46%!important}
.brand{height:70px;width:230px;background:#fff}
.brand .approved-logo{width:100%;height:100%;object-fit:contain;padding:0!important}
.footer-brand .footer-approved-logo{padding:0!important;object-fit:contain}
.service-detail{overflow:hidden;padding:0 34px 34px}
.service-photo{width:calc(100% + 68px);height:240px;object-fit:cover;margin:0 -34px 30px}
.project-feature>img{width:100%;height:320px;object-fit:contain;background:#eef3f7;padding:8px}
.project-feature:nth-child(2)>img,.project-feature:nth-child(4)>img{object-fit:contain}
.content-grid .image-frame img{object-fit:cover}
@media(max-width:600px){.service-photo{height:210px}.project-feature>img{height:260px}}

/* Version 2.1 — true logo crop/display correction */
.brand{
  width:150px!important;
  height:100px!important;
  background:#fff;
  overflow:hidden;
  border-radius:4px;
  flex:0 0 auto;
}
.brand .approved-logo{
  width:100%!important;
  height:100%!important;
  display:block;
  object-fit:contain!important;
  padding:0!important;
  margin:0!important;
}
.nav-inner{min-height:116px}
.footer-brand .footer-approved-logo{
  width:180px!important;
  height:auto!important;
  max-height:none!important;
  object-fit:contain!important;
  padding:0!important;
  margin-bottom:24px;
}
@media(max-width:820px){
  .brand{width:120px!important;height:80px!important}
  .nav-inner{min-height:94px}
}

/* Version 3 — approved visual identity updates, 8 September 2026 */
/* Exact approved BECOM logo with white image background removed. */
.brand{
  width:185px!important;
  height:94px!important;
  background:transparent!important;
  overflow:visible!important;
  border-radius:0!important;
}
.brand .approved-logo{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  filter:none!important;
  background:transparent!important;
}
.footer-brand .footer-approved-logo{
  width:210px!important;
  height:auto!important;
  filter:none!important;
  background:transparent!important;
}

/* Home hero uses the approved BECOM water-treatment engineering schematic. */
.hero{
  background:#edf7fc!important;
}
.hero-art{
  background-image:url("../images/water-treatment-system.png")!important;
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  transform:scale(1.01)!important;
}
.hero-overlay{
  background:
    linear-gradient(90deg,rgba(3,36,74,.74) 0%,rgba(3,36,74,.66) 35%,rgba(3,36,74,.46) 62%,rgba(3,36,74,.13) 100%),
    linear-gradient(0deg,rgba(3,36,74,.38),rgba(3,36,74,.04) 55%)!important;
}

/* Keep the full official BOKA LAB mark visible without distortion. */
.boka-lab-official-logo{
  width:190px;
  max-width:46vw;
  height:auto;
  object-fit:contain;
  margin:0 0 24px;
}

@media(max-width:820px){
  .brand{width:150px!important;height:78px!important}
  .hero-art{background-size:auto 100%!important;background-position:58% center!important}
  .hero-overlay{background:linear-gradient(90deg,rgba(3,36,74,.97) 0%,rgba(3,36,74,.86) 72%,rgba(3,36,74,.52) 100%)!important}
}

/* ==========================================================
   V3.1 — BRIGHTER INTERNAL PAGE BANNERS
   ========================================================== */
.page-hero.compact {
  min-height: 500px;
  background:
    linear-gradient(115deg,
      rgba(7, 72, 126, .80) 0%,
      rgba(15, 103, 157, .68) 48%,
      rgba(21, 139, 151, .50) 100%),
    url('../images/Pipeline Survey.jpg') center 46% / cover no-repeat;
  color: #fff;
}
.page-hero.compact::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(3,36,74,.24) 0%, rgba(255,255,255,.05) 60%, rgba(255,255,255,.12) 100%);
}
.page-hero.compact .page-hero-content {
  position: relative;
  z-index: 2;
  padding: 165px 0 68px;
}
.page-hero.compact h1 {
  text-shadow: 0 2px 18px rgba(2,31,59,.18);
}
.page-hero.compact p {
  color: rgba(255,255,255,.94);
}
.page-hero.compact .eyebrow {
  color: #e2f5ff;
}

/* ==========================================================
   V3.2 — VERY LIGHT INTERNAL PAGE BANNERS
   Inspired by the pale blue water tone in the elevated treated-water tank.
   ========================================================== */
.page-hero.compact {
  background:
    linear-gradient(110deg,
      rgba(151, 215, 242, .72) 0%,
      rgba(174, 226, 247, .62) 42%,
      rgba(202, 238, 249, .46) 72%,
      rgba(226, 247, 252, .30) 100%),
    url('../images/Pipeline Survey.jpg') center 46% / cover no-repeat;
}
.page-hero.compact::after {
  background:
    linear-gradient(90deg, rgba(230,248,255,.20) 0%, rgba(255,255,255,.08) 58%, rgba(255,255,255,.18) 100%),
    linear-gradient(0deg, rgba(6,72,116,.10) 0%, rgba(255,255,255,.04) 68%, rgba(255,255,255,.12) 100%);
}
.page-hero.compact .page-hero-content {
  color: #073b74;
}
.page-hero.compact h1 {
  color: #073b74;
  text-shadow: 0 1px 10px rgba(255,255,255,.62);
}
.page-hero.compact p {
  color: #123f63;
  text-shadow: 0 1px 8px rgba(255,255,255,.72);
}
.page-hero.compact .eyebrow {
  color: #07558f;
  text-shadow: 0 1px 7px rgba(255,255,255,.7);
}


/* ==========================================================
   FINAL LAUNCH REFINEMENTS
   ========================================================== */
/* Improve About-page banner supporting text contrast only. */
.about-page .page-hero.compact .page-hero-content > p:not(.eyebrow){
  color:#07345c;
  font-weight:600;
  text-shadow:0 1px 8px rgba(255,255,255,.88);
}

/* Softer footer blue for improved logo and text legibility. */
.site-footer{
  background:#0b4675;
  color:rgba(255,255,255,.88);
}
.site-footer h3{color:#fff;}
.site-footer a{color:rgba(255,255,255,.94);}
.site-footer .footer-brand .tagline{color:#d6f0ff;}
.footer-brand .footer-approved-logo{
  background:#fff;
  padding:10px 14px!important;
  border-radius:8px;
}
.footer-bottom{border-top-color:rgba(255,255,255,.22);}

/* Final footer logo contrast correction: white logo lettering on blue footer. */
.footer-brand .footer-approved-logo{
  background:transparent!important;
  padding:0!important;
  border-radius:0!important;
}