/* Hanken Grotesk Black loaded via Google Fonts in index.html */
/* @font-face removed to prevent 404 on missing ../fonts directory */

/* Reset default browser margins for native scroll */
html,
body {
    margin: 0;
    padding: 0;
}

#tectonics {
    font-size: 16px;
    --offwhite: rgb(245, 243, 238);
    --color-text: #0e0d0e;
    --color-bg: var(--offwhite);
    --color-link: #0e0d0e;
    --color-link-hover: #0e0d0e;
    --page-padding: 1rem;
    --grid-gap: var(--page-padding);
    --color-bg-content: var(--offwhite);

    /* Start Copy 3a: Tectonics Variables */
    /* Mobile carousel color overlay accent colors */
    --color-corner: #f9f1d8;
    /* Warm White - The Corner */
    --color-cafe: #dee895;
    /* Pistachio - The Cafe */
    --color-lantern: #c9d6e5;
    /* Soft Blue - The Lantern */
    --color-wave: #84b1df;
    /* Steel Blue - The Wave */
    --color-detail: #f6f1d1;
    /* Washed Yellow - The Detail */
    --font-size-body: max(0.475rem, 0.625vw);

    /* Hero text dimensions - based on 2483.2px / 3838px and 509.3px / 1973.8px */
    --hero-text-margin: 7.5vw;
    /* ~30px at 400vw */
    --hero-text-width: calc(100% - (2 * var(--hero-text-margin)));
    --hero-text-height: calc(var(--locked-vh, 1vh) * 25.8);

    --studio-font-size: clamp(72px, min(2.4vw, calc(var(--locked-vh, 1vh) * 8)), 184px);

    --font-weight-regular: var(--font-weight-regular, 400);
    --font-weight-bold: var(--font-weight-black, 900);
    /* Start Copy End 3a */
}

/* Start Copy 3b: Tectonics Styles */
/* Note: You may want to omit the global body/html rules below if your Portfolio already has them */

#tectonics *,
#tectonics *::after,
#tectonics *::before {
    box-sizing: border-box;
}

#tectonics {
    width: 100%;
    margin: 0;
    /* overflow: hidden; removed */
    /* Lock the viewport */
    /* height: 100%; removed */
    /* Force full height */
    color: var(--color-text);
    background-color: var(--color-bg);
    font-family: "area-variable", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Scroll Container Wrapper removed */

/* Page Loader */
#tectonics .js .loading::before,
#tectonics .js .loading::after {
    content: '';
    position: fixed;
    z-index: 1000;
}

#tectonics .js .loading::before {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-bg);
}

#tectonics .js .loading::after {
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    margin: -30px 0 0 -30px;
    border-radius: 50%;
    opacity: 0.4;
    background: var(--color-link);
    animation: loaderAnim 0.7s linear infinite alternate forwards;
}

@keyframes loaderAnim {
    to {
        opacity: 1;
        transform: scale3d(0.5, 0.5, 1);
    }
}

#tectonics .type-tiny {
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 400;
}

#tectonics .spacer {
    height: calc(var(--locked-vh, 1vh) * 100);
    display: flex;
    align-items: center;
    justify-content: center;
}

#tectonics .spacer h1 {
    font-size: 2rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

#tectonics .content {
    position: relative;
    min-height: calc(var(--locked-vh, 1vh) * 100);
    background: var(--color-bg-content);
    align-content: center;
    z-index: 1;
    /* Ensure it stays behind detail section */
}

#tectonics .content--padded {
    padding: var(--page-padding);
}

#tectonics .grid {
    display: grid;
    width: 100%;
    height: 100%;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: 1fr 1fr 1fr;
}

#tectonics .grid--spaced {
    gap: var(--grid-gap);
}

#tectonics .grid--columns {
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(2, min-content);
    align-content: center;
}

#tectonics .grid__img-wrapper {
    position: relative;
    will-change: transform;
    opacity: 0;
    /* Hidden by default for the scroll animation to reveal */
}

#tectonics .grid__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    background-size: cover;
    background-position: 50% 50%;
    pointer-events: auto;
    cursor: pointer;
    will-change: transform;
    transform: translateZ(0.1px);
}

