/*
Theme Name: Dayan Arc
Theme URI: https://www.dayanarc.com
Author: Dayan Arc
Author URI: https://www.dayanarc.com
Description: Premium architecture and interior design WordPress theme with fullPage.js single-page layout.
Version: 2.1.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dayanarc
*/

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

body {
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
    overflow-y: hidden;
    background-color: #f6f0da;
}
#fullpage {
    background-color: #f6f0da;
}

/* Hide all scrollbars globally */
html, body {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;
}

* {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

*::-webkit-scrollbar {
    display: none;
}

/* Black intro screen */
#loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #000000;
    z-index: 100;
    transition: transform 1s cubic-bezier(0.77, 0, 0.175, 1);
    transform-origin: top;
}

.loader-hide {
    transform: translateY(-100%);
}

/* Typography */
.title-text {
    font-family: 'Playfair Display', serif;
}

.hero-title {
    font-family: 'Cormorant Garamond', serif;
}

.fancy-d {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 1.3em;
    margin-right: -0.05em;
}

.fancy-e {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 1.15em;
    margin-right: -0.05em;
}

.fancy-r {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 1.15em;
    margin-right: -0.05em;
}

.fancy-s {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 1.2em;
    margin-right: -0.05em;
}

.fancy-c {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 1.25em;
    margin-right: -0.02em;
}

.fancy-marquee {
    font-family: 'Playfair Display', serif;
    font-style: italic;
}

.italic-m {
    font-style: italic;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: 1.3em;
    line-height: 0.7;
    text-transform: none;
}

/* Text Animation Masking */
.reveal-mask {
    overflow: hidden;
    display: inline-block;
    vertical-align: top;
}

.reveal-text {
    display: block;
    transform: translateY(100%);
    opacity: 0;
    transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.8s ease-out;
}

.reveal-text.active {
    transform: translateY(0);
    opacity: 1;
}

/* Delay classes */
.delay-100 { transition-delay: 100ms, 100ms; }
.delay-200 { transition-delay: 200ms, 200ms; }
.delay-300 { transition-delay: 300ms, 300ms; }
.delay-400 { transition-delay: 400ms, 400ms; }
.delay-500 { transition-delay: 500ms, 500ms; }
.delay-600 { transition-delay: 600ms, 600ms; }

/* Image Curtain Animation */
.curtain-container {
    position: relative;
    overflow: hidden;
}

.curtain-img {
    clip-path: inset(0 0 100% 0);
    transform: scale(1.3);
    transition: clip-path 1.5s cubic-bezier(0.77, 0, 0.175, 1),
                transform 2s cubic-bezier(0.215, 0.61, 0.355, 1);
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.curtain-img.active {
    clip-path: inset(0 0 0 0);
    transform: scale(1);
}

.curtain-container:hover .curtain-img.active {
    transform: scale(1.05);
}

/* Portfolio specific curtain (faster timing) */
.curtain-img-portfolio {
    clip-path: inset(0 0 100% 0);
    transform: scale(1.3);
    transition: clip-path 1.2s cubic-bezier(0.77, 0, 0.175, 1),
                transform 1.5s cubic-bezier(0.215, 0.61, 0.355, 1);
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.curtain-img-portfolio.active {
    clip-path: inset(0 0 0 0);
    transform: scale(1);
}

.curtain-container:hover .curtain-img-portfolio.active {
    transform: scale(1.05);
}

/* === HERO SECTION === */
.hero-section {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background-color: #1a1a1a;
    color: #ffffff;
}

.background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://images.unsplash.com/photo-1618221195710-dd6b41faaea6?q=80&w=2000&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    z-index: 1;
}

.background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 2;
    pointer-events: none;
}

/* === HERO v3 — per Hero Section + Header Design Specification === */
:root {
    --dayanarc-bg-dark: #101412;
    --dayanarc-bg-dark-2: #1B211D;
    --dayanarc-gold: #C9A86A;
    --dayanarc-warm-white: #F2EEE5;
    --dayanarc-sec-text: #B9B4AA;
}

.content-layer {
    position: relative;
    z-index: 10;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.hero-header-v2 {
    position: relative;
    z-index: 20;
    min-height: 88px;
    width: auto;
    margin: -1.5rem -1.5rem 0;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    background: linear-gradient(180deg, rgba(10,9,7,0.6) 0%, rgba(10,9,7,0.32) 60%, rgba(10,9,7,0) 100%);
}

@media (min-width: 768px) {
    .hero-header-v2 {
        margin: 0 -4rem 0;
        padding-left: 4rem;
        padding-right: 4rem;
    }
}

.hero-header-inner {
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

.hero-logo-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hero-logo-img {
    width: 175px;
    height: auto;
}

.hero-logo-subtitle {
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #B8B3A5;
}

.hero-nav-v2 {
    gap: 38px;
}

.hero-nav-v2 .nav-link {
    color: #D5D1C7;
    font-size: 13px;
    letter-spacing: 0.1em;
    text-decoration: none;
    text-transform: uppercase;
    padding-bottom: 6px;
    border-bottom: 1px solid transparent;
    transition: color 0.3s ease, border-color 0.3s ease;
}

.hero-nav-v2 .nav-link:hover {
    color: var(--dayanarc-warm-white);
}

.hero-nav-v2 .nav-link-active {
    color: var(--dayanarc-warm-white);
    border-bottom-color: var(--dayanarc-gold);
}

.hero-lang {
    color: #E5E1D8;
    font-size: 12px;
    margin-right: 1.5rem;
    letter-spacing: 0.05em;
}

.hero-talk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 130px;
    height: 44px;
    border: 1px solid rgba(201, 168, 106, 0.8);
    color: var(--dayanarc-warm-white);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    background: transparent;
    transition: background 0.3s ease, color 0.3s ease;
}

.hero-talk-btn:hover {
    background: var(--dayanarc-gold);
    color: var(--dayanarc-bg-dark);
    border-color: var(--dayanarc-gold);
}

.hero-main-v2 {
    position: relative;
    padding-bottom: 4rem;
}

.hero-main-inner {
    max-width: 500px;
    padding-top: clamp(24px, 5vh, 70px);
}

.hero-eyebrow {
    display: block;
    font-size: 12px;
    letter-spacing: 4px;
    color: var(--dayanarc-gold);
    text-transform: uppercase;
    margin-bottom: 25px;
}

.hero-heading-v2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.25rem, 4.6vw, 4.25rem);
    line-height: 0.98;
    letter-spacing: -1px;
    font-weight: 400;
    color: var(--dayanarc-warm-white);
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.hero-heading-accent {
    color: var(--dayanarc-gold);
}

.hero-tagline-v2 {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: var(--dayanarc-sec-text);
    font-weight: 300;
    max-width: 380px;
    margin-top: 14px;
    margin-bottom: 0;
}

.hero-cta-row-v2 {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 22px;
}

.hero-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    height: 50px;
    border: 1px solid var(--dayanarc-gold);
    color: var(--dayanarc-warm-white);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    background: transparent;
    transition: background 0.3s ease, color 0.3s ease;
}

.hero-btn-outline:hover {
    background: var(--dayanarc-gold);
    color: var(--dayanarc-bg-dark);
}

.hero-watch-btn {
    background: none;
    border: none;
    color: var(--dayanarc-warm-white);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
}

.hero-play-circle {
    width: 48px;
    height: 48px;
    border: 1px solid var(--dayanarc-gold);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--dayanarc-gold);
}

.hero-project-counter {
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    color: #f6f0da;
}

.hero-counter-num {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    font-weight: 300;
}

.hero-counter-total {
    font-size: 0.9rem;
    color: rgba(246, 240, 218, 0.6);
}

.hero-counter-name {
    font-size: 12px;
    letter-spacing: 0.1em;
    margin-top: 0.5rem;
}

.hero-counter-loc {
    font-size: 11px;
    color: rgba(246, 240, 218, 0.6);
    margin-top: 0.15rem;
}

.hero-counter-arrows {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
}

.hero-counter-arrows button {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(246, 240, 218, 0.4);
    background: none;
    color: #f6f0da;
    cursor: pointer;
}

.hero-stats-bar {
    position: relative;
    z-index: 20;
    display: grid;
    grid-template-columns: repeat(4, auto) 1fr;
    align-items: end;
    gap: 2.5rem;
    padding: 1.75rem 0 2.5rem;
    border-top: 1px solid rgba(246, 240, 218, 0.15);
    margin-top: auto;
}

.hero-stat {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.hero-stat-num {
    font-family: 'Playfair Display', serif;
    font-size: 1.75rem;
    color: #c9a24a;
    font-weight: 400;
}

.hero-stat-label {
    font-size: 10px;
    letter-spacing: 0.1em;
    color: rgba(246, 240, 218, 0.65);
    line-height: 1.4;
}

.hero-stat-tagline {
    justify-self: end;
    text-align: right;
    font-size: 10px;
    letter-spacing: 0.1em;
    color: rgba(246, 240, 218, 0.65);
    line-height: 1.4;
}

@media (max-width: 900px) {
    .hero-stats-bar {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 1.5rem;
    }
    .hero-stat-tagline {
        display: none;
    }
    .hero-project-counter {
        display: none;
    }
}

/* .spotlight — REMOVED (cursor light effect dropped per design sign-off).
   Any #spotlight markup, mousemove tracking or radial-gradient overlay must
   stay out of the hero. Kept as a guard in case the element ever returns. */
#spotlight,
.spotlight {
    display: none !important;
}

.content-layer {
    position: relative;
    z-index: 10;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.nav-link {
    font-size: 0.875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: all 0.3s ease;
    display: inline-block;
    text-decoration: none;
    color: inherit;
}

.nav-link:hover {
    transform: scale(1.15);
    opacity: 1;
}

.main-heading {
    font-size: clamp(3rem, 9vw, 8.5rem);
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: -0.02em;
}

.sub-text {
    max-width: 320px;
    font-size: 0.9rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
}

.cta-link {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: border-color 0.3s ease;
    text-decoration: none;
    color: inherit;
}

.cta-link:hover {
    border-bottom-color: #fff;
}

header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    height: 100%;
    background: #1a1a1a;
    z-index: 100;
    transition: right 0.4s cubic-bezier(0.77, 0.2, 0.05, 1.0);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.mobile-menu.active {
    right: 0;
}

.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 90;
    display: none;
}

.menu-overlay.active {
    display: block;
}

/* === ABOUT SECTION === */
.about-section {
    background-color: #f6f0da;
    color: #231f20;
}

.link-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 280px;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e5e5e5;
    text-decoration: none;
    color: #231f20;
    position: relative;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 1s ease-out 1s, transform 1s ease-out 1s;
}

.link-wrapper.active {
    opacity: 1;
    transform: translateY(0);
}

.link-text {
    font-size: 13px;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.link-wrapper::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 1px;
    bottom: -1px;
    left: 0;
    background-color: #c3ac8f;
    transform-origin: right center;
    transition: transform 0.5s cubic-bezier(0.86, 0, 0.07, 1);
}

.link-wrapper:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
}

.arrow-graphic {
    display: flex;
    align-items: center;
    color: #231f20;
}

/* === PORTFOLIO SECTION === */
.portfolio-section {
    background-color: #f6f0da;
    color: #231f20;
}

.nav-btn {
    width: 60px;
    height: 60px;
    border: 1px solid #e5e5e5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    cursor: pointer;
    background: #f6f0da;
}

.nav-btn:hover {
    border-color: #231f20;
    transform: scale(1.05);
}

.portfolio-slide {
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

#journal-container {
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.slide-exit {
    opacity: 0;
    transform: translateY(12px);
}

.slide-enter {
    opacity: 0;
    transform: translateY(-12px);
}

/* === SERVICES SECTION === */
.services-section {
    background-color: #1a1816;
    color: #ffffff;
    position: relative;
}

.bg-fade {
    opacity: 0;
    transition: opacity 2s ease-in-out;
}

.bg-fade.active {
    opacity: 1;
}

.bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('https://images.unsplash.com/photo-1618221195710-dd6b41faaea6?auto=format&fit=crop&w=2000&q=80');
    background-size: cover;
    background-position: center;
    z-index: 0;
}

.bg-gradient {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to right, rgba(20, 18, 16, 0.9) 0%, rgba(30, 26, 22, 0.7) 100%);
    z-index: 1;
}

.services-content {
    position: relative;
    z-index: 2;
}

.link-wrapper-white {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 220px;
    padding-bottom: 0.5rem;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.5);
    position: relative;
    transition: color 0.4s ease;
}

.link-wrapper-white::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
}

.link-wrapper-white::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: #ffffff;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.link-wrapper-white:hover {
    color: #ffffff;
}

.link-wrapper-white:hover::after {
    transform: scaleX(1);
}

