/* 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; }
/* Link inside running text: the teal vs grey difference is only 1.3:1, so mark it with an underline too. */
.contact-security a { text-decoration: underline; text-underline-offset: 2px; }

/* ---- 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); }
/* Focus ring. style.css zeroes the focus outline (`a:focus { outline: 0px solid }`), so this outline is the only
   keyboard focus cue. Dark accent by default (7.4:1 on white); light accent where the backdrop is navy (9.5:1 on
   #020e29): header/topbar/sticky header and the phone menu, footer, hero, page-title band, services band, CTA band,
   contact card, and a service card while hovered (its navy overlay only appears on :hover). #scrollUp is last in the
   tab order, so keyboard users reach it from the footer, over which it then sits. The teal sidebar box on service
   pages (.new-project) gets a white ring instead (below): neither accent reaches 3:1 on #0b7a85. */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--brand-accent-dark); outline-offset: 2px; }
.header-one :focus-visible, footer :focus-visible, .intro-area :focus-visible, .page-area :focus-visible, .service-bg :focus-visible, .cta-band :focus-visible, .office-city :focus-visible, .single-service:hover :focus-visible, .new-project :focus-visible, #scrollUp:focus-visible { outline-color: var(--brand-accent-light); }
/* The desktop Services dropdown is a white panel inside the navy header. Its items run edge to edge, so an outside
   ring would put its side edges on the navy behind the panel (2.6:1); draw it just inside each item instead.
   Scoped to .main-menu: meanmenu copies the phone nav, class names included, into .mean-nav on navy, where those
   service links keep the light ring. */
.main-menu .sub-menu :focus-visible { outline-color: var(--brand-accent-dark); outline-offset: -2px; }
/* Teal sidebar box on service pages: neither brand ring reaches 3:1 on #0b7a85 (light 2.5:1, dark 1.5:1); white is 5.1:1. */
.new-project :focus-visible { outline-color: #fff; }
/* Footer logo: an inline link around the block-level wordmark paints no outline at all. Box it to the logo's size. */
.footer-logo a { display: block; width: fit-content; }
.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; }
/* Whole service card opens its page: stretch the title link over the card (z-index above the hover-raised top icon). */
.single-service .service-content h3 a::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 3; }
.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; }
/* Contact rows: the template floated each icon to the card edge while the text centred, leaving a wide
   gap and an off-centre block. Keep each icon beside its text and centre the two rows as one group. */
.contact-details { display: inline-block; text-align: left; }
.contact-details .single-icon { display: flex; align-items: center; }
.contact-details .single-icon i { flex: none; float: none; margin: 0 20px 0 0; }
.contact-details .single-icon p { margin: 0; }

/* 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%; }
}
/* Desktop header: the template floated the button in a fixed 200px right-aligned box with a 70px
   margin, so the menu hung ~170px short of it, and the logo sat 6px above the menu's centre line.
   Logo left; menu and button as one right-hand group; everything on one centre line. */
@media (min-width: 768px) {
  .header-area .row { display: flex; align-items: center; }
  .header-area .row::before, .header-area .row::after { content: none; }
  .header-area .row > [class*="col-"] { float: none; width: auto; }
  .header-area .row > [class*="col-"]:first-child { flex: 0 0 auto; }
  .header-area .row > [class*="col-"]:last-child { flex: 1 1 auto; display: flex; align-items: center; justify-content: flex-end; }
  .header-area .logo { display: flex; align-items: center; }
  .header-area .navbar.navbar-default { float: none; }
  .header-area .navbar-collapse { padding: 0; }
  .header-area .navbar-right { margin-right: 0; }
  .header-area .header-right-link, .header-area.stick .header-right-link { order: 2; float: none; width: auto; margin-left: 18px; padding: 0; }
  /* Services arrow: it was absolutely positioned inside the link's right padding, halving the gap
     before the next item. Flow it inline after the label so every gap between labels is equal. */
  .header-area .main-menu ul.nav > li > a.pages::after,
  .header-area.stick .main-menu ul.nav > li > a.pages::after { position: static; margin-left: 6px; vertical-align: 1px; }
  /* Services dropdown: the fixed 200px box wrapped each service name onto two or three lines. */
  .header-area .main-menu ul.nav li ul.sub-menu { width: auto; min-width: 200px; white-space: nowrap; }
}
/* Keyboard: style.css opens the Services dropdown on :hover only. Open it while focus is on the Services link or
   inside the list too, so Tab walks through the four services (hidden links are not focusable). */
.main-menu ul.nav li:focus-within > ul.sub-menu { top: 100%; opacity: 1; z-index: 999; visibility: visible; }
/* /services/ cards: the stretched title link already covers each card, so "Learn more" is a decorative span
   (aria-hidden), not a second tab stop. Keep the look it had as a link. */
