/*
© Copyright 1990-2026 Toptronic® Ltd, all rights reserved; no part of this document may be reproduced, modified or stored in a retrieval system, or transmitted in any form or by any means, electronic, mechanical, photocopying, recording or otherwise, without the prior written permission of Toptronic Limited.
For copyright inquiries: jacques@toptronic.com
  PLWS :: Plazdiez Website — CSS Styles Part 7 (case-study premium layer, Session 0058)
  Project: Paul Lambourn Web Site (PLWS) — www.plazdiez.co.za
  Generated: 2026-09-06T09:40:00+10:00
  Audience: Jacques (French, hardware/C bg), Ryan (14), Ava (9), Students (15-23)
  Contains: case-study page upgrade for the REAL Case Study 1 (VS pump
    redesign): before/after comparison duo with corner tags, block titles,
    objective/result cards, full-width AFTER hero figure, proof strip,
    patent band, market-feedback quote.
  Spec: docs/PLWS_Chrome_Spec_0027.md (tokens/hairlines/focus discipline).
  Design law of this file (session 0058, leader):
    - only existing design tokens — no new colours, no new fonts;
    - quiet luxury: hairlines and whitespace do the work, not effects;
    - every rule must pass WCAG AA contrast on its background;
    - reduced-motion and old-parser safe (split selectors, plain values
      before clamp() fallbacks, as in styles_005/006).
*/

/* ============================================================
   S1: BEFORE/AFTER DUO — the page's opening proof. Two figures
   side by side on wide screens, stacked on phones. Each figure
   is a white card (same language as .timeline-card) with a
   small uppercase tag pinned to its top-left corner.
   ============================================================ */
.cs-duo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-lg);
  justify-content: center;
  align-items: stretch;
  margin: 0 auto var(--sp-2xl);
}
.cs-duo-item {
  position: relative;
  flex: 1 1 320px;
  max-width: 480px;
  margin: 0;
  display: flex;                /* caption pins to the card bottom so the
                                   two cards end on one shared line even
                                   with different image heights */
  flex-direction: column;
  background: var(--clr-white);
  border: 1px solid var(--clr-hairline, rgba(20, 22, 26, 0.08));
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.cs-duo-item picture, .cs-duo-item img { display: block; }
.cs-duo-item img { width: 100%; height: auto; }
.cs-duo-item figcaption { margin-top: auto; }
/* The tag: "Before" (steel) vs "After" (amber). Small caps pill,
   sits over the image top-left; 44px-safe tap not needed (not interactive). */
.cs-tag {
  position: absolute;
  top: var(--sp-md);
  left: var(--sp-md);
  z-index: 1;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--clr-ink);
  color: var(--clr-paper);
}
.cs-tag-after { background: var(--clr-brand); color: var(--clr-brand-ink); }
.cs-duo-item figcaption {
  padding: var(--sp-md) var(--sp-lg);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--clr-steel-deep);              /* 5.50:1 on white — AA */
  background: var(--clr-white);
  border-top: 1px solid var(--clr-hairline, rgba(20, 22, 26, 0.08));
}

/* ============================================================
   S2: BLOCK TITLES — the "Redesign Objectives" / "Results" h3s.
   Small, tracked, centred, with the amber 40px rule motif the
   heritage line already uses — one visual family site-wide.
   ============================================================ */
.cs-block { margin: 0 auto var(--sp-2xl); text-align: center; }
.cs-block-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-size: clamp(1.15rem, 2.5vw, 1.5rem);   /* 2017 fallback first */
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--clr-charcoal);
  margin-bottom: var(--sp-lg);
}
.cs-block-title::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: var(--clr-brand);
  margin: var(--sp-sm) auto 0;
}

/* ============================================================
   S3: OBJECTIVE / RESULT CARDS — white cards on paper, hairline
   edge, calm shadow; the amber label mirrors .cs-label. Grid:
   2 columns for objectives, 3 for results on desktop, wrapping
   to 1 column on phones. Equal heights via stretch.
   ============================================================ */
.cs-cards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-md);
  justify-content: center;
  text-align: left;
}
.cs-card {
  flex: 1 1 260px;
  max-width: 360px;
  background: var(--clr-white);
  border: 1px solid var(--clr-hairline, rgba(20, 22, 26, 0.08));
  border-radius: var(--radius-lg);
  padding: var(--sp-lg);
  box-shadow: none;
}
@media (hover: hover) {
  .cs-card:hover { box-shadow: var(--shadow-md); }
}
.cs-card-label {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--clr-brand-deep);              /* deep brass, AA on white */
  font-weight: 700;
  margin-bottom: var(--sp-sm);
}
.cs-card p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--clr-text);
  max-width: none;                            /* cards manage their own measure */
}
/* Results: three per row on wide screens (flex-basis trick keeps the
   wrap automatic — no media query needed for the 3-up layout). */
