/* EquiStaff — components & layout. Built on tokens.css. */

*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--text-link); }

.wrap { max-width: var(--c-standard); margin: 0 auto; padding: 0 var(--s-5); }
.eyebrow {
  font-size: var(--t-label); font-weight: 900; letter-spacing: .12em;
  text-transform: uppercase; color: var(--blue-700); margin: 0 0 var(--s-3);
}
.eyebrow--warm { color: var(--warm-ink); }
.eyebrow--on-dark { color: var(--baby-200); }
h1,h2,h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; margin: 0 0 var(--s-4); }
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
p  { margin: 0 0 var(--s-4); max-width: 68ch; }
.lede { font-size: 1.1875rem; color: var(--text-muted); }

/* ---------- Buttons: one primary per view ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px; padding: 0 var(--s-6);
  border-radius: var(--r-sm); border: 1.5px solid transparent;
  font: 700 1rem/1 var(--font-body); text-decoration: none; cursor: pointer;
  transition: transform .15s var(--ease), background .15s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--action-primary); color: var(--action-ink); }
.btn--primary:hover { background: var(--action-hover); }
.btn--secondary { background: transparent; color: var(--text-primary); border-color: var(--border-strong); }
.btn--secondary:hover { background: var(--surface-tint); }
.btn--onDark { background: var(--baby-200); color: var(--navy-900); }
.btn--onDark:hover { background: var(--baby-300); }
.btn--ghostDark { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.btn--lg { min-height: 56px; font-size: 1.0625rem; }

/* ---------- Header: compact, travels with you (Kaitlin liked this on Phaidon) ---------- */
.hdr {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92); backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border-subtle);
}
.hdr__in { display: flex; align-items: center; gap: var(--s-6); height: 72px; }
.hdr__logo { display: flex; align-items: baseline; font-family: var(--font-display); font-size: 1.5rem; text-decoration: none; }
.hdr__logo b { color: var(--blue-600); font-weight: 700; }
.hdr__logo span { color: var(--navy-900); font-weight: 400; font-style: italic; }
.hdr__nav { display: flex; gap: var(--s-6); margin-left: auto; }
.hdr__nav a { color: var(--text-primary); text-decoration: none; font-size: var(--t-small); font-weight: 600; }
.hdr__nav a:hover { color: var(--blue-700); }
.hdr__cta { display: flex; gap: var(--s-3); align-items: center; }

/* ---------- Hero: movement without video ---------- */
.hero { position: relative; overflow: hidden; background: var(--navy-900); }
.hero__media { position: absolute; inset: 0; }
.hero__media video, .hero__media img {
  width: 100%; height: 100%; object-fit: cover;
  animation: kenburns 22s var(--ease) infinite alternate;
}
/* Media is the bottom layer; scrim then content stack above it.
   Without this the video paints over the scrim and the headline. */
.hero__media { z-index: 0; }
.hero__scrim { z-index: 1; }
.hero__in    { z-index: 2; }
@keyframes kenburns { from { transform: scale(1.06) translate3d(0,0,0); } to { transform: scale(1.16) translate3d(-1.5%,-1.5%,0); } }
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(11,37,69,.93) 0%, rgba(11,37,69,.80) 42%, rgba(11,37,69,.35) 100%);
}
.hero__in { position: relative; padding: var(--s-9) 0 calc(var(--s-9) + 40px); }
.hero h1 { color: #fff; font-size: var(--t-display); max-width: 15ch; }
.hero .lede { color: var(--baby-200); max-width: 46ch; font-size: 1.1875rem; }
.hero__rule { width: 96px; height: 3px; background: var(--warm); margin: var(--s-5) 0; border: 0; }
.hero__meta { color: var(--baby-200); font-size: var(--t-small); margin-top: var(--s-5); }

/* ---------- Diagonal cuts ---------- */
.cut-top    { clip-path: polygon(0 3.2vw, 100% 0, 100% 100%, 0 100%); margin-top: -3.2vw; position: relative; }
.cut-bottom { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3.2vw), 0 100%); }
.cut-both   { clip-path: polygon(0 3.2vw, 100% 0, 100% calc(100% - 3.2vw), 0 100%); margin-top: -3.2vw; }

