/* AUTO-GENERATED from design-system/components.md. Do not edit by hand.
 * Regenerate: python tools/build-components-css.py
 * Pages must link tokens.css first, then this file. */

/* ---- 1. Utility bar ---- */
.utility-bar { background: var(--color-navy-950); color: var(--color-on-dark-muted); font-size: var(--text-xs); }
.utility-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); height: var(--utility-height); }
.utility-bar b { color: var(--color-teal-on-dark); font-weight: var(--weight-bold); letter-spacing: var(--tracking-eyebrow); font-size: var(--text-2xs); margin-right: var(--space-5); }
.utility-bar__link { color: var(--color-on-dark); font-weight: var(--weight-semibold); }
@media (max-width: 768px) { .utility-bar span { display: none; } }

/* ---- 2. Header ---- */
.site-header { background: var(--color-surface); border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: var(--z-header); }
.site-header__inner { display: flex; align-items: center; gap: var(--space-8); height: var(--header-height); }
.wordmark { font-family: var(--font-sans); font-weight: var(--weight-black); font-size: 1.375rem; letter-spacing: -0.02em; color: var(--color-heading); line-height: 1; }
.wordmark--on-dark { color: var(--color-on-dark); }
.main-nav { display: flex; gap: var(--space-8); margin-left: auto; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-heading); }
.main-nav a { padding-block: var(--space-2); border-bottom: 2px solid transparent; transition: color var(--duration) var(--ease); }
.main-nav a:hover { color: var(--color-brand-text); }
.main-nav a[aria-current="page"] { color: var(--color-brand-text); border-bottom-color: var(--color-brand-text); }
.site-header__actions { display: flex; align-items: center; gap: var(--space-3); }
.icon-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--color-heading); cursor: pointer; }
.icon-btn:hover { background: var(--color-surface-alt); }
.site-header__menu { display: none; }
@media (max-width: 1024px) { .main-nav { display: none; } .site-header__menu { display: inline-grid; } .site-header__actions { margin-left: auto; } }
/* Keep the primary CTA on small screens; the search icon folds into the menu instead. */
@media (max-width: 640px) {
  .site-header__inner { gap: var(--space-4); }
  .site-header__actions .icon-btn:not(.site-header__menu) { display: none; }
  .site-header__actions .btn { padding: 0 var(--space-3); }
}
/* In-page jumps (tab bar, table of contents, hero chips) land below the sticky
   chrome instead of under it. Pages with a .tabs bar (component 17) also clear
   that bar: 55px is its measured height, constant at 375/768/1440, because it
   comes from fixed padding and type, not from the viewport. */
html { scroll-padding-top: calc(var(--header-height) + var(--space-4)); }
html:has(.tabs) { scroll-padding-top: calc(var(--header-height) + 55px + var(--space-4)); }

/* ---- 3. Breadcrumb ---- */
.crumb-strip { background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding-block: var(--space-3); font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--color-heading); }
.breadcrumb a:hover { color: var(--color-brand-text); }
.breadcrumb [aria-hidden] { color: var(--color-subtle); }
.breadcrumb [aria-current] { color: var(--color-muted); }
.hero .breadcrumb { padding-block: 0 var(--space-5); color: var(--color-on-dark); }
.hero .breadcrumb [aria-current] { color: var(--color-on-dark-muted); }

/* ---- 4. Buttons & links ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 40px; padding: 0 var(--space-5); border: 1px solid transparent; border-radius: var(--radius-sm); font: var(--weight-semibold) var(--text-sm)/1 var(--font-sans); white-space: nowrap; cursor: pointer; transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease), color var(--duration) var(--ease); }
.btn--xs { height: 28px; padding: 0 var(--space-3); font-size: var(--text-xs); }
.btn--sm { height: 36px; padding: 0 var(--space-4); font-size: var(--text-xs); }
.btn--lg { height: 46px; padding: 0 var(--space-6); font-size: var(--text-body); }
.btn--block { width: 100%; }
.btn--primary { background: var(--color-brand); color: var(--color-on-dark); }
.btn--primary:hover { background: var(--color-brand-hover); }
.btn--primary:active { background: var(--color-brand-press); }
.btn--secondary { background: var(--color-surface); color: var(--color-heading); border-color: var(--color-border-strong); }
.btn--secondary:hover { border-color: var(--color-heading); }
.btn--on-dark { background: transparent; color: var(--color-on-dark); border-color: var(--color-on-dark-border); }
.btn--on-dark:hover { background: var(--color-glass); }
.link-more { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-heading); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.link-more:hover { color: var(--color-brand-text); }
.link-arrow { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-heading); }
.link-arrow i { font-style: normal; color: var(--color-brand-text); }
.link-inline { color: var(--color-link); }
.link-inline:hover { text-decoration: underline; }

/* ---- 5. Hero: dark, with a script tagline ---- */
.hero { position: relative; overflow: hidden; background: var(--gradient-hero), var(--hero-img, none) center right / cover no-repeat, var(--color-navy-950); color: var(--color-on-dark-muted); padding-block: var(--space-10); }
.hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--hero-panel-width); gap: var(--space-10); align-items: center; }
.hero__copy { max-width: 640px; }
.eyebrow { font-size: var(--text-2xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-teal-on-dark); margin-bottom: var(--space-3); }
.eyebrow--brand { color: var(--color-brand-text); }             /* on light surfaces: CTA band, section kicker */
.eyebrow--plain { text-transform: none; letter-spacing: 0; font-size: var(--text-body); font-weight: var(--weight-semibold); color: var(--color-on-dark); }  /* "Dubai Location Intelligence" */
.hero__title { font-family: var(--font-serif); font-size: var(--text-display); font-weight: var(--weight-bold); letter-spacing: var(--tracking-display); line-height: var(--leading-tight); color: var(--color-on-dark); }
.hero__title em { font-style: normal; color: var(--color-brand-on-dark); }
.hero__lede { margin-top: var(--space-4); font-size: var(--text-lede); color: var(--color-on-dark-muted); max-width: 560px; }
/* A row of hero buttons, e.g. a primary action beside an outline one (.btn--on-dark). */
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.hero__meta { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); margin-top: var(--space-5); font-size: var(--text-sm); color: var(--color-on-dark); }
.hero__meta span { display: inline-flex; align-items: center; gap: var(--space-2); }
.hero__meta svg { width: 16px; height: 16px; color: var(--color-on-dark-muted); }
.hero__tagline { position: absolute; top: 0; right: calc(var(--hero-panel-width) + var(--space-8)); margin: 0; font: var(--weight-bold) 1.75rem/1 var(--font-script); color: var(--color-on-dark); transform: rotate(-10deg); pointer-events: none; }
.hero__tagline::after { content: ""; display: block; width: 80%; height: 2px; margin-top: var(--space-2); background: var(--color-brand); border-radius: var(--radius-pill); transform: rotate(-6deg); }

/* Company-profile hero: logo tile + title block + action stack */
.hero__company { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--space-6); align-items: center; }
.hero__logo { width: 120px; height: 120px; display: grid; place-items: center; padding: var(--space-3); background: var(--color-surface); border-radius: var(--radius-md); }
.hero__logo img { max-height: 100%; object-fit: contain; }
.hero--company .hero__title { font-size: var(--text-h1); }

