/* Van Praag AI Agency — /team
   Loaded AFTER assets/home-v2.css, by the four team pages only. It adds; it never
   redefines a homepage selector. That is deliberate: home-v2.css serves four live
   homepages, and a page that is new has no business changing them.

   DIRECTIONAL PROPERTIES ARE LOGICAL, NOT PHYSICAL — same contract as home-v2.css.
   The Hebrew page mirrors for free; a `left:` here would be right in English and
   silently wrong in Hebrew.

   ---------------------------------------------------------------------------
   THE ONE IDEA THIS FILE EXISTS TO CARRY.

   Leib, 21.8.2026: one human works at Van Praag, and the rest of the team are
   agents. The page must never read as "staff", and the obvious layout — a row of
   colleagues with portraits — is exactly what would break it: give an agent a
   face and it becomes a fake person, so the page is dishonest again in a new way.

   So the difference is STRUCTURAL, not captioned:

     the human   ->  the only photograph on the page. Large. Serif name. Warm.
     the agents  ->  no image slot exists at all. A panel with a monospace name,
                     a status dot and one line of what it made — the same visual
                     language the homepage hero already uses for an agent doing
                     work (.panel / .phead / .dot / .mono).

   A person is described by presence, an agent by output. Two different kinds of
   object, so they must not look like two variants of one card. If a future edit
   ever puts an avatar, an initial-circle or a generated face in .agent, the whole
   argument of the page is gone — that is the one change to refuse.
   ========================================================================== */

/* ---------- the top band ----------
   NOT .hero: that is 100svh with a reserved console column, which is right for a
   homepage and wrong for a page you arrive at already convinced to read. This is
   a normal section that clears the fixed header. */
.tophero{padding:calc(96px + clamp(40px,7vh,84px)) 0 clamp(46px,7vh,78px);
  background:linear-gradient(180deg,var(--cream),var(--panel) 78%,var(--panel))}
.tophero h1{font-family:var(--serif);font-weight:450;letter-spacing:-.02em;
  font-size:clamp(2.15rem,4.6vw,3.9rem);line-height:1.03;margin:0 0 24px;max-width:24ch}
/* Two sentences, each balancing on its own lines — the homepage's .hero h1 .l
   contract, and the reason it exists: one balance pass over both sentences
   orphans a word. Per language the break lands wherever that language needs it. */
.tophero h1 .l{display:block;text-wrap:balance}
/* 52ch, not 44: at 44 the German lede ran four short lines under a headline
   spanning ~1000px, and the column read thin rather than deliberate. Measured on
   the longest of the four languages, which is what sets this. */
.tophero .lede{max-width:52ch;font-size:clamp(1.02rem,1.35vw,1.2rem);text-wrap:pretty}

/* ---------- the human ----------
   .96fr/1.04fr rather than 1fr/1fr: the portrait is 4:5, so an equal split makes
   it taller than the prose beside it and the section reads bottom-heavy. */
.human{background:var(--white)}
.humangrid{display:grid;grid-template-columns:.96fr 1.04fr;
  gap:clamp(28px,5vw,64px);align-items:center}
/* NO PHOTO YET (23-08-2026: Leib is sending one).
   Collapsing the grid to one column was not enough on its own: the section then
   read as a headline, a hairline and one small paragraph sitting in ~1100px of
   white -- a hole where a picture should be, and the human came out LESS present
   than the six agents below him, which inverts the whole argument of the page.
   So with no photograph the section carries his sentence instead: serif, at
   pull-quote size, with the name above it as the attribution. Presence by voice
   rather than by face. The moment SHOW_PHOTO flips, .nophoto disappears and every
   rule here goes with it -- the photo layout is untouched. */
.humangrid.nophoto{grid-template-columns:1fr}
/* MEASURED: .humangrid IS the .wrap, so narrowing it with a max-width moved the
   whole block inward -- the name and the sentence started 192px from the page edge
   while the H1 two sections above started at 64px, and the section read as a stray
   inset panel. The measure belongs on the SENTENCE, never on the wrap. */