/* ---------- Two doors — employer gets visual priority ---------- */
.doors { background: var(--depth-01); padding: calc(var(--s-9) + 3vw) 0 var(--s-9); }
.doors__grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--s-6); align-items: stretch; }
.door {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  padding: var(--s-7); display: flex; flex-direction: column; min-height: 340px;
  box-shadow: var(--e-2);
}
.door--employer { background: var(--navy-900); color: #fff; }
.door--employer h3 { color: #fff; font-size: 2rem; }
.door--employer p { color: var(--baby-200); }
.door--seeker { background: #fff; border: 1px solid var(--border-subtle); }
/* Decorative image sits in the far corner, behind nothing that must be read */
.door__media { position: absolute; right: -6%; bottom: -10%; width: 42%; opacity: .16; pointer-events: none; }
.door__media img { border-radius: var(--r-lg); -webkit-mask-image: linear-gradient(to top left, #000 30%, transparent 85%); mask-image: linear-gradient(to top left, #000 30%, transparent 85%); }
.door--seeker .door__media { opacity: .10; }
.door > *:not(.door__media) { position: relative; z-index: 1; }
.door__actions { margin-top: auto; display: flex; gap: var(--s-3); flex-wrap: wrap; }
.door__note { font-size: var(--t-small); margin-top: var(--s-4); }
.door--employer .door__note { color: var(--baby-300); }
.door--seeker .door__note { color: var(--text-muted); }
.tagpill {
  align-self: flex-start;           /* without this the pill stretches the flex column */
  background: var(--warm); color: var(--warm-ink);
  font: 900 var(--t-label)/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase;
  padding: 7px 12px; border-radius: var(--r-pill); margin-bottom: var(--s-4);
}
.door--employer .tagpill { background: var(--baby-200); color: var(--navy-900); }

/* ---------- Trust bar ---------- */
/* ---------- Trust bar ----------
   Was 152px (288px on a phone) because space-between spaced three long
   sentences unevenly and each wrapped. Now an even three-column grid with
   one line per claim, and hairline separators doing the spacing. */
.trust { background: var(--warm); padding: var(--s-4) 0; }
.trust__in { display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; gap: 0; }
.trust__item {
  display: flex; gap: var(--s-3); align-items: center; justify-content: center;
  font-size: var(--t-small); line-height: 1.35; color: #3B2E1B;
  padding: var(--s-2) var(--s-5); position: relative; text-align: left;
}
.trust__item + .trust__item::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  height: 24px; width: 1px; background: #E0D3BE;
}
.trust__item svg { flex: 0 0 auto; }
.trust__item b { font-weight: 700; }
.trust__item span { display: block; }
.trust__item em { font-style: normal; color: #6B5B45; }

@media (max-width: 1040px) {
  .trust__in { grid-template-columns: 1fr; gap: var(--s-2); }
  .trust__item { justify-content: flex-start; padding: var(--s-2) 0; }
  .trust__item + .trust__item::before { display: none; }
}

/* ---------- Stats ---------- */
/* ---------- Proof strip ----------
   Was a 290px block of four huge numbers. Now a single slim banner:
   figure and label sit on one line, separated by hairline rules. */
.stats { background: var(--depth-02); padding: var(--s-5) 0; }
.stats__grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4) var(--s-6); }
.stats__grid > div { display: flex; align-items: baseline; gap: var(--s-3); position: relative; }
.stats__grid > div + div::before {
  content: ""; position: absolute; left: calc(var(--s-6) / -2 - 1px);
  top: 2px; bottom: 2px; width: 1px; background: var(--border-tint, #BDE3FF);
}
.stat__n { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; line-height: 1.1; color: var(--navy-900); white-space: nowrap; }
.stat__l { font-size: var(--t-small); color: var(--text-muted); margin: 0; }
@media (max-width: 900px) {
  .stats__grid { justify-content: flex-start; gap: var(--s-3) var(--s-5); }
  .stats__grid > div + div::before { display: none; }
  .stat__n { font-size: 1.25rem; }
}

/* ---------- Process ---------- */
.process { padding: var(--s-9) 0; }
.process__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--s-6); margin-top: var(--s-7); }
.step__ico {
  width: 56px; height: 56px; border-radius: var(--r-md); background: var(--depth-02);
  display: grid; place-items: center; margin-bottom: var(--s-4);
}
.step__n { font: 900 var(--t-label)/1 var(--font-body); letter-spacing: .12em; color: var(--blue-700); }
.step h3 { font-size: 1.25rem; margin: var(--s-2) 0 var(--s-2); }
.step p { font-size: var(--t-small); color: var(--text-muted); margin: 0; }

/* ---------- Role categories: every one gets its own image ---------- */
.roles { background: var(--depth-01); padding: var(--s-9) 0; }
.roles__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--s-5); margin-top: var(--s-7); }
.role {
  position: relative; overflow: hidden; border-radius: var(--r-md);
  aspect-ratio: 4/3; text-decoration: none; display: block; box-shadow: var(--e-1);
}
.role img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.role:hover img { transform: scale(1.06); }
.role__label {
  position: absolute; inset: auto 0 0 0; padding: var(--s-5);
  background: linear-gradient(transparent, rgba(11,37,69,.88));
  color: #fff; font-family: var(--font-display); font-size: 1.375rem; font-weight: 700;
}
.role__count { display: block; font-family: var(--font-body); font-size: var(--t-small); font-weight: 400; color: var(--baby-200); }

