:root{
	/* template variables, re-pointed to the Yilteks identity */
	--primary-color            : #0B152D;
	--secondary-color          : #FFFFFF;
	--bg-color                 : #F5F2EC;
	--text-color               : #5A6478;
	--accent-color             : #16294F;
	--accent-secondary-color   : #C08F3C;
	--white-color              : #FFFFFF;
	--divider-color            : rgba(11,21,45,.12);
	--dark-divider-color       : rgba(255,255,255,.14);
	--default-font             : "Poppins", sans-serif;
	--accent-font              : "Barlow Condensed", "Cal Sans", sans-serif;

	/* brand tokens */
	--yt-navy-900 : #070E1F;
	--yt-navy-800 : #0B152D;
	--yt-navy-700 : #101E3A;
	--yt-navy-600 : #16294F;
	--yt-indigo   : #1E3A6E;
	--yt-gold     : #DFB56A;
	--yt-gold-deep: #C08F3C;
	--yt-blush    : #E8B3A8;
	--yt-cream    : #F5F2EC;
}

/* --------------------------------------------------------------------------
   1. Typography — condensed display face, as on the brochure covers
   -------------------------------------------------------------------------- */
.cb-cursor{display: none;}

.header-btn .btn-default {
    display: none;
}

h1, h2, h3, h4, h5, h6{
	font-family: var(--accent-font);
	font-weight: 600;
	letter-spacing: .2px;
}

.section-title h1,
.section-title h2,
.page-header-box h1,
.hero .section-title h1{
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: -0.2px;
	line-height: 1.02em;
}

.section-title .section-sub-title{
	font-family: var(--default-font);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 2.4px;
	text-transform: uppercase;
}

.btn-default{
	font-family: var(--default-font);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .6px;
	text-transform: uppercase;
}

/* gold underline under section headings — the brochure's rule mark */
.section-title h2::after,
.section-title h1::after{
	content: '';
	display: block;
	width: 58px;
	height: 3px;
	background: var(--yt-gold);
	margin-top: 22px;
}
.section-title-center h2::after,
.section-title-center h1::after{ margin-left: auto; margin-right: auto; }
.page-header-box h1::after{ display: none; }

/* --------------------------------------------------------------------------
   2. Dark sections — denim, not flat black
   -------------------------------------------------------------------------- */

.dark-section{
	background-color: var(--yt-navy-800);
	background-image:
		linear-gradient(140deg, rgba(30,58,110,.55) 0%, rgba(11,21,45,.92) 55%, rgba(7,14,31,1) 100%),
		url('../images/denim-texture.jpg');
	background-size: cover, 620px auto;
	background-position: center center, center top;
	background-repeat: no-repeat, repeat;
}

.hero.dark-section::before{
	background: linear-gradient(180deg, rgba(7,14,31,.55) 0%, rgba(11,21,45,.68) 55%, rgba(11,21,45,.92) 100%);
}

.dark-section p,
.dark-section li{ color: rgba(255,255,255,.72); }
.dark-section h1, .dark-section h2, .dark-section h3,
.dark-section h4, .dark-section h5, .dark-section h6{ color: var(--white-color); }

/* --------------------------------------------------------------------------
   3. Stitch frame — the dashed seam that borders every brochure page
   -------------------------------------------------------------------------- */

.yt-stitch{ position: relative; }
.yt-stitch::after{
	content: '';
	position: absolute;
	inset: 18px;
	border: 1px dashed rgba(232,179,168,.45);
	border-radius: 14px;
	pointer-events: none;
	z-index: 2;
}
@media only screen and (max-width: 767px){
	.yt-stitch::after{ inset: 10px; }
}

/* --------------------------------------------------------------------------
   4. Language switcher + header refinements
   -------------------------------------------------------------------------- */

.yt-lang{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-right: 22px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .5px;
}
.yt-lang a{
	color: var(--white-color);
	opacity: .6;
	transition: all .3s ease-in-out;
	padding: 4px 2px;
}
.yt-lang a:hover{ opacity: 1; color: var(--yt-gold); }
.yt-lang a.active{
	opacity: 1;
	color: var(--yt-gold);
	border-bottom: 2px solid var(--yt-gold);
}
.yt-lang span{ opacity: .3; color: var(--white-color); }

.header-btn{ display: flex; align-items: center; }

.navbar-brand img{ max-height: 48px; width: auto; }

/* --------------------------------------------------------------------------
   5. Stat plates — 2002 / 400K / Europe boxes from the brochure
   -------------------------------------------------------------------------- */

