/* The Operators List — Cinematic Slide Experience */

/* Visually hidden — indexed by search engines, invisible to users */
.op-seo-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@font-face {
    font-family: 'Tiempos Headline';
    src: url('assets/fonts/TiemposHeadline-Semibold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: block;
}

:root {
    --dark:  #1F2B37;
    --green: #77F2A1;
    --edge:  #334558;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
    background: var(--dark);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body { font-family: 'Geologica', Georgia, serif; }
p, h1, h2 { margin: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; }

/* ── Progress ─────────────────────────────────────────────── */

#op-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 100;
}

#op-progress-fill {
    height: 100%;
    background: var(--green);
    transition: width 0.5s ease;
}

/* ── Stage ────────────────────────────────────────────────── */

#op-stage {
    width: 100%;
    height: 100vh;
    height: 100svh;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

/* ── Slide base ───────────────────────────────────────────── */

.op-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.55s ease;
    pointer-events: none;
}

.op-slide.active {
    opacity: 1;
    pointer-events: auto;
}

/* ── Split layout (hero + sections) ──────────────────────── */

.op-slide--split {
    background: var(--dark);
    display: grid;
    grid-template-columns: 46% 54%;
    height: 100%;
}

.op-slide--hero,
.op-slide--section {
    grid-template-columns: 52% 48%;
}

/* Text side */
.op-split-text {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 5rem 3rem 5.5rem 7vw;
    position: relative;
    z-index: 10;
}

/* ── Hero text ────────────────────────────────────────────── */

.op-hero__eyebrow {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--green);
    opacity: 0.7;
    margin-bottom: 1.5rem;
}

.op-hero__headline {
    font-family: 'Tiempos Headline', Georgia, serif;
    font-size: clamp(4.5rem, 9.5vw, 9.5rem);
    font-weight: 600;
    color: #fff;
    line-height: 0.95;
    margin-bottom: 2rem;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}

.op-hero__sub {
    font-family: 'Geologica', Georgia, serif;
    font-size: clamp(0.95rem, 1.3vw, 1.1rem);
    font-weight: 300;
    color: #fff;
    line-height: 1.7;
    max-width: 44ch;
    margin-bottom: 0;
}

.op-hero__hint {
    margin-top: 2.5rem;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--green);
    opacity: 0.7;
}

/* Hero text entrance (fires on page load) */
.op-slide--hero .op-hero__eyebrow  { animation: op-up 0.7s ease 0.1s both; }
.op-slide--hero .op-hero__headline { animation: op-up 0.9s ease 0.25s both; }
.op-slide--hero .op-hero__sub      { animation: op-up 0.7s ease 0.5s both; }
.op-slide--hero .op-hero__hint     { animation: op-fadein 0.5s ease 2.4s both; }

/* ── Section text ─────────────────────────────────────────── */

.op-sec__name {
    font-family: 'Tiempos Headline', Georgia, serif;
    font-size: clamp(3rem, 7vw, 7.5rem);
    font-weight: 600;
    color: #fff;
    line-height: 0.96;
    margin-bottom: 1.5rem;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}

.op-sec__desc {
    font-family: 'Geologica', Georgia, serif;
    font-size: clamp(0.95rem, 1.3vw, 1.1rem);
    font-weight: 300;
    color: #fff;
    line-height: 1.72;
    max-width: 40ch;
}

/* Section entrance */
.op-slide--section.op-enter .op-sec__name { animation: op-up 0.8s ease 0.05s both; }
.op-slide--section.op-enter .op-sec__desc { animation: op-up 0.7s ease 0.3s both; }

/* ── Photo collage (shared: hero + sections) ──────────────── */

.op-collage {
    position: relative;
    overflow: hidden;
}

/* Left edge blend into dark text area */
.op-collage::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;
    height: 100%;
    background: linear-gradient(to right, var(--dark) 0%, transparent 100%);
    z-index: 10;
    pointer-events: none;
}

