/* =============================================================
   ULYSTA — custom overrides (loaded last)
   Keeps the original binnops layout; only adjusts per request.
   ============================================================= */

/* ---- 1. FIXED LOGO (stays visible while scrolling) ---- */
.ulysta-fixed-logo {
  position: fixed;
  top: 18px;
  left: 5%;
  z-index: 1200;
  display: inline-block;
  line-height: 0;
  padding: 9px 16px;
  border-radius: 40px;
  background: rgba(17, 32, 46, .55);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
  transition: background .3s ease, padding .3s ease;
}
.ulysta-fixed-logo img {
  height: 34px;
  width: auto;
  display: block;
  transition: height .3s ease;
}
@media (max-width: 991px) {
  .ulysta-fixed-logo { top: 12px; padding: 7px 13px; }
  .ulysta-fixed-logo img { height: 28px; }
}
@media (max-width: 575px) {
  .ulysta-fixed-logo img { height: 24px; }
}

/* ---- 2. CONTAINERS AT 90% ON ALL SCREENS ---- */
.container,
.content-width {
  max-width: 90% !important;
  width: 90% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* keep full-bleed wrappers full width */
.container-fluid { max-width: 100% !important; width: 100% !important; }

/* ---- 3. BUSINESS MODEL: align the two boxes with the paragraph edges above ---- */
#business .pricing-table-wrapper {
  max-width: 90% !important;
  width: 90% !important;
  margin: 0 auto !important;
  padding: 0 15px;            /* match Bootstrap .container side padding */
  box-sizing: border-box;
}
#business .pricing-table {
  grid-gap: clamp(20px, 3vw, 40px);
}
#business .pricing-table__item {
  margin: 0 !important;       /* remove side insets so box edges line up flush */
}

/* ---- 4. HERO SERVICE CARDS → taller, continuous CSS marquee (GPU, no lag) ---- */
.ulysta-marquee.cards-banner_grids {
  display: block !important;        /* override the original CSS grid */
  grid-template-columns: none !important;
  grid-auto-rows: auto !important;
  gap: 0 !important;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.ulysta-marquee__track {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  will-change: transform;
  animation: ulysta-marquee-scroll 26s linear infinite;
}
.ulysta-marquee:hover .ulysta-marquee__track { animation-play-state: paused; }
.ulysta-marquee__track > .marquee-card {
  flex: 0 0 auto;
  width: clamp(300px, 30vw, 440px);
  margin-right: 18px;   /* each card owns its trailing gap → seamless -50% loop */
}
.ulysta-marquee__track > .marquee-card > .o-h1,
.ulysta-marquee .card-banner,
.ulysta-marquee .card-body_main { display: block; height: 100%; width: 100%; }
/* TALLER cards */
.ulysta-marquee .card-body_main .wrapper { height: 320px !important; }

/* translateX(-50%) = exactly one full set of 3 → seamless loop */
@keyframes ulysta-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (max-width: 991px) {
  .ulysta-marquee__track { animation-duration: 20s; }
  .ulysta-marquee__track > .marquee-card { width: clamp(260px, 60vw, 360px); }
  .ulysta-marquee .card-body_main .wrapper { height: 260px !important; }
}
@media (max-width: 575px) {
  .ulysta-marquee__track > .marquee-card { width: 78vw; }
  .ulysta-marquee .card-body_main .wrapper { height: 230px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .ulysta-marquee__track { animation: none; }
}

/* =============================================================
   HOMEPAGE REVISION — Sept 2026 client feedback round
   ============================================================= */

/* ---- 1. Nav: hide Business Model / Platform without deleting the menu items ---- */
.nav a[href*="/business-model/"],
.nav a[href*="/platform/"] {
  display: none !important;
}

/* ---- 2. Hero: tighten the gap so the visual sits closer to the copy ---- */
.hero-grid {
  grid-template-columns: .92fr 1.08fr !important;
  gap: 34px !important;
}
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr !important; }
}

/* ---- 3. Trust / client logo strip: larger logos ---- */
.trust-logos img,
.marq-track img {
  height: 44px !important;
}
@media (max-width: 620px) {
  .trust-logos img,
  .marq-track img {
    height: 32px !important;
  }
}

/* ---- 4. Services slider: shorter visual now that the stat chip is removed ----
   Force the grid to actually stretch + center the text pane, so slides whose
   copy is shorter than the image don't show a lopsided blank gap at the bottom. */
