:root {
    --photo-bg-1: #050b18;
    --photo-bg-2: #0a1630;
    --photo-card: rgba(9, 17, 34, 0.74);
    --photo-border: rgba(255, 255, 255, 0.14);
    --photo-text: #f4f8ff;
    --photo-muted: rgba(227, 236, 255, 0.76);
    --photo-primary: #4a7aff;
    --photo-secondary: #c043e5;
    --photo-cyan: #50dfdb;
    --photo-shadow: 0 20px 55px rgba(3, 8, 20, 0.55);
    --photo-radius-lg: 22px;
    --photo-radius-md: 14px;
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    color: var(--photo-text);
    background:
        radial-gradient(1200px 700px at 15% 10%, rgba(80, 223, 219, 0.12), transparent 65%),
        radial-gradient(1000px 600px at 90% 20%, rgba(192, 67, 229, 0.16), transparent 70%),
        linear-gradient(145deg, var(--photo-bg-1), var(--photo-bg-2));
    background-attachment: fixed;
    background-size: 140% 140%;
    animation: photoAmbient 18s ease-in-out infinite;
    overflow-x: hidden;
    font-family: "Bahnschrift", "Segoe UI", sans-serif;
}

.main-content {
    width: min(1280px, 94vw);
    margin: 0 auto;
    padding: 82px 0 56px;
}

.photo-hero {
    border-radius: var(--photo-radius-lg);
    border: 1px solid var(--photo-border);
    background: linear-gradient(145deg, rgba(9, 17, 34, 0.86), rgba(9, 17, 34, 0.64));
    box-shadow: var(--photo-shadow);
    padding: clamp(20px, 3vw, 34px);
    position: relative;
    overflow: hidden;
}

.photo-hero::before,
.photo-hero::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    filter: blur(36px);
    pointer-events: none;
    z-index: 0;
}

.photo-hero::before {
    width: 230px;
    height: 230px;
    left: -46px;
    top: -48px;
    background: rgba(80, 223, 219, 0.2);
    animation: floatGlowOne 9s ease-in-out infinite;
}

.photo-hero::after {
    width: 280px;
    height: 280px;
    right: -72px;
    bottom: -72px;
    background: rgba(192, 67, 229, 0.2);
    animation: floatGlowTwo 10s ease-in-out infinite;
}

.photo-hero > * {
    position: relative;
    z-index: 1;
}

.photo-kicker {
    margin: 0;
    letter-spacing: 0.22em;
    font-size: 0.75rem;
    color: rgba(186, 246, 213, 0.9);
}

.photo-hero h1 {
    margin: 10px 0 10px;
    font-size: clamp(1.5rem, 3.4vw, 2.8rem);
    line-height: 1.12;
    text-wrap: balance;
}

.photo-subtitle {
    margin: 0;
    max-width: 860px;
    color: var(--photo-muted);
    line-height: 1.62;
}

.hero-pills {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hero-pill {
    border-radius: 999px;
    border: 1px solid rgba(80, 223, 219, 0.36);
    background: rgba(80, 223, 219, 0.12);
    color: #d7f8ff;
    padding: 9px 13px;
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.hero-pill:hover,
.hero-pill:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(80, 223, 219, 0.6);
    background: rgba(80, 223, 219, 0.2);
}

.team-filters {
    margin-top: 24px;
    display: grid;
    gap: 10px;
}

.team-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.team-filter-button {
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.04);
    color: #e1f7ff;
    padding: 10px 14px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.team-filter-button:hover,
.team-filter-button:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(80, 223, 219, 0.5);
    background: rgba(80, 223, 219, 0.14);
}

.team-filter-button.selected {
    border-color: rgba(255, 210, 98, 0.9);
    background: linear-gradient(135deg, rgba(255, 218, 102, 0.18), rgba(255, 190, 75, 0.24));
    color: #fff;
}

/* Role filters should show green selected state */
.team-filter-row.role-filters .team-filter-button.selected {
    border-color: rgba(80, 223, 219, 0.95);
    background: linear-gradient(135deg, rgba(80, 223, 219, 0.16), rgba(74, 122, 255, 0.06));
    color: #eafef6;
}

/* City filters keep the yellow look (explicit) */
.team-filter-row.city-filters .team-filter-button.selected {
    border-color: rgba(255, 210, 98, 0.95);
    background: linear-gradient(135deg, rgba(255, 218, 102, 0.18), rgba(255, 190, 75, 0.24));
    color: #fff;
}

.photo-listing {
    margin-block: 48px; /* spacing above and below each section */
    --team-card-width: clamp(278px, 26vw, 336px);
    --team-per-view: 3; /* default desktop: show exactly 3 cards per view */
    --team-gap: 16px;
}

.photo-listing-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.section-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 12px;
}

.scroll-controls {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.card-top-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    justify-content: flex-end;
}

.card-top-meta-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
}

.card-instagram-top {
    margin: 0;
}

.section-copy {
    max-width: 700px;
}

.section-kicker {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: rgba(186, 246, 213, 0.9);
}

.photo-listing-head h2 {
    margin: 6px 0 0;
    font-size: clamp(1.12rem, 2.1vw, 1.65rem);
}

.section-subtitle {
    margin: 6px 0 0;
    color: var(--photo-muted);
    font-size: 0.93rem;
    line-height: 1.52;
}

.scroll-controls {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.scroll-btn {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05));
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
}

.scroll-btn:hover,
.scroll-btn:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(80, 223, 219, 0.54);
    background: linear-gradient(145deg, rgba(80, 223, 219, 0.26), rgba(74, 122, 255, 0.26));
}

.scroll-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    transform: none;
}

.photographers-scroll-shell {
    position: relative;
    isolation: isolate;
}

.photographers-scroll-shell::before,
.photographers-scroll-shell::after {
    display: none; /* remove dark side overlays */
}

