/* =========================================================
   CASE STUDY: WELLNESS AFLOAT
   Uses the shared case study styles (anything-marketplace.css,
   natz-nailz-and-beauty.css, property-sphere.css); this file only adds
   what differs.
========================================================= */

/* A photo still to come: a quiet grey panel with its label */
.wa .wa-ph{display:flex;flex-direction:column;justify-content:flex-end;gap:10px;aspect-ratio:16/10;padding:28px;background:#f3f3f3;border:1px solid rgba(11,10,9,.08)}
.wa .wa-ph b{font:italic 400 22px/1.2 var(--serif, 'Playfair Display', Georgia, serif);color:#0b0a09}
.wa .wa-ph .am-lab{color:#670505}
.wa .am-on-dark .wa-ph{background:#1a1a1a;border-color:rgba(255,255,255,.12)}
.wa .am-on-dark .wa-ph b{color:#fff}
.wa .am-on-dark .wa-ph .am-lab{color:#c8102e}

/* 04 Before & after: both mockups in the same-sized space, shown whole on the
   white page (no panel behind them), so they line up and nothing stretches */
.wa .nz-ba{align-items:start}
.wa .wa-ba-frame{position:relative;aspect-ratio:16/10;overflow:hidden}
.wa .wa-ba-frame img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;background:none;border:0}
.wa .wa-ba-frame .wa-ph{position:absolute;inset:0;aspect-ratio:auto}

/* The homepage video */
.wa .wa-video video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#1a1a1a}

/* Six objectives in a 3 x 2 grid */
.wa .wa-objectives .am-buyer{border-bottom:1px solid rgba(11,10,9,.12)}
.wa .wa-objectives .am-buyer:nth-child(3n+1){padding-left:0}
.wa .wa-objectives .am-buyer:nth-child(3n){border-right:0}

/* Liv's review is short: one column */
.wa .nz-review-body{columns:1;max-width:860px}

@media (max-width:1100px){
  .wa .wa-objectives{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wa .wa-objectives .am-buyer:nth-child(n){padding-left:32px;border-right:1px solid rgba(11,10,9,.16)}
  .wa .wa-objectives .am-buyer:nth-child(2n+1){padding-left:0}
  .wa .wa-objectives .am-buyer:nth-child(2n){border-right:0}
}
@media (max-width:700px){
  .wa .wa-objectives{grid-template-columns:minmax(0,1fr)}
  .wa .wa-objectives .am-buyer:nth-child(n){padding-left:0;border-right:0}
  .wa .wa-ph{padding:20px}
  .wa .wa-ph b{font-size:18px}
}