/* ── T31d: real OBX photos — About editorial + band + gallery + Services panels ── */
/* House tokens: --obx-ink, --obx-paper, --obx-hairline, --obx-brass, --obx-ease,
   --obx-font-display (Bodoni Moda serif), --obx-font-body (Inter), --obx-maxw 1200px */

/* Hero slow 3% push-in (CSS only, off under reduced motion) */
.page-hero--push .page-hero__media img {
  will-change: transform;
  animation: obx-hero-push 16s var(--obx-ease) infinite alternate;
  transform-origin: 50% 40%;
}
@keyframes obx-hero-push {
  from { transform: scale(1); }
  to   { transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  .page-hero--push .page-hero__media img { animation: none; transform: none; }
}

/* OUR WORK — editorial panels: image 7 cols / text 5 cols, hairline rules, small uppercase captions */
.work-panel {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  padding: clamp(48px, 7vw, 88px) 0;
  border-top: 1px solid var(--obx-hairline);
}
.work-panel:first-of-type { border-top: none; padding-top: clamp(24px, 3vw, 40px); }
.work-panel--rev { direction: rtl; }
.work-panel--rev > * { direction: ltr; }
.work-panel__media { display: block; margin: 0; }
.work-panel__media img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
  border: 1px solid rgba(11,27,43,.08);
}
.work-panel__body { display: flex; flex-direction: column; gap: 16px; }
.work-panel__eyebrow {
  font-family: var(--obx-font-body); font-size: .72rem; font-weight: 500;
  letter-spacing: .32em; text-transform: uppercase; color: #8A6A2F;
}
.work-panel__body h3 {
  font-family: var(--obx-font-display); font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.3rem); color: var(--obx-ink); margin: 0; line-height: 1.08;
}
.work-panel__body p {
  font-family: var(--obx-font-body); font-size: 1rem; line-height: 1.7; color: #3d4b57; margin: 0;
}
.work-panel__caption {
  font-family: var(--obx-font-body); font-size: .7rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: #5A6B78;
  margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--obx-hairline);
}
@media (max-width: 860px) {
  .work-panel, .work-panel--rev { grid-template-columns: 1fr; direction: ltr; gap: 24px; }
  .work-panel__media img { aspect-ratio: 16 / 10; }
}

/* FULL-BLEED PHOTO BAND (gentle parallax via cover + slow drift) */
.work-band { position: relative; height: clamp(440px, 66vh, 720px); overflow: hidden; }
.work-band__media { position: absolute; inset: 0; display: block; }
.work-band__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.work-band__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(7,20,32,.72) 0%, rgba(7,20,32,.28) 48%, rgba(7,20,32,.05) 100%);
}
.work-band__inner {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding: 0 24px clamp(40px, 7vw, 80px); text-align: center;
}
.work-band__eyebrow {
  font-family: var(--obx-font-body); font-size: .72rem; font-weight: 500;
  letter-spacing: .34em; text-transform: uppercase; color: var(--obx-brass, #C6A664);
}
.work-band__line {
  margin: 14px auto 0; max-width: 22ch;
  font-family: var(--obx-font-display); font-weight: 400;
  font-size: clamp(1.7rem, 4.2vw, 3.1rem); letter-spacing: -.01em; line-height: 1.12; color: #FAF8F3;
}

/* ASYMMETRIC FIELD GALLERY — 7 photos, varied row spans, hairline gutters, lightbox */
.field-gallery {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: clamp(120px, 15vw, 200px);
  gap: 14px;
  margin-top: clamp(32px, 5vw, 56px);
}
.fg {
  position: relative; padding: 0; border: 0; background: none; cursor: zoom-in;
  grid-column: span 2; grid-row: span 1;
  overflow: hidden; border: 1px solid rgba(11,27,43,.08);
}
.fg--tall { grid-row: span 2; }
.fg--wide { grid-column: span 3; }
.fg img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--obx-ease);
}
.fg:hover img, .fg:focus-visible img { transform: scale(1.05); }
.fg:focus-visible { outline: 2px solid var(--obx-brass); outline-offset: 2px; }
@media (max-width: 860px) {
  .field-gallery { grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(110px, 22vw, 170px); }
  .fg { grid-column: span 2; }
  .fg--wide { grid-column: span 4; }
  .fg--tall { grid-row: span 2; }
}
@media (max-width: 520px) {
  .field-gallery { grid-template-columns: repeat(2, 1fr); }
  .fg, .fg--tall, .fg--wide { grid-column: span 2; grid-row: span 1; }
}

/* Lightbox */
.lb-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(7,18,30,.92); backdrop-filter: blur(4px);
  padding: 4vh 4vw;
}
.lb-overlay[hidden] { display: none; }
.lb-overlay img {
  max-width: 100%; max-height: 92vh; object-fit: contain;
  border: 1px solid rgba(250,248,243,.12);
  box-shadow: 0 30px 90px -30px rgba(0,0,0,.7);
}
.lb-close {
  position: absolute; top: 18px; right: 22px;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(250,248,243,.3); background: transparent; color: #FAF8F3;
  font-size: 1.6rem; line-height: 1; cursor: pointer;
  transition: background .2s, border-color .2s;
}
.lb-close:hover { background: rgba(250,248,243,.1); border-color: rgba(250,248,243,.6); }

/* SERVICES — large split panel with real photo (replaces small svc-thumb) */
.svc-row--img {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 4vw, 56px);
  align-items: center; padding: clamp(36px, 5vw, 60px) 0;
  border-top: 1px solid var(--obx-hairline);
}
.svc-row--img .svc-thumb { display: block; margin: 0; }
.svc-row--img .svc-thumb img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
  border: 1px solid rgba(11,27,43,.08);
}
.svc-row--img > div { display: flex; flex-direction: column; gap: 18px; }
.svc-row--img > div h2 {
  font-family: var(--obx-font-display); font-weight: 400;
  font-size: clamp(1.7rem, 3vw, 2.4rem); color: var(--obx-ink); margin: 0; line-height: 1.08;
}
.svc-row--img > div p { font-family: var(--obx-font-body); font-size: 1rem; line-height: 1.72; color: #3d4b57; margin: 0; }
.svc-row--img .svc-ic { display: inline-grid; place-items: center; width: 52px; height: 52px;
  border: 1px solid var(--obx-hairline); color: var(--obx-ink); }
.svc-row--img .svc-ic svg { width: 26px; height: 26px; }
@media (max-width: 860px) {
  .svc-row--img { grid-template-columns: 1fr; gap: 22px; }
  .svc-row--img .svc-thumb img { aspect-ratio: 16 / 10; }
}

/* Tab crossfade: 1.2s photo swap (Services/Home tabs) */
.panel .exp-card__img, .panel .svc-thumb img {
  transition: opacity .6s var(--obx-ease);
}