/* ============================================================================
   PayrAdvisors — Homepage
   Section styles specific to front-page.php. Builds on the component library;
   only adds what the homepage needs (services, proven results, clients, contact).
   ============================================================================ */

/* ---------- Hero (two-column: copy + dashboard chart card) ---------- */
.hero-home {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--on-dark);
  padding-block: calc(var(--space-8) + 68px) var(--space-8);
}
/* Matches the Insights page hero: radial magenta + blue glows over a navy
   gradient, with a masked grid overlay (see .hero::after in insights.css). */
.hero-home__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(900px 500px at 88% -12%, rgba(230, 0, 126, 0.16), transparent 60%),
    radial-gradient(700px 460px at 4% 120%, rgba(28, 127, 214, 0.22), transparent 60%),
    linear-gradient(180deg, #022f54, var(--navy));
}
.hero-home__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(700px 400px at 70% 30%, #000, transparent 75%);
  mask-image: radial-gradient(700px 400px at 70% 30%, #000, transparent 75%);
  pointer-events: none;
}
.hero-home :is(h1, h2) { color: var(--on-dark); }

.hero-home__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: center;
}
@media (min-width: 880px) {
  .hero-home__grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-8); }
}

.hero-home .hero-display {
  font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
}
.hero-home__content .btn-row { margin-top: var(--space-6); }

/* Chart "dashboard" card */
.hero-viz {
  margin: 0;
  padding: var(--space-5);
  border: 1px solid var(--on-dark-line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(2px);
}
.hero-viz__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.hero-viz__label {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: var(--weight-emphasis);
  color: var(--on-dark-faint);
}
.hero-viz__figure {
  font-family: var(--font-serif);
  font-weight: var(--weight-heading);
  font-size: var(--fs-h3);
  color: var(--white);
}
.hero-viz__chart {
  position: relative;
  height: clamp(180px, 24vw, 240px);
}

/* Hero stat cards (magenta accent + count-up) */
.hero-home__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-8);
}
@media (max-width: 559px) {
  .hero-home__stats { grid-template-columns: 1fr; }
}
.hero-stat {
  padding: var(--space-5);
  border: 1px solid var(--on-dark-line);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.04);
}
.hero-stat::before {
  content: "";
  display: block;
  width: 32px;
  height: 3px;
  border-radius: 2px;
  background: var(--magenta);
  margin-bottom: var(--space-3);
}
.hero-stat__value {
  display: block;
  font-family: var(--font-serif);
  font-weight: var(--weight-heading);
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
  line-height: 1;
  color: var(--magenta);
  font-variant-numeric: tabular-nums;
}
.hero-stat__label {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--fs-small);
  color: var(--on-dark-soft);
}

/* ---------- Services (bento grid, grouped by pillar) ---------- */
.home-svc { position: relative; overflow: hidden; }
/* subtle blue glow up top to separate this dark panel from the dark hero above */
.home-svc::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(820px 360px at 50% -12%, rgba(28, 127, 214, 0.16), transparent 62%);
  pointer-events: none;
}
.home-svc > .container { position: relative; }

.svc-bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 880px) {
  .svc-bento {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto auto; /* lead tile + 2 capability rows */
    gap: var(--space-5);
  }
}

/* each pillar = a vertical stack: one lead tile + two capability tiles.
   On wide screens each column adopts the parent's row tracks (subgrid) so the
   lead tiles share a height and the capability rows align — every column the
   same height regardless of copy length. */
.svc-pillar { display: grid; gap: var(--space-4); align-content: start; }
@media (min-width: 880px) {
  .svc-pillar {
    grid-row: span 3;
    grid-template-rows: subgrid;
    gap: var(--space-5);
  }
}

.svc-tile {
  display: block;
  position: relative;
  border: 1px solid var(--on-dark-line);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.04);
  color: var(--on-dark);
  text-decoration: none;
  transition: border-color var(--transition), background var(--transition), transform var(--transition-slow);
}
.svc-tile:hover {
  border-color: var(--magenta);
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-3px);
}