.humangrid.nophoto .said{font-family:var(--serif);font-weight:450;
  font-size:clamp(1.42rem,2.9vw,2.15rem);line-height:1.28;letter-spacing:-.017em;
  color:var(--ink);max-width:30ch;margin-top:22px;text-wrap:balance}
/* the name steps back to a label so the sentence is the loudest thing here */
.humangrid.nophoto h2{font-size:clamp(1.32rem,2vw,1.6rem)}
html[lang="he"] .humangrid.nophoto .said{max-width:26ch}
.portrait{position:relative;margin:0}
.portrait img{width:100%;border-radius:18px;border:1px solid var(--line);
  box-shadow:0 40px 80px -44px rgba(60,45,15,.55)}
/* An offset hairline frame used to live here as "the one ornament on the page".
   It never painted: a z-index:-1 pseudo-element of a .portrait that sets
   position:relative and no z-index goes behind the section background, not behind
   the photo. Caught by cropping the rendered corner, not by reading the CSS.
   Removed rather than repaired -- drawn on top it would run a gold line across
   Leib's face, and the photograph already reads as the exception because it is
   the only one and it is captioned as such. */
.portrait figcaption{margin-top:16px;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-deep)}
.human h2{font-family:var(--serif);font-size:clamp(1.8rem,3vw,2.5rem);max-width:none}
.human .said{margin:18px 0 0;font-size:clamp(1.02rem,1.3vw,1.16rem);line-height:1.62;
  color:var(--ink);max-width:36em}
@media (max-width:900px){
  .humangrid{grid-template-columns:1fr}
  /* the photograph leads on a phone: it is the whole point of the section */
  .portrait{order:-1;max-width:420px}
}

/* ---------- the six agents ----------
   .panel-like, but flat: the homepage panels are tilted in CSS 3D because they
   are a spectacle. These are a register, so they sit square and quiet. */
.agents{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.agent{background:var(--white);border:1px solid var(--line);border-radius:14px;
  padding:20px 22px 18px;display:flex;flex-direction:column;
  transition:border-color .3s,box-shadow .3s}
.agent:hover{border-color:var(--gold);box-shadow:0 22px 46px -30px rgba(60,45,15,.35)}
.alt .agent{background:var(--cream)}
/* the header line: a live dot, the name in monospace, the job label at the far end.
   Identical grammar to .phead in the hero console, which is what ties the page to
   the rest of the site without repeating the 3D. */
.agent .ahead{display:flex;align-items:center;gap:9px;margin-bottom:14px;
  padding-bottom:12px;border-bottom:1px solid rgba(184,137,31,.16)}
/* Latin name inside a Hebrew page: isolate it, or the bidi algorithm reorders it
   against the Hebrew label sitting on the same line. */
.agent .aname{font-family:var(--mono,ui-monospace,"SF Mono","Cascadia Mono","Segoe UI Mono",Menlo,monospace);
  font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-.01em;
  direction:ltr;unicode-bidi:isolate}
.agent .aname{flex:0 0 auto}
/* min-width:0 so a long label (German "DIE AGENTEN", Hebrew) wraps inside its own
   box instead of pushing the monospace name out of the card. Measured at 374px,
   which is the narrowest the three-up grid gets. */
.agent .arole{margin-inline-start:auto;min-width:0;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-deep);font-weight:700;text-align:end;
  line-height:1.35}
/* NOT .job -- home-v2.css already owns .job as the homepage jobs-board row, which
   is `display:grid` with four columns, `padding:13px 18px` and a border-bottom.
   Named .job here, this paragraph was silently laid out as the first cell of that
   grid: a ~100px column wrapping to ten lines, with a stray hairline under it. A
   class collision with a shared stylesheet does not error and does not warn. It
   was caught by cropping the rendered element and looking at it. */
/* text-wrap:pretty so a three-line job line does not end on one orphaned word.
   It happened in Hebrew ("...בארבע / שפות.") and in German. */
.agent .awhat{margin:0;font-size:15px;line-height:1.5;color:var(--ink-soft);
  text-wrap:pretty}
