/* =============================================================
   VEEDAY CONSULTANTS — resume.css
   resume.html only ("the journey out"). Loaded after veeday.css, pages.css, forms.css.
   ============================================================= */

/* ── Hero: text on the left, a slice of the earth at first light on the right ── */
.rhero { padding: 0; overflow: hidden; isolation: isolate; background: var(--ink); }
.rhero::before { content: none; }
.rhero__stage {
  position: relative;
  display: flex; align-items: center;
  min-height: clamp(560px, 82vh, 780px);
  padding: calc(var(--nav-h) + clamp(36px, 5vw, 72px)) 0 clamp(64px, 8vw, 120px);
  background:
    radial-gradient(46% 62% at 72% 34%, rgba(122, 26, 18, .5) 0%, rgba(74, 15, 11, .26) 42%, rgba(18, 16, 15, 0) 76%),
    radial-gradient(40% 60% at 0% 100%, rgba(59, 15, 11, .55) 0%, rgba(18, 16, 15, 0) 66%),
    linear-gradient(180deg, #171312 0%, #12100F 70%);
}
.rhero__scene { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; touch-action: pan-y; }
.rhero__scene canvas {
  position: absolute; inset: 0; width: 100% !important; height: 100% !important;
  opacity: 0; transition: opacity 1.4s var(--ease); touch-action: pan-y; pointer-events: none;
}
.rhero__scene.is-live canvas { opacity: 1; }
/* drawn stand-in: shows first, and stays when WebGL is unavailable or Data Saver is on */
.rhero__still { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 1s var(--ease); }
.rhero__scene.is-live .rhero__still { opacity: 0; }

/* Still frame of the scene, only when it will not appear: scripts off, Data Saver / low memory, no WebGL,
   load failure, lost context, or not up within ~8 s (.no-3d, set by the loader at the end of resume.html).
   The frame's horizon peak is pinned to the point layout() in js/resume-3d.js puts it: (69%, 40%) on desktop,
   (52%, H - max(162px, 60%)) below 900px. Its size follows the scene's globe radius
   (desktop R = min(.56W, (.6H - 60) / (1 - cos 56deg)); narrow R = min(1.1W, (max(162, .6H) - 34) / (1 - cos 56deg))),
   grown only as far as needed so the globe, which runs off the frame's edges, never shows a cut edge. */
.rhero__scene.no-3d, html:not(.js) .rhero__scene { container-type: size; }
.rhero__scene.no-3d .rhero__still, html:not(.js) .rhero__scene .rhero__still { display: none; }
.rhero__scene.no-3d::before, html:not(.js) .rhero__scene:not(.is-live)::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  left: 69%; top: 40%;
  width: max(100cqw, 184.12cqh); /* captured at 1440x782, where this is exact */
  aspect-ratio: 1600 / 869;
  transform: translate(-69%, -40%);
  background: url(assets/stills/resume-hero-desktop.webp) center / 100% 100% no-repeat;
  transition: opacity 1s var(--ease);
}
.rhero__scene.no-3d.is-live::before { opacity: 0; } /* the scene arrived late: cross-fade to it */
@media (max-width: 899px) {
  .rhero__scene.no-3d::before, html:not(.js) .rhero__scene:not(.is-live)::before {
    left: 52%; top: calc(100cqh - max(162px, 60cqh));
    width: max(min(196.43cqw, calc((max(162px, 60cqh) - 34px) * 4.051)), 154.84cqw, calc(max(162px, 60cqh) * 3.0687));
  }
}
@media (max-width: 700px) {
  .rhero__scene.no-3d::before, html:not(.js) .rhero__scene:not(.is-live)::before {
    width: max(min(129.53cqw, calc((max(162px, 60cqh) - 34px) * 2.6712)), 100cqw, calc(max(162px, 60cqh) * 2.1667));
    aspect-ratio: 585 / 450; /* captured at 390x300, where this is exact */
    transform: translate(-52%, -40%);
    background-image: url(assets/stills/resume-hero-phone.webp);
  }
}

