/* Sister Brands Marquee — front end.

   Selectors stay scoped under .ksb on purpose: theme kits style every <img>,
   <a> and <span> in sight, and a bare class loses to `.elementor-kit-7 a`. */

.ksb{
	--ksb-h:54px;                 /* base logo height, before each one's nudge */
	--ksb-gap:90px;
	--ksb-tone:#F5E8D0;
	--ksb-rest:.72;
	--ksb-dim:.38;
	--ksb-lift:-2px;
	--ksb-fade:8%;
	--ksb-e:cubic-bezier(.19,1,.22,1);

	position:relative;
	background:transparent;       /* the page shows straight through */
	overflow:hidden;
	padding:clamp(30px,4vw,60px) 0;
}
.ksb *{box-sizing:border-box}

/* ---------- title ---------- */
.ksb .ksb__head{
	display:flex;align-items:center;gap:clamp(16px,3vw,28px);
	max-width:1180px;margin:0 auto 40px;padding:0 clamp(18px,4vw,44px);
}
.ksb .ksb__head i{flex:1;height:1px;display:block;background:rgba(201,164,92,.26)}

.ksb .ksb__title{
	margin:0;padding:0;white-space:nowrap;text-align:center;
	color:#C49F2E;
}
.ksb .ksb__title--label{
	font-size:11px;font-weight:600;letter-spacing:3.4px;text-transform:uppercase;
	line-height:1.4;
}
.ksb .ksb__title--serif{
	font-size:clamp(19px,2.4vw,26px);font-weight:400;letter-spacing:.02em;
	text-transform:none;line-height:1.25;
}

/* long titles have to be allowed to wrap on a phone */
@media(max-width:600px){
	.ksb .ksb__title{white-space:normal}
	.ksb .ksb__head{gap:12px}
}

/* ---------- the moving row ---------- */
.ksb .ksb__viewport{overflow:hidden;cursor:grab}
.ksb.ksb--nodrag .ksb__viewport{cursor:default}
.ksb .ksb__viewport.is-dragging{cursor:grabbing}

.ksb.ksb--fade .ksb__viewport{
	-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--ksb-fade),#000 calc(100% - var(--ksb-fade)),transparent);
	        mask-image:linear-gradient(90deg,transparent,#000 var(--ksb-fade),#000 calc(100% - var(--ksb-fade)),transparent);
}

.ksb .ksb__track{
	display:flex;align-items:center;gap:var(--ksb-gap);
	width:max-content;will-change:transform;transform:translate3d(0,0,0);
}

.ksb .ksb__item{
	flex:none;display:flex;align-items:center;text-decoration:none;
	opacity:var(--ksb-rest);
	transition:opacity .4s var(--ksb-e),transform .5s var(--ksb-e);
}
.ksb.ksb--dim .ksb__viewport:hover .ksb__item{opacity:var(--ksb-dim)}
.ksb .ksb__item:hover,
.ksb .ksb__item:focus-visible{opacity:1;transform:translateY(var(--ksb-lift))}
.ksb .ksb__item:focus-visible{outline:1px solid var(--ksb-tone);outline-offset:8px}

/* ---------- one logo ----------
   The <img> gives the box its true width from the file's own proportions, and
   the mask paints that shape in a single tone. So no aspect ratio is ever typed
   in, and the same file serves both treatments. */
.ksb .ksb__mark{
	display:block;position:relative;
	height:calc(var(--ksb-h) * var(--ksb-s,1));
}
.ksb .ksb__mark img{
	display:block;height:100%;width:auto;max-width:none;
	border-radius:0;box-shadow:none;
}

.ksb.ksb--tone .ksb__mark{
	background:var(--ksb-tone);
	-webkit-mask:var(--ksb-src) center/contain no-repeat;
	        mask:var(--ksb-src) center/contain no-repeat;
}
/* still laid out, so the box keeps the logo's width — just not painted */
.ksb.ksb--tone .ksb__mark img{visibility:hidden}

@media (prefers-reduced-motion:reduce){
	.ksb .ksb__viewport{overflow-x:auto}
	.ksb.ksb--fade .ksb__viewport{-webkit-mask-image:none;mask-image:none}
	.ksb .ksb__item{opacity:var(--ksb-rest) !important;transform:none !important;
		transition-duration:.01ms !important}
}