/* ============================================================
   AICG enhancement layer — sits on top of the IBM-style scheme.
   Adds styling hooks for GSAP/Three.js micro-interactions only.
   No changes to base palette, layout, or typography.
   ============================================================ */

/* Particle canvas inside the dark hero panel */
.fx-canvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* Split-text containers.
   Padding + negative margin keep descenders (g, y, p) visible while the
   overflow mask hides the word during the slide-up. The mask is released
   entirely once the reveal finishes (.fx-done set in JS). */
.fx-split .fx-word{
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0.1em 0.06em 0.22em 0.02em;
  margin: -0.1em -0.06em -0.22em -0.02em;
}
.fx-split .fx-word > span{ display: inline-block; will-change: transform; }
.fx-split.fx-done .fx-word{ overflow: visible; }

/* Gradient accent words in headings (last N words, data-fx-accent="N").
   Padding extends the paint box below the baseline so background-clip:text
   has gradient to show on descenders (g, y, p); negative margin keeps the
   layout metrics identical. */
.fx-split .fx-word.fx-accent > span{
  background: linear-gradient(95deg, #2f6bff, #a25cff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding: 0.1em 0.14em 0.28em 0.08em;
  margin: -0.1em -0.14em -0.28em -0.08em;
}

/* Tilt cards get GPU hint. The !important transition override strips
   `transform` (and any inline stagger transition-delay) from CSS control —
   the site's premium-motion transitions and reveal delays were re-animating
   every GSAP frame with up to ~500ms of lag, making hovers feel dead.
   GSAP owns transforms on these cards; CSS keeps shadow/background/filter. */
[data-fx-tilt]{
  transform-style: preserve-3d;
  position: relative;
  transition: box-shadow 0.32s ease, background 0.32s ease, filter 0.32s ease !important;
}

/* Every interactive card gets the same elevation shadow on hover —
   matches the premium-motion shadow so all grids feel consistent.
   !important needed because styles.css has a more-specific
   `.capability-grid article:hover` rule (0-2-1) that would otherwise win. */
[data-fx-tilt]:hover{
  box-shadow: 0 28px 90px rgba(15, 23, 42, 0.13) !important;
}

/* Lifted tiles in grey-backed bordered grids: a solid white silhouette
   under the tile covers the 7px slot it lifted out of, so no grey shows.
   Spread +3 bleeds past any 1px grid border.
   !important defeats the specificity of `.capability-grid article:hover`. */
[data-fx-strip]:hover{
  box-shadow: 0 11px 0 3px #ffffff, 0 28px 90px rgba(15, 23, 42, 0.13) !important;
}

/* Cards in gapless bordered grids elevate in place — neutralize the
   premium-motion CSS translateY lift that would cover the card above.
   (Same specificity as the styles.css rule; this file loads later.) */
.premium-motion [data-fx-flat]:hover{ transform: none; }

/* Neutralise the decorative-diamond scale on capability cards: the
   ::before / ::after pseudo-elements scale up 12–28% on :hover in
   styles.css, which makes the whole card look like it's expanding.
   Keep the rotation but drop the scale. */
.capability-grid [data-fx-tilt]:hover::before{ transform: rotate(45deg) !important; }
.capability-grid [data-fx-tilt]:hover::after{ transform: rotate(45deg) !important; }

/* Strip the saturate filter on capability cards only — it intensifies
   colours enough to read as the card "popping" in size. Industry and
   other grids keep theirs since the user likes that effect there. */
.capability-grid [data-fx-tilt]:hover{ filter: none !important; }

/* Magnetic elements shouldn't fight their own CSS transitions */
[data-fx-magnetic]{ will-change: transform; }

/* Stat counter — keep digits steady while counting */
.experience-grid article strong{ font-variant-numeric: tabular-nums; }

/* Brand lockup: nudge the text span down so it visually centres with the
   logo mark (the SVG has internal whitespace that shifts the mark upward). */
.site-header .brand span{ margin-top: 12px; }

/* Tight-stacked headings: line-height is below ~1, so descenders (p, g, y)
   hang outside the line box — give them room before the text below. */
.contact-section h2{ margin-bottom: 0.3em; }
.industry-grid h3{ margin-bottom: 0.25em; }
.founder-body h3{ margin-bottom: 0.2em; }

/* Split layout (homepage "The Problem" section): align the right-column
   body text with the h2, not the eyebrow above it. Eyebrow is ~0.78rem
   at line-height 1.55 (~20px) + 18px margin-bottom = 38px to shift down. */
.split .lead-copy{ padding-top: 38px; }
@media (max-width:1040px){ .split .lead-copy{ padding-top: 0; } } /* optical alignment only makes sense in the two-column layout */

/* Listing grids (Insights, Guides): pin every card link to a shared
   baseline so "Read →" links align across the row regardless of how
   long each card's text is. */
.insight-grid article{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.insight-grid article .card-link{
  margin-top: auto;
  padding-top: 18px;
}

/* Hub pages (Insights, Guides): match the 2-col card layout of the Industries hub.
   insight-grid-hub is added alongside insight-grid so GSAP stagger still fires.
   Cards are separate (gap + shadow + all-4-side border) instead of the mosaic
   (shared borders, no gap) that insight-grid gives editorial listings. */
.insight-grid-hub{
  border-top: none !important;
  border-left: none !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
  margin-top: 52px !important;
  width: min(var(--max), calc(100% - 48px));
  margin-left: auto;
  margin-right: auto;
}
.insight-grid-hub article{
  background: #fff;
  border: 1px solid var(--line) !important;
  padding: 28px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.06);
  min-height: auto !important;
  position: relative;
}
/* Full-card click handled in enhance.js (cardNav). Cursor set here. */
.industry-page-card,
.insight-grid-hub article{
  cursor: pointer;
}
.insight-grid-hub article img{
  width: calc(100% + 56px) !important;
  max-width: none !important;
  margin: -28px -28px 22px !important;
  height: 200px !important;
  object-fit: cover;
  border: none !important;
}
.insight-grid-hub article span{
  display: block;
  color: var(--blue);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.insight-grid-hub article h3{
  font-size: clamp(1.3rem, 1.9vw, 1.75rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin-bottom: 12px;
}
.insight-grid-hub ~ .meta{
  width: min(var(--max), calc(100% - 48px));
  margin: 32px auto 0;
  font-size: 0.9rem;
  color: #6b7280;
}
@media (max-width: 640px) {
  .insight-grid-hub{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}

/* page-intro: narrow 760px centred block between hero and grid looks
   jarring on wide screens next to 1220px sections. Widen to match.
   Paragraph text stays at a comfortable 820px reading width. */
.page-intro{
  width: min(var(--max), calc(100% - 48px));
}
.page-intro > p{
  max-width: 820px;
}

@media (prefers-reduced-motion: reduce) {
  .fx-canvas{ display: none !important; }
}