/* --------------------------------------------------------------
Dreyfuss Mod — Custom CSS
Theme Name:   Dreyfuss Mod (Child of Hello Elementor)
File:         custom.css
Description:  Dreyfuss Custom CSS
Author:       Dreyfuss
Author URI:   https://dreyfuss.com
Version:      1.2.2
-------------------------------------------------------------- */

/*
0071ce - blue
39a6ff - blue text
*/

:root {
--text-xs: clamp(0.875rem, 1.0435rem + -0.2174vw, 1rem);
--text-sm: clamp(0.9375rem, 1.0217rem + -0.1087vw, 1rem);
--text-base: clamp(1rem, 1.1685rem + -0.2174vw, 1.125rem);
	
/* Line-height scale tuned to even pixels at 16px base */
--lh-tight: 1.25;
--lh-snug: 1.375;
--lh-normal: 1.5;
--lh-relaxed: 1.625;
--lh-loose: 1.75;
	
--color-light: #fff;
--color-dark: #000;
}

/* ====================================================
   Dreyfuss Mod - Global Fonts (Highest Specificity)
   ==================================================== */
#dreyfuss-container h1,
#dreyfuss-container h2,
#dreyfuss-container h3,
#dreyfuss-container h4,
#dreyfuss-container h5,
#dreyfuss-container h6 {
    font-family: 'Sora', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 200;
    color: var(--color-light);
}
#dreyfuss-container body,
#dreyfuss-container p,
/* #dreyfuss-container span, */
#dreyfuss-container li,
#dreyfuss-container input,
#dreyfuss-container textarea {
    font-family: 'Roboto', sans-serif;
	line-height: var(--lh-relaxed);
    font-size: clamp(1.0625rem, 1.3152rem + -0.3261vw, 1.25rem);
    font-weight: 300;
    color: #c1c1c1;
}

#dreyfuss-container .site-title a {
    font-family: 'Sora', sans-serif;
    text-decoration: none;
    text-transform: uppercase;
}
#dreyfuss-container .elementor-heading-title {
    font-family: 'Sora', sans-serif;
    /*font-family: 'Roboto', sans-serif;*/
    color: var(--color-light);
}

/* ============================== Primary Nav ============================== */
#dreyfuss-container #df-header .df-primary-navigation-desktop a {
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    font-weight: 400;
	line-height: var(--lh-normal);
    color: #eee;
}

/* ============================== Cursor ============================== */
#dreyfuss-container #df-header .df-primary-navigation-desktop a {
    cursor: url('../cursor/cursor-menu.svg?v=1.2') 15 15, url('../cursor/cursor-menu.png') 15 15, auto;
}
#dreyfuss-container .df-pages a {
    cursor: url('../cursor/cursor-menu.svg?v=1.3') 15 15, url('../cursor/cursor-menu.png') 15 15, auto;
}
#dreyfuss-container .df-loop-grid .elementor-widget-theme-post-featured-image a img {
    cursor: url('../cursor/cursor-project.svg?v=v1.3') 8 8, url('../cursor/cursor-project.png') 8 8, auto;
}
#dreyfuss-container .df-project .df-project-slider img {
    cursor: url('../cursor/cursor-project.svg?v=v1.3') 8 8, url('../cursor/cursor-project.png') 8 8, auto;
}
#dreyfuss-container .df-loop-carousel .elementor-loop-container .elementor-widget-theme-post-featured-image a img {
    cursor: url('../cursor/cursor-project.svg?v=v1.3') 8 8, url('../cursor/cursor-project.png') 8 8, auto;
}

/* ============================== Page Content ============================== */
body:not(.home)#dreyfuss-container div[data-elementor-type="wp-page"].elementor {
    padding-top: 0;
}
@media screen and (min-width: 768px) {
body:not(.home)#dreyfuss-container div[data-elementor-type="wp-page"].elementor {
    padding-top: 3rem;
}
}

/* ============================== Header Footer ============================== */
#dreyfuss-container #df-header > div {
    width: 100%;
    padding-top: 2rem;
    padding-bottom: 2rem;
    padding-left: 2rem;
    padding-right: 2rem;
    box-sizing: border-box;
}
@media screen and (min-width: 768px) {
#dreyfuss-container #df-header > div {
    padding-top: 0rem;
    padding-bottom: 0rem;
    padding-left: 2rem;
    padding-right: 2rem;
}
}
@media screen and (min-width: 1024px) {
    #dreyfuss-container #df-header > div {
    padding-top: 0rem;
    padding-bottom: 0rem;
    padding-left: 4em;
    padding-right: 4rem;
}
}