.yt-stats{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 20px;
}
.yt-stat{
	position: relative;
	border: 1px dashed rgba(223,181,106,.55);
	border-radius: 10px;
	padding: 26px 24px;
	background: rgba(255,255,255,.03);
	transition: all .4s ease-in-out;
}
.yt-stat:hover{
	border-style: solid;
	border-color: var(--yt-gold);
	transform: translateY(-6px);
	background: rgba(223,181,106,.07);
}
.yt-stat h3{
	font-size: clamp(30px, 2.6vw, 44px);
	line-height: 1em;
	color: var(--white-color);
	margin-bottom: 10px;
	font-weight: 700;
}
.yt-stat h3 .yt-gold{ color: var(--yt-gold); }
.yt-stat span{
	display: block;
	font-family: var(--default-font);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--yt-gold);
}
.yt-stat p{ margin: 10px 0 0; font-size: 14px; line-height: 1.6em; }

.yt-stats.light .yt-stat{ background: var(--white-color); border-color: rgba(11,21,45,.15); }
.yt-stats.light .yt-stat h3{ color: var(--primary-color); }
.yt-stats.light .yt-stat span{ color: var(--yt-gold-deep); }

/* --------------------------------------------------------------------------
   6. Export bar chart — pieces per year, animated on scroll
   -------------------------------------------------------------------------- */

.yt-chart{
	border: 1px solid rgba(223,181,106,.35);
	border-radius: 14px;
	padding: 34px 32px;
	background: rgba(7,14,31,.45);
	backdrop-filter: blur(4px);
}
.yt-chart h3{
	font-size: 15px;
	font-family: var(--default-font);
	font-weight: 500;
	letter-spacing: 2.2px;
	text-transform: uppercase;
	color: var(--yt-gold);
	margin-bottom: 28px;
}
.yt-bar{
	display: grid;
	grid-template-columns: 108px 1fr 92px;
	align-items: center;
	gap: 14px;
	margin-bottom: 16px;
}
.yt-bar:last-child{ margin-bottom: 0; }
.yt-bar .yt-bar-label{
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: rgba(255,255,255,.85);
}
.yt-bar .yt-bar-track{
	height: 9px;
	border-radius: 100px;
	background: rgba(255,255,255,.09);
	overflow: hidden;
}
.yt-bar .yt-bar-fill{
	display: block;
	height: 100%;
	width: 0;
	border-radius: 100px;
	background: linear-gradient(90deg, var(--yt-indigo), #4E7BC4);
	transition: width 1.4s cubic-bezier(.2,.7,.3,1);
}
.yt-bar .yt-bar-value{
	font-family: var(--accent-font);
	font-size: 20px;
	font-weight: 600;
	color: var(--yt-gold);
	text-align: right;
}
.yt-chart-note{
	margin: 26px 0 0;
	padding-top: 20px;
	border-top: 1px dashed rgba(255,255,255,.18);
	font-size: 13px;
	line-height: 1.7em;
}
@media only screen and (max-width: 575px){
	.yt-bar{ grid-template-columns: 78px 1fr 68px; gap: 10px; }
	.yt-bar .yt-bar-label{ font-size: 10px; letter-spacing: 1px; }
	.yt-bar .yt-bar-value{ font-size: 16px; }
}

/* --------------------------------------------------------------------------
   7. Timeline — company history, 1968 onward
   -------------------------------------------------------------------------- */

.yt-timeline{ position: relative; padding-left: 34px; }
.yt-timeline::before{
	content: '';
	position: absolute;
	left: 6px; top: 8px; bottom: 8px;
	width: 1px;
	background: linear-gradient(180deg, var(--yt-gold), rgba(223,181,106,.15));
}
.yt-tl-item{ position: relative; padding-bottom: 34px; }
.yt-tl-item:last-child{ padding-bottom: 0; }
.yt-tl-item::before{
	content: '';
	position: absolute;
	left: -34px; top: 7px;
	width: 13px; height: 13px;
	border-radius: 50%;
	background: var(--bg-color);
	border: 2px solid var(--yt-gold);
	transition: all .3s ease-in-out;
}
.yt-tl-item:hover::before{ background: var(--yt-gold); transform: scale(1.25); }
.yt-tl-item h3{
	font-size: 30px;
	line-height: 1em;
	color: var(--yt-gold-deep);
	margin-bottom: 10px;
}
.yt-tl-item p{ margin-bottom: 0; font-size: 15px; }

/* --------------------------------------------------------------------------
   8. Production flow — 7 real, ordered stages
   -------------------------------------------------------------------------- */

.yt-flow{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
	gap: 0;
	border-top: 1px dashed rgba(255,255,255,.2);
}
.yt-flow-item{
	padding: 32px 26px;
	border-right: 1px dashed rgba(255,255,255,.2);
	border-bottom: 1px dashed rgba(255,255,255,.2);
	transition: all .4s ease-in-out;
}
.yt-flow-item:hover{ background: rgba(223,181,106,.06); }
.yt-flow-item .yt-flow-no{
	font-family: var(--default-font);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.5px;
	color: var(--yt-gold);
	display: block;
	margin-bottom: 8px;
}
.yt-flow-item h3{
	font-size: 26px;
	text-transform: uppercase;
	color: var(--white-color);
	margin-bottom: 12px;
}
.yt-flow-item p{ font-size: 14px; line-height: 1.7em; margin-bottom: 12px; }
.yt-flow-item .yt-flow-meta{
	font-size: 11px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--yt-gold);
	margin: 0;
}

