/* KASAMA site overlay styles. The site build copies this file to the site root; edit the source copy.
   The page's own stylesheets are unchanged. This holds only what KASAMA's additions need, in the page's own visual
   language: its colour tokens, type scale, .field inputs, .button, .eyebrow and .privacy-note, its 5px and 9px
   corners, and its 1100 / 800 / 600 / 370 breakpoints. */

/* .vc-hp: a honeypot field for the short request forms. Kept out of sight and out of the way of assistive technology
   (the markup also sets aria-hidden and tabindex="-1"), but not display:none, which some bots detect and skip. */
.vc-hp {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* ---------------------------------------------------------------- "We care like a co-founder": one column
   The right-hand column (care points and the moments teaser) is gone, so the story takes the full grid at a
   comfortable reading width, and the short request form runs the full width beneath it. */
.care .care-grid { grid-template-columns: minmax(0, 1fr); }
.care .care-story { max-width: 760px; }

/* ---------------------------------------------------------------- the short request form (care section and popup) */
.vc-quick {
  margin-top: 56px;
  padding: 34px 36px 32px;
  background: var(--tint);
  border-radius: 9px;
}
.vc-quick > .eyebrow,
.vc-dialog .eyebrow { color: var(--purple); margin-bottom: 12px; }
.vc-quick > h3 { font-size: clamp(1.55rem, 2.3vw, 2rem); line-height: 1.2; text-wrap: balance; }
.vc-quick-form { margin-top: 24px; }
.vc-quick-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: 18px 16px;
  align-items: start;
}
/* The button lines up with the inputs, below the labels (label: .94rem at line-height 1.4, then the field's 7px gap). */
.vc-quick-submit { padding-top: calc(.94rem * 1.4 + 7px); }
.vc-quick-form .button { min-height: 47px; padding: 11px 24px; gap: 18px; white-space: nowrap; }
/* Input edges at 3:1 or more against both white and the tinted panel (WCAG 1.4.11), and hint text at 4.5:1 or more,
   in the same purple-grey family as the page's own fields. */