.svc-slide {
  min-height: 380px !important;
  min-height: 100% !important;
  align-items: stretch !important;
}
.svc-pane {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}
.svc-visual {
  height: 100% !important;
  align-self: stretch !important;
  position: relative !important;
  overflow: hidden !important;
}
/* Absolute-fill instead of a plain height:100% img — sidesteps the
   percentage-height-vs-grid-stretch inconsistency that left the image
   short on slides with less copy. */
.svc-visual img {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  object-fit: cover !important;
}

/* ---- 7. Roadmap steps: force-center every step's text ---- */
.flow-grid .fstep,
.flow-grid .fstep h3,
.flow-grid .fstep ul,
.flow-grid .fstep ul li {
  text-align: center !important;
  padding-left: 0;
  margin-left: 0 !important;
}

/* ---- 12. Global presence: hide Canada and 24/7 cards without touching the ACF data ---- */
.geo-list .g:nth-child(4),
.geo-list .g:nth-child(8) {
  display: none !important;
}

/* ---- 14. Footer: bigger logo (ratio preserved via height-only + width:auto),
   left-align link columns, and fix the 5-col grid template for 4 actual columns ---- */
.ft-grid {
  grid-template-columns: 1.7fr 1fr 1fr 1fr !important;
}
.ft-brand img {
  height: 42px !important;
  width: auto !important;
}
.ft-grid > div:not(.ft-brand) h5,
.ft-grid > div:not(.ft-brand) ul,
.ft-grid > div:not(.ft-brand) ul li {
  text-align: left !important;
}

/* =============================================================
   PROJECTS PAGE — Sept 2026 client feedback round
   ============================================================= */

/* ---- 1. Hide the hero buttons + "20+ / 7 / Oil, Gas & Power" stat row
   (Projects page only — .pj is this page's body class) ---- */
.pj .hbar .acts,
.pj .hbar .b-meta {
  display: none !important;
}

/* ---- 2 & 3. Portfolio grid: 4 cards per row, smaller & height-locked,
   with the description truncated so a 10-bullet project can't stretch
   the card taller than a one-line one. Full text lives on the case-study
   page instead. ---- */
.pj-grid {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 18px !important;
}
.pj-card h3 {
  font-size: 1.02rem !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.5em;
}
.pj-body p {
  font-size: .87rem !important;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.55em * 3);
}
@media (max-width: 1180px) {
  .pj-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 780px) {
  .pj-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 520px) {
  .pj-grid { grid-template-columns: 1fr !important; }
}

/* ---- 3. Case-study / service detail view ----
   Article layout: a comfortable reading measure that copes with a one-line
   scope or a fifteen-bullet one. The old two-column grid left a large void
   next to short entries and squeezed long ones into a narrow rail. */
.wrap-read { max-width: 880px !important; }
.pj-case { padding: 54px 0 84px; }
.pj-case-figure {
  margin: 0 0 30px;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 16/7;
  background: var(--soft);
  box-shadow: var(--sh);
}
.pj-case-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pj-case-scope { max-width: 74ch; }
.pj-case-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
@media (max-width: 640px) {
  .pj-case-figure { aspect-ratio: 16/10; }
  .pj-case-cta .btn { width: 100%; justify-content: center; }
}
/* the old grid is no longer emitted, but neutralise it in case anything
   still carries these classes */
.pj-case-grid { display: block !important; }
.pj-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: .92rem;
  color: var(--ink-2);
  text-decoration: none;
  margin-bottom: 30px;
}
.pj-back svg { width: 18px; height: 18px; stroke: currentColor; fill: none; }
.pj-back:hover { color: var(--orange); }
.pj-case-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 52px;
  padding: 18px 0;
  margin: 0 0 30px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.pj-case-meta dt {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  margin-bottom: 6px;
}
.pj-case-meta dd {
  margin: 0;
  font-weight: 650;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 6px;
}
.pj-case-meta dd svg { width: 14px; height: 14px; stroke: var(--orange); fill: none; flex-shrink: 0; }
.pj-case-sub { font-size: 1.22rem; margin: 30px 0 14px; color: var(--ink); }
.pj-case-sub:first-of-type { margin-top: 0; }
.pj-case-scope p { color: var(--ink-2); line-height: 1.7; margin: 0 0 14px; }
.pj-case-scope ul.scope-list { margin: 0 0 18px; padding: 0; list-style: none; }
.pj-case-scope ul.scope-list li {
  position: relative;
  padding-left: 22px;
  color: var(--ink-2);
  line-height: 1.6;
  margin-bottom: 10px;
}
.pj-case-scope ul.scope-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
  opacity: .8;
}
@media (max-width: 820px) {
  .pj-case-meta { gap: 14px 32px; }
}

