/* ============================================================
   Tiempo — /about
   Everything on this page that is not chrome, tokens or motion.
   ============================================================ */

/* This page runs slightly larger, tighter body copy than the site
   default (17px/1.75 against 16px/1.85). Restated so linking base.css
   does not resize the page. */
body {
  font-size: 1.0625rem;
  line-height: 1.75;
}


/* ── Hero (same header video as Meet the Team) ── */
/* The hero used a fixed height with its copy absolutely positioned at
   bottom: 44px. Any headline longer than the box overflowed upward,
   behind the nav and out of the clipped area, with no way for the
   section to grow. min-height plus a flex column keeps the hero's
   presence but lets the box hug taller copy instead of hiding it.
   The height itself is --hero-h, shared with every other hero. */
.page-hero {
  position: relative;
  width: 100%;
  min-height: var(--hero-h);
  background-color: var(--media);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.page-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.page-hero__content { position: relative; z-index: var(--z-raised); padding: 0 var(--pad-x) 44px; }
.page-hero__content h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); color: var(--crema); line-height: 1.1; letter-spacing: -0.02em; max-width: 640px; }
.page-hero__content h1 em { font-style: italic; }
.page-hero__content p { color: rgba(var(--crema-rgb), 0.85); font-size: 1.05rem; max-width: 52ch; margin-top: 10px; }
/* The hero CTA is .btn-primary from components.css now that this page links
   that file. The rule that used to be copied here by hand is gone. */
.page-hero__content .btn-primary { margin-top: 24px; }
/* ── Executive summary — two-column editorial ── */
.exec-section { padding: var(--band) var(--pad-x) var(--band-lg); background: var(--crema); }
.exec-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: stretch; }
.exec-left { display: flex; flex-direction: column; }
.exec-left h2 { font-size: clamp(2rem, 3.4vw, 2.8rem); color: var(--clockwork); letter-spacing: -0.02em; line-height: 1.12; }
/* Photo fills whatever height the copy column sets, down to the section padding */
/* The copy column sets the height and the photo fills it. Two things make
   that work. No max-height, so flex: 1 hands the tile whatever the copy leaves
   once the heading and caption have taken theirs; the old 460px cap only
   happened to match at about 1300px and left 113px of dead cream at 1024.
   And the image below is out of flow, because height: 100% on an in-flow child
   of a tile with no definite height resolves to auto: the photo then reported
   its own aspect-driven height as content, which drove the column instead of
   filling it, and the section grew rather than the picture fitting.
   min-height is only a floor for a short column. The padding and overflow that
   used to sit inline on this div live here now. */
.exec-photo-ph { position: relative; margin-top: 28px; flex: 1; min-height: 340px; padding: 0; overflow: hidden; background: var(--clockwork); border-radius: 12px; }

/* Absolute, so the tile takes its height from the grid stretch and never from
   the picture. The framing values moved here off an inline style attribute. */
.exec-photo-ph img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 82%;
  transform: scale(1.12);
  transform-origin: 50% 70%;
}
.exec-photo-ph span { font-family: var(--font-body); font-size: 0.95rem; color: rgba(var(--crema-rgb), 0.65); }

/* Caption under the photo. Sized and coloured like .exec-letter__role, the
   page's other line of small print, so the two read as the same register. */
.exec-photo-caption {
  margin-top: 10px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: rgba(var(--clockwork-rgb), 0.75);
}

.exec-right p { margin-bottom: 18px; color: var(--clockwork); }
.exec-right p:first-of-type { font-size: 1.2rem; line-height: 1.6; }
.exec-letter { margin-top: 30px; border-left: 2px solid rgba(var(--clockwork-rgb), 0.35); padding-left: 20px; }
.exec-letter p { margin-bottom: 14px; font-size: 0.98rem; }
.exec-letter__sign { font-family: var(--font-display); font-style: italic; font-size: 1.15rem; color: var(--clockwork); }
.exec-letter__role { font-family: var(--font-body); font-size: 0.8125rem; color: var(--clockwork); margin-top: 2px; }

/* ── How we choose assistants ──
   Styled to match the "What we value" section on /work-with-us. */
