/* Current-homepage composition; mobile first, px min-width queries, native nesting. */
.op-home { background:#f9f9f9;
    h2 { font-size:clamp(1.8rem,3vw,2.5rem); line-height:1.2; text-transform:uppercase; font-weight:400; letter-spacing:.125em; margin-block-end:1.25rem; }
    p { line-height:1.55; }
}
body.page-template-homepage .op-footer .op-footer-main { max-inline-size:66rem; }
.op-home-hero { position:relative; isolation:isolate; color:white; background:var(--op-slate); min-block-size:36rem; min-block-size:max(32rem,65svh); display:flex; align-items:center; padding:8rem 2rem 6rem;
    &::after { content:''; position:absolute; inset:0; z-index:-1; background:#0006; }
    .op-home-backdrop { position:absolute; z-index:-2; inset:0; inline-size:100%; block-size:100%; object-fit:cover; }
    .op-home-hero-copy { inline-size:100%; max-inline-size:58rem; margin-inline:auto; }
    h1 { font-size:clamp(2rem,4.6vw,4.125rem); line-height:1.28; text-transform:uppercase; font-weight:400; letter-spacing:.01em; margin:0 0 1.5rem; }
    .op-home-tagline { font-size:clamp(1.15rem,1.8vw,1.625rem); margin-block-end:2.4rem; }
    .op-home-actions { display:flex; flex-wrap:wrap; gap:1rem; }
    .op-button-light { background:#0001; border:2px solid #ffffffd0; border-radius:.2rem; color:white; text-transform:none; font-size:1rem; padding:.65rem 1.5rem; letter-spacing:.08em; &:hover { background:white; color:var(--op-slate); } }
    .op-home-hero-bottom { position:absolute; inset-inline-end:1.5rem; inset-block-end:1.25rem; display:flex; gap:1rem; align-items:center; font-size:.8rem;
        button, a { padding:.35rem .75rem; color:white; border:1px solid #ffffff9c; background:#0004; border-radius:.2rem; &:hover { background:#0009; } }
    }
    .op-film-status:empty { display:none; }
    :focus-visible { outline-color:#ffc3a9; }
}
.op-story { padding:3.8rem 1.5rem;
    .op-story-copy { max-inline-size:50rem; margin-inline:auto; text-align:center; >p { margin-block-end:0; } }
    .op-kicker { color:var(--op-clay); font-size:.8rem; letter-spacing:.1em; }
    .op-story-video { max-inline-size:58rem; margin:5rem auto 0; aspect-ratio:16/9; background:#222; color:white; display:grid; place-items:center;
        iframe { inline-size:100%; block-size:100%; border:0; }
    }
    .op-story-film { display:inline-block; margin-block-start:1.5rem; }
    &.op-story-split { max-inline-size:86rem; margin-inline:auto; display:grid; gap:2.5rem; align-items:center;
        .op-story-photo { aspect-ratio:5/4; img { inline-size:100%; block-size:100%; object-fit:cover; } }
        .op-story-copy { text-align:start; }
    }
    &.op-story-band { padding-block:4.25rem 5rem; color:white; background:var(--op-slate);
        .op-story-copy { max-inline-size:46rem; }
        .op-text-link { margin-block-start:2.5rem; color:#f2ab8c; border-color:#e98961; box-shadow:0 0 0 4px #e9896115; &:hover { background:#e98961; color:#222; } }
    }
}
.op-text-link { display:inline-block; border:1px solid var(--op-clay); color:var(--op-clay); padding:.65rem 1.5rem; text-decoration:none; letter-spacing:.08em; }
.op-selected-work { padding:3.8rem .65rem 2.5rem; background:#e7dcc0;
    &.has-carousel-controls .op-project-track { scrollbar-width:none; }
    .op-section-heading { max-inline-size:58rem; padding-inline:1rem; text-align:center; margin:0 auto 4.75rem; }
    .op-project-track { position:relative; display:grid; grid-auto-flow:column; grid-auto-columns:100%; gap:.65rem; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:thin; scrollbar-color:#867c64 transparent; }
    .op-project-card { scroll-snap-align:start; position:relative; overflow:hidden; border-radius:.25rem;
        .op-card-image { aspect-ratio:1.7; img { transform:none; } }
        h3 { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; margin:0; padding:1.25rem; background:rgb(0 0 0 / 48%); color:white; font-size:1.75rem; font-weight:700; line-height:1.5; text-align:center; text-transform:none; letter-spacing:normal; opacity:0; transition:opacity .5s; }
        a:hover h3, a:focus-visible h3 { opacity:1; color:white; }
        a:focus-visible { outline-offset:-4px; }
    }
    .op-carousel-controls { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.5rem; margin-block-start:.35rem;
        >button { color:#514c42; background:none; border:0; padding:.45rem .7rem; font-size:1.1rem; &:disabled { opacity:.3; cursor:default; } }
    }
    .op-carousel-dots { display:flex; flex-wrap:wrap; justify-content:center;
        button { display:grid; place-items:center; padding:.6rem .35rem; background:none; border:0; span { inline-size:.4rem; aspect-ratio:1; border-radius:50%; background:#b8ab8b; } &[aria-current=true] span { background:#242424; } }
    }
    .op-carousel-status { position:absolute; inline-size:1px; block-size:1px; overflow:hidden; clip-path:inset(50%); }
    .op-selected-link { text-align:center; margin-block-start:1rem; font-size:.9rem; }
}
.op-awards { padding:3.8rem 1.5rem; text-align:center; background:#f4f5ef;
    .op-kicker { display:none; }
    ul { list-style:none; padding:0; margin:4rem auto 0; max-inline-size:58rem; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; }
    li { border:1px solid #b8b8b8; background:white; padding:.6rem; display:grid; align-items:center; a { display:block; } img { inline-size:100%; aspect-ratio:5/6; object-fit:contain; } }
}
.op-inquiry { margin:4.5rem 1.5rem; padding:2.5rem 1.5rem; background:#f9f9f9; box-shadow:3px 4px 12px #00000012; max-inline-size:58rem;
    .op-inquiry-intro { text-align:center; h2 { font-size:2rem; text-transform:none; letter-spacing:normal; margin-block-end:2rem; } p { margin-block-end:2rem; } }
    .op-form-note { font-size:.75rem; color:#626262; padding-inline-start:.75rem; border-inline-start:2px solid #aaa; }
    form { position:relative; display:grid; gap:1rem; }
    label { display:block; font-size:.9rem; color:#666; }
    input:not([type=hidden]),textarea { display:block; margin-block-start:.45rem; inline-size:100%; min-inline-size:0; padding:.55rem .85rem; background:transparent; color:#191919; border:1px solid #aaa; border-radius:.15rem; }
    input::placeholder { color:#737373; }
    textarea { resize:vertical; }
    .op-form-names { display:grid; gap:1rem; }
    .op-optional { font-size:.8rem; }
    button { justify-self:start; background:transparent; color:var(--op-clay); text-transform:none; &:hover { background:var(--op-clay); color:white; } }
    .op-privacy { font-size:.8rem; color:#666; margin:0; }
    .op-form-result { background:white; padding:1rem; border:1px solid #999; }
    .op-honeypot { position:absolute; inline-size:1px; block-size:1px; overflow:hidden; clip-path:inset(50%); }
}
@media (min-width:640px) {
    .op-home-hero { min-block-size:72svh; padding-block:10rem; }
    .op-selected-work .op-project-track { grid-auto-columns:calc((100% - .65rem)/2); }
    .op-awards ul { grid-template-columns:repeat(5,minmax(0,1fr)); }
    .op-inquiry { margin-inline:auto; inline-size:calc(100% - 3rem); padding:3rem clamp(2rem,9vw,8rem); .op-form-names { grid-template-columns:repeat(2,minmax(0,1fr)); } }
}
@media (min-width:900px) {
    .op-story.op-story-split { grid-template-columns:repeat(2,minmax(0,1fr)); &.op-story-reverse .op-story-photo { order:2; } }
}
@media (min-width:1000px) {
    .op-selected-work .op-project-track { grid-auto-columns:calc((100% - 1.3rem)/3); }
}
@media (prefers-reduced-motion:reduce) {
    .op-selected-work .op-project-card h3 { transition:none; }
}