/* Career Calling Insights: official job market data, read plainly. White paper, cool tinted panels, teal for the data,
   navy for the words, amber for falls, gold as the one warm accent. Charts are inline SVG styled from here.
   Fonts are self-hosted (Fraunces for headings, Inter for text and numbers). Everything reads without JavaScript. */
@font-face { font-family: 'Fraunces Variable'; src: url('/assets/fonts/fraunces.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter Variable'; src: url('/assets/fonts/inter.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
:root {
  --teal: #0B6E73; --teal-ink: #08575B; --teal-soft: #E4F1F1; --teal-line: #B9DCDB;
  --amber: #9A5408; --amber-soft: #FBF0E1; --gold: #F2B544; --gold-soft: #FFF5DD;
  --ink: #1F2747; --ink-2: #444B66; --muted: #586079;
  --paper: #FFFFFF; --tint: #F3F7F7; --tint-2: #E9F0F0; --line: #DCE6E6; --line-2: #C3D3D3; --field: #7A7F94;
  --ok: #2F6B45; --err: #A3261B;
  /* names the shared chrome stylesheet uses */
  --blue: var(--teal); --blue-ink: var(--teal-ink); --blue-deep: var(--teal-ink); --sky: var(--teal-soft); --sun: var(--gold);
  --grid: var(--line); --cream: var(--tint); --ring: rgba(11, 110, 115, .28);
  --clay: var(--teal); --sage: var(--ink);
  --maxw: 1200px; --r: 16px;
  --sans: 'Inter Variable', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --serif: 'Fraunces Variable', Georgia, 'Times New Roman', serif;
  --shadow: 0 1px 2px rgba(31, 39, 71, .05), 0 20px 40px -26px rgba(31, 39, 71, .30);
  --ease: cubic-bezier(.16, 1, .3, 1);
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.6 var(--sans); overflow-x: clip; font-variant-numeric: tabular-nums; }
::selection { background: var(--gold); color: var(--ink); }
img, svg { max-width: 100%; }
img { height: auto; }
a { color: var(--teal-ink); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3, .h3, .h4 { font-family: var(--serif); color: var(--ink); font-weight: 600; text-wrap: balance; margin: 0 0 .45em; letter-spacing: -.015em; }
h1 { font-size: clamp(38px, 5.8vw, 70px); line-height: 1.03; letter-spacing: -.03em; }
h1 em { font-style: normal; color: var(--teal); }
h2 { font-size: clamp(27px, 3.2vw, 38px); line-height: 1.12; }
h3, .h3 { font-size: 21px; line-height: 1.25; }
.h4 { font-size: 19px; line-height: 1.3; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { padding-left: 1.25em; }
li { margin-bottom: .4em; }
code, pre { font-family: Consolas, 'Cascadia Mono', Menlo, monospace; font-size: 14.5px; }
pre { background: var(--ink); color: #F3F7F7; padding: 16px 18px; border-radius: 12px; overflow-x: auto; line-height: 1.5; }
:not(pre) > code { background: var(--tint-2); padding: 1px 6px; border-radius: 6px; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 860px; }
.lead { font-size: clamp(18.5px, 1.6vw, 21px); line-height: 1.5; color: var(--ink-2); max-width: 62ch; }
.small { font-size: 15px; }
.muted { color: var(--muted); }
.eyebrow { font-weight: 700; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--teal-ink); margin-bottom: 12px; }
.sec { padding: clamp(46px, 6vw, 84px) 0; }
.sec-tint { background: var(--tint); }
.sec-head { max-width: 780px; margin-bottom: 26px; }
.sec-head p { color: var(--ink-2); font-size: 18px; margin: 0; }
.split-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 60px); align-items: start; }
.split-top { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.ico { width: 20px; height: 20px; flex: none; }
.ico-ext { width: 13px; height: 13px; margin-left: 4px; vertical-align: -1px; }
.arr { display: inline-block; transition: transform .3s var(--ease); }
a:hover > .arr, button:hover > .arr, a:hover .go .arr { transform: translateX(4px); }
.prose h2 { margin-top: 1.1em; }
.prose h2:first-child { margin-top: 0; }

/* ---------- buttons ---------- */
.btns { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 11px 24px; border-radius: 999px; font: 700 16px/1.2 var(--sans); text-decoration: none; cursor: pointer; border: 1.5px solid transparent; transition: background-color .2s, color .2s, border-color .2s; }
.btn-primary { background: var(--teal); color: #fff; }
.btn-primary:hover { background: var(--ink); color: #fff; }
.btn-ghost { background: transparent; border-color: var(--teal-ink); color: var(--teal-ink); }
.btn-ghost:hover { background: var(--teal-ink); color: #fff; }
.btn-sm { min-height: 42px; padding: 8px 18px; font-size: 15px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ---------- hero and page head ---------- */
.hero { background: linear-gradient(180deg, var(--tint) 0%, #fff 100%); padding: clamp(44px, 6vw, 84px) 0 clamp(36px, 5vw, 70px); border-bottom: 1px solid var(--line); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.hero-meta { margin: 22px 0 0; font-size: 15px; color: var(--muted); max-width: 52ch; }
.hero-card { background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 22px 22px 16px; box-shadow: var(--shadow); }
.hero-card .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hero-card .tile { padding: 12px 12px 10px; }
.hero-card .tile-v { font-size: 26px; }
.phead { position: relative; overflow: hidden; padding: clamp(28px, 4vw, 52px) 0 clamp(26px, 3.5vw, 42px); background: var(--tint); border-bottom: 1px solid var(--line); }
.phead .wrap { position: relative; z-index: 1; }
.phead h1 { font-size: clamp(34px, 4.8vw, 58px); max-width: 20ch; margin-bottom: .3em; }
.phead .meta { color: var(--muted); font-size: 15.5px; }
.phead-art { position: absolute; right: 2%; bottom: 0; width: min(360px, 34vw); opacity: .5; }
.phead-art rect { fill: var(--teal-line); }
.phead-art path { fill: none; stroke: var(--teal); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 14px; padding: 0; font-size: 14.5px; color: var(--muted); }
.crumbs li { margin: 0; }
.crumbs li + li::before { content: '/'; margin-right: 8px; color: var(--line-2); }
.crumbs a { color: var(--muted); }

/* ---------- headline tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 22px; max-width: 920px; }
.tile { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px 14px; }
.tile p { margin: 0; }
.tile-k { font-size: 13.5px; font-weight: 600; color: var(--muted); }
.tile-v { font: 600 34px/1.15 var(--serif); color: var(--ink); margin: 4px 0 6px !important; letter-spacing: -.01em; }
.tile-c { font-size: 14px; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tiles-note { margin: 10px 0 0; }

/* ---------- direction badges ---------- */
.dir { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; line-height: 1.5; }
.dir-rising { background: var(--teal-soft); color: var(--teal-ink); }
.dir-falling { background: var(--amber-soft); color: var(--amber); }
.dir-steady { background: var(--tint-2); color: var(--ink-2); }
.dir-thin { background: #fff; color: var(--muted); border: 1px dashed var(--line-2); }

/* ---------- summaries ---------- */
.summary { list-style: none; padding: 0; margin: 0 0 16px; }
.summary li { position: relative; padding: 0 0 12px 26px; margin: 0 0 12px; border-bottom: 1px solid var(--line); }
.summary li::before { content: ''; position: absolute; left: 4px; top: .62em; width: 9px; height: 9px; border-radius: 2px; background: var(--teal); }
.summary li:last-child { border-bottom: 0; }
.fig { font-weight: 700; color: var(--ink); white-space: nowrap; }

/* ---------- charts ---------- */
.chart { margin: 0 0 26px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 12px 10px 6px; }
.chart svg { display: block; width: 100%; height: auto; }
.ch-grid { stroke: var(--line); stroke-width: 1; }
.ch-axis { stroke: var(--line-2); stroke-width: 1.5; }
.ch-tick { stroke: var(--line-2); }
.ch-y, .ch-x { fill: var(--muted); font: 500 13px var(--sans); }
.ch-area { fill: var(--teal-soft); opacity: .7; }
.ch-line { fill: none; stroke: var(--teal); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.ch-line2 { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-dasharray: 5 5; opacity: .65; }
.ch-dot { fill: var(--teal); stroke: #fff; stroke-width: 2.5; }
.ch-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13.5px; color: var(--muted); margin: 4px 8px 6px; }
.lg { display: inline-block; width: 22px; height: 0; border-top: 3px solid var(--teal); margin-left: 6px; }
.lg-1 { margin-left: 0; }
.lg-2 { border-top: 2px dashed var(--ink); opacity: .7; }
.spark { width: 120px; height: 34px; flex: none; }
.spark path { fill: none; stroke: var(--teal); stroke-width: 2; stroke-linejoin: round; }

/* ---------- tables ---------- */
.tbl-wrap { overflow-x: auto; margin: 0 0 22px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.tbl-wrap:focus-visible { outline: 3px solid var(--teal); }
table.data { width: 100%; border-collapse: collapse; font-size: 15px; }
table.data caption { text-align: left; padding: 14px 16px 10px; font-weight: 700; color: var(--ink); font-size: 15.5px; }
table.data th, table.data td { padding: 9px 14px; border-top: 1px solid var(--line); text-align: left; vertical-align: middle; }
table.data thead th { background: var(--tint); font-size: 13.5px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
table.data tbody th { font-weight: 600; min-width: 200px; }
table.data .num, table.data th.num { text-align: right; white-space: nowrap; }
table.data tbody tr:hover { background: #FAFCFC; }
table.data tbody tr.total th, table.data tbody tr.total td { font-weight: 700; background: var(--tint); }
.method table.data tbody th { min-width: 180px; }
details.more { margin: 8px 0 18px; }
details.more > summary { cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 18px; border: 1.5px solid var(--teal-ink); border-radius: 999px; color: var(--teal-ink); font-weight: 700; list-style: none; margin-bottom: 14px; }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::after { content: '+'; font-size: 20px; line-height: 1; }
details.more[open] > summary::after { content: '\00d7'; }

/* ---------- cards ---------- */
.means { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 14px; }
.mean { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 22px; }
.mean p { margin: 0; color: var(--ink-2); font-size: 16px; }
.mean-ico, .way-ico, .kin-ico { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--teal-soft); color: var(--teal-ink); margin-bottom: 14px; }
.mean-ico .ico, .way-ico .ico, .kin-ico .ico { width: 24px; height: 24px; }
.ways, .kin { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.way, .kin-card, .issue, .st-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 24px; text-decoration: none; color: var(--ink); transition: border-color .2s, box-shadow .3s var(--ease), transform .3s var(--ease); }
.way:hover, .kin-card:hover, .issue:hover, .st-card:hover { border-color: var(--teal-line); box-shadow: var(--shadow); transform: translateY(-2px); color: var(--ink); }
.way p, .kin-card p, .issue p { color: var(--ink-2); font-size: 16px; flex: 1; }
.issue { margin-bottom: 16px; }
.issue .eyebrow { margin-bottom: 6px; }
.go { font-weight: 700; color: var(--teal-ink); font-size: 15.5px; }
.panel { background: var(--tint); border: 1px solid var(--line); border-radius: var(--r); padding: 24px 26px; margin-bottom: 18px; }
.sec-tint .panel { background: #fff; }
.panel p:last-child, .panel ul:last-child { margin-bottom: 0; }
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; margin-bottom: 18px; }
.st-card { padding: 20px 22px; }
.st-card h3 { margin-bottom: 8px; }
.st-card p { margin: 0 0 6px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.st-card .big { font: 600 28px/1.1 var(--serif); }
.st-card .spark { margin: 2px 0 8px; }
.occ-list { list-style: none; padding: 0; margin: 0 0 18px; border-top: 1px solid var(--line); }
.occ-list li { margin: 0; border-bottom: 1px solid var(--line); }
.occ-list a { display: grid; grid-template-columns: minmax(0, 1fr) 120px 90px 90px 120px; gap: 14px; align-items: center; padding: 12px 6px; text-decoration: none; color: var(--ink); }
.occ-list a:hover { background: var(--tint); }
.occ-n { font-weight: 700; }
.occ-v, .occ-c { text-align: right; white-space: nowrap; }
.occ-list .dir { justify-self: start; }
.occ-block { margin-bottom: 36px; }
.occ-block > p { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.link-chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }
.link-chips li { margin: 0; }
.link-chips a { display: inline-flex; gap: 8px; align-items: center; min-height: 44px; padding: 8px 16px; border: 1.5px solid var(--line-2); border-radius: 999px; background: #fff; text-decoration: none; font-weight: 600; color: var(--ink); }
.link-chips a:hover { border-color: var(--teal); color: var(--teal-ink); }
.ticks { list-style: none; padding: 0; }
.ticks li { position: relative; padding-left: 28px; margin-bottom: 10px; }
.ticks li::before { content: ''; position: absolute; left: 2px; top: .5em; width: 14px; height: 8px; border-left: 2.5px solid var(--teal); border-bottom: 2.5px solid var(--teal); transform: rotate(-45deg); }
.ticks-no li::before { width: 14px; height: 0; border-left: 0; border-bottom: 2.5px solid var(--amber); transform: none; top: .8em; }
.cta-line { text-align: center; }
.cta-line p { margin-left: auto; margin-right: auto; }
.sponsor-line { margin-top: 26px; }
.brief-body h2 { font-size: 28px; margin-top: 1.4em; }
.brief-body h2:first-child { margin-top: 0; }
.brief-body ul { padding-left: 1.1em; }
.brief-body li { margin-bottom: .6em; }
.embed-demo { display: grid; gap: 16px; }

/* ---------- sources ---------- */
.sources { border-top: 1px solid var(--line); background: #fff; padding: 34px 0 40px; font-size: 15px; color: var(--ink-2); }
.sources p { max-width: 90ch; }

/* ---------- forms ---------- */
.form-panel { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: clamp(22px, 3vw, 30px); box-shadow: var(--shadow); }
.form-panel h2 { font-size: 26px; }
.segs-wrap { border: 0; padding: 0; margin: 0 0 18px; }
.segs-wrap legend { font-weight: 700; font-size: 15.5px; margin-bottom: 8px; padding: 0; }
.segs { display: flex; flex-wrap: wrap; gap: 8px; }
.segs input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segs label { display: inline-flex; align-items: center; min-height: 42px; padding: 8px 16px; border: 1.5px solid var(--line-2); border-radius: 999px; cursor: pointer; font-weight: 600; font-size: 15px; }
.segs input:checked + label { background: var(--ink); border-color: var(--ink); color: #fff; }
.segs input:focus-visible + label { outline: 3px solid var(--teal); outline-offset: 2px; }
.fld { display: block; margin-bottom: 16px; font-weight: 600; font-size: 15.5px; }
.fld input, .fld textarea, .fld select { display: block; width: 100%; margin-top: 6px; min-height: 48px; padding: 10px 13px; border: 1.5px solid var(--field); border-radius: 12px; font: 400 16.5px/1.5 var(--sans); color: var(--ink); background: #fff; }
.fld textarea { min-height: 112px; resize: vertical; }
.fld input:focus, .fld textarea:focus, .fld select:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--ring); }
.fld .opt { font-weight: 400; color: var(--muted); }
.fld-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; margin: 4px 0 16px; line-height: 1.45; }
.consent input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--teal); }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.msg { margin: 12px 0 0; font-weight: 600; font-size: 15.5px; min-height: 1.4em; }
.msg.ok { color: var(--ok); }
.msg.err { color: var(--err); }

/* ---------- FAQ and policies ---------- */
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative; font: 600 19px/1.35 var(--serif); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 6px; top: 16px; font: 400 28px var(--sans); color: var(--teal); }
.faq details[open] summary::after { content: '\00d7'; }
.faq details p { margin: 0 0 20px; color: var(--ink-2); max-width: 70ch; }
.policy { max-width: 74ch; }
.policy h2 { font-size: 25px; margin-top: 1.5em; }
.cq-policy-updated { color: var(--muted); font-size: 15px; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .hero-grid, .split-2, .split-top { grid-template-columns: minmax(0, 1fr); }
  .means { grid-template-columns: minmax(0, 1fr); }
  .occ-list a { grid-template-columns: minmax(0, 1fr) auto auto; }
  .occ-list .spark, .occ-list .dir { display: none; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  .tiles, .hero-card .tiles { grid-template-columns: minmax(0, 1fr); }
  .fld-2 { grid-template-columns: minmax(0, 1fr); }
  .phead-art { display: none; }
  table.data { font-size: 14px; }
  table.data th, table.data td { padding: 8px 10px; }
  table.data tbody th { min-width: 150px; }
  .occ-list a { grid-template-columns: minmax(0, 1fr) auto; }
  .occ-c { display: none; }
}
@media print {
  .sec-tint, .phead, .hero { background: #fff; }
  .chart, .tbl-wrap { break-inside: avoid; }
  details.more > summary { display: none; }
  details.more > * { display: block; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }