@cogenta/theme-entreprise 1.1.2

package/src/styles/blocks.css

@@ -0,0 +1,1433 @@
+/*
+ * The seventeen vocabulary blocks (`blocks@2.0`, RFC 0001) — this theme's
+ * own layouts.
+ *
+ * Nothing here declares a colour, a size, a radius or a duration of its
+ * own: a block composes the design system from `tokens.css` and nothing
+ * else, which is what keeps a skin swap a whole-theme change.
+ */
+
+/* --- hero ------------------------------------------------------------- */
+
+/* A single column below the breakpoint — `auto 1fr` (the desktop two-column
+   shape, introduced at `60rem` below) squeezed `.cg-hero__frame` to nothing
+   on a narrow screen: the intro's own max-content width claimed the whole
+   `auto` track, leaving the media frame with no room at all. Found by
+   looking at a real 360px screenshot, not by reading the rule. */
+.cg-hero {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--cg-s6);
+  margin-block-start: var(--cg-s12);
+}
+
+.cg-hero__mark {
+  display: none;
+}
+
+@media (min-width: 60rem) {
+  .cg-hero {
+    grid-template-columns: 1.1fr 0.9fr;
+    align-items: center;
+    gap: var(--cg-s20);
+  }
+
+  /* A single vertical accent rule beside the copy, standing in for the
+     decorative wash a marketing hero would use — a report cover's spine,
+     not a gradient. */
+  .cg-hero__mark {
+    display: block;
+    grid-row: 1;
+    inline-size: 3px;
+    block-size: 100%;
+    min-block-size: var(--cg-s20);
+    background: var(--cg-accent);
+    justify-self: start;
+  }
+
+  .cg-hero__intro {
+    grid-column: 1;
+    display: grid;
+    grid-template-columns: var(--cg-s6) 1fr;
+    gap: var(--cg-s10);
+  }
+
+  .cg-hero__frame {
+    grid-column: 2;
+    grid-row: 1;
+  }
+}
+
+.cg-hero__eyebrow {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--cg-s2);
+  margin: 0 0 var(--cg-s5);
+  padding: var(--cg-s1) var(--cg-s3);
+  border: 1px solid var(--cg-line-strong);
+  border-radius: var(--cg-radius-pill);
+  color: var(--cg-ink-muted);
+  font-size: var(--cg-text-xs);
+  font-weight: var(--cg-weight-semibold);
+  letter-spacing: var(--cg-tracking-wide);
+  text-transform: uppercase;
+}
+
+.cg-hero__title {
+  margin: 0;
+  font-size: var(--cg-text-3xl);
+  line-height: var(--cg-leading-tight);
+  letter-spacing: var(--cg-tracking-tight);
+  font-weight: var(--cg-weight-bold);
+  text-wrap: balance;
+}
+
+@media (min-width: 60rem) {
+  .cg-hero__title {
+    font-size: calc(var(--cg-text-3xl) * 1.2);
+  }
+}
+
+.cg-hero__subtitle {
+  margin: var(--cg-s5) 0 0;
+  max-inline-size: var(--cg-measure-narrow);
+  font-size: var(--cg-text-lg);
+  line-height: var(--cg-leading-relaxed);
+  color: var(--cg-ink-muted);
+  text-wrap: pretty;
+}
+
+.cg-hero__frame {
+  padding: var(--cg-s2);
+  border: 1px solid var(--cg-line);
+  border-radius: var(--cg-radius-lg);
+  background: var(--cg-surface-sunken);
+  /* A flat frame, one soft shadow for lift — never a gradient wash behind
+     the media. */
+  box-shadow: var(--cogenta-shadow-md);
+}
+
+.cg-hero__media {
+  inline-size: 100%;
+  border-radius: var(--cg-radius-md);
+}
+
+/* --- entry header (`renderEntryHeader`, `@cogenta/theme-kit`) ------------- */
+
+/* Drawn for a `service` (or any routed entry) that has no `hero` of its
+   own — the eyebrow/title/excerpt/meta/cover furniture `theme@1.4` hands
+   every theme, in this theme's own structured register: a taxonomy eyebrow
+   in the same uppercase mono-caps language `hero`'s own eyebrow uses, a
+   bold display title, and a hairline-divided meta row rather than a
+   floating byline. */
+.cg-entry-header {
+  max-inline-size: var(--cg-page);
+  margin-inline: auto;
+  margin-block: var(--cg-section-y) var(--cg-s10);
+  padding-inline: var(--cg-gutter);
+}
+
+.cg-entry-header__terms {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--cg-s3);
+  margin: 0 0 var(--cg-s4);
+  padding: 0;
+  list-style: none;
+  font-size: var(--cg-text-xs);
+  font-weight: var(--cg-weight-semibold);
+  letter-spacing: var(--cg-tracking-wide);
+  text-transform: uppercase;
+}
+
+.cg-entry-header__terms a {
+  color: var(--cg-accent);
+  text-decoration: none;
+}
+
+.cg-entry-header__terms a:hover {
+  text-decoration: underline;
+}
+
+.cg-entry-header__title {
+  margin: 0;
+  font-size: var(--cg-text-3xl);
+  line-height: var(--cg-leading-tight);
+  letter-spacing: var(--cg-tracking-tight);
+  font-weight: var(--cg-weight-bold);
+  text-wrap: balance;
+}
+
+.cg-entry-header__excerpt {
+  margin: var(--cg-s5) 0 0;
+  max-inline-size: var(--cg-measure-narrow);
+  font-size: var(--cg-text-lg);
+  line-height: var(--cg-leading-relaxed);
+  color: var(--cg-ink-muted);
+  text-wrap: pretty;
+}
+
+.cg-entry-header__meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--cg-s4);
+  margin: var(--cg-s6) 0 0;
+  padding-block-start: var(--cg-s4);
+  border-block-start: 1px solid var(--cg-line-soft);
+  font-size: var(--cg-text-sm);
+  color: var(--cg-ink-muted);
+}
+
+.cg-entry-header__author {
+  font-weight: var(--cg-weight-semibold);
+  color: var(--cg-ink);
+}
+
+.cg-entry-header__reading-time::before {
+  content: "·";
+  margin-inline-end: var(--cg-s4);
+  color: var(--cg-ink-subtle);
+}
+
+.cg-entry-header__cover {
+  margin: var(--cg-s8) 0 0;
+  overflow: hidden;
+  border: 1px solid var(--cg-line);
+  border-radius: var(--cg-radius-md);
+}
+
+.cg-entry-header__cover img,
+.cg-entry-header__cover video {
+  inline-size: 100%;
+  aspect-ratio: 16 / 9;
+}
+
+/* --- prose --------------------------------------------------------------- */
+
+.cg-prose {
+  max-inline-size: var(--cg-measure);
+  margin-inline: auto;
+  line-height: var(--cg-leading-relaxed);
+}
+
+.cg-prose > :first-child {
+  margin-block-start: 0;
+}
+
+.cg-prose > :last-child {
+  margin-block-end: 0;
+}
+
+.cg-prose h2,
+.cg-prose h3,
+.cg-prose h4 {
+  letter-spacing: var(--cg-tracking-snug);
+  line-height: var(--cg-leading-snug);
+  font-weight: var(--cg-weight-bold);
+  text-wrap: balance;
+}
+
+.cg-prose h2 {
+  margin-block: var(--cg-s12) var(--cg-s4);
+  padding-block-start: var(--cg-s6);
+  border-block-start: 1px solid var(--cg-line-soft);
+  font-size: var(--cg-text-xl);
+  letter-spacing: var(--cg-tracking-tight);
+}
+
+.cg-prose h3 {
+  margin-block: var(--cg-s10) var(--cg-s3);
+  font-size: var(--cg-text-lg);
+}
+
+.cg-prose h4 {
+  margin-block: var(--cg-s8) var(--cg-s2);
+  font-size: var(--cg-text-md);
+}
+
+.cg-prose p {
+  margin-block: var(--cg-s5);
+  text-wrap: pretty;
+}
+
+.cg-prose ul,
+.cg-prose ol {
+  margin-block: var(--cg-s5);
+  padding-inline-start: var(--cg-s6);
+}
+
+.cg-prose li {
+  margin-block: var(--cg-s2);
+  padding-inline-start: var(--cg-s1);
+}
+
+.cg-prose li::marker {
+  color: var(--cg-accent);
+  font-weight: var(--cg-weight-bold);
+}
+
+.cg-prose strong {
+  font-weight: var(--cg-weight-semibold);
+  color: var(--cg-ink);
+}
+
+.cg-prose blockquote {
+  margin-block: var(--cg-s8);
+  margin-inline: 0;
+  padding: var(--cg-s5) var(--cg-s6);
+  border-inline-start: 3px solid var(--cg-accent);
+  background: var(--cg-surface-sunken);
+  color: var(--cg-ink-muted);
+  font-family: var(--cogenta-font-serif);
+  font-size: var(--cg-text-lg);
+  line-height: var(--cg-leading-normal);
+  font-style: italic;
+}
+
+.cg-prose blockquote > :first-child {
+  margin-block-start: 0;
+}
+
+.cg-prose blockquote > :last-child {
+  margin-block-end: 0;
+}
+
+.cg-prose code {
+  font-family: var(--cogenta-font-mono);
+  font-size: 0.875em;
+  background: var(--cg-surface-sunken);
+  border-radius: var(--cg-radius-xs);
+  box-shadow: var(--cg-ring);
+  padding: 0.15em 0.4em;
+}
+
+.cg-prose__figure {
+  margin-block: var(--cg-s8);
+  margin-inline: 0;
+}
+
+.cg-prose__figure img {
+  inline-size: 100%;
+  border-radius: var(--cg-radius-md);
+  box-shadow: var(--cg-ring);
+}
+
+.cg-prose__figure figcaption {
+  margin-block-start: var(--cg-s3);
+  color: var(--cg-ink-subtle);
+  font-size: var(--cg-text-sm);
+  line-height: var(--cg-leading-normal);
+}
+
+/* --- mediaFigure ----------------------------------------------------- */
+
+.cg-figure {
+  margin-inline: auto;
+}
+
+.cg-figure[data-align="start"],
+.cg-figure[data-align="end"] {
+  max-inline-size: calc(var(--cg-measure) / 2);
+}
+
+.cg-figure[data-align="start"] {
+  float: inline-start;
+  margin-inline-end: var(--cg-s6);
+}
+
+.cg-figure[data-align="end"] {
+  float: inline-end;
+  margin-inline-start: var(--cg-s6);
+}
+
+.cg-figure[data-align="full"] {
+  max-inline-size: none;
+  padding-inline: 0;
+}
+
+/* A frame plate rather than a floating rounded image: a thin border sits
+   just outside the picture, the same "bordered plate" language `hero` and
+   `embed` use. */
+.cg-figure__frame {
+  padding: var(--cg-s2);
+  border: 1px solid var(--cg-line);
+  border-radius: var(--cg-radius-md);
+  background: var(--cg-surface);
+}
+
+.cg-figure[data-align="full"] .cg-figure__frame {
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+}
+
+.cg-figure__media {
+  inline-size: 100%;
+  aspect-ratio: var(--cg-ratio, auto);
+  border-radius: var(--cg-radius-sm);
+}
+
+.cg-figure[data-align="full"] .cg-figure__media {
+  border-radius: 0;
+}
+
+.cg-figure__caption {
+  margin-block-start: var(--cg-s4);
+  color: var(--cg-ink-subtle);
+  font-size: var(--cg-text-sm);
+  line-height: var(--cg-leading-normal);
+  text-wrap: pretty;
+}
+
+.cg-figure[data-align="full"] .cg-figure__caption {
+  max-inline-size: var(--cg-measure);
+  margin-inline: auto;
+  padding-inline: var(--cg-gutter);
+}
+
+.cg-figure__credit {
+  color: var(--cg-ink-subtle);
+}
+
+.cg-figure__credit::before {
+  content: " — ";
+}
+
+/* --- featureGrid → "our services" ------------------------------------ */
+
+.cg-services__items {
+  display: grid;
+  gap: var(--cg-gap);
+  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+/* Capped at three columns: with `auto-fit` alone a six-service grid became
+   four columns plus two orphans on a wide screen — a 3×2 grid is the shape
+   a services page is designed as. */
+@media (min-width: 64rem) {
+  .cg-services__items {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+.cg-service {
+  padding: var(--cg-s8);
+  border: 1px solid var(--cg-line);
+  border-radius: var(--cg-radius-md);
+  background: var(--cg-surface);
+  transition:
+    border-color var(--cg-duration) var(--cg-ease),
+    box-shadow var(--cg-duration) var(--cg-ease);
+}
+
+.cg-service:hover {
+  border-color: color-mix(in oklab, var(--cg-accent) 45%, var(--cg-line));
+  box-shadow: var(--cogenta-shadow-sm);
+}
+
+/* A flat, accent-tinted square rather than a shadowed disc: the same
+   restrained "hairline and fill" language `stats`/`pricingTable` use — a
+   real icon, never a decorative gradient chip. */
+.cg-service__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--cg-s10);
+  block-size: var(--cg-s10);
+  margin-block-end: var(--cg-s5);
+  background: var(--cg-accent-soft);
+  color: var(--cg-accent);
+  border-radius: var(--cg-radius-sm);
+}
+
+.cg-service__icon svg {
+  inline-size: 1.35rem;
+  block-size: 1.35rem;
+}
+
+.cg-service__title {
+  margin: 0 0 var(--cg-s2);
+  font-size: var(--cg-text-lg);
+  font-weight: var(--cg-weight-semibold);
+  line-height: var(--cg-leading-snug);
+  letter-spacing: var(--cg-tracking-snug);
+}
+
+.cg-service__link {
+  color: inherit;
+  text-decoration: none;
+}
+
+.cg-service:hover .cg-service__link {
+  color: var(--cg-accent);
+}
+
+.cg-service__text {
+  margin: 0;
+  color: var(--cg-ink-muted);
+  line-height: var(--cg-leading-relaxed);
+  text-wrap: pretty;
+}
+
+/* --- cta → premium banner ---------------------------------------------- */
+
+/* A full-width flat band, not a card sitting in the page column — same
+   discipline as `.cg-metrics`, this block's other "confident, edge to
+   edge" moment. `.cg-banner__inner` re-centres the ask/action pair to the
+   page's own measure. */
+.cg-banner {
+  max-inline-size: none;
+  padding: var(--cg-s12) var(--cg-gutter);
+  background: var(--cg-surface-tinted);
+  border-block: 1px solid var(--cg-line);
+}
+
+.cg-banner__inner {
+  display: grid;
+  gap: var(--cg-s8);
+  max-inline-size: var(--cg-page);
+  margin-inline: auto;
+}
+
+@media (min-width: 52rem) {
+  .cg-banner__inner {
+    grid-template-columns: 1fr auto;
+    align-items: center;
+    gap: var(--cg-s12);
+  }
+
+  .cg-banner__content {
+    padding-inline-end: var(--cg-s12);
+    border-inline-end: 1px solid var(--cg-line);
+  }
+}
+
+.cg-banner__title {
+  margin: 0;
+  font-size: var(--cg-text-2xl);
+  line-height: var(--cg-leading-snug);
+  letter-spacing: var(--cg-tracking-tight);
+  font-weight: var(--cg-weight-bold);
+  text-wrap: balance;
+}
+
+.cg-banner__text {
+  margin: var(--cg-s4) 0 0;
+  max-inline-size: var(--cg-measure-narrow);
+  color: var(--cg-ink-muted);
+  font-size: var(--cg-text-lg);
+  line-height: var(--cg-leading-relaxed);
+  text-wrap: pretty;
+}
+
+.cg-banner__actions .cg-actions {
+  margin-block-start: 0;
+}
+
+/* --- gallery ----------------------------------------------------------- */
+
+.cg-gallery__items {
+  display: grid;
+  gap: var(--cg-gap-tight);
+  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
+}
+
+.cg-gallery__item {
+  overflow: hidden;
+  border: 1px solid var(--cg-line);
+  border-radius: var(--cg-radius-sm);
+}
+
+.cg-gallery__item img {
+  inline-size: 100%;
+  block-size: 100%;
+  transition: transform var(--cg-duration-slow) var(--cg-ease);
+}
+
+.cg-gallery__item:hover img {
+  transform: scale(1.03);
+}
+
+.cg-gallery:not([data-layout="masonry"]) .cg-gallery__item img {
+  aspect-ratio: 3 / 2;
+}
+
+.cg-gallery[data-layout="masonry"] .cg-gallery__items {
+  display: block;
+  columns: 3 15rem;
+  column-gap: var(--cg-gap-tight);
+}
+
+.cg-gallery[data-layout="masonry"] .cg-gallery__item {
+  break-inside: avoid;
+  margin-block-end: var(--cg-gap-tight);
+}
+
+.cg-gallery[data-layout="carousel"] .cg-gallery__items {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(17rem, 42%);
+}
+
+.cg-gallery[data-layout="carousel"] .cg-gallery__item {
+  scroll-snap-align: start;
+}
+
+/* --- quote → testimonial card ------------------------------------------- */
+
+.cg-quote {
+  max-inline-size: var(--cg-page-narrow);
+  margin-inline: auto;
+  padding: var(--cg-s10) var(--cg-s10) var(--cg-s10) var(--cg-s8);
+  border-inline-start: 3px solid var(--cg-accent);
+  border-block: 1px solid var(--cg-line);
+  border-inline-end: 1px solid var(--cg-line);
+  border-radius: 0 var(--cg-radius-md) var(--cg-radius-md) 0;
+  background: var(--cg-surface-sunken);
+}
+
+.cg-quote__text {
+  margin: 0;
+  font-family: var(--cogenta-font-serif);
+  font-size: var(--cg-text-xl);
+  font-style: italic;
+  line-height: var(--cg-leading-snug);
+  letter-spacing: var(--cg-tracking-snug);
+  text-wrap: balance;
+}
+
+.cg-quote__attribution {
+  display: flex;
+  align-items: center;
+  gap: var(--cg-s3);
+  margin-block-start: var(--cg-s8);
+  padding-block-start: var(--cg-s6);
+  border-block-start: 1px solid var(--cg-line-soft);
+  color: var(--cg-ink-subtle);
+  font-size: var(--cg-text-sm);
+  font-style: normal;
+}
+
+.cg-quote__avatar {
+  inline-size: var(--cg-s10);
+  block-size: var(--cg-s10);
+  border-radius: var(--cg-radius-pill);
+  box-shadow: var(--cg-ring);
+}
+
+.cg-quote__who {
+  display: flex;
+  flex-direction: column;
+}
+
+.cg-quote__author {
+  font-weight: var(--cg-weight-semibold);
+  color: var(--cg-ink);
+}
+
+/* --- faq → numbered accordion ------------------------------------------- */
+
+.cg-faq {
+  max-inline-size: var(--cg-page-narrow);
+  margin-inline: auto;
+}
+
+.cg-faq__item {
+  border-block-start: 1px solid var(--cg-line-soft);
+}
+
+.cg-faq__item:last-child {
+  border-block-end: 1px solid var(--cg-line-soft);
+}
+
+.cg-faq__question {
+  display: flex;
+  align-items: baseline;
+  gap: var(--cg-s5);
+  padding: var(--cg-s6) var(--cg-s2);
+  font-weight: var(--cg-weight-semibold);
+  cursor: pointer;
+  list-style: none;
+  transition: color var(--cg-duration) var(--cg-ease);
+}
+
+.cg-faq__question::-webkit-details-marker {
+  display: none;
+}
+
+.cg-faq__index {
+  font-family: var(--cogenta-font-serif);
+  font-style: italic;
+  font-weight: var(--cg-weight-regular);
+  color: var(--cg-ink-subtle);
+  min-inline-size: 2.2ch;
+}
+
+.cg-faq__question-text {
+  flex: 1;
+}
+
+.cg-faq__question:hover,
+.cg-faq__details[open] .cg-faq__question {
+  color: var(--cg-accent);
+}
+
+/* A plus mark clipped flat from a solid fill — no gradient, no icon font,
+   no glyph a font might not ship. */
+.cg-faq__question::before {
+  content: "";
+  flex: none;
+  margin-inline-start: auto;
+  inline-size: 0.9em;
+  block-size: 0.9em;
+  background: currentColor;
+  clip-path: polygon(
+    43% 0%,
+    57% 0%,
+    57% 43%,
+    100% 43%,
+    100% 57%,
+    57% 57%,
+    57% 100%,
+    43% 100%,
+    43% 57%,
+    0% 57%,
+    0% 43%,
+    43% 43%
+  );
+  transition: transform var(--cg-duration) var(--cg-ease);
+}
+
+.cg-faq__details[open] .cg-faq__question::before {
+  transform: rotate(90deg);
+}
+
+.cg-faq__answer {
+  padding: 0 var(--cg-s2) var(--cg-s6) calc(2.2ch + var(--cg-s5));
+  color: var(--cg-ink-muted);
+  line-height: var(--cg-leading-relaxed);
+}
+
+.cg-faq__answer > :first-child {
+  margin-block-start: 0;
+}
+
+.cg-faq__answer > :last-child {
+  margin-block-end: 0;
+}
+
+/* --- stats → full-width KPI band ------------------------------------------
+   A confident, edge-to-edge accent band rather than a bordered strip inside
+   the page column — the "real KPI section" read the aesthetic direction
+   asks for. `data-variant-width` is unaffected: this block opts itself into
+   full width by its own rule rather than requiring an author to set one. */
+
+.cg-metrics {
+  /* A genuine full-width band, not a card sitting in the page column —
+     the one block on this theme's page that reads as edge to edge by
+     default, overriding the `:where()` container rule (`base.css`) that
+     every other block relies on. `.cg-metrics__items` below re-centres the
+     actual figures to the page's own measure so only the accent fill goes
+     edge to edge. */
+  max-inline-size: none;
+  padding: var(--cg-s12) var(--cg-gutter);
+  background: var(--cg-accent);
+  color: var(--cg-accent-fg);
+}
+
+.cg-metrics__title {
+  color: var(--cg-accent-fg);
+}
+
+.cg-metrics__items {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
+  gap: var(--cg-s8);
+  margin: 0;
+  max-inline-size: var(--cg-page);
+  margin-inline: auto;
+}
+
+.cg-metric {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cg-s2);
+}
+
+.cg-metric__label {
+  order: 1;
+  font-size: var(--cg-text-xs);
+  font-weight: var(--cg-weight-semibold);
+  letter-spacing: var(--cg-tracking-wide);
+  text-transform: uppercase;
+  opacity: 0.82;
+}
+
+.cg-metric__value {
+  order: 2;
+  display: flex;
+  align-items: baseline;
+  gap: var(--cg-s1);
+  margin: 0;
+  font-size: var(--cg-text-3xl);
+  font-weight: var(--cg-weight-bold);
+  line-height: var(--cg-leading-tight);
+  letter-spacing: var(--cg-tracking-tight);
+  font-variant-numeric: tabular-nums;
+}
+
+@media (min-width: 60rem) {
+  .cg-metric__value {
+    font-size: calc(var(--cg-text-3xl) * 1.15);
+  }
+}
+
+.cg-metric__unit {
+  font-size: var(--cg-text-lg);
+  font-weight: var(--cg-weight-medium);
+  opacity: 0.82;
+}
+
+/* --- logos → "trusted by" strip ------------------------------------------ */
+
+.cg-clients__items {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
+  gap: var(--cg-gap);
+  align-items: center;
+}
+
+.cg-clients__item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--cg-s4);
+}
+
+.cg-clients__logo {
+  block-size: var(--cg-s10);
+  inline-size: auto;
+  max-inline-size: 100%;
+  object-fit: contain;
+  /* Grayscale, held back until hovered — the restrained "held-back until
+     proven" treatment the aesthetic direction calls for. A `filter`, never
+     a re-encoded asset: the real logo is one hover away. */
+  filter: grayscale(1);
+  opacity: 0.65;
+  transition:
+    filter var(--cg-duration) var(--cg-ease),
+    opacity var(--cg-duration) var(--cg-ease);
+}
+
+.cg-clients__link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 100%;
+  border-radius: var(--cg-radius-xs);
+}
+
+.cg-clients__item:hover .cg-clients__logo,
+.cg-clients__link:focus-visible .cg-clients__logo {
+  filter: grayscale(0);
+  opacity: 1;
+}
+
+/* --- collectionList → services/insights cards ---------------------------- */
+
+.cg-list__items {
+  display: grid;
+}
+
+.cg-list[data-layout="list"] .cg-list__items {
+  gap: var(--cg-s6);
+}
+
+.cg-list[data-layout="list"] .cg-list__row {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--cg-s6);
+  padding-block: var(--cg-s6);
+  border-block-start: 1px solid var(--cg-line-soft);
+}
+
+.cg-list[data-layout="list"] .cg-list__row:last-child {
+  border-block-end: 1px solid var(--cg-line-soft);
+}
+
+/* The 16:9 cover — `entryImage`'s resolved picture, when the entry has one.
+   `object-fit: cover` (inherited from `img` in `base.css`) crops rather than
+   letterboxes, and the picture is loaded lazily (a listed entry, never the
+   hero) with a real intrinsic aspect ratio so nothing shifts once it loads.
+   Declared here, ahead of the `[data-layout="list"]` override just below,
+   so the cascade reads in ascending specificity order. */
+.cg-list__cover {
+  display: block;
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+  border-radius: var(--cg-radius-sm);
+}
+
+.cg-list__cover-image {
+  inline-size: 100%;
+  block-size: 100%;
+}
+
+.cg-list[data-layout="list"] .cg-list__cover {
+  flex: none;
+  inline-size: 9rem;
+}
+
+.cg-list[data-layout="grid"] .cg-list__items,
+.cg-list[data-layout="carousel"] .cg-list__items {
+  display: grid;
+  gap: var(--cg-gap);
+}
+
+.cg-list[data-layout="grid"] .cg-list__items {
+  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
+}
+
+.cg-list[data-layout="carousel"] .cg-list__items {
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(17rem, 45%);
+}
+
+.cg-list[data-layout="grid"] .cg-list__row,
+.cg-list[data-layout="carousel"] .cg-list__row {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cg-s4);
+  padding: var(--cg-s6);
+  border: 1px solid var(--cg-line);
+  border-radius: var(--cg-radius-md);
+  background: var(--cg-surface);
+  transition: border-color var(--cg-duration) var(--cg-ease);
+}
+
+.cg-list[data-layout="grid"] .cg-list__row:hover,
+.cg-list[data-layout="carousel"] .cg-list__row:hover {
+  border-color: var(--cg-accent);
+}
+
+.cg-list[data-layout="carousel"] .cg-list__row {
+  scroll-snap-align: start;
+}
+
+.cg-list__date {
+  color: var(--cg-ink-subtle);
+  font-size: var(--cg-text-xs);
+  font-weight: var(--cg-weight-semibold);
+  letter-spacing: var(--cg-tracking-wide);
+  text-transform: uppercase;
+}
+
+.cg-list__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cg-s2);
+}
+
+.cg-list__title {
+  margin: 0;
+  font-size: var(--cg-text-lg);
+  font-weight: var(--cg-weight-semibold);
+  line-height: var(--cg-leading-snug);
+  letter-spacing: var(--cg-tracking-snug);
+  text-wrap: balance;
+}
+
+.cg-list__link {
+  color: inherit;
+  text-decoration: none;
+}
+
+.cg-list__row:hover .cg-list__link {
+  color: var(--cg-accent);
+}
+
+.cg-list__excerpt {
+  margin: 0;
+  color: var(--cg-ink-muted);
+  font-size: var(--cg-text-sm);
+  line-height: var(--cg-leading-relaxed);
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  line-clamp: 3;
+  overflow: hidden;
+}
+
+.cg-list__empty {
+  padding: var(--cg-s8);
+  border: 1px dashed var(--cg-line-strong);
+  border-radius: var(--cg-radius-md);
+  color: var(--cg-ink-subtle);
+  text-align: center;
+}
+
+/* --- embed --------------------------------------------------------------- */
+
+.cg-embed {
+  aspect-ratio: var(--cg-ratio, 16 / 9);
+  max-inline-size: var(--cg-measure);
+  margin-inline: auto;
+  border: 1px solid var(--cg-line);
+  border-radius: var(--cg-radius-md);
+  overflow: hidden;
+}
+
+.cg-embed__frame {
+  inline-size: 100%;
+  block-size: 100%;
+  border: 0;
+}
+
+.cg-embed__placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--cg-s4);
+  block-size: 100%;
+  padding: var(--cg-s8);
+  background: var(--cg-surface-sunken);
+  color: var(--cg-ink-muted);
+  text-align: center;
+}
+
+.cg-embed__provider {
+  margin: 0;
+  padding: var(--cg-s1) var(--cg-s3);
+  border: 1px solid var(--cg-line-strong);
+  border-radius: var(--cg-radius-pill);
+  font-size: var(--cg-text-xs);
+  font-weight: var(--cg-weight-semibold);
+  letter-spacing: var(--cg-tracking-wide);
+  text-transform: uppercase;
+}
+
+.cg-embed__notice {
+  margin: 0;
+  max-inline-size: var(--cg-measure-narrow);
+  line-height: var(--cg-leading-relaxed);
+  text-wrap: pretty;
+}
+
+.cg-embed__link {
+  display: inline-flex;
+  align-items: center;
+  min-block-size: 44px;
+  padding: var(--cg-s3) var(--cg-s6);
+  background: var(--cg-surface-raised);
+  color: var(--cg-accent);
+  border: 1px solid var(--cg-line-strong);
+  border-radius: var(--cg-radius-sm);
+  font-size: var(--cg-text-sm);
+  font-weight: var(--cg-weight-semibold);
+  text-decoration: none;
+  transition:
+    background-color var(--cg-duration) var(--cg-ease),
+    color var(--cg-duration) var(--cg-ease);
+}
+
+.cg-embed__link:hover {
+  background: var(--cg-accent);
+  color: var(--cg-accent-fg);
+  border-color: var(--cg-accent);
+}
+
+/* --- testimonial → client outcome panel (blocks@2.0, RFC 0001) ----------- */
+
+/* Mirrors `quote`'s bordered-plate language but reversed and widened: the
+   accent rule sits on the trailing edge and the attribution moves beside
+   the quote on wide screens rather than below it — a "client outcome"
+   callout is read as heavier evidence than a short pull-quote, so it earns
+   more width and its own two-column shape. */
+.cg-testimonial {
+  display: grid;
+  gap: var(--cg-s6);
+  max-inline-size: var(--cg-page-narrow);
+  margin-inline: auto;
+  padding: var(--cg-s10);
+  border-inline-end: 3px solid var(--cg-accent);
+  border-block: 1px solid var(--cg-line);
+  border-inline-start: 1px solid var(--cg-line);
+  border-radius: var(--cg-radius-md) 0 0 var(--cg-radius-md);
+  background: var(--cg-surface-sunken);
+}
+
+@media (min-width: 56rem) {
+  .cg-testimonial {
+    grid-template-columns: 1fr auto;
+    align-items: center;
+    gap: var(--cg-s10);
+  }
+
+  .cg-testimonial__attribution {
+    flex-direction: column;
+    align-items: flex-start;
+    min-inline-size: 14rem;
+    padding-inline-start: var(--cg-s8);
+    border-inline-start: 1px solid var(--cg-line-soft);
+  }
+}
+
+.cg-testimonial__quote {
+  margin: 0;
+  font-family: var(--cogenta-font-serif);
+  font-size: var(--cg-text-xl);
+  font-style: italic;
+  line-height: var(--cg-leading-snug);
+  letter-spacing: var(--cg-tracking-snug);
+  text-wrap: balance;
+}
+
+.cg-testimonial__quote p {
+  margin: 0;
+}
+
+.cg-testimonial__quote p + p {
+  margin-block-start: var(--cg-s4);
+}
+
+.cg-testimonial__attribution {
+  display: flex;
+  align-items: center;
+  gap: var(--cg-s3);
+  margin-block-start: var(--cg-s2);
+  font-style: normal;
+}
+
+.cg-testimonial__avatar {
+  inline-size: var(--cg-s10);
+  block-size: var(--cg-s10);
+  border-radius: var(--cg-radius-pill);
+  box-shadow: var(--cg-ring);
+}
+
+.cg-testimonial__who {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cg-s1);
+  font-size: var(--cg-text-sm);
+  color: var(--cg-ink-subtle);
+}
+
+.cg-testimonial__name {
+  font-weight: var(--cg-weight-semibold);
+  color: var(--cg-ink);
+}
+
+/* --- pricingTable → plan comparison (blocks@2.0, RFC 0001) --------------- */
+
+.cg-pricing__title {
+  margin: 0 0 var(--cg-s8);
+  font-size: var(--cg-text-2xl);
+  line-height: var(--cg-leading-snug);
+  letter-spacing: var(--cg-tracking-tight);
+  font-weight: var(--cg-weight-bold);
+  text-wrap: balance;
+}
+
+.cg-pricing__tiers {
+  display: grid;
+  gap: var(--cg-s6);
+  margin: 0;
+}
+
+@media (min-width: 48rem) {
+  .cg-pricing__tiers {
+    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
+    align-items: start;
+  }
+}
+
+.cg-pricing__tier {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cg-s5);
+  padding: var(--cg-s8);
+  border: 1px solid var(--cg-line);
+  border-radius: var(--cg-radius-lg);
+  background: var(--cg-surface);
+  box-shadow: var(--cg-elevation-1);
+}
+
+/* The one visual cue emphasis earns: a lifted border and a shadow, never a
+   fill — this theme spends colour sparingly and reserves a solid accent
+   surface for `statCounter`'s own "impact" band. */
+.cg-pricing__tier[data-highlighted="true"] {
+  border-color: var(--cg-accent);
+  box-shadow: var(--cg-elevation-3);
+}
+
+.cg-pricing__name {
+  margin: 0;
+  font-size: var(--cg-text-lg);
+  font-weight: var(--cg-weight-semibold);
+  letter-spacing: var(--cg-tracking-snug);
+}
+
+.cg-pricing__price {
+  display: flex;
+  align-items: baseline;
+  gap: var(--cg-s1);
+  margin: 0;
+}
+
+.cg-pricing__amount {
+  font-size: var(--cg-text-3xl);
+  font-weight: var(--cg-weight-bold);
+  letter-spacing: var(--cg-tracking-tight);
+  color: var(--cg-accent);
+  font-variant-numeric: tabular-nums;
+}
+
+.cg-pricing__interval {
+  color: var(--cg-ink-muted);
+  font-size: var(--cg-text-sm);
+}
+
+.cg-pricing__features {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cg-s3);
+  margin: 0;
+  padding: var(--cg-s5) 0 0;
+  border-block-start: 1px solid var(--cg-line-soft);
+  list-style: none;
+  color: var(--cg-ink-muted);
+  font-size: var(--cg-text-sm);
+  line-height: var(--cg-leading-normal);
+}
+
+.cg-pricing__feature {
+  padding-inline-start: var(--cg-s5);
+  position: relative;
+}
+
+/* A hairline check mark drawn from two borders, matching `faq`'s own
+   no-icon-font discipline. */
+.cg-pricing__feature::before {
+  content: "";
+  position: absolute;
+  inset-inline-start: 0;
+  inset-block-start: 0.5em;
+  inline-size: 0.55em;
+  block-size: 0.3em;
+  border-inline-start: 2px solid var(--cg-accent);
+  border-block-end: 2px solid var(--cg-accent);
+  transform: translateY(-60%) rotate(-45deg);
+}
+
+.cg-pricing__action {
+  margin-block-start: auto;
+  padding-block-start: var(--cg-s2);
+}
+
+.cg-pricing__action .cg-action {
+  inline-size: 100%;
+  justify-content: center;
+}
+
+/* --- accordion → specification panels (blocks@2.0, RFC 0001) ------------- */
+
+.cg-panels {
+  max-inline-size: var(--cg-page-narrow);
+  margin-inline: auto;
+}
+
+.cg-panels__title {
+  margin: 0 0 var(--cg-s6);
+  font-size: var(--cg-text-2xl);
+  line-height: var(--cg-leading-snug);
+  letter-spacing: var(--cg-tracking-tight);
+  font-weight: var(--cg-weight-bold);
+  text-wrap: balance;
+}
+
+.cg-panels__items {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cg-s3);
+  margin: 0;
+}
+
+.cg-panels__item {
+  border: 1px solid var(--cg-line);
+  border-radius: var(--cg-radius-md);
+  background: var(--cg-surface);
+  transition: border-color var(--cg-duration) var(--cg-ease);
+}
+
+.cg-panels__item:has(.cg-panels__details[open]) {
+  border-color: var(--cg-line-strong);
+}
+
+.cg-panels__question {
+  display: flex;
+  align-items: center;
+  gap: var(--cg-s4);
+  padding: var(--cg-s5) var(--cg-s6);
+  font-weight: var(--cg-weight-semibold);
+  cursor: pointer;
+  list-style: none;
+}
+
+.cg-panels__question::-webkit-details-marker {
+  display: none;
+}
+
+.cg-panels__question-text {
+  flex: 1;
+}
+
+.cg-panels__details[open] .cg-panels__question {
+  color: var(--cg-accent);
+}
+
+/* A chevron drawn from two borders, rotating open — distinct from `faq`'s
+   plus/minus mark so the two disclosure widgets read as their own things. */
+.cg-panels__chevron {
+  flex: none;
+  inline-size: 0.6em;
+  block-size: 0.6em;
+  border-inline-end: 2px solid currentColor;
+  border-block-end: 2px solid currentColor;
+  transform: rotate(45deg);
+  transition: transform var(--cg-duration) var(--cg-ease);
+}
+
+.cg-panels__details[open] .cg-panels__chevron {
+  transform: rotate(-135deg);
+}
+
+.cg-panels__answer {
+  padding: 0 var(--cg-s6) var(--cg-s6);
+  color: var(--cg-ink-muted);
+  line-height: var(--cg-leading-relaxed);
+}
+
+.cg-panels__answer > :first-child {
+  margin-block-start: 0;
+}
+
+.cg-panels__answer > :last-child {
+  margin-block-end: 0;
+}
+
+/* --- statCounter → impact band (blocks@2.0, RFC 0001) -------------------- */
+
+/* The one block that spends a solid accent fill rather than this theme's
+   usual hairline-and-white restraint: a narrower, single-figure counter is
+   meant to read as a confident headline claim, not a quiet ledger entry —
+   `stats` already gives that quieter treatment its own place. */
+.cg-kpis {
+  padding: var(--cg-s10) var(--cg-s8);
+  border-radius: var(--cg-radius-lg);
+  background: var(--cg-accent);
+  color: var(--cg-accent-fg);
+}
+
+.cg-kpis__title {
+  margin: 0 0 var(--cg-s8);
+  font-size: var(--cg-text-xl);
+  line-height: var(--cg-leading-snug);
+  letter-spacing: var(--cg-tracking-tight);
+  font-weight: var(--cg-weight-bold);
+  text-wrap: balance;
+}
+
+.cg-kpis__items {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
+  gap: var(--cg-s8);
+  margin: 0;
+}
+
+.cg-kpi {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cg-s2);
+}
+
+.cg-kpi__label {
+  order: 2;
+  font-size: var(--cg-text-xs);
+  font-weight: var(--cg-weight-semibold);
+  letter-spacing: var(--cg-tracking-wide);
+  text-transform: uppercase;
+  opacity: 0.82;
+}
+
+.cg-kpi__value {
+  order: 1;
+  margin: 0;
+  font-size: var(--cg-text-3xl);
+  font-weight: var(--cg-weight-bold);
+  line-height: var(--cg-leading-tight);
+  letter-spacing: var(--cg-tracking-tight);
+  font-variant-numeric: tabular-nums;
+}
+
+/* --- logoStrip → trust band (blocks@2.0, RFC 0001) ------------------------ */
+
+/* Denser and full-colour, unlike `logos`'s held-back grayscale client
+   cards: a press/"trusted by" strip reads as a fact, not an invitation to
+   click, so nothing here dims until interaction. A tinted, full-width band
+   (the same flat surface `[data-variant-background="muted"]` composes
+   elsewhere) is what turns this into a "trust band" placed right under the
+   hero rather than a bare row of marks floating on the page canvas. */
+.cg-logo-band {
+  max-inline-size: none;
+  margin: 0;
+  padding: var(--cg-s8) var(--cg-gutter);
+  background: var(--cg-surface-sunken);
+  border-block: 1px solid var(--cg-line-soft);
+}
+
+.cg-logo-band__items {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 0;
+  margin-inline: auto;
+  padding: 0;
+  max-inline-size: var(--cg-page);
+  list-style: none;
+}
+
+.cg-logo-band__item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--cg-s3) var(--cg-s6);
+  border-inline-start: 1px solid var(--cg-line-soft);
+}
+
+.cg-logo-band__item:first-child {
+  border-inline-start: 0;
+}
+
+.cg-logo-band__image {
+  block-size: var(--cg-s8);
+  inline-size: auto;
+  max-inline-size: 100%;
+  object-fit: contain;
+}
+
+.cg-logo-band__caption {
+  margin-block-start: var(--cg-s5);
+  color: var(--cg-ink-subtle);
+  font-size: var(--cg-text-xs);
+  font-weight: var(--cg-weight-semibold);
+  letter-spacing: var(--cg-tracking-wide);
+  text-transform: uppercase;
+  text-align: center;
+}