:root {
     --bg: #0D0D0D;
     --bg-alt: #151515;
     --text: #EAEAEA;
     --accent: #C6A96B;
     --soft: #8A8A8A;
 }

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

 html {
     scroll-behavior: smooth;
 }

 body {
     background: var(--bg);
     color: var(--text);
     font-family: 'Inter', sans-serif;
     line-height: 1.8;
     -webkit-font-smoothing: antialiased;
 }

 .skip-link {
     position: absolute;
     top: -100%;
     left: 1rem;
     z-index: 9999;
     background: #000;
     color: #fff;
     padding: 0.5rem 1rem;
     text-decoration: none;
     border-radius: 0 0 4px 4px;
 }

 .skip-link:focus {
     top: 0;
 }




 section {
     padding: 120px 20px;
     text-align: center;
     min-height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
 }



 #smoke-section .container {
     position: relative;
     z-index: 3;
 }

 #smoke-section canvas {
    position: absolute;
    inset: 0;
    z-index: 2;
}

 .card-container {
     perspective: 1000px;
     margin: 40px auto;
     width: 90px;
     height: 140px;
 }

 .card {
     width: 100%;
     height: 100%;
     position: relative;
     transform-style: preserve-3d;
     transition: transform 0.8s ease;
     appearance: none;
     -webkit-appearance: none;
     background: none;
     border: none;
     padding: 0;
     cursor: pointer;
     display: block;
 }

 .card.flipped {
     transform: rotateY(180deg);
 }

 .card-face {
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     border-radius: 8px;
     backface-visibility: hidden;
     -webkit-backface-visibility: hidden;
     display: flex;
     position: absolute;
     align-items: center;
 }

 /* Front (card back design) */
 .card-front {
     background: linear-gradient(135deg, #111, #1a1a1a);
     border: 1px solid rgba(198, 169, 107, 0.3);
     display: grid;
     padding-left: 0.2vw;
     padding-right: 0.2vw;
 }

 .card-front:hover {
     border: 1px solid rgba(206, 151, 32, 0.8);
 }

 .card-front .right {
     display: grid;
     justify-self: right;
     align-self: self-end;
     rotate: 180deg;
     color: white;
 }

 .card-front .left {
     display: grid;
     justify-self: left;
     align-self: baseline;
     color: white;
 }

 /* Back (reveal) */
 .card-back {
     background: #0D0D0D;
     border: 1px solid #C6A96B;
     transform: rotateY(180deg);
     color: #C6A96B;
     font-family: 'Playfair Display', serif;
     letter-spacing: 0.1em;
     display: grid;
     padding-left: 0.2vw;
     padding-right: 0.2vw;
 }

 .card-back .right {
     display: grid;
     justify-self: right;

     rotate: 180deg;
 }

 .card-back .left {
     display: grid;
     justify-self: left;

 }

 .scroll-arrow-arabesque {
     margin: 40px auto 0;
     width: 40px;
     cursor: pointer;
     opacity: 0.5;
     transition: opacity 0.3s ease, transform 0.3s ease;
     display: block;
 }

 /* Hover effect */
 .scroll-arrow-arabesque:hover {
     opacity: 1;
     transform: translateY(3px);
 }

 /* Optional: gentle bounce */
 @keyframes arabesque-bounce {

     0%,
     50%,
     100% {
         transform: translateY(0);
     }

     25% {
         transform: translateY(4px);
     }

     75% {
         transform: translateY(2px);
     }
 }

 .scroll-arrow-arabesque svg {
     animation: arabesque-bounce 2s infinite;
 }



 #workHow {
     position: relative;
     overflow: hidden;
 }

 #workHow::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url('images/cardsTable.png') center 38%/cover no-repeat;
     opacity: 0.1;
     /* adjust this */
     z-index: 0;
 }

 #workHow .container {
     position: relative;
     z-index: 1;
 }



 .container {
     /* max-width: 720px;
     margin: 0 auto; */
     position: relative;
     z-index: 3;
 }

 h1,
 h2 {
     font-family: 'Playfair Display', serif;
     letter-spacing: 0.06em;
 }

 h1 {
     font-size: 3.5rem;
     color: var(--accent);
     margin-bottom: 20px;
 }

 h2 {
     font-size: 2.2rem;
     margin-bottom: 30px;
 }

 p {
     margin-bottom: 20px;
     color: var(--text);

 }

 .soft {
     color: var(--soft);

 }

 /* HERO */
 .hero {
     height: 100vh;
     display: flex;
     justify-content: center;
     align-items: center;
     text-align: center;
     background:
         radial-gradient(circle at center, rgba(198, 169, 107, 0.08), transparent 10%),
         linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)),
         url('https://images.unsplash.com/photo-1520975922323-7c4c4c6f36d6?auto=format&fit=crop&w=1600&q=80') center/cover no-repeat;
 }

 .hero h1 {
     text-shadow: 0 0 20px rgba(198, 169, 107, 0.2);
 }

