/* ============================================================
   Tiempo — /work-with-us
   The recruiting page: departments, values, the benefits bento, the
   filterable open-positions table and the apply band.
   ============================================================ */

/* Placeholder-card greys for the Open Positions block. These were a
   :root declaration in the page's inline CSS, which would now leak into
   the shared modules, so they are scoped to the page. --wf-bg is dropped:
   nothing referenced it. */
body {
  --wf-fill: #E4DDCB;
  --wf-line: #B7AE9B;
  --wf-ink:  #6F6757;
}

/* ── Hero ── */
.hero {
  position: relative;
  background-color: var(--media);
  min-height: var(--hero-h);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--band-xl) var(--pad-x) var(--band-lg);
  overflow: hidden;
}

.hero video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}

.hero h1, .hero p { position: relative; z-index: 1; }

/* The hero CTA is .btn-primary from components.css now that this page links
   that file. align-self stops it stretching across the flex column .hero sets
   up; z-index clears the hero video behind it. */
.hero .btn-primary { align-self: flex-start; position: relative; z-index: 1; margin-top: 24px; }

/* Secondary hero CTA — same treatment/position as the homepage hero */
.hero-secondary-cta {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(var(--crema-rgb), 0.65);
  font-size: var(--fs-body);
  font-family: var(--font-body);
  text-decoration: none;
  transition: color 0.2s;
  white-space: nowrap;
  z-index: 5;
}

.hero-secondary-cta:hover { color: rgba(var(--crema-rgb), 0.9); text-decoration: underline; }

.hero-secondary-cta .wip-badge {
  display: inline-block; background: var(--alert); color: #fff;
  font-family: var(--font-body); font-size: 0.65rem; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 5px; vertical-align: middle; margin-left: 8px;
}

.hero h1 {
  font-size: var(--fs-hero);
  font-weight: 400;
  color: var(--white);
  letter-spacing: -0.02em;
  line-height: 1.1;
  max-width: 620px;
  margin-bottom: 12px;
}

.hero h1 em {
  font-style: italic;
  color: var(--crema);
}

.hero p {
  font-size: 1rem;
  color: var(--crema);
  line-height: 1.5;
  max-width: 560px;
  font-family: var(--font-body);
}

/* ── What You Will Do ── */

/* ── Specializations ── */

@keyframes specFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Open Positions ── */
.positions-section {
  padding: var(--band) var(--pad-x);
  background-color: var(--clockwork);
}

.positions-section__header {
  text-align: left;
  margin-bottom: 32px;
}

.positions-section h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 300;
  color: var(--crema);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
}

/* ── Open positions table ── */
.pos-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.pos-filter__pill {
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: rgba(var(--crema-rgb), 0.88);
  background: transparent;
  border: 1px solid rgba(var(--crema-rgb), 0.35);
  border-radius: var(--r-pill);
  padding: 6px 14px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.pos-filter__pill:hover { background: rgba(var(--crema-rgb), 0.12); }

.pos-filter__pill.active { background: var(--crema); color: var(--clockwork); border-color: var(--crema); }

/* Fixed-size table area — anything beyond ~9 rows scrolls inside; section never resizes */
.pos-table-wrap {
  background: var(--crema);
  border-radius: 14px;
  padding: 0 28px;
  /* max-height, not height: the department filter can cut the list to one
     or two roles, and a fixed 600px box left most of it empty. It still
     scrolls once the list outgrows the box. */
  max-height: 600px;
  overflow-y: auto;
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* old Edge/IE */
}

.pos-table-wrap::-webkit-scrollbar { display: none; }

  /* Chrome/Safari */
.pos-table { width: 100%; border-collapse: collapse; font-family: var(--font-body); }

.pos-table th {
  position: sticky;
  top: 0;
  background: var(--crema);
  z-index: 2;
  text-align: left;
  font-size: 0.74rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(var(--clockwork-rgb), 0.65);
  padding: 20px 12px 16px;
  border-bottom: 1px solid rgba(var(--clockwork-rgb), 0.3);
  white-space: nowrap;
}

.pos-table td {
  padding: 18px 12px;
  border-bottom: 1px solid rgba(var(--clockwork-rgb), 0.14);
  font-size: 1.05rem;
  font-family: var(--font-body);
  color: var(--clockwork);
  vertical-align: middle;
}

.pos-table tbody tr { transition: background 0.15s ease; }

.pos-table tbody tr:hover { background: rgba(var(--clockwork-rgb), 0.05); }

.pos-table__title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: 0;
  color: var(--clockwork);
}