/* lead (pillar) tile — the larger "importance" tile of each column */
.svc-tile--head {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
}
.svc-tile__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius);
  color: var(--magenta);
  background: rgba(230, 0, 126, 0.12);
}
.svc-tile__icon .icon { width: 26px; height: 26px; }
.svc-tile--head .svc-tile__title {
  margin-top: var(--space-4);
  font-size: var(--fs-h4);
  color: var(--white);
}
.svc-tile__text {
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--on-dark-soft);
}
.svc-tile__link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  margin-top: auto; /* anchor to the bottom so stretched lead tiles align the link */
  padding-top: var(--space-5);
  font-size: var(--fs-small);
  font-weight: var(--weight-emphasis);
  color: var(--magenta);
}
.svc-tile__link .icon { width: 15px; height: 15px; transition: transform var(--transition); }
.svc-tile--head:hover .svc-tile__link .icon { transform: translateX(3px); }

/* capability tiles — compact, with a magenta edge accent */
.svc-tile--cap { padding: var(--space-5) var(--space-5) var(--space-5) calc(var(--space-5) + var(--space-3)); }
.svc-tile--cap::before {
  content: "";
  position: absolute;
  top: var(--space-5);
  left: 0;
  width: 3px;
  height: 18px;
  border-radius: 0 2px 2px 0;
  background: var(--magenta);
  opacity: 0.85;
}
.svc-tile--cap .svc-tile__title {
  font-family: var(--font-sans);
  font-weight: var(--weight-emphasis);
  font-size: var(--fs-h6);
  color: var(--white);
}

/* section-closing CTA */
.svc-cta {
  margin-top: var(--space-7);
  text-align: center;
}
.svc-cta__text {
  max-width: 48ch;
  margin: 0 auto var(--space-5);
  font-size: var(--fs-lead);
  color: var(--on-dark-soft);
}

/* ---------- Animated SVG motif behind a lead tile ---------- */
/* The .svc-motif base + animation styles are a shared component (components.css),
   triggered by an ancestor gaining `.is-in`. These two rules are specific to the
   homepage lead tile that hosts the motif. */
.svc-tile--head { overflow: hidden; } /* clip the motif to the tile's radius */
.svc-tile--head > :not(.svc-motif) { position: relative; z-index: 1; } /* content above motif */

/* ---------- Proven results (split) ---------- */
.proven__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
}
@media (min-width: 880px) {
  .proven__grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-8); }
}

.check-list { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.check-list li {
  position: relative;
  padding-left: 1.9rem;
  color: var(--ink);
  font-size: var(--fs-lead);
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--magenta);
  /* white check mark */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 11L3 7.5l1.1-1.1L6.5 8.8 11.9 3.4 13 4.5z' fill='%23000'/%3E%3C/svg%3E") center / 0.8rem no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 11L3 7.5l1.1-1.1L6.5 8.8 11.9 3.4 13 4.5z' fill='%23000'/%3E%3C/svg%3E") center / 0.8rem no-repeat;
  /* fallback if mask unsupported: solid magenta dot */
}
@supports not ((-webkit-mask: url("")) or (mask: url(""))) {
  .check-list li::before { background: var(--magenta); }
}

/* Proven-results uplift chart card (replaces the old photo placeholder) */
.proven-viz {
  margin: 0;
  padding: var(--space-5);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.proven-viz__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.proven-viz__label {
  display: block;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: var(--weight-emphasis);
  color: var(--muted);
}
.proven-viz__client {
  display: block;
  margin-top: 4px;
  font-family: var(--font-serif);
  font-weight: var(--weight-heading);
  font-size: var(--fs-h5);
  color: var(--navy);
}
.proven-viz__chip {
  flex: none;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: rgba(230, 0, 126, 0.10);
  color: var(--magenta-600);
  font-size: var(--fs-small);
  font-weight: var(--weight-emphasis);
  white-space: nowrap;
}
.proven-viz__chart { position: relative; height: clamp(210px, 26vw, 264px); }
.proven-viz__foot {
  margin-top: var(--space-3);
  margin-bottom: 0;
  font-size: 0.6875rem;
  color: var(--faint);
}

/* ---------- Clients ---------- */
/* .clients__label styles live in the global component library (components.css). */
.clients__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  align-items: stretch;
}
@media (min-width: 720px) { .clients__grid { grid-template-columns: repeat(4, 1fr); } }

