/*
Theme Name: wADtchout
Description: Child theme for wADtchout12
Template: Divi
Version: 1.0.0
*/

:root {
    --content-width: 90%;
    --content-max-width: 1600px;

    --fs-h1: clamp(24px, calc(18px + 3vw), 60px);
    --fs-h2: clamp(20px, calc(18px + 1.2vw), 40px);
    --fs-h3: clamp(16px, calc(13.8px + 0.71vw), 24px);
    --fs-h4: clamp(16px, calc(12px + 0.65vw), 24px);
    --fs-body: clamp(14px, calc(12px + 0.8vw), 18px);
}
.menu-items a {
	padding-bottom: 10px;
	position: relative;
}
/* Hover line */
.menu-items a::after {
    content: "";
    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;
    height: 10px;

    background-image: url("../../uploads/2026/08/bg-hoverLine.png");
    background-repeat: repeat-x;
    background-position: left bottom;
    background-size: auto 10px;

    transition: width 0.4s ease;
}

.menu-items a:hover::after {
    width: 100%;
}
body {
    font-family: "pt-sans", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: loos-normal, sans-serif;
    color: #000;
    font-weight: bold;
}
h1 {
    font-size: var(--fs-h1);
    line-height: 1.5;
}

h2, .h2 p{
    font-size: var(--fs-h2);
    line-height: 1.1;
}

h3, .h3 p,
h4, .h4 p {
    font-size: var(--fs-h3);
    line-height: 1.4;
}

body,
p {
    font-size: var(--fs-body);
    line-height: 1.3;
    color: #000;
}
.et_pb_section {
	background: none !important;
}
.home {
	overflow-x: clip;
}
.homePage {
	width: 100% !important;
	max-width: none !important;
}
.homePage .element {
	position: absolute;
	top: 50%;
	left: 50%;
}
/* ========================================
   Global Site Loader
======================================== */

.site-loader {
    position: fixed;
    inset: 0;

    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;

    background: #fff;

    z-index: 999999;

    opacity: 1;
    visibility: visible;

    pointer-events: all;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}


/* ========================================
   Loader Marks Container
======================================== */

.site-loader__marks {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 1vw;
}


/* ========================================
   Individual Exclamation Marks
======================================== */

.site-loader__mark {
    display: block;
    width: 10vw;
    height: auto;
    flex: 0 0 auto;
    transform: scale(0);
    transform-origin: bottom center;
    will-change: transform;
}


/* ========================================
   1-Second Loader Animation
======================================== */

.site-loader__mark--1 {
    animation: loaderMark1 1s infinite;
}

.site-loader__mark--2 {
    animation: loaderMark2 1s infinite;
}

.site-loader__mark--3 {
    animation: loaderMark3 1s infinite;
}

.site-loader__mark--4 {
    animation: loaderMark4 1s infinite;
}

.site-loader__mark--5 {
    animation: loaderMark5 1s infinite;
}

.site-loader__mark--6 {
    animation: loaderMark6 1s infinite;
}


/* ========================================
   Mark 1
======================================== */

@keyframes loaderMark1 {

    0% {
        transform: scale(0);
        animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    }

    14% {
        transform: scale(1);
        animation-timing-function: cubic-bezier(0.64, 0, 0.78, 0);
    }

    35%,
    100% {
        transform: scale(0);
    }
}


/* ========================================
   Mark 2
======================================== */

@keyframes loaderMark2 {

    0%,
    13% {
        transform: scale(0);
        animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    }

    27% {
        transform: scale(1);
        animation-timing-function: cubic-bezier(0.64, 0, 0.78, 0);
    }

    48%,
    100% {
        transform: scale(0);
    }
}


/* ========================================
   Mark 3
======================================== */

@keyframes loaderMark3 {

    0%,
    26% {
        transform: scale(0);
        animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    }

    40% {
        transform: scale(1);
        animation-timing-function: cubic-bezier(0.64, 0, 0.78, 0);
    }

    61%,
    100% {
        transform: scale(0);
    }
}


/* ========================================
   Mark 4
======================================== */

@keyframes loaderMark4 {

    0%,
    39% {
        transform: scale(0);
        animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    }

    53% {
        transform: scale(1);
        animation-timing-function: cubic-bezier(0.64, 0, 0.78, 0);
    }

    74%,
    100% {
        transform: scale(0);
    }
}


/* ========================================
   Mark 5
======================================== */

