/*------------------------------------------------------------------
    Header
-------------------------------------------------------------------*/

	@media (min-width: 1025px) {

		.hayler .classic-menu .nav-height {
			background-color: transparent;
		}

		.hayler .classic-menu #clapat-nav-wrapper {
			position: absolute;
			top: 50%;
			left: 50%;
			width: auto;
			height: auto;
			padding: 10px;
			background-color: rgba(128, 128, 128, 0.35);
			border-radius: 3px;
			-webkit-backdrop-filter: blur(7px);
			backdrop-filter: blur(7px);
			transform: translate(-50%, -50%);
		}

	}

	.hayler #header-button .button-icon i {
		background-color: var(--primary-color);
		color: var(--color-black);
		filter: none;
	}

	.hayler #header-button .button-icon i::before {
		filter: none;
	}



/*------------------------------------------------------------------
    Footer
-------------------------------------------------------------------*/

	.hayler #clapat-footer:not(.absolute) {
		overflow: visible;
		color: var(--color-white);
		background-color: var(--fullscreen-menu-bg-color);
	}

	.hayler #clapat-footer:not(.absolute)::before {
		content: "";
		position: absolute;
		top: -20px;
		left: 0;
		width: calc(50% - 1px);
		height: 20px;
		background-color: var(--fullscreen-menu-bg-color);
		border-top-right-radius: 10px;
	}

	.hayler #clapat-footer:not(.absolute)::after {
		content: "";
		position: absolute;
		top: -20px;
		right: 0;
		width: calc(50% - 1px);
		height: 20px;
		background-color: var(--fullscreen-menu-bg-color);
		border-top-left-radius: 10px;
	}

	@media only screen and (max-width: 1024px) {

		.hayler #clapat-footer:not(.absolute) {
			overflow: hidden;
		}

		.hayler .footer-nav-lists {
			grid-template-rows: repeat(5, auto);
		}

	}

	@media only screen and (max-width: 767px) {

		.hayler #clapat-footer:not(.absolute) .clapat-footer-left {
			right: 0;
			left: auto;
			justify-content: flex-end;
		}

		.hayler #clapat-footer:not(.absolute) #backtotop {
			bottom: -6px;
			left: 16px;
		}

		.hayler #clapat-footer:not(.absolute) .clapat-footer-center {
			justify-content: flex-start;
		}

		.hayler #clapat-footer:not(.absolute) .clapat-footer-right {
			justify-content: flex-start;
		}

		.hayler #clapat-footer:not(.absolute) .socials-wrap .socials {
			-webkit-transform: translateX(-14px);
			transform: translateX(-14px);
		}

	}



/*------------------------------------------------------------------
    Hero Section
-------------------------------------------------------------------*/

	.hayler .has-media #hero-caption {
		justify-content: flex-end;
	}

	.hayler #hero-caption.text-align-default-desktop .inner {
		width: 100%;
	}

	.hayler #hero-caption.text-align-default-desktop .hero-subtitle {
		width: 100%;
		box-sizing: border-box;
		padding-left: calc(66.6667% - (1 * var(--gap)) / 3 + var(--gap));
	}

	.hayler #hero-caption.error-caption .hero-title {
		font-size: var(--bt-font-size);
		line-height: var(--bt-line-height);
		font-weight: var(--bt-font-weight);
		letter-spacing: var(--bt-letter-spacing);
		column-gap: 0;
	}

	.hayler #hero-caption.error-caption .hero-title .word-wrapper span {
		text-shadow: 0 1.05em 0 currentColor;
	}

	.hayler .has-border {
		--segment: calc(
			(100% - (var(--horizontal-gutter) * 2) - (var(--gap) * 2)) / 3
		);
		mask-image: linear-gradient(
			to right,
			transparent 0,
			transparent var(--horizontal-gutter),
			black var(--horizontal-gutter),
			black calc(var(--horizontal-gutter) + var(--segment)),
			transparent calc(var(--horizontal-gutter) + var(--segment)),
			transparent calc(var(--horizontal-gutter) + var(--segment) + var(--gap)),
			black calc(var(--horizontal-gutter) + var(--segment) + var(--gap)),
			black calc(var(--horizontal-gutter) + var(--segment) * 2 + var(--gap)),
			transparent calc(var(--horizontal-gutter) + var(--segment) * 2 + var(--gap)),
			transparent calc(var(--horizontal-gutter) + var(--segment) * 2 + var(--gap) * 2),
			black calc(var(--horizontal-gutter) + var(--segment) * 2 + var(--gap) * 2),
			black calc(var(--horizontal-gutter) + var(--segment) * 3 + var(--gap) * 2),
			transparent calc(var(--horizontal-gutter) + var(--segment) * 3 + var(--gap) * 2),
			transparent 100%
		);
	}

	.hayler .has-border::before {
		top: 0;
		bottom: auto;
		transform-origin: left;
	}

	.hayler .has-border::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 2px;
		background-image:
			linear-gradient(to top, var(--color-black) 0%, var(--color-black) 100%),
			linear-gradient(to right, transparent, transparent),
			linear-gradient(to top, transparent, transparent);
		background-position: -100% 50%, 50% 0, 0 50%;
		background-repeat: no-repeat;
		background-size: 50% 2px, 2px 100%, 100% 2px;
		opacity: 1;
	}

	.hayler .light-content .has-border::after {
		background-image:
			linear-gradient(to top, var(--color-white) 0%, var(--color-white) 100%),
			linear-gradient(to right, transparent, transparent),
			linear-gradient(to top, transparent, transparent);
	}

	.hayler .has-border.visible::after {
		background-position: 100% 0%, 50% 0, 0 50%;
		background-size: 0 2px, 2px 100%, 100% 2px;
		transition: transform 0.5s ease-out 0s, background-size 1.5s cubic-bezier(.69, 0, 0, 1) 0.45s, background-position 0.6s cubic-bezier(.6, 0, .05, 1) 0.45s;
	}

	.hayler .hero-footer-left {
		display: flex;
		justify-content: flex-start;
		width: calc(33.3333% - (2 * var(--gap)) / 3);
	}

	.hayler .hero-footer-center {
		display: flex;
		justify-content: flex-start;
		width: calc(33.3333% - (2 * var(--gap)) / 3);
	}

	.hayler .hero-footer-right {
		display: flex;
		justify-content: flex-end;
		width: calc(33.3333% - (2 * var(--gap)) / 3);
	}

	.hayler .hero-footer-left #back-home .text-wrap {
		white-space: nowrap;
	}

	.hayler .hero-footer-left #back-home .button-text {
		display: block;
	}

	/* Responsive */

	@media only screen and (max-width: 1024px) {

		.hayler #hero-caption.text-align-default-desktop .hero-subtitle {
			margin-top: 40px;
			padding-left: calc(33.3333% + var(--gap) / 3);
		}

	}

	@media only screen and (max-width: 767px) {

		.hayler #hero-caption.text-align-default-desktop .hero-subtitle {
			margin-top: 20px;
			padding-left: 0;
		}

	}



/*------------------------------------------------------------------
    Page Nav Section
-------------------------------------------------------------------*/

	.hayler .nav-intro-wrapper {
		position: absolute;
		z-index: 1000;
		display: flex;
		flex-direction: column;
		gap: calc(var(--gap) / 2);
		width: 100%;
		height: auto;
		box-sizing: border-box;
		padding-top: calc(var(--header-height) - var(--gap) * 2);
		padding-left: var(--horizontal-gutter);
		padding-right: var(--horizontal-gutter);
	}

	.hayler .nav-intro-wrapper .nav-intro-text {
		display: flex;
		justify-content: flex-start;
		width: 100%;
	}

	.hayler .nav-intro-wrapper .nav-intro-text .span-text {
		position: relative;
		display: flex;
		align-items: stretch;
		justify-content: flex-start;
		width: 100%;
		column-gap: 0.2em;
		flex-shrink: 0;
	}

	.hayler .nav-intro-wrapper.text-align-center .nav-intro-text .span-text {
		justify-content: center;
	}

	.hayler .nav-intro-wrapper.text-align-right .nav-intro-text .span-text {
		justify-content: flex-end;
	}

	.hayler .nav-intro-wrapper .nav-intro-text .span-word {
		overflow: hidden;
		justify-content: center;
	}

	.hayler .nav-intro-wrapper .nav-intro-text .span-word:first-child {
		justify-content: flex-start;
	}

	.hayler .nav-intro-wrapper .nav-intro-text .span-word:last-child {
		justify-content: flex-end;
	}

	.hayler .nav-intro-wrapper .nav-intro-text .span-word span {
		position: relative;
		display: block;
	}

	.hayler .nav-intro-wrapper .nav-intro-text .span-word span::before {
		content: attr(data-hover);
		position: absolute;
		top: 0;
		left: 0;
		width: auto;
		-webkit-transform: translateY(100%);
		transform: translateY(100%);
	}

	.hayler .next-hero-subtitle {
		opacity: 1;
	}



