/* -----------------------------------------------------------
   [TAG: MAIN NAV]
----------------------------------------------------------- */
.main-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--nav-height);
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    column-gap: var(--grid-gap);
    padding: 0 var(--page-margin);
    align-items: center;
    z-index: var(--z-nav);
    background: transparent;
    pointer-events: none;
    mix-blend-mode: difference;
    color: var(--off-white);
}

.nav-logo,
.nav-links,
.menu-toggle { pointer-events: auto; }

.nav-logo { grid-column: span 4; }

.logo-text {
    font-weight: var(--fw-bold);
    font-size: var(--fs-body);
    text-decoration: none;
    color: inherit;
    letter-spacing: 0;
}

.nav-links {
    grid-column: 5 / span 8;
    display: flex;
    justify-content: flex-end;
    gap: var(--space-m);
}

/* -----------------------------------------------------------
   [TAG: MOBILE MENU - TOGGLE]
----------------------------------------------------------- */
.menu-toggle {
    display: none;
    grid-column: 12;
    justify-self: end;
    background: none;
    border: none;
    flex-direction: column;
    gap: 6px;
    z-index: calc(var(--z-nav) + 1);
    pointer-events: auto;
}

.menu-toggle .line {
    width: 24px;
    height: 2px;
    background-color: var(--off-white);
    transition: transform var(--time-base) var(--ease-ui);
    display: block;
}

.nav-email { display: none; }

/* -----------------------------------------------------------
   [TAG: MOBILE MENU - OVERLAY]
----------------------------------------------------------- */
@media (max-width: 800px) {
    .menu-toggle { display: flex; }

    .main-nav { mix-blend-mode: normal; }

    .nav-links {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: var(--off-black);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: var(--space-m);
        z-index: var(--z-nav);
        transform: translateY(-100%);
        transition: transform var(--time-slow) var(--ease-editorial);
        pointer-events: none;
    }

    .nav-links.is-open {
        transform: translateY(0);
        pointer-events: auto;
    }

    .nav-links a {
        opacity: 0;
        transform: translateY(12px);
        transition: opacity var(--time-base) var(--ease-ui) var(--time-fast),
                    transform var(--time-base) var(--ease-ui) var(--time-fast);
    }

    .nav-links.is-open a {
        opacity: 1;
        transform: translateY(0);
    }

    .menu-toggle.is-active .line:nth-child(1) { transform: translateY(4px) rotate(45deg); }
    .menu-toggle.is-active .line:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

    .nav-email {
        display: inline-block;
        margin-top: var(--space-m);
    }
}

/* -----------------------------------------------------------
   [TAG: NAV - WORK DROPDOWN (DESKTOP)]
----------------------------------------------------------- */
.nav-work-group {
    position: relative;
    display: flex;
    align-items: center;
}

.nav-work-submenu {
    position: absolute;
    top: 100%;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    padding-top: var(--space-s);
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity var(--time-base) var(--ease-ui),
                transform var(--time-base) var(--ease-ui);
}

.nav-work-group:hover .nav-work-submenu,
.nav-work-group:focus-within .nav-work-submenu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.nav-sub-link {
    white-space: nowrap;
}

/* -----------------------------------------------------------
   [TAG: NAV - WORK DROPDOWN (MOBILE)]
----------------------------------------------------------- */
@media (max-width: 800px) {
    .nav-work-group {
        flex-direction: column;
        align-items: center;
        gap: var(--space-xs);
    }

    .nav-work-submenu {
        position: static;
        opacity: 1;
        transform: none;
        pointer-events: auto;
        padding-top: var(--space-xs);
        gap: var(--space-xs);
        align-items: center;
    }

    .nav-sub-link {
        font-weight: var(--fw-light);
    }
}

/* -----------------------------------------------------------
   [TAG: HERO]
----------------------------------------------------------- */
#hero {
    align-content: start;
    padding-top: var(--section-pt);
    padding-bottom: var(--section-pb);
}

/* -----------------------------------------------------------
   [TAG: FEATURED PROJECTS CAROUSEL]
----------------------------------------------------------- */
#featured-projects {
    padding-top: var(--section-pt);
    padding-bottom: var(--section-pb);
}

.carousel-container {
    overflow: hidden;
    position: relative;
}