@media (max-width: 1024px) { .hero__tagline { display: none; } }
@media (max-width: 768px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__title { font-size: var(--text-h1); }
  .hero__company { grid-template-columns: 72px 1fr; }
  .hero__logo { width: 72px; height: 72px; }
}

/* --split: three columns (copy | tagline | panel), e.g. an article hero with a
   .cta-contact-card on the right. The tagline sits in .hero__middle as a normal
   column, vertically centred and narrow, with a hairline divider before the
   panel. The middle column is dropped below 1024px, and the panel stacks under
   the copy at 768px and below. */
.hero__grid--split { grid-template-columns: minmax(0, 1fr) auto minmax(0, 420px); gap: var(--space-8); align-items: stretch; }
.hero__grid--split > .hero__copy { align-self: center; }
.hero__middle { display: flex; align-items: center; padding-right: var(--space-8); border-right: 1px solid var(--color-on-dark-border); }
.hero__middle .hero__tagline { position: static; max-width: 170px; }
@media (max-width: 1024px) {
  .hero__grid--split { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); }
  .hero__middle { display: none; }
}
@media (max-width: 768px) { .hero__grid--split { grid-template-columns: 1fr; } }

/* ---- 6. Hero side panels ---- */
.icon-disc { display: inline-grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--radius-full); background: var(--color-surface-tint); color: var(--color-heading); }
.icon-disc svg { width: 22px; height: 22px; }
.icon-disc--sm { width: 36px; height: 36px; }
.icon-disc--sm svg { width: 18px; height: 18px; }
.icon-disc--lg { width: 52px; height: 52px; }
.icon-disc--outline { background: var(--color-surface); border: 1px solid var(--color-border); }
.icon-disc--white { background: var(--color-surface); color: var(--color-heading); }
/* Location-page hero rows use a rounded square rather than a circle. */
.icon-disc--square { border-radius: var(--radius-md); }
.icon-disc--brand { background: var(--color-brand-soft); color: var(--color-brand-text); }

.stat-list { display: grid; background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-2) var(--space-5); box-shadow: var(--shadow-panel); }
.stat-list__row { display: flex; align-items: center; gap: var(--space-4); padding-block: var(--space-4); }
.stat-list__row + .stat-list__row { border-top: 1px solid var(--color-border); }
.stat-list b { display: block; font-size: var(--text-stat-lg); font-weight: var(--weight-bold); color: var(--color-heading); line-height: 1.15; }
/* Scoped to the label text: a bare `.stat-list span` also matched the icon disc
   (itself a <span>) and turned its navy icon grey. */
.stat-list__row div > span { font-size: var(--text-sm); color: var(--color-muted); }
/* A stat-list can also hold a titled label/value summary: a .section-head, a
   .kv, then a button (e.g. a list page's "Market snapshot"). */
.stat-list > .section-head:first-child { margin-top: var(--space-4); margin-bottom: var(--space-4); }
.stat-list > .kv + .btn { margin-block: var(--space-4); }
/* A long list-product label (e.g. "Get a free list of Dubai MEP decision-makers")
   wraps instead of spilling out of the card: the same behaviour as
   .cta-contact-card .btn, keeping this button's own 40px minimum. */
.stat-list .btn { height: auto; min-height: 40px; padding-block: var(--space-3); white-space: normal; text-align: center; }
/* .kv's tinted label column is lighter than the frosted card (#F7F8FA on a
   measured #ECEEF0), so it reads as a white stripe. Inside the frosted card the
   rows are separated by their hairlines alone. .kv elsewhere keeps its tint. */
.stat-list--frosted .kv dt { background: transparent; }
/* Location pages: the card is frosted, so the skyline shows through behind it. */
.stat-list--frosted { background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(10px); }
@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) { .stat-list--frosted { background: var(--color-surface); } }

.stat-glass { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--color-glass); border: 1px solid var(--color-on-dark-border); border-radius: var(--radius-lg); backdrop-filter: blur(6px); }
.stat-glass__item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); }
.stat-glass .stat-glass__item:nth-child(odd) { border-right: 1px solid var(--color-on-dark-border); }
.stat-glass .stat-glass__item:nth-child(-n+2) { border-bottom: 1px solid var(--color-on-dark-border); }
.stat-glass__item b { display: block; font-size: var(--text-stat-lg); font-weight: var(--weight-bold); color: var(--color-on-dark); line-height: 1.1; }
/* Scoped to the label text: a bare `.stat-glass__item span` also matched the
   white icon disc, painting its icon white-on-white and un-centring it. */
.stat-glass__item div > span { display: block; font-size: var(--text-sm); color: var(--color-on-dark); }
.stat-glass__item small { display: block; font-size: var(--text-2xs); color: var(--color-on-dark-subtle); }

.stat-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-panel); }
.stat-split__chart { background: var(--color-surface); padding: var(--space-5); color: var(--color-muted); font-size: var(--text-xs); }
.stat-split__label { font-weight: var(--weight-semibold); color: var(--color-heading); }
.stat-split__big { display: block; font-family: var(--font-serif); font-size: var(--text-h2); color: var(--color-heading); margin-top: var(--space-2); }
.stat-split__dark { background: var(--color-navy-900); display: grid; }
.mini-bars { display: flex; align-items: flex-end; gap: var(--space-3); height: 90px; margin-top: var(--space-4); }
.mini-bars i { flex: 1; background: var(--color-data-2); border-radius: 2px 2px 0 0; }
.mini-bars i:last-child { background: var(--color-data-3); }
.mini-bars__axis { display: flex; justify-content: space-between; margin-top: var(--space-1); font-size: var(--text-2xs); }

.action-stack { display: grid; gap: var(--space-3); align-self: start; }
@media (max-width: 768px) { .stat-glass, .stat-split { grid-template-columns: 1fr; } .stat-glass .stat-glass__item { border-right: 0 !important; border-bottom: 1px solid var(--color-on-dark-border); } }

/* ---- 7. Hero search ---- */
.hero-search { display: flex; align-items: center; gap: var(--space-3); max-width: 560px; height: 50px; margin-top: var(--space-6); padding: 0 var(--space-1) 0 var(--space-4); background: var(--color-glass); border: 1px solid rgba(255, 255, 255, 0.35); border-radius: var(--radius-sm); }
.hero-search__icon { width: 18px; height: 18px; color: var(--color-on-dark); flex-shrink: 0; }
.hero-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: var(--text-sm); color: var(--color-on-dark); }
.hero-search input::placeholder { color: var(--color-on-dark-muted); }
.hero-search .btn { height: 40px; }

