/* ==========================================================================
   /CHRIS-PANTELI                       docs/spec/ambassador-index.md §1 (ADR-23)
   The brand-ambassador profile. No comp: the page stands on the .zr-bl shell
   (bl.css: hero wash, eyebrow pill, h1, .zr-pill, the hairline/ink/shadow
   tokens) and takes its section head from /university and /wall-of-love, its
   two-column story from /about and its soft frame from the platform pages, so
   it reads as the same site. The live page is dark with an orange accent; what
   is ported is its content and its order, not its colours. Every value below
   is a base.css / bl.css token or a literal another sheet already uses (the
   #C9D6F2 hover hairline, the #E8F0FE icon tile, pp.css's #F6F7F9 frame).

     .zr-amb
       .zr-amb__hero > .zr-amb__hero-in ( .zr-amb__intro · figure.zr-amb__portrait ) · ul.zr-amb__stats
       .zr-amb__sec  > .zr-amb__head ( eyebrow · .zr-amb__h2 · .zr-amb__sub )
         .zr-amb__bio        .zr-amb__story ( head · .zr-amb__copy ) · .zr-amb__quote-frame > figure.zr-amb__quote
         ul.zr-amb__areas    li.zr-amb__area ( .zr-amb__ico · h3 · p ) × 6
         ul.zr-amb__ventures li > a.zr-amb__venture ( .zr-amb__logo · h3 · .zr-amb__role · .zr-amb__go · p )
         ul.zr-amb__featured li > a.zr-amb__feat ( .zr-amb__outlet · .zr-amb__ftitle · .zr-amb__go )
         .zr-amb__panel      the closing CTA
   ========================================================================== */
.zr-amb{
  --amb-mono:'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --amb-hover:#C9D6F2;                 /* the site's hover hairline (content.css, pp.css, uni.css) */
  --amb-frame:#F6F7F9;                 /* pp.css's soft frame and its hairline */
  --amb-frame-line:#EEF1F5;
  --amb-col:calc(1200px - 2 * var(--zr-pad));   /* .zr-bl__wrap's content box, for blocks that sit in the padded hero */
}

/* ── hero: the .zr-bl wash, the copy on the left, the portrait on the right ──
   A profile is read as "who, then what": the name and the face share the first
   screen, which a centred .zr-bl hero cannot do. The type is the centred hero's
   own (wall.css: 54px / 1.12 at 1440), left-aligned. */
.zr-amb__hero{ padding-bottom:clamp(28px, 3vw, 48px); text-align:left; }
.zr-amb__hero-in{
  display:grid; grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr); align-items:center;
  column-gap:clamp(28px, 5.4vw, 80px);
  width:min(var(--amb-col), 100%); margin:0 auto;
}
.zr-amb__intro{ display:flex; flex-direction:column; align-items:flex-start; gap:18px; min-width:0; }
.zr-amb .zr-bl__h1{ font-size:clamp(34px, 4.6vw, 54px); line-height:1.12; letter-spacing:-.032em; }
/* Who he is, in the accent; where, in the muted ink: "Role · Role · Place" on one line (511px) wherever the copy
   column is that wide. The column is a size container so the line can answer to the room it really has, in both
   the two-column and the centred layout: under 528px the place takes a line of its own, under 392px (the two roles
   are 377px) every part does, and the dot at each such break is dropped with it. So a line never ends or starts on
   a stray "·", and a part never breaks inside ("Founder of / Total Authority"). Without container queries the line
   simply wraps between its parts. */
.zr-amb__intro{ container-type:inline-size; }
/* This line sits on the hero's tinted wash, not on white, and at 17px it needs 4.5:1. The action blue and the muted
   ink both fall just short there (4.4 and 4.1 on the wash's lilac at 390px), so the roles take the darker blue of
   bl.css's pill pair (5.3) and the place the body ink every other .zr-bl hero sets on the wash (6.7). */
.zr-amb__headline{
  margin:-6px 0 0; font-size:17px; font-weight:500; line-height:26px; letter-spacing:-.006em;
  color:#1D5FBF;
}
.zr-amb__part{ white-space:nowrap; }
.zr-amb__dot{ font-weight:400; white-space:pre-wrap; }
.zr-amb__loc, .zr-amb__dot--loc{ font-weight:400; color:var(--bl-body); }
@container (max-width:527px){
  .zr-amb__loc{ display:block; }
  .zr-amb__dot--loc{ display:none; }
}
@container (max-width:391px){
  .zr-amb__part{ display:block; }
  .zr-amb__dot{ display:none; }
}
.zr-amb__lede{ margin:0; max-width:560px; font-size:16.5px; line-height:27px; color:var(--bl-body); text-wrap:pretty; }

