/* Design case studies (CTPOD first): a hero with a wide cover, then numbered sections built
   around app screens - brand and type panels, device galleries on tinted panels, a photo
   beside a screen, annotated screens. Shares the story layout's frame (rail, ink #172125,
   "View other works" ending from casestudystory.css). Sizes follow the Figma design at
   1440 wide, where 1rem = 10px. */

.csd-hero,
.csd-section {
  --csd-ink: #172125;
  --csd-muted: #aab6b5;
  --csd-mist: #d8e5e1;
  --csd-card: #1e2d31;
  --csd-panel: #223136;
  --csd-mint: #72cda3;
  --csd-orange: #f77b46;
  --csd-paper: #f8f6f2;
  --csd-soft: #c5cac8;
  --csd-slab: #202d32;
  --csd-heading: linear-gradient(8.15deg, #dad8d7 14.687%, #f77b46 87.945%);
  color: #fff;
  font-family: "Spline Sans", sans-serif;
}
/* reset.css paints every p #333; here text takes its panel's colour unless a rule below sets one */
.csd-hero :where(p, li),
.csd-section :where(p, li, figcaption) {
  color: inherit;
}

/* ---------- hero ---------- */
.csd-hero {
  position: relative;
  padding-top: 16.2rem;
  padding-bottom: 10.4rem;
}
.csd-crumbs {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 4.4rem;
  font-family: "Satoshi-Medium";
  font-size: 1.6rem;
}
.csd-crumbs a,
.csd-crumbs span {
  color: #fff;
  text-decoration: none;
}
.csd-crumbs a:hover {
  text-decoration: underline;
}
.csd-crumbs-current {
  opacity: 0.4;
}
.csd-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 77.2rem) 30rem;
  justify-content: space-between;
  align-items: end;
  gap: 4rem;
}
.csd-hero-title {
  margin: 0 0 3.2rem;
  font-family: "Satoshi-Medium";
  font-size: clamp(6.4rem, 13.7vw, 19.7rem);
  font-weight: 500;
  line-height: 1.17;
  color: #fff;
}
.csd-hero-title--l {
  font-size: clamp(5.6rem, 10.3vw, 14.8rem);
}
.csd-hero-title--m {
  font-size: clamp(4.8rem, 7.2vw, 10.4rem);
}
.csd-hero-lede {
  font-size: 2.8rem;
  font-weight: 300;
  line-height: 1.4;
  opacity: 0.8;
}
.csd-hero-specs {
  padding-bottom: 2.1rem;
  font-family: "Satoshi-Bold";
}
.csd-hero-specs-title {
  margin: 0 0 2.1rem;
  font-family: "Satoshi-Bold";
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.28rem;
  text-transform: uppercase;
  color: #fff;
  opacity: 0.6;
}
.csd-hero-specs ul {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.csd-hero-specs li {
  font-size: 1.6rem;
  line-height: 1.6;
  opacity: 0.8;
}
.csd-hero-picture {
  margin: 18.1rem 0 0;
  overflow: hidden;
  border-radius: 12px;
  background: #1d2a2f;
}
.csd-cover {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- section copy ---------- */
.csd-section {
  display: flex;
  flex-direction: column;
  gap: 2.8rem;
  padding-bottom: 10.4rem;
}
.csd-eyebrow {
  font-family: "Satoshi-Medium";
  font-size: 1.6rem;
  line-height: 1.55;
  text-transform: uppercase;
  color: var(--csd-muted);
}
.csd-title {
  margin: 0;
  font-family: "Satoshi-Bold";
  font-size: 3.6rem;
  font-weight: 700;
  line-height: 1.25;
  background: var(--csd-heading);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.csd-body {
  max-width: 110.4rem;
}
.csd-body p {
  font-size: 2.2rem;
  line-height: 1.55;
  color: #fff;
}
.csd-body p + p {
  margin-top: 2.8rem;
}
.csd-body a {
  color: inherit;
}
.csd-quote {
  max-width: 114.4rem;
  margin: 0;
}
.csd-quote p {
  font-family: "Satoshi-Medium";
  font-size: 4.8rem;
  line-height: 1.25;
  color: #fff;
}

/* ---------- open text columns (challenge / approach, takeaways) ---------- */
.csd-columns {
  display: grid;
  grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr));
  gap: 4.8rem;
}
.csd-columns.csd-n3 {
  gap: 3.6rem;
}
.csd-column h3,
.csd-card h3 {
  margin: 0;
  font-family: "Satoshi-Bold";
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.55;
  color: #fff;
}
.csd-column p {
  margin-top: 2.4rem;
  font-size: 2.2rem;
  line-height: 1.55;
}
.csd-columns.csd-n3 .csd-column p {
  margin-top: 2rem;
}

/* ---------- numbered cards ---------- */
.csd-cards {
  display: grid;
  grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
  gap: 2.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.csd-card {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  padding: 2.8rem;
  border-radius: 10px;
  background: var(--csd-card);
}
.csd-cards.csd-n4 .csd-card {
  padding: 2.4rem;
}
.csd-card-label {
  font-family: "Satoshi-Bold";
  font-size: 1.8rem;
  line-height: 1.55;
  color: var(--csd-mint);
}
.csd-card p:not(.csd-card-label) {
  font-size: 2rem;
  line-height: 1.55;
}

/* ---------- brand + type foundation ---------- */
.csd-foundation {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 2.8rem;
}
.csd-brand,
.csd-type {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
}
.csd-brand {
  gap: 3.6rem;
  padding: 4.8rem;
  background: #dde9e1;
  color: var(--csd-ink);
}
.csd-brand-label {
  font-family: "Satoshi-Medium";
  font-size: 1.6rem;
  line-height: 1.55;
  text-transform: uppercase;
  color: #365547;
}
.csd-brand-name {
  font-family: "Satoshi-Bold";
  font-size: clamp(5.6rem, 6.25vw, 9rem);
  line-height: 1.25;
}
.csd-brand-tagline {
  font-family: "Satoshi-Bold";
  font-size: 3.8rem;
  line-height: 1.25;
}
.csd-brand-text {
  font-size: 2rem;
  line-height: 1.55;
  color: #365547;
}
.csd-type {
  gap: 2.4rem;
  padding: 4rem;
  background: var(--csd-panel);
}
.csd-type-title {
  font-family: "Satoshi-Bold";
  font-size: 2.8rem;
  line-height: 1.55;
}
.csd-type-label {
  font-family: "Satoshi-Medium";
  font-size: 1.6rem;
  line-height: 1.55;
  text-transform: uppercase;
  color: var(--csd-muted);
}
/* the app's own typeface: a Google Font named on the block, else Helvetica (Roboto in Figma) */
.csd-type-sample,
.csd-type-lines {
  font-family: var(--csd-type-font, Roboto), "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.csd-type-sample {
  font-size: 9rem;
  font-weight: 700;
  line-height: 1.25;
}
.csd-type-lines {
  font-size: 2.6rem;
  line-height: 1.55;
  color: var(--csd-mist);
}
.csd-swatches {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.csd-swatches li {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  font-size: 1.6rem;
  line-height: 1.55;
  color: var(--csd-mist);
}
.csd-swatch {
  height: 6rem;
  border-radius: 8px;
}

/* plum: a dark brand card for products with a dark interface */
.csd-brand--plum .csd-brand {
  gap: 3.2rem;
  padding: 4.4rem;
  background: #2b1e35;
  color: #fff;
}
.csd-brand--plum .csd-brand-label {
  color: #e6b9cf;
}
.csd-brand--plum .csd-brand-name {
  font-size: clamp(4.8rem, 4.65vw, 6.7rem);
}
.csd-brand--plum .csd-brand-tagline {
  font-size: 4.5rem;
}
.csd-brand--plum .csd-brand-text {
  color: #d4c4d8;
}
.csd-brand--plum .csd-type {
  gap: 2.2rem;
}
.csd-brand--plum .csd-type-sample {
  font-size: 9.4rem;
  font-weight: 600;
}
.csd-brand--plum .csd-type-lines {
  font-size: 2.5rem;
}
.csd-brand--plum .csd-swatch {
  height: 5.6rem;
}

/* ---------- device screens ---------- */
/* exported at 2x and drawn at its Figma width (--w, in px at 1440) */
.csd-device {
  display: block;
  width: calc(var(--w, 236) * 0.1rem);
  max-width: 100%;
  height: auto;
}
.csd-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.csd-screen figcaption {
  align-self: stretch;
}
.csd-screen,
.csd-panel,
.csd-annotated-screen {
  margin: 0;
}

/* gallery: devices with captions on a tinted panel; three-up sits wider apart than four-up */
.csd-gallery {
  display: grid;
  grid-template-columns: repeat(var(--n, 4), minmax(0, 23.6rem));
  justify-content: center;
  align-items: start;
  gap: 3.2rem;
  padding: 8.4rem;
  border-radius: 12px;
}
.csd-gallery.csd-n3 {
  grid-template-columns: repeat(3, minmax(0, 26.8rem));
  gap: 6rem;
  padding: 14.2rem 8.4rem;
}
.csd-tone--sage { background: #dde9e1; }
.csd-tone--sand { background: #e9e3d8; }
.csd-tone--lavender { background: #e3e1ed; }
.csd-tone--lilac { background: #e4e0f2; }
.csd-tone--ink { background: var(--csd-panel); }
.csd-screen figcaption {
  margin-top: 2.2rem;
  font-size: 1.8rem;
  line-height: 1.55;
  color: var(--csd-ink);
}
.csd-tone--ink .csd-screen figcaption {
  color: var(--csd-mist);
}
/* spread: columns share the panel, devices centred in them */
.csd-gallery.csd-gallery--spread {
  grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
  gap: 4.8rem;
  padding: 6.4rem;
}
.csd-gallery--spread .csd-screen figcaption {
  margin-top: 2.4rem;
  font-size: 2rem;
}
.csd-align--center {
  align-items: center;
}
.csd-screen-title {
  display: block;
  font-family: "Satoshi-Bold";
  font-size: 2.4rem;
  line-height: 1.55;
  color: var(--csd-ink);
}
.csd-screen-text {
  display: block;
  margin-top: 2.6rem;
  color: #344047;
}

/* photo beside a screen on a green panel; the photo takes the panel's height */
.csd-photo-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.8rem;
}
.csd-photo {
  margin: 0;
  overflow: hidden;
  border-radius: 12px;
}
.csd-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.csd-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4rem;
  padding: 4.4rem;
  border-radius: 12px;
  background: #263c36;
}
.csd-panel-label {
  align-self: stretch;
  font-family: "Satoshi-Medium";
  font-size: 1.6rem;
  line-height: 1.55;
  text-transform: uppercase;
  color: #b5d4c4;
}
.csd-panel figcaption {
  align-self: stretch;
  font-size: 1.8rem;
  line-height: 1.55;
  color: #e2ede7;
}

.csd-photo-panel--wide {
  grid-template-columns: minmax(0, 742fr) minmax(0, 438fr);
}
.csd-panel--slate .csd-panel {
  padding: 4rem;
  background: #1f2a36;
}
.csd-panel--slate .csd-panel-label {
  color: #aabbcb;
}
.csd-panel--slate .csd-panel figcaption {
  font-size: 2rem;
  color: #dce5eb;
}

/* side-by-side panels: heading, one or two screens, a note; two-screen panels run wider */
.csd-panels {
  display: flex;
  align-items: flex-start;
  gap: 2.8rem;
}
.csd-card-panel {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  gap: 2.6rem;
  min-width: 0;
  padding: 4rem;
  border-radius: 12px;
  color: #fff;
}
.csd-card-panel.csd-screens-2 {
  flex-grow: 1.52;
  gap: 2.8rem;
}
.csd-card-panel h3 {
  align-self: stretch;
  margin: 0;
  font-family: "Satoshi-Bold";
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.55;
  color: inherit;
}
.csd-card-panel-screens {
  display: flex;
  align-self: stretch;
  justify-content: center;
  gap: 3.2rem;
}
.csd-card-panel-screens .csd-screen {
  flex: 1 1 0;
  min-width: 0;
}
.csd-card-panel .csd-screen figcaption {
  margin-top: 2.4rem;
  font-size: 2rem;
  color: inherit;
}
.csd-card-panel-note {
  align-self: stretch;
  font-size: 2rem;
  line-height: 1.55;
  color: var(--csd-mist);
}
.csd-tone--plum { background: #292334; }
.csd-tone--slate { background: #22333d; }
.csd-tone--steel { background: #29343a; }
.csd-tone--mist { background: #e1e8e9; color: var(--csd-ink); }
.csd-tone--mist .csd-card-panel-note {
  font-size: 1.8rem;
  color: #3c4e56;
}

/* one screen with the design decisions beside it */
.csd-annotated {
  display: grid;
  grid-template-columns: 26.8rem minmax(0, 1fr);
  align-items: center;
  gap: 6.4rem;
  padding: 6.4rem;
  border-radius: 12px;
  background: var(--csd-panel);
}
.csd-annotated-screen figcaption {
  margin-top: 1.6rem;
  font-size: 1.6rem;
  color: var(--csd-mist);
}
.csd-annotated-points {
  display: flex;
  flex-direction: column;
  gap: 3.4rem;
}
.csd-annotated-points h3 {
  margin: 0;
  font-family: "Satoshi-Bold";
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.55;
  color: #fff;
}
.csd-annotated-points p {
  font-size: 2.2rem;
  line-height: 1.55;
  color: var(--csd-mist);
}

/* ==========================================================================
   Editorial style (Grahm Realty): orange chapter labels, larger headings, softer
   body text, bordered cards, plus the visuals it introduced
   ========================================================================== */
.csd-hero-title--ml {
  font-size: clamp(5.2rem, 8.05vw, 11.6rem);
}
.csd-hero--editorial .csd-hero-grid {
  grid-template-columns: minmax(0, 87rem) 30rem;
}
.csd-hero--editorial .csd-hero-picture {
  margin-top: 11.6rem;
}
.csd-hero-details {
  display: grid;
  grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
  gap: 4rem;
  margin: 2.6rem 0 0;
  font-family: "Satoshi-Medium";
}
.csd-hero-details dt {
  margin-bottom: 1rem;
  font-size: 1.4rem;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--csd-orange);
}
.csd-hero-details dd {
  margin: 0;
  font-size: 2rem;
  line-height: 1.4;
  color: var(--csd-paper);
}

.csd-section--editorial .csd-eyebrow {
  line-height: 1.3;
  white-space: pre-wrap;
  color: var(--csd-orange);
}
.csd-section--editorial .csd-title {
  max-width: 112rem;
  font-size: 4rem;
  background-image: linear-gradient(9.74deg, #dad8d7 14.687%, #f77b46 87.945%);
}
.csd-section--editorial .csd-body {
  max-width: 112rem;
}
.csd-section--editorial .csd-body p {
  line-height: 1.5;
  color: var(--csd-soft);
}
.csd-section--editorial .csd-card {
  gap: 1.8rem;
  border: 1px solid #39464a;
  border-radius: 16px;
  background: var(--csd-slab);
}
.csd-section--editorial .csd-card-label {
  font-family: "Satoshi-Medium";
  font-size: 1.6rem;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--csd-orange);
}
.csd-section--editorial .csd-card h3 {
  font-size: 2.5rem;
  line-height: 1.28;
  color: var(--csd-paper);
}
.csd-section--editorial .csd-card p:not(.csd-card-label) {
  line-height: 1.5;
  color: var(--csd-soft);
}
/* a row of five short stages */
.csd-section--editorial .csd-cards.csd-n5 {
  gap: 1.6rem;
}
.csd-section--editorial .csd-cards.csd-n5 .csd-card {
  gap: 1.2rem;
  padding: 2rem;
  border: 0;
  border-radius: 12px;
}
.csd-section--editorial .csd-cards.csd-n5 .csd-card-label {
  font-size: 1.5rem;
}
.csd-section--editorial .csd-cards.csd-n5 .csd-card h3 {
  font-size: 2rem;
  line-height: 1.35;
}
.csd-note {
  font-size: 1.7rem;
  line-height: 1.5;
  color: #99a6a7;
}

/* colour tiles */
.csd-palette {
  display: grid;
  grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
  gap: 1.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.csd-tile {
  display: flex;
  flex-direction: column;
  gap: 3.8rem;
  padding: 2.4rem;
  border-radius: 12px;
  line-height: 1.3;
  color: #1b2632;
}
.csd-tile.is-light {
  color: var(--csd-paper);
}
.csd-tile-name {
  font-family: "Satoshi-Medium";
  font-size: 1.9rem;
}
.csd-tile-value {
  font-family: "Satoshi-Bold";
  font-size: 2.4rem;
}

/* typeface specimens, a large card beside a small one */
.csd-specimens {
  display: flex;
  align-items: flex-start;
  gap: 2.4rem;
}
.csd-specimen {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 3.6rem;
  border-radius: 16px;
  color: #1b2632;
}
.csd-specimen--large {
  flex: 704 1 0;
  gap: 2.2rem;
}
.csd-specimen--small {
  flex: 480 1 0;
  gap: 2rem;
}
.csd-specimen-label {
  font-family: "Satoshi-Medium";
  font-size: 1.4rem;
  line-height: 1.3;
  text-transform: uppercase;
  color: #d2522e;
}
.csd-specimen-sample {
  line-height: 1.25;
}
.csd-specimen--large .csd-specimen-sample {
  font-size: 4.3rem;
}
.csd-specimen--small .csd-specimen-sample {
  font-size: 3.1rem;
}
.csd-specimen-text {
  line-height: 1.45;
}
.csd-specimen--large .csd-specimen-text {
  font-size: 2rem;
}
.csd-specimen--small .csd-specimen-text {
  font-size: 2.2rem;
}

/* figures, two to a row: framed screenshots with text below, or tall pictures with text above */
.csd-figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 2.8rem 2.4rem;
}
.csd-figures--plain {
  gap: 3.2rem;
}
.csd-figure {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
  margin: 0;
}
.csd-figures--plain .csd-figure {
  gap: 2rem;
}
.csd-figure-frame {
  padding: 8px;
  border: 1px solid #39464a;
  border-radius: 14px;
  background: var(--csd-slab);
}
.csd-figure-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}
.csd-figures--plain .csd-figure-img {
  border-radius: 10px;
}
.csd-figure h3 {
  margin: 0;
  font-family: "Satoshi-Bold";
  font-size: 2.3rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--csd-paper);
}
.csd-figures--plain .csd-figure h3 {
  font-size: 2.6rem;
}
.csd-figure > p {
  font-size: 2rem;
  line-height: 1.5;
  color: var(--csd-soft);
}
.csd-notes {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 2.8rem;
  border-radius: 14px;
  background: var(--csd-slab);
}
.csd-notes h4 {
  margin: 0;
  font-family: "Satoshi-Bold";
  font-size: 2.5rem;
  line-height: 1.3;
  color: var(--csd-paper);
}
.csd-notes p {
  font-size: 2rem;
  line-height: 1.5;
  color: var(--csd-soft);
}

/* wide picture with an optional caption */
.csd-picture {
  margin: 0;
}
.csd-picture-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}
.csd-picture figcaption {
  margin-top: 2rem;
  font-family: "Satoshi-Medium";
  font-size: 1.8rem;
  line-height: 1.4;
  color: var(--csd-soft);
}

/* split: a wide picture with its notes in a box beside it */
.csd-annotated.csd-annotated--split {
  grid-template-columns: minmax(0, 720fr) minmax(0, 456fr);
  align-items: start;
  gap: 3.2rem;
  padding: 0;
  background: none;
}
.csd-annotated--split .csd-annotated-screen figcaption {
  margin-top: 1.6rem;
  font-family: "Satoshi-Medium";
  font-size: 1.8rem;
  line-height: 1.4;
  color: var(--csd-soft);
}
.csd-annotated--split .csd-annotated-points {
  gap: 2.6rem;
  padding: 2.4rem;
  border-radius: 14px;
  background: var(--csd-slab);
}
.csd-annotated--split .csd-annotated-points h3 {
  font-size: 2.7rem;
  line-height: 1.3;
  color: var(--csd-paper);
}
.csd-annotated--split .csd-annotated-points p {
  font-size: 2.1rem;
  line-height: 1.5;
  color: var(--csd-soft);
}

/* callouts: a titled note, or a large quote with a label */
.csd-callout {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: 3rem;
  border-radius: 14px;
  background: var(--csd-slab);
}
.csd-callout h3 {
  margin: 0;
  font-family: "Satoshi-Bold";
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--csd-paper);
}
.csd-callout > p:not(.csd-callout-label) {
  font-size: 2.1rem;
  line-height: 1.5;
  color: var(--csd-soft);
}
.csd-callout--quote {
  gap: 1.8rem;
  padding: 4rem;
  border-radius: 16px;
}
.csd-callout blockquote {
  margin: 0;
}
.csd-callout blockquote p {
  font-family: "Satoshi-Medium";
  font-size: 4.3rem;
  line-height: 1.35;
  color: var(--csd-paper);
}
.csd-callout-label {
  font-family: "Satoshi-Medium";
  font-size: 1.4rem;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--csd-orange);
}

/* ==========================================================================
   Additions for NuroLux: framed pictures and splits, phone frames, uneven figure
   pairs, prominent callouts and brand signature cards
   ========================================================================== */
.csd-picture .csd-figure-frame + figcaption {
  margin-top: 2.8rem;
}
.csd-annotated.csd-annotated--split_wide {
  grid-template-columns: minmax(0, 744fr) minmax(0, 432fr);
  align-items: start;
  gap: 3.2rem;
  padding: 0;
  background: none;
}
.csd-annotated--split_wide .csd-annotated-screen figcaption {
  margin-top: 1.6rem;
  font-family: "Satoshi-Medium";
  font-size: 1.8rem;
  line-height: 1.4;
  color: var(--csd-soft);
}
.csd-annotated--split_wide .csd-annotated-points {
  gap: 2.2rem;
  padding: 2.8rem;
  border-radius: 16px;
  background: var(--csd-slab);
}
.csd-annotated--split_wide .csd-annotated-points h3 {
  font-size: 2.7rem;
  line-height: 1.3;
  color: var(--csd-paper);
}
.csd-annotated--split_wide .csd-annotated-points p {
  font-size: 2.1rem;
  line-height: 1.5;
  color: var(--csd-soft);
}

.csd-figures--narrow_wide {
  grid-template-columns: minmax(0, 340fr) minmax(0, 832fr);
  gap: 3.6rem;
}
.csd-figure-caption {
  font-family: "Satoshi-Medium";
  font-size: 1.8rem;
  line-height: 1.4;
  color: var(--csd-soft);
}
.csd-figure-frame--phone {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
  padding: 10px;
  border-radius: 28px;
}
.csd-figure-frame--phone .csd-figure-img {
  border-radius: 20px;
}
.csd-figures--narrow_wide .csd-figure {
  gap: 2.2rem;
}
.csd-figures--narrow_wide .csd-figure h3 {
  font-size: 2.7rem;
}
.csd-figures--narrow_wide .csd-figure > p:not(.csd-figure-caption) {
  font-size: 2.1rem;
}

.csd-callout--large,
.csd-callout--xlarge {
  gap: 1.4rem;
}
.csd-callout--large h3,
.csd-callout--xlarge h3 {
  font-family: "Satoshi-Medium";
  font-size: 3.1rem;
  font-weight: 500;
  line-height: 1.35;
}

/* brand signature cards: logo, typography, shape + action */
.csd-brand-cards {
  display: flex;
  align-items: flex-start;
  gap: 2.4rem;
  font-family: var(--bc-font), "Spline Sans", sans-serif;
}
.csd-bcard {
  display: flex;
  flex: 340 1 0;
  flex-direction: column;
  gap: 1.8rem;
  min-width: 0;
  padding: 2.8rem;
  border-radius: 16px;
}
.csd-bcard--logo {
  flex-basis: 0;
  flex-grow: 480;
  gap: 2.8rem;
  padding: 4rem;
}
.csd-bcard--action {
  gap: 2.4rem;
}
.csd-brand-cards .csd-bcard p {
  font-family: inherit;
}
.csd-bcard-logo {
  display: block;
  width: 40rem;
  max-width: 100%;
  height: auto;
}
.csd-bcard-label {
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--bc-accent);
}
.csd-brand-cards .csd-bcard p.csd-bcard-name {
  font-family: "Satoshi-Bold", sans-serif;
  font-size: 2.4rem;
  line-height: 1.25;
  color: var(--bc-accent);
}
.csd-bcard-text {
  font-size: 1.8rem;
  line-height: 1.4;
  color: var(--bc-ink);
}
.csd-bcard-lead {
  font-size: 2rem;
  line-height: 1.45;
  color: var(--bc-accent);
}
.csd-bcard-lead--ink {
  color: var(--bc-ink);
}
.csd-bcard-button {
  display: block;
  padding: 1.6rem;
  border-radius: 0 0 0 20px;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  color: #fff;
}

/* ==========================================================================
   Additions for Kreatorcity: extra-large statement, stage cards with text,
   score panel, two-card brand row with per-entry fonts, plain photo in a set
   ========================================================================== */
.csd-callout--xlarge {
  gap: 1.8rem;
  padding: 3.6rem;
  border-radius: 16px;
}
.csd-callout--xlarge h3 {
  font-size: 3.6rem;
}
.csd-callout--xlarge > p:not(.csd-callout-label) {
  font-size: 2.2rem;
}
.csd-section--editorial .csd-cards.csd-n5 .csd-card:has(> p:not(.csd-card-label)) {
  gap: 1.4rem;
}
.csd-section--editorial .csd-cards.csd-n5 .csd-card:has(> p:not(.csd-card-label)) h3 {
  font-size: 2.5rem;
  line-height: 1.3;
}
.csd-section--editorial .csd-cards.csd-n5 .csd-card p:not(.csd-card-label) {
  font-size: 1.9rem;
}

.csd-stat-panel {
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
  padding: 3rem;
  border-radius: 16px;
  background: var(--csd-slab);
}
.csd-stat-panel h3 {
  margin: 0;
  font-family: "Satoshi-Bold";
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--csd-paper);
}
.csd-stat-panel-text {
  font-size: 1.9rem;
  line-height: 1.5;
  color: var(--csd-soft);
}
.csd-stat-panel-stats {
  display: grid;
  grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr));
  gap: 1.6rem;
  margin: 0;
}
.csd-stat-panel-stats > div {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: 2rem;
  border-radius: 10px;
  background: var(--csd-ink);
}
.csd-stat-panel-stats dt {
  font-family: "Satoshi-Bold";
  font-size: 3.8rem;
  line-height: 1.25;
  color: var(--stat-colour);
}
.csd-stat-panel-stats dd {
  margin: 0;
  font-family: "Satoshi-Medium";
  font-size: 1.8rem;
  line-height: 1.4;
  color: var(--csd-paper);
}