.photographers-track {
    display: grid;
    grid-auto-flow: column;
    /* compute card width so exactly `--team-per-view` cards fit the viewport */
    grid-auto-columns: calc((100% - (var(--team-gap) * (var(--team-per-view) - 1))) / var(--team-per-view));
    gap: var(--team-gap);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 6px;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    padding: 6px 6px 14px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.photographers-track::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.photographers-track::-webkit-scrollbar-thumb {
    display: none;
}

.photographers-track::-webkit-scrollbar-track {
    display: none;
}

.team-sort-controls {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
    align-self: flex-end;
    justify-content: flex-end;
}

.team-sort-button {
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    padding: 10px 18px;
    font-size: 0.95rem;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.team-sort-button:hover,
.team-sort-button:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(80, 223, 219, 0.54);
    background: rgba(74, 122, 255, 0.14);
}

.team-sort-button.selected {
    border-color: rgba(80, 223, 219, 0.86);
    background: linear-gradient(135deg, rgba(82, 230, 255, 0.18), rgba(248, 221, 156, 0.16));
}

.team-pagination {
    margin-top: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.team-pagination-dot {
    width: 11px;
    height: 11px;
    padding: 0;
    border-radius: 999px;
    border: 1.5px solid rgba(255, 255, 255, 0.56);
    background: transparent;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.team-pagination-dot:hover,
.team-pagination-dot:focus-visible {
    transform: scale(1.1);
    border-color: rgba(82, 230, 255, 0.86);
}

.team-pagination-dot.is-active {
    background: linear-gradient(135deg, #52e6ff, #f8dd9c);
    border-color: transparent;
    box-shadow: 0 0 0 4px rgba(82, 230, 255, 0.14);
}

.photographer-card {
    min-width: 0;
    max-width: none;
    width: 100%;
    border-radius: var(--photo-radius-md);
    border: 1px solid var(--photo-border);
    background: var(--photo-card);
    box-shadow: 0 14px 34px rgba(4, 9, 23, 0.44);
    padding: 14px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease, opacity 0.28s ease;
    opacity: 1;
    transform: translateY(0) scale(1);
    cursor: pointer;
}

.photographer-card.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition-delay: var(--card-delay, 0ms);
}

.photographer-card:hover {
    transform: translateY(-4px);
    border-color: rgba(80, 223, 219, 0.42);
    box-shadow: 0 22px 48px rgba(4, 9, 23, 0.6);
}

.card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.photographer-avatar {
    width: 92px;
    height: 92px;
    border-radius: 16px;
    object-fit: contain;
    background: rgba(7, 14, 28, 0.94);
    padding: 4px;
    border: 2px solid rgba(255, 255, 255, 0.25);
}

.experience-pill {
    border-radius: 999px;
    border: 1px solid rgba(80, 223, 219, 0.4);
    background: rgba(80, 223, 219, 0.12);
    color: #baf6d5;
    font-size: 0.8rem;
    padding: 6px 10px;
    white-space: nowrap;
}

.role-pill {
    margin: 11px 0 0;
    display: inline-flex;
    border-radius: 999px;
    border: 1px solid rgba(80, 223, 219, 0.36);
    background: linear-gradient(135deg, rgba(80, 223, 219, 0.12), rgba(15, 120, 110, 0.04));
    color: #baf6d5;
    font-size: 0.74rem;
    font-weight: 700;
    padding: 5px 9px;
}

.card-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.card-instagram {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 7px 0 0;
    color: #d7f8ff;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
}

.card-instagram:hover,
.card-instagram:focus-visible {
    color: #fff;
}

.instagram-icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
    align-items: center;
    justify-content: center;
    color: #f5c26b;
}

.instagram-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.modal-meta-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.modal-city-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    background: transparent;
    border: none;
    color: inherit;
    height: 100%;
}

.work-preview {
    object-fit: cover;
}

.photographer-card h3 {
    margin: 12px 0 2px;
    font-size: 1.12rem;
}

.card-cities {
    display: flex;
    gap: 8px;
    align-items: center;
}

.card-city {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 6px 10px;
    background: linear-gradient(135deg, rgba(255, 214, 102, 0.22), rgba(196, 146, 42, 0.24));
    border: 1px solid rgba(255, 209, 95, 0.35);
    color: #ffd66a;
    font-weight: 700;
    font-size: 0.82rem;
    line-height: 1;
}

.card-headline {
    margin: 9px 0 0;
    color: var(--photo-muted);
    line-height: 1.5;
    min-height: 66px;
    font-size: 0.92rem;
}

.chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 11px;
}

.chip {
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.06);
    color: #e6f1ff;
    font-size: 0.76rem;
    padding: 5px 9px;
}

.card-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: auto;
    padding-top: 14px;
}

.btn-open-work,
.btn-quick-quote,
.btn-devis,
.btn-outline {
    border: 0;
    border-radius: 12px;
    padding: 10px 12px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease;
}

.btn-open-work,
.btn-devis {
    color: #fff;
    background: linear-gradient(98deg, var(--photo-primary), var(--photo-secondary));
}

.btn-quick-quote {
    color: #dff6ff;
    border: 1px solid rgba(80, 223, 219, 0.38);
    background: rgba(80, 223, 219, 0.11);
}

.btn-outline {
    color: #e7f0ff;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.06);
}

.btn-open-work:hover,
.btn-quick-quote:hover,
.btn-devis:hover,
.btn-outline:hover,
.btn-open-work:focus-visible,
.btn-quick-quote:focus-visible,
.btn-devis:focus-visible,
.btn-outline:focus-visible {
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow: 0 12px 22px rgba(4, 9, 23, 0.4);
}

.photo-modal {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.photo-modal.is-open {
    display: flex;
    animation: modalFadeIn 0.24s ease both;
}

.photo-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(3, 8, 20, 0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.photo-modal__panel {
    position: relative;
    z-index: 1;
    width: min(1020px, 95vw);
    max-height: 90vh;
    overflow: auto;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: linear-gradient(145deg, rgba(9, 17, 34, 0.97), rgba(8, 14, 28, 0.96));
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.58);
    padding: 22px;
}

.photo-modal__close {
    position: static;
    transform: none;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.32);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    margin-left: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.photo-modal__head {
    display: grid;
    grid-template-columns: 110px 1fr auto;
    gap: 16px;
    align-items: center;
    position: relative;
}

.photo-modal__avatar {
    width: 110px;
    height: 110px;
    border-radius: 16px;
    object-fit: contain;
    background: rgba(7, 14, 28, 0.94);
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, 0.24);
}

.photo-modal__head-copy h2 {
    margin: 4px 0 8px;
    font-size: clamp(1.25rem, 2.7vw, 2rem);
}

.modal-city {
    margin: 4px 0 0;
    color: #b8d3ff;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.modal-role {
    margin: 0;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    color: rgba(186, 246, 213, 0.95);
    font-weight: 700;
}

.modal-headline {
    margin: 0;
    color: var(--photo-muted);
    line-height: 1.56;
}

.photo-modal__gallery {
    margin-top: 22px;
    display: block;
    gap: 16px;
}

.photo-modal__gallery h3 {
    margin: 40px 0 0; /* give space before the heading, none after */
    color: #e9f6ff;
}

.collab-events-block { margin-bottom: 12px; }
.collab-events-header { color: var(--photo-muted); font-weight:700; margin-bottom:8px; }
.collab-events-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.collab-item { padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.04); color:var(--photo-muted); margin-bottom:8px; }

.work-item {
    display: block;
    width: 100%;
    text-align: left;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    padding: 0;
    color: inherit;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 14px 24px rgba(4, 9, 23, 0.42);
    transition: transform 0.22s ease, border-color 0.22s ease;
    animation: workReveal 0.35s ease both;
    animation-delay: var(--work-delay, 0ms);
}

.work-item:hover,
.work-item:focus-visible {
    transform: translateY(-3px);
    border-color: rgba(80, 223, 219, 0.5);
}

.work-preview-wrap {
    position: relative;
}

.work-preview {
    border-radius: 14px;
    width: 100%;
    aspect-ratio: 16 / 11;
    object-fit: contain;
    display: block;
    background: rgba(8, 14, 28, 0.9);
}

.work-video-badge {
    position: absolute;
    right: 8px;
    bottom: 8px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.32);
    background: rgba(7, 14, 28, 0.78);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 4px 8px;
}

.work-copy {
    padding: 9px 10px 11px;
}

.work-copy p {
    margin: 0;
    font-size: 0.86rem;
    color: #f1f7ff;
    font-weight: 700;
}

.work-copy span {
    display: block;
    margin-top: 4px;
    color: var(--photo-muted);
    font-size: 0.78rem;
}

.photo-modal__actions {
    display: inline-flex;
    gap: 8px;
    margin-left: auto;
    align-items: center;
}

/* make actions and close smaller when space is tight */
.modal-meta-row .photo-modal__actions a,
.modal-meta-row .photo-modal__close {
    font-size: 0.84rem;
    padding: 6px 8px;
}

