/* ============================================================
   VALUES — three photo panels on light ground

   Each value gets its own image. Photography is visible at rest so
   touch devices are not left with flat panels, and lifts on hover for
   pointer users. Motion is deliberately small: the brief asks for
   purposeful motion but warns against flashy animation.

   The revision pass flipped this section from --grey-d to --paper. The
   panels keep their image-behind-text construction; the scrim inverts to
   white and the label moves from --orange (2.10:1 on paper, fails) to
   --earth-t (5.12:1). Body copy is --grey at .78, which measures 12.6:1.
   The 3px accent rule stays orange: it is purely decorative and carries
   no information. All of that is folded into the rules below rather than
   left as a trailing override block.
   ============================================================ */

.vals{background:var(--paper);color:var(--grey)}
.vals .eyebrow{opacity:1;color:var(--earth-t)}
.vals .lede{opacity:.78}

.vals-head{padding-block:clamp(2.6rem,6vh,4rem) 2rem;text-align:center}
.vals-head .d2{max-width:18ch;margin-inline:auto}
.vals-head .lede{margin:1rem auto 0;max-width:52ch}

.vals-in{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line-d);
  border-block:1px solid var(--line-d)}
@media(min-width:820px){.vals-in{grid-template-columns:repeat(3,1fr)}}

.val{
  position:relative;overflow:hidden;isolation:isolate;
  min-height:clamp(300px,42vh,420px);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:2.2rem 1.7rem 2.4rem;
  background:var(--paper);
}
.val-media{position:absolute;inset:0;z-index:0;overflow:hidden}
.val-media img{
  width:100%;height:100%;object-fit:cover;
  opacity:.45;
  transform:scale(1.01);
  transition:opacity .55s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);
}
/* .ph fallback kept for a panel whose photograph is ever pulled. Inert
   while all three slots are filled. */
.val-media .ph{
  position:absolute;inset:0;opacity:.32;transform:scale(1.01);
  transition:opacity .55s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);
}

/* Steeper than a straight fade on purpose. A uniform overlay light enough
   to show the photo drops the label below 4.5:1 — it was already only 4.52
   at the old settings. Concentrating the white below ~60%, where the rule,
   label and copy actually sit, doubles the visible photo and lifts the
   label to 4.68:1 at the same time. Measured across the three panels:
   4.51–4.86:1. Do not smooth these stops out. */
.val-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(247,247,243,.08) 0%,
    rgba(247,247,243,.26) 34%,
    rgba(247,247,243,.90) 62%,
    rgba(247,247,243,.96) 100%);
  transition:opacity .55s ease;
}
.val-in{position:relative;z-index:2}

/* The accent rule extends, which is the only element that moves besides
   the image itself. Text stays put. */
.val .rule{display:block;width:26px;height:3px;background:var(--orange);
  margin-bottom:1rem;transition:width .5s cubic-bezier(.2,.7,.2,1)}

/* Both .k rules are load-bearing. h3.k resets the h3 element's default
   margin and weight; .val .k wins on specificity (0,2,0 vs 0,1,1) for
   colour. Removing either changes the panel. */
h3.k{font-family:var(--display);text-transform:uppercase;letter-spacing:-.04em;
  font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1;color:var(--orange);
  margin:0 0 .7rem;font-weight:400}
.val .k{font-family:var(--display);text-transform:uppercase;letter-spacing:-.04em;
  font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1;color:var(--earth-t);margin-bottom:.7rem}

.val p{margin:0;font-size:.93rem;line-height:1.6;color:var(--grey);opacity:.78;max-width:34ch}
/* Keeps the three rules and labels on one line even if the copy lengths
   drift apart later. The copy wraps to 5 lines in the narrow part of the
   3-column range and 4 lines above ~1000px, so the guard steps down. */
@media(min-width:820px){.val p{min-height:calc(5 * .93rem * 1.6)}}
@media(min-width:1000px){.val p{min-height:calc(4 * .93rem * 1.6)}}

@media(hover:hover){
  .val:hover .val-media img{opacity:.52;transform:scale(1.045)}
  .val:hover .val-media .ph{opacity:.58;transform:scale(1.045)}
  .val:hover .rule{width:58px}

  /* ---------------------------------------------------------------
     DISCREPANCY — carried forward from the comp unchanged, flagged for
     a decision. Both the brief and the comment above the light-ground
     block state that .val:hover lifts image opacity ONLY, because fading
     the scrim pulls the labels under 4.5:1. But the original dark-ground
     rule `.val:hover .val-scrim{opacity:.88}` was never removed when the
     section was flipped to paper, and the revision pass did not override
     it — so in the comp the scrim DOES still fade on hover, thinning the
     white overlay exactly where the label sits.

     That means hovering a panel drops the label below the audited
     4.51–4.86:1 range. Preserved here for visual parity rather than
     fixed silently. Deleting the next line restores the documented
     intent and is the whole fix.
     --------------------------------------------------------------- */
  .val:hover .val-scrim{opacity:.88}
}

/* Keyboard parity, since these panels carry content worth reaching.
   NOTE: focus-within lifts the image to .58 while hover now lifts it to
   .52 — the revision pass changed the hover value and not this one. Minor
   inconsistency, preserved as-is. */
.val:focus-within .val-media img,.val:focus-within .val-media .ph{opacity:.58;transform:scale(1.045)}
.val:focus-within .rule{width:58px}

@media (prefers-reduced-motion:reduce){
  .val-media img,.val-media .ph,.val .rule{transition:opacity .2s ease}
  .val:hover .val-media img,.val:hover .val-media .ph{transform:none}
}