/* ---- 8. Stat strip ---- */
.stat-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.stat { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5) var(--space-6); }
.stat-strip:not(.stat-strip--cards) .stat + .stat { border-left: 1px solid var(--color-border); }
.stat__icon { width: 34px; height: 34px; flex-shrink: 0; color: var(--color-brand-text); }
.stat__icon svg { width: 100%; height: 100%; }
.stat__value { display: block; font-size: var(--text-stat); font-weight: var(--weight-bold); color: var(--color-heading); line-height: 1.1; }
.stat__value--serif { font-family: var(--font-serif); }
.stat__label { font-size: var(--text-sm); color: var(--color-muted); }
/* Growth figure under a stat, e.g. "+6.8% YoY". The arrow is CSS content with
   empty alt text, so screen readers announce only the figure. */
.stat__delta { display: block; margin-top: var(--space-1); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-success); }
.stat__delta::before { content: "\25B2\00a0" / ""; }
.stat-strip--cards { gap: var(--space-4); background: none; border: 0; margin-block: var(--space-6); }
.stat-strip--cards .stat { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-xs); }
@media (max-width: 768px) {
  .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-strip .stat { border-left: 0 !important; border-top: 1px solid var(--color-border); }
  .stat { padding: var(--space-4); gap: var(--space-3); }
  .stat__value { font-size: var(--text-h3); }
}

/* ---- 9. Panel, section head, layouts ---- */
.panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-xs); }
.panel--plain { background: none; border: 0; box-shadow: none; padding: 0; }
.panel--tint { background: var(--color-surface-tint); border-color: transparent; }
/* Vertical rhythm inside a panel, so pages never need inline margins:
   copy after an image, and an action after copy, a list or a chart. */
.panel > .img-ph + p { margin-block: var(--space-4); }
.panel > p + p { margin-top: var(--space-3); }
.panel > :is(p, ul, .bars, .kv, .grid) + :is(.btn, .link-more, .grid, .check-list, .newsletter) { margin-top: var(--space-4); }
.panel > .newsletter + p { margin-top: var(--space-3); }
/* An <svg> with no width/height attributes defaults to 300x150, so every icon
   wrapper sizes its own child. Wrappers set the box; the svg fills it. */
.section-head__icon > svg, .stat__icon > svg, .rank-tile__icon > svg, .sub-card__icon > svg,
.link-list__icon > svg, .info-card__icon > svg, .project-card__icon > svg, .icon-tile__icon > svg,
.hero-search__icon > svg { width: 100%; height: 100%; display: block; }
/* .icon-disc sizes its own svg (§6), so it is deliberately not in that list. */

.section-head { display: flex; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-5); }
.section-head__icon { width: 24px; height: 24px; flex-shrink: 0; color: var(--color-brand-text); margin-top: 1px; }
.section-head__title { font-size: var(--text-h3); font-weight: var(--weight-bold); color: var(--color-heading); }
.section-head__title--lg { font-family: var(--font-serif); font-size: 1.625rem; font-weight: var(--weight-semibold); }   /* "Browse all industries" */
.section-head__sub { font-size: var(--text-sm); color: var(--color-muted); margin-top: 2px; }
.section-head__kicker { font-size: var(--text-2xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-brand-text); }  /* "EXPLORE THE SECTOR" */
.section-head__more { margin-left: auto; }

.page { display: grid; gap: var(--space-8); padding-block: var(--space-8); }
/* Grid and flex children default to min-width:auto, so one wide child (a scrolling
   tile row, a table) stretches the whole track. Every layout child opts out. */
.page > *, .stack > *, .grid > *, .split > *, .layout-rail > *, .layout-filter > * { min-width: 0; }
/* Rail height mismatch (desktop only). Rails are align-items:start, so when the
   main column is taller the rail ends and the rest of its column is blank (up
   to 1,552px, measured). The rail column now stretches to the row's height,
   invisibly, so its LAST panel has room to travel and stays in view below the
   header. Only the last panel sticks: whole rails run 800-1,800px, taller than
   the viewport, and a sticky element taller than the viewport hides its bottom. */
@media (min-width: 1025px) {
  :is(.layout-rail, .layout-filter--rail) > .stack:last-child { align-self: stretch; }
  :is(.layout-rail, .layout-filter--rail) > .stack:last-child > :last-child { position: sticky; top: calc(var(--header-height) + var(--space-4)); }
}
.layout-rail { display: grid; grid-template-columns: minmax(0, 1fr) var(--sidebar-width); gap: var(--space-6); align-items: start; }
.layout-filter { display: grid; grid-template-columns: var(--filter-width) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
/* --rail: filters + results + right rail. Drops the rail under the results at
   1024, then stacks fully at 768 (see the media queries at the end of §9). */
.layout-filter--rail { grid-template-columns: var(--filter-width) minmax(0, 1fr) var(--sidebar-width); }
.stack { display: grid; gap: var(--space-6); align-content: start; }
.grid { display: grid; gap: var(--grid-gap); grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); min-width: 0; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
@media (max-width: 1024px) {
  .layout-rail, .layout-filter { grid-template-columns: 1fr; }
  .layout-filter--rail { grid-template-columns: var(--filter-width) minmax(0, 1fr); }
  .layout-filter--rail > :last-child { grid-column: 1 / -1; }
  /* Cap at two columns, never raise: a page's own --cols:1 must survive. The old
     rule forced --cols:2 with !important, which split single-column grids (rail
     forms, the GTM service rows) into two on tablets. The first declaration is a
     fallback for browsers that reject min() as a repeat() count. */
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-columns: repeat(min(var(--cols, 3), 2), minmax(0, 1fr)); }
}
@media (max-width: 768px) { .layout-filter--rail { grid-template-columns: 1fr; } }
/* .panel--lead: a rail panel that should come BEFORE the main column once the
   rail stacks below it (e.g. an article's table of contents). `order` only
   reorders siblings, so the rail's wrapper is unwrapped with display:contents,
   making its panels direct grid items. Scoped with :has() so rails without a
   lead panel are untouched; browsers without :has() keep the source order. */
@media (max-width: 1024px) {
  .layout-rail > .stack:has(> .panel--lead) { display: contents; }
  .layout-rail .panel--lead { order: -1; }
}
/* Tablet only: grids are at most two columns here, so a 3- or 5-item grid leaves
   its last card alone with half a row empty. Stretch that card across the row.
   An article card stretched that wide would carry a ~720x405 photo, so its image
   drops to 21:9. Not applied on phones, where every grid is one column already. */
@media (min-width: 641px) and (max-width: 1024px) {
  .grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .grid > .article-card:last-child:nth-child(odd) > :is(img, .img-ph) { aspect-ratio: 21 / 9; }
}
@media (max-width: 768px) { .split { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .grid { --cols: 1 !important; }
  .panel { padding: var(--space-4); }
  /* A section head's trailing control (a "View all" link, a sort select) must
     wrap onto its own line rather than being pinned right and overflowing. */
  .section-head { flex-wrap: wrap; }
  .section-head__more { margin-left: 0; width: 100%; }
  .sort { width: 100%; }
  .sort .select { flex: 1; min-width: 0; width: auto; }
}

/* ---- 10. Ranking shortcut tiles ---- */
.rank-tiles { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-3); }
.rank-tile { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: var(--text-xs); font-weight: var(--weight-semibold); line-height: 1.3; color: var(--color-heading); transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease); }
.rank-tile:hover { border-color: var(--color-brand-border); box-shadow: var(--shadow-card); }
.rank-tile__icon { width: 24px; height: 24px; flex-shrink: 0; color: var(--color-brand-text); }
.rank-tile--arrow { justify-content: space-between; }
/* The ranking currently being viewed. Red fill, matching the pagination
   current page and every other selected state in System B. */
