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


body {
    font-family: 'DM Sans', sans-serif;
    background-color: #f8f7f5;
    color: #171717;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 8%;
}

header h1 {
    font-size: 22px;
    letter-spacing: 2px;
}

nav {
    display: flex;
    gap: 30px;
}

nav a {
    text-decoration: none;
    color: #171717;
    font-size: 14px;
}


.hero {
    min-height: 75vh;
    padding: 140px 8% 100px;
    max-width: 1400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(42px, 5.5vw, 76px);
    font-weight: 400;
    line-height: 1.2;
    margin: 25px 0;
    letter-spacing: -1.5px;
}

.hero p {
    font-size: 16px;
    line-height: 1.7;
}

@media (max-width: 700px) {
    header {
        flex-direction: column;
        gap: 20px;
    }

    nav {
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }

    .hero {
        padding: 100px 8%;
    }
}


/* SELECTED WORK SECTION */

.selected-work {
    padding: 100px 8% 140px;
    max-width: 1600px;
    margin: 0 auto;
}

.section-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 30px;
    margin-bottom: 45px;
}

.section-label {
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #777;
    margin-bottom: 18px;
}

.section-heading h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(40px, 5vw, 68px);
    font-weight: 400;
    letter-spacing: -1px;
}

.section-description {
    font-size: 14px;
    color: #777;
}

.work-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 35px;
}


/* FEATURED WORK IMAGES */


/* PORTFOLIO IMAGE CONTAINERS */

.work-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: #e8e6e2;
}


.work-image 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);
}

/* Subtle image zoom on hover */



/* APPLE-INSPIRED SCROLL IMAGE ANIMATION */

.work-card {
    --scroll-progress: 0;
}

.work-card .work-image img {
    transform:
        scale(calc(1.30 - var(--scroll-progress) * 0.30))
        translateY(calc((0.5 - var(--scroll-progress)) * 70px));

    transition: none;
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    .work-card .work-image img {
        transform: none;
        transition: none;
    }
}


.work-image span {
    font-size: 12px;
    letter-spacing: 2px;
    color: #888;
}

.work-card h3 {
    font-size: 19px;
    font-weight: 500;
    margin-top: 22px;
    margin-bottom: 8px;
}

.work-card > p {
    font-size: 13px;
    color: #777;
}

/* SELECTED WORK - MOBILE */

@media (max-width: 700px) {
    .selected-work {
        padding: 60px 8% 90px;
    }

    .section-heading {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .work-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }
}


/* SCROLL REVEAL ANIMATIONS */


.work-card {
    opacity: 0;
    transform: translateY(45px) scale(0.97);
    transition:
        opacity 1.5s ease,
        transform 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.work-card.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Slight delay for the second image */
.work-card:nth-child(2) {
    transition-delay: 0.15s;
}

/* Accessibility: reduced motion */
@media (prefers-reduced-motion: reduce) {
    .work-card {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* LIGHT / DARK MODE */

body {
    transition: background-color 0.4s ease, color 0.4s ease;
}

header {
    gap: 24px;
}

nav {
    margin-left: auto;
}

#theme-toggle {
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    cursor: pointer;
    color: inherit;
    font-size: 22px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

#theme-toggle:hover {
    transform: rotate(20deg);
}

body.dark-mode {
    background-color: #141414;
    color: #f5f3ef;
}

body.dark-mode nav a {
    color: #f5f3ef;
}

body.dark-mode .work-card > p,
body.dark-mode .section-description,
body.dark-mode .work-image span {
    color: #b9b9b9;
}

body.dark-mode .work-image {
    background-color: #292929;
}

@media (prefers-reduced-motion: reduce) {
    body,
    #theme-toggle {
        transition: none;
    }
}


/* ==================================
   HOMEPAGE HERO - SPLIT LAYOUT
================================== */

.hero {
    display: grid;
    grid-template-columns: 1fr 0.85fr;
    align-items: center;
    gap: 70px;

    max-width: 1600px;
    margin: 0 auto;
    padding: 100px 8%;
    min-height: 85vh;
}

/* LEFT SIDE - TEXT */

.hero-content {
    max-width: 650px;
}

.hero-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    letter-spacing: 1px;
    margin-bottom: 30px;
}

.hero h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(42px, 4.5vw, 76px);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -1.5px;
    margin: 0 0 28px;
}

.hero-description {
    font-size: 16px;
    line-height: 1.7;
    max-width: 450px;
}

/* RIGHT SIDE - PHOTO */


.hero-image {
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
}


.hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;

    animation: heroImageReveal 1.4s
        cubic-bezier(0.22, 1, 0.36, 1) both;
}


/* PHOTO ENTRANCE ANIMATION */


@keyframes heroImageReveal {
    from {
        opacity: 0;
        transform: translateY(90px) scale(1.65);
        transform-origin: center top;
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1.65);
        transform-origin: center top;
    }
}


/* MOBILE RESPONSIVE LAYOUT */

@media (max-width: 900px) {
    .hero {
        grid-template-columns: 1fr;
        gap: 45px;
        padding: 70px 8%;
        min-height: auto;
    }

    .hero h2 {
        font-size: clamp(40px, 8vw, 60px);
    }

  
.hero-image {
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    
    }
}

/* ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {
    .hero-image img {
        animation: none;
    }
}


/* ==================================
   ABOUT ME SECTION
================================== */

.about-section {
    max-width: 1400px;
    margin: 0 auto;
    padding: 140px 8%;
}

.about-heading {
    margin-bottom: 90px;
}

.about-heading .section-label {
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0.55;
    margin-bottom: 24px;
}

.about-heading h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(48px, 5vw, 76px);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -2px;
}

.about-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 100px;
    align-items: start;
}

.about-statement h3 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(32px, 3.2vw, 52px);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -1px;
}

.about-description {
    max-width: 500px;
}

.about-description p {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    line-height: 1.9;
    margin-bottom: 24px;
    opacity: 0.8;
}

/* MOBILE LAYOUT */

@media (max-width: 900px) {
    .about-section {
        padding: 90px 8%;
    }

    .about-heading {
        margin-bottom: 55px;
    }

    .about-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .about-description p {
        font-size: 15px;
    }
}