/* two-card brand row: wordmark beside the type system */
.csd-brand-cards.csd-n2 .csd-bcard {
  flex: 1 1 0;
  gap: 2rem;
  padding: 3.2rem;
}
.csd-brand-cards.csd-n2 .csd-bcard--logo {
  gap: 2.8rem;
  padding: 3.6rem;
}
.csd-brand-cards.csd-n2 .csd-bcard-logo {
  width: 41rem;
}
.csd-brand-cards.csd-n2 .csd-bcard-lead {
  font-size: 2.2rem;
  line-height: 1.5;
}
.csd-brand-cards .csd-bcard p.csd-bcard-name--large {
  font-size: 3.1rem;
  line-height: 1.3;
}
.csd-brand-cards .csd-bcard p.csd-bcard-name--ink {
  color: var(--bc-ink);
}

/* ==========================================================================
   Additions for Klaster: three-up phone screens in device frames, a phone
   beside a wide notes panel, notes boxes with a highlight line and small print,
   a type card with a family heading, and a full-width action card
   ========================================================================== */
.csd-figures.csd-figures--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.4rem;
}
.csd-figures.csd-figures--third_wide {
  grid-template-columns: minmax(0, 386.667fr) minmax(0, 789.333fr);
  gap: 3.2rem;
}
.csd-figures--three .csd-figure,
.csd-figures--third_wide .csd-figure {
  gap: 2rem;
}
.csd-figures--three .csd-figure h3,
.csd-figures--third_wide .csd-figure h3 {
  font-size: 2.5rem;
}
.csd-figures--third_wide .csd-figure + .csd-figure {
  gap: 2.6rem;
}
.csd-figures--third_wide .csd-figure + .csd-figure h3 {
  font-size: 2.9rem;
}
.csd-figures--third_wide .csd-figure + .csd-figure > p {
  font-size: 2.2rem;
}
.csd-figures--device .csd-figure-frame,
.csd-figure-frame--device {
  padding: 12px;
  border-radius: 24px;
}
.csd-figures--device .csd-figure-img,
.csd-figure-frame--device .csd-figure-img {
  border-radius: 12px;
}
.csd-figures--three .csd-notes {
  gap: 2.2rem;
  border-radius: 16px;
}
.csd-figures--three .csd-notes h4 {
  font-size: 2.7rem;
}
.csd-figures--three .csd-notes p {
  font-size: 2.1rem;
}
.csd-notes p.csd-notes-highlight {
  font-family: "Satoshi-Medium";
  font-size: 2.3rem;
  line-height: 1.4;
  color: #70d6c5;
}
.csd-section .csd-annotated-points p.csd-small-print,
.csd-section .csd-notes p.csd-small-print {
  font-size: 1.7rem;
  line-height: 1.5;
  color: #99a6a7;
}

.csd-annotated.csd-annotated--device_notes {
  grid-template-columns: minmax(0, 432fr) minmax(0, 744fr);
  align-items: start;
  gap: 3.2rem;
  padding: 0;
  background: none;
}
.csd-annotated--device_notes .csd-annotated-screen figcaption {
  margin-top: 1.8rem;
  font-family: "Satoshi-Medium";
  font-size: 1.8rem;
  line-height: 1.4;
  color: var(--csd-soft);
}
.csd-annotated--device_notes .csd-annotated-points {
  gap: 2.6rem;
  padding: 3.2rem;
  border-radius: 16px;
  background: var(--csd-slab);
}
.csd-annotated--device_notes .csd-annotated-points h3 {
  font-size: 3rem;
  line-height: 1.3;
  color: var(--csd-paper);
}
.csd-annotated--device_notes .csd-annotated-points p {
  font-size: 2.2rem;
  line-height: 1.5;
  color: var(--csd-soft);
}

/* four short stages in the editorial style */
.csd-section--editorial .csd-cards.csd-n4 .csd-card {
  gap: 1.6rem;
  padding: 2.4rem;
  border: 0;
  border-radius: 14px;
}
.csd-section--editorial .csd-cards.csd-n4 .csd-card h3 {
  font-size: 2.7rem;
  line-height: 1.3;
}