/* =============================================================
   TEAM PAGE — mobile fix: leadership cards were rendering as a
   squeezed 3-up grid instead of collapsing to one full-width
   column, forcing the photo/text into a narrow sliver.
   ============================================================= */
@media (max-width: 640px) {
  .team-grid,
  .team-mini {
    grid-template-columns: 1fr !important;
  }
  .tcard {
    width: 100% !important;
  }
  .tcard .ph {
    width: 100% !important;
  }
}

/* Root cause of the mobile squeeze: a leftover pre-refactor rule in
   custom.css (line ~1493) sets `.team-grid{padding:0 10rem}` with no
   responsive override — 320px of side padding alone on a phone, crushing
   the grid regardless of column count. That rule predates the current
   .wrap-based layout, which already handles side spacing, so drop it
   entirely rather than just shrinking it for mobile. */
.team-grid {
  padding: 0 !important;
}

/* =============================================================
   SEPT 2026 — round 3 client feedback
   ============================================================= */

/* ---- [3] Section rhythm: client felt the vertical gaps were too big ---- */
.sec { padding: 62px 0 !important; }
.sec-head { margin-bottom: 34px !important; }
.pj-grid-sec { padding: 28px 0 56px !important; }
.pj-nums { padding: 46px 0 !important; }

/* ---- [15] Curved hero: the "gap" under the wave was a colour mismatch, not
   spacing. The wave was hard-filled #ffffff while custom.css paints the page
   body #ECEDEF, so the curve showed as a white band. The SVG now inherits
   `color`, so the curve is painted in the page ground it sits on. ---- */