#tectonics .grid--columns .grid__img-wrapper {
    height: min-content;
    aspect-ratio: 2 / 3;
}

@media (max-aspect-ratio: 16/9) {
    #tectonics .grid {
        width: 100%;
        height: auto;
        aspect-ratio: 16/9;
    }
}

/* ============================================
   Hero Text Box - Behind Grid Images
   ============================================ */

#tectonics .hero-text-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--hero-text-width);
    height: var(--hero-text-height);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 0;
    /* Behind grid images */
    pointer-events: none;
    will-change: filter, opacity;
    /* Optimize blur animation performance */
}

#tectonics .hero-text-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

#tectonics .hero-title {
    font-family: 'Hanken Grotesk', sans-serif;
    font-weight: var(--font-weight-regular);
    font-size: calc(var(--studio-font-size) / 2);
    margin: 0;
    color: var(--color-text);
}

#tectonics .sup-script {
    font-family: 'Cormorant Infant', serif;
    font-weight: 300;
    font-style: italic;
    font-size: 1em;
    vertical-align: super;
}

#tectonics .hero-text {
    font-family: 'Hanken Grotesk', sans-serif;
    font-weight: var(--font-weight-bold);
    /* Font size: 35pt @ 3838px ≈ 0.91vw, using 1.2vw as specified */
    /* clamp(min, preferred, max) for responsive sizing */
    font-size: var(--studio-font-size);
    line-height: 1.4;
    color: var(--color-text);
    text-align: center;
    margin: 0;
    padding: 0 1rem;
}

#tectonics .hero-text .accent {
    font-family: 'Cormorant Infant', serif;
    font-style: italic;
    font-weight: 400;
}

/* Grid images should be above the hero text */
#tectonics .grid__img {
    position: relative;
    z-index: 1;
}

/* ============================================
   Mobile Responsiveness (< 768px)
   ============================================ */

@media (max-width: 767px) {
    #tectonics {
        --studio-font-size: max(1.1rem, 0.55rem);
    }

    #tectonics .hero-text-box {
        height: auto;
        /* Allow natural height for text wrapping */
        min-height: auto;
        padding: 2rem 0;
    }

    #tectonics .hero-text {
        /* Maintain readable size on mobile with clamp */
        line-height: 1.5;
        padding: 0 1.5rem;
    }
}

/* ============================================
   Mobile Landscape (phones rotated sideways)
   Uses max-height + orientation to detect rotated phones
   ============================================ */

@media (max-height: 500px) and (orientation: landscape) {
    #tectonics {
        /* Smaller text for limited vertical space */
        /* Increased by ~20% as requested */
        --studio-font-size: clamp(1rem, calc(var(--locked-vh, 1vh) * 5), 2rem);
    }

    #tectonics .hero-text-box {
        height: auto;
        padding: 1rem 0;
    }

    #tectonics .hero-text {
        line-height: 1.3;
        padding: 0 2rem;
    }

    /* Increase title size ratio for landscape (0.5 -> 0.6 = +20%) */
    #tectonics .hero-title {
        font-size: calc(var(--studio-font-size) * 0.6);
    }

    /* Ensure grid has appropriate height in landscape */
    #tectonics .grid--columns[data-grid-second] {
        min-height: calc(var(--locked-vh, 1vh) * 70);
    }

    /* Reduce vertical padding for detail section */
    #tectonics .detail-content {
        padding-top: calc(var(--locked-vh, 1vh) * 4);
        padding-bottom: calc(var(--locked-vh, 1vh) * 8);
    }

    /* Text lines flow as paragraph in landscape (no forced line breaks) */
    #tectonics .detail-body .line {
        display: inline;
    }

    /* Add space after each line element since they're now inline */
    #tectonics .detail-body .line::after {
        content: ' ';
    }

    /* Smaller detail text for limited vertical space */
    #tectonics .detail-body {
        font-size: clamp(0.75rem, calc(var(--locked-vh, 1vh) * 2.5), 1rem);
        line-height: 1.5;
    }

    #tectonics .detail-title {
        font-size: clamp(1rem, calc(var(--locked-vh, 1vh) * 4), 1.5rem);
    }
}

