/* ==========================================================================
   Company and conversion pages: Leadership & Advisors, Careers, Contact,
   Request a Demo, Industries. Loaded after inner.css (and library.css where a
   page also lists posts).

   01 People                 .people / .person (the person's headshot tile)
   02 Principles row         .points / .point (three framed columns, one frame)
   03 Form panel             .form-panel (copy and routes beside the form)
   04 Routes                 .routes / .route (who to talk to, and how)
   05 Hero form              .internal-hero__panel (Request a Demo: the form in the hero)
   06 Sectors                .sectors / .sector (Industries)
   07 Empty state            .empty (Careers: no open roles)
   08 About explainer        .poster--photo / .outcome__caption (About outcome 1: the client's video)
   ========================================================================== */

/* ---------- 01 People ---------- */
.people {
  display: grid;
  padding: 0;
  list-style: none;
  border-top: var(--border-width) var(--guide-style) var(--guide-line);
}

.person {
  display: grid;
  grid-template-columns: var(--space-16) minmax(0, 1fr);
  column-gap: var(--space-6);
  align-items: start;
  padding: var(--space-8) 0;
  border-bottom: var(--border-width) var(--guide-style) var(--guide-line);
}

/* Initials on navy, the frame's corner marks around them. A headshot replaces
   the initials inside the same tile (img.person__photo) when the client sends them */
.person__mark {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  width: 100%;
  overflow: hidden;
  background-color: var(--navy-950);
  background-image: radial-gradient(circle, rgb(255 255 255 / 0.14) 0.75px, transparent 1.25px);
  background-size: var(--space-2) var(--space-2);
  color: #f3f6fa;
  font-size: var(--text-h4);
  line-height: 1;
  font-weight: var(--weight-bold);
  letter-spacing: 0.02em;
}

.person__mark::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background-color: var(--brand-blue);
}

.person__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.person__name {
  font-size: var(--text-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--tracking-heading);
}

.person__role {
  margin-top: var(--space-1);
  font-family: var(--font-label);
  font-size: var(--text-label);
  line-height: var(--lh-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-accent);
}

.person__bio {
  max-width: 60ch;
  margin-top: var(--space-4);
  color: var(--text-secondary);
}

.person__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  margin-top: var(--space-4);
  padding: 0;
  list-style: none;
}

/* The founders: larger tiles, two side by side from 1024 */
.people--lead .person__mark {
  font-size: var(--text-h2);
}

@media (min-width: 768px) {
  .person {
    grid-template-columns: var(--space-24) minmax(0, 1fr);
    column-gap: var(--space-8);
    padding: var(--space-10) 0;
  }

  .people--lead .person {
    grid-template-columns: var(--space-32) minmax(0, 1fr);
  }
}

@media (min-width: 1024px) {
  .people {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: calc(var(--space-grid-gap) * 2);
  }
}

/* Portrait tile (2026-10-07): the person's own headshot from the client's current site, cropped square on the
   face (scripts/images/build.mjs, group leadership), so every tile frames its person alike */
.person__mark--photo {
  background-color: #3a3d42; /* behind the photo, so the tile never flashes white while it loads */
}

.person__mark--photo picture {
  display: block;
  width: 100%;
  height: 100%;
}

.person__mark--photo .person__photo {
  object-fit: cover; /* the files are square already; this only guards a different tile ratio */
  object-position: 50% 30%;
}

.person:has(.person__mark--photo) {
  grid-template-columns: var(--space-24) minmax(0, 1fr);
}

@media (min-width: 768px) {
  .person:has(.person__mark--photo) {
    grid-template-columns: var(--space-32) minmax(0, 1fr);
  }

  .people--lead .person:has(.person__mark--photo) {
    grid-template-columns: var(--space-40) minmax(0, 1fr);
  }
}

/* ---------- 02 Principles row: three columns in one frame ---------- */
.points {
  display: grid;
  padding: 0;
  list-style: none;
  background-color: var(--surface-primary);
}

.point {
  padding: var(--space-6);
}

.point + .point {
  border-top: var(--border-width) var(--guide-style) var(--guide-line);
}