/* --------------------------------------------------------------------------
   9. Feature cards (green production, knit division, values)
   -------------------------------------------------------------------------- */

.yt-cards{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 22px;
}
.yt-card{
	position: relative;
	border-radius: 12px;
	padding: 30px 28px;
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	overflow: hidden;
	transition: all .4s ease-in-out;
}
.yt-card::before{
	content: '';
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 3px;
	background: var(--yt-gold);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform .45s ease-in-out;
}
.yt-card:hover{ transform: translateY(-8px); box-shadow: 0 22px 50px rgba(11,21,45,.10); }
.yt-card:hover::before{ transform: scaleY(1); }
.yt-card h3{
	font-size: 24px;
	text-transform: uppercase;
	margin-bottom: 12px;
	color: var(--primary-color);
}
.yt-card p{ font-size: 15px; margin-bottom: 0; }

.dark-section .yt-card{
	background: rgba(255,255,255,.04);
	border: 1px dashed rgba(223,181,106,.4);
}
.dark-section .yt-card:hover{ background: rgba(223,181,106,.07); box-shadow: none; }
.dark-section .yt-card h3{ color: var(--white-color); }

/* --------------------------------------------------------------------------
   10. Split content block (image + copy)
   -------------------------------------------------------------------------- */

.yt-split{ display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.yt-split.reverse .yt-split-media{ order: 2; }
.yt-split-media{ position: relative; border-radius: 16px; overflow: hidden; }
.yt-split-media img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.yt-split-media::after{
	content: '';
	position: absolute;
	inset: 14px;
	border: 1px dashed rgba(255,255,255,.5);
	border-radius: 10px;
	pointer-events: none;
}
.yt-split-body p{ font-size: 16px; }
@media only screen and (max-width: 991px){
	.yt-split{ grid-template-columns: 1fr; gap: 34px; }
	.yt-split.reverse .yt-split-media{ order: 0; }
}

/* --------------------------------------------------------------------------
   11. Brand references — grouped by market
   -------------------------------------------------------------------------- */

.yt-markets{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 22px;
}
.yt-market{
	border: 1px dashed rgba(223,181,106,.5);
	border-radius: 12px;
	padding: 24px 26px 26px;
	transition: all .4s ease-in-out;
}
.yt-market:hover{ border-style: solid; background: rgba(223,181,106,.05); }
.yt-market h3{
	font-size: 15px;
	font-family: var(--default-font);
	font-weight: 600;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	color: var(--yt-gold);
	margin-bottom: 18px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.yt-market h3 .yt-flag{ font-size: 20px; letter-spacing: 0; }
.yt-market ul{ display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.yt-market ul li{
	font-family: var(--accent-font);
	font-size: 19px;
	font-weight: 600;
	letter-spacing: .8px;
	text-transform: uppercase;
	color: rgba(255,255,255,.92);
	border: 1px solid rgba(255,255,255,.18);
	border-radius: 6px;
	padding: 7px 14px 5px;
	transition: all .3s ease-in-out;
}
.yt-market ul li:hover{ border-color: var(--yt-gold); color: var(--yt-gold); }

/* marquee strip of markets */
.yt-marquee{ overflow: hidden; position: relative; padding: 26px 0; }
.yt-marquee-track{ display: flex; gap: 54px; width: max-content; animation: yt-scroll 38s linear infinite; }
.yt-marquee:hover .yt-marquee-track{ animation-play-state: paused; }
.yt-marquee-track span{
	font-family: var(--accent-font);
	font-size: 30px;
	font-weight: 600;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: rgba(11,21,45,.30);
	white-space: nowrap;
	transition: color .3s ease-in-out;
}
.yt-marquee-track span:hover{ color: var(--yt-gold-deep); }
.dark-section .yt-marquee-track span{ color: rgba(255,255,255,.42); }
.dark-section .yt-marquee-track span:hover{ color: var(--yt-gold); }
@keyframes yt-scroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
	.yt-marquee-track{ animation: none; }
}

/* --------------------------------------------------------------------------
   12. Certificates
   -------------------------------------------------------------------------- */

.yt-certs{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 18px;
}
.yt-cert{
	border: 1px solid var(--divider-color);
	border-radius: 12px;
	padding: 26px 22px;
	background: var(--white-color);
	text-align: center;
	transition: all .4s ease-in-out;
}
.yt-cert:hover{ border-color: var(--yt-gold); transform: translateY(-6px); }
.yt-cert h3{
	font-size: 26px;
	text-transform: uppercase;
	color: var(--primary-color);
	margin-bottom: 6px;
}
.yt-cert p{
	font-size: 13px;
	line-height: 1.6em;
	margin-bottom: 0;
	color: var(--text-color);
}
.dark-section .yt-cert{ background: rgba(255,255,255,.04); border: 1px dashed rgba(223,181,106,.4); }
.dark-section .yt-cert h3{ color: var(--white-color); }

/* --------------------------------------------------------------------------
   13. Contact blocks
   -------------------------------------------------------------------------- */

.yt-contact-grid{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 22px;
}
.yt-contact-card{
	border: 1px dashed rgba(223,181,106,.55);
	border-radius: 12px;
	padding: 30px 28px;
}
.yt-contact-card h3{
	font-size: 15px;
	font-family: var(--default-font);
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--yt-gold);
	margin-bottom: 20px;
}
.yt-contact-card h4{
	font-family: var(--default-font);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	color: rgba(255,255,255,.55);
	margin: 20px 0 6px;
}
.yt-contact-card h4:first-of-type{ margin-top: 0; }
.yt-contact-card p, .yt-contact-card a{
	font-size: 15px;
	line-height: 1.7em;
	color: rgba(255,255,255,.85);
	margin-bottom: 0;
	display: block;
	word-break: break-word;
}
.yt-contact-card a:hover{ color: var(--yt-gold); }

/* --------------------------------------------------------------------------
   14. Company index cards
   -------------------------------------------------------------------------- */

.yt-company{
	position: relative;
	display: block;
	border-radius: 16px;
	overflow: hidden;
	min-height: 320px;
	background: var(--yt-navy-800);
}
.yt-company img{
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	opacity: .38;
	transition: transform .8s ease-in-out, opacity .5s ease-in-out;
}
.yt-company:hover img{ transform: scale(1.07); opacity: .5; }
.yt-company-body{
	position: relative;
	z-index: 2;
	padding: 34px 30px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 320px;
	background: linear-gradient(180deg, rgba(11,21,45,.15) 0%, rgba(7,14,31,.92) 78%);
}
.yt-company-body span{
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--yt-gold);
	margin-bottom: 10px;
}
.yt-company-body h3{
	font-size: 30px;
	text-transform: uppercase;
	color: var(--white-color);
	margin-bottom: 10px;
}
.yt-company-body p{ font-size: 14px; color: rgba(255,255,255,.7); margin-bottom: 0; }

