/* Mobile first; native CSS nesting, flexible dimensions and px breakpoints. */
:root { --op-slate:#474c54; --op-clay:#b74727; --op-paper:#f8f8f8; --op-gap:clamp(1.25rem,4vw,4rem); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-block-start:calc(var(--op-header-height,0px) + var(--op-admin-offset,0px) + 1rem); }
body { margin:0; line-height:1.6; }
img { max-inline-size:100%; block-size:auto; vertical-align:middle; }
a { color:inherit; text-underline-offset:.25em; }
button, input, textarea { font:inherit; }
button, a { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
[hidden] { display:none !important; }
:focus-visible { outline:3px solid #b74727; outline-offset:5px; }
.op-header, .op-footer { :focus-visible { outline-color:#ffc3a9; } }
h1,h2,h3,p,figure { margin-block-start:0; }
.op-skip { position:absolute; inset-inline-start:1rem; inset-block-start:1rem; transform:translateY(-200%); z-index:100; background:white; color:#191919; padding:.75rem 1rem; &:focus { transform:none; } }
.op-header { position:relative; z-index:10; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.75rem; padding:1.4rem max(1.5rem,calc((100vw - 66rem)/2)); color:white; background:var(--op-slate); transition:background .2s;
    .op-brand { flex:0 1 11.25rem; img { inline-size:100%; } }
    .op-menu-toggle { background:transparent; border:1px solid #ffffff80; color:white; padding:.45rem .8rem; span { margin-inline-start:.5rem; } }
    .op-navigation { flex-basis:100%; ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.25rem; } a { display:block; padding:.6rem .25rem; font-size:.85rem; text-decoration:none; } a:hover, a[aria-current] { text-decoration:underline; } li:last-child a { border:1px solid #ffffffb0; border-radius:.2rem; padding:.75rem 1.2rem; } }
    &.is-open { background:var(--op-slate); }
}
.op-header-ready {
    &:not(.op-has-hero) { padding-block-start:var(--op-header-height); }
    .op-header { position:fixed; inset-inline:0; inset-block-start:var(--op-admin-offset,0px); max-block-size:calc(100svh - var(--op-admin-offset,0px)); overflow-y:auto; }
    &.op-has-hero .op-header { background:transparent; &.is-scrolled, &.is-open { background:var(--op-slate); } }
}
.op-hero { position:relative; isolation:isolate; display:grid; place-items:center; min-block-size:clamp(30rem,74svh,58rem); padding:10rem var(--op-gap) 5rem; color:white;
    &::after { content:''; position:absolute; inset:0; z-index:-1; background:#0005; }
    .op-hero-image { position:absolute; inset:0; inline-size:100%; block-size:100%; object-fit:cover; z-index:-2; }
    h1 { margin:0; font-size:clamp(2.5rem,6vw,5.5rem); font-weight:400; text-align:center; line-height:1.1; text-transform:uppercase; letter-spacing:.035em; text-shadow:0 2px 20px #0004; }
}
.op-intro { max-inline-size:60rem; padding:clamp(3rem,7vw,6rem) var(--op-gap); margin-inline:auto; text-align:center; font-size:clamp(1.1rem,1.5vw,1.35rem); p { margin-block-end:1.5rem; } a { color:var(--op-clay); font-size:.9rem; text-transform:uppercase; letter-spacing:.09em; } }
.op-project-section { max-inline-size:94rem; margin-inline:auto; padding:0 var(--op-gap) clamp(3rem,7vw,6rem);
    > h2 { font-size:clamp(2rem,3.5vw,3.25rem); font-weight:400; text-transform:uppercase; text-align:center; margin-block-end:2rem; }
}
.op-project-grid { display:grid; gap:2.25rem 1.25rem; }
.op-project-card { min-inline-size:0;
    a { display:block; text-decoration:none; }
    .op-card-image { overflow:hidden; aspect-ratio:4/3; background:#e8e6e2; img { inline-size:100%; block-size:100%; object-fit:cover; transition:transform .35s ease; } }
    h3 { display:flex; justify-content:space-between; gap:1rem; font-size:1.15rem; font-weight:400; text-transform:uppercase; letter-spacing:.05em; margin:1rem 0 0; span { color:var(--op-clay); } }
    a:hover { img { transform:scale(1.025); } h3 { color:var(--op-clay); } }
}
.op-project-intro { padding:clamp(3rem,7vw,7rem) var(--op-gap) clamp(2.5rem,5vw,5rem); text-align:center;
    .op-eyebrow { color:#656565; letter-spacing:.2em; font-size:.85rem; margin-block-end:.6rem; }
    h1 { font-size:clamp(2.8rem,5vw,4.5rem); font-weight:400; text-transform:uppercase; line-height:1.15; margin-block-end:1.5rem; }
    .op-credits { max-inline-size:65rem; margin-inline:auto; font-size:.95rem; a:hover { color:var(--op-clay); } }
    .op-share { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:1rem; font-size:.8rem; margin-block-start:1.75rem; span { text-transform:uppercase; letter-spacing:.1em; color:#656565; } }
}
.op-gallery { max-inline-size:94rem; padding-inline:var(--op-gap); margin-inline:auto; column-gap:1rem;
    figure { break-inside:avoid; margin:0 0 1rem; }
    a { display:block; } img { inline-size:100%; }
    figcaption { font-size:.85rem; color:#656565; padding-block:.5rem; }
}
.op-project-return { text-align:center; padding:3rem var(--op-gap) 5rem; }
.op-gallery-jumps { display:flex; justify-content:center; flex-wrap:wrap; gap:1rem 2rem; margin-block-start:2.5rem;
    a { display:flex; flex-direction:column; padding:.5rem 1rem; color:var(--op-clay); text-decoration:none; border-block-end:1px solid currentColor; }
    span { font-size:.8rem; color:#656565; }
}
.op-gallery-section + .op-gallery-section { margin-block-start:clamp(3rem,6vw,6rem); }
.op-gallery-heading { padding-inline:var(--op-gap); margin-block-end:2rem; text-align:center;
    h2 { font-size:clamp(1.8rem,3vw,2.75rem); font-weight:400; text-transform:uppercase; letter-spacing:.06em; margin-block-end:.25rem; }
    p { color:#656565; font-size:.9rem; margin:0; }
}
.op-button { display:inline-flex; align-items:center; justify-content:center; gap:2rem; padding:.8rem 1.6rem; text-decoration:none; background:var(--op-clay); border:1px solid var(--op-clay); color:white; text-transform:uppercase; font-size:.9rem; letter-spacing:.06em; &:hover { background:#87351d; border-color:#87351d; color:white; } }
.op-button-outline { background:transparent; color:var(--op-clay); }
.op-contact { padding:clamp(3rem,6vw,5rem) var(--op-gap); text-align:center; border-block-start:1px solid #dadada;
    p { max-inline-size:48rem; margin-inline:auto; font-size:clamp(1.7rem,3vw,2.75rem); line-height:1.25; }
}
.op-footer { background:var(--op-slate); color:white; padding:clamp(3rem,5vw,5rem) var(--op-gap) 1.5rem;
    h2 { font-size:.85rem; font-weight:400; text-transform:uppercase; letter-spacing:.1em; color:#e6e6e6; margin-block-end:1.25rem; }
    a { text-decoration:none; &:hover { text-decoration:underline; } }
    ul { list-style:none; margin:0; padding:0; li { margin-block-end:.65rem; } }
    .op-footer-main { max-inline-size:86rem; margin-inline:auto; display:grid; gap:2.5rem; }
    .op-footer-brand { display:flex; flex-direction:column; align-items:flex-start; gap:1rem; img { inline-size:15rem; } }
    .op-social { display:flex; gap:.85rem; flex-wrap:wrap; font-size:.8rem; }
    .op-instagram { p { color:#e0e0e0; font-size:.9rem; margin-block-start:.75rem; max-inline-size:22rem; } > a { overflow-wrap:anywhere; } }
    .op-badges { display:flex; justify-content:center; flex-wrap:wrap; align-items:center; gap:1.5rem; margin-block:3rem; a { background:white; padding:.5rem; flex:0 1 5rem; } img { inline-size:100%; aspect-ratio:1; object-fit:contain; } }
    .op-footer-bottom { display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; max-inline-size:86rem; margin-inline:auto; padding-block-start:1.5rem; border-block-start:1px solid #ffffff30; font-size:.8rem; p { margin:0; } }
}
.op-lightbox { border:0; padding:1rem; background:#191919; color:white; inline-size:min(96vw,90rem); max-inline-size:96vw; block-size:96svh; max-block-size:96svh;
    &[open] { display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:.75rem; }
    &::backdrop { background:#000e; }
    button { border:1px solid #ffffff65; color:white; background:transparent; padding:.5rem .8rem; &:hover { background:#fff2; } }
    .op-lightbox-close { display:block; margin-inline-start:auto; }
    figure { display:grid; grid-template-rows:minmax(0,1fr) auto; min-block-size:0; min-inline-size:0; margin:0; text-align:center;
        img { inline-size:100%; block-size:100%; min-block-size:0; min-inline-size:0; object-fit:contain; }
        figcaption { font-size:.85rem; max-block-size:4.8em; overflow:auto; overflow-wrap:anywhere; }
    }
    .op-lightbox-controls { display:flex; justify-content:space-between; align-items:center; gap:.5rem; }
    :focus-visible { outline-color:#ffc3a9; }
}
.op-content { max-inline-size:80rem; margin-inline:auto; padding:4rem var(--op-gap); }
.op-hubspot-placeholder {
    span { overflow-wrap:anywhere; }
    p:last-child { margin-block-end:0; }
}
.post-password-form { max-inline-size:40rem; margin:4rem auto; padding-inline:var(--op-gap); }
@media (min-width:640px) {
    .op-project-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .op-gallery { columns:2; }
    .op-footer .op-footer-main { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:1000px) {
    .op-project-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .op-gallery { columns:3; }
    .op-footer .op-footer-main { grid-template-columns:1.3fr .8fr 1fr 1.1fr; }
}
@media (min-width:1100px) {
    .op-header { flex-wrap:nowrap; .op-navigation { flex:1; ul { flex-direction:row; justify-content:space-between; gap:1rem; } a { white-space:nowrap; } } }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .op-header, .op-project-card .op-card-image img { transition:none; } }