/* ---- Amplify theme (authoritative tokens from amplify-html-theme) ---- */
@font-face {
  font-family: "Inter";
  src: url("./inter-var-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
}

:root {
  color-scheme: light;
  --amp-orange: #ff6602;
  --amp-orange-soft: #fbb181;
  --amp-orange-deep: #d45400;
  --amp-blue: #2d4de3;
  --amp-logo-blue: #1483c4;
  --amp-bg: #e9e8e2;
  --amp-surface: #ffffff;
  --amp-ink: #000000;
  --amp-body: #666666;
  --amp-muted: #8f8f8f;
  --amp-line: #e2e2e2;
  --amp-radius-card: 20px;
  --amp-radius-button: 8px;
  /* Two shadows, used the way the main site uses them: white panels sit almost
     flat on the warm background, dark panels float well above it. */
  --amp-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  --amp-shadow-float: 0 18px 40px rgba(0, 0, 0, 0.18);
  --amp-font: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --header-h: 66px;
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  scroll-behavior: smooth;
  font-synthesis: none;
}

body {
  min-height: 100vh;
  margin: 0;
  background: var(--amp-bg);
  color: var(--amp-body);
  font-family: var(--amp-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-optical-sizing: auto;
}

h1, h2, h3, h4, h5, h6, p { margin-top: 0; }
h1, h2, h3, h4, h5, h6 { color: var(--amp-ink); }
/* The main site sets letter-spacing: normal on every heading class deliberately —
   it is a noticeably looser, lighter voice than tightened display type. Negative
   tracking is kept only for large standalone numerals, where it earns its place. */
h1, h2, h3 { font-weight: 600; letter-spacing: normal; }
/* Stops display headings breaking one or two words onto a final line — without it
   the hero reads "…in real / operations". */
h1, h2, .hero__lead, .closing p { text-wrap: balance; }
h4, h5, h6 { font-weight: 500; line-height: 1.4; }
strong, b { color: inherit; font-weight: 600; }

a {
  color: var(--amp-blue);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover { text-decoration: underline; }
::selection { background: var(--amp-orange-soft); color: var(--amp-ink); }

/* Matches the main site's Container: 1440px outer bound with 25px gutters, so the
   content is close to full-bleed on a desktop rather than a narrow column. Long
   copy is held to a readable measure per block instead of by the shell. */
.amp-shell {
  width: min(100% - 50px, 1390px);
  margin-inline: auto;
}
@media (max-width: 1023px) {
  .amp-shell { width: min(100% - 48px, 1390px); }
}
@media (max-width: 639px) {
  .amp-shell { width: min(100% - 20px, 1390px); }
}

.amp-eyebrow {
  margin-bottom: 0.75rem;
  color: var(--amp-orange);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.amp-accent { color: var(--amp-orange); }

/* Button metrics copied from the site's Button component: 38px minimum height,
   14px semibold label, 8px radius. The page previously used a chunkier 46px
   button that read as a different design system. */
.amp-btn {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.25rem;
  border: 1px solid var(--amp-orange);
  border-radius: var(--amp-radius-button);
  background: var(--amp-orange);
  color: #ffffff;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.6;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease;
}
.amp-btn:hover {
  border-color: var(--amp-orange-deep);
  background: var(--amp-orange-deep);
  text-decoration: none;
}
.amp-btn--secondary { background: var(--amp-surface); color: var(--amp-orange); }
.amp-btn--secondary:hover { color: #ffffff; }

/* The site focuses in orange with a 2px ring and 2px offset, not blue. */
.amp-btn:focus-visible,
a:focus-visible,
summary:focus-visible,
button:focus-visible {
  outline: 2px solid var(--amp-orange);
  outline-offset: 2px;
}

/* ---- Page furniture ---- */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 0.75rem 1rem;
  background: var(--amp-surface);
  border-radius: var(--amp-radius-button);
}
.skip:focus { left: 1rem; top: 1rem; z-index: 60; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 0.75rem 0;
  background: color-mix(in srgb, var(--amp-bg) 86%, white);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--amp-line);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.site-header img { display: block; width: 142px; height: auto; }
.site-header nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  font-size: 0.9rem;
  font-weight: 500;
}
.site-header nav a { color: var(--amp-ink); text-decoration: none; }
.site-header nav a:hover { color: var(--amp-orange); text-decoration: none; }

/* ---- Hero ----
   One centred white panel, which is the shape the site uses for a hero with no
   photograph. The previous layout was a 1.5fr/0.5fr split with the text on the
   left and a short ink panel bottom-right, which left most of the upper right of
   a desktop viewport empty. */
.hero { padding: clamp(1.25rem, 2vw, 1.5rem) 0 0; }
.hero__panel {
  padding: clamp(2.5rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 3rem);
  border-radius: var(--amp-radius-card);
  background: var(--amp-surface);
  box-shadow: var(--amp-shadow);
  text-align: center;
}
.hero h1 {
  max-width: 26ch;
  margin-inline: auto;
  margin-bottom: 1.5rem;
  font-size: clamp(2.25rem, 3.7vw, 3.25rem);
  line-height: 1.25;
}
/* Subhead then body, weighted the way the site's hero is: an ink-coloured
   statement first, supporting detail under it in body grey. */
.hero__lead {
  max-width: 54ch;
  margin-inline: auto;
  margin-bottom: 1rem;
  color: var(--amp-ink);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.6;
}
.hero__body { max-width: 72ch; margin-inline: auto; margin-bottom: 0; }

/* Ink strip with orange numerals — the site's own way of carrying a headline
   figure. Orange on ink also has far more contrast than orange on a light wash. */
.glance {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  max-width: 620px;
  margin: clamp(2rem, 4vw, 2.75rem) auto 0;
  overflow: hidden;
  border-radius: var(--amp-radius-button);
  background: var(--amp-ink);
  box-shadow: var(--amp-shadow-float);
}
.glance div {
  display: flex;
  flex-direction: column;
  padding: 1.35rem 1.25rem;
}
.glance div + div { border-left: 1px solid rgba(255, 255, 255, 0.18); }
.glance dt { order: 2; color: rgba(255, 255, 255, 0.78); font-size: 0.875rem; line-height: 1.4; }
.glance dd {
  order: 1;
  margin: 0 0 0.3rem;
  color: var(--amp-orange);
  font-size: 3rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
}
@media (max-width: 460px) {
  .glance div + div { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.18); }
}

/* ---- Library intro ----
   In a white panel, because the site puts essentially all of its body copy on a
   raised white surface and almost none directly on the warm background. */
.intro { padding: clamp(1.25rem, 2vw, 1.5rem) 0 0; scroll-margin-top: calc(var(--header-h) + 68px); }
/* Explanation on the left, the six jobs on the right — the site's indexed-feature
   panel. Two columns is also what makes the six items land as a clean 2x3 instead
   of a ragged 4+2 across the full width. */
.intro__panel {
  display: grid;
  gap: clamp(1.75rem, 3vw, 3rem);
  padding: clamp(2rem, 4vw, 3rem);
  border-radius: var(--amp-radius-card);
  background: var(--amp-surface);
  box-shadow: var(--amp-shadow);
}
@media (min-width: 1024px) {
  .intro__panel { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start; }
}
.intro__head { max-width: 62ch; margin-bottom: 0; }
.intro__head h2 {
  margin-bottom: 0.75rem;
  font-size: 1.75rem;
  line-height: 1.3;
}
/* The site's signature heading device: the first line in orange, the rest in ink. */
.intro__head h2 .amp-accent { display: block; }

/* Inside the white intro panel these are hairline-separated rows rather than
   nested white cards, which is how the site lists indexed features on a panel. */
.patterns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 0 clamp(1.5rem, 3vw, 2.5rem);
}
.pattern-link {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.35rem 0;
  border-top: 1px solid var(--amp-line);
  color: var(--amp-ink);
  text-decoration: none;
  transition: color 160ms ease;
}
.pattern-link:hover { color: var(--amp-orange); text-decoration: none; }
.pattern-link:hover span { color: var(--amp-body); }
.pattern-link svg { width: 24px; height: 24px; color: var(--amp-orange); }
.pattern-link b { font-size: 1.125rem; }
.pattern-link span { color: var(--amp-body); font-size: 0.9375rem; line-height: 1.55; }
.pattern-link em {
  margin-top: auto;
  color: var(--amp-muted);
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* ---- Sticky control bar: view switch + sector filter ---- */
.controls {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  margin: clamp(2.25rem, 5vw, 3.25rem) 0 0;
  padding: 0.8rem 0;
  background: color-mix(in srgb, var(--amp-bg) 86%, white);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--amp-line);
}
.controls__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 1.5rem;
}
/* The groups are self-describing on screen; keeping their labels for assistive
   technology only is what lets the bar stay one row deep at 1200px. */
