/* H01 Home hero. Positions from mockup/sections/home/00 (a 1440 x 940 stage), motion from home.css. */
.gm-hero { position: relative; }
.gm-hero__stage { position: relative; max-width: 1440px; height: 940px; margin: 0 auto; }
.gm-hero__art { position: absolute; left: 300px; top: 40px; width: 1140px; height: 642px; }
.gm-hero__svg { position: absolute; inset: 0; overflow: visible; }
.gm-hero__bwrap { position: absolute; inset: 0; }
.gm-hero__bwrap img { display: block; width: 1140px; height: 642px; object-fit: contain; }
.gm-hero__text { position: absolute; left: 80px; top: 56px; width: 700px; display: flex; flex-direction: column; gap: 28px; }
.gm-hero__h1 {
  margin: 0; max-width: 680px; font-family: var(--gm-font-body); font-size: 19px; line-height: 1.45;
  font-weight: 600; letter-spacing: 0; color: var(--gm-purple);
}
.gm-hero__display {
  margin: 0; font-family: var(--gm-font-head); font-weight: 700; font-size: 96px; line-height: 0.94;
  letter-spacing: -0.035em; color: var(--gm-ink);
}
.gm-hero__display span { color: var(--gm-purple); }
.gm-hero__line2 { font-family: var(--gm-font-head); font-weight: 500; font-size: 40px; line-height: 1.1; color: var(--gm-ink); }
.gm-hero__leadrow { display: flex; align-items: flex-start; gap: 20px; }
.gm-hero__lead { margin: 0; width: 520px; max-width: 100%; font-size: 20px; line-height: 1.55; color: var(--gm-muted); padding-top: 10px; }
.gm-hero__btns { margin-top: 4px; }
.gm-hero__ind {
  position: absolute; left: 800px; top: 716px; width: 640px; padding-right: 80px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px;
}
.gm-ind {
  display: flex; align-items: center; gap: 10px; padding: 12px 0; border-top: 1px solid var(--gm-rule);
  font-size: 12px; line-height: 20px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gm-ink); text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.gm-ind svg { transition: transform .15s ease; flex-shrink: 0; }
.gm-ind svg path { transition: stroke .15s ease; }
.gm-ind:hover, .gm-ind:focus-visible { color: var(--gm-ink); border-top-color: var(--gm-orange); box-shadow: inset 0 2px 0 var(--gm-orange); }
.gm-ind:hover svg, .gm-ind:focus-visible svg { transform: translateX(4px); }
.gm-ind:hover svg path, .gm-ind:focus-visible svg path { stroke: var(--gm-orange); }

/* Entrance and scroll parallax, copied from home.css. */
@keyframes gm-h-in-c { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes gm-h-in-b { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: none; } }
@keyframes gm-h-draw { from { stroke-dashoffset: 673; } to { stroke-dashoffset: 0; } }
@keyframes gm-h-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes gm-hp-c { to { transform: translateY(-140px); } }
@keyframes gm-hp-r { to { transform: translateY(-260px); } }
@keyframes gm-hp-b { to { transform: translateY(-50px); } }
.gm-h-circ, .gm-hp-c, .gm-hp-r { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .gm-h-circ { animation: gm-h-in-c 1s cubic-bezier(.2,.7,.2,1) .15s both, gm-h-breathe 9s ease-in-out 1.4s 2; }
  .gm-h-ring { stroke-dasharray: 673; animation: gm-h-draw 1.4s cubic-bezier(.4,0,.2,1) .6s both; }
  .gm-h-bld { animation: gm-h-in-b 1.1s cubic-bezier(.2,.7,.2,1) .3s both; }
  @supports (animation-timeline: scroll()) {
    .gm-hp-c { animation: gm-hp-c linear both; animation-timeline: scroll(root); animation-range: 0 900px; }
    .gm-hp-r { animation: gm-hp-r linear both; animation-timeline: scroll(root); animation-range: 0 900px; }
    .gm-hp-b { animation: gm-hp-b linear both; animation-timeline: scroll(root); animation-range: 0 900px; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .gm-ind, .gm-ind svg, .gm-ind svg path { transition: none; }
}

/* 1101 to 1439px: the 1440 stage is scaled to the screen (1 unit = 1/1440 of the width), so the art and the industry
   links are never cut off at laptop widths. Small text keeps a readable minimum. */
@media (min-width: 1101px) and (max-width: 1439px) {
  .gm-hero { --u: calc(100vw / 1440); }
  .gm-hero__stage { height: calc(940 * var(--u)); }
  .gm-hero__art { left: calc(300 * var(--u)); top: calc(40 * var(--u)); width: calc(1140 * var(--u)); height: calc(642 * var(--u)); }
  .gm-hero__bwrap img { width: 100%; height: 100%; }
  .gm-hero__text { left: calc(80 * var(--u)); top: calc(56 * var(--u)); width: calc(700 * var(--u)); gap: calc(28 * var(--u)); }
  .gm-hero__h1 { max-width: 100%; font-size: max(16px, calc(19 * var(--u))); }
  .gm-hero__display { font-size: calc(96 * var(--u)); }
  .gm-hero__line2 { font-size: calc(40 * var(--u)); }
  .gm-hero__lead { width: calc(520 * var(--u)); font-size: max(16px, calc(20 * var(--u))); }
  .gm-hero__ind { left: calc(800 * var(--u)); top: calc(716 * var(--u)); width: calc(640 * var(--u)); padding-right: calc(80 * var(--u)); column-gap: calc(32 * var(--u)); }
  .gm-ind { letter-spacing: 0.12em; }
}
/* Below 1100px the parts stack text first, then the art, then the links (Juli #233: the image must not lead on mobile). */
@media (max-width: 1100px) {
  .gm-hero__stage { height: auto; padding: 32px var(--gm-gutter-m) 56px; display: flex; flex-direction: column; gap: 32px; }
  .gm-hero__art, .gm-hero__text, .gm-hero__ind { position: static; width: auto; }
  .gm-hero__text { order: -1; }
  .gm-hero__art { position: relative; left: auto; top: auto; width: 100%; height: auto; aspect-ratio: 1140 / 642; }
  .gm-hero__svg { width: 100%; height: 100%; }
  .gm-hero__bwrap img { width: 100%; height: 100%; }
  .gm-hero__ind { padding-right: 0; }
  .gm-hero__display { font-size: 64px; }
  .gm-hero__line2 { font-size: 32px; }
}
@media (max-width: 640px) {
  .gm-hero__text { gap: 20px; }
  .gm-hero__h1 { font-size: 17px; }
  .gm-hero__display { font-size: 52px; line-height: 0.98; }
  .gm-hero__line2 { font-size: 26px; }
  .gm-hero__lead { font-size: 18px; padding-top: 0; }
  .gm-hero__ind { grid-template-columns: minmax(0, 1fr); }
  .gm-ind { min-height: 44px; }
}