/* Intrust Security brand layer. Loaded last; overrides the Santeck defaults. */
:root { --brand-accent: #0b7a85; --brand-accent-dark: #095f68; --brand-navy: #020e29; --brand-ink: #151b2c; }
.anti-btn:hover, .ready-btn:hover, .hire-btn:hover { background-color: var(--brand-accent-dark); border-color: var(--brand-accent-dark); }
.intro-area { background: var(--brand-navy) url('../img/bg/hero.svg') center / cover no-repeat; min-height: 560px; }
.intro-area .bg-wrapper, .intro-area .intro-bg { display: none; }
/* Re-skin the two template bands that used deleted photos (white headline text sits on them). */
.page-area { background: var(--brand-navy) url('../img/bg/band.svg') center / cover no-repeat; }
.service-area .service-bg { background: var(--brand-navy) url('../img/bg/band.svg') center / cover no-repeat; }
div#preloader { display: none; }
.cta-band { background: var(--brand-navy) url('../img/bg/band.svg') center / cover no-repeat; color: #fff; padding: 60px 0; text-align: center; }
.cta-band h3 { color: #fff; margin-bottom: 20px; }
.feature-area .feature-images { display: none; }
.feature-area .col-md-6:first-child { display: none; }
.feature-area .col-md-6:last-child { width: 100%; }
.footer-area .footer-logo img { max-height: 44px; }
.service-content h3 a, .well-content h2 { word-break: normal; overflow-wrap: anywhere; }
.legal-lines p { font-size: 12px; line-height: 1.6; color: #9aa3b2; margin: 0; }
.service-points { list-style: none; padding: 0; margin: 0 0 20px; }
.service-points li { padding: 6px 0 6px 28px; position: relative; }
.service-points li i { position: absolute; left: 0; top: 10px; color: var(--brand-accent); }
.vendor-line { color: var(--brand-accent-dark); }
.wordmark { display: block; max-width: 100%; height: auto; }
.contact-security { margin-top: 30px; }

/* ---- Visual pass (Task 6) ---------------------------------------------------------------- */
:root { --brand-accent-light: #5cc6cf; } /* teal for text on navy: 9.5:1 on #020e29 */
/* Bootstrap's default link blue (#337ab7) showed wherever the template had no rule; it is
   off-brand on white and 4.1:1 on navy. Light backgrounds get the dark accent (7.4:1 on white). */
a { color: var(--brand-accent-dark); }
a:focus-visible { outline: 2px solid var(--brand-accent-light); outline-offset: 2px; }
.breadcrumb ul li a, .footer-contacts p a, .footer-contacts p span, .office-city a { color: var(--brand-accent-light); }
.breadcrumb ul li a:hover, .footer-contacts p a:hover, .office-city a:hover { color: #fff; }

/* Topbar: the location item and both icons sit outside any <a>, so they inherited the body grey
   (#6b6d7e on #0a1229 = 3.6:1), and the block-level link pushed each icon onto its own line. */
.topbar-left ul li { color: #d9d9d9; font-size: 14px; letter-spacing: 0.6px; padding: 10px 0; margin-right: 20px; }
.topbar-left ul li:last-child { margin-right: 0; }
.topbar-left ul li a { display: inline; padding: 0; margin-right: 0; color: #d9d9d9; }
.topbar-left ul li a:hover { color: #fff; }
.topbar-left ul li i { color: #fff; font-size: 16px; padding-right: 7px; }

/* Hero. The template styled `.layer-1 h2`; ours is the page h1, which fell back to dark ink on the
   dark gradient. The content now flows below the absolute header instead of being centred on a
   fixed-height photo, so long copy can no longer be clipped. */
.intro-area .intro-content { position: relative; top: auto; margin-top: 0; padding: 190px 0 100px; }
.intro-area .best-title { margin: 0 0 15px; line-height: 30px; }
.layer-1 h1 { color: #fff; font-size: 54px; line-height: 64px; max-width: 820px; margin-bottom: 20px; }
.intro-area .color-text { color: var(--brand-accent-light); }
.layer-3 .ready-btn { margin: 0 10px 10px 0; }

/* Page-title band: same cause as the hero (template rule targets h2, layouts emit h1). */
.breadcrumb h1 { color: #fff; font-size: 42px; line-height: 50px; margin-bottom: 0; overflow-wrap: break-word; }

/* Headings were re-levelled for a valid outline (h4 -> h2/h3); carry the template's h4 look over. */
.well-content h2 { font-size: 24px; line-height: 30px; text-transform: capitalize; }
.well-services:hover .well-content h2 { color: #f5f5f5; }
.service-content h3 { display: inline-block; font-size: 22px; line-height: 32px; margin-bottom: 0; padding: 0 0 15px; text-transform: capitalize; }
.service-content h3 a { color: var(--brand-ink); }
.single-service:hover .service-content h3 a, .single-service:hover .read-more { color: #fff; }
.support-services .support-content h3 { font-size: 20px; line-height: 32px; text-transform: capitalize; padding-bottom: 0; letter-spacing: 1px; }
.project-new .project-new-title { color: #fff; font-size: 26px; line-height: 32px; font-weight: 600; margin: 0 0 15px; }

/* Pillar icons: the template styled `.well-icon a`; the markup has a bare <i>. */
.well-icon i { display: inline-block; width: 90px; height: 90px; font-size: 50px; line-height: 90px; text-align: center; color: var(--brand-accent); border: 1px solid var(--brand-accent); border-radius: 50%; transition: 0.5s; }
.well-services:hover .well-icon i { color: #f5f5f5; border-color: #f5f5f5; transform: translateY(-5px); }

/* Contact card sits on navy: its h2 and lead paragraph inherited dark/grey text. */
.office-city h2 { color: #fff; }
.office-city > p { color: #c9d1dc; }

/* Mobile menu toggle: visually hide the accessible-name span main.js adds (beats meanmenu's bar rule). */
.mean-container a.meanmenu-reveal span.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; background: none; }

/* Footer lists were 50% wide (built for two lists side by side), wrapping every service name. */
.footer-area .footer-list { width: 100%; float: none; }
/* Service sidebar: keep labels clear of the active-item arrow. */
.left-menu ul li a { padding-right: 24px; }
/* Home: the services block's bottom padding met the feature area's 110px top padding on the same
   grey background, leaving a ~250px empty band where the template had a photo column. */
.service-area + .feature-area { padding-top: 0; }

/* Card grids: equal-height flex rows. With floats, a taller card snagged the next one
   (/services/ rendered 1 + 2 + 1 instead of 2 x 2). */
@media (min-width: 768px) {
  .all-services, .well-inner { display: flex; flex-wrap: wrap; }
  /* .services-item is pulled up 300px into the band. With floats, the band's floated headline column
     pushed the card floats below it, so the visible overlap was only the band's 150px bottom padding.
     A flex row is squeezed to zero width beside that float instead, so contain the band's float and
     state the real overlap explicitly. */
  .service-area .service-bg { display: flow-root; }
  .service-area .services-item { margin-top: -150px; }
  .all-services::before, .all-services::after { content: none; }
  .all-services > [class*="col-"], .well-inner > [class*="col-"] { display: flex; }
  .all-services .single-service, .well-inner .well-services { width: 100%; }
}
/* Breadcrumb: the template only drew the separator after "Home"; service pages have three levels. */
.breadcrumb ul li:not(:last-child)::after { position: absolute; content: "\f105"; font-family: FontAwesome; right: -10px; top: 0; }

/* Header wordmark: responsive.css caps .logo at 130px on phones (sized for the template's compact
   raster logo) and the 768-991 logo column is 157px, so the 340:44 wordmark's text rendered at
   ~9px and ~11px. 196px = 13.8px text on phones (33px clear of the toggle); 210px = 14.8px at tablet. */
@media (max-width: 767px) {
  .mobile-menu .logo { max-width: 196px; }
  .mobile-menu .logo .wordmark { width: 196px; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .header-area .logo .wordmark { width: 210px; max-width: none; }
}

@media (min-width: 992px) and (max-width: 1269px) {
  .layer-1 h1 { font-size: 46px; line-height: 56px; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .intro-area .intro-content { padding: 170px 0 80px; }
  .layer-1 h1 { font-size: 36px; line-height: 46px; }
  .breadcrumb .section-headline h1 { font-size: 40px; }
  .well-content h2 { font-size: 20px; }
  .project-new .project-new-title { font-size: 22px; }
  .single-well h3 { font-size: 22px; line-height: 30px; } /* template shrinks .single-well h2 below 992px but not h3 */
}
@media (max-width: 767px) {
  .intro-area { min-height: 0; }
  .intro-area .intro-content { padding: 110px 0 50px; }
  .layer-1 h1 { font-size: 30px; line-height: 40px; margin-bottom: 15px; }
  .intro-area .layer-2 p { display: block; font-size: 15px; line-height: 26px; margin-bottom: 20px; }
  .breadcrumb h1 { font-size: 30px; line-height: 40px; }
  .project-new .project-new-title { font-size: 22px; }
  .single-well h2 { line-height: 32px; }
  .single-well h3 { font-size: 22px; line-height: 30px; }
  /* Service pages: article first, sidebar (other services + contact box) after it. */
  .single-services-page .container > .row { display: flex; flex-direction: column; }
  .single-services-page .container > .row > .col-md-4 { order: 2; margin-top: 40px; }
}