.card-wrapper {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.card-wrapper.active {
    opacity: 1;
    transform: translateY(0);
}

.service-card {
    min-height: 380px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card-row2 .service-card {
    height: 400px;
    overflow: hidden;
}

.img-container {
    width: 85%;
    height: 240px;
    margin-left: auto;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-card:hover .img-container {
    width: 65%;
    height: 160px;
}

.card-content-grid {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-card:hover .card-content-grid {
    grid-template-rows: 1fr;
}

.card-inner-content {
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.4s ease-out;
}

.service-card:hover .card-inner-content {
    opacity: 1;
    transition-delay: 0.2s;
}

.arrow-hover {
    transition: transform 0.3s ease;
}

.service-card:hover .arrow-hover {
    transform: translateX(5px);
}

/* === BLOG SECTION === */
#journal-section {
    background-color: #f6f0da;
}
.blog-section {
    background-color: #f6f0da;
    color: #231f20;
}

.curtain-mask {
    clip-path: inset(0 0 100% 0);
    transition: clip-path 1.2s cubic-bezier(0.77, 0, 0.175, 1);
    width: 100%;
    height: 100%;
}

.curtain-mask.active {
    clip-path: inset(0 0 0 0);
}

.curtain-img-blog {
    transform: scale(1.05);
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.journal-card:hover .curtain-img-blog {
    transform: scale(1);
}

.hover-overlay {
    position: absolute;
    inset: 1.25rem;
    background-color: rgba(246, 240, 218, 0.85);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1.5rem;
    text-align: center;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    z-index: 10;
}

.journal-card:hover .hover-overlay {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.read-more-btn svg {
    transition: transform 0.3s ease;
}

.read-more-btn:hover svg {
    transform: translateX(4px);
}

/* === CONTACT SECTION === */
.contact-section {
    background-color: #f6f0da;
    color: #231f20;
}

.form-input {
    width: 100%;
    border: none;
    border-bottom: 1px solid #d1ccc8;
    background: transparent;
    padding-bottom: 0.75rem;
    font-size: 13px;
    color: #231f20;
    transition: border-color 0.3s ease;
}

.form-input:focus {
    outline: none;
    border-bottom-color: #231f20;
}

.form-input::placeholder {
    color: #585058;
    font-weight: 300;
}

.form-textarea {
    width: 100%;
    border: 1px solid #d1ccc8;
    background: transparent;
    padding: 1rem;
    font-size: 13px;
    color: #231f20;
    transition: border-color 0.3s ease;
    resize: none;
    height: 120px;
}

.form-textarea:focus {
    outline: none;
    border-color: #231f20;
}

.form-textarea::placeholder {
    color: #585058;
    font-weight: 300;
}

.link-wrapper-contact {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 240px;
    padding-bottom: 0.5rem;
    text-decoration: none;
    color: #231f20;
    position: relative;
}

.link-wrapper-contact::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: #d1ccc8;
}

.link-wrapper-contact::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: #c3ac8f;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.link-wrapper-contact:hover::after {
    transform: scaleX(1);
}

.link-wrapper-contact svg {
    transition: transform 0.3s ease;
}

.link-wrapper-contact:hover svg {
    transform: translateX(5px);
}

/* Contact message feedback */
#contact-message {
    display: none;
    margin-top: 1rem;
    font-size: 13px;
    padding: 0.5rem 0;
}

#contact-message.success { color: #4a7c59; }
#contact-message.error { color: #b94a48; }

/* === FOOTER === */
.footer-link {
    transition: color 0.3s ease;
    text-decoration: none;
    color: inherit;
}

.footer-link:hover {
    color: #585058;
}

.marquee-container {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    align-items: center;
    user-select: none;
    padding-bottom: 1.5rem;
}

.marquee-content {
    display: inline-flex;
    align-items: center;
    animation: scroll 60s linear infinite;
}

.marquee-text {
    font-size: 5rem;
    line-height: 1;
    color: rgba(35, 31, 32, 0.08);
    text-transform: uppercase;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.diamond {
    width: 16px;
    height: 16px;
    background-color: rgba(35, 31, 32, 0.08);
    transform: rotate(45deg);
}

@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.vala-link {
    display: inline-block;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    text-decoration: none;
    color: inherit;
}

.vala-link:hover {
    transform: scale(0.95);
    color: #231f20;
    text-shadow: 0 0 8px rgba(35, 31, 32, 0.2);
}

/* fullPage.js specific */
.fp-watermark {
    display: none !important;
}

#fp-nav ul li a span,
.fp-slidesNav ul li a span {
    background: #c3ac8f !important;
}

.section {
    overflow-x: hidden !important;
}

.fp-section {
    overflow-x: hidden !important;
}

/* ==========================================================================
   FULL-PAGE SCROLL RHYTHM
   The homepage is a scroll story, not a stack of blocks: every narrative
   section owns exactly one viewport so each scroll reads as turning a page.
   The Insights + footer section keeps fullPage's auto height — a footer must
   never be padded out to a full screen.
   A hard 900px floor was deliberately left out: on a 1920x1080 laptop the
   usable viewport is ~800px, and a 900px floor would put an inner scrollbar
   inside every section and break the page-turn feel.
   ========================================================================== */
@media (min-width: 1024px) {
    #fullpage > .section:not(.fp-auto-height) {
        min-height: 100vh;
    }
}

/* Scroll to top button */
#scrollToTop {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(229, 229, 229, 0.5);
    backdrop-filter: blur(10px);
    cursor: pointer;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

#scrollToTop.visible {
    opacity: 1;
    visibility: visible;
}

#scrollToTop:hover {
    transform: scale(1.05);
    border-color: rgba(35, 31, 32, 0.3);
    background: rgba(255, 255, 255, 0.7);
}

#scrollToTop .arrow-icon {
    width: 16px;
    height: 16px;
    position: relative;
    z-index: 2;
}

.progress-ring {
    position: absolute;
    top: -1px;
    left: -1px;
    width: 62px;
    height: 62px;
    transform: rotate(-90deg);
}

.progress-ring-circle {
    transition: stroke-dashoffset 0.3s ease;
    stroke: #c3ac8f;
    stroke-width: 2;
    fill: transparent;
    stroke-linecap: round;
}

.progress-ring-bg {
    stroke: rgba(229, 229, 229, 0.4);
    stroke-width: 2;
    fill: transparent;
}

/* === SINGLE POST (blog) === */
.single-post-page {
    font-family: 'Inter', sans-serif;
    background-color: #f6f0da;
    color: #231f20;
    min-height: 100vh;
    overflow-y: auto;
}

.single-post-page body {
    overflow-y: auto;
}

/* === INNER PAGES (blog posts, portfolio) === */
body.inner-page {
    overflow-y: auto;
    background-color: #f6f0da;
    color: #231f20;
    min-height: 100vh;
}

/* Fixed nav for inner pages */
.inner-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: rgba(246, 240, 218, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #e5e5e5;
    padding: 1.25rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.inner-nav-logo {
    font-size: 1.1rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
    color: #231f20;
}

.inner-nav-desktop {
    display: flex;
    gap: 3rem;
    align-items: center;
}

.inner-nav-link {
    color: #231f20;
    font-size: 13px;
}

.inner-menu-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #231f20;
    padding: 0;
    display: none;
}

@media (max-width: 767px) {
    .inner-nav-desktop { display: none; }
    .inner-menu-btn { display: block; }
}

/* Mobile menu on inner pages has dark bg — ensure links are white */
.mobile-menu {
    color: #ffffff;
}

/* Breadcrumb */
.inner-breadcrumb {
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #585058;
    margin-bottom: 3rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.inner-breadcrumb a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s;
}

.inner-breadcrumb a:hover {
    color: #231f20;
}

.breadcrumb-sep {
    margin: 0 0.75rem;
    color: #d1ccc8;
}

.breadcrumb-current {
    color: #231f20;
}

/* Scroll-to-top for inner pages */
.inner-scroll-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #e5e5e5;
    cursor: pointer;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.inner-scroll-top.visible {
    opacity: 1;
    visibility: visible;
}

.inner-scroll-top:hover {
    border-color: #231f20;
    transform: scale(1.05);
}

/* Archive pagination */
.archive-pagination {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 4rem;
}

.archive-pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.archive-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.875rem;
    border: 1px solid #e5e5e5;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #585058;
    text-decoration: none;
    transition: border-color 0.3s ease, color 0.3s ease;
}

.archive-pagination .page-numbers:hover,
.archive-pagination .page-numbers.current {
    border-color: #231f20;
    color: #231f20;
}

.archive-pagination .page-numbers.dots {
    border-color: transparent;
}

/* ── Contact Form 7 overrides ───────────────────────────────────────────────── */

/* Make CF7 field wrappers block so inputs take full width */
.wpcf7-form-control-wrap {
    display: block;
}

/* CF7 forms inside the front-page contact section and contact page */
.fp-contact-form .wpcf7,
.contact-page-form .wpcf7 {
    width: 100%;
}

.fp-contact-form .wpcf7-form,
.contact-page-form .wpcf7-form {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    width: 100%;
}

/* Validation error tip */
.wpcf7-not-valid-tip {
    display: block;
    font-size: 11px;
    letter-spacing: 0.05em;
    color: #c0392b;
    margin-top: 0.35rem;
}

/* Response output (success / error banner) */
.wpcf7-response-output {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.75rem 1rem;
    margin-top: 0 !important;
    border: 1px solid currentColor;
}

.wpcf7-response-output.wpcf7-mail-sent-ok {
    color: #2e7d32;
    border-color: #4caf50;
    background: #f1f8e9;
}

.wpcf7-response-output.wpcf7-mail-sent-ng,
.wpcf7-response-output.wpcf7-aborted,
.wpcf7-response-output.wpcf7-validation-errors,
.wpcf7-response-output.wpcf7-acceptance-missing {
    color: #c62828;
    border-color: #f44336;
    background: #fff3f3;
}

.wpcf7-response-output.wpcf7-spam-blocked {
    color: #e65100;
    border-color: #ff9800;
    background: #fff8f0;
}

/* Spinner shown during CF7 AJAX submission */
.wpcf7 .wpcf7-spinner {
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.5rem;
}

/* 404 page */
body.error404 .inner-nav {
    background: #f6f0da;
}

/* Service page link cards — remove default <a> styling from card wrappers */
a.card-wrapper {
    text-decoration: none;
    color: inherit;
}

a.card-wrapper:hover .service-card {
    box-shadow: 0 25px 50px rgba(0,0,0,0.18);
}

/* ── Admin bar: push inner nav below the WP toolbar ────────────────────────── */
html.admin-bar .inner-nav {
    top: 32px;
}
@media screen and (max-width: 782px) {
    html.admin-bar .inner-nav {
        top: 46px;
    }
}

/* ── Homepage mobile header — fixed at top, mirrors inner-nav behaviour ──── */
@media (max-width: 767px) {
    .hero-section .content-layer > header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 200;
        padding: 0.9rem 1.5rem;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-bottom: 1px solid transparent;
        transition: background 0.35s ease, border-color 0.35s ease, backdrop-filter 0.35s ease;
    }
    .hero-section .content-layer > header.header-dark {
        background: rgba(20, 20, 20, 0.92);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border-bottom-color: rgba(255, 255, 255, 0.07);
    }
    .hero-section > .content-layer {
        padding-top: 56px;
    }
    html.admin-bar .hero-section .content-layer > header {
        top: 46px;
    }
}

/* ── Journal mosaic grid ────────────────────────────────────────────────────── */
.journal-mosaic-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.875rem;
}

@media (max-width: 1023px) {
    .journal-mosaic-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
}

@media (max-width: 599px) {
    .journal-mosaic-grid {
        grid-template-columns: 1fr;
        gap: 0.625rem;
    }
    /* Override inline grid-column: span 2 on mobile */
    .journal-mosaic-item {
        grid-column: 1 !important;
    }
}

.journal-mosaic-item {
    display: block;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    background: #1a1814;
    /* aspect-ratio set per class below */
}

.journal-mosaic-item.mosaic-wide  { aspect-ratio: 16 / 9; max-height: 420px; }
.journal-mosaic-item.mosaic-tall  { aspect-ratio: 3 / 4;  max-height: 480px; }

/* On tablet, tall portrait cards become square to avoid very tall columns */
@media (max-width: 1023px) {
    .journal-mosaic-item.mosaic-tall { aspect-ratio: 4 / 3; }
}

@media (max-width: 599px) {
    .journal-mosaic-item.mosaic-wide,
    .journal-mosaic-item.mosaic-tall { aspect-ratio: 4 / 3; }
}

.journal-mosaic-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s ease;
}

.journal-mosaic-item:hover img {
    transform: scale(1.04);
}

.journal-mosaic-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 3rem 1.25rem 1.25rem;
    background: linear-gradient(to top, rgba(10,8,6,0.92) 0%, rgba(10,8,6,0.35) 60%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    pointer-events: none;
}

.journal-mosaic-date {
    display: block;
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 500;
    color: rgba(255,255,255,0.55);
    margin-bottom: 0.4rem;
}

.journal-mosaic-title {
    font-size: clamp(0.875rem, 1.5vw, 1.25rem);
    color: #fff;
    text-transform: uppercase;
    line-height: 1.15;
    letter-spacing: 0.04em;
    font-weight: 400;
    margin: 0;
}

.journal-mosaic-item.mosaic-wide .journal-mosaic-title {
    font-size: clamp(1rem, 2vw, 1.5rem);
}

.journal-mosaic-excerpt {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, margin-top 0.35s ease;
    margin-top: 0;
}

.journal-mosaic-item:hover .journal-mosaic-excerpt {
    max-height: 120px;
    margin-top: 0.625rem;
}

.journal-mosaic-excerpt p {
    font-size: 12px;
    color: rgba(255,255,255,0.72);
    line-height: 1.6;
    margin: 0 0 0.625rem;
}

.journal-mosaic-read-more {
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 600;
    color: #fff;
}

/* Load More button */
.journal-load-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 600;
    color: #231f20;
    background: transparent;
    border: 1px solid #d1ccc8;
    padding: 0.875rem 2.5rem;
    cursor: pointer;
    transition: border-color 0.3s ease, color 0.3s ease;
    font-family: inherit;
}

.journal-load-more-btn:hover {
    border-color: #231f20;
}

.journal-load-more-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Footer (dark green) ─────────────────────────────────────────────────── */
.fp-footer {
    background-color: #46554b;
    color: #f6f0da;
}
.fp-footer .title-text,
.fp-footer h1, .fp-footer h2, .fp-footer h3,
.fp-footer p,
.fp-footer span,
.fp-footer div {
    color: #f6f0da;
}
.fp-footer .footer-muted {
    color: rgba(246, 240, 218, 0.5);
}
.fp-footer .footer-link {
    color: #f6f0da;
    text-decoration: none;
    transition: opacity 0.2s ease;
}
.fp-footer .footer-link:hover {
    opacity: 0.65;
}
.fp-footer .marquee-container {
    border-color: rgba(246, 240, 218, 0.15);
}
.fp-footer .fancy-marquee {
    color: rgba(246, 240, 218, 0.35);
}
.fp-footer .diamond {
    background-color: rgba(246, 240, 218, 0.4);
}

/* ── Footer social icons ─────────────────────────────────────────────────── */
.footer-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(246, 240, 218, 0.25);
    border-radius: 50%;
    color: #c3ac8f;
    text-decoration: none;
    transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
}
.footer-social-icon:hover {
    border-color: #c3ac8f;
    color: #f6f0da;
    background: rgba(195, 172, 143, 0.15);
}

/* ── About section: image hover swap ────────────────────────────────────── */
.about-images-wrapper {
    display: flex;
    gap: 1.5rem;
}
@media (min-width: 1024px) {
    .about-images-wrapper {
        gap: 2rem;
    }
}

/* On mobile/tablet, about-img-small is hidden — big image takes full width */
@media (max-width: 1023px) {
    .about-img-big {
        width: 100%;
        height: 100%;
    }
}
.about-img-big {
    width: 62%;
    height: 95%;
    flex-shrink: 0;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Video play button ───────────────────────────────────────────────────── */
.about-video-trigger {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}
.play-button-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    pointer-events: none;
    opacity: 0;
}
/* Reveal play button only after the image curtain animation completes (~1.9s) */
.fp-section.active .about-img-big .play-button-overlay {
    opacity: 1;
    transition: opacity 0.4s ease 1.9s;
}
.play-btn-pulse {
    position: absolute;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    animation: play-pulse 2s ease-out infinite;
}
.play-btn-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: play-blink 2.4s ease-in-out infinite;
    z-index: 1;
    box-shadow: 0 4px 20px rgba(0,0,0,0.18);
    padding-left: 4px;
}
@keyframes play-pulse {
    0%   { transform: scale(1);   opacity: 0.7; }
    50%  { transform: scale(1.5); opacity: 0.25; }
    100% { transform: scale(2);   opacity: 0; }
}
@keyframes play-blink {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%       { opacity: 0.6; transform: scale(1.07); }
}

