/* ======================================================================
   Our Story page (our-story.html), desktop 1440, round 1.
   Contract: docs/BUILD-CONTRACT-our-story-r1.md. Wireframe: Figma 126:1862.
   Linked last. The hero is the persona hero master (css/persona-hero.css), the chapters are the workflow card master
   (css/workflow.css .wf-cards), coverage is the shared archetype (partials/coverage.html), band and footer are Home's.
   Everything here is scoped to .os-* or to this page's hero / chapter row; nothing restyles another page.
   ====================================================================== */

.os-secondary { color: var(--pn-color-text-secondary); }
.os-muted { color: var(--pn-color-text-muted); }

/* Section/Intro (49:294): eyebrow, heading, lead; 24 apart, 760 wide */
.os-intro { max-width: 760px; display: flex; flex-direction: column; align-items: flex-start; gap: var(--pn-space-24); }
.os-intro .t-lead { text-wrap: pretty; }

/* ---------- OS01 Origin hero (136:2320) ----------
   Owner 2026-10-29: the photo is the hero's full-bleed background, not the split's right column. The subject (reviewer
   and screen) fills the left and centre of the frame, so the copy sits bottom-left over the dark shirt and chair where
   it stays legible, and the face and the screen stay clear above it. Two scrims: a bottom fade into the canvas so the
   photo melts into the page (house rule: images straight on the page, no box), and a soft left darkening under the copy.
   Height = the photo's own 16:9 at 1440 (810): nothing is cropped at the design width; wider or narrower viewports cover. */
.os-hero {
  --os-hero-min: 840px; /* 30 over the photo's 16:9 so the copy clears the screen's bottom edge; the photo scales 1.04, 27 cropped each side */
  --os-hero-bottom: calc(var(--pn-space-64) + var(--pn-space-16)); /* 80: no space/80 token */
  position: relative; isolation: isolate; overflow: hidden;
  min-height: var(--os-hero-min);
  padding-top: var(--pn-header-height); padding-bottom: var(--os-hero-bottom);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.os-hero__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 0;
}
.os-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--pn-color-background-canvas) 0%, transparent) 36%,
      color-mix(in srgb, var(--pn-color-background-canvas) 74%, transparent) 70%,
      var(--pn-color-background-canvas) 100%),
    linear-gradient(90deg,
      color-mix(in srgb, var(--pn-color-background-canvas) 55%, transparent) 0%,
      color-mix(in srgb, var(--pn-color-background-canvas) 25%, transparent) 42%,
      color-mix(in srgb, var(--pn-color-background-canvas) 0%, transparent) 72%);
}
.os-hero__inner { position: relative; }
.os-hero__text { max-width: 560px; } /* the wireframe's text column */
.os-hero .ph-hero__lead { color: var(--pn-color-text-primary); } /* over a photo the secondary grey reads weak; primary at the lead's light weight */
/* entrance: the photo fades up while the copy rises (site.css @keyframes rise via .ph-hero__rise) */
@keyframes os-hero-bg-in { from { opacity: 0; } to { opacity: 1; } }
.js .os-hero__bg { animation: os-hero-bg-in 900ms var(--pn-ease-out) both; }
@media (prefers-reduced-motion: reduce) { .js .os-hero__bg { animation: none; } }

/* ---------- OS02 Team (136:2676) ----------
   Owner 2026-10-29: the profiles follow a pasted "agents grid" pattern (shadcn Team2): centred raised cards, the 96
   circle avatar floating over the card's top edge inside a page-coloured ring, a hover lift, a hairline above the
   bottom row. Tailored: name + role + bio + logo chips instead of phone, email and a listings stat; no card border
   (house rule), the lift is a 4px rise plus the raisedHover fill instead of a shadow. Each card spans three rows of the
   team grid (subgrid), so names, bios and chip rows line up across the row whatever the bio length. */