/* ==================================
   ABOUT ME SCROLL ANIMATIONS
================================== */

.about-heading,
.about-statement,
.about-description {
    opacity: 0;
    transform: translateY(55px);
    transition:
        opacity 1.2s ease,
        transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.about-heading.visible,
.about-statement.visible,
.about-description.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger the animation */

.about-statement {
    transition-delay: 0.15s;
}

.about-description {
    transition-delay: 0.3s;
}

/* Accessibility */

@media (prefers-reduced-motion: reduce) {
    .about-heading,
    .about-statement,
    .about-description {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* ==========================================
   BMW CAMPAIGN — CASE STUDY PAGE
========================================== */

/* CASE STUDY HERO */

.case-hero {
    max-width: 1400px;
    margin: 0 auto;
    padding: 130px 8% 100px;
}

.case-hero .section-label {
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0.55;
    margin-bottom: 35px;
}

.case-hero h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(56px, 7vw, 110px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -3px;
    margin-bottom: 30px;
}

.case-subtitle {
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    letter-spacing: 0.5px;
    opacity: 0.65;
    margin-bottom: 75px;
}

/* LARGE CAMPAIGN IMAGE */

.case-hero-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: #e8e6e2;
}

.case-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    animation: caseImageReveal 1.4s
        cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* IMAGE ENTRANCE */

@keyframes caseImageReveal {
    from {
        opacity: 0;
        transform: scale(1.08) translateY(35px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* PROJECT OVERVIEW */

.case-overview {
    max-width: 1400px;
    margin: 0 auto;
    padding: 120px 8% 160px;

    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 100px;
    align-items: start;
}

.case-overview-heading .section-label {
    font-size: 11px;
    letter-spacing: 2px;
    opacity: 0.55;
    margin-bottom: 30px;
}

.case-overview-heading h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(38px, 4vw, 64px);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -1.5px;
}

.case-overview-copy {
    max-width: 480px;
    padding-top: 45px;
}

.case-overview-copy p {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    line-height: 1.9;
    margin-bottom: 25px;
    opacity: 0.8;
}

/* MOBILE RESPONSIVE */

@media (max-width: 900px) {

    .case-hero {
        padding: 90px 8% 60px;
    }

    .case-hero h2 {
        font-size: clamp(42px, 9vw, 70px);
        letter-spacing: -1.5px;
    }

    .case-subtitle {
        margin-bottom: 45px;
    }

    .case-hero-image {
        aspect-ratio: 4 / 3;
    }

    .case-overview {
        grid-template-columns: 1fr;
        gap: 35px;
        padding: 80px 8% 100px;
    }

    .case-overview-copy {
        padding-top: 0;
    }
}

/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {
    .case-hero-image img {
        animation: none;
    }
}


/* CLICKABLE PORTFOLIO CARDS */

.work-link {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.work-link:hover .work-image {
    opacity: 0.88;
}

.work-link .work-image {
    transition: opacity 0.4s ease;
}

.work-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 6px;
}


/* ==========================================
   BMW CAMPAIGN — THE INSIGHT
========================================== */

.campaign-insight {
    padding: 140px 8% 160px;
    background: #171717;
    color: #f5f3ef;
}

.insight-top {
    max-width: 1400px;
    margin: 0 auto 120px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.insight-top .section-label,
.insight-category {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0.55;
}

.insight-content {
    max-width: 1400px;
    margin: 0 auto;
}

.insight-content h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(52px, 7vw, 112px);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -3px;
    margin-bottom: 100px;
}

.insight-content h2 em {
    font-weight: 400;
}

.insight-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
    align-items: start;
}

.insight-line {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.35);
}

.insight-bottom p {
    max-width: 460px;
    font-family: 'DM Sans', sans-serif;
    font-size: 18px;
    line-height: 1.9;
    opacity: 0.75;
}

@media (max-width: 900px) {
    .campaign-insight {
        padding: 90px 8% 110px;
    }

    .insight-top {
        margin-bottom: 80px;
        flex-direction: column;
    }

    .insight-content h2 {
        letter-spacing: -1.5px;
        margin-bottom: 65px;
    }

    .insight-bottom {
        grid-template-columns: 1fr;
        gap: 35px;
    }
}


/* ==========================================
   BMW CAMPAIGN — GENERATIONS TIMELINE
========================================== */

.bmw-timeline {
    padding: 140px 8% 0;
}

.timeline-intro {
    max-width: 1400px;
    margin: 0 auto 140px;
}

.timeline-intro .section-label {
    font-size: 11px;
    letter-spacing: 2px;
    opacity: 0.55;
    margin-bottom: 30px;
}

.timeline-intro h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(50px, 6vw, 96px);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -2px;
    margin-bottom: 35px;
}

.timeline-intro > p:last-child {
    max-width: 460px;
    font-size: 16px;
    line-height: 1.9;
    opacity: 0.7;
}

/* EACH GENERATION */

.timeline-chapter {
    max-width: 1400px;
    margin: 0 auto 160px;
}

.timeline-chapter-heading {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 25px;
}

.timeline-number,
.timeline-era {
    font-size: 11px;
    letter-spacing: 2px;
    opacity: 0.6;
}

/* VISUAL PLACEHOLDERS */

.timeline-visual {
    width: 100%;
    min-height: 420px;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: flex-end;
    padding: 45px;
    overflow: hidden;
}

.timeline-past {
    background: #4d4b47;
    color: #ffffff;
}

.timeline-middle {
    background: #77736d;
    color: #ffffff;
}

.timeline-present {
    background: #242424;
    color: #ffffff;
}

.timeline-visual-label {
    font-family: 'Playfair Display', serif;
    font-size: clamp(40px, 6vw, 90px);
    font-weight: 400;
    line-height: 1;
}

/* CHAPTER DESCRIPTIONS */

.timeline-chapter-footer {
    display: flex;
    justify-content: space-between;
    gap: 50px;
    padding-top: 35px;
}

.timeline-chapter-footer h3 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(28px, 3vw, 46px);
    font-weight: 400;
}

.timeline-chapter-footer p {
    max-width: 400px;
    font-size: 15px;
    line-height: 1.9;
    opacity: 0.7;
}