.rank-tile[aria-current="page"] { background: var(--color-brand); border-color: var(--color-brand); color: var(--color-on-dark); }
.rank-tile[aria-current="page"] .rank-tile__icon, .rank-tile[aria-current="page"] i { color: var(--color-on-dark); }
.rank-tile i { font-style: normal; color: var(--color-brand-text); }
/* Below 1024px the tiles scroll sideways inside their panel. max-width keeps the
   scroller from setting the width of the grid track it sits in. */
@media (max-width: 1024px) { .rank-tiles { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 150px; max-width: 100%; min-width: 0; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } }

/* ---- 11. Cards ---- */
.ind-card, .sub-card, .photo-card, .icon-tile, .info-card, .news-card, .project-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); transition: box-shadow var(--duration) var(--ease), border-color var(--duration) var(--ease); }
:is(.ind-card, .sub-card, .photo-card, .icon-tile, .news-card, .project-card):hover { box-shadow: var(--shadow-card); border-color: var(--color-border-strong); }

.ind-card { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4); }
.ind-card__head { display: flex; gap: var(--space-4); align-items: center; }
.ind-card__title { font-size: var(--text-sm); font-weight: var(--weight-bold); }
.ind-card__meta { font-size: var(--text-xs); color: var(--color-muted); line-height: 1.45; }
.ind-card .link-arrow { margin-top: auto; }

.sub-card { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); }
.sub-card__icon { width: 30px; height: 30px; flex-shrink: 0; color: var(--color-brand-text); }
.sub-card__title { font-size: var(--text-sm); font-weight: var(--weight-bold); }
.sub-card__meta { font-size: var(--text-xs); color: var(--color-muted); line-height: 1.45; }
.sub-card > i { margin-left: auto; font-style: normal; color: var(--color-brand-text); }

.photo-card { overflow: hidden; display: flex; flex-direction: column; }
.photo-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.photo-card__body { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-2); padding: var(--space-3) var(--space-4) var(--space-4); }
.photo-card h3 { font-size: var(--text-sm); }
.photo-card p { font-size: var(--text-xs); color: var(--color-muted); }
.photo-card i { font-style: normal; color: var(--color-brand-text); }

.note-card { display: grid; gap: var(--space-2); }
.note-card__label { font-size: var(--text-h4); margin-bottom: var(--space-2); }
.note-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-sm); }
.note-card time { font-size: var(--text-xs); color: var(--color-muted); margin-top: var(--space-2); }
.note-card__title { font-family: var(--font-serif); font-size: 1.25rem; font-weight: var(--weight-semibold); line-height: 1.25; }
.note-card p { font-size: var(--text-sm); color: var(--color-muted); }
.note-card__foot { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--color-muted); margin-top: var(--space-2); }
.note-card__foot i { font-style: normal; color: var(--color-brand-text); }

.icon-tile { display: grid; justify-items: center; align-content: center; gap: var(--space-2); padding: var(--space-5) var(--space-3); text-align: center; font-size: var(--text-xs); color: var(--color-heading); }
.icon-tile__icon { width: 30px; height: 30px; color: var(--color-heading); }
.icon-tile small { color: var(--color-muted); }

.info-card { display: flex; gap: var(--space-3); padding: var(--space-4); font-size: var(--text-xs); }
.info-card__icon { width: 28px; height: 28px; flex-shrink: 0; color: var(--color-brand-text); }
.info-card h3 { font-size: var(--text-sm); }
.info-card p { color: var(--color-muted); margin-top: var(--space-2); }
.info-card--disc .info-card__icon { width: 52px; height: 52px; border-radius: var(--radius-full); background: var(--color-brand-soft); display: grid; place-items: center; padding: 13px; }

.news-card { display: grid; gap: var(--space-2); padding: var(--space-4); font-size: var(--text-xs); color: var(--color-muted); }
.news-card h3 { font-size: var(--text-sm); color: var(--color-heading); }
.news-card i { justify-self: end; font-style: normal; color: var(--color-brand-text); }

.project-card { display: grid; gap: var(--space-3); padding: var(--space-4); }
.project-card__head { display: flex; gap: var(--space-3); }
.project-card__icon { width: 28px; height: 28px; color: var(--color-heading); flex-shrink: 0; }
.project-card h3 { font-size: var(--text-xs); font-weight: var(--weight-bold); }
.project-card p { font-size: var(--text-xs); color: var(--color-muted); }
.project-card__facts { list-style: none; margin: 0; padding: var(--space-3) 0 0; border-top: 1px solid var(--color-border); display: grid; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-muted); }
.project-card__facts li { display: flex; justify-content: space-between; }
.project-card__facts i { font-style: normal; color: var(--color-brand-text); }

/* ---- 12. Link lists ---- */
.link-list { list-style: none; margin: 0; padding: 0; }
.link-list a { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-1); border-bottom: 1px solid var(--color-border); font-size: var(--text-sm); color: var(--color-heading); transition: color var(--duration-fast) var(--ease); }
.link-list li:last-child a { border-bottom: 0; }
.link-list a:hover { color: var(--color-brand-text); }
.link-list i { margin-left: auto; font-style: normal; color: var(--color-heading); }
.link-list__icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--color-heading); }
.link-list small { display: block; font-size: var(--text-xs); color: var(--color-muted); }
.link-list--connect a { padding-block: var(--space-3); }
.link-list--connect i, .link-list--boxed i, .link-list--brand i { color: var(--color-brand-text); }
/* --brand: plain rows with a red arrow, e.g. the cross-links in an About panel. */
.link-list--brand a { font-weight: var(--weight-semibold); }
.link-list--boxed { display: grid; gap: var(--space-2); }
.link-list--boxed a { border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); font-weight: var(--weight-semibold); }
.link-list--boxed li:last-child a { border-bottom: 1px solid var(--color-border); }
.media-list { display: grid; grid-template-columns: 130px 1fr; gap: var(--space-5); }
/* The image slot takes a real <img> or the .img-ph placeholder, styled identically. */
.media-list > :is(img, .img-ph) { width: 100%; height: 100%; min-height: 180px; object-fit: cover; border-radius: var(--radius-sm); }
.media-list__intro { font-size: var(--text-xs); color: var(--color-muted); margin-bottom: var(--space-2); }
@media (max-width: 640px) { .media-list { grid-template-columns: 1fr; } .media-list > img { aspect-ratio: 16/9; min-height: 0; } }

/* ---- 13. Bars, donut, key insights ---- */
.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.bars li { display: grid; grid-template-columns: minmax(130px, 1fr) 1.6fr 40px; align-items: center; gap: var(--space-4); font-size: var(--text-sm); color: var(--color-text); }
.bars--count li { grid-template-columns: minmax(90px, 0.8fr) 1.6fr 40px 40px; }
.bars__label { color: var(--color-text); line-height: 1.3; }
/* Optional second line under a bar label (e.g. the activities a license type covers).
   Lives inside the label cell, so the grid, the value column and the 640px rule are untouched. */
