/* ═══════════════════════════════════════════
   F5 Orientation — Page-scoped CSS
   ═══════════════════════════════════════════
   Used at /first5 via template-f5-orientation.php.
   Content is hardcoded in section partials — no ACF.
   Section-specific rules added in build prompts 2–7
   under labeled block comments.

   Build order: chassis (this file) → hero → plans →
   model → product-tile (reusable) → showcase →
   foundation-feels → put-you-first → faq wiring.

   Mobile-first per MOBILE-DESIGN-RULES.md. Base styles
   target mobile (375px+); larger screens layer on via
   min-width queries.

   CHANGELOG
   ─────────
   2026-05-25: Initial chassis (v2, hardcoded-content path).
   ═══════════════════════════════════════════ */

.wv-f5-orientation {
  display: block;
}

/* ── HERO ──────────────────────────────────────
   Full-bleed photographic hero. Cream text over
   image. Two CTAs. Background image asset pending —
   section falls back to solid var(--wv-color-text-primary)
   when /assets/images/f5-orientation/hero.jpg is missing.
   ─────────────────────────────────────────────── */

.wv-f5-orientation__hero {
  position: relative;
  /* z-index above Put You First's z: 1 stacking context so the
     tall-image bleed (which paints inside its parent at z: 1) can't
     overlap upper sections. Applied to every section above
     Foundation Feels — see plans-fall-apart / model / showcase. */
  z-index: 2;
  width: 100%;
  min-height: 420px; /* NEEDS DESIGNER REVIEW — mobile starter */
  padding: 0;
  /* Cream cascade default — overrides global typography class colors. */
  color: var(--wv-color-text-inverse);
  /* Dark fallback when the hero image asset doesn't exist. Intentional
     placeholder state; remove or revisit once asset ships. */
  background-color: var(--wv-color-text-primary);
  overflow: hidden;
}

.wv-f5-orientation__hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
}

/* Scrim/overlay scaffold for WCAG contrast review. Empty for now. */
/* NEEDS DESIGNER REVIEW: cream-on-photo can fail AA on bright spots.
   When designer specifies, add: background: linear-gradient(...); */
.wv-f5-orientation__hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.wv-f5-orientation__hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--wv-container-max);
  margin: 0 auto;
  padding: 48px 16px; /* NEEDS DESIGNER REVIEW — mobile starter */
  display: flex;
  flex-direction: column;
  gap: 24px; /* NEEDS DESIGNER REVIEW — mobile starter */
}

.wv-f5-orientation__hero-headline {
  max-width: 100%;
  color: inherit;
}

.wv-f5-orientation__hero-body {
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px; /* NEEDS DESIGNER REVIEW — mobile starter (between paragraphs) */
  color: inherit;
}

/* Cream-on-photo cascade: global .wv-body-lg / .wv-body-bold classes
   carry their own color: var(--wv-color-text-secondary), which beats
   the section root's cream color via specificity tie. Scoped overrides
   force inherit on the body wrapper + its <p> descendants + the class-
   scoped variants so cream paints regardless of CSS load order. */
.wv-f5-orientation__hero-body,
.wv-f5-orientation__hero-body p,
.wv-f5-orientation__hero-body .wv-body-lg,
.wv-f5-orientation__hero-body .wv-body-bold {
  color: inherit;
}

.wv-f5-orientation__hero-body strong {
  /* Prevent any later global strong → text-primary override on this
     inverse-bg section. */
  color: inherit;
}

.wv-f5-orientation__hero-cta-row {
  display: flex;
  flex-direction: column; /* stack on mobile, primary above secondary */
  gap: 12px;
  align-items: stretch;
}

.wv-f5-orientation__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* MOBILE-DESIGN-RULES.md: 44×44 minimum touch target. */
  min-height: 44px;
  padding: 12px 22px; /* NEEDS DESIGNER REVIEW — mobile starter */
  border-radius: var(--wv-radius-pill);
  border: 1px solid transparent;
  text-decoration: none;
  transition: var(--wv-transition-color);
}

.wv-f5-orientation__btn--primary {
  background: var(--wv-color-accent);
  color: var(--wv-color-text-inverse);
  border-color: var(--wv-color-accent);
}

