/* /careers pages. Generated HTML comes from scripts/build-careers.js; this file is hand-written. */
:root {
  --paper: #faf9f5; --panel: #f0eee6; --ink: #141413; --ink-2: #3d3d3a; --muted: #6b6a64; --rule: #d9d6cc;
  --sage: #bcd1ca; --lavender: #cbcadb; --clay: #e8cfc0; --sand: #e6dcc4; --accent: #c2410c;
  --ok: #166534; --err: #b91c1c;
  --sans: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
}
* { box-sizing: border-box }
html { scroll-behavior: smooth }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--serif); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased }
a { color: inherit }
h1, h2, h3, .sans { font-family: var(--sans); letter-spacing: -0.02em; margin: 0 }
h1 { font-size: clamp(2.3rem, 5.2vw, 3.6rem); line-height: 1.05; font-weight: 700 }
h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.15; font-weight: 600 }
h3 { font-size: 1.12rem; font-weight: 600; line-height: 1.3 }
p { margin: 0 0 1em }
ul { margin: 0; padding-left: 1.2em }
li { margin: .3em 0 }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px }

/* Top bar */
.top { display: flex; align-items: center; justify-content: space-between; height: 72px }
/* Brand: same mark and wordmark as the homepage nav (index.html .brand-mark, home.css) */
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none }
.brand-mark { flex: none; display: inline-flex; width: 40px; height: 40px; border-radius: 11px; box-shadow: 0 3px 12px rgba(158, 23, 79, .25) }
.brand-mark svg { width: 40px; height: 40px; display: block }
.brand-mark .bm-tile { fill: #9E174F }
.brand-mark .bm-wave { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round }
.brand-mark .bm-wave-2 { opacity: .55 }
.brand-text { display: flex; flex-direction: column; gap: 4px; line-height: 1 }
.brand-word { font-family: 'Newsreader', Georgia, serif; font-weight: 500; font-size: 21px; color: #20202A; letter-spacing: -0.01em }
.brand-eyebrow { font-family: var(--sans); font-size: 9.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: #8a8a94 }
.top nav { display: flex; align-items: center; gap: 22px; font-family: var(--sans); font-size: .95rem }
.top nav a { text-decoration: none }
.top nav a:not(.btn):hover { text-decoration: underline; text-underline-offset: 3px }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; background: var(--ink); color: var(--paper); font-family: var(--sans); font-size: .95rem; font-weight: 500; text-decoration: none; padding: 10px 17px; border-radius: 8px; border: 0; cursor: pointer }
.btn:hover { background: #2e2e2b }
.btn.light { background: var(--paper); color: var(--ink) }
.btn.light:hover { background: #fff }
.btn .arr { transition: transform .15s }
.btn:hover .arr { transform: translateX(3px) }

/* Layout pieces */
.hero { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding: 88px 0 56px; align-items: start }
.hero .lede { font-size: 1.3rem; line-height: 1.5; color: var(--ink) }
.crumb { font-family: var(--sans); font-size: .9rem; color: var(--muted); margin-bottom: 18px }
.crumb a { text-decoration: none } .crumb a:hover { text-decoration: underline }
hr.rule { border: 0; border-top: 1px solid var(--rule); margin: 0 }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding: 64px 0 }
.split > *, .hero > * { min-width: 0 }
.split > div:first-child p { color: var(--ink-2); margin-top: 12px; max-width: 470px }
.panel { background: var(--panel); border-radius: 18px; padding: 36px 32px; margin: 32px 0 }
.panel .split { padding: 0 }
.facts { list-style: none; padding: 0; margin: 26px 0 28px; border-top: 1px solid var(--rule) }
.facts li { display: flex; justify-content: space-between; gap: 18px; padding: 12px 0; margin: 0; border-bottom: 1px solid var(--rule); font-size: 1rem }
.facts li span:first-child { font-family: var(--sans); color: var(--muted); font-size: .9rem }
.facts li span:last-child { text-align: right }
.muted { color: var(--muted) }
.closed-tag { display: inline-block; font-family: var(--sans); font-size: .8rem; border: 1px solid var(--rule); border-radius: 999px; padding: 2px 10px; color: var(--muted); margin-left: 8px; vertical-align: middle }

/* Accordion (details/summary, no JS needed) */
.acc { border-top: 1px solid var(--rule) }
.acc details { border-bottom: 1px solid var(--rule) }
.acc summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; font-family: var(--sans); font-weight: 600; font-size: 1.12rem; letter-spacing: -0.01em }
.acc summary::-webkit-details-marker { display: none }
.acc summary::after { content: ''; flex: none; width: 14px; height: 14px; background: linear-gradient(var(--ink), var(--ink)) center/14px 1.6px no-repeat, linear-gradient(var(--ink), var(--ink)) center/1.6px 14px no-repeat; transition: transform .2s }
.acc details[open] summary::after { transform: rotate(45deg) }
.acc .body { padding: 0 0 22px; color: var(--ink-2) }
.acc .body p:last-child { margin-bottom: 0 }

/* Role list on /careers */
.roles { border-top: 1px solid var(--rule) }
.role { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--rule); text-decoration: none }
.role h3 { font-size: 1.25rem }
.role .meta { font-family: var(--sans); color: var(--muted); font-size: .92rem; margin-top: 6px }
.role .go { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--rule); display: flex; align-items: center; justify-content: center; font-family: var(--sans); transition: background .15s, color .15s }
.role:hover .go { background: var(--ink); color: var(--paper); border-color: var(--ink) }
.role:hover h3 { text-decoration: underline; text-underline-offset: 4px }

