/* Tipografia: Bricolage Grotesque (títulos, eixo óptico) + Schibsted Grotesk (texto). SIL OFL 1.1. */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("assets/bricolage-grotesque.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("assets/schibsted-grotesk.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #faf7ed;
  --white: #fffdf8;
  --ink: #161b2b;
  --muted: #4d5161;
  --line: #d6d2c4;
  --blue: #203fd1;
  --blue-deep: #19295b;
  --blue-light: #e4e9ff;
  --orange: #ff825b;
  --orange-text: #a5351d;
  --title-dot: #000;
  --mint: #dcebd8;
  --sand: #f8dfbd;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", monospace;
  --display: "Bricolage Grotesque", "Schibsted Grotesk", system-ui, sans-serif;
  --body: "Schibsted Grotesk", system-ui, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  font: 100%/1.58 var(--body);
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; color: var(--ink); background: var(--paper); }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-family: var(--display); line-height: 1.02; letter-spacing: -.035em; font-optical-sizing: auto; text-wrap: balance; }
p { text-wrap: pretty; }
h1 { font-size: clamp(2.75rem, 7.3vw, 7.25rem); font-weight: 700; }
h2 { font-size: clamp(1.95rem, 4.4vw, 4.2rem); font-weight: 700; }
h3 { font-size: clamp(1.4rem, 2.7vw, 2.65rem); }
h1 span { color: var(--title-dot); }
a { color: var(--blue); text-underline-offset: .22em; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
img { display: block; max-width: 100%; height: auto; }
.wrap { width: min(100% - clamp(2rem, 7vw, 7rem), 76rem); margin-inline: auto; }
.section { padding-block: clamp(3.1rem, 7vw, 6.8rem); }
.section-lede { max-width: 58ch; margin-block: .75rem 1.5rem; color: var(--muted); }
.icon { width: 1.2em; height: 1.2em; flex: none; }
.mono, .eyebrow { font: 700 .75rem/1.4 var(--mono); letter-spacing: .075em; }
.eyebrow { display: flex; align-items: center; gap: .6rem; color: var(--blue); }
.label-index {
  display: inline-grid; min-width: 1.9rem; min-height: 1.7rem; padding-inline: .3rem;
  place-items: center; background: var(--blue); color: #fff; border-radius: .3rem;
  font: 700 .74rem/1 var(--mono); flex: none; letter-spacing: 0;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
:focus-visible { outline: 3px solid #b0391c; outline-offset: 4px; }
:where(h2, section)[id] { scroll-margin-top: 1rem; }
.skip {
  position: absolute; top: .7rem; left: .8rem; z-index: 10; transform: translateY(-220%);
  background: var(--white); color: var(--ink); padding: .7rem 1rem; font-weight: 800;
}
.skip:focus { transform: none; }

.site-header { background: var(--paper); border-bottom: 1px solid var(--line); }
.header-inner {
  min-height: 74px; display: flex; justify-content: space-between; align-items: center;
  gap: .75rem 1rem; padding-block: .65rem;
}
.brand {
  display: inline-flex; min-height: 44px; gap: .55rem; align-items: center; white-space: nowrap;
  text-decoration: none; color: inherit; font: 700 1.52rem/1 var(--display); letter-spacing: -.065em;
}
.brand-plus { color: var(--orange-text); }
.header-inner nav, .footer-grid nav { display: flex; flex-wrap: wrap; gap: 0 .35rem; }
.header-inner nav a, .footer-grid nav a, .header-cta {
  display: inline-flex; align-items: center; min-height: 44px; padding: .35rem .65rem;
  color: inherit; font-size: .88rem; font-weight: 800; text-decoration: none;
}
.header-inner nav a { position: relative; }
.header-inner nav a[aria-current="page"] { color: var(--blue); }
.header-inner nav a[aria-current="page"]::after {
  content: ""; position: absolute; height: 2px; background: currentColor; inset: auto .65rem .25rem;
}
.header-inner nav a:hover, .footer-grid nav a:hover, .header-cta:hover { text-decoration: underline; }
.header-cta { border: 1px solid var(--ink); border-radius: .45rem; gap: .55rem; white-space: nowrap; }

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: .65rem;
  min-height: 49px; padding: .62rem .95rem; border: 1px solid transparent; border-radius: .45rem;
  font-weight: 800; font-size: .91rem; line-height: 1.38; text-align: center; text-decoration: none;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.button .icon { transition: transform .25s var(--ease); }
.button:hover .icon, .inline-link:hover .icon { transform: translate(3px, -1px); }
.button.primary { background: var(--blue); color: #fff; }
.button.primary:hover:not(:disabled) { background: #182d9d; box-shadow: 0 5px 0 #14246528; }
.button.outline { color: var(--ink); border-color: var(--ink); background: transparent; }
.button.outline:hover:not(:disabled) { background: var(--blue-light); }
.button.ink { color: #fff; background: var(--ink); }
.button.ink:hover { background: var(--blue-deep); }
.button:disabled { background: #e5e3de; color: #595961; }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: .62rem; }
.inline-link {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px;
  font-size: .91rem; font-weight: 800; line-height: 1.4;
}
.inline-link .icon { transition: transform .25s var(--ease); }
.badge {
  display: inline-flex; align-items: center; width: fit-content; max-width: 100%;
  border-radius: .26rem; padding: .24rem .46rem; font: 800 .72rem/1.3 Manrope, system-ui, sans-serif;
  color: var(--ink); background: var(--blue-light);
}
.badge.mint { background: var(--mint); }
.badge.sand { background: var(--sand); }

.hero {
  padding-block: clamp(2.3rem, 6.3vw, 5.8rem) clamp(2.1rem, 5.5vw, 4.8rem);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .96fr);
  align-items: center; gap: clamp(1.35rem, 5vw, 5.3rem);
}
.hero h1 { margin-block: .75rem 1.05rem; line-height: .92; letter-spacing: -.075em; font-size: clamp(3.2rem, 6.2vw, 6rem); }
.hero-description { max-width: 43ch; font-size: clamp(1.04rem, 1.6vw, 1.23rem); }
.hero .actions { margin-top: 1.55rem; }
.hero-note { display: flex; align-items: center; gap: .42rem; margin-top: .78rem; color: var(--muted); font-size: .81rem; }
.hero-media {
  position: relative; width: 100%; min-width: 0; min-height: 29.5rem; aspect-ratio: 1.055;
  isolation: isolate; background: #c89862; border: 1px solid #aa8156;
  border-radius: 1.05rem; overflow: hidden;
}
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 57% 44%; }
.photo-index {
  position: absolute; top: 1rem; left: 1rem; color: #fff; background: var(--ink);
  font: 700 .7rem/1 var(--mono); letter-spacing: .07em; padding: .58rem .63rem; border-radius: .3rem;
}
.hero-stroke {
  position: absolute; top: 11%; left: 2%; width: 36%; max-height: 52%; color: #fff8e9;
  stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round;
}
.hero-ticket {
  position: absolute; inset: auto 1.25rem 1.25rem; padding: .85rem 1rem;
  background: var(--white); border-radius: .65rem; color: var(--ink);
  box-shadow: 0 12px 34px #161b2b2e;
}
.ticket-head {
  display: flex; align-items: center; gap: .58rem; margin-bottom: .45rem; line-height: 1.2;
}
.ticket-icon, .square-icon, .band-icon {
  flex: none; display: inline-grid; place-items: center; width: 2.55rem; height: 2.55rem;
  background: var(--blue); color: #fff; border-radius: .4rem;
}
.ticket-head div { display: grid; gap: .17rem; }
.ticket-head div span { font-size: .75rem; color: var(--muted); }
.ticket-count { margin-left: auto; color: var(--blue); font: 700 1.12rem/1 var(--mono); }
.ticket-row {
  border-top: 1px solid var(--line); min-height: 2.05rem; display: flex; align-items: center;
  justify-content: space-between; gap: .45rem; font-size: .79rem; font-weight: 750;
}
.ticket-row > span:first-child { display: inline-flex; align-items: center; gap: .35rem; }
.ticket-row .icon { color: var(--blue); }

.signal-bar { color: #fff; background: var(--blue); }
.signal-list {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-block: 0; padding: 0; list-style: none;
}
.signal-list li {
  display: flex; align-items: center; gap: .56rem; min-height: 67px;
  padding: .65rem clamp(.55rem, 1.6vw, 1.35rem); border-inline-start: 1px solid #ffffff55;
  font-weight: 800; font-size: .89rem;
}
.signal-list li:last-child { border-inline-end: 1px solid #ffffff55; }
.signal-list li span {
  flex: none; color: var(--ink); background: var(--orange); padding: .34rem .39rem;
  font: 700 .71rem/1 var(--mono); border-radius: .25rem;
}

.free-tools { padding-top: clamp(3.4rem, 6.8vw, 6.7rem); }
.free-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.75rem, 2vw, 1.25rem); }
.free-card {
  display: flex; flex-direction: column; align-items: flex-start; min-width: 0;
  min-height: 19rem; padding: clamp(1.15rem, 2.35vw, 1.8rem);
  border: 1px solid var(--line); border-radius: .8rem;
}
.free-card-primary { color: #fff; background: var(--blue); border-color: var(--blue); }
.free-card-sand { background: #f7ddae; border-color: #ccaf7e; }
.free-card-paper { background: var(--white); }
.free-card-top { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.free-card-top .mono { font-size: .69rem; }
.free-pill {
  padding: .28rem .5rem; border: 1px solid currentColor; border-radius: 10rem;
  font: 800 .69rem/1.2 var(--mono); white-space: nowrap;
}
.free-card h3 { margin-top: clamp(1.8rem, 4vw, 3.2rem); font-size: clamp(1.55rem, 2.8vw, 2.4rem); }
.free-card p { margin-block: .7rem 1.1rem; max-width: 37ch; font-size: .9rem; }
.free-link {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; margin-top: auto;
  color: inherit; font-weight: 800; font-size: .88rem; text-decoration-thickness: 1.5px;
}
.free-link .icon { transition: transform .22s var(--ease); }
.free-link:hover .icon { transform: translate(3px, -3px); }

.section-head {
  display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap;
  gap: .9rem 2rem; margin-bottom: clamp(1.25rem, 3vw, 2.3rem);
}
.section-head > div:first-child { flex: 1 1 32rem; max-width: 53rem; }
.section-head h2, .section-head h1 { margin-top: .53rem; }
.section-head > p { flex: 0 1 29ch; color: var(--muted); }
.workflow-board {
  background: var(--blue-deep); color: #fff; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr);
  min-width: 0; border-radius: .78rem; padding: clamp(1rem, 3vw, 2.4rem); gap: clamp(.7rem, 3vw, 2rem);
}
.workflow-board :focus-visible, .blue-band :focus-visible, .site-footer :focus-visible { outline-color: var(--orange); }
.workflow-nav { display: grid; align-content: center; gap: .45rem; }
.workflow-control {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .55rem; min-height: 55px;
  padding: .68rem .8rem; color: #fff; background: transparent; border: 1px solid #bbc7ed8c; border-radius: .42rem;
  text-align: start; transition: border-color .23s var(--ease);
}
.workflow-control[aria-pressed="true"] { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.workflow-control:hover:not([aria-pressed="true"]) { background: #33447c; }
.workflow-control span { font: 700 .75rem/1 var(--mono); }
.workflow-content { min-width: 0; }
.workflow-panel { padding: clamp(.9rem, 2.3vw, 1.5rem); border-radius: .53rem; color: var(--ink); background: var(--paper); }
.workflow-panel + .workflow-panel { margin-top: .65rem; }
.workflow-panel[hidden] + .workflow-panel { margin-top: 0; }
.workflow-kicker { color: var(--blue); }
.workflow-panel h3 { margin-block: .4rem .55rem; }
.workflow-panel > p:not(.mono) { color: var(--muted); }
.workflow-example {
  display: flex; align-items: center; gap: .63rem; flex-wrap: wrap; padding-top: .8rem;
  margin-top: 1rem; border-top: 1px solid var(--line); font-size: .84rem;
}
.workflow-example > .icon { color: var(--blue); font-size: 1.18rem; }
.workflow-example > span:nth-child(2) { display: grid; flex: 1 1 9rem; }
.workflow-example small { color: var(--muted); font-size: .78rem; }
.workflow > .inline-link { margin-top: .8rem; }

.people-section { background: #eee9da; }
.audience-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.9rem, 3vw, 1.6rem); }
.audience-card { min-width: 0; border-radius: .78rem; overflow: hidden; }
.candidate-card {
  background: var(--orange); color: var(--ink); padding: clamp(1.15rem, 3.7vw, 2.8rem);
  display: flex; flex-direction: column; justify-content: center; gap: .85rem;
}
.audience-top { display: flex; align-items: center; justify-content: space-between; }
.audience-spark { width: 2.7rem; height: 2.7rem; }
.candidate-card h3 { max-width: 19ch; }
.candidate-card p:not(.mono) { max-width: 40ch; }
.candidate-card .inline-link { color: var(--ink); }
.candidate-card :focus-visible { outline-color: var(--blue-deep); }
.company-card { background: var(--white); border: 1px solid var(--line); }
.company-card > img { width: 100%; max-height: 13rem; object-fit: cover; object-position: 50% 44%; }
.audience-copy { padding: clamp(1.1rem, 2.6vw, 2rem); display: grid; gap: .57rem; }
.audience-copy .mono { color: var(--blue); }
.voices-section { background: var(--blue-deep); color: #fff; }
.voices-section :focus-visible { outline-color: var(--orange); }
.voices-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .8fr); align-items: center; gap: clamp(2rem, 7vw, 6rem); }
.voices-section .eyebrow { color: #fff; }
.voices-section .label-index { background: var(--orange); color: var(--ink); }
.voices-section h2 { max-width: 16ch; margin-block: .8rem 1.1rem; }
.voices-lede { max-width: 53ch; color: #e8ecff; }
.voices-section .button { margin-top: 1.35rem; color: #fff; border-color: #fff; }
.voices-section .button:hover { color: var(--ink); }
.voices-notes { padding: clamp(1.2rem, 3vw, 2.1rem); border: 1px solid #acb9e57d; border-radius: .85rem; background: #26396e; }
.voices-notes > .mono { color: #ffb99d; margin-bottom: .5rem; }
.voice-note { padding-block: 1.15rem; border-top: 1px solid #acb9e57d; }
.voice-note span { font: 700 .73rem/1.5 var(--mono); color: #ffb99d; }
.voice-note p { margin-top: .35rem; font: 600 clamp(1.2rem, 2vw, 1.65rem)/1.28 var(--display); letter-spacing: -.025em; }
.voices-notes small { display: block; padding-top: .4rem; color: #e8ecff; }
.project-callout {
  display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: 1rem 2rem;
}
.project-callout h2 { margin-block: .48rem .6rem; }
.project-callout p:not(.eyebrow) { max-width: 55ch; color: var(--muted); }
.status-dot { flex: none; width: .6rem; height: .6rem; border-radius: 50%; background: var(--orange-text); }
.site-footer { color: #fff; background: var(--ink); }
.footer-grid {
  padding-block: 1.55rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .55rem 1.35rem;
}
.footer-grid p { font-size: .85rem; color: #e2e5f1; }
.footer-grid .brand-plus { color: var(--orange); }
.footer-status { display: inline-flex; align-items: center; gap: .4rem; }
.footer-status .status-dot { background: var(--orange); }

.page-band { padding-block: clamp(2.2rem, 5.5vw, 4.6rem); }
.page-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .37fr); align-items: end; gap: 1.2rem 2.6rem; }
.page-intro h1, .company-hero h1, .resume-section h1 {
  font-size: clamp(2.55rem, 6.3vw, 6.1rem); margin-block: .54rem .8rem; line-height: .95;
}
.page-intro > div:first-child > p:last-child, .company-hero p:not(.eyebrow) { max-width: 54ch; font-size: 1.06rem; }
.blue-band { background: var(--blue-light); color: var(--ink); }
.blue-band .eyebrow { color: var(--blue); }
.blue-band .label-index { color: #fff; background: var(--blue); }
.cream-band { background: #f0e5cd; }
.band-note {
  padding: .94rem; border: 1px solid var(--line); border-radius: .65rem; display: grid; gap: .43rem;
  color: var(--ink); background: var(--white); line-height: 1.38; font-size: .86rem;
}
.band-note strong { font-family: var(--display); font-size: 1.14rem; letter-spacing: -.03em; }
.band-note .band-icon { background: var(--blue-light); color: var(--blue); }

.app-shell { display: grid; grid-template-columns: minmax(0, .3fr) minmax(0, 1fr); gap: clamp(1rem, 3vw, 2.4rem); }
.app-side {
  position: sticky; top: 1rem; align-self: start; display: grid; gap: .75rem;
  padding: .95rem; border: 1px solid var(--line); border-radius: .7rem; background: #f0ebdd;
}
.app-side > .mono { color: var(--blue); }
.app-side nav { display: grid; gap: .3rem; }
.app-side nav a {
  display: flex; align-items: center; gap: .4rem; min-height: 44px; padding: .37rem .3rem;
  text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--line); font-size: .87rem; font-weight: 800;
}
.app-side nav a:hover { text-decoration: underline; }
.app-side nav a > span { color: var(--blue); font-family: var(--mono); font-size: .74rem; }
.app-side nav .side-count { margin-left: auto; }
.side-note { display: flex; align-items: flex-start; gap: .4rem; color: var(--muted); font-size: .79rem; }
.side-note .icon { margin-top: .2rem; }
.app-main { display: grid; gap: 1rem; min-width: 0; }
.app-card {
  min-width: 0; padding: clamp(.95rem, 2.7vw, 1.85rem); background: var(--white);
  border: 1px solid var(--line); border-radius: .72rem;
}
.app-card-head { display: flex; gap: .68rem; align-items: center; margin-bottom: .6rem; }
.app-card-head .mono { color: var(--blue); margin-bottom: .25rem; }
.app-card h2 { font-size: clamp(1.63rem, 3.45vw, 2.75rem); }
.app-card > p { color: var(--muted); }
.app-card > :is(h2, h3) { margin-bottom: .75rem; }
.app-card > p + p, .app-card > .actions, .app-card > p + a { margin-top: 1rem; }
.section > p { max-width: 75ch; margin-top: 1rem; }
.section > h2 + .app-card { margin-top: 1.5rem; }
.app-card form { margin-top: 1rem; }
fieldset { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
legend { padding: 0; font-weight: 800; margin-bottom: .45rem; }
.choose-jobs, .field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.choose-jobs .check-row {
  padding: .57rem .65rem; background: #f7f5ee; border: 1px solid var(--line); border-radius: .43rem;
}
.choose-jobs .check-row:has(input:checked) { background: var(--blue-light); border-color: var(--blue); }
.choose-jobs strong { display: block; line-height: 1.25; font-size: .87rem; }
.choose-jobs small { color: var(--muted); font-size: .75rem; }
.check-row { display: flex; align-items: center; gap: .52rem; min-height: 44px; cursor: pointer; }
input[type="checkbox"] { flex: none; width: 1.16rem; height: 1.16rem; margin: 0; accent-color: var(--blue); }
.field-grid { margin-block: .95rem; }
label:has(> select), label:has(> input[type="search"]) { display: grid; gap: .24rem; align-content: start; font-size: .85rem; font-weight: 800; }
select, input[type="search"] {
  width: 100%; min-width: 0; min-height: 46px; padding: .56rem .65rem;
  color: var(--ink); background: #fff; border: 1px solid #797b86; border-radius: .35rem;
}
.form-hint { color: var(--muted); font-size: .81rem; margin-block: .3rem .72rem; }
.form-status { color: var(--blue); font-weight: 800; font-size: .88rem; }
.form-status:not(:empty) { margin-block: .5rem; }
.form-status[data-error="true"] { color: var(--orange-text); }
.empty, .notice { color: var(--muted); border: 1px dashed #87848a; padding: .65rem .75rem; border-radius: .42rem; }
.queue-list, .history-list { display: grid; gap: .55rem; margin-block: .9rem; }
.queue-item, .history-row { min-width: 0; border: 1px solid var(--line); border-radius: .5rem; }
.queue-item > summary {
  min-height: 50px; padding: .65rem .72rem; font-weight: 800; cursor: pointer;
}
.queue-item summary .badge { margin-inline-start: .33rem; }
.queue-item[open] > summary { border-bottom: 1px solid var(--line); }
.queue-body { padding: .68rem .78rem; }
.queue-body dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .27rem .62rem; margin: 0; font-size: .86rem; }
.queue-body dt, .role-preview dt { font-weight: 800; }
.queue-body dd { margin: 0; overflow-wrap: anywhere; }
.queue-message {
  margin-top: .5rem; border: 1px solid var(--line); border-radius: .42rem; padding: .66rem .72rem;
  color: var(--muted); font-size: .87rem; white-space: pre-line;
}
.queue-controls { display: flex; align-items: center; flex-wrap: wrap; gap: .2rem .9rem; margin-top: .3rem; }
.queue-controls .check-row { font-size: .87rem; font-weight: 800; }
.subtle-button {
  padding: .38rem .12rem; min-height: 44px; background: transparent; color: var(--blue); border: none;
  font-weight: 800; font-size: .86rem; text-decoration: underline; text-underline-offset: .22em;
}
.history-row { display: flex; justify-content: space-between; align-items: center; gap: .55rem; padding: .58rem .7rem; }
.history-row div { display: grid; min-width: 0; }
.history-row small { color: var(--muted); font-size: .77rem; }
dialog {
  max-width: min(32rem, calc(100% - 2rem)); padding: 0; border: 1px solid var(--line); border-radius: .8rem;
  background: var(--white); color: var(--ink); box-shadow: 0 25px 90px #0004;
}
dialog::backdrop { background: #151a2ec4; }
.dialog-body { padding: clamp(1rem, 4vw, 1.85rem); }
.dialog-body h2 { font-size: 2.2rem; margin-block: .35rem .65rem; }
.dialog-body .actions { margin-top: .95rem; }

.filters {
  display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)) auto; align-items: end;
  gap: .68rem; padding: .85rem; background: var(--white); border: 1px solid var(--line); border-radius: .62rem;
}
.filters .button { min-height: 46px; }
.vacancy-list { display: grid; gap: .65rem; padding: 0; margin: .75rem 0 0; list-style: none; }
.vacancy-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .8rem;
  border: 1px solid var(--line); border-radius: .62rem; padding: .9rem; background: var(--white);
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.vacancy-card:hover, .vacancy-card:focus-within { border-color: var(--blue); background: #fff; }
.vacancy-monogram {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: .46rem;
  color: var(--blue-deep); background: var(--blue-light); font: 700 .98rem/1 var(--mono);
}
.vacancy-card h3 { font-size: clamp(1.16rem, 2.8vw, 1.64rem); margin-block: .2rem .28rem; }
.vacancy-card p { font-size: .86rem; color: var(--muted); }
.vacancy-card .badge { margin-inline-end: .22rem; }
.vacancy-tags { margin-top: .34rem; }
.vacancy-card .button { justify-self: start; }

.company-hero {
  padding-block: clamp(2.25rem, 6vw, 5.4rem); display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: clamp(1rem, 4.5vw, 4rem);
}
.company-hero h1 { font-size: clamp(2.65rem, 6vw, 5.6rem); }
.company-hero .button { margin-top: 1.22rem; }
.company-photo { position: relative; overflow: hidden; border-radius: .78rem; background: #c7a391; }
.company-photo img { width: 100%; object-fit: cover; min-height: 15rem; }
.company-photo figcaption {
  position: absolute; inset: auto auto .8rem .8rem; max-width: calc(100% - 1.6rem);
  background: var(--ink); color: #fff; padding: .44rem .5rem; border-radius: .26rem;
  font: 700 .72rem/1.3 var(--mono); letter-spacing: .04em;
}
.benefit-list {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem;
  padding: 0; margin: 0; list-style: none;
}
.benefit-list li { padding: .8rem .55rem .6rem 0; border-top: 2px solid var(--blue); }
.benefit-list li span { color: var(--blue); font: 700 .85rem/1 var(--mono); }
.benefit-list h3 { margin-block: .46rem .42rem; font-size: clamp(1.28rem, 2.5vw, 1.78rem); }
.benefit-list p { color: var(--muted); }
.employer-tool, .about-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.75rem, 3vw, 2rem); align-items: start; }
.employer-tool .field-grid { margin-top: 0; }
.company-guidelines { margin-top: .95rem; }
.role-preview { background: var(--blue-deep); color: #fff; border-radius: .72rem; padding: clamp(1.1rem, 3vw, 2rem); }
.role-preview .mono { color: #dde4ff; display: flex; align-items: center; flex-wrap: wrap; gap: .55rem; }
.role-preview h3, .role-preview h2 { margin-block: .58rem .65rem; }
.role-preview p:not(.mono), .role-preview dd { color: #e4e7f3; }
.role-preview dl { margin: .7rem 0 0; }
.role-preview dt { border-top: 1px solid #abb7e66b; padding-top: .52rem; margin-top: .58rem; }
.role-preview dd { margin: .1rem 0 0; }
.role-preview :focus-visible { outline-color: var(--orange); }
.about-grid p:not(.mono, .eyebrow) { margin-bottom: .7rem; }
.about-grid > div h2 { margin-block: .6rem .7rem; }
.trail-card {
  background: var(--white); border: 1px solid var(--line); border-radius: .72rem;
  max-width: 56rem; padding: .9rem clamp(.82rem, 2.6vw, 1.6rem); margin-bottom: .5rem;
}
.exercise { padding-block: .48rem; }
.exercise + .exercise { border-top: 1px solid var(--line); }
.exercise summary { min-height: 44px; padding: .57rem .12rem; cursor: pointer; font-weight: 800; }
.exercise details p { padding: .2rem 0 .4rem; color: var(--muted); }
.exercise .check-row { font-size: .86rem; }
.resume-section { max-width: 56rem; }
.resume-section h1 { font-size: clamp(2.4rem, 5vw, 4.5rem); }
.resume-sheet {
  padding: clamp(1rem, 4vw, 2.8rem); color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: .5rem;
}
.resume-sheet .mono { color: var(--blue); }
.resume-sheet h2 { margin-top: .35rem; }
.resume-sheet h3 { font-size: 1.3rem; margin-block: 1rem .3rem; }
.resume-version { font-weight: 800; color: var(--muted); }

@media (prefers-reduced-motion: no-preference) {
  .page-intro .band-icon, .company-photo img { animation: .42s var(--ease) both fade-in; }
  .hero-copy { animation: .55s var(--ease) both enter; }
  .hero-media { animation: .63s var(--ease) both enter; }
  .hero-ticket { animation: .64s .13s var(--ease) both enter; }
  .hero-stroke path { stroke-dasharray: 1; animation: 1.05s .23s var(--ease) both draw; }
  .workflow-panel[data-active], .history-row[data-fresh] { animation: .32s var(--ease) both enter; }
  @keyframes fade-in { from { opacity: .52; } to { opacity: 1; } }
  @keyframes enter { from { transform: translateY(12px); } to { transform: none; } }
  @keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .button:hover .icon, .inline-link:hover .icon, .free-link:hover .icon { transform: none; }
}

@media (prefers-contrast: more) {
  a:not(.button, .brand, .header-cta) { text-decoration: underline; }
  .free-card, .voices-notes, .workflow-board, .audience-card { border-width: 2px; }
  :focus-visible { outline-width: 4px; }
}

@media (max-width: 60rem) {
  .header-inner { flex-wrap: wrap; }
  .header-inner > nav { order: 3; flex: 1 0 100%; }
  .header-inner nav a:first-child { margin-inline-start: -.65rem; }
  .hero-media { min-height: 23rem; }
  .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters .button { justify-self: start; }
}
@media (max-width: 49rem) {
  .hero, .company-hero, .page-intro, .app-shell { grid-template-columns: minmax(0, 1fr); }
  .hero h1 { font-size: clamp(3.55rem, 13vw, 6.8rem); }
  .hero-media { min-height: 0; aspect-ratio: 1.2; }
  .hero-photo { object-position: 58% 41%; }
  .hero-copy { max-width: 40rem; }
  .page-intro .band-note { max-width: 23rem; }
  .app-side { position: static; }
  .app-side nav { display: flex; flex-wrap: wrap; gap: .2rem .6rem; }
  .app-side nav a { padding-inline: .25rem; }
  .app-shell { padding-top: 1.35rem; }
  .signal-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .signal-list li { min-height: 55px; border-bottom: 1px solid #ffffff55; }
  .signal-list li:nth-child(even) { border-inline-end: 1px solid #ffffff55; }
  .workflow-board, .about-grid, .employer-tool { grid-template-columns: minmax(0, 1fr); }
  .free-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .free-card-primary { grid-column: 1 / -1; min-height: 0; }
  .voices-layout { grid-template-columns: minmax(0, 1fr); }
  .company-hero > div { max-width: 38rem; }
}
@media (max-width: 36rem) {
  .header-inner { gap: .18rem .5rem; }
  .header-inner nav { gap: 0; }
  .header-inner nav a { font-size: .79rem; padding-inline: .4rem; }
  .header-inner nav a:first-child { margin-inline-start: -.4rem; }
  .header-inner nav a[aria-current="page"]::after { inset-inline: .4rem; }
  .header-cta { font-size: .8rem; padding-inline: .45rem; }
  .brand { font-size: 1.32rem; }
  .brand img { width: 32px; height: 32px; }
  .hero-media { aspect-ratio: 1.05; min-height: 17.5rem; }
  .hero-ticket { inset: auto .62rem .62rem; padding: .57rem; }
  .ticket-row { min-height: 2rem; font-size: .7rem; }
  .ticket-row .badge { font-size: .65rem; }
  .ticket-head strong { font-size: .87rem; }
  .ticket-icon { width: 2.1rem; height: 2.1rem; }
  .photo-index { top: .62rem; left: .62rem; font-size: .65rem; }
  .signal-list li { font-size: .78rem; }
  .free-grid { grid-template-columns: minmax(0, 1fr); }
  .free-card-primary { grid-column: auto; }
  .free-card { min-height: 0; }
  .free-card h3 { margin-top: 1.3rem; }
  .audience-grid, .benefit-list, .choose-jobs, .field-grid { grid-template-columns: minmax(0, 1fr); }
  .vacancy-card { grid-template-columns: auto minmax(0, 1fr); gap: .65rem; }
  .vacancy-card .button { grid-column: 2; }
  .filters { grid-template-columns: minmax(0, 1fr); }
  .queue-body dl { display: block; }
  .queue-body dd { margin-bottom: .3rem; }
  .footer-grid nav a:first-child { margin-inline-start: -.65rem; }
}
@media (forced-colors: active) {
  .button, .brand img, .badge, .label-index { border: 1px solid ButtonText; }
  .free-card, .voices-notes, .voice-note, .signal-list li { border-color: CanvasText; }
  :focus-visible { outline-color: Highlight; }
}
@media print {
  .site-header, .site-footer, .skip, .no-print { display: none !important; }
  body { background: #fff; }
  .resume-section { padding: 0; width: 100%; }
  .resume-sheet { border: 0; padding: 0; color: #000; }
}