/* ── Our Service section ─────────────────────────────────────────────────── */
.our-service-section,
.fp-section:has(.our-service-section) {
    background-color: #f6f0da;
}
.our-service-img {
    overflow: hidden;
    width: 100%;
}
/* Override curtain-img's height:100% and object-fit:cover — show full image at natural height */
.our-service-img .curtain-img {
    height: auto;
    object-fit: initial;
}

/* ── Portfolio compact image sizes (section 7 combined with footer) ────────── */
.portfolio-img-large {
    width: 100%;
    height: 260px;
    overflow: hidden;
}
.portfolio-img-small {
    width: 100%;
    max-width: 180px;
    height: 180px;
    overflow: hidden;
    margin-left: auto;
}
.portfolio-img-large img,
.portfolio-img-small img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── Portfolio bottom section ────────────────────────────────────────────── */
.fp-portfolio-bottom {
    border-top: 1px solid #e5e5e5;
}

/* ── Inner-page responsive padding ──────────────────────────────────────── */
.inner-page-main {
    padding: 8rem 2rem 6rem;
}
@media (max-width: 767px) {
    .inner-page-main {
        padding: 5rem 1.25rem 4rem;
    }
}

/* ── Portfolio archive: responsive grid ─────────────────────────────────── */
.portfolio-archive-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}
@media (max-width: 599px) {
    .portfolio-archive-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* ── Mobile overrides (≤ 767px) ─────────────────────────────────────────── */
@media (max-width: 767px) {
    /* Allow native page scroll in fullPage responsive mode */
    body {
        overflow-y: auto !important;
    }

    /* Logo: scale down from the desktop 150px to fit the mobile nav bar */
    .logo img,
    .inner-nav-logo img,
    .footer-logo-img {
        height: 80px !important;
    }

    /* Reset fullPage.js container — clear desktop transforms so sections
       stack as normal block elements instead of overlapping */
    #fullpage {
        transform: none !important;
        -webkit-transform: none !important;
        transition: none !important;
        height: auto !important;
        position: static !important;
    }

    /* Sections: remove absolute positioning and transforms left by fullPage.js */
    .fp-section,
    .section {
        position: relative !important;
        transform: none !important;
        -webkit-transform: none !important;
        top: auto !important;
        left: auto !important;
    }

    /* Let tall sections size to their content so they flow in page scroll */
    .about-section,
    .our-service-section,
    .services-section,
    .blog-section,
    #contact {
        height: auto !important;
        min-height: unset !important;
        overflow: visible !important;
    }

    /* fp-overflow wrappers added by fullPage.js create a scroll jail on mobile
       (user must exhaust inner scroll before outer page can scroll) — remove it */
    .fp-overflow {
        max-height: none !important;
        overflow: visible !important;
        -webkit-overflow-scrolling: auto !important;
    }

    /* Marquee: 5rem is too large on phones */
    .marquee-text {
        font-size: 2.5rem;
    }

    /* Service cards: reduce fixed heights so they don't dominate viewport */
    .service-card {
        min-height: 220px;
    }
    .card-row2 .service-card {
        height: auto;
        min-height: 220px;
    }
    .img-container {
        height: 160px;
        width: 70%;
    }

    /* link-wrapper: 280px is wider than many phone screens minus padding */
    .link-wrapper {
        width: auto;
        min-width: 180px;
    }
    .link-wrapper-white {
        width: auto;
        min-width: 160px;
    }
    .link-wrapper-contact {
        width: auto;
        min-width: 160px;
    }

    /* About: stack images vertically, full width, 9:16 each, no hover swap */
    .about-images-wrapper {
        height: auto !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 1rem;
    }

    .about-img-big {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 9 / 16;
        transition: none !important;
    }

    /* Portfolio cards: cap heights on phones */
    .journal-card {
        height: 260px !important;
    }

    /* Portfolio: remove fixed height on parent wrapper that forces overflow */
    #portfolio-grid > a {
        height: auto !important;
    }

}


/* === HERO v3 (full-bleed cinematic layout per spec) === */
.hero-section-v3 {
    min-height: clamp(720px, 100vh, 100vh);
}

.hero-main-v3 { position: relative; padding-bottom: 1rem; }

/* Stats bar: floating glass panel, 40px from bottom, 90% width up to 1400px, 90px tall */
.hero-stats-box {
    position: relative;
    z-index: 20;
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    width: 90%;
    max-width: 1400px;
    height: 78px;
    margin: 0 auto 24px;
    background: rgba(20, 25, 22, 0.55);
    border: 1px solid rgba(220, 210, 190, 0.35);
    border-radius: 6px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.hero-stat-v3 {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-right: 1px solid rgba(201, 168, 106, 0.5);
}

.hero-stat-v3:last-child {
    border-right: none;
}

.hero-stat-num-v3 {
    font-family: 'Playfair Display', serif;
    font-size: 32px;
    line-height: 1;
    color: #D4B06A;
    font-weight: 400;
}

.hero-stat-label-v3 {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #D8D3C8;
}

/* Overlay: strong left gradient for text safety + a uniform wash across the whole video */
.overlay-v3 {
    background:
        linear-gradient(90deg,
            rgba(5,8,8,0.8) 0%,
            rgba(5,8,8,0.55) 22%,
            rgba(5,8,8,0.25) 38%,
            rgba(5,8,8,0.08) 60%,
            rgba(5,8,8,0) 75%),
        rgba(0,0,0,0.25);
}

.hero-section-v3 .background-video,
.hero-section-v3 .background-image {
    object-position: right center;
    background-position: right center;
}

@media (max-width: 767px) {
    .hero-header-v2 { min-height: 64px; }
    .hero-logo-img { width: 120px; }
    .hero-header-inner { align-items: center; }

    .hero-main-inner { max-width: 100%; }
    .hero-heading-v2 { font-size: clamp(2.1rem, 10vw, 2.9rem); }
    .hero-tagline-v2 { font-size: 13px; max-width: 100%; }

    .hero-cta-row-v2 { gap: 14px; }
    .hero-btn-outline { width: auto; padding: 0 18px; height: 46px; }
    .hero-watch-btn { font-size: 11px; }
    .hero-play-circle { width: 42px; height: 42px; }

    .hero-stats-box {
        flex-direction: column;
        width: 100%;
        height: auto;
        padding: 0.25rem 0;
    }
    .hero-stat-v3 {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 0.85rem 1.1rem;
        border-right: none;
        border-bottom: 1px solid rgba(201, 168, 106, 0.35);
        gap: 0.75rem;
    }
    .hero-stat-v3:last-child {
        border-bottom: none;
    }
    .hero-stat-num-v3 { font-size: 24px; }
    .hero-stat-label-v3 { text-align: right; }
}

/* Extra safety: on short viewports, shrink further so the stats bar never clips */
@media (max-height: 820px) {
    .hero-main-inner { padding-top: 16px; }
    .hero-heading-v2 { font-size: clamp(2rem, 4vw, 3.4rem); margin-bottom: 0.6rem; }
    .hero-eyebrow { margin-bottom: 12px; }
    .hero-tagline-v2 { display: none; }
    .hero-cta-row-v2 { margin-top: 16px; }
    .hero-main-v3 { padding-bottom: 0.5rem; }
    .hero-stats-box { height: auto; min-height: 64px; margin-bottom: 16px; }
    .hero-stat-num-v3 { font-size: 26px; }
    .hero-stat-label-v3 { font-size: 10px; }
}


/* ==========================================================================
   HERO v3.1 — alignment with the client-approved mockup + mobile rebuild
   (appended block: keep it at the very end of the file)
   ========================================================================== */

/* Logo crop window: keeps the artwork undistorted even when the logo file
   contains transparent padding (object-fit: cover instead of a forced height) */
.brand-crop {
    display: block;
    width: var(--logo-w, 170px);
    aspect-ratio: 7 / 4;
    overflow: hidden;
    line-height: 0;
}
.brand-crop img,
.hero-header-v2 .brand-crop img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    object-fit: cover;
    object-position: center;
}

/* Shared details taken from the mockup */
.hero-eyebrow { color: var(--dayanarc-warm-white); font-weight: 600; }
.hero-btn-outline { font-weight: 600; }
.hero-lang { display: inline-flex; align-items: center; gap: 8px; }
.hero-play-circle {
    width: 46px;
    height: 46px;
    border-color: rgba(242, 238, 229, 0.85);
    color: var(--dayanarc-warm-white);
}
.hero-play-circle svg { margin-left: 2px; }

.hero-stat-icon { display: none; }
.hero-stat-text { display: flex; flex-direction: column; align-items: center; gap: 6px; }

/* ---------- Desktop / tablet landscape ---------- */
@media (min-width: 768px) {
    /* Header was ~230px tall because of the padded logo file + py-6 */

}

@media (min-width: 768px) and (min-height: 821px) {
    .hero-main-inner { max-width: 560px; }
    .hero-heading-v2 { font-size: clamp(2.5rem, 5.2vw, 4.75rem); }
}

/* ---------- Mobile menu (front page drawer) ---------- */
body.home .menu-overlay {
    z-index: 250;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.mobile-menu.mm-home {
    width: min(88%, 380px);
    z-index: 300;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0;
    padding: calc(env(safe-area-inset-top, 0px) + 14px) 26px calc(env(safe-area-inset-bottom, 0px) + 26px);
    background: linear-gradient(180deg, #0f1311 0%, #171d19 100%);
    border-left: 1px solid rgba(201, 168, 106, 0.22);
    color: var(--dayanarc-warm-white);
    overflow-y: auto;
    visibility: hidden;
    transition: right 0.45s cubic-bezier(0.77, 0.2, 0.05, 1), visibility 0s linear 0.45s;
}
.mobile-menu.mm-home.active {
    visibility: visible;
    box-shadow: -30px 0 60px rgba(0, 0, 0, 0.45);
    transition: right 0.45s cubic-bezier(0.77, 0.2, 0.05, 1), visibility 0s;
}

.mm-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}
.mm-logo { --logo-w: 112px; margin-block: -8px; }
.mm-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    color: var(--dayanarc-gold);
    background: transparent;
    border: 1px solid rgba(201, 168, 106, 0.55);
    border-radius: 2px;
}

.mm-nav { display: flex; flex-direction: column; }
.mm-link {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 15px 0;
    border-bottom: 1px solid rgba(242, 238, 229, 0.08);
    font-family: 'Playfair Display', serif;
    font-size: 25px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--dayanarc-warm-white);
    text-decoration: none;
    transition: color 0.25s ease;
}
.mm-link:hover,
.mm-link.is-active { color: var(--dayanarc-gold); }
.mm-num {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    letter-spacing: 0.2em;
    color: var(--dayanarc-gold);
    min-width: 22px;
}

.mm-bottom { margin-top: auto; padding-top: 28px; }
.mm-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    border: 1px solid var(--dayanarc-gold);
    color: var(--dayanarc-warm-white);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
}
.mm-meta {
    margin-top: 18px;
    font-size: 11px;
    letter-spacing: 0.08em;
    line-height: 1.7;
    text-transform: uppercase;
    color: var(--dayanarc-sec-text);
}


/* ==========================================================================
   HERO stats box v3.2 — matched to the approved mockup
   (same container as header/text, anchored to the bottom, short gold
   dividers, cream icons + numbers, two-line labels)
   ========================================================================== */