/* place names that follow the scene */
.rhero__tag {
  position: absolute; left: 0; top: 0; z-index: 2; will-change: transform;
  opacity: 0; transition: opacity .7s var(--ease);
  font-size: 10.5px; font-weight: 500; letter-spacing: .17em; text-transform: uppercase; white-space: nowrap; line-height: 1;
  color: rgba(250, 250, 248, .82);
}
.rhero__tag > span { display: flex; align-items: center; gap: 9px; }
.rhero__tag > span::before { content: ''; width: 16px; height: 1px; background: currentColor; opacity: .55; }
.rhero__tag--origin > span { transform: translate(17px, -5px); }
.rhero__tag--dest > span { transform: translate(14px, -22px); color: #F7B9A6; }
.rhero__scene.is-live .rhero__tag--origin, .rhero__scene.is-live .rhero__tag--dest.is-on { opacity: 1; }

.rhero__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, #12100F 0%, rgba(18, 16, 15, .9) 26%, rgba(18, 16, 15, .5) 44%, rgba(18, 16, 15, 0) 62%),
    linear-gradient(0deg, #12100F 0%, rgba(18, 16, 15, 0) 11%);
}
.rhero__content { position: relative; z-index: 2; }
/* entrance in CSS only, so the headline and the button never wait for a script */
@keyframes rheroIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.rhero__content > * { animation: rheroIn 1s var(--ease) both; }
.rhero__content > :nth-child(2) { animation-delay: .08s; }
.rhero__content > :nth-child(3) { animation-delay: .2s; }
.rhero__content > :nth-child(4) { animation-delay: .32s; }
.rhero .phero__eyebrow { margin-bottom: clamp(18px, 2.4vw, 30px); }
.rhero .phero__title { font-size: clamp(40px, 5.7vw, 88px); line-height: 1.02; max-width: 9.6em; }
.rhero .phero__lede { max-width: 47ch; color: rgba(250, 250, 248, .74); text-wrap: pretty; }
.rhero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: clamp(26px, 3.2vw, 42px); }
.rhero__ctas .btn { min-height: 54px; }
.rhero__ctas .arrow { transform: rotate(90deg); transition: transform .5s var(--ease); }
.rhero__ctas .btn:hover .arrow { transform: rotate(90deg) translateX(3px); }
.rhero__aside { font-family: var(--serif); font-style: italic; font-size: clamp(16px, 1.3vw, 19px); color: rgba(250, 250, 248, .86); }

