/* CALIBER Veterans page (v98): transition photography and task-based navigation.
   Loaded after caliber-pages.css on /caliber/veterans/ only. Obsidian and deep-purple ground, violet light on the
   photographs, Inter for all reading text; photographs are public-domain DVIDS imagery of real transition programs,
   credited under each image. Accessibility: WCAG 2.1 AA contrast on every text colour here, 44px+ targets, visible
   focus, anchors clear the sticky header, no motion beyond a hover lift (off under reduced motion). */

/* ================================================================ HERO: copy left, mentoring photo right */
html body section.cp-hero--veterans.cv-hero:not(#_) {
  min-height: 0; display: block;
  padding-block: clamp(28px, 4vw, 52px) clamp(88px, 8vw, 116px);
  background:
    radial-gradient(55% 70% at 78% 30%, rgba(136, 87, 195, .26), transparent 70%),
    radial-gradient(40% 50% at 10% 90%, rgba(136, 87, 195, .10), transparent 70%),
    linear-gradient(180deg, #0F1015, var(--nx-bg)) !important;
}
html body .cv-hero::before { display: none; }
.cv-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.cv-hero__copy { min-width: 0; }
html body .cv-hero h1 { max-width: 15ch; }
.cv-hero__figure { position: relative; margin: 0; border-radius: 18px; overflow: hidden; aspect-ratio: 5 / 4; isolation: isolate;
  box-shadow: 0 0 0 1px rgba(178, 120, 255, .55), 0 0 32px rgba(164, 92, 255, .30), 0 34px 80px -20px rgba(0, 0, 0, .75); }
.cv-hero__figure picture, .cv-hero__figure img { display: block; width: 100%; height: 100%; }
.cv-hero__figure img { object-fit: cover; object-position: 50% 30%; }
.cv-hero__figure::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(11, 13, 16, 0) 52%, rgba(11, 13, 16, .88) 100%), linear-gradient(90deg, rgba(91, 46, 160, .16), transparent 40%); }
.cv-hero__figure figcaption { position: absolute; z-index: 1; left: 18px; right: 18px; bottom: 14px; display: grid; gap: 6px; justify-items: start; }
.cv-hero__tag { font: 600 12px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: #EDE3FF;
  padding: 8px 12px; border-radius: 999px; background: rgba(23, 16, 38, .78); border: 1px solid rgba(178, 120, 255, .55); }