.bars__note { display: block; font-size: var(--text-2xs); color: var(--color-muted); line-height: 1.35; margin-top: 2px; }
.bars__track { height: 16px; background: var(--color-data-track); border-radius: 2px; overflow: hidden; }
.bars__track i { display: block; height: 100%; background: var(--color-data-2); }
.bars__val { font-weight: var(--weight-bold); color: var(--color-heading); text-align: right; font-size: var(--text-xs); }
.bars__count { font-size: var(--text-xs); color: var(--color-muted); text-align: right; }
.bars--thin .bars__track { height: 10px; }
.donut { width: 210px; aspect-ratio: 1; margin-inline: auto; display: grid; place-items: center; border-radius: var(--radius-full); background: var(--donut); }
.donut__hole { width: 60%; aspect-ratio: 1; display: grid; place-content: center; text-align: center; border-radius: var(--radius-full); background: var(--color-surface); }
.donut__hole b { font-size: var(--text-h2); font-weight: var(--weight-bold); color: var(--color-heading); line-height: 1; }
.donut__hole span { font-size: var(--text-xs); color: var(--color-muted); }
.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-text); }
.donut + .legend { margin-top: var(--space-5); }
.legend li { display: flex; align-items: center; gap: var(--space-3); }
.legend i { width: 9px; height: 9px; border-radius: var(--radius-full); flex-shrink: 0; }
.legend b { margin-left: auto; font-weight: var(--weight-semibold); color: var(--color-heading); }
.chart-split { display: grid; grid-template-columns: 1.1fr 1px 1fr; gap: var(--space-6); align-items: center; }
.chart-split > hr { width: 1px; height: 100%; margin: 0; border: 0; background: var(--color-border); }
.insights { background: var(--color-surface-tint); border-radius: var(--radius-md); padding: var(--space-5); font-size: var(--text-xs); color: var(--color-text); }
.insights h3 { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.insights ul { margin: var(--space-3) 0 0; padding-left: var(--space-4); display: grid; gap: var(--space-3); }
.insights li::marker { color: var(--color-data-2); }
@media (max-width: 768px) { .chart-split { grid-template-columns: 1fr; } .chart-split > hr { display: none; } }
@media (max-width: 640px) { .bars li, .bars--count li { grid-template-columns: 1fr 40px; } .bars__track { grid-column: 1 / -1; order: 3; } .bars__count { display: none; } }

/* ---- 14. Ranking table + tier/score badges ---- */
/* position:relative is load-bearing: without it a table wider than the wrapper
   still extends the root scroll area, so the whole page scrolls sideways on
   phones even though the wrapper scrolls. Verified at 375px. */
.table-wrap { position: relative; overflow-x: auto; }
/* .rank-table is also the general data table (e.g. a contact-data preview). Its
   # column is plain muted text unless a cell carries .rank--top. */
.rank-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.rank-table th { text-align: left; padding: var(--space-3) var(--space-4); background: var(--color-surface-tint); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-heading); white-space: nowrap; }
.rank-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.rank-table tbody tr:hover { background: var(--color-surface-alt); }
.rank { font-weight: var(--weight-bold); color: var(--color-muted); font-variant-numeric: tabular-nums; }
/* Top-three red comes from .rank--top (§30), set on the data, never from row
   position: position breaks on split tables and on page 2 of a paginated ranking. */
.cell-co { display: flex; align-items: center; gap: var(--space-3); font-weight: var(--weight-semibold); color: var(--color-heading); }
.cell-co:hover { color: var(--color-brand-text); }
/* Optional tagline under the company name, e.g. in a full ranking table. */
.cell-co small { display: block; font-size: var(--text-xs); font-weight: var(--weight-regular); color: var(--color-muted); }
.cell-muted { font-size: var(--text-xs); color: var(--color-muted); }
.row-arrow { color: var(--color-brand-text); font-weight: var(--weight-bold); }
/* Row actions: two small buttons stacked in one cell, e.g. "Company profile" and
   "Request contacts". Visible labels stay generic so the column stays narrow
   (167px); put the row's company name in an .sr-only span inside each link. */
.cell-actions { display: grid; gap: var(--space-2); }

/* Score badge: number with an optional thin bar */
.score { display: inline-grid; gap: var(--space-1); min-width: 64px; }
.score b { font-weight: var(--weight-bold); color: var(--color-heading); font-variant-numeric: tabular-nums; }
.score__bar { height: 4px; background: var(--color-data-track); border-radius: var(--radius-pill); overflow: hidden; }
.score__bar i { display: block; height: 100%; background: var(--color-brand); }
.score--pill { display: inline-flex; align-items: center; height: 26px; padding: 0 var(--space-3); border-radius: var(--radius-pill); background: var(--color-surface-tint); }

/* Tier badge */
.tier { display: inline-flex; align-items: center; height: 22px; padding: 0 var(--space-2); border-radius: var(--radius-xs); font-size: var(--text-2xs); font-weight: var(--weight-bold); letter-spacing: 0.02em; white-space: nowrap; }
.tier--1 { background: var(--color-tier-1-soft); color: var(--color-tier-1); }
.tier--2 { background: var(--color-tier-2-soft); color: var(--color-tier-2); }
.tier--3 { background: var(--color-tier-3-soft); color: var(--color-tier-3); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 768px) { .rank-table .hide-md { display: none; } }

/* ---- 15. Role tiles (Buyer landscape) ---- */
.role-intro { font-size: var(--text-sm); color: var(--color-muted); margin-bottom: var(--space-4); }
.role-intro b { display: block; color: var(--color-heading); font-weight: var(--weight-semibold); }
.role { padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); }
.role b { display: block; font-size: var(--text-xs); color: var(--color-heading); }
.role span { font-size: var(--text-2xs); color: var(--color-muted); }

/* ---- 16. FAQ ---- */
.faq { display: grid; gap: var(--space-2); }
.faq details { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); list-style: none; cursor: pointer; font-size: var(--text-sm); color: var(--color-heading); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); flex-shrink: 0; transition: transform var(--duration) var(--ease); }
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq__body { padding: 0 var(--space-4) var(--space-4); font-size: var(--text-sm); color: var(--color-text); }

/* ---- 17. Tabs ---- */
.tabs { background: var(--color-surface); border-bottom: 1px solid var(--color-border); position: sticky; top: var(--header-height); z-index: var(--z-sticky); }
.tabs__inner { display: flex; gap: var(--space-8); overflow-x: auto; scrollbar-width: none; }
.tabs a { padding-block: var(--space-4); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-heading); border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs a:hover { color: var(--color-brand-text); }
.tabs a[aria-current="true"] { color: var(--color-brand-text); border-bottom-color: var(--color-brand-text); font-weight: var(--weight-semibold); }

