/* ---------- Reset & base ---------- */
    *, *::before, *::after {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    html {
        scroll-behavior: smooth; 
            -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    }

    body {
        font-family: 'neue-haas-unica', Helvetica, Arial, sans-serif;
        background: #ffffff;
        color: #000000;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    
    }

    img {
        display: block;
        max-width: 100%;
        height: auto;
    }

    a {
        color: inherit;
        text-decoration: none;
        transition: opacity 0.2s ease;
    }

    a:hover {
        opacity: 0.8;
    }

    h1 {
        font-weight: 700;
        letter-spacing: -0.02em;
        line-height: 1;
    }

    /* ---------- Staging banner (preview-only, remove on promotion) ---------- */

    body { padding-top:0} /* offset for staging banner */

    /* ---------- Hero ---------- */
    .hero {
    display: grid;
    grid-template-columns: 3fr 13fr 1fr 1fr 13fr 3fr;
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    overflow: hidden;
    align-items: center; /* vertically center both columns */
    }

    .hero__wordmark {
    grid-column: 2;
    will-change: opacity, transform;
    }

    .hero__wordmark h1 {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
        letter-spacing: -0.02em;
        line-height: 1;
    } 
    .hero__wordmark .mobile-only { display: none; }
    @media (max-width: 768px) {
    .hero__wordmark .mobile-only { display: inline; }
    }


    .hero__wordmark .tagline {
    font-size: 0.685rem;
    line-height: 1.47rem;
    text-align: center;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    font-weight: 700;
    }

    .hero__image {
    grid-column: 5;
    position: relative;
    width: 100%;
    max-width: 60vh;
    max-height: 80vh;
    overflow: hidden;
    aspect-ratio: 3/4;
    cursor: none;
    }

    .hero__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    }
    /* ---------- Sticky site header (post-scroll, top-left wordmark) ---------- */
    .site-header {
        position: fixed;
        top: 1.5rem;
        left: 1.5rem;
        right: 0;
        z-index: 50;
        padding: 0;
        pointer-events: auto;
        opacity: 1;
        transition: opacity 0.2s ease;
         will-change: transform;
    }
    .site-header:hover a {opacity: 1;}
    /*.site-header.is-visible {
        opacity: 1;
        pointer-events: auto;
    }*/

    .site-header__wordmark {
    text-align: left;
    font-size: 1rem;
    font-weight: 700;
        letter-spacing: -0.02em;
        line-height: 1.0;
    }

    /* ---------- Bottom nav (post-scroll, sections) ---------- */
    .site-nav {
        position: fixed;
        top: .9rem;
        right: 1.25rem;
        z-index: 50;
        display: flex;
        gap: 2em;
        opacity: 1;
        transition: opacity 0.3s ease;
    }

    .site-nav.is-visible {
        opacity: 1;
        pointer-events: auto;
    }

    .site-nav a {
        font-size: 1rem;
        letter-spacing: -0.02em;
        font-weight: 700;
        cursor: pointer;
    text-transform: uppercase;
        padding: 0.5rem 0.25rem;  /* tap target */
    }

    /* ---------- Frames as full-viewport articles ---------- */
    main {
    padding: 6rem 0 12rem;
    }

    /* Remove the transition from the base image — only hover */
    .frame__image img {
    display: block;
    width: auto;
    height: 80vh;
    }

    .frame:hover .frame__image img {
    transform: scale(1);
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
        cursor: none;
    }

    /* Frame layout */
    .frame {
        min-height: auto;          /* was: 120vh */
        padding: 6rem 0;           /* new — deliberate inter-shoot spacing */
        display: grid;
        grid-template-columns: 3fr 15fr 1fr 1fr 15fr 3fr;
        align-items: center;
    }

    /* Orientation caps */
    .frame--vertical .frame__image   { max-height: 80vh; }
    .frame--horizontal .frame__image { max-height: 80vh; }

    .frame--vertical .frame__image img,
    .frame--horizontal .frame__image img {
    max-height: inherit;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
    }

    /* Position */
    .frame--left   .frame__image { grid-column: 2 / 6; }
    .frame--right  .frame__image { grid-column: 2 / 6; }
    .frame--center .frame__image { grid-column: 2 / 6; }

    /* Size within column 
    .frame--large  .frame__image { width: 100%; }
    .frame--medium .frame__image { width: 100%; }
    .frame--small  .frame__image { width: 100%; }*/

    /* ---------- Footer ---------- */
    .site-footer {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        padding-bottom: 1rem;
    }

    .site-footer__inner {
        display: flex;
        width: 100%;
        max-width: none;
    align-items: center;
    position: relative;
    }
    .site-footer__inner p:first-child { margin-left:0; margin-right: auto; }
    .site-footer__inner div:nth-child(2) { margin-left:auto;}
    .site-footer__inner div:last-child  { margin-left: 2em; margin-right: 0; }


    .site-footer__line {
        font-size: 0.685rem;
        letter-spacing: -0.02em;
        text-transform: uppercase;
        margin-bottom: 0em;
        font-weight: 700;
    }

    /* ---------- Lightbox ---------- */
    .lightbox {
        position: fixed;
        inset: 0;
        z-index: 200;
        background: #fff;
        display: none;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.15s ease;
        cursor: pointer;
    }

    .lightbox.is-active {
        display: flex;
        opacity: 1;
    }

    .lightbox__content {
        max-width: 90vw;
        max-height: 85vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .lightbox__content img {
        max-width: 100%;
        max-height: 85vh;
        width: auto;
        height: auto;
        object-fit: contain;
    }

    .lightbox__close {
        position: fixed;
        top: 1.3rem;
        right: 1rem;
        background: none;
        border: none;
        color: #000000;
        font-size: 0.685rem;
        line-height: 1;
        cursor: pointer;
        z-index: 201;
        padding: 0.5rem;
        font-weight: 700;
        letter-spacing: 0.0em;
        text-transform: uppercase;
        transition: color 0.2s ease;
    }

    .lightbox__close:hover {
        color: #999;
    }

    .lightbox__meta {
        position: fixed;
        bottom: 1.5rem;
        left: 50%;
        transform: translateX(-50%);
        color: #000;
        font-size: 0.685rem;
        letter-spacing: -0.05em;
        text-transform: uppercase;
        font-weight: 700;
        z-index: 201;
     white-space: nowrap;   /* was nowrap */
        pointer-events: none;
    }

    .lightbox__meta-sep {
        font-size: 0.685rem;
        margin: 0 .75rem;
        opacity: 1;
        font-weight: 700;
    }


        /* Mobile Version */
    @media (max-width: 768px) {
        /* Collapse hero grid to single column */

    .site-header {
        left: 1rem;
        top: 1rem;
        transform: none;     
    pointer-events: auto;
        opacity: 0;}
    .site-header__wordmark {
    font-size: 0.685rem;
    text-align: left;
    }

    .site-header.is-visible {
        opacity: 1;
        pointer-events: auto;
    }

        .hero {
            display: flex;
            flex-direction: column;
            height: auto;
            min-height: 0;
        padding: 4rem 1rem 6rem;   /* was: 8vh 16px 24vh */
            gap: 1.5rem;                  /* was: 4vh */
        }
    
        .hero__image {
            width: 100%;
            max-width: none;
            max-height: none;
            aspect-ratio: 3/4;
        }
        
        main {
    padding: 0 1rem 0rem;
    }
        /* Collapse frame grid to single column */
        .frame {
            display: flex;
            flex-direction: column;
            min-height: 0;
        padding: 0 0rem 6rem;
            margin: 0;
        }
        
        .frame--left .frame__image,
        .frame--right .frame__image,
        .frame--center .frame__image {
            grid-column: auto;
            width: 100%;
            margin: 0;
        }
        
    
        /* Cap image height to viewport so it fits the phone screen */
        .frame__image img {
            width: 100%;
            height: auto;
            max-height: none;
            object-fit: contain;
        }


        .lightbox__close { right: .5rem; top: 1rem; }

    .site-footer {padding: 1rem;}
    .site-footer__inner {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: none;
    align-items: center;}
    .site-footer__inner p:first-child { margin-left: auto; margin-right: auto;padding-bottom: 1em; }
    .site-footer__inner div:nth-child(2) {margin-left:auto; margin-right: auto;padding-bottom: .25rem;
        color: #999; }
    .site-footer__inner div:last-child  { margin-left: auto; margin-right: auto;    color: #999;  }

    .hide-on-mobile {display: none;}
    }


    /* ---------- Reduced motion: hard swap, no fades ---------- */
    @media (prefers-reduced-motion: reduce) {
        html { scroll-behavior: auto; }

        .site-header,
        .site-nav,
        .lightbox,
        .frame__image img {
            transition: none !important;
        }

        .hero__wordmark { transition: none !important; }
    }
    /* mobile menu */
  .menu-trigger {
    display: none;                 /* shown on mobile only */
    position: fixed;
    top: 1rem;                     /* matches site-header top */
    right: 1rem;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    z-index: 100;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.3s ease;
    font-family: inherit;
}

.menu-trigger__label {
    display: block;
    font-size: 0.685rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    line-height: 1;
    color: #000;
    transform: translateY(6.3px);   /* same trick — tweak to taste */
}

@media (max-width: 768px) {
    .menu-trigger { 
        display: block;
    }
}

    /* ---------- Mobile menu overlay ---------- */
    .menu-overlay {
        position: fixed;
        inset: 0;
        z-index: 300;
        background: #fff;
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.2s ease;
    }

    .menu-overlay.is-open {
        display: flex;
        opacity: 1;
    }

    .menu-overlay__close {
        position: fixed;
        top: 14px;
        right: .5rem;
        background: none;
        border: none;
        color: #000;
        font-size: 0.685rem;
        line-height: 1;
        cursor: pointer;
        padding: 0.5rem;
        font-weight: 700;
        letter-spacing: -0.05em;
        text-transform: uppercase;
    }

    .menu-overlay__links {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }

    .menu-overlay__links a {
        font-size: 1rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: -0.02em;
    }

    .menu-overlay__contact {
        position: absolute;
        bottom: 3rem;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.25rem;
        font-size: 0.65rem;
        letter-spacing: -0.02em;
        text-transform: uppercase;
        font-weight: 700;
        color: #999;
    }

    /* Show menu trigger on mobile, hide desktop nav */
    @media (max-width: 768px) {
        .menu-trigger { display: flex; }
        .site-nav { display: none; }

    .lightbox__content {
    max-width: 100%;
    padding: 1rem; }
    }

    /* ---------- Hero slideshow ---------- */
    .hero__image {
        position: relative;
    }

    .hero__image img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        opacity: 0;
        transition: opacity 1s ease-in-out;
    }

    .hero__image img.is-active {
        opacity: 1;
    }

    /* On mobile the image is static (aspect-ratio handles sizing) — stack absolutely positioned images on top of each other */
    @media (max-width: 768px) {
        .hero__image {
            aspect-ratio: 3/4;
        }
    }

    /* ---------- Intro choreography ---------- */
    /* Elements start invisible; JS or the fallback below reveals them */
    .hero__wordmark,
    .hero__image,
    .site-header,
    .site-nav,
    .menu-trigger {
        opacity: 0;
    }

    /* If JS is disabled or fails, show everything after a short delay */
    .no-js .hero__wordmark,
    .no-js .hero__image,
    .no-js .site-header,
    .no-js .site-nav,
    .no-js .menu-trigger {
        opacity: 1;
    }

    .disco-cursor {
        position: fixed;
        top: 0;
        left: 0;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #ffffff;
        pointer-events: none;
        z-index: 1000;
        opacity: 0;
        transform: translate(-50%, -50%);
        transition: opacity 0.2s ease;
        will-change: transform, opacity;
        mix-blend-mode: difference;
    }

    .disco-cursor.is-active {
        opacity: 1;
    }

    .frame__image img,
    .site-nav a,
    .site-header__wordmark,
    .info-section a,
    .site-footer a,
    .menu-trigger,
    .lightbox__close {
        cursor: none;
    }

    @media (hover: none) {
        .disco-cursor { display: none; }
        .frame__image img,
        .site-nav a,
        .site-header__wordmark,
        .info-section a,
        .site-footer a,
        .menu-trigger,
        .lightbox__close {
            cursor: pointer;
        }
    }
    /* ---------- Hover dim overlay ---------- */
    body {
        background: #fff;
        transition: background-color 0.4s ease;
    }

    body:has(.frame__image img:hover) {
        background: #eeeeee;  /* faint gray */
    }

    /* ---------- Frame pair (two images side by side, no gap) ---------- */
    .frame--pair {
        grid-template-columns: 1fr 1fr;
        gap: 0; 
        align-items: center;
    }

    .frame--pair .frame__image {
        grid-column: auto;
        max-height: 80vh;
        display: flex;
        align-items: center;
    }

    .frame--pair .frame__image:first-child {
        justify-content: flex-end;
    }

    .frame--pair .frame__image:last-child {
        justify-content: flex-start;
    }

    .frame--pair .frame__image img {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 80vh;
        object-fit: contain;
    }
    @media (max-width: 768px) {
        .frame--pair {
            display: flex;
            flex-direction: row;
            padding: 0 0 8rem;
            gap: 0;
        }
        
        .frame--pair .frame__image {
            max-height: none;
        }
        
        .frame--pair .frame__image img {
            max-height: none;
            object-fit: contain;
        }
    }


    //* ---------- Info page ---------- */

    html, body {
        min-height: 100%;
    }
    .info-hero {
        min-height:100vh;
        display: grid;
        place-items: center;
        padding: 0;
    }

    .info-hero__grid {
        /* existing rules — they should work as-is */
        display: grid;
        grid-template-columns: 3fr 7fr 1fr 10fr 1fr 10fr 3fr;
        grid-template-rows: auto 1fr;
        width: 100%;              /* ADD THIS — make sure grid fills parent width */
        row-gap: 3rem;
    }

    /* Tagline spans full width on row 1 */
    .info-hero__tagline {
        grid-column: 4 / -1;
        grid-row: 1;
    }

    .info-tagline {
        font-size: 1.5rem;
        font-weight: 700;
        letter-spacing: -0.02em;
        text-transform: uppercase;
        line-height: 1.0;
    }

    /* Image: row 2, column 1 — its natural height drives the row */
    .info-hero__image {
        grid-column: 2;
        grid-row: 2;
        width: 100%;
        aspect-ratio: 3/4;
        overflow: hidden;
    }

    .info-hero__image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    /* Main content (about + services): row 2, column 3 */
    .info-hero__main {
        grid-column: 4;
        grid-row: 2;
        display: flex;
        flex-direction: column;
        gap: 3rem;
    }

    /* Aside (contact): row 2, column  */
    .info-hero__aside {
        grid-column: 6;
        grid-row: 2;
        display: flex;
        flex-direction: column;
        gap: 3rem;
    }

    .info-section h2 {
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: -0.02em;
        text-transform: uppercase;
        margin-bottom: 0.5rem;
    }

    .info-section ul,
    .info-section li {
    font-size: 1rem;
        font-weight: 700;
        letter-spacing: -0.02em;
        margin-bottom: 0.5rem;
    }

    .info-section p {
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: -0.02em;
        margin-bottom: 0rem;
        line-height: 1;
    }

    .info-section ul {
        list-style: none;
        padding: 0;
    }

    .info-section li {
        margin-bottom: 0.25rem;
    }

    .info-section a {
        text-decoration: none;
        color: inherit;
    }

    /* Mobile: stack everything */
    @media (max-width: 768px) {
        .info-hero {
        height:  auto;
            padding: 4rem 1rem 5rem;    /* was: 8vh 16px 8vh */
        }

        .info-hero__grid {
            display: flex;
            flex-direction: column;
            width: 100%;
            gap: 1rem;
        }

        .info-hero__image {
            width: 100%;
            aspect-ratio: 3/4;
        }

        .info-hero__main,
        .info-hero__aside {
            gap: 2rem;
        }
    }

.frame__indicator {
    display: none;  /* hidden on desktop */
}

@media (max-width: 768px) {
    .frame {
        position: relative;
    }
    
    .frame__indicator {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 6px;
        right: 6px;
        height: 14px;
        padding: 0 7px;
        border-radius: 7px;
        background-color: #00000030;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 10;
        pointer-events: none;
    }
    
    .frame__indicator-label {
        display: block;
        font-size: 8px;
        font-weight: 700;
        line-height: 8px;
        letter-spacing: -0.02em;
        color: #ffffff;
        transform: translateY(0px);   /* nudge to optical center */
    }
}