/* Tech Sight masthead — the Insights header, brought to the main site.
   Added 2026-08-03, replacing the exported theme's <header id="masthead">.

   Everything is scoped under .ts-masthead / .ts-hero so it cannot collide with the
   theme's own rules, and it deliberately does NOT reuse the theme's class names
   (.site-header, #site-navigation) so the theme's stylesheets — several of which use
   !important — have nothing to grab onto. The block it replaces carried its own inline
   !important overrides and a jQuery width hack; both go with it.

   Mobile is handled by wrapping, exactly as the Insights header does, rather than by a
   toggle button. One less script, one less thing to break. */

.ts-masthead {
  background: #fff;
  border-bottom: 1px solid #e6e6e6;
  font-family: "Montserrat", "Roboto", Arial, sans-serif;
}

.ts-masthead .ts-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 20px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 28px;
}

.ts-masthead .ts-brand { display: flex; align-items: center; text-decoration: none; }
/* The theme's global img rules add margins and can add borders. Chrome opts out. */
.ts-masthead .ts-brand img {
  height: 42px; width: auto; display: block;
  margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; max-width: none;
}

.ts-masthead .ts-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; }

.ts-masthead .ts-nav a {
  position: relative;
  display: inline-block;      /* transforms do not apply to non-replaced inline boxes */
  padding: 6px 0;
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.2;
  color: #1a1a1a;
  text-decoration: none;
  background: none;
  transition: color .15s ease;
}

.ts-masthead .ts-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  border-radius: 2px;
  background: #01a8ff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease;
}

.ts-masthead .ts-nav a:hover,
.ts-masthead .ts-nav a:focus-visible { color: #01a8ff; text-decoration: none; }

.ts-masthead .ts-nav a:hover::after,
.ts-masthead .ts-nav a:focus-visible::after,
.ts-masthead .ts-nav a[aria-current="page"]::after { transform: scaleX(1); }

.ts-masthead .ts-nav a[aria-current="page"] { color: #01a8ff; font-weight: 700; }

.ts-masthead .ts-nav a:focus-visible { outline: 2px solid #01a8ff; outline-offset: 3px; border-radius: 2px; }

/* Services keeps its two children rather than flattening them into the top level:
   that is the site's existing structure and this change is about presentation.
   Opens on hover AND focus-within, so it is reachable by keyboard. */
.ts-masthead .ts-group { position: relative; display: inline-block; }
.ts-masthead .ts-group > .ts-sub {
  position: absolute; top: 100%; left: 0; z-index: 60;
  min-width: 210px; padding: 8px 0; margin-top: 2px;
  background: #fff; border: 1px solid #e6e6e6; border-radius: 6px;
  box-shadow: 0 10px 28px rgba(26,26,26,.12);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  /* visibility is deliberately NOT transitioned. Transitioning a discrete property
     means the menu cannot appear at all unless the transition actually advances, and
     transitions are driven by the rendering loop - so a throttled or non-compositing
     context leaves the menu permanently hidden. Measured exactly that. Visibility now
     flips instantly and only opacity and transform animate, so the menu always opens
     even where animation never runs. */
  transition: opacity .15s ease, transform .15s ease;
}
.ts-masthead .ts-group:hover > .ts-sub,
.ts-masthead .ts-group:focus-within > .ts-sub { opacity: 1; visibility: visible; transform: translateY(0); }
.ts-masthead .ts-sub a { display: block; padding: 8px 16px; font-weight: 600; }
.ts-masthead .ts-sub a::after { display: none; }
.ts-masthead .ts-sub a:hover, .ts-masthead .ts-sub a:focus-visible { background: #f2f9ff; }

/* Below the nav breakpoint a hover-only dropdown is a trap, so the children are simply
   shown inline and indented. */
@media (max-width: 860px) {
  .ts-masthead .ts-group, .ts-masthead .ts-nav { display: block; }
  .ts-masthead .ts-nav { width: 100%; }
  .ts-masthead .ts-nav > a, .ts-masthead .ts-group > a { display: block; padding: 8px 0; }
  .ts-masthead .ts-group > .ts-sub {
    position: static; opacity: 1; visibility: visible; transform: none;
    border: 0; box-shadow: none; padding: 0 0 0 16px; margin: 0; min-width: 0;
  }
  .ts-masthead .ts-brand img { height: 34px; }
}

/* Page masthead band. Same treatment as the Insights hero: a dark photograph under a
   gradient scrim heavy enough at the bottom that white text clears contrast whichever
   background image lands here. */
.ts-hero {
  position: relative;
  min-height: 200px;
  display: flex;
  align-items: flex-end;
  padding: 34px 28px 28px;
  background: #0d1420 center / cover no-repeat;
  overflow: hidden;
  font-family: "Montserrat", "Roboto", Arial, sans-serif;
}
.ts-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,16,26,.30) 0%, rgba(10,16,26,.88) 100%);
}
.ts-hero .ts-hero-inner { position: relative; z-index: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 0; color: #fff; }
.ts-hero .ts-kicker { margin: 0 0 .5em; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #01a8ff; }
.ts-hero h1 { margin: 0; font-size: 2.05rem; line-height: 1.15; font-weight: 700; color: #fff; }
.ts-hero .ts-hero-sub { margin: .6em 0 0; max-width: 60ch; font-size: 1.02rem; color: #cdd6e2; }

@media (max-width: 520px) {
  .ts-hero { min-height: 150px; padding: 24px 20px 20px; }
  .ts-hero h1 { font-size: 1.45rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ts-masthead .ts-nav a,
  .ts-masthead .ts-nav a::after,
  .ts-masthead .ts-group > .ts-sub { transition: none; }
}