/* ─────────────────────────────────────────
       UX DESIGN LANDING — PAGE-SPECIFIC STYLES
    ───────────────────────────────────────── */

    :root {
      --burgundy:  #330000;
      --off-white: #f8f6f3;
      --mid-gray:  #595959;   /* was #888 — now 7:1 on white, passes AA */
      --rule:      #ddd;
      --card-bg:   #fff;
      --accent:    #8b1a1a;

      /* Per-card brand accents — darkened for AA contrast on white */
      --pdc-gold:       #8a5e2a;
      --pdc-gold-lt:    rgba(200,149,90,0.22);
      --style-blue:     #3d6275;
      --style-blue-lt:  rgba(108,146,162,0.2);
      --beauty-pink:    #9e3555;
      --beauty-pink-lt: rgba(247,141,167,0.2);

      /* Keep original brand colors for decorative use (borders, top stripe) */
      --pdc-gold-vivid:    #c8955a;
      --style-blue-vivid:  #6C92A2;
      --beauty-pink-vivid: #F78DA7;
    }

    /* ── Page shell ── */
    #ux-page {
      padding: 100px 0 80px;
      background: var(--off-white);
      min-height: 100vh;
    }

    /* ── Hero header ── */
    .ux-hero {
      text-align: center;
      max-width: 680px;
      margin: 0 auto 36px;
      padding: 0 24px;
    }

    .ux-hero .kicker {
      font-family: 'Dosis', sans-serif;
      font-size: 15px;
      font-weight: 600;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--mid-gray);
      margin-bottom: 16px;
      display: block;
    }

    .ux-hero h1 {
      font-family: 'Dosis', sans-serif;
      font-size: 52px;
      font-weight: 400;
      color: var(--burgundy);
      line-height: 1.15;
      margin: 0 0 20px;
      letter-spacing: 0.15em;
      text-transform: uppercase;
    }

    .ux-hero h1 em {
      font-style: normal;
      font-weight: 300;
      letter-spacing: 0.2em;
    }

    .ux-hero p {
      font-family: 'Source Sans Pro', sans-serif;
      font-size: 18px;
      font-weight: 400;
      color: #444;
      line-height: 1.75;
      margin: 0;
    }

    .ux-hero-rule {
      width: 48px;
      height: 1px;
      background: var(--burgundy);
      margin: 24px auto 28px;
      opacity: 0.4;
    }

    /* ── Case study grid ── */
    .cs-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px;
    }

    /* ── Card ── */
    .cs-card {
      position: relative;
      display: flex;
      flex-direction: column;
      border-right: 1px solid var(--rule);
      padding: 0 40px 60px;
      transition: background 0.35s ease, box-shadow 0.35s ease;
      cursor: pointer;
    }

    .cs-card:last-child {
      border-right: none;
    }

    /* Per-card accent variable scoping — colored bg at rest */
    .cs-card--pdc {
      --card-accent:           var(--pdc-gold);
      --card-accent-vivid:     var(--pdc-gold-vivid);
      --card-accent-lt-border: #d4a87a;
      background: var(--pdc-gold-lt);
      border-top: 3px solid var(--pdc-gold-vivid);
    }

    .cs-card--style {
      --card-accent:           var(--style-blue);
      --card-accent-vivid:     var(--style-blue-vivid);
      --card-accent-lt-border: #87afc0;
      background: var(--style-blue-lt);
      border-top: 3px solid var(--style-blue-vivid);
    }

    .cs-card--beauty {
      --card-accent:           var(--beauty-pink);
      --card-accent-vivid:     var(--beauty-pink-vivid);
      --card-accent-lt-border: #e898b0;
      background: var(--beauty-pink-lt);
      border-top: 3px solid var(--beauty-pink-vivid);
    }

    /* ── HOVER: vivid accent background, white text ── */
    .cs-card--pdc:hover    { background: var(--pdc-gold-vivid); }
    .cs-card--style:hover  { background: var(--style-blue-vivid); }
    .cs-card--beauty:hover { background: var(--beauty-pink-vivid); }

    .cs-card:hover .cs-industry,
    .cs-card:hover .cs-desc     { color: rgba(255,255,255,0.85); }

    .cs-card:hover .cs-title    { color: #fff; }

    .cs-card:hover .cs-tag {
      color: #fff;
      border-color: rgba(255,255,255,0.55);
    }

    .cs-card:hover .cs-cta {
      color: #fff;
      border-color: #fff;
    }

    .cs-card:hover .cs-num {
      opacity: 0.25;
      color: #fff;
    }

    /* Card number — dark accent at rest */
    .cs-num {
      font-family: 'Dosis', sans-serif;
      font-size: 72px;
      font-weight: 300;
      color: var(--card-accent);
      line-height: 1;
      margin-bottom: 12px;
      transition: color 0.35s ease, opacity 0.35s ease;
      user-select: none;
      opacity: 0.75;
    }

    /* Thumbnail placeholder / image */
    .cs-thumb {
      width: 100%;
      aspect-ratio: 4/3;
      background: #e8e4df;
      overflow: hidden;
      margin-bottom: 28px;
      position: relative;
    }

    .cs-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.5s ease, opacity 0.3s ease;
    }

    .cs-card:hover .cs-thumb img {
      transform: scale(1.04);
    }

    /* Coming soon overlay for card 3 */
    .cs-thumb.coming-soon {
      background: #e8e3dd;
    }

    .cs-thumb.coming-soon::after {
      content: 'Coming Soon';
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Dosis', sans-serif;
      font-size: 15px;
      font-weight: 600;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--beauty-pink);
      opacity: 0.9;
      transition: color 0.35s ease;
    }

    /* SVG placeholder visual for cards without final images */
    .cs-thumb-svg {
      width: 100%;
      height: 100%;
      position: absolute;
      inset: 0;
    }

    /* Card metadata */
    .cs-industry {
      font-family: 'Dosis', sans-serif;
      font-size: 14px;
      font-weight: 600;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--mid-gray);
      margin-bottom: 10px;
      transition: color 0.35s ease;
    }

    .cs-title {
      font-family: 'Open Sans', sans-serif;
      font-size: 22px;
      font-weight: 700;
      color: var(--burgundy);
      line-height: 1.2;
      margin: 0 0 14px;
      text-transform: none !important;  /* override site-global h2 caps */
      letter-spacing: 0;
      transition: color 0.35s ease;
    }

    .cs-desc {
      font-family: 'Source Sans Pro', sans-serif;
      font-size: 17px;
      font-weight: 400;
      color: #444;
      line-height: 1.7;
      margin-bottom: 28px;
      flex: 1;
      transition: color 0.35s ease;
    }

    /* Deliverables tags */
    .cs-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin-bottom: 32px;
    }

    .cs-tag {
      font-family: 'Dosis', sans-serif;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--card-accent, var(--accent));
      border: 1px solid var(--card-accent-lt-border, #d4a9a9);
      padding: 5px 12px;
      border-radius: 2px;
      transition: color 0.35s ease, border-color 0.35s ease;
    }

    /* CTA link */
    .cs-cta {
      font-family: 'Dosis', sans-serif;
      font-size: 14px;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--card-accent, var(--burgundy));
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border-bottom: 1px solid var(--card-accent, var(--burgundy));
      padding-bottom: 3px;
      transition: color 0.35s ease, border-color 0.35s ease, gap 0.2s ease;
    }

    .cs-cta:hover {
      gap: 14px;
    }

    .cs-cta.disabled {
      color: var(--mid-gray);
      border-color: var(--mid-gray);
      pointer-events: none;
      opacity: 0.5;
    }

    .cs-cta-arrow {
      font-size: 16px;
      line-height: 1;
    }

    /* ── Section intro rule ── */
    .cs-top-rule {
      max-width: 1200px;
      margin: 0 auto 32px;
      padding: 0 24px;
      border-top: 2px solid var(--burgundy);
    }

    /* ── Responsive ── */
    @media (max-width: 900px) {
      .cs-grid {
        grid-template-columns: 1fr 1fr;
      }
      .cs-card:nth-child(2) {
        border-right: none;
      }
      .cs-card:nth-child(3) {
        border-right: none;
        border-top: 1px solid var(--rule);
        padding-top: 40px;
        margin-top: 0;
        grid-column: 1 / -1;
        max-width: 420px;
      }
    }

    @media (max-width: 600px) {
      .cs-grid {
        grid-template-columns: 1fr;
        padding: 0 20px;
      }
      .cs-card {
        border-right: none;
        border-bottom: 1px solid var(--rule);
        padding: 40px 0;
      }
      .cs-card:last-child {
        border-bottom: none;
      }
      .cs-card:nth-child(3) {
        max-width: 100%;
        grid-column: auto;
      }
      #ux-page {
        padding: 120px 0 60px;
      }
    }

    /* ── Entrance animations ── */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(20px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .ux-hero {
      animation: fadeUp 0.7s ease both;
    }

    .cs-top-rule {
      animation: fadeUp 0.7s 0.1s ease both;
    }

    .cs-card:nth-child(1) { animation: fadeUp 0.6s 0.2s ease both; }
    .cs-card:nth-child(2) { animation: fadeUp 0.6s 0.35s ease both; }
    .cs-card:nth-child(3) { animation: fadeUp 0.6s 0.5s ease both; }
	
	
    /* ── card-as-link: neutralise default <a> styles ── */
    a.cs-card {
      display: flex;
      text-decoration: none;
      color: inherit;
      cursor: pointer;
    }
    a.cs-card:hover,
    a.cs-card:focus { text-decoration: none; color: inherit; }

    /* ── DESIGN SYSTEMS CALLOUT — Option A: inline ruled strip ── */
    .ds-callout {
      padding: 0;
      margin: 0;
    }
    .ds-callout__inner {
      max-width: 1200px;      /* exact match to cs-grid max-width */
      margin: 0 auto;
      padding: 32px 24px;     /* exact match to cs-grid padding: 0 24px */
      border-top: 1px solid #000;
      border-bottom: 1px solid #000;
      display: flex;
      align-items: center;
      gap: 32px;
    }
    .ds-callout__diagram {
      flex-shrink: 0;
      width: 80px;
      height: 80px;
    }
    .ds-callout__text {
      flex: 1;
    }
    .ds-callout__eyebrow {
      font-family: 'Open Sans', sans-serif;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 4px;
      text-transform: uppercase;
      color: #777;
      margin-bottom: 6px;
    }
    .ds-callout__heading {
      font-family: 'Open Sans', sans-serif;
      font-size: 18px;
      font-weight: 400;
      letter-spacing: 2px;
      color: #000;
      margin: 0 0 8px;
      line-height: 1.25;
    }
    .ds-callout__body {
      font-family: 'Open Sans', sans-serif;
      font-size: 15px;
      font-weight: 400;
      color: #444;
      line-height: 1.85;
      letter-spacing: .3px;
      margin-bottom: 12px;
    }
    .ds-callout__link {
      font-family: 'Open Sans', sans-serif;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: #000;
      text-decoration: none;
      border-bottom: 1px solid #000;
      padding-bottom: 2px;
      transition: opacity .2s;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .ds-callout__link:hover { opacity: .5; }
    @media (max-width: 600px) {
      .ds-callout__inner { flex-direction: column; align-items: flex-start; gap: 20px; }
      .ds-callout__diagram { width: 64px; height: 64px; }
    }