:root{--ink:#031522;--ink2:#061f2e;--panel:#082333;--cyan:#11d8f4;--cyan2:#4fe8fb;--white:#f7fafc;--muted:#b9c8d2;--line:rgba(17,216,244,.35);--max:1200px;--radius:2px;--shadow:0 22px 70px rgba(0,0,0,.24)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ink);color:var(--white);font-family:Inter,Arial,Helvetica,sans-serif;line-height:1.52;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}img{max-width:100%;display:block}.wrap{width:min(var(--max),calc(100% - 42px));margin:auto}.eyebrow{font-size:.78rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);margin-bottom:12px}.dot{color:var(--cyan)}.muted{color:var(--muted)}
.site-header{position:sticky;top:0;z-index:50;background:rgba(3,21,34,.92);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.06)}.nav{height:86px;display:flex;align-items:center;gap:28px}.brand{display:flex;flex-direction:column;min-width:220px}.brand-bond{font-size:2.25rem;line-height:.85;font-weight:950;letter-spacing:.06em}.brand-bond span{position:relative}.brand-bond span:after{content:"";position:absolute;left:34%;right:34%;top:48%;height:7px;background:var(--cyan);z-index:-1;border-radius:7px}.brand-recruit{margin-top:8px;color:var(--cyan);letter-spacing:.36em;font-size:.95rem}.brand-desc{font-size:.67rem;color:#d8e4eb;margin-top:10px;letter-spacing:.03em}.nav-links{display:flex;gap:30px;margin-left:auto;align-items:center}.nav-links a{font-size:.76rem;font-weight:800;letter-spacing:.05em;padding:33px 0 28px;border-bottom:3px solid transparent}.nav-links a:hover,.nav-links a.active{border-color:var(--cyan)}.top-phone{border:1px solid var(--cyan);padding:12px 18px;font-weight:800;letter-spacing:.06em;white-space:nowrap}.menu-toggle{display:none;margin-left:auto;background:none;border:0;color:white;font-size:1.7rem;cursor:pointer}
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}.hero .wrap{min-height:560px;display:grid;grid-template-columns:1.02fr .98fr;align-items:stretch}.hero-copy{padding:78px 32px 70px 0;align-self:center;z-index:2}.hero h1{margin:0;font-size:clamp(3.2rem,6vw,5.8rem);line-height:.94;text-transform:uppercase;letter-spacing:-.04em;max-width:760px}.hero p{font-size:1.07rem;color:#e3edf2;max-width:650px;margin:24px 0 0}.strap{display:flex;gap:28px;margin:32px 0 0;text-transform:uppercase;letter-spacing:.23em;font-size:.84rem}.strap span+span{position:relative}.strap span+span:before{content:"";position:absolute;left:-16px;top:.15em;height:1.1em;width:2px;background:var(--cyan)}.actions{display:flex;gap:18px;flex-wrap:wrap;margin-top:34px}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 27px;border:1px solid var(--cyan);font-size:.82rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase;transition:.2s}.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(17,216,244,.12)}.btn.primary{background:var(--cyan);color:#00141d}.hero-image{position:relative;min-height:100%;background-position:center;background-size:cover}.hero-image:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--ink) 0%,rgba(3,21,34,.25) 42%,rgba(3,21,34,.02) 70%)}.hero-image:after{content:"";position:absolute;inset:auto 0 0;background:linear-gradient(0deg,var(--ink),transparent);height:120px}.hero-home .hero-image{background-image:url('assets/hero-home.jpg')}.hero-clients .hero-image{background-image:url('assets/hero-clients.jpg')}.hero-engineers .hero-image{background-image:url('assets/hero-engineers.jpg')}.hero-about .hero-image{background-image:url('assets/hero-about.jpg')}.hero-contact .hero-image{background-image:url('assets/hero-contact.jpg')}
.section{padding:74px 0;border-bottom:1px solid var(--line)}.section.tight{padding:55px 0}.section h2{font-size:clamp(2.25rem,4vw,4rem);line-height:1;text-transform:uppercase;letter-spacing:-.035em;margin:0 0 28px}.section p{color:#d8e2e8}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:76px;align-items:center}.role-list{border-left:1px solid var(--line)}.role{display:flex;align-items:center;gap:20px;min-height:72px;padding:0 0 0 34px;border-bottom:1px solid rgba(255,255,255,.12)}.role:last-child{border-bottom:0}.role-icon{width:42px;height:42px;border:2px solid var(--cyan);display:grid;place-items:center;color:var(--cyan);font-weight:900}.role strong{font-size:1rem}.split-cards{display:grid;grid-template-columns:1fr 1fr}.split-card{min-height:430px;position:relative;overflow:hidden;padding:48px;display:flex;align-items:flex-end;border:1px solid rgba(255,255,255,.06);background:linear-gradient(135deg,var(--ink2),#0a2a3d)}.split-card.photo-home-client{background:linear-gradient(90deg,rgba(3,21,34,.94),rgba(3,21,34,.38)),url('assets/cta-clients.jpg') center/cover}.split-card.photo-engineer{background:linear-gradient(90deg,rgba(3,21,34,.94),rgba(3,21,34,.35)),url('assets/engineer-project.jpg') center/cover}.split-card h3{font-size:2.4rem;line-height:1.02;margin:0 0 15px}.split-card p{max-width:470px}.why{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:center}.why h2{margin:0}.why-copy{font-size:1.08rem}.why-copy strong{color:white}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:0}.card{padding:30px;border-right:1px solid var(--line)}.card:first-child{padding-left:0}.card:last-child{border-right:0}.card-icon{width:56px;height:56px;border:2px solid var(--cyan);display:grid;place-items:center;color:var(--cyan);font-size:1.4rem;font-weight:900;margin-bottom:20px}.card h3{font-size:1.14rem;text-transform:uppercase;margin:0 0 8px}.card p{margin:0;font-size:.93rem}.process{display:grid;grid-template-columns:1.25fr repeat(4,1fr);gap:24px;align-items:start}.step{text-align:center}.step-num{width:38px;height:38px;border:2px solid var(--cyan);border-radius:50%;display:grid;place-items:center;margin:0 auto 16px;color:var(--cyan);font-weight:900}.step h4{text-transform:uppercase;font-size:.83rem;margin:0 0 9px}.step p{font-size:.84rem;margin:0}.logos{display:grid;grid-template-columns:repeat(6,1fr);gap:22px;align-items:center;margin-top:35px}.logos div{color:#b8c3ca;font-weight:900;font-size:1.05rem;filter:grayscale(1);text-align:center}.quote{font-size:1.35rem;font-style:italic;line-height:1.55;padding:36px;border-left:3px solid var(--cyan);background:rgba(255,255,255,.025)}.quote:before,.quote:after{color:var(--cyan);font-size:2.1rem;font-weight:900}.quote:before{content:'“'}.quote:after{content:'”'}.story-media{min-height:370px;background:url('assets/about-story.jpg') center/cover;box-shadow:var(--shadow)}
.cta-band{padding:54px 0;background:linear-gradient(90deg,rgba(3,21,34,.94),rgba(3,21,34,.3)),url('assets/cta-contact.jpg') center/cover;border-bottom:1px solid var(--line)}.cta-band.clients{background-image:linear-gradient(90deg,rgba(3,21,34,.95),rgba(3,21,34,.25)),url('assets/cta-clients.jpg')}.cta-band .wrap{display:flex;justify-content:space-between;gap:40px;align-items:center}.cta-band h2{font-size:2.5rem;line-height:1.05;text-transform:uppercase;margin:0}.cta-band p{margin:10px 0 0;color:#d7e2e8}
.contact-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:80px}.contact-item{display:grid;grid-template-columns:62px 1fr;gap:20px;align-items:center;padding:20px 0;border-bottom:1px solid rgba(255,255,255,.1)}.contact-item .round{width:54px;height:54px;border:2px solid var(--cyan);border-radius:50%;display:grid;place-items:center;color:var(--cyan);font-size:1.2rem}.contact-item strong{display:block;text-transform:uppercase;letter-spacing:.08em;color:var(--cyan);font-size:.83rem}.contact-item span{display:block;margin-top:6px;font-size:1.18rem}.form{display:grid;gap:12px}.form input,.form textarea,.form select{width:100%;background:rgba(255,255,255,.025);border:1px solid #6a7d89;color:white;padding:14px 15px;outline:0}.form textarea{min-height:145px;resize:vertical}.form input:focus,.form textarea:focus,.form select:focus{border-color:var(--cyan)}.form small{color:#879ba7}.success{display:none;margin-top:12px;padding:14px;border:1px solid var(--cyan);color:var(--cyan)}
.job-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.job{padding:24px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.02)}.job h3{margin:0 0 8px}.job .meta{font-size:.86rem;color:var(--muted)}.job a{display:inline-block;margin-top:14px;color:var(--cyan);font-weight:800}
.site-footer{padding:48px 0 26px;background:#02101a}.footer-top{display:flex;align-items:center;justify-content:space-between;gap:30px}.footer-links{display:flex;gap:22px;font-size:.85rem}.footer-bottom{margin-top:36px;padding-top:20px;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;color:#94a7b2;font-size:.78rem;letter-spacing:.04em}
@media(max-width:960px){.nav{height:74px}.brand{min-width:auto}.brand-desc{display:none}.nav-links{display:none;position:absolute;top:74px;left:0;right:0;background:#041927;padding:10px 22px 22px;flex-direction:column;align-items:stretch;gap:0;border-bottom:1px solid var(--line)}.nav-links.open{display:flex}.nav-links a{padding:16px 0;border-bottom:1px solid rgba(255,255,255,.08)}.top-phone{display:none}.menu-toggle{display:block}.hero .wrap{grid-template-columns:1fr;min-height:auto}.hero-copy{padding:64px 0 40px}.hero-image{min-height:330px;margin:0 -21px}.hero h1{font-size:clamp(3rem,12vw,5rem)}.grid-2,.contact-grid,.why{grid-template-columns:1fr;gap:40px}.cards{grid-template-columns:1fr 1fr}.card{border-bottom:1px solid var(--line)}.card:nth-child(2){border-right:0}.process{grid-template-columns:1fr 1fr}.process>div:first-child{grid-column:1/-1}.logos{grid-template-columns:repeat(3,1fr)}.split-cards{grid-template-columns:1fr}.cta-band .wrap{align-items:flex-start;flex-direction:column}.job-grid{grid-template-columns:1fr 1fr}.footer-top{flex-direction:column;align-items:flex-start}.footer-bottom{flex-direction:column;gap:12px}}
@media(max-width:620px){.wrap{width:min(100% - 30px,var(--max))}.brand-bond{font-size:1.75rem}.brand-recruit{font-size:.7rem}.hero-copy{padding-top:45px}.hero h1{font-size:3rem}.hero-image{min-height:250px}.strap{font-size:.68rem;gap:21px;letter-spacing:.13em}.section{padding:54px 0}.section h2{font-size:2.5rem}.split-card{min-height:360px;padding:30px}.cards{grid-template-columns:1fr}.card{border-right:0;padding:26px 0}.process{grid-template-columns:1fr}.process>div:first-child{grid-column:auto}.step{text-align:left;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.1)}.step-num{margin:0 0 12px}.logos{grid-template-columns:1fr 1fr}.job-grid{grid-template-columns:1fr}.footer-links{flex-wrap:wrap}.footer-bottom{font-size:.72rem}.cta-band h2{font-size:2.05rem}.contact-grid{gap:55px}.contact-item{grid-template-columns:54px 1fr}.actions .btn{width:100%}}

/* Final approved Bond Recruit refinements — 09 Sep 2026 */
.brand img{width:170px;height:auto;object-fit:contain}.site-footer .brand img{width:150px}

/* Main hero headings reduced to match the corresponding section heading size. */
.hero-home h1,.hero-clients h1,.hero-engineers h1,.hero-about h1,.hero-contact h1{font-size:clamp(2.25rem,4vw,4rem);line-height:1}

/* Preserve the intended crops: reveal Engineers right-side wording; remove About/Contact right-edge baked wording. */
.hero-engineers .hero-image{background-position:right center}
.hero-about .hero-image,.hero-contact .hero-image{background-position:left center}
.photo-engineer{background-position:80% center!important}

/* About story image and mission statement stay perfectly aligned as one column. */
.story-media{width:100%;background-position:center left}.story-media+.quote{width:100%;margin:0}

/* About and Contact CTAs use a clean construction background with no baked-in duplicate copy. */
.cta-band.about-cta,.hero-contact~.section+.cta-band,.cta-band:not(.clients){background-image:linear-gradient(90deg,rgba(3,21,34,.94),rgba(3,21,34,.3)),url('assets/cta-clean.jpg')}

/* Homepage final CTA keeps the approved baked-in Working Together / Great People wording only. */
.cta-image-only{height:210px;background:url('assets/cta-contact.jpg') center/cover no-repeat;border-bottom:1px solid var(--line);position:relative}.cta-image-link{position:absolute;inset:0;display:block}

@media(max-width:960px){.hero-home h1,.hero-clients h1,.hero-engineers h1,.hero-about h1,.hero-contact h1{font-size:clamp(2.25rem,7vw,4rem)}.hero-engineers .hero-image{background-position:right center}.hero-about .hero-image,.hero-contact .hero-image{background-position:left center}.cta-image-only{height:180px}}
@media(max-width:620px){.hero-home h1,.hero-clients h1,.hero-engineers h1,.hero-about h1,.hero-contact h1{font-size:2.5rem}.brand img{width:145px}.site-footer .brand img{width:135px}.cta-image-only{height:140px}}

/* Approved logo alignment fix - 09 Sep 2026 */
.site-header .brand img,
.site-footer .brand img {
  display: block;
  transform: none !important;
  rotate: 0deg !important;
  margin: 0;
  object-position: left center;
  align-self: flex-start;
}
.site-header .brand {
  align-items: flex-start;
  justify-content: center;
}

/* Engineers project image: show full approved artwork and all right-side wording. */
.engineer-project-media{
  min-height:0;
  aspect-ratio:544 / 325;
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
}
@media(max-width:960px){.engineer-project-media{aspect-ratio:544 / 325;min-height:0}}


/* Final QA pass - 09 Sep 2026 */
.site-header .brand,.site-footer .brand{justify-content:center}
.site-header .brand img,.site-footer .brand img{display:block;max-height:58px;width:auto;max-width:170px;object-fit:contain;object-position:left center;transform:none!important;margin:0}
.site-footer .brand img{max-height:52px;max-width:150px}
.hero-copy{min-width:0}
.hero-image{min-width:0}
.engineer-project-media{background-position:center!important;background-size:cover!important}
.opportunity-panel{display:flex;justify-content:space-between;align-items:center;gap:48px}
.opportunity-panel>div{max-width:720px}
.hp{position:absolute!important;left:-10000px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important}
.thank-you{min-height:58vh;display:flex;align-items:center}.thank-you .wrap{max-width:800px}.thank-you p{font-size:1.1rem;max-width:620px}
.form input,.form textarea,.form select{border-radius:0}
.btn:focus-visible,.nav-links a:focus-visible,.top-phone:focus-visible,.menu-toggle:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
@media(max-width:960px){.opportunity-panel{flex-direction:column;align-items:flex-start}.site-header .brand img{max-height:48px;max-width:145px}.hero-image{background-size:cover}.hero-engineers .hero-image{background-position:72% center}.hero-about .hero-image,.hero-contact .hero-image{background-position:35% center}.engineer-project-media{min-height:300px}}
@media(max-width:620px){.hero h1{line-height:1.02}.section h2{line-height:1.02}.footer-links{row-gap:10px}.strap{flex-wrap:wrap}.brand-desc{display:none}.engineer-project-media{min-height:250px}}


/* Final image/text alignment audit - 09 Sep 2026 */
/* Keep decorative baked text in Home/Clients artwork outside the visible crop. */
.hero-home .hero-image,
.hero-clients .hero-image{
  background-position:right center !important;
}

/* Engineers hero: keep all baked right-side wording inside the visible image area. */
.hero-engineers .hero-image{
  background-position:right center !important;
  background-size:cover;
}

/* Engineers project image: cover the damaged baked wording and render a clean aligned version. */
.engineer-project-media{
  position:relative;
  overflow:hidden;
  background-position:center center !important;
  background-size:cover !important;
}
.engineer-project-media::before{
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  width:44%;
  height:46%;
  background:linear-gradient(90deg,rgba(3,21,34,0),rgba(3,21,34,.78) 34%,rgba(3,21,34,.9));
  pointer-events:none;
}
.engineer-project-media::after{
  content:"REAL PROJECTS.\A REAL OPPORTUNITIES.\A REAL PEOPLE.";
  white-space:pre;
  position:absolute;
  right:7%;
  bottom:14%;
  color:#fff;
  font-size:clamp(.72rem,1.05vw,.95rem);
  line-height:1.65;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-align:left;
  padding-bottom:18px;
  border-bottom:4px solid var(--cyan);
  pointer-events:none;
}

/* Contact artwork deliberately keeps the right-side baked slogan outside the crop. */
.hero-contact .hero-image{
  background-position:24% center !important;
}

/* About hero artwork has no overlay copy; keep subject centred and clean. */
.hero-about .hero-image{
  background-position:38% center !important;
}

/* Restore the approved client network strip. */
.client-strip .logos{
  padding-top:4px;
}

@media(max-width:960px){
  .hero-home .hero-image,.hero-clients .hero-image{background-position:78% center !important}
  .hero-engineers .hero-image{background-position:78% center !important}
  .hero-contact .hero-image{background-position:18% center !important}
  .hero-about .hero-image{background-position:32% center !important}
  .engineer-project-media::before{width:48%;height:48%}
  .engineer-project-media::after{right:5%;bottom:12%;font-size:.75rem}
}
@media(max-width:620px){
  .logos{grid-template-columns:1fr 1fr;gap:18px 10px}
  .engineer-project-media::before{width:58%;height:52%}
  .engineer-project-media::after{right:5%;bottom:10%;font-size:.63rem;letter-spacing:.11em;line-height:1.6;padding-bottom:12px}
}

/* About CTA clean high-resolution banner */
.cta-band.about-cta{
  background-image:linear-gradient(90deg,rgba(3,21,34,.70),rgba(3,21,34,.10)),url('assets/about-cta-clean.png');
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
}

/* Exact approved About CTA banner: flattened approved mock-up, no duplicate live text. */
.about-cta-approved{
  position:relative;
  width:100%;
  aspect-ratio:2048/576;
  background:url('assets/about-cta-approved.png') center center/cover no-repeat;
  border-bottom:1px solid var(--line);
}
.about-cta-hit{
  position:absolute;
  left:75.6%;
  top:30.5%;
  width:19.5%;
  height:23%;
  display:block;
}
@media(max-width:960px){
  .about-cta-approved{aspect-ratio:2048/576;background-size:cover;background-position:center center}
  .about-cta-hit{left:75%;top:29%;width:20%;height:25%}
}
@media(max-width:620px){
  .about-cta-approved{aspect-ratio:16/6;background-position:center center}
}

/* Contact CTA exact approved image: avoid duplicate HTML text over baked artwork */
.contact-cta-exact{height:auto;aspect-ratio:2048/436;background:url('assets/cta-contact.jpg') center/cover no-repeat;position:relative;border-bottom:1px solid var(--line)}
.contact-cta-exact .cta-contact-button-link{position:absolute;left:71.5%;top:35%;width:22.5%;height:31%;display:block}
@media(max-width:960px){.contact-cta-exact{aspect-ratio:2048/560;background-size:cover}.contact-cta-exact .cta-contact-button-link{left:67%;top:34%;width:27%;height:33%}}

/* V10: Home + Contact CTA banners use the same display ratio as the approved About banner. */
.cta-image-only,
.contact-cta-exact{
  height:auto !important;
  aspect-ratio:2103 / 748 !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}
.cta-image-only{background-image:url('assets/cta-contact.jpg') !important;position:relative;border-bottom:1px solid var(--line)}
.contact-cta-exact{background-image:url('assets/cta-contact.jpg') !important}
@media(max-width:960px){
  .cta-image-only,.contact-cta-exact{aspect-ratio:2103 / 748 !important;background-position:center center !important}
}
@media(max-width:620px){
  .cta-image-only,.contact-cta-exact{aspect-ratio:2103 / 748 !important;background-position:center center !important}
}

/* V11: Contact hero - keep the baked-in PEOPLE / PROJECTS / PROGRESS copy fully visible. */
.hero-contact .hero-image{
  background-position:right center !important;
}
@media(max-width:960px){
  .hero-contact .hero-image{background-position:right center !important;}
}

/* V12: level the approved logo asset without altering the artwork. */
.site-header .brand img,
.site-footer .brand img {
  transform: rotate(-0.67deg) !important;
  transform-origin: left center !important;
}

/* V18: Home page engineer split card - mask the unwanted baked-in lower-right slogan only. */
.split-card.photo-engineer::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 34%;
  height: 31%;
  background: linear-gradient(90deg, rgba(3,21,34,0) 0%, rgba(3,21,34,.72) 34%, rgba(3,21,34,.92) 100%);
  pointer-events: none;
  z-index: 1;
}
.split-card.photo-engineer > * {
  position: relative;
  z-index: 2;
}