.os-team {
  --os-avatar: 96px;
  --os-avatar-ring: 6px;
  --os-card-pad: var(--pn-space-24);
  margin: calc(var(--pn-space-64) + var(--os-avatar) / 2) 0 0; /* 64 under the intro + room for the half-avatar above the cards */
  padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--pn-space-24);
}
.os-profile {
  position: relative; min-width: 0;
  display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: var(--pn-space-24); justify-items: center;
  padding: calc(var(--os-avatar) / 2 + var(--os-card-pad)) var(--os-card-pad) var(--os-card-pad);
  text-align: center;
  background: var(--pn-color-background-surface); border-radius: var(--pn-radius-card-l); /* owner 2026-10-29: darker at rest (surface, one step over the canvas); the hover lifts to raised */
  transition: transform 300ms var(--pn-ease-out), background-color 300ms var(--pn-ease-out);
}
.os-profile:hover { transform: translateY(-4px); background: var(--pn-color-background-raised); }
.os-profile__photo {
  position: absolute; top: calc(-1 * var(--os-avatar) / 2); left: 50%; translate: -50% 0;
  display: block; width: var(--os-avatar); height: var(--os-avatar); aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 0 0 var(--os-avatar-ring) var(--pn-color-background-canvas); /* the ring: page colour, so the avatar reads as floating across the card edge */
  filter: saturate(.72) contrast(1.04); /* one treatment for four cameras: colour kept, saturation pulled a third */
}
.os-profile__id { display: flex; flex-direction: column; gap: var(--pn-space-8); }
.os-profile .t-body-m { text-wrap: pretty; }
.os-chips { /* bare white logos at their native 16, one line per card (two pills wrapped on Matt's card and pushed every divider apart) */
  margin: 0; padding: var(--pn-space-24) 0 0; list-style: none; width: 100%; align-self: end;
  display: flex; justify-content: center; align-items: center; gap: var(--pn-space-24);
  border-top: 1px solid var(--pn-color-border-decorative);
}
.os-chip { display: inline-flex; align-items: center; height: 20px; }
.os-chip img { display: block; height: 16px; width: auto; max-width: 128px; object-fit: contain; opacity: .9; } /* width capped so the wide Action Aerials wordmark weighs like the others */
.os-chip--stack img { height: 32px; } /* owner 2026-10-29 "billy's logo is too small": the Axis BC lockup is stacked (mark over wordmark), so at the wordmark height of 16 it vanishes; it gets twice the height to read at the same weight */

/* ---------- OS03 Founding narrative (136:2740) ---------- */
.os-story__lead { max-width: 640px; color: var(--pn-color-text-primary); text-wrap: pretty; }
/* the card master with Contractors' card shape, the master's 48 column gap. Owner 2026-11-01, later the same day ("this should
   be a small gap not a big gap"): like the Platform stages, this row follows a lead, not a step, so it does not take the step
   rhythm: the row sits 64 below the lead, the numeral's digit tops at the card top, the title 80 under the digit tops (the
   same relation as the Contractors and Platform rows). */
.os-chapters {
  --wf-card-num-top: 0px;
  --wf-card-text-top: var(--pn-space-48);
  --wf-card-head-min: var(--wf-card-title-lh); /* all three titles are one line at 1440: reserve one, not two, so the body sits 16 under the title */
  margin-top: var(--pn-space-64);
}
.os-chapter { padding-top: var(--pn-space-32); } /* owner 2026-11-01: card hairline off, like the step rule in css/workflow.css; the 32 stays so nothing shifts */
/* owner 2026-11-01 ("no need for different colors, make them all white"): the two-tone title is gone; the whole title is
   text/primary and the .os-hl phrase only drops its italic. */
.os-chapter .wf-card__title { color: var(--pn-color-text-primary); }
.os-hl { font-style: normal; color: inherit; }
.os-chapter .wf-card__body { font: var(--pn-type-text-body-m); } /* contract: Text/Body-M */

/* ---------- OS04 Vision figure (r4) ----------
   The Municipalities "Vision" bento drawing at its NATIVE scale (1 SVG unit = 1 px, stroke 1.25, fig6's cube / block /
   road / plate sizes) on a 608 x 420 canvas with more of it: 3 x 3 plate, 9 low cubes, 10 rising blocks. Generated by
   docs/qa/round9/gen-os-vision-svg.py. A one-cell bento, so css/bento.css (vocabulary, dotted ground, run state) and
   js/bento.js drive it; the cell drops the grid's hairlines and height and the drawing renders 1:1, centred on the intro. */
.os-vision { align-items: center; }
.os-vision .os-intro { max-width: 608px; }
.os-vision__fig.bento { display: block; margin: 0; }
.os-vision__fig.bento::before { content: none; }
.os-vision__fig .bento__cell { height: 420px; border: 0; }
.os-vision__fig .bento__fig { height: 420px; padding-top: 0; }
.os-vision__fig .bento__svg { width: 608px; height: 420px; }
/* the loop: the mu-b6 mechanism (css/site.css) extended. Base = the most complete frame (every block up). Each block
   (--i = arrival order) rises out of its plot through its clip path from --sink, holds, fades, comes back as a flush
   outline; one keyframe, delays --i x 0.9 s on a 9 s loop, so a block starts rising every 0.9 s. The plate tilts 1deg
   once per loop, as in mu-b6-map. */
