/* Chronevo Custom Styles */

/* Hero Images Animation Styles */
.img-hero-animated-fade {
    opacity: 0;
}

.img-hero-animated-fade.img-fade-loaded {
    opacity: 1;
    transition: opacity 1.2s ease-out;
}

.img-hero-animated-slide {
    position: relative;
    overflow: hidden;
    transform: translateY(calc(-20% - 40px));
    clip-path: inset(100% 0 0 0);
}

.img-hero-animated-slide.img-slide-loaded {
    transform: translateY(0);
    clip-path: inset(0 0 0 0);
    transition: transform 0.8s ease-out, clip-path 0.8s ease-out;
}

/* Hero Images - Muted look with grayscale filter */
.img-hero-1,
.img-hero-2,
.img-hero-3 {
    filter: grayscale(50%);
    transition: filter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.div-hero-image-wrapper-1:hover .img-hero-1,
.div-hero-image-wrapper-2:hover .img-hero-2,
.div-hero-image-wrapper-3:hover .img-hero-3 {
    filter: grayscale(0%);
}

/* Page Loader */
.div-page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    opacity: 1;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
    visibility: visible;
}

.div-page-loader.loader-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.div-loader-spinner {
    width: 60px;
    height: 60px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: loader-spin 1s linear infinite;
}

@keyframes loader-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Main Content Wrapper - Hidden initially, shown after loading */
.div-main-content-wrapper {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

.div-main-content-wrapper.content-loaded {
    opacity: 1;
    visibility: visible;
}

/* Root Variables */
:root {
    --primary-dark: #000000;
    --secondary-dark: #1a1a1a;
    --accent-dark: #2a2a2a;
    /* Primary Color Scale */
    --primary-900: #8C7325;
    --primary-700: #B89438;
    --primary-500: #DCAF47;
    --primary-300: #E8CD85;
    --primary-100: #F6EFD7;
    /* Secondary Color Scale */
    --secondary-900: #4F5053;
    --secondary-700: #7A7C80;
    --secondary-500: #BCBDC0;
    --secondary-300: #E1E2E4;
    --secondary-100: #F6F7F8;
    --white: #ffffff;
    --light-gray: #f5f5f5;
    --medium-gray: #808080;
    --dark-gray: #333333;
    /* App-style photo corners — wrappers + imgs stay in sync (hover scale clips to arc) */
    --img-app-radius: 1.25rem;
}

/* Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    line-height: 1.6;
    color: #ffffff;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
    position: relative;
}

/* Header: relative on md+; sticky compact bar on small viewports only */
.header-sticky {
    position: relative;
    width: 100%;
    z-index: 50;
    background-color: rgba(0, 0, 0, 0.95);
    transition-property: background-color, backdrop-filter, opacity;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}

@media (max-width: 767px) {
    .header-sticky {
        position: sticky;
        top: 0;
    }
}

/* Main Sections - Full Viewport Width */
.section-hero,
.section-taglines,
.section-services,
.section-portfolio,
.section-blog,
.section-blog-category,
.section-contact,
.section-footer {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    position: relative;
}


/* Ensure child elements max-width is always within parent container */
.section-hero > *,
.section-taglines > *,
.section-services > *,
.section-portfolio > *,
.section-blog > *,
.section-blog-category > *,
.section-contact > * {
    max-width: 100%;
    box-sizing: border-box;
}

/* Ensure all containers with padding respect viewport */
.div-header-container {
    box-sizing: border-box;
    width: 96%;
    max-width: 96%;
}

.div-hero-container,
.div-services-container,
.div-portfolio-container,
.div-blog-container,
.div-footer-container {
    box-sizing: border-box;
    width: 100%;
    max-width: min(100%, 1440px);
}

/* Taglines wrapper - contain scrolling animation */
.div-taglines-wrapper {
    width: 100%;
    max-width: 100%;
    position: relative;
    overflow: hidden;
}

/* Taglines content - contained within wrapper */
.div-taglines-content {
    position: relative;
    left: 0;
    right: 0;
}

/* Taglines Scroll Animation */
@keyframes taglines-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.animate-taglines-scroll {
    animation: taglines-scroll 45s linear infinite;
}

.animate-taglines-scroll:hover {
    animation-play-state: running;
}

/* Clients logo carousel - very slow auto scroll, pause on hover */
@keyframes clients-logo-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.animate-clients-logo-scroll {
    animation: clients-logo-scroll 120s linear infinite;
}

.div-clients-carousel:hover .animate-clients-logo-scroll {
    animation-play-state: paused;
}

/* Taglines - Make more diffuse */
.section-taglines {
    opacity: 1;
}

/* Subtle texture overlay for dark grey sections (hero, taglines) - within same color, not prominent */
.section-hero::before,
.section-taglines::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: 
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(255, 255, 255, 0.03) 2px,
            rgba(255, 255, 255, 0.03) 4px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 2px,
            rgba(255, 255, 255, 0.03) 2px,
            rgba(255, 255, 255, 0.03) 4px
        );
    background-size: 48px 48px;
    pointer-events: none;
    z-index: 0;
}

.span-tagline-item {
    opacity: 0.2;
    filter: blur(0.5px);
    transition: opacity 0.3s ease-out, filter 0.3s ease-out;
}

.span-tagline-separator {
    opacity: 0.08;
    filter: blur(0.5px);
}

/* Ensure absolute positioned elements stay within bounds */
.section-hero [class*="absolute"],
.section-services [class*="absolute"],
.section-portfolio [class*="absolute"],
.section-blog [class*="absolute"],
.section-blog-category [class*="absolute"] {
    max-width: 100%;
}

/* Background pattern and geometric background - ensure they don't cause overflow */
.div-background-pattern,
.div-geometric-background {
    position: absolute;
    width: 100%;
    max-width: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

/* Ensure absolutely positioned elements don't affect body width calculation */
body > [class*="absolute"] {
    position: absolute;
}

/* Ensure images don't exceed container */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* App-style rounded corners on photos; keep dimensions — exclude brand logos (header desktop/mobile, footer, popup, clients carousel) */
img:not(.img-logo):not(.img-header-mobile-logo):not(.img-footer-logo):not(.img-popup-menu-logo):not(.img-clients-logo) {
    border-radius: var(--img-app-radius);
}

/* Match radius on clip wrappers so transform/scale on hover stays inside arced corners */
.div-hero-image-wrapper-1,
.div-hero-image-wrapper-2,
.div-hero-image-wrapper-3,
.div-blog-post-image-wrapper,
.div-service-image-wrapper,
.div-blog-article-image-wrapper,
.div-blog-recent-post-image-wrapper,
.div-single-post-featured-image-wrapper,
.div-about-hero-image-1,
.div-about-hero-image-2,
.div-about-video-container,
.div-about-awards-media,
.div-single-post-hero-image-wrapper,
.div-single-post-second-image-wrapper,
.div-portfolio-grid .div-portfolio-card,
.section-portfolio .div-portfolio-carousel-track .div-portfolio-card {
    border-radius: var(--img-app-radius);
    overflow: hidden;
}

/* Inner media fills rounded mask — avoids double-radius / clip-path glitches on hero */
.div-hero-image-wrapper-1 img,
.div-hero-image-wrapper-2 img,
.div-hero-image-wrapper-3 img,
.section-portfolio .div-portfolio-carousel-track .div-portfolio-card img,
.div-portfolio-card-image-wrapper img,
.div-blog-post-image-wrapper img,
.div-service-image-wrapper img,
.div-blog-article-image-wrapper img,
.div-blog-recent-post-image-wrapper img,
.div-single-post-featured-image-wrapper > img.img-single-post-featured,
.div-single-post-featured-image-wrapper .img-single-post-featured-video,
.div-about-hero-image-1 img,
.div-about-hero-image-2 img,
.div-about-video-container .img-about-video-thumbnail,
.div-about-awards-media .img-about-awards,
.div-portfolio-grid .div-portfolio-card .img-portfolio-card,
.div-single-post-hero-image-wrapper img,
.div-single-post-second-image-wrapper img {
    border-radius: 0;
}

/* Background Pattern */
.background-pattern {
    background-image: 
        radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(128, 128, 128, 0.03) 0%, transparent 50%),
        linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.02) 50%, transparent 60%);
    background-size: 400px 400px, 300px 300px, 200px 200px;
    animation: patternMove 20s ease-in-out infinite;
}

@keyframes patternMove {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    33% {
        transform: translate(30px, -30px) rotate(1deg);
    }
    66% {
        transform: translate(-20px, 20px) rotate(-1deg);
    }
}

/* Geometric Background */
.geometric-bg {
    animation: geometricFloat 15s ease-in-out infinite;
}

/* Background Pattern Overlay - Keep behind all content */
.div-background-pattern {
    z-index: -1;
    pointer-events: none;
}

/* Geometric Background Element - Keep behind all content */
.div-geometric-background {
    z-index: -2;
    pointer-events: none;
}

@keyframes geometricFloat {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(2deg);
    }
}

/* Logo Container */
.logo-container h1 {
    background: linear-gradient(135deg, #ffffff 0%, #cccccc 50%, #808080 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: logoGlow 3s ease-in-out infinite alternate;
}

@keyframes logoGlow {
    0% {
        filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.2));
    }
    100% {
        filter: drop-shadow(0 0 40px rgba(255, 255, 255, 0.4));
    }
}

/* CTA Buttons */
.cta-primary {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.cta-primary:hover {
    box-shadow: 0 12px 40px rgba(220, 175, 71, 0.4);
    border-color: rgba(220, 175, 71, 0.5);
    transform: translateY(-2px);
}

.cta-secondary {
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.cta-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(220, 175, 71, 0.2);
}

/* Floating Navigation */
.floating-nav .nav-item {
    backdrop-filter: blur(20px);
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.floating-nav .nav-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(220, 175, 71, 0.3);
}

/* Scroll Indicator */
.scroll-indicator {
    animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
    0%, 100% {
        opacity: 0.6;
        transform: translateX(-50%) translateY(0);
    }
    50% {
        opacity: 1;
        transform: translateX(-50%) translateY(5px);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .logo-container h1 {
        font-size: 3.5rem;
    }
    
    .floating-nav {
        top: 1rem;
        right: 1rem;
    }
    
    .floating-nav .nav-item {
        width: 2.5rem;
        height: 2.5rem;
    }
    
    .cta-buttons {
        flex-direction: column;
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .logo-container h1 {
        font-size: 2.5rem;
    }
    
    .geometric-bg > div {
        transform: scale(0.8);
    }
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
    height: 100%;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
}

/* Ensure body margin and padding are always 0 - highest priority */
html body,
body.body-main {
    margin: 0;
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
}

/* Ensure fixed elements work correctly - body position already set above */

/* Selection Styles */
::selection {
    background-color: rgba(255, 255, 255, 0.3);
    color: #000000;
}

/* Focus Styles */
button:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

button:focus-visible:hover {
    outline-color: #DCAF47;
}

/* Logo Link - Remove outline and scale down 15% */
.link-logo-home {
    display: inline-block;
    transform: scale(0.85);
    transform-origin: center;
}

.link-logo-home,
.link-logo-home *,
.link-logo-home:focus,
.link-logo-home:focus-visible,
.link-logo-home:active {
    outline: none;
    outline-offset: 0;
}

/* Loading Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.logo-container,
.cta-buttons,
.floating-nav {
    animation: fadeInUp 1s ease-out;
}

.cta-buttons {
    animation-delay: 0.3s;
}

.floating-nav {
    animation-delay: 0.6s;
}

/* Service Images Floating Animations - very slow, ~50px square from center, return to center each round */
/* .div-service-image-wrapper: transform-origin center; each path random; max displacement ~±25px */
@keyframes float-service-1 {
    0%, 100% { transform: translate(-50%, 0); }
    25% { transform: translate(calc(-50% + 18px), -22px); }
    50% { transform: translate(calc(-50% - 20px), 12px); }
    75% { transform: translate(calc(-50% + 10px), 24px); }
}

@keyframes float-service-2 {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-24px, 14px); }
    50% { transform: translate(20px, -18px); }
    75% { transform: translate(-12px, -22px); }
}

@keyframes float-service-3 {
    0%, 100% { transform: translate(0, -50%); }
    25% { transform: translate(22px, calc(-50% - 16px)); }
    50% { transform: translate(-18px, calc(-50% + 20px)); }
    75% { transform: translate(-20px, calc(-50% - 10px)); }
}

@keyframes float-service-4 {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(16px, 24px); }
    50% { transform: translate(-22px, -14px); }
    75% { transform: translate(20px, -20px); }
}

