/* Brand marks, logo lockups and service language.
   Every mark is a <use> into the inline sprite: artwork colour follows
   `color`, and --mark-counter drives the counter-form (the hollow in the
   hexagon, the spark inside the marketing icon). Set --mark-counter to
   whatever sits behind the mark and the counter reads as a punched hole. */

/* ---- Logo lockups: set a height, the ratio supplies the width ---- */
.logo{display:block;width:auto;color:var(--ink)}
.logo-primary{aspect-ratio:2492.57/669.58}
.logo-wide{aspect-ratio:5430.2/681.94}
.logo-stacked{aspect-ratio:1376.46/1245.65}
.logo-symbol{aspect-ratio:115.01/132.8}
.logo.on-dark{color:var(--paper);--mark-counter:var(--ink)}

/* ---- The hexagon symbol, inline ---- */
.mark{width:.866em;height:1em;flex:none;display:inline-block;color:currentColor}
.mark-badge{display:inline-grid;place-items:center;width:44px;height:44px;
  background:var(--electric);border:var(--bd);border-radius:var(--r-md);
  box-shadow:var(--sh-1);color:var(--white);--mark-counter:var(--electric)}
.mark-badge .mark{width:20px;height:23px}

/* ---- Service icons — colour comes from the service scope on an ancestor ---- */
.svc-ic{display:block;width:auto;height:100%}
.svc-ic.r-av{aspect-ratio:26.15/26.37}
.svc-ic.r-web{aspect-ratio:60.35/38.85}
.svc-ic.r-design{aspect-ratio:24.3/24.23}
.svc-ic.r-mkt{aspect-ratio:23.46/23.46}

.s-design{--svc:var(--svc-design);--svc-deep:var(--svc-design-deep);--svc-tint:var(--svc-design-tint);--svc-wash:var(--svc-design-wash)}
.s-av{--svc:var(--svc-av);--svc-deep:var(--svc-av-deep);--svc-tint:var(--svc-av-tint);--svc-wash:var(--svc-av-wash)}
.s-mkt{--svc:var(--svc-mkt);--svc-deep:var(--svc-mkt-deep);--svc-tint:var(--svc-mkt-tint);--svc-wash:var(--svc-mkt-wash)}
.s-web{--svc:var(--svc-web);--svc-deep:var(--svc-web-deep);--svc-tint:var(--svc-web-tint);--svc-wash:var(--svc-web-wash)}

/* ---- Service tag — the smallest service-coloured unit ---- */
.svc-tag{display:inline-flex;align-items:center;gap:7px;font-size:.8125rem;font-weight:600;
  padding:5px 12px;border-radius:var(--r-pill);border:1.5px solid var(--svc-deep);
  background:var(--svc-tint);color:var(--svc-deep);--mark-counter:var(--svc-tint)}
.svc-tag .svc-ic{height:13px}
.svc-tag.solid{background:var(--svc);color:var(--white);border-color:var(--ink);--mark-counter:var(--svc)}

/* ---- Service glyph — icon in its own stamped tile ---- */
.svc-glyph{width:54px;height:54px;flex:none;border:var(--bd);border-radius:var(--r-md);
  background:var(--svc);box-shadow:var(--sh-1);display:grid;place-items:center;
  color:var(--white);--mark-counter:var(--svc)}
.svc-glyph .svc-ic{height:26px}
.on-ink .svc-glyph,.svc-glyph.on-ink{background:var(--paper);color:var(--ink);
  border-color:var(--paper);--mark-counter:var(--paper)}