.point__index {
  font-family: var(--font-label);
  font-size: var(--text-body-sm);
  line-height: var(--lh-body-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
}

.point__title {
  margin-top: var(--space-6);
  font-size: var(--text-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--tracking-heading);
}

.point__text {
  margin-top: var(--space-4);
  color: var(--text-secondary);
}

@media (min-width: 768px) {
  .point {
    padding: var(--space-10);
  }
}

@media (min-width: 1024px) {
  .points {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .point + .point {
    border-top: 0;
    border-left: var(--border-width) var(--guide-style) var(--guide-line);
  }
}

@media (min-width: 1200px) {
  .point {
    padding: var(--space-12);
  }
}

/* ---------- 03 Form panel: copy beside the form, one frame (Teradata's support panel) ---------- */
.form-panel {
  display: grid;
  background-color: var(--surface-primary);
}

.form-panel__copy,
.form-panel__form {
  padding: var(--space-6);
}

.form-panel__form {
  border-top: var(--border-width) var(--guide-style) var(--guide-line);
  background-color: var(--surface-secondary);
}

.form-panel__title {
  max-width: 14ch;
  margin-top: var(--space-4);
}

.form-panel__text {
  max-width: 44ch;
  margin-top: var(--space-6);
  color: var(--text-secondary);
  font-size: var(--text-body-lg);
  line-height: var(--lh-body-lg);
}

.form-panel .check-list,
.form-panel .routes {
  margin-top: var(--space-8);
}

.form-panel .check-list__item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

/* A form's fields: two columns from 768 (forms.css), the action full width */
.lead-form {
  display: grid;
  gap: var(--space-6);
}

.lead-form .form-grid {
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .form-panel__copy,
  .form-panel__form {
    padding: var(--space-10);
  }
}

@media (min-width: 1024px) {
  .form-panel {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .form-panel__form {
    border-top: 0;
    border-left: var(--border-width) var(--guide-style) var(--guide-line);
  }
}

@media (min-width: 1200px) {
  .form-panel__copy,
  .form-panel__form {
    padding: var(--space-12);
  }
}

/* ---------- 04 Routes: who to talk to, and how ---------- */
.routes {
  padding: 0;
  list-style: none;
  border-top: var(--border-width) var(--guide-style) var(--guide-line);
}

.route {
  display: grid;
  grid-template-columns: var(--space-6) minmax(0, 1fr);
  column-gap: var(--space-2);
  padding: var(--space-6) 0;
  border-bottom: var(--border-width) var(--guide-style) var(--guide-line);
}

.route:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.route__index {
  padding-top: var(--space-1);
  font-family: var(--font-label);
  font-size: var(--text-body-sm);
  line-height: var(--lh-body-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
}

.route__title {
  font-size: var(--text-h4);
  line-height: var(--lh-h4);
  letter-spacing: var(--tracking-subheading);
}

.route__text {
  margin-top: var(--space-1);
  color: var(--text-secondary);
}

.route .btn-text {
  margin-top: var(--space-2);
}

/* ---------- 05 Hero form (Request a Demo): the form is the right column ---------- */
.internal-hero__panel {
  padding: var(--space-6);
  background-color: var(--neutral-0);
  color: var(--neutral-900);
  color-scheme: light; /* native checkboxes and selects draw light, as on the page ground */
  /* The form reads on white: the light theme's tokens inside the dark band */
  --surface-primary: var(--neutral-0);
  --surface-secondary: var(--neutral-50);
  --text-primary: var(--neutral-900);
  --text-secondary: var(--neutral-700);
  --text-tertiary: var(--neutral-500);
  --border-control: var(--neutral-400);
  --focus-ring: var(--blue-500);
  --status-error: var(--red-600);
  --guide-line: var(--neutral-300);
  --guide-mark: var(--blue-500);
}

.internal-hero__panel .access-form__title {
  color: var(--neutral-900);
}

.internal-hero .check-list {
  max-width: 36rem;
  margin-top: var(--space-8);
}

@media (min-width: 768px) {
  .internal-hero__panel {
    padding: var(--space-8);
  }
}

/* With a form beside it the copy takes half: the form needs the room */
@media (min-width: 1024px) {
  .internal-hero--form .internal-hero__inner {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    align-items: start;
  }
}

@media (min-width: 1200px) {
  .internal-hero--form .internal-hero__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
}

/* ---------- 06 Sectors (Industries): name beside the case for it, one frame each ---------- */
.sectors {
  display: grid;
  gap: var(--space-10);
  padding: 0;
  list-style: none;
}

.sector {
  display: grid;
  background-color: var(--surface-primary);
}

.sector__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: start;
  gap: var(--space-4);
  padding: var(--space-6);
  border-bottom: var(--border-width) var(--guide-style) var(--guide-line);
  background-color: var(--surface-secondary);
}

.sector__index {
  font-family: var(--font-label);
  font-size: var(--text-body-sm);
  line-height: var(--lh-body-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
}

.sector__title {
  grid-column: 1;
  max-width: 14ch;
  font-size: var(--text-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--tracking-heading);
}

.sector__note {
  display: block;
  margin-top: var(--space-1);
  color: var(--text-tertiary);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  font-weight: var(--weight-regular);
  letter-spacing: 0;
}

/* The sector's place, drawn in the illustration line: one building or one world */
.sector__glyph {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: var(--space-16);
  height: var(--space-16);
}

.sector__glyph .g-line { fill: none; stroke: var(--ill-system); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sector__glyph .g-fill { fill: var(--ill-surface); stroke: var(--ill-system); stroke-width: 1.5; stroke-linejoin: round; }
.sector__glyph .g-soft { fill: var(--ill-system-soft); stroke: var(--ill-system); stroke-width: 1.5; stroke-linejoin: round; }
.sector__glyph .g-action { fill: var(--ill-action); }
.sector__glyph .g-protected { fill: var(--ill-protected); }
.sector__glyph .g-sensitive { fill: var(--ill-sensitive); }

.sector__body {
  padding: var(--space-6);
}

.sector__lead {
  max-width: 60ch;
  font-size: var(--text-body-lg);
  line-height: var(--lh-body-lg);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.sector__text {
  max-width: 60ch;
  margin-top: var(--space-4);
  color: var(--text-secondary);
}

.sector__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-8);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: var(--border-width) var(--guide-style) var(--guide-line);
}

.sector__foot .outcome__tech {
  margin-top: 0;
}

@media (min-width: 768px) {
  .sector__head,
  .sector__body {
    padding: var(--space-10);
  }
}

@media (min-width: 1024px) {
  .sector {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .sector__head {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    border-bottom: 0;
    border-right: var(--border-width) var(--guide-style) var(--guide-line);
  }

  .sector__glyph {
    grid-column: 1;
    grid-row: 3;
    align-self: end;
    width: var(--space-24);
    height: var(--space-24);
    margin-top: var(--space-10);
  }

  .sector__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

@media (min-width: 1200px) {
  .sector__head,
  .sector__body {
    padding: var(--space-12);
  }
}

/* ---------- 07 Empty state (Careers: no open roles) ---------- */
.empty {
  display: grid;
  gap: var(--space-6);
  padding: var(--space-8) var(--space-6);
  background-color: var(--surface-primary);
}

.empty__title {
  font-size: var(--text-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--tracking-heading);
}

.empty__text {
  max-width: 56ch;
  margin-top: var(--space-2);
  color: var(--text-secondary);
}

@media (min-width: 768px) {
  .empty {
    padding: var(--space-10);
  }
}

@media (min-width: 1024px) {
  .empty {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--space-10);
    padding: var(--space-12);
  }
}

/* ---------- 08 About explainer (2026-10-07) ----------
   About outcome 1 holds the client's whiteboard video. Its poster is the video's own thumbnail, edge to edge
   (the shared .poster frames line art inset on a pale ground), with the play button and one chip on top. */
.poster--photo {
  background-color: #fff; /* the thumbnail's own ground */
}

.poster--photo .poster__art {
  inset: 0;
}

.poster--photo .poster__art img {
  object-fit: cover;
}

.outcome__art--video {
  align-content: center;
  row-gap: var(--space-4);
  padding: var(--space-8) var(--space-4);
}

.outcome__art--video .poster {
  grid-row: 1;
}

.outcome__caption {
  grid-row: 2;
  text-wrap: balance;
  font-size: var(--text-body-sm);
  line-height: var(--lh-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
}

/* The player takes the poster's place, same size */
.outcome__art--video .poster-frame {
  grid-row: 1;
}