/* FINAL CAMPAIGN MESSAGE */

.timeline-ending {
    background: #171717;
    color: #f5f3ef;
    text-align: center;
    padding: 170px 8%;
    margin: 0 -9.53%;
}

.timeline-ending p {
    font-size: 11px;
    letter-spacing: 2px;
    opacity: 0.55;
    margin-bottom: 35px;
}

.timeline-ending h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(50px, 7vw, 110px);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -2px;
}

/* MOBILE */

@media (max-width: 900px) {

    .bmw-timeline {
        padding: 90px 8% 0;
    }

    .timeline-intro {
        margin-bottom: 90px;
    }

    .timeline-chapter {
        margin-bottom: 100px;
    }

    .timeline-visual {
        min-height: 300px;
        aspect-ratio: 4 / 3;
        padding: 25px;
    }

    .timeline-chapter-footer {
        flex-direction: column;
        gap: 20px;
    }

    .timeline-ending {
        padding: 110px 8%;
    }
}

@media (max-width: 480px) {
    .timeline-visual {
        min-height: 250px;
    }

    .timeline-chapter-heading {
        flex-wrap: wrap;
    }
}


/* BMW TIMELINE PHOTOGRAPHY */

.timeline-visual {
    position: relative;
    isolation: isolate;
    background: #242424;
}

.timeline-visual img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: -2;
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* GRADIENT FOR TEXT READABILITY */

.timeline-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.65),
        transparent 65%
    );
    z-index: -1;
}

.timeline-visual-label {
    position: relative;
    z-index: 1;
    color: #ffffff;
}

/* SUBTLE HOVER ZOOM */

.timeline-visual:hover img {
    transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
    .timeline-visual img {
        transition: none;
    }
}


/* ==========================================
   BMW TIMELINE — CINEMATIC SCROLL ANIMATIONS
========================================== */

/* CHAPTER HEADINGS */

.timeline-chapter-heading {
    opacity: 0;
    transform: translateY(25px);
    transition:
        opacity 0.9s ease,
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

/* IMAGE CONTAINER */

.timeline-chapter .timeline-visual {
    opacity: 0;
    transform: translateY(70px);
    transition:
        opacity 1.2s ease,
        transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* IMAGE ZOOM */

.timeline-chapter .timeline-visual img {
    transform: scale(1.12);
    transition:
        transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* DESCRIPTION */

.timeline-chapter-footer {
    opacity: 0;
    transform: translateY(45px);
    transition:
        opacity 1s ease,
        transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

/* VISIBLE STATE */

.timeline-chapter.visible .timeline-chapter-heading,
.timeline-chapter.visible .timeline-visual,
.timeline-chapter.visible .timeline-chapter-footer {
    opacity: 1;
    transform: translateY(0);
}

.timeline-chapter.visible .timeline-visual img {
    transform: scale(1);
}

/* STAGGERED TIMING */

.timeline-chapter.visible .timeline-visual {
    transition-delay: 0.12s;
}

.timeline-chapter.visible .timeline-chapter-footer {
    transition-delay: 0.25s;
}

/* KEEP HOVER ZOOM */

.timeline-chapter.visible .timeline-visual:hover img {
    transform: scale(1.05);
}

/* TIMELINE INTRO */

.timeline-intro {
    opacity: 0;
    transform: translateY(50px);
    transition:
        opacity 1.1s ease,
        transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.timeline-intro.visible {
    opacity: 1;
    transform: translateY(0);
}

/* FINAL CAMPAIGN MESSAGE */

.timeline-ending h2 {
    opacity: 0;
    transform: translateY(50px);
    transition:
        opacity 1.3s ease,
        transform 1.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.timeline-ending.visible h2 {
    opacity: 1;
    transform: translateY(0);
}

/* ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {

    .timeline-intro,
    .timeline-chapter-heading,
    .timeline-chapter .timeline-visual,
    .timeline-chapter-footer,
    .timeline-ending h2 {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .timeline-chapter .timeline-visual img {
        transform: none;
        transition: none;
    }
}


/* ==========================================
   ABOUT ME — PERSONAL BIOGRAPHY UPDATE
========================================== */

/* UPDATED COLUMN SPACING */

.about-grid {
    grid-template-columns: 0.95fr 1.05fr;
    gap: 90px;
    align-items: start;
}

/* PERSONAL PHOTO */

.about-photo {
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    margin-top: 55px;
    background: #d8d5cf;
}

.about-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 56% center;
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* SUBTLE IMAGE HOVER */

.about-photo:hover img {
    transform: scale(1.04);
}

/* PHOTO CAPTION */

.about-photo-caption {
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    opacity: 0.5;
    margin-top: 18px;
}

/* LONGER BIOGRAPHY */

.about-description {
    max-width: 600px;
}

.about-description p {
    font-size: 16px;
    line-height: 1.95;
    margin-bottom: 28px;
}

/* MOBILE LAYOUT */

@media (max-width: 900px) {

    .about-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .about-photo {
        margin-top: 35px;
        aspect-ratio: 4 / 5;
        max-width: 520px;
    }

    .about-description {
        max-width: 100%;
    }

    .about-description p {
        font-size: 15px;
        line-height: 1.85;
        margin-bottom: 24px;
    }
}

/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {
    .about-photo img {
        transition: none;
    }
}


/* ==========================================
   BMW CAMPAIGN — CREATIVE STRATEGY
========================================== */

.campaign-strategy {
    max-width: 1400px;
    margin: 0 auto;
    padding: 130px 0 160px;
}

/* SECTION HEADING */

.strategy-heading {
    margin-bottom: 110px;
}

.strategy-heading .section-label {
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0.55;
    margin-bottom: 35px;
}

.strategy-heading h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(52px, 6vw, 96px);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -2px;
    margin-bottom: 40px;
}

.strategy-heading h2 em {
    font-weight: 400;
}

.strategy-intro {
    max-width: 560px;
    font-family: 'DM Sans', sans-serif;
    font-size: 18px;
    line-height: 1.9;
    opacity: 0.7;
}

/* STRATEGY GRID */

.strategy-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 100px;
    row-gap: 90px;
    margin-bottom: 130px;
}

.strategy-item {
    border-top: 1px solid currentColor;
    padding-top: 28px;
}

.strategy-number {
    display: block;
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    letter-spacing: 2px;
    opacity: 0.5;
    margin-bottom: 35px;
}

.strategy-item h3 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(28px, 3vw, 43px);
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 25px;
}

.strategy-item p {
    max-width: 460px;
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    line-height: 1.9;
    opacity: 0.7;
}

/* CENTRAL IDEA */

.strategy-takeaway {
    border-top: 1px solid currentColor;
    padding-top: 35px;
}

.strategy-takeaway span {
    display: block;
    font-size: 11px;
    letter-spacing: 2px;
    opacity: 0.5;
    margin-bottom: 45px;
}

.strategy-takeaway p {
    font-family: 'Playfair Display', serif;
    font-size: clamp(40px, 5vw, 78px);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -1.5px;
}

/* MOBILE RESPONSIVENESS */

@media (max-width: 900px) {

    .campaign-strategy {
        padding: 90px 0 110px;
    }

    .strategy-heading {
        margin-bottom: 70px;
    }

    .strategy-heading h2 {
        letter-spacing: -1px;
    }

    .strategy-intro {
        font-size: 16px;
    }

    .strategy-grid {
        grid-template-columns: 1fr;
        gap: 55px;
        margin-bottom: 90px;
    }

    .strategy-item h3 {
        font-size: 32px;
    }
}


/* ==========================================
   BMW CREATIVE STRATEGY — SCROLL ANIMATIONS
========================================== */

.strategy-heading,
.strategy-item,
.strategy-takeaway {
    opacity: 0;
    transform: translateY(50px);
    transition:
        opacity 1.1s ease,
        transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

/* REVEAL WHEN VISIBLE */

.strategy-heading.visible,
.strategy-item.visible,
.strategy-takeaway.visible {
    opacity: 1;
    transform: translateY(0);
}

/* SUBTLE STAGGER FOR THE STRATEGY GRID */

.strategy-item:nth-child(2),
.strategy-item:nth-child(4) {
    transition-delay: 0.15s;
}

/* ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {
    .strategy-heading,
    .strategy-item,
    .strategy-takeaway {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* ==========================================
   BMW CAMPAIGN — HERO FILM STORYBOARD
========================================== */

.hero-film {
    max-width: 1400px;
    margin: 0 auto;
    padding: 140px 0 160px;
}

/* SECTION INTRODUCTION */

.film-intro {
    margin-bottom: 110px;
}

.film-intro .section-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0.55;
    margin-bottom: 35px;
}

.film-intro h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(48px, 6vw, 96px);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -2px;
    margin-bottom: 40px;
}

.film-intro h2 em {
    font-weight: 400;
}

.film-description {
    max-width: 600px;
    font-family: 'DM Sans', sans-serif;
    font-size: 17px;
    line-height: 1.9;
    opacity: 0.7;
    margin-bottom: 65px;
}

/* FILM DETAILS */

.film-meta {
    display: flex;
    justify-content: space-between;
    gap: 25px;
    flex-wrap: wrap;
    border-top: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    padding: 24px 0;
}

.film-meta span {
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    letter-spacing: 1.7px;
    opacity: 0.6;
}

/* STORYBOARD SCENES */

.film-scene {
    margin-bottom: 120px;
}

.film-scene-number {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 25px;
}

.film-scene-number span {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    opacity: 0.6;
}

/* TWO-COLUMN SCENE LAYOUT */

.film-scene-content {
    display: grid;
    grid-template-columns: 1.35fr 0.85fr;
    gap: 65px;
    align-items: center;
}

/* SCENE PHOTOGRAPHY */

.film-scene-visual {
    position: relative;
    isolation: isolate;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #242424;
    color: #ffffff;
}

.film-scene-visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 1.3s
        cubic-bezier(0.22, 1, 0.36, 1);
}

/* GRADIENT OVER PHOTOS */

.film-scene-visual:has(img)::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.65),
        transparent 60%
    );
    pointer-events: none;
}

