.hero {
    position: relative;
    overflow: hidden;
    background: var(--navy);
    color: var(--on-navy);
    border-bottom: var(--border-w) solid var(--navy-darker);
}
.hero-inner {
    position: relative;
    z-index: var(--z-base);
    max-width: var(--view);
    margin: 0 auto;
    padding: var(--space-seven) var(--space-six) 0;
}
.hero-fence .hero-inner { padding-top: var(--space-eight); padding-bottom: var(--space-nine); }
.hero-fence .hero-title { margin-top: var(--space-seven); }

.hero-cog {
    position: absolute;
    top: var(--cog-a-top);
    right: var(--cog-a-right);
    width: var(--cog-a);
    height: var(--cog-a-h);
    color: var(--cog-stroke);
    pointer-events: none;
    z-index: 0;
}
.hero-cog svg { display: block; width: var(--fill); height: var(--fill); }
.hero-cog2 {
    position: absolute;
    left: var(--cog-b-left);
    bottom: var(--cog-b-bottom);
    width: var(--cog-b);
    height: var(--cog-b);
    color: var(--cog-stroke);
    pointer-events: none;
}
.hero-cog2 svg { display: block; width: var(--fill); height: var(--fill); }

.hero-cog .gear, .hero-cog2 .gear { transform-box: view-box; }
.hero-cog .gear-a { transform-origin: var(--hub-a); animation: cog-a var(--spin-a) linear infinite; }
.hero-cog .gear-b { transform-origin: var(--hub-b); animation: cog-b var(--spin-b) linear infinite; }
.hero-cog .gear-c { transform-origin: var(--hub-c); animation: cog-c var(--spin-c) linear infinite; }
.hero-cog2 .gear-d { transform-origin: var(--hub-d); animation: cog-d var(--spin-d) linear infinite reverse; }
@keyframes cog-a { from { transform: rotate(0deg); } to { transform: rotate(var(--turn-full)); } }
@keyframes cog-b { from { transform: rotate(0deg); } to { transform: rotate(var(--turn-back)); } }
@keyframes cog-c { from { transform: rotate(0deg); } to { transform: rotate(var(--turn-full)); } }
@keyframes cog-d { from { transform: rotate(0deg); } to { transform: rotate(var(--turn-full)); } }

.hero-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-five);
}
.eyebrow {
    font-family: var(--font-ui);
    font-size: var(--fs-caption);
    font-weight: 600;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
}
.hero-eyebrow { color: var(--on-navy-muted); }
.hero-mark { height: var(--logo-hero); width: auto; opacity: 0.9; display: block; flex: none; }

.hero-greet {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--plate-w));
    gap: 0 var(--plate-gap);
    align-items: start;
    margin-top: var(--space-four);
}
.hero-greet-body { min-width: 0; }
.hero-greet .hero-title { margin-top: 0; }

.hero-title {
    font-family: var(--font-display);
    font-weight: normal;
    font-size: var(--fs-display-m);
    line-height: var(--lh-hero);
    letter-spacing: var(--tracking-display);
    color: var(--on-navy);
    margin-top: var(--space-four);
    max-width: var(--hero-measure);
}
.hl {
    background: var(--highlighter);
    color: var(--ink);
    padding: 0.02em 0.16em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.hero-meta {
    margin-top: var(--space-four);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-three);
    font-size: var(--fs-small);
    color: var(--on-navy-muted);
}
.hero-meta b { color: var(--on-navy); font-weight: 600; }
.hero-meta .mono { color: var(--on-navy); }
.dot-sep {
    width: var(--dot-sep);
    height: var(--dot-sep);
    border-radius: 50%;
    background: var(--on-navy-faint);
    flex: none;
}
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }

.plate {
    width: var(--fill);
    height: var(--plate-h);
    justify-self: end;
    visibility: hidden;
}
:root[data-art] .plate { visibility: visible; }
.plate canvas { display: block; width: var(--fill); height: var(--fill); }

@media (max-width: 58rem) {
    .hero-greet { grid-template-columns: minmax(0, 1fr); }
    .plate { display: none; }
}

.kpi-strip {
    margin-top: var(--space-six);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: var(--border-w) solid var(--on-navy-faint);
}
.kpi {
    padding: var(--space-five) var(--space-five) var(--space-six);
    border-right: var(--border-w) solid var(--on-navy-faint);
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.kpi:first-child { padding-left: 0; }
.kpi:last-child { border-right: none; }

.kpi-label {
    font-family: var(--font-ui);
    font-size: var(--fs-caption);
    font-weight: 600;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--on-navy-muted);
}
.kpi-value {
    display: flex;
    align-items: baseline;
    gap: 0.14em;
    margin-top: var(--space-four);
    min-height: var(--kpi-floor);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--kpi-size);
    line-height: var(--lh-flush);
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    color: var(--on-navy);
}
.kpi-value .unit {
    font-size: var(--fs-caption);
    color: var(--on-navy-muted);
    letter-spacing: 0;
    font-weight: 700;
}
.kpi-sub {
    margin-top: var(--space-three);
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    color: var(--on-navy-muted);
}
[data-theme="dark"] .hero {
    background: var(--bg-warm);
    border-bottom: var(--border-w) solid var(--border-hairline);
}
[data-theme="dark"] .hero-eyebrow { color: var(--text-muted); }
[data-theme="dark"] .hero-title { color: var(--text-primary); }
[data-theme="dark"] .hero-meta { color: var(--text-muted); }
[data-theme="dark"] .hero-meta b { color: var(--text-primary); }
[data-theme="dark"] .hero-meta .mono { color: var(--text-primary); }
[data-theme="dark"] .kpi-label { color: var(--text-muted); }
[data-theme="dark"] .kpi-value { color: var(--text-primary); }
[data-theme="dark"] .kpi-value .unit { color: var(--text-muted); }
[data-theme="dark"] .kpi-sub { color: var(--text-muted); }
[data-theme="dark"] .kpi-strip { border-top-color: var(--border-hairline); }
[data-theme="dark"] .kpi { border-right-color: var(--border-hairline); }

@media (prefers-reduced-motion: reduce) {
    .hero-cog .gear, .hero-cog2 .gear { animation: none; }
}