/* HERO TUNING
   Typography: --hero-type, font-weight and letter-spacing below.
   Color: the five --hero-* colors; no external font or image is needed.
   Motion strength, proximity radius and mesh density live in hero.js CONFIG. */
.hero-system {
  --hero-type: clamp(80px, 8.3vw, 146px);
  --diagram-scale: 1.5; /* Optical size; it can extend behind the foreground title. */
  --hero-ink: #26382d;
  --hero-green: #405c46;
  --hero-mesh: #59715c;
  --hero-edge: #365941;
  --hero-axis: #b9c2af;
  --field-x: 72%;
  --field-y: 48%;
  --field-opacity: 0;
  position: relative;
  isolation: isolate;
  /* Share the .wrap width and responsive gutters with the other sections. */
  min-height: calc(100vh - 110px);
  min-height: calc(100svh - 110px);
  padding-block: 24px 28px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 24px;
  overflow: clip;
}
.hero-system #hero-field {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--field-opacity);
  background: radial-gradient(ellipse 370px 320px at var(--field-x) var(--field-y), #b4c5a524, transparent 75%);
}
.hero-system .hero-top { position: relative; z-index: 2; }
.hero-system .hero-top .eyebrow { font-size: 9px; letter-spacing: 1.9px; }
.hero-system .name-line { font-size: 11px; }
.hero-system .name-line>span { font-size: 9px; margin-left: 14px; }
.hero-system .hero-layout {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  gap: 0;
  margin: 0;
  min-height: 470px;
  align-items: center;
}
.hero-system .hero-title-block { position: relative; z-index: 2; padding-block: 26px; }
.hero-system h1 {
  margin: 0 0 36px;
  color: var(--hero-ink);
  font-size: var(--hero-type);
  font-weight: 600;
  line-height: .97;
  letter-spacing: -.071em;
  font-kerning: normal;
  white-space: nowrap;
}
.hero-system h1 .hero-word { display: block; width: fit-content; }
.hero-system h1 .hero-word+.hero-word { color: var(--hero-green); margin-top: 9px; }
.hero-system .hero-char { display: inline-block; transform-origin: 50% 75%; }
.hero-system .hero-statement {
  margin: 0;
  font-size: clamp(16px, 1.5vw, 23px);
  font-weight: 400;
  letter-spacing: -.7px;
  line-height: 1.8;
}
.hero-system .hero-translation {
  margin: 7px 0 31px;
  font-size: clamp(11px, .94vw, 14px);
  line-height: 1.7;
  color: #596851;
  letter-spacing: -.1px;
}
.hero-system .hero-title-block>.text-link {
  position: static;
  max-width: none;
  min-height: 44px;
  gap: 27px;
  font-size: 11px;
  line-height: 1.5;
}
.hero-system .hero-title-block>.text-link>span { font-size: 24px; }
.hero-system .hero-art {
  width: calc(100% + 36px);
  max-width: none;
  margin: 0 -24px 0 -12px;
  align-self: center;
  position: relative;
  background: none;
  border: 0;
  box-shadow: none;
}
.hero-system .hero-art>svg { display: block; width: 100%; height: auto; max-height: clamp(310px, calc(100svh - 350px), 620px); overflow: visible; transform: scale(var(--diagram-scale)); transform-origin: right center; }
.hero-system #surface-geometry { fill: none; }
.hero-system #surface-axes { fill: none; stroke: var(--hero-axis); stroke-width: .65; opacity: .64; }
.hero-system #surface-axes text { stroke: none; fill: #7c8b75; font: 9px Arial, sans-serif; letter-spacing: 1px; }
.hero-system .hero-art figcaption {
  margin: 24px 3.5% 0 7%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: #626f59;
  font-size: 8px;
  line-height: 1.8;
  letter-spacing: 1.1px;
}
.hero-system .hero-art figcaption>span:last-child { display: inline-flex; }
.hero-system .hero-status { align-items: center; gap: 7px; white-space: nowrap; }
.hero-system .hero-status i { height: 4px; width: 4px; border-radius: 50%; background: #8f9e80; }
.hero-system .hero-readout {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 17px 3.5% 0 7%;
  padding-top: 12px;
  border-top: 1px solid #d7ddcf99;
  font-family: Consolas, "Courier New", monospace;
  font-size: 8px;
  line-height: 1.7;
  letter-spacing: .3px;
  color: #626f59;
  font-variant-numeric: tabular-nums;
}
.hero-system .hero-readout b { font-weight: 400; margin-left: 9px; color: #52694f; }
.hero-system .hero-foot {
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin: 0;
}
.hero-system .hero-equation {
  display: flex;
  gap: clamp(14px, 2.3vw, 38px);
  align-items: center;
  color: #5f6f56;
  font-size: 8px;
  line-height: 1.8;
  letter-spacing: 1.5px;
}
.hero-system .hero-equation i { font-size: 15px; font-style: normal; color: #91a083; }
.hero-system .hero-foot>.text-link { font-size: 11px; gap: 21px; }
.hero-system [data-hero-react] { transform-origin: left center; }
@media (min-width: 1600px) {
  .hero-system { padding-top: 36px; padding-bottom: 35px; gap: 35px; }
  .hero-system .hero-layout { min-height: 540px; }
}
@media (max-width: 1100px) and (min-width: 761px) {
  .hero-system { --hero-type: 8.4vw; gap: 20px; }
  .hero-system .hero-layout { min-height: 420px; }
  .hero-system .hero-art { width: calc(100% + 25px); margin-left: -10px; margin-right: -15px; }
  .hero-system .hero-art figcaption { gap: 8px; font-size: 6px; }
  .hero-system .hero-readout { font-size: 7px; }
}
@media (max-width: 760px) {
  .hero-system {
    --hero-type: clamp(54px, 16.7vw, 110px);
    --diagram-scale: 1; /* Fit the complete surface on narrow touch screens. */
    min-height: calc(100svh - 84px);
    padding-block: 23px 24px;
    gap: 19px;
  }
  .hero-system .hero-top .eyebrow { font-size: 7px; letter-spacing: 1.2px; }
  .hero-system .name-line { font-size: 10px; }
  .hero-system .name-line>span { font-size: 7px; margin-left: 7px; letter-spacing: .4px; }
  .hero-system .hero-layout { grid-template-columns: minmax(0,1fr); min-height: 0; gap: 4px; }
  .hero-system .hero-title-block { padding: 12px 0 0; }
  .hero-system h1 { margin-bottom: 23px; letter-spacing: -.065em; line-height: .96; }
  .hero-system h1 .hero-word+.hero-word { margin-top: 5px; }
  .hero-system .hero-statement { font-size: 16px; letter-spacing: -.5px; }
  .hero-system .hero-translation { font-size: 10px; margin: 4px 0 10px; }
  .hero-system .hero-title-block>.text-link { font-size: 10px; min-height: 40px; gap: 20px; }
  .hero-system .hero-title-block>.text-link>span { font-size: 20px; }
  .hero-system .hero-art { margin: -6px -12px 0; width: calc(100% + 24px); }
  .hero-system .hero-art>svg { max-height: 350px; }
  .hero-system .hero-art figcaption { margin: -7px 7% 0; font-size: 6px; letter-spacing: .8px; }
  .hero-system .hero-readout { display: none; }
  .hero-system .hero-foot { padding-top: 19px; gap: 17px; align-items: flex-start; }
  .hero-system .hero-equation { flex-wrap: wrap; gap: 6px 11px; font-size: 6px; letter-spacing: .8px; }
  .hero-system .hero-equation i { font-size: 10px; }
  .hero-system .hero-foot>.text-link { flex-shrink: 0; font-size: 9px; gap: 10px; }
  .hero-system .hero-foot>.text-link>span { font-size: 17px; }
}
@media (min-width: 761px) and (max-height: 800px) {
  .hero-system { --hero-type: clamp(76px, min(8.3vw, 14.6vh), 122px); padding-top: 16px; padding-bottom: 20px; gap: 16px; }
  .hero-system .hero-layout { min-height: 0; }
  .hero-system .hero-art>svg { max-height: max(280px, calc(100svh - 330px)); }
  .hero-system .hero-title-block { padding-block: 15px; }
  .hero-system h1 { margin-bottom: 27px; }
}
@media (max-width: 760px) and (max-height: 760px) {
  .hero-system { --hero-type: clamp(52px, 15vw, 94px); gap: 15px; padding-top: 18px; padding-bottom: 20px; }
  .hero-system .hero-art>svg { max-height: 235px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-system .hero-char, .hero-system [data-hero-react] { transform: none!important; opacity: 1!important; }
  .hero-system #hero-field { display: none; }
}
@media print {
  .hero-system { display: block; min-height: 0; padding: 10mm 12mm; overflow: visible; }
  .hero-system .hero-layout { display: grid; grid-template-columns: 1fr 1fr; min-height: 0; gap: 10mm; margin: 10mm 0; }
  .hero-system h1 { font-size: 45pt; }
  .hero-system .hero-art { width: 100%; margin: 0; }
  .hero-system .hero-art>svg { transform: none; }
  .hero-system #hero-field, .hero-system .hero-readout, .hero-system .hero-status { display: none!important; }
  .hero-system .hero-char, .hero-system [data-hero-react] { transform: none!important; opacity: 1!important; }
  .hero-system .hero-foot { margin-top: 5mm; }
}