:root { color-scheme: dark; --ink: #08090b; --panel: #0e1014; --red: var(--msav-red, #d51f31); --lime: var(--msav-lime, #d6ff30); --line: rgba(255,255,255,.17); --soft: rgba(255,255,255,.64); }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; background: var(--ink); }
    body { min-width: 320px; margin: 0; overflow-x: hidden; background: var(--ink); color: #fff; font-family: 'Inter', sans-serif; letter-spacing: .012em; }
    a { color: inherit; }
    button { font: inherit; }
    .site-shell { overflow: clip; }

    /* Shared site navigation — matches projects.html. */
    .nav { position: fixed; z-index: 20; inset: 16px 0 auto; display: grid; grid-template-columns: 132px 1fr 132px; align-items: center; padding: 0 clamp(24px, 4vw, 64px); pointer-events: none; transform: translate3d(0, var(--nav-shift, 0), 0); transition: background .25s ease; }
    .nav > * { pointer-events: auto; }
    .brand { display: grid; width: 132px; height: 55px; place-items: center; text-decoration: none; }
    .brand img { display: block; width: 100%; height: 100%; object-fit: contain; }
    .menu { justify-self: center; display: flex; align-items: center; gap: 2px; padding: 5px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; background: linear-gradient(120deg, rgba(255,255,255,.22), rgba(255,255,255,.055) 42%, rgba(255,255,255,.14)); box-shadow: 0 12px 35px rgba(0,0,0,.24), inset 0 .65px .75px rgba(255,255,255,.54); backdrop-filter: blur(26px) saturate(180%); -webkit-backdrop-filter: blur(26px) saturate(180%); }
    .menu a, .nav-dropdown > button { display: inline-flex; align-items: center; gap: 7px; border: 0; border-radius: 999px; background: transparent; color: rgba(255,255,255,.96); font: 500 13px 'Inter', sans-serif; text-decoration: none; white-space: nowrap; }
    .menu a, .nav-dropdown > button { padding: 8px 11px; }
    .menu a:hover, .menu a:focus-visible, .nav-dropdown > button:hover, .nav-dropdown > button:focus-visible { background: rgba(255,255,255,.15); outline: none; }
    .menu a.active { background: rgba(255,255,255,.14); }
    .nav-dropdown { position: relative; }
    .nav-dropdown > button { cursor: pointer; }
    .nav-dropdown svg { width: 14px; height: 14px; transition: transform .2s ease; }
    .nav-dropdown.open svg { transform: rotate(180deg); }
    .dropdown-panel { position: absolute; top: calc(100% + 18px); left: 50%; display: grid; grid-template-columns: 170px 230px; gap: 8px; width: 430px; padding: 9px; border: 1px solid rgba(255,255,255,.23); border-radius: 18px; background: rgba(13,16,22,.92); box-shadow: 0 20px 55px rgba(0,0,0,.4); opacity: 0; visibility: hidden; transform: translate(-50%, -8px) scale(.97); pointer-events: none; transition: opacity .22s ease, transform .28s cubic-bezier(.16,1,.3,1), visibility 0s linear .22s; backdrop-filter: blur(28px); }
    .nav-dropdown.open .dropdown-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); pointer-events: auto; transition-delay: 0s; }
    .dropdown-hero { display: flex; min-height: 185px; flex-direction: column; justify-content: end; padding: 14px; overflow: hidden; border-radius: 11px; background: linear-gradient(180deg, transparent, rgba(5,7,10,.93)), url('../home/concert-hero-background.webp') center / cover; }
    .dropdown-hero span { margin-bottom: 8px; color: var(--lime); font: 500 9px 'Fira Mono', monospace; letter-spacing: .14em; text-transform: uppercase; }
    .dropdown-hero strong { font-size: 18px; line-height: .97; letter-spacing: -.045em; }
    .dropdown-links { display: grid; align-content: center; gap: 2px; }
    .dropdown-links a { display: flex; min-height: 36px; align-items: center; padding: 8px 10px; border-radius: 9px; font-size: 12px; }
    .claim { margin-left: 4px; padding: 8px 16px !important; border: 1px solid var(--lime) !important; background: var(--lime) !important; color: #11170a !important; font-weight: 800 !important; transition: background .22s ease, color .22s ease !important; }
    .claim:hover, .claim:focus-visible { background: #fff !important; color: #101010 !important; }
    .mobile-toggle { display: none; width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; background: rgba(20,24,31,.54); color: #fff; cursor: pointer; place-items: center; backdrop-filter: blur(18px); }
    .menu-icon, .menu-icon::before, .menu-icon::after { display: block; width: 18px; height: 1.5px; border-radius: 2px; background: currentColor; transition: transform .25s ease, opacity .2s ease; }
    .menu-icon { position: relative; } .menu-icon::before, .menu-icon::after { position: absolute; left: 0; content: ''; } .menu-icon::before { top: -6px; } .menu-icon::after { top: 6px; }
    .mobile-toggle[aria-expanded='true'] .menu-icon { background: transparent; } .mobile-toggle[aria-expanded='true'] .menu-icon::before { top: 0; transform: rotate(45deg); } .mobile-toggle[aria-expanded='true'] .menu-icon::after { top: 0; transform: rotate(-45deg); }

    .project-hero { position: relative; display: flex; min-height: min(980px, 100svh); align-items: flex-end; padding: 170px clamp(24px, 6.5vw, 112px) clamp(48px, 5vw, 76px); overflow: hidden; isolation: isolate; }
    .project-hero::before { position: absolute; z-index: -1; inset: 0; content: ''; background: linear-gradient(90deg, rgba(5,7,10,.9) 0%, rgba(5,7,10,.5) 46%, rgba(5,7,10,.13) 100%), linear-gradient(0deg, #08090b 0%, transparent 32%); }
    .project-hero-image { position: absolute; z-index: -2; inset: -3%; background: url('../home/msav-story-event-lighting.webp') center / cover no-repeat; filter: brightness(.72) saturate(.72); transform: scale(1.05); animation: image-drift 18s ease-in-out infinite alternate; }
    @keyframes image-drift { from { transform: scale(1.05) translate3d(-.5%, 0, 0); } to { transform: scale(1.11) translate3d(1%, -1%, 0); } }
    .hero-content { width: min(100%, 1050px); }
    .breadcrumb { display: inline-flex; align-items: center; gap: 9px; margin-bottom: clamp(48px, 10vh, 120px); color: rgba(255,255,255,.65); font: 500 10px/1.2 'Fira Mono', monospace; letter-spacing: .12em; text-decoration: none; text-transform: uppercase; }
    .breadcrumb::before { content: '←'; color: var(--lime); font-size: 15px; transition: transform .2s ease; } .breadcrumb:hover::before { transform: translateX(-4px); }
    .eyebrow { margin: 0 0 16px; color: var(--lime); font: 500 11px/1.2 'Fira Mono', monospace; letter-spacing: .16em; text-transform: uppercase; }
    h1, h2, h3, p { margin-top: 0; }
    .project-hero h1 { max-width: 940px; margin-bottom: 25px; font-size: clamp(4rem, 9vw, 9.4rem); font-weight: 500; font-style: italic; line-height: .8; letter-spacing: -.082em; }
    .hero-summary { max-width: 570px; margin-bottom: 0; color: rgba(255,255,255,.82); font-size: clamp(1rem, 1.55vw, 1.2rem); line-height: 1.55; }
    .hero-index { position: absolute; right: clamp(24px, 6.5vw, 112px); bottom: clamp(55px, 6vw, 84px); color: rgba(255,255,255,.67); font: 500 10px/1.2 'Fira Mono', monospace; letter-spacing: .14em; text-align: right; text-transform: uppercase; }
    .hero-index b { display: block; margin-bottom: 8px; color: #fff; font-size: 17px; font-weight: 500; }

    .project-facts { display: grid; grid-template-columns: 1.1fr repeat(3, minmax(130px, .42fr)); gap: 26px; padding: clamp(32px, 5vw, 64px) clamp(24px, 6.5vw, 112px); border-bottom: 1px solid var(--line); background: #0c0e11; }
    .project-facts p { margin: 0; } .fact-label { margin-bottom: 10px !important; color: rgba(255,255,255,.46); font: 500 10px/1.2 'Fira Mono', monospace; letter-spacing: .14em; text-transform: uppercase; } .fact-value { font-size: 15px; font-weight: 600; line-height: 1.3; }
    .project-body { background: #0c0e11; }
    .project-story { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(ellipse at 72% 58%, rgba(214,255,48,.055), transparent 34%), #0c0e11; }
    .project-story::before { position: absolute; z-index: 0; bottom: clamp(22px, 5vw, 96px); left: clamp(-90px, -3vw, -26px); width: min(64vw, 920px); aspect-ratio: 3 / 1; content: ''; background: url('../home/MSAV-Logo-big.webp') center / contain no-repeat; opacity: .12; filter: drop-shadow(0 0 35px rgba(213,31,49,.18)); pointer-events: none; }
    .project-story > * { position: relative; z-index: 1; }
    .story-intro { display: grid; grid-template-columns: minmax(220px, .6fr) minmax(0, 1.25fr); gap: clamp(42px, 11vw, 190px); padding: clamp(110px, 15vw, 210px) clamp(24px, 13vw, 220px) clamp(88px, 12vw, 160px); }
    .section-label { color: var(--lime); font: 500 11px/1.2 'Fira Mono', monospace; letter-spacing: .14em; text-transform: uppercase; }
    .story-intro h2 { max-width: 850px; margin: 0; font-size: clamp(2.8rem, 6vw, 6.6rem); font-weight: 500; line-height: .9; letter-spacing: -.07em; }
    .story-intro h2 em { color: var(--lime); font-style: italic; }
    .story-copy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; max-width: 880px; margin: 0 clamp(24px, 6.5vw, 112px) clamp(110px, 15vw, 210px) auto; color: var(--soft); font-size: clamp(1rem, 1.25vw, 1.13rem); line-height: 1.7; }
    .story-copy p { margin: 0; }

    .feature-image { position: relative; min-height: min(68vw, 820px); margin: 0 10px; overflow: hidden; background: #16191e; }
    .feature-image img { display: block; width: 100%; height: 100%; min-height: min(68vw, 820px); object-fit: cover; filter: saturate(.82) contrast(1.04); }
    .feature-image figcaption { position: absolute; right: 19px; bottom: 16px; margin: 0; color: rgba(255,255,255,.72); font: 500 9px/1.2 'Fira Mono', monospace; letter-spacing: .12em; text-transform: uppercase; }
    .approach { display: grid; grid-template-columns: minmax(0, .83fr) minmax(0, 1.17fr); gap: clamp(45px, 10vw, 180px); padding: clamp(110px, 15vw, 210px) clamp(24px, 13vw, 220px); background: radial-gradient(circle at 85% 40%, rgba(213,31,49,.16), transparent 31%), #0c0e11; }
    .approach h2 { max-width: 480px; margin: 17px 0 0; font-size: clamp(2.8rem, 5.5vw, 6rem); font-weight: 500; line-height: .89; letter-spacing: -.07em; }
    .approach-content { display: grid; align-content: start; gap: 45px; }
    .approach-content > p { max-width: 620px; margin: 0; color: rgba(255,255,255,.78); font-size: clamp(1.05rem, 1.35vw, 1.3rem); line-height: 1.58; }
    .deliverables { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
    .deliverable { min-height: 132px; padding: 19px 0; border-bottom: 1px solid var(--line); } .deliverable:nth-child(odd) { padding-right: 22px; border-right: 1px solid var(--line); } .deliverable:nth-child(even) { padding-left: 22px; }
    .deliverable span { display: block; margin-bottom: 12px; color: var(--lime); font: 500 10px 'Fira Mono', monospace; letter-spacing: .1em; } .deliverable strong { font-size: 15px; line-height: 1.28; }

    .gallery { padding: 10px 10px clamp(100px, 14vw, 190px); background: #0c0e11; }
    .gallery-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; padding: clamp(70px, 10vw, 150px) clamp(14px, 5vw, 88px) clamp(28px, 4vw, 58px); }
    .gallery-heading h2 { max-width: 680px; margin: 13px 0 0; font-size: clamp(2.7rem, 5.8vw, 6.4rem); font-weight: 500; line-height: .87; letter-spacing: -.075em; } .gallery-heading p { max-width: 260px; margin: 0; color: var(--soft); font-size: 14px; line-height: 1.5; }
    .gallery-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; }
    .gallery-item { min-height: min(48vw, 590px); grid-column: span 7; margin: 0; overflow: hidden; background: #16191e; } .gallery-item--small { grid-column: span 5; min-height: min(38vw, 470px); align-self: end; } .gallery-item--half { min-height: min(44vw, 540px); grid-column: span 6; }
    .gallery-item img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.18) saturate(.76); transition: transform .8s cubic-bezier(.16,1,.3,1), filter .55s ease; } .gallery-item:hover img { filter: grayscale(0) saturate(1); transform: scale(1.045); }

    .project-nav { display: grid; grid-template-columns: 1fr 1fr; background: var(--red); }
    .project-nav a { position: relative; display: flex; min-height: clamp(250px, 30vw, 450px); flex-direction: column; justify-content: end; padding: clamp(28px, 4.4vw, 72px); overflow: hidden; color: #fff; text-decoration: none; }
    .project-nav a + a { border-left: 1px solid rgba(255,255,255,.3); text-align: right; }
    .project-nav a::after { position: absolute; inset: 0; content: ''; background: linear-gradient(180deg, transparent, rgba(65,0,7,.52)); opacity: 0; transition: opacity .35s ease; } .project-nav a:hover::after, .project-nav a:focus-visible::after { opacity: 1; }
    .project-nav span, .project-nav strong { position: relative; z-index: 1; } .project-nav span { margin-bottom: 16px; color: rgba(255,255,255,.73); font: 500 10px 'Fira Mono', monospace; letter-spacing: .13em; text-transform: uppercase; } .project-nav strong { max-width: 470px; font-size: clamp(2rem, 4.2vw, 4.6rem); font-weight: 500; line-height: .87; letter-spacing: -.07em; } .project-nav a + a strong { margin-left: auto; } .project-nav a:hover strong { color: var(--lime); }

    @media (min-width: 1100px) { .project-nav a + a strong { max-width: 720px; } }

    /* Shared footer treatment from projects.html. */
    .msav-footer { position: relative; overflow: hidden; padding: clamp(88px, 10vw, 154px) clamp(22px, 7vw, 112px) 28px; background: radial-gradient(ellipse at 10% 0%, rgba(213,31,49,.34), transparent 32%), radial-gradient(ellipse at 82% 84%, rgba(214,255,48,.08), transparent 23%), #070707; }
    .msav-footer::before { position: absolute; inset: 0; content: ''; background: radial-gradient(rgba(255,255,255,.11) .65px, transparent .8px); background-size: 5px 5px; mask-image: linear-gradient(155deg, #000, transparent 75%); opacity: .13; pointer-events: none; }
    .msav-footer-main, .msav-footer-bottom { position: relative; max-width: 1440px; margin-inline: auto; } .msav-footer-main { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(410px, .92fr); gap: clamp(56px, 9vw, 168px); }
    .msav-footer-brand { display: flex; min-height: clamp(390px, 38vw, 560px); flex-direction: column; justify-content: space-between; } .msav-footer-logo { position: relative; width: min(100%, 680px); line-height: 0; } .msav-footer-logo img { display: block; width: 100%; } .msav-footer-logo-av { position: absolute; inset: 0; clip-path: inset(0 0 0 56%); filter: brightness(0) invert(1); pointer-events: none; }
    .msav-footer-company { max-width: 460px; margin-top: 35px; } .msav-footer-company-name { margin: 0; font-size: clamp(18px, 1.55vw, 25px); font-weight: 620; letter-spacing: -.045em; } .msav-footer-company-name span { color: rgba(255,255,255,.62); font-size: .52em; letter-spacing: .025em; vertical-align: .16em; } .msav-footer-company-description { max-width: 400px; margin: 20px 0 0; color: rgba(255,255,255,.8); font-size: clamp(16px, 1.28vw, 19px); line-height: 1.35; letter-spacing: -.035em; }
    .msav-footer-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(54px, 6vw, 94px) clamp(30px, 4vw, 68px); align-content: end; } .msav-footer-links { display: contents; } .msav-footer h3 { margin: 0 0 18px; color: rgba(255,255,255,.48); font-size: 11px; letter-spacing: .02em; text-transform: uppercase; } .msav-footer-links a { display: block; width: fit-content; margin-bottom: 13px; color: #fff; font-size: 15px; font-weight: 550; text-decoration: none; } .msav-footer a:hover, .msav-footer a:focus-visible { color: var(--lime); outline: none; }
    .msav-footer-contact-block p { max-width: 240px; margin: 0; color: rgba(255,255,255,.66); font-size: 14px; line-height: 1.48; } .msav-footer-contact-details { display: grid; gap: 8px; margin-top: 14px; } .msav-footer-contact-detail { color: #fff; font-size: 14px; font-weight: 550; text-decoration: none; } .msav-footer-contact-detail span { margin-right: 6px; } .msav-footer-contact { display: inline-flex; align-items: center; gap: 12px; margin-top: 20px; padding: 12px 18px; border-radius: 999px; background: var(--lime); color: #101010 !important; font-size: 13px; font-weight: 750; text-decoration: none; } .msav-footer-contact::after { content: '→'; display: grid; width: 20px; height: 20px; place-items: center; border: 1px solid currentColor; border-radius: 50%; }
    .msav-footer-social { display: flex; gap: 9px; } .msav-footer-social a { display: grid; width: 35px; height: 35px; place-items: center; border: 1px solid rgba(255,255,255,.4); border-radius: 4px; } .msav-footer-social svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; } .msav-footer-bottom { margin-top: clamp(76px, 10vw, 156px); padding-top: 20px; border-top: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.48); font-size: 10px; letter-spacing: .035em; text-transform: uppercase; }

    @media (max-width: 1280px) { .nav { grid-template-columns: 132px 1fr; padding-inline: 20px; } .mobile-toggle { display: grid; justify-self: end; } .menu { position: absolute; top: 68px; right: 20px; left: 20px; display: none; max-height: calc(100svh - 88px); flex-direction: column; align-items: stretch; padding: 8px; overflow-y: auto; border-radius: 20px; background: rgba(14,17,24,.93); } .menu.open { display: flex; } .menu a, .nav-dropdown > button { width: 100%; justify-content: space-between; padding: 12px 14px; border-radius: 12px; } .claim { justify-content: center !important; margin: 4px 0 0; } .dropdown-panel { position: static; display: none; grid-template-columns: 1fr; width: auto; margin: 0 7px 4px; transform: none; } .nav-dropdown.open .dropdown-panel { display: grid; transform: none; } .dropdown-hero { display: none; } }
    @media (max-width: 800px) { .project-hero { min-height: 770px; } .hero-index { display: none; } .project-facts { grid-template-columns: 1fr 1fr; gap: 30px 22px; } .project-facts > :first-child { grid-column: 1 / -1; } .project-story::before { right: auto; bottom: 8vw; left: -14vw; width: 105vw; opacity: .07; } .story-intro, .approach { grid-template-columns: 1fr; } .story-intro { gap: 26px; } .story-copy { grid-template-columns: 1fr; margin-left: clamp(24px, 13vw, 110px); } .gallery-heading { display: block; } .gallery-heading p { margin-top: 24px; } .gallery-grid { grid-template-columns: 1fr 1fr; } .gallery-item, .gallery-item--small, .gallery-item--half { min-height: 56vw; grid-column: span 1; } .gallery-item:first-child { grid-column: 1 / -1; min-height: 86vw; } .msav-footer-main { grid-template-columns: 1fr; gap: 42px; } .msav-footer-brand { min-height: 220px; } .msav-footer-logo { width: min(76%, 420px); } }
    @media (max-width: 520px) { .nav { inset: 11px 0 auto; padding-inline: 14px; } .brand { width: 112px; height: 48px; } .menu { top: 60px; right: 14px; left: 14px; } .project-hero { min-height: 700px; padding-inline: 24px; } .project-hero h1 { font-size: clamp(3.5rem, 16vw, 5.2rem); } .project-facts { padding-inline: 24px; } .deliverables { grid-template-columns: 1fr; } .deliverable:nth-child(odd), .deliverable:nth-child(even) { padding-right: 0; padding-left: 0; border-right: 0; } .project-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } .project-nav a { min-height: 210px; padding: 20px 18px; } .project-nav a::before { position: absolute; z-index: 1; top: 20px; left: 18px; display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid var(--lime); border-radius: 50%; background: var(--lime); color: #14190d; content: '←'; font-size: 17px; line-height: 1; transition: background .2s ease, color .2s ease, transform .2s ease; } .project-nav a + a { border-top: 0; border-left: 1px solid rgba(255,255,255,.3); text-align: right; } .project-nav a + a::before { right: 18px; left: auto; content: '→'; } .project-nav a:active::before, .project-nav a:focus-visible::before { background: #fff; border-color: #fff; color: #14190d; transform: scale(.92); } .project-nav a + a strong { margin-left: auto; } .project-nav strong { font-size: clamp(1.55rem, 6.25vw, 2.05rem); } .msav-footer { padding: 78px 20px 23px; } .msav-footer-side { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 42px 24px; } .msav-footer-bottom { margin-top: 66px; font-size: 9px; } }
    @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }
  

/* WordPress dynamic Project additions. */
.msav-project-page .approach-description p:last-child{margin-bottom:0}
.msav-project-page .project-equipment{display:grid;grid-template-columns:minmax(220px,.7fr) minmax(0,1.25fr);gap:clamp(42px,10vw,170px);padding:clamp(90px,12vw,170px) clamp(24px,13vw,220px);border-top:1px solid var(--line);background:#090b0e}
.msav-project-page .equipment-heading h2{max-width:620px;margin:20px 0 0;font-size:clamp(2.4rem,4.5vw,5.2rem);font-weight:500;line-height:.92;letter-spacing:-.06em}
.msav-project-page .equipment-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;border-top:1px solid var(--line)}
.msav-project-page .equipment-item{display:grid;grid-template-columns:42px 1fr;gap:14px;min-height:92px;align-items:center;padding:20px 8px;border-bottom:1px solid var(--line)}
.msav-project-page .equipment-item:nth-child(odd){padding-right:28px;border-right:1px solid var(--line)}
.msav-project-page .equipment-item:nth-child(even){padding-left:28px}
.msav-project-page .equipment-item span{color:var(--lime);font:500 10px 'Fira Mono',monospace;letter-spacing:.12em}
.msav-project-page .equipment-item strong{font-size:15px;line-height:1.35}
.msav-project-page .gallery-media-button{position:relative;display:block;width:100%;height:100%;padding:0;border:0;background:none;color:#fff;cursor:zoom-in;overflow:hidden}
.msav-project-page .gallery-media-button img{display:block;width:100%;height:100%;object-fit:cover}
.msav-project-page .gallery-video-button{cursor:pointer}
.msav-project-page .gallery-play{position:absolute;inset:50% auto auto 50%;display:grid;width:72px;height:72px;place-items:center;border:1px solid rgba(255,255,255,.6);border-radius:50%;background:rgba(8,9,11,.46);font-size:20px;transform:translate(-50%,-50%);backdrop-filter:blur(12px)}
.msav-project-page .gallery-item figcaption{padding-top:9px;color:rgba(255,255,255,.54);font:500 9px 'Fira Mono',monospace;letter-spacing:.08em;text-transform:uppercase}
.msav-project-page .is-gallery-extra{display:none}
.msav-project-page .gallery.is-expanded .is-gallery-extra{display:block}
.msav-project-page .gallery-more{display:flex;align-items:center;gap:12px;margin:38px auto 0;padding:14px 18px;border:1px solid var(--line);background:transparent;color:#fff;font:600 11px 'Fira Mono',monospace;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}








.project-lightbox[hidden]{display:none!important}.project-lightbox{position:fixed;z-index:99999;inset:0;display:grid;grid-template-columns:68px minmax(0,1fr) 68px;grid-template-rows:1fr auto;align-items:center;padding:28px;background:rgba(3,4,6,.96)}
.project-lightbox-stage{grid-column:2;grid-row:1;display:grid;height:min(78vh,900px);place-items:center}.project-lightbox-stage img,.project-lightbox-stage video,.project-lightbox-stage iframe{display:block;max-width:100%;max-height:100%;border:0}.project-lightbox-stage iframe{width:min(1200px,100%);aspect-ratio:16/9}.project-lightbox-stage video{width:auto;height:auto}
.project-lightbox-close,.project-lightbox-prev,.project-lightbox-next{border:0;background:transparent;color:#fff;cursor:pointer}.project-lightbox-close{position:absolute;top:20px;right:24px;font-size:36px}.project-lightbox-prev{grid-column:1;grid-row:1;font-size:28px}.project-lightbox-next{grid-column:3;grid-row:1;font-size:28px}.project-lightbox-meta{grid-column:2;grid-row:2;display:flex;justify-content:space-between;gap:30px;padding-top:18px;color:rgba(255,255,255,.65);font:500 10px 'Fira Mono',monospace;letter-spacing:.08em;text-transform:uppercase}.project-lightbox-caption{margin:0;text-align:right}.project-lightbox-open{overflow:hidden}
@media(max-width:900px){.msav-project-page .project-equipment{grid-template-columns:1fr;gap:38px;padding-left:24px;padding-right:24px}.msav-project-page .equipment-grid{grid-template-columns:1fr}.msav-project-page .equipment-item:nth-child(n){padding-left:8px;padding-right:8px;border-right:0}.project-lightbox{grid-template-columns:42px minmax(0,1fr) 42px;padding:16px}.project-lightbox-meta{display:block}.project-lightbox-caption{text-align:left;margin-top:8px}}
@media(max-width:620px){.msav-project-page .gallery-play{width:58px;height:58px}.project-lightbox{grid-template-columns:34px minmax(0,1fr) 34px;padding:10px}.project-lightbox-close{top:10px;right:14px}}


/* ==========================================================
   Single Project refinement — typography, media & navigation
   ========================================================== */

/* 1. More controlled heading scale and paragraph rhythm */
.msav-project-page .project-hero h1{
  max-width:900px;
  margin:0 0 28px;
  font-size:clamp(3.8rem,7.2vw,7.5rem);
  line-height:.86;
  letter-spacing:-.068em;
}
.msav-project-page .hero-summary{
  max-width:620px;
  font-size:clamp(1rem,1.25vw,1.18rem);
  line-height:1.66;
}
.msav-project-page .story-intro h2{
  max-width:790px;
  font-size:clamp(2.7rem,4.9vw,5.25rem);
  line-height:.94;
  letter-spacing:-.058em;
}
.msav-project-page .story-copy{
  max-width:900px;
  gap:clamp(28px,3.2vw,48px);
  font-size:clamp(1rem,1.08vw,1.12rem);
  line-height:1.72;
}
.msav-project-page .story-copy p + p,
.msav-project-page .approach-description p + p{
  margin-top:1.05em;
}
.msav-project-page .approach h2{
  max-width:520px;
  font-size:clamp(2.6rem,4.5vw,4.9rem);
  line-height:.94;
  letter-spacing:-.058em;
}
.msav-project-page .approach-description{
  max-width:650px;
  color:rgba(255,255,255,.78);
  font-size:clamp(1rem,1.12vw,1.16rem);
  line-height:1.7;
}
.msav-project-page .gallery-heading h2{
  font-size:clamp(2.5rem,4.7vw,5.15rem);
  line-height:.94;
  letter-spacing:-.058em;
}
.msav-project-page .gallery-heading > p{
  max-width:330px;
  font-size:clamp(13px,1vw,15px);
  line-height:1.65;
}
.msav-project-page .equipment-heading h2{
  font-size:clamp(2.35rem,3.8vw,4.4rem);
  line-height:.96;
}

/* Give main text sections a little more consistent vertical rhythm */
.msav-project-page .story-intro{
  padding-top:clamp(92px,11vw,165px);
  padding-bottom:clamp(68px,8vw,120px);
}
.msav-project-page .story-copy{
  margin-bottom:clamp(92px,11vw,165px);
}
.msav-project-page .approach{
  padding-top:clamp(92px,11vw,165px);
  padding-bottom:clamp(92px,11vw,165px);
}
.msav-project-page .gallery-heading{
  padding-top:clamp(72px,7.5vw,120px);
}

/* 2. Feature image uses a consistent editorial frame.
      Large source files no longer control the displayed height. */
.msav-project-page .feature-image{
  width:min(calc(100% - 40px),1440px);
  aspect-ratio:16 / 9;
  min-height:0;
  max-height:760px;
  margin:0 auto;
  background:#16191e;
}
.msav-project-page .feature-image img{
  width:100%;
  height:100%;
  min-height:0;
  object-fit:cover;
  object-position:center;
}

/* 3. Flexible gallery.
      Auto layouts adapt cleanly to the number of media items. */
.msav-project-page .gallery-grid{
  grid-auto-flow:dense;
  align-items:stretch;
}
.msav-project-page .gallery-item{
  min-height:0;
  aspect-ratio:4 / 3;
  grid-column:span 6;
}
.msav-project-page .gallery-item--small{
  min-height:0;
  aspect-ratio:4 / 3;
  grid-column:span 5;
  align-self:stretch;
}
.msav-project-page .gallery-item--half{
  min-height:0;
  aspect-ratio:4 / 3;
  grid-column:span 6;
}
.msav-project-page .gallery-item--wide{
  min-height:0;
  aspect-ratio:16 / 9;
  grid-column:1 / -1;
}

/* One item: full-width cinematic frame */
.msav-project-page .gallery-grid--count-1 .gallery-item{
  grid-column:1 / -1;
  aspect-ratio:16 / 9;
}

/* Two items: equal-sized cards — no empty block underneath */
.msav-project-page .gallery-grid--count-2 .gallery-item{
  grid-column:span 6 !important;
  aspect-ratio:4 / 3;
  align-self:stretch;
}

/* Three items: large visual + two compact visuals */
.msav-project-page .gallery-grid--count-3 .gallery-item:first-child{
  grid-column:span 7 !important;
  grid-row:span 2;
  aspect-ratio:auto;
  min-height:620px;
}
.msav-project-page .gallery-grid--count-3 .gallery-item:nth-child(2),
.msav-project-page .gallery-grid--count-3 .gallery-item:nth-child(3){
  grid-column:span 5 !important;
  aspect-ratio:16 / 9;
}
.msav-project-page .gallery-media-button,
.msav-project-page .gallery-media-button img{
  height:100%;
}

/* 4. Project navigation: smaller, visually distinct, obviously clickable */
.msav-project-page .project-nav{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  padding:1px;
  background:rgba(255,255,255,.16);
}
.msav-project-page .project-nav a{
  position:relative;
  display:flex;
  min-height:clamp(210px,19vw,300px);
  flex-direction:column;
  justify-content:flex-end;
  padding:clamp(28px,3.4vw,52px);
  border:0;
  overflow:hidden;
  color:#fff;
  text-decoration:none;
  transition:background .3s ease,transform .3s ease;
}
.msav-project-page .project-nav .project-nav-all{
  background:#111318;
}
.msav-project-page .project-nav .project-nav-next{
  background:#b91426;
  text-align:right;
}
.msav-project-page .project-nav a + a{
  border-left:0;
}
.msav-project-page .project-nav a::after{
  background:linear-gradient(180deg,transparent 25%,rgba(0,0,0,.35));
}
.msav-project-page .project-nav a:hover,
.msav-project-page .project-nav a:focus-visible{
  transform:translateY(-3px);
  outline:none;
}
.msav-project-page .project-nav .project-nav-all:hover,
.msav-project-page .project-nav .project-nav-all:focus-visible{
  background:#181c22;
}
.msav-project-page .project-nav .project-nav-next:hover,
.msav-project-page .project-nav .project-nav-next:focus-visible{
  background:#d51f31;
}
.msav-project-page .project-nav span{
  margin-bottom:13px;
  color:var(--lime);
  font-size:10px;
}
.msav-project-page .project-nav strong{
  max-width:580px;
  font-size:clamp(1.9rem,3.2vw,3.35rem);
  line-height:.96;
  letter-spacing:-.055em;
}
.msav-project-page .project-nav p{
  position:relative;
  z-index:1;
  max-width:360px;
  margin:14px 0 0;
  color:rgba(255,255,255,.68);
  font-size:13px;
  line-height:1.55;
}
.msav-project-page .project-nav-next strong,
.msav-project-page .project-nav-next p{
  margin-left:auto;
}
.msav-project-page .project-nav b{
  position:absolute;
  z-index:2;
  top:clamp(24px,2.7vw,40px);
  display:grid;
  width:46px;
  height:46px;
  place-items:center;
  border:1px solid rgba(255,255,255,.42);
  border-radius:50%;
  background:rgba(0,0,0,.12);
  font-size:18px;
  font-weight:500;
  transition:background .25s ease,color .25s ease,transform .25s ease;
}
.msav-project-page .project-nav-all b{left:clamp(28px,3.4vw,52px)}
.msav-project-page .project-nav-next b{right:clamp(28px,3.4vw,52px)}
.msav-project-page .project-nav a:hover b,
.msav-project-page .project-nav a:focus-visible b{
  background:var(--lime);
  border-color:var(--lime);
  color:#111;
  transform:scale(1.06);
}
.msav-project-page .project-nav a:hover strong{
  color:#fff;
}

@media(max-width:900px){
  .msav-project-page .project-hero h1{
    font-size:clamp(3.4rem,11vw,6.2rem);
  }
  .msav-project-page .feature-image{
    width:calc(100% - 28px);
    aspect-ratio:16 / 10;
  }
  .msav-project-page .gallery-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .msav-project-page .gallery-item,
  .msav-project-page .gallery-item--small,
  .msav-project-page .gallery-item--half,
  .msav-project-page .gallery-item--wide,
  .msav-project-page .gallery-grid--count-2 .gallery-item{
    grid-column:span 1 !important;
    grid-row:auto !important;
    min-height:0 !important;
    aspect-ratio:4 / 3;
  }
  .msav-project-page .gallery-grid--count-1 .gallery-item,
  .msav-project-page .gallery-grid--count-3 .gallery-item:first-child{
    grid-column:1 / -1 !important;
    grid-row:auto !important;
    min-height:0 !important;
    aspect-ratio:16 / 9;
  }
  .msav-project-page .project-nav strong{
    font-size:clamp(1.65rem,4.8vw,2.55rem);
  }
}

@media(max-width:620px){
  .msav-project-page .project-hero h1{
    font-size:clamp(3.1rem,14vw,4.8rem);
    line-height:.9;
  }
  .msav-project-page .story-intro h2,
  .msav-project-page .approach h2,
  .msav-project-page .gallery-heading h2,
  .msav-project-page .equipment-heading h2{
    font-size:clamp(2.25rem,10vw,3.45rem);
    line-height:.98;
  }
  .msav-project-page .feature-image{
    width:calc(100% - 20px);
    aspect-ratio:4 / 3;
  }
  .msav-project-page .gallery-grid{
    grid-template-columns:1fr;
  }
  .msav-project-page .gallery-item,
  .msav-project-page .gallery-item--small,
  .msav-project-page .gallery-item--half,
  .msav-project-page .gallery-item--wide,
  .msav-project-page .gallery-grid--count-1 .gallery-item,
  .msav-project-page .gallery-grid--count-2 .gallery-item,
  .msav-project-page .gallery-grid--count-3 .gallery-item:first-child,
  .msav-project-page .gallery-grid--count-3 .gallery-item:nth-child(2),
  .msav-project-page .gallery-grid--count-3 .gallery-item:nth-child(3){
    grid-column:1 / -1 !important;
    grid-row:auto !important;
    min-height:0 !important;
    aspect-ratio:4 / 3;
  }
  .msav-project-page .project-nav{
    grid-template-columns:1fr;
  }
  .msav-project-page .project-nav a{
    min-height:190px;
    padding:26px 22px;
  }
  .msav-project-page .project-nav .project-nav-next{
    text-align:left;
  }
  .msav-project-page .project-nav-next strong,
  .msav-project-page .project-nav-next p{
    margin-left:0;
  }
  .msav-project-page .project-nav-all b,
  .msav-project-page .project-nav-next b{
    top:22px;
    right:22px;
    left:auto;
    width:40px;
    height:40px;
  }
}


/* ==========================================================
   Single Project gallery carousel + navigation safety
   ========================================================== */

/* Gallery header controls */
.msav-project-page .gallery-heading{
  position:relative;
  align-items:flex-end;
}
.msav-project-page .gallery-carousel-controls{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto;
}
.msav-project-page .gallery-carousel-controls[hidden]{
  display:none!important;
}
.msav-project-page .gallery-carousel-arrow{
  display:grid;
  width:46px;
  height:46px;
  place-items:center;
  padding:0;
  border:1px solid rgba(255,255,255,.28);
  border-radius:50%;
  background:#111318;
  color:#fff;
  font-size:18px;
  cursor:pointer;
  transition:background .25s ease,border-color .25s ease,color .25s ease,transform .25s ease;
}
.msav-project-page .gallery-carousel-arrow:hover,
.msav-project-page .gallery-carousel-arrow:focus-visible{
  border-color:var(--lime);
  background:var(--lime);
  color:#111;
  outline:none;
  transform:translateY(-2px);
}
.msav-project-page .gallery-carousel-status{
  min-width:64px;
  color:rgba(255,255,255,.62);
  font:600 10px 'Fira Mono',monospace;
  letter-spacing:.08em;
  text-align:center;
}

/* Desktop: 3 media items visible in one horizontal row */
.msav-project-page .gallery-carousel{
  overflow:hidden;
}
.msav-project-page .gallery-carousel-viewport{
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  scroll-snap-type:x mandatory;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
}
.msav-project-page .gallery-carousel-viewport::-webkit-scrollbar{
  display:none;
}
.msav-project-page .gallery-grid.gallery-track{
  display:flex;
  width:100%;
  gap:10px;
  align-items:stretch;
  grid-template-columns:none;
  grid-auto-flow:initial;
}
.msav-project-page .gallery-grid.gallery-track .gallery-item,
.msav-project-page .gallery-grid.gallery-track .gallery-item--small,
.msav-project-page .gallery-grid.gallery-track .gallery-item--half,
.msav-project-page .gallery-grid.gallery-track .gallery-item--wide,
.msav-project-page .gallery-grid.gallery-track[class*="gallery-grid--count-"] .gallery-item{
  flex:0 0 calc((100% - 20px) / 3);
  width:auto;
  min-width:0;
  min-height:0!important;
  aspect-ratio:4 / 3!important;
  grid-column:auto!important;
  grid-row:auto!important;
  align-self:stretch!important;
  scroll-snap-align:start;
}
.msav-project-page .gallery-grid.gallery-track .gallery-media-button{
  height:100%;
}
.msav-project-page .gallery-grid.gallery-track .gallery-item img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Remove the previous load-more behavior: carousel shows all media */
.msav-project-page .gallery-more,
.msav-project-page .is-gallery-extra{
  display:block!important;
}

/* Next / Archive cards: prevent long project names from colliding or clipping */
.msav-project-page .project-nav{
  overflow:visible;
}
.msav-project-page .project-nav a{
  box-sizing:border-box;
  min-width:0;
  min-height:270px;
  padding:92px clamp(30px,3.3vw,52px) clamp(30px,3.3vw,48px);
  overflow:hidden;
}
.msav-project-page .project-nav strong{
  max-width:100%;
  font-size:clamp(1.75rem,2.9vw,3rem);
  line-height:1;
  letter-spacing:-.052em;
  overflow-wrap:anywhere;
}
.msav-project-page .project-nav span{
  margin-bottom:12px;
  line-height:1.35;
}
.msav-project-page .project-nav p{
  margin-top:12px;
  line-height:1.5;
}
.msav-project-page .project-nav b{
  top:28px;
}
.msav-project-page .project-nav-next b{
  right:clamp(30px,3.3vw,52px);
}
.msav-project-page .project-nav-next span{
  padding-right:58px;
}

/* Tablet: 2 items across */
@media(max-width:900px) and (min-width:621px){
  .msav-project-page .gallery-grid.gallery-track .gallery-item,
  .msav-project-page .gallery-grid.gallery-track .gallery-item--small,
  .msav-project-page .gallery-grid.gallery-track .gallery-item--half,
  .msav-project-page .gallery-grid.gallery-track .gallery-item--wide,
  .msav-project-page .gallery-grid.gallery-track[class*="gallery-grid--count-"] .gallery-item{
    flex-basis:calc((100% - 10px) / 2);
  }
}

/* Mobile: two media items visible as top + bottom.
   Swipe / arrows / autoplay move to the next pair. */
@media(max-width:620px){
  .msav-project-page .gallery-heading{
    display:grid;
    grid-template-columns:1fr auto;
    align-items:end;
    gap:20px 12px;
  }
  .msav-project-page .gallery-heading>div:first-child{
    min-width:0;
  }
  .msav-project-page .gallery-heading>p{
    grid-column:1 / -1;
    max-width:100%;
  }
  .msav-project-page .gallery-carousel-controls{
    grid-column:2;
    grid-row:1;
    align-self:end;
  }
  .msav-project-page .gallery-carousel-arrow{
    width:42px;
    height:42px;
  }
  .msav-project-page .gallery-carousel-status{
    display:none;
  }

  .msav-project-page .gallery-grid.gallery-track{
    display:grid;
    width:100%;
    grid-template-rows:repeat(2,minmax(0,1fr));
    grid-auto-flow:column;
    grid-auto-columns:100%;
    gap:10px;
  }
  .msav-project-page .gallery-grid.gallery-track .gallery-item,
  .msav-project-page .gallery-grid.gallery-track .gallery-item--small,
  .msav-project-page .gallery-grid.gallery-track .gallery-item--half,
  .msav-project-page .gallery-grid.gallery-track .gallery-item--wide,
  .msav-project-page .gallery-grid.gallery-track[class*="gallery-grid--count-"] .gallery-item{
    width:100%;
    height:auto;
    min-height:0!important;
    aspect-ratio:16 / 9!important;
    flex:none;
    grid-column:auto!important;
    grid-row:auto!important;
  }
  .msav-project-page .gallery-grid.gallery-track .gallery-item:last-child:nth-child(odd){
    grid-row:1 / 3!important;
    aspect-ratio:auto!important;
  }

  .msav-project-page .project-nav a{
    min-height:245px;
    padding:84px 24px 28px;
  }
  .msav-project-page .project-nav strong{
    font-size:clamp(1.65rem,8vw,2.35rem);
    line-height:1.02;
  }
  .msav-project-page .project-nav b{
    top:22px;
    right:22px;
    left:auto;
  }
  .msav-project-page .project-nav-next span{
    padding-right:52px;
  }
}


/* Gallery bullet pagination */
.msav-project-page .gallery-carousel-pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:34px;
  margin:22px 0 0;
}
.msav-project-page .gallery-carousel-pagination[hidden]{
  display:none!important;
}
.msav-project-page .gallery-carousel-bullet{
  position:relative;
  display:grid;
  width:18px;
  height:18px;
  place-items:center;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
}
.msav-project-page .gallery-carousel-bullet::before{
  position:absolute;
  width:100%;
  height:100%;
  border:1px solid transparent;
  border-radius:50%;
  content:"";
  transform:scale(.68);
  transition:border-color .28s ease,transform .28s ease;
}
.msav-project-page .gallery-carousel-bullet-dot{
  display:block;
  width:5px;
  height:5px;
  border-radius:50%;
  background:rgba(255,255,255,.34);
  transform:scale(1);
  transition:width .3s ease,height .3s ease,background .3s ease,box-shadow .3s ease,transform .3s ease;
}
.msav-project-page .gallery-carousel-bullet:hover .gallery-carousel-bullet-dot,
.msav-project-page .gallery-carousel-bullet:focus-visible .gallery-carousel-bullet-dot{
  background:rgba(255,255,255,.8);
  transform:scale(1.35);
}
.msav-project-page .gallery-carousel-bullet:focus-visible{
  outline:none;
}
.msav-project-page .gallery-carousel-bullet.is-active::before{
  border-color:rgba(214,255,48,.48);
  transform:scale(1);
}
.msav-project-page .gallery-carousel-bullet.is-active .gallery-carousel-bullet-dot{
  width:8px;
  height:8px;
  background:var(--lime);
  box-shadow:0 0 12px rgba(214,255,48,.65);
  animation:msavGalleryBulletPulse 1.9s ease-in-out infinite;
}
@keyframes msavGalleryBulletPulse{
  0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(214,255,48,.34)}
  50%{transform:scale(1.18);box-shadow:0 0 0 6px rgba(214,255,48,0)}
}

@media (prefers-reduced-motion: reduce){
  .msav-project-page .gallery-carousel-bullet.is-active .gallery-carousel-bullet-dot{
    animation:none;
  }
}


/* Project navigation height safety for longer titles/descriptions */
.msav-project-page .project-nav a{
  min-height:clamp(300px,24vw,380px);
  padding-top:100px;
  padding-bottom:clamp(38px,4vw,58px);
}
.msav-project-page .project-nav strong{
  max-width:min(100%,760px);
  font-size:clamp(1.7rem,2.75vw,2.85rem);
  line-height:1.04;
  letter-spacing:-.05em;
}
.msav-project-page .project-nav p{
  max-width:460px;
  margin-top:14px;
  font-size:13px;
  line-height:1.6;
}
.msav-project-page .project-nav-next strong,
.msav-project-page .project-nav-next p{
  margin-left:auto;
}
.msav-project-page .project-nav-next span{
  padding-right:64px;
}
.msav-project-page .project-nav b{
  top:30px;
}

@media(max-width:900px){
  .msav-project-page .project-nav a{
    min-height:290px;
    padding-top:92px;
  }
  .msav-project-page .project-nav strong{
    font-size:clamp(1.6rem,4.6vw,2.45rem);
  }
}

@media(max-width:620px){
  .msav-project-page .project-nav a{
    min-height:260px;
    padding:82px 22px 32px;
  }
  .msav-project-page .project-nav strong{
    font-size:clamp(1.55rem,7.8vw,2.2rem);
    line-height:1.06;
  }
  .msav-project-page .project-nav p{
    font-size:12px;
    line-height:1.55;
  }
}


/* Single Project hero — safer title + paragraph sizing */
.msav-project-page .project-hero{
  min-height:auto;
  padding-bottom:clamp(56px,6.5vw,92px);
}
.msav-project-page .project-hero h1{
  max-width:920px;
  margin:0 0 30px;
  font-size:clamp(3.35rem,6.1vw,6.35rem);
  line-height:.9;
  letter-spacing:-.062em;
  overflow-wrap:break-word;
  word-break:normal;
  hyphens:none;
}
.msav-project-page .hero-summary{
  width:min(100%,700px);
  max-width:700px;
  margin:0;
  font-size:clamp(.98rem,1.08vw,1.12rem);
  line-height:1.7;
  letter-spacing:-.012em;
  overflow-wrap:break-word;
}
.msav-project-page .hero-summary p{
  margin:0;
}
.msav-project-page .hero-summary p + p{
  margin-top:1em;
}

@media(max-width:1100px){
  .msav-project-page .project-hero h1{
    max-width:820px;
    font-size:clamp(3.15rem,7.4vw,5.65rem);
  }
  .msav-project-page .hero-summary{
    max-width:640px;
  }
}

@media(max-width:620px){
  .msav-project-page .project-hero{
    padding-bottom:44px;
  }
  .msav-project-page .project-hero h1{
    max-width:100%;
    margin-bottom:24px;
    font-size:clamp(2.85rem,12vw,4.25rem);
    line-height:.94;
    letter-spacing:-.052em;
  }
  .msav-project-page .hero-summary{
    max-width:100%;
    font-size:15px;
    line-height:1.65;
  }
}


/* Single Project hero — final spacing fix for long multi-line titles */
.msav-project-page .project-hero h1{
  max-width:860px;
  margin:0 0 44px;
  font-size:clamp(3rem,5.35vw,5.55rem);
  line-height:1.04;
  letter-spacing:-.05em;
  overflow-wrap:normal;
  word-break:normal;
}
.msav-project-page .hero-summary{
  width:min(100%,720px);
  max-width:720px;
  margin-top:0;
  font-size:clamp(.98rem,1.05vw,1.1rem);
  line-height:1.78;
}
.msav-project-page .project-hero{
  padding-bottom:clamp(72px,8vw,110px);
}

@media(max-width:1100px){
  .msav-project-page .project-hero h1{
    max-width:780px;
    font-size:clamp(2.9rem,6.2vw,5rem);
    line-height:1.05;
    margin-bottom:38px;
  }
}

@media(max-width:620px){
  .msav-project-page .project-hero h1{
    max-width:100%;
    font-size:clamp(2.65rem,10.6vw,3.9rem);
    line-height:1.08;
    letter-spacing:-.04em;
    margin-bottom:30px;
  }
  .msav-project-page .hero-summary{
    max-width:100%;
    font-size:15px;
    line-height:1.72;
  }
  .msav-project-page .project-hero{
    padding-bottom:56px;
  }
}


/* Mobile feature-image caption: keep long captions readable and outside image */
@media(max-width:620px){
  .msav-project-page .feature-image{
    display:block;
    aspect-ratio:auto;
    max-height:none;
    overflow:visible;
    background:#0c0e11;
  }

  .msav-project-page .feature-image img{
    display:block;
    width:100%;
    height:auto;
    min-height:0;
    aspect-ratio:4 / 3;
    object-fit:cover;
  }

  .msav-project-page .feature-image figcaption{
    position:static;
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    margin:0;
    padding:12px 2px 0;
    color:rgba(255,255,255,.68);
    font:500 8px/1.55 'Fira Mono',monospace;
    letter-spacing:.07em;
    text-transform:uppercase;
    white-space:normal;
    overflow-wrap:break-word;
    word-break:normal;
  }
}


/* Project gallery touch / swipe improvements */
.msav-project-page .gallery-carousel-viewport{
  cursor:grab;
  touch-action:pan-x pan-y;
  scroll-behavior:smooth;
  scroll-snap-type:x mandatory;
}
.msav-project-page .gallery-carousel-viewport:active{
  cursor:grabbing;
}
.msav-project-page .gallery-media-button{
  touch-action:pan-x pan-y;
}
.msav-project-page .gallery-item img{
  -webkit-user-drag:none;
  user-select:none;
}
@media(max-width:900px){
  .msav-project-page .gallery-carousel-viewport{
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-inline:contain;
    scroll-snap-stop:always;
  }
}


/* ==========================================================
   Mobile Project Navigation — single arrow, compact cards
   ========================================================== */
@media(max-width:620px){

  /* Remove the old prebuilt mobile arrow pseudo-element.
     The template already has one real <b> arrow button. */
  .msav-project-page .project-nav a::before{
    content:none!important;
    display:none!important;
  }

  .msav-project-page .project-nav{
    display:grid;
    grid-template-columns:1fr;
    gap:1px;
    padding:1px;
    background:rgba(255,255,255,.14);
  }

  .msav-project-page .project-nav a{
    min-height:205px;
    padding:30px 76px 30px 24px;
    justify-content:center;
    text-align:left;
    transform:none!important;
  }

  .msav-project-page .project-nav .project-nav-all{
    background:#111318;
  }

  .msav-project-page .project-nav .project-nav-next{
    background:#c7162a;
    text-align:left;
  }

  .msav-project-page .project-nav span{
    margin:0 0 12px;
    padding:0!important;
    font-size:9px;
    line-height:1.35;
    letter-spacing:.13em;
  }

  .msav-project-page .project-nav strong{
    max-width:100%;
    margin:0!important;
    font-size:clamp(1.55rem,7.1vw,2.15rem);
    line-height:1.04;
    letter-spacing:-.045em;
    overflow-wrap:anywhere;
  }

  .msav-project-page .project-nav p,
  .msav-project-page .project-nav-next p{
    max-width:310px;
    margin:12px 0 0!important;
    color:rgba(255,255,255,.66);
    font-size:11px;
    line-height:1.55;
  }

  /* Keep just one clear arrow button on each card */
  .msav-project-page .project-nav b,
  .msav-project-page .project-nav-all b,
  .msav-project-page .project-nav-next b{
    top:50%;
    right:22px;
    left:auto;
    width:42px;
    height:42px;
    border:1px solid rgba(255,255,255,.46);
    background:transparent;
    color:#fff;
    transform:translateY(-50%);
  }

  .msav-project-page .project-nav a:active b,
  .msav-project-page .project-nav a:focus-visible b{
    border-color:var(--lime);
    background:var(--lime);
    color:#111;
    transform:translateY(-50%) scale(.96);
  }

  /* No desktop hover lift on touch layout */
  .msav-project-page .project-nav a:hover{
    transform:none;
  }

  .msav-project-page .project-nav a:hover b{
    transform:translateY(-50%);
  }
}


/* Mobile gallery: keep arrow controls + bullet pagination, add finger swipe */
@media(max-width:620px){
  .msav-project-page .gallery-carousel-viewport{
    touch-action:pan-y;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
  }

  /* Keep the existing previous/next buttons visible on mobile. */
  .msav-project-page .gallery-carousel-controls{
    display:flex;
  }
  .msav-project-page .gallery-carousel-controls[hidden]{
    display:none!important;
  }

  /* Keep animated bullet pagination visible below the gallery. */
  .msav-project-page .gallery-carousel-pagination{
    display:flex;
    margin-top:18px;
  }
  .msav-project-page .gallery-carousel-pagination[hidden]{
    display:none!important;
  }

  /* Do not show any separate swipe instruction label;
     swipe is an interaction, not an extra control. */
  .msav-project-page .gallery-swipe-hint,
  .msav-project-page [data-gallery-swipe-hint]{
    display:none!important;
  }
}