/* the bottom slot is the same slot a services card gives a price. Here it holds
   the one thing the agent actually made — the page's proof, one line per agent. */
.agent .made{margin-top:auto;padding-top:16px;font-family:var(--serif);
  font-size:1.02rem;line-height:1.35;color:var(--gold-deep)}
.agent .made s{display:block;text-decoration:none;font-family:var(--sans);
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);
  margin-bottom:5px}
.agent .made a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line)}
.agent .made a:hover{border-bottom-color:var(--gold-deep)}
/* Leib 21-08-2026: one example per agent was not enough — he wanted to see much
   more of what each has actually done. <details>, not a script: it is keyboard-
   and screen-reader-navigable for free, and it starts CLOSED so the six cards keep
   the scannable equal shape the whole page argues with. No link per item, his call.
   Logical properties throughout (padding-inline-start / inset-inline-start), so the
   Hebrew page mirrors it without a second rule. Still no image slot — giving an
   agent a face is the one thing this page must never do. */
.agent .wmore{margin-top:10px}
.agent .wmore summary{cursor:pointer;list-style:none;display:inline-block;
  font-family:var(--sans);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);border-bottom:1px solid var(--line);padding-bottom:3px}
.agent .wmore summary::-webkit-details-marker{display:none}
.agent .wmore summary::after{content:" +"}
.agent .wmore[open] summary::after{content:" \2212"}
.agent .wmore summary:hover{color:var(--gold-deep);border-bottom-color:var(--gold-deep)}
.agent .wlist{margin:12px 0 0;padding:0;list-style:none}
.agent .wlist li{position:relative;padding-inline-start:14px;margin-bottom:7px;
  font-family:var(--sans);font-size:13.5px;line-height:1.45;color:var(--ink-soft)}
.agent .wlist li:last-child{margin-bottom:0}
.agent .wlist li::before{content:"";position:absolute;inset-inline-start:0;top:.52em;
  width:5px;height:5px;border-radius:50%;background:var(--gold-soft)}