/* Bottom blend */
.op-collage::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 180px;
    background: linear-gradient(to top, var(--dark) 0%, transparent 100%);
    z-index: 10;
    pointer-events: none;
}

/* Collage faces: picture is transparent so layout stays on the img */
.op-face picture { display: contents; }


/* Individual face */
/* cinematic floating shadow — intentionally stronger than card shadow for dark-on-dark depth */
.op-face {
    position: absolute;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55);
    transform: rotate(var(--r, 0deg));
    opacity: 0;
}

.op-face img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

/* ── Hero face positions — 4 rows × 4/4/4/3 columns, 16% wide, no overlap ── */
/* Rows at 4%, 24%, 44%, 64% — face height ≈ 16.3% of collage height, gap ≈ 4% */
/* Cols at 18%, 39%, 60%, 79% — past 120px left gradient; gap ≈ 5% between columns */
.op-slide--hero .op-collage .op-face:nth-child(1)  { --r: -4deg; top: 4%;  left: 18%; width: 16%; z-index: 2; }
.op-slide--hero .op-collage .op-face:nth-child(2)  { --r:  3deg; top: 3%;  left: 39%; width: 16%; z-index: 3; }
.op-slide--hero .op-collage .op-face:nth-child(3)  { --r: -2deg; top: 5%;  left: 60%; width: 16%; z-index: 2; }
.op-slide--hero .op-collage .op-face:nth-child(4)  { --r:  4deg; top: 3%;  left: 79%; width: 16%; z-index: 1; }
.op-slide--hero .op-collage .op-face:nth-child(5)  { --r:  3deg; top: 24%; left: 18%; width: 16%; z-index: 4; }
.op-slide--hero .op-collage .op-face:nth-child(6)  { --r: -3deg; top: 25%; left: 39%; width: 16%; z-index: 3; }
.op-slide--hero .op-collage .op-face:nth-child(7)  { --r:  2deg; top: 23%; left: 60%; width: 16%; z-index: 2; }
.op-slide--hero .op-collage .op-face:nth-child(8)  { --r: -4deg; top: 25%; left: 79%; width: 16%; z-index: 3; }
.op-slide--hero .op-collage .op-face:nth-child(9)  { --r: -2deg; top: 44%; left: 18%; width: 16%; z-index: 3; }
.op-slide--hero .op-collage .op-face:nth-child(10) { --r:  4deg; top: 45%; left: 39%; width: 16%; z-index: 4; }
.op-slide--hero .op-collage .op-face:nth-child(11) { --r: -3deg; top: 43%; left: 60%; width: 16%; z-index: 2; }
.op-slide--hero .op-collage .op-face:nth-child(12) { --r:  2deg; top: 44%; left: 79%; width: 16%; z-index: 1; }
.op-slide--hero .op-collage .op-face:nth-child(13) { --r: -2deg; top: 64%; left: 18%; width: 16%; z-index: 1; }
.op-slide--hero .op-collage .op-face:nth-child(14) { --r:  3deg; top: 65%; left: 46%; width: 16%; z-index: 2; }
.op-slide--hero .op-collage .op-face:nth-child(15) { --r: -3deg; top: 64%; left: 74%; width: 16%; z-index: 1; }

/* ── Section face positions — non-overlapping layouts per count ── */

/* 2 photos — diagonal, large; gradient at 48% collage ≈ 17%, faces start at ≥ 18% */
.op-collage--2 .op-face:nth-child(1) { --r: -4deg; top: 8%;  left: 18%; width: 36%; z-index: 2; }
.op-collage--2 .op-face:nth-child(2) { --r:  3deg; top: 46%; left: 54%; width: 36%; z-index: 3; }