/* type card with a family heading and its weights */
.csd-brand-cards .csd-bcard p.csd-bcard-heading {
  font-family: "Satoshi-Bold", sans-serif;
  font-size: 4.6rem;
  line-height: 1.25;
  color: var(--bc-ink);
}
.csd-brand-cards .csd-bcard p.csd-bcard-name--small {
  font-size: 2.2rem;
  line-height: 1.4;
}
.csd-brand-cards .csd-bcard p.csd-bcard-text--foot {
  font-size: 1.9rem;
  line-height: 1.45;
}

/* full-width action card with a heading and a rounded gradient button */
.csd-brand-cards.csd-n1 .csd-bcard {
  gap: 2rem;
  padding: 3.2rem;
}
.csd-bcard-title {
  margin: 0;
  font-family: "Satoshi-Bold", sans-serif;
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--bc-accent);
}
.csd-bcard-button.csd-bcard-button--rounded {
  width: 50rem;
  max-width: 100%;
  padding: 2rem;
  border-radius: 10px;
  font-family: "Satoshi-Bold", sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
}
.csd-brand-cards.csd-n1 .csd-bcard-lead {
  font-size: 2.1rem;
  line-height: 1.5;
}

/* ---------- responsive ---------- */
@media only screen and (max-width: 1200px) {
  .csd-gallery,
  .csd-gallery.csd-n3,
  .csd-gallery.csd-gallery--spread {
    padding: 6rem 4rem;
    gap: 2.4rem;
  }
}