@media (max-width: 720px) {
    .modal-meta-row { flex-wrap: wrap; gap: 8px; }
    .modal-meta-row .photo-modal__actions { margin-left: 0; }
}

.media-lightbox {
    position: fixed;
    inset: 0;
    z-index: 15050;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.media-lightbox.is-open {
    display: flex;
    animation: modalFadeIn 0.22s ease both;
}

.media-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(3, 8, 20, 0.84);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.media-lightbox__panel {
    position: relative;
    z-index: 1;
    width: min(1120px, 96vw);
    max-height: 92vh;
    overflow: auto;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: linear-gradient(145deg, rgba(7, 14, 28, 0.98), rgba(6, 11, 22, 0.96));
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.62);
    padding: 16px;
}

.media-lightbox__close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.34);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 1.42rem;
    cursor: pointer;
    z-index: 2;
}

.media-lightbox__inner {
    min-height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 26px 14px 8px;
}

.media-lightbox__inner img,
.media-lightbox__inner video {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 72vh;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: #040b16;
}

.media-lightbox__inner video {
    width: min(100%, 980px);
}

.media-lightbox__caption {
    margin: 8px 0 0;
    text-align: center;
    color: var(--photo-muted);
    font-size: 0.9rem;
}

body.modal-open {
    overflow: hidden;
}

@media (max-width: 1180px) {
    .photo-listing {
        --team-card-width: clamp(268px, 35vw, 324px);
        --team-per-view: 3;
    }
}

@media (max-width: 980px) {
    body {
        background-attachment: scroll;
        animation: none;
    }

    .main-content {
        width: 100%;
        max-width: 100%;
        padding: 74px 12px 24px;
    }

    .photo-listing {
        --team-card-width: clamp(278px, 26vw, 336px);
        --team-per-view: 2;
    }

    .photographers-track {
        gap: 12px;
        padding: 6px 4px 12px;
    }

    .photographers-scroll-shell::before,
    .photographers-scroll-shell::after {
        width: 22px;
    }

    .photographer-card {
        padding: 13px;
    }
}