/* fact strip: sits on the dark ground under the horizon */
.rfacts { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.rfacts > div { padding: 22px 24px 30px 0; }
.rfacts > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.rfacts dt { font-size: 10.5px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; color: #F0554E; margin-bottom: 9px; }
.rfacts dd { font-family: var(--serif); font-size: clamp(17px, 1.5vw, 22px); line-height: 1.3; color: var(--fg); }
.rfacts small { display: block; margin-top: 6px; font-family: var(--sans); font-size: 13px; line-height: 1.5; color: var(--mute); }

/* ── Form area: sticky rail + card ── */
.rform { padding-top: clamp(28px, 5vw, 80px); }
.rform__grid { display: block; }
.rform .form-card { position: relative; }
.rform .form-card::before { content: ''; position: absolute; left: -1px; top: -1px; width: 72px; height: 2px; background: var(--red); border-radius: 8px 0 0 0; }
.rform .form-section__head { display: block; margin-bottom: clamp(16px, 2.4vw, 22px); }
.rform .form-section__kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; font-size: 10.5px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; color: var(--red); }
.rform .form-section__kicker::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.rform .form-section__title { font-size: clamp(24px, 2.8vw, 34px); }
.rform .form-section__hint { margin: 0 0 clamp(20px, 2.6vw, 28px); max-width: 60ch; font-size: 14.5px; line-height: 1.65; color: var(--mute); }
.rform .form-section[id] { scroll-margin-top: calc(var(--nav-h) + 20px); }
.rform .form-consent { scroll-margin-top: calc(var(--nav-h) + 20px); }
@media (hover: hover) {
  .rform .choice { transition: border-color .2s, background .2s, box-shadow .2s, transform .35s var(--ease); }
  .rform .choice:hover { transform: translateY(-1px); }
}

.rail { display: none; }
@media (min-width: 1100px) {
  .rform__grid { display: grid; grid-template-columns: minmax(230px, 280px) minmax(0, 860px); justify-content: center; gap: clamp(32px, 4.6vw, 76px); align-items: start; }
  .rform .form-card { margin: 0; max-width: none; }
  .rform .form-shell__foot { max-width: none; }
  .rail { display: block; position: sticky; top: calc(var(--nav-h) + 28px); padding-top: 6px; }
}
/* shorter laptop screens: the sticky rail must never be taller than the window (the fact strip above already carries these facts) */
@media (min-width: 1100px) and (max-height: 859px) { .rail__facts { display: none; } .rail__help { margin-top: 22px; } }
@media (min-width: 1100px) and (max-height: 619px) { .rail { position: static; } }
.rail__label { display: flex; align-items: center; gap: 12px; font-size: 10.5px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; color: var(--red); }
.rail__label::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.rail__title { margin: 16px 0 6px; font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.16; letter-spacing: -.015em; color: var(--ink); }
.rail__title em { font-style: italic; color: var(--red); }
.rail__meter { margin: 18px 0 6px; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.rail__meter span { display: block; height: 100%; background: var(--red); transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s var(--ease); }
.rail__count { font-size: 12.5px; color: var(--mute); font-variant-numeric: tabular-nums; }
.rail__steps { margin: 22px 0 0; border-top: 1px solid var(--line); }
.rail__steps a {
  position: relative; display: flex; align-items: center; gap: 12px;
  min-height: 48px; padding: 10px 0; border-bottom: 1px solid var(--line);
  font-size: 14.5px; line-height: 1.35; color: var(--mute);
  transition: color .3s, padding-left .5s var(--ease);
}
.rail__steps a::before {
  content: ''; flex: none; width: 9px; height: 9px; border-radius: 50%;
  border: 1px solid rgba(17, 17, 17, .34); background: transparent;
  transition: background .3s, border-color .3s, transform .5s var(--ease);
}
.rail__steps a:hover { color: var(--ink); padding-left: 4px; }
.rail__steps a.is-active { color: var(--ink); font-weight: 500; }
.rail__steps a.is-active::before { border-color: var(--red); transform: scale(1.25); }
.rail__steps a.is-done::before { background: var(--red); border-color: var(--red); }
.rail__steps a i { margin-left: auto; font-style: normal; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--red); opacity: 0; transition: opacity .3s; }
.rail__steps a.is-done i { opacity: 1; }
.rail__facts { margin-top: 26px; }
.rail__facts > div { padding: 14px 0; border-bottom: 1px solid var(--line); }
.rail__facts > div:first-child { border-top: 1px solid var(--line); }
.rail__facts dt { font-size: 10.5px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; color: var(--mute); margin-bottom: 5px; }
.rail__facts dd { font-family: var(--serif); font-size: 19px; line-height: 1.3; color: var(--ink); }
.rail__facts small { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.5; color: var(--mute); }
.rail__help { margin-top: 18px; font-size: 13px; line-height: 1.65; color: var(--mute); }
.rail__help a { color: var(--ink); white-space: nowrap; }

/* ── After the form: what happens next ── */
.rnext { padding: clamp(64px, 9vw, 136px) 0; background: var(--paper); }
.rnext__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 104px); align-items: start; }
.rnext__title { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3.6vw, 54px); line-height: 1.08; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.rnext__title em { font-style: italic; color: var(--red); }
.rnext__lede { margin-top: clamp(18px, 2vw, 26px); max-width: 44ch; font-size: clamp(15.5px, 1.15vw, 17.5px); line-height: 1.72; }
.rnext__list { border-top: 1px solid var(--ink); }
.rnext__row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 6px 18px; padding: clamp(22px, 2.6vw, 32px) 0; border-bottom: 1px solid var(--line); transition: border-color .4s; }
.rnext__tag { grid-row: span 2; padding-top: 9px; font-size: 10.5px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; color: var(--red); }
.rnext__row h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(20px, 1.9vw, 27px); line-height: 1.22; letter-spacing: -.012em; color: var(--ink); }
.rnext__row p { grid-column: 2; max-width: 58ch; font-size: 15px; line-height: 1.7; }
@media (hover: hover) { .rnext__row:hover { border-bottom-color: var(--red); } }
.rnext__help {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 40px; align-items: center;
  margin-top: clamp(44px, 6vw, 88px); padding: clamp(22px, 3vw, 36px); border: 1px solid var(--line); border-radius: 8px; background: var(--sand);
}
.rnext__help h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(21px, 2vw, 28px); line-height: 1.2; letter-spacing: -.012em; color: var(--ink); }
.rnext__help p { margin-top: 8px; font-size: 15px; line-height: 1.7; }
.rnext__help p a { color: var(--ink); }
.rnext__small { margin-top: 26px; max-width: 86ch; font-size: 12.5px; line-height: 1.65; color: var(--mute); }

/* field helpers carried over from the previous page */
.field-hint { display: block; margin: -2px 0 10px; font-size: 13px; line-height: 1.55; color: var(--mute); }
.textarea--short { min-height: 84px; }
.field-count { display: flex; justify-content: flex-end; margin-top: 6px; font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--mute); }
#charCount[style*="156, 163, 175"] { color: var(--mute) !important; }
@media (min-width: 521px) { .choices .choice { min-width: 112px; } }
@media (max-width: 520px) { .choices--odd .choice:last-child { grid-column: 1 / -1; } }

