/* One Marketing careers and contact pages (18 October 2026). Loaded after the case study's "report" stylesheet
   (/case-study/report.css), which carries the type, the palette, the bands, the numbered story sections, the button
   and the Placeholder tag. This file adds only what those two pages need beyond it: a hero with no photograph, the
   role list, the bullet points, the office list and the large email. Palette and tints as in report.css, nothing else. */

/* The hero closes on its own padding: there is no photograph rising out of it */
.pg .hero{padding-bottom:var(--band)}
.pg .story{padding-top:var(--band)}

/* Buttons inside the story keep the pill: the story's link underline is for text links only */
.story a.btn{border-bottom:0}

/* Open roles: one hairline row per role. The title, the role's tags, the Placeholder tag or the summary, then the button. */
.roles{border-top:1px solid var(--line)}
.role{display:grid;gap:16px;justify-items:start;padding:28px 0 32px;border-bottom:1px solid var(--line)}
.role__head{display:grid;gap:12px}
.role h3{font-size:clamp(1.25rem,1.1rem + .5vw,1.5rem);letter-spacing:-.018em}
.role__meta{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.role__meta span{padding:6px 12px;border:1px solid var(--line);border-radius:999px;font-size:.8125rem;font-weight:600;line-height:1.2}
.role .ph{margin:0}
.role__body p{margin-bottom:12px}
.role__body p:last-child{margin-bottom:0}
.roles__none{padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* Bullet points: hairline rows, as in the case study's method columns */
.points{margin:0 0 24px}
.points li{padding:13px 0;border-top:1px solid var(--line)}
.points li:last-child{border-bottom:1px solid var(--line)}

/* Where we are: label above value, hairline rows */
.where{border-top:1px solid var(--line)}
.where > div{padding:16px 0;border-bottom:1px solid var(--line)}
.where dt{margin-bottom:6px;font-size:.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;line-height:1.5;color:var(--ink-64)}
.where dd{font-size:1.125rem;line-height:1.5}

/* The email address, large, wrapping anywhere so it never runs off a phone */
.story .big-email{margin-bottom:20px;font-size:clamp(1.25rem,1rem + 1.6vw,2.25rem);font-weight:600;letter-spacing:-.02em;line-height:1.2;overflow-wrap:anywhere}

@media (min-width:721px){
  .role{grid-template-columns:minmax(0,1fr) auto;align-items:start;column-gap:32px}
  .role__head,.role .ph,.role__body{grid-column:1}
  .role .btn{grid-column:2;grid-row:1}
}