.carousel-track {
    display: flex;
    gap: var(--grid-gap);
    width: 100%;
    transition: transform var(--time-carousel-move) var(--ease-editorial);
    will-change: transform;
}

.carousel-slide {
    flex: 0 0 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--time-slow) var(--ease-ui);
}

.carousel-slide:hover img { transform: scale(var(--scale-img-hover)); }

.carousel-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--space-s);
    border-top: 2px solid var(--border-current);
    margin-top: var(--grid-gap);
}

.carousel-project-name {
    font-size: var(--fs-body);
    font-weight: var(--fw-light);
}

.carousel-view-link .arrow-formatted {
    transition: transform var(--time-fast) var(--ease-ui);
}

.carousel-view-link:hover .arrow-formatted { transform: translateX(8px); }

/* -----------------------------------------------------------
   [TAG: CAPABILITIES]
----------------------------------------------------------- */
#capabilities {
    align-items: start;
    padding-top: var(--section-pt);
    padding-bottom: var(--section-pb);
}

.capabilities-intro .label {
    display: block;
    color: var(--grey);
}

#capabilities .body-text { max-width: none; }

.inline-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    transition: opacity var(--time-fast) var(--ease-ui);
}

.inline-link:hover { opacity: 0.5; }

.accordion-item {
    border-bottom: 2px solid var(--border-current);
    transition: transform var(--time-fast) var(--ease-ui),
                opacity var(--time-fast) var(--ease-ui);
}

.col-6-right { grid-column: 7 / span 6; }

.accordion-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-s) 0;
    background: none;
    border: none;
    color: inherit;
    text-align: left;
}

.accordion-icon {
    font-size: var(--fs-icon);
    font-weight: var(--fw-light);
    transition: transform var(--time-base) var(--ease-smooth);
    flex-shrink: 0;
}

.accordion-item.is-active .accordion-icon { transform: rotate(45deg); }

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--time-slow) var(--ease-smooth);
}

.accordion-content .body-text {
    padding-bottom: var(--space-s);
    color: var(--grey);
    margin: 0;
}

.capabilities-list {
    max-height: 420px;
    overflow-y: scroll;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to bottom, var(--off-black) 85%, transparent 100%);
    mask-image: linear-gradient(to bottom, var(--off-black) 85%, transparent 100%);
    transition: -webkit-mask-image var(--time-base) var(--ease-ui);
}

.capabilities-list.is-at-end {
    -webkit-mask-image: none;
    mask-image: none;
}

.capabilities-list::-webkit-scrollbar { display: none; }

/* -----------------------------------------------------------
   [TAG: TRUST]
----------------------------------------------------------- */
#trust {
    background-color: var(--off-black);
    padding-top: var(--section-pt);
    padding-bottom: var(--section-pb);
}

.trust-header { margin-bottom: var(--space-m); }

.divider-line {
    width: 100%;
    height: 2px;
    background-color: var(--border-subtle);
    margin-top: var(--grid-gap);
}

.logo-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    row-gap: var(--space-m);
    column-gap: var(--space-s);
    align-items: center;
    padding-top: var(--space-s);
}

.logo-item {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    height: 100px;
    filter: grayscale(1);
    opacity: 0.5;
    transition: opacity var(--time-base) var(--ease-ui),
                filter var(--time-base) var(--ease-ui);
}

.logo-item:hover { opacity: 1; filter: grayscale(0); }

.logo-item img {
    width: 100%;
    height: 100%;
    max-width: 300px;
    max-height: 150px;
    object-fit: contain;
    pointer-events: none;
}

/* -----------------------------------------------------------
   [TAG: MISSION]
----------------------------------------------------------- */
#mission {
    padding-top: 0;
    padding-bottom: var(--section-pb);
    row-gap: var(--space-m);
}

.mission-media-wrapper {
    position: relative;
    height: var(--vh-50);
    overflow: hidden;
    width: 100vw;
    margin-left: calc(-1 * var(--page-margin));
}

.mission-video-iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 56.25vw;
    min-height: var(--vh-100);
    min-width: 177.77vh;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.mission-text-content .display-h2 { line-height: 1.4; }

