/*
© 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 5 (content pages, Session 0027)
  Project: Paul Lambourn Web Site (PLWS) — www.plazdiez.co.za
  Generated: 2026-08-01T17:04:59+1000
  Audience: Jacques (French, hardware/C bg), Ryan (14), Ava (9), Students (15-23)
  Contains: page-hero (subpage title bands), About timeline, case-study
    layout, Patents/Process teasers, Contact page, legacy Section 6A classes
    (moved from styles_001.css to keep every file under 480 lines).
  Spec: docs/PLWS_Chrome_Spec_0027.md
*/

/* ============================================================
   SECTION 21: PAGE-HERO — subpage title band
   -- Every content page opens with an eyebrow label, a big title
     and one honest intro line, over a hairline rule.
   ============================================================ */
.page-hero {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--sp-3xl) var(--sp-lg) var(--sp-2xl);
  text-align: center;
  border-bottom: 1px solid rgba(20, 22, 26, 0.1);
}
.page-hero .eyebrow {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--clr-brand);
  font-weight: 600;
  display: block;
  margin-bottom: var(--sp-sm);
}
.page-hero h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: var(--sp-md); }
.page-hero p { font-size: 1.05rem; opacity: 0.85; max-width: 640px; margin: 0 auto; }

/* ============================================================
   SECTION 22: ABOUT — vertical timeline
   -- Ava: like a ladder of Paul's life — each rung is a year
     with a little story card.
   -- Desktop: cards alternate left/right of a center rail.
     Mobile: single left rail, cards stack.
   ============================================================ */
.timeline {
  position: relative;
  max-width: 900px;
  margin: var(--sp-2xl) auto;
  padding: var(--sp-md) 0;
}
.timeline::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 2px;
  background: rgba(20, 22, 26, 0.15);
  transform: translateX(-50%);
}
.timeline-item {
  position: relative;
  width: 50%;
  padding: 0 var(--sp-xl) var(--sp-2xl);
}
.timeline-item:nth-child(odd) { left: 0; text-align: right; }
.timeline-item:nth-child(even) { left: 50%; }
/* Year badge sits ON the rail */
.timeline-year {
  display: inline-block;
  background: var(--clr-brand);
  color: var(--clr-brand-ink);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 1px;
  padding: var(--sp-xs) var(--sp-md);
  border-radius: 999px;
  margin-bottom: var(--sp-sm);
  position: relative;
  z-index: 1;
}
.timeline-card {
  background: var(--clr-white);
  border: 1px solid rgba(20, 22, 26, 0.08);
  border-radius: var(--radius-md);
  padding: var(--sp-lg);
  box-shadow: var(--shadow-sm);
  text-align: left;
}
.timeline-card h3 { font-size: 1.1rem; margin-bottom: var(--sp-xs); }
.timeline-card p { font-size: 0.95rem; opacity: 0.85; margin-bottom: 0; }
/* Impact band closes the timeline (cost-reduction proof) */
.timeline-impact {
  max-width: 900px;
  margin: 0 auto var(--sp-2xl);
  background: var(--clr-ink);
  color: var(--clr-paper);
  border-radius: var(--radius-md);
  padding: var(--sp-xl);
  text-align: center;
}
.timeline-impact h3 { color: var(--clr-brand); margin-bottom: var(--sp-sm); }
.timeline-impact p { margin-bottom: 0; opacity: 0.9; }

/* ============================================================
   SECTION 23: CASE STUDY — story arc blocks
   -- Structure per Plazdiez_Uniquenesses.docx: Problem, Concept,
     Development, Challenges, Final product, Lessons learned.
     "Companies buy thinking."
   ============================================================ */
.case-study { max-width: 800px; margin: 0 auto; padding: 0 var(--sp-lg) var(--sp-3xl); }
.cs-section {
  border-left: 3px solid var(--clr-brand);
  padding: var(--sp-sm) 0 var(--sp-sm) var(--sp-lg);
  margin-bottom: var(--sp-xl);
}
.cs-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--clr-accent-hover);
  font-weight: 700;
  display: block;
  margin-bottom: var(--sp-xs);
}
.cs-section h2 { font-size: 1.3rem; margin-bottom: var(--sp-sm); }
.cs-section p { opacity: 0.9; }
.cs-figure {
  margin: var(--sp-lg) 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--clr-surface);
}
.cs-figure img { width: 100%; }
.cs-figure figcaption {
  padding: var(--sp-sm) var(--sp-md);
  font-size: 0.85rem;
  color: var(--clr-steel);
  background: var(--clr-surface);
}

/* ============================================================
   SECTION 24: TEASER (Patents / Process — honest, not "coming soon")
   -- One confident paragraph + CTA. Fixes defect D10 (dead-end
     placeholder pages).
   ============================================================ */
.teaser {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--sp-2xl) var(--sp-lg) var(--sp-3xl);
  text-align: center;
}
.teaser p { font-size: 1.05rem; opacity: 0.9; margin-bottom: var(--sp-xl); }
.teaser-cta { margin-top: var(--sp-md); }
/* Centered chip row (process steps) */
.chips.centered { justify-content: center; margin-bottom: var(--sp-lg); }

/* ============================================================
   SECTION 25: CONTACT page
   -- The conversion page: one giant friendly mailto button,
     a response-time promise, and the location line.
   ============================================================ */
.contact-hero {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--sp-3xl) var(--sp-lg);
  text-align: center;
}
.contact-hero h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: var(--sp-md); }
.contact-hero .contact-lead { font-size: 1.1rem; opacity: 0.85; margin-bottom: var(--sp-2xl); }
.contact-mail-btn {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  padding: var(--sp-md) var(--sp-2xl);
  word-break: break-all;
}
.contact-note {
  margin-top: var(--sp-xl);
  font-size: 0.9rem;
  color: var(--clr-steel);
}
.contact-note strong { color: var(--clr-charcoal); }

/* ============================================================
   SECTION 26: LEGACY 6A CLASSES (moved from styles_001.css, s0027)
   -- Kept for backward compatibility; new pages use the v2
     components above instead.
   ============================================================ */
.page-content { text-align: left; max-width: 800px; margin: 0 auto; }
.services-list { text-align: left; max-width: 500px; margin: 0 auto; line-height: 2.2; padding: var(--sp-lg); }
.industries-list { text-align: left; max-width: 700px; margin: 0 auto; line-height: 2; }
.industry-sublist { padding-left: var(--sp-lg); margin-bottom: var(--sp-md); }
.industry-sublist-p { padding-left: var(--sp-lg); margin-bottom: var(--sp-md); }
.about-timeline { margin-top: var(--sp-xl); }
.about-timeline-entry { margin-top: var(--sp-lg); }
.about-impact-entry { margin-top: var(--sp-xl); color: var(--clr-accent); }
.about-name { text-align: center; }
.about-subtitle { text-align: center; font-style: italic; color: var(--clr-accent); }

/* ============================================================
   SECTION 27: CONTENT-PAGE RESPONSIVE
   ============================================================ */
@media screen and (max-width: 820px) {
  /* Timeline collapses to a single left rail */
  .timeline::before { left: 12px; }
  .timeline-item,
  .timeline-item:nth-child(odd),
  .timeline-item:nth-child(even) {
    left: 0;
    width: 100%;
    text-align: left;
    padding: 0 0 var(--sp-xl) var(--sp-2xl);
  }
  .page-hero { padding: var(--sp-2xl) var(--sp-md) var(--sp-xl); }
}
@media screen and (min-width: 2561px) {
  .timeline, .timeline-impact { max-width: 1400px; }
  .case-study, .teaser, .contact-hero { max-width: 1100px; }
}