/* ============================== Home ============================== */
#dreyfuss-container .df-intro h1 {
    font-family: 'Sora', sans-serif;
    /*font-family: 'Roboto', sans-serif;*/
    font-size: clamp(1.5rem, 1.2391rem + 1.3043vw, 2.25rem);
    line-height: var(--lh-snug);
    font-weight: 500;
    max-width: 28ch;
}
#dreyfuss-container .df-intro h2 {
    font-size: clamp(1.25rem, 0.9457rem + 1.5217vw, 2.125rem);
    line-height: var(--lh-snug);
    font-weight: 100;
    color: var(--color-light);
}
#dreyfuss-container .project-stats p {
    font-size: 2.425rem;
    line-height: var(--lh-normal);
    font-weight: 100;
}
#dreyfuss-container .project-stats-sub p {
    font-size: 2.425rem;
    line-height: var(--lh-normal);
    font-weight: 300;
}

/* Project Counters */
#dreyfuss-container .dreyfuss-stats .qodef-m-digit {
    font-family: 'Sora', sans-serif;
    font-size: clamp(3.75rem, 3.3152rem + 2.1739vw, 5rem);
    font-weight: 100;
    letter-spacing: -0.4rem;
    color: #555;
}
#dreyfuss-container .dreyfuss-stats .qodef-m-text {
    font-family: 'Roboto', sans-serif;
    font-size: 0.75rem;
    font-weight: 300;
    letter-spacing: 0.05rem;
    color: #eee;
    text-transform: uppercase;
}

#dreyfuss-container .df-text-over-img {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#dreyfuss-container .df-text-over-img {
    pointer-events: none;
}
#dreyfuss-container .df-text-over-img a {
    pointer-events: none;
}
#dreyfuss-container .df-text-over-img p {
    font-family: 'Sora', sans-serif;
    font-size: clamp(2.75rem, 2.3152rem + 2.1739vw, 4rem);
    font-weight: 100;
    line-height: var(--lh-tight);
}

/* ============================== YT Video ============================== */
#dreyfuss-container .df-video-title h2 {
    font-size: clamp(1.25rem, 0.9022rem + 1.7391vw, 2.25rem);
    line-height: var(--lh-snug);
    font-weight: 100;
}
#dreyfuss-container .df-video-title p.qodef-m-subtitle {
	font-size: clamp(1.25rem, 1.163rem + 0.4348vw, 1.5rem);
    color: #39a6ff;
    text-transform: capitalize;
}
lite-youtube {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    cursor: pointer;
}
lite-youtube iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
lite-youtube:hover {
    display: block;
    position: relative;
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
}
lite-youtube::after {
    content: "";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    letter-spacing: 0.05em;
    color: var(--color-light);
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity 1s ease;

    pointer-events: none;
}
lite-youtube:hover::after {
    opacity: 1;
    transition-duration: 0.25s;
}
lite-youtube iframe {
    width: 100%;
    height: 100%;
    border: 0;
}
@media (max-width: 767px) {
    #dreyfuss-container .df-lite-youtube-cotainer {
        --flex-wrap-mobile: nowrap;
    }
}

/* SVG overlay */
.video-overlay-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(64px, 8vw, 120px);
    height: auto;
    color: var(--color-light);
    opacity: 1;
    pointer-events: none; /* critical */
    transition:
        opacity 1s ease,
        width 0.7s ease-out;
}
lite-youtube:hover .video-overlay-icon {
    opacity: 1;
    width: clamp(72px, 9vw, 140px);
    transition-duration: 0.2s;
    transition-timing-function: ease-out;
}
.video-overlay-icon .icon-bg {
    fill: #000;
    transition: fill 0.25s ease;
}
.video-overlay-icon .icon-play {
    fill: #fff;
    transition: fill 0.25s ease;
}
lite-youtube:hover .video-overlay-icon .icon-bg {
    fill: #39a6ff;
}
lite-youtube:hover .video-overlay-icon .icon-play {
    fill: #fff;
}
lite-youtube[activated]::after,
lite-youtube[activated] .video-overlay-icon {
    opacity: 0;
    pointer-events: none;
}

/* ============================== Firm ============================== */
#dreyfuss-container .df-firm h1 {
    font-family: 'Sora', sans-serif;
    font-size: 2rem;
    line-height: var(--lh-tight);
    font-weight: 200;
    /*padding-bottom: 0.25rem;*/
}
#dreyfuss-container .df-firm p {
    /*font-family: 'Roboto', sans-serif;*/
    font-size: clamp(1.125rem, 1.125rem + 0vw, 1.125rem);
    line-height: var(--lh-loose);
    font-weight: 200;
    letter-spacing: 0.02rem;
    color: var(--color-light);
}