/* --------------------------------------------------------------------------
   15. Utilities
   -------------------------------------------------------------------------- */

.yt-section{ padding: 100px 0; }
.yt-section-sm{ padding: 70px 0; }
.yt-mt-40{ margin-top: 40px; }
.yt-mt-60{ margin-top: 60px; }
.yt-gold{ color: var(--yt-gold); }
.yt-lead{ font-size: 18px; line-height: 1.8em; }
.yt-eyebrow{
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--yt-gold-deep);
	margin-bottom: 14px;
}
.dark-section .yt-eyebrow{ color: var(--yt-gold); }

.yt-list{ list-style: none; padding: 0; margin: 0; }
.yt-list li{
	position: relative;
	padding-left: 26px;
	margin-bottom: 12px;
	font-size: 15px;
	line-height: 1.7em;
}
.yt-list li::before{
	content: '';
	position: absolute;
	left: 0; top: 10px;
	width: 8px; height: 8px;
	border-radius: 50%;
	border: 1px solid var(--yt-gold);
	background: var(--yt-gold);
}

@media only screen and (max-width: 991px){
	.yt-section{ padding: 70px 0; }
	.section-title h1, .section-title h2{ line-height: 1.06em; }
}


/* --------------------------------------------------------------------------
   16. Hero — full-bleed denim weave, slow drift, and the pocket panel
   -------------------------------------------------------------------------- */