.vet-section { background: var(--clockwork); padding: var(--band) var(--pad-x) var(--band-lg); }
.vet-section h2, .vet-section h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  letter-spacing: -0.02em;
  line-height: 1.12;
}
.vet-section p { font-family: var(--font-body); line-height: 1.6; }
.vet-head h2 { font-size: var(--fs-h1); color: var(--crema); margin-bottom: 10px; }
.vet-head p { max-width: 600px; color: var(--crema); font-size: 1.0625rem; }
.vet-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 28px;
  /* No row-gap: icon and heading margins set the spacing inside a step */
  row-gap: 0;
  margin-top: 28px;
  /* icon / heading / body — subgrid keeps every step on the same rows */
  grid-template-rows: auto auto auto;
}
.vet-step { display: grid; grid-template-rows: subgrid; grid-row: span 3; }
.vet-step__icon { margin-bottom: 18px; line-height: 0; }
.vet-step__icon svg { width: 42px; height: 42px; display: block; }
.vet-step__icon svg path { fill: var(--crema); }
.vet-step h3 { font-size: var(--fs-h2); color: var(--crema); margin-bottom: 8px; }
/* No max-width. The column is already the measure: three 1fr tracks inside
   --content-max give about 376px each here and 501px at the widest, which is
   47 to 63 characters at --fs-body, well inside a readable line. Capping the
   text at 320px left 56px of empty column on the right of all three, so the
   gutters read as 84px against the 28px the grid actually sets, and only the
   outer edges met the section padding. */
.vet-step p { color: var(--crema); opacity: 0.85; font-size: var(--fs-body); }

/* ── Human first — bento grid ── */
.human-section { background: var(--crema); padding: var(--band) var(--pad-x) var(--band-2xl); }
.human-head { max-width: 640px; margin-bottom: 36px; }
.human-head h2 { color: var(--clockwork); font-size: clamp(2rem, 3.4vw, 2.8rem); letter-spacing: -0.02em; line-height: 1.12; }
/* 200px is the composition's rhythm, not a ceiling. The photo tiles are
   happy at exactly one row; the two text tiles are not, and between
   1025px and about 1350px their copy ran past the border and over the
   tiles beside them. minmax lets the row that carries the copy grow
   instead, so nothing spills whatever the quote is replaced with. */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(200px, auto); gap: 16px; }
.bento-tile {
  border-radius: 14px; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 20px; font-family: var(--font-body);
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
}
.bento-tile--photo { background: var(--clockwork); color: rgba(var(--crema-rgb), 0.7); position: relative; }
/* Media is taken out of flow so it can never size a row. A photo is
   cropped to whatever height the row lands on; only the two text tiles
   get a say in that height. Without this the images push their own
   aspect ratio into the auto rows and the whole bento stretches. */
.bento-tile--photo > img,
.bento-tile--photo > video { position: absolute; inset: 0; }
/* A tile holding a real photo drops its padding so the image fills the card */
.bento-tile:has(img) { padding: 0; overflow: hidden; }
.bento-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Text tiles carry real copy, so reset the placeholder typography */
.bento-tile--text {
  background: var(--crema);
  border: 1px solid var(--clockwork);
  color: var(--clockwork);
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  padding: 32px;
  font-size: var(--fs-body);
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.6;
}
.bento-tile--text p { max-width: 62ch; }
/* Narrower side padding than the other text tile. This one is a single column
   in the bento, 249px wide, so 32px each side left the quote 183px to run in
   and a display face at 1.25rem broke it over four lines. 22px gives it 205px
   and three. Inline only: the 32px top and bottom still match its neighbour. */
.bento-tile--quote { padding-inline: 22px; }

.bento-tile--quote blockquote {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: 1.25rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.bento-tile--quote cite {
  display: block;
  margin-top: 14px;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.8125rem;
  color: var(--clockwork);
}
.bento-tile--tall { grid-column: span 2; grid-row: span 2; }
.bento-tile--wide { grid-column: span 2; }
/* One column wide, two rows deep */
.bento-tile--vtall { grid-row: span 2; }
/* Bento keeps 2 columns on tablet, collapses to 1 only on phones */
@media (max-width: 1024px) {
  .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(180px, auto); }
  /* Text blocks need more height than a single 180px row at this width,
     so give them two rows (same approach as the phone layout) */
  .bento-tile--text { grid-row: span 2; }
}
@media (max-width: 767px) {
  .bento { grid-template-columns: 1fr; grid-auto-rows: minmax(160px, auto); gap: 12px; }
  .bento-tile--tall, .bento-tile--wide, .bento-tile--vtall { grid-column: span 1; grid-row: span 1; }
  /* Rows stay a fixed 160px; the long copy block just takes two of them
     rather than stretching the whole grid out of shape */
  .bento-tile--text { padding: 24px; grid-row: span 2; }
  .bento-tile--quote { grid-row: span 1; }
}