#dreyfuss-container .df-team h4 {
    /*font-family: 'Roboto', sans-serif;*/
    font-size: 1.25rem;
    line-height: var(--lh-snug);
    font-weight: 200;
    color: var(--color-light);
    /*letter-spacing: 0.02rem;*/
    margin-top: 0.75rem;
    margin-bottom: 0.125rem;
}
#dreyfuss-container .df-team p {
    /*font-family: 'Roboto', sans-serif;*/
    font-size: 0.75rem;
    line-height: var(--lh-tight);
    font-weight: 300;
    letter-spacing: 0.0375rem;
    color: #ffffffb3;
    text-transform: uppercase;
    margin-top: 0;
}

/* ============================== Portfolio ============================== */
#dreyfuss-container .df-loop-carousel-title h3,
#dreyfuss-container .df-loop-project-title h3 {
    font-size: 1.125rem;
    font-weight: 200;
    line-height: var(--lh-snug);
    letter-spacing: 0.0125rem;
	color: var(--color-light);
}
#dreyfuss-container .df-loop-carousel-location,
#dreyfuss-container .df-loop-project-location {
    font-size: 0.75rem;
    font-weight: 400;
    line-height: var(--lh-snug);
    color: #777;
    letter-spacing: 0.0125rem;
    text-transform: uppercase;
}
#dreyfuss-container .df-loop-carousel-title a,
#dreyfuss-container .df-loop-project-title a {
    text-decoration: none;
}
#dreyfuss-container .df-loop-carousel-title a:hover,
#dreyfuss-container .df-loop-project-title a:hover {
    color: #39a6ff;
}
#dreyfuss-container .e-loop-item .df-loop-carousel-title a,
#dreyfuss-container .e-loop-item .df-loop-project-title a {
    transition: color 0.25s ease;
}
#dreyfuss-container .e-loop-item:hover .df-loop-carousel-title a,
#dreyfuss-container .e-loop-item:hover .df-loop-project-title a {
    color: #39a6ff;
}
#dreyfuss-container .df-loop-grid .elementor-pagination a {
    text-decoration: none;
    /*padding: 20px 25px;*/
}
#dreyfuss-container .df-loop-grid span.page-numbers:first-of-type {
    /*padding-left: 0;*/
}
#dreyfuss-container .df-loop-grid span.page-numbers {
    /*padding: 20px 25px;*/
}
#dreyfuss-container .df-loop-grid span.page-numbers:last-of-type {
    /*padding-right: 0;*/
}

/* Related project navigation */
.e-loop-item .elementor-widget-theme-post-featured-image {
  overflow: hidden;
}
/* Smooth zoom animation */
.e-loop-item .elementor-widget-theme-post-featured-image img {
  transition: transform 0.5s ease, opacity 0.3s ease;
  transform-origin: center center;
}
/* Zoom on hover */
.e-loop-item:hover .elementor-widget-theme-post-featured-image img {
  transform: scale(1.03);
  opacity: 0.9;
}

/* Hide Previous Next when it's disabled (no href) */
.elementor-pagination .page-numbers.prev:not([href]) {
    /*display: none;*/
}
/* Hide NEXT when it's disabled (no href) */
.elementor-pagination .page-numbers.next:not([href]) {
    /*display: none;*/
}

/* ============================== Project Single ============================== */
#dreyfuss-container .df-project h1 {
font-family: 'Sora', sans-serif;
    font-size: clamp(2.25rem, 2.2123rem + 0.1887vw, 2.375rem);
    line-height: var(--lh-tight);
    font-weight: 200;
    letter-spacing: -0.0375rem;
    /*padding-bottom: 0.25rem;*/
}
#dreyfuss-container .df-description p {
    font-size: var(--text-sm);
    font-weight: 300;
    line-height: var(--lh-loose);
    color: #eee;
    letter-spacing: 0.0125rem;
}
#dreyfuss-container .df-description p:first-of-type {
    margin-block-start: 0; /* removes the top margin */
}
#dreyfuss-container .df-project {
    font-family: 'Roboto', sans-serif;
}
#dreyfuss-container .df-project p.qodef-m-title {
    text-transform: uppercase;
    font-size: 0.75rem;
    color: #777;
    font-weight: 400;
    letter-spacing: 0.0375rem;
}
#dreyfuss-container .df-project div.qodef-m-text {
    font-size: clamp(0.8125rem, 0.981rem + -0.2174vw, 0.9375rem);
    font-weight: 300;
    color: var(--color-light);
    letter-spacing: 0.0375rem;
    margin-top: 0.25em;
	text-wrap: balance;
	text-wrap: pretty;
}