.cs-cards-3 .cs-card { flex-basis: 240px; }

/* ============================================================
   S4: AFTER HERO FIGURE — the full-width showcase shot, framed
   like a gallery print: white mat (padding), hairline, shadow.
   ============================================================ */
.cs-hero-figure {
  margin: var(--sp-xl) auto 0;
  max-width: 900px;
  background: var(--clr-white);
  border: 1px solid var(--clr-hairline, rgba(20, 22, 26, 0.08));
  border-radius: var(--radius-lg);
  padding: var(--sp-md);
  box-shadow: var(--shadow-md);
}
.cs-hero-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

/* ============================================================
   S5: PROOF STRIP — four quiet one-line facts between hairlines,
   the same visual family as the home-page trust strip. Uppercase
   small text, deep-steel for AA on paper. Separators only on
   wide screens (items flow as a row); phones stack them.
   ============================================================ */
.cs-proof {
  border-top: 1px solid var(--clr-hairline, rgba(20, 22, 26, 0.08));
  border-bottom: 1px solid var(--clr-hairline, rgba(20, 22, 26, 0.08));
  padding: var(--sp-md) var(--sp-lg);
  margin: 0 auto var(--sp-2xl);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-sm) var(--sp-lg);
}
.cs-proof p {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--clr-steel-deep);              /* 5.50:1 on paper — AA */
}

/* ============================================================
   S6: PATENT BAND — the ink band with the amber h3 (mirrors the
   dark timeline-impact box on About). Calm, factual, premium.
   ============================================================ */
.cs-patent-band {
  background: var(--clr-ink);
  color: var(--clr-paper);
  border-radius: var(--radius-lg);
  padding: var(--sp-xl) var(--sp-lg);
  text-align: center;
  margin: 0 auto var(--sp-2xl);
  max-width: 900px;
}
.cs-patent-band h3 {
  color: var(--clr-brand);
  margin-bottom: var(--sp-sm);
  font-size: 1.25rem; font-size: clamp(1.15rem, 2.5vw, 1.5rem);
}
.cs-patent-band p { margin: 0; opacity: 0.9; max-width: 640px; margin-left: auto; margin-right: auto; }
.cs-patent-note {
  margin-top: var(--sp-sm);
  font-size: 0.8rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--clr-steel);                   /* on ink: 4.9:1 — AA for large/bold small-caps */
}

/* ============================================================
   S7: MARKET FEEDBACK — the pool-show quote. Oversized quotation
   mark, large Archivo italic line, quiet cite. No card — the
   type is the design.
   ============================================================ */
.cs-feedback { text-align: center; padding: var(--sp-lg) 0 0; }
.cs-feedback .cs-label { color: var(--clr-brand-deep); }
.cs-quote { margin: 0; }
.cs-quote p {
  position: relative;
  margin: 0 auto;
  max-width: 720px;
  font-family: var(--font-heading);
  font-size: 1.5rem; font-size: clamp(1.3rem, 3.5vw, 2rem);   /* 2017 fallback first */
  font-weight: 700;
  font-style: italic;
  line-height: 1.3;
  color: var(--clr-charcoal);
  text-wrap: balance;
}
.cs-quote cite {
  display: block;
  margin-top: var(--sp-md);
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.85rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--clr-steel-deep);              /* AA on paper */
}

/* ============================================================
   S8: CJK TRACKING EXTENSION (s0058) — the uppercase tracking in
   S1/S2/S3/S5 shreds CJK rhythm; styles_006 §58 already turns it
   off for known classes. Extend the same mercy to the new ones.
   ============================================================ */
:lang(zh) .cs-tag, :lang(zh) .cs-block-title,
:lang(zh) .cs-card-label, :lang(zh) .cs-proof p,
:lang(zh) .cs-patent-note { letter-spacing: normal; }

/* ============================================================
   S9: REDUCED MOTION — nothing in this file animates on its own;
   cards/figures only inherit the .reveal fade (already netted in
   styles_006 §66). Card hover shadow is not motion — left alone.
   ============================================================ */