/* Short gold dividers instead of full-height borders */
.hero-section-v3 .hero-stat-v3 { position: relative; border-right: 0; }
.hero-section-v3 .hero-stat-v3:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 1px;
    height: 53%;
    transform: translateY(-50%);
    background: rgba(200, 170, 100, 0.5);
}
.hero-section-v3 .hero-stat-num-v3 { color: var(--dayanarc-warm-white); }
.hero-section-v3 .hero-stat-label-v3 { color: #EDE8DC; }


/* ==========================================================================
   FINAL HERO SPECIFICATION
   Desktop: exact px at a 1920x1080 canvas (--u = 1px there, scales down
   proportionally on smaller screens). Mobile: dedicated 393x852 layout.
   ========================================================================== */

/* Slider dots / side indicators are removed everywhere */
#fp-nav,
.fp-slidesNav { display: none !important; }

.hero-section-v3 .hero-eyebrow { color: #D2B06A; font-weight: 500; }
.hero-section-v3 .hero-heading-v2 { color: #F4F1EA; font-weight: 400; }
.hero-section-v3 .hero-heading-accent { color: #C7A66A; }

/* ------------------------------ DESKTOP ------------------------------ */
@media (min-width: 768px) {

    .hero-section-v3 {
        --u: min(calc(100vw / 1920), calc(100vh / 900));
        --hero-media-pos: 45% center;
        height: 100vh;
        min-height: 640px;
        background-color: #0a0d0c;
    }

    /* Media: architecture on the right (starts ~x=1050 at 1920), dark negative space on the left */
    .hero-section-v3 .background-image,
    .hero-section-v3 .background-video {
        left: auto;
        right: 0;
        width: 60%;
        height: 100%;
        object-fit: cover;
        background-size: cover;
        object-position: var(--hero-media-pos);
        background-position: var(--hero-media-pos);
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.5) 10%, #000 24%);
        mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.5) 10%, #000 24%);
    }
    .hero-section-v3 .overlay-v3 {
        background:
            linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.08) 100%),
            linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0) 18%),
            linear-gradient(0deg, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0) 26%);
    }

    .hero-section-v3 .content-layer { position: static; height: auto; padding: 0; }

    /* Header: absolute, 96px high, 80px side padding */
    .hero-section-v3 .content-layer > .hero-header-v2 {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 40;
        display: block;
        height: calc(96 * var(--u));
        min-height: 0;
        margin: 0;
        padding: 0;
        background: none;
        border-bottom: 0;
    }
    .hero-section-v3 .hero-header-inner { position: relative; display: block; width: 100%; max-width: none; height: 100%; }

    /* Logo: left 80, width 170. The logo file has transparent padding, so the box is
       placed so the visible artwork sits on the same centre line as nav + CTA (y = 50). */
    .hero-section-v3 .hero-header-inner .logo { position: absolute; left: calc(80 * var(--u)); top: calc(1.5 * var(--u)); }
    .hero-section-v3 .hero-header-v2 .brand-crop { --logo-w: calc(200 * var(--u)); margin: 0; }

    /* Navigation: centred, top 42, 12px / 2px / #D6D1C4, active #C7A66A */
    .hero-section-v3 .hero-nav-v2 {
        position: absolute;
        left: 50%;
        top: calc(42 * var(--u));
        transform: translateX(-50%);
        gap: calc(40 * var(--u));
    }
    .hero-section-v3 .hero-nav-v2 .nav-link {
        font-size: max(11px, calc(12 * var(--u)));
        letter-spacing: max(1.5px, calc(2 * var(--u)));
        color: #D6D1C4;
    }
    .hero-section-v3 .hero-nav-v2 .nav-link-active { color: #C7A66A; border-bottom-color: #C7A66A; }

    /* CTA: right 80, top 28, 150 x 44, 1px solid #C7A66A */
    .hero-section-v3 .hero-header-right {
        position: absolute;
        right: calc(80 * var(--u));
        top: calc(28 * var(--u));
        height: calc(44 * var(--u));
        min-height: 40px;
    }
    .hero-section-v3 .hero-lang { font-size: max(11px, calc(12 * var(--u))); margin-right: calc(24 * var(--u)); }
    .hero-section-v3 .hero-talk-btn {
        width: calc(150 * var(--u));
        min-width: 120px;
        height: 100%;
        border: 1px solid #C7A66A;
        font-size: max(10.5px, calc(11.5 * var(--u)));
    }

    /* Content container: absolute, left 80, top 220, width 520 */
    .hero-section-v3 .hero-main-v3 {
        position: absolute;
        z-index: 10;
        left: calc(80 * var(--u));
        top: calc(175 * var(--u));
        width: calc(520 * var(--u));
        flex: none;
        padding: 0;
    }
    .hero-section-v3 .hero-main-inner { max-width: none; padding: 0; }
    .hero-section-v3 .hero-eyebrow {
        font-size: max(11px, calc(13 * var(--u)));
        letter-spacing: calc(4 * var(--u));
        margin-bottom: calc(35 * var(--u));
    }
    .hero-section-v3 .hero-heading-v2 {
        font-family: 'Playfair Display', 'Cormorant Garamond', 'Times New Roman', serif;
        font-size: calc(86 * var(--u));
        line-height: 0.95;
        letter-spacing: -0.01em;
        white-space: nowrap;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        margin: 0;
    }
    .hero-section-v3 .hero-cta-row-v2 { margin-top: calc(45 * var(--u)); gap: calc(25 * var(--u)); flex-wrap: nowrap; }
    .hero-section-v3 .hero-btn-outline {
        width: calc(170 * var(--u));
        min-width: 150px;
        height: calc(48 * var(--u));
        min-height: 44px;
        padding: 0;
        border: 1px solid #C7A66A;
        font-size: max(10.5px, calc(11.5 * var(--u)));
        letter-spacing: 0.08em;
        white-space: nowrap;
    }
    .hero-section-v3 .hero-watch-btn { font-size: max(10.5px, calc(11.5 * var(--u))); gap: calc(14 * var(--u)); }
    .hero-section-v3 .hero-play-circle { width: calc(48 * var(--u)); height: calc(48 * var(--u)); min-width: 40px; min-height: 40px; }

    /* Stats card: absolute, bottom 45, left/right 80, height 110, 3 equal columns */
    .hero-section-v3 .hero-stats-box {
        position: absolute;
        z-index: 30;
        left: calc(80 * var(--u));
        right: calc(80 * var(--u));
        bottom: calc(65 * var(--u));
        width: auto;
        max-width: none;
        height: calc(110 * var(--u));
        min-height: 0;
        margin: 0;
        background: rgba(20, 25, 22, 0.55);
        -webkit-backdrop-filter: blur(15px);
        backdrop-filter: blur(15px);
        border: 1px solid rgba(255, 255, 255, 0.25);
        border-radius: 8px;
    }
    .hero-section-v3 .hero-stat-v3 {
        flex: 0 0 33.3333%;
        flex-direction: row;
        justify-content: center;
        gap: calc(24 * var(--u));
    }
    .hero-section-v3 .hero-stat-icon {
        display: inline-flex;
        flex: 0 0 auto;
        width: max(34px, calc(52 * var(--u)));
        height: max(34px, calc(52 * var(--u)));
        color: var(--dayanarc-warm-white);
    }
    .hero-section-v3 .hero-stat-icon svg { width: 100%; height: 100%; stroke-width: 1.3; }
    .hero-section-v3 .hero-stat-text { align-items: flex-start; text-align: left; gap: calc(8 * var(--u)); }
    .hero-section-v3 .hero-stat-num-v3 { font-size: max(26px, calc(40 * var(--u))); }
    .hero-section-v3 .hero-stat-label-v3 {
        font-size: max(10px, calc(11.5 * var(--u)));
        font-weight: 600;
        letter-spacing: 0.14em;
        line-height: 1.3;
        max-width: 9.5em;
        text-align: left;
    }
}

/* ------------------------------ MOBILE ------------------------------- */
@media (max-width: 767px) {

    .hero-section.hero-section-v3 {
        --hero-m-pos: 60% center;
        display: flex !important;
        flex-direction: column !important;
        height: 100vh !important;
        height: 100svh !important;
        min-height: 0 !important;
        max-height: none !important;
        background-color: #0a0d0c;
        overflow: hidden !important;
    }
    /* fp-overflow must stretch to fill the section exactly */
    .hero-section-v3 > .fp-overflow {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        height: 100% !important;
        overflow: hidden !important;
    }
    .hero-section-v3 .content-layer {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        height: 100% !important;
        padding: 0 24px;
    }

    /* Static image only (no video) */
    .hero-section-v3 .background-video { display: none !important; }
    .hero-section-v3 .background-image {
        background-image: var(--hero-bg-mobile) !important;
        background-size: cover;
        background-position: var(--hero-m-pos);
    }
    .hero-section-v3 .overlay-v3 {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.45));
    }

    /* Header: 80px, logo left 24 / width 120, menu right 24 / top 25 / 40x40 */
    .hero-section-v3 .content-layer > .hero-header-v2 {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 200;
        height: 80px;
        min-height: 0;
        margin: 0;
        padding: 0;
        background: none;
    }
    .hero-section-v3 .hero-header-inner { position: relative; display: block; width: 100%; height: 80px; }
    /* logo file has transparent padding: box centred on the menu button line (y = 45) */
    .hero-section-v3 .hero-header-inner .logo { position: absolute; left: 24px; top: 11px; }
    .hero-section-v3 .hero-header-v2 .brand-crop { --logo-w: 145px; margin: 0; }
    .hero-section-v3 .hero-menu-wrap { position: absolute; right: 24px; top: 25px; }
    .hero-menu-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
        color: #fff;
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.4);
        border-radius: 2px;
        -webkit-tap-highlight-color: transparent;
    }

    /* Content: top 190, left aligned */
    .hero-section-v3 .hero-main-v3 { position: relative; z-index: 10; flex: none; padding: 145px 0 0; }
    .hero-section-v3 .hero-main-inner { max-width: 100%; padding: 0; }
    .hero-section-v3 .hero-eyebrow { font-size: 11px; letter-spacing: 3px; margin-bottom: 24px; }
    .hero-section-v3 .hero-heading-v2 {
        width: 345px;
        max-width: 100%;
        font-size: 46px;
        line-height: 0.95;
        letter-spacing: -0.01em;
        text-align: left;
        margin: 0;
    }
    .hero-section-v3 .hero-cta-row-v2 { flex-direction: row; flex-wrap: nowrap; align-items: center; margin-top: 32px; gap: 18px; }
    .hero-section-v3 .hero-btn-outline {
        width: 170px;
        height: 46px;
        padding: 0;
        font-size: 10.5px;
        letter-spacing: 0.08em;
        white-space: nowrap;
    }
    .hero-section-v3 .hero-watch-btn { white-space: nowrap; gap: 10px; font-size: 10.5px; }
    .hero-section-v3 .hero-play-circle { width: 48px; height: 48px; }

    /* Stats card: absolute, bottom 30, left/right 24, height 90 */
    .hero-section-v3 .hero-stats-box {
        position: absolute;
        z-index: 30;
        left: 24px;
        right: 24px;
        bottom: 50px;
        flex-direction: row;
        width: auto;
        height: 90px;
        min-height: 0;
        margin: 0;
        padding: 0;
        background: rgba(15, 20, 18, 0.75);
        -webkit-backdrop-filter: blur(15px);
        backdrop-filter: blur(15px);
        border: 1px solid rgba(199, 166, 106, 0.4);
        border-radius: 6px;
    }
    .hero-section-v3 .hero-stat-v3 {
        flex: 0 0 33.3333%;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: auto;
        padding: 0 6px;
        gap: 6px;
        border-bottom: 0;
    }
    .hero-section-v3 .hero-stat-icon { display: none; }
    .hero-section-v3 .hero-stat-text { align-items: center; text-align: center; gap: 6px; }
    .hero-section-v3 .hero-stat-num-v3 { font-size: 28px; }
    .hero-section-v3 .hero-stat-label-v3 { font-size: 9px; letter-spacing: 1px; line-height: 1.35; text-align: center; }
}

/* ==========================================================================
   SERVICES SECTION — editorial carousel
   One viewport, vertically centred. Left column is a narrow editorial text
   block; right column is a horizontal carousel showing three cards at a time.
   Mobile-first: base = mobile (<768px), then tablet (>=768px), then
   desktop (>=1024px).
   ========================================================================== */

.services-luxe {
    background-color: #080D0B; /* never pure #000 */
    color: #F3EEE5;
    padding: 56px 0;
}

.services-luxe-container {
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
}

.services-luxe-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}

/* --- Left editorial column --- */
.services-luxe-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.services-luxe-label {
    display: inline-block;
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #C8A15A;
    margin-bottom: 18px;
}

.services-luxe-heading {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: 32px;
    line-height: 1;
    color: #F3EEE5;
    max-width: 100%;
    margin: 0 0 18px;
}

.services-luxe-desc {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.7;
    color: #A9AAA5;
    max-width: 340px;
    margin: 0 0 26px;
}

.services-luxe-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 42px;
    padding: 0;
    border: 1px solid #B58A45;
    color: #F3EEE5;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    background: transparent;
    transition: background 0.3s ease, color 0.3s ease;
}

.services-luxe-btn:hover,
.services-luxe-btn:focus-visible {
    background: #B58A45;
    color: #080D0B;
}

/* --- Carousel shell --- */
.svc-carousel {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
}

.svc-carousel-head {
    display: none; /* mobile puts the controls under the card, next to the counter */
}

.svc-viewport {
    overflow: hidden;
    width: 100%;
}

.svc-track {
    display: flex;
    gap: 18px;
    will-change: transform;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
    .svc-track { transition: none; }
}

/* --- Card --- */
.svc-card {
    position: relative;
    display: block;
    flex: 0 0 85vw;
    width: 85vw;
    height: 380px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    text-decoration: none;
    transition: border-color 0.4s ease;
}

.svc-card:hover,
.svc-card:focus-visible {
    border-color: rgba(200, 161, 90, 0.75);
}

.svc-card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.svc-card:hover .svc-card-img {
    transform: scale(1.04);
}

/* Flat wash for overall legibility, plus a deeper foot so the text block
   always sits on dark pixels whatever the photograph underneath. */
.svc-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0.78) 100%);
    pointer-events: none;
    z-index: 1;
}

.svc-card-num {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 2;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    letter-spacing: 1.5px;
    color: #C8A15A;
}

/* Icon, title and description share one bottom-anchored stack, so a long
   title pushes the icon up instead of colliding with it. */
.svc-card-body {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
}

.svc-card-icon {
    display: block;
    width: 18px;
    height: 18px;
    color: #C8A15A;
    flex: none;
}

.svc-card-icon svg {
    width: 100%;
    height: 100%;
}

.svc-card-title {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.2;
    color: #FFFFFF;
}

.svc-card-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    line-height: 1.5;
    color: #B5B5B5;
}

/* --- Counter, progress and mobile controls --- */
.svc-carousel-foot {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
}

.svc-count {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    letter-spacing: 2px;
    color: #A9AAA5;
    flex: none;
}

.svc-count [data-svc-current] {
    color: #F3EEE5;
}

.svc-progress {
    position: relative;
    display: block;
    flex: 1 1 auto;
    height: 1px;
    background: rgba(255, 255, 255, 0.15);
}

.svc-progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 1px;
    width: 33%;
    background: #B58A45;
    transition: width 0.4s ease, margin-left 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
    .svc-progress-bar { transition: none; }
}

.svc-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: none;
    border: 1px solid #B58A45;
    border-radius: 50%;
    background: transparent;
    color: #F3EEE5;
    cursor: pointer;
    padding: 0;
    transition: background 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}

.svc-nav:hover:not(:disabled),
.svc-nav:focus-visible {
    background: #B58A45;
    color: #080D0B;
}

.svc-nav:disabled {
    opacity: 0.3;
    cursor: default;
}

/* Below 1024px the arrows sit inline in the foot, flanking the counter —
   "< 01 / 06 >" — because there is no room for a separate control row. */
.svc-nav-inline {
    width: 30px;
    height: 30px;
}

/* --- Tablet: 768–1023px --- */
@media (min-width: 768px) {
    .services-luxe { padding: 72px 0; }
    .services-luxe-container { padding-left: 24px; padding-right: 24px; }
    .services-luxe-heading { font-size: 38px; max-width: 420px; }
    .services-luxe-desc { max-width: 420px; }

    .svc-card {
        flex: 0 0 200px;
        width: 200px;
        height: 320px;
    }
}

/* --- Laptop / desktop: 1024px+ --- */
@media (min-width: 1024px) {
    .services-luxe {
        min-height: 100vh;
        display: flex;
        align-items: center;
        padding: 0;
    }

    .services-luxe-container {
        padding-left: 40px;
        padding-right: 40px;
    }

    /* 32% editorial column, carousel sized to exactly three cards and pushed
       to the right edge — the gap between them is the section's breathing room. */
    .services-luxe-grid {
        grid-template-columns: 32% auto;
        justify-content: space-between;
        align-items: center;
        gap: 40px;
    }

    .services-luxe-heading {
        font-size: 42px;
        line-height: 0.98;
        max-width: 350px;
    }

    .services-luxe-desc {
        max-width: 300px;
    }

    /* Three 170px cards with two 18px gaps. */
    .svc-carousel {
        width: 546px;
    }

    .svc-carousel-head {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        margin-bottom: 18px;
    }

    .svc-card {
        flex: 0 0 170px;
        width: 170px;
        height: 300px;
    }

    .svc-card-title {
        font-size: 16px;
    }

    /* The head holds the arrows on desktop; the foot is counter + progress. */
    .svc-nav-inline {
        display: none;
    }
}

@media (min-width: 1280px) {
    .services-luxe-container {
        padding-left: 60px;
        padding-right: 60px;
    }
}


/* ==========================================================================
   HERO v4 + SERVICES v4 — FINAL APPROVED SPEC
   This block is the single source of truth for the hero and the services
   section. It is appended last on purpose, so it overrides every earlier
   rule. Do not edit the older hero/services blocks above — edit here.

   Desktop reference canvas: 1920 x 900.  --u == 1px on that canvas and
   scales down proportionally on smaller screens (never up past 1px).
   Mobile reference canvas: 393 x 852 (fixed px, no scaling).
   ========================================================================== */