/* 4 photos (Permission) — 2×2 grid; faces start at ≥ 18%, 34% wide, 10% gap between cols */
.op-collage--4 .op-face:nth-child(1) { --r: -3deg; top: 5%;  left: 18%; width: 34%; z-index: 2; }
.op-collage--4 .op-face:nth-child(2) { --r:  2deg; top: 6%;  left: 62%; width: 34%; z-index: 3; }
.op-collage--4 .op-face:nth-child(3) { --r:  3deg; top: 53%; left: 18%; width: 34%; z-index: 3; }
.op-collage--4 .op-face:nth-child(4) { --r: -2deg; top: 54%; left: 62%; width: 34%; z-index: 2; }

/* 7 photos (Rails) — 4 top (18% wide) + 3 bottom (22% wide); all faces ≥ 18% from left */
.op-collage--7 .op-face:nth-child(1) { --r: -4deg; top: 4%;  left: 18%; width: 18%; z-index: 2; }
.op-collage--7 .op-face:nth-child(2) { --r:  2deg; top: 6%;  left: 39%; width: 18%; z-index: 3; }
.op-collage--7 .op-face:nth-child(3) { --r: -2deg; top: 4%;  left: 60%; width: 18%; z-index: 2; }
.op-collage--7 .op-face:nth-child(4) { --r:  3deg; top: 6%;  left: 80%; width: 18%; z-index: 1; }
.op-collage--7 .op-face:nth-child(5) { --r:  3deg; top: 37%; left: 18%; width: 22%; z-index: 3; }
.op-collage--7 .op-face:nth-child(6) { --r: -3deg; top: 39%; left: 43%; width: 22%; z-index: 4; }
.op-collage--7 .op-face:nth-child(7) { --r:  2deg; top: 37%; left: 68%; width: 22%; z-index: 2; }

/* Hero: faces animate in on page load */
.op-slide--hero.op-enter .op-face:nth-child(1)  { animation: face-in 0.55s ease 0.3s  both; }
.op-slide--hero.op-enter .op-face:nth-child(2)  { animation: face-in 0.55s ease 0.44s both; }
.op-slide--hero.op-enter .op-face:nth-child(3)  { animation: face-in 0.55s ease 0.58s both; }
.op-slide--hero.op-enter .op-face:nth-child(4)  { animation: face-in 0.55s ease 0.72s both; }
.op-slide--hero.op-enter .op-face:nth-child(5)  { animation: face-in 0.55s ease 0.86s both; }
.op-slide--hero.op-enter .op-face:nth-child(6)  { animation: face-in 0.55s ease 1.0s  both; }
.op-slide--hero.op-enter .op-face:nth-child(7)  { animation: face-in 0.55s ease 1.14s both; }
.op-slide--hero.op-enter .op-face:nth-child(8)  { animation: face-in 0.55s ease 1.28s both; }
.op-slide--hero.op-enter .op-face:nth-child(9)  { animation: face-in 0.55s ease 1.42s both; }
.op-slide--hero.op-enter .op-face:nth-child(10) { animation: face-in 0.55s ease 1.56s both; }
.op-slide--hero.op-enter .op-face:nth-child(11) { animation: face-in 0.55s ease 1.7s  both; }
.op-slide--hero.op-enter .op-face:nth-child(12) { animation: face-in 0.55s ease 1.84s both; }
.op-slide--hero.op-enter .op-face:nth-child(13) { animation: face-in 0.55s ease 1.98s both; }
.op-slide--hero.op-enter .op-face:nth-child(14) { animation: face-in 0.55s ease 2.12s both; }
.op-slide--hero.op-enter .op-face:nth-child(15) { animation: face-in 0.55s ease 2.26s both; }

/* Section: faces animate in on enter */
.op-slide--section.op-enter .op-face:nth-child(1) { animation: face-in 0.5s ease 0.12s both; }
.op-slide--section.op-enter .op-face:nth-child(2) { animation: face-in 0.5s ease 0.24s both; }
.op-slide--section.op-enter .op-face:nth-child(3) { animation: face-in 0.5s ease 0.36s both; }
.op-slide--section.op-enter .op-face:nth-child(4) { animation: face-in 0.5s ease 0.48s both; }
.op-slide--section.op-enter .op-face:nth-child(5) { animation: face-in 0.5s ease 0.6s  both; }
.op-slide--section.op-enter .op-face:nth-child(6) { animation: face-in 0.5s ease 0.72s both; }
.op-slide--section.op-enter .op-face:nth-child(7) { animation: face-in 0.5s ease 0.84s both; }