/* ---- 18. Badges, tags, monograms ---- */
.badge-dark { display: inline-flex; align-items: center; gap: var(--space-2); height: 24px; padding: 0 var(--space-3); border-radius: var(--radius-xs); background: rgba(255, 255, 255, 0.1); border: 1px solid var(--color-on-dark-border); color: var(--color-on-dark); font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: 0.06em; margin-bottom: var(--space-3); }
.badge-dark svg { width: 14px; height: 14px; color: var(--color-brand-on-dark); }
.badge { display: inline-flex; align-items: center; gap: var(--space-1); height: 22px; padding: 0 var(--space-2); border-radius: var(--radius-xs); font-size: var(--text-2xs); font-weight: var(--weight-semibold); }
.badge--success { background: var(--color-success-soft); color: var(--color-success); }
.badge--brand { background: var(--color-brand-soft); color: var(--color-brand-text); }
/* The "no" state beside a --success badge (e.g. "Not available" in a Mobile column).
   Text colour is --color-text, not --color-muted: muted on --color-surface-alt is
   below 4.5:1. The inset ring keeps the 22px height. Always carry the state in words. */
.badge--neutral { background: var(--color-surface-alt); color: var(--color-text); box-shadow: inset 0 0 0 1px var(--color-border); }
.tag-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tag { display: inline-flex; align-items: center; height: 24px; padding: 0 var(--space-2); background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: var(--radius-xs); font-size: var(--text-2xs); color: var(--color-text); }
.monogram { display: inline-grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: var(--radius-full); background: var(--color-surface-tint); color: var(--color-heading); font-size: 0.625rem; font-weight: var(--weight-bold); }
.monogram--lg { width: 44px; height: 44px; font-size: var(--text-xs); }

/* ---- 19. Forms ---- */
.field { display: grid; gap: var(--space-1); }
.field__label { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-heading); }
.input, .select { width: 100%; height: 40px; padding: 0 var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); font: inherit; font-size: var(--text-sm); color: var(--color-heading); }
.input::placeholder { color: var(--color-subtle); }
.select { appearance: none; padding-right: var(--space-8); background: var(--color-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%230B1A4A' stroke-width='1.8'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 12px center; }
.input:focus, .select:focus { outline: none; border-color: var(--color-brand); box-shadow: var(--ring-focus); }
.newsletter { display: flex; }
.newsletter .input { border-radius: var(--radius-sm) 0 0 var(--radius-sm); border-right: 0; height: 42px; }
.newsletter .btn { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; height: 42px; width: 46px; padding: 0; }
.sort { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-muted); }
.sort .select { width: auto; min-width: 150px; height: 36px; }

/* ---- 20. Key/value details + map card ---- */
.kv { display: grid; grid-template-columns: minmax(110px, 0.8fr) 1.2fr; margin: 0; font-size: var(--text-xs); }
.kv dt, .kv dd { margin: 0; padding: var(--space-2) var(--space-2); border-bottom: 1px solid var(--color-border); }
.kv dt { color: var(--color-text); background: var(--color-surface-alt); }
.kv dd { color: var(--color-heading); }
.map-card { display: grid; gap: var(--space-3); }
.map-card :is(img, .img-ph) { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--color-border); }
.map-card__addr { font-size: var(--text-xs); color: var(--color-text); }
.map-card__addr b { display: block; font-size: var(--text-sm); color: var(--color-heading); }

/* ---- 21. CTA band ---- */
.cta-band { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); padding: var(--space-8) var(--space-8); border-radius: var(--radius-lg); background: var(--cta-img, none) 70% bottom / auto 100% no-repeat, var(--gradient-cta-band); }
.cta-band__text { display: grid; gap: var(--space-2); max-width: 640px; font-size: var(--text-sm); color: var(--color-text); }
.cta-band__text .eyebrow { margin: 0; }
.cta-band__title { font-family: var(--font-serif); font-size: var(--text-h2); font-weight: var(--weight-bold); line-height: 1.15; }
.cta-band__action { display: grid; justify-items: center; gap: var(--space-2); flex-shrink: 0; }
.cta-band__action small { font-size: var(--text-2xs); color: var(--color-text); }
@media (max-width: 768px) { .cta-band { flex-direction: column; align-items: flex-start; padding: var(--space-6); background: var(--gradient-cta-band); } .cta-band__action { justify-items: start; } }
/* Location-first list names make CTA labels long; on phones the button takes the
   full width and may wrap instead of spilling past the viewport. */
@media (max-width: 640px) {
  .cta-band__action, .cta-band__action .btn { width: 100%; }
  .cta-band__action .btn { height: auto; min-height: 46px; padding-block: var(--space-3); white-space: normal; text-align: center; }
}

/* ---- 22. Footer ---- */
.site-footer { background: var(--color-navy-950); color: var(--color-on-dark-muted); font-size: var(--text-sm); padding-top: var(--space-12); }
.site-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.5fr; gap: var(--space-8); padding-bottom: var(--space-10); }
.site-footer h3 { font-size: var(--text-sm); color: var(--color-on-dark); margin-bottom: var(--space-3); }
.site-footer nav a { display: block; padding-block: 3px; }
.site-footer a:hover { color: var(--color-on-dark); }
.site-footer__brand { display: grid; gap: var(--space-3); align-content: start; }
.site-footer__brand .wordmark { margin-bottom: var(--space-2); }
.site-footer__news { display: grid; gap: var(--space-3); align-content: start; padding-left: var(--space-8); border-left: 1px solid var(--color-on-dark-border); }
.socials { display: flex; gap: var(--space-4); margin-top: var(--space-2); }
.socials a { width: 20px; height: 20px; color: var(--color-on-dark); }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-5); border-top: 1px solid var(--color-on-dark-border); font-size: var(--text-xs); color: var(--color-on-dark-subtle); }
.site-footer__bottom nav { display: flex; gap: var(--space-2); }
.site-footer__bottom nav a { display: inline; padding: 0; }
@media (max-width: 1024px) { .site-footer__grid { grid-template-columns: repeat(3, 1fr); } .site-footer__brand, .site-footer__news { grid-column: 1 / -1; } .site-footer__news { padding-left: 0; border-left: 0; } }
@media (max-width: 640px) { .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); } }
@media (max-width: 420px) { .site-footer__grid { grid-template-columns: 1fr; } }

/* ---- 23. Filter sidebar (derived) ---- */
.filters { position: sticky; top: calc(var(--header-height) + var(--space-4)); padding: var(--space-5); }
.filters__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-2); }
.filters__head h2 { font-size: var(--text-h5); }
.filters__reset { border: 0; background: none; padding: 0; font: inherit; font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-brand-text); cursor: pointer; }
.filter-group { border-top: 1px solid var(--color-border); padding-block: var(--space-4); }
.filter-group summary { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); list-style: none; cursor: pointer; font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--color-heading); }
.filter-group summary::-webkit-details-marker { display: none; }
.filter-group summary .section-head__icon { width: 18px; height: 18px; margin: 0; }
.filter-group summary::after { content: ""; margin-left: auto; width: 7px; height: 7px; border-right: 1.5px solid var(--color-muted); border-bottom: 1.5px solid var(--color-muted); transform: rotate(-135deg); }
.filter-group:not([open]) summary::after { transform: rotate(45deg); }
.check { display: flex; align-items: center; gap: var(--space-2); padding-block: 3px; font-size: var(--text-sm); color: var(--color-text); cursor: pointer; }
.check input { width: 15px; height: 15px; margin: 0; accent-color: var(--color-brand); }
.check span { margin-left: auto; font-size: var(--text-xs); color: var(--color-subtle); }
@media (max-width: 1024px) { .filters { position: static; } }