.controls__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.controls__group + .controls__group { padding-left: 1.5rem; border-left: 1px solid var(--amp-line); }
.switch {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--amp-line);
  border-radius: 999px;
  background: var(--amp-surface);
}
.switch button {
  padding: 0.4rem 1.1rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--amp-body);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}
.switch button:hover { color: var(--amp-ink); }
.switch button[aria-pressed="true"] { background: var(--amp-ink); color: #ffffff; }

.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.filters button {
  padding: 0.34rem 0.72rem;
  font-size: 0.8125rem;
  border: 1px solid var(--amp-line);
  border-radius: 999px;
  background: var(--amp-surface);
  color: var(--amp-body);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease;
}
.filters button:hover { border-color: var(--amp-orange); color: var(--amp-ink); }
.filters button[aria-pressed="true"] {
  border-color: var(--amp-ink);
  background: var(--amp-ink);
  color: #ffffff;
}
.controls__group[hidden] { display: none; }

.ledger {
  max-width: 92ch;
  margin: 1.1rem 0 0;
  padding-left: 0.9rem;
  border-left: 3px solid var(--amp-orange);
  color: var(--amp-body);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* ---- Group headers (dark banner, optional photograph) ---- */
.group { scroll-margin-top: calc(var(--header-h) + 68px); }
.group + .group { margin-top: clamp(2.5rem, 6vw, 4rem); }
.group__banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: clamp(2rem, 5vw, 3rem) 0 clamp(1.5rem, 3vw, 2rem);
  padding: clamp(1.85rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem);
  border-radius: var(--amp-radius-card);
  background: var(--amp-ink);
  /* The site's dark bands float well clear of the background; without this they
     read as flat blocks pasted onto the page. */
  box-shadow: var(--amp-shadow-float);
  color: #ffffff;
}
/* The photograph is optional: if ./img/<name>.webp is absent the gradient stands
   on its own, so the page never depends on the imagery being present. */
.group__banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--banner-image, none);
  background-size: cover;
  background-position: center 40%;
  opacity: 0.55;
}
.group__banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.86) 42%, rgba(0, 0, 0, 0.5) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.6) 100%);
}
.group__banner .amp-eyebrow { margin-bottom: 0.6rem; }
.group__text { position: relative; max-width: 62ch; }
/* The site's dark showcase band tops out near 2rem for a section heading; 2.75rem
   was larger than anything on amplify360.ai. */