/*------------------------------------------------------------------
    Showcase Slider Parallax
-------------------------------------------------------------------*/

	.hayler .clapat-slider-wrapper .clapat-slider-caption {
		justify-content: flex-start;
	}

	.hayler .clapat-slider-wrapper .clapat-slider-caption .item-caption {
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: auto;
		text-align: left;
	}

	.hayler .clapat-slider-wrapper .clapat-slider-caption .item-title {
		left: -0.06em;
	}

	.hayler .clapat-slider-wrapper .clapat-slider-caption .item-role {
		text-align: right;
	}

	.hayler .clapat-slider-wrapper .clapat-slider-caption .item-cat > span {
		display: block;
	}

	/* Slider Pagination Bullets */

	.hayler .clapat-slider-footer {
		overflow: visible;
	}

	.hayler .showcase-slider-parallax .clapat-slider-pagination {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 20;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		width: 100%;
		height: auto;
		box-sizing: border-box;
		padding-left: var(--horizontal-gutter);
		padding-right: var(--horizontal-gutter);
		gap: var(--gap);
		counter-reset: slide;
		pointer-events: none;
		-webkit-transform: translateY(-100%);
		transform: translateY(-100%);
	}

	.hayler .showcase-slider-parallax .clapat-pagination-bullet {
		position: relative;
		display: inline-flex;
		align-items: flex-start;
		justify-content: flex-start;
		width: 100%;
		height: auto;
		padding-bottom: 40px;
		margin: 0;
		opacity: 1;
		cursor: pointer;
		pointer-events: none;
		-webkit-transition: opacity 0.2s ease-in-out;
		transition: opacity 0.2s ease-in-out;
	}

	.hayler .showcase-slider-parallax .clapat-pagination-bullet::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 1px;
		opacity: 0.2;
		background-color: currentColor;
		-webkit-transform: scaleX(1);
		transform: scaleX(1);
		transform-origin: center;
	}

	.hayler.viewport-mobile .showcase-slider-parallax .clapat-pagination-bullet::before {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 1px;
		background-color: currentColor;
		-webkit-transform: scaleX(0);
		transform: scaleX(0);
		transform-origin: right;
		-webkit-transition: transform 0.2s ease-in-out 0.1s;
		transition: transform 0.2s ease-in-out 0.1s;
	}

	.hayler.viewport-mobile .showcase-slider-parallax .clapat-pagination-bullet.clapat-pagination-bullet-active::before {
		transform-origin: left;
		-webkit-transform: scaleX(1);
		transform: scaleX(1);
	}

	.hayler .showcase-slider-parallax .clapat-pagination-bullet .bullet-number-wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		width: auto;
		height: 100%;
	}

	.hayler .showcase-slider-parallax .clapat-pagination-bullet .bullet-number {
		position: relative;
		width: auto;
		height: 100%;
		opacity: 0.2;
		pointer-events: initial;
		-webkit-transition: opacity 0.2s ease-in-out;
		transition: opacity 0.2s ease-in-out;
	}

	.hayler .showcase-slider-parallax .clapat-pagination-bullet.clapat-pagination-bullet-active .bullet-number,
	.hayler .showcase-slider-parallax .clapat-pagination-bullet .bullet-number-wrapper:hover .bullet-number {
		opacity: 1;
	}

	.hayler .showcase-slider-parallax .clapat-pagination-bullet .clapat-autoplay-progress {
		position: absolute;
		bottom: -1px;
		left: 0;
		width: 100%;
		height: 3px;
		opacity: 0;
	}

	.hayler .showcase-slider-parallax .clapat-pagination-bullet.clapat-pagination-bullet-active .clapat-autoplay-progress {
		opacity: 1;
	}

	.hayler .showcase-slider-parallax .clapat-pagination-bullet .clapat-autoplay-progress span {
		position: relative;
		display: block;
		width: 0%;
		height: 2px;
		background: currentColor;
	}

	/* Responsive */

	@media only screen and (max-width: 1024px) {

		.hayler .clapat-slider-wrapper .clapat-slider-caption .item-caption {
			flex-direction: column;
			align-items: flex-start;
			justify-content: center;
			text-align: left;
		}

		.hayler .clapat-slider-wrapper .clapat-slider-caption .item-role {
			text-align: left;
		}

	}

	@media only screen and (max-width: 767px) {

		.hayler .clapat-pagination-bullet {
			padding-bottom: 30px;
		}

	}

	@media only screen and (max-width: 479px) {

		.hayler .clapat-pagination-bullet {
			padding-bottom: 20px;
		}

	}



/*------------------------------------------------------------------
    Showcase Slider Carousel Horizontal
-------------------------------------------------------------------*/

	.hayler .clapat-slider-wrapper .clapat-carousel-caption-wrapper {
		position: absolute;
		top: calc(50 * var(--dvh, 1vh) + max(10vw, 140px));
		left: 0;
		z-index: 100;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: calc(100vw - var(--scroll-bar-w));
		height: 100px;
		box-sizing: border-box;
		opacity: 0;
		pointer-events: none;
		-webkit-transition: opacity 0.2s ease-in-out;
		transition: opacity 0.2s ease-in-out;
	}

	.hayler .clapat-slider-wrapper .clapat-carousel-caption-wrapper.visible-caption {
		opacity: 1;
	}

	.hayler .clapat-slider-wrapper .clapat-carousel-caption {
		position: relative;
		display: flex;
		align-items: flex-start;
		justify-content: center;
		width: 20vw;
		min-width: 280px;
		height: 100px;
		opacity: 1;
	}

	.hayler .clapat-slider-wrapper .clapat-carousel-caption .item-caption {
		position: absolute;
		text-align: center;
		color: currentColor;
		pointer-events: none;
	}

	.hayler .clapat-slider-wrapper .clapat-carousel-caption .item-title {
		position: relative;
		overflow: hidden;
		font-family: var(--primary-font-family);
		font-size: var(--h5-font-size);
		line-height: var(--h5-line-height);
		font-weight: var(--h5-font-weight);
		letter-spacing: var(--h5-letter-spacing);
	}

	.hayler .clapat-slider-wrapper .clapat-carousel-caption .item-cat {
		overflow: hidden;
	}

	.hayler .clapat-slider-wrapper .clapat-carousel-caption .item-title span,
	.hayler .clapat-slider-wrapper .clapat-carousel-caption .item-cat span {
		position: relative;
		display: block;
		opacity: 0;
	}

	.hayler .clapat-slider-wrapper .clapat-carousel-caption .item-caption.active .item-title span,
	.hayler .clapat-slider-wrapper .clapat-carousel-caption .item-caption.active .item-cat span {
		opacity: 1;
	}

	.hayler .showcase-slider-carousel-horizontal .clapat-slide .item-date {
		position: absolute;
		top: -23px;
		right: 12px;
		left: auto;
		display: block;
		padding: 0;
		overflow: hidden;
		text-align: right;
		background: transparent;
		opacity: 0;
		color: currentColor;
		-webkit-transition: opacity 0.2s ease-in-out;
		transition: opacity 0.2s ease-in-out;
	}

	.hayler .showcase-slider-carousel-horizontal.visible-caption .clapat-slide .item-caption .item-date {
		opacity: 0.2;
	}

	.hayler .showcase-slider-carousel-horizontal .clapat-slide:hover .item-caption .item-date {
		opacity: 1;
	}

	.hayler .showcase-slider-carousel-horizontal .clapat-slide .item-date span {
		position: relative;
		display: block;
		text-align: right;
		-webkit-transform: translateY(100%);
		transform: translateY(100%);
		-webkit-transition: transform 0.2s ease-in-out;
		transition: transform 0.2s ease-in-out;
	}

	.hayler .showcase-slider-carousel-horizontal .clapat-slide .item-date span::after {
		content: var(--slide-index);
		position: absolute;
		top: -100%;
		right: 0;
		width: 100%;
		height: 100%;
	}

	.hayler .showcase-slider-carousel-horizontal .clapat-slide:hover .item-caption .item-date span {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}

	/* Responsive */

	.hayler.viewport-mobile .showcase-slider-carousel-horizontal .clapat-slider-viewport {
		transform: translateY(calc(-1 * var(--hero-footer-height) / 2));
	}

	.hayler.viewport-mobile .showcase-slider-carousel-horizontal .item-caption {
		position: absolute;
		top: 0;
		bottom: auto;
		display: flex;
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		height: calc(100% + 36px);
		padding: 12px;
		opacity: 0;
	}

	.hayler.viewport-mobile .showcase-slider-carousel-horizontal .item-caption .item-title {
		position: relative;
		display: block;
		overflow: hidden;
		color: currentColor;
		-webkit-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
	}

	.hayler.viewport-mobile .showcase-slider-carousel-horizontal .item-content:hover .item-caption .item-title {
		padding-left: 30px;
	}

	.hayler.viewport-mobile .showcase-slider-carousel-horizontal .item-caption .item-title::before {
		content: "\f061";
		position: absolute;
		top: 0;
		left: 0;
		width: 20px;
		height: 30px;
		font: var(--fa-font-solid);
		font-size: 12px;
		line-height: inherit;
		text-align: left;
		opacity: 0;
		color: currentColor;
		pointer-events: none;
		-webkit-transform: scale(0.5) rotate(-45deg);
		transform: scale(0.5) rotate(-45deg);
		transform-origin: -10px center;
		-webkit-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
	}

	.hayler.viewport-mobile .showcase-slider-carousel-horizontal .item-content:hover .item-caption .item-title::before {
		opacity: 1;
		-webkit-transform: scale(1) rotate(0deg);
		transform: scale(1) rotate(0deg);
	}

	.hayler.viewport-mobile .showcase-slider-carousel-horizontal .item-caption .item-cat {
		position: relative;
		display: block;
		overflow: hidden;
		color: currentColor;
	}

	.hayler.viewport-mobile .showcase-slider-carousel-horizontal .item-caption .item-cat span {
		position: relative;
		display: block;
		width: auto;
		min-width: 100px;
		text-align: right;
		-webkit-transition: -webkit-transform 0.2s;
		transition: transform 0.2s;
	}

	.hayler.viewport-mobile .showcase-slider-carousel-horizontal .item-caption .item-cat span::before {
		content: attr(data-hover);
		position: absolute;
		top: 100%;
		right: 0;
		width: 100%;
		height: 100%;
	}

	.hayler.viewport-mobile .showcase-slider-carousel-horizontal .item-content:hover .item-caption .item-cat span {
		-webkit-transform: translateY(-100%);
		transform: translateY(-100%);
	}