@keyframes float-service-5 {
    0%, 100% { transform: translate(-50%, 0); }
    25% { transform: translate(calc(-50% - 14px), 20px); }
    50% { transform: translate(calc(-50% + 22px), -16px); }
    75% { transform: translate(calc(-50% - 8px), -24px); }
}

@keyframes float-service-6 {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-20px, -18px); }
    50% { transform: translate(14px, 22px); }
    75% { transform: translate(22px, 10px); }
}

@keyframes float-service-7 {
    0%, 100% { transform: translate(0, -50%); }
    25% { transform: translate(-16px, calc(-50% + 22px)); }
    50% { transform: translate(20px, calc(-50% - 12px)); }
    75% { transform: translate(14px, calc(-50% + 18px)); }
}

@keyframes float-service-8 {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(12px, -20px); }
    50% { transform: translate(-24px, 16px); }
    75% { transform: translate(-18px, -14px); }
}

.img-service-image-1 {
}

/* Pause animation when hovered - for all img-service-image-* elements */
.img-service-image-1.img-animation-paused,
.img-service-image-2.img-animation-paused,
.img-service-image-3.img-animation-paused,
.img-service-image-4.img-animation-paused,
.img-service-image-5.img-animation-paused,
.img-service-image-6.img-animation-paused,
.img-service-image-7.img-animation-paused,
.img-service-image-8.img-animation-paused {
    animation-play-state: paused;
}

.img-service-image-2 {
}

.img-service-image-3 {
}

.img-service-image-4 {
}

.img-service-image-5 {
}

.img-service-image-6 {
}

.img-service-image-7 {
}

.img-service-image-8 {
}

/* Base transition for all img-service-image-* elements */
/* Width and height transitions for smooth zoom effect */
.img-service-image-1,
.img-service-image-2,
.img-service-image-3,
.img-service-image-4,
.img-service-image-5,
.img-service-image-6,
.img-service-image-7,
.img-service-image-8 {
    width: 100%;
    height: 100%;
    transform-origin: center;
    cursor: pointer;
    will-change: width, height;
    filter: grayscale(50%);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), height 0.4s cubic-bezier(0.4, 0, 0.2, 1), filter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Scale effect when hovered - applied via JavaScript class */
.img-service-image-1.img-scale-hover,
.img-service-image-2.img-scale-hover,
.img-service-image-3.img-scale-hover,
.img-service-image-4.img-scale-hover,
.img-service-image-5.img-scale-hover,
.img-service-image-6.img-scale-hover,
.img-service-image-7.img-scale-hover,
.img-service-image-8.img-scale-hover {
    transform: scale(1.30);
}

/* Services Section - Remove top/bottom padding */
.section-services {
    padding-top: 0;
    padding-bottom: 0;
    background: 
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(128, 128, 128, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.1) 0%, transparent 70%),
        linear-gradient(135deg, rgba(0, 0, 0, 0.95) 0%, rgba(26, 26, 26, 0.98) 50%, rgba(42, 42, 42, 0.95) 100%);
    background-attachment: fixed;
    position: relative;
}

/* Add subtle texture overlay for dark grey - within same color, not prominent */
.section-services::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(255, 255, 255, 0.03) 2px,
            rgba(255, 255, 255, 0.03) 4px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 2px,
            rgba(255, 255, 255, 0.03) 2px,
            rgba(255, 255, 255, 0.03) 4px
        );
    background-size: 48px 48px;
    pointer-events: none;
    z-index: 0;
}

/* Services Container - Ensure it's above background */
.div-services-container {
    position: relative;
    z-index: 1;
}

/* Services Title - Bigger font, overlaps images (z above images wrapper) */
.div-services-title-wrapper {
    z-index: 20;
}
/* Services title: 3x base, reduced by 15% (12.075rem * 0.85 = 10.26375rem). Scoped + wrapper selector so Tailwind cannot override. */
.section-services .div-services-title-wrapper .h2-services-title {
    font-size: 10.26375rem;
}

@media (max-width: 767px) {
    /* Proportional downscale of service tiles: same % positions and float motion as desktop, smaller px boxes */
    .section-services {
        --services-mob-scale: 0.46;
        overflow-x: clip;
    }

    .section-services .div-services-title-wrapper {
        max-width: 90vw;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }

    .section-services .div-services-title-wrapper .h2-services-title {
        font-size: clamp(2.6125rem, calc((90vw - 1rem) / 4.05 * 0.95), 5.4625rem);
        line-height: 0.98;
        letter-spacing: -0.03em;
        max-width: 100%;
    }

    .section-services .div-services-images-wrapper {
        transform: scale(var(--services-mob-scale));
        transform-origin: center center;
        width: 100%;
        max-width: 100%;
        left: 0;
        right: 0;
    }

    /* Home services tile titles (ref-home-services-span-label-* in markup): stronger presence on small screens */
    .section-services .span-service-label {
        font-size: clamp(1.5rem, 5.75vw, 1.8125rem);
        font-weight: 600;
        line-height: 1.28;
        letter-spacing: 0.04em;
        padding: 0.35rem 0.65rem;
        max-width: min(16rem, 90vw);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-shadow:
            0 0.06em 0.2em rgba(0, 0, 0, 0.85),
            0 0.02em 0.08em rgba(0, 0, 0, 0.5);
    }

    .section-services .div-service-image-1 {
        top: 160%;
        left: 60%;
    }

    .section-services .div-service-image-2 {
        top: 158%;
        right: -56%;
    }

    .section-services .div-service-image-3 {
        top: -182%;
        right: 9%;
    }

    .section-services .div-service-image-4 {
        bottom: 212%;
        right: -47%;
    }

    .section-services .div-service-image-5 {
        bottom: 200%;
        left: -7%;
    }

    .section-services .div-service-image-6 {
        bottom: -430%;
        left: -46%;
    }
}

/* Portfolio Section - White background, full width */
.section-portfolio {
    background-color: #ffffff;
    width: 100%;
}

/* Portfolio Container */
.div-portfolio-container {
    position: relative;
}

/* Portfolio Content Wrapper - Two columns layout */
.div-portfolio-content-wrapper {
    display: flex;
    gap: 3rem;
}

/* Portfolio Left Column - 25% width */
.div-portfolio-left-column {
    flex: 0 0 25%;
    width: 25%;
}

/* Portfolio Short Title Link - Small font, all caps */
.link-portfolio-short-title {
    display: block;
    margin-bottom: 1rem;
    width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.span-portfolio-short-title-text {
    font-size: 0.875rem;
    line-height: 1.25rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #4F5053;
    font-weight: 600;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Portfolio Main Title - Big, most prominent (casing from markup) */
.h2-portfolio-main-title {
    margin-bottom: 1.5rem;
}

.span-portfolio-main-title-text {
    font-size: 2rem;
    line-height: 1.1;
    font-weight: 600;
    text-transform: none;
    letter-spacing: -0.02em;
    color: #000000;
    display: block;
}

@media (min-width: 768px) {
    .span-portfolio-main-title-text {
        font-size: 2.5rem;
    }
}

@media (min-width: 1024px) {
    .span-portfolio-main-title-text {
        font-size: 3rem;
    }
}

/* Portfolio Description - Small, less prominent */
.p-portfolio-description {
    margin: 0;
}

.span-portfolio-description-text {
    font-size: 1rem;
    line-height: 1.6;
    color: #7A7C80;
    font-weight: 300;
}

/* Blog Section - White background, full width */
.section-blog {
    background-color: #ffffff;
    width: 100%;
    border-top: 1px solid rgba(225, 226, 228, 0.5);
}

/* Footer Section - Similar to header styling */
.section-footer {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);
}

/* Footer Container */
.div-footer-container {
    position: relative;
    padding-top: 4rem;
    padding-bottom: 4rem;
}

/* Footer Content */
.div-footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
}

/* Footer Logo Section */
.div-footer-logo-section {
    display: flex;
    justify-content: center;
}

/* Footer Navigation - Centered */
.nav-footer {
    display: flex;
    justify-content: center;
}

/* Footer Logo */
.link-footer-logo-home {
    display: block;
}

.div-footer-logo-wrapper {
    display: block;
}

.img-footer-logo {
    display: block;
    opacity: 0.5;
    transition: opacity 0.3s ease-out;
}

.link-footer-logo-home:hover .img-footer-logo {
    opacity: 0.75;
}

/* Footer Navigation */
.nav-footer {
    display: block;
}

.div-footer-nav-container {
    display: flex;
    gap: 2rem;
}

.link-footer-nav-home,
.link-footer-nav-about,
.link-footer-nav-portfolio,
.link-footer-nav-blog,
.link-footer-nav-contact {
    position: relative;
    display: inline-block;
}

.span-footer-nav-text {
    display: inline-block;
}

.div-footer-nav-underline {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0.125rem;
    background-color: #ffffff;
    transform: scaleX(0);
    transition: transform 0.3s ease-out;
}

.link-footer-nav-home:hover .div-footer-nav-underline,
.link-footer-nav-about:hover .div-footer-nav-underline,
.link-footer-nav-portfolio:hover .div-footer-nav-underline,
.link-footer-nav-blog:hover .div-footer-nav-underline,
.link-footer-nav-contact:hover .div-footer-nav-underline {
    background-color: #DCAF47;
}

/* Footer primary nav (ref-*-footer-nav-links): proportional downscale on small screens only */
@media (max-width: 767px) {
    .section-footer .nav-footer .div-footer-nav-container {
        gap: 1.25rem;
        row-gap: 0.625rem;
        flex-wrap: wrap;
        justify-content: center;
    }

    .section-footer .nav-footer .div-footer-nav-container > a {
        font-size: 0.8125rem;
        line-height: 1.2;
        letter-spacing: -0.02em;
    }

    .section-footer .nav-footer .span-footer-nav-text {
        font-size: inherit;
        line-height: inherit;
    }

    .section-footer .nav-footer .div-footer-nav-underline {
        height: 0.0625rem;
    }
}

/* Footer Social Section */
.div-footer-social-section {
    display: flex;
    justify-content: center;
}