.group__banner h2 {
  margin-bottom: 0.7rem;
  color: #ffffff;
  font-size: clamp(1.75rem, 2.8vw, 2.125rem);
  line-height: 1.3;
}
.group__banner p { margin-bottom: 0; color: rgba(255, 255, 255, 0.82); font-size: 1.0625rem; line-height: 1.6; }
.group__glyph {
  position: absolute;
  right: clamp(-1rem, 1vw, 1.25rem);
  bottom: -2.25rem;
  z-index: 0;
  width: clamp(140px, 17vw, 230px);
  height: auto;
  color: var(--amp-orange);
  opacity: 0.42;
  pointer-events: none;
}

/* ---- Cards ---- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  align-items: stretch;
  gap: 1.25rem;
}

/* Borderless white on the warm background, which is how every card and tile on
   the site is built. Emphasis is carried by shadow and, when open, an orange ring
   drawn as a shadow so it costs no layout. */
/* Flex column all the way down so cards in a row share a height and their chip
   rows line up, rather than each card ending wherever its copy happens to stop. */
.card { display: flex; flex-direction: column; }
.card > details { display: flex; flex: 1; flex-direction: column; }

.card {
  background: var(--amp-surface);
  border-radius: var(--amp-radius-card);
  box-shadow: var(--amp-shadow);
  scroll-margin-top: calc(var(--header-h) + 68px);
  transition: box-shadow 160ms ease, transform 160ms ease;
}
.card:not(:has(> details[open])):hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px var(--amp-orange), 0 10px 26px rgba(0, 0, 0, 0.08);
}
.card > details > summary {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1.5rem 1.5rem 1.35rem;
  cursor: pointer;
  list-style: none;
}
.card > details > summary::-webkit-details-marker { display: none; }