.read-more { color: var(--brand-accent-dark); transition: all 0.3s ease 0s; }
/* Sentence case everywhere (owner decision 2026-10-17): show copy exactly as written. The template
   re-cases menus, headings, buttons and labels through a dozen `capitalize` rules; one reset wins. */
*, *::before, *::after { text-transform: none !important; }
/* Back-to-top: the template drew rotated "SCROLL TO TOP" text beside a rule; with only an icon it
   showed as a stray "‹" and a line. A plain round button instead (white on dark teal, 7.4:1). */
#scrollUp { -webkit-transform: none; transform: none; text-transform: none; width: 44px; height: 44px; right: 24px; bottom: 24px; border-radius: 50%; background-color: var(--brand-accent-dark); color: #fff; font-size: 24px; line-height: 42px; box-shadow: 0 5px 15px rgba(2, 14, 41, 0.25); }
#scrollUp:before { content: none; }
#scrollUp:hover, #scrollUp:focus-visible { bottom: 24px; background-color: var(--brand-navy); color: #fff; }
/* 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; }
  /* Contact rows: too narrow for icon beside text, so stack each icon just above its text, centred. */
  .contact-details { display: block; text-align: center; }
  .contact-details .single-icon { display: block; }
  .contact-details .single-icon i { margin: 0 0 12px; }
}

/* ---- Research (2026-10-17) ----------------------------------------------------------------------------------------
   /research/ and its articles: one readable column on the white page, in the site's ink and teal. Text keeps the body
   grey (#6b6d7e, 5.1:1 on white); stripes and code backgrounds are light enough to keep it above 4.5:1. */
.research-article, .research-index { max-width: 760px; margin: 0 auto; }
.research-byline { font-size: 14px; line-height: 24px; margin: 0 0 30px; }
.research-article { font-size: 16px; line-height: 29px; }
.research-article p { margin: 0 0 18px; }
.research-article h2 { font-size: 28px; line-height: 36px; margin: 48px 0 16px; }
.research-article h3 { font-size: 21px; line-height: 30px; margin: 34px 0 12px; }
.research-article strong { color: var(--brand-ink); font-weight: 600; }
/* style.css strips markers and indent from every ul; article lists need both back. */
.research-article ul { list-style: disc outside; margin: 0 0 20px; padding-left: 24px; }
.research-article ol { list-style: decimal outside; margin: 0 0 20px; padding-left: 24px; }
.research-article li { margin: 0 0 10px; padding-left: 4px; }
.research-article li::marker { color: var(--brand-accent-dark); }
/* Inline code (Bootstrap paints it pink): ink on pale grey. Long paths and URLs break anywhere instead of widening the page. */
.research-article code { font-family: SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: 0.875em; color: var(--brand-ink); background-color: #eef1f4; padding: 2px 5px; border-radius: 3px; overflow-wrap: anywhere; word-break: normal; }
/* Links inside running text: underlined, not colour alone (Lighthouse link-in-text-block). */
.research-article a, .about-lab a { text-decoration: underline; text-underline-offset: 2px; }
/* Tables: Markdown tables are wrapped in .table-wrap (eleventy.config.js); a table wider than the column scrolls inside it. */
.table-wrap { overflow-x: auto; margin: 0 0 26px; }
.research-article table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 24px; }
.research-article th, .research-article td { border: 1px solid #d5dae1; padding: 10px 14px; text-align: left; vertical-align: top; }
.research-article th { background-color: #eef1f4; color: var(--brand-ink); font-weight: 600; }
.research-article tbody tr:nth-child(even) { background-color: #f7f8fa; }
/* Header cells are short labels; on wider screens keep each on one line ("Date (2026)" broke after "Date"). */
@media (min-width: 768px) { .research-article th { white-space: nowrap; } }
/* Index: intro line, then one entry per article (linked title, date, summary). */
.research-intro { font-size: 17px; line-height: 30px; margin: 0 0 40px; }
.research-item { border-top: 1px solid #e3e6ea; padding: 30px 0 10px; }
.research-item h2 { font-size: 26px; line-height: 34px; margin: 0 0 8px; }
.research-item h2 a { color: var(--brand-ink); }
.research-item h2 a:hover { color: var(--brand-accent-dark); }
.research-item .research-byline { margin: 0 0 10px; }
/* About: the lab section follows the engagement paragraphs; give it the gap the other wells get from their headings. */
.about-lab { margin-top: 40px; }
@media (max-width: 767px) {
  .research-article h2 { font-size: 24px; line-height: 32px; margin-top: 40px; }
  .research-article h3 { font-size: 20px; line-height: 28px; }
  .research-item h2 { font-size: 22px; line-height: 30px; }
  .research-article th, .research-article td { padding: 8px 10px; }
}