/* -----------------------------------------------------------
   [TAG: FOOTER]
----------------------------------------------------------- */
#footer {
    border-top: 2px solid var(--border-current);
    padding-top: var(--section-pt);
    padding-bottom: var(--section-pb);
    align-items: start;
    row-gap: var(--space-xl);
}

.footer-identity-block {
    grid-column: 1 / span 3;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.footer-hours-block { grid-column: 5 / span 2; }
.footer-contact-block { grid-column: 8 / span 2; }
.footer-location-block { grid-column: 10 / span 3; }


.submit-link:hover { opacity: 0.5; }

#footer .body-text { margin-top: var(--space-xs); margin-bottom: 0; max-width: 100%; }

.copyright-text {
    font-size: var(--fs-micro);
    color: var(--grey);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.5;
}

#footer .telephone-link { border-bottom: none; }

/* -----------------------------------------------------------
   [TAG: WORK PAGE]
----------------------------------------------------------- */
#work-header {
    padding-top: var(--section-pt);
    padding-bottom: var(--section-pb);
    align-items: start;
}

#work-header .display-h1 { align-self: start; }

#work-header .work-filters {
    grid-column: 5 / span 8;
    display: flex;
    flex-direction: column;
    /* No gap: each .filter-row's symmetric padding (top = bottom) centers
       the text between the divider lines. A gap here would add space only
       below and leave the text sitting high. */
    gap: 0;
}

.filter-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-m);
    border-top: 2px solid var(--border-current);
    padding-top: var(--space-m);
    padding-bottom: var(--space-m);
}

.filter-label {
    margin: 0;
    color: var(--off-white);
    font-size: var(--fs-body);
    font-weight: var(--fw-light);
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1;
    pointer-events: none;
}

.filter-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-s);
    justify-content: flex-end;
}

.filter-btn {
    background: none;
    border: none;
    padding: 0;
    color: var(--grey);
    font-size: var(--fs-nav);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    line-height: 1;
    transition: color var(--time-fast) var(--ease-ui);
}

.filter-btn.active,
.filter-btn:hover { color: var(--text-current); }

.filter-bottom-line {
    width: 100%;
    height: 2px;
    background-color: var(--border-current);
}

.filter-row.is-open .filter-options { max-height: none; }

/* -----------------------------------------------------------
   [TAG: PROJECT CARDS]
----------------------------------------------------------- */
#projects-grid {
    padding-top: 0;
    padding-bottom: var(--section-pb);
    grid-auto-rows: 800px;
    align-items: stretch;
    row-gap: var(--grid-gap);
}

.project-card {
    position: relative;
    text-decoration: none;
    display: block;
    width: 100%;
    height: 100%;
}

.card-media {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--off-black);
}

.card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(100%);
    transition: transform var(--time-slow) var(--ease-ui),
                filter var(--time-slow) var(--ease-ui);
}

.card-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity var(--time-base) var(--ease-ui);
}

.card-info {
    position: absolute;
    inset: 0;
    padding: var(--space-m);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    z-index: 2;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity var(--time-base) var(--ease-ui),
                transform var(--time-base) var(--ease-ui);
}

.card-info .label { color: var(--grey); margin-bottom: var(--space-xs); }
.card-info .display-h2 { color: var(--off-white); margin: 0; }

.project-card:hover .card-info .label { color: var(--off-white); }

.project-card:hover .card-media img { filter: grayscale(0%); transform: scale(var(--scale-img-hover)); }
.project-card:hover .card-overlay { opacity: 1; }
.project-card:hover .card-info { opacity: 1; transform: translateY(0); }

/* -----------------------------------------------------------
   [TAG: CASE STUDY - BODY RESET]
----------------------------------------------------------- */
body:has(#case-hero) {
    padding-top: 0;
}

/* -----------------------------------------------------------
   [TAG: CASE STUDY - HERO]
----------------------------------------------------------- */
#case-hero {
    padding: 0;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

#case-hero img,
#case-hero video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* -----------------------------------------------------------
   [TAG: CASE STUDY - UTILITIES]
----------------------------------------------------------- */
.case-divider {
    grid-column: 1 / span 12;
    width: 100%;
    height: 2px;
    background-color: var(--border-current);
}

