/* Photo heroes on the articles and How we work. Loaded after ds.css, and only
   by the pages that use it; ds.css holds the shared photo hero (About,
   Contact, What we build), and this file adds nothing to those pages.

   The owner, 2026-10-22: every page uses its photograph as the background of
   its band, edge to edge ("pages that do not use images as background edge to
   edge"). This follows the photography brief's "Photos fill their panel" and
   Freya's direction V3: the photograph is the whole hero, hard-edged, nothing
   printed into it, and the text sits on its quiet part over a fade drawn here.

   data-side names that quiet part, as on the Knowledge strips, so no headline
   ever sits over a face:
   - no data-side: the text on the left (the shared hero in ds.css);
   - "right": the text on the right, the fade mirrored;
   - "bottom": for a photograph whose subject sits in the middle, or with
     people across the frame. The text sits at the hero's foot, over table,
     hands and clothing, on its own fade, and the crop keeps heads in frame.
   Under 900px every photo hero already sets its text at the foot (ds.css), so
   these variants are for wider screens. */
@media (min-width:900px){
  .fv-site section.page-hero.ds-photo-hero[data-side="right"]{ justify-content:flex-end; }
  .fv-site .ds-photo-hero[data-side="right"]::before{ background:linear-gradient(270deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.8) 40%, rgba(0,0,0,0) 62%); }
  .fv-site .ds-photo-hero[data-side="right"] .ai-label{ left:auto; right:var(--space-4); }

  .fv-site section.page-hero.ds-photo-hero[data-side="bottom"]{ align-items:flex-end; }
  .fv-site .ds-photo-hero[data-side="bottom"]::before{ display:none; }
  .fv-site .ds-photo-hero[data-side="bottom"] .ph-bg img{ object-position:50% 25%; }
  .fv-site .ds-photo-hero[data-side="bottom"] .ph-copy{ width:100%; margin:0; padding:calc(var(--pad-band) + 120px) var(--space-gutter) var(--pad-band);
    background:linear-gradient(0deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.8) calc(100% - 120px), rgba(0,0,0,0) 100%); }
  .fv-site .ds-photo-hero[data-side="bottom"] .stage-line{ max-width:24ch; }
  .fv-site .ds-photo-hero[data-side="bottom"] .stage-lead{ max-width:62ch; }

  /* where each photograph's subject sits, so the wide crop keeps it */
  .fv-site .ds-photo-hero .ph-bg img[src*="4c-munich-per-seat-spend"]{ object-position:40% 50%; }
}

/* phones and narrow tablets: the upright crop shows about a third of each
   photograph's width, so keep its subject in frame */
@media (max-width:899px){
  .fv-site .ds-photo-hero .ph-bg img[src*="city-newyork-founder"]{ object-position:80% 50%; }
  .fv-site .ds-photo-hero .ph-bg img[src*="city-london-partners"]{ object-position:62% 50%; }
  .fv-site .ds-photo-hero .ph-bg img[src*="4c-tokyo-human-creativity"]{ object-position:62% 50%; }
  .fv-site .ds-photo-hero .ph-bg img[src*="4c-newyork-aligned-knowledge"]{ object-position:36% 50%; }
  .fv-site .ds-photo-hero .ph-bg img[src*="4c-munich-per-seat-spend"]{ object-position:40% 50%; }
  .fv-site .ds-photo-hero .ph-bg img[src*="4c-newyork-supplier-typed-it-once"]{ object-position:80% 50%; }
  .fv-site .ds-photo-hero .ph-bg img[src*="city-munich-owner"]{ object-position:70% 50%; }
  .fv-site .ds-photo-hero .ph-bg img[src*="4c-london-dull-job-first"]{ object-position:62% 50%; }
  .fv-site .ds-photo-hero .ph-bg img[src*="4c-tokyo-stuck-in-the-pilot"]{ object-position:60% 50%; }
  .fv-site .ds-photo-hero .ph-bg img[src*="4c-london-five-year-plans"]{ object-position:42% 50%; }
}