/* No cursor light, no mouse-driven gradients anywhere in the hero. */
.hero-section-v3 { cursor: auto; }

/* --------------------------------------------------------------------------
   HERO — DESKTOP (>= 768px)
   Left 42% = dark negative space carrying the text.
   Right 58% = architecture photograph. Nothing else.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {

    .hero-section.hero-section-v3 {
        /* max() keeps the scale sane when the viewport is shorter than 900px */
        --u: min(calc(100vw / 1920), calc(max(100vh, 900px) / 900));
        --hero-media-pos: center center;
        position: relative;
        height: 100vh;
        min-height: 900px;
        background-color: #050807;   /* the dark left half */
        overflow: hidden;
    }

    /* Image: right half only, no mask, no crop tricks */
    .hero-section-v3 .background-image,
    .hero-section-v3 .background-video {
        left: auto;
        right: 0;
        top: 0;
        width: 58%;
        height: 100%;
        z-index: 1;
        object-fit: cover;
        object-position: var(--hero-media-pos);
        background-size: cover;
        background-position: var(--hero-media-pos);
        background-repeat: no-repeat;
        -webkit-mask-image: none;
        mask-image: none;
    }

    /* Overlay: one soft horizontal gradient, on the image half only.
       Left edge of the photo goes dark so it welds into the text panel.
       No global darkening, no grey wash, no heavy vignette. */
    .hero-section-v3 .overlay.overlay-v3 {
        left: 42%;
        right: 0;
        width: 58%;
        height: 100%;
        z-index: 2;
        background: linear-gradient(
            90deg,
            rgba(5, 8, 7, 0.85) 0%,
            rgba(5, 8, 7, 0.25) 35%,
            rgba(5, 8, 7, 0) 65%
        );
        background-color: transparent;
    }

    /* --- Text block: 520 wide, 70 from the left, vertically centred --- */
    .hero-section-v3 .hero-main-v3 {
        position: absolute;
        z-index: 10;
        left: calc(70 * var(--u));
        top: 50%;
        transform: translateY(-50%);
        width: calc(520 * var(--u));
        min-width: 420px;
        margin: 0;
        padding: 0;
        flex: none;
    }
    .hero-section-v3 .hero-main-inner { max-width: none; padding: 0; }

    .hero-section-v3 .hero-eyebrow {
        display: block;
        font-family: 'Inter', sans-serif;
        font-size: max(11px, calc(12 * var(--u)));
        font-weight: 500;
        letter-spacing: calc(5 * var(--u));
        text-transform: uppercase;
        color: #C9A35B;
        margin: 0 0 calc(35 * var(--u));
    }

    .hero-section-v3 .hero-heading-v2 {
        font-family: 'Playfair Display', 'Cormorant Garamond', 'Times New Roman', serif;
        font-size: calc(78 * var(--u));
        font-weight: 400;
        line-height: 0.95;
        letter-spacing: -0.005em;
        color: #F5F1E8;
        white-space: nowrap;
        margin: 0;
    }
    .hero-section-v3 .hero-heading-accent { color: #C9A35B; }

    .hero-section-v3 .hero-cta-row-v2 {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        margin-top: calc(45 * var(--u));
        gap: calc(25 * var(--u));
    }
    .hero-section-v3 .hero-btn-outline {
        width: calc(150 * var(--u));
        min-width: 140px;
        height: calc(48 * var(--u));
        min-height: 44px;
        padding: 0;
        border: 1px solid #C9A35B;
        color: #F5F1E8;
        font-size: max(10px, calc(11 * var(--u)));
        letter-spacing: 0.08em;
        white-space: nowrap;
    }
    .hero-section-v3 .hero-play-circle {
        width: calc(48 * var(--u));
        height: calc(48 * var(--u));
        min-width: 44px;
        min-height: 44px;
    }

    /* --- Statistics bar: bottom 55, 70 side margins, 95 tall, 3 equal cols --- */
    .hero-section-v3 .hero-stats-box {
        position: absolute;
        z-index: 30;
        left: calc(70 * var(--u));
        right: auto;
        bottom: calc(55 * var(--u));
        width: calc(100% - (140 * var(--u)));
        max-width: none;
        height: calc(95 * var(--u));
        min-height: 78px;
        margin: 0;
        padding: 0;
        background: rgba(15, 20, 18, 0.85);
        border: 1px solid rgba(201, 163, 91, 0.35);
        border-radius: 6px;
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
    }
    .hero-section-v3 .hero-stat-v3 {
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: calc(20 * var(--u));
    }
    .hero-section-v3 .hero-stat-icon {
        display: inline-flex;
        flex: 0 0 auto;
        width: max(30px, calc(44 * var(--u)));
        height: max(30px, calc(44 * var(--u)));
        color: #F5F1E8;
    }
    .hero-section-v3 .hero-stat-num-v3 { font-size: max(24px, calc(34 * var(--u))); }
    .hero-section-v3 .hero-stat-label-v3 {
        font-size: max(9.5px, calc(11 * var(--u)));
        letter-spacing: 0.14em;
        line-height: 1.3;
    }
}

/* --------------------------------------------------------------------------
   HERO — MOBILE (<= 767px)
   Fixed header, controlled background crop, strong overlay, readable text.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {

    .hero-section.hero-section-v3 {
        --hero-m-pos: center center;
        display: block !important;
        height: 100vh !important;
        height: 100svh !important;
        min-height: 850px !important;
        max-height: none !important;
        background-color: #050807;
        overflow: hidden;
    }

    .hero-section-v3 .background-video { display: none !important; }
    .hero-section-v3 .background-image {
        left: 0;
        right: auto;
        width: 100%;
        height: 100%;
        background-image: var(--hero-bg-mobile) !important;
        background-size: cover;
        background-position: var(--hero-m-pos);
        background-repeat: no-repeat;
        -webkit-mask-image: none;
        mask-image: none;
    }

    /* Stronger vertical overlay so the headline always stays readable */
    .hero-section-v3 .overlay.overlay-v3 {
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.55),
            rgba(0, 0, 0, 0.35)
        );
        background-color: transparent;
    }

    /* Header: fixed, 80px tall, 20px padding, logo 95px, never moves */
    .hero-section-v3 .content-layer { position: static; height: auto; padding: 0 20px; }

    .hero-section .content-layer > header,
    .hero-section-v3 .content-layer > .hero-header-v2 {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 9999;
        height: 80px;
        min-height: 80px;
        margin: 0;
        padding: 0;
        background: transparent;
        border-bottom: 1px solid transparent;
        transition: background 0.35s ease, border-color 0.35s ease;
    }
    .hero-section .content-layer > header.header-dark {
        background: rgba(5, 8, 7, 0.94);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        border-bottom-color: rgba(201, 163, 91, 0.25);
    }
    html.admin-bar .hero-section .content-layer > header { top: 46px; }

    .hero-section-v3 .hero-header-inner {
        position: relative;
        display: block;
        width: 100%;
        height: 80px;
        max-width: none;
        padding: 0 20px;
    }
    .hero-section-v3 .hero-header-inner .logo {
        position: absolute;
        left: 20px;
        top: 50%;
        transform: translateY(-50%);
    }
    .hero-section-v3 .hero-header-v2 .brand-crop { --logo-w: 95px; margin: 0; }
    .hero-section-v3 .hero-menu-wrap {
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
    }

    /* Content: clears the 80px header, left aligned at 20px */
    .hero-section-v3 > .fp-overflow { display: block; height: 100% !important; }
    .hero-section-v3 .hero-main-v3 {
        position: relative;
        z-index: 10;
        flex: none;
        margin: 0;
        padding: 95px 0 0;   /* was 130px — content lifted ~35px */
        transform: none;
        top: auto;
        left: auto;
        width: auto;
    }
    .hero-section-v3 .hero-main-inner { max-width: 100%; padding: 0; }

    .hero-section-v3 .hero-eyebrow {
        font-size: 11px;
        letter-spacing: 3px;
        color: #C9A35B;
        margin-bottom: 22px;
    }
    .hero-section-v3 .hero-heading-v2 {
        width: 90%;
        max-width: 100%;
        margin: 0;
        font-size: 44px;
        line-height: 1;
        letter-spacing: -0.005em;
        text-align: left;
        color: #F5F1E8;
        white-space: normal;
    }
    .hero-section-v3 .hero-cta-row-v2 {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        margin-top: 30px;
        gap: 16px;
    }
    .hero-section-v3 .hero-btn-outline {
        width: 160px;
        height: 46px;
        padding: 0;
        border: 1px solid #C9A35B;
        font-size: 10.5px;
        white-space: nowrap;
    }
    .hero-section-v3 .hero-play-circle { width: 48px; height: 48px; }

    .hero-section-v3 .hero-stats-box {
        position: absolute;
        z-index: 30;
        left: 20px;
        right: 20px;
        bottom: 40px;
        flex-direction: row;
        width: auto;
        height: 90px;
        min-height: 0;
        margin: 0;
        padding: 0;
        background: rgba(15, 20, 18, 0.85);
        border: 1px solid rgba(201, 163, 91, 0.35);
        border-radius: 6px;
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
    }
    .hero-section-v3 .hero-stat-v3 {
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0 6px;
        gap: 6px;
        border-bottom: 0;
    }
    .hero-section-v3 .hero-stat-icon { display: none; }
    .hero-section-v3 .hero-stat-num-v3 { font-size: 26px; }
    .hero-section-v3 .hero-stat-label-v3 {
        font-size: 9px;
        letter-spacing: 1px;
        line-height: 1.35;
        text-align: center;
    }
}


/* ==========================================================================
   SERVICES v4 — FINAL APPROVED SPEC
   Luxury, minimal, architecture-led. Small cards, real breathing room,
   three cards visible on desktop, the rest behind the slider.
   ========================================================================== */

.services-luxe {
    position: relative;
    background-color: #080D0B;
    color: #F3EEE5;
}

/* --- Card: shared design (size is set per breakpoint below) --- */
.svc-card {
    border: 1px solid rgba(201, 163, 91, 0.35);
    border-radius: 4px;
    overflow: hidden;
    flex: none;
}
.svc-card:hover,
.svc-card:focus-visible { border-color: rgba(201, 163, 91, 0.85); }

.svc-card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Bottom-weighted overlay only — the image stays visible at the top */
.svc-card::after {
    background: linear-gradient(
        180deg,
        transparent 30%,
        rgba(0, 0, 0, 0.85) 100%
    );
}

.svc-card-body {
    left: 20px;
    right: 20px;
    bottom: 35px;
    gap: 10px;
}
.svc-card-icon { width: 24px; height: 24px; color: #C9A35B; }
.svc-card-title { font-size: 15px; line-height: 1.3; }
.svc-card-desc {
    -webkit-line-clamp: 2;
    font-size: 11px;
    line-height: 1.45;
}

/* --- Counter / progress --- */
.svc-carousel-foot { gap: 14px; margin-top: 18px; }
.svc-count { font-size: 11px; letter-spacing: 2px; }
.svc-progress { background: rgba(201, 163, 91, 0.2); }
.svc-progress-bar { background: #C9A35B; }

/* --- Arrows --- */
.svc-nav {
    width: 36px;
    height: 36px;
    border: 1px solid #C9A35B;
    border-radius: 50%;
    color: #F3EEE5;
}
.svc-nav:hover:not(:disabled),
.svc-nav:focus-visible { background: #C9A35B; color: #080D0B; }

/* --------------------------------------------------------------------------
   SERVICES — DESKTOP (>= 1024px): 35% text | 65% cards
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {

    .services-luxe {
        display: flex;
        align-items: center;
        height: 100vh;
        min-height: 850px;
        padding: 80px 0;
    }

    .services-luxe-container {
        max-width: 1600px;
        width: 100%;
        padding-left: 70px;
        padding-right: 70px;
    }

    .services-luxe-grid {
        display: grid;
        grid-template-columns: 35% 65%;
        align-items: center;
        gap: 0;
    }

    /* Left editorial column */
    .services-luxe-left {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        width: 100%;
        max-width: 100%;
    }
    .services-luxe-label {
        font-size: 12px;
        letter-spacing: 5px;
        color: #C9A35B;
        margin-bottom: 30px;
    }
    .services-luxe-heading {
        font-family: 'Cormorant Garamond', serif;
        font-weight: 400;
        font-size: 48px;
        line-height: 1.05;
        max-width: 420px;
        margin: 0 0 30px;
    }
    .services-luxe-desc {
        font-size: 14px;
        line-height: 1.8;
        color: #B8B8B8;
        max-width: 360px;
        margin: 0 0 40px;
    }
    .services-luxe-btn { width: 160px; height: 45px; }

    /* Cards column: three 190px cards + two 20px gaps = 610px, right aligned
       and held 40px off the container edge. The empty space on the left of
       this column is the section's breathing room — do not fill it. */
    .svc-carousel {
        width: 610px;
        max-width: 100%;
        margin-left: auto;
        margin-right: 40px;
    }

    .svc-track { gap: 20px; }

    .svc-card {
        flex: 0 0 190px;
        width: 190px;
        height: 300px;
        max-width: 200px;
    }

    /* Arrows: top-right of the section, never on top of a card */
    .svc-carousel-head {
        position: absolute;
        top: 50px;
        right: 70px;
        display: flex;
        justify-content: flex-end;
        gap: 12px;
        margin: 0;
    }
    .svc-nav-inline { display: none; }
}

/* --------------------------------------------------------------------------
   SERVICES — TABLET (768–1023px)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
    .services-luxe { padding: 72px 0; }
    .services-luxe-container { padding-left: 40px; padding-right: 40px; }
    .services-luxe-heading { font-size: 40px; max-width: 460px; }
    .services-luxe-desc { max-width: 460px; }
    .svc-track { gap: 20px; }
    .svc-card { flex: 0 0 200px; width: 200px; height: 310px; }
}

/* --------------------------------------------------------------------------
   SERVICES — MOBILE (<= 767px): stacked, one card + a slice of the next
   Extra top padding clears the fixed 80px header.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .services-luxe {
        display: block;
        height: auto;
        min-height: 0;
        padding: 110px 0 60px;   /* 80px fixed header + 30px air */
    }
    .services-luxe-container { padding-left: 20px; padding-right: 20px; }
    .services-luxe-grid { grid-template-columns: 1fr; gap: 32px; }

    .services-luxe-label { font-size: 11px; letter-spacing: 4px; margin-bottom: 20px; }
    .services-luxe-heading { font-size: 34px; line-height: 1.05; max-width: 100%; margin: 0 0 20px; }
    .services-luxe-desc { font-size: 14px; line-height: 1.75; max-width: 100%; margin: 0 0 28px; }
    .services-luxe-btn { width: 160px; height: 45px; }

    /* The viewport is wider than one card, so the next card peeks in and the
       section reads as a slider: | CARD 01 |  CARD 02 */
    .svc-carousel { width: 100%; }
    .svc-carousel-head { display: none; }
    .svc-viewport { overflow: hidden; width: 100%; }
    .svc-track { gap: 16px; }
    .svc-card {
        flex: 0 0 220px;
        width: 220px;
        height: 330px;
        max-width: none;
    }
    .svc-card-body { left: 16px; right: 16px; bottom: 24px; }
    .svc-card-title { font-size: 16px; }
}


