/* =============================================================
   VEEDAY CONSULTANTS — requirement.css
   requirement.html only. Loaded after veeday.css, pages.css and forms.css.
   Idea: "the muster". A crew falls into ranks on a blueprint floor in the hero,
   and a board beside the form stands up as many figures as the employer asks for.
   ============================================================= */

/* ── Hero ── */
.rq-hero { padding-top: calc(var(--nav-h) + clamp(40px, 6.5vw, 104px)); padding-bottom: 0; }
.rq-hero::before { transition: opacity 1.2s ease; }
.rq-hero:has(.rq-stage.is-live)::before { opacity: 0; }
.rq-hero__copy { position: relative; max-width: 640px; }
.rq-hero .phero__title { font-size: clamp(42px, 5.9vw, 92px); max-width: 9.5em; }
.rq-hero .phero__title span { display: block; }
.rq-hero .phero__lede { max-width: 44ch; color: rgba(250, 250, 248, .82); }
.rq-hero__sub { margin-top: 14px; max-width: 50ch; font-size: 14.5px; line-height: 1.7; color: var(--mute); }
.rq-hero__or { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: var(--mute); }
.rq-hero__or a { margin-left: .4em; padding: 12px 0; color: var(--paper); background-position: 0 calc(100% - 10px); }
.rq-hero__or a:hover { background-position: 100% calc(100% - 10px); }
.rq-hero .phero__ctas { align-items: center; gap: 12px 22px; }

/* the stage the crew stands on */
.rq-stage {
  position: absolute; z-index: -1; inset: 0 0 0 39%;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26%), linear-gradient(180deg, #000 72%, transparent 97%);
          mask-image: linear-gradient(90deg, transparent 0, #000 26%), linear-gradient(180deg, #000 72%, transparent 97%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.rq-stage canvas { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; }
.rq-stage.is-live canvas { opacity: 1; }
/* drawn plan of the same crew: what shows before the 3D arrives, and instead of it when it cannot run */
.rq-plan { position: absolute; inset: 0; width: 100%; height: 100%; color: rgba(250, 250, 248, .2); transition: opacity .9s ease; }
.rq-plan .rq-plan__lead { fill: var(--red); }
.rq-plan .rq-plan__mark { fill: none; stroke: rgba(250, 250, 248, .34); stroke-width: 1; }
.rq-plan .rq-plan__ring { fill: none; stroke: #E23A30; stroke-width: 1; }
.is-live > .rq-plan { opacity: 0; }
/* still frame of the crew: only when the 3D is not coming (no JS, lite, no WebGL, failed, lost, timed out).
   The image is set only under these selectors, so a visitor with working 3D never downloads it.
   The camera fits the crew to the stage width, or to its height once the stage is wider than the crew
   (about 1.83:1 on desktop, 2.55:1 on phones), and keeps it centred: the still is sized the same way. */
html:not(.js) .rq-stage, .rq-stage.no-3d { container-type: size; }
html:not(.js) .rq-stage::after, .rq-stage.no-3d::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: url("assets/stills/requirement-hero-desktop.webp") 50% 50% / 100% auto no-repeat;
  background-size: min(100cqw, 183cqh) auto;
  transition: opacity 1.4s ease;
}
.rq-stage.no-3d::after { animation: rqStillIn 1s ease backwards; }
.rq-stage.is-live::after { opacity: 0; }
html:not(.js) .rq-stage:not(.is-live) > .rq-plan, .rq-stage.no-3d:not(.is-live) > .rq-plan { opacity: 0; }
html:not(.js) .rq-hero::before, .rq-hero:has(.rq-stage.no-3d)::before { opacity: 0; }
@keyframes rqStillIn { from { opacity: 0; } }
@media (max-width: 700px) {
  html:not(.js) .rq-stage::after, .rq-stage.no-3d::after {
    background-image: url("assets/stills/requirement-hero-phone.webp");
    background-size: 100% auto;
    background-size: min(100cqw, 255cqh) auto;
  }
}

/* trust strip sits on the hero's bottom edge */
.rq-hero .ptrust { position: relative; margin-top: clamp(44px, 6.5vw, 96px); border-bottom: 0; text-align: left; }
.rq-hero .ptrust > * { padding-top: 22px; padding-bottom: 26px; }
.rq-hero .ptrust dd { color: var(--fg); }
.rq-hero .ptrust small { display: block; margin-top: 4px; font-family: var(--sans); font-size: 13.5px; line-height: 1.5; color: var(--mute); }

@media (max-width: 1240px) and (min-width: 901px) {
  .rq-stage { inset: 0 -6% 0 44%; }
  .rq-hero__copy { max-width: 500px; }
  .rq-hero__sub { max-width: 40ch; }
}
@media (max-width: 900px) and (orientation: portrait), (max-width: 900px) and (min-height: 521px) {
  .rq-hero { padding-top: calc(var(--nav-h) + 30px); }
  .rq-stage {
    position: relative; inset: auto; z-index: 0;
    height: clamp(210px, 60vw, 380px);
    margin: 18px calc(var(--pad) * -1) -8px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 82%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 82%, transparent 100%);
    -webkit-mask-composite: source-over; mask-composite: add;
  }
  .rq-hero .ptrust { margin-top: 0; }
}
/* phone on its side: no room to stack the crew under the copy, so it stands beside it as on desktop */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 520px) {
  .rq-hero { padding-top: calc(var(--nav-h) + 18px); }
  .rq-stage { inset: 0 -4% 0 50%; }
  .rq-hero__copy { max-width: 54%; }
  .rq-hero .phero__title { font-size: clamp(34px, 5.4vw, 44px); }
  .rq-hero .phero__lede { margin-top: 14px; font-size: 15.5px; }
  /* the action comes up into the first screen; the supporting line follows it */
  .rq-hero__copy { display: flex; flex-direction: column; }
  .rq-hero__sub { order: 1; margin-top: 14px; font-size: 14px; line-height: 1.6; }
  .rq-hero .phero__ctas { margin-top: 18px; }
  .rq-hero .phero__ctas .btn { width: auto; }
  .rq-hero__or { width: auto; justify-content: flex-start; }
  .rq-hero .ptrust { margin-top: 28px; }
}
@media (max-width: 700px) {
  .rq-hero .ptrust > * { padding: 14px 0 15px; }
  .rq-hero .ptrust dt { margin-bottom: 4px; }
  .rq-hero .ptrust small { display: inline; margin: 0 0 0 .5em; font-size: 13px; }
  .rq-hero .phero__ctas .btn { width: 100%; }
  .rq-hero__or { width: 100%; justify-content: center; }
  .rq-hero__sub { font-size: 15px; line-height: 1.65; }
  /* the crew stands in the lower part of its stage: pull it up under the call link so the hero reads as one block */
  .rq-stage { margin-top: 0; }
  .rq-shell .form-note { font-size: 14px; }
}