/* ── Operator slide ───────────────────────────────────────── */

.op-slide--operator {
    display: grid;
    grid-template-columns: 45% 55%;
    background: #fff;
}

/* Photo column */
.op-photo-col {
    position: relative;
    overflow: hidden;
    height: 100%;
}

.op-photo-col img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    max-width: none;
}

.op-photo-col--pair {
    display: flex;
}

/* Photo column: picture fills its space; flex:1 activates inside pair */
.op-photo-col picture {
    display: block;
    flex: 1;
    min-width: 0;
    height: 100%;
    overflow: hidden;
}

.op-photo-col--pair img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

/* Blend photo into white content */
.op-photo-col::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, transparent 55%, #fff 100%);
    pointer-events: none;
}

/* Content column */
.op-content-col {
    display: flex;
    align-items: center;
    padding: 4rem 6vw 4rem 2.5rem;
    position: relative;
    overflow: hidden;
    background: #fff;
}

/* Number watermark */
.op-num-bg {
    position: absolute;
    top: -0.14em;
    right: -0.03em;
    font-family: 'Tiempos Headline', Georgia, serif;
    font-size: clamp(8rem, 17vw, 18rem);
    font-weight: 600;
    color: rgba(31, 43, 55, 0.09);
    line-height: 1;
    user-select: none;
    pointer-events: none;
    z-index: 0;
}

.op-num-bg--pair {
    font-size: clamp(4rem, 8vw, 9rem);
    top: 0.1em;
}

.op-text {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 500px;
}

.op-text__name {
    font-family: 'Tiempos Headline', Georgia, serif;
    font-size: clamp(1.55rem, 2.4vw, 2.4rem);
    font-weight: 600;
    color: var(--dark);
    line-height: 1.12;
    margin-bottom: 0.4rem;
}

.op-text__meta {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 0.67rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--green);
    margin-bottom: 1.75rem;
    /* ensure contrast on white */
    filter: brightness(0.72);
}

.op-text__bio p {
    font-family: 'Geologica', Georgia, serif;
    font-size: 0.93rem;
    line-height: 1.85;
    color: #2a2a2a;
    font-weight: 300;
}

.op-text__bio p + p { margin-top: 0.9em; }

/* Operator slide entrance */
.op-slide--operator.op-enter .op-photo-col {
    animation: photo-reveal 0.85s ease both;
}
.op-slide--operator.op-enter .op-num-bg {
    animation: op-fadein 0.6s ease 0.15s both;
}
.op-slide--operator.op-enter .op-text__name {
    animation: op-up 0.65s ease 0.2s both;
}
.op-slide--operator.op-enter .op-text__meta {
    animation: op-up 0.55s ease 0.35s both;
}
.op-slide--operator.op-enter .op-text__bio {
    animation: op-up 0.55s ease 0.5s both;
}

/* ── CTA slide ────────────────────────────────────────────── */

.op-slide--cta {
    background: var(--dark);
    background-image: url('assets/images/landmark-centre.webp');
    background-size: cover;
    background-position: center top;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 5rem 7vw;
    cursor: default;
    position: relative;
}

.op-slide--cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(31, 43, 55, 0.82);
    z-index: 0;
}

.op-slide--cta > * {
    position: relative;
    z-index: 1;
}

.op-cta__label {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--green);
    opacity: 0.65;
    margin-bottom: 1.75rem;
}

.op-cta__headline {
    font-family: 'Tiempos Headline', Georgia, serif;
    font-size: clamp(2.5rem, 6vw, 6rem);
    font-weight: 600;
    color: #fff;
    line-height: 1.0;
    margin-bottom: 1.5rem;
}

