/* ============================================================
   Signal skin — HYBRID
   Layered over the existing parent theme on all non-home pages.
   Goal: make the existing pages feel like the Signal home —
   Signal palette, sharp corners, mono cyan eyebrows, cyan accents,
   navy bands + hairlines — without changing markup or content.
   ============================================================ */
:root{
  --sig-navy:#001141; --sig-navy2:#041A52; --sig-blue:#0F62FE; --sig-blue-d:#002D9C;
  --sig-cyan:#33B1FF; --sig-cyan-d:#0072C3; --sig-ink:#001141; --sig-gray:#3C4650;
  --sig-navy-gray:#C1C7CD; --sig-line:#DDE1E6; --sig-line-navy:rgba(255,255,255,0.14);
  --sig-radius:2px;
}

/* ---------- global type + selection ---------- */
body, p, li, a, span, div, input, select, textarea, button{ font-family:'IBM Plex Sans', Arial, sans-serif; }
h1,h2,h3,h4,h5,.h1,.h2,.h3{ font-family:'IBM Plex Sans', sans-serif !important; font-weight:300 !important; letter-spacing:-0.01em !important; }
::selection{ background:rgba(51,177,255,0.3); }

/* ---------- sharp corners (Signal is angular, not rounded) ---------- */
.btn, .btn-link, [class$="-btn"], [class*="-btn "], .vt-btn, .uc-btn, .uc-btn-sec, .ffc-btn, .mb-btn-wrap,
input, select, textarea, .search-input-popup,
.rr-box-wrap, .sb-item, .uc-img, .vt-img, .vt-media, .tc-item, .ffc-item, .card, .tile,
.sub-menu, .mega-menu-wrapper, .search-popup, .h-search-wrap,
.eyebrow-text, .rr-eyebrow, [class*="eyebrow"], img{
  border-radius:2px !important;
}

/* ---------- eyebrows -> Signal mono, cyan, no pill ---------- */
.eyebrow-text, .rr-eyebrow, [class*="eyebrow"]{
  font-family:'IBM Plex Mono', monospace !important;
  text-transform:uppercase !important;
  letter-spacing:0.14em !important;
  font-size:12px !important;
  font-weight:500 !important;
  color:var(--sig-cyan-d) !important;
  background:transparent !important;
  padding:0 !important;
  border:none !important;
}
/* eyebrows on dark bands -> bright cyan */
.landing-hero [class*="eyebrow"], .bg-dark [class*="eyebrow"], .full-width-cta [class*="eyebrow"],
.main-header [class*="eyebrow"]{ color:var(--sig-cyan) !important; }

/* ---------- buttons ---------- */
.btn, .vt-btn, .uc-btn, .ffc-btn{
  background:var(--sig-blue) !important; color:#fff !important;
  border-radius:2px !important; border:none !important;
  font-family:'IBM Plex Sans',sans-serif !important; font-weight:600 !important;
}
.btn:hover, .vt-btn:hover, .uc-btn:hover, .ffc-btn:hover{ background:var(--sig-blue-d) !important; }
.btn-link, .uc-btn-sec{ background:transparent !important; color:var(--sig-blue) !important; }
/* but a .btn-link INSIDE a filled blue button (.uc-btn/.btn) is a CTA label, not a
   standalone text link — keep it white so it is not blue-on-blue (invisible). */