/* Role icon — inline with the position name, not a separate column */
.pos-icon {
  display: inline-block;
  vertical-align: -3px;
  margin-right: 12px;
  line-height: 0;
}

.pos-icon svg { width: 17px; height: 17px; display: inline-block; }

.pos-icon svg path { fill: var(--clockwork); }

/* Row CTA — hidden until the row is hovered */
.pos-table__cta { text-align: right; }

.pos-apply {
  display: inline-block;
  background: var(--clockwork);
  color: var(--crema);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  padding: 8px 18px;
  border-radius: var(--r-pill);
  opacity: 0;
  transform: translateX(4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
}

.pos-table tbody tr:hover .pos-apply { opacity: 1; transform: translateX(0); }

.pos-apply:hover { background: var(--ciruela); color: var(--crema); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Direct report link + "Meet your boss." tooltip */
/* Plain text since Meet the Team came off the site. Was a link with a
   'Meet your boss.' tooltip; restore that if the page ever comes back. */
.dr-name {
  color: var(--clockwork);
  font-weight: 500;
}

@media (max-width: 767px) {
  .pos-table-wrap {padding: 4px 18px; max-height: 560px;}
  .pos-table thead {display: none;}
  .pos-table, .pos-table tbody, .pos-table tr, .pos-table td {display: block; width: 100%;}
  .pos-table tbody tr {padding: 14px 0; border-bottom: 1px solid rgba(var(--clockwork-rgb), 0.14);}
  .pos-table tbody tr:last-child {border-bottom: none;}
  .pos-table td {padding: 3px 0; border: none; display: flex; justify-content: space-between; align-items: baseline; gap: 16px;}
  .pos-table td::before {content: attr(data-label);
    font-size: 0.68rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(var(--clockwork-rgb), 0.65);
    flex-shrink: 0;}
  .pos-table td.pos-table__title {display: block; margin-bottom: 2px;}
  .pos-table td.pos-table__title::before {display: none;}
  .pos-table td.pos-table__cta {display: block; text-align: left; padding-top: 8px;}
  .pos-table td.pos-table__cta::before {display: none;}
  .pos-apply {opacity: 1; transform: none;}
}

/* Success state */

@media (max-width: 767px) {
  .hero {padding-bottom: 32px;}
  .hero h1 {font-size: var(--fs-h1);}
  /* Into the flow rather than pinned to the hero floor. Absolutely positioned
     it sat on top of the Book a Call button, overlapping it by 26px at 375.
     page-service.css gives its secondary link the same treatment. */
  .hero-secondary-cta {
    position: static;
    transform: none;
    align-self: flex-start;
    margin-top: 14px;
  }
  .positions-section {padding-top: 36px; padding-bottom: 36px;}
}

.wf-section { padding: var(--band) var(--pad-x); }



   /* lead section keeps a larger top padding */
.wf-section h1, .wf-section h2, .wf-section h3, .wf-section h4 {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.12;
}

.wf-section p { font-family: var(--font-body); line-height: 1.6; }

/* ── Alternating section palettes ── */
/* On crema: Find your team */
.wf-find { background: var(--crema); }

.wf-find h2, .wf-find h3, .wf-find h4 { color: var(--clockwork); }

.wf-find p { color: var(--clockwork); }

/* On media noche: Think you are a fit */
/* scroll-margin so the hero's Contact Us link lands the heading clear of the
   fixed nav rather than under it. */
.wf-apply { background: var(--media); scroll-margin-top: 72px; }

.wf-apply h2, .wf-apply p { color: var(--crema); }

/* ── Image placeholder (original greyscale wireframe) ── */
.wf-img {
  position: relative;
  background-color: var(--wf-fill);
  border: 1.5px solid var(--wf-line);
  border-radius: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 100 100'%3E%3Cpath d='M0 0L100 100M100 0L0 100' stroke='%23B7AE9B' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
}

.wf-img span {
  position: relative;
  z-index: 1;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wf-ink);
  background: var(--wf-fill);
  padding: 6px 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--wf-line);
}

/* Placeholder filled with a real photo */
.wf-img.has-photo {
  background-image: none;
  border: none;
  overflow: hidden;
}

.wf-img.has-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Find your team ── */
.wf-find__inner {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 48px;
  align-items: start;
}

.wf-find__title { font-size: var(--fs-h1); margin-bottom: 16px; }

.wf-find__lead { font-size: 1.0625rem; max-width: 540px; }

.wf-find__img { min-height: 360px; align-self: stretch; }