/* ---- 24. Company result row (derived) ---- */
.result { display: grid; grid-template-columns: 96px 1fr auto; gap: var(--space-5); padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.result:hover { box-shadow: var(--shadow-card); }
.result__logo { width: 96px; height: 96px; display: grid; place-items: center; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.result__logo img { max-height: 100%; object-fit: contain; }
.result__main { display: grid; gap: var(--space-2); align-content: start; font-size: var(--text-sm); }
.result__main h3 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-h5); }
.result__main h3 a:hover { color: var(--color-brand-text); }
.result__loc { font-size: var(--text-xs); color: var(--color-muted); }
.result__aside { display: grid; justify-items: end; align-content: start; gap: var(--space-2); text-align: right; }
.result__aside .rank { font-size: var(--text-h4); color: var(--color-brand-text); }
.result__aside small { font-size: var(--text-2xs); color: var(--color-muted); margin-top: calc(-1 * var(--space-2)); }
@media (max-width: 640px) { .result { grid-template-columns: 64px 1fr; } .result__logo { width: 64px; height: 64px; } .result__aside { grid-column: 1 / -1; grid-auto-flow: column; justify-content: space-between; align-items: center; } }

/* ---- 25. Pagination (derived) ---- */
.pagination { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-6); font-size: var(--text-sm); }
.pagination__btn { display: inline-grid; place-items: center; min-width: 36px; height: 36px; padding: 0 var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-heading); font-weight: var(--weight-medium); }
.pagination__btn:hover { border-color: var(--color-heading); }
/* Current page is brand red, matching the checkbox accent and every other
   selected state in System B (active nav link, active tab, active rank tile). */
.pagination__btn[aria-current="page"] { background: var(--color-brand); border-color: var(--color-brand); color: var(--color-on-dark); }
.pagination__summary { margin-left: auto; font-size: var(--text-xs); color: var(--color-muted); }

/* ---- 26. Explore card (derived) ---- */
.explore-card { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-5) var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); transition: box-shadow var(--duration) var(--ease), border-color var(--duration) var(--ease); }
.explore-card:hover { box-shadow: var(--shadow-card); border-color: var(--color-border-strong); }
.explore-card h3 { font-size: var(--text-h5); }
.explore-card p { font-size: var(--text-xs); color: var(--color-muted); }
.explore-card__foot { display: flex; justify-content: space-between; align-items: center; margin-top: var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-heading); }
.explore-card__foot i { font-style: normal; color: var(--color-brand-text); }

/* ---- 27. Company logo tile (derived) ---- */
.logo-tile { display: grid; justify-items: center; gap: var(--space-1); padding: var(--space-5) var(--space-3); text-align: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); transition: box-shadow var(--duration) var(--ease); }
.logo-tile:hover { box-shadow: var(--shadow-card); }
.logo-tile img { height: 40px; max-width: 110px; object-fit: contain; margin-bottom: var(--space-2); }
.logo-tile b { font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--color-heading); }
.logo-tile small { font-size: var(--text-2xs); color: var(--color-muted); }

/* ---- 28. Article card + image placeholder (derived) ---- */
.article-card { display: flex; flex-direction: column; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; transition: box-shadow var(--duration) var(--ease); }
.article-card:hover { box-shadow: var(--shadow-card); }
.article-card > img, .article-card > .img-ph { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.article-card__body { display: grid; gap: var(--space-2); padding: var(--space-4); flex: 1; }
.article-card__kicker { font-size: var(--text-2xs); color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.article-card h3 { font-size: var(--text-sm); line-height: 1.4; }
.article-card__foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; font-size: var(--text-xs); color: var(--color-muted); }
.article-card__foot i { font-style: normal; color: var(--color-brand-text); }
.img-ph { display: block; background: linear-gradient(135deg, var(--color-navy-700), var(--color-navy-950)); }
.img-ph--wide { aspect-ratio: 21 / 9; border-radius: var(--radius-sm); }

/* ---- 29. Hero chips (derived) ---- */
.hero-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-4); }
.hero-chips__label { font-size: var(--text-xs); color: var(--color-on-dark-muted); margin-right: var(--space-1); }
.hero-chip { display: inline-flex; align-items: center; height: 28px; padding: 0 var(--space-3); background: var(--color-glass); border: 1px solid var(--color-on-dark-border); border-radius: var(--radius-sm); font-size: var(--text-xs); color: var(--color-on-dark); }
.hero-chip:hover { background: rgba(255, 255, 255, 0.16); }
/* The current browse mode, e.g. "Browse by industry". Red fill, like every other selected state. */
.hero-chip[aria-current] { background: var(--color-brand); border-color: var(--color-brand); color: var(--color-on-dark); }

/* ---- 30. Ranked profile row (derived) ---- */
.rank-row { display: grid; grid-template-columns: 44px 56px minmax(0, 1.2fr) minmax(0, 1.4fr) auto; gap: var(--space-5); align-items: center; padding: var(--space-4) var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.rank-row .rank { font-size: var(--text-h3); }
.rank--top { color: var(--color-brand-text); }
.rank-row__name { display: grid; gap: var(--space-1); }
.rank-row__name h3 { font-size: var(--text-h5); }
.rank-row__name h3 a:hover { color: var(--color-brand-text); }
.rank-row__name p { font-size: var(--text-sm); color: var(--color-muted); }
.rank-row__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); font-size: var(--text-xs); color: var(--color-muted); }
.rank-row__facts b { color: var(--color-heading); font-weight: var(--weight-semibold); }
.rank-row__side { display: grid; justify-items: end; gap: var(--space-2); text-align: right; }
.rank-row__score { line-height: 1; }
.rank-row__score small { display: block; font-size: var(--text-2xs); color: var(--color-muted); margin-bottom: var(--space-1); }
.rank-row__score b { font-size: var(--text-h3); font-weight: var(--weight-black); color: var(--color-heading); font-variant-numeric: tabular-nums; }
.rank-row__side .link-inline { font-size: var(--text-xs); }
.rank-list { display: grid; gap: var(--space-3); }
@media (max-width: 1024px) {
  .rank-row { grid-template-columns: 36px 48px minmax(0, 1fr); row-gap: var(--space-3); }
  .rank-row__facts, .rank-row__side { grid-column: 1 / -1; }
  .rank-row__side { grid-template-columns: auto 1fr auto; align-items: center; justify-items: start; text-align: left; }
  .rank-row__side .btn { justify-self: end; }
}
@media (max-width: 480px) { .rank-row__side { grid-template-columns: 1fr; } .rank-row__side .btn { justify-self: start; } }