@keyframes loaderMark5 {

    0%,
    52% {
        transform: scale(0);
        animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    }

    66% {
        transform: scale(1);
        animation-timing-function: cubic-bezier(0.64, 0, 0.78, 0);
    }

    87%,
    100% {
        transform: scale(0);
    }
}


/* ========================================
   Mark 6
======================================== */

@keyframes loaderMark6 {
    0%,
    70% {
        transform: scale(0);
        animation-timing-function: cubic-bezier(.22, 1, .36, 1);
    }

    80% {
        transform: scale(1);
        animation-timing-function: cubic-bezier(.7, 0, 1, .3);
    }

    90% {
        transform: scale(0);
    }

    100% {
        transform: scale(0);
    }
}


/* ========================================
   Loader Exit
======================================== */

.site-loader.is-exiting {
    opacity: 0;
    visibility: hidden;

    pointer-events: none;
}

.site-loader.is-exiting .site-loader__mark {
    animation-play-state: paused;
     animation: none !important;
    transform: scale(0) !important;
}
/* ========================================
   SLIDE-IN ANIMATION
======================================== */

@keyframes slideInElement {
	from {
		transform: translate(
			calc(var(--x) + var(--enter-x)),
			calc(var(--y) + var(--enter-y))
		);
	}

	to {
		transform: translate(var(--x), var(--y));
	}
}


/* All floating elements */
.homePage .chair,
.homePage .mug1,
.homePage .mug2,
.homePage .pencil1,
.homePage .pencil2,
.homePage .pencil3,
.homePage .pencil4,
.homePage .shave1,
.homePage .shave2,
.homePage .shave3,
.homePage .shave4,
.homePage .shave5,
.homePage .shave6,
.homePage .shave7 {

    animation-name: slideInElement;
    animation-duration: 1.2s;
    animation-timing-function: cubic-bezier(.16, 1, .3, 1);
    animation-fill-mode: backwards;

    /* Loader holds animation at frame 0 */
    animation-play-state: paused;
}
body.site-loaded .homePage .chair,
body.site-loaded .homePage .mug1,
body.site-loaded .homePage .mug2,
body.site-loaded .homePage .pencil1,
body.site-loaded .homePage .pencil2,
body.site-loaded .homePage .pencil3,
body.site-loaded .homePage .pencil4,
body.site-loaded .homePage .shave1,
body.site-loaded .homePage .shave2,
body.site-loaded .homePage .shave3,
body.site-loaded .homePage .shave4,
body.site-loaded .homePage .shave5,
body.site-loaded .homePage .shave6,
body.site-loaded .homePage .shave7 {

    animation-play-state: running;
}

.homePage .chair {
	width: 53vw;

	--x: 17vw;
	--y: 5vw;

	/* comes from right */
	--enter-x: 60vw;
	--enter-y: 0vw;

	transform: translate(var(--x), var(--y));
	animation-delay: .3s;
}


.homePage .mug1 {
	width: 20vw;

	--x: -60vw;
	--y: -13vw;

	/* comes from left */
	--enter-x: -60vw;
	--enter-y: 0vw;

	transform: translate(var(--x), var(--y));
	animation-delay: .5s;
}


.homePage .mug2 {
	width: 22vw;
	--x: -14.5vw;
	--y: 28.6vw;
	--enter-x: 0vw;
	--enter-y: 60vh;
	transform: translate(var(--x), var(--y));
	animation-delay: .7s;
}


.homePage .pencil1 {
	width: 24.5vw;
	--x: -62vw;
	--y: 22vw;
	--enter-x: -60vw;
	--enter-y: 0vw;
	transform: translate(var(--x), var(--y));
	animation-delay: .9s;
}


.homePage .pencil2 {
	width: 29vw;
	--x: -62vw;
	--y: 42vw;
	--enter-x: -50vw;
	--enter-y: 50vh;
	transform: translate(var(--x), var(--y));
	animation-delay: 1.1s;
}


.homePage .pencil3 {
	width: 12.8vw;
	--x: -28vw;
	--y: 20.5vw;
	--enter-x: -30vw;
	--enter-y: 50vh;
	transform: translate(var(--x), var(--y));
	animation-delay: 1.3s;
}


.homePage .pencil4 {
	width: 32vw;
	--x: 33vw;
	--y: -16.2vw;
	--enter-x: 50vw;
	--enter-y: -50vh;
	transform: translate(var(--x), var(--y));
	animation-delay: 1.5s;
}