@media (max-width: 760px) {
    .photo-hero {
        padding: 18px 14px;
    }

    .hero-pills {
        gap: 6px;
    }

    .hero-pill {
        width: 100%;
        text-align: center;
    }

    .photo-listing-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .photo-listing {
        --team-card-width: min(88vw, 330px);
        --team-per-view: 1;
    }

    .photographers-scroll-shell::before,
    .photographers-scroll-shell::after {
        display: none;
    }

    .photographers-track {
        scroll-padding-inline: 0;
        padding-inline: 0;
    }

    .photographer-avatar {
        width: 84px;
        height: 84px;
    }

    .scroll-controls {
        width: 100%;
    }

    .scroll-btn {
        flex: 1;
        height: 36px;
    }

    .photo-modal {
        padding: 10px;
    }

    .photo-modal__panel {
        width: 96vw;
        max-height: 92vh;
        padding: 14px;
        border-radius: 16px;
    }

    .photo-modal__head {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .photo-modal__avatar {
        width: 88px;
        height: 88px;
        border-radius: 12px;
    }

    .photo-modal__gallery {
        grid-template-columns: 1fr;
    }

    .media-lightbox {
        padding: 10px;
    }

    .media-lightbox__panel {
        width: 96vw;
        max-height: 92vh;
        padding: 12px;
    }

    .media-lightbox__inner {
        padding-top: 22px;
    }

    .media-lightbox__inner img,
    .media-lightbox__inner video {
        max-height: 66vh;
    }
}

@media (max-width: 560px) {
    .main-content {
        padding: 72px 8px 20px;
    }

    .photo-listing {
        --team-card-width: 100%;
    }

    .photographers-track {
        grid-auto-columns: 100%;
        gap: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}

@keyframes photoAmbient {
    0%,
    100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

@keyframes floatGlowOne {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        transform: translate3d(8px, 10px, 0) scale(1.08);
    }
}

@keyframes floatGlowTwo {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        transform: translate3d(-12px, -10px, 0) scale(1.08);
    }
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes workReveal {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Modal carousel styles (portfolio / events / artists) */
.modal-carousel {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin: 10px 0 18px;
}
.modal-carousel-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.modal-carousel-prev,
.modal-carousel-next {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: linear-gradient(145deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.modal-carousel-prev:hover,
.modal-carousel-next:hover {
    transform: translateY(-2px);
    border-color: rgba(80,223,219,0.6);
    background: linear-gradient(145deg, rgba(80,223,219,0.12), rgba(74,122,255,0.06));
}

/* Event modal styles */
.event-modal {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.event-modal.is-hidden {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.event-modal h2 {
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    margin-bottom: 20px;
    text-align: center;
    letter-spacing: -0.02em;
}

.event-modal h3 {
    font-size: 1.1rem;
    margin-bottom: 15px;
    margin-top: 30px;
    color: #d7f8ff;
    font-weight: 700;
}

.event-modal h3:first-of-type {
    margin-top: 0;
}

.event-modal button[type="button"] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.event-modal button[type="button"]:focus {
    outline: 2px solid rgba(80, 223, 219, 0.6);
    outline-offset: 2px;
}
.modal-carousel-track {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 6px 4px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    flex: 1 1 auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.modal-carousel-track::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}
.modal-carousel-track > * {
    scroll-snap-align: start;
    flex: 0 0 calc((100% - 20px) / 3);
    max-width: calc((100% - 20px) / 3);
    box-sizing: border-box;
}
.modal-carousel-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.32);
    background: transparent;
    margin: 0 4px;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.modal-carousel-dot.is-active {
    background: linear-gradient(135deg, #52e6ff, #f8dd9c);
    border-color: transparent;
}
.modal-carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 10px 0 0;
}
.modal-carousel-track img,
.modal-carousel-track video {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}
.modal-carousel .work-copy p {
    margin: 6px 0 0;
    font-size: 0.85rem;
}
.modal-carousel .work-copy span {
    display: block;
    font-size: 0.72rem;
    color: var(--photo-muted);
}

/* scrollbar style for carousel track */
.modal-carousel-track::-webkit-scrollbar { height: 8px; }
.modal-carousel-track::-webkit-scrollbar-thumb { background: linear-gradient(90deg, rgba(80,223,219,0.8), rgba(74,122,255,0.8)); border-radius: 999px; }

/* Responsive adjustments */
@media (max-width: 900px) {
    .modal-carousel-prev, .modal-carousel-next { width: 36px; height: 36px; }
    /* show 2 items per view on tablet */
    .modal-carousel-track > * { flex: 0 0 calc((100% - 10px) / 2); max-width: calc((100% - 10px) / 2); }
    .modal-carousel-track img, .modal-carousel-track video { height: 120px; }
}

@media (max-width: 520px) {
    .modal-carousel { gap: 8px; }
    .modal-carousel-prev, .modal-carousel-next { width: 32px; height: 32px; }
    /* single column on small screens */
    .modal-carousel-track > * { flex: 0 0 100%; max-width: 100%; }
    .modal-carousel-track img, .modal-carousel-track video { height: 96px; }
}

/* Artist-specific layout: 5 per row, circular avatars */
.modal-carousel-track.artists > * {
    flex: 0 0 calc((100% - 36px) / 6);
    max-width: calc((100% - 36px) / 6);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.modal-carousel-track.artists img.artist-card-img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 9999px;
    border: 2px solid rgba(255,255,255,0.12);
}
.artist-card {
    background: transparent;
    border: none;
    color: var(--photo-text);
    text-decoration: none;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.artist-card-label {
    font-size: 0.78rem;
    text-align: center;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .modal-carousel-track.artists > * { flex: 0 0 calc((100% - 10px) / 4); max-width: calc((100% - 10px) / 4); }
}

@media (max-width: 520px) {
    .modal-carousel-track.artists > * { flex: 0 0 calc((100% - 8px) / 3); max-width: calc((100% - 8px) / 3); }
    .modal-carousel-track.artists img.artist-card-img { width: 72px; height: 72px; }
}

/* city pills in modal */
.modal-city-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0 12px;
    margin-right: 6px;
    margin-bottom: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(255,214,102,0.98), rgba(196,146,42,0.98));
    border: 1px solid rgba(196,146,42,0.9);
    color: #241700;
    font-weight: 800;
    font-size: 0.82rem;
}

/* role pill styling */
.modal-role {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    margin-left: 6px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(79,226,153,0.14), rgba(38,198,147,0.18));
    border: 1px solid rgba(79,226,153,0.28);
    color: #dffef0;
    font-weight: 800;
    font-size: 0.8rem;
}

/* TV RAP teams immersive redesign 2026 */
body{--team-mint:#58f4d7;--team-violet:#c84dff;--team-blue:#667cff;background:radial-gradient(900px 620px at 8% 18%,rgba(48,204,210,.12),transparent 68%),radial-gradient(820px 700px at 96% 10%,rgba(129,66,255,.15),transparent 70%),linear-gradient(155deg,#050914 0,#071020 48%,#09091a 100%)}
.main-content{width:min(1380px,calc(100% - 48px));padding-top:112px}.photo-hero{min-height:500px;display:flex;flex-direction:column;justify-content:center;padding:clamp(34px,5vw,72px);border-radius:36px;border-color:rgba(142,165,220,.2);background:linear-gradient(115deg,rgba(8,19,38,.96),rgba(8,16,34,.9) 54%,rgba(33,17,61,.82));box-shadow:0 40px 110px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.04);isolation:isolate}.photo-hero::before{width:420px;height:420px;left:-180px;top:-190px;background:rgba(54,225,211,.2);filter:blur(68px)}.photo-hero::after{width:520px;height:520px;right:-170px;bottom:-280px;background:rgba(194,60,255,.22);filter:blur(75px)}
.team-hero-grid{position:absolute!important;inset:0;z-index:0!important;opacity:.12;background-image:linear-gradient(rgba(139,164,218,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(139,164,218,.22) 1px,transparent 1px);background-size:54px 54px;mask-image:linear-gradient(90deg,transparent,#000 40%,#000);pointer-events:none}.team-hero-orbit{position:absolute!important;z-index:0!important;right:8%;top:18%;width:240px;aspect-ratio:1;border:1px solid rgba(111,238,229,.16);border-radius:50%;pointer-events:none;animation:teamOrbit 16s linear infinite}.team-hero-orbit::after{content:"";position:absolute;left:20px;top:34px;width:9px;height:9px;border-radius:50%;background:var(--team-mint);box-shadow:0 0 22px var(--team-mint)}.team-hero-orbit.orbit-two{width:154px;right:11%;top:27%;border-color:rgba(203,77,255,.24);animation-direction:reverse;animation-duration:11s}.team-hero-orbit.orbit-two::after{background:var(--team-violet);box-shadow:0 0 22px var(--team-violet)}
.photo-kicker{width:fit-content;padding:8px 12px;border:1px solid rgba(88,244,215,.25);border-radius:999px;background:rgba(88,244,215,.07);color:#8ffbe7;font-weight:800;letter-spacing:.2em}.photo-hero h1{max-width:820px;margin:20px 0 18px;font-size:clamp(2.7rem,6.4vw,6.4rem);line-height:.92;letter-spacing:-.065em;text-shadow:0 12px 48px rgba(0,0,0,.32)}.photo-hero h1 span{color:transparent;background:linear-gradient(90deg,#59f3dc,#7c94ff 48%,#d663ff);-webkit-background-clip:text;background-clip:text}.photo-subtitle{max-width:680px;color:rgba(229,238,255,.76);font-size:clamp(1rem,1.35vw,1.17rem);line-height:1.75}
.team-hero-metrics{display:flex;align-items:stretch;flex-wrap:wrap;gap:10px;margin-top:30px}.team-metric{min-width:104px;padding:12px 17px;border:1px solid rgba(154,178,224,.16);border-radius:16px;background:rgba(255,255,255,.035);backdrop-filter:blur(12px)}.team-metric strong,.team-metric span{display:block}.team-metric strong{font-size:1.25rem}.team-metric span{margin-top:2px;color:#94a5c8;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em}.team-hero-cta{display:inline-flex;align-items:center;gap:18px;margin-left:4px;padding:0 21px;border-radius:16px;color:#06131c;background:linear-gradient(135deg,#68f6db,#7ab7ff);font-weight:900;text-decoration:none;box-shadow:0 14px 34px rgba(79,222,213,.18);transition:.25s}.team-hero-cta:hover{transform:translateY(-3px);filter:brightness(1.08);box-shadow:0 20px 42px rgba(79,222,213,.27)}.team-hero-cta span{animation:teamArrow 1.5s ease-in-out infinite}
.team-filters{margin-top:34px;padding-top:22px;border-top:1px solid rgba(150,174,220,.12)}.team-filter-row{gap:9px}.team-filter-button{padding:10px 16px;border-color:rgba(157,179,221,.18);background:rgba(7,14,29,.48);color:#c9d5ed;backdrop-filter:blur(10px)}.team-filter-button:hover{transform:translateY(-2px);box-shadow:0 9px 24px rgba(0,0,0,.2)}
.photo-listing{position:relative;margin-block:76px;padding:clamp(20px,3vw,34px);border:1px solid rgba(151,174,222,.16);border-radius:32px;background:linear-gradient(145deg,rgba(8,15,30,.6),rgba(9,13,27,.35));box-shadow:0 28px 80px rgba(0,0,0,.22)}.photo-listing::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;background:radial-gradient(480px circle at var(--section-x,50%) 0,rgba(94,236,221,.1),transparent 65%);pointer-events:none}.photo-listing-head{margin-bottom:24px}.section-kicker{color:#6cf4df;letter-spacing:.18em}.photo-listing-head h2{font-size:clamp(1.55rem,2.6vw,2.35rem);letter-spacing:-.035em}.section-count{display:inline-grid;place-items:center;min-width:29px;height:29px;margin-left:7px;border:1px solid rgba(99,239,217,.25);border-radius:50%;color:#7af4e0;font-size:.72rem;vertical-align:middle}
.photographers-track{gap:20px;padding:7px 7px 18px}.photographer-card{--mx:50%;--my:30%;position:relative;overflow:hidden;min-height:460px;padding:20px;border-radius:24px;border-color:rgba(150,174,219,.17);background:radial-gradient(360px circle at var(--mx) var(--my),rgba(94,228,217,.11),transparent 55%),linear-gradient(155deg,rgba(13,24,46,.94),rgba(7,13,28,.96));box-shadow:0 18px 48px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.035);transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .4s}.photographer-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,rgba(96,246,219,.55),transparent 36%,transparent 66%,rgba(196,79,255,.5));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .35s;pointer-events:none}.photographer-card:hover{transform:translateY(-9px) scale(1.008);border-color:rgba(98,238,218,.33);box-shadow:0 30px 70px rgba(0,0,0,.4),0 0 45px rgba(91,226,213,.06)}.photographer-card:hover::before{opacity:1}.photographer-avatar{width:108px;height:108px;padding:5px;border-radius:23px;border:1px solid rgba(202,217,244,.25);box-shadow:0 16px 34px rgba(0,0,0,.34);transition:transform .45s cubic-bezier(.2,.8,.2,1),filter .35s}.photographer-card:hover .photographer-avatar{transform:scale(1.055) rotate(-1.5deg);filter:saturate(1.08) brightness(1.06)}.photographer-card h3{margin-top:22px;font-size:1.35rem;letter-spacing:-.02em}.card-headline{color:rgba(218,229,249,.78);line-height:1.62}.chip{background:rgba(255,255,255,.035);border-color:rgba(165,185,222,.18);color:#cfdaee}.role-pill{color:#77f5df;border-color:rgba(88,244,215,.25);background:rgba(88,244,215,.07)}.card-city{color:#ffd86c;background:rgba(255,202,67,.09);border-color:rgba(255,202,67,.26)}.card-actions{gap:10px;margin-top:auto;padding-top:22px}.btn-open-work,.btn-quick-quote{min-height:46px;border-radius:13px;font-weight:850;transition:.24s}.btn-open-work{background:linear-gradient(135deg,#617fff,#c94ce8);box-shadow:0 12px 28px rgba(103,91,242,.2)}.btn-quick-quote{background:rgba(255,255,255,.045);border-color:rgba(170,190,228,.2)}.btn-open-work:hover,.btn-quick-quote:hover{transform:translateY(-3px);filter:brightness(1.08)}.scroll-btn{width:44px;height:44px;border-color:rgba(151,176,220,.2);background:rgba(255,255,255,.04);backdrop-filter:blur(12px)}.team-sort-button{color:#bdcbe5;border-color:rgba(151,176,220,.18);background:rgba(255,255,255,.03)}
@keyframes teamOrbit{to{transform:rotate(360deg)}}@keyframes teamArrow{0%,100%{transform:translateY(-2px)}50%{transform:translateY(4px)}}
@media(max-width:840px){.main-content{width:min(100% - 24px,1380px);padding-top:86px}.photo-hero{min-height:auto;padding:30px 22px;border-radius:27px}.photo-hero h1{font-size:clamp(2.45rem,14vw,4.4rem)}.team-hero-orbit{opacity:.34;right:-70px}.team-hero-cta{min-height:62px;margin:0}.photo-listing{margin-block:38px;padding:20px 12px;border-radius:25px}.photo-listing-head{flex-direction:column}.section-actions{width:100%;align-items:stretch}.scroll-controls,.team-sort-controls{justify-content:flex-start}.photographer-card{min-height:440px}}@media(max-width:540px){.team-hero-metrics{display:grid;grid-template-columns:repeat(3,1fr)}.team-metric{min-width:0;padding:10px;text-align:center}.team-hero-cta{grid-column:1/-1;justify-content:center}.team-filter-row{flex-wrap:nowrap;overflow-x:auto;padding-bottom:5px;scrollbar-width:none}.team-filter-row::-webkit-scrollbar{display:none}.team-filter-button{flex:0 0 auto}}@media(prefers-reduced-motion:reduce){.team-hero-orbit,.team-hero-cta span{animation:none!important}.photographer-card,.photographer-avatar{transition-duration:.01ms!important}}
/* mobile overflow guard */
.photo-hero>*{min-width:0;max-width:100%}.photo-hero h1 span{display:inline-block;max-width:100%}
@media(max-width:540px){.photo-hero{overflow:hidden}.photo-hero h1{font-size:clamp(2.25rem,13vw,3.2rem);line-height:.94;letter-spacing:-.055em;overflow-wrap:normal}.photo-hero h1 span{display:block;font-size:.84em;white-space:normal}.team-hero-metrics{width:100%;grid-template-columns:repeat(3,minmax(0,1fr))}.team-metric span{font-size:.62rem}.photo-subtitle{font-size:.93rem;line-height:1.65}.main-content{overflow-x:clip;overflow-y:visible}}
/* compact proportions refinement */
.photo-hero{min-height:390px;padding:clamp(30px,4vw,52px)}.photo-hero h1{font-size:clamp(2.35rem,5vw,4.9rem);line-height:.94;letter-spacing:-.055em}.photo-subtitle{font-size:clamp(.94rem,1.15vw,1.06rem);line-height:1.65}.team-hero-metrics{margin-top:22px}.team-filters{margin-top:24px;padding-top:17px}.photo-listing{margin-block:48px;padding:clamp(17px,2.25vw,26px)}.photo-listing-head{margin-bottom:17px}.photo-listing-head h2{font-size:clamp(1.35rem,2vw,1.9rem)}.section-subtitle{font-size:.88rem}.photographer-card{min-height:370px;padding:16px}.photographer-avatar{width:88px;height:88px;border-radius:19px}.photographer-card h3{margin-top:15px;font-size:1.16rem}.card-headline{font-size:.88rem;line-height:1.48;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.chip{font-size:.72rem;padding:5px 8px}.card-actions{padding-top:15px}.btn-open-work,.btn-quick-quote{min-height:42px;font-size:.82rem}.team-pagination[hidden]{display:none!important}
@media(max-width:840px){.photo-hero{padding:26px 20px}.photo-listing{margin-block:28px;padding:16px 10px}.photographer-card{min-height:350px}.photo-hero h1{font-size:clamp(2.15rem,11.5vw,3.35rem)}}
/* prevent carousel clipping during card hover */
.photographers-track{padding-top:12px}.photographer-card:hover{transform:translateY(-4px);}.photographer-card:focus-within{transform:translateY(-4px);border-color:rgba(98,238,218,.33);box-shadow:0 26px 62px rgba(0,0,0,.38),0 0 40px rgba(91,226,213,.06)}
@media(max-width:840px){.photographer-card:hover,.photographer-card:focus-within{transform:translateY(-2px)}}
/* Immersive portfolio modal redesign */
.photo-modal{padding:clamp(10px,2vw,24px)}.photo-modal__backdrop{background:radial-gradient(circle at 20% 15%,rgba(61,111,170,.18),transparent 38%),rgba(2,6,16,.86);backdrop-filter:blur(16px) saturate(1.15)}.photo-modal__panel{width:min(1160px,96vw);max-height:92vh;padding:0;border-radius:30px;border:1px solid rgba(137,169,224,.22);background:linear-gradient(155deg,rgba(8,18,37,.985),rgba(12,8,28,.985));box-shadow:0 50px 140px rgba(0,0,0,.7),0 0 80px rgba(91,94,220,.1);scrollbar-width:thin;scrollbar-color:rgba(110,143,207,.42) transparent}.photo-modal__panel::-webkit-scrollbar{width:8px}.photo-modal__panel::-webkit-scrollbar-thumb{border-radius:99px;background:linear-gradient(#59e7d4,#8c65ed)}
.photo-modal__head{grid-template-columns:124px 1fr;gap:22px;padding:26px 28px;border-bottom:1px solid rgba(148,174,221,.13);background:radial-gradient(520px circle at 8% 0,rgba(66,224,211,.12),transparent 70%),rgba(8,15,31,.75);position:sticky;top:0;z-index:12;backdrop-filter:blur(22px)}.photo-modal__avatar{width:124px;height:124px;border-radius:25px;border:1px solid rgba(133,236,221,.28);box-shadow:0 18px 42px rgba(0,0,0,.36)}.photo-modal__head-copy h2{font-size:clamp(1.55rem,3vw,2.45rem);letter-spacing:-.035em}.modal-headline{max-width:790px;font-size:.92rem;line-height:1.6}.photo-modal__close{transition:transform .25s,background .25s,border-color .25s}.photo-modal__close:hover{transform:rotate(90deg);background:rgba(204,79,255,.18);border-color:rgba(204,79,255,.45)}
.photo-modal__gallery{display:flex;flex-direction:column;gap:22px;margin:0;padding:28px}.portfolio-media-section{position:relative;padding:22px;border:1px solid rgba(146,172,220,.14);border-radius:25px;background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.015));overflow:hidden}.portfolio-media-section::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,var(--portfolio-accent,#58f4d7),transparent);opacity:.65}.portfolio-media-section--videos{--portfolio-accent:#c95aff}.portfolio-section-head{display:flex;align-items:center;gap:10px;margin-bottom:16px}.portfolio-section-head h3,.photo-modal__gallery .portfolio-section-head h3{margin:0;font-size:1.12rem;letter-spacing:.01em}.portfolio-section-head h3::before{content:"";display:inline-block;width:8px;height:8px;margin-right:10px;border-radius:50%;background:var(--portfolio-accent,#58f4d7);box-shadow:0 0 16px var(--portfolio-accent,#58f4d7)}.portfolio-section-count{display:grid;place-items:center;min-width:26px;height:26px;padding:0 7px;border-radius:99px;background:rgba(255,255,255,.055);border:1px solid rgba(167,188,225,.15);color:#b9c8e4;font-size:.72rem;font-weight:800}
.portfolio-media-section .modal-carousel{margin:0}.portfolio-media-section .work-item{border-radius:18px;background:rgba(5,12,25,.72);border-color:rgba(147,174,220,.15);box-shadow:0 14px 35px rgba(0,0,0,.25)}.portfolio-media-section .work-preview{height:190px;aspect-ratio:auto;object-fit:cover;border-radius:17px 17px 0 0;transition:transform .45s,filter .35s}.portfolio-media-section .work-item:hover .work-preview{transform:scale(1.045);filter:brightness(1.08) saturate(1.08)}.portfolio-media-section .work-preview-wrap{overflow:hidden}.portfolio-empty{margin:0;padding:24px;border:1px dashed rgba(155,179,219,.2);border-radius:17px;color:#8496b8;text-align:center;background:rgba(255,255,255,.018)}
.photo-modal__gallery>.portfolio-artists-title{margin:8px 0 -8px;padding-top:24px;border-top:1px solid rgba(148,174,221,.12);font-size:1.15rem}.photo-modal__gallery>.portfolio-artists-title::before{content:"";display:inline-block;width:8px;height:8px;margin-right:10px;border-radius:50%;background:#ffcf65;box-shadow:0 0 16px #ffcf65}.portfolio-artists-carousel{padding:18px 12px;border:1px solid rgba(255,207,101,.13);border-radius:24px;background:radial-gradient(450px circle at 15% 0,rgba(255,196,75,.07),transparent 65%),rgba(255,255,255,.018)}.modal-carousel-track.artists{gap:14px!important;padding:8px 3px 14px!important}.modal-carousel-track.artists>*{flex:0 0 calc((100% - 70px)/6);max-width:calc((100% - 70px)/6)}.artist-card{min-width:0;padding:12px 8px;border:1px solid transparent;border-radius:19px;transition:transform .3s,background .3s,border-color .3s}.artist-card:hover{transform:translateY(-5px);background:rgba(255,255,255,.045);border-color:rgba(255,210,105,.18)}.modal-carousel-track.artists img.artist-card-img{width:94px;height:94px;border:2px solid rgba(255,213,113,.25);box-shadow:0 12px 28px rgba(0,0,0,.32);transition:transform .35s,box-shadow .35s}.artist-card:hover img.artist-card-img{transform:scale(1.06);box-shadow:0 16px 36px rgba(0,0,0,.42),0 0 24px rgba(255,205,92,.1)}.artist-card-label{max-width:100%;white-space:normal;line-height:1.25}.artist-card-name,.artist-card-count{display:block}.artist-card-name{overflow:hidden;color:#f3f7ff;font-size:.82rem;text-overflow:ellipsis;white-space:nowrap}.artist-card-count{margin-top:4px;color:#ffce69;font-size:.66rem;font-weight:750;text-transform:uppercase;letter-spacing:.05em}.portfolio-empty--artists{margin-top:8px}
@media(max-width:760px){.photo-modal__panel{width:98vw;border-radius:22px}.photo-modal__head{position:relative;grid-template-columns:76px 1fr;padding:18px 16px;gap:13px}.photo-modal__avatar{width:76px;height:76px;border-radius:18px}.modal-meta-row{grid-column:1/-1}.photo-modal__gallery{padding:16px;gap:16px}.portfolio-media-section{padding:15px;border-radius:20px}.portfolio-media-section .work-preview{height:180px}.modal-carousel-track.artists>*{flex-basis:calc((100% - 28px)/3);max-width:calc((100% - 28px)/3)}.modal-carousel-track.artists img.artist-card-img{width:72px;height:72px}.photo-modal__actions{width:100%;flex-wrap:wrap}.photo-modal__actions a{flex:1;text-align:center}}
@media(prefers-reduced-motion:reduce){.photo-modal__close,.artist-card,.artist-card-img,.work-preview{transition:none!important}}
/* filtered cards must override the card display declaration */
.js-team-card[hidden],.photo-listing[hidden]{display:none!important}

/* Cinematic media viewer redesign */
.media-lightbox{--lightbox-accent:#59f1db;padding:clamp(10px,2vw,26px);perspective:1400px}.media-lightbox.is-video{--lightbox-accent:#c85cff}.media-lightbox__backdrop{background:radial-gradient(800px circle at 15% 12%,color-mix(in srgb,var(--lightbox-accent) 14%,transparent),transparent 62%),radial-gradient(700px circle at 88% 86%,rgba(99,76,220,.15),transparent 65%),rgba(1,4,12,.92);backdrop-filter:blur(22px) saturate(1.25);opacity:0;transition:opacity .45s ease}.media-lightbox.is-open .media-lightbox__backdrop{opacity:1}.media-lightbox__backdrop::after{content:"";position:absolute;inset:0;opacity:.13;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:52px 52px;mask-image:radial-gradient(circle,#000,transparent 78%)}
.media-lightbox__panel{width:min(1240px,96vw);max-height:94vh;padding:18px;border-radius:28px;overflow:hidden;border:1px solid color-mix(in srgb,var(--lightbox-accent) 28%,rgba(255,255,255,.14));background:linear-gradient(150deg,rgba(9,17,34,.97),rgba(6,9,20,.985));box-shadow:0 60px 160px rgba(0,0,0,.78),0 0 80px color-mix(in srgb,var(--lightbox-accent) 9%,transparent),inset 0 1px rgba(255,255,255,.055);opacity:0;transform:translateY(28px) scale(.94) rotateX(2deg);transition:opacity .38s ease,transform .55s cubic-bezier(.18,.85,.25,1)}.media-lightbox.is-open .media-lightbox__panel{opacity:1;transform:none}.media-lightbox__panel::before{content:"PHOTO";position:absolute;z-index:3;top:20px;left:22px;padding:7px 11px;border:1px solid color-mix(in srgb,var(--lightbox-accent) 32%,transparent);border-radius:999px;background:rgba(4,10,22,.62);color:var(--lightbox-accent);font-size:.65rem;font-weight:900;letter-spacing:.18em;backdrop-filter:blur(12px)}.media-lightbox.is-video .media-lightbox__panel::before{content:"VIDÉO"}.media-lightbox__panel::after{content:"";position:absolute;z-index:-1;width:420px;height:420px;right:-180px;bottom:-220px;border-radius:50%;background:var(--lightbox-accent);filter:blur(110px);opacity:.12;pointer-events:none}
.media-lightbox__close{top:18px;right:18px;width:44px;height:44px;border:1px solid rgba(255,255,255,.2);background:rgba(5,11,24,.65);font-size:1.65rem;line-height:1;backdrop-filter:blur(14px);box-shadow:0 10px 28px rgba(0,0,0,.25);transition:transform .3s cubic-bezier(.2,.8,.2,1),background .25s,border-color .25s,box-shadow .25s}.media-lightbox__close:hover,.media-lightbox__close:focus-visible{transform:rotate(90deg) scale(1.08);background:color-mix(in srgb,var(--lightbox-accent) 20%,rgba(5,11,24,.8));border-color:color-mix(in srgb,var(--lightbox-accent) 55%,transparent);box-shadow:0 0 28px color-mix(in srgb,var(--lightbox-accent) 20%,transparent)}
.media-lightbox__inner{position:relative;min-height:min(68vh,620px);padding:38px 8px 8px;border-radius:20px;overflow:hidden;background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.035),transparent 58%),rgba(2,7,16,.74)}.media-lightbox__inner::before{content:"";position:absolute;left:50%;top:50%;z-index:0;width:48px;height:48px;margin:-24px;border:3px solid rgba(255,255,255,.1);border-top-color:var(--lightbox-accent);border-radius:50%;opacity:0;animation:lightboxSpin .75s linear infinite;transition:opacity .2s}.media-lightbox.is-loading .media-lightbox__inner::before{opacity:1}.media-lightbox__inner img,.media-lightbox__inner video{position:relative;z-index:1;max-height:76vh;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:#020711;box-shadow:0 28px 70px rgba(0,0,0,.56);opacity:0;transform:scale(.965);filter:saturate(.9);transition:opacity .5s ease,transform .65s cubic-bezier(.2,.8,.2,1),filter .55s ease}.media-lightbox.is-loaded .media-lightbox__inner img,.media-lightbox.is-loaded .media-lightbox__inner video{opacity:1;transform:scale(1);filter:saturate(1)}.media-lightbox__inner img{object-fit:contain}.media-lightbox__inner video{width:min(100%,1100px);outline:none}.media-lightbox__caption{position:relative;margin:14px auto 2px;width:fit-content;max-width:min(760px,90%);padding:9px 15px;border:1px solid rgba(155,180,224,.13);border-radius:999px;background:rgba(255,255,255,.035);color:#c8d5eb;font-size:.82rem;line-height:1.35;white-space:normal}.media-lightbox__caption:empty{display:none}
@keyframes lightboxSpin{to{transform:rotate(360deg)}}
@media(max-width:700px){.media-lightbox{padding:7px}.media-lightbox__panel{width:100%;max-height:96vh;padding:9px;border-radius:20px}.media-lightbox__panel::before{top:13px;left:13px;font-size:.58rem}.media-lightbox__close{top:10px;right:10px;width:40px;height:40px}.media-lightbox__inner{min-height:52vh;padding:48px 4px 4px;border-radius:15px}.media-lightbox__inner img,.media-lightbox__inner video{max-height:72vh;border-radius:12px}.media-lightbox__caption{margin-top:9px;font-size:.74rem;padding:7px 11px}}
@media(prefers-reduced-motion:reduce){.media-lightbox__panel,.media-lightbox__backdrop,.media-lightbox__inner img,.media-lightbox__inner video,.media-lightbox__close{transition:none!important}.media-lightbox__inner::before{animation-duration:1.4s}}

/* Mobile page scrolling: horizontal carousels must never trap vertical gestures. */
.team-page-spacer {
    min-width: 0;
    visibility: hidden;
    pointer-events: none;
    user-select: none;
}

@media (max-width: 840px) {
    html,
    body:not(.modal-open) {
        height: auto;
        min-height: 100%;
        overflow-y: auto;
        overscroll-behavior-y: auto;
        touch-action: pan-x pan-y pinch-zoom;
    }

    body { background-attachment: scroll; }

    .main-content {
        overflow-x: clip;
        overflow-y: visible;
        touch-action: pan-x pan-y pinch-zoom;
    }

    .photographers-track,
    .team-filter-row,
    .modal-carousel-track {
        touch-action: pan-x pan-y pinch-zoom;
    }
}

/* Portfolio talent — mobile-first full-screen composition. */
@media (max-width: 760px) {
    .photo-modal {
        align-items: stretch;
        justify-content: stretch;
        padding: 0;
    }

    .photo-modal__backdrop {
        background: rgba(1, 5, 14, .94);
        backdrop-filter: blur(22px) saturate(1.2);
    }

    .photo-modal__panel {
        width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        overscroll-behavior: contain;
        scroll-behavior: smooth;
        background:
            radial-gradient(460px circle at 0 0, rgba(80, 223, 219, .12), transparent 68%),
            radial-gradient(480px circle at 100% 42%, rgba(192, 67, 229, .11), transparent 70%),
            linear-gradient(160deg, #071021, #09081a);
        animation: mobilePortfolioIn .46s cubic-bezier(.2, .82, .2, 1) both;
    }

    .photo-modal__head {
        position: relative;
        top: auto;
        z-index: 2;
        display: grid;
        grid-template-columns: 78px minmax(0, 1fr);
        grid-auto-rows: min-content;
        align-items: start;
        gap: 7px 13px;
        padding: max(18px, env(safe-area-inset-top)) 14px 17px;
        border-bottom: 1px solid rgba(148, 174, 221, .13);
        background: linear-gradient(180deg, rgba(9, 19, 38, .98), rgba(7, 15, 31, .9));
        backdrop-filter: none;
    }

    .photo-modal__head::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: -1px;
        left: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(80,223,219,.62), rgba(192,67,229,.48), transparent);
        pointer-events: none;
    }

    .photo-modal__head-copy,
    .modal-meta-row {
        display: contents;
    }

    .photo-modal__avatar {
        grid-column: 1;
        grid-row: 1 / span 3;
        width: 78px;
        height: 78px;
        padding: 3px;
        border-radius: 19px;
        object-fit: cover;
        border-color: rgba(80, 223, 219, .34);
        box-shadow: 0 14px 32px rgba(0,0,0,.38), 0 0 24px rgba(80,223,219,.08);
    }

    .photo-modal__head-copy h2 {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
        margin: 2px 42px 0 0;
        overflow: hidden;
        color: #f7fbff;
        font-size: clamp(1.35rem, 7vw, 2rem);
        line-height: 1.02;
        letter-spacing: -.04em;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .modal-city-badge {
        grid-column: 2;
        grid-row: 2;
        min-width: 0;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .modal-city-badge::-webkit-scrollbar { display: none; }

    .modal-city-pill {
        flex: 0 0 auto;
        height: 27px;
        margin: 0 5px 0 0;
        padding: 0 9px;
        font-size: .68rem;
    }

    .modal-role {
        grid-column: 2;
        grid-row: 3;
        justify-self: start;
        min-height: 26px;
        margin: 0;
        padding: 5px 9px;
        font-size: .65rem;
    }

    .photo-modal__close {
        position: absolute;
        top: max(14px, env(safe-area-inset-top));
        right: 12px;
        z-index: 4;
        width: 38px;
        height: 38px;
        margin: 0;
        padding: 0;
        border-color: rgba(167, 188, 225, .25);
        background: rgba(5, 12, 26, .7);
        font-size: 1.25rem;
        backdrop-filter: blur(12px);
        box-shadow: 0 10px 24px rgba(0,0,0,.3);
    }

    .modal-headline {
        grid-column: 1 / -1;
        grid-row: 4;
        margin-top: 9px;
        padding: 12px 13px;
        border: 1px solid rgba(151, 176, 220, .12);
        border-radius: 14px;
        background: rgba(255,255,255,.025);
        color: #afbed7;
        font-size: .82rem;
        line-height: 1.52;
    }

    .photo-modal__head .chip-list {
        grid-column: 1 / -1;
        grid-row: 5;
        flex-wrap: nowrap;
        width: 100%;
        margin-top: 3px;
        padding: 2px 0 5px;
        overflow-x: auto;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
    }

    .photo-modal__head .chip-list::-webkit-scrollbar { display: none; }
    .photo-modal__head .chip { flex: 0 0 auto; scroll-snap-align: start; }

    .photo-modal__actions {
        grid-column: 1 / -1;
        grid-row: 6;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        margin: 5px 0 0;
        gap: 8px;
    }

    .modal-meta-row .photo-modal__actions a {
        display: grid;
        place-items: center;
        min-height: 43px;
        padding: 8px 10px;
        border-radius: 12px;
        font-size: .75rem;
        line-height: 1.2;
        text-align: center;
    }

    .photo-modal__gallery {
        gap: 14px;
        margin: 0;
        padding: 15px 10px calc(28px + env(safe-area-inset-bottom));
    }

    .portfolio-media-section {
        padding: 12px 9px 14px;
        border-radius: 19px;
        overflow: visible;
        background: linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
        animation: mobilePortfolioSectionIn .45s cubic-bezier(.2,.82,.2,1) both;
    }

    .portfolio-media-section:nth-child(2) { animation-delay: .07s; }

    .portfolio-section-head {
        margin: 0 3px 10px;
    }

    .portfolio-section-head h3,
    .photo-modal__gallery .portfolio-section-head h3 {
        font-size: .95rem;
    }

    .portfolio-media-section .modal-carousel { gap: 9px; }

    .portfolio-media-section .modal-carousel-row {
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr) 34px;
        gap: 5px;
        align-items: center;
    }

    .portfolio-media-section .modal-carousel-prev,
    .portfolio-media-section .modal-carousel-next {
        width: 34px;
        height: 34px;
        font-size: .8rem;
        background: rgba(7, 15, 31, .82);
        backdrop-filter: blur(10px);
    }

    .portfolio-media-section .modal-carousel-track {
        min-width: 0;
        gap: 8px !important;
        padding: 8px 2px 12px !important;
    }

    .portfolio-media-section .modal-carousel-track > * {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .portfolio-media-section .work-item {
        border-radius: 16px;
        box-shadow: 0 13px 30px rgba(0,0,0,.31);
    }

    .portfolio-media-section .work-preview {
        height: min(61vw, 245px);
        border-radius: 15px 15px 0 0;
    }

    .work-copy { padding: 9px 11px 10px; }
    .work-copy p { font-size: .8rem; }
    .work-copy span { margin-top: 2px; font-size: .68rem; }

    .modal-carousel-dots { gap: 5px; }
    .modal-carousel-dot { width: 7px; height: 7px; margin: 0 2px; }
    .modal-carousel-dot.is-active { width: 23px; }

    .photo-modal__gallery > .portfolio-artists-title {
        margin: 2px 2px -3px;
        padding-top: 17px;
        font-size: .98rem;
    }

    .portfolio-artists-carousel {
        padding: 12px 7px;
        border-radius: 19px;
    }

    .portfolio-artists-carousel .modal-carousel-row {
        gap: 4px;
    }

    .portfolio-artists-carousel .modal-carousel-prev,
    .portfolio-artists-carousel .modal-carousel-next {
        width: 31px;
        height: 31px;
    }

    .modal-carousel-track.artists {
        gap: 8px !important;
        padding: 7px 1px 11px !important;
    }

    .modal-carousel-track.artists > * {
        flex-basis: calc((100% - 16px) / 3);
        max-width: calc((100% - 16px) / 3);
        padding: 8px 3px;
    }

    .modal-carousel-track.artists img.artist-card-img {
        width: 62px;
        height: 62px;
    }

    .artist-card-name { font-size: .7rem; }
    .artist-card-count { font-size: .58rem; }
    .portfolio-empty { padding: 17px 13px; font-size: .8rem; }
}

@media (max-width: 420px) {
    .photo-modal__actions { grid-template-columns: 1fr; }
    .photo-modal__head-copy h2 { font-size: 1.35rem; }
    .modal-headline { font-size: .78rem; }
}

@keyframes mobilePortfolioIn {
    from { opacity: 0; transform: translateY(28px) scale(.985); }
}

@keyframes mobilePortfolioSectionIn {
    from { opacity: 0; transform: translateY(14px); }
}
/* Smart artist face crop for photo and video thumbnails */
.work-preview.is-smart-cropped{object-fit:cover!important;object-position:50% 32%;transition:transform .45s ease,filter .35s ease,object-position .35s ease}.work-preview.has-face-focus{object-position:var(--face-x,50%) var(--face-y,32%)!important}.work-preview-wrap{background:radial-gradient(circle at 50% 30%,rgba(104,234,216,.08),transparent 62%),#050b16}
/* Artist pages show only their own items, without fillers from the previous page */
.modal-carousel-track.artists>.modal-carousel-item[hidden]{display:none!important}

/* Smooth artist carousel page transitions */
.modal-carousel-track.artists{will-change:transform,opacity}.modal-carousel-track.artists.is-page-leaving{pointer-events:none;animation:artistPageLeave .19s cubic-bezier(.4,0,1,1) both}.modal-carousel-track.artists.is-page-entering{pointer-events:none;animation:artistPageEnter .36s cubic-bezier(.16,.8,.24,1) both}.modal-carousel-track.artists.is-page-entering .artist-card:not([hidden]){animation:artistCardEnter .42s cubic-bezier(.16,.8,.24,1) both}.modal-carousel-track.artists.is-page-entering .artist-card:nth-child(2n){animation-delay:35ms}.modal-carousel-track.artists.is-page-entering .artist-card:nth-child(3n){animation-delay:65ms}@keyframes artistPageLeave{from{opacity:1;transform:translateX(0) scale(1)}to{opacity:0;transform:translateX(-18px) scale(.985)}}@keyframes artistPageEnter{from{opacity:0;transform:translateX(24px) scale(.985)}to{opacity:1;transform:translateX(0) scale(1)}}@keyframes artistCardEnter{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){.modal-carousel-track.artists.is-page-leaving,.modal-carousel-track.artists.is-page-entering,.modal-carousel-track.artists.is-page-entering .artist-card{animation-duration:.01ms!important;animation-delay:0ms!important}}