.os-vision__fig .os-v-map { transform-box: fill-box; transform-origin: 50% 50%; animation: os-v-map 9s ease-in-out var(--bd) infinite both paused; }
.os-vision__fig .os-v-new { animation: os-v-new 9s ease-in-out calc(var(--bd) + var(--i) * 0.9s) infinite both paused; }
.os-vision__fig.is-running :is(.os-v-map, .os-v-new) { will-change: transform, opacity; }
@keyframes os-v-new {
  0%, 4.4% { opacity: 1; transform: translateY(var(--sink)); }
  11.1%, 72% { opacity: 1; transform: none; }
  80% { opacity: 0; transform: none; }
  80.1% { opacity: 0; transform: translateY(var(--sink)); }
  88%, 100% { opacity: 1; transform: translateY(var(--sink)); }
}
@keyframes os-v-map { 0%, 60% { transform: none; } 68%, 78% { transform: skewY(-1deg); } 88%, 100% { transform: none; } }

/* owner 2026-11-01: the section after the hero sits the page's big gap (288) below the hero's last text line (the hero box
   carries 80 of bottom padding, so the margin is 288 - 80); the story section sits the small gap (64) below the team cards. */
.page-main > .os-hero + section { margin-top: calc(var(--section-gap) - var(--pn-space-64) - var(--pn-space-16)); }
.page-main > #story { margin-top: var(--pn-space-64); }

/* ======================================================================
   Responsive tiers (docs/BUILD-CONTRACT-responsive-2026-11-04.md, builder 2A).
   Vision: the 608 x 420 drawing is native scale on its canvas, so below the contract it scales whole (width 100% of its
   cell, capped at 608, height from the viewBox) instead of letterboxing in a fixed 420 box; at tablet the section
   stacks (intro, then the drawing centred). Team: 4 -> 2 x 2 -> 1, the card rows far enough apart for the avatar that
   floats half over each card's top edge. Hero (tablet and phone): the photo becomes a 16:9 band under the header that melts into
   the canvas, and the copy sits under it on solid ground instead of over the screen in the photo.
   ====================================================================== */

/* ---- responsive: laptop (2026-11-04) ---- */
@media (max-width: 1279px) {
  .os-vision__fig .bento__cell, .os-vision__fig .bento__fig { height: auto; }
  .os-vision__fig .bento__svg { width: 100%; max-width: 608px; height: auto; }
  /* four cards of ~220 at 1024: the logos may take a second line rather than run past the card; the chip row is a
     shared subgrid row, so each card's divider sits at that row's top (start, not end) and stays level when one card's
     logos wrap */
  .os-chips { flex-wrap: wrap; column-gap: var(--pn-space-16); row-gap: var(--pn-space-12); align-self: start; }
}

/* ---- responsive: tablet (2026-11-04) ---- */
@media (max-width: 1023px) {
  .os-team {
    grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--pn-space-32);
    row-gap: calc(var(--pn-space-48) + var(--os-avatar) / 2); /* 48 between a card's foot and the next avatar's top */
  }
  .os-vision { grid-template-columns: minmax(0, 1fr); row-gap: var(--pn-space-64); }
  .os-hero {
    --os-photo-h: calc(100vw * 9 / 16);
    min-height: 0;
    padding-top: calc(var(--pn-header-height) + var(--os-photo-h) + var(--pn-space-32));
  }
  .os-hero__bg { inset: var(--pn-header-height) 0 auto; height: var(--os-photo-h); }
  .os-hero::before {
    inset: var(--pn-header-height) 0 auto; height: var(--os-photo-h);
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--pn-color-background-canvas) 0%, transparent) 55%,
      var(--pn-color-background-canvas) 100%);
  }
}

/* ---- responsive: phone (2026-11-04) ---- */
@media (max-width: 767px) {
  /* owner 2026-11-04 ("can you make them 2x2?"): two columns on phone too (was one). Cards of ~167 at 390: 16 gap and
     16 card padding, the avatar 80, the bios wrap to more lines and the logo chips wrap (tablet rule) */
  .os-team { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--pn-space-16); --os-card-pad: var(--pn-space-16); --os-avatar: 80px; }
}