/* ==========================================================================
   SERVICES v5 — full-width section (fixes the "small centered box")
   ROOT CAUSE: fullPage.js wraps the section content in <div class="fp-overflow">.
   Because .services-luxe is display:flex, that wrapper became a flex item with
   width:auto and shrink-wrapped to its content (~1150px), so the whole section
   looked like a small box floating in the middle of the viewport, and the
   70px paddings were measured from that box instead of the screen edges.
   Fix: force the wrapper to take the full width of the section.
   ========================================================================== */

.services-luxe > .fp-overflow,
.services-luxe > .fp-overflow > .fp-overflow-inner,
.services-luxe > .fp-tableCell {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100%;
}

/* Card size lives in two variables — change only these two numbers if the
   client wants slightly larger cards later. */
.services-luxe {
    --svc-card-w: 190px;
    --svc-card-h: 310px;
    --svc-gap: 18px;
}

@media (min-width: 1024px) {

    .services-luxe {
        display: flex;
        align-items: center;          /* vertically centred */
        justify-content: stretch;
        height: 100vh;
        min-height: 850px;
        padding: 0;
    }

    /* Full width, no centered max-width box. 70px from each screen edge. */
    .services-luxe-container {
        width: 100%;
        max-width: none;
        margin: 0;
        padding-left: 70px;
        padding-right: 70px;
    }

    /* 35% text | 65% cards, 50px between the columns */
    .services-luxe-grid {
        display: grid;
        grid-template-columns: 35% 65%;
        align-items: center;
        gap: 50px;
        width: 100%;
    }

    .services-luxe-heading {
        font-size: 48px;
        line-height: 1.05;
        max-width: 360px;
        margin: 0 0 30px;
    }
    .services-luxe-desc {
        font-size: 15px;
        line-height: 1.8;
        max-width: 360px;
        margin: 0 0 40px;
    }

    /* Cards sit at the START of the right column (next to the text), never
       centred in the section. 40px away from the text column. */
    .svc-carousel {
        position: relative;
        width: calc((var(--svc-card-w) * 3) + (var(--svc-gap) * 2));
        max-width: 100%;
        margin: 0 0 0 40px;
    }

    .svc-track { gap: var(--svc-gap); }

    .svc-card {
        flex: 0 0 var(--svc-card-w);
        width: var(--svc-card-w);
        height: var(--svc-card-h);
        max-width: none;
    }

    /* Arrows: inside the cards area, above the last card's right edge */
    .svc-carousel-head {
        position: absolute;
        top: -40px;
        right: 0;
        left: auto;
        display: flex;
        justify-content: flex-end;
        gap: 12px;
        margin: 0;
    }

    /* Counter + progress line stay under the cards, same width as the cards */
    .svc-carousel-foot { margin-top: 18px; }
    .svc-nav-inline { display: none; }
}

@media (min-width: 1440px) {
    /* Slightly larger cards on big screens so the right side is not empty,
       still far from the old oversized version. */
    .services-luxe { --svc-card-w: 215px; --svc-card-h: 350px; }
    .services-luxe-heading { font-size: 52px; max-width: 420px; }
    .services-luxe-desc { max-width: 380px; }
}

/* --------------------------------------------------------------------------
   SERVICES — MOBILE: full width, 20px side padding, one card per swipe
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .services-luxe {
        display: block;
        height: auto;
        min-height: 0;
        padding: 100px 0 50px;       /* clears the 80px fixed header */
    }
    .services-luxe-container {
        width: 100%;
        max-width: none;
        margin: 0;
        padding-left: 20px;
        padding-right: 20px;
    }
    .services-luxe-grid { grid-template-columns: 1fr; gap: 28px; }

    .services-luxe-heading { font-size: 34px; line-height: 1.08; max-width: 100%; }
    .services-luxe-desc { max-width: 100%; }

    /* One full-width card per view — a proper horizontal slider, not two
       half-visible cards. */
    .svc-carousel { position: relative; width: 100%; }
    .svc-viewport { overflow: hidden; width: 100%; }
    .svc-track { gap: 16px; }
    .svc-card {
        flex: 0 0 100%;
        width: 100%;
        height: 400px;
        max-width: none;
    }
    .svc-card-body { left: 20px; right: 20px; bottom: 26px; }
    .svc-card-title { font-size: 17px; }
    .svc-carousel-head { display: none; }
}


/* ==========================================================================
   SERVICES v6 — REMOVED.
   This block used to stretch the three cards to fill the whole 65% column
   (width: calc(100%/3)), which is exactly why the section rendered as
   oversized "gallery" cards instead of the narrow 190x310 cards in the
   approved reference (services.jpg). The v5 block above already produces
   the correct match — fixed-width 190px cards, 3 visible, small gap — so
   nothing needs to override it. Do not re-add a rule here that sets
   .svc-card width to a percentage of the column; that is the bug.
   ========================================================================== */

/* ==========================================================================
   HERO — force the correct fade gradient (guards against any override
   further down the cascade, a cache, or Additional CSS producing a hard
   vertical line between the text area and the photo instead of a blend).
   ========================================================================== */
.hero-section .overlay.overlay-v3 {
    background:
        linear-gradient(90deg,
            rgba(5,8,8,0.8) 0%,
            rgba(5,8,8,0.55) 22%,
            rgba(5,8,8,0.25) 38%,
            rgba(5,8,8,0.08) 60%,
            rgba(5,8,8,0) 75%),
        rgba(0,0,0,0.25) !important;
    border: none !important;
    box-shadow: none !important;
}


/* =====================================================================
   DAYAN ARC FINAL OVERRIDE
   Hero + Services alignment correction based on approved reference
   ===================================================================== */

/* HERO: restore soft shadow transition between typography and architecture */
@media (min-width: 768px) {
.hero-section-v3 .overlay.overlay-v3 {
    left: 42%;
    width: 58%;
    background: linear-gradient(
        90deg,
        rgba(5,8,7,0.92) 0%,
        rgba(5,8,7,0.72) 18%,
        rgba(5,8,7,0.38) 42%,
        rgba(5,8,7,0.08) 68%,
        rgba(5,8,7,0) 100%
    );
}

.hero-section-v3 .hero-main-v3 {
    left: calc(70 * var(--u));
    width: calc(540 * var(--u));
}

.hero-section-v3 .hero-heading-v2 {
    font-size: calc(78 * var(--u));
    line-height: 0.96;
}

.hero-section-v3 .hero-stats-box {
    height: calc(92 * var(--u));
}
}

/* SERVICES: compact editorial layout like reference image */
@media (min-width: 1024px) {
.services-luxe-container {
    max-width: 1720px;
    padding-left: 70px;
    padding-right: 70px;
}

.services-luxe-grid {
    grid-template-columns: 32% 68%;
    align-items:center;
}

.services-luxe-left {
    max-width:380px;
}

.services-luxe-heading {
    font-size:52px;
    line-height:1.02;
    margin-bottom:28px;
}

.services-luxe-desc {
    max-width:390px;
    font-size:14px;
    line-height:1.75;
}

.svc-carousel {
    width:100%;
    max-width:none;
    margin-left:0;
    margin-right:0;
}

.svc-track {
    gap:24px;
}

.svc-card {
    flex-basis:260px;
    width:260px;
    height:420px;
    border-radius:3px;
}

.svc-card-body {
    left:24px;
    right:24px;
    bottom:28px;
}

.svc-card-title {
    font-size:20px;
    line-height:1.15;
}

.svc-card-desc {
    font-size:12px;
    line-height:1.5;
}
}

@media (max-width:767px) {
.services-luxe {
    padding-top:95px;
}

.svc-card {
    flex-basis:280px;
    width:280px;
    height:400px;
}
}


/* =====================================================
   FINAL HERO + SERVICES REFINEMENT OVERRIDES
   ===================================================== */

/* Hero: remove hard divider feeling, restore cinematic transition */
.hero-section-v3 .overlay-v3,
.hero-section .overlay-v3 {
    background: linear-gradient(90deg,
        rgba(5,8,7,.96) 0%,
        rgba(5,8,7,.86) 28%,
        rgba(5,8,7,.45) 55%,
        rgba(5,8,7,.12) 100%);
}

.hero-section-v3 .hero-main-inner {
    max-width: 520px;
}

/* Services full viewport composition */
.services-luxe {
    height:100vh;
    display:flex;
    align-items:center;
    overflow:hidden;
}

.services-luxe-container {
    width:100%;
    max-width:none;
    padding-left:60px;
    padding-right:60px;
}

.services-luxe-grid {
    display:grid;
    grid-template-columns:380px 1fr;
    gap:70px;
    align-items:center;
}

.services-luxe-heading {
    font-size:48px;
    line-height:1.05;
}

.svc-carousel {
    width:100%;
}

.svc-viewport {
    overflow:hidden;
}

.svc-track {
    display:flex;
    gap:20px;
}

.svc-card {
    flex:0 0 260px;
    height:420px;
    position:relative;
    overflow:hidden;
    border:1px solid rgba(201,168,106,.45);
}

.svc-card-img {
    width:100%;
    height:100%;
    object-fit:cover;
    filter:brightness(.68);
}

.svc-card:after {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,transparent 20%,rgba(0,0,0,.88) 100%);
}

.svc-card-body {
    position:absolute;
    left:20px;
    right:20px;
    bottom:24px;
    z-index:2;
}

.svc-card-title {
    font-family:'Cormorant Garamond',serif;
    font-size:24px;
    color:#F2EEE5;
}

.svc-card-desc {
    font-size:11px;
    color:#cfcfcf;
    line-height:1.5;
}

@media(max-width:767px){
    .hero-section-v3 .hero-main-inner{
        transform:translateY(-35px);
    }

    .hero-section-v3 .overlay-v3,
    .hero-section .overlay-v3{
        background:linear-gradient(180deg,rgba(0,0,0,.65),rgba(0,0,0,.45));
    }

    .services-luxe-container{
        padding-left:20px;
        padding-right:20px;
    }

    .services-luxe-grid{
        display:flex;
        flex-direction:column;
        gap:30px;
    }

    .svc-card{
        flex-basis:280px;
        height:400px;
    }
}


/* ==========================================================================
   DAYAN ARC — SERVICES v7 + HERO SEAM FIX  (FINAL)
   این بلاک باید در انتهای style.css قرار بگیرد (بعد از همهٔ بلاک‌های قبلی).
   هیچ بلاک قدیمی‌ای پاک نشود — این بلاک همه را override می‌کند.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0) HERO — حذف مرز صاف بین متن و تصویر
   overlay از 32% شروع می‌شود (یعنی روی پنل مشکی هم می‌افتد) و از رنگ کاملاً
   مات شروع می‌شود، بنابراین درز بین پنل و عکس کاملاً از بین می‌رود.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
    .hero-section-v3 .overlay.overlay-v3,
    .hero-section .overlay.overlay-v3 {
        left: 32% !important;
        right: 0 !important;
        width: 68% !important;
        height: 100%;
        z-index: 2;
        border: none !important;
        box-shadow: none !important;
        background: linear-gradient(
            90deg,
            #050807 0%,
            #050807 14%,
            rgba(5, 8, 7, 0.92) 26%,
            rgba(5, 8, 7, 0.70) 40%,
            rgba(5, 8, 7, 0.40) 56%,
            rgba(5, 8, 7, 0.16) 72%,
            rgba(5, 8, 7, 0.04) 88%,
            rgba(5, 8, 7, 0) 100%
        ) !important;
    }

    /* عکس همچنان 58% سمت راست؛ متن در 42% سمت چپ */
    .hero-section-v3 .background-image,
    .hero-section-v3 .background-video {
        left: auto;
        right: 0;
        width: 58%;
    }
}

/* --------------------------------------------------------------------------
   1) SERVICES — ساختار کلی
   -------------------------------------------------------------------------- */

/* fullPage.js محتوای سکشن را در .fp-overflow می‌پیچد؛ بدون این قانون
   کل سکشن مثل یک جعبهٔ کوچک وسط صفحه جمع می‌شود. */
.services-luxe > .fp-overflow,
.services-luxe > .fp-overflow > .fp-overflow-inner,
.services-luxe > .fp-tableCell {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100%;
}

.services-luxe {
    position: relative;
    background-color: #080D0B;
    color: #F3EEE5;
}

/* جلوگیری از بیرون‌زدن کارت‌ها از لبهٔ راست صفحه
   (grid item ها به‌صورت پیش‌فرض min-width:auto دارند) */
.services-luxe-grid > * ,
.svc-carousel { min-width: 0; }