/*------------------------------------------------------------------
    Portfolio Grid
-------------------------------------------------------------------*/

	.hayler .filters-wrapper {
		position: relative;
		z-index: 1000;
		display: flex;
		justify-content: flex-start;
		width: 100%;
		height: 0;
		box-sizing: border-box;
		padding-top: 0;
		padding-bottom: 0;
		background-color: rgb(200, 200, 200);
		mask-image: none !important;
		opacity: 0;
		pointer-events: none;
	}

	.hayler .filters-container {
		position: relative;
		width: 100%;
		height: auto;
		padding-top: 35px;
		padding-left: calc(33.3333% - (2 * var(--gap)) / 3 + var(--gap));
		padding-bottom: 25px;
	}

	.hayler .clapat-item .reveal-overlay {
		position: absolute;
		inset: 0;
		z-index: 5;
		display: flex;
		pointer-events: none;
		transform: scaleX(1.01);
	}

	.hayler .clapat-item .reveal-overlay span {
		flex: 1;
		background: #f7f7f7;
		transform-origin: top;
		transform: scaleX(1.1) scaleY(1);
		will-change: transform;
	}

	.hayler .clapat-item .reveal-overlay span:nth-child(3) {
		flex: 2;
	}

	.hayler .showcase-portfolio {
		padding-top: 35px;
		counter-reset: thumb;
	}

	/* List View */

	.hayler .showcase-portfolio.portfolio-list-view {
		padding-top: 60px;
		row-gap: 0;
	}

	.hayler .showcase-portfolio.portfolio-list-view .clapat-item::after {
		--segment: calc(
			(100% - (var(--horizontal-gutter) * 2) - (var(--gap) * 2)) / 3
		);
		mask-image: linear-gradient(
			to right,
			transparent 0,
			transparent var(--horizontal-gutter),
			black var(--horizontal-gutter),
			black calc(var(--horizontal-gutter) + var(--segment)),
			transparent calc(var(--horizontal-gutter) + var(--segment)),
			transparent calc(var(--horizontal-gutter) + var(--segment) + var(--gap)),
			black calc(var(--horizontal-gutter) + var(--segment) + var(--gap)),
			black calc(var(--horizontal-gutter) + var(--segment) * 2 + var(--gap)),
			transparent calc(var(--horizontal-gutter) + var(--segment) * 2 + var(--gap)),
			transparent calc(var(--horizontal-gutter) + var(--segment) * 2 + var(--gap) * 2),
			black calc(var(--horizontal-gutter) + var(--segment) * 2 + var(--gap) * 2),
			black calc(var(--horizontal-gutter) + var(--segment) * 3 + var(--gap) * 2),
			transparent calc(var(--horizontal-gutter) + var(--segment) * 3 + var(--gap) * 2),
			transparent 100%
		);
	}

	.hayler.viewport-mobile .showcase-portfolio.portfolio-list-view .clapat-item .item-effects {
		right: 0;
		left: 0;
		width: 100px;
		margin: auto;
	}

	/* Grid View */

	.hayler .showcase-portfolio:not(.portfolio-list-view) .clapat-item {
		display: flex;
		width: calc(50% - (2 * var(--thumbs-margins-width)));
		overflow: hidden;
		padding-top: 35px;
		padding-bottom: 45px;
	}

	.hayler .showcase-portfolio:not(.portfolio-list-view) .clapat-item::before {
		content: "";
		float: left;
		padding-top: 90%;
	}

	.hayler .showcase-portfolio.items-filtered:not(.portfolio-list-view) .clapat-item {
		width: calc(33.33% - (2 * var(--thumbs-margins-width)));
	}

	.hayler .showcase-portfolio:not(.portfolio-list-view) .clapat-item .item-content {
		position: relative;
		display: flex;
		width: 100%;
		height: auto;
		cursor: pointer;
	}

	.hayler .showcase-portfolio:not(.portfolio-list-view) .clapat-item .item-content::before {
		content: "";
		float: left;
		padding-top: 90%;
	}

	/* Thumb 1 */

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(1) {
		align-items: flex-start;
		justify-content: flex-start;
	}

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(1)::before {
		content: "";
		float: left;
		padding-top: 90%;
	}

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(1) .item-content {
		width: 100%;
	}

	/* Thumb 2 */

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(2) {
		align-items: flex-end;
		justify-content: flex-end;
	}

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(2)::before {
		content: "";
		float: left;
		padding-top: 90%;
	}

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(2) .item-content {
		width: 66.6667%;
	}

	/* Thumb 3 */

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(3) {
		align-items: flex-end;
		justify-content: flex-end;
	}

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(3)::before {
		display: none;
	}

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(3) .item-content {
		width: 50%;
	}

	/* Thumb 4 */

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(4) {
		align-items: flex-end;
		justify-content: flex-start;
	}

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(4)::before {
		display: none;
	}

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(4) .item-content {
		width: 50%;
	}

	/* Thumb 5 */

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(5) {
		align-items: flex-start;
		justify-content: flex-start;
	}

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(5)::before {
		content: "";
		float: left;
		padding-top: 90%;
	}

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(5) .item-content {
		width: 66.6667%;
	}

	/* Thumb 6 */

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(6) {
		align-items: flex-start;
		justify-content: flex-start;
	}

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(6)::before {
		content: "";
		float: left;
		padding-top: 90%;
	}

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(6) .item-content {
		width: 100%;
	}

	/* Thumb 7 */

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(7) {
		align-items: flex-end;
		justify-content: flex-end;
	}

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(7)::before {
		display: none;
	}

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(7) .item-content {
		width: 50%;
	}

	/* Thumb 8 */

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(8) {
		align-items: flex-end;
		justify-content: flex-start;
	}

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(8)::before {
		display: none;
	}

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(8) .item-content {
		width: 50%;
	}

	/* Thumb Caption */

	.hayler .showcase-portfolio:not(.portfolio-list-view) .item-caption {
		display: flex;
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		height: calc(100% + 45px);
		padding: 0;
	}

	.hayler .showcase-portfolio:not(.portfolio-list-view) .item-caption .item-title {
		color: currentColor;
		-webkit-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
	}

	.hayler .showcase-portfolio:not(.portfolio-list-view) .clapat-item .item-content:hover .item-caption .item-title {
		padding-left: 30px;
	}

	.hayler .showcase-portfolio:not(.portfolio-list-view) .item-caption .item-title::before {
		content: "\f061";
		position: absolute;
		top: 0;
		left: 0;
		width: 20px;
		height: 30px;
		font: var(--fa-font-solid);
		font-size: 12px;
		line-height: inherit;
		text-align: left;
		opacity: 0;
		color: currentColor;
		pointer-events: none;
		-webkit-transform: scale(0.5) rotate(-45deg);
		transform: scale(0.5) rotate(-45deg);
		transform-origin: -10px center;
		-webkit-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
	}

	.hayler .showcase-portfolio:not(.portfolio-list-view) .clapat-item .item-content:hover .item-caption .item-title::before {
		opacity: 1;
		-webkit-transform: scale(1) rotate(0deg);
		transform: scale(1) rotate(0deg);
	}

	.hayler .showcase-portfolio:not(.portfolio-list-view) .item-caption .item-cat {
		color: currentColor;
	}

	.hayler .showcase-portfolio:not(.portfolio-list-view) .item-caption .item-cat span {
		position: relative;
		display: block;
		width: auto;
		min-width: 100px;
		text-align: right;
		-webkit-transition: -webkit-transform 0.2s;
		transition: transform 0.2s;
	}

	.hayler .showcase-portfolio:not(.portfolio-list-view) .item-caption .item-cat span::before {
		content: attr(data-hover);
		position: absolute;
		top: 100%;
		right: 0;
		width: 100%;
		height: 100%;
	}

	.hayler .showcase-portfolio:not(.portfolio-list-view) .clapat-item .item-content:hover .item-caption .item-cat span {
		-webkit-transform: translateY(-100%);
		transform: translateY(-100%);
	}

	.hayler .showcase-portfolio:not(.portfolio-list-view) .clapat-item .item-date {
		position: absolute;
		top: -35px;
		right: 0;
		left: auto;
		display: block;
		padding: 0;
		text-align: right;
		background: transparent;
		color: currentColor;
	}

	.hayler .showcase-portfolio.portfolio-list-view .clapat-item .item-date {
		text-align: right;
	}

	.hayler .showcase-portfolio:not(.portfolio-list-view) .item-caption .item-date span {
		text-align: right;
		-webkit-transform: translateY(-100%);
		transform: translateY(-100%);
		-webkit-transition: -webkit-transform 0.2s;
		transition: transform 0.2s;
	}

	.hayler .showcase-portfolio:not(.portfolio-list-view) .item-caption .item-date span::after {
		content: counter(thumb, decimal-leading-zero) "";
		position: absolute;
		top: 100%;
		right: 0;
		width: 100%;
		height: 100%;
		counter-increment: thumb;
	}

	.hayler .showcase-portfolio:not(.portfolio-list-view) .clapat-item .item-content:hover .item-caption .item-date span {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}

	/* Responsive */

	@media only screen and (max-width: 1024px) {

		/* Thumb 3 */
		.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(3) .item-content {
			width: 66.6667%;
		}

		/* Thumb 4 */
		.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(4) .item-content {
			width: 66.6667%;
		}

		/* Thumb 7 */
		.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(7) .item-content {
			width: 66.6667%;
		}

		/* Thumb 8 */
		.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(8) .item-content {
			width: 66.6667%;
		}

	}

	@media only screen and (max-width: 767px) {

		.hayler .filters-container {
			padding-left: 0;
		}

		/* All Thumbs */
		.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(n) .item-content {
			width: 100%;
		}
		
		.hayler .showcase-portfolio.items-filtered:not(.portfolio-list-view) .clapat-item {
		  	width: calc(50% - (2 * var(--thumbs-margins-width)));
		}

	}

	@media only screen and (max-width: 479px) {

		.hayler .showcase-portfolio:not(.portfolio-list-view) .clapat-item {
			width: calc(100% - (2 * var(--thumbs-margins-width)));
		}
		
		.hayler .showcase-portfolio.items-filtered:not(.portfolio-list-view) .clapat-item {
		  	width: calc(100% - (2 * var(--thumbs-margins-width)));
		}

		.hayler .showcase-portfolio.switch-layout.portfolio-list-view .clapat-item .item-caption {
			flex-wrap: wrap;
			align-content: center;
			gap: 0;
		}

		.hayler .showcase-portfolio.switch-layout.portfolio-list-view .clapat-item .item-caption .item-title {
			flex: 0 0 100%;
		}

		.hayler .showcase-portfolio.switch-layout.portfolio-list-view .clapat-item .item-caption .item-cat,
		.hayler .showcase-portfolio.switch-layout.portfolio-list-view .clapat-item .item-caption .item-date {
			flex: 0 0 50%;
		}

	}