/* ── Tablet and phone: the horizon becomes a band under the words ── */
@media (max-width: 899px) {
  .rhero__stage { display: block; min-height: 0; padding: calc(var(--nav-h) + clamp(18px, 5vw, 48px)) 0 clamp(204px, 44vw, 350px); }
  .rhero__scene { inset: auto 0 0 0; height: clamp(300px, 62vw, 470px); }
  .rhero__veil { background: linear-gradient(180deg, #12100F 0%, #12100F calc(100% - clamp(290px, 62vw, 470px)), rgba(18, 16, 15, .55) calc(100% - clamp(228px, 52vw, 400px)), rgba(18, 16, 15, 0) calc(100% - clamp(176px, 40vw, 310px))), linear-gradient(0deg, #12100F 0%, rgba(18, 16, 15, 0) 4%); }
  .rhero .phero__title { max-width: 11em; }
  .rhero__tag--dest > span { transform: translate(15px, -5px); }
  .rfacts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rfacts > div { padding: 16px 16px 18px 0; }
  .rfacts > div + div { padding-left: 0; border-left: 0; }
  .rfacts > div:nth-child(even) { padding-left: 16px; padding-right: 0; border-left: 1px solid var(--line); }
  .rfacts > div:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .rnext__grid { grid-template-columns: minmax(0, 1fr); }
  .rnext__help { grid-template-columns: minmax(0, 1fr); }
  /* touch: phone and email get a full-height tap area; a plain underline replaces the animated one, which would sit under the padding */
  /* the padding is cancelled by an equal negative margin, so the lines keep an even rhythm while each link still offers a 44px tap area */
  .rnext__help p { line-height: 1.85; }
  .rnext__help p a { display: inline-block; padding: 11px 0; margin: -11px 0; background: none; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
}
@media (max-width: 520px) {
  .rhero .phero__title { font-size: clamp(36px, 10.4vw, 44px); }
  .rhero .phero__eyebrow { margin-bottom: 16px; }
  .rhero .phero__lede { margin-top: 16px; font-size: 15.5px; line-height: 1.6; }
  .rhero__ctas { margin-top: 22px; gap: 10px; }
  .rhero__ctas .btn { width: 100%; }
  .rhero__aside { width: 100%; text-align: center; font-size: 15.5px; }
  .rfacts dt { font-size: 10px; letter-spacing: .1em; margin-bottom: 6px; }
  .rfacts dd { font-size: 16px; }
  /* phones: the sub-lines would push the first field a long way down; the same facts are spelled out under the form */
  .rfacts small { display: none; }
  .rfacts > div { padding: 13px 12px 14px 0; }
  .rfacts > div:nth-child(even) { padding-left: 14px; }
  .rform { padding-top: 20px; }
  .rform .form-section__hint { font-size: 14px; line-height: 1.6; margin-bottom: 18px; }
  .rhero__tag { font-size: 9.5px; letter-spacing: .15em; }
  .rnext__row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .rnext__tag { grid-row: auto; padding-top: 0; }
  .rnext__row p { grid-column: 1; }
  .rnext__help .btn { width: 100%; }
  /* the sign-off line under the card: two clean lines instead of a separator stranded at a line end */
  .rform .rfoot__sep { display: none; }
  .rform .rfoot__place { display: block; margin-top: 2px; }
  .field-hint { font-size: 14px; }
}

/* ── Phones held sideways: the headline and the button must share the first screen ── */
@media (max-width: 1099px) and (max-height: 520px) and (orientation: landscape) {
  .rhero .phero__eyebrow { margin-bottom: 12px; }
  .rhero .phero__title { font-size: clamp(32px, 4.6vw, 42px); max-width: 15em; }
  .rhero .phero__lede { margin-top: 12px; max-width: 64ch; font-size: 15px; line-height: 1.55; }
  .rhero__ctas { margin-top: 18px; }
  .rhero__ctas .btn { min-height: 48px; }
}
@media (max-width: 899px) and (max-height: 520px) and (orientation: landscape) {
  .rhero__stage { padding: calc(var(--nav-h) + 14px) 0 200px; }
  .rhero__scene { height: 260px; }
  .rhero__veil { background: linear-gradient(180deg, #12100F 0%, #12100F calc(100% - 252px), rgba(18, 16, 15, .55) calc(100% - 206px), rgba(18, 16, 15, 0) calc(100% - 160px)), linear-gradient(0deg, #12100F 0%, rgba(18, 16, 15, 0) 4%); }
}
@media (min-width: 900px) and (max-width: 1099px) and (max-height: 520px) and (orientation: landscape) {
  .rhero__stage { min-height: 0; padding: calc(var(--nav-h) + 16px) 0 56px; }
  .rhero .phero__lede { max-width: 46ch; }
}

@media (prefers-reduced-motion: reduce) {
  .rhero__scene canvas, .rhero__still, .rhero__scene::before, .rhero__tag, .rail__meter span { transition: none; }
  .rhero__content > * { animation: none; }
  .rform .choice:hover { transform: none; }
}