/* ══════════════════════════════════════════════════════════════════════════
   CLEAN GREEN — override layer.
   Loaded AFTER a page's own styles so it corrects the anti-slop audit findings
   without rewriting every page's markup. Applies brand.md exactly:
     · no hard offset shadows — only the approved soft lift
     · radius mixed on purpose (cards 22px · pills full · data blocks square)
     · Anton lightened: restrained scale, looser tracking
     · lime is a proof stamp, never a gradient
   ══════════════════════════════════════════════════════════════════════════ */

/* 1 ── kill every hard offset shadow; allow only the approved soft lift ───── */
*,
*::before,
*::after { box-shadow: none !important; }

.card, .type, .devcard, .engcard, .heroart, .btn-lime, .btn-v,
figure, .feat, .revcard, .regioncard, .method, .indcard {
  box-shadow: 0 14px 34px -20px rgba(11, 11, 12, .14) !important;
}

/* 2 ── radius: mixed on purpose ───────────────────────────────────────────── */
.card, .type, .devcard, .engcard, .revcard, .indcard,
.regioncard, .feat, .method { border-radius: 22px !important; }

.btn, .btn-lime, .btn-ink, .btn-v, .btn-k, .navcta,
a[class*="btn"], button[class*="btn"] { border-radius: 999px !important; }

/* data blocks / code panels / tables are SQUARE by spec */
.stats, .data, .panel, .devpanel, .statin,
pre, code, table, .tbl, .coverage-table { border-radius: 0 !important; }

/* 3 ── Anton lightened at large sizes ─────────────────────────────────────── */
h1 { letter-spacing: .02em !important;  line-height: 1.0 !important; }
h2 { letter-spacing: .022em !important; line-height: 1.05 !important; }
h1, h2 { font-weight: 400 !important; }