.hbar-wave { color: #ECEDEF; }
.hbar + section { padding-top: 26px !important; }

/* ---- [1][17] Hero copy: give the text column a defined 50% width so long
   headings stop wrapping into a very tall banner, and let the paragraph
   run the full width of that column instead of a narrow ch-based cap ---- */
.hbar h1,
.hbar .lead {
  max-width: 50% !important;
  width: 100%;
}
.hero-sub { max-width: 100% !important; }
@media (max-width: 1000px) {
  .hbar h1,
  .hbar .lead { max-width: 100% !important; }
}

/* ---- [16] Bigger brand logo ---- */
.hdr-logo img { height: 44px !important; width: auto !important; }
@media (max-width: 640px) {
  .hdr-logo img { height: 34px !important; }
}

/* ---- [2] Homepage hero on the same dark ground as the visual's own
   background, so the banner reads as one block instead of a light panel
   next to a dark image. Text/badge/stat colours inverted to match. ---- */
.hero { background: #0c2236 !important; }
.hero .blob-a,
.hero .blob-b { opacity: .18 !important; }
.hero h1 { color: #fff !important; }
.hero-sub { color: #cedded !important; }
.hero-badge {
  background: rgba(255, 255, 255, .1) !important;
  border-color: rgba(255, 255, 255, .22) !important;
  color: #e7eef6 !important;
  box-shadow: none !important;
}
.hero-stats .s span { color: #adc1d4 !important; }
.hero-stats { border-top: 1px solid rgba(255, 255, 255, .16); padding-top: 22px; }

/* ---- [7] Homepage project cards: 4 per row ---- */
.proj-grid { grid-template-columns: repeat(4, 1fr) !important; }
@media (max-width: 1180px) { .proj-grid { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 860px)  { .proj-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 560px)  { .proj-grid { grid-template-columns: 1fr !important; } }
/* cards are links now that each one opens its case study */
.proj { text-decoration: none; color: inherit; display: block; }

/* ---- [4][5] Filter tabs — shared by the homepage grid and the Projects
   page (previously inline on the homepage only) ---- */
.proj-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 28px; }
.ptab {
  font: 600 .92rem/1 Inter, system-ui;
  color: var(--ink-2);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 30px;
  padding: 10px 20px;
  cursor: pointer;
  transition: .25s var(--ease);
}
.ptab:hover { border-color: var(--orange); color: var(--ink); }
.ptab.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.is-hidden { display: none !important; }

/* homepage shows a preview row; full list lives on the Projects page */
.proj-all { display: flex; justify-content: center; margin-top: 30px; }

/* Card copy varies from one line to several hundred words, so clamp it to a
   short teaser with a "view details" cue and let every card in a row share
   the same height — the full text lives on the case-study page. */
.proj-grid { align-items: stretch; }
.proj {
  display: flex !important;
  flex-direction: column;
  height: 100%;
}
.proj-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.proj-body h3 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
}
.proj-body p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.55em * 3);
}
.proj-more {
  margin-top: auto;
  padding-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 650;
  font-size: .88rem;
  color: var(--orange);
}
.proj-more svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  transition: .3s var(--ease);
}
.proj:hover .proj-more svg { transform: translateX(4px); }

/* same treatment for the Projects page grid, so its 65 cards line up too */
.pj-grid { align-items: stretch; }
.pj-card { height: 100%; }
.pj-body { display: flex; flex-direction: column; flex: 1; }
.pj-card h3 { min-height: 2.5em; }
.pj-more { margin-top: auto; padding-top: 12px; }

/* ---- [6] Projects page: shorter card image ---- */
.pj-media { aspect-ratio: 16/10 !important; }

/* ---- [14] Capabilities/Industries rows: image matches the copy column's
   height instead of running to its own aspect ratio. Absolute-fill so the
   height resolves reliably inside the grid. ---- */
.plat-row { align-items: stretch !important; }
/* footer links jump to #c1..#c4 — land below the fixed header, not under it */
.plat-row { scroll-margin-top: 110px; }
.plat-row .mock-wrap { display: flex; }
.plat-row .mock-wrap .am-shot {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 260px;
}
.plat-row .mock-wrap .am-shot img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
@media (max-width: 880px) {
  .plat-row .mock-wrap .am-shot { min-height: 220px; }
}

/* ---- [10] Footer menu indent ---- */
#menu-footer-solutions { padding-left: 0; margin-left: 0; list-style: none; }
.ft-grid ul {
  padding-left: 0;
}

/* ---- [18] Feature tooltips on the Capabilities rows ---- */
.plat-feats li.has-tip {
  cursor: help;
  position: relative;
}
.plat-feats li.has-tip > .feat-tip {
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  z-index: 30;
  width: max-content;
  max-width: 280px;
  display: block;
  padding: 12px 14px;
  border-radius: 12px;
  background: #0f2a44;
  color: #eaf1f8;
  box-shadow: 0 18px 40px -14px rgba(8, 20, 34, .55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  pointer-events: none;
  text-align: left;
  white-space: normal;
}
.plat-feats li.has-tip > .feat-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 18px;
  border: 7px solid transparent;
  border-top-color: #0f2a44;
}
.plat-feats li.has-tip > .feat-tip b {
  display: block;
  color: #fff;
  font-size: .9rem;
  margin-bottom: 4px;
}
.plat-feats li.has-tip > .feat-tip span {
  display: block;
  font-size: .84rem;
  line-height: 1.5;
  color: #bed0e0;
}
.plat-feats li.has-tip.tip-open > .feat-tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* The list never reset the browser's default indent, so the ticks sat ~2rem
   in from the heading and paragraph above. The tick (li::before) is the only
   marker — no second dot. */
.plat-feats {
  padding-left: 0 !important;
  margin-left: 0 !important;
  list-style: none;
}
@media (max-width: 560px) {
  .plat-feats li.has-tip > .feat-tip { max-width: 78vw; }
}

/* =============================================================
   MOBILE PASS — Sept 2026 (found by rendering every page at 390px)
   ============================================================= */

/* Inner-page hero: `.hbar .wrap{padding:124px 0 92px}` zeroed the side padding.
   Hidden on desktop by the centred container; on a phone the copy ran into the
   screen edge. Also lines the hero copy up with the content below it. */
.hbar .wrap {
  padding-left: 22px !important;
  padding-right: 22px !important;
}
@media (max-width: 760px) {
  /* hero photos carry baked-in text; a flatter overlay keeps the real copy legible */
  .hbar-bg::after {
    background: linear-gradient(180deg, rgba(8, 20, 34, .9) 0%, rgba(8, 20, 34, .84) 100%) !important;
  }
}

/* Burger: its lines turn white over dark heroes but the button stayed white,
   so the icon was invisible. */
.hero-dark .hdr:not(.scrolled) .burger {
  background: rgba(255, 255, 255, .12) !important;
}

/* Footer: the 4-column rule above carries !important, so it was also beating
   the theme's own phone breakpoints and squeezing four columns onto a phone. */
@media (max-width: 880px) {
  .ft-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 30px 22px !important;
  }
  .ft-grid > .ft-brand { grid-column: 1 / -1; }
  .ft-brand p { max-width: 46ch !important; }
}
@media (max-width: 480px) {
  .ft-grid > div:last-child { grid-column: 1 / -1; }
}
.ft-grid a { overflow-wrap: anywhere; }
.ft-btm { flex-wrap: wrap; gap: 8px 18px; }

/* Home services slider: the absolute-fill image needs its own height once the
   slide stacks into one column, or it collapses to nothing. */
@media (max-width: 820px) {
  .svc-slide { min-height: 0 !important; }
  .svc-visual { height: auto !important; aspect-ratio: 16/10; }
  .svc-pane { height: auto !important; }
}