/* Related project navigation */
.df-project-nav {
    display: inline-block;
    color: var(--color-light); /* default color */
    transition: color 0.25s ease;
}
.dfproject-nav svg {
    width: 20px;
    height: 20px;
}
.df-project-nav.df-prev svg,
.df-project-nav.df-next svg {
    width: 24px;
    height: 24px;
}

.project-home-icon rect {
    fill: currentColor; /* now controlled by parent color */
    transition: fill 0.25s ease;
}
/* Hover color */
.df-project-nav:hover {
    color: #39a6ff; /* your hover color for arrows */
}
/* Optional: different hover for project home icon */
.df-project-nav.cg-main:hover {
    color: #39a6ff; /* hover color for home icon */
}

#dreyfuss-container .swiper-button-prev.swiper-button-disabled,
#dreyfuss-container .swiper-button-next.swiper-button-disabled {
    opacity: 0;
}

/* ============================== Project Single Navigation ============================== */
.elementor-pagination {
    display: flex;
    justify-content: center;
    align-items: center;

    /* spacing controls */
    --arrow-gap: 1rem;
    --number-gap: 1.375rem;
}
/* Page Numbers (Base) */
.elementor-pagination .page-numbers {
    color: var(--color-light);
    text-decoration: none;
    font-size: 16px;

    width: 2.5rem;
    height: 2.5rem;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-inline: calc(var(--number-gap) / 2);
    box-sizing: border-box;
    transition: color 0.2s ease, border-color 0.2s ease;
}
/* Hover hit-area matches active box */
.elementor-pagination .page-numbers:not(.current):hover {
    color: #39a6ff;
}
/* Active Page */
.elementor-pagination .page-numbers.current {
    border: 1px solid #39a6ff;
    color: #39a6ff;
    font-weight: 600;
}
/* Arrows (Prev / Next) */
.elementor-pagination a.page-numbers.prev,
.elementor-pagination a.page-numbers.next {
    width: 2.5rem;
    height: 2.5rem;
    margin-inline: var(--arrow-gap);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    font-size: 0;          /* hide text completely */
    line-height: 0;
}
/* Hide disabled arrows entirely */
.elementor-pagination .prev:not([href]),
.elementor-pagination .next:not([href]) {
    display: none;
}
/* SVG ARROWS */
.elementor-pagination a.page-numbers.prev::before,
.elementor-pagination a.page-numbers.next::before {
    content: '';
    position: absolute;
    inset: 0;

    background-repeat: no-repeat;
    background-position: center;
    background-size: 60%;

    transition: opacity 2s ease;
}
/* Left Arrow */
.elementor-pagination a.page-numbers.prev::before {
    background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34.2 32.3' fill='none' stroke='white' stroke-width='2'>\
<line x1='0.5' y1='16' x2='33.5' y2='16'/>\
<line x1='0.3' y1='16.5' x2='16.2' y2='0.7'/>\
<line x1='0' y1='15.4' x2='16.2' y2='31.6'/>\
</svg>");
}
/* Right Arrow */
.elementor-pagination a.page-numbers.next::before {
    background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34.2 32.3' fill='none' stroke='white' stroke-width='2'>\
<line x1='0' y1='16' x2='33' y2='16'/>\
<line x1='17.3' y1='0.7' x2='33.2' y2='16.5'/>\
<line x1='17.3' y1='31.6' x2='33.5' y2='15.4'/>\
</svg>");
}
.elementor-pagination a.page-numbers.prev::before,
.elementor-pagination a.page-numbers.next::before {
    opacity: 0.7;
}
.elementor-pagination a.page-numbers.prev:hover::before {
    background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34.2 32.3' fill='none' stroke='%2339a6ff' stroke-width='2'>\
<line x1='0' y1='16' x2='33' y2='16'/>\
<line x1='16.2' y1='0.7' x2='0.3' y2='16.5'/>\
<line x1='16.2' y1='31.6' x2='0' y2='15.4'/>\
</svg>");
}
.elementor-pagination a.page-numbers.next:hover::before {
    background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34.2 32.3' fill='none' stroke='%2339a6ff' stroke-width='2'>\
<line x1='0' y1='16' x2='33' y2='16'/>\
<line x1='17.3' y1='0.7' x2='33.2' y2='16.5'/>\
<line x1='17.3' y1='31.6' x2='33.5' y2='15.4'/>\
</svg>");
}