@media only screen and (max-width: 992px) {
  .csd-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
  .csd-hero-picture {
    margin-top: 8rem;
  }
  .csd-foundation,
  .csd-photo-panel {
    grid-template-columns: minmax(0, 1fr);
  }
  .csd-panels {
    flex-direction: column;
    align-items: stretch;
  }
  .csd-cards.csd-n4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .csd-photo {
    aspect-ratio: 4 / 5;
  }
  .csd-gallery {
    grid-template-columns: repeat(2, minmax(0, 23.6rem));
    row-gap: 4.8rem;
  }
}

@media only screen and (max-width: 768px) {
  .csd-hero {
    padding-bottom: 6rem;
  }
  .csd-hero-lede {
    font-size: 2rem;
  }
  .csd-hero-picture {
    margin-top: 5.6rem;
  }
  .csd-section {
    gap: 2.4rem;
    padding-bottom: 6rem;
  }
  .csd-title {
    font-size: 2.6rem;
  }
  .csd-body p,
  .csd-column p,
  .csd-annotated-points p {
    font-size: 1.7rem;
  }
  .csd-quote p {
    font-size: 3rem;
  }
  .csd-column h3,
  .csd-card h3,
  .csd-annotated-points h3 {
    font-size: 2.2rem;
  }
  .csd-columns,
  .csd-columns.csd-n3,
  .csd-cards,
  .csd-cards.csd-n4 {
    grid-template-columns: minmax(0, 1fr);
    gap: 3.2rem;
  }
  .csd-cards {
    gap: 1.6rem;
  }
  .csd-brand,
  .csd-type {
    gap: 2.4rem;
    padding: 2.8rem;
  }
  .csd-brand-tagline {
    font-size: 2.8rem;
  }
  .csd-type-sample {
    font-size: 6.4rem;
  }
  .csd-type-lines {
    font-size: 2rem;
  }
  .csd-swatches {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .csd-gallery,
  .csd-gallery.csd-n3,
  .csd-gallery.csd-gallery--spread {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4rem 2rem;
    padding: 4rem 2.4rem;
  }
  .csd-screen figcaption {
    font-size: 1.5rem;
  }
  .csd-panel,
  .csd-panel--slate .csd-panel,
  .csd-card-panel {
    padding: 3.2rem 2.4rem;
  }
  .csd-card-panel-screens {
    gap: 1.6rem;
  }
  .csd-card-panel h3 {
    font-size: 2.2rem;
  }
  .csd-annotated {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 4rem;
    padding: 4rem 2.4rem;
  }
  .csd-annotated-screen {
    width: min(26.8rem, 100%);
  }
  .csd-annotated-points {
    gap: 2rem;
  }
}

@media only screen and (max-width: 992px) {
  .csd-hero--editorial .csd-hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .csd-hero--editorial .csd-hero-picture {
    margin-top: 6.4rem;
  }
  .csd-palette,
  .csd-section--editorial .csd-cards.csd-n5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .csd-specimens {
    flex-direction: column;
    align-items: stretch;
  }
  .csd-annotated.csd-annotated--split {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media only screen and (max-width: 768px) {
  .csd-hero-details,
  .csd-figures,
  .csd-figures--plain {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.4rem;
  }
  .csd-figures--plain {
    gap: 4.8rem;
  }
  .csd-section--editorial .csd-title {
    font-size: 2.8rem;
  }
  .csd-specimen {
    padding: 2.4rem;
  }
  .csd-specimen--large .csd-specimen-sample {
    font-size: 3.2rem;
  }
  .csd-callout blockquote p {
    font-size: 2.8rem;
  }
  .csd-callout,
  .csd-callout--quote {
    padding: 2.4rem;
  }
}

@media only screen and (max-width: 992px) {
  .csd-annotated.csd-annotated--split_wide {
    grid-template-columns: minmax(0, 1fr);
  }
  .csd-brand-cards {
    flex-direction: column;
    align-items: stretch;
  }
}

@media only screen and (max-width: 768px) {
  .csd-figures.csd-figures--narrow_wide {
    grid-template-columns: minmax(0, 1fr);
    gap: 4.8rem;
  }
  .csd-figures--narrow_wide .csd-figure-frame--phone {
    width: min(34rem, 100%);
  }
  .csd-callout--large h3,
  .csd-callout--xlarge h3 {
    font-size: 2.4rem;
  }
}

@media only screen and (max-width: 992px) {
  .csd-stat-panel-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media only screen and (max-width: 768px) {
  .csd-stat-panel-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .csd-callout--xlarge {
    padding: 2.4rem;
  }
  .csd-callout--xlarge h3 {
    font-size: 2.6rem;
  }
}

@media only screen and (max-width: 992px) {
  .csd-figures.csd-figures--three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 4.8rem;
  }
  .csd-annotated.csd-annotated--device_notes {
    grid-template-columns: minmax(0, 1fr);
  }
  .csd-annotated--device_notes .csd-annotated-screen {
    max-width: 43.2rem;
  }
}

@media only screen and (max-width: 768px) {
  .csd-figures.csd-figures--three,
  .csd-figures.csd-figures--third_wide {
    grid-template-columns: minmax(0, 1fr);
    gap: 4.8rem;
  }
  .csd-figures--device .csd-figure-frame {
    width: min(38.6rem, 100%);
  }
  .csd-brand-cards .csd-bcard p.csd-bcard-heading {
    font-size: 3.6rem;
  }
}