/* Card titles: clamp to exactly two lines. The min-height was a touch taller
   than two lines, so a sliver of the third line showed underneath. */
.proj-body h3,
.pj-card h3 {
  line-height: 1.3 !important;
  min-height: 2.6em !important;
  max-height: 2.6em;
}

/* Contact form: CF7 outputs the form with html_class="ct-form" inside a
   wrapper that is also .ct-form, so it rendered as a card inside a card. */
.ct-form .ct-form {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
}

/* Project filter tabs: one swipeable row on phones instead of seven rows of pills */
@media (max-width: 760px) {
  .proj-tabs {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -22px 22px !important;
    padding: 2px 22px 8px;
    scroll-snap-type: x proximity;
  }
  .proj-tabs::-webkit-scrollbar { display: none; }
  .ptab { flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start; }
}

/* Capability feature list: one column on phones so long items don't wrap to
   three lines and orphan the tooltip dot */
@media (max-width: 560px) {
  .plat-feats { grid-template-columns: 1fr !important; }
}

/* keyboard users get the tooltip on focus too */
.plat-feats li.has-tip:focus-visible > .feat-tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* blog card without an image: a branded placeholder instead of a broken icon */
.post-img.no-img {
  background: linear-gradient(135deg, #123a5c, #2779c5);
  min-height: 180px;
}

/* single-column phone layout: no neighbour to line up with, so don't reserve
   a blank second line under one-line card titles */
@media (max-width: 560px) {
  .proj-body h3,
  .pj-card h3 { min-height: 0 !important; }
}

/* industry card without an image: same branded placeholder as blog cards */
.icard.no-img {
  background: linear-gradient(135deg, #123a5c, #2779c5);
}

/* Industries "Outcome" line: an inline-flex pill that split into three
   cramped columns on a phone. Let it flow as a sentence instead. */
@media (max-width: 640px) {
  .plat-out {
    display: block !important;
    border-radius: 14px !important;
    line-height: 1.55;
    padding: 12px 16px !important;
  }
}

/* Safety net for image fields left empty in WordPress. An <img src=""> shows a
   broken-image icon and Chrome paints its alt text — that was the faint ghost
   text over the AI & Data Engineering header. Hide it but keep the box, and
   give the frame a branded fill so the gap reads as intentional. */
img[src=""] {
  visibility: hidden !important;
}
.hbar-bg:has(> img[src=""]),
.pj-media:has(> img[src=""]),
.media:has(> img[src=""]),
figure:has(> img[src=""]) {
  background: linear-gradient(135deg, #123a5c, #2779c5);
}

/* ---- Branded 404 page ---- */
.nf-bg {
  background:
    radial-gradient(circle at 78% 30%, rgba(39, 121, 197, .35), transparent 55%),
    linear-gradient(135deg, #0c2236 0%, #123a5c 100%);
}
.nf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.nf-card {
  display: block;
  padding: 22px 22px 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  color: inherit;
  text-decoration: none;
  transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.nf-card b {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 1.05rem;
  color: var(--ink);
}
.nf-card b svg { width: 16px; height: 16px; color: var(--orange); transition: transform .25s var(--ease); }
.nf-card span { display: block; font-size: .9rem; line-height: 1.55; color: var(--muted); }
.nf-card:hover { transform: translateY(-3px); border-color: var(--orange); box-shadow: var(--sh); }
.nf-card:hover b svg { transform: translateX(3px); }
@media (max-width: 860px) { .nf-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .nf-grid { grid-template-columns: 1fr; } }

/* =============================================================
   ROUND 9 — Sept 2026
   ============================================================= */
/* Tooltip points: one bullet per line instead of one run-on sentence */
.plat-feats li.has-tip > .feat-tip { max-width: 320px; }
.plat-feats li.has-tip > .feat-tip .tip-list { display: block; margin: 2px 0 0; }
.plat-feats li.has-tip > .feat-tip .tip-li {
  display: block;
  position: relative;
  padding-left: 14px;
  margin-top: 3px;
}
.plat-feats li.has-tip > .feat-tip .tip-li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ff7a45;
}

/* Industries rows: show the whole image (they carry titles/text), no crop.
   Overrides the [14] absolute-fill rule for the Industries rows only. */
.plat-row[id^="i"] { align-items: center !important; }
.plat-row[id^="i"] .mock-wrap .am-shot { min-height: 0 !important; aspect-ratio: auto !important; height: auto !important; }
.plat-row[id^="i"] .mock-wrap .am-shot img {
  position: static !important;
  display: block;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}