.homePage .shave1 {
	width: 10.3vw;

	--x: -53.5vw;
	--y: -27.5vw;

	/* comes from top-left */
	--enter-x: -50vw;
	--enter-y: -50vh;

	transform: translate(var(--x), var(--y));
	animation-delay: 1.7s;
}


.homePage .shave2 {
	width: 11vw;
	--x: -56.5vw;
	--y: 10.8vw;
	--enter-x: -60vw;
	--enter-y: 0vw;

	transform: translate(var(--x), var(--y));
	animation-delay: 1.9s;
}


.homePage .shave3 {
	width: 11vw;
	--x: -42.5vw;
	--y: 10.3vw;
	--enter-x: -60vw;
	--enter-y: 0vw;
	transform: translate(var(--x), var(--y));
	animation-delay: 2.1s;
}


.homePage .shave4 {
	width: 12.7vw;

	--x: -36.8vw;
	--y: 24.7vw;

	/* comes from bottom-left */
	--enter-x: -40vw;
	--enter-y: 50vh;

	transform: translate(var(--x), var(--y));
	animation-delay: 2.3s;
}


.homePage .shave5 {
	width: 16.5vw;
	--x: 10.5vw;
	--y: 30vw;
	--enter-x: 0vw;
	--enter-y: 60vh;
	transform: translate(var(--x), var(--y));
	animation-delay: 2.5s;
}


.homePage .shave6 {
	width: 12.3vw;
	--x: 41.5vw;
	--y: -5.8vw;
	--enter-x: 60vw;
	--enter-y: 0vw;
	transform: translate(var(--x), var(--y));
	animation-delay: 2.7s;
}