/* ── Form area: rail + card ── */
.rq-shell { padding-top: clamp(40px, 6vw, 96px); }
.rq-shell .sec-head { margin-bottom: clamp(24px, 3.4vw, 44px); }
.rq-rail { display: none; }
.rq-shell .form-card { position: relative; }
.rq-shell .form-card::before { content: ''; position: absolute; left: -1px; top: -1px; width: 72px; height: 2px; background: var(--red); border-radius: 8px 0 0 0; }
.rq-shell .form-section__head { align-items: center; }
.rq-shell .form-section__head::after { content: ''; flex: 1; height: 1px; min-width: 24px; background: var(--line); }
.rq-shell .form-section__title { scroll-margin-top: calc(var(--nav-h) + 28px); }
.rq-shell .form-section:last-of-type { border-bottom: 0; padding-bottom: 0; }
.rq-shell .form-shell__foot { margin-top: 28px; }

@media (min-width: 1100px) {
  .rq-layout { display: grid; grid-template-columns: minmax(300px, 348px) minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: start; }
  .rq-shell .form-card { max-width: none; margin: 0; }
  .rq-shell .form-shell__foot { max-width: none; grid-column: 2; margin-top: -8px; }
  .rq-rail { display: block; grid-row: 1 / span 2; position: sticky; top: calc(var(--nav-h) + 20px); }
}