/* ── The vision ── */
.vision-section { background: var(--clockwork); padding: var(--band) var(--pad-x) var(--band-lg); }
.vision-section h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  letter-spacing: -0.02em;
  line-height: 1.12;
  font-size: var(--fs-h1);
  color: var(--crema);
  margin-bottom: 14px;
}
.vision-quote {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-style: italic;
  letter-spacing: -0.01em;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.3;
  color: var(--crema);
  max-width: 880px;
}
.vision-cite {
  display: block;
  margin-top: 18px;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.875rem;
  color: var(--crema);
}
/* stretch: the chart panel matches the quote column's height so it lands on
   the section's bottom padding. Content still starts at the top of each column. */
.vision-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: stretch; }

/* Reach-out box. Crema panel on the clockwork field, so the one place on
   this page that asks for a reply is the one place that inverts.
   Centred in its column: the copy is short and would otherwise strand
   whitespace under it when the quote column runs long. */
.vision-reach {
  background: var(--crema); border-radius: 14px; padding: 34px 32px;
  font-family: var(--font-body);
  display: flex; flex-direction: column; justify-content: center;
}
.vision-reach h3 {
  font-family: var(--font-display); font-weight: var(--fw-light);
  letter-spacing: -0.02em; line-height: 1.12;
  font-size: var(--fs-h2); color: var(--clockwork); margin-bottom: 12px;
}
.vision-reach p { font-size: var(--fs-body); line-height: 1.6; color: var(--clockwork); max-width: 34ch; }
.vision-reach ul { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.vision-reach li {
  font-size: var(--fs-xs); line-height: 1; color: var(--clockwork);
  border: 1px solid rgba(var(--clockwork-rgb), 0.35); border-radius: var(--r-pill); padding: 7px 14px;
}
.vision-reach__mail {
  display: inline-block; margin-top: 24px;
  font-size: 1.125rem; letter-spacing: -0.01em; color: var(--clockwork);
  text-decoration: underline; text-underline-offset: 4px;
  transition: color 0.2s ease;
}
.vision-reach__mail:hover { color: var(--honey); }

/* ── Footer ── */
/* The footer block that lived here is gone: chrome.css owns it now.
   It was this page's own copy and had already drifted — .footer-glass
   used padding: 56px calc(var(--pad-x) * 0.15) 0, which at 375px is a
   2.4px gutter against every other page's 24px, and .footer-columns
   stayed a 4-column grid on a 360px-wide phone. */

/* ── Responsive ──────────────────────────────────────────────
   The footer rules that used to live in this block (a 2-column
   grid, zero gap on .footer-bottom, an 80px logo) are gone: they
   were this page's own divergent footer, and chrome.css now owns
   footer behaviour for every page. */
@media (max-width: 900px) {
  .exec-section { padding-top: var(--band); padding-bottom: 48px; }
  .exec-grid { grid-template-columns: 1fr; gap: 28px; }
  /* One column here, so there is no sibling height to fill and flex: 1 has
     nothing to resolve against. An aspect ratio scales the tile with the
     viewport instead; a flat 220px floor made a full-width letterbox that cut
     both faces. 11/10 is the shape the two-column tile lands on anyway. */
  .exec-photo-ph { aspect-ratio: 11 / 10; min-height: 0; margin-top: 20px; }
  .human-section, .vision-section { padding-top: var(--band); padding-bottom: 48px; }
  .vision-grid { grid-template-columns: 1fr; gap: 32px; }
  /* Stacked: cross-step alignment is moot, so drop subgrid and let the
     row gap separate the steps instead of their internal rows. */
  .vet-grid { grid-template-columns: 1fr; row-gap: 22px; }
  .vet-step { display: flex; flex-direction: column; grid-row: auto; }
}