/* Numbered carousel (scroll-snap; buttons are an enhancement) */
.car-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none }
.car-track::-webkit-scrollbar { display: none }
.slide { flex: 0 0 100%; scroll-snap-align: start; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center }
.slide .art { aspect-ratio: 1 / 1; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-family: var(--sans); font-weight: 700; font-size: clamp(4rem, 9vw, 7rem); letter-spacing: -0.04em; color: var(--ink) }
.slide:nth-child(5n+1) .art { background: var(--sage) } .slide:nth-child(5n+2) .art { background: var(--lavender) }
.slide:nth-child(5n+3) .art { background: var(--clay) } .slide:nth-child(5n+4) .art { background: var(--sand) }
.slide:nth-child(5n+5) .art { background: var(--sage) }
.slide h3 { margin-bottom: 10px; font-size: 1.25rem }
.slide ul { color: var(--ink-2); font-size: 1rem }
.car-nav { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--rule); margin-top: 28px; padding-top: 16px; font-family: var(--sans); font-size: .95rem }
.car-nav b { font-weight: 600 }
.car-nav .btns { display: flex; gap: 8px }
.car-nav button { width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--rule); background: #fff; cursor: pointer; font-size: 1rem; color: var(--ink) }
.car-nav button:disabled { opacity: .4; cursor: default }

/* Cycle and metric chains */
.chain { display: flex; flex-wrap: wrap; gap: 8px 6px; list-style: none; padding: 0; margin: 18px 0 0; font-family: var(--sans); font-size: .9rem }
.chain li { display: flex; align-items: center; margin: 0 }
.chain li span { border: 1px solid var(--rule); background: #fff; border-radius: 999px; padding: 5px 12px }
.chain li + li::before { content: '→'; color: var(--muted); margin-right: 6px }
.ladder { list-style: none; padding: 0; margin: 4px 0 0; counter-reset: l }
.ladder li { counter-increment: l; display: flex; gap: 14px; align-items: baseline; padding: 6px 0; margin: 0 }
.ladder li::before { content: '0' counter(l); flex: none; font-family: var(--sans); font-size: .85rem; color: var(--muted); width: 22px }

.ladder.abc li::before { content: counter(l, upper-alpha) }

/* Application form */
.form { display: grid; gap: 0 18px; grid-template-columns: 1fr 1fr }
.form .full { grid-column: 1 / -1 }
.form label { display: block; font-family: var(--sans); font-size: .9rem; font-weight: 500; margin: 0 0 16px }
.form .opt { color: var(--muted); font-weight: 400 }
.form input, .form select, .form textarea { display: block; width: 100%; margin-top: 6px; font: inherit; font-family: var(--sans); font-size: 1rem; padding: 11px 12px; border: 1px solid #c9c5b9; border-radius: 8px; background: #fff; color: var(--ink) }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--ink); outline-offset: 0 }
.form textarea { min-height: 110px; resize: vertical }
.drop { display: flex; align-items: center; gap: 14px; margin-top: 6px; padding: 16px; border: 1.5px dashed #b9b4a6; border-radius: 10px; background: #fff; cursor: pointer }
.drop.has { border-style: solid; border-color: var(--ink) }
.drop.over { background: #f5f3ec }
.drop .ic { flex: none; width: 40px; height: 40px; border-radius: 8px; background: var(--panel); display: flex; align-items: center; justify-content: center; font-size: 1.1rem }
.drop .t { font-weight: 500 } .drop .s { color: var(--muted); font-size: .85rem; font-weight: 400 }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }
.form .consent { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; color: var(--ink-2) }
.form .consent input { width: auto; margin-top: 4px }
#msg { font-family: var(--sans); font-size: .95rem; margin: 14px 0 0 } #msg.err { color: var(--err) }
.done { display: none; padding: 8px 0 }
.done .tick { width: 48px; height: 48px; border-radius: 50%; background: var(--sage); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: 14px }

/* Dark band + footer */
.band { background: var(--ink); color: var(--paper); text-align: center; padding: 110px 24px; margin-top: 72px }
.band h2 { font-size: clamp(2rem, 4.6vw, 3.3rem); font-weight: 700; line-height: 1.08; max-width: 820px; margin: 0 auto 34px }
.foot { background: var(--ink); color: #a8a69d; font-family: var(--sans); font-size: .88rem }
.foot .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 28px; padding-bottom: 40px; border-top: 1px solid #333330 }
.foot a { color: #d6d4cb; text-decoration: none; margin-left: 18px } .foot a:hover { text-decoration: underline }

@media (max-width: 820px) {
  .wrap { padding: 0 16px }
  .top nav .hide-sm { display: none }
  .brand-eyebrow { display: none }
  .brand-mark, .brand-mark svg { width: 34px; height: 34px }
  .brand-word { font-size: 18px }
  .hero, .split, .slide { grid-template-columns: 1fr; gap: 24px }
  .hero { padding: 48px 0 36px }
  .split { padding: 44px 0 }
  .panel { padding: 26px 18px; border-radius: 14px }
  .slide .art { aspect-ratio: 16 / 9 }
  .form { grid-template-columns: 1fr }
  .band { padding: 80px 16px }
  .foot a { margin: 0 14px 0 0 }
}