/* ============================================================================
   Advisory Services   page-specific styles (loaded after styles.css)
   Reuses the shared theme; adds banding, anchor offset, and a 2-up grid.
   ============================================================================ */

/* Section banding is global now   `.section` / `.section--tint` in styles.css.
   The page-scoped `main > section` rule that used to live here is gone. */

/* Deep-linked sections clear the fixed 82px nav when jumped to via #anchor */
section[id] {
  scroll-margin-top: 96px;
}
/* Focus-area cards are deep-link targets from the Advisory Services menu */
.domain-item[id] {
  scroll-margin-top: 104px;
}

/* 2-up sub-item grid (for sections with two cards) */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
@media (max-width: 800px) {
  .grid-2 {
    grid-template-columns: 1fr;
  }
}

/* 4-up research strip (Perspectives & Research)   collapses 4 → 2 → 1 */
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
}
@media (max-width: 900px) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .grid-4 {
    grid-template-columns: 1fr;
  }
}
/* stagger the strip's reveal like the shared grid-3 does   via the custom property
   `.reveal` reads, never transition-delay (see the note at styles.css:659; a delay
   set here leaks onto the cards' hover tilt) */
.grid-4 > .reveal:nth-child(2) {
  --reveal-delay: 0.07s;
}
.grid-4 > .reveal:nth-child(3) {
  --reveal-delay: 0.14s;
}
.grid-4 > .reveal:nth-child(4) {
  --reveal-delay: 0.21s;
}

/* sub-item card eyebrow sits just above the title.
   Scoped to .persp-grid, which is where all four of this page's insight cards
   live. Unscoped it also caught the three on the home page   harmless while
   each page loaded only its own stylesheet, but the Next app loads all three
   globally so that would have shifted the home cards by .55rem. */
.persp-grid .insight-card > .eyebrow {
  margin-bottom: 0.55rem;
}

/* ============================================================================
   PERSPECTIVES & RESEARCH   "converge from the edges" (pinned scroll-scrub)
   Four cards start off-screen (two left, two right) and fly into a centered
   row as the section pins; reverses on scroll-up. Motion is driven by the
   scrub IIFE in advisory-services.html; this file provides layout + fallbacks.
   ============================================================================ */

/* Wider row than the 1180px .wrap so the bigger cards sit closer to the edges.
   The heading keeps its own .wrap for readable measure. */
.persp-viewport {
  width: min(1600px, 95vw);
  margin: 0 auto;
  padding: 0 1.25rem;
}
.persp-grid {
  perspective: 1500px;
  margin-top: 2.2rem;
}
.persp-slot {
  display: flex;
  min-width: 0;
  will-change: transform, opacity;
}
.persp-slot .insight-card {
  width: 100%;
}

/* A little bigger + embellished (themed icon badge + top accent bar). */
:where(.persp-grid .insight-card) {
  --accent: var(--blue);
}
.persp-grid .insight-card {
  padding: 2.3rem 2rem;
  min-height: 260px;
  overflow: hidden;
  justify-content: flex-start;
}
.persp-grid .insight-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent);
}
/* no more sub-heading: let the paragraph size to its content (not stretch) and sit a little larger */
.persp-grid .insight-card p {
  flex-grow: 0;
  font-size: 1rem;
  line-height: 1.6;
}
.persp-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  box-shadow: 0 8px 18px -6px rgba(15, 37, 71, 0.4);
  transition: transform 0.3s var(--spring);
  margin-bottom: 1.2rem;
}
.persp-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.persp-grid .insight-card:hover .persp-icon {
  transform: scale(1.08) rotate(-4deg);
}

/* Pinned geometry: only on desktop with motion allowed. */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .persp-track {
    height: calc(var(--persp-slots, 4) * 50vh);
  }
  .persp-sticky {
    position: sticky;
    top: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
/* Mobile / reduced-motion: no pin, no fly-in   cards simply sit in place. */
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  /* .section--bare zeroes the section padding; the track restores it when unpinned */
  .persp-track {
    padding: 6.5rem 0;
  }
  .persp-grid {
    perspective: none;
  }
  .persp-slot {
    transform: none !important;
    opacity: 1 !important;
  }
  .persp-grid .insight-card {
    min-height: 0;
  }
}

/* Value Chain band: styles.css already sets #value-chain{background:#fff} and
   the roller geometry (height:280vh; padding:0). We intentionally keep it white
   so the section banding alternates cleanly (white / tint) down the page; the
   roller cards carry their own border + shadow, so they read on white. */

/* Value Chain cards now carry the full Para Connection copy from the table:
   a bold title line followed by the complete paragraph(s). The shared .vc-card
   is a centered flex row (fine for one child)   switch it to a left-aligned
   column so the title + paragraphs stack. */
.vc-card {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.8rem;
}
.vc-card-title {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 1.12rem;
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
}
.vc-card p {
  font-size: 0.95rem;
  line-height: 1.62;
}
.vc-card .vc-card-title {
  font-size: 1.12rem;
}
/* The Sitecore port renders the card body through a Rich Text field, which
   always emits a wrapper element around the value   so the gap above stops
   reaching the paragraphs and .vc-card p{margin:0} butts them together. Spaced
   with a margin rather than by making the wrapper a flex column: a Rich Text
   value is not guaranteed to be paragraphs, and an author who leaves the markup
   inline would get every <strong> and <a> in it laid out as its own flex item,
   one per line. Inert here, where the <p>s are already direct children. */
.vc-card > div > p + p {
  margin-top: 0.8rem;
}

/* ============================================================================
   CLOSING CTA BAND (new component)
   Centered panel with a soft brand gradient; both themes read on light bg.
   ============================================================================ */
.cta-band {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: linear-gradient(
    135deg,
    rgba(46, 111, 190, 0.1),
    rgba(14, 156, 151, 0.08) 55%,
    rgba(232, 114, 44, 0.07)
  );
  box-shadow: var(--shadow-md);
  padding: clamp(2.4rem, 5vw, 4rem);
  text-align: center;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    60% 80% at 50% -10%,
    rgba(46, 111, 190, 0.14),
    transparent 70%
  );
}
.cta-band > * {
  position: relative;
  z-index: 1;
}
.cta-band h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin: 0 auto 1rem;
  max-width: 20ch;
  background: linear-gradient(120deg, #122f57 0%, #2e6fbe 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.cta-band p {
  font-size: 1.05rem;
  color: var(--slate);
  max-width: 52ch;
  margin: 0 auto 1.8rem;
}
.cta-band .hero-ctas {
  justify-content: center;
}