.hero-image {
     position: absolute;
    top: 0;
    right: 0;
    width: 50%;    
    height: 100%;
    z-index: 1;
  
}

.hero-image::before {
  content: '';
    position: absolute;
    top: 0;
    left: -100%;        /* overhangs 200px to the LEFT outside the div */
    width: 200%;
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(13,13,13,1) 50%,
        rgba(13,13,13,1) 70%,
        rgba(13,13,13,0.0) 80%,
        rgba(13,13,13,0.0) 100%
    );
    z-index: 2;
    pointer-events: none;
}

.hero-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    filter: grayscale(100%) brightness(0.55) contrast(1.1);
    opacity: 0.75;
    z-index: 0;
}




#smoke-section {
    position: relative;
    overflow: hidden;
}

 .arabesque {
     margin: 50px auto;
     width: 100px;
     height: 30px;
 }

 .arabesque svg {
     display: block;
     margin: 0 auto;
 }

 .contact-wrapper {
     margin-top: 40px;
     position: relative;
     display: inline-block;
 }

 /* Hidden state */
 .contact-reveal {
     margin-top: 20px;
     opacity: 0;
     transform: translateY(10px);
     pointer-events: none;
     transition: all 0.4s ease;
     transition: all 0.4s ease 0.1s;
 }

 /* Reveal on hover */
 .contact-wrapper:hover .contact-reveal {
     opacity: 1;
     transform: translateY(0);
     pointer-events: auto;
 }

 /* Contact links style */
 .contact-reveal a {
     display: block;
     color: var(--soft);
     text-decoration: none;
     margin: 8px 0;
     letter-spacing: 0.05em;
     transition: 0.3s ease;
 }

 /* Hover effect */
 .contact-reveal a:hover {
     color: var(--accent);
     transform: translateX(4px);
 }

 .small {
     font-size: 0.8rem;
     margin-bottom: 10px;
 }

 /* BUTTON */
 .btn {
     display: inline-block;
     padding: 12px 34px;
     border: 1px solid var(--accent);
     color: var(--accent);
     text-decoration: none;
     letter-spacing: 0.12em;
     margin-top: 25px;
     transition: all 0.4s ease;
 }

 .btn:hover {
     background: var(--accent);
     color: #000;
     box-shadow: 0 0 20px rgba(198, 169, 107, 0.4);
 }

 .alt {
     background: var(--bg-alt);
 }

 .list p {
     margin: 12px 0;
     letter-spacing: 0.04em;
 }

 /* SPLIT */
 .split {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     max-width: 1000px;
     margin: 0 auto;
     text-align: left;
     gap: 60px;
 }

 .split img {
     width: 100%;
     max-width: 420px;
     border-radius: 12px;
     opacity: 0.85;
     filter: brightness(0.85);
 }

 /* QUOTES */
 .quote {
     font-style: italic;
     margin-bottom: 30px;
     font-size: 1.25rem;
     opacity: 0.9;
 }

 /* FOOTER */
 footer {
     padding: 120px 20px;
     text-align: center;
     min-height: 100vh;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
 }

 footer p {
     color: var(--soft);
     font-size: 0.9rem;
     font-weight: 700;

 }
 .copyrightPowered {
    margin-top: auto;
    text-align: center;
    padding-top: 40px;
    z-index: 1;
     opacity: 0; 
    animation: fadeUpSoft 1.2s ease forwards;
    animation-delay: 0.6s;
}

.copyrightPowered p {
     margin: 4px 0;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    color: rgba(198, 169, 107, 0.7);
}

.powered {
     color: rgba(198, 169, 107, 0.7);
}

