:root {
  --color-background-primary: #ffffff;   /* white — main card background */
  --color-background-secondary: #ffffff; /* light gray — image area background */
  --color-text-primary: #111111;         /* dark — titles */
  --color-text-secondary: #666666;       /* muted — descriptions */
  --color-border-tertiary: #e0e0e0;      /* light — card borders */
  --color-border-secondary: #cccccc;     /* slightly darker — divider */
}

  @import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@700&family=Source+Sans+3:wght@400;500;600&display=swap');
  * { box-sizing: border-box; margin: 0; padding: 0; }

  .ps-wrap { padding: 2rem 0; font-family: 'Source Sans 3', sans-serif; }

  .ps-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(16px, 2.5vw, 28px);
  }

  .ps-card {
    background: var(--color-background-primary);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 0.5px solid var(--color-border-tertiary);
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
    cursor: default;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
    margin-left: 2%;
    margin-right: 2%;
  }
  .ps-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,0.13); transform: translateY(-4px); }

  .ps-img-area {
    position: relative;
    width: 100%;
    height: clamp(160px, 18vw, 180px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-background-secondary);
    padding: 20px;
    border-bottom: 1px solid #e0e0e0;
  }
  .ps-img-area img { max-width: 100%; max-height: 100%; object-fit: contain; }
  /* wrapper div around logo image — makes img fill the area correctly */
  .ps-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }
  .ps-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
  .ps-logo-text {
    font-family: 'Merriweather', serif;
    font-size: clamp(22px, 4vw, 34px);
    font-weight: 700;
    color: var(--color-text-secondary);
    opacity: 0.3;
  }

  .ps-badge {
    position: absolute; top: 12px; left: 12px;
    padding: 5px 11px; font-size: 10px; font-weight: 600;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: #fff; border-radius: 3px;
  }

  .ps-body {
    padding: clamp(14px, 3vw, 22px);
    display: flex; flex-direction: column; gap: 10px; flex: 1;
  }
  .ps-name {
    font-family: 'Merriweather', serif;
    font-size: clamp(14px, 2vw, 17px);
    font-weight: 700; line-height: 1.35;
    color: var(--color-text-primary);
  }
  .ps-desc {
    font-size: clamp(12px, 1.5vw, 13.5px);
    color: var(--color-text-secondary);
    line-height: 1.65; flex: 1;
  }

  .ps-divider {
    display: block;
    width: 100%;
    height: 1px;
    background-color: #d0d0d0;
    margin: 4px 0;
    flex-shrink: 0;
  }

  .ps-btn {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600;
    font-family: 'Source Sans 3', sans-serif;
    letter-spacing: 0.04em; text-transform: uppercase;
    text-decoration: none; padding: 9px 0;
    background: transparent; border: none;
    cursor: pointer; width: fit-content;
    transition: gap 0.2s ease;
  }
  .ps-btn:hover { gap: 10px; }
  .ps-btn svg { width: 13px; height: 13px; flex-shrink: 0; }

  .c1 .ps-badge { background: #00bcd4; }
  .c1 .ps-btn { color: #00bcd4; } .c1 .ps-btn svg { stroke: #00bcd4; }
  .c2 .ps-badge { background: #0097a7; }
  .c2 .ps-btn { color: #0097a7; } .c2 .ps-btn svg { stroke: #0097a7; }
  .c3 .ps-badge { background: #00838f; }
  .c3 .ps-btn { color: #00838f; } .c3 .ps-btn svg { stroke: #00838f; }
  .c4 .ps-badge { background: #006064; }
  .c4 .ps-btn { color: #006064; } .c4 .ps-btn svg { stroke: #006064; }

  /* Tablet: 2 columns */
  @media (max-width: 1199px) { .ps-grid { grid-template-columns: repeat(1, 1fr); } }
  /* Mobile: 1 column + bigger logo area */
  @media (max-width: 600px) {
    .ps-grid { grid-template-columns: 1fr; }
    .ps-img-area { height: 200px; }
    .ps-logo img { max-height: 140px; }
  }