/* ══════════════════════════════════════════════════════════════════════════
   About · Blog · Careers — 11 Sep 2026
   Three pages built out of parts the site already owns: the home page's
   opener, its hairline lists, its card and its closing card. Page-specific
   layout only; nothing in the shared sheets is touched.
   Scale 11/12/14/16/18/20/32/48 + the hero display. The sixteen colour
   tokens. One hairline per ground. Radii 4/3/2. One easing.
   ══════════════════════════════════════════════════════════════════════════ */

/* site.css still points --ui at Inter; nothing on these pages may use it. */
:root{--ui:"TWK Lausanne","Helvetica Neue",Helvetica,Arial,sans-serif}

/* ── 1 · The opener ────────────────────────────────────────────────────────
   Same geometry as Customer Stories: the label lands 178px under the
   section's top edge, exactly where the home page's counter sits, so all
   five pages open on one line. The section is shorter than the home page's
   because there is no mock to hold it open. */
.home-refresh .hero--page{
  min-height:0;
  padding-top:clamp(96px,20vh,178px);
  padding-bottom:clamp(72px,10vh,116px);
}
.home-refresh .hero--page .hero__grid{grid-template-columns:minmax(0,1fr);gap:0}
.home-refresh .hero--page .hero__copy{max-width:760px;gap:0}
.home-refresh .hero--page .kicker{margin:0 0 20px}
.home-refresh .hero--page .t-display{
  font-size:clamp(42px,4.5vw,64px);line-height:1.06;letter-spacing:-.045em;
}
.home-refresh .hero--page .hero__lead{max-width:56ch;margin-top:22px;font-size:18px;line-height:1.55}
.home-refresh .hero--page .btn{margin-top:32px}
/* the routes field keeps clear of the copy, as it does on the stories page */
.home-refresh .hero--page .routefield{
  top:0;bottom:auto;height:78%;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#101010 30%,#101010 100%);
          mask-image:linear-gradient(180deg,transparent 0,#101010 30%,#101010 100%);
}

/* Section heads repeat the home page's pairing: green label, then the
   two-line head, then one line of copy on the right. */
.home-refresh .invest__head,
.home-refresh .roles__head,
.home-refresh .posts__head{margin-bottom:clamp(32px,4vh,48px)}
.home-refresh .invest__lead,
.home-refresh .roles__lead{max-width:52ch;margin:18px 0 0;color:var(--muted)}

/* ── 2 · About · founders ──────────────────────────────────────────────────
   The card the whole site uses: white, one hairline, 4px, one shadow. The
   portrait sits on the paper tone so the cut-out never floats on white. */
.home-refresh .people__grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;
  margin-top:clamp(32px,4vh,48px);
}
/* The portrait is a fact about the person, not the picture of the page: it sits
   beside the copy at a fixed 200px so the card stays the size of what it says,
   instead of growing a head-height square as the column gets wider. */
