/* ============================================================
   "Thermoforming co-creatie" — 1:1 з app CSS (fluid, як c-progress)
   ============================================================ */
   .tf-cocreatie-formula{ --tf-blue:#3273eb; }

/* секція = o-container (o-band + g-container), синій фон */
.e-con.tf-cocreatie-formula{
	display:flex;                       /* xs: стек */
	flex-direction:column;
	gap:3.125rem;                       /* u-gap:2-xs */
	background-color:var(--tf-blue) !important;
	color:#fff;
	padding:4.6875rem 1.5625rem;
}
.tf-cocreatie-formula > .elementor-widget{ margin:0; }

/* eyebrow (subtitle) + title (alpha book 350) */
.tf-cocreatie-formula-eyebrow .elementor-heading-title{
	margin:0 0 .625rem; color:#fff;
	font-size:.625rem; font-weight:500; letter-spacing:.15em; line-height:1.1; text-transform:uppercase;
}
.tf-cocreatie-formula-title .elementor-heading-title{
	margin:0; color:#fff; font-weight:350;
	font-size:1.875rem; line-height:2.1875rem;
}
.tf-cocreatie-formula-title{ margin-top:-2.5rem !important; }   /* пара eyebrow↔title */

/* ---- кроки (c-progress) — xs: стек по центру ---- */
.tf-steps{ display:flex; flex-direction:column; align-items:center; }
.tf-steps__item{ position:relative; text-align:center; }
.tf-steps__item + .tf-steps__item{ margin-top:3.125rem; }
.tf-steps__item + .tf-steps__item::before{
	content:"+"; position:absolute; left:50%; top:-1.875rem;
	transform:translate(-50%,-100%);
	color:#fff; font-size:.8125rem; font-weight:500; line-height:1;
}
.tf-steps__item:last-child{ margin-bottom:3.125rem; }
.tf-steps__item:last-child::after{
	content:"="; position:absolute; left:50%; bottom:0;
	transform:translate(-50%,100%);
	color:#fff; font-size:.8125rem; font-weight:500; line-height:1;
}
/* іконка — xs фіксовано 4.6875rem (c-progress__shape base) */
.tf-steps__shape{ position:relative; width:4.6875rem; height:4.6875rem; margin-bottom:.9375rem; }
.tf-steps__shape svg{ position:absolute; inset:0; width:100%; height:100%; }
.tf-steps__label{
	display:block; color:#fff;
	font-size:.625rem; font-weight:500; letter-spacing:.15em; text-transform:uppercase;
}

/* логотип (c-progress__shape--large) — xs по центру */
.tf-cocreatie-formula-logo{ display:flex; justify-content:center; }
.tf-logo-mark svg{ display:block; width:9.375rem; height:9.375rem; }

/* ============================================================
   ≥768px: 12-грід. Іконки стають fluid (width:100% padding-bottom:100%)
   Роздільники на -gap/2 (як c-progress__item). --gap = grid-gap кроків.
   ============================================================ */
   @media (min-width:768px){
   	.e-con.tf-cocreatie-formula{
   		display:grid;
   		grid-template-columns:repeat(12,minmax(0,1fr));
   		gap:2rem;
   		padding:6rem 3rem;
   		align-items:center;
   	}
   	.tf-cocreatie-formula-eyebrow{ grid-column:1 / span 8; grid-row:1; align-self:end; }
   	.tf-cocreatie-formula-title  { grid-column:1 / span 8; grid-row:2; margin-top:0 !important; }
   	.tf-cocreatie-formula-steps  { grid-column:1 / span 9; grid-row:3; align-self:center; }
   	.tf-cocreatie-formula-logo   { grid-column:10 / span 3; grid-row: 1 / span 7; align-self:center; justify-content:flex-end; }

   	.tf-cocreatie-formula-eyebrow .elementor-heading-title{ font-size:.6875rem; }
   	.tf-cocreatie-formula-title .elementor-heading-title{ font-size:2.375rem; line-height:2.75rem; }

   	/* кроки = g-cols:4, gap керує змінна --gap */
   	.tf-steps{
   		--gap:2rem;                       /* u-gap:2-sm>sm */
   		display:grid;
   		grid-template-columns:repeat(4,minmax(0,1fr));
   		align-items:start;
   		column-gap:var(--gap);
   	}
   	.tf-steps__item{ margin:0 !important; }

   	/* іконка fluid — квадрат на всю ширину колонки */
   	.tf-steps__shape{ width:100%; height:0; padding-bottom:100%; margin:0 0 .9375rem; }

   	/* "+" рівно по центру зазору між колонками */
   	.tf-steps__item + .tf-steps__item::before{
   		left:calc(var(--gap) / -2);
   		top:calc((100% - 1.3rem) / 2);    /* центр іконкового квадрата (мінус висота підпису) */
   		transform:translate(-50%,-50%);
   	}
   	/* "=" у зазор праворуч від останньої іконки */
   	.tf-steps__item:last-child{ margin:0 !important; }
   	.tf-steps__item:last-child::after{
   		content:"="; left:auto; right:calc(var(--gap) / -2); bottom:auto;
   		top:calc((100% - 1.3rem) / 2);
   		transform:translate(50%,-50%);
   	}

   	.tf-logo-mark svg{ width:9.375rem; height:9.375rem; }
   }

/* ---- ≥992px (md) ---- */
@media (min-width:992px){
	.e-con.tf-cocreatie-formula{ gap:4rem; padding:8rem 4rem; }   /* u-gap:2-md */
	.tf-steps{ --gap:4rem; }                                       /* u-gap:2-md>md */
}

/* ---- ≥1200px (lg): copy span-7, steps gap 8rem ---- */
@media (min-width:1200px){
	.e-con.tf-cocreatie-formula{ padding:10rem 6rem 0; }
	.tf-cocreatie-formula-eyebrow{ grid-column:1 / span 7; }
	.tf-cocreatie-formula-title  { grid-column:1 / span 7; }
	.tf-cocreatie-formula-eyebrow .elementor-heading-title{ font-size:.8125rem; margin-bottom:.9375rem; }
	.tf-cocreatie-formula-title .elementor-heading-title{ font-size:3.125rem; line-height:3.625rem; }
	.tf-steps{ --gap:8rem; }                                       /* u-gap:4-md>lg */
	.tf-logo-mark svg{ width:12.5rem; height:12.5rem; }            /* --large @1200 */
}

/* ---- ≥1550px (xl): copy span-7, steps span-8, logo col9 span-4 ---- */
@media (min-width:1550px){
	.e-con.tf-cocreatie-formula{ gap:5rem; padding:12.5rem 10rem 0; }  /* u-gap:2-xl */
	.tf-cocreatie-formula-steps{ grid-column:1 / span 8; }
	.tf-cocreatie-formula-logo { grid-column:9 / span 4; }
	.tf-cocreatie-formula-title .elementor-heading-title{ font-size:4.125rem; line-height:4.1875rem; }
	.tf-steps{ --gap:7.5rem; }                                       /* u-gap:3-xl>xl */
	.tf-logo-mark svg{ width:15.625rem; height:15.625rem; }          /* --large @1550 */
}

/* ---- ≥1800px (xxl): copy span-6, steps gap 10rem ---- */
@media (min-width:1800px){
	.tf-cocreatie-formula-eyebrow{ grid-column:1 / span 6; }
	.tf-cocreatie-formula-title  { grid-column:1 / span 6; }
	.tf-steps{ --gap:10rem; }                                        /* u-gap:4-xl>xxl */
	.tf-logo-mark svg{ width:20.375rem; height:20.375rem; }          /* --large @1800 */
}

@media (max-width: 767px){
	.tf-cocreatie-formula-steps, .tf-cocreatie-formula-logo{
		width: 100%;
	}	
	.tf-steps__item:last-child::after {
		bottom: -30px;
	}
	.tf-steps__item + .tf-steps__item::before {
		top: -1.5rem;
	}
}