/* PHOTO LABEL */

.film-scene-overlay {
    position: absolute;
    bottom: 30px;
    left: 35px;
    z-index: 2;
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    letter-spacing: 2px;
    color: #ffffff;
}

/* SUBTLE IMAGE HOVER */

.film-scene-visual:hover img {
    transform: scale(1.05);
}

/* SCENE DESCRIPTIONS */

.film-scene-details h3 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(30px, 3vw, 46px);
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 25px;
}

.film-scene-details > p {
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    line-height: 1.9;
    opacity: 0.75;
    margin-bottom: 45px;
}

/* CAMERA AND AUDIO DIRECTIONS */

.film-direction {
    border-top: 1px solid currentColor;
    padding-top: 20px;
    margin-top: 25px;
}

.film-direction span {
    display: block;
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    letter-spacing: 1.8px;
    opacity: 0.5;
    margin-bottom: 14px;
}

.film-direction p {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    line-height: 1.8;
    opacity: 0.8;
}

/* ==========================================
   SCENE 06 — FINAL MESSAGE
========================================== */

.film-final-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 35px;
    background: #111111;
    color: #ffffff;
}

.film-final-message {
    position: relative;
    z-index: 2;
    font-family: 'Playfair Display', serif;
    font-size: clamp(32px, 3.5vw, 58px);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -1px;
    text-align: center;
}

.film-final-message em {
    font-weight: 400;
}

/* ==========================================
   TABLET AND MOBILE
========================================== */