.hero.dark-section{
	background-image: none;
	background-color: var(--yt-navy-900);
}
.yt-hero-media{ position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.yt-hero-media img{
	width: 100%; height: 100%;
	object-fit: cover;
	transform-origin: 60% 40%;
	animation: yt-drift 26s ease-in-out infinite alternate;
}
@keyframes yt-drift{
	from{ transform: scale(1.06) translate3d(0, 0, 0); }
	to  { transform: scale(1.18) translate3d(-1.5%, -2%, 0); }
}
@media (prefers-reduced-motion: reduce){
	.yt-hero-media img{ animation: none; transform: scale(1.06); }
}
.hero .container{ position: relative; z-index: 3; }

.yt-hero-panel{
	position: relative;
	border: 1px dashed rgba(232,179,168,.55);
	border-radius: 14px;
	padding: 34px 32px;
	background: rgba(7,14,31,.42);
	backdrop-filter: blur(6px);
}
.yt-hero-panel .yt-hp-title{
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 2.6px;
	text-transform: uppercase;
	color: var(--yt-gold);
	margin-bottom: 24px;
}
.yt-hp-row{
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 18px;
	padding: 16px 0;
	border-top: 1px dashed rgba(255,255,255,.16);
}
.yt-hp-row:first-of-type{ border-top: none; padding-top: 0; }
.yt-hp-row:last-of-type{ padding-bottom: 0; }
.yt-hp-row strong{
	font-family: var(--accent-font);
	font-size: clamp(30px, 2.6vw, 40px);
	font-weight: 700;
	line-height: 1em;
	color: var(--white-color);
}
.yt-hp-row span{
	font-size: 12px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: rgba(255,255,255,.62);
	text-align: right;
	max-width: 150px;
	line-height: 1.5em;
}
@media only screen and (max-width: 1199px){
	.yt-hero-panel{ margin-top: 44px; }
}

/* --------------------------------------------------------------------------
   14. Brand & certificate logos (from the 2026 deck)
   -------------------------------------------------------------------------- */
.yt-market ul.yt-brand-logos{ gap: 14px 22px; align-items: center; }
.yt-market ul.yt-brand-logos li{ border: 0; padding: 0; background: none; }
.yt-market ul.yt-brand-logos img{ height: 34px; width: auto; max-width: 170px; object-fit: contain; display: block; transition: transform .3s ease; }
.yt-market ul.yt-brand-logos img[alt="Faherty"], .yt-market ul.yt-brand-logos img[alt="Armani Jeans"], .yt-market ul.yt-brand-logos img[alt="Armani Exchange"], .yt-market ul.yt-brand-logos img[alt="Karl Lagerfeld"], .yt-market ul.yt-brand-logos img[alt="Cotton Club"], .yt-market ul.yt-brand-logos img[alt="TONI"]{ height: 52px; }
.yt-market ul.yt-brand-logos li:hover img{ transform: translateY(-3px); }
.yt-marquee-logos{ background: var(--yt-navy-800, #0B152D); border-radius: 12px; }
.yt-marquee-logos .yt-marquee-track{ gap: 64px; align-items: center; }
.yt-marquee-logos .yt-marquee-track span{ display: flex; align-items: center; }
.yt-marquee-logos .yt-marquee-track img{ height: 30px; width: auto; max-width: 160px; object-fit: contain; }
.yt-marquee-logos .yt-marquee-track img[alt="Faherty"]{ height: 48px; }
.yt-cert-logo{
	background: #fff;
	border-radius: 10px;
	height: 120px;
	display: flex; align-items: center; justify-content: center;
	padding: 14px 18px;
	margin-bottom: 18px;
}
.yt-cert-logo img{ max-height: 92px; max-width: 100%; width: auto; object-fit: contain; }
.dark-section .yt-cert-logo{ background: #fff; }
.yt-cert-logo--dark, .dark-section .yt-cert-logo--dark{ background: var(--yt-navy-800, #0B152D); }
@media (max-width: 767px){
	.yt-market ul.yt-brand-logos img{ height: 26px; max-width: 130px; }
	.yt-cert-logo{ height: 100px; }
}

/* production-flow photos from the 2026 deck */
.yt-how-photo{ border-radius: 10px; overflow: hidden; margin-bottom: 22px; aspect-ratio: 2.5 / 1; }
.yt-how-photo img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.how-work-item:hover .yt-how-photo img{ transform: scale(1.04); }