/* Editorial product, careers, and resources pages. Header and footer are shared with home. */
.wk-content-page {
  display: block;
  background: #fff;
  color: var(--wk-ink, #292929);
}

.wk-content-page .site-head {
  position: sticky;
  height: 80px;
  margin: 0;
  padding-inline: 40px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--wk-ink, #292929);
  border-bottom-color: var(--wk-hairline, #ebeae9);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}

.wk-content-page .site-head::after { display: none; }
.wk-content-page .site-head.is-floating { top: 0; margin: 0; padding-inline: 40px; border-radius: 0; }
.content-skip { position: fixed; z-index: 100; top: 10px; left: 10px; transform: translateY(-180%); }
.content-skip:focus { transform: none; }

.content-hero {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px;
  max-width: 1728px;
  min-height: calc(100svh - 80px);
  margin: 0 auto;
  padding: clamp(96px, 9vw, 156px) 40px 64px;
}

.content-hero-copy {
  grid-column: 2 / span 5;
  align-self: center;
}

.content-kicker {
  display: block;
  color: var(--wk-slate, #737a82);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.content-hero h1,
.content-section-heading h2,
.roles-section h2 {
  margin: 0;
  font-family: var(--wk-display, "Newsreader", Georgia, serif);
  font-weight: var(--wk-display-weight, 375);
  font-variation-settings: var(--wk-display-vs, "opsz" 28);
  letter-spacing: -0.025em;
}

.content-hero h1 {
  margin-top: 28px;
  font-size: clamp(58px, 5.5vw, 96px);
  line-height: 1.01;
}

.content-hero-copy > p {
  max-width: 38ch;
  margin: 32px 0 0;
  color: var(--wk-slate, #737a82);
  font-size: 19px;
  line-height: 1.42;
  letter-spacing: -0.025em;
}

.content-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.content-actions .wk-btn-primary { background: #000; border-color: #000; color: #fff; }

.content-hero-visual {
  position: relative;
  grid-column: 8 / span 5;
  align-self: center;
  height: min(58vh, 620px);
  overflow: hidden;
  border-radius: 4px;
  background: #e9eceb;
}

.content-hero-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content-hero-product .content-hero-visual img { transform: rotate(-0.35deg) scale(1.035); object-position: 50% 57%; }
.content-hero-careers .content-hero-visual img { object-position: 65% 60%; }

.content-hero-pattern img { object-fit: cover; }

.content-grid,
.resource-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px;
  max-width: 1728px;
  margin: 0 auto;
  padding: 120px 40px 160px;
  border-top: 1px solid var(--wk-hairline, #ebeae9);
}

.content-section-heading { grid-column: 2 / span 5; margin-bottom: 64px; }
.content-section-heading h2,
.roles-section h2 { margin-top: 24px; font-size: clamp(48px, 4.4vw, 76px); line-height: 1.04; }
.content-card { grid-column: span 4; min-height: 320px; padding: 28px; background: #f4f4f2; }
/* Set both edges: overriding only the start erases the shorthand's span, leaving
   the first card one column wide. All three cards must occupy four columns. */
.content-card:first-of-type { grid-column: 1 / span 4; }
.content-card > span,
.resource-card > span { color: var(--wk-slate, #737a82); font-size: 12px; font-weight: 500; letter-spacing: -0.02em; }
.content-card h3,
.resource-card h3 { margin: 88px 0 20px; font-family: var(--wk-display, "Newsreader", Georgia, serif); font-size: 34px; font-weight: 375; line-height: 1.06; letter-spacing: -0.025em; }
.content-card p { max-width: 38ch; margin: 0; color: var(--wk-slate, #737a82); line-height: 1.45; letter-spacing: -0.02em; }

.roles-section {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px;
  max-width: 1728px;
  margin: 0 auto;
  padding: 120px 40px 160px;
  border-top: 1px solid var(--wk-hairline, #ebeae9);
}
.roles-section > .content-kicker { grid-column: 2 / span 3; }
.roles-section > div { grid-column: 6 / span 6; }
.roles-section p { max-width: 44ch; margin: 28px 0; color: var(--wk-slate, #737a82); font-size: 18px; line-height: 1.45; }

.resource-card {
  grid-column: span 4;
  display: flex;
  min-height: 420px;
  flex-direction: column;
  padding: 28px;
  background: #1c1c1c;
  color: #fff;
  text-decoration: none;
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), background-color 180ms ease;
}
.resource-card:first-of-type { grid-column: 1 / span 4; }
.content-card,
.resource-card { min-width: 0; overflow-wrap: anywhere; }
.resource-card:hover { transform: translateY(-5px); background: #292929; }
.resource-card > span { color: rgba(255, 255, 255, 0.56); }
.resource-card h3 { margin-top: auto; font-size: 38px; }
.resource-card strong { margin-top: 28px; font-size: 14px; font-weight: 500; }

@media (max-width: 900px) {
  .wk-content-page .site-head,
  .wk-content-page .site-head.is-floating { height: 64px; padding-inline: 20px; }
  .content-hero { display: block; min-height: 0; padding: 112px 20px 72px; }
  .content-hero h1 { font-size: clamp(48px, 13vw, 70px); }
  .content-hero-copy > p { font-size: 17px; }
  .content-hero-visual { height: 56vw; min-height: 300px; margin-top: 64px; }
  .content-grid,
  .resource-grid,
  .roles-section { display: block; padding: 80px 20px; }
  .content-section-heading { margin-bottom: 48px; }
  .content-card,
  .resource-card { min-height: 300px; margin-top: 12px; }
  .roles-section > div { margin-top: 40px; }
}