/* Full-width Studio campaigns · 1.60.0. */
body.op-premium .op-st-hero.op-campaign { height: auto; background: #fff; color: var(--st-ink); }
body.op-premium .op-st-hero.op-campaign::after { display: none; }
.op-campaign__seo { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.op-campaign [hidden] { display: none !important; }
/* 1.69.0: slides share one grid cell, so the hero is always as tall as its
   tallest slide and never jumps; every banner is the same 3:1 frame. */
.op-campaign__slides { display: grid; }
.op-campaign__slide { grid-area: 1 / 1; display: flex; flex-direction: column; overflow: hidden; background: #f3f4f5; }
.op-campaign__banner { position: relative; display: block; width: 100%; aspect-ratio: 3 / 1; overflow: hidden; background: #111; }
.op-campaign__banner img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.op-campaign__banner--wide .op-campaign__art { object-fit: contain; }
.op-campaign__fill { filter: blur(24px) saturate(1.15); transform: scale(1.2); opacity: .9; }
.op-campaign__banner:focus-visible { outline-offset: -4px; }
body.op-premium .op-campaign .op-campaign__inner { flex: 1 0 auto; min-height: 0; height: auto; padding-top: 26px; padding-bottom: 26px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 40px; }
.op-campaign__eyebrow { display: block; font-size: 10px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
body.op-premium .op-campaign h2 { font-size: 30px; line-height: 1.1; letter-spacing: -.035em; margin: 10px 0 0; color: var(--st-ink); }
body.op-premium .op-campaign .op-campaign__copy p { max-width: 680px; margin: 10px 0 0; color: var(--st-ink2); font-size: 13px; line-height: 1.5; }
.op-campaign .op-st-btns { align-items: center; gap: 18px; }
.op-campaign .op-st-btn { gap: 18px; text-decoration: none; white-space: nowrap; }
.op-campaign__quote { display: inline-flex; align-items: center; gap: 10px; color: var(--st-ink); font-size: 13px; text-decoration: none; padding: 12px 0; white-space: nowrap; }
.op-campaign__quote:hover { text-decoration: underline; text-underline-offset: 4px; color: var(--st-ink); }
.op-campaign__controls { background: #fff; border-bottom: 1px solid var(--st-line); }
body.op-premium .op-campaign .op-campaign__control-inner { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; height: 62px; padding-top: 0; padding-bottom: 0; }
.op-campaign__selectors { position: relative; display: flex; flex: 1; min-width: 0; height: 100%; gap: 22px; overflow-x: auto; scrollbar-width: none; }
.op-campaign__selectors::-webkit-scrollbar { display: none; }
.op-campaign__selectors button { position: relative; display: flex; flex-shrink: 0; gap: 8px; align-items: center; border: 0; border-radius: 0; padding: 0; background: transparent; color: #626970; font: inherit; font-size: 11px; cursor: pointer; white-space: nowrap; }
.op-campaign__number { font-size: 10px; color: #757c83; }
.op-campaign__selectors button[aria-pressed="true"] { color: var(--st-ink); }
.op-campaign__selectors button[aria-pressed="true"]::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--st-ink); }
.op-campaign__arrows { display: flex; flex-shrink: 0; gap: 8px; }
.op-campaign__arrows button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--st-line); border-radius: 50%; background: #fff; color: var(--st-ink); font: inherit; font-size: 16px; cursor: pointer; }
.op-campaign__arrows button:hover { background: var(--st-well); border-color: #aeb4b9; }

/* Native dialog supplies modal focus containment, Escape and focus restoration. */
.op-catalogue-popup { position: fixed; inset: 0; width: min(850px, calc(100vw - 40px)); max-width: none; max-height: calc(100dvh - 40px); margin: auto; padding: 0; border: 0; border-radius: 6px; background: #fff; color: var(--st-ink); overflow: auto; font-family: var(--st-font); }
.op-catalogue-popup:not([open]) { display: none; }
.op-catalogue-popup[open] { display: grid; grid-template-columns: 1fr 1fr; }
.op-catalogue-popup::backdrop { background: rgba(14,17,20,.55); }
.op-catalogue-popup-open { overflow: hidden; }
.op-catalogue-popup__close { position: absolute; top: 12px; right: 12px; z-index: 2; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--st-line); border-radius: 50%; background: #fff; color: var(--st-ink); font: inherit; font-size: 25px; cursor: pointer; }
.op-catalogue-popup__art { display: flex; flex-direction: column; justify-content: space-between; gap: 30px; padding: 40px 28px 28px; background: #e4ebd6; overflow: hidden; }
.op-catalogue-popup__art > span { font-size: 28px; font-weight: 500; line-height: 1.1; letter-spacing: -.04em; }
.op-catalogue-popup__art img { width: 100%; height: auto; transform: rotate(-7deg); border-radius: 3px; }
.op-catalogue-popup__art small { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.op-catalogue-popup__copy { align-self: center; padding: 60px 34px 40px; }
body.op-premium .op-catalogue-popup h2 { margin: 20px 0; font-size: 38px; line-height: 1.05; letter-spacing: -.045em; }
.op-catalogue-popup__copy p { margin: 0 0 26px; font-size: 14px; line-height: 1.65; color: var(--st-ink2); }
.op-catalogue-popup .op-st-btn { width: 100%; justify-content: space-between; gap: 12px; padding: 0 20px; text-decoration: none; }
.op-catalogue-popup__later { display: block; margin: 16px auto 0; padding: 6px; border: 0; border-radius: 0; background: transparent; color: var(--st-ink2); font: inherit; font-size: 12px; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }

@media (max-width: 960px) {
  body.op-premium .op-campaign .op-campaign__inner { gap: 24px; }
  .op-campaign .op-st-btns { flex-direction: column; align-items: flex-start; gap: 0; }
  .op-campaign__selectors { gap: 20px; }
  .op-campaign__number { display: none; }
}
@media (max-width: 640px) {
  body.op-premium .op-campaign .op-campaign__inner { grid-template-columns: 1fr; align-content: center; gap: 16px; padding-top: 20px; padding-bottom: 20px; }
  body.op-premium .op-campaign h2 { font-size: 25px; margin-top: 10px; }
  body.op-premium .op-campaign .op-campaign__copy p { margin: 10px 0 0; font-size: 12px; max-width: 370px; }
  .op-campaign__eyebrow { font-size: 9px; }
  body.op-premium .op-campaign .op-st-btns { flex-direction: row; align-items: center; gap: 16px; }
  body.op-premium .op-campaign .op-st-btn { font-size: 11px; height: 42px; padding: 0 16px; gap: 12px; }
  .op-campaign__quote { font-size: 11px; gap: 8px; }
  body.op-premium .op-campaign .op-campaign__control-inner { height: 56px; }
  .op-campaign__selectors { gap: 4px; }
  .op-campaign__selectors button { width: 24px; justify-content: center; font-size: 0; }
  .op-campaign__number { display: block; font-size: 12px; }
  .op-campaign__arrows { gap: 6px; }
  .op-campaign__arrows button { width: 32px; height: 32px; }
  .op-catalogue-popup { width: min(420px, calc(100vw - 28px)); max-height: calc(100dvh - 28px); }
  .op-catalogue-popup[open] { grid-template-columns: 1fr; }
  .op-catalogue-popup__art { position: relative; min-height: 160px; padding: 26px 24px; justify-content: flex-start; }
  .op-catalogue-popup__art > span { font-size: 23px; max-width: 50%; }
  .op-catalogue-popup__art img { position: absolute; width: 46%; right: 14px; top: 40px; transform: rotate(9deg); }
  .op-catalogue-popup__art small { font-size: 8px; max-width: 50%; }
  .op-catalogue-popup__copy { padding: 28px 24px 22px; }
  body.op-premium .op-catalogue-popup h2 { font-size: 32px; margin: 14px 0; }
  .op-catalogue-popup__copy p { font-size: 13px; margin-bottom: 20px; }
}
@media (max-width: 360px) {
  body.op-premium .op-campaign .op-st-btns { gap: 10px; }
  body.op-premium .op-campaign .op-st-btn { font-size: 10px; padding: 0 12px; gap: 10px; }
  .op-campaign__quote { font-size: 10px; gap: 6px; }
}
/* Crossfade (JS adds .is-ready; without JS the hidden attribute still works).
   The incoming slide fades in on top while the outgoing one stays opaque
   underneath, then is hidden, so the page never shows through mid-fade. */
.op-campaign.is-ready .op-campaign__slide { z-index: 0; opacity: 0; visibility: hidden; }
.op-campaign.is-ready .op-campaign__slide.is-active { z-index: 1; opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: no-preference) {
  .op-campaign.is-ready .op-campaign__slide { transition: opacity 0s linear .7s, visibility 0s linear .7s; }
  .op-campaign.is-ready .op-campaign__slide.is-active { transition: opacity .7s cubic-bezier(.4, 0, .2, 1), visibility 0s; }
  .op-campaign.is-ready .op-campaign__art { transform: scale(1.04); transition: transform 0s linear .7s; }
  .op-campaign.is-ready .is-active .op-campaign__art { transform: scale(1); transition: transform 6s cubic-bezier(.2, .6, .3, 1); }
  .op-campaign.is-ready .op-campaign__inner > * { opacity: 0; transform: translateY(8px); transition: opacity 0s linear .7s, transform 0s linear .7s; }
  .op-campaign.is-ready .is-active .op-campaign__inner > * { opacity: 1; transform: none; transition: opacity .6s ease .15s, transform .6s cubic-bezier(.2, .6, .3, 1) .15s; }
}