/* ═══════════════════════════════════════════════════════════════════════════
   DRIIF — COMPANY (About Us) page-specific layout only.
   Copy is the user's own, supplied directly for this page's Story/Vision,
   Core Values, Leadership and CTA sections. Reuses .hero/.media/.split/
   .eyebrow/.cta-band from components.css exactly as nexus.html and viper.html
   do; what's below is what's actually specific to this page: the centred
   hero copy, the Story/Vision divided list, the Core Values full-bleed grid,
   the leadership team grid, and the Partners placeholder.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── HERO: centred, not left/bottom-aligned ─────────────────────────────────
   .hero-copy (components.css) defaults to left-aligned single-column copy,
   and .hero-inner anchors that copy to the BOTTOM of the hero — right for
   nexus/viper's eyebrow+heading+lead+CTA stack, but the live company page's
   hero is a single centred headline with no eyebrow or CTA row under it, so
   it sits centred on the hero image both ways instead of pinned to its
   bottom edge. .hero-inner is overridden here rather than in components.css
   since this file only ever loads on company.html — nexus/viper still get
   the shared bottom-anchored default. */
.hero-inner{ justify-content:center; }
.company-hero-copy{ align-items:center; text-align:center; max-width:var(--measure-display);
  margin-inline:auto; }


/* ── LEADERSHIP: three-up team grid ────────────────────────────────────────
   Three named founders, always shown together — unlike .pillars (tuned to
   step from 1 to 2 to 3 columns for a longer capability list), this locks
   to 3-up as soon as there's room, single column below that. Card styling
   follows .card-notch's light-ground note: on .surface-light a filled dark
   card would fight the ground, so the card stays flush with the surface and
   is separated by a hairline border instead, matching the design system's
   own reasoning for card treatment on a light section. */
.team-grid{ display:grid; grid-template-columns:1fr; gap:var(--gutter);
  margin-top:var(--section-y-sm); }
@media (min-width:800px){
  .team-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
.team-card{ display:flex; flex-direction:column;
  border:var(--hair) solid var(--color-border); background:var(--color-bg); }
.team-photo{ aspect-ratio:1/1; overflow:hidden; border-bottom:var(--hair) solid var(--color-border); }
.team-photo img{ display:block; width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.06); }
.team-body{ padding:var(--space-6); display:flex; flex-direction:column; }
.team-role{ margin-top:var(--space-1); }
.team-body p{ margin-top:var(--space-4); }


/* ── STORY / VISION ──────────────────────────────────────────────────────
   A divided list, not two separate .split sections — reads as one argument
   in two movements rather than two unrelated sections. Same label-left/
   body-right shape as .split, at a narrower label column since these labels
   are two or three words, not a full heading. Vision's paragraph opts into
   the big t-h2 caps treatment inline (see company.html) rather than a
   dedicated class, since it's the one row that's a single declarative line
   instead of running body copy. Core Values used to run as a third row
   here (copy was TBD) but now ships as its own full-bleed section below —
   a divided list works for two rows that both stay left-label/right-body,
   but four short, equal-weight statements read better as a grid of their
   own than as a third row cramped into this format. */
.story-list{ display:flex; flex-direction:column; }
.story-row{ display:grid; grid-template-columns:1fr; gap:var(--space-3);
  padding:var(--space-7) 0; border-top:var(--hair) solid var(--color-border-subtle); }
.story-row:first-child{ border-top:var(--hair) solid var(--color-border-subtle); }
@media (min-width:1024px){
  .story-row{ grid-template-columns:minmax(0,3fr) minmax(0,9fr); column-gap:var(--gutter-lg); }
  .story-row h3{ padding-top:var(--space-1); }
}
.story-row p{ max-width:var(--measure-body); margin:0; }
/* Our Story runs three paragraphs, not one — .story-row p's margin:0 assumed
   a single child, so the stack gets its own gap instead of relying on that. */
.story-copy{ display:flex; flex-direction:column; gap:var(--space-4); }


/* ── CORE VALUES: full-bleed 2-up grid ─────────────────────────────────────
   Requested explicitly as "that applications box layout... like a 2/2
   grid" — .app-tiles/.tile (home.css) is the reference: a full-bleed grid
   of boxes on a hairline background so the gaps between them read as a
   single rule rather than four separate borders, an index number pinned to
   the top corner, and the heading+copy anchored to the bottom of the box
   via justify-content:flex-end. Values have no imagery though, so unlike
   .tile this skips the .media layer and the separate .tile-cap band (that
   band exists only to give caption text a legible strip over a photo) —
   here the whole box is one flat surface and the text can sit directly on
   it. 2-up rather than .app-tiles' 3-up: four values divide evenly into a
   2x2 grid, matching what was asked for; three would leave the last row
   uneven.
   The index tints accent instead of .tile-idx's muted default — with no
   photo to carry visual weight, the number is what gives each box a focal
   point, so it borrows the same accent already used for CTAs. Set directly
   here rather than via the shared .accent utility: .accent and .t-meta are
   both single-class selectors of equal specificity, and .t-meta's own
   color declaration (base.css) sits below .accent's in that same file, so
   .accent silently lost the cascade when tried as a third class on the
   element. Declaring it here instead wins cleanly — this file loads after
   base.css, so a same-specificity rule here always takes it.
   The section runs .surface-dark (originally shipped .surface-light) —
   every colour below is one of the semantic tokens (--color-bg,
   --color-text, --color-border-subtle, .muted's --color-text-muted) that
   tokens.css redeclares per surface class, so the flip to black needed no
   other change here: .value-tile's background is --color-bg (now black,
   matching the section ground it sits on, same as .tile on Applications),
   .values-grid's background is --color-border-subtle (now a faint WHITE
   hairline instead of a dark one) so the grid lines still read against the
   new ground, and h3/p ink follow --color-text/--color-text-muted the same
   way. Only .value-idx's accent yellow was hand-set rather than token-
   driven, and it already reads correctly on either ground. */
/* .values-grid runs edge-to-edge with no --edge inset of its own (unlike
   .app-tiles-wrap's matching left-flush convention), so its true centre is
   the page's own centre (0 to 100vw). #values .bleed is inset by --edge on
   both sides symmetrically, so ITS centre is that same page centre too —
   centring the heading inside .bleed therefore lines it up with the grid's
   centre below even though the two containers are different widths. */
#values .bleed{ text-align:center; }
.values-grid{ display:grid; grid-template-columns:1fr; gap:var(--hair);
  background:var(--color-border-subtle); margin-top:var(--section-y-sm);
  border-block:var(--hair) solid var(--color-border-subtle); }
@media (min-width:800px){ .values-grid{ grid-template-columns:repeat(2,1fr); } }
.value-tile{ position:relative; background:var(--color-bg);
  min-height:280px; display:flex; flex-direction:column; justify-content:flex-end;
  padding:var(--space-7) var(--space-6) var(--space-6); }
.value-idx{ position:absolute; top:var(--space-6); left:var(--space-6);
  color:var(--color-accent); }
.value-tile h3{ margin-bottom:var(--space-3); }
.value-tile p{ max-width:var(--measure-card); margin:0; }
@media (min-width:1024px){
  .value-tile{ min-height:340px; padding:var(--space-8); }
}