.wv-f5-orientation__btn--primary:hover {
  background: var(--wv-color-atc-hover);
  border-color: var(--wv-color-atc-hover);
}

.wv-f5-orientation__btn--secondary {
  background: var(--wv-color-card-bg);
  color: var(--wv-color-text-primary);
  border-color: var(--wv-color-card-bg);
}

.wv-f5-orientation__btn--secondary:hover {
  background: transparent;
  color: var(--wv-color-text-inverse);
  border-color: var(--wv-color-text-inverse);
}

/* Tablet (768px+) ─────────────────────────── */
@media (min-width: 768px) {
  .wv-f5-orientation__hero {
    min-height: 480px; /* NEEDS DESIGNER REVIEW — tablet */
  }
  .wv-f5-orientation__hero-inner {
    padding: 64px 40px; /* NEEDS DESIGNER REVIEW — tablet */
    gap: 28px; /* NEEDS DESIGNER REVIEW — tablet */
  }
  .wv-f5-orientation__hero-headline {
    max-width: var(--wv-content-max); /* NEEDS DESIGNER REVIEW — tablet, keeps two-line wrap */
  }
  .wv-f5-orientation__hero-body {
    max-width: 480px; /* NEEDS DESIGNER REVIEW — tablet */
  }
  .wv-f5-orientation__hero-cta-row {
    flex-direction: row;
    gap: 16px;
    align-items: center;
  }
  .wv-f5-orientation__btn {
    padding: 14px 26px; /* NEEDS DESIGNER REVIEW — tablet */
  }
}

/* Desktop (1280px+) ──────────────────────── */
@media (min-width: 1280px) {
  .wv-f5-orientation__hero {
    min-height: 560px; /* NEEDS DESIGNER REVIEW — desktop */
  }
  .wv-f5-orientation__hero-inner {
    padding: 80px var(--wv-page-gutter); /* NEEDS DESIGNER REVIEW — desktop */
    gap: 32px; /* NEEDS DESIGNER REVIEW — desktop */
  }
  .wv-f5-orientation__btn {
    padding: 14px 28px; /* NEEDS DESIGNER REVIEW — desktop */
  }
}

/* ── PLANS FALL APART ──────────────────────────
   Two-column at desktop: composite image left,
   copy right. Sage section bg. Sticky notes are
   baked into the image asset (single PNG with
   transparency for overhangs). Image asset pending —
   section omits the media column entirely until
   /assets/images/f5-orientation/plans.png ships.
   ─────────────────────────────────────────────── */

/* (2026-06-02) Padding move from outer → inner across plans, model,
   feels, and put-you-first. Outer sections own only their VERTICAL
   padding now; .wv-f5-orientation__*-inner owns padding-inline:
   var(--wv-page-gutter), so each section's CONTENT max-width
   (var(--wv-container-max) = 1440, border-box) is 1440 INCLUSIVE of
   the page-gutter — matching shop / related-articles / learn-hub.
   Without this, content stretched to the full 1440 at ultra-wide
   viewports while every other surface stayed at 1344. */
.wv-f5-orientation__plans {
  position: relative;
  z-index: 2; /* above Put You First bleed — see .wv-f5-orientation__hero */
  background-color: var(--wv-color-surface);
  color: var(--wv-color-text-primary);
  padding: 64px 0; /* NEEDS DESIGNER REVIEW — mobile starter */
  /* overflow: visible required so sticky-note overhangs in the
     composite image asset aren't clipped at small viewports. */
  overflow: visible;
}

.wv-f5-orientation__plans-inner {
  max-width: var(--wv-container-max);
  margin: 0 auto;
  padding-inline: var(--wv-page-gutter);
  display: flex;
  flex-direction: column;
  gap: 40px; /* NEEDS DESIGNER REVIEW — mobile starter */
}

.wv-f5-orientation__plans-media {
  width: 100%;
  display: block;
  border-radius: var(--wv-radius-md);
  overflow: hidden;
}