.op-cta__body {
    font-family: 'Geologica', Georgia, serif;
    font-size: clamp(0.95rem, 1.3vw, 1.1rem);
    font-weight: 300;
    color: #fff;
    line-height: 1.78;
    max-width: 50ch;
    margin-bottom: 3rem;
}

.op-cta__btn {
    display: inline-block;
    background: var(--green);
    color: var(--dark);
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    padding: 1.1em 3.25em;
    border-radius: 8px;
    transition: opacity 0.2s;
    cursor: pointer;
}

.op-cta__btn:hover { opacity: 0.85; }

/* CTA entrance */
.op-slide--cta.op-enter .op-cta__headline { animation: op-up 0.85s ease 0.1s both; }
.op-slide--cta.op-enter .op-cta__body     { animation: op-up 0.65s ease 0.32s both; }
.op-slide--cta.op-enter .op-cta__btn      { animation: op-scale-in 0.5s ease 0.55s both; }

/* ── Navigation ───────────────────────────────────────────── */

#op-nav {
    position: fixed;
    bottom: 2rem;
    right: 7vw;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    z-index: 100;
}

#op-counter {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    min-width: 5.5ch;
    text-align: center;
    transition: color 0.4s ease;
}

.op-nav-btn {
    background: none;
    border: none;
    padding: 0.4em 0.5em;
    font-family: 'Tiempos Headline', Georgia, serif;
    font-size: 1.1rem;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s, opacity 0.2s;
}

.op-nav-btn:disabled { opacity: 0.15; cursor: default; }

/* Dark slides — green */
body:not(.op-light) #op-counter                      { color: var(--green); }
body:not(.op-light) .op-nav-btn                      { color: var(--green); }
body:not(.op-light) .op-nav-btn:not(:disabled):hover { opacity: 0.7; }

/* Light slides (operator white bg) — dark brand color */
body.op-light #op-counter                      { color: var(--dark); }
body.op-light .op-nav-btn                      { color: var(--dark); }
body.op-light .op-nav-btn:not(:disabled):hover { opacity: 0.55; }

/* ── Share ────────────────────────────────────────────────── */

#op-share {
    display: flex;
    align-items: center;
}

.op-share-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: none;
    background: none;
    cursor: pointer;
    transition: color 0.18s ease, background 0.18s ease;
    padding: 0;
    text-decoration: none;
    flex-shrink: 0;
    opacity: 0.45;
}

.op-share-icon svg { width: 14px; height: 14px; display: block; }

body:not(.op-light) .op-share-icon { color: var(--green); }
body.op-light .op-share-icon       { color: var(--dark); }

.op-share-icon:hover { opacity: 1; background: rgba(128, 128, 128, 0.1); }
body:not(.op-light) #op-share-x:hover { color: #fff; }
body.op-light #op-share-x:hover       { color: #111; }
#op-share-li:hover { color: #0A66C2; }
#op-share-wa:hover { color: #25D366; }
#op-share-fb:hover { color: #1877F2; }

.op-share-sep {
    width: 1px;
    height: 1rem;
    margin: 0 0.2rem;
    flex-shrink: 0;
}
body:not(.op-light) .op-share-sep { background: rgba(119, 242, 161, 0.2); }
body.op-light .op-share-sep       { background: rgba(31, 43, 55, 0.15); }

/* ── Keyframes ────────────────────────────────────────────── */

