/* CALIBER design system (v117): Premium Interface x Cinematic Minimal (80/20).
   Loaded LAST on every public CALIBER page, after caliber-system.css. It does not restyle the campaign layer: the
   condensed metallic slogans, the hero environments, the buttons and their violet glow, the photographs and insignia
   stay as they are. It sets one shared vocabulary for everything that is read:
     1. tokens       colour, type, spacing, panel and accent values every page shares
     2. type         body copy, labels and section headings (Inter for reading, Michroma for headings)
     3. panels       one translucent graphite panel, used only for explanatory blocks, cards and resources
     4. accents      thin violet rails, short gold/violet dividers
     5. pages        where the components apply (home, Veterans, About, Assist, legal, account, sign-in)
     6. mobile       320-430 px: compact padding, no oversized gaps, nothing wider than the screen
     7. access       focus, reduced motion, forced colours
   Contrast is measured on the page ground (#0B0D10): ink 17.4:1, ink-2 12.0:1, ink-3 7.6:1, violet-hi 8.8:1. */

/* ================================================================ 1. TOKENS */
:root {
  --ds-ink: #F2EEF8;                                   /* primary text: silver-white */
  --ds-ink-2: #CBC4DA;                                 /* body copy: silver-lavender */
  --ds-ink-3: #A9A2BB;                                 /* supporting information */
  --ds-violet: #A45CFF;
  --ds-violet-hi: #C69BFF;
  --ds-violet-line: rgba(164, 92, 255, .26);
  --ds-violet-line-2: rgba(178, 120, 255, .5);
  --ds-gold: #E6C681;
  --ds-gold-deep: #B98F4C;

  --ds-body: clamp(16px, 15.2px + .2vw, 17.5px);       /* 16 on phones, 17.5 on wide screens */
  --ds-body-lh: 1.65;
  --ds-small: 15px;
  --ds-small-lh: 1.55;
  --ds-measure: 66ch;
  --ds-label-size: 12px;
  --ds-label-track: .18em;
  --ds-head-lh: 1.14;

  --ds-radius: 16px;
  --ds-radius-sm: 12px;
  --ds-pad: clamp(18px, 12px + 1.3vw, 28px);
  --ds-pad-sm: clamp(14px, 10px + 1vw, 20px);
  --ds-gap: clamp(12px, 8px + .8vw, 18px);
  --ds-section: clamp(40px, 22px + 4.6vw, 88px);

  --ds-panel-bg: linear-gradient(180deg, rgba(27, 25, 37, .74), rgba(14, 13, 20, .84));
  --ds-panel-border: rgba(164, 92, 255, .24);
  --ds-panel-border-hi: rgba(178, 120, 255, .46);
  --ds-panel-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .05),
    inset 0 22px 40px -34px rgba(164, 92, 255, .32),
    0 24px 48px -34px rgba(0, 0, 0, .92);
  --ds-panel-blur: blur(10px) saturate(115%);
  --ds-rail: linear-gradient(180deg, rgba(198, 155, 255, .95), rgba(164, 92, 255, .55) 55%, rgba(164, 92, 255, 0));
  --ds-rule-gold: linear-gradient(90deg, #F3DCA6, var(--ds-gold) 45%, var(--ds-gold-deep));
  --ds-rule-violet: linear-gradient(90deg, var(--ds-violet-hi), var(--ds-violet) 55%, rgba(164, 92, 255, 0));

  /* the older layers read these: one primary ink and one muted ink everywhere */
  --nx-text: var(--ds-ink);
  --white: var(--ds-ink);
  --nexus-text: var(--ds-ink);
  --caliber-v56-text: var(--ds-ink);
  --nx-muted: var(--ds-ink-2);
  --nexus-muted: var(--ds-ink-2);
  --caliber-v56-muted: var(--ds-ink-2);
  --mist: var(--ds-ink-2);
}