/* 4 ── legibility on dark bands (thin grey was hard to read) ──────────────── */
.stats small, .stat small, .d small { font-family: 'Archivo', system-ui, sans-serif !important;
  font-weight: 600 !important; font-size: 15.5px !important; color: #E6E6E0 !important; }
.devcard p, .engcard p, .bandcard p { font-weight: 500 !important; color: #DCDCD6 !important;
  font-size: 15px !important; }
.devband > .wrap > p, .eng > .wrap > p, .band > .wrap > p {
  font-weight: 500 !important; color: #E4E4DE !important; }

/* 5 ── borders read as defined objects, not ghosts ────────────────────────── */
.devcard, .engcard, .bandcard, .panel, .devpanel {
  border-width: 1.5px !important; border-color: rgba(255,255,255,.24) !important; }

/* 6 ── lime never becomes a gradient ──────────────────────────────────────── */
[style*="linear-gradient"][style*="C6F03A"],
[style*="linear-gradient"][style*="c6f03a"] { background-image: none !important;
  background-color: #C6F03A !important; }


/* 8 ── secondary-page illustration: a contained editorial PLATE ───────────
   Full-bleed is a hero device and only the homepage earns it. Cropping the art
   into a letterbox band looked arbitrary — it cut the illustration in half.
   On inner pages the art is instead shown WHOLE, at a calmer size, sitting on
   the paper with its registration marks, so it reads as a plate in a magazine
   rather than a banner. Nothing is cropped. */
.chapter,
.regionart {
  max-width: 880px;
  margin: 0 auto;
  border: 1.5px solid var(--ink, #0B0B0C);
  border-radius: 0;                 /* data/plate = square by spec */
  background: #EDEDEA;
  overflow: hidden;
}
.chapter img,
.regionart img {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;              /* never crop the illustration */
}
/* the plate breathes on the page */
.chapter { margin-top: 26px; margin-bottom: 26px; }

@media (max-width: 900px) {
  .chapter, .regionart { max-width: 100%; }
}

/* 9 ── card links must not underline their entire contents ────────────────
   Region and industry cards are wrapped in <a>. The default underline was
   inheriting to every child — headings, body copy, counts and method chips all
   came out underlined. Links inside prose still underline; card links never do. */
a.card,
a.card *,
.cards a,
.cards a *,
.regioncard a,
.regioncard a * {
  text-decoration: none !important;
}
a.card:hover h3,
.cards a:hover h3 { text-decoration: none !important; }

/* the card's own affordance, instead of an underline */
a.card,
.cards a.card {
  display: block;
  color: inherit;
  transition: transform .12s ease, box-shadow .12s ease;
}
a.card:hover,
.cards a.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -22px rgba(11, 11, 12, .22) !important;
}

/* 11 ── region cards: the thumbnail was letterboxed, so the art looked shrunk ──
   .rcard .thumb img used object-fit:contain inside a fixed-height box, which
   floated a small image in a field of paper. The thumbnail is a band: give it a
   real aspect ratio and let the art fill it edge to edge. */
.rcard { overflow: hidden; }

.rcard .thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 48%;
  display: block;
}

/* card links never underline their contents */
.rcard,
.rcard * { text-decoration: none !important; }

/* affordance without an underline */
.rcard { transition: transform .12s ease, box-shadow .12s ease; }
.rcard:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -22px rgba(11, 11, 12, .22) !important;
}

@media (max-width: 900px) {
  
}

/* 10 ── card artwork, scoped to cards that actually contain an image ────────
   (Applying these to every .card stripped the padding from text-only cards and
   pushed their headings onto the card edge.) */
.card:has(> img) ,
.card:has(> figure) { padding-top: 0; overflow: hidden; }

.card > img,
.card > figure > img {
  display: block;
  width: calc(100% + 3px);
  margin: -1.5px -1.5px 0 -1.5px;
  max-height: 190px;
  object-fit: cover;
  object-position: center 45%;
  border: 0;
  border-radius: 0;
}
.card:has(> img) > *:not(img),
.card:has(> figure) > *:not(figure) { padding-left: 28px; padding-right: 28px; }
.card:has(> img) > *:nth-child(2) { margin-top: 22px; }
.card:has(> img) > *:last-child  { margin-bottom: 26px; }

/* text-only cards keep their own padding and breathe normally */
.card:not(:has(img)):not(:has(figure)) { padding: 28px; }
.card h3 { margin-bottom: 8px; }

/* 12 ── one card system across regions, industries and partners ─────────────
   Same thumbnail band, same body, same hover. The band is deliberately tall so
   the illustration reads, rather than being reduced to a sliver. */
.rcard .thumb,
.icard .thumb {
  aspect-ratio: 16 / 10;             /* taller: more of the artwork is visible */
  height: auto !important;
  overflow: hidden;
  background: #EDEDEA;
  border-bottom: 1.5px solid rgba(11,11,12,.32);
}
.rcard .thumb img,
.icard .thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 46%;
  display: block;
}

.icard {
  display: block;
  background: #fff;
  border: 1.5px solid rgba(11,11,12,.32);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 14px 34px -20px rgba(11,11,12,.14);
  transition: transform .12s ease, box-shadow .12s ease;
}
.icard, .icard * { text-decoration: none !important; color: inherit; }
.icard:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -22px rgba(11,11,12,.22); }
.icard .body { padding: 22px 24px 26px }
.icard h3 { font-family:'Archivo',system-ui,sans-serif; font-weight:800; font-size:17px; margin:0 0 8px }
.icard p  { font-size:15px; margin:0 }
.icard .num {
  font-family:'DM Mono',ui-monospace,monospace; font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:#3F5406; display:block; margin-bottom:10px;
}
.icard .go { display:inline-block; margin-top:14px; font-weight:800; font-size:14.5px }

.icards { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:36px }
@media (max-width: 1000px){ .icards { grid-template-columns:repeat(2,1fr) } }
@media (max-width: 700px){  .icards { grid-template-columns:1fr } .rcard .thumb,.icard .thumb{aspect-ratio:16/9} }