.expertise-main { padding: 165px var(--home-gutter) 100px; }
.expertise-eyebrow, .service-back, .pancarte-number, .pancarte-open { font: 400 11px/1.5 'DM Mono', monospace; letter-spacing: .12em; text-transform: uppercase; }
.expertise-eyebrow { color: var(--accent); margin: 0 0 30px; }
.expertise-main h1 { max-width: 1050px; font-size: clamp(48px, 7.5vw, 112px); line-height: 1.02; font-weight: 300; letter-spacing: -.065em; margin: 0; }
.expertise-main h1 em { font-family: Georgia, serif; color: var(--accent); font-weight: 400; }
.expertise-heading > p:last-child { color: var(--muted); line-height: 1.8; margin: 30px 0 55px; }
.pancarte-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.service-pancarte { position: relative; min-height: 440px; aspect-ratio: 3 / 4.8; overflow: hidden; border: 1px solid #ffffff26; background: #141818; isolation: isolate; transition: transform .3s, border-color .3s; }
.service-pancarte > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s; }
.service-pancarte::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #0006, transparent 30%, #000b 65%, #000f); }
.pancarte-number { position: absolute; top: 22px; left: 22px; color: #fff; }
.pancarte-copy { position: absolute; bottom: 0; padding: 25px 22px; width: 100%; }
.pancarte-copy h2 { font-size: clamp(23px, 2.2vw, 34px); line-height: 1.1; letter-spacing: -.04em; font-weight: 400; margin: 0 0 15px; }
.pancarte-copy p { font-size: 13px; line-height: 1.6; color: #d0cec7; }
.pancarte-open { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #ffffff40; padding-top: 18px; margin-top: 25px; font-size: 9px; color: var(--accent); }
.pancarte-open > span { font: 300 25px 'Manrope', sans-serif; }
.service-pancarte:hover { transform: translateY(-6px); border-color: var(--accent); }
.service-pancarte:hover > img { transform: scale(1.06); }
.service-pancarte > img { filter: saturate(.82) contrast(1.06); }
.service-pancarte[href="./service-art-direction.html"] > img { object-position: 75% center; }
.service-pancarte[href="./service-cinematography.html"] > img { object-position: 48% center; }
.service-pancarte[href="./service-content.html"] > img { object-position: 43% center; }
.service-pancarte[href="./service-photography.html"] > img { object-position: center 65%; }
.pancarte-number { text-shadow: 0 1px 10px #000; }
.service-pancarte:focus-visible, .quote-eclipse:focus-visible, .service-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.service-back { display: inline-block; color: var(--muted); margin-bottom: 65px; }
.service-back:hover { color: var(--accent); }
.service-description { max-width: 770px; font-size: clamp(17px, 2vw, 23px); color: #b9b9b0; line-height: 1.8; margin: 35px 0 0; }
.quote-eclipse { position: relative; width: min(440px, 85vw); aspect-ratio: 1; display: grid; place-items: center; margin: 65px auto 30px; isolation: isolate; border-radius: 50%; }
.quote-eclipse-art { position: absolute; inset: 10%; border-radius: 50%; background: #060706; box-shadow: -14px 5px 2px -8px #e5f7ff, -23px 8px 35px -12px #8ed8ff, 14px -8px 50px #8ed8ff15; transition: transform .4s, box-shadow .4s; z-index: -1; }
.quote-eclipse-art::before { content: ''; position: absolute; inset: -13%; border: 1px solid #8ed8ff33; border-radius: 50%; transform: rotate(-28deg) scaleY(.78); }
.quote-eclipse-art::after { content: ''; position: absolute; inset: -22%; border: 1px solid #ffffff12; border-radius: 50%; }
.quote-eclipse-copy { display: flex; flex-direction: column; align-items: center; gap: 15px; font-size: clamp(22px, 3vw, 35px); letter-spacing: -.04em; }
.quote-arrow { font-size: 65px; font-weight: 300; color: var(--accent); line-height: 1; }
.quote-eclipse:hover .quote-eclipse-art { transform: rotate(-12deg) scale(1.04); }
.quote-blank { min-height: 100svh; scroll-margin-top: 50px; }
@media (max-width: 1100px) { .pancarte-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .service-pancarte { aspect-ratio: 4 / 5; } .pancarte-copy h2 { font-size: 34px; } }
@media (max-width: 600px) { .expertise-main { padding-top: 125px; padding-bottom: 65px; } .pancarte-grid { grid-template-columns: 1fr; gap: 24px; } .service-pancarte { min-height: 440px; } .service-back { margin-bottom: 45px; } .quote-eclipse { margin-top: 45px; } }
@media (prefers-reduced-motion: reduce) { .service-pancarte, .service-pancarte > img, .quote-eclipse-art { transition: none; } }