/* ============================================
   Image Overlay
   ============================================ */


/* ============================================
   Image Overlay
   ============================================ */

#tectonics .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(var(--locked-vh, 1vh) * 100);
    z-index: 2000;

    /* 1. Grid Structure: Strict 5-column grid */
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 1fr;
    /* Full height single row */

    /* Background Blur Layer */
    background-color: rgba(245, 243, 238, 0.65);
    /* Off-white @ 65% */
    backdrop-filter: blur(8px);
    /* Blur the underlying page */
    -webkit-backdrop-filter: blur(8px);
    /* Safari support */

    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none;
}

#tectonics .overlay.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* 2. Green Space: Background spanning columns 2-5 */
#tectonics .overlay::before {
    content: '';
    grid-column: 2 / 5;
    grid-row: 1 / -1;
    background-color: var(--overlay-bg, #dee895);
    width: 100%;
    height: 100%;
    z-index: -1;
    /* Behind content */
}

/* Unwrap becomes Flex Container */
#tectonics .overlay__content {
    grid-column: 2 / 5;
    grid-row: 1 / -1;
    display: flex;
    align-items: flex-end;
    /* Align all children to the bottom */
    width: 100%;
    height: 100%;
    /* Optional: limit max width if needed, but grid handles the main constraint */
}

/* 3. Image Alignment */
#tectonics .overlay__image-box {
    /* Previously grid-column: 2 / 4 (2 columns) */
    flex: 2;
    /* Takes up 2/3 of the space */
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
    /* keep image vertically centered in its box if desired, or flex-end to sit on bottom */
    position: relative;
    padding-left: 20px;
}

/* 3b. The Buffer Logic (No Cropping) */
#tectonics .overlay__img {
    max-height: calc(var(--locked-vh, 1vh) * 80);
    /* Reduced slightly to ensure it fits well with text */
    width: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
    /* Ensure image sits on the bottom if that's the desired baseline alignment: */
    align-self: flex-end;
    margin-bottom: calc(var(--locked-vh, 1vh) * 10);
    /* Match the vertical buffer */
}

/* 4. Text Alignment */
#tectonics .overlay__text-box {
    /* Previously grid-column: 4 (1 column) */
    flex: 1;
    /* Takes up 1/3 of the space */

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Pushes content to the bottom */
    padding: 0 2rem;
    /* padding-bottom is handled by JS for alignment with grid images */
    /* Align with image bottom margin */

    font-family: 'Hanken Grotesk', sans-serif;
    font-size: calc(var(--font-size-body) * 1.4);
    line-height: 1.4;
    color: var(--color-text);
    width: 100%;
    max-width: none;
    align-self: flex-end;
    /* Double assurance it sits at the bottom */
    min-width: 300px;
}

#tectonics .overlay__subheading {
    font-family: 'Hanken Grotesk', sans-serif;
    font-weight: 500;
    text-align: left;
    margin: 0 0 0.2rem 0;
    line-height: 1;
    /* Ratio Calculation: 71 / 33 = 2.1515 */
    /* Applied to existing body text scaler (1.4): 1.4 * 2.1515 = 3.012 */
    font-size: calc(var(--font-size-body) * 3.012);
    color: var(--color-text);
}

/* Controls */
#tectonics .overlay__nav,
#tectonics .overlay__close {
    position: absolute;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text);
    padding: 1rem;
    transition: opacity 0.3s ease;
    z-index: 2001;
}

#tectonics .overlay__nav:hover,
#tectonics .overlay__close:hover {
    opacity: 0.7;
}

/* Navigation arrows - centered in the 20% margin columns */
#tectonics .overlay__nav--prev {
    left: 10vw;
    top: 50%;
    transform: translate(-50%, -50%);
}

#tectonics .overlay__nav--next {
    right: 10vw;
    top: 50%;
    transform: translate(50%, -50%);
}

/* Close button - same X position as prev arrow */
#tectonics .overlay__close {
    left: 10vw;
    bottom: 2rem;
    transform: translateX(-50%);
}

#tectonics .overlay__nav svg,
#tectonics .overlay__close svg {
    display: block;
    stroke-width: 1.5;
}

#tectonics .overlay__close svg {
    width: 40px;
    height: 40px;
}