.wv-f5-orientation__plans-image {
  width: 100%;
  height: auto;
  display: block;
  max-width: 560px; /* NEEDS DESIGNER REVIEW — caps image at mobile */
  margin: 0 auto;
}

.wv-f5-orientation__plans-copy {
  display: flex;
  flex-direction: column;
  gap: 24px; /* NEEDS DESIGNER REVIEW — mobile starter */
}

.wv-f5-orientation__plans-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px; /* NEEDS DESIGNER REVIEW — mobile starter */
}

.wv-f5-orientation__plans-item {
  display: flex;
  align-items: flex-start;
  gap: 14px; /* NEEDS DESIGNER REVIEW — mobile starter */
}

.wv-f5-orientation__plans-icon {
  flex-shrink: 0;
  /* Inline SVG strokes use currentColor; this paints it warning red. */
  color: var(--wv-color-warning);
  margin-top: 2px; /* fine-tune vertical alignment to first line of text */
}

.wv-f5-orientation__plans-cta {
  /* MOBILE-DESIGN-RULES.md: 44×44 minimum touch target. */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  color: var(--wv-color-text-primary);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: var(--wv-transition-color);
}

.wv-f5-orientation__plans-cta:hover {
  color: var(--wv-color-accent);
}

/* Tablet (768px+) ─────────────────────────── */
@media (min-width: 768px) {
  .wv-f5-orientation__plans {
    padding: 96px 0; /* NEEDS DESIGNER REVIEW — tablet */
  }
  .wv-f5-orientation__plans-inner {
    gap: 60px; /* NEEDS DESIGNER REVIEW — tablet */
  }
  .wv-f5-orientation__plans-image {
    max-width: 100%; /* reset mobile cap — image takes column width */
    margin: 0;
  }
  .wv-f5-orientation__plans-copy {
    gap: 26px; /* NEEDS DESIGNER REVIEW — tablet */
  }
}

/* Desktop (1280px+) ──────────────────────── */
@media (min-width: 1280px) {
  .wv-f5-orientation__plans {
    padding: 120px 0; /* NEEDS DESIGNER REVIEW — desktop */
  }
  .wv-f5-orientation__plans-inner {
    flex-direction: row;
    gap: 80px; /* NEEDS DESIGNER REVIEW — desktop */
    align-items: center;
  }
  .wv-f5-orientation__plans-media {
    flex: 1 1 50%; /* NEEDS DESIGNER REVIEW — desktop split */
  }
  .wv-f5-orientation__plans-copy {
    flex: 1 1 50%;
    gap: 28px; /* NEEDS DESIGNER REVIEW — desktop */
  }
}

/* ── MODEL ─────────────────────────────────────
   3 criteria cards. Cream section bg. Each card:
   image left with overlaid number badge, white
   panel right with body text. Image assets pending —
   cards render with placeholder bg + badge when
   any /assets/images/f5-orientation/model-*.jpg
   is missing.
   ─────────────────────────────────────────────── */

.wv-f5-orientation__model {
  position: relative;
  z-index: 2; /* above Put You First bleed — see .wv-f5-orientation__hero */
  background-color: var(--wv-color-background);
  padding: 64px 0; /* NEEDS DESIGNER REVIEW — mobile starter */
}

.wv-f5-orientation__model-inner {
  max-width: var(--wv-container-max);
  margin: 0 auto;
  padding-inline: var(--wv-page-gutter);
  display: flex;
  flex-direction: column;
  gap: 32px; /* NEEDS DESIGNER REVIEW — mobile starter */
  align-items: center;
}

.wv-f5-orientation__model-heading {
  text-align: center;
}

.wv-f5-orientation__model-intro {
  text-align: center;
  max-width: var(--wv-content-max); /* NEEDS DESIGNER REVIEW — mobile intro width */
  display: flex;
  flex-direction: column;
  gap: 12px; /* NEEDS DESIGNER REVIEW — mobile starter */
}

.wv-f5-orientation__model-intro p {
  /* defensive — paragraph helper output should already inherit center */
  text-align: center;
}

.wv-f5-orientation__model-cards {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px; /* NEEDS DESIGNER REVIEW — mobile starter */
}

.wv-f5-orientation__model-card {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  background: var(--wv-color-card-bg);
  border-radius: var(--wv-radius-md);
  overflow: hidden;
  min-height: 120px; /* NEEDS DESIGNER REVIEW — mobile starter */
}

.wv-f5-orientation__model-card-media {
  position: relative;
  flex: 0 0 40%; /* mobile: media takes 40% */
  /* Fallback bg when image asset is missing. */
  background-color: var(--wv-color-surface-2);
  overflow: hidden;
}

.wv-f5-orientation__model-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wv-f5-orientation__model-card-badge {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

/* Cream ring circle — sits above image, behind the number. */
.wv-f5-orientation__model-card-badge::before {
  content: '';
  position: absolute;
  width: 56px; /* NEEDS DESIGNER REVIEW — mobile badge size */
  height: 56px;
  border-radius: 50%;
  border: 1.5px solid var(--wv-color-text-inverse);
}

.wv-f5-orientation__model-card-number {
  position: relative; /* sits over the ::before ring */
  z-index: 2;
  color: var(--wv-color-text-inverse);
}

.wv-f5-orientation__model-card-body {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 16px 20px; /* NEEDS DESIGNER REVIEW — mobile starter */
}

.wv-f5-orientation__model-card-text {
  /* Override .wv-body's default text-secondary on this surface. */
  color: var(--wv-color-text-primary);
}

.wv-f5-orientation__model-closing {
  text-align: center;
  max-width: 900px; /* NEEDS DESIGNER REVIEW — closing line width */
  display: flex;
  flex-direction: column;
  gap: 12px; /* NEEDS DESIGNER REVIEW — mobile starter */
}

/* Tablet (768px+) ─────────────────────────── */
@media (min-width: 768px) {
  .wv-f5-orientation__model {
    padding: 96px 0; /* NEEDS DESIGNER REVIEW — tablet */
  }
  .wv-f5-orientation__model-inner {
    gap: 40px; /* NEEDS DESIGNER REVIEW — tablet */
  }
  .wv-f5-orientation__model-cards {
    flex-direction: row;
    gap: 16px; /* NEEDS DESIGNER REVIEW — tablet */
  }
  .wv-f5-orientation__model-card {
    flex: 1 1 0;
    min-height: 140px; /* NEEDS DESIGNER REVIEW — tablet */
  }
  .wv-f5-orientation__model-card-media {
    flex: 0 0 45%; /* tablet: media slightly wider */
  }
}

/* Desktop (1280px+) ──────────────────────── */
@media (min-width: 1280px) {
  .wv-f5-orientation__model {
    padding: 120px 0; /* NEEDS DESIGNER REVIEW — desktop */
  }
  .wv-f5-orientation__model-inner {
    gap: 48px; /* NEEDS DESIGNER REVIEW — desktop */
  }
  .wv-f5-orientation__model-cards {
    gap: 24px; /* NEEDS DESIGNER REVIEW — desktop */
  }
  .wv-f5-orientation__model-card {
    min-height: 160px; /* NEEDS DESIGNER REVIEW — desktop */
  }
  .wv-f5-orientation__model-card-badge::before {
    width: 64px; /* NEEDS DESIGNER REVIEW — desktop badge size */
    height: 64px;
  }
}

/* ── SHOWCASE ──────────────────────────────────
   Center-focused carousel of 5 product tiles
   over an olive section bg. Cream serif heading.
   Single blurb element below the carousel, swapped
   by JS based on which tile has data-focused="true".
   Tile assets pending — tiles render with accent
   color fill until /assets/images/f5-orientation/
   tile-*.png assets land.
   ─────────────────────────────────────────────── */

.wv-f5-orientation__showcase {
  position: relative;
  z-index: 2; /* above Put You First bleed — see .wv-f5-orientation__hero */
  /* accent olive is the fallback paint underneath the bg image —
     visible if the .webp 404s or while it decodes. */
  background-color: var(--wv-color-accent);
  background-image: url('../images/f5-orientation/img-our-f5-bg.webp');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  color: var(--wv-color-text-inverse);
  /* 0 horizontal — the carousel handles its own bleed at mobile. */
  padding: 64px 0; /* NEEDS DESIGNER REVIEW — mobile starter */
}

.wv-f5-orientation__showcase-inner {
  max-width: var(--wv-container-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  /* gap zeroed so the separator's own 4px gutters are exact and not
     stacked with parent-flex-gap. Heading→carousel spacing is
     preserved via heading.margin-bottom below. */
  gap: 0;
  align-items: stretch;
}

.wv-f5-orientation__showcase-heading {
  text-align: center;
  color: inherit;
  padding: 0 16px;
  margin-bottom: 32px; /* preserves heading→carousel spacing at mobile */
}

.wv-f5-orientation__showcase-carousel {
  width: 100%;
  /* Carousel flows to the full 1440px artboard so all 5 fixed-width
     tiles (221px each + 20px gaps = 1185px) fit visibly without
     edge crop. Section bg + bg image still bleed to viewport edges. */
  max-width: var(--wv-container-max);
  margin: 0 auto;
  position: relative;
}

/* Short vertical connector between the focused tile and the blurb
   below. 2px wide stroke in the section's cream text color; 8px
   margin top + bottom per designer. Designer-spec'd "short" — 24px
   tall as a reasonable starter; tune here if too tall/short. */
.wv-f5-orientation__showcase-separator {
  display: block;
  width: 2px;
  height: 50px;
  margin: 4px auto;
  background: var(--wv-color-text-inverse);
  flex-shrink: 0;
}

.wv-f5-orientation__showcase-blurb {
  text-align: center;
  max-width: 936px; /* 720 + 30% per designer */
  margin: 0 auto;
  padding: 0 16px;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 8px; /* NEEDS DESIGNER REVIEW — mobile starter */
}

/* Defensive cream cascade scope — see Hero body comment for rationale. */
.wv-f5-orientation__showcase-blurb,
.wv-f5-orientation__showcase-blurb .wv-h2,
.wv-f5-orientation__showcase-blurb .wv-h5 {
  color: inherit;
}

.wv-f5-orientation__showcase-blurb-name {
  color: inherit;
}

/* Reserve a fixed area for the wrapped blurb so the section's total
   height stays constant as users navigate between products with
   different blurb lengths (Multi/Probiotic fit one line at desktop;
   Omega/Calcium/Collagen wrap to 2). Worst-case line count per
   breakpoint × wv-h5's 24px line-height:
     mobile (<768)     5 lines × 24 = 120px (Collagen at ~343 wide)
     tablet (768-1279) 3 lines × 24 = 72px
     desktop (>=1280)  2 lines × 24 = 48px
   Inner flex centers single-line blurbs vertically in the reserved
   area so they don't pin to the top with empty space below. */
.wv-f5-orientation__showcase-blurb-text {
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
}

/* Replaces the prior `justify-content: safe center` flex layout
   with scroll-based centering. Adding padding-inline equal to
   (track_width - tile_width) / 2 means the first AND last tile can
   scroll all the way to viewport center, so click-to-focus produces
   a smooth-scroll animation at every viewport width — even when
   the 5 tiles would otherwise fit in the track natural width.
   Tiles are designer-locked 221px (see wv-product-tile.css). */
.wv-f5-orientation__showcase-carousel .wv-carousel__track {
  padding-inline: calc((100% - 221px) / 2);
}

/* Carousel slide-width override: base carousel sets
   .wv-carousel__track > * { flex: 0 0 82vw } at mobile so cards
   stretch. Showcase tiles are fixed-size (221×318) per designer
   spec — let the tile's own width win at every breakpoint.
   Mobile-first base (no media query); restored at tablet+ relies on
   the base carousel rule no longer applying since its breakpoint
   is also <768px. */
.wv-f5-orientation__showcase-carousel .wv-carousel__track > * {
  flex: 0 0 auto;
}

/* Tablet (768px+) ─────────────────────────── */
@media (min-width: 768px) {
  .wv-f5-orientation__showcase {
    padding: 96px 0; /* NEEDS DESIGNER REVIEW — tablet */
  }
  .wv-f5-orientation__showcase-heading {
    margin-bottom: 40px; /* preserves heading→carousel spacing at tablet */
  }
  .wv-f5-orientation__showcase-blurb-text {
    min-height: 72px; /* 3 lines × 24 — see comment on base rule */
  }
}

/* Desktop (1280px+) ──────────────────────── */
@media (min-width: 1280px) {
  .wv-f5-orientation__showcase {
    padding: 120px 0; /* NEEDS DESIGNER REVIEW — desktop */
  }
  .wv-f5-orientation__showcase-heading {
    margin-bottom: 48px; /* preserves heading→carousel spacing at desktop */
  }
  .wv-f5-orientation__showcase-blurb-text {
    min-height: 48px; /* 2 lines × 24 — see comment on base rule */
  }
  /* Tile sizing is fixed at 221×318 (designer spec, set in the base
     wv-product-tile.css). No additional desktop sizing needed here. */
}

/* ── FOUNDATION FEELS LIKE ─────────────────────
   COUPLED-SECTION PAIR: this section is bleed-safe
   (transparent background, content in upper half).
   Put You First (next section) bleeds its background
   image + gradient UPWARD through this section via
   negative margin-top + padding-top.
   Do NOT add a background-color rule here.

   Pattern precedent: Comparison Table (#19) ↔ Meet
   Dr. Neal (#20). Same z-index + transparency rules.

   Content layout:
   - Mobile: heading → body → benefits image stacked
   - Desktop: copy column left, benefits image right
   ─────────────────────────────────────────────── */

.wv-f5-orientation__feels {
  /* Misty cool-gray below desktop — blends the abrupt color shift where
     Put You First's bottom-aligned bg image bleeds upward into this
     section's reserved zone. At >= 1280 (see media block) this returns
     to transparent so the desktop bleed coordination between the two
     sections governs.
     z-index removed (2026-06-02): feels deliberately does NOT create
     a stacking context, so feels-copy (z-2) and feels-benefits (z-3)
     compete directly with sibling put-you-first (z-1) in the root
     context. Three clean layers: feels bg (auto/z-0) → put-you-first
     content (z-1) → feels-copy (z-2) → feels-benefits (z-3). */
  background: var(--wv-color-mist);
  position: relative;
  padding: 64px 0; /* NEEDS DESIGNER REVIEW — mobile starter */
}

.wv-f5-orientation__feels-inner {
  max-width: var(--wv-container-max);
  margin: 0 auto;
  padding-inline: var(--wv-page-gutter);
  display: flex;
  flex-direction: column;
  gap: 40px; /* NEEDS DESIGNER REVIEW — mobile starter */
}

.wv-f5-orientation__feels-copy {
  display: flex;
  flex-direction: column;
  gap: 20px; /* NEEDS DESIGNER REVIEW — mobile starter */
  /* Paint above Put You First's image bleed (z-1) — feels has no
     stacking context (no z-index) so this z-index competes directly
     in the root context. */
  position: relative;
  z-index: 2;
}

.wv-f5-orientation__feels-heading {
  color: var(--wv-color-text-primary);
}

.wv-f5-orientation__feels-body strong {
  /* Cascade override for the inline <strong> in p2 ("It's the First5."). */
  color: var(--wv-color-text-primary);
}

/* Static composite image replaces the prior 4-polaroid programmatic
   layout. Sized to the natural width of image-benefits.png and centered
   within its column. Transparent — sits over Put You First's upward
   bleed (handled at section level). */
.wv-f5-orientation__feels-benefits {
  display: block;
  width: 100%;
  /* Max ceiling so the image stops growing at a known size at wide
     viewports. As the viewport (and the right column) narrows below
     the ceiling, image scales down via the width: 100% rule. Starter
     value — adjust here per designer call. */
  max-width: 600px;
  height: auto;
  /* Lock the aspect-ratio (2000×1391 native = 1.438) so the image
     reserves a predictable height as the column resizes. */
  aspect-ratio: 2000 / 1391;
  object-fit: contain;
  background: transparent;
  /* Centered within its column when the max-width ceiling kicks in. */
  margin-inline: auto;
  /* Top-most layer in this section pair — paints above feels-copy (z-2)
     and Put You First's image bleed (z-1) so the polaroid composite
     stays fully visible at every breakpoint. */
  position: relative;
  z-index: 3;
}

/* Tablet (768px+) ─────────────────────────── */
@media (min-width: 768px) {
  .wv-f5-orientation__feels {
    padding: 96px 0; /* NEEDS DESIGNER REVIEW — tablet */
  }
  .wv-f5-orientation__feels-inner {
    gap: 60px; /* NEEDS DESIGNER REVIEW — tablet */
  }
}

/* Desktop (1280px+) ──────────────────────── */
@media (min-width: 1280px) {
  .wv-f5-orientation__feels {
    /* Bleed-pair primitive (2026-06-03) — upper half of the pair with
       Put You First below. Fixed height + transparent bg so the
       sibling section's bleed image (height: 1275 at desktop,
       anchored to lower section's bottom) paints up through this
       section's full 510 height. The old margin/padding gymnastics
       (matched padding-bottom to a sibling's margin-top: -480) are
       gone — sections stack normally and the image handles its own
       overflow via absolute positioning. */
    background: transparent;
    height: var(--wv-bleed-pair-upper);
    padding: 120px 0 0;
  }
  .wv-f5-orientation__feels-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); /* NEEDS DESIGNER REVIEW — column ratio */
    gap: 60px; /* NEEDS DESIGNER REVIEW — desktop */
    align-items: start;
  }
  .wv-f5-orientation__feels-copy {
    max-width: 480px; /* NEEDS DESIGNER REVIEW — copy width */
  }
}

/* ── PUT YOU FIRST ─────────────────────────────
   COUPLED-SECTION PAIR: this is the BLEED section.
   Background image extends UPWARD past this section's
   own top edge via margin-top: -240px + padding-top: 240px
   at desktop. Foundation Feels Like (#feels) has a matching
   padding-bottom: 240px reserved for this bleed.

   The 240px values are STARTER coordination points —
   tune in concert with #feels when designer reviews.

   z-index: 1 — UNDER #feels (which is z-index: 2).

   Background image asset pending — section falls back
   to var(--wv-color-text-secondary) solid placeholder
   uses a real <img> element (not background-image) absolutely
   positioned at the section bottom, sized to 100vw with height: auto.
   The image's natural height extends UPWARD past the section's top
   edge into Foundation Feels's transparent reserved zone.

   Full-bleed breakout pattern: width: 100vw + left: 50% +
   margin-left/right: -50vw escapes the page container so the section
   spans the actual viewport edges.
   ─────────────────────────────────────────────── */

.wv-f5-orientation__put-you-first {
  /* z-index: 1 — this section creates a stacking context for its
     absolutely-positioned bg image (which lives at z-index: -1 inside
     the context). With z-1, the image's upward bleed paints ABOVE
     #feels' mist bg (which is in the auto/0 root layer because
     #feels deliberately doesn't create a stacking context) but BELOW
     feels-copy (z-2) and feels-benefits (z-3). Three clean layers
     across the section pair at every breakpoint. */
  position: relative;
  z-index: 1;
  /* Full-bleed breakout */
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  /* Cream text on the (eventual) dark portrait/gradient image. Section-
     root cascade target per CLAUDE.md v8 Rule 3 exception. */
  color: var(--wv-color-text-inverse);
  padding: 64px 0; /* NEEDS DESIGNER REVIEW — mobile starter */
}

/* Real <img> mirroring Meet Dr. Neal PDP pattern. Absolutely positioned
   so its natural height extends upward past the section's top edge,
   bleeding into Foundation Feels's transparent zone above. */
/* Bleed-pair primitive image — fills the combined upper + lower zone
   (upper 510 + lower 765 = 1275 at desktop) at any viewport width
   via object-fit: cover, bottom-anchored. Replaces the prior
   `height: auto` approach that let the image scale to its natural
   aspect at 100vw, producing wildly different heights as viewport
   width changed and overlapping/clipping nearby content. */
.wv-f5-orientation__put-you-first-image {
  position: absolute;
  left: 50%;
  margin-left: -50vw;
  bottom: 0;
  width: 100vw;
  /* Mobile bleed amount: ~240px above Put You First section per
     designer call (2026-06-03). Image height = section height + bleed.
     Scaling roughly proportional across tiers; designer can tune. */
  height: 600px;
  z-index: -1;
  pointer-events: none;
  display: block;
  object-fit: cover;
  object-position: center bottom;
}
@media (min-width: 768px) {
  .wv-f5-orientation__put-you-first-image {
    height: 900px;
  }
}
@media (min-width: 1280px) {
  .wv-f5-orientation__put-you-first-image {
    height: calc(var(--wv-bleed-pair-upper) + var(--wv-bleed-pair-lower));
  }
}

.wv-f5-orientation__put-you-first-inner {
  position: relative;
  z-index: 1;
  max-width: var(--wv-container-max);
  margin: 0 auto;
  padding-inline: var(--wv-page-gutter);
  display: flex;
  flex-direction: column;
}

.wv-f5-orientation__put-you-first-content {
  display: flex;
  flex-direction: column;
  gap: 16px; /* NEEDS DESIGNER REVIEW — mobile starter */
  /* Right-column placement applied at every breakpoint (2026-06-02) —
     used to flip only at ≥1280, which left the copy/CTA hanging
     against the LEFT edge at tablet + mobile. Inner is a column
     flex container, so align-self: flex-end pushes the content
     block to the right edge of the inner; align-items + text-align
     right-align its children. */
  align-self: flex-end;
  align-items: flex-end;
  text-align: right;
  max-width: 540px; /* NEEDS DESIGNER REVIEW — mobile content width */
}

.wv-f5-orientation__put-you-first-headline {
  color: inherit;
}

.wv-f5-orientation__put-you-first-body {
  color: inherit;
}

.wv-f5-orientation__put-you-first-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* MOBILE-DESIGN-RULES.md: 44×44 minimum touch target. */
  min-height: 44px;
  padding: 12px 24px; /* NEEDS DESIGNER REVIEW — CTA padding */
  background: var(--wv-color-text-primary);
  color: var(--wv-color-text-inverse);
  border-radius: var(--wv-radius-pill);
  text-decoration: none;
  transition: var(--wv-transition-color);
}

