/* The sector line is readable at every size, using the wording on the name cards. */
.hero .hero-sector {
    width: fit-content;
    max-width: 100%;
    padding: 8px 12px;
    border: 1px solid #2b9abb45;
    border-radius: 4px;
    background: linear-gradient(100deg, #087da71c, #0b285122);
    color: #b9ecf5;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: .015em;
    text-transform: none;
    gap: 11px;
}
.hero .hero-sector .status-dot { width: 5px; height: 5px; }
.hero-description { max-width: 410px; }

/* A connected landscape makes the company's focus concrete. */
.food-system {
    margin-top: 55px;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid #2e5a873f;
    border-radius: 10px;
    background: radial-gradient(ellipse at 50% 5%, #0c438d30, transparent 70%), #06132c;
}
.food-system::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: linear-gradient(#619cdb06 1px, transparent 1px), linear-gradient(90deg, #619cdb06 1px, transparent 1px);
    background-size: 64px 64px;
}
.food-system-caption { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 26px 30px 0; }
.food-system-caption .section-label { color: #9db8d9; font-size: 9px; letter-spacing: .13em; }
.food-system-caption > span:last-child { color: #779ac5; font-size: 10px; }
.food-system-landscape { margin: 8px 20px -4px; }
.food-system-landscape svg { width: 100%; height: auto; }
.system-signal { stroke-dasharray: 55 945; animation: system-connect calc(12s / var(--motion-speed)) linear infinite; }
@keyframes system-connect { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
.food-system-stages { display: grid; grid-template-columns: repeat(3, 1fr); padding: 0 30px 30px; }
.food-system-stages > div { padding: 0 29px; border-right: 1px solid #35577950; }
.food-system-stages > div:first-child { padding-left: 0; }
.food-system-stages > div:last-child { border-right: 0; padding-right: 0; }
.system-stage-number { font-size: 9px; color: #5fcfe8; letter-spacing: .12em; }
.food-system-stages h3 { font-size: clamp(19px, 1.8vw, 25px); font-weight: 450; letter-spacing: -.035em; margin-top: 12px; }
.food-system-stages p { font-size: 12px; color: #8da9ce; line-height: 1.8; margin-top: 10px; max-width: 270px; }
.food-system-foundation { display: flex; gap: 11px; align-items: center; justify-content: center; padding: 18px 25px; border-top: 1px solid #365c823b; color: #8ab1d2; font-size: 11px; }

@media (max-width: 960px) {
    .food-system-caption { padding: 23px 23px 0; }
    .food-system-caption > span:last-child { display: none; }
    .food-system-stages { padding-inline: 23px; }
    .food-system-stages > div { padding-inline: 20px; }
    .food-system-stages h3 { font-size: 21px; }
    .food-system-stages p { font-size: 11px; }
}
@media (max-width: 640px) {
    .hero .hero-sector { font-size: 14px; padding: 7px 10px; letter-spacing: 0; gap: 10px; }
    .hero h1 { margin-top: 21px; }
    .food-system { margin-top: 36px; }
    .food-system-caption { padding: 22px 22px 0; }
    .food-system-caption .section-label { font-size: 8px; gap: 9px; line-height: 1.8; }
    .food-system-landscape { margin: 22px 0 5px; }
    .food-system-stages { grid-template-columns: 1fr; padding: 0 22px 10px; }
    .food-system-stages > div, .food-system-stages > div:first-child, .food-system-stages > div:last-child { padding: 22px 0; border-right: 0; border-bottom: 1px solid #35577950; }
    .food-system-stages > div:last-child { border-bottom: 0; }
    .food-system-stages h3 { margin-top: 7px; font-size: 23px; }
    .food-system-stages p { font-size: 12px; margin-top: 7px; max-width: 100%; }
    .food-system-foundation { justify-content: flex-start; padding-inline: 22px; line-height: 1.8; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { .system-signal { animation: none; } }