.homePage .shave7 {
	width: 13vw;
	--x: 38.6vw;
	--y: -25.5vw;
	--enter-x: 50vw;
	--enter-y: -50vh;
	transform: translate(var(--x), var(--y));
	animation-delay: 2.9s;
}
/*.homePage .element {
	position: absolute;
	top: 50%;
	left: 50%;
	animation: fadeInElement .5s ease-in-out;
	animation-fill-mode: forwards;
}
@keyframes fadeInElement {
	from {opacity: 0;}
	to {opacity: 1;}
}
.homePage .chair {
	transform: translate(17vw, 5vw);
	opacity: 0;
	animation-delay: .3s;
}
.homePage .mug1 {
	width: 20vw;
	transform: translate(-60vw, -13vw);
	opacity: 0;
	animation-delay: .5s;
}
.homePage .mug2 {
	width: 22vw;
	transform: translate(-14.5vw, 28.6vw);
	opacity: 0;
	animation-delay: .7s;
}
.homePage .pencil1 {
	width: 24.5vw;
	transform: translate(-62vw, 22vw);
	opacity: 0;
	animation-delay: .9s;
}
.homePage .pencil2 {
	width: 29vw;
	transform: translate(-62vw, 42vw);
	opacity: 0;
	animation-delay: 1.1s;
}
.homePage .pencil3 {
	width: 12.8vw;
	transform: translate(-28vw, 20.5vw);
	opacity: 0;
	animation-delay: 1.3s;
}
.homePage .pencil4 {
	width: 32vw;
	transform: translate(33vw, -16.2vw);
	opacity: 0;
	animation-delay: 1.5s;
}
.homePage .shave1 {
	width: 10.3vw;
	transform: translate(-53.5vw, -27.5vw);
	opacity: 0;
	animation-delay: 1.7s;
}
.homePage .shave2 {
	width: 11vw;
	transform: translate(-56.5vw, 10.8vw);
	opacity: 0;
	animation-delay: 1.9s;
}
.homePage .shave3 {
	width: 11vw;
	transform: translate(-42.5vw, 10.3vw);
	opacity: 0;
	animation-delay: 2.1s;
}
.homePage .shave4 {
	width: 12.7vw;
	transform: translate(-36.8vw, 24.7vw);
	opacity: 0;
	animation-delay: 2.3s;
}
.homePage .shave5 {
	width: 16.5vw;
	transform: translate(10.5vw, 30vw);
	opacity: 0;
	animation-delay: 2.5s;
}
.homePage .shave6 {
	width: 12.3vw;
	transform: translate(41.5vw, -5.8vw);
	opacity: 0;
	animation-delay: 2.7s;
}
.homePage .shave7 {
	width: 13vw;
	transform: translate(38.6vw, -25.5vw);
	opacity: 0;
	animation-delay: 2.9s;
}*/
.homePageText h1 {
	font-size: clamp(60px, 10vw, 140px);
	line-height: .7;
}
.homePageText h1 span {
	line-height: .9;
	display: inline-block;
}
.homePageText h1 span.highlight {
	padding: 0;
}
@media (max-width: 767px) {
	.homePageText h1 {
		font-size: 15vw;
		line-height: .7;
	}
	.homePage .chair {
		 width: 80vw;
	    --x: -12vw;
	    --y: 52vw;
	    --enter-x: 80vw;
	    --enter-y: 0vw;
	}
	.homePage .mug1 {
		width: 25vw;
		--x: -58vw;
		--y: 43vw;
		--enter-x: -80vw;
		--enter-y: 0vw;
	}
	.homePage .mug2 {
		width: 26vw;
        --x: 33vw;
        --y: -68vw;
		--enter-x: 50vw;
		--enter-y: -60vh;
	}


	.homePage .pencil1 {
		width: 28vw;
        --x: -62vw;
        --y: -62vw;
		--enter-x: -60vw;
		--enter-y: 0vw;
	}


	.homePage .pencil2 {
		width: 29vw;
        --x: -66vw;
        --y: -5vw;
		--enter-x: -50vw;
		--enter-y: 0vw;
	}


	.homePage .pencil3 {
		width: 16vw;
        --x: -50vw;
        --y: 80.5vw;
		--enter-x: -30vw;
		--enter-y: 50vh;
	}


	.homePage .pencil4 {
		width: 32vw;
		--x: 33vw;
		--y: -16.2vw;
		--enter-x: 50vw;
		--enter-y: -50vh;
	}


	.homePage .shave1 {
		width: 15vw;
        --x: -35vw;
        --y: 96.5vw;
		--enter-x: -50vw;
		--enter-y: 50vh;
	}


	.homePage .shave2 {
		width: 14vw;
        --x: -38vw;
        --y: 70.8vw;
		--enter-x: -60vw;
		--enter-y: 0vw;
	}


	.homePage .shave3 {
		width: 14vw;
        --x: -50.5vw;
        --y: -75vw;
		--enter-x: -60vw;
		--enter-y: 0vw;
	}


	.homePage .shave4 {
		width: 16vw;
        --x: -54vw;
        --y: -35vw;
        --enter-x: -40vw;
        --enter-y: -50vh;
	}


	.homePage .shave5 {
		width: 20.5vw;
        --x: 40.5vw;
        --y: 35vw;
		--enter-x: 50vw;
		--enter-y: 0vh;
	}


	.homePage .shave6 {
		width: 15vw;
        --x: 41.5vw;
        --y: -32vw;
		--enter-x: 60vw;
		--enter-y: 0vw;
	}


	.homePage .shave7 {
		width: 16vw;
        --x: -24vw;
        --y: 85vw;
		--enter-x: -50vw;
		--enter-y: 50vh;
	}
}
.groupAbsolute {
	position: absolute;
}
.groupAbsolute .desktopGroup {
	
	/*animation: fadeInElement .5s ease-in-out;
	animation-fill-mode: forwards;*/
}
.desktopGroup img {
	width: 100%;
}
.desktopGroup.pvt {
	width: 72vw;
	top: 5vw;
}
.desktopGroup.ct {
	width: 100%;
	top: 5vw;
}
.desktopGroup.pt {
	width: 60.5vw;
	top: 5vw;
}
.desktopGroup.prm {
	width: 57vw;
	top: 6vw;
}
.groupName {
	display: inline;
}
.h2, .h3 {
	font-family: loos-normal, sans-serif;
	font-weight: bold;
    color: #000;
}
footer a {
	color: #000;
}
footer a:hover {
	color: #ffd900;
}
footer .mainTitle h1 {
	font-size: clamp(50px, calc(12px + 10vw), 200px);
}
.highlight p {
	display: inline;
	background: #ffd900;
	padding: 0 0.12em;

    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
.et_pb_row.et_flex_row.profile {
	/*width: 65%;*/
}
span.highlight {
	background: #ffd900;
	display: inline;
	padding: 0 0.12em;

    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* ========================================
   About Page Stage
======================================== */

.aboutPage {
    position: relative;

    width: 100%;
    height: 100vh;
    height: 100svh;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden;
}


/* ========================================
   About Scenes
======================================== */

.aboutPage .aboutScene {
    position: absolute !important;

    /* Original artwork ratio: 1440 × 1024 */
    width: max(100vw, calc(100svh * 1440 / 1024)) !important;
    height: max(100svh, calc(100vw * 1024 / 1440)) !important;

    max-width: none !important;
    min-height: 1px;

    margin: 0 !important;
    padding: 0 !important;

    background-repeat: no-repeat;
    background-size: 100% 100%;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.8s ease,
        visibility 0.8s ease;
}


/* Active scene */

.aboutPage .aboutScene.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* Important for absolute hotspot positioning */

.aboutPage .aboutScene .et_pb_column,
.aboutPage .aboutScene .et_pb_code,
.aboutPage .aboutScene .et_pb_code_inner,
.aboutPage .aboutScene .et_pb_text_inner {
    position: static !important;
}

/* ========================================
   About Copy
======================================== */

.aboutPage .aboutCopy {
    position: absolute !important;

    left: var(--copy-x, 10%) !important;
    top: var(--copy-y, 10%) !important;

    width: var(--copy-width, 30%) !important;

    margin: 0 !important;

    z-index: 20;

}
.aboutCopy h3 {
	line-height: 1.6;
}
.aboutCopy .copyAfter {
    display: none;
}

.aboutScene.is-clicked .aboutCopy .copyBefore {
    display: none;
}

.aboutScene.is-clicked .aboutCopy .copyAfter {
    display: inline;
}
/* ========================================
   Scene 1
======================================== */

.aboutScene.scene1 {
    left: 0;
    top: 50%;

    transform: translateY(-40%);

    background-image: url("../../uploads/2026/08/coffeeKV.jpg");
    background-position: left center;

    --hotspot-x: 59%;
    --hotspot-y: 40%;
    --hotspot-width: 15.5%;

    --copy-x: 8%;
    --copy-y: 20%;
    --copy-width: 25%;
}


/* ========================================
   Scene 2
======================================== */

.aboutScene.scene2 {
    left: 50%;
    bottom: 0;

    transform: translateX(-50%);

    background-image: url("../../uploads/2026/08/pencilKV.jpg");
    background-position: center bottom;

    --hotspot-x: 44.2%;
    --hotspot-y: 81%;
    --hotspot-width: 6.6%;

    --copy-x: 49%;
    --copy-y: 80%;
    --copy-width: 25%;
}


/* ========================================
   Scene 3
======================================== */

.aboutScene.scene3 {
    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    background-image: url("../../uploads/2026/08/chairsKV.jpg");
    background-position: center center;

    --hotspot-x: 68.7%;
    --hotspot-y: 57%;
    --hotspot-width: 34%;

    --copy-x: 57%;
    --copy-y: 33%;
    --copy-width: 25%;
}

/* ========================================
   Scene 4
======================================== */

.aboutScene.scene4 {
    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    background-image: url("../../uploads/2026/08/chairsKV-yellow.jpg");
    background-position: center center;

}

.aboutPage .aboutFinalLink {
    position: absolute !important;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    z-index: 20;

    cursor: pointer;
}
.aboutScene.scene4 .aboutFinalLink {
    left: 67% !important;
    top: 57% !important;
    width: 25%;
}
/* ========================================
   About Hotspots
======================================== */

.aboutPage .aboutHotspot {
    position: absolute !important;

    left: var(--hotspot-x, 50%) !important;
    top: var(--hotspot-y, 50%) !important;

    width: var(--hotspot-width, 5.694%) !important;

    transform: translate(-50%, -50%) !important;

    z-index: 100;

    margin: 0 !important;
    padding: 8px;

    cursor: pointer;


}


/* Both hotspot images */

.aboutPage .aboutHotspot img {
    display: block;

    width: 100%;
    height: auto;

    margin: 0;
    padding: 0;
}


/* Yellow version sits exactly over normal */

.aboutPage .aboutHotspot .hotspotActive {
    position: absolute;

    inset: 8px;

    width: calc(100% - 16px);
    height: auto;

    opacity: 0;

    pointer-events: none;
}
/* Hidden/inactive scenes do not animate */
.aboutHotspot .hotspotActive {
    opacity: 0;
    animation: none;
}


/* Start animation only when its scene becomes active */
.aboutScene.is-active:not(.is-clicked) .aboutHotspot .hotspotActive {
    animation: hotspotFlash 5s infinite;
}
.aboutScene.is-clicked .hotspotActive {
    animation: none;
    opacity: 1;
}
@keyframes hotspotFlash {

    /* Initial delay */
    0%,
    45% {
        opacity: 0;
    }

    /* Flash 1 */
    55% {
        opacity: 1;
    }

    65% {
        opacity: 0;
    }

    /* Flash 2 */
    75% {
        opacity: 1;
    }

    85%,
    100% {
        opacity: 0;
    }
}



.wadtchout-nav-link  {
    font-family: loos-normal, sans-serif;
    font-size: clamp(12px, calc(12px + 0.55vw), 24px);
    color: #000;
    display: inline-block;
    margin-bottom: 10px;
 
}
.et_pb_code_inner > .wadtchout-nav-link:nth-child(1),
.et_pb_code_inner > .wadtchout-nav-link:nth-child(3) {
    width: 35%;
}

.et_pb_code_inner > .wadtchout-nav-link:nth-child(2),
.et_pb_code_inner > .wadtchout-nav-link:nth-child(4) {
    width: 60%;
}
.wadtchout-nav-link span{
	background: none;
	transition: background 0.2s ease;
	padding: 0 0.12em;

    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.wadtchout-nav-link:hover span {
    background: #ffd900;

}

.wadtchout-nav-link.active span {
    background: #ffd900;
}

/* =========================================================
   HORIZONTAL DESIGNER LIST
   ========================================================= */
   .et_pb_section:has(.designer-scroll) {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
}
.designer-scroll {
    min-width: 0 !important;
}
.designer-scroll {
    display: flex !important;
    flex-wrap: nowrap !important;

    width: 100% !important;
    max-width: 100% !important;

    overflow-x: auto !important;
    overflow-y: visible !important;

    gap: clamp(50px, 7vw, 160px);

    scrollbar-width: none;
}

.designer-scroll::-webkit-scrollbar {
    display: none;
}

/* =========================================================
   DESIGNER CARD
   ========================================================= */

.designer-scroll > .designer-card {
    flex: 0 0 clamp(250px, min(24vw, 38vh), 400px) !important;

    width: clamp(250px, min(24vw, 38vh), 400px) !important;
    max-width: none !important;

    margin-right: 0 !important;

    overflow: visible !important;
}


/* Keep artwork from consuming entire viewport */
.designer-card .et_pb_image img {
    width: 100%;
    height: auto;

    max-height: 58vh;

    object-fit: contain;
}
.designer-scroll > .designer-card {
    container-type: inline-size;
}
.cardName {
    	bottom: clamp(20px, 2vw, 40px) !important;
    	left: clamp(30px, 3vw, 80px) !important;
    }
.cardName h2 {
    font-size: clamp(16px, 8cqw, 36px) !important;
    line-height: 1.4;
}
.cardName h3 {
    font-size: clamp(10px, 5cqw, 26px) !important;
    margin-bottom: 0;
    padding-bottom: 3px;
}

.portfolio-image p {
	position: sticky;
	top: 25vh;
	margin-bottom: 50vh;
}
.portfolio-image p:last-child{
	margin-bottom: 50vh;
	padding-bottom: 18px;
}

/* =========================================================
   MOBILE — DESIGNER LIST
   ========================================================= */

@media (max-width: 767px) {

    .designer-scroll {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;

        width: 100% !important;
        max-width: 100% !important;

        overflow: visible !important;

        gap: 60px !important;
    }


    /* Each designer */
    .designer-scroll > .designer-card {
        flex: none !important;

        width: 85% !important;
        max-width: 85% !important;

        margin: 0 auto !important;

        float: none !important;

        /* Kill desktop transformations */
        /*transform: none !important;*/

        overflow: visible !important;
    }


    /* Divi modules inside each card */
    .designer-card > .et_pb_module {
        width: 100% !important;
        max-width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;
    }


    /* Designer image */
    .designer-card .et_pb_image {
        width: 100% !important;
        max-width: 100% !important;
    }

    .designer-card .et_pb_image_wrap {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
    }

    .designer-card .et_pb_image img {
        display: block;

        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;

        object-fit: contain;
    }


    /* Name module */
    .designer-card .cardName {
        width: 100% !important;
        max-width: 100% !important;

        margin-top: 10px !important;
    }


    .cardName h2 {
        font-size: clamp(18px, 6vw, 28px) !important;
        line-height: 1.5 !important;
    }
    .cardName {
    	bottom: 5vw !important;
    	left: 23vw !important;
    }
     .et_pb_row .et_pb_column.et-last-child, .et_pb_row .et_pb_column:last-child {
    	margin-right: auto !important;
    }
    .portfolio-image p {
		position: relative;
		top: 0vh;
		margin-bottom: 0vh;
	}
	.portfolio-image p:last-child{
		margin-bottom: 0vh;
	}

}

   
/* =========================================================
   DESIGNER PORTFOLIO CAROUSEL
   ========================================================= */

.designer-portfolio {
    width: 100%;
    position: relative;
}

.designer-portfolio__viewport {
    width: 100%;
    

    overflow-x: auto;
    overflow-y: hidden;

    scroll-snap-type: x mandatory;

    scrollbar-width: none;
    -ms-overflow-style: none;

    overscroll-behavior-x: contain;
}

.designer-portfolio__viewport::-webkit-scrollbar {
    display: none;
}


.designer-portfolio__track {
    display: flex;
    align-items: center;

    gap: clamp(20px, 3vw, 100px);

    width: max-content;

    padding-top: 20px;
    padding-bottom: 20px;
}

.designer-portfolio__slide {
    flex: 0 0 clamp(
        300px,
        70vw,
        900px
    );

    scroll-snap-align: center;
    scroll-snap-stop: always;
}


.designer-portfolio__image-link {
    display: block;
    width: 100%;
}


.designer-portfolio__image {
    display: block;

    width: 100%;
    height: auto;

    aspect-ratio: 1.43 / 1;

    object-fit: cover;
}


.designer-portfolio__slide {
  

    transform: scale(0.80);

    transition:
        opacity 0.35s ease,
        transform 0.35s ease;
}


.designer-portfolio__slide.is-active {
    opacity: 1;
    transform: scale(1);
}

.designer-portfolio__mobile-title {
    display: none;
}
/* =========================================================
   NAVIGATION
   ========================================================= */

.designer-portfolio__navigation {
    display: grid;

    grid-template-columns:
        minmax(50px, 1fr)
        minmax(180px, auto)
        minmax(50px, 1fr);

    align-items: center;

    max-width: 560px;

    margin:
        35px
        auto
        0;

    gap: 40px;
}


.designer-portfolio__arrow {
    appearance: none;

    border: 0;
    background: transparent;

    padding: 0;

    font: inherit;
    color: inherit;

    cursor: pointer;

    font-size: 70px;
    line-height: 1;

    transition: transform 0.2s ease;
}


.designer-portfolio__arrow:hover {
    transform: scale(1.12);
}


.designer-portfolio__arrow--prev {
    justify-self: start;
}


.designer-portfolio__arrow--next {
    justify-self: end;
}


.designer-portfolio__category {
    display: block;

    text-align: center;
    text-decoration: none;

    color: inherit;

    font-weight: 700;

    text-transform: uppercase;

    white-space: nowrap;
}


/* =========================================================
   MOBILE — PORTFOLIO LIST
   ========================================================= */

@media (max-width: 767px) {

    .designer-portfolio__viewport {
        width: 100%;
        margin-left: 0;

        overflow: visible;
        scroll-snap-type: none;
    }


    .designer-portfolio__track {
        display: block;

        width: 100%;

        padding: 0;

        transform: none !important;
    }

    .designer-portfolio__slide[data-portfolio-clone="true"] {
        display: none;
    }


    .designer-portfolio__slide {
        width: 100%;
        flex: none;

        margin: 0 0 32px;

        opacity: 1;
        transform: none;

        scroll-snap-align: none;
    }


    .designer-portfolio__image-link {
        display: block;
        width: 100%;
    }
    .designer-portfolio__image {
	    width: 90%;
	    height: auto;
	    margin: 0 auto;
	    object-fit: contain;
	}

    .designer-portfolio__mobile-title {
	    display: block;
	    width: 90%;
	    margin: 5px auto 0;

	    color: inherit;
	    text-decoration: none;

	    font-size: clamp(14px, calc(12px + 0.5vw), 20px);
	    font-weight: 600;
	}


    .designer-portfolio__navigation {
        display: none;
    }
    .designer-portfolio__mobile-title {
	    display: block;
	    font-family: loos-normal, sans-serif;
	    margin-top: 10px;

	    color: inherit;
	    text-decoration: none;

	    font-size: 16px;
	    font-weight: 600;

	    text-transform: capitalize;
	}
}

/* ========================================
   Campaign Members
======================================== */

.campaign-members {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(20px, 3vw, 50px);
    row-gap: clamp(5x, 2vw, 10px);

    width: 100%;
    max-width: 500px;
}

.campaign-member {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;

    text-align: center;
    text-decoration: none;
    color: inherit;
}

.campaign-member__image-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
}

.campaign-member__image {
    display: block;

    width: clamp(90px, 10vw, 150px);
    height: auto;

    max-width: 100%;

    object-fit: contain;
}

.campaign-member__name, .navLine p, .navLine h3 span {
    font-family: loos-normal, sans-serif;
    line-height: 1.3;
    text-align: center;
    padding-bottom: 10px !important;
    position: relative;
}
.campaign-member__name, .navLine h3 span {
	font-size: var(--fs-h3);
}
.navLine p {
	font-size: var(--fs-h4);
}
/* Hover line */
.campaign-member__name::after, .navLine p::after, .navLine h3 span::after {
    content: "";
    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;
    height: 10px;

    background-image: url("../../uploads/2026/08/bg-hoverLine.png");
    background-repeat: repeat-x;
    background-position: left bottom;
    background-size: auto 10px;

    transition: width 0.25s ease-out;
}

.campaign-member__name:hover::after, .navLine p:hover::after, .navLine h3 span:hover::after {
    width: 100%;
}

/* ========================================
   Desktop stagger
======================================== */

@media (min-width: 768px) {

    .campaign-member:nth-child(3),
    .campaign-member:nth-child(4) {
        transform: translateX(7vw);
    }

}


/* ========================================
   Mobile
======================================== */

@media (max-width: 767px) {

    .campaign-members {
        max-width: 320px;
        column-gap: 20px;
        row-gap: 24px;
    }

    .campaign-member__image {
        width: clamp(75px, 24vw, 110px);
    }

    .campaign-member:nth-child(3),
    .campaign-member:nth-child(4) {
        transform: none;
    }

}

/* ========================================
   Campaign Video
======================================== */

.campaign-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.campaign-video iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ========================================
   Campaign Navigation
======================================== */

.campaign-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;

    width: 100%;
}

.campaign-navigation__link {
	font-family: loos-normal, sans-serif;
	font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: #000;
    text-decoration: none;

    font-size: var(--fs-h3);
    line-height: 1;
}

.campaign-navigation__arrow {
	font-family: loos-normal, sans-serif;
    display: inline-block;

    font-size: var(--fs-h2);
    line-height: 1;

    transition: transform 0.2s ease;
}

.campaign-navigation__link--prev:hover
.campaign-navigation__arrow {
    transform: translateX(-8px);
}

.campaign-navigation__link--next:hover
.campaign-navigation__arrow {
    transform: translateX(8px);
}


/* ========================================
   Mobile
======================================== */

@media (max-width: 767px) {

    .campaign-navigation__link {
        gap: 6px;
        font-size: 20px;
    }

    .campaign-navigation__arrow {
        font-size: 30px;
    }

}

.groupAbsolute {
	position: absolute;
	width: 100% !important;
	max-width: none !important;
	height: 100%;
	
	top: 0;
	left: 0;
}

.groupWorkTitle:hover h2 {
	transition: transform .3 ease;
}
.groupWorkTitle.sendmeshifts:hover h2 {
	transform: translateX(40px) rotate(-3deg) scale(1.2);
}
.groupWorkTitle.landmarkaddress:hover h2 {
	transform: translateX(-50px) rotate(3deg) scale(1.2);
}
.groupWorkTitle.duvoice:hover h2 {
	transform: translateX(50px) scale(1.2);
}
.groupWorkTitle.blackbox:hover h2 {
	transform: translateX(-70px) scale(1.2);
}
.groupWorkTitle.futurecouture:hover h2 {
	transform: translateX(60px) rotate(2.5deg) scale(1.2);
}
.groupWorkTitle.nonpedigreeceleb:hover h2 {
	transform: translateX(-50px) rotate(-2deg) scale(1.2);
}
@media (max-width: 767px) {
	.groupWorkTitle.sendmeshifts:hover h2 {
	transform: translateX(20px) rotate(-3deg) scale(1.1);
}
.groupWorkTitle.landmarkaddress:hover h2 {
	transform: translateX(-30px) rotate(3deg) scale(1.1);
}
.groupWorkTitle.duvoice:hover h2 {
	transform: translateX(30px) scale(1.1);
}
.groupWorkTitle.blackbox:hover h2 {
	transform: translateX(-40px) scale(1.1);
}
.groupWorkTitle.futurecouture:hover h2 {
	transform: translateX(30px) rotate(2.5deg) scale(1.1);
}
.groupWorkTitle.nonpedigreeceleb:hover h2 {
	transform: translateX(-30px) rotate(-2deg) scale(.9);
}
}