@keyframes op-up {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes op-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes face-in {
    from { opacity: 0; transform: translateY(28px) rotate(var(--r, 0deg)); }
    to   { opacity: 1; transform: translateY(0) rotate(var(--r, 0deg)); }
}

@keyframes photo-reveal {
    from { opacity: 0; transform: scale(1.06); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes op-scale-in {
    from { opacity: 0; transform: scale(0.88); }
    to   { opacity: 1; transform: scale(1); }
}

/* ── Mobile ───────────────────────────────────────────────── */

@media (max-width: 759px) {

    /* ── Split layout: collage top, text below ── */
    .op-slide--split,
    .op-slide--hero,
    .op-slide--section {
        grid-template-columns: 1fr;
        grid-template-rows: 45svh 1fr;
    }

    /* Hero needs more room for 3 rows of faces */
    .op-slide--hero { grid-template-rows: 58svh 1fr; }

    .op-split-text {
        padding: 3rem 6vw 3.5rem;
        justify-content: flex-end;
        order: 2;
    }

    /* ── Collage panel ── */
    .op-collage {
        order: 1;
        height: 45svh;
    }

    .op-slide--hero .op-collage { height: 58svh; }

    /* Section faces: fixed % height so they never overflow regardless of viewport width */
    .op-slide--section .op-collage .op-face {
        aspect-ratio: unset;
        height: 44%;
    }

    /* Hero: tiny fade at bottom only — don't bury row 3 */
    .op-slide--hero .op-collage::after {
        background: linear-gradient(to top, var(--dark) 5%, transparent 100%);
    }

    .op-collage::before { display: none; }

    .op-collage::after {
        height: 100%;
        background: linear-gradient(to top, var(--dark) 8%, transparent 100%);
    }

    /* Sections: limit visible faces; hero shows all 15 */
    .op-collage--7 .op-face:nth-child(n+7) { display: none; }

    /* ── Hero collage: all 15 faces, 5 cols × 3 rows ── */
    /* 17% wide, 5 cols evenly spaced, 3 rows — fits within 58svh + 5% gradient */
    .op-slide--hero .op-collage .op-face:nth-child(1)  { --r: -3deg; top:  2%; left:  2.5%; width: 17%; z-index: 2; }
    .op-slide--hero .op-collage .op-face:nth-child(2)  { --r:  2deg; top:  2%; left: 22%;   width: 17%; z-index: 3; }
    .op-slide--hero .op-collage .op-face:nth-child(3)  { --r: -2deg; top:  2%; left: 41.5%; width: 17%; z-index: 2; }
    .op-slide--hero .op-collage .op-face:nth-child(4)  { --r:  3deg; top:  2%; left: 61%;   width: 17%; z-index: 3; }
    .op-slide--hero .op-collage .op-face:nth-child(5)  { --r: -1deg; top:  2%; left: 80.5%; width: 17%; z-index: 2; }
    .op-slide--hero .op-collage .op-face:nth-child(6)  { --r:  2deg; top: 34%; left:  2.5%; width: 17%; z-index: 3; }
    .op-slide--hero .op-collage .op-face:nth-child(7)  { --r: -3deg; top: 34%; left: 22%;   width: 17%; z-index: 2; }
    .op-slide--hero .op-collage .op-face:nth-child(8)  { --r:  1deg; top: 34%; left: 41.5%; width: 17%; z-index: 3; }
    .op-slide--hero .op-collage .op-face:nth-child(9)  { --r: -2deg; top: 34%; left: 61%;   width: 17%; z-index: 2; }
    .op-slide--hero .op-collage .op-face:nth-child(10) { --r:  3deg; top: 34%; left: 80.5%; width: 17%; z-index: 3; }
    .op-slide--hero .op-collage .op-face:nth-child(11) { --r: -1deg; top: 65%; left:  2.5%; width: 17%; z-index: 2; }
    .op-slide--hero .op-collage .op-face:nth-child(12) { --r:  2deg; top: 65%; left: 22%;   width: 17%; z-index: 3; }
    .op-slide--hero .op-collage .op-face:nth-child(13) { --r: -3deg; top: 65%; left: 41.5%; width: 17%; z-index: 2; }
    .op-slide--hero .op-collage .op-face:nth-child(14) { --r:  1deg; top: 65%; left: 61%;   width: 17%; z-index: 3; }
    .op-slide--hero .op-collage .op-face:nth-child(15) { --r: -2deg; top: 65%; left: 80.5%; width: 17%; z-index: 2; }

    /* ── Section 2-photo: diagonal — height 44%, so bottom: face1=49%, face2=94% ── */
    .op-collage--2 .op-face:nth-child(1) { --r: -4deg; top:  4%; left:  3%; width: 44%; }
    .op-collage--2 .op-face:nth-child(2) { --r:  3deg; top: 50%; left: 50%; width: 44%; }

    /* ── Section 4-photo: 2×2 — height 44%, top row 4-48%, bottom row 52-96% ── */
    .op-collage--4 .op-face:nth-child(1) { --r: -3deg; top:  4%; left:  4%; width: 44%; }
    .op-collage--4 .op-face:nth-child(2) { --r:  2deg; top:  4%; left: 52%; width: 44%; }
    .op-collage--4 .op-face:nth-child(3) { --r:  3deg; top: 52%; left:  4%; width: 44%; }
    .op-collage--4 .op-face:nth-child(4) { --r: -2deg; top: 52%; left: 52%; width: 44%; }

    /* ── Section 7-photo: 2×3 — height 44%, top row 4-48%, bottom row 52-96% ── */
    .op-collage--7 .op-face:nth-child(1) { --r: -3deg; top:  4%; left:  2%; width: 30%; }
    .op-collage--7 .op-face:nth-child(2) { --r:  2deg; top:  4%; left: 35%; width: 30%; }
    .op-collage--7 .op-face:nth-child(3) { --r: -2deg; top:  4%; left: 68%; width: 30%; }
    .op-collage--7 .op-face:nth-child(4) { --r:  3deg; top: 52%; left:  2%; width: 30%; }
    .op-collage--7 .op-face:nth-child(5) { --r: -2deg; top: 52%; left: 35%; width: 30%; }
    .op-collage--7 .op-face:nth-child(6) { --r:  2deg; top: 52%; left: 68%; width: 30%; }

    /* ── Operator slide ── */
    .op-slide--operator {
        grid-template-columns: 1fr;
        grid-template-rows: 52svh 1fr;
    }

    .op-photo-col::after {
        background: linear-gradient(to bottom, transparent 60%, #fff 100%);
    }

    /* Revert to top — portrait photos at full mobile width need center top to show the head */
    .op-photo-col img { object-position: center top; }
    .op-photo-col--pair img { object-position: center top; }

    /* Pair photos on mobile:
       picture is a transparent wrapper, not a reliable CSS layout box on Chrome Android.
       Collapse it to 0 height; position the img directly — it skips static picture
       and uses op-photo-col--pair (position:relative) as its containing block. */
    .op-photo-col--pair {
        display: block;
        height: 52svh; /* explicit — no grid-item percentage chain */
    }
    .op-photo-col--pair picture {
        display: block;
        height: 0;
        overflow: visible;
    }
    .op-photo-col--pair picture:first-child img {
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        height: 52svh;
        object-fit: cover;
        object-position: center top;
    }
    .op-photo-col--pair picture:nth-child(2) img {
        position: absolute;
        top: 0;
        right: 0;
        width: 50%;
        height: 52svh;
        object-fit: cover;
        object-position: center top;
    }

    .op-content-col {
        align-items: flex-start;
        padding: 2rem 6vw 5rem;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ── Typography ── */
    .op-hero__headline { font-size: clamp(2rem, 8vw, 3.5rem); }
    .op-sec__name      { font-size: clamp(2rem, 7vw, 3.5rem); }
    .op-num-bg         { font-size: 7rem; }
    .op-cta__headline  { font-size: clamp(2.2rem, 8vw, 3.5rem); }

    /* ── Nav ── */
    #op-nav { right: 6vw; bottom: 1.5rem; }

    .op-hero__hint { display: none; }

    /* Hide Facebook on mobile — X, LinkedIn, WhatsApp, Copy stay */
    #op-share-fb { display: none; }
}