/* ── Departments ── */
/* A clockwork rule sets the departments apart from the copy above it */
.wf-depts {
  margin-top: 36px;
  padding-top: 26px;
  border-top: 1px solid var(--clockwork);
}

.wf-depts__title { font-size: var(--fs-h2); margin-bottom: 6px; }

.wf-depts__lead { max-width: 440px; }

.wf-dept-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 16px;
  margin-top: 28px;
}

.wf-dept-card { display: flex; flex-direction: column; }

.wf-dept-card__img { position: relative; overflow: hidden; min-height: 120px; margin-bottom: 12px; }

.wf-dept-card__detail {
  position: absolute;
  inset: 0;
  background: rgba(var(--media-rgb), 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.wf-dept-card:hover .wf-dept-card__detail { opacity: 1; }

.wf-dept-card__detail p {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--crema);
  line-height: 1.45;
  margin: 0;
}

.wf-dept-card__name { font-size: var(--fs-h3); margin-bottom: 4px; }

/* ── Benefits ── */
/* Bento. Five tiles on a 5 x 2 grid that fills exactly: one 2x2, one wide,
   one tall, two small. Tile height comes from the grid, never from the
   copy, so the composition holds however long a paragraph runs. Every tile
   is built the same way, media on top and copy under it, and only the size
   changes. That is what keeps it reading as one set rather than five cards. */
/* What you get — the same hover-reveal gallery as the homepage "Our focus"
   section, four equal cards on the clockwork surface. */
.tcf-section { background: var(--crema); padding: var(--band) var(--pad-x); }

.tcf-header { text-align: center; margin-bottom: 28px; }

.tcf-title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 300;
  color: var(--clockwork);
  line-height: 1.1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  margin: 0 auto;
}

.tcf-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }

.tcf-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  container-type: inline-size;
  /* Title font scales with card width so it never wraps; 44px = label
     padding, 10 = the width-to-font ratio a title may not exceed. That
     is a budget on the copy, not a description of it: the title is
     nowrap inside an overflow-hidden drawer, so a title wider than
     10x its own font size is silently cut off mid-word at every width
     below the 1.4rem cap. Longest today is "AI mastery & training." at
     9.96. Measure a new title before shipping it. */
  --tcf-fs: clamp(0.75rem, calc((100cqi - 44px) / 10), 1.4rem);
}

.tcf-card__img { width: 100%; aspect-ratio: 8/10.8; display: block; }

.tcf-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.5s cubic-bezier(0.33,1,0.68,1);
}

.tcf-card:hover .tcf-card__img img { transform: scale(1.04); }

/* Drawer anchored at the bottom, grows upward on hover. Closed height is
   padding plus one title line, so the copy never peeks. */
.tcf-card__label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--clockwork);
  padding: 14px 22px;
  max-height: calc(28px + var(--tcf-fs) * 1.15);
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.33,1,0.68,1);
}

.tcf-card:hover .tcf-card__label { max-height: 420px; }

/* The first card nudges its drawer open on load so visitors learn the
   cards reveal more. Hover cancels it. */
.tcf-card--hint .tcf-card__label { animation: tcfHint 3s ease-in-out 1.4s 3; }

.tcf-card--hint:hover .tcf-card__label { animation: none; }

@keyframes tcfHint {
  0%, 100% { max-height: calc(28px + var(--tcf-fs) * 1.15); }
  45%, 55% { max-height: calc(58px + var(--tcf-fs) * 1.15); }
}

@media (prefers-reduced-motion: reduce) {
  .tcf-card--hint .tcf-card__label {animation: none;}
}

.tcf-card__title {
  font-family: var(--font-display);
  font-size: var(--tcf-fs);
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--crema);
  white-space: nowrap;
}

.tcf-card__desc {
  font-family: var(--font-body);
  font-size: 1rem;
  color: rgba(var(--crema-rgb), 0.85);
  line-height: 1.55;
  margin: 10px 0 0;
}

/* ── Apply ── */
.wf-apply { text-align: center; display: flex; flex-direction: column; align-items: center; }

.wf-apply__title { font-size: var(--fs-h1); margin-bottom: 24px; }

.apply-box {
  max-width: 560px;
  text-align: center;
  background: rgba(var(--crema-rgb), 0.04);
  border: 1px solid rgba(var(--crema-rgb), 0.12);
  border-radius: 16px;
  padding: 40px;
}

.apply-box p { color: rgba(var(--crema-rgb), 0.72); font-size: var(--fs-body); line-height: 1.6; margin: 0; }

