/* ============================================================
   tv-polish.css — align the ported (Webflow) pages with the landing page.
   Additive only; loaded AFTER the Webflow CSS so it wins. Page content is
   untouched — this restyles the top navbar to match the landing bar, plus
   light button/link/focus polish.
   ============================================================ */
@font-face { font-family: "Britanica"; src: url("/assets/fonts/britanica-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Britanica"; src: url("/assets/fonts/britanica-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root { --tv-ember: #F2460D; --tv-ember-2: #ff6a34; --tv-text: #F5F7FA; --tv-muted: #9AA0AA; --tv-line: rgba(245,247,250,.10); }

/* ---- Kill horizontal overflow on ported pages ----
   Stray content (e.g. a heading line that runs a few px past the container, the
   advisor carousel track) pushed the document a hair wider than the viewport,
   leaving a scrollable empty strip down the right on mobile. Clip it on the
   content wrapper. Safe: the navbar is position:fixed (not clipped) and nothing
   inside .main-wrapper is sticky. overflow-x:clip has no overflow-y side effect. */
.main-wrapper { overflow-x: clip; }
/* Phones: the ported hero heading (~41px) ran a hair past its container, which
   was the actual source of the overflow. Trim it so it wraps cleanly and the
   clip above never shaves heading text. */
@media (max-width: 479px) {
  .main-wrapper h1 { font-size: 36px; line-height: 1.12; }
}

/* ---- Top navbar → landing-page look: dark, blurred, minimal ---- */
.navbar9_component {
  background: rgba(10,12,15,.72) !important;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--tv-line);
  font-family: "Britanica", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* show the white logo on the dark bar, at the landing size */
.navbar9_logo.is-light { display: block !important; height: 26px !important; width: auto !important; }
.navbar9_logo.is-base { display: none !important; }

/* links: 15px muted, hover → white with an animated orange underline */
.navbar9_link,
.navbar9_dropdown-toggle {
  font-family: "Britanica", "Segoe UI", system-ui, sans-serif;
  font-size: 15px !important; font-weight: 400 !important; letter-spacing: 0 !important;
  position: relative;
}
.navbar9_link,
.navbar9_dropdown-toggle,
.navbar9_dropdown-toggle > div { color: var(--tv-muted) !important; }
.navbar9_link:hover,
.navbar9_dropdown-toggle:hover,
.navbar9_dropdown-toggle:hover > div { color: var(--tv-text) !important; }
.navbar9_link::after,
.navbar9_dropdown-toggle::after {
  content: ""; position: absolute; left: 0; bottom: -3px; height: 1.5px; width: 0;
  background: var(--tv-ember); transition: width .25s ease;
}
.navbar9_link:hover::after,
.navbar9_dropdown-toggle:hover::after { width: 100%; }
.navbar9_dropdown-toggle .dropdown-chevron { opacity: .5; transform: scale(.7); }

/* nav CTA → single brand-orange pill, like the landing "Book a demo".
   Scoped to the whole menu so the mobile (.hide-desktop) Contact button matches. */
.navbar9_menu .button.is-arrow { display: none !important; }
.navbar9_menu .button.is-main {
  background-color: var(--tv-ember) !important; color: #fff !important;
  border-radius: 10px !important; padding: 11px 20px !important; font-weight: 700 !important;
  transition: background-color .18s ease, transform .2s ease, box-shadow .2s ease;
}
.navbar9_menu .button.is-main * { color: #fff !important; font-family: "Britanica", system-ui, sans-serif; }
.navbar9_menu .button_group:hover .button.is-main {
  background-color: var(--tv-ember-2) !important; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(242,70,13,.30);
}

/* mobile hamburger visible on the dark bar */
.navbar9_menu-button { color: var(--tv-text) !important; }

/* Mobile: style the open hamburger menu to match the updated bar (dark, blurred).
   Webflow's nav breakpoint is 991px; this is top-level nav layout → viewport MQ. */
@media (max-width: 991px) {
  /* Keep the full-height menu CONTAINER and overlay transparent — colouring them
     black-panelled the whole viewport. The visible panel is .navbar9_menu-left. */
  .navbar9_component .w-nav-overlay,
  .navbar9_menu.w-nav-menu { background-color: transparent !important; }

  /* The nav content becomes a dark, blurred dropdown panel dropping from the bar. */
  .navbar9_menu-left {
    background-color: rgba(10,12,15,.98) !important;
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--tv-line);
    box-shadow: 0 22px 44px rgba(0,0,0,.4);
    padding: 8px 20px 22px !important;
  }

  /* Links, dropdown toggles and expanded dropdown content: light on dark. */
  .navbar9_menu .navbar9_link,
  .navbar9_menu .navbar9_dropdown-toggle,
  .navbar9_menu .navbar9_dropdown-toggle > div,
  .navbar9_menu .navbar9_dropdown-link p,
  .navbar9_menu .nav-dropdown-highlight h3 { color: var(--tv-text) !important; }
  .navbar9_menu .navbar9_dropdown-list,
  .navbar9_menu .navbar9_dropdown-list .container-large { background-color: transparent !important; }
  .navbar9_menu .navbar9_dropdown-list p:not(.text-color-orange) { color: var(--tv-muted) !important; }
  .navbar9_menu .text-color-orange { color: var(--tv-ember) !important; }
  /* Drop the mega-menu marketing sub-headers ("Industries" + description) and their
     dividers on mobile — leave clean link lists so it reads like the landing menu. */
  .navbar9_menu .nav-dropdown-highlight,
  .navbar9_menu .div-block-23 { display: none !important; }

  /* Flatten the expanded mega-menu to a simple stacked link list: kill the orange
     box + heavy padding, drop the non-clickable section labels, keep the links. */
  .navbar9_menu .navbar9_container { padding: 0 !important; border: 0 !important; background-color: transparent !important; }
  .navbar9_menu .grid { display: block !important; padding: 0 !important; gap: 0 !important; }
  .navbar9_menu .navbar9_dropdown-content { padding: 2px 0 8px !important; }
  .navbar9_menu .navbar9_dropdown-link:not(a) { display: none !important; }
  .navbar9_menu a.navbar9_dropdown-link { padding: 9px 4px !important; }
}

/* ---- In-page buttons: subtle lift + brand-orange focus rings (colors unchanged) ---- */
.button-group { transition: transform .2s ease, box-shadow .2s ease; }
.button-group:hover { transform: translateY(-1px); }
a { transition: color .18s ease; }
a:focus-visible,
button:focus-visible,
.w-nav-link:focus-visible,
.w-button:focus-visible,
.button_group:focus-visible { outline: 2px solid var(--tv-ember); outline-offset: 3px; border-radius: 8px; }

/* ---- Request-a-demo custom form (direct HubSpot POST, no cookie gate) ---- */
.tvform { display: flex; flex-direction: column; gap: 16px; font-family: "Britanica", system-ui, sans-serif; }
.tvform-row { display: flex; gap: 14px; }
.tvform-row .tvform-field { flex: 1; min-width: 0; }
.tvform-field { display: flex; flex-direction: column; gap: 6px; }
.tvform-field > span { font-size: 13px; font-weight: 600; color: #45484F; }
.tvform-field input { width: 100%; padding: 13px 14px; font-size: 16px; font-family: inherit; color: #14181E; background: #fff; border: 1px solid rgba(10,12,15,.18); border-radius: 10px; transition: border-color .15s ease, box-shadow .15s ease; }
.tvform-field input:focus { outline: none; border-color: var(--tv-ember); box-shadow: 0 0 0 3px rgba(242,70,13,.15); }
.tvform-field input.is-invalid { border-color: #e5484d; }
.tvform-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: #45484F; line-height: 1.4; }
.tvform-consent input { width: 18px; height: 18px; margin-top: 1px; flex: 0 0 auto; accent-color: var(--tv-ember); }
.tvform-submit { align-self: flex-start; background: var(--tv-ember); color: #fff; border: none; border-radius: 10px; padding: 13px 26px; font-family: inherit; font-weight: 700; font-size: 15px; cursor: pointer; transition: background-color .18s ease, transform .2s ease, box-shadow .2s ease; }
.tvform-submit:hover { background: var(--tv-ember-2); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(242,70,13,.3); }
.tvform-submit[disabled] { opacity: .6; cursor: default; transform: none; box-shadow: none; }
.tvform-status { color: #e5484d; font-size: 14px; margin: 0; }
.tvform-status:empty { display: none; }
.tvform-fine { font-size: 12px; color: #6E747E; margin: 4px 0 0; }
.tvform-fine a { color: var(--tv-ember); }
.tvform-success { font-size: 17px; color: #14181E; font-weight: 600; }

/* ---- Footer newsletter (dark) variant of the direct-POST form ---- */
.tvform--news { gap: 12px; max-width: 460px; }
.tvform-newsrow { display: flex; gap: 10px; flex-wrap: wrap; }
.tvform-newsrow input { flex: 1 1 200px; min-width: 0; padding: 12px 14px; font-size: 15px; font-family: "Britanica", system-ui, sans-serif; color: #F5F7FA; background: rgba(255,255,255,.06); border: 1px solid rgba(245,247,250,.22); border-radius: 10px; }
.tvform-newsrow input::placeholder { color: #9AA0AA; }
.tvform-newsrow input:focus { outline: none; border-color: var(--tv-ember); box-shadow: 0 0 0 3px rgba(242,70,13,.2); }
.tvform-newsrow .tvform-submit { flex: 0 0 auto; }
.tvform--footer .tvform-consent { color: #9AA0AA; font-size: 13px; margin-top: 2px; }
.tvform--footer .tvform-success { color: #F5F7FA; font-size: 16px; }

/* ---- Resources category badges (theme-aligned) ---- */
/* Blogs/News cards: overlay badge, top-left over the image */
.insight-post { position: relative; }
.tv-cat {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  display: inline-flex; align-items: center;
  background: rgba(242,70,13,.12); color: #F2460D; border: 1px solid rgba(242,70,13,.28);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-family: "Britanica", "Segoe UI", system-ui, sans-serif;
  font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  padding: 6px 11px; border-radius: 999px;
}
/* Featured cards: lay multiple category tags in a wrapping row (no vertical stack),
   as tidy ember-tinted pills. */
.category-tag {
  display: inline-flex; align-items: center;
  margin: 0 8px 8px 0; padding: 5px 11px; border-radius: 999px;
  background: rgba(242,70,13,.10); color: #F2460D; border: 1px solid rgba(242,70,13,.22);
  font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  line-height: 1.1;
}

/* ---- About: reveal team-member LinkedIn icons ----
   Webflow hides these behind an on-hover reveal interaction that never fires in
   the static export (inline opacity:0;display:none), so the icons stayed invisible.
   Show the real profile links (the empty href="#" placeholder stays hidden) and
   give the icon a visible size + colour on the white team cards. */
a.link-block[href*="linkedin.com/in/"] {
  display: inline-flex !important; opacity: 1 !important;
  width: 22px; height: 22px;
  background: transparent !important; /* link-block ships a black bg that showed in the icon's rounded corners */
  transition: transform .18s ease;
}
/* The source glyph is a single evenodd path (blue square with the "in" knocked
   OUT); sitting over a headshot, the knockout showed the photo through and read
   as broken. Replace it with a self-contained icon (opaque blue square + solid
   white "in") drawn on the container, and hide the inline SVG. */
a.link-block[href*="linkedin.com/in/"] .icon-embed-xsmall {
  width: 22px; height: 22px; display: inline-block;
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHJlY3Qgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiByeD0iNCIgZmlsbD0iIzBBNjZDMiIvPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik00Ljk4IDguNWgzLjA0VjE5SDQuOThWOC41ek02LjUgMy45YTEuNzYgMS43NiAwIDEgMSAwIDMuNTIgMS43NiAxLjc2IDAgMCAxIDAtMy41MnpNOS45IDguNWgyLjkydjEuNDNoLjA0Yy40MS0uNzcgMS40LTEuNTggMi44OC0xLjU4IDMuMDggMCAzLjY1IDIuMDMgMy42NSA0LjY2VjE5aC0zLjA0di00LjRjMC0xLjA1LS4wMi0yLjQtMS40Ni0yLjQtMS40NiAwLTEuNjkgMS4xNC0xLjY5IDIuMzJWMTlIOS45VjguNXoiLz48L3N2Zz4=") center / contain no-repeat;
}
a.link-block[href*="linkedin.com/in/"] .icon-embed-xsmall svg { display: none; }
a.link-block[href*="linkedin.com/in/"]:hover { transform: translateY(-1px); }