.wv-f5-orientation__put-you-first-cta:hover {
  background: var(--wv-color-accent);
}

.wv-f5-orientation__put-you-first-microcopy {
  color: inherit;
  letter-spacing: var(--wv-tracking-wide);
}

/* Tablet (768px+) ─────────────────────────── */
@media (min-width: 768px) {
  .wv-f5-orientation__put-you-first {
    padding: 96px 0; /* NEEDS DESIGNER REVIEW — tablet */
  }
  .wv-f5-orientation__put-you-first-content {
    gap: 20px; /* NEEDS DESIGNER REVIEW — tablet */
    max-width: 600px; /* NEEDS DESIGNER REVIEW — tablet content width */
  }
}

/* Desktop (1280px+) ──────────────────────── */
@media (min-width: 1280px) {
  .wv-f5-orientation__put-you-first {
    /* Bleed-pair primitive (2026-06-03) — lower half of the pair.
       Fixed height; image inside positions absolutely and reaches up
       through the upper section. No negative margin / no padding
       gymnastics. z-index: 1 (base rule) still creates the stacking
       context for the bleed image at z: -1 within. */
    height: var(--wv-bleed-pair-lower);
    padding: 0 0 120px;
  }
  .wv-f5-orientation__put-you-first-inner {
    min-height: 480px; /* NEEDS DESIGNER REVIEW — vertical room for right-aligned content */
  }
  .wv-f5-orientation__put-you-first-content {
    /* align-self / align-items / text-align now live in the base
       block (2026-06-02) so the copy/CTA stays in the right column
       at every breakpoint. Desktop-only additions: tighter content
       width, larger inter-element gap, and bottom-anchoring inside
       the min-height: 480 inner. */
    max-width: 480px; /* NEEDS DESIGNER REVIEW — desktop content width */
    gap: 24px; /* NEEDS DESIGNER REVIEW — desktop */
    margin-top: auto; /* push content vertically toward the bottom */
  }
}