.vc-quick-form .field input { border-color: #8a7d94; }
.vc-quick-form .field input::placeholder { color: #776a80; }
.vc-quick-form .field input[aria-invalid="true"] { border-color: #8c263d; box-shadow: inset 0 0 0 1px #8c263d; }
.vc-quick-form .field .vc-error { color: #8c263d; font-weight: 600; }
.vc-quick-form .privacy-note { margin-top: 16px; }
.vc-quick-done { width: fit-content; max-width: 100%; color: var(--purple); font-size: 1.125rem; line-height: 1.6; font-weight: 600; }
.vc-quick-done:not(:empty) { margin-top: 22px; }
.vc-quick-done:focus { outline: none; }
.vc-quick-done:focus-visible { outline: 3px solid var(--orchid); outline-offset: 5px; }

@media (max-width: 1100px) {
  .vc-quick-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vc-quick-submit { grid-column: 1 / -1; padding-top: 4px; }
}
@media (max-width: 600px) {
  .vc-quick { margin-top: 40px; padding: 25px 21px 24px; }
  .vc-quick-fields { grid-template-columns: minmax(0, 1fr); gap: 19px; }
  /* Full width here, so the label may wrap: with enlarged text spacing (WCAG 1.4.12) it would not fit on one line at 320px. */
  .vc-quick-form .button { width: 100%; min-height: 54px; white-space: normal; text-align: center; }
}
/* The narrowest phones: a little less padding and gap, so the label still sits on one line at normal text spacing. */
@media (max-width: 370px) {
  .vc-quick-form .button { padding-left: 18px; padding-right: 18px; gap: 12px; }
}

/* ---------------------------------------------------------------- the popup */
html.vc-dialog-open { overflow: hidden; }
.vc-dialog {
  box-sizing: border-box;
  width: min(580px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 30px 80px rgba(24, 11, 41, .35);
  overflow: auto;
  overscroll-behavior: contain;
}
.vc-dialog::backdrop { background: rgba(24, 11, 41, .74); }
.vc-dialog-body { position: relative; padding: 36px 36px 30px; }
.vc-dialog .eyebrow { margin-right: 52px; }
.vc-dialog h2 { font-size: clamp(1.75rem, 3.2vw, 2.25rem); line-height: 1.15; margin-right: 40px; text-wrap: balance; }
.vc-dialog-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--purple);
  cursor: pointer;
  transition: background .18s;
}
.vc-dialog-close:hover { background: var(--tint); }
.vc-dialog .vc-quick-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vc-dialog .vc-quick-submit { grid-column: 1 / -1; padding-top: 5px; }
.vc-dialog .vc-quick-form .button { width: 100%; min-height: 54px; }
@keyframes vc-dialog-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes vc-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
.vc-dialog[open] { animation: vc-dialog-in .24s ease-out; }
.vc-dialog[open]::backdrop { animation: vc-backdrop-in .24s ease-out; }
@media (max-width: 600px) {
  .vc-dialog { width: calc(100vw - 24px); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); }
  .vc-dialog-body { padding: 26px 21px 24px; }
  .vc-dialog-close { top: 10px; right: 10px; }
  .vc-dialog .vc-quick-fields { grid-template-columns: minmax(0, 1fr); gap: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .vc-dialog[open], .vc-dialog[open]::backdrop { animation: none; }
}

/* ---------------------------------------------------------------- event photos with the community pillar
   Four columns on the pillar grid's own 16px gap: the lead photo takes two columns and two rows, four photos fill the
   rest. The photos are absolutely placed so their own sizes never stretch the rows. */
.vc-gallery {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.vc-gallery li { position: relative; margin: 0; min-width: 0; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 5px; background: var(--tint); }
.vc-gallery .vc-gallery-lead { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.vc-gallery img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 800px) {
  .vc-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vc-gallery .vc-gallery-lead { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 3 / 2; }
}
@media (max-width: 600px) {
  .vc-gallery { gap: 12px; margin-top: 12px; }
}

/* ---------------------------------------------------------------- the co-founders in "Who we are" */
.vc-people {
  list-style: none;
  margin: 58px 0 0;
  padding: 34px 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px 25px;
}
.vc-person { margin: 0; min-width: 0; }
.vc-person img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 5px; background: var(--tint); }
.vc-person h2,
.vc-person h3 { font-size: 1.35rem; line-height: 1.3; letter-spacing: -.02em; font-weight: 600; margin: 20px 0 8px; color: var(--ink); }
.vc-person p { font-size: 1rem; line-height: 1.6; color: var(--muted); }
@media (max-width: 1100px) {
  .vc-people { gap: 30px 20px; }
  .vc-person h2, .vc-person h3 { font-size: 1.2rem; }
  .vc-person p { font-size: .94rem; }
}
/* Narrower screens: photo beside the name and line, so four large portraits do not stack into a tall column. */
@media (max-width: 800px) {
  .vc-people { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 24px; margin-top: 46px; padding-top: 32px; }
  .vc-person { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 18px; align-items: start; }
  .vc-person h2, .vc-person h3 { margin: 2px 0 6px; font-size: 1.2rem; }
}
@media (max-width: 600px) {
  .vc-people { grid-template-columns: minmax(0, 1fr); gap: 26px; margin-top: 40px; padding-top: 30px; }
  .vc-person { grid-template-columns: 88px minmax(0, 1fr); }
}
@media (max-width: 370px) {
  .vc-person { grid-template-columns: 72px minmax(0, 1fr); gap: 14px; }
}

/* Trademark mark, added to every KASAMA on the page (asked for 2026-09-18). Set small and raised so it reads as
   a mark rather than a letter: at the headline's size a full-height (R) competes with the word itself. em-relative,
   so it follows whatever text it sits in, and line-height 0 keeps it from opening up the line it is on. */
.vc-tm { font-size: .36em; line-height: 0; vertical-align: 1.05em; letter-spacing: 0; font-weight: inherit; }

/* ---------------------------------------------------------------- "Who we are": tighter vertical rhythm (2026-09-18)
   The section now sits just before the form as a trust closer; trim the whitespace above the people row so it reads
   compact rather than as a full spread. Homepage only (.founders-home) -- the dedicated /who-we-are page keeps its
   fuller spacing. Spacing only: no change to the photos, columns or copy. */
.founders-home .vc-people { margin-top: 40px; padding-top: 28px; }
@media (max-width: 800px) { .founders-home .vc-people { margin-top: 34px; padding-top: 26px; } }

/* The heading column is gone (build): the copy now leads full width, constrained for a comfortable line length so the
   right margin is free for the watermark on wide screens. */
.founders-home .founders-layout { grid-template-columns: 1fr; }
.founders-home .founders-copy { max-width: 900px; }

/* Two-line headline in the site's header pattern, with the "Tell us what you're building" link moved up beside it so
   the section is shorter. The link drops below the headline when there isn't room (flex-wrap). */
.founders-home .founders-headrow { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 14px 44px; }
.founders-home .founders-headline { font-size: clamp(2rem, 3.2vw, 3.25rem); line-height: 1.14; letter-spacing: -.03em; font-weight: 600; color: var(--ink); }
/* Second line purple, matching the Care and Work section headers. */
.founders-home .founders-headline span { color: var(--purple); }
.founders-home .founders-headrow .text-link { color: var(--purple); flex: 0 0 auto; margin-bottom: 6px; }
.founders-home .founders-headrow + p { margin-top: 24px; }

/* The mark returns as a large, faint watermark -- the same treatment as the community section on /experience
   (.experience-community .brand-mark: absolutely placed, low opacity, pointer-events:none, clipped by the section).
   Kept at .05 so text stays AA over it (the mark tints white only to ~#f6f3f9). Opacity, size and position are the
   knobs to tune by eye. Hidden on phones, where the section is single-column and not bare. */
.founders-home { position: relative; overflow: hidden; }
.founders-home > .wrap { position: relative; z-index: 1; }
.founders-home::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: auto;
  bottom: -70px;
  right: -96px;
  width: 420px;
  height: 480px;
  background: url("/assets/favicon.svg") no-repeat center / contain;
  opacity: .05;
  pointer-events: none;
}
@media (max-width: 900px) { .founders-home::before { width: 320px; height: 366px; right: -70px; } }
@media (max-width: 650px) { .founders-home::before { display: none; } }

/* Experience pillars: a small "time signature" chip under each heading -- the 12-week intensive plus what continues,
   and for how long. It replaces the two repetitive timeline sections. Light chip on the purple community section. */
.detail-timespan { display: inline-block; margin-top: 16px; padding: 7px 15px; border: 1px solid var(--line); border-radius: 100px; font-size: .8125rem; font-weight: 600; line-height: 1.35; color: var(--purple); }
.tinted .detail-timespan { background: #fff; }
.experience-community .detail-timespan { color: #fff; border-color: #ffffff5c; }
/* Equity/logistics line folded into the experience end CTA (from the cut "Months 4-36" section). */
.end-cta .fineprint { font-size: .9375rem; color: var(--muted); max-width: 640px; margin: 18px auto 0; }

/* ---------------------------------------------------------------- the privacy notice and website terms
   The approved texts have sections with two paragraphs in a row, and the page's own styles give a paragraph no space
   after it, so they would run together. Same rhythm as the page's heading spacing. */
.policy-copy p + p { margin-top: 14px; }