.client-logo {
  display: grid;
  place-items: center;
  text-align: center;
  min-height: 84px;
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--muted);
  font-weight: var(--weight-emphasis);
  font-size: var(--fs-small);
}
.client-logo small { display: block; font-weight: 400; color: var(--faint); margin-top: 2px; }

/* ---------- Insights teaser (promotes /insights/) ---------- */
.insights-teaser {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--on-dark);
}
/* Insights page's signature background (magenta + blue glows over navy) */
.insights-teaser__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(760px 440px at 90% -20%, rgba(230, 0, 126, 0.18), transparent 60%),
    radial-gradient(680px 460px at 0% 120%, rgba(28, 127, 214, 0.22), transparent 60%),
    linear-gradient(160deg, #022f54, var(--navy));
}
.insights-teaser h2 { color: var(--on-dark); }
.insights-teaser .lead { color: var(--on-dark-soft); }

.insights-teaser__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: center;
}
@media (min-width: 880px) {
  .insights-teaser__grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-8); }
}

.insights-teaser__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin: var(--space-6) 0;
}
@media (max-width: 559px) {
  .insights-teaser__stats { grid-template-columns: 1fr; gap: var(--space-3); }
}
.it-stat__value {
  display: block;
  font-family: var(--font-serif);
  font-weight: var(--weight-heading);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  line-height: 1;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.it-stat__label {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--fs-small);
  color: var(--on-dark-soft);
}

/* "Healthcare Market Index" glass card */
.market-index {
  margin: 0;
  padding: var(--space-5);
  border: 1px solid var(--on-dark-line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(2px);
}
.market-index__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.market-index__title {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: var(--weight-emphasis);
  color: var(--on-dark-faint);
}
.market-index__live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  font-weight: var(--weight-emphasis);
  color: var(--magenta);
}
.market-index__live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--magenta);
}
.market-index__value {
  margin-top: var(--space-4);
  font-family: var(--font-serif);
  font-weight: var(--weight-heading);
  font-size: clamp(2.5rem, 2rem + 2vw, 3.25rem);
  line-height: 1;
  color: var(--white);
}
.market-index__unit { font-size: 0.5em; color: var(--on-dark-soft); margin-left: 2px; }
.market-index__sub { margin-top: var(--space-2); font-size: var(--fs-small); color: var(--on-dark-soft); }
.market-index__sub b { color: var(--magenta); font-weight: var(--weight-emphasis); }
/* bar sparkline — identical to the Insights page hero (.spark) */
.market-index__chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: clamp(70px, 10vw, 88px);
  margin-top: var(--space-4);
}
.market-index__chart i {
  flex: 1;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #5C9CE0, #1C7FD6);
  opacity: 0.9;
}
.market-index__chart i:last-child {
  background: linear-gradient(180deg, #FF5CB0, #E6007E);
  opacity: 1;
}
.market-index__range {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-2);
  font-size: 0.6875rem;
  color: var(--on-dark-faint);
}
@media (prefers-reduced-motion: no-preference) {
  .market-index__live::before { animation: itPulse 1.8s ease-in-out infinite; }
}
@keyframes itPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* ---------- Our Proven Model (deck: "our proven model for your success") ---------- */
.pm-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-top: var(--space-7);
}
@media (min-width: 620px) and (max-width: 979px) {
  .pm-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
}