/*------------------------------------------------------------------
    Shortcodes
-------------------------------------------------------------------*/

	/* Has Underline */

	.hayler .clone-underline::before,
	.hayler .clone-underline::after {
		bottom: 8px;
	}

	@media only screen and (max-width: 1537px) {

		.hayler .clone-underline::before,
		.hayler .clone-underline::after {
			bottom: 7px;
		}

	}

	@media only screen and (max-width: 1024px) {

		.hayler .clone-underline::before,
		.hayler .clone-underline::after {
			bottom: 5px;
		}

	}

	/* Marquee */

	.hayler .marquee-image {
		width: 1em;
		height: 1em;
	}	

	/* Flex List */

	.hayler .flex-list::before {
		--segment: calc(
			(100% - (var(--horizontal-gutter) * 2) - (var(--gap) * 2)) / 3
		);
		mask-image: linear-gradient(
			to right,
			transparent 0,
			transparent var(--horizontal-gutter),
			black var(--horizontal-gutter),
			black calc(var(--horizontal-gutter) + var(--segment)),
			transparent calc(var(--horizontal-gutter) + var(--segment)),
			transparent calc(var(--horizontal-gutter) + var(--segment) + var(--gap)),
			black calc(var(--horizontal-gutter) + var(--segment) + var(--gap)),
			black calc(var(--horizontal-gutter) + var(--segment) * 2 + var(--gap)),
			transparent calc(var(--horizontal-gutter) + var(--segment) * 2 + var(--gap)),
			transparent calc(var(--horizontal-gutter) + var(--segment) * 2 + var(--gap) * 2),
			black calc(var(--horizontal-gutter) + var(--segment) * 2 + var(--gap) * 2),
			black calc(var(--horizontal-gutter) + var(--segment) * 3 + var(--gap) * 2),
			transparent calc(var(--horizontal-gutter) + var(--segment) * 3 + var(--gap) * 2),
			transparent 100%
		);
	}

	/* Clock */

	.hayler .clock-widget {
		align-items: inherit;
		justify-content: center;
	}

	@media only screen and (max-width: 767px) {

		.hayler .clock-widget {
			flex-direction: row;
			gap: 4px;
		}

		.hayler .clock-label::after {
			content: ",";
		}

		.hayler .clock-time.heading-5 {
			font-family: var(--default-font-family);
			font-size: var(--default-body-font-size);
			line-height: var(--default-body-line-height);
			font-weight: var(--default-body-font-weight);
			letter-spacing: var(--default-body-letter-spacing);
		}

	}

	/* Background Pattern */

	.hayler .background-pattern {
		--checker-opacity: 0.1;
		--checker-size: 18px;
		--checker-color: color-mix(in srgb, currentColor calc(var(--checker-opacity) * 100%), transparent);
		background-color: transparent;
		background-image:
			linear-gradient(45deg, var(--checker-color) 25%, transparent 25%),
			linear-gradient(-45deg, var(--checker-color) 25%, transparent 25%),
			linear-gradient(45deg, transparent 75%, var(--checker-color) 75%),
			linear-gradient(-45deg, transparent 75%, var(--checker-color) 75%);
		background-size: var(--checker-size) var(--checker-size);
		background-position: 0 0, 0 calc(var(--checker-size) / 2), calc(var(--checker-size) / 2) calc(var(--checker-size) / -2), calc(var(--checker-size) / -2) 0;
	}
/* 2026-09-15 — the "next" block at the foot of every /work/ page prints its title in ink
   on top of the next page's picture. Hayler's demo images are pale blurs, so black type
   worked; ours are dark photographs, and with three own-product pages now in that rotation
   the title reads as black-on-black (measured on /zh/work/card-store/ → MarketDaily).
   A scrim plus white type is the version that works on BOTH a dark still life and the pale
   case plate — flipping the ink per target only moves the failure to the other half. */
   ⚠️ 只套在標題壓在圖上的那種版型。服務子頁是 body.hero-below-caption —— 那裡的「下一條線」
   標題坐在淺色帶上、圖在下面,白字會直接消失(第一版就這樣,截圖抓到的)。 */
body:not(.hero-below-caption) #project-nav .next-project-media::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.30),rgba(0,0,0,.55))}
body:not(.hero-below-caption) #project-nav-caption .next-hero-title span,body:not(.hero-below-caption) #project-nav-caption .next-hero-subtitle span{color:#fff}
/* the minimal footer is absolutely positioned over that same picture (every case, own
   product and service page uses it), so it had the identical problem one layer down. */
#clapat-footer.absolute,#clapat-footer.absolute *{color:#fff}
/* 客戶識別:兩家的比例差很多(1.93 vs 2.92),所以鎖高度不鎖寬度,兩個看起來才一樣大。
   暗色案例頁上把偏暗的識別提亮一點,否則 CHOSEN 的深灰字會沉進黑底。 */
