/* One campaign canvas, with a quiet hierarchy around the actual artwork. */
.home-overview { gap: 24px; }
.home-page-heading { padding: 0 2px; }
.home-page-heading > span { font-size: 14px; }
.home-command-center {
  border: 1px solid #284d3c;
  border-radius: 24px;
  background: #10261c;
  box-shadow: 0 16px 38px -24px #12352265, 0 1px 0 #fff;
  overflow: hidden;
}
.home-hero {
  --scene-x: 0px;
  --scene-y: 0px;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  min-height: 346px;
  border: 0;
  border-radius: 0;
  background: radial-gradient(ellipse at 75% 120%, #226c4938, transparent 63%), #0c2017;
}
.home-hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 680px;
  height: 470px;
  top: -210px;
  right: -60px;
  border-radius: 50%;
  background: radial-gradient(ellipse, #67e9a51b, transparent 68%);
  pointer-events: none;
  translate: calc(var(--scene-x) * 2) calc(var(--scene-y) * 2);
}
.home-hero::after { opacity: .5; }
.home-hero-copy { padding: 34px 38px 30px; }
.home-kicker { gap: 11px; font-size: 14px; letter-spacing: -.02em; color: #e4f4e9; font-weight: 550; }
.home-kicker > .home-brand-mark {
  display: grid;
  place-items: center;
  height: 35px;
  width: 35px;
  border: 1px solid #5b9f7a70;
  border-radius: 10px;
  background: linear-gradient(145deg, #365642, #1b3929);
  color: #b4f3cf;
  font-size: 19px;
}
.home-kicker > span:last-child { display: grid; gap: 4px; }
.home-kicker small { font-size: 8px; font-weight: 450; letter-spacing: .18em; color: #7f9e8b; }
.home-hero h1 {
  font-size: clamp(37px, 3.7vw, 49px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -.05em;
  max-width: 13ch;
  margin: 22px 0 17px;
}
.home-hero-meta { color: #a2bdac; gap: 12px; }
.home-hero-meta svg { color: #80ab92; }
.home-hero-actions { margin-top: 25px; gap: 11px; }
.home-hero-actions .primary {
  position: relative;
  overflow: hidden;
  background: linear-gradient(125deg, #72ecc0, #31db95);
  border-color: #70eab7;
  box-shadow: inset 0 1px 0 #c9ffe766, 0 4px 16px #00cc641a;
  min-height: 43px;
  padding-inline: 17px;
}
.home-hero-actions .primary::after {
  content: '';
  position: absolute;
  inset: -20px;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, #eaffec88 49%, transparent 63%);
  transform: translateX(-125%);
}
.home-hero-actions .home-hero-secondary { border-color: #5e826b45; background: #ffffff04; }
.home-hero-foot { margin-top: 20px; color: #84a28f; }
.home-small-avatars > span { border-color: #173120; background: #254532; }
.home-art-stage { min-height: 346px; margin-right: 28px; perspective: 1000px; }
.home-art-route { opacity: .46; inset: 15px 0 0; }
.home-route-trace { stroke-dasharray: .12 1; stroke-dashoffset: 1.1; opacity: 0; }
.home-art-card {
  width: 38%;
  max-width: 215px;
  padding: 7px;
  border-radius: 11px;
  border-color: #ecfff0b8;
  background: linear-gradient(145deg, #fff, #ecf6ea);
  box-shadow: 0 25px 38px -16px #0009, 0 2px 6px #0003;
}
.home-art-card .artwork { border-radius: 6px; }
.home-art-card > span { padding: 9px 3px 3px; font-size: 10px; }
.home-art-0 { --turn: -10deg; --depth: .5; left: 1%; top: 69px; }
.home-art-1 { --turn: -2deg; --depth: 1; left: 31%; top: 40px; }
.home-art-2 { --turn: 10deg; --depth: .65; left: 59%; top: 75px; }
.home-metrics {
  gap: 0;
  border-top: 1px solid #34553e6b;
  background: linear-gradient(180deg, #153123, #122c20);
  padding: 0 15px;
}
.home-metric {
  position: relative;
  gap: 12px;
  padding: 21px 22px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #f1fff5;
  box-shadow: none;
}
.home-metric + .home-metric::before {
  content: '';
  position: absolute;
  width: 1px;
  top: 22px;
  bottom: 22px;
  left: 0;
  background: #8fb79b24;
}
.home-metric-icon, .home-metric.neutral .home-metric-icon {
  width: 31px;
  height: 31px;
  margin-top: 4px;
  border-radius: 9px;
  background: #5bb68b16;
  color: #84ccab;
}
.home-metric.amber .home-metric-icon { background: #bdab6418; color: #d4be7d; }
.home-metric strong { font-size: 33px; font-weight: 450; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.home-metric > span > span { font-size: 11px; font-weight: 500; color: #d3e7db; }
.home-metric small { color: #86a391; font-size: 9px; }
.home-metric > svg { color: #769981; }
.home-metric:hover { background: #a9f6c709; box-shadow: none; }
.home-main-grid { gap: 24px; grid-template-columns: minmax(0, 1.95fr) minmax(300px, 1fr); }
.home-main-column, .home-side-column { gap: 26px; }
.home-panel { border-radius: 17px; box-shadow: 0 3px 14px -10px #0d382826; }
.home-priorities { background: #fffffc; border-color: #e2e6da; }
.home-section-heading { padding: 21px 23px; }
.home-section-heading h2 { font-weight: 550; letter-spacing: -.035em; }
.home-priority { padding: 17px 23px; gap: 17px; }
.home-priority .artwork { width: 64px; height: 64px; border-radius: 10px; }
.home-priority-copy > strong { font-size: 14px; font-weight: 580; }
.home-priority-copy > small { font-size: 9px; letter-spacing: .02em; }
.home-priority > svg { padding: 7px; width: 29px; height: 29px; border: 1px solid #e2eadd; border-radius: 50%; }
.home-content-grid { gap: 15px; }
.home-content-card { border-radius: 16px; border-color: #dce8de; box-shadow: 0 3px 8px #123b2104; }
.home-content-art { margin: 7px 7px 0; border-radius: 11px; }
.home-content-art > .artwork { border-radius: 11px; }
.home-content-art > span:not(.artwork) { top: 9px; left: 9px; background: #fafff5d9; }
.home-content-copy { padding: 15px; gap: 11px; }
.home-content-copy > strong { font-weight: 580; font-size: 14px; }
.home-caption { opacity: .9; }
.home-readiness-body { padding: 5px 23px 23px; gap: 20px; }
.home-progress-ring { box-shadow: 0 0 0 5px #f7faf6; }
.home-progress-ring strong { font-variant-numeric: tabular-nums; }
.home-readiness-legend { background: #fafcf8; padding: 18px 23px; }
.home-plan-button { border-radius: 8px; }
.home-quick-actions { padding-top: 23px; }

@media (prefers-reduced-motion: no-preference) {
  .motion-pending .home-hero-copy > *, .motion-pending .home-art-card, .motion-pending .home-metric,
  .home-overview .motion-waiting { opacity: 0; }
  .motion-active .home-hero::before { animation: overview-light-arrive 4.5s ease-out both; }
  .motion-active .home-route-trace { animation: overview-route-pass 3.6s .4s ease-in-out both; }
  .motion-active .home-hero-actions .primary::after { animation: overview-sheen 1.4s 1.1s ease-in-out both; }
  .home-art-card {
    translate: calc(var(--scene-x) * var(--depth, 1)) calc(var(--scene-y) * var(--depth, 1));
    transition: translate .6s cubic-bezier(.16, 1, .3, 1), transform .5s cubic-bezier(.16, 1, .3, 1), box-shadow .4s;
  }
  .home-art-card:hover { transform: translateY(-10px) rotate(0deg) scale(1.035); box-shadow: 0 30px 45px -15px #000a; }
  .home-content-card, .home-metric, .home-priority, .home-dated-post, .home-workstreams > button {
    transition: transform .35s var(--ease-out), box-shadow .35s, border-color .35s, background .25s;
  }
  .home-content-card:hover { transform: translateY(-6px); box-shadow: 0 16px 28px -14px #1a5a343b; border-color: #a0c9ac; }
  .home-content-art > .artwork { transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
  .home-content-card:hover .home-content-art > .artwork { transform: scale(1.035); }
  .home-overview button > svg:last-child, .home-content-date > svg:last-child, .home-art-card > span > svg { transition: translate .3s var(--ease-out), color .3s; }
  .home-overview button:hover > svg:last-child, .home-content-card:hover .home-content-date > svg:last-child,
  .home-art-card:hover > span > svg { translate: 3px 0; color: #0aa66c; }
  .home-hero-actions .primary:hover { box-shadow: 0 4px 24px #37e79d3b; }
  .home-hero-actions .primary:active, .home-content-card:active { scale: .985; }
}
@keyframes overview-light-arrive {
  0% { transform: translate(-110px, 90px) scale(.6); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: translate(0, 0) scale(1); opacity: .8; }
}
@keyframes overview-route-pass {
  0% { stroke-dashoffset: 1.1; opacity: 0; }
  15% { opacity: .9; }
  80% { opacity: .7; }
  100% { stroke-dashoffset: -.12; opacity: 0; }
}
@keyframes overview-sheen { to { transform: translateX(125%); } }

@media (max-width: 1120px) {
  .home-hero { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
  .home-hero-copy { padding: 30px; }
  .home-hero h1 { font-size: 44px; }
  .home-art-card { width: 38%; }
  .home-art-0 { left: 0; top: 83px; }
  .home-art-1 { left: 31%; top: 55px; }
  .home-art-2 { left: 61%; top: 86px; }
  .home-metrics { padding-inline: 8px; }
  .home-metric { padding: 20px 17px; gap: 10px; }
  .home-main-grid { gap: 20px; grid-template-columns: minmax(0, 1.8fr) minmax(280px, 1fr); }
  .home-section-heading { padding-inline: 20px; }
  .home-readiness-body { padding-inline: 20px; }
}
@media (max-width: 820px) {
  .home-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 324px; }
  .home-hero-copy { padding: 27px; }
  .home-hero h1 { font-size: 39px; }
  .home-art-stage { min-height: 324px; margin-right: 20px; }
  .home-art-card { width: 51%; }
  .home-art-0 { left: 0; top: 87px; }
  .home-art-1 { left: 35%; top: 55px; }
  .home-art-2 { display: none; }
  .home-metric { display: block; padding: 17px 15px; }
  .home-metric-icon { display: none; }
  .home-metric strong { font-size: 31px; }
  .home-metric small { font-size: 8px; }
  .home-main-grid { grid-template-columns: minmax(0, 1fr) minmax(260px, .8fr); }
  .home-priority { padding: 15px 18px; gap: 11px; }
  .home-priority .artwork { width: 45px; height: 53px; }
  .home-priority > svg { border: 0; padding: 0; width: 15px; }
  .home-content-copy { padding: 12px; }
  .home-content-copy > strong { font-size: 12px; }
}
@media (max-width: 640px) {
  .home-overview { gap: 19px; }
  .home-page-heading > span { font-size: 12px; }
  .home-command-center { border-radius: 19px; }
  .home-hero { grid-template-columns: 1fr; min-height: 0; }
  .home-hero-copy { padding: 23px 23px 13px; }
  .home-kicker { font-size: 12px; gap: 9px; }
  .home-kicker > .home-brand-mark { width: 29px; height: 29px; border-radius: 8px; font-size: 16px; }
  .home-kicker small { font-size: 7px; letter-spacing: .16em; }
  .home-hero h1 { font-size: 37px; max-width: 14ch; margin: 18px 0 15px; }
  .home-hero-meta { font-size: 9px; gap: 9px; }
  .home-hero-actions { margin-top: 18px; gap: 8px; }
  .home-hero-actions .primary { min-height: 39px; padding-inline: 12px; }
  .home-hero-actions .button { font-size: 10px; }
  .home-art-stage { min-height: 190px; margin: 0 22px 13px; }
  .home-art-card { width: 36%; max-width: 153px; padding: 4px; border-radius: 8px; }
  .home-art-0 { left: 0; top: 35px; }
  .home-art-1 { left: 31%; top: 14px; }
  .home-art-2 { display: block; left: 61%; top: 39px; }
  .home-art-card > span { font-size: 8px; padding: 6px 2px 2px; }
  .home-metrics { padding: 0 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-metric { padding: 15px 12px; display: flex; align-items: center; gap: 11px; }
  .home-metric > span:nth-child(2) { gap: 4px; }
  .home-metric strong { font-size: 29px; }
  .home-metric > span > span { font-size: 10px; }
  .home-metric small { display: none; }
  .home-metric + .home-metric::before { top: 18px; bottom: 18px; }
  .home-metric:nth-child(3)::before { display: none; }
  .home-metric:nth-child(n+3) { border-top: 1px solid #7baf8d24; }
  .home-main-grid { grid-template-columns: 1fr; gap: 21px; }
  .home-main-column, .home-side-column { gap: 22px; }
  .home-priority { padding: 15px 18px; gap: 14px; }
  .home-priority .artwork { width: 54px; height: 57px; }
  .home-priority-copy > span { font-size: 10px; }
  .home-content-grid { gap: 10px; }
  .home-content-copy { padding: 12px; }
  .home-content-copy > strong { font-size: 13px; }
  .home-readiness-body { padding: 3px 23px 23px; gap: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-overview .motion-waiting, .motion-pending .home-hero-copy > *,
  .motion-pending .home-art-card, .motion-pending .home-metric { opacity: 1; }
  .home-art-card { translate: none; }
  .home-art-card:hover { transform: rotate(var(--turn)); }
  .home-content-card:hover, .home-content-card:hover .artwork { transform: none; }
}
@media print {
  .home-overview .motion-waiting { opacity: 1 !important; }
}