/* -----------------------------------------------------------
   [TAG: CASE STUDY - INFO (META + BRIEF + FINDINGS)]
----------------------------------------------------------- */
#case-info {
    padding-top: var(--section-pt);
    padding-bottom: var(--space-l);
    align-items: start;
    row-gap: var(--space-m);
}

.case-title {
    grid-column: 1 / span 5;
    font-size: var(--fs-h1);
    font-weight: var(--fw-light);
    line-height: var(--lh-tight);
    margin: 0;
}

.case-meta-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.case-meta-item:nth-child(2) { grid-column: 6 / span 2; }
.case-meta-item:nth-child(3) { grid-column: 8 / span 2; }
.case-meta-item:nth-child(4) { grid-column: 10 / span 2; }

.case-meta-label {
    font-size: var(--fs-label);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--grey);
    margin: 0;
}

.case-meta-value {
    font-size: var(--fs-body);
    font-weight: var(--fw-light);
    color: var(--text-current);
    margin: 0;
    line-height: 1.5;
}

.case-divider {
    grid-column: 1 / span 12;
    width: 100%;
    height: 2px;
    background-color: var(--border-current);
    margin-top: var(--space-s);
}

.case-text-block { display: contents; }

.case-text-label {
    grid-column: 1 / span 4;
    font-size: var(--fs-label);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--grey);
    margin: 0;
    padding-top: 6px;
}

.case-text-body {
    grid-column: 6 / span 7;
    font-size: var(--fs-body);
    font-weight: var(--fw-light);
    line-height: var(--lh-base);
    margin: 0;
    color: var(--text-current);
}

/* -----------------------------------------------------------
   [TAG: CASE STUDY - IMAGE BLOCKS]
----------------------------------------------------------- */
#case-blocks {
    padding-top: var(--space-l);
    padding-bottom: var(--space-l);
    padding-left: var(--page-margin);
    padding-right: var(--page-margin);
    display: flex;
    flex-direction: column;
    gap: var(--grid-gap);
}

.block-single {
    width: 100%;
    height: 56.25vw;
    overflow: hidden;
    flex-shrink: 0;
    margin-bottom: 0;
}

.block-single img,
.block-single video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.block-double {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--grid-gap);
    height: 56.25vw;
    overflow: hidden;
    flex-shrink: 0;
    margin-bottom: 0;
}

.block-double img,
.block-double video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0;
}

/* -----------------------------------------------------------
   [TAG: CASE STUDY - NEXT PROJECT]
----------------------------------------------------------- */
#next-project {
    position: relative;
    height: 75vh;
    overflow: hidden;
    display: block;
    text-decoration: none;
    color: var(--off-white);
}

#next-project img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(100%);
    transition: filter var(--time-slow) var(--ease-ui),
                transform var(--time-slow) var(--ease-ui);
}

#next-project:hover img {
    filter: grayscale(0%);
    transform: scale(var(--scale-img-hover));
}

.next-project-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
}

.next-project-content {
    position: absolute;
    top: var(--space-l);
    left: var(--page-margin);
    right: var(--page-margin);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.next-project-label {
    font-size: var(--fs-label);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--off-white);
    display: block;
    margin-bottom: var(--space-xs);
}

.next-project-title {
    font-size: var(--fs-h1);
    font-weight: var(--fw-light);
    line-height: var(--lh-tight);
    margin: 0;
    color: var(--off-white);
}

/* -----------------------------------------------------------
   [TAG: ABOUT - INTRO]
----------------------------------------------------------- */
#about-intro {
    padding-top: var(--section-pt);
    padding-bottom: var(--section-pb);
    align-items: start;
    row-gap: var(--space-m);
}

#about-intro .display-h1 { margin-bottom: 0; }

#about-intro .body-text {
    max-width: none;
    margin: 0;
}

/* -----------------------------------------------------------
   [TAG: ABOUT - SERVICES MARQUEE]
----------------------------------------------------------- */
#services-marquee {
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
}

.marquee-line {
    width: 100%;
    height: 2px;
    background-color: var(--border-current);
}

.marquee-track {
    display: flex;
    width: max-content;
    white-space: nowrap;
    padding: var(--space-s) 0;
    animation: marquee-scroll 45s linear infinite;
}