#tectonics .overlay__nav svg {
    width: 60px;
    height: 60px;
}

/* ============================================
   Custom Liquid Glass Cursor
   ============================================ */

#tectonics .custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px) brightness(1.1);
    -webkit-backdrop-filter: blur(12px) brightness(1.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 999999;
    /* Increased to ensure it's on top of everything */
    opacity: 0;
    /* Removed transform from here as GSAP will handle it */
    transition: opacity 0.4s ease;
    will-change: transform, opacity;
}

#tectonics .custom-cursor.is-visible {
    opacity: 1;
}

#tectonics .custom-cursor__icon {
    width: 24px;
    height: 24px;
    color: var(--color-text);
    opacity: 0.8;
}

/* Hide default cursor when grid is interactive */
#tectonics .grid[data-grid-second].is-interactive .grid__img {
    cursor: none;
}

/* Hide mobile carousel dots on desktop by default */
#tectonics .mobile-carousel-dots {
    display: none;
}

/* ============================================
   Detail Section (Plan / Section / Detail)
   ============================================ */

#tectonics .detail-section {
    position: relative;
    width: 100%;
    height: calc(var(--locked-vh, 1vh) * 100);
    overflow: visible;
    /* Allow background over-scan to bleed down */
    background-color: transparent;
    z-index: 5;
    margin-top: calc(var(--locked-vh, 1vh) * -100);
    pointer-events: none;
}

/* Ensure the white card and content catch events */
#tectonics .detail-bg,
#tectonics .detail-content {
    pointer-events: auto;
}

#tectonics .detail-grid {
    display: grid;
    width: 100%;
    height: 100%;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 1fr;
}

/* White Background (Cols 2-4) */
#tectonics .detail-bg {
    grid-column: 2 / 5;
    grid-row: 1;
    background-color: #ffffff;
    width: 100%;
    min-height: 100lvh;
    /* Over-scan: Covers mobile gap by bleeding down */
    z-index: 1;
}

/* Content Container (Cols 2-4) */
#tectonics .detail-content {
    grid-column: 2 / 5;
    grid-row: 1;
    display: flex;
    /* Both columns stretch to full height of the safe zone */
    width: 100%;
    height: calc(var(--locked-vh, 1vh) * 100);
    position: relative;
    /* Positioning context for detail-nav on mobile */
    padding-top: calc(var(--locked-vh, 1vh) * 8);
    padding-bottom: calc(var(--locked-vh, 1vh) * 18);
    /* Asymmetric padding: less top, more bottom for negative space */
    gap: 2vw;
    /* Horizontal spacing between image and text columns */
    z-index: 2;
}

/* Images Column (Left 2/3) */
#tectonics .detail-images {
    flex: 2;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    /* Align wrapper to bottom */
    position: relative;
    padding-left: 20px;
}

#tectonics .detail-img-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

#tectonics .detail-img {
    position: absolute;
    inset: 0;
    /* Fill container */
    margin: auto auto 0;
    /* Center horizontally, push to bottom */
    max-height: calc(var(--locked-vh, 1vh) * 65);
    /* Constrained height for better proportions with bottom negative space */
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    opacity: 0;
    visibility: hidden;
    /* transition: opacity 0.5s ease;  GSAP will handle this */
}

#tectonics .detail-img.active {
    opacity: 1;
    visibility: visible;
}

/* Text Column (Right 1/3) */
#tectonics .detail-texts {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Text content at bottom */
    align-items: flex-start;
    padding: 0 2rem;
    position: relative;
}

#tectonics .detail-text-unit {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: left;
    opacity: 0;
    /* visibility: hidden; Handled by GSAP */
    /* Stacked on top of each other, only active one visible */
}

#tectonics .detail-text-unit.active {
    opacity: 1;
    visibility: visible;
}

#tectonics .detail-title {
    font-family: 'Hanken Grotesk', sans-serif;
    font-weight: 500;
    font-size: calc(var(--font-size-body) * 3);
    line-height: 1.1;
    margin-bottom: 1rem;
    color: var(--color-text);
    overflow: hidden;
    /* For reveal animation */
}