@media (max-width: 900px) {

    .hero-film {
        padding: 90px 0 110px;
    }

    .film-intro {
        margin-bottom: 75px;
    }

    .film-intro h2 {
        letter-spacing: -1px;
    }

    .film-description {
        font-size: 15px;
        margin-bottom: 45px;
    }

    .film-scene {
        margin-bottom: 85px;
    }

    .film-scene-content {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .film-scene-visual {
        aspect-ratio: 16 / 10;
    }

    .film-scene-details h3 {
        font-size: 34px;
    }

    .film-scene-details > p {
        margin-bottom: 30px;
    }
}

@media (max-width: 480px) {

    .film-intro h2 {
        font-size: 42px;
    }

    .film-meta {
        flex-direction: column;
        gap: 15px;
    }

    .film-scene-number span {
        font-size: 9px;
        letter-spacing: 1px;
    }

    .film-scene-visual {
        aspect-ratio: 4 / 3;
    }

    .film-scene-overlay {
        bottom: 20px;
        left: 20px;
        font-size: 10px;
    }

    .film-final-message {
        font-size: 30px;
    }
}

/* ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {
    .film-scene-visual img {
        transition: none;
    }
}


/* ==========================================
   BMW HERO FILM — INDIVIDUAL PHOTO POSITIONING
========================================== */

/* SCENE 03 — THE EVOLUTION */
.film-scene:nth-child(3) .film-scene-visual img {
    object-position: center 75%;
}


/* ==========================================
   BMW HERO FILM — SCROLL ANIMATIONS
========================================== */

/* INITIAL HIDDEN STATE */

.film-intro,
.film-scene {
    opacity: 0;
    transform: translateY(55px);

    transition:
        opacity 1.2s ease,
        transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* REVEAL WHEN VISIBLE */

.film-intro.visible,
.film-scene.visible {
    opacity: 1;
    transform: translateY(0);
}

/* CINEMATIC IMAGE ZOOM */

.film-scene-visual img {
    transform: scale(1.08);

    transition:
        transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.film-scene.visible .film-scene-visual img {
    transform: scale(1);
}

/* PRESERVE THE HOVER EFFECT */

.film-scene.visible .film-scene-visual:hover img {
    transform: scale(1.05);
}

/* SCENE 06 — FINAL MESSAGE */

.film-final-message {
    opacity: 0;
    transform: translateY(25px);

    transition:
        opacity 1.2s ease 0.3s,
        transform 1.2s ease 0.3s;
}

.film-scene.visible .film-final-message {
    opacity: 1;
    transform: translateY(0);
}

/* ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {

    .film-intro,
    .film-scene,
    .film-final-message {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .film-scene-visual img,
    .film-scene.visible .film-scene-visual img {
        transform: none;
        transition: none;
    }
}


/* ==========================================
   BMW — SOCIAL MEDIA EXTENSIONS
========================================== */

.campaign-social {
    max-width: 1400px;
    margin: 0 auto;
    padding: 140px 0 160px;
}

/* SECTION INTRO */

.social-intro {
    margin-bottom: 100px;
}

.social-intro .section-label {
    font-size: 11px;
    letter-spacing: 2px;
    opacity: 0.55;
    margin-bottom: 35px;
}

.social-intro h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(48px, 6vw, 96px);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -2px;
    margin-bottom: 40px;
}

.social-description {
    max-width: 620px;
    font-family: 'DM Sans', sans-serif;
    font-size: 17px;
    line-height: 1.9;
    opacity: 0.7;
}

/* TWO-COLUMN LAYOUT */

.social-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 80px;
    align-items: start;
}

.social-card {
    min-width: 0;
}

.social-card-heading {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 0;
    border-top: 1px solid currentColor;
    margin-bottom: 45px;
}

.social-card-heading span {
    font-size: 10px;
    letter-spacing: 1.5px;
    opacity: 0.6;
}

/* ==========================================
   IPHONE MOCKUP
========================================== */

.social-phone {
    width: min(100%, 330px);
    margin: 0 auto 55px;
    padding: 9px;
    border: 3px solid #444;
    border-radius: 46px;
    background: #080808;
    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.35),
        inset 0 0 0 1px #777;
}

.social-phone-screen {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 19.5;
    overflow: hidden;
    border-radius: 35px;
    background: #111;
    color: #fff;
}

/* PHONE CAMERA CUTOUT */

.social-phone-screen::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 24px;
    background: #050505;
    border-radius: 20px;
    z-index: 5;
}

.social-phone-screen > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* DARK GRADIENT OVER IMAGE */

.social-phone-screen::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.15),
        transparent 35%,
        rgba(0,0,0,0.85)
    );
    pointer-events: none;
}

/* TEXT INSIDE PHONE */

.social-video-overlay {
    position: absolute;
    left: 22px;
    right: 55px;
    bottom: 45px;
    z-index: 2;
}

.social-video-label {
    display: block;
    font-size: 9px;
    letter-spacing: 1.5px;
    margin-bottom: 15px;
}

.social-video-overlay h3 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(25px, 3vw, 36px);
    font-weight: 400;
    line-height: 1.15;
    margin-bottom: 18px;
}

.social-video-overlay > p {
    font-size: 9px;
    letter-spacing: 1px;
}

/* SOCIAL ICONS */

.social-video-ui {
    position: absolute;
    right: 13px;
    bottom: 55px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 23px;
    align-items: center;
    font-size: 23px;
}

/* ==========================================
   INSTAGRAM CAROUSEL MOCKUP
========================================== */

.social-post {
    width: min(100%, 430px);
    margin: 0 auto 55px;
    background: #fafafa;
    color: #111;
    border-radius: 8px;
    overflow: hidden;
}

.social-post-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px;
}

.social-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #111;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Playfair Display', serif;
}

.social-post-header strong {
    display: block;
    font-size: 12px;
}

.social-post-header small {
    display: block;
    font-size: 10px;
    color: #777;
}

.social-post-menu {
    margin-left: auto;
    font-size: 18px;
}

.social-post-image {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #222;
    color: #fff;
}

.social-post-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.social-post-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.75),
        transparent 65%
    );
}

.social-post-overlay {
    position: absolute;
    left: 25px;
    bottom: 30px;
    z-index: 2;
}

.social-post-overlay span {
    font-size: 10px;
    letter-spacing: 1.5px;
}

.social-post-overlay h3 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 400;
    line-height: 1.15;
    margin-top: 15px;
}

.social-post-footer {
    display: flex;
    justify-content: space-between;
    padding: 15px 18px 8px;
    font-size: 18px;
}

.social-post-caption {
    padding: 0 18px 20px;
    font-size: 12px;
    line-height: 1.6;
}

/* ==========================================
   CONCEPT DESCRIPTIONS
========================================== */