/* ---------- Job board: visually distinct, scannable, enough info ---------- */
.board { background: var(--depth-03); padding: calc(var(--s-9) + 3vw) 0 var(--s-9); }
.board__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; }
.board__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--s-5); margin-top: var(--s-7); }
.job {
  background: #fff; border-radius: var(--r-md); padding: var(--s-5);
  border: 1px solid rgba(11,37,69,.10); box-shadow: var(--e-1);
  display: flex; flex-direction: column; gap: var(--s-3);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.job:hover { transform: translateY(-3px); box-shadow: var(--e-3); }
.job__title { font-family: var(--font-display); font-size: 1.3125rem; font-weight: 700; margin: 0; }
.job__org { font-size: var(--t-small); color: var(--text-muted); margin: 0; }
.job__pay { font-family: var(--font-mono); font-size: .9375rem; color: var(--navy-900); margin: 0; }
.job__tags { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.tag { font: 700 var(--t-label)/1 var(--font-body); padding: 6px 10px; border-radius: var(--r-pill); }
.tag--managed { background: var(--navy-900); color: #fff; }
.tag--neutral { background: var(--depth-02); color: var(--navy-900); }
.tag--housing { background: var(--ok-bg); color: var(--ok-ink); }
.job__foot { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--border-subtle); padding-top: var(--s-3); margin-top: auto; }
.job__link { font-weight: 700; font-size: var(--t-small); text-decoration: none; }
.job__age { font-size: var(--t-label); color: var(--text-muted); font-family: var(--font-mono); }

/* ---------- Live scroll of latest opportunities (Ford Agency) ---------- */
/* extra bottom padding so the next section's diagonal cut eats dead space, not the text */
.ticker { background: var(--navy-900); padding: var(--s-5) 0 calc(var(--s-5) + 3.2vw); overflow: hidden; }
.ticker__track { display: flex; gap: var(--s-6); width: max-content; animation: slide 38s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker__item { color: #fff; font-size: var(--t-small); white-space: nowrap; display: flex; gap: var(--s-3); align-items: center; }
.ticker__item b { font-family: var(--font-display); font-weight: 700; }
.ticker__item span { color: var(--baby-300); font-family: var(--font-mono); font-size: var(--t-label); }
.ticker__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--warm); }

/* ---------- Founder ---------- */
.founder { padding: var(--s-9) 0; background: var(--surface-page); }
.founder__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: var(--s-8); align-items: center; }
.founder__img { border-radius: var(--r-lg); box-shadow: var(--e-2); aspect-ratio: 4/5; object-fit: cover; width: 100%; }
.founder blockquote { margin: 0 0 var(--s-5); font-family: var(--font-display); font-size: clamp(1.375rem,2.2vw,1.875rem); line-height: 1.35; }
.founder__sig { font-size: var(--t-small); color: var(--text-muted); }

/* ---------- Testimonials ---------- */
.quotes { background: var(--depth-06); color: #fff; padding: calc(var(--s-9) + 3vw) 0 var(--s-9); }
.quotes h2 { color: #fff; }
.quotes__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--s-5); margin-top: var(--s-7); }
.quote { background: rgba(255,255,255,.07); border: 1px solid var(--navy-500); border-radius: var(--r-md); padding: var(--s-6); }
.quote p { font-family: var(--font-display); font-size: 1.125rem; line-height: 1.5; color: #fff; }
.quote footer { font-size: var(--t-small); color: var(--baby-200); }
.quote__mark { font-family: var(--font-display); font-size: 3rem; line-height: .6; color: var(--warm); display: block; margin-bottom: var(--s-3); }

/* ---------- Request Talent form — under a minute ---------- */
.request { background: var(--depth-01); padding: var(--s-9) 0; }
.request__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: var(--s-8); align-items: start; }
.form { background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--r-lg); padding: var(--s-7); box-shadow: var(--e-2); }
.field { margin-bottom: var(--s-5); }
.field label { display: block; font-weight: 700; font-size: var(--t-small); margin-bottom: var(--s-2); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 12px 14px;
  border: 1px solid #C9D6E2; border-radius: var(--r-sm);
  font: inherit; font-size: 1rem; background: #fff; color: var(--navy-900);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 3px solid rgba(0,122,184,.28); border-color: var(--blue-600);
}
.field small { display: block; color: var(--text-muted); font-size: var(--t-label); margin-top: 6px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }

/* ---------- Footer ---------- */
.ftr { background: var(--depth-07); color: #fff; padding: var(--s-9) 0 var(--s-6); }
.ftr__grid { display: grid; grid-template-columns: 1.4fr repeat(3,1fr); gap: var(--s-7); }
.ftr h4 { font-size: var(--t-small); margin: 0 0 var(--s-4); letter-spacing: .04em; }
.ftr a { display: block; color: var(--baby-200); text-decoration: none; font-size: var(--t-small); margin-bottom: var(--s-3); }
.ftr a:hover { color: #fff; }
.ftr__brand { font-family: var(--font-display); font-size: 1.5rem; }
.ftr__brand b { color: var(--baby-200); } .ftr__brand span { font-style: italic; }
.ftr__meta { color: var(--baby-300); font-size: var(--t-small); margin-top: var(--s-4); }
.ftr__bar { border-top: 1px solid var(--navy-500); margin-top: var(--s-7); padding-top: var(--s-5); display: flex; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; font-size: var(--t-label); color: var(--baby-300); }

/* ---------- Section intro ---------- */
.sec-head { max-width: 62ch; }
.sec-head h2 { margin-bottom: var(--s-3); }
.sec-head p { color: var(--text-muted); }

/* ---------- Accessibility ---------- */
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--s-4); top: var(--s-4); z-index: 100; background: #fff; padding: var(--s-3) var(--s-4); border-radius: var(--r-sm); }
:focus-visible { outline: 3px solid var(--blue-600); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
  .hero__media img { animation: none; transform: scale(1.04); }
}

/* ---------- Responsive ---------- */
@media (max-width: 1040px) {
  .doors__grid, .founder__grid, .request__grid { grid-template-columns: 1fr; }
  .process__grid { grid-template-columns: repeat(2,1fr); }
  .roles__grid, .board__grid, .quotes__grid { grid-template-columns: repeat(2,1fr); }
  .ftr__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .hdr__nav { display: none; }
  .process__grid, .roles__grid, .board__grid, .quotes__grid, .ftr__grid, .form__row { grid-template-columns: 1fr; }
  .hero__in { padding: var(--s-8) 0 calc(var(--s-8) + 30px); }
  .door { min-height: 0; padding: var(--s-6); }
  .cut-top, .cut-both { clip-path: polygon(0 5vw, 100% 0, 100% 100%, 0 100%); margin-top: -5vw; }
}

/* ---------- Conversion: DIY listing vs paid recruiter-managed search ---------- */
.compare { background: var(--depth-01); padding: var(--s-9) 0; }
.compare__grid { display: grid; grid-template-columns: 1fr 1.1fr 1.25fr; gap: var(--s-5); margin-top: var(--s-7); align-items: start; }
@media (max-width: 1100px){ .compare__grid { grid-template-columns: 1fr; gap: var(--s-6); } }
.cmp { background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--r-lg); padding: var(--s-7); }
.cmp--hero { background: linear-gradient(160deg, var(--depth-07), var(--depth-06)); color: #fff; border-color: var(--baby-300); box-shadow: var(--e-3); position: relative; }
.cmp--hero h3 { color: #fff; }
.cmp h3 { font-size: 1.625rem; margin-bottom: var(--s-2); }
.cmp__for { font-size: var(--t-small); color: var(--text-muted); margin-bottom: var(--s-5); }
.cmp--hero .cmp__for { color: var(--baby-200); }
.cmp__flag { position: absolute; top: calc(var(--s-5) * -1); left: var(--s-7);
  background: var(--warm); color: var(--warm-ink); font: 900 var(--t-label)/1 var(--font-body);
  letter-spacing: .1em; text-transform: uppercase; padding: 9px 14px; border-radius: var(--r-pill); }
.cmp__list { list-style: none; margin: 0 0 var(--s-6); padding: 0; }
.cmp__list li { display: flex; gap: var(--s-3); align-items: flex-start; margin-bottom: var(--s-3); font-size: 1rem; }
.cmp--hero .cmp__list li { color: #fff; }
.cmp__y, .cmp__n { width: 20px; height: 20px; border-radius: 50%; flex: 0 0 auto; margin-top: 2px; position: relative; }
.cmp__y { background: var(--ok-bg); }
.cmp--hero .cmp__y { background: var(--baby-200); }
.cmp__y::after { content: ""; position: absolute; inset: 0; background: center/11px no-repeat
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B2545' stroke-width='3.5'><path d='M20 6L9 17l-5-5'/></svg>"); }
.cmp__n { background: var(--depth-02); }
.cmp__n::after { content: ""; position: absolute; inset: 0; background: center/10px no-repeat
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A6580' stroke-width='3.5'><path d='M6 6l12 12M18 6L6 18'/></svg>"); }
.cmp__fee { font-size: var(--t-small); color: var(--baby-200); margin: var(--s-4) 0 0; text-align: center; }
.compare__note { margin-top: var(--s-6); font-size: var(--t-small); color: var(--text-muted); }

/* ---------- SEO content block ---------- */
.seoBlock { background: var(--surface-page); padding: var(--s-9) 0; border-top: 1px solid var(--border-subtle); }
.seoBlock h2 { font-size: 1.75rem; }
.seoBlock > .wrap > p { max-width: 80ch; color: var(--text-muted); }
.seoBlock__cols { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--s-7); margin-top: var(--s-7); }
.seoBlock__cols h3 { font-size: 1.125rem; margin-bottom: var(--s-4); }
.seoBlock__cols ul { list-style: none; margin: 0; padding: 0; }
.seoBlock__cols li { margin-bottom: var(--s-3); }
.seoBlock__cols a { font-size: var(--t-small); text-decoration: none; }
.seoBlock__cols a:hover { text-decoration: underline; }
@media (max-width: 1040px){ .compare__grid { grid-template-columns: 1fr; } .seoBlock__cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px){ .seoBlock__cols { grid-template-columns: 1fr; } }

/* ---------- Logo (Brittany's hidden-magnifier mark) ---------- */
.hdr__logo img  { height: 34px; width: auto; display: block; }
.pHdr__logo img { height: 32px; width: auto; display: block; }
.thrLogo img    { height: 38px; width: auto; display: block; }
.ftr__logo      { height: 36px; width: auto; display: block; margin-bottom: var(--s-4); }

/* ---------- The horses — secondary mark, three blues ---------- */
.ftr { position: relative; overflow: hidden; }
/* Deliberately bleeds off the right edge — the head runs out of frame.
   Carrington asked for it stronger and for that crop to stay. */
.ftr__horses {
  position: absolute; right: -110px; bottom: -80px; width: 600px;
  opacity: .62; pointer-events: none; user-select: none;
}
.ftr > .wrap { position: relative; z-index: 1; }
@media (max-width: 900px) { .ftr__horses { width: 330px; opacity: .45; right: -70px; bottom: -30px; } }

/* ---------- Header at phone widths ----------
   Both header actions were wrapping onto two lines at 390. */
@media (max-width: 680px) {
  .hdr__in { gap: var(--s-3); height: 64px; }
  .hdr__logo img { height: 27px; }
  .hdr__cta { margin-left: auto; gap: var(--s-3); }
  .hdr__cta > a:not(.btn) { display: none; }      /* "Sign in" lives in the page, not the bar */
  .hdr__cta .btn { padding: 0 var(--s-4); font-size: .9375rem; white-space: nowrap; }
  .pHdr__in { gap: var(--s-3); height: 64px; }
  .pHdr__logo img { height: 25px; }
}

/* ---------- The running horse — small decorative accents ----------
   Single horse from the secondary mark, set in currentColor so it
   tints to whatever it sits on. Used sparingly: a flourish, not wallpaper. */
.horse { display: block; color: var(--blue-600); }
.horse--sm { width: 54px; }
.horse--md { width: 110px; }
.horse--lg { width: 190px; }
.horse--muted { color: var(--border-subtle); }
.horse--warm  { color: #E4D7C3; }
.horse--baby  { color: var(--baby-300); }

/* centred divider: hairline, horse, hairline */
.horseRule { display: flex; align-items: center; gap: var(--s-5); margin: var(--s-8) 0; }
.horseRule::before, .horseRule::after { content: ""; flex: 1; height: 1px; background: var(--border-subtle); }
.horseRule .horse { flex: 0 0 auto; width: 104px; color: var(--baby-300); }

/* trailing accent in a dark band */
.bandHorse { position: absolute; right: 4%; bottom: -10px; width: 230px; opacity: .14; color: #fff; pointer-events: none; }

/* Quotes band — horse bleeding off the left, head out of frame, same crop
   idea as the footer but mirrored so the two do not read as a repeat. */
.quotes { position: relative; overflow: hidden; }
.quotes > .wrap { position: relative; z-index: 1; }
.quotesHorse {
  position: absolute; left: -120px; top: 50%; transform: translateY(-50%) scaleX(-1);
  width: 520px; opacity: .13; color: var(--baby-200); pointer-events: none;
}
@media (max-width: 900px) { .quotesHorse { width: 340px; left: -110px; opacity: .1; } }

/* ---------- Hero: one question, two answers ----------
   Four competing actions above the fold was the feedback. The header now
   carries sign-in only; the hero asks which visitor you are. */
.hdr__signin { font-size: var(--t-small); font-weight: 700; text-decoration: none; color: var(--text-primary); }
.hdr__signin:hover { color: var(--blue-700); }
.hero__ask {
  color: #fff; font-family: var(--font-display); font-size: 1.375rem;
  margin: var(--s-7) 0 var(--s-4); opacity: .92;
}
.hero__choice { display: flex; gap: var(--s-4); flex-wrap: wrap; }
.hero__choice .btn { min-width: 210px; }
@media (max-width: 680px) {
  .hero__choice { flex-direction: column; align-items: stretch; }
  .hero__choice .btn { width: 100%; }
  .hero__ask { font-size: 1.1875rem; margin-top: var(--s-6); }
}

/* trust banner now sits directly under the hero and carries the diagonal */
.trust.cut-top { padding-top: calc(var(--s-4) + 3.2vw); }

/* Confidential employer pill. The 7 Oct business rule: on a recruiter-managed
   search the barn is not named until contact is made. Lives here, not in
   screens.css, because the landing pages and the board both need it. */
.job__conf { display:inline-flex; gap:5px; align-items:center;
  background:var(--warm); color:var(--warm-ink); border-radius:var(--r-pill);
  padding:3px 9px; margin-right:6px;
  font:900 11px/1.45 var(--font-body); letter-spacing:.06em; text-transform:uppercase; }
/* In a narrow card the pill takes its own line; in a wide list row it sits inline. */
.job__org .job__conf { display:flex; width:fit-content; margin:0 0 5px; }
@media (max-width:620px){ .row__org .job__conf { display:flex; width:fit-content; margin:0 0 5px; } }

/* Three tiers, ascending weight: plain, lifted, premium. The middle one is
   new and carries the anchor flag; the dark card stays with the full search. */
.cmp--mid { position: relative; border: 2px solid var(--blue-600); box-shadow: var(--e-2); }
.cmp__flag--mid { background: var(--blue-600); color: #fff; }
.cmp__price { font-family: var(--font-mono); font-size: 1.375rem; color: var(--navy-900);
  margin: 0 0 var(--s-4); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cmp__price span { font-family: var(--font-body); font-size: var(--t-small); color: var(--text-muted); font-weight: 400; }
.cmp__price--dark { color: #fff; font-size: 1.125rem; }
.cmp__price--dark span:not(.tbc) { color: var(--baby-200); }
/* Nothing here is signed off yet, and it must not read as if it is. */
.tbc { font-family: var(--font-body); font-size: 11px; font-weight: 900; letter-spacing: .07em;
  text-transform: uppercase; color: var(--warm-ink); background: var(--warm);
  border: 1px dashed #C9A227; border-radius: var(--r-pill); padding: 3px 9px; }
.compare__note--draft { background: var(--warm); border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5); color: #3B2E1B; margin-top: var(--s-6); }