.copyrightPowered .small {
    font-size: 0.7rem;
    opacity: 0.8;
}

 #smoke-footer {
     position: relative;
     overflow: hidden;

 }

 #smoke-footer canvas {
     position: absolute;
    inset: 0;
     z-index: 1;
 }

 #smoke-footer .container,
 .copyrightPowered {
     position: relative;
     z-index: 3;
 }

 @keyframes fadeUpSoft {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

 /* FADE-IN ANIMATION */
 .fade {
     opacity: 0;
     transform: translateY(30px);
     transition: all 1s ease;
 }

 .fade.visible {
     opacity: 1;
     transform: translateY(0);
 }

 /* Form wrapper - hidden by default */
 .contact-form-wrapper {
     display: none;
     max-width: 700px;
     margin: 40px auto 0;
     padding: 30px;
     background: var(--bg-alt);
     border: 1px solid rgba(198, 169, 107, 0.3);
     border-radius: 12px;
     box-shadow: 0 0 40px rgba(0, 0, 0, 0.4);
     text-align: left;
     color: var(--text);
     position: relative;
     z-index: 3;
 }

 .close-form-btn {
     position: absolute;
     top: 12px;
     right: 16px;
     background: none;
     border: none;
     color: var(--soft);
     font-size: 1.4rem;
     cursor: pointer;
     line-height: 1;
     transition: color 0.3s ease;
     z-index: 4;
 }

 .close-form-btn:hover {
     color: var(--accent);
 }

 /* Form styles */
 .contact-form-wrapper h3 {
     font-family: 'Playfair Display', serif;
     color: var(--accent);
     margin-bottom: 20px;
     text-align: center;
 }

 .contact-form-wrapper label {
     display: block;
     margin-bottom: 5px;
     font-weight: 500;
     color: var(--soft);
 }

 .contact-form-wrapper input,
 .contact-form-wrapper textarea {
     width: 100%;
     padding: 10px 12px;
     margin-bottom: 20px;
     border: 1px solid rgba(198, 169, 107, 0.3);
     border-radius: 8px;
     background: #111;
     color: var(--text);
     font-family: 'Inter', sans-serif;
 }

 .contact-form-wrapper textarea {
     resize: vertical;
     min-height: 100px;
 }

 /* Submit button */
 .contact-form-wrapper .btn {
     width: 100%;
     text-align: center;
 }

 /* Thank you message */
 .thank-you {
     display: none;
     text-align: center;
     color: var(--accent);
     margin-top: 20px;
     font-weight: 500;
     z-index: 3;
 }

 
  /* ─── Footer cookie settings button ─── */
  .footer-cookie-btn {
    background: none;
    border: none;
    color: darkgray;
    font-size: inherit;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
    
   
    font-family: inherit;
  }
  .footer-cookie-btn:hover {
    color: lightgray;
  }
 
  /* ─── Demo footer styles (match your existing) ─── */
  #smoke-footer {
    background: #0d0d0d;
    color: #888;
    padding: 3rem 1.5rem 1.5rem;
    font-family: 'Georgia', serif;
  }
  .copyrightPowered {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    text-align: center;
    border-top: 1px solid rgba(255,255,255,0.06);
    margin-top: 2rem;
   
   
  }
  .copyrightPowered p { margin: 0; }
  .footer-legal-links {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 0.5rem;
    flex-wrap: wrap;
     background-color:rgba(255,255,255,0.06);
       padding: 1rem;
  }
  .footer-legal-links a, .footer-legal-links button {
    color: darkgray;
    font-size: 0.75rem;
    text-decoration: none;
    
  }
  .footer-legal-links a:hover { color: lightgray; }

  /* FULL WIDTH EXPERIENCE SECTION */

/* EXPERIENCE SECTION */

.experience-section {
    background: #151515;

    /* IMPORTANT */
    padding: 0 !important;

    overflow: hidden;
}


/* GRID */

.experience-grid {
    display: grid;

    grid-template-columns: 55% 45%;

    min-height: 750px;

    width: 100%;
}


/* TEXT SIDE */

.experience-text {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        120px
        clamp(40px, 8vw, 120px);

    max-width: 750px;
}

/* IMAGE SIDE */

.experience-image {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;
}

/* IMAGE */

.experience-image img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    opacity: 0.78;

    filter:
        brightness(0.72)
        contrast(1.08);

    transform: scale(1.04);

    transition: transform 8s ease;
       mix-blend-mode: soft-light;
}

/* CINEMATIC OVERLAY */

.experience-image::after {
    content: '';

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to left,
            rgba(21,21,21,0.15),
            rgba(21,21,21,0.82)
        );
}

.experience-image img {
    transition: transform 8s ease;
}

.experience-image:hover img {
    transform: scale(1.08);
}

/* SOFT FADE INTO DARKNESS */

.experience-image::after {
    content: '';

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to left,
            rgba(21,21,21,0.05) 0%,
            rgba(21,21,21,0.55) 55%,
            rgba(21,21,21,0.92) 100%
        );
}

/* VIGNETTE */

.experience-image::before {
    content: '';

    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle,
            transparent 40%,
            rgba(21,21,21,0.45) 100%
        );

    z-index: 1;
}

/* MOBILE */

@media (max-width: 900px) {

    .experience-grid {
        grid-template-columns: 1fr;
    }

    .experience-image {
        order: -1;

        min-height: 420px;
    }

    .experience-text {
        padding: 70px 30px;

        text-align: center;
    }

    /* Different fade direction on mobile */

    .experience-image::after {
        background:
            linear-gradient(
                to bottom,
                rgba(13,13,13,0.1),
                rgba(13,13,13,0.85)
            );
    }
}

 /* MOBILE */
 @media (max-width: 768px) {
     h1 {
         font-size: 2.4rem;
     }

     h2 {
         font-size: 1.7rem;
     }

     .split {
         flex-direction: column;
         text-align: center;
     }
      .hero-image {
        width: 100%;
        opacity: 1;
    }

    .hero-image::before {
        left: 0;
        width: 100%;
        background: linear-gradient(
            to bottom,
            rgba(13,13,13,0.1) 95%,
            rgba(13,13,13,0.9) 100%
        );
    }
    .hero-image img {
     object-position: center 20%; 
    }
    
 }