.card__icon {
  display: flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.05rem;
  border-radius: 11px;
  background: color-mix(in srgb, var(--amp-orange) 12%, white);
  color: var(--amp-orange);
}
.card__icon svg { width: 22px; height: 22px; }

/* Absorbs the spare height so .card__meta ends up flush with the card's foot. */
.card hgroup { margin: 0 0 auto; }
.card h3 {
  margin-bottom: 0.55rem;
  font-size: 1.125rem;
  line-height: 1.5;
}
.card__summary { margin: 0; font-size: 0.9375rem; line-height: 1.6; }
.card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin: 1.15rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--amp-line);
}
.chip {
  padding: 0.22rem 0.65rem;
  border: 1px solid var(--amp-line);
  border-radius: 999px;
  color: var(--amp-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.card__more {
  margin-left: auto;
  color: var(--amp-orange);
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
}
.card__more::after { content: " \2192"; }
details[open] .card__more--closed { display: none; }
details:not([open]) .card__more--open { display: none; }
details[open] .card__more--open::after { content: " \2191"; }

/* An open card spans the row so the detail keeps a readable measure. */
.card:has(> details[open]) {
  grid-column: 1 / -1;
  box-shadow: 0 0 0 1px var(--amp-orange), 0 10px 30px rgba(0, 0, 0, 0.08);
}
.card:has(> details[open]) > details > summary { padding-bottom: 1.15rem; }
.card:has(> details[open]) .card__icon { margin-bottom: 0.9rem; }

.card__body {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding: 1.5rem 1.5rem 1.75rem;
  border-top: 1px solid var(--amp-line);
}
@media (min-width: 860px) {
  .card__body--split { grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); }
  .card:has(> details[open]) > details > summary { padding-right: 3rem; }
}
/* On a full-width desktop card the prose stops at its 74ch measure, so a 300px
   panel would sit a long way from it. A wider panel closes that gap. */
@media (min-width: 1200px) {
  .card__body--split { grid-template-columns: minmax(0, 1fr) minmax(320px, 380px); }
}
.card__narrative > * { max-width: 74ch; }
.card__narrative h4 {
  margin: 1.5rem 0 0.45rem;
  color: var(--amp-orange);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.card__narrative > h4:first-child { margin-top: 0; }
.card__narrative p { margin-bottom: 0; font-size: 0.9375rem; line-height: 1.72; }

.figures {
  align-self: start;
  padding: 1.35rem;
  border: 1px solid var(--amp-line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--amp-bg) 55%, white);
}
.figures__label {
  margin-bottom: 1rem;
  color: var(--amp-muted);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.figure { padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--amp-line); }
.figure:last-of-type { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.figure b {
  display: block;
  color: var(--amp-orange);
  font-size: clamp(2rem, 3.2vw, 2.625rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.figure span {
  display: block;
  margin-top: 0.3rem;
  color: var(--amp-ink);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.45;
}
.figures--scale .figure b { color: var(--amp-ink); }
/* A worded figure ("Days → minutes") needs a smaller size than a numeral to sit
   on one or two lines in a 300px column. */
.figure--text b { font-size: clamp(1.375rem, 2vw, 1.625rem); line-height: 1.2; }
.figures__note {
  margin: 1.15rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--amp-line);
  color: var(--amp-muted);
  font-size: 0.8125rem;
  line-height: 1.55;
}

/* ---- Closing + footer ---- */
.closing {
  margin: clamp(3rem, 7vw, 4.5rem) 0 0;
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 2.5rem);
  background: var(--amp-surface);
  border-radius: var(--amp-radius-card);
  box-shadow: var(--amp-shadow);
  text-align: center;
}
/* Statement-band scale and the orange-first-line heading, as on the site. */
.closing h2 {
  max-width: 30ch;
  margin-inline: auto;
  margin-bottom: 1.5rem;
  font-size: clamp(2.25rem, 3.7vw, 3.25rem);
  line-height: 1.3;
}
.closing h2 .amp-accent { display: block; }
.closing p { max-width: 68ch; margin-inline: auto; font-weight: 600; }
.closing__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 2rem; }

/* Footer follows the site's: a top hairline, ink-coloured links that go orange on
   hover, and the Business Science Corporation credit. */
.site-footer {
  margin-top: clamp(2rem, 5vw, 3rem);
  border-top: 1px solid var(--amp-line);
  padding: clamp(2rem, 5vw, 3rem) 0;
  color: var(--amp-body);
  font-size: 0.875rem;
}
.site-footer p { max-width: 88ch; margin-bottom: 0.75rem; }
.site-footer p:last-child { margin-bottom: 0; }
.site-footer a { color: var(--amp-ink); font-weight: 500; transition: color 160ms ease; }
.site-footer a:hover { color: var(--amp-orange); }

/* ---- Responsive ---- */
@media (max-width: 860px) {
  :root { --header-h: 64px; }
  /* Below this width the intro copy reaches across the banner, so the watermark
     would sit under the text instead of beside it. */
  .group__glyph { display: none; }
}
@media (max-width: 640px) {
  .amp-btn { width: 100%; }
  .site-header img { width: 122px; }
  .site-header nav { font-size: 0.8125rem; gap: 0.9rem; }
  /* One scrolling row rather than three wrapped ones — the bar stays pinned
     without eating a fifth of a phone viewport. */
  .controls__row { flex-wrap: nowrap; gap: 0.75rem; overflow-x: auto; scrollbar-width: none; }
  .controls__row::-webkit-scrollbar { display: none; }
  .controls__group { display: flex; flex: 0 0 auto; align-items: center; gap: 0.5rem; }
  .filters { flex-wrap: nowrap; }
  .filters button, .switch button { flex: 0 0 auto; }
  .controls__label { display: none; }
  .figures { padding: 1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* ---- Sector filtering + view switching ---- */
body[data-sector="mining"] .card:not([data-sector~="mining"]),
body[data-sector="building-materials"] .card:not([data-sector~="building-materials"]),
body[data-sector="manufacturing"] .card:not([data-sector~="manufacturing"]),
body[data-sector="logistics"] .card:not([data-sector~="logistics"]),
body[data-sector="healthcare"] .card:not([data-sector~="healthcare"]),
body[data-sector="financial-services"] .card:not([data-sector~="financial-services"]),
body[data-sector="professional-services"] .card:not([data-sector~="professional-services"]) {
  display: none;
}
.group--empty { display: none; }
body[data-view="industry"] .group--capability { display: none; }
body:not([data-view="industry"]) .group--industry { display: none; }

/* Hidden SVG sprite sheet. Was an inline style attribute; moved here so the
   CSP can drop 'unsafe-inline' from style-src. */
.sprite { position: absolute; }