@media (max-width:980px){ .agents{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .agents{grid-template-columns:1fr} }

/* the single sentence that carries the hard boundary. Big enough that nobody can
   say they did not see it, quiet enough that it is not a slogan. */
.noteworthy{margin:40px 0 0;padding-top:26px;border-top:1px solid var(--line);
  font-family:var(--serif);font-size:clamp(1.14rem,1.9vw,1.55rem);line-height:1.34;
  letter-spacing:-.015em;color:var(--ink);max-width:34ch;text-wrap:balance}

/* ---------- the film ----------
   The source Leib pointed at is 9:16 (1080x1920) and would be a 700px-tall column
   on a desktop. The SAME film exists as a 1920x1080 master, so the placement
   problem answers itself: use the landscape cut in a 16:9 box, capped so it never
   outgrows a comfortable reading width, and it behaves on a phone as an ordinary
   embed instead of a full-screen tower. Measured at 1440/1280/768/390. */
.film{background:var(--white)}
.filmbox{position:relative;max-width:960px;margin:40px auto 0;
  border-radius:16px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 40px 80px -44px rgba(60,45,15,.5);background:var(--panel)}
/* aspect-ratio on the wrapper, not a padding hack: no layout shift while the
   poster loads, and the box is the right height before the video has any metadata. */
/* img as well as video: while the film is out for a recut the box holds its own
   poster as a still, and the box must not change size when the film comes back. */
.filmbox video,.filmbox img{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#000}
.filmcap{max-width:60ch;margin:26px auto 0;text-align:center;font-size:15.6px;
  line-height:1.6;color:var(--ink-soft);text-wrap:pretty}
.filmcap strong{color:var(--ink);font-weight:600}
/* the dated honesty note. Small print by size, not by hiding: it says the film is
   from July and that its roster has moved on. */
.filmnote{max-width:56ch;margin:16px auto 0;text-align:center;font-size:12.5px;
  line-height:1.55;color:var(--ink-soft)}
.filmnote b{color:var(--gold-deep);font-weight:600}
@media (max-width:600px){ .filmcap{text-align:start} .filmnote{text-align:start} }

/* ---------- who is responsible ----------
   The page's own question, asked and answered, between the film and the ask.
   A CREAM band sitting between two var(--white) sections (.film above, .closer
   below): the ground changes so the answer reads as its own moment, and the hue
   does not, because gold stays the only accent on the page.
   English only for now -- the generator does not emit this section on /de/,
   /he/ or /nl/ until the copy has been written in those languages.
   WHEN THE HEBREW IS WRITTEN: a spaced phone number reverses in RTL and any
   Latin island needs isolating, so if a number is ever printed in this block it
   needs its own bidi treatment and a look at the rendered PDF, not the source. */
.account{background:var(--cream);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);text-align:center}
.account .head{margin-inline:auto}
.account .kicker{justify-content:center}
/* 20ch, not 24: "You call me." is three words and must not have room to wrap. */
.account h2{margin:0 auto;max-width:20ch;font-size:clamp(2rem,3.6vw,3rem)}
.account .rule{margin-inline:auto}
.account .acct{max-width:58ch;margin:20px auto 0;
  font-size:clamp(1rem,1.28vw,1.14rem);line-height:1.62;color:var(--ink-soft);
  text-wrap:pretty}
/* the one sentence that actually answers the question carries the ink weight,
   so it survives the squint test when the two around it do not. */
.account .acct.key{color:var(--ink);font-weight:600}
@media (max-width:600px){ .account{text-align:start}
  .account .kicker{justify-content:flex-start} .account .rule{margin-inline:0} }

/* ---------- close ---------- */
.closer{text-align:center}
.closer .kicker{justify-content:center}
.closer h2{margin:0 auto;max-width:24ch}
.closer .lede{margin-inline:auto}
.closer .cta{justify-content:center;margin-top:30px}

/* ---------- Hebrew ----------
   .kicker and the small labels carry letter-spacing:.24em and uppercase. Hebrew
   has no case, so the uppercase is a no-op, but tracking pulls Hebrew letters
   apart and reads as broken type. Scoped to these pages: home-v2.css serves the
   live Hebrew homepage and has the same fault, which is a separate fix Leib has
   to approve on its own. */
html[lang="he"] .kicker,
html[lang="he"] .portrait figcaption,
html[lang="he"] .agent .arole,
html[lang="he"] .agent .made s,
html[lang="he"] .agent .wmore summary{letter-spacing:.02em;text-transform:none}
/* Latin runs inside Hebrew prose. <bdi> already isolates; this stops a mixed run
   inheriting Hebrew tracking and keeps the wordmark reading as a wordmark. */
html[lang="he"] bdi{unicode-bidi:isolate}
/* Hebrew is shorter than the Latin languages at the same point size, so the
   headline measure has to come in or the two lines go slack. */
html[lang="he"] .tophero h1{max-width:20ch}
html[lang="he"] .noteworthy{max-width:30ch}

/* ---------- QA ----------
   home-v2.css already forces .reveal/.rv to their finished state under body.qa.
   The film is the one thing a capture cannot settle by itself: a <video> with a
   poster paints at its own pace, so pin the poster as a background too and a
   screenshot never comes back with a black box where the film is. */
body.qa .filmbox{background-image:var(--qa-poster);background-size:cover;
  background-position:center}
/* .tophero's padding is clamp(..,7vh,..). A full-page capture uses a page-tall
   viewport, which re-resolves that vh against the whole document and inflates the
   band by hundreds of pixels -- so the capture shows a layout that never existed.
   Pin it, exactly like body.qa .hero does on the homepage. */
body.qa .tophero{padding-top:150px;padding-bottom:60px}


/* ==========================================================================
   ADDED 23-08-2026 -- Leib: "this page needs to be much better", and: put a
   picture on every agent, and the real film in the film slot.

   What was actually wrong, measured on the render rather than guessed:
     * the human section was an empty half-page (the photo had been pulled)
     * six agent cards, each four short lines, with the good material collapsed
       behind a "MORE +" nobody opens six of
     * the biggest image on the page was a still whose caption apologised for the
       film not being there
   All three are structural, so all three are fixed in the structure.

   DIRECTIONAL PROPERTIES STAY LOGICAL. A `left:` here is right in English and
   silently wrong in Hebrew.
   ========================================================================== */

/* ---------- the agent card, now with a picture ----------
   The card becomes a picture plus a body. .agent already sets flex-column, so the
   picture is item one and .abody is item two; .abody carries the flex column that
   .made's `margin-top:auto` needs in order to stay pinned to the bottom edge, and
   without it the artefact line would pin against the CARD and float away from the
   text it belongs to. Measured at 1440 / 1280 / 980 / 600 / 390. */
.agent{padding:0;overflow:hidden}
.agent .abody{display:flex;flex-direction:column;flex:1 1 auto;padding:18px 22px 18px}
.agent .apic{margin:0;line-height:0;background:var(--panel);
  border-bottom:1px solid rgba(184,137,31,.16)}
.agent .apic img{display:block;width:100%;height:auto;aspect-ratio:960/417;
  object-fit:cover;
  /* the stills come out of a warm 3D render and the page is cream and gold, so
     they are pulled toward the page rather than the page toward them. Kept mild:
     at full grayscale they read as stock, and at full saturation as a different
     brand. */
  filter:saturate(.9) contrast(1.02)}
.agent:hover .apic img{filter:saturate(1) contrast(1.03)}
/* the head line loses its own top padding now that the picture provides the edge */
.agent .ahead{margin-bottom:12px}

/* ---------- the work items that stand open ----------
   Same list as inside <details>, so an item does not change shape when it moves
   between open and collapsed. .wtop only adds the space above it. */
.agent .wtop{margin-top:13px}
.agent .wmore{margin-top:9px}
/* .made keeps margin-top:auto from the block above and stays the card's last line */

/* ---------- the honesty line under the six ----------
   Small, stated once, and BEFORE .noteworthy so the page's own hard sentence
   ("nothing they make reaches you until I have read it") still closes the section.
   Not a disclaimer in a footer: a reader who works out for himself that the desks
   are not real, after the page did not say so, has caught us out. */
.picnote{margin:34px 0 0;padding-top:24px;border-top:1px solid var(--line);
  font-size:13.5px;line-height:1.55;color:var(--ink-soft);max-width:52ch}
.picnote + .noteworthy{margin-top:22px;padding-top:0;border-top:0}

/* ---------- the film, as a film ----------
   The whole 16:9 master with its sound and its burned Hebrew subtitles, so the box
   is 16:9 and the subtitles are IN it -- an earlier silent cut had that band cropped
   away, and reusing its 2.34:1 box here would have sliced the subtitles off.
   The aspect sits on the box AND the element: the box so the page reserves the right
   hole before any metadata arrives, the element so the picture fills it.
   object-fit:contain, not cover: this frame is composed, and cover would crop the
   subtitle line off the bottom on any box that is a pixel off 16:9. */
.filmbox{aspect-ratio:16/9;max-width:1000px}
.filmbox video{display:block;width:100%;height:100%;aspect-ratio:16/9;
  object-fit:contain;background:#000}
/* The native control bar is the one piece of UI on this page we do not draw, so it
   gets the corner radius at least, and does not fight the gold. */
.filmbox video::-webkit-media-controls-enclosure{border-radius:0 0 15px 15px}

/* ---------- narrow ----------
   The three-up grid drops to two at 980 and one at 600 (already above). With a
   picture on each card the two-up column gets to 340px, where the 2.3:1 image is
   ~148px tall -- still a room rather than a stripe. Checked, not assumed. */
@media (max-width:600px){
  .agent .abody{padding:16px 18px 16px}
  .picnote{max-width:none}
}

/* ---------- QA ----------
   A <video> paints at its own pace and a capture can come back with a black box.
   body.qa pins the poster as the box background, exactly as the still version did,
   and hides the video so the screenshot is deterministic. */
body.qa .filmbox{background-image:var(--qa-poster);background-size:cover;
  background-position:center}
body.qa .filmbox video{visibility:hidden}