.home-refresh .person{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--lift);overflow:hidden;
  display:flex;align-items:stretch;
}
.home-refresh .person__photo{
  flex:0 0 200px;background:var(--paper,#f2f1ed);line-height:0;
}
.home-refresh .person__photo img{
  width:100%;height:100%;display:block;
  object-fit:cover;object-position:50% 18%;
}
.home-refresh .person__body{padding:28px 28px 30px;min-width:0}
.home-refresh .person__name{margin:0;font-size:20px;line-height:28px;font-weight:400;letter-spacing:-.3px;color:var(--ink)}
.home-refresh .person__role{margin:4px 0 0;font-size:14px;line-height:20px;color:#007a57}
.home-refresh .person__line{margin:14px 0 0;font-size:15px;line-height:23px;color:var(--muted);max-width:34ch}

/* ── 3 · About · investors ─────────────────────────────────────────────────
   The press wall's cells, held still: four columns split by hairlines, the
   marks at the wall's own weight. */
.home-refresh .invwall{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:transparent;
}
.home-refresh .invwall__cell{
  display:flex;align-items:center;justify-content:center;
  height:120px;padding:0 24px;border-left:1px solid var(--line);
}
.home-refresh .invwall__cell:first-child{border-left:0}
.home-refresh .invwall__cell img{
  width:var(--w,100px);height:auto;
  /* the press wall's treatment: the marks read as one row, not four brands */
  filter:grayscale(1);opacity:.62;
  transition:filter var(--t-mid) var(--ease),opacity var(--t-mid) var(--ease);
}
.home-refresh .invwall__cell:hover img{filter:grayscale(1);opacity:.95}

/* ── 4 · About · join the team ─────────────────────────────────────────────
   The home page's two-column head: the label and the line on the left, the
   paragraph and one green link on the right. No plate — the page closes on
   the CTA card, and two wide cards back to back say the same thing twice. */
.home-refresh .join{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:24px 64px;align-items:start;
}
.home-refresh .join__lead{margin:0;max-width:52ch;color:var(--muted)}
.home-refresh .join__link{margin-top:24px;color:var(--green-deep,#0f4a38)}
.home-refresh .join__link:hover{color:var(--ink)}
@media (max-width:809.98px){
  .home-refresh .join{grid-template-columns:minmax(0,1fr);gap:20px}
}

/* ── 5 · Careers · the roles ───────────────────────────────────────────────
   One hairline list, the way the platform page lists its channels: the title
   carries the line, the facts sit under it, the arrow answers the hover. */
.home-refresh .roles__group{margin-top:clamp(32px,4vh,44px)}
.home-refresh .roles__dept{
  display:flex;align-items:baseline;justify-content:space-between;
  margin:0 0 4px;color:#007a57;
}
.home-refresh .roles__dept span{color:var(--muted);letter-spacing:.02em}
.home-refresh .roles__list{border-top:1px solid var(--line)}
.home-refresh .role{
  display:grid;grid-template-columns:minmax(0,1fr) auto 32px;align-items:center;
  gap:24px;padding:24px 0;border-bottom:1px solid var(--line);
  text-decoration:none;cursor:pointer;
  transition:padding-left var(--t-mid) var(--ease);
}
.home-refresh .role:hover{padding-left:8px}
.home-refresh .role__title{font-size:20px;line-height:28px;letter-spacing:-.3px;color:var(--ink)}
.home-refresh .role__meta{display:flex;align-items:center;gap:12px;font-size:14px;line-height:20px;color:var(--muted)}
.home-refresh .role__meta i{width:3px;height:3px;background:var(--line-strong,#c9c6bf);border-radius:50%}
.home-refresh .role__go{
  justify-self:end;font-size:16px;color:#007a57;opacity:.45;
  transition:opacity var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);
}
.home-refresh .role:hover .role__go{opacity:1;transform:translateX(3px)}

/* ── 6 · Blog · the latest article ─────────────────────────────────────────
   The closing card's construction, read as a story: the routes field behind
   it, the copy on the left, one green line to open it. */
/* The lead story reads like a story: the copy on the left, the article's own
   banner filling the right half of the card, edge to edge. */
.home-refresh .feat{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:0;align-items:stretch;overflow:hidden;text-decoration:none;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--lift);
  transition:transform var(--t-mid) var(--ease-out);
}
.home-refresh .feat:hover{transform:translateY(-3px)}
.home-refresh .feat__field{display:none}
.home-refresh .feat__body{
  position:relative;grid-column:1;grid-row:1;align-self:center;
  padding:clamp(36px,4.5vh,56px) clamp(32px,3.5vw,56px);
}
.home-refresh .feat__media{
  grid-column:2;grid-row:1;position:relative;overflow:hidden;min-height:320px;
  background:var(--paper,#f2f1ed);border-left:1px solid var(--line);line-height:0;
}
.home-refresh .feat__media img{width:100%;height:100%;display:block;object-fit:cover}
.home-refresh .feat__meta{
  display:flex;align-items:center;gap:12px;margin:0 0 20px;
  font-size:11px;font-weight:450;line-height:1.6;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);
}
.home-refresh .feat__cat{color:#007a57}
.home-refresh .feat__meta i{width:3px;height:3px;background:var(--line-strong,#c9c6bf);border-radius:50%}
.home-refresh .feat__title{
  margin:0;font-size:32px;line-height:1.2;letter-spacing:-.9px;font-weight:400;color:var(--ink);
}
.home-refresh .feat__desc{margin:18px 0 0;font-size:16px;line-height:25px;color:var(--muted);max-width:48ch}
.home-refresh .feat__go{
  display:inline-flex;align-items:center;gap:8px;margin-top:28px;
  font-size:16px;font-weight:450;color:var(--green-deep,#0f4a38);
}
.home-refresh .feat__go i{font-style:normal;transition:transform var(--t-fast) var(--ease)}
.home-refresh .feat:hover .feat__go i{transform:translateX(3px)}

/* ── 7 · Blog · every article ──────────────────────────────────────────────
   The old blog laid its articles out as a wall of cards: the banner on top,
   then the date and the title. Same layout here, in our card: one hairline,
   4px, one shadow, and the banner sitting on paper so a light cover never
   floats on white. */
.home-refresh .posts__head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap}
.home-refresh .chips{display:flex;gap:8px;flex-wrap:wrap}
.home-refresh .chip{
  font:inherit;font-size:14px;line-height:20px;font-weight:450;
  padding:8px 16px;border-radius:2px;cursor:pointer;
  background:transparent;color:var(--muted);border:1px solid var(--line);
  transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
.home-refresh .chip:hover{color:var(--ink);border-color:var(--line-strong,#c9c6bf)}
.home-refresh .chip.is-on{background:var(--ink);border-color:var(--ink);color:#ffffff}

.home-refresh .posts__grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;
}
.home-refresh .pcard{
  display:flex;flex-direction:column;text-decoration:none;cursor:pointer;overflow:hidden;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--lift);
  transition:transform var(--t-mid) var(--ease-out);
}
.home-refresh .pcard:hover{transform:translateY(-3px)}
.home-refresh .pcard[hidden]{display:none}
.home-refresh .pcard__media{display:block;line-height:0;background:var(--paper,#f2f1ed);border-bottom:1px solid var(--line)}
.home-refresh .pcard__media img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover}
.home-refresh .pcard__body{display:flex;flex-direction:column;gap:10px;padding:24px 24px 28px;flex:1 1 auto}
.home-refresh .pcard__date{font-size:14px;line-height:20px;color:var(--muted)}
.home-refresh .pcard__title{font-size:18px;line-height:26px;letter-spacing:-.2px;color:var(--ink)}
.home-refresh .pcard__desc{font-size:15px;line-height:23px;color:var(--muted)}

/* ── 8 · Between phone and desktop ─────────────────────────────────────────*/
@media (max-width:1099.98px){
  .home-refresh .post{grid-template-columns:120px minmax(0,1fr) 24px;gap:20px}
  .home-refresh .post__cat{display:none}
}
@media (max-width:809.98px){
  .home-refresh .people__grid{grid-template-columns:minmax(0,1fr);gap:16px}
  .home-refresh .person__photo{flex-basis:168px}
  .home-refresh .invwall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home-refresh .invwall__cell{height:104px}
  .home-refresh .invwall__cell:nth-child(3){border-left:0}
  .home-refresh .invwall__cell:nth-child(n+3){border-top:1px solid var(--line)}
  .home-refresh .role{grid-template-columns:minmax(0,1fr) 24px;gap:8px 16px}
  .home-refresh .role__meta{grid-column:1/-1;margin-top:6px}
  .home-refresh .post{grid-template-columns:minmax(0,1fr) 24px;gap:6px 16px}
  .home-refresh .post__date{grid-column:1/-1;order:-1}
}
@media (max-width:599.98px){
  .home-refresh .hero--page{padding-top:clamp(64px,14vh,110px);padding-bottom:56px}
  .home-refresh .hero--page .hero__lead{font-size:16px;margin-top:18px}
  .home-refresh .person__body{padding:22px}
  .home-refresh .person__photo{flex-basis:132px}
  .home-refresh .feat__title{font-size:24px;letter-spacing:-.5px}
  .home-refresh .posts__grid{grid-template-columns:minmax(0,1fr)}
  .home-refresh .chips{gap:6px}
  .home-refresh .chip{padding:7px 12px;font-size:13px}
}

/* ── Blog: the opener hands straight over to the lead story ───────────────
   The hero was sized like a section opener with nothing under it, so the
   first article sat two hundred pixels below its own block. */
.home-refresh .blog-hero.hero--page{padding-bottom:clamp(32px,4vh,48px)}
.home-refresh .blogfeat{padding-top:0}
.home-refresh .blogfeat .kicker{margin-bottom:18px}
@media (max-width:899.98px){
  .home-refresh .feat{grid-template-columns:minmax(0,1fr)}
  .home-refresh .feat__body{grid-row:2}
  .home-refresh .feat__media{grid-column:1;grid-row:1;border-left:0;border-bottom:1px solid var(--line);min-height:220px}
}