.apply-box a { color: var(--crema); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }

.apply-box a:hover { color: var(--terracotta); }

/* ── Find your team: extra culture copy ── */
.wf-find__body { margin-top: 14px; max-width: 560px; font-size: var(--fs-body); }

/* Three facts under the body copy. The photo beside this column is
   min-height: 360px against 206px of copy, so 154px of cream sat under the
   text; this fills it without stretching the photo or padding the prose.
   A dl because each one is a term and its gloss. Row rule between, not a
   card: the section is flat cream and a box here would invent a component. */
.wf-find__facts { margin-top: 26px; max-width: 560px; }

.wf-find__fact {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 16px;
  padding: 11px 0;
  border-top: 1px solid rgba(var(--clockwork-rgb), 0.18);
}

.wf-find__fact:last-child { border-bottom: 1px solid rgba(var(--clockwork-rgb), 0.18); }

.wf-find__facts dt {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-sm);
  color: var(--clockwork);
}

.wf-find__facts dd {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: rgba(var(--clockwork-rgb), 0.8);
}

/* ── Values (crema) ── */
.wf-values { background: var(--clockwork); }

.wf-values__title { font-size: var(--fs-h1); color: var(--crema); margin-bottom: 10px; }

.wf-values__lead { max-width: 600px; color: var(--crema); font-size: 1.0625rem; }

.wf-values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 28px;
  /* No row-gap: spacing inside a card comes from the icon and heading
     margins, same as before subgrid. A row-gap here would push the body
     copy away from its heading. */
  row-gap: 0;
  margin-top: 28px;
  /* icon / heading / body — subgrid keeps all four cards on the same rows,
     so body copy starts on one line even when a heading wraps */
  grid-template-rows: auto auto auto;
}

.wf-value-card { display: grid; grid-template-rows: subgrid; grid-row: span 3; }

.wf-value-card__icon {
  margin-bottom: 18px;
  line-height: 0;
}

.wf-value-card__icon svg { width: 42px; height: 42px; display: block; }

.wf-value-card__icon svg path { fill: var(--crema); }

.wf-value-card h3 { font-size: var(--fs-h2); color: var(--crema); margin-bottom: 8px; }

.wf-value-card p { color: var(--crema); opacity: 0.85; font-size: var(--fs-body); max-width: 320px; }

@media (max-width: 767px) {
  .wf-section {padding: 36px var(--pad-x);}
  .wf-find__inner {grid-template-columns: 1fr; gap: 28px;}
  .wf-find__title {font-size: var(--fs-h1);}
  .wf-find__img {min-height: 240px;}
  /* One column here, so the two-track fact rows would leave the term stranded
     on a 150px rail. Stack them instead. */
  .wf-find__fact { grid-template-columns: 1fr; gap: 3px; }
  /* Bento folds to two columns. The 2x2 keeps its lead by staying full
     width; everything else drops to one cell, so the grid stays a grid
     instead of becoming a stack of five identical boxes. */
  .tcf-section {padding: 36px var(--pad-x);}
  .tcf-title {white-space: normal;}
  .tcf-grid {grid-template-columns: 1fr; gap: 10px;}
  .tcf-card__img {aspect-ratio: 4/3;}
  .tcf-card__desc {display: none;}
  /* Stacked: cross-card alignment is moot, so drop subgrid and let the
     row gap separate the cards instead of their internal rows. */
  .wf-values-grid {grid-template-columns: 1fr; row-gap: 22px;}
  .wf-value-card {display: flex; flex-direction: column; grid-row: auto;}
}

/* ── WIP flags ──────────────────────────────────────────
   Inline badge on section headings, overlay badge on media.
   Delete both when the copy or asset is final. */
.wip-badge { display:inline-block; background:var(--alert); color:#fff; font-family:'DM Sans',sans-serif; font-size:0.7rem; font-weight:500; letter-spacing:0.06em; text-transform:uppercase; padding:2px 8px; border-radius:5px; vertical-align:middle; margin-left:10px; }

.wip-media { position: relative; }

.wip-media > .wip-badge--media { position:absolute; top:10px; left:10px; margin-left:0; z-index:5; pointer-events:none; }

/* .wf-img span (the grey "Image" pill) outranks .wip-badge on specificity,
   so restate the badge look for media badges sitting inside a .wf-img. */
.wf-img > .wip-badge--media { background:var(--alert); color:#fff; font-size:0.7rem; letter-spacing:0.06em; padding:2px 8px; border-radius:5px; border:none; }