/* ── enquiry form ── 我們自己的版式(2026-09-16 第三輪)。
   老闆:「不要跟他們的一樣,我們要做的比他好,整個 layout 不要跟他一樣不然會被告」。
   第二輪那份是沃德那頁的 1:1 移植(標籤在欄位裡佔 40%、圓圈虛線步驟條、白鈕靠右),整套換掉。
   這一份的骨架是【一條細規線串起來的問答】:沒有填色膠囊、沒有欄位內標籤、沒有圓圈步驟條。
   可量的贏面:①「非必填」是真的標註不是 placeholder(他們那個一打字就消失,而且 #737373 壓 #444
   只有 2.0:1)②標籤在上、輸入區吃滿整列 ③步驟是可點的按鈕不是裝飾 ④錯誤標在那一欄上。
   色:灰階 + 唯一朱紅(#E23D22),朱紅只出現在焦點、已選、主要動作。 */
/* ⚠️ 模板的 .col_inner 是 flex 容器,放進去的區塊會被當成 flex item 用 max-content 定寬
   ⇒ 不給 width:100% 的話,不管視窗多寬它都停在 726px 並貼著左邊,2000px 螢幕上就是
   左上角一小塊、右邊一大片空的(2026-09-16 老闆實機回報)。width:100% + 置中的
   max-width 才會跟著版面走。只驗到 1440 是不夠的,寬螢幕要另外量。 */
.qfx-enq{--rule:rgba(255,255,255,.16);--rule-hi:rgba(255,255,255,.34);--mute:rgba(255,255,255,.58);
  --faint:rgba(255,255,255,.34);width:100%;max-width:1180px;margin-inline:auto;position:relative}
.qfx-enq-head{margin:0 0 clamp(3rem, 2.2rem + 2.4vw, 4.75rem)}
.qfx-enq-h{margin:0;font-weight:600;letter-spacing:-.01em;line-height:1.14;color:#fff;
  font-size:clamp(2.125rem, 1.15rem + 3.1vw, 4rem)}
.qfx-enq-h span{display:block}
.qfx-enq-h span + span{color:var(--mute)}
.qfx-enq-s{margin:22px 0 0;max-width:52ch;color:var(--mute);line-height:1.75;
  font-size:clamp(.9375rem, .88rem + .25vw, 1.0625rem)}
.qfx-tabs{display:flex;gap:clamp(1.5rem, 1rem + 1.6vw, 2.75rem);
  border-bottom:1px solid var(--rule);padding:0;margin:0 0 clamp(2.25rem, 1.8rem + 1.4vw, 3.25rem)}
.qfx-tab{position:relative;display:flex;align-items:baseline;gap:10px;background:none;border:0;
  padding:10px 0 14px;min-height:44px;margin-bottom:-1px;color:var(--mute);font:inherit;letter-spacing:.01em;cursor:pointer;
  font-size:clamp(.9375rem, .9rem + .2vw, 1.0625rem);transition:color .25s cubic-bezier(.23,1,.32,1)}
.qfx-tab i{font-style:normal;font-size:.75em;letter-spacing:.1em;color:var(--faint)}
.qfx-tab::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:#E23D22;
  transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.23,1,.32,1)}
