/* ============================================================
   Grand Massif — Brand Motifs
   The two signature devices: the HEXAGON (from the mark) and the
   CIRCUIT TRACE (network of critical assets). Use sparingly and
   structurally — they frame content, they don't fill it.
   ============================================================ */
:root {
  /* Pointy-top hexagon — the brand's core geometric unit */
  --hex-clip: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); /* @kind other */

  /* Circuit-trace background tile (slate, low-opacity). Sits on Navy. */
  --circuit-tile: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'>\
<g fill='none' stroke='%23596977' stroke-width='1.3' opacity='0.5'>\
<path d='M0 40 H70 L90 60 V140 L110 160 H240'/>\
<path d='M40 0 V50 L60 70 H150'/>\
<path d='M240 90 H180 L160 110 V210'/>\
<path d='M0 190 H60 L80 170'/>\
<path d='M150 240 V180 L170 160'/>\
</g>\
<g fill='%23C94829' opacity='0.6'>\
<circle cx='70' cy='40' r='3.2'/><circle cx='150' cy='70' r='3.2'/>\
<circle cx='160' cy='110' r='3.2'/><circle cx='60' cy='190' r='3.2'/>\
</g>\
<g fill='%23596977' opacity='0.55'>\
<circle cx='110' cy='160' r='2.6'/><circle cx='150' cy='180' r='2.6'/>\
</g></svg>"); /* @kind other */
}

/* Hexagon utility — wrap an icon/number in the brand's badge shape.
   e.g. <span class="gm-hex" style="--hex-size:44px">01</span> */
.gm-hex {
  --hex-size: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--hex-size);
  height: calc(var(--hex-size) * 1.1547); /* keep regular hexagon proportions */
  clip-path: var(--hex-clip);
  background: var(--brand);
  color: var(--brand-contrast);
  font-family: var(--font-mono);
  font-weight: var(--fw-semibold);
  font-size: calc(var(--hex-size) * 0.34);
  line-height: 1;
  flex: none;
}
.gm-hex--slate { background: var(--slate-600); }
.gm-hex--ok    { background: var(--status-ok); }

/* Circuit backdrop — apply to a dark section for the signature texture. */
.gm-circuit {
  background-color: var(--navy-900);
  background-image: var(--circuit-tile);
  background-repeat: repeat;
}

/* Eyebrow — the wide-tracked uppercase label ("S O M O S") */
.gm-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-brand);
}