/* ================================================================== 2. TYPE */
/* Reading text: Inter, measured line length, calm line height. Paragraphs never get gradients, glow or caps. */
html body :is(.cp-lead, .cp-hero__lead, .cp-step p, .cp-card p, .cp-callout p, .cv-row__copy > p:not(.cp-eyebrow),
  .assist-flow__card p, .cp-member__bio p:not(.cp-member__role), .nx-card p, .nx-public-card p, .nx-section-sub, .nx-flow > .nx-wrap > p) {
  font-family: var(--font-body);
  color: var(--ds-ink-2);
  text-shadow: none;
  text-transform: none;
  letter-spacing: 0;
  overflow-wrap: break-word;
}
html body :is(.cp-lead, .cp-hero__lead, .cv-row__copy > p:not(.cp-eyebrow), .cp-step p) {
  font-size: var(--ds-body);
  line-height: var(--ds-body-lh);
}
html body :is(.cp-lead, .cv-row__copy > p:not(.cp-eyebrow), .cp-step p) { max-width: var(--ds-measure); }   /* hero leads keep their own width */
html body .cp-lead { margin-bottom: clamp(18px, 2vw, 26px); }
html body :is(.cp-card p, .cp-callout p, .assist-flow__card p, .nx-card p, .nx-public-card p, .cp-hub__desc, .cp-aud__when, .cv-task__d) {
  font-size: var(--ds-small);
  line-height: var(--ds-small-lh);
}
html body :is(.cp-hub__desc, .cp-aud__when, .cv-task__d) { color: var(--ds-ink-3); }

/* Labels: Inter SemiBold, uppercase, measured tracking. Gold for prestige, never on a paragraph. */
html body :is(.cp-eyebrow, .nx-kicker:not(.caliber-byline), .nx-trust-title, .cp-onpage h2, h2.cv-tasks__h) {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: var(--ds-label-size) !important;
  line-height: 1.4 !important;
  letter-spacing: var(--ds-label-track) !important;
  text-transform: uppercase;
}

/* One label scale. Field labels, footer column heads, kickers, roles and step chips: 12px. Pills and badges that sit on
   imagery or inside tight frames: 11.5px. Photo credits and fine print: 12px. Nothing reads below 11.5px. */
html body :is(.field > .label, .nx-search label, .nx-footer h5, .caliber-access-kicker, .cp-member__role, .onboarding-steps > *,
  .job-source-label, .cp-footer h5, .cp-footer__col h2, .cp-footer__col h3) {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: var(--ds-label-size) !important;
  letter-spacing: .16em !important;
  text-transform: uppercase;
}
html body :is(.cp-member__role, .onboarding-steps > *) { letter-spacing: .12em !important; }
/* the sign-in / create-account sheet sets these through #authView, so the scale is restated at that weight */
html.caliber-auth-page #authView .field .label { font-size: var(--ds-label-size) !important; letter-spacing: .16em !important; }
html.caliber-auth-page #authView .onboarding-steps span { font-size: var(--ds-label-size) !important; letter-spacing: .1em !important; }
html body :is(.nx-badge, .hiw-tag, .cv-hero__tag, .cp-badge) { font-size: 11.5px !important; letter-spacing: .12em !important; }
html body :is(.cv-credit, .cv-credit a, .cv-insignia__note, .cp-photo figcaption) { font-size: 12px !important; line-height: 1.5; }
html body .caliber-byline :is(.caliber-byline__by, b), html body .nx-hero .nx-kicker.caliber-byline { font-size: 12px !important; }

/* Code-like strings (file names, browser addresses on Assist): a quiet chip in the system's own hairline */
html body .cp code { border-color: var(--ds-panel-border) !important; color: var(--ds-ink) !important; font-size: .9em; }

/* Section headings (Michroma): stronger and cleaner, with a short divider. */
html body.cp .cp-section h2 {
  font-size: clamp(22px, 15px + 1.55vw, 34px) !important;
  line-height: var(--ds-head-lh) !important;
  letter-spacing: .01em !important;
  color: var(--ds-ink);
  margin-bottom: 16px;
  padding-bottom: 14px;
}
html body.cp .cp-section h2::after { width: 44px; height: 2px; background: var(--ds-rule-gold); }