.zr-amb__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:8px; }
.zr-amb__btn-ico{ flex:0 0 auto; width:19px; height:19px; }
/* The white secondary button: uni.css's ghost (white face, hairline, a whisper of lift) spelt through .zr-btn's own
   knobs, so the states stay the component's. */
.zr-amb__ghost{
  --btn-face:#fff; --btn-face-hi:#FAFBFD; --btn-ink:var(--zr-ink);
  --btn-sheen:transparent; --btn-sheen-hi:transparent; --btn-press:rgba(15,23,42,.14);
  box-shadow:inset 0 0 0 1px #E4E9F0, 0 1px 2px rgba(0,0,0,.06);
}
.zr-amb__ghost:hover{ box-shadow:inset 0 0 0 1px var(--amb-hover), 0 1px 2px rgba(0,0,0,.06); }
.zr-amb__ghost:active{ box-shadow:inset 0 0 0 1px var(--amb-hover), inset 0 3px 8px var(--btn-press); }
.zr-amb__social{ width:48px; padding-inline:0; }     /* an icon-only profile link, square at the button's height */

/* The portrait is a 400px square cut-out on white, the largest file there is. At its natural size a 2x screen
   stretches it to 800 device px and a phone to 1000, and it shows: soft skin and beard, a soft cut-out edge. So the
   tile is 320px (the photograph 298px: 1.5x on a 2x screen instead of 2x) until the owner supplies the original at
   800px or more; then the tile can go back to 420px with a srcset. The white of the photograph is multiplied into
   the tile's tint: the cut-out sits on the page's own wash instead of in a white box, and nothing about the picture
   itself is recoloured. */
.zr-amb__portrait{
  justify-self:end; width:min(320px, 100%); margin:0; padding:10px;
  background:#fff; border:1px solid var(--bl-hair); border-radius:30px;
  box-shadow:var(--bl-feat-sh);
}
.zr-amb__photo{
  position:relative; display:block; overflow:hidden; aspect-ratio:1 / 1; border-radius:20px;
  background:linear-gradient(155deg, #E9F0FF 0%, #F0ECFF 100%);
}
.zr-amb__photo::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(31,36,41,.06);
}
.zr-amb__photo img{ display:block; width:100%; height:100%; object-fit:cover; mix-blend-mode:multiply; }
.zr-amb__tag{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 6px 4px 10px; }
.zr-amb__tag-name{ min-width:0; font-size:15px; font-weight:500; line-height:22px; letter-spacing:-.006em; color:var(--bl-ink); }
.zr-amb__tag-role{ flex:0 0 auto; gap:6px; background:#E8F1FF; color:#1D5FBF; }      /* bl.css's blue pill pair */
.zr-amb__tag-role::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--zr-blue); }

/* the three numbers: one card, three cells, a hairline between them */
.zr-amb__stats{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  width:min(var(--amb-col), 100%); margin:clamp(32px, 4vw, 56px) auto 0; padding:0; list-style:none;
  background:#fff; border:1px solid var(--bl-hair); border-radius:22px;
  box-shadow:var(--bl-card-sh);
}
.zr-amb__stat{ display:flex; flex-direction:column; gap:6px; min-width:0; padding:26px clamp(20px, 2.6vw, 34px) 28px; }
.zr-amb__stat + .zr-amb__stat{ border-left:1px solid var(--bl-rule); }
/* content.css's .zr-nums pair: the number in the ink, its caption in the muted ink */
.zr-amb__stat b{
  font-size:clamp(28px, 3vw, 38px); font-weight:500; line-height:1.1; letter-spacing:-.03em;
  color:var(--bl-ink); font-variant-numeric:tabular-nums;
}
.zr-amb__stat span{ max-width:32ch; font-size:14px; line-height:21px; color:var(--zr-muted); text-wrap:balance; }   /* two even lines, never "… / at Linkifi" */

/* ── sections: uni.css's rhythm and its head ───────────────────────────────
   The nav pill floats 20px from the top once the page scrolls; an anchored
   section (#about, #expertise, #ventures, #featured: the live page's ids) has
   to land under it, not behind it. */
