/* AAJOR — hover states and mobile menu behaviour.
   Layout comes from the export's own responsive CSS; this only adds the
   interactions Framer implemented in JS (and the overlay menu markup, which
   Framer keeps in a variant that isn't present in the exported HTML). */

/* ── Hover: CONTACT pill fills white ──────────────────────────────── */
.framer-v-1u19xnw {
    transition: background-color .35s ease;
}
.framer-v-1u19xnw:hover {
    background-color: #fff !important;
}
.framer-v-1u19xnw:hover .framer-text,
.framer-v-1u19xnw:hover p {
    color: #000 !important;
}

/* ── Hover: VIEW WORK outline brightens, no fill ──────────────────────
   The border is painted by a :after pseudo-element from the
   --border-color custom property, so that is what has to change. */
.framer-v-iga6y9 {
    transition: --border-color .35s ease;
}
.framer-v-iga6y9:hover {
    --border-color: rgb(255, 255, 255) !important;
    background-color: rgba(0, 0, 0, 0) !important;
}
.framer-v-iga6y9:after {
    transition: border-color .35s ease;
}

/* ── Hover: linked images ─────────────────────────────────────────── */
a img { transition: transform .6s cubic-bezier(.16,1,.3,1); }
a:hover img { transform: scale(1.03); }

/* ── Hover: text links ──────────────────────────────────────────────
   Nav links go to the site gray (#999); footer links start at
   rgba(255,255,255,.5) and brighten to white. */
header nav a, footer a, .aajor-menu-links a { transition: color .25s ease; }

header nav a:hover,
header nav a:hover .framer-text {
    color: rgb(153, 153, 153) !important;
}
footer a:hover,
footer a:hover .framer-text {
    color: #fff !important;
}

/* ── Mobile overlay menu ──────────────────────────────────────────── */
.framer-1xj7qp5 { cursor: pointer; }

.aajor-menu {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 290px;
    z-index: 2000;
    display: none;
    flex-direction: column;
    background: rgba(0,0,0,.72);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    opacity: 0;
    transition: opacity .35s ease;
}
.aajor-menu.is-open { display: flex; }
.aajor-menu.is-visible { opacity: 1; }

.aajor-menu-top {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 20px; min-height: 56px;
}
.aajor-menu-logo {
    font-family: "Stardom","Stardom Placeholder",sans-serif;
    font-size: 24px; line-height: 1; color: #fff;
    text-transform: uppercase; text-decoration: none;
}
.aajor-menu-close {
    width: 26px; height: 26px; border: 0; background: none;
    color: #fff; font-size: 24px; line-height: 1; cursor: pointer; padding: 0;
    -webkit-tap-highlight-color: transparent;
}
.aajor-menu-links {
    flex: 1;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 26px; padding: 0 20px 6vh;
}
.aajor-menu-links a {
    font-family: "Instrument Sans","Instrument Sans Placeholder",sans-serif;
    font-size: 14px; font-weight: 500; letter-spacing: -.02em;
    text-transform: uppercase; color: #fff; text-decoration: none;
}
.aajor-menu-links a:not(.is-pill):hover { color: rgb(153, 153, 153); }

.aajor-menu-links a.is-pill {
    border: 1px solid #fff; border-radius: 200px;
    padding: 10px 26px; margin-top: 4px;
    transition: background-color .3s ease, color .3s ease;
}
.aajor-menu-links a.is-pill:hover { background: #fff; color: #000; }

body.aajor-menu-open { overflow: hidden; }

@media (min-width: 810px) { .aajor-menu { display: none !important; } }


/* ── One container geometry for nav, content and footer ──────────────
   The header and footer outer boxes carry per-variant widths
   (1200 / 810 / 390px), so their content box does not track the page
   sections, which use padding 30/30/20 with caps 1200/850/400. Rather than
   chase each variant, pin all three to the same geometry at each breakpoint
   so the logo, the content and the footer share one left edge. */
header[class*="framer-IIzW1"],
footer[class*="framer-u8oA4"] {
    width: 100% !important;
    max-width: none !important;
}

@media (min-width: 1200px) {
    header[class*="framer-IIzW1"],
    footer[class*="framer-u8oA4"] {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }
    header .framer-k2ni8l,
    footer .framer-hr44ee { max-width: 1200px !important; }
}

@media (min-width: 810px) and (max-width: 1199.98px) {
    /* The Tablet header sits in a wrapper capped at 850px, and the header
       then adds its own 30px padding INSIDE that — leaving 790px of content
       while the page sections get the full 850px. That 30px-per-side gap is
       the tablet misalignment, and it is tablet-only because the Desktop and
       Phone wrappers are plain width:100%. Let the inner container do the
       capping instead. */
    [class*="framer-mktjae-container"] { max-width: none !important; }

    header[class*="framer-IIzW1"],
    footer[class*="framer-u8oA4"] {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }
    header .framer-k2ni8l,
    footer .framer-hr44ee { max-width: 850px !important; }
}

@media (max-width: 809.98px) {
    header[class*="framer-IIzW1"],
    footer[class*="framer-u8oA4"] {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    /* The nav is NOT capped on phone — it grows with the viewport, matching
       the full-width image grids. Only the text columns cap at 400px, which
       is how the export is built. Capping the nav was my mistake. */
    /* Nav and footer both grow with the viewport so their left edges always
       line up (the 400px text columns are a separate, intentional cap). */
    header .framer-k2ni8l,
    footer .framer-hr44ee { max-width: none !important; }
}

/* ── Services copy: fills its column, capped at 640px ──────────────── */
.svc-desc, .svc-intro { max-width: 640px !important; }