/* ============================================================================
   Demand engines — grid of five figures (built by assets/vendor/engines.js).

   Type and palette are the site's own: Inter Display, tight negative tracking,
   #97a97f accent, #031d29 ink. The background line-art and the arcs are authored
   SVG rather than exported bitmaps, so they stay sharp and take their colour
   from the tokens below.

   No rounded corners and no shadows: not part of the site's language.
   ==========================================================================*/
.cc-engines {
  --cc-accent: #97a97f;
  --cc-ink: #031d29;
  --cc-body: #333336;
  --cc-card: #f5f7f0;
  --cc-hair: #cfd8c2;
  --cc-wedge: #e9eee0;
  /* <main> on /vision is navy; the sections above paint their own white band
     full-bleed and inset only their content. Same here, or the section would
     show navy at the sides and the ink heading would vanish into it. */
  background: #fff;
  width: 100%;
  padding: 8px 0 96px;
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  color: var(--cc-ink);
  box-sizing: border-box;
}
.cc-engines * { box-sizing: border-box; }
/* The page column, built the same way the sections above are: a 1800px cap
   with 40px gutters. `calc(100% - 80px)` matched at 1440 but not past the cap —
   at 1920 the page insets its content by 100px and this section by 40px. */
.cc-engines__inner { max-width: 1800px; margin: 0 auto; padding: 0 40px; }

.cc-engines__head { margin: 0 0 40px; }
.cc-engines__title {
  margin: 0; font-size: clamp(34px, 3.6vw, 56px); font-weight: 600;
  letter-spacing: -.03em; line-height: 1.08; color: var(--cc-ink);
}
/* The deck sets the second line in an italic serif. The site has no serif, so
   the split is carried by the site's own two-tone heading idiom — ink, then
   accent — as used in the footer. */
.cc-engines__title span { display: block; font-weight: 500; color: var(--cc-accent); }

.cc-engines__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; }
.cc-engine--wide { grid-column: span 3; }
.cc-engine--narrow { grid-column: span 2; }

.cc-engine {
  position: relative; overflow: hidden;
  background: var(--cc-card);
  border: 1px solid #edf0e6;
  min-height: 400px;
  padding: 40px 36px 34px;
  display: flex; flex-direction: column; justify-content: space-between;
  isolation: isolate;
}
.cc-engine--narrow { min-height: 424px; }

.cc-engine__lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.cc-engine__hair  { fill: none; stroke: var(--cc-hair); stroke-width: 1; }
.cc-engine__chev  { fill: none; stroke: var(--cc-hair); stroke-width: 1.4; }
.cc-engine__wedge { fill: var(--cc-wedge); }
.cc-engine__arc   { fill: none; stroke: var(--cc-accent); stroke-width: 17; opacity: .92; }
.cc-engine__tick  { fill: var(--cc-accent); opacity: .9; }

.cc-engine__objects { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.cc-engine__obj { position: absolute; height: auto; display: block; max-width: none; }

/* the departure-board number. Percentage padding would resolve against the
   PARENT's width, not this box, and a border-box element grows to fit padding
   it cannot contain — so the inset stays in em. */
.cc-engine__gate {
  position: absolute; display: grid; place-items: center end;
  aspect-ratio: 193 / 109; color: #fff; font-weight: 600;
  font-size: clamp(10px, 1vw, 15px); letter-spacing: -.03em;
  padding: 0 .95em .2em 0; pointer-events: none;
}

/* text always above the artwork */
.cc-engine__num {
  position: relative; z-index: 5; margin: 0;
  font-size: clamp(56px, 6.4vw, 122px); font-weight: 600; line-height: .92;
  letter-spacing: -.05em; color: var(--cc-accent);
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.cc-engine__meta { position: relative; z-index: 5; }
.cc-engine__stat {
  margin: 0 0 2px; font-size: clamp(15px, 1.15vw, 19px); font-weight: 400;
  letter-spacing: -.04em; color: var(--cc-body);
}
.cc-engine__place {
  margin: 0; font-size: clamp(15px, 1.15vw, 19px); font-weight: 600;
  letter-spacing: -.04em; color: var(--cc-ink);
}

@media (max-width: 1100px) {
  .cc-engine--wide, .cc-engine--narrow { grid-column: span 3; }
  .cc-engine, .cc-engine--narrow { min-height: 360px; }
  /* the cards halve in width here, so the two cut-outs nearest the label move
     clear of it rather than sitting behind it */
  [data-engine="arena"] img.cc-engine__obj:nth-of-type(1) { left: 55%; width: 21%; }
  [data-engine="living"] img.cc-engine__obj:nth-of-type(1) { bottom: 33%; width: 44%; }
}
@media (max-width: 720px) {
  .cc-engines { padding: 0 0 64px; }
  .cc-engines__inner { padding: 0 24px; }
  .cc-engine--wide, .cc-engine--narrow { grid-column: span 6; }
  .cc-engine, .cc-engine--narrow { min-height: 300px; padding: 28px 24px 24px; }
}