/* ============================== Services ============================== */
#dreyfuss-container .df-services h1 {
font-family: 'Sora', sans-serif;
    font-size: clamp(1.875rem, 1.8315rem + 0.2174vw, 2rem);
    line-height: var(--lh-tight);
    font-weight: 200;
    color: var(--color-dark);
}
#dreyfuss-container .df-services p {
    font-family: 'Roboto', sans-serif;
    font-size: var(--text-base);
	line-height: var(--lh-relaxed);
    line-height: clamp(1.5, 1.398 + 0.0284vw, 1.75);
    font-weight: 300;
    color: #222;
}
#dreyfuss-container .df-services h2 {
font-family: 'Sora', sans-serif;
    font-size: 1rem;
    line-height: var(--lh-snug);
    font-weight: 400;
    color: #333;
    text-transform: uppercase;
}
#dreyfuss-container .df-services-li ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#dreyfuss-container .df-services-li li {
    font-size: var(--text-xs);
    line-height: var(--lh-loose);
    font-weight: 300;
    color: #111;
    letter-spacing: 0.02rem;
}

/* ============================== Contact ============================== */
#dreyfuss-container .df-contact h1 {
    font-size: 2rem;
    line-height: var(--lh-tight);
    font-weight: 200;
    color: var(--color-light);
}
#dreyfuss-container .df-contact h2 {
    font-size: 2rem;
    line-height: var(--lh-tight);
    font-weight: 200;
    color: var(--color-light);
}
#dreyfuss-container .df-contact p {
    font-size: 1rem;
    line-height: var(--lh-normal);
    font-weight: 200;
    color: var(--color-light);
    letter-spacing: 0.02rem;
}
#dreyfuss-container .df-contact a {
    display: inline-block;
    text-decoration: none;
    color: var(--color-light);
}
@media (max-width: 768px) {
    #dreyfuss-container .df-contact a {
    margin-top: 2rem;
}
	#dreyfuss-container .df-contact .df-career a {
	margin-top: .5rem;
}
}

#dreyfuss-container .df-contact a {
    position: relative;
    text-decoration: none;
}
#dreyfuss-container .df-contact a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px; /* adjust gap */
    width: 0%;
    height: 1px;
    background: #39a6ff;
    transition: width 0.3s ease;
}
#dreyfuss-container .df-contact a:hover::after {
    width: 100%;
}

#dreyfuss-container .df-contact .df-license {
	font-family: 'Roboto', sans-serif;
	display: inline-block;
	border: 1px solid #dbdbdb5e;
	box-sizing: border-box;
	padding: 0.8rem 1.2rem;
	margin-top: 0.625rem;
	font-size: clamp(0.6875rem, 0.856rem + -0.2174vw, 0.8125rem);
	line-height: var(--lh-normal);
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 0.075rem;
	color: var(--color-light);
	transition: color 250ms ease, background-color 250ms ease;
}
#dreyfuss-container .df-contact .df-license:hover {
	color: var(--color-dark);
	background-color: var(--color-light);
}
#dreyfuss-container .df-contact .df-license-number {
	white-space: nowrap;
	font-size: inherit;
	color: inherit;
	font-weight: inherit;
	-webkit-user-select: all;
	user-select: all;
	-webkit-touch-callout: none;
}

/* ============================== Footer ============================== */
#dreyfuss-container footer .dreyfuss-footer-menu a {
    font-size: clamp(0.875rem, 1.0435rem + -0.2174vw, 1rem);
    font-weight: 300;
}
#dreyfuss-container footer p {
    font-family: 'Roboto', sans-serif;
    font-size: clamp(0.6875rem, 0.856rem + -0.2174vw, 0.8125rem);
    line-height: var(--lh-tight);
    font-weight: 300;
    color: #c1c1c1;
    text-transform: uppercase;
    letter-spacing: 0.02rem;
}

/* ============================== 404 ============================== */
body.error404#dreyfuss-container .df-404 * {
	color: var(--color-dark);
	transition: all 300ms ease;
}
body.error404#dreyfuss-container .df-404 a {
	text-decoration: none;
}
body.error404#dreyfuss-container .elementor-button-text {
	text-align: left;
}
body.error404#dreyfuss-container .df-404 .elementor-button-icon svg {
	width: 100%;
	max-width: 1.2em;
	height: auto;
}
body.error404#dreyfuss-container .df-404 a.elementor-button:hover span.elementor-button-icon {
	width: 100%
	max-width: 2em;
	height: auto;
	padding-left: 0.5rem;
}