/* ================================================================ 3. PANELS */
/* One panel: translucent graphite/obsidian, a violet hairline, a faint inner light from above. */
.ds-panel,
html body :is(.cp-card, .cp-aud, .cp-hub__link, .cv-task, .cp-callout, .cp-member, .nx-card, .nx-public-card) {
  background: var(--ds-panel-bg) !important;
  border: 1px solid var(--ds-panel-border) !important;
  border-radius: var(--ds-radius) !important;
  box-shadow: var(--ds-panel-shadow) !important;
  -webkit-backdrop-filter: var(--ds-panel-blur);
  backdrop-filter: var(--ds-panel-blur);
}
.ds-panel { padding: var(--ds-pad); }
html body :is(.cp-card, .cp-callout) { padding: var(--ds-pad) !important; }
html body :is(.cp-hub__link, .cp-aud) { padding: var(--ds-pad-sm) calc(var(--ds-pad-sm) + 4px) !important; }
/* the official-program hub and the callout keep their gold rail: official, informational */
html body :is(.cp-hub__link, .cp-callout) { border-left: 2px solid var(--ds-gold) !important; }
html body :is(.cp-card, .cp-hub__link, .cv-task, .nx-card, .nx-public-card):is(:hover, :focus-visible) {
  border-color: var(--ds-panel-border-hi) !important;
}
html body :is(.cp-hub__link, .cp-callout):is(:hover, :focus-visible) { border-left-color: #F3DCA6 !important; }
.ds-panel h3, html body :is(.cp-card, .cv-task, .nx-card, .nx-public-card) h3 { color: var(--ds-ink); }

/* =============================================================== 4. ACCENTS */
.ds-accent { position: relative; padding-left: 18px; }
.ds-accent::before {
  content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: 2px; border-radius: 2px;
  background: var(--ds-rail);
}
.ds-rule { display: block; width: 44px; height: 2px; border: 0; border-radius: 2px; background: var(--ds-rule-gold); margin: 0 0 14px; }
.ds-rule--violet { background: var(--ds-rule-violet); }

/* ================================================================== 5. PAGES */

/* ---- Home and Veterans: the hero description sits in a quiet panel under the slogan, with a violet rail. The slogan
   still leads: the panel is translucent, unglowing, and narrower than the headline. */
html body :is(.nx-hero-grid > :first-child > p, .cv-hero .cp-hero__lead, .ab-hero .cp-hero__lead) {
  position: relative;
  max-width: 31em;
  margin: 0 0 24px;
  padding: 16px 20px 16px 22px;
  font-size: var(--ds-body) !important;
  line-height: var(--ds-body-lh) !important;
  color: var(--ds-ink-2) !important;
  background: linear-gradient(180deg, rgba(20, 18, 29, .58), rgba(12, 11, 18, .66));
  border: 1px solid var(--ds-panel-border);
  border-radius: var(--ds-radius-sm);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 18px 36px -30px rgba(0, 0, 0, .9);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
html body :is(.nx-hero-grid > :first-child > p, .cv-hero .cp-hero__lead, .ab-hero .cp-hero__lead)::before {
  content: ""; position: absolute; left: -1px; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; background: var(--ds-rail);
}
html body .nx-trust-title { color: var(--ds-gold) !important; }
/* Veterans: the panel sits over the F-22 photograph, so its ground is a little denser and its lines still end before
   the lead jet's wing (30em, as before) */
html body .cv-hero .cp-hero__lead {
  max-width: 30em;
  background: linear-gradient(180deg, rgba(16, 15, 25, .7), rgba(10, 10, 16, .78));
}

/* Home cards: tokens for spacing and type, no fixed tall heights */
html body .nx-card { min-height: 0 !important; padding: var(--ds-pad-sm) !important; }
html body .nx-card h3 { margin: 12px 0 8px; font-size: 18px; line-height: 1.3; }
html body .nx-section { padding-block: var(--ds-section) !important; }

/* Job-source ticker: on a phone, and whenever it is static (reduced motion), the label sits above the items and the
   items wrap at full width instead of in a narrow indented column. */
@media (max-width: 640px), (prefers-reduced-motion: reduce) {
  html body #job-source-ticker { flex-direction: column; align-items: stretch; height: auto; }
  html body #job-source-ticker .job-source-label { justify-content: flex-start; padding: 8px 16px 0; }
}
@media (prefers-reduced-motion: reduce) {
  html body #job-source-ticker .job-source-window { padding: 6px 16px 12px; }
  html body #job-source-ticker .job-source-track { display: grid; gap: 4px; font-size: 13.5px; line-height: 1.5; }
  html body #job-source-ticker .job-source-track > span { display: block; margin: 0; }
}

/* ---- On this page (Veterans, legal pages): a compact card with a thin violet timeline */
@media (min-width: 981px) { html body.cp .cp-layout { grid-template-columns: 256px minmax(0, 1fr); } }
html body.cp .cp-onpage {
  padding: 16px 18px 14px;
  border: 1px solid rgba(230, 198, 129, .42) !important;
  border-radius: var(--ds-radius);
  background: linear-gradient(180deg, rgba(24, 22, 33, .8), rgba(13, 12, 19, .88));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 20px 40px -30px rgba(0, 0, 0, .9);
}
html body.cp .cp-onpage h2 { margin: 0 0 10px !important; color: var(--ds-gold) !important; }
html body.cp .cp-onpage:not(.legal-toc) ul { position: relative; gap: 2px; }
html body.cp .cp-onpage:not(.legal-toc) ul::before {                  /* the timeline */
  content: ""; position: absolute; left: 4px; top: 14px; bottom: 14px; width: 1px;
  background: linear-gradient(180deg, rgba(198, 155, 255, .7), rgba(164, 92, 255, .35));
}
html body.cp .cp-onpage:not(.legal-toc) a {
  position: relative;
  display: flex; align-items: flex-start; gap: 10px;
  min-height: 40px;
  padding: 8px 4px 8px 20px;
  border-radius: 8px;
  font-size: 14.5px; line-height: 1.4;
  color: var(--ds-ink-2);
}
html body.cp .cp-onpage:not(.legal-toc) a::before {                   /* the node on the timeline */
  content: ""; position: absolute; left: 1px; top: 15px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ds-violet-hi); box-shadow: 0 0 0 2px rgba(11, 13, 16, .95), 0 0 8px rgba(164, 92, 255, .7);
}
html body.cp .cp-onpage:not(.legal-toc) a:hover { color: var(--ds-ink); text-decoration: none; background: rgba(164, 92, 255, .08); }
html body.cp .cp-onpage a:hover .cp-onpage__t { text-decoration: underline; text-underline-offset: 3px; }
html body.cp .cp-onpage a[aria-current="true"] { color: var(--ds-ink); }
html body.cp .cp-onpage:not(.legal-toc) a[aria-current="true"]::before { background: var(--ds-gold); box-shadow: 0 0 0 2px rgba(11, 13, 16, .95), 0 0 10px rgba(230, 198, 129, .7); }
.cp-onpage__icon { flex: none; display: grid; place-items: center; width: 22px; height: 22px; color: var(--ds-gold); }
.cp-onpage__icon svg { width: 20px; height: 20px; }

/* ---- Veterans: the military-community heading and the service insignia */
@media (max-width: 760px) {
  /* on phones each emblem sits in a small tile with its service name (the names were hover-only) */
  html body .cv-insignia { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  html body .cv-insig {
    display: grid; grid-template-rows: auto 1fr; justify-items: center; align-content: start; gap: 6px;
    aspect-ratio: auto; padding: 9px 4px 10px !important;
    border-radius: var(--ds-radius-sm);
  }
  html body .cv-insig picture, html body .cv-insig img, html body .cv-insig__res { width: min(56px, 100%); max-width: 56px; }
  html body .cv-insig .cv-insig__tip {
    position: static; opacity: 1; transform: none !important; pointer-events: none;
    width: 100%; max-width: 100%; min-width: 0; overflow-wrap: anywhere;
    padding: 0; border: 0; background: none; box-shadow: none; white-space: normal;
    font: 600 10px/1.25 var(--font-body); letter-spacing: .06em; text-transform: uppercase; text-align: center;
    color: var(--ds-ink-2);
  }
  /* the Reserve badge already names itself; its long list stays in the hover/focus tip on wider screens */
  html body .cv-insig:has(.cv-insig__res) .cv-insig__tip { display: none; }
  html body .cv-insig:has(.cv-insig__res) { align-content: center; }
}

/* ---- Veterans task cards and audience cards: tokens, not tall fixed boxes */
html body .cv-task { padding: var(--ds-pad-sm) 44px var(--ds-pad-sm) var(--ds-pad-sm) !important; }
html body .cv-task__t { color: var(--ds-ink); }

/* ---- About and Assist cards */
html body .assist-flow__card { border-color: var(--ds-panel-border) !important; border-radius: var(--ds-radius) !important; }
html body .cp-member { overflow: hidden; }

/* ---- Sign-in / create account and the account page: helper text and labels share the tokens */
html body :is(.caliber-auth-page, .cp--account) :is(label, .field-label) { letter-spacing: .04em; }
html body :is(.caliber-auth-page, .cp--account) :is(.muted, .hint, small) { color: var(--ds-ink-3); }

/* ================================================================= 6. MOBILE */
@media (max-width: 640px) {
  html body.cp .cp-section { padding-block: 36px; }
  html body.cp .cp-layout { padding-top: 28px; }
  html body.cp .cp-onpage { margin-bottom: 8px; padding: 14px 14px 10px; }
  html body.cp .cp-onpage:not(.legal-toc) a { min-height: 44px; padding-block: 9px; font-size: 14.5px; }
  html body :is(.cp-card, .cp-callout) { padding: 18px !important; }
  html body .cp-cards, html body .cp-hub, html body .cp-aud-list { gap: 10px !important; }
  html body :is(.nx-hero-grid > :first-child > p, .cv-hero .cp-hero__lead, .ab-hero .cp-hero__lead) { padding: 14px 16px 14px 18px; margin-bottom: 20px; }
  html body .nx-card { padding: 16px !important; }
  html body .nx-card h3 { margin-top: 10px; }
  html body .nx-card-grid { gap: 10px !important; }
  html body .nx-section { padding-block: 40px !important; }
  html body :is(.cp-lead, .cp-hero__lead, .cv-row__copy > p:not(.cp-eyebrow)) { font-size: 16px; line-height: 1.62; }
  html body .cv-insignia__note { font-size: 12.5px; }
}
@media (max-width: 360px) {
  html body :is(.nx-hero-grid > :first-child > p, .cv-hero .cp-hero__lead, .ab-hero .cp-hero__lead) { padding: 12px 14px 12px 16px; }
  html body .cv-insig .cv-insig__tip { font-size: 9px; letter-spacing: .03em; }
  html body.cp .cp-onpage:not(.legal-toc) a { font-size: 14px; }
  /* the wordmark inside the ticker's first item must wrap rather than run past a 320 px screen */
  html body #job-source-ticker .job-source-track b { white-space: normal; }
}

/* ================================================================= 7. ACCESS */
:where(a, button, [role="button"], input, select, textarea, summary, [tabindex="0"]):focus-visible {
  outline: 2px solid var(--cta-focus, #C69BFF);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  html body :is(.cp-card, .cp-hub__link, .cv-task, .nx-card, .nx-public-card, .cp-onpage a) { transition: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .ds-panel, html body :is(.cp-card, .cp-aud, .cp-hub__link, .cv-task, .cp-callout, .cp-member, .nx-card, .nx-public-card),
  html body :is(.nx-hero-grid > :first-child > p, .cv-hero .cp-hero__lead, .ab-hero .cp-hero__lead) { -webkit-backdrop-filter: none; backdrop-filter: none; background: #14131C !important; }
}
@media (forced-colors: active) {
  .ds-panel, html body :is(.nx-hero-grid > :first-child > p, .cv-hero .cp-hero__lead, .ab-hero .cp-hero__lead), html body.cp .cp-onpage { border: 1px solid CanvasText !important; }
  html body.cp .cp-onpage:not(.legal-toc) ul::before, html body.cp .cp-onpage:not(.legal-toc) a::before, .ds-accent::before,
  html body :is(.nx-hero-grid > :first-child > p, .cv-hero .cp-hero__lead, .ab-hero .cp-hero__lead)::before { background: CanvasText; }
}

/* the footer slogan line: a brand line, but still read, so it keeps the 12px floor */
html body :is(.caliber-slogan--footer, .caliber-slogan--card, .caliber-slogan--legal, .nx-footer .caliber-slogan, .cp-footer .caliber-slogan) { font-size: 12px !important; }

/* the wordmark's clear space inside the job-source ticker: an older reduced-motion rule made every ticker span an
   inline-block, which collapses these space-only gaps to nothing ("LIVE◦CALIBER◦DISCOVERY" ran together) */
html body #job-source-ticker .job-source-track .wm-gap { display: inline !important; }

/* phones: the announcement strip's star sits on the first line of its text instead of alone above it */
@media (max-width: 640px) {
  html body .nx-strip .nx-wrap { height: auto; min-height: 39px; padding-block: 10px; display: grid; grid-template-columns: auto 1fr; column-gap: 8px; row-gap: 4px; align-items: start; justify-content: start; text-align: left; }
  html body .nx-strip .nx-wrap > b { padding-top: 2px; }
  html body .nx-strip .nx-wrap > a { grid-column: 2; justify-self: start; }
}

/* ---- Veterans: the "Veterans helping veterans" photograph in a majestic aura frame. A 2px light bezel (violet,
   champagne, white) slowly travels around the photo; layered violet bloom outside. Still under reduced motion. */
@property --ds-aura-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
html body .cv-hero__figure {
  padding: 3px;
  border-radius: 21px;
  outline: 1px solid rgba(214, 182, 255, .38);          /* a fine halo ring floating outside the bezel */
  outline-offset: 6px;
  background: conic-gradient(from var(--ds-aura-a),
    rgba(198, 155, 255, .95), rgba(164, 92, 255, .3) 14%, rgba(243, 220, 166, .9) 27%, rgba(164, 92, 255, .3) 40%,
    rgba(255, 255, 255, .95) 50%, rgba(164, 92, 255, .3) 60%, rgba(243, 220, 166, .75) 76%, rgba(164, 92, 255, .3) 88%, rgba(198, 155, 255, .95));
  box-shadow:
    0 0 0 1px rgba(214, 182, 255, .35),
    0 0 18px 2px rgba(164, 92, 255, .7),
    0 0 56px 10px rgba(136, 87, 195, .45),
    0 0 130px 30px rgba(91, 46, 160, .3),
    0 34px 80px -20px rgba(0, 0, 0, .8) !important;
  animation: ds-aura-turn 16s linear infinite;
  transition: box-shadow .35s ease;
}
html body .cv-hero__figure picture { border-radius: 18px; overflow: hidden; }
html body .cv-hero__figure img { border-radius: 18px; }
html body .cv-hero__figure::after { inset: 3px; border-radius: 18px; }
/* light trails along the bezel: white-violet across the top, a softer champagne along the bottom */
html body .cv-hero__figure::before {
  content: ""; position: absolute; z-index: 2; left: 12%; right: 12%; top: 0; height: 3px; border-radius: 3px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(198, 155, 255, .9) 25%, #FFFFFF 50%, rgba(164, 92, 255, .9) 75%, transparent);
  box-shadow: 0 0 12px 2px rgba(198, 155, 255, .75), 0 0 28px 4px rgba(164, 92, 255, .45);
}
html body .cv-hero__figure > figcaption::after {
  content: ""; position: absolute; left: 6%; right: 6%; bottom: -13px; height: 3px; border-radius: 3px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(243, 220, 166, .85) 50%, transparent);
  box-shadow: 0 0 10px 1px rgba(243, 220, 166, .45);
}
html body .cv-hero__figure:hover {
  box-shadow:
    0 0 0 1px rgba(232, 214, 255, .5),
    0 0 20px 2px rgba(178, 120, 255, .8),
    0 0 64px 10px rgba(136, 87, 195, .5),
    0 0 140px 30px rgba(91, 46, 160, .3),
    0 34px 80px -20px rgba(0, 0, 0, .8) !important;
}
@keyframes ds-aura-turn { to { --ds-aura-a: 360deg; } }
@media (prefers-reduced-motion: reduce) { html body .cv-hero__figure { animation: none; transition: none; } }
@media (forced-colors: active) { html body .cv-hero__figure { background: CanvasText; } }

/* the submariner-mentor photograph is a 4:3 crop; where the frame is wider (phones, 16:10) keep both faces in view */
html body .cv-hero__figure img[src*="mentor-submariner"] { object-position: 50% 15%; }

/* the handshake photograph is a wide landscape (about 1.9:1); the frame crops it, so hold the flag patch and the
   handshake in view */
html body .cv-hero__figure img[src*="veterans-handshake"] { object-position: 16% 50%; }