.social-card-copy {
    max-width: 480px;
}

.social-platform,
.social-purpose {
    display: block;
    font-size: 10px;
    letter-spacing: 1.5px;
    opacity: 0.55;
}

.social-card-copy h3 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 400;
    margin: 20px 0;
}

.social-card-copy > p:not(.social-platform) {
    font-size: 15px;
    line-height: 1.9;
    opacity: 0.75;
    margin-bottom: 30px;
}

/* SECTION ENDING */

.social-takeaway {
    border-top: 1px solid currentColor;
    margin-top: 140px;
    padding-top: 35px;
}

.social-takeaway span {
    display: block;
    font-size: 11px;
    letter-spacing: 2px;
    opacity: 0.5;
    margin-bottom: 45px;
}

.social-takeaway p {
    font-family: 'Playfair Display', serif;
    font-size: clamp(40px, 5vw, 78px);
    line-height: 1.15;
}

.social-takeaway em {
    font-weight: 400;
}

/* ==========================================
   MOBILE
========================================== */

@media (max-width: 900px) {
    .campaign-social {
        padding: 90px 0 110px;
    }

    .social-grid {
        grid-template-columns: 1fr;
        gap: 90px;
    }

    .social-intro {
        margin-bottom: 70px;
    }

    .social-description {
        font-size: 15px;
    }

    .social-takeaway {
        margin-top: 90px;
    }
}

@media (max-width: 480px) {
    .social-intro h2 {
        font-size: 42px;
    }

    .social-phone {
        width: min(100%, 300px);
    }

    .social-card-heading span {
        font-size: 9px;
    }
}


/* ==========================================
   BMW SOCIAL MEDIA — SCROLL ANIMATIONS
========================================== */

.social-intro,
.social-card,
.social-takeaway {
    opacity: 0;
    transform: translateY(55px);
    transition:
        opacity 1.2s ease,
        transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.social-intro.visible,
.social-card.visible,
.social-takeaway.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Slight delay for the second mockup */

.social-card:nth-child(2) {
    transition-delay: 0.15s;
}

/* Subtle hover effect */

.social-phone,
.social-post {
    transition: transform 0.6s ease;
}

.social-phone:hover,
.social-post:hover {
    transform: translateY(-8px);
}

/* Accessibility */

@media (prefers-reduced-motion: reduce) {
    .social-intro,
    .social-card,
    .social-takeaway {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .social-phone,
    .social-post {
        transition: none;
    }

    .social-phone:hover,
    .social-post:hover {
        transform: none;
    }
}


/* ==========================================
   BMW — FLOATING CAMPAIGN NAVIGATION
========================================== */

/* Floating navigation container */

.campaign-floating-nav {
    position: fixed;
    top: 24px;
    right: 28px;
    z-index: 9999;

    opacity: 0;
    visibility: hidden;
    transform: translateY(-15px);

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

/* Appears when scrolling */

.campaign-floating-nav.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Menu button */

.campaign-menu-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    padding: 15px 20px;
    border: 1px solid #444;
    border-radius: 40px;

    background: #191919;
    color: #fff;

    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.5px;

    cursor: pointer;

    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.25);
    transition:
        background 0.3s ease,
        border-color 0.3s ease;
}

.campaign-menu-button:hover {
    background: #303030;
    border-color: #777;
}

/* Hamburger icon */

.campaign-menu-icon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.campaign-menu-icon span {
    display: block;
    width: 17px;
    height: 1.5px;
    background: currentColor;
    border-radius: 2px;
}

/* Dropdown menu */

.campaign-menu {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;

    width: 290px;
    max-width: calc(100vw - 32px);
    padding: 24px;

    background: #1b1b1b;
    color: #fff;

    border: 1px solid #383838;
    border-radius: 16px;

    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.campaign-menu[hidden] {
    display: none;
}

.campaign-menu-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    letter-spacing: 1.8px;
    color: #999;
    margin-bottom: 20px;
}

/* Navigation links */

.campaign-menu a {
    display: block;
    padding: 12px 0;

    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    text-decoration: none;
    color: #ddd;

    transition:
        color 0.25s ease,
        padding-left 0.25s ease;
}

.campaign-menu a:hover,
.campaign-menu a:focus-visible {
    color: #fff;
    padding-left: 6px;
}

/* Divider */

.campaign-menu-divider {
    height: 1px;
    background: #444;
    margin: 14px 0;
}

/* ==========================================
   BACK TO TOP BUTTON
========================================== */

.campaign-back-to-top {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 9998;

    width: 48px;
    height: 48px;

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

    border: 1px solid #444;
    border-radius: 50%;

    background: #191919;
    color: #fff;

    font-size: 24px;
    cursor: pointer;

    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);

    transition:
        opacity 0.35s ease,
        transform 0.35s ease,
        visibility 0.35s ease,
        background 0.3s ease;
}

.campaign-back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.campaign-back-to-top:hover {
    background: #333;
}

/* ==========================================
   MOBILE RESPONSIVENESS
========================================== */

@media (max-width: 600px) {

    .campaign-floating-nav {
        top: 15px;
        right: 15px;
    }

    .campaign-menu-button {
        padding: 13px 16px;
        font-size: 10px;
    }

    .campaign-menu {
        width: min(290px, calc(100vw - 30px));
        padding: 20px;
    }

    .campaign-back-to-top {
        right: 15px;
        bottom: 20px;
        width: 44px;
        height: 44px;
    }
}

/* Accessibility */

@media (prefers-reduced-motion: reduce) {
    .campaign-floating-nav,
    .campaign-back-to-top,
    .campaign-menu-button,
    .campaign-menu a {
        transition: none;
    }
}

/* SMOOTH CAMPAIGN SECTION NAVIGATION */

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}


/* ==========================================
   BMW FLOATING MENU — LAYOUT FIX
========================================== */

.campaign-floating-nav .campaign-menu:not([hidden]) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

.campaign-floating-nav .campaign-menu a {
    display: block;
    width: 100%;
    padding: 12px 0;
    margin: 0;
    flex: none;
    text-align: left;
    white-space: normal;
}

.campaign-floating-nav .campaign-menu-label {
    display: block;
    width: 100%;
    margin-bottom: 16px;
}