#tectonics .detail-title .line {
    display: block;
    will-change: transform, opacity;
}

#tectonics .detail-body {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: calc(var(--font-size-body) * 1.4);
    line-height: 1.4;
    color: var(--color-text);
    overflow: hidden;
    /* For reveal animation */
}

#tectonics .detail-body .line {
    display: block;
    will-change: transform, opacity;
}

/* Bottom Navigation */
#tectonics .detail-nav {
    position: absolute;
    bottom: calc(var(--locked-vh, 1vh) * 6);
    /* Positioned within the negative space zone */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #999;
    /* Inactive color */
    z-index: 10;
    pointer-events: auto;
}

#tectonics .detail-nav-item {
    cursor: pointer;
    transition: color 0.3s ease;
}

#tectonics .detail-nav-item.active {
    color: #000;
    font-weight: 600;
}

#tectonics .detail-nav-sep {
    color: #ccc;
}

/* ============================================
   Detail Section - Mobile Responsiveness
   ============================================ */

@media (max-width: 768px) {
    #tectonics .detail-section {
        height: calc(var(--locked-vh, 1vh) * 100);
        min-height: calc(var(--locked-vh, 1vh) * 100);
        /* Uses desktop margin-top: calc(var(--locked-vh, 1vh) * -100) */
    }

    #tectonics .detail-grid {
        grid-template-columns: 1fr;
        /* Single column on mobile */
    }

    #tectonics .detail-bg {
        grid-column: 1;
    }

    #tectonics .detail-content {
        grid-column: 1;
        flex-direction: column;
        /* Stack vertically on mobile */
        align-items: center;
        /* Center children horizontally */
        justify-content: center;
        /* Center the image+text group vertically */
        padding-top: calc(var(--locked-vh, 1vh) * 8);
        padding-bottom: calc(var(--locked-vh, 1vh) * 14);
        /* Bottom padding accommodates nav bar centered within */
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        gap: calc(var(--locked-vh, 1vh) * 5);
        /* Vertical gap between image and text */
        height: calc(var(--locked-vh, 1vh) * 100);
        min-height: calc(var(--locked-vh, 1vh) * 100);
        /* Anchored to top, allowing lvh background to leak out bottom if needed */
        position: relative;
        top: 0;
    }

    #tectonics .detail-images {
        flex: none;
        width: 100%;
        height: calc(var(--locked-vh, 1vh) * 40);
        /* Match wrapper height */
        padding-left: 0;
        margin-bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #tectonics .detail-img-wrapper {
        width: 100%;
        height: calc(var(--locked-vh, 1vh) * 40);
        /* Fixed height for absolutely positioned images */
        position: relative;
        /* Positioning context for absolute children */
    }

    #tectonics .detail-img {
        /* Keep position: absolute from desktop - images stack and swap */
        /* Override positioning to center within wrapper */
        inset: 0;
        margin: auto;
        /* Center both horizontally and vertically */
        max-height: 100%;
        /* Fill wrapper height */
        max-width: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
    }

    #tectonics .detail-texts {
        flex: none;
        width: 100%;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* Center text container horizontally */
    }

    #tectonics .detail-text-unit {
        position: relative;
        /* Flow-based on mobile for proper stacking */
        left: auto;
        right: auto;
        bottom: auto;
        text-align: center;
        /* Center-align all text */
    }

    #tectonics .detail-text-unit:not(.active) {
        display: none;
        /* Hide inactive units on mobile */
    }

    #tectonics .detail-title {
        font-size: clamp(1.25rem, 5vw, 1.75rem);
        text-align: center;
    }

    /* Disable interactions on grid images for mobile */
    #tectonics .grid__img {
        pointer-events: none !important;
        cursor: default;
    }

    /* Reset Detail Section Margin for Mobile (No Overlap) */
    #tectonics .detail-section {
        margin-top: 0 !important;
    }

    /* Stacking Effect for Grid Images */
    #tectonics .grid--columns[data-grid-second] {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        display: grid;
        place-items: center;
        height: 100%;
        min-height: calc(var(--locked-vh, 1vh) * 80);
        /* Ensure enough height for the stack */
        /* overflow: hidden moved to .carousel-active - only clip when gallery is active */
        width: 80%;
        margin: 0 auto;
    }

    /* Carousel clipping - only active when gallery mode is enabled */
    #tectonics .grid--columns[data-grid-second].carousel-active {
        overflow: hidden;
        /* Clip carousel to hide neighboring slides */
    }

    #tectonics .grid--columns[data-grid-second] .grid__img-wrapper {
        grid-area: 1 / 1 / -1 / -1;
        width: 100%;
        /* Fill the grid which is already 80% width */
        height: auto;
        aspect-ratio: 1000 / 1571;
        /* Match actual image dimensions to prevent cropping */
        margin: auto;
        opacity: 1 !important;
        /* Force visibility for stacking */
        transition: opacity 0.4s ease, visibility 0.4s ease;
        will-change: transform;
        flex-shrink: 0;
        overflow: hidden;
        /* Clip image to wrapper bounds - prevents visual jump when carousel activates */
    }

    /* Color overlay support for mobile carousel */
    #tectonics .grid--columns[data-grid-second] .grid__img-wrapper.image-hover-wrapper {
        overflow: visible;
        /* Override color-overlay.css overflow:hidden to allow overlays to show */
    }

    #tectonics .grid--columns[data-grid-second] .grid__img-wrapper .hover-accent-bar,
    #tectonics .grid--columns[data-grid-second] .grid__img-wrapper .hover-color-block {
        z-index: 20;
        /* Ensure overlays are above .grid__img which has z-index: 1 */
    }

    #tectonics .grid--columns[data-grid-second] .grid__img-wrapper.show-overlay .hover-accent-bar {
        opacity: 1;
    }

    #tectonics .grid--columns[data-grid-second] .grid__img-wrapper.show-overlay .hover-color-block {
        opacity: 1;
        transform: scale(1);
    }

    /* In-Place Carousel Dot Navigation */
    #tectonics .mobile-carousel-dots {
        position: absolute;
        top: calc(50% + 60vw);
        /* 50% (center) + half of image height (80vw width * 1.5 aspect ratio / 2 = 60vw) */
        left: 50%;
        transform: translateX(-50%);
        margin-top: 15px;
        display: flex !important;
        justify-content: center;
        align-items: center;
        gap: 12px;
        padding: 5px 20px;
        z-index: 100;
    }

    #tectonics .mobile-carousel-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #D8D8D8;
        border: none;
        padding: 0;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    #tectonics .mobile-carousel-dot.active {
        background-color: #333;
        transform: scale(1.2);
    }

    #tectonics .mobile-carousel-dot:hover {
        background-color: #C0C0C0;
    }

    #tectonics .mobile-carousel-dot:focus {
        outline: none;
    }

    #tectonics .mobile-carousel-dot.active:hover {
        background-color: #333;
    }

    #tectonics .detail-body {
        font-size: clamp(0.875rem, 3.5vw, 1rem);
        text-align: center;
    }

    #tectonics .detail-nav {
        bottom: calc(var(--locked-vh, 1vh) * 7);
        /* Centered within the 14svh bottom padding zone */
    }
}

/* ============================================
   Final Hero Image - Project Conclusion
   ============================================ */

#tectonics .final-hero {
    position: relative;
    width: 100%;
    height: calc(var(--locked-vh, 1vh) * 80);
    overflow: hidden;
    background-color: var(--color-bg);
    z-index: 10;
    /* Higher than detail-section to mask its over-scan bleed */
}

#tectonics .final-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

/* Mobile adjustments for final hero */
@media (max-width: 767px) {
    #tectonics .final-hero {
        height: auto;
        /* Let height be determined by full-width image */
        max-height: calc(var(--locked-vh, 1vh) * 80);
        /* Cap section height at 80svh */
        overflow: hidden;
        /* Crop vertically if image exceeds 80svh */
    }

    #tectonics .final-hero__img {
        width: 100%;
        /* Full width of screen */
        height: auto;
        /* Natural height based on aspect ratio */
        object-fit: cover;
        /* Cover ensures full width, crops top/bottom if needed */
        object-position: center center;
        max-height: calc(var(--locked-vh, 1vh) * 80);
        /* Ensure image doesn't exceed container cap */
    }
}