/* Desktop-only continuous line that flows behind the cards (shown at 980px). */
.pm-flow {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 130px;
  z-index: 0;
  overflow: visible;
  pointer-events: none;
}
.pm-flow__line {
  fill: none;
  stroke: var(--magenta);
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
  opacity: 0.6;
}

.pm-step {
  position: relative;
  z-index: 1;
  padding: var(--space-6);
  border: 1px solid var(--on-dark-line);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.04);
}

/* Mobile (single column): connect the steps with a short vertical line */
@media (max-width: 619px) {
  .pm-step:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(-1 * var(--space-6));
    transform: translateX(-50%);
    width: 2px;
    height: var(--space-6);
    background: linear-gradient(var(--magenta), rgba(230, 0, 126, 0.2));
  }
}

/* Desktop: a staggered "journey" that zig-zags — step 2 drops below step 1,
   step 3 rises back up beside it, step 4 drops again — joined by diagonal
   connector lines + node dots. Gap (56px) and stagger (88px) are fixed, so each
   connector's length/angle stay aligned at any width. */
@media (min-width: 980px) {
  .pm-grid { grid-template-columns: repeat(4, 1fr); gap: 56px; align-items: start; }
  .pm-flow { display: block; }
  /* nth-of-type (not nth-child) so the leading <svg> flow element isn't counted */
  .pm-step:nth-of-type(2) { margin-top: 88px; } /* down */
  .pm-step:nth-of-type(3) { margin-top: 0; }    /* back up (level with step 1) */
  .pm-step:nth-of-type(4) { margin-top: 88px; } /* down */
  /* dot where the flowing line touches each card (top-center, above the number) */
  .pm-step::before {
    content: "";
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--magenta);
    box-shadow: 0 0 0 4px rgba(230, 0, 126, 0.14);
    z-index: 2;
  }
}
.pm-step__num {
  display: block;
  font-family: var(--font-serif);
  font-weight: var(--weight-heading);
  font-size: var(--fs-h2);
  line-height: 1;
  color: var(--magenta);
}
.pm-step__title {
  margin-top: var(--space-3);
  font-size: var(--fs-h5);
  color: var(--white);
}
.pm-step__text {
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--on-dark-soft);
}

/* ---------- Why We Outperform (deck: differentiators + contingency) ---------- */
.outperform .card__icon { width: 52px; height: 52px; color: var(--magenta); background: rgba(230, 0, 126, 0.08); }
.outperform .card__icon .icon { width: 26px; height: 26px; }

.outperform__contingency {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
  margin-top: var(--space-6);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: linear-gradient(120deg, var(--navy), var(--deep-navy));
  color: var(--on-dark);
}
.outperform__contingency-lead { flex: none; }
.outperform__contingency-eyebrow {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: var(--weight-emphasis);
  color: var(--magenta);
}
.outperform__contingency-title {
  margin: 4px 0 0;
  font-family: var(--font-serif);
  font-weight: var(--weight-heading);
  font-size: var(--fs-h3);
  color: var(--white);
}
.outperform__contingency-text {
  flex: 1 1 340px;
  margin: 0;
  max-width: 52ch;
  color: var(--on-dark-soft);
  font-size: var(--fs-lead);
}

/* CTA variant: centered heading + copy + button in the dark band */
.outperform__contingency--cta {
  flex-direction: column;
  justify-content: center;
  text-align: center;
  gap: var(--space-4);
  padding-block: var(--space-8);
}
.outperform__contingency--cta .outperform__contingency-title { font-size: var(--fs-h2); }
.outperform__contingency--cta .outperform__contingency-text { flex: none; max-width: 56ch; margin-inline: auto; }
.outperform__contingency--cta .btn-row { margin-top: var(--space-2); }

/* ---------- Contact ---------- */
.home-contact { scroll-margin-top: 80px; }
/* (Contact grid + form styles are in the global component library, components.css,
   so the homepage and the /contact-us/ page share them.) */