.offline-poker-page { overflow: clip; }
.offline-poker-page .op-reveal { opacity: 0; transform: translateX(-12px); transition: opacity 300ms ease-out, transform 300ms ease-out; }
.offline-poker-page .op-reveal.is-visible { opacity: 1; transform: translateX(0); }
.offline-poker-page .op-text-link { color: var(--color-ink); font-size: var(--font-size-caption); font-weight: 700; letter-spacing: var(--tracking-caption); text-underline-offset: 0.24em; }
.offline-poker-page .op-text-link:hover { color: var(--color-action); }
.offline-poker-page .op-number { color: var(--color-river-mist); font-size: var(--font-size-caption); font-weight: 700; letter-spacing: var(--tracking-caption); }
.offline-poker-page .op-breadcrumb { display: flex; min-width: 0; align-items: center; gap: var(--space-2); color: var(--color-river-mist); font-size: var(--font-size-caption); font-weight: 600; letter-spacing: var(--tracking-caption); }
.op-hero { padding: var(--space-5) 0 var(--space-9); }
.op-hero__breadcrumb-wrap { margin-bottom: var(--space-5); }
.op-hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: var(--space-6); width: min(100% - (2 * var(--gutter)), var(--container-wide-max)); margin-inline: auto; }
.op-hero__copy { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-4); max-width: 32.5rem; }
.op-hero__copy > * { margin: 0; }
.op-hero__copy h1 { max-width: 8.8ch; }
.op-hero__statement { max-width: 24ch; font-family: var(--font-heading); font-size: clamp(1.35rem, 2.2vw, 2rem); font-weight: 600; line-height: 1.12; }
.op-hero__statement span { display: block; border-inline-start: 2px solid var(--color-action); padding-inline-start: var(--space-3); }
.op-hero__lead { max-width: 32ch; font-size: var(--font-size-body-large); line-height: var(--line-height-large); }
.op-hero__detail { max-width: 34ch; color: var(--color-text-muted); }
.op-hero__actions { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-2); }
.op-hero__cta { min-height: 3.5rem; }
.op-hero__media { position: relative; min-width: 0; margin: 0; overflow: visible; }
.op-hero__media img { width: 100%; min-height: 38.75rem; object-fit: cover; object-position: center; transition: transform var(--transition-base), filter var(--transition-base); }
.op-hero__media:hover img { transform: scale(1.015); filter: saturate(.94); }
.op-hero__caption { position: absolute; bottom: calc(var(--space-5) * -1); left: var(--space-5); max-width: 17.5rem; margin: 0; border: 1px solid var(--color-border); background: var(--color-ice-blue); padding: var(--space-3) var(--space-4); color: var(--color-ink); }
.op-principles { padding: var(--space-9) 0; }
.op-principles__intro { max-width: 37.5rem; }
.op-principles__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-7); }
.op-principle-card { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-4); border-top: 1px solid var(--color-border); background: var(--color-white-ceramic); padding: var(--space-6); transition: border-color var(--transition-fast), transform var(--transition-fast); }
.op-principle-card > * { margin: 0; }
.op-principle-card--lavender { background: var(--color-soft-lavender); }
.op-principle-card:hover, .op-principle-card:focus { border-top: 2px solid var(--color-action); transform: translateX(8px); outline: 0; }
.op-gestures { padding: var(--space-9) 0; background: var(--color-white-ceramic); }
.op-gestures__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-areas: "media copy" "media detail"; align-items: center; gap: var(--space-6) var(--space-7); }
.op-gestures__media { grid-area: media; min-width: 0; margin: 0; }
.op-gestures__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.op-gestures__copy { grid-area: copy; display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-4); max-width: 33.75rem; }
.op-gestures__copy > * { margin: 0; }
.op-gestures__copy blockquote { max-width: 28.75rem; }
.op-gestures__detail { grid-area: detail; display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-4); max-width: 33.75rem; }
.op-gestures__detail > * { margin: 0; }
.op-materials { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; max-width: 30rem; border: 1px solid var(--color-border); background: var(--color-white-ceramic); }
.op-materials > span { min-width: 0; padding: var(--space-3); font-size: var(--font-size-caption); font-weight: 700; letter-spacing: var(--tracking-caption); text-align: center; text-transform: uppercase; }
.op-materials > span + span { border-inline-start: 1px solid var(--color-border); }
.op-materials > span:focus { background: var(--color-ice-blue); outline: 0; }
.op-note { border-inline-start: 2px solid var(--color-action); padding-inline-start: var(--space-4); color: var(--color-text-muted); }
.op-route { padding: var(--space-9) 0; }
.op-route__intro { max-width: 40rem; margin-inline: auto; text-align: center; }
.op-timeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-7); }
.op-timeline__item { display: flex; min-width: 0; flex-direction: column; align-items: stretch; border-top: 1px solid var(--color-border); }
.op-timeline__item.is-active { border-top: 2px solid var(--color-action); }
.op-timeline__trigger { display: grid; grid-template-columns: max-content minmax(0, 1fr); width: 100%; min-width: 0; align-items: center; gap: var(--space-3); padding: var(--space-4) 0; color: var(--color-ink); font-family: var(--font-heading); font-size: 1.1rem; font-weight: 600; line-height: 1.15; text-align: left; }
.op-timeline__content { max-width: 32ch; color: var(--color-text-muted); }
.op-timeline__content p { margin: 0; }
.op-venues { padding: var(--space-9) 0; background: var(--color-pearl-grey); }
.op-venues__intro { max-width: 36.875rem; }
.op-venues__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: var(--space-5); margin-top: var(--space-7); }
.op-venue-card { display: flex; min-width: 0; min-height: 100%; flex-direction: column; align-items: flex-start; gap: var(--space-4); border: 1px solid var(--color-border); background: var(--color-white-ceramic); padding: var(--space-6); text-decoration: none; transition: background-color var(--transition-fast), transform var(--transition-fast); }
.op-venue-card > * { margin: 0; }
.op-venue-card--cool { margin-top: -1.25rem; background: var(--color-ice-blue); }
.op-venue-card--lavender { margin-top: 1rem; background: var(--color-soft-lavender); }
.op-venue-card span { margin-top: auto; border-bottom: 2px solid transparent; padding-top: var(--space-3); font-size: var(--font-size-caption); font-weight: 700; letter-spacing: var(--tracking-caption); text-transform: uppercase; }
.op-venue-card:hover, .op-venue-card:focus { background: var(--color-ice-blue); color: var(--color-ink); transform: translateX(8px); }
.op-venue-card:hover span, .op-venue-card:focus span { border-color: var(--color-action); }
.op-panorama { position: relative; min-height: 45rem; }
.op-panorama__media { position: absolute; inset: 0; margin: 0; }
.op-panorama__media::after { position: absolute; inset: 0; background: rgb(30 42 45 / 16%); content: ""; }
.op-panorama__media img { width: 100%; height: 100%; object-fit: cover; }
.op-panorama__layout { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); width: min(100% - (2 * var(--gutter)), var(--container-wide-max)); min-height: 45rem; margin-inline: auto; align-items: end; gap: var(--space-5); padding: var(--space-7) 0; }
.op-panorama__panel { grid-column: 6 / span 5; display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-4); max-width: 37.5rem; border: 1px solid var(--color-border); background: rgb(255 255 255 / 92%); padding: var(--space-7); }
.op-panorama__panel > * { margin: 0; }
.op-panorama__caption { max-width: 22rem; border-top: 1px solid var(--color-border); padding-top: var(--space-3); color: var(--color-river-mist); font-size: var(--font-size-caption); font-weight: 600; letter-spacing: var(--tracking-caption); }
.op-occasions { padding: var(--space-9) 0; background: var(--color-ice-blue); }
.op-occasions__intro { max-width: 47.5rem; }
.op-occasions__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: var(--space-5); margin-top: var(--space-7); }
.op-occasion-card { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-4); border: 1px solid var(--color-border); background: var(--color-white-ceramic); padding: var(--space-6); transition: border-color 260ms ease-out, transform 260ms ease-out; }
.op-occasion-card > * { margin: 0; }
.op-occasion-card ul { display: grid; width: 100%; gap: var(--space-2); padding-inline-start: 1.25rem; }
.op-occasion-card .op-text-link { margin-top: auto; }
.op-keyline { margin-top: auto; border-top: 1px solid var(--color-border); padding-top: var(--space-3); color: var(--color-river-mist); font-size: var(--font-size-caption); font-weight: 700; letter-spacing: var(--tracking-caption); text-transform: uppercase; }
.op-occasion-card:hover { border-color: var(--color-action); transform: translateY(-2px); }
.op-contact { padding: var(--space-9) 0; }
.op-contact__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; gap: var(--space-7); }
.op-contact__copy { max-width: 32.5rem; }
.op-contact__card { display: flex; min-width: 0; flex-direction: column; align-items: stretch; gap: var(--space-5); max-width: 40rem; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-white-ceramic); padding: var(--space-6); }
.op-contact__card > * { margin: 0; }
.op-contact__card dl { display: grid; gap: 0; }
.op-contact__card dl > div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); min-width: 0; gap: var(--space-4); border-bottom: 1px solid var(--color-border-subtle); padding: var(--space-3) 0; }
.op-contact__card dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.op-contact__card a { display: inline-block; }
.op-contact__check { border-top: 1px solid var(--color-border); padding-top: var(--space-4); }
.op-contact__check h4 { margin-bottom: var(--space-3); }
.op-contact__check ul { display: grid; gap: var(--space-2); margin: 0; }
.op-faq { padding: var(--space-9) 0; background: var(--color-white-ceramic); }
.op-faq__intro { max-width: 41.25rem; }
.op-faq__list { display: grid; width: min(100%, 57.5rem); gap: 0; margin-top: var(--space-7); }
.op-faq__item { min-width: 0; border-top: 1px solid var(--color-border); }
.op-faq__item:last-child { border-bottom: 1px solid var(--color-border); }
.op-faq__trigger { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; width: 100%; min-width: 0; min-height: 4.5rem; align-items: center; gap: var(--space-4); padding: var(--space-4) 0; color: var(--color-ink); font-family: var(--font-heading); font-size: clamp(1.1rem, 1.7vw, 1.35rem); font-weight: 600; line-height: 1.15; text-align: left; }
.op-faq__trigger > b { color: var(--color-satin-steel); font-size: 1.5rem; font-weight: 400; }
.op-faq__item.is-active .op-faq__trigger > b { color: var(--color-action); transform: rotate(45deg); }
.op-faq__answer { max-width: 40.625rem; padding: 0 0 var(--space-5) calc(var(--space-4) + 1.25rem); }
.op-faq__answer p:last-child { margin-bottom: 0; }
.op-inquiry { padding: var(--space-9) 0; background: var(--color-ice-blue); }
.op-inquiry__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: start; gap: var(--space-7); }
.op-inquiry__copy { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-4); max-width: 28.75rem; }
.op-inquiry__copy > * { margin: 0; }
.op-inquiry__statement { border-inline-start: 2px solid var(--color-action); padding-inline-start: var(--space-3); font-family: var(--font-heading); font-size: 1.25rem; font-weight: 600; line-height: 1.2; }
.op-form-panel { display: flex; min-width: 0; flex-direction: column; align-items: stretch; gap: var(--space-4); max-width: 50rem; border: 1px solid var(--color-border); background: var(--color-white-ceramic); padding: var(--space-6); }
.op-form-panel > * { margin: 0; }
.op-form-panel__help { max-width: 36.25rem; color: var(--color-text-muted); }
.op-form { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-5); }
.op-form__status { min-height: 1.2em; color: var(--color-ink); font-weight: 600; }
.op-form__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: var(--space-4); }
.op-field { min-width: 0; }
.op-field--full { grid-column: 1 / -1; }
.op-field textarea { min-height: 9rem; }
.op-field--check label { display: flex; min-width: 0; align-items: flex-start; gap: var(--space-2); margin: 0; text-transform: none; }
.op-field--check label span { min-width: 0; }
.op-error { display: block; min-height: 1.25em; margin-top: var(--space-1); color: #9b3318; font-size: var(--font-size-caption); font-weight: 600; }
.op-field [aria-invalid="true"] { border-color: #9b3318; box-shadow: 0 0 0 1px #9b3318; }
.op-form__submit { min-height: 3.25rem; }
.op-form__success { border-inline-start: 2px solid var(--color-action); padding: var(--space-4); background: var(--color-pearl-grey); font-family: var(--font-heading); font-size: 1.2rem; font-weight: 600; }
@media (max-width: 74.99rem) {
  .op-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .op-hero__copy { max-width: 36rem; }
  .op-hero__media img { min-height: 28rem; }
  .op-principles__grid, .op-venues__grid, .op-occasions__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .op-principle-card:last-child, .op-venue-card:last-child, .op-occasion-card:last-child { grid-column: 1 / -1; }
  .op-gestures__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "copy media" "detail media"; gap: var(--space-5); }
  .op-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .op-panorama { min-height: auto; }
  .op-panorama__media { position: relative; height: 34rem; }
  .op-panorama__layout { min-height: auto; padding: 0 var(--gutter) var(--space-7); }
  .op-panorama__panel { grid-column: 2 / span 8; margin-top: -6rem; }
  .op-contact__grid, .op-inquiry__grid { gap: var(--space-6); }
  .op-inquiry__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); }
}
@media (max-width: 59.99rem) {
  .op-gestures__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "media" "detail"; }
  .op-gestures__copy, .op-gestures__detail { max-width: 36rem; }
  .op-gestures__media img { aspect-ratio: 4 / 5; object-position: center; }
  .op-contact__grid, .op-inquiry__grid { grid-template-columns: minmax(0, 1fr); }
  .op-contact__copy, .op-inquiry__copy { max-width: 36rem; }
  .op-form-panel { max-width: none; }
  .op-panorama__layout { display: block; width: 100%; padding: 0; }
  .op-panorama__panel { max-width: none; margin: 0; border-inline: 0; }
}
@media (max-width: 51.24rem) {
  .op-principles__grid, .op-venues__grid, .op-occasions__grid, .op-timeline { grid-template-columns: minmax(0, 1fr); }
  .op-principle-card:last-child, .op-venue-card:last-child, .op-occasion-card:last-child { grid-column: auto; }
  .op-venue-card--cool, .op-venue-card--lavender { margin-top: 0; }
}
@media (max-width: 47.99rem) {
  .offline-poker-page .op-reveal { transform: translateX(-8px); }
  .op-hero { padding-bottom: var(--space-8); }
  .op-hero__breadcrumb-wrap { margin-bottom: var(--space-4); }
  .op-hero__grid { width: min(100% - (2 * var(--gutter)), var(--container-wide-max)); }
  .op-hero__copy { gap: var(--space-3); }
  .op-hero__copy h1 { max-width: 9.5ch; }
  .op-hero__lead { max-width: 34ch; font-size: 1.125rem; }
  .op-hero__detail { max-width: 34ch; }
  .op-hero__actions { width: 100%; flex-direction: column; align-items: stretch; gap: var(--space-3); }
  .op-hero__cta { width: 100%; }
  .op-hero__media img { min-height: 0; aspect-ratio: 4 / 5; object-position: 68% center; }
  .op-hero__caption { position: static; max-width: none; margin-top: var(--space-3); }
  .op-principles, .op-gestures, .op-route, .op-venues, .op-occasions, .op-contact, .op-faq, .op-inquiry { padding: var(--space-8) 0; }
  .op-principles__grid, .op-venues__grid, .op-occasions__grid { gap: var(--space-4); margin-top: var(--space-6); }
  .op-principle-card, .op-venue-card, .op-occasion-card { padding: var(--space-5); }
  .op-principle-card:hover, .op-principle-card:focus, .op-venue-card:hover, .op-venue-card:focus { transform: none; }
  .op-route__intro { text-align: center; }
  .op-timeline { position: relative; gap: 0; margin-top: var(--space-6); padding-left: var(--space-5); }
  .op-timeline::before { position: absolute; top: 0; bottom: 0; left: .45rem; width: 2px; background: var(--color-border); content: ""; }
  .op-timeline__item { position: relative; border-top: 0; }
  .op-timeline__item::before { position: absolute; top: 1.45rem; left: calc(var(--space-5) * -1 + .1rem); width: .75rem; height: .75rem; border: 2px solid var(--color-satin-steel); background: var(--color-white-ceramic); content: ""; }
  .op-timeline__item.is-active::before { border-color: var(--color-action); }
  .op-timeline__content { max-width: 42ch; padding-bottom: var(--space-4); }
  .op-materials { max-width: none; }
  .op-panorama__media { height: auto; }
  .op-panorama__media img { aspect-ratio: 4 / 5; object-position: center; }
  .op-panorama__panel { padding: var(--space-5) var(--gutter); }
  .op-contact__card { padding: var(--space-5); }
  .op-contact__card dl > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
  .op-contact__card dd a { min-height: 2.75rem; padding-top: var(--space-2); }
  .op-faq__list { margin-top: var(--space-6); }
  .op-faq__trigger { min-height: 3.5rem; gap: var(--space-3); }
  .op-faq__answer { padding-left: 0; }
  .op-form-panel { padding: var(--space-5); }
  .op-form__fields { grid-template-columns: minmax(0, 1fr); }
  .op-field--full { grid-column: auto; }
  .op-field input, .op-field select { min-height: 3rem; }
  .op-field textarea { min-height: 8.75rem; }
  .op-form__submit { width: 100%; min-height: 3.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .offline-poker-page .op-reveal { opacity: 1; transform: none; transition: none; }
  .op-hero__media:hover img, .op-principle-card:hover, .op-venue-card:hover, .op-occasion-card:hover { transform: none; }
}