.qfx-tab:hover{color:#fff}
.qfx-tab.now{color:#fff}
.qfx-tab.now::after{transform:scaleX(1)}
.qfx-tab.done i{color:#E23D22}
.qfx-tab:focus-visible{outline:2px solid #E23D22;outline-offset:6px}
.qfx-tab[disabled]{cursor:default}
.qfx-pair{display:flex;gap:clamp(1.5rem, 1rem + 2vw, 3rem);flex-wrap:wrap}
.qfx-f{display:block;flex:1 1 300px;min-width:0;margin:0 0 clamp(1.75rem, 1.4rem + 1.1vw, 2.5rem)}
.qfx-k{display:flex;align-items:baseline;gap:9px;margin:0 0 10px;color:#fff;letter-spacing:.02em;
  font-size:clamp(.875rem, .85rem + .12vw, .9375rem)}
.qfx-tag{font-style:normal;font-size:.8em;letter-spacing:.06em;color:var(--mute)}
.qfx-tag.req{color:#E23D22}
/* 模板給 input 一個固定 height:50px —— 底線式欄位吃到它就會在標籤與線之間多出 14px 的空白,
   整張表在手機上被拉長一截。height:auto 交還給內容。 */
.qfx-v{display:block;width:100%;box-sizing:border-box;background:none;border:0;line-height:1.45;height:auto;
  min-height:44px;border-bottom:1px solid var(--rule);border-radius:0;padding:8px 0 12px;color:#fff;font:inherit;
  letter-spacing:.01em;outline:none;font-size:clamp(1.0625rem, .95rem + .45vw, 1.375rem);
  transition:border-color .25s cubic-bezier(.23,1,.32,1)}
.qfx-v:hover{border-bottom-color:var(--rule-hi)}
.qfx-v:focus{border-bottom-color:#E23D22}
.qfx-f.is-err .qfx-v{border-bottom-color:#E23D22}
textarea.qfx-v{resize:vertical;min-height:132px;line-height:1.7;padding-top:4px;
  font-size:clamp(1rem, .95rem + .25vw, 1.125rem)}
.qfx-f-area{display:block}
.qfx-group{margin:0 0 clamp(1.75rem, 1.4rem + 1.1vw, 2.5rem)}
.qfx-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.qfx-chip{background:none;border:1px solid var(--rule);border-radius:100px;color:var(--mute);font:inherit;
  padding:11px 20px;min-height:44px;cursor:pointer;letter-spacing:.01em;
  font-size:clamp(.875rem, .85rem + .15vw, .9375rem);
  transition:border-color .25s cubic-bezier(.23,1,.32,1),color .25s cubic-bezier(.23,1,.32,1),
             background-color .25s cubic-bezier(.23,1,.32,1)}
.qfx-chip:hover{border-color:var(--rule-hi);color:#fff}
.qfx-chip.is-on{border-color:#E23D22;color:#fff;background:rgba(226,61,34,.16)}
.qfx-chip:focus-visible{outline:2px solid #E23D22;outline-offset:3px}
.qfx-leg-done{border-left:1px solid #E23D22;padding:2px 0 2px 22px;max-width:56ch}
.qfx-done-title{margin:0;color:#fff;font-weight:600;letter-spacing:.01em;
  font-size:clamp(1.25rem, 1.1rem + .6vw, 1.75rem)}
.qfx-done-txt{margin:14px 0 0;color:var(--mute);line-height:1.75;
  font-size:clamp(.9375rem, .9rem + .2vw, 1.0625rem)}
.qfx-btns{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;
  margin:clamp(2.5rem, 2rem + 1.6vw, 3.5rem) 0 0}
.qfx-btn{font:inherit;letter-spacing:.01em;cursor:pointer;
  font-size:clamp(.9375rem, .9rem + .2vw, 1.0625rem)}
/* ⚠️ 填色鈕不能用 #E23D22 當底:白字壓上去量出來 4.26:1,低於 4.5:1 —— 我們正是拿這一條在贏
   對手(他們的 placeholder 只有 2.0:1),自己不及格就別提。同一個紅深一階當填色面(白字 5.49:1),
   #E23D22 本身留給邊框、底線、必填標註(壓在 #0c0c0c 上是 4.54:1)。 */
.qfx-btn.go{padding:18px 38px;min-height:44px;border-radius:100px;border:1px solid #C5311A;background:#C5311A;color:#fff;
  transition:background-color .25s cubic-bezier(.23,1,.32,1),border-color .25s cubic-bezier(.23,1,.32,1)}
.qfx-btn.go:hover{background:#a82814;border-color:#a82814}
/* 次要動作量到只有 28px 高。底線改用 ::after 畫,本體撐到 44 —— 觸控目標長大,底線不會被推遠。 */
.qfx-btn.quiet{position:relative;display:inline-flex;align-items:center;min-height:44px;
  border:0;background:none;color:var(--mute);padding:0 2px;
  transition:color .25s cubic-bezier(.23,1,.32,1)}
.qfx-btn.quiet::after{content:"";position:absolute;left:2px;right:2px;top:calc(50% + 12px);height:1px;
  background:var(--rule);transition:background-color .25s cubic-bezier(.23,1,.32,1)}
.qfx-btn.quiet:hover{color:#fff}
.qfx-btn.quiet:hover::after{background:#fff}
.qfx-btn:focus-visible{outline:2px solid #E23D22;outline-offset:4px}
.qfx-btn[disabled]{opacity:.45;cursor:default}
.qfx-btn[hidden]{display:none}
.qfx-form-status{margin:20px 0 0;min-height:1.3em;color:var(--mute);
  font-size:clamp(.875rem, .85rem + .15vw, .9375rem)}
.qfx-form-status.is-err,.qfx-form-status.is-required,.qfx-form-status.is-email{color:#E23D22}
/* ⚠️ 模板在「≤767px + 橫置 + 觸控」時蓋一張全螢幕 .clapat-rotate-device 叫人把手機轉回直的
   ⇒ 小手機橫著拿(或裝在支架上、或開了旋轉鎖)就整站不能用。老闆 2026-09-16:「所有東西都能
   在那個 device 裡面被看到」。橫置不是錯的裝置,是我們要支援的尺寸。 */
.clapat-rotate-device{display:none !important}
/* 獨佔一整段的連結要按得到 —— /zh/about/ 那條「每個數字的量法…」量到真實可按高度只有 19px。
   ⚠️ 只套 pointer:coarse,而且只套「整段就只有這個連結」的情況:句子裡的行內連結不能撐高
   (WCAG 2.5.8 對行內連結本來就有豁免,硬撐成 44px 會讓相鄰兩行的點擊區互相重疊)。 */
@media (pointer:coarse){
  p > a.ajax-link:only-child, p > a.has-underline:only-child{display:inline-block;padding-block:13px}
  /* 區段標題本身就是連結時,行為量到的可按高度只有 34px(/zh/services/「先做免費的那一項。」) */
  a.heading-3, a.heading-4{display:inline-block;padding-block:6px}
}
/* the honeypot must be reachable by a bot's DOM walk but never by a person or a screen reader */
.qfx-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* 這一段自己的底圖:本機生成的受光曲面,下緣已在檔案裡化進 #0c0c0c */
/* ⚠️ 底圖一律鋪滿整個區段的寬度。給它固定像素上限(min(1420px,118%))的話,視窗一寬
   圖就只蓋住右邊一截,左緣變成一條看得見的硬邊 —— 2000px 螢幕上像貼了一張長方形貼紙。 */
.qfx-enq-row{background-image:url(/images/bg-contact-sweep.webp);background-repeat:no-repeat;
  background-position:top -40px center;background-size:100% auto}
@media (max-width:767px){.qfx-enq-row{background-position:top -20px right -30%;background-size:220% auto}
  .qfx-f{flex:1 1 100%}
  .qfx-btns{gap:18px}
  .qfx-btn.go{width:100%;text-align:center}}
@media (prefers-reduced-motion:reduce){.qfx-tab,.qfx-tab::after,.qfx-v,.qfx-chip,.qfx-btn{transition:none}}
.client-logo{display:block;height:26px;width:auto;max-width:240px;margin:4px 0 10px}
/* 卡片標題列上的客戶識別:與那一行的文字同高,所以它讀起來就是「名字」而不是一張貼紙。 */
/* ⚠️ 22px 時 KINGCONN 的藍色漸層後半截在 #f7f7f7 上幾乎看不見(它的識別本來就是深藍→淺藍,
   在他們自己的網站上是大尺寸使用)。放大到 32px 讓漸層讀得出來 —— **不改客戶的顏色**,
   我們沒有那個權利;能調的是尺寸。 */
.item-title .card-logo{height:44px;width:auto;max-width:260px;display:inline-block;vertical-align:middle}
.item-title .card-name{display:inline-block;vertical-align:middle;margin-left:14px;padding-left:14px;
  border-left:1px solid rgba(0,0,0,.18)}
@media (max-width:640px){.item-title .card-logo{height:32px;max-width:170px}
  .item-title .card-name{margin-left:10px;padding-left:10px}}
.dark-section .item-title .card-name,.dark-content .item-title .card-name{border-left-color:rgba(255,255,255,.22)}
.dark-section .item-title .card-logo,.dark-content .item-title .card-logo{filter:brightness(1.85) saturate(1.1)}
/* 暗色案例頁:CHOSEN 的字是深灰、KINGCONN 的字是深藍,直接放在黑底上會沉掉。
   提亮而不是換一份白色版本 —— 我們沒有權利改客戶的識別配色,只能調整呈現亮度。 */
.dark-section .client-logo{filter:brightness(1.85) saturate(1.1)}

/*------------------------------------------------------------------
    QFX Solution — additions (2026-09-14, eighth version)
    Everything below is ours; nothing above this line was changed.
-------------------------------------------------------------------*/

	/* Chinese: Noto Sans TC subset behind the template's Latin faces */
	@font-face { font-family: 'QFX TC'; font-style: normal; font-weight: 400; font-display: swap;
		src: url('../fonts/notosanstc-400-subset.woff2') format('woff2');
		unicode-range: U+2E80-9FFF, U+3000-303F, U+FF00-FFEF, U+F900-FAFF; }
	@font-face { font-family: 'QFX TC'; font-style: normal; font-weight: 500; font-display: swap;
		src: url('../fonts/notosanstc-500-subset.woff2') format('woff2');
		unicode-range: U+2E80-9FFF, U+3000-303F, U+FF00-FFEF, U+F900-FAFF; }
	/* Display face: DM Serif Display + Noto Serif TC Black (2026-09-23 老闆選定,取代 Funnel Display).
	   Both are single weights; the 100-900 range stops the browser from faking a bold where the template asks for 600. */
	@font-face { font-family: 'QFX Display'; font-style: normal; font-weight: 100 900; font-display: swap;
		src: url('../webfonts/DMSerifDisplay-Regular.woff2') format('woff2'); }
	@font-face { font-family: 'QFX TC Serif'; font-style: normal; font-weight: 100 900; font-display: swap;
		src: url('../fonts/notoseriftc-900-subset.woff2') format('woff2');
		unicode-range: U+2E80-9FFF, U+3000-303F, U+FF00-FFEF, U+F900-FAFF; }
	@font-face { font-family: 'QFX Display'; font-style: italic; font-weight: 100 900; font-display: swap;
		src: url('../webfonts/DMSerifDisplay-Italic.woff2') format('woff2'); }
	@font-face { font-family: 'QFX Mono'; font-style: normal; font-weight: 100 450; font-display: swap;
		src: url('../webfonts/IBMPlexMono-Regular.woff2') format('woff2'); }
	@font-face { font-family: 'QFX Mono'; font-style: normal; font-weight: 451 900; font-display: swap;
		src: url('../webfonts/IBMPlexMono-Medium.woff2') format('woff2'); }
	:root {
		--primary-font-family: 'QFX Display', 'QFX TC Serif', Georgia, serif;
		--qfx-mono: 'QFX Mono', 'QFX TC', ui-monospace, monospace;
		--default-body-font-weight: 400; --medium-body-font-weight: 400; --large-body-font-weight: 400;
	}

	/* 全站字體分工(2026-09-23 老闆「全部照推薦」,對照頁 claude.ai/artifact/T4xw2NUCKqubxwmJqbKSoL)
	   大字=Display · 讀與點=Inter Tight · 標示/編號=Mono */
	.text-rotator, .text-rotator > span, .hayler .qfx-it { font-style: italic; }
	html[lang="zh-Hant"] .text-rotator, html[lang="zh-Hant"] .text-rotator > span { font-style: normal; }
	.hayler .heading-3.qfx-num { font-family: var(--qfx-mono); font-weight: 400; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
	.hayler .accordion-title.heading-5, .hayler h5.has-mask, .hayler h5.has-mask .span-word {
		font-family: var(--default-font-family); font-weight: 600; letter-spacing: -0.01em; }
	.hayler .qfx-enq-h { font-family: var(--primary-font-family); font-weight: 400; letter-spacing: 0; }
	.hayler .svc-fact dt { font-variant-numeric: tabular-nums; }
	.hayler .clock-digits, .hayler .clock-colon, .hayler .home-svc-num, .hayler .flex-list-left,
	.hayler .team-caption, .hayler .qfx-tab i {
		font-family: var(--qfx-mono); font-weight: 400; font-variant-numeric: tabular-nums; letter-spacing: 0; }
	.hayler .home-eyebrow, .hayler .item-cat, .hayler .item-date, .hayler .outcome-label, .hayler .qfx-tag,
	.hayler figcaption, .hayler .clock-label, .hayler .info-text, .hayler .copyright, .hayler .qfx-k {
		font-family: var(--qfx-mono); font-weight: 400; letter-spacing: 0.01em; }
	.hayler .home-eyebrow { letter-spacing: 0.1em; }
	.hayler p.has-shuffle { font-family: var(--qfx-mono); font-weight: 400; letter-spacing: 0; font-variant-numeric: tabular-nums; }
	/* 案例清單:分類/地點改 Mono 後變寬,縮一級避免跟案例名擠在同一行 */
	.hayler .item-cat, .hayler .item-date { font-size: 0.8125em; line-height: 1.45; }
	html[lang="zh-Hant"] {
		--default-font-family: 'Inter Tight', 'QFX TC';
		--primary-font-family: 'QFX Display', 'QFX TC Serif', Georgia, serif;
	}
	html[lang="zh-Hant"] .hayler .hero-title,
	html[lang="zh-Hant"] .hayler .next-hero-title,
	html[lang="zh-Hant"] .hayler .pinned-lists,
	html[lang="zh-Hant"] .hayler .big-title { letter-spacing: 0; }

	/* Figures from scripts/charts.py (real ledgers), in the section's own ink */
	figure.chart { margin: 0; }
	figure.chart svg.fig { display: block; width: 100%; height: auto; max-width: 560px; }
	/* The template's figcaption is an absolutely-positioned badge in the corner of a photo.
	   A chart's caption is its source line and has to sit under the drawing, or it lands on
	   top of the bars — which is what it did until 2026-09-15. */
	figure.chart figcaption {
		position: static; padding: 0; margin-top: 12px; max-width: 560px;
		background: none; color: inherit; border-radius: 0;
		font-size: 12px; line-height: 1.45; opacity: 0.55; }
	.fig text { font-family: var(--default-font-family), sans-serif; fill: currentColor; opacity: 0.6; font-size: 11px; letter-spacing: 0.04em; }
	.fig .val { opacity: 1; font-size: 12.5px; }
	.fig .hdr { opacity: 1; font-size: 12px; letter-spacing: 0.08em; }
	.fig .grid { stroke: currentColor; opacity: 0.15; stroke-width: 1; }
	.fig .rail { stroke: currentColor; opacity: 0.5; stroke-width: 1; }
	.fig .bar { fill: currentColor; } .fig .bar.grey { fill: currentColor; opacity: 0.4; }
	.fig .line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
	.fig .dot { fill: var(--primary-color); stroke: #fff; stroke-width: 2; }
	.fig .dot.grey { fill: currentColor; opacity: 0.4; } .fig .dot.hollow { fill: #fff; stroke: currentColor; stroke-width: 1; }
	.fig .sheet { fill: #fff; stroke: currentColor; } .fig .mark { fill: var(--primary-color); }
	.dark-section .fig .dot, .dark-section .fig .dot.hollow, .dark-section .fig .sheet { stroke: #111; }

	/* Screenshots: a phone capture in a half column sits on the section colour */
	figure img { display: block; width: 100%; height: auto; }

	/* Vermilion is the one loud colour we have, so it gets one panel of the preloader and
	   the progress number — not the whole screen four times a visit. (The template painted
	   all four reveal panels in --primary-color.) */
	#clapat-preloader .preloader-reveal span { background: #0c0c0c; }
	#clapat-preloader .preloader-reveal span:nth-child(3) { background: var(--primary-color); }
	#clapat-preloader .preloader-caption { color: #fff; }

	/* Reduced motion and ?static=1: every entrance is already at its end state.
	   The template animates with inline styles; !important here wins over them. */
	@media (prefers-reduced-motion: reduce) {
		body.hidden { visibility: visible !important; }
		#clapat-preloader { display: none !important; }
		.caption-timeline .word-wrapper > span, [data-animate], .has-mask, .has-mask *, .has-slide, .has-fade,
		.has-blur, .has-opacity, .has-fill, .has-shuffle, .pinned-lists li, .clapat-item, .item-caption, figure,
		.animated-line, .marquee, .cylinder-lists li {
			opacity: 1 !important; visibility: visible !important; transform: none !important;
			clip-path: none !important; filter: none !important; }
	}
	html.static-mode body.hidden { visibility: visible !important; }
	html.static-mode #clapat-preloader { display: none !important; }
	html.static-mode .caption-timeline .word-wrapper > span, html.static-mode [data-animate], html.static-mode .has-mask,
	html.static-mode .has-mask *, html.static-mode .has-slide, html.static-mode .has-fade, html.static-mode .has-blur,
	html.static-mode .has-opacity, html.static-mode .has-fill, html.static-mode .has-shuffle, html.static-mode .pinned-lists li,
	html.static-mode .clapat-item, html.static-mode .item-caption, html.static-mode figure, html.static-mode .animated-line,
	html.static-mode .marquee, html.static-mode .cylinder-lists li {
		opacity: 1 !important; visibility: visible !important; transform: none !important;
		clip-path: none !important; filter: none !important; }

	/*---------------------------------------------------------------------
	  中文字被遮罩裁掉 (2026-09-15, 老闆兩次截圖指出)
	  ---------------------------------------------------------------------
	  模板的揭示動畫把每個詞包進 .span-word { overflow:hidden },遮罩高度
	  = line-height。--h1-line-height 是 1.05,那是照拉丁字調的:拉丁小寫
	  字身矮、上下有空隙,1.05 夠用。中文字填滿整個表意字框,再加上
	  Noto Sans TC 的 ascent/descent,1.05 的盒子裝不下 ⇒ 上下各被切一刀。

	  修法:只對 zh-Hant 把遮罩盒子上下各撐開 0.16em,再用等量負 margin
	  把版面推回原位。版面零位移,動畫照跑,字不再被裁。
	  ⚠️ 不要改 --h1-line-height 去解:那會改動英文版的行距,而英文版是對的。
	--------------------------------------------------------------------*/
	html[lang="zh-Hant"] .span-word,
	html[lang="zh-Hant"] .span-line,
	html[lang="zh-Hant"] .span-text {
		padding-block: 0.16em;
		margin-block: -0.16em;
	}
	html[lang="zh-Hant"] .hero-title,
	html[lang="zh-Hant"] .next-hero-title,
	html[lang="zh-Hant"] .big-title,
	html[lang="zh-Hant"] .pinned-lists,
	html[lang="zh-Hant"] h1, html[lang="zh-Hant"] .heading-1,
	html[lang="zh-Hant"] h2, html[lang="zh-Hant"] .heading-2 {
		line-height: 1.22;
	}

	/*---------------------------------------------------------------------
	  服務總覽:手機沒有 hover,所以不能只靠 has-hover-image (2026-09-15)
	  ---------------------------------------------------------------------
	  模板的 has-hover-image 是滑鼠跟隨式的大圖。桌機好看,但觸控裝置根本
	  不會觸發 ⇒ 老闆在手機上看到的服務頁就是純文字,正是他要我修的那件事。
	  改法:每一列內嵌一張真的縮圖。桌機藏起來(交給 hover 那張大的),
	  平板與手機直接顯示在該列下方。
	--------------------------------------------------------------------*/
	/* 客戶成果格:數字下面那一行小字 (2026-09-15) */
	.single-team-member .team-caption .outcome-label {
		display: block;
		margin-top: 2px;
		max-width: 34ch;
		font-size: .72em;
		line-height: 1.3;
		opacity: .62;
	}

	.svc-thumb { display: none; }
	.svc-thumb img { display: block; width: 100%; height: auto; border-radius: 2px; }
	@media only screen and (max-width: 1024px) {
		.flex-lists-wrapper .flex-list { flex-wrap: wrap; }
		.svc-thumb { display: block; width: 100%; margin: 14px 0 4px; }
		.svc-thumb img { aspect-ratio: 2 / 1; object-fit: cover; }
	}

	/*---------------------------------------------------------------------
	  整列看起來可以點,但其實只有那條文字連結會動 (2026-09-15 晚)
	  ---------------------------------------------------------------------
	  模板給 .flex-list 的是 cursor:pointer + 整列 hover 變色,所以它承諾
	  「整列可點」;實測(手機 390px)整列 390x321,真正會導覽的只有中間那個
	  <a>,量到 96x20 —— 照片、編號、右邊那句說明全部點不動,而且 20px 遠低於
	  44px 觸控目標。把連結撐滿整列,維持只有一個連結(讀屏不會多唸一次)。
	  z-index 要大於模板給 .flex-list > span 的 10,否則會被那些 span 蓋掉。
	--------------------------------------------------------------------*/
	.flex-list.link { position: relative; }
	.flex-list.link .flex-list-center > a::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 20;
	}

	/*---------------------------------------------------------------------
	  ...而桌機上它們原本也看不到 (2026-09-15 晚)
	  ---------------------------------------------------------------------
	  上面那段只修了觸控裝置。桌機這邊圖仍然只在「滑鼠移過去」時才出現,
	  所以不動滑鼠的第一眼 = 十二列純文字,正是老闆 09-14 說的「字太多圖太少」。
	  改成十二張都常駐在列上;既然圖已經在列上了,跟著游標跑的那張大圖就是
	  同一張圖同時出現兩次 ⇒ 對有縮圖的列關掉它,改成縮圖本身微放大。
	  :has() 讓這段只作用在真的有縮圖的列,首頁那條沒有縮圖的清單不受影響。
	--------------------------------------------------------------------*/
	@media only screen and (min-width: 1025px) {
		.flex-list:has(.svc-thumb) { align-items: center; justify-content: flex-start; }
		.flex-list:has(.svc-thumb) .flex-list-left { width: 8%; }
		.flex-list:has(.svc-thumb) .flex-list-center { width: 30%; text-align: left; }
		.flex-list:has(.svc-thumb) .flex-list-right { width: auto; flex: 1 1 auto; min-width: 0; text-align: left; }
		.flex-list:has(.svc-thumb) .svc-thumb { margin-left: auto; }
		.flex-list:has(.svc-thumb) .hover-reveal { display: none; }
		.flex-list .svc-thumb { display: block; flex: 0 0 210px; overflow: hidden; border-radius: 2px; }
		.flex-list .svc-thumb img {
			aspect-ratio: 2 / 1;
			object-fit: cover;
			transform: scale(1);
			transition: transform .22s cubic-bezier(.23, 1, .32, 1);
		}
	}
	@media only screen and (min-width: 1025px) and (hover: hover) and (pointer: fine) {
		.flex-list:has(.svc-thumb):hover .svc-thumb img { transform: scale(1.06); }
	}
	@media (prefers-reduced-motion: reduce) {
		.flex-list .svc-thumb img { transition: none; }
		.flex-list:has(.svc-thumb):hover .svc-thumb img { transform: none; }
	}

	/*---------------------------------------------------------------------
	  首頁方向 A (2026-09-16):Q 物件影片 hero + 六組服務大圖
	--------------------------------------------------------------------*/
	.home-a #hero-media-wrapper video, .home-a #hero-media-wrapper img { object-fit: cover; }
	@media only screen and (max-width: 767px) {
		/* 09-16 晚老闆:手機上 Q 要在正中間。影片裡 Q 本來就在水平正中(量過 loop 與海報幀),62% 把它推到左邊。 */
		/* 直式畫面整片 cover 會把 Q 放大到超出左右(圓環 466px > 390px 螢幕):縮成一條 16:9 以上的帶,
		   上下以影片自身的地面色漸層收邊,整個 Q 完整留在畫面中間。 */
		.home-a #hero-media-wrapper { background: linear-gradient(180deg, #151618 0%, #2b2e32 45%, #383b3f 100%); }
		.home-a #hero-media-wrapper video, .home-a #hero-media-wrapper img {
			position: absolute; left: 0; right: 0; top: 10%; width: 100%; height: 66%; object-position: 50% 50%;
			-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 32%, #000 80%, transparent 100%);
			mask-image: linear-gradient(180deg, transparent 0%, #000 32%, #000 80%, transparent 100%); }
	}
	.home-a #hero-media::after { content: ""; position: absolute; inset: 0; pointer-events: none;
		background: linear-gradient(180deg, rgba(12,12,12,.35) 0%, rgba(12,12,12,0) 30%, rgba(12,12,12,0) 62%, rgba(12,12,12,.7) 100%); }
	.big-statement { font-size: clamp(44px, 7.4vw, 132px); line-height: .98; letter-spacing: -.035em; margin: 0; text-wrap: balance; }
	.body-large { font-size: clamp(18px, 1.5vw, 24px); line-height: 1.45; max-width: 34ch; margin: 0; }
	.home-eyebrow { font-size: 14px; letter-spacing: .08em; text-transform: uppercase; opacity: .55; margin: 0 0 28px; }
	.home-svc-link { display: block; color: inherit; text-decoration: none; }
	.home-svc-fig { margin: 0; overflow: hidden; border-radius: 2px; background: #111; }
	.home-svc-fig img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover;
		transform: scale(1); transition: transform .5s cubic-bezier(.23,1,.32,1); }
	@media (hover: hover) and (pointer: fine) { .home-svc-link:hover .home-svc-fig img { transform: scale(1.04); } }
	@media (prefers-reduced-motion: reduce) { .home-svc-fig img { transition: none; } }
	.home-svc-cap { display: grid; grid-template-columns: 56px 1fr; column-gap: 12px; padding-top: 22px; border-top: 1px solid rgba(0,0,0,.14); margin-top: 22px; }
	.home-svc-num { grid-row: 1 / span 2; font-size: 14px; opacity: .5; padding-top: 10px; font-variant-numeric: tabular-nums; }
	.home-svc-name { font-size: clamp(26px, 2.6vw, 44px); line-height: 1.05; letter-spacing: -.02em; margin: 0 0 10px; }
	.home-svc-line { font-size: 18px; line-height: 1.45; margin: 0; max-width: 40ch; }
	@media only screen and (max-width: 767px) { .home-svc-cap { grid-template-columns: 40px 1fr; } }

	/* 2026-09-16 老闆:「行銷公司·台北這 6 個字被卡掉了上面一點點」。.hero-infotitle 的 word-wrapper
	   是 overflow:hidden(文字滑入動畫的遮罩)而行高只有 24px,裡面 heading-3 的中文要 30.8px ⇒ 字頭被切。
	   給內層留出上緣空間,遮罩照舊有效。 */
	.hero-infotitle .word-wrapper > .heading-3 { display: inline-block; padding-top: .14em; line-height: 1.2; }

	/* 2026-09-16 服務內頁完整版:條列與實績數字 */
	.svc-list { margin: 0 0 24px; padding-left: 1.2em; }
	.svc-list li { margin: 0 0 10px; line-height: 1.6; }
	.images-trail-wrapper .trail-obj { width: 230px; object-fit: contain; filter: drop-shadow(0 18px 40px rgba(120, 90, 255, .28)); }
	@media only screen and (max-width: 767px) { .images-trail-wrapper .trail-obj { width: 150px; } }
	/* 09-16 晚老闆手機截圖「字有點被卡掉」:手機全螢幕選單每個 <a> 是 overflow:hidden(翻字 hover 用),
	   行高只有 1.05em,中文字身比拉丁字高 ⇒ 頂端被裁。只放寬中文的手機選單。 */
	html[lang="zh-Hant"] .clapat-nav.sm-screen > li > a,
	html[lang="zh-Hant"] .clapat-nav.sm-screen > li > a .before-span,
	html[lang="zh-Hant"] .clapat-nav.sm-screen > li > a .before-span span { line-height: 1.32; }
	html[lang="zh-Hant"] .clapat-nav.sm-screen > li > a { padding-top: .16em; }
	.svc-facts { margin: 24px 0 0; width: 100%; max-width: none; }
	.svc-fact { display: grid; grid-template-columns: minmax(9ch, 34%) minmax(0, 1fr); gap: 8px 24px; align-items: baseline; padding: 14px 0; border-top: 1px solid rgba(0,0,0,.15); }
	.svc-fact:first-child { border-top: 0; }
	.svc-fact dt, .svc-fact dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
	@media only screen and (max-width: 767px) { .svc-fact { grid-template-columns: minmax(0, 1fr); } }

	/* 2026-09-16 網站重建頁示範作品 */
	.svc-demos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 32px; margin-top: 32px; }
	.svc-demo { margin: 0; position: relative; }
	.svc-demo::before, .svc-demo::after { content: none; display: none; }
	.svc-demo-shots { position: relative; }
	.svc-demo-shots img { display: block; width: 100%; height: auto; border-radius: 4px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
	/* 手機截圖整支放在桌機圖框內(09-16:原本 bottom:-8% 伸出去,跟說明文字疊在一起) */
	.svc-demo-shots .svc-demo-m { position: absolute; right: 4%; bottom: 6%; width: 17%; border-radius: 10px; border: 3px solid #111; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
	.svc-demo figcaption { position: static; inset: auto; transform: none; background: none; color: inherit; padding: 0; margin-top: 16px; font-size: 15px; line-height: 1.5; text-align: left; opacity: 1; }
	@media only screen and (max-width: 767px) { .svc-demos { grid-template-columns: 1fr; gap: 56px; } }
	/* 2026-09-21 版型篩選器 */
	.svc-filters { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }
	.svc-filter-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
	.svc-filter-h { flex: 0 0 64px; font-size: 13px; letter-spacing: .04em;
		text-transform: uppercase; opacity: .55; }
	.svc-pill { font: inherit; font-size: 14px; line-height: 1.2; color: inherit;
		background: transparent; border: 1px solid rgba(0,0,0,.16); border-radius: 999px;
		padding: 7px 14px; cursor: pointer; transition: background .18s, border-color .18s, color .18s; }
	.svc-pill:hover { border-color: rgba(0,0,0,.42); }
	.svc-pill.is-on { background: #111; border-color: #111; color: #fff; }
	.svc-pill:focus-visible { outline: 2px solid #E23D22; outline-offset: 2px; }
	.svc-demos-empty { margin-top: 28px; opacity: .6; }
	@media only screen and (max-width: 767px) { .svc-filter-h { flex-basis: 100%; } }