.zr-amb__sec{ padding-block:clamp(40px, 4.6vw, 72px); scroll-margin-top:104px; }
.zr-amb__sec--first{ padding-top:clamp(28px, 3.4vw, 52px); }
.zr-amb__sec--last{ padding-top:clamp(24px, 2.6vw, 40px); padding-bottom:clamp(56px, 6vw, 96px); }
.zr-amb__head{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px;
  max-width:760px; margin:0 auto clamp(28px, 3.2vw, 44px);
}
.zr-amb__head--left{ align-items:flex-start; text-align:left; margin-inline:0; margin-bottom:clamp(20px, 2.2vw, 28px); }
.zr-amb__h2{
  margin:0; text-wrap:balance;
  font-size:clamp(26px, 3vw, 40px); font-weight:500; line-height:1.16; letter-spacing:-.03em;      /* = .zr-uni__h2 */
  background:var(--zr-head-grad);
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
}
.zr-amb__sub{ margin:0; max-width:620px; font-size:16px; line-height:26px; color:var(--zr-muted); text-wrap:pretty; }

/* the shared icon tile: uni.css's 40px tile in its default blue pair */
.zr-amb__ico{
  display:grid; place-items:center; flex:0 0 auto; width:40px; height:40px; border-radius:12px;
  background:#E8F0FE; color:var(--zr-blue);
}
.zr-amb__ico svg{ width:20px; height:20px; }

/* ── bio: /about's story grid, the prose beside the pull quote ──────────── */
.zr-amb__bio{
  display:grid; grid-template-columns:minmax(0,1.16fr) minmax(0,1fr); align-items:center;
  gap:clamp(32px, 5.4vw, 80px);
}
.zr-amb__story{ min-width:0; }
.zr-amb__copy p{ margin:0 0 16px; font-size:16px; line-height:27px; color:var(--bl-body); text-wrap:pretty; }   /* = .zr-story p */
.zr-amb__copy p:last-child{ margin-bottom:0; }

/* a verbatim quote: figure > blockquote + figcaption, a white card inside the soft frame */
.zr-amb__quote-frame{
  min-width:0; padding:10px; border-radius:28px;
  background:var(--amb-frame); border:1px solid var(--amb-frame-line);
}
.zr-amb__quote{
  display:flex; flex-direction:column; gap:20px; margin:0; padding:clamp(24px, 2.6vw, 32px);
  background:#fff; border:1px solid #EDF1F7; border-radius:19px;
  box-shadow:0 6px 16px -6px rgba(31,36,41,.05);
}
/* the opening mark hangs in the margin, so the first line starts on the same edge as the rest */
.zr-amb__quote blockquote{
  margin:0; text-indent:-.44em;
  font-size:clamp(18px, 1.5vw, 20px); line-height:1.55; letter-spacing:-.012em;
  color:var(--bl-ink); text-wrap:pretty;
}
.zr-amb__quote figcaption{ display:flex; align-items:center; gap:12px; padding-top:20px; border-top:1px solid var(--bl-rule); }
/* content.css's .zr-say avatar (44px, 12px corners) on the portrait's tint: the same cut-out, the same treatment,
   or the white of the photograph would vanish into the white card and leave a bust without a tile */