.marquee-item {
    font-size: var(--fs-label);
    font-weight: var(--fw-light);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--text-current);
    padding: 0 var(--space-s);
}

.marquee-dot { color: var(--grey); }

@keyframes marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* -----------------------------------------------------------
   [TAG: ABOUT - MEET THE TEAM]
----------------------------------------------------------- */
#team {
    padding-top: var(--section-pt);
    padding-bottom: var(--section-pb);
    align-items: start;
    row-gap: var(--space-l);
}

.team-label {
    grid-column: 1 / span 3;
    color: var(--grey);
    align-self: start;
}

.team-intro {
    grid-column: 4 / span 9;
    font-size: var(--fs-h2);
    font-weight: var(--fw-light);
    line-height: 1.4;
    max-width: none;
    margin: 0;
    color: var(--text-current);
}

.team-grid {
    grid-column: 4 / span 9;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--grid-gap);
}

.team-card {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--off-black);
}

.team-card-media {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.team-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.team-card-info { margin-top: var(--space-xs); }

.team-card-name {
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    color: var(--text-current);
    margin: 0 0 4px 0;
}

.team-card-role {
    font-size: var(--fs-label);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--grey);
    margin: 0;
}

.team-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: var(--card-text, var(--off-white));
    padding: var(--space-s);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transform: translateY(-100%);
    transition: transform var(--time-slow) var(--ease-editorial);
}

.team-card:hover .team-card-overlay { transform: translateY(0); }

.team-card-facts {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
}

.team-card-fact-label {
    font-size: var(--fs-label);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--card-text, var(--off-white));
    margin: 0 0 4px 0;
    display: block;
}

.team-card-fact-value {
    font-size: var(--fs-body);
    font-weight: var(--fw-light);
    color: var(--card-text, var(--off-white));
    margin: 0;
}

.team-card-description-wrap {
    border-top: 2px solid var(--card-text, var(--border-subtle));
    padding-top: var(--space-s);
}

.team-card-description {
    font-size: var(--fs-h2);
    font-weight: var(--fw-light);
    line-height: 1.3;
    color: var(--card-text, var(--off-white));
    margin: 0;
}

/* -----------------------------------------------------------
   [TAG: ABOUT - PRESS]
----------------------------------------------------------- */
#press {
    padding-top: var(--section-pt);
    padding-bottom: var(--section-pb);
    align-items: start;
    row-gap: var(--space-l);
}

.press-label {
    grid-column: 1 / span 3;
    color: var(--off-white);
    align-self: start;
}

.press-list {
    grid-column: 4 / span 9;
    display: flex;
    flex-direction: column;
}

.press-item {
    display: grid;
    grid-template-columns: 3fr 7fr 2fr;
    align-items: center;
    gap: var(--space-m);
    padding: var(--space-m) 0;
    border-top: 2px solid var(--border-current);
    text-decoration: none;
    color: var(--text-current);
    transition: opacity var(--time-fast) var(--ease-ui);
}

.press-item:last-child {
    border-bottom: 2px solid var(--border-current);
}

.press-item:hover {
    opacity: 0.5;
}

.press-publication {
    font-size: var(--fs-label);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--text-current);
    margin: 0;
}

.press-headline {
    font-size: var(--fs-body);
    font-weight: var(--fw-light);
    color: var(--grey);
    margin: 0;
}

.press-year {
    font-size: var(--fs-label);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-caps);
    color: var(--grey);
    text-align: right;
    margin: 0;
}

/* -----------------------------------------------------------
   [TAG: CONTACT - HERO]
----------------------------------------------------------- */
#contact-hero {
    padding-top: var(--section-pt);
    padding-bottom: var(--space-l);
    align-items: start;
}

#contact-hero .display-h1 { margin: 0; }

/* -----------------------------------------------------------
   [TAG: CONTACT - INFO]
----------------------------------------------------------- */
#contact-info {
    padding-top: 0;
    padding-bottom: var(--section-pb);
    align-items: start;
    row-gap: var(--space-m);
}

.contact-info-label {
    grid-column: 1 / span 3;
    color: var(--grey);
    margin-top: var(--space-m);
}

.contact-info-details {
    grid-column: 4 / span 9;
    margin: var(--space-m) 0 0 0;
    max-width: none;
}