.uc-btn .btn-link, .btn .btn-link, .uc-btn a, .ffc-btn a, .vt-btn a{ color:#fff !important; background:transparent !important; }
/* primary CTAs on dark chrome/bands -> Signal cyan on navy */
.main-header .btn, .landing-hero .btn, .full-width-cta .btn, .bg-dark .btn{
  background:var(--sig-cyan) !important; color:var(--sig-navy) !important;
}
.main-header .btn:hover, .landing-hero .btn:hover, .full-width-cta .btn:hover, .bg-dark .btn:hover{
  background:#7cd0ff !important;
}

/* ---------- links + icon accents ---------- */
.main-content a:not(.btn):not(.btn-link), .container a:not(.btn):not(.btn-link){ color:var(--sig-blue); }
.bg-dark a:not(.btn), .landing-hero a:not(.btn), .full-width-cta a:not(.btn){ color:var(--sig-cyan); }
[class^="icon-"], [class*=" icon-"]{ color:var(--sig-cyan-d) !important; }
.bg-dark [class^="icon-"], .landing-hero [class^="icon-"], .main-header [class^="icon-"]{ color:var(--sig-cyan) !important; }
/* thin-line SVG icons -> cyan stroke */
.benifits-icon-grid svg [stroke], svg.icon [stroke]{ stroke:var(--sig-cyan-d) !important; }

/* ---------- dark bands: enforce Signal navy + hairlines ---------- */
.landing-hero, .full-width-cta.bg-dark, .full-width-cta, .bg-dark{
  background-color:var(--sig-navy) !important;
}
.landing-hero{ border-top:1px solid var(--sig-line-navy); border-bottom:1px solid var(--sig-line-navy); }
.landing-hero, .landing-hero *{ color:#EAF3FF; }
.landing-hero .inner-text-white, .bg-dark, .bg-dark *{ }

/* ---------- header (Signal navy chrome) ---------- */
.main-header{ background:var(--sig-navy) !important; border-bottom:1px solid var(--sig-line-navy) !important; }
.main-header .brand-color{ display:none !important; }
/* Always show the WHITE logo. On non-home pages the parent theme drops the
   `header-white` class and hides the white logo (visibility:hidden; opacity:0),
   which left subpages with no wordmark (only the dot). Force it visible so the
   logo renders on EVERY page, matching the home. */
.main-header .brand-white{ display:inline-block !important; visibility:visible !important; opacity:1 !important; }
.main-header .navigation .menu-item > a{ color:var(--sig-navy-gray) !important; font-weight:400 !important; }
.main-header .navigation .menu-item > a:hover{ color:var(--sig-cyan) !important; }
/* Older/staging parent-theme desktop nav: top-level items are <button.menu-toggle>
   (some are <a>) inside .menu-wrap .menu, with no .navigation wrapper. Recolor them
   white on the navy header. Direct-child scope keeps dropdown items on their light panels dark. */
.main-header .menu-wrap .menu > li > .menu-toggle,
.main-header .menu-wrap .menu > li > a{ color:var(--sig-navy-gray) !important; font-weight:400 !important; }
.main-header .menu-wrap .menu > li > .menu-toggle:hover,
.main-header .menu-wrap .menu > li > a:hover{ color:var(--sig-cyan) !important; }
/* recolor the parent nav's hover underline to Signal cyan (already hover-only) to match the home */
.main-header .navigation .menu-item > a::after,
.main-header .menu-wrap .menu > li > .menu-toggle::after,
.main-header .menu-wrap .menu > li > a::after{ background-color:var(--sig-cyan) !important; }

/* Signal pulsing cyan dot before the logo, so subpage header matches the home. */
@keyframes sig-blink{ 0%,100%{opacity:1;} 50%{opacity:0.35;} }
/* Align the LOGO to the page's centered 1320px content grid so it lines up with the
   hero content-left (STATUS / headline / stats) and tracks on resize — WITHOUT
   constraining the whole header. Constraining the header to 1320 squeezed the nav and
   made Contact us + search wrap down to the left at mid widths. Instead the header
   stays FULL-WIDTH (CTA + search stay on the right, no early wrap) and only the brand
   gets a responsive left margin. content-left = (100vw-1320)/2 + 40 = 50vw - 620;
   Tuned so the DOT (absolute, 20px left of the logo) lands exactly on the content
   grid's left edge (aligning with the hero STATUS dot below it), and the logo stays
   inset 20px to its right. Uses 50% of the (full-width) header container rather than
   50vw, so it EXCLUDES the scrollbar and matches the content's centering exactly
   (50vw drifted ~7px because it counts the scrollbar). Clamped to 0 on narrow. */
.main-header .brand{ position:relative !important; display:inline-flex !important; align-items:center !important; height:auto !important; margin-left: max(0px, calc(50vw - 672px)) !important; }
/* Pulsing cyan dot removed per request; logo sits flush left. */
.main-header .brand::before{ display:none !important; content:none !important; }
/* Logo: the cyan-drop stacked wordmark (TWCo_Wordmark_Stacked, Reversed), swapped in
   via `content` and sized to ~match weathercompany.com's header logo (prod renders 70px).
   The parent's `img[src$=".svg"]{max-height:100%}` otherwise collapses it, so force a real height. */
.main-header .brand-white{ content:url('../assets/logo/twco-stacked-reversed-cyan.svg') !important; }
.main-header .brand img, .main-header .brand-white{
  height:78px !important; width:auto !important; max-height:none !important; flex:0 0 auto !important;
}
/* UNIFY the content grid: subpages use the parent's `.container` (--container-width
   73.13rem ≈ 1053px), which is narrower than the home's 1320 grid, so subpage content
   read as indented and the header logo didn't line up with it. Widen the subpage
   content column to 1240px so its content-left (and width) match the home exactly at
   every viewport: home content-left = subpage content-left = 50vw - 620, which is also
   where the header dot sits. Scoped to non-home content only (header uses .container-fluid,
   and the home body uses .hero-inner/.wrap, so neither is affected). Scoped to
   .main-content so the footer keeps its own (narrower) width consistently on every
   page, rather than only widening on subpages. */
body:not(.home) .main-content .container{ --container-width:1240px !important; }
/* dropdown / flyout link text -> bright (was muted gray, hard to read on navy) */
.main-header .sub-menu-wrapper a, .main-header .sub-menu a, .main-header .mega-menu-wrapper a,
.main-header .menu-navigation a, .main-header .drop-item-menu,
.main-header .sub-menu-wrapper .drop-item-menu, .main-header .mega-menu-wrapper *{ color:#EAF3FF !important; }
.main-header .sub-menu-wrapper a:hover, .main-header .sub-menu a:hover,
.main-header .mega-menu-wrapper a:hover, .main-header .drop-item-menu:hover{ color:var(--sig-cyan) !important; }
.main-header .utility-menu a{ color:var(--sig-navy-gray) !important; font-family:'IBM Plex Mono',monospace !important; font-size:12px !important; letter-spacing:0.06em !important; }
.main-header .utility-menu a:hover{ color:#fff !important; }
.main-header .icon-search, .main-header .search-btn, .header-search-btn{ color:#fff !important; }

/* dropdown / mega-menu -> navy raised panel, sharp, cyan hover */
.sub-menu, .mega-menu-wrapper, .sub-menu-wrapper{
  background:var(--sig-navy2) !important; border:1px solid var(--sig-line-navy) !important;
  border-radius:2px !important; box-shadow:0 20px 44px rgba(0,8,32,0.5) !important;
}
/* The OUTER dropdown container (.sub-menu-wrapper) sits directly beneath each nav
   item; its 1px border peeked out as a faint gray line under the items at REST.
   Zero its border/shadow — the inner .sub-menu / .mega-menu-wrapper panels carry
   the visible navy bg + border when open, so open dropdowns still look right, and
   the only underline is the cyan bar that animates in on hover. */
.main-header .sub-menu-wrapper{ border:0 !important; box-shadow:none !important; }
.sub-menu a, .mega-menu-wrapper a{ color:#EAF3FF !important; }
.sub-menu a:hover, .mega-menu-wrapper a:hover{ color:var(--sig-cyan) !important; background:rgba(51,177,255,0.08) !important; }
/* Dropdown labels: light weight. */
.main-header .sub-menu a, .main-header .mega-menu-wrapper a, .main-header .sub-menu-wrapper a{ font-weight:400 !important; }

/* UNIFORM dropdown text size = top-level nav (14.4px). Item titles/links match the
   primary nav; descriptions, eyebrows and tags stay smaller for hierarchy. */
.main-header .sub-menu a, .main-header .sub-menu a span,
.main-header .sub-menu-wrapper a, .main-header .sub-menu-wrapper a span,
.main-header .mega-menu-wrapper a, .main-header .mega-menu-wrapper a span,
.main-header .mega-menu-wrapper .mmw-link, .main-header .mega-menu-wrapper .mmw-page-link{
  font-size:14.4px !important;
}
.main-header .mega-menu-wrapper p, .main-header .sub-menu-wrapper p, .main-header .sub-menu p,
.main-header .mega-menu-wrapper .eyebrow-text, .main-header .mega-menu-wrapper .mmw-post-tag{
  font-size:12px !important;
}

/* HOVER / active = subtle navy-tint panel + cyan text (the "Maverick Ground Ops"
   treatment) — NOT a bright cyan fill. Covers hovering the link or the whole li. */
.main-header .sub-menu li:hover > a, .main-header .sub-menu li a:hover,
.main-header .sub-menu-wrapper li:hover > a, .main-header .sub-menu-wrapper li a:hover,
.main-header .mega-menu-wrapper li:hover > a, .main-header .mega-menu-wrapper li a:hover,
.main-header .mega-menu-wrapper .mmw-post-wrap:hover,
.main-header .mega-menu-wrapper .mmw-list ul li:hover > a,
.main-header .mega-menu-wrapper .mmw-list ul li a:hover{
  background:rgba(255,255,255,0.06) !important;
}
.main-header .sub-menu li:hover > a, .main-header .sub-menu li:hover > a *, .main-header .sub-menu li a:hover, .main-header .sub-menu li a:hover *,
.main-header .sub-menu-wrapper li:hover > a, .main-header .sub-menu-wrapper li:hover > a *, .main-header .sub-menu-wrapper li a:hover, .main-header .sub-menu-wrapper li a:hover *,
.main-header .mega-menu-wrapper li:hover > a, .main-header .mega-menu-wrapper li:hover > a *, .main-header .mega-menu-wrapper li a:hover, .main-header .mega-menu-wrapper li a:hover *,
.main-header .mega-menu-wrapper .mmw-post-wrap:hover, .main-header .mega-menu-wrapper .mmw-post-wrap:hover *{
  color:var(--sig-cyan) !important;
}

/* ---------- cards / boxes -> hairline, sharp ---------- */
.rr-box-wrap, .sb-item, .tc-item, .ffc-item, .uc-content{
  border:1px solid var(--sig-line) !important; border-radius:2px !important;
}

/* ---------- footer (Signal navy) ---------- */
.main-footer.bg-dark, .main-footer{ background:var(--sig-navy) !important; }
.main-footer a{ color:var(--sig-navy-gray) !important; }
.main-footer a:hover{ color:var(--sig-cyan) !important; }
.main-footer h4, .main-footer .footer-title{ font-family:'IBM Plex Mono',monospace !important; text-transform:uppercase !important; letter-spacing:0.1em !important; font-size:12px !important; color:#fff !important; }

/* ---------- forms ---------- */
input, select, textarea{ border:1px solid var(--sig-line) !important; border-radius:2px !important; }
input:focus, select:focus, textarea:focus{ outline:none !important; border-color:var(--sig-cyan-d) !important; box-shadow:0 0 0 2px rgba(51,177,255,0.3) !important; }

/* ---------- recolor the theme's orange (#FFB784 / #ff9a2c) to Signal ----------
   Accents -> Signal cyan; small badges -> cyan chip; large tint blocks -> a
   LIGHT Signal-blue tint with dark text (kept light, not a heavy slab). */
/* accents (foreground) -> cyan */
.slick-slider .slick-dots li button{ border-color:#0072C3 !important; }
.slick-slider .slick-dots li button:focus, .slick-slider .slick-dots li button:hover,
.slick-slider .slick-dots li.slick-active button{ background-color:#0072C3 !important; }
.slick-arrow:focus, .slick-arrow:hover{ border-color:#0072C3 !important; }
.bullet-check ul > li::before, .bullet-check.-secondary ul > li::before{ color:#0072C3 !important; }
.text-orange{ color:#0072C3 !important; }
.pagination ul li a:hover, .pagination ul li .next:hover, .pagination ul li .prev:hover{ color:#0072C3 !important; }
.anchor-nav-vertical .sticky-nav ul li.active{ color:#0072C3 !important; }
.anchor-nav-vertical .sticky-nav .sp-tab-dropdown::before{ color:#0072C3 !important; }
.vertical-image-accordion .via-content-wrap .via-close:hover{ color:#0072C3 !important; }
.fb-filter-form .fb-col ul li:hover label, .fb-filter-form .fb-filter-search .listing-filter-search{ color:#0072C3 !important; }
[fill="#ff9a2c" i],[fill="#ffb784" i],[fill="#ff9928" i]{ fill:#0072C3 !important; }
[stroke="#ff9a2c" i],[stroke="#ffb784" i]{ stroke:#0072C3 !important; }
/* small badges / tags -> cyan chip, white text */
.sub-menu-wrapper-mobile .smw-post .smw-featured-tag,
.main-header .navigation ul li .mega-menu-wrapper.v2 .mmw-post-img .mmw-post-tag,
.mmw-post-tag, .listing-hero .lh-right-block .lh-feature-tag,
.sb-item.sb-number{ background-color:#0072C3 !important; color:#fff !important; }
/* mobile-nav top bar -> Signal navy chrome */
.mbnav__top{ background-color:#001141 !important; }
/* large tint blocks -> light Signal-blue tint */
.bg-orange,
.related-resources .rr-main-wrap.background-orange::before,
.timeline-component .tcc-card.tcc-image .tcc-image-shape::after,
.timeline-component .tcc-card.tcc-image .tcc-image-shape::before,
.two-column-cards .tcc-wrapper .tcc-wrap:nth-child(2n+1),
.two-column-cards .tcc-wrapper .tcc-wrap:nth-child(4n),
.two-column-cards .tcc-wrapper .tcc-wrap:nth-child(4n+1){ background-color:#E6F0FF !important; }
/* dark, readable text on those light-tint blocks */
.bg-orange, .bg-orange *,
.related-resources .rr-main-wrap.background-orange, .related-resources .rr-main-wrap.background-orange *,
.two-column-cards .tcc-wrapper .tcc-wrap:nth-child(2n+1), .two-column-cards .tcc-wrapper .tcc-wrap:nth-child(2n+1) *,
.two-column-cards .tcc-wrapper .tcc-wrap:nth-child(4n), .two-column-cards .tcc-wrapper .tcc-wrap:nth-child(4n) *{ color:#001141 !important; }
.bg-orange a, .related-resources .rr-main-wrap.background-orange a{ color:#0F62FE !important; }
/* inline color-field orange: the theme prints style="background-color:#ffb784"
   for cards/stats where an editor picked "Orange". Override the inline value. */
[style*="background-color:#ffb784" i], [style*="background-color: #ffb784" i],
[style*="background:#ffb784" i], [style*="background: #ffb784" i],
[style*="background-color:#ff9a2c" i], [style*="background:#ff9a2c" i]{
  background-color:#E6F0FF !important; color:#001141 !important;
}
[style*="--borderColor: #ffb784" i], [style*="--borderColor:#ffb784" i],
[style*="--borderColor: #ff9a2c" i]{ --borderColor:#0072C3 !important; }
[style*="color:#ffb784" i]:not([style*="background-color:#ffb784" i]):not([style*="background:#ffb784" i]),
[style*="color: #ffb784" i]:not([style*="background"]){ color:#0072C3 !important; }

/* ---------- circles -> squares (Signal is angular) ---------- */
.swiper-button-prev, .swiper-button-next, [class*="button-prev"], [class*="button-next"],
[class*="-arrow"], [class*="arrow-"], .arrow, .icon-circle, .icon-wrap, .icon-box,
[class*="-circle"], .circle, .rounded-circle, [class*="round"],
[style*="border-radius:50%"], [style*="border-radius: 50%"]{
  border-radius:2px !important;
}
.swiper-pagination-bullet{ border-radius:1px !important; }
/* de-pill filter chips + tags (Signal is angular) */
.fb-tag-wrap li, .fb-tag-wrap li a, .fb-col, .fb-dropdown, .fb-filter-search,
.lh-feature-tag, .smw-featured-tag, .mmw-post-tag, .tag, .chip, .pill,
[class$="-tag"], [class*="-tag "], [class*="-chip"], [class*="-pill"]{ border-radius:2px !important; }

/* preview only: hide cookie banner so the design is unobstructed */
.banner-cookie, .cookie-banner, [class*="cookie"], .osano-cm-window, .osano-cm-dialog{ display:none !important; }

/* ============================================================
   STAGING-RESILIENCE ADDITIONS (QA scrub vs production)
   The staging snapshot runs older parent markup/JS than the skin
   was tuned against. Keep every newer-markup rule above; the rules
   below ADD coverage for gaps confirmed on the staging front-end.
   ============================================================ */

/* ---------- HERO photo missing -> flat navy block. TWO conspiring causes ----------
   Every interior page uses `.landing-hero` (advertising, aviation, about-us,
   proven-accuracy, weather-data-apis all confirmed). On the staging snapshot
   the hero renders as a solid navy block with no photo, for two reasons:

   1) DISPLAY: parent CSS sets `.landing-hero-bg img.-desktop` and `img.-mobile`
      to display:none at base and never flips either to display:block in CSS
      (production reveals them via theme JS that does not run here).

   2) AOS: `.landing-hero-bg` carries data-aos="zoom-out-right". The parent CSS
      bakes AOS's resting state (opacity:0 + translate3d(-100px)scale(1.2)) and
      only reveals it when AOS adds `.aos-animate`. Staging loads aos.js from
      unpkg but never runs a working AOS.init, so the element is stuck at
      opacity:0 -> the photo is loaded but invisible, and the navy shows.

   Fix both: show the correct responsive image per breakpoint AND neutralize the
   AOS hidden state on the hero (it is always above the fold, so it must always
   be visible). The parent's `.landing-hero::before` navy->transparent gradient
   then sits over the photo as the Signal scrim (the intended treatment), with
   the skin's navy background-color as the fallback behind it. */
@media (min-width:768px){
  .landing-hero .landing-hero-bg img.-desktop{ display:block !important; }
  .landing-hero .landing-hero-bg img.-mobile{ display:none !important; }
}
@media (max-width:767px){
  .landing-hero .landing-hero-bg img.-mobile{ display:block !important; }
  .landing-hero .landing-hero-bg img.-desktop{ display:none !important; }
}
/* neutralize the stuck AOS hidden state on the hero (bg photo + hero copy) */
.landing-hero .landing-hero-bg,
.landing-hero .landing-hero-bg[data-aos],
.landing-hero [data-aos]{
  opacity:1 !important;
  transform:none !important;
  visibility:visible !important;
}
/* keep the full-bleed cover image truly square (no visible radius clip) */
.landing-hero .landing-hero-bg img{ border-radius:0 !important; }

/* ---------- DROPDOWN panels: readable text on the navy flyout ----------
   The skin already repaints .sub-menu / .mega-menu-wrapper navy and recolors
   <a> light, and the parent reveals the panels on li:hover / li.is-open (so
   hover works). BUT the parent prints descriptions, spans and post copy at
   #001141 (dark navy) which is invisible on the navy panel. Force ALL panel
   text light, keep hover cyan, and convert the light hairline dividers to a
   navy hairline. Also re-assert the navy panel against the parent's very
   deep selector so it always wins. */
.main-header .navigation ul li .sub-menu-wrapper .sub-menu,
.main-header .navigation ul li .mega-menu-wrapper{
  background:var(--sig-navy2) !important;
  border:1px solid var(--sig-line-navy) !important;
  border-radius:2px !important;
  box-shadow:0 20px 44px rgba(0,8,32,0.5) !important;
}
.sub-menu, .sub-menu *, .sub-menu-wrapper .sub-menu *,
.mega-menu-wrapper, .mega-menu-wrapper *{ color:#EAF3FF !important; }
.sub-menu a:hover, .sub-menu a:hover *,
.mega-menu-wrapper a:hover, .mega-menu-wrapper a:hover *,
.mega-menu-wrapper .mmw-post-wrap:hover *{ color:var(--sig-cyan) !important; }
/* mega-menu left rail + card dividers were #f2f4f8 (light) -> navy hairline */
.mega-menu-wrapper.v1 .mmw-list ul a,
.mega-menu-wrapper .mmw-post-link{ border-color:var(--sig-line-navy) !important; }
/* the theme's little chevron glyphs (::after, colored #0f62fe) -> cyan on navy */
.sub-menu li a.mmw-page-link::after,
.mega-menu-wrapper .mmw-page-link::after{ color:var(--sig-cyan) !important; }
/* keep the featured-post tag chip white-on-cyan (the * rule above would dim it) */
.mega-menu-wrapper .mmw-post-tag, .sub-menu .smw-featured-tag,
.mmw-post-tag, .smw-featured-tag{ color:#fff !important; }
/* bare headings inside header flyout panels (e.g. a column <h3>) print at the
   parent's navy default -> invisible on the navy panel. Force them light. */
.main-header .sub-menu-wrapper h2, .main-header .sub-menu-wrapper h3, .main-header .sub-menu-wrapper h4,
.main-header .mega-menu-wrapper h2, .main-header .mega-menu-wrapper h3, .main-header .mega-menu-wrapper h4,
.main-header .sub-menu h2, .main-header .sub-menu h3, .main-header .sub-menu h4{ color:#EAF3FF !important; }

/* ---------- pills + circles the base sweep missed on staging ---------- */
/* pills -> sharp */
.mktoButton,
.listing-hero .lh-content-block .asset-type, .asset-type,
.contact-hero .ch-dropdown li a, .contact-hero .ch-dropdown li button,
.anchor-nav-vertical .sticky-nav .sp-tab-dropdown{ border-radius:2px !important; }
/* Marketo subscribe/submit button -> Signal blue, sharp */
.mktoButton{ background-color:var(--sig-blue) !important; border:none !important; color:#fff !important; }
.mktoButton:hover{ background-color:var(--sig-blue-d) !important; }
/* circles -> squares */
.radio-btn-group .radio-option .radio-custom-label::before,
.timeline-component .tcc-card.tcc-text .plus-icon,
.fancybox__nav, .fancybox__nav button, .swiper-lazy-preloader{ border-radius:2px !important; }

/* ---------- background-orange tint block without the .related-resources ancestor ----------
   Staging prints class="rr-main-wrap background-orange"; the skin's existing
   rule requires a .related-resources ancestor, which may differ on the older
   markup. Cover the orange ::before tint + text directly so it becomes the
   light Signal-blue tint regardless of wrapper. */
.rr-main-wrap.background-orange::before,
.background-orange::before{ background-color:#E6F0FF !important; }
.rr-main-wrap.background-orange, .rr-main-wrap.background-orange *{ color:#001141 !important; }
.rr-main-wrap.background-orange a:not(.btn){ color:var(--sig-blue) !important; }

/* ============================================================
   DROPDOWN PANELS — LIGHT THEME (white bg / dark text), navy+cyan on hover.
   Requested flip: at rest the sub-menu / mega-menu panels are a WHITE surface with
   dark navy text (like weathercompany.com); on hover (and the v1 active category) an
   item gets a navy background + cyan text (the previous panel look, now the per-item
   highlight). High-specificity `.navigation ul li ...` selectors so this beats the
   earlier navy-panel rules higher up in this file.
   ============================================================ */
.main-header .sub-menu-wrapper .sub-menu,
.main-header .mega-menu-wrapper,
.main-header .navigation ul li .sub-menu-wrapper .sub-menu,
.main-header .navigation ul li .mega-menu-wrapper{
  background:#ffffff !important; border:1px solid #DDE1E6 !important;
  box-shadow:0 20px 44px rgba(0,17,65,0.18) !important;
}
.main-header .navigation ul li .sub-menu-wrapper .sub-menu, .main-header .navigation ul li .sub-menu-wrapper .sub-menu *,
.main-header .navigation ul li .mega-menu-wrapper, .main-header .navigation ul li .mega-menu-wrapper *,
.main-header .sub-menu, .main-header .sub-menu *, .main-header .mega-menu-wrapper, .main-header .mega-menu-wrapper *{
  color:#001141 !important;
}
.main-header .navigation ul li .mega-menu-wrapper p, .main-header .navigation ul li .mega-menu-wrapper .mmw-post-desc,
.main-header .mega-menu-wrapper p{ color:#4A5157 !important; }
.main-header .navigation ul li .mega-menu-wrapper.v1 .mmw-list ul a{ color:#001141 !important; border-color:#DDE1E6 !important; }
.main-header .navigation ul li .sub-menu-wrapper .sub-menu li,
.main-header .navigation ul li .mega-menu-wrapper .mmw-post-link,
.main-header .navigation ul li .mega-menu-wrapper.v3 .mmw-content-list li{ border-color:#DDE1E6 !important; }
.main-header .navigation ul li .mega-menu-wrapper .mmw-post-tag, .main-header .sub-menu .smw-featured-tag{ background:#0072C3 !important; color:#fff !important; }
.main-header .navigation ul li .mega-menu-wrapper .mmw-page-link::after,
.main-header .sub-menu li a.mmw-page-link::after{ color:#0F62FE !important; }
/* HOVER / active = navy fill + cyan text. Apply the BACKGROUND to the item
   CONTAINER only, so it fades in as one smooth block (the container already
   carries transition:background-color .3s). Descendants get the cyan text colour
   but a TRANSPARENT background, so there is no tight colour box hugging the text
   that snaps in ahead of the container fade. */
.main-header .navigation ul li .sub-menu-wrapper .sub-menu li a:hover,
.main-header .navigation ul li .mega-menu-wrapper .mmw-post-wrap:hover,
.main-header .navigation ul li .mega-menu-wrapper .mmw-list ul li a:hover,
.main-header .navigation ul li .mega-menu-wrapper .mmw-list ul li.active a,
.main-header .navigation ul li .mega-menu-wrapper .mmw-content-list li a:hover,
.main-header .sub-menu li a:hover{
  background:#001141 !important; color:#33B1FF !important;
  transition:background-color .25s ease, color .25s ease !important;
}
.main-header .navigation ul li .sub-menu-wrapper .sub-menu li a:hover *,
.main-header .navigation ul li .mega-menu-wrapper .mmw-post-wrap:hover *,
.main-header .navigation ul li .mega-menu-wrapper .mmw-list ul li a:hover *,
.main-header .navigation ul li .mega-menu-wrapper .mmw-list ul li.active a *,
.main-header .navigation ul li .mega-menu-wrapper .mmw-content-list li a:hover *,
.main-header .sub-menu li a:hover *{
  background:transparent !important; color:#33B1FF !important;
  transition:color .25s ease !important;
}

/* SIGNAL DOT on dropdown-item hover — a cyan circle with a pulsing glow to the LEFT
   of the item as it flips to the dark hover state, carrying the "signal" motif into
   the menu. Items get a small permanent left gutter so the dot never overlaps text;
   the dot only appears (and pulses) on hover. */
.main-header .mega-menu-wrapper .mmw-post-wrap,
.main-header .mega-menu-wrapper .mmw-post-link,
.main-header .mega-menu-wrapper .mmw-content-list li a,
.main-header .mega-menu-wrapper .mmw-list ul li a,
.main-header .mega-menu-wrapper .mmw-page-link,
.main-header .sub-menu li a{ position:relative; padding-left:30px !important; }
.main-header .mega-menu-wrapper .mmw-post-wrap::before,
.main-header .mega-menu-wrapper .mmw-post-link::before,
.main-header .mega-menu-wrapper .mmw-content-list li a::before,
.main-header .mega-menu-wrapper .mmw-list ul li a::before,
.main-header .mega-menu-wrapper .mmw-page-link::before,
.main-header .sub-menu li a::before{
  content:"" !important; position:absolute !important; left:8px !important; top:50% !important;
  transform:translateY(-50%) !important; width:11px !important; height:11px !important;
  border:none !important; border-radius:50% !important; background:var(--sig-cyan) !important;
  box-shadow:0 0 0 0 rgba(51,177,255,0) !important;
  opacity:0 !important; transition:opacity .18s ease !important; pointer-events:none !important;
}
/* Signal PING on hover: the dot BIRTHS (scales up from small) with a strong steady cyan
   core glow, then a ring echoes outward and dissolves as it grows — a deliberate radar
   ping. Two box-shadow layers: layer 1 = constant core glow, layer 2 = expanding ring. */
@keyframes sig-ping{
  0%   { transform:translateY(-50%) scale(0.4); box-shadow:0 0 10px 2px rgba(51,177,255,1), 0 0 0 0 rgba(51,177,255,0.7); }
  40%  { transform:translateY(-50%) scale(1);   box-shadow:0 0 10px 2px rgba(51,177,255,1), 0 0 6px 8px rgba(51,177,255,0.35); }
  100% { transform:translateY(-50%) scale(1);   box-shadow:0 0 10px 2px rgba(51,177,255,1), 0 0 8px 26px rgba(51,177,255,0); }
}
.main-header .mega-menu-wrapper .mmw-post-wrap:hover::before,
.main-header .mega-menu-wrapper .mmw-post-link:hover::before,
.main-header .mega-menu-wrapper .mmw-content-list li a:hover::before,
.main-header .mega-menu-wrapper .mmw-list ul li a:hover::before,
.main-header .mega-menu-wrapper .mmw-page-link:hover::before,
.main-header .sub-menu li a:hover::before{
  opacity:1 !important; animation:sig-ping 1.8s ease-out infinite !important;
}
.main-header .navigation ul li .mega-menu-wrapper a:hover .mmw-post-tag{ background:#33B1FF !important; color:#001141 !important; }

/* ============================================================
   INHERIT-NOT-REINVENT PASS (2026-07-14) — QA vs production.
   Surgical fixes that respect the parent's components rather than
   overriding them. Appended last so they win by source order.
   ============================================================ */

/* 1) CARET CIRCLE — the circular arrow on links (.btn-link::after, a filled disc
   with an icon-font glyph). Cyan disc + dark-navy caret, kept perfectly round,
   everywhere (was a blue disc with a white glyph). */
.btn-link::after{
  background:var(--sig-cyan) !important;
  color:var(--sig-ink) !important;
  border-radius:50% !important;
}
/* Pulsing cyan glow behind the caret circle on the navy hero / dark bands, echoing
   the header's pulsing "signal" dot (same colour + 2.4s rhythm). */
@keyframes sig-caret-glow{
  0%,100%{ box-shadow:0 0 6px 1px rgba(51,177,255,0.5); }
  50%{ box-shadow:0 0 15px 4px rgba(51,177,255,0.9); }
}
.landing-hero .btn-link::after, .bg-dark .btn-link::after, .full-width-cta .btn-link::after{
  box-shadow:0 0 8px 2px rgba(51,177,255,0.7); /* base glow, NON-important so the keyframe animation can pulse it (an !important box-shadow would beat the animation and freeze it) */
  animation:sig-caret-glow 2.4s ease-in-out infinite !important;
}
/* ...EXCEPT header dropdown chevrons: those page-links (.mmw-page-link desktop /
   .smw-page-link mobile) also carry `.btn-link`, so the disc above landed on them
   as a tiny cyan dot behind the ~6px chevron glyph. Keep menu chevrons a plain
   blue chevron (no disc). */
.btn-link.mmw-page-link::after, .btn-link.smw-page-link::after{
  background:transparent !important; border-radius:0 !important;
  box-shadow:none !important; color:#0F62FE !important;
}
/* Signal grid + pulsing sensor dots layer for subpage headers (.landing-hero),
   echoing the home hero. The SVG layer is injected by functions.php; this styles
   its placement (behind the content, above the hero background) and the dot pulse. */
.landing-hero{ position:relative; }
/* Layer order: hero photo (0) < grid (1) < gradient scrim (2) < content (3). The grid
   sits BEHIND the gradient so it reads as part of the background (the gradient tints
   it), showing through where the scrim fades to transparent. */
.sig-hero-grid{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; opacity:0.9; }
.landing-hero .landing-hero-bg{ z-index:0; }
.landing-hero::before{ z-index:2 !important; }
.landing-hero > .container, .landing-hero .lh-content, .landing-hero .breadcrumb-wrapper, .landing-hero .lh-inner{ position:relative; z-index:3; }
@keyframes sig-grid-dot-blink{ 0%,100%{ opacity:0.2; } 50%{ opacity:1; } }
.sig-grid-dot{ animation:sig-grid-dot-blink 3s ease-in-out infinite; }

/* "Let's talk" CTA band -> royal blue, FULL WIDTH. The outer .full-width-cta was
   navy full-width with a centered rounded royal-blue box (.fwc-wrap.bg-blue) inside.
   Paint the full-width band royal blue and make the inner wrap transparent + square
   so the colour runs edge to edge (content stays centered by its own container). */
.full-width-cta, .full-width-cta.bg-dark{ background-color:#002D9C !important; }
.full-width-cta .fwc-wrap, .full-width-cta .fwc-wrap.bg-blue{
  background-color:transparent !important; border-radius:0 !important;
}

/* Footer link lists were rendering inside faint navy boxes: the parent marks each
   column's link list as `.sub-menu`, and the skin's HEADER dropdown rule (navy panel
   + hairline border + radius) was unscoped, so it also skinned the footer menus.
   Clear it in the footer so the links sit plainly on the navy footer. */
.main-footer .sub-menu, .main-footer .menu, .main-footer .sub-menu-wrapper{
  background:transparent !important; border:0 !important; box-shadow:none !important; border-radius:0 !important;
}

/* Accordion (e.g. footnote): the inline handler toggles .sig-acc-open on the item;
   rotate the plus into an x to signal the open state. */
.accordion-component .ac-icon-heading{ cursor:pointer; }
.accordion-component .icon-plus{ transition:transform .2s ease; }
.accordion-component .ac-tab-repet.sig-acc-open .icon-plus,
.accordion-component .sig-acc-open .icon-plus{ transform:rotate(45deg); }

/* Home footnotes block (signal-footnotes) — native <details> accordion, no JS.
   Matches the subpage footnote treatment: blue "View footnote details" toggle + a
   circular +/- control; the panel is a numbered list that matches the stat refs. */
.signal-footnotes{ background:#fff; padding:36px 0; }
.signal-footnotes .wrap{ max-width:1240px; margin:0 auto; padding:0 40px; }
.footnote-accordion{ border-top:1px solid var(--sig-line); padding-top:24px; }
.footnote-accordion > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.footnote-accordion > summary::-webkit-details-marker{ display:none; }
.footnote-accordion .footnote-label{ color:var(--sig-blue); text-decoration:underline; font-size:14.4px; }
.footnote-accordion .footnote-plus{ position:relative; flex:0 0 auto; width:28px; height:28px; border-radius:50%; background:var(--sig-blue); }
.footnote-accordion .footnote-plus::before,
.footnote-accordion .footnote-plus::after{ content:""; position:absolute; top:50%; left:50%; background:#fff; }
.footnote-accordion .footnote-plus::before{ width:12px; height:2px; transform:translate(-50%,-50%); }
.footnote-accordion .footnote-plus::after{ width:2px; height:12px; transform:translate(-50%,-50%); transition:opacity .2s ease; }
.footnote-accordion[open] .footnote-plus::after{ opacity:0; } /* + collapses to - when open */
.footnote-accordion .footnote-list{ margin:20px 0 0; padding-left:1.4em; color:var(--sig-gray); font-size:13px; line-height:1.6; }
.footnote-accordion .footnote-list li{ margin-bottom:8px; }
.footnote-accordion .footnote-list a{ color:var(--sig-blue); }

/* Gridviz / data-capability CTA row (home §3). Reuses the hero button classes; the
   outline button is recolored for the LIGHT gridviz section so it stays visible. */
.gridviz-ctas{ display:flex; gap:16px; margin-top:68px; flex-wrap:wrap; }
.gridviz-section .gridviz-ctas .btn-outline{ color:#0F62FE !important; border:1px solid #0F62FE !important; background:transparent !important; }
.gridviz-section .gridviz-ctas .btn-outline:hover{ background:#0F62FE !important; color:#fff !important; }

/* Breadcrumb separator caret (the chevron between "The Weather Company" and the
   page title) -> Signal cyan on the navy hero, on every subpage. */
.breadcrumb-wrapper a::after, .breadcrumb-wrapper .home::after,
.landing-hero .breadcrumb-wrapper a::after{ color:var(--sig-cyan) !important; }

/* Utility menu (Company / News / Resources) -> FLIP of the LOB nav: cyan at rest,
   white on hover (the LOB row is gray at rest, cyan on hover). Selector matches the
   parent's `.menu > li > .menu-toggle` depth so it wins on specificity. */
.main-header .navigation.utility-menu .menu > li > .menu-toggle,
.main-header .navigation.utility-menu .menu > li > a{ color:var(--sig-cyan) !important; }
.main-header .navigation.utility-menu .menu > li > .menu-toggle:hover,
.main-header .navigation.utility-menu .menu > li > a:hover{ color:#fff !important; }
.main-header .navigation.utility-menu .menu > li > .menu-toggle::after,
.main-header .navigation.utility-menu .menu > li > a::after{ background-color:#fff !important; }

/* "BLOG POST" and the other content eyebrow labels share the .eyebrow-text class.
   Bump them ~15% (12px -> 13.8px) everywhere in the page body. Scoped to
   .main-content so the header nav eyebrows/tags are untouched. The vertical-tab
   buttons (also .eyebrow-text) keep their own 14.4px via a higher-specificity rule. */
.main-content .eyebrow-text, .main-content .rr-eyebrow,
.main-content [class*="eyebrow"]{ font-size:13.8px !important; }
/* Secondary link label on the navy hero / dark bands (e.g. "Meet with us at
   Cannes Lions 2026") -> white. It was link-blue, low-contrast on navy. */
.landing-hero .btn-link, .bg-dark .btn-link, .full-width-cta .btn-link{ color:#fff !important; }

/* 2) Hide the faint background "drop / curve" outline decorations, universally.
   `.be-shape` carries the curve as a ::before background-image (the class sits on
   the SAME element as .brand-essence, so it needs a compound/element selector, not
   a descendant one). `.sec-shape` is the inline-SVG curve variant. */
.sec-shape, .be-shape::before, .be-shape::after{ display:none !important; }
/* The use-case image also carries a decorative swoosh as a ::before background-image.
   Kill just the graphic (not the box) in case that pseudo also sizes the container. */
.uc-img::before, .uc-img::after{ background:none !important; }

/* 2b) `.uc-btn` is a WRAPPER around a `.btn-link` (confirmed: every instance is a
   <div> holding an <a class="btn-link">), NOT a filled button — the skin wrongly
   painted it a solid-blue full-width bar with unreadable text (e.g. "Read case
   study"). Reset it to a plain inline container; the `.btn-link` inside carries the
   link colour + caret. The vt "Learn more" button is `.vt-btn.btn`, so it is
   unaffected. */
.uc-btn{ background:transparent !important; display:inline-flex !important; width:auto !important; padding:0 !important; border:0 !important; }
.uc-btn .btn-link{ color:var(--sig-blue) !important; }
.bg-dark .uc-btn .btn-link, .landing-hero .uc-btn .btn-link, .full-width-cta .uc-btn .btn-link{ color:#fff !important; }

/* 3) IMAGE CONTAINERS -> fully square. Some parent cards kept ~9px, the skin
   forced 2px; make every image + image wrapper hard-cornered, site-wide. */
.main-content img, .main-content picture, .main-content figure,
.main-content [class*="-img"], .main-content [class*="-image"], .main-content [class*="-media"],
.main-content [class*="video"], .main-content [class*="-thumb"], .main-content [class*="-visual"],
.main-content .ffc-media, .main-content .common-video, .main-content .mmw-post-img,
.main-content .uc-img, .main-content .vt-img, .main-content .vt-media,
.main-content .tcc-image, .main-content .tcc-card,
.main-content .rr-box-wrap, .main-content .rr-cell, .main-content .sb-item, .main-content .wp-post-image,
.landing-hero .landing-hero-bg img{
  border-radius:0 !important;
}

/* 4) VERTICAL-TABS side nav -> restore the parent's PILL treatment. The skin's
   .eyebrow-text rule flattened these buttons into mono cyan text with no
   delineation. Match production: normal-case sans pills, light default, clear
   hover, cyan active. (The switching itself is re-wired inline in functions.php.)
   The collapse rule below hides the stacked panels before JS boots — no !important
   so the JS inline display wins; higher specificity so it beats the parent's flex. */
.vertical-tabbed .vt-content[data-id] ~ .vt-content[data-id]{ display:none; }
/* Dissolve-in when switching tabs (the switcher toggles opacity 0->1; display alone
   can't transition, so this makes the change perceptible instead of instant). */
.vertical-tabbed .vt-content{ transition:opacity .45s ease; }
.vertical-tabbed .vt-dropdown li button,
.vertical-tabbed .vt-select-trigger button{
  font-family:'IBM Plex Sans', sans-serif !important;
  text-transform:none !important; letter-spacing:normal !important;
  font-size:14.4px !important; font-weight:400 !important;
  color:var(--sig-ink) !important;
  background:#fff !important;
  border:1px solid var(--sig-navy-gray) !important;
  border-radius:2px !important; /* square (Signal is angular), not a pill */
  padding:8px 16px !important;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.vertical-tabbed .vt-dropdown li button:hover{
  background:#E6F0FF !important; border-color:var(--sig-cyan-d) !important;
}
.vertical-tabbed .vt-dropdown li.active button{
  background:#9EF0F0 !important; border-color:#9EF0F0 !important; color:var(--sig-ink) !important;
}

/* 5) SUBPAGE TEXT -> match the parent's heft. The Signal skin sets headings to
   weight 300 and base copy renders a hair small, so subpage text read thin next
   to production. Bump copy size + restore heading weight, site-wide on subpages. */
body:not(.home) .main-content p,
body:not(.home) .main-content li,
body:not(.home) .main-content blockquote,
body:not(.home) .main-content .rich-text{
  font-size:17px !important; line-height:1.55 !important;
}
body:not(.home) .main-content h1, body:not(.home) .main-content h2,
body:not(.home) .main-content h3, body:not(.home) .main-content h4,
body:not(.home) .main-content .h1, body:not(.home) .main-content .h2, body:not(.home) .main-content .h3{
  font-weight:400 !important;
}

/* 6) TWO-COLUMN CARDS (e.g. "Further reading"): the theme alternates card colours —
   one Signal-blue (recolored), the sibling cream (#fcf4d6, set inline) with an
   orange swoosh (2-col-shape-2.png). That read as inconsistent. Make every card the
   Signal blue tint and drop the swoosh on both so the pair matches. */
.two-column-cards .tcc-wrap, .two-column-cards .tcc-wrap .tcc-card{ background-color:#E6F0FF !important; border-radius:0 !important; }
/* "Related resources" royal-blue panel is drawn by .rr-main-wrap::before with a 9px
   radius -> square it. */
.rr-main-wrap::before, .rr-main-wrap::after, .rr-main-wrap{ border-radius:0 !important; }
.two-column-cards .tcc-wrap::before, .two-column-cards .tcc-wrap::after,
.two-column-cards .tcc-card::before, .two-column-cards .tcc-card::after{ background:none !important; }
[style*="background-color:#fcf4d6" i], [style*="background-color: #fcf4d6" i],
[style*="background:#fcf4d6" i], [style*="background: #fcf4d6" i]{ background-color:#E6F0FF !important; }

/* ============================================================
   Home narrative polish (Teresa remap) — 2026-07-14
   ============================================================ */

/* Stat blocks (BY THE NUMBERS + Consumer): stat ~2x bigger, supporting text mono. */
.proof-value{ font-size:clamp(44px, 4.6vw, 64px) !important; }
.proof-value sup{ font-size:0.34em !important; }
.proof-label{ font-family:'IBM Plex Mono', monospace !important; letter-spacing:0.01em; font-size:13.5px; }

/* Per-instance background for a proof block (globe behind BY THE NUMBERS);
   falls back to the default runway photo when --proof-bg-image is unset. */
.proof-bg{
  background-image:
    linear-gradient(180deg, rgba(0,17,65,0.78) 0%, rgba(0,17,65,0.66) 48%, rgba(0,17,65,0.84) 100%),
    var(--proof-bg-image, url('../assets/site/runway-rain-landing.jpeg')) !important;
  background-position:center, center 50% !important;
}

/* Home section titles (h2.section-title) enlarged ~140%. */
.home h2.section-title{ font-size:clamp(45px, 5vw, 64px); }

/* Home eyebrows enlarged to 130% (13px -> 16.9px). */
.home .eyebrow{ font-size:16.9px; }

/* Case-studies title accent: the "|"-split portion in a distinct brand blue. */
.section-title .ttl-accent{ color:#0F62FE; }

/* Mobile menu readability (the parent's drill-down JS is blocked by Rocket Loader,
   so the open panel renders transparent with dark links). Give it a solid navy
   background, light text, dividers, and scroll so it is legible and navigable.
   NOTE: temporary — the proper tap-to-expand drill-down returns once Rocket Loader is off. */
.mbnav.is-open .mbnav__state{ background:#001141 !important; overflow-y:auto !important; }
.mbnav.is-open .mbnav__state a,
.mbnav.is-open .mbnav__state span,
.mbnav.is-open .mbnav__state div,
.mbnav.is-open .mbnav__state li{ color:#EAEDF1 !important; }
.mbnav.is-open .mbnav__state a{ border-bottom:1px solid rgba(255,255,255,0.12) !important; }

/* Proof block: optional intro paragraph + product-logo row (consumer section). */
.proof-intro{ max-width:680px; margin:0 0 44px; color:#EAEDF1; font-size:17px; line-height:1.6; }
.proof-bg .proof-intro{ text-shadow:0 1px 2px rgba(0,8,32,0.9); }
.proof-logos{ display:flex; align-items:center; gap:52px; margin-top:52px; flex-wrap:wrap; }
.proof-logos .proof-logo{ display:inline-flex; align-items:center; }
.proof-logos .proof-logo img{ height:51px; width:auto; opacity:0.92; transition:opacity .2s ease; }
.proof-logos .proof-logo:hover img{ opacity:1; }

/* Vertical (Solutions) cards: cyan industry title, tagline as a distinct subhead, quieter body. */
.vertical-card h3{ color:#33B1FF !important; }
.vertical-card .vc-tagline{ font-family:'IBM Plex Sans', sans-serif; font-weight:500; font-size:17px; line-height:1.4; color:#fff; margin:6px 0 14px; }
.vertical-card .vc-body{ font-size:14.5px; line-height:1.6; color:#C1C7CD; }

/* Final CTA now uses a weather image (not the team photo): fill the band, reveal on the right. */
.cta-photo{ background-size:cover !important; background-position:center right !important; }

/* Typography rule: never leave an orphan/widow on a wrap. text-wrap:pretty pulls a
   word down so the last line is never a lone word; applied to body copy + subheads.
   Plus a slight narrow on the two flagged blocks so they balance cleanly. */
.hero-sub, .hero-kicker, .proof-intro, .feature-substat, .cta-band p,
.vc-tagline, .vc-body, .case-body, .legacy-item p,
.section-title, .feature-statement, .hero-headline{ text-wrap:pretty; }
.hero-sub{ max-width:520px; }
.proof-intro{ max-width:600px; }

/* CTA buttons beneath the stats (dark globe band). */
.proof-ctas{ display:flex; gap:16px; margin-top:52px; flex-wrap:wrap; }
.proof-ctas .btn-primary{ background:#0F62FE !important; color:#fff !important; border:1px solid #0F62FE !important; }
.proof-ctas .btn-primary:hover{ background:#1f6fff !important; }
.proof-ctas .btn-outline{ background:transparent !important; color:#fff !important; border:1px solid rgba(255,255,255,0.55) !important; }
.proof-ctas .btn-outline:hover{ border-color:#fff !important; background:rgba(255,255,255,0.08) !important; }

/* Gridviz: optional GRAF video behind the animated grid overlay. */
.gridviz-plate .gridviz-video{
  position:absolute; top:0; left:0; right:0; bottom:0;
  width:100%; height:100%; object-fit:cover; z-index:0;
}
.gridviz-photo.has-video{ background:none; }

/* Final CTA heading: cap width so it breaks after "intelligence"
   ("Turn intelligence" / "into action"), stays off the team photo, and
   text-wrap:balance keeps the pairing intact (no orphaned "action") at any size. */
.cta-band h2{ max-width:560px; text-wrap:balance; }