/* --------------------------------------------------------------------------
   2) SERVICES — دسکتاپ (>= 1024px)
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {

    .services-luxe {
        display: flex;
        align-items: center;
        min-height: 100vh;
        height: 100vh;
        padding: 0;
        overflow: hidden;

        --svc-card-max: 190px;   /* حداکثر عرض کارت — باریک‌تر شد */
        --svc-card-h: 385px;     /* ارتفاع کارت — کشیده‌تر شد */
        --svc-gap: 20px;         /* فاصلهٔ بین کارت‌ها */
    }

    .services-luxe-container {
        width: 100%;
        max-width: none;
        margin: 0;
        padding-left: 60px;
        padding-right: 60px;
    }

    .services-luxe-grid {
        display: grid;
        grid-template-columns: 32% 1fr;
        column-gap: 40px;
        align-items: center;
        width: 100%;
    }

    /* --- ستون متن --- */
    .services-luxe-left {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        max-width: 430px;
    }
    .services-luxe-label {
        font-family: 'Inter', sans-serif;
        font-size: 12px;
        letter-spacing: 5px;
        text-transform: uppercase;
        color: #C9A35B;
        margin-bottom: 26px;
    }
    .services-luxe-heading {
        font-family: 'Cormorant Garamond', serif;
        font-weight: 400;
        font-size: clamp(38px, 3.3vw, 60px);
        line-height: 1.02;
        color: #F3EEE5;
        max-width: 420px;
        margin: 0 0 26px;
    }
    .services-luxe-desc {
        font-family: 'Inter', sans-serif;
        font-size: 15px;
        line-height: 1.8;
        color: #A9AAA5;
        max-width: 390px;
        margin: 0 0 38px;
    }
    .services-luxe-btn { width: 175px; height: 48px; letter-spacing: 2.5px; }

    /* --- ستون کارت‌ها ---
       عرض کاروسل = دقیقاً ۳ کارت + ۲ گپ (و هرگز بیشتر از عرض ستون).
       کارت‌ها یک‌سوم عرض کاروسل را می‌گیرند، پس همیشه دقیقاً ۳ تا دیده می‌شود
       و هیچ‌وقت از لبهٔ صفحه بیرون نمی‌زند. */
    .svc-carousel {
        position: relative;
        display: flex;
        flex-direction: column;
        width: min(100%, calc(var(--svc-card-max) * 3 + var(--svc-gap) * 2));
        max-width: 100%;
        margin: 0 0 0 auto;   /* چسبیده به لبهٔ راست، فضای خالی بین متن و کارت‌ها */
    }

    .svc-viewport { overflow: hidden; width: 100%; }

    .svc-track {
        display: flex;
        gap: var(--svc-gap);
        will-change: transform;
        transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
        transform: translate3d(0, 0, 0);
    }

    .svc-card {
        flex: 0 0 calc((100% - var(--svc-gap) * 2) / 3);
        width: auto;
        max-width: none;
        height: var(--svc-card-h);
    }

    /* فلش‌ها بالای کارت‌ها، سمت راست */
    .svc-carousel-head {
        position: absolute;
        top: -58px;
        right: 0;
        left: auto;
        display: flex;
        justify-content: flex-end;
        gap: 12px;
        margin: 0;
        z-index: 3;
    }
    .svc-nav-inline { display: none; }
    .svc-carousel-foot { margin-top: 22px; gap: 16px; }
}

@media (min-width: 1366px) {
    .services-luxe { --svc-card-max: 225px; --svc-card-h: 490px; --svc-gap: 24px; }
}
@media (min-width: 1600px) {
    .services-luxe { --svc-card-max: 240px; --svc-card-h: 515px; --svc-gap: 26px; }
    .services-luxe-container { padding-left: 70px; padding-right: 70px; }
}
@media (min-width: 1920px) {
    .services-luxe { --svc-card-max: 255px; --svc-card-h: 540px; --svc-gap: 28px; }
}

/* --------------------------------------------------------------------------
   3) SERVICES — طراحی کارت (همهٔ سایزها)
   -------------------------------------------------------------------------- */
.svc-card {
    position: relative;
    display: block;
    overflow: hidden;
    border: 1px solid rgba(201, 163, 91, 0.35);
    border-radius: 3px;
    text-decoration: none;
    transition: border-color 0.4s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.svc-card:hover,
.svc-card:focus-visible { border-color: rgba(201, 163, 91, 0.9); }

.svc-card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.78);
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.svc-card:hover .svc-card-img { transform: scale(1.05); }

/* گرادیان تیره از پایین تا میانهٔ کارت — متن همیشه خوانا */
.svc-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.10) 0%,
        rgba(0, 0, 0, 0.00) 28%,
        rgba(0, 0, 0, 0.55) 62%,
        rgba(0, 0, 0, 0.92) 100%
    );
}

/* فلش طلایی گوشهٔ پایین-راست مثل رفرنس */
.svc-card::before {
    content: '→';
    position: absolute;
    right: 20px;
    bottom: 22px;
    z-index: 3;
    font-size: 17px;
    line-height: 1;
    color: #C9A35B;
    opacity: 0.75;
    transition: transform 0.4s ease, opacity 0.4s ease;
}
.svc-card:hover::before { opacity: 1; transform: translateX(5px); }

.svc-card-num {
    position: absolute;
    top: 20px;
    left: 22px;
    z-index: 2;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    letter-spacing: 1.5px;
    color: #C9A35B;
}

.svc-card-body {
    position: absolute;
    left: 22px;
    right: 48px;      /* جا برای فلش گوشه */
    bottom: 24px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}
.svc-card-icon { display: block; width: 26px; height: 26px; color: #C9A35B; flex: none; }
.svc-card-icon svg { width: 100%; height: 100%; }

.svc-card-title {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: clamp(19px, 1.35vw, 26px);
    line-height: 1.15;
    color: #FFFFFF;
}

/* خط جداکنندهٔ طلایی کوتاه بین عنوان و توضیح، مثل رفرنس */
.svc-card-title::after {
    content: '';
    display: block;
    width: 28px;
    height: 1px;
    margin-top: 12px;
    background: rgba(201, 163, 91, 0.75);
}

.svc-card-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    line-height: 1.55;
    color: #D6D4CE;
}

/* --- شمارنده / نوار پیشرفت / فلش‌ها --- */
.svc-carousel-foot { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.svc-count { font-family: 'Inter', sans-serif; font-size: 11px; letter-spacing: 2px; color: #A9AAA5; flex: none; }
.svc-count [data-svc-current] { color: #F3EEE5; }
.svc-progress { position: relative; display: block; flex: 1 1 auto; height: 1px; background: rgba(201, 163, 91, 0.2); }
.svc-progress-bar {
    position: absolute; top: 0; left: 0; height: 1px; background: #C9A35B;
    transition: width 0.4s ease, margin-left 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.svc-nav {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; flex: none;
    border: 1px solid #C9A35B; border-radius: 50%;
    background: transparent; color: #F3EEE5; cursor: pointer; padding: 0;
    transition: background 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}
.svc-nav:hover:not(:disabled),
.svc-nav:focus-visible { background: #C9A35B; color: #080D0B; }
.svc-nav:disabled { opacity: 0.28; cursor: default; }

@media (prefers-reduced-motion: reduce) {
    .svc-track, .svc-progress-bar { transition: none; }
}

/* --------------------------------------------------------------------------
   4) SERVICES — تبلت (768–1023px)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
    .services-luxe {
        display: block;
        height: auto;
        min-height: 0;
        overflow: visible;
        padding: 90px 0 70px;
    }
    .services-luxe-container { width: 100%; max-width: none; padding-left: 40px; padding-right: 40px; }
    .services-luxe-grid { display: grid; grid-template-columns: 1fr; gap: 36px; }
    .services-luxe-left { max-width: 560px; }
    .services-luxe-heading { font-size: 42px; line-height: 1.05; max-width: 520px; }
    .services-luxe-desc { max-width: 520px; }
    .svc-carousel { width: 100%; margin: 0; }
    .svc-viewport { overflow: hidden; width: 100%; }
    .svc-track { display: flex; gap: 20px; transform: translate3d(0,0,0); }
    .svc-card { flex: 0 0 240px; width: 240px; height: 400px; max-width: none; }
    .svc-carousel-head { display: none; }
    .svc-nav-inline { display: inline-flex; }
}

/* --------------------------------------------------------------------------
   5) SERVICES — موبایل (<= 767px)
   اسکرول افقی واقعی با scroll-snap؛ فقط یک کارت در دید + نیم‌نگاهی به بعدی.
   ⚠️ این بلاک قوانین بی‌قید و شرط بالاتر (height:100vh / flex:0 0 260px) را
   خنثی می‌کند — بدون آن دو کارت کنار هم می‌افتد.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .services-luxe {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        padding: 100px 0 56px;   /* پاک‌کردن هدر ثابت 80px */
    }
    .services-luxe-container {
        width: 100%; max-width: none; margin: 0;
        padding-left: 20px; padding-right: 20px;
    }
    .services-luxe-grid { display: flex; flex-direction: column; gap: 28px; }

    .services-luxe-label { font-size: 11px; letter-spacing: 4px; margin-bottom: 18px; }
    .services-luxe-heading { font-size: 34px; line-height: 1.08; max-width: 100%; margin: 0 0 18px; }
    .services-luxe-desc { font-size: 14px; line-height: 1.75; max-width: 100%; margin: 0 0 26px; }
    .services-luxe-btn { width: 165px; height: 46px; }

    .svc-carousel { position: relative; width: 100%; margin: 0; }
    .svc-carousel-head { display: none; }

    /* اسکرول افقی نیتیو + snap */
    .svc-viewport {
        overflow-x: auto;
        overflow-y: hidden;
        width: auto;
        margin: 0 -20px;          /* لبه‌تا‌لبهٔ صفحه */
        padding: 0 20px;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 20px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        overscroll-behavior-x: contain;
    }
    .svc-viewport::-webkit-scrollbar { display: none; width: 0; height: 0; }

    .svc-track {
        display: flex;
        gap: 16px;
        transform: none !important;   /* در موبایل JS از scrollLeft استفاده می‌کند */
        transition: none;
        width: max-content;
    }

    .svc-card {
        flex: 0 0 84vw !important;
        width: 84vw !important;
        max-width: 84vw !important;
        height: 480px !important;
        scroll-snap-align: start;
    }
    .svc-card-body { left: 20px; right: 52px; bottom: 26px; gap: 11px; }
    .svc-card-title { font-size: 21px; }
    .svc-card-desc { font-size: 13px; -webkit-line-clamp: 3; }
    .svc-card::before { right: 20px; bottom: 26px; }

    .svc-carousel-foot { margin-top: 20px; gap: 12px; }
    .svc-nav-inline { display: inline-flex; width: 34px; height: 34px; }
}


/* === Services reference layout alignment === */
#services-section.services-section {
    background: #070c0a;
}

#services-section .services-luxe-container {
    max-width: 1600px;
    height: 100%;
    padding: 0 60px;
    display: flex;
    align-items: center;
}

#services-section .services-luxe-grid {
    grid-template-columns: minmax(330px, 420px) 1fr;
    gap: 70px;
    width: 100%;
    align-items: center;
}

#services-section .services-luxe-left {
    justify-content: center;
}

#services-section .services-luxe-label {
    font-size: 11px;
    letter-spacing: 5px;
    color: #c9a86a;
    margin-bottom: 32px;
}

#services-section .services-luxe-heading {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(48px, 4vw, 64px);
    line-height: .95;
    letter-spacing: -1px;
    color: #f2eee5;
    margin-bottom: 32px;
    max-width: 390px;
}

#services-section .services-luxe-desc {
    font-size: 15px;
    line-height: 1.8;
    color: #b9b4aa;
    max-width: 360px;
    margin-bottom: 42px;
}

#services-section .services-luxe-btn {
    width: 150px;
    height: 44px;
    font-size: 11px;
    letter-spacing: 2px;
    border-color: #c9a86a;
}

#services-section .svc-carousel {
    align-self: center;
}

#services-section .svc-track {
    gap: 24px;
}

#services-section .svc-card {
    flex: 0 0 calc((100% - 48px) / 3);
    width: auto;
    height: 470px;
    border-radius: 0;
    border: 1px solid rgba(201,168,106,.35);
}

#services-section .svc-card-num {
    top: 22px;
    left: 22px;
    font-size: 11px;
}

#services-section .svc-card-body {
    left: 24px;
    right: 24px;
    bottom: 28px;
}

#services-section .svc-card-icon {
    width: 20px;
    height: 20px;
    margin-bottom: 20px;
    color: #c9a86a;
}

#services-section .svc-card-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 28px;
    line-height: 1.05;
    color: #f2eee5;
    letter-spacing: 0;
}

#services-section .svc-card-desc {
    margin-top: 18px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    line-height: 1.7;
    color: #d0cbc1;
}

#services-section .svc-carousel-foot {
    margin-top: 34px;
    align-items: center;
}

#services-section .svc-nav {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(201,168,106,.45);
}

@media (max-width: 1100px) {
    #services-section .services-luxe-container {
        padding: 0 32px;
    }

    #services-section .services-luxe-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    #services-section .services-luxe-heading {
        font-size: 48px;
    }

    #services-section .svc-card {
        flex-basis: 48%;
        height: 430px;
    }
}

@media (max-width: 767px) {
    /* Allow the section to be as tall as its content on mobile */
    #services-section.services-section {
        height: auto !important;
        min-height: 100svh !important;
        overflow: visible !important;
    }

    /* fp-overflow must scroll freely, not clip */
    #services-section > .fp-overflow,
    #services-section > .fp-overflow > .fp-overflow-inner {
        overflow: visible !important;
        max-height: none !important;
        height: auto !important;
    }

    #services-section .services-luxe-container {
        padding: 80px 24px 60px;
        display: block;
        height: auto !important;
        overflow: visible;
    }

    #services-section .services-luxe-grid {
        display: flex;
        flex-direction: column;
        gap: 35px;
    }

    #services-section .services-luxe-heading {
        font-size: 42px;
        max-width: 100%;
    }

    #services-section .services-luxe-desc {
        font-size: 14px;
    }

    #services-section .svc-card {
        flex: 0 0 86vw;
        height: 430px;
    }

    #services-section .svc-card-title {
        font-size: 25px;
    }
}


/* ==========================================================================
   SERVICES v8 — STEP 1: FULL-BLEED LAYOUT  (desktop >= 1024px)
   Appended LAST on purpose; it wins over every older services block above.

   WHY THE OLD VERSION LOOKED LIKE A SMALL BOX IN THE MIDDLE
   1) .services-luxe-container had max-width:1600px + margin:0
      -> on a 1920px screen the content stopped at x=1540, leaving ~380px
         of dead black space on the right.
   2) .svc-carousel had a fixed width (3 x 255px cards) and margin-left:auto
      -> the cards never grew to fill the column; ~300px dead gap next to
         the text.
   3) Cards were a fixed 490-540px tall on a ~950px screen, and the section
      was a flex box with align-items:center
      -> big empty bands above and below.
   FIX: section is a plain block, the container is exactly one screen tall,
   and a CSS grid gives  [ text column | 3 fluid cards ]  with the SAME
   margin (--svc-pad-x) on the left and on the right.  Card width and height
   are no longer numbers: they are whatever is left in the grid.
   ========================================================================== */