/* -----------------------------------------------------------
   [TAG: CONTACT - VISIT US]
----------------------------------------------------------- */
#visit {
    padding-top: var(--section-pt);
    padding-bottom: var(--section-pb);
    align-items: start;
    row-gap: var(--space-m);
}

.visit-label {
    grid-column: 1 / span 3;
    color: var(--grey);
    align-self: start;
}

.visit-details {
    grid-column: 4 / span 9;
}

.visit-details .body-text {
    max-width: none;
    margin: 0 0 var(--space-xs) 0;
}

.visit-gallery {
    grid-column: 1 / span 12;
    overflow: hidden;
}

.visit-gallery-track {
    display: flex;
    align-items: flex-start;
    gap: var(--grid-gap);
    width: max-content;
    height: 340px;
    animation: marquee-scroll 40s linear infinite;
}

.visit-gallery-track:hover {
    animation-play-state: paused;
}

.visit-gallery-item {
    flex: 0 0 auto;
    align-self: flex-start;
    overflow: hidden;
}

/* Heights define the variety (the staggered rhythm); the width is set by
   each image's natural aspect ratio, so no photo is cropped and every one
   shows in full. */
.visit-gallery-item--landscape { height: 280px; }

.visit-gallery-item--portrait { height: 340px; }

.visit-gallery-item--square { height: 300px; }

.visit-gallery-item img {
    width: auto;
    height: 100%;
    object-fit: contain; /* no crop: shows the whole image */
    display: block;
    transition: transform var(--time-slow) var(--ease-ui);
}

.visit-gallery-item:hover img {
    transform: scale(var(--scale-img-hover));
}

/* -----------------------------------------------------------
   [TAG: PRODUCTION - HEADER]
----------------------------------------------------------- */
#production-header {
    padding-top: var(--section-pt);
    padding-bottom: var(--space-l);
    align-items: start;
}

#production-header .display-h1 { margin: 0; }

/* -----------------------------------------------------------
   [TAG: PRODUCTION - GALLERY GRID]
----------------------------------------------------------- */
#production-gallery {
    padding-top: 0;
    padding-bottom: var(--section-pb);
}

.production-grid {
    grid-column: 1 / span 12;
    column-count: 3;
    column-gap: var(--grid-gap);
}

.production-item {
    position: relative;
    width: 100%;
    background: var(--off-black);
    cursor: none;
    margin-bottom: var(--grid-gap);
    break-inside: avoid;
    overflow: hidden; /* clips the sliding layer: defines the visible "frame" */
    --prod-ar: 1 / 1; /* frame ratio: normal = square */
}

/* Tall format: vertical 2:3 frame. The fixed ratio (via --prod-ar)
   reserves the height up front, so the masonry no longer reflows when the
   images load. */
.production-item--tall {
    --prod-ar: 2 / 3;
}

/* --- Curtain Reveal ---
   At rest the card height equals the fixed aspect-ratio frame (the panel
   adds no height because it is position:absolute), so only the photo shows,
   with no strips. The panel stacks just below the image, inside the sliding
   mask, and sits outside the container's clip. On hover/tap the mask rises
   by the panel height: the top edge of the image is clipped and the panel
   emerges in the bottom strip. All within the same clipped frame, without
   the card height changing -> zero masonry jumps. */
/* The mask is the sliding "curtain": a normal block whose height comes
   from the fixed aspect-ratio frame (the panel is absolute, so it does NOT
   add height to the flow). The parent .production-item clips it.
   It must NOT have overflow:hidden — that would clip the panel hanging at
   top:100% and it would never be revealed. */
.production-item-mask {
    position: relative;
    width: 100%;
    aspect-ratio: var(--prod-ar); /* the frame sets the fixed height */
    transition: transform var(--time-slow) var(--ease-editorial);
    will-change: transform;
}

.production-item-mask img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* image fills the frame, cropping the overflow */
}

/* The panel lives INSIDE the mask, right below the image. top:100% places
   it past the image's bottom edge, so at rest it falls outside the parent's
   clip (fully hidden) and rises together with the mask on hover/tap. */
.production-item-panel {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: var(--panel-height, 132px);
    background: var(--off-black);
    color: var(--off-white);
}