.cv-hero__figure .cv-credit { color: #E2DEEA; }
.cv-hero__figure .cv-credit a { color: #FFFFFF; }

/* ================================================================ CREDITS (every photograph) */
.cv-credit { margin: 0; font: 500 12.5px/1.45 var(--font-body); color: #B3AFBC; }          /* 8.6:1 on #0B0D10 */
.cv-credit a { color: var(--nx-gold); text-decoration: underline; text-underline-offset: 2px; }
.cv-credit a svg { vertical-align: -2px; margin-left: 2px; }
.cv-credit a:focus-visible { outline: 2px solid var(--cta-focus, #F3DCA6); outline-offset: 2px; border-radius: 3px; }

/* ================================================================ CHOOSE YOUR NEXT STEP (task navigation) */
html body .cv-tasks { padding-top: clamp(28px, 3.4vw, 40px); }
.cv-tasks__h { margin: 0 0 14px; font: 600 13px/1.4 var(--font-body) !important; letter-spacing: .18em !important; text-transform: uppercase; color: var(--nx-gold); }
.cv-tasks__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.cv-task { position: relative; display: grid; grid-template-rows: auto auto 1fr; gap: 6px; height: 100%; min-height: 128px;
  padding: 16px 16px 40px; border-radius: 14px; text-decoration: none; color: var(--nx-text);
  border: 1px solid rgba(178, 120, 255, .26); background: linear-gradient(170deg, rgba(36, 26, 58, .9), rgba(17, 18, 24, .96) 70%);
  transition: border-color .2s ease, box-shadow .2s ease, transform .18s ease; }
.cv-task__n { font: 400 13px/1 var(--font-head); color: var(--aura-lavender, #BDA0E3); }
.cv-task__t { font: 600 16.5px/1.3 var(--font-body); color: #FFFFFF; }
.cv-task__d { font: 400 14.5px/1.45 var(--font-body); color: #C9C5D2; }                       /* 11:1 */
.cv-task svg { position: absolute; right: 14px; bottom: 14px; color: var(--nx-gold); transition: transform .2s ease; }
.cv-task:hover, .cv-task:focus-visible { border-color: rgba(198, 155, 255, .7); box-shadow: 0 0 0 1px rgba(178, 120, 255, .25), 0 0 22px rgba(164, 92, 255, .25); transform: translateY(-2px); }
.cv-task:hover svg, .cv-task:focus-visible svg { transform: translateX(3px); }
.cv-task:focus-visible { outline: 2px solid var(--cta-focus, #F3DCA6); outline-offset: 3px; }

/* ================================================================ BRANCH TAGS (replace the operations photographs) */
.cv-branches { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 14px; padding: 0; list-style: none; }
.cv-branches li { font: 600 14px/1 var(--font-body); color: #E9E6EF; padding: 10px 14px; border-radius: 999px;
  border: 1px solid rgba(230, 198, 129, .28); background: rgba(230, 198, 129, .05); }

/* ================================================================ TRANSITION SECTIONS */
.cv-transition .cp-lead { margin-bottom: clamp(18px, 2.4vw, 28px); }
.cv-row { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(20px, 3vw, 40px); align-items: center;
  padding-block: clamp(22px, 2.8vw, 34px); border-top: 1px solid rgba(178, 120, 255, .14); scroll-margin-top: 110px; }
.cv-row:nth-of-type(even) .cv-row__media { order: 2; }
.cv-row__media { margin: 0; display: grid; gap: 8px; min-width: 0; }
.cv-row__media picture { display: block; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; position: relative;
  box-shadow: 0 0 0 1px rgba(178, 120, 255, .32), 0 0 22px rgba(164, 92, 255, .14), 0 24px 50px -24px rgba(0, 0, 0, .8); }
.cv-row__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
#cv-educate .cv-row__media img { object-position: 50% 40%; }
#cv-apply .cv-row__media img { object-position: 60% 50%; }
.cv-row__copy { min-width: 0; }
.cv-row__copy .cp-eyebrow { display: flex; align-items: center; gap: 10px; }
.cv-row__n { font: 400 12px/1 var(--font-head); color: var(--aura-lavender, #BDA0E3); padding: 6px 8px; border-radius: 6px; border: 1px solid rgba(178, 120, 255, .4); }
html body .cv-row h3 { margin: 6px 0 10px; font-family: var(--font-head); font-size: clamp(18px, 1.7vw, 22px) !important; line-height: 1.25; text-transform: uppercase; color: #FFFFFF; }
.cv-row__copy > p:not(.cp-eyebrow) { margin: 0; font-size: 16.5px; line-height: 1.7; color: #D3CFDB; max-width: 58ch; }   /* 12:1 */
.cv-row__link { margin-top: 12px !important; }
.cv-row__link a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; color: var(--nx-gold); text-decoration: underline; text-underline-offset: 3px; }
.cv-row__link a:focus-visible { outline: 2px solid var(--cta-focus, #F3DCA6); outline-offset: 2px; border-radius: 4px; }
#cp-transition { scroll-margin-top: 100px; }

/* ================================================================ RESPONSIVE */
@media (max-width: 1100px) { .cv-tasks__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 980px) {
  .cv-hero__grid { grid-template-columns: 1fr; }
  .cv-hero__figure { order: -1; aspect-ratio: 16 / 10; }
  .cv-row, .cv-row:nth-of-type(even) { grid-template-columns: 1fr; }
  .cv-row:nth-of-type(even) .cv-row__media { order: 0; }
  .cv-row__media picture { aspect-ratio: 16 / 10; }
}
@media (max-width: 640px) {
  .cv-tasks__list { grid-template-columns: 1fr; }
  .cv-task { min-height: 0; padding-bottom: 16px; padding-right: 44px; }
  .cv-task svg { top: 50%; bottom: auto; transform: translateY(-50%); }
  .cv-task:hover svg, .cv-task:focus-visible svg { transform: translate(3px, -50%); }
  .cv-hero__figure figcaption { left: 12px; right: 12px; bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) { .cv-task, .cv-task svg { transition: none; } .cv-task:hover, .cv-task:focus-visible { transform: none; } }
@media (forced-colors: active) { .cv-task, .cv-hero__figure, .cv-row__media picture { border: 1px solid CanvasText; } }

/* ================================================================ v102 HERO: F-22 formation, CALIBER slogan
   The photograph (graded: deeper contrast, midnight-violet shadows; no grain, no blur) sits on the right, fading into
   the obsidian ground behind the copy, with a soft vignette. The jets approach from the right half; the copy keeps the
   left. The mentoring photograph is a smaller card clear of the lead aircraft. Phones: the photo is a banner on top
   (a crop that keeps both jets), copy and card follow. */
html body section.cp-hero--veterans.cv-hero:not(#_) {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: clamp(680px, 62vw, 900px); display: flex; align-items: center;
  padding-block: clamp(36px, 4vw, 60px) clamp(96px, 9vw, 128px);   /* the audience strip overlaps the foot by 64px */
  background: #07080C !important;
}
.cv-hero__bg { position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; width: min(76%, 1500px); margin: 0; }
.cv-hero__bg picture, .cv-hero__bg img { display: block; width: 100%; height: 100%; }
.cv-hero__bg img { object-fit: cover; object-position: 52% 50%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .55) 18%, #000 40%); mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .55) 18%, #000 40%); }
.cv-hero__bg::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(115% 95% at 60% 46%, transparent 52%, rgba(5, 6, 12, .78) 100%),          /* vignette */
    linear-gradient(180deg, rgba(7, 8, 12, .6) 0%, transparent 16%, transparent 74%, rgba(7, 8, 12, .96) 100%),
    linear-gradient(90deg, rgba(7, 8, 12, .7) 0%, rgba(7, 8, 12, .2) 34%, transparent 52%),
    linear-gradient(200deg, rgba(91, 46, 160, .2), transparent 55%); }                       /* violet atmosphere */
.cv-hero__bgcredit { position: absolute; right: 18px; bottom: 70px; margin: 0; font-size: 12px; color: #C9C5D2; text-shadow: 0 1px 2px #000; }

html body .cv-hero .cv-hero__grid { display: block; position: static; width: 100%; }
html body .cv-hero .cv-hero__copy { max-width: 640px; container-type: inline-size; position: relative; z-index: 1; }
html body .cv-hero .cv-hero__copy::before { content: ""; position: absolute; z-index: -1; inset: -40px -60px -40px -40px; pointer-events: none;
  background: radial-gradient(70% 60% at 30% 50%, rgba(7, 8, 12, .7), transparent 75%); }
html body .cv-hero .cp-hero__lead { max-width: 30em; color: #E2DEEA; }   /* v104: lines end before the lead jet's wing */

/* the slogan: the homepage face; line 1 reflective silver, line 2 red, white and blue with a slow waving light */
html body section.cv-hero h1#cp-h1.cv-slogan {
  position: relative; max-width: none !important; margin: 10px 0 22px !important;
  font-size: clamp(34px, 10.6cqi, 84px) !important; line-height: .95 !important; letter-spacing: .004em !important;
  text-transform: uppercase; padding-bottom: .26em; padding-right: .08em;
}
html body #cp-h1.cv-slogan .cal-chrome { white-space: nowrap; }
html body #cp-h1.cv-slogan .cv-flag {
  display: inline-block; position: relative; white-space: nowrap;
  background-image:
    linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, .8) 50%, transparent 62%),
    linear-gradient(180deg, #F4F6FF 0%, #C4CEFF 13%, #7F95FF 29%, #6E86FF 43%, rgba(110, 134, 255, 0) 45.5%),   /* v104: a lighter blue, >=3:1 on the night sky */
    repeating-linear-gradient(-9deg, #FF4D61 0 .125em, #FFF7F8 .125em .25em);   /* v104: a brighter red, >=3:1 */
  background-size: 260% 100%, 100% 100%, 100% 100%; background-position: 130% 0, 0 0, 0 0; background-repeat: no-repeat, no-repeat, repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 .035em 0 #1A1238) drop-shadow(0 .065em 0 #0D091C) drop-shadow(0 0 .05em rgba(255, 255, 255, .5)) drop-shadow(0 0 .2em rgba(164, 92, 255, .7)) drop-shadow(0 0 .45em rgba(123, 46, 242, .38));
  animation: cv-flag-wave 6.5s ease-in-out .4s infinite alternate;
}
@keyframes cv-flag-wave {
  0%   { background-position: 130% 0, 0 0, 0 0; }
  50%  { background-position: 50% 0, 0 -.03em, .1em .06em; }
  100% { background-position: -30% 0, 0 0, .2em 0; }
}

/* the mentoring photograph: a supporting card at the foot of the hero, clear of the lead jet */
html body .cv-hero .cv-hero__figure { position: absolute; z-index: 1; right: clamp(20px, 3vw, 48px); bottom: 92px;
  width: clamp(240px, 20vw, 300px); aspect-ratio: 4 / 3; }
html body .cv-hero .cv-hero__figure figcaption { left: 12px; right: 12px; bottom: 10px; gap: 4px; }
html body .cv-hero .cv-hero__tag { font-size: 10.5px; padding: 6px 10px; }
html body .cv-hero .cv-hero__figure .cv-credit { font-size: 11px; }

@media (max-width: 1180px) and (min-width: 981px) { html body .cv-hero .cv-hero__copy { max-width: 540px; } .cv-hero__bg { width: 80%; } }
@media (max-width: 980px) {
  html body section.cp-hero--veterans.cv-hero:not(#_) { display: block; min-height: 0; padding-top: 0; }
  .cv-hero__bg { position: relative; width: 100%; margin: 0; height: auto; aspect-ratio: 6 / 5; max-height: 68vh; }
  .cv-hero__bg img { object-position: 50% 58%;
    -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, #000 62%, transparent 100%); }
  .cv-hero__bg::after { background: radial-gradient(120% 90% at 50% 45%, transparent 58%, rgba(5, 6, 12, .7) 100%), linear-gradient(200deg, rgba(91, 46, 160, .18), transparent 55%); }
  .cv-hero__bgcredit { top: 10px; bottom: auto; right: 12px; font-size: 11px; }
  html body .cv-hero .cv-hero__copy { max-width: none; margin-top: clamp(-96px, -14vw, -48px); }
  html body .cv-hero .cv-hero__copy::before { display: none; }
  html body section.cv-hero h1#cp-h1.cv-slogan { font-size: clamp(34px, 12cqi, 72px) !important; }
  html body .cv-hero .cv-hero__figure { position: relative; right: auto; bottom: auto; width: 100%; max-width: 520px; margin: 28px 0 0; aspect-ratio: 16 / 10; }
}
@media (prefers-reduced-motion: reduce) { html body #cp-h1.cv-slogan .cv-flag { animation: none; background-position: 50% 0, 0 0, 0 0; } }
@media (forced-colors: active) { html body #cp-h1.cv-slogan .cv-flag { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; filter: none; } }
/* mid widths: the card would reach the lead jet's wing, so it joins the copy column under the buttons */
@media (min-width: 981px) and (max-width: 1279px) {
  html body .cv-hero .cv-hero__grid { display: flex; flex-direction: column; align-items: flex-start; }
  html body .cv-hero .cv-hero__copy { width: 100%; }
  html body .cv-hero .cv-hero__figure { position: relative; right: auto; bottom: auto; width: 300px; margin-top: 26px; }
}

/* ================================================================ v103 INSIGNIA GALLERY (One force · different missions)
   Official emblems in dark, evenly sized badges with a muted gold edge; hover or keyboard focus lights the badge in
   violet and shows the full name. The emblems are never recoloured or distorted (square art, object-fit: contain). */
.cv-insignia { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 16px); margin: 28px 0 12px; padding: 0; list-style: none; }
.cv-insig {
  position: relative; display: grid; place-items: center; aspect-ratio: 1; padding: clamp(7px, .75vw, 11px); border-radius: 18px; outline: none; min-width: 0;
  background: radial-gradient(circle at 50% 38%, rgba(164, 92, 255, .1), transparent 68%), linear-gradient(180deg, rgba(30, 28, 40, .92), rgba(14, 15, 20, .96));
  border: 1px solid rgba(230, 198, 129, .24); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 10px 24px -14px rgba(0, 0, 0, .8);
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.cv-insig picture, .cv-insig img { display: block; width: 100%; max-width: 104px; height: auto; aspect-ratio: 1; object-fit: contain; }
.cv-insig img { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .55)); transition: filter .22s ease, transform .22s ease; }
.cv-insig:is(:hover, :focus-visible) {
  border-color: rgba(198, 155, 255, .75); transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 0 0 1px rgba(164, 92, 255, .25), 0 0 24px rgba(164, 92, 255, .35), 0 14px 28px -14px rgba(0, 0, 0, .85);
}
.cv-insig:is(:hover, :focus-visible) img { transform: scale(1.04); filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .5)) drop-shadow(0 0 12px rgba(198, 155, 255, .45)) brightness(1.06); }
.cv-insig:focus-visible { outline: 2px solid var(--sys-violet-hi, #C69BFF); outline-offset: 3px; }
/* Reserve: a typographic badge, not an invented insignia */
.cv-insig__res { display: grid; place-content: center; gap: 3px; width: 100%; max-width: 104px; aspect-ratio: 1; border-radius: 50%; text-align: center; overflow: hidden; box-sizing: border-box;
  border: 2px solid rgba(214, 182, 255, .45); background: radial-gradient(circle at 50% 35%, rgba(164, 92, 255, .16), rgba(14, 15, 20, .6) 72%);
  box-shadow: inset 0 0 0 4px rgba(14, 15, 20, .8), inset 0 0 0 5px rgba(230, 198, 129, .35); }
.cv-insig__res b { font: italic 900 clamp(14px, 1.35vw, 18px)/1 "Barlow Condensed", var(--font-body); letter-spacing: .03em; text-transform: uppercase; color: #F1ECF8; }
.cv-insig__res small { font: 600 clamp(6px, .48vw, 7.5px)/1 var(--font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--nx-gold); }
/* tooltip */
.cv-insig__tip {
  position: absolute; z-index: 3; bottom: calc(100% + 10px); left: 50%; transform: translate(-50%, 4px);
  max-width: 240px; width: max-content; padding: 7px 11px; border-radius: 9px; pointer-events: none; opacity: 0;
  font: 600 12.5px/1.35 var(--font-body); color: #F1ECF8; text-align: center; white-space: normal;
  background: #16141E; border: 1px solid rgba(178, 120, 255, .5); box-shadow: 0 0 16px rgba(164, 92, 255, .3), 0 10px 22px -10px rgba(0, 0, 0, .9);
  transition: opacity .18s ease, transform .18s ease;
}
.cv-insig:is(:hover, :focus-visible) .cv-insig__tip { opacity: 1; transform: translate(-50%, 0); }
.cv-insig:first-child .cv-insig__tip { left: 0; transform: translate(0, 4px); }
.cv-insig:first-child:is(:hover, :focus-visible) .cv-insig__tip { transform: translate(0, 0); }
.cv-insig:last-child .cv-insig__tip { left: auto; right: 0; transform: translate(0, 4px); }
.cv-insig:last-child:is(:hover, :focus-visible) .cv-insig__tip { transform: translate(0, 0); }
.cv-insignia__note { margin: 0 0 14px; max-width: 72ch; font-size: 13px; line-height: 1.55; color: #A9A4B4; }
@media (max-width: 980px) {
  .cv-insignia { grid-template-columns: repeat(4, minmax(0, 120px)); justify-content: start; }
  .cv-insig:nth-child(4n + 1) .cv-insig__tip { left: 0; transform: translate(0, 4px); }
  .cv-insig:nth-child(4n + 1):is(:hover, :focus-visible) .cv-insig__tip { transform: translate(0, 0); }
  .cv-insig:nth-child(4n) .cv-insig__tip { left: auto; right: 0; transform: translate(0, 4px); }
  .cv-insig:nth-child(4n):is(:hover, :focus-visible) .cv-insig__tip { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .cv-insig, .cv-insig img, .cv-insig__tip { transition: none; }
  .cv-insig:is(:hover, :focus-visible), .cv-insig:is(:hover, :focus-visible) img { transform: none; }
}
@media (forced-colors: active) { .cv-insig, .cv-insig__tip { border: 1px solid CanvasText; } }

/* ================================================================ v104 legibility fixes (measured critique)
   - Flag line: a thin light edge keeps the letterforms crisp where the stripes meet the dark sky.
   - Both photo credits sit on a dark chip (F-22 credit 2.6:1 -> 4.5:1+; mentor credit ~3:1 -> 4.5:1+), and the F-22
     credit sits in the top-right corner over open sky, clear of the mentoring card and the audience strip. */
html body #cp-h1.cv-slogan .cv-flag { -webkit-text-stroke: .014em rgba(255, 255, 255, .55); }
.cv-hero__bgcredit { top: 16px; bottom: auto; padding: 4px 9px; border-radius: 7px; color: #E8E4EE; text-shadow: none;
  background: rgba(7, 8, 12, .82); border: 1px solid rgba(178, 120, 255, .25); }
html body .cv-hero .cv-hero__figure .cv-credit { justify-self: start; padding: 3px 8px; border-radius: 6px; color: #EDEAF2; background: rgba(9, 10, 14, .84); }
html body .cv-hero .cv-hero__figure .cv-credit a { color: #FFFFFF; }
/* insignia: a little more emblem inside each badge */
.cv-insignia { gap: clamp(8px, .9vw, 12px); }
.cv-insig { padding: clamp(5px, .5vw, 8px); }
@media (max-width: 980px) { .cv-hero__bgcredit { bottom: auto; } }