.campaign-floating-nav .campaign-menu-divider {
    width: 100%;
    flex: none;
    margin: 14px 0;
}

/* Keep menu usable on shorter screens */
.campaign-floating-nav .campaign-menu {
    max-height: calc(100vh - 110px);
    overflow-y: auto;
}

/* Hide dropdown properly when closed */
.campaign-floating-nav .campaign-menu[hidden] {
    display: none;
}


/* ==========================================
   PHOTOGRAPHY LIGHTBOX
========================================== */

.photo-lightbox[hidden] {
    display: none;
}

.photo-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.96);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 75px;
}

.photo-lightbox img {
    display: block;
    max-width: 100%;
    max-height: 85vh;
    width: auto;
    height: auto;
    object-fit: contain;
}

.photo-lightbox-close,
.photo-lightbox-prev,
.photo-lightbox-next {
    position: absolute;
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
}

.photo-lightbox-close {
    top: 20px;
    right: 30px;
    font-size: 42px;
}

.photo-lightbox-prev,
.photo-lightbox-next {
    top: 50%;
    transform: translateY(-50%);
    font-size: 56px;
    padding: 10px;
}

.photo-lightbox-prev {
    left: 20px;
}

.photo-lightbox-next {
    right: 20px;
}

.photo-lightbox-counter {
    position: absolute;
    bottom: 25px;
    color: #aaa;
    font-size: 12px;
    letter-spacing: 2px;
}

.photography-item {
    cursor: pointer;
}

@media (max-width: 600px) {
    .photo-lightbox {
        padding: 60px 45px;
    }

    .photo-lightbox-prev {
        left: 5px;
    }

    .photo-lightbox-next {
        right: 5px;
    }

    .photo-lightbox-close {
        right: 15px;
    }
}


/* ==========================================
   PHOTOGRAPHY GALLERY — IMAGE SIZE FIX
========================================== */

.photography-page .photography-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.photography-page .photography-item {
    grid-column: auto !important;
    width: 100%;
    min-width: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    margin: 0;
}

.photography-page .photography-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 600px) {
    .photography-page .photography-grid {
        grid-template-columns: 1fr;
    }
}


/* PHOTOGRAPHY PAGE — INTRODUCTION FIX */

body.photography-page .photography-hero {
    max-width: 1400px;
    margin: 0 auto;
    padding: 120px 8% 90px;
}

body.photography-page .photography-hero h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(56px, 8vw, 110px);
    font-weight: 400;
    line-height: 1.1;
    margin: 0 0 30px;
}

body.photography-page .photography-intro {
    max-width: 650px;
    font-family: 'DM Sans', sans-serif;
    font-size: 17px;
    line-height: 1.9;
    color: #aaa;
}

body.photography-page .photography-gallery {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 8% 120px;
}

body.photography-page .photography-gallery-heading {
    margin-bottom: 45px;
}

body.photography-page .photography-gallery-heading h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(40px, 5vw, 68px);
    font-weight: 400;
    line-height: 1.2;
    margin: 0;
}

@media (max-width: 600px) {
    body.photography-page .photography-hero {
        padding: 90px 6% 60px;
    }

    body.photography-page .photography-gallery {
        padding: 20px 6% 80px;
    }
}


/* ==========================================
   PHOTOGRAPHY — MASONRY GALLERY
========================================== */