/* Hover (desktop) and .is-active (tap on touch): the whole mask rises by
   exactly the panel height. The card's height in the document doesn't
   change (it's a transform) -> the masonry doesn't jump. */
.production-item:hover .production-item-mask,
.production-item.is-active .production-item-mask {
    transform: translateY(calc(-1 * var(--panel-height, 132px)));
}

.production-item-panel-inner {
    padding: var(--space-s);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    height: 100%;
}

.production-spec-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-top: 2px solid var(--border-subtle);
    padding-top: 6px;
}

.production-spec-row:first-child { border-top: none; padding-top: 0; }

.production-spec-label {
    font-size: var(--fs-label);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--grey);
    margin: 0;
}

.production-spec-value {
    font-size: var(--fs-body);
    font-weight: var(--fw-light);
    color: var(--off-white);
    margin: 0;
    text-align: right;
}

/* -----------------------------------------------------------
   [TAG: PRODUCTION - NOTE]
----------------------------------------------------------- */
#production-note {
    padding-top: 0; /* the gallery above already adds --section-pb; avoid doubling the gap */
    padding-bottom: var(--section-pb);
    align-items: start;
}

.production-note-label {
    grid-column: 1 / span 3;
    color: var(--grey);
    align-self: start;
}

.production-note-text {
    grid-column: 4 / span 9;
    max-width: none;
    margin: 0;
}
/* -----------------------------------------------------------
   [TAG: 404 - ERROR PAGE]
   Centered both axes within 75vh (token --vh-75).
----------------------------------------------------------- */
#error-404 {
    min-height: var(--vh-75);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-left: var(--page-margin);
    padding-right: var(--page-margin);
}

#error-404 .display-h1 {
    margin: 0;
}

/* -----------------------------------------------------------
   [TAG: SITE LOGO IMAGE]
----------------------------------------------------------- */
.site-logo {
  height: 28px;
  width: auto;
  display: block;
}

/* -----------------------------------------------------------
   [TAG: INTRO / PRELOADER]
   Full-screen entrance sequence on the homepage only. Sequence:
   1) letters drop in from above the viewport into the centre;
   2) once landed, background inverts off-white -> off-black
      while the word inverts off-black -> off-white (stays legible);
   3) the whole overlay fades to reveal the page underneath.
   Skippable by click/tap. Disabled under prefers-reduced-motion
   and on repeat visits within the same session (see script.js).
----------------------------------------------------------- */
.intro-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--off-white);
    transition: background-color var(--time-slow) var(--ease-editorial);
    cursor: pointer;
}

.intro-overlay.is-inverted { background-color: var(--off-black); }

.intro-overlay.is-leaving {
    opacity: 0;
    transition: opacity var(--time-slow) var(--ease-editorial);
    pointer-events: none;
}

/* Reuses .display-h1 as-is (same font-weight, line-height, size scale as
   the "Strategy meets style..." hero on this page) — just re-laid-out as
   a flex row of individual letters and stripped of its default margin. */
.intro-word {
    display: flex;
    margin: 0;
}

.intro-letter {
    display: inline-block;
    color: var(--off-black);
    transform: translateY(-70vh);
    opacity: 0;
    will-change: transform;
    transition: color var(--time-slow) var(--ease-editorial);
}

.intro-overlay.is-inverted .intro-letter { color: var(--off-white); }

.intro-overlay.is-playing .intro-letter {
    animation: intro-letter-drop 0.7s var(--ease-drop) forwards;
}

.intro-overlay.is-playing .intro-letter:nth-child(1) { animation-delay: 0.05s; }
.intro-overlay.is-playing .intro-letter:nth-child(2) { animation-delay: 0.13s; }
.intro-overlay.is-playing .intro-letter:nth-child(3) { animation-delay: 0.21s; }
.intro-overlay.is-playing .intro-letter:nth-child(4) { animation-delay: 0.29s; }
.intro-overlay.is-playing .intro-letter:nth-child(5) { animation-delay: 0.37s; }

@keyframes intro-letter-drop {
    0%   { transform: translateY(-70vh); opacity: 0; }
    60%  { opacity: 1; }
    100% { transform: translateY(0); opacity: 1; }
}

/* Locks scroll on <body> while the intro plays. */
.intro-locked { overflow: hidden; height: 100vh; }