.zr-amb__av{
  flex:0 0 auto; display:block; overflow:hidden; width:44px; height:44px; border-radius:12px;
  background:linear-gradient(155deg, #E9F0FF 0%, #F0ECFF 100%);
  box-shadow:inset 0 0 0 1px rgba(31,36,41,.06);
}
.zr-amb__av img{ display:block; width:100%; height:100%; object-fit:cover; mix-blend-mode:multiply; }
.zr-amb__by{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.zr-amb__by cite{ font-size:15px; font-style:normal; font-weight:500; line-height:20px; color:var(--bl-ink); }
.zr-amb__by span{ font-size:13px; line-height:18px; color:var(--zr-muted); }

/* ── expertise: six cards, uni.css's link card without the link ─────────── */
.zr-amb__areas{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; margin:0; padding:0; list-style:none; }
.zr-amb__area{
  display:flex; flex-direction:column; gap:10px; min-width:0; padding:24px 22px 24px;
  background:#fff; border:1px solid var(--bl-hair); border-radius:18px;
  box-shadow:var(--bl-card-sh);
}
.zr-amb__area .zr-amb__ico{ margin-bottom:4px; }
.zr-amb__area h3{ margin:0; font-size:17px; font-weight:500; line-height:1.3; letter-spacing:-.008em; color:var(--bl-ink); }
.zr-amb__area p{ margin:0; font-size:14.5px; line-height:22px; color:var(--zr-muted); text-wrap:pretty; }
/* a row comes in left to right (the live page's 80ms step); the step follows the column count below */
.zr-amb__area:nth-child(3n+2){ --d:80ms; }
.zr-amb__area:nth-child(3n){ --d:160ms; }

/* ── ventures: the whole card is the link to the company ────────────────── */
.zr-amb__ventures{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px; margin:0; padding:0; list-style:none; }
.zr-amb__vitem{ display:flex; min-width:0; }
.zr-amb__vitem:nth-child(2n){ --d:100ms; }
.zr-amb__venture{
  display:flex; flex-direction:column; gap:16px; width:100%; min-width:0; padding:24px;
  background:#fff; border:1px solid var(--bl-hair); border-radius:22px;
  box-shadow:var(--bl-card-sh); text-decoration:none;
  transition:border-color .18s var(--zr-ease-out-quad), box-shadow .18s var(--zr-ease-out-quad);
}
.zr-amb__venture:hover{ border-color:var(--amb-hover); box-shadow:0 16px 34px -16px rgba(16,49,110,.22); }
.zr-amb__venture:focus-visible{ outline:2px solid var(--zr-blue); outline-offset:3px; border-radius:22px; }
.zr-amb__vtop{ display:flex; align-items:center; gap:16px; min-width:0; }
/* "contain" sits a transparent mark on a white tile with air round it; "cover" is cover art and fills the tile */
.zr-amb__logo{
  flex:0 0 auto; display:block; overflow:hidden; width:56px; height:56px; border-radius:14px;
  background:#fff; border:1px solid var(--bl-hair);
}
.zr-amb__logo img{ display:block; width:100%; height:100%; }
.zr-amb__logo--contain{ padding:8px; }
.zr-amb__logo--contain img{ object-fit:contain; }
.zr-amb__logo--cover{ border-color:rgba(31,36,41,.10); }
.zr-amb__logo--cover img{ object-fit:cover; }
.zr-amb__vid{ display:flex; flex-direction:column; gap:2px; flex:1 1 auto; min-width:0; }
.zr-amb__vid h3{
  margin:0; font-size:20px; font-weight:500; line-height:28px; letter-spacing:-.35px; color:var(--bl-ink);      /* = .zr-lesson__h */
  transition:color .16s var(--zr-ease-out-quad);
}
.zr-amb__venture:hover .zr-amb__vid h3{ color:var(--zr-blue); }
.zr-amb__role{ font-size:13.5px; font-weight:500; line-height:20px; color:var(--zr-blue); }
.zr-amb__venture p{ margin:0; font-size:15px; line-height:24px; color:var(--bl-body); text-wrap:pretty; }
/* the "leaves the site" arrow, top right of a card and at the end of a row */
.zr-amb__go{
  flex:0 0 auto; align-self:flex-start; width:20px; height:20px; color:#9AA3AF;
  transition:color .16s var(--zr-ease-out-quad), translate .2s var(--zr-ease);
}
.zr-amb__venture:hover .zr-amb__go,
.zr-amb__feat:hover .zr-amb__go{ color:var(--zr-blue); translate:2px -2px; }

/* ── featured in: outlet over title, one link per row ───────────────────── */
.zr-amb__featured{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; margin:0; padding:0; list-style:none; }
.zr-amb__fitem{ display:flex; min-width:0; }
.zr-amb__fitem:nth-child(2n){ --d:80ms; }
.zr-amb__feat{
  display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; min-width:0; min-height:80px;
  padding:16px 18px 16px 20px;
  background:#fff; border:1px solid var(--bl-hair); border-radius:16px; text-decoration:none;
  transition:border-color .18s var(--zr-ease-out-quad), background .18s var(--zr-ease-out-quad);
}
.zr-amb__feat:hover{ border-color:var(--amb-hover); background:#FAFBFD; }
.zr-amb__feat:focus-visible{ outline:2px solid var(--zr-blue); outline-offset:3px; border-radius:16px; }
.zr-amb__feat .zr-amb__go{ align-self:center; }
.zr-amb__feat-copy{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.zr-amb__outlet{
  font-family:var(--amb-mono); font-size:11.5px; line-height:18px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--zr-blue);
}
/* the titles wrap: the live page cuts them off at one line, and half of them are longer than that */
.zr-amb__ftitle{
  font-size:15.5px; font-weight:500; line-height:23px; letter-spacing:-.006em; color:var(--bl-ink); text-wrap:balance;
  transition:color .16s var(--zr-ease-out-quad);
}
.zr-amb__feat:hover .zr-amb__ftitle{ color:var(--zr-blue); }

/* ── closing CTA: wall.css's centred panel ──────────────────────────────── */
.zr-amb__panel{
  display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center;
  padding:clamp(32px, 4vw, 52px) clamp(20px, 4vw, 44px);
  background:#FBFCFE; border:1px solid var(--bl-hair); border-radius:24px;
}
.zr-amb__panel-h{
  margin:0; max-width:560px; font-size:clamp(22px, 2.2vw, 30px); font-weight:500; line-height:1.25;
  letter-spacing:-.025em; color:var(--bl-ink); text-wrap:balance;
}
.zr-amb__panel-p{ margin:0; max-width:460px; font-size:16px; line-height:26px; color:var(--bl-body); text-wrap:balance; }
.zr-amb__panel .zr-btn{ margin-top:6px; }

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width:900px){
  /* The story stacks: the prose at a reading width, the quote under it. The width has to be said: between 761 and
     900px the column is up to 846px wide, some 110 characters a line. 720px is the measure the rest of the page
     keeps (about 88 characters at 16px). */
  .zr-amb__bio{ grid-template-columns:minmax(0,1fr); gap:32px; }
  .zr-amb__copy{ max-width:720px; }
  /* the quote keeps the full column, like the strip above and the grids below; its type grows with the card instead
     (18px at 766, 21px at 900), so its longest line stays near 80 characters, not 95 */
  .zr-amb__quote blockquote{ font-size:clamp(18px, 2.35vw, 21px); }
  .zr-amb__areas{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .zr-amb__area:nth-child(n){ --d:0ms; }
  .zr-amb__area:nth-child(2n){ --d:80ms; }
  .zr-amb__featured{ grid-template-columns:minmax(0,1fr); }
  .zr-amb__fitem:nth-child(n){ --d:0ms; }
}
@media (max-width:860px){
  /* One column, centred like every other .zr-bl hero at this width; the portrait follows the copy, as live. 860 and
     not lower: under ~850px the copy column is narrower than its two buttons side by side (423px) and they part. */
  .zr-amb__hero{ text-align:center; }
  .zr-amb__hero-in{ grid-template-columns:minmax(0,1fr); row-gap:32px; }
  .zr-amb__intro{ align-items:center; }
  .zr-amb__lede{ text-wrap:balance; }
  .zr-amb__cta{ justify-content:center; }
  .zr-amb__portrait{ justify-self:center; }
  .zr-amb__tag{ text-align:left; }
  .zr-amb__stats{ text-align:left; }
}
@media (max-width:720px){
  .zr-amb__ventures{ grid-template-columns:minmax(0,1fr); gap:14px; }
  .zr-amb__vitem:nth-child(n){ --d:0ms; }
}
@media (max-width:620px){
  /* the numbers become rows: the figure in a fixed column, its caption beside it */
  .zr-amb__stats{ grid-template-columns:minmax(0,1fr); }
  .zr-amb__stat{ flex-direction:row; align-items:center; gap:16px; padding:18px 20px; }
  .zr-amb__stat + .zr-amb__stat{ border-left:0; border-top:1px solid var(--bl-rule); }
  .zr-amb__stat b{ flex:0 0 86px; font-size:28px; }
  .zr-amb__stat span{ max-width:none; }
  .zr-amb__areas{ grid-template-columns:minmax(0,1fr); }
  .zr-amb__area:nth-child(n){ --d:0ms; }
  .zr-amb__venture{ padding:20px; }
  .zr-amb__panel .zr-btn{ width:min(320px, 100%); }
}
@media (max-width:480px){
  .zr-amb__cta{ flex-direction:column; align-items:stretch; width:min(320px, 100%); }
  .zr-amb__social{ width:100%; }
}

/* Without scripting nothing ever adds .is-in (base.css covers it site-wide since ADR-22; kept here, scoped, so the
   page does not depend on that rule staying where it is). The same three declarations as base.css's reduced-motion
   rule. */
@media (scripting:none){
  .zr-amb [data-reveal]{ opacity:1; translate:none; filter:none; }
}
/* Keyboard: Tab scrolls the focused link to the nearest edge, where its block can sit inside the observer's excluded
   bottom band (site.js: threshold .15, -8% bottom margin) and never get .is-in. Focus would then land on an
   invisible card. A block that holds the focus is shown, whatever the observer thinks (uni.css). */
.zr-amb [data-reveal]:focus-within{ opacity:1; translate:none; filter:none; }
/* Shift+Tab scrolls the focused card to the top edge, which is where the sticky nav pill sits */
.zr-amb a:focus-visible{ scroll-margin-block:112px 24px; }

/* base.css already flattens every transition under reduced motion; the arrow's nudge should not happen at all */
@media (prefers-reduced-motion:reduce){
  .zr-amb__venture:hover .zr-amb__go,
  .zr-amb__feat:hover .zr-amb__go{ translate:none; }
}