/* -------------------------------------------------------------------------- */
/* file: wp-content/themes/YOUR_THEME/assets/css/style-process.css            */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* Approach section                                                           */
/* Layout matches screenshots:                                                 */
/* - Mobile: header box (bg) then stacked tiles (no numbers)                  */
/* - Desktop: 2 columns (header in col 1, tiles vertical in col 2)            */
/* -------------------------------------------------------------------------- */
.nf-approach {
  padding: 3rem 1.5rem;
}
.nf-approach__inner {
  /* uses your existing .inner max width */
}
.nf-approach__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
.nf-approach__header {
  background: var(--Tertiary-Highlight-Yellow, #E9FF8E);
  border-radius: 0.5rem;
  padding: 4rem 1.5rem;
}
.nf-approach__header .topline {
	justify-content: flex-start;
  padding: 0;
	margin: 0;
}
.nf-approach__header h2 {
  text-align: left;
	margin-bottom: 0;
}
.nf-approach__tiles {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  counter-reset: nf-approach-step;
}
.nf-approach__tile {
  counter-increment: nf-approach-step;
}
.nf-approach__tile-title {
  color: var(--Primary-Director-Black, #252525);
  text-align: center;
  font-feature-settings: 'liga'off;
  /* Mobile/H3 */
  font: var(--Mobile-H3);
  letter-spacing: 0.015rem;
  margin: 0 0 1rem;
}
.nf-approach__tile-text p {
  color: var(--Primary-Director-Black, #252525);
  text-align: center;
  font-feature-settings: 'liga'off;
  /* Mobile/P1 */
  font: var(--Mobile-P1);
  margin-bottom: 1.125rem;	
}
.nf-approach__tile-text p:last-of-type {
  margin: 0;
}
/* 2) Mobile: show number above the h3 */
@media (max-width: 767px) {
  /* target your tile title h3 */
  .nf-approach__tile-title::before {
    content: counter(nf-approach-step);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.25rem; /* little rounded square like your screenshot */
    background: var(--Tertiary-Evergreen-Dark, #007b40); /* green */
    color: #F0FFF7;
		text-align: center;
		/* Desktop/Button Text */
		font: var(--Desktop-Button-Text);
		letter-spacing: 0.1rem;
		text-transform: uppercase;
		margin: 0;
  }
  /* ensure title stays centered if your tile is centered */
  .nf-approach__tile-title {
    display: flex; /* make it a column stack */
    flex-direction: column;
    align-items: center; /* center number + title */
    text-align: center;
    gap: 1.5rem; /* spacing between number and title */
  }
}
@media (min-width: 768px) {
	.nf-approach__grid > * { min-width: 0; }
  .nf-approach__tiles { min-width: 0; }
  .nf-approach__tile-text { min-width: 0; }
  .nf-approach {
    padding: 6rem 1.5rem;
  }
  .nf-approach__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 4rem;
		position: relative;
  }
  .nf-approach__header {
    padding: 4rem;
		gap: 2rem;
		margin: 0;
		grid-column: 1; 
		grid-row: 1;
  }	
  .nf-approach__tiles {
    gap: 2.5rem;
    padding-left: 4rem;
		grid-column: 2; 
		grid-row: 1;
  }
  /* hide the mobile number */
  .nf-approach__tile-title::before {
    content: none;
    display: none;
  }
  .nf-approach__tile-title {
		color: var(--Primary-Director-Black, #252525);
		font-feature-settings: 'liga' off;
		/* Desktop/H3 */
		font: var(--Desktop-H3);
		letter-spacing: 0.01875rem;
		text-align: left;
  }
  .nf-approach__tile-text p {
    font: var(--Desktop-P1);
    text-align: left;
  }
  .nf-approach__tile-text p:last-child {
    margin-bottom: 0
  }
	
}
/* Desktop padding steps (no fluid clamp) */
@media (min-width: 768px) and (max-width: 899.98px) {
  .nf-approach__tiles { padding-left: 1rem; }
}

@media (min-width: 900px) and (max-width: 1129.98px) {
  .nf-approach__tiles { padding-left: 2rem; }
}

@media (min-width: 1130px) {
  .nf-approach__tiles { padding-left: 4rem; }
}

@media (min-width: 768px) {
  .nf-approach__grid > * { min-width: 0; }
  .nf-approach__tiles { min-width: 0; }
}


/* -------------------------------------------------------------------------- */
/* Process section                   */
/* -------------------------------------------------------------------------- */ :root {
  --nf-process-spine: rgba(0, 0, 0, 0.12);
}
/* Section spacing */
.nf-process {
  padding: 3rem 1.5rem;
}
@media (min-width: 768px) {
  .nf-process {
    padding: 6rem 1.5rem;
  }
}
.nf-process__header {
  text-align: center;
  margin-bottom: 1.5rem;
}
/* ---- Accent colors ---- */
.nf-process__tile--c1 {
  --nf-process-accent: var(--Tertiary-Blue-Screen, #7EA6FF);
}
.nf-process__tile--c2 {
  --nf-process-accent: var(--Tertiary-Hot-Set, #FF8F77);
}
.nf-process__tile--c3 {
  --nf-process-accent: var(--Tertiary-Evergreen, #4FD997);
}
.nf-process__tile--c4 {
  --nf-process-accent: var(--Tertiary-Purple-Fringe, #A17BE2);
}
/* -------------------------------------------------------------------------- */
/* Tiles wrapper (grid) — mobile first (1 col)                                 */
/* -------------------------------------------------------------------------- */
.nf-process__tiles {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: stretch;
  justify-items: stretch;
}
/* -------------------------------------------------------------------------- */
/* Shared pieces                                                              */
/* -------------------------------------------------------------------------- */
.nf-process__marker {
  display: flex;
  flex-direction: column;
}
.nf-process__num {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--nf-process-accent);
  color: #F0FFF7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
	font: var(--Mobile-Button-Text);
  letter-spacing: 0.1rem;
}
.nf-process__stem {
  width: 0.25rem;
  background: var(--nf-process-accent);
}
/* Card */
.nf-process__card {
  width: 100%;
  background: var(--Secondary-Daylight, #F4F2EB);
  padding: 1.5rem;
  border-radius: 0.5rem;
  border-bottom: 10px solid var(--nf-process-accent);
  height: 100%;
	left: -0.375rem;
}
.nf-process__card-title {
  color: var(--Primary-Director-Black, #252525);
  font-feature-settings: 'liga'off;
	/* Mobile/Topline */
  font: var(--Mobile-Topline);
  letter-spacing: 0.05625rem;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
}
.nf-process__card-text {
  margin: 0;
  color: var(--Primary-Director-Black, #252525);
  font-feature-settings: 'liga'off;
  font: var(--Mobile-P1);
}
/* -------------------------------------------------------------------------- */
/* MOBILE (<=767): left marker column + vertical gray spine                    */
/* -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .nf-process__tiles{
    position: relative;

    --nf-process-marker-col: 3.25rem; /* must match grid col 1 */
    --nf-process-col-gap: 1rem;       /* must match column-gap */
    --nf-process-gap: 1.5rem;         /* must match grid gap */

    --nf-process-dot: 2rem;           /* circle size */
    --nf-process-marker-top: 2.12rem; /* your marker margin-top */

    /* ? make spine X truly centered in the marker column */
    --nf-process-spine-x: calc(var(--nf-process-marker-col) / 2);
  }

  .nf-process__tile{
    position: relative;
  }

  /* grey spine segment per tile (aligned to dot center) */
  .nf-process__tile::before{
    content:"";
    position:absolute;
    left: var(--nf-process-spine-x);
    top: calc(var(--nf-process-marker-top) + (var(--nf-process-dot) / 2));
    height: calc(100% + var(--nf-process-gap));   /* ✅ KEY FIX */
    width: .25rem;
    transform: translateX(-50%);
    background: var(--nf-process-spine);
    border-radius: 999px;
    pointer-events:none;
    z-index:0;
  }

  .nf-process__tile:last-child::before{ content:none; }

  /* 2-col layout */
  .nf-process__tile{
    display: grid;
    grid-template-columns: var(--nf-process-marker-col) 1fr;
    column-gap: var(--nf-process-col-gap);
    align-items: start;
  }

  .nf-process__marker{
    position: relative;
    z-index: 1;
    margin-top: var(--nf-process-marker-top);
    align-items: flex-start;
  }

  /* ? place dot centered on the spine */
  .nf-process__num{
    margin-left: calc(var(--nf-process-spine-x) - (var(--nf-process-dot) / 2));
    position: relative;
  }

  /* ? connector always reaches the card edge */
  .nf-process__num::after{
    content:"";
    position:absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    height: .25rem;
    background: var(--nf-process-accent);

    /* distance from dot right edge ? card left edge */
    width: calc(
      var(--nf-process-marker-col) + var(--nf-process-col-gap) - var(--nf-process-spine-x) - (var(--nf-process-dot) / 2)
    );
  }

  /* keep marker + card above the spine */
  .nf-process__marker,
  .nf-process__card{ position: relative; z-index: 1; }

  /* no vertical colored stem on mobile */
  .nf-process__stem{ display:none; }

	
	
	
	
	
	
	
  /* place circle on spine */
  .nf-process__num {
    margin-left: calc(var(--nf-process-spine-x) - 1rem);
    position: relative;
  }
  /* horizontal connector to the card */
  .nf-process__num::after {
    content: "";
    position: absolute;
    left: 2rem;
    top: 1rem;
    width: 1.25rem;
    height: 0.25rem;
    background: var(--nf-process-accent);
    /* border-radius: 999px; */
  }
  /* no vertical colored stem on mobile */
  .nf-process__stem {
    display: none;
  }
}
/* -------------------------------------------------------------------------- */
/* DESKTOP (>=768): 4 across, centered marker, vertical stem, horizontal spine */
/* -------------------------------------------------------------------------- */
@media (min-width: 768px) {
	.nf-process__tiles{
		--nf-process-gap: 1.5rem;
		--nf-process-cols: 4;
		--nf-process-gaps: 4.5rem; /* 3 * 1.5rem (cols-1 gaps) */
	}
  .nf-process__tiles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    position: relative;
    justify-items: center; /* centers each column content */
  }
  /* horizontal gray spine behind numbers */
  .nf-process__tiles::before{
    content:"";
    position:absolute;
    top: 1rem; /* center of 2rem circle */
    left: calc((100% - var(--nf-process-gaps)) / (2 * var(--nf-process-cols)));
    right: calc((100% - var(--nf-process-gaps)) / (2 * var(--nf-process-cols)));
    height: .25rem;
    background: var(--nf-process-spine);
    border-radius: 999px;
    pointer-events:none;
    z-index:0;
  }
  /* tile becomes vertical stack again */
  .nf-process__tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    min-width: 0;
  }
	.nf-process__card-title {
		/* Desktop/Topline */
		font: var(--Desktop-Topline);
	}
	.nf-process__card-text {
		/* Desktop/P1 */
		font: var(--Desktop-P1);
	}
  .nf-process__marker {
    position: relative;
    z-index: 1;
    align-items: center;
  }
  /* remove mobile connector */
  .nf-process__num {
    margin-left: 0;
    position: relative;
  }
  .nf-process__num::after {
    content: none;
  }
  /* restore vertical colored stem */
  .nf-process__stem {
    display: block;
    height: 2.375rem;
  }
  /* equal-height cards per row */
  .nf-process__card {
    max-width: 15.625rem;
    height: 100%;
  }
  .nf-process__card-text {
    font-size: 1.125rem;
    line-height: 1.575rem;
  }
}
/* -------------------------------------------------------------------------- */
/* Tools section                                                            */
/* -------------------------------------------------------------------------- */
.nf-process-tools {
  background: var(--Tertiary-Blue-Screen-BG, #F0F4FF);
  display: flex;
  padding: 3rem 1.5rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4rem;
}
.nf-process-tools__header {
  display: flex;
  flex-direction: column;
  max-width: 75.125rem;
  margin-bottom: 3rem;
}
.nf-process-tools .topline {
  color: var(--Tertiary-Blue-Screen, #7EA6FF);
}
/* Tools pills: mobile = vertical stack */
.nf-process-tools__tools {
  list-style: none;
  margin: 0;
  padding: 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  justify-content: center;
  margin: 0 auto 1.5rem;
  align-items: center;
}
.nf-process-tools__tool {
  max-width: 20rem;
  width: 100%;
}
.nf-process-tools__pill {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--Primary-Open-Frame, #ffffff);
  border-radius: 0.5rem;
  width: 100%;
  justify-content: center;
}
.nf-process-tools__tools--last {
  margin-top: 0.75rem; /* matches your vertical rhythm */
}
.nf-process-tools__tools.nf-process-tools__tools--last .nf-process-tools__pill {
  border: 6px solid var(--Tertiary-Blue-Screen, #7EA6FF);
  background: var(--Primary-Open-Frame, #FFF);
}
.nf-process-tools__icon {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  object-fit: contain;
  flex: 0 0 auto;
}
.nf-process-tools__pill-text {
  color: #252525;
  text-align: center;
  font-feature-settings: 'liga'off;
  /* Mobile/H5 */
  font: var(--Mobile-H5);
  letter-spacing: 0.0125rem;
}
.nf-process-tools__text {
  text-align: center;
  max-width: 26rem;
  margin: auto;
}
.nf-process-tools__text p {
  margin: 0;
  color: var(--Primary-Director-Black, #252525);
  text-align: center;
  font-feature-settings: 'liga'off;
  /* Mobile/P1 */
  font: var(--Mobile-P1);
  margin-bottom: 1rem;
}
.nf-process-tools__learn-more {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  width: fit-content;
  color: var(--Primary-Director-Black, #252525);
  text-align: center;
  /* Mobile/Hyperlink */
  font: var(--Mobile-Hyperlink);
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  margin: auto;
}
.nf-process-tools__learn-more:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}
.nf-preheader.topline {
  color: var(--Primary-Director-Black, #252525);
  text-align: center;
  font-feature-settings: 'liga'off;
  /* Mobile/Topline */
  font: var(--Mobile-Topline);
  letter-spacing: 0.05625rem;
  width: 10.00831rem;
  transform: rotate(-8.122deg);
  padding: 0;
  margin-bottom: 1.5rem;
}
/* Desktop */
@media (min-width: 768px) {
  .nf-process-tools {
    padding: 6rem 0 7.5rem 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4rem;
  }
  .nf-process-tools__pill {
    width: auto;
    gap: 1.5rem;
  }
	.nf-process-tools__pill-text {
		/* Desktop/H5 */
		font: var(--Desktop-H5);
	}
  .nf-process-tools__icon {
    width: 3rem;
    height: 3rem;
  }
  .nf-process-tools__tool {
    max-width: 29rem;
    width: auto;
  }
  .nf-process-tools__tools {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
  }
  .nf-process-tools__tools--last {
    margin-top: 1rem;
  }
  /* last item on its own line */
  .nf-process-tools__tool--last {
    flex-basis: 100%;
    display: flex;
    justify-content: center;
  }
  .nf-process-tools__tool--last .nf-process__pill {
    width: fit-content;
  }
}
/* Flourishes */
.nf-section.nf-process-tools .nf-flourish.nf-flourish--mobile {
  position: relative !important;
  margin: auto;
}
.nf-section.nf-process-tools .nf-flourish--a {
  top: 0.5rem;
  margin-bottom: 0.5rem;
}
@media (min-width: 768px) {
  .nf-section.nf-process-tools .nf-flourish--a {
    position: absolute;
		right: -8rem;
    top: 2rem;
  }
  .nf-preheader.topline {
    /* Desktop/Topline */
    font: var(--Desktop-Topline);
    position: absolute;
    top: 2rem;
    right: -19rem;
    width: 10.11831rem;
    transform: rotate(-6.506deg);
  }
}
/* -------------------------------------------------------------------------- */
/* Pricing section                                                            */
/* -------------------------------------------------------------------------- */
.nf-process-pricing {
  padding: 3rem 1.5rem; /* mobile */
  background: #515151;
}
.nf-process-pricing__inner {
  display: flex;
  flex-direction: column;
  position: relative;
}
.nf-process-pricing .inner-process {
  width: 100%;
}
.nf-process-pricing__header {
  text-align: center;
  max-width: var(--max-width);
  margin: 0 auto 4rem;
}
.nf-process-pricing__topline {
  color: var(--Primary-Open-Frame, #ffffff);
}
.nf-process-pricing__heading h2 {
  color: var(--Primary-Open-Frame, #ffffff);
}
.nf-process-pricing__tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.88rem;
  margin: 0 auto 4rem;
  padding: 0 1.12rem;
}
.nf-process-pricing__tile {
  border-radius: 0.5rem;
  background: var(--Primary-Open-Frame, #ffffff);
  padding: 3rem 1.5rem;
  text-align: center;
}
.nf-process-pricing__tile-heading {
  margin: 0 0 1.5rem;
  color: var(--Primary-Director-Black, #252525);
  text-align: center;
  font-feature-settings: 'liga'off;
  /* Mobile/H3 */
  font: var(--Mobile-H3);
  letter-spacing: 0.015rem;
}
.nf-process-pricing__tile-text p {
  color: var(--Primary-Director-Black, #252525);
  text-align: center;
  font-feature-settings: 'liga'off;
  /* Mobile/P1 */
  font: var(--Mobile-P1);
  margin-bottom: 0;
}
.nf-process-pricing__tile-text > :first-child {
  margin-top: 0;
}
.nf-process-pricing__tile-text > :last-child {
  margin-bottom: 0;
}
/* Fabric SVG background + tile fills (your group classes) */
.nf-process-pricing .header-tiles {
  background: #515151;
}
.nf-process-pricing .header-tiles .light_tiles path {
  fill: #4d4d4d;
}
.nf-process-pricing .header-tiles .dark_tiles path {
  fill: #414141;
}
/* Desktop */
@media (min-width: 768px) {
  .nf-process-pricing {
    padding: 6rem 1.5rem;
  }
  .nf-process-pricing__tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: stretch;
    padding: 0;
  }
  .nf-process-pricing__tile-heading {
    /* Desktop/H3 */
    font: var(--Desktop-H3);
    letter-spacing: 0.01875rem;
  }
  .nf-process-pricing__tile-text p {
    /* Desktop/P1 */
    font: var(--Desktop-P1);
  }
}
/* Flourishes */
.nf-section.nf-process-pricing .nf-flourish--a {
  left: -3.25rem;
  top: -4rem;
}
@media (min-width: 768px) {
  .nf-section.nf-process-pricing .nf-flourish--a {
    left: -6rem;
    top: -5rem;
  }
}