/* the board: dark, like a site office wall */
.rq-board {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 8px; border: 1px solid rgba(18, 16, 15, .6);
  background:
    radial-gradient(90% 70% at 90% 0%, #55120d 0%, rgba(74, 15, 11, .45) 40%, rgba(18, 16, 15, 0) 76%),
    linear-gradient(165deg, #171413 0%, #120f0f 60%, #1c0c0b 100%);
  box-shadow: 0 34px 60px -40px rgba(18, 16, 15, .7);
}
.rq-board__stage { position: relative; height: clamp(150px, 24vh, 214px); }
.rq-board__stage canvas { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; }
.rq-board__stage.is-live canvas { opacity: 1; }
.rq-board__stage .rq-plan { color: rgba(250, 250, 248, .16); }
.rq-board__body { padding: 4px 22px 20px; }
.rq-board__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.rq-board__label { font-size: 10.5px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; color: #F0554E; }
.rq-board__tag { font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.rq-board__count { display: flex; align-items: baseline; gap: 10px; margin-top: 6px; min-height: 52px; font-family: var(--serif); font-size: 44px; line-height: 1.1; letter-spacing: -.02em; color: var(--paper); font-variant-numeric: lining-nums tabular-nums; }
.rq-board__count small { font-family: var(--sans); font-size: 13px; letter-spacing: 0; color: var(--mute); }
.rq-board__count.is-empty { font-size: 19px; letter-spacing: -.005em; align-items: center; color: rgba(250, 250, 248, .78); }
.rq-brief { margin-top: 12px; border-top: 1px solid var(--line); }
.rq-brief > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.rq-brief > div:last-child { border-bottom: 0; padding-bottom: 0; }
.rq-brief dt { flex: none; font-size: 10.5px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: var(--faint); }
.rq-brief dd { min-width: 0; font-size: 14px; line-height: 1.4; color: var(--paper); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .3s; }
.rq-brief dd.is-empty { color: rgba(250, 250, 248, .34); }

/* section progress */
.rq-steps { position: relative; margin-top: 22px; }
.rq-steps a { position: relative; display: flex; align-items: center; gap: 14px; min-height: 44px; padding-left: 2px; font-size: 14.5px; color: var(--mute); transition: color .3s; }
.rq-steps a::before { content: ''; flex: none; width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgba(17, 17, 17, .38); background: var(--sand); transition: background .35s var(--ease), border-color .35s, box-shadow .35s; position: relative; z-index: 1; }
.rq-steps a + a::after { content: ''; position: absolute; left: 7px; bottom: calc(50% + 6px); width: 1px; height: calc(100% - 12px); background: var(--line); }
.rq-steps a:hover, .rq-steps a.is-current { color: var(--ink); }
.rq-steps a.is-current::before { border-color: var(--red); box-shadow: 0 0 0 4px rgba(200, 32, 26, .14); }
.rq-steps a.is-done::before { background: var(--red); border-color: var(--red); }
.rq-steps a span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--ease); padding-bottom: 2px; }
.rq-steps a:hover span { background-size: 100% 1px; }
.rq-meter { margin-top: 10px; height: 1px; background: var(--line); }
.rq-meter i { display: block; height: 1px; background: var(--red); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--ease); }
.rq-meta { margin-top: 10px; font-size: 12.5px; color: var(--mute); font-variant-numeric: tabular-nums; }
.rq-next { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.rq-next b { display: block; margin-bottom: 8px; font-size: 10.5px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; color: var(--red); }
.rq-next p { font-size: 13.5px; line-height: 1.65; }
@media (max-height: 980px) { .rq-next { display: none; } }
@media (max-height: 700px) { .rq-brief { display: none; } }

/* ── What you can ask us for ── */
.rq-scope { background: var(--paper); }
.rq-scope__grid { display: grid; gap: clamp(32px, 5vw, 88px); }
.rq-scope__lead .h1 { font-size: clamp(32px, 4.1vw, 60px); max-width: 12em; text-wrap: balance; }
.rq-hero .phero__lede, .rq-hero__sub, .rq-scope__lead .lede, .rq-scope__list dd { text-wrap: pretty; }
.rq-scope__lead .lede { margin-top: clamp(18px, 2.2vw, 28px); max-width: 46ch; }
.rq-scope__lead .btn { margin-top: clamp(22px, 2.6vw, 34px); }
.rq-scope__list { border-top: 1px solid var(--ink); }
.rq-scope__list > div { position: relative; display: grid; grid-template-columns: 1fr; gap: 6px; padding: 20px 0 22px; border-bottom: 1px solid var(--line); }
.rq-scope__list > div::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px; background: var(--red); transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s var(--ease); }
.rq-scope__list dt { font-size: 10.5px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; color: var(--red); padding-top: .5em; }
.rq-scope__list dd { font-family: var(--serif); font-size: clamp(18px, 1.55vw, 22px); line-height: 1.42; letter-spacing: -.005em; color: var(--ink); }
@media (hover: hover) { .rq-scope__list > div:hover::after { transform: scaleX(1); } }
@media (min-width: 700px) {
  .rq-scope__list > div { grid-template-columns: 132px minmax(0, 1fr); gap: 24px; }
}
@media (min-width: 1000px) {
  .rq-scope__grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); align-items: start; }
  .rq-scope__lead { position: sticky; top: calc(var(--nav-h) + 28px); }
}

@media (prefers-reduced-motion: reduce) {
  .rq-stage canvas, .rq-board__stage canvas, .rq-plan, .rq-meter i, .rq-scope__list > div::after { transition: none; }
  .rq-stage::after { animation: none; transition: none; }
}