body.photography-page .photography-grid {
    display: block;
    columns: 2;
    column-gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

body.photography-page .photography-item {
    display: inline-block;
    width: 100%;
    height: auto;
    aspect-ratio: auto !important;
    margin: 0 0 20px;
    break-inside: avoid;
    overflow: hidden;
}

body.photography-page .photography-item img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

@media (max-width: 600px) {
    body.photography-page .photography-grid {
        columns: 1;
    }
}


/* ==========================================
   PHOTOGRAPHY — SCROLL REVEAL ANIMATIONS
========================================== */

/* Only hide elements once JavaScript is ready */
.photography-page.photo-animations-ready .photography-hero,
.photography-page.photo-animations-ready .photography-gallery-heading,
.photography-page.photo-animations-ready .photography-item {
    opacity: 0;
    transform: translateY(35px);
    transition:
        opacity 0.9s ease,
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Reveal elements as they enter the screen */
.photography-page.photo-animations-ready .photography-hero.is-revealed,
.photography-page.photo-animations-ready .photography-gallery-heading.is-revealed,
.photography-page.photo-animations-ready .photography-item.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .photography-page.photo-animations-ready .photography-hero,
    .photography-page.photo-animations-ready .photography-gallery-heading,
    .photography-page.photo-animations-ready .photography-item {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* ==========================================
   PHOTOGRAPHY — CLOSING MESSAGE
========================================== */

.photography-ending {
    max-width: 900px;
    margin: 0 auto;
    padding: 110px 8% 150px;
    text-align: center;
}

.photography-ending-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    letter-spacing: 3px;
    color: #aaa;
    margin-bottom: 25px;
}

.photography-ending h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(40px, 5vw, 72px);
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 30px;
}

.photography-ending-text {
    font-family: 'DM Sans', sans-serif;
    font-size: 17px;
    line-height: 1.9;
    color: #aaa;
    max-width: 650px;
    margin: 0 auto 30px;
}

.photography-ending-signature {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 21px;
    margin-bottom: 50px;
}

.photography-ending-link {
    display: inline-block;
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    letter-spacing: 2px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid currentColor;
    padding-bottom: 8px;
    transition: opacity 0.3s ease;
}

.photography-ending-link:hover {
    opacity: 0.6;
}

@media (max-width: 600px) {
    .photography-ending {
        padding: 80px 7% 110px;
    }

    .photography-ending-text {
        font-size: 15px;
    }
}


/* PHOTOGRAPHY ENDING — SCROLL ANIMATION */

.photography-page.photo-animations-ready .photography-ending {
    opacity: 0;
    transform: translateY(35px);
    transition:
        opacity 0.9s ease,
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.photography-page.photo-animations-ready .photography-ending.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .photography-page.photo-animations-ready .photography-ending {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* ==========================================
   MOBILE HAMBURGER MENU
========================================== */

/* Hide hamburger on desktop */
.site-menu-toggle {
    display: none;
}

@media (max-width: 768px) {

    body > header {
        position: relative;
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: 12px;
    }

    body > header > h1 {
        margin-right: auto;
    }

    /* Hamburger button */

    .site-menu-toggle {
        display: flex;
        order: 2;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        width: 42px;
        height: 42px;
        padding: 0;
        border: 1px solid currentColor;
        border-radius: 50%;
        background: transparent;
        color: inherit;
        cursor: pointer;
        flex-shrink: 0;
    }

    .site-menu-toggle span {
        width: 17px;
        height: 2px;
        background: currentColor;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    /* Animate hamburger into X */

    .site-menu-toggle.is-active span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .site-menu-toggle.is-active span:nth-child(2) {
        opacity: 0;
    }

    .site-menu-toggle.is-active span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    /* Theme toggle */

    body > header > #theme-toggle {
        order: 1;
        flex-shrink: 0;
    }

    /* Hidden mobile navigation */

    body > header > #site-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 5%;
        right: 5%;
        z-index: 1000;
        padding: 20px;
        border-radius: 12px;
        background: #171717;
        box-shadow: 0 15px 35px #00000035;
    }

    /* Open mobile navigation */

    body > header > #site-nav.is-open {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    body > header > #site-nav a {
        display: block;
        padding: 14px 8px;
        color: white;
        text-decoration: none;
        font-family: 'DM Sans', sans-serif;
        font-size: 14px;
        border-bottom: 1px solid #ffffff20;
    }

    body > header > #site-nav a:last-child {
        border-bottom: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-menu-toggle span {
        transition: none;
    }
}


/* ==========================================
   MOBILE HEADER — CLEAN LAYOUT FIX
========================================== */

/* Hide theme label on desktop */
.mobile-theme-label {
    display: none;
}

@media (max-width: 768px) {

    /* Name on left, hamburger on right */
    body > header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 42px;
        align-items: center;
        column-gap: 12px;
        position: relative;
    }

    body > header > h1 {
        grid-column: 1;
        grid-row: 1;
        margin: 0;
    }

    body > header > .site-menu-toggle {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        margin: 0;
    }

    /* Mobile dropdown */
    body > header > #site-nav {
        position: absolute;
        top: 100%;
        left: 5%;
        right: 5%;
        z-index: 1000;
    }

    /* Theme button inside dropdown */
    body > header > #site-nav #theme-toggle {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        width: 100%;
        height: auto;
        min-height: 48px;
        margin: 8px 0 0;
        padding: 14px 8px;
        border: 0;
        border-top: 1px solid #ffffff30;
        border-radius: 0;
        background: transparent;
        color: white;
        cursor: pointer;
        font-family: 'DM Sans', sans-serif;
        font-size: 14px;
        text-align: left;
    }

    body > header > #site-nav #theme-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    body > header > #site-nav .mobile-theme-label {
        display: inline;
    }
}


/* ==========================================
   MOBILE MENU — THEME TOGGLE FIX
========================================== */

@media (max-width: 768px) {

    body > header > #site-nav #theme-toggle,
    body > header > #site-nav #theme-toggle:hover,
    body > header > #site-nav #theme-toggle:focus {
        transform: none !important;
        rotate: none !important;
        width: 100%;
        height: auto;
        min-height: 48px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        padding: 14px 8px;
        margin: 8px 0 0;
        border: none;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 0;
        background: transparent;
        color: white;
        box-shadow: none;
    }

    body > header > #site-nav #theme-toggle:hover {
        background: rgba(255, 255, 255, 0.08);
    }

    body > header > #site-nav .mobile-theme-label {
        display: inline-block;
        font-size: 14px;
        font-style: normal;
        white-space: nowrap;
        transform: none;
    }

    body > header > #site-nav #theme-icon {
        flex-shrink: 0;
    }
}


/* ==========================================
   CONTACT PAGE
========================================== */

.contact-page .contact-main {
    min-height: calc(100vh - 100px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 8% 130px;
}

.contact-page .contact-section {
    width: 100%;
    max-width: 800px;
}

/* INTRODUCTION */

.contact-eyebrow {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 3px;
    margin-bottom: 25px;
    opacity: 0.6;
}

.contact-page .contact-section h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(56px, 8vw, 105px);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -2px;
    margin: 0 0 30px;
}

.contact-page .contact-section h2 em {
    font-weight: 400;
}

.contact-description {
    max-width: 550px;
    font-family: 'DM Sans', sans-serif;
    font-size: 17px;
    line-height: 1.9;
    opacity: 0.7;
    margin-bottom: 65px;
}

/* CONTACT LINKS */

.contact-links {
    width: 100%;
    border-top: 1px solid currentColor;
}

.contact-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 28px 8px;
    border-bottom: 1px solid currentColor;
    color: inherit;
    text-decoration: none;
    transition: padding 0.3s ease;
}

.contact-item:hover {
    padding-left: 20px;
}

.contact-item-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.contact-item-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    letter-spacing: 2px;
    opacity: 0.6;
}

.contact-item-value {
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(16px, 2vw, 22px);
    overflow-wrap: anywhere;
}

.contact-item-arrow {
    font-size: 27px;
    transition: transform 0.3s ease;
}

.contact-item:hover .contact-item-arrow {
    transform: translate(4px, -4px);
}

/* BACK TO PORTFOLIO */

.contact-back {
    display: inline-block;
    margin-top: 55px;
    padding-bottom: 8px;
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    letter-spacing: 2px;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    transition: opacity 0.3s ease;
}

.contact-back:hover {
    opacity: 0.6;
}

/* MOBILE */

@media (max-width: 600px) {

    .contact-page .contact-main {
        min-height: auto;
        padding: 110px 7% 100px;
    }

    .contact-page .contact-section h2 {
        letter-spacing: -1px;
    }

    .contact-description {
        font-size: 15px;
        margin-bottom: 45px;
    }

    .contact-item {
        padding: 24px 4px;
    }

    .contact-back {
        margin-top: 45px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .contact-item,
    .contact-item-arrow,
    .contact-back {
        transition: none;
    }
}