/* Footer Social Media Links */
.div-footer-social-media-links {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.link-footer-social-twitter,
.link-footer-social-instagram,
.link-footer-social-youtube,
.link-footer-social-pinterest,
.link-footer-social-linkedin,
.link-footer-social-vk,
.link-footer-social-facebook,
.link-footer-social-tiktok,
.link-footer-social-github,
.link-footer-social-dribbble,
.link-footer-social-behance,
.link-footer-social-snapchat,
.link-footer-social-discord,
[class*="link-footer-social-"] {
    display: inline-block;
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.link-footer-social-twitter:hover,
.link-footer-social-instagram:hover,
.link-footer-social-youtube:hover,
.link-footer-social-pinterest:hover,
.link-footer-social-linkedin:hover,
.link-footer-social-vk:hover,
.link-footer-social-facebook:hover,
.link-footer-social-tiktok:hover,
.link-footer-social-github:hover,
.link-footer-social-dribbble:hover,
.link-footer-social-behance:hover,
.link-footer-social-snapchat:hover,
.link-footer-social-discord:hover,
[class*="link-footer-social-"]:hover {
    transform: translateY(-2px);
}

/* Footer Copyright Section */
.div-footer-copyright-section {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

.p-footer-copyright-text {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.3);
    font-weight: 300;
    letter-spacing: 0.025em;
}

.span-footer-copyright-symbol,
.span-footer-copyright-year,
.span-footer-copyright-name,
.span-footer-copyright-rights {
    display: inline-block;
}

/* Blog Container */
.div-blog-container {
    position: relative;
}

/* Blog Content Wrapper - Two columns layout */
.div-blog-content-wrapper {
    display: flex;
    gap: 3rem;
}

/* Blog Left Column */
.div-blog-left-column {
    flex: 0 0 50%;
    width: 50%;
}

/* Blog Short Title Wrapper */
.div-blog-short-title-wrapper {
    margin-bottom: 1rem;
}

.span-blog-short-title-text {
    font-size: 0.875rem;
    line-height: 1.25rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #4F5053;
    font-weight: 600;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Blog Main Title */
.h2-blog-main-title {
    margin-bottom: 1.5rem;
}

.span-blog-main-title-text {
    font-size: 2rem;
    line-height: 1.1;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    color: #000000;
    display: block;
}

@media (min-width: 768px) {
    .span-blog-main-title-text {
        font-size: 2.5rem;
    }
}

@media (min-width: 1024px) {
    .span-blog-main-title-text {
        font-size: 3rem;
    }
}

/* Blog Right Column */
.div-blog-right-column {
    flex: 0 0 50%;
    width: 50%;
    justify-content: flex-start;
    align-items: flex-start;
}

/* Blog Description */
.p-blog-description {
    margin: 0;
}

.span-blog-description-text {
    font-size: 1rem;
    line-height: 1.6;
    color: #7A7C80;
    font-weight: 300;
}

/* Blog Posts Wrapper - Two columns layout */
.div-blog-posts-wrapper {
    display: flex;
    gap: 3rem;
}

/* Blog Post Column */
.div-blog-post-column {
    flex: 0 0 50%;
    width: 50%;
}

/* Right column - Start from a bit down */
.div-blog-post-column:nth-child(2) {
    margin-top: 6rem;
}

/* Blog Post Link - Full block link */
.link-blog-post {
    display: block;
    width: 100%;
    text-decoration: none;
    color: inherit;
}

/* Blog Post Card */
.div-blog-post-card {
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* Blog Post Image Wrapper */
.div-blog-post-image-wrapper {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    position: relative;
    background-color: #f5f5f5;
    margin-bottom: 1.5rem;
}

.img-blog-post-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(50%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), filter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
    will-change: transform;
}

/* Scale image on hover - 10% larger */
.link-blog-post:hover .img-blog-post-image {
    transform: scale(1.10);
    filter: grayscale(0%);
}

/* Blog Post Title Wrapper */
.div-blog-post-title-wrapper {
    margin: 0;
}

.h3-blog-post-title {
    margin: 0;
}

.span-blog-post-title-text {
    font-size: 1.5rem;
    line-height: 1.4;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    color: #000000;
    display: block;
}

@media (min-width: 768px) {
    .span-blog-post-title-text {
        font-size: 1.75rem;
    }
}

@media (min-width: 1024px) {
    .span-blog-post-title-text {
        font-size: 2rem;
    }
}

/* Portfolio Right Column - 70% width */
.div-portfolio-right-column {
    flex: 0 0 70%;
    width: 70%;
}

/* Portfolio Carousel Wrapper */
.div-portfolio-carousel-wrapper {
    position: relative;
    width: 100%;
}

/* Portfolio Carousel Container - Overflow hidden for carousel effect */
.div-portfolio-carousel-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* Portfolio Carousel Track - Flex container for cards */
.div-portfolio-carousel-track {
    display: flex;
    gap: 1.5rem;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

/* Portfolio Card - 1:1 ratio square cards */
.div-portfolio-card {
    flex: 0 0 calc(50% - 0.75rem);
    width: calc(50% - 0.75rem);
    display: flex;
    flex-direction: column;
    aspect-ratio: 1 / 1;
}

@media (max-width: 1024px) {
    .div-portfolio-card {
        flex: 0 0 calc(50% - 0.75rem);
        width: calc(50% - 0.75rem);
    }
}

@media (max-width: 768px) {
    .div-portfolio-card {
        flex: 0 0 100%;
        width: 100%;
    }
}

/* Portfolio CTA Button */
.link-portfolio-cta.button-portfolio-cta {
    display: inline-block;
    width: auto;
    margin-top: 2rem;
    padding: 1rem 2rem;
    background-color: #000000;
    color: #ffffff;
    text-decoration: none;
    border-radius: 0;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
    border: 1px solid transparent;
}

.button-portfolio-cta:hover {
    background-color: #1a1a1a;
    border-color: #DCAF47;
}

.span-portfolio-cta-text {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Portfolio Card Image Wrapper - 1:1 ratio */
.div-portfolio-card-image-wrapper {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    position: relative;
    background-color: #f5f5f5;
}

.img-portfolio-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(50%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), filter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
    will-change: transform;
}

/* Scale image on card hover - 10% larger */
.div-portfolio-card:hover .img-portfolio-card-image {
    transform: scale(1.10);
    filter: grayscale(0%);
}

/* Portfolio Card Title Wrapper - Below image, left aligned */
.div-portfolio-card-title-wrapper {
    margin-top: 1rem;
    text-align: left;
}

.span-portfolio-card-title {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #000000;
    display: block;
}

/* Portfolio Carousel Navigation */
.div-portfolio-carousel-navigation {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-start;
    margin-top: 1.5rem;
}

.button-portfolio-carousel-prev,
.button-portfolio-carousel-next {
    width: 3.5rem;
    height: 3.5rem;
    border: 1px solid rgba(0, 0, 0, 0.3);
    background-color: transparent;
    color: #000000;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-out;
    border-radius: 0;
}

.button-portfolio-carousel-prev:hover,
.button-portfolio-carousel-next:hover {
    background-color: #000000;
    color: #ffffff;
    border-color: #DCAF47;
}

.button-portfolio-carousel-prev:disabled,
.button-portfolio-carousel-next:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.button-portfolio-carousel-prev i,
.button-portfolio-carousel-next i {
    font-size: 1.75rem;
}

/* Services Images Wrapper - On top of title so mouse hover on images works */
.div-services-images-wrapper {
    z-index: 30;
}

/* Service Image Wrapper Base Styles */
/* 1:1 dimensions randomly between 260x260 and 320x320px per image; base 320px */
/* Transform transition for very smooth scale in/out on hover (JS drives hover; this is fallback) */
.div-service-image-wrapper {
    transform-origin: center;
    will-change: transform, width, height, margin;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    width: 320px;
    height: 320px;
    margin: 0;
    transition: transform 0.95s cubic-bezier(0.33, 1, 0.68, 1), width 0.55s cubic-bezier(0.25, 0.1, 0.25, 1), height 0.55s cubic-bezier(0.25, 0.1, 0.25, 1), margin-left 0.55s cubic-bezier(0.25, 0.1, 0.25, 1), margin-top 0.55s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Position images in oval shape; each 1:1 with random size between 260px and 320px */
.div-service-image-1 {
    top: 100%;
    left: 36%;
    transform: translateX(-50%);
    width: 255px;
    height: 255px;
    margin-left: -26px;
    margin-top: -26px;
}

.div-service-image-2 {
    top: 18%;
    right: 2%;
    width: 314px;
    height: 314px;
}

.div-service-image-3 {
    top: 138%;
    right: 28%;
    transform: translateY(-50%);
    width: 294px;
    height: 294px;
    margin-left: -24px;
    margin-top: -24px;
}

.div-service-image-4 {
    bottom: 92%;
    right: 20%;
    width: 269px;
    height: 269px;
}

.div-service-image-5 {
    bottom: 100%;
    left: 43%;
    transform: translateX(-50%);
    width: 320px;
    height: 320px;
    margin-left: -12px;
    margin-top: -12px;
}

.div-service-image-6 {
    bottom: 40%;
    left: 6%;
    width: 276px;
    height: 276px;
}

.div-service-image-7 {
    top: 50%;
    left: -3%;
    transform: translateY(-50%);
    width: 312px;
    height: 312px;
    margin-left: -4px;
    margin-top: -4px;
}

.div-service-image-8 {
    top: 78%;
    left: 17%;
    width: 320px;
    height: 320px;
}

/* CSS-only hover: scale up ~20px from center; animation: none so our transform wins over keyframes */
.div-service-image-wrapper:hover {
    animation: none;
    z-index: 10;
    overflow: hidden;
    transform: scale(1.0625);
}

/* Preserve positioning translate so zoom stays centered */
.div-service-image-1:hover {
    animation: none;
    overflow: hidden;
    transform: translateX(-50%) scale(1.0625);
}

.div-service-image-2:hover {
    animation: none;
    overflow: hidden;
    transform: scale(1.0625);
}

.div-service-image-3:hover {
    animation: none;
    overflow: hidden;
    transform: translateY(-50%) scale(1.0625);
}

.div-service-image-4:hover {
    animation: none;
    overflow: hidden;
    transform: scale(1.0625);
}

.div-service-image-5:hover {
    animation: none;
    overflow: hidden;
    transform: translateX(-50%) scale(1.0625);
}

.div-service-image-6:hover {
    animation: none;
    overflow: hidden;
    transform: scale(1.0625);
}

.div-service-image-7:hover {
    animation: none;
    overflow: hidden;
    transform: translateY(-50%) scale(1.0625);
}

.div-service-image-8:hover {
    animation: none;
    overflow: hidden;
    transform: scale(1.0625);
}

/* Scale images inside wrapper on hover to match wrapper scaling */
/* Smooth zoom-in and zoom-out transitions for images */
.div-service-image-wrapper .img-service-image-1,
.div-service-image-wrapper .img-service-image-2,
.div-service-image-wrapper .img-service-image-3,
.div-service-image-wrapper .img-service-image-4,
.div-service-image-wrapper .img-service-image-5,
.div-service-image-wrapper .img-service-image-6,
.div-service-image-wrapper .img-service-image-7,
.div-service-image-wrapper .img-service-image-8 {
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), height 0.4s cubic-bezier(0.4, 0, 0.2, 1), filter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Inner img: no size change on hover; wrapper scale(1.0625) ~20px larger from center (320 base) */
.div-service-image-wrapper:hover .img-service-image-1,
.div-service-image-wrapper:hover .img-service-image-2,
.div-service-image-wrapper:hover .img-service-image-3,
.div-service-image-wrapper:hover .img-service-image-4,
.div-service-image-wrapper:hover .img-service-image-5,
.div-service-image-wrapper:hover .img-service-image-6,
.div-service-image-wrapper:hover .img-service-image-7,
.div-service-image-wrapper:hover .img-service-image-8 {
    filter: grayscale(0%);
}

/* Apply same floating animations to wrappers so labels move with images - very slow, random durations */
.div-service-image-1 {
    animation: float-service-1 28s ease-in-out infinite;
}

.div-service-image-2 {
    animation: float-service-2 32s ease-in-out infinite;
}

.div-service-image-3 {
    animation: float-service-3 26s ease-in-out infinite;
}

.div-service-image-4 {
    animation: float-service-4 30s ease-in-out infinite;
}

.div-service-image-5 {
    animation: float-service-5 24s ease-in-out infinite;
}

.div-service-image-6 {
    animation: float-service-6 31s ease-in-out infinite;
}

.div-service-image-7 {
    animation: float-service-7 27s ease-in-out infinite;
}

.div-service-image-8 {
    animation: float-service-8 29s ease-in-out infinite;
}

/* Service Image Labels - Positioned at bottom center */
.span-service-label {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 1.010625rem;
    line-height: 1.44375rem;
    white-space: nowrap;
    padding: 0.28875rem 0.5775rem;
    z-index: 5;
}

/* Hover transform lock - transforms are stopped via JavaScript when hovering */

/* Connect Slogan Animation Styles */
.span-slogan-connect {
    display: block;
    letter-spacing: 0;
    word-spacing: 0;
    font-size: 0;
    line-height: 1;
    margin-bottom: 0.75rem;
}

.span-slogan-connect .span-char-item {
    display: inline-block;
    position: relative;
    opacity: 0;
    transform: translateY(50%);
    letter-spacing: 0;
    word-spacing: 0;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    font-size: 97.2px;
    line-height: inherit;
    font-weight: bold;
    text-transform: uppercase;
    color: #ffffff;
}

@media (min-width: 768px) {
    .span-slogan-connect .span-char-item {
        font-size: 129.6px;
    }
}

@media (min-width: 1024px) {
    .span-slogan-connect .span-char-item {
        font-size: 172.8px;
    }
}

.span-slogan-connect.span-connect-loaded .span-char-item {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 1.08s ease-in-out, transform 1.08s ease-in-out;
}

.span-slogan-connect.span-connect-loaded .span-char-item-1 { transition-delay: 0.072s; }
.span-slogan-connect.span-connect-loaded .span-char-item-2 { transition-delay: 0.18s; }
.span-slogan-connect.span-connect-loaded .span-char-item-3 { transition-delay: 0.288s; }
.span-slogan-connect.span-connect-loaded .span-char-item-4 { transition-delay: 0.396s; }
.span-slogan-connect.span-connect-loaded .span-char-item-5 { transition-delay: 0.504s; }
.span-slogan-connect.span-connect-loaded .span-char-item-6 { transition-delay: 0.612s; }
.span-slogan-connect.span-connect-loaded .span-char-item-7 { transition-delay: 0.72s; }

/* Explore Slogan Animation Styles */
.span-slogan-explore {
    display: block;
    letter-spacing: 0;
    word-spacing: 0;
    font-size: 0;
    line-height: 1;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: -28.88px;
    margin-bottom: 0.75rem;
}

.span-slogan-explore .span-explore-char {
    display: inline-block;
    position: relative;
    opacity: 0;
    transform: translateY(50%);
    letter-spacing: 0;
    word-spacing: 0;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    font-size: 78.53517px;
    line-height: inherit;
    font-weight: bold;
    text-transform: uppercase;
    color: #ffffff;
}

@media (min-width: 768px) {
    .span-slogan-explore .span-explore-char {
        font-size: 104.71356px;
    }
}

@media (min-width: 1024px) {
    .span-slogan-explore .span-explore-char {
        font-size: 139.61808px;
    }
}

.span-slogan-explore.span-explore-loaded .span-explore-char {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 1.08s ease-in-out, transform 1.08s ease-in-out;
}

.span-slogan-explore.span-explore-loaded .span-explore-char-1 { transition-delay: 0.072s; }
.span-slogan-explore.span-explore-loaded .span-explore-char-2 { transition-delay: 0.18s; }
.span-slogan-explore.span-explore-loaded .span-explore-char-3 { transition-delay: 0.288s; }
.span-slogan-explore.span-explore-loaded .span-explore-char-4 { transition-delay: 0.396s; }
.span-slogan-explore.span-explore-loaded .span-explore-char-5 { transition-delay: 0.504s; }
.span-slogan-explore.span-explore-loaded .span-explore-char-6 { transition-delay: 0.612s; }
.span-slogan-explore.span-explore-loaded .span-explore-char-7 { transition-delay: 0.72s; }

/* Design Slogan Animation Styles */
.span-slogan-design {
    display: block;
    letter-spacing: 0;
    word-spacing: 0;
    font-size: 0;
    line-height: 1;
    margin-top: -28.88px;
}

.span-slogan-design .span-design-char {
    display: inline-block;
    position: relative;
    opacity: 0;
    transform: translateY(50%);
    letter-spacing: 0;
    word-spacing: 0;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    font-size: 97.2px;
    line-height: inherit;
    font-weight: bold;
    text-transform: uppercase;
    color: #ffffff;
}

@media (min-width: 768px) {
    .span-slogan-design .span-design-char {
        font-size: 129.6px;
    }
}

@media (min-width: 1024px) {
    .span-slogan-design .span-design-char {
        font-size: 172.8px;
    }
}

.span-slogan-design.span-design-loaded .span-design-char {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 1.08s ease-in-out, transform 1.08s ease-in-out;
}

.span-slogan-design.span-design-loaded .span-design-char-1 { transition-delay: 0.072s; }
.span-slogan-design.span-design-loaded .span-design-char-2 { transition-delay: 0.18s; }
.span-slogan-design.span-design-loaded .span-design-char-3 { transition-delay: 0.288s; }
.span-slogan-design.span-design-loaded .span-design-char-4 { transition-delay: 0.396s; }
.span-slogan-design.span-design-loaded .span-design-char-5 { transition-delay: 0.504s; }
.span-slogan-design.span-design-loaded .span-design-char-6 { transition-delay: 0.612s; }

/* Home hero slogan (h1 + per-char spans): compact for small viewports, fit width with side inset */
@media (max-width: 767px) {
    .section-hero-slogan {
        padding-left: max(0.75rem, env(safe-area-inset-left));
        padding-right: max(0.75rem, env(safe-area-inset-right));
        box-sizing: border-box;
    }

    .h1-hero-slogan {
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
    }

    .span-slogan-connect {
        margin-bottom: 0.375rem;
    }

    .span-slogan-connect .span-char-item {
        font-size: max(1.25rem, min(1.875rem, calc((100vw - 2rem) / 7.5)));
    }

    .span-slogan-explore {
        margin-top: max(-0.5rem, calc((100vw - 2rem) * -0.02));
        margin-bottom: 0.375rem;
    }

    .span-slogan-explore .span-explore-char {
        font-size: max(1.125rem, min(1.6875rem, calc((100vw - 2rem) / 7.75)));
    }

    .span-slogan-design {
        margin-top: max(-0.5rem, calc((100vw - 2rem) * -0.02));
    }

    .span-slogan-design .span-design-char {
        font-size: max(1.25rem, min(1.875rem, calc((100vw - 2rem) / 6.75)));
    }
}

/* Popup Menu Styles */
.div-popup-menu-overlay {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    z-index: 9999;
    pointer-events: none;
    overflow: hidden;
}

.div-popup-menu {
    position: absolute;
    top: 0;
    right: 0;
    width: 400px;
    height: 100vh;
    background-color: #ffffff;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.1);
}

.div-popup-menu-overlay.menu-open .div-popup-menu {
    transform: translateX(0);
}

/* Mobile: full-viewport panel; slide in from right (RTL motion), out to right on close — smooth easing */
@media (max-width: 767px) {
    .div-popup-menu {
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        min-height: 100%;
        border-radius: 0;
        box-shadow: none;
        transform: translateX(100%);
        transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .div-popup-menu-overlay.menu-open .div-popup-menu {
        transform: translateX(0);
    }
}

/* Popup Menu Header */
.div-popup-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2.5rem 2.5rem 2rem 2.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

@media (max-width: 767px) {
    /* Popup header (ref-*-popup-div-header): less vertical padding; must follow base rule so it wins in cascade */
    .div-popup-menu-header {
        padding: 0.5rem 1rem;
        gap: 0.375rem;
        flex-wrap: nowrap;
    }

    .div-popup-menu-header .div-popup-menu-logo,
    .div-popup-menu-header .link-popup-menu-logo-home,
    .div-popup-menu-header .div-popup-menu-logo-wrapper {
        line-height: 0;
    }
}

.div-popup-menu-logo {
    display: flex;
    align-items: center;
}

.link-popup-menu-logo-home {
    display: block;
}

.div-popup-menu-logo-wrapper {
    display: block;
}

.img-popup-menu-logo {
    display: block;
}

.button-popup-menu-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 767px) {
    .div-popup-menu .button-popup-menu-close {
        padding: 0.125rem;
    }
}

/* Popup Menu Content */
.div-popup-menu-content {
    flex: 1;
    padding: 2.5rem 2.5rem;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* Popup Menu Social Media Links */
.div-popup-menu-social-media-links {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: stretch;
    width: 100%;
}

.link-popup-menu-social-twitter,
.link-popup-menu-social-instagram,
.link-popup-menu-social-youtube,
.link-popup-menu-social-pinterest,
.link-popup-menu-social-linkedin,
.link-popup-menu-social-vk,
.link-popup-menu-social-facebook,
.link-popup-menu-social-tiktok,
.link-popup-menu-social-github,
.link-popup-menu-social-dribbble,
.link-popup-menu-social-behance,
.link-popup-menu-social-snapchat,
.link-popup-menu-social-discord,
[class*="link-popup-menu-social-"] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    padding: 0.75rem 0;
    transition: transform 0.3s ease-out;
    width: 100%;
}

.span-popup-menu-social-label {
    display: inline-block;
    font-size: 1rem;
    font-weight: 500;
    color: inherit;
    transition: color 0.3s ease-out;
    flex: 1;
}

.link-popup-menu-social-twitter:hover,
.link-popup-menu-social-instagram:hover,
.link-popup-menu-social-youtube:hover,
.link-popup-menu-social-pinterest:hover,
.link-popup-menu-social-linkedin:hover,
.link-popup-menu-social-vk:hover,
.link-popup-menu-social-facebook:hover,
.link-popup-menu-social-tiktok:hover,
.link-popup-menu-social-github:hover,
.link-popup-menu-social-dribbble:hover,
.link-popup-menu-social-behance:hover,
.link-popup-menu-social-snapchat:hover,
.link-popup-menu-social-discord:hover,
[class*="link-popup-menu-social-"]:hover {
    transform: translateX(4px);
    color: #DCAF47;
}

.button-popup-menu-close:hover {
    color: #DCAF47;
}

/* Menu Toggle Button */
.button-menu-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* About Page Styles */

/* About Hero Section */
.section-about-hero {
    background-color: #F6F7F8;
    min-height: 80vh;
}

.div-about-hero-container {
    position: relative;
}

.div-about-hero-content {
    display: flex;
    align-items: center;
}

.div-about-hero-image-wrapper {
    position: relative;
    min-height: 500px;
}

/* First Image - Portrait, Middle of Container */
.div-about-hero-image-1-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.div-about-hero-image-1 {
    position: relative;
    width: 100%;
    max-width: 28rem;
    z-index: 1;
}

.img-about-hero-1 {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    aspect-ratio: 3 / 4;
    filter: grayscale(50%);
    transition: filter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.div-about-hero-image-1:hover .img-about-hero-1 {
    filter: grayscale(0%);
}

/* Second Image - Small, Top Right Overlay */
.div-about-hero-image-2-wrapper {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 10;
}

.div-about-hero-image-2 {
    position: relative;
    width: 12rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

@media (min-width: 768px) {
    .div-about-hero-image-2 {
        width: 14rem;
    }
}

@media (min-width: 1024px) {
    .div-about-hero-image-2 {
        width: 16rem;
    }
}

.img-about-hero-2 {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    aspect-ratio: 3 / 4;
    filter: grayscale(50%);
    transition: filter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.div-about-hero-image-2:hover .img-about-hero-2 {
    filter: grayscale(0%);
}

/* About hero image stack (ref-*-about-hero-image-wrapper): mobile — proportional downscale, same overlay geometry as desktop, fit viewport with side inset */
@media (max-width: 767px) {
    .section-about-hero .div-about-hero-image-wrapper {
        min-height: auto;
        width: 100%;
        max-width: min(100%, calc(100vw - 1.5rem));
        margin-left: auto;
        margin-right: auto;
        padding-left: max(0.5rem, env(safe-area-inset-left, 0px));
        padding-right: max(0.5rem, env(safe-area-inset-right, 0px));
        box-sizing: border-box;
    }

    .section-about-hero .div-about-hero-image-1-wrapper {
        justify-content: center;
    }

    /* ~85% of desktop 28rem cap; never wider than viewport minus gutters */
    .section-about-hero .div-about-hero-image-1 {
        max-width: min(23.8rem, calc(100vw - 2.5rem));
        width: 100%;
    }

    /* Same vertical center + trailing edge alignment as desktop; slight inset from wrapper edge */
    .section-about-hero .div-about-hero-image-2-wrapper {
        top: 50%;
        right: 0.375rem;
        transform: translateY(-50%);
    }

    /* ~85% of 12rem (mobile / base) to match reduced primary portrait */
    .section-about-hero .div-about-hero-image-2 {
        width: 10.2rem;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    }
}

.div-about-hero-text-wrapper {
    display: flex;
    flex-direction: column;
}

.div-about-short-title-wrapper {
    margin-bottom: 1rem;
}

.span-about-short-title {
    display: inline-block;
    font-size: 0.875rem;
    line-height: 1.25rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #4F5053;
    font-weight: 600;
}

.h1-about-main-title {
    margin-bottom: 1.5rem;
    line-height: 1.1;
    font-weight: 600;
    text-transform: uppercase;
    color: #4F5053;
}

.div-about-description {
    margin-bottom: 2rem;
}

.p-about-description-text {
    font-size: 1.125rem;
    line-height: 1.75;
    color: #7A7C80;
    font-weight: 400;
}

.div-about-social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.link-about-social-twitter,
.link-about-social-instagram,
.link-about-social-youtube,
.link-about-social-pinterest,
.link-about-social-linkedin,
.link-about-social-facebook,
.link-about-social-tiktok,
.link-about-social-github,
.link-about-social-dribbble,
.link-about-social-behance,
[class*="link-about-social-"] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.3s ease-out;
}

.span-about-social-label {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 500;
}

/* About Scrolling Text Section */
.section-about-scrolling-text {
    background-color: #F6F7F8;
    overflow: hidden;
}

.div-about-scrolling-wrapper {
    width: 100%;
    max-width: 100%;
    position: relative;
    overflow: hidden;
}

.div-about-scrolling-content {
    position: relative;
    left: 0;
    right: 0;
}

.span-scrolling-text-item {
    opacity: 0.35;
    filter: blur(0.5px);
    transition: opacity 0.3s ease-out, filter 0.3s ease-out;
    font-weight: 400;
}

.span-scrolling-text-separator {
    opacity: 0.2;
    filter: blur(0.5px);
}

/* About Video Section */
.section-about-video {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.div-about-video-wrapper {
    width: 100%;
    position: relative;
}

.div-about-video-container {
    width: 100%;
    position: relative;
    aspect-ratio: 16 / 9;
    min-height: 400px;
    max-height: 80vh;
    background-color: #000000;
    cursor: none;
    overflow: hidden;
}

.iframe-about-video {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: none;
    margin: 0 auto;
    display: none;
    z-index: 15;
}

.iframe-about-video.show {
    display: block !important;
    z-index: 15;
    pointer-events: auto;
}

.div-about-video-cover {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    background-color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: none;
    z-index: 10;
}

.div-about-video-cover.hidden {
    display: none !important;
    pointer-events: none;
    z-index: 0;
}

.img-about-video-thumbnail {
    width: 100%;
    height: 120%;
    object-fit: cover;
    object-position: center;
    display: block;
    opacity: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    filter: grayscale(50%);
    transition: opacity 0.3s ease-out, filter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.div-about-video-container:hover .img-about-video-thumbnail {
    filter: grayscale(0%);
}

.div-about-video-play-button {
    position: absolute;
    z-index: 20;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: transform 0.1s ease-out;
}

.div-about-video-play-circle {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background-color: #DCAF47;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease-out, transform 0.2s ease-out;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.div-about-video-play-circle:hover {
    background-color: #B89438;
    transform: scale(1.1);
}

.span-about-video-play-text {
    color: #4F5053;
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Video Loader */
.div-about-video-loader {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 30;
    pointer-events: none;
    background-color: transparent;
}

.div-about-video-loader.hidden {
    display: none !important;
}

.div-about-video-loader-spinner {
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid rgba(188, 189, 192, 0.3);
    border-top-color: rgba(220, 175, 71, 0.6);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Hide cursor when hovering over video container */
.div-about-video-container:hover {
    cursor: none;
}

.div-about-video-container * {
    cursor: none;
}

/* Responsive video height */
@media (max-width: 768px) {
    .div-about-video-container {
        aspect-ratio: 16 / 9;
        min-height: 300px;
        max-height: 70vh;
    }
}

/* About Awards Media - ref-about-awards-media video (loading + play UX) */
.div-about-awards-video-container {
    position: absolute;
    inset: 0;
    background-color: #000000;
    cursor: pointer;
    overflow: hidden;
}

.video-about-awards-video {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    object-fit: cover;
}

.div-about-awards-video-cover {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    background-color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
}

.div-about-awards-video-cover.hidden {
    display: none !important;
    pointer-events: none;
    z-index: 0;
}

.div-about-awards-video-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
    pointer-events: none;
}

.div-about-awards-video-play-circle {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background-color: #DCAF47;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease-out;
}

.div-about-awards-video-play-circle:hover {
    background-color: #B89438;
}

.span-about-awards-video-play-text {
    color: #4F5053;
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.div-about-awards-video-loader {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 30;
    pointer-events: none;
    background-color: transparent;
}

.div-about-awards-video-loader.hidden {
    display: none !important;
}

.div-about-awards-video-loader-spinner {
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid rgba(188, 189, 192, 0.3);
    border-top-color: rgba(220, 175, 71, 0.6);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* About Newsletter Section */
.section-about-newsletter {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.div-about-newsletter-background {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #F6F7F8 0%, #ffffff 50%, #F6F7F8 100%);
    z-index: 0;
}

.div-about-newsletter-pattern {
    position: absolute;
    inset: 0;
    background-image: 
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(79, 80, 83, 0.02) 2px,
            rgba(79, 80, 83, 0.02) 4px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 2px,
            rgba(79, 80, 83, 0.02) 2px,
            rgba(79, 80, 83, 0.02) 4px
        );
    background-size: 40px 40px;
    z-index: 1;
}

.div-about-newsletter-container {
    position: relative;
    z-index: 10;
}

.div-about-newsletter-content {
    max-width: 64rem;
    margin-left: auto;
    margin-right: auto;
}

.div-about-newsletter-header {
    text-align: center;
    margin-bottom: 4rem;
}

.div-about-newsletter-short-title-wrapper {
    margin-bottom: 1rem;
}

.span-about-newsletter-short-title {
    display: inline-block;
    font-size: 0.875rem;
    line-height: 1.25rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #4F5053;
    font-weight: 600;
}

.h2-about-newsletter-title {
    margin-bottom: 1.5rem;
    line-height: 1.1;
    font-weight: 600;
}

.p-about-newsletter-description {
    font-size: 1.125rem;
    line-height: 1.75;
    color: #7A7C80;
    font-weight: 400;
    max-width: 32rem;
    margin-left: auto;
    margin-right: auto;
}

.div-about-newsletter-form-wrapper {
    position: relative;
}

.form-about-newsletter {
    display: block;
}

.div-newsletter-form-card {
    background-color: #ffffff;
    border: 1px solid #E1E2E4;
    padding: 2rem;
    border-radius: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.2s ease-out, border-color 0.2s ease-out;
}

.div-newsletter-form-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: #DCAF47;
}

.div-newsletter-input-group {
    margin-bottom: 1.5rem;
}

.label-newsletter-email {
    display: block;
    color: #4F5053;
    font-weight: 500;
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
}

.div-newsletter-input-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (min-width: 640px) {
    .div-newsletter-input-wrapper {
        flex-direction: row;
    }
}

.div-newsletter-input-container {
    flex: 1;
    position: relative;
}

.input-newsletter-email {
    width: 100%;
    padding: 1rem 1.5rem;
    border: 1px solid #E1E2E4;
    background-color: #ffffff;
    color: #4F5053;
    font-size: 1rem;
    transition: all 0.2s ease-out;
}

.input-newsletter-email::placeholder {
    color: #BCBDC0;
}

.input-newsletter-email:focus {
    outline: none;
    border-color: #DCAF47;
    box-shadow: 0 0 0 2px rgba(220, 175, 71, 0.4);
}

.button-newsletter-submit {
    padding: 1rem 2rem;
    background-color: #DCAF47;
    color: #4F5053;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease-out;
    white-space: nowrap;
}

.button-newsletter-submit:hover {
    background-color: #B89438;
}

.button-newsletter-submit:active {
    background-color: #8C7325;
}

.span-newsletter-submit-text {
    display: inline-block;
}

.div-newsletter-checkbox-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.checkbox-newsletter-privacy {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.125rem;
    border: 1px solid #E1E2E4;
    accent-color: #DCAF47;
    cursor: pointer;
    flex-shrink: 0;
}

.checkbox-newsletter-privacy:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(220, 175, 71, 0.4);
}

.label-newsletter-privacy {
    font-size: 0.875rem;
    color: #7A7C80;
    line-height: 1.5;
    cursor: pointer;
    flex: 1;
}

.link-newsletter-privacy {
    color: #DCAF47;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.2s ease-out;
}

.link-newsletter-privacy:hover {
    color: #B89438;
}

.div-newsletter-message {
    margin-top: 1rem;
    text-align: center;
}

.div-newsletter-message.show {
    display: block;
}

.div-newsletter-message.success .span-newsletter-message-text {
    color: #4F5053;
}

.div-newsletter-message.error .span-newsletter-message-text {
    color: #dc2626;
}

.span-newsletter-message-text {
    display: inline-block;
    font-size: 0.875rem;
}

.div-newsletter-trust-indicators {
    margin-top: 3rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    text-align: center;
}

.div-newsletter-trust-item {
    color: #7A7C80;
    font-size: 0.875rem;
}

.span-newsletter-trust-text {
    display: inline-block;
}

/* About Awards Section */
.section-about-awards {
    background-color: #F6F7F8;
    width: 100%;
}

.div-about-awards-container {
    position: relative;
}

.div-about-awards-content {
    display: flex;
    align-items: center;
}

.div-about-awards-text-wrapper {
    display: flex;
    flex-direction: column;
}

.div-about-awards-short-title-wrapper {
    margin-bottom: 1rem;
}

.span-about-awards-short-title {
    display: inline-block;
    font-size: 0.875rem;
    line-height: 1.25rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #4F5053;
    font-weight: 600;
}

.h2-about-awards-title {
    margin-bottom: 1.5rem;
    line-height: 1.1;
    font-weight: 600;
}

.div-about-awards-description {
    margin-bottom: 2rem;
}

/* ref-about-awards-description: inner content typography (h3, p, em, strong, a, lists) – theme pattern */
.ref-about-awards-description h3,
.div-about-awards-description h3 {
    font-weight: 600;
    color: #4F5053;
    font-size: 1.25rem;
    line-height: 1.35;
    margin: 0 0 1rem;
    letter-spacing: 0.02em;
}

.ref-about-awards-description h3:first-child,
.div-about-awards-description h3:first-child {
    margin-top: 0;
}

.ref-about-awards-description p,
.div-about-awards-description p {
    font-size: 1.125rem;
    line-height: 1.75;
    color: #7A7C80;
    font-weight: 400;
    margin: 0 0 1rem;
}

.ref-about-awards-description p:last-child,
.div-about-awards-description p:last-child {
    margin-bottom: 0;
}

.ref-about-awards-description em,
.div-about-awards-description em {
    font-style: italic;
    color: #4F5053;
    font-weight: 500;
}

.ref-about-awards-description strong,
.div-about-awards-description strong {
    font-weight: 600;
    color: #4F5053;
}

.ref-about-awards-description a,
.div-about-awards-description a {
    color: #DCAF47;
    text-decoration: none;
    transition: color 0.2s ease-out;
}

.ref-about-awards-description a:hover,
.div-about-awards-description a:hover {
    color: #B89438;
}

.ref-about-awards-description ul,
.div-about-awards-description ul {
    list-style: disc outside;
    margin: 0 0 1rem;
    padding-left: 1.5rem;
}

.ref-about-awards-description ol,
.div-about-awards-description ol {
    list-style: decimal outside;
    margin: 0 0 1rem;
    padding-left: 1.5rem;
}

.ref-about-awards-description li,
.div-about-awards-description li {
    margin-bottom: 0.5rem;
    color: #7A7C80;
    font-size: 1.125rem;
    line-height: 1.75;
}

.ref-about-awards-description blockquote,
.div-about-awards-description blockquote {
    margin: 1rem 0;
    padding-left: 1rem;
    border-left: 2px solid #DCAF47;
    color: #4F5053;
    font-style: italic;
    font-size: 1.125rem;
}

.p-about-awards-description-text {
    font-size: 1.125rem;
    line-height: 1.75;
    color: #7A7C80;
    font-weight: 400;
}

.link-about-awards-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: color 0.2s ease-out;
}

.span-about-awards-cta-text {
    display: inline-block;
}

.div-about-awards-media-wrapper {
    position: relative;
}

.div-about-awards-media {
    position: relative;
    aspect-ratio: 4 / 3;
    background-color: #E1E2E4;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
}

.img-about-awards {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(50%);
    transition: transform 0.5s ease-out, filter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.div-about-awards-media:hover .img-about-awards {
    filter: grayscale(0%);
}

.div-about-awards-play-button {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease-out;
}

.div-about-awards-play-icon {
    width: 5rem;
    height: 5rem;
    background-color: #DCAF47;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease-out;
}

.div-about-awards-media:hover .img-about-awards {
    transform: scale(1.05);
}

.div-about-awards-media:hover .div-about-awards-play-button {
    background-color: rgba(0, 0, 0, 0.3);
}

.div-about-awards-media:hover .div-about-awards-play-icon {
    background-color: #B89438;
}

/* About conversion block (below awards, above footer) */
.section-about-conv {
    width: 100%;
}

.h2-about-conv-title {
    margin: 0;
    line-height: 1.15;
    text-transform: none;
}

.p-about-conv-lead {
    margin: 0;
    max-width: 36rem;
}

.link-about-conv-cta {
    margin-top: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 22rem;
    min-height: 3.5rem;
    padding: 1.125rem 2.5rem;
    box-sizing: border-box;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #F6F7F8;
    background-color: #0a0a0a;
    border: 2px solid #4F5053;
    border-radius: 0;
    text-decoration: none;
    transition:
        background-color 0.2s ease-out,
        border-color 0.2s ease-out,
        transform 0.2s ease-out,
        color 0.2s ease-out;
}

.link-about-conv-cta:hover {
    background-color: #1a1a1a;
    border-color: #DCAF47;
    color: #F6F7F8;
    transform: translateY(-3px);
}

.link-about-conv-cta:active {
    background-color: #000000;
    border-color: #8C7325;
    color: #F6F7F8;
    transform: translateY(-1px);
}

.link-about-conv-cta:focus {
    outline: none;
}

.link-about-conv-cta:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 2px #ffffff,
        0 0 0 4px rgba(220, 175, 71, 0.45);
}

.span-about-conv-cta-label {
    display: inline-block;
    text-align: center;
}

/* Client highlight — Supercarbaldie full-width block (About + Portfolio + Contact; shared template part) */
.section-client-highlight-supercarbaldie {
    width: 100%;
}

.section-client-highlight-supercarbaldie--embedded {
    width: 100%;
}

.div-client-highlight-supercarbaldie-container {
    position: relative;
}

.div-client-highlight-supercarbaldie-inner {
    width: 100%;
}

.img-client-highlight-supercarbaldie {
    display: block;
}

.h3-client-highlight-supercarbaldie-title {
    margin-top: 0;
}

.span-client-highlight-supercarbaldie-cta-label {
    display: inline-block;
    text-align: center;
}

/* WYSIWYG: match block body scale (about-conv-lead) */
.section-client-highlight-supercarbaldie .div-client-highlight-description {
    margin-top: 0;
}

.section-client-highlight-supercarbaldie .div-client-highlight-description h3 {
    font-weight: 600;
    color: #4F5053;
    font-size: 1.125rem;
    line-height: 1.4;
    margin: 0 0 0.75rem;
    letter-spacing: 0.02em;
}

@media (min-width: 768px) {
    .section-client-highlight-supercarbaldie .div-client-highlight-description h3 {
        font-size: 1.1875rem;
    }
}

.section-client-highlight-supercarbaldie .div-client-highlight-description h3:first-child {
    margin-top: 0;
}

.section-client-highlight-supercarbaldie .div-client-highlight-description p {
    font-size: 1rem;
    line-height: 1.75;
    color: #7A7C80;
    font-weight: 400;
    margin: 0 0 0.75rem;
}

@media (min-width: 768px) {
    .section-client-highlight-supercarbaldie .div-client-highlight-description p {
        font-size: 1.125rem;
    }
}

.section-client-highlight-supercarbaldie .div-client-highlight-description p:last-child {
    margin-bottom: 0;
}

.section-client-highlight-supercarbaldie .div-client-highlight-description em {
    font-style: italic;
    color: #4F5053;
    font-weight: 500;
}

.section-client-highlight-supercarbaldie .div-client-highlight-description strong {
    font-weight: 600;
    color: #4F5053;
}

.section-client-highlight-supercarbaldie .div-client-highlight-description a {
    color: #DCAF47;
    text-decoration: none;
    transition: color 0.2s ease-out;
}

.section-client-highlight-supercarbaldie .div-client-highlight-description a:hover {
    color: #B89438;
}

.section-client-highlight-supercarbaldie .div-client-highlight-description ul {
    list-style: disc outside;
    margin: 0 0 0.75rem;
    padding-left: 1.25rem;
}

.section-client-highlight-supercarbaldie .div-client-highlight-description ol {
    list-style: decimal outside;
    margin: 0 0 0.75rem;
    padding-left: 1.25rem;
}

.section-client-highlight-supercarbaldie .div-client-highlight-description li {
    margin-bottom: 0.375rem;
    color: #7A7C80;
    font-size: 1rem;
    line-height: 1.75;
}

@media (min-width: 768px) {
    .section-client-highlight-supercarbaldie .div-client-highlight-description li {
        font-size: 1.125rem;
    }
}

.section-client-highlight-supercarbaldie .div-client-highlight-description blockquote {
    margin: 0.75rem 0;
    padding-left: 0.875rem;
    border-left: 2px solid #DCAF47;
    color: #4F5053;
    font-style: italic;
    font-size: 1rem;
}

@media (min-width: 768px) {
    .section-client-highlight-supercarbaldie .div-client-highlight-description blockquote {
        font-size: 1.125rem;
    }
}

/* Responsive Design for About Page */
@media (max-width: 1024px) {
    .div-about-hero-content {
        flex-direction: column;
    }
    
    .div-about-awards-content {
        flex-direction: column;
    }
    
    .h1-about-main-title,
    .h2-about-awards-title {
        font-size: 2.5rem;
    }
}

@media (max-width: 768px) {
    .h1-about-main-title,
    .h2-about-awards-title,
    .h2-about-conv-title,
    .h2-about-newsletter-title {
        font-size: 2rem;
    }
    
    .p-about-description-text,
    .p-about-awards-description-text {
        font-size: 1rem;
    }
    
    .div-about-awards-play-icon {
        width: 4rem;
        height: 4rem;
    }

    .link-about-conv-cta {
        margin-top: 2.25rem;
        max-width: 100%;
        padding: 1rem 1.75rem;
        font-size: 0.9375rem;
        letter-spacing: 0.12em;
        min-height: 3.25rem;
    }
}

/* About conversion CTA (ref-about-conv-cta; no form submit on /about): tighter control on narrow phones */
@media (max-width: 767px) {
    .section-about-conv .link-about-conv-cta {
        margin-top: 1.75rem;
        padding: 0.6875rem 1.25rem;
        min-height: 2.75rem;
        font-size: 0.8125rem;
        letter-spacing: 0.1em;
        max-width: 100%;
    }

    .section-about-conv .span-about-conv-cta-label {
        font-size: inherit;
        line-height: 1.25;
    }
}

/* About template only: reduce vertical padding/margins/gaps on mobile to save scroll height */
@media (max-width: 767px) {
    body.page-about .section-about-hero {
        min-height: auto;
        align-items: flex-start;
    }

    body.page-about .div-about-hero-container {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    body.page-about .div-about-hero-content {
        gap: 1.5rem;
    }

    body.page-about .div-about-short-title-wrapper {
        margin-bottom: 0.5rem;
    }

    body.page-about .h1-about-main-title {
        margin-bottom: 0.875rem;
    }

    body.page-about .div-about-description {
        margin-bottom: 1.25rem;
    }

    body.page-about .div-about-description p {
        margin-bottom: 0.75rem;
    }

    body.page-about .div-about-description p:last-child {
        margin-bottom: 0;
    }

    body.page-about .div-about-social-links {
        gap: 0.75rem;
    }

    body.page-about .section-about-scrolling-text {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    body.page-about .div-about-scrolling-content {
        gap: 1.5rem;
    }

    body.page-about .section-about-awards {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }

    body.page-about .div-about-awards-content {
        gap: 1.5rem;
    }

    body.page-about .div-about-awards-short-title-wrapper {
        margin-bottom: 0.5rem;
    }

    body.page-about .h2-about-awards-title {
        margin-bottom: 0.875rem;
    }

    body.page-about .div-about-awards-description {
        margin-bottom: 1.25rem;
    }

    body.page-about .div-about-awards-description p {
        margin-bottom: 0.75rem;
    }

    body.page-about .div-about-awards-description p:last-child {
        margin-bottom: 0;
    }

    body.page-about .section-about-conv {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }

    body.page-about .section-about-conv .span-about-conv-accent {
        margin-bottom: 1.25rem;
    }

    body.page-about .section-about-conv .p-about-conv-lead {
        margin-top: 1rem;
    }

    body.page-about .section-about-conv .link-about-conv-cta {
        margin-top: 1.25rem;
    }

    body.page-about .section-client-highlight-supercarbaldie:not(.section-client-highlight-supercarbaldie--embedded) {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }

    body.page-about .section-client-highlight-supercarbaldie .div-client-highlight-supercarbaldie-inner {
        gap: 1.5rem;
    }

    body.page-about .section-client-highlight-supercarbaldie .h3-client-highlight-supercarbaldie-title {
        margin-bottom: 1rem;
    }

    body.page-about .section-client-highlight-supercarbaldie .div-client-highlight-supercarbaldie-cta-wrap {
        margin-top: 1.25rem;
    }
}

/* Portfolio Section */
.section-portfolio {
    width: 100%;
    position: relative;
    background-color: #F6F7F8;
}

.div-portfolio-container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    position: relative;
}

/* Portfolio Title */
.div-portfolio-title-wrapper {
    text-align: center;
    margin-bottom: 1.5rem;
}

.h1-portfolio-title {
    color: #4F5053;
    font-weight: 600;
    font-size: 2.25rem;
    line-height: 1.1;
    text-transform: uppercase;
    text-align: center;
}

@media (min-width: 768px) {
    .h1-portfolio-title {
        font-size: 3rem;
    }
}

@media (min-width: 1024px) {
    .h1-portfolio-title {
        font-size: 3.75rem;
    }
}

/* Portfolio Breadcrumb */
.div-portfolio-breadcrumb-wrapper {
    text-align: center;
    margin-bottom: 3rem;
}

.nav-portfolio-breadcrumb {
    display: inline-block;
}

.ol-portfolio-breadcrumb-list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.li-portfolio-breadcrumb-item,
.li-portfolio-breadcrumb-separator,
.li-portfolio-breadcrumb-current {
    display: inline-block;
    font-size: 0.875rem;
    line-height: 1.5;
}

.link-portfolio-breadcrumb-home {
    color: #7A7C80;
    text-decoration: none;
    transition: color 0.2s ease-out;
}

.link-portfolio-breadcrumb-home:hover {
    color: #4F5053;
}

.li-portfolio-breadcrumb-separator {
    color: #BCBDC0;
}

.li-portfolio-breadcrumb-current {
    color: #7A7C80;
}

.div-portfolio-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .div-portfolio-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .div-portfolio-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.div-portfolio-card {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    cursor: pointer;
    background-color: #000000;
    display: block;
    text-decoration: none;
}

.div-portfolio-card-image-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.img-portfolio-card {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(50%);
    transition: filter 0.6s ease-out, transform 0.6s ease-out;
}

.div-portfolio-card:hover .img-portfolio-card {
    filter: grayscale(0%);
    transform: scale(1.05);
}

.div-portfolio-card-info {
    position: absolute;
    left: 50%;
    bottom: 10%;
    width: 75%;
    background-color: #ffffff;
    padding: 1rem 1.5rem;
    transform: translate(-50%, 100%);
    transition: transform 0.6s ease-out, opacity 0.6s ease-out, visibility 0s 0.6s;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
}

.div-portfolio-card:hover .div-portfolio-card-info {
    transform: translate(-50%, 0);
    opacity: 1;
    visibility: visible;
    transition: transform 0.6s ease-out, opacity 0.6s ease-out, visibility 0s 0s;
}

.h3-portfolio-card-title {
    color: #4F5053;
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.3;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    text-align: center;
    white-space: normal;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.p-portfolio-card-subtitle {
    color: #7A7C80;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Responsive Design for Portfolio */
@media (max-width: 768px) {
    .div-portfolio-grid {
        gap: 1rem;
    }
    
    .h3-portfolio-card-title {
        font-size: 1.125rem;
    }
    
    .div-portfolio-card-info {
        padding: 0.75rem 1rem;
    }
}

/* Single Post Section */
.section-single-post {
    width: 100%;
    position: relative;
    background-color: #F6F7F8;
}

.div-single-post-container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    position: relative;
}

/* Single Post Title */
.div-single-post-title-wrapper {
    text-align: center;
    margin-bottom: 1.5rem;
}

.h1-single-post-title {
    color: #4F5053;
    font-weight: 600;
    font-size: 2.25rem;
    line-height: 1.1;
    text-transform: uppercase;
    text-align: center;
}

@media (min-width: 768px) {
    .h1-single-post-title {
        font-size: 3rem;
    }
}

@media (min-width: 1024px) {
    .h1-single-post-title {
        font-size: 3.75rem;
    }
}

/* Single Post Breadcrumb */
.div-single-post-breadcrumb-wrapper {
    text-align: center;
    margin-bottom: 3rem;
}

.nav-single-post-breadcrumb {
    display: inline-block;
}

.ol-single-post-breadcrumb-list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.li-single-post-breadcrumb-item,
.li-single-post-breadcrumb-separator,
.li-single-post-breadcrumb-category,
.li-single-post-breadcrumb-current {
    display: inline-block;
    font-size: 0.875rem;
    line-height: 1.5;
}

.link-single-post-breadcrumb-home,
.link-single-post-breadcrumb-category {
    color: #7A7C80;
    text-decoration: none;
    transition: color 0.2s ease-out;
}

.link-single-post-breadcrumb-home:hover,
.link-single-post-breadcrumb-category:hover {
    color: #4F5053;
}

.li-single-post-breadcrumb-separator {
    color: #BCBDC0;
}

.li-single-post-breadcrumb-current {
    color: #7A7C80;
}

/* Single Post Content Layout */
.div-single-post-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

@media (min-width: 1024px) {
    .div-single-post-content-wrapper {
        flex-direction: row;
        gap: 3rem;
    }
}

/* Max width for single service/content (48rem) */
.max-w-3xl {
    max-width: 48rem;
}

/* Single Article - Centered Layout */
.div-single-article-content-wrapper {
    width: 100%;
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

.div-single-article-content-wrapper .div-single-post-description {
    text-align: left;
}

.div-single-article-share {
    text-align: center;
}

/* Left Column (65%) */
.div-single-post-left-column {
    width: 100%;
}

@media (min-width: 1024px) {
    .div-single-post-left-column {
        width: 65%;
    }
}

.div-single-post-featured-image-wrapper {
    margin-bottom: 2rem;
    border: none;
    background-color: #F6F7F8;
}

/* When wrapper has aspect-ratio (e.g. portfolio single), image must fill to avoid dark gap at bottom */
.div-single-post-featured-image-wrapper.overflow-hidden .img-single-post-featured {
    height: 100%;
}

.img-single-post-featured {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center center;
    display: block;
    vertical-align: bottom;
    border: none;
    filter: grayscale(50%);
    transition: filter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.div-single-post-featured-image-wrapper:hover .img-single-post-featured {
    filter: grayscale(0%);
}

.div-single-post-featured-video-overlay {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: opacity 0.4s ease-out;
}

.div-single-post-featured-image-wrapper.is-hover-video .div-single-post-featured-video-overlay {
    opacity: 1;
    pointer-events: auto;
}

.img-single-post-featured-video {
    opacity: 0;
    transition: opacity 0.35s ease-out;
}

.div-single-post-featured-image-wrapper.is-hover-video .img-single-post-featured-video.is-playing {
    opacity: 1;
}

.div-single-post-featured-dots {
    padding-bottom: 1rem;
    pointer-events: auto;
}

.div-single-post-featured-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    padding: 0;
    cursor: pointer;
    background-color: #BCBDC0;
    transition: background-color 0.2s ease-out;
}

.div-single-post-featured-dot:hover {
    background-color: #7A7C80;
}

.div-single-post-featured-dot.is-active {
    background-color: #DCAF47;
}

.div-single-post-hero-image-wrapper {
    margin-bottom: 2rem;
}

.img-single-post-hero {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    filter: grayscale(50%);
    transition: filter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.div-single-post-hero-image-wrapper:hover .img-single-post-hero {
    filter: grayscale(0%);
}

.h2-single-post-subtitle {
    color: #4F5053;
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .h2-single-post-subtitle {
        font-size: 1.875rem;
    }
}

.div-single-post-description {
    margin-bottom: 2rem;
}

/* Style all content elements in description */
.div-single-post-description p {
    color: #7A7C80;
    font-size: 1rem;
    line-height: 1.75;
    margin-bottom: 1rem;
}

.div-single-post-description h1,
.div-single-post-description h2,
.div-single-post-description h3,
.div-single-post-description h4,
.div-single-post-description h5,
.div-single-post-description h6 {
    color: #4F5053;
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 1rem;
    line-height: 1.2;
    text-transform: uppercase;
}

.div-single-post-description h2 {
    font-size: 1.875rem;
}

.div-single-post-description h3 {
    font-size: 1.5rem;
}

.div-single-post-description h4 {
    font-size: 1.25rem;
}

.div-single-post-description img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    margin: 2rem 0;
}

.div-single-post-description a {
    color: #4F5053;
    text-decoration: underline;
    transition: color 0.2s ease-out;
}

.div-single-post-description a:hover {
    color: #DCAF47;
}

.div-single-post-description ul,
.div-single-post-description ol {
    color: #7A7C80;
    font-size: 1rem;
    line-height: 1.75;
    margin: 1rem 0;
    padding-left: 2rem;
}

.div-single-post-description li {
    margin-bottom: 0.5rem;
}

.div-single-post-description blockquote {
    border-left: 3px solid #DCAF47;
    padding-left: 1.5rem;
    margin: 1.5rem 0;
    color: #7A7C80;
    font-style: italic;
}

.div-single-post-description code {
    background-color: #E1E2E4;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    color: #4F5053;
}

.div-single-post-description pre {
    background-color: #E1E2E4;
    padding: 1rem;
    border-radius: 0.25rem;
    overflow-x: auto;
    margin: 1.5rem 0;
}

.div-single-post-description pre code {
    background-color: transparent;
    padding: 0;
}

/* Dummy content styles */
.div-single-post-dummy-content {
    width: 100%;
}

.img-single-post-dummy {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    margin-bottom: 2rem;
    filter: grayscale(50%);
    transition: filter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.div-single-post-dummy-content:hover .img-single-post-dummy {
    filter: grayscale(0%);
}

.h2-single-post-dummy-heading {
    color: #4F5053;
    font-weight: 600;
    font-size: 1.875rem;
    line-height: 1.2;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.h3-single-post-dummy-subheading {
    color: #4F5053;
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1.2;
    margin-bottom: 1rem;
    margin-top: 2rem;
    text-transform: uppercase;
}

.p-single-post-dummy-paragraph {
    color: #7A7C80;
    font-size: 1rem;
    line-height: 1.75;
    margin-bottom: 1.5rem;
}

.link-single-post-dummy {
    color: #4F5053;
    text-decoration: underline;
    transition: color 0.2s ease-out;
}

.link-single-post-dummy:hover {
    color: #DCAF47;
}

.ul-single-post-dummy-list {
    list-style: disc;
    list-style-position: inside;
    margin-bottom: 1.5rem;
    color: #7A7C80;
}

.li-single-post-dummy-list-item {
    color: #7A7C80;
    font-size: 1rem;
    line-height: 1.75;
    margin-bottom: 0.5rem;
}

.div-single-post-second-image-wrapper {
    margin-bottom: 2rem;
}

.img-single-post-second {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    filter: grayscale(50%);
    transition: filter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.div-single-post-second-image-wrapper:hover .img-single-post-second {
    filter: grayscale(0%);
}

.div-single-post-small-text {
    margin-bottom: 2rem;
}

.div-single-post-small-text p {
    color: #7A7C80;
    font-size: 0.875rem;
    line-height: 1.6;
    margin-bottom: 0.75rem;
}

.div-single-post-next-link-wrapper {
    margin-top: 2rem;
}

.link-single-post-next {
    color: #7A7C80;
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.2s ease-out;
}

.link-single-post-next:hover {
    color: #4F5053;
}

/* Right Column (35%) - Sticky */
.div-single-post-right-column {
    width: 100%;
}

@media (min-width: 1024px) {
    .div-single-post-right-column {
        width: 35%;
    }
}

.div-single-post-sidebar {
    position: sticky;
    top: 2rem;
    align-self: flex-start;
}

.h3-single-post-sidebar-title {
    color: #4F5053;
    font-weight: 600;
    font-size: 1.125rem;
    line-height: 1.2;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.div-single-post-sidebar-text {
    color: #7A7C80;
    font-size: 0.875rem;
    line-height: 1.75;
    margin-bottom: 1.5rem;
}

.div-single-post-sidebar-text p {
    margin-bottom: 0.75rem;
}

.p-single-post-social-label {
    color: #7A7C80;
    font-size: 0.75rem;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

.div-single-post-social-icons {
    display: flex;
    gap: 1rem;
}

.link-single-post-social-twitter,
.link-single-post-social-facebook,
.link-single-post-social-linkedin,
.link-single-post-social-pinterest {
    color: #7A7C80;
    text-decoration: none;
    font-size: 1.25rem;
    transition: color 0.2s ease-out;
}

.link-single-post-social-twitter:hover,
.link-single-post-social-facebook:hover,
.link-single-post-social-linkedin:hover,
.link-single-post-social-pinterest:hover {
    color: #4F5053;
}

/* Responsive Design for Single Post */
@media (max-width: 1024px) {
    .div-single-post-sidebar {
        position: relative;
        top: 0;
    }
}

/* Blog Category Section */
.section-blog-category {
    width: 100%;
    position: relative;
    background-color: #F6F7F8;
}

.div-blog-category-container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    position: relative;
}

.div-blog-category-title-wrapper {
    text-align: center;
    margin-bottom: 1.5rem;
}

.h1-blog-category-title {
    color: #4F5053;
    font-weight: 600;
    font-size: 2.25rem;
    line-height: 1.1;
    text-transform: uppercase;
    text-align: center;
}

@media (min-width: 768px) {
    .h1-blog-category-title {
        font-size: 3rem;
    }
}

@media (min-width: 1024px) {
    .h1-blog-category-title {
        font-size: 3.75rem;
    }
}

.div-blog-category-breadcrumb-wrapper {
    text-align: center;
    margin-bottom: 3rem;
}

/* Blog Category Two Column Layout */
.div-blog-category-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

@media (min-width: 1024px) {
    .div-blog-category-content-wrapper {
        flex-direction: row;
        gap: 3rem;
    }
    
    .div-blog-category-content {
        width: 65%;
        flex-shrink: 0;
    }
}

/* Blog Category Sidebar - Recent Posts */
.div-blog-category-sidebar {
    width: 100%;
}

@media (min-width: 1024px) {
    .div-blog-category-sidebar {
        width: 35%;
        flex-shrink: 0;
    }
}

.div-blog-recent-posts-wrapper {
    position: sticky;
    top: 2rem;
}

.h3-blog-recent-posts-title {
    color: #4F5053;
    font-weight: 600;
    font-size: 1.125rem;
    line-height: 1.2;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.ul-blog-recent-posts-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.li-blog-recent-post-item {
    margin-bottom: 1.5rem;
}

.link-blog-recent-post-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: color 0.2s ease-out;
}

/* Recent Post Card */
.div-blog-recent-post-card-inner {
    display: flex;
    gap: 1rem;
}

.div-blog-recent-post-image-wrapper {
    width: 5rem;
    height: 5rem;
    flex-shrink: 0;
    overflow: hidden;
    background-color: #E1E2E4;
}

.img-blog-recent-post-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(50%);
    transition: filter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.link-blog-recent-post-link:hover .img-blog-recent-post-image {
    filter: grayscale(0%);
}

.div-blog-recent-post-content {
    flex: 1;
    min-width: 0;
}

.h4-blog-recent-post-title {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 0.25rem;
    color: #4F5053;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s ease-out;
}

.link-blog-recent-post-link:hover .h4-blog-recent-post-title {
    color: #DCAF47;
}

.p-blog-recent-post-description {
    font-size: 0.75rem;
    line-height: 1.5;
    color: #7A7C80;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Blog Article Cards */
.div-blog-article-card {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.link-blog-article {
    display: block;
    width: 100%;
    text-decoration: none;
    color: inherit;
}

.div-blog-article-image-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    position: relative;
    background-color: #E1E2E4;
    margin-bottom: 1rem;
}

.img-blog-article-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(50%);
    transition: filter 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
}

.link-blog-article:hover .img-blog-article-image {
    filter: grayscale(0%);
    transform: scale(1.05);
}

/* Blog Article Title - 2 lines max */
.h2-blog-article-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

/* Blog Article Description - 3 lines max */
.p-blog-article-description {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #7A7C80;
    font-weight: 400;
}

/* Blog Article Read More */
.span-blog-article-read-more {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #7A7C80;
    transition: color 0.2s ease-out;
}

.link-blog-article:hover .span-blog-article-read-more {
    color: #4F5053;
}

.span-blog-article-read-more .ph {
    font-size: 1rem;
}

/* Blog Category Pagination */
.nav-blog-category-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding-top: 2rem;
    margin-top: 2rem;
    border-top: 1px solid #E1E2E4;
}

.link-blog-pagination-prev,
.link-blog-pagination-next,
.link-blog-pagination-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease-out, background-color 0.2s ease-out;
}

.link-blog-pagination-prev,
.link-blog-pagination-next {
    color: #7A7C80;
}

.link-blog-pagination-prev:hover,
.link-blog-pagination-next:hover {
    color: #4F5053;
    background-color: #E1E2E4;
}

.link-blog-pagination-page {
    min-width: 2.5rem;
    color: #7A7C80;
}

.link-blog-pagination-page:hover {
    color: #4F5053;
    background-color: #E1E2E4;
}

.link-blog-pagination-page-current {
    background-color: #4F5053;
    color: #ffffff;
}

.link-blog-pagination-page-current:hover {
    background-color: #4F5053;
    color: #ffffff;
}

/* Contact Page */
.section-contact {
    width: 100%;
    position: relative;
    background-color: #F6F7F8;
}

.div-contact-container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    position: relative;
}

.div-contact-title-wrapper {
    text-align: center;
    margin-bottom: 3rem;
}

.h1-contact-title {
    color: #4F5053;
    font-weight: 600;
    font-size: 2.25rem;
    line-height: 1.1;
    text-transform: uppercase;
}

@media (min-width: 768px) {
    .h1-contact-title {
        font-size: 3rem;
    }
}

@media (min-width: 1024px) {
    .h1-contact-title {
        font-size: 3.75rem;
    }
}

.div-contact-content-wrapper {
    width: 100%;
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
}

.p-contact-intro {
    color: #7A7C80;
    font-size: 1rem;
    line-height: 1.6;
}

.div-contact-form-card {
    padding: 2rem;
    border-radius: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.2s ease-out, border-color 0.2s ease-out;
}

.div-contact-form-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: #DCAF47;
}

.input-contact-name,
.input-contact-email,
.input-contact-subject,
.textarea-contact-message {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #E1E2E4;
    background-color: #ffffff;
    color: #4F5053;
    font-size: 1rem;
    transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
}

.input-contact-name::placeholder,
.input-contact-email::placeholder,
.input-contact-subject::placeholder,
.textarea-contact-message::placeholder {
    color: #BCBDC0;
}

.input-contact-name:focus,
.input-contact-email:focus,
.input-contact-subject:focus,
.textarea-contact-message:focus {
    outline: none;
    border-color: #DCAF47;
    box-shadow: 0 0 0 2px rgba(220, 175, 71, 0.4);
}

.textarea-contact-message {
    resize: vertical;
    min-height: 8rem;
}

.div-contact-form-feedback {
    min-height: 0;
}

.div-contact-form-feedback-panel {
    display: none;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.35rem;
    border-radius: 2px;
    border-width: 2px;
    border-style: solid;
    box-sizing: border-box;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

.div-contact-form-feedback-visible .div-contact-form-feedback-panel {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}

.div-contact-form-feedback-icon {
    flex-shrink: 0;
    font-size: 1.75rem;
    line-height: 1;
    margin-top: 0.125rem;
}

.div-contact-form-feedback-success .div-contact-form-feedback-icon {
    color: #B89438;
}

.div-contact-form-feedback-error .div-contact-form-feedback-icon {
    color: #b91c1c;
}

.div-contact-form-feedback-copy {
    flex: 1;
    min-width: 0;
}

.p-contact-form-feedback-heading {
    margin: 0 0 0.35rem;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.35;
}

.p-contact-form-feedback-body {
    margin: 0;
    font-size: 1rem;
    line-height: 1.55;
}

.div-contact-form-feedback-success.div-contact-form-feedback-visible .div-contact-form-feedback-panel {
    background-color: #F6EFD7;
    border-color: #DCAF47;
    box-shadow: 0 1px 0 rgba(79, 80, 83, 0.06);
}

.div-contact-form-feedback-success .p-contact-form-feedback-heading {
    color: #4F5053;
}

.div-contact-form-feedback-success .p-contact-form-feedback-body {
    color: #4F5053;
}

.div-contact-form-feedback-error.div-contact-form-feedback-visible .div-contact-form-feedback-panel {
    background-color: #fef2f2;
    border-color: #f87171;
    box-shadow: 0 1px 0 rgba(79, 80, 83, 0.06);
}

.div-contact-form-feedback-error .p-contact-form-feedback-heading {
    color: #991b1b;
}

.div-contact-form-feedback-error .p-contact-form-feedback-body {
    color: #7f1d1d;
}

.button-contact-submit {
    padding: 1rem 3rem;
    background-color: #0a0a0a;
    color: #F6F7F8;
    font-weight: 600;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    border: 2px solid #4F5053;
    cursor: pointer;
    transition: background-color 0.2s ease-out, border-color 0.2s ease-out, color 0.2s ease-out;
}

.button-contact-submit:hover {
    background-color: #1a1a1a;
    border-color: #DCAF47;
    color: #F6F7F8;
}

.button-contact-submit:active {
    background-color: #000000;
    border-color: #8C7325;
    color: #F6F7F8;
}

.button-contact-submit:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 2px #ffffff,
        0 0 0 4px rgba(220, 175, 71, 0.45);
}

.button-contact-submit:disabled {
    cursor: not-allowed;
    opacity: 0.75;
}

/* Contact submit (ref-contact-submit): mobile — avoid left/right clip from letter-spacing + nowrap on narrow width */
@media (max-width: 767px) {
    .section-contact .div-contact-submit-wrapper {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .section-contact .button-contact-submit {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 0.875rem clamp(1rem, 4.5vw, 1.75rem);
        font-size: 0.8125rem;
        letter-spacing: 0.1em;
        white-space: normal;
        text-align: center;
        line-height: 1.35;
        overflow: visible;
    }
}

/* Single Service – contact block CTAs */
.div-single-service-contact-block {
    text-align: center;
}

.h2-single-service-contact-heading {
    color: #4F5053;
    font-weight: 600;
    font-size: 1.25rem;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.p-single-service-contact-intro {
    color: #7A7C80;
    font-size: 1rem;
    line-height: 1.625;
    margin-bottom: 1.5rem;
    max-width: 36rem;
    margin-left: auto;
    margin-right: auto;
}

.div-single-service-cta-wrapper {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

@media (min-width: 640px) {
    .div-single-service-cta-wrapper {
        flex-direction: row;
    }
}

.link-single-service-contact-cta {
    display: inline-block;
    padding: 0.875rem 2rem;
    background-color: #DCAF47;
    color: #4F5053;
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    border-radius: 0.125rem;
    text-decoration: none;
    border: none;
    transition: background-color 0.2s ease-out, box-shadow 0.2s ease-out;
}

.link-single-service-contact-cta:hover {
    background-color: #B89438;
}

.link-single-service-contact-cta:active {
    background-color: #8C7325;
}

.link-single-service-contact-cta:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(220, 175, 71, 0.4);
}

.link-single-service-portfolio-cta {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border: 1px solid #E1E2E4;
    background-color: transparent;
    color: #4F5053;
    font-weight: 500;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    border-radius: 0.125rem;
    text-decoration: none;
    transition: background-color 0.2s ease-out, border-color 0.2s ease-out, box-shadow 0.2s ease-out;
}

.link-single-service-portfolio-cta:hover {
    background-color: #F6F7F8;
    border-color: #BCBDC0;
}

.link-single-service-portfolio-cta:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(220, 175, 71, 0.4);
}

/* --------------------------------------------------------------------------
   Legal pages (Terms, Privacy) — ref-post-article / ref-post-content layout
   Inner HTML: scoped via .div-rich-html-content (not ref-* selectors per README)
   -------------------------------------------------------------------------- */

.section-legal-page {
    width: 100%;
}

.div-legal-page-article {
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
    background-color: #ffffff;
    border: 1px solid #E1E2E4;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    padding: 2rem 1.5rem 2.5rem;
    border-top: 2px solid #DCAF47;
}

@media (min-width: 768px) {
    .div-legal-page-article {
        padding: 2.5rem 2.5rem 3rem;
    }
}

.div-legal-page-header {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #E1E2E4;
}

.p-legal-page-eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #7A7C80;
    margin: 0 0 0.75rem;
}

.h1-legal-page-title {
    font-size: 1.875rem;
    line-height: 1.15;
    font-weight: 600;
    color: #4F5053;
    margin: 0 0 0.75rem;
    letter-spacing: -0.02em;
}

@media (min-width: 768px) {
    .h1-legal-page-title {
        font-size: 2.25rem;
    }
}

.time-legal-page-modified {
    display: block;
    font-size: 0.875rem;
    color: #7A7C80;
    font-weight: 400;
}

.div-legal-page-body {
    padding-top: 0.25rem;
}

/* Rich HTML inside ref-post-content / .div-rich-html-content */
.div-rich-html-content {
    font-size: 1rem;
    line-height: 1.75;
    color: #7A7C80;
    font-weight: 400;
}

.div-rich-html-content > *:first-child {
    margin-top: 0;
}

.div-rich-html-content > *:last-child {
    margin-bottom: 0;
}

.div-rich-html-content h1 {
    font-size: 1.75rem;
    font-weight: 600;
    color: #4F5053;
    margin: 2rem 0 1rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.div-rich-html-content h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #4F5053;
    margin: 2rem 0 0.875rem;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.div-rich-html-content h3 {
    font-size: 1.1875rem;
    font-weight: 600;
    color: #4F5053;
    margin: 1.75rem 0 0.75rem;
    line-height: 1.35;
    letter-spacing: 0.02em;
}

.div-rich-html-content h4,
.div-rich-html-content h5,
.div-rich-html-content h6 {
    font-size: 1.0625rem;
    font-weight: 600;
    color: #4F5053;
    margin: 1.5rem 0 0.5rem;
    line-height: 1.35;
}

.div-rich-html-content p {
    margin: 0 0 1rem;
}

.div-rich-html-content a {
    color: #DCAF47;
    text-decoration: none;
    border-bottom: 1px solid rgba(220, 175, 71, 0.35);
    transition: color 0.2s ease-out, border-color 0.2s ease-out;
}

.div-rich-html-content a:hover {
    color: #B89438;
    border-bottom-color: rgba(184, 148, 56, 0.55);
}

.div-rich-html-content strong,
.div-rich-html-content b {
    font-weight: 600;
    color: #4F5053;
}

.div-rich-html-content em,
.div-rich-html-content i {
    font-style: italic;
    color: #4F5053;
}

.div-rich-html-content ul,
.div-rich-html-content ol {
    margin: 0 0 1.25rem;
    padding-left: 1.5rem;
}

.div-rich-html-content ul {
    list-style-type: disc;
}

.div-rich-html-content ol {
    list-style-type: decimal;
}

.div-rich-html-content li {
    margin-bottom: 0.5rem;
    padding-left: 0.25rem;
}

.div-rich-html-content li::marker {
    color: #BCBDC0;
}

.div-rich-html-content blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1rem 1rem 1.25rem;
    border-left: 3px solid #DCAF47;
    background-color: #F6F7F8;
    color: #4F5053;
    font-style: italic;
    font-size: 1.0625rem;
}

.div-rich-html-content blockquote p {
    margin-bottom: 0.75rem;
}

.div-rich-html-content blockquote p:last-child {
    margin-bottom: 0;
}

.div-rich-html-content hr {
    border: none;
    height: 1px;
    background: #E1E2E4;
    margin: 2rem 0;
}

.div-rich-html-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.9375rem;
}

.div-rich-html-content th,
.div-rich-html-content td {
    border: 1px solid #E1E2E4;
    padding: 0.625rem 0.875rem;
    text-align: left;
}

.div-rich-html-content th {
    background-color: #F6F7F8;
    font-weight: 600;
    color: #4F5053;
}

.div-rich-html-content code {
    font-size: 0.875em;
    background-color: #F6F7F8;
    color: #4F5053;
    padding: 0.125rem 0.375rem;
    border: 1px solid #E1E2E4;
    border-radius: 0.25rem;
}

.div-rich-html-content pre {
    background-color: #F6F7F8;
    border: 1px solid #E1E2E4;
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
    overflow-x: auto;
    font-size: 0.875rem;
    line-height: 1.6;
}

.div-rich-html-content pre code {
    background: none;
    border: none;
    padding: 0;
}

.div-rich-html-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.5rem 0;
    border-radius: 0.25rem;
}

.div-rich-html-content figure {
    margin: 1.5rem 0;
}

.div-rich-html-content figcaption {
    font-size: 0.875rem;
    color: #7A7C80;
    margin-top: 0.5rem;
}

.div-rich-html-content dl {
    margin: 1rem 0;
}

.div-rich-html-content dt {
    font-weight: 600;
    color: #4F5053;
    margin-top: 0.75rem;
}

.div-rich-html-content dd {
    margin: 0.25rem 0 0 1rem;
}