@media (min-width: 1024px) {

    #services-section.services-luxe {
        --svc-pad-x: 4.5vw;        /* distance from screen edge, left AND right */
        --svc-pad-top: 7vh;        /* top of the arrows row                     */
        --svc-pad-bottom: 7.5vh;   /* bottom of the cards                       */
        --svc-arrows-gap: 6.5vh;   /* space between arrows row and card tops    */
        --svc-gap: 3.4vw;          /* space between the 3 cards                 */
        --svc-text-col: 31.7%;     /* left text column (designer: ~29vw)        */

        display: block;            /* NOT flex: flex made fullPage's wrapper shrink */
        height: 100vh;
        min-height: 620px;
        padding: 0;
        overflow: hidden;
    }

    #services-section .services-luxe-container {
        display: block;
        box-sizing: border-box;
        width: 100%;
        max-width: none;           /* <- removes the 1600px cap */
        margin: 0;
        height: 100vh;
        min-height: 620px;
        padding: var(--svc-pad-top) var(--svc-pad-x) var(--svc-pad-bottom);
        overflow: hidden;
    }

    /* Grid:            col 1 (text)      col 2 (cards)
       row 1 (1fr)      text block        cards
       row 2 (auto)     counter+arrows    cards (continues)               */
    #services-section .services-luxe-grid {
        display: grid;
        width: 100%;
        height: 100%;
        grid-template-columns: var(--svc-text-col) minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) auto;
        grid-template-areas:
            "text cards"
            "foot cards";
        column-gap: 0;
        row-gap: 0;
        align-items: stretch;
    }

    /* --- Left text column: vertically centred against the cards --- */
    #services-section .services-luxe-left {
        grid-area: text;
        align-self: center;
        justify-content: center;
        max-width: none;
        padding-right: 2.5vw;
    }
    #services-section .services-luxe-heading {
        font-size: clamp(34px, 3vw, 64px);
        line-height: 1.05;
        max-width: 100%;
        margin-bottom: 3.2vh;
    }
    #services-section .services-luxe-desc {
        font-size: clamp(14px, 1.05vw, 19px);
        line-height: 1.8;
        max-width: 26vw;
        margin-bottom: 4.5vh;
    }

    /* --- Cards column ---
       .svc-carousel becomes "transparent" so its three children (arrows,
       viewport, counter) are placed directly on the grid above. The JS keeps
       working: it only looks for [data-svc-*] attributes, not for layout. */
    #services-section .svc-carousel {
        display: contents;
    }

    /* Hide the top arrow row — buttons live next to the counter at the bottom */
    #services-section .svc-carousel-head {
        display: none !important;
    }

    #services-section .svc-viewport {
        grid-area: cards;
        min-width: 0;
        min-height: 0;
        width: 100%;
        overflow: hidden;
    }

    #services-section .svc-track {
        height: 100%;
        align-items: stretch;
        gap: var(--svc-gap);
    }

    /* Exactly three cards fill the column edge to edge; the height is
       whatever the grid row gives (about 74% of the screen). */
    #services-section .svc-card {
        flex: 0 0 calc((100% - (var(--svc-gap) * 2)) / 3);
        width: auto;
        max-width: none;
        height: auto;
    }

    /* --- Counter + progress line + inline arrows: bottom-left strip --- */
    #services-section .svc-carousel-foot {
        grid-area: foot;
        align-self: end;
        display: flex;
        align-items: center;
        gap: 18px;
        margin-top: 0;
        padding-bottom: clamp(20px, 3.2vh, 36px);
        padding-right: 2.5vw;
    }

    /* Show the compact inline arrows next to the counter on desktop */
    #services-section .svc-nav-inline {
        display: inline-flex !important;
        width: 38px;
        height: 38px;
        border: 1px solid rgba(201, 163, 91, 0.55);
        border-radius: 50%;
        background: transparent;
        color: #F3EEE5;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex: none;
        transition: background 0.3s ease, border-color 0.3s ease;
    }
    #services-section .svc-nav-inline:hover:not(:disabled),
    #services-section .svc-nav-inline:focus-visible {
        background: rgba(201, 163, 91, 0.15);
        border-color: rgba(201, 163, 91, 0.9);
    }
    #services-section .svc-nav-inline:disabled {
        opacity: 0.3;
        cursor: default;
    }

    /* Safety sizes so text still fits inside the (now wider) cards.
       The real card styling is done in STEP 2. */
    #services-section .svc-card-title { font-size: clamp(18px, 1.5vw, 30px); }
    #services-section .svc-card-desc  { font-size: clamp(11px, 0.8vw, 14px); }
}


/* ==========================================================================
   SERVICES v8 — STEP 2: CARD STYLING  (desktop >= 1024px)
   Appended LAST on purpose; it wins over every older card rule above.

   - rounded corners (was border-radius:0 in the older #services-section block)
   - default border made almost invisible; a visible gold border is only
     applied to the current/active card (see NOTE below) and on hover/focus
   - the image -> dark panel fade is deepened so the lower part of the card
     reads as a solid dark panel, like the reference
   - card number switched from gold to white
   - icon enlarged
   - divider line and arrow repositioned to match the reference spacing
   ========================================================================== */
@media (min-width: 1024px) {

    #services-section .svc-card {
        border-radius: 14px;
        border: 1px solid rgba(201, 163, 91, 0.14);
    }

    /*
       NOTE: the carousel JS does not currently add an "active card" class,
       so right now the gold border only shows on hover/focus. The three
       selectors below (.is-active / [data-svc-active] / [aria-current]) are
       ready for whichever one the JS actually sets — tell me the real
       class/attribute name (or say "add one") and I'll wire it up so the
       first card is gold by default like in the design, with no hover needed.
    */
    #services-section .svc-card.is-active,
    #services-section .svc-card[data-svc-active="true"],
    #services-section .svc-card[aria-current="true"],
    #services-section .svc-card:hover,
    #services-section .svc-card:focus-visible {
        border-color: rgba(201, 163, 91, 0.85);
    }

    #services-section .svc-card::after {
        background: linear-gradient(
            180deg,
            rgba(7, 12, 10, 0.05) 0%,
            rgba(7, 12, 10, 0.00) 34%,
            rgba(7, 12, 10, 0.72) 66%,
            rgba(7, 12, 10, 0.97) 100%
        );
    }

    #services-section .svc-card-num {
        top: 24px;
        left: 24px;
        color: #F5F1E7;
        font-weight: 600;
        font-size: 13px;
        letter-spacing: 1px;
    }

    #services-section .svc-card-body {
        left: 24px;
        right: 52px;
        bottom: 26px;
        gap: 14px;
    }

    #services-section .svc-card-icon {
        width: 34px;
        height: 34px;
        margin-bottom: 0;
        color: #C9A35B;
    }

    #services-section .svc-card-title::after {
        width: 34px;
        height: 1px;
        margin-top: 14px;
        background: rgba(201, 163, 91, 0.8);
    }

    #services-section .svc-card::before {
        right: 24px;
        bottom: 26px;
        font-size: 18px;
        color: #C9A35B;
        opacity: 0.85;
    }
}


/* ==========================================================================
   SERVICES v8 — STEP 3: FONTS + LEFT COLUMN (section index, label, heading,
   description, button)
   Appended LAST on purpose; it wins over every older rule above.

   FONTS
   The designer's file uses a soft serif for the big heading and a
   geometric sans for everything else. Real names weren't confirmed yet,
   so this uses Newsreader (serif) + Outfit (sans) as a close stand-in —
   both are now loaded via functions.php. To swap them for the confirmed
   fonts later, only the two variables below need to change; nothing else
   in this file references a font name directly.
   ========================================================================== */
#services-section {
    --svc-font-heading: 'Newsreader', 'Playfair Display', serif;
    --svc-font-body: 'Outfit', 'Inter', sans-serif;
}

#services-section .services-luxe-label {
    font-family: var(--svc-font-body);
    letter-spacing: 3px;
}

#services-section .services-luxe-heading {
    font-family: var(--svc-font-heading);
    font-weight: 400;
    letter-spacing: 0;
}

#services-section .services-luxe-desc {
    font-family: var(--svc-font-body);
    font-weight: 300;
}

#services-section .svc-card-title {
    font-family: var(--svc-font-heading);
    font-weight: 400;
}

#services-section .svc-card-desc,
#services-section .svc-count,
#services-section [data-svc-current],
#services-section [data-svc-total] {
    font-family: var(--svc-font-body);
}

/* --- Button: thin gold outline + trailing plus, like the reference --- */
#services-section .services-luxe-btn {
    font-family: var(--svc-font-body);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: auto;
    height: auto;
    padding: 15px 26px;
    border: 1px solid rgba(201, 163, 91, 0.55);
    background: transparent;
    color: #F5F1E7;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    border-radius: 2px;
    transition: border-color .25s ease, background-color .25s ease;
}
#services-section .services-luxe-btn::after {
    content: '+';
    font-size: 15px;
    line-height: 1;
    color: #C9A35B;
}
#services-section .services-luxe-btn:hover,
#services-section .services-luxe-btn:focus-visible {
    border-color: rgba(201, 163, 91, 0.95);
    background: rgba(201, 163, 91, 0.08);
}

/* ==========================================================================
   SERVICES v8 — STEP 4: TABLET & MOBILE (< 1024px)
   Appended LAST on purpose; it wins over the older tablet/mobile blocks
   above. This does NOT rebuild the tablet/mobile grid (the older rules
   already stack the layout correctly there) — it only brings the card
   look (rounded corners, dark gradient panel, white number, bigger icon,
   gold active border) in line with the desktop version from STEP 2, and
   gives the section index + button room on a narrower screen.
   ========================================================================== */
@media (max-width: 1023px) {
    #services-section .svc-card {
        border-radius: 12px;
        border: 1px solid rgba(201, 163, 91, 0.14);
    }
    #services-section .svc-card.is-active,
    #services-section .svc-card[data-svc-active="true"],
    #services-section .svc-card:hover,
    #services-section .svc-card:focus-visible {
        border-color: rgba(201, 163, 91, 0.85);
    }
    #services-section .svc-card::after {
        background: linear-gradient(
            180deg,
            rgba(7, 12, 10, 0.05) 0%,
            rgba(7, 12, 10, 0.00) 34%,
            rgba(7, 12, 10, 0.72) 66%,
            rgba(7, 12, 10, 0.97) 100%
        );
    }
    #services-section .svc-card-num {
        color: #F5F1E7;
        font-weight: 600;
        font-family: var(--svc-font-body);
    }
    #services-section .svc-card-icon {
        width: 28px;
        height: 28px;
        color: #C9A35B;
    }
}

/* Phone: tighten the button padding a bit further */
@media (max-width: 640px) {
    #services-section .services-luxe-btn { padding: 13px 22px; font-size: 11px; }
}


/* ==========================================================================
   FEATURED PROJECT SECTION (Section 03)
   ========================================================================== */

/* ── Section wrapper ──────────────────────────────────────────────────────── */
.fp-project-section {
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: #06090A;
    color: #F3EEE5;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* fullPage wrapper passthrough */
.fp-project-section > .fp-overflow {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    height: 100% !important;
    overflow: hidden !important;
}

/* ── Section label ────────────────────────────────────────────────────────── */
.fp-proj-label {
    position: absolute;
    top: 36px;
    left: 5vw;
    z-index: 10;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: #C9A45C;
}

/* ── Two-column inner ─────────────────────────────────────────────────────── */
.fp-proj-inner {
    display: grid;
    grid-template-columns: 35% 65%;
    height: 100%;
    width: 100%;
}

/* ── LEFT column ──────────────────────────────────────────────────────────── */
.fp-proj-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 100px 5vw 60px 5vw;
}

.fp-proj-eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #C9A45C;
    margin-bottom: 20px;
    display: block;
}

.fp-proj-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: clamp(38px, 4vw, 68px);
    line-height: 1.0;
    color: #F3EEE5;
    margin: 0 0 18px;
}

.fp-proj-meta {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #8A8A82;
    margin: 0 0 28px;
}

.fp-proj-desc {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    line-height: 1.85;
    color: #A9AAA5;
    max-width: 320px;
    margin: 0 0 40px;
}

/* ── Button ───────────────────────────────────────────────────────────────── */
.fp-proj-btn {
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 22px;
    border: 1px solid #C9A45C;
    background: transparent;
    color: #F3EEE5;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.3s ease, color 0.3s ease;
    align-self: flex-start;
    margin-bottom: 48px;
}
.fp-proj-btn:hover {
    background: #C9A45C;
    color: #06090A;
}

/* ── Pagination ───────────────────────────────────────────────────────────── */
.fp-proj-pagination {
    display: flex;
    align-items: center;
    gap: 20px;
}

.fp-proj-count {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    letter-spacing: 2px;
    color: #6A6A62;
}
.fp-proj-count #fp-proj-current { color: #C9A45C; }

.fp-proj-dots {
    display: flex;
    gap: 8px;
    align-items: center;
}
.fp-proj-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(201, 164, 92, 0.3);
    cursor: pointer;
    transition: background 0.3s ease;
}
.fp-proj-dot.active { background: #C9A45C; }

/* ── RIGHT column ─────────────────────────────────────────────────────────── */
.fp-proj-right {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 60px 5vw 60px 0;
}

/* Navigation arrows top-right of image */
.fp-proj-nav {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-bottom: 20px;
    flex: none;
}

.fp-proj-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(201, 164, 92, 0.5);
    border-radius: 50%;
    background: transparent;
    color: #F3EEE5;
    cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease;
}
.fp-proj-arrow:hover {
    background: rgba(201, 164, 92, 0.15);
    border-color: #C9A45C;
}

/* ── Project image ────────────────────────────────────────────────────────── */
.fp-proj-img-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    border-radius: 2px;
    transition: opacity 0.35s ease;
}
.fp-proj-img-wrap.fp-img-exit  { opacity: 0; }
.fp-proj-img-wrap.fp-img-enter { opacity: 1; }

.fp-proj-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.fp-proj-img-wrap:hover .fp-proj-img { transform: scale(1.03); }

/* ── Text transition ──────────────────────────────────────────────────────── */
.fp-proj-left.fp-text-exit  { opacity: 0; transform: translateY(8px); transition: opacity 0.3s ease, transform 0.3s ease; }
.fp-proj-left.fp-text-enter { opacity: 1; transform: translateY(0);   transition: opacity 0.4s ease 0.05s, transform 0.4s ease 0.05s; }


/* ── MOBILE (<= 767px) ────────────────────────────────────────────────────── */
@media (max-width: 767px) {

    .fp-project-section {
        height: auto !important;
        min-height: 100svh !important;
        overflow: visible !important;
    }

    .fp-project-section > .fp-overflow {
        overflow: visible !important;
        height: auto !important;
    }

    .fp-proj-label {
        position: relative;
        top: auto;
        left: auto;
        padding: 28px 20px 0;
        display: block;
    }

    .fp-proj-inner {
        display: flex;
        flex-direction: column;
        height: auto;
    }

    .fp-proj-left {
        padding: 20px 20px 0;
        justify-content: flex-start;
    }

    .fp-proj-title  { font-size: 36px; margin-bottom: 12px; }
    .fp-proj-desc   { font-size: 13px; max-width: 100%; margin-bottom: 24px; }
    .fp-proj-btn    { margin-bottom: 28px; }

    .fp-proj-right {
        padding: 20px 20px 40px;
    }

    .fp-proj-img-wrap {
        height: 55vw;
        min-height: 220px;
        flex: none;
    }
}

/* ── TABLET (768–1023px) ──────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
    .fp-proj-inner { grid-template-columns: 42% 58%; }
    .fp-proj-title { font-size: clamp(32px, 4vw, 50px); }
    .fp-proj-left  { padding: 100px 4vw 60px 4vw; }
    .fp-proj-right { padding: 60px 4vw 60px 0; }
}