/* ---- 31. Byline (derived) ---- */
.byline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-top: var(--space-5); font-size: var(--text-sm); color: var(--color-on-dark-muted); }
.byline b { color: var(--color-on-dark); font-weight: var(--weight-semibold); }
.byline .monogram { background: var(--color-glass); color: var(--color-on-dark); border: 1px solid var(--color-on-dark-border); }

/* ---- 32. Prose (derived) ---- */
.prose { max-width: 72ch; font-size: var(--text-body); line-height: 1.7; color: var(--color-text); }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { font-size: var(--text-h3); margin-top: var(--space-8); }
.prose h3 { font-size: var(--text-h4); margin-top: var(--space-6); }
.prose strong { color: var(--color-heading); }
.prose a { color: var(--color-link); text-decoration: underline; text-underline-offset: 2px; }
.prose ul, .prose ol { padding-left: var(--space-5); }
.prose li + li { margin-top: var(--space-2); }
.panel > .prose { max-width: none; }
/* Don't nest components inside .prose: `.prose ul` indents a .check-list and
   `.prose h3` restyles card titles (e.g. .info-card h3). Close the prose block,
   place the component, then open a new .prose block after it. */

/* ---- 33. Chips (derived) ---- */
.chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.chip-row__label { font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--color-heading); margin-right: var(--space-2); }
.chip { display: inline-flex; align-items: center; height: 32px; padding: 0 var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--color-heading); transition: border-color var(--duration-fast) var(--ease); }
.chip:hover { border-color: var(--color-heading); }
.chip[aria-current] { background: var(--color-brand); border-color: var(--color-brand); color: var(--color-on-dark); }

/* ---- 34. Email-list card (derived) ---- */
.list-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); transition: box-shadow var(--duration) var(--ease), border-color var(--duration) var(--ease); }
.list-card:hover { box-shadow: var(--shadow-card); border-color: var(--color-border-strong); }
.list-card .badge { align-self: flex-start; }
.list-card h3 { font-size: var(--text-h5); }
.list-card > p { font-size: var(--text-sm); color: var(--color-muted); }
.list-card__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: auto 0 0; padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.list-card__stats div { display: flex; flex-direction: column-reverse; }
.list-card__stats dt { font-size: var(--text-2xs); color: var(--color-muted); }
.list-card__stats dd { margin: 0; font-size: var(--text-h4); font-weight: var(--weight-black); color: var(--color-heading); line-height: 1.15; font-variant-numeric: tabular-nums; }

/* ---- 35. Table note (derived) ---- */
.table-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-4); padding: var(--space-3) var(--space-4); background: var(--color-brand-soft); border-radius: var(--radius-sm); }
.table-note p { display: flex; align-items: flex-start; gap: var(--space-2); min-width: 0; font-size: var(--text-sm); color: var(--color-heading); overflow-wrap: anywhere; }
.table-note svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 0.15em; color: var(--color-brand-text); }
.table-wrap + .table-note { margin-top: var(--space-4); }

/* ---- 36. Service row (derived) ---- */
.service-row { display: grid; grid-template-columns: 180px minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--space-5); padding: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.service-row > :is(img, .img-ph) { width: 100%; height: 100%; min-height: 160px; object-fit: cover; border-radius: var(--radius-sm); }
.service-row__main { display: grid; gap: var(--space-2); align-content: start; padding-block: var(--space-2); }
.service-row__main h3 { font-size: var(--text-h4); }
.service-row__main p { font-size: var(--text-sm); color: var(--color-muted); }
.service-row__side { display: grid; gap: var(--space-3); align-content: start; padding-block: var(--space-2); }
.service-row__side h4 { font-size: var(--text-sm); }
.service-row__side .btn { justify-self: end; }
@media (max-width: 1024px) {
  .service-row { grid-template-columns: 140px minmax(0, 1fr); }
  .service-row__side { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .service-row { grid-template-columns: 1fr; }
  .service-row > :is(img, .img-ph) { aspect-ratio: 16 / 9; min-height: 0; }
  .service-row__side .btn { justify-self: start; }
}

/* ---- 37. Check list (derived) ---- */
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text); }
.check-list li { display: flex; align-items: flex-start; gap: var(--space-2); }
.check-list li::before { content: ""; flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; border-radius: var(--radius-full); background: var(--color-success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 10px no-repeat; }

/* ---- 38. Pull quote (derived) ---- */
.pull-quote { position: relative; margin: 0; padding: var(--space-5) var(--space-6) var(--space-5) var(--space-12); background: var(--color-brand-soft); border-left: 4px solid var(--color-brand); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.pull-quote::before { content: "\201C" / ""; position: absolute; left: var(--space-4); top: var(--space-2); font: var(--weight-bold) 3rem/1 var(--font-serif); color: var(--color-brand); }
.pull-quote p { font: italic var(--weight-medium) var(--text-h4)/1.5 var(--font-serif); color: var(--color-heading); }
.pull-quote cite { display: block; margin-top: var(--space-2); font: normal var(--weight-regular) var(--text-xs)/1.4 var(--font-sans); color: var(--color-muted); }
.pull-quote cite::before { content: "\2014\00a0" / ""; }

/* ---- 39. CTA contact card (derived, from the ranking-top10-article reference design) ---- */
.cta-contact-card { display: grid; gap: var(--space-4); align-content: center; padding: var(--space-6); background: var(--color-navy-800); border: 1px solid var(--color-on-dark-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-panel); color: var(--color-on-dark-muted); }
.cta-contact-card__eyebrow { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-teal-on-dark); }
.cta-contact-card__eyebrow svg { width: 22px; height: 22px; flex-shrink: 0; }
.cta-contact-card__title { font-family: var(--font-serif); font-size: var(--text-h2); font-weight: var(--weight-bold); line-height: 1.2; color: var(--color-on-dark); }
.cta-contact-card__title em { font-style: normal; color: var(--color-brand-on-dark); }
.cta-contact-card__body { font-size: var(--text-body); line-height: var(--leading-normal); }
.cta-contact-card .btn { height: auto; min-height: 48px; padding-block: var(--space-3); white-space: normal; text-align: center; }
/* Two fixed columns: four labels need ~490px in one row, more than any card here
   gets, and a free wrap leaves a lone label (3 + 1). Two columns give a 2x2 block. */
.cta-contact-card__checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, max-content); gap: var(--space-2) var(--space-5); font-size: var(--text-sm); color: var(--color-on-dark); }
.cta-contact-card__checks li { display: flex; align-items: center; gap: var(--space-2); }
.cta-contact-card__checks li::before { content: ""; flex-shrink: 0; width: 18px; height: 18px; border-radius: var(--radius-full); background: var(--color-teal-on-dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E2338' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 11px no-repeat; }
.cta-contact-card__alt { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); }
.cta-contact-card__alt::before, .cta-contact-card__alt::after { content: ""; flex: 1; height: 1px; background: var(--color-on-dark-border); }
.cta-contact-card__alt a { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-semibold); color: var(--color-on-dark); }
.cta-contact-card__alt a:hover { text-decoration: underline; }
.cta-contact-card__alt svg { width: 20px; height: 20px; }